*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f3f6fb;color:#172033}
a{color:#2563eb;text-decoration:none}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 24px;background:#101827;color:#fff;position:sticky;top:0;z-index:10;box-shadow:0 8px 24px rgba(0,0,0,.16)}
.topbar a{color:#fff;margin-left:15px;font-weight:700}
.topbar a:hover{opacity:.85}
.nav-user{margin-left:15px;color:#cbd5e1;font-size:13px}
.brand a{font-size:28px;font-weight:900;letter-spacing:.5px}
.container{max-width:1180px;margin:26px auto;padding:0 16px}
.hero{background:linear-gradient(135deg,#0f172a,#1d4ed8 55%,#7c3aed);color:white;border-radius:28px;padding:46px;box-shadow:0 18px 52px rgba(37,99,235,.25);overflow:hidden;position:relative}
.hero:after{content:"";position:absolute;width:360px;height:360px;border-radius:50%;right:-100px;top:-120px;background:rgba(255,255,255,.13)}
.hero h1{font-size:54px;margin:0 0 10px;letter-spacing:-1px}
.hero p{font-size:20px;max-width:790px;line-height:1.45}
.hero .sub{color:#dbeafe}
.card{background:#fff;border-radius:20px;padding:22px;margin:16px 0;box-shadow:0 10px 28px rgba(0,0,0,.08)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.feature-card{border:1px solid #e5e7eb;transition:.18s transform,.18s box-shadow}
.feature-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.12)}
.btn,button{display:inline-block;border:0;background:#2563eb;color:#fff;padding:11px 17px;border-radius:12px;cursor:pointer;font-weight:800}
.btn:hover,button:hover{filter:brightness(.96)}
.btn.secondary{background:#334155}.btn.danger{background:#dc2626}.btn.success{background:#16a34a}.btn.warning{background:#f59e0b}.btn.light{background:#fff;color:#111827}
input,textarea,select{width:100%;padding:11px;border:1px solid #d1d5db;border-radius:12px;margin:6px 0 13px;background:white}
textarea{min-height:110px}label{font-weight:800}
.notice{background:#ecfeff;border:1px solid #67e8f9;padding:13px;border-radius:14px}
.error{background:#fee2e2;border:1px solid #f87171;padding:13px;border-radius:14px}
.successbox{background:#dcfce7;border:1px solid #4ade80;padding:13px;border-radius:14px}
.fake-video{height:280px;border-radius:18px;background:linear-gradient(135deg,#0f172a,#475569);color:white;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:900;position:relative;overflow:hidden}
.fake-video:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 10%,rgba(255,255,255,.18),transparent 35%)}
.badge{display:inline-block;padding:5px 9px;border-radius:999px;background:#e2e8f0;font-size:12px;font-weight:800}
.live-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#22c55e;margin-right:6px;box-shadow:0 0 0 6px rgba(34,197,94,.14)}
.table{width:100%;border-collapse:collapse;background:white;border-radius:14px;overflow:hidden}
.table th,.table td{padding:11px;border-bottom:1px solid #e5e7eb;text-align:left}
.stats{font-size:34px;font-weight:900;margin:8px 0}.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.footer{text-align:center;padding:26px;color:#64748b}
.kicker{text-transform:uppercase;letter-spacing:.12em;font-weight:900;font-size:13px;color:#bfdbfe}
.section-title{font-size:34px;margin:26px 0 8px}
.role-icon{font-size:42px;margin-bottom:8px}
.quicklinks{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.quicklinks a{background:#fff;border-radius:16px;padding:18px;box-shadow:0 8px 22px rgba(0,0,0,.07);font-weight:900;color:#111827}
@media(max-width:760px){.topbar{display:block}.topbar nav{margin-top:10px}.topbar a{display:inline-block;margin:5px}.hero{padding:30px}.hero h1{font-size:38px}.hero p{font-size:17px}}

.admin-nav{position:sticky;top:0;z-index:9;display:flex;gap:10px;flex-wrap:wrap;align-items:center;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-radius:0 0 20px 20px;margin:0 auto 18px;max-width:1180px;padding:14px 16px;box-shadow:0 10px 26px rgba(0,0,0,.10)}
.admin-nav .btn{margin:0}
.video-wrap{position:relative;display:block;width:100%;background:#000;border-radius:16px;overflow:hidden}
.viewer-watermark{pointer-events:none;position:absolute;inset:0;z-index:5;overflow:hidden;opacity:.24}
.viewer-watermark span{position:absolute;color:#fff;font-weight:900;font-size:22px;text-shadow:0 2px 6px rgba(0,0,0,.8);transform:rotate(-24deg);white-space:nowrap}
.viewer-watermark .wm1{left:6%;top:14%}.viewer-watermark .wm2{right:8%;top:42%}.viewer-watermark .wm3{left:28%;bottom:12%}.viewer-watermark .wm4{left:45%;top:70%}
.reset-help{font-size:14px;margin-top:10px}
@media(max-width:760px){.admin-nav{top:0;border-radius:0;padding:10px}.admin-nav .btn{font-size:13px;padding:9px 10px}.viewer-watermark span{font-size:15px}}

.tokenbar{display:flex;justify-content:space-between;gap:18px;align-items:center;flex-wrap:wrap}
.stream-layout{display:grid;grid-template-columns:minmax(320px,2fr) minmax(280px,1fr);gap:18px;align-items:start}
.creator-video-frame{position:relative;background:#000;border-radius:18px;overflow:hidden;border:4px solid #16a34a;min-height:320px;display:flex;align-items:center;justify-content:center;transition:.2s border-color,.2s box-shadow}
.creator-video-frame.cam-live{border-color:#dc2626;box-shadow:0 0 0 4px rgba(220,38,38,.12)}
.creator-video-frame.cam-off{border-color:#16a34a;box-shadow:0 0 0 4px rgba(22,163,74,.12)}
.creator-video-frame video{width:100%;max-height:520px;background:#000;display:block}
.blind-overlay{position:absolute;inset:0;background:rgba(128,128,128,.90);color:#fff;font-size:32px;font-weight:900;display:flex;align-items:center;justify-content:center;text-shadow:0 2px 8px rgba(0,0,0,.7);z-index:4}
.blind-overlay.hidden{display:none}
.creator-chat-box{height:520px;overflow:auto;background:#f8fafc;border:1px solid #e5e7eb;border-radius:14px;padding:12px}
.stream-actions button,.stream-actions .btn{margin-bottom:6px}
@media(max-width:900px){.stream-layout{grid-template-columns:1fr}.creator-chat-box{height:320px}.creator-video-frame{min-height:220px}}

/* Modern Startseite / Login-Wege */
.modern-hero{padding:54px 46px;background:linear-gradient(135deg,#0f172a,#2444d8 62%,#18b56b);}
.hero-actions{margin-top:26px}.btn.big{font-size:18px;padding:15px 24px;border-radius:16px;box-shadow:0 10px 24px rgba(0,0,0,.12)}
.btn.primary-soft{background:linear-gradient(135deg,#2563eb,#4f7cff);color:#fff}.btn.success-soft{background:linear-gradient(135deg,#12a150,#20c96b);color:#fff}
.clean-card{border:1px solid rgba(15,23,42,.06);box-shadow:0 14px 38px rgba(15,23,42,.08)}
.section-head{display:flex;justify-content:space-between;gap:16px;align-items:end;margin-bottom:18px}.section-head h2{margin:4px 0 0;font-size:34px}.muted{color:#64748b}.kicker.accent{color:#2563eb}
.preview-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.preview-cam{display:block;color:#0f172a;background:#f8fafc;border:1px solid #e2e8f0;border-radius:18px;padding:10px;transition:opacity .35s,transform .2s,box-shadow .2s}.preview-cam:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(15,23,42,.10)}.preview-cam strong{display:block;margin:10px 4px 2px}.preview-cam small{display:block;margin:0 4px 4px;color:#64748b}.hidden-preview{display:none!important}.cam-thumb{height:150px;border-radius:14px;background:center/cover no-repeat;position:relative;overflow:hidden}.cam-thumb:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,.45))}.demo-thumb{background:linear-gradient(135deg,#e2e8f0,#cbd5e1)}.preview-live,.no-audio{position:absolute;z-index:2;border-radius:999px;padding:6px 9px;font-size:12px;font-weight:900}.preview-live{left:10px;top:10px;background:rgba(15,23,42,.82);color:white}.no-audio{right:10px;bottom:10px;background:rgba(255,255,255,.86);color:#0f172a}.admin-hidden-link{float:right;color:#eef2f7!important;font-size:9px}.entry-card{max-width:760px;margin:36px auto;padding:34px}.entry-card h1{font-size:44px;margin:8px 0}.entry-actions{margin-top:24px}.tag-actions{display:flex;gap:8px;flex-wrap:wrap}.tag-pill{display:inline-block;border:1px solid #dbeafe;background:#eff6ff;color:#1e3a8a;padding:9px 13px;border-radius:999px;font-weight:800}.tag-pill:hover{background:#dbeafe}.tag-pill.active{background:#2563eb;color:#fff;border-color:#2563eb}
@media(max-width:950px){.preview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.section-head{display:block}.cam-thumb{height:135px}}
@media(max-width:560px){.preview-grid{grid-template-columns:1fr}.btn.big{width:100%;text-align:center}.modern-hero{padding:34px 22px}.entry-card h1{font-size:34px}}

/* Fix 2026-05-05: helle, harmonische Navigation statt schwarzem Balken */
.soft-topbar{background:linear-gradient(135deg,#f8fbff,#eef6ff);color:#0f172a;border-bottom:1px solid #dbeafe;box-shadow:0 8px 28px rgba(37,99,235,.10)}
.soft-topbar a{color:#0f172a}.soft-topbar .nav-user{color:#475569}.soft-topbar .brand a{color:#173b8f}
.equal-actions{display:grid;grid-template-columns:1fr;gap:8px}.equal-actions .btn,.equal-actions button{width:100%;text-align:center;margin:0;min-height:52px;display:flex;align-items:center;justify-content:center;font-size:16px}
.rating-stars{display:flex;gap:4px;margin:10px 0;align-items:center}.rating-stars .star-btn{background:transparent!important;border:0!important;box-shadow:none!important;padding:2px 3px;border-radius:0;font-size:25px;line-height:1;color:#cbd5e1;text-shadow:0 1px 2px rgba(15,23,42,.12);transition:transform .12s ease,color .12s ease}.rating-stars .star-btn:hover,.rating-stars .star-btn.active{color:#f59e0b;filter:none;transform:scale(1.08)}
.fav-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}.small-muted{font-size:13px;color:#64748b}.online-dot{display:inline-block;width:11px;height:11px;border-radius:50%;background:#22c55e;margin-right:6px}.offline-dot{display:inline-block;width:11px;height:11px;border-radius:50%;background:#94a3b8;margin-right:6px}
.blind-overlay{background:rgba(128,128,128,.95)!important}

.favorite-btn{background:#fff7ed!important;color:#9a3412!important;border:1px solid #fed7aa!important;box-shadow:0 8px 18px rgba(251,146,60,.12)!important}.favorite-btn:hover{background:#ffedd5!important;filter:none!important}.price-box{background:#f8fafc;border:1px solid #e5e7eb;border-radius:16px;padding:14px;margin:14px 0}.inline-price{display:flex;gap:10px;align-items:center;margin:8px 0}.inline-price input{max-width:160px}.online-dot,.offline-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:7px}.online-dot{background:#16a34a}.offline-dot{background:#94a3b8}


/* Finaler Feinschliff 2026-05-05: keine dunklen/gruseligen Buttons */
.btn.secondary,
.btn.favorite-btn,
.favorite-btn,
.admin-nav .btn,
.topbar nav a {
    background: linear-gradient(135deg,#eef6ff,#ffffff) !important;
    color:#173b8f !important;
    border:1px solid #cfe2ff !important;
    box-shadow:0 8px 18px rgba(37,99,235,.08) !important;
}
.btn.secondary:hover,
.btn.favorite-btn:hover,
.favorite-btn:hover,
.admin-nav .btn:hover,
.topbar nav a:hover{filter:none!important;background:#eaf3ff!important;transform:translateY(-1px)}
.btn.light{background:#fff!important;color:#173b8f!important;border:1px solid #cfe2ff!important}
.btn.danger{background:linear-gradient(135deg,#ef4444,#f87171)!important;color:#fff!important}
.btn.warning{background:linear-gradient(135deg,#f59e0b,#fbbf24)!important;color:#111827!important}
.btn.success{background:linear-gradient(135deg,#16a34a,#22c55e)!important;color:#fff!important}
button:not(.star-btn):not(.favorite-btn){box-shadow:0 8px 18px rgba(37,99,235,.08)}
.small-muted{color:#64748b;font-size:14px}.fav-row{margin:8px 0 6px}.favorite-btn{border-radius:999px!important;padding:10px 14px!important}
.rating-stars .star-btn{width:auto!important;min-height:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;background:transparent!important;color:#cbd5e1!important;border:0!important;box-shadow:none!important;text-shadow:0 1px 2px rgba(15,23,42,.16)}
.rating-stars .star-btn.active,.rating-stars .star-btn:hover{color:#f6b21a!important;text-shadow:0 0 10px rgba(246,178,26,.35)}
.favorite-cam-thumb{height:180px;border-radius:16px;background:#e2e8f0 center/cover no-repeat;position:relative;overflow:hidden;margin-bottom:12px}.favorite-cam-thumb:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,23,42,.05),rgba(15,23,42,.28))}.status-pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:7px 10px;font-weight:900;background:#f8fafc;border:1px solid #e2e8f0}.online-dot,.offline-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px}.online-dot{background:#22c55e;box-shadow:0 0 0 5px rgba(34,197,94,.15)}.offline-dot{background:#94a3b8}.entry-actions .btn{min-width:190px;text-align:center}.back-cams{margin-bottom:14px}

/* Startseite freundlicher und heller */
.modern-hero{
    background:linear-gradient(135deg,#f8fbff,#eaf3ff 58%,#ecfdf5)!important;
    color:#0f172a!important;
    border:1px solid #dbeafe;
    box-shadow:0 18px 44px rgba(37,99,235,.12)!important;
}
.modern-hero .sub{color:#475569!important}.modern-hero .kicker{color:#2563eb!important}
.hero:after{background:rgba(37,99,235,.08)!important}


/* Restfix 2026-05-05: Chat kompakter, Eingabe oben, neueste Posts oben */
.btn.light-soft{background:linear-gradient(135deg,#ffffff,#eef6ff)!important;color:#173b8f!important;border:1px solid #cfe2ff!important}
.chat-card{margin-top:14px}.compact-token-card{margin-top:14px}
.chat-input-row{display:grid;grid-template-columns:minmax(120px,1fr) auto;gap:10px;align-items:center;margin:10px 0 12px}
.chat-input-row input{margin:0;min-height:48px}.chat-input-row button,.chat-input-row .btn{min-height:48px;display:flex;align-items:center;justify-content:center;white-space:nowrap}
.live-chat-box{height:220px;overflow:auto;background:#f8fafc;border:1px solid #e5e7eb;border-radius:14px;padding:10px}
.viewer-chat-box{height:210px}.creator-chat-box{height:260px!important}
.chat-row{margin:0 0 8px;padding:8px 10px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 3px 10px rgba(15,23,42,.04)}
.chat-row small{color:#64748b}
@media(max-width:640px){.chat-input-row{grid-template-columns:1fr}.chat-input-row button,.chat-input-row .btn{width:100%}}

.ad-box{margin:18px 0;padding:12px;border:1px solid #eadfd4;border-radius:18px;background:#fffaf6;text-align:center;box-shadow:0 8px 20px rgba(120,80,40,.07)}
.ad-box img{max-width:100%;height:auto;border-radius:14px;display:inline-block}
.ad-label{font-size:12px;color:#9a7a61;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
textarea{width:100%;border:1px solid #e5d8ce;border-radius:14px;padding:12px;background:#fff;color:#3b2b22}
select{width:100%;border:1px solid #e5d8ce;border-radius:14px;padding:12px;background:#fff;color:#3b2b22}
button.danger,.danger{background:#f8d7da!important;color:#7b1d25!important;border:1px solid #f1b0b7!important}
@media(max-width:760px){.grid.two{grid-template-columns:1fr}}

/* Kontaktbereich 2026-05-05 */
.contact-grid{align-items:stretch}.contact-ad-card{display:flex;flex-direction:column}.contact-thumb{height:180px;border-radius:16px;background:#e2e8f0 center/cover no-repeat;margin-bottom:12px;border:1px solid #e5e7eb}.contact-detail-img{height:360px;border-radius:18px;background:#e2e8f0 center/cover no-repeat;margin-bottom:18px;border:1px solid #e5e7eb}.contact-detail{max-width:920px;margin-left:auto;margin-right:auto}.contact-ad-card .btn{margin-top:auto}.light-soft{background:linear-gradient(135deg,#fff,#eef6ff)!important;color:#173b8f!important;border:1px solid #cfe2ff!important}
@media(max-width:760px){.contact-detail-img{height:230px}.contact-thumb{height:150px}}

.real-video-wrap{position:relative;background:#111;border-radius:18px;overflow:hidden;border:1px solid rgba(15,23,42,.12);box-shadow:0 12px 32px rgba(15,23,42,.18)}
.real-video-wrap video{width:100%;max-height:620px;background:#000;display:block;border-radius:18px}
.live-placeholder,.demo-thumb{background:linear-gradient(135deg,#f8fafc,#e0f2fe)!important;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.live-placeholder:before{content:"LIVE";font-weight:900;font-size:34px;color:#0f172a;opacity:.18;letter-spacing:.12em}

/* Moderation, Geschenke, Themes 2026-05-05 */
.admin-report-alert{position:fixed;right:18px;top:86px;z-index:9999;max-width:360px;background:#fff1f2;border:2px solid #fb7185;color:#7f1d1d;border-radius:18px;padding:16px;box-shadow:0 18px 44px rgba(127,29,29,.22)}
.report-panel{background:#fff7f7;border:1px solid #fecaca;border-radius:16px;padding:14px;margin-top:10px}.viewer-actions-card h3{margin-top:18px}.gift-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}.gift-btn{background:#fff!important;color:#172033!important;border:1px solid #fed7aa!important;border-radius:16px!important;padding:12px!important;box-shadow:0 8px 18px rgba(251,146,60,.10)!important;display:flex!important;flex-direction:column;align-items:center;gap:4px;min-height:94px}.gift-btn:hover{background:#fff7ed!important;transform:translateY(-2px)}.gift-btn{font-size:26px}.gift-btn span{font-size:14px;font-weight:900}.gift-btn b{font-size:12px;color:#9a3412}.theme-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}.theme-tile{display:block;border:2px solid #e5e7eb;border-radius:18px;padding:16px;min-height:95px;cursor:pointer}.theme-tile input{width:auto;margin-right:7px}.theme-tile span{display:block;font-size:13px;color:#64748b;margin-top:8px}.theme-tile:has(input:checked){border-color:#2563eb;box-shadow:0 10px 28px rgba(37,99,235,.16)}
:root{--theme-bg:#f3f6fb;--theme-text:#172033;--theme-primary:#2563eb;--theme-secondary:#eef6ff;--theme-accent:#16a34a;--theme-hero1:#f8fbff;--theme-hero2:#eaf3ff;--theme-card:#ffffff;--theme-border:#dbeafe;--theme-nav:#f8fbff;--theme-nav2:#eef6ff}
body.theme-style-01{--theme-primary:#2563eb;--theme-secondary:#eef6ff;--theme-accent:#16a34a;--theme-hero2:#eaf3ff}
body.theme-style-02{--theme-primary:#15803d;--theme-secondary:#ecfdf5;--theme-accent:#2563eb;--theme-hero2:#dcfce7;--theme-border:#bbf7d0}
body.theme-style-03{--theme-primary:#be185d;--theme-secondary:#fdf2f8;--theme-accent:#f97316;--theme-hero2:#fce7f3;--theme-border:#fbcfe8}
body.theme-style-04{--theme-primary:#7c3aed;--theme-secondary:#f5f3ff;--theme-accent:#06b6d4;--theme-hero2:#ede9fe;--theme-border:#ddd6fe}
body.theme-style-05{--theme-primary:#ea580c;--theme-secondary:#fff7ed;--theme-accent:#16a34a;--theme-hero2:#ffedd5;--theme-border:#fed7aa}
body.theme-style-06{--theme-primary:#0891b2;--theme-secondary:#ecfeff;--theme-accent:#22c55e;--theme-hero2:#cffafe;--theme-border:#a5f3fc}
body.theme-style-07{--theme-primary:#92400e;--theme-secondary:#fffbeb;--theme-accent:#ca8a04;--theme-hero2:#fef3c7;--theme-border:#fde68a}
body.theme-style-08{--theme-primary:#334155;--theme-secondary:#f8fafc;--theme-accent:#2563eb;--theme-hero2:#e2e8f0;--theme-border:#cbd5e1}
body.theme-style-09{--theme-primary:#0f766e;--theme-secondary:#f0fdfa;--theme-accent:#84cc16;--theme-hero2:#ccfbf1;--theme-border:#99f6e4}
body.theme-style-10{--theme-primary:#6d28d9;--theme-secondary:#faf5ff;--theme-accent:#db2777;--theme-hero2:#f3e8ff;--theme-border:#e9d5ff}
body.theme-style-11{--theme-primary:#e11d48;--theme-secondary:#fff1f2;--theme-accent:#f97316;--theme-hero2:#ffe4e6;--theme-border:#fecdd3}
body.theme-style-12{--theme-primary:#0284c7;--theme-secondary:#f0f9ff;--theme-accent:#0d9488;--theme-hero2:#e0f2fe;--theme-border:#bae6fd}
body.theme-style-13{--theme-primary:#a16207;--theme-secondary:#fefce8;--theme-accent:#ca8a04;--theme-hero2:#fef9c3;--theme-border:#fde047}
body.theme-style-14{--theme-primary:#0f766e;--theme-secondary:#f0fdfa;--theme-accent:#155e75;--theme-hero2:#ccfbf1;--theme-border:#5eead4}
body.theme-style-15{--theme-primary:#9f1239;--theme-secondary:#fff1f2;--theme-accent:#7c3aed;--theme-hero2:#ffe4e6;--theme-border:#fecdd3}
body.theme-style-16{--theme-primary:#4d7c0f;--theme-secondary:#f7fee7;--theme-accent:#a16207;--theme-hero2:#ecfccb;--theme-border:#d9f99d}
body.theme-style-17{--theme-primary:#1e40af;--theme-secondary:#eff6ff;--theme-accent:#475569;--theme-hero2:#dbeafe;--theme-border:#bfdbfe}
body.theme-style-18{--theme-primary:#b91c1c;--theme-secondary:#fef2f2;--theme-accent:#ea580c;--theme-hero2:#fee2e2;--theme-border:#fecaca}
body.theme-style-19{--theme-primary:#312e81;--theme-secondary:#eef2ff;--theme-accent:#0891b2;--theme-hero2:#e0e7ff;--theme-border:#c7d2fe}
body.theme-style-20{--theme-primary:#111827;--theme-secondary:#f8fafc;--theme-accent:#d97706;--theme-hero2:#f1f5f9;--theme-border:#d1d5db}
body[class*="theme-style-"]{background:var(--theme-bg);color:var(--theme-text)}body[class*="theme-style-"] a{color:var(--theme-primary)}body[class*="theme-style-"] .soft-topbar{background:linear-gradient(135deg,var(--theme-nav),var(--theme-nav2))!important;border-bottom-color:var(--theme-border)!important}body[class*="theme-style-"] .brand a{color:var(--theme-primary)!important}body[class*="theme-style-"] .modern-hero{background:linear-gradient(135deg,var(--theme-hero1),var(--theme-hero2),var(--theme-secondary))!important;border-color:var(--theme-border)!important}body[class*="theme-style-"] .btn:not(.danger):not(.warning):not(.success),body[class*="theme-style-"] button:not(.danger):not(.warning):not(.success):not(.star-btn):not(.gift-btn){background:linear-gradient(135deg,var(--theme-secondary),#fff)!important;color:var(--theme-primary)!important;border:1px solid var(--theme-border)!important}body[class*="theme-style-"] .btn.primary-soft{background:linear-gradient(135deg,var(--theme-primary),var(--theme-accent))!important;color:#fff!important}body[class*="theme-style-"] .card{background:var(--theme-card)}body[class*="theme-style-"] .kicker.accent,body[class*="theme-style-"] .modern-hero .kicker{color:var(--theme-primary)!important}
.card-lite{background:rgba(255,255,255,.72);border:1px solid rgba(0,0,0,.08);border-radius:14px;padding:12px;margin:12px 0}.badge.danger{background:#fee2e2;color:#991b1b}.creator-video-frame video{background:#111}.admin-table{width:100%;border-collapse:collapse}.admin-table td,.admin-table th{padding:8px;border-bottom:1px solid rgba(0,0,0,.08);text-align:left}


/* Creator Video UI Fix 2026-05-05 */
.creator-quick-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:18px 0;}
.creator-main-action{display:flex!important;align-items:center;justify-content:center;min-height:58px;font-size:1.05rem;text-align:center;}
.creator-video-help{border:2px solid rgba(37,99,235,.15);background:linear-gradient(135deg,#ffffff,#f7fbff);}
.recording-btn{background:#fff1f2!important;color:#be123c!important;border:2px solid #fecdd3!important;font-weight:800!important;}
.recording-btn:not(:disabled){background:#ffe4e6!important;color:#9f1239!important;box-shadow:0 10px 24px rgba(190,18,60,.16)!important;}
.recording-btn:disabled{opacity:.55;cursor:not-allowed;}
.upload-video-card{border:2px solid rgba(22,163,74,.18);background:linear-gradient(135deg,#ffffff,#f7fff9);}
.stream-actions{display:flex;flex-wrap:wrap;gap:10px;}
.stream-actions .btn{min-width:160px;}
/* Moderationspaket */
.btn.tiny{padding:4px 8px;font-size:12px;border-radius:10px;margin-left:8px;display:inline-block;line-height:1.2}
.inline-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.inline-form input,.inline-form select{max-width:260px}

/* Update 2026-05-05: Streamfenster + Chat nebeneinander, kleine Geschenkzeile, Geschenk-Animation */
.viewer-stream-grid{display:grid;grid-template-columns:minmax(360px,2fr) minmax(300px,1fr);gap:16px;align-items:stretch;margin-top:12px}
.viewer-stream-main,.viewer-stream-side{min-width:0}.stream-chat-card{height:100%;display:flex;flex-direction:column}.stream-chat-card .viewer-chat-box{height:420px;min-height:260px;flex:1}.real-video-wrap{position:relative;overflow:hidden}.gift-animation-layer{position:absolute;inset:0;pointer-events:none;z-index:5;overflow:hidden}.gift-fly{position:absolute;font-size:54px;animation:giftFlyUp 1.8s ease-out forwards;text-shadow:0 8px 20px rgba(0,0,0,.18)}@keyframes giftFlyUp{0%{transform:translateY(0) scale(.65) rotate(-8deg);opacity:0}15%{opacity:1}70%{opacity:1}100%{transform:translateY(-72vh) scale(1.35) rotate(8deg);opacity:0}}
.stream-underbar{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-top:12px;padding:8px 0}.viewer-actions-inline{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap}.gift-strip-wrap{display:flex;align-items:center;gap:8px;flex:1;min-width:280px}.gift-strip{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.gift-btn.compact-gift,.compact-gift{background:transparent!important;border:0!important;box-shadow:none!important;min-height:0!important;padding:3px 5px!important;border-radius:0!important;display:inline-flex!important;flex-direction:column!important;align-items:center!important;gap:0!important;font-size:22px!important;line-height:1.05!important;color:#172033!important}.gift-btn.compact-gift:hover{transform:translateY(-1px) scale(1.08);background:transparent!important}.gift-btn.compact-gift span{font-size:10px!important;font-weight:700!important;max-width:55px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gift-btn.compact-gift b{font-size:10px!important;color:#9a3412!important}.inline-rating-box{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0}.admin-permission-form{display:grid;gap:6px;margin-top:8px}.admin-permission-form label{display:block;font-size:13px}.admin-permission-form input{width:auto;margin-right:6px}
@media(max-width:950px){.viewer-stream-grid{grid-template-columns:1fr}.stream-chat-card .viewer-chat-box{height:280px}.stream-underbar{display:block}.gift-strip-wrap{margin-top:10px}}

/* Produktions-Polish 2026-05-05: eleganter, kompakter, klare Hover-States */
body{font-size:15px;line-height:1.42}.container{max-width:1220px;margin:18px auto;padding:0 14px}.card{border-radius:14px;padding:16px;margin:12px 0;box-shadow:0 8px 22px rgba(15,23,42,.065)}.hero{border-radius:20px;padding:32px}.hero h1{font-size:40px}.hero p{font-size:17px}.btn,button{padding:8px 12px;border-radius:10px;font-size:14px;transition:transform .14s ease,box-shadow .14s ease,filter .14s ease,background .14s ease}.btn.big{font-size:15px;padding:11px 16px;border-radius:12px}.btn:hover,button:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(15,23,42,.12);filter:brightness(1.02)}.topbar{padding:9px 18px}.brand a{font-size:22px}.topbar a{font-size:14px;margin-left:10px}.admin-nav{gap:7px;padding:9px 12px;border-radius:0 0 14px 14px}.admin-nav .btn{padding:7px 10px;font-size:13px}.section-head h2,.section-title{font-size:26px}.preview-grid{gap:10px}.preview-cam{border-radius:14px;padding:8px}.cam-thumb{height:126px}.table th,.table td,.admin-table th,.admin-table td{padding:7px;font-size:14px}input,textarea,select{padding:9px;border-radius:10px;margin:5px 0 10px}.stream-layout{grid-template-columns:minmax(420px,1.35fr) minmax(330px,.85fr);gap:12px}.creator-video-frame{border-width:3px;border-radius:14px;min-height:300px}.creator-chat-box{height:390px}.viewer-stream-grid{grid-template-columns:minmax(480px,1.45fr) minmax(350px,.9fr);gap:12px}.stream-chat-card .viewer-chat-box{height:380px}.gift-strip-wrap{padding:0}.viewer-live-notice{max-width:1220px;margin:10px auto 0;padding:0 14px;display:flex;gap:8px;flex-wrap:wrap}.viewer-live-notice a{display:inline-block;background:#ecfeff;border:1px solid #67e8f9;color:#155e75!important;border-radius:999px;padding:8px 12px;font-weight:800}.blink-alert{animation:mecamBlink 1s infinite;background:#dc2626!important;color:#fff!important}@keyframes mecamBlink{0%,100%{filter:brightness(1)}50%{filter:brightness(1.65);box-shadow:0 0 0 5px rgba(220,38,38,.18)}}.role-selected{outline:2px solid #f59e0b;box-shadow:0 0 0 5px rgba(245,158,11,.14)!important}.home-mini{font-weight:900}.inline-stars{font-size:15px;color:#f59e0b;letter-spacing:1px;white-space:nowrap}.category-count-note{font-size:13px;color:#64748b;margin-top:4px}
@media(max-width:900px){.stream-layout,.viewer-stream-grid{grid-template-columns:1fr}.creator-chat-box,.stream-chat-card .viewer-chat-box{height:280px}.hero h1{font-size:32px}.hero{padding:24px}.topbar nav{display:flex;gap:6px;flex-wrap:wrap}.topbar a{margin-left:0}.cam-thumb{height:130px}}

/* =========================================================
   MECAM UI REFRESH 2026-05-06
   Ziel: modernes, kompakteres Layout ohne Darkmode.
   Backend-Farbwahl bleibt ueber --theme-primary/--theme-accent aktiv.
   ========================================================= */
:root{
  --mecam-bg:#f5f7fb;
  --mecam-surface:#ffffff;
  --mecam-surface-2:#f8fafc;
  --mecam-text:#162033;
  --mecam-muted:#64748b;
  --mecam-line:#e2e8f0;
  --mecam-shadow:0 10px 28px rgba(15,23,42,.07);
  --mecam-shadow-soft:0 6px 18px rgba(15,23,42,.055);
  --mecam-radius:16px;
  --mecam-radius-sm:11px;
  --mecam-focus:0 0 0 4px rgba(37,99,235,.16);
}
body[class*="theme-style-"]{
  --mecam-accent:var(--theme-primary,#2563eb);
  --mecam-accent-2:var(--theme-accent,#7c3aed);
}
html{scroll-behavior:smooth;}
body{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif!important;
  background:radial-gradient(circle at top left,rgba(37,99,235,.08),transparent 30%),var(--mecam-bg)!important;
  color:var(--mecam-text)!important;
  font-size:14px!important;
  line-height:1.45!important;
}
a{color:var(--mecam-accent,#2563eb);}
.container{max-width:1240px!important;margin:16px auto!important;padding:0 14px!important;}
.topbar.soft-topbar,.soft-topbar{
  background:rgba(255,255,255,.82)!important;
  color:var(--mecam-text)!important;
  border-bottom:1px solid rgba(226,232,240,.9)!important;
  box-shadow:0 8px 26px rgba(15,23,42,.06)!important;
  backdrop-filter:blur(16px);
  padding:8px 18px!important;
}
.brand a{font-size:20px!important;font-weight:900!important;color:var(--mecam-accent,#2563eb)!important;letter-spacing:-.02em!important;}
.topbar nav{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end;}
.topbar a{margin-left:0!important;color:#243044!important;font-weight:750!important;font-size:13px!important;padding:7px 9px;border-radius:999px;}
.topbar nav>a:hover,.topbar .nav-user a:hover{background:rgba(37,99,235,.08);opacity:1!important;}
.nav-user{font-size:12px!important;color:var(--mecam-muted)!important;margin-left:4px!important;}
.card,.clean-card,.entry-card,.creator-video-help,.upload-video-card,.card-lite{
  background:rgba(255,255,255,.88)!important;
  color:var(--mecam-text)!important;
  border:1px solid rgba(226,232,240,.92)!important;
  border-radius:var(--mecam-radius)!important;
  box-shadow:var(--mecam-shadow-soft)!important;
  padding:15px!important;
}
.card:hover,.preview-cam:hover,.quicklinks a:hover{box-shadow:var(--mecam-shadow)!important;}
h1{font-size:28px!important;line-height:1.15!important;letter-spacing:-.03em!important;margin:0 0 12px!important;}
h2,.section-title,.section-head h2{font-size:23px!important;line-height:1.2!important;letter-spacing:-.02em!important;}
h3{font-size:18px!important;margin:8px 0!important;}
p{margin:8px 0 10px;}.muted,.small-muted{color:var(--mecam-muted)!important;}
.hero,.modern-hero{
  border-radius:22px!important;
  padding:30px!important;
  background:linear-gradient(135deg,var(--mecam-accent,#2563eb),var(--mecam-accent-2,#7c3aed))!important;
  box-shadow:0 18px 42px rgba(37,99,235,.18)!important;
}
.hero h1,.modern-hero h1{font-size:38px!important;}
.hero p,.modern-hero p{font-size:16px!important;}
.btn,button,input[type="submit"]{
  min-height:36px!important;
  padding:8px 13px!important;
  border-radius:10px!important;
  font-size:13px!important;
  font-weight:800!important;
  background:linear-gradient(135deg,var(--mecam-accent,#2563eb),var(--mecam-accent-2,#7c3aed))!important;
  color:#fff!important;
  border:0!important;
  box-shadow:0 7px 16px rgba(15,23,42,.10)!important;
  transition:transform .14s ease,box-shadow .14s ease,filter .14s ease,background .14s ease!important;
}
.btn:hover,button:hover,input[type="submit"]:hover{transform:translateY(-1px)!important;box-shadow:0 10px 22px rgba(15,23,42,.13)!important;filter:brightness(1.03)!important;}
.btn.big{min-height:42px!important;padding:10px 16px!important;font-size:14px!important;border-radius:12px!important;}
.btn.secondary{background:#475569!important}.btn.danger,.danger{background:#dc2626!important}.btn.success,.success{background:#16a34a!important}.btn.warning,.warning{background:#f59e0b!important;color:#111827!important}.btn.light{background:#fff!important;color:#172033!important;border:1px solid var(--mecam-line)!important;}

input,textarea,select{
  background:#fff!important;
  color:var(--mecam-text)!important;
  border:1px solid var(--mecam-line)!important;
  border-radius:10px!important;
  padding:8px 10px!important;
  margin:4px 0 10px!important;
  outline:none!important;
  box-shadow:none!important;
}
input:focus,textarea:focus,select:focus{border-color:var(--mecam-accent,#2563eb)!important;box-shadow:var(--mecam-focus)!important;}
label{font-size:13px!important;font-weight:800!important;color:#334155;}
.table,.admin-table{background:var(--mecam-surface)!important;border-radius:14px!important;overflow:hidden!important;border:1px solid var(--mecam-line)!important;}
.table th,.table td,.admin-table th,.admin-table td{padding:8px 9px!important;font-size:13px!important;border-bottom:1px solid var(--mecam-line)!important;}
.table th,.admin-table th{background:var(--mecam-surface-2)!important;color:#334155!important;font-weight:900!important;}
.admin-nav{
  top:50px!important;
  background:rgba(255,255,255,.86)!important;
  border:1px solid rgba(226,232,240,.9)!important;
  border-top:0!important;
  box-shadow:0 9px 22px rgba(15,23,42,.055)!important;
  backdrop-filter:blur(14px);
  gap:6px!important;
  padding:8px 10px!important;
}
.admin-nav .btn{padding:6px 9px!important;font-size:12px!important;min-height:31px!important;border-radius:999px!important;}
.grid{gap:12px!important;}.quicklinks{gap:10px!important;}.quicklinks a,.preview-cam{background:rgba(255,255,255,.88)!important;border:1px solid var(--mecam-line)!important;border-radius:14px!important;padding:12px!important;color:var(--mecam-text)!important;box-shadow:var(--mecam-shadow-soft)!important;}
.preview-grid{gap:10px!important;}.cam-thumb{height:118px!important;border-radius:12px!important;}
.stream-layout,.viewer-stream-grid{gap:12px!important;}
.creator-video-frame,.video-wrap,.real-video-wrap{border-radius:14px!important;border-width:2px!important;box-shadow:var(--mecam-shadow-soft)!important;}
.creator-chat-box,.viewer-chat-box{background:var(--mecam-surface-2)!important;border:1px solid var(--mecam-line)!important;border-radius:12px!important;}
.badge,.tag-pill{border-radius:999px!important;padding:5px 9px!important;font-size:11px!important;font-weight:900!important;}
.notice,.error,.successbox{border-radius:12px!important;padding:11px 12px!important;font-size:13px!important;}
.rating-stars .star-btn{background:transparent!important;color:#cbd5e1!important;box-shadow:none!important;padding:1px 2px!important;min-height:0!important;font-size:24px!important;}
.rating-stars .star-btn:hover,.rating-stars .star-btn.active{color:#f59e0b!important;}
.gift-btn.compact-gift,.compact-gift{background:transparent!important;box-shadow:none!important;color:var(--mecam-text)!important;}
.theme-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;}
.theme-tile{display:block;border:1px solid var(--mecam-line);border-radius:14px;padding:12px;background:rgba(255,255,255,.75);box-shadow:var(--mecam-shadow-soft);cursor:pointer;transition:.14s ease;}
.theme-tile:hover{transform:translateY(-1px);box-shadow:var(--mecam-shadow);}.theme-tile input{width:auto!important;margin-right:6px!important}.theme-tile span{display:block;color:var(--mecam-muted);font-size:12px;margin-top:4px;}


@media(max-width:900px){
  .topbar{padding:8px 12px!important;}.topbar nav{justify-content:flex-start!important;margin-top:8px!important}.topbar a{font-size:12px!important;padding:6px 8px!important}.container{margin:12px auto!important}.hero,.modern-hero{padding:22px!important}.hero h1,.modern-hero h1{font-size:30px!important}.card{padding:13px!important}.admin-nav{top:0!important;border-radius:0 0 12px 12px!important}.admin-nav .btn{font-size:12px!important;padding:6px 8px!important}.stream-layout,.viewer-stream-grid{grid-template-columns:1fr!important}.creator-chat-box,.stream-chat-card .viewer-chat-box{height:280px!important}.cam-thumb{height:130px!important;}
}


/* =========================================================
   MECAM DESIGN + DARKMODE FINAL 2026-05-08
   - Admin-Styles style-01 bis style-20 bleiben erhalten
   - Darkmode ist ein separater Schalter und nutzt die gewählte Akzentfarbe
   - Alle Hauptfenster, Karten, Formulare, Tabellen, Chat und Streamflächen werden angepasst
   ========================================================= */
:root{
  --mecam-radius-xl:22px;
  --mecam-radius:16px;
  --mecam-radius-sm:12px;
  --mecam-transition:.16s ease;
}
body[class*="theme-style-"]{
  --mecam-accent:var(--theme-primary,#2563eb);
  --mecam-accent-2:var(--theme-accent,#7c3aed);
}
body.mecam-dark{
  --mecam-bg:#0b1120;
  --mecam-surface:#111827;
  --mecam-surface-2:#162033;
  --mecam-surface-3:#1e293b;
  --mecam-text:#d1d5db;
  --mecam-heading:#f3f4f6;
  --mecam-muted:#94a3b8;
  --mecam-line:#263244;
  --mecam-line-strong:#334155;
  --mecam-shadow:0 18px 46px rgba(0,0,0,.34);
  --mecam-shadow-soft:0 10px 28px rgba(0,0,0,.24);
  --mecam-focus:0 0 0 4px color-mix(in srgb,var(--mecam-accent) 28%,transparent);
  background:radial-gradient(circle at top left,color-mix(in srgb,var(--mecam-accent) 20%,transparent),transparent 34%),linear-gradient(180deg,#0b1120,#111827 70%,#0b1120)!important;
  color:var(--mecam-text)!important;
}
body.mecam-dark h1,body.mecam-dark h2,body.mecam-dark h3,body.mecam-dark h4,
body.mecam-dark strong,body.mecam-dark b{color:var(--mecam-heading)!important;}
body.mecam-dark p,body.mecam-dark li,body.mecam-dark td,body.mecam-dark th{color:var(--mecam-text)!important;}
body.mecam-dark .muted,body.mecam-dark .small-muted,body.mecam-dark small,body.mecam-dark .nav-user{color:var(--mecam-muted)!important;}
body.mecam-dark a{color:#93c5fd!important;}
body.mecam-dark .topbar.soft-topbar,body.mecam-dark .soft-topbar,
body.mecam-dark .admin-nav{
  background:rgba(15,23,42,.88)!important;
  color:var(--mecam-text)!important;
  border-color:var(--mecam-line)!important;
  box-shadow:var(--mecam-shadow-soft)!important;
  backdrop-filter:blur(18px);
}
body.mecam-dark .brand a{color:#fff!important;}
body.mecam-dark .topbar a{color:#d1d5db!important;background:transparent!important;}
body.mecam-dark .topbar nav>a:hover,body.mecam-dark .topbar .nav-user a:hover,
body.mecam-dark .admin-nav .btn:hover{background:rgba(148,163,184,.13)!important;color:#fff!important;}
body.mecam-dark .card,body.mecam-dark .clean-card,body.mecam-dark .entry-card,
body.mecam-dark .creator-video-help,body.mecam-dark .upload-video-card,body.mecam-dark .card-lite,
body.mecam-dark .preview-cam,body.mecam-dark .quicklinks a,body.mecam-dark .contact-ad-card,
body.mecam-dark .viewer-actions-card,body.mecam-dark .chat-card,body.mecam-dark .stream-chat-card,
body.mecam-dark .report-panel,body.mecam-dark .ad-box{
  background:linear-gradient(180deg,rgba(17,24,39,.96),rgba(15,23,42,.96))!important;
  color:var(--mecam-text)!important;
  border:1px solid var(--mecam-line)!important;
  box-shadow:var(--mecam-shadow-soft)!important;
}
body.mecam-dark .hero,body.mecam-dark .modern-hero{
  background:linear-gradient(135deg,color-mix(in srgb,var(--mecam-accent) 72%,#020617),color-mix(in srgb,var(--mecam-accent-2) 62%,#111827))!important;
  color:#fff!important;
  border:1px solid color-mix(in srgb,var(--mecam-accent) 35%,#334155)!important;
  box-shadow:0 20px 52px color-mix(in srgb,var(--mecam-accent) 24%,transparent)!important;
}
body.mecam-dark .hero p,body.mecam-dark .modern-hero p,body.mecam-dark .hero .sub{color:#dbeafe!important;}
body.mecam-dark input,body.mecam-dark textarea,body.mecam-dark select{
  background:#0f172a!important;
  color:#e5e7eb!important;
  border:1px solid var(--mecam-line-strong)!important;
  box-shadow:none!important;
}
body.mecam-dark input::placeholder,body.mecam-dark textarea::placeholder{color:#64748b!important;}
body.mecam-dark input:focus,body.mecam-dark textarea:focus,body.mecam-dark select:focus{border-color:var(--mecam-accent)!important;box-shadow:var(--mecam-focus)!important;}
body.mecam-dark label{color:#cbd5e1!important;}
body.mecam-dark .table,body.mecam-dark .admin-table,body.mecam-dark table{
  background:var(--mecam-surface)!important;
  color:var(--mecam-text)!important;
  border-color:var(--mecam-line)!important;
}
body.mecam-dark .table th,body.mecam-dark .admin-table th,body.mecam-dark table th{
  background:#0f172a!important;color:#f1f5f9!important;border-color:var(--mecam-line)!important;
}
body.mecam-dark .table td,body.mecam-dark .admin-table td,body.mecam-dark table td{border-color:var(--mecam-line)!important;}
body.mecam-dark tr:nth-child(even) td{background:rgba(148,163,184,.035)!important;}
body.mecam-dark .creator-chat-box,body.mecam-dark .viewer-chat-box,body.mecam-dark .live-chat-box{
  background:#0b1120!important;border:1px solid var(--mecam-line)!important;color:var(--mecam-text)!important;
}
body.mecam-dark .chat-row{
  background:#111827!important;border:1px solid var(--mecam-line)!important;color:var(--mecam-text)!important;box-shadow:none!important;
}
body.mecam-dark .creator-video-frame,body.mecam-dark .video-wrap,body.mecam-dark .real-video-wrap,
body.mecam-dark video,body.mecam-dark .live-placeholder,body.mecam-dark .demo-thumb{
  background:#020617!important;border-color:#334155!important;color:#e5e7eb!important;
}
body.mecam-dark .live-placeholder:before{color:#94a3b8!important;opacity:.24!important;}
body.mecam-dark .btn.light,body.mecam-dark .btn.light-soft,body.mecam-dark .light-soft,
body.mecam-dark .status-pill,body.mecam-dark .badge,body.mecam-dark .tag-pill{
  background:#1e293b!important;color:#e5e7eb!important;border:1px solid var(--mecam-line-strong)!important;
}
body.mecam-dark .btn.secondary{background:#334155!important;color:#fff!important;}
body.mecam-dark .btn.danger,body.mecam-dark .danger{background:#b91c1c!important;color:#fff!important;border-color:#dc2626!important;}
body.mecam-dark .btn.success,body.mecam-dark .success{background:#15803d!important;color:#fff!important;}
body.mecam-dark .btn.warning,body.mecam-dark .warning{background:#d97706!important;color:#111827!important;}
body.mecam-dark .gift-btn{background:#111827!important;color:#e5e7eb!important;border-color:#334155!important;box-shadow:none!important;}
body.mecam-dark .gift-btn:hover{background:#1e293b!important;}
body.mecam-dark .gift-btn b{color:#fbbf24!important;}
body.mecam-dark .rating-stars .star-btn{color:#475569!important;}
body.mecam-dark .rating-stars .star-btn:hover,body.mecam-dark .rating-stars .star-btn.active{color:#f59e0b!important;}
body.mecam-dark .theme-tile{
  background:#111827!important;border-color:#334155!important;color:#e5e7eb!important;box-shadow:var(--mecam-shadow-soft)!important;
}
body.mecam-dark .theme-tile span{color:#94a3b8!important;}
body.mecam-dark .theme-tile:has(input:checked){border-color:var(--mecam-accent)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--mecam-accent) 22%,transparent)!important;}
.darkmode-toggle{display:flex!important;gap:10px!important;align-items:flex-start!important;cursor:pointer!important;}
.darkmode-toggle input{width:auto!important;margin-top:3px!important;}
.darkmode-toggle span{display:block;color:var(--mecam-muted,#64748b);font-size:12px;margin-top:4px;font-weight:500;}
body.mecam-dark .admin-report-alert{background:#450a0a!important;border-color:#ef4444!important;color:#fee2e2!important;}
body.mecam-dark .viewer-live-notice a{background:#0f172a!important;border-color:#334155!important;color:#bae6fd!important;}
body.mecam-dark .ad-label{color:#cbd5e1!important;}
body.mecam-dark .contact-thumb,body.mecam-dark .contact-detail-img,body.mecam-dark .favorite-cam-thumb,
body.mecam-dark .cam-thumb{background-color:#0f172a!important;border-color:#334155!important;}

/* Nutzer-Darkmode-Schalter in der Startleiste */
.mecam-top-controls{display:inline-flex!important;align-items:center;gap:8px;white-space:nowrap;}
.mecam-dark-toggle{border:1px solid rgba(15,23,42,.14)!important;background:rgba(255,255,255,.72)!important;color:#172033!important;padding:7px 10px!important;border-radius:999px!important;font-size:13px!important;font-weight:850!important;line-height:1!important;box-shadow:none!important;cursor:pointer!important;}
.mecam-dark-toggle:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(15,23,42,.12)!important;}
body.mecam-dark .mecam-dark-toggle{background:#1e293b!important;color:#e5e7eb!important;border-color:#334155!important;}
.mecam-install-app{border:1px solid rgba(15,23,42,.14)!important;background:#f5c542!important;color:#111827!important;padding:7px 10px!important;border-radius:999px!important;font-size:13px!important;font-weight:900!important;line-height:1!important;box-shadow:none!important;cursor:pointer!important;}
.mecam-install-app:disabled{opacity:.68!important;cursor:default!important;}
.mecam-app-install{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;margin:12px 0 14px!important;padding:18px!important;background:linear-gradient(135deg,#fff,#f8fafc)!important;}
.mecam-app-install h2{margin:2px 0 8px;font-size:26px;line-height:1.15;}
.mecam-app-install p{margin:0;color:#475569;max-width:720px;}
.mecam-app-install-actions{display:flex;flex-direction:column;align-items:flex-end;gap:10px;min-width:220px;}
.mecam-app-install-button{min-height:46px;min-width:180px;text-align:center;}
.mecam-app-install-choices{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;width:100%;max-width:520px;}
.mecam-app-install-choices[hidden]{display:none!important;}
.mecam-app-install-choices .btn{min-height:42px;text-align:center;}
.mecam-app-install-hint{max-width:420px;padding:14px 15px;border:1px solid #fde68a;border-radius:12px;background:#fffbeb;color:#713f12;font-size:14px;line-height:1.45;text-align:left;}
.mecam-app-install-hint strong{display:block;margin-bottom:8px;font-size:16px;color:#422006;}
.mecam-app-install-hint ol{margin:0 0 8px 20px;padding:0;}
.mecam-app-install-hint li{margin:5px 0;}
.mecam-app-install-hint p{margin:8px 0 0;color:#713f12;font-size:13px;}
.mecam-app-install-note{border-top:1px solid rgba(146,64,14,.25);padding-top:9px;}
.mecam-install-status{margin:0 0 12px;padding:10px 11px;border-radius:10px;font-size:13px;line-height:1.35;}
.mecam-install-status.bad{background:#fee2e2;color:#7f1d1d;border:1px solid #fecaca;}
.mecam-install-status.warn{background:#fff7ed;color:#7c2d12;border:1px solid #fed7aa;}
.mecam-install-status.ok{background:#dcfce7;color:#14532d;border:1px solid #bbf7d0;}
.mecam-install-popover{display:none;position:sticky;top:58px;z-index:90;max-width:720px;margin:8px auto 0;padding:10px 12px;border:1px solid #dbeafe;border-radius:14px;background:rgba(248,251,255,.96);box-shadow:0 14px 34px rgba(15,23,42,.14);backdrop-filter:blur(8px);}
.mecam-install-popover:has(.mecam-app-install-hint:not([hidden])){display:block;}
.mecam-install-popover .mecam-app-install-choices{max-width:none;margin-bottom:8px;}
.mecam-install-popover .mecam-app-install-hint{max-width:none;padding:11px 12px;font-size:13px;}
.pwa-check-list{display:grid;gap:8px;margin:16px 0;}
.pwa-check-row{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:12px 14px;border:1px solid #e2e8f0;border-radius:12px;background:#f8fafc;}
.pwa-check-row span{font-weight:800;text-align:right;}
.pwa-check-row.ok{border-color:#bbf7d0;background:#f0fdf4;color:#14532d;}
.pwa-check-row.warn{border-color:#fed7aa;background:#fff7ed;color:#7c2d12;}
.pwa-check-row.bad{border-color:#fecaca;background:#fef2f2;color:#7f1d1d;}
.mecam-app-install-hint[hidden]{display:none!important;}
body.mecam-dark .mecam-install-app{background:#f5c542!important;color:#111827!important;border-color:rgba(245,197,66,.55)!important;}
body.mecam-dark .mecam-app-install{background:linear-gradient(135deg,#111827,#0f172a)!important;border-color:#334155!important;}
body.mecam-dark .mecam-app-install p{color:#cbd5e1!important;}
body.mecam-dark .mecam-app-install-hint{background:#422006!important;border-color:#92400e!important;color:#fde68a!important;}
body.mecam-dark .mecam-app-install-hint strong,body.mecam-dark .mecam-app-install-hint p{color:#fde68a!important;}
body.mecam-dark .mecam-install-status.bad{background:#450a0a!important;color:#fecaca!important;border-color:#991b1b!important;}
body.mecam-dark .mecam-install-status.warn{background:#431407!important;color:#fed7aa!important;border-color:#9a3412!important;}
body.mecam-dark .mecam-install-status.ok{background:#052e16!important;color:#bbf7d0!important;border-color:#166534!important;}
body.mecam-dark .mecam-install-popover{background:rgba(15,23,42,.96)!important;border-color:#334155!important;}
body.mecam-dark .pwa-check-row{background:#0f172a!important;border-color:#334155!important;color:#e5e7eb!important;}
body.mecam-dark .pwa-check-row.ok{background:#052e16!important;color:#bbf7d0!important;border-color:#166534!important;}
body.mecam-dark .pwa-check-row.warn{background:#431407!important;color:#fed7aa!important;border-color:#9a3412!important;}
body.mecam-dark .pwa-check-row.bad{background:#450a0a!important;color:#fecaca!important;border-color:#991b1b!important;}
.meco-brand{display:inline-flex!important;align-items:center!important;gap:9px!important;padding:0!important;border-radius:0!important;background:transparent!important;text-decoration:none!important;}
.meco-brand img{display:block;width:142px;height:auto;max-height:42px;object-fit:contain;}
.meco-brand span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
body.mecam-dark .meco-brand{background:transparent!important;}
@media(max-width:760px){
  .meco-brand img{width:118px;max-height:36px;}
}
.landing-compact-entry{margin:8px 0 10px!important;}
.landing-compact-entry .landing-four-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;}
.landing-compact-entry .landing-four-card{min-height:74px!important;padding:11px 14px!important;border-radius:12px!important;}
.landing-compact-entry .landing-four-card strong{font-size:18px!important;margin:0 0 3px!important;}
.landing-compact-entry .landing-four-card small{font-size:12px!important;}
.home-video-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;}
.home-video-card{display:block;text-decoration:none;color:#0f172a;background:#f8fafc;border:1px solid #e2e8f0;border-radius:14px;padding:8px;transition:transform .16s ease,box-shadow .16s ease;}
.home-video-card:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(15,23,42,.10);}
.home-video-thumb{height:118px;border-radius:11px;background:linear-gradient(135deg,#111827,#1d4ed8);display:grid;place-items:center;color:#fff;font-weight:900;position:relative;overflow:hidden;}
.home-video-thumb:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.32));pointer-events:none;}
.home-video-thumb video{width:100%;height:100%;object-fit:cover;display:block;background:#050505;}
.home-video-play{width:42px;height:42px;border-radius:999px;background:rgba(255,255,255,.9);box-shadow:0 10px 24px rgba(15,23,42,.22);position:relative;z-index:1;}
.home-video-play:after{content:"";position:absolute;left:17px;top:12px;border-left:14px solid #0f172a;border-top:9px solid transparent;border-bottom:9px solid transparent;}
.home-video-card strong{display:block;margin:9px 4px 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.home-video-card small{display:block;margin:0 4px 4px;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
body.mecam-dark .home-video-card{background:#111827!important;border-color:#334155!important;color:#e5e7eb!important;}
body.mecam-dark .home-video-card small{color:#cbd5e1!important;}
.live-preview .preview-grid,.creator-video-preview .home-video-grid{grid-template-columns:repeat(auto-fill,minmax(150px,180px))!important;justify-content:start!important;align-items:start!important;}
.live-preview .preview-cam,.creator-video-preview .home-video-card{width:100%!important;max-width:180px!important;padding:7px!important;border-radius:11px!important;}
.live-preview .cam-thumb,.creator-video-preview .home-video-thumb{height:92px!important;border-radius:9px!important;}
.live-preview .preview-cam strong,.creator-video-preview .home-video-card strong{font-size:13px!important;margin:6px 3px 1px!important;line-height:1.15!important;}
.live-preview .preview-cam small,.creator-video-preview .home-video-card small{font-size:11px!important;margin:0 3px 2px!important;}
.live-preview .preview-live,.live-preview .no-audio{padding:4px 7px!important;font-size:10px!important;}
.demo-preview-cam{opacity:.96;}
.demo-live-one{background:radial-gradient(circle at 72% 30%,rgba(255,255,255,.28),transparent 28%),linear-gradient(135deg,#0f172a,#2563eb 48%,#14b8a6);}
.demo-live-two{background:radial-gradient(circle at 25% 22%,rgba(255,255,255,.24),transparent 30%),linear-gradient(135deg,#111827,#7c3aed 52%,#db2777);}
.demo-live-three{background:radial-gradient(circle at 70% 26%,rgba(255,255,255,.22),transparent 30%),linear-gradient(135deg,#0b1220,#0891b2 48%,#22c55e);}
.demo-live-four{background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.24),transparent 30%),linear-gradient(135deg,#111827,#ea580c 50%,#facc15);}
.demo-video-one{background:linear-gradient(135deg,#0f172a,#1d4ed8 52%,#0ea5e9);}
.demo-video-two{background:linear-gradient(135deg,#111827,#9333ea 52%,#f43f5e);}
.demo-video-three{background:linear-gradient(135deg,#042f2e,#0f766e 52%,#84cc16);}
.demo-video-four{background:linear-gradient(135deg,#1f2937,#f97316 52%,#fde047);}
body.mecam-dark .demo-preview-cam{background:#111827!important;border-color:#334155!important;}
@media(max-width:950px){
  .live-preview .preview-grid,.creator-video-preview .home-video-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
  .live-preview .preview-cam,.creator-video-preview .home-video-card{max-width:none!important;}
  .live-preview .cam-thumb,.creator-video-preview .home-video-thumb{height:88px!important;}
}
@media(max-width:620px){
  .landing-compact-entry .landing-four-grid{grid-template-columns:1fr!important;}
  .live-preview .preview-grid,.creator-video-preview .home-video-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .live-preview .cam-thumb,.creator-video-preview .home-video-thumb{height:84px!important;}
}
@media(max-width:760px){
  .mecam-app-install-choices{max-width:none;}
  .mecam-app-install-hint{max-width:none;}
}
@media(max-width:520px){
  .mecam-app-install-choices{grid-template-columns:1fr!important;}
}
.mecam-zone-badge,.mecam-page-badge,.mecam-dev-number,.mecam-zone-numbered:before{display:none!important;content:none!important;}


/* ==========================================================
   MeCam Global Darkmode Fix
   Gilt für alle Fenster, Tabs, Karten, Formulare und Bereiche
   ohne die im Admin wählbaren Farbstile zu entfernen.
   ========================================================== */

html[data-theme="dark"],
body[data-theme="dark"],
body.dark,
body.darkmode,
body.dark-mode,
.dark-mode,
.theme-dark {
  color-scheme: dark;
}

/* Grundflächen */
body.dark,
body.darkmode,
body.dark-mode,
body[data-theme="dark"],
html[data-theme="dark"] body {
  background: #0b1220 !important;
  color: #e8eefc !important;
}

/* Alle hell gebliebenen Fenster/Kacheln/Tabs abfangen */
body.dark .card,
body.darkmode .card,
body.dark-mode .card,
body[data-theme="dark"] .card,
body.dark .box,
body.darkmode .box,
body.dark-mode .box,
body[data-theme="dark"] .box,
body.dark .panel,
body.darkmode .panel,
body.dark-mode .panel,
body[data-theme="dark"] .panel,
body.dark .tile,
body.darkmode .tile,
body.dark-mode .tile,
body[data-theme="dark"] .tile,
body.dark .tab,
body.darkmode .tab,
body.dark-mode .tab,
body[data-theme="dark"] .tab,
body.dark .tabs,
body.darkmode .tabs,
body.dark-mode .tabs,
body[data-theme="dark"] .tabs,
body.dark .login-box,
body.darkmode .login-box,
body.dark-mode .login-box,
body[data-theme="dark"] .login-box,
body.dark .content-box,
body.darkmode .content-box,
body.dark-mode .content-box,
body[data-theme="dark"] .content-box,
body.dark .dashboard-card,
body.darkmode .dashboard-card,
body.dark-mode .dashboard-card,
body[data-theme="dark"] .dashboard-card,
body.dark .stream-card,
body.darkmode .stream-card,
body.dark-mode .stream-card,
body[data-theme="dark"] .stream-card,
body.dark .feature-card,
body.darkmode .feature-card,
body.dark-mode .feature-card,
body[data-theme="dark"] .feature-card,
body.dark .area-card,
body.darkmode .area-card,
body.dark-mode .area-card,
body[data-theme="dark"] .area-card,
body.dark section,
body.darkmode section,
body.dark-mode section,
body[data-theme="dark"] section,
body.dark main > div,
body.darkmode main > div,
body.dark-mode main > div,
body[data-theme="dark"] main > div {
  background: #111a2c !important;
  color: #e8eefc !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.28) !important;
}

/* Kacheln mit Inline-background:white ebenfalls dunkel machen */
body.dark [style*="background:#fff"],
body.dark [style*="background: #fff"],
body.dark [style*="background:white"],
body.dark [style*="background: white"],
body.dark [style*="background-color:#fff"],
body.dark [style*="background-color: #fff"],
body.dark [style*="background-color:white"],
body.dark [style*="background-color: white"],
body.darkmode [style*="background:#fff"],
body.darkmode [style*="background: #fff"],
body.darkmode [style*="background:white"],
body.darkmode [style*="background: white"],
body[data-theme="dark"] [style*="background:#fff"],
body[data-theme="dark"] [style*="background: #fff"],
body[data-theme="dark"] [style*="background:white"],
body[data-theme="dark"] [style*="background: white"] {
  background: #111a2c !important;
  color: #e8eefc !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
}

/* Texte in dunklen Kacheln lesbar */
body.dark h1, body.dark h2, body.dark h3, body.dark h4, body.dark p, body.dark span, body.dark label,
body.darkmode h1, body.darkmode h2, body.darkmode h3, body.darkmode h4, body.darkmode p, body.darkmode span, body.darkmode label,
body[data-theme="dark"] h1, body[data-theme="dark"] h2, body[data-theme="dark"] h3, body[data-theme="dark"] h4, body[data-theme="dark"] p, body[data-theme="dark"] span, body[data-theme="dark"] label {
  color: inherit;
}

body.dark a,
body.darkmode a,
body[data-theme="dark"] a {
  color: #93c5fd;
}

/* Eingaben/Formulare */
body.dark input, body.dark textarea, body.dark select,
body.darkmode input, body.darkmode textarea, body.darkmode select,
body[data-theme="dark"] input, body[data-theme="dark"] textarea, body[data-theme="dark"] select {
  background: #0b1220 !important;
  color: #e8eefc !important;
  border-color: rgba(148, 163, 184, 0.35) !important;
}

body.dark input::placeholder,
body.dark textarea::placeholder,
body.darkmode input::placeholder,
body.darkmode textarea::placeholder,
body[data-theme="dark"] input::placeholder,
body[data-theme="dark"] textarea::placeholder {
  color: #94a3b8 !important;
}

/* Tabellen */
body.dark table, body.dark thead, body.dark tbody, body.dark tr, body.dark td, body.dark th,
body.darkmode table, body.darkmode thead, body.darkmode tbody, body.darkmode tr, body.darkmode td, body.darkmode th,
body[data-theme="dark"] table, body[data-theme="dark"] thead, body[data-theme="dark"] tbody, body[data-theme="dark"] tr, body[data-theme="dark"] td, body[data-theme="dark"] th {
  background: #111a2c !important;
  color: #e8eefc !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
}

/* Buttons nicht weiß lassen */
body.dark button:not(.theme-toggle),
body.dark .btn,
body.darkmode button:not(.theme-toggle),
body.darkmode .btn,
body[data-theme="dark"] button:not(.theme-toggle),
body[data-theme="dark"] .btn {
  background: #1e293b !important;
  color: #f8fafc !important;
  border-color: rgba(148, 163, 184, 0.35) !important;
}

body.dark button:hover,
body.dark .btn:hover,
body.darkmode button:hover,
body.darkmode .btn:hover,
body[data-theme="dark"] button:hover,
body[data-theme="dark"] .btn:hover {
  background: #263449 !important;
}

/* Rote/FSK18 Karte darf dunkel bleiben, aber Akzent behalten */
body.dark .fsk18,
body.dark .adult,
body.dark [class*="fsk"],
body.darkmode .fsk18,
body.darkmode .adult,
body.darkmode [class*="fsk"],
body[data-theme="dark"] .fsk18,
body[data-theme="dark"] .adult,
body[data-theme="dark"] [class*="fsk"] {
  background: #2a0f18 !important;
  color: #ffe4ec !important;
  border-color: rgba(244,63,94,.55) !important;
}

/* Alte sichtbare Entwicklungsnummern als runde Badges ausblenden */
body .dev-number,
body .debug-number,
body .section-number {
  display: none !important;
}


/* ==========================================================
   MECAM REAL LANDING DARKMODE FIX
   Fix für die tatsächlich sichtbaren Landingpage-Kacheln:
   .landing-four-card / .landing-four-grid / .point-number
   ========================================================== */

body.mecam-dark .landing-four-main-points,
body.mecam-dark .landing-four-grid {
  background: transparent !important;
  color: #e8eefc !important;
}

body.mecam-dark .landing-four-card,
body.mecam-dark a.landing-four-card,
body.mecam-dark .landing-four-card:link,
body.mecam-dark .landing-four-card:visited {
  background: linear-gradient(180deg, #111827, #0f172a) !important;
  color: #e8eefc !important;
  border: 1px solid rgba(148, 163, 184, 0.28) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34) !important;
}

body.mecam-dark .landing-four-card:hover {
  background: linear-gradient(180deg, #162033, #111827) !important;
  border-color: rgba(147, 197, 253, 0.45) !important;
  transform: translateY(-2px);
}

body.mecam-dark .landing-four-card strong,
body.mecam-dark .landing-four-card small,
body.mecam-dark .landing-four-card em {
  color: #e8eefc !important;
}

body.mecam-dark .landing-four-card small {
  color: #a8b3c7 !important;
}

body.mecam-dark .landing-four-card.fsk18-card,
body.mecam-dark a.landing-four-card.fsk18-card {
  background: linear-gradient(180deg, #2a0f18, #180910) !important;
  color: #ffe4ec !important;
  border-color: rgba(244, 63, 94, 0.55) !important;
}

body.mecam-dark .landing-four-card.fsk18-card strong,
body.mecam-dark .landing-four-card.fsk18-card small,
body.mecam-dark .landing-four-card.fsk18-card em {
  color: #ffe4ec !important;
}

/* Die Entwicklungs-/Punktnummern auf der Startseite komplett ausblenden */
.point-number,
.danger-number,
body.mecam-dark .point-number,
body.mecam-dark .danger-number {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
}

/* Zusätzliche Absicherung gegen alle noch vorhandenen hellen weißen Kacheln */
body.mecam-dark [class*="card"],
body.mecam-dark [class*="box"],
body.mecam-dark [class*="panel"],
body.mecam-dark [class*="tab"],
body.mecam-dark [class*="tile"] {
  background-color: #111827 !important;
  color: #e8eefc !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
}

/* Keine weißen Inline-Flächen im Darkmode */
body.mecam-dark [style*="background:#fff"],
body.mecam-dark [style*="background: #fff"],
body.mecam-dark [style*="background:white"],
body.mecam-dark [style*="background: white"],
body.mecam-dark [style*="background-color:#fff"],
body.mecam-dark [style*="background-color: #fff"],
body.mecam-dark [style*="background-color:white"],
body.mecam-dark [style*="background-color: white"] {
  background: #111827 !important;
  color: #e8eefc !important;
}


/* ==========================================================
   MECAM SITEWIDE DARKMODE FINAL
   Greift auf Startseite, Loginseiten, Creatorbereich,
   Zuschauerbereich, Adminseiten, Formulare, Tabs und Buttons.
   ========================================================== */

html.mecam-dark,
body.mecam-dark {
  color-scheme: dark !important;
  background: #0b1220 !important;
  color: #e8eefc !important;
}

/* Seitenhintergrund */
body.mecam-dark,
body.mecam-dark main,
body.mecam-dark .page,
body.mecam-dark .page-wrap,
body.mecam-dark .content,
body.mecam-dark .wrapper,
body.mecam-dark .container {
  background: #0b1220 !important;
  color: #e8eefc !important;
}

/* wirklich alle Fenster/Karten/Boxen/Panels dunkel */
body.mecam-dark section,
body.mecam-dark article,
body.mecam-dark aside,
body.mecam-dark .card,
body.mecam-dark .box,
body.mecam-dark .panel,
body.mecam-dark .tile,
body.mecam-dark .tab,
body.mecam-dark .tabs,
body.mecam-dark .login-box,
body.mecam-dark .login-card,
body.mecam-dark .auth-box,
body.mecam-dark .auth-card,
body.mecam-dark .viewer-box,
body.mecam-dark .viewer-card,
body.mecam-dark .creator-box,
body.mecam-dark .creator-card,
body.mecam-dark .dashboard-box,
body.mecam-dark .dashboard-card,
body.mecam-dark .stream-box,
body.mecam-dark .stream-card,
body.mecam-dark .chat-box,
body.mecam-dark .chat-panel,
body.mecam-dark .admin-box,
body.mecam-dark .admin-card,
body.mecam-dark .settings-box,
body.mecam-dark .settings-card,
body.mecam-dark .landing-four-card,
body.mecam-dark .landing-section,
body.mecam-dark .hero,
body.mecam-dark .hero-box,
body.mecam-dark .hero-card,
body.mecam-dark [class*="box"],
body.mecam-dark [class*="card"],
body.mecam-dark [class*="panel"],
body.mecam-dark [class*="window"],
body.mecam-dark [class*="modal"],
body.mecam-dark [class*="tab"],
body.mecam-dark [class*="tile"] {
  background: #111827 !important;
  background-color: #111827 !important;
  color: #e8eefc !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.28) !important;
}

/* weiße Inline-Hintergründe seitenweit abfangen */
body.mecam-dark [style*="background:#fff"],
body.mecam-dark [style*="background: #fff"],
body.mecam-dark [style*="background:white"],
body.mecam-dark [style*="background: white"],
body.mecam-dark [style*="background-color:#fff"],
body.mecam-dark [style*="background-color: #fff"],
body.mecam-dark [style*="background-color:white"],
body.mecam-dark [style*="background-color: white"],
body.mecam-dark [style*="background: rgb(255"],
body.mecam-dark [style*="background-color: rgb(255"] {
  background: #111827 !important;
  background-color: #111827 !important;
  color: #e8eefc !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
}

/* Texte lesbar halten */
body.mecam-dark h1,
body.mecam-dark h2,
body.mecam-dark h3,
body.mecam-dark h4,
body.mecam-dark h5,
body.mecam-dark h6,
body.mecam-dark p,
body.mecam-dark span,
body.mecam-dark small,
body.mecam-dark strong,
body.mecam-dark label,
body.mecam-dark li,
body.mecam-dark td,
body.mecam-dark th {
  color: inherit !important;
}

body.mecam-dark .muted,
body.mecam-dark .text-muted,
body.mecam-dark .subtitle,
body.mecam-dark .description,
body.mecam-dark small {
  color: #a8b3c7 !important;
}

body.mecam-dark a {
  color: #93c5fd !important;
}

/* Buttons wirklich überall dunkel/modern */
body.mecam-dark button,
body.mecam-dark .btn,
body.mecam-dark a.btn,
body.mecam-dark input[type="button"],
body.mecam-dark input[type="submit"],
body.mecam-dark input[type="reset"],
body.mecam-dark .button,
body.mecam-dark a.button,
body.mecam-dark .nav-button,
body.mecam-dark .menu-button,
body.mecam-dark .login-button,
body.mecam-dark .auth-button,
body.mecam-dark .primary-button,
body.mecam-dark .secondary-button,
body.mecam-dark [class*="btn"],
body.mecam-dark [class*="button"] {
  background: #1e293b !important;
  background-color: #1e293b !important;
  color: #f8fafc !important;
  border: 1px solid rgba(148, 163, 184, 0.38) !important;
  box-shadow: none !important;
}

body.mecam-dark button:hover,
body.mecam-dark .btn:hover,
body.mecam-dark a.btn:hover,
body.mecam-dark .button:hover,
body.mecam-dark a.button:hover,
body.mecam-dark [class*="btn"]:hover,
body.mecam-dark [class*="button"]:hover {
  background: #263449 !important;
  background-color: #263449 !important;
  color: #ffffff !important;
}

/* Sprachbuttons und Darkmode-Schalter nicht kaputt machen */
body.mecam-dark .lang-pill,
body.mecam-dark .language-switch a,
body.mecam-dark .theme-toggle,
body.mecam-dark .darkmode-toggle {
  background: #0f172a !important;
  color: #f8fafc !important;
  border-color: rgba(203,213,225,.55) !important;
}

/* Eingabefelder */
body.mecam-dark input,
body.mecam-dark textarea,
body.mecam-dark select {
  background: #0b1220 !important;
  background-color: #0b1220 !important;
  color: #e8eefc !important;
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
}

body.mecam-dark input::placeholder,
body.mecam-dark textarea::placeholder {
  color: #94a3b8 !important;
}

/* Tabellen */
body.mecam-dark table,
body.mecam-dark thead,
body.mecam-dark tbody,
body.mecam-dark tr,
body.mecam-dark td,
body.mecam-dark th {
  background: #111827 !important;
  color: #e8eefc !important;
  border-color: rgba(148, 163, 184, 0.25) !important;
}

/* Modals/Dropdowns */
body.mecam-dark dialog,
body.mecam-dark .modal,
body.mecam-dark .dropdown,
body.mecam-dark .dropdown-menu,
body.mecam-dark .popover {
  background: #111827 !important;
  color: #e8eefc !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
}

/* FSK18 weiter mit rotem Akzent */
body.mecam-dark .fsk18,
body.mecam-dark .adult,
body.mecam-dark .fsk18-card,
body.mecam-dark [class*="fsk"] {
  background: #2a0f18 !important;
  color: #ffe4ec !important;
  border-color: rgba(244, 63, 94, 0.55) !important;
}

/* Entwicklungsnummern komplett verstecken */
body .point-number,
body .danger-number,
body .dev-number,
body .debug-number,
body .section-number {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}


/* ==========================================================
   MECAM DARKMODE: KEINE HELLEN BUTTONS MEHR
   Fängt auch spezielle Links/Buttons mit hellen Verläufen ab.
   ========================================================== */

body.mecam-dark button,
body.mecam-dark input[type="button"],
body.mecam-dark input[type="submit"],
body.mecam-dark input[type="reset"],
body.mecam-dark .btn,
body.mecam-dark .button,
body.mecam-dark .cta,
body.mecam-dark .pill,
body.mecam-dark .nav-pill,
body.mecam-dark .login-pill,
body.mecam-dark .auth-pill,
body.mecam-dark .action-pill,
body.mecam-dark .link-button,
body.mecam-dark .choice-button,
body.mecam-dark .role-button,
body.mecam-dark .area-button,
body.mecam-dark .viewer-login,
body.mecam-dark .creator-login,
body.mecam-dark .viewer-register,
body.mecam-dark .creator-register,
body.mecam-dark [class*="btn"],
body.mecam-dark [class*="button"],
body.mecam-dark [class*="login"],
body.mecam-dark [class*="register"],
body.mecam-dark [class*="anmelden"],
body.mecam-dark [class*="registrieren"] {
  background: #1e293b !important;
  background-color: #1e293b !important;
  background-image: none !important;
  color: #f8fafc !important;
  border: 1px solid rgba(148, 163, 184, 0.42) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Links, die wie Buttons aussehen, aber keine Klasse haben */
body.mecam-dark a[href*="login"],
body.mecam-dark a[href*="register"],
body.mecam-dark a[href*="signup"],
body.mecam-dark a[href*="creator"],
body.mecam-dark a[href*="viewer"],
body.mecam-dark a[href*="zuschauer"] {
  background-image: none !important;
}

/* Primär-Buttons dürfen grün bleiben, aber nicht hellweiß */
body.mecam-dark .btn-success,
body.mecam-dark .success,
body.mecam-dark .viewer-register,
body.mecam-dark [class*="success"] {
  background: #15803d !important;
  background-color: #15803d !important;
  color: #ffffff !important;
  border-color: rgba(34, 197, 94, 0.45) !important;
}

/* Creator/zweite Buttons dunkel-violett statt weiß */
body.mecam-dark .creator-login,
body.mecam-dark .creator-register,
body.mecam-dark [href*="creator"] {
  background: #312e81 !important;
  background-color: #312e81 !important;
  color: #f5f3ff !important;
  border-color: rgba(167, 139, 250, 0.45) !important;
}

/* Hover */
body.mecam-dark button:hover,
body.mecam-dark .btn:hover,
body.mecam-dark .button:hover,
body.mecam-dark [class*="btn"]:hover,
body.mecam-dark [class*="button"]:hover {
  background: #334155 !important;
  background-color: #334155 !important;
  color: #ffffff !important;
}

body.mecam-dark .btn-success:hover,
body.mecam-dark .success:hover,
body.mecam-dark .viewer-register:hover,
body.mecam-dark [class*="success"]:hover {
  background: #16a34a !important;
  background-color: #16a34a !important;
}

body.mecam-dark .creator-login:hover,
body.mecam-dark .creator-register:hover,
body.mecam-dark [href*="creator"]:hover {
  background: #4338ca !important;
  background-color: #4338ca !important;
}

/* Hell gebliebene Hinweisboxen/Infoboxen */
body.mecam-dark .alert,
body.mecam-dark .notice,
body.mecam-dark .info,
body.mecam-dark .message,
body.mecam-dark [class*="alert"],
body.mecam-dark [class*="notice"],
body.mecam-dark [class*="info"],
body.mecam-dark [class*="message"] {
  background: #172554 !important;
  background-color: #172554 !important;
  color: #dbeafe !important;
  border-color: rgba(96, 165, 250, 0.55) !important;
}

/* Inline hell/weiß auf Buttons und Boxen hart überschreiben */
body.mecam-dark [style*="#fff"],
body.mecam-dark [style*="#ffffff"],
body.mecam-dark [style*="white"],
body.mecam-dark [style*="rgb(255"] {
  color: #f8fafc !important;
}

body.mecam-dark a[style*="#fff"],
body.mecam-dark a[style*="#ffffff"],
body.mecam-dark a[style*="white"],
body.mecam-dark button[style*="#fff"],
body.mecam-dark button[style*="#ffffff"],
body.mecam-dark button[style*="white"] {
  background: #1e293b !important;
  background-color: #1e293b !important;
  background-image: none !important;
  color: #f8fafc !important;
}

/* Navigation und Sprachschalter bleiben sauber */
body.mecam-dark header a,
body.mecam-dark nav a,
body.mecam-dark .language-switch a,
body.mecam-dark .lang-pill,
body.mecam-dark .theme-toggle,
body.mecam-dark .darkmode-toggle {
  background: #0f172a !important;
  background-color: #0f172a !important;
  color: #f8fafc !important;
  border-color: rgba(203, 213, 225, 0.55) !important;
}


/* ==========================================================
   MECAM DARKMODE REAL FINAL
   Greift auf HTML- und BODY-Klasse, damit helle Buttons
   wirklich nicht mehr durch alte Theme-Regeln überschrieben werden.
   ========================================================== */

html.mecam-dark body,
html.mecam-dark body.mecam-dark,
body.mecam-dark {
  background: #0b1220 !important;
  color: #e8eefc !important;
  color-scheme: dark !important;
}

/* alle Fenster/Karten/Boxen */
html.mecam-dark body section,
html.mecam-dark body article,
html.mecam-dark body aside,
html.mecam-dark body .card,
html.mecam-dark body .box,
html.mecam-dark body .panel,
html.mecam-dark body .tile,
html.mecam-dark body .tab,
html.mecam-dark body .tabs,
html.mecam-dark body .login-box,
html.mecam-dark body .login-card,
html.mecam-dark body .auth-box,
html.mecam-dark body .auth-card,
html.mecam-dark body .viewer-box,
html.mecam-dark body .viewer-card,
html.mecam-dark body .creator-box,
html.mecam-dark body .creator-card,
html.mecam-dark body .dashboard-box,
html.mecam-dark body .dashboard-card,
html.mecam-dark body .stream-box,
html.mecam-dark body .stream-card,
html.mecam-dark body .chat-box,
html.mecam-dark body .chat-panel,
html.mecam-dark body .landing-four-card,
html.mecam-dark body [class*="card"],
html.mecam-dark body [class*="box"],
html.mecam-dark body [class*="panel"],
html.mecam-dark body [class*="tab"],
html.mecam-dark body [class*="tile"],
body.mecam-dark section,
body.mecam-dark article,
body.mecam-dark aside,
body.mecam-dark .card,
body.mecam-dark .box,
body.mecam-dark .panel,
body.mecam-dark .tile,
body.mecam-dark .tab,
body.mecam-dark .tabs,
body.mecam-dark .login-box,
body.mecam-dark .login-card,
body.mecam-dark .auth-box,
body.mecam-dark .auth-card,
body.mecam-dark .viewer-box,
body.mecam-dark .viewer-card,
body.mecam-dark .creator-box,
body.mecam-dark .creator-card,
body.mecam-dark .dashboard-box,
body.mecam-dark .dashboard-card,
body.mecam-dark .stream-box,
body.mecam-dark .stream-card,
body.mecam-dark .chat-box,
body.mecam-dark .chat-panel,
body.mecam-dark .landing-four-card,
body.mecam-dark [class*="card"],
body.mecam-dark [class*="box"],
body.mecam-dark [class*="panel"],
body.mecam-dark [class*="tab"],
body.mecam-dark [class*="tile"] {
  background: #111827 !important;
  background-color: #111827 !important;
  color: #e8eefc !important;
  border-color: rgba(148,163,184,.28) !important;
}

/* HELLE BUTTONS ENDGÜLTIG ERWISCHEN */
html.mecam-dark body a.btn,
html.mecam-dark body button,
html.mecam-dark body .btn,
html.mecam-dark body .button,
html.mecam-dark body a.button,
html.mecam-dark body .btn-light,
html.mecam-dark body .btn-secondary,
html.mecam-dark body .secondary,
html.mecam-dark body .secondary-btn,
html.mecam-dark body .light,
html.mecam-dark body .light-btn,
html.mecam-dark body .light-soft,
html.mecam-dark body .soft,
html.mecam-dark body .btn-soft,
html.mecam-dark body .btn-outline,
html.mecam-dark body .outline,
html.mecam-dark body .cta,
html.mecam-dark body .pill,
html.mecam-dark body .login-btn,
html.mecam-dark body .register-btn,
html.mecam-dark body .auth-btn,
html.mecam-dark body [class*="btn"],
html.mecam-dark body [class*="button"],
html.mecam-dark body [class*="light"],
html.mecam-dark body [class*="soft"],
html.mecam-dark body [class*="secondary"],
body.mecam-dark a.btn,
body.mecam-dark button,
body.mecam-dark .btn,
body.mecam-dark .button,
body.mecam-dark a.button,
body.mecam-dark .btn-light,
body.mecam-dark .btn-secondary,
body.mecam-dark .secondary,
body.mecam-dark .secondary-btn,
body.mecam-dark .light,
body.mecam-dark .light-btn,
body.mecam-dark .light-soft,
body.mecam-dark .soft,
body.mecam-dark .btn-soft,
body.mecam-dark .btn-outline,
body.mecam-dark .outline,
body.mecam-dark .cta,
body.mecam-dark .pill,
body.mecam-dark .login-btn,
body.mecam-dark .register-btn,
body.mecam-dark .auth-btn,
body.mecam-dark [class*="btn"],
body.mecam-dark [class*="button"],
body.mecam-dark [class*="light"],
body.mecam-dark [class*="soft"],
body.mecam-dark [class*="secondary"] {
  background: #1e293b !important;
  background-color: #1e293b !important;
  background-image: none !important;
  color: #f8fafc !important;
  border: 1px solid rgba(148,163,184,.42) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Creator-Links dunkel violett */
html.mecam-dark body a[href*="creator"],
html.mecam-dark body .creator-login,
html.mecam-dark body .creator-register,
body.mecam-dark a[href*="creator"],
body.mecam-dark .creator-login,
body.mecam-dark .creator-register {
  background: #312e81 !important;
  background-color: #312e81 !important;
  background-image: none !important;
  color: #f5f3ff !important;
  border-color: rgba(167,139,250,.45) !important;
}

/* Zuschauer/positive Buttons dunkelgrün */
html.mecam-dark body a[href*="viewer"],
html.mecam-dark body a[href*="zuschauer"],
html.mecam-dark body .btn-success,
html.mecam-dark body .success,
body.mecam-dark a[href*="viewer"],
body.mecam-dark a[href*="zuschauer"],
body.mecam-dark .btn-success,
body.mecam-dark .success {
  background: #15803d !important;
  background-color: #15803d !important;
  background-image: none !important;
  color: #ffffff !important;
  border-color: rgba(34,197,94,.45) !important;
}

/* Formulare */
html.mecam-dark body input,
html.mecam-dark body textarea,
html.mecam-dark body select,
body.mecam-dark input,
body.mecam-dark textarea,
body.mecam-dark select {
  background: #0b1220 !important;
  background-color: #0b1220 !important;
  color: #e8eefc !important;
  border-color: rgba(148,163,184,.35) !important;
}

/* Hinweisboxen */
html.mecam-dark body .alert,
html.mecam-dark body .notice,
html.mecam-dark body .info,
html.mecam-dark body [class*="alert"],
html.mecam-dark body [class*="notice"],
html.mecam-dark body [class*="info"],
body.mecam-dark .alert,
body.mecam-dark .notice,
body.mecam-dark .info,
body.mecam-dark [class*="alert"],
body.mecam-dark [class*="notice"],
body.mecam-dark [class*="info"] {
  background: #172554 !important;
  color: #dbeafe !important;
  border-color: rgba(96,165,250,.55) !important;
}

/* Nummern raus */
.point-number,
.danger-number,
.dev-number,
.debug-number,
.section-number {
  display: none !important;
  visibility: hidden !important;
}


/* ==========================================================
   MECAM DARKMODE SAUBER FINAL
   Letzte Regel: keine weißen Buttons, keine Legal-Leiste.
   Normale Links werden NICHT als Buttons gestylt.
   ========================================================== */

html.mecam-dark,
html.mecam-dark body,
body.mecam-dark {
    background:#0b1220 !important;
    color:#e8eefc !important;
    color-scheme:dark !important;
}

html.mecam-dark body .card,
html.mecam-dark body .clean-card,
html.mecam-dark body .entry-card,
html.mecam-dark body .box,
html.mecam-dark body .panel,
html.mecam-dark body .tile,
html.mecam-dark body .tab,
html.mecam-dark body .tabs,
html.mecam-dark body .login-box,
html.mecam-dark body .auth-box,
html.mecam-dark body .viewer-box,
html.mecam-dark body .creator-box,
html.mecam-dark body [class*="card"],
html.mecam-dark body [class*="box"],
html.mecam-dark body [class*="panel"],
html.mecam-dark body [class*="tab"],
body.mecam-dark .card,
body.mecam-dark .clean-card,
body.mecam-dark .entry-card,
body.mecam-dark .box,
body.mecam-dark .panel,
body.mecam-dark .tile,
body.mecam-dark .tab,
body.mecam-dark .tabs,
body.mecam-dark .login-box,
body.mecam-dark .auth-box,
body.mecam-dark .viewer-box,
body.mecam-dark .creator-box,
body.mecam-dark [class*="card"],
body.mecam-dark [class*="box"],
body.mecam-dark [class*="panel"],
body.mecam-dark [class*="tab"] {
    background:#111827 !important;
    background-color:#111827 !important;
    color:#e8eefc !important;
    border-color:rgba(148,163,184,.30) !important;
    box-shadow:0 18px 42px rgba(0,0,0,.28) !important;
}

html.mecam-dark body .btn,
html.mecam-dark body a.btn,
html.mecam-dark body button,
html.mecam-dark body input[type="button"],
html.mecam-dark body input[type="submit"],
html.mecam-dark body input[type="reset"],
html.mecam-dark body .button,
html.mecam-dark body a.button,
body.mecam-dark .btn,
body.mecam-dark a.btn,
body.mecam-dark button,
body.mecam-dark input[type="button"],
body.mecam-dark input[type="submit"],
body.mecam-dark input[type="reset"],
body.mecam-dark .button,
body.mecam-dark a.button {
    background:#1e293b !important;
    background-color:#1e293b !important;
    background-image:none !important;
    color:#f8fafc !important;
    border:1px solid rgba(148,163,184,.42) !important;
    box-shadow:none !important;
    text-shadow:none !important;
}

html.mecam-dark body .entry-actions .btn,
html.mecam-dark body .actions .btn,
body.mecam-dark .entry-actions .btn,
body.mecam-dark .actions .btn,
html.mecam-dark body .btn.primary-soft,
html.mecam-dark body .btn.success-soft,
html.mecam-dark body .btn.light-soft,
html.mecam-dark body .btn.secondary,
html.mecam-dark body .btn.light,
body.mecam-dark .btn.primary-soft,
body.mecam-dark .btn.success-soft,
body.mecam-dark .btn.light-soft,
body.mecam-dark .btn.secondary,
body.mecam-dark .btn.light {
    background:#1e293b !important;
    background-color:#1e293b !important;
    background-image:none !important;
    color:#f8fafc !important;
    border-color:rgba(148,163,184,.42) !important;
}

html.mecam-dark body .btn.success,
html.mecam-dark body button.success,
body.mecam-dark .btn.success,
body.mecam-dark button.success {
    background:#15803d !important;
    background-color:#15803d !important;
    background-image:none !important;
    color:#ffffff !important;
    border-color:rgba(34,197,94,.45) !important;
}

html.mecam-dark body .btn.danger,
html.mecam-dark body button.danger,
body.mecam-dark .btn.danger,
body.mecam-dark button.danger {
    background:#b91c1c !important;
    background-color:#b91c1c !important;
    background-image:none !important;
    color:#ffffff !important;
    border-color:rgba(248,113,113,.45) !important;
}

html.mecam-dark body .btn.warning,
html.mecam-dark body button.warning,
body.mecam-dark .btn.warning,
body.mecam-dark button.warning {
    background:#92400e !important;
    background-color:#92400e !important;
    background-image:none !important;
    color:#ffffff !important;
    border-color:rgba(251,191,36,.45) !important;
}

html.mecam-dark body input,
html.mecam-dark body textarea,
html.mecam-dark body select,
body.mecam-dark input,
body.mecam-dark textarea,
body.mecam-dark select {
    background:#0b1220 !important;
    background-color:#0b1220 !important;
    color:#e8eefc !important;
    border-color:rgba(148,163,184,.35) !important;
}

html.mecam-dark body .notice,
html.mecam-dark body .info,
html.mecam-dark body .alert,
html.mecam-dark body .successbox,
html.mecam-dark body .error,
body.mecam-dark .notice,
body.mecam-dark .info,
body.mecam-dark .alert,
body.mecam-dark .successbox,
body.mecam-dark .error {
    background:#172554 !important;
    background-color:#172554 !important;
    color:#dbeafe !important;
    border-color:rgba(96,165,250,.55) !important;
}

html.mecam-dark body .topbar,
body.mecam-dark .topbar {
    background:#0f172a !important;
    color:#f8fafc !important;
    border-bottom:1px solid rgba(148,163,184,.20) !important;
}

html.mecam-dark body .topbar a,
body.mecam-dark .topbar a {
    background:transparent !important;
    background-image:none !important;
    color:#f8fafc !important;
    border-color:transparent !important;
    box-shadow:none !important;
}

html.mecam-dark body .topbar nav > a,
body.mecam-dark .topbar nav > a,
html.mecam-dark body .mecam-dark-toggle,
body.mecam-dark .mecam-dark-toggle {
    background:#1e293b !important;
    color:#f8fafc !important;
    border:1px solid rgba(148,163,184,.42) !important;
    border-radius:999px !important;
}

.footer,
.legal-footer,
.footer-links {
    display:none !important;
}


/* ==========================================================
   MECAM DARKMODE FORCE FINAL
   Normale Links bleiben Links. Nur echte Buttons werden dunkel.
   ========================================================== */

html.mecam-dark,
html.mecam-dark body,
body.mecam-dark {
  background:#0b1220 !important;
  color:#e8eefc !important;
  color-scheme:dark !important;
}

html.mecam-dark body .card,
html.mecam-dark body .clean-card,
html.mecam-dark body .entry-card,
html.mecam-dark body .box,
html.mecam-dark body .panel,
html.mecam-dark body .tile,
html.mecam-dark body .tab,
html.mecam-dark body .tabs,
html.mecam-dark body .login-box,
html.mecam-dark body .auth-box,
html.mecam-dark body .viewer-box,
html.mecam-dark body .creator-box,
html.mecam-dark body [class*="card"],
html.mecam-dark body [class*="box"],
html.mecam-dark body [class*="panel"],
html.mecam-dark body [class*="tab"],
body.mecam-dark .card,
body.mecam-dark .clean-card,
body.mecam-dark .entry-card,
body.mecam-dark .box,
body.mecam-dark .panel,
body.mecam-dark .tile,
body.mecam-dark .tab,
body.mecam-dark .tabs,
body.mecam-dark .login-box,
body.mecam-dark .auth-box,
body.mecam-dark .viewer-box,
body.mecam-dark .creator-box,
body.mecam-dark [class*="card"],
body.mecam-dark [class*="box"],
body.mecam-dark [class*="panel"],
body.mecam-dark [class*="tab"] {
  background:#111827 !important;
  background-color:#111827 !important;
  color:#e8eefc !important;
  border-color:rgba(148,163,184,.30) !important;
}

html.mecam-dark body button,
html.mecam-dark body .btn,
html.mecam-dark body a.btn,
html.mecam-dark body input[type="submit"],
html.mecam-dark body input[type="button"],
html.mecam-dark body .button,
html.mecam-dark body a.button,
body.mecam-dark button,
body.mecam-dark .btn,
body.mecam-dark a.btn,
body.mecam-dark input[type="submit"],
body.mecam-dark input[type="button"],
body.mecam-dark .button,
body.mecam-dark a.button {
  background:#1e293b !important;
  background-color:#1e293b !important;
  background-image:none !important;
  color:#f8fafc !important;
  border:1px solid rgba(148,163,184,.42) !important;
  box-shadow:none !important;
  text-shadow:none !important;
}

html.mecam-dark body input,
html.mecam-dark body textarea,
html.mecam-dark body select,
body.mecam-dark input,
body.mecam-dark textarea,
body.mecam-dark select {
  background:#0b1220 !important;
  color:#e8eefc !important;
  border-color:rgba(148,163,184,.35) !important;
}

.footer,
.legal-footer,
.footer-links {
  display:none !important;
}


/* ==========================================================
   MECAM RESTORE STABLE FIX
   Ziel:
   - keine mobile Overlay-/Bottom-Bar-Funktion
   - Handy-Buttons bleiben klickbar
   - Footer/Legal-Leiste raus
   - Streamrahmen sichtbar, ohne JS/Funktionen zu verändern
   ========================================================== */

.footer,
.legal-footer,
.footer-links,
.mecam-mobile-bottom-nav {
  display:none !important;
}

/* Nichts darf mobile Klicks blockieren */
@media (max-width: 768px) {
  body,
  main,
  .container,
  .page,
  .content,
  .wrapper {
    pointer-events:auto !important;
  }

  .topbar,
  header.topbar,
  .site-header,
  body > header {
    transform:none !important;
    opacity:1 !important;
    pointer-events:auto !important;
    position:relative !important;
    top:auto !important;
  }

  button,
  .btn,
  a.btn,
  input[type="submit"],
  input[type="button"],
  .button,
  a.button {
    pointer-events:auto !important;
    touch-action:manipulation !important;
    position:relative;
    z-index:auto;
  }
}

/* 1mm Streamrahmen, ohne Streaminglogik anzufassen */
video,
#localVideo,
#remoteVideo,
.local-video,
.remote-video,
.cam-video,
.camera-preview,
.stream-video,
.video-frame video,
.stream-frame video,
.creator-video-wrap video,
.viewer-video-wrap video {
  border: 1mm solid #64748b !important;
  border-radius: 16px !important;
  box-sizing: border-box !important;
}

/* Wenn Stream läuft, grün */
body.mecam-stream-live video,
body.stream-live video,
body.is-live video,
body.streaming video,
.stream-live video,
.is-live video,
.streaming video,
.live video,
video.stream-live,
video.is-live,
video.live,
#localVideo.stream-live,
#remoteVideo.stream-live {
  border-color:#22c55e !important;
}

/* Wenn offline/gestoppt, rot */
body.mecam-stream-offline video,
body.stream-offline video,
body.is-offline video,
body.stream-stopped video,
.stream-offline video,
.is-offline video,
.offline video,
.stream-stopped video,
video.stream-offline,
video.is-offline,
video.offline,
#localVideo.stream-offline,
#remoteVideo.stream-offline {
  border-color:#ef4444 !important;
}

/* Im Creatorbereich: sobald Video eine Quelle hat, per Browser-state nicht direkt prüfbar,
   deshalb bleibt neutral-grau, bis vorhandene Klassen live/offline setzen. */


/* ==========================================================
   MECAM FINAL REPAIR 08-05
   - Benachrichtigungsleiste "gehen gleich live" aus
   - Handy-Klicks nicht blockieren
   - 1,5mm Webcam/Stream-Rahmen direkt am Frame
   ========================================================== */
.viewer-live-notice,
.footer,
.legal-footer,
.footer-links,
.mecam-mobile-bottom-nav { display:none !important; }

html, body, main, .container { pointer-events:auto !important; }

@media (max-width:768px){
  .topbar, header.topbar, .site-header, body > header{
    transform:none !important;
    opacity:1 !important;
    pointer-events:auto !important;
    position:relative !important;
    top:auto !important;
  }
  a, button, .btn, a.btn, input, select, textarea, label{
    pointer-events:auto !important;
    touch-action:manipulation !important;
  }
}

#camFrame.creator-video-frame,
.creator-video-frame,
.real-video-wrap,
.video-frame,
.stream-frame,
.viewer-video-wrap,
.creator-video-wrap{
  border:1.5mm solid #64748b !important;
  border-radius:18px !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}

#camFrame.creator-video-frame.cam-off,
.creator-video-frame.cam-off{
  border-color:#16a34a !important;
  box-shadow:0 0 0 3px rgba(22,163,74,.16) !important;
}

#camFrame.creator-video-frame.cam-live,
.creator-video-frame.cam-live,
.real-video-wrap.stream-live,
.video-frame.stream-live,
body.mecam-stream-live #camFrame,
body.mecam-stream-live .creator-video-frame,
body.mecam-stream-live .real-video-wrap{
  border-color:#dc2626 !important;
  box-shadow:0 0 0 3px rgba(220,38,38,.16) !important;
}

#camFrame video,
.creator-video-frame video,
.real-video-wrap video{
  border:0 !important;
  border-radius:14px !important;
}

#downloadRecording.btn{ display:none; }
#downloadRecording.is-ready{ display:inline-flex !important; }

.presenter-preview-wrap{
  display:none;
  margin-top:10px;
  border:1.5mm solid #2563eb;
  border-radius:14px;
  overflow:hidden;
  background:#000;
}
.presenter-preview-wrap canvas{ width:100%; height:auto; display:block; background:#000; }


/* MECAM 08-05-2026 Creator-Studio Mobile-Reparatur */
@media (max-width: 768px){
  html, body{width:100%!important;max-width:100%!important;overflow-x:hidden!important;}
  .container{width:100%!important;max-width:100%!important;margin:8px auto!important;padding:0 10px!important;box-sizing:border-box!important;}
  .stream-layout,.viewer-stream-grid{display:grid!important;grid-template-columns:1fr!important;width:100%!important;gap:10px!important;}
  .stream-actions,.actions{display:flex!important;flex-wrap:wrap!important;gap:8px!important;align-items:stretch!important;}
  .stream-actions .btn,.stream-actions button,.stream-actions a.btn{flex:1 1 145px!important;min-width:0!important;white-space:normal!important;text-align:center!important;}
  #camFrame.creator-video-frame,.creator-video-frame,.real-video-wrap{min-height:210px!important;width:100%!important;}
  #localVideo, #remoteVideo, .creator-video-frame video, .real-video-wrap video{width:100%!important;height:auto!important;min-height:210px!important;object-fit:cover!important;display:block!important;}
  input,select,textarea,button,.btn{max-width:100%!important;}
}

/* MeCam repair 2026-05-08 recording/pip */
.presenter-preview-wrap{display:none!important;}
#downloadRecording.is-ready{display:inline-flex!important;}
.creator-video-frame{border-width:1.5px!important;}

/* MECO final: keine gruenen Hauptbuttons oder Vorschaukacheln */
html body .btn.success,
html body button.success,
html body input[type="submit"].success,
html body .btn.success-soft,
html body .success:not(.successbox):not(.badge) {
  background:#eef6ff!important;
  background-color:#eef6ff!important;
  background-image:linear-gradient(135deg,#f8fbff,#eaf3ff)!important;
  color:#173b8f!important;
  border:1px solid #cfe2ff!important;
  box-shadow:0 8px 18px rgba(37,99,235,.08)!important;
}
html body .btn.success:hover,
html body button.success:hover,
html body input[type="submit"].success:hover,
html body .btn.success-soft:hover {
  background:#eaf3ff!important;
  background-color:#eaf3ff!important;
  filter:none!important;
}
html.mecam-dark body .btn.success,
html.mecam-dark body button.success,
html.mecam-dark body input[type="submit"].success,
html.mecam-dark body .btn.success-soft,
html.mecam-dark body .success:not(.successbox):not(.badge),
body.mecam-dark .btn.success,
body.mecam-dark button.success,
body.mecam-dark input[type="submit"].success,
body.mecam-dark .btn.success-soft,
body.mecam-dark .success:not(.successbox):not(.badge) {
  background:#1f2937!important;
  background-color:#1f2937!important;
  background-image:linear-gradient(135deg,#111827,#263244)!important;
  color:#e5e7eb!important;
  border:1px solid #475569!important;
  box-shadow:none!important;
}
html.mecam-dark body .btn.success:hover,
html.mecam-dark body button.success:hover,
body.mecam-dark .btn.success:hover,
body.mecam-dark button.success:hover {
  background:#263244!important;
  background-color:#263244!important;
  filter:none!important;
}
html body .live-dot,
html body .online-dot {
  background:#2563eb!important;
  box-shadow:0 0 0 5px rgba(37,99,235,.14)!important;
}
html.mecam-dark body .live-dot,
html.mecam-dark body .online-dot,
body.mecam-dark .live-dot,
body.mecam-dark .online-dot {
  background:#94a3b8!important;
  box-shadow:0 0 0 5px rgba(148,163,184,.14)!important;
}
html body .demo-live-one,
html body .demo-live-two,
html body .demo-live-three,
html body .demo-live-four,
html body .demo-video-one,
html body .demo-video-two,
html body .demo-video-three,
html body .demo-video-four,
html body .home-video-thumb {
  background:linear-gradient(135deg,#eaf3ff,#ffffff)!important;
}
html body .home-video-play {
  background:#ffffff!important;
  border:1px solid #cfe2ff!important;
}
html.mecam-dark body .demo-live-one,
html.mecam-dark body .demo-live-two,
html.mecam-dark body .demo-live-three,
html.mecam-dark body .demo-live-four,
html.mecam-dark body .demo-video-one,
html.mecam-dark body .demo-video-two,
html.mecam-dark body .demo-video-three,
html.mecam-dark body .demo-video-four,
html.mecam-dark body .home-video-thumb,
body.mecam-dark .demo-live-one,
body.mecam-dark .demo-live-two,
body.mecam-dark .demo-live-three,
body.mecam-dark .demo-live-four,
body.mecam-dark .demo-video-one,
body.mecam-dark .demo-video-two,
body.mecam-dark .demo-video-three,
body.mecam-dark .demo-video-four,
body.mecam-dark .home-video-thumb {
  background:linear-gradient(135deg,#111827,#263244)!important;
}
html.mecam-dark body .home-video-play,
body.mecam-dark .home-video-play {
  background:#1f2937!important;
  border:1px solid #475569!important;
}
html.mecam-dark body .home-video-play:after,
body.mecam-dark .home-video-play:after {
  border-left-color:#e5e7eb!important;
}

/* MECO Registrierung: ruhiger, weniger Formular-Wand */
.register-card{max-width:860px!important;}
.register-card form{display:grid;gap:12px;}
.register-section{
  border:1px solid #e2e8f0;
  background:#f8fafc;
  border-radius:14px;
  padding:14px;
}
.register-section h2{margin-top:0!important;}
.register-section .grid{margin-top:8px;}
.field-help{
  display:block;
  margin-top:-8px;
  margin-bottom:8px;
  color:#64748b;
  font-size:12px;
  line-height:1.35;
}
.register-confirm p{margin:7px 0;}
.register-submit-help{
  margin:2px 0 0;
  padding:10px 12px;
  border-radius:12px;
  background:#eef6ff;
  border:1px solid #cfe2ff;
  color:#173b8f;
  font-weight:750;
  font-size:13px;
}
.register-card button[disabled],
.register-card .btn[disabled]{
  opacity:.62!important;
  cursor:not-allowed!important;
  transform:none!important;
}
.register-card .alias-ok{
  color:#173b8f!important;
  border-color:#cfe2ff!important;
  background:#eef6ff!important;
}
html.mecam-dark body .register-section,
body.mecam-dark .register-section{
  background:#111827!important;
  border-color:#334155!important;
}
html.mecam-dark body .register-submit-help,
body.mecam-dark .register-submit-help{
  background:#1f2937!important;
  border-color:#475569!important;
  color:#e5e7eb!important;
}

/* MECO 2026-05-11: Landing ruhig, kein Gruen als Hauptfarbe */
html body .landing-four-main-points,
html body .landing-compact-entry,
html body .landing-four-grid,
html body .landing-four-card{
  display:none!important;
}
html body .btn.success,
html body button.success,
html body input[type="submit"].success,
html body .btn.success-soft,
html body .success:not(.successbox):not(.badge){
  background:#eef6ff!important;
  background-color:#eef6ff!important;
  background-image:linear-gradient(135deg,#f8fbff,#eaf3ff)!important;
  color:#173b8f!important;
  border:1px solid #cfe2ff!important;
  box-shadow:0 8px 18px rgba(37,99,235,.08)!important;
}
html body .btn.success:hover,
html body button.success:hover,
html body input[type="submit"].success:hover,
html body .btn.success-soft:hover{
  background:#eaf3ff!important;
  background-color:#eaf3ff!important;
  filter:none!important;
}
html.mecam-dark body .btn.success,
html.mecam-dark body button.success,
html.mecam-dark body input[type="submit"].success,
html.mecam-dark body .btn.success-soft,
html.mecam-dark body .success:not(.successbox):not(.badge),
body.mecam-dark .btn.success,
body.mecam-dark button.success,
body.mecam-dark input[type="submit"].success,
body.mecam-dark .btn.success-soft,
body.mecam-dark .success:not(.successbox):not(.badge){
  background:#1f2937!important;
  background-color:#1f2937!important;
  background-image:linear-gradient(135deg,#111827,#263244)!important;
  color:#e5e7eb!important;
  border:1px solid #475569!important;
  box-shadow:none!important;
}
html body .live-dot,
html body .online-dot{
  background:#2563eb!important;
  box-shadow:0 0 0 5px rgba(37,99,235,.14)!important;
}
html.mecam-dark body .live-dot,
html.mecam-dark body .online-dot,
body.mecam-dark .live-dot,
body.mecam-dark .online-dot{
  background:#94a3b8!important;
  box-shadow:0 0 0 5px rgba(148,163,184,.14)!important;
}
html body #camFrame.creator-video-frame.cam-off,
html body .creator-video-frame.cam-off{
  border-color:#64748b!important;
  box-shadow:0 0 0 3px rgba(100,116,139,.14)!important;
}
html body .demo-live-three,
html body .demo-video-three{
  background:linear-gradient(135deg,#eaf3ff,#ffffff)!important;
}
html.mecam-dark body .demo-live-three,
html.mecam-dark body .demo-video-three,
body.mecam-dark .demo-live-three,
body.mecam-dark .demo-video-three{
  background:linear-gradient(135deg,#111827,#263244)!important;
}

/* MECO sichtbar final: alte Gruenregeln im Darkmode ueberstimmen */
html body .live-preview .preview-cam,
html body .creator-video-preview .home-video-card,
html body .demo-preview-cam{
  background:#f8fbff!important;
  background-color:#f8fbff!important;
  background-image:none!important;
  border-color:#dbeafe!important;
  color:#172033!important;
}
html body .live-preview .preview-cam small,
html body .creator-video-preview .home-video-card small{
  color:#64748b!important;
}
html.mecam-dark body .live-preview .preview-cam,
html.mecam-dark body .creator-video-preview .home-video-card,
html.mecam-dark body .demo-preview-cam,
body.mecam-dark .live-preview .preview-cam,
body.mecam-dark .creator-video-preview .home-video-card,
body.mecam-dark .demo-preview-cam{
  background:#111827!important;
  background-color:#111827!important;
  background-image:none!important;
  border-color:#334155!important;
  color:#e5e7eb!important;
}
html.mecam-dark body .live-preview .preview-cam small,
html.mecam-dark body .creator-video-preview .home-video-card small,
body.mecam-dark .live-preview .preview-cam small,
body.mecam-dark .creator-video-preview .home-video-card small{
  color:#cbd5e1!important;
}
html.mecam-dark body a[href*="viewer"],
html.mecam-dark body a[href*="zuschauer"],
html.mecam-dark body .btn-success,
html.mecam-dark body .success,
body.mecam-dark a[href*="viewer"],
body.mecam-dark a[href*="zuschauer"],
body.mecam-dark .btn-success,
body.mecam-dark .success{
  background:#1f2937!important;
  background-color:#1f2937!important;
  background-image:linear-gradient(135deg,#111827,#263244)!important;
  color:#e5e7eb!important;
  border-color:#475569!important;
}
html.mecam-dark body a[href*="creator"],
html.mecam-dark body .creator-login,
html.mecam-dark body .creator-register,
body.mecam-dark a[href*="creator"],
body.mecam-dark .creator-login,
body.mecam-dark .creator-register{
  background:#1f2937!important;
  background-color:#1f2937!important;
  background-image:linear-gradient(135deg,#111827,#263244)!important;
  color:#e5e7eb!important;
  border-color:#475569!important;
}

.meco-coin-form{display:inline-flex;align-items:center;gap:7px;margin:0}
.meco-coin-button{display:inline-flex!important;align-items:center;justify-content:center;gap:7px}
.meco-coin-button::before{content:"";width:18px;height:18px;border-radius:50%;display:inline-block;flex:0 0 auto;background:radial-gradient(circle at 31% 28%,#fff4a8 0 18%,#f7c948 34%,#d99a05 64%,#7c4a00 100%);box-shadow:0 0 10px rgba(245,197,66,.55),0 2px 5px rgba(0,0,0,.36)}
.meco-coin-status{font-size:12px;font-weight:800;color:#64748b}
.meco-coin-status.is-ok{color:#15803d}
.meco-coin-status.is-error{color:#b91c1c}
html.mecam-dark body .meco-coin-status,body.mecam-dark .meco-coin-status{color:#cbd5e1}
html.mecam-dark body .meco-coin-status.is-ok,body.mecam-dark .meco-coin-status.is-ok{color:#86efac}
html.mecam-dark body .meco-coin-status.is-error,body.mecam-dark .meco-coin-status.is-error{color:#fecaca}

/* MECO Mobile: Startmenue wieder direkt erreichbar */
body{padding-bottom:0}
.mecam-mobile-bottom-nav{display:none!important}
@media (max-width:768px){
  body{padding-bottom:72px!important}
  .topbar.soft-topbar{
    position:sticky!important;
    top:0!important;
    z-index:120!important;
    padding:7px 10px!important;
  }
  .topbar .brand img{max-height:34px!important;width:auto!important}
  .topbar .brand span{font-size:15px!important}
  .topbar nav{
    display:flex!important;
    gap:5px!important;
    overflow-x:auto!important;
    flex-wrap:nowrap!important;
    -webkit-overflow-scrolling:touch;
    padding-bottom:2px!important;
    scrollbar-width:none;
  }
  .topbar nav::-webkit-scrollbar{display:none}
  .topbar nav a,
  .topbar nav button{
    flex:0 0 auto!important;
    min-height:34px!important;
    font-size:12px!important;
    padding:7px 9px!important;
    white-space:nowrap!important;
  }
  .topbar .nav-user{flex:0 0 auto!important}
  .mecam-install-popover{top:74px!important;margin:6px 8px 0!important}
  .mecam-mobile-bottom-nav{
    display:flex!important;
    position:fixed!important;
    left:8px!important;
    right:8px!important;
    bottom:8px!important;
    z-index:220!important;
    gap:4px!important;
    padding:6px!important;
    border-radius:18px!important;
    border:1px solid rgba(148,163,184,.34)!important;
    background:rgba(248,251,255,.96)!important;
    box-shadow:0 14px 34px rgba(15,23,42,.22)!important;
    backdrop-filter:blur(12px)!important;
  }
  .mecam-mobile-bottom-nav a{
    flex:1 1 0!important;
    min-width:0!important;
    min-height:42px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:13px!important;
    text-decoration:none!important;
    color:#243044!important;
    background:#eef6ff!important;
    border:1px solid #dbeafe!important;
    font-size:11px!important;
    font-weight:900!important;
    line-height:1!important;
  }
  .mecam-mobile-bottom-nav a.active{
    background:#173b8f!important;
    border-color:#173b8f!important;
    color:#fff!important;
  }
  body.mecam-dark .mecam-mobile-bottom-nav,
  html.mecam-dark body .mecam-mobile-bottom-nav{
    background:rgba(15,23,42,.96)!important;
    border-color:#334155!important;
  }
  body.mecam-dark .mecam-mobile-bottom-nav a,
  html.mecam-dark body .mecam-mobile-bottom-nav a{
    background:#1f2937!important;
    border-color:#475569!important;
    color:#e5e7eb!important;
  }
  body.mecam-dark .mecam-mobile-bottom-nav a.active,
  html.mecam-dark body .mecam-mobile-bottom-nav a.active{
    background:#334155!important;
    color:#fff!important;
  }
}