/* ════════════════════════════════════════════════════════════════════════════
   KIWERK OS · gemeinsames Stylesheet aller Seiten

   Herkunft: Dieses Blatt ist aus der einseitigen Landingpage herausgelöst. Die
   Tokens, das Sektionsgerüst und die Bausteine sind unverändert übernommen,
   neu sind das Kachelportal der Startseite (.portal), die mobile Navigation
   (.navpanel/.navtoggle) und das Gerüst der Rechtsseiten (.legal).

   Entscheidungen stehen in landingpage/DESIGN.md, die Markenregeln in
   Brand/KIWERK-OS-Design-Prinzipien.md. Beide Dateien liegen nur im
   Projektordner und werden nicht auf den Webspace hochgeladen.
   ════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════  Schrift  ══
   Archivo liegt lokal: kein Aufruf an fonts.googleapis.com oder
   fonts.gstatic.com, damit ohne Einwilligung keine IP-Adresse zu Google geht.
   Variable Font mit zwei Achsen (wdth 62 bis 125, wght 400 bis 900), die
   unicode-range-Aufteilung entspricht den Subsets von Google Fonts.
   Lizenz: SIL Open Font License 1.1, Volltext in assets/fonts/OFL.txt. */
@font-face{
  font-family:"Archivo";
  font-style:normal;
  font-weight:400 900;
  font-stretch:62% 125%;
  font-display:swap;
  src:url("../fonts/archivo-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
    U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Archivo";
  font-style:normal;
  font-weight:400 900;
  font-stretch:62% 125%;
  font-display:swap;
  src:url("../fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
    U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ════════════════════════════════════════════════════════════  Tokens  ══ */
:root{
  --paper:      #F7EFE1;   /* Grundfläche, aus dem Logo gemessen */
  --paper-deep: #EEE2CE;   /* zweite Papierstufe für Felder */
  --ink:        #22262A;   /* Textfarbe */
  --ink-soft:   #4C4740;   /* Sekundärtext, warm getönt statt grau, 8,1:1 auf Papier */
  --ink-deep:   #191C1F;   /* invertierte Flächen */
  --signal:     #F4571B;   /* Marker, Flächen, nie Fließtext auf Papier (2,95:1) */
  --signal-ink: #D8410A;   /* dieselbe Familie, aber textfähig, 3,9:1 auf Papier */

  --gap: clamp(1.25rem, 2.4vw, 2.25rem);
  --edge: clamp(1.25rem, 4.4vw, 4.5rem);
  --rhythm: clamp(2.4rem, 5vw, 4.5rem);

  /* Bewegungsgrammatik: ein Ease, überall */
  --ease: cubic-bezier(.16,1,.3,1);
  --scroll: 0;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; overflow-x:clip; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  overflow-x:clip;
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-variation-settings:"wdth" 100,"wght" 450;
  font-size:clamp(.95rem,.55vw + .82rem,1.075rem);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--signal); color:var(--paper); }
:focus-visible{ outline:2px solid var(--signal); outline-offset:3px; }
img,video,canvas{ max-width:100%; }

.skip{
  position:absolute; left:var(--edge); top:0; z-index:60;
  transform:translateY(-120%);
  background:var(--ink); color:var(--paper);
  padding:.7rem 1.1rem; text-decoration:none;
  font-variation-settings:"wdth" 92,"wght" 750; font-size:.82rem; text-transform:uppercase;
  transition:transform .3s var(--ease);
}
.skip:focus-visible{ transform:translateY(0); }

/* ═════════════════════════════════════════════════════════  Kopfleiste  ══ */
.masthead{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:var(--gap);
  padding:.9rem var(--edge);
  background:var(--paper);
  border-bottom:1px solid var(--ink);
}
/* Die Wortmarke ist Logotype, nicht Fließtext: das orange „KI“ ist deshalb von
   der Kontrastregel ausgenommen (WCAG 1.4.3 nimmt Marken ausdrücklich aus)
   und folgt dem Lockup aus Brand/kiwerk_horizontal.svg. */
.wordmark{
  display:block; color:inherit; text-decoration:none;
  font-variation-settings:"wdth" 84,"wght" 900;
  font-size:clamp(1rem,1.3vw,1.2rem);
  letter-spacing:-.005em; text-transform:uppercase; line-height:1;
  white-space:nowrap;
}
.wordmark em{ font-style:normal; color:var(--signal); }
.wordmark .os{ margin-left:.28em; }
.wordmark .sub{
  display:block; margin-top:.28em;
  font-size:.6em; letter-spacing:.055em;
  font-variation-settings:"wdth" 88,"wght" 600;
  color:var(--ink-soft);
}

.masthead__end{ display:flex; align-items:center; gap:clamp(.9rem,1.7vw,1.8rem); }
.navpanel{ display:flex; align-items:center; gap:clamp(.9rem,1.7vw,1.8rem); }
.navlink{
  position:relative; color:inherit; text-decoration:none;
  font-variation-settings:"wdth" 92,"wght" 650;
  font-size:.8rem; letter-spacing:.02em; text-transform:uppercase;
  padding-block:.35rem;
}
.navlink::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--signal); transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease);
}
.navlink:hover::after,.navlink:focus-visible::after{ transform:scaleX(1); }
/* Die Seite, auf der man steht, trägt den Marker dauerhaft */
.navlink[aria-current="page"]{ font-variation-settings:"wdth" 92,"wght" 800; }
.navlink[aria-current="page"]::after{ transform:scaleX(1); }

/* ── Mobile Navigation ──
   Ohne JavaScript bleibt das Panel eine normale, umbrechende Zeile: alle Links
   sind erreichbar. Erst mit JS (html.js) wird es zum ausklappbaren Menü. Der
   Primärbutton bleibt immer sichtbar, er ist die einzige Aktion. */
.navtoggle{
  display:none;
  align-items:center; gap:.5rem;
  padding:.55rem .8rem; border:1px solid var(--ink); border-radius:0;
  background:transparent; color:var(--ink); font:inherit; cursor:pointer;
  font-variation-settings:"wdth" 92,"wght" 750;
  font-size:.72rem; letter-spacing:.04em; text-transform:uppercase;
}
.navtoggle__bars{ position:relative; width:1rem; height:.7rem; flex:none; }
.navtoggle__bars::before,.navtoggle__bars::after{
  content:""; position:absolute; left:0; right:0; height:2px; background:var(--ink);
  transition:transform .35s var(--ease), top .35s var(--ease);
}
.navtoggle__bars::before{ top:0; }
.navtoggle__bars::after{ top:calc(100% - 2px); }
.navtoggle[aria-expanded="true"] .navtoggle__bars::before{ top:calc(50% - 1px); transform:rotate(45deg); }
.navtoggle[aria-expanded="true"] .navtoggle__bars::after{ top:calc(50% - 1px); transform:rotate(-45deg); }

