/* ==========================================================================
   Am Puls — Website-Stylesheet
   Alle Werte stammen aus tokens.css. Hier keine Hex-Farben hart eintragen.
   Aufbau:  1 Reset  ·  2 Layout  ·  3 Typografie  ·  4 Komponenten
            5 Sektionsmuster  ·  6 Seiten-Spezifisches  ·  7 Responsive
            8 prefers-reduced-motion  ·  9 Druck  ·  10 Abstands-Helfer
   ========================================================================== */

/* ============================ 1 · Reset & Basis ========================== */

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  background:var(--bg);
  color:var(--text-body);
  font-family:var(--font-sans);
  font-weight:var(--fw-regular);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,video,svg{max-width:100%;display:block}
h1,h2,h3,h4{text-wrap:balance;margin:0}
p{text-wrap:pretty;margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit}

a{color:var(--accent);text-decoration:none;transition:color var(--dur-1) var(--ease)}
a:hover{color:var(--accent-hover)}

::selection{background:var(--accent);color:var(--text-on-accent)}

/* Fokusring — 3 px Sage, überall sichtbar lassen (Barrierefreiheit). */
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-1)}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--accent);color:var(--text-on-accent);
  padding:12px 20px;border-radius:0 0 var(--radius-2) 0;
  font-weight:var(--fw-semibold);
}
.skip-link:focus{left:0;color:var(--text-on-accent)}

.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ================================ 2 · Layout ============================= */

.container{width:100%;max-width:var(--container-wide);margin-inline:auto}
.container--narrow{max-width:var(--container-narrow)}

.section{padding:var(--section-pad) var(--page-pad)}
.section--lg{padding:var(--section-pad-lg) var(--page-pad)}
.section--flush-top{padding-top:0}
.section--flush-bottom{padding-bottom:0}
.section--navy{background:var(--surface)}
.section--rule-top{border-top:1px solid var(--border)}
.section--rule-bottom{border-bottom:1px solid var(--border)}

/* Hero mit Grid-Backdrop */
.hero{position:relative;overflow:hidden;padding:0}
.hero__inner{
  position:relative;z-index:2;
  width:100%;max-width:var(--container-wide);margin-inline:auto;
  padding:var(--hero-pad-top) var(--page-pad) clamp(64px,8vw,100px);
}
.hero--tall .hero__inner{
  padding-top:clamp(96px,13vw,180px);
  padding-bottom:clamp(140px,16vw,220px);
}

/* GridBackdrop: dunkle Basis + radialer Sage-Glow + feines Sage-Raster */
.grid-backdrop{position:absolute;inset:0;pointer-events:none;z-index:0}
.grid-backdrop::before,
.grid-backdrop::after{content:"";position:absolute;inset:0}
.grid-backdrop::before{background:var(--bg-radial)}
.grid-backdrop::after{background-image:var(--bg-grid);background-size:var(--bg-grid-size)}

/* --- Hero mit Hintergrundvideo ----------------------------------------
   Schichten von unten nach oben:
     0  das Video
     1  Filter — dunkle Fläche und Sage-Glow (ohne Raster)
     2  die Puls-Grafik
     3  der Inhalt

   Der Filter ersetzt die sonst deckende Fläche des GridBackdrop durch
   eine halbdurchlässige. Nur so ist das Video überhaupt zu sehen — und
   der Text bleibt trotzdem lesbar. Läuft das Video nicht, bleibt darunter
   der normale Seitenhintergrund: der Hero sieht dann aus wie überall. */
.hero__video{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;
  /* Entsättigt und abgedunkelt: das CI kennt nur einen Farbakzent, ein
     buntes Video würde dagegen arbeiten. */
  filter:grayscale(0.6) brightness(0.75);
}
.grid-backdrop--scrim{z-index:1}
/* Kein Raster über dem Video: zwei Muster übereinander werden unruhig.
   Auf allen anderen Seiten bleibt das Raster wie gehabt. */
.grid-backdrop--scrim::after{content:none}
.grid-backdrop--scrim::before{
  background:
    radial-gradient(120% 70% at 50% 88%, var(--ap-accent-glow) 0%, transparent 60%),
    linear-gradient(180deg,
      rgba(10,10,10,0.84) 0%,
      rgba(10,10,10,0.88) 55%,
      rgba(10,10,10,0.94) 100%);
}
.hero--video pulse-hero{z-index:2}
.hero--video .hero__inner{z-index:3}

/* Raster-Helfer

   Überall min(Xpx,100%) statt Xpx: ein blankes minmax(360px,1fr) erzwingt
   eine 360-px-Spalte auch dann, wenn der Container nur 335 px breit ist —
   auf dem Handy schiebt das die Seite seitlich raus. min() deckelt das
   Mindestmaß auf die verfügbare Breite. */
.grid{display:grid;gap:var(--sp-6)}
.grid--cards{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.grid--cards-wide{grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr))}
.grid--stats{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:var(--sp-9)}
.grid--steps{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:var(--sp-7)}
.grid--split{grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr));gap:clamp(32px,5vw,64px);align-items:center}
.grid--split-top{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:clamp(32px,5vw,72px);align-items:start}

