/* ---------- Schriften, selbst gehostet ----------
   Früher von fonts.googleapis.com. Das übertrug beim Laden jede Besucher-IP an Google –
   ohne Einwilligung unzulässig (LG München I, Januar 2022). Jetzt aus wwwroot/fonts.

   Nur die Subsets latin und latin-ext; Deutsch liegt vollständig in latin. Archivo MUSS
   mit Breitenachse kommen (font-stretch 85% bis 125%): Die Wortmarke setzt wdth 118 und
   fiele sonst still auf Normalbreite zurück, ohne jede Fehlermeldung. Wer die Dateien
   austauscht, prüft genau das. */
@font-face{
  font-family:"Archivo";font-style:normal;font-weight:400 900;font-stretch:85% 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;
}
@font-face{
  font-family:"Archivo";font-style:normal;font-weight:400 900;font-stretch:85% 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:"Manrope";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("../fonts/manrope-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;
}
@font-face{
  font-family:"Manrope";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("../fonts/manrope-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;
}

:root{
  color-scheme: light;

  --paper:#F2F1EE;
  --paper-2:#E8E6E1;
  --surface:#FFFFFF;
  --ink:#0C0C0D;
  --ink-2:#3C3C40;
  --muted:#7C7C80;
  --rule:#D9D7D2;
  --on-slab:#F2F1EE;

  --display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --body:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --label:'Archivo','Helvetica Neue',Arial,sans-serif;

  --pad-x:clamp(20px,5vw,64px);
  --sec-y:clamp(72px,9vw,132px);
  --maxw:1280px;
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:1.0625rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
}

/* ---------- primitives ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad-x)}
.sec{padding-block:var(--sec-y);border-top:1px solid var(--rule)}
.sec[data-slab]{background:var(--ink);color:var(--on-slab);border-top:none}

.eyebrow{
  font-family:var(--label);font-weight:600;font-variant-numeric:tabular-nums;
  font-size:.72rem;
  letter-spacing:.04em;
  color:var(--muted);
  display:flex;align-items:center;gap:.75rem;
  margin:0 0 clamp(24px,4vw,44px);
}
.eyebrow b{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--rule)}
[data-slab] .eyebrow{color:#8B8B90}
[data-slab] .eyebrow b{color:var(--on-slab)}
[data-slab] .eyebrow::after{background:#2A2A2E}

h1,h2,h3{font-family:var(--display);font-weight:800;margin:0;text-wrap:balance;letter-spacing:-.025em;line-height:1.02}
h2,.rechtstext h1{font-size:clamp(2.1rem,5vw,4rem);font-variation-settings:'wdth' 108}
h3{font-size:clamp(1.25rem,2.2vw,1.75rem);font-weight:700}
p{margin:0}
.lede{font-size:clamp(1.05rem,1.5vw,1.3rem);color:var(--ink-2);max-width:60ch;line-height:1.5}
.label{font-family:var(--label);font-weight:600;font-variant-numeric:tabular-nums;font-size:.75rem;letter-spacing:.04em;}

.btn{
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--label);font-weight:600;font-variant-numeric:tabular-nums;font-size:.75rem;letter-spacing:.04em;
  padding:1rem 1.6rem;border:1px solid var(--ink);border-radius:999px;
  background:var(--ink);color:var(--paper);text-decoration:none;cursor:pointer;
  transition:background .25s ease,color .25s ease,transform .25s ease;
}
.btn:hover{background:transparent;color:var(--ink);transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--paper)}
[data-slab] .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
[data-slab] .btn:hover{background:transparent;color:var(--paper)}
.btn .arrow{transition:transform .25s ease}
.btn:hover .arrow{transform:translateX(4px)}

/* reveal — JS adds .pre only to elements below the fold, so the page is readable at rest */
[data-reveal]{transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
[data-reveal].pre{opacity:0;transform:translateY(20px)}

/* ---------- scrub bar ---------- */
.scrub{position:fixed;inset:0 0 auto 0;height:3px;background:var(--rule);z-index:60}
.scrub__fill{height:100%;width:0;background:var(--ink);transform-origin:left}
.scrub__ticks{position:absolute;inset:0;pointer-events:none}
.scrub__tick{position:absolute;top:0;width:1px;height:7px;background:var(--ink);opacity:.28}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:3px;z-index:50;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--rule);
}
.nav__in{
  max-width:var(--maxw);margin-inline:auto;padding:.85rem var(--pad-x);
  display:flex;align-items:center;gap:1.25rem;
}
.brand{display:flex;align-items:baseline;gap:.5rem;text-decoration:none;white-space:nowrap;font-family:var(--display);font-weight:900;font-variation-settings:'wdth' 112;letter-spacing:-.02em;font-size:1.05rem;}
.nav__links{display:flex;gap:1.5rem;margin-left:auto}
.nav__links a{
  font-family:var(--label);font-weight:600;font-variant-numeric:tabular-nums;font-size:.72rem;letter-spacing:.04em;
  text-decoration:none;color:var(--ink-2);padding-block:.3rem;position:relative;
}
.nav__links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--ink);transform:scaleX(0);transform-origin:right;transition:transform .3s ease}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav .btn{padding:.7rem 1.15rem;font-size:.68rem;white-space:nowrap}
.nav__menue{display:flex;align-items:center;gap:1.5rem;margin-left:auto}

/* Der Schalter liegt nur auf kleinen Schirmen vor. Drei Striche aus einem Element:
   der mittlere ist der Hintergrund, die äußeren sind ::before und ::after. */
.nav__schalter{
  display:none;margin-left:auto;width:46px;height:46px;flex:none;
  place-items:center;border:1px solid var(--rule);border-radius:12px;
  background:none;color:inherit;cursor:pointer;
}
.nav__striche,.nav__striche::before,.nav__striche::after{
  display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;
  transition:transform .25s ease,opacity .2s ease;
}
.nav__striche::before,.nav__striche::after{content:"";position:absolute}
.nav__striche::before{transform:translateY(-6px)}
.nav__striche::after{transform:translateY(6px)}
.nav__schalter[aria-expanded="true"] .nav__striche{background:transparent}
.nav__schalter[aria-expanded="true"] .nav__striche::before{transform:rotate(45deg)}
.nav__schalter[aria-expanded="true"] .nav__striche::after{transform:rotate(-45deg)}

@media (max-width:900px){
  /* Klappe unter der Leiste: Menüpunkte groß genug zum Tippen, darunter der Knopf
     über die volle Breite. Bis 20.09.2026 fehlten die Menüpunkte hier ganz – auf dem
     Telefon kam man nur durch Scrollen an die Bereiche. */
  .nav__schalter{display:grid;position:relative}
  .nav__menue{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:.25rem;margin:0;
    padding:.5rem var(--pad-x) 1rem;
    background:var(--paper);border-bottom:1px solid var(--rule);
    box-shadow:0 18px 30px rgba(12,12,13,.10);
  }
  .nav__menue.ist-offen{display:flex}
  .nav__links{flex-direction:column;align-items:stretch;gap:0;margin:0}
  .nav__links a{font-size:1rem;letter-spacing:0;color:var(--ink);padding-block:.85rem;border-bottom:1px solid var(--rule)}
  .nav__links a::after{display:none}
  .nav .btn{margin-top:.8rem;justify-content:center;font-size:.8rem;padding-block:.95rem}
}

/* ---------- hero ---------- */
/* Der Hero füllt genau den ersten Schirm: Was unter der Navigation übrig ist,
   teilen sich Wortmarke, Text und Video. svh statt vh, weil vh auf dem Telefon
   die eingefahrene Adressleiste mitrechnet und der Hero dann unten abgeschnitten
   wäre. --kopfhoehe setzt site.js aus der gemessenen Navigation. */
.hero{
  display:flex;flex-direction:column;
  min-height:calc(100svh - var(--kopfhoehe,70px));
  padding-block:clamp(10px,2.4svh,44px) clamp(10px,1.8svh,32px);
}

.word{margin:0;color:var(--ink)}