@media (max-width:1080px){
  .navtoggle{ display:inline-flex; }
  .navpanel{ flex-wrap:wrap; gap:.6rem 1.1rem; }
  .js .navpanel{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); border-bottom:1px solid var(--ink);
    padding:.5rem var(--edge) 1.1rem;
  }
  .js .navpanel.is-open{ display:flex; }
  .js .navpanel .navlink{
    padding:.85rem 0; font-size:.95rem;
    border-top:1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  }
  .js .navpanel .navlink::after{ display:none; }
  .js .navpanel .navlink[aria-current="page"]{ color:var(--signal-ink); }
}

/* ════════════════════════════════════════════════════════════  Buttons  ══ */
.btn{
  display:inline-flex; align-items:center; gap:.7rem;
  padding:.95rem 1.5rem; border:1px solid var(--ink); border-radius:0;
  font-variation-settings:"wdth" 92,"wght" 750;
  font-size:.9rem; letter-spacing:.01em; text-transform:uppercase;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  background:transparent; color:var(--ink); font-family:inherit;
  transition:background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.btn--primary{ background:var(--ink); color:var(--paper); }
.btn--primary .tick{ width:.62em; height:.62em; background:var(--signal); flex:none; transition:transform .45s var(--ease); }
.btn--primary:hover{ background:var(--ink-deep); }
.btn--primary:hover .tick{ transform:translateX(.3rem) rotate(45deg); }
.btn--ghost:hover{ background:var(--ink); color:var(--paper); }
.btn--sm{ padding:.62rem 1rem; font-size:.78rem; }
.btn:active{ transform:translateY(1px); }
/* Kurzform der Beschriftung. Immer nur eine der beiden ist im Dokument
   sichtbar, display:none nimmt die andere auch aus dem Accessibility-Baum,
   der Button hat also stets genau einen Namen. */
.btn__mini{ display:none; }
/* Ab hier wird es eng: Wortmarke, Aktion und Menü müssen zusammen in 320 px
   passen. Deshalb kurze Beschriftung, Menü nur als Zeichen, kleinere Abstände.
   Ohne das schob der Menü-Button aus dem Viewport, und overflow-x:clip hätte
   ihn lautlos abgeschnitten statt scrollbar zu machen. */
@media (max-width:600px){
  .masthead{ padding-inline:1rem; gap:.55rem; }
  .masthead__end{ gap:.5rem; }
  .masthead .btn{ padding:.55rem .7rem; font-size:.7rem; gap:.4rem; }
  .btn__full{ display:none; }
  .btn__mini{ display:inline; }
  .navtoggle{ padding:.5rem; gap:0; }
  .navtoggle__label{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip-path:inset(50%); white-space:nowrap;
  }
  .js .navpanel{ padding-inline:1rem; }
}
@media (max-width:400px){
  .masthead .wordmark .sub{ font-size:.55em; letter-spacing:.04em; }
}
/* Auf dunkler Fläche kehrt sich das Verhältnis um */
.on-ink .btn{ border-color:var(--paper); color:var(--paper); }
.on-ink .btn--primary{ background:var(--paper); color:var(--ink); }
.on-ink .btn--primary:hover{ background:#fff; }
.on-ink .btn--ghost:hover{ background:var(--paper); color:var(--ink); }

/* ═══════════════════════════════════════════════════════════════  Hero  ══ */
.hero{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--gap);
  padding:clamp(1.75rem,3.6vw,3.5rem) var(--edge) clamp(1.75rem,3.4vw,3rem);
  align-items:start;
}
.hero__type{ grid-column:1 / span 7; }
.hero__mark{ grid-column:8 / -1; justify-self:end; width:100%; max-width:420px; }

/* Die Marke steht im ersten Bildschirm über der Aussage, nicht nur klein in der
   Kopfleiste. Logotype-Regel wie oben: das orange „KI“ ist kontrastbefreit. */
.brandline{
  margin:0 0 .55rem;
  font-variation-settings:"wdth" 82,"wght" 900;
  font-size:clamp(1.55rem,2.9vw,2.5rem);
  line-height:1; letter-spacing:-.015em; text-transform:uppercase;
}
.brandline em{ font-style:normal; color:var(--signal); }
.brandline .os{ margin-left:.24em; }

.kicker{
  display:flex; align-items:center; gap:.7rem;
  font-variation-settings:"wdth" 90,"wght" 700;
  font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
  margin:0 0 clamp(1.1rem,2vw,1.8rem);
}
.kicker::before{ content:""; width:2.5rem; height:2px; background:var(--signal); flex:none; }

h1{
  margin:0;
  font-variation-settings:"wdth" 84,"wght" 900;
  font-size:clamp(2.1rem,5.1vw,5rem);
  line-height:.92;   /* .86 war zu eng: Umlautpunkte stoßen an die Zeile darüber */
  letter-spacing:-.035em;
  text-transform:uppercase;
  text-wrap:balance;
}
/* Kopfraum für Umlautpunkte: bei .86 würde overflow:hidden die Punkte kappen */
h1 .line{ display:block; overflow:hidden; padding-top:.16em; margin-top:-.16em; }
h1 .line > span{ display:block; }
h1 .accent{ color:var(--signal-ink); }

.lede{
  margin:clamp(1.1rem,2vw,1.75rem) 0 0;
  max-width:46ch;
  font-size:clamp(1.02rem,.6vw + .9rem,1.24rem);
  font-variation-settings:"wdth" 100,"wght" 500;
  line-height:1.45;
}
.lede strong{ font-variation-settings:"wdth" 100,"wght" 750; }
.audience{ margin:1rem 0 0; max-width:52ch; font-size:.92rem; line-height:1.5; color:var(--ink-soft); }
.actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:clamp(1.25rem,2.4vw,2rem); }

