/* ==========================================================================
   STOCKWERK MEDIA — Stylesheet
   Ein einziges Stylesheet, keine Preprocessor-Stufe. Aufbau von unten nach
   oben: Tokens, Grundlagen, Layout, Bausteine, Seitenteile.
   Geschrieben mobile-first; jede Medienabfrage oeffnet nach oben.
   ========================================================================== */

/* --- 1. Schrift ---------------------------------------------------------- */

/* Variable Schnittschrift, selbst gehostet. Ein File deckt 400–900 ab,
   damit entfaellt der Zoo aus "Red Hat Display Bold" u. a., den die alte
   Divi-Seite als drei getrennte Familien geladen hat. */
@font-face {
  font-family: 'Red Hat Display';
  src: url('../fonts/red-hat-display-latin.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Red Hat Display';
  src: url('../fonts/red-hat-display-latin-ext.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- 2. Tokens ----------------------------------------------------------- */

:root {
  /*
    Farben. Gold und Anthrazit stammen unveraendert aus der alten Seite.

    Gold ist eine Flaechenfarbe, keine Schriftfarbe: #d2b657 auf Weiss
    ergibt einen Kontrast von 1,99:1 — unlesbar und weit unter der Grenze
    von 4,5:1. Fuer goldene Schrift auf hellem Grund gibt es deshalb
    --gold-text (5,0:1 auf Weiss, 4,5:1 auf der grauen Flaeche). Auf dem
    Knopf steht Anthrazit auf Gold, und das passt (5,4:1).
  */
  --gold: #d2b657;
  --gold-dunkel: #b99b3d;   /* nur als Flaeche, z. B. Knopf im Hover */
  --gold-text: #8a6b1e;     /* Gold als Schrift auf hellem Grund */
  --anthrazit: #3e3e3e;
  /*
    --text lag bei #454545 und damit 3 Helligkeitsstufen neben --anthrazit
    (#3e3e3e). Zwei Toene, die niemand auseinanderhaelt, sind keine
    Hierarchie — sie sehen nur nach Unentschlossenheit aus. Fliesstext
    teilt sich jetzt den Ton mit den Ueberschriften; der Unterschied
    entsteht ueber Groesse und Gewicht, nicht ueber ein drittes Grau.
  */
  --text: #3e3e3e;
  /* #777 lag mit 4,04:1 auf der grauen Flaeche unter der Grenze. */
  --text-leise: #626262;
  --linie: #e4e4e4;
  --flaeche: #f3f3f3;
  --flaeche-leicht: #f8f8f8;
  --weiss: #fff;

  /* Fliessende Groessen: skalieren zwischen 22,5rem (360px) und 90rem
     (1440px), damit zwischen Telefon und Desktop keine Sprungstellen
     entstehen. */
  --t-mikro: clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem);
  --t-klein: clamp(0.875rem, 0.85rem + 0.15vw, 0.95rem);
  --t-basis: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --t-gross: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --t-h4: clamp(1.15rem, 1.05rem + 0.5vw, 1.5rem);
  --t-h3: clamp(1.35rem, 1.2rem + 0.75vw, 1.9rem);
  --t-h2: clamp(1.75rem, 1.4rem + 1.6vw, 3rem);
  --t-h1: clamp(2rem, 1.5rem + 2.4vw, 3.75rem);
  --t-zahl: clamp(2.75rem, 1.8rem + 4.5vw, 5.5rem);

  /*
    Knappe Zeilenhoehe fuer Ueberschriften und grosse Zahlen.

    Red Hat Display reserviert 1,33 em (das ist ihr "normal"). Alles
    darunter laesst die Glyphen rechnerisch aus dem Kasten ragen —
    abgeschnitten wird dabei nichts, denn overflow bleibt sichtbar; es ist
    die Zeilenreserve der Schrift, nicht die Schrift selbst. 1,18 ist
    daher eine Gestaltungsentscheidung: eng genug, dass mehrzeilige
    Ueberschriften als Block wirken, weit genug, dass zwei Zeilen sich
    nicht beruehren.
  */
  --eng: 1.18;

  /* Haken als Maske — einmal definiert, ueberall verwendbar, Farbe
     kommt aus background. */
  --haken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.3 18.6 2.7 12l2.1-2.1 4.5 4.5L19.2 4.5l2.1 2.1z'/%3E%3C/svg%3E");

  --abstand: clamp(1rem, 0.8rem + 1vw, 1.5rem);
  --luft-abschnitt: clamp(3.5rem, 2rem + 6vw, 7rem);
  --huelle: 78rem;
  --rand: clamp(1.25rem, 4vw, 2.5rem);

  --schatten: 0 0.25rem 1.5rem rgb(0 0 0 / 8%);
  --schatten-hoch: 0 0.75rem 2.5rem rgb(0 0 0 / 12%);

  /* Tiefe des diagonalen Anschnitts. Die alte Seite kippt Sections um
     rund 2° — als Hoehe ausgedrueckt bleibt der Winkel ueber alle
     Viewportbreiten gleich flach. */
  --schraege: clamp(1.5rem, 3.2vw, 3.5rem);
}

/* --- 3. Grundlagen ------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Der klebende Kopf wuerde sonst Sprungziele verdecken. Der Wert kommt
     aus derselben Messung wie die Position des Mobilmenues — ein fester
     Wert stimmte nach jeder Aenderung am Logo nicht mehr. */
  scroll-padding-top: calc(var(--kopfhoehe, 5.5rem) + 1rem);
}

body {
  margin: 0;
  font-family: 'Red Hat Display', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--t-basis);
  line-height: 1.65;
  color: var(--text);
  background: var(--weiss);
  -webkit-font-smoothing: antialiased;
  /* Verhindert, dass eine zu breite Karte die ganze Seite seitlich
     verschiebbar macht — der haeufigste Mobil-Fehler ueberhaupt. */
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
  margin: 0 0 0.5em;
  font-weight: 700;
  line-height: var(--eng);
  color: var(--anthrazit);
  text-wrap: balance;
}

/*
  Silbentrennung fuer alles, was Fliesstext ist.

  Deutsche Komposita sind regelmaessig laenger als eine schmale Spalte
  breit ist. Vorher fing das allein overflow-wrap ab — das bricht aber
  ohne Trennstrich und an beliebiger Stelle: aus "Kennenlernen" wurde
  "Kennenlerne" und ein einzelnes "n" in der Zeile darunter.

  hyphenate-limit-chars haelt die Trennung im Rahmen: nur Woerter ab 8
  Zeichen, mindestens 4 davor und 3 danach. Ohne diese Grenzen trennt der
  Browser auch "Digita-le" oder eben "Kennenlerne-n". Versteht ein
  Browser die Eigenschaft nicht, bleibt hyphens: auto — immer noch besser
  als ein abgerissener Buchstabe.

  Die Trennregeln liefert lang="de" im <html>.
*/
h1, h2, h3, h4, h5, p, li, dt, dd, figcaption, blockquote {
  hyphens: auto;
  hyphenate-limit-chars: 8 4 3;
  /* Letzte Instanz: ein Wort, das selbst getrennt nicht passt, bricht
     lieber um als die Seite seitlich zu schieben. */
  overflow-wrap: break-word;
}

/* Nicht trennen, wo es stoert: Schaltflaechen, Navigation und die
   gesperrt gesetzten Dachzeilen. */
.knopf, .kopf__liste, .dachzeile, .fuss__nav, .ankerleiste,
.zahl__label, .fassade__beschriftung {
  hyphens: manual;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-h4); }
h5 { font-size: var(--t-gross); }

/* Die Ueberschriften der alten Seite mischen Normal- und Fettschnitt in
   derselben Zeile. Regel: <strong> traegt das Gewicht, der Rest steht
   normal. */
h1, h2 { font-weight: 400; }
h1 strong, h2 strong { font-weight: 700; }

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--gold-text); }

img, svg, video { max-width: 100%; height: auto; display: block; }

/* Ein Link, der nur ein Bild enthaelt, ist als Inline-Element trotzdem
   Teil einer Textzeile und schleppt deren Unterlaengenluecke mit — ein
   paar Pixel tote Hoehe unter dem Bild. Als Block verschwindet sie. */
a:has(> img:only-child), a:has(> video:only-child) { display: block; }

ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
li { margin-bottom: 0.35em; }

/*
  Fokusring in zwei Toenen.

  Ein einfarbiger Ring kann nicht ueberall stehen: Gold auf dem goldenen
  Knopf kam auf 2,51:1, in der anthrazitfarbenen Fusszeile auf 2,14:1 —
  beides unter den 3:1, die fuer Fokusindikatoren gefordert sind. Der
  helle Innenrand und der dunkle Aussenring liegen direkt aneinander;
  welcher von beiden traegt, entscheidet der Untergrund. Auf Gold traegt
  der dunkle (5,38:1), auf Anthrazit der helle (6,93:1).
*/
:focus-visible {
  outline: 3px solid var(--anthrazit);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--weiss);
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* --- 4. Hilfsklassen ----------------------------------------------------- */

