/* KERN v21 · Scene layer (Auftakt „Tausend Entscheidungen, ein Punkt“, Ruhebild „Die Reise“). No UI text, no additional public controls. */
:root{--scene-ink:#0C0D10;--scene-paper:#F1F2EE;--scene-gray:#A4A7AE;--scene-serif:"Source Serif 4",Georgia,serif;--scene-sans:"Archivo",system-ui,sans-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}
/* Markenregel 30.09.2026: jede sichtbare Wortmarke trägt ihren Punkt. Die Marker sind echte Punkte; #kern-point wird nur in Szenen gemalt. */
[data-brand-dot]{visibility:visible!important}
rect[data-brand-dot]{fill:#8A1E2D!important}
.logo i,.menu-point-target{background:#8A1E2D!important}
html:not([data-scene-active]) #kern-point{display:none!important}
/* Footer-Wortmarke samt Punkt vollständig über der Haarlinie (Freigabe 30.09.2026). */
.abspann .wm{transform:none;padding-bottom:2.2rem}
/* M-02: header dot in wordmark proportion (edge ≈ 0.2 × cap height). */
.logo i{width:.17em;height:.17em;margin-left:.1em;vertical-align:baseline}
.menu-point-target{display:inline-block;width:.17em;height:.17em;margin-left:.1em}
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-hint,html.intro-pending #ouverture .ouv-tag{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;touch-action:none}
#ouverture:not([open]){display:none}
#ouverture[open]{display:block}
#ouverture.intro{cursor:pointer}
#ouverture::backdrop{background:transparent}
#ouverture canvas{position:absolute;inset:0;display:block;width:100%;height:100%;opacity:1;pointer-events:none;z-index:0}
#ouverture .ouv-meteor{z-index:1;display:none}
#ouverture.saver .ouv-meteor{display:block}
#ouverture .ouv-words{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2}
#ouverture .ouv-word{position:absolute;left:0;top:0;white-space:nowrap;font:500 .8rem/1 var(--scene-sans);letter-spacing:.06em;color:var(--scene-paper);opacity:0;transform:translate(-200px,-200px);will-change:transform,opacity;text-shadow:0 0 12px rgba(0,0,0,.9)}
#ouverture:not(.intro) .ouv-words{display:none}
#ouverture .ouv-wm{position:absolute;left:50%;top:44%;width:clamp(118px,15vw,196px);transform:translate(-50%,-50%);opacity:0;pointer-events:none;z-index:3;transition:opacity 1100ms 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-tag{position:absolute;left:50%;top:44%;transform:translate(-50%,0);margin:0;padding-top:clamp(40px,7vh,72px);width:min(88vw,42ch);text-align:center;font:400 clamp(.875rem,1.35vw,1.125rem)/1.5 var(--scene-sans);letter-spacing:.06em;color:rgba(241,242,238,.62);opacity:0;pointer-events:none;z-index:3;text-wrap:balance;transition:opacity 1500ms cubic-bezier(.2,.7,.1,1),letter-spacing 1500ms cubic-bezier(.2,.7,.1,1)}
#ouverture .ouv-tag.is-visible{opacity:1}
#ouverture:not(.intro) .ouv-tag{display:none}
#ouverture .ouv-ring{position:absolute;left:50%;top:50%;width:var(--ring-size,10px);height:var(--ring-size,10px);transform:translate(-50%,-50%);border:1px solid #8A1E2D;box-sizing:border-box;opacity:0;pointer-events:none;z-index:2}
#ouverture .ouv-ring.is-on{animation:ouv-ring 1400ms cubic-bezier(.2,.7,.2,1) 1 forwards}
@keyframes ouv-ring{0%{opacity:.9;width:var(--ring-size,10px);height:var(--ring-size,10px)}100%{opacity:0;width:calc(var(--ring-size,10px) * 22);height:calc(var(--ring-size,10px) * 22)}}
#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-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;transition:opacity 600ms ease}
#ouverture .ouv-hint.is-off,#ouverture[data-phase="collapse"] .ouv-hint,#ouverture[data-phase="arrival"] .ouv-hint,#ouverture[data-phase="mark"] .ouv-hint,#ouverture[data-phase="handoff"] .ouv-hint{opacity:0}
#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.saver .ouv-wm,#ouverture.saver .ouv-hint,#ouverture.saver .ouv-ring{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-tag,#ouverture.handoff .ouv-hint,#ouverture.handoff .ouv-words{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-wm{width:38vw;top:42%}#ouverture .ouv-tag{top:42%;padding-top:clamp(34px,6vh,56px);width:88vw}#ouverture .ouv-satz{width:86vw;bottom:clamp(85px,14dvh,160px)}#ouverture.saver::after{inset:38% 0 0}#ouverture .ouv-hint{font-size:.6rem}#ouverture .ouv-word{font-size:.72rem}}
@media(min-width:900px){#ouverture .ouv-word{font-size:.9rem}}
@media(max-height:520px){#ouverture .ouv-wm{width:min(26vw,160px);top:38%}#ouverture .ouv-tag{top:38%;padding-top:30px}#ouverture .ouv-satz{bottom:45px;font-size:1.15rem}#ouverture .ouv-hint{bottom:22px}}
@media(prefers-reduced-motion:reduce){#ouverture .ouv-wm{transition:opacity 650ms linear!important}#ouverture .ouv-tag,#ouverture .ouv-satz{transition:opacity 1200ms linear!important;filter:none!important}#ouverture.saver.entering{transition:opacity 1200ms linear!important}#ouverture .ouv-ring{display:none!important}#ouverture .ouv-word{transition:none}}
@media print{#ouverture,#kern-point{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}