/* Fitz Media AG, Website-Entwurf. Gestaltung und Begründung: docs/design.md */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-wdth-wght.woff2") format("woff2");
  font-weight: 400 850;
  font-stretch: 100% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-latin-wght.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
}
/* Ersatzflächen mit angeglichener Metrik gegen Layout-Sprünge beim Nachladen */
@font-face {
  font-family: "Archivo Ersatz";
  src: local("Arial"), local("Liberation Sans"), local("Helvetica");
  size-adjust: 108%;
  ascent-override: 84%;
  descent-override: 22%;
}
@font-face {
  font-family: "Serif Ersatz";
  src: local("Georgia"), local("Liberation Serif"), local("Times New Roman");
  size-adjust: 98%;
  ascent-override: 94%;
  descent-override: 30%;
}

:root {
  /* Farben: Herkunft in docs/design.md */
  --papier: #F4F5F7;
  --weiss: #FFFFFF;
  --tinte: #0E1116;
  --grau: #4A515C;
  --linie: #CDD2D9;
  --linie-stark: #8A919C;
  --rot: #E3202F;
  --rot-tief: #C4121F;
  --rot-text: #B3101C;
  --regie: #0E1116;
  --regie-2: #1A1F27;
  --regie-text: #F4F5F7;
  --regie-grau: #A3AAB5;
  --regie-linie: #343B46;
  --rot-auf-dunkel: #FF6B6B;
  /* WhatsApp-Grün, so weit abgedunkelt, dass das weiße Symbol 5,4:1 erreicht */
  --wa-gruen: #167A3C;
  --wa-gruen-tief: #15703A;

  --schrift-marke: "Archivo", "Archivo Ersatz", sans-serif;
  --schrift-text: "Source Serif 4", "Serif Ersatz", serif;

  /* Abstände mit Sprüngen: eng für Daten, weit für Aussagen */
  --a-1: .25rem; --a-2: .5rem; --a-3: .75rem; --a-4: 1.25rem; --a-5: 2rem;
  --a-6: 3.25rem; --a-7: 5.25rem; --a-8: 8.5rem;
  --rand: clamp(1rem, 4.5vw, 5rem);
  --breite: 84rem;

  /* Radien: 0 für Flächen und Cover, 3px für Bedienelemente, 50% nur für den Aufnahme-Punkt */
  --r-bedien: 3px;

  --kurve: cubic-bezier(.16, 1, .3, 1);
  --dauer: 180ms;
  --kopf-hoehe: 4.25rem;
  /* Fester WhatsApp-Knopf: Tippziel, Randabstand und der Platz, den der Fuß darunter freihält */
  --wa-groesse: 3.5rem;
  --wa-rand: clamp(1rem, 2.4vw, 1.5rem);
  --wa-platz: calc(var(--wa-groesse) + var(--wa-rand) + env(safe-area-inset-bottom, 0px));
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: none; text-size-adjust: none; scroll-padding-top: calc(var(--kopf-hoehe) + 1rem); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  min-height: 100vh;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 60rem) { body { font-size: 1.125rem; } }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
p, li, dd { text-wrap: pretty; hyphens: auto; -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 4; hyphenate-limit-chars: 12 5 5; }
.lead, .lead p, .klein, .kanal__text, .ablauf p, .verzeichnis__satz { hyphens: manual; }

::selection { background: var(--tinte); color: var(--weiss); }
:focus-visible { outline: 2px solid var(--rot-tief); outline-offset: 3px; border-radius: 1px; }
.dunkel :focus-visible, .fuss :focus-visible { outline-color: var(--rot-auf-dunkel); }
html { scrollbar-color: var(--linie-stark) var(--papier); accent-color: var(--rot-tief); caret-color: var(--rot-tief); }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { text-decoration-thickness: 2px; }

h1, h2, h3, .marke-schrift {
  font-family: var(--schrift-marke);
  line-height: 1.04;
  text-wrap: balance;
  hyphens: manual;
  font-variant-numeric: lining-nums;
}
h1 {
  font-size: clamp(2.125rem, 1rem + 5.2vw, 5.5rem);
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: -.028em;
}
@media (min-width: 48rem) { h1 { font-stretch: 125%; } }
h2 {
  font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3.25rem);
  font-weight: 750;
  font-stretch: 112%;
  letter-spacing: -.02em;
}
h3 {
  font-size: clamp(1.1875rem, 1rem + .6vw, 1.5rem);
  font-weight: 680;
  font-stretch: 106%;
  letter-spacing: -.01em;
  line-height: 1.15;
}

.lead { font-size: clamp(1.1875rem, 1.05rem + .55vw, 1.5rem); line-height: 1.5; max-width: 38ch; }
.text { max-width: 64ch; }
.text > * + * { margin-top: 1em; }
.klein { font-family: var(--schrift-marke); font-size: .9375rem; line-height: 1.45; }
.ueberzeile {
  display: block;
  font-family: var(--schrift-marke);
  font-size: clamp(.9375rem, .88rem + .25vw, 1.0625rem);
  font-weight: 600;
  font-stretch: 100%;
  letter-spacing: 0;
  line-height: 1.3;
  color: var(--grau);
  margin-bottom: var(--a-4);
}

.wrap { width: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto; }
.skip-link {
  position: absolute; left: var(--a-3); top: -4rem; z-index: 100;
  background: var(--tinte); color: var(--weiss); padding: var(--a-3) var(--a-4);
  font-family: var(--schrift-marke); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: var(--a-3); }

/* Platzhalter: sichtbar als fehlende Angabe gekennzeichnet */
.platzhalter {
  background: transparent;
  color: var(--grau);
  font-family: var(--schrift-marke);
  font-size: .92em;
  font-weight: 500;
  padding: 0 .3em;
  border: 1px dashed var(--linie-stark);
  border-radius: var(--r-bedien);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  hyphens: manual;
}
.dunkel .platzhalter, .fuss .platzhalter { color: var(--regie-grau); border-color: #6B7380; }

/* Icons: Lucide (ISC) */
.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* Bedienelemente */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 3rem; padding: .7rem 1.35rem;
  font-family: var(--schrift-marke); font-size: 1rem; font-weight: 650; font-stretch: 104%; line-height: 1.2;
  color: var(--weiss); background: var(--rot);
  border: 1px solid var(--rot); border-radius: var(--r-bedien);
  text-decoration: none; cursor: pointer;
  transition: background-color var(--dauer) var(--kurve), border-color var(--dauer) var(--kurve), color var(--dauer) var(--kurve);
}
.btn:hover { background: var(--rot-tief); border-color: var(--rot-tief); }
.btn:active { transform: translateY(1px); }
.btn--rahmen { background: transparent; color: var(--tinte); border-color: var(--tinte); }
.btn--rahmen:hover { background: var(--tinte); border-color: var(--tinte); color: var(--weiss); }
.dunkel .btn--rahmen { color: var(--regie-text); border-color: var(--regie-text); }
.dunkel .btn--rahmen:hover { background: var(--regie-text); color: var(--tinte); }
.textlink {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  font-family: var(--schrift-marke); font-weight: 600; font-size: 1rem;
  text-decoration: underline; text-decoration-color: var(--rot); text-decoration-thickness: 2px; text-underline-offset: .3em;
}
.textlink:hover { text-decoration-thickness: 3px; }
.aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-3) var(--a-5); }

