/* Teambeschleuniger Designsystem (Phase 6, abgeleitet aus Prototyp C v2, freigegeben 10.10.2026)
   Dokumentation: docs/agency/06-designsystem.md. Musterseite: prototypes/designsystem.html
   Regeln: CI exakt (Navy als einzige Farbe, Grautöne, Lato), keine grossen schwarzen Flächen,
   Dreiecke nur in CI-Geometrie, Radius 0 ausser runden Symbol-Knöpfen. */

@font-face { font-family: "Lato"; src: url("/assets/fonts/lato-thin.woff2") format("woff2"); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("/assets/fonts/lato-light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("/assets/fonts/lato-lightitalic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Lato"; src: url("/assets/fonts/lato-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("/assets/fonts/lato-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Lato"; src: url("/assets/fonts/lato-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("/assets/fonts/lato-bolditalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Lato"; src: url("/assets/fonts/lato-black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("/assets/fonts/lato-blackitalic.woff2") format("woff2"); font-weight: 900; font-style: italic; font-display: swap; }

/* =====================================================================
   1. Tokens
   ===================================================================== */
:root {
  /* Farben: CI. Navy ist die einzige Farbe. */
  --navy: #00387b;          /* Marke: Bühnen, Hauptbutton, Akzente, Dreieck */
  --navy-2: #002a5c;        /* nur Verläufe, Hover, Ton-in-Ton-Dreieck auf Navy */
  --navy-3: #001b3d;        /* nur Verlaufstiefe, nie als Fläche */
  --anthrazit: #242422;     /* nur Text */
  --dunkelgrau: #383839;    /* dunkle Flächen, starke Linien, kleines Dreieck */
  --grau-666: #666666;      /* Nebentext, Labels auf Hell (5.7:1 auf Weiss) */
  --grau: #808285;          /* Band rechts im Motiv, nur grosse Elemente (3.9:1) */
  --hellgrau: #bbbcbb;      /* Band links im Motiv, Linien, Labels auf Dunkel */
  --grund: #f4f4f3;         /* helle Grundfläche */
  --weiss: #ffffff;
  --fehler: #b3261e;        /* Funktionsfarbe, nur Formularfehler (6.5:1 auf Weiss) */

  /* Text auf dunklen Flächen (Navy, Dunkelgrau) */
  --auf-dunkel: #ffffff;
  --auf-dunkel-2: rgba(255, 255, 255, 0.86);  /* Fliesstext, 8.8:1 auf Navy */
  --auf-dunkel-3: rgba(255, 255, 255, 0.72);  /* Nebentext, 6.6:1 auf Navy */
  --linie-dunkel: rgba(255, 255, 255, 0.26);

  /* Verläufe: nur Navy-Abstufungen, Dunkelgrau und weisses Licht */
  --verlauf-navy: radial-gradient(120% 90% at 85% 0%, var(--navy) 0%, var(--navy-2) 70%, var(--navy-2) 100%);
  --verlauf-navy-licht: radial-gradient(70% 60% at 18% 8%, rgba(0, 56, 123, 0.9) 0%, rgba(0, 56, 123, 0) 70%);
  --verlauf-akt-navy: radial-gradient(80% 60% at 85% 10%, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 60%), linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
  --verlauf-dunkel: radial-gradient(90% 60% at 100% 100%, rgba(0, 56, 123, 0.55), rgba(0, 56, 123, 0) 70%), var(--dunkelgrau);
  --verlauf-dunkel-navy: radial-gradient(70% 50% at 10% 0%, rgba(0, 56, 123, 0.35), rgba(0, 56, 123, 0) 70%), linear-gradient(180deg, var(--dunkelgrau) 0%, var(--dunkelgrau) 55%, var(--navy) 140%);
  --verlauf-hell: linear-gradient(180deg, var(--weiss) 0%, var(--weiss) 50%, var(--grund) 100%);

  /* Typografie: Lato, fünf Schnitte mit Rollen */
  --schrift: "Lato", system-ui, sans-serif;
  --t-mini: 0.6875rem;
  --t-label: 0.75rem;
  --t-klein: 0.9375rem;
  --t-body: 1.0625rem;
  --t-gross: 1.1875rem;
  --t-lead: clamp(1.1875rem, 1.02rem + 0.55vw, 1.5rem);
  --t-h4: clamp(1.375rem, 1.1rem + 0.9vw, 2rem);
  --t-h3: clamp(1.9rem, 1.1rem + 2.6vw, 3.6rem);
  --t-zitat: clamp(1.9rem, 0.9rem + 3.6vw, 4.6rem);
  --t-h2: clamp(2.7rem, 0.9rem + 6.6vw, 8.6rem);
  --t-seite: clamp(2.8rem, 0.8rem + 7vw, 9rem);
  --t-mega: clamp(3.3rem, 0.6rem + 9.6vw, 13.5rem);
  --t-zahl: clamp(5.5rem, 2rem + 12vw, 15rem);
  --t-kap: clamp(5.2rem, 22vw, 26rem);
  --sperr-label: 0.18em;
  --sperr-display: -0.045em;

  /* Raster und Abstände */
  --max: 1312px;
  --max-text: 42rem;        /* rund 70 Zeichen Fliesstext */
  --g: clamp(20px, 4.4vw, 64px);
  --rand: max(var(--g), calc((100vw - var(--max)) / 2));
  --a-1: 8px;
  --a-2: 16px;
  --a-3: clamp(24px, 3vw, 32px);
  --a-4: clamp(32px, 4vw, 48px);
  --a-5: clamp(48px, 6vw, 80px);
  --a-6: clamp(64px, 8vw, 120px);
  --luft: clamp(80px, 11vw, 168px);
  --spalt: clamp(48px, 6vw, 112px);

  /* Dreieck-Motiv: Breite --mw, Seitenverhältnis 131 : 113.6 fix */
  --mw: clamp(150px, 30vw, 560px);

  /* Tiefe: weich und mit Versatz, nur für überlagernde Ebenen */
  --schatten-karte: 0 30px 60px -20px rgba(0, 27, 61, 0.45);
  --schatten-bild: 0 40px 80px -30px rgba(0, 27, 61, 0.6);
  --schatten-formular: 0 50px 100px -40px rgba(0, 27, 61, 0.6);

  /* Bewegung */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);      /* expo.out */
  --ease-wechsel: cubic-bezier(0.65, 0, 0.35, 1);
  --d-schnell: 160ms;
  --d-ui: 260ms;
  --d-linie: 420ms;
  --d-flaeche: 520ms;

  color-scheme: light;
}

/* =====================================================================
   2. Grundlagen und Browser-Oberflächen
   ===================================================================== */
/* Abgeleitete Motivmasse: auf jedem Element neu rechnen, das --mw setzt, sonst stimmen die Bandhöhen nicht */
:root, .buehne-ruhig, .fuss { --band: calc(var(--mw) * 17.4 / 131); --naht-hoehe: calc(var(--mw) * 96.2 / 131); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; accent-color: var(--navy); scrollbar-color: var(--grau) var(--grund); }
body {
  margin: 0; font-family: var(--schrift); font-size: var(--t-body); line-height: 1.6;
  color: var(--anthrazit); background: var(--grund); caret-color: var(--navy);
  font-kerning: normal; font-variant-numeric: lining-nums; text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, picture, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
h1, h2, h3, h4, p, blockquote, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-weight: 900; text-wrap: balance; }
::selection { background: var(--navy); color: var(--weiss); }
.dunkel ::selection { background: var(--weiss); color: var(--navy); }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.dunkel :focus-visible, .kopf :focus-visible { outline-color: var(--weiss); }
.kopf .btn-weiss:focus-visible { outline-offset: 4px; }
.skip { position: absolute; left: var(--g); top: -100px; z-index: 60; background: var(--weiss); color: var(--navy); padding: 12px 18px; font-weight: 900; text-decoration: none; }
.skip:focus { top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.wrap { width: min(100% - 2 * var(--g), var(--max)); margin-inline: auto; }
.wrap.label { display: flex; }

/* =====================================================================
   3. Flächen und Sektionen
   Abfolge: nie zwei dunkle Flächen ohne Naht dazwischen; dunkle Flächen höchstens rund 35 % der Seite.
   ===================================================================== */
.sektion { position: relative; overflow: clip; padding-block: var(--luft); }
.sektion-kompakt { padding-block: var(--a-6); }
.flaeche-weiss { background: var(--weiss); }
.flaeche-grund { background: var(--grund); }
.flaeche-hell { background: var(--verlauf-hell); }
.flaeche-dunkel { background: var(--verlauf-dunkel); }
.flaeche-dunkel-navy { background: var(--verlauf-dunkel-navy); }
.flaeche-navy { background: var(--verlauf-akt-navy); }
.flaeche-buehne { background: var(--verlauf-navy-licht), var(--verlauf-navy); }
.dunkel { color: var(--auf-dunkel); }
.mit-naht { padding-bottom: calc(var(--band) + var(--luft)); }

/* Zweispaltige Raster: Text und Bild, Verhältnis aus C v2 */
.split { display: grid; gap: var(--a-5); }
@media (min-width: 1000px) {
  .split { column-gap: var(--spalt); align-items: start; }
  .split-text-bild { grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr); }
  .split-bild-text { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); }
  .split-gleich { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split-mitte { align-items: center; }
}
.drei { display: grid; gap: var(--a-4); }
@media (min-width: 900px) { .drei { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(32px, 4vw, 64px); } }

/* =====================================================================
   4. Typografie
   Zwei Stimmen: Black spricht, Thin oder Light antwortet (.zweit).
   ===================================================================== */
.label { display: inline-flex; align-items: center; gap: 10px; font-size: var(--t-label); font-weight: 900; letter-spacing: var(--sperr-label); text-transform: uppercase; line-height: 1.3; }
.label .ic { width: 20px; height: 20px; }
.flaeche-weiss .label, .flaeche-grund .label, .flaeche-hell .label { color: var(--navy); }
.dunkel .label { color: var(--hellgrau); }
.label-grau { color: var(--grau-666) !important; }

.titel { font-weight: 900; line-height: 0.92; letter-spacing: var(--sperr-display); text-wrap: balance; }
.titel .zweit { display: block; margin-top: 0.06em; font-weight: 400; letter-spacing: -0.035em; }
.titel-mega { font-size: var(--t-mega); line-height: 0.86; }
.titel-seite { font-size: var(--t-seite); line-height: 0.88; }
.titel-h2 { font-size: var(--t-h2); line-height: 0.9; letter-spacing: -0.05em; }
.titel-satz { font-size: clamp(2.4rem, 0.8rem + 5.6vw, 7.4rem); line-height: 0.94; max-width: 13.5em; }
.titel-satz .zweit { font-weight: 400; margin-top: 0.12em; }
.flaeche-weiss .titel-satz .zweit, .flaeche-grund .titel-satz .zweit, .flaeche-hell .titel-satz .zweit { color: var(--navy); }
.titel-h3 { font-size: var(--t-h3); line-height: 1.02; letter-spacing: -0.03em; max-width: 14em; }
.titel-h4 { font-size: var(--t-h4); line-height: 1.1; letter-spacing: -0.025em; }
.satz-gross { font-size: clamp(2rem, 0.9rem + 3.6vw, 4.6rem); font-weight: 900; line-height: 0.98; letter-spacing: -0.04em; max-width: 11em; text-wrap: balance; }
.satz-gross em { font-style: normal; font-weight: 400; }

.lead { font-size: var(--t-lead); font-weight: 300; line-height: 1.5; max-width: 32em; text-wrap: pretty; }
.flaeche-weiss .lead, .flaeche-grund .lead, .flaeche-hell .lead { color: var(--grau-666); }
.lead strong { font-weight: 900; color: var(--anthrazit); }
.dunkel .lead { color: var(--auf-dunkel-2); }
.dunkel .lead strong { color: var(--weiss); }
.text { max-width: 34em; font-size: var(--t-gross); line-height: 1.6; }
.dunkel .text { color: var(--auf-dunkel-2); }
.klein { font-size: var(--t-klein); }
.titel + .lead, .titel + .text, .label + .titel { margin-top: var(--a-3); }

/* Prosa: Ratgeber, Rechtstexte, längere Unterseitentexte (Präzision aus Richtung A) */
.prosa { max-width: var(--max-text); font-size: 1.125rem; line-height: 1.7; color: var(--anthrazit); }
.prosa > * + * { margin-top: 1.1em; }
.prosa h2 { margin-top: 2.2em; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); line-height: 1.1; letter-spacing: -0.03em; color: var(--anthrazit); }
.prosa h3 { margin-top: 1.8em; font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); line-height: 1.25; letter-spacing: -0.015em; color: var(--navy); }
.prosa h4 { margin-top: 1.5em; font-size: 1.125rem; color: var(--navy); }
.prosa h2 + *, .prosa h3 + *, .prosa h4 + * { margin-top: 0.6em; }
.prosa strong { color: var(--anthrazit); font-weight: 900; }
.prosa a { color: var(--navy); font-weight: 700; text-decoration-color: var(--hellgrau); text-decoration-thickness: 2px; transition: text-decoration-color var(--d-ui) var(--ease); }
.prosa a:hover { text-decoration-color: var(--navy); }
.prosa ul li, .prosa ol li { position: relative; padding-left: 1.6em; }
.prosa li + li { margin-top: 0.5em; }
.prosa ul li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 0.7em; height: 2px; background: var(--navy); }
.prosa ol { counter-reset: p; }
.prosa ol li { counter-increment: p; }
.prosa ol li::before { content: counter(p); position: absolute; left: 0; top: 0; font-weight: 900; color: var(--navy); font-variant-numeric: tabular-nums; }
.prosa blockquote { position: relative; margin-block: 2em; padding: 22px 0 0; border-top: 2px solid var(--dunkelgrau); font-size: clamp(1.25rem, 1rem + 0.8vw, 1.6rem); font-weight: 300; font-style: italic; line-height: 1.45; color: var(--anthrazit); }
.prosa blockquote p { margin: 0; }
.prosa figure img, .prosa > img { width: 100%; }
.prosa figcaption { margin-top: 10px; font-size: var(--t-klein); color: var(--grau-666); }
.prosa iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; }
.prosa table { width: 100%; border-collapse: collapse; font-size: 1rem; font-variant-numeric: tabular-nums; }
.prosa th, .prosa td { padding: 10px 12px 10px 0; text-align: left; border-bottom: 1px solid var(--hellgrau); }
.prosa th { font-weight: 900; border-bottom: 2px solid var(--dunkelgrau); }
.prosa hr { border: 0; height: 2px; background: var(--dunkelgrau); margin-block: 2.4em; }

