/* ==========================================================================
   SERVITUM PFLEGE · Stylesheet
   --------------------------------------------------------------------------
   Neuaufbau vom 27.09.2026. Diese Datei enthält ausschließlich Werte, die
   aus der Figma-Datei „Servitum Website · Design" (CAJzvfMY8uVRzuNB8Zwbm5)
   ausgelesen wurden. Nichts wird geschätzt, nichts aus dem alten Stand
   übernommen. Der alte Stand liegt als style.alt-komplett-20260927.css.bak
   daneben und wird nicht mehr eingebunden.

   Regeln für diese Datei
   ----------------------
   · Ein Baustein wird an genau einer Stelle beschrieben. Korrekturen werden
     dort eingearbeitet, nicht unten angehängt.
   · Jeder Block nennt im Kommentar die Figma-Maße, auf denen er beruht.
   · Desktop ist der Normalfall (Figma-Rahmen 1440). Die Mobilfassung
     (Figma-Rahmen 390) steht im Block selbst, direkt darunter.
   · Kein `!important`, keine Verschachtelung tiefer als nötig, damit sich
     nichts gegenseitig aushebelt.

   Inhalt
   ------
   1.  Gestaltungswerte (Tokens)
   2.  Grundlagen (Reset, Grundschrift)
   3.  Raster und Sektionen
   4.  Hilfsklassen
   --- ab hier wird Baustein für Baustein ergänzt ---
   ========================================================================== */


/* ==========================================================================
   1. GESTALTUNGSWERTE
   Ausgemessen über 23 Seitenkomponenten. Die Zahl in Klammern ist die
   Häufigkeit des Wertes in der Figma-Datei.
   ========================================================================== */

:root {

  /* --- Farben · Flächen und Marke ----------------------------------------- */
  --c-petrol:        #0b2e33;   /* (1276×) Text, dunkle Sektionen */
  --c-petrol-tief:   #071f23;   /* (49×)   Nachtsektionen, Glasgrund */
  --c-weiss:         #ffffff;   /* (1093×) */
  --c-akzent:        #55c7a7;   /* (914×)  Buttons, Eyebrows, Icons auf Petrol */
  --c-akzent-hell:   #82dcc0;   /* (326×)  Icons und Linien auf Dunkel */
  --c-akzent-dunkel: #00735b;   /* (215×)  Akzenttext auf hellem Grund */
  --c-mint:          #ebfbf5;   /* (529×)  helle Sektionsflächen, Karten */
  --c-flaeche-2:     #f7f9f9;   /* (118×)  Fragenblock, Einsatzgebiete */
  --c-papier:        #fef9ec;   /* Zettel, Nachtprotokoll, Warnkasten */
  --c-fehler:        #c4453d;   /* Fehlerfeld, Dringend-Rahmen */
  --c-lavendel:      #8c8cd9;   /* SGB-V-Marke im Lexikon */
  --c-fuss-linie:    #c4e0e6;   /* (1182×) Footer */
  --c-kopf-lavendel: #856394;   /* (88×)   Header */

  /* --- Farben · Text ------------------------------------------------------ */
  --c-text:   var(--c-petrol);
  --c-text-2: #3c4e52;          /* (395×) Fließtext */
  --c-text-3: #52666a;          /* (104×) Unterzeilen, Bildunterschriften */

  /* Deckkraftstufen auf Petrol, genau wie in Figma vergeben */
  --c-text-90: rgba(11, 46, 51, 0.90);
  --c-text-82: rgba(11, 46, 51, 0.82);
  --c-text-80: rgba(11, 46, 51, 0.80);
  --c-text-78: rgba(11, 46, 51, 0.78);
  --c-text-75: rgba(11, 46, 51, 0.75);
  --c-text-72: rgba(11, 46, 51, 0.72);
  --c-text-70: rgba(11, 46, 51, 0.70);
  --c-text-50: rgba(11, 46, 51, 0.50);

  /* Auf dunklem Grund */
  --c-hell-92: rgba(255, 255, 255, 0.92);
  --c-hell-85: rgba(255, 255, 255, 0.85);
  --c-hell-78: rgba(255, 255, 255, 0.78);
  --c-hell-72: rgba(255, 255, 255, 0.72);
  --c-hell-68: rgba(255, 255, 255, 0.68);
  --c-hell-65: rgba(255, 255, 255, 0.65);

  /* --- Linien ------------------------------------------------------------- */
  --c-linie:      rgba(11, 46, 51, 0.12);
  --c-linie-2:    rgba(11, 46, 51, 0.09);
  --c-linie-hell: rgba(255, 255, 255, 0.16);

  /* --- Glas --------------------------------------------------------------- */
  --glas-dunkel-fill:   rgba(255, 255, 255, 0.07);   /* (160×) */
  --glas-dunkel-fill-2: rgba(255, 255, 255, 0.08);   /* (62×)  */
  --glas-dunkel-rand:   rgba(255, 255, 255, 0.16);
  --glas-dunkel-blur:   20px;
  --glas-hell-fill:     linear-gradient(135deg, rgba(255,255,255,0.72), rgba(85,199,167,0.26));
  --glas-hell-rand:     rgba(255, 255, 255, 0.85);
  --glas-hell-blur:     22px;

  /* --- Schrift ------------------------------------------------------------ */
  /* Manrope, selbst gehostet. Gewichte in Figma: 400 (2056×), 700 (1514×),
     800 (1078×), 600 (492×), 500 (125×). */
  --font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Helvetica, Arial, sans-serif;

  /* Grade exakt wie gesetzt, in px */
  --fs-11:   11px;   --fs-11-5: 11.5px; --fs-12:   12px;   --fs-12-5: 12.5px;
  --fs-13:   13px;   --fs-13-5: 13.5px; --fs-14:   14px;   --fs-14-5: 14.5px;
  --fs-15:   15px;   --fs-15-5: 15.5px; --fs-16:   16px;   --fs-16-5: 16.5px;
  --fs-17:   17px;   --fs-17-5: 17.5px; --fs-18:   18px;   --fs-19:   19px;
  --fs-19-5: 19.5px; --fs-20:   20px;   --fs-21:   21px;   --fs-22:   22px;
  --fs-24:   24px;   --fs-25:   25px;   --fs-26:   26px;   --fs-28:   28px;
  --fs-30:   30px;   --fs-32:   32px;   --fs-34:   34px;   --fs-38:   38px;
  --fs-40:   40px;   --fs-42:   42px;   --fs-44:   44px;   --fs-46:   46px;
  --fs-52:   52px;   --fs-92:   92px;

  /* Zeilenhöhen, wie in Figma gesetzt */
  --lh-titel:   1.10;   /* Überschriften ab 28 px */
  --lh-titel-2: 1.18;
  --lh-eng:     1.30;
  --lh-zitat:   1.35;
  --lh-text:    1.56;   /* Fließtext */
  --lh-weit:    1.65;   /* Rechtstexte, lange Absätze */

  --ls-eyebrow: 0.09em; /* Sperrung bei Großbuchstaben */
  --ls-titel:  -0.01em;

  /* --- Raster ------------------------------------------------------------- */
  --breite:        1200px;   /* 1440 − 2 × 120 Seitenrand */
  --breite-schmal: 880px;    /* Lesespalte */
  --breite-text:   760px;    /* Kopfblöcke */
  --rand-desktop:  120px;

  /* Seitenpolster der Sektionen. Bis 1440 sind es die 120 aus Figma,
     darüber so viel, dass der 1200 breite Inhalt mittig steht. Ohne das
     bleiben Blöcke mit festen Breiten (Warum, Beratung, Erstgespräch)
     auf breiten Bildschirmen links kleben. */
  --rand-sektion: max(120px, (100% - 1200px) / 2);
  --rand-mobil:     22px;
  --rand: clamp(22px, 8.3vw, 120px);

  /* Sektionspolster · häufigste Werte 96/100 (37×) und 96/96 (20×) */
  --sek-oben:  clamp(54px, 6.7vw, 96px);
  --sek-unten: clamp(58px, 6.9vw, 100px);

  /* --- Abstände ----------------------------------------------------------- */
  --sp-3: 3px;   --sp-4: 4px;   --sp-6: 6px;   --sp-8: 8px;
  --sp-9: 9px;   --sp-10: 10px; --sp-12: 12px; --sp-14: 14px;
  --sp-16: 16px; --sp-18: 18px; --sp-20: 20px; --sp-22: 22px;
  --sp-24: 24px; --sp-26: 26px; --sp-28: 28px; --sp-30: 30px;
  --sp-32: 32px; --sp-34: 34px; --sp-40: 40px; --sp-44: 44px;
  --sp-48: 48px; --sp-64: 64px; --sp-72: 72px;

  /* --- Radien ------------------------------------------------------------- */
  --r-3:  3px;   --r-6:  6px;   --r-8:  8px;   --r-10: 10px;
  --r-12: 12px;  --r-14: 14px;  --r-16: 16px;  --r-18: 18px;
  --r-20: 20px;  --r-22: 22px;  --r-24: 24px;
  --r-pill: 999px;   /* (459×) */

  /* --- Schatten ----------------------------------------------------------- */
  --sh-karte:   0 8px 22px rgba(11, 46, 51, 0.10);
  --sh-blatt:   0 10px 28px rgba(11, 46, 51, 0.12);
  --sh-scheibe: 0 34px 60px -30px rgba(11, 46, 51, 0.34);
  --sh-menue:   0 32px 48px -24px rgba(11, 46, 51, 0.28);

  /* --- Bewegung ----------------------------------------------------------- */
  --ease:    cubic-bezier(0.22, 1, 0.36, 1);
  --t-kurz:  0.22s;
  --t:       0.45s;
}


/* ==========================================================================
   2. GRUNDLAGEN
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 110px;   /* Höhe der angedockten Leiste + Luft */
}

body {
  background: var(--c-weiss);
  color: var(--c-text-2);
  font-family: var(--font);
  font-size: var(--fs-16-5);
  font-weight: 400;
  line-height: var(--lh-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* Lange Zusammensetzungen wie „Krankenhausentlassungsbriefe" passen auf
     schmalen Schirmen sonst nicht in die Spalte und stehen über den Rand.
     break-word greift nur dort, wo ein Wort allein nicht mehr passt – an
     allen anderen Stellen bleiben die Zeilenumbrüche, wie sie sind. */
  overflow-wrap: break-word;
}

/* Wird gesetzt, solange Menü oder Schublade offen sind */
body.ist-gesperrt { overflow: hidden; }

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

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

a { color: inherit; text-decoration: none; }

/* Überschriften erben Größe und Gewicht vom jeweiligen Baustein.
   Hier nur, was für alle gilt. */
h1, h2, h3, h4, h5, h6 {
  font-weight: 800;
  line-height: var(--lh-titel);
  letter-spacing: var(--ls-titel);
  color: var(--c-petrol);
}

ul, ol { padding: 0; list-style: none; }

hr { height: 1px; border: 0; background: var(--c-linie); }

::selection { background: var(--c-akzent); color: var(--c-petrol); }

:focus-visible {
  outline: 2px solid var(--c-akzent-dunkel);
  outline-offset: 3px;
  border-radius: var(--r-6);
}

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

/* Sprungmarke für die Tastaturbedienung */
.zum-inhalt {
  position: absolute;
  left: -9999px;
  z-index: 200;
  padding: 12px 20px;
  border-radius: var(--r-10);
  background: var(--c-petrol);
  color: var(--c-weiss);
  font-size: var(--fs-15);
  font-weight: 700;
}
.zum-inhalt:focus { left: 24px; top: 24px; }


/* ==========================================================================
   3. RASTER UND SEKTIONEN
   Figma 1440: Inhalt 1200 breit, Seitenrand 120.
   Figma  390: Seitenrand 22.
   ========================================================================== */

.inhalt {
  width: 100%;
  max-width: calc(var(--breite) + 2 * var(--rand));
  margin-inline: auto;
  padding-inline: var(--rand);
}
.inhalt--schmal { max-width: calc(var(--breite-schmal) + 2 * var(--rand)); }
.inhalt--text   { max-width: calc(var(--breite-text)   + 2 * var(--rand)); }

.sektion { padding-block: var(--sek-oben) var(--sek-unten); }
.sektion--mint    { background: var(--c-mint); }
.sektion--flaeche { background: var(--c-flaeche-2); }
.sektion--petrol  { background: var(--c-petrol);      color: var(--c-hell-78); }
.sektion--nacht   { background: var(--c-petrol-tief); color: var(--c-hell-78); }
.sektion--petrol h1, .sektion--petrol h2, .sektion--petrol h3, .sektion--petrol h4,
.sektion--nacht  h1, .sektion--nacht  h2, .sektion--nacht  h3, .sektion--nacht  h4 {
  color: var(--c-weiss);
}


/* ==========================================================================
   4. HILFSKLASSEN
   ========================================================================== */

/* Figma hat für Desktop und Mobil an mehreren Stellen unterschiedliche
   Inhalte: kürzere Vorzeile, kürzerer Lead, ein Knopf statt zwei, drei
   Fakten statt vier. Umgeschaltet wird an einer einzigen Stelle – 1100 px –
   damit Layout und Textfassung nie auseinanderlaufen.
   `revert` statt eines festen Wertes, damit Absätze wieder Blöcke und
   Spannen wieder inline werden. */
/* Die beiden Schalter stehen am Dateiende – siehe dort. */

/* Einzelne Wörter in Überschriften, die Figma farbig absetzt:
   Dunkelgrün auf hellem Grund, Mint auf dunklem. */
.akzent      { color: var(--c-akzent-dunkel); }
.akzent-hell { color: var(--c-akzent-hell); }

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


/* ==========================================================================
   AB HIER: BAUSTEINE
   Reihenfolge des Nachbaus: Header · Schublade · Hero · Footer ·
   Bausteine (Buttons, Karten, Formulare) · Sektionen der Startseite ·
   übrige 30 Seiten.
   ========================================================================== */


/* ==========================================================================
   HEADER
   --------------------------------------------------------------------------
   Figma · Komponentenset „Header" (65:781), vier Fassungen:
     Über Video / Desktop   65:777   1392 × 74
     Fest       / Desktop   65:778   1392 × 74
     Über Video / Mobil     65:779    366 × 60
     Fest       / Mobil     65:780    366 × 60

   „Über Video" ist die Glasfassung und gilt nur dort, wo ein Bild
   dahinterliegt – zurzeit der Hero der Startseite. Sobald darunter
   gescrollt wird, und auf allen anderen Seiten, gilt „Fest".
   ========================================================================== */

/* Ränder, die es nur im Header gibt */
:root {
  --c-rand-hell:  #e4ebec;   /* Rand der festen Leiste */
  --c-rand-kreis: #cfd9db;   /* Rand des Telefonkreises, hell */
}

/* --- Leiste · Fest (Normalfall) ------------------------------------------ */
/* z-index über der Schublade: In Figma zeichnet der Zustand „Mobil-Menü
   offen" oben dieselbe Leiste noch einmal, mit Logo und Kreuz an genau
   derselben Stelle. Statt sie zu verdoppeln, bleibt die echte Leiste
   stehen und liegt über der Fläche – so ist auch die Burger-Animation
   sichtbar, die sonst sofort verdeckt würde. */
.header {
  position: fixed;
  inset: 20px 24px auto 24px;
  z-index: 130;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px 12px 24px;
  border: 1px solid var(--c-rand-hell);
  border-radius: 18px;
  background: var(--c-weiss);
  box-shadow: 0 12px 32px rgba(8, 31, 36, 0.12);
  transition: background var(--t-kurz) var(--ease),
              border-color var(--t-kurz) var(--ease),
              box-shadow var(--t-kurz) var(--ease);
}

/* --- Leiste · Über Video (nur über dem Hero, solange nicht gescrollt) ----- */
.seite--index .header:not(.ist-angedockt) {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(7, 31, 35, 0.55);
  box-shadow: none;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

/* --- Logo · Signet 48 · Wortmarke 158 (Abstand 12) ----------------------- */
.logo { display: flex; align-items: center; gap: 12px; flex: none; }

.logo__mark { width: 48px; height: 48px; }
.logo__mark--weiss  { display: none; }
.seite--index .header:not(.ist-angedockt) .logo__mark--farbig { display: none; }
.seite--index .header:not(.ist-angedockt) .logo__mark--weiss  { display: block; }

.logo__type { display: flex; flex-direction: column; gap: 1px; }

.logo__name {
  font-size: 23px;
  font-weight: 800;
  line-height: 1;            /* Figma: 100 % */
  letter-spacing: -0.025em;  /* Figma: −2,5 % */
  color: var(--c-petrol);
}
.logo__sub {
  font-size: 9px;
  font-weight: 700;
  line-height: 1.334;        /* Figma: Höhe 12 bei 9 px */
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-kopf-lavendel);   /* #856394 */
}
.seite--index .header:not(.ist-angedockt) .logo__name { color: var(--c-weiss); }
.seite--index .header:not(.ist-angedockt) .logo__sub  { color: var(--c-akzent-hell); }

/* --- Menü · Abstand 26, SemiBold 16 -------------------------------------- */
.nav { display: flex; align-items: center; gap: 26px; }
.nav__item { display: flex; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.375;        /* Figma: Höhe 22 bei 16 px */
  color: var(--c-petrol);
  transition: color var(--t-kurz) var(--ease);
}
.nav__link:hover,
.nav__link:focus-visible,
.nav__link[aria-expanded="true"],
.nav__link[aria-current="page"] { color: var(--c-akzent-dunkel); }

.nav__chevron { width: 16px; height: 16px; transition: transform var(--t-kurz) var(--ease); }
.nav__link[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); }

.seite--index .header:not(.ist-angedockt) .nav__link { color: var(--c-weiss); }
.seite--index .header:not(.ist-angedockt) .nav__link:hover,
.seite--index .header:not(.ist-angedockt) .nav__link:focus-visible,
.seite--index .header:not(.ist-angedockt) .nav__link[aria-expanded="true"],
.seite--index .header:not(.ist-angedockt) .nav__link[aria-current="page"] { color: var(--c-akzent); }

/* --- Aktionen · Abstand 10 ----------------------------------------------- */
.header__aktionen { display: flex; align-items: center; gap: 10px; flex: none; }

/* Telefonkreis · 48, nur Rand 1,5 – keine Füllung.
   Icon 19 × 19, Strich 2 px, dunkelgrün bzw. mint auf Glas. */
.header__tel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1.5px solid var(--c-rand-kreis);
  border-radius: 50%;
  color: var(--c-akzent-dunkel);
  transition: border-color var(--t-kurz) var(--ease), color var(--t-kurz) var(--ease);
}
.header__tel svg { width: 19px; height: 19px; }
.header__tel:hover { border-color: var(--c-akzent-dunkel); }

.seite--index .header:not(.ist-angedockt) .header__tel {
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--c-akzent-hell);
}
.seite--index .header:not(.ist-angedockt) .header__tel:hover {
  border-color: rgba(255, 255, 255, 0.6);
}

/* Button · 210 × 46, Polster 15/24, Radius 10 ----------------------------- */
.header__knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 24px;
  border-radius: 10px;
  background: var(--c-akzent);
  color: var(--c-petrol);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: background var(--t-kurz) var(--ease);
}
.header__knopf:hover { background: var(--c-akzent-hell); }

/* --------------------------------------------------------------------------
   BURGER · drei Striche, die sich zum Kreuz drehen
   Bewegung nach der Vorlage „Tornado" von vk-uiux auf uiverse.io (MIT):
   die Striche wandern zur Mitte und drehen sich dabei um −135 bzw. −225
   Grad, zeitversetzt, mit einer überschwingenden Kurve. Maße und Farbe
   kommen aus Figma: drei Striche 17,5 × 2 im Abstand 3,42, Radius 1.
   Gesteuert über aria-expanded – kein zusätzliches Kästchen nötig.
   -------------------------------------------------------------------------- */

.burger { display: none; }

.burger__striche {
  --dicke: 2px;
  --luecke: 3.42px;
  --dauer: 0.35s;
  position: relative;
  display: block;
  width: 17.5px;
  height: calc(var(--dicke) * 3 + var(--luecke) * 2);
}

.burger__strich {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--dicke);
  border-radius: calc(var(--dicke) / 2);
  background: currentColor;
  opacity: 1;
  transition: none var(--dauer) cubic-bezier(0.5, -0.35, 0.35, 1.5) 0s;
}

.burger__strich--oben {
  bottom: calc(50% + var(--luecke) + var(--dicke) / 2);
  transition-property: bottom, transform;
  transition-delay: calc(var(--dauer) * 0.6);
}
.burger__strich--mitte {
  top: calc(50% - var(--dicke) / 2);
  transition-property: opacity, transform;
  transition-delay: calc(var(--dauer) * 0.3);
}
.burger__strich--unten {
  top: calc(50% + var(--luecke) + var(--dicke) / 2);
  transition-property: top, transform;
  transition-delay: 0s;
}

.burger[aria-expanded="true"] .burger__strich--oben {
  bottom: calc(50% - var(--dicke) / 2);
  transform: rotate(-135deg);
  transition-delay: 0s;
}
.burger[aria-expanded="true"] .burger__strich--mitte {
  opacity: 0;
  transform: rotate(-135deg);
  transition-delay: calc(var(--dauer) * 0.3);
}
.burger[aria-expanded="true"] .burger__strich--unten {
  top: calc(50% - var(--dicke) / 2);
  transform: rotate(-225deg);
  transition-delay: calc(var(--dauer) * 0.6);
}

/* Kein zusätzliches Polster am main: In Figma beginnt der Seitenkopf bei
   y 0, und sein eigenes Polster oben – 120 am Desktop, 96 mobil – ist der
   Freiraum für die schwebende Leiste. */


/* --------------------------------------------------------------------------
   HEADER · Mobil · Figma 366 × 60 bei Rand 12, Polster 6/6/6/14, Radius 16
   Unterschied zum Desktop: der Telefonknopf ist hier eine gefüllte grüne
   Scheibe mit petrolfarbenem Icon – in beiden Fassungen.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {

  .header {
    inset: 12px 12px auto 12px;
    padding: 6px 6px 6px 14px;
    border-radius: 16px;
  }

  .nav { display: none; }

  .logo { gap: 10px; }
  .logo__mark { width: 40px; height: 40px; }
  .logo__name { font-size: 20px; }
  .logo__sub  { font-size: 8px; line-height: 1.375; }

  .header__aktionen { gap: 4px; }

  .header__tel {
    width: 46px;
    height: 46px;
    border: 0;
    background: var(--c-akzent);
    color: var(--c-petrol);
  }
  .header__tel svg { width: 20px; height: 20px; }
  .header__tel:hover { background: var(--c-akzent-hell); }

  .seite--index .header:not(.ist-angedockt) .header__tel {
    background: var(--c-akzent);
    color: var(--c-petrol);
  }

  .header__knopf { display: none; }

  .burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    color: var(--c-petrol);
    transition: background var(--t-kurz) var(--ease);
  }
  .seite--index .header:not(.ist-angedockt) .burger { color: var(--c-weiss); }

  /* Bei offener Schublade zeigt Figma die helle Leiste ohne Schatten,
     ohne Telefonknopf, und den Schließknopf auf einer Fläche #f7f9f9.

     Der Vorsatz lautet `.seite.ist-gesperrt`, nicht nur `.ist-gesperrt`:
     Die Glasregeln der Startseite stehen auf `.seite--index .header:not(…)`
     und wiegen damit vier Klassen. Mit nur zwei Klassen bliebe das Logo
     weiß auf weißem Grund. `.seite` hat jede Seite am body. */
  .seite.ist-gesperrt .header {
    background: var(--c-weiss);
    border-color: var(--c-rand-hell);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .seite.ist-gesperrt .header .logo__name { color: var(--c-petrol); }
  .seite.ist-gesperrt .header .logo__sub  { color: var(--c-kopf-lavendel); }
  .seite.ist-gesperrt .header .logo__mark--farbig { display: block; }
  .seite.ist-gesperrt .header .logo__mark--weiss  { display: none; }
  .seite.ist-gesperrt .header .header__tel { display: none; }
  .seite.ist-gesperrt .header .burger {
    background: var(--c-flaeche-2);
    color: var(--c-petrol);
  }
}


/* ==========================================================================
   SCHUBLADE · mobiles Menü
   --------------------------------------------------------------------------
   Figma · „Zustand · Mobil-Menü offen" (142:2234), Rahmen 390 × 844.
   Es ist keine seitliche Lade, sondern eine weiße Fläche über der ganzen
   Seite. Aufbau: Kopfzeile wie die feste Leiste, nur mit X statt Telefon
   und Burger · Navigation ab y 88 mit 20 Rand · Kontaktblock unten fest.
   ========================================================================== */

.drawer {
  position: fixed;
  inset: 0;
  z-index: 110;            /* unter der Leiste – siehe Kommentar oben */
  display: flex;
  flex-direction: column;
  padding-top: 72px;       /* 12 Rand + 60 Leistenhöhe */
  background: var(--c-weiss);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-kurz) var(--ease), visibility var(--t-kurz);
}
.drawer.ist-offen { opacity: 1; visibility: visible; }

/* --- Navigation · beginnt 16 unter der Leiste, Rand 20 ------------------- */
.drawer__nav {
  flex: 1 1 auto;
  overflow-y: auto;
  margin-top: 16px;
  padding: 0 20px;
}

/* Zeile · 56 hoch, Polster 13 oben und unten, Linie unten */
.drawer__zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 13px 0;
  border-bottom: 1px solid var(--c-rand-hell);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.381;        /* Figma: Höhe 29 bei 21 px */
  letter-spacing: -0.015em;  /* Figma: −1,5 % */
  color: var(--c-petrol);
  text-align: left;
}

/* Pfeil rechts · 20 × 20, Strich 2 px, #52666a */
.drawer__pfeil { width: 20px; height: 20px; flex: none; color: var(--c-text-3); }

/* Minus · 22 × 22, Strich 2 px, #00735b – nur an der offenen Zeile */
.drawer__minus { display: none; width: 22px; height: 22px; flex: none; color: var(--c-akzent-dunkel); }
.drawer__zeile--auf .drawer__minus { display: block; }
.drawer__zeile--auf .drawer__pfeil { display: none; }

/* Unterpunkte · Mintfläche, Radius 12, Polster 2/0/6/14 ------------------- */
.drawer__unter {
  padding: 2px 0 6px 14px;
  border-radius: 12px;
  background: var(--c-mint);
}
.drawer__unter[hidden] { display: none; }

.drawer__unter a {
  display: block;
  padding: 8px 12px 8px 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.375;
  color: var(--c-petrol);
}
.drawer__unter a:hover { color: var(--c-akzent-dunkel); }

/* Letzte Zeile · „Alle Leistungen ansehen →" Bold 15 in Dunkelgrün.
   Muss über .drawer__unter a adressiert werden, sonst gewinnt deren
   Zeilenhöhe – gleiche Spezifität reicht hier nicht. */
.drawer__unter a.drawer__alle {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.334;    /* Figma: Höhe 20 bei 15 px */
  color: var(--c-akzent-dunkel);
}

/* --- Kontaktblock · unten fest, Petrol, Radius 16 ------------------------ */
.drawer__kontakt {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 15px 12px 12px;
  padding: 20px;
  border-radius: 16px;
  background: var(--c-petrol);
}

/* Button · volle Breite, 56 hoch, Polster 19/32, Bold 18 */
.drawer__knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 19px 32px;
  border-radius: 10px;
  background: var(--c-akzent);
  color: var(--c-petrol);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}
.drawer__knopf:hover { background: var(--c-akzent-hell); }

.drawer__mail {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.375;
  color: var(--c-weiss);
}
.drawer__mail svg { width: 16px; height: 16px; flex: none; color: var(--c-akzent-hell); }

.drawer__zeiten {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--c-fuss-linie);
}

/* --- Schleier hinter Mega-Menü und Schublade ---------------------------- */
/* Figma „Abdunklung · Menü offen" (142:2292): rgba(7,31,35,.45), keine Unschärfe */
.schleier {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(7, 31, 35, 0.45);
  opacity: 0;
  transition: opacity var(--t-kurz) var(--ease);
}
.schleier.ist-offen { opacity: 1; }


/* ==========================================================================
   MEGA-MENÜ · Leistungen
   --------------------------------------------------------------------------
   Figma 142:2320 · 1392 × 311 bei x 24 / y 106, also 12 unter der Leiste.
   Polster 36/40, Radius 18, Weiß, Schlagschatten r48 #081f24@.22 Versatz 0/20.
   Vier Spalten: 3 × 323 (Innenabstand rechts 32) + Karte 343.
   ========================================================================== */

.megamenu {
  position: absolute;
  /* Bezug ist der Innenrahmen der Leiste. Deren 1-px-Rand muss deshalb
     überall wieder draufgerechnet werden: 12 + 1 nach unten, −1 zur Seite,
     damit das Menü wie in Figma 1392 breit ist und 12 unter der Leiste sitzt. */
  top: calc(100% + 13px);
  left: -1px;
  right: -1px;
  display: grid;
  /* Die Spaltenmaße aus Figma gelten ab 1440. Darunter ist die Leiste
     schmaler als 1392; mit festen Spalten stand das Menü über den
     rechten Rand hinaus und erzeugte auf jeder Seite einen
     waagerechten Scrollbalken – auch zugeklappt. Mit minmax bleiben
     die Werte oben gleich und geben darunter nach. */
  grid-template-columns: repeat(3, minmax(0, 323px)) minmax(0, 343px);
  padding: 36px 40px;
  border-radius: 18px;
  background: var(--c-weiss);
  box-shadow: 0 20px 48px rgba(8, 31, 36, 0.22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--t-kurz) var(--ease),
              transform var(--t-kurz) var(--ease),
              visibility var(--t-kurz);
}
.megamenu.ist-offen { opacity: 1; visibility: visible; transform: none; }

/* --- Spalte · Inhalt 291 breit ------------------------------------------ */
.megamenu__spalte {
  display: flex;
  flex-direction: column;
  gap: 6px;              /* Figma: Abstand 6 zwischen allen Kindern */
  align-self: start;     /* nicht auf die Höhe der Karte dehnen */
  padding-right: 32px;
}

/* Überschrift der Spalte · Bold 11,5 gesperrt, Dunkelgrün.
   Darunter 22 Luft (Figma: Abstand 6 + Abstandshalter 10 + Abstand 6). */
.megamenu__label {
  display: block;
  margin-bottom: 16px;   /* Figma: Abstandshalter 10 + zweimal Abstand 6 */
  font-size: 11.5px;
  font-weight: 700;
  line-height: 16px;     /* Figma: Höhe 16, als feste Zahl damit nichts rundet */
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-akzent-dunkel);
}

/* Eintrag · Polster 9 oben und unten, Titel 17, Unterzeile 14 ------------- */
.mega-item { display: block; padding: 9px 0; }
.mega-item b {
  display: block;
  margin-bottom: 2px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.353;        /* Figma: Höhe 23 bei 17 px */
  letter-spacing: -0.01em;
  color: var(--c-petrol);
  transition: color var(--t-kurz) var(--ease);
}
.mega-item small {
  display: block;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--c-text-3);
}
.mega-item:hover b { color: var(--c-akzent-dunkel); }

/* --- Karte rechts · 343 breit, Mint, Radius 14, Polster 26, Abstand 10 --- */
.megamenu__karte {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  align-self: start;     /* Figma: 237 hoch, nicht auf die Spaltenhöhe gedehnt */
  padding: 26px;
  border-radius: 14px;
  background: var(--c-mint);
}
.megamenu__karte .megamenu__label { margin-bottom: 0; }
.megamenu__karte h3 {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.368;        /* Figma: Höhe 26 bei 19 px */
  letter-spacing: -0.01em;
  color: var(--c-petrol);
}
.megamenu__karte p {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--c-text-2);
}

/* Button in der Karte · 50 hoch, weil der Pfeil 20 misst */
.megamenu__karte .megamenu__knopf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 24px;
  border-radius: 10px;
  background: var(--c-akzent);
  color: var(--c-petrol);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: background var(--t-kurz) var(--ease);
}
.megamenu__karte .megamenu__knopf svg { width: 20px; height: 20px; }
.megamenu__karte .megamenu__knopf:hover { background: var(--c-akzent-hell); }

@media (max-width: 1100px) { .megamenu { display: none; } }


/* ==========================================================================
   MARKE · Vorzeile aus Strich und gesperrtem Text
   --------------------------------------------------------------------------
   In Figma eine eigene Komponente, die in Hero und Sektionsköpfen
   wiederkehrt. Geometrie überall gleich, nur die Textfarbe wechselt:
   Dunkelgrün auf hellem Grund, Mint auf dunklem.
   Desktop: Strich 28 × 2, Abstand 10, Bold 12, Sperrung 12 %.
   Mobil:   Strich 20 × 2, Abstand  8, Bold 11.
   ========================================================================== */

.marke {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.334;      /* Figma: Höhe 16 bei 12 px */
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-akzent-dunkel);
}
.marke--auf-dunkel { color: var(--c-akzent-hell); }
.marke__strich { width: 28px; height: 2px; flex: none; background: var(--c-akzent); }

@media (max-width: 1100px) {
  .marke { gap: 10px; font-size: 11px; line-height: 1.364; }  /* Höhe 15 bei 11 px */
  .marke__strich { width: 20px; }

  /* In „Leistungen" steht in Figma als einziger Stelle 8 statt 10.
     Vermutlich eine Unachtsamkeit in der Datei – hier trotzdem 1:1. */
  .leistungen .marke { gap: 8px; }
}


/* ==========================================================================
   KNOPF · Figma-Komponente „Button"
   --------------------------------------------------------------------------
   Grundmaß: Polster 19/32, Abstand 8, Radius 10, Fläche #55c7a7,
   Beschriftung Bold 18 mit Zeilenhöhe 100 %, Pfeil 22.
   Die kleine Fassung (Header, Mega-Menü) hat Polster 15/24 und 16 px.
   Randfassungen tragen 1,5 px – auf hellem Grund Petrol, auf dunklem
   Weiß mit 50 % Deckkraft.
   ========================================================================== */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 19px 32px;
  border-radius: 10px;
  background: var(--c-akzent);
  color: var(--c-petrol);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: background var(--t-kurz) var(--ease), border-color var(--t-kurz) var(--ease);
}
.knopf .pfeil { width: 22px; height: 22px; flex: none; }
.knopf:hover { background: var(--c-akzent-hell); }

/* Rand auf hellem Grund · Figma: 1,5 px Petrol */
.knopf--linie {
  border: 1.5px solid var(--c-petrol);
  background: none;
}
.knopf--linie:hover { background: var(--c-mint); }

/* Rand auf dunklem Grund · Figma Hero: Polster 19/30/19/26, Abstand 10, Pfeil 18 */
.knopf--linie-hell {
  gap: 10px;
  padding: 19px 30px 19px 26px;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  background: none;
  color: var(--c-weiss);
  line-height: 1.389;      /* Figma: Höhe 25 bei 18 px */
}
.knopf--linie-hell .pfeil { width: 18px; height: 18px; }
.knopf--linie-hell:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.75);
}


/* ==========================================================================
   HERO · Startseite
   --------------------------------------------------------------------------
   Figma „Sektion · Hero (Desktop)" 423:465 · 1440 × 900
          „Sektion · Hero (Mobil)"  423:509 ·  390 × 844
   Beide Rahmen sind bildschirmfüllend. Textblock und Faktenleiste hängen
   deshalb am unteren Rand, nicht an einem festen Abstand von oben.
     Desktop: Textblock x 120, Unterkante 736 → 164 von unten.
              Faktenleiste x 24, Unterkante 876 → 24 von unten.
     Mobil:   Textblock x 20, Unterkante 715 → 129 von unten.
              Faktenkasten x 12, Unterkante 828 → 16 von unten.
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100vh;
  background: var(--c-petrol-tief);
  overflow: hidden;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Abdunklung · Figma 423:467, waagerecht, drei Stufen */
.hero__abdunklung {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    rgba(7, 31, 35, 0.90) 0%,
    rgba(7, 31, 35, 0.55) 55%,
    rgba(7, 31, 35, 0.25) 100%);
}

/* --- Notfall-Pille · 344 × 28, oben rechts, 12 unter der Leiste ----------
   Sie hängt am Bildschirm, solange sie über der Faktenleiste steht, und
   wird danach im Hero geparkt. Bewusst `fixed` statt einer Verschiebung
   Bild für Bild: das übernimmt der Compositor, läuft also ruckelfrei und
   nicht eine Bildlänge hinter dem Bildlauf her. Umgeschaltet wird genau
   einmal, nicht bei jedem Scrollschritt. */
.hero__notfall {
  position: fixed;
  top: 106px;              /* 20 Leistenrand + 74 Leistenhöhe + 12 */
  right: 24px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 12px;
  border-radius: var(--r-pill);
  background: var(--c-akzent);
  color: var(--c-petrol);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.334;      /* Figma: Höhe 16 bei 12 px */
  white-space: nowrap;
  transition: background var(--t-kurz) var(--ease);
}
.hero__notfall:hover { background: var(--c-akzent-hell); }

/* Geparkt: ab hier scrollt die Pille mit der Seite weg. `top` setzt das
   Skript auf den Punkt, an dem sie stehen geblieben ist. */
.hero__notfall--geparkt { position: absolute; }
.hero__punkt {
  width: 6px; height: 6px; flex: none;
  border-radius: 50%;
  background: var(--c-petrol);
}

/* --- Textblock · 760 breit, Abstand 26 zwischen den Teilen -------------- */
.hero__text {
  position: absolute;
  /* Fester Abstand zur Kante wie in Figma – der Hero ist randlos, und die
     Faktenleiste hängt mit ihren 24 ebenfalls an der Kante. Mit der
     mitwachsenden Inhaltsspalte würde der Text auf breiten Bildschirmen
     nach rechts rutschen und nicht mehr zur Leiste darunter passen. */
  left: 120px;
  bottom: 164px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  width: 760px;
}

/* Vorzeile: siehe Baustein „MARKE". Hier nur die Breite. */
.hero__text .marke { align-self: flex-start; }

/* Titel · ExtraBold 72, Zeilenhöhe 100 %, Sperrung −3 % */
.hero__titel {
  font-size: 72px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--c-weiss);
}

/* Lead · 620 breit, Regular 21, Zeilenhöhe 155 % */
.hero__lead {
  width: 620px;
  font-size: 21px;
  font-weight: 400;
  line-height: 33px;       /* Figma: 155 % von 21, Blockhöhe 132 bei 4 Zeilen */
  color: var(--c-fuss-linie);
}

/* --- Knöpfe · siehe Baustein „KNOPF", hier nur die Reihe ---------------- */
.hero__aktionen { display: flex; align-self: flex-start; align-items: flex-start; gap: 12px; }

/* --- Faktenleiste · 1392 × 84, Glas, Polster 22/40 ---------------------- */
.hero__fakten {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  height: 84px;            /* Figma setzt die Höhe fest, der Inhalt misst 85 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 40px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background: rgba(7, 31, 35, 0.55);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.fakt { display: flex; align-items: center; gap: 12px; }
.fakt__haken { width: 20px; height: 20px; flex: none; color: var(--c-akzent-hell); }
.fakt__text { display: flex; flex-direction: column; gap: 1px; }
.fakt__text b {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.375;      /* Figma: Höhe 22 bei 16 px */
  letter-spacing: -0.005em;
  color: var(--c-weiss);
}
.fakt__text small {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.385;      /* Figma: Höhe 18 bei 13 px */
  color: var(--c-fuss-linie);
}


/* --------------------------------------------------------------------------
   HERO · Mobil
   Andere Verlaufsrichtung, kleinerer Satz, ein Knopf statt zwei,
   Faktenkasten mit drei einzeiligen Punkten.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {

  .hero { min-height: 100svh; }

  /* Figma 423:511 · senkrecht, vier Stufen */
  .hero__abdunklung {
    background: linear-gradient(to bottom,
      rgba(7, 31, 35, 0.50) 0%,
      rgba(7, 31, 35, 0.14) 20%,
      rgba(7, 31, 35, 0.35) 50%,
      rgba(7, 31, 35, 0.95) 100%);
  }

  .hero__notfall { display: none; }

  /* Mittiger Ausschnitt zeigt bei 390 nur den Ärmel. 75 % rückt das
     Gesicht ins Bild. */
  .hero__video { object-position: 75% center; }

  .hero__text {
    left: 20px;
    right: 20px;
    bottom: 129px;
    gap: 18px;
    width: auto;
  }

  .hero__titel { font-size: 42px; line-height: 1.02; }

  /* Zeilenhöhe muss mitgesetzt werden – die 33 px des Desktops gelten
     sonst weiter und machen aus drei Zeilen vier. */
  .hero__lead { width: auto; font-size: 17px; line-height: 26px; }

  /* Ein Knopf, über die volle Breite. align-self muss zurückgesetzt werden,
     sonst huget die Reihe wie auf dem Desktop und der Knopf bleibt schmal. */
  .hero__aktionen { display: block; align-self: stretch; }
  .hero__aktionen .knopf { display: flex; width: 100%; }

  /* Faktenkasten · 366 × 111, Polster 16, Abstand 10, Glas .60, Unschärfe 20 */
  .hero__fakten--mobil {
    left: 12px;
    right: 12px;
    bottom: 16px;
    height: auto;          /* die festen 84 des Desktops gelten hier nicht */
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    padding: 16px;
    border-radius: 16px;
    background: rgba(7, 31, 35, 0.60);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
  .hero__fakten--mobil .fakt { gap: 10px; }
  .hero__fakten--mobil .fakt__haken { width: 18px; height: 18px; }
  .hero__fakten--mobil .fakt span {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.357;    /* Figma: Höhe 19 bei 14 px */
    color: var(--c-weiss);
  }
}


/* ==========================================================================
   SEKTION · LEISTUNGEN (Startseite)
   --------------------------------------------------------------------------
   Figma „Sektion · Leistungen (Desktop)" 423:534 · 1440 × 1000
          „Sektion · Leistungen (Mobil)"  423:638 ·  390 × 1740
   Desktop: Polster 112/120, Abstand 56. Kopf zweispaltig 560 + 80 + 560,
   an der Unterkante ausgerichtet. Darunter drei Karten à 387, Abstand 20.
   Die Karten sind unterschiedlich hoch – Figma dehnt sie nicht.
   Mobil: Polster 64/20, alles untereinander, Abstand 32.
   ========================================================================== */

.leistungen {
  display: flex;
  flex-direction: column;
  gap: 56px;
  padding: 112px var(--rand-sektion);
  background: var(--c-flaeche-2);
}

/* --- Kopf · zwei Spalten, unten bündig ---------------------------------- */
.leistungen__kopf { display: flex; align-items: flex-end; gap: 80px; }

.leistungen__titel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 560px;
  min-width: 0;
}
.leistungen__titel h2 {
  font-size: 44px;
  font-weight: 800;
  line-height: 47px;       /* Figma: 106 % von 44, Blockhöhe 141 bei 3 Zeilen */
  letter-spacing: -0.025em;
  color: var(--c-petrol);
}

.leistungen__bei {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  width: 560px;
  min-width: 0;
}
.leistungen__bei p {
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;       /* Figma: 165 % von 18, Blockhöhe 90 bei 3 Zeilen */
  color: var(--c-text-2);
}

.leistungen__verzeichnis {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.375;      /* Figma: Höhe 22 bei 16 px */
  color: var(--c-akzent-dunkel);
}
.leistungen__verzeichnis .pfeil { width: 18px; height: 18px; flex: none; }
.leistungen__verzeichnis:hover { color: var(--c-petrol); }

/* --- Karten · drei Spalten, Abstand 20, nicht auf gleiche Höhe gedehnt --- */
.leistungen__karten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: 20px;
}

.lkarte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 36px 32px 32px;
  border: 1px solid var(--c-rand-hell);
  border-radius: 16px;
  background: var(--c-weiss);
  transition: transform var(--t-kurz) var(--ease),
              border-color var(--t-kurz) var(--ease),
              box-shadow var(--t-kurz) var(--ease);
}
.lkarte:hover {
  transform: translateY(-4px);
  border-color: var(--c-akzent-hell);
  box-shadow: 0 18px 36px -18px rgba(11, 46, 51, 0.22);
}

/* Symbol · 56 auf Mint-Hell, Radius 14, Zeichen 30 in Petrol */
.lkarte__symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px; flex: none;
  border-radius: 14px;
  background: var(--c-akzent-hell);
  color: var(--c-petrol);
  transition: transform var(--t) var(--ease), background var(--t-kurz) var(--ease);
}
.lkarte__symbol svg { width: 30px; height: 30px; }

/* Beim Überfahren kippt die Symbolfläche leicht und wird eine Spur größer */
.lkarte:hover .lkarte__symbol {
  transform: rotate(-8deg) scale(1.06);
  background: var(--c-akzent);
}
.lkarte:hover h3 { color: var(--c-akzent-dunkel); }
.lkarte h3 { transition: color var(--t-kurz) var(--ease); }

.lkarte h3 {
  font-size: 26px;
  font-weight: 700;
  line-height: 31px;       /* Figma: 120 % von 26, Höhe 31 – als ganze Zahl,
                              sonst summieren sich die Nachkommastellen auf */
  letter-spacing: -0.015em;
  color: var(--c-petrol);
}
.lkarte > p {
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;       /* Figma: 160 % von 16, Blockhöhe 78 bei 3 Zeilen */
  color: var(--c-text-2);
}

/* Kostenträger · Polster 5/12/5/10, Radius 6, Mint */
.lkarte__traeger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 10px;
  border-radius: 6px;
  background: var(--c-mint);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.334;      /* Figma: Höhe 16 bei 12 px */
  letter-spacing: 0.02em;
  color: var(--c-akzent-dunkel);
}
.lkarte__traeger-punkt {
  width: 6px; height: 6px; flex: none;
  border-radius: 50%;
  background: var(--c-kopf-lavendel);   /* #856394 */
}

/* Punkte · Linie oben, Polster 22, Abstand 9.
   Höhe fest wie in Figma: dort zählt der Rahmen den Strich an beiden Kanten
   mit, obwohl er nur oben gezeichnet wird – der Inhalt allein misst 152. */
.lkarte__punkte {
  display: flex;
  flex-direction: column;
  gap: 9px;
  align-self: stretch;
  height: 153px;
  padding: 22px 0;
  border-top: 1px solid var(--c-rand-hell);
}
.lkarte__punkte li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;       /* Figma: Höhe 20 bei 15 px */
  color: var(--c-text-2);
}
.lkarte__punkt {
  width: 6px; height: 6px; flex: none;
  border-radius: 50%;
  background: var(--c-akzent);
}

.lkarte__mehr {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.375;
  color: var(--c-akzent-dunkel);
}
.lkarte__mehr .pfeil { width: 18px; height: 18px; flex: none; }
.lkarte__mehr:hover { color: var(--c-petrol); }


/* --------------------------------------------------------------------------
   LEISTUNGEN · Mobil
   Kopf einspaltig ohne Verzeichnis-Link, Karten untereinander,
   je Karte drei statt vier Punkte.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {

  .leistungen { gap: 32px; padding: 64px 20px; }

  .leistungen__kopf { flex-direction: column; align-items: stretch; gap: 16px; }
  .leistungen__titel,
  .leistungen__bei { width: auto; gap: 16px; }

  .leistungen__titel h2 { font-size: 32px; line-height: 35px; }   /* Figma: 105 bei 3 Zeilen */
  .leistungen__bei p { font-size: 17px; line-height: 28px; }   /* Figma: 165 % von 17 */

  .leistungen__karten { display: flex; flex-direction: column; gap: 32px; }

  .lkarte { gap: 14px; padding: 28px 22px 24px; }
  .lkarte__symbol { width: 48px; height: 48px; border-radius: 12px; }
  .lkarte__symbol svg { width: 26px; height: 26px; }
  .lkarte h3 { font-size: 22px; line-height: 26px; letter-spacing: -0.01em; }
  .lkarte__punkte { height: 112px; padding: 16px 0; }
}


/* ==========================================================================
   SEKTION · WARUM SERVITUM (Startseite)
   --------------------------------------------------------------------------
   Figma (Desktop) 423:727 · 1440 × 1116 · (Mobil) 423:787 · 390 × 1472
   Desktop: zwei Spalten mit Abstand 80, senkrecht mittig. Links das Bild
   520 × 620 mit einer mintfarbenen Karte dahinter, um 28 nach links und
   68 nach oben versetzt. Rechts 600 breit Inhalt mit Abstand 22.
   Mobil: alles untereinander, Abstand 24, ohne Mint-Karte.
   ========================================================================== */

.warum {
  display: flex;
  align-items: center;
  justify-content: center;   /* feste Breiten: sonst links klebend */
  gap: 80px;
  padding: 96px var(--rand-sektion);
  background: var(--c-weiss);
}

/* --- Bild mit Mint-Karte dahinter und Plakette davor -------------------- */
.warum__bild { position: relative; width: 460px; flex: none; }

.warum__bild::before {           /* Figma: 520 × 620, Versatz −28/−68, Mint 45 % */
  content: "";
  position: absolute;
  left: -24px;
  top: -58px;
  width: 460px;
  height: 540px;
  border-radius: 20px;
  background: var(--c-akzent);
  opacity: 0.45;
}

.warum__bild img {
  position: relative;
  width: 460px;
  height: 540px;
  object-fit: cover;
  border-radius: 20px;
}

/* Plakette · 240 × 40, ragt 24 nach rechts und 20 nach unten über das Bild */
.warum__plakette {
  position: absolute;
  right: -24px;
  bottom: -20px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 14px;
  border-radius: 12px;
  background: var(--c-petrol);
}
.warum__plakette b {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.334;      /* Figma: Höhe 20 bei 15 px */
  letter-spacing: -0.01em;
  color: var(--c-akzent-hell);
}
.warum__plakette small {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.334;      /* Figma: Höhe 16 bei 12 px */
  color: var(--c-fuss-linie);
}

/* --- Inhalt · 600 breit, Abstand 22 ------------------------------------- */
.warum__inhalt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  width: 560px;
  flex: none;
}
.warum__inhalt h2 {
  font-size: 38px;
  font-weight: 800;
  line-height: 41px;       /* 106 % wie in Figma, nur eine Stufe kleiner */
  letter-spacing: -0.025em;
  color: var(--c-petrol);
}
.warum__lead {
  font-size: 17px;
  font-weight: 400;
  line-height: 28px;       /* 165 % wie in Figma, eine Stufe kleiner */
  color: var(--c-text-2);
}

/* --- Punkte · je Zeile eine Linie oben, Polster 18 ---------------------- */
.warum__punkte {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  padding-top: 8px;
}

.wpunkt {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 15px 0;
  border-top: 1px solid var(--c-rand-hell);
}

.wpunkt__symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px; flex: none;
  border-radius: 12px;
  background: var(--c-akzent-hell);
  color: var(--c-petrol);
  transition: transform var(--t) var(--ease), background var(--t-kurz) var(--ease);
}
.wpunkt__symbol svg { width: 20px; height: 20px; }
.wpunkt:hover .wpunkt__symbol { transform: rotate(-8deg) scale(1.06); background: var(--c-akzent); }

.wpunkt__text { display: flex; flex-direction: column; gap: 3px; }
.wpunkt__text b {
  font-size: 18px;
  font-weight: 700;
  line-height: 25px;
  letter-spacing: -0.005em;
  color: var(--c-petrol);
}
.wpunkt__text small {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
  color: var(--c-text-2);
}

.warum__aktionen { display: flex; gap: 12px; padding-top: 14px; }


/* --------------------------------------------------------------------------
   WARUM SERVITUM · Mobil
   Bild 350 × 300 ohne Mint-Karte, Plakette rechtsbündig und zweizeilig,
   Knöpfe über die volle Breite untereinander.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {

  .warum { flex-direction: column; align-items: stretch; gap: 24px; padding: 64px 20px; }

  .warum__bild { width: auto; }
  .warum__bild::before { display: none; }   /* Mint-Karte gibt es mobil nicht */
  .warum__bild img { width: 100%; height: 300px; border-radius: 18px; }

  /* Figma: bündig mit der rechten Bildkante, 22 nach unten überstehend */
  .warum__plakette {
    right: 0;
    bottom: -22px;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    padding: 9px 13px 9px 11px;
    border-radius: 10px;
  }
  .warum__plakette b     { font-size: 14px; line-height: 1.1; }
  .warum__plakette small { font-size: 9px; font-weight: 600; line-height: 1.2; }

  /* Figma trennt hier in Kopf (Abstand 16) und Blöcke (Abstand 24).
     Der Grundabstand bleibt 16, die beiden unteren Blöcke holen sich
     die fehlenden 8 über einen Außenabstand. */
  .warum__inhalt { width: auto; gap: 16px; }
  .warum__inhalt h2 { font-size: 32px; line-height: 34px; }
  .warum__lead { font-size: 17px; line-height: 28px; }

  .warum__punkte   { margin-top: 8px; padding-top: 0; }
  .warum__aktionen {
    margin-top: 8px;
    padding-top: 12px;
    flex-direction: column;
    align-self: stretch;   /* .warum__inhalt richtet sonst linksbündig aus */
    gap: 10px;
  }
  .warum__aktionen .knopf { width: 100%; }

  .wpunkt { gap: 16px; padding: 14px 0; }
  .wpunkt__symbol { width: 42px; height: 42px; }
  .wpunkt__symbol svg { width: 20px; height: 20px; }
  .wpunkt__text b     { font-size: 17px; line-height: 23px; }
  .wpunkt__text small { font-size: 15px; line-height: 24px; }
}


/* ==========================================================================
   SEKTION · ABLAUF (Startseite)
   --------------------------------------------------------------------------
   Figma (Desktop) 423:840 · 1440 × 764 · (Mobil) 423:874 · 390 × 964
   Desktop: mittig gesetzter Kopf, darunter vier Schritte nebeneinander
   à 300. Die grüne Linie verbindet die Mittelpunkte des ersten und des
   letzten Kreises – sie läuft also nicht über die ganze Breite.
   Mobil: Schritte untereinander, die Linie fällt senkrecht von Kreis
   zu Kreis und fehlt beim letzten Schritt.
   ========================================================================== */

.ablauf {
  display: flex;
  flex-direction: column;
  gap: 64px;
  padding: 112px var(--rand-sektion);
  background: var(--c-flaeche-2);
}

/* --- Kopf · mittig, Abstand 14 ------------------------------------------ */
.ablauf__kopf {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.ablauf__kopf h2 {
  align-self: stretch;     /* Figma: 1200 breit, nicht auf Textbreite geschrumpft */
  font-size: 46px;
  font-weight: 800;
  line-height: 49px;       /* Figma: 106 % von 46, Höhe 49 bei einer Zeile */
  letter-spacing: -0.025em;
  color: var(--c-petrol);
}
.ablauf__lead {
  width: 640px;
  font-size: 19px;
  font-weight: 400;
  line-height: 30px;       /* Figma: 160 % von 19, Blockhöhe 60 bei 2 Zeilen */
  color: var(--c-text-2);
}

/* --- Achse · vier Schritte, Linie dahinter ------------------------------ */
.ablauf__achse { position: relative; }

.ablauf__achse::before {   /* Figma: 900 × 2 zwischen den Kreismittelpunkten */
  content: "";
  position: absolute;
  left: 150px;
  right: 150px;
  top: 31px;
  height: 2px;
  background: var(--c-akzent);
}

.ablauf__schritte {
  position: relative;
  display: flex;
  justify-content: space-between;
}

.aschritt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 300px;
  text-align: center;
}

/* Kreis · 64, Rand 2 in Akzent, weiße Fläche. Der letzte ist ausgefüllt. */
.aschritt__marke {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px; height: 64px; flex: none;
  border: 2px solid var(--c-akzent);
  border-radius: var(--r-pill);
  background: var(--c-weiss);
  transition: transform var(--t) var(--ease), background var(--t-kurz) var(--ease),
              border-color var(--t-kurz) var(--ease), box-shadow var(--t-kurz) var(--ease);
}

/* Beim Überfahren wächst der Kreis leicht und füllt sich mint */
.aschritt:hover .aschritt__marke {
  transform: scale(1.08);
  background: var(--c-akzent-hell);
  border-color: var(--c-akzent-hell);
  box-shadow: 0 10px 24px -12px rgba(11, 46, 51, 0.35);
}
.aschritt:hover .aschritt__text b { color: var(--c-akzent-dunkel); }
.aschritt__text b { transition: color var(--t-kurz) var(--ease); }
.aschritt:last-child .aschritt__marke {
  border-color: var(--c-akzent-hell);
  background: var(--c-akzent-hell);
}
.aschritt__nummer {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.35;       /* Figma: Höhe 27 bei 20 px */
  letter-spacing: -0.01em;
  color: var(--c-petrol);
}

.aschritt__text { display: flex; flex-direction: column; gap: 16px; }
.aschritt__text b {
  font-size: 20px;
  font-weight: 700;
  line-height: 25px;       /* Figma: 125 % von 20 */
  letter-spacing: -0.01em;
  color: var(--c-petrol);
}
.aschritt__text small {
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;       /* Figma: 160 % von 16, Blockhöhe 78 bei 3 Zeilen */
  color: var(--c-text-2);
}

.ablauf__aktion { display: flex; justify-content: center; gap: 12px; }


/* --------------------------------------------------------------------------
   ABLAUF · Mobil
   Kopf linksbündig, Schritte untereinander: links die Spalte mit Kreis und
   senkrechter Linie, rechts der Text. Nur ein Knopf.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {

  .ablauf { gap: 32px; padding: 64px 20px; }

  .ablauf__kopf { align-items: flex-start; text-align: left; }
  .ablauf__kopf h2 { font-size: 32px; line-height: 34px; }
  .ablauf__lead { width: auto; font-size: 17px; line-height: 27px; }

  .ablauf__achse::before { display: none; }   /* die Linie hängt hier am Schritt */

  .ablauf__schritte { flex-direction: column; }

  .aschritt {
    flex-direction: row;
    align-items: stretch;
    gap: 16px;
    width: auto;
    text-align: left;
  }

  /* Kreis 48 mit senkrechter Linie darunter, 2 breit, mittig unter dem Kreis */
  .aschritt__marke {
    position: relative;
    width: 48px; height: 48px;
    align-self: flex-start;
  }
  .aschritt__marke::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    width: 2px;
    height: 89px;
    margin-left: -1px;
    background: var(--c-akzent);
  }
  .aschritt:last-child .aschritt__marke::after { display: none; }
  .aschritt:last-child .aschritt__marke { border-color: var(--c-akzent); }

  .aschritt__nummer { font-size: 17px; line-height: 1.353; }   /* Figma: Höhe 23 */

  .aschritt__text {
    gap: 4px;
    padding: 8px 0 28px;
  }
  .aschritt:last-child .aschritt__text { padding-bottom: 0; }
  .aschritt__text b     { font-size: 18px; line-height: 25px; letter-spacing: -0.005em; }
  .aschritt__text small { font-size: 15px; line-height: 24px; }

  .ablauf__aktion .knopf { width: 100%; }
}


/* ==========================================================================
   SEKTION · EINSATZGEBIETE (Startseite)
   --------------------------------------------------------------------------
   Figma (Desktop) 423:915 · 1440 × 828 · (Mobil) 423:1011 · 390 × 1211
   Desktop: Kopf zweispaltig 560 + 80 + 560, unten bündig. Darunter eine
   Mintfläche mit zwei weißen Karten à 554, darin die Orte als Pillen mit
   Umbruch. Zum Schluss die Entfernungsleiste.
   Mobil: Karten untereinander, Entfernungsleiste umbrechend.
   ========================================================================== */

.gebiete {
  display: flex;
  flex-direction: column;
  gap: 56px;
  padding: 112px var(--rand-sektion);
  background: var(--c-weiss);
}

/* --- Kopf ---------------------------------------------------------------- */
.gebiete__kopf { display: flex; align-items: flex-end; gap: 80px; }

.gebiete__titel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 560px;
  min-width: 0;
}
.gebiete__titel h2 {
  align-self: stretch;
  font-size: 46px;
  font-weight: 800;
  line-height: 49px;       /* Figma: 106 % von 46, Blockhöhe 98 bei 2 Zeilen */
  letter-spacing: -0.025em;
  color: var(--c-petrol);
}

.gebiete__bei {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 560px;
  min-width: 0;
}
.gebiete__bei p {
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;       /* Figma: 165 % von 18, Blockhöhe 60 bei 2 Zeilen */
  color: var(--c-text-2);
}

.gebiete__alle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.375;      /* Figma: Höhe 22 bei 16 px */
  color: var(--c-akzent-dunkel);
}
.gebiete__alle .pfeil { width: 18px; height: 18px; flex: none; }
.gebiete__alle:hover { color: var(--c-petrol); }

/* --- Mintfläche mit zwei Karten ----------------------------------------- */
.gebiete__flaeche {
  display: flex;
  gap: 20px;
  padding: 36px;
  border-radius: 20px;
  background: var(--c-mint);
}

.gkarte {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
  padding: 28px;
  border-radius: 16px;
  background: var(--c-weiss);
}

.gkarte__kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--c-rand-hell);
}
.gkarte__pin { width: 20px; height: 20px; flex: none; color: var(--c-akzent-dunkel); }
.gkarte__kopf h3 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.364;      /* Figma: Höhe 30 bei 22 px */
  letter-spacing: -0.01em;
  color: var(--c-petrol);
}

/* Ortspillen · Polster 7/12, Radius voll, Fläche #f7f9f9 */
.gkarte__orte { display: flex; flex-wrap: wrap; gap: 8px; }
.gkarte__orte a {
  display: block;
  padding: 7px 12px;
  border-radius: var(--r-pill);
  background: var(--c-flaeche-2);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.334;      /* Figma: Höhe 20 bei 15 px */
  color: var(--c-text-2);
  transition: background var(--t-kurz) var(--ease), color var(--t-kurz) var(--ease),
              transform var(--t-kurz) var(--ease);
}
.gkarte__orte a:hover {
  transform: translateY(-2px);
  background: var(--c-mint);
  color: var(--c-akzent-dunkel);
}

/* --- Entfernungsleiste · Polster 18/24, Abstand 18 ---------------------- */
.gebiete__wege {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  padding: 18px 24px;
  border-radius: 12px;
  background: var(--c-flaeche-2);
}
.gebiete__wege b {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.358;      /* Figma: Höhe 19 bei 14 px */
  color: var(--c-petrol);
}
.gebiete__weg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.358;
  color: var(--c-text-2);
}
.gebiete__punkt {
  width: 5px; height: 5px; flex: none;
  border-radius: 50%;
  background: var(--c-akzent);
}


/* --------------------------------------------------------------------------
   EINSATZGEBIETE · Mobil
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {

  .gebiete { gap: 28px; padding: 64px 20px; }

  .gebiete__kopf { flex-direction: column; align-items: stretch; gap: 16px; }
  .gebiete__titel, .gebiete__bei { width: auto; }
  .gebiete__titel h2 { font-size: 32px; line-height: 34px; }
  .gebiete__bei p { font-size: 17px; line-height: 28px; }

  .gebiete__flaeche { flex-direction: column; gap: 16px; padding: 24px 16px; }
  .gkarte { padding: 22px 18px; }
  .gkarte__kopf h3 { font-size: 20px; line-height: 1.35; }   /* Figma: Höhe 27 bei 20 px */
  .gkarte__orte a { font-size: 14px; line-height: 1.358; }   /* Figma: Höhe 19 bei 14 px */

  /* Die Beschriftung belegt eine eigene Zeile, danach brechen die Orte um */
  .gebiete__wege { gap: 8px 10px; padding: 16px; }
  .gebiete__wege b { flex: 1 0 100%; font-size: 13px; line-height: 1.385; }
  .gebiete__weg { font-size: 13px; line-height: 1.385; }
}


/* ==========================================================================
   SEKTION · HÄUFIGE FRAGEN (Startseite)
   --------------------------------------------------------------------------
   Figma (Desktop) 423:1108 · 1440 × 766 · (Mobil) 423:1155 · 390 × 1008
   Desktop: links 440 Kopf mit Telefonkarte, rechts 680 die Liste.
   Jede Frage trägt eine Linie oben und Polster 22. Der Schalter ist im
   geöffneten Zustand mintgrün gefüllt und zeigt ein Minus, sonst ein Plus
   auf #f7f9f9.
   ========================================================================== */

.fragen {
  display: flex;
  align-items: flex-start;
  gap: 80px;
  padding: 112px var(--rand-sektion);
  background: var(--c-flaeche-2);
}

/* --- Kopf mit Telefonkarte ---------------------------------------------- */
.fragen__kopf {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 440px;
  flex: none;
}
.fragen__kopf h2 {
  align-self: stretch;
  font-size: 46px;
  font-weight: 800;
  line-height: 49px;       /* Figma: 106 % von 46, Blockhöhe 98 bei 2 Zeilen */
  letter-spacing: -0.025em;
  color: var(--c-petrol);
}
.fragen__lead {
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;       /* Figma: 165 % von 18, Blockhöhe 60 bei 2 Zeilen */
  color: var(--c-text-2);
}

.fragen__telefon {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 20px 26px 20px 22px;
  border-radius: 12px;
  background: var(--c-mint);
  transition: background var(--t-kurz) var(--ease);
}
.fragen__telefon:hover { background: var(--c-akzent-hell); }

.fragen__symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px; flex: none;
  border-radius: 50%;
  background: var(--c-akzent-hell);
  color: var(--c-petrol);
}
.fragen__symbol svg { width: 20px; height: 20px; }

.fragen__text { display: flex; flex-direction: column; gap: 1px; }
.fragen__text b {
  font-size: 22px;
  font-weight: 800;
  line-height: 30px;       /* Figma: Höhe 30 bei 22 px */
  letter-spacing: -0.01em;
  color: var(--c-petrol);
}
.fragen__text small {
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;       /* Figma: Höhe 18 bei 13 px */
  color: var(--c-text-3);
}

/* --- Liste --------------------------------------------------------------- */
.fragen__liste { flex: 1; }

.frage {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 0;
  border-top: 1px solid var(--c-rand-hell);
}

.frage__knopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  text-align: left;
  font-size: 20px;
  font-weight: 700;
  line-height: 27px;       /* Figma: 135 % von 20 */
  letter-spacing: -0.005em;
  color: var(--c-petrol);
}

/* Schalter · 32, rund. Geschlossen #f7f9f9 mit Plus, offen Mint mit Minus.
   Das Zeichen besteht aus zwei Balken: der senkrechte dreht sich beim
   Öffnen um 90 Grad und legt sich auf den waagerechten – aus dem Plus
   wird ein Minus, ohne dass etwas springt. */
.frage__schalter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px; flex: none;
  border-radius: 50%;
  background: var(--c-flaeche-2);
  color: var(--c-petrol);
  transition: background var(--t-kurz) var(--ease), transform var(--t-kurz) var(--ease);
}

.frage__zeichen { position: relative; width: 12px; height: 12px; }
.frage__zeichen::before,
.frage__zeichen::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 12px;
  height: 2px;
  margin-top: -1px;
  border-radius: 1px;
  background: currentColor;
}
.frage__zeichen::after {
  transform: rotate(90deg);
  transition: transform 0.35s var(--ease);
}
.frage--offen .frage__zeichen::after { transform: rotate(0deg); }

.frage--offen .frage__schalter { background: var(--c-akzent-hell); }

/* Geschlossen: das Plus reagiert auf das Überfahren der ganzen Zeile */
.frage:not(.frage--offen) .frage__knopf:hover .frage__schalter {
  background: var(--c-akzent-hell);
  transform: scale(1.08);
}
.frage:not(.frage--offen) .frage__knopf:hover { color: var(--c-akzent-dunkel); }
.frage__knopf { transition: color var(--t-kurz) var(--ease); }

.frage__antwort p {
  font-size: 17px;
  font-weight: 400;
  line-height: 29px;       /* Figma: 170 % von 17, Blockhöhe 145 bei 5 Zeilen */
  color: var(--c-text-2);
}
.frage__antwort[hidden] { display: none; }


/* --------------------------------------------------------------------------
   FRAGEN · Mobil
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {

  .fragen { flex-direction: column; align-items: stretch; gap: 26px; padding: 64px 20px; }

  .fragen__kopf { width: auto; }
  .fragen__kopf h2 { font-size: 32px; line-height: 34px; }
  .fragen__lead { font-size: 17px; line-height: 28px; }

  .fragen__telefon { padding: 14px 18px 14px 16px; }
  .fragen__text b { font-size: 20px; line-height: 27px; }

  .frage { padding: 18px 0; }
  .frage__knopf { font-size: 17px; line-height: 23px; }
  .frage__antwort p { font-size: 15px; line-height: 26px; }
}


/* ==========================================================================
   SEKTION · BERATUNGSBESUCH § 37.3 (Startseite)
   --------------------------------------------------------------------------
   Figma (Desktop) 423:1202 · 1440 × 524 · (Mobil) 423:1240 · 390 × 852
   Desktop: Text 736 links, Terminkarte 400 rechts, Abstand 64, mittig.
   Mobil: untereinander mit Abstand 24.
   ========================================================================== */

.beratung {
  padding: 96px var(--rand-sektion);
  background: var(--c-mint);
}
.beratung__inhalt { display: flex; align-items: center; gap: 64px; }

.beratung__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  width: 736px;
  min-width: 0;
}
.beratung__text h2 {
  align-self: stretch;
  font-size: 40px;
  font-weight: 800;
  line-height: 43px;       /* Figma: 108 % von 40, Blockhöhe 86 bei 2 Zeilen */
  letter-spacing: -0.02em;
  color: var(--c-petrol);
}
.beratung__lead {
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;       /* Figma: 165 % von 18, Blockhöhe 120 bei 4 Zeilen */
  color: var(--c-text-2);
}

/* Rhythmus · weiße Chips, Polster 8/14/8/12, Radius 8 */
.beratung__rhythmus {
  display: flex;
  flex-wrap: wrap;
  align-self: stretch;     /* Figma: 736 breit, nicht auf Chipbreite geschrumpft */
  gap: 10px;
}
.beratung__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 12px;
  border-radius: 8px;
  background: var(--c-weiss);
  font-size: 14px;
  font-weight: 600;
  line-height: 19px;       /* Figma: Höhe 19 bei 14 px */
  color: var(--c-petrol);
}
.beratung__chip .haken { width: 16px; height: 16px; flex: none; color: var(--c-akzent-dunkel); }

/* --- Terminkarte · 400 breit, Polster 30 -------------------------------- */
.beratung__karte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  width: 400px;
  flex: none;
  padding: 30px;
  border: 1px solid var(--c-rand-hell);
  border-radius: 16px;
  background: var(--c-weiss);
}

.beratung__kopf { display: flex; align-items: center; gap: 10px; }
.beratung__symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px; flex: none;
  border-radius: 10px;
  background: var(--c-akzent-hell);
  color: var(--c-petrol);
}
.beratung__symbol svg { width: 20px; height: 20px; }
.beratung__kopf h3 {
  font-size: 19px;
  font-weight: 700;
  line-height: 26px;       /* Figma: Höhe 26 bei 19 px */
  letter-spacing: -0.005em;
  color: var(--c-petrol);
}

.beratung__punkte { display: flex; flex-direction: column; gap: 14px; }
.beratung__punkte li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;       /* Figma: Höhe 20 bei 15 px */
  color: var(--c-text-2);
}
.beratung__punkte .haken { width: 16px; height: 16px; flex: none; color: var(--c-akzent-dunkel); }

.beratung__karte .knopf { align-self: stretch; }

.beratung__hinweis {
  align-self: stretch;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 19px;       /* Figma: 150 % von 12,5, Blockhöhe 38 bei 2 Zeilen */
  color: var(--c-text-3);
}


/* ==========================================================================
   SEKTION · ERSTGESPRÄCH (Startseite)
   --------------------------------------------------------------------------
   Figma (Desktop) 423:1279 · 1440 × 685 · (Mobil) 423:1310 · 390 × 896
   Rechts steht ein dunkler Glaskasten auf der Mintfläche: Petrol mit
   82 % Deckkraft, Rand Weiß 18 %, Hintergrundunschärfe 28.
   ========================================================================== */

.erst {
  padding: 96px var(--rand-sektion);
  background: var(--c-mint);
}
.erst__inhalt { display: flex; align-items: flex-start; gap: 72px; }

.erst__ansprache {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  /* Figma rechnet mit 1440; zwischen 1101 und 1440 ist die Inhaltsspalte
     schmaler als 1200. Mit flex: none stand die Reihe dann über den
     Rand hinaus. Mit Basis statt fester Breite bleibt das Maß ab 1440
     gleich und gibt darunter nach. */
  width: 668px;
  min-width: 0;
}
.erst__ansprache h2 {
  align-self: stretch;
  font-size: 44px;
  font-weight: 800;
  line-height: 47px;       /* Figma: 106 % von 44, Blockhöhe 94 bei 2 Zeilen */
  letter-spacing: -0.025em;
  color: var(--c-petrol);
}
.erst__lead {
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;       /* Figma: 165 % von 18, Blockhöhe 60 bei 2 Zeilen */
  color: var(--c-text-2);
}

.erst__telefon {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
}
.erst__symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px; flex: none;
  border-radius: 50%;
  background: var(--c-akzent);
  color: var(--c-petrol);
  transition: background var(--t-kurz) var(--ease);
}
.erst__symbol svg { width: 20px; height: 20px; }
.erst__telefon:hover .erst__symbol { background: var(--c-akzent-hell); }

.erst__text { display: flex; flex-direction: column; gap: 1px; }
.erst__text b {
  font-size: 28px;
  font-weight: 800;
  line-height: 38px;       /* Figma: Höhe 38 bei 28 px */
  letter-spacing: -0.02em;
  color: var(--c-petrol);
}
.erst__text small {
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  color: var(--c-text-2);
}

/* --- Rückruf-Formular · dunkler Glaskasten ------------------------------ */
.rueckruf {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 460px;
  flex: none;
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  background: rgba(7, 31, 35, 0.82);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  box-shadow: 0 0 44px rgba(8, 31, 36, 0.22);
}
.rueckruf h3 {
  font-size: 20px;
  font-weight: 700;
  line-height: 27px;       /* Figma: Höhe 27 bei 20 px */
  letter-spacing: -0.01em;
  color: var(--c-weiss);
}

.feld { display: flex; flex-direction: column; gap: 6px; }
.feld label {
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  color: var(--c-fuss-linie);
}
.feld input {
  height: 52px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.10);
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  color: var(--c-weiss);
  transition: border-color var(--t-kurz) var(--ease), background var(--t-kurz) var(--ease);
}
.feld input::placeholder { color: var(--c-fuss-linie); opacity: 1; }
.feld input:focus {
  outline: none;
  border-color: var(--c-akzent);
  background: rgba(255, 255, 255, 0.16);
}

.rueckruf .knopf { width: 100%; }

.rueckruf__hinweis {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;       /* Figma: 150 % von 12, Blockhöhe 36 bei 2 Zeilen */
  color: var(--c-fuss-linie);
}
.rueckruf__hinweis a { text-decoration: underline; text-underline-offset: 2px; }


/* --------------------------------------------------------------------------
   BERATUNGSBESUCH und ERSTGESPRÄCH · Mobil
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {

  .beratung { padding: 56px 20px; }
  .beratung__inhalt { flex-direction: column; align-items: stretch; gap: 24px; }
  .beratung__text { width: auto; }
  .beratung__text h2 { font-size: 28px; line-height: 30px; }
  .beratung__lead { font-size: 16px; line-height: 26px; }

  /* Figma stapelt die beiden Chips, sie stehen nicht nebeneinander */
  .beratung__rhythmus { flex-direction: column; align-items: flex-start; }
  .beratung__chip { font-size: 13px; line-height: 18px; }

  .beratung__karte { width: auto; padding: 24px 20px; }
  .beratung__kopf h3 { font-size: 18px; line-height: 25px; }
  .beratung__hinweis { line-height: 19px; }

  .erst { padding: 56px 20px; }
  .erst__inhalt { flex-direction: column; align-items: stretch; gap: 28px; }
  .erst__ansprache { width: auto; }
  .erst__ansprache h2 { font-size: 32px; line-height: 34px; }
  .erst__lead { font-size: 17px; line-height: 28px; }
  .erst__text b { font-size: 24px; line-height: 33px; }

  .rueckruf { width: auto; padding: 24px 20px; }
  .rueckruf h3 { font-size: 18px; line-height: 25px; }
}


/* ==========================================================================
   SEITENKOPF · Unterseiten
   --------------------------------------------------------------------------
   Figma „Sektion · Seitenkopf" – am Beispiel Kosten (Desktop 421:5115
   1440 × 659 · Mobil 421:5134 390 × 735). Auf den Unterseiten gleich
   aufgebaut: Brotkrumen, H1, weiße Kurzantwort-Karte, ein Knopf.
   Das Polster oben ist zugleich der Freiraum für die schwebende Leiste.
   ========================================================================== */

.seitenkopf {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 120px var(--rand-sektion) 56px;
  background: var(--c-mint);
}

/* --- Brotkrumen · Medium 13, Trenner als Winkel 13 ---------------------- */
.brotkrumen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;       /* Figma: Höhe 18 bei 13 px */
  color: var(--c-text-3);
}
.brotkrumen a { transition: color var(--t-kurz) var(--ease); }
.brotkrumen a:hover { color: var(--c-akzent-dunkel); }
.brotkrumen svg { width: 13px; height: 13px; flex: none; }
.brotkrumen [aria-current="page"] { color: var(--c-petrol); }

/* --- Kopfreihe · Titel und Sinnbild nebeneinander, Abstand 48 -----------
   Das Sinnbild steht nur im Gesamtentwurf der Seite, nicht in der einzeln
   abgelegten Sektion – die Reihe ist deshalb 118 hoch statt 110. */
.seitenkopf__reihe {
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: 48px;
}
.seitenkopf__titel { display: flex; flex-direction: column; gap: 14px; flex: 1; }

/* Glasscheibe · 118, Verlauf Weiß 72 % → Akzent 26 %, Rand Weiß 85 % */
.seitenkopf__symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 118px; height: 118px; flex: none;
  border: 1.5px solid var(--glas-hell-rand);
  border-radius: 50%;
  background: var(--glas-hell-fill);
}
.seitenkopf__symbol svg {
  width: 58px; height: 58px;
  opacity: 0.85;
  color: var(--c-petrol);
}

/* --- Überschrift · 52/106 %, Sperrung −2,5 % ----------------------------
   Steht sie direkt in der Sektion, nimmt sie die Spalte bis 820 ein.
   Sitzt sie in einer Kopfreihe neben einem Sinnbild (Kosten), bestimmt
   die Spalte die Breite. */
.seitenkopf > h1 { align-self: stretch; max-width: 820px; }

.seitenkopf h1 {
  font-size: 52px;
  font-weight: 800;
  line-height: 55px;       /* Figma: 106 % von 52, Blockhöhe 110 bei 2 Zeilen */
  letter-spacing: -0.025em;
  color: var(--c-petrol);
}

/* --- Kurzantwort · 880 breit, Polster 26/28, Radius 14 ------------------ */
.kurzantwort {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 880px;
  max-width: 100%;
  padding: 26px 28px;
  border: 1px solid var(--c-rand-hell);
  border-radius: 14px;
  background: var(--c-weiss);
}
.kurzantwort__kopf {
  display: flex;
  align-items: center;
  align-self: flex-start;  /* Figma: 117 breit, nicht auf Kartenbreite gedehnt */
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-akzent-dunkel);
}
.kurzantwort__kopf svg { width: 16px; height: 16px; flex: none; }
.kurzantwort p {
  font-size: 18px;
  font-weight: 400;
  line-height: 31px;       /* Figma: 170 % von 18, Blockhöhe 155 bei 5 Zeilen */
  color: var(--c-text-2);
}

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

/* Vorzeile zwischen Brotkrumen und Überschrift · Bold 11,5 gesperrt.
   Gibt es nicht auf jeder Seite – Kosten hat sie zum Beispiel nicht. */
.seitenkopf__vorzeile {
  font-size: 11.5px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-akzent-dunkel);
}


/* --------------------------------------------------------------------------
   SEITENKOPF · Fassung mit Sinnbild (Beratungsbesuch § 37.3)
   Figma 695:725 · 310 × 310, frei an der rechten Seite. Zwei weich
   gezeichnete Farbschleier, zwei dünne Ringe und eine Glasscheibe mit
   Hintergrundunschärfe und Schatten, darin das Zeichen.
   Figma gibt für die Schleier eine Ebenen-Unschärfe von 103,2 an; in CSS
   entspricht das etwa der Hälfte, weil beide Programme den Radius
   unterschiedlich rechnen.
   -------------------------------------------------------------------------- */

.seitenkopf--signal { position: relative; overflow: hidden; }

.signal {
  position: absolute;
  top: 117px;
  /* An der Inhaltsspalte ausgerichtet, nicht am Fensterrand: In Figma
     ragt das Sinnbild 10 über die rechte Spaltenkante hinaus. Mit einem
     festen Wert von links wandert es auf breiten Bildschirmen nach innen. */
  right: calc(var(--rand-sektion) - 10px);
  width: 310px;
  height: 310px;
  pointer-events: none;
}

.signal__schleier {
  position: absolute;
  border-radius: 50%;
  filter: blur(52px);
}
.signal__schleier--mint {
  left: -26px; top: -9px;
  width: 224px; height: 224px;
  background: rgba(85, 199, 167, 0.5);
}
.signal__schleier--lavendel {
  left: 129px; top: 146px;
  width: 206px; height: 206px;
  background: rgba(140, 140, 217, 0.32);
}

/* Die Ringe wachsen einmal auf und bleiben danach stehen.
   `both` hält den Endzustand fest, auch wenn die Bewegung abgeschaltet ist. */
@keyframes signal-ring-auf {
  from { transform: scale(0.72); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

.signal__ring {
  position: absolute;
  border-radius: 50%;
  border: 1.29px solid;
  animation: signal-ring-auf 1.1s var(--ease) both;
}
.signal__ring--innen { animation-delay: 0.18s; }
.signal__ring--aussen {
  left: 1px; top: 1px;
  width: 308px; height: 308px;
  border-color: rgba(85, 199, 167, 0.16);
}
.signal__ring--innen {
  left: 23px; top: 23px;
  width: 263px; height: 263px;
  border-color: rgba(85, 199, 167, 0.3);
}

/* Scheibe und Zeichen eine Stufe kleiner als in Figma – auf Wunsch,
   damit der Abstand zu den Ringen deutlicher wird.
   Figma: Scheibe 217 bei 46/46, Zeichen 70. */
.signal__scheibe {
  position: absolute;
  left: 57px; top: 57px;
  width: 196px; height: 196px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.29px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
  box-shadow: 0 0 29px rgba(11, 46, 51, 0.12);
}
.signal__scheibe svg {
  width: 62px; height: 62px;
  color: var(--c-petrol);
}

/* --- Große Stufe · Kontakt · Figma 506:292, 360 × 360 bei 970/121 -------
   Hier stehen die Figma-Maße unverändert. Beim Beratungsbesuch sind Scheibe
   und Zeichen auf Wunsch eine Stufe kleiner – das gilt nur dort.
   Ebenen-Unschärfe 120 → in CSS die Hälfte, Hintergrund-Unschärfe 30 → 15. */
.signal--gross { top: 121px; width: 360px; height: 360px; }
.signal--gross .signal__schleier { filter: blur(60px); }
.signal--gross .signal__schleier--mint {
  left: -30px; top: -10px;
  width: 260px; height: 260px;
}
.signal--gross .signal__schleier--lavendel {
  left: 150px; top: 170px;
  width: 240px; height: 240px;
}
.signal--gross .signal__ring { border-width: 1.5px; }
.signal--gross .signal__ring--aussen { left: 1px;  top: 1px;  width: 358px; height: 358px; }
.signal--gross .signal__ring--innen  { left: 27px; top: 27px; width: 306px; height: 306px; }
.signal--gross .signal__scheibe {
  left: 54px; top: 54px;
  width: 252px; height: 252px;
  border-width: 1.5px;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  box-shadow: 0 16px 34px -10px rgba(11, 46, 51, 0.12);
}
.signal--gross .signal__scheibe svg { width: 96px; height: 96px; }


/* --------------------------------------------------------------------------
   SEITENKOPF · Mobil · Figma 390 × 735, Polster 96/20/40/20, Abstand 16
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {

  .seitenkopf { gap: 16px; padding: 96px 20px 40px; }
  .seitenkopf__vorzeile { align-self: stretch; }

  /* Beratungsbesuch weicht mobil an vier Stellen von Kosten ab – alles so,
     wie es in Figma steht: Abstand 18 statt 16, seitlich 24 statt 20, die
     Kurzantwort behält Polster und Schriftgrad des Desktops, und der Knopf
     läuft nicht über die volle Breite.
     Oben bleibt es bei 96 – in Figma steht dort 40, weil der Entwurf eine
     60 hohe Leistenfläche darüberlegt; unsere Leiste schwebt stattdessen. */
  .seite--beratungsbesuch-37-3 .seitenkopf { gap: 18px; padding: 96px 24px 48px; }
  .seite--beratungsbesuch-37-3 .kurzantwort { padding: 26px 28px; }
  .seite--beratungsbesuch-37-3 .kurzantwort p { font-size: 18px; line-height: 31px; }
  .seite--beratungsbesuch-37-3 .seitenkopf__aktionen { align-self: flex-start; }
  .seite--beratungsbesuch-37-3 .seitenkopf__aktionen .knopf { width: auto; }

  .seitenkopf__reihe { gap: 16px; }
  .seitenkopf__symbol { width: 66px; height: 66px; }
  .seitenkopf__symbol svg { width: 34px; height: 34px; }
  .seitenkopf h1 { font-size: 34px; line-height: 36px; }
  .seite--beratungsbesuch-37-3 .seitenkopf h1 { font-size: 32px; line-height: 34px; }
  .signal { display: none; }   /* mobil zeichnet Figma kein Sinnbild */

  .kurzantwort { width: auto; align-self: stretch; padding: 20px; }
  .kurzantwort p { font-size: 16px; line-height: 27px; }   /* Figma: 170 % von 16 */

  .seitenkopf__aktionen { align-self: stretch; }
  .seitenkopf__aktionen .knopf { width: 100%; }
}


/* ==========================================================================
   SEKTION · VIER TÖPFE (Kosten)
   --------------------------------------------------------------------------
   Figma (Desktop 421:5154) 1440 × 745 · (Mobil 421:5182) 390 × 1173
   Polster 80/120, Abstand 24. Vier Karten à 384 im Umbruchraster mit
   Abstand 24 – die vierte rutscht in die zweite Reihe und behält ihre
   eigene Höhe, Figma dehnt sie nicht auf die Reihenhöhe.
   ========================================================================== */

.toepfe {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 80px var(--rand-sektion);
  background: var(--c-weiss);
}
.toepfe h2 {
  font-size: 38px;
  font-weight: 800;
  line-height: 42px;       /* Figma: 110 % von 38 */
  letter-spacing: -0.02em;
  color: var(--c-petrol);
}
.toepfe__lead {
  font-size: 19px;
  font-weight: 400;
  line-height: 31px;       /* Figma: 165 % von 19 */
  color: var(--c-text-2);
}

.toepfe__raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: 24px;
}

.topf {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 26px 24px;
  border: 1px solid var(--c-rand-hell);
  border-radius: 14px;
  background: var(--c-weiss);
  transition: transform var(--t-kurz) var(--ease),
              border-color var(--t-kurz) var(--ease),
              box-shadow var(--t-kurz) var(--ease);
}
.topf:hover {
  transform: translateY(-4px);
  border-color: var(--c-akzent-hell);
  box-shadow: 0 18px 36px -18px rgba(11, 46, 51, 0.22);
}

/* Paragrafen-Chip · Figma: Polster 5/12, Abstand 7 – der Chip in den
   Leistungskarten der Startseite hat 5/12/5/10 und Abstand 6. Beides so
   gelassen, wie es in der Datei steht. */
.paragraf {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 6px;
  background: var(--c-mint);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.02em;
  color: var(--c-akzent-dunkel);
}
.paragraf__punkt {
  width: 6px; height: 6px; flex: none;
  border-radius: 50%;
  background: var(--c-kopf-lavendel);
}

.topf h3 {
  font-size: 21px;
  font-weight: 700;
  line-height: 29px;       /* Figma: Höhe 29 bei 21 px */
  letter-spacing: -0.01em;
  color: var(--c-petrol);
}
.topf p {
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;       /* Figma: 165 % von 16, Blockhöhe 104 bei 4 Zeilen */
  color: var(--c-text-2);
}


/* --------------------------------------------------------------------------
   VIER TÖPFE · Mobil · Figma 390 × 1173, Polster 48/20, Abstand 18
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {

  .toepfe { gap: 18px; padding: 48px 20px; }
  .toepfe h2 { font-size: 28px; line-height: 31px; }
  .toepfe__lead { font-size: 17px; line-height: 28px; }

  .toepfe__raster { display: flex; flex-direction: column; gap: 16px; }
  .topf { padding: 22px 20px; }
  .topf h3 { font-size: 19px; line-height: 26px; }
  .topf p  { font-size: 15px; line-height: 25px; }   /* Figma: 165 % von 15 */
}


/* ==========================================================================
   SEKTION · BEISPIELE (Kosten)
   --------------------------------------------------------------------------
   Figma (Desktop 421:5211) 1440 × 738 · (Mobil 421:5250) 390 × 1417
   Desktop: Kopf zweispaltig 700 + 64 + 436, darunter eine Tabelle mit
   Spalten 260 / 440 / 500 und mintgrüner Kopfzeile.
   Mobil: dieselbe Tabelle als Karten – Kopfzeile aus, jede Zeile wird zur
   Karte, die Spaltennamen stehen als Beschriftung über dem Wert.
   ========================================================================== */

.beispiele {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 80px var(--rand-sektion);
  background: var(--c-mint);
}

.beispiele__kopf { display: flex; align-items: flex-start; gap: 64px; }

.beispiele__titel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 700px;
  flex: none;
}

/* Überzeile · Bold 13, Sperrung 8 % */
.ueberzeile {
  font-size: 13px;
  font-weight: 700;
  line-height: 17px;       /* Figma: 130 % von 13 */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-akzent-dunkel);
}

.beispiele__titel h2 {
  font-size: 40px;
  font-weight: 800;
  line-height: 44px;       /* Figma: 110 % von 40 */
  letter-spacing: -0.025em;
  color: var(--c-petrol);
}

.beispiele__bei {
  padding-top: 12px;
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;       /* Figma: 165 % von 18 */
  color: var(--c-text-2);
}

/* --- Tabelle · Radius 16, Kopfzeile #82dcc0 ---------------------------- */
.beispiele__tabelle {
  border: 1px solid var(--c-rand-hell);
  border-radius: 16px;
  background: var(--c-weiss);
  overflow: hidden;
}

.einsaetze {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
}
.einsaetze thead tr { background: var(--c-akzent-hell); }
.einsaetze thead th {
  padding: 18px 24px;
  font-size: 13px;
  font-weight: 700;
  line-height: 17px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-petrol);
}
.einsaetze thead th:nth-child(1) { width: 260px; }
.einsaetze thead th:nth-child(2) { width: 440px; }
.einsaetze thead th:nth-child(3) { width: 500px; }

.einsaetze tbody th,
.einsaetze tbody td {
  padding: 18px 24px;
  border-top: 1px solid var(--c-rand-hell);
  vertical-align: top;
}

.einsaetze tbody th {
  display: table-cell;
  font-weight: 400;
}
.einsaetze tbody th b {
  display: block;
  margin-bottom: 4px;
  font-size: 22px;
  font-weight: 700;
  line-height: 29px;       /* Figma: 130 % von 22 */
  letter-spacing: -0.01em;
  color: var(--c-petrol);
}
.einsaetze tbody th small {
  display: block;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;       /* Figma: 160 % von 16 */
  color: var(--c-text-3);
}

.einsaetze tbody td {
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;       /* Figma: 165 % von 18 */
  color: var(--c-text-2);
}
.einsaetze td::before { display: none; }   /* Spaltenname nur mobil */


/* --------------------------------------------------------------------------
   BEISPIELE · Mobil · Figma 390 × 1417
   Die Tabelle wird zur Kartenliste: Kopfzeile aus, jede Zeile eine Karte
   mit Radius 16, Trennlinie unter dem Titel, Spaltennamen als Überzeile.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {

  .beispiele { gap: 24px; padding: 48px 20px; }

  .beispiele__kopf { flex-direction: column; gap: 12px; }
  .beispiele__titel { width: auto; gap: 12px; }
  .beispiele__titel h2 {
    font-size: 28px;
    font-weight: 700;      /* Figma setzt mobil Bold statt ExtraBold */
    line-height: 34px;     /* 120 % von 28 */
    letter-spacing: -0.015em;
  }
  .beispiele__bei { padding-top: 0; }

  /* Rahmen und Radius wandern von der Tabelle auf die einzelne Zeile */
  .beispiele__tabelle { border: 0; border-radius: 0; background: none; overflow: visible; }
  .einsaetze, .einsaetze tbody { display: block; }
  .einsaetze thead { display: none; }

  .einsaetze tbody tr {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    border: 1px solid var(--c-rand-hell);
    border-radius: 16px;
    background: var(--c-weiss);
  }
  .einsaetze tbody tr + tr { margin-top: 12px; }

  .einsaetze tbody th,
  .einsaetze tbody td { display: block; padding: 0; border: 0; }

  /* Titelblock mit Trennlinie darunter – Figma: Linie 12 unter dem Kopf */
  .einsaetze tbody th {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--c-rand-hell);
  }
  .einsaetze tbody th b { margin-bottom: 2px; }

  .einsaetze tbody td {
    font-size: 16px;
    line-height: 26px;     /* Figma: 160 % von 16 */
  }
  .einsaetze tbody td::before {
    content: attr(data-spalte);
    display: block;
    margin-bottom: 2px;
    font-size: 13px;
    font-weight: 700;
    line-height: 17px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-text-3);
  }
}


/* ==========================================================================
   SEKTION · VERSPRECHEN (Kosten)
   --------------------------------------------------------------------------
   Figma (Desktop 421:5290) 1440 × 812 · (Mobil 421:5319) 390 × 1223
   Desktop: Petrol, Text 600 links, Bild 520 × 620 rechts, Abstand 80.
   Mobil: alles untereinander, Bild zuletzt mit 350 × 400.
   ========================================================================== */

.versprechen {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 80px;
  padding: 96px var(--rand-sektion);
  background: var(--c-petrol);
}

.versprechen__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  width: 600px;
  min-width: 0;
}

.ueberzeile--hell { color: var(--c-akzent-hell); }

.versprechen__text h2 {
  align-self: stretch;
  font-size: 40px;
  font-weight: 800;
  line-height: 44px;       /* Figma: 110 % von 40 */
  letter-spacing: -0.025em;
  color: var(--c-weiss);
}
.versprechen__lead {
  font-size: 21px;
  font-weight: 400;
  line-height: 33px;       /* Figma: 155 % von 21, Blockhöhe 132 bei 4 Zeilen */
  color: var(--c-fuss-linie);
}

/* Prüfliste · Haken 22 auf Akzentscheibe, Abstand 14 ---------------------- */
.versprechen__liste {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: 14px;
}
.versprechen__liste li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;       /* Figma: 165 % von 18 */
  color: var(--c-weiss);
}
.haken-scheibe { width: 22px; height: 22px; flex: none; margin-top: 4px; }

.versprechen__bild {
  width: 520px;
  height: 620px;
  flex: none;
  object-fit: cover;
  border-radius: 24px;
}


/* --------------------------------------------------------------------------
   VERSPRECHEN · Mobil · Figma 390 × 1223, Polster 56/20, Abstand 20
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {

  .versprechen {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding: 56px 20px;
  }

  .versprechen__text { width: auto; gap: 20px; }
  .versprechen__text h2 {
    font-size: 28px;
    font-weight: 700;      /* Figma setzt mobil Bold statt ExtraBold */
    line-height: 34px;
    letter-spacing: -0.015em;
  }
  .versprechen__lead { font-size: 18px; line-height: 30px; }

  .versprechen__liste li { gap: 12px; font-size: 16px; line-height: 26px; }
  .haken-scheibe { margin-top: 2px; }

  .versprechen__aktion { align-self: stretch; }
  .versprechen__aktion .knopf { width: 100%; }

  .versprechen__bild { width: 100%; height: 400px; }
}


/* ==========================================================================
   FRAGENBLOCK · Aufklapper über die ganze Spalte
   --------------------------------------------------------------------------
   Figma „Sektion · Kosten im Detail" (Desktop 421:5347) 1440 × 790 ·
   (Mobil 421:5387) 390 × 878. Zweite Fassung des Aufklappers: Kopf mittig,
   eine Spalte 820 statt der zweispaltigen Fassung auf der Startseite, und
   der Schalter ist hier immer mintgrün – auch im geschlossenen Zustand.
   Die Einzelteile .frage sind dieselben, nur anders gefasst.
   ========================================================================== */

.fragenblock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 80px var(--rand-sektion);
  background: var(--c-mint);
}

.fragenblock__kopf {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 820px;
  max-width: 100%;
  text-align: center;
}
.fragenblock__kopf h2 {
  align-self: stretch;
  font-size: 40px;
  font-weight: 800;
  line-height: 44px;       /* Figma: 110 % von 40 */
  letter-spacing: -0.025em;
  color: var(--c-petrol);
}

.fragenblock__liste { width: 820px; max-width: 100%; }

.fragenblock .frage__knopf {
  font-size: 20px;
  line-height: 27px;       /* Figma: 135 % von 20 */
  letter-spacing: 0;       /* hier ohne Sperrung, anders als auf der Startseite */
}
.fragenblock .frage__schalter { background: var(--c-akzent-hell); }
.fragenblock .frage__antwort p {
  font-size: 17px;
  line-height: 28px;       /* Figma: 165 % von 17 */
}


/* ==========================================================================
   ABSCHLUSS · CTA-Karte mit Verlauf
   --------------------------------------------------------------------------
   Figma „Sektion · Erstgespräch" (Desktop 421:5428) 1440 × 533 ·
   (Mobil 421:5442) 390 × 589. Karte 1200 × 373, Radius 24, Polster 84/72,
   Verlauf #071f23 → #0e3d3e (45 %) → #25717e. Die Richtung ist in Figma
   als Matrix hinterlegt; umgerechnet sind das 103 Grad beim Querformat
   der Desktop-Karte und 137 Grad beim Hochformat mobil.
   Dieser Baustein kehrt auf vielen Unterseiten wieder.
   ========================================================================== */

.abschluss { padding: 80px var(--rand-sektion); background: var(--c-weiss); }

.abschluss__karte {
  display: flex;
  align-items: center;
  gap: 64px;
  padding: 84px 72px;
  border-radius: 24px;
  background: linear-gradient(103deg, #071f23 0%, #0e3d3e 45%, #25717e 100%);
}

.abschluss__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  flex: 1;
}
.abschluss__text h2 {
  align-self: stretch;
  font-size: 40px;
  font-weight: 800;
  line-height: 44px;
  letter-spacing: -0.025em;
  color: var(--c-weiss);
}
.abschluss__text p {
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;       /* Figma: 165 % von 18 */
  color: var(--c-fuss-linie);
}

.abschluss__aktionen {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 360px;
  flex: none;
}

/* Telefonkarte · Glas auf dem Verlauf, Polster 22/30/22/26 */
.abschluss__telefon {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 30px 22px 26px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  transition: background var(--t-kurz) var(--ease);
}
.abschluss__telefon:hover { background: rgba(255, 255, 255, 0.14); }
.tel-scheibe { width: 46px; height: 46px; flex: none; }

.abschluss__tel-text { display: flex; flex-direction: column; gap: 2px; }
.abschluss__tel-text small {
  font-size: 13px;
  font-weight: 700;
  line-height: 17px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-akzent-hell);
}
.abschluss__tel-text b {
  font-size: 24px;
  font-weight: 800;
  line-height: 31px;       /* Figma: 130 % von 24 */
  color: var(--c-weiss);
}

.abschluss__aktionen .knopf { width: 100%; }


/* --------------------------------------------------------------------------
   FRAGENBLOCK und ABSCHLUSS · Mobil
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {

  .fragenblock { gap: 24px; padding: 48px 20px; }
  .fragenblock__kopf { width: auto; align-self: stretch; gap: 12px; }
  .fragenblock__kopf h2 {
    font-size: 28px;
    font-weight: 700;      /* Figma setzt mobil Bold */
    line-height: 34px;
    letter-spacing: -0.015em;
  }
  .fragenblock__liste { width: auto; }

  .fragenblock .frage { padding: 18px 0; gap: 10px; }
  .fragenblock .frage__knopf { font-size: 18px; line-height: 24px; gap: 12px; }
  .fragenblock .frage__schalter { width: 30px; height: 30px; }
  .fragenblock .frage__antwort p { font-size: 16px; line-height: 26px; }

  .abschluss { padding: 48px 20px; }
  .abschluss__karte {
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
    padding: 40px 24px;
    /* Hochformat: dieselbe Verlaufsrichtung ergibt hier 137 Grad */
    background: linear-gradient(137deg, #071f23 0%, #0e3d3e 45%, #25717e 100%);
  }
  .abschluss__text { gap: 14px; }
  .abschluss__text h2 {
    font-size: 28px;
    font-weight: 700;
    line-height: 34px;
    letter-spacing: -0.015em;
  }
  .abschluss__text p { font-size: 16px; line-height: 26px; }

  .abschluss__aktionen { width: auto; gap: 12px; }
}


/* ==========================================================================
   SEKTION · HÄUFIGKEIT (Beratungsbesuch)
   --------------------------------------------------------------------------
   Figma (Desktop 233:13) 1440 × 845 · (Mobil 233:174) 390 × 1162
   Aufbau wie „Beispiele" auf der Kosten-Seite, mobil aber anders: Dort
   wird die Tabelle zur Kartenliste, hier bleibt sie eine Tabelle mit zwei
   Spalten – Turnus und Anzahl pro Jahr rücken zusammen.
   ========================================================================== */

.faktenblock {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 80px var(--rand-sektion);
  background: var(--c-mint);
}

.faktenblock__kopf { display: flex; align-items: flex-start; gap: 64px; }
.faktenblock__titel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 700px;
  flex: none;
}
.faktenblock__titel h2 {
  font-size: 40px;
  font-weight: 800;
  line-height: 44px;       /* Figma: 110 % von 40 */
  letter-spacing: -0.025em;
  color: var(--c-petrol);
}
.faktenblock__bei {
  padding-top: 12px;
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;       /* Figma: 165 % von 18 */
  color: var(--c-text-2);
}

/* Fassung mit drei gleich breiten Spalten (Abgrenzung, Behandlungspflege).
   Figma: 399 + 399 + 399 in 1198. Steht nach den nth-child-Breiten oben,
   deshalb reicht die gleiche Spezifität nicht – daher :nth-child(n). */
.faktenblock--drittel .turnus thead th:nth-child(n) { width: 33.333%; }

.faktenblock__tabelle {
  border: 1px solid var(--c-rand-hell);
  border-radius: 16px;
  background: var(--c-weiss);
  overflow: hidden;
}

.turnus {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
}
.turnus thead tr { background: var(--c-akzent-hell); }
.turnus thead th {
  padding: 18px 24px;
  font-size: 13px;
  font-weight: 700;
  line-height: 17px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-petrol);
}
.turnus thead th:nth-child(1) { width: 260px; }
.turnus thead th:nth-child(2) { width: 440px; }
.turnus thead th:nth-child(3) { width: 500px; }

.turnus tbody th,
.turnus tbody td {
  padding: 18px 24px;
  border-top: 1px solid var(--c-rand-hell);
  vertical-align: top;
}
.turnus tbody th {
  font-size: 22px;
  font-weight: 700;
  line-height: 29px;       /* Figma: 130 % von 22 */
  letter-spacing: -0.01em;
  color: var(--c-petrol);
}
.turnus tbody td {
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;       /* Figma: 165 % von 18 */
  color: var(--c-text-2);
}

.faktenblock__hinweis {
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
  color: var(--c-text-2);
}
.faktenblock__hinweis b { font-weight: 700; }


/* --------------------------------------------------------------------------
   HÄUFIGKEIT · Mobil · Figma 390 × 1162, Polster 44/24/48/24, Abstand 22
   Zwei Spalten: 164 und 176. Die Anzahl pro Jahr hängt sich über
   data-jahr an den Turnus an, damit der Wert nur einmal im Quelltext steht.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {

  .faktenblock { gap: 22px; padding: 44px 24px 48px; }

  .faktenblock__kopf { flex-direction: column; gap: 14px; }
  .faktenblock__titel { width: auto; }
  .faktenblock__titel h2 { font-size: 28px; line-height: 31px; }
  .faktenblock__bei { padding-top: 12px; }

  /* Feste Spaltenbreiten, sonst verteilt der Browser nach Inhalt und der
     Turnus passt in eine Zeile statt in zwei wie in Figma. */
  .turnus { table-layout: fixed; }
  .turnus thead th:nth-child(1) { width: 164px; padding: 18px 8px 18px 14px; }
  .turnus thead th:nth-child(2) { width: 176px; padding: 18px 10px 18px 12px; }

  .turnus tbody th { padding: 18px 8px 18px 14px; }
  .turnus tbody td { padding: 18px 10px 18px 12px; }
  /* Nicht `data-jahr` nennen – das Attribut setzt das Skript im Footer
     auf die aktuelle Jahreszahl und würde den Zelltext überschreiben. */
  .turnus tbody td[data-projahr]::after { content: " · " attr(data-projahr); }
}


/* ==========================================================================
   SEKTION · ABLAUFBAND (Beratungsbesuch)
   --------------------------------------------------------------------------
   Figma (Desktop 282:13) 1440 × 820 · (Mobil 282:40) 390 × 1204
   Desktop: bildfüllender Hintergrund mit waagerechter Abdunklung und zwei
   senkrechten Übergängen nach Mint, damit die Sektion oben und unten in
   die Nachbarn übergeht. Darüber Kopf, freie Marke und eine Glasleiste
   mit vier Schritten nebeneinander.
   Mobil: Petrol als Fläche, das Foto als Band in der Mitte, die Schritte
   untereinander in derselben Glasleiste.
   ========================================================================== */

.ablaufband {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 820px;
  padding: 96px var(--rand-sektion) 64px;
  background: var(--c-petrol-tief);
  overflow: hidden;
}

/* Desktop: Video als Hintergrund. Mobil: Foto als Band im Fluss. */
.ablaufband__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ablaufband__bild { width: 100%; height: 330px; object-fit: cover; }

/* Abdunklung · waagerecht, damit der Text links lesbar bleibt */
.ablaufband__abdunklung {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    rgba(7, 31, 35, 0.94) 0%,
    rgba(7, 31, 35, 0.64) 50%,
    rgba(7, 31, 35, 0.12) 100%);
}

/* Übergänge · je 100 hoch, blenden nach Mint aus bzw. ein */
.ablaufband__uebergang { position: absolute; left: 0; right: 0; height: 100px; }
.ablaufband__uebergang--oben {
  top: 0;
  background: linear-gradient(to bottom,
    rgba(235, 251, 245, 0.72) 0%,
    rgba(235, 251, 245, 0.22) 45%,
    rgba(235, 251, 245, 0) 100%);
}
.ablaufband__uebergang--unten {
  bottom: 0;
  background: linear-gradient(to bottom,
    rgba(235, 251, 245, 0) 0%,
    rgba(235, 251, 245, 0.22) 55%,
    rgba(235, 251, 245, 0.72) 100%);
}

/* --- Kopf · 395 breit, Abstand 16 -------------------------------------- */
.ablaufband__kopf {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 395px;
}
.ablaufband__eyebrow {
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  text-transform: uppercase;
  color: var(--c-akzent);
}
.ablaufband__kopf h2 {
  align-self: stretch;
  font-size: 46px;
  font-weight: 800;
  line-height: 63px;       /* Figma: Blockhöhe 126 bei 2 Zeilen */
  color: var(--c-weiss);
}
.ablaufband__kopf p {
  font-size: 17px;
  font-weight: 700;
  line-height: 23px;       /* Figma: Blockhöhe 46 bei 2 Zeilen */
  color: rgba(255, 255, 255, 0.82);
}

/* --- Marke · frei oben rechts ------------------------------------------ */
.ablaufband__marke {
  position: absolute;
  top: 56px;
  right: var(--rand-sektion);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 18px 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 14px;
  background: rgba(7, 31, 35, 0.42);
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
}
.ablaufband__marke b {
  font-size: 17px;
  font-weight: 800;
  line-height: 23px;
  color: var(--c-akzent);
}
.ablaufband__marke small {
  font-size: 13px;
  font-weight: 700;
  line-height: 18px;
  color: rgba(255, 255, 255, 0.85);
}

/* --- Glasleiste · Polster 10, vier Schritte nebeneinander --------------- */
.ablaufband__leiste {
  position: relative;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}
.ablaufband__schritte { display: grid; grid-template-columns: repeat(4, 1fr); }

.aschritt-glas {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 22px 22px;
}
.aschritt-glas + .aschritt-glas { border-left: 1px solid rgba(255, 255, 255, 0.2); }
.aschritt-glas__nr {
  font-size: 15px;
  font-weight: 800;
  line-height: 20px;
  color: var(--c-akzent);
}
.aschritt-glas b {
  font-size: 18px;
  font-weight: 800;
  line-height: 25px;
  color: var(--c-weiss);
}
.aschritt-glas small {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 20px;       /* Figma: Blockhöhe 40 bei 2 Zeilen */
  color: rgba(255, 255, 255, 0.78);
}


/* --------------------------------------------------------------------------
   ABLAUFBAND · Mobil · Figma 390 × 1204
   Petrol als Fläche, das Foto als 330 hohes Band mit Verlauf an beiden
   Kanten, darunter die Leiste mit den Schritten untereinander.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {

  .ablaufband {
    min-height: 0;
    gap: 26px;
    padding: 42px 0 34px;
    justify-content: flex-start;
  }

  .ablaufband__bild { order: 2; }
  .ablaufband__abdunklung { display: none; }

  /* Die Übergänge sitzen an den Kanten des Bandes */
  .ablaufband__uebergang { position: absolute; height: 110px; z-index: 1; }
  .ablaufband__uebergang--oben {
    top: 247px;
    background: linear-gradient(to bottom, #071f23 0%, rgba(7, 31, 35, 0) 100%);
  }
  .ablaufband__uebergang--unten {
    top: 493px; bottom: auto;
    background: linear-gradient(to bottom, rgba(7, 31, 35, 0) 0%, #071f23 100%);
  }

  .ablaufband__kopf { order: 1; width: auto; padding: 0 20px; }
  .ablaufband__kopf h2 { font-size: 32px; line-height: 44px; }
  .ablaufband__kopf p  { line-height: 23px; }

  .ablaufband__marke {
    top: 24px;
    right: 20px;
    z-index: 2;
    padding: 12px 18px 12px 16px;
  }
  .ablaufband__marke b { font-size: 15px; line-height: 20px; }
  .ablaufband__marke small { font-size: 12px; line-height: 16px; }

  .ablaufband__leiste { order: 3; margin: 0 20px; }
  .ablaufband__schritte { grid-template-columns: 1fr; }
  .aschritt-glas { padding: 16px 22px; }
  .aschritt-glas + .aschritt-glas {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  }
}


/* ==========================================================================
   SEKTION · VERGESSEN (Beratungsbesuch)
   --------------------------------------------------------------------------
   Figma (Desktop 296:13) 1440 × 538 · (Mobil 296:29) 390 × 918
   Links ein angepinnter Zettel in Papierfarbe, am Desktop leicht gedreht
   und mit gerissener Unterkante, rechts Text und Knopf.
   ========================================================================== */

.vergessen {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 80px;
  padding: 96px var(--rand-sektion);
  background: var(--c-mint);
}

/* --- Zettel · 420 × 332, Papier #fdfcf8, Polster 38/40/30/40 ----------- */
.notiz {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  width: 420px;
  flex: none;
  padding: 38px 40px 30px;
  background: #fdfcf8;
  box-shadow: 0 0 36px rgba(10, 46, 51, 0.16);
  transform: rotate(2deg);
  /* Eine Drehung verändert den Platzbedarf im Layout nicht, in Figma aber
     schon: dort misst der gedrehte Zettel 431 × 346 statt 420 × 332.
     Die Differenz kommt als Außenabstand dazu, sonst wäre die Sektion
     11 px flacher und die rechte Spalte 11 px zu weit links. */
  margin: 7px 11px 7px 0;
}

/* Pinnadel · 22 auf Akzent, ragt 11 über die Oberkante */
.notiz__nadel {
  position: absolute;
  top: -11px;
  left: 199px;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(11, 46, 51, 0.18);
  border-radius: 50%;
  background: var(--c-akzent);
  box-shadow: 0 2px 6px rgba(10, 46, 51, 0.3);
}
.notiz__nadel::after {
  content: "";
  position: absolute;
  left: 4px; top: 3px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
}

.notiz__absender {
  font-size: 11px;
  font-weight: 700;
  line-height: 15px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #52666b;
}
.notiz__betreff {
  font-size: 22px;
  font-weight: 800;
  line-height: 30px;       /* Figma: Blockhöhe 60 bei 2 Zeilen */
  color: var(--c-petrol);
}
.notiz__strich { width: 220px; height: 1px; background: rgba(23, 89, 102, 0.2); }
.notiz__text {
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;       /* Figma: Blockhöhe 100 bei 5 Zeilen */
  color: #52666b;
}
.notiz__stempel {
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;       /* Figma: Blockhöhe 32 bei 2 Zeilen */
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #175966;
}

/* Gerissene Unterkante · ragt 17 unter den Zettel */
.notiz__riss {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -17px;
  height: 18px;
  display: block;
}

/* --- Rechte Spalte · 689 breit, Abstand 18 ----------------------------- */
.vergessen__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  width: 689px;
  min-width: 0;
}
.vergessen__eyebrow {
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  text-transform: uppercase;
  color: #175966;
}
.vergessen__text h2 {
  align-self: stretch;
  font-size: 42px;
  font-weight: 800;
  line-height: 57px;       /* Figma: Blockhöhe 114 bei 2 Zeilen */
  color: var(--c-petrol);
}
.vergessen__text p {
  font-size: 18px;
  font-weight: 400;
  line-height: 25px;       /* Figma: Blockhöhe 100 bei 4 Zeilen */
  color: #52666b;
}

/* Knopf in der Zettel-Fassung · Radius 8, Polster 15/24, Pfeil im Text */
.zettelknopf {
  display: inline-flex;
  align-items: center;
  padding: 15px 24px;
  border-radius: 8px;
  background: var(--c-akzent);
  font-size: 15.5px;
  font-weight: 800;
  line-height: 21px;
  color: var(--c-petrol);
  white-space: pre;
  transition: background var(--t-kurz) var(--ease);
}
.zettelknopf:hover { background: var(--c-akzent-hell); }


/* --------------------------------------------------------------------------
   VERGESSEN · Mobil · Figma 390 × 918, Polster 56/24, Abstand 28
   Zettel ungedreht, Polster seitlich 26, Trennstrich über die volle Breite.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {

  .vergessen {
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
    padding: 56px 24px;
  }

  .notiz { width: auto; padding: 38px 26px 30px; transform: none; margin: 0; }
  .notiz__nadel { left: 160px; }
  .notiz__strich { width: 100%; }

  .vergessen__text { width: auto; }
  .vergessen__text h2 { font-size: 29px; line-height: 40px; }
}


/* ==========================================================================
   SEKTION · TERMIN SICHERN (Beratungsbesuch)
   --------------------------------------------------------------------------
   Figma (Desktop 334:41) 1440 × 533 · (Mobil 334:70) 390 × 732
   Anordnung wie die Erstgespräch-Sektion der Startseite: links Ansprache
   668, rechts eine dunkle Glaskarte 460 – hier mit einer Aufzählung statt
   einem Formular.
   ========================================================================== */

.terminabschluss { padding: 96px var(--rand-sektion); background: var(--c-mint); }
.terminabschluss__inhalt { display: flex; align-items: flex-start; gap: 72px; }

.terminabschluss__ansprache {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  width: 668px;
  min-width: 0;
}
.terminabschluss__ansprache h2 {
  align-self: stretch;
  font-size: 44px;
  font-weight: 800;
  line-height: 47px;       /* Figma: 106 % von 44, Blockhöhe 94 bei 2 Zeilen */
  color: var(--c-petrol);
}
/* Eigene Klasse, nicht `… p` – die Vorzeile ist auch ein Absatz und würde
   sonst denselben Schriftgrad bekommen. */
.terminabschluss__lead {
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;       /* Figma: 165 % von 18 */
  color: var(--c-text-2);
}

/* --- Dunkle Karte · 460 breit, Polster 30, Abstand 16 ------------------- */
.uebernahme {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 460px;
  flex: none;
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  background: rgba(7, 31, 35, 0.82);
}
.uebernahme h3 {
  font-size: 20px;
  font-weight: 700;
  line-height: 27px;
  color: var(--c-weiss);
}

.uebernahme__punkte { display: flex; flex-direction: column; gap: 12px; }
.uebernahme__punkte li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 21px;       /* Figma: Höhe 21 bei 15,5 px */
  color: var(--c-hell-85);
}
.uebernahme__haken {
  width: 13px;
  flex: none;
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
  color: var(--c-akzent);
}

.uebernahme .knopf { width: 100%; }

.uebernahme__hinweis {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;       /* Figma: 150 % von 12, Blockhöhe 36 bei 2 Zeilen */
  color: var(--c-fuss-linie);
}


/* --------------------------------------------------------------------------
   TERMIN SICHERN · Mobil · Figma 390 × 732, Polster 56/20, Abstand 24
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {

  .terminabschluss { padding: 56px 20px; }
  .terminabschluss__inhalt { flex-direction: column; align-items: stretch; gap: 28px; }
  .terminabschluss__ansprache { width: auto; }
  .terminabschluss__ansprache h2 { font-size: 32px; line-height: 34px; }
  .terminabschluss__lead { font-size: 17px; line-height: 28px; }

  .uebernahme { width: auto; padding: 24px 20px; }
  .uebernahme h3 { font-size: 18px; line-height: 25px; }
}


/* ==========================================================================
   SEKTION · TERMIN (Beratungsbesuch)
   --------------------------------------------------------------------------
   Figma (Desktop 324:13) 1440 × 1193 · (Mobil 324:204) 390 × 1603
   Schrittanzeige, Kopf, Schnellwahl und darunter die Kalenderbank:
   links das Monatsraster 818, rechts die Zeitspalte 380 auf Mint.
   Hinter allem ein weich gezeichneter Lichtschein.
   ========================================================================== */

.termin {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 46px;
  padding: 100px var(--rand-sektion);
  background: var(--c-mint);
  /* Kein overflow: hidden – sonst klippt die Sektion die aufgeklappte
     Auswahlliste. Den Lichtschein hält stattdessen der Schleier. */
}

/* Klippt allein den Schein, nicht den Inhalt. */
.termin__schleier {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Lichtschein · Figma: Ellipse 1100 × 620, Akzent 22 %, Ebenen-Unschärfe 180 */
.termin__schein {
  position: absolute;
  left: 170px;
  top: 180px;
  width: 1100px;
  height: 620px;
  border-radius: 50%;
  background: rgba(85, 199, 167, 0.22);
  filter: blur(90px);
  pointer-events: none;
}

/* --- Schrittanzeige · Pillen mit Abstand 10 ----------------------------- */
.termin__schritte {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.kschritt {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 20px 9px 16px;
  border: 1px solid rgba(23, 89, 102, 0.18);
  border-radius: var(--r-pill);
  background: var(--c-weiss);
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  color: #52666b;
}
.kschritt__nr { font-size: 13px; font-weight: 800; line-height: 18px; }
.kschritt--aktiv {
  border-color: transparent;
  background: var(--c-petrol);
  color: var(--c-weiss);
}
.kschritt--aktiv .kschritt__nr { color: var(--c-akzent); }

/* Erledigt · weiße Pille mit Mintkante, Häkchen statt Ziffer */
.kschritt--erledigt {
  border-color: rgba(85, 199, 167, 0.6);
  color: var(--c-petrol);
}
.kschritt--erledigt .kschritt__nr { color: var(--c-akzent); }

/* Zustandswechsel der Sektion. Nur verstecken und den aktiven Stand
   zurückholen – ein pauschales display würde die Flex-Spalten killen,
   das ist hier schon einmal passiert. */
.termin [data-stand] { display: none; }
.termin[data-stand="1"] [data-stand="1"],
.termin[data-stand="2"] [data-stand="2"],
.termin[data-stand="3"] [data-stand="3"] { display: flex; }

/* Trennpunkt zwischen den Pillen. Er sitzt am li, nicht an der Pille –
   sonst stünde er innerhalb der Pillenfläche. Figma: 4 breit, Abstand 10
   auf jeder Seite; die 10 links kommen aus dem gap der Reihe. */
.termin__schritte > li { display: inline-flex; align-items: center; }
.termin__schritte > li + li::before {
  content: "";
  width: 4px;
  height: 4px;
  margin-right: 10px;
  border-radius: 50%;
  background: rgba(82, 102, 107, 0.5);
}

/* --- Kopf · mittig ----------------------------------------------------- */
.termin__kopf {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  align-self: stretch;
  text-align: center;
}
.termin__eyebrow {
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  text-transform: uppercase;
  color: #175966;
}
.termin__kopf h2 {
  align-self: stretch;
  font-size: 44px;
  font-weight: 800;
  line-height: 60px;       /* Figma: Höhe 60 bei einer Zeile */
  color: var(--c-petrol);
}
.termin__lead {
  width: 720px;
  max-width: 100%;
  font-size: 18px;
  font-weight: 400;
  line-height: 25px;       /* Figma: Blockhöhe 50 bei 2 Zeilen */
  color: #52666b;
}

/* --- Schnellwahl · Pille mit Knopf -------------------------------------- */
.schnellwahl {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px 8px 22px;
  border: 1px solid rgba(85, 199, 167, 0.5);
  border-radius: var(--r-pill);
  background: var(--c-weiss);
}
.schnellwahl__text { font-size: 15px; font-weight: 400; line-height: 20px; color: #52666b; }
.schnellwahl__termin { font-size: 15.5px; font-weight: 800; line-height: 21px; color: var(--c-petrol); }
.schnellwahl__knopf {
  padding: 9px 18px;
  border-radius: var(--r-pill);
  background: var(--c-akzent);
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  color: var(--c-petrol);
  transition: background var(--t-kurz) var(--ease);
}
.schnellwahl__knopf:hover { background: var(--c-akzent-hell); }

/* „ändern" in Schritt 2 · nur Kontur. 9 + 19 + 9 + 2 Kante = 39 wie Figma. */
.schnellwahl__knopf--linie {
  border: 1px solid rgba(23, 89, 102, 0.25);
  background: transparent;
}
.schnellwahl__knopf--linie:hover { background: rgba(23, 89, 102, 0.06); }

/* --- Kalenderbank ------------------------------------------------------ */
.kalenderbank {
  position: relative;
  display: flex;
  /* Figma dehnt die Monatsspalte nicht auf die Höhe der Zeitspalte –
     die weiße Fläche füllt den Rest. */
  align-items: flex-start;
  align-self: stretch;
  border: 1px solid rgba(23, 89, 102, 0.08);
  border-radius: 24px;
  background: var(--c-weiss);
  box-shadow: 0 0 60px rgba(10, 46, 51, 0.14);
  /* Kein overflow: hidden – das würde die aufgeklappte Auswahlliste
     abschneiden. Stattdessen rundet die Mintspalte selbst mit; innen
     23, weil die 1er-Kante der Bank davorliegt. */
}
.kzeiten,
.kdaten { border-radius: 0 23px 23px 0; }

.kmonat {
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1;
  padding: 36px 40px 40px;
}
.kmonat__kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kmonat__kopf h3 {
  font-size: 26px;
  font-weight: 800;
  line-height: 36px;
  color: var(--c-petrol);
}
.kmonat__blaettern { display: flex; gap: 8px; }
.kmonat__blaettern button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 41px; height: 40px;
  border: 1px solid rgba(23, 89, 102, 0.18);
  border-radius: 10px;
  color: #52666b;
  transition: background var(--t-kurz) var(--ease), color var(--t-kurz) var(--ease);
}
.kmonat__blaettern button:hover { background: var(--c-mint); color: var(--c-akzent-dunkel); }
.kmonat__blaettern svg { width: 20px; height: 20px; }

.kwochentage, .kwoche { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.kwochentage li {
  padding: 4px 0;
  font-size: 11px;
  font-weight: 700;
  line-height: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(82, 102, 107, 0.75);
}

.kraster { display: flex; flex-direction: column; gap: 6px; }

.ktag { display: block; }
.ktag button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 100%;
  height: 46px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 800;
  line-height: 21px;
  color: rgba(82, 102, 107, 0.32);
  transition: background var(--t-kurz) var(--ease), color var(--t-kurz) var(--ease);
}
.ktag__punkt { width: 5px; height: 5px; border-radius: 50%; background: transparent; }

/* Zustände · Figma „Zustand · Kalender · Zustände im Detail" (425:1833).
   Gedimmte Zahl: der Katalog nennt 0.28, der gebaute Schritt-1-Kalender
   (425:505) zeigt 0.32 – hier gilt der Seitenentwurf, damit die Seite zu
   ihrem eigenen Frame passt. Wochenende und Vergangen sind laut Katalog
   identisch, deshalb teilen sie sich denselben Wert. */

/* Frei · mehrere Zeiten verfügbar, Punkt in Mint */
.ktag--frei button { background: var(--c-mint); color: var(--c-petrol); }
.ktag--frei .ktag__punkt { background: var(--c-akzent); }
/* Der gewählte Tag trägt weiterhin --frei, damit er beim Abwählen nicht
   leer zurückbleibt. Deshalb den Hover dort aussparen. */
.ktag--frei:not(.ktag--gewaehlt) button:hover { background: var(--c-akzent-hell); }

/* Wenige Plätze · wie frei, aber blasserer Punkt */
.ktag--wenige button { background: var(--c-mint); color: var(--c-petrol); }
.ktag--wenige .ktag__punkt { background: rgba(85, 199, 167, 0.45); }
.ktag--wenige:not(.ktag--gewaehlt) button:hover { background: var(--c-akzent-hell); }

/* Gewählt · Mintfläche, dunkle Zahl und dunkler Punkt */
.ktag--gewaehlt button { background: var(--c-akzent); color: var(--c-petrol); }
.ktag--gewaehlt .ktag__punkt { background: var(--c-petrol); }

/* Ausgebucht · keine Fläche, kein Punkt, Zahl auf 45 % */
.ktag--ausgebucht button { color: rgba(82, 102, 107, 0.45); }

/* Wochenende und Vergangen · keine Fläche, kein Punkt, Zahl auf 32 % */
.ktag--aus button,
.ktag--vergangen button { color: rgba(82, 102, 107, 0.32); }

/* Der betrachtete, aber volle Tag · Figma 425:1443: grauer Rahmen statt
   Mintfläche, Zahl bleibt gedimmt. Schlägt „gewählt" mit zwei Klassen. */
.ktag--ausgebucht.ktag--gewaehlt button {
  background: none;
  color: rgba(82, 102, 107, 0.45);
  box-shadow: 0 0 0 1.5px rgba(23, 89, 102, 0.4);
}
.ktag--ausgebucht.ktag--gewaehlt .ktag__punkt { background: transparent; }

/* Heute · Mint-Rahmen als Orientierung. Figma zeichnet den Strich außen
   (Zelle 46 → Rahmenkasten 49), deshalb box-shadow statt border: das
   Monatsraster behält seine Zeilenhöhe. */
.ktag--heute button { box-shadow: 0 0 0 1.5px var(--c-akzent); }

.ktag--aus button,
.ktag--ausgebucht button,
.ktag--vergangen button { cursor: default; }
.ktag--leer { height: 46px; }

.klegende {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-top: 4px;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 18px;
  color: rgba(82, 102, 107, 0.85);
}
.klegende__punkt { width: 5px; height: 5px; flex: none; border-radius: 50%; background: var(--c-akzent); }

/* --- Zeitspalte · 380 auf Mint ----------------------------------------- */
.kzeiten {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 380px;
  flex: none;
  padding: 36px 36px 40px;
  background: var(--c-mint);
}
.kzeiten__kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kzeiten__label {
  font-size: 12px;
  font-weight: 700;
  line-height: 48px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #175966;
}

.kzeiten__tag {
  font-size: 24px;
  font-weight: 800;
  line-height: 33px;       /* Figma: Blockhöhe 66 bei 2 Zeilen */
  color: var(--c-petrol);
}
.kzeiten__hinweis {
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;       /* Figma: Blockhöhe 40 bei 2 Zeilen */
  color: #52666b;
}

.kzeiten__liste { display: flex; flex-wrap: wrap; gap: 8px; }
.kzeit {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 11px 16px;
  border: 1px solid rgba(23, 89, 102, 0.2);
  border-radius: 8px;
  background: var(--c-weiss);
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
  color: var(--c-petrol);
  transition: background var(--t-kurz) var(--ease), border-color var(--t-kurz) var(--ease);
}
.kzeit:hover { border-color: var(--c-akzent); background: var(--c-akzent-hell); }

/* Gewählt · Mintfläche, dunkle Schrift */
.kzeit--gewaehlt { border-color: var(--c-akzent); background: var(--c-akzent); }

/* Belegt · durchgestrichen, gedimmt, nicht klickbar.
   Figma zeichnet die Kante außen: freie Kachel 42 + 2 × 1 = 44, die belegte
   hat gar keine Kante und bleibt deshalb 42 hoch. */
.kzeit--belegt {
  height: 42px;
  border: 0;
  background: var(--c-mint);
  color: rgba(82, 102, 107, 0.4);
  text-decoration: line-through;
  cursor: default;
}
.kzeit--belegt:hover { background: var(--c-mint); }

/* Tastaturfokus · zwei Pixel Mint, für Bedienung ohne Maus */
.kzeit:focus-visible {
  outline: 0;
  border-color: var(--c-akzent);
  box-shadow: 0 0 0 1px var(--c-akzent);
}

.kzeiten__nach,
.kzeiten__rueckruf { font-size: 13.5px; font-weight: 400; line-height: 18px; color: rgba(82, 102, 107, 0.85); }
.kzeiten__rueckruf { font-size: 14.5px; line-height: 20px; color: var(--c-petrol); }
.kzeiten__linie { height: 1px; background: rgba(23, 89, 102, 0.16); }
.kzeiten__nummer {
  font-size: 20px;
  font-weight: 800;
  line-height: 27px;
  color: var(--c-petrol);
}
.kzeiten__nummer:hover { color: var(--c-akzent-dunkel); }


/* --- Tag ausgebucht · Leerzustand · 380 auf Mint · Figma 425:1443 -------
   Ersetzt die Zeitspalte, wenn der gewählte Tag voll ist. Abstand
   durchgehend 16, Polster 36/36/40/36 – Summe 688 wie in Figma. */
.leerzustand {
  display: none;
  flex-direction: column;
  gap: 16px;
  width: 380px;
  flex: none;
  padding: 36px 36px 40px;
  border-radius: 0 23px 23px 0;
  background: var(--c-mint);
}
.termin[data-stand="1"][data-leer] .leerzustand { display: flex; }
.termin[data-stand="1"][data-leer] .kzeiten     { display: none; }

.leer__hinweis {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px 18px;
  border-radius: 12px;
  background: var(--c-weiss);
}
.leer__zeichen {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 27px;
  flex: none;
  border: 1.5px solid rgba(82, 102, 107, 0.5);
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 800;
  line-height: 18px;
  color: #52666b;
}
.leer__hinweis p {
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;       /* Figma: Blockhöhe 80 bei 4 Zeilen */
  color: var(--c-petrol);
}

.leer__label {
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #175966;
}

/* Der Sammler hat denselben Abstand wie die Spalte – dadurch stehen die
   Karten genau so, als wären sie direkte Kinder. */
.leer__vorschlaege { display: flex; flex-direction: column; gap: 16px; }

.leer__karte {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 18px 16px;   /* 14 + 20 + 8 + 38 + 16 = 96 */
  border-radius: 12px;
  background: var(--c-weiss);
}
.leer__tag {
  font-size: 14.5px;
  font-weight: 400;
  line-height: 20px;
  color: var(--c-petrol);
}
.leer__zeiten { display: flex; flex-wrap: wrap; gap: 8px; }
.leer__zeit {
  padding: 9px 14px;         /* 9 + 20 + 9 = 38 */
  border-radius: 8px;
  background: var(--c-mint);
  font-size: 14.5px;
  font-weight: 400;
  line-height: 20px;
  color: var(--c-petrol);
  transition: background var(--t-kurz) var(--ease);
}
.leer__zeit:hover { background: var(--c-akzent-hell); }


/* --- Kontaktdaten · Schritt 2 · 420 auf Mint · Figma 425:887 ------------ */
.kdaten {
  display: flex;
  flex-direction: column;
  gap: 14px;               /* Figma: durchgehend 14, keine Ausnahme */
  width: 420px;
  flex: none;
  padding: 36px 36px 38px;
  background: var(--c-mint);
}
.kdaten__kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kdaten__label {
  font-size: 12px;
  font-weight: 700;
  line-height: 48px;       /* Figma: Zeilenhöhe 48, so hoch wie das Symbol */
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #175966;
}

/* Abreißkalender mit der gewählten Tageszahl */
.kdatum { position: relative; width: 46px; height: 48px; flex: none; }
.kdatum__blatt {
  position: absolute; inset: 6px 0 0;
  border: 1px solid rgba(23, 89, 102, 0.16);
  border-radius: 11px;
  background: var(--c-weiss);
}
.kdatum__band {
  position: absolute; top: 6px; left: 0; right: 0; height: 13px;
  border-radius: 11px 11px 0 0;
  background: var(--c-akzent);
}
.kdatum__ring {
  position: absolute; top: 0;
  width: 4px; height: 10px;
  border-radius: 2px;
  background: rgba(11, 46, 51, 0.85);
}
.kdatum__ring--links  { left: 13px; }
.kdatum__ring--rechts { left: 30px; }
.kdatum__zahl {
  position: absolute; top: 24px; left: 0; right: 0;
  text-align: center;
  font-size: 17px;
  font-weight: 800;
  line-height: 23px;
  color: var(--c-petrol);
}

/* Felder · Eingabe 46 hoch = 12 + 20 + 12 plus die Kante, die Figma
   außen zeichnet. */
.kfeld { display: flex; flex-direction: column; gap: 7px; }
.kfeld-reihe { display: flex; gap: 12px; }   /* 168 + 12 + 168 = 348 */
.kfeld-reihe .kfeld { flex: 1; min-width: 0; }
.kfeld__label {
  font-size: 11px;
  font-weight: 700;
  line-height: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #175966;
}
.kfeld__eingabe {
  width: 100%;
  height: 46px;
  padding: 12px 14px;
  border: 1px solid rgba(23, 89, 102, 0.22);
  border-radius: 8px;
  background: var(--c-weiss);
  font: inherit;
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
  color: var(--c-petrol);
  transition: border-color var(--t-kurz) var(--ease), box-shadow var(--t-kurz) var(--ease);
}
.kfeld__eingabe::placeholder { color: rgba(82, 102, 107, 0.7); }
.kfeld__eingabe:focus-visible {
  outline: 0;
  border-color: var(--c-akzent);
  box-shadow: 0 0 0 1px var(--c-akzent);
}

/* --- Auswahlliste · Figma 425:1905 --------------------------------------
   Kein <select>: Figma zeichnet Einträge mit Unterzeile, 42 / 62 / 80 hoch.
   Im offenen Zustand wachsen Kopf und Liste zu einer Fläche zusammen –
   der Kopf rundet dann nur noch oben, die Liste nur noch unten. */
.kliste { position: relative; }

.kliste__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  height: 46px;
  padding: 12px 14px;
  border: 1px solid rgba(23, 89, 102, 0.22);
  border-radius: 8px;
  background: var(--c-weiss);
  text-align: left;
  transition: border-color var(--t-kurz) var(--ease);
}
.kliste__wert {
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
  color: var(--c-petrol);
}
.kliste__wert[data-leer] { color: rgba(82, 102, 107, 0.7); }
.kliste__pfeil {
  flex: none;
  font-size: 12px;
  line-height: 16px;
  color: #52666b;
}

.kliste__kopf:hover { border-color: rgba(85, 199, 167, 0.6); }
.kliste__kopf:focus-visible { outline: 0; border-color: var(--c-akzent); }

.kliste__kopf[aria-expanded="true"] {
  border-color: var(--c-akzent);
  border-radius: 8px 8px 0 0;
}
.kliste__kopf[aria-expanded="true"] .kliste__pfeil { transform: scaleY(-1); }

.kliste__liste {
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 0;
  right: 0;
  padding: 6px 0 8px;
  border: 1px solid var(--c-akzent);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: var(--c-weiss);
  box-shadow: 0 18px 40px rgba(10, 46, 51, 0.12);
}

/* 42 = 11 + 20 + 11 · 62 = 11 + 20 + 2 + 18 + 11 · 80 = mit zwei
   Unterzeilen. Die Höhe stellt sich also aus dem Inhalt ein. */
.keintrag {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  cursor: pointer;
  transition: background var(--t-kurz) var(--ease);
}
.keintrag__text { display: flex; flex-direction: column; gap: 2px; }
.keintrag__titel {
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
  color: var(--c-petrol);
}
.keintrag__unter {
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  color: rgba(82, 102, 107, 0.9);
}
/* Der Haken steht nur beim gewählten Eintrag und belegt sonst keinen
   Platz – sonst bliebe dem Text statt 274 nur 251 und die Unterzeile
   „Keine Pflicht, bis zu zweimal im Jahr möglich" bräche um. */
.keintrag__haken {
  display: none;
  flex: none;
  width: 12px;
  font-size: 14px;
  font-weight: 800;
  line-height: 19px;
  color: var(--c-akzent);
}

.keintrag:hover,
.keintrag.ist-gemerkt { background: var(--c-mint); }
.keintrag[aria-selected="true"] { background: var(--c-mint); }
.keintrag[aria-selected="true"] .keintrag__haken { display: block; }

.keinwilligung {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-top: 4px;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 18px;       /* Figma: Blockhöhe 54 bei 3 Zeilen */
  color: #52666b;
}
.keinwilligung input {
  width: 18px; height: 18px;
  flex: none;
  margin: 0;
  appearance: none;
  border: 1px solid rgba(23, 89, 102, 0.3);
  border-radius: 4px;
  background: var(--c-weiss);
  cursor: pointer;
}
.keinwilligung input:checked {
  border-color: var(--c-akzent);
  background: var(--c-akzent)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 4.8 8.5 9.5 3.8' fill='none' stroke='%230b2e33' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 12px 12px no-repeat;
}
.keinwilligung input:focus-visible { outline: 2px solid var(--c-akzent); outline-offset: 1px; }
.keinwilligung label { cursor: pointer; }

.kdaten__senden {
  align-self: flex-start;
  padding: 9px 18px;
  border-radius: var(--r-pill);
  background: var(--c-akzent);
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  color: var(--c-petrol);
  white-space: pre;
  transition: background var(--t-kurz) var(--ease);
}
.kdaten__senden:hover { background: var(--c-akzent-hell); }

.kdaten__hinweis {
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;       /* Figma: Blockhöhe 36 bei 2 Zeilen */
  color: rgba(82, 102, 107, 0.85);
}


/* --------------------------------------------------------------------------
   BESTÄTIGUNG · Schritt 3 · Figma 425:1301
   Karte 1200 × 664 aus drei Bändern: Mintkopf 235, Inhalt 338, Mintfuß 89.
   In Schritt 3 tritt sie an die Stelle der Kalenderbank.
   -------------------------------------------------------------------------- */
.termin[data-stand="3"] .kalenderbank { display: none; }

.bestaetigung {
  position: relative;
  flex-direction: column;
  align-self: stretch;
  border: 1px solid rgba(23, 89, 102, 0.08);
  border-radius: 24px;
  background: var(--c-weiss);
  box-shadow: 0 0 60px rgba(10, 46, 51, 0.14);
  overflow: hidden;
}

/* --- Kopfband ----------------------------------------------------------- */
.bestaetigung__kopf {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 44px 48px 38px;
  background: var(--c-mint);
  text-align: center;
}
.bestaetigung__haken {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 61px;
  border-radius: var(--r-pill);
  background: var(--c-akzent);
  font-size: 24px;
  font-weight: 800;
  line-height: 33px;
  color: var(--c-petrol);
}
.bestaetigung__termin {
  font-size: 28px;
  font-weight: 800;
  line-height: 38px;
  color: var(--c-petrol);
}
.bestaetigung__unter {
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  color: #52666b;
}

/* --- Inhalt · zwei Spalten ---------------------------------------------- */
.bestaetigung__inhalt {
  display: flex;
  align-items: flex-start;
  gap: 48px;
  padding: 38px 48px 44px;
}
.bestaetigung__spalte {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  min-width: 0;
}
.bestaetigung__label {
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #175966;
}

.bzeilen { display: flex; flex-direction: column; gap: 14px; }
.bzeile { display: flex; gap: 16px; }
.bzeile dt {
  width: 104px;
  flex: none;
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
  color: #52666b;
}
.bzeile dd {
  margin: 0;
  min-width: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
  color: var(--c-petrol);
}

.bschritte { display: flex; flex-direction: column; gap: 14px; list-style: none; }
.bschritt { display: flex; align-items: flex-start; gap: 14px; }
.bschritt__nr {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 29px;
  height: 29px;
  flex: none;
  border: 1.5px solid var(--c-akzent);
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  color: #175966;
}
.bschritt__text { display: flex; flex-direction: column; gap: 4px; }
.bschritt__text b {
  font-size: 16px;
  font-weight: 800;
  line-height: 22px;
  color: var(--c-petrol);
}
.bschritt__text span {
  font-size: 14.5px;
  font-weight: 400;
  line-height: 20px;       /* Figma: Blockhöhe 40 bei 2 Zeilen */
  color: #52666b;
}

/* --- Fußband ------------------------------------------------------------ */
.bestaetigung__aktionen {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 24px 48px 26px;
  background: var(--c-mint);
}
.bestaetigung__knopf {
  padding: 9px 18px;
  border-radius: var(--r-pill);
  background: var(--c-akzent);
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  color: var(--c-petrol);
  white-space: pre;
  transition: background var(--t-kurz) var(--ease);
}
.bestaetigung__knopf:hover { background: var(--c-akzent-hell); }
/* 9 + 19 + 9 + 2 Kante = 39, wie in Figma */
.bestaetigung__knopf--linie {
  border: 1px solid rgba(23, 89, 102, 0.3);
  background: transparent;
}
.bestaetigung__knopf--linie:hover { background: rgba(23, 89, 102, 0.06); }
.bestaetigung__telefon {
  font-size: 14.5px;
  font-weight: 400;
  line-height: 20px;
  color: #52666b;
}
.bestaetigung__telefon a { color: var(--c-petrol); font-weight: 800; }
.bestaetigung__telefon a:hover { color: var(--c-akzent-dunkel); }


/* --------------------------------------------------------------------------
   TERMIN · Mobil · Figma 390 × 1603, Polster 56/20, Abstand 26
   Kalenderbank untereinander, Schrittanzeige umbrechend ohne Trennpunkte.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {

  .termin { gap: 26px; padding: 56px 20px; }
  .termin__schein { left: -60px; top: 120px; width: 420px; height: 420px; }

  .termin__schritte { gap: 8px; }
  .termin__schritte li + li::before { content: none; }

  .termin__kopf h2 { font-size: 28px; line-height: 38px; }
  .termin__lead { width: auto; font-size: 16px; line-height: 22px; }

  .schnellwahl {
    flex-wrap: wrap;
    align-self: stretch;
    gap: 8px 12px;         /* Figma: waagerecht 12, senkrecht 8 */
    padding: 14px 18px;
    border-radius: 16px;
  }
  /* Kein erzwungener Umbruch hinter dem Vortext – Figma lässt die Pille
     natürlich umbrechen. In Schritt 2 passt „Ihr Termin: Do 8. Oktober,
     10:00 Uhr" in eine Zeile (98 hoch), bei „Nächster freier Termin:"
     rutscht das Datum in die zweite (95 hoch). */

  .kalenderbank { flex-direction: column; align-items: stretch; gap: 30px; }
  /* Gestapelt sitzt die Mintspalte unten, also dort runden. */
  .kzeiten,
  .kdaten,
  .leerzustand { border-radius: 0 0 23px 23px; }

  /* Bestätigung mobil · Figma 425:1372, Karte 350 × 1181.
     Kopf 301, Inhalt 688 einspaltig mit Abstand 30, Fuß 190 senkrecht. */
  .bestaetigung__kopf { padding: 44px 24px 38px; }
  .bestaetigung__termin { font-size: 22px; line-height: 30px; }
  /* align-items: flex-start vom Desktop lässt die Spalten senkrecht
     gestapelt auf Inhaltsbreite schrumpfen (132 statt 300) – hier wieder
     auf volle Breite ziehen. */
  .bestaetigung__inhalt {
    flex-direction: column;
    align-items: stretch;
    gap: 30px;
    padding: 38px 24px 44px;
  }
  .bestaetigung__spalte { flex: none; }
  .bestaetigung__aktionen {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 24px 22px 26px;
  }
  .kmonat { padding: 24px 20px 26px; }
  .kmonat__kopf h3 { font-size: 20px; line-height: 27px; }
  .kzeiten { width: auto; padding: 36px 22px 40px; }

  /* Kontaktdaten mobil · Figma 425:1094, Spalte 348 × 823, Polster
     36/22/38/22. Vor- und Nachname bleiben nebeneinander: 146 + 12 + 146
     ergibt genau die 304 der Spalte. */
  .kdaten { width: auto; padding: 36px 22px 38px; }
  .leerzustand { width: auto; padding: 36px 22px 40px; }

  /* Figma stellt die sechs Zeiten mobil in eine Reihe: je 44 breit bei
     Abstand 8 ergibt genau die 304 der Spalte. Das Polster muss dafür
     schmaler werden als am Desktop. */
  .kzeiten__liste { flex-wrap: nowrap; }
  .kzeit { flex: 1; min-width: 0; padding: 11px 4px; }
}


/* ==========================================================================
   FOOTER
   --------------------------------------------------------------------------
   Figma „Sektion · Footer (Desktop)" 423:1342 · 1440 × 538
          „Sektion · Footer (Mobil)"  423:1413 ·  390 × 1336
   Desktop: Polster 88/120/48/120, Abstand 48 zwischen Spalten und
   Rechtsleiste. Vier Spalten 360 / 186 / 186 / 300 mit Abstand 56.
   Mobil: Polster 56/20/36/20, alles untereinander mit Abstand 32.
   ========================================================================== */

.fuss {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: 88px var(--rand-sektion) 48px;
  background: var(--c-petrol-tief);
}

.fuss__spalten {
  display: grid;
  /* Ab 1440 die Maße aus Figma, darunter geben die Spalten nach. */
  grid-template-columns: minmax(0, 360px) minmax(0, 186px) minmax(0, 186px) minmax(0, 300px);
  gap: 56px;
  align-items: start;
}

/* --- Marke · Abstand 16 ------------------------------------------------- */
.fuss__marke { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }

/* Im Footer steht das farbige Signet auf einer weißen Kachel. Polster und
   box-sizing halten die Außenmaße bei 48 – die Footerhöhe bleibt dadurch
   unverändert, nur das Zeichen wird um das Polster kleiner. */
.logo__mark--kachel {
  padding: 4px;
  border-radius: 12px;
  background: var(--c-weiss);
}
.fuss .logo__name { color: var(--c-weiss); }
.fuss .logo__sub  { color: var(--c-akzent-hell); }

.fuss__text {
  font-size: 15px;
  font-weight: 400;
  line-height: 25px;       /* Figma: 165 % von 15, Blockhöhe 100 bei 4 Zeilen */
  color: var(--c-fuss-linie);
}

/* Nachweis-Pille · Polster 7/14/7/12, Radius 8, Glas 7 % */
.fuss__nachweise { display: flex; flex-wrap: wrap; gap: 10px; }
.fuss__pille {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.385;      /* Figma: Höhe 18 bei 13 px */
  color: var(--c-fuss-linie);
}
.fuss__punkt {
  width: 6px; height: 6px; flex: none;
  border-radius: 50%;
  background: var(--c-kopf-lavendel);   /* #856394 */
}

/* bpa-Karte · Polster 14/18/14/16, Abstand 12, Grundlinien bündig */
.fuss__bpa {
  display: flex;
  align-items: center;     /* Text mittig zum „bpa", nicht auf Grundlinie */
  gap: 12px;
  height: 81px;            /* Höhe wie in Figma festgehalten */
  padding: 14px 18px 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
}
.fuss__bpa-marke {
  font-size: 34px;
  font-weight: 800;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--c-akzent-hell);
}
.fuss__bpa-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--c-weiss);
}

/* --- Linkspalten · Abstand 12 ------------------------------------------- */
.fuss__spalte { display: flex; flex-direction: column; gap: 12px; }

.fuss__label {
  font-size: 11.5px;
  font-weight: 700;
  line-height: 16px;       /* Figma: Höhe 16 */
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-akzent-hell);
}

.fuss__spalte a {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.334;      /* Figma: Höhe 20 bei 15 px */
  color: var(--c-fuss-linie);
  transition: color var(--t-kurz) var(--ease);
}
.fuss__spalte a:hover { color: var(--c-weiss); }

/* --- Kontaktspalte · Abstand 12 ----------------------------------------- */
.fuss__kontakt { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }

.fuss__zeile {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 400;
  line-height: 23px;       /* Figma: 150 % von 15, Zeilenhöhe 23 */
  color: var(--c-fuss-linie);
}
.fuss__zeile svg { width: 16px; height: 16px; flex: none; color: var(--c-akzent-hell); }
.fuss__zeile--tel b {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-weiss);
}
a.fuss__zeile { transition: color var(--t-kurz) var(--ease); }
a.fuss__zeile:hover { color: var(--c-weiss); }

/* Sozialblock · 12 Vorlauf, Abstand 10 */
.fuss__sozial { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; }
.fuss__profile { display: flex; gap: 10px; }

.fuss__profil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px; flex: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--c-weiss);
  transition: background var(--t-kurz) var(--ease);
}
.fuss__profil svg { width: 22px; height: 22px; }
.fuss__profil:hover { background: rgba(255, 255, 255, 0.16); }

.fuss__profil-text { display: flex; flex-direction: column; padding-top: 2px; }
.fuss__profil-text b {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.357;      /* Figma: Höhe 19 bei 14 px */
  color: var(--c-weiss);
}
.fuss__profil-text small {
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.391;      /* Figma: Höhe 16 bei 11,5 px */
  color: var(--c-fuss-linie);
}

/* --- Rechtsleiste · Linie oben, Vorlauf 24 ------------------------------ */
.fuss__recht {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.fuss__recht p {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.385;      /* Figma: Höhe 18 bei 13 px */
  color: var(--c-fuss-linie);
}
.fuss__recht-links { display: flex; gap: 20px; }
.fuss__recht-links a {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.385;
  color: var(--c-weiss);
  transition: color var(--t-kurz) var(--ease);
}
.fuss__recht-links a:hover { color: var(--c-akzent-hell); }


/* --------------------------------------------------------------------------
   FOOTER · Mobil · Figma 390 × 1336
   Alles untereinander, Abstand 32. Kleinere Nachweis- und bpa-Karte,
   Linkspalten mit Abstand 10 statt 12, Rechtsleiste zweizeilig.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {

  .fuss { gap: 32px; padding: 56px 20px 36px; }

  /* align-items muss zurückgesetzt werden: das `start` des Rasters lässt
     die Spalten in der Senkrechten sonst auf Textbreite schrumpfen. */
  .fuss__spalten { display: flex; flex-direction: column; align-items: stretch; gap: 32px; }

  .fuss .logo__mark { width: 40px; height: 40px; }
  .logo__mark--kachel { padding: 3px; border-radius: 10px; }

  .fuss__pille { font-size: 12px; line-height: 1.334; }   /* Figma: Höhe 16 bei 12 px */

  .fuss__bpa { height: 72px; padding: 12px 16px 12px 14px; gap: 10px; }
  .fuss__bpa-marke { font-size: 30px; }
  .fuss__bpa-text  { font-size: 11px; }

  .fuss__spalte { gap: 10px; }

  .fuss__zeile--tel b { font-size: 18px; }

  .fuss__sozial { padding-top: 8px; }

  .fuss__recht {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding-top: 20px;
  }
}


/* ==========================================================================
   SICHTBARKEIT NACH GERÄT
   --------------------------------------------------------------------------
   Steht bewusst als letzter Block der Datei. Beide Schalter haben nur eine
   Klasse Spezifität; stünden sie weiter oben, würde jede spätere Regel, die
   `display` setzt – etwa .knopf – sie stillschweigend aushebeln.

   Figma hat für Desktop und Mobil an mehreren Stellen unterschiedliche
   Inhalte: kürzere Vorzeile, kürzerer Lead, ein Knopf statt zwei, drei
   Fakten statt vier. Umgeschaltet wird an einer einzigen Stelle – 1100 px –
   damit Layout und Textfassung nie auseinanderlaufen.

   Beide Schalter setzen ausschließlich `display: none` und nie einen
   positiven Wert. Sonst würden sie das `display` des Bausteins selbst
   überschreiben – ein Flex-Kasten wäre plötzlich ein Block, und Abstände
   und Ausrichtung fielen wortlos weg.

   Der Klassenname steht doppelt. Das ist kein Versehen, sondern hebt die
   Spezifität auf zwei Klassen an, ohne `!important` zu brauchen. Sonst
   verliert der Schalter gegen jede Regel der Form `.baustein li` oder
   `.baustein a` – die zählt eine Klasse plus ein Element und wiegt damit
   schwerer als eine Klasse allein.
   ========================================================================== */

@media (min-width: 1101px) { .nur-mobil.nur-mobil     { display: none; } }
@media (max-width: 1100px) { .nur-desktop.nur-desktop { display: none; } }


/* ==========================================================================
   BEHANDLUNGSPFLEGE · Sektionen, die es sonst nirgends gibt
   --------------------------------------------------------------------------
   Figma Gesamtentwurf Desktop 426:2006 · Mobil 426:2007
   ========================================================================== */

/* Leistungen und Fragen stehen hier auf Mint statt auf der hellen Fläche
   der Startseite – sonst ist der Baustein derselbe. */
.leistungen--mint,
.fragen--mint { background: var(--c-mint); }

/* Die Karten haben hier unterschiedlich viele Zeilen (Figma 202 / 182 /
   182), deshalb keine feste Höhe wie auf der Startseite. */
.lkarte__punkte--frei { height: auto; }


/* --------------------------------------------------------------------------
   VERORDNUNG · 1440 × 722, Polster 92/120/96/120, Petrolgrund
   Links vier Schritte, rechts ein Klemmbrett mit dem Muster-12-Formular.
   -------------------------------------------------------------------------- */
.verordnung {
  display: flex;
  padding: 92px var(--rand-sektion) 96px;
  background: var(--c-petrol);
}
/* Das Klemmbrett steht senkrecht mittig: Figma setzt es bei y 106, und
   (534 - 323) / 2 = 106 – 323 ist die Höhe des gedrehten Rahmens. */
.verordnung__zeile { display: flex; align-items: center; gap: 56px; width: 100%; }
.verordnung__links { display: flex; flex-direction: column; gap: 32px; flex: 1; min-width: 0; }
.verordnung__kopf { display: flex; flex-direction: column; gap: 14px; }
/* Eyebrow ohne Strich, Bold 12 in Mint – `.ueberzeile` ist 13/17 und
   damit hier eine Zeile zu hoch. */
.verordnung__ueber {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.334;      /* Figma: Höhe 16 bei 12 px */
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-akzent);
}
.verordnung__kopf h2 {
  font-size: 40px;
  font-weight: 800;
  line-height: 55px;       /* Figma: Blockhöhe 55 bei einer Zeile */
  letter-spacing: -0.02em;
  color: var(--c-weiss);
}
.verordnung__lead {
  font-size: 17.5px;
  font-weight: 400;
  line-height: 24px;       /* Figma: Blockhöhe 48 bei 2 Zeilen */
  color: rgba(255, 255, 255, 0.76);
}

.vschritte { display: flex; flex-direction: column; }
/* Trennlinien zwischen den Schritten, nicht über dem ersten. */
.vschritt {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  padding: 18px 0;         /* 18 + 52 + 18 = 88 */
}
.vschritt + .vschritt { border-top: 1px solid rgba(255, 255, 255, 0.14); }
.vschritt__nr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  padding: 8px 13px;
  border-radius: var(--r-pill);
  background: var(--c-akzent);
  font-size: 13px;
  font-weight: 800;
  line-height: 18px;
  color: var(--c-petrol);
}
.vschritt__inhalt { display: flex; flex-direction: column; gap: 5px; }
.vschritt__inhalt b {
  font-size: 19px;
  font-weight: 800;
  line-height: 26px;
  color: var(--c-weiss);
}
.vschritt__inhalt span {
  font-size: 15.5px;
  font-weight: 400;
  line-height: 21px;
  color: rgba(255, 255, 255, 0.72);
}

/* Klemmbrett · 340 × 311. Die Verlaufsrichtung gibt Figma nicht her,
   senkrecht ist die naheliegende Lesart. */
.klemmbrett {
  position: relative;
  width: 340px;
  flex: none;
  padding: 34px 14px 16px;
  border-radius: 12px;
  background: linear-gradient(180deg, #7fdac0, #47aa8f);
  /* Figma meldet rotation -2. Dort ist gegen den Uhrzeigersinn positiv,
     in CSS im Uhrzeigersinn – also rotate(2deg), nicht -2. */
  transform: rotate(2deg);
  box-shadow: 0 26px 56px rgba(3, 15, 18, 0.5);
}
.klemmbrett__blatt {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 24px 26px 28px;
  border-radius: 3px;
  background: #fdfcf8;
  box-shadow: 0 3px 8px rgba(3, 15, 18, 0.22);
}
.klemmbrett__kopf {
  font-size: 10.5px;
  font-weight: 700;
  line-height: 14px;
  letter-spacing: 0.06em;
  color: #175966;
}
.klemmbrett__titel {
  font-size: 30px;
  font-weight: 800;
  line-height: 41px;
  letter-spacing: -0.02em;
  color: var(--c-petrol);
}
.klemmbrett__linie { height: 1px; background: rgba(23, 89, 102, 0.2); }
.klemmbrett__zeile {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  color: #52666b;
}
.klemmbrett__kaestchen {
  width: 13px; height: 13px; flex: none;
  border: 1px solid rgba(23, 89, 102, 0.35);
  border-radius: 2px;
}
.klemmbrett__fuss {
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  color: rgba(82, 102, 107, 0.9);
}

/* Klammer · 96 × 42, frei gesetzt, 12 über der Kante, waagerecht mittig */
.klemmbrett__klammer {
  position: absolute;
  top: -12px;
  left: 122px;
  width: 96px;
  height: 42px;
}
/* Lagen genau wie in Figma: Zunge 0–14, Bügel 8–34, Niete bei 17.
   Der Bügel sitzt also nicht unten, sondern überlappt die Zunge. */
.klemmbrett__buegel {
  position: absolute;
  left: 0; top: 8px;
  width: 96px; height: 26px;
  border-radius: 7px;
  background: linear-gradient(90deg, #c9d4d4, #edf2f2, #8c9c9e);
  box-shadow: 0 4px 8px rgba(3, 15, 18, 0.35);
}
.klemmbrett__zunge {
  position: absolute;
  left: 21px; top: 0;
  width: 54px; height: 14px;
  border-radius: 5px;
  background: rgba(140, 156, 158, 0.55);
}
.klemmbrett__niete {
  position: absolute;
  left: 45px; top: 17px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #8c9c9e;
}


/* --------------------------------------------------------------------------
   STARTEN · Abschluss der Behandlungspflege-Seite
   1440 × 533, Polster 96/120, Mint. Links Ansprache 668, rechts eine
   dunkle Karte 460 mit Aufzählung und Knopf.
   -------------------------------------------------------------------------- */
.starten {
  display: flex;
  padding: 96px var(--rand-sektion);
  background: var(--c-mint);
}
.starten__inhalt { display: flex; align-items: flex-start; gap: 72px; width: 100%; }
.starten__ansprache {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  min-width: 0;
}
.starten__ansprache h2 {
  font-size: 44px;
  font-weight: 800;
  line-height: 47px;       /* Figma: Blockhöhe 94 bei 2 Zeilen */
  letter-spacing: -0.025em;
  color: var(--c-petrol);
}
.starten__lead {
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;       /* Figma: Blockhöhe 60 bei 2 Zeilen */
  color: var(--c-text-2);
}

.starten__karte {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 460px;
  flex: none;
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  background: rgba(7, 31, 35, 0.82);
}
.starten__karte > b {
  font-size: 20px;
  font-weight: 700;
  line-height: 27px;
  color: var(--c-weiss);
}
.starten__punkte { display: flex; flex-direction: column; gap: 12px; }
.starten__punkt { display: flex; align-items: flex-start; gap: 12px; }
.starten__haken {
  flex: none;
  font-size: 15px;
  font-weight: 700;
  line-height: 21px;
  color: var(--c-akzent);
}
.starten__punkt span:last-child {
  font-size: 15.5px;
  font-weight: 600;
  line-height: 21px;
  color: #c4e0e6;
}
.starten__karte .knopf { width: 100%; }
.starten__fuss {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;       /* Figma: Blockhöhe 36 bei 2 Zeilen */
  color: #c4e0e6;
}


/* --------------------------------------------------------------------------
   UMSCHALTER · nur mobil · Figma 426:2007
   Weiße Pille 346 × 51 mit zwei Reitern 168 × 41. Der aktive Reiter ist
   mintgefüllt, der andere hat keine Fläche und 60 % Deckung im Text.
   -------------------------------------------------------------------------- */
.umschalter {
  display: flex;
  padding: 4px;
  border: 1px solid rgba(23, 89, 102, 0.16);
  border-radius: var(--r-pill);
  background: var(--c-weiss);
}
.umschalter__reiter {
  flex: 1;
  min-width: 0;
  padding: 11px 0;         /* 11 + 19 + 11 = 41 */
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  color: rgba(11, 46, 51, 0.6);
  transition: background var(--t-kurz) var(--ease), color var(--t-kurz) var(--ease);
}
.umschalter__reiter[aria-selected="true"] {
  background: var(--c-akzent);
  color: var(--c-petrol);
}


@media (max-width: 1100px) {

  /* --- Seitenkopf dieser Seite ----------------------------------------
     Die Kopfleiste steht hier über dem Seitenkopf, nicht darin – deshalb
     40 oben statt der 96 von Kosten und Beratungsbesuch. */
  .seite--behandlungspflege .seitenkopf,
  .seite--grundpflege .seitenkopf { gap: 18px; padding: 96px 24px 48px; }   /* 72 fixe Kopfleiste + 24 Luft, sonst liegen die Brotkrumen darunter */
  .seite--behandlungspflege .seitenkopf h1,
  .seite--grundpflege .seitenkopf h1 { font-size: 32px; line-height: 34px; }
  .seite--behandlungspflege .kurzantwort,
  .seite--grundpflege .kurzantwort { padding: 26px 28px; }
  .seite--behandlungspflege .kurzantwort p,
  .seite--grundpflege .kurzantwort p { font-size: 18px; line-height: 31px; }
  /* Figma lässt den Knopf hier auf Inhaltsbreite (319), während Kosten
     und Beratungsbesuch ihn über die volle Breite ziehen. */
  .seite--behandlungspflege .seitenkopf__aktionen .knopf,
  .seite--grundpflege .seitenkopf__aktionen .knopf { width: auto; }

  /* --- Abgrenzung · Tabelle wird zur Werteliste ------------------------ */
  .faktenblock--drittel { gap: 26px; padding: 58px 22px 60px; }
  .faktenblock--drittel .faktenblock__kopf { gap: 16px; }

  .faktenblock--drittel .faktenblock__tabelle {
    border-color: rgba(23, 89, 102, 0.14);
    border-radius: 14px;
  }
  .faktenblock--drittel .turnus,
  .faktenblock--drittel .turnus tbody { display: block; width: 100%; }
  .faktenblock--drittel .turnus thead { display: none; }

  /* Zeile: Merkmal als Kleinlabel über dem Wert der gewählten Spalte.
     13 + 14 + 3 + 21 + 14 = 65, ab der zweiten Zeile plus Trennstrich. */
  .faktenblock--drittel .turnus tbody tr {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 13px 16px 14px;
  }
  .faktenblock--drittel .turnus tbody tr + tr {
    border-top: 1px solid rgba(23, 89, 102, 0.12);
  }
  .faktenblock--drittel .turnus tbody th {
    padding: 0;
    border: 0;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(23, 89, 102, 0.8);
  }
  .faktenblock--drittel .turnus tbody td {
    display: none;
    padding: 0;
    border: 0;
    font-size: 15.5px;
    font-weight: 400;
    line-height: 21px;
    color: var(--c-petrol);
  }
  /* Erste Wertspalte ist das zweite <td> der Zeile, daher nth-of-type. */
  .faktenblock--drittel[data-spalte="2"] .turnus tbody td:nth-of-type(1),
  .faktenblock--drittel[data-spalte="3"] .turnus tbody td:nth-of-type(2) { display: block; }

  /* --- Verordnung ------------------------------------------------------ */
  .verordnung { padding: 58px 22px 60px; }
  .verordnung__zeile { flex-direction: column; align-items: stretch; gap: 28px; }
  .verordnung__kopf h2 { font-size: 28px; line-height: 38px; }   /* Höhe 76 bei 2 Zeilen */
  .verordnung__lead { line-height: 24px; }                        /* Höhe 72 bei 3 Zeilen */
  .klemmbrett { width: auto; }
  /* Klammer bleibt waagerecht mittig, auch wenn die Breite wächst. */
  .klemmbrett__klammer { left: 50%; margin-left: -48px; }

  /* --- Abschluss ------------------------------------------------------- */
  .starten { padding: 56px 20px; }
  .starten__inhalt { flex-direction: column; align-items: stretch; gap: 28px; }
  .starten__ansprache h2 { font-size: 32px; line-height: 34px; }
  .starten__lead { font-size: 17px; line-height: 28px; }
  .starten__karte { width: auto; padding: 24px 20px; }
  .starten__karte > b { font-size: 18px; line-height: 25px; }
}


/* ==========================================================================
   GRUNDPFLEGE · Sektionen, die es sonst nirgends gibt
   --------------------------------------------------------------------------
   Figma Gesamtentwurf Desktop 426:2414 · Mobil 426:2415
   ========================================================================== */

/* Vier Karten statt drei · Figma: 285 × 4 + 20 × 3 = 1200 */
.leistungen--vier .leistungen__karten { grid-template-columns: repeat(4, 1fr); }


/* --------------------------------------------------------------------------
   NACHBARN · „Was nicht zur Grundpflege gehört" · 1440 × 762
   Polster 92/120/96/120, Abstand 38. Drei breite Zeilen auf Mint.
   -------------------------------------------------------------------------- */
.nachbarn {
  display: flex;
  flex-direction: column;
  gap: 38px;
  padding: 92px var(--rand-sektion) 96px;
  background: var(--c-weiss);
}
.nachbarn__kopf { display: flex; flex-direction: column; gap: 14px; }
.nachbarn__marke {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.334;      /* Figma: Höhe 16 bei 12 px */
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #175966;
}
.nachbarn__kopf h2 {
  font-size: 40px;
  font-weight: 800;
  line-height: 55px;       /* Figma: Blockhöhe 55 bei einer Zeile */
  letter-spacing: -0.02em;
  color: var(--c-petrol);
}
.nachbarn__lead {
  font-size: 17px;
  font-weight: 400;
  line-height: 23px;
  color: #52666b;
}

.nachbarn__liste { display: flex; flex-direction: column; gap: 14px; }

/* Zeile: 26 + 55 + 28 = 109 · 746 + 32 + 230 + 32 + 96 + 64 = 1200 */
.nachbar {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 26px 32px 28px;
  border-radius: 16px;
  background: var(--c-mint);
  transition: background var(--t-kurz) var(--ease);
}
.nachbar:hover { background: var(--c-akzent-hell); }
.nachbar__inhalt { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.nachbar__inhalt b {
  font-size: 21px;
  font-weight: 800;
  line-height: 29px;
  letter-spacing: -0.01em;
  color: var(--c-petrol);
}
.nachbar__inhalt span {
  font-size: 15.5px;
  font-weight: 400;
  line-height: 21px;
  color: #52666b;
}
.nachbar__traeger { display: flex; flex-direction: column; gap: 4px; width: 230px; flex: none; }
.nachbar__traeger small {
  font-size: 10.5px;
  font-weight: 700;
  line-height: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #175966;
}
.nachbar__traeger b {
  font-size: 15px;
  font-weight: 800;
  line-height: 20px;
  color: var(--c-petrol);
}
.nachbar__mehr {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  font-size: 14.5px;
  font-weight: 800;
  line-height: 20px;
  color: #175966;
  transition: color var(--t-kurz) var(--ease);
}
.nachbar__mehr i { font-style: normal; color: var(--c-akzent); }
.nachbar__mehr:hover { color: var(--c-petrol); }

.nachbarn__schluss {
  font-size: 15.5px;
  font-weight: 400;
  line-height: 21px;
  color: #52666b;
}


/* --------------------------------------------------------------------------
   HALTUNG · 1440 × 762, Polster 96/110/100/110, Petrolgrund
   Hintergrundvideo, darüber ein Verlauf und zwei Übergangsbänder zu den
   Nachbarsektionen. Links 620 breit Text mit fünf Glasregeln.
   -------------------------------------------------------------------------- */
.haltung {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 96px 110px 100px;
  background: var(--c-petrol);
  overflow: hidden;
}
/* Band mit Video und Verläufen · am Desktop hinter dem Inhalt */
.haltung__band { position: absolute; inset: 0; pointer-events: none; }
.haltung__video {
  position: absolute;
  top: -10px; left: 0;
  width: 100%;
  height: calc(100% + 20px);
  object-fit: cover;
}
/* Figma: waagerechter Verlauf, 95 % → 82 % → 50 % → 28 % */
.haltung__verlauf {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(11, 46, 51, 0.95) 0%,
    rgba(11, 46, 51, 0.82) 42%,
    rgba(11, 46, 51, 0.50) 72%,
    rgba(11, 46, 51, 0.28) 100%);
}
/* Übergänge zu den Nachbarsektionen: oben Weiß (Abgrenzung), unten Mint
   (Fragen). Beide bleiben zart – höchstens 42 % – und laufen nach null
   aus. Sie sollen die Kante weichzeichnen, nicht die Sektion aufhellen. */
.haltung__oben,
.haltung__unten { position: absolute; left: 0; right: 0; height: 72px; }
.haltung__oben {
  top: 0;
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0.42) 0%,
    rgba(255, 255, 255, 0.10) 40%,
    rgba(255, 255, 255, 0) 100%);
}
.haltung__unten {
  bottom: 0;
  background: linear-gradient(to bottom,
    rgba(235, 251, 245, 0) 0%,
    rgba(235, 251, 245, 0.10) 60%,
    rgba(235, 251, 245, 0.42) 100%);
}

.haltung__kopf,
.haltung__regelfeld { position: relative; width: 620px; max-width: 100%; }
.haltung__kopf { display: flex; flex-direction: column; gap: 22px; }
.haltung__kopf h2 {
  font-size: 40px;
  font-weight: 800;
  line-height: 55px;       /* Figma: Blockhöhe 110 bei 2 Zeilen */
  letter-spacing: -0.02em;
  color: var(--c-weiss);
}
.haltung__lead {
  font-size: 17px;
  font-weight: 400;
  line-height: 23px;       /* Figma: Blockhöhe 69 bei 3 Zeilen */
  color: rgba(255, 255, 255, 0.76);
}

.haltung__regeln { display: flex; flex-direction: column; gap: 10px; }
/* 14 + 21 + 16 + 2 Kante = 53 */
.regel {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 22px 16px 20px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);
}
.regel__haken {
  flex: none;
  width: 12px;
  font-size: 14px;
  font-weight: 800;
  line-height: 19px;
  color: var(--c-akzent);
}
.regel span:last-child {
  font-size: 15.5px;
  font-weight: 400;
  line-height: 21px;
  color: rgba(255, 255, 255, 0.92);
}


@media (max-width: 1100px) {

  /* --- Nachbarn mobil · Figma 426:2415, Sektion 390 × 1149 -------------
     Die Zeile stapelt: Inhalt, Kostenträger, Verweis untereinander. */
  .nachbarn { gap: 26px; padding: 58px 22px 60px; }
  .nachbarn__kopf h2 { font-size: 28px; line-height: 38px; }   /* Höhe 76 bei 2 Zeilen */
  .nachbarn__lead { line-height: 23px; }
  .nachbar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;            /* 26 + 97 + 12 + 38 + 12 + 20 + 28 = 233 */
  }
  .nachbar__traeger { width: auto; }
  .nachbar__mehr { align-self: flex-start; }

  /* --- Haltung mobil · Figma 390 × 1063 --------------------------------
     Kein Overlay: Text 336, Videoband 260, Regeln 467 untereinander. */
  .haltung { gap: 0; padding: 0; }
  /* Reihenfolge: Text, Videoband, Regeln. Im Quelltext steht das Band
     zuerst, weil es am Desktop hinter allem liegt.
     `relative` ist Pflicht – sonst hängen Video und Verläufe an der
     Sektion statt am Band und laufen hinter den Text. */
  .haltung__kopf      { order: 1; }
  .haltung__regelfeld { order: 3; }
  .haltung__band {
    order: 2;
    position: relative;   /* sonst hängen Video und Verläufe an der Sektion */
    height: 260px;
    flex: none;
    background: var(--c-petrol);
    overflow: hidden;
  }

  /* Der waagerechte Verlauf gehört nur zum Desktop – mobil zeigt Figma
     das Video unverdunkelt und blendet es nur oben und unten aus. */
  .haltung__verlauf { display: none; }

  /* Figma beschneidet das Video: 620 × 349 bei −189 / −27 in einem
     390 × 260 Band. Anteilig gerechnet, damit es mitskaliert. */
  .haltung__video {
    left: -48.46%;        /* 189 / 390 */
    top: -10.38%;         /* 27 / 260 */
    width: 158.97%;       /* 620 / 390 */
    height: 134.23%;      /* 349 / 260 */
    /* Die Grundregel `img, svg, picture, video { max-width: 100% }`
       würde die 620 auf Bandbreite stutzen. */
    max-width: none;
  }

  /* Die Bänder blenden hier in die dunkle Sektion, nicht in Weiß oder
     Mint: Petrol voll deckend an der Kante, zur Mitte hin durchsichtig. */
  .haltung__oben {
    top: 0;
    height: 100px;
    background: linear-gradient(to bottom,
      rgba(11, 46, 51, 1) 0%,
      rgba(11, 46, 51, 0.45) 55%,
      rgba(11, 46, 51, 0) 100%);
  }
  .haltung__unten {
    bottom: 0;
    height: 110px;
    background: linear-gradient(to bottom,
      rgba(11, 46, 51, 0) 0%,
      rgba(11, 46, 51, 0.45) 45%,
      rgba(11, 46, 51, 1) 100%);
  }

  .haltung__kopf {
    width: auto;
    gap: 14px;
    padding: 54px 22px 24px;    /* 54 + 16 + 14 + 76 + 14 + 138 + 24 = 336 */
  }
  .haltung__kopf h2 { font-size: 28px; line-height: 38px; }
  .haltung__lead { line-height: 23px; }
  .haltung__regelfeld { width: auto; padding: 22px 22px 56px; }
}


/* ==========================================================================
   HAUSWIRTSCHAFT · Sektionen, die es sonst nirgends gibt
   --------------------------------------------------------------------------
   Figma Gesamtentwurf Desktop 426:2810 · Mobil 426:2811
   ========================================================================== */

/* Kräftigere Marke: ExtraBold 13 in Mint, Abstand 12 – nicht die
   Bold-12-Fassung von Startseite und Fragen. */
.marke--kraeftig {
  gap: 12px;
  font-size: 13px;
  font-weight: 800;
  line-height: 20px;       /* Figma: Höhe 20 – als ganze Zahl, sonst
                              rundet der Browser auf 21 auf */
  letter-spacing: 0.1em;
  color: var(--c-akzent);
}


/* --------------------------------------------------------------------------
   TAKTE · „Was wir übernehmen" · 1440 × 680
   Polster 96/120/100/120, Abstand 48. Zwei Karten mit dunklem Kopfband,
   daneben ein angepinnter Zettel.
   -------------------------------------------------------------------------- */
.takte {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: 96px var(--rand-sektion) 100px;
  background: var(--c-weiss);
}
.takte__kopf { display: flex; flex-direction: column; gap: 14px; }
.takte__kopf h2 {
  font-size: 46px;
  font-weight: 800;
  line-height: 52px;
  color: var(--c-petrol);
}
.takte__lead {
  font-size: 18px;
  font-weight: 400;
  line-height: 27px;
  color: rgba(11, 46, 51, 0.76);
}

/* Raster statt Flex: drei gleich breite Spalten, (1200 − 48) / 3 = 384.
   Figma hat 385 / 385 / 383 – der Zettel ist schmaler, weil ihm die
   Kante fehlt, die die beiden Karten haben. */
.takte__reihe {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: 24px;
}

/* Karte mit Kopfband · 66 + Liste + 2 Kante */
.takt {
  border: 1px solid rgba(11, 46, 51, 0.12);
  border-radius: 20px;
  overflow: hidden;
}
.takt__band {
  display: flex;
  align-items: center;
  padding: 18px 28px;      /* 18 + 30 + 18 = 66 */
  background: var(--c-petrol);
}
.takt__band b {
  font-size: 20px;
  font-weight: 800;
  line-height: 30px;
  letter-spacing: -0.01em;
  color: var(--c-weiss);
}
.takt__liste {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 28px 30px;
}
.takt__liste li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15.5px;
  font-weight: 400;
  line-height: 23px;
  color: rgba(11, 46, 51, 0.78);
}
/* Der Punkt sitzt in einer 23 hohen Spalte, damit er auf der ersten
   Zeile mittig steht und nicht am Textanfang klebt. */
.takt__punkt {
  display: flex;
  align-items: center;
  height: 23px;
  flex: none;
}
.takt__punkt::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-akzent);
}

/* Zettel · liegt 10 tiefer als die Karten und hat keine Kante.
   Die Hülle trägt den Schatten als `drop-shadow`, damit er der
   Risskante folgt. Ein `box-shadow` am Zettel selbst läge unter der
   geraden Unterkante und malte ein graues Band unter die Zacken. */
.zettelfeld {
  padding-top: 10px;
  filter: drop-shadow(0 8px 20px rgba(11, 46, 51, 0.14));
}
.zettel {
  position: relative;
  padding: 46px 28px 44px;
  border-radius: 3px 3px 0 0;
  background: #fef9ec;
  /* Oben alles sichtbar, unten 16 px nach dem Sägezahn beschnitten.
     Teilung 45, Zacke 10,24 tief – wie der Vektor in Figma. */
  -webkit-mask-image: linear-gradient(#000, #000), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='45.05' height='16' viewBox='0 0 45.05 16'%3E%3Cpath d='M0 0 H45.05 V10.24 L22.525 0 L0 10.24 Z' fill='%23000'/%3E%3C/svg%3E");
          mask-image: linear-gradient(#000, #000), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='45.05' height='16' viewBox='0 0 45.05 16'%3E%3Cpath d='M0 0 H45.05 V10.24 L22.525 0 L0 10.24 Z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% calc(100% - 16px), 45.05px 16px;
          mask-size: 100% calc(100% - 16px), 45.05px 16px;
  -webkit-mask-position: top left, bottom left;
          mask-position: top left, bottom left;
  -webkit-mask-repeat: no-repeat, repeat-x;
          mask-repeat: no-repeat, repeat-x;
  -webkit-mask-composite: source-over;
          mask-composite: add;
}
.zettel__inhalt { display: flex; flex-direction: column; gap: 12px; }
.zettel b {
  font-size: 20px;
  font-weight: 800;
  line-height: 30px;
  letter-spacing: -0.01em;
  color: var(--c-petrol);
}
.zettel__unter {
  font-size: 13.5px;
  font-weight: 400;
  line-height: 20px;
  color: rgba(11, 46, 51, 0.5);
}
.zettel .takt__liste { padding: 8px 0 0; }

/* Pinnadel · Figma: 22 × 22 bei x 180 / y 14 im 383 breiten Zettel */
.zettel__nadel {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 22px;
  border: 1px solid rgba(11, 46, 51, 0.18);
  border-radius: 50%;
  background: var(--c-akzent);
  box-shadow: 0 3px 6px rgba(10, 46, 51, 0.3);
}
.zettel__nadel::after {
  content: "";
  position: absolute;
  top: 3px; left: 4px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
}


/* --------------------------------------------------------------------------
   ZITAT · „Unsere Haltung" · 1440 × 844, Petrolgrund
   Polster 100/120/104/120, Abstand 44.
   -------------------------------------------------------------------------- */
.zitat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 44px;
  padding: 100px var(--rand-sektion) 104px;
  background: var(--c-petrol);
  overflow: hidden;
}
/* Zwei weiche Schleier hinter allem · Figma: Mint 520 bei 60/40,
   Lavendel 480 bei 880/180, je 150 Ebenen-Unschärfe (CSS: die Hälfte).
   Der Lavendel hängt rechts, damit er auf breiten Schirmen mitwandert. */
.zitat__schleier {
  position: absolute;
  border-radius: 50%;
  filter: blur(75px);
  pointer-events: none;
}
.zitat__schleier--mint {
  left: 60px; top: 40px;
  width: 520px; height: 520px;
  background: rgba(85, 199, 167, 0.28);
}
.zitat__schleier--lavendel {
  right: 80px; top: 180px;
  width: 480px; height: 480px;
  background: rgba(140, 140, 217, 0.18);
}
/* Inhalt über die Schleier heben */
.zitat > .marke,
.zitat__karte,
.zitat__nach { position: relative; }
.zitat__karte {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 38px 44px 40px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.zitat__zeichen {
  font-size: 140px;
  font-weight: 800;
  line-height: 98px;
  color: rgba(85, 199, 167, 0.32);
}
.zitat__satz {
  font-size: 44px;
  font-weight: 800;
  line-height: 54px;       /* Figma: Blockhöhe 162 bei 3 Zeilen */
  letter-spacing: -0.02em;
  color: var(--c-weiss);
}
.zitat__wer {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 10px;
}
.zitat__wer b {
  font-size: 19px;
  font-weight: 700;
  line-height: 29px;
  color: var(--c-weiss);
}
.zitat__wer span {
  font-size: 15.5px;
  font-weight: 400;
  line-height: 23px;
  color: rgba(255, 255, 255, 0.55);
}
.zitat__nach {
  width: 744px;
  max-width: 100%;
  font-size: 17px;
  font-weight: 400;
  line-height: 26px;       /* Figma: Blockhöhe 78 bei 3 Zeilen */
  color: rgba(255, 255, 255, 0.62);
}


/* --------------------------------------------------------------------------
   FINANZIERUNG · 1440 × 966 · Polster 96/120/100/120, Abstand 44
   Tabelle mit dunkler Kopfzeile, darunter ein Hinweis mit Mintstrich.
   -------------------------------------------------------------------------- */
.finanzierung {
  display: flex;
  flex-direction: column;
  gap: 44px;
  padding: 96px var(--rand-sektion) 100px;
  background: var(--c-mint);
}
.finanzierung__kopf { display: flex; flex-direction: column; gap: 14px; }
.finanzierung__kopf h2 {
  font-size: 46px;
  font-weight: 800;
  line-height: 52px;
  color: var(--c-petrol);
}
.finanzierung__lead {
  font-size: 18px;
  font-weight: 400;
  line-height: 27px;
  color: rgba(11, 46, 51, 0.75);
}

.wege {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 20px;
  background: var(--c-weiss);
  overflow: hidden;
  text-align: left;
}
.wege thead tr { background: var(--c-petrol); }
.wege thead th {
  padding: 18px 32px;      /* 18 + 18 + 18 = 54 */
  font-size: 12px;
  font-weight: 800;
  line-height: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}
/* Figma: 32 + 300 + 28 + 190 + 28 + 590 + 32 = 1200. Der Abstand 28
   zwischen den Spalten wird je zur Hälfte auf die Nachbarn verteilt. */
.wege thead th:nth-child(1) { width: 346px; padding-right: 14px; }
.wege thead th:nth-child(2) { width: 218px; padding: 18px 14px; }
.wege thead th:nth-child(3) { padding-left: 14px; }

.wege tbody th,
.wege tbody td {
  padding: 24px 32px;
  vertical-align: top;
  font-size: 16.5px;
  font-weight: 400;
  line-height: 25px;
  color: rgba(11, 46, 51, 0.8);
}
.wege tbody th { padding-right: 14px; }
.wege tbody td:nth-of-type(1) { padding: 24px 14px; }
.wege tbody td:nth-of-type(2) { padding-left: 14px; }
.wege tbody tr + tr th,
.wege tbody tr + tr td { border-top: 1px solid rgba(11, 46, 51, 0.1); }

.weg { display: flex; flex-direction: column; gap: 3px; }
.weg b {
  font-size: 18px;
  font-weight: 700;
  line-height: 27px;
  color: var(--c-petrol);
}
.weg span {
  font-size: 14.5px;
  font-weight: 400;
  line-height: 22px;
  color: rgba(11, 46, 51, 0.55);
}

.finanzierung__hinweis {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 24px 28px;      /* 24 + 50 + 24 = 98 */
  border-radius: 16px;
  background: var(--c-weiss);
}
.finanzierung__hinweis::before {
  content: "";
  width: 3px;
  height: 50px;
  flex: none;
  border-radius: 2px;
  background: var(--c-akzent);
}
.finanzierung__hinweis p {
  font-size: 16.5px;
  font-weight: 400;
  line-height: 25px;
  color: rgba(11, 46, 51, 0.78);
}


/* --------------------------------------------------------------------------
   WEGWAHL · nur mobil · vier Reiter über der Detailkarte
   Figma 426:2811. Jeder Reiter umschließt seinen Text, aktiv ist dunkel.
   -------------------------------------------------------------------------- */
.wegwahl { display: flex; flex-wrap: wrap; gap: 8px; }
.wegwahl__reiter {
  padding: 11px 18px;      /* 11 + 23 + 11 = 45 */
  border-radius: var(--r-pill);
  background: var(--c-weiss);
  font-size: 15px;
  font-weight: 700;
  line-height: 23px;
  color: rgba(11, 46, 51, 0.6);
  transition: background var(--t-kurz) var(--ease), color var(--t-kurz) var(--ease);
}
.wegwahl__reiter[aria-selected="true"] {
  background: var(--c-petrol);
  color: var(--c-weiss);
}


@media (max-width: 1100px) {

  .seite--hauswirtschaft .seitenkopf { gap: 18px; padding: 96px 24px 48px; }   /* 72 fixe Kopfleiste + 24 Luft, sonst liegen die Brotkrumen darunter */
  .seite--hauswirtschaft .seitenkopf h1 { font-size: 32px; line-height: 34px; }
  .seite--hauswirtschaft .kurzantwort { padding: 26px 28px; }
  .seite--hauswirtschaft .kurzantwort p { font-size: 18px; line-height: 31px; }
  .seite--hauswirtschaft .seitenkopf__aktionen .knopf { width: auto; }

  /* --- Takte mobil · 390 × 1143 --------------------------------------- */
  .takte { gap: 28px; padding: 56px 22px 60px; }
  .takte__kopf h2 { font-size: 30px; line-height: 34px; }
  .takte__lead { font-size: 16px; line-height: 24px; }
  .takte__reihe { grid-template-columns: 1fr; gap: 16px; }
  .marke--kraeftig { line-height: 19px; }
  .takt__band { padding: 18px 22px; }        /* 18 + 28 + 18 = 64 */
  .takt__band b { line-height: 28px; }
  .takt__liste { padding: 24px 22px 26px; }
  .takt__liste li { font-size: 15px; line-height: 22px; }
  .takt__punkt { height: 22px; }
  .zettel { padding: 46px 22px 40px; }

  /* --- Zitat mobil · 390 × 742 ----------------------------------------- */
  .zitat { gap: 26px; padding: 56px 22px 60px; }
  /* Figma setzt die Schleier mobil kleiner und anders: Mint 340 bei
     −120/120, Lavendel 320 bei 160/460. */
  .zitat__schleier--mint {
    left: -120px; top: 120px;
    width: 340px; height: 340px;
  }
  .zitat__schleier--lavendel {
    left: 160px; right: auto; top: 460px;
    width: 320px; height: 320px;
  }
  .zitat__karte { gap: 18px; padding: 26px 24px 28px; }
  .zitat__zeichen { font-size: 96px; line-height: 67px; }
  .zitat__satz { font-size: 26px; line-height: 32px; }
  .zitat__wer { padding-top: 4px; }
  .zitat__wer b { font-size: 17px; line-height: 26px; }
  .zitat__wer span { font-size: 14.5px; line-height: 22px; }
  .zitat__nach { width: auto; font-size: 15.5px; line-height: 23px; }

  /* --- Finanzierung mobil · 390 × 871 ----------------------------------
     Aus der Tabelle wird eine Karte: sichtbar ist nur die Zeile, die der
     Reiter oben gewählt hat. Die Spaltenüberschriften stehen dann als
     Kleinlabel über dem Wert. */
  .finanzierung { gap: 28px; padding: 56px 22px 60px; }
  .finanzierung__kopf h2 { font-size: 30px; line-height: 34px; }
  .finanzierung__lead { font-size: 16px; line-height: 24px; }

  .wege { border-radius: 0; background: none; overflow: visible; }
  .wege thead { display: none; }
  .wege, .wege tbody { display: block; width: 100%; }
  .wege tbody tr { display: none; }
  .finanzierung[data-weg="1"] .wege tbody tr[data-weg="1"],
  .finanzierung[data-weg="2"] .wege tbody tr[data-weg="2"],
  .finanzierung[data-weg="3"] .wege tbody tr[data-weg="3"],
  .finanzierung[data-weg="4"] .wege tbody tr[data-weg="4"] {
    display: flex;
    flex-direction: column;
    gap: 18px;             /* 26 + 100 + 18 + 46 + 18 + 71 + 28 = 307 */
    padding: 26px 24px 28px;
    border-radius: 20px;
    background: var(--c-weiss);
  }
  /* :nth-of-type schlägt die einfache Regel – deshalb hier ebenfalls
     mit Pseudoklasse, sonst behalten die Zellen ihr Tabellenpolster. */
  .wege tbody th,
  .wege tbody td:nth-of-type(n) { padding: 0; border: 0; }

  .wege tbody .weg { gap: 18px; }
  .wege tbody .weg b { font-size: 24px; line-height: 36px; }
  .wege tbody .weg span {
    font-size: 16.5px;
    line-height: 25px;
    color: rgba(11, 46, 51, 0.82);
  }
  /* Kleinlabel über den Werten – „Paragraf" steht so in Figma, die
     anderen beiden kommen aus den Spaltenüberschriften. */
  .wege tbody .weg span::before { content: "Paragraf"; }
  .wege tbody td::before { content: attr(data-label); }
  .wege tbody .weg span::before,
  .wege tbody td::before {
    display: block;
    margin-bottom: 4px;
    font-size: 11.5px;
    font-weight: 800;
    line-height: 17px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(11, 46, 51, 0.4);
  }

  .finanzierung__hinweis { align-items: stretch; gap: 14px; padding: 20px; }
  .finanzierung__hinweis::before { height: auto; }
  .finanzierung__hinweis p { font-size: 15.5px; line-height: 23px; }
}


/* ==========================================================================
   BETREUUNG & ENTLASTUNG
   --------------------------------------------------------------------------
   Figma Gesamtentwurf Desktop 456:501 · Mobil 456:779
   ========================================================================== */

/* --- Anspruchskarten im Seitenkopf · zwei weiße Karten 430 ---------------- */
.ansprueche {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
  gap: 20px;
  width: 880px;
  max-width: 100%;
}
.anspruch-karte {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px;
  border-radius: 18px;
  background: var(--c-weiss);
}
.anspruch-karte__paragraf {
  font-size: 13px;
  font-weight: 800;
  line-height: 20px;
  letter-spacing: 0.06em;
  color: var(--c-akzent);
}
.anspruch-karte b {
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: -0.01em;
  color: var(--c-petrol);
}
.anspruch-karte p {
  font-size: 15.5px;
  font-weight: 400;
  line-height: 23px;
  color: rgba(11, 46, 51, 0.72);
}
.anspruch-karte__mehr {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 23px;
  color: var(--c-akzent);
  transition: color var(--t-kurz) var(--ease);
}
.anspruch-karte__mehr:hover { color: var(--c-akzent-dunkel); }


/* --- ALLTAG · „Stunden, die guttun" · 1440 × 624 -------------------------- */
.alltag {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: 96px var(--rand-sektion) 100px;
  background: var(--c-mint);
}
.alltag__kopf { display: flex; flex-direction: column; gap: 14px; }
.alltag__kopf h2 {
  font-size: 46px;
  font-weight: 800;
  line-height: 52px;
  color: var(--c-petrol);
}
.alltag__lead {
  font-size: 18px;
  font-weight: 400;
  line-height: 27px;
  color: rgba(11, 46, 51, 0.76);
}
.alltag__karten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: 24px;
}
.bkarte {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 30px 34px;
  border-radius: 20px;
  background: var(--c-weiss);
}
.bkarte__symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px; height: 54px; flex: none;
  border-radius: 50%;
  background: var(--c-mint);
  color: var(--c-petrol);
}
.bkarte__symbol svg { width: 29px; height: 29px; }
.bkarte b {
  font-size: 21px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: -0.01em;
  color: var(--c-petrol);
}
.bkarte p {
  font-size: 15.5px;
  font-weight: 400;
  line-height: 23px;
  color: rgba(11, 46, 51, 0.72);
}


/* --- ANGEHÖRIGE · 1440 × 1003 -------------------------------------------
   Dunkles Band, darüber eine weiße Karte, die 96 überlappt. In Figma ist
   das ein negativer Abstand – hier ein negativer Rand an der Karte.
   -------------------------------------------------------------------------- */
.angehoerige {
  display: flex;
  flex-direction: column;
  padding: 96px var(--rand-sektion) 100px;
  background: var(--c-weiss);
}
.angehoerige__band {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 76px 72px 150px;
  border-radius: 34px;
  background: var(--c-petrol);
  overflow: hidden;
}
/* Schleier · Figma: 620 bei 700 / −230, Mint 26 %, Unschärfe 160 */
.angehoerige__schleier {
  position: absolute;
  left: 700px; top: -230px;
  width: 620px; height: 620px;
  border-radius: 50%;
  background: rgba(85, 199, 167, 0.26);
  filter: blur(80px);
  pointer-events: none;
}
/* Nur den Inhalt anheben – die Schleier-Ellipse muss absolut bleiben,
   sonst rutscht sie in den Fluss und streckt das Band um 620. */
.angehoerige__band > *:not(.angehoerige__schleier) { position: relative; }
.angehoerige__band h2 {
  font-size: 58px;
  font-weight: 800;
  line-height: 61px;       /* Figma: Blockhöhe 122 bei 2 Zeilen */
  letter-spacing: -0.025em;
  color: var(--c-weiss);
}
.angehoerige__lead {
  width: 700px;
  max-width: 100%;
  font-size: 18.5px;
  font-weight: 400;
  line-height: 28px;
  color: rgba(255, 255, 255, 0.74);
}

/* Muss ebenfalls positioniert sein: das Band ist `relative` und würde
   sonst über der Karte liegen – positionierte Elemente malen über
   nicht positionierte, egal in welcher Reihenfolge sie stehen. */
.angehoerige__rahmen {
  position: relative;
  padding: 0 72px;
  margin-top: -96px;
}
.angehoerige__karte {
  border-radius: 26px;
  background: var(--c-weiss);
  box-shadow: 0 18px 44px rgba(11, 46, 51, 0.12);
  overflow: hidden;
}
.angehoerige__inhalt { display: flex; flex-direction: column; gap: 24px; padding: 44px 48px 40px; }
.angehoerige__inhalt > b {
  font-size: 24px;
  font-weight: 800;
  line-height: 36px;
  letter-spacing: -0.015em;
  color: var(--c-petrol);
}
/* Zwei Spalten, in Figma ohne Zeilenabstand */
.angehoerige__punkte {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 32px;
  row-gap: 0;
}
.apunkt {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 15px 0;         /* 15 + 25 + 15 = 55 je Zeile */
  font-size: 16.5px;
  font-weight: 400;
  line-height: 25px;
  color: rgba(11, 46, 51, 0.82);
}
.apunkt__haken {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px; flex: none;
  border-radius: 50%;
  background: var(--c-mint);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  color: rgba(11, 46, 51, 0.7);
}

.angehoerige__aktionen {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 28px 48px;
  background: var(--c-mint);
}
.angehoerige__hinweis {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: rgba(11, 46, 51, 0.7);
}
.apille {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 20px 15px 24px;
  border-radius: var(--r-pill);
  background: var(--c-petrol);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 23px;
  color: var(--c-weiss);
  transition: background var(--t-kurz) var(--ease);
}
.apille:hover { background: #071f23; }
/* 15 + 23 + 15 + 2 Kante = 55 */
.apille--linie {
  border: 1px solid rgba(11, 46, 51, 0.25);
  background: transparent;
  color: var(--c-petrol);
}
.apille--linie i { font-style: normal; color: rgba(11, 46, 51, 0.6); }
.apille--linie:hover { background: rgba(11, 46, 51, 0.06); }


@media (max-width: 1100px) {

  .seite--betreuung .seitenkopf { gap: 18px; padding: 96px 24px 48px; }   /* 72 fixe Kopfleiste + 24 Luft, sonst liegen die Brotkrumen darunter */
  .seite--betreuung .seitenkopf h1 { font-size: 32px; line-height: 34px; }
  .seite--betreuung .kurzantwort { padding: 26px 28px; }
  .seite--betreuung .kurzantwort p { font-size: 18px; line-height: 31px; }
  .seite--betreuung .seitenkopf__aktionen .knopf { width: auto; }

  /* Anspruchskarten mobil untereinander · Figma 342 × 219, Abstand 14 */
  .ansprueche { grid-template-columns: 1fr; gap: 14px; width: auto; }
  .anspruch-karte { padding: 22px 20px; }
  .anspruch-karte b { font-size: 19px; line-height: 29px; }
  .anspruch-karte p { font-size: 15px; }

  /* --- Alltagsbegleitung mobil · 390 × 1030 ---------------------------- */
  .alltag { gap: 28px; padding: 56px 22px 60px; }
  .alltag__kopf h2 { font-size: 30px; line-height: 34px; }
  .alltag__lead { font-size: 16px; line-height: 24px; }
  .alltag__karten { grid-template-columns: 1fr; gap: 16px; }
  /* Figma mobil: Karte 346, Polster 24/22/26/22, Abstand 12,
     Symbol 46 statt 54, Titel 19/29 statt 21/32. */
  .bkarte { gap: 12px; padding: 24px 22px 26px; }
  .bkarte__symbol { width: 46px; height: 46px; }
  .bkarte__symbol svg { width: 25px; height: 25px; }
  .bkarte b { font-size: 19px; line-height: 29px; }
  .bkarte p { font-size: 15px; }

  /* --- Angehörige mobil · 390 × 1104 ----------------------------------
     Band 358 × 332, die Karte überlappt hier 56 statt 96. */
  .angehoerige { padding: 48px 16px 56px; }
  .angehoerige__band { gap: 16px; padding: 44px 26px 96px; border-radius: 26px; }
  .angehoerige__band h2 { font-size: 32px; line-height: 34px; }
  .angehoerige__lead { width: auto; font-size: 16px; line-height: 24px; }
  .angehoerige__schleier {
    left: 120px; top: -110px;
    width: 300px; height: 300px;
  }
  .angehoerige__rahmen { padding: 0 14px; margin-top: -56px; }
  .angehoerige__karte { border-radius: 22px; }
  .angehoerige__inhalt { gap: 18px; padding: 28px 24px 26px; }
  .angehoerige__inhalt > b { font-size: 20px; line-height: 30px; }
  .angehoerige__punkte { grid-template-columns: 1fr; }
  /* Mobil 13 statt 15 Polster, Text 15/23 statt 16.5/25 */
  .apunkt { padding: 13px 0; font-size: 15px; line-height: 23px; }
  .angehoerige__aktionen {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 24px 24px 26px;
  }
  .angehoerige__hinweis { flex: none; font-size: 15.5px; line-height: 23px; }
  .apille { justify-content: center; }

  /* --- Anspruchs-Check mobil · 390 × 725 ------------------------------- */
  .seite--betreuung .starten { gap: 24px; }
}


/* ==========================================================================
   ÜBER UNS
   --------------------------------------------------------------------------
   Figma Gesamtentwurf Desktop 474:501 · Mobil 474:730
   ========================================================================== */

/* Weiche Schleier · Grundform, Lage und Farbe setzt die jeweilige Sektion.
   Figmas Ebenen-Unschärfe entspricht in CSS der halben Angabe. */
.nebel { position: absolute; border-radius: 50%; pointer-events: none; }

/* --- Signet im Seitenkopf · 320 bei 1033 / 57 ---------------------------- */
.seitenkopf--signet { position: relative; overflow: hidden; }
/* Das Servitum-Logo im Seitenkopf – voll deckend, nicht als Wasserzeichen.
   Figma legt dort nur das Zeichen auf 16 %; hier steht als einzige Stelle der
   Seite das vollständige Logo mit Schriftzug, in voller Qualität.
   Es hängt am rechten Rand der Inhaltsspalte und ragt 100 darüber hinaus,
   damit es auf breiten Schirmen mitwandert statt links liegen zu bleiben.
   380 breit lässt 40 Luft zur Kurzantwort, die bei 1000 endet. */
.signet {
  position: absolute;
  top: 150px;
  right: calc(var(--rand-sektion) - 100px);
  width: 380px;
  height: auto;            /* Seitenverhältnis 764 × 684, nicht quetschen */
  pointer-events: none;
}
.seitenkopf--signet > *:not(.signet) { position: relative; }

/* --- Kennzahl-Pille · 316 × 84 ------------------------------------------- */
.kennzahl {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 22px 34px 22px 28px;
  border-radius: 18px;
  background: var(--c-weiss);
}
.kennzahl__wert {
  font-size: 38px;
  font-weight: 800;
  line-height: 38px;
  letter-spacing: -0.02em;
  color: var(--c-akzent);
}
.kennzahl__strich { width: 1px; height: 40px; flex: none; background: rgba(11, 46, 51, 0.14); }
.kennzahl__text {
  font-size: 15.5px;
  font-weight: 700;
  line-height: 20px;
  color: rgba(11, 46, 51, 0.7);
}


/* --- LEITBILD · 1440 × 824 ----------------------------------------------- */
.leitbild {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 96px var(--rand-sektion) 100px;
  background: var(--c-mint);
  overflow: hidden;
}
.leitbild .nebel--mint {
  left: 120px; top: -140px;
  width: 640px; height: 640px;
  background: rgba(85, 199, 167, 0.34);
  filter: blur(80px);
}
.leitbild .nebel--lavendel {
  right: -60px; top: 320px;
  width: 560px; height: 560px;
  background: rgba(140, 140, 217, 0.22);
  filter: blur(80px);
}
/* Deckt die Schleier zur Oberkante hin ab, damit die Sektion sauber
   beginnt · Figma: 1440 × 200, Mint 1 → 0,55 bei 55 % → 0 */
.leitbild__deckel {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 200px;
  background: linear-gradient(to bottom,
    #ebfbf5 0%, rgba(235, 251, 245, 0.55) 55%, rgba(235, 251, 245, 0) 100%);
  pointer-events: none;
}
.leitbild > *:not(.nebel):not(.leitbild__deckel) { position: relative; }

.leitbild__kopf { display: flex; flex-direction: column; gap: 16px; }
.leitbild__kopf h2 {
  font-size: 44px;
  font-weight: 800;
  line-height: 48px;
  letter-spacing: -0.02em;
  color: var(--c-petrol);
}
.leitbild__absaetze { display: flex; gap: 56px; }
.leitbild__absaetze p {
  flex: 1;
  min-width: 0;
  font-size: 17px;
  font-weight: 400;
  line-height: 26px;
  color: rgba(11, 46, 51, 0.75);
}

.prinzipien {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: 20px;
}
.prinzip {
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(13px);
  -webkit-backdrop-filter: blur(13px);
  overflow: hidden;
}
.prinzip__band {
  display: flex;
  align-items: center;
  padding: 18px 26px;      /* 18 + 27 + 18 = 63 */
  background: rgba(11, 46, 51, 0.94);
}
.prinzip__band b {
  font-size: 18px;
  font-weight: 800;
  line-height: 27px;
  color: var(--c-weiss);
}
.prinzip p {
  padding: 22px 26px 28px;
  font-size: 15.5px;
  font-weight: 400;
  line-height: 24px;
  color: rgba(11, 46, 51, 0.72);
}

.leitzitat {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  padding: 30px 34px 32px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.52);
  backdrop-filter: blur(13px);
  -webkit-backdrop-filter: blur(13px);
}
.leitzitat__zeichen {
  flex: none;
  font-size: 72px;
  font-weight: 800;
  line-height: 50px;
  color: rgba(85, 199, 167, 0.4);
}
.leitzitat__text { display: flex; flex-direction: column; gap: 10px; }
.leitzitat__text blockquote {
  font-size: 24px;
  font-weight: 800;
  line-height: 31px;
  letter-spacing: -0.01em;
  color: var(--c-petrol);
}
.leitzitat__text cite {
  font-style: normal;
  font-size: 15px;
  font-weight: 700;
  line-height: 23px;
  color: rgba(11, 46, 51, 0.5);
}


/* --- QUALITÄT · 1440 × 868, Petrolgrund ---------------------------------- */
.qualitaet {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 44px;
  padding: 96px var(--rand-sektion) 100px;
  background: var(--c-petrol);
  overflow: hidden;
}
.qualitaet .nebel--mint {
  left: 60px; top: 260px;
  width: 640px; height: 640px;
  background: rgba(85, 199, 167, 0.3);
  filter: blur(85px);
}
.qualitaet .nebel--lavendel {
  right: 20px; top: 60px;
  width: 540px; height: 540px;
  background: rgba(140, 140, 217, 0.24);
  filter: blur(85px);
}
.qualitaet > *:not(.nebel) { position: relative; }
.qualitaet__kopf { display: flex; flex-direction: column; gap: 14px; }
.qualitaet__kopf h2 {
  font-size: 46px;
  font-weight: 800;
  line-height: 51px;
  letter-spacing: -0.02em;
  color: var(--c-weiss);
}
.qualitaet__lead {
  width: 780px;
  max-width: 100%;
  font-size: 18px;
  font-weight: 400;
  line-height: 27px;
  color: rgba(255, 255, 255, 0.75);
}
.standards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.standard {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  padding: 28px 28px 30px;   /* 28 + 85 + 30 + 2 Kante = 145 */
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(13px);
  -webkit-backdrop-filter: blur(13px);
}
.standard__nr {
  flex: none;
  font-size: 26px;
  font-weight: 800;
  line-height: 29px;
  color: rgba(85, 199, 167, 0.85);
}
.standard__text { display: flex; flex-direction: column; gap: 7px; }
.standard__text b {
  font-size: 19.5px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: -0.01em;
  color: var(--c-weiss);
}
.standard__text span {
  font-size: 15.5px;
  font-weight: 400;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.68);
}


/* --- STRUKTUR · 1440 × 852 · Klingelschild 820 --------------------------- */
.struktur {
  display: flex;
  flex-direction: column;
  gap: 44px;
  padding: 96px var(--rand-sektion) 100px;
  background: var(--c-mint);
}
.struktur__kopf { display: flex; flex-direction: column; gap: 14px; }
.struktur__kopf h2 {
  font-size: 46px;
  font-weight: 800;
  line-height: 51px;
  letter-spacing: -0.02em;
  color: var(--c-petrol);
}
.struktur__lead {
  width: 820px;
  max-width: 100%;
  font-size: 18px;
  font-weight: 400;
  line-height: 27px;
  color: rgba(11, 46, 51, 0.75);
}

.schild {
  width: 820px;
  max-width: 100%;
  border: 1px solid rgba(11, 46, 51, 0.12);
  border-radius: 18px;
  background: var(--c-weiss);
  box-shadow: 0 12px 30px rgba(11, 46, 51, 0.1);
  overflow: hidden;
}
.schild__kopf {
  padding: 14px 28px;      /* 14 + 18 + 14 = 46 */
  background: var(--c-petrol);
  font-size: 12px;
  font-weight: 800;
  line-height: 18px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}
.schild__zeile {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 22px 24px 22px 28px;
}
.schild__zeile + .schild__zeile { border-top: 1px solid rgba(11, 46, 51, 0.1); }
.schild__text { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.schild__text b {
  font-size: 19px;
  font-weight: 700;
  line-height: 29px;
  letter-spacing: -0.01em;
  color: var(--c-petrol);
}
.schild__text span {
  font-size: 15.5px;
  font-weight: 400;
  line-height: 24px;
  color: rgba(11, 46, 51, 0.7);
}
/* Klingelknopf · 40 mit 15er Mintpunkt */
.schild__knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px; flex: none;
  border: 1px solid rgba(11, 46, 51, 0.1);
  border-radius: 50%;
  background: var(--c-mint);
}
.schild__knopf::after {
  content: "";
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--c-akzent);
  animation: klingelpunkt 2.8s var(--ease) infinite;
}
/* Der Punkt pocht wie ein Klingelknopf: er hebt sich kurz an, während ein
   Ring nach außen ausläuft. Der Ring ist ein Schatten, kein zweites Element –
   so bleibt die 40er-Fläche unverändert und nichts verschiebt sich.
   Die vier Zeilen laufen versetzt, damit es nicht im Gleichschritt blinkt. */
@keyframes klingelpunkt {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0    rgba(85, 199, 167, 0.5); }
  45%  { transform: scale(1.14); box-shadow: 0 0 0 11px rgba(85, 199, 167, 0);   }
  70%  { transform: scale(1);    box-shadow: 0 0 0 0    rgba(85, 199, 167, 0);   }
  100% { transform: scale(1);    box-shadow: 0 0 0 0    rgba(85, 199, 167, 0);   }
}
.schild__zeile:nth-of-type(2) .schild__knopf::after { animation-delay: 0.35s; }
.schild__zeile:nth-of-type(3) .schild__knopf::after { animation-delay: 0.7s;  }
.schild__zeile:nth-of-type(4) .schild__knopf::after { animation-delay: 1.05s; }


@media (max-width: 1100px) {

  .seite--ueber-uns .seitenkopf { gap: 18px; padding: 96px 24px 48px; }   /* 72 fixe Kopfleiste + 24 Luft, sonst liegen die Brotkrumen darunter */
  .seite--ueber-uns .seitenkopf h1 { font-size: 32px; line-height: 34px; }
  .seite--ueber-uns .kurzantwort { padding: 26px 28px; }
  .seite--ueber-uns .kurzantwort p { font-size: 18px; line-height: 31px; }
  .seite--ueber-uns .seitenkopf__aktionen .knopf { width: auto; }
  /* Figma zeigt das Signet mobil nicht. */
  .signet { display: none; }

  .kennzahl { gap: 18px; padding: 18px 26px 18px 22px; }
  .kennzahl__wert { font-size: 30px; line-height: 30px; }
  .kennzahl__strich { height: 34px; }
  .kennzahl__text { font-size: 14.5px; line-height: 19px; }

  /* --- Leitbild mobil · 390 × 1389 ------------------------------------- */
  .leitbild { gap: 26px; padding: 56px 22px 60px; }
  .leitbild .nebel--mint {
    left: -130px; top: 240px;
    width: 360px; height: 360px;
  }
  .leitbild .nebel--lavendel {
    left: 140px; right: auto; top: 760px;
    width: 340px; height: 340px;
  }
  .leitbild__deckel { height: 140px; }
  .leitbild__kopf h2 { font-size: 29px; line-height: 44px; }
  .leitbild__absaetze { flex-direction: column; gap: 16px; }
  .leitbild__absaetze p { font-size: 16px; line-height: 24px; }
  .prinzipien { grid-template-columns: 1fr; gap: 14px; }
  .prinzip__band { padding: 18px 22px; }
  .prinzip__band b { font-size: 17.5px; }
  .prinzip p { padding: 22px 22px 24px; font-size: 15px; line-height: 23px; }

  /* Zitat mobil untereinander statt nebeneinander */
  .leitzitat { flex-direction: column; gap: 14px; padding: 24px 22px 26px; }
  .leitzitat__zeichen { font-size: 52px; line-height: 36px; }
  .leitzitat__text blockquote { font-size: 19px; line-height: 25px; }
  .leitzitat__text cite { font-size: 14px; line-height: 21px; }

  /* --- Qualität mobil · 390 × 1421 -------------------------------------- */
  .qualitaet { gap: 28px; padding: 56px 22px 60px; }
  .qualitaet .nebel--mint {
    left: -150px; top: 300px;
    width: 380px; height: 380px;
  }
  .qualitaet .nebel--lavendel {
    left: 130px; right: auto; top: 820px;
    width: 340px; height: 340px;
  }
  .qualitaet__kopf h2 { font-size: 30px; line-height: 33px; }
  .qualitaet__lead { width: auto; font-size: 16px; line-height: 24px; }
  .standards { grid-template-columns: 1fr; gap: 14px; }
  .standard { gap: 16px; padding: 22px 22px 24px; }
  .standard__nr { font-size: 22px; line-height: 24px; }
  .standard__text b { font-size: 18px; line-height: 27px; }
  .standard__text span { font-size: 15px; line-height: 23px; }

  /* --- Struktur mobil · 390 × 904 --------------------------------------- */
  .struktur { gap: 28px; padding: 56px 22px 60px; }
  .struktur__kopf h2 { font-size: 30px; line-height: 33px; }
  .struktur__lead { width: auto; font-size: 16px; line-height: 24px; }
  .schild { width: auto; }
  .schild__kopf { padding: 14px 20px; }
  .schild__zeile { gap: 14px; padding: 18px 18px 18px 20px; }
  .schild__text b { font-size: 17px; line-height: 26px; }
  .schild__text span { font-size: 14.5px; line-height: 22px; }
  .schild__knopf { width: 34px; height: 34px; }
  .schild__knopf::after { width: 13px; height: 13px; }
}


/* ==========================================================================
   ⑰ KONTAKT · Figma 503:1103
   Desktop 503:501 (1440 × 3603) · Mobil 503:762 (390 × 5372)
   ========================================================================== */

/* --- Seitenkopf · 1440 × 602 --------------------------------------------
   Wie auf den übrigen Unterseiten, nur die Kurzantwort ist schmaler:
   Figma gibt hier 800 statt der sonst üblichen 880. */
.seite--kontakt .kurzantwort { width: 800px; }


/* --- Nachricht senden · 1440 × 966 · Figma 512:13 ------------------------
   Polster 96/120/100/120. Zwei Spalten: links das Formular mit festen 727,
   rechts die Telefonkarte, die den Rest der 1200er Spalte füllt. */
.nachricht {
  padding: 96px var(--rand-sektion) 100px;
  background: var(--c-mint);
}
.nachricht__reihe {
  display: grid;
  grid-template-columns: 727px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

/* --- Formularkarte · 727 × 770, Radius 24, Polster 40/40/42/40 ---------- */
.formkarte {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 40px 40px 42px;
  border-radius: 24px;
  background: var(--c-weiss);
}
.formkarte__kopf {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-bottom: 6px;
}
.formkarte__kopf h2 {
  font-size: 26px;
  font-weight: 800;
  line-height: 39px;       /* Figma: 150 % von 26 */
  letter-spacing: 0;       /* Figma: 0 %, nicht --ls-titel */
  color: var(--c-petrol);
}
.formkarte__kopf p {
  font-size: 15.5px;
  font-weight: 400;
  line-height: 23px;
  color: rgba(11, 46, 51, 0.65);
}

/* --- Felder · Zustandsblatt 524:13 --------------------------------------
   Ruhe: Rand Petrol 16 %. Ausgefüllt: 24 %. Fokus: Akzent 2 px mit 4er
   Ring. Fehler: Rot mit Meldung darunter. Gesperrt: Mintfläche, Rand 10 %.
   Figma lässt das Feld beim Fokus von 56 auf 58 wachsen, weil der Rand dort
   innen liegt und zur Rahmenhöhe zählt. Hier bleibt die Höhe stehen und der
   zweite Pixel kommt als Schatten – sonst springt beim Hineinklicken die
   ganze Reihe um zwei Pixel.
   Alle Regeln hängen an .formkarte: das nackte .feld gehört der dunklen
   Rückrufkarte und setzt dort height 52 – das schlägt sonst hier durch. */
.formkarte .feldreihe { display: flex; gap: 18px; }
.formkarte .feldreihe .feld { flex: 1 1 0; min-width: 0; }

.formkarte .feld {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
}
.formkarte .feld__label {
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
  color: rgba(11, 46, 51, 0.68);
}
.formkarte .feld__eingabe {
  width: 100%;
  height: 56px;
  padding: 15px 14px 15px 16px;
  border: 1px solid rgba(11, 46, 51, 0.16);
  border-radius: 12px;
  background: var(--c-weiss);
  font: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: rgba(11, 46, 51, 0.92);
  transition: border-color var(--t-kurz) var(--ease), box-shadow var(--t-kurz) var(--ease);
}
.formkarte .feld__eingabe::placeholder { color: rgba(11, 46, 51, 0.38); }
.formkarte .feld__eingabe:not(:placeholder-shown) { border-color: rgba(11, 46, 51, 0.24); }
.formkarte .feld__eingabe--lang {
  height: 132px;
  resize: vertical;
}
/* Das Label färbt sich mit dem sichtbaren Fokus, nicht schon beim Klick:
   sonst steht es nach einer Auswahl mit der Maus mintfarben da, ohne
   dass am Feld ein Fokusring zu sehen wäre. */
.formkarte .feld:has(:focus-visible) .feld__label { color: var(--c-akzent); }
.formkarte .feld__eingabe:focus {
  outline: 0;
  border-color: var(--c-akzent);
  box-shadow: 0 0 0 1px var(--c-akzent), 0 0 0 5px rgba(85, 199, 167, 0.3);
}
.formkarte .feld__eingabe:disabled {
  border-color: rgba(11, 46, 51, 0.1);
  background: var(--c-mint);
  color: rgba(11, 46, 51, 0.45);
}
/* Fehler steht nach dem Fokus, damit ein fehlerhaftes Feld auch im Fokus
   rot bleibt. Die Meldung setzt der Browser bzw. das Skript ein. */
.formkarte .feld--fehler .feld__label,
.formkarte .feld--fehler:focus-within .feld__label { color: #c4453d; }
.formkarte .feld--fehler .feld__eingabe,
.formkarte .feld--fehler .feld__eingabe:focus {
  border-color: #c4453d;
  box-shadow: 0 0 0 1px #c4453d, 0 0 0 5px rgba(196, 69, 61, 0.22);
}
.formkarte .feld__meldung {
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
  color: #c4453d;
}

/* --- Auswahlliste in Formulargröße --------------------------------------
   Gleiche Steuerung wie beim Beratungsbesuch, nur im Maß dieses Formulars:
   56 statt 46 hoch, Radius 12 statt 8, Text 16 statt 15.
   Die Höhe steht als Mindestmaß, damit der gewählte Eintrag mobil auf zwei
   Zeilen umbrechen darf – Figma zeichnet das Feld dort 80 hoch.
   Den offenen Zustand zeichnet Figma für dieses Formular nicht; Einträge
   und Schatten sind deshalb aus der Liste des Beratungsbesuchs übernommen. */
.kliste--gross .kliste__kopf {
  height: auto;
  min-height: 56px;
  padding: 15px 14px 15px 16px;
  border-color: rgba(11, 46, 51, 0.24);
  border-radius: 12px;
}
.kliste--gross .kliste__wert {
  font-size: 16px;
  line-height: 24px;
  color: rgba(11, 46, 51, 0.92);
}
.kliste--gross .kliste__wert[data-leer] { color: rgba(11, 46, 51, 0.38); }
.kliste--gross .kliste__pfeil {
  width: 18px;
  height: 18px;
  color: rgba(11, 46, 51, 0.5);
}
.kliste--gross .kliste__kopf:focus-visible {
  box-shadow: 0 0 0 1px var(--c-akzent), 0 0 0 5px rgba(85, 199, 167, 0.3);
}
.kliste--gross .kliste__kopf[aria-expanded="true"] { border-radius: 12px 12px 0 0; }
.kliste--gross .kliste__liste { border-radius: 0 0 12px 12px; }
.kliste--gross .keintrag { padding: 13px 16px; }
.kliste--gross .keintrag__titel { font-size: 16px; line-height: 24px; }
.kliste--gross .keintrag__haken { width: 16px; height: 16px; }

/* --- Hinweis auf den Terminkalender · Figma 524:62 / 524:78 -------------
   Steht nur da, wenn als Anliegen „Beratungsbesuch § 37.3" gewählt ist –
   für diesen einen Fall gibt es einen eigenen Kalender, das Formular wäre
   der Umweg. Figma setzt 12 Abstand zum Feld darüber; das Feld selbst
   arbeitet mit 7, daher die fünf zusätzlichen Pixel. */
.terminhinweis {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 5px;
  padding: 20px 22px;
  border: 1px solid rgba(85, 199, 167, 0.45);
  border-radius: 14px;
  background: var(--c-mint);
}
.terminhinweis__feld {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 22px;
  background: var(--c-weiss);
  color: var(--c-petrol);
}
.terminhinweis__feld svg { width: 22px; height: 22px; }
.terminhinweis__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.terminhinweis__text b {
  font-size: 17.5px;
  font-weight: 800;
  line-height: 26px;
  color: var(--c-petrol);
}
.terminhinweis__text > span {
  font-size: 15px;
  font-weight: 400;
  line-height: 23px;       /* Figma: Block 69 bei drei Zeilen */
  color: rgba(11, 46, 51, 0.7);
}
.terminhinweis__knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  gap: 9px;
  padding: 14px 18px 14px 22px;
  border-radius: 999px;
  background: var(--c-petrol);
  font-size: 15.5px;
  font-weight: 800;
  line-height: 23px;
  color: var(--c-weiss);
  transition: background var(--t-kurz) var(--ease);
}
.terminhinweis__knopf span {
  display: inline-block;
  width: 16px;             /* Figma: Glyphenkasten 16 */
  text-align: center;
}
.terminhinweis__knopf:hover { background: var(--c-petrol-tief); }

/* --- Datenschutz-Kästchen · 22 mit Radius 6 ------------------------------
   Figma zeichnet nur den angehakten Zustand. Der leere bekommt denselben
   Rand wie ein ausgefülltes Feld, damit er als Bedienelement lesbar ist. */
.datenschutz {
  display: flex;
  gap: 12px;
  margin: 0;
  padding-top: 4px;
}
.datenschutz__kaestchen {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 1px solid rgba(11, 46, 51, 0.24);
  border-radius: 6px;
  background: var(--c-weiss);
  cursor: pointer;
  transition: background-color var(--t-kurz) var(--ease), border-color var(--t-kurz) var(--ease);
}
.datenschutz__kaestchen:checked {
  border-color: var(--c-akzent);
  background-color: var(--c-akzent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13' fill='none'%3E%3Cpath d='M2.17 6.1L5.2 9.21L10.84 3.25' stroke='rgba(11,46,51,0.9)' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px 13px;
}
.datenschutz__kaestchen:focus-visible {
  outline: 2px solid var(--c-akzent);
  outline-offset: 2px;
}
.datenschutz__text {
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;       /* Figma: 148 % von 14, Block 42 bei zwei Zeilen */
  color: rgba(11, 46, 51, 0.7);
  cursor: pointer;
}
.datenschutz__text a { text-decoration: underline; }
.datenschutz__text a:hover { color: var(--c-akzent-dunkel); }

/* --- Sendeknopf · 223 × 61, voll gerundet -------------------------------- */
.senden {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 10px;
  padding: 18px 24px 18px 28px;
  border: 0;
  border-radius: 999px;
  background: var(--c-akzent);
  font: inherit;
  font-size: 16.5px;
  font-weight: 800;
  line-height: 25px;
  color: var(--c-petrol);
  cursor: pointer;
  transition: background var(--t-kurz) var(--ease);
}
.senden:hover { background: var(--c-akzent-hell); }
.senden__pfeil {
  display: inline-block;
  width: 17px;             /* Figma: Glyphenkasten 17 */
  font-size: 16.5px;
  line-height: 25px;
  text-align: center;
}

/* --- Telefonkarte · 445 × 374 · Figma 512:60 -----------------------------
   Kopf und drei Zeilen; jede Zeile trägt oben eine Trennlinie in Petrol 10 %.
   Die Rundung schneidet, damit die Linien nicht über die Ecken laufen. */
.ruf {
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  background: var(--c-weiss);
  overflow: hidden;
}
.ruf__kopf {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 34px 30px 26px;
}
.ruf__marke {
  font-size: 12px;
  font-weight: 800;
  line-height: 18px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-akzent);
}
.ruf__kopf h2 {
  font-size: 24px;
  font-weight: 800;
  line-height: 36px;
  letter-spacing: 0;       /* Figma: 0 %, nicht --ls-titel */
  color: var(--c-petrol);
}
.ruf__zeile {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0;
  padding: 18px 30px;
  border-top: 1px solid rgba(11, 46, 51, 0.1);
  transition: background var(--t-kurz) var(--ease);
}
a.ruf__zeile:hover { background: var(--c-mint); }
.ruf__feld {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: var(--c-mint);
  color: var(--c-petrol);
}
.ruf__feld svg { width: 21px; height: 21px; }
.ruf__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ruf__text b {
  font-size: 16px;
  font-weight: 700;
  line-height: 23px;
  color: var(--c-petrol);
}
.ruf__text span {
  font-size: 13.5px;
  font-weight: 400;
  line-height: 20px;
  color: rgba(11, 46, 51, 0.6);
}
.ruf__zeile--tel b {
  font-size: 25px;
  font-weight: 800;
  line-height: 29px;       /* Figma: 118 % von 25 */
}


/* --- Anfahrt · 1440 × 762 · Figma 518:13 ---------------------------------
   Polster 96/120/100/120, Abstand 40. Reihe 1200 × 441: Anschrift 440 fest,
   das Kartenfeld nimmt den Rest. */
.anfahrt {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 96px var(--rand-sektion) 100px;
  background: var(--c-mint);
}
.anfahrt__kopf { display: flex; flex-direction: column; gap: 14px; }
/* Die Vorzeile steht hier eine Stufe kräftiger als die Grundfassung:
   13 statt 12, ExtraBold, Sperrung 8 % statt 12 %, Abstand 12 statt 10. */
.anfahrt .marke,
.dringend .marke {
  gap: 12px;
  font-size: 13px;
  font-weight: 800;
  line-height: 20px;       /* Figma: 152 % von 13 */
  letter-spacing: 0.08em;
}
.anfahrt__kopf h2,
.dringend__kopf h2 {
  font-size: 46px;
  font-weight: 800;
  line-height: 51px;       /* Figma: 110 % von 46 */
  letter-spacing: 0;       /* Figma: 0 % – die Grundregel für Überschriften
                              zieht sonst --ls-titel ein und staucht die Zeile */
  color: var(--c-petrol);
}
.anfahrt__reihe {
  display: grid;
  grid-template-columns: 440px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

/* --- Anschriftkarte · 440 × 307, Radius 22 ------------------------------ */
.anschrift {
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  background: var(--c-weiss);
  overflow: hidden;
}
.anschrift__zeile {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 0;
  padding: 20px 30px;
  transition: background var(--t-kurz) var(--ease);
}
.anschrift__zeile:first-child { padding-top: 30px; }
.anschrift__zeile:last-child { padding-bottom: 30px; }
.anschrift__zeile + .anschrift__zeile { border-top: 1px solid rgba(11, 46, 51, 0.1); }
a.anschrift__zeile:hover { background: var(--c-mint); }
.anschrift__feld {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: var(--c-mint);
  color: var(--c-petrol);
}
.anschrift__feld svg { width: 20.8px; height: 20.8px; }
.anschrift__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.anschrift__text b {
  font-size: 18.5px;
  font-weight: 700;
  line-height: 28px;       /* Figma: 152 % von 18,5 */
  color: var(--c-petrol);
}
.anschrift__text span {
  font-size: 15.5px;
  font-weight: 400;
  line-height: 24px;
  color: rgba(11, 46, 51, 0.66);
}

/* --- Kartenfeld · 732 × 441, Radius 22 -----------------------------------
   Solange niemand zugestimmt hat, steht hier nur eine gezeichnete Fläche:
   fünf Wege, eine Grünfläche und ein weißer Schleier darüber. Keine Zeile
   davon lädt etwas von fremden Rechnern.
   Die Maße der Zeichnung sind in Figma auf beiden Breiten gleich und hängen
   an der linken oberen Ecke – deshalb hier feste Werte statt Prozente. */
.kartenfeld {
  position: relative;
  height: 441px;
  border-radius: 22px;
  background: rgb(222, 237, 232);
  overflow: hidden;
}
.kplan > * { position: absolute; }
.kplan__weg { border-radius: 3px; background: var(--c-weiss); }
.kplan__weg--1 { left: -40px; top: 130px; width: 1000px; height: 16px; opacity: 0.85; }
.kplan__weg--2 { left: -40px; top: 300px; width: 1000px; height: 10px; opacity: 0.6; }
.kplan__weg--3 { left: 200px; top: -40px; width: 14px; height: 640px; opacity: 0.8; }
.kplan__weg--4 { left: 470px; top: -40px; width: 9px;  height: 640px; opacity: 0.55; }
.kplan__weg--5 { left: -40px; top: 230px; width: 1000px; height: 7px; opacity: 0.4; }
.kplan__gruen {
  left: 240px; top: 150px;
  width: 230px; height: 140px;
  border-radius: 8px;
  background: rgba(85, 199, 167, 0.16);
}
/* Figma: Ebenen-Unschärfe 6 – in CSS die Hälfte. */
.kplan__schleier {
  left: -40px; top: -40px;
  width: 1000px; height: 640px;
  background: rgba(255, 255, 255, 0.55);
  filter: blur(3px);
}

/* --- Kartennadel · 64 × 78 ----------------------------------------------
   Figma gibt dem Tropfen einen Schlagschatten mit Streuung −2; CSS kennt
   bei drop-shadow keine Streuung, der Radius 12 wird zur Hälfte. */
.knadel {
  position: absolute;
  right: 116px;
  top: 108px;
  width: 64px;
  height: 78px;
  pointer-events: none;
}
.knadel__pin {
  position: absolute;
  left: 11px;
  top: 0;
  width: 42px;
  height: 66px;
  filter: drop-shadow(0 6px 6px rgba(11, 46, 51, 0.28));
}
.knadel__kern {
  position: absolute;
  left: 24.5px;
  top: 17.5px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--c-weiss);
}
.knadel__schatten {
  position: absolute;
  left: 17px;
  top: 69px;
  width: 30px;
  height: 9px;
  border-radius: 50%;
  background: rgba(11, 46, 51, 0.18);
  filter: blur(2px);
}

/* --- Zustimmungskarte · 360 × 291, unten links mit 40 Abstand ----------- */
.zustimmung {
  position: absolute;
  left: 40px;
  bottom: 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 360px;
  padding: 24px 24px 26px;
  border-radius: 18px;
  background: var(--c-weiss);
  box-shadow: 0 10px 26px -6px rgba(11, 46, 51, 0.16);
}
.zustimmung__titel {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  line-height: 27px;
  color: var(--c-petrol);
}
.zustimmung__text {
  margin: 0;
  font-size: 14.5px;
  font-weight: 400;
  line-height: 22px;
  color: rgba(11, 46, 51, 0.68);
}
.zustimmung__knoepfe {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 4px;
}
.zustimmung__laden,
.zustimmung__route {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 999px;
  font: inherit;
  font-size: 15.5px;
  font-weight: 800;
  line-height: 24px;
  color: var(--c-petrol);
  cursor: pointer;
  transition: background var(--t-kurz) var(--ease), border-color var(--t-kurz) var(--ease);
}
.zustimmung__laden {
  padding: 14px 0;
  border: 0;
  background: var(--c-akzent);
}
.zustimmung__laden:hover { background: var(--c-akzent-hell); }
.zustimmung__route {
  padding: 16px 20px 16px 24px;
  border: 1px solid rgba(11, 46, 51, 0.25);
  background: none;
}
.zustimmung__route:hover { border-color: var(--c-petrol); background: var(--c-mint); }
/* Mobil steht in Figma die kürzere Beschriftung „In Google Maps öffnen" –
   die lange bräche bei 244 Breite auf zwei Zeilen um. */
.zustimmung__kurz { display: none; }

.zustimmung__pfeil {
  flex: none;
  width: 12px;
  height: 12px;
  color: rgba(11, 46, 51, 0.8);
}

/* Nach der Zustimmung füllt die geladene Karte das Feld. */
.kartenfeld--geladen .kplan,
.kartenfeld--geladen .knadel,
.kartenfeld--geladen .zustimmung { display: none; }
.kartenfeld__rahmen {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}



/* --- Dringend · 1440 × 661 · Figma 523:13 --------------------------------
   Polster 96/120/100/120, Abstand 36. Reihe 1200 × 144: der Lauftext nimmt
   den Platz, der Anrufknopf steht rechts und mittig dazu. */
.dringend {
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding: 96px var(--rand-sektion) 100px;
  background: var(--c-mint);
}
.dringend__kopf { display: flex; flex-direction: column; gap: 16px; }
.dringend__reihe {
  display: flex;
  align-items: center;
  gap: 56px;
}
.dringend__text {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  min-width: 0;
}
.dringend__text p {
  margin: 0;
  font-size: 17px;
  font-weight: 400;
  line-height: 26px;       /* Figma: 152 % von 17 */
  color: rgba(11, 46, 51, 0.76);
}
.dringend__aktion {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: none;
  width: 271px;
}
.dringend__hinweis {
  margin: 0;
  width: 260px;            /* Figma: schmaler als der Knopf */
  font-size: 13.5px;
  font-weight: 400;
  line-height: 21px;       /* Figma: 152 % von 13,5, Block 42 bei zwei Zeilen */
  color: rgba(11, 46, 51, 0.6);
}

/* --- Anrufknopf · 271 × 72, voll gerundet ------------------------------- */
.anrufen {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 28px 14px 22px;
  border-radius: 999px;
  background: var(--c-akzent);
  transition: background var(--t-kurz) var(--ease);
}
.anrufen:hover { background: var(--c-akzent-hell); }
.anrufen__feld {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 19px;
  background: rgba(11, 46, 51, 0.12);
  color: var(--c-petrol);
}
.anrufen__feld svg { width: 19px; height: 19px; }
.anrufen__text { display: flex; flex-direction: column; min-width: 0; }
.anrufen__oben {
  font-size: 12.5px;
  font-weight: 800;
  line-height: 16px;       /* Figma: 130 % von 12,5 */
  color: rgba(11, 46, 51, 0.6);
}
.anrufen__text b {
  font-size: 23px;
  font-weight: 800;
  line-height: 28px;       /* Figma: 120 % von 23 */
  color: var(--c-petrol);
}

/* --- Notfallkasten · 1200 × 162, Rand 4 innen ---------------------------- */
.notfall {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px 30px 30px;
  border: 4px solid rgba(196, 69, 61, 0.6);
  border-radius: 20px;
  background: var(--c-weiss);
}
.notfall__titel {
  margin: 0;
  font-size: 19.5px;
  font-weight: 800;
  line-height: 30px;
  color: #c4453d;
}
.notfall__nummern { display: flex; gap: 24px; }
.notfall__nummer {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 0;
  flex: 1 1 0;
  min-width: 0;
}
.notfall__nummer > b {
  flex: none;
  font-size: 30px;
  font-weight: 800;
  line-height: 34px;       /* Figma: 112 % von 30 */
  color: #c4453d;
}
.notfall__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.notfall__text b {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: var(--c-petrol);
}
.notfall__text span {
  font-size: 14.5px;
  font-weight: 400;
  line-height: 22px;
  color: rgba(11, 46, 51, 0.65);
}



@media (max-width: 1100px) {

  /* --- Seitenkopf mobil · 390 × 557 -------------------------------------
     Gleiche Abweichungen wie beim Beratungsbesuch: Abstand 18, seitlich 24,
     Kurzantwort im Desktop-Maß, Knopf nicht über die volle Breite.
     Oben 96 statt der 40 aus Figma – dort liegt eine 60 hohe Leistenfläche
     im Fluss, unsere Leiste schwebt stattdessen darüber. */
  .seite--kontakt .seitenkopf { gap: 18px; padding: 96px 24px 48px; }
  .seite--kontakt .seitenkopf h1 { font-size: 32px; line-height: 34px; }
  .seite--kontakt .kurzantwort { width: auto; padding: 26px 28px; }
  .seite--kontakt .kurzantwort p { font-size: 18px; line-height: 31px; }
  .seite--kontakt .seitenkopf__aktionen { align-self: flex-start; }
  .seite--kontakt .seitenkopf__aktionen .knopf { width: auto; }

  /* --- Nachricht senden mobil · 390 × 1522 ------------------------------ */
  .nachricht { padding: 56px 22px 60px; }
  .nachricht__reihe { grid-template-columns: 1fr; gap: 20px; }

  .formkarte { gap: 16px; padding: 28px 22px 30px; }
  .formkarte__kopf h2 { font-size: 22px; line-height: 33px; }
  .formkarte__kopf p { font-size: 15px; line-height: 23px; }   /* Figma: Block 46 */

  .formkarte .feldreihe { flex-direction: column; gap: 16px; }
  .formkarte .feldreihe .feld { flex: 0 0 auto; }   /* in der Spalte kein Basis-0-Ausgleich */
  .formkarte .feld__eingabe--lang { height: 120px; }
  .datenschutz__text { font-size: 13.5px; line-height: 20px; }

  /* Terminhinweis mobil · 346 × 258, alles untereinander */
  .terminhinweis { flex-direction: column; align-items: stretch; gap: 14px; padding: 18px 18px 20px; }
  .terminhinweis__text b { font-size: 16.5px; line-height: 25px; }
  .terminhinweis__text > span { font-size: 14.5px; line-height: 22px; }
  .senden { align-self: stretch; justify-content: center; }

  .ruf__kopf { padding: 26px 22px 22px; }
  .ruf__kopf h2 { font-size: 21px; line-height: 32px; }
  .ruf__zeile { padding: 18px 22px; }
  .ruf__zeile--tel b { font-size: 22px; line-height: 26px; }   /* Figma: Textblock 48 statt 51 */

  /* --- Anfahrt mobil · 390 × 1004 --------------------------------------- */
  .anfahrt { gap: 26px; padding: 56px 22px 60px; }
  .anfahrt .marke { gap: 12px; font-size: 13px; line-height: 20px; }
  .anfahrt .marke__strich { width: 28px; }
  .anfahrt__kopf h2 { font-size: 30px; line-height: 33px; }
  .anfahrt__reihe { grid-template-columns: 1fr; gap: 20px; }

  .anschrift__zeile { gap: 16px; padding: 20px 22px; }
  .anschrift__zeile:first-child { padding-top: 26px; }
  .anschrift__zeile:last-child { padding-bottom: 26px; }
  .anschrift__text b { font-size: 17px; line-height: 26px; }
  .anschrift__text span { font-size: 14.5px; line-height: 22px; }

  .kartenfeld { height: 418px; }
  .knadel { right: 36px; top: 18px; }
  /* Figma setzt die Karte links auf 24 und rechts auf 30. Die sechs Pixel
     Unterschied sehen nach Unachtsamkeit aus, stehen aber so in der Datei. */
  .zustimmung { left: 24px; right: 30px; bottom: 24px; width: auto; }
  .zustimmung__route { padding: 16px 16px 16px 18px; }
  .zustimmung__lang { display: none; }
  .zustimmung__kurz { display: inline; }
  .zustimmung__titel { font-size: 17px; line-height: 26px; }
  .zustimmung__text { font-size: 14px; line-height: 21px; }

  /* --- Dringend mobil · 390 × 893 --------------------------------------- */
  .dringend { gap: 26px; padding: 56px 22px 60px; }
  .dringend .marke { gap: 12px; font-size: 13px; line-height: 20px; }
  .dringend .marke__strich { width: 28px; }
  .dringend__kopf h2 { font-size: 30px; line-height: 33px; }

  .dringend__reihe { flex-direction: column; align-items: stretch; gap: 20px; }
  .dringend__text p { font-size: 15.5px; line-height: 24px; }   /* Figma rundet 152 % auf 24 */
  .dringend__aktion { width: auto; }
  .dringend__hinweis { width: auto; }

  /* Der Knopf läuft mobil über die volle Breite, sein Inhalt steht mittig. */
  .anrufen { justify-content: center; }
  .anrufen__text b { font-size: 20px; line-height: 24px; }

  .notfall { gap: 16px; padding: 24px 22px 26px; }
  .notfall__titel { font-size: 18px; line-height: 27px; }
  .notfall__nummern { flex-direction: column; gap: 14px; }
  .notfall__nummer { flex: 0 0 auto; }
  .notfall__nummer > b { font-size: 26px; line-height: 29px; }
  .notfall__text b { font-size: 15.5px; line-height: 24px; }
  .notfall__text span { font-size: 14px; line-height: 21px; }
}


/* ==========================================================================
   ⑱ EINSATZGEBIETE · Figma 526:1172
   Desktop 526:489 (1440 × 4635) · Mobil 526:747 (390 × 7018)
   ========================================================================== */

/* --- Seitenkopf · 1440 × 756 --------------------------------------------
   Breiter als sonst: die Überschrift nimmt 900, die Kurzantwort 960.
   Darunter stehen die Orte als Marken in einer umbrechenden Reihe. */
.seite--einsatzgebiete .seitenkopf > h1 { max-width: 900px; }
.seite--einsatzgebiete .kurzantwort { width: 960px; }

/* --- Ortsmarken · Feld 1000 breit, Abstand 9 in beide Richtungen --------- */
.orte {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  width: 1000px;
  max-width: 100%;
  margin: 0;
}
.ort {
  display: inline-flex;
  align-items: center;
  padding: 11px 17px;
  border: 1px solid rgba(11, 46, 51, 0.12);
  border-radius: 999px;
  background: var(--c-weiss);
  font-size: 15px;
  font-weight: 700;
  line-height: 23px;       /* Figma: 150 % von 15, Marke 47 hoch */
  color: rgba(11, 46, 51, 0.82);
}


/* --- Regionen · Hamburg 1440 × 752, Stormarn 749 · Figma 528:13 / 530:13 --
   Polster 96/120/100/120, Abstand 40. Die weiße Karte trägt pro Bereich
   eine Zeile: links der Name in einer festen 150er Spalte, rechts die Orte
   als Marken in einer umbrechenden Reihe. */
.region {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 96px var(--rand-sektion) 100px;
  background: var(--c-mint);
}
.region__kopf { display: flex; flex-direction: column; gap: 14px; }
.region .marke {
  gap: 12px;
  font-size: 13px;
  font-weight: 800;
  line-height: 20px;
  letter-spacing: 0.08em;
}
.region__kopf h2 {
  font-size: 46px;
  font-weight: 800;
  line-height: 51px;       /* Figma: 110 % von 46 */
  letter-spacing: 0;       /* Figma: 0 %, nicht --ls-titel */
  color: var(--c-petrol);
}
.region__lead {
  margin: 0;
  width: 820px;
  max-width: 100%;
  font-size: 18px;
  font-weight: 400;
  line-height: 27px;       /* Figma: 152 % von 18 */
  color: rgba(11, 46, 51, 0.75);
}

.bereiche {
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  background: var(--c-weiss);
  overflow: hidden;
}
.bereich {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  padding: 26px 32px;
}
.bereich + .bereich { border-top: 1px solid rgba(11, 46, 51, 0.1); }
.bereich__name {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  width: 150px;
  margin: 0;
  font-size: 21px;
  font-weight: 800;
  line-height: 32px;
  color: var(--c-petrol);
}
.bereich__punkt {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c-akzent);
}
.bereich__orte {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
  min-width: 0;
  margin: 0;
}
.bort {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--c-mint);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 22px;       /* Figma: Marke 38 hoch */
  color: rgba(11, 46, 51, 0.8);
}



/* --- Tafel · Stormarn 1200 × 276 · Figma 530:13 -------------------------
   Zwei beschriftete Bänder mit je einem Markenfeld darunter. Das Band
   nennt links das Gebiet und rechts die Zahl der Orte. Die Marken des
   Umlands sind nur umrandet – sie gehören nicht zum festen Gebiet. */
.region--tafel { gap: 32px; }
.tafel {
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  background: var(--c-weiss);
  overflow: hidden;
}
.tafel__band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 15px 32px;
  background: var(--c-mint);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 19px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(11, 46, 51, 0.6);
}
.tafel__band span {
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(11, 46, 51, 0.45);
}
.tafel__band--dunkel {
  background: var(--c-petrol);
  color: var(--c-akzent);
}
.tafel__band--dunkel span { color: rgba(255, 255, 255, 0.6); }
.tafel__orte {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 24px 32px 26px;
}
/* Marken des Umlands: ohne Fläche, dafür mit Rand – dadurch 40 statt 38. */
.bort--umland {
  border: 1px solid rgba(11, 46, 51, 0.18);
  background: none;
  color: rgba(11, 46, 51, 0.62);
}

/* --- Hinweisleiste · 1200 × 60, Radius 16 -------------------------------- */
.gebietshinweis {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 18px 26px;
  border-radius: 16px;
  background: var(--c-weiss);
  font-size: 15.5px;
  font-weight: 400;
  line-height: 24px;
  color: rgba(11, 46, 51, 0.7);
}
.gebietshinweis__strich {
  flex: none;
  align-self: stretch;
  width: 3px;
  border-radius: 2px;
  background: var(--c-akzent);
}



/* --- Ortsseiten · 1440 × 673 · Figma 532:13 ------------------------------
   Einzige weiße Sektion der Seite. Zwei Gruppen, jede mit Kopfzeile und
   darunter den Kacheln zu den eigenen Ortsseiten. */
.ortsseiten {
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding: 96px var(--rand-sektion) 100px;
  background: var(--c-weiss);
}
.ortsseiten .marke {
  gap: 12px;
  font-size: 13px;
  font-weight: 800;
  line-height: 20px;
  letter-spacing: 0.08em;
}
.ogruppe { display: flex; flex-direction: column; gap: 14px; }
.ogruppe__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  font-size: 13.5px;
  font-weight: 800;
  line-height: 21px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(11, 46, 51, 0.5);
}
.ogruppe__kopf span {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(11, 46, 51, 0.4);
}
.okacheln {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0;
}
/* Die Breite trägt der Listenpunkt: ein calc(50%) am Verweis würde gegen
   den inhaltsbreiten <li> rechnen und nicht gegen die Reihe. */
.okacheln li { display: flex; width: 188px; }
.okachel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 16px 14px 16px 16px;
  border-radius: 14px;
  background: var(--c-mint);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 24px;       /* Figma: Kachel 56 hoch */
  color: var(--c-petrol);
  transition: background var(--t-kurz) var(--ease);
}
.okachel:hover { background: rgba(85, 199, 167, 0.28); }
.okachel__pfeil {
  flex: none;
  width: 16px;
  height: 16px;
  color: rgba(11, 46, 51, 0.45);
}



/* --- Ort fehlt · 1440 × 536 · Figma 534:13 -------------------------------
   Petrol-Band mit Polster 48 und Abstand 48. Links die Ansprache, rechts
   eine Karte auf leicht aufgehellter Fläche; beide mittig zueinander. */
.ortfehlt {
  padding: 92px var(--rand-sektion) 96px;
  background: var(--c-weiss);
}
.ortfehlt__band {
  display: flex;
  align-items: center;
  gap: 48px;
  padding: 48px;
  border-radius: 26px;
  background: var(--c-petrol);
}
.ortfehlt__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  flex: 1;
  min-width: 0;
}
.ortfehlt__text .marke {
  gap: 12px;
  font-size: 13px;
  font-weight: 800;
  line-height: 20px;
  letter-spacing: 0.08em;
  color: var(--c-akzent);
}
.ortfehlt__text h2 {
  font-size: 38px;
  font-weight: 800;
  line-height: 42px;       /* Figma: 110 % von 38 */
  letter-spacing: 0;
  color: var(--c-weiss);
}
.ortfehlt__text > p {
  margin: 0;
  font-size: 16.5px;
  font-weight: 400;
  line-height: 25px;       /* Figma: 152 % von 16,5 */
  color: rgba(255, 255, 255, 0.72);
}
.ortfehlt__aktionen {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 6px;
}
/* Die gefüllte Pille ist 58 hoch, die umrandete 60 – der Rand zählt in
   Figma zur Rahmenhöhe. Beide stehen mittig zueinander. */
.ofknopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 17px 22px 17px 26px;
  border-radius: 999px;
  background: var(--c-akzent);
  font-size: 16px;
  font-weight: 800;
  line-height: 24px;
  color: var(--c-petrol);
  transition: background var(--t-kurz) var(--ease), border-color var(--t-kurz) var(--ease);
}
.ofknopf:hover { background: var(--c-akzent-hell); }
.ofknopf--linie {
  padding: 17px 26px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: none;
  color: var(--c-weiss);
}
.ofknopf--linie:hover { border-color: var(--c-weiss); background: rgba(255, 255, 255, 0.08); }

.ortfehlt__karte {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: none;
  width: 380px;
  padding: 28px 28px 30px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
}
.ortfehlt__feld {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 21px;
  background: var(--c-akzent);
  color: var(--c-petrol);
}
.ortfehlt__feld svg { width: 21px; height: 21px; }
.ortfehlt__titel {
  margin: 0;
  font-size: 19.5px;
  font-weight: 800;
  line-height: 30px;
  color: var(--c-weiss);
}
.ortfehlt__lead {
  margin: 0;
  font-size: 15.5px;
  font-weight: 400;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.68);
}

/* --- Liste im dunklen Kasten · Figma 534:551 ----------------------------
   Steht dort, wo auf der Startseite das Rückrufformular sitzt. */
.klaerung {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}
.klaerung li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 21px;
  color: rgb(196, 224, 230);
}
.klaerung__haken {
  flex: none;
  width: 13px;
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
  color: var(--c-akzent);
}



/* ==========================================================================
   ⑲ ORTSSEITEN · Figma 537:1382 · Vorlage für alle sechzehn Orte
   Desktop 537:501 (1440 × 4218) · Mobil 537:872 (390 × 6241)
   Die wechselnden Felder stehen in _build/orte/daten.py, erzeugt werden die
   Seiten mit _build/orte/seiten.py.
   ========================================================================== */

/* --- Seitenkopf · 1440 × 729 -------------------------------------------- */
.seitenkopf--ort .kurzantwort { width: 900px; }
.seitenkopf--ort > h1 { max-width: 860px; }

/* --- Entfernungsplakette · 265 × 76, Radius 18 --------------------------- */
.entfernung {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 18px 30px 18px 22px;
  border-radius: 18px;
  background: var(--c-weiss);
}
.entfernung__feld {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: var(--c-mint);
  color: var(--c-petrol);
}
.entfernung__feld svg { width: 20px; height: 20px; }
.entfernung__text { display: flex; flex-direction: column; gap: 1px; }
.entfernung__label {
  font-size: 11.5px;
  font-weight: 800;
  line-height: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(11, 46, 51, 0.45);
}
.entfernung__text b {
  font-size: 18.5px;
  font-weight: 800;
  line-height: 23px;       /* Figma: 125 % von 18,5 */
  color: var(--c-petrol);
}



/* --- Vor Ort · 1440 × 652 · Figma 539:13 ---------------------------------
   Weiße Fläche. Links der Ortstext in fester 480er Spalte, rechts drei
   Mintkarten übereinander. */
.vorort {
  padding: 96px var(--rand-sektion) 100px;
  background: var(--c-weiss);
}
.vorort__reihe { display: flex; align-items: flex-start; gap: 56px; }
.vorort__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  flex: none;
  width: 480px;
}
.vorort__text .marke {
  gap: 12px;
  font-size: 13px;
  font-weight: 800;
  line-height: 20px;
  letter-spacing: 0.08em;
}
.vorort__text h2 {
  font-size: 38px;
  font-weight: 800;
  line-height: 42px;       /* Figma: 110 % von 38 */
  letter-spacing: 0;
  color: var(--c-petrol);
}
.vorort__text > p {
  margin: 0;
  font-size: 17px;
  font-weight: 400;
  line-height: 26px;
  color: rgba(11, 46, 51, 0.75);
}
.vorort__aktionen {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 4px;
}
/* Konturfassung auf hellem Grund – das Gegenstück zu .ofknopf--linie,
   die auf dem Petrol-Band steht. */
.ofknopf--kontur {
  padding: 17px 26px;
  border: 1px solid rgba(11, 46, 51, 0.25);
  background: none;
  color: var(--c-petrol);
}
.ofknopf--kontur:hover { border-color: var(--c-petrol); background: var(--c-mint); }

.ovkarten {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.ovkarte {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 26px 26px;
  border-radius: 18px;
  background: var(--c-mint);
}
.ovkarte b {
  font-size: 19.5px;
  font-weight: 700;
  line-height: 30px;
  color: var(--c-petrol);
}
.ovkarte p {
  margin: 0;
  font-size: 15.5px;
  font-weight: 400;
  line-height: 24px;
  color: rgba(11, 46, 51, 0.72);
}



/* --- Stadtteile · 1440 × 561 · Figma 541:13 -------------------------------
   Die Marke „JE ORT" neben der Überschrift ist eine Anmerkung des Entwurfs
   („Die mit JE ORT markierten Felder wechseln pro Ortsseite") und steht
   deshalb nicht auf der Seite. */
.stadtteile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  padding: 92px var(--rand-sektion) 96px;
  background: var(--c-mint);
}
.stadtteile__kopf {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  align-self: stretch;
}
.stadtteile__kopf .marke,
.oleistungen .marke {
  gap: 12px;
  font-size: 13px;
  font-weight: 800;
  line-height: 20px;
  letter-spacing: 0.08em;
}
.stadtteile__kopf h2 {
  font-size: 44px;
  font-weight: 800;
  line-height: 48px;       /* Figma: 110 % von 44 */
  letter-spacing: 0;
  color: var(--c-petrol);
}
.stadtteile__lead {
  margin: 0;
  width: 820px;
  max-width: 100%;
  font-size: 18px;
  font-weight: 400;
  line-height: 27px;
  color: rgba(11, 46, 51, 0.75);
}

.oteile { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; align-self: stretch; }
.oteil {
  display: inline-flex;
  align-items: center;
  padding: 14px 22px;
  border-radius: 999px;
  background: var(--c-weiss);
  font-size: 17px;
  font-weight: 700;
  line-height: 26px;       /* Figma: Pille 54 hoch */
  color: rgba(11, 46, 51, 0.9);
}

.nachbarschaft {
  display: flex;
  align-items: center;
  gap: 14px;
  align-self: stretch;
}
.nachbarschaft__label {
  flex: none;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 24px;
  color: rgba(11, 46, 51, 0.55);
}
.onachbarn { display: flex; flex-wrap: wrap; gap: 9px; margin: 0; flex: 1; min-width: 0; }
.onachbar {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 12px 10px 16px;
  border: 1px solid rgba(11, 46, 51, 0.2);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  line-height: 23px;       /* Figma: Pille 45 hoch */
  color: rgba(11, 46, 51, 0.8);
  transition: border-color var(--t-kurz) var(--ease), background var(--t-kurz) var(--ease);
}
.onachbar svg { flex: none; width: 15px; height: 15px; color: var(--c-akzent); }
.onachbar:hover { border-color: var(--c-akzent); background: var(--c-weiss); }

/* Textverweis mit Pfeil, gleich in „Stadtteile" und „Leistungen". */
.weiterlink {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-top: 4px;
  font-size: 16px;
  font-weight: 800;
  line-height: 24px;
  color: rgba(11, 46, 51, 0.9);
}
.weiterlink__pfeil { flex: none; width: 16px; height: 16px; color: rgba(11, 46, 51, 0.7); }
/* In „Stadtteile" gibt Figma dem Verweis 4 Polster oben, in „Leistungen" nicht. */
.oleistungen .weiterlink { padding-top: 0; }
.weiterlink:hover { color: var(--c-akzent-dunkel); }
.weiterlink:hover .weiterlink__pfeil { color: var(--c-akzent-dunkel); }

/* --- Leistungen auf der Ortsseite · 1440 × 587 · Figma 541:360 ----------- */
.oleistungen {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 36px;
  padding: 92px var(--rand-sektion) 96px;
  background: var(--c-mint);
}
.lkacheln {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-self: stretch;
}
.lkachel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 30px 28px 32px;
  border-radius: 20px;
  background: var(--c-weiss);
  transition: box-shadow var(--t-kurz) var(--ease);
}
.lkachel:hover { box-shadow: 0 14px 34px -12px rgba(11, 46, 51, 0.18); }
.lkachel__feld {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  background: var(--c-mint);
  color: var(--c-petrol);
}
.lkachel__feld svg { width: 26px; height: 26px; }
.lkachel b {
  font-size: 21px;
  font-weight: 700;
  line-height: 32px;
  color: var(--c-petrol);
}
.lkachel > span:last-child {
  font-size: 15.5px;
  font-weight: 400;
  line-height: 24px;
  color: rgba(11, 46, 51, 0.72);
}



/* ==========================================================================
   ⑳ PFLEGEWISSEN · Figma 544:1103
   Desktop 544:501 (1440 × 4270) · Mobil 544:762 (390 × 6943)
   ========================================================================== */

/* --- Seitenkopf · 1440 × 633 -------------------------------------------- */
.seitenkopf--wissen .kurzantwort { width: 900px; }
.seitenkopf--wissen > h1 { max-width: 860px; }

/* --- Einstieg · 1440 × 837 · Figma 549:13 --------------------------------
   Drei Wege nebeneinander. Die Linie verbindet die Mittelpunkte der ersten
   und der letzten Ziffer (Figma: 832 breit bei 22 von links). */
.einstieg {
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding: 96px var(--rand-sektion) 100px;
  background: var(--c-weiss);
}
.einstieg__kopf { display: flex; flex-direction: column; gap: 14px; }
.einstieg .marke {
  gap: 12px;
  font-size: 13px;
  font-weight: 800;
  line-height: 20px;
  letter-spacing: 0.08em;
}
.einstieg__kopf h2 {
  font-size: 46px;
  font-weight: 800;
  line-height: 51px;       /* Figma: 110 % von 46 */
  letter-spacing: 0;
  color: var(--c-petrol);
}
.einstieg__lead {
  margin: 0;
  width: 880px;
  max-width: 100%;
  font-size: 18px;
  font-weight: 400;
  line-height: 27px;
  color: rgba(11, 46, 51, 0.75);
}

.pfade {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  align-items: start;
}
/* Sie läuft hinter den Ziffern von Mitte zu Mitte: 22 von links, 21 von oben. */
.pfade__linie {
  position: absolute;
  left: 22px;
  /* Sie endet in der Mitte der dritten Ziffer, nicht am Spaltenrand:
     rechts bleibt eine Spaltenbreite minus die halbe Ziffer stehen. */
  right: calc((100% - 96px) / 3 - 22px);
  top: 21px;
  height: 2px;
  border-radius: 1px;
  background: rgba(85, 199, 167, 0.45);
}
.pfad {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}
.pfad__nummer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 22px;
  background: var(--c-mint);
  font-size: 19px;
  font-weight: 800;
  line-height: 29px;
  /* Figma setzt die Ziffer auf 80 % Petrol. Auf Wunsch steht sie hier voll
     deckend – die abgeblendete Fassung wirkte im Kreis zu schwach. */
  color: var(--c-petrol);
}
.pfad b {
  font-size: 23px;
  font-weight: 800;
  line-height: 35px;
  color: var(--c-petrol);
}
.pfad p {
  margin: 0;
  font-size: 15.5px;
  font-weight: 400;
  line-height: 24px;
  color: rgba(11, 46, 51, 0.72);
}
.pfadliste {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding-top: 2px;
}
.pfadpille {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 12px 10px 16px;
  border-radius: 999px;
  background: var(--c-mint);
  font-size: 15px;
  font-weight: 700;
  line-height: 23px;       /* Figma: Pille 43 hoch */
  color: rgba(11, 46, 51, 0.9);
  transition: background var(--t-kurz) var(--ease);
}
.pfadpille svg { flex: none; width: 15px; height: 15px; color: var(--c-akzent); }
.pfadpille:hover { background: rgba(85, 199, 167, 0.28); }

/* --- Hinweisleiste ohne Euro-Beträge · 1200 × 82 ------------------------ */
.keinbetrag {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0;
  padding: 18px 26px;
  border: 1px solid rgba(11, 46, 51, 0.14);
  border-radius: 16px;
  font-size: 14.5px;
  font-weight: 400;
  line-height: 22px;
  color: rgba(11, 46, 51, 0.65);
}
.keinbetrag__strich {
  flex: none;
  align-self: stretch;
  width: 3px;
  border-radius: 2px;
  background: var(--c-akzent);
}



/* --- Ratgeber · 1440 × 1673 · Figma 551:13 -------------------------------
   Drei Gruppen, jede mit Kopfzeile und Karten zu 288 – vier je Zeile. */
.ratgeber {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 96px var(--rand-sektion) 100px;
  background: var(--c-mint);
}
.ratgeber .marke {
  gap: 12px;
  font-size: 13px;
  font-weight: 800;
  line-height: 20px;
  letter-spacing: 0.08em;
}
.ratgeber .einstieg__kopf h2 {
  font-size: 46px;
  line-height: 51px;
  letter-spacing: 0;
}
.ratgeber__lead {
  margin: 0;
  width: 860px;
  max-width: 100%;
  font-size: 18px;
  font-weight: 400;
  line-height: 27px;
  color: rgba(11, 46, 51, 0.75);
}
.rgruppe { display: flex; flex-direction: column; gap: 14px; }
.rgruppe__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  font-size: 13.5px;
  font-weight: 800;
  line-height: 21px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(11, 46, 51, 0.5);
}
.rgruppe__kopf span {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(11, 46, 51, 0.4);
}
/* 288 × 4 + 16 × 3 = 1200. Die Karten stehen oben bündig, ihre Höhe kommt
   aus dem Text – Figma zeichnet 172, 195 und 218. */
.rkarten {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: start;
}
.rkarte {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 24px;
  border-radius: 18px;
  background: var(--c-weiss);
  transition: box-shadow var(--t-kurz) var(--ease);
}
.rkarte:hover { box-shadow: 0 14px 34px -12px rgba(11, 46, 51, 0.18); }
.rkarte b {
  font-size: 18.5px;
  font-weight: 700;
  line-height: 28px;
  color: var(--c-petrol);
}
.rkarte__text {
  font-size: 15px;
  font-weight: 400;
  line-height: 23px;
  color: rgba(11, 46, 51, 0.7);
}
.rkarte__mehr {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
  font-size: 15px;
  font-weight: 800;
  line-height: 22px;
  color: var(--c-akzent-dunkel);
}
.rkarte__mehr svg { flex: none; width: 15px; height: 15px; }



/* ==========================================================================
   ㉑ RATGEBER · Figma 554:1139 · Vorlage für Ratgeber- und Leistungsseiten
   Erzeugt aus _build/ratgeber/vorlage.py über seiten.py.
   ========================================================================== */

/* --- Inhaltsabschnitt · Figma 561:13 / 561:52 / 561:77 -------------------
   Polster 88/120/92/120, Abstand 28. Die Flächen wechseln weiß / mint /
   weiß – das entscheidet die Reihenfolge, nicht mehr der sand-Schalter. */
.abschnitt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  padding: 88px var(--rand-sektion) 92px;
  background: var(--c-weiss);
}
.abschnitt--mint { background: var(--c-mint); }
.abschnitt__kopf {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  align-self: stretch;
}
.abschnitt .marke {
  gap: 12px;
  font-size: 13px;
  font-weight: 800;
  line-height: 22px;       /* Figma: 166 % von 13 */
  letter-spacing: 0.08em;
}
.abschnitt__kopf h2 {
  font-size: 40px;
  font-weight: 800;
  line-height: 45px;       /* Figma: 112 % von 40 */
  letter-spacing: 0;
  color: var(--c-petrol);
}
.abschnitt__text {
  margin: 0;
  width: 820px;
  max-width: 100%;
  font-size: 17.5px;
  font-weight: 400;
  line-height: 29px;       /* Figma: 166 % von 17,5 */
  color: rgba(11, 46, 51, 0.8);
}
.abschnitt__text em { font-style: italic; }
.abschnitt__text a,
.punktkarte a { text-decoration: underline; text-underline-offset: 2px; }

/* --- Hinweiskasten · 880 breit, Radius 16 ------------------------------- */
.abschnitt__hinweis {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 0;
  width: 880px;
  max-width: 100%;
  padding: 22px 26px;
  border-radius: 16px;
  background: var(--c-mint);
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;       /* Figma: 160 % von 16 */
  color: rgba(11, 46, 51, 0.75);
}
.abschnitt--mint .abschnitt__hinweis { background: var(--c-weiss); }
.abschnitt__strich {
  flex: none;
  align-self: stretch;
  width: 3px;
  border-radius: 2px;
  background: var(--c-akzent);
}

/* --- Faktentafel · 1200 breit (.tafel gehört der Stormarn-Tafel), Kopfzeile auf Petrol --------------------------- */
.faktenfeld {
  align-self: stretch;
  border-radius: 20px;
  background: var(--c-weiss);
  overflow: hidden;
}
.faktentafel { width: 100%; border-collapse: collapse; text-align: left; }
.faktentafel thead tr { background: var(--c-petrol); }
.faktentafel thead th {
  padding-top: 16px;
  padding-bottom: 16px;
  font-size: 12px;
  font-weight: 800;
  line-height: 19px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}
/* Figma: Inhalt 320 · Rest · 130, aussen 30 Polster, dazwischen je 14.
   Die Breite muss das Polster einschliessen: 30 + 320 + 14 = 364. */
.faktentafel th, .faktentafel td { padding-left: 14px; padding-right: 14px; }
/* Erste und letzte Zelle der Zeile – unabhängig davon, ob sie th oder td ist.
   Mit td:first-child träfe es in einer Zeile, die mit th beginnt, die zweite
   Zelle: der Kopf stünde dann nicht mehr über seiner Spalte. */
.faktentafel tr > :first-child { width: 364px; padding-left: 30px; }
.faktentafel tr > :last-child { width: 174px; padding-right: 30px; }
.faktentafel tbody th,
.faktentafel tbody td {
  padding-top: 18px;
  padding-bottom: 18px;
  vertical-align: top;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  color: rgba(11, 46, 51, 0.75);
}
.faktentafel tbody th { font-size: 16.5px; font-weight: 700; color: var(--c-petrol); }
.faktentafel tbody td:last-child { font-size: 16.5px; font-weight: 800; color: rgba(11, 46, 51, 0.8); }
.faktentafel tbody tr + tr th,
.faktentafel tbody tr + tr td { border-top: 1px solid rgba(11, 46, 51, 0.1); }
/* Eine Zeile darf hervorgehoben sein – Figma legt sie auf Mint. */
.faktentafel__hervor th, .faktentafel__hervor td { background: rgba(235, 251, 245, 0.7); }
.faktentafel__hervor td:last-child { color: var(--c-petrol); }

/* --- Punktkarten · 880 breit, Haken im Mintkreis ------------------------ */
.punktkarten {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  width: 880px;
  max-width: 100%;
}
/* Der Text steht hier ohne eigenes Element direkt im Flexkasten. Ein solcher
   Textabsatz lässt sich nicht unter seine Mindestbreite drücken – ein Wort wie
   „Krankenhausentlassungsbriefe" stand deshalb mobil über die Karte hinaus.
   „anywhere" senkt die Mindestbreite und bricht nur dort, wo es sonst nicht
   passt. */
.punktkarte { overflow-wrap: anywhere; }
.punktkarte {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 14px;
  background: var(--c-weiss);
  font-size: 16.5px;
  font-weight: 400;
  line-height: 27px;       /* Figma: 166 % von 16,5 */
  color: var(--c-petrol);
}
.punktkarte b { font-weight: 700; }
.punktkarte__haken {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  border-radius: 13px;
  background: var(--c-mint);
  font-size: 13px;
  font-weight: 700;
  line-height: 22px;
  color: rgba(11, 46, 51, 0.8);
}
.abschnitt--mint .punktkarte__haken { background: rgba(85, 199, 167, 0.22); }

/* --- Wissenskarten · drei je Zeile, 388 breit --------------------------- */
.wkarten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-self: stretch;
  align-items: start;
}
.wkarte {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 26px 28px;
  border-radius: 18px;
  background: var(--c-weiss);
}
/* Sonderfall-Karte: Mintfläche mit Kontur statt weiß (Figma 561:74). */
.wkarte--rand {
  border: 1px solid rgba(11, 46, 51, 0.16);
  background: var(--c-mint);
}
.abschnitt--mint .wkarte--rand { background: var(--c-mint); }
.wkarte b {
  font-size: 20px;
  font-weight: 800;
  line-height: 32px;       /* Figma: 158 % von 20 */
  color: var(--c-petrol);
}
.wkarte span {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
  color: rgba(11, 46, 51, 0.72);
}



/* --- Weiterlesen · 1440 × 317 · Figma 562:682 ----------------------------
   Vier Karten zu 288 in einer umbrechenden Reihe, Abstand 16. */
.weiterlesen {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 72px var(--rand-sektion) 76px;
  background: var(--c-mint);
}
.weiterlesen .marke {
  gap: 12px;
  font-size: 13px;
  font-weight: 800;
  line-height: 18px;
  letter-spacing: 0.08em;
}
.lesekarten {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-self: stretch;
  align-items: start;
  margin: 0;
}
.lesekarte {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  padding: 20px;
  border-radius: 16px;
  background: var(--c-weiss);
  transition: box-shadow var(--t-kurz) var(--ease);
}
.lesekarte:hover { box-shadow: 0 12px 30px -12px rgba(11, 46, 51, 0.18); }
.lesekarte b {
  font-size: 16.5px;
  font-weight: 700;
  line-height: 26px;       /* Figma: 160 % von 16,5 */
  color: var(--c-petrol);
}
.lesekarte__mehr {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-size: 14.5px;
  font-weight: 800;
  line-height: 23px;
  color: var(--c-akzent);
}
.lesekarte__mehr svg { flex: none; width: 15px; height: 15px; }



/* --- Tafel mobil als Umschalter · Figma 561:112 --------------------------
   Statt einer rollenden Tabelle zeigt Figma dort Pillen und darunter eine
   Karte für die gewählte Zeile. Beide Fassungen stehen im Markup. */
.tafelwahl { display: none; }
.tafelpillen { display: flex; flex-wrap: wrap; gap: 8px; }
.tafelpille {
  padding: 10px 16px;
  border: 1px solid rgba(11, 46, 51, 0.14);
  border-radius: 999px;
  background: var(--c-weiss);
  font: inherit;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 22px;       /* Figma: Pille 44 hoch */
  color: rgba(11, 46, 51, 0.65);
  cursor: pointer;
  transition: background var(--t-kurz) var(--ease), color var(--t-kurz) var(--ease),
              border-color var(--t-kurz) var(--ease);
}
/* Nur die nicht gewählten Pillen reagieren aufs Überfahren. .tafelpille:hover
   ist spezifischer als .tafelpille--an und hätte sonst die weiße Schrift der
   gewählten Pille überschrieben – auf Petrol ergibt das Schwarz auf Schwarz.
   Auf Tippgeräten bleibt der Überfahren-Zustand nach der Berührung stehen,
   die gewählte Pille wäre also bis zur nächsten Berührung unlesbar. */
.tafelpille:not(.tafelpille--an):hover {
  border-color: var(--c-akzent);
  color: var(--c-petrol);
}
.tafelpille--an {
  border-color: var(--c-petrol);
  background: var(--c-petrol);
  color: var(--c-weiss);
}
.tafelkarte[hidden] { display: none; }
.tafelkarte {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 26px 24px 28px;
  border-radius: 20px;
  background: var(--c-weiss);
}
.tafelkarte__kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  line-height: 34px;       /* Figma: 155 % von 22 */
  color: var(--c-petrol);
}
.tafelkarte__kopf b { flex: 1; min-width: 0; font-weight: 800; }
.tafelkarte__wert {
  flex: none;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--c-mint);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 22px;
  color: var(--c-petrol);
}
.tafelkarte__block { display: flex; flex-direction: column; gap: 4px; }
.tafelkarte__block span {
  font-size: 11.5px;
  font-weight: 800;
  line-height: 18px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(11, 46, 51, 0.42);
}
.tafelkarte__block p {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 25px;       /* Figma: 155 % von 16 */
  color: rgba(11, 46, 51, 0.82);
}



/* ==========================================================================
   ㉒ LEISTUNGEN · Figma 568:1167
   Desktop 568:501 (1440 × 5439) · Mobil 568:776 (390 × 8272)
   ========================================================================== */

/* --- Seitenkopf · 1440 × 633 · Kurzantwort hier 920 --------------------- */
.seitenkopf--leistungen .kurzantwort { width: 920px; }
.seitenkopf--leistungen > h1 { max-width: 900px; }

/* --- Überblick · 1440 × 954 · Figma 573:13 -------------------------------
   Sechs Zeilen in einer Mintfläche. Der Titel steht in einer festen 260er
   Spalte, damit die Beschreibungen untereinander fluchten. */
.uebersicht {
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding: 96px var(--rand-sektion) 100px;
  background: var(--c-weiss);
}
.uebersicht .marke {
  gap: 12px;
  font-size: 13px;
  font-weight: 800;
  line-height: 20px;
  letter-spacing: 0.08em;
}
.uebersicht__lead {
  margin: 0;
  width: 820px;
  max-width: 100%;
  font-size: 18px;
  font-weight: 400;
  line-height: 27px;
  color: rgba(11, 46, 51, 0.75);
}
.lliste {
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  background: var(--c-mint);
  overflow: hidden;
}
.lzeile {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px 30px;
  transition: background var(--t-kurz) var(--ease);
}
.lzeile + .lzeile { border-top: 1px solid rgba(11, 46, 51, 0.1); }
.lzeile:hover { background: rgba(255, 255, 255, 0.55); }
.lzeile__feld {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 23px;
  background: var(--c-weiss);
  color: var(--c-petrol);
}
.lzeile__feld svg { width: 23px; height: 23px; }
/* Auf dem Desktop reicht der Block die beiden Kinder durch, damit Titel und
   Beschreibung direkte Flexkinder der Zeile bleiben. Mobil stapelt er sie. */
.lzeile__block { display: contents; }
.lzeile__titel {
  flex: none;
  width: 260px;
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;       /* Figma: 152 % von 20 */
  color: var(--c-petrol);
}
.lzeile__text {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: rgba(11, 46, 51, 0.72);
}
.lzeile__pfeil {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--c-akzent);
}



/* --- Bausteine · 1440 × 1706 · Figma 576:206 -----------------------------
   Vier Mintkarten. Das Kopfband ist ein dunkler Verlauf mit zwei weich
   gezeichneten Lichtflecken, darüber eine Glasscheibe mit Hintergrund-
   unschärfe – Figmas Ebenen-Unschärfe 95 und 77 entspricht in CSS der
   Hälfte, die Hintergrundunschärfe 26 ebenfalls. */
.bausteine {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 92px var(--rand-sektion) 96px;
  background: var(--c-weiss);
}
.baustein {
  border-radius: 24px;
  background: var(--c-mint);
  overflow: hidden;
}
.baustein__band {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 86px;
  padding: 22px 34px;
  overflow: hidden;
  /* Figma: Verlauf von #0e383d nach #082429, Achse gut 1,5 Grad geneigt. */
  background: linear-gradient(91.5deg, #0e383d, #082429);
}
.baustein__fleck {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.baustein__fleck--mint {
  left: 336px; top: -95px;
  width: 210px; height: 210px;
  background: rgba(85, 199, 167, 0.28);
  filter: blur(47.5px);
}
.baustein__fleck--lavendel {
  left: 744px; top: 26px;
  width: 170px; height: 170px;
  background: rgba(140, 140, 217, 0.15);
  filter: blur(38.5px);
}
.baustein__scheibe {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(13px);
  -webkit-backdrop-filter: blur(13px);
  pointer-events: none;
}
.baustein__symbol {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 21px;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  color: var(--c-weiss);
}
.baustein__symbol svg { width: 21px; height: 21px; }
.baustein__band h3 {
  position: relative;
  flex: 1;
  min-width: 0;
  font-size: 24px;
  font-weight: 800;
  line-height: 37px;       /* Figma: 155 % von 24 */
  letter-spacing: 0;
  color: var(--c-weiss);
}
.baustein__norm {
  position: relative;
  flex: none;
  padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.13);
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
  color: rgba(255, 255, 255, 0.92);
}
/* Figma setzt die Normpille mobil nicht ins Kopfband, sondern in den Textblock
   zwischen Absatz und Verweis. Beide Pillen stehen im Markup, je Breite ist
   genau eine sichtbar. */
.baustein__norm--mobil { display: none; }

.baustein__inhalt {
  display: flex;
  align-items: flex-start;
  gap: 48px;
  padding: 32px 34px 34px;
}
.baustein__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  flex: 1;
  min-width: 0;
}
.baustein__text p {
  margin: 0;
  font-size: 17.5px;
  font-weight: 400;
  line-height: 27px;       /* Figma: 155 % von 17,5 */
  color: rgba(11, 46, 51, 0.78);
}
.baustein__mehr {
  gap: 9px;
  padding-top: 0;
  font-size: 16.5px;
  line-height: 26px;
}
.baustein__mehr .weiterlink__pfeil { color: var(--c-petrol); }

.bpunkte {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: none;
  width: 460px;
  margin: 0;
  padding: 26px 26px 28px;
  border-radius: 18px;
  background: var(--c-weiss);
}
.bpunkte li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16.5px;
  font-weight: 400;
  line-height: 26px;       /* Figma: 155 % von 16,5 */
  color: rgba(11, 46, 51, 0.82);
}
.bpunkt__haken {
  flex: none;
  width: 16px;
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
  color: var(--c-akzent);
}



/* --- Wer zahlt was · 1440 × 977 · Figma 578:292 --------------------------
   Petrolfläche. Die drei Karten stehen oben bündig und sind unterschiedlich
   hoch – ihre Höhe kommt aus dem Inhalt, nicht aus der Reihe. */
.zahlt {
  display: flex;
  flex-direction: column;
  gap: 44px;
  padding: 96px var(--rand-sektion) 100px;
  background: var(--c-petrol);
}
/* Ein Raster für beide Breiten: der Glaskreis liegt rechts und überspannt
   auf dem Desktop alle drei Zeilen, mobil nur Marke und Titel – dort rückt
   der Lauftext darunter über die volle Breite. */
.zahlt__kopfreihe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "marke   scheibe"
    "titel   scheibe"
    "lead    scheibe";
  align-items: center;
  column-gap: 48px;
  row-gap: 14px;
}
.zahlt__marke { grid-area: marke; align-self: end; }
.zahlt__kopfreihe h2 { grid-area: titel; }
.zahlt__lead { grid-area: lead; align-self: start; }
.zahlt__scheibe { grid-area: scheibe; }
.zahlt__marke {
  font-size: 13px;
  font-weight: 800;
  line-height: 20px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-akzent);
}
.zahlt__kopf h2 {
  font-size: 42px;
  font-weight: 800;
  line-height: 46px;       /* Figma: 110 % von 42 */
  letter-spacing: 0;
  color: var(--c-weiss);
}
.zahlt__lead {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  color: rgba(255, 255, 255, 0.75);
}
.zahlt__scheibe {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 124px;
  height: 124px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 62px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--c-weiss);
}
.zahlt__scheibe svg { width: 60px; height: 60px; }

.zahler-reihe {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: start;
}
.zahler {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 26px 26px 28px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.09);
}
/* „Ihr Anteil" steht eine Stufe zurückhaltender – es ist der Topf, der im
   Regelfall leer bleibt. */
.zahler--leise {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
}
.zahler__kopf { display: flex; flex-direction: column; gap: 5px; }
.zahler__kopf b {
  font-size: 22px;
  font-weight: 800;
  line-height: 34px;
  color: var(--c-weiss);
}
.zahler__kopf span {
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
  color: rgba(85, 199, 167, 0.95);
}
.zahler__block {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.zahler__zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;          /* Figma: Zeilenabstand 8, Spaltenabstand 10 */
  margin: 0;
}
.zahler__zeile b {
  font-size: 17px;
  font-weight: 700;
  line-height: 26px;
  color: rgba(255, 255, 255, 0.95);
}
.zahler__norm {
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 14px;
  font-weight: 700;
  line-height: 21px;       /* Figma: Pille 39 hoch */
  color: rgba(255, 255, 255, 0.95);
}
.zahler__text {
  margin: 0;
  font-size: 15.5px;
  font-weight: 400;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.66);
}
.zahler__fuss {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
  color: rgba(85, 199, 167, 0.9);
}



@media (max-width: 1100px) {

  /* --- Seitenkopf mobil · 390 × 974 ------------------------------------
     Wie beim Beratungsbesuch: Abstand 18, seitlich 24, Kurzantwort im
     Desktop-Maß, Knopf nicht über die volle Breite. Oben 96 statt der 40
     aus Figma – dort liegt die Leiste im Fluss, unsere schwebt. */
  .seite--einsatzgebiete .seitenkopf { gap: 18px; padding: 96px 24px 48px; }
  .seite--einsatzgebiete .seitenkopf h1 { font-size: 32px; line-height: 34px; }
  .seite--einsatzgebiete .kurzantwort { width: auto; padding: 26px 28px; }
  .seite--einsatzgebiete .kurzantwort p { font-size: 18px; line-height: 31px; }
  .seite--einsatzgebiete .seitenkopf__aktionen { align-self: flex-start; }
  .seite--einsatzgebiete .seitenkopf__aktionen .knopf { width: auto; }

  .orte { width: auto; align-self: stretch; }
  .ort { padding: 9px 14px; font-size: 14px; line-height: 21px; }

  /* --- Regionen mobil · Hamburg 390 × 1215 ------------------------------ */
  .region { gap: 26px; padding: 56px 22px 60px; }
  .region .marke { gap: 12px; font-size: 13px; line-height: 20px; }
  .region .marke__strich { width: 28px; }
  .region__kopf h2 { font-size: 30px; line-height: 33px; }
  .region__lead { width: auto; font-size: 16px; line-height: 24px; }

  /* Der Bereichsname steht mobil über den Marken, nicht daneben. */
  .bereich { flex-direction: column; gap: 12px; padding: 22px; }
  .bereich__name { width: auto; font-size: 19px; line-height: 29px; }
  .bort { font-size: 14px; line-height: 21px; }

  /* --- Tafel mobil · 346 × 532 ------------------------------------------ */
  .region--tafel { gap: 24px; }
  .tafel__band { padding: 15px 22px; }
  .tafel__orte { padding: 20px 22px 22px; }
  .gebietshinweis { padding: 18px 20px; font-size: 14.5px; line-height: 22px; }

  /* --- Ortsseiten mobil · 390 × 951 · zwei Kacheln je Zeile ------------- */
  .ortsseiten { gap: 26px; padding: 56px 22px 60px; }
  .ortsseiten .marke { gap: 12px; font-size: 13px; line-height: 20px; }
  .ortsseiten .marke__strich { width: 28px; }
  .ogruppe__kopf { font-size: 13px; line-height: 20px; }
  .okacheln { gap: 10px; }
  .okacheln li { width: calc(50% - 5px); }

  /* --- Ortsseiten mobil · Seitenkopf 390 × 743 -------------------------- */
  .seitenkopf--ort { gap: 18px; padding: 96px 24px 48px; }
  .seitenkopf--ort h1 { font-size: 32px; line-height: 34px; }
  .seitenkopf--ort .kurzantwort { width: auto; padding: 26px 28px; }
  .seitenkopf--ort .kurzantwort p { font-size: 18px; line-height: 31px; }
  .seitenkopf--ort .seitenkopf__aktionen { align-self: flex-start; }
  .seitenkopf--ort .seitenkopf__aktionen .knopf { width: auto; }
  .entfernung { padding: 16px 24px 16px 18px; }
  .entfernung__text b { font-size: 17px; line-height: 21px; }

  /* --- Vor Ort mobil · 390 × 1081 --------------------------------------- */
  .vorort { padding: 56px 22px 60px; }
  .vorort__reihe { flex-direction: column; align-items: stretch; gap: 24px; }
  .vorort__text { width: auto; align-items: stretch; }
  /* Figma setzt die Überschrift mobil auf 152 % statt der 110 % vom Desktop –
     dieselbe Unachtsamkeit wie bei „Ort fehlt", hier trotzdem 1:1. */
  .vorort__text h2 { font-size: 29px; line-height: 44px; }
  .vorort__text > p { font-size: 16px; line-height: 24px; }
  .vorort__aktionen { flex-direction: column; align-items: stretch; gap: 12px; }
  .ovkarte { padding: 20px 20px 22px; }
  .ovkarte b { font-size: 18px; line-height: 27px; }
  .ovkarte p { font-size: 15px; line-height: 23px; }

  /* --- Stadtteile mobil · 390 × 607 ------------------------------------- */
  .stadtteile { gap: 24px; padding: 56px 22px 60px; }
  .stadtteile__kopf .marke,
  .oleistungen .marke { gap: 12px; font-size: 13px; line-height: 20px; }
  .stadtteile .marke__strich,
  .oleistungen .marke__strich { width: 28px; }
  /* Figma setzt die Überschrift mobil auf 152 % statt 110 % – wie in den
     übrigen Sektionen dieser Vorlage. */
  .stadtteile__kopf h2 { font-size: 29px; line-height: 44px; }
  .stadtteile__lead { width: auto; font-size: 16px; line-height: 24px; }
  .oteil { padding: 12px 18px; font-size: 15.5px; line-height: 24px; }
  .nachbarschaft { flex-direction: column; align-items: flex-start; gap: 10px; }
  .nachbarschaft__label { font-size: 15px; line-height: 23px; }
  .weiterlink { font-size: 15.5px; }

  /* --- Leistungen mobil · 390 × 951 ------------------------------------- */
  .oleistungen { gap: 26px; padding: 56px 22px 60px; }
  .lkacheln { grid-template-columns: 1fr; gap: 14px; }
  .lkachel { padding: 24px 22px 26px; }
  .lkachel b { font-size: 19px; line-height: 29px; }
  .lkachel > span:last-child { font-size: 15px; line-height: 23px; }

  /* --- Pflegewissen mobil ----------------------------------------------- */
  .seitenkopf--wissen { gap: 18px; padding: 96px 24px 48px; }
  .seitenkopf--wissen h1 { font-size: 32px; line-height: 34px; }
  .seitenkopf--wissen .kurzantwort { width: auto; padding: 26px 28px; }
  .seitenkopf--wissen .kurzantwort p { font-size: 18px; line-height: 31px; }
  .seitenkopf--wissen .seitenkopf__aktionen { align-self: flex-start; }
  .seitenkopf--wissen .seitenkopf__aktionen .knopf { width: auto; }

  /* --- Einstieg mobil · 390 × 1432 · Wege untereinander, ohne Linie ----- */
  .einstieg { gap: 26px; padding: 56px 22px 60px; }
  .einstieg .marke { gap: 12px; font-size: 13px; line-height: 20px; }
  .einstieg .marke__strich { width: 28px; }
  .einstieg__kopf h2 { font-size: 30px; line-height: 33px; }
  .einstieg__lead { width: auto; font-size: 16px; line-height: 24px; }
  .pfade { grid-template-columns: 1fr; gap: 30px; }
  .pfade__linie { display: none; }   /* mobil zeichnet Figma keine Verbindung */
  .pfad b { font-size: 20px; line-height: 30px; }
  .pfad p { font-size: 15px; line-height: 23px; }
  .pfadpille { font-size: 14.5px; line-height: 22px; }   /* Figma: Pille 42 statt 43 */
  .keinbetrag { padding: 18px 20px; font-size: 14px; line-height: 21px; }

  /* --- Ratgeber mobil · 390 × 2800 · Karten untereinander --------------- */
  .ratgeber { gap: 28px; padding: 56px 22px 60px; }   /* Figma: mobil 28, nicht 26 */
  .ratgeber .marke { gap: 12px; font-size: 13px; line-height: 20px; }
  .ratgeber .marke__strich { width: 28px; }
  .ratgeber .einstieg__kopf h2 { font-size: 30px; line-height: 33px; }
  .ratgeber__lead { width: auto; font-size: 16px; line-height: 24px; }
  .rgruppe__kopf { font-size: 13px; line-height: 20px; }
  .rkarten { grid-template-columns: 1fr; gap: 12px; }
  .rkarte { padding: 22px 20px; }
  .rkarte b { font-size: 18px; line-height: 27px; }

  /* --- Ratgeber-Abschnitte mobil · Figma 561:105 / 561:140 / 561:165 ---- */
  .abschnitt { gap: 22px; padding: 52px 22px 56px; }
  .abschnitt .marke { gap: 12px; font-size: 13px; line-height: 22px; }
  .abschnitt .marke__strich { width: 28px; }
  .abschnitt__kopf h2 { font-size: 28px; line-height: 31px; }   /* Figma: 112 % */
  .abschnitt__text { width: auto; font-size: 16px; line-height: 27px; }
  .abschnitt__hinweis { width: auto; padding: 20px 20px 22px; font-size: 15px; line-height: 24px; }
  .punktkarten { width: auto; }
  .punktkarte { padding: 14px 16px; font-size: 15.5px; line-height: 26px; }
  .wkarten { grid-template-columns: 1fr; gap: 12px; }
  .wkarte { padding: 22px 20px 24px; }
  .wkarte b { font-size: 18.5px; line-height: 29px; }
  .wkarte span { font-size: 14.5px; line-height: 23px; }

  /* --- Weiterlesen mobil · Figma 562:709 · 390 × 570 -------------------- */
  .weiterlesen { gap: 20px; padding: 44px 22px 48px; }
  .lesekarte b { font-size: 16px; }

  /* --- Leistungen mobil · Seitenkopf 390 × 653 -------------------------- */
  .seitenkopf--leistungen { gap: 18px; padding: 96px 24px 48px; }
  .seitenkopf--leistungen h1 { font-size: 32px; line-height: 34px; }
  .seitenkopf--leistungen .kurzantwort { width: auto; padding: 26px 28px; }
  .seitenkopf--leistungen .kurzantwort p { font-size: 18px; line-height: 31px; }
  .seitenkopf--leistungen .seitenkopf__aktionen { align-self: flex-start; }
  .seitenkopf--leistungen .seitenkopf__aktionen .knopf { width: auto; }

  /* --- Überblick mobil · 390 × 1196 · Figma 573:116 ---------------------
     Titel und Beschreibung stehen übereinander statt in zwei Spalten. */
  .uebersicht { gap: 26px; padding: 56px 22px 60px; }
  .uebersicht .marke { gap: 12px; font-size: 13px; line-height: 20px; }
  .uebersicht .marke__strich { width: 28px; }
  .uebersicht__lead { width: auto; font-size: 16px; line-height: 24px; }
  .lzeile { align-items: flex-start; gap: 14px; padding: 20px; }
  .lzeile__feld { width: 42px; height: 42px; border-radius: 21px; }
  .lzeile__feld svg { width: 21px; height: 21px; }
  .lzeile__block { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
  .lzeile__titel { width: auto; font-size: 18px; line-height: 27px; }
  .lzeile__text { font-size: 15px; line-height: 23px; }

  /* --- Bausteine mobil · 390 × 2607 · Figma 576:361 ---------------------
     Schmaleres Kopfband ohne Normpille, Inhalt untereinander. */
  .bausteine { gap: 22px; padding: 52px 22px 56px; }
  .baustein__band { height: 78px; gap: 16px; padding: 18px 22px; }
  .baustein__fleck--mint { left: 145px; top: -68px; width: 150px; height: 150px; }
  .baustein__fleck--lavendel { left: 7px; top: 23px; width: 120px; height: 120px; }
  .baustein__band h3 { font-size: 20px; line-height: 31px; }
  .baustein__band .baustein__norm { display: none; }
  .baustein__norm--mobil {
    display: block;
    border: 0;
    background: var(--c-weiss);
    color: rgba(11, 46, 51, 0.8);
  }
  .baustein__inhalt { flex-direction: column; gap: 20px; padding: 24px 22px 26px; }
  .baustein__text { gap: 16px; align-self: stretch; }
  .baustein__text p { font-size: 16px; line-height: 25px; }
  .baustein__mehr { padding-top: 0; font-size: 15.5px; line-height: 24px; }
  .bpunkte { width: auto; align-self: stretch; padding: 20px 20px 22px; }
  .bpunkte li { font-size: 15.5px; line-height: 24px; }

  /* --- Wer zahlt was mobil · 390 × 1716 · Figma 578:339 ----------------- */
  .zahlt { gap: 30px; padding: 54px 22px 58px; }
  .zahlt__kopfreihe {
    grid-template-areas:
      "marke   scheibe"
      "titel   scheibe"
      "lead    lead";
    column-gap: 16px;
  }
  .zahlt__kopfreihe h2 { font-size: 30px; line-height: 33px; }
  .zahlt__lead { font-size: 16px; line-height: 25px; }
  .zahlt__scheibe { width: 62px; height: 62px; border-radius: 31px; }
  .zahlt__scheibe svg { width: 31px; height: 31px; }
  .zahler-reihe { grid-template-columns: 1fr; gap: 16px; }
  .zahler { gap: 16px; padding: 22px 20px 24px; }
  .zahler__kopf b { font-size: 20px; line-height: 31px; }
  .zahler__text { font-size: 15px; line-height: 23px; }
  .weiterlesen .marke { gap: 12px; font-size: 13px; line-height: 18px; }
  .weiterlesen .marke__strich { width: 28px; }
  .lesekarten { grid-template-columns: 1fr; gap: 12px; }

  /* Mobil tritt der Umschalter an die Stelle der Tabelle (Figma 561:112). */
  .faktenfeld { display: none; }
  .tafelwahl { display: flex; flex-direction: column; gap: 16px; align-self: stretch; }
  .rkarte__text { font-size: 14.5px; line-height: 22px; }
  .okachel {
    padding: 14px 12px 14px 14px;
    font-size: 15px;
    line-height: 23px;     /* Figma: Kachel 51 hoch */
  }

  /* --- Ort fehlt mobil · 390 × 867 -------------------------------------- */
  .ortfehlt { padding: 56px 22px 60px; }
  .ortfehlt__band { flex-direction: column; align-items: stretch; gap: 24px; padding: 32px 24px 34px; }
  /* Figma setzt die Überschrift mobil auf 152 % statt der 110 % vom
     Desktop – sieht nach Unachtsamkeit aus, steht aber so in der Datei. */
  .ortfehlt__text h2 { font-size: 28px; line-height: 43px; }
  .ortfehlt__text > p { font-size: 15.5px; line-height: 24px; }
  .ortfehlt__aktionen { flex-direction: column; align-items: stretch; align-self: stretch; gap: 12px; }
  .ortfehlt__karte { width: auto; padding: 24px 22px 26px; }
  .ortfehlt__titel { font-size: 18px; line-height: 27px; }
  .ortfehlt__lead { font-size: 14.5px; line-height: 22px; }
}


/* ==========================================================================
   ㉓ 24-STUNDEN-BETREUUNG · Figma-Seite „㉓ 24-Stunden-Betreuung"
   Desktop 587:207 (1440 × 4243) · Mobil 587:692 (390 × 6324)
   Seitenkopf, Was das bedeutet, Nachtwache, Finanzierung, Abschluss.
   Der Seitenkopf ist maßgleich mit dem der Leistungsseite und nutzt
   deshalb dieselbe Fassung .seitenkopf--leistungen.
   ========================================================================== */

/* Mintakzent in der Überschrift · Figma #55c7a7.
   Auf dem hellen Mintgrund ist der Kontrast schwach; die Auszeichnung ist
   rein dekorativ, die Aussage steht auch ohne sie. So gezeichnet. */
.akzent-mint { color: var(--c-akzent); }

/* Vorzeile der Sektionen dieser Seite · ExtraBold 13/20, Sperrung 9 %. */
.abschnittsmarke {
  font-size: 13px;
  font-weight: 800;
  line-height: 20px;       /* Figma: 155 % von 13 */
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-akzent);
}

/* --- Was das bedeutet · 1440 × 920 · Figma 606:778 ----------------------- */
.bedeutet {
  padding: 96px var(--rand-sektion) 100px;
  background: var(--c-mint);
}
.bedeutet__reihe {
  display: flex;
  align-items: center;
  gap: 72px;
}
.bedeutet__links {
  display: flex;
  flex-direction: column;
  gap: 32px;
  flex: 1;
  min-width: 0;
}
.bedeutet__kopf { display: flex; flex-direction: column; gap: 16px; }
.bedeutet__kopf h2 {
  font-size: 40px;
  font-weight: 800;
  line-height: 44px;       /* Figma: 110 % von 40 */
  letter-spacing: 0;
  color: var(--c-petrol);
}
.bedeutet__lead {
  margin: 0;
  font-size: 17.5px;
  font-weight: 400;
  line-height: 27px;       /* Figma: 155 % von 17,5 */
  color: var(--c-text-75);
}

.merkmale {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.merkmal {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 24px 26px;
  border-radius: 18px;
  background: var(--c-weiss);
}
.merkmal h3 {
  font-size: 18px;
  font-weight: 800;
  line-height: 28px;       /* Figma: 155 % von 18 */
  letter-spacing: 0;
  color: var(--c-petrol);
}
.merkmal p {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 25px;       /* Figma: 155 % von 16 */
  color: var(--c-text-72);
}

/* --- Schichtuhr · 380 · drei Bögen mit Innenradius 0,74 ------------------
   Figma legt drei Kreisausschnitte übereinander; die Winkel stehen dort in
   Bogenmaß ab der Drei-Uhr-Stellung, CSS zählt ab zwölf Uhr – daher jeweils
   90 Grad mehr. Zwischen den Bögen bleiben 2,75 Grad Luft, in denen die
   Mintfläche der Sektion durchscheint. Das Loch in der Mitte ist keine
   Maske, sondern eine Scheibe in derselben Mintfarbe: fällt die Maske aus,
   stünde die Schrift sonst auf dunklem Grund. */
.schichtuhr {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 380px;
  height: 380px;
  flex: none;
}
.schichtuhr__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    var(--c-petrol)   0deg      88.62deg,
    transparent       88.62deg  91.38deg,
    var(--c-akzent)   91.38deg  208.6deg,
    transparent       208.6deg  211.35deg,
    #1f6b70           211.35deg 328.64deg,
    transparent       328.64deg 331.39deg,
    var(--c-petrol)   331.39deg 360deg);
}
.schichtuhr__mitte {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 74%;
  height: 74%;
  border-radius: 50%;
  background: var(--c-mint);
}
.schichtuhr__zahl {
  font-size: 52px;
  font-weight: 800;
  line-height: 52px;       /* Figma: 100 % */
  letter-spacing: 0;
  color: var(--c-petrol);
}
.schichtuhr__wort {
  font-size: 15px;
  font-weight: 700;
  line-height: 23px;       /* Figma: 155 % von 15 */
  color: rgba(11, 46, 51, 0.55);
}

/* --- Legende der drei Schichten · 190 breit ------------------------------ */
.schichten {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 190px;
  flex: none;
}
.schicht { display: flex; align-items: center; gap: 10px; }
.schicht__punkt {
  width: 12px;
  height: 12px;
  flex: none;
  border-radius: 50%;
}
.schicht__punkt--frueh { background: var(--c-akzent); }
.schicht__punkt--spaet { background: #1f6b70; }
.schicht__punkt--nacht { background: var(--c-petrol); }
.schicht__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.schicht__text b {
  font-size: 15.5px;
  font-weight: 700;
  line-height: 24px;       /* Figma: 155 % von 15,5 */
  color: var(--c-petrol);
}
.schicht__text span {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;       /* Figma: 155 % von 14 */
  color: rgba(11, 46, 51, 0.6);
}


/* --- Nachtwache · 1440 × 888 · Figma 606:859 -----------------------------
   Dunkle Sektion. Alle Karten haben in Figma eine 1 px starke Innenkontur;
   mit border-box zählt sie in die Höhe, genau wie dort. Die Unschärfen sind
   halbiert: Figma 22 → 11, Figma 18 → 9. */
.nacht {
  display: flex;
  flex-direction: column;
  gap: 44px;
  padding: 96px var(--rand-sektion) 100px;
  background: var(--c-petrol-tief);
}
.nacht__kopfreihe { display: flex; align-items: center; gap: 48px; }
.nacht__kopf {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
  min-width: 0;
}
.nacht__marke { display: flex; align-items: center; gap: 12px; }
.nacht__zeitpille {
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.12);
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;       /* Figma: 155 % von 13 */
  color: var(--c-weiss);
}
.nacht__kopf h2 {
  font-size: 40px;
  font-weight: 800;
  line-height: 45px;       /* Figma: 112 % von 40 */
  letter-spacing: 0;
  color: var(--c-weiss);
}
.nacht__lead {
  margin: 0;
  font-size: 17.5px;
  font-weight: 400;
  line-height: 27px;       /* Figma: 155 % von 17,5 */
  color: var(--c-hell-72);
}
.nacht__mond {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 124px;
  height: 124px;
  flex: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);
  color: var(--c-weiss);
}
.nacht__mond svg { width: 58px; height: 58px; }

/* Nachtband · Verlauf Petrol → Nachtblau → Petrol, waagerecht */
.nachtband {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 32px 34px 34px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  background: linear-gradient(to right, #0f333d, #171a38 50%, #174242);
}
.nachtband__zeiten {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 800;
  line-height: 20px;
  color: var(--c-akzent);
}
.nachtband__linie {
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(to right,
    rgba(85, 199, 167, 0.8), rgba(255, 255, 255, 0.25) 50%, rgba(85, 199, 167, 0.8));
}
.aufgaben {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-top: 6px;
}
.aufgabe {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
  min-width: 0;
  padding: 18px 18px 20px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}
.aufgabe h3 {
  font-size: 17.5px;
  font-weight: 800;
  line-height: 27px;
  letter-spacing: 0;
  color: var(--c-weiss);
}
.aufgabe p {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 23px;
  color: rgba(255, 255, 255, 0.66);
}

.nachtpunkte { display: flex; flex-wrap: wrap; gap: 12px; }
.nachtpunkte li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px 11px 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.08);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 24px;
  color: var(--c-hell-85);
}
.nachtpunkt__haken {
  flex: none;
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
  color: var(--c-akzent);
}

.nacht__mehr {
  align-self: flex-start;
  gap: 9px;
  padding-top: 0;
  font-size: 16.5px;
  line-height: 23px;
  color: var(--c-akzent);
}
.nacht__mehr .weiterlink__pfeil { color: var(--c-akzent); }
.nacht__mehr:hover,
.nacht__mehr:hover .weiterlink__pfeil { color: var(--c-akzent-hell); }



/* --- Finanzierung · 1440 × 633 · Figma 606:954 ---------------------------
   Links Kopf und Verweis (568), rechts der Balken (560), Abstand 72.
   Die Töpfe haben in Figma keine Karte, sondern nur eine Oberkante aus
   Petrol mit 10 Prozent und 14 Polster darüber. */
.dauerfinanz {
  padding: 96px var(--rand-sektion) 100px;
  background: var(--c-weiss);
}
.dauerfinanz__reihe { display: flex; align-items: flex-start; gap: 72px; }
.dauerfinanz__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  flex: 1;
  min-width: 0;
}
.dauerfinanz__kopf { display: flex; flex-direction: column; gap: 14px; }
.dauerfinanz__kopf h2 {
  font-size: 40px;
  font-weight: 800;
  line-height: 45px;       /* Figma: 112 % von 40 */
  letter-spacing: 0;
  color: var(--c-petrol);
}
.dauerfinanz__lead {
  margin: 0;
  font-size: 17.5px;
  font-weight: 400;
  line-height: 27px;
  color: var(--c-text-75);
}
.dauerfinanz__mehr {
  gap: 9px;
  padding-top: 0;
  font-size: 16.5px;
  line-height: 26px;       /* Figma: 155 % von 16,5 */
  color: var(--c-text-90);
}
.dauerfinanz__mehr .weiterlink__pfeil { color: var(--c-petrol); }

.dauerfinanz__balken {
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: 560px;
  flex: none;
}

/* Balken · drei gleich breite Säulen, außen Radius 14, innen 12 */
.saeulen {
  display: flex;
  gap: 4px;
  height: 64px;
  border-radius: 14px;
}
.saeule {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 0;
  border-radius: 12px;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 19px;       /* Figma: 155 % von 12,5 */
  text-align: center;
}
.saeule--sach         { background: var(--c-akzent); color: var(--c-text-70); }
.saeule--verhinderung { background: #1f6b70; color: var(--c-hell-85); }
.saeule--entlastung   { background: var(--c-petrol); color: var(--c-hell-85); }

.dauerfinanz__hinweis {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 23px;
  color: rgba(11, 46, 51, 0.6);
}

.quellen { display: flex; flex-direction: column; gap: 14px; }
.quelle {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--c-linie-2);
}
.quelle__punkt {
  width: 12px;
  height: 12px;
  flex: none;
  margin-top: 7px;         /* Figma setzt den Punkt auf die Textoberkante */
  border-radius: 50%;
}
.quelle__punkt--sach         { background: var(--c-akzent); }
.quelle__punkt--verhinderung { background: #1f6b70; }
.quelle__punkt--entlastung   { background: var(--c-petrol); }
.quelle__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.quelle__text b {
  font-size: 17px;
  font-weight: 800;
  line-height: 26px;       /* Figma: 155 % von 17 */
  color: var(--c-petrol);
}
.quelle__text span {
  font-size: 15.5px;
  font-weight: 400;
  line-height: 24px;
  color: var(--c-text-72);
}




/* ==========================================================================
   ㉔ PERSÖNLICHE ASSISTENZ · Figma-Seite „㉔ Persönliche Assistenz"
   Desktop 599:207 (1440 × 3358) · Mobil 599:510 (390 × 5239)
   Seitenkopf, Der Unterschied, Finanzierung, Abschluss. Der Seitenkopf ist
   maßgleich mit dem der Leistungsseite und nutzt dieselbe Fassung.
   ========================================================================== */

/* --- Der Unterschied · 1440 × 811 · Figma 605:567 ------------------------
   Dunkle Fläche. Die Glaskarten tragen wie überall eine 1-px-Innenkontur,
   die mit border-box in die Höhe zählt. Unschärfe Figma 16 → CSS 8. */
.unterschied {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 44px;
  padding: 96px var(--rand-sektion) 100px;
  background: var(--c-petrol);
}
.unterschied__kopf {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 780px;
  max-width: 100%;
}
.unterschied__kopf h2 {
  font-size: 44px;
  font-weight: 800;
  line-height: 48px;       /* Figma: 110 % von 44 */
  letter-spacing: 0;
  color: var(--c-weiss);
}
.unterschied__lead {
  margin: 0;
  font-size: 17.5px;
  font-weight: 400;
  line-height: 27px;
  color: rgba(255, 255, 255, 0.75);   /* Figma: Weiß 75 %, dafür gibt es keine Variable */
}

/* Orte, in denen Assistenz stattfindet · Pillen, die erste hervorgehoben */
.assistenzorte {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-self: stretch;
}
.assistenzort {
  padding: 13px 20px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 16px;
  font-weight: 700;
  line-height: 25px;       /* Figma: 155 % von 16 */
  color: rgba(255, 255, 255, 0.8);
}
.assistenzort--stark {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.16);
  color: var(--c-weiss);
}

.unterschied__satz {
  margin: 0;
  align-self: stretch;
  font-size: 21px;
  font-weight: 800;
  line-height: 33px;       /* Figma: 155 % von 21 */
  color: var(--c-akzent);
}

.grundsaetze {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  align-self: stretch;
}
.grundsatz {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
  padding: 26px 26px 28px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.07);
}
.grundsatz h3 {
  font-size: 18.5px;
  font-weight: 800;
  line-height: 29px;       /* Figma: 155 % von 18,5 */
  letter-spacing: 0;
  color: var(--c-weiss);
}
.grundsatz p {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 25px;
  color: rgba(255, 255, 255, 0.68);
}


/* --- Finanzierung · 1440 × 797 · Figma 605:630 ---------------------------
   Drei Karten ohne Kontur; die erste in Petrol, die beiden anderen in Mint.
   Die Eckdaten sitzen unter einer feinen Oberkante mit 14 Polster darüber. */
.assistenzgeld {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 44px;
  padding: 96px var(--rand-sektion) 100px;
  background: var(--c-weiss);
}
.assistenzgeld__kopf {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 760px;
  max-width: 100%;
}
.assistenzgeld__kopf h2 {
  font-size: 40px;
  font-weight: 800;
  line-height: 45px;       /* Figma: 112 % von 40 */
  letter-spacing: 0;
  color: var(--c-petrol);
}
.assistenzgeld__lead {
  margin: 0;
  font-size: 17.5px;
  font-weight: 400;
  line-height: 27px;
  color: var(--c-text-75);
}

.geldwege {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  align-self: stretch;
}
.geldweg {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
  min-width: 0;
  padding: 30px 28px 32px;
  border-radius: 22px;
  background: var(--c-mint);
}
.geldweg__marke {
  font-size: 12px;
  font-weight: 800;
  line-height: 19px;       /* Figma: 155 % von 12 */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(11, 46, 51, 0.45);
}
.geldweg h3 {
  font-size: 20px;
  font-weight: 800;
  line-height: 31px;       /* Figma: 155 % von 20 */
  letter-spacing: 0;
  color: var(--c-petrol);
}
.geldweg__text {
  margin: 0;
  font-size: 15.5px;
  font-weight: 400;
  line-height: 24px;
  color: var(--c-text-72);
}
.geldweg__tun {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 23px;
  color: var(--c-text-80);
}

.eckdaten {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid rgba(11, 46, 51, 0.1);
}
.eckzeile { display: flex; gap: 12px; }
.eckzeile dt {
  width: 78px;
  flex: none;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 21px;
  color: rgba(11, 46, 51, 0.45);
}
.eckzeile dd {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 22px;
  color: rgba(11, 46, 51, 0.85);
}

/* Die erste Karte steht auf Petrol und dreht alle Farben um. */
.geldweg--dunkel { background: var(--c-petrol); }
.geldweg--dunkel .geldweg__marke { color: var(--c-akzent); }
.geldweg--dunkel h3 { color: var(--c-weiss); }
.geldweg--dunkel .geldweg__text { color: rgba(255, 255, 255, 0.7); }
.geldweg--dunkel .geldweg__tun { color: var(--c-akzent); }
.geldweg--dunkel .eckdaten { border-top-color: rgba(255, 255, 255, 0.18); }
.geldweg--dunkel .eckzeile dt { color: rgba(255, 255, 255, 0.5); }
.geldweg--dunkel .eckzeile dd { color: rgba(255, 255, 255, 0.92); }



/* ==========================================================================
   ㉕ NACHTWACHE · Figma-Seite „㉕ Nachtwache"
   Desktop 607:207 (1440 × 4850) · Mobil 607:458 (390 × 7030)
   Seitenkopf, Warum die Nacht, Formen, Aufgaben, Fragen, Abschluss.
   Auf dieser Seite rechnet Figma durchgehend mit 158 % Zeilenhöhe.
   ========================================================================== */

/* --- Warum die Nacht · 1440 × 774 · Figma 617:567 ------------------------ */
.warumnacht {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 44px;
  padding: 96px var(--rand-sektion) 100px;
  background: var(--c-weiss);
}
/* In dieser Sektion rechnet Figma die Vorzeile mit 158 % statt 156 % –
   ein Pixel mehr, der sich bis in die Sektionshöhe durchzieht. */
.warumnacht .abschnittsmarke { line-height: 21px; }
.warumnacht__kopf {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 760px;
  max-width: 100%;
}
.warumnacht__kopf h2 {
  font-size: 40px;
  font-weight: 800;
  line-height: 45px;       /* Figma: 112 % von 40 */
  letter-spacing: 0;
  color: var(--c-petrol);
}
.warumnacht__lead {
  margin: 0;
  font-size: 17.5px;
  font-weight: 400;
  line-height: 28px;       /* Figma: 158 % von 17,5 */
  color: var(--c-text-75);
}

/* Kette · vier Karten, dazwischen je ein 40 breiter Pfeil. Der Pfeil ist
   Beiwerk und steht deshalb als Pseudoelement in der Lücke. */
.kette {
  display: flex;
  align-items: flex-start;
  align-self: stretch;
}
.kettenkarte {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
  padding: 24px 22px 26px;
  border-radius: 18px;
  background: var(--c-mint);
}
.kettenkarte:not(:last-child) { margin-right: 40px; }
.kettenpfeil {
  position: absolute;
  top: 50%;
  left: 100%;
  width: 12px;
  height: 10px;
  margin: -5px 0 0 14px;   /* Figma: Pfeil mittig in der 40er Lücke */
  color: rgba(11, 46, 51, 0.3);
}
.kettenkarte:last-child .kettenpfeil { display: none; }
.kettenkarte__nr {
  font-size: 13px;
  font-weight: 800;
  line-height: 21px;       /* Figma: 158 % von 13 */
  color: rgba(11, 46, 51, 0.35);
}
.kettenkarte h3 {
  font-size: 17.5px;
  font-weight: 800;
  line-height: 28px;
  letter-spacing: 0;
  color: var(--c-petrol);
}
.kettenkarte p {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;       /* Figma: 158 % von 15 */
  color: var(--c-text-70);
}
.kettenkarte--dunkel { background: var(--c-petrol); }
.kettenkarte--dunkel .kettenkarte__nr { color: var(--c-akzent); }
.kettenkarte--dunkel h3 { color: var(--c-weiss); }
.kettenkarte--dunkel p { color: rgba(255, 255, 255, 0.7); }

/* Signalband · Mint 14 %, senkrechter Strich links */
.signalband {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  align-self: stretch;
  margin: 0;
  padding: 24px 26px 26px;
  border-radius: 20px;
  background: rgba(85, 199, 167, 0.14);
  font-size: 16.5px;
  font-weight: 700;
  line-height: 26px;       /* Figma: 158 % von 16,5 */
  color: var(--c-text-90);
}
.signalband__strich {
  width: 4px;
  flex: none;
  align-self: stretch;
  border-radius: 2px;
  background: var(--c-akzent);
}


/* --- Formen · 1440 × 792 · Figma 617:624 ---------------------------------
   Drei Mintkarten. Zeilenhöhen hier 156 %. */
.nformen {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 44px;
  padding: 96px var(--rand-sektion) 100px;
  background: var(--c-weiss);
}
.nformen__kopf {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 760px;
  max-width: 100%;
}
.nformen__kopf h2 {
  font-size: 40px;
  font-weight: 800;
  line-height: 45px;       /* Figma: 112 % von 40 */
  letter-spacing: 0;
  color: var(--c-petrol);
}
.nformen__lead {
  margin: 0;
  font-size: 17.5px;
  font-weight: 400;
  line-height: 27px;       /* Figma: 156 % von 17,5 */
  color: var(--c-text-75);
}
.nformen__fussnote {
  margin: 0;
  align-self: stretch;
  font-size: 15px;
  font-weight: 400;
  line-height: 23px;
  color: rgba(11, 46, 51, 0.55);
}

.nformliste {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  align-self: stretch;
}
.nform {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  min-width: 0;
  padding: 30px 28px 32px;
  border-radius: 22px;
  background: var(--c-mint);
}
.stufen { display: flex; gap: 6px; }
.stufe {
  width: 22px;
  height: 6px;
  border-radius: 3px;
  background: rgba(11, 46, 51, 0.13);
}
.stufe--an { background: var(--c-akzent); }
.nform__marke {
  font-size: 12px;
  font-weight: 800;
  line-height: 19px;       /* Figma: 156 % von 12 */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(11, 46, 51, 0.45);
}
.nform h3 {
  font-size: 22px;
  font-weight: 800;
  line-height: 34px;       /* Figma: 156 % von 22 */
  letter-spacing: 0;
  color: var(--c-petrol);
}
.nform__text {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 25px;
  color: var(--c-text-75);
}
.wannblock {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 14px;
  border-top: 1px solid rgba(11, 46, 51, 0.1);
}
.wannblock__marke {
  font-size: 11.5px;
  font-weight: 800;
  line-height: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-akzent);
}
.wannblock p {
  margin: 0;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 24px;
  color: var(--c-text-80);
}


/* --- Aufgaben · 1440 × 920 · Figma 617:705 -------------------------------
   Das Nachtprotokoll liegt als Blatt in Papierfarbe auf der Mintfläche. */
.aufgabennacht {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 44px;
  padding: 96px var(--rand-sektion) 100px;
  background: var(--c-mint);
}
.aufgabennacht__kopf {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 760px;
  max-width: 100%;
}
.aufgabennacht__kopf h2 {
  font-size: 40px;
  font-weight: 800;
  line-height: 45px;       /* Figma: 112 % von 40 */
  letter-spacing: 0;
  color: var(--c-petrol);
}

.protokoll {
  width: 820px;
  max-width: 100%;
  border-radius: 8px;
  background: var(--c-papier);
  box-shadow: 0 10px 28px rgba(11, 46, 51, 0.12);
  overflow: hidden;        /* damit die Fußzeile die Ecken nicht überzeichnet */
}
.protokoll__kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 34px;
  border-bottom: 2px solid rgba(11, 46, 51, 0.85);
}
.protokoll__kopf h3 {
  flex: 1;
  min-width: 0;
  font-size: 21px;
  font-weight: 800;
  line-height: 33px;       /* Figma: 156 % von 21 */
  letter-spacing: 0;
  color: var(--c-petrol);
}
.protokoll__zeit {
  flex: none;
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
  color: rgba(11, 46, 51, 0.55);
}
.protokollzeilen li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 34px;
  border-bottom: 1px solid rgba(11, 46, 51, 0.12);
  font-size: 16.5px;
  font-weight: 700;
  line-height: 26px;       /* Figma: 156 % von 16,5 */
  color: rgba(11, 46, 51, 0.85);
}
.protokollzeilen li:last-child { border-bottom: 0; }
.protokoll__kaestchen {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: none;
  margin-top: 2px;         /* Figma: Kästchen sitzt an der Textoberkante */
  border: 1.5px solid rgba(11, 46, 51, 0.35);
  border-radius: 5px;
  color: var(--c-akzent);
}
.protokoll__kaestchen svg { width: 18px; height: 15px; }
.protokoll__fuss {
  margin: 0;
  padding: 18px 34px 20px;
  background: rgba(11, 46, 51, 0.05);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 23px;
  color: rgba(11, 46, 51, 0.6);
}



/* ==========================================================================
   ㉖ KARRIERE · Figma-Seite „㉖ Karriere"
   Desktop 619:207 (1440 × 4421) · Mobil 619:537 (390 × 7323)
   Seitenkopf, Offene Stellen, Was wir bieten, Bewerbung, Abschluss.
   Zeilenhöhen durchgehend 156 %.
   ========================================================================== */

/* --- Offene Stellen · 1440 × 1266 · Figma 627:561 ------------------------ */
.stellen {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 44px;
  padding: 96px var(--rand-sektion) 100px;
  background: var(--c-weiss);
}
.stellen__kopf {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 760px;
  max-width: 100%;
}
.stellen__kopf h2 {
  font-size: 40px;
  font-weight: 800;
  line-height: 45px;       /* Figma: 112 % von 40 */
  letter-spacing: 0;
  color: var(--c-petrol);
}
.stellen__lead {
  margin: 0;
  font-size: 17.5px;
  font-weight: 400;
  line-height: 27px;       /* Figma: 156 % von 17,5 */
  color: var(--c-text-75);
}

.stellengruppe {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-self: stretch;
}
/* Kopfzeile der Gruppe · Titel und Zusatz auf einer Grundlinie, darunter
   eine feine Linie mit 4 Abstand. */
.stellengruppe__kopf {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--c-linie);
}
.stellengruppe__kopf h3 {
  flex: none;
  font-size: 21px;
  font-weight: 800;
  line-height: 33px;       /* Figma: 156 % von 21 */
  letter-spacing: 0;
  color: var(--c-petrol);
}
.stellengruppe__kopf span {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 23px;
  color: var(--c-text-50);
}

.stellenliste { display: flex; align-items: flex-start; gap: 16px; }
.stelle {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
  flex: 1;
  min-width: 0;
  padding: 24px 24px 26px;
  border-radius: 20px;
  background: var(--c-mint);
}
.stelle h4 {
  align-self: stretch;
  font-size: 18px;
  font-weight: 800;
  line-height: 28px;       /* Figma: 156 % von 18 */
  letter-spacing: 0;
  color: var(--c-petrol);
}
.stelle__merkmale { display: flex; flex-wrap: wrap; gap: 8px; }
/* Figma füllt die erste Pille in Mint – auf der Mintkarte also unsichtbar –
   und die übrigen in Weiß. So gezeichnet, so übernommen. */
.stelle__merkmale li {
  padding: 7px 13px;
  border-radius: var(--r-pill);
  background: var(--c-weiss);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 21px;
  color: var(--c-text-75);
}
.stelle__merkmale li:first-child { background: var(--c-mint); }
.stelle__mehr {
  gap: 9px;
  padding-top: 0;
  font-size: 15.5px;
  line-height: 24px;
  color: var(--c-text-90);
}
.stelle__mehr .weiterlink__pfeil { width: 15px; height: 15px; color: var(--c-petrol); }

/* Die Ausbildungskarte steht allein in der Reihe und in Petrol. */
.stelle--dunkel { background: var(--c-petrol); }
.stelle--dunkel h4 { color: var(--c-weiss); }
.stelle--dunkel .stelle__merkmale li,
.stelle--dunkel .stelle__merkmale li:first-child {
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
}
.stelle--dunkel .stelle__mehr,
.stelle--dunkel .stelle__mehr .weiterlink__pfeil { color: var(--c-akzent); }

.initiativ {
  display: flex;
  align-items: center;
  gap: 20px;
  align-self: stretch;
  padding: 20px 26px 22px;
  border-radius: 18px;
  background: var(--c-mint);
}
.initiativ p {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 24px;
  color: var(--c-text-80);
}
.initiativ__mehr {
  flex: none;
  gap: 8px;
  padding-top: 0;
  font-size: 15.5px;
  line-height: 24px;
  color: var(--c-petrol);
}
.initiativ__mehr .weiterlink__pfeil { width: 15px; height: 15px; color: var(--c-petrol); }


/* --- Was wir bieten · 1440 × 851 · Figma 627:744 -------------------------
   Sechs Glaskarten, je drei nebeneinander. Die Karten haben in Figma eine
   feste Breite von 389,33 – das ist ein Drittel der Spalte abzüglich der
   beiden Lücken. Unschärfe Figma 18 → CSS 9. */
.bieten {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 44px;
  padding: 96px var(--rand-sektion) 100px;
  background: var(--c-petrol);
}
.bieten__kopf {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 760px;
  max-width: 100%;
}
.bieten__kopf h2 {
  font-size: 40px;
  font-weight: 800;
  line-height: 45px;       /* Figma: 112 % von 40 */
  letter-spacing: 0;
  color: var(--c-weiss);
}

.bietenfakten {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
}
.bietenfakt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: calc((100% - 32px) / 3);
  padding: 26px 24px 28px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}
.bietenfakt__zahl {
  font-size: 30px;
  font-weight: 800;
  line-height: 31px;       /* Figma: 105 % von 30 */
  color: var(--c-akzent);
}
.bietenfakt__unter {
  align-self: stretch;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.9);
}
.bietenfakt__linie {
  width: 28px;
  height: 1px;
  background: rgba(255, 255, 255, 0.25);
}
.bietenfakt h3 {
  align-self: stretch;
  font-size: 16.5px;
  font-weight: 800;
  line-height: 26px;       /* Figma: 156 % von 16,5 */
  letter-spacing: 0;
  color: var(--c-weiss);
}
.bietenfakt p {
  margin: 0;
  align-self: stretch;
  font-size: 15px;
  font-weight: 400;
  line-height: 23px;
  color: rgba(255, 255, 255, 0.62);
}


/* --- Bewerbung · 1440 × 578 · Figma 627:827 ------------------------------
   Kopf mittig, vier Schritte nebeneinander. Die Linie liegt hinter den
   Nummernkreisen und läuft von Kreismitte zu Kreismitte: 46 von links,
   46 von rechts, also 1108 von 1200. */
.bewerbung {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 44px;
  padding: 96px var(--rand-sektion) 100px;
  background: var(--c-mint);
}
.bewerbung__kopf {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  align-self: stretch;
  text-align: center;
}
.bewerbung__kopf h2 {
  width: 760px;
  max-width: 100%;
  font-size: 40px;
  font-weight: 800;
  line-height: 45px;       /* Figma: 112 % von 40 */
  letter-spacing: 0;
  color: var(--c-petrol);
}
.bewerbung__lead {
  margin: 0;
  width: 620px;
  max-width: 100%;
  font-size: 17.5px;
  font-weight: 400;
  line-height: 27px;
  color: var(--c-text-75);
}

.bewerbungsschritte {
  position: relative;
  align-self: stretch;
  padding-top: 22px;
}
.bewerbungsschritte__linie {
  position: absolute;
  left: 46px;              /* Figma: 46 von links, 46 von rechts – die Linie
                              beginnt an der rechten Kante des ersten Kreises */
  right: 46px;
  top: 44px;               /* 22 Polster + 23 halbe Kreishöhe − 1 halbe Linie */
  height: 2px;
  background: rgba(85, 199, 167, 0.3);
}
.wegschritte { position: relative; display: flex; align-items: flex-start; gap: 24px; }
.wegschritt {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  min-width: 0;
}
.wegschritt__nr {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: none;
  border: 5px solid var(--c-mint);
  border-radius: 50%;
  background: var(--c-petrol);
  font-size: 15px;
  font-weight: 800;
  line-height: 23px;
  color: var(--c-weiss);
}
.wegschritt__text { display: flex; flex-direction: column; gap: 7px; }
.wegschritt__text h3 {
  font-size: 19px;
  font-weight: 800;
  line-height: 30px;       /* Figma: 156 % von 19 */
  letter-spacing: 0;
  color: var(--c-petrol);
}
.wegschritt__text p {
  margin: 0;
  font-size: 15.5px;
  font-weight: 400;
  line-height: 24px;
  color: var(--c-text-72);
}



/* ==========================================================================
   ㉗ STELLEN · Figma-Seite „㉗ Stellen · Muster (Pflegefachkraft)"
   Desktop 621:475 (1440 × 4418) · Mobil 621:719 (390 × 6928)
   Gilt für alle vier job-Seiten; erzeugt von _build/stellen/seiten.py.
   Was wir bieten, Bewerbung, Weiterlesen und Abschluss teilen sich die
   Bausteine mit der Karriereseite und den Ratgebern.
   ========================================================================== */

/* --- Seitenkopf · 1440 × 605 · Figma 651:729 -----------------------------
   Wie die übrigen Leistungsköpfe, nur mit Scheibe in der Kopfreihe:
   Abstand 40 statt 48, Titelspalte mit 18 statt 14. */
.seitenkopf--stelle .seitenkopf__reihe { gap: 40px; }
.seitenkopf--stelle .seitenkopf__titel { gap: 18px; }

/* --- Aufgaben und Profil · 1440 × 969 · Figma 651:784 -------------------- */
.aufgabenprofil {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
  padding: 96px var(--rand-sektion) 100px;
  background: var(--c-mint);
}
/* In dieser Sektion ist die Vorzeile einen Tick kleiner als sonst. */
.aufgabenprofil .abschnittsmarke { font-size: 12.5px; line-height: 19px; }
.apblock {
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: 820px;
  max-width: 100%;
}
.apblock__kopf { display: flex; flex-direction: column; gap: 10px; }
.apblock__kopf h2 {
  font-size: 28px;
  font-weight: 800;
  line-height: 44px;       /* Figma: 156 % von 28 */
  letter-spacing: 0;
  color: var(--c-petrol);
}
.appunkte { display: flex; flex-direction: column; gap: 13px; }
.appunkte li {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  font-size: 16.5px;
  font-weight: 400;
  line-height: 26px;       /* Figma: 156 % von 16,5 */
  color: var(--c-text-82);
}
/* Der Haken ist 18 breit; seine Kontur ragt beidseitig 1,8 darüber hinaus,
   deshalb das negative Seitenmaß – die Textkante bleibt so bei 18 + 13. */
.aphaken {
  display: flex;
  width: 18px;
  flex: none;
  color: var(--c-akzent);
}
.aphaken svg { width: 21.6px; height: 18px; flex: none; margin: 4.2px -1.8px 0; }

.klartext {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  align-self: stretch;
  padding: 30px 32px 32px;
  border-radius: 22px;
  background: var(--c-petrol);
}
.klartext h3 {
  width: 300px;
  flex: none;
  font-size: 24px;
  font-weight: 800;
  line-height: 37px;       /* Figma: 156 % von 24 */
  letter-spacing: 0;
  color: var(--c-weiss);
}
.klartext p {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 16.5px;
  font-weight: 400;
  line-height: 26px;
  color: rgba(255, 255, 255, 0.75);
}

/* --- Kopfreihe der Bieten-Sektion mit Scheibe · Figma 651:885 ------------ */
.bieten__reihe {
  display: flex;
  align-items: center;
  gap: 48px;
  align-self: stretch;
}
.bieten__reihe .bieten__kopf { flex: 1; min-width: 0; width: auto; }
.bieten__scheibe {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 118px;
  height: 118px;
  flex: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);
  color: var(--c-weiss);
}
.bieten__scheibe svg { width: 58px; height: 58px; }



/* ==========================================================================
   ㉘ AUSBILDUNG · Figma-Seite „㉘ Ausbildung"
   Desktop 651:26931 (1440 × 4902) · Mobil 651:27269 (390 × 6931)
   Seitenkopf, Die Ausbildung, Voraussetzungen und Angebot, Ablauf,
   Fragen, Abschluss. Zeilenhöhen 156 %.
   ========================================================================== */

/* --- Markerreihe im Seitenkopf · Figma 663:526 --------------------------- */
/* Figma stellt die Pillen oben bündig; ohne flex-start zöge die kontur-
   lose Pille auf die Höhe der anderen und wäre 39 statt 37 hoch. */
.kopfmarker { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 10px; }
.kopfmarker li {
  padding: 9px 16px;
  border: 1px solid var(--c-linie);
  border-radius: var(--r-pill);
  background: var(--c-weiss);
  font-size: 14px;
  font-weight: 700;
  line-height: 19px;
  color: var(--c-text-80);
}
/* Mit Elementanteil geschrieben: `.kopfmarker li` wiegt schwerer als eine
   einzelne Klasse und hätte die Auszeichnung sonst überschrieben.
   Figma gibt dieser Pille keine Kontur – deshalb 37 hoch statt 39. */
.kopfmarker li.kopfmarker--stark {
  border: 0;
  background: var(--c-petrol);
  font-weight: 800;
  color: var(--c-weiss);
}

/* --- Die Ausbildung · 1440 × 848 · Figma 663:577 ------------------------- */
.ausbildung {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 44px;
  padding: 96px var(--rand-sektion) 100px;
  background: var(--c-petrol);
}
.ausbildung__reihe {
  display: flex;
  align-items: center;
  gap: 48px;
  align-self: stretch;
}
.ausbildung__kopf {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  min-width: 0;
}
.ausbildung__kopf h2 {
  font-size: 40px;
  font-weight: 800;
  line-height: 45px;       /* Figma: 112 % von 40 */
  letter-spacing: 0;
  color: var(--c-weiss);
}
.ausbildung__lead {
  margin: 0;
  font-size: 17.5px;
  font-weight: 400;
  line-height: 27px;
  color: rgba(255, 255, 255, 0.75);
}
.ausbildung__scheibe {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 118px;
  height: 118px;
  flex: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);
  color: var(--c-akzent);
}
.ausbildung__scheibe svg { width: 58px; height: 58px; }

.lernorte { display: flex; align-items: flex-start; gap: 20px; align-self: stretch; }
.lernort {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
  min-width: 0;
  padding: 32px 32px 34px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.lernort__marke {
  align-self: stretch;
  font-size: 12px;
  font-weight: 800;
  line-height: 19px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-akzent);
}
.lernort__zahl {
  font-size: 52px;
  font-weight: 800;
  line-height: 52px;       /* Figma: 100 % */
  color: var(--c-weiss);
}
.lernort h3 {
  align-self: stretch;
  font-size: 19px;
  font-weight: 800;
  line-height: 30px;       /* Figma: 156 % von 19 */
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.9);
}
.lernort p {
  margin: 0;
  align-self: stretch;
  font-size: 16px;
  font-weight: 400;
  line-height: 25px;
  color: rgba(255, 255, 255, 0.68);
}

/* Übernahmegarantie · Mintband mit dunkler Knopfpille */
.garantie {
  display: flex;
  align-items: center;
  gap: 24px;
  align-self: stretch;
  padding: 26px 32px 28px;
  border-radius: 22px;
  background: var(--c-akzent);
}
.garantie__text { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.garantie__text h3 {
  font-size: 21px;
  font-weight: 800;
  line-height: 33px;
  letter-spacing: 0;
  color: var(--c-petrol);
}
.garantie__text p {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 25px;
  color: var(--c-text-80);
}
.garantie__knopf {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
  padding: 14px 20px 14px 24px;
  border-radius: var(--r-pill);
  background: var(--c-petrol);
  font-size: 16px;
  font-weight: 800;
  line-height: 25px;
  color: var(--c-weiss);
  transition: background var(--t-kurz) var(--ease);
}
.garantie__knopf:hover { background: var(--c-petrol-tief); }
.garantie__knopf .weiterlink__pfeil { width: 16px; height: 16px; flex: none; color: var(--c-weiss); }


/* --- Zwischenruf · Mintkasten der Ausbildungsseite · Figma 663:631 -------
   Wie der Klartextkasten der Stellenseiten, nur in Mint und mit 340er
   Titelspalte. */
.zwischenruf {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
  padding: 26px 32px 28px;
  border-radius: 22px;
  background: var(--c-akzent);
}
.zwischenruf h3 {
  width: 340px;
  flex: none;
  font-size: 24px;
  font-weight: 800;
  line-height: 37px;       /* Figma: 156 % von 24 */
  letter-spacing: 0;
  color: var(--c-petrol);
}
.zwischenruf p {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 16.5px;
  font-weight: 400;
  line-height: 26px;
  color: var(--c-text-80);
}



/* ==========================================================================
   ㉙ RECHTSTEXT · Figma-Seite „㉙ Rechtstext · Muster (Datenschutz)"
   Desktop 666:207 (1440 × 2533) · Mobil 666:549 (390 × 4425)
   Gilt für Impressum und Datenschutz. Zeilenhöhen durchgehend 168 %.
   ========================================================================== */

/* Figma lässt unter der Kurzantwort einen leeren Aktionsrahmen von 60 stehen.
   Statt eines Geisterelements steht die Luft hier im Polster: 20 Abstand +
   60 Rahmen + 56 Polster = 136. */
.seitenkopf--recht { padding-bottom: 136px; }

.rechtstext {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 44px;
  padding: 80px var(--rand-sektion) 96px;
  background: var(--c-weiss);
}

/* Hinweisband · Papierfarbe mit rötlicher Kontur */
.rechtshinweis {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  align-self: stretch;
  padding: 20px 24px 22px;
  border: 1px solid rgba(196, 69, 61, 0.3);
  border-radius: 18px;
  background: var(--c-papier);
}
.rechtshinweis__marke {
  width: 150px;
  flex: none;
  font-size: 12px;
  font-weight: 800;
  line-height: 20px;       /* Figma: 168 % von 12 */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #99332e;
}
.rechtshinweis p {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 15.5px;
  font-weight: 400;
  line-height: 26px;
  color: var(--c-text-78);
}

.rechtsreihe { display: flex; align-items: flex-start; gap: 72px; align-self: stretch; }

/* Inhaltsverzeichnis · 300 breit, Mintkarte */
.rechtsinhalt {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 300px;
  flex: none;
  padding: 24px 24px 26px;
  border-radius: 20px;
  background: var(--c-mint);
}
.rechtsinhalt__marke {
  font-size: 12px;
  font-weight: 800;
  line-height: 20px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(11, 46, 51, 0.45);
}
.rechtsinhalt ol { display: flex; flex-direction: column; gap: 10px; }
.rechtsinhalt a {
  display: flex;
  gap: 10px;
  padding: 3px 0;
  font-size: 14.5px;
  font-weight: 400;
  line-height: 24px;       /* Figma: 168 % von 14,5 */
  color: var(--c-text-70);
  transition: color var(--t-kurz) var(--ease);
}
.rechtsinhalt__nr {
  width: 20px;
  flex: none;
  font-size: 14px;
  font-weight: 700;
  color: rgba(11, 46, 51, 0.35);
}
/* Figma zeichnet den ersten Eintrag ausgezeichnet – das ist der Zustand des
   gerade gelesenen Abschnitts; hier liegt er auf der Mauszeigerspur. */
.rechtsinhalt a:hover { font-weight: 800; color: var(--c-petrol); }
.rechtsinhalt a:hover .rechtsinhalt__nr { color: var(--c-petrol); }

.rechtsblock {
  display: flex;
  flex-direction: column;
  gap: 32px;
  flex: 1;
  min-width: 0;
}
.rechtsabschnitt { display: flex; flex-direction: column; gap: 14px; }
.rechtsabschnitt h2 {
  display: flex;
  gap: 12px;
  font-size: 20px;
  font-weight: 800;
  line-height: 34px;       /* Figma: 168 % von 20 */
  letter-spacing: 0;
  color: var(--c-petrol);
}
.rechtsabschnitt__nr { flex: none; color: var(--c-akzent); }
/* Zwischenüberschrift in langen Abschnitten – eine Stufe unter h2, mit
   etwas Luft davor, damit die Blöcke auseinanderfallen. */
.rechtsabschnitt h3 {
  margin-top: 10px;
  font-size: 16.5px;
  font-weight: 800;
  line-height: 28px;
  letter-spacing: 0;
  color: var(--c-petrol);
}
.rechtsabschnitt p {
  margin: 0;
  font-size: 16.5px;
  font-weight: 400;
  line-height: 28px;       /* Figma: 168 % von 16,5 */
  color: var(--c-text-78);
}
.rechtsabschnitt a { text-decoration: underline; text-underline-offset: 2px; }
.rechtsabschnitt a:hover { color: var(--c-akzent-dunkel); }
.rechtsabschnitt ul { display: flex; flex-direction: column; gap: 8px; }
.rechtsabschnitt li {
  position: relative;
  padding-left: 20px;
  font-size: 16.5px;
  font-weight: 400;
  line-height: 28px;
  color: var(--c-text-78);
}
.rechtsabschnitt li::before {
  content: "";
  position: absolute;
  left: 1.5px;
  top: 11.5px;             /* Figma: Punkt mittig auf der ersten Zeile */
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-akzent);
}
/* Offene Stellen im Text – bis zur anwaltlichen Prüfung sichtbar markiert. */
.rechtsnotiz {
  padding: 14px 18px 16px;
  border-left: 3px solid rgba(196, 69, 61, 0.45);
  border-radius: 0 10px 10px 0;
  background: var(--c-papier);
}



/* ==========================================================================
   ㉚ 404 · Figma-Seite „㉚ 404"
   Desktop 670:207 (1440 × 1125) · Mobil 670:484 (390 × 1989)
   Eine Sektion zwischen Kopf- und Fußleiste.
   ========================================================================== */
.fehlerseite {
  padding: 110px var(--rand-sektion) 118px;
  background: var(--c-mint);
}
.fehlerseite__reihe { display: flex; align-items: center; gap: 72px; }
.fehlerseite__zahl {
  margin: 0;
  flex: none;
  font-size: 200px;
  font-weight: 800;
  line-height: 200px;      /* Figma: 100 % */
  letter-spacing: 0;
  color: rgba(85, 199, 167, 0.5);
}
.fehlerseite__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  flex: 1;
  min-width: 0;
}
.fehlerseite__text h1 {
  font-size: 44px;
  font-weight: 800;
  line-height: 48px;       /* Figma: 110 % von 44 */
  letter-spacing: 0;
  color: var(--c-petrol);
}
.fehlerseite__lead {
  margin: 0;
  font-size: 17.5px;
  font-weight: 400;
  line-height: 27px;
  color: var(--c-text-75);
}

/* Oben bündig: der konturlose Mintknopf ist 53 hoch, der weiße mit Kontur
   55 – ohne flex-start zöge der Kasten beide auf dieselbe Höhe. */
.fehlerknoepfe { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 12px; }
.fehlerknopf {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px 14px 24px;
  border-radius: var(--r-pill);
  background: var(--c-akzent);
  font-size: 16px;
  font-weight: 800;
  line-height: 25px;       /* Figma: 156 % von 16 */
  color: var(--c-petrol);
  transition: background var(--t-kurz) var(--ease), border-color var(--t-kurz) var(--ease);
}
.fehlerknopf .weiterlink__pfeil { width: 16px; height: 16px; flex: none; color: var(--c-petrol); }
.fehlerknopf:hover { background: var(--c-akzent-hell); }
/* Der zweite Knopf steht in Weiß mit feiner Kontur – dadurch 55 statt 53. */
.fehlerknopf--hell {
  border: 1px solid var(--c-linie);
  background: var(--c-weiss);
}
.fehlerknopf--hell:hover { border-color: var(--c-akzent); background: var(--c-weiss); }



/* ==========================================================================
   ㉛ PARAGRAPHEN-LEXIKON · Figma-Seite „㉛ Paragraphen-Lexikon"
   Desktop 671:207 (1440 × 4269) · Mobil 671:547 (390 × 5746)
   Seitenkopf, Die schnelle Orientierung, Die Paragraphen im Einzelnen,
   Fragen, Abschluss.
   ========================================================================== */

/* --- Die schnelle Orientierung · 1440 × 1015 · Figma 683:567 -------------
   Zehn Karten im Dreierraster, Zeilenhöhen hier 152 %. */
.orientierung {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 96px var(--rand-sektion) 100px;
  background: var(--c-weiss);
}
.orientierung__kopf {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.orientierung__kopf h2 {
  width: 700px;
  max-width: 100%;
  font-size: 40px;
  font-weight: 800;
  line-height: 45px;       /* Figma: 112 % von 40 */
  letter-spacing: 0;
  color: var(--c-petrol);
}
.orientierung__lead {
  margin: 0;
  width: 620px;
  max-width: 100%;
  font-size: 17.5px;
  font-weight: 400;
  line-height: 27px;       /* Figma: 152 % von 17,5 */
  color: var(--c-text-75);
}

/* Auf dem Desktop ist das Karussell nur ein Raster: die vier Seiten lösen
   sich auf, die zehn Karten stehen zu dritt nebeneinander. */
.pkarussell__spur { display: flex; flex-wrap: wrap; gap: 16px; }
.pseite { display: contents; }
.pseite > ul { display: contents; }
.pkarussell__steuerung { display: none; }

.pgraph {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  width: calc((100% - 32px) / 3);
  padding: 22px 22px 24px;
  border-radius: 18px;
  background: var(--c-mint);
}
.pgraph__kopf { display: flex; align-items: center; gap: 10px; align-self: stretch; }
.pgraph__kopf b {
  font-size: 19px;
  font-weight: 800;
  line-height: 29px;       /* Figma: 152 % von 19 */
  color: var(--c-petrol);
}
.pgraph__gesetz {
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(85, 199, 167, 0.18);
  font-size: 11.5px;
  font-weight: 800;
  line-height: 17px;
  color: #0f6654;
}
.pgraph p {
  margin: 0;
  align-self: stretch;
  font-size: 15.5px;
  font-weight: 400;
  line-height: 24px;
  color: var(--c-text-78);
}
.pgraph__fuss {
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  padding-top: 2px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 21px;
  color: var(--c-text-50);
}
.pgraph__fuss a {
  margin-left: auto;
  font-weight: 800;
  color: var(--c-text-90);
}
.pgraph__fuss a:hover { color: var(--c-akzent-dunkel); }

/* --- Die Paragraphen im Einzelnen · 1440 × 930 · Figma 683:764 -----------
   Sechs Aufklapper in zwei Spalten. Zeilenhöhen 164 %. */
.lexikon {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  padding: 96px var(--rand-sektion) 100px;
  background: var(--c-mint);
}
.lexikon__kopf { display: flex; flex-direction: column; gap: 14px; width: 760px; max-width: 100%; }
.lexikon .abschnittsmarke { line-height: 21px; }   /* Figma: 164 % von 13 */
.lexikon__kopf h2 {
  font-size: 40px;
  font-weight: 800;
  line-height: 46px;       /* Figma: 116 % von 40 */
  letter-spacing: 0;
  color: var(--c-petrol);
}

.lexeintraege {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 20px;
  align-self: stretch;
}
.lexeintrag {
  width: calc((100% - 20px) / 2);
  border-radius: 22px;
  background: var(--c-weiss);
  overflow: hidden;
}
.lexeintrag__band {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px 22px 16px 26px;
  background: var(--c-petrol);
  text-align: left;
  cursor: pointer;
}
.lexeintrag--sgbv .lexeintrag__band { background: #47478c; }
.lexeintrag__nr {
  flex: none;
  font-size: 18px;
  font-weight: 800;
  line-height: 30px;       /* Figma: 164 % von 18 */
  color: var(--c-weiss);
}
.lexeintrag__unter {
  flex: 1;
  min-width: 0;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 25px;
  color: rgba(255, 255, 255, 0.7);
}
.lexeintrag__zeichen {
  width: 20px;
  height: 10px;
  flex: none;
  color: var(--c-weiss);
  transition: transform var(--t-kurz) var(--ease);
}
.lexeintrag--offen .lexeintrag__zeichen { transform: rotate(180deg); }
/* display: flex schlägt das voreingestellte [hidden] – ohne diese Zeile
   stünden alle Einträge offen. */
.lexeintrag__inhalt[hidden] { display: none; }
.lexeintrag__inhalt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 24px 26px 26px;
}
.lexeintrag__inhalt p {
  margin: 0;
  align-self: stretch;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;       /* Figma: 164 % von 16 */
  color: var(--c-text-78);
}
.lexeintrag__mehr {
  gap: 9px;
  padding-top: 2px;
  font-size: 16px;
  line-height: 26px;
  color: var(--c-text-90);
}
.lexeintrag__mehr .weiterlink__pfeil { color: var(--c-petrol); }

.lexhinweis {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  align-self: stretch;
  margin: 0;
  padding: 18px 24px 20px;
  border-radius: 16px;
  background: var(--c-weiss);
  font-size: 15px;
  font-weight: 700;
  line-height: 25px;       /* Figma: 164 % von 15 */
  color: var(--c-text-78);
}
.lexhinweis__strich {
  width: 3px;
  flex: none;
  align-self: stretch;
  border-radius: 2px;
  background: var(--c-akzent);
}


@media (max-width: 1100px) {

  /* --- Seitenkopf mobil · 390 × 650 ------------------------------------
     Oben 96 statt der 40 aus Figma: dort liegt die Kopfleiste im Fluss,
     unsere schwebt über der Seite. */
  .seite--24-stunden-betreuung .seitenkopf { gap: 18px; padding: 96px 24px 48px; }
  .seite--24-stunden-betreuung .seitenkopf h1 { font-size: 32px; line-height: 34px; }
  .seite--24-stunden-betreuung .kurzantwort { width: auto; padding: 26px 28px; }
  .seite--24-stunden-betreuung .kurzantwort p { font-size: 18px; line-height: 31px; }
  .seite--24-stunden-betreuung .seitenkopf__aktionen { align-self: flex-start; }
  .seite--24-stunden-betreuung .seitenkopf__aktionen .knopf { width: auto; }

  /* --- Was das bedeutet mobil · 390 × 1382 ------------------------------ */
  .bedeutet { padding: 54px 22px 58px; }
  .bedeutet__reihe { flex-direction: column; align-items: center; gap: 32px; }
  .bedeutet__links { gap: 26px; align-self: stretch; }
  /* Figma setzt die Überschrift mobil auf 155 % statt der 110 % vom
     Desktop – dieselbe Eigenart wie auf der Einsatzgebiete-Seite. */
  .bedeutet__kopf h2 { font-size: 28px; line-height: 43px; }
  .bedeutet__lead { font-size: 16px; line-height: 25px; }
  .merkmale { gap: 14px; }
  .merkmal { padding: 20px 20px 22px; }
  .merkmal h3 { font-size: 17px; line-height: 26px; }
  .merkmal p { font-size: 15.5px; line-height: 24px; }
  .schichtuhr { width: 300px; height: 300px; }
  .schichtuhr__zahl { font-size: 40px; line-height: 40px; }
  .schichtuhr__wort { font-size: 14px; line-height: 22px; }
  .schichten { width: auto; align-self: stretch; gap: 14px; }

  /* --- Nachtwache mobil · 390 × 1338 ------------------------------------
     Die Kopfreihe bleibt auch mobil nebeneinander, die Mondscheibe wird
     kleiner. Die Merkpillen werden zu Karten mit Radius 16 und stapeln. */
  .nacht { gap: 30px; padding: 54px 22px 58px; }
  .nacht__kopfreihe { gap: 16px; }
  .nacht__kopf h2 { font-size: 28px; line-height: 43px; }   /* Figma mobil: 155 % */
  .nacht__lead { font-size: 16px; line-height: 25px; }
  .nacht__mond { width: 68px; height: 68px; }
  .nacht__mond svg { width: 32px; height: 32px; }
  .nachtband { gap: 14px; padding: 24px 20px 26px; }
  .nachtband__zeiten { height: 20px; font-size: 12px; line-height: 19px; }
  .aufgaben { flex-direction: column; align-items: stretch; gap: 12px; padding-top: 4px; }
  .aufgabe h3 { font-size: 17px; line-height: 26px; }
  .nachtpunkte { flex-direction: column; gap: 10px; }
  .nachtpunkte li {
    align-items: flex-start;
    padding: 12px 18px 13px 16px;
    border-radius: 16px;
    font-size: 15px;
    line-height: 23px;
  }
  .nacht__mehr { font-size: 15.5px; line-height: 21px; }

  /* --- Finanzierung mobil · 390 × 854 ----------------------------------- */
  .dauerfinanz { padding: 54px 22px 58px; }
  .dauerfinanz__reihe { flex-direction: column; gap: 28px; }
  .dauerfinanz__links { gap: 24px; align-self: stretch; }
  .dauerfinanz__kopf h2 { font-size: 28px; line-height: 43px; }   /* Figma mobil: 155 % */
  .dauerfinanz__lead { font-size: 16px; line-height: 25px; }
  .dauerfinanz__mehr { font-size: 15.5px; line-height: 24px; }
  .dauerfinanz__balken { width: auto; align-self: stretch; gap: 18px; }
  .saeulen { height: 54px; }
  .dauerfinanz__hinweis { font-size: 14.5px; line-height: 22px; }
  .quelle__text b { font-size: 16.5px; line-height: 26px; }
  .quelle__text span { font-size: 15px; line-height: 23px; }
}


/* --- Häkchen der 24-Stunden-Seite · Umrisse aus Figma ---------------------
   Figma setzt dort das Zeichen ✓ in Manrope. Die Schrift kennt das Zeichen
   nicht, also springt in Figma eine Ersatzschrift ein und zeichnet einen
   kalligrafischen Haken – im Browser wäre es eine andere Schrift und damit
   ein anderes Bild. Deshalb stehen hier die Umrisse genau so, wie Figma sie
   ausgibt. Maße wie im Entwurf: 10 × 11 in den Pillen, 11 × 12 im Kasten. */
.figmahaken { flex: none; }
.nachtpunkt__haken .figmahaken { width: 10px; height: 11px; }
.klaerung__haken .figmahaken { width: 11px; height: 12px; }
.seite--24-stunden-betreuung .nachtpunkt__haken,
.seite--24-stunden-betreuung .klaerung__haken {
  display: flex;
  align-items: center;
  width: 11px;
  height: 20px;
}
.seite--24-stunden-betreuung .klaerung__haken { width: 13px; }


@media (max-width: 1100px) {

  /* --- Seitenkopf mobil · 390 × 588 ------------------------------------- */
  .seite--persoenliche-assistenz .seitenkopf { gap: 18px; padding: 96px 24px 48px; }
  .seite--persoenliche-assistenz .seitenkopf h1 { font-size: 32px; line-height: 34px; }
  .seite--persoenliche-assistenz .kurzantwort { width: auto; padding: 26px 28px; }
  .seite--persoenliche-assistenz .kurzantwort p { font-size: 18px; line-height: 31px; }
  .seite--persoenliche-assistenz .seitenkopf__aktionen { align-self: flex-start; }
  .seite--persoenliche-assistenz .seitenkopf__aktionen .knopf { width: auto; }

  /* --- Der Unterschied mobil · 390 × 1139 -------------------------------- */
  .unterschied { gap: 30px; padding: 54px 22px 58px; }
  .unterschied__kopf { width: auto; align-self: stretch; }
  .unterschied__kopf h2 { font-size: 30px; line-height: 33px; }
  .unterschied__lead { font-size: 16px; line-height: 25px; }
  .assistenzorte { gap: 8px; }
  .assistenzort { padding: 11px 16px; font-size: 15px; line-height: 23px; }
  .unterschied__satz { font-size: 18px; line-height: 28px; }
  .grundsaetze { flex-direction: column; align-items: stretch; gap: 14px; }
  .grundsatz { padding: 20px 20px 22px; }
  .grundsatz h3 { font-size: 17.5px; line-height: 27px; }
  .grundsatz p { font-size: 15.5px; line-height: 24px; }

  /* --- Finanzierung mobil · 390 × 1412 ----------------------------------- */
  .assistenzgeld { gap: 30px; padding: 54px 22px 58px; }
  .assistenzgeld__kopf { width: auto; align-self: stretch; }
  .assistenzgeld__kopf h2 { font-size: 28px; line-height: 43px; }   /* Figma mobil: 155 % */
  .assistenzgeld__lead { font-size: 16px; line-height: 25px; }
  .geldwege { flex-direction: column; align-items: stretch; gap: 14px; }
  .geldweg { padding: 24px 22px 26px; gap: 14px; }
  .geldweg h3 { font-size: 19px; line-height: 29px; }
  .geldweg__text { font-size: 15px; line-height: 23px; }
  .geldweg__tun { font-size: 14.5px; line-height: 22px; }

  /* --- Seitenkopf mobil · 390 × 681 ------------------------------------- */
  .seite--nachtwache .seitenkopf { gap: 18px; padding: 96px 24px 48px; }
  .seite--nachtwache .seitenkopf h1 { font-size: 32px; line-height: 34px; }
  .seite--nachtwache .kurzantwort { width: auto; padding: 26px 28px; }
  .seite--nachtwache .kurzantwort p { font-size: 18px; line-height: 31px; }
  .seite--nachtwache .seitenkopf__aktionen { align-self: flex-start; }
  .seite--nachtwache .seitenkopf__aktionen .knopf { width: auto; }

  /* --- Warum die Nacht mobil · 390 × 1172 -------------------------------
     Die Kette stapelt; die Pfeile dazwischen zeichnet Figma mobil nicht. */
  .warumnacht { gap: 30px; padding: 54px 22px 58px; }
  .warumnacht__kopf { width: auto; align-self: stretch; }
  .warumnacht__kopf h2 { font-size: 28px; line-height: 44px; }   /* Figma mobil: 158 % */
  .warumnacht__lead { font-size: 16px; line-height: 25px; }
  /* Im Stapel müssen die Karten auf volle Breite ziehen; ohne stretch
     erbt die Kette das flex-start vom Desktop und die Karten werden
     unterschiedlich breit. */
  .kette { flex-direction: column; align-items: stretch; gap: 10px; }
  .kettenkarte { padding: 20px 20px 22px; }
  .kettenkarte:not(:last-child) { margin-right: 0; }
  .kettenpfeil { display: none; }
  .kettenkarte h3 { font-size: 17px; line-height: 27px; }
  .signalband { gap: 14px; padding: 20px 20px 22px; font-size: 15.5px; line-height: 24px; }

  /* --- Formen mobil · 390 × 1321 ----------------------------------------- */
  .nformen { gap: 30px; padding: 54px 22px 58px; }
  .nformen__kopf { width: auto; align-self: stretch; }
  .nformen__kopf h2 { font-size: 28px; line-height: 44px; }   /* Figma mobil: 156 % */
  .nformen__lead { font-size: 16px; line-height: 25px; }
  .nformen__fussnote { font-size: 14.5px; line-height: 23px; }
  .nformliste { flex-direction: column; align-items: stretch; gap: 14px; }
  .nform { padding: 24px 22px 26px; }
  .nform h3 { font-size: 20px; line-height: 31px; }
  .nform__text { font-size: 15.5px; line-height: 24px; }
  .wannblock p { font-size: 15px; line-height: 23px; }

  /* --- Aufgaben mobil · 390 × 952 ---------------------------------------- */
  .aufgabennacht { gap: 30px; padding: 54px 22px 58px; }
  .aufgabennacht__kopf { width: auto; align-self: stretch; }
  .aufgabennacht__kopf h2 { font-size: 28px; line-height: 44px; }   /* Figma mobil: 156 % */
  .protokoll { width: auto; align-self: stretch; }
  .protokoll__kopf { padding: 20px; }
  .protokoll__kopf h3 { font-size: 19px; line-height: 30px; }
  .protokollzeilen li { padding: 14px 20px; font-size: 15.5px; line-height: 24px; }
  .protokoll__fuss { padding: 16px 20px 18px; font-size: 14px; line-height: 22px; }

  /* --- Seitenkopf mobil · 390 × 622 ------------------------------------- */
  .seite--karriere .seitenkopf { gap: 18px; padding: 96px 24px 48px; }
  .seite--karriere .seitenkopf h1 { font-size: 32px; line-height: 34px; }
  .seite--karriere .kurzantwort { width: auto; padding: 26px 28px; }
  .seite--karriere .kurzantwort p { font-size: 18px; line-height: 31px; }
  .seite--karriere .seitenkopf__aktionen { align-self: flex-start; }
  .seite--karriere .seitenkopf__aktionen .knopf { width: auto; }

  /* --- Offene Stellen mobil · 390 × 1923 --------------------------------
     Die Gruppenkopfzeile stapelt, die Karten stehen untereinander. */
  .stellen { gap: 30px; padding: 54px 22px 58px; }
  .stellen__kopf { width: auto; align-self: stretch; }
  .stellen__kopf h2 { font-size: 28px; line-height: 44px; }   /* Figma mobil: 156 % */
  .stellen__lead { font-size: 16px; line-height: 25px; }
  .stellengruppe { gap: 14px; }
  .stellengruppe__kopf { flex-direction: column; align-items: flex-start; gap: 2px; }
  .stellengruppe__kopf h3 { font-size: 19px; line-height: 30px; }
  .stellengruppe__kopf span { font-size: 14.5px; line-height: 23px; }
  .stellenliste { flex-direction: column; align-items: stretch; gap: 12px; }
  .stelle { padding: 20px 20px 22px; }
  .stelle h4 { font-size: 17.5px; line-height: 27px; }
  .initiativ { flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px 20px 20px; }
  .initiativ p { font-size: 15px; line-height: 23px; }
  .initiativ__mehr { font-size: 15px; line-height: 23px; }

  /* --- Was wir bieten mobil · 390 × 1717 --------------------------------- */
  .bieten { gap: 30px; padding: 54px 22px 58px; }
  .bieten__kopf { width: auto; align-self: stretch; }
  .bieten__kopf h2 { font-size: 28px; line-height: 44px; }   /* Figma mobil: 156 % */
  .bietenfakten { flex-direction: column; align-items: stretch; gap: 12px; }
  .bietenfakt { width: auto; padding: 20px 20px 22px; }
  .bietenfakt__zahl { font-size: 26px; line-height: 27px; }
  .bietenfakt__unter { font-size: 15px; line-height: 23px; }
  .bietenfakt h3 { font-size: 16px; line-height: 25px; }
  .bietenfakt p { font-size: 14.5px; line-height: 23px; }

  /* --- Bewerbung mobil · 390 × 1003 -------------------------------------
     Kopf linksbündig, Schritte gestapelt, die Verbindungslinie entfällt. */
  .bewerbung { gap: 30px; padding: 54px 22px 58px; }
  .bewerbung__kopf { align-items: flex-start; text-align: left; }
  .bewerbung__kopf h2 { width: auto; font-size: 28px; line-height: 44px; }   /* Figma mobil: 156 % */
  .bewerbung__lead { width: auto; font-size: 16px; line-height: 25px; }
  .bewerbungsschritte { padding-top: 0; }
  .bewerbungsschritte__linie { display: none; }
  .wegschritte { flex-direction: column; align-items: stretch; gap: 18px; }
  .wegschritt__text h3 { font-size: 18px; line-height: 28px; }

  /* --- Stellenseiten mobil · Figma 621:719 ------------------------------- */
  .seitenkopf--stelle { gap: 18px; padding: 96px 24px 48px; }
  .seitenkopf--stelle .seitenkopf__reihe { gap: 16px; }
  /* Ohne min-width weicht die Titelspalte langen Wörtern nicht und
     schiebt die Scheibe aus dem Bild – siehe Pflegedienstleitung. */
  .seitenkopf--stelle .seitenkopf__titel { gap: 14px; min-width: 0; }
  .seitenkopf--stelle h1 { font-size: 32px; line-height: 34px; }
  .seitenkopf--stelle .seitenkopf__symbol { width: 66px; height: 66px; }
  .seitenkopf--stelle .seitenkopf__symbol svg { width: 34px; height: 34px; }
  .seitenkopf--stelle .kurzantwort { width: auto; padding: 26px 28px; }
  .seitenkopf--stelle .kurzantwort p { font-size: 18px; line-height: 31px; }
  .seitenkopf--stelle .seitenkopf__aktionen { align-self: flex-start; }
  .seitenkopf--stelle .seitenkopf__aktionen .knopf { width: auto; }

  /* --- Aufgaben und Profil mobil · 390 × 1049 ---------------------------- */
  .aufgabenprofil { gap: 32px; padding: 54px 22px 58px; }
  .apblock { width: auto; align-self: stretch; gap: 18px; }
  .apblock__kopf h2 { font-size: 24px; line-height: 37px; }
  .appunkte { gap: 12px; }
  .appunkte li { font-size: 15.5px; line-height: 24px; }
  .aphaken svg { margin-top: 3.2px; }
  .klartext { flex-direction: column; gap: 12px; padding: 24px 22px 26px; }
  .klartext h3 { width: auto; font-size: 20px; line-height: 31px; }
  .klartext p { font-size: 15.5px; line-height: 24px; }

  /* Die Scheibe der Bieten-Sektion zeichnet Figma mobil nicht. */
  .bieten__scheibe { display: none; }

  /* --- Seitenkopf mobil · 390 × 645 ------------------------------------- */
  .seite--ausbildung .seitenkopf { gap: 18px; padding: 96px 24px 48px; }
  .seite--ausbildung .seitenkopf h1 { font-size: 32px; line-height: 34px; }
  .seite--ausbildung .kurzantwort { width: auto; padding: 26px 28px; }
  .seite--ausbildung .kurzantwort p { font-size: 18px; line-height: 31px; }
  .seite--ausbildung .seitenkopf__aktionen { align-self: flex-start; }
  .seite--ausbildung .seitenkopf__aktionen .knopf { width: auto; }

  /* --- Die Ausbildung mobil · 390 × 1211 --------------------------------
     Die Scheibe zeichnet Figma mobil nicht. */
  .ausbildung { gap: 30px; padding: 54px 22px 58px; }
  .ausbildung__scheibe { display: none; }
  .ausbildung__kopf h2 { font-size: 28px; line-height: 44px; }   /* Figma mobil: 156 % */
  .ausbildung__lead { font-size: 16px; line-height: 25px; }
  .lernorte { flex-direction: column; align-items: stretch; gap: 14px; }
  .lernort { padding: 24px 22px 26px; }
  .lernort__zahl { font-size: 40px; line-height: 40px; }
  .lernort h3 { font-size: 18px; line-height: 28px; }
  .lernort p { font-size: 15.5px; line-height: 24px; }
  .garantie { flex-direction: column; align-items: flex-start; gap: 16px; padding: 22px 22px 24px; }
  .garantie__text h3 { font-size: 19px; line-height: 30px; }
  .garantie__text p { font-size: 15.5px; line-height: 24px; }
  .garantie__knopf { font-size: 15.5px; line-height: 24px; }

  .zwischenruf { flex-direction: column; gap: 10px; padding: 22px 22px 24px; }
  .zwischenruf h3 { width: auto; font-size: 20px; line-height: 31px; }
  .zwischenruf p { font-size: 15.5px; line-height: 24px; }

  /* --- Rechtstexte mobil · Figma 666:549 --------------------------------- */
  .seitenkopf--recht { gap: 18px; padding: 96px 24px 126px; }
  .seitenkopf--recht h1 { font-size: 32px; line-height: 34px; }
  .seitenkopf--recht .kurzantwort { width: auto; padding: 26px 28px; }
  .seitenkopf--recht .kurzantwort p { font-size: 18px; line-height: 31px; }

  .rechtstext { gap: 30px; padding: 44px 22px 56px; }
  .rechtshinweis { flex-direction: column; gap: 10px; padding: 18px 18px 20px; }
  .rechtshinweis__marke { width: auto; }
  .rechtshinweis p { font-size: 15px; line-height: 25px; }
  .rechtsreihe { flex-direction: column; gap: 26px; }
  .rechtsinhalt { width: auto; align-self: stretch; padding: 20px 20px 22px; }
  .rechtsblock { gap: 26px; }
  .rechtsabschnitt { gap: 12px; }
  .rechtsabschnitt h2 { font-size: 18px; line-height: 30px; }
  .rechtsabschnitt p,
  .rechtsabschnitt li { font-size: 15.5px; line-height: 26px; }
  .rechtsabschnitt li::before { top: 10.5px; }

  /* --- 404 mobil · 390 × 593 -------------------------------------------- */
  .fehlerseite { padding: 60px 22px 64px; }
  .fehlerseite__reihe { flex-direction: column; align-items: center; gap: 24px; }
  .fehlerseite__zahl { font-size: 120px; line-height: 120px; }
  .fehlerseite__text { align-self: stretch; gap: 16px; }
  .fehlerseite__text h1 { font-size: 30px; line-height: 33px; }
  .fehlerseite__lead { font-size: 16px; line-height: 25px; }
  .fehlerknopf { font-size: 15.5px; line-height: 24px; }

  /* --- Lexikon mobil · Figma 671:547 ------------------------------------ */
  .seite--paragraphen-lexikon .seitenkopf { gap: 18px; padding: 96px 24px 48px; }
  .seite--paragraphen-lexikon .seitenkopf h1 { font-size: 32px; line-height: 34px; }
  .seite--paragraphen-lexikon .kurzantwort { width: auto; padding: 26px 28px; }
  .seite--paragraphen-lexikon .kurzantwort p { font-size: 18px; line-height: 31px; }
  .seite--paragraphen-lexikon .seitenkopf__aktionen { align-self: flex-start; }
  .seite--paragraphen-lexikon .seitenkopf__aktionen .knopf { width: auto; }

  /* Die Orientierung wird zum Karussell: vier Seiten zu je drei Karten,
     rechts ohne Polster, damit die nächste Seite angeschnitten hereinragt. */
  .orientierung { gap: 28px; padding: 54px 0 58px 22px; }
  .orientierung__kopf { align-items: flex-start; text-align: left; padding-right: 22px; }
  .orientierung__kopf h2 { width: auto; font-size: 28px; line-height: 43px; }
  .orientierung__lead { width: auto; font-size: 16px; line-height: 24px; }
  .pkarussell { display: flex; flex-direction: column; gap: 16px; }
  .pkarussell__spur {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;   /* jede Seite so hoch wie ihr Inhalt */
    gap: 14px;
    padding-right: 22px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .pkarussell__spur::-webkit-scrollbar { display: none; }
  .pseite { display: block; width: 322px; flex: none; scroll-snap-align: start; }
  .pseite > ul { display: flex; flex-direction: column; gap: 12px; }
  /* Mobil sind die Karten schmaler gepolstert und eine Spur kleiner gesetzt. */
  .pgraph { width: auto; padding: 18px 18px 20px; }
  .pgraph__kopf b { font-size: 18px; line-height: 27px; }
  .pgraph p { font-size: 15px; line-height: 23px; }
  .pkarussell__steuerung { display: flex; flex-direction: column; gap: 10px; padding-right: 22px; }
  .pkarussell__punkte { display: flex; align-items: center; gap: 7px; }
  .pkarussell__punkt {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(11, 46, 51, 0.18);
    transition: background var(--t-kurz) var(--ease);
  }
  .pkarussell__punkt.ist-an { background: var(--c-akzent); }
  .pkarussell__stand {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
    color: var(--c-text-50);
  }

  /* --- Die Paragraphen im Einzelnen mobil · 390 × 1301 ------------------- */
  .lexikon { gap: 28px; padding: 54px 22px 58px; }
  .lexikon__kopf { width: auto; align-self: stretch; }
  .lexikon__kopf h2 { font-size: 28px; line-height: 32px; }   /* Figma: 116 % von 28 */
  .lexeintraege { flex-direction: column; align-items: stretch; gap: 12px; }
  .lexeintrag { width: auto; }
  .lexeintrag__band { padding: 16px 18px 16px 20px; }
  /* Mobil ist die Paragraphenzeile eine Spur kleiner – dadurch misst das
     zugeklappte Band 60 statt 62. */
  .lexeintrag__nr { font-size: 17px; line-height: 28px; }
  .lexeintrag__inhalt { padding: 20px 20px 22px; }
  .lexeintrag__inhalt p,
  .lexeintrag__mehr { font-size: 15.5px; line-height: 25px; }
  .lexhinweis { padding: 16px 18px 18px; font-size: 14.5px; line-height: 24px; }
}

/* --- Hinweis nach dem Absenden ------------------------------------------
   Erscheint erst, wenn jemand abschickt: das E-Mail-Programm öffnet sich,
   und falls keines eingerichtet ist, stehen hier Adresse und Nummer. */
.mailhinweis {
  margin: 0;
  padding-top: 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: var(--c-text-70);
}
/* Auf den dunklen Karten hell – als Nachsatz geschrieben, damit die
   Klassenprüfung nicht zwei Bauteile namens .kdaten vermutet. */
.mailhinweis:is(.rueckruf *) { color: var(--c-hell-72); }
.mailhinweis:is(.kdaten *) { color: var(--c-hell-72); }


/* =========================================================================
   EINWILLIGUNG · Leiste am unteren Rand
   Nicht aus Figma – dort ist kein Banner gezeichnet. Deshalb bewusst
   zurückhaltend: Flächen, Radien und Knöpfe aus dem bestehenden System,
   keine neue Formensprache. Die Leiste verdeckt die Seite nicht, man kann
   weiterlesen und -scrollen, ohne sich zu entscheiden.
   ========================================================================= */

.einwilligung {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;              /* unter dem Kopf (100), über dem Inhalt */
  background: var(--c-weiss);
  border-top: 1px solid var(--c-linie);
  box-shadow: 0 -8px 32px rgba(11, 46, 51, 0.10);
  animation: einwilligung-auf 320ms var(--ease) both;
}

@keyframes einwilligung-auf {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .einwilligung { animation: none; }
}

.einwilligung__innen {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 20px 120px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.einwilligung__text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-15);
  line-height: var(--lh-text);
  color: var(--c-text-2);
}

.einwilligung__text a {
  color: var(--c-akzent-dunkel);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.einwilligung__knoepfe {
  flex: none;
  display: flex;
  gap: 12px;
}

/* Beide Knöpfe gleich breit und gleich groß: Ablehnen darf nicht
   unscheinbarer sein als Zustimmen, sonst ist die Einwilligung nicht frei. */
.einwilligung__knopf {
  min-width: 190px;
  padding: 15px 28px;
  font-size: var(--fs-16);
}

/* Widerruf im Fuß · erscheint erst, wenn zugestimmt wurde */
.fuss__widerruf {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 1100px) {
  .einwilligung__innen { padding: 20px 40px; }
}

@media (max-width: 860px) {
  .einwilligung__innen {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 20px;
  }
  .einwilligung__knoepfe { flex-direction: row; }
  .einwilligung__knopf { flex: 1 1 0; min-width: 0; }
  .einwilligung__text { font-size: var(--fs-14); }
  .einwilligung__text a { white-space: normal; }
}