/* Kopf */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: var(--papier);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dauer) var(--kurve);
}
.kopf[data-gescrollt="true"] { border-bottom-color: var(--linie); }
.kopf__innen { display: flex; align-items: center; gap: var(--a-5); min-height: var(--kopf-hoehe); }
.marke { display: inline-flex; align-items: center; min-height: 2.75rem; margin-right: auto; }
.marke img { width: auto; height: 2.5rem; }
.nav ul { display: flex; gap: var(--a-1); list-style: none; padding: 0; }
.nav a {
  display: flex; align-items: center; min-height: 2.75rem; padding: 0 .7rem;
  font-family: var(--schrift-marke); font-size: .96875rem; font-weight: 560; text-decoration: none;
  border-radius: var(--r-bedien);
}
.nav a:hover { text-decoration: underline; text-decoration-color: var(--rot); text-decoration-thickness: 2px; text-underline-offset: .45em; }
.nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .45em; }
.kopf__cta { padding-inline: 1.1rem; }
.nav-knopf {
  display: none; align-items: center; gap: .55rem; min-height: 2.75rem; padding: 0 .85rem;
  background: transparent; border: 1px solid var(--tinte); border-radius: var(--r-bedien);
  font-family: var(--schrift-marke); font-weight: 600; font-size: 1rem; cursor: pointer;
}
.nav-knopf__striche { position: relative; width: 1.125rem; height: 10px; }
.nav-knopf__striche::before, .nav-knopf__striche::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor;
  transition: transform var(--dauer) var(--kurve), top var(--dauer) var(--kurve);
}
.nav-knopf__striche::before { top: 0; }
.nav-knopf__striche::after { top: 8px; }
.kopf[data-offen="true"] .nav-knopf__striche::before { top: 4px; transform: rotate(45deg); }
.kopf[data-offen="true"] .nav-knopf__striche::after { top: 4px; transform: rotate(-45deg); }
.nav__cta-mobil { display: none; }

@media (max-width: 61.99rem) {
  .nav-knopf { display: inline-flex; }
  .kopf__cta { display: none; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--papier); border-bottom: 1px solid var(--linie);
    padding: var(--a-2) var(--rand) var(--a-5);
    display: none;
  }
  .kopf[data-offen="true"] .nav { display: block; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav li + li { border-top: 1px solid var(--linie); }
  .nav a { min-height: 3.25rem; padding: 0; font-size: 1.1875rem; font-stretch: 108%; font-weight: 620; }
  .nav__cta-mobil { display: block; padding-top: var(--a-4); border-top: 0 !important; }
  .nav__cta-mobil .btn { width: 100%; font-size: 1.0625rem; }
}
@media (max-width: 26rem) { .marke img { height: 2.125rem; } }

/* Abschnitte */
.abschnitt { padding-block: var(--a-7); }
.abschnitt--eng { padding-block: var(--a-6); }
.abschnitt--weit { padding-block: var(--a-8); }
@media (max-width: 47.99rem) {
  .abschnitt { padding-block: var(--a-6); }
  .abschnitt--weit { padding-block: var(--a-7); }
}
.hell { background: var(--weiss); }
.dunkel { background: var(--regie); color: var(--regie-text); }
.dunkel .grau, .dunkel .ueberzeile { color: var(--regie-grau); }
.grau { color: var(--grau); }

.raster { display: grid; gap: var(--a-5) var(--a-5); }
@media (min-width: 60rem) {
  .raster { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .sp-1-6 { grid-column: 1 / 7; }
  .sp-1-5 { grid-column: 1 / 6; }
  .sp-1-8 { grid-column: 1 / 9; }
  .sp-6-13 { grid-column: 6 / 13; }
  .sp-7-13 { grid-column: 7 / 13; }
  .sp-8-13 { grid-column: 8 / 13; }
  .sp-5-13 { grid-column: 5 / 13; }
  .sp-1-4 { grid-column: 1 / 5; }
}
.kopfzeile { margin-bottom: var(--a-6); max-width: 46rem; }
.kopfzeile h2 + p { margin-top: var(--a-4); }

/* Held mit Sucher-Ecken: das Erinnerungsstück der Seite */
.held { padding-block: var(--a-4) var(--a-7); }
.sucher { position: relative; padding: clamp(2rem, 1rem + 4.5vw, 5.5rem) clamp(1.25rem, .5rem + 4vw, 5rem) clamp(1.75rem, 1rem + 3vw, 3.75rem); }
.sucher__ecke { position: absolute; width: clamp(1.75rem, 1rem + 3vw, 4rem); aspect-ratio: 1; border: 0 solid var(--tinte); pointer-events: none; }
.sucher__ecke--ol { top: 0; left: 0; border-top-width: clamp(4px, .2rem + .25vw, 8px); border-left-width: clamp(4px, .2rem + .25vw, 8px); }
.sucher__ecke--or { top: 0; right: 0; border-top-width: clamp(4px, .2rem + .25vw, 8px); border-right-width: clamp(4px, .2rem + .25vw, 8px); }
.sucher__ecke--ul { bottom: 0; left: 0; border-bottom-width: clamp(4px, .2rem + .25vw, 8px); border-left-width: clamp(4px, .2rem + .25vw, 8px); }
.sucher__ecke--ur { bottom: 0; right: 0; border-bottom-width: clamp(4px, .2rem + .25vw, 8px); border-right-width: clamp(4px, .2rem + .25vw, 8px); }
.sucher__punkt {
  position: absolute; top: clamp(1.1rem, .6rem + 1.8vw, 2.4rem); right: clamp(1.1rem, .6rem + 1.8vw, 2.4rem);
  width: clamp(.75rem, .5rem + .9vw, 1.4rem); aspect-ratio: 1; border-radius: 50%; background: var(--rot);
}
.held h1 { max-width: 13ch; }
.held .lead { margin-top: var(--a-5); }
.held .aktionen { margin-top: var(--a-5); }
.welle { margin-top: clamp(2.25rem, 1.5rem + 3vw, 4.5rem); }
.welle svg { width: 100%; height: clamp(3.5rem, 2.5rem + 4vw, 7rem); }
.welle__gespielt { fill: var(--tinte); }
.welle__rest { fill: var(--linie-stark); }
.welle__kopf { fill: var(--rot); }
@media (prefers-reduced-motion: no-preference) {
  .held h1, .held .lead, .held .aktionen { animation: auftritt 520ms var(--kurve) both; }
  .held .lead { animation-delay: 70ms; }
  .held .aktionen { animation-delay: 140ms; }
  @keyframes auftritt { from { opacity: 0; transform: translateY(.5rem); } }
}

/* Haltung: große Aussage neben Fließtext */
.aussage h2 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.625rem); max-width: 13ch; }
.aussage .text { font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); }
@media (min-width: 60rem) { .aussage .text { padding-top: .6rem; } }