/* ─────────────────────────────────  Signet: Halbkreis + Stadt  ── */
.mark{ position:relative; aspect-ratio:1; width:100%; }
.mark > *{ position:absolute; }
.mark__dots{
  left:0; top:3%; width:24%; height:24%;
  background-image:radial-gradient(var(--ink) 1.7px, transparent 1.8px);
  background-size:25% 25%; background-position:6% 6%;
}
.mark__square{ left:1%; top:35%; width:19%; height:19%; background:var(--ink); }
.mark__media{
  left:19%; top:9%; width:70%; height:70%;
  border-radius:50%; overflow:hidden;
  background:var(--paper-deep); will-change:transform;
}
.mark__media canvas,.mark__media video{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; object-fit:cover;
  transform:scale(calc(1 + .07 * var(--scroll))); transform-origin:50% 50%;
}
/* Footage wird auf die Markenfarben gezogen, funktioniert mit jedem Material */
.mark__media video{ opacity:0; filter:grayscale(1) contrast(1.18) brightness(.92); transition:opacity .8s var(--ease); }
.mark__media.is-video video{ opacity:1; }
.mark__media.is-video canvas{ opacity:0; transition:opacity .8s var(--ease); }
/* Die Lasur gilt nur dem Video, über dem Canvas würde sie die Karte auswaschen */
.mark__media.is-video::after{
  content:""; position:absolute; inset:0;
  background:var(--signal); mix-blend-mode:color; opacity:.55; pointer-events:none;
}
.mark__arc{
  right:0; top:5%; width:74%; height:74%;
  /* border-radius ist zwingend: sonst füllt der Verlauf die Ecken und der Ring
     wird zum Rechteck mit rundem Loch. */
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%, transparent 0 63%, var(--ink) 63.4% 100%);
  clip-path:inset(0 0 0 50%); transform-origin:50% 50%;
}
.mark__bubble{
  right:2%; bottom:3%; width:34%; height:34%;
  background:var(--signal); border-radius:50%;
  clip-path:inset(0 0 0 50%); transform-origin:50% 50%;
}
.mark__bubble::after{          /* Sprechblasen-Zipfel wie im Logo */
  content:""; position:absolute; left:50%; bottom:-9%;
  width:22%; height:22%; background:var(--signal);
  clip-path:polygon(0 0, 100% 0, 100% 100%);
}

/* ═════════════════════════════════════════════════════════  Plakatband  ══ */
.ticker{
  border-top:1px solid var(--ink);
  background:var(--ink); color:var(--paper);
  padding:clamp(.9rem,1.8vw,1.35rem) var(--edge);
}
.ticker__track{
  margin:0; display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:.6rem clamp(1rem,3vw,2.5rem);
}
.ticker__item{
  display:flex; align-items:center; gap:.85rem;
  font-variation-settings:"wdth" 88,"wght" 800;
  font-size:clamp(1rem,2.1vw,1.7rem); letter-spacing:-.005em; text-transform:uppercase;
  white-space:nowrap;
}
.ticker__item::before{ content:""; width:.5rem; height:.5rem; background:var(--signal); flex:none; }

/* ══════════════════════════════════════════════════  Kachelportal  ══
   Der Kern der Startseite: kein Kartenraster, sondern ein Editorial-Raster aus
   ungleich großen Flächen. Eine dominante Fläche (Treffen) trägt zwei Reihen,
   rechts stapeln sich zwei kleinere, unten laufen zwei unterschiedlich breite
   aus. Zwei Flächen sind gefüllt (Ink, Orange), drei stehen als Kontur, sonst
   entsteht wieder Gleichmaß. Jede Kachel ist vollständig ein Link. */
.portal{
  display:grid; grid-template-columns:repeat(12,1fr);
  gap:var(--gap);
  padding:var(--rhythm) var(--edge);
  border-top:1px solid var(--ink);
}
/* Die Zeile braucht eine eigene Rasterzeile: Die Kacheln stehen auf festen
   Zeilen, ein automatisch platziertes Element rutscht sonst dahinter. */
.portal__intro{ grid-column:1 / -1; grid-row:1; margin:0 0 clamp(.5rem,1.5vw,1rem); }
.tile{
  position:relative; display:flex; flex-direction:column;
  min-height:13rem; padding:clamp(1.2rem,2.2vw,1.9rem);
  border:1px solid var(--ink);
  color:inherit; text-decoration:none;
  transition:background .4s var(--ease), color .4s var(--ease);
}
.tile__no{
  font-variation-settings:"wdth" 92,"wght" 750;
  font-size:.74rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft);
}
.tile__title{
  margin:auto 0 0;
  font-variation-settings:"wdth" 84,"wght" 900;
  font-size:clamp(1.5rem,2.6vw,2.4rem);
  line-height:.98; letter-spacing:-.025em; text-transform:uppercase;
  text-wrap:balance;
}
.tile__text{
  margin:.7rem 0 0; max-width:38ch;
  font-size:.93rem; line-height:1.45; color:var(--ink-soft);
}
.tile__go{
  display:flex; align-items:center; gap:.6rem; margin-top:1.1rem;
  font-variation-settings:"wdth" 92,"wght" 750;
  font-size:.78rem; letter-spacing:.04em; text-transform:uppercase;
}
.tile__go::before{
  content:""; width:.55rem; height:.55rem; background:var(--signal); flex:none;
  transition:transform .45s var(--ease);
}
.tile:hover .tile__go::before,.tile:focus-visible .tile__go::before{ transform:translateX(.35rem) rotate(45deg); }