/* Panel-Gruppe: die 1px-Fugen SIND die Trennlinien */
.panel-group{
  display:grid;gap:1px;
  background:var(--border);
  border:1px solid var(--border);
  border-radius:var(--radius-3);
  overflow:hidden;
}
.panel-group > *{background:var(--bg)}

/* ============================= 3 · Typografie ============================ */

.h1{
  font-weight:var(--fw-black);
  font-size:clamp(40px,6vw,80px);
  line-height:1.2;
  letter-spacing:-0.015em;
  max-width:18ch;
}
.h1--home{font-size:clamp(40px,6.8vw,92px);max-width:1100px}
.h1--leistung{font-size:clamp(36px,5.6vw,76px);max-width:1050px}
.h1--kontakt{font-size:clamp(36px,5.4vw,72px)}
.h1--legal{font-size:clamp(34px,4.8vw,64px);line-height:1.1;max-width:none}

.h2{
  font-weight:var(--fw-black);
  font-size:clamp(28px,3.6vw,48px);
  line-height:1.14;
  letter-spacing:var(--tracking-tight);
}
.h2--lg{font-size:clamp(30px,4.2vw,56px);line-height:1.12}
.h2--panel{font-weight:var(--fw-bold);font-size:clamp(20px,2vw,24px);line-height:1.25;letter-spacing:0}

.h3{font-weight:var(--fw-bold);font-size:22px;line-height:1.25;letter-spacing:0}
.h3--lg{font-size:clamp(22px,2vw,28px);line-height:1.2}
.h3--card{font-size:24px}

/* Marker-Überschriften brauchen line-height >= 1.2, sonst überlappt der
   Sage-Block beim Umbruch die Nachbarzeile. */
.h1:has(.mark),.h2:has(.mark),.h3:has(.mark),
.has-mark{line-height:1.2}

.lead{font-size:20px;line-height:1.55;color:var(--text-muted);max-width:640px}
.lead--sm{font-size:18px;line-height:1.6;max-width:560px}

.prose{color:var(--text-muted);line-height:1.55;max-width:60ch}
.prose--tight{margin:0}
.text-muted{color:var(--text-muted)}
.text-strong{color:var(--text-strong)}

/* Die Abstands-Helfer stehen am Ende der Datei — siehe Abschnitt 10. */

/* ============================ 4 · Komponenten ============================ */

/* --- Kicker: Mono, Versalien, weit gesperrt, immer Sage ---------------- */
.kicker{
  display:block;
  font-family:var(--font-mono);
  font-weight:var(--fw-bold);
  font-size:14px;
  line-height:1;
  letter-spacing:var(--tracking-kicker);
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 var(--sp-5);
}
.kicker--sm{font-size:12px;margin-bottom:var(--sp-4)}
.kicker--lg{font-size:20px}
.kicker--hero{margin-bottom:var(--sp-7)}
.kicker--muted{color:var(--text-muted)}
.kicker--flush{margin-bottom:0}

/* --- MarkerHighlight: Sage-Block, fast schwarzer Text, EIN Wort -------- */
.mark{
  background:var(--accent);
  color:var(--text-on-accent);
  padding:0 0.14em;
  border-radius:var(--radius-1);
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}

/* --- Große Akzent-Ziffern --------------------------------------------- */
.numeral{
  font-family:var(--font-sans);
  font-weight:var(--fw-black);
  line-height:1.05;
  letter-spacing:var(--tracking-tight);
  color:var(--accent);
  font-size:clamp(96px,14vw,160px);
}
.numeral--sm{font-size:clamp(64px,9vw,96px)}

/* --- StatFigure -------------------------------------------------------- */
.stat{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-2)}
.stat__value{
  display:flex;align-items:baseline;gap:var(--sp-2);
  font-family:var(--font-sans);
  font-weight:var(--fw-black);
  font-size:clamp(52px,7vw,72px);
  line-height:1;
  letter-spacing:var(--tracking-tight);
  color:var(--accent);
}
.stat__unit{font-size:0.3em;font-weight:var(--fw-medium);color:var(--text-muted)}
.stat__caption{
  font-family:var(--font-mono);
  font-weight:var(--fw-bold);
  font-size:12px;
  letter-spacing:var(--tracking-mono);
  text-transform:uppercase;
  color:var(--text-muted);
}

/* --- Button ------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:var(--sp-2);
  padding:12px 20px;
  font-family:var(--font-sans);
  font-weight:var(--fw-semibold);
  font-size:15px;
  line-height:1.2;
  border:1px solid var(--accent);
  border-radius:var(--radius-2);
  background:var(--accent);
  color:var(--text-on-accent);
  cursor:pointer;
  text-align:center;
  transition:background var(--dur-1) var(--ease),
             color var(--dur-1) var(--ease),
             border-color var(--dur-1) var(--ease);
}
.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--text-on-accent)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.btn--sm{padding:8px 14px;font-size:13px;gap:var(--sp-1)}
.btn--lg{padding:16px 28px;font-size:17px;gap:10px}
.btn--secondary{background:transparent;color:var(--accent);border-color:var(--accent)}
.btn--secondary:hover{background:var(--accent-soft);color:var(--accent-hover);border-color:var(--accent-hover)}
.btn--ghost{background:transparent;color:var(--text-body);border-color:var(--border)}
.btn--ghost:hover{background:transparent;color:var(--text-body);border-color:var(--border-hi)}
.btn__arrow{margin-left:2px}


/* --- ArrowLink --------------------------------------------------------- */
.arrow-link{
  display:inline-flex;align-items:center;gap:0.4em;
  font-family:var(--font-mono);
  font-weight:var(--fw-bold);
  font-size:16px;
  letter-spacing:0.08em;
  color:var(--accent);
}
.arrow-link--sm{font-size:13px}
.arrow-link--lg{font-size:24px}
.arrow-link--white{color:var(--text-body)}
.arrow-link--white:hover{color:var(--accent-hover)}
.arrow-link__arrow{transform:translateY(-0.02em)}