.huelle {
  width: min(100% - var(--rand) * 2, var(--huelle));
  margin-inline: auto;
}
.huelle--schmal { width: min(100% - var(--rand) * 2, 46rem); margin-inline: auto; }

.nur-fuer-screenreader {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sprungmarke {
  position: absolute;
  left: 50%;
  translate: -50% -120%;
  z-index: 200;
  padding: 0.75rem 1.5rem;
  background: var(--anthrazit);
  color: var(--weiss);
  text-decoration: none;
  transition: translate 0.15s;
}
.sprungmarke:focus { translate: -50% 0; color: var(--weiss); }

/* Kleine Ueberzeile in Gold oder Grau, die auf der alten Seite fast jede
   Section eroeffnet. */
.dachzeile {
  margin: 0 0 0.6rem;
  font-size: var(--t-klein);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-leise);
}
.dachzeile--gold { color: var(--gold-text); }

/* Haelt Wortgruppen zusammen, die der Browser sonst am Bindestrich
   umbricht — "3-Etagen-Modell" wurde zu "Das 3-" / "Etagen-Modell:". */
.zusammen { white-space: nowrap; }

.leise { color: var(--text-leise); }
.mitte { text-align: center; }
.mikrotext { font-size: var(--t-mikro); line-height: 1.5; color: var(--text-leise); }

/* --- 5. Abschnitte und der schraege Anschnitt ---------------------------- */

.abschnitt { padding-block: var(--luft-abschnitt); }
.abschnitt--eng { padding-block: calc(var(--luft-abschnitt) * 0.55); }
.abschnitt--flaeche { background: var(--flaeche); }
.abschnitt--leicht { background: var(--flaeche-leicht); }
.abschnitt--dunkel { background: var(--anthrazit); color: #d8d8d8; }
.abschnitt--dunkel h2, .abschnitt--dunkel h3, .abschnitt--dunkel h4 { color: var(--weiss); }

/*
  Die Diagonale. clip-path schneidet den Kasten selbst an, statt eine
  gedrehte Grafik darueberzulegen — dadurch bleibt der Anschnitt in jeder
  Farbe korrekt und braucht keine zweite Ebene.
  Das zusaetzliche Innenpolster haelt den Text aus der spitzen Ecke.
*/
/*
  Der Anschnitt addiert seine Tiefe aufs Polster — sonst laege Text in der
  spitzen Ecke. Weil "eng" und "normal" beide angeschnitten sein koennen,
  entstanden daraus zehn verschiedene Abstaende quer durch die Seite.
  Die Zugabe bezieht sich deshalb auf das jeweils gesetzte Polster, nicht
  auf einen festen Wert: aus zwei Grundabstaenden werden vier statt zehn.
*/
.abschnitt--schraeg-unten,
.abschnitt--schraeg-oben,
.abschnitt--schraeg-beide { --zugabe: var(--schraege); }

.abschnitt--schraeg-unten {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--schraege)), 0 100%);
  padding-bottom: calc(var(--luft-abschnitt) + var(--zugabe));
}
.abschnitt--schraeg-oben {
  clip-path: polygon(0 var(--schraege), 100% 0, 100% 100%, 0 100%);
  padding-top: calc(var(--luft-abschnitt) + var(--zugabe));
  margin-top: calc(var(--schraege) * -1);
}
.abschnitt--schraeg-beide {
  clip-path: polygon(0 var(--schraege), 100% 0, 100% calc(100% - var(--schraege)), 0 100%);
  padding-block: calc(var(--luft-abschnitt) + var(--zugabe));
  margin-top: calc(var(--schraege) * -1);
}
/* Ein enger Abschnitt bleibt eng, auch mit Anschnitt. */
.abschnitt--eng.abschnitt--schraeg-unten { padding-bottom: calc(var(--luft-abschnitt) * 0.55 + var(--zugabe)); }
.abschnitt--eng.abschnitt--schraeg-oben { padding-top: calc(var(--luft-abschnitt) * 0.55 + var(--zugabe)); }
.abschnitt--eng.abschnitt--schraeg-beide { padding-block: calc(var(--luft-abschnitt) * 0.55 + var(--zugabe)); }

/* --- 6. Knoepfe ---------------------------------------------------------- */

.knopf {
  display: inline-block;
  padding: 0.85em 1.7em;
  border: 2px solid var(--gold);
  background: var(--gold);
  color: var(--anthrazit);
  font-size: var(--t-klein);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s, translate 0.18s;
}
.knopf:hover, .knopf:focus-visible {
  /*
    Der Hover dunkelt die Flaeche ab. Weisse Schrift daraufkaeme nur auf
    2,69:1, das uebliche Anthrazit auf 3,98:1 — beides zu wenig fuer
    Beschriftung in dieser Groesse. Deshalb geht die Schrift zusaetzlich
    ins Fast-Schwarze und erreicht 5,27:1.
  */
  background: var(--gold-dunkel);
  border-color: var(--gold-dunkel);
  color: #2b2b2b;
  translate: 0 -2px;
}
/*
  Zweite Ebene. Auf der Startseite standen elf Knoepfe, alle in vollem
  Gold: der Kennenlerntermin, aber auch jeder Verweis auf eine andere
  Seite. Wenn alles gleich laut ruft, fuehrt nichts. Gold bleibt der
  Terminbuchung vorbehalten; Verweise innerhalb der Seite tragen dieselbe
  Form eine Stufe leiser.
*/
.knopf--rand {
  background: transparent;
  color: var(--anthrazit);
}
.knopf--rand:hover, .knopf--rand:focus-visible {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--anthrazit);
}
.knopf--hell { border-color: var(--weiss); background: var(--weiss); }
.knopf--breit { display: block; width: 100%; }

/* Textlink mit Pfeil, wie „Wir haben die Lösung ›“ auf der Startseite. */
/*
  Tippziele. Die Richtlinie verlangt mindestens 24x24 px (WCAG 2.5.8), auf
  dem Telefon sind 44 px die Groesse, bei der man nicht danebentippt. Die
  Textlinks waren 16 bis 28 px hoch. Statt die Schrift zu vergroessern
  bekommen sie senkrechtes Polster — die Zeile sieht gleich aus, die
  Trefferflaeche waechst.
*/
.pfeillink {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 2.75rem;
  padding-block: 0.35rem;
  font-weight: 500;
  color: var(--gold-text);
  text-decoration: none;
}
.pfeillink::after { content: '›'; font-size: 1.35em; line-height: 1; translate: 0 -0.06em; transition: translate 0.18s; }
.pfeillink:hover::after { translate: 0.25em -0.06em; }

/* --- 7. Kopfbereich ------------------------------------------------------ */

.kopf {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--weiss);
  transition: box-shadow 0.2s;
}
.kopf[data-gescrollt] { box-shadow: 0 0.125rem 0.75rem rgb(0 0 0 / 10%); }

.kopf__reihe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand);
  min-height: 4.5rem;
  /*
    Ohne dieses Polster bestimmte das Logo die Kopfhoehe allein: es war
    173 px breit, bei seinem Seitenverhaeltnis also 83 px hoch — genau die
    Hoehe des Kopfbereichs, oben wie unten null Luft. Die min-height kam
    dabei gar nicht zum Tragen.
  */
  padding-block: 0.7rem;
}

/* Etwas kleiner als zuvor (173 px), damit Logo und Polster zusammen nicht
   mehr Hoehe brauchen als der Kopfbereich vorher ganz allein. */
.kopf__marke img { width: clamp(7rem, 9.5vw, 8.75rem); height: auto; }

.kopf__schalter {
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
/* Drei Balken aus einem Element: der mittlere ist real, die anderen zwei
   sind Pseudoelemente. Beim Oeffnen wandern sie zum Kreuz. */
.kopf__balken,
.kopf__balken::before,
.kopf__balken::after {
  display: block;
  width: 1.6rem; height: 2px;
  background: var(--anthrazit);
  transition: translate 0.2s, rotate 0.2s, opacity 0.15s;
}
.kopf__balken::before, .kopf__balken::after { content: ''; position: absolute; }
.kopf__balken::before { translate: 0 -0.5rem; }
.kopf__balken::after { translate: 0 0.5rem; }
[aria-expanded='true'] .kopf__balken { background: transparent; }
[aria-expanded='true'] .kopf__balken::before { translate: 0 0; rotate: 45deg; }
[aria-expanded='true'] .kopf__balken::after { translate: 0 0; rotate: -45deg; }

.kopf__nav {
  position: fixed;
  /* Bezieht sich auf die tatsaechliche Kopfhoehe, die main.js misst —
     ein fester Wert stimmte nach jeder Aenderung am Logo nicht mehr. */
  inset: var(--kopfhoehe, 5.5rem) 0 auto;
  max-height: calc(100dvh - var(--kopfhoehe, 5.5rem));
  overflow-y: auto;
  background: var(--weiss);
  border-top: 1px solid var(--linie);
  box-shadow: var(--schatten);
  /* Zugeklappt ist die Navigation nicht nur unsichtbar, sondern auch aus
     dem Tabfluss und fuer Screenreader weg. */
  display: none;
}
.kopf__nav[data-offen] { display: block; }

.kopf__liste {
  list-style: none;
  margin: 0;
  padding: 0.5rem var(--rand) 1.5rem;
}
.kopf__liste li { margin: 0; }
.kopf__liste a:not(.knopf) {
  display: block;
  padding: 0.85rem 0;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--linie);
}
.kopf__liste a[aria-current='page'] { color: var(--gold-text); }
.kopf__cta { margin-top: 1.25rem; }
.kopf__cta .knopf { display: block; }

