/* ============================================================================ kern/kern.css · Kintuition-Kundenstopper v2 · AP01 ============================================================================ Bühne, Ebenen (SPEC 6.2), Grundtypografie, Auftritte, Leiste, Blenden- ebenen, Fingerfunke, Ruhe-Warnung, Ladebild, HUD. Grundregel gegen Ruckeln (Briefing §6, SPEC 4.3): Bewegt wird nur über transform und opacity. Alles andere — Breite, Farbe, Filter, Schatten — lässt Android in jedem Bild neu rechnen, und das sähe man als Stocken. Module hängen ihr eigenes CSS mit KIN.stil() und dem Präfix .fl- bzw. .st- ein; die Klassen hier tragen das Präfix k-. ========================================================================== */ /* ---------- Schriften (OFL, aus fonts/) ---------- font-display:block: lieber 3 s unsichtbar als eine Wort-Enthüllung in der Ersatzschrift, die beim Nachladen umspringt. Der Kern wartet ohnehin per document.fonts.load auf alle vier Schnitte, bevor er loslegt. */ @font-face{font-family:'Playfair';src:url('../fonts/playfair-display-var.woff2') format('woff2');font-weight:400 900;font-style:normal;font-display:block} @font-face{font-family:'Playfair';src:url('../fonts/playfair-display-italic-var.woff2') format('woff2');font-weight:400 900;font-style:italic;font-display:block} @font-face{font-family:'Inter';src:url('../fonts/inter-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:block} @font-face{font-family:'Inter';src:url('../fonts/inter-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:block} /* ---------- Marke (Briefing §4, SPEC 1.4.3: Farbe trägt Bedeutung) ---------- */ :root{ --grund:#0D0D14; --grund2:#16151f; --violett:#35334A; --orange:#F15E39; --orange-hell:#FE8649; --orange-kraft:#E5613D; --gold:#FFD27A; --gold-wolke:#FF9D2E; --cyan:#38BDF8; --papier:#EFE6D6; --ink:#F5EFE7; --mut:#bdb7c9; --faint:#8b879e; --linie:rgba(255,255,255,.12); --serif:'Playfair',Georgia,'Times New Roman',serif; --sans:'Inter',system-ui,sans-serif; --weich:cubic-bezier(.2,.7,.2,1); /* Raster der 1080 × 1920-Bühne (SPEC 1.4.7) */ --rand:84px; --kopf-oben:120px; --kopf-unten:560px; --motiv-oben:520px; --motiv-unten:1400px; --text-oben:1400px; --text-unten:1660px; --leiste-oben:1670px; } *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent} html,body{height:100%;overflow:hidden;background:#000;overscroll-behavior:none} /* touch-action:none: Der Kern wertet jede Berührung selbst aus (Härtung 3.9). Der Browser soll weder scrollen noch zoomen noch Doppeltipp-Zoom abwarten. */ body{font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased; user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none} em{font-style:italic;color:var(--orange-hell)} /* ---------- Bühne ---------- Feste Entwurfsfläche 1080 × 1920, per transform:scale an jedes Fenster angepasst (wie v1 skalieren()). Auf dem Notebook sieht die Stele exakt aus wie auf dem 43-Zöller. */ #buehne{position:absolute;left:0;top:0;width:1080px;height:1920px;transform-origin:0 0;overflow:hidden; background:var(--grund);contain:strict} /* #schicht dreht der Spiegelflip (Canvas + Flächen-DOM, nicht die Leiste). will-change dauerhaft: Die Ebene ist immer schon eine eigene Compositor- Schicht. Würde sie erst beim Flip befördert, müsste Chrome sie genau in dem Moment neu rastern, in dem die Bewegung anfängt. */ #schicht{position:absolute;left:0;top:0;width:1080px;height:1920px;will-change:transform;transform:none; backface-visibility:hidden} #gl{position:absolute;left:0;top:0;width:1080px;height:1920px;display:block;background:var(--grund)} #flaechen,#stationen{position:absolute;left:0;top:0;width:1080px;height:1920px;pointer-events:none} /* ---------- Flächen und Stationen ---------- Nur die aktive Fläche wird gezeichnet, die anderen stehen auf display:none und kosten nichts. contain:strict schottet jede Sektion ab: Ändert sich darin etwas, rechnet der Browser nur sie neu, nicht die ganze Seite. pointer-events:none, denn Berührungen wertet der Kern zentral aus; nur Bedienelemente (.k-tippbar) nehmen selbst Ereignisse an. */ /* K1/K14 (C1): Inaktive Sektionen stehen nicht mehr auf display:none, sondern auf content-visibility:hidden. Der Browser zeichnet und prüft sie nicht (keine Kosten je Bild, keine Treffer), behält aber Stil und Layout. Ein Wechsel kostet dann nur noch das Zeichnen der neuen Sektion — vorher jedes Mal Stil + Layout + Schriftsatz der ganzen Sektion (gemessen 30–60 ms bei CPU × 4 im ersten Bild nach dem Wechsel). opacity:0 dazu: content-visibility verbirgt nur den Inhalt, nicht den eigenen Hintergrund der Sektion (z. B. Ersatz-INHALT) — der läge sonst über dem Canvas. */ .fl,.st{position:absolute;left:0;top:0;width:1080px;height:1920px;display:block;content-visibility:hidden;opacity:0;overflow:hidden;contain:strict;pointer-events:none} .k-tippbar{pointer-events:auto;cursor:pointer;touch-action:none} /* k-vor: fertig gezeichnet, aber unsichtbar. Nicht 0: Eine ganz durchsichtige Ebene zeichnet Chrome gar nicht erst — dann passiert das Zeichnen im ersten sichtbaren Bild, also als Ruckler (v1-Technik). */ .fl.k-vor,.st.k-vor{content-visibility:visible;opacity:.001} .fl.k-aktiv,.st.k-aktiv{content-visibility:visible;opacity:1} /* Tintenfluss: die alte Sektion blendet als Ganzes aus (nur opacity). */ .fl.k-ausblenden,.st.k-ausblenden{content-visibility:visible;opacity:0;transition:opacity .35s ease} /* ---------- Grundtypografie (SPEC 1.4.7) ---------- Playfair Display für Headlines und Zitate, Inter für Fakten. Fließtext ≥ 36 px, kleinste Schrift 22 px. */ .k-eyebrow{font:600 23px/1.2 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--orange-hell)} .k-headline{font:700 112px/1.02 var(--serif);letter-spacing:-.01em;color:var(--ink)} .k-headline-m{font:700 84px/1.06 var(--serif);color:var(--ink)} .k-zitat{font:500 44px/1.3 var(--serif);color:var(--ink)} .k-zitat-i{font:italic 500 44px/1.3 var(--serif);color:var(--ink)} .k-fakt{font:400 36px/1.35 var(--sans);color:var(--ink)} .k-fakt-b{font:600 36px/1.35 var(--sans);color:var(--ink)} .k-klein{font:600 22px/1.3 var(--sans);letter-spacing:.06em;color:var(--mut)} .k-wm{font-family:var(--serif);font-weight:800;letter-spacing:-.01em;white-space:nowrap} .k-wm b{color:var(--orange);font-weight:800} /* Zonen des Rasters als fertige Kästen (Rand 84 px) */ .k-zone-kopf{position:absolute;left:84px;right:84px;top:120px} .k-zone-text{position:absolute;left:84px;right:84px;top:1400px} .k-zone-mitte{position:absolute;left:84px;right:84px;top:0;bottom:250px;display:flex;flex-direction:column;justify-content:center} /* ---------- Auftritte nach dem Zeitplan (k.zeige) ---------- Der Kern setzt k-an, sobald die Regie-Uhr tEin erreicht, und k-aus bei tAus. Die Bewegung selbst ist eine CSS-Transition (läuft im Compositor). Zeitplan-Gruppen nicht ineinander verschachteln: .k-an .k-w greift auf alle Nachfahren. */ .k-e{opacity:0;transform:translate3d(0,44px,0)} .k-e.k-an,.k-an .k-e{opacity:1;transform:none; transition:opacity .9s ease var(--d,0ms),transform 1.2s var(--weich) var(--d,0ms)} /* Wort-Enthüllung (von maizo.net, v1): Wort für Wort im 115-ms-Takt. */ /* K3 (C1): vor dem Auftritt ganz unsichtbar (früher .08 — „Geisterworte“, die schon bei t = 0 schwach im Bild standen). */ .k-w{display:inline-block;opacity:0;transform:translate3d(0,.28em,0)} /* K10: Wörter, die zusammenbleiben (Waise, Zahl + Einheit, Kürzel + Zahl) */ .k-wz{white-space:nowrap} .k-an .k-w{opacity:1;transform:none; transition:opacity .8s ease calc(var(--d0,0ms) + var(--i) * 115ms), transform 1s var(--weich) calc(var(--d0,0ms) + var(--i) * 115ms)} /* Die kurze orangefarbene Buchlinie vor jeder Textgruppe (64 × 4 px, 0,5 s). */ .k-linie{display:block;width:64px;height:4px;background:var(--orange);border-radius:2px;transform:scaleX(0);transform-origin:0 50%} .k-an .k-linie,.k-linie.k-an{transform:scaleX(1);transition:transform .5s var(--weich) var(--d,0ms)} /* Ausblenden als Ganzes, gleichmäßig — nicht Wort für Wort rückwärts. */ .k-aus{opacity:0!important;transition:opacity .5s ease!important} /* Sprung in den Endzustand (&ab=, Neustart unter Deckung): keine Transition. */ .k-sofort,.k-sofort *{transition:none!important;animation:none!important} /* ---------- Umbruch (K10, SPEC_NACHTRAG N5.8) ---------- Progressive Verbesserung: Absätze ohne kurze letzte Zeile, Headlines ausgewogen. Ohne Unterstützung bleibt die Regel des Kerns (text.js#umbruch: geschützte Leerzeichen). */ .fl p,.st p,.k-zitat,.k-zitat-i,.k-fakt,.k-fakt-b{text-wrap:pretty} .k-headline,.k-headline-m,.fl h1,.fl h2,.fl h3,.st h1,.st h2,.st h3{text-wrap:balance} /* ---------- Aufwärmen beim Laden (K1, text.js#sektionenAufwaermen) ---------- Unter dem Ladebild: jede Sektion einmal unsichtbar (.001) mit allen Kindern voll gezeichnet, ohne Transition — Stil, Layout, Schriftsatz, Glyphen. */ .k-aufwaermen .k-warm *{opacity:1!important;transition:none!important;animation:none!important} /* ---------- Seitenmarke (SPEC 1.4.2) ---------- Rechts unten „S. 313": Inter 600, 22 px, Gold, Zeichenabstand .08 em, davor eine 40-px-Haarlinie (1,5 px, Gold 60 %). Das Erkennungszeichen von v2 und die Brücke zum Buch im Regal. */ .k-seitenmarke{display:flex;justify-content:flex-end;align-items:center;gap:14px;margin-top:22px; font:600 22px/1 var(--sans);letter-spacing:.08em;color:var(--gold);white-space:nowrap} .k-seitenmarke::before{content:"";display:block;width:40px;height:1.5px;background:rgba(255,210,122,.6)} /* ---------- Leiste (y 1670–1920) ---------- Wortmarke, Termin, Preise, Handlungsaufforderung, QR 156 px, Fortschrittslinie. Liegt über #schicht und dreht sich beim Spiegelflip nicht mit. Je Schleife ±2 px versetzt (Einbrennschutz), über --lx/--ly. C3 W-Kern (Nr. 1a, N5.2): Preise und Tipp-Zeile 36 px; die Tipp-Zeile ist eine eigene Zeile in Gold, ohne Versalien, mit Fingersymbol (SVG). Termin und Preise rücken dafür zusammen; „KölnTicket" steht unter dem QR. Rand 84 px (N5.3). */ /* Nur sichtbar bedienbar: Unsichtbar (in INHALT und Stationen) darf die Leiste keine Tipps auf Knöpfe darunter verschlucken. */ #leiste{position:absolute;left:0;right:0;top:1670px;height:250px;z-index:6;display:flex;align-items:center; justify-content:space-between;gap:28px;padding:30px 84px 14px;pointer-events:none; background:linear-gradient(180deg,rgba(13,13,20,0),rgba(13,13,20,.94) 16%,#0D0D14 40%); opacity:0;transform:translate3d(var(--lx,0px),calc(60px + var(--ly,0px)),0); transition:opacity .6s ease,transform .8s var(--weich)} #leiste.k-an{opacity:1;transform:translate3d(var(--lx,0px),var(--ly,0px),0);pointer-events:auto} #leiste.k-tippbar{pointer-events:none} #leiste.k-tippbar.k-an{pointer-events:auto} .k-le-fort{position:absolute;left:84px;right:84px;top:22px;height:2px;background:var(--linie);overflow:hidden} .k-le-fort i{position:absolute;left:0;top:0;width:100%;height:100%;background:var(--orange);transform-origin:0 50%;transform:scaleX(0)} .k-le-links{min-width:0} .k-le-titel{font-size:44px;line-height:1;color:var(--ink)} .k-le-titel .k-live{display:inline-block;margin-left:14px;font:600 17px/1 var(--sans);letter-spacing:.24em; color:var(--orange-hell);border:2px solid var(--orange);padding:7px 10px 6px 13px;vertical-align:10px} .k-le-termin{font:600 30px/1.15 var(--serif);margin-top:12px;color:var(--ink);white-space:nowrap} .k-le-preis{font:500 36px/1.15 var(--sans);color:var(--ink);margin-top:2px;letter-spacing:0;white-space:nowrap} .k-le-tipp{display:flex;align-items:center;gap:12px;font:600 36px/1.2 var(--sans);color:var(--gold);margin-top:10px;white-space:nowrap} .k-le-tipp .k-finger{flex:0 0 auto;width:42px;height:42px;fill:var(--gold);will-change:transform; transform-origin:50% 60%;animation:k-fingertipp 2.4s ease-in-out infinite} @keyframes k-fingertipp{0%,52%,100%{transform:translate3d(0,0,0) scale(1)}62%{transform:translate3d(0,4px,0) scale(.9)}72%{transform:translate3d(0,0,0) scale(1)}} .k-le-qr{display:flex;flex-direction:column;align-items:center;gap:6px;flex:0 0 auto} .k-le-qr small{font:600 22px/1.1 var(--sans);color:var(--mut);text-align:center;letter-spacing:.04em;white-space:nowrap} .k-le-qr small b{display:none} .k-qr{display:block;border-radius:10px;background:#fff} .k-le-qr .k-qr{width:156px;height:156px} /* Schaufenster: Berührungen gehen nicht → keine Aufforderung zum Tippen */ .k-schaufenster .k-le-tipp,.k-schaufenster #tippring{visibility:hidden} /* ---------- Tipp-Ring im Bild (C3 W-Kern, Nr. 1b) ---------- 180 px Gold, zwei pulsierende Ringe wie der Fingerfunke, Fingersymbol, darunter eine Zeile in 44 px. Nur transform/opacity (Compositor). Lage per transform aus text.js (def.tippRing). Nimmt keine Berührung an. */ #tippring{position:absolute;left:0;top:0;width:1080px;height:1920px;z-index:6;pointer-events:none;overflow:hidden;contain:strict; opacity:0;transition:opacity .7s ease} #tippring.k-an{opacity:1} #tippring .k-tr-ring{position:absolute;left:0;top:0;width:180px;height:180px;will-change:transform} #tippring .k-tr-kern,#tippring .k-tr-puls{position:absolute;left:0;top:0;width:180px;height:180px;border-radius:50%} #tippring .k-tr-kern{border:5px solid #FFD27A;background:radial-gradient(circle closest-side,rgba(13,13,20,.86) 0%,rgba(13,13,20,.86) 80%,rgba(255,210,122,.22) 100%); box-shadow:0 0 26px rgba(255,210,122,.55),inset 0 0 18px rgba(255,210,122,.30)} #tippring .k-tr-puls{border:4px solid #FFD27A;box-shadow:0 0 22px rgba(255,210,122,.6);opacity:0;will-change:transform,opacity} #tippring .k-tr-puls2{border:12px solid rgba(255,210,122,.38);box-shadow:0 0 36px rgba(255,190,90,.4)} #tippring.k-an .k-tr-puls{animation:k-trpuls 1.8s cubic-bezier(.2,.6,.3,1) infinite} #tippring.k-an .k-tr-puls2{animation-delay:.9s} @keyframes k-trpuls{0%{transform:scale(1);opacity:.95}100%{transform:scale(1.75);opacity:0}} #tippring .k-finger{position:absolute;left:45px;top:42px;width:90px;height:90px;fill:#FFD27A;will-change:transform;transform-origin:50% 60%; filter:drop-shadow(0 0 8px rgba(255,210,122,.5))} #tippring.k-an .k-finger{animation:k-fingertipp 1.8s ease-in-out infinite} #tippring .k-tr-text{position:absolute;left:0;top:0;display:flex;justify-content:center;will-change:transform} #tippring .k-tr-text span{display:inline-block;max-width:912px;padding:12px 28px 14px;border-radius:40px;background:rgba(13,13,20,.80); box-shadow:0 0 0 1.5px rgba(255,210,122,.35);font:600 44px/1.18 var(--sans);color:#FFD27A;text-align:center;text-wrap:balance} #tippring .k-tr-text span.k-tr-zwei b{display:block;font-weight:600} #tippring .k-tr-text span b{font-weight:600} #tippring.k-tr-messen{visibility:hidden;opacity:0} #tippring.k-tr-messen .k-tr-text{width:auto!important} /* &halt=1: Ringe stehen sichtbar (Bildvergleich) */ .k-halt #tippring .k-tr-puls{opacity:.7;transform:scale(1.3)} .k-halt #tippring .k-tr-puls2{opacity:.45;transform:scale(1.6)} /* ---------- Blendenebenen ---------- Alle Blenden sind reine Compositor-Animationen (Web Animations API auf transform/opacity) auf Ebenen, die schon vorher gerastert sind. */ #falz{position:absolute;left:539px;top:0;width:2px;height:1920px;z-index:7;pointer-events:none;opacity:0; background:linear-gradient(180deg,rgba(255,210,122,0),#FFD27A 12%,#fff3d0 50%,#FFD27A 88%,rgba(255,210,122,0)); box-shadow:0 0 18px 3px rgba(255,210,122,.55);will-change:opacity} #licht{position:absolute;left:0;top:0;width:1080px;height:1920px;z-index:8;pointer-events:none;overflow:hidden;contain:strict} /* Der Lichtkreis: 1400 px, skaliert von 0,2 auf 3,0. Der weiche Verlauf verträgt die Vergrößerung ohne neu gerastert zu werden. */ #licht .k-kreis{position:absolute;left:0;top:0;width:1400px;height:1400px;border-radius:50%;opacity:0; will-change:transform,opacity;transform:translate3d(-700px,-700px,0) scale(.2); background:radial-gradient(circle closest-side,var(--k-lichtfarbe,#FFF4E0) 0%,var(--k-lichtfarbe,#FFF4E0) 34%, rgba(255,244,224,.55) 62%,rgba(255,244,224,0) 100%)} #licht.k-gold .k-kreis{background:radial-gradient(circle closest-side,#FFE6A8 0%,#FFD27A 32%,rgba(255,210,122,.5) 62%,rgba(255,210,122,0) 100%)} #licht .k-voll{position:absolute;left:0;top:0;width:1080px;height:1920px;opacity:0;will-change:opacity;background:#FFF4E0} #licht.k-gold .k-voll{background:#FFD27A} #dunkel{position:absolute;left:0;top:0;width:1080px;height:1920px;z-index:9;pointer-events:none;opacity:0; background:var(--grund);will-change:opacity;display:flex;align-items:center;justify-content:center} /* KI-Zeichen im Dunkel: nur bei Kontextverlust und Neustart sichtbar. */ #dunkel .k-mark{width:220px;height:220px;opacity:0;transition:opacity .4s ease} #dunkel.k-mitzeichen .k-mark{opacity:.95} /* ---------- Fingerfunke (SPEC 3.1) ---------- Zwei goldene Ringe am Finger, ein schwacher folgt nach 120 ms. Nur transform und opacity, 600 ms. Die Ringe liegen fertig im DOM (Pool). */ #funken{position:absolute;left:0;top:0;width:1080px;height:1920px;z-index:10;pointer-events:none;overflow:hidden;contain:strict} .k-funke{position:absolute;left:0;top:0;width:120px;height:120px;border-radius:50%;opacity:0;will-change:transform,opacity; border:3px solid #FFD27A;box-shadow:0 0 14px rgba(255,210,122,.65),inset 0 0 10px rgba(255,210,122,.35)} .k-funke.k-weich{border:10px solid rgba(255,210,122,.28);box-shadow:0 0 30px rgba(255,190,90,.35)} .k-funke.k-schwach{border:2px solid rgba(255,210,122,.55);box-shadow:none} /* ---------- „← Inhalt" (Stationen, 200 × 120 px oben links, Kopfzone y 60–180) ---------- */ #zurueck{position:absolute;left:40px;top:60px;width:200px;height:120px;z-index:11;display:flex;align-items:center;justify-content:center; gap:14px;border-radius:999px;background:rgba(13,13,20,.82);border:1.5px solid var(--linie);color:var(--ink); font:600 28px/1 var(--sans);opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s;pointer-events:none} #zurueck.k-an{opacity:1;visibility:visible;transition:opacity .35s ease;pointer-events:auto} .k-gedrueckt{transform:scale(.955)!important;transition:transform .07s ease-out!important} /* ---------- Ruhe: Warnring „Noch da?" ---------- */ #ruhe{position:absolute;left:50%;top:1300px;width:820px;z-index:12;pointer-events:none;display:flex;align-items:center;gap:36px; padding:34px 44px;border-radius:28px;background:#15131c;border:2px solid var(--orange);box-shadow:0 26px 60px -18px rgba(0,0,0,.8); opacity:0;transform:translate3d(-50%,24px,0);transition:opacity .4s ease,transform .4s var(--weich)} #ruhe.k-an{opacity:1;transform:translate3d(-50%,0,0)} #ruhe svg{width:120px;height:120px;flex:0 0 auto;transform:rotate(-90deg)} #ruhe circle{fill:none;stroke-width:8} #ruhe .k-ring-grund{stroke:rgba(255,255,255,.12)} #ruhe .k-ring{stroke:var(--orange);stroke-linecap:round;stroke-dasharray:327;stroke-dashoffset:0} #ruhe b{display:block;font:700 44px/1.1 var(--serif);color:var(--ink)} #ruhe p{font:400 26px/1.4 var(--sans);color:var(--mut);margin-top:10px} #ruhe p span{font-weight:600;color:var(--orange-hell)} /* ---------- Ladebild ---------- KI-Zeichen atmet, Fortschrittslinie, Termin. Liegt über allem; der Kern blendet es mit einem Dunkelschnitt in die erste Fläche. */ #laden{position:absolute;left:0;top:0;width:1080px;height:1920px;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center; background:radial-gradient(80% 50% at 50% 44%,#1b1724 0%,var(--grund) 72%)} #laden.k-weg{display:none} #laden .k-mark{width:300px;height:300px;animation:k-atmen 2.6s ease-in-out infinite;will-change:transform,opacity} @keyframes k-atmen{0%,100%{transform:scale(.96);opacity:.82}50%{transform:scale(1.04);opacity:1}} #laden .k-laden-wm{margin-top:70px;font-size:96px;line-height:1;color:var(--ink)} #laden .k-laden-zeile{margin-top:28px;font:600 26px/1.3 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--orange-hell)} #laden .k-laden-fort{position:absolute;left:240px;right:240px;bottom:300px;height:3px;background:var(--linie);overflow:hidden;border-radius:2px} #laden .k-laden-fort i{position:absolute;left:0;top:0;width:100%;height:100%;background:var(--orange);transform-origin:0 50%;transform:scaleX(0); transition:transform .4s var(--weich)} #laden .k-laden-info{position:absolute;left:84px;right:84px;bottom:240px;text-align:center;font:400 22px/1.4 var(--sans);color:var(--faint);letter-spacing:.04em} /* ---------- HUD (?messen=1) ---------- */ #hud{position:absolute;right:16px;top:16px;z-index:30;display:none;min-width:330px;padding:16px 20px;border-radius:14px; background:rgba(8,8,12,.86);border:1px solid rgba(255,255,255,.14);pointer-events:none; font:600 22px/1.35 ui-monospace,Consolas,'Courier New',monospace;color:#d8f3ff;white-space:pre} #hud.k-an{display:block} #hud .k-hud-warn{color:#FE8649} /* ---------- Ersatz-INHALT des Kerns ---------- Nur aktiv, solange stationen/inhalt.js (AP11) fehlt oder ausgefallen ist: ein schlichter, voll bedienbarer Hub, damit Türen und Rückweg immer gehen. */ .st-kin-inhalt{background:radial-gradient(90% 60% at 50% 30%,#1c1826,var(--grund) 70%)} .st-kin-inhalt .k-hub-kopf{position:absolute;left:84px;right:84px;top:110px} .st-kin-inhalt .k-hub-kopf .k-wm{font-size:92px;color:var(--ink)} .st-kin-inhalt .k-hub-titel{font:italic 500 40px/1.25 var(--serif);color:var(--mut);margin-top:12px} .st-kin-inhalt .k-hub-termin{position:absolute;left:70px;right:70px;top:380px;display:flex;gap:40px;align-items:center;padding:36px;border-radius:28px; border:1.5px solid rgba(254,134,73,.5);background:linear-gradient(170deg,rgba(241,94,57,.14),rgba(241,94,57,.02))} .st-kin-inhalt .k-hub-termin .k-qr{width:300px;height:300px;flex:0 0 auto} .st-kin-inhalt .k-hub-termin b{display:block;font:700 54px/1.08 var(--serif);color:var(--ink)} .st-kin-inhalt .k-hub-termin p{font:400 30px/1.35 var(--sans);margin-top:14px;color:var(--ink)} .st-kin-inhalt .k-hub-termin p.k-preis{font:600 26px/1.4 var(--sans);color:var(--orange-hell);margin-top:18px} .st-kin-inhalt .k-hub-liste{position:absolute;left:70px;right:70px;top:860px;display:flex;flex-direction:column;gap:18px} .st-kin-inhalt .k-hub-eintrag{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:150px;padding:22px 34px; border-radius:22px;background:rgba(255,255,255,.04);border:1.5px solid var(--linie);color:var(--ink)} .st-kin-inhalt .k-hub-eintrag b{display:block;font:700 44px/1.1 var(--serif)} .st-kin-inhalt .k-hub-eintrag small{display:block;font:400 26px/1.3 var(--sans);color:var(--mut);margin-top:8px} .st-kin-inhalt .k-hub-eintrag span{font:600 30px/1 var(--sans);color:var(--gold);white-space:nowrap} .st-kin-inhalt .k-hub-zurueck{position:absolute;left:70px;right:70px;top:1720px;height:120px;display:flex;align-items:center;justify-content:center; border-radius:22px;background:var(--orange);color:#16100c;font:700 34px/1 var(--sans);letter-spacing:.02em} /* ---------- Video-Einträge der Schleife (wie v1) ---------- */ .k-video{position:absolute;left:0;top:0;width:1080px;height:1920px;object-fit:cover;background:#000;display:none} .k-video.k-an{display:block} /* ---------- &halt=1: alles Dekorative steht still ---------- Endlos-Animationen (Puls, Atmen) würden zwei Aufnahmen desselben Zeitpunkts unterscheiden. Für Bildvergleiche stehen sie auf ihrem Grundzustand. */ .k-halt *,.k-halt *::before,.k-halt *::after{animation:none!important}