/* Die dominante Fläche: größte Type der Sektion, Ink gefüllt */
.tile--lead{ grid-column:1 / span 7; grid-row:2 / span 2; min-height:26rem; }
.tile--lead .tile__title{ font-size:clamp(2rem,4.4vw,3.6rem); }
.tile--lead .tile__text{ font-size:1rem; max-width:44ch; }
.tile--ink{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.tile--ink .tile__no,.tile--ink .tile__text{ color:color-mix(in srgb, var(--paper) 76%, var(--ink)); }
.tile--ink:hover{ background:var(--ink-deep); }
/* Die orange Fläche trägt den langfristigen Kern: Wissen. Genau eine davon. */
.tile--signal{ background:var(--signal); border-color:var(--signal); color:var(--ink-deep); }
.tile--signal .tile__no,.tile--signal .tile__text{ color:color-mix(in srgb, var(--ink-deep) 80%, var(--signal)); }
.tile--signal .tile__go::before{ background:var(--ink-deep); }
.tile--signal:hover{ background:#E24D14; }
.tile--plain:hover{ background:var(--paper-deep); }

.tile--a{ grid-column:8 / -1; grid-row:2; }
.tile--b{ grid-column:8 / -1; grid-row:3; }
.tile--c{ grid-column:1 / span 5; grid-row:4; }
.tile--d{ grid-column:6 / -1; grid-row:4; }

/* Die Punktraster-Textur aus dem Signet, genau einmal im Portal */
.tile__dots{
  position:absolute; right:clamp(1.2rem,2.2vw,1.9rem); top:clamp(1.2rem,2.2vw,1.9rem);
  width:4.25rem; height:4.25rem;
  background-image:radial-gradient(color-mix(in srgb, var(--paper) 70%, transparent) 2px, transparent 2.1px);
  background-size:25% 25%; background-position:6% 6%;
}
@media (max-width:900px){
  .tile--lead,.tile--a,.tile--b,.tile--c,.tile--d{ grid-column:1 / -1; grid-row:auto; }
  .tile--lead{ min-height:18rem; }
  .tile{ min-height:11rem; }
  .tile__dots{ display:none; }
}

/* ══════════════════════════════════════════════════  Sektionsgerüst  ══
   Editorial statt Kartenraster: hängende Überschrift links, Inhalt rechts,
   Haarlinie als Trenner. */
.sec{
  padding:var(--rhythm) var(--edge);
  border-top:1px solid var(--ink);
  scroll-margin-top:5.5rem;
}
.sec--deep{ background:var(--paper-deep); }
.sec--ink{ background:var(--ink); color:var(--paper); }
.sec--tight{ padding-block:clamp(2.25rem,4.5vw,3.75rem); }

.spread{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gap) var(--gap); align-items:start; }
.spread__head{ grid-column:1 / span 4; }
.spread__body{ grid-column:6 / -1; }
.spread--wide .spread__body{ grid-column:5 / -1; }
@media (max-width:900px){
  .spread__head,.spread__body,.spread--wide .spread__body{ grid-column:1 / -1; }
}

h2{
  margin:0;
  font-variation-settings:"wdth" 88,"wght" 900;
  font-size:clamp(1.75rem,3.6vw,3.1rem);
  line-height:.98; letter-spacing:-.03em; text-transform:uppercase;
  text-wrap:balance;
}
h3{
  margin:0;
  font-variation-settings:"wdth" 92,"wght" 800;
  font-size:1.02rem; line-height:1.25; letter-spacing:.005em; text-transform:uppercase;
}
.prose{ margin:0; max-width:64ch; }
.prose + .prose{ margin-top:.9rem; }
.prose--lead{
  font-size:clamp(1.02rem,.5vw + .92rem,1.18rem);
  font-variation-settings:"wdth" 100,"wght" 500; line-height:1.5;
}
.muted{ color:var(--ink-soft); }
.sec--ink .muted{ color:color-mix(in srgb, var(--paper) 78%, var(--ink)); }
.fine{ font-size:.82rem; line-height:1.5; }
/* Randnotiz: die Stimme, die im Plakat neben dem Satz steht */
.aside{
  margin:clamp(1.5rem,3vw,2.25rem) 0 0; padding-top:1rem;
  border-top:2px solid var(--signal);
  max-width:34ch;
  font-variation-settings:"wdth" 92,"wght" 700;
  font-size:clamp(1rem,1.4vw,1.22rem); line-height:1.3; text-transform:uppercase;
}
.dotfield{
  margin-top:clamp(1.25rem,2vw,1.75rem);
  width:5.75rem; height:5.75rem;
  background-image:radial-gradient(var(--ink) 2px, transparent 2.1px);
  background-size:25% 25%; background-position:6% 6%;
  opacity:.85;
}
@media (max-width:900px){ .dotfield{ display:none; } }
a{ color:var(--signal-ink); text-underline-offset:.18em; }
.sec--ink a,.on-ink a{ color:var(--paper); }

/* ═══════════════════════════════════════════════════════  Seitenkopf  ══
   Unterseiten haben keinen Hero, sondern einen knappen Kopf: Rubrik, H1,
   Einordnung. Die Rubrik ersetzt eine Brotkrumen-Navigation, bei sieben
   Seiten wäre die Überbau. */
.pagehead{
  display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gap);
  padding:clamp(1.75rem,3.4vw,3rem) var(--edge) clamp(1.5rem,2.8vw,2.5rem);
  align-items:end;
}
.pagehead__main{ grid-column:1 / span 8; }
.pagehead__side{ grid-column:10 / -1; }
.pagehead h1{ font-size:clamp(2rem,4.6vw,4rem); }
.pagehead .lede{ max-width:52ch; }
@media (max-width:900px){
  .pagehead__main,.pagehead__side{ grid-column:1 / -1; }
}

/* ══════════════════════════════════════════════  Register (Beispiele)  ══
   Programmzettel, keine Karten: Titelspalte, Haarlinie, Beschreibung. */
.reg{ list-style:none; margin:clamp(1.75rem,3.5vw,2.75rem) 0 0; padding:0; border-top:1px solid var(--ink); }
.reg__row{
  display:grid; grid-template-columns:.7rem minmax(0,15rem) minmax(0,1fr);
  gap:.4rem clamp(1rem,2.5vw,2.25rem);
  padding:clamp(.75rem,1.2vw,1rem) 0;
  border-bottom:1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  transition:background .3s var(--ease);
}
.reg__row::before{
  content:""; width:.55rem; height:.55rem; margin-top:.42em;
  background:var(--signal); flex:none;
  transition:transform .4s var(--ease);
}
.reg__row:hover{ background:color-mix(in srgb, var(--ink) 5%, transparent); }
.reg__row:hover::before{ transform:rotate(45deg) scale(1.15); }
.reg__title{ margin:0; }
.reg__text{ margin:0; font-size:.95rem; line-height:1.5; }
@media (max-width:760px){
  .reg__row{ grid-template-columns:.7rem 1fr; }
  .reg__text{ grid-column:2; }
}

/* ════════════════════════════════════════════════════  Zwischentitel  ══
   Nur innerhalb einer Sektion, nie über einer: eine Sektion, ein h2. */
