/* Gemeinsame Bausteine aller Seiten: Vorhang (Lader + Seitenwechsel),
   Buchstaben aus der Grundlinie, Text der sich beim Lesen fuellt. */

/* --- Vorhang: zwei Haelften mit Kerbe --- */
.aw-veil{position:fixed;inset:0;z-index:200;pointer-events:none;animation:awVeilFallback 0s linear 3.2s forwards}
.aw-veil.aw-ctl{animation:none}
.aw-veil.aw-gone{visibility:hidden}
@keyframes awVeilFallback{to{visibility:hidden}}
.aw-h{position:absolute;left:0;right:0;background:var(--navy-deep);pointer-events:auto;transition:transform .95s var(--ease-in-out,cubic-bezier(.65,0,.35,1))}
.aw-h.t{top:0;height:calc(50% + 1px);clip-path:polygon(0 0,100% 0,100% 100%,calc(50% + 44px) 100%,calc(50% + 26px) calc(100% - 18px),calc(50% - 26px) calc(100% - 18px),calc(50% - 44px) 100%,0 100%)}
.aw-h.b{bottom:0;height:calc(50% + 18px);clip-path:polygon(0 18px,calc(50% - 44px) 18px,calc(50% - 26px) 0,calc(50% + 26px) 0,calc(50% + 44px) 18px,100% 18px,100% 100%,0 100%)}
.aw-veil.open .aw-h.t{transform:translateY(-101%)}
.aw-veil.open .aw-h.b{transform:translateY(101%)}
.aw-veil.open .aw-lines,.aw-veil.open .aw-logo{opacity:0;transition:opacity .3s}
.aw-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.aw-lines *{fill:none;stroke:rgba(245,240,235,.16);stroke-width:1;vector-effect:non-scaling-stroke}
.aw-logo{position:absolute;left:50%;top:calc(50% - 200px);width:min(220px,44vw);translate:-50% 0;overflow:visible}
.aw-logo path{stroke-width:2.2;fill-opacity:0}
.aw-logo path.c{stroke:#F5F0EB;fill:#F5F0EB}
.aw-logo path.o{stroke:#C85A17;fill:#C85A17}


/* --- Buchstaben steigen aus der Grundlinie --- */
.aw-wd{display:inline-block;white-space:nowrap;overflow:hidden;vertical-align:top;padding:.08em .1em .32em;margin:-.08em -.1em -.32em}
.aw-done .aw-wd{overflow:visible}
.aw-ch{display:inline-block;transform:translateY(108%) rotate(4deg);transform-origin:0 100%;transition:transform .95s var(--ease-expo,cubic-bezier(.19,1,.22,1));transition-delay:calc(var(--d,0) * 1ms)}
.aw-in .aw-ch{transform:none}

/* --- Text fuellt sich beim Lesen, Wort fuer Wort --- */
.aw-rw{color:var(--fg3,rgba(245,240,235,.48));transition:color .35s linear}
.aw-rw.on{color:var(--fg1,#F5F0EB)}

/* --- Aufdecken von Bildern von unten --- */
.aw-clip{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--ease-expo,cubic-bezier(.19,1,.22,1))}
.aw-clip.aw-in{clip-path:inset(0 0 0 0)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .aw-ch{transform:none}
  .aw-clip{clip-path:none}
  .row{flex-wrap:wrap;width:auto;padding:0 var(--gutter)}
}

/* --- Wortmarke im Fuss: das Lockup gross gesetzt (Signet + Medic creme + Songs orange, Lora 700 aufrecht) --- */
.aw-mark{display:flex;align-items:center;gap:.22em;font:700 clamp(40px,11.6vw,220px)/1 var(--font-display);letter-spacing:-.01em;color:var(--fg1,#F5F0EB);white-space:nowrap;margin:24px 0 0;user-select:none;pointer-events:none}
.aw-mark-ic{height:1.18em!important;width:auto!important;flex:none}
.aw-mark-t b{font-weight:700;color:var(--orange,#C85A17)}
/* Oeffnen ohne Ruckeln: Vorhanghaelften und Hero-Buchstaben werden schon waehrend der Logo-Pause als eigene Ebenen vorbereitet */
.aw-h{will-change:transform}
.hero h1 .aw-ch{will-change:transform}
/* Nie breiter als der Bildschirm (User 17.10.: am Handy spielte nicht jeder Song): eine herausgleitende Platte am
   rechten Rand machte die Seite breiter, der Handy-Browser zoomte heraus und jedes weitere Antippen traf daneben.
   clip statt hidden: kein eigener Scrollbereich, position:sticky bleibt intakt. */
html,html body{overflow-x:clip}
/* nur fuer Suchmaschinen und Vorleseprogramme sichtbar (Markenname vorn in der h1, sichtbar bleibt der Leitsatz) */
.aw-sr{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}

/* Ladezeit (User 03.11.): Teile mit Kursiv- oder Monoschrift im ersten Bild warten auf ihre Schrift und blenden dann ein */
html.fw:not(.fm) :is(header nav,.crumbs,.mono,.aw-rail,.abc-hint,h1 em,.abc-h em){opacity:0}html.fm-t :is(header nav,.crumbs,.mono,.aw-rail,.abc-hint,h1 em,.abc-h em){transition:opacity .45s ease}