/* --- Badge ------------------------------------------------------------- */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;
  font-family:var(--font-mono);
  font-weight:var(--fw-bold);
  font-size:11px;
  letter-spacing:var(--tracking-mono);
  text-transform:uppercase;
  border-radius:var(--radius-1);
  background:var(--accent-soft);
  color:var(--accent);
  border:1px solid var(--accent);
}
.badge--muted{background:transparent;color:var(--text-muted);border-color:var(--text-muted)}
.badge--solid{background:var(--accent);color:var(--text-on-accent);border-color:var(--accent)}
.badge__dot{width:6px;height:6px;border-radius:999px;background:currentColor;flex:none}

/* --- Card -------------------------------------------------------------- */
.card{
  background:linear-gradient(180deg,var(--surface-card-2),var(--surface-card));
  border:1px solid var(--border);
  border-radius:var(--radius-3);
  box-shadow:var(--shadow-card);
  padding:var(--sp-7);
  color:var(--text-body);
  transition:border-color var(--dur-2) var(--ease);
}
.card--flat{box-shadow:none}
.card:hover{border-color:var(--border-hi)}

/* Kopfzeile der Partner-Karte: Feld links, Bild rechts.
   margin-left:auto statt space-between — so bleibt das Bild auch dann
   rechts, wenn ein langes Feld die Zeile umbrechen lässt.
   align-items:flex-start, damit der Kicker exakt auf derselben Höhe
   beginnt wie in einer Karte ohne Bild — sonst stünden nebeneinander
   liegende Karten versetzt. */
.partner__head{
  display:flex;align-items:flex-start;
  gap:var(--sp-5);flex-wrap:wrap;
}
.partner__head > :last-child{margin-left:auto}

/* Porträt eines Partners. Quadratisch mit kleinem Radius statt Kreis —
   das CI kennt keine Pillen, nur Radien bis 10 px.
   72 px ist die Obergrenze für die 150-px-Quellen: darüber wird das Bild
   auf Retina-Bildschirmen weich. */
.partner__avatar{
  width:72px;height:72px;flex:none;
  border-radius:var(--radius-2);
  object-fit:cover;
  border:1px solid var(--border);
}

/* Wortmarke eines Partners — feste Höhe, damit unterschiedlich große Logos
   auf einer Linie sitzen und die Karten beim Austauschen nicht springen. */
.partner__logo{
  display:flex;align-items:center;justify-content:flex-end;
  height:44px;flex:none;
}
.partner__logo img{max-height:44px;width:auto;object-fit:contain}

/* Offene Karte: gestrichelt statt gefüllt — liest sich als freier Platz,
   nicht als Inhalt. Für „Partner werden" und Ähnliches. */
.card--open{
  background:none;
  border-style:dashed;
  border-color:var(--border-hi);
  box-shadow:none;
}
.card--open:hover{border-color:var(--accent)}

/* --- Pfeil-Listen: immer →, nie Bullets, nie Chevrons ------------------ */
.list-arrow{display:grid;gap:var(--sp-2);color:var(--text-muted);line-height:1.5}
.list-arrow li{display:grid;grid-template-columns:auto 1fr;gap:0.5em;align-items:baseline}
.list-arrow li::before{
  content:"→";
  color:var(--accent);
  font-family:var(--font-mono);
}

/* --- AlertCallout: die EINZIGE Stelle für Alert-Rot -------------------- */
.alert{
  display:flex;gap:var(--sp-5);
  padding:var(--sp-5);
  background:var(--alert-soft);
  border:1px solid var(--alert);
  border-radius:var(--radius-3);
  color:var(--text-body);
}
.alert::before{
  content:"";
  width:4px;align-self:stretch;flex-shrink:0;
  background:var(--alert);border-radius:2px;
}
.alert__body{display:flex;flex-direction:column;gap:6px}
.alert__label{
  font-family:var(--font-mono);font-weight:var(--fw-bold);font-size:11px;
  letter-spacing:var(--tracking-mono);text-transform:uppercase;color:var(--alert);
}
.alert__title{font-weight:var(--fw-bold);font-size:18px;line-height:1.3}
.alert__text{font-size:14px;line-height:1.5;color:var(--text-muted)}