/* =====================================================================
   5. Symbole und Dreiecke
   ===================================================================== */
.ic { width: 1.5em; height: 1.5em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; stroke-miterlimit: 10; overflow: visible; }

/* Dreiecke: exakt CI, nur proportional skaliert, nie gedreht oder verzerrt */
.tri { display: block; aspect-ratio: 55.5 / 96.2; height: auto; }
.tri-k { display: block; aspect-ratio: 18.6 / 17.4; width: 0.62em; height: auto; flex: none; }

/* Naht: Band mit Motiv, die Navy-Spitze steigt in die nächste Fläche */
.naht {
  position: relative; z-index: 4; display: flex; align-items: flex-end; pointer-events: none;
  margin-top: calc(var(--naht-hoehe) * -1);
  background: linear-gradient(var(--hellgrau), var(--hellgrau)) 0 100% / 100% calc(var(--band) - 1px) no-repeat;
}
.naht-band { flex: 1; height: var(--band); background: var(--hellgrau); }
.naht .motiv { display: block; width: var(--mw); aspect-ratio: 131 / 113.6; height: auto; flex: none; margin-left: -1px; }
.motiv .m-navy { transform-box: fill-box; }
.buehne .naht { position: absolute; inset: auto 0 0 0; margin: 0; }

/* Schatten-Dreiecke: Navy-Dreieck als Ebene hinter Bildern, eigenes Scroll-Tempo (data-tempo) */
/* Kante: Navy-Dreieck steht mit der senkrechten Seite bündig am rechten Rand eines Fotos
   und mit der Grundlinie auf dessen Unterkante, die Spitze ragt oben heraus. Nie frei im Raum. */
.bild-kante { position: relative; isolation: isolate; }
/* Platz für die Spitze: rund ein Drittel der Bildhöhe über dem Foto freihalten */
.mit-kante-luft { margin-top: clamp(96px, 14vw, 220px); }
.kante { position: absolute; right: 0; bottom: 0; z-index: -1; height: calc(100% * var(--kante, 1.35)); pointer-events: none; }
.kante .tri { height: 100%; width: auto; }


/* =====================================================================
   6. Buttons und Links
   ===================================================================== */
.btn {
  --b: var(--navy); --f: var(--weiss); --b2: var(--dunkelgrau); --f2: var(--weiss);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 56px; padding: 15px 26px 15px 28px;
  font: 900 0.9375rem/1.2 var(--schrift); letter-spacing: 0.04em;
  text-decoration: none; color: var(--f); background: var(--b);
  border: 2px solid var(--b); border-radius: 0; cursor: pointer;
  transition: color var(--d-ui) var(--ease), border-color var(--d-ui) var(--ease);
}
.btn::before { content: ""; position: absolute; inset: -2px; z-index: -1; background: var(--b2); transform: scaleX(0); transform-origin: 100% 50%; transition: transform var(--d-flaeche) var(--ease); }
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); transform-origin: 0 50%; }
.btn:hover, .btn:focus-visible { color: var(--f2); border-color: var(--b2); }
.btn-weiss { --b: var(--weiss); --f: var(--navy); --b2: var(--navy-2); --f2: var(--weiss); }
.btn-linie { --b: transparent; --f: var(--navy); --b2: var(--navy); --f2: var(--weiss); border-color: var(--navy); }
.btn-linie-hell { --b: transparent; --f: var(--weiss); --b2: var(--weiss); --f2: var(--navy); border-color: rgba(255, 255, 255, 0.7); }
.btn:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; opacity: 0.55; }
.btn[aria-busy="true"]:disabled { opacity: 1; }
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"] .pf { animation: tb-puls 1s var(--ease-wechsel) infinite alternate; }
@keyframes tb-puls { from { opacity: 1; } to { opacity: 0.25; } }