/* Auch diese Abstände hängen an der Schirmhöhe: Auf einem 720er Schirm muss der
   Textteil schrumpfen, sonst bleibt für das Video nur noch eine Briefmarke. */
.hero__meta{margin-top:clamp(8px,1.8svh,26px)}
.hero .lede{font-size:clamp(.98rem,1.7svh,1.3rem);max-width:62ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:clamp(8px,1.6svh,18px)}

/* ---------- footage plate ---------- */
.plate{position:relative;overflow:hidden;background:var(--paper-2);border:1px solid var(--rule)}
.plate canvas,.plate__media{display:block;width:100%;height:100%}
.plate__media{object-fit:cover}

/* Logo: die Marke läuft im monochromen Umfeld schwarz bzw. auf dem Slab weiß */
.brand__mark{width:26px;height:26px;object-fit:contain;filter:brightness(0);flex:none}
.foot__mark{width:44px;height:44px;object-fit:contain;filter:brightness(0) invert(1);margin-bottom:1rem}
.plate__ui{position:absolute;inset:0;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(12px,1.6vw,20px);mix-blend-mode:difference;color:#fff}
.plate__row{display:flex;justify-content:space-between;gap:1rem;font-family:var(--label);font-weight:600;font-variant-numeric:tabular-nums;font-size:.66rem;letter-spacing:.04em;}


.reel{margin-top:clamp(34px,5vw,60px);position:relative}
.reel .plate{aspect-ratio:21/9;cursor:none}
@media (max-width:700px){.reel .plate{aspect-ratio:4/3}}
.disc{
  position:absolute;top:0;left:0;width:104px;height:104px;border-radius:50%;
  background:var(--paper);color:var(--ink);display:grid;place-items:center;
  font-family:var(--label);font-weight:600;font-variant-numeric:tabular-nums;font-size:.62rem;letter-spacing:.04em;text-align:center;
  transform:translate(-50%,-50%) scale(0);transition:transform .3s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;z-index:2;
}
.reel:hover .disc{transform:translate(-50%,-50%) scale(1)}
@media (hover:none){.reel .plate{cursor:pointer}.disc{display:none}}

/* ---------- marquee ---------- */
.band{
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding-block:clamp(26px,3.6vw,46px);overflow:hidden;background:var(--surface);
}

.marquee{display:flex;gap:0;width:max-content}
.marquee__gruppe{display:flex;align-items:center}
@media (prefers-reduced-motion: no-preference){
  /* Drei Kopien im Markup, also verschiebt eine Runde um genau ein Drittel. */
  .marquee{animation:slide 40s linear infinite}
  .band:hover .marquee{animation-play-state:paused}
  @keyframes slide{to{transform:translateX(-33.3333%)}}
}
/* Jeder Kunde: groß der Name, klein darunter die Branche. Der Punkt als Trenner
   sitzt neben dem ganzen Block, nicht unter dem Namen. */
.kunde{
  display:flex;align-items:center;gap:clamp(1.4rem,3vw,3rem);
  padding-inline:clamp(1.4rem,3vw,3rem);
}
.kunde::after{content:"";width:8px;height:8px;background:var(--ink);border-radius:50%;flex:none}
.kunde__text{display:flex;flex-direction:column;align-items:center;gap:.4rem}
.kunde__name{
  font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 108;
  font-size:clamp(1.7rem,4.4vw,3.4rem);letter-spacing:-.03em;
  line-height:1.1;white-space:nowrap;color:var(--ink);
}
.kunde__art{
  font-family:var(--label);font-weight:600;font-size:clamp(.8rem,1vw,.9rem);
  letter-spacing:.04em;color:var(--muted);white-space:nowrap;
}

/* ---------- stats ---------- */
.stat__n{font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 100;font-size:clamp(2.2rem,4.6vw,3.6rem);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.stat__n sup{font-size:.42em;vertical-align:super;font-weight:600;margin-left:.12em}
.stat__l{font-family:var(--label);font-weight:600;font-variant-numeric:tabular-nums;font-size:.68rem;letter-spacing:.04em;color:var(--muted);margin-top:.7rem}

/* ---------- services ---------- */
.svc{border-top:1px solid var(--rule)}
.svc__row{
  position:relative;display:grid;grid-template-columns:4.5rem minmax(0,1fr) minmax(0,1.15fr) 2.5rem;
  gap:clamp(12px,2.5vw,32px);align-items:center;
  padding:clamp(20px,3vw,34px) clamp(12px,2vw,24px);
  border-bottom:1px solid var(--rule);text-decoration:none;color:inherit;isolation:isolate;
}
.svc__row::before{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.8,.2,1);z-index:-1}
.svc__row:hover::before,.svc__row:focus-visible::before{transform:scaleX(1)}
.svc__row>*{transition:color .3s ease .05s}
.svc__row:hover .svc__i,.svc__row:hover h3,.svc__row:hover .svc__d,.svc__row:hover .svc__a{color:var(--paper)}
.svc__i{font-family:var(--label);font-weight:600;font-variant-numeric:tabular-nums;font-size:.75rem;letter-spacing:.1em;color:var(--muted);font-variant-numeric:tabular-nums}
.svc__d{color:var(--ink-2);font-size:.95rem;line-height:1.5}
.svc__a{font-family:var(--label);font-weight:600;font-variant-numeric:tabular-nums;font-size:1rem;text-align:right;color:var(--muted);transition:transform .3s ease,color .3s ease}
.svc__row:hover .svc__a{transform:translateX(5px)}
@media (max-width:860px){
  .svc__row{grid-template-columns:3rem minmax(0,1fr);row-gap:.5rem}
  .svc__d{grid-column:2}
  .svc__a{display:none}
}

/* ---------- cases ---------- */
@media (max-width:960px){.cases{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.cases{grid-template-columns:1fr}}

/* ---------- clips (TikTok-Slots) ---------- */
.clips{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,36px);max-width:none}
@media (min-width:721px) and (max-width:1100px){
  .clips{grid-template-columns:repeat(2,1fr);row-gap:clamp(36px,5vw,56px)}
}
/* Bildunterschriften reservieren zwei Zeilen, auch leer – sonst stehen die Meta-Zeilen
   von Karten mit und ohne Beschriftung auf unterschiedlicher Höhe. */
.clip__cap{min-height:2.9em}
/* Ohne TikTok-ID ist der Schirm kein Knopf und soll auch nicht so aussehen. */
.handy div.clip__frame{cursor:default}
@media (max-width:720px){
  .clips{
    display:flex;max-width:none;overflow-x:auto;scroll-snap-type:x mandatory;
    margin-inline:calc(var(--pad-x) * -1);padding-inline:var(--pad-x);
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .clips::-webkit-scrollbar{display:none}
  .clip{flex:0 0 72%;scroll-snap-align:center}
}
.clip{display:flex;flex-direction:column;gap:.85rem;min-width:0}
.clip__frame{
  position:relative;display:block;width:100%;aspect-ratio:9/16;overflow:hidden;
  appearance:none;padding:0;font:inherit;color:inherit;cursor:pointer;
  background:var(--paper-2);border:1px solid var(--rule);
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.clip__frame:hover{transform:translateY(-6px)}
.clip__frame canvas{display:block;width:100%;height:100%}
.clip__ui{
  position:absolute;inset:0;pointer-events:none;
  display:flex;flex-direction:column;justify-content:space-between;padding:12px;
  color:#fff;
  background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 26%,rgba(0,0,0,0) 66%,rgba(0,0,0,.55) 100%);
  font-family:var(--label);font-weight:600;font-variant-numeric:tabular-nums;font-size:.6rem;letter-spacing:.04em;
  transition:opacity .3s ease;
}
.clip__ui div{display:flex;justify-content:space-between;gap:.6rem}
.clip__play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:60px;height:60px;border-radius:50%;background:var(--paper);color:var(--ink);
  display:grid;place-items:center;font-size:.95rem;pointer-events:none;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s ease;
}
.clip__frame:hover .clip__play{transform:translate(-50%,-50%) scale(1.14)}
.clip__note{
  position:absolute;inset:0;display:none;place-items:center;padding:1.4rem;
  background:var(--ink);color:var(--on-slab);text-align:center;
  font-family:var(--label);font-weight:600;font-variant-numeric:tabular-nums;font-size:.62rem;letter-spacing:.04em;line-height:2;
}
.clip__frame.is-open .clip__note{display:grid}
.clip__frame.is-open .clip__ui,.clip__frame.is-open .clip__play{opacity:0}
.clip__cap{color:var(--ink-2);font-size:.9rem;line-height:1.45}
.clip__meta{display:flex;justify-content:space-between;gap:.6rem;color:var(--muted);border-top:1px solid var(--rule);padding-top:.55rem}

/* ---------- process ---------- */
.proc{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border-block:1px solid var(--rule)}
@media (max-width:900px){.proc{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.proc{grid-template-columns:1fr}}
.step{background:var(--paper);padding:clamp(22px,3vw,34px);display:flex;flex-direction:column;gap:.85rem;min-height:230px}
.step__n{font-family:var(--label);font-weight:600;font-variant-numeric:tabular-nums;font-size:.72rem;letter-spacing:.18em;color:var(--muted)}
.step h3{font-size:1.28rem}
.step p{color:var(--ink-2);font-size:.93rem;line-height:1.55}
.step__t{margin-top:auto;font-family:var(--label);font-weight:600;font-variant-numeric:tabular-nums;font-size:.68rem;letter-spacing:.04em;color:var(--ink);border-top:1px solid var(--rule);padding-top:.8rem}

/* ---------- team ---------- */
/* Nur noch der Gründer: eine Karte, in der Breite begrenzt. Über vier Spalten
   verteilt stünde sie verloren links in der Zeile. */
.team{display:grid;grid-template-columns:minmax(0,360px);gap:clamp(14px,2vw,24px)}
/* Rundung nur am Porträt, nicht auf .plate allgemein: Dieselbe Klasse trägt auch das
   Showreel und die Clips in den Telefonrahmen – dort säße die Rundung doppelt bzw. im
   Gehäuse falsch. Maß wie bei den Filmrahmen, damit die Seite ein Radienmaß behält.
   overflow:hidden steht schon auf .plate, das Bild beschneidet sich also mit. */
.member .plate{aspect-ratio:3/4;filter:grayscale(1);border-radius:clamp(10px,1vw,16px)}
.member h3{font-size:1.1rem;margin-top:.9rem}
.member p{font-family:var(--label);font-weight:600;font-variant-numeric:tabular-nums;font-size:.66rem;letter-spacing:.04em;color:var(--muted);margin-top:.3rem}

/* ---------- quotes ---------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media (max-width:900px){.quotes{grid-template-columns:1fr}}
.quote{background:var(--paper);padding:clamp(22px,3vw,34px);display:flex;flex-direction:column;gap:1.1rem}
.quote blockquote{margin:0;font-family:var(--display);font-weight:600;font-size:clamp(1.05rem,1.5vw,1.28rem);line-height:1.35;letter-spacing:-.015em}
.quote footer{margin-top:auto;font-family:var(--label);font-weight:600;font-variant-numeric:tabular-nums;font-size:.66rem;letter-spacing:.04em;color:var(--muted)}

/* ---------- contact ---------- */
.contact__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,6vw,84px);align-items:start}
@media (max-width:900px){.contact__grid{grid-template-columns:minmax(0,1fr)}}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem 1.2rem}
.field{display:flex;flex-direction:column;gap:.45rem;min-width:0}
.field.full{grid-column:1/-1}
.field label{font-family:var(--label);font-weight:600;font-variant-numeric:tabular-nums;font-size:.65rem;letter-spacing:.04em;color:#8B8B90}
.field input,.field textarea{
  font-family:var(--body);width:100%;min-width:0;font-size:1rem;color:var(--on-slab);
  background:transparent;border:0;border-bottom:1px solid #34343A;padding:.55rem 0;
  transition:border-color .25s ease;
}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--paper)}
.field textarea{resize:vertical;min-height:76px}
.form__note.full{grid-column:1/-1}
.form__foot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:1rem;justify-content:space-between}
.form__note{font-family:var(--label);font-weight:600;font-variant-numeric:tabular-nums;font-size:.62rem;letter-spacing:.04em;color:#8B8B90;max-width:34ch}
.contact__list{display:flex;flex-direction:column;gap:1px;background:#2A2A2E;border:1px solid #2A2A2E;margin-top:2rem}
.contact__item{background:var(--ink);padding:1rem 1.2rem;display:flex;justify-content:space-between;gap:1rem;font-family:var(--label);font-weight:600;font-variant-numeric:tabular-nums;font-size:.72rem;letter-spacing:.04em;}
.contact__item b{font-weight:500;color:#8B8B90}

/* ---------- Wortmarke: Breitenachse folgt dem Cursor ---------- */
.ltr{display:inline-block;will-change:font-variation-settings}

/* ---------- Laufband wird von JS getrieben, sobald es übernimmt ---------- */
.band.is-js .marquee{animation:none}

/* ---------- Fallblatt-Zähler ---------- */
.flap{display:inline-block;position:relative;min-width:.62em;text-align:center}
.flap::after{
  content:"";position:absolute;left:0;right:0;top:50%;height:1px;
  background:var(--paper);opacity:.9;pointer-events:none;
}
.flap--sep{min-width:.26em}
.flap--sep::after{display:none}
.flap.is-flipping{opacity:.62}

/* ---------- Scrub-Leiste auf der Showreel-Fläche ---------- */
/* Herkunftsangabe unten rechts auf dem Showreel. Sitzt über der Scrub-Leiste
   und blendet per difference, damit sie auf hellem wie dunklem Bild liest. */
.plate__quelle{
  position:absolute;right:clamp(12px,1.6vw,20px);bottom:clamp(14px,1.8vw,22px);
  pointer-events:none;mix-blend-mode:difference;color:#fff;
  font-family:var(--label);font-weight:600;font-variant-numeric:tabular-nums;
  font-size:.66rem;letter-spacing:.04em;
}
.plate__scrub{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.22);opacity:.6;transition:opacity .25s ease}
.plate__scrub i{display:block;height:100%;width:0;background:#fff}
.reel:hover .plate__scrub{opacity:1}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:var(--on-slab);padding-block:clamp(40px,5vw,64px) clamp(24px,3vw,32px);overflow:hidden}
.foot__word{
  font-family:var(--display);font-weight:900;font-variation-settings:'wdth' 122;
  font-size:clamp(3rem,15vw,12rem);line-height:.8;letter-spacing:-.05em;text-transform:uppercase;
  margin:0 0 clamp(24px,4vw,44px);color:var(--on-slab);
}
.foot__rows{display:flex;flex-wrap:wrap;gap:1rem 2.5rem;justify-content:space-between;border-top:1px solid #2A2A2E;padding-top:1.4rem}
.foot__rows a,.foot__rows span{font-family:var(--label);font-weight:600;font-variant-numeric:tabular-nums;font-size:.68rem;letter-spacing:.04em;color:#8B8B90;text-decoration:none}
.foot__rows a:hover{color:var(--on-slab)}

/* ---------- Formular: Blazor-Validierung ----------
   Bewusst ohne Signalfarbe: Fehler zeigen sich über Gewicht, Rahmen und ein
   vorangestelltes Zeichen. Damit bleibt das monochrome Konzept intakt und die
   Meldung hängt nicht allein an der Farbe. */
.field input.invalid,
.field textarea.invalid{border-bottom-color:var(--paper);border-bottom-width:2px}
.field .validation-message{
  font-family:var(--label);font-weight:600;font-variant-numeric:tabular-nums;
  font-size:.68rem;letter-spacing:.04em;color:var(--on-slab);
}
.field .validation-message::before{content:"! ";}
.validation-errors{list-style:none;margin:0;padding:0}

/* Honeypot: für Menschen unsichtbar, für Bots verlockend. */
.honigtopf{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Bestätigung nach dem Absenden */
.danke{
  display:flex;flex-direction:column;align-items:flex-start;gap:1rem;
  border:1px solid #2A2A2E;padding:clamp(24px,4vw,40px);
}
.danke__titel{
  font-family:var(--display);font-weight:800;letter-spacing:-.025em;
  font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.05;color:var(--on-slab);
}
.danke__text{color:#B4B4B9;max-width:40ch;line-height:1.55}

/* ---------- Rechtstexte ---------- */
.rechtstext{max-width:68ch}
.rechtstext h1,.rechtstext h2{margin-bottom:1.5rem}
.rechtstext h3{
  font-size:1.05rem;font-weight:700;margin-top:2rem;margin-bottom:.5rem;
  letter-spacing:-.01em;
}
.rechtstext p{color:var(--ink-2);margin-bottom:.9rem;line-height:1.65}
.rechtstext a{color:var(--ink);text-underline-offset:3px}
.rechtstext .hinweis{
  border-left:2px solid var(--ink);padding:.9rem 0 .9rem 1.1rem;
  color:var(--ink);background:var(--surface);margin-bottom:2rem;
}

/* ---------- Schriftverlauf ----------
   Der Zug läuft von voller Deckung ins Hintergrundtonwert aus, wie auf der
   alten Seite. Die Basisfarbe steht außerhalb von @supports, damit der Text
   auch dann lesbar bleibt, wenn background-clip nicht greift.

   Die Endfarben sind nicht beliebig gewählt: Sie halten noch rund 3:1 gegen
   ihren Untergrund, also die Schwelle für große Schrift. Weiter auslaufen
   lassen würde hübscher aussehen und den Markennamen unlesbar machen. */
.verlauf{color:var(--ink)}
.verlauf--hell{color:var(--on-slab)}

@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .verlauf{
    background-image:linear-gradient(100deg,
      var(--ink) 0%, var(--ink) 42%, #8A8884 88%, #8A8884 100%);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
  }
  .verlauf--hell{
    background-image:linear-gradient(100deg,
      var(--on-slab) 0%, var(--on-slab) 38%, #5C5C62 86%, #5C5C62 100%);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
  }
}

/* ---------- Kreisgalerie ----------
   Die Stücke liegen auf einer Kuppel: Der Abstand zur Mitte bestimmt Höhe,
   Neigung und Deckkraft. Die Positionen setzt site.js pro Bild, hier steht
   nur die Bühne. Ecken bleiben scharf – gerundete Medien gibt es sonst
   nirgends auf der Seite. */
.galerie{
  position:relative;overflow:hidden;
  height:clamp(380px,56vh,540px);
  margin-top:clamp(22px,3.2vw,38px);
  touch-action:pan-y;cursor:grab;
  user-select:none;-webkit-user-select:none;
}
.galerie.zieht{cursor:grabbing}
.galerie:focus-visible{outline:2px solid var(--ink);outline-offset:-3px}

.galerie__stueck{
  position:absolute;top:50%;left:50%;margin:0;
  width:clamp(168px,19vw,248px);
  will-change:transform,opacity;
}
.galerie__stueck img{
  display:block;width:100%;aspect-ratio:4/5;object-fit:cover;
  background:var(--paper-2);border:1px solid var(--rule);
  -webkit-user-drag:none;
}
.galerie__stueck figcaption{
  margin-top:.75rem;text-align:center;
  font-family:var(--label);font-weight:600;font-variant-numeric:tabular-nums;
  font-size:.7rem;letter-spacing:.04em;color:var(--ink-2);
}
.galerie__fussnote{
  max-width:var(--maxw);margin:clamp(14px,2vw,22px) auto 0;padding-inline:var(--pad-x);
  font-family:var(--label);font-weight:600;font-size:.68rem;letter-spacing:.04em;color:var(--muted);
}

/* ---------- Telefonrahmen ----------
   Selbst gebaut statt eingekauft: Das Vorbild bei React Bits ist ein
   kostenpflichtiges React-Bauteil. Ein Gehäuse ist ein Rechteck mit
   Radius, zwei Tasten und einer Insel – dafür lohnt kein Framework.
   Der Schirm ist zugleich die TikTok-Fassade, deshalb ein <button>. */
.handy{
  position:relative;width:100%;max-width:272px;margin-inline:auto;
  aspect-ratio:9/19;padding:9px;
  background:var(--ink);border-radius:38px;
  box-shadow:0 0 0 1px var(--rule), 0 22px 44px rgba(12,12,13,.16);
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
  transform-style:preserve-3d;
}
.handy__taste{position:absolute;left:-2px;width:2px;background:var(--ink);border-radius:2px}
.handy__taste--laut{top:22%;height:9%}
.handy__taste--ein{left:auto;right:-2px;top:30%;height:12%}

/* Der Schirm überschreibt die Kachel-Maße von .clip__frame */
.handy .clip__frame{
  aspect-ratio:auto;height:100%;border:0;border-radius:29px;
  overflow:hidden;background:var(--ink);
}
.handy .clip__frame:hover{transform:none}

.handy__insel{
  position:absolute;top:10px;left:50%;transform:translateX(-50%);
  width:34%;height:17px;border-radius:999px;background:var(--ink);
  pointer-events:none;z-index:3;
}
/* Die Einblendungen im Schirm rücken unter die Insel */
.handy .clip__ui{padding:34px 14px 16px}

/* ---------- Wortmarke als SVG (Konturschrift) ----------
   Die viewBox trägt die Größe, deshalb hier keine font-size in rem: Die
   Marke füllt immer die Spaltenbreite und bleibt auf einer Zeile. */
/* Höhe gedeckelt: Auf einem flachen Schirm (etwa 1280×720) wäre die Wortmarke über
   die Breite allein rund 180 px hoch und ließe dem Video kaum Platz. Mit dem Deckel
   skaliert sie über preserveAspectRatio herunter und bleibt links bündig. */
.wortmarke{display:block;width:100%;height:auto;max-height:clamp(52px,15svh,200px);overflow:visible}
.wortmarke text{
  font-family:var(--display);
  font-size:120px;
  text-transform:uppercase;
  letter-spacing:-.045em;
}
.wortmarke__fett{font-weight:900;font-variation-settings:'wdth' 118}
.wortmarke__leicht{font-weight:400;font-variation-settings:'wdth' 96;letter-spacing:-.02em}

/* Konturschrift. Sobald site.js die Glyphen gesetzt hat, tritt die Vorlage
   zurück – sie bleibt im Baum, weil die viewBox an ihrer Messung hängt. */
.wortmarke--kontur .wm-quelle{visibility:hidden}

/* Die Buchstaben zeichnen sich als Kontur und füllen sich danach mit demselben
   Verlauf wie die Wortmarke im Fuß (20.09.2026 auf Wunsch). Die Füllung startet
   unsichtbar, die Kontur sichtbar; site.js dreht beides um, sobald gezeichnet ist.
   Die Kontur verschwindet dabei, sonst stünde der Zug doppelt – einmal als Füllung,
   einmal als Rand – und die Schrift liefe fetter als im Fuß. */
.wm-glyphe{
  fill:url(#wortverlauf);fill-opacity:0;
  stroke:url(#wortverlauf);stroke-opacity:1;
  stroke-linejoin:round;stroke-linecap:round;
}

/* Ohne Bewegungswunsch zeichnet site.js nicht – dann muss die Füllung sofort da sein. */
@media (prefers-reduced-motion: reduce){
  .wm-glyphe{fill-opacity:1;stroke-opacity:0}
}
.wm-glyphe.wortmarke__fett{stroke-width:2.1}
.wm-glyphe.wortmarke__leicht{stroke-width:1.5}

/* ---------- Handys in der Kreisgalerie ----------
   Dieselbe Bauart wie im Clips-Bereich, verkleinert. Die Breite ist so gewählt, dass ein
   Handy exakt so hoch ist wie ein Standbild: Standbild 4:5 bei Breite b, Handy 9:19 bei
   0,592 × b. Größer ragt es in der Kuppel unten aus der Bühne und wird samt Beschriftung
   abgeschnitten – bei 176 px fehlten am Rand bis zu 65 px. Kein Kippen unter dem Zeiger,
   die Kuppel dreht die Stücke schon. */
.galerie__stueck--handy{width:clamp(99px,11.25vw,147px)}
.galerie__stueck--handy .handy{
  max-width:none;padding:5px;border-radius:21px;
  box-shadow:0 0 0 1px var(--rule), 0 12px 24px rgba(12,12,13,.14);
}
.galerie__stueck--handy .handy .clip__frame{border-radius:16px}
.galerie__stueck--handy .handy__insel{top:5px;height:9px;width:32%}
.galerie .handy div.clip__frame{cursor:inherit}

/* ---------- Video im Hero ----------
   Steht seit 17.09.2026 anstelle der Kreisgalerie: ein Rechteck im Kinoformat
   mit runden Ecken – dieselbe Rundung wie die Telefone im Clips-Bereich, damit
   die Seite eine Formensprache behält.

   Die Breite folgt der Textspalte (dieselben 1240 px wie .wrap, abzüglich der
   Seitenränder). Auf einem 900 px hohen Bildschirm reicht das Video damit unter
   die Kante – gewollt: Der angeschnittene Rand zeigt, dass es weitergeht.
   Schwarzer Grund darunter, damit vor dem ersten Bild keine helle Fläche
   aufblitzt; der Ring greift die Linienfarbe der Seite auf. */
.herovideo{
  /* Drei Grenzen, die kleinste gewinnt: die Textspalte, die Fensterbreite und die
     Höhe, die nach Wortmarke, Text, Knöpfen und Bildunterschrift übrig bleibt.
     --hero-rest misst site.js; der Ersatzwert gilt, solange kein Skript läuft. */
  width:min(1180px, 92vw, calc((100svh - var(--hero-rest,540px)) * 16 / 9));
  min-width:min(260px,92vw);
  aspect-ratio:16/9;
  margin:clamp(18px,2.4vw,28px) auto 0;
  border-radius:clamp(16px,1.8vw,26px);overflow:hidden;position:relative;
  background:var(--ink);
  box-shadow:0 0 0 1px var(--rule), 0 24px 56px rgba(12,12,13,.18);
}
.herovideo__bild{display:block;width:100%;height:100%;object-fit:cover}

/* Bildunterschrift zum Video: Name kräftig, Rolle leise – dieselbe Staffelung wie
   bei den Zahlen und im Team-Bereich. Die Gruppe trägt keinen eigenen Abstand nach
   oben, den bringt der Rahmen schon mit. */
/* Bleibt Platz übrig, verteilt er sich gleichmäßig um das Video – das sieht
   ruhiger aus, als es an eine Kante zu drücken. */
.herovideo__block{margin:0;display:flex;flex-direction:column;justify-content:center;flex:1 1 auto;min-height:0}
.herovideo__name{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;
  gap:.35rem .7rem;margin-top:clamp(6px,1svh,16px);text-align:center;
  font-family:var(--label);letter-spacing:.04em;
}
.herovideo__name b{font-weight:700;font-size:.82rem;color:var(--ink)}
.herovideo__name span{font-weight:600;font-size:.66rem;color:var(--muted)}

/* Die Fassade ist der Knopf: Der ganze Rahmen ist anklickbar, deshalb keine
   eigene Fläche, nur die Knopf-Eigenschaften zurückgesetzt. */
.herovideo__fassade{
  position:absolute;inset:0;display:block;width:100%;height:100%;
  padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;
}
.herovideo__play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:clamp(58px,6vw,78px);aspect-ratio:1;border-radius:50%;
  background:var(--paper);color:var(--ink);
  display:grid;place-items:center;font-size:1.1rem;pointer-events:none;
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.herovideo__fassade:hover .herovideo__play{transform:translate(-50%,-50%) scale(1.12)}
.herovideo__fassade:focus-visible{outline:2px solid var(--paper);outline-offset:-4px}
.herovideo__hinweis{
  position:absolute;left:50%;bottom:clamp(10px,1.4vw,18px);transform:translateX(-50%);
  padding:.42rem .8rem;border-radius:999px;pointer-events:none;white-space:nowrap;
  background:rgba(12,12,13,.72);color:var(--on-slab);
  font-family:var(--label);font-weight:600;font-size:.62rem;letter-spacing:.04em;
}

/* ---------- Terminseite ----------
   Liegt auf dem schwarzen Grund wie der Kontaktbereich – damit gelten die
   vorhandenen Formularstile (.form, .field, .danke) unverändert weiter; sie sind
   ausschließlich für helle Schrift auf dunklem Untergrund gebaut.

   Kalender und Zeiten sind schlichte Knopfraster: keine Bibliothek, keine
   Datumsauswahl des Browsers. Eine eigene Auswahl kann zeigen, was frei ist,
   und fällt nicht aus dem monochromen Satzbild. */
.termin__lede{color:#B4B4B9;margin-top:1.1rem;max-width:58ch}
/* Der Assistent: ein Schritt je Ansicht, gewechselt wird über Zurück und Weiter.
   Schmaler als die Textspalte – ein Kalender und eine Handvoll Uhrzeiten brauchen
   keine 1240 px, und mittig liest sich der Ablauf wie ein Formular, nicht wie eine
   Seite. */
.assistent{
  max-width:660px;margin-top:clamp(24px,3.4vw,44px);
  border:1px solid #2A2A2E;border-radius:clamp(14px,1.6vw,22px);
  padding:clamp(18px,3vw,34px);
}

/* Fortschritt: drei Balken mit Nummer und Namen. Erledigte und der aktuelle Schritt
   sind hell, die kommenden bleiben dunkel. */
.assistent__spur{display:flex;gap:.6rem;list-style:none;margin:0 0 clamp(18px,2.6vw,28px);padding:0}
.assistent__spur li{
  flex:1;display:flex;align-items:center;gap:.5rem;padding-top:.7rem;
  border-top:3px solid #2A2A2E;
  font-family:var(--label);font-weight:600;font-variant-numeric:tabular-nums;
  font-size:.7rem;letter-spacing:.04em;color:#8B8B90;
}
.assistent__spur li.ist-fertig,
.assistent__spur li[aria-current]{border-top-color:var(--paper);color:var(--on-slab)}
.assistent__nr{
  display:grid;place-items:center;width:1.45rem;height:1.45rem;flex:none;
  border:1px solid currentColor;border-radius:50%;font-size:.66rem;
}
.assistent__spur li[aria-current] .assistent__nr{background:var(--paper);color:var(--ink);border-color:var(--paper)}

.assistent__titel{font-size:clamp(1.3rem,3vw,1.8rem);margin:0}
.assistent__unter{color:#B4B4B9;margin:.5rem 0 0}
.assistent__blatt .kalender,
.assistent__blatt .zeiten,
.assistent__blatt .form,
.assistent__blatt .termin__gewaehlt{margin-top:clamp(14px,2vw,20px)}

/* Knopfzeile unten, die beiden Richtungen auseinandergehalten. */
.assistent__navi{
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  margin-top:clamp(18px,2.4vw,26px);padding-top:clamp(14px,1.8vw,20px);
  border-top:1px solid #2A2A2E;
}
.assistent__navi.full{grid-column:1/-1}
.btn--zurueck,[data-slab] .btn--zurueck{background:transparent;color:var(--on-slab);border-color:#3A3A40}
.btn--zurueck:hover,[data-slab] .btn--zurueck:hover{background:rgba(242,241,238,.08);color:var(--on-slab);border-color:var(--paper)}
.termin__marke{
  font-family:var(--label);font-weight:600;font-variant-numeric:tabular-nums;
  font-size:.65rem;letter-spacing:.04em;color:#8B8B90;margin:0 0 .9rem;
}
.termin__hinweis{color:#8B8B90;max-width:42ch;margin:0}
.termin__gewaehlt{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1rem;margin:0 0 1.4rem}
.termin__gewaehlt b{font-family:var(--label);font-weight:700;font-size:1.05rem}
.termin__gewaehlt span{font-family:var(--label);font-weight:600;font-size:.65rem;letter-spacing:.04em;color:#8B8B90}
.termin__fehler{border:1px solid #2A2A2E;padding:.85rem 1rem;margin:0 0 1.2rem;max-width:46ch}
.termin__danke{margin-top:clamp(24px,3vw,40px)}

.kalender{border:1px solid #2A2A2E;padding:clamp(12px,1.4vw,16px)}
.kalender__kopf{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.9rem}
.kalender__monat{font-family:var(--label);font-weight:700;font-size:.95rem}
.kalender__pfeil{
  width:34px;height:34px;flex:none;border:1px solid #2A2A2E;border-radius:50%;
  background:none;color:inherit;font:inherit;line-height:1;cursor:pointer;
  transition:border-color .2s,background .2s;
}
.kalender__pfeil:enabled:hover{border-color:var(--paper);background:rgba(242,241,238,.08)}
.kalender__pfeil:disabled{opacity:.3;cursor:default}
/* minmax(0,1fr), nicht 1fr: Sonst wird keine Spalte schmaler als ihr Knopf samt
   Browser-Innenabstand, und auf 320 px ragte die Sonntagsspalte 10 px aus dem Rahmen. */
.kalender__gitter{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.kalender__wochentag{
  font-family:var(--label);font-weight:600;font-size:.6rem;letter-spacing:.04em;
  color:#8B8B90;text-align:center;padding-bottom:.3rem;
}
.kalender__tag{
  aspect-ratio:1;display:grid;place-items:center;border:1px solid transparent;
  background:none;color:inherit;font:inherit;font-variant-numeric:tabular-nums;
  font-size:.9rem;cursor:pointer;transition:border-color .15s,background .15s;
  padding:0;min-width:0;
}
.kalender__tag:enabled:hover{border-color:var(--paper)}
.kalender__tag:disabled{color:#55555B;cursor:default}
.kalender__tag--aktiv,.kalender__tag--aktiv:enabled:hover{background:var(--paper);color:var(--ink)}
.kalender__fuss{
  font-family:var(--label);font-weight:600;font-size:.62rem;letter-spacing:.04em;
  color:#8B8B90;margin:.9rem 0 0;
}

.zeiten{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.zeit{
  padding:.62rem .5rem;border:1px solid #2A2A2E;background:none;color:inherit;
  font:inherit;font-size:.88rem;font-variant-numeric:tabular-nums;cursor:pointer;
  transition:border-color .15s,background .15s;
}
.zeit:hover{border-color:var(--paper)}
.zeit--aktiv,.zeit--aktiv:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}

@media (max-width:860px){
  .termin__gitter{grid-template-columns:1fr}
  .termin__schritt--breit{border-top:none;padding-top:0}
}

/* ---------- Wirkungsdiagramm ----------
   Die Linien unterscheiden sich über Helligkeit und Strichstärke, nicht über Farbe:
   Die Seite hat keine Akzentfarbe, und drei bunte Linien wären der erste Bruch.
   #55555B und #8A8884 halten rund 6:1 bzw. 3:1 gegen das Papier – letzteres ist die
   Schwelle für grafische Elemente, tiefer darf der dritte Ton nicht gehen.

   Die Tafel greift die Rundung des Hero-Videos auf; sonst stünde hier die einzige
   scharfkantige Fläche neben zwei runden. */
.tafel{
  border:1px solid var(--rule);border-radius:clamp(16px,1.8vw,26px);
  background:#F8F7F5;padding:clamp(18px,2.4vw,30px);
}
.tafel__kopf{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.7rem 1.2rem;margin-bottom:clamp(14px,2vw,22px);
}

/* Solange keine Logodateien vorliegen, steht der Kundenname als Wortmarke.
   Kommt ein Bild, tritt es an dieselbe Stelle und begrenzt sich in der Höhe. */
.tafel__logo{font-family:var(--display);font-weight:800;font-size:1.05rem;letter-spacing:-.02em}

/* Feste Höhe, damit der Kopf beim Wechsel zwischen Bildlogo und Wortmarke nicht
   springt. Kundenlogos bleiben in ihren eigenen Farben – eine fremde Marke
   umzufärben wäre übergriffig, und Bildmaterial darf auf dieser Seite Farbe haben. */
.tafel__logo-feld{display:flex;align-items:center;min-height:30px}
.tafel__logo-feld[hidden]{display:none}
.tafel__logo img{display:block;height:26px;width:auto}

.tafel__reiter{display:flex;flex-wrap:wrap;gap:.4rem}
.reiter{
  padding:.34rem .85rem;border:1px solid var(--rule);border-radius:999px;
  background:none;color:var(--muted);cursor:pointer;
  font-family:var(--label);font-weight:600;font-size:.64rem;letter-spacing:.04em;
  transition:border-color .2s,color .2s,background .2s;
}
.reiter:hover{border-color:var(--ink);color:var(--ink)}
.reiter--aktiv,.reiter--aktiv:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}

.blatt__fuss{
  display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:flex-end;justify-content:space-between;
  margin-top:clamp(14px,2vw,22px);border-top:1px solid var(--rule);
  padding-top:clamp(12px,1.8vw,18px);
}
.blatt__urteil{margin:0;max-width:54ch;color:var(--ink-2);line-height:1.5}
.blatt__zuwachs{text-align:right;flex:none}
.blatt__zuwachs .stat__n{font-size:clamp(1.7rem,3.2vw,2.4rem)}
.blatt__zuwachs .stat__l{margin-top:.25rem}

.kurven{display:block;width:100%;height:auto}
.kurven__hilfslinie{stroke:var(--rule);stroke-width:1}
.kurven__achslinie{stroke:#C9C7C2;stroke-width:1}
.kurven__achse{
  font-family:var(--label);font-weight:600;font-variant-numeric:tabular-nums;
  font-size:11px;fill:var(--muted);
}
.kurven__achse--leise{font-size:10px;letter-spacing:.04em;fill:#9A9893}
.kurven__linie{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kurven__linie--0{stroke:var(--ink);stroke-width:2.6}
.kurven__linie--1{stroke:#55555B}
.kurven__linie--2{stroke:#8A8884}
.kurven__punkt--0{fill:var(--ink)}
.kurven__punkt--1{fill:#55555B}
.kurven__punkt--2{fill:#8A8884}
.kurven__wert{font-family:var(--label);font-weight:700;font-variant-numeric:tabular-nums;font-size:13px}
.kurven__wert--0{fill:var(--ink)}
.kurven__wert--1{fill:#55555B}
.kurven__wert--2{fill:#8A8884}

/* Der Name der Linie, direkt am Ende der Kurve über dem Zuwachs. Leichter gesetzt als
   die Zahl darunter: Die Zahl ist die Aussage, der Name nur die Zuordnung. */
.kurven__marke{font-family:var(--label);font-weight:600;font-size:11px;letter-spacing:.04em}
.kurven__marke--0{fill:var(--ink)}
.kurven__marke--1{fill:#55555B}
.kurven__marke--2{fill:#8A8884}

/* Vor dem Zeichnen ausgeblendet – aber nur, wenn das Skript die Klasse setzt.
   Ohne JavaScript steht das fertige Diagramm einfach da. */
.kurven--bereit .kurven__punkt,
.kurven--bereit .kurven__marke,
.kurven--bereit .kurven__wert{opacity:0}
.kurven--gezeichnet .kurven__punkt,
.kurven--gezeichnet .kurven__marke,
.kurven--gezeichnet .kurven__wert{opacity:1;transition:opacity .5s ease 1.3s}

/* Nur auf dem Telefon sichtbar (siehe unten) – darüber stehen die Namen am Linienende.
   Ein zweites display:flex in dieser Regel hatte das display:none überstimmt, und auf
   dem Rechner stand jeder Name doppelt da. */
.kurven__legende{display:none;
  list-style:none;flex-wrap:wrap;flex-wrap:wrap;gap:.55rem 1.5rem;margin:1.1rem 0 0;padding:0;
  font-family:var(--label);font-weight:600;font-variant-numeric:tabular-nums;
  font-size:.68rem;letter-spacing:.04em;color:var(--ink-2);
}
.kurven__legende li{display:flex;align-items:center;gap:.5rem}
.kurven__strich{width:22px;border-top:2px solid;flex:none}
.kurven__strich--0{border-color:var(--ink);border-top-width:3px}
.kurven__strich--1{border-color:#55555B}
.kurven__strich--2{border-color:#8A8884}

.wirkung__lede{margin-top:1rem}
.wirkung .tafel{margin-top:clamp(24px,3.2vw,42px)}
.wirkung__fussnote{
  font-family:var(--label);font-weight:600;font-size:.62rem;letter-spacing:.04em;
  color:var(--muted);margin:clamp(18px,2.4vw,28px) 0 0;
}
@media (max-width:700px){
  .blatt__fuss{flex-direction:column;align-items:flex-start}
  .blatt__zuwachs{text-align:left}

  /* Das SVG skaliert mit der Spalte: Auf dem Telefon schrumpft es auf knapp die
     halbe Größe, und 11 Einheiten Schrift wären dann 5 px. Schrift und Striche
     werden hier in Zeicheneinheiten größer gesetzt, damit sie am Ende wieder bei
     rund 11 px landen – gleiche Lesbarkeit, ohne zweites Diagramm. */
  /* Namen am Linienende weg, dafür die Legende darunter – nebeneinander wird es
     auf 297 px Zeichenbreite unleserlich oder läuft über den Rand. */
  .kurven__marke{display:none}
  .kurven__legende{
    display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;margin:.9rem 0 0;padding:0;list-style:none;
    font-family:var(--label);font-weight:600;font-size:.8rem;letter-spacing:.04em;color:var(--ink-2);
  }
  .kurven__legende b{font-weight:700;color:var(--ink)}
  .kurven__achse{font-size:24px}
  .kurven__achse--leise{font-size:21px}
  .kurven__wert{font-size:26px}
  .kurven__linie{stroke-width:3.4}
  .kurven__linie--0{stroke-width:4.4}
  .kurven__punkt{r:6}
}



/* ---------- Filme im Querformat ----------
   Drei nebeneinander, gleiche Rundung wie das Hero-Video, nur kleiner. Der Rahmen
   ist zugleich der Knopf der Zwei-Klick-Fassade; beim Austausch übernimmt site.js
   seine Klassen (siehe .is-open), damit das Iframe Maße und Rundung behält. */
.filme{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.2vw,32px)}

/* Der erste Film läuft über beide Spalten: drei gleich große Kästchen lesen sich als
   Liste, einer vorneweg als Auswahl. Wer alle gleich groß will, löscht diese Regel.

   Der Zusatz :nth-last-child(n+3) heißt „nur ab drei Filmen“. Bei zweien stünde sonst
   einer breit oben und der zweite allein in der linken Spalte – rechts ein Loch halb so
   breit wie die Seite. Genau das war am 19.09.2026 der Fall, als Moss herausgenommen
   wurde. So regelt sich die Aufteilung über die Zahl der Einträge in InhaltService.Filme
   von selbst: zwei nebeneinander, ab drei wieder einer vorneweg. */
.filme .film:first-child:nth-last-child(n+3){grid-column:1/-1}
.film{margin:0;display:flex;flex-direction:column;gap:.7rem}
.film__rahmen{
  position:relative;display:block;width:100%;aspect-ratio:16/9;
  padding:0;border:0;border-radius:clamp(10px,1vw,16px);overflow:hidden;
  background:var(--ink);cursor:pointer;
  box-shadow:0 0 0 1px var(--rule), 0 10px 24px rgba(12,12,13,.10);
}
.film__bild{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.film__rahmen:hover .film__bild{transform:scale(1.03)}
.film__rahmen:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
/* Dieselbe Schwelle wie oben: Die größere Rundung, der größere Knopf und die größere
   Überschrift gehören zum breiten ersten Film. Ohne die Schwelle bekäme bei zwei Filmen
   der linke halbbreite Kasten die Maße des breiten – sichtbar ungleiche Geschwister. */
.filme .film:first-child:nth-last-child(n+3) .film__rahmen{border-radius:clamp(14px,1.4vw,22px)}
.filme .film:first-child:nth-last-child(n+3) .film__play{width:clamp(56px,4.6vw,72px);font-size:1rem}
.filme .film:first-child:nth-last-child(n+3) .film__text b{font-size:clamp(1.15rem,1.9vw,1.45rem)}

.film__play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:clamp(40px,3.4vw,52px);aspect-ratio:1;border-radius:50%;
  background:var(--paper);color:var(--ink);
  display:grid;place-items:center;font-size:.8rem;pointer-events:none;
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.film__rahmen:hover .film__play{transform:translate(-50%,-50%) scale(1.12)}
.film__text{display:flex;flex-direction:column;gap:.2rem;font-family:var(--label);letter-spacing:.04em}
.film__text b{font-family:var(--display);font-weight:800;font-size:clamp(1rem,1.5vw,1.2rem);letter-spacing:-.02em;color:var(--ink)}
.film__text span{font-weight:600;font-size:.66rem;color:var(--muted)}
.filme__hinweis{
  font-family:var(--label);font-weight:600;font-size:.62rem;letter-spacing:.04em;
  color:var(--muted);margin:.9rem 0 0;
}

@media (max-width:820px){
  .filme{grid-template-columns:1fr}
}

/* ---------- Typische Fragen ----------
   Hairline-Liste im Stil der Leistungen: Trennlinien statt Kästen, damit der Abschnitt
   ruhig bleibt. Der Marker wird dreifach abgeräumt – list-style für Firefox, der
   -webkit-Pseudoselektor für ältere Safari/Chrome, ::marker für die aktuellen. Fehlt
   einer, steht je nach Browser ein Dreieck neben der Frage. */
.fragen{margin-top:clamp(32px,5vw,56px);border-top:1px solid var(--rule)}
.frage{border-bottom:1px solid var(--rule)}
.frage summary{
  display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;
  padding:clamp(14px,1.8vw,20px) 0;cursor:pointer;list-style:none;
  font-family:var(--display);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(1rem,1.5vw,1.2rem);color:var(--ink);
}
.frage summary::-webkit-details-marker{display:none}
.frage summary::marker{content:""}
/* Das Zeichen rechts ist reine Dekoration – der Zustand steht schon im <details>. */
.frage summary::after{
  content:"+";flex:none;color:var(--muted);
  font-family:var(--label);font-weight:600;font-size:1.15rem;line-height:1;
}
.frage[open] summary::after{content:"\2013"}
.frage summary:hover::after{color:var(--ink)}
.frage summary:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.frage p{
  max-width:60ch;margin:0;padding-bottom:clamp(14px,1.8vw,20px);
  font-size:1rem;color:var(--ink-2);line-height:1.6;
}

/* ---------- Telefon und Tablet: Lesbarkeit und Tippziele ----------
   Die Beschriftungen der Seite sind bewusst klein – auf dem Telefon landeten sie
   aber bei 10 px, und das liest niemand mehr. Alles, was hier steht, hebt nur den
   Boden an; die Staffelung untereinander bleibt gleich. **Nichts unter 12,8 px.**

   Seit 28.09.2026 gilt der Boden bis 1024 px, nicht nur bis 700: Dazwischen liegt
   jedes Tablet, hochkant wie quer, und dort fielen die Beschriftungen auf die
   Rechnergröße zurück – 9,9 bis 11,5 px auf einem Gerät, das man in der Hand hält.
   Über 1024 px bleibt das Satzbild, wie es entworfen ist.

   Dazu die Tippziele: Ein Verweis von 17 px Höhe ist mit dem Finger nicht sicher zu
   treffen. Die Regeln geben ihnen Höhe, ohne das Satzbild zu ändern. */
@media (max-width:1024px){
  .eyebrow{font-size:.8rem}
  .nav__links a{font-size:.8rem}
  .nav .btn{font-size:.8rem}
  .btn{font-size:.82rem}
  .stat__l{font-size:.8rem}
  .svc__i{font-size:.8rem}
  .contact__item{font-size:.8rem}
  .form__note{font-size:.8rem}
  .field label{font-size:.8rem}

  .herovideo__hinweis{font-size:.8rem;padding:.45rem .9rem}
  .herovideo__name b{font-size:.92rem}
  .herovideo__name span{font-size:.8rem}

  .film__text b{font-size:1.02rem}
  .film__text span{font-size:.8rem}
  .filme__hinweis{font-size:.8rem}
  .wirkung__fussnote{font-size:.8rem}
  .kurven__legende{font-size:.8rem}
  .blatt__urteil{font-size:.95rem}
  .clip__meta,.clip__meta span,.clip__format{font-size:.8rem}
  .plate__quelle{font-size:.8rem}
  .member p{font-size:.85rem}
  .label{font-size:.8rem}

  /* Terminseite: Schrittmarken, Kalenderfuß und der Hinweis im Seitenfuß lagen bei
     10 px. Sie bleiben die leisesten Texte der Seite, nur eben lesbar. */
  .termin__marke{font-size:.8rem}
  .kalender__fuss{font-size:.8rem}
  .kalender__wochentag{font-size:.8rem}
  .assistent__spur li{font-size:.8rem}
  .assistent__nr{font-size:.8rem;width:1.6rem;height:1.6rem}
  .termin__gewaehlt span{font-size:.8rem}

  .foot__rows a,.foot__rows span{font-size:.8rem}

  /* Tippziele: mindestens 44 px, die Empfehlung von Apple und Google. Die Fußverweise
     lagen vorher bei 39 px – knapp, aber mit dem Daumen oft daneben. */
  .brand{min-height:44px;align-items:center}
  .foot__rows a{display:inline-flex;align-items:center;min-height:44px}
  .btn{min-height:46px}
  .zeit{min-height:46px}
}

/* Nur Telefon: Anordnung, nicht Größe. */
@media (max-width:700px){
  /* Die Quellenangabe im Showreel arbeitet sonst mit mix-blend-mode. Auf dem Telefon
     liegt sie klein über einer hellen, unruhigen Stelle des Bildes und verschwindet
     darin – deshalb hier dieselbe dunkle Pille wie beim Hinweis im Hero. */
  .plate__quelle{
    mix-blend-mode:normal;color:var(--on-slab);
    background:rgba(12,12,13,.72);padding:.3rem .65rem;border-radius:999px;
  }

  /* Formular untereinander: Zwei Spalten sind auf 335 px Breite zwei halbe Felder,
     in die niemand gern eine E-Mail-Adresse tippt. */
  .form{grid-template-columns:minmax(0,1fr);gap:1.1rem}
  .form__foot{gap:.8rem}
  .form__foot .btn{width:100%;justify-content:center}

  .foot__rows{gap:0 1.6rem}

  .assistent{padding:16px 14px;border-radius:16px}
  .assistent__spur li{gap:.35rem}
  .assistent__spur li span:last-child{display:none}
  .assistent__navi{flex-wrap:wrap}
  .assistent__navi .btn{flex:1 1 44%;justify-content:center}
}
/* ---------- Consulting und Coaching ----------
   Zwei Telefone statt vier, deshalb ein eigenes Raster statt .clips: Dort stehen vier
   Spalten, zwei Karten darin waeren halb so breit wie noetig und liessen die Haelfte
   der Zeile leer. Hier zwei Spalten mit einem Deckel, damit die Rahmen auf einem
   breiten Schirm nicht ins Riesige laufen; minmax(0,...) wie ueberall, sonst schiebt
   der Inhalt die Spalte auf. Unter 720 px untereinander - zwei Karten brauchen keine
   Wischleiste.

   Mittig seit 30.09.2026: Bis dahin stand hier justify-content:start, und die zwei
   Telefone klebten links in einer Seite, die seit dem 25.09. durchgehend mittig
   gesetzt ist. Wegen des Deckels von 300 px je Spalte fuellt das Raster die Zeile nie
   aus - wohin der Rest faellt, entscheidet allein diese Zeile. */
.beratung{
  display:grid;grid-template-columns:repeat(2,minmax(0,300px));
  gap:clamp(20px,3vw,44px);justify-content:center;
}
@media (max-width:720px){
  .beratung{grid-template-columns:minmax(0,300px)}
}
.beratung__hinweis{
  font-family:var(--label);font-weight:600;font-size:.62rem;letter-spacing:.04em;
  color:var(--muted);margin:clamp(14px,2vw,20px) 0 0;
}
/* Steht nach dem Lesbarkeitsblock oben und muss ihn deshalb selbst wiederholen. */
@media (max-width:1024px){.beratung__hinweis{font-size:.8rem}}

/* ---------- Zentrierte Anordnung ----------
   Seit 25.09.2026 auf Wunsch: Alles, was schmaler ist als die Spalte, steht mittig –
   links und rechts derselbe Abstand. Die Spalten selbst (.wrap) waren schon immer
   mittig; schief wirkten die Blöcke darin, die links klebten und rechts bis zu 790 px
   Leere ließen: Vorspann, Knöpfe im Hero, die einzelne Teamkarte, die Fragenliste.

   Bewusst NICHT zentriert: Fließtext in Listen, Karten und Formularen. Zentrierte
   Zeilen über mehrere Sätze liest niemand gern – dort bleibt der Text linksbündig,
   nur der Kasten drumherum sitzt symmetrisch.

   Wer nachmisst: gegen document.documentElement.clientWidth, nicht innerWidth. Die
   Scrollleiste nimmt rechts rund 15 px weg, und mit innerWidth sieht jede Spalte
   um genau diesen Betrag nach links verschoben aus. */

/* Abschnittsköpfe: Marke, Überschrift, Vorspann */
.sec > .wrap > h2,
.sec > .wrap > p{text-align:center;margin-inline:auto}

/* Die Marke trägt jetzt auf beiden Seiten eine Linie, sonst hängt sie schief. */
.eyebrow{justify-content:center;text-align:center}
.eyebrow::before{content:"";flex:1;height:1px;background:var(--rule)}
[data-slab] .eyebrow::before{background:#2A2A2E}

/* Hero: Text und Knöpfe unter die mittige Wortmarke */
.hero .wrap{text-align:center}
.hero .lede{margin-inline:auto}
.hero__cta{justify-content:center}

/* Einzelne Blöcke, die schmaler sind als die Spalte */
.team{justify-content:center}
.fragen{max-width:860px;margin-inline:auto}

/* Kleine Hinweise unter Rastern */
.wirkung__fussnote,.filme__hinweis,.clips__wisch,.galerie__fussnote{text-align:center}

/* Fuß: Zeichen und Wortmarke mittig */
.foot__word{text-align:center}
.foot__mark{display:block;margin-inline:auto}

/* Terminseite: Kopf mittig, Assistent mittig */
.termin h1,.termin__lede{text-align:center;margin-inline:auto}
.assistent{margin-inline:auto}

/* ---------- Lange Wörter in Überschriften ----------
   Deutsche Komposita brechen von selbst nicht um: „Datenschutzerklärung“ war auf dem
   Telefon 386 px breit und schob die Seite 31 px über den Rand, „Zusammenarbeit“
   wäre der nächste Kandidat. overflow-wrap fängt es überall ab, die Silbentrennung
   (lang="de" steht im html-Element) nur auf kleinen Schirmen – auf dem Rechner soll
   keine große Überschrift mitten im Wort brechen, wenn es nicht sein muss. */
h1,h2,h3{overflow-wrap:break-word}
@media (max-width:700px){
  h1,h2,h3{-webkit-hyphens:auto;hyphens:auto}
}