/* ============================================================================ LAZAAR31 – Stylesheet Massverhaeltnisse ----------------- Das gesamte Desktop-Layout rechnet in cqw = 1 % der Seitenbreite (Container: ). Bezugsbreite des Entwurfs sind 1300 px, d. h. 1 cqw = 13 px. Es gibt bewusst KEIN clamp() mit px-Grenzen mehr: px-Grenzen wachsen beim Zoomen nicht mit, wodurch Schrift, Abstaende und Bildebenen frueher gegeneinander verrutscht sind. Rein proportionale Einheiten sehen bei 75 %, 100 % und 200 % Zoom identisch aus. Die Bildbuehne im Hero (.hero__visual) ist zusaetzlich in sich starr: feste Buehne im Seitenverhaeltnis 2:1, alle Ebenen darin ausschliesslich in % dieser Buehne. Sie skaliert damit als EIN Block. Bewegung, Fokusringe und die Feinheiten aller Unterseiten stehen in assets/css/motion.css – diese Datei wird als letzte geladen. ========================================================================= */ /* --------------------------------------------------------------------------- Farb- und Massmarken Jede Seite greift auf dieselben Werte zu. Der Dunkelmodus tauscht weiter unten nur diese Marken aus – dadurch ziehen auch Bausteine mit, die ihre Farben nicht einzeln aufgefuehrt haben (Forum, Kontakt, Rechtstexte). --gutter ist der Seitenrand, den jede Unterseite links und rechts einhaelt. ------------------------------------------------------------------------ */ :root{ --brand:#D2141E; --brand-dark:#A80E17; --brand-bright:#F04A52; --brand-tint:rgba(210,20,30,.09); --surface:#FBFAF9; --surface-2:#F4F1ED; --surface-alt:#F4F1ED; --card-bg:#FFFFFF; --border-color:#EFEBE6; --border-strong:#E3DED8; --text-color:#15120F; --text-muted:#6E6862; --text-soft:#4A453F; --shadow-sm:0 1px 3px rgba(20,15,10,.05); --shadow-md:0 .9cqw 2.4cqw -.9cqw rgba(20,15,10,.26); --shadow-lg:0 2cqw 4.6cqw -1.4cqw rgba(20,15,10,.32); --ease-out:cubic-bezier(.22,.85,.3,1); --ease-spring:cubic-bezier(.34,1.4,.64,1); --gutter:4.2cqw; } @media (max-width:640px){ :root{--gutter:5vw} } /* Basis */ @keyframes livePulse{0%,100%{opacity:1}50%{opacity:.25}} html{box-sizing:border-box;color-scheme:light} *,*::before,*::after{box-sizing:inherit} body{margin:0;background:var(--surface);font-family:'Inter',system-ui,sans-serif;color:var(--text-color);-webkit-font-smoothing:antialiased;container-type:inline-size;container-name:page;overflow-x:hidden} a{color:var(--brand)} a:hover{color:var(--brand-dark)} ::selection{background:var(--brand);color:#fff} img{max-width:100%} [hidden]{display:none!important} .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap} /* Skip-Link */ .skip-link{position:absolute;left:-9999px;background:#15120F;color:#fff;padding:12px 18px;border-radius:8px;z-index:1000;font-weight:700;text-decoration:none} /* position:fixed waere hier wirkungslos: traegt container-type und wird dadurch selbst zum Bezugsrahmen. absolute trifft dieselbe Stelle. */ .skip-link:focus{position:absolute!important;left:12px!important;top:12px!important} /* Hover-/Fokus-Zustaende (benoetigen !important gegenueber Basisfarben derselben Klasse) */ .hov-icon:hover{opacity:.65!important} .hov-navlink:hover{color:#D2141E!important} .hov-cta-red:hover{background:#A80E17!important} .hov-cta-discord:hover{background:#4652C6!important} .hov-link-red:hover{color:#A80E17!important} /* Seitenrahmen */ .page{position:relative} /* Header */ .site-header{position:absolute;top:0;left:0;right:0;z-index:30;display:flex;flex-direction:column} .site-header__top{display:flex;align-items:flex-start;gap:2.5cqw;padding:1.33cqw 0 0 3.37cqw} .site-header__icons{margin-left:auto;display:flex;align-items:center;gap:1.4cqw;padding:2.6cqw 3cqw 0 0} .logo{flex-shrink:0;width:5.72cqw;height:7.43cqw;background:#D2141E;display:flex;align-items:center;justify-content:center;text-decoration:none} .logo__img{width:62%;height:auto;object-fit:contain} #nav-desktop{display:flex;gap:2.4cqw;flex-wrap:wrap;padding-top:3.2cqw} .nav__link{text-decoration:none;color:var(--text-color);font-weight:800;font-size:1cqw;letter-spacing:.09em;white-space:nowrap;padding-bottom:.38cqw;border-bottom:.19cqw solid transparent} .nav__link--active{color:#D2141E;border-bottom-color:#D2141E} .icon-link{display:flex} .icon-link--square{align-items:center;justify-content:center;width:2cqw;height:2cqw} .icon-link--footer{padding:.3cqw} .icon-link__img--twitch{width:2cqw;height:auto;object-fit:contain} .icon-link__img--discord{width:2.1cqw;height:auto;object-fit:contain} .icon-link__img--twitch-footer{width:1.35cqw;height:auto;object-fit:contain} .icon-link__img--discord-footer{width:1.45cqw;height:auto;object-fit:contain} .theme-toggle{width:2.35cqw;height:2.35cqw;display:grid;place-items:center;flex-shrink:0;padding:0;border:1px solid #CFC9C2;border-radius:50%;background:rgba(255,255,255,.75);color:#15120F;cursor:pointer;transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease} .theme-toggle:hover{transform:translateY(-1px);background:#fff;border-color:#8A847C} .theme-toggle:focus-visible{outline:.18cqw solid #D2141E;outline-offset:.2cqw} .theme-toggle__icon{grid-area:1/1;width:1.18cqw;height:1.18cqw;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .theme-toggle__moon{display:none;fill:currentColor;stroke:none} .theme-toggle__sun{display:block} html[data-theme="dark"] .theme-toggle__moon{display:block} html[data-theme="dark"] .theme-toggle__sun{display:none} #nav-toggle{width:38px;height:38px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border-radius:8px;background:#15120F;border:none;cursor:pointer;flex-shrink:0} .nav-toggle__bar{width:17px;height:2px;background:#fff;border-radius:2px} #mobile-menu{display:flex;flex-direction:column;background:var(--card-bg);border-bottom:1px solid var(--border-color);box-shadow:0 8px 24px rgba(20,15,10,.1);padding:6px 4vw 14px} .nav-mobile__link{text-decoration:none;color:var(--text-color);font-weight:800;font-size:14px;letter-spacing:.07em;padding:12px 0;border-bottom:1px solid #F2EFEB} .nav-mobile__link--active{color:#D2141E} @media (min-width: 769px) { #nav-toggle { display: none !important; } } @media (max-width: 768px) { #nav-desktop { display: none !important; } .site-header__icons{padding:14px 4vw 0 0;gap:12px} .icon-link--square{width:22px;height:22px} .icon-link__img--twitch{width:22px} .icon-link__img--discord{width:23px} .theme-toggle{width:38px;height:38px} .theme-toggle__icon{width:19px;height:19px} .theme-toggle:focus-visible{outline-width:2px;outline-offset:2px} .logo{width:56px;height:62px} } /* Hero */ .hero{position:relative;overflow:hidden;padding:0 0 .55cqw} .hero__inner{display:grid;grid-template-columns:100%;align-items:center} .hero__visual,.hero__content{grid-area:1/1;min-width:0} .hero__content{position:relative;z-index:2;justify-self:start;align-self:center;display:flex;flex-direction:column;gap:2.28cqw;max-width:46cqw;padding:9.62cqw 2.5cqw 0 3.62cqw} .hero__title{margin:0;font-family:'Anton',sans-serif;font-weight:400;line-height:.86;font-size:10.2cqw;letter-spacing:-.01em} .hero__tagline{margin:0;color:#D2141E;font-weight:900;letter-spacing:.14em;font-size:1.7cqw;white-space:nowrap} .hero__status{display:flex;align-items:center;gap:1.2cqw;margin-top:-1.02cqw} .hero__status-label{font-weight:800;font-size:1.08cqw;letter-spacing:.08em;color:var(--text-color);white-space:nowrap} .hero__status-icon{width:1.15cqw;height:auto;object-fit:contain} .hero__ctas{display:flex;gap:1.4cqw;margin-top:-1.14cqw} .live-badge{display:inline-flex;align-items:center;gap:.42cqw;background:#D2141E;color:#fff;font-weight:800;font-size:.95cqw;letter-spacing:.09em;padding:.44cqw 1.05cqw;border-radius:.42cqw} .live-dot{border-radius:50%;animation:livePulse 1.7s ease-in-out infinite} .live-dot--white{width:.48cqw;height:.48cqw;background:#fff} .live-dot--red{width:.55cqw;height:.55cqw;background:#D2141E;flex-shrink:0} .cta{display:inline-flex;align-items:center;gap:.6cqw;color:#fff;font-weight:700;font-size:1.05cqw;padding:1.05cqw 1.5cqw;border-radius:.55cqw;text-decoration:none;white-space:nowrap} .cta--twitch{background:#D2141E} .cta--discord{background:#5865F2} .cta__icon{filter:brightness(0) invert(1)} .cta__icon--twitch{width:1.25cqw;height:auto;object-fit:contain} .cta__icon--discord{width:1.32cqw;height:auto;object-fit:contain} /* Bildbuehne – starre Komposition, ausschliesslich % der Buehne. Die Werte sind aus dem Soll-Screenshot ausgemessen (Buehne 1086x543 px). Reihenfolge = Ebenen von hinten nach vorn. */ .hero__visual{position:relative;justify-self:end;align-self:start;width:69%;aspect-ratio:2/1;overflow:hidden;z-index:1} .hv{position:absolute;display:block;pointer-events:none;max-width:none} .hv--cathedral{left:10%;top:22.4%;width:33.8%;height:71.5%;opacity:.75} .hv--bridge{left:27.2%;top:38%;width:38.3%;height:52%;opacity:.8} .hv--skyline{left:74.5%;top:19.3%;width:24%;height:72%;opacity:.33} /* Diagonale Baender: ein gemeinsamer Scherwinkel haelt sie exakt parallel. skewX rechnet in den eigenen px der Ebene – da Breite und Hoehe in % der Buehne stehen, bleibt der Winkel bei jeder Groesse gleich. */ .hv--band{top:-10%;height:110%;transform:skewX(-39.4deg);transform-origin:0 0} .hv--band-c{left:108.1%;width:25.8%;background:linear-gradient(to bottom,transparent 10%,rgba(150,150,158,.11) 20%,rgba(196,152,156,.14) 44%,rgba(214,140,146,.09) 62%,transparent 72%)} .hv--band-a{left:114.8%;width:2.2%;background:linear-gradient(to bottom,transparent 50%,rgba(210,20,30,.20) 60%,rgba(210,20,30,.22) 80%,transparent 86%)} .hv--band-b{left:119.3%;width:4.15%;background:linear-gradient(to bottom,transparent 30%,rgba(210,20,30,.13) 46%,rgba(210,20,30,.26) 64%,rgba(210,20,30,.92) 70%,rgba(210,20,30,.92) 90%,transparent 91%)} .hv--waves{left:77.4%;top:88.6%;width:18%;height:8.3%;opacity:.6} .hv--goat{left:37%;top:2%;width:41%;height:auto;z-index:2;filter:drop-shadow(0 .28cqw .38cqw rgba(15,10,8,.16))} .hv--controller{left:45%;top:61%;width:28%;height:auto;z-index:3;filter:drop-shadow(0 .4cqw .55cqw rgba(15,10,8,.38))} .hv--drops{left:92.9%;top:69.3%;width:4.6%;height:auto;z-index:4} /* Live-Uebersicht */ .overview{position:relative;z-index:3;padding:0 3cqw 1.6cqw;display:grid;grid-template-columns:repeat(4,1fr);gap:1.1cqw;align-items:stretch} .card{background:var(--card-bg);border:1px solid var(--border-color);border-radius:.7cqw;padding:.7cqw;display:flex;flex-direction:column;gap:.5cqw;min-width:0;box-shadow:var(--shadow-sm)} .card--stream{gap:.55cqw} .card__title{margin:0;display:flex;align-items:center;gap:.4cqw;font-size:.88cqw;font-weight:800} .card__title--tight{letter-spacing:.07em;white-space:nowrap} .card__title--wide{letter-spacing:.02em} .card__title--wide-nowrap{letter-spacing:.02em;white-space:nowrap} .card__title-icon{width:.95cqw;height:auto;object-fit:contain;flex-shrink:0} .card__title svg{width:.95cqw;height:.95cqw;flex-shrink:0} /* Stream-Karte */ .stream-frame{position:relative;border-radius:.55cqw;overflow:hidden;background:#15120F;flex:1;min-height:9cqw;display:flex} /* Der Platzhalter wird absolut gelegt: sonst diktiert seine Eigenhoehe die Hoehe der gesamten Kartenreihe. */ .stream-frame > image-slot{position:absolute;inset:0} .stream-frame__badge{position:absolute;top:.4cqw;right:.4cqw;background:#D2141E;color:#fff;font-size:.62cqw;font-weight:800;letter-spacing:.06em;padding:.18cqw .5cqw;border-radius:.3cqw} .stream-frame__caption{position:absolute;left:0;right:0;bottom:0;padding:.5cqw .6cqw .55cqw;background:linear-gradient(to top,rgba(6,4,3,.94),rgba(6,4,3,.55) 65%,transparent)} .stream-frame__game{margin:0 0 .06cqw;font-weight:700;font-size:.88cqw;color:#fff;line-height:1.25} .stream-frame__mode{margin:0;font-size:.72cqw;color:#CFC9C2} .stream-meta{display:flex;align-items:center;justify-content:space-between;gap:.4cqw;flex-wrap:wrap;margin-top:auto} .stream-meta__tags{display:flex;gap:.3cqw;flex-wrap:wrap} .stream-meta__viewers{display:flex;align-items:center;gap:.3cqw;font-size:.72cqw;font-weight:700;color:var(--text-soft)} .stream-meta__viewers svg{width:.75cqw;height:.75cqw;flex-shrink:0} .tag{background:var(--surface-2);color:var(--text-soft);font-size:.68cqw;font-weight:700;padding:.25cqw .55cqw;border-radius:.3cqw} /* Chat-Karte */ #chat-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3cqw;flex:1;min-height:0;max-height:10cqw;overflow-y:auto;overflow-x:hidden;font-size:.75cqw;line-height:1.3} .chat-item{display:flex;align-items:center;flex-wrap:wrap;gap:.3cqw;min-width:0} .chat-item__dot{flex-shrink:0;width:.85cqw;height:.85cqw;border-radius:50%;background:#8A847C} .chat-item__user{font-weight:700;overflow-wrap:anywhere} .chat-item__text{min-width:0;overflow-wrap:anywhere;color:#2E2A25} #chat-form{display:flex;margin-top:auto;gap:.35cqw;border:1px solid #EAE5DF;border-radius:.5cqw;padding:.3cqw .5cqw .3cqw .7cqw;align-items:center;background:#FCFBFA} #chat-input{flex:1;min-width:0;border:none;outline:none;font-size:.72cqw;font-family:inherit;background:transparent;color:var(--text-color);padding:.3cqw 0} .chat-send{flex-shrink:0;width:1.6cqw;height:1.6cqw;border-radius:.36cqw;border:none;background:#D2141E;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0} .chat-send svg{width:.72cqw;height:.72cqw} /* Ueber-mich-Karte */ .about__bio{margin:0;font-size:.75cqw;line-height:1.5;color:#3A3630;text-wrap:pretty} .about__motto{margin:0;font-size:.75cqw;font-weight:800;color:var(--text-color)} .about__tags{display:flex;gap:1.1cqw;flex-wrap:wrap;margin-top:auto;padding-top:.25cqw} .about__tag{display:flex;flex-direction:column;align-items:center;gap:.3cqw} .about__tag-icon{width:1.3cqw;height:auto;object-fit:contain} .about__tag-label{font-size:.6cqw;font-weight:800;letter-spacing:.07em;color:var(--text-soft)} /* Schedule-Karte */ .schedule-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5cqw} .schedule-item{display:flex;align-items:center;gap:.7cqw;background:#FBFAF8;border:1px solid #F2EFEA;border-radius:.5cqw;padding:.5cqw .6cqw;min-width:0} .schedule-item__date{flex-shrink:0;text-align:center;line-height:1.05} .schedule-item__day{font-size:.58cqw;font-weight:800;color:#D2141E;letter-spacing:.04em} .schedule-item__num{font-size:1.1cqw;font-weight:800;color:var(--text-color)} .schedule-item__month{font-size:.52cqw;font-weight:800;color:#D2141E;letter-spacing:.04em} .schedule-item__info{flex:1;min-width:0} .schedule-item__time{margin:0;font-size:.78cqw;font-weight:700;color:var(--text-color)} .schedule-item__title{margin:0;font-size:.72cqw;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .schedule-item__icon{width:.95cqw;height:auto;object-fit:contain;flex-shrink:0} .schedule-more{text-decoration:none;color:#D2141E;font-weight:800;font-size:.75cqw;margin-top:auto;padding-top:.12cqw;display:inline-flex;align-items:center;gap:.35cqw} /* Footer */ .site-footer{background:var(--surface);padding:0 3cqw .8cqw;display:flex;flex-direction:column;align-items:center;gap:.6cqw} .site-footer__banner{display:flex;align-items:center;gap:2cqw;width:100%;max-width:84.6cqw} .site-footer__heartbeat{flex:1;min-width:0;height:1.3cqw;object-fit:contain;object-position:right;opacity:.85} .site-footer__heartbeat--flipped{transform:scaleX(-1)} .site-footer__slogan{margin:0;flex-shrink:0;font-family:'Anton',sans-serif;font-weight:400;font-size:1.9cqw;letter-spacing:.13em;white-space:nowrap;color:#D2141E} .site-footer__social{display:flex;gap:1.6cqw;align-items:center} .site-footer__copyright{margin:0;font-size:.7cqw;color:#9A948C;text-align:center} .site-footer__legal-link{color:#9A948C;text-decoration:underline} /* --------------------------------------------------------------------------- Zustaende, die es erst mit echten Twitch-Daten gibt. Der Entwurf kannte nur "live". Offline, ein stiller Chat oder ein leerer Zeitplan sind aber Normalfaelle – sie bekommen hier dieselbe Formensprache in ruhigerer Farbe, damit die Karten nie leer oder kaputt wirken. ------------------------------------------------------------------------ */ .live-badge--offline{background:#6E6862} .live-dot--still{animation:none;opacity:.8} /* Vorschaubild des laufenden Streams – ersetzt den frueheren Platzhalter */ .stream-frame__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .stream-frame--offline{background:#221D19} .stream-frame__poster--placeholder{inset:auto;left:50%;top:44%;transform:translate(-50%,-50%);width:26%;height:auto;object-fit:contain;opacity:.45} .stream-frame__badge--offline{background:#6E6862} /* Hinweiszeile der Chatkarte (Verbindung, Fehler, Anmeldung) */ .chat-status{margin:0;font-size:.68cqw;line-height:1.35;color:#8A847C;text-wrap:pretty} .chat-status--error{color:#D2141E} .chat-status--ok{color:#15803D} .chat-item--empty .chat-item__text{color:#8A847C;font-style:italic} /* Solange niemand angemeldet ist, steht hier ein Knopf statt des Eingabefelds: Twitch nimmt Nachrichten nur von angemeldeten Konten an. */ .chat-login{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:.45cqw;background:#D2141E;color:#fff;text-decoration:none;font-weight:700;font-size:.72cqw;line-height:1.25;padding:.6cqw .7cqw;border-radius:.5cqw;text-align:center} .chat-login:hover{color:#fff} .chat-login__icon{width:.85cqw;height:auto;object-fit:contain;filter:brightness(0) invert(1);flex-shrink:0} .chat-logout{margin-top:.3cqw;display:flex;justify-content:flex-end} .chat-logout__button{border:none;background:none;padding:0;font:inherit;font-size:.62cqw;color:#9A948C;text-decoration:underline;cursor:pointer} .chat-logout__button:hover{color:#D2141E} /* Zeitplan ohne eingetragene Termine */ .schedule-empty{font-size:.72cqw;line-height:1.45;color:#8A847C;background:#FBFAF8;border:1px solid #F2EFEA;border-radius:.5cqw;padding:.6cqw;text-wrap:pretty} /* --------------------------------------------------------------------------- Mobil: unterhalb 640 px wird gestapelt. Hier greift eine eigene, an kleine Schirme angepasste Groessenskala – 1 cqw waere sonst zu klein. ------------------------------------------------------------------------ */ @media (max-width: 640px) { .hero{padding-bottom:3vw} .hero__visual,.hero__content{grid-area:auto} .hero__visual{width:100%;justify-self:stretch} .hero__content{max-width:none;justify-self:stretch;padding:19vw 4vw 4vw;gap:3.4vw} .hero__title{font-size:15vw} .hero__tagline{font-size:3.2vw} .hero__status{gap:2.4vw} .hero__status-label{font-size:2.6vw} .hero__status-icon{width:3.2vw} .hero__ctas{gap:2.8vw} .live-badge{font-size:2.6vw;gap:1.2vw;padding:1.4vw 3vw;border-radius:1.2vw} .live-dot--white{width:1.4vw;height:1.4vw} .live-dot--red{width:1.4vw;height:1.4vw} .cta{font-size:3.1vw;gap:1.8vw;padding:2.9vw 4.6vw;border-radius:1.6vw} .cta__icon--twitch{width:3.6vw} .cta__icon--discord{width:3.8vw} .overview{padding:0 4vw 7vw;grid-template-columns:repeat(auto-fit,minmax(42vw,1fr));gap:3vw} .card{border-radius:2.4vw;padding:3vw;gap:2vw} .card--stream{gap:2.2vw} .card__title{gap:1.5vw;font-size:3vw} .card__title-icon{width:3.2vw} .card__title svg{width:3.2vw;height:3.2vw} .stream-frame{border-radius:2vw;min-height:26vw} .stream-frame__badge{top:1.6vw;right:1.6vw;font-size:2.2vw;padding:.7vw 1.8vw;border-radius:1vw} .stream-frame__caption{padding:1.8vw 2.2vw 2vw} .stream-frame__game{font-size:2.9vw} .stream-frame__mode{font-size:2.5vw} .stream-meta{gap:1.5vw} .stream-meta__tags{gap:1.1vw} .stream-meta__viewers{gap:1.1vw;font-size:2.5vw} .stream-meta__viewers svg{width:2.6vw;height:2.6vw} .tag{font-size:2.4vw;padding:.9vw 2vw;border-radius:1vw} #chat-list{gap:1.4vw;max-height:46vw;font-size:2.6vw} .chat-item{gap:1.1vw} .chat-item__dot{width:3vw;height:3vw} #chat-form{gap:1.3vw;border-radius:1.7vw;padding:1.1vw 1.7vw 1.1vw 2.4vw} #chat-input{font-size:2.5vw;padding:1.1vw 0} .chat-send{width:5.6vw;height:5.6vw;border-radius:1.3vw} .chat-send svg{width:2.6vw;height:2.6vw} .about__bio,.about__motto{font-size:2.6vw} .about__tags{gap:4vw;padding-top:1vw} .about__tag{gap:1.1vw} .about__tag-icon{width:4.5vw} .about__tag-label{font-size:2.1vw} .schedule-list{gap:2vw} .schedule-item{gap:2.5vw;border-radius:1.7vw;padding:2vw 2.2vw} .schedule-item__day{font-size:2vw} .schedule-item__num{font-size:3.8vw} .schedule-item__month{font-size:1.85vw} .schedule-item__time{font-size:2.7vw} .schedule-item__title{font-size:2.5vw} .schedule-item__icon{width:3.2vw} .schedule-more{font-size:2.6vw;gap:1.3vw} .site-footer{padding:0 4vw 9vw;gap:4.5vw} .site-footer__banner{gap:3vw;max-width:none} .site-footer__heartbeat{height:5vw} .site-footer__slogan{font-size:5vw} .site-footer__social{gap:6vw} .icon-link--footer{padding:1.4vw} .icon-link__img--twitch-footer{width:5.6vw} .icon-link__img--discord-footer{width:5.9vw} .site-footer__copyright{font-size:2.4vw} /* Zustaende mit echten Daten – mobile Groessen */ .stream-frame__poster--placeholder{width:32%} .chat-status{font-size:2.4vw} .chat-login{font-size:2.6vw;gap:1.6vw;padding:2.2vw 2.6vw;border-radius:1.7vw} .chat-login__icon{width:3vw} .chat-logout{margin-top:1.2vw} .chat-logout__button{font-size:2.2vw} .schedule-empty{font-size:2.6vw;padding:2.6vw;border-radius:1.7vw} } /* Dunkelmodus: neutrale Flaechen, das Koeln-Rot bleibt als Akzent erhalten. */ html[data-theme="dark"]{ color-scheme:dark; --brand-tint:rgba(240,74,82,.14); --surface:#121110; --surface-2:#292623; --surface-alt:#0D0C0B; --card-bg:#1C1A18; --border-color:#393532; --border-strong:#4A443F; --text-color:#F7F4F1; --text-muted:#AAA29A; --text-soft:#D8D2CC; --shadow-sm:0 1px 3px rgba(0,0,0,.3); --shadow-md:0 .9cqw 2.4cqw -.9cqw rgba(0,0,0,.55); --shadow-lg:0 2cqw 4.6cqw -1.4cqw rgba(0,0,0,.62); } html[data-theme="dark"] .nav__link--active, html[data-theme="dark"] .nav-mobile__link--active{color:#F04A52} html[data-theme="dark"] .site-header__icons>.icon-link img, html[data-theme="dark"] .site-footer__social .icon-link img{filter:brightness(0) invert(1)} html[data-theme="dark"] .icon-link--square path{fill:#F7F4F1} html[data-theme="dark"] .theme-toggle{background:#24211F;border-color:#4B4540;color:#F7F4F1} html[data-theme="dark"] .theme-toggle:hover{background:#302C29;border-color:#766E67} html[data-theme="dark"] #nav-toggle{background:#F7F4F1} html[data-theme="dark"] .nav-toggle__bar{background:#15120F} html[data-theme="dark"] #mobile-menu{box-shadow:0 8px 24px rgba(0,0,0,.35)} html[data-theme="dark"] .nav-mobile__link{border-bottom-color:#302C29} html[data-theme="dark"] .hv--cathedral, html[data-theme="dark"] .hv--bridge, html[data-theme="dark"] .hv--skyline{filter:invert(1);opacity:.42} html[data-theme="dark"] .schedule-item, html[data-theme="dark"] .schedule-empty{background:#292623;border-color:#403B37;color:#D8D2CC} html[data-theme="dark"] .chat-item__text, html[data-theme="dark"] .about__bio{color:#D8D2CC} html[data-theme="dark"] .stream-meta__viewers svg *{fill:#A9A19A} html[data-theme="dark"] #chat-form{background:#24211F;border-color:#49433E} html[data-theme="dark"] #chat-input::placeholder{color:#918A83} html[data-theme="dark"] .schedule-item__title, html[data-theme="dark"] .chat-status, html[data-theme="dark"] .chat-item--empty .chat-item__text{color:#AAA29A} html[data-theme="dark"] .site-footer__copyright, html[data-theme="dark"] .site-footer__legal-link, html[data-theme="dark"] .chat-logout__button{color:#AAA29A} @media (prefers-reduced-motion:reduce){ .theme-toggle{transition:none} }