/* --- Navigation -------------------------------------------------------- */
.nav{
  position:sticky;top:0;z-index:30;
  background:rgba(10,10,10,0.72);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.nav__inner{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-6);
  padding:var(--sp-5) var(--page-pad);
  max-width:var(--container-wide);margin-inline:auto;
}
.nav__brand{display:inline-flex;align-items:center;gap:var(--sp-3);flex:none}
.nav__brand img{width:40px;height:auto;object-fit:contain}
.nav__group{display:flex;align-items:center;gap:var(--sp-9);min-width:0}
.nav__links{display:flex;gap:28px;flex-wrap:wrap}
.nav__link{
  font-family:var(--font-sans);font-weight:var(--fw-medium);font-size:15px;
  color:var(--text-body);
}
.nav__link:hover{color:var(--accent-hover)}
.nav__link[aria-current="page"]{color:var(--accent)}

/* Burger — nur unter 960px sichtbar (siehe Responsive) */
.nav__toggle{
  display:none;
  width:44px;height:44px;flex:none;
  align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--border);
  border-radius:var(--radius-2);cursor:pointer;
  transition:border-color var(--dur-1) var(--ease);
}
.nav__toggle:hover{border-color:var(--border-hi)}
.nav__toggle-bars{position:relative;display:block;width:18px;height:2px;background:var(--text-body)}
.nav__toggle-bars::before,.nav__toggle-bars::after{
  content:"";position:absolute;left:0;width:18px;height:2px;background:var(--text-body);
  transition:transform var(--dur-2) var(--ease),opacity var(--dur-1) var(--ease);
}
.nav__toggle-bars::before{top:-6px}
.nav__toggle-bars::after{top:6px}
.nav__toggle[aria-expanded="true"] .nav__toggle-bars{background:transparent}
.nav__toggle[aria-expanded="true"] .nav__toggle-bars::before{transform:translateY(6px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] .nav__toggle-bars::after{transform:translateY(-6px) rotate(-45deg)}

.nav__panel{
  display:none;
  border-top:1px solid var(--border);
  padding:var(--sp-5) var(--page-pad) var(--sp-7);
  background:rgba(10,10,10,0.96);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
.nav__panel[data-open="true"]{display:block}
.nav__panel .nav__links{flex-direction:column;gap:0}
.nav__panel .nav__link{
  display:block;padding:14px 0;font-size:17px;
  border-bottom:1px solid var(--border);
}
.nav__panel .btn{margin-top:var(--sp-6);width:100%}

/* --- Footer ------------------------------------------------------------ */
.footer{
  padding:var(--sp-12) var(--page-pad) var(--sp-8);
  border-top:1px solid var(--border);
  background:var(--bg);
}
.footer__grid{
  display:grid;grid-template-columns:1.2fr repeat(4,1fr);gap:var(--sp-9);
  max-width:var(--container-wide);margin-inline:auto;
}
.footer__brand{display:inline-flex;align-items:center;gap:14px}
.footer__brand img{width:56px;height:auto;object-fit:contain}
.footer__wordmark{
  font-family:var(--font-sans);font-weight:var(--fw-black);font-size:24px;
  letter-spacing:var(--tracking-tight);color:var(--text-body);
}
.footer__tagline{color:var(--text-muted);font-size:14px;line-height:1.6;margin-top:var(--sp-5);max-width:320px}
/* Der llms.txt-Link hängt als letzter Punkt an einer Spalte — gleicher Stil
   und gleicher Abstand wie die Links darüber. Die Klasse ist nur ein Marker
   zum Wiederfinden, den Abstand macht das gap der Spalte. */
.footer__col{display:flex;flex-direction:column;gap:var(--sp-3)}
.footer__col-title{
  font-family:var(--font-mono);font-weight:var(--fw-bold);font-size:11px;
  letter-spacing:var(--tracking-mono);text-transform:uppercase;
  color:var(--text-muted);margin-bottom:var(--sp-2);
}
.footer__legal{
  max-width:var(--container-wide);margin:var(--sp-9) auto 0;
  padding-top:var(--sp-6);border-top:1px solid var(--border);
  display:flex;justify-content:space-between;gap:var(--sp-6);flex-wrap:wrap;
  font-family:var(--font-mono);font-size:11px;
  letter-spacing:var(--tracking-mono);text-transform:uppercase;
  color:var(--text-muted);
}

/* --- Formularfelder ---------------------------------------------------- */
.field{display:flex;flex-direction:column;gap:6px}
.field__label{
  font-family:var(--font-mono);font-weight:var(--fw-bold);font-size:11px;
  letter-spacing:var(--tracking-mono);text-transform:uppercase;color:var(--text-muted);
}
.field__label .req{color:var(--accent)}
.input,.textarea{
  width:100%;
  padding:12px 14px;
  font-family:var(--font-sans);font-size:15px;line-height:1.5;
  color:var(--text-body);
  background:var(--surface-card);
  border:1px solid var(--border);
  border-radius:var(--radius-2);
  outline:none;
  transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease);
}
.textarea{resize:vertical;min-height:120px}
.input::placeholder,.textarea::placeholder{color:var(--text-muted);opacity:.7}
.input:hover,.textarea:hover{border-color:var(--border-hi)}
.input:focus-visible,.textarea:focus-visible{border-color:var(--accent);box-shadow:var(--focus-ring)}
.field--error .input,.field--error .textarea{border-color:var(--alert)}
.field__error{font-size:12px;color:var(--alert);min-height:0}
.field__error:empty{display:none}

.checkbox{
  display:inline-flex;align-items:flex-start;gap:10px;
  font-family:var(--font-sans);font-size:14px;line-height:1.45;
  color:var(--text-body);cursor:pointer;
}
.checkbox input{accent-color:var(--accent);width:16px;height:16px;margin:2px 0 0;flex:none}
.checkbox.field--error input{outline:2px solid var(--alert);outline-offset:2px}
.form__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:14px}
.form__foot{
  margin-top:var(--sp-5);
  display:flex;justify-content:space-between;align-items:center;
  gap:var(--sp-4);flex-wrap:wrap;
}
.form__note{margin-top:var(--sp-4);font-size:13px;color:var(--text-muted);line-height:1.5}
.form__status{margin-top:var(--sp-4)}

