/* ===================================================================
   ALAGA Intensivpflege — Dinslaken
   Design-Tokens & Layout

   FARBSYSTEM
   Die drei Markenfarben stammen direkt aus dem ALAGA-Logo (drei
   Dreiecke). Sie sind hier keine Dekoration, sondern kodieren
   Bedeutung und werden konsequent gleich eingesetzt:

     Blau    -> medizinische Versorgung
     Gelb    -> Organisation & Formales
     Koralle -> der menschliche Teil

   Die Pastelltoene des Logos sind fuer Text und Buttons zu hell.
   Dafuer gibt es je eine abgedunkelte Variante (--*-tief), die
   WCAG AA gegen Weiss erfuellt (geprueft: 5.9:1 bis 8.6:1).
   =================================================================== */

:root {
  /* --- Flaechen --- */
  --ground:      #F4F6FA;   /* Grundflaeche: kuehles Hellblau-Weiss */
  --ground-2:    #E9EEF7;   /* zweite, etwas satter getoente Flaeche */
  --surface:     #FFFFFF;   /* Karten, helle Sektionen */
  --deep:        #12202E;   /* dunkle Sektionen */
  --deep-2:      #1B2C3D;   /* Karten auf dunklem Grund */

  /* --- Text --- */
  --ink:         #14202C;
  --ink-2:       #4A5666;
  --ink-3:       #616C7A;   /* geprueft: 4.93:1 auf --ground, 4.58:1 auf --ground-2 */
  --ink-on-deep:   #E7ECF3;
  --ink-2-on-deep: #9FADBE;

  /* --- Marke (exakt aus dem Logo) --- */
  --blau:        #97B3F1;
  --koralle:     #F19393;
  --gelb:        #F8ED8C;

  /* --- Marke, textfaehig --- */
  --blau-tief:    #2B4C8C;
  --blau-tiefer:  #1F3A6E;
  --koralle-tief: #A8443F;
  --gelb-tief:    #7A5E12;

  /* --- Funktional --- */
  --linie:       #D7DEEA;
  --linie-zart:  #E6EBF3;
  --fehler:      #A8443F;
  --fehler-flaeche: #FBEFEE;
  --fehler-linie:   #EFCFCD;

  /* --- Typografie --- */
  --display: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* --- Raster --- */
  --breite:  1240px;
  --rand:    clamp(20px, 5vw, 40px);
  --radius:  14px;
  --radius-l: 24px;

  /* --- Rhythmus: drei Stufen statt einer --- */
  --luft-eng:    clamp(38px, 5vw, 60px);
  --luft:        clamp(64px, 8vw, 104px);
  --luft-weit:   clamp(84px, 11vw, 152px);

  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ===================================================================
   Reset & Basis
   =================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

/* Schutz gegen horizontale Scrollleisten.
   Bewusst "clip" statt "hidden": hidden macht das Element zum
   Scroll-Container und bricht damit position:sticky (Kopfzeile und
   die klebenden Textspalten). */
html, body { overflow-x: clip; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: var(--blau-tief); text-decoration: none; }
a:hover { color: var(--blau-tiefer); }

button, input, select, textarea { font-family: inherit; font-size: inherit; }
button { cursor: pointer; }

:focus-visible {
  outline: 2.5px solid var(--blau-tief);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--blau); color: var(--ink); }

h1, h2, h3, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* ===================================================================
   Typografie
   =================================================================== */

.d-xl, .d-l, .h2 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.d-xl {                                   /* Hero */
  font-size: clamp(2.45rem, 5.5vw, 4.35rem);
  line-height: 1.04;
}
.d-l {                                    /* grosser Schlussmoment */
  font-size: clamp(2.2rem, 5.2vw, 4.05rem);
  line-height: 1.04;
}
.h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.7rem);
  line-height: 1.12;
}
.h3 {
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.018em;
}

.lead {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 36em;
  text-wrap: pretty;
}
.text  { color: var(--ink-2); text-wrap: pretty; }
.klein { font-size: 0.9375rem; color: var(--ink-3); text-wrap: pretty; }

/* Moderne Hervorhebung in der Hero-Ueberschrift. */
.betont {
  font-style: normal;
  font-weight: 800;
  color: var(--blau-tief);
}