@media (width >= 62rem) {
  .kopf__schalter { display: none; }
  .kopf__nav {
    position: static;
    display: block;
    max-height: none;
    overflow: visible;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .kopf__liste {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2vw, 2rem);
    padding: 0;
  }
  .kopf__liste a:not(.knopf) { padding: 0.35rem 0; border: 0; }
  .kopf__liste a:not(.knopf)::after {
    content: '';
    display: block;
    height: 2px;
    background: var(--gold);
    scale: 0 1;
    transition: scale 0.2s;
  }
  .kopf__liste a:not(.knopf):hover::after,
  .kopf__liste a[aria-current='page']::after { scale: 1 1; }
  .kopf__cta { margin: 0; }
  .kopf__cta .knopf { padding: 0.7em 1.2em; font-size: var(--t-mikro); }
}

/* Wenn die Navigation offen ist, soll der Hintergrund nicht mitscrollen. */
body[data-nav-offen] { overflow: hidden; }
@media (width >= 62rem) { body[data-nav-offen] { overflow: visible; } }

/* --- 8. Hero ------------------------------------------------------------- */

.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(22rem, 52vh, 34rem);
  padding-block: clamp(3rem, 8vw, 6rem);
  background: var(--flaeche);
  isolation: isolate;
}
.hero__bild {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
}
/*
  Ohne Abdunkelung steht weisse Schrift auf hellen Bildstellen nicht
  kontrastsicher. Der Verlauf war zuerst zu kraeftig — vom Foto blieb
  kaum etwas uebrig, waehrend die Vorlage es deutlich zeigt. Jetzt
  dunkelt er nur dort, wo Text steht, und laeuft zur freien Bildseite hin
  aus. Gemessen bleibt Weiss auf der dunkelsten Textstelle ueber 7:1.
*/
.hero__schleier {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgb(0 0 0 / 28%) 0%, rgb(0 0 0 / 14%) 45%, rgb(0 0 0 / 26%) 100%),
    linear-gradient(95deg, rgb(0 0 0 / 58%) 0%, rgb(0 0 0 / 34%) 58%, rgb(0 0 0 / 6%) 100%);
}
/* Der Hero der Startseite setzt den Text nach rechts — dort ist der
   Verlauf gespiegelt, sonst laege die Schrift auf der hellen Seite. */
.hero--rechts .hero__schleier {
  background:
    linear-gradient(180deg, rgb(0 0 0 / 28%) 0%, rgb(0 0 0 / 14%) 45%, rgb(0 0 0 / 26%) 100%),
    linear-gradient(265deg, rgb(0 0 0 / 58%) 0%, rgb(0 0 0 / 34%) 58%, rgb(0 0 0 / 6%) 100%);
}
/* Die Vorlage schneidet den Hero unten diagonal an — dieselbe Geste wie
   bei den Abschnitten darunter. */
.hero--angeschnitten {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--schraege)), 0 100%);
  padding-bottom: calc(clamp(3rem, 8vw, 6rem) + var(--schraege));
}