.subhead{
  margin:clamp(2rem,4vw,3rem) 0 0; padding-top:.85rem;
  border-top:1px solid color-mix(in srgb, var(--ink) 30%, transparent);
  font-size:.8rem; letter-spacing:.05em;
  font-variation-settings:"wdth" 92,"wght" 750;
}

/* ══════════════════════════════════════════════════════════  Ablauf  ══ */
.run{ list-style:none; margin:clamp(1.75rem,3.5vw,2.75rem) 0 0; padding:0; }
.run__item{
  display:grid; grid-template-columns:5.5rem 1fr; gap:.2rem clamp(1rem,2.2vw,2rem);
  padding:.65rem 0;
  border-top:1px solid color-mix(in srgb, var(--ink) 22%, transparent);
}
.run__item:last-child{ border-bottom:1px solid color-mix(in srgb, var(--ink) 22%, transparent); }
.run__time{
  font-variation-settings:"wdth" 92,"wght" 800;
  font-size:.92rem; letter-spacing:.01em; white-space:nowrap;
  display:flex; align-items:baseline; gap:.5rem;
}
.run__time::before{ content:""; width:.42rem; height:.42rem; background:var(--signal); flex:none; }
.run__what{ margin:0; font-variation-settings:"wdth" 96,"wght" 700; font-size:.95rem; text-transform:uppercase; letter-spacing:.01em; }
.run__detail{ grid-column:2; margin:.25rem 0 0; font-size:.9rem; line-height:1.5; color:var(--ink-soft); max-width:56ch; }
/* Die zwei tragenden Formate heben sich typografisch heraus, nicht farbig */
.run__item--key .run__time::before{ width:.62rem; height:.62rem; }
.run__item--key .run__what{ font-size:1.05rem; font-variation-settings:"wdth" 94,"wght" 800; }
.run__item--key .run__detail{ color:var(--ink); }
@media (max-width:560px){
  .run__item{ grid-template-columns:1fr; }
  .run__detail{ grid-column:1; }
}

/* ══════════════════════════════════════════════════  Steckbrief-Tafel  ══ */
.facts{
  border:1px solid var(--ink); margin:0; background:var(--paper);
  width:100%; max-width:32rem;
}
.facts__row{
  display:grid; grid-template-columns:auto 1fr auto; align-items:baseline; gap:.6rem;
  padding:.78rem 1.1rem;
}
.facts__row + .facts__row{ border-top:1px dotted color-mix(in srgb, var(--signal) 70%, var(--paper)); }
.facts__label{
  display:flex; align-items:baseline; gap:.5rem;
  font-variation-settings:"wdth" 92,"wght" 750;
  font-size:.8rem; letter-spacing:.02em; text-transform:uppercase;
}
.facts__label::before{ content:""; width:3px; height:.85em; background:var(--signal); flex:none; align-self:center; }
.facts__leader{ border-bottom:1px dotted color-mix(in srgb, var(--ink) 35%, var(--paper)); transform:translateY(-.25em); }
.facts__value{ margin:0; font-size:.86rem; font-variation-settings:"wdth" 96,"wght" 600; text-align:right; }
/* Was noch offen ist, tritt zurück, statt als Platzhalter zu schreien */
.facts__value[data-open]{ color:var(--ink-soft); font-variation-settings:"wdth" 96,"wght" 500; }
.facts__note{
  margin:0; padding:.7rem 1.1rem;
  border-top:1px solid var(--ink); background:var(--paper-deep);
  font-size:.78rem; line-height:1.45; color:var(--ink-soft);
}
@media (max-width:520px){
  .facts__row{ grid-template-columns:1fr auto; }
  .facts__leader{ display:none; }
}

/* ═══════════════════════════════════════════════════  Für wen / nicht  ══ */
.who{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gap); margin-top:clamp(1.75rem,3.5vw,2.75rem); }
.who__yes{ grid-column:1 / span 7; }
.who__no{ grid-column:9 / -1; border:1px solid var(--ink); padding:1.25rem 1.35rem; align-self:start; }
@media (max-width:900px){ .who__yes,.who__no{ grid-column:1 / -1; } }
.tags{ list-style:none; margin:1rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem .55rem; }
.tags li{
  display:inline-flex; align-items:center; gap:.5rem;
  border:1px solid color-mix(in srgb, var(--ink) 30%, transparent);
  padding:.42rem .7rem;
  font-variation-settings:"wdth" 94,"wght" 650;
  font-size:.83rem; letter-spacing:.01em;
}
.tags li::before{ content:""; width:.34rem; height:.34rem; background:var(--signal); flex:none; }
.nope{ list-style:none; margin:.9rem 0 0; padding:0; }
.nope li{
  position:relative; padding-left:1.4rem; margin-bottom:.5rem;
  font-size:.9rem; line-height:1.4;
}
.nope li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:.85rem; height:2px; background:var(--ink);
}

/* ══════════════════════════════════════════════════════  Grundsätze  ══
   Zwei Spalten Text, kein Kartenraster: Haltung liest man als Liste, nicht als
   Kachelwand. */
.rules{
  list-style:none; margin:clamp(1.5rem,3vw,2.25rem) 0 0; padding:0;
  columns:2 16rem; column-gap:clamp(1.5rem,4vw,3.5rem);
}
.rules li{
  break-inside:avoid; padding:.5rem 0 .5rem 1.5rem; position:relative;
  border-top:1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  font-size:.95rem;
}
.rules li::before{
  content:""; position:absolute; left:0; top:1.05em;
  width:.5rem; height:.5rem; background:var(--signal);
}

/* ══════════════════════════════════════════════════════════  Themen  ══ */
.topics{
  list-style:none; margin:clamp(1.5rem,3vw,2.25rem) 0 0; padding:0;
  display:flex; flex-wrap:wrap; align-items:baseline;
  gap:.35rem 1rem;
}
.topics li{
  display:inline-flex; align-items:center; gap:1rem;
  font-variation-settings:"wdth" 88,"wght" 750;
  font-size:clamp(.92rem,1.35vw,1.14rem);
  letter-spacing:-.005em; text-transform:uppercase;
}
.topics li::after{ content:""; width:.34rem; height:.34rem; background:var(--signal); flex:none; }
.topics li:last-child::after{ display:none; }
.subhead + .topics{ margin-top:1rem; }

