/* ============================================================ Clash Royale Stats – Clean & Modern (Light) Design System ============================================================ */ @font-face { font-family: "Clash Display"; src: url("assets/merge-tactics/Clash_Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; } :root { /* Upgrade-Leiste unter der Karte im Kartendetail. Die Werte sind aus Eliass' Spiel-Screenshots ausgemessen (IMG_9933 blau, IMG_9934 gruen), nicht geschaetzt. Jede Leiste ist zweigeteilt: obere Haelfte hell, ab ~52 % dunkler. */ /* Rahmen und Schriftkontur sind beide echtes Schwarz, wie im Spiel. */ --cr-bar-border: #000000; --cr-bar-track-top: #202649; --cr-bar-track-bottom: #191e44; --cr-bar-blue-top: #69dcf7; --cr-bar-blue-bottom: #52b2e4; --cr-bar-green-top: #78f968; --cr-bar-green-bottom: #61d05a; /* Legacy-Aliase aus dem alten hellen Design. Zeigen bewusst auf das dunkle Panel-Schema, damit nichts mehr versehentlich weiss wird. Neuer Code nutzt direkt die --panel-* Tokens. */ --bg: #0f1420; --surface: #151a24; --surface-2: rgba(9, 12, 20, 0.6); --border: var(--panel-border); /* Alle Flaechen der Seite sind dunkel (siehe --panel-*), darum ist die Standard-Schriftfarbe hell. --text-invert nur auf hellen Buttons nutzen. */ --text: #f3f6ff; --text-invert: #16203a; --muted: #737b8c; --primary: #3b6ef5; --primary-d: #274bd4; --gold: #f5b93b; --win: #1aa251; --loss: #e0413a; --radius: 14px; --radius-sm: 9px; /* Merge-Tactics-Arena (Board im Best-Builds-Tab). Die Felder werden NICHT eingefaerbt - sichtbar bleibt das Arena-Bild. Diese Tokens gelten nur fuer Zustaende (Hover, belegt) und die Flaeche hinter dem Bild. */ --mt-arena-floor: #64822f; --mt-arena-hex-hover: rgba(255, 255, 255, 0.24); --mt-arena-hex-line: rgba(255, 255, 255, 0.9); --mt-arena-hex-taken: rgba(59, 110, 245, 0.3); --mt-arena-ruler-hover: rgba(245, 185, 59, 0.3); --mt-modifier-card-top: #281378; --mt-modifier-card-mid: #5527b8; --mt-modifier-card-bottom: #4820a8; --mt-modifier-card-bg: linear-gradient(180deg, var(--mt-modifier-card-top) 0%, var(--mt-modifier-card-mid) 47%, var(--mt-modifier-card-bottom) 100%); --mt-modifier-card-shadow: #171025; --shadow-sm: 0 1px 2px rgba(20, 30, 60, 0.06); --shadow: 0 2px 8px rgba(20, 30, 60, 0.06), 0 8px 24px rgba(20, 30, 60, 0.05); /* ---- Panel-Design = STANDARD der Seite ---------------------------------- Vorbild ist die Deckbox aus Geier (`.geier-deck-tile` / `.player-deck-box`): blau-lila Verlauf, blauer Rand, Glow-Linie oben, helle Schrift. Jede neue Flaeche nutzt diese Tokens bzw. die Klasse `.panel` – KEINE eigenen Hexwerte und keine hellen `--surface`-Flaechen mehr. */ --panel-bg: linear-gradient(145deg, rgba(31, 48, 91, 0.94), rgba(18, 21, 31, 0.97) 52%, rgba(39, 22, 48, 0.94)); --panel-border: rgba(99, 125, 215, 0.42); --panel-shadow: 0 8px 24px rgba(3, 6, 14, 0.24), inset 0 0 22px rgba(83, 110, 215, 0.06); --panel-radius: 8px; --panel-text: #f3f6ff; --panel-muted: rgba(226, 233, 248, 0.66); --panel-dim: rgba(226, 233, 248, 0.45); /* ---- Clash-Royale-Rautenmuster ---------------------------------------- Nachbau des Spiel-Hintergrunds, am Screenshot von Eliass ausgemessen (siehe public/preview/pattern/index.html, dort steht die vollstaendige Messung). Zwei Grundtoene im Schachbrett plus eine sehr milde Schattierung je Raute (+/- 2 %, oben heller). Als Inline-SVG statt als Bild: keine zusaetzliche Anfrage, Vektor, und die Kachel wird einmal gerastert und danach nur noch als fertige Textur wiederholt. NICHT mit `background-attachment: fixed`, Animationen oder `backdrop-filter` kombinieren - das sind die drei Dinge, die daraus eine Dauerlast beim Scrollen machen wuerden. */ --karo-fuge: #062764; --karo-groesse: 72px; --karo-kachel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='100' height='100'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1' gradientTransform='rotate(-45 .5 .5)'%3E%3Cstop offset='0' stop-color='%231b64b7'/%3E%3Cstop offset='1' stop-color='%231960af'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1' gradientTransform='rotate(-45 .5 .5)'%3E%3Cstop offset='0' stop-color='%231752a5'/%3E%3Cstop offset='1' stop-color='%23174e9f'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='100' height='100' fill='%23062764'/%3E%3Crect x='15.45' y='15.45' width='69.11' height='69.11' rx='9' transform='rotate(45 50 50)' fill='url(%23a)'/%3E%3Crect x='-34.55' y='-34.55' width='69.11' height='69.11' rx='9' transform='rotate(45 0 0)' fill='url(%23b)'/%3E%3Crect x='65.44' y='-34.55' width='69.11' height='69.11' rx='9' transform='rotate(45 100 0)' fill='url(%23b)'/%3E%3Crect x='-34.55' y='65.44' width='69.11' height='69.11' rx='9' transform='rotate(45 0 100)' fill='url(%23b)'/%3E%3Crect x='65.44' y='65.44' width='69.11' height='69.11' rx='9' transform='rotate(45 100 100)' fill='url(%23b)'/%3E%3C/svg%3E"); /* Grossflaechiges Licht wie im Spiel - liegt UEBER der Kachel, nicht in ihr, sonst wiederholte es sich in jeder Kachel und das Raster wuerde streifen. */ --karo-licht: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0) 26%, rgba(0,0,0,0.12) 74%, rgba(0,0,0,0.24)); /* Serienfarben des Season-End-Diagramms. Jeder Spieler hat eine eigene Farbe (Eliass 07.09.2026). Zehn kategoriale Toene sind grenzwertig, deshalb ist die Palette mit dem Validator geprueft und besteht gegen den dunklen Untergrund alle fuenf Tests: Helligkeitsband 0,48-0,67, Buntheit ueber dem Boden, Unterscheidbarkeit bei Farbfehlsichtigkeit, Normalsicht (schlechtestes Paar Delta-E 15,9) und Kontrast >= 3:1. Ausserdem traegt jede Linie ihren Namen am rechten Ende - die Identitaet haengt nie allein an der Farbe. Wer hier etwas aendert, prueft es erneut. */ --series-1: #4a86e8; --series-2: #d9603a; --series-3: #1fa39a; --series-4: #b95bd0; --series-5: #b08a1a; --series-6: #e05a86; --series-7: #6f7ae0; --series-8: #3d9450; --series-9: #2b8fb8; --series-10: #a9701f; /* Glow-Linie an der Oberkante (siehe `.panel::before`). */ --panel-line: linear-gradient(90deg, transparent, #587cff, #bd71f0, transparent); --panel-line-glow: 0 0 8px rgba(89, 122, 255, 0.5); /* Feedback bleibt absichtlich undurchsichtig. Hinter einem langen Formular darf die Seite weder durchscheinen noch mit dem Inhalt konkurrieren. */ --feedback-bg: #0b0b0d; --feedback-backdrop: rgba(0, 0, 0, 0.88); --support-bg: color-mix(in srgb, var(--feedback-bg) 52%, transparent); --header-menu-bg: #101116; --header-menu-hover: #181b24; /* Abgesetzte Innenflaeche innerhalb eines Panels (Stat-Kacheln, Zeilen). */ --panel-inset: linear-gradient(135deg, rgba(9, 12, 20, 0.78), rgba(20, 24, 35, 0.72)); --panel-inset-border: rgba(123, 145, 216, 0.2); /* ---- Deck-Buttons (Bookmark / QR) = STANDARD ---------------------------- */ --deck-btn-bg: #172131; --deck-btn-border: #344156; --deck-btn-fg: #a9bded; --deck-btn-hover-border: #5b8cff; --deck-btn-hover-fg: #cbd9ff; --deck-btn-on: #315fce; } @property --profile-gold-angle { syntax: ""; inherits: false; initial-value: 0deg; } @property --geier-ready-angle { syntax: ""; inherits: false; initial-value: 0deg; } * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; /* Spalte + `main { flex: 1 }`: bei kurzen Tabs (z. B. Clan ohne Suchtreffer) wird der Inhalt gestreckt, damit Ad-Banner und Rechtsleiste unten am Fensterrand stehen statt mitten auf der Seite zu haengen. */ display: flex; flex-direction: column; /* Positionierter Vorfahre fuer #home-bg-fx (inset:0 muss sich auf die volle Body-Hoehe beziehen, nicht auf den Viewport - sonst reicht das Sternenfeld nicht bis zur Footer-/Rechtliches-Leiste runter). */ position: relative; isolation: isolate; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--text); background: #0f1420; line-height: 1.55; } /* Arabischer Text laeuft RTL, die etablierte Seitengeometrie bleibt jedoch LTR. Interaktive Shells enthalten viele feste Karten-/Deckreihenfolgen, die nicht semantisch gespiegelt werden duerfen. Formfelder und Fliesstext erben weiterhin RTL. */ body[data-content-direction="rtl"] :is(p, h1, h2, h3, h4, h5, label, input, textarea, select, .page-intro, .header-language-option span) { direction: rtl; text-align: right; } /* Home ist bewusst reines Ambiente-Dunkel (siehe #view-home unten), kein Foto-Hintergrund. #view-home deckt aber nur die Haupt-Flaeche ab - Bereiche ausserhalb davon links/rechts sind selbst transparent und liessen darunter das helle body::before-Foto durchscheinen (sichtbarer "offener" heller Fleck unter dem dunklen Bereich). Body-Klasse wird von showHome()/switchTab() in app.js gesetzt. */ body.home-active { background: #0c0d12; } /* Frueher display:none - das laesst sich nicht ueberblenden und der Wechsel Startseite <-> Werkzeug war ein harter Farbsprung. Jetzt bleiben BEIDE Ebenen immer im Baum und nur ihre Deckkraft wird gekreuzt: das Foto (body::before, z-index 0) liegt ueber dem Sternenfeld (#home-bg-fx, z-index -1), es blendet also uebereinander statt zu springen. */ body.home-active::before { opacity: 0; } /* Die Ueberblendung ist absichtlich NICHT von Anfang an scharf: beim Direktaufruf einer Unterseite oder der Startseite wuerde man sonst beim ersten Bild den jeweils anderen Hintergrund wegblenden sehen. app.js setzt .bg-fade-ready erst zwei Frames nach dem ersten applyRoute() - ab da ist jeder Wechsel ein Uebergang, der Seitenaufbau selbst bleibt hart und damit unauffaellig. Die 550ms stehen als BG_FADE_MS auch in app.js (der Sternenfeld-Loop darf erst danach anhalten) - wer hier dreht, muss dort mitziehen. */ body.bg-fade-ready, body.bg-fade-ready::before { transition: opacity .55s ease, background-color .55s ease; } /* visibility mit Verzoegerung: erst NACH dem Ausblenden auf hidden, damit der Browser die geblurrten Galaxien im Ruhezustand ganz ueberspringen kann; beim Einblenden sofort sichtbar, sonst faengt die Blende im Nichts an. */ body.bg-fade-ready #home-bg-fx { transition: opacity .55s ease, visibility 0s linear .55s; } body.bg-fade-ready.home-active #home-bg-fx { transition: opacity .55s ease, visibility 0s; } /* Die Spiralen drehen sich 110s bzw. 150s pro Umdrehung - ausserhalb der Startseite waere das reine Rechenlast fuer ein unsichtbares Bild. */ body:not(.home-active) .home-galaxy { animation-play-state: paused; } /* Historische Darstellung: exakt 7px Blur, 50% Helligkeit und 8% Ueberstand. Der Layer liegt jetzt auf Ebene 0 statt negativ hinter der Body-Farbe. */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; /* Season-Artwork. Wird ohnehin geblurrt, deshalb reicht 1920 px Breite und JPEG q74. Neue Season = neues komprimiertes Bild + Pfad hier. Vorhanden: bg-viking-journey-blurred.jpg (hell, 102 KB) - aktuell aktiv, bg-shocktober.jpg (dunkel/blau, 320 KB), bg-theme.jpg (alt, unbenutzt); die alte bg.png liegt nur noch unter assets/raw/. Erste Ebene ist ein Verlauf von der Navbar-Farbe (#0b0b0d) zu transparent, damit der Sprung Navbar -> Hintergrundbild nicht so hart wirkt. Er haengt am Hintergrundbild selbst (gleiches Element), nicht an der Navbar - wandert also mit dem Parallax-Shift unten mit statt starr an der Kopfleiste zu kleben. */ background-image: /* Startfarbe ist der bereits abgedunkelte Wert (#0b0b0d mal 0.5), weil der frueher hier stehende brightness()-Filter auch diesen Verlauf mitgedunkelt hat. Ohne die Anpassung waere der Uebergang ploetzlich heller. */ linear-gradient(to bottom, #060607, rgba(6, 6, 7, 0)), url("assets/bg-viking-journey-blurred.jpg"); background-position: top, center top; background-size: 100% 220px, cover; background-repeat: no-repeat, no-repeat; /* KEIN filter: blur()/brightness() mehr - beides ist fest ins Bild eingebacken (bg-viking-journey-blurred.jpg, erzeugt aus dem Original mit Sigma 7 und linear(0.5, 0), also exakt den frueheren CSS-Werten). GRUND (Eliass, 22.08.2026, iPhone-Nutzer mit Videobeleg): Dieses Element ist `position: fixed`, bildschirmfuellend, und app.js verschiebt es bei JEDEM Scroll-Frame ueber --bg-shift. Ein bildschirmgrosser Weichzeichner, der dabei laufend neu berechnet wird, ist auf iOS Safari die teuerste denkbare Ebene: Wird der Grafikspeicher knapp, verwirft iOS genau sie - und es bleibt eine graue/schwarze Flaeche. Aufgetreten auf /decks/meta, der Seite mit den meisten Bildern (100 Decks a 8 Karten). Dieselbe Ursache steckte hinter der aelteren Meldung "Hintergrund folgt dem Finger nicht, springt beim Loslassen". Eingebacken kostet das Bild pro Frame nichts mehr - und ist als Datei zugleich kleiner (331 -> 102 KB), weil weichgezeichnete Flaechen sich besser packen. Bei einem Season-Wechsel: neues Bild MIT eingebackenem Effekt erzeugen, nicht den Filter wieder einbauen. */ /* translateY kommt von app.js (Scroll-Parallax, Fortschritt ueber die ganze Seite). Die scale(1.2) ist der Ueberstand-Puffer dafuer - Aenderung hier IMMER mit dem BG_SCALE-Wert in app.js synchron halten, sonst reisst der Shift den Bildrand sichtbar ins Bild. */ transform: translateY(var(--bg-shift, 0px)) scale(1.2); } /* `main` muss ueber dem Footer liegen: beide bilden einen eigenen Stacking-Context, und bei gleichem z-index gewinnt der spaetere im DOM. Sonst legt sich der Ad-Platzhalter im Footer ueber die Suchvorschlaege (Spieler/Clan) und schluckt deren Klicks – das `z-index: 30` der `.search-dropdown` wirkt nur innerhalb `main`. */ main { position: relative; z-index: 2; } .site-footer { position: relative; z-index: 1; } h1, h2, h3 { line-height: 1.2; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } small { color: var(--muted); font-weight: normal; } /* ---------- Header + Tabs ---------- */ /* Nur der Seitenkopf – nicht jedes
im Inhalt (Builder-Ergebnisse!). */ body > header { position: sticky; top: 0; z-index: 10; background: #0b0b0d; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } /* Nur solange der lange Sprachkatalog offen ist, liegt die Kopfzeile ueber der Cookie-Karte. Sonst koennte diese auf dem ersten Besuch die unteren Sprachen und den Uebersetzungs-Feedbacklink abfangen. Geschlossen bleibt der alte z-index. */ body > header:has(.header-language[open]) { z-index: 70; } /* ?embed=1: Seite lebt als reiner Inhalt in einer fremden Huelle - eigene Kopf-Nav weg. */ body.embed-mode > header { display: none; } /* Drei Spalten statt einer Flex-Reihe: links die Marke, mittig die Reiter, rechts eine LEERE Spur. Die dritte Spur braucht kein eigenes Element - `1fr auto 1fr` macht die beiden Randspuren gleich breit, und genau dadurch sitzt die Reiterreihe exakt in der Fenstermitte statt nur rechts neben dem Logo. BEWUSST OHNE max-width, anders als main/.site-footer/.site-legal-inner: mit den fruehreren 1000px + margin:0 auto sass die Marke zwar links IHRER Spalte, aber die Spalte schwamm bei breiten Fenstern selbst in der Mitte - vom Fensterrand war das Logo dann weit weg. Der Kopfbalken geht ohnehin ueber die volle Breite (Hintergrund und Trennlinie in body > header), also darf sein Inhalt das auch. Nebeneffekt, der hier den Ausschlag gab: ueber die volle Fensterbreite ist genug Platz, dass die Reiterreihe WIRKLICH mittig steht - im 1000px-Raster reichte es dafuer nicht, weil Marke links und leere Spur rechts zusammen mehr gebraucht haetten als uebrig war. Die Fenstermitte ist zugleich die Mitte der 1000px-Inhaltsspalte darunter, die Reiter fluchten also weiterhin mit dem Inhalt. */ .nav-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: 100%; padding: 0 1.25rem; height: 58px; } #tabs { justify-self: center; } /* Logo UND Name sind zusammen EIN Button (= Startseite). Zusaetzlich gibt es seit 11.08.2026 das Haus-Icon als vollwertigen Reiter (siehe .nav-home) - nicht als zweiter Weg nach Hause gedacht, sondern damit die Startseite ueberhaupt einen Aktiv-Zustand in der Navigation bekommt; vorher war dort schlicht nichts markiert. justify-self MUSS hier drinstehen und nicht in einer eigenen Regel davor: `all: unset` setzt jede Eigenschaft zurueck, auch die Ausrichtung im Raster. */ .brand { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; justify-self: start; -webkit-user-drag: none; user-select: none; } .brand img { -webkit-user-drag: none; } .brand .logo { width: 28px; height: 28px; border-radius: 7px; object-fit: cover; transition: box-shadow .18s ease, transform .18s ease; } /* line-height: 0.9 wegen des Zeilenumbruchs. Zwischen rund 1160 und 1250px reicht die linke Rasterspalte nicht mehr fuer "Tryaz Gaming" in einer Zeile, der Schriftzug bricht dort um. Mit der vom Body geerbten Zeilenhoehe (1,55) standen die beiden Zeilen 26px auseinander und lasen sich wie zwei Woerter statt wie ein Name (Eliass 03.09.2026). Einzeilig aendert der Wert nichts Sichtbares: die Zeile steht in der Leiste ohnehin senkrecht zentriert, die Zeilenhoehe bestimmt nur die Kastenhoehe. Unterlängen bleiben heil, hier wird nirgends geclippt. */ .brand span { margin-left: 0.55rem; color: #fff; font-family: "Inter", sans-serif; font-weight: 800; font-size: 1.05rem; line-height: 0.9; letter-spacing: -0.01em; transition: text-shadow .18s ease; } /* Das globale button:hover{background:var(--primary-d)} (0,1,1) schlaegt das all:unset der Grundregel (0,1,0) - ohne diese Zeile liegt ein blauer Kasten hinter Logo UND Schriftzug. Statt Flaeche jetzt Licht: dasselbe kuehle Blau-Tuerkis wie bei den Karussell-Pfeilen (.car-arrow), das Logo bekommt einen Leuchtring und hebt sich einen Pixel, der Schriftzug einen weichen Schein. Kein Kasten, keine Verschiebung der Nachbarn. */ .brand:hover { background: none; } .brand:hover .logo { transform: translateY(-1px) scale(1.05); box-shadow: 0 0 0 1px rgba(140, 235, 255, .55), 0 0 12px rgba(88, 180, 255, .6), 0 0 24px rgba(88, 180, 255, .28); } .brand:hover span { text-shadow: 0 0 14px rgba(122, 190, 255, .6); } .brand:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 10px; } @media (prefers-reduced-motion: reduce) { .brand:hover .logo { transform: none; } } /* Rechter Gegenpol zur Marke. Ein gemeinsamer Einstieg statt zweier Header-Knoepfe; Feedback und Bug Report werden erst im Fenster getrennt. Eigener Hover ist Pflicht, damit die globale blaue button:hover-Flaeche nicht in die schwarze Navbar greift. */ .header-feedback { all: unset; box-sizing: border-box; justify-self: end; cursor: pointer; display: inline-flex; align-items: center; gap: 0.48rem; min-height: 32px; padding: 0.25rem 0.7rem; border: 2px solid var(--panel-inset-border); border-radius: 7px; color: var(--panel-muted); font-size: 0.82rem; font-weight: 750; transition: color .15s ease, border-color .15s ease; } .header-feedback img { width: 22px; height: 22px; object-fit: contain; opacity: .82; } .header-feedback:hover { background: none; color: var(--panel-text); border-color: var(--panel-border); } .header-feedback:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; } /* Sprache und Feedback bilden gemeinsam den rechten Gegenpol zur Marke. Der Sprachschalter bleibt bewusst kompakt, damit die mittige Hauptnavigation ihre Position nicht verliert. Die noch nicht fertigen Kataloge sind bereits sichtbar, aber nicht anklickbar: eine englische Seite darf keine andere Sprache vortaeuschen. */ .header-actions { justify-self: end; display: inline-flex; align-items: center; gap: 0.5rem; } .header-language { position: relative; flex: none; } .header-language > summary { display: inline-flex; align-items: center; justify-content: center; gap: 0.38rem; min-width: 58px; min-height: 32px; padding: 0.25rem 0.55rem; border: 2px solid var(--panel-inset-border); border-radius: 4px; color: var(--panel-muted); background: transparent; cursor: pointer; font-size: 0.78rem; font-weight: 800; list-style: none; transition: color .15s ease, border-color .15s ease; } .header-language > summary::-webkit-details-marker { display: none; } .header-language > summary:hover, .header-language[open] > summary { color: var(--panel-text); border-color: var(--panel-border); } .header-language > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; } .header-language-menu { position: absolute; z-index: 30; top: calc(100% + 8px); right: 0; width: min(310px, calc(100vw - 24px)); max-height: min(620px, calc(100vh - 78px)); overflow-y: auto; padding: 0.45rem; border: 2px solid var(--panel-border); border-radius: var(--panel-radius); background: var(--header-menu-bg); box-shadow: var(--panel-shadow); scrollbar-width: thin; transform-origin: top right; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-7px) scaleY(0.96); transition: opacity .16s ease, transform .18s ease, visibility 0s linear .18s; } @media (max-width: 680px) { /* Der eigentliche Mobile-Shell folgt spaeter. Bis dahin muss der Sprachkatalog trotzdem aus jeder sichtbaren Headerposition im Viewport bleiben. */ .header-language-menu { position: fixed; top: 66px; right: 12px; max-height: calc(100dvh - 78px); } } /* Browser verstecken den Inhalt eines geschlossenen
normalerweise sofort per display:none. Das ueberschreiben wir nur fuer dieses absolut positionierte Panel, damit auch die Rueckwaertsanimation sichtbar zu Ende laufen kann. */ .header-language:not([open]) > .header-language-menu { display: block; } .header-language[open] > .header-language-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scaleY(1); transition-delay: 0s; } .header-language.js-animated > .header-language-menu { transition: none; } .header-language-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.5rem 0.6rem 0.6rem; border-bottom: 1px solid var(--panel-inset-border); } .header-language-head b { color: var(--panel-text); font-size: 0.82rem; } .header-language-head small { color: var(--panel-dim); font-size: 0.64rem; } .header-language-option { all: unset; box-sizing: border-box; width: 100%; min-height: 33px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.35rem 0.6rem; border-bottom: 1px solid var(--panel-inset-border); color: var(--panel-muted); text-decoration: none; font-size: 0.78rem; } .header-language-option span { color: var(--panel-text); font-weight: 700; } .header-language-option small { color: var(--panel-dim); font-size: 0.61rem; white-space: nowrap; } .header-language-option.active { cursor: default; } .header-language-option.active:disabled { opacity: 1; } .header-language-option.active small { color: var(--gold); } .header-language-option:disabled { cursor: not-allowed; opacity: 0.62; } .header-language-option:not(:disabled):hover { background: var(--header-menu-hover); text-decoration: none; } .header-language-option:disabled:hover { background: transparent; } .header-language-note { margin: 0.5rem 0 0; padding: 0.55rem 0.6rem 0.35rem; color: var(--panel-dim); font-size: 0.66rem; line-height: 1.45; } .header-language-note button { all: unset; cursor: pointer; color: var(--gold); font-weight: 750; } .header-language-note button:hover { background: none; color: var(--panel-text); text-decoration: underline; } .header-language-note button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } @media (max-width: 680px) { .header-feedback span { display: none; } .header-feedback { padding-inline: 0.42rem; } .header-language > summary { min-width: 52px; padding-inline: 0.42rem; } } @media (prefers-reduced-motion: reduce) { .header-language-menu { transition: none; transform: none; } } /* overflow-x hier NICHT wieder aktivieren: eine Achse ungleich "visible" laesst den Browser auch die andere Achse auf "auto" berechnen - das schneidet die absolut positionierten .dropdown-Panels unterhalb der Tabs ab (Pfeil dreht sich noch, Panel bleibt unsichtbar). Falls Tabs auf schmalen Fenstern mal nicht mehr passen, braucht das eine eigene Loesung (z. B. Dropdown per JS aus #tabs herausrendern). */ #tabs { position: relative; display: flex; align-items: stretch; height: 100%; } .nav-item { position: relative; display: flex; align-items: stretch; } .nav-item .nav-link { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 0.3rem; height: 100%; padding: 0 0.85rem; color: rgba(255, 255, 255, 0.6); font-size: 0.9rem; font-weight: 600; font-family: inherit; white-space: nowrap; border-bottom: 2px solid transparent; transition: color 0.15s; text-decoration: none; } .nav-item .nav-link:hover { color: #fff; } .nav-item .nav-link.active { color: #fff; border-bottom-color: var(--primary); } /* Reines Icon statt Text: etwas schmaler, damit es neben "Player" nicht wie eine Luecke wirkt. Aktiv-Zustand und Unterstrich kommen aus den Regeln darueber, das Haus verhaelt sich also genau wie jeder andere Reiter. Das Icon ist gefuellt statt umrissen und mit 20px etwas groesser als die Schrift daneben - eine 2px-Kontur waere neben Text derselben Hoehe deutlich zierlicher erschienen als die Beschriftungen. Die Tuer ist ein Loch (fill-rule: evenodd), sie nimmt also die Farbe der Leiste an und faellt beim Aktiv-Zustand mit um. */ .nav-item .nav-link.nav-home { padding-inline: 0.7rem; } .nav-item .nav-link.nav-home svg { display: block; } .nav-caret { opacity: 0.55; transition: transform .16s ease; } /* Der Pfeil ist ein eigenes Ziel: Name antippen oeffnet den Reiter, Pfeil antippen das Menue (Eliass 03.09.2026). Die Huelle ist ein und bleibt damit nicht-interaktiv - ein