/* Formatverzeichnis: Name, Satz, Detail als Zeile */
.verzeichnis { list-style: none; padding: 0; border-top: 2px solid var(--tinte); }
.verzeichnis li { border-bottom: 1px solid var(--linie); }
.verzeichnis a {
  display: grid; gap: var(--a-2) var(--a-5); padding: var(--a-4) 0;
  text-decoration: none;
}
@media (min-width: 60rem) {
  .verzeichnis a { grid-template-columns: 5fr 7fr; align-items: baseline; padding: var(--a-5) 0; }
}
.verzeichnis__name {
  font-family: var(--schrift-marke); font-size: clamp(1.375rem, 1.05rem + 1.3vw, 2.125rem);
  font-weight: 750; font-stretch: 116%; letter-spacing: -.015em; line-height: 1.1;
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 3px; text-underline-offset: .18em;
  transition: text-decoration-color var(--dauer) var(--kurve);
}
.verzeichnis a:hover .verzeichnis__name, .verzeichnis a:focus-visible .verzeichnis__name { text-decoration-color: var(--rot); }
.verzeichnis__detail { font-family: var(--schrift-marke); font-size: .9375rem; line-height: 1.4; color: var(--grau); }
.unterlink { margin-top: var(--a-5); }

/* Eine Aufnahme, drei Ergebnisse */
.kanaele { list-style: none; padding: 0; display: grid; gap: var(--a-4); }
.kanal { display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--a-4); align-items: center; padding-block: var(--a-3); border-top: 1px solid var(--regie-linie); }
.kanal:last-child { border-bottom: 1px solid var(--regie-linie); }
.kanal__form { display: grid; place-items: center; height: 4.5rem; }
.kanal__form span { display: block; border: 2px solid var(--regie-text); }
.kanal__welle svg { width: 4.25rem; height: 2rem; }
.kanal__welle .welle__gespielt { fill: var(--regie-text); }
.kanal__form--video span { width: 4.25rem; aspect-ratio: 16 / 9; }
.kanal__form--clip span { height: 4.25rem; aspect-ratio: 9 / 16; }
.kanal__text { font-family: var(--schrift-marke); font-size: 1.0625rem; font-weight: 560; line-height: 1.35; }
.spur { display: flex; align-items: center; gap: var(--a-3); margin-top: var(--a-5); font-family: var(--schrift-marke); font-size: .9375rem; color: var(--regie-grau); }
.spur i { display: block; width: .7rem; aspect-ratio: 1; border-radius: 50%; background: var(--rot); }

/* Ablauf als Zeitleiste mit echter Reihenfolge */
.ablauf { list-style: none; padding: 0; counter-reset: schritt; display: grid; gap: 0; }
.ablauf li { counter-increment: schritt; position: relative; padding: 0 0 var(--a-5) 3.75rem; }
.ablauf li::before {
  content: counter(schritt);
  position: absolute; left: 0; top: -.1rem;
  font-family: var(--schrift-marke); font-weight: 800; font-stretch: 125%; font-size: 2rem; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ablauf li::after { content: ""; position: absolute; left: .7rem; top: 2.4rem; bottom: .5rem; width: 1px; background: var(--linie-stark); }
.ablauf li:last-child::after { display: none; }
.ablauf h3 { margin-bottom: var(--a-2); }
.ablauf p { max-width: 34ch; }
@media (min-width: 60rem) {
  .ablauf { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--a-5); border-top: 2px solid var(--tinte); }
  .ablauf li { padding: var(--a-5) 0 0; }
  .ablauf li::before { position: static; display: block; font-size: 3rem; margin-bottom: var(--a-4); }
  .ablauf li::after { left: 0; top: -2px; bottom: auto; width: 2.5rem; height: 6px; background: var(--tinte); }
  .ablauf li:first-child::after { background: var(--rot); }
  .ablauf li:last-child::after { display: block; }
}

/* Beispielformate: das einzige Kartenraster, Cover als neutrale Gestaltung */
.cover-raster { list-style: none; padding: 0; display: grid; gap: var(--a-6) var(--a-5); }
@media (min-width: 44rem) { .cover-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cover {
  container-type: inline-size;
  position: relative; aspect-ratio: 1; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(1rem, .7rem + 1.2vw, 1.6rem);
  font-family: var(--schrift-marke);
}
.cover__kennung {
  align-self: flex-start;
  font-size: .8125rem; font-weight: 650; line-height: 1; letter-spacing: .01em;
  padding: .4rem .55rem; border: 1px solid currentColor; border-radius: var(--r-bedien);
}
.cover__titel { hyphens: auto; font-weight: 800; line-height: .98; letter-spacing: -.02em; text-wrap: balance; }
.cover--schicht { background: var(--rot); color: var(--weiss); }
.cover--schicht .cover__titel { font-size: 13cqi; font-stretch: 125%; line-height: .9; }
.cover--schicht .cover__wellen { position: absolute; left: 7%; right: 7%; top: 27%; height: 36%; display: grid; grid-template-rows: 1fr 1fr; }
.cover__welle svg { width: 100%; height: 100%; }
.cover--schicht .cover__welle .welle__gespielt { fill: var(--tinte); }
.cover--schicht .cover__welle--gegen { transform: scaleX(-1); }
.cover--schicht .cover__welle--gegen .welle__gespielt { fill: var(--weiss); }
.cover--nachgefragt { background: var(--weiss); color: var(--tinte); outline: 1px solid var(--linie); outline-offset: -1px; }
.cover--nachgefragt .cover__titel { font-size: 11.5cqi; font-stretch: 112%; }
.cover--nachgefragt .cover__rahmen { position: absolute; left: 10%; right: 10%; top: 24%; aspect-ratio: 16 / 9; border: 6px solid var(--tinte); }
.cover--nachgefragt .cover__frage { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 850; font-stretch: 125%; font-size: 30cqi; line-height: 1; color: var(--tinte); }
.cover--nachgefragt .cover__rahmen::after { content: ""; position: absolute; top: .7rem; right: .7rem; width: 1rem; aspect-ratio: 1; border-radius: 50%; background: var(--rot); }
.cover--hundert { background: var(--tinte); color: var(--weiss); }
.cover--hundert .cover__zahl { font-size: 31cqi; font-weight: 850; font-stretch: 125%; line-height: .8; letter-spacing: -.045em; color: var(--rot); }
.cover--hundert .cover__titel { font-size: 7.5cqi; font-stretch: 112%; font-weight: 750; }
.cover--podium { background: var(--papier); color: var(--tinte); outline: 1px solid var(--linie); outline-offset: -1px; }
.cover--podium .cover__pult { position: absolute; left: 10%; right: 10%; top: 30%; height: 30%; display: flex; justify-content: space-around; align-items: flex-end; border-bottom: 3cqi solid var(--tinte); }
.cover--podium .cover__pult span { display: block; width: 14cqi; height: 14cqi; border-radius: 50%; margin-bottom: 3cqi; background: var(--tinte); }
.cover--podium .cover__pult span:nth-child(2) { background: var(--rot); }
.cover--podium .cover__titel { font-size: 13cqi; font-stretch: 118%; }
.beispiel h3 { margin-top: var(--a-4); }
.beispiel__art { font-family: var(--schrift-marke); font-size: .9375rem; font-weight: 600; color: var(--grau); margin-top: var(--a-1); }
.beispiel p:last-child { margin-top: var(--a-2); }

/* Abschluss */
.schluss h2 { font-size: clamp(2.25rem, 1.2rem + 4.4vw, 5rem); font-stretch: 125%; font-weight: 800; max-width: 14ch; letter-spacing: -.028em; }
.schluss .text { margin-top: var(--a-5); font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); }
.schluss .aktionen { margin-top: var(--a-5); }
.kontaktzeile { display: flex; flex-wrap: wrap; gap: var(--a-2) var(--a-5); margin-top: var(--a-4); list-style: none; padding: 0; font-family: var(--schrift-marke); font-size: 1rem; }
.kontaktzeile li { display: flex; align-items: center; gap: .5rem; min-height: 2.75rem; }
.kontaktzeile a { display: inline-flex; align-items: center; min-height: 2.75rem; }