/* Marker statt Grossbuchstaben-Eyebrow.
   Ein kleines Dreieck in der Themenfarbe — das Logo-Motiv im Kleinen. */
.marker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 20px;
}
.marker::before {
  content: "";
  width: 0; height: 0;
  border-left: 5.5px solid transparent;
  border-right: 5.5px solid transparent;
  border-bottom: 9px solid var(--marker-farbe, var(--blau));
  flex: 0 0 auto;
}
.marker--blau    { --marker-farbe: var(--blau); }
.marker--koralle { --marker-farbe: var(--koralle); }
.marker--gelb    { --marker-farbe: var(--gelb); }

/* Hinweise fuer die Redaktion — vor dem Livegang entfernen */
.redaktion {
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--gelb-tief);
  background: #FCF7E2;
  border: 1px dashed #E3D28A;
  border-radius: 8px;
  padding: 9px 12px;
  display: block;
}

/* ===================================================================
   Layout-Bausteine
   =================================================================== */

.wrap {
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}
.wrap--schmal { max-width: 820px; }
.wrap--mittel { max-width: 1060px; }

.sec { padding-block: var(--luft); }
.sec--eng  { padding-block: var(--luft-eng); }
.sec--weit { padding-block: var(--luft-weit); }

.sec--hell   { background: var(--surface); }
.sec--ton    { background: var(--ground-2); }
.sec--dunkel { background: var(--deep); color: var(--ink-on-deep); }

.sec--dunkel .h2,
.sec--dunkel .d-l   { color: #FFFFFF; }
.sec--dunkel .lead,
.sec--dunkel .text  { color: var(--ink-2-on-deep); }
.sec--dunkel .marker { color: var(--ink-2-on-deep); }

.linie-oben  { border-top: 1px solid var(--linie-zart); }
.linie-unten { border-bottom: 1px solid var(--linie-zart); }

/* Zweispalter mit fester, schmaler Textspalte statt gleichmaessigem Grid.
   Bricht die Symmetrie, die die Vorlage ueberall hatte. */
.split {
  display: grid;
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
}
@media (min-width: 900px) {
  .split         { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  .split--gleich { grid-template-columns: 1fr 1fr; align-items: center; }
  .split--breit  { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center; }
  .split__klebt  { position: sticky; top: 108px; }
}

/* ===================================================================
   Buttons
   =================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 26px;
  min-height: 48px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  text-align: center;
  /* Anhebung laeuft ueber die Variable --heben, damit sie sich mit
     anderen Transforms (Einblenden, Versatz) verrechnen laesst statt
     sie zu ueberschreiben. */
  transform: translateY(var(--heben, 0px));
  transition: background-color .2s var(--ease), border-color .2s var(--ease),
              color .2s var(--ease), transform .2s var(--ease);
}
.btn:hover  { --heben: -1px; }
.btn:active { --heben: 0px; }

.btn--primaer {
  background: var(--blau-tief);
  color: #FFFFFF;
  box-shadow: 0 1px 2px rgba(20, 32, 44, .12);
}
.btn--primaer:hover { background: var(--blau-tiefer); color: #FFFFFF; }

.btn--zweit {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--linie);
}
.btn--zweit:hover { border-color: var(--blau-tief); color: var(--blau-tief); }

.btn--hell {
  background: #FFFFFF;
  color: var(--ink);
}
.btn--hell:hover { color: var(--blau-tief); }

.btn--rand-hell {
  background: transparent;
  color: #FFFFFF;
  border-color: rgba(255,255,255,.32);
}
.btn--rand-hell:hover { background: rgba(255,255,255,.10); color: #FFFFFF; }

.btn--klein { padding: 11px 18px; min-height: 44px; font-size: .9375rem; }
.btn--voll  { width: 100%; }

.btn-reihe { display: flex; flex-wrap: wrap; gap: 12px; }

.ikon { width: 1.1em; height: 1.1em; flex: 0 0 auto; }

/* ===================================================================
   Kopfzeile
   =================================================================== */

.kopf {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(244, 246, 250, .85);
  backdrop-filter: saturate(1.5) blur(14px);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid var(--linie-zart);
}
.kopf__innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 13px;
}
.kopf__logo { display: flex; align-items: center; flex: 0 0 auto; }
.kopf__logo img { height: clamp(28px, 3.2vw, 36px); width: auto; }

.nav { display: flex; align-items: center; gap: 28px; }
.nav a {
  position: relative;
  color: var(--ink-2);
  font-weight: 500;
  font-size: .9375rem;
  padding-block: 6px;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--blau-tief);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after { transform: scaleX(1); }

.kopf__aktion { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.kopf__tel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-weight: 600;
  font-size: .9375rem;
  padding: 8px 4px;
}
.kopf__tel:hover { color: var(--blau-tief); }

.nur-desktop { display: none; }
.nur-mobil   { display: flex; align-items: center; gap: 8px; }
@media (min-width: 940px) {
  .nur-desktop { display: flex; align-items: center; gap: 28px; }
  .nur-mobil   { display: none; }
}

.quadrat-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border: 1px solid var(--linie);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
}
.quadrat-btn:hover { border-color: var(--blau-tief); color: var(--blau-tief); }