/* Pfeil, der beim Hover durchläuft */
.pf { position: relative; display: inline-block; width: 20px; height: 20px; overflow: hidden; flex: none; }
.pf .ic { position: absolute; inset: 0; width: 20px; height: 20px; transition: transform var(--d-linie) var(--ease); }
.pf .ic + .ic { transform: translateX(-140%); }
a:hover > .pf .ic:first-child, button:hover > .pf .ic:first-child, a:focus-visible > .pf .ic:first-child { transform: translateX(140%); }
a:hover > .pf .ic + .ic, button:hover > .pf .ic + .ic, a:focus-visible > .pf .ic + .ic { transform: none; }
.pf-diag .ic + .ic { transform: translate(-140%, 140%); }
a:hover > .pf-diag .ic:first-child, a:focus-visible > .pf-diag .ic:first-child { transform: translate(140%, -140%); }

.pfeil-link { display: inline-flex; align-items: center; min-height: 44px; gap: 12px; font-weight: 900; font-size: 1rem; letter-spacing: 0.02em; text-decoration: none; padding-block: 8px; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat; transition: background-size var(--d-linie) var(--ease); }
.pfeil-link:hover, .pfeil-link:focus-visible { background-size: 0 2px; background-position: 100% 100%; }
.flaeche-weiss .pfeil-link, .flaeche-grund .pfeil-link, .flaeche-hell .pfeil-link { color: var(--navy); }
.cta-reihe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--a-3); }

/* =====================================================================
   7. Kopf und Navigation (liegt immer auf einer Navy-Bühne)
   ===================================================================== */
.kopf { position: absolute; inset: 0 0 auto; z-index: 30; color: var(--weiss); }
.kopf-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 26px; flex-wrap: wrap; }
.logo img { width: clamp(150px, 13vw, 190px); height: auto; transition: width var(--d-ui) var(--ease); }
.kopf.fest { position: fixed; background: var(--navy-2); box-shadow: 0 12px 30px -18px rgba(0, 27, 61, 0.6); transform: translateY(0); transition: transform 320ms var(--ease); }
.kopf.fest .kopf-inner { padding-block: 10px; }
.kopf.fest .logo img { width: 140px; }
.kopf.fest.weg { transform: translateY(-110%); }
.zeitachse { transition: top 320ms var(--ease); }
.nav { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 36px); flex-wrap: wrap; }
.nav a:not(.btn) { font-weight: 700; font-size: var(--t-klein); text-decoration: none; padding-block: 6px; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size 320ms var(--ease); }
.nav a:not(.btn):hover, .nav a:not(.btn):focus-visible, .nav a[aria-current="page"] { background-size: 100% 2px; }
.nav .btn { min-height: 46px; padding: 10px 20px; }
.nav-toggle { display: none; }
.kopf-anfrage { display: none; }
@media (max-width: 999px) {
  .kopf.fest .kopf-anfrage { display: inline-flex; min-height: 44px; padding: 8px 14px; margin-left: auto; }
  .kopf.fest .kopf-inner { gap: 10px; }
  .kopf.fest .logo img { width: 118px; }
}
@media (max-width: 999px) and (max-height: 700px) { .buehne-foto { height: 28svh; } .buehne-seite .hinweis-rahmen { display: none; } .buehne-seite .buehne-inhalt { padding-bottom: calc(var(--naht-hoehe) + 12px); } .buehne-seite .buehne-titel, .buehne-start .buehne-titel { font-size: min(10.5vw, 7rem); } }
@media (max-width: 999px) {
  .js .nav-toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 8px 16px; font: 900 0.875rem var(--schrift); letter-spacing: 0.08em; text-transform: uppercase; color: var(--weiss); background: rgba(0, 42, 92, 0.55); border: 2px solid rgba(255, 255, 255, 0.75); border-radius: 0; cursor: pointer; }
  .js .nav { display: none; }
  .js .nav.offen { display: flex; }
  .nav { flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 20px 22px; background: var(--weiss); color: var(--anthrazit); box-shadow: var(--schatten-karte); }
  .nav a:not(.btn) { border-bottom: 1px solid var(--hellgrau); }
  .nav a[aria-current="page"] { color: var(--navy); }
  .nav .btn-weiss { --b: var(--navy); --f: var(--weiss); --b2: var(--dunkelgrau); --f2: var(--weiss); }
  .kopf .nav :focus-visible { outline-color: var(--navy); }
  .nav a:not(.btn) { font-size: 1.25rem; padding-block: 12px; background-image: none; }
  .nav .btn { margin-top: 12px; }
}

/* =====================================================================
   8. Bühne: Seitenanfang auf Navy. Varianten start (Startseite), seite (mit Foto), ruhig (ohne Foto)
   ===================================================================== */
.buehne { position: relative; isolation: isolate; overflow: clip; color: var(--weiss); background: var(--verlauf-navy-licht), var(--verlauf-navy); display: flex; flex-direction: column; }
.buehne-licht { position: absolute; inset: -20% -10% auto auto; width: 70vw; height: 70vw; z-index: 0; pointer-events: none; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 72%); }
.buehne-foto { position: relative; margin: 0; z-index: 0; height: clamp(280px, 44svh, 660px); overflow: hidden; background: var(--navy-2); }
.buehne-foto > picture { display: block; width: 100%; height: 100%; }
.buehne-foto img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fokus, 56% 18%); transform: scale(1.08); transform-origin: 50% 20%; }
.buehne-foto::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 42, 92, 0.9) 0%, rgba(0, 42, 92, 0.5) 14%, rgba(0, 42, 92, 0) 28%), linear-gradient(0deg, var(--navy-2) 0%, rgba(0, 42, 92, 0.85) 18%, rgba(0, 42, 92, 0) 46%);
}
.buehne-inhalt { position: relative; z-index: 3; display: flex; flex-direction: column; padding-bottom: calc(var(--band) + clamp(40px, 6vw, 72px)); }
.buehne-titel { margin-top: -0.95em; font-weight: 900; letter-spacing: var(--sperr-display); }
.buehne-titel .zeile { display: block; overflow: clip; padding: 0.04em 0.06em 0.12em 0; margin-bottom: -0.1em; }
.buehne-titel .w { display: inline-block; }
.buehne-titel .t { font-weight: 400; letter-spacing: -0.035em; }
.buehne-start .buehne-titel { font-size: var(--t-mega); line-height: 0.86; }
.buehne-seite .buehne-titel, .buehne-ruhig .buehne-titel { font-size: var(--t-seite); line-height: 0.88; }
@media (max-width: 999px) {
  .buehne-oben { display: flex; flex-direction: column; }
  .buehne-oben .cta-reihe { order: 1; margin-top: 22px; }
  .buehne-oben .lead { order: 2; }
  .buehne-oben .signatur { order: 3; }
  .buehne-titel { margin-top: -0.7em; }
}
@media (max-width: 999px) { .buehne-start .buehne-titel { font-size: min(12.4vw, 7.5rem); } .buehne-seite .buehne-titel { font-size: min(13vw, 6.5rem); } }
.buehne-oben { margin-top: clamp(28px, 5vw, 44px); max-width: 35rem; }
.buehne .lead { margin-top: 22px; color: var(--auf-dunkel-2); }
.buehne .cta-reihe { margin-top: 30px; }
.signatur { display: flex; align-items: center; gap: 14px; margin-top: 30px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.28); font-size: var(--t-klein); color: var(--auf-dunkel-2); }
.signatur strong { display: block; color: var(--weiss); font-weight: 900; }
.hinweis-rahmen { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 12px; border: 1px solid rgba(255, 255, 255, 0.4); background: rgba(0, 42, 92, 0.35); font-size: var(--t-label); font-weight: 900; letter-spacing: var(--sperr-label); text-transform: uppercase; }
.hinweis-rahmen .ic { width: 20px; height: 20px; }
.brotkrumen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: var(--t-klein); color: var(--auf-dunkel-3); }
.brotkrumen a { display: inline-block; padding-block: 10px; color: var(--auf-dunkel-2); text-decoration: none; }
.brotkrumen a:hover { color: var(--weiss); text-decoration: underline; }
.brotkrumen .trenner { color: var(--auf-dunkel-3); }