/* Unterseiten */
.seitenkopf { padding-block: var(--a-6) var(--a-6); border-bottom: 1px solid var(--linie); }
.seitenkopf h1 { font-size: clamp(2.125rem, 1rem + 4.4vw, 4.5rem); max-width: 16ch; }
.seitenkopf .lead { margin-top: var(--a-4); max-width: 44ch; }
.brotkrume { font-family: var(--schrift-marke); font-size: .9375rem; margin-bottom: var(--a-4); color: var(--grau); }
.brotkrume ol { display: flex; flex-wrap: wrap; list-style: none; padding: 0; }
.brotkrume li + li::before { content: "/"; padding: 0 .5rem; color: var(--linie-stark); }
.brotkrume a { display: inline-flex; min-height: 2.75rem; align-items: center; color: var(--tinte); }
.brotkrume ol li { display: flex; align-items: center; }

.sprungliste { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--a-2); margin-top: var(--a-5); }
.sprungliste a {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .9rem;
  font-family: var(--schrift-marke); font-size: .96875rem; font-weight: 600; text-decoration: none;
  border: 1px solid var(--linie-stark); border-radius: var(--r-bedien); background: var(--weiss);
}
.sprungliste a:hover { border-color: var(--tinte); }

.eintrag { padding-block: var(--a-6); border-top: 1px solid var(--linie); }
.eintrag:first-child { border-top: 0; }
.eintrag h2 { font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.75rem); }
.eintrag .einleitung { margin-top: var(--a-4); max-width: 40ch; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); }
.merkmale { display: grid; gap: 0; border-top: 2px solid var(--tinte); }
.merkmale > div { display: grid; gap: var(--a-1) var(--a-5); padding: var(--a-4) 0; border-bottom: 1px solid var(--linie); }
@media (min-width: 40rem) { .merkmale > div { grid-template-columns: 11rem 1fr; } }
.merkmale dt { font-family: var(--schrift-marke); font-weight: 680; font-size: 1rem; line-height: 1.5; }
.merkmale dd { max-width: 58ch; }
.merkmale .richtwert dd { font-family: var(--schrift-marke); font-size: 1rem; line-height: 1.5; font-variant-numeric: tabular-nums; }
.merkmale .richtwert dd small { display: block; color: var(--grau); font-size: .875rem; }

.pakete { list-style: none; padding: 0; display: grid; gap: 0; border-top: 2px solid var(--tinte); }
@media (min-width: 60rem) { .pakete { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.paket { padding: var(--a-5) 0; border-bottom: 1px solid var(--linie); }
@media (min-width: 60rem) {
  .paket { padding: var(--a-5) var(--a-5) var(--a-5) 0; border-bottom: 0; }
  .paket + .paket { padding-left: var(--a-5); border-left: 1px solid var(--linie); }
}
.paket h3 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem); font-stretch: 118%; font-weight: 780; }
.paket__preis { margin-top: var(--a-2); font-family: var(--schrift-marke); font-weight: 600; }
.paket ul { margin-top: var(--a-4); padding-left: 1.1rem; list-style: square; }
.paket li + li { margin-top: var(--a-2); }
.paket li::marker { color: var(--rot-tief); }

.liste-strich { padding-left: 1.1rem; list-style: square; }
.liste-strich li + li { margin-top: var(--a-2); }
.liste-strich li::marker { color: var(--rot-tief); }
.dunkel .liste-strich li::marker { color: var(--rot-auf-dunkel); }

.fragen { border-top: 2px solid var(--tinte); }
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--a-4);
  min-height: 3.5rem; padding: var(--a-3) 0; cursor: pointer; list-style: none;
  font-family: var(--schrift-marke); font-weight: 650; font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); line-height: 1.3;
}
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after {
  content: ""; flex: none; width: .75rem; height: .75rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-25%) rotate(45deg); transition: transform var(--dauer) var(--kurve);
}
.fragen details[open] summary::after { transform: translateY(25%) rotate(-135deg); }
.fragen details > div { padding: 0 0 var(--a-4); max-width: 64ch; }

.kontaktwege { display: grid; gap: 0; border-top: 2px solid var(--tinte); list-style: none; padding: 0; }
.kontaktwege li { display: grid; gap: var(--a-2) var(--a-5); padding: var(--a-5) 0; border-bottom: 1px solid var(--linie); }
@media (min-width: 48rem) { .kontaktwege li { grid-template-columns: 12rem 1fr auto; align-items: center; } }
.kontaktwege h3 { font-size: 1.25rem; }

.hinweisband { border: 1px dashed var(--linie-stark); padding: var(--a-5); max-width: 52rem; }
.hinweisband h2, .hinweisband h3 { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.625rem); font-stretch: 106%; }
.hinweisband p { margin-top: var(--a-3); }