.mobilnav { border-top: 1px solid var(--linie-zart); background: var(--ground); }
.mobilnav[hidden] { display: none; }
.mobilnav__innen { padding-block: 6px 22px; }
.mobilnav a.mobilnav__link {
  display: block;
  padding: 15px 0;
  border-bottom: 1px solid var(--linie-zart);
  color: var(--ink);
  font-weight: 500;
}
.mobilnav .btn { margin-top: 18px; }

.spring-link {
  position: absolute;
  left: -9999px; top: 0;
  z-index: 200;
  background: var(--blau-tief);
  color: #FFF;
  padding: 12px 18px;
  border-radius: 0 0 10px 0;
  font-weight: 600;
}
.spring-link:focus { left: 0; color: #FFF; }

/* ===================================================================
   Hero — asymmetrisch, Bild laeuft rechts aus dem Raster
   =================================================================== */

.hero { padding-block: clamp(44px, 7vw, 96px) clamp(40px, 6vw, 84px); }
.hero__raster {
  display: grid;
  gap: clamp(36px, 5vw, 60px);
  align-items: center;
}
@media (min-width: 900px) {
  .hero__raster { grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); }
}
.hero__titel { margin-bottom: 22px; }
.hero__lead  { margin-bottom: 30px; }

.hero__punkte {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: 32px;
  font-size: .9375rem;
  color: var(--ink-2);
}
.hero__punkte li { display: flex; align-items: center; gap: 9px; }
.hero__punkte svg { color: var(--blau-tief); }

/* Bild bricht auf grossen Schirmen nach rechts aus dem Container aus.
   Der Versatz entspricht genau dem Seitenrand — so laeuft das Bild bis
   an die Kante, kann aber nie ueber den Viewport hinausragen. */
@media (min-width: 1100px) {
  .hero__bild { margin-right: calc(-1 * var(--rand)); }
}

/* ===================================================================
   Bildplatzhalter
   Solange keine echten Fotos vorliegen: ruhige Flaeche mit dem
   Dreieck-Motiv der Marke. Beim Ersetzen komplett loeschen.
   =================================================================== */

.platzhalter {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-l);
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(151, 179, 241, .30), transparent 62%),
    radial-gradient(110% 80% at 12% 88%, rgba(241, 147, 147, .22), transparent 60%),
    var(--ground-2);
  border: 1px solid var(--linie);
  display: grid;
  place-items: center;
}
.platzhalter--hoch  { aspect-ratio: 4 / 5; }
.platzhalter--quer  { aspect-ratio: 5 / 4; }
.platzhalter--rund  { aspect-ratio: 1 / 1; }

