/*
Theme Name:   AllShot (Colibri Child)
Theme URI:    https://www.allshot.at/
Description:  Child-Theme für allshot.at. Startseite und Unterseiten im überarbeiteten Design (Apple-HIG-Prinzipien: Navigation, Kontrast, Alt-Texte, Bewegungssteuerung). Elternseiten und Elementor-Inhalte bleiben erhalten.
Author:       Alex Schodl
Template:     colibri-wp
Version:      1.0.0
Text Domain:  allshot-child
*/
/* ─────────────────────────────────────────────────────────────
   AllShot — Design-Tokens
   Hell ist die Basis. Jeder Wert existiert im blanken :root,
   damit die Seite auch im „System"-Zustand (ohne data-theme) trägt.
   ───────────────────────────────────────────────────────────── */
:root{
  --paper:#FFFFFF;
  --surface:#F4F4F2;
  --surface-2:#EAEAE6;
  --ink:#14161A;
  --ink-2:#55585F;
  --ink-3:#6E727A;
  --line:#DCDCD7;
  --line-strong:#BFBFB8;
  --accent:#A15C25;
  --accent-soft:#F3E7DB;
  /* Markenrot aus dem Logo (Hauptton #B01810), auf Lesbarkeit geprüft */
  --brand:#B01810;
  /* Markenrot auf dunklem Grund — bleibt in beiden Themes gleich,
     weil die Bühne immer dunkel ist. */
  --brand-hell:#FF6B60;
  /* Apples Standardkurve: schnell los, weich aus. */
  --kurve:cubic-bezier(.32,.72,0,1);

  /* Kino-Kapitel: in beiden Themes dunkel — bewusste Entscheidung,
     HIG Dark Mode: „In rare cases, consider using only a dark appearance
     … for an app that supports immersive media viewing." */
  --stage:#0B0B0D;
  --stage-2:#16161A;
  /* Grund der dunklen Abschnitte. Im Hellmodus schwarz wie die Bühne,
     im Dunkelmodus angehoben — sonst ginge der Wechsel hell/dunkel
     verloren, weil Seite und Abschnitt denselben Ton hätten. */
  --band-dark:#0B0B0D;
  --stage-ink:#F2F2F4;
  --stage-ink-2:#A5A8B0;
  --stage-line:#2A2A30;
  --stage-accent:#E0A264;

  --shadow:0 1px 2px rgba(20,22,26,.05), 0 8px 24px -12px rgba(20,22,26,.18);

  --step--1:clamp(.78rem,.76rem + .1vw,.84rem);
  --step-0:clamp(1rem,.97rem + .16vw,1.09rem);
  --step-1:clamp(1.2rem,1.12rem + .38vw,1.45rem);
  --step-2:clamp(1.5rem,1.33rem + .82vw,2.1rem);
  --step-3:clamp(1.95rem,1.6rem + 1.7vw,3.1rem);
  --step-4:clamp(2.5rem,1.85rem + 3.2vw,4.6rem);
  --step-5:clamp(3rem,1.9rem + 5.4vw,6.5rem);

  --gap:clamp(1rem,.7rem + 1.4vw,1.75rem);
  --pad:clamp(1.15rem,.6rem + 2.6vw,2.75rem);
  --band:clamp(4rem,2.4rem + 7vw,8.5rem);
  --maxw:1240px;
  --sans:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --ui:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0B0B0D;
    --surface:#16161A;
    --surface-2:#1E1E24;
    --ink:#F2F2F4;
    --ink-2:#A5A8B0;
    --ink-3:#8A8D95;
    --line:#2A2A30;
    --line-strong:#3C3C45;
    --accent:#E0A264;
    --accent-soft:#2A2118;
    --brand:#FF6B60;
    --band-dark:#16161A;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -14px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --paper:#0B0B0D;
  --surface:#16161A;
  --surface-2:#1E1E24;
  --ink:#F2F2F4;
  --ink-2:#A5A8B0;
  --ink-3:#8A8D95;
  --line:#2A2A30;
  --line-strong:#3C3C45;
  --accent:#E0A264;
  --accent-soft:#2A2118;
  --brand:#FF6B60;
  --band-dark:#16161A;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -14px rgba(0,0,0,.7);
}

*,*::before,*::after{box-sizing:border-box}

/* Grundlage aus Colibri Page Builder (theme.css, 440 KB). Die Unterseiten
   laden die Datei weiter, die Startseite nicht mehr — die Abstände hier sind
   aber mit ihr abgestimmt. Wichtig ist vor allem der Clearfix: Colibri hängt
   an jedes div/ul ein leeres ::before/::after. In Flex- und Grid-Containern
   zählen die als eigene Elemente (order:1, also ans Ende) und bringen damit
   zweimal den gap als Luft unter Stapeln, Köpfen und Rastern mit. */
*{margin:0;padding:0}
div::before,ul::before,article::before,aside::before,details::before,figcaption::before,figure::before,
footer::before,header::before,hgroup::before,menu::before,nav::before,section::before,
div::after,ul::after,article::after,aside::after,details::after,figcaption::after,figure::after,
footer::after,header::after,hgroup::after,menu::after,nav::after,section::after{
  content:"";display:table;width:0;order:1;flex-basis:0
}
div::after,ul::after,article::after,aside::after,details::after,figcaption::after,figure::after,
footer::after,header::after,hgroup::after,menu::after,nav::after,section::after{clear:both}
h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}
html{
  -webkit-text-size-adjust:100%;scroll-behavior:smooth;
  /* Was seitlich hinausragt (z. B. Kacheln, die sich gerade zusammensetzen),
     darf die Seite nicht verbreitern — am Handy entstünde sonst ein Streifen
     rechts. Am html-Element, damit der Body sein eigenes clip behält. */
  overflow-x:hidden;overflow-x:clip;
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--ui);
  font-size:var(--step-0);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* clip statt hidden: schneidet genauso ab, macht den Body aber nicht
     zum Scroll-Container — sonst greifen die Scroll-Zeitleisten nicht. */
  overflow-x:clip;
}
img,video{max-width:100%;display:block}
a{color:inherit}
:where(a,button,summary,[tabindex]):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}
::selection{background:var(--accent);color:var(--paper)}

/* ── Typo-Rollen ─────────────────────────────────────────────── */
.display{
  font-family:var(--sans);
  font-weight:700;
  font-variation-settings:"wdth" 112;
  line-height:.98;
  letter-spacing:-.022em;
  text-wrap:balance;
  margin:0;
}
.eyebrow{
  font-family:var(--ui);
  font-size:var(--step--1);
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin:0;
}
.lede{
  font-size:var(--step-1);
  line-height:1.5;
  color:var(--ink-2);
  max-width:56ch;
  margin:0;
}
p{max-width:66ch}

/* ── Grundgerüst ─────────────────────────────────────────────── */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:max(var(--pad),env(safe-area-inset-left));
}
.band{padding-block:var(--band)}
:where(section,header)[id]{scroll-margin-top:68px}
.stack{display:flex;flex-direction:column;gap:var(--gap)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:var(--paper);
  padding:.75rem 1.15rem;border-radius:0 0 8px 0;font-weight:600;
}
.skip:focus{left:0}

/* ── Navigation: transluzent über dem Inhalt (HIG „Materials") ── */
.nav{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--paper) 78%,transparent);
  border-bottom:1px solid var(--line);
}
@supports (backdrop-filter:blur(1px)){
  .nav{backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px)}
}
.nav__in{
  display:flex;align-items:center;gap:clamp(.5rem,2vw,1.5rem);
  min-height:56px;padding-block:.4rem;
}
.brand{
  display:inline-flex;align-items:center;gap:.5rem;
  text-decoration:none;flex:0 0 auto;
  min-height:44px;
}
.brand__mark{
  width:34px;height:34px;flex:0 0 auto;
  object-fit:contain;
}
.brand__name{
  font-family:var(--sans);font-weight:800;font-variation-settings:"wdth" 100;
  letter-spacing:-.03em;font-size:1.08rem;line-height:1;
  /* Colibri setzt inline „body a { color:#03a9f4 }" — eine Klasse schlägt das. */
  color:var(--brand);
}