/* --- Q & A Accordion --------------------------------------------------- */
.faq{display:grid;gap:var(--sp-3)}
.faq__item{
  border:1px solid var(--border);
  border-radius:var(--radius-3);
  background:linear-gradient(180deg,var(--surface-card-2),var(--surface-card));
  overflow:hidden;
  transition:border-color var(--dur-2) var(--ease);
}
.faq__item:hover{border-color:var(--border-hi)}
.faq__q{
  width:100%;
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-5);
  text-align:left;
  background:none;border:0;
  padding:20px 22px;
  cursor:pointer;
  color:var(--text-body);
  font-family:var(--font-sans);font-size:18px;font-weight:var(--fw-medium);line-height:1.4;
  transition:color var(--dur-1) var(--ease);
}
.faq__q:hover{color:var(--accent-hover)}
.faq__sign{
  font-family:var(--font-mono);color:var(--accent);
  font-size:18px;line-height:1.4;flex:none;
}
.faq__a{
  color:var(--text-muted);line-height:1.6;
  margin:0;padding:0 22px 22px;max-width:60ch;
}
.faq__a[hidden]{display:none}

/* --- Bild-/Video-Platzhalter ------------------------------------------
   Ersetzen durch:
     <img src="assets/img/…" alt="…" width="…" height="…" loading="lazy">
     <video …>  (siehe README, Abschnitt „Bilder & Videos einsetzen")
   ---------------------------------------------------------------------- */
.media{
  border-radius:var(--radius-3);
  overflow:hidden;
  background:var(--surface-card);
}
/* <picture> ist von sich aus inline — ohne display:block löst das height:100%
   des Bildes darin nicht auf und das Bild behält sein Originalformat. */
.media picture{display:block;width:100%;height:100%}
/* Bildband auf den Leistungs- und der Karriereseite.

   Feste 380 px wären auf dem Handy ein Problem: bei 335 px Containerbreite
   stünde ein 16:9-Bild in einem fast quadratischen Ausschnitt — man sähe
   nur noch einen senkrechten Streifen aus der Mitte. Die Höhe wächst
   deshalb mit dem Fenster und ist nur oben und unten begrenzt:

     Fenster 1440 px  →  380 px hoch, Band 3,5:1
     Fenster  768 px  →  215 px hoch, Band 3,3:1
     Fenster  375 px  →  200 px hoch, Band 1,7:1 (fast das ganze Bild)
*/
.media--band{height:clamp(200px,28vw,380px)}
.media img,
.media video{width:100%;height:100%;object-fit:cover;display:block}
/* Videos in den Kacheln laufen nicht von selbst: Poster, Bedienelemente,
   Ton. Geladen wird erst beim Klick auf Play (preload="none" im HTML). */
.media video{background:var(--surface-card)}
.media-slot{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--sp-2);
  min-height:200px;height:100%;
  padding:var(--sp-6);
  text-align:center;
  border:1px dashed var(--border-hi);
  border-radius:var(--radius-3);
  background:
    linear-gradient(180deg,var(--surface-card-2),var(--surface-card));
}
.media-slot__label{
  font-family:var(--font-mono);font-weight:var(--fw-bold);font-size:11px;
  letter-spacing:var(--tracking-mono);text-transform:uppercase;color:var(--accent);
}
/* Der Dateiname, den die Datei tragen muss — hervorgehoben wie Code,
   damit man ihn beim Ablegen abschreiben kann. */
.media-slot__file{
  font-family:var(--font-mono);font-size:12px;line-height:1.4;
  color:var(--text-body);
  background:rgba(255,255,255,0.06);
  border:1px solid var(--border);
  border-radius:var(--radius-1);
  padding:5px 9px;
  overflow-wrap:anywhere;
}
.media-slot__hint{font-size:13px;color:var(--text-muted);max-width:34ch;line-height:1.5}

/* ========================= 5 · Sektionsmuster ============================ */

/* Kennzahlen-Band */
.stats-band{padding:clamp(48px,6vw,80px) var(--page-pad);border-block:1px solid var(--border)}

/* Kontakt-Band (auf fast jeder Seite unten) */
.cta-band__inner{
  display:flex;justify-content:space-between;align-items:center;
  gap:var(--sp-8);flex-wrap:wrap;
}
.cta-band__title{max-width:22ch}

/* Ablauf-Schritte */
.step__title{margin:var(--sp-4) 0 var(--sp-2)}
.rule__row{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-6);align-items:start}

