/* ══ Freihafen-Schriften, inline woff2 ══ */ /* ══════════════════════════════════════════════════ TOKEN — jede Größe, Sperrung und jeder Abstand hat genau eine Quelle. ══════════════════════════════════════════════════ */ :root{ --field:#1325FA;--field-2:#0C18B4;--night:#060B33;--night-2:#0D1547; --sink:#D5DAFF;--surface:#E4E8FF;--surface-raise:#EEF1FF; --ink:#131A3D;--muted:#3E486B; --accent:#2536C8;--cyan:#1FE9FF;--foam:#F4F6FF;--mist:#D5DAFF;--dusk:#9AA6E8; --line:rgba(19,26,61,.16);--line-2:rgba(19,26,61,.30); --ok:#0F6B34;--warn:#8A5A00;--bad:#B4232A; --shadow:0 1px 2px rgba(6,11,51,.10),0 14px 30px -14px rgba(6,11,51,.42); --shadow-stark:0 2px 4px rgba(6,11,51,.12),0 26px 52px -22px rgba(6,11,51,.55); --t-label:.78rem;--t-mini:.875rem;--t-body:1rem;--t-lead:1.125rem; --t-h4:1.3125rem;--t-h3:1.5625rem;--t-h2:2rem;--t-h1:2.75rem; --tr-s:.1em;--tr-m:.06em;--tr-l:.025em;--tr-xl:.005em; --sp-eng:8px;--sp-1:20px;--sp-2:36px;--sp-3:64px; --r:12px;--r-lg:20px;--r-ctl:4px; --disp:"Oswald";--body:"DM Sans";--word:"Smooch Sans"; --satz:54ch; } *{box-sizing:border-box} html,body{margin:0;max-width:100%;overflow-x:clip} body{font:var(--t-body)/1.6 var(--body);color:var(--ink);background:var(--field);-webkit-text-size-adjust:100%} h1,h2,h3,h4{font-family:var(--disp);font-weight:600;margin:0;text-wrap:balance} p{margin:0 0 .55em}button,input,select,textarea{font:inherit}button{cursor:pointer} .tabnums,table.t td,table.t th,.stat .n,.wahl .pr,.frist .rest{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} .zahl{text-align:right;white-space:nowrap} .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} :focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:2px} .card :focus-visible,.side :focus-visible,.leiste :focus-visible,.mailwrap :focus-visible,.ixcol :focus-visible,.telefon .tinhalt :focus-visible{ outline:3px solid var(--night);outline-offset:3px;box-shadow:0 0 0 3px var(--foam)} @media (forced-colors:active){:focus-visible{outline-color:Highlight}} .skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--night);color:var(--cyan);padding:10px 16px;border-radius:0 0 var(--r-ctl) 0} .skip:focus{left:0} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}} /* ══ Steg nach intern ══ Der einzige Bedienpunkt, der nicht zur gezeigten Site gehört. Er ist deshalb bewusst fremd gehalten: neutrales Grau statt Freihafen-Farben, Monospace statt der Hausschriften, am äußersten Rand angeschlagen statt im Layout. Wer ihn sieht, soll ihn sofort als Werkzeug lesen und nicht als Teil der Oberfläche. Rechte Kante mittig — dort kollidiert er weder mit dem Masthead oben noch mit dem mobilen Sticky-CTA unten. */ .internsteg{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:250; writing-mode:vertical-rl;text-orientation:mixed; background:#2b2f38;color:#e9ebf1;border:1px solid #7d8494;border-right:0; border-radius:8px 0 0 8px;padding:16px 7px;text-decoration:none; font-family:ui-monospace,Menlo,monospace;font-size:var(--t-label);font-weight:500; line-height:1;letter-spacing:.14em;text-transform:lowercase; box-shadow:-3px 0 10px rgba(6,11,51,.35)} .internsteg:hover{background:#3c424e;color:#fff} .internsteg:focus-visible{outline:3px solid var(--cyan);outline-offset:3px} /* Auf schmalen Geraeten reichen die Listenzeilen bis an die Kante, der Steg liegt dort unvermeidlich ueber ihrem rechten Rand. Deshalb schmaler halten — und weil ein Fehlgriff sonst den Stand im Prototypen kostet, oeffnet der Steg in einem eigenen Tab (target im Markup). */ @media(max-width:720px){ .internsteg{padding:12px 7px;letter-spacing:.1em;opacity:.86} .internsteg:hover,.internsteg:focus-visible{opacity:1} } @media print{.internsteg{display:none}} #stage{max-width:1180px;margin:0 auto;min-height:100dvh; background:linear-gradient(180deg,var(--field) 0%,var(--field) 56%,var(--field-2) 100%)} /* ⚠⚠⚠ CODEX-BEFUND fix8q R3: DIESE REGEL ALLEIN VERBIRGT NICHTS. Sie blendet nur aus, was das Attribut `hidden` traegt — und das setzte bisher ausschliesslich `zeigen()`. Ohne JavaScript, mit blockiertem Skript oder wenn das Hauptskript vor dem ersten `zeigen()` abbricht, stand jede der 109 Ansichten untereinander im Dokument, darunter `t-sepa` mit echter IBAN und Platzhalter-Verwendungszweck: eine Ueberweisung, die niemand zuordnen kann. Der Router-Riegel (ATTRAPPE_GESPERRT) greift in genau diesem Fall nicht, weil er selbst JavaScript ist. Deshalb steht `hidden` jetzt schon im Markup — an allen Ansichten ausser `z1-start`. Der skriptlose Auslieferungszustand ist damit die Startseite und sonst nichts; `zeigen()` korrigiert beim Laden auf die verlangte Ansicht. ⚠ NEUE ANSICHTEN (section.screen) MUESSEN `hidden` MITBRINGEN — der CI-Schritt „Attrappen im Ausgangs-Markup verborgen" in .github/workflows/ci.yml erzwingt das. */ .screen[hidden]{display:none} /* ══ Masthead ══ */ /* B1 (Gesamt-Audit 19.08.2026): sticky auf JEDER Breite — bis hier klebte die Leiste nur in der 720px-Query, auf dem Schreibtisch scrollte sie weg (Startseite 11,6 Bildschirmhoehen ohne Rueckweg zur Navigation). Die Query unten setzt nur noch das engere padding. */ .mh{background:var(--night);border-bottom:2px solid var(--cyan);padding:10px var(--sp-1);position:sticky;top:0;z-index:45} .mh .inner{width:100%;max-width:960px;margin-inline:auto;display:flex;align-items:center;gap:16px;flex-wrap:wrap} .mh .logo{display:inline-flex;align-items:center;gap:9px;background:none;border:0;padding:4px;color:inherit} .mh .logo .tor{width:20px;height:24px;color:var(--cyan);flex:none} .mh .logo .wm{font-family:var(--word);font-weight:700;font-size:var(--t-h4);letter-spacing:var(--tr-l);color:var(--foam);line-height:1} .mh .logo .wm .small{font-family:var(--disp);font-weight:500;font-size:var(--t-label);letter-spacing:var(--tr-s);text-transform:uppercase;color:var(--dusk);margin-left:6px;vertical-align:middle} .mh nav{display:flex;gap:4px;flex-wrap:wrap}.mh nav button,.mh nav a{color:var(--foam);background:none;border:0;border-bottom:2px solid transparent;font-weight:500;font-size:var(--t-mini);padding:6px 8px 4px;min-height:32px}.mh nav button:hover,.mh nav button.on,.mh nav a:hover,.mh nav a.on{color:var(--cyan);border-color:var(--cyan)} .mh .sp{margin-left:auto;display:flex;gap:var(--sp-eng);align-items:center;flex-wrap:wrap} .mh.app{background:var(--night-2);border-bottom-color:var(--cyan)} .mh.bo{background:#12172B;border-bottom-color:var(--dusk)}.mh.bo nav button:hover,.mh.bo nav button.on,.mh.bo nav a:hover,.mh.bo nav a.on{color:var(--mist);border-color:var(--mist)} .mh.schmal nav{display:none} /* Das Postfach ist ein fremdes Programm und traegt darum keine Freihafen-Marke */ .mh.mailkopf{background:#2A2F3C;border-bottom-color:#6f7484} .mailmarke{display:flex;flex-direction:column;gap:1px} .mailmarke .app{font-family:var(--disp);font-size:var(--t-lead);color:var(--foam);letter-spacing:var(--tr-l);text-transform:uppercase} .mailmarke .konto{font-size:var(--t-label);color:#C4C9D6;font-family:ui-monospace,Menlo,monospace} .navzahl{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 7px; margin-left:7px;border-radius:99px;background:var(--mist);color:var(--night);font-size:var(--t-label);font-weight:700} .mh .schritt{font-family:var(--disp);text-transform:uppercase;letter-spacing:var(--tr-m);font-size:var(--t-label);color:var(--dusk)} /* ══ Seite ══ */ .page{padding:var(--sp-2) var(--sp-1) var(--sp-3);color:var(--foam)} .wrapn{max-width:960px;margin:0 auto;display:flex;flex-direction:column;gap:var(--sp-2)} .wrapn.eng{max-width:600px} .wrapn.breit{max-width:1080px} .kopfblock{display:flex;flex-direction:column;gap:var(--sp-eng)} /* Krume, Titel und Vorspann sind eine Gruppe — enger als der Seitenrhythmus */ .wrapn > .crumb + h1,.wrapn > .eyebrow + h1{margin-top:calc(var(--sp-eng) - var(--sp-2))} .wrapn > h1 + .sub{margin-top:calc(var(--sp-1) - var(--sp-2))} .wrapn > .sub + div:not(.card):not(.grid):not(.band){margin-top:calc(var(--sp-1) - var(--sp-2))} .eyebrow{font-family:var(--disp);text-transform:uppercase;letter-spacing:var(--tr-s);font-size:var(--t-label);color:var(--cyan)} .page h1{color:var(--foam);text-transform:uppercase;letter-spacing:var(--tr-xl);line-height:1.02; font-size:clamp(1.75rem,5.2vw,var(--t-h1))} .page .sub{color:var(--foam);font-size:var(--t-lead);max-width:var(--satz);margin:0;text-wrap:pretty} .crumb{font-size:var(--t-mini);color:var(--mist)}.crumb button,.crumb a{background:none;border:0;color:var(--cyan);text-decoration:underline;padding:2px 0;font-size:inherit} .zurueck{align-self:flex-start;background:none;border:0;color:var(--cyan);text-decoration:underline;font-size:var(--t-mini);padding:6px 2px;min-height:32px} /* ══ Karten — drei Stufen ══ */ .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:var(--sp-1) 22px;color:var(--ink)} .card.raise{background:var(--surface-raise)} .card.stark{border-radius:var(--r-lg);padding:var(--sp-2) 38px;box-shadow:var(--shadow-stark)} .card.leise{background:none;border:0;box-shadow:none;padding:0;color:var(--foam)} .card.leise .kh{color:var(--foam)} .card.leise .kh::before{background:var(--cyan)} .card .kh{position:relative;padding-top:11px;margin-bottom:.25em;font-size:var(--t-h3);line-height:1.14;letter-spacing:var(--tr-xl)} .card.stark .kh{font-size:var(--t-h2)} .card .kh::before{content:"";position:absolute;top:0;left:0;width:32px;height:3px;background:var(--accent)} .card .ku{font-size:var(--t-h4);line-height:1.2;margin:var(--sp-1) 0 .2em} .card .card .kh{font-size:var(--t-h4);padding-top:0} .card .card .kh::before{display:none} .card p,.card li,.callout,.sys,.faq .a{max-width:var(--satz);text-wrap:pretty} .note{color:var(--muted);font-size:var(--t-body)} .mini{font-size:var(--t-mini)} /* ══ Linkfarbe ══ ⚠⚠ Der Stil hatte fuer GAR KEINE Grundfarbe. Wer nicht in Brotkrume, Fusszeile, Kopfleiste, Spaltenindex oder einem Knopf sass, bekam das Standardblau des Browsers (#0000EE) — auf --surface unauffaellig (7,74:1), auf --field 1,20:1 und auf --night 2,03:1, also unlesbar. Gemessen am 22.08.2026 auf / und /konferenz/programm/ (Befund Mike). ⚠ Das nackte `a` traegt Spezifitaet (0,0,1) und verliert damit gegen jede vorhandene Regel — die Knoepfe faerben sich weiter selbst. Auf farbigem Grund braucht es trotzdem `:not(.btn)`: `.band a` (0,1,1) schluege sonst das blosse `.btn` (0,1,0). */ a{color:var(--accent)} .wrapn > .note a:not(.btn),.band a:not(.btn),.card.leise a:not(.btn){color:var(--cyan)} /* ⚠⚠ `.note` ist fuer das INNERE der Karte gebaut (--muted auf --surface, 7,37:1). Haengt sie direkt am Seitenrahmen, sitzt sie auf --field und faellt auf 1,14:1 — der Absatz und die Sprungleiste auf /konferenz/programm/ waren praktisch unsichtbar. */ .wrapn > .note{color:var(--mist)} .grid{display:grid;gap:var(--sp-1)} .g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)} @media(max-width:820px){.g3,.g4{grid-template-columns:1fr 1fr}} @media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}} /* Vollbreites Nachtband — höchstens einmal je Ansicht */ .band{margin-inline:calc(-1 * var(--sp-1));padding:var(--sp-3) var(--sp-1);background:var(--night);color:var(--foam)} .band .inner{max-width:960px;margin-inline:auto;display:flex;flex-direction:column;gap:var(--sp-1)} .band h2,.band h3{color:var(--foam);font-family:var(--disp);font-size:var(--t-h2);line-height:1.1;letter-spacing:var(--tr-xl)} .band p{color:var(--mist);max-width:var(--satz);text-wrap:pretty} .band .card{background:var(--night-2);border-color:rgba(244,246,255,.16);color:var(--foam);box-shadow:none} .band .card .kh,.band .card .ku{color:var(--foam)} .band .card .note{color:var(--dusk)} .band .btn.sec{color:var(--foam);border-color:rgba(244,246,255,.6)} .band .btn.sec:hover{background:var(--foam);color:var(--night);border-color:var(--foam)} /* ══ Knöpfe ══ */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-eng);min-height:46px;padding:11px 22px; background:var(--cyan);color:var(--night);border:2px solid var(--night);border-radius:var(--r-ctl); font-weight:700;font-size:var(--t-body);text-decoration:none;line-height:1.2} .btn:hover{background:var(--night);color:var(--cyan);border-color:var(--cyan)} .btn:disabled,.btn:disabled:hover{cursor:not-allowed;background:var(--accent);color:#fff;border-color:var(--accent)} .btn.sec{background:transparent;color:var(--accent);border-color:var(--accent);border-width:1px;font-weight:600} .btn.sec:hover{background:var(--accent);color:#fff} .btn.night{border-color:var(--cyan)} .btn.ghost{background:transparent;color:var(--foam);border-color:rgba(244,246,255,.55);border-width:1px;font-weight:600} .btn.ghost:hover{background:var(--foam);color:var(--night)} .btn.klein{min-height:38px;padding:7px 14px;font-size:var(--t-mini)} .btn.gefahr{background:transparent;color:var(--bad);border-color:var(--bad);border-width:1px} .btn.gefahr:hover{background:var(--bad);color:#fff} .btn[disabled],.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed} .btn.voll{width:100%} a.btn{text-decoration:none} .btnrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:var(--sp-1);align-items:center} .wrapn > .btnrow .btn.sec,.page > .btnrow .btn.sec{background:transparent;color:var(--foam);border-color:rgba(244,246,255,.6)} .wrapn > .btnrow .btn.sec:hover,.page > .btnrow .btn.sec:hover{background:var(--foam);color:var(--night);border-color:var(--foam)} .gefahrzone{margin-top:var(--sp-1);padding-top:14px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:16px;align-items:center} .btnlink{background:none;border:0;color:var(--accent);text-decoration:underline;min-height:32px;padding:4px 2px;font-size:var(--t-mini)} .btnlink.gefahr{color:var(--bad)} /* ══ Chips und Status — Wärme bleibt der Fotografie ══ */ .chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--disp);text-transform:uppercase; letter-spacing:var(--tr-m);font-size:var(--t-label);padding:4px 11px;border-radius:999px; border:1px solid var(--line-2);color:var(--muted);background:var(--surface-raise)} .chip::before{content:"";width:.5em;height:.5em;border-radius:50%;background:currentColor;flex:none} .chip.nodot::before{display:none} .chip.ok{color:var(--ok)} .chip.warn{color:var(--warn)} .chip.bad{color:var(--bad)} .chip.cyan{color:var(--night);background:var(--cyan);border-color:var(--cyan)} .chip.voll{background:var(--accent);color:#fff;border-color:var(--accent)} .stat{display:flex;gap:var(--sp-2);flex-wrap:wrap} .stat .s{flex:1 1 130px} .stat .n{font-family:var(--disp);font-size:var(--t-h2);color:var(--accent);line-height:1.05} .stat .s.leit .n{font-size:var(--t-h1);color:var(--ink)} .stat .l{font-size:var(--t-label);color:var(--muted);text-transform:uppercase;letter-spacing:var(--tr-m)} .callout{border-left:3px solid var(--accent);background:var(--surface-raise);padding:13px 16px;border-radius:0 var(--sp-eng) var(--sp-eng) 0;font-size:var(--t-body);color:var(--ink)} .callout.ok{border-left-color:var(--ok)} .callout.warn{border-left-color:var(--warn)} .callout.bad{border-left-color:var(--bad)} .sys{font-size:var(--t-mini);color:var(--muted);background:var(--sink);border-left:3px solid var(--accent);border-radius:0 var(--sp-eng) var(--sp-eng) 0;padding:11px 14px;margin:var(--sp-1) 0} .sys b{color:var(--ink)} /* ══ Frist — ein Bauteil, überall gleich ══ */ .frist{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;background:var(--surface-raise); border-left:3px solid var(--warn);border-radius:0 var(--sp-eng) var(--sp-eng) 0;padding:14px 16px} .frist .lb{font-family:var(--disp);text-transform:uppercase;letter-spacing:var(--tr-m);font-size:var(--t-label);color:var(--warn);flex:1 1 100%} .frist .rest{font-family:var(--disp);font-size:var(--t-h3);color:var(--ink);line-height:1} .frist .zusatz{font-size:var(--t-mini);color:var(--muted);flex:1 1 100%;max-width:var(--satz)} /* ══ Formular ══ */ .feld{display:flex;flex-direction:column;gap:5px;margin:var(--sp-1) 0} .feld label,.feldlabel{font-size:var(--t-mini);font-weight:600;color:var(--ink)} .feld input,.feld textarea,.feld select,.inp{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-ctl); padding:12px 14px;color:var(--ink);font-size:var(--t-body);min-height:48px;width:100%} .feld textarea{min-height:92px} .feld .hint{font-size:var(--t-mini);color:var(--muted)} .feld.fehler input,.feld.fehler textarea{border:2px solid var(--bad)} .feld .err{font-size:var(--t-mini);color:var(--bad);font-weight:600} .check{display:flex;gap:10px;align-items:flex-start;font-size:var(--t-body);color:var(--ink);min-height:32px;padding:6px 0} .check input{width:22px;height:22px;flex:none;margin-top:2px;accent-color:var(--accent)} .wahl{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);background:var(--sink); border-radius:var(--sp-eng);padding:14px 16px;margin:var(--sp-eng) 0;min-height:52px} .wahl.on{border:2px solid var(--accent);padding:13px 15px} .wahl input{width:22px;height:22px;flex:none;margin-top:2px;accent-color:var(--accent)} .wahl .pr{margin-left:auto;font-weight:700;white-space:nowrap} fieldset{border:0;margin:0;padding:0;min-width:0} legend{padding:0} /* ══ Schrittleiste — der ganze Weg ══ */ .schrittleiste{display:flex;gap:6px;flex-wrap:wrap;list-style:none;margin:0;padding:0} .schrittleiste li{display:flex;align-items:center;gap:6px;font-size:var(--t-mini);color:var(--mist);padding:4px 0} .schrittleiste li .num{width:26px;height:26px;border-radius:99px;border:1px solid var(--mist);display:grid;place-items:center; font-family:var(--disp);font-size:var(--t-mini);flex:none} .schrittleiste li.on{color:var(--cyan);font-weight:700} .schrittleiste li.on .num{background:var(--cyan);color:var(--night);border-color:var(--cyan)} .schrittleiste li.fertig .num{background:var(--mist);color:var(--night)} .schrittleiste li.spaeter{opacity:.62} .schrittleiste li.spaeter .num{border-style:dashed;background:none} .schrittleiste li+li::before{content:"\203a";color:var(--mist);margin-right:2px} .card .schrittleiste li{color:var(--muted)} .card .schrittleiste li .num{border-color:var(--line-2)} .card .schrittleiste li.on{color:var(--accent)} .card .schrittleiste li.on .num{background:var(--accent);color:#fff;border-color:var(--accent)} .card .schrittleiste li.fertig .num{background:var(--muted);color:#fff;border-color:var(--muted)} .card .schrittleiste li+li::before{color:var(--muted)} /* ══ Listen und Tabellen ══ */ .list{display:flex;flex-direction:column} .list .row{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:28px;row-gap:6px;align-items:center; max-width:660px;padding:13px 2px;border-top:1px solid var(--line)} .list .row:first-child{border-top:0} .list .row > *:last-child{justify-self:end} .list.breit .row{max-width:none} .scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch} table.t{border-collapse:collapse;width:100%;font-size:var(--t-mini);min-width:560px;table-layout:fixed} table.t th,table.t td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere} table.t th{font-family:var(--disp);text-transform:uppercase;letter-spacing:var(--tr-m);font-size:var(--t-label);color:var(--muted);font-weight:600} table.t .zahl{text-align:right} table.t .c-aktion{width:210px;white-space:nowrap;overflow-wrap:normal} table.t .c-konto{width:120px} table.t .c-aktion .btn{background:transparent;color:var(--accent);border:1px solid var(--accent);min-height:34px;padding:5px 11px;font-weight:600} table.t .c-aktion .btn:hover{background:var(--accent);color:#fff} .karte-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap} .stand{font-size:var(--t-label);color:var(--muted);font-variant-numeric:tabular-nums} /* Vorzeile: die Art des Programmpunkts steht ueber der Zeit */ .vorzeile{display:block;font-family:var(--disp);text-transform:uppercase;letter-spacing:var(--tr-m); font-size:var(--t-label);color:var(--muted);margin-bottom:2px} .programm .row{grid-template-columns:minmax(0,1fr) auto;max-width:none} @media(min-width:721px){.programm .row{grid-template-columns:132px minmax(0,1fr) auto;column-gap:24px;max-width:820px} .programm .row .zeit{font-weight:700;font-variant-numeric:tabular-nums}} .faq details{border-top:1px solid var(--line)} .faq details:last-child{border-bottom:1px solid var(--line)} .faq summary{padding:16px 2px;font-weight:700;cursor:pointer;min-height:32px;color:var(--ink);font-size:var(--t-lead)} .faq .a{padding:0 2px 16px;font-size:var(--t-body);color:var(--muted)} /* ══ Bildflächen — ruhig, unbeschriftet ══ */ .ph{position:relative;display:block;border-radius:var(--sp-eng);overflow:hidden; background:linear-gradient(158deg,#D4DBFB 0%,#C3CCF4 100%);border:1px solid var(--line-2)} .ph.v169{aspect-ratio:16/9}.ph.v43{aspect-ratio:4/3}.ph.v11{aspect-ratio:1/1}.ph.v219{aspect-ratio:21/9} .ph.rund{border-radius:50%;width:80px;height:80px;margin:0 auto} /* ══ Hero ══ */ .hero{position:relative;overflow:hidden;border-radius:var(--r-lg);min-height:520px;display:flex;align-items:center; justify-content:center;text-align:center;color:var(--foam);box-shadow:var(--shadow-stark);background:var(--night)} .hero .phlayer{position:absolute;inset:0;background:radial-gradient(120% 88% at 50% 32%,#17225F 0%,#0A1146 62%,var(--night) 100%)} .hero .in{position:relative;z-index:2;padding:var(--sp-3) 26px} .hero .tor{width:66px;height:78px;color:var(--foam);margin-bottom:var(--sp-1)} .hero h1{color:var(--foam);font-size:clamp(2rem,6.6vw,4rem);text-transform:uppercase;letter-spacing:var(--tr-xl);line-height:1.02;margin-bottom:.2em} .hero .slogan{font-style:italic;font-size:var(--t-h4);color:var(--foam);margin:0 0 var(--sp-1);text-wrap:balance} .hero .zusage{font-size:var(--t-lead);font-weight:500;color:var(--cyan);margin:0 0 var(--sp-eng);text-wrap:balance} .hero .unter{font-size:var(--t-body);color:var(--mist);margin:0 auto var(--sp-1);max-width:52ch;text-wrap:pretty} .hero .datum{font-family:var(--disp);font-weight:500;font-size:var(--t-body);letter-spacing:var(--tr-m);text-transform:uppercase;color:var(--mist)} .hero .micro{font-size:var(--t-mini);color:var(--mist);margin-top:14px} .hero .btnrow{margin-top:var(--sp-2);justify-content:center} @media(max-width:820px){.hero{min-height:440px}} /* ══ Belegungsstand ══ */ .slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--sp-1);margin-top:var(--sp-1);align-items:end} .slots .sl{display:flex;flex-direction:column;gap:var(--sp-eng)} .slots .sn{font-weight:700;font-size:var(--t-lead)} .slots .sb{display:flex;gap:5px} .slots .sb span{width:36px;height:12px;border-radius:99px;background:transparent;border:1px solid var(--line-2)} .slots .sb span.on{background:var(--accent);border-color:var(--accent)} .slots .sb[data-unbekannt] span{background:var(--sink);border-color:var(--sink)} .slots .sm{font-size:var(--t-mini);color:var(--ink);font-weight:600} /* ══ Personen ══ */ .pers{display:grid;grid-template-columns:1fr;gap:0} .pers .k{display:grid;grid-template-columns:56px 1fr;column-gap:16px;align-items:center;text-align:left; border-top:1px solid var(--line);padding:var(--sp-1) 2px} .pers .k:first-child{border-top:0} .pers .k > .ph.rund{grid-row:1/-1;width:56px;height:56px;margin:0} .pers .nm,.pers .ro,.pers .th{grid-column:2} .pers .nm{font-weight:700;font-size:var(--t-lead)} .pers .ro{font-size:var(--t-mini);color:var(--muted)} @media(min-width:721px){.pers{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));column-gap:var(--sp-2)} /* Vier Headliner sollen in EINER Reihe stehen — ein umgebrochenes Raster liest sich als unfertige Liste, nicht als Aufstellung. */ .pers.vier{grid-template-columns:repeat(4,1fr);column-gap:var(--sp-1)} /* Nebeneinander ist keine Liste — die Trennlinien der Listenform entfallen. */ .pers.vier .k{border-top:0}} /* Der Gastgeber steht vor den Gaesten: eigene Zeile, groesseres Portraet. Er belegt bewusst KEINEN der vier Headliner-Plaetze — er laedt sie ein. */ .gastgeber{display:grid;grid-template-columns:80px minmax(0,1fr);column-gap:var(--sp-1);row-gap:4px; align-items:center;padding-bottom:var(--sp-1);margin-bottom:var(--sp-1);border-bottom:1px solid var(--line)} .gastgeber > .ph.rund{grid-row:1/3;margin:0} .gastgeber .nm,.gastgeber .ro{grid-column:2} .gastgeber .nm{font-family:var(--disp);font-weight:600;font-size:var(--t-h3);line-height:1.15} .gastgeber .ro{font-size:var(--t-mini);color:var(--muted)} .kopf{width:48px;height:48px;flex:none;display:block;color:var(--accent)} .kopf svg{display:block;width:100%;height:100%} .kopf.lg{width:80px;height:80px}.kopf.xl{width:150px;height:150px;margin:0 auto} .person{display:flex;gap:12px;align-items:center} .qr{width:126px;height:126px;background:repeating-conic-gradient(var(--ink) 0 25%,transparent 0 50%) 50%/14px 14px; border:8px solid #fff;border-radius:var(--sp-eng);box-shadow:var(--shadow);flex:none} /* ══ Kontakte-Hub ══ */ .hub{display:grid;grid-template-columns:320px 1fr;gap:var(--sp-1);align-items:start} .side{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;color:var(--ink)} .side .me{display:flex;gap:12px;align-items:center;padding:14px 16px;background:var(--surface-raise);border:0;border-bottom:1px solid var(--line);width:100%;text-align:left;min-height:56px} .side .me > span{min-width:0;overflow:hidden} .side .me .kopf{width:42px;height:42px} .side .sect{font-family:var(--disp);text-transform:uppercase;letter-spacing:var(--tr-m);font-size:var(--t-label);color:var(--muted);padding:14px 16px 4px} .side .ent{display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:center;padding:11px 16px; border:0;border-top:1px solid var(--line);width:100%;background:none;text-align:left;min-height:56px} .side .ent > span{min-width:0;overflow:hidden} .side .ent:hover{background:var(--surface-raise)} .side .ent.on{background:var(--surface-raise);box-shadow:inset 4px 0 0 var(--accent)} .side .ent .kopf{width:40px;height:40px} .side .ent .nm,.side .ent .pv{display:block;max-width:100%} .side .ent .nm{font-weight:700;font-size:var(--t-body);line-height:1.25} .side .ent .pv{color:var(--muted);font-size:var(--t-mini);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .badge{font-family:var(--disp);font-size:var(--t-mini);min-width:26px;height:26px;padding:0 8px;border-radius:999px; background:var(--accent);color:#fff;display:inline-flex;align-items:center;justify-content:center} .thead{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:14px} .bubble{display:flex;margin:var(--sp-eng) 0} .msg{max-width:78%;padding:11px 15px;border-radius:14px;font-size:var(--t-body);line-height:1.45} .msg.them{background:var(--sink);border:1px solid var(--line);border-top-left-radius:3px} .msg.me{background:var(--accent);color:#fff;margin-left:auto;border-top-right-radius:3px} .daysep{text-align:center;font-size:var(--t-label);color:var(--muted);font-family:var(--disp);letter-spacing:var(--tr-m);text-transform:uppercase;margin:var(--sp-1) 0 var(--sp-eng)} .zurueckzeile{display:none} /* ══ Karte ══ */ /* Weltkarte der Treffen-Orte. Punktraster als Inline-SVG, keine externe Anfrage und keine Kachel-Dienste — der Prototyp bleibt eine Datei. */ .weltkarte{position:relative;border-radius:var(--sp-eng);border:1px solid var(--line-2);overflow:hidden; background:linear-gradient(160deg,#C9D2F5,#AEBBEE);color:var(--field)} .weltkarte svg{width:100%;height:auto;display:block} .weltkarte .lbl{position:absolute;left:10px;right:10px;bottom:10px;background:var(--night);color:var(--cyan); font-size:var(--t-label);padding:4px 9px;border-radius:12px;line-height:1.35} /* Auf schmalen Geraeten schrumpft die Karte auf unter 100 px Hoehe — dort wuerde die Beschriftung sie fast vollstaendig verdecken. Deshalb steht sie dann unter der Karte statt darin. */ @media(max-width:720px){ .weltkarte .lbl{position:static;display:block;margin-top:6px;left:auto;right:auto;bottom:auto; /* ⚠⚠⚠ Hier stand `var(--ink-2)` — ein Token, das es in :root NIE gab. Die Deklaration ist damit ungueltig, und die Farbe kam per Vererbung aus `.weltkarte{color:var(--field)}`: Schrift und Grund trugen DENSELBEN Wert, Kontrast 1,00:1. Der Hinweis war auf dem Telefon vollstaendig weg. --foam statt --mist, weil das die kleinste Schrift der Seite ist (--t-label). */ background:none;color:var(--foam);padding:0;border-radius:0} .weltkarte{border:0;background:none;overflow:visible} .weltkarte svg{border-radius:var(--sp-eng);border:1px solid var(--line-2); background:linear-gradient(160deg,#C9D2F5,#AEBBEE)} } .map{height:180px;border-radius:var(--sp-eng);border:1px solid var(--line-2);position:relative;overflow:hidden; background:linear-gradient(158deg,#C9D2F7,#AEB9EE)} .map .lbl{position:absolute;left:10px;bottom:10px;background:var(--night);color:var(--cyan); font-size:var(--t-label);letter-spacing:var(--tr-l);padding:5px 11px;border-radius:99px} .map .pin{position:absolute;width:15px;height:15px;border-radius:50% 50% 50% 0;background:var(--accent);transform:rotate(-45deg);border:2px solid #fff} /* ══ Leiste ══ */ .leiste{display:flex;gap:var(--sp-2);flex-wrap:wrap;background:var(--surface);border:1px solid var(--line); border-radius:var(--r);box-shadow:var(--shadow);padding:14px 18px;color:var(--ink);align-items:center} .leiste .el{display:flex;gap:12px;align-items:center;font-size:var(--t-body);flex-wrap:wrap} .leiste .lb{font-family:var(--disp);text-transform:uppercase;letter-spacing:var(--tr-m);font-size:var(--t-label);color:var(--muted)} .leiste .sep{width:1px;align-self:stretch;background:var(--line)} @media(max-width:720px){.leiste .sep{display:none}} /* ══ Feste Leisten am Telefon ══ */ .sticky{display:none} .formfuss{display:none} /* Das Gegenstueck der festen Leiste am Desktop — exakt gegenlaeufig geschaltet, damit an jeder Breite genau ein Weiter-Knopf steht (Mac-Befund P1, 30.07.). */ .weiterdesk{display:flex;gap:16px;align-items:center;justify-content:space-between; flex-wrap:wrap} .weiterdesk .summe{font-size:var(--t-mini);line-height:1.3;color:var(--muted)} .weiterdesk .summe b{display:block;font-size:var(--t-lead);font-variant-numeric:tabular-nums;color:var(--ink)} @media(max-width:720px){.weiterdesk{display:none}} @media(max-width:720px){ .sticky,.formfuss{display:flex;position:sticky;bottom:0;z-index:40;gap:12px;align-items:center;justify-content:space-between; background:var(--night);border-top:2px solid var(--cyan); padding:12px var(--sp-1) calc(12px + env(safe-area-inset-bottom))} /* Die feste Leiste wiederholt den Aufruf — Cyan bleibt dem einen Primärknopf der Seite */ .sticky .btn,.formfuss .btn{background:transparent;color:var(--cyan);border-color:var(--cyan);border-width:2px} .sticky .btn:hover,.formfuss .btn:hover{background:var(--cyan);color:var(--night)} .sticky .txt,.formfuss .summe{color:var(--foam);font-size:var(--t-mini);line-height:1.3} .sticky .txt b{display:block;font-size:var(--t-body)} .formfuss .summe b{display:block;font-size:var(--t-lead);font-variant-numeric:tabular-nums} } /* ══════════════════════════════════════════════════ V2-BAUSTEINE — aus der Referenzanalyse „Anatomie der High-Conversion Event-Website" (29.07.2026). Alles token-treu; keine neue Farbe, keine neue Schrift. ══════════════════════════════════════════════════ */ /* ══ Zahlenbanderole ══ Vier Kennzahlen ueber die MENSCHEN, nicht ueber das Programm. Steht auf dem Feld, nicht in einer Karte — die Zahlen sollen die Seite tragen, nicht in einem Kasten sitzen. */ .zahlband{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-2) var(--sp-1); border-top:1px solid rgba(244,246,255,.24);border-bottom:1px solid rgba(244,246,255,.24); padding:var(--sp-2) 0;color:var(--foam)} .zahlband .z{display:flex;flex-direction:column;gap:6px} .zahlband .n{font-family:var(--disp);font-weight:600;line-height:1;color:var(--cyan); font-size:clamp(var(--t-h2),5.4vw,var(--t-h1));font-variant-numeric:tabular-nums} .zahlband .n .suf{font-size:.58em;color:var(--foam)} .zahlband .l{font-size:var(--t-mini);color:var(--foam);text-wrap:pretty} @media(max-width:820px){.zahlband{grid-template-columns:1fr 1fr;gap:var(--sp-1) var(--sp-2)}} /* ══ Erlebnis-Bausteine ══ Benannte Kacheln statt Zeitplan. Die Benennung ist der Wirkstoff: „Kaffeepause im Foyer" verkauft, „Pause" nicht. */ .bausteine{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-1)} .bausteine .bs{display:flex;flex-direction:column;gap:var(--sp-eng);color:var(--foam)} .bausteine .bs b{font-family:var(--disp);font-weight:600;font-size:var(--t-lead);line-height:1.2} .bausteine .bs span{font-size:var(--t-mini);color:var(--foam);text-wrap:pretty} /* Zwei der sieben Kacheln tragen kein Bild, sondern Nachtblau mit dem Kernsatz. Nicht Feldblau: der Abschnitt STEHT auf Feldblau, eine gleichfarbige Flaeche verschwaende sich darin und laese sich als vergessenes Bild. Kein Mangel, sondern Rhythmus: die Bilddichte faellt, und die zwei Saetze, die ohnehin die staerksten waren, bekommen die Flaeche. */ .bausteine .bs .txt{display:flex;align-items:flex-end;background:var(--night); border-radius:var(--sp-eng);padding:var(--sp-1)} .bausteine .bs .txt span{font-family:var(--disp);font-weight:600;font-size:var(--t-h3); line-height:1.15;color:var(--foam);text-wrap:balance} @media(max-width:820px){.bausteine{grid-template-columns:1fr 1fr}} @media(max-width:460px){.bausteine{grid-template-columns:1fr}} /* ══ Stimmen ══ Der ueberpruefbare Mensch ist der Beleg, nicht das Lob. Deshalb immer Gesicht, Name und Rolle — nie ein anonymes Zitat. */ .stimme{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:16px;row-gap:var(--sp-eng);align-items:start} .stimme > .ph.rund{width:56px;height:56px;margin:0;grid-row:1/3} .stimme blockquote{margin:0;grid-column:2;font-size:var(--t-lead);line-height:1.45;color:var(--ink); text-wrap:pretty;max-width:var(--satz)} .stimme .wer{grid-column:2;font-size:var(--t-mini);color:var(--muted)} /* ══ Preisleiter — erledigte Stufen bleiben stehen ══ Ausverkauft ist ein Beweis, keine Sackgasse: die Stufe wird durchgestrichen und ausgegraut, aber nie entfernt. Kein Opacity-Trick — die Farbe wechselt, damit der Kontrast messbar bleibt. */ .preisleiter{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-eng)} .preisleiter .st{background:var(--surface);border:1px solid var(--line);border-radius:var(--r); padding:14px 16px;display:flex;flex-direction:column;gap:6px;color:var(--ink)} .preisleiter .st.jetzt{border:2px solid var(--accent);padding:13px 15px;background:var(--surface-raise)} .preisleiter .st.weg{background:var(--sink)} .preisleiter .st.weg .pr{text-decoration:line-through;color:var(--muted)} .preisleiter .stufe{font-family:var(--disp);text-transform:uppercase;letter-spacing:var(--tr-m); font-size:var(--t-label);color:var(--muted)} .preisleiter .pr{font-family:var(--disp);font-size:var(--t-h3);line-height:1;font-variant-numeric:tabular-nums} .preisleiter .rest{font-size:var(--t-mini);color:var(--muted)} @media(max-width:820px){.preisleiter{grid-template-columns:1fr 1fr}} table.t tr.weg td{color:var(--muted)} table.t tr.weg .preis{text-decoration:line-through} /* ══ Ausverkauft, an den beiden restlichen Bauteilen (CEO 04.08.2026) ══ Dieselbe Gestalt fuer die kompakte Preisliste der Ticketseite und die Uebersichtskarte auf /konferenz/. Beide zeigten den Zustand bis hierher gar nicht — nur Preisleiter und Preistabelle hatten ihn. ⚠ WIE OBEN: FARBWECHSEL, KEIN OPACITY-TRICK. `opacity` verrechnet die Textfarbe mit dem Grund, und was dabei herauskommt, steht in keiner Eigenschaft mehr — der Kontrast waere nicht mehr auslesbar, sondern nur noch zu erraten. Ausgegraut ist genau die Stelle, an der das teuer wird. ⚠ Der Stoerer `.chip.voll` behaelt seine Akzentfuellung: er soll auf dem ausgegrauten Grund AUFFALLEN, nicht mit ausgrauen. */ .list .row.weg{color:var(--muted)} .list .row.weg .preis{text-decoration:line-through} .card.weg{background:var(--sink);color:var(--muted)} .card.weg .kh{color:var(--muted)} .card.weg .preis{text-decoration:line-through;color:var(--muted)} /* ══ Schluss-Aufruf ══ Zweites Nachtband je Ansicht — bewusst. Die Sektionen wechseln zwischen hellem und dunklem Grund; der Wechsel ersetzt Trennlinien, und der letzte Aufruf braucht dieselbe Wucht wie der Hero. */ .band.schluss .inner{text-align:center;align-items:center} .band.schluss .inner > *{max-width:var(--satz)} .band.schluss .ph{width:100%;max-width:none} .band .fein{font-size:var(--t-mini);color:var(--mist)} /* ══ Zustandsflächen ══ */ .zpanel{display:flex;flex-direction:column;gap:12px;align-items:flex-start;width:100%; background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:var(--sp-1) 22px;color:var(--ink)} .zpanel .btn.sec{background:transparent;color:var(--accent);border-color:var(--accent)} .zpanel .btn.sec:hover{background:var(--accent);color:#fff;border-color:var(--accent)} .zpanel .ikon{font-family:var(--disp);font-size:var(--t-label);letter-spacing:var(--tr-m);text-transform:uppercase;color:var(--muted)} .skel{background:linear-gradient(90deg,#D9DEF8 25%,#EAEDFC 50%,#D9DEF8 75%);background-size:200% 100%; animation:sk 1.4s linear infinite;border-radius:6px;height:16px} .skel.t{height:26px;width:55%}.skel.b{height:80px} @keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}} /* ══ Übersicht ══ */ .ix{padding:var(--sp-2) var(--sp-1) var(--sp-3);max-width:1080px;margin:0 auto;color:var(--foam)} .ix h1{color:var(--foam);text-transform:uppercase;font-size:var(--t-h2);letter-spacing:var(--tr-xl);margin-bottom:var(--sp-1)} .ixgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--sp-1)} .ixcol{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);padding:16px 18px} .ixcol h2{font-size:var(--t-h4);text-transform:uppercase;letter-spacing:var(--tr-l);color:var(--ink);margin-bottom:var(--sp-eng)}.ixcol button,.ixcol a{display:block;width:100%;text-align:left;padding:8px;border:0;background:none;border-radius:var(--r-ctl);color:var(--ink);font-size:var(--t-mini);min-height:36px}.ixcol button:hover,.ixcol a:hover{background:var(--surface-raise);color:var(--accent)} /* ══ Fuß ══ */ .ftr{background:var(--night);color:var(--dusk);padding:var(--sp-2) var(--sp-1) calc(var(--sp-2) + env(safe-area-inset-bottom));font-size:var(--t-mini)} .ftr .inner{width:100%;max-width:960px;margin-inline:auto;display:flex;flex-direction:column;gap:var(--sp-1)} .ftr .reihe{display:flex;gap:var(--sp-1);flex-wrap:wrap;align-items:center}.ftr .reihe.haupt button,.ftr .reihe.haupt a{color:var(--foam);font-weight:600;text-decoration:none;font-size:var(--t-body)}.ftr .reihe.haupt button:hover,.ftr .reihe.haupt a:hover{color:var(--cyan)}.ftr button,.ftr a{background:none;border:0;color:var(--mist);text-decoration:underline;font-size:var(--t-mini);padding:6px 2px;min-height:32px} .ftr .marke{display:flex;align-items:center;gap:var(--sp-eng);color:var(--dusk);border-top:1px solid rgba(244,246,255,.16);padding-top:var(--sp-1)} .ftr .tor{width:18px;height:21px;color:var(--cyan)} /* ══ Postfach ══ */ .postfach{display:grid;grid-template-columns:340px 1fr;gap:var(--sp-1);align-items:start} .mailliste{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow); overflow:hidden;color:var(--ink);display:flex;flex-direction:column;max-height:74dvh} .mailsuche{display:flex;flex-direction:column;gap:var(--sp-eng);padding:14px 16px;background:var(--surface-raise); border-bottom:1px solid var(--line)} .mailsuche input,.mailsuche select{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-ctl); padding:10px 12px;font-size:var(--t-mini);color:var(--ink);min-height:42px;width:100%} .mailrollen{overflow-y:auto;flex:1} .mailgruppe{position:sticky;top:0;z-index:1;background:var(--sink);color:var(--muted);font-family:var(--disp); text-transform:uppercase;letter-spacing:var(--tr-m);font-size:var(--t-label);padding:7px 16px; border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center} .mailgruppe .anz{font-variant-numeric:tabular-nums} .mailrow{display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;background:none;border:0; border-bottom:1px solid var(--line);padding:12px 16px;min-height:64px;color:var(--ink)} .mailrow:hover{background:var(--surface-raise)} .mailrow.on{background:var(--surface-raise);box-shadow:inset 4px 0 0 var(--accent)} .mailrow .kopfzeile{display:flex;justify-content:space-between;gap:10px;align-items:baseline} .mailrow .von{font-size:var(--t-mini);color:var(--muted)} .mailrow .zeit{font-size:var(--t-label);color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums} .mailrow .bt{font-size:var(--t-body);line-height:1.3} .mailrow.unread .bt{font-weight:700} .mailrow.unread .von::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%; background:var(--accent);margin-right:7px;vertical-align:middle} .mailrow .vorschau{font-size:var(--t-mini);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%} .mailliste .leer{padding:var(--sp-1) 16px} .mailleser{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);color:var(--ink)} .mailbody{padding:var(--sp-1) 24px var(--sp-2)} .mailbody p{max-width:var(--satz)} .mhead{border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:var(--sp-1)} .mhead b{font-size:var(--t-h3);font-family:var(--disp);line-height:1.14;display:block;margin-bottom:12px} .absenderzeile{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .absenderzeile .kopf{width:40px;height:40px} .absenderzeile .nm{display:block;font-weight:700;font-size:var(--t-mini)} .absenderzeile .adr{display:block;font-size:var(--t-mini);color:var(--muted)} .absenderzeile .wann{margin-left:auto;font-size:var(--t-mini);color:var(--muted);font-variant-numeric:tabular-nums} @media(max-width:860px){ .postfach{grid-template-columns:1fr} .mailliste{max-height:none} .postfach > .mailleser{display:none} .postfach.offen > .mailliste{display:none} .postfach.offen > .mailleser{display:block} } .toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));transform:translateX(-50%); background:var(--night);color:var(--cyan);border:1px solid var(--cyan);padding:13px 20px;border-radius:var(--sp-eng); z-index:200;font-weight:600;font-size:var(--t-mini);max-width:92vw;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.45)} /* ══ Telefon-Rahmen der App ══ */ .telefon{max-width:390px;margin:0 auto;background:var(--night-2);border:8px solid var(--night);border-radius:34px;box-shadow:var(--shadow-stark);overflow:hidden} .telefon .tkopf{background:var(--night);color:var(--foam);padding:12px 18px;display:flex;justify-content:space-between;align-items:center} .telefon .tkopf h2{font-family:var(--body);font-size:var(--t-body);font-weight:700;margin:0} .telefon .tkopf span{font-size:var(--t-label);color:var(--dusk)} .telefon .tinhalt{padding:18px;display:flex;flex-direction:column;gap:var(--sp-1)} .telefon .tfuss{display:flex;border-top:1px solid rgba(244,246,255,.2)}.telefon .tfuss button,.telefon .tfuss a{flex:1;background:none;border:0;color:var(--dusk);padding:12px 4px;font-size:var(--t-label);min-height:48px; font-family:var(--disp);text-transform:uppercase;letter-spacing:var(--tr-l)}.telefon .tfuss button.on,.telefon .tfuss a.on{color:var(--cyan);box-shadow:inset 0 2px 0 var(--cyan)} /* ══════════ Telefon ══════════ */ @media(max-width:720px){ .page{padding:var(--sp-1) var(--sp-1) var(--sp-2)} .wrapn{gap:var(--sp-1)} .card{padding:18px} .card.stark{padding:22px 20px} .card .kh{font-size:var(--t-h4)} .card.stark .kh{font-size:var(--t-h3)} .band{padding:var(--sp-2) var(--sp-1)} .band h2,.band h3{font-size:var(--t-h3)} .screen{padding-bottom:env(safe-area-inset-bottom)} /* ⚠⚠ `top:46px` WAR EIN REST DER ATTRAPPE (CEO-Befund 01.08.2026). Im Prototyp sass ueber der Kopfleiste eine nachgebaute Adressleiste von genau 46px Hoehe; die Leiste klebte darunter. Die Adressleiste ist mit dem Neubau entfallen, der Versatz blieb — und damit ein 46px hoher Streifen am oberen Rand, durch den beim Scrollen der Seiteninhalt OBERHALB der Kopfleiste sichtbar durchlief. Auf dem Telefon war das der auffaelligste Fehler der ganzen Seite. Die Leiste klebt jetzt am oberen Rand, wo sie hingehoert. */ .mh{padding:var(--sp-eng) var(--sp-1)} .mh .inner{gap:10px} .mh .sp{order:2} .mh nav{order:3;flex:1 1 100%;gap:var(--sp-eng) 10px}.mh nav button,.mh nav a{min-height:44px;padding:10px 10px 8px;font-size:var(--t-body)} .grid.sammel{gap:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r); padding:4px 18px;box-shadow:var(--shadow)} .grid.sammel > .card{background:none;border:0;box-shadow:none;border-radius:0;padding:16px 0;border-top:1px solid var(--line)} .grid.sammel > .card:first-child{border-top:0} .grid.sammel > .card .kh{padding-top:0;font-size:var(--t-lead)} .grid.sammel > .card .kh::before{display:none} .wahl{flex-wrap:wrap} .wahl > span:not(.pr){flex:1 1 0;min-width:0} .wahl .pr{flex:1 1 100%;margin-left:34px;margin-top:4px;text-align:left} .qr.einlass{width:min(78vw,320px);height:auto;aspect-ratio:1;margin:0 auto var(--sp-1);background-size:11% 11%} .hub{grid-template-columns:1fr} .hub > .thread{display:none} .hub.offen > .side{display:none} .hub.offen > .thread{display:block} .zurueckzeile{display:flex;align-items:center;gap:var(--sp-eng);margin-bottom:12px} .schreiben{position:sticky;bottom:0;background:var(--surface);padding-bottom:calc(10px + env(safe-area-inset-bottom));padding-top:var(--sp-eng)} .hero{min-height:auto} .hero .in{padding:var(--sp-2) 18px} .hero h1{font-size:clamp(1.7rem,8.4vw,2.6rem)} .hero .slogan{font-size:var(--t-lead)} .hero .zusage{font-size:var(--t-body)} .hero .datum{font-size:var(--t-mini)} .hero .btnrow{margin-top:var(--sp-1)} .list .row{max-width:none} .stat{gap:var(--sp-1)} .telefon{border-width:0;border-radius:0;max-width:none} } @media(min-width:861px){.hub.offen > .side,.hub.offen > .thread{display:block}} .ph>img,.ph>video{width:100%;height:100%;object-fit:cover;display:block;border:0}.hero .phlayer>img,.hero .phlayer>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border:0}.hero .phlayer>.welt{display:none}.hero[data-welt="blau"] .phlayer{background:radial-gradient(120% 88% at 50% 32%,#17225F 0%,#0A1146 62%,#060B33 100%)}.hero[data-welt="blau"] .schleier{background:linear-gradient(180deg,rgba(6,11,51,0) 36%,rgba(6,11,51,.78) 100%)}.hero[data-welt="blau"] .phlayer>.welt.blau{display:block}.hero[data-welt="gruen"] .phlayer{background:radial-gradient(120% 88% at 50% 32%,#0F5C4A 0%,#083128 62%,#04140C 100%)}.hero[data-welt="gruen"] .schleier{background:linear-gradient(180deg,rgba(4,20,12,0) 36%,rgba(4,20,12,.78) 100%)}.hero[data-welt="gruen"] .phlayer>.welt.gruen{display:block}.hero[data-welt="rot"] .phlayer{background:radial-gradient(120% 88% at 50% 32%,#8C0020 0%,#4E0016 62%,#14060A 100%)}.hero[data-welt="rot"] .schleier{background:linear-gradient(180deg,rgba(20,6,10,0) 36%,rgba(20,6,10,.78) 100%)}.hero[data-welt="rot"] .phlayer>.welt.rot{display:block}@media(prefers-reduced-motion:reduce){.hero .phlayer>video.welt{display:none!important}}.btn.ticket{background:var(--cyan);color:var(--night);border:2px solid var(--night);font-weight:700}.btn.ticket.night{border-color:var(--cyan)}.btn.ticket:hover{background:var(--night);color:var(--cyan);border-color:var(--cyan)}@media(min-width:721px){.pers.vier{grid-template-columns:repeat(4,minmax(0,1fr))}.pers.vier .k{grid-template-columns:minmax(0,1fr);align-items:start;align-content:start;row-gap:10px}.pers.vier .k > .ph.rund{grid-row:auto;width:128px;height:128px}.pers.vier .nm,.pers.vier .ro{grid-column:1}.pers.vier.dreispaltig{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:var(--sp-2)}}.hero h1{paint-order:stroke fill;-webkit-text-stroke:3px var(--cyan);text-shadow:0 0 16px rgba(6,11,51,.85),0 4px 14px rgba(6,11,51,.7)}.hero .tor{filter:drop-shadow(0 0 1px rgba(6,11,51,1)) drop-shadow(0 0 1px rgba(6,11,51,1)) drop-shadow(0 2px 8px rgba(6,11,51,.40))}/* fix6: die zwei Ticketstaende des Sprecher-Entwurfs. Ohne Marke am gilt „kein bezahltes Ticket“ — der oeffentliche Fall ist der Startzustand. */ html:not([data-ticket="bezahlt"]) [data-nur-mit-ticket]{display:none} html[data-ticket="bezahlt"] [data-nur-ohne-ticket]{display:none} /* ⚠ CODEX PR81/P2: der Sprecher-Erstattungsweg gilt nur fuer regulaere Tickets. */ html[data-art="backstage"] [data-nur-einzel]{display:none} html:not([data-art="backstage"]) [data-nur-bs]{display:none} /* ⚠ CODEX 8e8ed3f/BEFUND 2: die Jury sieht die Ticketart der BEWERBUNG, nicht die Wahl des Besuchers. Deshalb ein eigener Schalter an der Karte. */ [data-jury-art="einzel"] [data-jury-nur-bs]{display:none} [data-jury-art="backstage"] [data-jury-nur-einzel]{display:none} /* ══ Pop-up ohne Skript (CEO-Auftrag 16.08.2026) ═══════════════════════════ Der volle Leistungsumfang der Backstage-Foerderkarte steht in einem Schirm, den `:target` aufmacht. Kein und kein Handler: Die Site fuehrt kein JS-Framework, und die Inline-Handler-Regel laesst genau EINEN Handler-Wert zu. Der Zustand steht damit in der Adresse und ist teilbar. ⚠ Alle Bauteile sind : Der Block steht im Ticketformular INNERHALB eines

— beide nehmen nur Phrasing-Inhalt. ⚠ position:fixed, nicht sticky — die Bauwache verbietet ein klebendes Element mit Versatz zum Rand, und ein Schirm soll ohnehin stehen bleiben. */ .popauf{color:var(--accent);text-decoration:underline} .popanker{display:inline-block;width:0;height:0;overflow:hidden} .pop{display:none} .pop:target{display:block;position:fixed;inset:0;z-index:90;background:rgba(6,11,51,.78)} .pop:target .popgrund{position:fixed;inset:0;display:block} .popkarte{position:relative;display:block;max-width:640px;max-height:88vh;overflow-y:auto; margin:6vh auto;background:#fff;color:var(--night);border-radius:16px;padding:20px 22px; box-shadow:0 24px 60px rgba(6,11,51,.55)} .popkopf{display:block;font-size:1.14rem;line-height:1.32;margin-bottom:4px} .popz{display:block;margin-top:10px;font-size:.95rem;line-height:1.5} .popfuss{display:block;margin-top:16px} @media (max-width:600px){.popkarte{margin:3vh 0;max-height:94vh;padding:16px}} /* ══ Neubau 01.08.2026 ══════════════════════════════════════════════════════ Ergaenzungen zum uebernommenen Stylesheet. Es stammt aus einer Oberflaeche, in der jeder Bedienpunkt ein