@media (min-width: 1000px) {
  .buehne-start { min-height: max(100svh, 780px); }
  .buehne-seite { min-height: max(78svh, 640px); }
  .buehne-start .buehne-foto, .buehne-seite .buehne-foto { position: absolute; inset: 0 0 0 auto; width: 58%; height: auto; }
  .buehne-seite .buehne-foto { width: 50%; }
  .buehne-foto::after {
    background: linear-gradient(90deg, var(--navy-2) 0%, rgba(0, 42, 92, 0.72) 24%, rgba(0, 42, 92, 0.28) 44%, rgba(0, 42, 92, 0) 60%), linear-gradient(180deg, rgba(0, 42, 92, 0.9) 0%, rgba(0, 42, 92, 0.55) 12%, rgba(0, 42, 92, 0) 26%), linear-gradient(0deg, rgba(0, 42, 92, 0.94) 0%, rgba(0, 42, 92, 0.6) 30%, rgba(0, 42, 92, 0) 52%);
  }
  .buehne-start .buehne-inhalt, .buehne-seite .buehne-inhalt { flex: 1; flex-direction: column-reverse; justify-content: space-between; padding-top: 136px; }
  .buehne-start .buehne-titel { margin-top: 48px; font-size: min(var(--t-mega), 15.5svh); }
  .buehne-seite .buehne-titel { margin-top: 32px; max-width: 9.5em; font-size: min(var(--t-seite), 10svh); }
  .buehne-seite .buehne-titel.titel-woerter-lang { font-size: min(var(--t-seite), 9.5svh); max-width: 11em; }
  .buehne-start .buehne-oben, .buehne-seite .buehne-oben { margin-top: 0; max-width: 33rem; }
}
@media (min-width: 1000px) and (max-height: 1000px) {
  .buehne-seite .buehne-inhalt { padding-top: 112px; padding-bottom: calc(var(--band) + 32px); }
  .buehne-seite .lead { margin-top: 14px; }
  .buehne-seite .cta-reihe { margin-top: 20px; }
  .buehne-start .signatur { display: none; }
  .buehne-start .buehne-inhalt { padding-top: 116px; padding-bottom: calc(var(--band) + 36px); }
  .buehne-start .buehne-titel { margin-top: 28px; }
}
/* Ruhige Bühne: Ratgeber, Rechtstexte, Danke. Kein Foto, Titel gross, Motiv schliesst ab. */
.buehne-ruhig { --mw: clamp(150px, 22vw, 400px); }
@media (max-width: 999px) { .buehne-seite .buehne-titel.titel-woerter-lang { font-size: min(9.4vw, 6.5rem); } }
.buehne-ruhig .buehne-inhalt { padding-top: clamp(120px, 14vw, 180px); }
.buehne-ruhig .buehne-titel { margin-top: var(--a-3); max-width: 12em; }
.buehne-ruhig .buehne-titel.titel-lang { font-size: clamp(2.2rem, 1rem + 4.2vw, 5.4rem); line-height: 0.98; letter-spacing: -0.035em; }
.buehne-ruhig .lead { max-width: 36em; }
/* Handy: Text endet über der Navy-Spitze der Naht */
@media (max-width: 759px) { .buehne-inhalt { padding-bottom: calc(var(--naht-hoehe) + 28px); } }

/* Auftritt der Bühne: reine CSS-Animation ab dem ersten Bild (kein Aufblitzen, keine Abhängigkeit von GSAP).
   fill-mode backwards: nach dem Ende gilt wieder der normale Zustand, die Parallaxe von GSAP greift. */
@media (prefers-reduced-motion: no-preference) {
  .buehne-foto { animation: tb-foto-auf 1.4s var(--ease-wechsel) backwards; }
  .buehne-foto img { animation: tb-foto-zoom 2.2s cubic-bezier(0.33, 1, 0.68, 1) backwards; }
  .buehne-titel .w { animation: tb-wort 1.3s var(--ease) backwards; animation-delay: 0.25s; }
  .buehne-titel .zeile:nth-child(1) .w:nth-child(2) { animation-delay: 0.32s; }
  .buehne-titel .zeile:nth-child(1) .w:nth-child(3) { animation-delay: 0.39s; }
  .buehne-titel .zeile:nth-child(2) .w { animation-delay: 0.39s; }
  .buehne-titel .zeile:nth-child(2) .w:nth-child(2) { animation-delay: 0.46s; }
  .buehne-titel .zeile:nth-child(2) .w:nth-child(3) { animation-delay: 0.53s; }
  .buehne-titel .zeile:nth-child(3) .w { animation-delay: 0.53s; }
  .buehne-titel .zeile:nth-child(3) .w:nth-child(n+2) { animation-delay: 0.6s; }
  .buehne > .naht .m-navy { animation: tb-hoch 1.4s var(--ease) 0.5s backwards; }
  .buehne-oben > *, .buehne-ruhig .buehne-inhalt > :not(.buehne-titel), .anfrage-seite .anfrage-raster > * { animation: tb-ein 1s var(--ease) 0.6s backwards; }
  .buehne-oben > :nth-child(2), .buehne-ruhig .buehne-inhalt > :nth-child(3) { animation-delay: 0.68s; }
  .buehne-oben > :nth-child(3), .buehne-ruhig .buehne-inhalt > :nth-child(4) { animation-delay: 0.76s; }
  .buehne-oben > :nth-child(n+4), .buehne-ruhig .buehne-inhalt > :nth-child(n+5) { animation-delay: 0.84s; }
  .buehne-ruhig .buehne-titel { animation: tb-ein 1.1s var(--ease) 0.2s backwards; }
}
@keyframes tb-foto-auf { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes tb-foto-zoom { from { transform: scale(1.3); } }
@keyframes tb-wort { from { transform: translateY(115%); } }
@keyframes tb-hoch { from { transform: translateY(100%); } }
@keyframes tb-ein { from { transform: translateY(28px); } }

/* =====================================================================
   9. Belege: Laufband, Zahlen, Nachweise
   ===================================================================== */
.laufband { margin-top: 18px; border-block: 2px solid var(--dunkelgrau); padding-block: clamp(14px, 1.6vw, 22px); overflow: clip; }
.dunkel .laufband { border-color: rgba(255, 255, 255, 0.9); }
.laufband-reihe { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2em 0.6em; padding-inline: var(--g); font-size: clamp(2rem, 0.8rem + 5vw, 6.4rem); font-weight: 900; letter-spacing: -0.035em; line-height: 1.05; }
.laufband-reihe .duenn { font-weight: 400; }
.laufband-ohne-rahmen { border: 0; padding: 0; }
.laufband-ohne-rahmen .laufband-reihe { font-size: clamp(1.6rem, 0.8rem + 3.4vw, 4.6rem); font-weight: 400; letter-spacing: -0.03em; line-height: 1.1; }
.laufband-ohne-rahmen .laufband-reihe > :nth-child(4n + 1) { font-weight: 900; }
.bewegt .laufband-reihe { flex-wrap: nowrap; white-space: nowrap; width: max-content; }

.zahlen { display: grid; gap: clamp(36px, 4vw, 56px); }
.zahl { position: relative; display: grid; border-top: 1px solid var(--hellgrau); padding-top: 22px; }
.zahl .ic { width: 44px; height: 44px; color: var(--navy); margin-bottom: 8px; }
.zahl-wert { display: flex; align-items: baseline; gap: 0.12em; color: var(--navy); line-height: 0.8; }
.zahl-wert .vor { font-size: clamp(1.5rem, 0.8rem + 2.4vw, 3.4rem); font-weight: 400; letter-spacing: -0.02em; color: var(--anthrazit); }
.zahl-wert .num { font-size: var(--t-zahl); font-weight: 900; letter-spacing: -0.06em; font-variant-numeric: tabular-nums; }
.zahl-wert .plus { font-size: var(--t-zahl); font-weight: 900; margin-left: -0.05em; }
.zahlen-dezimal .zahl-wert .num { font-size: clamp(3.6rem, 1.6rem + 5.4vw, 7.5rem); }
.anfrage-seite { padding-top: clamp(130px, 14vw, 190px); }
.zahl-text { margin-top: 16px; font-weight: 700; font-size: var(--t-body); max-width: 18em; }
@media (min-width: 900px) {
  .zahlen { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(32px, 4vw, 64px); align-items: start; }
  .zahlen-treppe .zahl:nth-child(2) { margin-top: clamp(48px, 6vw, 96px); }
  .zahlen-treppe .zahl:nth-child(3) { margin-top: clamp(96px, 12vw, 192px); }
}
.nachweise { display: grid; border-top: 2px solid var(--dunkelgrau); }
.nachweise li { display: flex; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--hellgrau); font-weight: 900; font-size: clamp(1.0625rem, 0.9rem + 0.5vw, 1.375rem); letter-spacing: -0.01em; }
.nachweise .ic { width: 32px; height: 32px; color: var(--navy); }
@media (min-width: 900px) { .nachweise { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(32px, 4vw, 64px); } .nachweise li { border-bottom: 0; } }

/* =====================================================================
   10. Ablauf: Proportion, Zeitachse, Akte, Kapitelwort, Fakten, Schritte, Wochen
   ===================================================================== */