/* Rezensionen — Kundenstimmen als Laufband.

   Aufbau in Stufen, damit nichts kaputtgeht:
     ohne JavaScript      → normale Reihe, von Hand scrollbar
     mit JavaScript       → site.js dupliziert die Karten und setzt
                            .is-running, erst dann läuft die Animation
     reduzierte Bewegung  → keine Animation, wieder scrollbare Reihe

   Der Abstand zwischen den Karten kommt als margin, nicht als gap: nur so
   ist eine Runde exakt die halbe Bahnbreite und der Übergang springt
   nicht. Mit gap fehlte am Ende ein halber Abstand. */
.review-marquee{
  --marquee-dauer:60s;
  overflow-x:auto;
  /* Kanten nur leicht auslaufen lassen — gerade so viel, dass der Schnitt
     nicht hart wirkt. In px statt %, damit der Verlauf auf großen
     Bildschirmen nicht mitwächst. */
  --marquee-kante:28px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--marquee-kante),
                     #000 calc(100% - var(--marquee-kante)),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 var(--marquee-kante),
             #000 calc(100% - var(--marquee-kante)),transparent 100%);
}
.review-marquee.is-running{overflow:hidden}

.review-track{display:flex;align-items:stretch;width:max-content}
.review-track > .review{
  flex:0 0 clamp(280px,26vw,360px);
  margin-inline-end:var(--sp-8);
}

.review-marquee.is-running .review-track{
  animation:review-wandern var(--marquee-dauer) linear infinite;
}
/* Anhalten beim Überfahren — und beim Tabben, sonst wandert der Inhalt
   unter dem Tastaturfokus weg. */
.review-marquee.is-running:hover .review-track,
.review-marquee.is-running:focus-within .review-track{
  animation-play-state:paused;
}
/* Von rechts nach links. Für die Gegenrichtung die beiden Werte tauschen. */
@keyframes review-wandern{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

.review{
  margin:0;padding:clamp(24px,2.4vw,32px);
  display:flex;flex-direction:column;gap:var(--sp-6);
  min-height:360px;   /* hält die Karten hochkant statt breitgelaufen */
}

/* Beschriftung über den Sternen — eigener Block, damit zwischen Label und
   Sternen nicht der große Karten-Abstand steht. */
.review__rating{display:flex;flex-direction:column;gap:var(--sp-2)}
.review__stars{
  color:var(--star);
  font-size:17px;letter-spacing:0.16em;line-height:1;
}

/* Das Zitat ist der Inhalt der Karte, nicht Beiwerk — entsprechend groß.
   Nebeneffekt: es füllt die Karte, statt Leerraum über der Trennlinie zu
   lassen. */
.review__quote{
  margin:0;
  font-size:clamp(18px,1.7vw,22px);line-height:1.5;
  letter-spacing:-0.005em;
  color:var(--text-body);
  text-wrap:pretty;
}
.review__quote p{margin:0}
.review__quote p + p{margin-top:0.7em}
/* Die Anführungszeichen setzt das CSS, nicht der Text: „…" in Sage, wie im
   CI für Zitate vorgesehen. So bleibt das Zitat im HTML unverfälscht. */
.review__quote p:first-child::before,
.review__quote p:last-child::after{color:var(--accent)}
.review__quote p:first-child::before{content:"\201E"}
.review__quote p:last-child::after{content:"\201C"}

/* Haarlinie trennt Zitat und Absender — gibt der Karte einen klaren Fuß,
   auch wenn das Zitat kurz ist und darüber Luft bleibt. */
.review__by{
  margin-top:auto;padding-top:var(--sp-5);
  border-top:1px solid var(--border);
  line-height:1.4;
}
.review__name{font-weight:var(--fw-bold);font-size:16px;color:var(--text-body)}

/* Kleine Meta-Beschriftungen der Karte — gleiche Schrift wie die Kicker,
   nur gedeckt statt sage: „Bewertung" über den Sternen und die Quelle
   unter dem Namen. */
.review__label,
.review__source{
  font-family:var(--font-mono);font-weight:var(--fw-bold);font-size:11px;
  letter-spacing:var(--tracking-mono);text-transform:uppercase;
  color:var(--text-muted);
}
.review__source{display:block;margin-top:6px}

/* Kundenmarken-Leiste (Startseite) */
.logo-strip{grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr))}
.logo-strip__cell{
  display:flex;align-items:center;justify-content:center;
  height:104px;padding:20px 24px;
}
.logo-strip__cell img{max-height:100%;width:auto;object-fit:contain}
.logo-strip__placeholder{
  font-family:var(--font-mono);font-weight:var(--fw-bold);font-size:11px;
  letter-spacing:var(--tracking-mono);text-transform:uppercase;
  color:var(--text-muted);opacity:.5;
}

/* ======================= 6 · Seiten-Spezifisches ========================= */

/* Startseite — Puls-Grafik im Hero */
pulse-hero{
  position:absolute;inset:auto 0 0 0;height:46%;
  z-index:1;pointer-events:none;display:block;
}

/* Startseite — Medien-Bereich.

   Vier Spalten, zwei Zeilen. Die große Kachel liegt links oben über zwei
   Spalten, darunter zwei kleine Querformate; rechts stehen zwei Hochformate
   über beide Zeilen. Die Höhen kommen aus aspect-ratio, nicht aus festen
   Pixelwerten — dadurch stimmen die Seitenverhältnisse auf jeder Breite:

     Gross    2 Spalten, 16:9
     Quer     1 Spalte,  16:9
     Hoch     1 Spalte über beide Zeilen — ergibt rund 9:16

   Bei 1345 px Container: Gross 665×374, Quer 324×182, Hoch 324×572.
   Die Plätze heißen nach ihrer Form, nicht nach ihrem Inhalt: im
   Hochformat-Platz rechts läuft derzeit das Workshop-Video. */