.hero__inhalt { max-width: 40rem; }
.hero--rechts .hero__inhalt { margin-left: auto; text-align: right; }
.hero--rechts .hero__knoepfe { justify-content: flex-end; }
.hero--hell .hero__inhalt, .hero--hell h1, .hero--hell h2, .hero--hell h3 { color: var(--weiss); }
.hero--hell .hero__inhalt p { color: #ececec; }
/* Die Unterzeile faellt mit rund 22 px nicht unter "Grosstext" und
   braucht deshalb 4,5:1 statt 3:1. Auf einem Foto laesst sich das nicht
   allein ueber den Verlauf sichern — ein Schatten legt eine dunkle Kante
   direkt unter die Glyphen, unabhaengig davon, was hinter ihr liegt. */
.hero__unterzeile {
  font-size: var(--t-gross);
  font-weight: 400;
  margin-bottom: 1.5rem;
}
.hero--hell .hero__unterzeile,
.hero--hell h1,
.hero--hell h2 { text-shadow: 0 1px 3px rgb(0 0 0 / 55%); }
.hero__knoepfe { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
/* Auf dem Telefon stehen die Knoepfe untereinander. Unterschiedlich
   breite Bloecke wirken dort wie ein Fehler, deshalb gleiche Breite. */
@media (width < 34rem) {
  .hero__knoepfe { flex-direction: column; align-items: stretch; }
  .hero__knoepfe .knopf { width: 100%; }
}

/* Heller Hero ohne Bildabdunkelung — z. B. /3-etagen-modell/ */
.hero--flaeche { background: var(--flaeche); }
.hero--flaeche .hero__inhalt { color: var(--text); }

/*
  Zweispaltiger Hero: Text links, Medium rechts.

  Bei zwei gleich breiten Spalten blieben der Ueberschrift rund 590 px —
  zu wenig fuer ihre Groesse, sie lief auf drei Zeilen. Die Textspalte
  bekommt deshalb mehr Anteil, und die Ueberschrift faellt hier eine Stufe
  kleiner aus als im Hero ueber die volle Breite.
*/
.hero__raster {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}
/* Ohne Bild im Hintergrund braucht dieser Hero keine Mindesthoehe — sonst
   steht unter dem Knopf eine Handbreit Luft, die nichts traegt. */
.hero:has(.hero__raster) { min-height: 0; padding-block: clamp(2.5rem, 6vw, 4.5rem); }
@media (width >= 52rem) {
  .hero__raster { grid-template-columns: 1.15fr 0.85fr; }
}
.hero__raster h1 { font-size: clamp(1.9rem, 1.35rem + 2vw, 3.1rem); }
.hero__raster .hero__unterzeile { font-size: var(--t-basis); }

/* Im Hero steht der Text als Block, nicht als Fliesstext — enger gesetzt
   wirkt er als Einheit und spart die Hoehe, die der Vorlage fehlt. */
.hero__inhalt p { line-height: 1.45; }
.hero .dachzeile { margin-bottom: 0.4rem; }
.hero h1 { margin-bottom: 0.35em; }
.hero__unterzeile { margin-bottom: 1.25rem; }

/* --- 9. Raster und Karten ------------------------------------------------ */

.raster {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
/*
  Rasterspalten schrumpfen von sich aus nicht unter die Mindestbreite ihres
  Inhalts. Ein langes Wort oder ein breites Bild macht die Spalte dann
  breiter als den Bildschirm — und die ganze Seite seitlich scrollbar.
  min-width: 0 hebt diese Sperre auf; die Regeln oben (overflow-wrap,
  hyphens, max-width an Bildern) fangen den Inhalt dann sauber ab.
*/
.raster > *, .duo > *, .teamraster > *, .zahlenreihe > *, .hero__raster > * { min-width: 0; }
.raster--zwei { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.raster--drei-fest { grid-template-columns: 1fr; }
@media (width >= 48rem) { .raster--drei-fest { grid-template-columns: repeat(3, 1fr); } }
/* Genau zwei Spalten, auch wenn eine dritte passen wuerde. Bei vier
   Kacheln laesst auto-fit auf breiten Schirmen 3 + 1 stehen — die letzte
   sieht dann nach Rest aus statt nach Reihe. */
.raster--zwei-fest { grid-template-columns: 1fr; }
@media (width >= 52rem) { .raster--zwei-fest { grid-template-columns: repeat(2, 1fr); } }

/* Text-Bild-Paar. Auf dem Telefon immer Bild zuerst, ausser die Variante
   --text-zuerst sagt ausdruecklich etwas anderes. */
.duo {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
  --duo: 1fr 1fr;
}
/* --tauschen heisst: die zweite Spalte gehoert nach vorn. Auf dem Telefon
   ist das das Bild — es fuehrt in den Abschnitt hinein, so wie in der
   Vorlage. Ab Tablet wandert es nach links. */
.duo--tauschen > :first-child { order: 1; }
@media (width >= 52rem) {
  .duo { grid-template-columns: var(--duo); }
}
.duo--schmal-links { --duo: 1fr 1.7fr; }
.duo--schmal-rechts { --duo: 2fr 1fr; }

.karte {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--weiss);
  box-shadow: var(--schatten);
  transition: box-shadow 0.2s, translate 0.2s;
}
.karte:hover { box-shadow: var(--schatten-hoch); translate: 0 -3px; }
/*
  h2/h3 stehen global auf normalem Schnitt, damit <strong> darin wirken
  kann. Kartentitel ohne <strong> wirkten dadurch schwaecher als in der
  Vorlage — also tragen sie das Gewicht selbst.
  Enthaelt der Titel aber ein <strong>, waere das doppelt gemoppelt: dann
  saehe alles fett aus und die Hervorhebung ginge unter. Genau so setzt
  die Vorlage die Kacheln der Startseite — normal, mit einem betonten
  Schluesselwort.
*/
.karte__titel { font-size: var(--t-h4); font-weight: 700; }
.karte__titel:has(strong) { font-weight: 400; }
.karte__text { font-size: var(--t-klein); color: var(--text-leise); }

/* Symbol-Feld: SVG-Icon ueber Ueberschrift und Text, mittig. */
.symbolfeld { text-align: center; }
/* Die Icons standen mit 3,5–5 rem deutlich kleiner als in der Vorlage,
   wo sie das tragende Element der Kachel sind. */
.symbolfeld img { width: clamp(6rem, 16vw, 8rem); height: auto; margin: 0 auto 1.5rem; }
.symbolfeld h3, .symbolfeld h4 { font-size: var(--t-h4); }
.symbolfeld p { font-size: var(--t-klein); }

/* Symbol links, Text rechts — fuer Vorteilslisten. */
.symbolzeile { display: grid; grid-template-columns: auto 1fr; gap: 1rem 1.25rem; align-items: start; }
.symbolzeile img { width: 3rem; height: auto; }
.symbolzeile h4 { margin-bottom: 0.35em; }
.symbolzeile p { font-size: var(--t-klein); margin: 0; }

/* --- 10. Logoband -------------------------------------------------------- */

.logoband { padding-block: clamp(2rem, 4vw, 3rem); background: var(--weiss); }
.logoband__reihe { display: flex; align-items: center; gap: 0.5rem; }

.logoband__spur {
  display: flex;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  flex: 1;
  margin: 0;
  padding: 0.5rem 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
}
.logoband__spur::-webkit-scrollbar { display: none; }

.logoband__feld {
  flex: 0 0 auto;
  width: clamp(7.5rem, 22vw, 11rem);
  margin: 0;
  scroll-snap-align: center;
  display: grid;
  place-items: center;
}
.logoband__feld img {
  width: 100%;
  height: clamp(3.25rem, 7vw, 4.5rem);
  object-fit: contain;
  /* Die Kundenlogos sind farblich sehr heterogen. Leicht entsaettigt
     wirken sie als Band ruhiger, beim Hover kommt die Farbe zurueck. */
  opacity: 0.9;
  transition: opacity 0.25s, scale 0.25s;
}
.logoband__feld img:hover { opacity: 1; scale: 1.04; }

.logoband__pfeil {
  flex: 0 0 auto;
  display: none;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  border: 0;
  background: none;
  color: var(--text-leise);
  cursor: pointer;
}
.logoband__pfeil svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 2; }
.logoband__pfeil:hover { color: var(--anthrazit); }
/* Auf dem Telefon wischt man; die Pfeile erscheinen erst, wenn ein Zeiger
   im Spiel ist. */
@media (width >= 48rem) and (pointer: fine) {
  .logoband__pfeil { display: grid; }
}

/* --- 11. Kundenstimmen --------------------------------------------------- */

.stimme { display: flex; flex-direction: column; gap: 1rem; height: 100%; }
.stimme__logo { height: 2.5rem; width: auto; object-fit: contain; align-self: flex-start; }
.stimme__zitat { font-size: var(--t-h4); font-weight: 700; line-height: 1.3; color: var(--anthrazit); margin: 0; }
.sterne svg, .logoband__pfeil svg { flex: 0 0 auto; }
.stimme__wer { font-size: var(--t-klein); color: var(--text-leise); margin: 0; }
.stimme__text { font-size: var(--t-klein); color: var(--text-leise); }

.sterne { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; }
.sterne__reihe { display: flex; gap: 0.15rem; color: var(--gold); }
.sterne svg { width: 1.5rem; height: 1.5rem; fill: currentColor; }
.sterne__wert { font-weight: 700; color: var(--anthrazit); }

.herausforderungen { margin: 1.5rem 0 0; display: grid; gap: 1.1rem; }
.herausforderungen dt { font-size: var(--t-h4); font-weight: 700; color: var(--anthrazit); }
.herausforderungen dd { margin: 0.2rem 0 0; font-size: var(--t-klein); color: var(--text-leise); }

/* --- 12. Zahlen ---------------------------------------------------------- */

.zahlenreihe {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  text-align: center;
}
.zahl__wert {
  display: block;
  font-size: var(--t-zahl);
  font-weight: 700;
  line-height: var(--eng);
  color: var(--anthrazit);
  font-variant-numeric: tabular-nums;
}
.zahl__label { display: block; margin-top: 0.5rem; font-size: var(--t-klein); color: var(--text-leise); }

/* --- 13. Ablaufkarten (1. / 2. / 3.) ------------------------------------- */

.schritt { position: relative; padding-top: 2.5rem; }
.schritt__nummer {
  position: absolute;
  top: 0; left: 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: 3rem; height: 3rem;
  background: var(--gold);
  color: var(--anthrazit);
  font-size: var(--t-gross);
  font-weight: 700;
  line-height: var(--eng);
  border-radius: 50%;
}

/* --- 14. Preiskarten (3-Etagen-Modell) ----------------------------------- */

.etage { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

/*
  Hoechstens drei Modulkacheln nebeneinander. Das allgemeine Raster stellt
  ab rund 68 rem eine vierte Spalte — die Kacheln werden dann so schmal,
  dass die Titel dreizeilig brechen, und seit die 2. Etage fuenf Module
  hat, bliebe eine einzelne Kachel in der zweiten Reihe stehen. Bei drei
  Spalten sind es 3 + 2, und die Karten behalten ihre Lesebreite.
*/
@media (width >= 62rem) {
  .etage .raster { grid-template-columns: repeat(3, 1fr); }
}
.etage__kopf { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.etage__nummer { font-size: var(--t-h4); font-weight: 700; color: var(--gold-text); margin: 0 0 0.25rem; }

/*
  Das Pluszeichen zwischen den Etagen.

  Als Schriftzeichen gesetzt blieb es duenn — Red Hat Display zeichnet ein
  schlankes "+", die Vorlage zeigt eine massive Form. Deshalb aus zwei
  Balken gebaut. Das Zeichen im Markup bleibt stehen: ohne Stylesheet ist
  es immer noch ein Plus.
*/
.plus {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(2.5rem, 6vw, 3.75rem);
  height: clamp(2.5rem, 6vw, 3.75rem);
  margin: clamp(1.5rem, 4vw, 2.5rem) auto;
  font-size: 0;
}
.plus::before,
.plus::after {
  content: '';
  position: absolute;
  background: var(--gold);
  border-radius: 0.1rem;
}
/* Waagerechter Balken, dann der senkrechte. */
.plus::before { width: 100%; height: 0.85rem; }
.plus::after { width: 0.85rem; height: 100%; }

.modul {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.5rem, 2.4rem + 0.4vw, 2.8rem);
  /* Platz fuer den gekippten Preiszettel, der ueber den Kartenrand ragt. */
  padding-bottom: 4.25rem;
  background: var(--weiss);
  box-shadow: var(--schatten);
}
/* Ohne Preiszettel ist das reservierte Polster nur tote Flaeche. */
.modul:not(:has(.modul__preis)) { padding-bottom: clamp(1.5rem, 2.4rem + 0.4vw, 2.8rem); }
/* Der Kreis mit dem Symbol sitzt halb ueber der oberen Kartenkante.
   In der Vorlage ist das Symbol 80 px gross und traegt die Kachel — mit
   30 px war es hier ein Beiwerk. */
.modul__symbol {
  position: absolute;
  top: 0; right: clamp(1.25rem, 3vw, 2rem);
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 6.5rem; height: 6.5rem;
  background: var(--weiss);
  border-radius: 50%;
  box-shadow: var(--schatten);
}
.modul__symbol img { width: 5rem; height: 5rem; }
/*
  Nachgemessen an der Vorlage: dort steht der Titel mit 28,8 px im
  mittleren Schnitt (500), nicht fett. Er wirkt trotzdem kraeftiger als
  meiner mit 24 px in 700 — die Groesse traegt ihn, nicht das Gewicht.
*/
.modul__titel {
  font-size: clamp(1.4rem, 1.05rem + 1.05vw, 1.8rem);
  font-weight: 500;
  /* Mehr Luft nach oben: der Symbolkreis ragt 3,25 rem ueber die
     Kartenkante und braucht Platz, bevor der Titel beginnt. */
  margin: 2.25rem 0 0.25rem;
  overflow-wrap: break-word;
}
/* Die Punkte einer Karte brauchen Abstand zueinander — sonst laufen
   Erlaeuterung und naechster Punkt ineinander. */
.modul dl { display: grid; gap: 1.1rem; margin: 0; }

/*
  Jeder Punkt beginnt mit einem goldenen Haken, wie in der Vorlage. Der
  Haken kommt als Maske, damit er die Farbe aus dem Stylesheet nimmt und
  nicht als zweite Datei gepflegt werden muss. Die Erlaeuterung darunter
  ruecken wir auf dieselbe Kante ein — der Haken gehoert zum Punkt, nicht
  zur Zeile.

  aria-hidden braucht es nicht: ein Hintergrundbild liest ohnehin kein
  Screenreader vor.
*/
.modul__punkt { margin: 0; }
.modul__punkt dt {
  font-size: var(--t-basis);
  font-weight: 700;
  color: var(--anthrazit);
}

/*
  Der Haken gilt nur innerhalb der Modulkarten. Die Herausforderungen auf
  der Startseite teilen sich diese Klasse fuer Schriftgroesse und Farbe —
  dort stehen aber Probleme ("Viele Service-Anrufe"), keine Leistungen.
  Ein Haken daneben liest sich wie ein Angebot und sagt das Gegenteil
  dessen, was der Abschnitt meint.
*/
.modul .modul__punkt dt { position: relative; padding-left: 2.1rem; }
.modul .modul__punkt dd { padding-left: 2.1rem; }
.modul .modul__punkt dt::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.18em;
  width: 1.35rem;
  height: 1.35rem;
  background: var(--gold);
  mask: var(--haken) center / contain no-repeat;
  -webkit-mask: var(--haken) center / contain no-repeat;
}
.modul__punkt dd {
  margin: 0.15rem 0 0;
  font-size: var(--t-klein);
  color: var(--text-leise);
}

/* Der gekippte Preiszettel unten rechts. Er ragt bewusst ueber die Karte
   hinaus — genau wie auf der alten Seite. */
.modul__preis {
  position: absolute;
  right: -0.5rem;
  bottom: 1.25rem;
  padding: 0.5rem 1.25rem;
  background: var(--gold);
  color: var(--anthrazit);
  font-size: var(--t-gross);
  font-weight: 700;
  white-space: nowrap;
  rotate: -3deg;
  box-shadow: var(--schatten);
}
/* 0.6em der Preisgroesse ergab knapp 11 px — unter der Grenze, ab der
   Fliesstext auf dem Telefon noch bequem lesbar ist. */
.modul__preis small {
  display: block;
  font-size: max(0.72em, 0.8rem);
  font-weight: 500;
  line-height: var(--eng);
}

/* --- 15. Aufklapper ------------------------------------------------------ */

.klapper { border-bottom: 1px solid var(--linie); }
.klapper > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0;
  font-size: var(--t-gross);
  font-weight: 700;
  color: var(--anthrazit);
  cursor: pointer;
  list-style: none;
}
.klapper > summary::-webkit-details-marker { display: none; }
.klapper > summary::after {
  content: '+';
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.75rem; height: 1.75rem;
  border: 1px solid var(--gold);
  color: var(--gold-text);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
  transition: rotate 0.2s, background 0.2s, color 0.2s;
}
.klapper[open] > summary::after { content: '−'; background: var(--gold); color: var(--anthrazit); }
.klapper__inhalt { padding-bottom: 1.25rem; font-size: var(--t-klein); color: var(--text-leise); }

/* --- 16. Medien ---------------------------------------------------------- */

.medium { position: relative; background: var(--flaeche); }
.medium video, .medium img { width: 100%; display: block; }
.medium--kino { aspect-ratio: 16 / 9; }
.medium--kino video { height: 100%; object-fit: cover; }

/* Anschnitt-Bild, das ueber den Sectionrand hinaus laeuft. */
.bild--gekippt { rotate: -1.5deg; box-shadow: var(--schatten-hoch); }

/* Klick-zum-Laden. Wird nur eingesetzt, wenn ein externer Dienst sonst
   ungefragt beim Seitenaufruf mitlaedt. */
.spaetlader {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 22rem;
  padding: 2rem;
  background: var(--flaeche);
  text-align: center;
}
.spaetlader__hinweis { max-width: 32rem; font-size: var(--t-klein); color: var(--text-leise); }

/* --- 17. Teamkarten ------------------------------------------------------ */

/* Feste Spaltenzahl statt auto-fit: mit auto-fit stuenden auf breiten
   Schirmen sechs sehr schmale Portraits nebeneinander. Vier ist die
   Aufteilung der alten Seite und laesst die Gesichter gross genug. */
.teamraster {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  grid-template-columns: repeat(2, 1fr);
}
@media (width >= 40rem) { .teamraster { grid-template-columns: repeat(3, 1fr); } }
@media (width >= 60rem) { .teamraster { grid-template-columns: repeat(4, 1fr); } }
.person { position: relative; overflow: hidden; }
.person img { width: 100%; aspect-ratio: 7 / 10; object-fit: cover; display: block; }
/* Das gekippte Namensschild ist das Erkennungsmerkmal der Teamseite. */
.person__schild {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 1.5rem 1rem 0.9rem;
  background: rgb(62 62 62 / 88%);
  color: var(--weiss);
  text-align: center;
  clip-path: polygon(0 1.25rem, 100% 0, 100% 100%, 0 100%);
}
.person__name { margin: 0; font-size: var(--t-basis); font-weight: 700; color: var(--weiss); }
.person__rolle { margin: 0; font-size: var(--t-mikro); color: #cfcfcf; }
.person__rolle a { display: inline-block; min-height: 2.75rem; padding-block: 0.6rem; }
.person--offen { display: grid; place-items: center; background: var(--flaeche); }
.person--offen img { aspect-ratio: 7 / 10; object-fit: contain; padding: 25%; }

/* --- 18. CTA-Band -------------------------------------------------------- */

.ctaband {
  background: var(--gold);
  padding-block: clamp(3rem, 7vw, 5.5rem);
}
.ctaband__karte {
  position: relative;
  max-width: 46rem;
  margin-inline: auto;
  padding: clamp(2rem, 5vw, 4rem);
  isolation: isolate;
}
/*
  Die weisse Flaeche ist ein eigenes, gekipptes Element hinter dem Text —
  nicht die Karte selbst. Wuerde man die Karte drehen und den Inhalt
  zurueckdrehen, kippte jeder Block um seinen eigenen Mittelpunkt und die
  Zeilen liefen auseinander. So bleibt der Text exakt waagerecht.
*/
.ctaband__karte::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--weiss);
  box-shadow: var(--schatten-hoch);
}
/* Die Kippung ist das Erkennungsmerkmal des Bandes und fehlte auf dem
   Telefon ganz. Dort faellt sie schwaecher aus, damit an den Ecken kein
   Rand verlorengeht. */