.nav__links{
  display:flex;gap:.15rem;flex:1 1 auto;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  scroll-snap-type:x proximity;
  margin:0;padding:0;list-style:none;
}
.nav__links::-webkit-scrollbar{display:none}
.nav__links a{
  display:flex;align-items:center;min-height:44px;
  padding:0 .7rem;white-space:nowrap;scroll-snap-align:start;
  font-size:.9rem;color:var(--ink-2);text-decoration:none;
  border-radius:7px;transition:color .18s,background .18s;
}
.nav__links a:hover{color:var(--ink);background:var(--surface)}
.nav__links a[aria-current="true"]{color:var(--ink);font-weight:600}
.nav__cta{flex:0 0 auto}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:44px;padding:.62rem 1.25rem;
  font-family:var(--ui);font-size:.94rem;font-weight:600;
  border-radius:999px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.8,.3,1),background .18s,border-color .18s,color .18s;
}
.btn--primary{background:var(--ink);color:var(--paper)}
.btn--primary:hover{transform:translateY(-1px)}
.btn--ghost{border-color:var(--line-strong);color:var(--ink);background:transparent}
.btn--ghost:hover{background:var(--surface);border-color:var(--ink-3)}
.btn--onstage{background:var(--stage-ink);color:var(--stage)}
.btn--onstage:hover{transform:translateY(-1px)}
.btn--onstage-ghost{border-color:rgba(255,255,255,.34);color:var(--stage-ink)}
.btn--onstage-ghost:hover{background:rgba(255,255,255,.1)}
.btn--sm{min-height:38px;padding:.4rem .95rem;font-size:.86rem}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}

/* ── Bildbegrenzungsmarken: das wiederkehrende Motiv ─────────── */
.marks{position:relative}
.marks::before,.marks::after{
  content:"";position:absolute;width:22px;height:22px;pointer-events:none;
  border-color:currentColor;opacity:.5;
}
.marks::before{top:-9px;left:-9px;border-top:1.5px solid;border-left:1.5px solid}
.marks::after{bottom:-9px;right:-9px;border-bottom:1.5px solid;border-right:1.5px solid}

/* ── Bühne (Hero) ────────────────────────────────────────────── */
.stage{
  position:relative;background:var(--stage);color:var(--stage-ink);
  isolation:isolate;overflow:hidden;
}
.stage__media{position:absolute;inset:0;z-index:-2}
.stage__media video,.stage__media img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(.25) contrast(1.05);
}
.stage__scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(11,11,13,.72) 0%,rgba(11,11,13,.5) 38%,rgba(11,11,13,.88) 100%),
    radial-gradient(120% 90% at 15% 20%,rgba(11,11,13,.15),rgba(11,11,13,.75));
}
.hero{
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:clamp(500px,74vh,740px);
  padding-block:clamp(3.5rem,9vw,6rem) clamp(2.5rem,6vw,4rem);
  padding-top:max(clamp(3.5rem,9vw,6rem),env(safe-area-inset-top));
}
.hero__eyebrow{color:var(--stage-accent);letter-spacing:.16em}
/* Die Überzeile steckt in der h1 (Suchmaschinen), sieht aber aus wie vorher:
   eigene Zeile, eigene Schrift, derselbe Abstand wie früher der Rand der h1. */
.hero h1 .hero__eyebrow{display:block;margin-bottom:.9rem;line-height:1.6;font-variation-settings:normal}
.hero h1{
  font-size:var(--step-5);
  font-variation-settings:"wdth" 118;
  max-width:15ch;
  margin:.9rem 0 0;
}
.hero__lede{color:var(--stage-ink-2);max-width:48ch;margin-top:1.15rem;font-size:var(--step-1)}
.hero__actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:clamp(1.5rem,3vw,2.25rem)}
.hero__meta{
  display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;
  margin-top:clamp(2rem,5vw,3.25rem);
  padding-top:1.15rem;border-top:1px solid var(--stage-line);
  font-size:var(--step--1);letter-spacing:.1em;text-transform:uppercase;
  color:var(--stage-ink-2);font-variant-numeric:tabular-nums;
}

/* Steuerung für das Hintergrundvideo — HIG: Menschen brauchen
   Kontrolle über automatisch startende Bewegung. */
.motion-toggle{
  position:absolute;right:clamp(1rem,3vw,2rem);
  top:max(1rem,env(safe-area-inset-top));
  z-index:3;
  display:inline-flex;align-items:center;gap:.45rem;
  min-height:38px;padding:.35rem .8rem;
  background:rgba(11,11,13,.55);color:var(--stage-ink);
  border:1px solid rgba(255,255,255,.24);border-radius:999px;
  font-family:var(--ui);font-size:.78rem;font-weight:600;letter-spacing:.04em;
  cursor:pointer;
}
@supports (backdrop-filter:blur(1px)){
  .motion-toggle{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
}
.motion-toggle:hover{background:rgba(11,11,13,.75)}
.motion-toggle__dot{width:7px;height:7px;border-radius:50%;background:var(--stage-accent)}
.motion-toggle[aria-pressed="false"] .motion-toggle__dot{background:var(--stage-ink-2)}

/* ── Abschnittskopf ──────────────────────────────────────────── */
.head{display:flex;flex-direction:column;gap:.85rem;margin-bottom:clamp(2rem,4vw,3.25rem)}
.head h2{font-size:var(--step-3);font-variation-settings:"wdth" 108}
.head--split{
  flex-direction:row;flex-wrap:wrap;align-items:flex-end;
  justify-content:space-between;gap:1.5rem;
}
.head--split .head__text{display:flex;flex-direction:column;gap:.85rem;min-width:min(100%,34ch)}

/* ── Leistungen: Liste statt Kartenwand ──────────────────────── */
.services{border-top:1px solid var(--line)}
.service{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:.55rem;
  padding-block:clamp(1.5rem,3vw,2.1rem);
  border-bottom:1px solid var(--line);
}
@media (min-width:720px){
  .service{
    grid-template-columns:minmax(11ch,3fr) minmax(0,6fr) minmax(14ch,3fr);
    gap:var(--gap);align-items:baseline;
  }
}
.service__name{
  font-family:var(--sans);font-weight:700;font-variation-settings:"wdth" 105;
  font-size:var(--step-1);letter-spacing:-.015em;margin:0;line-height:1.15;
}
.service__desc{margin:0;color:var(--ink-2);max-width:52ch}
.specs{display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0;list-style:none}
.specs li{
  font-size:.74rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);border:1px solid var(--line);border-radius:5px;
  padding:.2rem .5rem;font-variant-numeric:tabular-nums;white-space:nowrap;
}