.rechtstext { max-width: 70ch; }
.rechtstext h2 { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); margin-top: var(--a-6); margin-bottom: var(--a-3); }
.rechtstext h3 { margin-top: var(--a-5); margin-bottom: var(--a-2); }
.rechtstext p + p, .rechtstext ul, .rechtstext ul + p { margin-top: var(--a-3); }
.rechtstext dl { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: var(--a-2) var(--a-4); margin-top: var(--a-3); }
.rechtstext dt { font-family: var(--schrift-marke); font-weight: 650; font-size: 1rem; line-height: 1.6; }
@media (max-width: 30rem) { .rechtstext dl { grid-template-columns: 1fr; gap: 0; } .rechtstext dd { margin-bottom: var(--a-3); } }

.fehlerseite { min-height: 60vh; display: grid; align-content: center; }
.fehlerseite .code { font-family: var(--schrift-marke); font-weight: 850; font-stretch: 125%; font-size: clamp(5rem, 3rem + 10vw, 11rem); line-height: .85; letter-spacing: -.04em; }

/* Fuß: dunkel wie das Logo, darauf die helle Kombimarke */
/* Unten bleibt der Platz des WhatsApp-Knopfes frei, siehe Abschnitt „WhatsApp-Kontakt“ */
.fuss { background: var(--regie); color: var(--regie-text); padding-block: var(--a-7) calc(var(--a-5) + var(--wa-platz)); }
.fuss__raster { display: grid; gap: var(--a-6) var(--a-5); }
@media (min-width: 48rem) { .fuss__raster { grid-template-columns: 1.1fr 1fr 1fr; } }
.fuss__marke img { width: 11rem; height: auto; }
.fuss h2 { font-size: 1rem; font-stretch: 100%; font-weight: 650; letter-spacing: 0; color: var(--regie-grau); margin-bottom: var(--a-3); }
.fuss ul { list-style: none; padding: 0; font-family: var(--schrift-marke); font-size: 1rem; }
.fuss li a { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; text-decoration: none; }
.fuss li a:hover { text-decoration: underline; text-decoration-color: var(--rot-auf-dunkel); }
/* Anschrift im Fuss: kein Link, deshalb eigene Zeile statt .fuss li a.
   Symbol oben ausgerichtet, weil die Anschrift zwei Zeilen hat. */
.fuss li.fuss__text { display: flex; align-items: flex-start; gap: .5rem; min-height: 2.75rem; padding-block: .5rem; }
.fuss li.fuss__text .icon { margin-top: .2em; }
.fuss__unten {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--a-3) var(--a-5);
  margin-top: var(--a-7); padding-top: var(--a-4); border-top: 1px solid var(--regie-linie);
  font-family: var(--schrift-marke); font-size: .9375rem; color: var(--regie-grau);
}
.fuss__unten ul a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.fuss__unten ul { display: flex; flex-wrap: wrap; gap: 0 var(--a-4); font-size: .9375rem; }