.platzhalter__mark { width: 42%; height: auto; opacity: .85; }
.seitenbild {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.seitenbild--portraet {
  object-fit: contain;
  object-position: center bottom;
  background: var(--ground-2);
}
.platzhalter__text {
  position: absolute;
  left: 16px; bottom: 16px; right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .04em;
  color: var(--ink-3);
  background: rgba(255, 255, 255, .93);
  border: 1px solid var(--linie);
  border-radius: 9px;
  padding: 8px 11px;
  width: fit-content;
  max-width: calc(100% - 32px);
}

/* ===================================================================
   Erreichbarkeits-Streifen — schmaler dunkler Takt direkt unter dem Hero
   =================================================================== */

.streifen { background: var(--deep); color: var(--ink-on-deep); }
.streifen__innen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 28px;
  padding-block: 18px;
}
.streifen__status {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: .9375rem;
  font-weight: 500;
}
.punkt {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #7FD4A8;
  box-shadow: 0 0 0 4px rgba(127, 212, 168, .20);
  flex: 0 0 auto;
}
.streifen__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 26px;
  font-family: var(--mono);
  font-size: .8125rem;
  color: var(--ink-2-on-deep);
}
.streifen__meta a { color: #FFFFFF; font-weight: 500; }
.streifen__meta a:hover { color: var(--blau); }

/* ===================================================================
   Situationskarten — versetzt statt im gleichmaessigen Raster
   =================================================================== */

.situationen { display: grid; gap: 14px; }
@media (min-width: 620px) {
  .situationen {
    grid-template-columns: 1fr 1fr;
    /* Alle vier Karten gleich hoch — nicht nur je Zeile. Sonst faellt
       ein laengerer Text in einer Karte auf alle anderen der Zeile
       durch und erzeugt dort toten Leerraum. Haelt auch, wenn spaeter
       jemand die Texte aendert. */
    grid-auto-rows: 1fr;
  }
}
/* Hinweis: Hier stand ein bewusster 34px-Versatz der rechten Spalte,
   um dem Block die Tabellenwirkung zu nehmen. Er wurde entfernt — in
   der Praxis wurde er durchgehend als Layoutfehler gelesen, nicht als
   Gestaltung. Die Asymmetrie der Sektion entsteht ohnehin durch die
   schmale, klebende Textspalte links. Nicht wieder einbauen. */
.karte {
  background: var(--surface);
  border: 1px solid var(--linie-zart);
  border-radius: var(--radius);
  padding: 24px 22px;
  transform: translateY(calc(var(--versatz, 0px) + var(--heben, 0px)));
  transition: border-color .2s var(--ease), transform .2s var(--ease),
              box-shadow .2s var(--ease);
}
.karte:hover {
  border-color: var(--linie);
  --heben: -2px;
  box-shadow: 0 8px 24px rgba(20, 32, 44, .06);
}
.karte .h3 { margin-bottom: 7px; }

/* ===================================================================
   Leistungen — drei farbkodierte Spalten
   Jede Gruppe traegt ihre Markenfarbe als Kopfband.
   =================================================================== */

.leistungen { display: grid; gap: 20px; }
@media (min-width: 860px) { .leistungen { grid-template-columns: repeat(3, 1fr); } }

.leistung {
  background: var(--surface);
  border: 1px solid var(--linie-zart);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.leistung__band { height: 6px; background: var(--gruppe, var(--blau)); }
.leistung__innen { padding: 26px 24px 28px; }
.leistung__titel {
  font-family: var(--body);
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin-bottom: 4px;
}
.leistung__rolle {
  font-family: var(--mono);
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gruppe-text, var(--blau-tief));
  margin-bottom: 18px;
}
.leistung li {
  display: flex;
  gap: 11px;
  padding: 11px 0;
  border-top: 1px solid var(--linie-zart);
  font-size: .9375rem;
  color: var(--ink);
}
.leistung li::before {
  content: "";
  margin-top: .55em;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 7px solid var(--gruppe, var(--blau));
  flex: 0 0 auto;
}
.g-blau    { --gruppe: var(--blau);    --gruppe-text: var(--blau-tief); }
.g-gelb    { --gruppe: var(--gelb);    --gruppe-text: var(--gelb-tief); }
.g-koralle { --gruppe: var(--koralle); --gruppe-text: var(--koralle-tief); }

/* Bild bricht links aus dem Container aus — Gegenstueck zum Hero. */
@media (min-width: 1100px) {
  .bild-links { margin-left: calc(-1 * var(--rand)); }
}

/* ===================================================================
   ★ SIGNATURE: Ablauf als Timeline
   Eine durchgehende Schiene, deren Farbe ueber drei Phasen wandert:
   Koralle (Ankommen) -> Gelb (Klaeren) -> Blau (Versorgen).
   Ersetzt sieben identische Kacheln durch eine echte Abfolge.
   =================================================================== */

.zeitstrahl { position: relative; padding-left: 46px; }

.zeitstrahl__schiene {
  position: absolute;
  left: 13px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(
    to bottom,
    var(--koralle) 0%,
    var(--koralle) 26%,
    var(--gelb)    38%,
    var(--gelb)    62%,
    var(--blau)    74%,
    var(--blau)    100%
  );
  transform-origin: top;
}

.phase {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 34px 0 18px -46px;
  font-family: var(--mono);
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-2-on-deep);
}
.phase:first-child { margin-top: 0; }
.phase::before {
  content: "";
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 8px solid var(--phasenfarbe);
  flex: 0 0 auto;
}
.p-ankommen  { --phasenfarbe: var(--koralle); }
.p-klaeren   { --phasenfarbe: var(--gelb); }
.p-versorgen { --phasenfarbe: var(--blau); }