/* ── Arbeiten: Raster mit echten Seitenverhältnissen ─────────── */
.grid{
  display:grid;gap:var(--gap);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:520px){
  .tile--half,.tile--third{grid-column:span 1}
}
@media (min-width:760px){.grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
.tile{position:relative;grid-column:span 2;margin:0}
@media (min-width:760px){
  .tile--wide{grid-column:span 4}
  .tile--half{grid-column:span 3}
  .tile--third{grid-column:span 2}
}
.tile__frame{
  position:relative;overflow:hidden;border-radius:3px;
  background:var(--surface-2);
}
.tile__frame img,.tile__frame video{
  width:100%;height:100%;object-fit:cover;
  transition:transform .55s cubic-bezier(.2,.8,.3,1),filter .4s;
}
.ar-32{aspect-ratio:3/2}
.ar-23{aspect-ratio:2/3}
.ar-169{aspect-ratio:16/9}
.ar-916{aspect-ratio:9/16}
.ar-45{aspect-ratio:4/5}
.ar-11{aspect-ratio:1/1}
.tile:hover .tile__frame img,.tile:hover .tile__frame video{transform:scale(1.035)}
@media (prefers-reduced-motion:reduce){
  .tile:hover .tile__frame img,.tile:hover .tile__frame video{transform:none}
}
/* Einfahrende Bildbegrenzungsmarken beim Zeigen */
.tile__frame::before,.tile__frame::after{
  content:"";position:absolute;width:18px;height:18px;z-index:2;
  border-color:#fff;opacity:0;transition:opacity .3s,inset .3s cubic-bezier(.2,.8,.3,1);
  pointer-events:none;
}
.tile__frame::before{top:16px;left:16px;border-top:1.5px solid;border-left:1.5px solid}
.tile__frame::after{bottom:16px;right:16px;border-bottom:1.5px solid;border-right:1.5px solid}
.tile:hover .tile__frame::before,.tile:hover .tile__frame::after{opacity:.85}
.tile:hover .tile__frame::before{top:10px;left:10px}
.tile:hover .tile__frame::after{bottom:10px;right:10px}
.tile figcaption{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  margin-top:.6rem;font-size:var(--step--1);color:var(--ink-2);
}
.tile__format{
  color:var(--ink-3);font-weight:600;letter-spacing:.08em;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}

/* ── Kino-Kapitel (Hochzeit, Luft) ───────────────────────────── */
.chapter{background:var(--band-dark);color:var(--stage-ink)}
.chapter .eyebrow{color:var(--stage-accent)}
.chapter .lede{color:var(--stage-ink-2)}
.chapter .specs li{color:var(--stage-ink-2);border-color:var(--stage-line)}
.chapter .tile figcaption{color:var(--stage-ink-2)}
.chapter .tile__format{color:var(--stage-ink-2)}
.chapter .tile__frame{background:var(--stage-2)}

.wedding__title{
  font-family:var(--serif);font-weight:400;font-style:italic;
  font-size:var(--step-4);line-height:1.06;letter-spacing:-.01em;
  margin:0;text-wrap:balance;max-width:16ch;
}
.wedding__title em{font-style:normal;font-weight:500}
.wedding__quote{
  font-family:var(--serif);font-size:var(--step-2);font-style:italic;
  line-height:1.3;color:var(--stage-ink);margin:0;max-width:22ch;
}
.split{display:grid;gap:clamp(1.75rem,4vw,3.5rem);align-items:center}
@media (min-width:860px){.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (min-width:860px){.split--wide-left{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}

/* ── Wofür AllShot steht ─────────────────────────────────────── */
.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;list-style:none}
.tags li{
  font-family:var(--sans);font-weight:700;font-variation-settings:"wdth" 96;
  font-size:clamp(1.05rem,.85rem + .9vw,1.7rem);
  letter-spacing:-.01em;color:var(--ink-3);
  padding:.15rem .6rem;border:1px solid var(--line);border-radius:999px;
  transition:color .2s,border-color .2s;
}
.tags li:hover{color:var(--accent);border-color:var(--accent)}

/* ── Kunden ──────────────────────────────────────────────────── */
.clients{
  display:grid;gap:clamp(1.5rem,3vw,2.5rem);
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:center;
}
@media (min-width:640px){.clients{grid-template-columns:repeat(4,minmax(0,1fr))}}
.clients img{
  width:100%;max-width:150px;height:auto;margin-inline:auto;
  filter:grayscale(1) brightness(0) opacity(.55);
  transition:filter .25s;
}
.clients li:hover img{filter:grayscale(0) opacity(1)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .clients img{filter:grayscale(1) brightness(0) invert(1) opacity(.62)}
  :root:not([data-theme="light"]) .clients li:hover img{filter:grayscale(1) brightness(0) invert(1) opacity(1)}
}
:root[data-theme="dark"] .clients img{filter:grayscale(1) brightness(0) invert(1) opacity(.62)}
:root[data-theme="dark"] .clients li:hover img{filter:grayscale(1) brightness(0) invert(1) opacity(1)}

/* ── Ablauf: echte Reihenfolge, darum nummeriert ─────────────── */
.steps{
  display:grid;gap:0;margin:0;padding:0;list-style:none;
  counter-reset:step;
  border-top:1px solid var(--line);
}
.step{
  display:grid;gap:.35rem .9rem;
  grid-template-columns:auto minmax(0,1fr);
  padding-block:clamp(1.1rem,2.4vw,1.6rem);
  border-bottom:1px solid var(--line);
  counter-increment:step;
}
@media (min-width:720px){
  .step{grid-template-columns:auto minmax(12ch,3fr) minmax(0,7fr);align-items:baseline}
}
.step::before{
  content:counter(step,decimal-leading-zero);
  font-family:var(--ui);font-size:.78rem;font-weight:700;letter-spacing:.1em;
  color:var(--accent);font-variant-numeric:tabular-nums;
  padding-top:.3rem;
}
.step h3{
  margin:0;font-family:var(--sans);font-weight:700;font-variation-settings:"wdth" 102;
  font-size:var(--step-1);letter-spacing:-.015em;line-height:1.2;
}
.step p{margin:0;color:var(--ink-2);grid-column:2/-1}
@media (min-width:720px){.step p{grid-column:3}}

/* ── Kontakt ─────────────────────────────────────────────────── */
.contact{background:var(--surface);border-top:1px solid var(--line)}
.mailto{
  display:inline-block;
  font-family:var(--sans);font-weight:700;font-variation-settings:"wdth" 108;
  font-size:clamp(1.6rem,.9rem + 3.4vw,3.4rem);
  letter-spacing:-.03em;line-height:1.1;
  text-decoration:none;color:var(--ink);
  border-bottom:2px solid var(--accent);
  padding-bottom:.08em;
  transition:color .2s;
  overflow-wrap:anywhere;
}
.mailto:hover{color:var(--accent)}
.contact__cols{
  display:grid;gap:var(--gap);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  margin-top:clamp(2.5rem,5vw,4rem);
  padding-top:clamp(1.5rem,3vw,2rem);
  border-top:1px solid var(--line);
}
.contact__col h3{
  margin:0 0 .5rem;font-size:var(--step--1);font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);
  font-family:var(--ui);
}
.contact__col ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.1rem}
.contact__col a{
  display:inline-flex;align-items:center;min-height:38px;
  text-decoration:none;color:var(--ink);
}
.contact__col a:hover{color:var(--accent)}
.contact__col p{margin:0;color:var(--ink-2)}

/* ── Fuß ─────────────────────────────────────────────────────── */
.foot{border-top:1px solid var(--line);background:var(--paper)}
.foot__in{
  display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;
  align-items:center;justify-content:space-between;
  padding-block:1.75rem;
  padding-bottom:max(1.75rem,env(safe-area-inset-bottom));
  font-size:.86rem;color:var(--ink-3);
}
.foot a{color:var(--ink-2);text-decoration:none}
.foot a:hover{color:var(--accent);text-decoration:underline}
.foot__links{display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;margin:0;padding:0;list-style:none}
.foot__links a{display:inline-flex;align-items:center;min-height:38px}

/* ── Bewegung: Ruhezustand ist sichtbar. JS blendet nur dann
      vorher aus, wenn Bewegung erlaubt ist. ─────────────────── */
.js-reveal .reveal{opacity:0;transform:translateY(16px)}
.js-reveal .reveal.is-in{
  opacity:1;transform:none;
  transition:opacity .7s cubic-bezier(.2,.8,.3,1),transform .7s cubic-bezier(.2,.8,.3,1);
}
.vh{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* ─────────────────────────────────────────────────────────────
   Ergänzungen für WordPress: Unterseiten, Fließtext, Admin-Leiste
   ───────────────────────────────────────────────────────────── */
.admin-bar .nav{top:32px}
@media screen and (max-width:782px){.admin-bar .nav{top:46px}}

/* Kopf einer Unterseite — kleiner als die Bühne der Startseite */
.pagehead{
  background:var(--stage);color:var(--stage-ink);
  padding-block:clamp(3.5rem,8vw,6.5rem) clamp(2.5rem,5vw,4rem);
  padding-top:max(clamp(3.5rem,8vw,6.5rem),env(safe-area-inset-top));
}
.pagehead .eyebrow{color:var(--stage-accent)}
.pagehead h1{
  font-size:var(--step-4);font-variation-settings:"wdth" 112;
  margin:.8rem 0 0;max-width:18ch;
}
.pagehead .lede{color:var(--stage-ink-2);margin-top:1rem}
.pagehead__crumbs{
  font-size:var(--step--1);color:var(--stage-ink-2);margin:0 0 .2rem;
}
.pagehead__crumbs a{color:var(--stage-ink-2);text-decoration:none}
.pagehead__crumbs a:hover{color:var(--stage-ink)}

/* Fließtext aus dem WordPress-Editor */
.prose{max-width:70ch;font-size:var(--step-0);line-height:1.68}
.prose>*+*{margin-top:1.1em}
.prose h1,.prose h2,.prose h3,.prose h4{
  font-family:var(--sans);font-weight:700;letter-spacing:-.018em;
  line-height:1.16;text-wrap:balance;color:var(--ink);
}
.prose h1{font-size:var(--step-3);font-variation-settings:"wdth" 108}
.prose h2{font-size:var(--step-2);font-variation-settings:"wdth" 106;margin-top:2.2em}
.prose h3{font-size:var(--step-1);font-variation-settings:"wdth" 104;margin-top:1.8em}
.prose h4{font-size:var(--step-0);font-variation-settings:"wdth" 102;margin-top:1.6em}
.prose h2:first-child,.prose h3:first-child,.prose h1:first-child{margin-top:0}
.prose p{color:var(--ink-2);max-width:70ch}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:.18em}
.prose a:hover{text-decoration-thickness:2px}
.prose ul,.prose ol{padding-left:1.3em;color:var(--ink-2)}
.prose li+li{margin-top:.4em}
.prose ul{list-style:none;padding-left:0}
.prose ul li{position:relative;padding-left:1.3em}
.prose ul li::before{
  content:"";position:absolute;left:.15em;top:.65em;
  width:6px;height:1.5px;background:var(--accent);
}
.prose img{border-radius:3px;height:auto}
.prose blockquote{
  margin-inline:0;padding-left:1.2em;border-left:2px solid var(--accent);
  font-family:var(--serif);font-style:italic;font-size:var(--step-1);
  color:var(--ink);
}
.prose blockquote p{color:inherit}
.prose hr{border:0;border-top:1px solid var(--line);margin-block:2.5em}
.prose figure{margin-inline:0}
.prose table{width:100%;border-collapse:collapse;font-size:.94em}
.prose th,.prose td{text-align:left;padding:.6em .8em;border-bottom:1px solid var(--line)}
.prose th{font-weight:600;color:var(--ink)}
.prose-wrap{overflow-x:auto}