.proportion { margin-top: clamp(56px, 7vw, 104px); --tag: clamp(8px, 0.9vw, 14px); }
.prop-kopf { display: flex; gap: 4px; align-items: flex-end; }
.prop-kopf .l { flex: 56 1 0; } .prop-kopf .r { flex: 84 1 0; }
.prop-kopf .mitte { flex: 0 0 var(--tag); display: flex; justify-content: center; }
.prop-tag-inner { display: grid; justify-items: center; gap: 6px; width: 160px; flex: none; margin-bottom: 10px; }
.prop-tag-inner .d { font-size: 0.875rem; color: var(--grau-666); font-weight: 700; white-space: nowrap; }
.prop-tag-inner::after { content: ""; width: 2px; height: 14px; background: var(--dunkelgrau); }
.prop-spur { display: flex; align-items: stretch; height: clamp(56px, 7vw, 104px); gap: 4px; }
.prop-seg { position: relative; overflow: hidden; }
.prop-seg i { position: absolute; inset: 0; transform-origin: 0 50%; }
.prop-1 { flex: 56 1 0; } .prop-1 i { background: linear-gradient(90deg, var(--hellgrau), rgba(187, 188, 187, 0.55)); }
.prop-2 { flex: 0 0 var(--tag); } .prop-2 i { background: var(--dunkelgrau); }
.prop-3 { flex: 84 1 0; } .prop-3 i { background: linear-gradient(90deg, var(--navy-3), var(--navy) 70%); }
.prop-namen { display: flex; gap: calc(8px + var(--tag)); margin-top: 16px; }
.prop-namen > div { display: grid; gap: 2px; }
.prop-namen .n { font-size: clamp(1.25rem, 0.9rem + 1.4vw, 2.25rem); font-weight: 900; letter-spacing: -0.02em; line-height: 1.1; }
.prop-namen .d { font-size: var(--t-klein); color: var(--grau-666); display: flex; align-items: center; gap: 8px; }
.prop-namen .d .ic { width: 18px; height: 18px; color: var(--navy); }
.pn-1 { flex: 56 1 0; } .pn-3 { flex: 84 1 0; }

.zeitachse { position: sticky; top: var(--kopf-oben, 0px); z-index: 25; overflow-x: clip; background: var(--weiss); border-bottom: 1px solid var(--hellgrau); --p: 0; }
.zeitachse-inner { padding-top: 10px; padding-bottom: 14px; }
.zeitachse ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.zeitachse a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 0 10px; text-decoration: none; color: var(--grau-666); transition: color 220ms var(--ease); }
.zeitachse a .ic { width: 22px; height: 22px; transition: transform var(--d-linie) var(--ease); }
.zeitachse a .label { color: inherit; letter-spacing: 0.14em; }
.zeitachse a .dauer { font-size: var(--t-klein); }
.zeitachse a[aria-current], .zeitachse a:hover { color: var(--navy); }
.zeitachse a[aria-current] .ic { transform: scale(1.18); }
.spur { position: relative; height: 4px; background: var(--grund); }
.spur-fuellung { position: absolute; inset: 0; background: linear-gradient(90deg, var(--dunkelgrau), var(--navy)); transform: scaleX(var(--p)); transform-origin: 0 50%; }
.spur i { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--hellgrau); }
.spur i:nth-of-type(1) { left: calc(100% / 3); } .spur i:nth-of-type(2) { left: calc(200% / 3); }
.marke-lauf { position: absolute; inset: 0; transform: translateX(calc(var(--p) * 100%)); pointer-events: none; }
.marke-lauf .tri-k { position: absolute; left: 0; top: 7px; width: 18.6px; transform: translateX(-50%); }
@media (max-width: 640px) {
  .zeitachse a { flex-direction: column; align-items: flex-start; gap: 2px; }
  .zeitachse a .ic { display: none; }
  .zeitachse a > span { display: grid; }
  .zeitachse a .label { font-size: var(--t-mini); letter-spacing: 0.1em; }
  .zeitachse a .dauer { font-size: 0.8125rem; }
}

.akt { position: relative; overflow: clip; }
.akt-kopf { position: relative; padding-top: var(--luft); }
.akt-dauer { display: flex; align-items: center; gap: 14px; }
.akt-dauer .ic { width: 28px; height: 28px; }
.kapitel-wort { display: block; font-size: var(--t-kap); font-weight: 900; line-height: 0.78; letter-spacing: -0.06em; white-space: nowrap; margin: clamp(18px, 2vw, 32px) 0 0 -0.04em; will-change: transform; }
.flaeche-hell .kapitel-wort, .flaeche-weiss .kapitel-wort { color: var(--navy); }
.akt-titel { display: block; margin-top: clamp(28px, 3.4vw, 56px); }
.akt-raster { padding-top: var(--a-5); padding-bottom: calc(var(--band) + clamp(72px, 9vw, 140px)); }

.fakten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--a-4); max-width: 40em; }
.fakten li { display: grid; gap: 10px; align-content: start; padding: 18px 18px 20px 0; border-top: 1px solid var(--hellgrau); font-weight: 900; font-size: var(--t-body); line-height: 1.25; }
.fakten .ic { width: 38px; height: 38px; color: var(--navy); }
.fakten li strong { font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem); letter-spacing: -0.02em; line-height: 1.1; }
.fakten li span { font-weight: 400; font-size: var(--t-klein); color: var(--grau-666); }
.dunkel .fakten li span { color: var(--auf-dunkel-2); }
.dunkel .fakten li { border-color: var(--linie-dunkel); }
.dunkel .fakten .ic { color: currentColor; }
@media (min-width: 1000px) { .fakten-vier { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; } }

.schritte { position: relative; margin-top: clamp(32px, 4vw, 56px); display: grid; }
.schritte::before, .schritte::after { content: ""; position: absolute; left: 27px; top: 28px; bottom: 28px; width: 2px; }
.schritte::before { background: var(--hellgrau); }
.schritte::after { background: var(--navy); transform-origin: 50% 0; transform: scaleY(var(--s, 1)); }
.schritt { position: relative; display: grid; grid-template-columns: 56px 1fr; column-gap: 22px; align-items: center; padding-block: 12px; }
.schritt .knopf { position: relative; z-index: 1; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--weiss); color: var(--navy); border: 2px solid var(--navy); }
.schritt .knopf .ic { width: 26px; height: 26px; }
.schritt .label { color: var(--grau-666); font-size: var(--t-mini); }
.schritt .wort { display: block; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem); font-weight: 900; letter-spacing: -0.025em; line-height: 1.05; }
.schritt .erklaerung { display: block; margin-top: 4px; font-size: var(--t-body); color: var(--grau-666); max-width: 30em; }
.dunkel .schritte::before { background: rgba(255, 255, 255, 0.18); }
.dunkel .schritte::after { background: var(--weiss); }
.dunkel .schritt .knopf { background: var(--navy-2); color: var(--weiss); border-color: rgba(255, 255, 255, 0.85); }
.dunkel .schritt .label { color: rgba(255, 255, 255, 0.78); }
.dunkel .schritt .erklaerung { color: var(--auf-dunkel-2); }

.wochen { margin-top: clamp(40px, 5vw, 64px); padding-inline: 18px; }
.wochen-kopf .gross { font-size: clamp(2.5rem, 1.4rem + 3.4vw, 5rem); font-weight: 900; letter-spacing: -0.05em; line-height: 0.9; color: var(--navy); }
.wochen-kopf .gross span { font-weight: 400; color: var(--anthrazit); font-size: 0.5em; letter-spacing: -0.02em; margin-left: 0.15em; }
.wochen-raster { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; margin-top: 20px; padding-top: 40px; }
.woche { position: relative; height: 44px; background: var(--grund); overflow: hidden; }
.woche i { position: absolute; inset: 0; background: linear-gradient(180deg, var(--navy), var(--navy-2)); transform-origin: 50% 100%; }
.woche b { position: absolute; left: 6px; bottom: 4px; z-index: 1; font-size: var(--t-mini); font-weight: 900; color: var(--weiss); }
.treffen { position: absolute; top: 0; width: 30px; height: 30px; margin-left: -15px; display: grid; place-items: center; border-radius: 50%; background: var(--weiss); border: 1.5px solid var(--navy); color: var(--navy); }
.treffen .ic { width: 16px; height: 16px; }
.treffen.ziel { background: var(--navy); color: var(--weiss); width: 36px; height: 36px; margin-left: -18px; top: -3px; }
.treffen.ziel .ic { width: 20px; height: 20px; }
.wochen-legende { display: grid; gap: 12px; margin-top: 22px; font-size: var(--t-klein); }
.wochen-legende li { display: flex; align-items: flex-start; gap: 12px; }
.wochen-legende .ic { width: 22px; height: 22px; color: var(--navy); margin-top: 1px; }
@media (min-width: 640px) { .wochen-legende { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; } }

/* =====================================================================
   11. Bilder: Diagonal-Reveal im Winkel des Dreiecks, Anschnitt, Überlagerung
   --r: 1 = sichtbar (Standard ohne JS). --fokus setzt den Bildausschnitt, Köpfe nie anschneiden.
   ===================================================================== */
.bild { position: relative; margin: 0; overflow: hidden; --r: 1; --d: 30%; clip-path: polygon(calc(var(--d) + 100% - var(--r) * (100% + var(--d))) 0, 100% 0, 100% 100%, calc(100% - var(--r) * (100% + var(--d))) 100%); }
.bild > picture { display: block; width: 100%; height: 100%; }
.bild img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fokus, 50% 30%); transform: scale(1.12); }
.bild .anschnitt { position: absolute; right: -1px; bottom: -1px; width: 24%; z-index: 2; }
.bild-hoch { aspect-ratio: 4 / 5; }
.bild-quer { aspect-ratio: 3 / 2; }
.bild-43 { aspect-ratio: 4 / 3; }
.bild-169 { aspect-ratio: 16 / 9; }
.bild-wrap { position: relative; }
.bild-ueber { position: relative; z-index: 3; width: 62%; margin: -18% 0 0 auto; box-shadow: var(--schatten-bild); }
.bild-ueber img { transform: none; }
.bild figcaption, .bildlegende { margin-top: 10px; font-size: var(--t-klein); color: var(--grau-666); }
.dunkel .bildlegende { color: var(--auf-dunkel-3); }