.schritt { position: relative; padding: 0 0 26px; }
.schritt:last-child { padding-bottom: 0; }

.schritt__knoten {
  position: absolute;
  left: -46px;
  top: 5px;
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 11px solid var(--phasenfarbe, var(--blau));
}
/* Deckt die Schiene hinter dem Knoten ab, damit das Dreieck klar steht. */
.schritt__knoten::before {
  content: "";
  position: absolute;
  left: -7px; top: 0;
  width: 14px; height: 11px;
  background: var(--deep);
  z-index: -1;
}
.schritt__nr {
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  color: var(--ink-2-on-deep);
  margin-bottom: 3px;
}
.schritt__titel {
  font-family: var(--body);
  font-size: 1.0625rem;
  font-weight: 600;
  color: #FFFFFF;
  margin-bottom: 4px;
}
.schritt__text {
  font-size: .9375rem;
  color: var(--ink-2-on-deep);
  max-width: 44ch;
}

/* ===================================================================
   Gruende — zweispaltig mit Hairline, aber ungleich gewichtet
   =================================================================== */

.gruende { display: grid; gap: 30px 56px; }
@media (min-width: 760px) { .gruende { grid-template-columns: 1fr 1fr; } }
.grund { border-top: 2px solid var(--grundfarbe, var(--linie)); padding-top: 18px; }
.grund .h3 { margin-bottom: 6px; }

/* ===================================================================
   Region
   =================================================================== */

.orte { display: flex; flex-wrap: wrap; gap: 9px; }
.orte li {
  border: 1px solid var(--linie);
  background: var(--surface);
  border-radius: 999px;
  padding: 7px 15px;
  font-size: .9375rem;
  color: var(--ink-2);
}

.karte-flaeche {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-l);
  overflow: hidden;
  border: 1px solid var(--linie);
  background: var(--ground-2);
}
.karte-flaeche__raster {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--linie) 1px, transparent 1px),
    linear-gradient(90deg, var(--linie) 1px, transparent 1px);
  background-size: 36px 36px;
  opacity: .55;
}
.karte-flaeche__inhalt {
  position: absolute;
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%);
  width: min(82%, 320px);
  display: grid;
  gap: 3px;
  padding: 16px 18px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .94);
  text-align: center;
  box-shadow: var(--schatten);
}
.karte-flaeche__inhalt span,
.karte-flaeche__inhalt small {
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .05em;
}
.karte-flaeche__inhalt strong {
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(1.45rem, 4vw, 2.25rem);
  font-weight: 500;
}

/* ===================================================================
   Stimmen — ein grosses Zitat statt drei gleicher Karten
   =================================================================== */

.zitat-gross {
  font-family: var(--display);
  font-weight: 600;
  font-style: normal;
  font-size: clamp(1.5rem, 3.2vw, 2.35rem);
  line-height: 1.28;
  color: var(--ink);
  text-wrap: pretty;
}
.zitat-quelle {
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .06em;
  color: var(--ink-3);
  margin-top: 20px;
}
.stimmen-klein { display: grid; gap: 18px; }
@media (min-width: 760px) { .stimmen-klein { grid-template-columns: 1fr 1fr; } }
.stimme-klein {
  background: var(--surface);
  border: 1px solid var(--linie-zart);
  border-radius: var(--radius);
  padding: 24px 22px;
}
.stimme-klein blockquote { font-size: 1rem; color: var(--ink); line-height: 1.55; }