/* Zitat von Alex */
.pull{
  font-family:var(--serif);font-style:italic;
  font-size:var(--step-2);line-height:1.32;color:var(--ink);
  max-width:24ch;margin:0;text-wrap:balance;
}
.pull__by{
  display:block;margin-top:.9rem;
  font-family:var(--ui);font-style:normal;font-size:var(--step--1);
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
}
.chapter .pull{color:var(--stage-ink)}
.chapter .pull__by{color:var(--stage-ink-2)}

/* Servicegebiet */
.places{display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0;list-style:none}
.places li{
  font-size:.82rem;color:var(--ink-2);
  border:1px solid var(--line);border-radius:999px;padding:.22rem .7rem;
}
.chapter .places li{color:var(--stage-ink-2);border-color:var(--stage-line)}

/* Video im Seiteninhalt */
.videoframe{
  position:relative;border-radius:3px;overflow:hidden;background:var(--stage-2);
  aspect-ratio:16/9;
}
.videoframe video{width:100%;height:100%;object-fit:cover}

/* Seitenweise Navigation am Fuß eines Kapitels */
.nextup{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:1rem;padding-block:1.4rem;border-top:1px solid var(--line);
}
.nextup a{
  font-family:var(--sans);font-weight:700;font-variation-settings:"wdth" 104;
  font-size:var(--step-1);letter-spacing:-.015em;text-decoration:none;color:var(--ink);
}
.nextup a:hover{color:var(--accent)}

/* WordPress-Standardklassen */
.alignleft{float:left;margin:0 1.5rem 1rem 0}
.alignright{float:right;margin:0 0 1rem 1.5rem}
.aligncenter{margin-inline:auto;display:block}
.wp-caption{max-width:100%}
.wp-caption-text,.prose figcaption{
  font-size:var(--step--1);color:var(--ink-3);margin-top:.5rem;
}
.screen-reader-text{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* ─────────────────────────────────────────────────────────────
   Kaskade gegen das Eltern-Theme
   Colibri druckt „body h1 { color:#17252a }" inline in den Kopf.
   Eine geerbte Farbe verliert gegen jede ausdrückliche Regel — egal
   wie spezifisch. Deshalb werden alle Überschriftenfarben hier
   ausdrücklich gesetzt, mit Klassen statt Elementen.
   ───────────────────────────────────────────────────────────── */
.display,
.service__name,
.step h3,
.nextup a,
.pull,
.wedding__title,
.wedding__quote{color:var(--ink)}

.stage .display,
.stage h1,
.stage h2,
.pagehead .display,
.pagehead h1,
.chapter .display,
.chapter h1,
.chapter h2,
.chapter h3,
.chapter .service__name,
.chapter .step h3,
.chapter .nextup a,
.chapter .pull,
.chapter .wedding__title,
.chapter .wedding__quote{color:var(--stage-ink)}

/* Das Elementor-Kit setzt „.elementor-kit-392 h1 { font-family:"Alike Angular" }"
   — eine Schrift, die nirgends geladen wird. Die Unterseiten zeigten ihre
   Hauptüberschrift deshalb in der Ersatzschrift des Browsers. */
body[class] h1.display,
body[class] .prose h1{font-family:var(--sans)}

.stage .eyebrow,
.pagehead .eyebrow,
.chapter .eyebrow{color:var(--stage-accent)}

.stage .lede,
.pagehead .lede,
.chapter .lede,
.chapter p{color:var(--stage-ink-2)}

.chapter .tags li{color:var(--stage-ink-2);border-color:var(--stage-line)}
.chapter .tags li:hover{color:var(--stage-accent);border-color:var(--stage-accent)}

/* Colibri setzt außerdem Abstände auf Überschriften und Absätze. */
.display,.wedding__title,.wedding__quote,.eyebrow,.service__name,.step h3{margin-block:0}
.hero h1{margin:0}
.pagehead h1{margin:.8rem 0 0}

/* Inhalte aus dem Editor sind oft in Gruppen-Divs verschachtelt.
   Ohne die früheren Inline-Abstände brauchen deren Kinder eigene. */
.prose :is(div,section,article) > * + *{margin-top:1.1em}
.prose div:has(> h3):not(:has(div)){
  padding-block:1.05em;
  border-top:1px solid var(--line);
}
.prose div:has(> h3):not(:has(div)) > h3{margin-top:0}
.prose div:has(> h3):not(:has(div)) > p{margin-top:.35em}

/* Fingerziele: mindestens 44 px, sobald mit dem Finger bedient wird.
   Der kompakte Knopf in der Leiste lag mit 38 px darunter. */
@media (pointer:coarse){
  .btn--sm{min-height:44px;padding-inline:1.1rem}
  .motion-toggle{min-height:44px}
  .contact__col a{min-height:44px}
  .foot__links a{min-height:44px}
}

/* ─────────────────────────────────────────────────────────────
   Elementor setzt über sein globales Kit „.elementor-kit-NNN
   { background:#fff }" auf dem body. Eine Klasse schlägt meinen
   Element-Selektor — im Dunkelmodus stand dadurch heller Text auf
   weißem Grund. „body[class]" zählt als Klasse plus Element und
   gewinnt, ohne an die Kit-Nummer gebunden zu sein.
   ───────────────────────────────────────────────────────────── */
body[class]{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--ui);
  font-size:var(--step-0);
  line-height:1.6;
}


/* ─────────────────────────────────────────────────────────────
   Jeder Abschnitt kann dunkel oder hell sein (siehe front-page.php).
   Was auf hellem Grund als Linie, Rahmen oder Logo funktioniert,
   braucht auf dunklem Grund eigene Werte.
   ───────────────────────────────────────────────────────────── */
.chapter .services,
.chapter .service,
.chapter .steps,
.chapter .step,
.chapter .nextup,
.chapter .contact__cols,
.chapter .specs li,
.chapter .places li,
.chapter .tags li{border-color:var(--stage-line)}

.chapter .step::before{color:var(--stage-accent)}
.chapter .service__desc,
.chapter .step p,
.chapter .tile figcaption,
.chapter .tile__format{color:var(--stage-ink-2)}
.chapter .tile__frame{background:var(--stage-2)}

/* Logowand: auf dunklem Grund immer weiße Silhouetten */
.chapter .clients img{filter:grayscale(1) brightness(0) invert(1) opacity(.62)}
.chapter .clients li:hover img{filter:grayscale(1) brightness(0) invert(1) opacity(1)}

/* Zwei helle Abschnitte stoßen nie aneinander — der Wechsel trennt sie.
   Der letzte helle Abschnitt vor dem Kontaktblock braucht trotzdem eine Kante. */
.band + .contact{border-top:1px solid var(--line)}

/* Im Dunkelmodus heben sich die dunklen Abschnitte von der Seite ab.
   Die Kacheln darin brauchen dann einen eigenen, noch tieferen Grund. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .chapter .tile__frame{background:var(--stage)}
}
:root[data-theme="dark"] .chapter .tile__frame{background:var(--stage)}


/* Videokachel ohne Rahmen: kein Radius, kein Grund, keine Bildmarken,
   keine Vergrößerung beim Zeigen — nur das Video. Das Seitenverhältnis
   bleibt gesetzt, damit trotz preload="none" kein Platz nachspringt. */
.tile--film video{
  display:block;width:100%;height:auto;
  aspect-ratio:9/16;object-fit:cover;
  object-position:center;
}

/* Stehen unterschiedlich hohe Kacheln nebeneinander, sitzen sie oben
   bündig statt in der Reihe zu schwimmen. */
.grid{align-items:start}


/* ═════════════════════════════════════════════════════════════
   Kopfzeile als funktionale Ebene über dem Inhalt

   HIG Liquid Glass: die Leiste schwebt über der Inhaltsebene.
   Über Medien die durchsichtige Variante („Clear"), sobald Inhalt
   darunter läuft die blickdichtere („Regular"). Text darauf
   monochrom — hell über Dunklem, dunkel über Hellem. Farbe nur
   dort, wo sie etwas bedeutet: die Marke.

   Ohne JavaScript bleibt es beim Material — das trägt über jedem
   Untergrund. Erst „js-nav" schaltet den durchsichtigen Zustand frei.
   ═════════════════════════════════════════════════════════════ */
.nav{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--paper) 72%,transparent);
  border-bottom:1px solid var(--line);
  transition:background .35s ease,border-color .35s ease;
}
@supports (backdrop-filter:blur(1px)){
  .nav{backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px)}
}

.nav__in{min-height:48px;padding-block:0;gap:clamp(.4rem,1.6vw,1.25rem)}