@media print {
  .kopf, .fuss, .nav-knopf, .welle, .wafab { display: none; }
  body { background: #fff; }
}
.fuss__satz { margin-top: var(--a-4); max-width: 30ch; color: var(--regie-grau); font-size: 1rem; }
/* Vorbereitete Social-Leiste im Fuss (Markup in site/*.html).
   Die Konten der Fitz Media AG bestehen noch nicht, siehe docs/offen.md Punkt 22:
   Leiste und jeder Eintrag tragen deshalb hidden. Hier wird bewusst KEIN display
   auf .fuss__social oder .fuss__social li gesetzt, damit das display:none des
   hidden-Attributs greift; die Regel darunter macht das noch einmal ausdruecklich.
   Ohne hidden steht die Leiste als Reihe quadratischer Tippziele unter dem
   Kontaktblock, 44 x 44 px, einfarbig wie der uebrige Fuss. */
.fuss__social[hidden], .fuss__social li[hidden] { display: none; }
.fuss__social { margin-top: var(--a-5); }
.fuss__social ul { display: flex; flex-wrap: wrap; gap: var(--a-2); }
/* Unter 48rem steht der Fuss einspaltig: Breite so begrenzen, dass die sieben
   Zeichen sauber 4 + 3 umbrechen statt 6 + 1 (4 x 44px + 3 x 8px = 200px). */
@media (max-width: 47.99rem) { .fuss__social ul { max-width: 13rem; } }
.fuss__social li a {
  width: 2.75rem; min-width: 2.75rem; height: 2.75rem; justify-content: center; gap: 0;
  color: var(--regie-grau); border: 1px solid var(--regie-linie); border-radius: var(--r-bedien);
  transition: color var(--dauer) var(--kurve), border-color var(--dauer) var(--kurve), background-color var(--dauer) var(--kurve);
}
.fuss__social li a:hover, .fuss__social li a:focus-visible {
  color: var(--regie-text); border-color: var(--regie-grau); background: var(--regie-2); text-decoration: none;
}
/* Glyphen unverzerrt: quadratische Flaeche aus einem 24x24-viewBox */
.fuss__social__ico { width: 1.25rem; height: 1.25rem; flex: none; fill: currentColor; stroke: none; }
@media (prefers-reduced-motion: reduce) { .fuss__social li a { transition: none; } }


/* Bildplatz für das spätere Studiofoto, gerahmt wie der Sucher */
.bildplatz { position: relative; aspect-ratio: 3 / 2; display: grid; place-content: center; gap: var(--a-2); padding: var(--a-5); text-align: center; background: var(--papier); }
.bildplatz .sucher__ecke { width: clamp(1.5rem, 1rem + 2vw, 3rem); }
.bildplatz .sucher__ecke--ol, .bildplatz .sucher__ecke--or, .bildplatz .sucher__ecke--ul, .bildplatz .sucher__ecke--ur { border-width: 0; }
.bildplatz .sucher__ecke--ol { border-top-width: 4px; border-left-width: 4px; top: var(--a-4); left: var(--a-4); }
.bildplatz .sucher__ecke--or { border-top-width: 4px; border-right-width: 4px; top: var(--a-4); right: var(--a-4); }
.bildplatz .sucher__ecke--ul { border-bottom-width: 4px; border-left-width: 4px; bottom: var(--a-4); left: var(--a-4); }
.bildplatz .sucher__ecke--ur { border-bottom-width: 4px; border-right-width: 4px; bottom: var(--a-4); right: var(--a-4); }
.verzeichnis__satz { max-width: 44ch; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Pakete als gesetzte Tabelle; mobil jede Zeile als Block */
.tabelle { width: 100%; border-collapse: collapse; border-top: 2px solid var(--tinte); }
.tabelle th, .tabelle td { text-align: left; vertical-align: top; padding: var(--a-4) var(--a-4) var(--a-4) 0; border-bottom: 1px solid var(--linie); }
.tabelle thead th { font-family: var(--schrift-marke); font-size: .9375rem; font-weight: 600; color: var(--grau); padding-block: var(--a-3); }
.tabelle tbody th { font-family: var(--schrift-marke); font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); font-weight: 780; font-stretch: 118%; letter-spacing: -.015em; line-height: 1.1; width: 22%; }
.tabelle__preis { font-family: var(--schrift-marke); font-weight: 600; font-size: 1rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 47.99rem) {
  .tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabelle tr { display: block; padding: var(--a-4) 0; border-bottom: 1px solid var(--linie); }
  .tabelle th, .tabelle td { display: block; border: 0; padding: 0; width: auto; }
  .tabelle td { margin-top: var(--a-2); }
  .tabelle td:nth-of-type(2) { color: var(--grau); }
}

/* Formate: je Format ein Motiv aus dem Formensystem */
.eintraege .eintrag { align-items: start; }
@media (min-width: 60rem) { .eintraege .motiv { position: sticky; top: calc(var(--kopf-hoehe) + 2rem); } }
.motiv { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--tinte); color: var(--regie-text); }
@media (max-width: 59.99rem) { .motiv { aspect-ratio: 5 / 2; max-width: 32rem; } }
.motiv span { position: absolute; display: block; }
.motiv--branded { background: var(--weiss); border: 1px solid var(--linie); }
.motiv--branded .motiv__wort { left: 10%; bottom: 12%; font-family: var(--schrift-marke); font-weight: 850; font-stretch: 125%; font-size: clamp(1.75rem, 1rem + 2.4vw, 2.75rem); line-height: .9; letter-spacing: -.03em; color: var(--tinte); }
.motiv--branded .motiv__punkt { top: 12%; right: 10%; width: 12%; aspect-ratio: 1; border-radius: 50%; background: var(--rot); }
.motiv--corporate span { top: 22%; bottom: 22%; width: 30%; border: 3px solid var(--regie-text); }
.motiv--corporate span:first-child { left: 14%; }
.motiv--corporate span:last-child { right: 14%; border-color: var(--rot-auf-dunkel); }
.motiv--intern { background: var(--papier); border: 1px solid var(--linie); }
.motiv--intern .motiv__welle { position: absolute; left: 10%; right: 10%; bottom: 14%; }
.motiv--intern .motiv__welle svg { width: 100%; height: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.motiv--intern .motiv__schloss { top: 12%; right: 10%; width: 9%; aspect-ratio: 4 / 5; border: 3px solid var(--tinte); border-radius: 2px; }
.motiv--video .motiv__breit { left: 9%; top: 50%; transform: translateY(-50%); width: 48%; aspect-ratio: 16 / 9; border: 3px solid var(--regie-text); }
.motiv--video .motiv__hoch { right: 11%; top: 50%; transform: translateY(-50%); height: 62%; aspect-ratio: 9 / 16; border: 3px solid var(--rot-auf-dunkel); }
.motiv--serie { background: var(--rot-tief); }
.motiv--serie span { top: 46%; height: 8%; background: var(--weiss); }
.motiv--serie span:nth-child(1) { left: 10%; width: 14%; } .motiv--serie span:nth-child(2) { left: 26%; width: 20%; }
.motiv--serie span:nth-child(3) { left: 48%; width: 11%; } .motiv--serie span:nth-child(4) { left: 61%; width: 17%; }
.motiv--serie span:nth-child(5) { left: 80%; width: 10%; }
.motiv--serie::after { content: ""; position: absolute; left: 36%; top: 30%; height: 40%; width: 3px; background: var(--tinte); }
.motiv--live { background: var(--weiss); border: 1px solid var(--linie); }
.motiv--live .motiv__buehne { left: 18%; right: 18%; top: 14%; height: 12%; background: var(--tinte); }
.motiv--live .motiv__reihen { left: 10%; right: 10%; bottom: 14%; height: 44%; background: repeating-linear-gradient(to bottom, var(--linie-stark) 0 3px, transparent 3px 22%); }
.eintraege .eintrag { border-top: 0; padding-block: var(--a-6) var(--a-5); }
.eintraege .eintrag + .eintrag { border-top: 1px solid var(--linie); }
.eintraege .merkmale > div:last-child { border-bottom: 0; }
.eintrag h2 { scroll-margin-top: calc(var(--kopf-hoehe) + 1rem); }
.eintrag .merkmale { margin-top: var(--a-5); }
.merkmale dd a { font-family: var(--schrift-marke); font-weight: 600; font-size: 1rem; text-decoration-color: var(--rot); text-decoration-thickness: 2px; display: inline-flex; min-height: 2.75rem; align-items: center; margin-block: -.6rem; }

/* Leistungen als typografisches Register je Produktionsphase */
.register { padding-block: var(--a-5); border-top: 2px solid var(--tinte); gap: var(--a-3) var(--a-5); scroll-margin-top: calc(var(--kopf-hoehe) + 1rem); }
.register + .register { margin-top: var(--a-5); }
.register h3 { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); font-stretch: 116%; font-weight: 760; }
.register dl > div { display: grid; gap: var(--a-1) var(--a-5); padding: var(--a-3) 0 var(--a-4); border-bottom: 1px solid var(--linie); }
.register dl > div:first-child { padding-top: 0; }
.register dl > div:last-child { border-bottom: 0; }
@media (min-width: 48rem) { .register dl > div { grid-template-columns: 15rem 1fr; } }
.register dt { font-family: var(--schrift-marke); font-weight: 680; font-size: 1.0625rem; line-height: 1.5; }
.register dd a, .text a, .fragen a { text-decoration-color: var(--rot); text-decoration-thickness: 2px; }
.kopfzeile h2 a { text-decoration-thickness: .06em; text-underline-offset: .12em; text-decoration-color: var(--rot); }
.kopfzeile .unterlink { margin-top: var(--a-3); }
.hinweis-unten { margin-top: var(--a-5); color: var(--grau); }