/* ===================================================================
   FAQ
   =================================================================== */

.faq { border-top: 1px solid var(--linie); }
.faq__eintrag { border-bottom: 1px solid var(--linie); }
.faq__knopf {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: none;
  border: none;
  text-align: left;
  padding: 22px 2px;
  font-family: var(--body);
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  font-weight: 600;
  color: var(--ink);
  transition: color .18s var(--ease);
}
.faq__knopf:hover { color: var(--blau-tief); }
.faq__zeichen {
  position: relative;
  flex: 0 0 auto;
  width: 18px; height: 18px;
}
.faq__zeichen::before,
.faq__zeichen::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: var(--blau-tief);
  transform: translate(-50%, -50%);
  transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.faq__zeichen::before { width: 16px; height: 2px; }
.faq__zeichen::after  { width: 2px; height: 16px; }
.faq__knopf[aria-expanded="true"] .faq__zeichen::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

.faq__antwort { overflow: hidden; }
.faq__antwort[hidden] { display: none; }
.fachhinweis {
  margin-top: 24px;
  padding: 18px 20px;
  border-left: 3px solid var(--blau);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  background: var(--surface);
  color: var(--ink-2);
  font-size: .875rem;
  line-height: 1.65;
}
.fachhinweis a {
  color: var(--blau-tief);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.faq__antwort > div {
  padding: 0 2px 24px;
  color: var(--ink-2);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 62ch;
}

/* ===================================================================
   Kontakt & Formular
   =================================================================== */

.kontaktliste {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--linie-zart);
  border-radius: var(--radius);
  overflow: hidden;
  max-width: 440px;
  background: var(--linie-zart);
  gap: 1px;
}
.kontaktzeile {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  padding: 17px 20px;
  color: var(--ink);
}
a.kontaktzeile:hover { background: #FAFCFF; color: var(--ink); }
.kontaktzeile__ikon {
  width: 42px; height: 42px;
  border-radius: 10px;
  background: var(--ground-2);
  color: var(--blau-tief);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.kontaktzeile__label {
  display: block;
  font-family: var(--mono);
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-3);
}
.kontaktzeile__wert { font-weight: 600; font-size: 1.0625rem; }

.formular {
  background: var(--surface);
  border: 1px solid var(--linie-zart);
  border-radius: var(--radius-l);
  padding: clamp(24px, 3.5vw, 38px);
}
.feld { display: block; margin-bottom: 16px; }
.feld:last-of-type { margin-bottom: 0; }
.feld__label {
  display: block;
  font-size: .875rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 7px;
}
.eingabe {
  width: 100%;
  padding: 14px 15px;
  border: 1px solid var(--linie);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font-size: 16px;              /* verhindert iOS-Zoom */
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.eingabe:focus {
  outline: none;
  border-color: var(--blau-tief);
  box-shadow: 0 0 0 3px rgba(43, 76, 140, .16);
}
.eingabe[aria-invalid="true"] { border-color: var(--fehler); }
textarea.eingabe { resize: vertical; min-height: 110px; }

.feldpaar { display: grid; gap: 16px; }
@media (min-width: 520px) {
  .feldpaar {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;   /* Label · Eingabe · Fehlertext */
  }
  /* Beide Felder teilen sich dieselben Zeilen. Damit bleiben die
     Eingabefelder auf einer Linie, auch wenn ein Label zweizeilig
     umbricht — sonst schiebt das laengere Label sein Nachbarfeld hoch. */
  .feldpaar > .feld {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    align-content: start;
  }
}

.fehlertext {
  display: block;
  color: var(--fehler);
  font-size: .8125rem;
  margin-top: 6px;
}
.fehlertext[hidden] { display: none; }

.hinweis-fehler {
  background: var(--fehler-flaeche);
  border: 1px solid var(--fehler-linie);
  color: var(--fehler);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: .9375rem;
  margin-bottom: 18px;
}
.hinweis-fehler[hidden] { display: none; }

.zustimmung {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: .875rem;
  color: var(--ink-2);
  line-height: 1.55;
  cursor: pointer;
}
.zustimmung input {
  margin-top: 3px;
  width: 19px; height: 19px;
  flex: 0 0 auto;
  accent-color: var(--blau-tief);
}

.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.erfolg { text-align: center; padding: 22px 6px; }
.erfolg__ikon {
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--ground-2);
  color: var(--blau-tief);
  display: grid;
  place-items: center;
  margin: 0 auto 20px;
}
.erfolg[hidden], .formular__form[hidden] { display: none; }

/* ===================================================================
   Fusszeile
   =================================================================== */

.fuss { background: var(--ground); border-top: 1px solid var(--linie-zart); }
.fuss__raster {
  display: grid;
  gap: 34px 32px;
  padding-top: clamp(44px, 6vw, 72px);
}
@media (min-width: 700px)  { .fuss__raster { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.fuss__titel {
  font-family: var(--mono);
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-3);
  margin-bottom: 15px;
}
.fuss li { margin-bottom: 4px; font-size: .9375rem; }
/* Tippflaeche auf mindestens 24px bringen (WCAG 2.5.8), ohne den
   optischen Abstand der Fusszeile zu veraendern. */
.fuss li a, .fuss__knopf { display: inline-block; padding-block: 5px; min-height: 24px; }
.fuss a { color: var(--ink-2); }
.fuss a:hover { color: var(--blau-tief); }
.fuss__knopf {
  background: none; border: none; padding-inline: 0;
  color: var(--ink-2); font-size: .9375rem; text-align: left;
}
.fuss__knopf:hover { color: var(--blau-tief); }
.fuss__unten {
  margin-top: clamp(34px, 4.5vw, 52px);
  padding-block: 22px;
  border-top: 1px solid var(--linie-zart);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 20px;
  font-size: .8125rem;
  color: var(--ink-3);
}

/* ===================================================================
   Mobile Kontaktleiste & Consent
   =================================================================== */

.mobilleiste {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  display: flex;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(244, 246, 250, .95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--linie);
}
.mobilleiste .btn { flex: 1; }
.mobilleiste-abstand { height: 78px; }
@media (min-width: 940px) {
  .mobilleiste, .mobilleiste-abstand { display: none; }
}

.consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  padding: 16px;
}
.consent[hidden] { display: none; }
.consent__box {
  max-width: 720px;
  margin-inline: auto;
  background: var(--surface);
  border: 1px solid var(--linie);
  border-radius: var(--radius-l);
  box-shadow: 0 16px 48px rgba(20, 32, 44, .18);
  padding: 24px 24px 22px;
}
.consent__box .h3 { margin-bottom: 8px; }
.consent__aktionen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.consent__aktionen .btn { flex: 1; min-width: 160px; }

/* ===================================================================
   Bewegung
   Ein Prinzip, konsequent: Elemente steigen beim Eintritt leicht auf.
   Der Zeitstrahl zeichnet sich einmalig — das ist der einzige
   inszenierte Moment der Seite.
   =================================================================== */

/* Alle drei moeglichen Verschiebungen — Einblenden, Rasterversatz und
   Hover-Anhebung — laufen in EINE transform-Rechnung. Getrennte
   transform-Deklarationen wuerden einander ueberschreiben statt sich
   zu ergaenzen (gleiche Spezifitaet, letzte Regel gewinnt). */
[data-zeig] {
  --einblenden: 18px;
  opacity: 0;
  transform: translateY(calc(var(--einblenden) + var(--versatz, 0px) + var(--heben, 0px)));
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay: var(--verzug, 0ms);
}
[data-zeig].sichtbar { opacity: 1; --einblenden: 0px; }

.zeitstrahl__schiene { transform: scaleY(0); transition: transform 1.1s var(--ease); }
.zeitstrahl.sichtbar .zeitstrahl__schiene { transform: scaleY(1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  /* Nur die Bewegung abschalten — der Rasterversatz ist Layout und
     bleibt erhalten. */
  [data-zeig] { opacity: 1; --einblenden: 0px; }
  .zeitstrahl__schiene { transform: scaleY(1); }
  .btn:hover, .karte:hover { --heben: 0px; }
}

/* Ohne JavaScript bleibt alles sichtbar und bedienbar. */
.kein-js [data-zeig] { opacity: 1; --einblenden: 0px; }
.kein-js .zeitstrahl__schiene { transform: scaleY(1); }