/* Über der Bühne: durchsichtig, nur leicht gestreut, damit das Video
   durchscheint. Die Bühne ist dunkel genug — HIG verlangt eine
   Abdunklung erst über hellem Untergrund. */
.js-nav .nav{
  /* Keine glatte Durchsichtigkeit, sondern eine leichte Abdunklung nach
     HIG: über hellem Untergrund braucht die Glasebene eine Dämpfung,
     sonst verliert die Schrift darauf den Kontrast. Gerechnet am
     ungünstigsten Fall (helles Videobild unter der Bühnenabdunklung):
     ohne Dämpfung käme das Markenrot auf 4,00:1, mit dieser auf 4,86:1. */
  background:linear-gradient(180deg,rgba(11,11,13,.34),rgba(11,11,13,.22));
  border-bottom-color:transparent;
}
@supports (backdrop-filter:blur(1px)){
  .js-nav .nav{backdrop-filter:saturate(140%) blur(4px);-webkit-backdrop-filter:saturate(140%) blur(4px)}
}
.js-nav .nav .brand__name{color:var(--brand-hell)}
.js-nav .nav .nav__links a{color:rgba(255,255,255,.74)}
.js-nav .nav .nav__links a:hover{color:#fff}
.js-nav .nav .nav__links a[aria-current="true"]{color:#fff}
.js-nav .nav .nav__cta{background:rgba(255,255,255,.94);color:#0B0B0D}
.js-nav .nav .nav__cta:hover{background:#fff}

/* Sobald Inhalt unter die Leiste läuft, verdichtet sie sich. */
.js-nav .nav.nav--material{
  background:color-mix(in srgb,var(--paper) 72%,transparent);
  border-bottom-color:var(--line);
}
@supports (backdrop-filter:blur(1px)){
  .js-nav .nav.nav--material{backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px)}
}
.js-nav .nav.nav--material .brand__name{color:var(--brand)}
.js-nav .nav.nav--material .nav__links a{color:var(--ink-2)}
.js-nav .nav.nav--material .nav__links a:hover{color:var(--ink)}
.js-nav .nav.nav--material .nav__links a[aria-current="true"]{color:var(--ink)}
.js-nav .nav.nav--material .nav__cta{background:var(--ink);color:var(--paper)}

/* Wer Transparenz reduziert, bekommt volle Deckkraft statt Material. */
@media (prefers-reduced-transparency:reduce){
  .nav,
  .js-nav .nav.nav--material{background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none}
  .js-nav .nav{background:var(--stage);backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media (prefers-reduced-motion:reduce){
  .nav{transition:none}
}

/* Marke und Verweise: kleiner, ruhiger, ohne Pillen beim Zeigen */
.brand__mark{width:28px;height:28px}
.brand__name{font-size:.95rem}

.nav__links{justify-content:flex-start}
@media (min-width:940px){.nav__links{justify-content:center}}
.nav__links a{
  padding:0 .8rem;
  font-size:.82rem;
  font-weight:450;
  letter-spacing:-.006em;
  border-radius:0;
  background:none;
  transition:color .2s ease;
}
.nav__links a:hover{background:none}
.nav__links a[aria-current="true"]{font-weight:600}

.nav__cta{
  font-size:.82rem;
  padding:.42rem 1rem;
  min-height:34px;
  letter-spacing:-.006em;
}
@media (pointer:coarse){
  /* Fingerbedienung: das Ziel bleibt bei 44 px, die Leiste wächst mit.
     Sonst überschriebe die kompakte Leiste die Mindestgröße. */
  .nav__in{min-height:54px}
  .nav__cta{min-height:44px;padding-inline:1.1rem}
}


/* ═════════════════════════════════════════════════════════════
   Kopfzeile: ab dem Scrollen eine schwebende Glaskapsel

   HIG Liquid Glass: die Bedienebene „schwebt über der Inhaltsebene".
   Am Seitenanfang liegt die Leiste noch bündig über der Bühne; sobald
   Inhalt darunterläuft, löst sie sich ab und wird zur Kapsel.
   ═════════════════════════════════════════════════════════════ */
.nav__in{
  transition:margin .5s var(--kurve),padding .5s var(--kurve),
             border-radius .5s var(--kurve),background .35s ease,
             box-shadow .45s var(--kurve),border-color .35s ease;
  border:1px solid transparent;
}

/* Am Seitenanfang: bündig, keine Kapsel. */
.js-nav .nav .nav__in{
  margin-block:0;border-radius:0;background:none;box-shadow:none;
  border-color:transparent;
}

/* Verdichtet: die Glasfläche wandert von der Leiste in die Kapsel. */
.js-nav .nav.nav--material{
  background:none;
  border-bottom-color:transparent;
}
@supports (backdrop-filter:blur(1px)){
  .js-nav .nav.nav--material{backdrop-filter:none;-webkit-backdrop-filter:none}
}
.js-nav .nav.nav--material .nav__in{
  margin-block:8px;
  padding-inline:clamp(.9rem,2vw,1.4rem);
  border-radius:999px;
  background:color-mix(in srgb,var(--paper) 74%,transparent);
  border-color:color-mix(in srgb,var(--ink) 9%,transparent);
  box-shadow:0 1px 2px rgba(20,22,26,.05),0 10px 30px -14px rgba(20,22,26,.32);
}
@supports (backdrop-filter:blur(1px)){
  .js-nav .nav.nav--material .nav__in{
    backdrop-filter:saturate(180%) blur(20px);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
  }
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .js-nav .nav.nav--material .nav__in{
    box-shadow:0 1px 2px rgba(0,0,0,.4),0 12px 34px -14px rgba(0,0,0,.75);
  }
}
:root[data-theme="dark"] .js-nav .nav.nav--material .nav__in{
  box-shadow:0 1px 2px rgba(0,0,0,.4),0 12px 34px -14px rgba(0,0,0,.75);
}
@media (prefers-reduced-transparency:reduce){
  .js-nav .nav.nav--material .nav__in{background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media (prefers-reduced-motion:reduce){
  .nav__in{transition:none}
}

/* ═════════════════════════════════════════════════════════════
   Zeige-Zustände
   HIG: „kurz und präzise". Eine Bewegung je Element, nicht drei.
   ═════════════════════════════════════════════════════════════ */
.tile__frame{
  transition:box-shadow .45s var(--kurve);
}
.tile__frame img,.tile__frame video{
  transition:transform .6s var(--kurve),filter .45s var(--kurve);
}
.tile:hover .tile__frame{
  box-shadow:0 18px 40px -20px rgba(20,22,26,.45);
}
.chapter .tile:hover .tile__frame{
  box-shadow:0 18px 44px -20px rgba(0,0,0,.7);
}

/* Leistungszeilen heben sich beim Zeigen leicht heraus. */
.service{
  padding-inline:clamp(.5rem,1.4vw,1rem);
  margin-inline:calc(-1 * clamp(.5rem,1.4vw,1rem));
  border-radius:10px;
  transition:background .3s var(--kurve);
}
.service:hover{background:color-mix(in srgb,var(--ink) 4%,transparent)}
.chapter .service:hover{background:color-mix(in srgb,#fff 6%,transparent)}
.service__name{transition:color .3s var(--kurve)}
.service:hover .service__name{color:var(--accent)}
.chapter .service:hover .service__name{color:var(--stage-accent)}

/* Weiterführende Verweise: der Pfeil rückt nach. */
.nextup a{display:inline-flex;align-items:center;gap:.45em}
.nextup a::after{
  content:"\2192";
  display:inline-block;
  transition:transform .35s var(--kurve);
}
.nextup a:hover::after{transform:translateX(4px)}

.btn{will-change:transform}
.btn--primary:hover,.btn--onstage:hover{transform:translateY(-1px) scale(1.015)}

@media (prefers-reduced-motion:reduce){
  .tile__frame,.tile__frame img,.tile__frame video,
  .service,.service__name,.nextup a::after{transition:none}
  .nextup a:hover::after{transform:none}
  .btn--primary:hover,.btn--onstage:hover{transform:none}
}

/* ═════════════════════════════════════════════════════════════
   Instagram-Abschnitt
   Platzhalter im Hochformat bis zum Klick; danach setzt Instagram
   seine eigene Karte ein (mindestens 326 px breit, daher das Raster).
   ═════════════════════════════════════════════════════════════ */
.ig__raster{
  /* Flex statt Raster: bricht eine Reihe um, steht der Rest mittig statt
     allein links. Instagrams Karte braucht mindestens 326 px; 360 px
     lassen bei voller Breite drei Reels nebeneinander zu. */
  display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;
  gap:var(--gap);
  margin:0;padding:0;list-style:none;
}
.ig__kachel{flex:0 1 360px;min-width:min(100%,326px)}
.ig__kachel iframe,
.ig__kachel .instagram-media{margin:0 auto !important}

.ig__platzhalter{
  all:unset;box-sizing:border-box;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.55rem;
  width:100%;aspect-ratio:9/16;
  border-radius:14px;
  background:var(--surface);
  border:1px solid var(--line);
  color:var(--ink-2);
  font-family:var(--ui);
  transition:background .3s var(--kurve),border-color .3s var(--kurve),color .3s var(--kurve);
}
.ig__platzhalter:hover{background:var(--surface-2);border-color:var(--line-strong);color:var(--ink)}
.ig__platzhalter:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.ig__symbol{
  display:grid;place-items:center;width:58px;height:58px;border-radius:50%;
  background:var(--ink);color:var(--paper);
  transition:transform .45s var(--kurve);
}
.ig__symbol svg{margin-left:3px}
.ig__platzhalter:hover .ig__symbol{transform:scale(1.08)}
.ig__titel{font-size:.95rem;font-weight:600;margin-top:.35rem}
.ig__quelle{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}

.chapter .ig__platzhalter{background:var(--stage-2);border-color:var(--stage-line);color:var(--stage-ink-2)}
.chapter .ig__platzhalter:hover{background:color-mix(in srgb,#fff 7%,var(--stage-2));color:var(--stage-ink)}
.chapter .ig__symbol{background:var(--stage-ink);color:var(--stage)}
.chapter .ig__quelle{color:var(--stage-ink-2)}

.ig__fuss{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;text-align:center;gap:.7rem 1rem;margin-top:clamp(1.25rem,3vw,2rem)}
.ig__hinweis{flex-basis:100%;margin:0;font-size:var(--step--1);color:var(--ink-3)}

@media (prefers-reduced-motion:reduce){
  .ig__platzhalter,.ig__symbol{transition:none}
  .ig__platzhalter:hover .ig__symbol{transform:none}
}

/* ═════════════════════════════════════════════════════════════
   ALL-Wortspiel: in jeder ALL-Überschrift trägt „ALL" die Markenfarbe,
   das zweite Wort bleibt neutral. So wird es über alle Abschnitte
   hinweg als ein Muster lesbar.
   ═════════════════════════════════════════════════════════════ */
.eyebrow--all{color:var(--ink-3)}
.eyebrow--all .all{color:var(--brand);font-weight:800}
.chapter .eyebrow.eyebrow--all{color:var(--stage-ink-2)}
.chapter .eyebrow--all .all{color:var(--brand-hell)}

/* ── ALL WEB: drei Säulen ─────────────────────────────────────── */
.saeulen{
  display:grid;grid-template-columns:minmax(0,1fr);
  margin:0;padding:0;list-style:none;
  border-top:1px solid var(--line);
}
.saeule{padding-block:clamp(1.25rem,2.6vw,2rem);border-bottom:1px solid var(--line)}
@media (min-width:760px){
  .saeulen{grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--line)}
  .saeule{padding-inline:clamp(1rem,2.4vw,2rem);border-bottom:0;border-left:1px solid var(--line)}
  .saeule:first-child{padding-left:0;border-left:0}
}
.saeule__wort{
  margin:0 0 .65rem;
  font-family:var(--sans);font-weight:700;font-variation-settings:"wdth" 112;
  font-size:var(--step-3);letter-spacing:-.025em;line-height:1;
  color:var(--ink);
  transition:color .35s var(--kurve);
}
.saeule p{margin:0;color:var(--ink-2);max-width:34ch}
.saeule:hover .saeule__wort{color:var(--brand)}

.chapter .saeulen,.chapter .saeule{border-color:var(--stage-line)}
.chapter .saeule__wort{color:var(--stage-ink)}
.chapter .saeule:hover .saeule__wort{color:var(--brand-hell)}

.web__abschluss{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem}
.web__beispiel{margin:0;font-family:var(--serif);font-style:italic;font-size:var(--step-1);color:var(--ink)}
.chapter .web__beispiel{color:var(--stage-ink)}

/* ── Instagram: vier Reels als 2 × 2 statt 3 + 1 ──────────────── */
.ig__raster[data-anzahl="4"]{max-width:calc(2 * 360px + var(--gap));margin-inline:auto}

@media (prefers-reduced-motion:reduce){
  .saeule__wort{transition:none}
}



/* Ganzes Bild statt Ausschnitt: für Motive auf einfarbigem Grund.
   Der Rahmen nimmt die Hintergrundfarbe des Bildes an, dadurch ist der
   Rand unsichtbar. Fest statt Token — er muss zum Bild passen, nicht zum
   Theme. Hier: das KI-GIF (1100 × 1600) auf #FCFCFC, vorher 31 % beschnitten. */
.tile__frame.tile__frame--ganz,
.chapter .tile__frame.tile__frame--ganz,
:root:not([data-theme="light"]) .chapter .tile__frame.tile__frame--ganz,
:root[data-theme="dark"] .chapter .tile__frame.tile__frame--ganz{background:#FCFCFC}
.tile__frame--ganz img,.tile__frame--ganz video{object-fit:contain}

/* ── ALL LOGO ─────────────────────────────────────────────────── */
.marke-liste{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.marke-liste li{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:.2rem 1.5rem;padding-block:.85rem;border-bottom:1px solid var(--line);
}
.marke-liste__was{
  font-family:var(--sans);font-weight:700;font-variation-settings:"wdth" 104;
  font-size:var(--step-1);letter-spacing:-.015em;line-height:1.2;color:var(--ink);
  transition:color .35s var(--kurve);
}
.marke-liste__wozu{color:var(--ink-2)}
.marke-liste li:hover .marke-liste__was{color:var(--brand)}

.chapter .marke-liste,.chapter .marke-liste li{border-color:var(--stage-line)}
.chapter .marke-liste__was{color:var(--stage-ink)}
.chapter .marke-liste__wozu{color:var(--stage-ink-2)}
.chapter .marke-liste li:hover .marke-liste__was{color:var(--brand-hell)}

.logo-zeichen{margin:0;display:flex;flex-direction:column;align-items:center;gap:1.1rem;text-align:center}
.logo-zeichen__bild{
  width:min(100%,280px);height:auto;
  transition:transform .9s var(--kurve);
}
.logo-zeichen:hover .logo-zeichen__bild{transform:scale(1.04) rotate(-4deg)}
.logo-zeichen figcaption{font-size:var(--step--1);color:var(--ink-3);max-width:28ch}
.chapter .logo-zeichen figcaption{color:var(--stage-ink-2)}

@media (prefers-reduced-motion:reduce){
  .marke-liste__was,.logo-zeichen__bild{transition:none}
  .logo-zeichen:hover .logo-zeichen__bild{transform:none}
}


/* ── Kurzvideos (Abschnitt „Auf Instagram") ─────────────────────── */
.kurzvideo{
  display:block;width:100%;aspect-ratio:9/16;object-fit:cover;
  background:var(--surface-2);
}
.chapter .kurzvideo{background:var(--stage-2)}

/* ── ALL SOUND: Tonspuren ────────────────────────────────────────── */
.spuren{
  display:flex;flex-direction:column;gap:.85rem;
  padding:clamp(1rem,2.4vw,1.6rem);
  border:1px solid var(--line);border-radius:14px;
  background:var(--surface);
}
.chapter .spuren{border-color:var(--stage-line);background:var(--stage-2)}
.spur{display:grid;grid-template-columns:6.2rem minmax(0,1fr);align-items:center;gap:1rem}
.spur__name{font-size:var(--step--1);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.chapter .spur__name{color:var(--stage-ink-2)}
.spur__welle{display:flex;align-items:center;gap:2px;height:46px}
.spur__welle i{
  flex:1 1 0;min-width:1px;height:calc(var(--h) * 100%);
  border-radius:2px;background:color-mix(in srgb,var(--ink-3) 55%,transparent);
  transform-origin:center;
}
.chapter .spur__welle i{background:color-mix(in srgb,var(--stage-ink-2) 45%,transparent)}
.spur--aktiv .spur__name{color:var(--brand)}
.spur--aktiv .spur__welle i{background:var(--brand)}
.chapter .spur--aktiv .spur__name{color:var(--brand-hell)}
.chapter .spur--aktiv .spur__welle i{background:var(--brand-hell)}

@media (max-width:520px){
  .spur{grid-template-columns:minmax(0,1fr);gap:.35rem}
}

/* ═════════════════════════════════════════════════════════════
   GEOMETRIE-EBENE & STUDIO-BESCHRIFTUNG
   Vorbild: das Arbeitsgefühl eines Motion-Art-Studios — Netz aus dem
   Bild selbst, technische Beschriftung mit echten Werten, feines Raster.
   ═════════════════════════════════════════════════════════════ */
.geo-ebene{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:1;
  transition:transform .6s var(--kurve);
}
.geo-ebene--buehne{
  z-index:-1;
  /* Hinter dem Text nur ein Drittel der Linienkraft — die Überschrift und
     vor allem der kleinere Einleitungstext bleiben ruhig lesbar. */
  -webkit-mask-image:linear-gradient(to right,rgba(0,0,0,.32) 0%,rgba(0,0,0,.32) 42%,#000 72%);
          mask-image:linear-gradient(to right,rgba(0,0,0,.32) 0%,rgba(0,0,0,.32) 42%,#000 72%);
}
@media (max-width:760px){
  /* Am Handy steht der Text unten über die ganze Breite */
  .geo-ebene--buehne{
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 28%,rgba(0,0,0,.28) 52%);
            mask-image:linear-gradient(to bottom,#000 0%,#000 28%,rgba(0,0,0,.28) 52%);
  }
}
.tile:hover .tile__frame .geo-ebene{transform:scale(1.035)}
.tile--film,.ig__kachel{position:relative}

.geo-hud{
  position:absolute;z-index:2;pointer-events:none;
  font:500 10px/1 "Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.06em;text-transform:uppercase;
  color:#F2F2F4;background:rgba(11,11,13,.62);
  padding:4px 6px;border-radius:3px;
  font-variant-numeric:tabular-nums;
}
.geo-hud--lo{top:10px;left:10px}
.geo-hud--ro{top:10px;right:10px}
.geo-hud--status{
  top:max(1rem,env(safe-area-inset-top));left:clamp(1rem,3vw,2rem);
  z-index:3;background:rgba(11,11,13,.45);
  padding:6px 9px;letter-spacing:.09em;
}
@supports (backdrop-filter:blur(1px)){
  .geo-hud{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
}
@media (max-width:760px){
  /* Oben stünde sie am Handy mit „Bewegung pausieren" übereinander —
     unten in der Polsterung der Bühne ist die ganze Breite frei. */
  .geo-hud--status{top:auto;bottom:max(12px,env(safe-area-inset-bottom))}
}
@media (max-width:520px){
  .geo-hud{font-size:9px;padding:3px 5px}
  .geo-hud--status{font-size:9px}
}

/* Feines Arbeitsraster in den dunklen Abschnitten */
.chapter,.stage{
  background-image:
    linear-gradient(to right,rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:56px 56px;
}
@media (max-width:520px){.chapter,.stage{background-size:36px 36px}}

/* ═════════════════════════════════════════════════════════════
   ZUSAMMENBAU — Szenen, die sich beim Scrollen zusammensetzen
   Karten sammeln sich, stieben auseinander und landen in einem Satz.
   Die Bewegung rechnet js/zusammenbau.js; ohne das Script (und bei
   „Bewegung reduzieren") steht der fertige Satz mit den Bildern da.
   .zb ist die Szene (mit Script: der Laufweg), .zb__buehne bleibt stehen.
     .zusammenbau  rotes Zwischenspiel nach den Arbeiten
     .zb--web      Kopf von ALL WEB, übernimmt Hell/Dunkel des Abschnitts
   ═════════════════════════════════════════════════════════════ */
.zb{
  --zb-tinte:var(--ink);
  --zb-nacht:#0B0B0D;
  --zb-weg:360svh;
  position:relative;
}
.chapter .zb{--zb-tinte:var(--stage-ink)}
.zb__buehne{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4rem;
  min-height:100svh;
  padding-block:6rem 4rem;padding-inline:max(16px,4vw);
  overflow:hidden;
}
.zb__buehne::before,.zb__buehne::after{content:none}
.zb .zb__satz{
  margin:0;max-width:20em;
  font-family:var(--sans);font-weight:700;font-variation-settings:"wdth" 108;
  font-size:clamp(1.55rem,.95rem + 2.9vw,3.7rem);
  line-height:1.16;letter-spacing:-.02em;
  text-align:center;text-wrap:balance;
  color:var(--zb-tinte);
}
.zb__wort{display:inline-block}
.zb__paar{white-space:nowrap}
.zb__slot{
  display:inline-block;position:relative;
  width:1.04em;height:1.04em;margin-inline:.02em .1em;
  vertical-align:-.17em;
}
.zb__karte{
  position:absolute;inset:0;
  display:block;overflow:hidden;border-radius:24%;
  background:var(--zb-nacht);color:#FFF6F3;
  box-shadow:0 14px 34px -14px rgba(0,0,0,.55);
}
.chapter .zb__karte{box-shadow:0 0 0 1px rgba(255,255,255,.12),0 14px 34px -14px rgba(0,0,0,.7)}
.zb__karte img{width:100%;height:100%;object-fit:cover;display:block;max-width:none}
.zb__karte svg{display:block;width:100%;height:100%}
.zb__vorspann{display:none}

/* Rotes Zwischenspiel */
.zusammenbau{
  --zb-tinte:#FFF6F3;
  background-color:#B01810;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.06) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:56px 56px;
  color:var(--zb-tinte);
}
@media (max-width:520px){.zusammenbau{background-size:36px 36px}}
.zusammenbau .zb__eyebrow{color:rgba(255,246,243,.78)}
.zusammenbau .zb__eyebrow .all{color:var(--zb-tinte);font-weight:800}
.zb__karte--logo img{object-fit:contain;padding:10%}
.zb__karte--film img{object-position:62% 50%}
.zb__karte--web{background:#FFF6F3;color:var(--zb-nacht)}
.zb__karte--sound{color:#FF6B60}

/* ALL WEB: die Szene ersetzt den Kopf, der Abschnitt beginnt mit ihr */
.band--szene{padding-top:0}
.zb--web{--zb-weg:290svh}
.zb--web .zb__satz{max-width:15em;font-size:clamp(1.9rem,1.1rem + 3.6vw,4.6rem);line-height:1.08}
.zb__karte--individuell{background:#B01810;color:#FFF6F3}
.zb__karte--schnell{color:#FF6B60}
.zb__karte--sicher{background:#26262C;color:#FFF6F3}
.web__lede{max-width:44ch}
/* Die Bühne ist bildschirmhoch, der Satz steht in ihrer Mitte. Der Text
   danach rückt in die leere untere Hälfte nach — erst, wenn der Satz steht. */
.zb--web.zb--an + .wrap{margin-top:-16svh}

/* Mit Script: Laufweg, Bühne bleibt stehen, Karten in voller Startgröße */
.zb.zb--an{height:var(--zb-weg)}
@media (max-width:700px){
  .zb{--zb-weg:320svh}
  .zb--web{--zb-weg:260svh}
}
.zb--an .zb__buehne{position:sticky;top:0;height:100svh;min-height:0}
.zb--flug .zb__karte{
  inset:auto;left:0;top:0;
  width:var(--S);height:var(--S);
  transform-origin:50% 50%;will-change:transform;
}
/* Sanfte Fassung („Bewegung reduzieren"): Karten bleiben klein in ihrer Lücke
   und blenden nur ein. Kürzerer Laufweg — ohne Flug gibt es weniger zu sehen. */
.zb--sanft .zb__karte{opacity:0}
.zb.zb--sanft{--zb-weg:230svh}
.zb--web.zb--sanft{--zb-weg:200svh}
.zb--an .zb__wort{opacity:0}
.zb--an.zusammenbau .zb__eyebrow{opacity:0}
.zb--an .zb__vorspann{
  display:block;position:absolute;left:0;right:0;margin:0;
  padding-inline:max(16px,4vw);
  font-family:var(--sans);font-weight:800;font-variation-settings:"wdth" 118;
  font-size:clamp(1.7rem,1rem + 3vw,4rem);line-height:.98;letter-spacing:-.02em;
  text-transform:uppercase;text-align:center;text-wrap:balance;
  color:var(--zb-tinte);
}

/* ═════════════════════════════════════════════════════════════
   CHOREOGRAFIE
   1. Seitenstart — zeitgesteuert, einmalig.
   2. Beim Scrollen — Scroll-Zeitleiste des Browsers, ohne JavaScript,
      am Handy genauso. Wo sie fehlt, blendet site.js die Blöcke ein.
   Bei „Bewegung reduzieren" bleibt alles still und vollständig lesbar.
   ═════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:no-preference){

  /* ── 1. Seitenstart ── */
  .hero__eyebrow{animation:sperrung-setzen 1.1s var(--kurve) .05s both}
  @keyframes sperrung-setzen{from{opacity:0;letter-spacing:.5em}}

  .hero h1 .wort{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.16em;margin-bottom:-.16em}
  .hero h1 .wort > span{
    display:inline-block;
    animation:wort-steigt 1s var(--kurve) both;
    animation-delay:calc(.2s + var(--n) * 60ms);
  }
  @keyframes wort-steigt{from{transform:translateY(112%) rotate(6deg)}}

  .hero__lede{animation:auftritt .9s var(--kurve) .72s both}
  .hero__actions > :nth-child(1){animation:auftritt .8s var(--kurve) .86s both}
  .hero__actions > :nth-child(2){animation:auftritt .8s var(--kurve) .94s both}
  .hero__meta > span{animation:auftritt .7s var(--kurve) both}
  .hero__meta > :nth-child(1){animation-delay:1.02s}
  .hero__meta > :nth-child(2){animation-delay:1.08s}
  .hero__meta > :nth-child(3){animation-delay:1.14s}
  .hero__meta > :nth-child(4){animation-delay:1.20s}
  .hero__meta > :nth-child(5){animation-delay:1.26s}
  .motion-toggle,.geo-hud--status{animation:auftritt .8s var(--kurve) 1.2s both}
  @keyframes auftritt{from{opacity:0;transform:translateY(18px)}}

  /* Tonspuren spielen, solange sie sichtbar sind (auch am Handy) — und beim Zeigen */
  .spuren.spielt .spur__welle i,
  .spuren:hover .spur__welle i{
    animation:pegel .9s var(--kurve) infinite alternate;
    animation-delay:calc(var(--i) * -37ms);
  }
  @keyframes pegel{to{transform:scaleY(.42)}}
}

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){

    /* ── Bühne ── */
    .stage__media,.geo-ebene--buehne{
      animation:buehne-tiefe linear both;
      animation-timeline:view();animation-range:exit 0% exit 100%;
    }
    @keyframes buehne-tiefe{to{transform:translateY(12%) scale(1.06)}}
    .hero{animation:buehne-abgang linear both;animation-timeline:view();animation-range:exit 0% exit 60%}
    @keyframes buehne-abgang{to{opacity:0;transform:translateY(-44px) scale(.97)}}

    /* ── Überschriften steigen aus einer Maske ── */
    .band h2.display,.band .wedding__title,.band .saeule__wort{
      animation:maske-auf linear both;
      animation-timeline:view();animation-range:entry 5% cover 32%;
    }
    @keyframes maske-auf{
      from{clip-path:inset(100% -.3em -.4em -.3em);transform:translateY(.5em)}
      to{clip-path:inset(-.3em -.3em -.4em -.3em);transform:none}
    }

    /* ── ALL schiebt sich heran, das Wort folgt ── */
    .eyebrow--all .all,.eyebrow--all .all-wort{display:inline-block}
    .eyebrow--all .all{animation:all-rein linear both;animation-timeline:view();animation-range:entry 10% cover 28%}
    .eyebrow--all .all-wort{animation:wort-rein linear both;animation-timeline:view();animation-range:entry 30% cover 34%}
    @keyframes all-rein{from{opacity:0;transform:translateX(-1.4em)}}
    @keyframes wort-rein{from{opacity:0;transform:translateX(.9em);letter-spacing:.4em}}

    .band .lede,.band .web__beispiel,.logo-zeichen figcaption{
      animation:steigt linear both;animation-timeline:view();animation-range:entry 0% cover 25%;
    }
    @keyframes steigt{from{opacity:0;transform:translateY(26px)}}

    /* ── Kacheln setzen sich zusammen: jede kommt aus einer anderen
       Richtung, leicht verdreht, und rastet an ihrem Platz ein ── */
    .grid .tile{animation:zusammensetzen linear both;animation-timeline:view();animation-range:entry 0% cover 32%}
    .grid .tile:nth-child(6n+1){--zx:-15vw;--zy:10vh;--zr:-7deg}
    .grid .tile:nth-child(6n+2){--zx:3vw;--zy:17vh;--zr:5deg}
    .grid .tile:nth-child(6n+3){--zx:16vw;--zy:8vh;--zr:8deg}
    .grid .tile:nth-child(6n+4){--zx:-8vw;--zy:15vh;--zr:4deg}
    .grid .tile:nth-child(6n+5){--zx:11vw;--zy:19vh;--zr:-6deg}
    .grid .tile:nth-child(6n){--zx:-3vw;--zy:12vh;--zr:-4deg}
    @keyframes zusammensetzen{from{translate:var(--zx) var(--zy);rotate:var(--zr);scale:.8}}

    /* ── Kacheln öffnen sich wie ein Vorhang ── */
    .grid .tile__frame{animation:vorhang linear both;animation-timeline:view();animation-range:entry 0% entry 85%}
    .grid .tile:nth-child(3n+2) .tile__frame{animation-range:entry 7% entry 92%}
    .grid .tile:nth-child(3n) .tile__frame{animation-range:entry 14% entry 99%}
    @keyframes vorhang{from{clip-path:inset(100% 0 0 0 round 3px)}to{clip-path:inset(0 0 0 0 round 3px)}}
    .tile--film video,.kurzvideo{animation:vorhang-eckig linear both;animation-timeline:view();animation-range:entry 0% entry 85%}
    @keyframes vorhang-eckig{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0)}}
    .grid .tile figcaption{animation:steigt linear both;animation-timeline:view();animation-range:entry 40% entry 100%}

    /* ── Leistungen und Listen gleiten zeilenweise herein ── */
    .service,.marke-liste li,.step{
      animation:zeile-rein linear both;animation-timeline:view();animation-range:entry 0% entry 75%;
    }
    @keyframes zeile-rein{from{opacity:0;transform:translateX(-34px)}}

    /* ── Ablauf: die Linie wächst mit dem Lesen ── */
    .steps{position:relative}
    .steps::after{
      content:"";position:absolute;left:-14px;top:0;bottom:0;width:2px;
      background:var(--accent);transform-origin:top;
      animation:linie-waechst linear both;animation-timeline:view();animation-range:cover 12% cover 62%;
    }
    .chapter .steps::after{background:var(--stage-accent)}
    @keyframes linie-waechst{from{transform:scaleY(0)}}
    .step::before{display:inline-block;animation:nummer-pop linear both;animation-timeline:view();animation-range:entry 30% entry 95%}
    @keyframes nummer-pop{from{opacity:0;transform:scale(.3) rotate(-20deg)}}

    /* ── ALL WEB: Säulen nacheinander, Linien ziehen sich ── */
    .saeule{animation:steigt linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
    .saeule:nth-child(2){animation-range:entry 9% entry 89%}
    .saeule:nth-child(3){animation-range:entry 18% entry 98%}

    /* ── ALL LOGO: das Zeichen rollt herein und schwingt beim Scrollen ── */
    .logo-zeichen__bild{
      animation:logo-rollt linear both,logo-schwingt linear both;
      animation-timeline:view(),view();
      animation-range:entry 0% cover 42%,cover 0% cover 100%;
    }
    @keyframes logo-rollt{from{opacity:0;scale:.5;rotate:-220deg}}
    @keyframes logo-schwingt{from{translate:0 22px}to{translate:0 -22px}}

    .places li{animation:chip-pop linear both;animation-timeline:view();animation-range:entry 20% entry 95%}
    .places li:nth-child(2n){animation-range:entry 28% entry 100%}
    .places li:nth-child(3n){animation-range:entry 36% cover 12%}
    @keyframes chip-pop{from{opacity:0;transform:translateY(12px) scale(.7)}}

    /* ── ALL SOUND: Pegel wachsen beim Hereinkommen ── */
    .spur__welle i{
      animation:balken-wachsen linear both;animation-timeline:view();
      animation-range:entry calc(8% + var(--i) * .4%) cover calc(30% + var(--i) * .25%);
    }
    @keyframes balken-wachsen{from{scale:1 0}}

    /* ── Kunden ── */
    .clients li{animation:steigt linear both;animation-timeline:view();animation-range:entry 10% entry 90%}
    .clients li:nth-child(4n+2){animation-range:entry 18% entry 98%}
    .clients li:nth-child(4n+3){animation-range:entry 26% cover 10%}
    .clients li:nth-child(4n){animation-range:entry 34% cover 16%}

    /* ── Kontakt: der Unterstrich zieht sich unter die Adresse ── */
    .mailto{
      border-bottom-color:transparent;
      background:linear-gradient(var(--accent),var(--accent)) left bottom / 100% 2px no-repeat;
      animation:unterstrich linear both;animation-timeline:view();animation-range:entry 30% cover 40%;
    }
    @keyframes unterstrich{from{background-size:0% 2px}}

    /* Am Handy gibt es kein Zeigen: die Säulenwörter färben sich beim Durchscrollen */
    @media (hover:none){
      .saeule{--wort-akzent:var(--brand)}
      .chapter .saeule{--wort-akzent:var(--brand-hell)}
      .saeule__wort{
        animation:maske-auf linear both,wort-glueht linear both;
        animation-timeline:view(),view();
        animation-range:entry 5% cover 32%,cover 38% cover 62%;
      }
      @keyframes wort-glueht{50%{color:var(--wort-akzent)}}
    }
  }
}