/* Ablauf-Seite: Schritte als Spur mit großer Nummer, Wir und Sie nebeneinander */
.spur-liste { list-style: none; padding: 0; border-top: 2px solid var(--tinte); }
.spur-schritt { position: relative; padding-block: var(--a-5) var(--a-6); border-bottom: 1px solid var(--linie); gap: var(--a-3) var(--a-5); }
.spur-schritt__nr { font-family: var(--schrift-marke); font-weight: 850; font-stretch: 125%; font-size: clamp(3rem, 2rem + 4vw, 6rem); line-height: .85; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.spur-schritt:first-child .spur-schritt__nr { color: var(--rot-tief); }
.spur-schritt h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem); }
.spur-schritt__text p { margin-top: var(--a-3); max-width: 52ch; }
.spur-schritt__rollen > div { display: grid; grid-template-columns: 3rem 1fr; gap: var(--a-3); padding-block: var(--a-3); border-top: 1px solid var(--linie); }
.spur-schritt__rollen > div:first-child { border-top: 0; padding-top: 0; }
.spur-schritt__rollen dt { font-family: var(--schrift-marke); font-weight: 750; font-stretch: 112%; font-size: 1rem; line-height: 1.6; }
@media (min-width: 60rem) {
  .spur-schritt__nr { grid-column: 1 / 3; }
  .spur-schritt__text { grid-column: 3 / 8; }
  .spur-schritt__rollen { grid-column: 8 / 13; padding-top: .5rem; }
}

/* Checkliste: echte Handlungsliste, Haken als gezeichnete Linie */
.checkliste { list-style: none; padding: 0; border-top: 2px solid var(--tinte); }
.checkliste li { position: relative; padding: var(--a-4) 0 var(--a-4) 2.25rem; border-bottom: 1px solid var(--linie); }
.checkliste li::before { content: ""; position: absolute; left: .2rem; top: 1.6rem; width: .75rem; height: .4rem; border-left: 2px solid var(--rot-tief); border-bottom: 2px solid var(--rot-tief); transform: rotate(-45deg); }
.checkliste--fragen li::before { width: .5rem; height: .5rem; border: 0; background: var(--tinte); transform: none; top: 1.75rem; }

.bildplatz--hell { background: var(--weiss); }
.textlink--hell { text-decoration-color: var(--rot-auf-dunkel); }
.dunkel h2 + .text, .dunkel .sp-8-13 h2 { color: inherit; }
@media (max-width: 59.99rem) { .dunkel .sp-8-13 { margin-top: var(--a-5); } }

.grundsaetze { list-style: none; padding: 0; display: grid; gap: 0; border-top: 2px solid var(--tinte); }
@media (min-width: 60rem) { .grundsaetze { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a-5); } }
.grundsaetze li { padding: var(--a-5) 0; border-bottom: 1px solid var(--linie); }
@media (min-width: 60rem) { .grundsaetze li { border-bottom: 0; } }
.grundsaetze h3 { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.75rem); font-stretch: 112%; font-weight: 760; }
.grundsaetze p { margin-top: var(--a-3); max-width: 40ch; }
.logo-erklaerung img { width: min(100%, 22rem); height: auto; }
@media (min-width: 60rem) { .logo-erklaerung { align-items: center; } }

.kontakt-cta { margin-bottom: var(--a-6); }
.kontaktwege li p:first-of-type { font-family: var(--schrift-marke); font-size: 1.125rem; }
.kontaktwege a { display: inline-flex; align-items: center; min-height: 2.75rem; }
@media (min-width: 60rem) { .ablauf--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.sucher--leer { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; }
.fehler__hilfe { margin-top: var(--a-6); font-size: 1rem; font-weight: 650; font-stretch: 100%; letter-spacing: 0; }
.fehler__links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--a-5); margin-top: var(--a-2); }
.fehlerseite h1 { max-width: 16ch; font-size: clamp(2.125rem, 1rem + 4.4vw, 4.5rem); }
.brotkrume a { padding-inline: .35rem; margin-inline: -.35rem; min-width: 2.75rem; justify-content: center; }
@media (max-width: 29.99rem) { .seitenkopf h1 { font-stretch: 100%; hyphens: auto; } }

/* Startseite: erster Bildschirm als Regieraum, Farben wie das Logo (Weiß auf Schwarz, Aufnahme-Rot) */
.kopf--dunkel { background: var(--regie); color: var(--regie-text); }
.kopf--dunkel[data-gescrollt="true"] { border-bottom-color: var(--regie-linie); }
.kopf--dunkel .nav-knopf { border-color: var(--regie-text); }
.kopf--dunkel :focus-visible { outline-color: var(--rot-auf-dunkel); }
.kopf--dunkel .nav a:hover, .kopf--dunkel .nav a[aria-current="page"] { text-decoration-color: var(--rot-auf-dunkel); }
@media (max-width: 61.99rem) { .kopf--dunkel .nav { background: var(--regie); border-bottom-color: var(--regie-linie); } .kopf--dunkel .nav li + li { border-top-color: var(--regie-linie); } }
.held--regie { padding-block: var(--a-3) var(--a-7); }
.held--regie .sucher__ecke { border-color: var(--regie-text); }
.held--regie h1 { font-size: clamp(2.375rem, .9rem + 6.4vw, 6rem); max-width: 12ch; }
@media (min-width: 60rem) { .held--regie h1 { max-width: 16ch; } }
.held--regie .ueberzeile { color: var(--regie-grau); }
.held--regie .lead { color: var(--regie-text); }
.held--regie .textlink { text-decoration-color: var(--rot-auf-dunkel); }
.held--regie .welle svg { height: clamp(5.5rem, 3rem + 9vw, 12rem); }
.held--regie .welle__gespielt { fill: var(--rot); }
.held--regie .welle__rest { fill: #4E5663; }
.held--regie .welle__kopf { fill: var(--regie-text); }
@media (prefers-reduced-motion: no-preference) {
  .held--regie .welle__gespielt { animation: aufnahme 1600ms cubic-bezier(.3, .1, .3, 1) 200ms both; }
  .held--regie .welle__kopf { animation: kopf-ein 240ms var(--kurve) 1750ms both; }
  @keyframes aufnahme { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes kopf-ein { from { opacity: 0; } }
}
@media (max-width: 47.99rem) { .held--regie .sucher { padding-inline: 1.25rem; } .held--regie .welle { margin-inline: -.5rem; } }

/* Aufnahmeorte auf der Startseite */
.orte { list-style: none; padding: 0; border-top: 2px solid var(--tinte); }
.orte li { display: grid; grid-template-columns: 4rem 1fr; gap: var(--a-4); align-items: start; padding: var(--a-4) 0; border-bottom: 1px solid var(--linie); }
.orte h3 { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.75rem); font-stretch: 114%; font-weight: 760; }
.orte p { margin-top: var(--a-1); }
.orte__zeichen { position: relative; display: block; height: 3rem; margin-top: .2rem; }
.orte__zeichen--studio { border: 3px solid var(--tinte); }
.orte__zeichen--studio::after { content: ""; position: absolute; top: .35rem; right: .35rem; width: .5rem; aspect-ratio: 1; border-radius: 50%; background: var(--rot); }
.orte__zeichen--vorort { border-bottom: 3px solid var(--tinte); }
.orte__zeichen--vorort::before { content: ""; position: absolute; left: 50%; bottom: 0; width: 3px; height: 70%; background: var(--tinte); transform: translateX(-50%); }
.orte__zeichen--vorort::after { content: ""; position: absolute; left: 50%; top: 0; width: 1rem; height: 1rem; border-radius: 50%; background: var(--rot); transform: translateX(-50%); }
.orte__zeichen--ferne { border: 3px dashed var(--tinte); border-radius: 50%; width: 3rem; }
.orte__zeichen--ferne::after { content: ""; position: absolute; inset: 35%; border-radius: 50%; background: var(--rot); }

/* Hörprobe: stille Wellenform, kein Abspielknopf */
.hoerprobe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-2) var(--a-4); margin-top: var(--a-5); font-family: var(--schrift-marke); font-size: 1rem; color: var(--grau); }
.hoerprobe__welle svg { width: 10rem; height: 1.75rem; }
.hoerprobe .welle__rest { fill: var(--linie-stark); }
/* Eigene Zeile unter dem Beispielraster der Startseite: abgesetzt durch eine
   Linie ueber die ganze Breite, damit sie nicht zur ersten Karte zu gehoeren scheint. */
