/* wow-stufe3-2026-09-18 — Wow-Stufe 3 fuer alle augmanitai-Seiten. Nur CSS, kein Skript.
   Nach Grok-Rangliste G15 (groesster Wow je Kilobyte): 1 text-wrap balance · 2 Fokus-Goldring ·
   9 View Transitions (weicher Seitenwechsel, ganze Site) · 6 @starting-style am Galerie-Dialog ·
   4 Scroll-Snap-Schiene fuers Kino auf dem Handy · 7 Gold-Einlauf per Scroll-Zeitachse (nur wo unterstuetzt).
   Alles hinter @supports / @media; ohne Unterstuetzung bleibt die Seite unveraendert. */

/* 1 Ueberschriften brechen ausgewogen (keine Einzelwort-Zeilen) */
h1,h2,h3,.eyebrow{text-wrap:balance}

/* 2 Tastatur: Goldring statt Browser-Blau */
:focus-visible{outline:2px solid #e0c878;outline-offset:3px;border-radius:4px}
a:focus:not(:focus-visible){outline:none}

/* 9 Seitenwechsel als weicher Ueberblend (Chrome/Edge/Safari; andere ignorieren es) */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:wow3-out .22s ease-in both}
  ::view-transition-new(root){animation:wow3-in .32s ease-out both}
  @keyframes wow3-out{to{opacity:0;transform:translateY(-6px)}}
  @keyframes wow3-in{from{opacity:0;transform:translateY(8px)}}
  /* 01.10.2026 — Wort-Wandlung: Waehrend eines Seitenwechsels traegt die Ueberschrift einen Namen. Das angetippte Wort bekommt
     im Augenblick des Antippens denselben Namen (blatt-2026-10-01.js) und wird so zur Ueberschrift der naechsten Seite.
     Der Name gilt NUR waehrend des Wechsels (:active-view-transition) - sonst bleibt die Ueberschrift, wie sie ist. */
  :root:active-view-transition h1{view-transition-name:blatt-wort}
  ::view-transition-group(blatt-wort){animation-duration:.5s;animation-timing-function:cubic-bezier(.2,.7,.15,1)}
}

/* 6 Galerie-Dialog oeffnet als Vorhang */
@media (prefers-reduced-motion:no-preference){
  .wow-art-dialog[open]{opacity:1;transform:translateY(0) scale(1);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.7,.2,1),overlay .45s allow-discrete,display .45s allow-discrete}
  @starting-style{.wow-art-dialog[open]{opacity:0;transform:translateY(18px) scale(.985)}}
  .wow-art-dialog::backdrop{transition:background-color .4s ease}
  @starting-style{.wow-art-dialog[open]::backdrop{background-color:transparent}}
}

/* 4 Kino als Wisch-Schiene auf dem Handy (ohne Skript) */
@media (max-width:760px){
  #kino .cinema-grid{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scroll-padding-inline:16px;padding-bottom:6px}
  #kino .cinema-grid>*{flex:0 0 86%;scroll-snap-align:start}
}

/* 7 Gold-Einlauf per Scroll-Zeitachse: Karten laufen leicht ein, wenn sie ins Bild kommen */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .perspective-routes>a,.cinema-grid>*,.evidence-piece,.decision-note,.talks-writings article,.lex-row,.work-card,.g-figure{animation:wow3-rise linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
    @keyframes wow3-rise{from{opacity:.35;transform:translateY(16px)}to{opacity:1;transform:none}}
  }
}

/* Ruhe: was nicht im Bild ist, pausiert (Skript wow-ruhe setzt die Klasse) */
.wow-ruhe,.wow-ruhe *,.wow-ruhe *::before,.wow-ruhe *::after,.wow-ruhe::before,.wow-ruhe::after{animation-play-state:paused!important}
html.wow-ruhe-alle *,html.wow-ruhe-alle *::before,html.wow-ruhe-alle *::after{animation-play-state:paused!important}

/* Handy: KI-Etikett auf den Wege-Karten klein halten (Kennzeichnung bleibt lesbar, Bild bleibt sichtbar) */
@media (max-width:760px){.perspective-routes .ai-media-origin{font-size:12.5px!important;line-height:1.35!important;padding:2px 6px!important;top:16px!important;left:16px!important;max-width:72%;letter-spacing:.03em!important}}

/* wortmarke-0110 — 01.10.2026: neue Wortmarke AUG|MAN / IT|AI in der Kopfzeile jeder Seite (Andreas-Wort). Der bisherige
   Schriftzug bleibt als Text fuer Vorlese-Programme erhalten, wird aber nicht mehr gezeichnet; gezeigt wird die Zeichnung
   assets/logo-augmanitai-wortmarke.svg. */
html:root:root body a[data-c43="brand"],html:root:root body a.ml-brand,html:root:root body header a.brand{font-size:0!important;line-height:0!important;letter-spacing:0!important;color:transparent!important;text-shadow:none!important;display:inline-flex!important;align-items:center!important;gap:0!important;flex:0 0 auto!important;width:108px!important;min-width:108px!important;max-width:108px!important;min-height:44px;overflow:hidden!important;white-space:nowrap!important;text-decoration:none!important;background:none!important;padding:0!important;box-sizing:content-box!important;border:0!important;-webkit-text-fill-color:transparent!important}
html:root:root body a[data-c43="brand"] *,html:root:root body a.ml-brand *,html:root:root body header a.brand *{display:none!important}
html:root:root body a[data-c43="brand"]::before,html:root:root body a.ml-brand::before,html:root:root body header a.brand::before{content:""!important;display:block!important;flex:0 0 108px!important;width:108px!important;height:40px!important;margin:0!important;background:#f4ead0!important;-webkit-mask:url(/assets/logo-augmanitai-wortmarke.svg) left center/contain no-repeat;mask:url(/assets/logo-augmanitai-wortmarke.svg) left center/contain no-repeat;position:static!important;transform:none!important;opacity:1!important;border:0!important;border-radius:0!important;box-shadow:none!important;animation:none!important;filter:none!important}
html:root:root body a[data-c43="brand"]::after,html:root:root body a.ml-brand::after,html:root:root body header a.brand::after{content:none!important}
@media (max-width:700px){html:root:root body a[data-c43="brand"],html:root:root body a.ml-brand,html:root:root body header a.brand{width:92px!important;min-width:92px!important;max-width:92px!important}html:root:root body a[data-c43="brand"]::before,html:root:root body a.ml-brand::before,html:root:root body header a.brand::before{flex-basis:92px!important;width:92px!important;height:34px!important}}