.ctaband__karte::before { rotate: -1deg; }
@media (width >= 48rem) {
  .ctaband__karte::before { rotate: -1.5deg; }
}
.ctaband__titel { font-size: var(--t-h1); margin-bottom: 0.4em; }
.ctaband__text { margin-bottom: 1.75rem; }

/* --- 19. Fusszeile ------------------------------------------------------- */

.fuss { background: var(--anthrazit); color: #d0d0d0; font-size: var(--t-klein); }
.fuss a { color: inherit; text-decoration: none; }
.fuss a:hover { color: var(--gold); text-decoration: underline; }

.fuss__raster {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
@media (width >= 48rem) { .fuss__raster { grid-template-columns: 1.4fr 1fr 1fr; } }

.fuss__marke img { width: 9.5rem; margin-bottom: 1rem; }
.fuss__claim { font-size: var(--t-mikro); letter-spacing: 0.06em; text-transform: uppercase; color: #b0b0b0; margin-bottom: 1.5rem; }
.fuss__adresse { line-height: 1.7; }
.fuss__adresse strong { color: var(--weiss); }
.fuss__label { margin: 0 0 0.15rem; font-size: var(--t-mikro); color: #b0b0b0; }
.fuss__wert { margin: 0 0 1.25rem; font-size: var(--t-gross); font-weight: 700; color: var(--weiss); }
.fuss__nav ul { list-style: none; margin: 0; padding: 0; }
/*
  Tippziele in der Fusszeile. Dieselbe Rechnung wie beim Pfeillink weiter
  oben: die Zeilen waren 19 px hoch und lagen damit unter den 24 px aus
  WCAG 2.5.8 — auf dem Telefon trifft man zwischen Impressum und
  Datenschutz zuverlaessig daneben. Die Schrift bleibt, die Trefferflaeche
  waechst ueber senkrechtes Polster; der Abstand zwischen den Punkten
  wandert dafuer aus dem margin heraus.
*/
.fuss__nav li { margin-bottom: 0; }
.fuss__nav a { display: inline-flex; align-items: center; min-height: 2.75rem; padding-block: 0.25rem; }

.fuss__zeile { border-top: 1px solid rgb(255 255 255 / 12%); padding-block: 1rem; font-size: var(--t-mikro); }
.fuss__zeile p { margin: 0; }

/* --- 20. Formulare ------------------------------------------------------- */

.feld { margin-bottom: 1.25rem; }
/*
  <fieldset> bringt eine eigenwillige Voreinstellung mit: min-width wird auf
  min-content gesetzt. Ein Raster darin kann dadurch schmaler werden als
  sein Inhalt, und der Ueberhang schiebt die ganze Seite seitlich raus.
  min-width: 0 stellt das ab.
*/
.feldgruppe {
  min-width: 0;
  border: 0;
  padding: 0;
  margin: 0 0 2rem;
}
.feld__legende {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 0.6rem;
  font-size: var(--t-klein);
  font-weight: 500;
  color: var(--anthrazit);
}
.feld label { display: block; margin-bottom: 0.35rem; font-size: var(--t-klein); font-weight: 500; color: var(--anthrazit); }
.feld input, .feld textarea, .feld select {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--linie);
  background: var(--weiss);
  font: inherit;
  font-size: var(--t-basis);
  color: var(--text);
}
.feld input:focus, .feld textarea:focus, .feld select:focus { border-color: var(--gold); }
.feld textarea { min-height: 8rem; resize: vertical; }
.feld--pflicht label::after { content: ' *'; color: var(--gold-text); }

/* Auswahl als klickbare Kacheln statt Radiobuttons. */
.wahl { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); }
.wahl input { position: absolute; opacity: 0; pointer-events: none; }
.wahl label {
  display: grid;
  place-items: center;
  padding: 0.8rem 0.5rem;
  margin: 0;
  border: 1px solid var(--linie);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.wahl input:checked + label { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 16%, transparent); }
.wahl input:focus-visible + label { outline: 3px solid var(--anthrazit); outline-offset: 3px; box-shadow: 0 0 0 3px var(--weiss); }

/* Honigtopf gegen Formularspam: fuer Menschen unsichtbar, fuer Bots
   verlockend. display:none wuerde manche Bots warnen, deshalb wegschieben. */
.honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.meldung { padding: 1rem 1.25rem; margin-bottom: 1.5rem; font-size: var(--t-klein); border-left: 4px solid var(--gold); background: var(--flaeche); }
.meldung--fehler { border-left-color: #c0392b; }

/* --- 21. Rechtstexte ----------------------------------------------------- */

.rechtstext { max-width: 46rem; }
.rechtstext h2 { font-size: var(--t-h3); margin-top: 2.5rem; font-weight: 700; }
.rechtstext h3 { font-size: var(--t-h4); margin-top: 1.75rem; }
.rechtstext h2:first-child, .rechtstext h3:first-child { margin-top: 0; }
.rechtstext ul { padding-left: 1.25rem; }
.rechtstext li { font-size: var(--t-klein); }
.rechtstext p { font-size: var(--t-klein); }

/* --- 22. Sprungnavigation innerhalb einer Seite -------------------------- */

.ankerleiste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 clamp(1rem, 3vw, 2.5rem);
  padding-block: 0.5rem;
  list-style: none;
  margin: 0;
  border-bottom: 1px solid var(--linie);
}
.ankerleiste li { margin: 0; }
.ankerleiste a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: 0.25rem;
  font-size: var(--t-klein);
  font-weight: 500;
  color: var(--gold-text);
  text-decoration: none;
}
.ankerleiste a::after { content: '↓'; margin-left: 0.4em; }

/* --- 23. Stimmenband ----------------------------------------------------- */

.stimmenband {
  display: flex;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin: 0;
  padding: 0.5rem 0 1.25rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.stimmenband > li {
  flex: 0 0 min(88%, 24rem);
  margin: 0;
  scroll-snap-align: start;
}
.stimmenband .stimme { height: 100%; }

/* --- 24. Kontaktkarte ---------------------------------------------------- */

.kontaktkarte { position: relative; margin: 0; }
.kontaktkarte img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
/* Das gekippte goldene Schild sitzt ueber der unteren rechten Bildecke —
   dieselbe Geste wie die Preiszettel im 3-Etagen-Modell. */
.kontaktkarte__schild {
  position: relative;
  margin: -3rem 0 0 auto;
  width: fit-content;
  max-width: 100%;
  padding: 1.1rem 1.6rem;
  background: var(--gold);
  color: var(--anthrazit);
  font-size: var(--t-klein);
  rotate: -2deg;
  box-shadow: var(--schatten);
}
.kontaktkarte__schild p { margin: 0; }
.kontaktkarte__name { font-size: var(--t-gross); font-weight: 700; margin-bottom: 0.2rem !important; }
.kontaktkarte__schild a { display: inline-block; min-height: 2.5rem; padding-block: 0.4rem; text-decoration: none; }
.kontaktkarte__schild a:hover { color: var(--anthrazit); text-decoration: underline; }

/* --- 25. Terminfenster --------------------------------------------------- */

.dialog {
  width: min(100% - 2rem, 32rem);
  max-height: min(90dvh, 44rem);
  padding: 0;
  border: 0;
  background: var(--weiss);
  color: var(--text);
  box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 28%);
  overflow: visible;
}
/* Der Dialog liegt ohne margin:auto oben links im Ansichtsfenster. */
.dialog[open] { margin: auto; }

.dialog::backdrop {
  background: rgb(30 30 30 / 62%);
  backdrop-filter: blur(2px);
}

/* Der goldene Streifen oben nimmt das Abschlussband der Seite auf. */
.dialog__inhalt {
  padding: clamp(1.75rem, 5vw, 2.75rem);
  border-top: 5px solid var(--gold);
  max-height: min(90dvh, 44rem);
  overflow-y: auto;
}
.dialog__titel { font-size: var(--t-h3); margin-bottom: 0.6em; }
.dialog__aktion { margin: 1.75rem 0 0; }

.dialog__schliessen { position: absolute; top: 0.5rem; right: 0.5rem; margin: 0; z-index: 1; }
.dialog__schliessen button {
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  border: 0;
  background: none;
  color: var(--text-leise);
  cursor: pointer;
}
.dialog__schliessen svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.dialog__schliessen button:hover { color: var(--anthrazit); }

.dialog__oder {
  margin: 2rem 0 0.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linie);
  font-size: var(--t-klein);
  color: var(--text-leise);
}
.dialog__wege { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.dialog__wege li { margin: 0; }
.dialog__wege .fuss__label { display: block; color: var(--text-leise); }
.dialog__wege a {
  display: inline-block;
  min-height: 2.5rem;
  padding-block: 0.3rem;
  font-size: var(--t-gross);
  font-weight: 700;
  color: var(--anthrazit);
  text-decoration: none;
}
.dialog__wege a:hover { color: var(--gold-text); text-decoration: underline; }

@media (width >= 34rem) {
  .dialog__wege { grid-template-columns: 1fr 1fr; }
}

/* Sanft einblenden — aber nur, wenn Bewegung erwuenscht ist. */
@media (prefers-reduced-motion: no-preference) {
  .dialog[open] { animation: dialog-auf 0.18s ease-out; }
  .dialog[open]::backdrop { animation: blende-auf 0.18s ease-out; }
}
@keyframes dialog-auf {
  from { opacity: 0; translate: 0 0.75rem; }
  to   { opacity: 1; translate: 0 0; }
}
@keyframes blende-auf { from { opacity: 0; } to { opacity: 1; } }

/* --- 26. Videofassade ---------------------------------------------------- */

.fassade { margin: 0; }

.fassade__knopf {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--anthrazit);
  cursor: pointer;
  overflow: hidden;
}
.fassade__knopf img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: scale 0.4s, filter 0.3s;
}
.fassade__knopf:hover img,
.fassade__knopf:focus-visible img { scale: 1.03; filter: brightness(0.85); }