/* ═════════════════════════════════════════════════════  Themenfelder  ══
   Für /praxis/: Felder unterschiedlicher Breite, harte Kanten, kein Schatten.
   Sie sind keine Links, es gibt (noch) keine Unterseiten dahinter, und ein
   Klick, der nichts tut, ist schlimmer als kein Klick. */
.fields{
  list-style:none; margin:clamp(1.75rem,3.5vw,2.75rem) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gap);
}
.fields li{
  grid-column:span 4; padding:1.1rem 1.2rem;
  border:1px solid color-mix(in srgb, var(--ink) 32%, transparent);
  display:flex; flex-direction:column; gap:.5rem;
}
.fields li:nth-child(1),.fields li:nth-child(8){ grid-column:span 6; background:var(--paper); }
.fields li:nth-child(5){ grid-column:span 6; }
.fields h3{ font-size:clamp(1.05rem,1.7vw,1.35rem); font-variation-settings:"wdth" 88,"wght" 850; }
.fields p{ margin:0; font-size:.92rem; line-height:1.45; color:var(--ink-soft); }
@media (max-width:760px){
  .fields li,.fields li:nth-child(1),.fields li:nth-child(5),.fields li:nth-child(8){ grid-column:1 / -1; }
}

/* ══════════════════════════════════════════════════  Wissensdatenbank  ══ */
.plan{
  display:inline-flex; align-items:center; gap:.55rem;
  border:1px solid var(--signal-ink); padding:.32rem .6rem;
  margin-bottom:1rem;
  font-variation-settings:"wdth" 92,"wght" 750;
  font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--signal-ink);
}
.plan::before{ content:""; width:.42rem; height:.42rem; background:var(--signal); flex:none; }
/* Vorschau, keine Attrappe: das Feld ist sichtbar inaktiv und sagt das auch. */
.preview{
  margin-top:clamp(1.5rem,3vw,2.25rem);
  border:1px solid var(--ink);
  background:var(--paper);
  max-width:46rem;
}
.preview__bar{
  display:flex; align-items:center; gap:.75rem;
  padding:.85rem 1.1rem; border-bottom:1px solid var(--ink);
  background:var(--paper-deep);
}
.preview__q{ font-variation-settings:"wdth" 96,"wght" 600; font-size:.95rem; color:var(--ink); }
.preview__q::before{ content:"\201E"; }   /* deutsche Anführung: „ … “ */
.preview__q::after{ content:"\201C"; }
.preview__hint{ margin-left:auto; font-size:.74rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); font-variation-settings:"wdth" 92,"wght" 700; }
.preview__caret{ width:.5rem; height:1rem; background:var(--signal); flex:none; }
.preview__entry{ margin:0; padding:0; }
.preview__entry .facts__row{ padding:.7rem 1.1rem; }
.preview__foot{
  margin:0; padding:.75rem 1.1rem;
  border-top:1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  font-size:.8rem; color:var(--ink-soft);
}
.preview + .preview{ margin-top:var(--gap); }
@media (max-width:560px){ .preview__hint{ display:none; } }

/* Ausblick auf Bereiche, die es noch nicht gibt, als Liste mit Status, nicht
   als klickbare Attrappe. */
.later{ list-style:none; margin:clamp(1.5rem,3vw,2rem) 0 0; padding:0; max-width:46rem; }
.later li{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:.7rem 0; border-top:1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  font-variation-settings:"wdth" 92,"wght" 700; text-transform:uppercase;
  font-size:.92rem; letter-spacing:.01em;
}
.later li:last-child{ border-bottom:1px solid color-mix(in srgb, var(--ink) 22%, transparent); }
.later span{
  font-variation-settings:"wdth" 92,"wght" 600; text-transform:none;
  font-size:.82rem; color:var(--ink-soft); white-space:nowrap;
}

/* ═════════════════════════════════════════════════════════════════  FAQ  ══ */
.faq{ margin-top:clamp(1.5rem,3vw,2.25rem); border-top:1px solid var(--ink); max-width:70ch; }
.faq details{ border-bottom:1px solid color-mix(in srgb, var(--ink) 22%, transparent); }
.faq summary{
  display:flex; align-items:baseline; gap:.9rem;
  padding:.8rem 0; cursor:pointer; list-style:none;
  font-variation-settings:"wdth" 94,"wght" 750;
  font-size:1rem; letter-spacing:.005em;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::before{
  content:""; flex:none; width:.7rem; height:.7rem; margin-top:.35em;
  background:var(--signal);
  clip-path:polygon(42% 0,58% 0,58% 42%,100% 42%,100% 58%,58% 58%,58% 100%,42% 100%,42% 58%,0 58%,0 42%,42% 42%);
  transition:transform .4s var(--ease), clip-path .01ms;
}
.faq details[open] summary::before{
  transform:rotate(90deg);
  clip-path:polygon(0 42%,100% 42%,100% 58%,0 58%);
}
.faq summary:hover{ color:var(--signal-ink); }
.faq p{ margin:0 0 1.1rem; padding-left:1.6rem; max-width:62ch; font-size:.95rem; line-height:1.55; color:var(--ink-soft); }

/* ══════════════════════════════════════════════  Wer dahintersteckt  ══ */
.person{
  display:grid; grid-template-columns:repeat(12,1fr);
  gap:var(--gap) clamp(1.5rem,3.5vw,3.5rem); align-items:start;
}
.portrait{
  grid-column:1 / span 3; margin:0;
  aspect-ratio:1; border-radius:50%; overflow:hidden;
  background:var(--paper);
}
.portrait img{
  width:100%; height:100%; display:block; object-fit:cover;
  /* Dieselbe Behandlung wie das Hero-Footage: jedes Bild landet in der Markenwelt */
  filter:grayscale(1) contrast(1.12) brightness(.97);
}
.person__text{ grid-column:5 / -1; }
/* Ohne Bild rückt der Text auf die volle Breite, statt eine leere Spalte zu lassen */
.portrait[hidden] + .person__text{ grid-column:1 / span 9; }
.person__text h2{ margin-bottom:clamp(.9rem,1.6vw,1.25rem); }
@media (max-width:900px){
  .portrait{ grid-column:1 / -1; width:min(48vw,220px); }
  .person__text{ grid-column:1 / -1; }
}

/* ═══════════════════════════════════════════════════  Teilnahme-Band  ══
   Ersetzt das frühere Formular. Ein Weg (WhatsApp), eine Alternative (E-Mail),
   sonst nichts, kein Feld, das ins Leere sendet. */
.cta{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gap) clamp(1.5rem,4vw,4rem); align-items:end; }
.cta__pitch{ grid-column:1 / span 7; }
.cta__act{ grid-column:9 / -1; }
.cta h2{ font-size:clamp(2rem,4.6vw,3.6rem); }
.cta__act .actions{ margin-top:0; flex-direction:column; align-items:stretch; }
/* Die Spalte ist nur vier Raster­spalten breit; „Teilnahme per WhatsApp
   anfragen“ passt dort nicht in eine Zeile und würde mit nowrap überlaufen. */