.media-mosaic{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--sp-4);
  grid-template-areas:
    "gross gross hoch1 hoch2"
    "quer1 quer2 hoch1 hoch2";
}
.media-mosaic__gross{grid-area:gross;aspect-ratio:16/9}
.media-mosaic__quer1{grid-area:quer1;aspect-ratio:16/9}
.media-mosaic__quer2{grid-area:quer2;aspect-ratio:16/9}
.media-mosaic__hoch1{grid-area:hoch1}
.media-mosaic__hoch2{grid-area:hoch2}

/* Fallbeispiele (Referenzen) und Porträts (Team) teilen sich den Rahmen:
   ein Bild neben dem Text, in einer Karte mit Haarlinie und 10 px Radius.
   Unterschied: beim Team wechselt die Bildseite von Zeile zu Zeile. */
.case,
.person{
  display:grid;
  align-items:stretch;
  border:1px solid var(--border);
  border-radius:var(--radius-3);
  background:linear-gradient(180deg,var(--surface-card-2),var(--surface-card));
  overflow:hidden;
}

/* --- Team: abwechselnd Bild links / Bild rechts ------------------------
   Der Wechsel läuft über :nth-child — wer eine Person einfügt oder
   entfernt, muss nichts nachziehen. Bedingung: im Container stehen nur
   .person-Zeilen und nichts dazwischen.

   Die Liste läuft schmaler als der Rest der Seite: über die volle
   1360er-Breite wären die Zeilen sehr wuchtig für vier kurze Texte. */
.person-list{
  max-width:1160px;margin-inline:auto;gap:clamp(20px,2.5vw,32px);
  /* Versatz: ungerade Zeilen sitzen links der Mitte, gerade rechts.
     Beide Zeilen bleiben gleich breit — es wandert nur der Rand.
     Prozent, nicht vw: Rand-Prozente rechnen gegen die Listenbreite, der
     Versatz bleibt damit auf jedem Bildschirm gleich deutlich. */
  --stagger:10%;
}

.person{
  grid-template-columns:minmax(0,0.62fr) minmax(0,1fr);
  margin-inline-end:var(--stagger);
}
.person:nth-child(even){
  grid-template-columns:minmax(0,1fr) minmax(0,0.62fr);
  margin-inline-start:var(--stagger);
  margin-inline-end:0;
}
.person:nth-child(even) .person__media{grid-column:2;grid-row:1}
.person:nth-child(even) .person__body{grid-column:1;grid-row:1}

/* Bild und Platzhalter liegen absolut in der Zelle: über <picture> löst
   ein height:100% nicht auf, dann käme das natürliche Hochformat durch
   und jede Zeile wäre anders hoch. */
.person__media{position:relative;min-height:400px}
.person__media picture,
.person__media .media-slot{position:absolute;inset:0}
.person__media .media-slot{border:0;border-radius:0}
.person__photo{
  width:100%;height:100%;object-fit:cover;
  /* Hochformat-Porträt in einer breiteren Zelle: der Ausschnitt wird nach
     oben gezogen, sonst schneidet er Stirn und Haaransatz ab. */
  object-position:50% 20%;
}
.person__body{
  padding:clamp(24px,3vw,40px);
  display:flex;flex-direction:column;justify-content:center;
}

/* --- Referenzen — Fallbeispiele ---------------------------------------- */
.case{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:0}
.case__media{min-height:280px;position:relative}
.case__media img{width:100%;height:100%;object-fit:cover}
.case__media .media-slot{border:0;border-radius:0}
.case__body{
  padding:clamp(24px,3vw,40px);
  display:flex;flex-direction:column;gap:18px;
}
.case__field-label{
  font-family:var(--font-mono);font-size:11px;
  letter-spacing:var(--tracking-mono);text-transform:uppercase;
  color:var(--accent);margin-bottom:6px;
}
.case__tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto}

/* Kontakt — Datenzeilen */
.contact-rows{display:grid;gap:var(--sp-5);max-width:480px}
.contact-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-6);
  border-bottom:1px solid var(--border);padding-bottom:var(--sp-4);
}
.contact-row__key{
  font-family:var(--font-mono);font-weight:var(--fw-bold);font-size:11px;
  letter-spacing:var(--tracking-mono);text-transform:uppercase;
  color:var(--text-muted);flex:none;
}

/* Impressum / Datenschutz */
.legal-blocks{display:grid;gap:var(--sp-8)}
.legal-blocks h2{font-weight:var(--fw-bold);font-size:24px;line-height:1.25;margin:0 0 var(--sp-3)}
.legal-blocks p{color:var(--text-muted);line-height:1.7}
.legal-blocks a{word-break:break-word}

/* 404 */
.notfound{display:grid;place-items:center;min-height:60vh;text-align:center}

/* ============================ 7 · Responsive =============================
   Grundsatz aus dem Handoff: Layout läuft über clamp() + auto-fit.
   Media-Queries nur dort, wo auto-fit das nicht leisten kann.
   ========================================================================= */