/* Der Abspielknopf sitzt in der Mitte. Gold statt YouTube-Rot: die
   Fassade gehoert zur Seite, nicht zum Anbieter. */
.fassade__abspielen {
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: 4.5rem; height: 4.5rem;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0.25rem 1.5rem rgb(0 0 0 / 35%);
  transition: scale 0.2s, background 0.2s;
}
.fassade__abspielen svg { fill: var(--anthrazit); translate: 0.12rem 0; }
.fassade__knopf:hover .fassade__abspielen { scale: 1.08; background: var(--weiss); }

/* Beschriftung unten links, auf einem Verlauf, damit sie auf jedem
   Standbild lesbar bleibt. */
.fassade__beschriftung {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 2.5rem 1.25rem 1rem;
  background: linear-gradient(180deg, transparent, rgb(0 0 0 / 78%));
  color: var(--weiss);
  font-size: var(--t-klein);
  font-weight: 700;
  text-align: left;
  text-shadow: 0 1px 3px rgb(0 0 0 / 60%);
}
.fassade__dauer { font-weight: 400; opacity: 0.85; }

.fassade__hinweis {
  margin-top: 0.6rem;
  font-size: var(--t-mikro);
  line-height: 1.5;
  color: var(--text-leise);
}

.fassade__spieler {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  background: #000;
}

/* --- 27. Projektband ----------------------------------------------------- */