.cta__act .btn{ justify-content:center; white-space:normal; text-align:center; }
@media (max-width:960px){
  .cta__pitch,.cta__act{ grid-column:1 / -1; }
}

/* ════════════════════════════════════════════════════════  Weiterlesen  ══
   Am Ende jeder Unterseite: zwei Wege weiter, damit niemand in einer
   Sackgasse steht. */
.onward{
  display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gap);
  padding:clamp(1.75rem,3vw,2.5rem) var(--edge);
  border-top:1px solid var(--ink);
}
.onward__label{
  grid-column:1 / -1; margin:0;
  font-variation-settings:"wdth" 92,"wght" 750;
  font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);
}
.onward a{
  grid-column:span 6; display:flex; align-items:baseline; gap:.8rem;
  padding:1rem 0; border-top:1px solid color-mix(in srgb, var(--ink) 25%, transparent);
  color:inherit; text-decoration:none;
  font-variation-settings:"wdth" 86,"wght" 850;
  font-size:clamp(1.1rem,2.2vw,1.7rem); letter-spacing:-.02em; text-transform:uppercase;
}
.onward a::before{
  content:""; width:.55rem; height:.55rem; margin-top:.45em; background:var(--signal); flex:none;
  transition:transform .45s var(--ease);
}
.onward a:hover::before{ transform:translateX(.35rem) rotate(45deg); }
@media (max-width:760px){ .onward a{ grid-column:1 / -1; } }

/* ══════════════════════════════════════════════════════  Rechtstexte  ══
   Impressum und Datenschutz: eine Lesespalte, sachlich, ohne Plakatgestus.
   Die Marke trägt hier nur Kopf und Fuß. */
.legal{ padding:var(--rhythm) var(--edge); border-top:1px solid var(--ink); }
.legal__col{ max-width:74ch; }
.legal h2{
  margin:clamp(2rem,4vw,2.75rem) 0 .75rem;
  font-size:clamp(1.2rem,2vw,1.6rem); letter-spacing:-.015em;
}
.legal h2:first-child{ margin-top:0; }
.legal h3{
  margin:1.5rem 0 .5rem;
  font-size:.92rem; font-variation-settings:"wdth" 94,"wght" 800;
}
.legal p,.legal ul,.legal address{ margin:0 0 .9rem; font-size:.95rem; line-height:1.6; }
.legal address{ font-style:normal; }
.legal ul{ padding-left:1.3rem; }
.legal li{ margin-bottom:.35rem; }
.legal dl{ margin:0 0 .9rem; font-size:.95rem; line-height:1.6; }
.legal dt{ font-variation-settings:"wdth" 94,"wght" 750; margin-top:.7rem; }
.legal dd{ margin:0 0 0 1.3rem; }
.legal .fine{ color:var(--ink-soft); }

/* ═════════════════════════════════════════════════════════════════  Fuß  ══ */
.foot{
  background:var(--ink-deep); color:var(--paper);
  border-top:1px solid color-mix(in srgb, var(--paper) 25%, var(--ink-deep));
  padding:clamp(2.25rem,4.5vw,3.5rem) var(--edge) 2rem;
}
.foot__top{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--gap); align-items:flex-start; }
.foot .wordmark{ font-size:clamp(1.35rem,2.6vw,2rem); }
.foot .wordmark .sub{ color:color-mix(in srgb, var(--paper) 72%, var(--ink)); }
/* Der frühere Hauptclaim lebt hier als sekundärer weiter */
.foot__claim{
  margin:1.4rem 0 0;
  font-variation-settings:"wdth" 86,"wght" 800;
  font-size:clamp(1.05rem,1.7vw,1.45rem);
  line-height:1.1; letter-spacing:-.02em; text-transform:uppercase;
}
.foot__decode{
  margin:.9rem 0 0; max-width:30ch; font-size:.84rem; line-height:1.5;
  color:color-mix(in srgb, var(--paper) 78%, var(--ink));
}
.foot__nav{ display:flex; gap:clamp(1.5rem,4vw,4rem); flex-wrap:wrap; }
.foot__links{ display:flex; flex-direction:column; gap:.5rem; }
.foot__links a{
  color:var(--paper); text-decoration:none; font-size:.84rem;
  font-variation-settings:"wdth" 94,"wght" 600; letter-spacing:.02em; text-transform:uppercase;
}
.foot__links a:hover{ color:var(--signal); }
.foot__title{
  margin:0 0 .35rem; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  font-variation-settings:"wdth" 92,"wght" 750;
  color:color-mix(in srgb, var(--paper) 60%, var(--ink));
}
.foot__bar{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem 1.5rem;
  margin-top:clamp(2rem,4vw,3rem); padding-top:1rem;
  border-top:1px solid color-mix(in srgb, var(--paper) 25%, var(--ink-deep));
  font-size:.78rem; color:color-mix(in srgb, var(--paper) 72%, var(--ink));
}
.foot__bar a{ color:inherit; }

/* ═════════════════════════════════════════════════════════════════  Klein  ══
   Auf kleinen Schirmen kommt zuerst die Aussage, dann das Zeichen: Marke,
   Headline und Aktion müssen in den ersten Sekunden lesbar sein. */