@media (max-width:960px){
  .nav__links--desktop{display:none}
  .nav__cta--desktop{display:none}
  .nav__toggle{display:inline-flex}
  .nav__group{gap:var(--sp-6)}
}

/* Der Footer hat fünf Spalten; „Informationsbeschaffung" braucht Platz.
   Unter ~1080 px wird es sonst schief — dort früher umbrechen. */
@media (max-width:1080px){
  .footer__grid{grid-template-columns:1fr 1fr;gap:var(--sp-8)}
  .footer__brand-col{grid-column:1 / -1}
}

/* Vier Spalten brauchen Platz. Darunter: die große Kachel breit, dann die
   beiden Hochformate nebeneinander, dann die kleinen Querformate. */
@media (max-width:1000px){
  .media-mosaic{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-areas:
      "gross gross"
      "hoch1 hoch2"
      "quer1 quer2";
  }
  .media-mosaic__hoch1,
  .media-mosaic__hoch2{aspect-ratio:9/16}
}

/* Einspaltig gestapelt — Hochformate bleiben hochkant. */
@media (max-width:620px){
  .media-mosaic{
    grid-template-columns:1fr;
    grid-template-areas:"gross" "hoch1" "hoch2" "quer1" "quer2";
  }
  .media-mosaic__hoch1,
  .media-mosaic__hoch2{aspect-ratio:3/4}
}

/* Team: nebeneinander lohnt sich erst ab ~820 px. Darunter stapeln alle
   gleich — Bild oben, Text darunter, auch die gespiegelten Zeilen. */
@media (max-width:820px){
  /* Gestapelt bringt der Versatz nichts und kostet nur Breite. */
  .person-list{--stagger:0px}
  .person,
  .person:nth-child(even){grid-template-columns:1fr}
  .person:nth-child(even) .person__media{grid-column:1;grid-row:1}
  .person:nth-child(even) .person__body{grid-column:1;grid-row:2}
  .person__media{min-height:0;height:clamp(300px,64vw,400px)}
}

/* Auf schmalen Bildschirmen brauchen die Karten die Mindesthöhe nicht —
   dort steht ohnehin nur eine im Blickfeld. */
@media (max-width:620px){
  .review{min-height:0}
}

@media (max-width:620px){
  .footer__grid{grid-template-columns:1fr}
  .footer__legal{flex-direction:column;gap:var(--sp-2)}
  .cta-band__inner{align-items:flex-start}
  .cta-band__inner .btn{width:100%}
  .form__foot{flex-direction:column;align-items:stretch}
  .form__foot .btn{width:100%}
  .rule__row{grid-template-columns:1fr;gap:var(--sp-3)}
  .contact-row{flex-direction:column;gap:var(--sp-2);align-items:flex-start}
  .h1{max-width:none}
}

/* ====================== 8 · prefers-reduced-motion =======================
   Puls-Animation abschalten, Übergänge auf ein Minimum. Die Puls-Grafik
   zeichnet dann ein einziges Standbild (siehe site.js).
   ========================================================================= */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  /* Laufband anhalten und wieder von Hand scrollbar machen — sonst wären
     die Karten hinter overflow:hidden nicht mehr erreichbar.
     site.js dupliziert die Karten in diesem Fall gar nicht erst. */
  .review-marquee.is-running{overflow-x:auto}
  .review-marquee.is-running .review-track{animation:none}
  /* Das Hero-Video wird gar nicht erst gestartet (site.js) — stehen bleibt
     das Poster-Bild. Hier ist deshalb nichts zu tun. */
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ============================== 9 · Druck ================================ */

@media print{
  .nav,.footer,pulse-hero,.grid-backdrop,.media-slot{display:none !important}
  body{background:#fff;color:#000}
  .card,.faq__item{border:1px solid #ccc;background:#fff;box-shadow:none}
  .prose,.lead,.text-muted{color:#333}
  .faq__a[hidden]{display:block !important}
}

/* ========================= 10 · Abstands-Helfer ==========================
   Absichtlich ganz am Ende: Komponenten wie .kicker setzen `margin` als
   Kurzschreibweise und damit auch margin-top. Bei gleicher Spezifität
   gewinnt die spätere Regel — stünden die Helfer oben, würde jedes mt-* an
   einem Kicker still auf 0 gesetzt. Utilities gehören nach unten.
   Bewusst wenige Stufen, alle aus dem 4px-Raster.
   ========================================================================= */

.mt-2{margin-top:var(--sp-2)}  .mt-3{margin-top:var(--sp-3)}
.mt-4{margin-top:var(--sp-4)}  .mt-5{margin-top:var(--sp-5)}
.mt-6{margin-top:var(--sp-6)}  .mt-7{margin-top:var(--sp-7)}
.mt-8{margin-top:var(--sp-8)}  .mt-9{margin-top:var(--sp-9)}
.mt-11{margin-top:var(--sp-11)}
.mb-4{margin-bottom:var(--sp-4)} .mb-5{margin-bottom:var(--sp-5)}
.mb-6{margin-bottom:var(--sp-6)} .mb-8{margin-bottom:var(--sp-8)}
.mb-9{margin-bottom:var(--sp-9)}