/*
  Die drei Wohnfinder-Projekte standen untereinander und machten den
  Abschnitt 2124 px hoch — die Vorlage zeigt sie als Slider. Hier
  uebernimmt Scroll-Snap dieselbe Aufgabe ohne Widget: eine Karte fuellt
  die Spalte, die naechste schaut an, und gewischt wird mit der Geste,
  die auf dem Telefon ohnehin naheliegt.
*/
.projektband {
  display: flex;
  gap: clamp(1rem, 2vw, 1.5rem);
  margin: 0;
  padding: 0.25rem 0 1.25rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.projektband > li {
  flex: 0 0 min(86%, 22rem);
  margin: 0;
  padding: 0;
  overflow: hidden;
  scroll-snap-align: start;
}

/* --- 28. Dialog in weit -------------------------------------------------- */

.dialog--weit { width: min(100% - 2rem, 40rem); }

/*
  Rueckfallebene ohne JavaScript: ein <dialog> ohne open-Attribut ist
  display:none. Wird es ueber die Adresse angesprungen, klappt es hier
  als normaler Abschnitt auf — dann eben ohne Verdunkelung, aber
  vollstaendig bedienbar. Ein Formular, an dem Auftraege haengen, darf
  nicht davon abhaengen, dass ein Skript laedt.
*/
.dialog:target:not([open]) {
  display: block;
  position: static;
  width: min(100% - 2rem, 40rem);
  max-height: none;
  margin: 3rem auto;
  box-shadow: var(--schatten-hoch);
}
.dialog:target:not([open]) .dialog__schliessen { display: none; }
.dialog:target:not([open]) .dialog__inhalt { max-height: none; }

/* --- 29. Case Study ------------------------------------------------------ */

/*
  Das Titelbild der Fallstudie ist ein DIN-hohes PDF-Cover. Ueber eine
  halbe Spalte gezogen wurde es 850 px hoch und machte den Abschnitt fast
  doppelt so lang wie in der Vorlage, wo es in fester, deutlich kleinerer
  Breite steht.
*/
.casebild { max-width: 24rem; margin-inline: auto; }

/* Pfeile flankieren das Projektband wie beim Logoband. Auf dem Telefon
   bleiben sie weg — dort wischt man. */
.projektband__reihe { display: flex; align-items: center; gap: 0.25rem; }
.projektband__reihe .projektband { flex: 1; min-width: 0; }
@media (width < 48rem) or (pointer: coarse) {
  .projektband__reihe > .logoband__pfeil { display: none; }
}

/* --- 30. Projektkarten --------------------------------------------------- */

/*
  Die Karten im Projektband. Sie tragen drei verschiedene Sichtfenster —
  Video, Standbild oder Logo — und muessen trotzdem gleich hoch wirken.
  Deshalb sitzt das Seitenverhaeltnis am Fenster, nicht am Inhalt: eine
  Karte ohne Bildmaterial faellt dadurch nicht aus der Reihe.
*/
.projektkarte { display: flex; flex-direction: column; padding: 0; }
.projektkarte__fenster { aspect-ratio: 16 / 10; overflow: hidden; background: var(--flaeche); }
.projektkarte__fenster video,
.projektkarte__fenster--bild img { width: 100%; height: 100%; object-fit: cover; }

/* Die Referenzbilder liegen alle als 800 x 500 vor, also im Format des
   Fensters. cover schneidet dadurch nichts weg und haelt trotzdem jede
   Karte gleich hoch, falls doch einmal ein anderes Format dazukommt. */

/* Rueckfallebene ohne Bildmaterial: das Logo mittig auf grauer Flaeche.
   Kein Grauverlauf, kein "Bild folgt" — die Karte sieht dadurch nicht
   nach Luecke aus, sondern nach Absicht. */
.projektkarte__fenster--logo { display: grid; place-items: center; padding: 2rem; }
.projektkarte__fenster--logo img { width: min(60%, 11rem); height: auto; object-fit: contain; }

.projektkarte__text { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.25rem 1.5rem 1.5rem; }
.projektkarte__kunde {
  margin: 0;
  font-size: var(--t-mikro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--anthrazit);
}
.projektkarte__text .karte__titel { margin: 0; font-size: var(--t-gross); }
.projektkarte__text .karte__text { margin: 0; }
/* Die Aktion steht unten buendig, egal wie lang der Text darueber ist. */
.projektkarte__aktion { margin: auto 0 0; padding-top: 0.5rem; }

/* --- 31. Marken ----------------------------------------------------------- */

/* Kleine Etiketten fuer die eingesetzten Module. Keine Filterknoepfe —
   sie sagen nur, was in dem Projekt steckt. */
.marken { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.25rem 0 0; padding: 0; list-style: none; }
.marken li {
  margin: 0;
  padding: 0.2rem 0.6rem;
  font-size: var(--t-mikro);
  line-height: 1.5;
  color: var(--text-leise);
  background: var(--flaeche);
  border: 1px solid var(--linie);
}

/* --- 32. Neu-Marke und Modulverweis --------------------------------------- */

/* Die Marke sitzt im Kartentitel und nicht als Ecke ueber der Karte —
   dort waere sie mit dem Symbolkreis kollidiert.

   Sparsam einsetzen: "neu" verliert seine Wirkung, sobald es an vielen
   Stellen steht. Die beiden Bausteine Blog & Social Media und
   Magazin-Recycling tragen sie gemeinsam, weil sie zusammen eingefuehrt
   wurden und nebeneinander stehen — das liest sich als ein neues
   Angebot, nicht als zwei Rufe. */
.marke--neu {
  display: inline-block;
  translate: 0 -0.15em;
  margin-left: 0.5em;
  padding: 0.15em 0.55em;
  font-size: var(--t-mikro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--anthrazit);
  background: var(--gold);
  vertical-align: middle;
}

/* Der Verweis auf die Modulseite steht unten in der Kachel, nicht mitten
   im Text — er ist der Ausgang, nicht der Inhalt. */
.modul__mehr { margin: 1.25rem 0 0; }

/* --- 33. Flussdiagramm ---------------------------------------------------- */

/*
  Aus einer Quelle werden viele Beitraege — das ist die ganze Aussage des
  Moduls und sie gehoert an den Anfang der Seite. Gebaut aus Text statt
  als Bild: eine SVG-Grafik koennte die selbst gehostete Schrift nicht
  benutzen (in einem <img> gilt das Stylesheet der Seite nicht), muesste
  ihre Beschriftung also in Pfade wandeln — und waere damit weder
  vorlesbar noch aenderbar.

  Auf schmalen Displays stehen die Stufen untereinander, der Pfeil zeigt
  nach unten; ab Tablet nebeneinander mit Pfeil nach rechts.
*/
.fluss { display: grid; gap: 0.75rem; align-items: stretch; margin: 0; padding: 0; list-style: none; }
.fluss > li { margin: 0; }
.fluss__stufe {
  height: 100%;
  padding: 1.1rem 1.25rem;
  background: var(--weiss);
  border-left: 4px solid var(--linie);
  box-shadow: var(--schatten);
}
.fluss__stufe--quelle { border-left-color: var(--anthrazit); }
.fluss__stufe--ergebnis { border-left-color: var(--gold); }
.fluss__titel { margin: 0 0 0.35rem; font-size: var(--t-klein); font-weight: 700; color: var(--anthrazit); }
.fluss__liste { margin: 0; padding: 0; list-style: none; font-size: var(--t-mikro); color: var(--text-leise); }
.fluss__liste li { margin: 0 0 0.2rem; }
.fluss__liste li:last-child { margin-bottom: 0; }

/* Der Pfeil ist Dekoration und traegt keine Bedeutung — er steht deshalb
   in ::after und nicht im Text. */
.fluss > li:not(:last-child)::after {
  content: '\2193';
  display: block;
  padding-top: 0.5rem;
  font-size: 1.5rem;
  line-height: 1;
  text-align: center;
  color: var(--gold-text);
}
/*
  Nebeneinander erst, wenn wirklich Platz ist — und nur ausserhalb einer
  halben Spalte. Im Hero steht das Diagramm neben dem Text und hat dort
  keine 78 rem zur Verfuegung; drei Spalten darin waeren rund 150 px breit
  und haetten "Veroeffentlichung" in drei Zeilen zerlegt. Die Variante
  --senkrecht bleibt deshalb untereinander, unabhaengig von der Breite des
  Fensters.
*/
@media (width >= 48rem) {
  .fluss { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
  .fluss > li { position: relative; }
  .fluss > li:not(:last-child)::after {
    content: '\203A';
    position: absolute;
    top: 50%;
    right: -1.25rem;
    translate: 0 -50%;
    padding: 0;
    font-size: 1.8rem;
  }
}

/* --- 34. Projektband mit betonter Mitte ---------------------------------- */

/*
  Variante des Bandes fuer /referenzen/: eine Karte steht gross in der
  Mitte, links und rechts schaut je die naechste an. Vorher lag die erste
  Karte buendig am linken Rand — das sah aus wie eine Liste, die zufaellig
  abgeschnitten ist, und keine Karte war die gemeinte.

  Das Band bricht aus der Huelle aus und laeuft von Rand zu Rand. Der
  Grund ist nicht Optik, sondern Platz: bleibt es in der Huelle, ist auf
  dem Telefon nach Abzug der Seitenraender kein Streifen mehr uebrig, an
  dem die Nachbarkarte noch zu erkennen waere.

  Alle Masse in vw statt in Prozent. Prozentangaben fuer die Kartenbreite
  rechnen gegen den Innenraum des Bandes — und der haengt am Polster, das
  seinerseits aus der Kartenbreite folgt. Diese Schleife hat die Karte auf
  dem grossen Schirm auf 453 statt 640 px gedrueckt.
*/
.projektband__reihe--mitte { position: relative; display: block; }

.projektband--mitte {
  /*
    Die Mittelkarte waechst mit dem Bildschirm bis zur Inhaltsbreite und
    hoert dort auf — breiter als der uebrige Seiteninhalt soll sie nicht
    werden. Die 78vw halten daneben immer Platz fuer die angeschnittenen
    Nachbarn frei: erst ab rund 1600 px greift die Inhaltsbreite als
    Deckel, davor bestimmt der Bildschirm die Breite.
  */
  --mittebreite: min(78vw, var(--huelle));
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  /* Halbe Restbreite links und rechts: nur so kann auch die erste und die
     letzte Karte in die Mitte rutschen. */
  padding-inline: calc((100vw - var(--mittebreite)) / 2);
  padding-block: 0.5rem 1.5rem;
  scroll-snap-type: x mandatory;
}
.projektband--mitte > li {
  flex: 0 0 var(--mittebreite);
  scroll-snap-align: center;
}

/*
  Die Nachbarn treten zurueck — aber erst, wenn das Skript die Mitte auch
  wirklich bestimmen kann. Ohne JavaScript fehlt das Attribut am Band,
  dann bleiben alle Karten gleichwertig; ein blass gestelltes Band ohne
  hervorgehobene Mitte waere schlechter als gar keine Hervorhebung.
*/
.projektband--mitte[data-mitte-aktiv] > li {
  transition: scale 0.25s, opacity 0.25s;
  opacity: 0.5;
}
.projektband--mitte[data-mitte-aktiv] > li[data-mitte] { scale: 1; opacity: 1; }

/* Das Zurueckskalieren erst ab Tablet. Auf dem Telefon frisst es den
   Streifen auf, an dem die Nachbarkarte ueberhaupt noch zu erkennen ist:
   von 21 px blieben nach dem Schrumpfen 14 px. Dort reicht die blassere
   Stellung. */
@media (width >= 44rem) {
  .projektband--mitte[data-mitte-aktiv] > li { scale: 0.95; }
}
@media (prefers-reduced-motion: reduce) {
  .projektband--mitte[data-mitte-aktiv] > li { transition: none; }
}

/*
  Die Pfeile liegen ueber den angeschnittenen Nachbarn statt neben dem
  Band — daneben waeren sie ausserhalb des Bildschirms, seit das Band von
  Rand zu Rand laeuft. Sie sitzen am Rand der Huelle, also dort, wo die
  Mittelkarte aufhoert.
*/
.projektband__reihe--mitte > .logoband__pfeil {
  position: absolute;
  top: 45%;
  z-index: 1;
  translate: 0 -50%;
  width: 3rem; height: 3rem;
  border-radius: 50%;
  background: var(--weiss);
  box-shadow: var(--schatten);
  color: var(--anthrazit);
}
.projektband__reihe--mitte > .logoband__pfeil:first-child { left: 0; }
.projektband__reihe--mitte > .logoband__pfeil:last-child { right: 0; }
.projektband__reihe--mitte > .logoband__pfeil:hover { background: var(--gold); }

/*
  In der Mitte ist Platz fuer zwei Spalten: Bild links, Text rechts. Das
  ist der eigentliche Grund fuer die breite Karte — sonst waere sie nur
  ein groesseres Bild mit derselben Bildunterschrift.
*/
@media (width >= 44rem) {
  .projektband--mitte .projektkarte { display: grid; grid-template-columns: 1.15fr 1fr; }
  .projektband--mitte .projektkarte__fenster { aspect-ratio: auto; height: 100%; }
  .projektband--mitte .projektkarte__text { justify-content: center; padding: 1.75rem; }
  /*
    In der schmalen Karte schiebt ein auto-Rand den Verweis an die untere
    Kante, damit alle Karten dort buendig sind. Hier waere das falsch: die
    Karte ist breiter als hoch, der Text steht mittig, und der Verweis
    stuende allein unten in einem Feld Leerraum. Er gehoert zum Text.
  */
  .projektband--mitte .projektkarte__aktion { margin: 0.75rem 0 0; padding-top: 0; }
}

/* Ab hier ist die Mittelkarte so breit, dass der Titel eine Stufe groesser
   getragen wird. */
@media (width >= 62rem) {
  .projektband--mitte .projektkarte__text .karte__titel { font-size: var(--t-h3); }
  .projektband--mitte .projektkarte__text { padding: 2.25rem; gap: 0.65rem; }
}

/* Zaehler unter dem Band. Er sagt, wie viele Projekte es ueberhaupt gibt —
   ein Band ohne Anschlag verraet das sonst nicht. */
.projektband__stand {
  margin: 0.5rem 0 0;
  text-align: center;
  font-size: var(--t-mikro);
  color: var(--text-leise);
}

/* --- 35. Freigestelltes Bild im Hero ------------------------------------- */

/*
  Der Hero mit Raster (hero__raster) hatte bisher nur Textbausteine oder
  ein Video in der zweiten Spalte. Eine freigestellte Zeichnung braucht
  dort weder Rahmen noch Schatten — sie steht auf der Flaeche des
  Abschnitts. Begrenzt wird nur die Hoehe: eine hochformatige Grafik
  wuerde den Hero sonst laenger machen als den ersten Bildschirm.
*/
.hero__bild-frei {
  width: 100%;
  max-height: min(28rem, 55vh);
  object-fit: contain;
  margin-inline: auto;
}

/* --- 36. Kanalraster ------------------------------------------------------ */

/*
  Die Liste der Kanäle, in die veröffentlicht wird. Zweispaltig auf dem
  Telefon, bis zu vierspaltig auf dem Schirm — bei sechsundzwanzig
  Einträgen entscheidet die Spaltenzahl darüber, ob man die Liste
  überfliegen kann oder scrollen muss.

  Feste Spaltenzahlen statt auto-fit: die Namen sind sehr
  unterschiedlich lang ("X" gegen "Google Unternehmensprofil"), und
  auto-fit richtet alle Spalten am längsten aus.

  Die Spalten sind so breit wie ihr Inhalt (auto) und der Block steht
  mittig. Mit gleich breiten Spalten (1fr) hing rechts neben jedem kurzen
  Namen tote Fläche, und der Block endete weit vor dem rechten Rand —
  unter einer mittig gesetzten Überschrift sah er dadurch nach links
  verrutscht aus.
*/
.kanalraster {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: center;
  gap: 1.25rem clamp(1.5rem, 5vw, 4rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (width >= 40rem) { .kanalraster { grid-template-columns: repeat(3, auto); } }
@media (width >= 60rem) { .kanalraster { grid-template-columns: repeat(4, auto); } }

.kanal {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  min-width: 0;
  font-size: var(--t-klein);
  font-weight: 700;
  color: var(--anthrazit);
  /* Die Kanalnamen sind Eigennamen — an denen wird nicht getrennt. */
  hyphens: manual;
}
/* Die Symbole sind bereits in Anthrazit eingefärbt (siehe _data/kanaele.js).
   Leicht zurückgenommen wirken sechsundzwanzig davon als Fläche ruhiger. */
.kanal__symbol { width: 1.5rem; height: 1.5rem; object-fit: contain; opacity: 0.85; }

/* --- 37. Trennbild -------------------------------------------------------- */

/*
  Eine freigestellte Zeichnung zwischen zwei Abschnitten. Schmaler als im
  Hero: hier trennt sie, sie eroeffnet nicht — in voller Groesse wuerde
  sie den Lesefluss anhalten statt ihn zu gliedern.
*/
.trennbild {
  width: min(100%, 26rem);
  height: auto;
  margin: clamp(1rem, 3vw, 2rem) auto 0;
}

/*
  Der Abschnitt darunter rueckt heran. Sonst stuenden zwischen Bild und
  Ueberschrift der Bildunterrand, der Aussenabstand des Bildes und das
  volle Abschnittspolster hintereinander — zusammen rund 9 rem, und das
  Bild verlor den Bezug zu dem, was es einleitet.

  Ueber :has am Wrapper statt ueber eine zweite Klasse am Abschnitt: so
  bleibt der Zusammenhang dort, wo er entsteht, und ein Abschnitt ohne
  Trennbild darueber behaelt sein normales Polster.
*/
.huelle:has(> .trennbild) + .abschnitt { padding-top: clamp(1.5rem, 3.5vw, 2.75rem); }