@media (max-width:1000px){
  .hero__type{ grid-column:1 / -1; grid-row:1; }
  /* 46vw war zu klein: Ein kleines Objekt in einer breiten leeren Fläche liest
     sich als übrig geblieben, nicht als gesetzt. Es wächst mit, hält weiter die
     rechte Kante und rückt näher an die Aktionen. */
  .hero__mark{ grid-column:1 / -1; grid-row:2; justify-self:end; width:min(62vw,440px); max-width:none; }
  h1{ font-size:clamp(1.95rem,9.4vw,3.6rem); }
}
@media (max-width:720px){
  .ticker__track{ justify-content:flex-start; gap:.55rem 1.5rem; }

  /* ── Signet auf dem Handy ──
     Auf einer Spalte stand das Signet als kleine Marke rechts unter dem Text,
     mit einem Loch darüber und darunter: der Eindruck war „abgehakt“. Es
     spannt jetzt die volle Textspalte, hält damit beide Seitenränder wie die
     Schrift darüber und ist die Bildaussage des ersten Schirms statt eines
     Anhängsels. Ein Überstand über die Kante bleibt ausgeschlossen, der
     Halbring würde mitten in der Kurve abgeschnitten (siehe DESIGN.md). */
  .hero{ gap:clamp(1.5rem,5vw,2.25rem); padding-bottom:clamp(1rem,3.5vw,1.75rem); }
  .hero__mark{ width:100%; }
  /* Kein Zug nach oben über die Kante des Signets hinaus: Die Sprechblase samt
     Zipfel reicht bis fast an die Unterkante der Fläche und liefe sonst in das
     schwarze Plakatband. Eine angeschnittene Grundform liest sich als Fehler,
     nicht als Geste. */
}
@media (max-width:520px){
  .actions{ flex-direction:column; align-items:stretch; }
  /* nowrap ist hier falsch: „Teilnahme per WhatsApp anfragen“ ist breiter als
     ein 320-px-Schirm und würde aus der Fläche laufen. */
  .actions .btn{ justify-content:center; white-space:normal; text-align:center; }
  .rules{ columns:1; }
}

/* ═══════════════════════════════════════════  Eintritts-Choreografie  ══
   Standard = sichtbar. Animiert wird nur mit JS und erlaubter Bewegung.
   :where() nullt die Spezifität des Ausgangszustands.

   WICHTIG, nur für #hero: Der versteckte Ausgangszustand darf nur dort
   gelten, wo auch .is-in gesetzt wird (Startseite). Unbegrenzt geschrieben
   versteckte er .kicker, .lede und .actions auf allen Unterseiten dauerhaft,
   inklusive des WhatsApp-Buttons im Teilnahme-Band. */
:where(.js.motion #hero) h1 .line > span{ transform:translateY(105%); }
:where(.js.motion #hero) :is(.brandline,.kicker,.lede,.audience,.actions){ opacity:0; transform:translateY(14px); }
:where(.js.motion #hero) :is(.mark__arc,.mark__bubble,.mark__media,.mark__square,.mark__dots){ opacity:0; }
:where(.js.motion #hero) .mark__arc{ transform:rotate(-180deg) scale(.92); }
:where(.js.motion #hero) .mark__bubble{ transform:rotate(180deg) scale(.92); }
:where(.js.motion #hero) .mark__media{ transform:scale(.94); }
/* Der Nachhall am Mottosatz sitzt in #motto und bekommt dort sein .is-in */
:where(.js.motion #motto) .bubble-dot{ transform:rotate(-180deg) scale(.6); opacity:0; }

.is-in h1 .line > span{ transform:translateY(0); transition:transform 1s var(--ease); }
.is-in .brandline,.is-in .kicker,.is-in .lede,.is-in .audience,.is-in .actions{
  opacity:1; transform:none;
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.is-in .brandline{ transition-delay:.02s; }
.is-in h1 .line:nth-child(1) > span{ transition-delay:.10s; }
.is-in h1 .line:nth-child(2) > span{ transition-delay:.18s; }
.is-in h1 .line:nth-child(3) > span{ transition-delay:.26s; }
.is-in .kicker{ transition-delay:.08s; }
.is-in .lede{ transition-delay:.46s; }
.is-in .audience{ transition-delay:.52s; }
.is-in .actions{ transition-delay:.58s; }

/* Das Signet dreht sich ein, der eine orchestrierte Moment der Startseite */
.is-in .mark__arc{ opacity:1; transform:rotate(0) scale(1); transition:transform 1.15s var(--ease) .08s, opacity .5s var(--ease) .08s; }
.is-in .mark__bubble{ opacity:1; transform:rotate(0) scale(1); transition:transform 1.15s var(--ease) .22s, opacity .5s var(--ease) .22s; }
.is-in .mark__media{ opacity:1; transform:scale(1); transition:transform 1.2s var(--ease) .16s, opacity .7s var(--ease) .16s; }
.is-in .mark__square{ opacity:1; transition:opacity .6s var(--ease) .34s; }
.is-in .mark__dots{ opacity:1; transition:opacity .9s var(--ease) .42s; }

/* Der Nachhall: dieselbe Geste, genau einmal, am Mottosatz */
.bubble-dot{
  display:inline-block; position:relative; vertical-align:baseline;
  width:.5em; height:.5em;
  background:var(--signal); border-radius:50%;
  clip-path:inset(0 0 0 50%); transform-origin:50% 50%;
}
.bubble-dot::after{
  content:""; position:absolute; left:50%; bottom:-14%;
  width:26%; height:26%; background:var(--signal);
  clip-path:polygon(0 0, 100% 0, 100% 100%);
}
.is-in .bubble-dot{ opacity:1; transform:rotate(0) scale(1); transition:transform 1.1s var(--ease) .25s, opacity .5s var(--ease) .25s; }

/* Motto-Großformat: der Verkaufssatz mit der größten Type der Seite */
.motto{
  display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gap);
  align-items:end;
  padding:clamp(2.75rem,5.5vw,5rem) var(--edge);
  border-top:1px solid var(--ink);
}
.motto__line{
  grid-column:1 / span 8;
  margin:0;
  font-variation-settings:"wdth" 84,"wght" 900;
  font-size:clamp(2.5rem,8.2vw,6rem);
  line-height:.92; letter-spacing:-.04em; text-transform:uppercase;
}
.motto__body{ grid-column:9 / -1; margin:0; }
.motto__body .prose{ max-width:44ch; }
@media (max-width:1080px){
  .motto__line,.motto__body{ grid-column:1 / -1; }
  .motto__body{ margin-top:clamp(1.5rem,3vw,2.25rem); }
  .motto__body .prose{ max-width:58ch; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition-duration:.01ms !important; animation:none !important; }
}