/* KERN v20 · Scene layer. No UI text or additional public controls. */
:root{--scene-ink:#0C0D10;--scene-paper:#F1F2EE;--scene-gray:#A4A7AE;--scene-serif:"Source Serif 4",Georgia,serif;--scene-mono:"IBM Plex Mono","Courier New",monospace}
#kern-point{position:fixed;display:block;z-index:10001;margin:0;padding:0;border:0;border-radius:0;background:#8A1E2D;box-shadow:none;filter:none;transform:none;pointer-events:none;transition:none;contain:strict}
#kern-point[hidden]{display:none!important}
/* K-04: the arrival ring. Sized and positioned by JS (element.style), grown 0->70 by WAAPI, then removed. */
.kern-ring{position:fixed;z-index:10001;margin:0;padding:0;box-sizing:border-box;border-radius:50%;border:1.5px solid rgba(138,30,45,.9);background:transparent;pointer-events:none;contain:strict}
html.intro-pending{overflow:hidden;background:#0C0D10}
html.intro-pending body>*:not(#ouverture){visibility:hidden}
html.intro-pending #ouverture{display:block!important;visibility:visible;z-index:10000}
html.intro-pending #ouverture .ouv-wm{opacity:1}
html.intro-pending #ouverture .ouv-chapters,html.intro-pending #ouverture .ouv-txt{opacity:0}
#ouverture{box-sizing:border-box;position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;min-width:0;min-height:0;max-width:none;max-height:none;margin:0;padding:0;border:0;outline:0;background:var(--scene-ink);color:var(--scene-paper);overflow:hidden;overscroll-behavior:contain;isolation:isolate;z-index:10000;visibility:visible}
#ouverture:not([open]){display:none}
#ouverture[open]{display:block}
#ouverture::backdrop{background:transparent}
#ouverture canvas{position:absolute;inset:0;display:block;width:100%;height:100%;opacity:1;pointer-events:none;z-index:0}
/* G-13: meteors sit above the galaxy canvas and below the text/wordmark layers, saver-only. */
#ouverture canvas.ouv-meteors{z-index:1}
#ouverture:not(.saver) canvas.ouv-meteors{display:none}
#ouverture .ouv-wm{position:absolute;left:50%;top:47%;width:min(60vw,540px);transform:translate(-50%,-50%);opacity:0;pointer-events:none;z-index:2;transition:opacity 700ms cubic-bezier(.16,1,.3,1)}
#ouverture .ouv-wm svg{display:block;width:100%;height:auto;overflow:visible}
#ouverture .ouv-wm .ltr{opacity:1;transform:none}
#ouverture .ouv-wm.is-visible{opacity:1}
#ouverture .ouv-chapters{position:absolute;left:calc(20px + env(safe-area-inset-left));top:calc(36px + env(safe-area-inset-top));display:flex;gap:1.2rem;max-width:calc(100% - 190px);font:400 .57rem/1.4 var(--scene-mono);letter-spacing:.12em;text-transform:uppercase;pointer-events:none;z-index:3}
#ouverture .ouv-chapters span{position:relative;opacity:.55;white-space:nowrap;transition:opacity 600ms}
#ouverture .ouv-chapters span::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:1px;background:#F1F2EE;transform:scaleX(0);transform-origin:left;transition:transform 750ms cubic-bezier(.16,1,.3,1)}
#ouverture .ouv-chapters .is-current{opacity:1}
#ouverture .ouv-chapters .is-current::after{transform:scaleX(1)}
#ouverture .ouv-skip{box-sizing:border-box;position:absolute;right:calc(20px + env(safe-area-inset-right));top:calc(20px + env(safe-area-inset-top));z-index:4;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin:0;padding:.65rem 1rem;border:1px solid #6E7178;border-radius:0;background:rgba(12,13,16,.82);color:#F1F2EE;font:400 .65rem/1.5 var(--scene-mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;cursor:pointer;outline:none;box-shadow:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:color 180ms,background 180ms,border-color 180ms}
#ouverture .ouv-skip:focus,#ouverture .ouv-skip:focus-visible{outline:none;box-shadow:none}
.keyboard-input #ouverture .ouv-skip:focus{outline:2px solid #F1F2EE;outline-offset:5px}
@media(hover:hover){#ouverture .ouv-skip:hover{background:#F1F2EE;color:#0C0D10;border-color:#F1F2EE}}
#ouverture .ouv-txt{position:absolute;left:50%;bottom:clamp(105px,14dvh,180px);transform:translateX(-50%);width:min(86vw,740px);text-align:center;pointer-events:none;z-index:2}
#ouverture .ouv-txt span{position:absolute;left:0;right:0;bottom:0;font:300 italic clamp(1.05rem,2.2vw,1.5rem)/1.55 var(--scene-serif);opacity:0;transform:none;filter:none;transition:opacity 650ms ease;overflow-wrap:break-word}
#ouverture .ouv-txt span.is-visible{opacity:1}
#ouverture .ouv-hint{position:absolute;left:10%;right:10%;bottom:calc(34px + env(safe-area-inset-bottom));margin:0;color:#B4B7BC;font:400 .64rem/1.6 var(--scene-mono);letter-spacing:.045em;text-align:center;pointer-events:none;z-index:2}
#ouverture .ouv-dot{display:none}
#ouverture.intro::after,#ouverture.saver::after{content:"";position:absolute;inset:48% 0 0;background:linear-gradient(0deg,rgba(12,13,16,.98),rgba(12,13,16,.94) 36%,rgba(12,13,16,.72) 66%,rgba(12,13,16,0));pointer-events:none;z-index:1}
#ouverture.intro::after{inset:60% 0 0}
#ouverture.saver .ouv-wm,#ouverture.saver .ouv-txt,#ouverture.saver .ouv-chapters,#ouverture.saver .ouv-hint{display:none}
#ouverture .ouv-satz{position:absolute;left:50%;bottom:clamp(88px,15dvh,210px);transform:translateX(-50%);width:min(84vw,770px);margin:0;font:300 italic clamp(1.2rem,2.3vw,1.8rem)/1.58 var(--scene-serif);color:#F1F2EE;text-align:center;opacity:0;filter:none;transition:opacity 1200ms ease;pointer-events:none;z-index:2;text-wrap:pretty}
#ouverture .ouv-satz.is-visible{opacity:1}
#ouverture .ouv-sentence-tail{white-space:nowrap}
#ouverture .sentence-point-target{display:inline-block;width:.17em;height:.17em;margin-left:.18em;visibility:hidden;vertical-align:baseline}
#ouverture:not(.saver) .ouv-satz{display:none}
#ouverture.saver.entering{opacity:0;transition:opacity 1200ms ease}
#ouverture.saver.entering.is-visible{opacity:1}
#ouverture.handoff{background:transparent;transition:background 550ms ease}
#ouverture.handoff canvas,#ouverture.handoff::after,#ouverture.handoff .ouv-wm,#ouverture.handoff .ouv-txt,#ouverture.handoff .ouv-chapters,#ouverture.handoff .ouv-hint{opacity:0;transition:opacity 550ms ease}
html[data-scene-active] .grain{visibility:hidden}
html[data-scene-active] .scrollhint span::after{animation-play-state:paused}
@media(max-width:600px){#ouverture .ouv-chapters{top:calc(91px + env(safe-area-inset-top));max-width:90vw;font-size:.56rem;gap:1.1rem}#ouverture .ouv-wm{width:80vw;top:44%}#ouverture .ouv-txt{width:86vw;bottom:clamp(115px,18dvh,155px)}#ouverture .ouv-satz{width:86vw;bottom:clamp(85px,14dvh,160px)}#ouverture.saver::after{inset:38% 0 0}#ouverture .ouv-hint{font-size:.6rem}}
@media(max-height:520px){#ouverture .ouv-wm{width:min(40vw,300px);top:40%}#ouverture .ouv-txt{bottom:70px}#ouverture .ouv-satz{bottom:45px;font-size:1.15rem}#ouverture .ouv-hint{bottom:22px}#ouverture .ouv-chapters{top:36px;font-size:.5rem;gap:.7rem}}
@media(prefers-reduced-motion:reduce){#ouverture .ouv-wm{transition:opacity 650ms linear!important}#ouverture .ouv-txt span,#ouverture .ouv-satz{transition:opacity 1200ms linear!important;filter:none!important}#ouverture.saver.entering{transition:opacity 1200ms linear!important}}
@media print{#ouverture,#kern-point,.kern-ring{display:none!important}html.intro-pending{overflow:visible}html.intro-pending body>*{visibility:visible}}
/* R-08: the sentence journey resolves into the existing wordmark, then a two-second departure. */
#ouverture.saver.journey-finale .ouv-wm{display:block;top:47%;transition:opacity 1000ms ease}
#ouverture.saver.journey-finale .ouv-satz{display:none}
#ouverture.saver.journey-finale canvas{opacity:0;transition:opacity 1800ms ease}
#ouverture.saver.journey-out{opacity:0!important;transition:opacity 2000ms linear!important;pointer-events:auto}
@media(prefers-reduced-motion:reduce){#ouverture.saver.journey-finale .ouv-wm{transition:opacity 1000ms linear!important}}
/* F-01: one wide-gamut accent, with the unchanged sRGB colour as fallback. */
@supports(color:color(display-p3 1 0 0)){@media(color-gamut:p3){#kern-point{background:color(display-p3 .541176 .117647 .176471)}}}

/* F-03: cross-document navigation. A single new point is painted, never old + new. */
@view-transition{navigation:auto}
#hd{view-transition-name:kern-header}
#kern-point{view-transition-name:kern-point}
::view-transition-group(*){animation-duration:300ms;animation-timing-function:cubic-bezier(.16,1,.3,1)}
::view-transition-old(kern-point){display:none}
::view-transition-new(kern-point){animation:none;mix-blend-mode:normal}
::view-transition-old(kern-header),::view-transition-new(kern-header){animation:none;mix-blend-mode:normal}

/* v20.3 (30.09.2026, decision J. Kern): "Hinter KERN muss immer der Punkt sein." Every visible wordmark
   (header, menu overlay, hero, footer) carries its own permanent red dot, with or without JavaScript.
   M-01 now only governs everything outside wordmark and sentence point. Dot geometry follows M-02:
   0.20 cap height square, 0.22 cap height gap, bottom edge on the baseline. In the hero/footer SVG the
   existing <rect> (14 x 14 on a 68.8 cap, gap 14.85 to the N) is simply shown; in the header/menu the
   inline marker is .14em (cap height is ~.70em, so 0.20 cap) and its negative margin-left (-.095em header, -.075em menu, fitted
   by measurement at 8x DPR) cancels part of the N's right bearing + the wordmark's trailing letter-spacing
   down to a ~0.22 cap ink gap.
   #kern-point (the moving element) is used only by intro and saver. */
[data-brand-dot]{visibility:visible}
.logo i[data-brand-dot],.logo:hover i[data-brand-dot],.logo:focus-visible i[data-brand-dot],.menu-point-target{display:inline-block;width:.14em;height:.14em;margin:0 0 0 -.095em;padding:0;border:0;border-radius:0;background:#8A1E2D;box-shadow:none;transform:none;transition:none;vertical-align:baseline}
.menu-point-target{margin-left:-.075em}
.hero .marke rect[data-brand-dot],.abspann .wm rect[data-brand-dot]{fill:#8A1E2D;visibility:visible}
html[data-scene-active] [data-brand-dot]{visibility:hidden!important}
@supports(color:color(display-p3 1 0 0)){@media(color-gamut:p3){
.logo i[data-brand-dot],.logo:hover i[data-brand-dot],.logo:focus-visible i[data-brand-dot],.menu-point-target{background:color(display-p3 .541176 .117647 .176471)}
.hero .marke rect[data-brand-dot],.abspann .wm rect[data-brand-dot]{fill:color(display-p3 .541176 .117647 .176471)}}}