/* =====================================================================
   12. Stimmen und Zitate
   ===================================================================== */
.beleg { position: relative; margin-top: clamp(40px, 5vw, 64px); max-width: 34em; padding-top: 56px; }
.beleg > .ic { position: absolute; top: 0; left: 0; width: 40px; height: 40px; color: var(--navy); }
.beleg blockquote { font-size: clamp(1.1875rem, 1rem + 0.5vw, 1.4375rem); line-height: 1.5; font-weight: 300; font-style: italic; }
.beleg figcaption { margin-top: 16px; font-size: var(--t-klein); color: var(--grau-666); }
.beleg figcaption strong { font-weight: 900; color: var(--anthrazit); }
.dunkel .beleg > .ic { color: var(--hellgrau); }
.dunkel .beleg figcaption { color: var(--hellgrau); }
.dunkel .beleg figcaption strong { color: var(--weiss); }

.riesen-zitat { position: absolute; z-index: 0; right: var(--g); top: clamp(24px, 3vw, 48px); width: clamp(160px, 30vw, 460px); height: auto; color: var(--navy); opacity: 0.12; stroke-width: 0.6; }
@media (max-width: 899px) { .riesen-zitat { display: none; } }
.stimme-gross { position: relative; z-index: 1; margin-top: clamp(28px, 3vw, 44px); }
.stimme-gross blockquote { font-size: var(--t-zitat); font-weight: 400; line-height: 1.1; letter-spacing: -0.035em; max-width: 19em; text-wrap: pretty; }
.stimme-gross blockquote strong { font-weight: 900; color: var(--navy); }
.stimme figcaption { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-top: 22px; font-size: var(--t-klein); color: var(--grau-666); }
.stimme figcaption strong { color: var(--anthrazit); font-weight: 900; }
.stimmen-paar { position: relative; z-index: 1; display: grid; gap: 48px; margin-top: clamp(64px, 8vw, 112px); }
.stimmen-paar .stimme { border-top: 2px solid var(--dunkelgrau); padding-top: 26px; }
.stimmen-paar .stimme > .ic { width: 32px; height: 32px; color: var(--navy); }
.stimmen-paar blockquote { margin-top: 16px; font-size: clamp(1.1875rem, 1rem + 0.5vw, 1.4375rem); line-height: 1.5; }
@media (min-width: 900px) {
  .stimmen-paar { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--spalt); }
  .stimmen-paar .stimme:nth-child(even) { margin-top: 96px; }
}
/* Person: jede Stimme mit LinkedIn-Profilbild, quadratisch, ohne Filter */
.person { display: flex; align-items: center; gap: 14px; margin-top: 22px; font-size: var(--t-klein); line-height: 1.35; }
.stimme figcaption.person { flex-wrap: nowrap; gap: 14px; }
.person img { width: 56px; height: 56px; object-fit: cover; flex: none; background: var(--hellgrau); }
.person strong { display: block; font-weight: 900; color: var(--anthrazit); font-size: 1rem; }
.person span { color: var(--grau-666); }
.stimme-gross .person { margin-top: 30px; }
.stimme-gross .person img { width: 80px; height: 80px; }
.dunkel .person strong { color: var(--weiss); }
.dunkel .person span { color: var(--hellgrau); }
.beleg .person { margin-top: 18px; }
.stimmen-drei { position: relative; z-index: 1; display: grid; gap: 48px; margin-top: var(--a-5); }
.stimmen-drei .stimme { border-top: 2px solid var(--dunkelgrau); padding-top: 26px; display: flex; flex-direction: column; }
.stimmen-drei .stimme > .ic { width: 32px; height: 32px; color: var(--navy); }
.stimmen-drei blockquote { margin-top: 16px; font-size: var(--t-gross); line-height: 1.5; }
.stimmen-drei .person { margin-top: auto; padding-top: 22px; }
@media (min-width: 900px) { .stimmen-drei { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(32px, 4vw, 64px); } }
.quelle { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; margin-top: 56px; color: var(--grau-666); font-size: var(--t-klein); }
.quelle .ic { width: 22px; height: 22px; color: var(--navy); }
.quelle a { color: var(--navy); font-weight: 700; }
.branchen { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 32px; margin-top: 18px; font-weight: 900; font-size: var(--t-body); }
.branchen .label { color: var(--grau-666); flex-basis: 100%; margin-bottom: 4px; }
.branchen li:not(.label) { display: inline-flex; align-items: center; gap: 10px; }


/* =====================================================================
   13. Angebot (überlagernde Karte, z. B. Offsite-Planer) und Abschluss-Bühne
   ===================================================================== */
.angebot { position: relative; z-index: 3; margin-top: -64px; margin-left: clamp(0px, 4vw, 48px); padding: clamp(24px, 3vw, 40px); max-width: 30em; background: var(--weiss); color: var(--anthrazit); box-shadow: var(--schatten-karte); }
.angebot-kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.angebot .label { color: var(--navy); }
.angebot-kopf .ic { width: 40px; height: 40px; color: var(--navy); }
.angebot-titel { display: block; margin-top: 14px; font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1.02; }
.angebot p { margin-top: 12px; color: var(--grau-666); }
.angebot .btn { margin-top: 22px; }
@media (min-width: 1000px) { .angebot-links { margin-left: -18%; } }
.flaeche-grund .angebot, .flaeche-weiss .angebot { box-shadow: 0 30px 60px -24px rgba(0, 27, 61, 0.28); }

/* Themen: Inhalte mit Symbol, Titel und Text im Raster (statt Karten) */
.themen { display: grid; gap: var(--a-4); }
.themen > li { display: grid; gap: 12px; align-content: start; padding-top: 22px; border-top: 2px solid var(--dunkelgrau); }
.themen .ic { width: 40px; height: 40px; color: var(--navy); }
.themen h3 { font-size: var(--t-h4); line-height: 1.1; letter-spacing: -0.025em; }
.themen p, .themen li li { color: var(--grau-666); }
.themen ul { display: grid; gap: 6px; }
.themen .label { color: var(--grau-666); }
.dunkel .themen > li { border-color: rgba(255, 255, 255, 0.9); }
.dunkel .themen .ic { color: var(--weiss); }
.dunkel .themen p, .dunkel .themen li li { color: var(--auf-dunkel-2); }
.dunkel .themen .label { color: var(--hellgrau); }
@media (min-width: 700px) { .themen { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 4vw, 64px); } }
@media (min-width: 1000px) { .themen-drei { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Abschluss: kurze Navy-Bühne mit Titel und Button, wo kein Formular steht */
.abschluss { position: relative; overflow: clip; padding-block: var(--a-6); background: radial-gradient(60% 70% at 0% 100%, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 70%), radial-gradient(110% 90% at 100% 0%, var(--navy) 0%, var(--navy-2) 100%); }
.abschluss .titel { font-size: clamp(2.4rem, 1rem + 4.6vw, 6rem); line-height: 0.92; letter-spacing: -0.045em; max-width: 12em; }
.abschluss .lead { margin-top: var(--a-3); }

/* =====================================================================
   14. Keynote-Liste (Zeilen statt Karten)
   ===================================================================== */
.zeilen { border-top: 2px solid var(--dunkelgrau); }
.dunkel .zeilen { border-color: rgba(255, 255, 255, 0.9); }
.zeile-eintrag { position: relative; isolation: isolate; display: grid; grid-template-columns: 56px 1fr; column-gap: 20px; row-gap: 8px; padding: 28px 0 32px; border-bottom: 1px solid var(--hellgrau); text-decoration: none; }
.dunkel .zeile-eintrag { border-color: rgba(255, 255, 255, 0.2); }
.zeile-eintrag::before { content: ""; position: absolute; inset: 0 calc(-1 * var(--g)); z-index: -1; background: linear-gradient(90deg, var(--navy), var(--navy-2)); transform: scaleY(0); transform-origin: 50% 100%; transition: transform var(--d-flaeche) var(--ease); }
a.zeile-eintrag:hover::before, a.zeile-eintrag:focus-visible::before { transform: scaleY(1); }
a.zeile-eintrag:hover, a.zeile-eintrag:focus-visible { color: var(--weiss); }
.zeile-eintrag .ic-box { grid-row: 1 / span 3; width: 56px; height: 56px; display: grid; place-items: center; border: 1.5px solid currentColor; border-radius: 50%; transition: transform var(--d-flaeche) var(--ease), background-color 320ms var(--ease), color 320ms var(--ease); }
a.zeile-eintrag:hover .ic-box { transform: scale(1.08); background: var(--weiss); color: var(--navy); border-color: var(--weiss); }
.zeile-eintrag .ic-box .ic { width: 26px; height: 26px; }
.zeile-eintrag .label { color: var(--grau-666); transition: color var(--d-ui) var(--ease); }
.dunkel .zeile-eintrag .label, a.zeile-eintrag:hover .label { color: var(--hellgrau); }
.zeile-eintrag h3 { font-size: clamp(1.75rem, 1.1rem + 2.2vw, 3.4rem); letter-spacing: -0.035em; line-height: 1; }
.zeile-eintrag p { max-width: 38em; color: var(--grau-666); transition: color var(--d-ui) var(--ease); }
.dunkel .zeile-eintrag p, a.zeile-eintrag:hover p { color: var(--auf-dunkel-2); }
@media (min-width: 1000px) {
  .zeile-eintrag { grid-template-columns: 72px minmax(0, 1.25fr) minmax(0, 1fr); column-gap: 36px; align-items: center; }
  .zeile-eintrag .ic-box { grid-row: 1 / span 2; width: 64px; height: 64px; }
  .zeile-eintrag .label, .zeile-eintrag h3 { grid-column: 2; }
  .zeile-eintrag p { grid-column: 3; grid-row: 1 / span 2; }
}

/* =====================================================================
   15. Häufige Fragen
   ===================================================================== */
.faq { max-width: 56rem; border-top: 2px solid var(--dunkelgrau); }
.faq details { border-bottom: 1px solid var(--hellgrau); }
.faq summary { position: relative; display: block; cursor: pointer; list-style: none; padding: 24px 64px 24px 0; font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem); font-weight: 900; letter-spacing: -0.015em; line-height: 1.3; transition: color var(--d-ui) var(--ease); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--navy); }
.faq summary::before, .faq summary::after { content: ""; position: absolute; right: 12px; top: 50%; width: 22px; height: 2px; background: var(--navy); transition: transform var(--d-linie) var(--ease); }
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0deg); }
.faq details > :not(summary) { padding-bottom: 26px; max-width: var(--max-text); color: var(--anthrazit); }
.faq details > :not(summary) + :not(summary) { margin-top: -12px; }