.hoerprobe--eigen { width: 100%; margin-top: var(--a-6); padding-top: var(--a-4); border-top: 1px solid var(--linie); }

/* Tablet: Claim nicht in vier Zeilen */
@media (min-width: 40rem) and (max-width: 59.99rem) { .held--regie h1 { max-width: none; font-size: clamp(2.75rem, .5rem + 6vw, 4rem); } }
/* Handy-Menü deckt die Seite ganz ab, damit keine doppelte Aktion darunter sichtbar ist */
@media (max-width: 61.99rem) { .kopf[data-offen="true"] .nav { height: calc(100dvh - var(--kopf-hoehe)); overflow-y: auto; } }

/* Unterseiten: Kopf als dunkles Band im Sucher, wie der erste Bildschirm der Startseite */
.seitenkopf.dunkel { border-bottom: 0; padding-block: var(--a-3) var(--a-6); }
.sucher--klein { padding: clamp(1.75rem, 1rem + 3vw, 3.75rem) clamp(1.25rem, .5rem + 4vw, 5rem); }
.sucher--klein .sucher__ecke { width: clamp(1.5rem, 1rem + 2vw, 3rem); border-color: var(--regie-text); }
.sucher--klein .sucher__ecke--ol, .sucher--klein .sucher__ecke--or, .sucher--klein .sucher__ecke--ul, .sucher--klein .sucher__ecke--ur { border-width: 0; }
.sucher--klein .sucher__ecke--ol { border-top-width: 5px; border-left-width: 5px; }
.sucher--klein .sucher__ecke--or { border-top-width: 5px; border-right-width: 5px; }
.sucher--klein .sucher__ecke--ul { border-bottom-width: 5px; border-left-width: 5px; }
.sucher--klein .sucher__ecke--ur { border-bottom-width: 5px; border-right-width: 5px; }
.sucher--klein .sucher__punkt { width: clamp(.7rem, .5rem + .6vw, 1rem); top: clamp(1rem, .6rem + 1.2vw, 1.75rem); right: clamp(1rem, .6rem + 1.2vw, 1.75rem); }
.seitenkopf.dunkel h1 { max-width: 20ch; }
.seitenkopf.dunkel .brotkrume, .seitenkopf.dunkel .brotkrume a { color: var(--regie-grau); }
.seitenkopf.dunkel .brotkrume li[aria-current] { color: var(--regie-text); }
.seitenkopf.dunkel .brotkrume li + li::before { color: var(--regie-grau); }
.seitenkopf.dunkel + nav .sprungliste { margin-top: var(--a-5); }
.sprungliste a { min-width: 2.75rem; justify-content: center; }
.klein { font-size: 1rem; }
.platzhalter { font-size: 1em; }
.verzeichnis__detail, .beispiel__art, .merkmale .richtwert dd small { font-size: 1rem; }

.merkmale dd a { min-width: 2.75rem; }
/* Kataloge: jeden zweiten Eintrag spiegeln, damit die Folge nicht gleichförmig wirkt */
@media (min-width: 60rem) {
  .eintraege .eintrag:nth-of-type(even) > :first-child { grid-column: 9 / 13; grid-row: 1; }
  .eintraege .eintrag:nth-of-type(even) > :last-child { grid-column: 1 / 8; grid-row: 1; }
}

/* ── WhatsApp-Kontakt: fester Knopf rechts unten ─────────────────────────────
   Reiner Link auf wa.me wie auf fitzindustries.ch: kein Widget, kein Skript und
   beim Seitenaufruf kein Request an Dritte. Erst der Klick öffnet WhatsApp
   (siehe datenschutz.html).
   Farben: WhatsApp-Grün abgedunkelt auf --wa-gruen. Weißes Symbol darauf 5,4:1,
   die Fläche hebt sich vom Papier mit 5,0:1 und vom dunklen Fuß mit 3,5:1 ab.
   Runde Form ist die einzige Ausnahme vom Radius-System (siehe docs/design.md):
   der Knopf schwebt über der Seite und ist kein Teil des Rasters.
   z-index bleibt unter der Kopfzeile (50), damit das offene Handy-Menü ihn
   vollständig verdeckt und keine zweite Aktion durchscheint.
   Im Markup steht der Link als letztes Kind von <footer>, damit er zum
   contentinfo-Landmark gehört; position:fixed nimmt ihn aus dem Fluss. */
.wafab {
  position: fixed; z-index: 40;
  right: calc(var(--wa-rand) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--wa-rand) + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--wa-groesse); height: var(--wa-groesse);
  border-radius: 50%;
  color: var(--weiss); background: var(--wa-gruen);
  border: 1px solid var(--wa-gruen-tief);
  box-shadow: 0 6px 20px rgba(14, 17, 22, .35), 0 0 0 5px rgba(22, 122, 60, .16);
  text-decoration: none;
  transition: background-color var(--dauer) var(--kurve), box-shadow var(--dauer) var(--kurve), transform var(--dauer) var(--kurve);
}
.wafab__ico { width: 1.75rem; height: 1.75rem; flex: none; fill: currentColor; stroke: none; }
.wafab:hover {
  background: var(--wa-gruen-tief); transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(14, 17, 22, .45), 0 0 0 7px rgba(22, 122, 60, .22);
}
.wafab:active { transform: translateY(0); }
/* Doppelter Ring: der weiße innere bleibt auf dem dunklen Fuß sichtbar, der
   tintenfarbene äußere auf dem hellen Papier. */
.wafab:focus-visible {
  outline: 3px solid var(--tinte); outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--weiss), 0 6px 20px rgba(14, 17, 22, .35);
}
@media (prefers-reduced-motion: reduce) {
  .wafab { transition: none; }
  .wafab:hover { transform: none; }
}