/* gp-finish.css — GulfPitch Feinschliff (26.10.2026). Quelle: Verify/finish.css, eingesetzt von Verify/finish.py als letztes Stylesheet jeder Seite. Die verbindlichen Gestaltungsregeln in einer Datei. Nicht am Deploy-Ordner aendern, sondern hier. 0 Tokens Farben, Flaechen, Linien, Schrift, Abstandsraster 4/8/12/16/24/32/48/64/96, Rand --g 1 Kopfzeile ein System fuer alle sieben Kopf-Varianten (Startseite, Textseiten, Programme, Apply, Match, Karte, AR) 2 Aktionen Haupt / Neben / Textlink / Filter / Auswahl / Symbole 3 Typografie Rollen: Display (Archivo), Text (Schibsted), Label (Plex Mono, nur kurz), Zahlen tabellarisch, Arabisch (Readex) 4 Startseite Hero als Bildkomposition, Textzone, Belegzeile, Closing soon, Fuss, Show-Formular 5 Open calls Verzeichnis-Satz 6 Match 7 Karte Kopf, Spalte, Panel (Ticket / Cost / Who), Liste, Staedteleiste 8 Programme, Hubs, Statistik 9 Connect 10 Redaktion Learn, Verification, Support, Terms, Privacy, Accessibility, 404 11 Fuss + Formulare alle Seiten 12 Zustaende Hover, Fokus, Auswahl, Laden, Leer, Fehler, Bewegung 13 Hell dieselbe Sorgfalt bei Tag */ /* ── 0 TOKENS ─────────────────────────────────────────────────────────────────────────────────────────────── */ :root{ /* Flaechen bei Nacht: ein Grund, zwei Ebenen darueber - nichts Violettes, nichts Braunes */ --f-bg:#0B0E18; --f-p1:#10141F; --f-p2:#161B29; --f-p3:#1C2232; --f-line:rgba(243,241,234,.11); --f-line2:rgba(243,241,234,.20); --f-line3:rgba(243,241,234,.34); --f-tx:#F3F1EA; --f-tx2:rgba(243,241,234,.76); --f-tx3:rgba(243,241,234,.60); /* Rollen: Creme = Hauptaktion, Mint = aktiv/ausgewaehlt, Gold = ausgewaehlte Datenakzente, Koralle = Frist/Status */ --f-act:#F3F1EA; --f-act-h:#FFFFFF; --f-act-fg:#0B0E18; --f-mint:#43EFCC; --f-mint-tx:#43EFCC; --f-mint-bg:rgba(67,239,204,.09); --f-gold:#E8C97E; --f-coral:#FF7A5C; --f-closed:#9AA3B2; /* Schrift */ --f-sans:'Schibsted Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif; --f-disp:'Archivo','Schibsted Grotesk',system-ui,sans-serif; --f-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace; --f-ar:'Readex Pro','Schibsted Grotesk',system-ui,sans-serif; /* Raster */ --f-1:4px; --f-2:8px; --f-3:12px; --f-4:16px; --f-5:24px; --f-6:32px; --f-7:48px; --f-8:64px; --f-9:96px; --g:clamp(20px,3.6vw,52px); /* Seitenrand: 20 (Handy) ... 52 (ab 1440) - Kopf, Fuss, Startseite, Karte */ --f-read:680px; /* Lesespalte (~70 Zeichen bei 17 px) */ --f-wide:1180px; /* Daten- und Listenseiten */ --f-head:72px; /* Kopfzeile Desktop; Handy 60 */ --f-ease:cubic-bezier(.2,.7,.2,1); } :root[data-theme="light"],body.light,#gp-page.light{ --f-bg:#F8F6F1; --f-p1:#FFFFFF; --f-p2:#F1EEE6; --f-p3:#E9E5DB; --f-line:rgba(16,18,22,.11); --f-line2:rgba(16,18,22,.20); --f-line3:rgba(16,18,22,.34); --f-tx:#101216; --f-tx2:rgba(16,18,22,.76); --f-tx3:rgba(16,18,22,.62); --f-act:#101216; --f-act-h:#000000; --f-act-fg:#F8F6F1; --f-mint:#0A7C68; --f-mint-tx:#0A7C68; --f-mint-bg:rgba(10,124,104,.08); --f-gold:#7A5B12; --f-coral:#B23F28; --f-closed:#6A7180; } @media (max-width:760px){:root{--f-head:60px}} @media (max-width:380px){:root{--g:16px}} /* ── 1 KOPFZEILE ────────────────────────────────────────────────────────────────────────────────────────────── Ein System: Hoehe 72 (Handy 60), Rand --g, Ring 36 x 18 (Handy 30 x 15), Wortmarke 17/600 (Handy 16), Navigation als Text 14/500 mit 28 px Abstand, aktive Seite = Papier + 2 px Mint-Linie, danach Haarlinie, Sprache, Thema (36 px, Symbol 16 px, Strich 1.6). Keine Kaesten um die Navigation; die 44-px-Trefferflaeche bleibt (gp.css HIT_DESK / HIT). Das Orbit-Zeichen ist ueberall dasselbe (zwei Ringe wie das Lockup in /brand/, kein Punkt). */ /* gemeinsame Teile */ :root .gp-nav{gap:28px!important;align-items:center} :root .gp-nav a{height:auto!important;min-height:0;padding:6px 0!important;border:0!important;background:none!important;box-shadow:none!important; font:500 14px/1.2 var(--f-sans)!important;letter-spacing:0!important;color:var(--f-tx2)!important;position:relative;transition:color .18s ease} :root .gp-nav a:hover{color:var(--f-tx)!important} :root .gp-nav a[aria-current="page"]{color:var(--f-tx)!important} :root .gp-nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--f-mint)} :root[dir="rtl"] .gp-nav a,:root .gp-nav a:lang(ar){font-family:var(--f-ar)!important;font-size:15px!important;font-weight:500!important} /* die Orbit-Marke */ :root :is(#gp-nav .gp-logo,nav.top .brand,body>header .brand,header.bar a.l,#brand){display:inline-flex!important;align-items:center;gap:10px!important; font:600 17px/1 var(--f-sans)!important;letter-spacing:-.01em!important;color:var(--f-tx)!important;text-decoration:none!important;text-transform:none!important} :root :is(#gp-nav .gp-logo,nav.top .brand,body>header .brand,header.bar a.l)>svg{width:36px!important;height:18px!important;flex:none;overflow:visible;color:var(--f-tx)} :root :is(nav.top .brand,body>header .brand,header.bar a.l)>svg circle{display:none} :root :is(nav.top .brand,body>header .brand,header.bar a.l)>svg ellipse+ellipse{opacity:1} :root #gp-nav .gp-logo svg ellipse{stroke:currentColor} :root #gp-nav .wordmark,:root nav.top .brand-w,:root body>header .brand>span{font:600 17px/1 var(--f-sans)!important;letter-spacing:-.01em!important;color:inherit!important} /* Karte: das Zeichen war ein CSS-Oval mit 2-px-Rand - jetzt dieselbe Zeichnung als Maske in der Textfarbe */ :root #brand{min-height:44px!important;padding:0!important;background:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important} :root #brand i{width:36px!important;height:18px!important;border:0!important;border-radius:0!important;background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 42 22'%3E%3Cellipse cx='20' cy='10' rx='19' ry='6' fill='none' stroke='black' stroke-width='2.5'/%3E%3Cellipse cx='20' cy='10' rx='13.5' ry='4.2' fill='none' stroke='black' stroke-width='.9'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 42 22'%3E%3Cellipse cx='20' cy='10' rx='19' ry='6' fill='none' stroke='black' stroke-width='2.5'/%3E%3Cellipse cx='20' cy='10' rx='13.5' ry='4.2' fill='none' stroke='black' stroke-width='.9'/%3E%3C/svg%3E") center/contain no-repeat} /* Thema-Schalter: ein Knopf, ein Symbol */ :root :is(#gp-theme-btn,#themebtn,#gp-thb,#tg,#thb){width:36px!important;height:36px!important;min-width:36px;min-height:36px;padding:0!important;display:inline-grid!important;place-items:center; border:1px solid var(--f-line2)!important;border-radius:0!important;background:transparent!important;color:var(--f-tx)!important;cursor:pointer;flex:none;transition:border-color .18s ease,background-color .18s ease;backdrop-filter:none!important} :root :is(#gp-theme-btn,#themebtn,#gp-thb,#tg,#thb):hover{border-color:var(--f-line3)!important;background:rgba(127,127,127,.08)!important} :root :is(#gp-theme-btn,#themebtn,#gp-thb,#tg) svg{width:16px!important;height:16px!important;stroke-width:1.6;grid-area:1/1} :root #thb span{font-size:0!important;width:16px;height:16px;display:block;background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M12 2.5v2.2M12 19.3v2.2M2.5 12h2.2M19.3 12h2.2M5.2 5.2l1.6 1.6M17.2 17.2l1.6 1.6M18.8 5.2l-1.6 1.6M6.8 17.2l-1.6 1.6'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M12 2.5v2.2M12 19.3v2.2M2.5 12h2.2M19.3 12h2.2M5.2 5.2l1.6 1.6M17.2 17.2l1.6 1.6M18.8 5.2l-1.6 1.6M6.8 17.2l-1.6 1.6'/%3E%3C/svg%3E") center/contain no-repeat} :root[data-theme="light"] #thb span{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.8A8.6 8.6 0 1 1 11.2 3a6.8 6.8 0 0 0 9.8 9.8z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.8A8.6 8.6 0 1 1 11.2 3a6.8 6.8 0 0 0 9.8 9.8z'/%3E%3C/svg%3E")} /* Sprachwechsel: Text mit leiser Beta-Marke, durch eine Haarlinie von der Navigation getrennt */ :root :is(#gp-nav-ar,.gp-langsw-ap,.gp-langsw-ma,#arBtn,#gp-nav-en,a.gp-langsw,.gp-langbox>a){align-items:center;gap:7px!important;min-height:36px!important;height:auto!important; padding:0 0 0 20px!important;margin:0!important;border:0!important;border-left:1px solid var(--f-line2)!important;background:none!important;box-shadow:none!important; font:500 15px/1.2 var(--f-ar)!important;letter-spacing:0!important;text-transform:none!important;color:var(--f-tx2)!important;border-radius:0!important;backdrop-filter:none!important;position:relative} :root :is(#gp-nav-ar,.gp-langsw-ap,.gp-langsw-ma,#arBtn,#gp-nav-en,a.gp-langsw,.gp-langbox>a):hover{color:var(--f-tx)!important} :root #gp-nav-en,:root[dir="rtl"] a.gp-langsw,:root .gp-langbox>a[lang="en"]{font-family:var(--f-sans)!important;font-size:14px!important} :root[dir="rtl"] :is(#gp-nav-ar,.gp-langsw-ap,.gp-langsw-ma,#arBtn,#gp-nav-en,a.gp-langsw,.gp-langbox>a){padding:0 20px 0 0!important;border-left:0!important;border-right:1px solid var(--f-line2)!important} :root .gp-betatag{display:inline-block;font:600 10px/1 var(--f-mono)!important;letter-spacing:.12em!important;color:var(--f-tx3)!important;border:0!important;background:none!important;padding:0!important;margin:0!important;vertical-align:baseline;transform:translateY(-1px)} /* Arabische Seiten: "English" + Beta als eine ruhige Gruppe */ :root .gp-langbox{align-items:center;gap:10px!important;margin:0!important} :root .gp-betapill{align-items:baseline;gap:5px!important;padding:0!important;margin:0!important;border:0!important;background:none!important; font:400 12px/1.2 var(--f-ar)!important;color:var(--f-tx3)!important;white-space:nowrap} :root .gp-betapill b{font:600 10px/1 var(--f-mono)!important;letter-spacing:.12em!important;color:var(--f-tx3)!important} /* A. Startseite */ :root #gp-nav{position:absolute;max-width:none!important;height:var(--f-head);padding:0 var(--g)!important;box-sizing:border-box;align-items:center} :root #gp-nav .gp-right{gap:20px!important;align-items:center} :root #gp-page #gp-nav .gp-nav a,:root #gp-page #gp-nav .gp-langsw{min-height:0!important} /* B. Programme, Hubs, Apply, Learn (nav.top) */ :root nav.top{height:var(--f-head);padding:0 var(--g)!important;gap:20px!important;box-sizing:border-box; background:linear-gradient(180deg,color-mix(in srgb,var(--f-bg) 96%,transparent) 0%,color-mix(in srgb,var(--f-bg) 88%,transparent) 70%,transparent 100%)!important; backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} :root nav.top .gp-nav{margin-inline-end:0} /* C. Textseiten (connect, verification, privacy, terms, support, accessibility, 404) */ :root body>header:not([class]){height:var(--f-head);padding:0 var(--g)!important;gap:20px!important;box-sizing:border-box; background:linear-gradient(180deg,var(--f-bg) 0%,color-mix(in srgb,var(--f-bg) 88%,transparent) 70%,transparent 100%)!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} :root body>header:not([class]) nav{gap:0!important} /* D. Match */ :root header.bar{height:var(--f-head)!important;min-height:0!important;padding:0 var(--g)!important;gap:20px!important;box-sizing:border-box;border-bottom:1px solid var(--f-line)!important;background:color-mix(in srgb,var(--f-bg) 92%,transparent)!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} :root header.bar a.l>svg{width:36px!important;height:18px!important} :root header.bar .bsub{font:500 11.5px/1 var(--f-mono)!important;letter-spacing:.14em!important;color:var(--f-tx3)!important;text-transform:uppercase;padding-left:16px;margin-left:4px;border-left:1px solid var(--f-line2)} :root header.bar nav.nv{margin-left:auto} :root header.bar .counter{display:flex;align-items:baseline;gap:8px;padding:0 20px;margin:0;border-left:1px solid var(--f-line2);border-right:0} :root header.bar .counter b{font:700 20px/1 var(--f-disp)!important;font-stretch:110%;font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:var(--f-tx)} :root header.bar .counter span{font:500 11px/1 var(--f-mono)!important;letter-spacing:.14em!important;text-transform:uppercase;color:var(--f-tx3)} :root header.bar .gp-langsw-ma{border-left:0!important;padding-left:0!important} /* E. Karte: dieselbe Zeile ueber der Karte - keine Kaesten, ein Nachtverlauf hinter der Kopfzeile traegt die Lesbarkeit */ :root #nav{height:var(--f-head);padding:0 var(--g)!important;gap:20px!important;align-items:center;box-sizing:border-box} :root #nav::before{content:"";position:absolute;inset:0 0 -40px 0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(11,14,24,.86) 0%,rgba(11,14,24,.55) 55%,rgba(11,14,24,0) 100%)} :root[data-theme="light"] #nav::before{background:linear-gradient(180deg,rgba(248,246,241,.92) 0%,rgba(248,246,241,.6) 55%,rgba(248,246,241,0) 100%)} :root #navc{position:absolute;left:50%;transform:translateX(-50%)} :root #navc .gp-nav a{height:auto!important;padding:6px 0!important;background:none!important} :root #navr{gap:12px!important} :root #navr #listBtn{min-height:36px!important} :root #navr #arBtn{min-height:36px!important} /* Handy */ @media (max-width:760px){ :root .gp-nav{gap:18px!important} :root .gp-nav a{font-size:14px!important;padding:0!important;min-height:44px!important;align-items:center} :root :is(#gp-nav .gp-logo,nav.top .brand,body>header .brand,header.bar a.l,#brand){font-size:16px!important;gap:9px!important} :root :is(#gp-nav .gp-logo,nav.top .brand,body>header .brand,header.bar a.l)>svg,:root #brand i{width:30px!important;height:15px!important} :root #gp-nav .wordmark,:root nav.top .brand-w,:root body>header .brand>span{font-size:16px!important} :root :is(#gp-theme-btn,#themebtn,#gp-thb,#tg,#thb){width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important} :root :is(#gp-nav-ar,.gp-langsw-ap,.gp-langsw-ma,#arBtn,#gp-nav-en,a.gp-langsw,.gp-langbox>a){padding-left:14px!important;min-height:40px!important} :root[dir="rtl"] :is(#gp-nav-ar,.gp-langsw-ap,.gp-langsw-ma,#arBtn,#gp-nav-en,a.gp-langsw,.gp-langbox>a){padding:0 14px 0 0!important} :root #gp-nav .gp-right,:root nav.top,:root body>header:not([class]),:root header.bar,:root #nav{gap:14px!important} :root .gp-betatag{display:none!important} } @media (max-width:560px){ /* drei Navigationswoerter + Thema: auf Unterseiten traegt das Zeichen allein die Marke (wie bisher) */ :root nav.top .brand-w,:root body>header:not([class]) .brand>span{font-size:0!important} :root header.bar a.l:not(#z){font-size:0!important;gap:0!important} :root header.bar a.l>svg{margin:0} :root header.bar .bsub,:root header.bar .counter span{display:none!important} :root header.bar .counter{padding:0 0 0 14px;border-left:1px solid var(--f-line2)} :root header.bar .counter b{font-size:18px!important} /* Arabische Startseite: "English" und der Beta-Hinweis als eine leise Zeile unter der Kopfzeile, an der Kante des Logos */ :root[dir="rtl"] #gp-nav .gp-langbox{right:var(--g)!important;top:calc(100% - 6px)!important;gap:10px!important} :root[dir="rtl"] #gp-nav .gp-langbox #gp-nav-en{border:0!important;padding:0!important;min-height:32px!important} :root[dir="rtl"] #gp-nav .gp-langbox .gp-betapill{font-size:12px!important} } /* ── 2 AKTIONEN ─────────────────────────────────────────────────────────────────────────────────────────────── Familie: HAUPT = gefuellt (Creme bei Nacht, Tinte bei Tag) · NEBEN = 1 px Linie · TEXT = Mono-Label mit Pfeil · FILTER = Text + Zahl, ausgewaehlt = Mint-Linie + Mint-Grund · Hoehen 60 (Hero) / 48 (Standard) / 40 (in Listen) · Label Plex Mono 600 12.5/.14em Versal · Pfeil 10 px Abstand · keine Pillen, keine Schatten. Apply ist eine Hauptaktion (Creme), Gold bleibt den Daten. */ :root{--f-btn-font:600 12.5px/1 var(--f-mono)} /* Pfeile in Aktionen: ein Zeichen, eine Groesse */ :root :is(.gp-act,.cta,.ap-apply,.ap-onmap) :is(.arr,i){font-style:normal} /* ── 3 TYPOGRAFIE ───────────────────────────────────────────────────────────────────────────────────────────── Display: Archivo 800, 118 % breit, Versal, nur fuer die grosse Aussage einer Seite (h1) und Kennzahlen. Text: Schibsted Grotesk - Fliesstext 17/1.6 (Lesespalte), Oberflaeche 15-16/1.5, Programmnamen 600, Metadaten 13/1.45. Label: Plex Mono 500-600 11.5-12 px, .14em, Versal - nur einzeilige Kurzlabels; Saetze nie in Mono. Zahlen: tabellarisch in Listen, Tabellen, Zaehlern, Fristen. Arabisch: Readex Pro, nie gesperrt, nie versal, Zeilenhoehe 1.75-1.9. */ :root :is(table,.tabnum,time,#gp-bignum,.gp-dldate,.ap-dl,.ap-days,.counter b,#count,.n,.num,td,th){font-variant-numeric:tabular-nums lining-nums} :root h1,:root h2,:root h3{text-wrap:balance} :root p,:root li,:root dd{text-wrap:pretty} :root[lang="ar"] :is(p,li,dd,h1,h2,h3){letter-spacing:0!important} /* ── 4 STARTSEITE ───────────────────────────────────────────────────────────────────────────────────────────── Der Hero ist EIN Bild: Kopf, Ort (oben links), Headline, Aktionen, Belegzeile stehen an einer linken Achse (--g); die Stadt steht rechts daneben (Bilder v2: city4-*, Film anflug2-*), die Textzone ist frei von Nadeln und Ringen. Keine flaechige Abdunklung: ein Verlauf von der Textseite her, ein Band unter dem Kopf, ein Boden unter den Aktionen. Arabisch: alles gespiegelt, eigene Bilder (kein gespiegeltes Kartenbild). */ :root #gp-hero{min-height:max(640px,100svh)} :root .gp-scrim{background: linear-gradient(90deg,rgba(11,14,24,.78) 0%,rgba(11,14,24,.52) 30%,rgba(11,14,24,.14) 56%,rgba(11,14,24,0) 70%), linear-gradient(180deg,rgba(11,14,24,.62) 0,rgba(11,14,24,0) 168px), linear-gradient(0deg,rgba(11,14,24,.86) 0,rgba(11,14,24,.34) 22%,rgba(11,14,24,0) 40%)!important} :root[dir="rtl"] .gp-scrim{transform:none!important;background: linear-gradient(270deg,rgba(11,14,24,.78) 0%,rgba(11,14,24,.52) 30%,rgba(11,14,24,.14) 56%,rgba(11,14,24,0) 70%), linear-gradient(180deg,rgba(11,14,24,.62) 0,rgba(11,14,24,0) 168px), linear-gradient(0deg,rgba(11,14,24,.86) 0,rgba(11,14,24,.34) 22%,rgba(11,14,24,0) 40%)!important} :root .gp-stage{max-width:none!important;padding:0 var(--g) 72px!important;gap:0!important} :root #gp-herohead{font-size:clamp(56px,8.1vw,118px)!important;line-height:.9!important;letter-spacing:-.006em!important;font-weight:800!important; text-shadow:none!important;max-width:10.5ch!important;margin:0 0 48px!important;color:var(--f-tx)} :root .gp-ways{gap:12px!important;align-items:stretch!important} :root .gp-act{min-height:60px!important;padding:0 26px!important;gap:12px!important;font:var(--f-btn-font)!important;letter-spacing:.14em!important; border:1px solid rgba(243,241,234,.36)!important;background:rgba(11,14,24,.46)!important;color:var(--f-tx)!important; -webkit-backdrop-filter:blur(10px) saturate(1.1);backdrop-filter:blur(10px) saturate(1.1);transition:border-color .18s ease,background-color .18s ease,color .18s ease!important} :root .gp-act:hover{border-color:rgba(243,241,234,.8)!important;background:rgba(11,14,24,.62)!important} :root .gp-act.pri{background:var(--f-act)!important;border-color:var(--f-act)!important;color:var(--f-act-fg)!important;-webkit-backdrop-filter:none;backdrop-filter:none} :root .gp-act.pri:hover{background:var(--f-act-h)!important;border-color:var(--f-act-h)!important} :root .gp-act.ai{border-color:rgba(243,241,234,.36)!important} :root .gp-act.ai:hover{border-color:rgba(243,241,234,.8)!important} :root .gp-act .ai-k{font:600 11px/1 var(--f-mono)!important;letter-spacing:.14em!important} :root .gp-act .wm{font:600 15px/1 var(--f-sans)!important;letter-spacing:-.005em!important} :root .gp-act .ai-dot{color:rgba(243,241,234,.4)!important;margin:0 -2px} /* Belegzeile: eine leise Zeile unter den Aktionen, an derselben linken Kante */ :root .gp-proof{order:5;flex-basis:100%;margin:20px 0 0!important;display:flex!important;align-items:baseline;gap:10px!important;flex-wrap:wrap; font:500 12px/1.5 var(--f-mono)!important;letter-spacing:.14em!important;color:var(--f-tx2)!important} :root .gp-proof #gp-bignum{font:800 19px/1 var(--f-disp)!important;font-stretch:112%!important;letter-spacing:0!important;color:var(--f-tx)!important;margin:0!important;vertical-align:0!important} :root .gp-proof .gp-proof-a{color:var(--f-tx)!important;text-decoration:none!important;border-bottom:1px solid rgba(243,241,234,.45);padding-bottom:1px} :root .gp-proof .gp-proof-a:hover{border-bottom-color:var(--f-tx)} :root .gp-proof .gp-proof-a:before{margin-right:10px!important;color:rgba(243,241,234,.4)!important} /* Ort oben links: auf dem Raster unter dem Kopf */ :root .gp-cap{left:var(--g)!important;top:calc(var(--f-head) + 28px)!important} :root[dir="rtl"] .gp-cap{left:auto!important;right:var(--g)!important} :root .hf6-cap a{gap:8px!important} :root .hf6-k{font:600 11.5px/1 var(--f-mono)!important;letter-spacing:.2em!important} :root .hf6-n{font:400 14px/1.3 var(--f-sans)!important;color:var(--f-tx2)!important} :root .hf6-n b{font-weight:600!important;color:var(--f-tx)!important;font-variant-numeric:tabular-nums} /* Pause + Mapbox an der Randachse */ :root .gp-hold{left:calc(var(--g) - 14.5px)!important;bottom:4px!important} :root .gp-mb{left:calc(var(--g) + 34px)!important;bottom:14px!important} :root[dir="rtl"] .gp-hold{left:auto!important;right:calc(var(--g) - 14.5px)!important} :root[dir="rtl"] .gp-mb{left:auto!important;right:calc(var(--g) + 34px)!important} :root .gp-cityline{height:1px!important;opacity:.85} /* Bilder: in der echten Darstellungsgroesse scharf (2x-Dateien per srcset), Ruhe statt Zoom-Drift */ :root .gp-slide img{transition:transform 12s linear!important} :root .gp-slide.is-on img{transform:scale(1.025)!important} :root[dir="rtl"] .gp-slide img,:root[dir="rtl"] .gp-slide.is-on img{transform:none!important} :root[dir="rtl"] .gp-slide.is-on img{transform:scale(1.025)!important} /* Arabisch: eigene Zeilenhoehe, eigener Abstand zu den Aktionen */ :root[dir="rtl"] #gp-herohead{font-family:var(--f-ar)!important;font-weight:600!important;font-size:clamp(48px,6.6vw,100px)!important;line-height:1.24!important; max-width:11ch!important;margin:0 0 56px!important;letter-spacing:0!important} :root[dir="rtl"] .gp-act{font:500 15px/1 var(--f-ar)!important;letter-spacing:0!important} :root[dir="rtl"] .gp-act .ai-k{font:500 13px/1 var(--f-ar)!important} :root[dir="rtl"] .gp-proof{font:400 14px/1.6 var(--f-ar)!important;letter-spacing:0!important} :root[dir="rtl"] .hf6-k{font:500 13px/1 var(--f-ar)!important;letter-spacing:0!important} :root[dir="rtl"] .gp-proof .gp-proof-a:before{margin:0 0 0 10px!important} /* Hell: dieselbe Komposition bei Tag - Papierverlauf statt Nacht */ :root #gp-page.light .gp-scrim{background: linear-gradient(90deg,rgba(248,246,241,.9) 0%,rgba(248,246,241,.62) 30%,rgba(248,246,241,.16) 56%,rgba(248,246,241,0) 70%), linear-gradient(180deg,rgba(248,246,241,.7) 0,rgba(248,246,241,0) 168px), linear-gradient(0deg,rgba(248,246,241,.9) 0,rgba(248,246,241,.36) 22%,rgba(248,246,241,0) 40%)!important} :root[dir="rtl"] #gp-page.light .gp-scrim{background: linear-gradient(270deg,rgba(248,246,241,.9) 0%,rgba(248,246,241,.62) 30%,rgba(248,246,241,.16) 56%,rgba(248,246,241,0) 70%), linear-gradient(180deg,rgba(248,246,241,.7) 0,rgba(248,246,241,0) 168px), linear-gradient(0deg,rgba(248,246,241,.9) 0,rgba(248,246,241,.36) 22%,rgba(248,246,241,0) 40%)!important} :root #gp-page.light,:root #gp-page.light #gp-hero{background:var(--f-bg)!important} :root #gp-page.light #gp-hero #gp-herohead{color:var(--f-tx)!important;text-shadow:none!important} :root #gp-page.light #gp-hero .gp-act{color:var(--f-tx)!important;border-color:rgba(16,18,22,.34)!important;background:rgba(248,246,241,.66)!important} :root #gp-page.light #gp-hero .gp-act:hover{border-color:rgba(16,18,22,.8)!important} :root #gp-page.light #gp-hero .gp-act.pri{background:var(--f-act)!important;border-color:var(--f-act)!important;color:var(--f-act-fg)!important} :root #gp-page.light #gp-hero .gp-act .ai-dot{color:rgba(16,18,22,.4)!important} :root #gp-page.light .gp-proof{color:var(--f-tx2)!important} :root #gp-page.light .gp-proof .gp-proof-a{border-bottom-color:rgba(16,18,22,.45)} :root #gp-page.light .gp-proof .gp-proof-a:before{color:rgba(16,18,22,.4)!important} /* kurze Fenster */ @media (min-width:761px) and (max-height:760px){:root #gp-herohead{font-size:clamp(48px,6.4vw,92px)!important;margin-bottom:36px!important}:root .gp-stage{padding-bottom:48px!important}} /* Tablet */ @media (min-width:761px) and (max-width:1100px){:root #gp-herohead{font-size:clamp(56px,9.4vw,96px)!important}:root .gp-act{padding:0 20px!important}} /* Handy: Stadt oben, Text unten - eine Spalte, eine Achse */ @media (max-width:760px){ :root .gp-scrim{background:linear-gradient(0deg,rgba(11,14,24,.94) 0%,rgba(11,14,24,.8) 34%,rgba(11,14,24,.28) 52%,rgba(11,14,24,0) 64%), linear-gradient(180deg,rgba(11,14,24,.6) 0,rgba(11,14,24,0) 150px)!important} :root[dir="rtl"] .gp-scrim{background:linear-gradient(0deg,rgba(11,14,24,.94) 0%,rgba(11,14,24,.8) 34%,rgba(11,14,24,.28) 52%,rgba(11,14,24,0) 64%), linear-gradient(180deg,rgba(11,14,24,.6) 0,rgba(11,14,24,0) 150px)!important} :root #gp-page.light .gp-scrim,:root[dir="rtl"] #gp-page.light .gp-scrim{background:linear-gradient(0deg,rgba(248,246,241,.96) 0%,rgba(248,246,241,.84) 34%,rgba(248,246,241,.3) 52%,rgba(248,246,241,0) 64%), linear-gradient(180deg,rgba(248,246,241,.66) 0,rgba(248,246,241,0) 150px)!important} :root .gp-stage{padding:0 var(--g) 60px!important} :root #gp-herohead{font-size:clamp(44px,12.6vw,58px)!important;line-height:.92!important;max-width:none!important;margin:0 0 24px!important} :root[dir="rtl"] #gp-herohead{font-size:clamp(40px,11.4vw,52px)!important;line-height:1.28!important;margin:0 0 28px!important} :root .gp-ways{gap:10px!important} :root .gp-act{min-height:56px!important;width:100%;padding:0 20px!important} :root .gp-proof{order:-1;margin:0 0 20px!important;font-size:11px!important;letter-spacing:.12em!important;line-height:1.7!important;display:block!important} :root[dir="rtl"] .gp-proof{font-size:13px!important} :root .gp-proof #gp-bignum{font-size:17px!important;margin-right:8px!important} :root .gp-cap{top:calc(var(--f-head) + 18px)!important} :root .gp-hold{left:calc(var(--g) - 14.5px)!important;bottom:6px!important} :root .gp-mb{left:calc(var(--g) + 30px)!important;bottom:16px!important} } @media (max-width:380px){:root .gp-act .ai-k{font-size:10px!important;letter-spacing:.1em!important}:root .gp-act.ai{gap:7px!important}} /* Closing soon: eine gesetzte Zeile, gleiche Kanten wie der Hero */ :root .gp-dlin{max-width:none!important;padding:20px var(--g)!important;gap:24px!important} :root .gp-dllabel{font:600 11.5px/1 var(--f-mono)!important;letter-spacing:.18em!important} :root .gp-dldot{width:6px!important;height:6px!important} :root .gp-dltrack{gap:8px!important} :root .gp-dlchip{padding:0 16px!important;min-height:44px;gap:12px!important;border:1px solid var(--f-line2)!important;transition:border-color .18s ease} :root .gp-dlchip:hover{border-color:var(--f-coral)!important} :root .gp-dlname{font:600 14.5px/1.3 var(--f-sans)!important;color:var(--f-tx)!important} :root .gp-dlmeta{font:400 13px/1.3 var(--f-sans)!important;color:var(--f-tx3)!important} :root .gp-dldate{font:600 12px/1 var(--f-mono)!important;letter-spacing:.04em!important;color:var(--f-coral)!important} :root .gp-dlcta{font:600 12px/1 var(--f-mono)!important;letter-spacing:.14em!important;color:var(--f-tx)!important} :root .gp-dlcta:hover{color:var(--f-mint)!important} :root #gp-page.light .gp-dlcta{color:var(--f-tx)!important} /* Fuss der Startseite: vier Spalten auf dem Raster, Zaehler auf einer gemeinsamen Achse */ :root .gp-foot{max-width:none!important;padding:64px var(--g) 40px!important;gap:48px!important} :root .gp-fgrid{gap:32px!important;grid-template-columns:repeat(4,minmax(0,1fr))!important} :root .gp-fcol{gap:0!important;font-size:14px!important} :root .gp-fcol>b,:root .gp-brk{font:600 11.5px/1 var(--f-mono)!important;letter-spacing:.16em!important;color:var(--f-tx3)!important;margin:0 0 16px!important} :root .gp-fcol a,:root .gp-brchip{font:400 14px/1.3 var(--f-sans)!important;color:var(--f-tx2)!important;padding:5px 0!important} :root .gp-fcol a:hover,:root .gp-brchip:hover{color:var(--f-tx)!important} :root .gp-brrow{gap:0!important} :root .gp-brchip{display:grid!important;grid-template-columns:minmax(0,max-content) auto;justify-content:start;column-gap:8px;align-items:baseline} :root .gp-brchip i{font:500 11.5px/1 var(--f-mono)!important;color:var(--f-tx3)!important;font-variant-numeric:tabular-nums} :root .gp-flegal{font:400 12.5px/1.6 var(--f-sans)!important;color:var(--f-tx3)!important;padding-top:24px;border-top:1px solid var(--f-line)} :root .gp-flegal a{text-decoration:none!important;color:var(--f-tx3)} :root .gp-flegal a:hover{color:var(--f-tx)} :root .gp-beon{color:var(--f-tx)!important;border-bottom:1px solid var(--f-line3);align-self:flex-start} :root .gp-beon:hover{border-bottom-color:var(--f-tx)} /* Fristen-Alarm (Fuss Startseite, Apply, Programme): Feld + Hauptaktion in einer Linie */ :root .gp-al .r{gap:0!important} :root .gp-al input[type=email]{height:48px!important;padding:0 14px!important;border:1px solid var(--f-line2)!important;border-right:0!important;background:transparent!important;color:var(--f-tx)!important;font:400 15px/1 var(--f-sans)!important} :root .gp-al input[type=email]:focus{border-color:var(--f-tx)!important;outline:none} :root .gp-al input[type=email]::placeholder{color:var(--f-tx3)!important} :root .gp-al button{height:48px!important;padding:0 18px!important;border:1px solid var(--f-act)!important;background:var(--f-act)!important;color:var(--f-act-fg)!important;font:var(--f-btn-font)!important;letter-spacing:.14em!important;white-space:nowrap} :root .gp-al button:hover{background:var(--f-act-h)!important;border-color:var(--f-act-h)!important} :root .gp-al .fine{font:400 12.5px/1.55 var(--f-sans)!important;color:var(--f-tx3)!important;margin-top:4px!important} :root[dir="rtl"] .gp-al input[type=email]{border-right:1px solid var(--f-line2)!important;border-left:0!important} @media (max-width:760px){ :root .gp-dlin{padding:20px var(--g)!important;gap:12px!important} :root .gp-dlchip{padding:12px 14px!important} :root .gp-foot{padding:48px var(--g) 32px!important;gap:40px!important} :root .gp-fgrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:40px 20px!important} :root .gp-fcol{text-align:start!important;align-items:stretch!important} :root .gp-brrow,:root .gp-brrows,:root .gp-fcol{text-align:start!important} :root .gp-brchip{grid-template-columns:minmax(0,1fr) auto!important;justify-content:stretch!important;padding:7px 0!important;border-bottom:1px solid var(--f-line)!important} :root .gp-brchip i{text-align:end} :root .gp-fcol.gp-flinks{display:grid!important;grid-template-columns:1fr 1fr;column-gap:20px!important} :root .gp-fcol.gp-flinks>b{grid-column:1/-1} :root .gp-fcol.gp-flinks a{padding:0!important} } /* Das Show-Formular: dieselbe Flaeche, dieselben Felder wie der Rest - Gold nur noch als kleine Casting-Marke */ :root #gp-modal{background:rgba(6,8,15,.82)!important} :root #gp-modal .gp-modal-card{background:var(--f-p1)!important;border:1px solid var(--f-line2)!important;box-shadow:0 40px 100px rgba(0,0,0,.55)!important;padding:32px!important;max-width:480px!important} :root #gp-modal .gp-modal-card>div>div:first-child>div>div:first-child{font:600 11px/1 var(--f-mono)!important;letter-spacing:.18em!important;color:var(--f-gold)!important;margin-bottom:14px!important} :root #gp-modal-title{font:800 28px/1.05 var(--f-disp)!important;font-stretch:112%!important;letter-spacing:-.005em!important;text-transform:uppercase;color:var(--f-tx)!important} :root #gp-modal .gp-modal-sub{font:400 15px/1.55 var(--f-sans)!important;color:var(--f-tx2)!important;margin:12px 0 28px!important} :root #gp-modal .gp-modal-x{width:40px!important;height:40px!important;border:1px solid transparent!important;color:var(--f-tx2)!important;font-size:22px!important;font-weight:300!important;margin:-8px -10px 0 0} :root #gp-modal .gp-modal-x:hover{color:var(--f-tx)!important;border-color:var(--f-line2)!important} :root #gp-modal .gp-flabel{font:600 11px/1 var(--f-mono)!important;letter-spacing:.14em!important;color:var(--f-tx3)!important;margin:0 0 8px!important} :root #gp-modal .gp-flabel span{opacity:1!important;color:var(--f-tx3);font-weight:500;letter-spacing:.06em!important;text-transform:none} :root #gp-modal .gp-field{height:48px;background:transparent!important;border:1px solid var(--f-line2)!important;padding:0 14px!important;font:400 15px/1.4 var(--f-sans)!important;color:var(--f-tx)!important;margin-bottom:20px!important;transition:border-color .18s ease} :root #gp-modal textarea.gp-field{height:auto;min-height:96px;padding:12px 14px!important;margin-bottom:4px!important} :root #gp-modal .gp-field:focus{border-color:var(--f-tx)!important} :root #gp-modal .gp-field::placeholder{color:var(--f-tx3)} :root #gp-modal select.gp-field option{background:var(--f-p1)!important} :root #gp-modal .gp-form-btn{height:52px!important;padding:0!important;margin-top:20px!important;background:var(--f-act)!important;color:var(--f-act-fg)!important;font:var(--f-btn-font)!important;letter-spacing:.16em!important;box-shadow:none!important} :root #gp-modal .gp-form-btn:hover{background:var(--f-act-h)!important} :root #gp-modal .gp-thanks-check{background:var(--f-mint-bg)!important;border-color:var(--f-mint)!important;color:var(--f-mint)!important} :root #gp-modal .gp-thanks-h{font:800 22px/1.1 var(--f-disp)!important;font-stretch:112%!important;text-transform:uppercase;color:var(--f-tx)!important} :root #gp-modal .gp-thanks-sub{color:var(--f-tx3)!important} :root #gp-page.light ~ #gp-modal,:root #gp-modal:is(.light){background:rgba(248,246,241,.82)!important} @media (max-width:760px){:root #gp-modal{padding:12px!important}:root #gp-modal .gp-modal-card{padding:24px 20px!important}:root #gp-modal-title{font-size:24px!important}} :root .gp-brchip.gp-all{display:none!important} /* ── 5 OPEN CALLS ───────────────────────────────────────────────────────────────────────────────────────────── Ein gesetztes Verzeichnis: links die Filter als ruhige Liste (Text + Zahl auf einer rechten Achse, ausgewaehlt = Mint-Strich), rechts jede Zeile mit demselben Rhythmus - oben Name + Art | Frist, darunter drei Spalten | Aktionsspalte (Apply, Karte, Merken). */ :root .ap-hero{height:auto!important;min-height:540px} :root .ap-hero .hero{padding-top:132px!important;padding-bottom:56px!important} @media(max-width:760px){:root .ap-hero{min-height:0}:root .ap-hero .hero{padding-top:96px!important;padding-bottom:28px!important}} :root .ap-hero .hero .kicker{font:600 11.5px/1 var(--f-mono)!important;letter-spacing:.2em!important;color:var(--f-mint)!important;margin:0 0 20px!important} :root .ap-hero .hero h1{text-shadow:none!important;letter-spacing:-.006em!important;margin:0 0 24px!important} :root .ap-hero .hero .lede{font:400 18px/1.55 var(--f-sans)!important;color:var(--f-tx2)!important;opacity:1!important;max-width:46ch!important} /* Stadtpunkte im Bild: scharfer Kern, kleiner Saum */ :root .ap-dot i{width:8px!important;height:8px!important;margin:-4px 0 0 -4px!important;box-shadow:0 0 0 2px rgba(11,14,24,.7),0 0 8px 1px rgba(232,201,126,.45)!important} :root .ap-dot.is-edge i{box-shadow:0 0 6px 1px rgba(232,201,126,.3)!important} :root .ap-dotl{font:600 11.5px/1 var(--f-mono)!important;letter-spacing:.1em!important;background:rgba(11,14,24,.88)!important;border-color:var(--f-line2)!important;padding:7px 9px!important} body.light .ap-dot i{box-shadow:0 0 0 2px rgba(248,246,241,.9),0 0 6px 1px rgba(122,91,18,.3)!important} body.light .ap-dotl{background:rgba(248,246,241,.96)!important} /* Seitenspalte */ @media(min-width:960px){ :root .ap-agrid{grid-template-columns:212px minmax(0,1fr)!important;gap:56px!important} :root .ap-side{top:calc(var(--f-head) + 8px)!important;padding:32px 0!important} :root .ap-tabs{gap:0!important;margin-top:8px!important;border-top:1px solid var(--f-line)} :root .ap-flt{flex-direction:column;gap:0!important;margin:0!important} :root .ap-tab,:root .ap-flt .ap-fbtn{display:flex!important;justify-content:space-between;align-items:center;width:100%;min-height:40px!important;padding:0 2px 0 12px!important; border:0!important;border-bottom:1px solid var(--f-line)!important;background:none!important;box-shadow:none; font:500 14px/1.2 var(--f-sans)!important;letter-spacing:0!important;text-transform:none!important;color:var(--f-tx2)!important;text-align:start;margin:0!important} :root .ap-tab i,:root .ap-flt .ap-fbtn i{font:500 12px/1 var(--f-mono)!important;color:var(--f-tx3)!important;font-variant-numeric:tabular-nums;margin:0!important;opacity:1!important} :root .ap-tab:hover,:root .ap-flt .ap-fbtn:hover{color:var(--f-tx)!important} :root .ap-tab[aria-selected="true"],:root .ap-flt .ap-fbtn[aria-pressed="true"]{color:var(--f-tx)!important;box-shadow:inset 2px 0 0 var(--f-mint)!important;background:var(--f-mint-bg)!important} :root .ap-flt .ap-fclose[aria-pressed="true"]{box-shadow:inset 2px 0 0 var(--f-coral)!important;background:rgba(255,122,92,.07)!important} :root .ap-flt{border-top:1px solid var(--f-line)} :root .ap-tab-saved{color:var(--f-tx2)!important} } :root .ap-search{min-height:48px!important;padding:0 14px!important;gap:10px!important;border:1px solid var(--f-line2)!important;background:transparent!important;margin:0 0 24px!important} :root .ap-search:focus-within{border-color:var(--f-tx)!important} :root .ap-search>span{font-size:15px;color:var(--f-tx3)} :root .ap-search input{font:400 15px/1.2 var(--f-sans)!important;color:var(--f-tx)!important} /* Zaehlzeile */ :root .ap-bar{margin:32px 0 8px!important;gap:12px 24px!important;align-items:flex-end!important} :root .ap-count{font:400 16px/1.45 var(--f-sans)!important;color:var(--f-tx2)!important} :root .ap-count b{font:800 44px/.9 var(--f-disp)!important;font-stretch:118%!important;letter-spacing:-.01em!important;color:var(--f-tx)!important;margin-right:12px!important;vertical-align:-5px!important} :root .ap-alink,:root .ap-savedb{min-height:40px!important;padding:0 16px!important;border:1px solid var(--f-line3)!important;font:var(--f-btn-font)!important;letter-spacing:.14em!important;color:var(--f-tx)!important} :root .ap-alink:hover,:root .ap-savedb:hover{border-color:var(--f-tx)!important} /* Abschnitte */ :root .ap-sec{padding:40px 0 14px!important;border-bottom:1px solid var(--f-line2)!important} :root .ap-list>.ap-sec:first-child{padding-top:16px!important} :root .ap-sec h3{font:600 11.5px/1 var(--f-mono)!important;letter-spacing:.18em!important;color:var(--f-tx)!important} :root .ap-sec h3 i{color:var(--f-tx3)!important;margin-left:10px!important} :root .ap-sec p{font:400 14.5px/1.55 var(--f-sans)!important;color:var(--f-tx3)!important;margin-top:10px!important;max-width:64ch!important} /* Zeile */ @media(min-width:960px){ :root .ap-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.86fr) 172px!important; grid-template-areas:"name name name when" "what who cost do"!important;column-gap:28px!important;row-gap:18px!important;padding:28px 0 30px!important} :root .ap-do{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:center!important;gap:6px 0!important;margin:0!important;text-align:start!important} :root .ap-do>.ap-apply{grid-column:1/-1} :root .ap-do .ap-star{margin-right:-10px} :root .ap-when{align-self:start} :root .ap-when .none{white-space:nowrap} } :root .ap-row{border-bottom:1px solid var(--f-line)!important} :root .ap-row:hover{background:linear-gradient(90deg,transparent,rgba(243,241,234,.025) 12%,rgba(243,241,234,.025) 88%,transparent)!important} body.light .ap-row:hover{background:linear-gradient(90deg,transparent,rgba(16,18,22,.025) 12%,rgba(16,18,22,.025) 88%,transparent)!important} :root .ap-name h2{font:600 20px/1.25 var(--f-sans)!important;letter-spacing:-.012em!important;margin:0 0 8px!important;color:var(--f-tx)} :root .ap-pl{border-bottom-width:1px!important} :root .ap-kind{font:500 11.5px/1.4 var(--f-mono)!important;letter-spacing:.12em!important;color:var(--f-tx3)!important} :root .ap-lbl{font:600 11px/1 var(--f-mono)!important;letter-spacing:.14em!important;color:var(--f-tx3)!important;margin:0 0 8px!important} :root .ap-c{font:400 15px/1.55 var(--f-sans)!important;color:var(--f-tx2)!important} :root .ap-c.empty .ap-txt:before{color:var(--f-tx3)!important} :root .ap-when .ap-txt{font:600 12.5px/1.5 var(--f-mono)!important;letter-spacing:.03em!important} :root .ap-when .dl{color:var(--f-coral)!important} :root .ap-when .dl small{font:500 12px/1.5 var(--f-mono)!important;letter-spacing:.03em!important;color:var(--f-tx3)!important;margin-top:2px} :root .ap-when .none{font:500 12px/1.5 var(--f-mono)!important;letter-spacing:.03em!important;color:var(--f-tx3)!important} /* Aktionen der Zeile: Apply = Hauptaktion klein, Website = Nebenaktion, Karte = Textlink, Merken = Symbol */ :root .ap-apply:not(.ap-web){min-height:40px!important;padding:0 16px!important;background:var(--f-act)!important;border:1px solid var(--f-act)!important;color:var(--f-act-fg)!important; font:var(--f-btn-font)!important;letter-spacing:.14em!important;justify-content:space-between!important} :root .ap-apply:not(.ap-web):hover,:root .ap-apply:not(.ap-web):focus-visible{background:var(--f-act-h)!important;border-color:var(--f-act-h)!important;color:var(--f-act-fg)!important} :root .ap-apply.ap-web{min-height:40px!important;padding:0 16px!important;border:1px solid var(--f-line3)!important;color:var(--f-tx)!important;font:var(--f-btn-font)!important;letter-spacing:.14em!important;justify-content:space-between!important} :root .ap-apply.ap-web:hover{border-color:var(--f-tx)!important} :root .ap-onmap{min-height:36px!important;font:500 11.5px/1 var(--f-mono)!important;letter-spacing:.12em!important;color:var(--f-tx2)!important;gap:8px!important;border-bottom:0!important} :root .ap-onmap:hover{color:var(--f-tx)!important} :root .ap-onmap::before{width:6px!important;height:6px!important;box-shadow:none!important;background:var(--f-mint)!important} :root .ap-star{width:40px!important;height:40px!important;color:var(--f-tx3)!important} :root .ap-star svg{width:16px;height:16px;stroke-width:1.5!important} :root .ap-star:hover{color:var(--f-tx)!important} :root .ap-star[aria-pressed="true"]{color:var(--f-gold)!important} :root .ap-more{min-height:52px!important;border:1px solid var(--f-line3)!important;background:none!important;font:var(--f-btn-font)!important;letter-spacing:.14em!important;color:var(--f-tx)!important;margin-top:32px!important} :root .ap-more:hover{border-color:var(--f-tx)!important} :root .ap-more small{color:var(--f-tx3)!important} :root .ap-shut{margin-top:40px!important} :root .ap-stog{font:600 11.5px/1 var(--f-mono)!important;letter-spacing:.16em!important;color:var(--f-tx)!important} /* Fristen-Alarm unter der Liste */ :root .ap-agrid~.gp-al,:root .wrap>.gp-al,:root .gp-al:not(.gp-al-band){border:1px solid var(--f-line2)!important;background:var(--f-p1)!important;padding:28px!important} :root .gp-al h2{font:600 11.5px/1 var(--f-mono)!important;letter-spacing:.18em!important;color:var(--f-tx)!important;margin:0 0 12px!important} :root .gp-al p{font:400 15px/1.55 var(--f-sans)!important;color:var(--f-tx2)!important} /* Handy + Tablet */ @media(max-width:959px){ :root .ap-side{gap:8px!important;padding:24px 0 8px!important} :root .ap-search{margin:0 0 4px!important} :root .ap-flt .ap-fbtn,:root .ap-csel select{min-height:44px!important;border:1px solid var(--f-line2)!important;background:none!important;font:500 13.5px/1 var(--f-sans)!important;letter-spacing:0!important;text-transform:none!important;color:var(--f-tx)!important} :root .ap-flt .ap-fbtn i{font:500 12px/1 var(--f-mono)!important;color:var(--f-tx3)!important;margin-left:6px!important} :root .ap-flt .ap-fbtn[aria-pressed="true"]{border-color:var(--f-mint)!important;background:var(--f-mint-bg)!important} :root .ap-flt .ap-fclose[aria-pressed="true"]{border-color:var(--f-coral)!important;background:rgba(255,122,92,.07)!important} :root .ap-row{grid-template-columns:minmax(0,1fr)!important;grid-template-areas:"name" "when" "what" "who" "cost" "do"!important;row-gap:14px!important;padding:24px 0!important} :root .ap-what,:root .ap-who,:root .ap-cost{display:block!important} :root .ap-lbl{margin:0 0 4px!important;padding:0!important} :root .ap-when{justify-self:start!important;text-align:start!important} :root .ap-when .dl small{display:inline!important;margin-left:8px} :root .ap-do{gap:16px!important} :root .ap-apply:not(.ap-web),:root .ap-apply.ap-web{min-height:44px!important;flex:0 0 auto} :root .ap-count b{font-size:34px!important} } @media(max-width:760px){ :root .ap-hero .hero .lede{font-size:16px!important} :root .ap-name h2{font-size:18px!important} :root .ap-c{font-size:15px!important} } :root[dir="rtl"] .ap-c,:root[dir="rtl"] .ap-count,:root[dir="rtl"] .ap-sec p,:root[dir="rtl"] .ap-hero .hero .lede{font-family:var(--f-ar)!important;line-height:1.75!important} :root[dir="rtl"] :is(.ap-lbl,.ap-kind,.ap-sec h3,.ap-onmap,.ap-apply,.ap-alink,.ap-more,.ap-tab,.ap-fbtn,.ap-hero .hero .kicker){font-family:var(--f-ar)!important;letter-spacing:0!important;text-transform:none!important} :root[dir="rtl"] :is(.ap-lbl,.ap-kind){font-size:13px!important} :root[dir="rtl"] :is(.ap-onmap,.ap-apply,.ap-alink,.ap-more,.ap-hero .hero .kicker,.ap-sec h3){font-size:14px!important;font-weight:500!important} @media(min-width:960px){ :root[dir="rtl"] .ap-do .ap-star{margin:0 0 0 -10px} :root[dir="rtl"] .ap-tab,:root[dir="rtl"] .ap-flt .ap-fbtn{padding:0 12px 0 2px!important;font-size:15px!important} :root[dir="rtl"] .ap-tab[aria-selected="true"],:root[dir="rtl"] .ap-flt .ap-fbtn[aria-pressed="true"]{box-shadow:inset -2px 0 0 var(--f-mint)!important} :root[dir="rtl"] .ap-flt .ap-fclose[aria-pressed="true"]{box-shadow:inset -2px 0 0 var(--f-coral)!important} } /* ── 6 MATCH ────────────────────────────────────────────────────────────────────────────────────────────────── Start: Worte links, das runde Fenster rechts, beide auf einer Mittelachse. Fragen: die Karte dahinter tritt zurueck (Feld 40 %, ruhige Mitte hinter dem Formular), Erlaeuterungen in lesbarer Schrift statt Mini-Mono, Kacheln mit klarer Auswahl, eine Hauptaktion pro Schritt. */ :root:has(#field) #field{opacity:.42} :root:has(#field) main{isolation:isolate} :root:has(#field) main::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background:radial-gradient(52% 64% at 50% 48%,rgba(11,14,24,.86) 0%,rgba(11,14,24,.62) 55%,rgba(11,14,24,.18) 100%)} :root[data-theme="light"]:has(#field) main::before{background:radial-gradient(52% 64% at 50% 48%,rgba(248,246,241,.9) 0%,rgba(248,246,241,.66) 55%,rgba(248,246,241,.2) 100%)} :root:has(#start.on) main::before{display:none} /* Start */ @media(min-width:901px){:root:has(#field) #start.on{grid-template-columns:minmax(0,1fr) minmax(0,.92fr)!important;gap:80px!important}} :root:has(#field) #start h1{font-size:clamp(40px,4vw,58px)!important;margin:0 0 24px!important;max-width:none!important} :root:has(#field) .eyebrow{font:600 11.5px/1 var(--f-mono)!important;letter-spacing:.2em!important;color:var(--f-mint)!important;margin:0 0 20px!important} :root:has(#field) .eyebrow .k{color:var(--f-tx3)!important;letter-spacing:.14em!important;margin-left:12px!important} :root:has(#field) #start .lead{font:400 18px/1.55 var(--f-sans)!important;color:var(--f-tx2)!important;max-width:30em!important;margin:0 0 32px!important} :root:has(#field) #start .play{min-height:56px!important;padding:0 24px!important;gap:16px!important;background:var(--f-act)!important;border-color:var(--f-act)!important;color:var(--f-act-fg)!important;box-shadow:none!important;transform:none!important} :root:has(#field) #start .play:hover{background:var(--f-act-h)!important;border-color:var(--f-act-h)!important} :root:has(#field) #start .play b,:root:has(#field) #start .play i{font:var(--f-btn-font)!important;letter-spacing:.14em!important;color:inherit!important} :root:has(#field) .btnp{min-height:56px!important;padding:0 24px!important;border:1px solid var(--f-line3)!important;font:var(--f-btn-font)!important;letter-spacing:.14em!important;color:var(--f-tx)!important} :root:has(#field) .btnp:hover{border-color:var(--f-tx)!important} :root:has(#field) #start .fine{font:400 14px/1.5 var(--f-sans)!important;letter-spacing:0!important;text-transform:none!important;color:var(--f-tx3)!important;margin:24px 0 0!important;gap:4px!important} :root:has(#field) #start .fine span:first-letter{text-transform:uppercase} :root:has(#field) .drop .orb{font:600 11.5px/1 var(--f-mono)!important;letter-spacing:.14em!important;padding:12px 16px!important;border-color:var(--f-line3)!important;color:var(--f-tx)!important;background:var(--f-bg)!important} :root:has(#field) .drop .dt b{font:600 18px/1.3 var(--f-sans)!important} :root:has(#field) .drop .dt>span,:root:has(#field) .drop .pn{font:400 14px/1.5 var(--f-sans)!important;color:var(--f-tx2)!important} /* Schritte */ :root:has(#field) .scr:not(#start),:root:has(#field) #reveal,:root:has(#field) #r{max-width:820px!important} :root:has(#field) h2.q{font:700 clamp(28px,3.2vw,40px)/1.1 var(--f-sans)!important;letter-spacing:-.022em!important;margin:0 0 12px!important} :root:has(#field) .hint,:root:has(#field) .lead{font:400 16px/1.55 var(--f-sans)!important;color:var(--f-tx2)!important;max-width:40em!important;margin:0 0 28px!important} :root:has(#field) .grp{font:600 11.5px/1 var(--f-mono)!important;letter-spacing:.16em!important;color:var(--f-tx3)!important;margin:8px 0 4px!important} :root:has(#field) .grp.w{margin-top:20px!important} :root:has(#field) .tiles{gap:8px!important;margin:0 0 24px!important} :root:has(#field) .tile{min-height:80px!important;justify-content:flex-start!important;padding:16px 32px 14px 16px!important;border:1px solid var(--f-line2)!important;background:color-mix(in srgb,var(--f-p1) 72%,transparent)!important; -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:border-color .16s ease,background-color .16s ease!important;transform:none!important} :root:has(#field) .tile:hover{border-color:var(--f-line3)!important} :root:has(#field) .tile[aria-pressed=true]{border-color:var(--f-mint)!important;background:var(--f-mint-bg)!important;box-shadow:inset 0 0 0 1px var(--f-mint)!important} :root:has(#field) .tile b{font:600 16px/1.25 var(--f-sans)!important;letter-spacing:-.01em!important} :root:has(#field) .tile span{font:400 13.5px/1.35 var(--f-sans)!important;color:var(--f-tx3)!important} :root:has(#field) .tile .n{top:12px!important;right:12px!important;border:0!important;padding:0!important;font:500 11px/1 var(--f-mono)!important;color:var(--f-tx3)!important} :root:has(#field) .tile[aria-pressed=true] .n{color:var(--f-mint)!important} :root:has(#field) .chip{padding:10px 14px!important;border:1px solid var(--f-line2)!important;background:transparent!important;font:500 14.5px/1.2 var(--f-sans)!important;transform:none!important} :root:has(#field) .chip[aria-pressed=true]{border-color:var(--f-mint)!important;background:var(--f-mint-bg)!important} :root:has(#field) .secin{padding:0 16px!important;height:52px;border:1px solid var(--f-line2)!important;background:transparent!important;font:400 16px/1 var(--f-sans)!important} :root:has(#field) .secin:focus{border-color:var(--f-tx)!important;outline:none} :root:has(#field) .pick{border-color:var(--f-mint)!important;background:var(--f-mint-bg)!important} :root:has(#field) .trail button{font:500 12px/1 var(--f-mono)!important;padding:8px 10px!important;border-color:var(--f-line2)!important;background:transparent!important} /* Leiste unten */ :root:has(#field) .nav{gap:16px!important;margin-top:8px!important;padding-top:20px;border-top:1px solid var(--f-line)} :root:has(#field) .nav .need{font:400 15px/1.45 var(--f-sans)!important;color:var(--f-tx2)!important} :root:has(#field) .btn{min-height:48px!important;padding:0 20px!important;font:var(--f-btn-font)!important;letter-spacing:.14em!important;border-color:var(--f-line3)!important;transform:none!important} :root:has(#field) .btn:hover{border-color:var(--f-tx)!important} :root:has(#field) .btn.pri{background:var(--f-act)!important;border-color:var(--f-act)!important;color:var(--f-act-fg)!important} :root:has(#field) .btn.pri:hover{background:var(--f-act-h)!important;border-color:var(--f-act-h)!important} :root:has(#field) .btn.pri:disabled{background:transparent!important;border:1px dashed var(--f-line3)!important;color:var(--f-tx3)!important} :root:has(#field) .btn.gh{border-color:transparent!important;color:var(--f-tx2)!important;padding-left:0!important} :root:has(#field) .btn.gh:hover{color:var(--f-tx)!important} :root:has(#field) .btn.gold{background:var(--f-act)!important;border-color:var(--f-act)!important;color:var(--f-act-fg)!important} :root:has(#field) .btn.gold:hover{background:var(--f-act-h)!important} :root:has(#field) .keys{font:500 11.5px/1 var(--f-mono)!important;color:var(--f-tx3)!important} /* Ergebnis */ :root:has(#field) .ten{border-color:var(--f-line2)!important;background:var(--f-p1)!important} :root:has(#field) .ten-side{padding:24px!important;gap:12px!important;border-color:var(--f-line)!important} :root:has(#field) #r .ten .ten-k{font:600 11.5px/1 var(--f-mono)!important;letter-spacing:.18em!important;color:var(--f-mint)!important} :root:has(#field) #r .ten .ten-t{font:700 22px/1.2 var(--f-sans)!important;letter-spacing:-.015em!important} :root:has(#field) #r .ten .ten-l{font:400 14.5px/1.55 var(--f-sans)!important;color:var(--f-tx2)!important} :root:has(#field) .ten-pin span{box-shadow:0 0 0 2px var(--f-p1),0 0 8px rgba(67,239,204,.35)!important} :root:has(#field) .ten-pin.chk span{box-shadow:0 0 0 2px var(--f-p1),0 0 8px rgba(232,201,126,.3)!important} :root:has(#field) .ten-lbl{font:500 11px/1.2 var(--f-mono)!important;letter-spacing:.12em!important} :root:has(#field) .rcity a{min-height:40px!important;padding:0 12px!important;border-color:var(--f-line2)!important;font:500 11.5px/1 var(--f-mono)!important;letter-spacing:.1em!important} :root:has(#field) .ten-go .btn{min-height:48px!important;letter-spacing:.1em!important} @media(min-width:761px){:root:has(#field) .ten-go .btn{white-space:nowrap}} @media(min-width:761px){:root:has(#field) .ten{grid-template-columns:minmax(0,1fr) 352px!important}} :root:has(#field) .sum h2{font:700 28px/1.15 var(--f-sans)!important;letter-spacing:-.02em!important;margin:8px 0 12px!important} :root:has(#field) .sum p,:root:has(#field) .how p{font:400 15.5px/1.6 var(--f-sans)!important;color:var(--f-tx2)!important} :root:has(#field) .how summary,:root:has(#field) details.more>summary{font:600 11.5px/1 var(--f-mono)!important;letter-spacing:.14em!important;color:var(--f-tx2)!important} :root:has(#field) .pf{font:400 14.5px/1.6 var(--f-sans)!important;color:var(--f-tx2)!important} :root:has(#field) .mv .note{font:400 14.5px/1.55 var(--f-sans)!important;color:var(--f-tx2)!important} :root:has(#field) .card{background:color-mix(in srgb,var(--f-p1) 88%,transparent)!important;border-color:var(--f-line2)!important;padding:24px 24px 22px!important;margin:0 0 12px!important} :root:has(#field) .card h3{font:600 20px/1.25 var(--f-sans)!important;letter-spacing:-.012em!important} :root:has(#field) .card .n{font:500 12px/1 var(--f-mono)!important;color:var(--f-tx3)!important;padding-top:6px!important} :root:has(#field) .card .meta{font:400 14.5px/1.5 var(--f-sans)!important;color:var(--f-tx2)!important;margin-top:4px!important} :root:has(#field) .v{font:600 11px/1 var(--f-mono)!important;letter-spacing:.12em!important;padding:6px 9px!important} :root:has(#field) .card .why{font:400 16px/1.6 var(--f-sans)!important;color:var(--f-tx)!important} :root:has(#field) .card .why b{color:var(--f-tx2)!important} :root:has(#field) .cond{border-left:2px solid var(--f-gold)!important;background:rgba(232,201,126,.05)!important;padding:12px 16px!important;font:400 15px/1.5 var(--f-sans)!important} :root:has(#field) .cond .q,:root:has(#field) details.more .cond-q{font:400 14px/1.55 var(--f-sans)!important;color:var(--f-tx2)!important} :root:has(#field) .act,:root:has(#field) .sib,:root:has(#field) .fn{font:400 14px/1.55 var(--f-sans)!important;color:var(--f-tx2)!important} :root:has(#field) .act b{font:600 11px/1 var(--f-mono)!important;letter-spacing:.12em!important;color:var(--f-tx3)!important} :root:has(#field) .chk{font:500 11.5px/1 var(--f-mono)!important;color:var(--f-tx3)!important} :root:has(#field) .card.sel{border-color:var(--f-mint)!important;box-shadow:inset 2px 0 0 var(--f-mint)!important} :root:has(#field) .em,:root:has(#field) .miss{border-color:var(--f-line2)!important;padding:24px!important;font:400 15px/1.55 var(--f-sans)!important} :root:has(#field) .em input{height:48px;padding:0 14px!important;border-color:var(--f-line2)!important;background:transparent!important} :root:has(#field) .foot{font:500 11.5px/1.6 var(--f-mono)!important;letter-spacing:.1em!important;color:var(--f-tx3)!important} :root:has(#field) .seob h2{color:var(--f-tx)!important} :root:has(#field) .seob p{font:400 15px/1.6 var(--f-sans)!important;color:var(--f-tx2)!important} :root:has(#field) .seob .sbr a{border-color:var(--f-line2)!important;color:var(--f-tx2)!important} @media(max-width:900px){:root:has(#field) #start.on{gap:0!important}:root:has(#field) #start .lead{margin-bottom:24px!important}} @media(max-width:720px){ :root:has(#field) h2.q{font-size:28px!important} :root:has(#field) .hint{font-size:15.5px!important;margin-bottom:22px!important} :root:has(#field) .scr .nav{border-top:1px solid var(--f-line2)!important;background:var(--f-bg)!important;padding-top:12px} :root:has(#field) .card{padding:18px 16px!important} :root:has(#field) main::before{background:linear-gradient(180deg,rgba(11,14,24,.55),rgba(11,14,24,.8))} :root[data-theme="light"]:has(#field) main::before{background:linear-gradient(180deg,rgba(248,246,241,.6),rgba(248,246,241,.85))} } :root[dir="rtl"]:has(#field) :is(.eyebrow,.grp,.btn,.btnp,#start .play b,#start .play i,.v,.how summary,.rcity a,.ten-lbl,#r .ten .ten-k,.drop .orb,.keys,.trail button,.act b,.chk,.foot){font-family:var(--f-ar)!important;letter-spacing:0!important;text-transform:none!important;font-size:14px!important} :root[dir="rtl"]:has(#field) :is(.hint,.lead,#start .lead,.card .why,.card .meta,.sum p,.pf,.cond,.act,.fn,#start .fine){font-family:var(--f-ar)!important;line-height:1.8!important} :root[dir="rtl"]:has(#field) h2.q,:root[dir="rtl"]:has(#field) .sum h2,:root[dir="rtl"]:has(#field) #r .ten .ten-t,:root[dir="rtl"]:has(#field) .card h3{font-family:var(--f-ar)!important;letter-spacing:0!important;line-height:1.4!important;font-weight:600!important} :root[dir="rtl"]:has(#field) .cond{border-left:0!important;border-right:2px solid var(--f-gold)!important} :root[dir="rtl"]:has(#field) .tile .n{right:auto!important;left:12px!important} :root[dir="rtl"]:has(#field) .tile{padding:16px 16px 14px 32px!important} /* ── 7 KARTE ────────────────────────────────────────────────────────────────────────────────────────────────── Bedienung ueber der Karte auf derselben Randachse wie der Kopf (--g). Kaesten nur dort, wo sie ueber der Karte lesbar machen muessen (Suche, Filter, Staedte); Panel: Name in der Textschrift, Status als ruhige Zeile, Ticket / Cost / Who als Zeilen in voller Breite. */ :root #lcol{left:var(--g)!important;top:calc(var(--f-head) + 4px)!important;gap:10px!important} :root #fq{min-height:44px!important;width:320px;border:1px solid var(--f-line2)!important;background:rgba(11,14,24,.78)!important;font:400 15px/1 var(--f-sans)!important;padding:0 14px!important} :root #fq:focus{border-color:var(--f-tx)!important;outline:none} :root #fbtn,:root #navr #listBtn,:root #fitAll,:root #listClose{min-height:44px;padding:0 16px!important;border:1px solid var(--f-line2)!important;background:rgba(11,14,24,.78)!important;font:600 11.5px/1 var(--f-mono)!important;letter-spacing:.14em!important;color:var(--f-tx)!important} :root #navr #listBtn{min-height:36px!important;background:transparent!important} :root #fbtn:hover,:root #navr #listBtn:hover,:root #fitAll:hover,:root #listClose:hover{border-color:var(--f-tx)!important} :root #fitAll{min-height:32px!important;padding:0 12px!important;font-size:11px!important} :root #status{gap:8px!important} :root #status .lab{background:none!important;padding:0!important;font:500 11.5px/1.4 var(--f-mono)!important;letter-spacing:.12em!important;color:var(--f-tx2)!important;text-shadow:0 1px 8px rgba(11,14,24,.9)} :root #status button.lab{min-height:32px;padding:0 12px!important;border:1px solid var(--f-line2)!important;background:rgba(11,14,24,.78)!important;color:var(--f-tx)!important;text-shadow:none} :root #fchips button{min-height:36px!important;border-color:var(--f-mint)!important;background:rgba(11,14,24,.82)!important;font:500 11.5px/1 var(--f-mono)!important;letter-spacing:.1em!important} :root #fsheet{background:var(--f-p1)!important;border:1px solid var(--f-line2)!important;padding:20px 20px 0!important} @media(min-width:761px){:root #fsheet{top:56px!important}} :root #fsheet legend.lab,:root #fsheet .hd .lab{font:600 11px/1 var(--f-mono)!important;letter-spacing:.16em!important;color:var(--f-tx3)!important;margin:0 0 10px;display:block} :root #fsheet fieldset{margin:0 0 20px!important} :root #fsheet .fo{min-height:44px!important;border:1px solid var(--f-line2)!important;font:500 14px/1 var(--f-sans)!important} :root #fsheet .fo[aria-pressed="true"]{border-color:var(--f-mint)!important;background:var(--f-mint-bg)!important;color:var(--f-tx)!important} :root #fsheet .ft{background:var(--f-p1)!important;padding:12px 20px 16px!important;margin:0 -20px!important} :root #fsheet .ft .btn.on,:root #sugd .btn.on{background:var(--f-act)!important;color:var(--f-act-fg)!important;border-color:var(--f-act)!important} :root #fsheet #fclose{font:600 11.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--f-tx2);background:none;border:0;min-height:44px;cursor:pointer} /* Panel */ :root #panel{right:var(--g)!important;top:calc(var(--f-head) + 4px)!important;width:452px!important;max-width:calc(100vw - 2 * var(--g))!important;padding:26px 28px 28px!important;gap:16px!important; background:color-mix(in srgb,var(--f-bg) 93%,transparent)!important;border:1px solid var(--f-line2)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 30px 80px rgba(0,0,0,.35)} :root #panel .top{align-items:flex-start!important} :root #panel #pState{font:500 13px/1.5 var(--f-sans)!important;letter-spacing:0!important;text-transform:none!important;color:var(--f-tx2);padding-top:6px} :root #panel #pState::first-letter{text-transform:uppercase} :root #panel button.x{font:600 11.5px/1 var(--f-mono)!important;letter-spacing:.14em!important;color:var(--f-tx2)!important;margin:-8px 0 0} :root #panel button.x:hover{color:var(--f-tx)!important} :root #panel h2{font:600 26px/1.15 var(--f-sans)!important;letter-spacing:-.018em!important;color:var(--f-tx)!important} :root #panel .why{font:500 14px/1.45 var(--f-sans)!important;color:var(--f-mint)!important} :root #panel .q{font:400 16.5px/1.55 var(--f-sans)!important;color:var(--f-tx2)!important} :root #panel .facts{display:block!important;border-top:0!important;padding-top:0!important;font:400 15px/1.5 var(--f-sans)!important} :root #panel .facts>div{display:grid!important;grid-template-columns:76px minmax(0,1fr);gap:16px!important;padding:12px 0!important;border-top:1px solid var(--f-line)} :root #panel .facts>div:last-child{border-bottom:1px solid var(--f-line)} :root #panel .facts .lab{font:600 11px/1.6 var(--f-mono)!important;letter-spacing:.14em!important;color:var(--f-tx3)!important;padding-top:1px} :root #panel .facts span:not(.lab){color:var(--f-tx)} :root #panel #pTicket{color:var(--f-tx)} :root #panel .foot{font:400 13px/1.5 var(--f-sans)!important;color:var(--f-tx3)!important} :root #panel .sug{font-size:13px!important;color:var(--f-tx3)!important;text-underline-offset:3px} :root #panel .acts{gap:8px!important;margin:0 -28px -28px!important;padding:16px 28px 24px!important;background:color-mix(in srgb,var(--f-bg) 96%,transparent)!important;border-top:1px solid var(--f-line)!important;bottom:-28px!important} :root #panel .acts .btn{min-height:48px!important;font:var(--f-btn-font)!important;letter-spacing:.14em!important;border-color:var(--f-line3)!important;background:transparent!important;color:var(--f-tx)!important} :root #panel .acts .btn:hover{border-color:var(--f-tx)!important} :root #panel .acts .btn.apply{background:var(--f-act)!important;border-color:var(--f-act)!important;color:var(--f-act-fg)!important} :root #panel .acts .btn.apply:hover{background:var(--f-act-h)!important;border-color:var(--f-act-h)!important} :root #panel .rel,:root #panel .here{gap:8px!important;padding-top:14px!important;border-color:var(--f-line)!important} :root #panel .rel .lab,:root #panel .here .lab{font:600 11px/1 var(--f-mono)!important;letter-spacing:.14em!important;color:var(--f-tx3)!important;margin-bottom:2px} :root #panel .rel button,:root #panel .here button{min-height:40px!important;padding:0 12px!important;border-color:var(--f-line2)!important;font:500 14px/1.2 var(--f-sans)!important} :root #panel .rel button.go{border-color:var(--f-mint)!important} /* Staedteleiste, Legende, Hinweis */ :root #cities{gap:6px!important} :root #cities .btn{min-height:40px!important;padding:0 14px!important;white-space:nowrap!important;gap:8px!important;border:1px solid var(--f-line2)!important;background:rgba(11,14,24,.8)!important; font:600 11px/1 var(--f-mono)!important;letter-spacing:.12em!important;color:var(--f-tx)!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} :root #cities .btn small{font:500 11px/1 var(--f-mono)!important;color:var(--f-tx3)!important;letter-spacing:.04em} :root #cities .btn:hover{border-color:var(--f-tx)!important} :root #cities .btn.on{background:var(--f-act)!important;border-color:var(--f-act)!important;color:var(--f-act-fg)!important} :root #cities .btn.on small{color:rgba(11,14,24,.6)!important} :root #legend{right:var(--g)!important;background:rgba(11,14,24,.72)!important;padding:8px 12px!important;gap:16px!important} :root #legend .lab{font:500 11px/1 var(--f-mono)!important;letter-spacing:.12em!important;color:var(--f-tx2)!important} :root #hint{right:var(--g)!important} :root #hint .lab{font:500 11.5px/1.4 var(--f-mono)!important;letter-spacing:.06em!important;background:rgba(11,14,24,.72)!important;padding:6px 10px!important;color:var(--f-tx2)!important} :root #fits{right:var(--g)!important;border-color:var(--f-mint)!important;background:rgba(11,14,24,.86)!important;padding:10px 14px!important} :root .pin-tip{font:500 13px/1.3 var(--f-sans)!important;border-color:var(--f-line2)!important;padding:7px 10px!important} /* Liste */ :root #list{padding-top:calc(var(--f-head) + 104px)!important;padding-left:var(--g)!important;padding-right:var(--g)!important;background:var(--f-bg)!important} :root #list .in{max-width:var(--f-wide);margin:0 auto} :root #list h2{font:600 30px/1.15 var(--f-sans)!important;letter-spacing:-.02em!important} :root #list .row{padding:18px 0!important;column-gap:28px!important;border-color:var(--f-line)!important} :root #list .row b{font:600 16px/1.3 var(--f-sans)!important} :root #list .row .w{font:400 14px/1.5 var(--f-sans)!important;color:var(--f-tx2)!important} :root #list .row .st{font:600 11px/1 var(--f-mono)!important;letter-spacing:.12em!important} :root #list .row .ap{min-height:36px!important;padding:0 14px!important;background:var(--f-act)!important;border-color:var(--f-act)!important;color:var(--f-act-fg)!important;font:var(--f-btn-font)!important;letter-spacing:.14em!important} :root #list .row .ap:hover{background:var(--f-act-h)!important} :root #list .empty,:root #list .head p,:root #list>.in>p{font:400 15px/1.55 var(--f-sans)!important;color:var(--f-tx2)!important} /* Hell */ :root[data-theme="light"] #fq,:root[data-theme="light"] #fbtn,:root[data-theme="light"] #fitAll,:root[data-theme="light"] #status button.lab,:root[data-theme="light"] #cities .btn,:root[data-theme="light"] #fchips button,:root[data-theme="light"] #legend,:root[data-theme="light"] #hint .lab,:root[data-theme="light"] #fits,:root[data-theme="light"] #listClose{background:rgba(248,246,241,.9)!important} :root[data-theme="light"] #cities .btn.on{background:var(--f-act)!important} :root[data-theme="light"] #cities .btn.on small{color:rgba(248,246,241,.7)!important} :root[data-theme="light"] #status .lab{text-shadow:0 1px 8px rgba(248,246,241,.95)} :root[data-theme="light"] #panel{box-shadow:0 30px 80px rgba(16,18,22,.12)} /* Handy: das Panel als Blatt von unten */ @media (max-width:760px){ :root #lcol{left:var(--g)!important;right:var(--g)!important;top:calc(var(--f-head) + 2px)!important} :root #fq{width:auto} :root #panel{left:0!important;right:0!important;width:auto!important;max-width:none!important;top:auto!important;padding:10px 20px 0!important;gap:12px!important;border-left:0!important;border-right:0!important;border-bottom:0!important} :root #panel h2{font-size:22px!important} :root #panel .q{font-size:15.5px!important} :root #panel .facts>div{grid-template-columns:64px minmax(0,1fr);padding:10px 0!important} :root #panel .acts{margin:0 -20px!important;padding:12px 20px calc(14px + env(safe-area-inset-bottom))!important;bottom:0!important} :root #list{padding-top:calc(var(--f-head) + 120px)!important} :root #cities .btn{min-height:44px!important} } :root[dir="rtl"] #panel{right:auto!important;left:var(--g)!important} :root[dir="rtl"] #lcol{left:auto!important;right:var(--g)!important} :root[dir="rtl"] #legend,:root[dir="rtl"] #hint,:root[dir="rtl"] #fits{right:auto!important;left:var(--g)!important} :root[dir="rtl"] #panel #pState,:root[dir="rtl"] #panel h2,:root[dir="rtl"] #panel .q,:root[dir="rtl"] #panel .facts{font-family:var(--f-ar)!important;letter-spacing:0!important} :root[dir="rtl"] #panel .q,:root[dir="rtl"] #panel .facts{line-height:1.75!important} :root[dir="rtl"] :is(#panel .facts .lab,#panel .acts .btn,#panel button.x,#cities .btn,#fbtn,#listBtn,#fitAll,#status .lab,#legend .lab,#fsheet legend.lab,#list .row .ap,#list .row .st){font-family:var(--f-ar)!important;letter-spacing:0!important;text-transform:none!important;font-size:13.5px!important} @media (max-width:760px){:root[dir="rtl"] #panel{left:0!important;right:0!important}:root[dir="rtl"] #lcol{left:var(--g)!important;right:var(--g)!important}} /* ── 8 PROGRAMME, HUBS, STATISTIK ───────────────────────────────────────────────────────────────────────────── Programmseite, Karten-Panel und Listen teilen dieselbe Behandlung: Labels Mono 11 in Grau (nicht Gold), Werte in der Textschrift, Status als Punkt + Wort, Betraege tabellarisch, Quellen als kurze Mono-Zeile, Apply = Hauptaktion. */ :root .ap-sky{background:radial-gradient(110% 60% at 62% 0%,#131828 0%,var(--f-bg) 62%)!important} body.light .ap-sky{background:var(--f-bg)!important} body.light{--bg:var(--f-bg)} :root .crumb{font:500 11.5px/1.5 var(--f-mono)!important;letter-spacing:.14em!important;color:var(--f-tx3)!important;padding-top:32px!important} :root .crumb a{color:var(--f-tx3)!important} :root .crumb a:hover{color:var(--f-tx)!important} :root .pg-hero{padding:24px 0 40px!important;border-bottom:1px solid var(--f-line)!important} :root .pg-hero h1{font-size:clamp(36px,4.8vw,60px)!important;margin:0 0 16px!important;max-width:18ch!important} :root .pg-hero .lede,:root header.hero .lede,:root .hero .lede{font:400 18px/1.55 var(--f-sans)!important;color:var(--f-tx2)!important;max-width:58ch!important} :root .pg-hero .lede em{color:var(--f-gold)!important} :root .kicker{font:600 11.5px/1 var(--f-mono)!important;letter-spacing:.2em!important;color:var(--f-mint)!important} /* Kurzfakten */ :root .gl{gap:8px!important;margin:32px 0 8px!important} :root .gl .tile{border:1px solid var(--f-line)!important;background:var(--f-p1)!important;padding:18px 18px 16px!important} :root .gl .tile::after{display:none} :root .gl .k{font:600 11px/1.2 var(--f-mono)!important;letter-spacing:.14em!important;color:var(--f-tx3)!important} :root .gl .v{font:600 21px/1.25 var(--f-sans)!important;letter-spacing:-.012em!important;margin-top:10px!important;color:var(--f-tx)!important;font-variant-numeric:tabular-nums} :root .gl .tile.long .v,:root .gl .tile.txt .v{font-size:16.5px!important;line-height:1.35!important} :root .gl .tile.ok .v{color:var(--f-mint)!important} :root .gl .s{font:400 14px/1.5 var(--f-sans)!important;color:var(--f-tx3)!important;margin-top:6px!important} /* Aktionen */ :root .acts{gap:8px!important;margin-top:32px!important} :root .acts.acts-top{margin:0 0 28px!important} :root .pg-main .btn,:root .side .btn,:root .stick .btn,:root .mapcta .btn,:root .mapbar .btn,:root .gp-al .btn{min-height:48px;display:inline-flex;align-items:center;padding:0 20px!important;font:var(--f-btn-font)!important;letter-spacing:.14em!important;border:1px solid var(--f-line3)!important;color:var(--f-tx)!important;background:transparent!important} :root .pg-main .btn:hover,:root .side .btn:hover{border-color:var(--f-tx)!important} :root :is(.pg-main,.side,.stick,.mapcta,.mapbar,.gp-al,.wrap) .btn.pri{background:var(--f-act)!important;border-color:var(--f-act)!important;color:var(--f-act-fg)!important;opacity:1!important} :root :is(.pg-main,.side,.stick,.mapcta,.mapbar,.gp-al,.wrap) .btn.pri:hover{background:var(--f-act-h)!important;border-color:var(--f-act-h)!important} :root .acts .btn.pri::before,:root .stick .btn.pri::before{display:none!important} :root .btn.q{border-color:transparent!important;color:var(--f-tx2)!important;padding:0 8px!important} :root .btn.q:hover{color:var(--f-tx)!important} /* Kurz-Liste (In short) */ :root .ins{border-top:1px solid var(--f-line)!important} :root .ins dl{grid-template-columns:104px minmax(0,1fr)!important;column-gap:24px!important} :root .ins dt{font:600 11px/1.5 var(--f-mono)!important;letter-spacing:.14em!important;color:var(--f-tx3)!important;padding:16px 0 14px!important;border-color:var(--f-line)!important} :root .ins dd{font:400 16px/1.55 var(--f-sans)!important;padding:14px 0!important;border-color:var(--f-line)!important;color:var(--f-tx)} :root .ins .dl{color:var(--f-coral)!important;font-family:var(--f-mono)!important;font-size:14px!important} :root .ins .st{color:var(--f-mint)!important} :root .ins .st:before{background:var(--f-mint)!important} :root .ins .st.closed{color:var(--f-tx3)!important} :root .ins .st.closed:before{background:var(--f-closed)!important} :root .ins .ins-more,:root .more a,:root .maplink a,:root .mmcap a{color:var(--f-tx)!important;text-decoration:none;border-bottom:1px solid var(--f-line3)} :root .ins .ins-more:hover,:root .more a:hover{border-bottom-color:var(--f-tx)} :root .checked{font:500 11.5px/1.9 var(--f-mono)!important;letter-spacing:.12em!important;color:var(--f-tx3)!important;margin-top:20px!important} :root .checked a{color:var(--f-tx2)!important} /* Abschnitte */ :root .wrap .sec{padding:40px 0 8px!important;margin-top:40px!important;border-top:1px solid var(--f-line)!important} :root .ins>.sec:first-child,:root .ix-top>.sec:first-child{border-top:0!important;margin-top:0!important;padding-top:32px!important} :root html:not([lang="ar"]) .sec>h2,:root .sec>h2{font:600 11.5px/1 var(--f-mono)!important;letter-spacing:.18em!important;color:var(--f-tx2)!important;margin:0 0 20px!important} :root .detail p,:root .hub p{font:400 17px/1.65 var(--f-sans)!important;color:var(--f-tx);max-width:66ch!important} :root .hub p{text-align:start!important;hyphens:manual!important} :root .detail dl{grid-template-columns:104px minmax(0,1fr)!important;column-gap:24px!important;row-gap:16px!important} :root .detail dt{font:600 11px/1.5 var(--f-mono)!important;letter-spacing:.14em!important;color:var(--f-tx3)!important;padding-top:4px!important} :root .detail dd{font:400 16px/1.6 var(--f-sans)!important} :root .quote{border-left:1px solid var(--f-line2)!important;padding:4px 0 4px 20px!important;margin:0 0 24px!important} :root .quote p{font:400 16.5px/1.6 var(--f-sans)!important;color:var(--f-tx)!important} :root .quote .q{font:500 12px/1.6 var(--f-mono)!important;letter-spacing:.04em!important;color:var(--f-tx3)!important;margin-top:6px;display:block} :root .quote .q a{color:var(--f-tx2)!important} /* Seitenspalte: Kartenbild und Alarm */ :root .mm{border:1px solid var(--f-line2)!important;background:var(--f-bg)!important} :root .mm:after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)!important} :root .mmcap{font:500 11.5px/1.5 var(--f-mono)!important;letter-spacing:.12em!important;color:var(--f-tx3)!important;margin-top:12px!important} :root .mmlive{font:600 11px/1 var(--f-mono)!important;letter-spacing:.12em!important;border-color:var(--f-line3)!important;background:rgba(11,14,24,.86)!important;padding:11px 14px!important} :root .mmlive:hover{border-color:var(--f-tx)!important} :root .side .gp-al,:root .pg-main>.gp-al{margin-top:32px!important} /* Ist das fuer dich? */ :root .fit{border:1px solid var(--f-line)!important;background:var(--f-p1)!important;padding:12px 24px 24px!important} :root .fit .qq p{font:600 16px/1.4 var(--f-sans)!important;margin:16px 0 10px!important} :root .seg button,:root .cmp-tools button,:root .lt button,:root .cmp-none button{font:500 14px/1.2 var(--f-sans)!important;padding:11px 14px!important;border:1px solid var(--f-line2)!important} :root .seg button:hover,:root .cmp-tools button:hover,:root .lt button:hover{border-color:var(--f-line3)!important} :root .seg button[aria-pressed="true"],:root .cmp-tools button[aria-pressed="true"],:root .lt button[aria-pressed="true"]{border-color:var(--f-mint)!important;background:var(--f-mint-bg)!important} :root .fit .res{border-left-width:2px!important;padding:6px 0 6px 18px!important;margin-top:24px!important} :root .fit .res b{font:600 17px/1.35 var(--f-sans)!important} :root .fit .res p,:root .fit .src,:root .fit .note{font:400 15px/1.55 var(--f-sans)!important;color:var(--f-tx2)!important} :root .fit .src{font-size:14px!important;color:var(--f-tx3)!important} /* Hubs: Listenzeilen wie Open calls */ :root .wrap .row{column-gap:28px!important;padding:20px 0!important;border-color:var(--f-line)!important} :root .wrap .row h3{font:600 17px/1.3 var(--f-sans)!important;letter-spacing:-.01em!important;margin:0 0 6px!important} :root .wrap .row .k{font:500 11.5px/1.5 var(--f-mono)!important;letter-spacing:.1em!important;color:var(--f-tx3)!important} :root .wrap .row .t{font:400 15px/1.55 var(--f-sans)!important;color:var(--f-tx2)!important} :root .wrap .row .w{font:600 12.5px/1.5 var(--f-mono)!important;color:var(--f-coral)!important} :root .wrap .row .w small,:root .wrap .row .w.n{color:var(--f-tx3)!important;font-weight:500!important} :root .tl a{font:500 11.5px/1 var(--f-mono)!important;letter-spacing:.1em!important;padding:9px 12px!important;border-color:var(--f-line2)!important;color:var(--f-tx2)!important} :root .tl a:hover,:root .tl a.on{color:var(--f-tx)!important;border-color:var(--f-tx)!important} :root .mapcta{border:1px solid var(--f-line2)!important;background:var(--f-p1)!important;padding:16px 16px 16px 24px!important;margin:28px 0 0!important;gap:16px 24px!important} :root .mapcta p{font:400 16px/1.5 var(--f-sans)!important;color:var(--f-tx)!important} :root .mapbar{border-top:1px solid var(--f-line2)!important} :root .stick{border-top:1px solid var(--f-line2)!important;background:color-mix(in srgb,var(--f-bg) 94%,transparent)!important} :root .stick .btn.pri{min-height:52px!important;justify-content:center} :root table.cmp th{font:600 11px/1.3 var(--f-mono)!important;letter-spacing:.12em!important;color:var(--f-tx3)!important;padding:10px 12px 10px 0!important;border-bottom:1px solid var(--f-line2)!important} :root table.cmp td{padding:14px 12px 14px 0!important;border-color:var(--f-line)!important;font:400 15px/1.5 var(--f-sans)!important} :root table.cmp td small{font-size:13.5px!important;color:var(--f-tx3)!important} :root .pfaq summary,:root .faq summary{font:600 16px/1.45 var(--f-sans)!important} :root .pfaq details,:root .faq{padding:18px 0!important;border-color:var(--f-line)!important} :root .pfaq details p,:root .faq p{font:400 16px/1.6 var(--f-sans)!important;color:var(--f-tx2)!important} :root ul.dl li{padding:12px 0!important;border-color:var(--f-line)!important} :root ul.dl li b{color:var(--f-coral)!important;font:600 12.5px/1.4 var(--f-mono)!important} :root ul.also{gap:8px 24px!important;font:400 15.5px/1.5 var(--f-sans)!important} :root .also-note,:root .dd-src{color:var(--f-tx3)!important} /* Statistik: die breite Tabelle nutzt die volle Breite, Linien nur waagerecht, Zahlen auf einer Achse */ :root .hub:has(.gp-stw){max-width:none!important} :root .gp-stw{margin:8px 0 0!important} :root .gp-stt{min-width:960px!important;font:400 15px/1.3 var(--f-sans)!important} :root .gp-stt th,:root .gp-stt td{border:0!important;border-bottom:1px solid var(--f-line)!important;padding:13px 0 13px 16px!important} :root .gp-stt thead th{font:600 12px/1.3 var(--f-sans)!important;color:var(--f-tx2)!important;border-bottom:1px solid var(--f-line3)!important;padding:0 0 12px 16px!important;text-wrap:balance;vertical-align:bottom!important} :root .gp-stt th[scope=row],:root .gp-stt thead th:first-child{padding-left:0!important;width:150px} :root .gp-stt th[scope=row]{font:600 15px/1.3 var(--f-sans)!important} :root .gp-stt td a,:root .gp-stt th a{text-decoration:none!important;border-bottom:1px solid var(--f-line2)} :root .gp-stt td a:hover,:root .gp-stt th a:hover{border-bottom-color:var(--f-tx)} :root .gp-stt td.z{opacity:1!important;color:var(--f-tx3)} :root .gp-stt tr.tot th,:root .gp-stt tr.tot td{border-top:1px solid var(--f-line3)!important;border-bottom:0!important;font-weight:700!important} :root .gp-stt td:nth-last-child(-n+2),:root .gp-stt thead th:nth-last-child(-n+2){background:rgba(243,241,234,.025)} body.light .gp-stt td:nth-last-child(-n+2),body.light .gp-stt thead th:nth-last-child(-n+2){background:rgba(16,18,22,.025)} :root .gp-stt td:nth-last-child(2),:root .gp-stt thead th:nth-last-child(2){padding-left:24px!important} :root .gp-stt td:last-child,:root .gp-stt thead th:last-child{padding-right:16px!important} :root .gp-stk{gap:8px!important;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))!important} :root .gp-stk li{border:1px solid var(--f-line)!important;background:var(--f-p1);padding:20px!important} :root .gp-stk b{font:800 36px/1 var(--f-disp)!important;font-stretch:112%!important;letter-spacing:-.01em;font-variant-numeric:tabular-nums} :root .gp-stk span{font:400 14.5px/1.45 var(--f-sans)!important;color:var(--f-tx2)!important;margin-top:10px!important} @media(max-width:959px){ :root .ins dl,:root .detail dl{grid-template-columns:84px minmax(0,1fr)!important;column-gap:16px!important} :root .pg-hero h1{font-size:clamp(32px,8.4vw,44px)!important} :root .pg-hero .lede{font-size:16.5px!important} :root .detail p,:root .hub p{font-size:16px!important} } :root[dir="rtl"] :is(.ins dt,.detail dt,.gl .k,.sec>h2,.crumb,.checked,.mmcap,.row .k,.tl a,.kicker){font-family:var(--f-ar)!important;letter-spacing:0!important;text-transform:none!important;font-size:13px!important} :root[dir="rtl"] :is(.detail p,.hub p,.ins dd,.row .t,.pg-hero .lede){font-family:var(--f-ar)!important;line-height:1.85!important} :root[dir="rtl"] .quote{border-left:0!important;border-right:1px solid var(--f-line2)!important;padding:4px 20px 4px 0!important} /* ── 9 CONNECT ──────────────────────────────────────────────────────────────────────────────────────────────── Ein Raster (Lesespalte 680 + volle Inhaltsbreite 960 fuer Beispiel und Test). Der Test spricht in derselben Familie wie jede grosse Aussage der Seite (Archivo, versal) - keine zweite Display-Stimme; seine Besonderheit kommt aus Groesse, Zahlen und Matrix. */ :root body>header:not([class])~main{max-width:960px!important} :root body>header:not([class])~main .hero .kick,:root body>header:not([class])~main .bench .kick,:root body>header:not([class])~main .kick{font:600 11.5px/1 var(--f-mono)!important;letter-spacing:.2em!important;color:var(--f-mint)!important;margin:0 0 20px!important} :root body>header:not([class])~main .bench .kick{margin-top:96px!important} :root body>header:not([class])~main .hero h1{margin:0 0 24px!important} :root body>header:not([class])~main .hero{padding-top:96px!important} :root body>header:not([class])~main .hero .lede{font-size:19px!important;max-width:42ch!important;margin:0 0 32px!important} :root body>header:not([class])~main .cta{height:52px!important;padding:0 24px!important;font:var(--f-btn-font)!important;letter-spacing:.14em!important;text-transform:uppercase;transform:none!important;gap:12px!important} :root body>header:not([class])~main .cta.pri{background:var(--f-act)!important;color:var(--f-act-fg)!important;border:1px solid var(--f-act)!important} :root body>header:not([class])~main .cta.pri:hover{background:var(--f-act-h)!important} :root body>header:not([class])~main .cta.sec{border:1px solid var(--f-line3)!important;color:var(--f-tx)!important;font:var(--f-btn-font)!important} :root body>header:not([class])~main .cta.sec:hover{border-color:var(--f-tx)!important} :root body>header:not([class])~main .cta .arr{font-size:14px!important} :root body>header:not([class])~main .facts{gap:10px 24px!important;margin-top:24px!important} :root body>header:not([class])~main .facts li{font:500 11.5px/1.4 var(--f-mono)!important;letter-spacing:.12em!important;color:var(--f-tx3)!important} :root body>header:not([class])~main .facts li:before{width:5px!important;height:5px!important;margin-right:10px!important} :root body>header:not([class])~main .demo{margin:64px 0 0!important;border:1px solid var(--f-line2)!important;background:var(--f-p1)!important} :root body>header:not([class])~main .demo:before{background:linear-gradient(90deg,transparent,var(--f-mint),transparent)!important;opacity:.6} :root body>header:not([class])~main .dq{padding:28px 32px 24px!important;border-color:var(--f-line)!important} :root body>header:not([class])~main .da{padding:20px 32px 28px!important} :root body>header:not([class])~main .dl{font:600 11px/1 var(--f-mono)!important;letter-spacing:.16em!important;color:var(--f-tx3)!important;margin:0 0 12px!important} :root body>header:not([class])~main .dq p.q{font:600 22px/1.3 var(--f-sans)!important;letter-spacing:-.015em} :root body>header:not([class])~main .demo .row{padding:16px 0!important;border-color:var(--f-line)!important} :root body>header:not([class])~main .demo .row b{font:600 16.5px/1.3 var(--f-sans)!important} :root body>header:not([class])~main .demo .row p{font:400 15px/1.55 var(--f-sans)!important;color:var(--f-tx2)!important} :root body>header:not([class])~main .dsrc{font:400 13.5px/1.5 var(--f-sans)!important;color:var(--f-tx3)!important} /* Der Test */ :root body>header:not([class])~main .bench h2.bh{font:800 clamp(34px,4.6vw,56px)/.98 var(--f-disp)!important;font-stretch:118%!important;text-transform:uppercase;letter-spacing:.002em!important;max-width:none!important;margin:0 0 24px!important} :root body>header:not([class])~main .bench h2.bh em{color:var(--f-mint)!important} :root body>header:not([class])~main .bench .bl{font:400 17px/1.65 var(--f-sans)!important;color:var(--f-tx2)!important;max-width:62ch!important;margin:0 0 40px!important} :root body>header:not([class])~main .bt{gap:8px!important;margin:0 0 8px!important} :root body>header:not([class])~main .bench .tile{border:1px solid var(--f-line)!important;background:var(--f-p1)!important;padding:24px 24px 22px!important} :root body>header:not([class])~main .bench .tile .big{font:800 40px/1 var(--f-disp)!important;font-stretch:112%!important;letter-spacing:-.01em!important;font-variant-numeric:tabular-nums;gap:12px!important;margin:0 0 16px!important} :root body>header:not([class])~main .bench .tile .big span{color:var(--f-tx3)!important} :root body>header:not([class])~main .bench .tile .big i{font:400 20px/1 var(--f-sans)!important;color:var(--f-tx3)!important} :root body>header:not([class])~main .bench .tile p:not(.big){font:400 14.5px/1.55 var(--f-sans)!important;color:var(--f-tx2)!important} :root body>header:not([class])~main .bw{border:1px solid var(--f-line)!important;background:var(--f-p1)!important;padding:24px 24px 12px!important} :root body>header:not([class])~main .bsw{border-color:var(--f-line2)!important;margin:0 0 16px!important} :root body>header:not([class])~main .bsw button{font:600 11.5px/1 var(--f-mono)!important;letter-spacing:.14em!important;text-transform:uppercase;padding:0 18px!important;color:var(--f-tx2)!important} :root body>header:not([class])~main .bsw button.on{background:var(--f-act)!important;color:var(--f-act-fg)!important} :root body>header:not([class])~main .bsw button[data-m="w"].on{background:var(--f-mint)!important;color:#06110F!important} :root body>header:not([class])~main .bleg{font:500 11px/1 var(--f-mono)!important;letter-spacing:.12em!important;color:var(--f-tx3)!important;margin:0 0 16px!important} :root body>header:not([class])~main .br{grid-template-columns:minmax(150px,236px) 1fr 56px!important;gap:20px!important;padding:10px 0!important;border-color:var(--f-line)!important} :root body>header:not([class])~main .bn{font:500 14px/1.3 var(--f-sans)!important} :root body>header:not([class])~main .bs{gap:3px!important} :root body>header:not([class])~main .bs i{border-color:rgba(243,241,234,.18)!important} :root body>header:not([class])~main .bk{font:800 22px/1 var(--f-disp)!important;font-stretch:110%;font-variant-numeric:tabular-nums} :root body>header:not([class])~main .bnote{font:400 14px/1.6 var(--f-sans)!important;color:var(--f-tx2)!important;margin:16px 0 12px!important} :root body>header:not([class])~main .bc{margin:32px 0 0!important} :root body>header:not([class])~main h2:not(.bh):not(.gp-keep){font:600 24px/1.25 var(--f-sans)!important;letter-spacing:-.018em!important;margin:72px 0 24px!important;padding-top:0!important;border-top:0!important} :root body>header:not([class])~main .steps{border-color:var(--f-line)!important} :root body>header:not([class])~main .step{padding:28px 24px!important;border-color:var(--f-line)!important} :root body>header:not([class])~main .step .n{font:800 40px/1 var(--f-disp)!important;font-stretch:112%;color:var(--f-mint)!important;margin:0 0 16px!important} :root body>header:not([class])~main .step h3,:root body>header:not([class])~main .tool h3,:root body>header:not([class])~main .alt h3{font:600 17px/1.3 var(--f-sans)!important;margin:0 0 8px!important} :root body>header:not([class])~main .tools,:root body>header:not([class])~main .alt{gap:8px!important} :root body>header:not([class])~main .tool,:root body>header:not([class])~main .alt div{border-color:var(--f-line)!important;background:var(--f-p1)!important;padding:24px!important} :root body>header:not([class])~main .asks{border-color:var(--f-line)!important} :root body>header:not([class])~main .asks li{padding:16px 0!important;font:400 16.5px/1.5 var(--f-sans)!important;color:var(--f-tx)!important;border-color:var(--f-line)!important} :root body>header:not([class])~main .ask-go a{font:600 11px/1 var(--f-mono)!important;letter-spacing:.12em!important;color:var(--f-tx2)!important;border-bottom-color:var(--f-line2)!important} :root body>header:not([class])~main .ask-go a:hover{color:var(--f-tx)!important;border-bottom-color:var(--f-mint)!important} @media (max-width:760px){:root body>header:not([class])~main .dq,:root body>header:not([class])~main .da{padding-left:20px!important;padding-right:20px!important}:root body>header:not([class])~main .bench .kick{margin-top:64px!important}:root body>header:not([class])~main .br{grid-template-columns:1fr 44px!important;gap:8px 12px!important}} /* ── 10 REDAKTION ───────────────────────────────────────────────────────────────────────────────────────────── Learn, How we check, Support, Terms, Privacy, Accessibility, 404: Lesespalte 680, Fliesstext 17/1.65 in 400 (nicht 300), Zwischentitel 22/600, Abschnitte durch Abstand und eine Haarlinie, Merksaetze mit Mint-Strich statt Gold. */ :root body>header:not([class])~main:not([class]){padding-bottom:64px} :root body>header:not([class])~main:not([class])>:not(table):not(pre):not(.wide):not(figure){max-width:var(--f-read)} :root body>header:not([class])~main:not([class])>:is(.bench,.demo,.steps,.tools,.alt,.asks,section){max-width:none} :root body>header:not([class])~main:not([class])>section>:is(p,.lede,.bl){max-width:var(--f-read)} :root body>header:not([class])~main:not([class])>h1:first-of-type{margin:96px 0 24px!important;font-size:clamp(40px,5.2vw,64px)!important} :root body>header:not([class])~main p,:root body>header:not([class])~main li{font:400 17px/1.65 var(--f-sans)!important;color:var(--f-tx2)!important} :root body>header:not([class])~main .lede,:root body>header:not([class])~main p.lead{font:400 19px/1.55 var(--f-sans)!important;color:var(--f-tx)!important} :root body>header:not([class])~main:not([class]) h2:not(.bh){font:600 22px/1.3 var(--f-sans)!important;letter-spacing:-.015em!important;margin:56px 0 16px!important;padding-top:32px!important;border-top:1px solid var(--f-line)!important;color:var(--f-tx)} :root body>header:not([class])~main h3{font:600 17px/1.35 var(--f-sans)!important;margin:32px 0 8px!important} :root body>header:not([class])~main .mono{font:500 11.5px/1.6 var(--f-mono)!important;letter-spacing:.12em!important;color:var(--f-tx3)!important} :root body>header:not([class])~main :not(main)>a:not(.cta):not(.btn),:root body>header:not([class])~main p a{color:var(--f-tx)!important;text-decoration:underline!important;text-decoration-color:var(--f-line3)!important;text-underline-offset:3px} :root body>header:not([class])~main :not(main)>a:not(.cta):not(.btn):hover,:root body>header:not([class])~main p a:hover{text-decoration-color:var(--f-tx)!important} :root body>header:not([class])~main strong,:root body>header:not([class])~main b{color:var(--f-tx);font-weight:600} :root .stamp{border-left:2px solid var(--f-mint)!important;padding:4px 0 4px 20px!important;margin:32px 0!important} :root .stamp p{color:var(--f-tx)!important} :root body{background:var(--f-bg)} :root body:has(>header:not([class])){background:var(--f-bg)!important} /* Learn (nav.top-Familie) */ :root header.hero{padding:72px 0 48px!important;border-color:var(--f-line)!important} :root header.hero h1{font-size:clamp(40px,5.2vw,64px)!important;max-width:15ch!important;margin:0 0 24px!important} :root .lc-grid{gap:72px!important} :root .calc2 .q,:root .toc-h,:root section.grp>h2,:root .calc-h,:root .cats th{font:600 11px/1.4 var(--f-mono)!important;letter-spacing:.14em!important;color:var(--f-tx3)!important} :root .chips:not(#chips) .chip{font:600 14px/1 var(--f-mono)!important;color:var(--f-tx2)!important} :root .chips:not(#chips) .chip[aria-pressed="true"]{color:var(--f-mint)!important;border-bottom-color:var(--f-mint)!important} :root .big{font:800 clamp(44px,6vw,64px)/1 var(--f-disp)!important;font-stretch:112%!important;letter-spacing:-.01em!important} :root .big em{color:var(--f-mint)!important} :root .rows{font:400 15px/1.5 var(--f-sans)!important} :root .rows .v{font:600 13px/1.5 var(--f-mono)!important;font-variant-numeric:tabular-nums} :root .note,:root .grp-note,:root .sub{font:400 15px/1.6 var(--f-sans)!important;color:var(--f-tx2)!important} :root .qcard .kicker{color:var(--f-mint)!important} :root .qcard h2{font:600 30px/1.15 var(--f-sans)!important;letter-spacing:-.02em!important} :root details.term summary{padding:18px 0!important} :root details.term summary .t-n{font:600 18px/1.3 var(--f-sans)!important} :root details.term summary .t-l{font:400 15px/1.45 var(--f-sans)!important;color:var(--f-tx3)!important} :root details.term[open] summary .t-n{color:var(--f-mint)!important} :root details.term .t-b p,:root .term p{font:400 16.5px/1.65 var(--f-sans)!important} :root .onmap{border-left:2px solid var(--f-mint)!important;background:var(--f-p1)!important;padding:14px 18px!important;font:400 15.5px/1.6 var(--f-sans)!important} :root .onmap b{color:var(--f-mint)!important} :root aside a:hover{border-left-color:var(--f-mint)!important} :root mark{background:rgba(67,239,204,.18)!important} body.light mark{background:rgba(10,124,104,.14)!important} /* ── 11 FUSS ───────────────────────────────────────────────────────────────────────────────────────────────── Unterseiten: eine Linkzeile und eine Impressumszeile auf der Inhaltskante, mit Luft darueber; Handy: Links in zwei Spalten. */ :root .gp-site{padding-top:24px!important;margin-top:64px!important;border-top:1px solid var(--f-line)!important} :root .gp-site-links{gap:10px 24px!important;font:400 14px/1.5 var(--f-sans)!important} :root .gp-site-links a{color:var(--f-tx2)!important} :root .gp-site-links a:hover{color:var(--f-tx)!important;text-decoration:none!important} :root .gp-site-legal{font:400 12.5px/1.6 var(--f-sans)!important;color:var(--f-tx3)!important;margin-top:16px!important} :root footer.foot{border-color:var(--f-line)!important;padding:40px 0 64px!important;color:var(--f-tx3)!important} :root footer.foot p{font:400 14px/1.6 var(--f-sans)!important;color:var(--f-tx3)!important} :root .foot-mono{font:500 11px/1.9 var(--f-mono)!important;letter-spacing:.12em!important} :root .foot-mono a{color:var(--f-tx2)!important;text-decoration:none!important} :root .foot-mono a:hover{color:var(--f-tx)!important} @media (max-width:760px){ :root .gp-site-links{display:grid!important;grid-template-columns:1fr 1fr;gap:0 20px!important} :root .gp-site-links a{min-height:40px!important;justify-content:flex-start!important;border-bottom:1px solid var(--f-line)} :root .gp-site{margin-top:48px!important} } /* ── 12 ZUSTAENDE ───────────────────────────────────────────────────────────────────────────────────────────── Fokus: 2 px Mint (Tinte bei Tag) mit 3 px Abstand - ueberall gleich. Auswahl: Mint-Grund 9 %. Uebergaenge 160-200 ms, nur Farbe und Linie, keine Spruenge (translateY-Hover entfernt). Leere Zustaende in der Textschrift, nie als Mono-Fussnote. */ :root :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--f-mint)!important;outline-offset:3px!important;border-radius:0!important} :root input:focus-visible,:root select:focus-visible,:root textarea:focus-visible{outline-offset:0!important} :root ::selection{background:rgba(67,239,204,.26)} :root .ap-empty,:root .cmp-none p,:root #list .empty,:root:has(#field) .miss{font:400 16px/1.6 var(--f-sans)!important;color:var(--f-tx2)!important} :root #loading{font:600 11.5px/1 var(--f-mono)!important;letter-spacing:.18em!important;text-transform:uppercase;color:var(--f-tx3)!important;background:var(--f-bg)!important} :root .gp-al .okm,:root #sugOk{font:500 15px/1.5 var(--f-sans)!important;color:var(--f-mint)!important} @media (prefers-reduced-motion:reduce){:root *{scroll-behavior:auto!important}} /* ── 13 HELL ────────────────────────────────────────────────────────────────────────────────────────────────── Warmes Papier statt kaltem Weiss, Tinte statt Grau, dieselben Rollen: Tinte = Hauptaktion, dunkles Mint = aktiv, dunkles Gold = Daten. */ body.light,:root[data-theme="light"] body{background:var(--f-bg)!important} body.light .gp-al:not(.gp-al-band),:root[data-theme="light"] .gp-al:not(.gp-al-band){background:var(--f-p1)!important} :root[data-theme="light"] #nav::before{background:linear-gradient(180deg,rgba(248,246,241,.94) 0%,rgba(248,246,241,.6) 55%,rgba(248,246,241,0) 100%)} :root[data-theme="light"] .gp-proof #gp-bignum{color:var(--f-tx)!important} body.light .ap-hero::after{background:linear-gradient(180deg,rgba(248,246,241,.4) 0%,rgba(248,246,241,0) 26%,rgba(248,246,241,0) 70%,var(--f-bg) 100%),linear-gradient(90deg,rgba(248,246,241,.92) 0%,rgba(248,246,241,.55) 38%,rgba(248,246,241,0) 62%)!important} body.light .ap-hero{background:var(--f-bg)!important} :root[data-theme="light"] .bs i{border-color:rgba(16,18,22,.22)!important} :root[data-theme="light"] .bsw button[data-m="w"].on{color:#fff!important} :root[data-theme="light"] #panel .acts .btn.apply,body.light .ap-apply:not(.ap-web){background:var(--f-act)!important;border-color:var(--f-act)!important;color:var(--f-act-fg)!important} /* Fuss der Startseite am Handy: die 44-px-Trefferflaeche (gp.css HIT) ohne negativen Rand - sonst ruecken die Zeilen zusammen */ @media (max-width:768px){ :root footer.gp-foot .gp-fcol a,:root footer.gp-foot .gp-brchip{margin-block:0!important;min-height:40px!important;justify-content:flex-start!important;align-items:center!important} :root footer.gp-foot .gp-brchip{min-height:44px!important;padding:0!important} :root footer.gp-foot .gp-flegal a,:root footer.gp-foot .foot-txt a{margin-block:0!important;min-height:36px!important} :root[dir="rtl"] .gp-cap{top:calc(var(--f-head) + 54px)!important} } /* Match am Handy: die Leiste bleibt 56 hoch (wie bisher) und nichts rutscht beim Scrollen unter sie */ @media (max-width:760px){:root header.bar{height:56px!important}} :root:has(header.bar){scroll-padding-top:72px} /* Match-Leiste bei 360-420 px: alles in einer Zeile, nichts ueber den Rand (wie bisher: Zeichen, drei Woerter, Zaehler, Thema) */ @media (max-width:420px){ :root header.bar{padding:0 16px!important;gap:10px!important} :root header.bar .gp-nav{gap:14px!important} :root header.bar .counter{border-left:0!important;padding:0 0 0 2px!important} :root header.bar .counter b{font-size:16px!important} :root header.bar .tg{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important} :root[dir="rtl"] header.bar .gp-nav{gap:12px!important} :root[dir="rtl"] header.bar .gp-nav a{font-size:13.5px!important} } @media (max-width:400px){:root[dir="rtl"] header.bar a.l>svg{display:none!important}} @media (max-width:420px){ :root[dir="rtl"] header.bar{padding:0 10px!important;gap:6px!important} :root[dir="rtl"] header.bar .gp-nav{gap:10px!important} :root[dir="rtl"] header.bar .gp-nav a{font-size:13px!important} } /* Open calls, Tablet: der Held steht auf derselben Inhaltskante wie die Liste */ @media (max-width:1236px){:root .ap-hero .hero{padding-left:var(--gp-pad,28px)!important;padding-right:var(--gp-pad,28px)!important}} /* 404: dieselbe Aktionsfamilie */ :root body>header:not([class])~main>a{min-height:48px!important;padding:0 22px!important;font:var(--f-btn-font)!important;letter-spacing:.14em!important;background:var(--f-act)!important;color:var(--f-act-fg)!important;border:1px solid var(--f-act)!important;text-decoration:none!important} :root body>header:not([class])~main>a:hover{background:var(--f-act-h)!important} :root body>header:not([class])~main>a.ghost{background:transparent!important;color:var(--f-tx)!important;border-color:var(--f-line3)!important} :root body>header:not([class])~main>a.ghost:hover{border-color:var(--f-tx)!important} /* Betraege und Fristen brechen nicht mitten im Wort: Umbruch nur, wenn eine Zeile sonst ueberlaeuft (vorher: overflow-wrap:anywhere) */ :root :is(.ap-c .ap-txt,.ins dd,.detail p,.detail dd,.row .t,.gl .v,#panel .facts span,.card .why,.quote p){overflow-wrap:break-word!important;word-break:normal!important;hyphens:manual!important} :root :is(.ap-when .dl,.ins .dl,.gp-dldate,.row .w,.counter b,#gp-bignum){white-space:nowrap} /* Match-Start: das Feld hinter den Worten noch leiser, das runde Fenster traegt die Karte */ :root:has(#start.on) #field{opacity:.24!important}