/* =====================================================================
   16. Ratgeber: Artikel-Liste, Artikel-Kopf, Autor
   ===================================================================== */
.artikel-liste { display: grid; gap: clamp(48px, 6vw, 80px) var(--a-4); }
@media (min-width: 700px) { .artikel-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .artikel-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } .artikel-liste .artikel-erster { grid-column: 1 / -1; } }
.artikel { display: grid; gap: 14px; align-content: start; text-decoration: none; color: inherit; }
.artikel .bild { aspect-ratio: 16 / 9; }
.artikel .bild img { transition: transform 900ms var(--ease); }
.artikel:hover .bild img { transform: scale(1.16); }
.artikel .label { color: var(--grau-666); }
.artikel-titel { font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.875rem); font-weight: 900; letter-spacing: -0.025em; line-height: 1.12; text-wrap: balance; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size var(--d-linie) var(--ease); }
.artikel:hover .artikel-titel, .artikel:focus-visible .artikel-titel { background-size: 100% 2px; }
.artikel-liste-kompakt { gap: 0 var(--a-4); }
.artikel-liste-kompakt .artikel { padding-block: 18px 22px; border-top: 1px solid var(--hellgrau); }
.artikel-liste-kompakt .artikel-titel { font-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem); }
.artikel-text { color: var(--grau-666); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 1100px) {
  .artikel-erster { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: var(--spalt); align-items: center; }
  .artikel-erster .bild { grid-row: 1 / span 5; }
  .artikel-erster .artikel-titel { font-size: clamp(2rem, 1.2rem + 1.8vw, 3.4rem); }
}
.artikel-rumpf { max-width: 52rem; margin-inline: auto; padding-block: var(--a-6) var(--luft); }
.artikel-rumpf .prosa { max-width: none; }
.artikel-titelbild { margin-bottom: var(--a-5); }
.artikel-titelbild .bild { aspect-ratio: 16 / 9; }
.artikel-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: var(--a-3); font-size: var(--t-klein); color: var(--auf-dunkel-2); }
.artikel-meta span { display: inline; }
.artikel-meta .ic { width: 18px; height: 18px; margin-right: 8px; vertical-align: -3px; }
.autor { display: grid; grid-template-columns: 96px 1fr; gap: 20px 24px; align-items: center; max-width: var(--max-text); margin-top: var(--a-5); padding-top: var(--a-3); border-top: 2px solid var(--dunkelgrau); }
.autor .bild { aspect-ratio: 1; }
.autor strong { display: block; font-size: 1.25rem; font-weight: 900; }
.autor p { margin-top: 4px; color: var(--grau-666); font-size: var(--t-klein); }

/* =====================================================================
   17. Verlauf (Werdegang, Über uns)
   ===================================================================== */
.verlauf { position: relative; display: grid; gap: var(--a-4); padding-left: 40px; }
.verlauf::before { content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 2px; background: var(--hellgrau); }
.verlauf li { position: relative; display: grid; gap: 6px; }
.verlauf li::before { content: ""; position: absolute; left: -39px; top: 0.15em; width: 16px; height: 16px; border-radius: 50%; background: var(--weiss); border: 2px solid var(--navy); }
.verlauf li:first-child::before { background: var(--navy); }
.verlauf .zeit { font-size: var(--t-label); font-weight: 900; letter-spacing: var(--sperr-label); text-transform: uppercase; color: var(--grau-666); }
.verlauf strong { font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem); font-weight: 900; letter-spacing: -0.02em; line-height: 1.15; }
.verlauf p { color: var(--anthrazit); max-width: 36em; }

/* =====================================================================
   18. Download
   ===================================================================== */
.download { display: grid; gap: var(--a-5); }
.download-cover { position: relative; justify-self: start; width: min(320px, 70vw); }
.download-cover img { width: 100%; box-shadow: var(--schatten-bild); }
.download-cover .kante { --kante: 1.25; }
@media (min-width: 1000px) { .download { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr); column-gap: var(--spalt); align-items: start; } }

/* =====================================================================
   19. Anfrage und Formular
   ===================================================================== */
.anfrage { position: relative; overflow: clip; padding-block: var(--luft); background: radial-gradient(60% 70% at 0% 100%, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 70%), radial-gradient(110% 90% at 100% 0%, var(--navy) 0%, var(--navy-2) 100%); }
.anfrage-raster { position: relative; z-index: 2; display: grid; gap: 56px; }
.anfrage .titel { font-size: clamp(2.8rem, 0.9rem + 6.4vw, 8.2rem); line-height: 0.9; letter-spacing: -0.05em; }
.anfrage .lead { margin-top: 30px; max-width: 26em; color: rgba(255, 255, 255, 0.9); }
@media (min-width: 1000px) { .anfrage-raster { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr); column-gap: var(--spalt); align-items: start; } }
.kontaktdaten { font-style: normal; display: grid; gap: 4px; margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.3); }
.kontaktdaten > * { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; justify-self: start; }
.kontaktdaten .ic { width: 24px; height: 24px; }
.kontaktdaten span { color: var(--auf-dunkel-2); }
.kontaktdaten a { font-weight: 900; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 90% / 0 2px no-repeat; transition: background-size 320ms var(--ease); }
.kontaktdaten a:hover, .kontaktdaten a:focus-visible { background-size: 100% 2px; }

.formular { position: relative; display: grid; gap: 18px; padding: clamp(24px, 3.4vw, 52px); background: var(--weiss); color: var(--anthrazit); box-shadow: var(--schatten-formular); }
.flaeche-grund .formular, .flaeche-weiss .formular { box-shadow: 0 40px 80px -40px rgba(0, 27, 61, 0.3); }
.formular-kopf { display: flex; align-items: center; gap: 12px; color: var(--navy); }
.feld { display: grid; gap: 6px; align-content: start; }
.feld label { font-weight: 700; font-size: var(--t-klein); }
.feld label span { font-weight: 400; color: var(--grau-666); }
.feld input, .feld select, .feld textarea { width: 100%; min-height: 52px; padding: 13px 14px; font: 400 1rem/1.4 var(--schrift); color: var(--anthrazit); background: var(--grund); border: 1px solid var(--hellgrau); border-bottom: 2px solid var(--dunkelgrau); border-radius: 0; caret-color: var(--navy); transition: border-color var(--d-schnell) var(--ease), background-color var(--d-schnell) var(--ease); }
.feld input::placeholder, .feld textarea::placeholder { color: var(--grau-666); }
.feld select { appearance: none; padding-right: 44px; background-image: linear-gradient(45deg, transparent 50%, var(--anthrazit) 50%), linear-gradient(135deg, var(--anthrazit) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.feld textarea { resize: vertical; min-height: 140px; }
.feld input:hover, .feld select:hover, .feld textarea:hover { background-color: var(--weiss); }
.feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible { outline: 3px solid var(--navy); outline-offset: 0; border-bottom-color: var(--navy); background-color: var(--weiss); }
.feld.ungueltig input, .feld.ungueltig textarea, .feld.ungueltig select { border-bottom-color: var(--fehler); background-color: var(--weiss); }
.feld-fehler { display: flex; align-items: center; gap: 8px; margin-top: 2px; font-size: 0.875rem; font-weight: 700; color: var(--fehler); }
.feld-fehler::before { content: "!"; display: grid; place-items: center; width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--fehler); color: var(--weiss); font-size: 0.75rem; font-weight: 900; line-height: 1; }
.formular-fehler { padding: 14px 16px; border-top: 2px solid var(--fehler); background: #fbefee; color: #8c1d18; font-size: var(--t-klein); font-weight: 700; }
.zwei-felder { display: grid; gap: 18px; }
@media (min-width: 640px) { .zwei-felder { grid-template-columns: 1fr 1fr; } }
.hinweis { font-size: 0.875rem; color: var(--grau-666); }
.hinweis a { color: var(--navy); }
.formular .btn { justify-self: start; }

/* =====================================================================
   20. Fuss: hell, Motiv mit Echos schliesst jede Seite
   ===================================================================== */
.fuss { position: relative; background: var(--grund); padding-top: clamp(64px, 8vw, 112px); --mw: clamp(170px, 30vw, 540px); overflow: clip; }
.fuss-raster { display: grid; gap: 32px; padding-bottom: 48px; }
.fuss-raster img { width: 170px; }
.fuss address { margin-top: 18px; font-style: normal; color: var(--grau-666); font-size: var(--t-klein); line-height: 1.7; }
.fuss address a { display: inline-block; padding-block: 10px; margin-block: -10px; color: var(--anthrazit); text-decoration: none; }
.fuss address a:hover { text-decoration: underline; }
.fuss nav ul { display: grid; gap: 2px; }
.fuss nav a { display: inline-block; padding-block: 12px; font-weight: 700; font-size: var(--t-klein); text-decoration: none; }
.fuss nav a:hover { color: var(--navy); text-decoration: underline; }
.fuss .naht { margin-top: 0; }
@media (min-width: 760px) {
  .fuss-raster { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) minmax(0, 0.8fr); padding-right: calc(var(--mw) * 0.5); }
  .fuss .naht { margin-top: calc(var(--naht-hoehe) * -1 + 16px); }
}

/* =====================================================================
   21. Reduzierte Bewegung und Druck
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .bild img, .buehne-foto img { transform: none; }
}
@media print {
  .kopf, .naht, .kante, .zeitachse, .fuss .naht, .formular { display: none !important; }
  .buehne, .dunkel, .flaeche-navy, .flaeche-dunkel, .flaeche-dunkel-navy, .anfrage { background: none !important; color: #000 !important; }
  body { background: #fff; }
}

/* Beleg unter den Buttons eines Teasers (z. B. Bewertung im Keynote-Teaser der Startseite) */
.teaser-beleg { flex-basis: 100%; display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: var(--t-klein); }
.teaser-beleg .ic { width: 20px; height: 20px; flex: none; }
.teaser-beleg strong { font-weight: 900; }

/* Geschäftspartnerin (Über uns, LEGO Serious Play, Offsites) */
.partnerin { display: grid; gap: 28px; align-items: center; max-width: 60rem; }
.partnerin-foto { margin: 0; width: min(60vw, 260px); aspect-ratio: 1; overflow: hidden; }
.partnerin-foto picture, .partnerin-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.partnerin-firma { margin-top: 6px; font-weight: 700; }
.partnerin .text { margin-top: var(--a-3); max-width: 38em; }
.partnerin .cta-reihe { gap: 12px 32px; }
@media (min-width: 760px) { .partnerin { grid-template-columns: 260px minmax(0, 1fr); gap: 48px; } }

/* Bühnenfoto läuft weich in den Bühnenverlauf aus (Maske statt Navy-Fläche, damit keine Kante entsteht) */
.buehne-foto { background: none; -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 100%); mask-image: linear-gradient(180deg, #000 58%, transparent 100%); }
@media (min-width: 1000px) {
  .buehne-foto {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%), linear-gradient(180deg, #000 72%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0%, #000 42%), linear-gradient(180deg, #000 72%, transparent 100%);
    mask-composite: intersect;
  }
}

/* Blog: Themen-Tags auf den Karten und Filter über der Liste */
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-flex; align-items: center; padding: 4px 10px; border: 1px solid var(--hellgrau); background: var(--weiss); color: var(--anthrazit); font: inherit; font-size: var(--t-label); font-weight: 700; letter-spacing: 0.02em; line-height: 1.4; }
.tag-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--a-3); }
.tag-filter .tag { min-height: 40px; padding: 8px 14px; cursor: pointer; transition: background var(--d-schnell, 160ms), color var(--d-schnell, 160ms), border-color var(--d-schnell, 160ms); }
.tag-filter .tag:hover { border-color: var(--navy); color: var(--navy); }
.tag-filter .tag.aktiv { background: var(--navy); border-color: var(--navy); color: var(--weiss); }
.artikel[hidden] { display: none; }

/* Mockup im Fliesstext eines Artikels: klein, rechts eingebettet */
.artikel-mockup { float: right; width: min(34%, 180px); margin: 4px 0 16px 28px; }
.artikel-mockup img { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 24px rgba(0, 42, 92, 0.18)); }
.artikel-mockup figcaption { margin-top: 10px; font-size: var(--t-klein); font-weight: 700; }
.prosa h2 { clear: both; }

/* Belegzeile in der Bühne: Zahlen im ersten Bildschirm, unter den Buttons */
.belegzeile { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 20px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.28); font-size: var(--t-klein); line-height: 1.4; color: var(--auf-dunkel-2); }
.belegzeile span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.belegzeile strong { color: var(--weiss); font-weight: 900; }
.belegzeile .ic { width: 17px; height: 17px; flex: none; }
@media (max-width: 999px) { .buehne-oben .belegzeile { order: 1; } }
@media (min-width: 1000px) {
  .buehne-oben .belegzeile { margin-top: 16px; padding-top: 12px; gap: 6px 16px; max-width: 36rem; }
  .buehne-start .buehne-oben { max-width: 36rem; }
  .buehne-start .buehne-titel { margin-top: 32px; }
}
@media (min-width: 1000px) { .buehne-oben .belegzeile { width: max-content; max-width: none; flex-wrap: nowrap; } }

/* Angebotskasten mit Buch-Mockup (Offsite-Planer) */
.angebot-buch { float: right; width: clamp(84px, 22%, 120px); height: auto; margin: -8px -4px 12px 20px; filter: drop-shadow(0 16px 20px rgba(0, 42, 92, 0.22)); }
.angebot .btn { clear: both; }
@media (max-width: 759px) { .buehne-titel { hyphens: auto; -webkit-hyphens: auto; } }

/* Feedback Michi (11.10.2026) */
/* Titelzeilen: gleicher Abstand zwischen und innerhalb der Zeilen (Polster und Gegenrand heben sich auf) */
.buehne-titel .zeile { margin-bottom: -0.16em; }
/* Über uns, Handy: "zum" steht nicht allein */
@media (max-width: 999px) { .buehne-seite .buehne-titel.titel-woerter-lang { font-size: min(8.2vw, 6.5rem); } }
/* Handy: Hinweis in der Bühne ist ein Etikett, kein Button */
@media (max-width: 999px) { .buehne .hinweis-rahmen { padding: 0; border: 0; background: none; } }
/* Schritte: Linie immer hinter den Kreisen, auch während der Animation; Text optisch mittig zum Kreis */
.schritte::before, .schritte::after { z-index: 0; }
.schritt { z-index: 1; }
.schritt > span:last-child { position: relative; top: -4px; }
/* Wochenbalken: Zahlen mittig */
.woche b { left: 0; right: 0; text-align: center; }
/* Bewertung nicht umbrechen */
.teaser-beleg strong, .belegzeile strong { white-space: nowrap; }
/* Blog-Karten: kein abgeschnittener Anrisstext */
.artikel-text { display: none; }
/* Fusszeile: Logo bündig mit dem Text, gleiche Zeilenabstände in der Adresse */
.fuss-raster img { margin-left: -6px; }
.fuss address span, .fuss address a { display: block; width: fit-content; padding-block: 0; margin-block: 0; }
/* Geschäftspartnerin im Teambeschleuniger-Bildlayout: Hochformat, Dreieck an der rechten Kante */
.partnerin { align-items: end; }
.partnerin-bild { width: min(70vw, 300px); margin-top: 72px; --kante: 1.3; }
.partnerin-foto { display: none; }
@media (min-width: 760px) { .partnerin { grid-template-columns: 300px minmax(0, 1fr); } }
/* Fakten auf schmalen Handys: Titel auf einer Zeile */
@media (max-width: 479px) { .fakten li strong { font-size: 1.0625rem; letter-spacing: -0.01em; } .fakten li { padding-right: 10px; } }

/* Feedback Michi Teil 2 (11.10.2026) */
.zahl-wert .num + .vor { margin-left: 0.14em; }
.branchen { display: block; font-weight: 400; }
.branchen .label { display: block; margin-bottom: 8px; }
.branchen li:not(.label) { display: inline; }
.branchen li:not(.label):not(:last-child)::after { content: ", "; }