/* =====================================================================
   Local SEO Agentur GmbH, Haupt-Stylesheet
   Übersetzung des Entwurfs (Claude Design) in wiederverwendbare Klassen.
   Reihenfolge: Schriften · Variablen · Grundlagen · Layout · Bausteine ·
                Seitenbereiche · Formulare · Verhalten · Umbrüche
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Schriften, lokal eingebunden, kein externer Request
   --------------------------------------------------------------------- */
@font-face {
  /* Roboto trägt Überschriften und Fließtext.
     Der Gestaltungsentwurf sieht Nunito vor, das ist aber eine gerundete
     Schrift und wirkt im Fließtext weich. Auf pleasereply.info stehen die
     Überschriften in Roboto; danach richten wir uns. Nunito liegt noch
     daneben, falls die Entscheidung zurückgedreht werden soll. */
  font-family: 'Roboto';
  src: url('/ressourcen/schriften/roboto-variabel-latein.woff2') format('woff2-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  /* Für technische Kleinangaben: Kennzahlen, Auszeichnungen, Messwerte. */
  font-family: 'Roboto Mono';
  src: url('/ressourcen/schriften/roboto-mono-variabel-latein.woff2') format('woff2-variations');
  font-weight: 100 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------------
   2. Gestaltungsvariablen
   --------------------------------------------------------------------- */
:root {
  /* Token-Vertrag aus den Umsetzungsnotizen des Gestaltungsentwurfs.
     Zwei Regeln stehen über allem:

     Mint (--akzent) ist Fläche, Ziffer, Punkt, Unterstrich oder Rahmen.
     Niemals Textfarbe auf hellem Grund, dort liegt der Kontrast bei
     1,3:1. Für Text gibt es --akzent-tief.

     Dasselbe gilt für das helle Blau (--akzent-blau, #00D4FF, aus der
     Bestandsseite): 1,77:1 auf Weiß. Das reicht weder für Text (4,5:1)
     noch für einen Fokusrahmen (3:1). Es ist eine FLÄCHENFARBE.

     --akzent-tief ist der lesbare Vertreter derselben Blaufamilie:
     5,85:1 auf Weiß, 5,46:1 auf --sanft. Dort, wo früher ein Dunkelgrün
     stand, steht jetzt dieses Blau. Im Dunkelmodus braucht es die
     Abdunklung nicht, dort ist --akzent-tief unmittelbar das helle Blau
     (9,5:1 auf dem Seitengrund).

     --grund und --karte trennen Seitengrund von Kartenfläche, --kontur
     und --link halten Rahmen und Linkfarbe modusabhängig. Nur deshalb
     kommt der Dunkelmodus ohne zweites Stylesheet aus. */

  --marke:       #062A47;
  --tief:        #041E33;
  --akzent:      #29FEAA;
  --akzent-blau: #00D4FF;
  --akzent-tief: #0A6E86;
  --sanft:       #EAFBF3;

  --cta:         #29FEAA;
  --cta-hover:   #15E496;
  --cta-text:    #041E33;

  --tinte:       #16293D;
  --gedaempft:   #5A6B7C;
  --linie:       #E3E8ED;
  --flaeche:     #F5F7F9;
  --grund:       #FFFFFF;
  --karte:       #FFFFFF;
  --kontur:      #062A47;
  --link:        #062A47;
  --link-hover:  var(--akzent-tief);

  /* Farbband, im Entwurf über die Variante „Blauanteil" steuerbar */
  --band:        #062A47;
  --band-text:   #FFFFFF;
  --band-sub:    rgba(255, 255, 255, .74);
  --band-linie:  rgba(255, 255, 255, .14);

  --fehler:         #B4372A;
  --fehler-flaeche: #FCF3F1;

  --schrift-ueberschrift: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --schrift-text:         'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --schrift-mono:         'Roboto Mono', ui-monospace, 'SF Mono', monospace;

  /* Höhe der mitlaufenden Kopfzeile. Alles, was selbst klebt oder per
     Sprungmarke angesteuert wird, muss diesen Wert kennen — sonst
     verschwindet es unter der Kopfzeile. Steht hier, damit es beim
     nächsten Umbau der Kopfzeile an einer Stelle nachgezogen wird. */
  --kopfhoehe: 73px;

  --breite: 1240px;
  --rand: 32px;
  --radius-klein: 12px;
  --radius: 20px;
  --radius-gross: 24px;

  --schatten-karte: 0 1px 2px rgba(6, 42, 71, .04), 0 12px 32px -18px rgba(6, 42, 71, .18);
  --schatten-menue: 0 18px 50px -20px rgba(6, 42, 71, .45);

  /* Pfeil aus einem Rahmen heraus, für Verweise auf fremde Auftritte */
  --symbol-extern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4L10 14'/%3E%3Cpath d='M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E");
}

/* Dunkelmodus. Umgeschaltet über data-modus am <html>, gesetzt von
   ressourcen/js/haupt.js, gemerkt in localStorage. Nur die Token
   wechseln, keine einzige Regel weiter unten weiß davon. */
:root[data-modus="dunkel"] {
  --tinte:       #EEF4F8;
  --gedaempft:   #9FB4C4;
  --linie:       rgba(255, 255, 255, .13);
  --flaeche:     #062737;
  --grund:       #04202F;
  --karte:       #0A3149;
  --sanft:       rgba(41, 254, 170, .10);
  --band:        #031825;
  --akzent-tief: #00D4FF;
  --kontur:      rgba(255, 255, 255, .45);
  --link:        #DDF7EC;
  --link-hover:  var(--akzent);
  --fehler:         #FF9C8A;
  --fehler-flaeche: rgba(180, 55, 42, .18);
  --schatten-karte: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 34px -20px rgba(0, 0, 0, .6);
}

/* Variante mit wenig Dunkelblau, per data-Attribut am <html> umschaltbar.
   Unabhängig vom Hell-/Dunkel-Modus: sie steuert nur, ob die Bänder
   Navy oder hell sind. Im Dunkelmodus greifen darunter die Token aus
   :root[data-modus="dunkel"]. */
:root[data-blauanteil="wenig"] {
  --band: var(--karte);
  --band-text: var(--tinte);
  --band-sub: var(--gedaempft);
  --band-linie: var(--linie);
}

/* ---------------------------------------------------------------------
   3. Grundlagen
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* Das hidden-Attribut muss gewinnen.

   Der Browser setzt dafür [hidden] { display: none } in seinem eigenen
   Stylesheet — mit der Spezifität eines Attributselektors. Jede
   Klassenregel mit display schlägt das. Ein `.etwas { display: flex }`
   und ein `hidden` am selben Element ergeben: sichtbar.

   Das ist keine Theorie, es ist passiert: Die zugeklappten Abschnitte im
   Blockeditor blieben offen (.block__koerper hat display: grid), und die
   Blätterknöpfe des Rezensionssliders standen da, obwohl es nichts zu
   blättern gab (.rezensionen__steuerung hat display: flex).

   !important ist hier richtig und nicht faul: hidden ist eine Aussage
   über die Existenz des Elements für den Betrachter, keine Frage der
   Gestaltung. Es gibt keinen Fall, in dem eine Layoutregel sie
   überstimmen dürfte. */
[hidden] { display: none !important; }


html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

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

body {
  margin: 0;
  background: #fff;
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  font-family: var(--schrift-ueberschrift);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: var(--marke); text-decoration: none; }
a:hover { color: var(--akzent-tief); }

/* Verweise auf fremde Auftritte bekommen ein Symbol nachgestellt. Die Klasse
   setzt sicherer_html() automatisch, redaktionelle Texte brauchen also nichts
   weiter. Das Symbol nimmt die Schriftfarbe an und folgt damit dem Hover. */
.extern::after {
  content: '';
  display: inline-block;
  width: .72em; height: .72em;
  margin-left: .3em;
  vertical-align: -.02em;
  background-color: currentColor;
  -webkit-mask: var(--symbol-extern) no-repeat center / contain;
          mask: var(--symbol-extern) no-repeat center / contain;
}
/* Ohne Maskenunterstützung ein schlichter Pfeil statt einer leeren Fläche */
@supports not ((-webkit-mask-image: none) or (mask-image: none)) {
  .extern::after {
    content: '\2197';
    width: auto; height: auto;
    background: none;
    font-size: .85em;
  }
}
/* Schaltflächen und Bildkacheln tragen ihre eigene Kennzeichnung.
   Getrennte Regeln, damit ein Browser ohne :has() nur die zweite verwirft. */
.knopf.extern::after { content: none; }
.extern:has(img)::after { content: none; }

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

button { font-family: inherit; }

ul, ol { margin: 0; padding: 0; }

hr { border: 0; border-top: 1px solid var(--linie); margin: 32px 0; }

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

/* Sprungmarke für Tastatur- und Screenreader-Nutzung */
.sprungmarke {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 14px 22px;
  background: var(--marke);
  color: #fff;
  border-radius: 0 0 12px 0;
  font-weight: 600;
}
.sprungmarke:focus { left: 0; color: #fff; }

/* Warum min(…px, 100%) statt einer nackten Pixelzahl in den Rastern:

   minmax(320px, 1fr) heißt „mindestens 320 Pixel" — auch dann, wenn nur
   272 zur Verfügung stehen. Die Spalte wird dann breiter als ihr
   Behälter, und die Seite lässt sich quer schieben. Auf einem 320 Pixel
   breiten Telefon war das der Kontaktbereich.

   min(320px, 100%) nimmt die 320, solange sie hineinpassen, und sonst
   den vorhandenen Platz. Am Umbruchverhalten auf größeren Bildschirmen
   ändert sich nichts. */

/* Text nur für Vorlesegeräte.

   ACHTUNG, eine Falle, die schon zweimal zugeschlagen hat: Das Element
   ist position: absolute und entkommt damit der Beschneidung eines
   Vorfahren, WENN dieser nicht selbst positioniert ist. Ohne left/top
   landet es an seiner statischen Stelle — in einer seitlich scrollenden
   Leiste also weit rechts, gemessen im Dokument. Die Folge ist eine
   Seite, die sich mobil quer schieben lässt.

   Jeder Kasten, der waagerecht beschneidet UND solchen Text enthält,
   braucht deshalb position: relative. Betroffen sind bisher
   .leistungstabelle, .rezensionen__spur, .linkkarte__ziel, .fallgross
   und .fallklein. */
.nur-screenreader {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------------
   4. Layout
   --------------------------------------------------------------------- */
.seite { min-height: 100vh; display: flex; flex-direction: column; }
.seite__inhalt { flex: 1; }

.behaelter {
  max-width: var(--breite);
  margin: 0 auto;
  padding-inline: var(--rand);
}
.behaelter--schmal { max-width: 900px; }
.behaelter--text   { max-width: 760px; }

.abschnitt { padding-block: 104px; }
.abschnitt--eng    { padding-block: 88px; }
.abschnitt--knapp  { padding-block: 72px; }
.abschnitt--weiss  { background: #fff; }
.abschnitt--flaeche{ background: var(--flaeche); }
.abschnitt--marke  { background: var(--marke); color: #fff; }
.abschnitt--tief   { background: var(--tief);  color: #fff; }
.abschnitt--band   { background: var(--band);  color: var(--band-text); }
.abschnitt--marke h1, .abschnitt--marke h2, .abschnitt--marke h3,
.abschnitt--tief  h1, .abschnitt--tief  h2, .abschnitt--tief  h3 { color: #fff; }

.raster { display: grid; gap: 24px; }
.raster--2 { grid-template-columns: repeat(2, 1fr); }
.raster--3 { grid-template-columns: repeat(3, 1fr); }
.raster--4 { grid-template-columns: repeat(4, 1fr); }
.raster--6 { grid-template-columns: repeat(6, 1fr); }

/* Zweispaltige Abschnitte (Bild + Text, Text + Kasten) */
.zweispaltig { display: grid; grid-template-columns: .95fr 1.05fr; gap: 72px; align-items: center; }
.zweispaltig--gleich { grid-template-columns: 1fr 1fr; }
.zweispaltig--oben   { align-items: start; }
.zweispaltig--breit  { grid-template-columns: 1.15fr .85fr; }
.zweispaltig--schmal { grid-template-columns: 1.1fr .9fr; }

.stapel { display: flex; flex-direction: column; }
.stapel--klein { gap: 10px; }
.stapel--mittel { gap: 20px; }
.stapel--gross { gap: 32px; }

/* ---------------------------------------------------------------------
   5. Typografische Bausteine
   --------------------------------------------------------------------- */
/* Kennzeichnung über einer Überschrift, etwa "Digital-Lexikon".
   Bewusst zurückhaltend: Grau auf hellem Grund, Weiß auf dunklem. */
.marke-zeile {
  font: 500 13.5px/1 var(--schrift-text);
  color: var(--gedaempft);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.seitenkopf      .marke-zeile,
.abschnitt--marke .marke-zeile,
.abschnitt--tief  .marke-zeile,
.abschnitt--band  .marke-zeile { color: rgba(255, 255, 255, .75); }

.ueberschrift-xl  { font-size: 66px; }
.ueberschrift-l   { font-size: 56px; }
.ueberschrift-m   { font-size: 44px; }
.ueberschrift-s   { font-size: 36px; }

.vorspann {
  font-size: 20px;
  line-height: 1.55;
  color: var(--gedaempft);
  max-width: 620px;
}
.abschnitt--marke .vorspann,
.abschnitt--tief  .vorspann { color: rgba(255, 255, 255, .78); }
.abschnitt--band  .vorspann { color: var(--band-sub); }

.hinweis { font-size: 15px; color: var(--gedaempft); }

/* Redaktioneller Fließtext aus dem CMS */
.fliesstext { font-size: 17.5px; color: var(--tinte); }
.fliesstext > * + * { margin-top: 20px; }

/* Zeilenlaenge begrenzen, wo der Fliesstext den ganzen Behaelter fuellt.

   Auf „Ueber uns“, in den Rechtstexten und ueberall dort, wo .fliesstext
   unmittelbar am .behaelter haengt, lief jede Zeile ueber 1176 Pixel.
   Das sind rund 134 Zeichen. Lesbar sind 60 bis 80: Darueber findet das
   Auge beim Zeilensprung den Anfang der naechsten Zeile nicht mehr
   zuverlaessig, und die Seite wirkt als Wand, noch bevor man den ersten
   Satz gelesen hat.

   Begrenzt werden die Kinder, nicht der Behaelter selbst. So bleibt der
   Textblock links buendig zu den Abschnitten darueber und darunter,
   statt als schmale Spalte in der Mitte zu schweben.

   Nur direkte Kinder und nur am .behaelter: Steht .fliesstext in einer
   Spalte, etwa neben den Bildern einer Fallstudie, ist die Breite schon
   durch die Spalte bestimmt und eine zweite Grenze waere zu eng.

   Tabellen und Bilder bleiben aussen vor, die brauchen ihren Platz. */
.behaelter.fliesstext > p,
.behaelter.fliesstext > ul,
.behaelter.fliesstext > ol,
.behaelter.fliesstext > h2,
.behaelter.fliesstext > h3,
.behaelter.fliesstext > h4,
.behaelter.fliesstext > blockquote { max-width: 72ch; }
.fliesstext h2 { font-size: 32px; margin-top: 44px; color: var(--marke); }
.fliesstext h3 { font-size: 24px; margin-top: 34px; color: var(--marke); }
.fliesstext h4 { font-size: 20px; margin-top: 28px; color: var(--marke); }
.fliesstext p  { color: var(--gedaempft); }
.fliesstext ul, .fliesstext ol { padding-left: 22px; color: var(--gedaempft); }
.fliesstext li + li { margin-top: 8px; }
.fliesstext a { text-decoration: underline; text-underline-offset: 3px; }
.fliesstext blockquote {
  margin: 32px 0;
  padding: 24px 28px;
  background: var(--sanft);
  border-radius: 16px;
  font-family: var(--schrift-ueberschrift);
  font-size: 21px;
  line-height: 1.45;
  color: var(--marke);
}
.fliesstext img { border-radius: 16px; margin-block: 12px; }
.fliesstext table { width: 100%; border-collapse: collapse; font-size: 16px; }
.fliesstext th, .fliesstext td { padding: 12px 14px; border-bottom: 1px solid var(--linie); text-align: left; }
.fliesstext th { color: var(--marke); font-weight: 600; }
.fliesstext code {
  font-family: ui-monospace, Menlo, monospace; font-size: .9em;
  background: var(--flaeche); padding: 2px 6px; border-radius: 6px;
  overflow-wrap: anywhere;
}
/* Breite Tabellen und Codeblöcke in redaktionellen Texten scrollen in sich
   selbst, statt die ganze Seite breiter zu machen. Eine Tabelle mit vier
   Spalten passt auf einem Telefon sonst nicht. */
.fliesstext pre { overflow-x: auto; max-width: 100%; }
@media (max-width: 720px) {
  .fliesstext table { display: block; overflow-x: auto; white-space: nowrap; }
  .fliesstext th, .fliesstext td { padding: 10px 12px; }
}

/* ---------------------------------------------------------------------
   6. Schaltflächen und Pillen
   --------------------------------------------------------------------- */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 999px;
  font: 600 16.5px/1 var(--schrift-text);
  padding: 17px 32px;
  border: none;
  cursor: pointer;
  text-align: center;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.knopf--cta { background: var(--cta); color: var(--cta-text); }
.knopf--cta:hover { background: var(--cta-hover); color: var(--cta-text); }

.knopf--umriss {
  background: none;
  border: 1.5px solid var(--marke);
  color: var(--marke);
  font-weight: 500;
  padding: 15.5px 30px;
}
.knopf--umriss:hover { background: var(--sanft); color: var(--marke); }

.knopf--umriss-hell {
  background: none;
  border: 1.5px solid rgba(255, 255, 255, .4);
  color: #fff;
  font-weight: 500;
  padding: 15.5px 30px;
}
.knopf--umriss-hell:hover { border-color: var(--akzent); color: var(--akzent); }

.knopf--hell { background: #fff; color: var(--marke); }
.knopf--hell:hover { background: var(--sanft); color: var(--marke); }

.knopf--klein { padding: 13px 24px; font-size: 15px; }
.knopf--klein.knopf--umriss { padding: 11.5px 22px; }

.knopfreihe { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.pille {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--sanft);
  color: var(--marke);
  font: 500 13.5px/1.4 var(--schrift-text);
}
.pille--punkt::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--marke);
  flex: none;
}
.pille--hell { background: rgba(255, 255, 255, .12); color: #fff; }
.pille--klein { padding: 6px 12px; font-size: 13px; }

.pillenreihe { display: flex; flex-wrap: wrap; gap: 10px; }

/* Weiterlesen-Link mit Pfeil */
.weiter {
  font: 600 15px/1 var(--schrift-text);
  color: var(--akzent-tief);
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.weiter::after { content: '→'; transition: transform .18s ease; }
a:hover .weiter::after, .weiter:hover::after { transform: translateX(3px); }

/* ---------------------------------------------------------------------
   7. Kopfbereich
   --------------------------------------------------------------------- */
.kopf { position: sticky; top: 0; z-index: 60; }

.kopf__leiste { background: #fff; border-bottom: 1px solid var(--linie); box-shadow: 0 1px 12px rgba(0, 43, 73, .05); }
.kopf--dunkel .kopf__leiste { background: var(--marke); border-bottom-color: rgba(255, 255, 255, .1); box-shadow: none; }

.kopf__innen {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 28px;
  height: 80px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.kopf__logo { display: flex; align-items: center; flex: none; }
/* Etwas höher als im Entwurf (44 px), damit der Claim unter dem
   Schriftzug nicht vollständig zuläuft. */
.kopf__logo img { height: 52px; width: auto; }
.kopf__logo--dunkel { display: none; }
.kopf--dunkel .kopf__logo--hell   { display: none; }
.kopf--dunkel .kopf__logo--dunkel { display: block; }

.kopf__nav { display: flex; align-items: center; gap: 22px; margin-left: auto; }

.kopf__link {
  color: var(--marke);
  font: 500 16px/1 var(--schrift-text);
  white-space: nowrap;
}
.kopf__link:hover { color: var(--akzent-tief); }
.kopf--dunkel .kopf__link { color: #fff; }
.kopf--dunkel .kopf__link:hover { color: var(--akzent); }

.kopf__link[aria-current="page"] { color: var(--akzent-tief); }
.kopf--dunkel .kopf__link[aria-current="page"] { color: var(--akzent); }

.kopf__aktionen { display: flex; align-items: center; gap: 10px; flex: none; white-space: nowrap; }
.kopf__aktionen .knopf { padding: 13.5px 24px; font-size: 15px; }
.kopf__aktionen .knopf--umriss { padding: 12px 22px; }
.kopf--dunkel .kopf__aktionen .knopf--umriss {
  border-color: rgba(255, 255, 255, .4); color: #fff;
}
.kopf--dunkel .kopf__aktionen .knopf--umriss:hover { border-color: var(--akzent); color: var(--akzent); background: none; }

/* Aufklappmenü Leistungen */
.menue { position: relative; padding-block: 28px; }
.menue__schalter {
  display: flex; align-items: center; gap: 7px;
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--marke); font: 500 16px/1 var(--schrift-text);
}
.menue__schalter:hover { color: var(--akzent-tief); }
.kopf--dunkel .menue__schalter { color: #fff; }
.kopf--dunkel .menue__schalter:hover { color: var(--akzent); }
.menue__schalter[aria-current="page"] { color: var(--akzent-tief); }
.kopf--dunkel .menue__schalter[aria-current="page"] { color: var(--akzent); }
/* Der Pfeil ist die Schaltfläche zum Aufklappen, der Titel daneben führt
   auf die Übersichtsseite. Etwas Fläche darum macht ihn treffsicher. */
.menue__pfeil {
  font-size: 10px; opacity: .8;
  padding: 6px; margin: -6px -6px -6px -3px;
  cursor: pointer;
  transition: transform .18s ease;
}
.menue[data-offen="ja"] .menue__pfeil { transform: rotate(180deg); }

.menue__klappe {
  position: absolute;
  top: 74px; left: -24px;
  width: 340px;
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: 16px;
  box-shadow: var(--schatten-menue);
  padding: 10px;
  display: none;
  flex-direction: column;
  gap: 2px;
}
.menue[data-offen="ja"] .menue__klappe { display: flex; }

/* Menüs am rechten Ende der Leiste klappen nach rechts auf,
   sonst ragt die 340 px breite Fläche aus dem Sichtfenster. */
.menue__klappe--rechts { left: auto; right: -24px; }

.menue__eintrag { display: block; padding: 14px 16px; border-radius: 12px; color: var(--tinte); }
.menue__eintrag:hover { background: var(--sanft); }
.menue__titel { display: block; font: 600 15px/1.3 var(--schrift-text); color: var(--marke); }
.menue__text  { display: block; font-size: 13.5px; color: var(--gedaempft); line-height: 1.4; }
.menue__alle {
  display: block; padding: 12px 16px; margin-top: 4px;
  border-top: 1px solid var(--linie);
  font: 500 14px/1 var(--schrift-text); color: var(--marke);
}
.menue__alle:hover { color: var(--akzent-tief); }

/* Kompakter Kopf (mobil / Tablet) */
.kopf__burger {
  width: 46px; height: 46px;
  border-radius: 999px;
  border: 1.5px solid var(--marke);
  background: none; cursor: pointer;
  display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  flex: none;
}
.kopf__burger span { width: 20px; height: 2px; background: var(--marke); display: block; transition: transform .2s ease, opacity .2s ease; }
.kopf--dunkel .kopf__burger { border-color: rgba(255, 255, 255, .4); }
.kopf--dunkel .kopf__burger span { background: #fff; }
.kopf__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.kopf__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.kopf__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobilmenue {
  position: absolute; top: 100%; left: 0; right: 0;
  background: #fff;
  border-bottom: 1px solid var(--linie);
  box-shadow: 0 24px 40px -20px rgba(0, 43, 73, .3);
  display: none;
  flex-direction: column;
  padding: 12px 20px 24px;
  max-height: calc(100vh - 72px);
  overflow-y: auto;
}
.mobilmenue[data-offen="ja"] { display: flex; }
.mobilmenue a { padding: 15px 4px; border-bottom: 1px solid var(--linie); font: 600 18px/1 var(--schrift-text); color: var(--marke); }
.mobilmenue a:hover { color: var(--akzent-tief); }
.mobilmenue a.mobilmenue__unter { padding: 13px 4px 13px 20px; font: 400 16px/1 var(--schrift-text); color: var(--gedaempft); }
.mobilmenue a.mobilmenue__unter:hover { color: var(--marke); }

/* Aufklappbare Gruppe: Der Titel führt auf die Übersichtsseite, der Pfeil
   daneben klappt das Untermenü auf. Ohne JavaScript bleibt alles offen,
   dann ist die Navigation länger, aber vollständig bedienbar. */
.mobilmenue__gruppe {
  display: grid;
  grid-template-columns: 1fr 52px;
  align-items: center;
  border-bottom: 1px solid var(--linie);
}
.mobilmenue__gruppe > a { border-bottom: none; }
.mobilmenue__schalter {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--marke);
  border-radius: 999px;
  transition: background .15s ease;
}
.mobilmenue__schalter:hover { background: var(--flaeche); }
/* Ein einzelner Winkel, der sich beim Aufklappen dreht: zeigt zu, wohin es
   geht, statt zwei Symbole zu tauschen. */
.mobilmenue__pfeil {
  width: 26px; height: 26px;
  transition: transform .2s ease;
}
.mobilmenue__gruppe[data-offen="ja"] .mobilmenue__pfeil { transform: rotate(180deg); }

.mobilmenue__unterliste { grid-column: 1 / -1; display: flex; flex-direction: column; }
.mobilmenue__gruppe[data-offen="nein"] .mobilmenue__unterliste { display: none; }
.mobilmenue__unterliste a:last-child { border-bottom: none; }

/* Profile mittig am Fuß des Menüs, anstelle der früheren Schaltfläche */
/* Kein eigener Trennstrich: Der letzte Menüpunkt darüber bringt schon
   einen mit, sonst stünden zwei Linien mit Lücke dazwischen. */
.mobilmenue__sozial {
  display: flex; justify-content: center; gap: 14px;
  margin-top: 24px;
}
.mobilmenue a.mobilmenue__sozial-link,
.mobilmenue__sozial a {
  width: 44px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--linie); border-radius: 999px;
  font: 600 15px/1 var(--schrift-text); color: var(--marke);
}
.mobilmenue__sozial a:hover { border-color: var(--marke); color: var(--marke); background: var(--sanft); }

/* ---------------------------------------------------------------------
   8. Hero-Varianten
   --------------------------------------------------------------------- */
.hero-split {
  background: #fff;
  position: relative;
  overflow: hidden;
}
.hero-split__innen {
  max-width: var(--breite); margin: 0 auto; padding-inline: var(--rand);
  display: grid; grid-template-columns: 1.08fr .92fr; gap: 64px;
  align-items: center; min-height: 600px;
}
.hero-split__text { padding-block: 88px; }

/* Ohne Bild nutzt der Startbereich die ganze Breite */
.hero-split__innen--einspaltig { grid-template-columns: 1fr; min-height: 0; }
.hero-split__innen--einspaltig .hero-split__text { padding-block: 96px; }
.hero-split__innen--einspaltig .vorspann { max-width: 720px; }
.hero-split__bild { align-self: stretch; display: flex; align-items: center; padding-block: 56px; }
.hero-split__bild > * { width: 100%; }
.hero-split h1 { font-size: 66px; margin-bottom: 24px; color: var(--marke); }
.hero-split .vorspann { max-width: 540px; margin-bottom: 38px; }
.hero-split .knopfreihe { margin-bottom: 44px; }

.hero-zentriert { background: #fff; text-align: center; }
.hero-zentriert__innen { max-width: 900px; margin: 0 auto; padding: 112px var(--rand) 0; }
.hero-zentriert h1 { font-size: 76px; margin-bottom: 26px; color: var(--marke); }
.hero-zentriert .vorspann { font-size: 21px; margin: 0 auto 40px; max-width: 660px; }
.hero-zentriert .knopfreihe { justify-content: center; }
.hero-zentriert__bild { max-width: 1080px; margin: 0 auto; padding: 64px var(--rand) 0; }

/* Dunkelblaue Variante der Startbereiche, in der Verwaltung wählbar.
   Alles Textliche wird hell gesetzt, damit der Kontrast erhalten bleibt. */
.hero-split--dunkel,
.hero-zentriert--dunkel,
.hero-kennzahlen--dunkel { background: var(--marke); color: #fff; }
.hero-split--dunkel h1,
.hero-zentriert--dunkel h1,
.hero-kennzahlen--dunkel h1 { color: #fff; }
.hero-split--dunkel .vorspann,
.hero-zentriert--dunkel .vorspann,
.hero-kennzahlen--dunkel .vorspann { color: rgba(255, 255, 255, .78); }
.hero-split--dunkel .marke-zeile,
.hero-zentriert--dunkel .marke-zeile,
.hero-kennzahlen--dunkel .marke-zeile { color: rgba(255, 255, 255, .75); }
/* Auf dunklem Grund werden nur die Vertrauensmerkmale in der Reihe hell
   gesetzt. Das Wapperl über der Überschrift behält sein Grün mit
   dunkelblauer Schrift, sonst ginge die Auszeichnung dort verloren. */
.hero-split--dunkel .pillenreihe .pille,
.hero-zentriert--dunkel .pillenreihe .pille,
.hero-kennzahlen--dunkel .pillenreihe .pille { background: rgba(255, 255, 255, .12); color: #fff; }
.hero-split--dunkel .pillenreihe .pille--punkt::before,
.hero-zentriert--dunkel .pillenreihe .pille--punkt::before,
.hero-kennzahlen--dunkel .pillenreihe .pille--punkt::before { background: #fff; }
.hero-split--dunkel .knopf--umriss,
.hero-zentriert--dunkel .knopf--umriss,
.hero-kennzahlen--dunkel .knopf--umriss { border-color: rgba(255, 255, 255, .4); color: #fff; }
.hero-split--dunkel .knopf--umriss:hover,
.hero-zentriert--dunkel .knopf--umriss:hover,
.hero-kennzahlen--dunkel .knopf--umriss:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.hero-split--dunkel .platzhalter,
.hero-zentriert--dunkel .platzhalter {
  background-color: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .18);
  background-image: repeating-linear-gradient(135deg,
    rgba(255, 255, 255, .07) 0 8px, rgba(255, 255, 255, 0) 8px 16px);
}
.hero-split--dunkel .platzhalter__marke,
.hero-split--dunkel .platzhalter__text,
.hero-zentriert--dunkel .platzhalter__marke,
.hero-zentriert--dunkel .platzhalter__text { color: rgba(255, 255, 255, .6); }

.hero-kennzahlen { background: #fff; }
.hero-kennzahlen__innen { max-width: var(--breite); margin: 0 auto; padding: 96px var(--rand) 0; }
.hero-kennzahlen h1 { font-size: 62px; margin-bottom: 22px; color: var(--marke); }
.hero-kennzahlen .vorspann { margin-bottom: 36px; }

/* Seitenkopf für Unterseiten (dunkelblaues Band) */
.seitenkopf { background: var(--marke); color: #fff; padding: 88px 0 96px; }
.seitenkopf h1 { font-size: 56px; max-width: 840px; margin-bottom: 22px; }
.seitenkopf .vorspann { font-size: 19px; max-width: 660px; color: rgba(255, 255, 255, .78); }

.seitenkopf--split { padding: 80px 0 92px; }
.seitenkopf--split .seitenkopf__innen {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: center;
}
.seitenkopf--split h1 { font-size: 52px; }

/* ---------------------------------------------------------------------
   9. Bild- und Logoplatzhalter
   --------------------------------------------------------------------- */
/* Ein Platz, an dem noch kein Bild liegt.

   Frueher lagen hier Schraegstreifen mit der Aufschrift „BILDPLATZ 4:3".
   Das war eine Notiz fuer die Werkstatt auf einer oeffentlichen Seite.
   Jetzt steht dort dasselbe Punktraster wie im CTA-Band, nur in Grau
   statt in Mintgruen, und es glimmt unter dem Zeiger genauso auf. Eine
   Flaeche, die dazugehoert, statt einer Luecke mit Beschriftung. */
.platzhalter {
  position: relative; overflow: hidden;
  background-color: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  text-align: center;
  padding: 24px;
}

.platzhalter__muster {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(6, 42, 71, .13) 1px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(105deg, transparent 30%, #000 100%);
          mask-image: linear-gradient(105deg, transparent 30%, #000 100%);
}

/* Wie .cta-band__glut, nur in Grau: ein scharfer Punkt und ein
   groesserer, fast durchsichtiger Hof darum. Die Lage des Zeigers kommt
   als --glut-x/--glut-y aus haupt.js. */
.platzhalter__glut {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle, rgba(6, 42, 71, .55) 1px, transparent 1.5px),
    radial-gradient(circle, rgba(6, 42, 71, .13) 2.6px, transparent 4.2px);
  background-size: 26px 26px, 26px 26px;
  opacity: 0;
  transition: opacity .45s ease;
  -webkit-mask-image: radial-gradient(circle 150px at var(--glut-x, 50%) var(--glut-y, 50%),
                      #000 0%, rgba(0, 0, 0, .5) 45%, transparent 72%);
          mask-image: radial-gradient(circle 150px at var(--glut-x, 50%) var(--glut-y, 50%),
                      #000 0%, rgba(0, 0, 0, .5) 45%, transparent 72%);
}
.platzhalter:hover .platzhalter__glut { opacity: .85; }

@media (prefers-reduced-motion: reduce) {
  .platzhalter__glut { display: none; }
}

.platzhalter--dunkel .platzhalter__muster {
  background-image: radial-gradient(circle, rgba(255, 255, 255, .16) 1px, transparent 1.4px);
}
.platzhalter--dunkel .platzhalter__glut {
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, .6) 1px, transparent 1.5px),
    radial-gradient(circle, rgba(255, 255, 255, .16) 2.6px, transparent 4.2px);
}
/* Ueber dem Punktraster, sonst verschwindet er darunter. */
.platzhalter__text {
  position: relative;
  font: 13px/1.5 ui-monospace, Menlo, monospace; color: var(--gedaempft);
}
.platzhalter--dunkel {
  background-color: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .18);
}
.platzhalter--dunkel .platzhalter__text { color: rgba(255, 255, 255, .6); }

.bild-4-5  { aspect-ratio: 4/5; }
.bild-4-3  { aspect-ratio: 4/3; }
.bild-1-1  { aspect-ratio: 1/1; }
.bild-5-6  { aspect-ratio: 5/6; }
.bild-16-9 { aspect-ratio: 16/9; }
.bild-21-9 { aspect-ratio: 21/9; }

.medienbild { border-radius: var(--radius-gross); object-fit: cover; width: 100%; }

/* Ganzes Bild im festen Rahmen: nichts wird beschnitten, dafür bleibt
   oben und unten oder links und rechts Fläche frei. Die bleibt bewusst
   durchsichtig, damit der Hintergrund des Abschnitts durchscheint. */
.medienbild--einpassen { object-fit: contain; background: transparent; }

/* Rahmen richtet sich nach dem Bild, das Seitenverhältnis bleibt erhalten. */
.medienbild--natuerlich { aspect-ratio: auto; height: auto; object-fit: initial; }

/* Farbumkehr für Bilder auf dunklem Grund: Aus einer Grafik mit weißem
   Hintergrund wird eine mit dunklem. Die Drehung des Farbtons holt die
   Buntfarben zurück, die invert() sonst in den Gegenton kippt. */
.medienbild--invers { filter: invert(1) hue-rotate(180deg); }

/* Kundenlogos: siehe weiter unten beim Baustein „Logoleiste".
   Die frühere Fassung aus dem Alpha-Bestand stand hier und setzte für
   .kundenlogo eine Höhe von 44 Pixeln. Sie wird von keiner Vorlage mehr
   benutzt, hätte den neuen Aufbau aber überlagert. */

/* ---------------------------------------------------------------------
   10. Karten
   --------------------------------------------------------------------- */
.karte {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 36px;
  color: var(--tinte);
  transition: box-shadow .2s ease, transform .2s ease;
}
a.karte:hover { box-shadow: var(--schatten-karte); transform: translateY(-3px); color: var(--tinte); }
.karte__symbol {
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--sanft);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 26px; flex: none;
}
.karte__symbol i { width: 18px; height: 18px; background: var(--marke); display: block; }
.karte__symbol--quadrat i { border-radius: 5px; }
.karte__symbol--kreis  i { border-radius: 999px; }
.karte__symbol--raute  i { transform: rotate(45deg); }
.karte h3 { font-size: 26px; margin-bottom: 14px; color: var(--marke); }
.karte p  { font-size: 16px; color: var(--gedaempft); margin-bottom: 24px; flex: 1; }
.karte .pillenreihe { margin-bottom: 24px; }

.karte--dunkel {
  background: var(--marke); border: none; color: #fff; padding: 38px;
  transition: background .2s ease;
}
a.karte--dunkel:hover { background: var(--tief); color: #fff; transform: none; box-shadow: none; }
.karte--dunkel h3 { color: #fff; font-size: 28px; margin: 56px 0 14px; }
.karte--dunkel p  { color: rgba(255, 255, 255, .76); margin-bottom: 26px; }
.karte--dunkel .weiter { color: var(--akzent); }
.karte__nummer {
  font: 500 12.5px/1 var(--schrift-text); color: var(--akzent);
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: auto;
}

.karte--flaeche { background: var(--flaeche); border: none; padding: 36px; }
.karte--flaeche h3 { font-size: 22px; margin-bottom: 12px; }
.karte--flaeche p { margin-bottom: 0; }

.karte--schlicht { padding: 34px 36px; }
.karte--schlicht h3 { font-size: 23px; margin-bottom: 12px; }
.karte--schlicht p { margin-bottom: 0; }

/* Nummerierte Liste als Alternative zu Karten */
.nummernliste {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--linie);
  border-radius: var(--radius); overflow: hidden;
}
.nummernliste__zeile {
  display: grid; grid-template-columns: 96px 1.1fr 1.4fr auto;
  gap: 28px; align-items: center;
  padding: 34px 36px;
  border-bottom: 1px solid var(--linie);
  color: var(--tinte);
}
.nummernliste__zeile:last-child { border-bottom: none; }
.nummernliste__zeile:hover { background: var(--flaeche); color: var(--tinte); }
.nummernliste__nummer { font-family: var(--schrift-ueberschrift); font-size: 40px; color: var(--sanft); }
.nummernliste__zeile h3 { font-size: 26px; color: var(--marke); }
.nummernliste__zeile p  { font-size: 16px; color: var(--gedaempft); }

/* ---------------------------------------------------------------------
   11. Kennzahlen, Prozess, Listen
   --------------------------------------------------------------------- */
.kennzahlen {
  display: grid; gap: 1px;
  background: var(--linie);
  border-top: 1px solid var(--linie);
}
.kennzahlen--rahmen { border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; }
.kennzahl { background: #fff; padding: 32px 24px 40px; }
.kennzahlen--rahmen .kennzahl { padding: 32px 28px; }
.kennzahl__wert {
  font-family: var(--schrift-ueberschrift);
  font-size: 46px; line-height: 1; color: var(--marke); margin-bottom: 10px;
}
.kennzahl__text { font-size: 15px; color: var(--gedaempft); }
.kennzahlen--rahmen .kennzahl__wert { font-size: 34px; margin-bottom: 8px; }

/* Kennzahlen auf dunklem Grund (Fallbeispiel-Kopf) */
.kennzahlen--dunkel { background: rgba(255, 255, 255, .16); border-top-color: rgba(255, 255, 255, .16); }
.kennzahlen--dunkel .kennzahl { background: var(--marke); padding: 28px 24px 0; }
.kennzahlen--dunkel .kennzahl__wert { color: var(--akzent); font-size: 52px; margin-bottom: 8px; }
.kennzahlen--dunkel .kennzahl__text { color: rgba(255, 255, 255, .75); font-size: 15.5px; }

/* Kennzahlen im Fließtext (ohne Trennlinien) */
.kennzahlenreihe { display: flex; flex-wrap: wrap; gap: 44px; }
.kennzahlenreihe .kennzahl { background: none; padding: 0; }
.kennzahlenreihe .kennzahl__wert { font-size: 38px; }
.kennzahlenreihe .kennzahl__text { font-size: 14.5px; }

.prozess { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.prozess__schritt h3 { font-size: 20px; color: var(--marke); margin-bottom: 10px; }
.prozess__schritt p  { font-size: 15.5px; color: var(--gedaempft); }
.prozess__nummer {
  font-family: var(--schrift-ueberschrift);
  font-size: 44px; color: var(--sanft); line-height: 1; margin-bottom: 14px;
}

/* Merkmalsliste mit Trennlinien */
.merkmale { display: flex; flex-direction: column; gap: 18px; }
.merkmal { border-bottom: 1px solid var(--linie); padding-bottom: 18px; }
.merkmal:last-child { border-bottom: none; padding-bottom: 0; }
.merkmal__titel { display: block; font: 600 16px/1.4 var(--schrift-text); }
.merkmal__text  { font-size: 15px; color: var(--gedaempft); }

/* Liste mit Akzentkante */
.akzentliste { display: flex; flex-direction: column; gap: 24px; }
.akzentliste__punkt { border-left: 2px solid var(--sanft); padding-left: 22px; }
.akzentliste__punkt h3 { font-size: 21px; color: var(--marke); margin-bottom: 8px; }
.akzentliste__punkt p  { font-size: 16px; color: var(--gedaempft); }

/* Punkteliste mit Häkchen */
.punkte { display: flex; flex-direction: column; gap: 10px; list-style: none; }
.punkte li { font-size: 16px; color: var(--tinte); display: flex; gap: 12px; align-items: flex-start; }
.punkte li::before {
  content: ''; flex: none; margin-top: 8px;
  width: 8px; height: 8px; border-radius: 999px; background: var(--akzent);
  box-shadow: 0 0 0 3px var(--sanft);
}
.abschnitt--marke .punkte li, .abschnitt--tief .punkte li { color: rgba(255, 255, 255, .85); }

/* Rasterblock „Warum wir" */
.warum { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 40px; }
.warum__punkt { border-top: 1px solid var(--band-linie); padding-top: 20px; }
.warum__punkt h4 { font-size: 20px; margin-bottom: 8px; }
.warum__punkt p  { font-size: 15.5px; color: var(--band-sub); }

/* ---------------------------------------------------------------------
   12. Teaser, Beitragskarten, Zitate
   --------------------------------------------------------------------- */
.referenz-teaser {
  display: grid; grid-template-columns: 1.15fr .85fr;
  border: 1px solid var(--linie); border-radius: var(--radius-gross);
  overflow: hidden; color: var(--tinte);
  transition: box-shadow .2s ease;
}
.referenz-teaser:hover { box-shadow: 0 28px 52px -26px rgba(0, 43, 73, .32); color: var(--tinte); }
.referenz-teaser__text { padding: 52px 56px; }
.referenz-teaser h3 { font-size: 34px; margin-bottom: 16px; color: var(--marke); }
.referenz-teaser p  { font-size: 17px; color: var(--gedaempft); margin-bottom: 32px; max-width: 460px; }
.referenz-teaser__bild { min-height: 380px; border-radius: 0; border: none; }

.beitragskarte {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--linie);
  border-radius: var(--radius); overflow: hidden; color: var(--tinte);
  transition: box-shadow .2s ease, transform .2s ease;
}
.beitragskarte:hover { box-shadow: 0 22px 40px -22px rgba(0, 43, 73, .28); color: var(--tinte); transform: translateY(-3px); }
.beitragskarte__bild { aspect-ratio: 16/9; border-radius: 0; border: none; border-bottom: 1px solid var(--linie); }
.beitragskarte__inhalt { padding: 28px 28px 32px; display: flex; flex-direction: column; flex: 1; }
.beitragskarte__meta { font: 500 13px/1 var(--schrift-text); color: var(--gedaempft); margin-bottom: 14px; }
.beitragskarte h3 { font-size: 21px; margin-bottom: 12px; color: var(--marke); }
.beitragskarte p  { font-size: 15.5px; color: var(--gedaempft); flex: 1; }

/* Galerie */
.galerie__eintrag { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.galerie__bild { border-radius: var(--radius); }
.galerie__text { font-size: 14.5px; color: var(--gedaempft); }

.galerie__video { position: relative; display: block; border-radius: var(--radius); overflow: hidden; }
.galerie__video::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(0, 43, 73, .25);
  transition: background .2s ease;
}
.galerie__video:hover::after { background: rgba(0, 43, 73, .1); }
.galerie__abspielen {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; color: #fff;
  text-shadow: 0 2px 12px rgba(0, 43, 73, .6);
}

.zitat {
  background: var(--sanft); border-radius: var(--radius);
  padding: 36px 34px;
}
.zitat__text {
  font-family: var(--schrift-ueberschrift);
  font-size: 23px; line-height: 1.4; color: var(--marke);
  /* Kein margin-bottom: Der Abstand zur Namenszeile kommt aus dem
     Trennstrich darunter, sonst addieren sich beide Werte. */
  margin-bottom: 0;
}
/* Die Namenszeile steht in kleiner Schrift direkt unter einem deutlich
   größeren Zitat und ging dort optisch unter. Ein feiner Strich mit Luft
   darüber und darunter setzt sie sichtbar ab. */
.zitat figcaption {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid rgba(0, 61, 104, .18);
}
.zitat__person { font: 600 15px/1.4 var(--schrift-text); color: var(--marke); display: block; }
.zitat__rolle  { font-size: 14.5px; color: var(--marke); opacity: .7; display: block; margin-top: 2px; }

/* Wechselnde Text-Bild-Blöcke (Leistungsübersicht) */
.textbild {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
  align-items: center;
  background: var(--flaeche); border-radius: var(--radius-gross);
  padding: 52px 56px;
}
.textbild h2 { font-size: 36px; margin-bottom: 16px; color: var(--marke); }
.textbild p  { font-size: 17px; color: var(--gedaempft); margin-bottom: 26px; }
.textbild__bild { order: 2; }
.textbild--ohnebild { grid-template-columns: 1fr; }

/* Seitenkopf ohne Bild: eine Spalte statt zwei */
.seitenkopf--ohnebild .seitenkopf__innen { grid-template-columns: 1fr; }
.textbild--gedreht .textbild__bild { order: -1; }

/* CTA-Band */

/* Hier stand einmal display:flex auf der Sektion selbst — aus der Zeit,
   als Text und Schaltflächen unmittelbar darin lagen. Heute steckt beides
   im .behaelter, und der wurde dadurch zum Flex-Element: Er schrumpfte auf
   seinen Inhalt (gemessen 1031 statt 1240 Pixel), und margin:0 auto
   zentrierte die geschrumpfte Kiste. Das Band stand deshalb schmaler als
   jeder andere Abschnitt. Die Flex-Zeile gehört an .cta-band__innen, dort
   steht sie auch. */
/* Die Elementregeln (.cta-band h2, .cta-band p) sind weg. Sie schlugen
   die Klassenregeln weiter unten, weil ein Elementname mitzählt.
   Sichtbare Folge war ein Mikrotext in 18 statt 14 Pixeln und in Weiß
   statt gedämpft.

   ACHTUNG, zwei Verwendungen derselben Klasse:

   1. Der Baustein block-cta_band.php setzt .cta-band auf die SEKTION.
      Die Flex-Zeile ist dort .cta-band__innen.
   2. Sechs Seitenvorlagen (Leistung, Beratungsbüro, Blogbeitrag und die
      drei Übersichten) setzen .cta-band unmittelbar auf den .behaelter
      und legen Text und Schaltflächen als dessen Kinder hinein. Dort IST
      .cta-band die Flex-Zeile.

   Der zweite Fall braucht die alte Auszeichnung weiterhin. Er wird über
   .behaelter.cta-band angesprochen — das trifft nur den Container und
   nie die Sektion, die kein .behaelter ist. */
.behaelter.cta-band {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 40px;
}
.behaelter.cta-band h2 { font-size: 36px; max-width: 640px; margin-bottom: 0; }
.cta-band__telefon { color: #fff; font: 500 17px/1 var(--schrift-text); }
.cta-band__telefon:hover { color: var(--akzent); }

/* Kopfzeile eines Abschnitts mit Aktion rechts */
.abschnittskopf {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 24px; margin-bottom: 52px;
}
.abschnittskopf__text { max-width: 640px; }
.abschnittskopf h2 { font-size: 44px; margin-bottom: 16px; }
.abschnittskopf p  { font-size: 18px; color: var(--gedaempft); }

/* ---------------------------------------------------------------------
   13. Brotkrumen, Blättern, Stellen, Team
   --------------------------------------------------------------------- */
.brotkrumen {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font: 500 14px/1 var(--schrift-text);
  color: var(--gedaempft);
  margin-bottom: 24px;
  list-style: none;
}
.brotkrumen li { display: flex; align-items: center; gap: 10px; }
.brotkrumen li + li::before { content: '/'; opacity: .5; }
.brotkrumen a { color: var(--marke); }
.brotkrumen [aria-current] { color: var(--gedaempft); }
.seitenkopf .brotkrumen { color: rgba(255, 255, 255, .6); }
.seitenkopf .brotkrumen a { color: rgba(255, 255, 255, .7); }
.seitenkopf .brotkrumen a:hover { color: var(--akzent); }
.seitenkopf .brotkrumen [aria-current] { color: var(--akzent); }

.blaettern { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; margin-top: 56px; }
.blaettern a, .blaettern span {
  min-width: 46px; height: 46px; padding: 0 14px;
  border-radius: 999px; border: 1.5px solid var(--linie);
  display: inline-flex; align-items: center; justify-content: center;
  font: 500 15px/1 var(--schrift-text); color: var(--marke);
}
.blaettern a:hover { border-color: var(--marke); background: var(--flaeche); }
.blaettern [aria-current="page"] { background: var(--marke); border-color: var(--marke); color: #fff; }
.blaettern .blaettern__luecke { border: none; color: var(--gedaempft); }

.stelle {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr auto;
  gap: 24px; align-items: center;
  border: 1px solid var(--linie); border-radius: 18px;
  padding: 28px 32px; color: var(--tinte);
  transition: border-color .18s ease, background .18s ease;
}
.stelle:hover { border-color: var(--marke); background: var(--flaeche); color: var(--tinte); }
.stelle h3 { font-size: 24px; color: var(--marke); }
.stelle span { font-size: 15.5px; color: var(--gedaempft); }
.stelle__aktion {
  padding: 9px 18px; border-radius: 999px;
  background: var(--sanft); color: var(--marke);
  font: 600 14.5px/1 var(--schrift-text); white-space: nowrap;
}

.person__bild { aspect-ratio: 1/1; border-radius: var(--radius); background-color: #fff; margin-bottom: 18px; }
.person h3 { font-size: 20px; color: var(--marke); margin-bottom: 4px; }
.person span { font-size: 15px; color: var(--gedaempft); }

/* Lexikon */
.lexikon-navigation { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 48px; }
.lexikon-navigation a {
  width: 44px; height: 44px; border-radius: 12px;
  border: 1px solid var(--linie);
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 16px/1 var(--schrift-text); color: var(--marke);
}
.lexikon-navigation a:hover { background: var(--sanft); }
.lexikon-gruppe { margin-bottom: 48px; scroll-margin-top: 120px; }
.lexikon-gruppe__buchstabe {
  font-family: var(--schrift-ueberschrift); font-size: 40px; color: var(--marke);
  border-bottom: 1px solid var(--linie); padding-bottom: 12px; margin-bottom: 24px;
}
.lexikon-eintrag { display: block; padding: 20px 0; border-bottom: 1px solid var(--linie); color: var(--tinte); }
.lexikon-eintrag:hover { color: var(--tinte); }
.lexikon-eintrag:hover h3 { color: var(--akzent-tief); }
.lexikon-eintrag h3 { font-size: 21px; color: var(--marke); margin-bottom: 6px; }
.lexikon-eintrag p  { font-size: 15.5px; color: var(--gedaempft); }

/* Häufige Fragen, native <details>, funktioniert ohne JavaScript */
/* Die Regeln für die Aufklapper stehen weiter unten beim Baustein.

   Hier lag eine ältere Fassung, die ein Plus beziehungsweise Minus als
   summary::after setzte. Die Vorlage zeichnet das Zeichen inzwischen
   selbst als Kreuz im span.faq-eintrag__zeichen — und weil ein Selektor
   mit Elementnamen spezifischer ist als einer mit Klasse allein, galten
   beide gleichzeitig. Jeder Eintrag trug deshalb zwei Symbole. */
.faq-eintrag__antwort > *:first-child { margin-top: 0; }

/* Definitionsliste, Grundlage der Grounding-Seite */
.faktenliste { margin: 0; }
.faktenliste > div {
  display: grid; grid-template-columns: 260px 1fr; gap: 20px;
  padding: 16px 0; border-bottom: 1px solid var(--linie);
}
.faktenliste dt { font-weight: 600; color: var(--marke); margin: 0; }
.faktenliste dd { margin: 0; color: var(--tinte); }
.zeitstempel { font-size: 14.5px; color: var(--gedaempft); display: flex; flex-wrap: wrap; gap: 20px; }

/* ---------------------------------------------------------------------
   14. Formulare
   --------------------------------------------------------------------- */
.formular { display: flex; flex-direction: column; gap: 22px; }
.formular__paar { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }

/* Breite Variante über die volle Seitenbreite, etwa unter Stellenanzeigen.
   Zwei Spalten, damit einzelne Eingabezeilen nicht unlesbar lang werden.
   Alles, was Platz braucht, geht über beide Spalten. */
.formular--breit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: start;
}
.formular--breit > .formular__paar,
.formular--breit > .feld--voll,
.formular--breit > .einwilligung,
.formular--breit > .knopfreihe,
.formular--breit > .honigtopf { grid-column: 1 / -1; }
/* Zustimmungstext bleibt lesbar kurz, auch wenn die Spalte breit ist */
.formular--breit > .einwilligung { max-width: 760px; }


/* Dateiauswahl und Anschreiben stehen untereinander über die volle Breite.
   Nebeneinander bliebe unter dem kürzeren der beiden eine Lücke. */

.feld { display: flex; flex-direction: column; gap: 8px; }
.feld__beschriftung { font: 500 15px/1 var(--schrift-text); color: var(--marke); }

.feld input[type="text"], .feld input[type="email"], .feld input[type="tel"],
.feld input[type="password"], .feld input[type="url"], .feld input[type="date"],
.feld input[type="datetime-local"], .feld input[type="number"], .feld select {
  height: 52px; padding: 0 18px;
  border: 1px solid var(--linie); border-radius: 12px;
  font: 400 16px/1 var(--schrift-text); color: var(--tinte);
  background: var(--flaeche); outline: none; width: 100%;
  transition: border-color .15s ease, background .15s ease;
}
.feld textarea {
  padding: 16px 18px;
  border: 1px solid var(--linie); border-radius: 12px;
  font: 400 16px/1.6 var(--schrift-text); color: var(--tinte);
  background: var(--flaeche); outline: none; resize: vertical; width: 100%;
  min-height: 140px;
}
.feld input:focus, .feld textarea:focus, .feld select:focus {
  border-color: var(--marke); background: #fff;
}
/* Steht das Formular auf grauem Grund, hätten die Felder dieselbe Farbe
   wie der Abschnitt und wären kaum zu erkennen. Dort also Weiß. */
.abschnitt--flaeche .formular .feld input,
.abschnitt--flaeche .formular .feld select,
.abschnitt--flaeche .formular .feld textarea { background: #fff; }
.feld--fehler input, .feld--fehler textarea, .feld--fehler select { border-color: var(--fehler); }
.feld__fehler { font-size: 14.5px; color: var(--fehler); }

/* Dateiauswahl. Das native Feld liegt durchsichtig über der Fläche und
   bleibt voll funktionsfähig: Klick, Tastatur und das Ziehen von Dateien
   erledigt weiter der Browser, nur das Aussehen kommt von uns. */
.dateifeld { position: relative; }
.dateifeld__eingabe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
.dateifeld__flaeche {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 30px 24px;
  text-align: center;
  border: 1.5px dashed var(--linie);
  border-radius: 12px;
  background: #fff;
  transition: border-color .15s ease, background .15s ease;
}
.dateifeld__knopf {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px; border-radius: 999px;
  border: 1.5px solid var(--marke);
  font: 500 15px/1 var(--schrift-text); color: var(--marke);
  transition: background .15s ease;
}
.dateifeld__knopf svg { width: 17px; height: 17px; flex: none; }
.dateifeld__text { font-size: 15px; color: var(--gedaempft); }
.dateifeld__formate { font-size: 13.5px; color: var(--gedaempft); }

.dateifeld:hover .dateifeld__flaeche { border-color: var(--marke); background: var(--flaeche); }
.dateifeld:hover .dateifeld__knopf { background: var(--sanft); }
.dateifeld__eingabe:focus-visible + .dateifeld__flaeche {
  outline: 3px solid var(--akzent-tief); outline-offset: 3px; border-color: var(--marke);
}
.feld--fehler .dateifeld__flaeche { border-color: var(--fehler); }

/* Liste der gewählten Dateien, wird per JavaScript gefüllt. Ohne
   JavaScript bleibt sie leer und damit unsichtbar. */
.dateifeld__liste { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.dateifeld__liste:empty { display: none; }
.dateifeld__liste li {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px;
  border: 1px solid var(--linie); border-radius: 10px;
  background: #fff;
  font-size: 14.5px;
}
.dateifeld__name { font-weight: 500; color: var(--marke); overflow-wrap: anywhere; }
.dateifeld__groesse { margin-left: auto; color: var(--gedaempft); font-size: 13.5px; flex: none; }

/* Einzelne Datei wieder entfernen */
.dateifeld__loeschen {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin: -6px -6px -6px 4px;
  border: 0; border-radius: 9px;
  background: none; color: var(--gedaempft);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.dateifeld__loeschen svg { width: 18px; height: 18px; }
.dateifeld__loeschen:hover { background: rgba(196, 43, 43, .1); color: var(--fehler); }

.auswahlpillen { display: flex; flex-wrap: wrap; gap: 10px; }
.auswahlpille {
  position: relative;
  padding: 10px 18px; border-radius: 999px;
  border: 1.5px solid var(--linie);
  font: 500 15px/1 var(--schrift-text); color: var(--marke);
  cursor: pointer; background: var(--flaeche);
  transition: border-color .15s ease, background .15s ease;
}
.auswahlpille:hover { border-color: var(--marke); }
.auswahlpille input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.auswahlpille:has(input:checked) { border-color: var(--marke); background: var(--sanft); }
.auswahlpille:has(input:focus-visible) { outline: 3px solid var(--akzent-tief); outline-offset: 2px; }

.einwilligung { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: var(--gedaempft); }
.einwilligung input { margin-top: 5px; width: 18px; height: 18px; accent-color: var(--marke); flex: none; }
.einwilligung a { text-decoration: underline; text-underline-offset: 2px; }

/* Spamschutz-Widget (CaptchaMe), nur Abstand und Breite, das Aussehen
   bringt der Anbieter mit. Reserviert etwas Höhe, damit beim Nachladen
   nichts springt (Layout Shift). */
.captchame { max-width: 100%; min-height: 74px; }

/* Honigtopf, für Menschen unsichtbar, für Bots verlockend */
.honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.meldung { padding: 18px 22px; border-radius: 14px; font: 500 16px/1.5 var(--schrift-text); }
.meldung--erfolg { background: var(--sanft); color: var(--marke); }
.meldung--fehler { background: #FCE9E9; color: #8E2224; }
.meldung--hinweis { background: var(--flaeche); color: var(--marke); }

/* Kontaktkarte */
.kontaktkarte { background: var(--marke); color: #fff; border-radius: var(--radius-gross); padding: 40px 36px; }
.kontaktkarte h3 { font-size: 26px; margin-bottom: 22px; }
.kontaktkarte__gruppe + .kontaktkarte__gruppe { margin-top: 18px; }
.kontaktkarte__label {
  display: block; font-size: 14px; color: var(--akzent);
  letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px;
}
/* Nur echte Verweise einfärben. Schaltflächen bringen ihre eigenen
   Hover-Farben mit, sonst würde die Schrift auf rotem Grund grün. */
.kontaktkarte a:not(.knopf) { font: 500 19px/1.4 var(--schrift-text); color: #fff; }
.kontaktkarte a:not(.knopf):hover { color: var(--akzent); }
.kontaktkarte span.wert { font-size: 17px; color: rgba(255, 255, 255, .85); line-height: 1.6; }
/* Schaltfläche am Fuß der Karte, abgesetzt von den Angaben darüber */
.kontaktkarte__aktion { width: 100%; margin-top: 30px; }

/* Suche */
.suchfeld { display: flex; gap: 12px; max-width: 620px; }
.suchfeld input { flex: 1; }

/* ---------------------------------------------------------------------
   15. Fußbereich
   --------------------------------------------------------------------- */
.fuss { background: var(--marke); color: #fff; padding: 72px 0 0; }
.fuss__raster { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 56px; }
.fuss img { height: 40px; width: auto; margin-bottom: 24px; }

/* Gestapeltes Logo braucht mehr Höhe als die Querfassung */
.fuss__logo--stapel { height: 96px; margin-bottom: 20px; }
.fuss p { font-size: 15.5px; color: rgba(255, 255, 255, .72); line-height: 1.8; }
.fuss p + p { margin-top: 14px; }
.fuss h4 {
  font: 600 14px/1 var(--schrift-text);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--akzent); margin-bottom: 20px;
}
.fuss__liste { display: flex; flex-direction: column; gap: 12px; list-style: none; }
.fuss a { color: rgba(255, 255, 255, .78); font-size: 15.5px; }
.fuss a:hover { color: var(--akzent); }
.fuss p a { color: #fff; }

.fuss__unten {
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding: 24px 0 36px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
}
.fuss__unten span { font-size: 14px; color: rgba(255, 255, 255, .55); }
.fuss__sozial { display: flex; gap: 10px; }
.fuss__sozial a {
  width: 38px; height: 38px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .28);
  display: flex; align-items: center; justify-content: center;
  font: 600 13px/1 var(--schrift-text); color: #fff;
}
.fuss__sozial a:hover { border-color: var(--akzent); color: var(--akzent); }

/* ---------------------------------------------------------------------
   16. Umbrüche
   --------------------------------------------------------------------- */
/* ---------------------------------------------------------------------
   Angeheftete Handlungsleiste (nur Mobilgeräte)
   --------------------------------------------------------------------- */
.mobilleiste {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
  gap: 12px; align-items: center;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--linie);
  box-shadow: 0 -8px 24px -16px rgba(0, 43, 73, .45);
}
.mobilleiste__hoerer {
  flex: none;
  width: 52px; height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  border: 1.5px solid var(--marke);
  color: var(--marke);
  background: #fff;
}
.mobilleiste__hoerer svg { width: 22px; height: 22px; flex: none; }
.mobilleiste__hoerer:hover { background: var(--sanft); color: var(--marke); }
.mobilleiste__aktion { flex: 1; padding: 15px 18px; font-size: 16px; text-align: center; }

/* Beschriftung neben dem Hörer. Ein Symbol allein sagt nicht, dass
   dahinter ein Anruf steckt; unter 380 Pixeln weicht sie, dort zählt
   jeder Millimeter. */
.mobilleiste__hoerer {
  width: auto;
  min-width: 52px;
  gap: 9px;
  padding-inline: 15px;
  border-radius: 999px;
  font: 600 15px/1 var(--schrift-text);
}
@media (max-width: 379px) {
  .mobilleiste__hoerer { width: 52px; padding-inline: 0; gap: 0; }
  .mobilleiste__hoerertext { display: none; }
}

/* ---------------------------------------------------------------------
   Cookie-Hinweis als Lichtkasten
   --------------------------------------------------------------------- */
.einwilligung-schicht {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(0, 43, 73, .62);
  overflow-y: auto;
}
.einwilligung-kasten {
  background: #fff;
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten-menue);
  padding: 36px 34px;
  width: 100%; max-width: min(560px, 100%);
  margin: auto;
}
.einwilligung__titel { font-size: 26px; color: var(--marke); margin-bottom: 14px; }
.einwilligung__text { color: var(--gedaempft); font-size: 16px; margin-bottom: 22px; }

.einwilligung__details { margin-bottom: 22px; }
.einwilligung__details > summary {
  cursor: pointer; font: 500 15px/1 var(--schrift-text); color: var(--marke);
  padding: 10px 0;
}
.einwilligung__kategorie {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 0; border-top: 1px solid var(--linie);
  font-size: 14.5px;
}
.einwilligung__kategorie input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--marke); }
.einwilligung__kategorie strong { display: block; color: var(--marke); font-weight: 600; }
.einwilligung__beschreibung { display: block; color: var(--gedaempft); margin-top: 3px; }
.einwilligung__marke {
  display: inline-block; margin-left: 8px;
  padding: 2px 8px; border-radius: 999px;
  background: var(--flaeche); color: var(--gedaempft);
  font: 400 12px/1.5 var(--schrift-text);
}

.einwilligung__knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }
.einwilligung__knoepfe .knopf { flex: 1 1 auto; }

.einwilligung__rechtliches {
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--linie);
  font-size: 13.5px; color: var(--gedaempft);
  display: flex; gap: 10px; flex-wrap: wrap;
}
.einwilligung__rechtliches a { color: var(--gedaempft); text-decoration: underline; text-underline-offset: 2px; }
.einwilligung__rechtliches a:hover { color: var(--akzent-tief); }

/* Aufruf der Einstellungen oben in der Datenschutzerklärung */
.einwilligung__aufruf {
  margin-bottom: 28px; padding: 14px 18px;
  background: var(--flaeche); border-radius: 12px;
  font-size: 15px;
}

/* Solange der Kasten offen ist, wird dahinter nicht gescrollt */
body.einwilligung-offen { overflow: hidden; }

@media (max-width: 640px) {
  .einwilligung-kasten { padding: 26px 22px; }
  .einwilligung__titel { font-size: 22px; }
  .einwilligung__knoepfe .knopf { flex: 1 1 100%; }
}

@media (max-width: 1180px) {
  .hero-split h1 { font-size: 56px; }
  .hero-zentriert h1 { font-size: 60px; }
  .seitenkopf h1 { font-size: 46px; }
  .abschnittskopf h2, .ueberschrift-m { font-size: 38px; }
  .referenz-teaser__text { padding: 40px 40px; }
  .textbild { padding: 44px 40px; gap: 40px; }
}

/* Ab hier: kompakter Kopf mit Burger-Menü (entspricht narrow < 1120 im Entwurf) */
@media (max-width: 1120px) {
  .kopf__innen { height: 72px; padding-inline: 20px; justify-content: space-between; }
  .kopf__nav { display: none; }
  .kopf__logo img { height: 38px; }
  .kopf__burger { display: flex; }
  .kopf__aktionen .knopf--umriss { display: none; }
  .kopf__aktionen .knopf--cta { padding: 12px 20px; }
  .kopf__leiste { position: relative; }
}

@media (max-width: 980px) {
  :root { --rand: 24px; }

  .abschnitt { padding-block: 72px; }
  .abschnitt--eng, .abschnitt--knapp { padding-block: 60px; }

  .hero-split__innen { grid-template-columns: 1fr; gap: 40px; min-height: 0; }
  .hero-split__text { padding: 64px 0 0; }
  .hero-split__bild { padding: 0 0 64px; }
  .hero-split h1 { font-size: 44px; }
  .hero-zentriert__innen { padding-top: 72px; }
  .hero-zentriert h1 { font-size: 44px; }
  .hero-kennzahlen__innen { padding-top: 72px; }
  .hero-kennzahlen h1 { font-size: 44px; }

  .seitenkopf { padding: 64px 0 72px; }
  .seitenkopf h1, .seitenkopf--split h1 { font-size: 38px; }
  .seitenkopf--split .seitenkopf__innen { grid-template-columns: 1fr; gap: 36px; }
  .seitenkopf--split .seitenkopf__bild { display: none; }

  .raster--3, .raster--4 { grid-template-columns: repeat(2, 1fr); }
  .raster--6 { grid-template-columns: repeat(3, 1fr); }
  .zweispaltig, .zweispaltig--gleich, .zweispaltig--breit, .zweispaltig--schmal {
    grid-template-columns: 1fr; gap: 36px;
  }
  .kennzahlen { grid-template-columns: repeat(2, 1fr) !important; }
  .prozess { grid-template-columns: repeat(2, 1fr); }
  .warum { grid-template-columns: 1fr; gap: 24px; }

  .abschnittskopf { margin-bottom: 36px; }
  .abschnittskopf h2, .ueberschrift-m { font-size: 32px; }
  .ueberschrift-l { font-size: 36px; }
  .ueberschrift-s, .cta-band h2, .cta-band--knapp h2 { font-size: 28px; }
  .vorspann { font-size: 18px; }

  .referenz-teaser { grid-template-columns: 1fr; }
  .referenz-teaser__bild { min-height: 240px; order: -1; }
  .referenz-teaser h3 { font-size: 26px; }

  .textbild { grid-template-columns: 1fr; padding: 32px 28px; gap: 28px; }
  .textbild__bild, .textbild--gedreht .textbild__bild { order: -1; }
  .textbild h2 { font-size: 28px; }

  .nummernliste__zeile { grid-template-columns: 60px 1fr; gap: 12px 20px; padding: 24px 24px; }
  .nummernliste__zeile p { grid-column: 2; }
  .nummernliste__zeile .weiter { grid-column: 2; }
  .nummernliste__nummer { font-size: 30px; }
  .nummernliste__zeile h3 { font-size: 21px; }

  .stelle { grid-template-columns: 1fr; gap: 10px; padding: 24px; }
  .stelle h3 { font-size: 20px; }
  .stelle__aktion { justify-self: start; margin-top: 6px; }

  .formular__paar { grid-template-columns: 1fr; }
  .formular--breit { grid-template-columns: 1fr; }

  .fuss__raster { grid-template-columns: 1fr 1fr; gap: 36px; }

  .faktenliste > div { grid-template-columns: 1fr; gap: 6px; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }

  /* Die Hauptschaltfläche wandert ins Aufklappmenü. Zusammen mit dem
     Burger war sie 283 px breit und hat die Kopfzeile über die
     Bildschirmbreite gedrückt, was die ganze Seite verbreitert hat. */
  .kopf__aktionen .knopf--cta { display: none; }
  .kopf__innen { padding-inline: 16px; }
  .kopf__logo img { height: 34px; }

  /* Angeheftete Leiste einblenden und darüber Platz schaffen, damit sie
     den Fußbereich nicht verdeckt. */
  .mobilleiste { display: flex; }
  body.menue-offen .mobilleiste { display: none; }

  /* Im Startbereich stehen dieselben Wege schon in der Leiste unten.
     Zwei Aufrufe übereinander kosten nur Platz vor dem eigentlichen Text. */
  .hero-split .knopfreihe,
  .hero-zentriert .knopfreihe,
  .hero-kennzahlen .knopfreihe { display: none; }
  .seite { padding-bottom: 84px; }

  .abschnitt { padding-block: 56px; }
  .raster--2, .raster--3, .raster--4 { grid-template-columns: 1fr; }
  .raster--6 { grid-template-columns: repeat(2, 1fr); }
  .kennzahlen { grid-template-columns: 1fr !important; }
  .prozess { grid-template-columns: 1fr; }

  .hero-split h1, .hero-zentriert h1, .hero-kennzahlen h1 { font-size: 34px; }
  .seitenkopf h1, .seitenkopf--split h1 { font-size: 30px; }
  .abschnittskopf h2, .ueberschrift-m, .ueberschrift-l { font-size: 27px; }

  .knopf { width: 100%; }
  .knopfreihe { gap: 12px; }
  .kopf__aktionen .knopf { width: auto; }
  .blaettern .knopf, .suchfeld .knopf { width: auto; }

  .referenz-teaser__text { padding: 28px 24px; }
  .karte, .karte--dunkel, .karte--flaeche { padding: 28px 24px; }
  .kontaktkarte { padding: 32px 26px; }
  .zitat { padding: 28px 24px; }
  .zitat__text { font-size: 20px; }
  .kennzahlenreihe { gap: 24px; }

  .fuss__raster { grid-template-columns: 1fr; gap: 32px; }
  .fuss { padding-top: 56px; }
}

/* ---------------------------------------------------------------------
   17. Druck
   --------------------------------------------------------------------- */
@media print {
  .kopf, .fuss, .cta-band, .knopf, .blaettern { display: none !important; }
  body { font-size: 12pt; color: #000; }
  .abschnitt { padding-block: 12pt; }
  a::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
}


/* ---------------------------------------------------------------------
   Startbereich mit Globus

   Der Globus ist eine Leinwand, die das Bündel selbst in die Bühne legt.
   Läuft er nicht, bleibt der Farbverlauf stehen: dieselbe Anmutung, nur
   ohne Bewegung. Der Text liegt in einer eigenen Ebene darüber und ist
   in keinem Fall vom Globus abhängig.
   --------------------------------------------------------------------- */

.hero-globus {
  position: relative;
  isolation: isolate;
  background: var(--marke);
  background-image:
    radial-gradient(120% 90% at 82% 45%, rgba(41, 254, 170, .16) 0%, rgba(6, 42, 71, 0) 58%),
    radial-gradient(90% 70% at 100% 30%, rgba(30, 110, 190, .38) 0%, rgba(6, 42, 71, 0) 62%);
  color: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;

  /* Der Globus rechnet seine Höhe aus der Fensterhöhe, nicht aus dem
     Abschnitt. Weicht beides voneinander ab, sitzt die Weltkugel
     verschoben im Bild. Deshalb ist der Abschnitt fensterhoch.
     svh statt vh, damit auf dem Telefon die ein- und ausfahrende
     Adressleiste den Abschnitt nicht springen lässt. */
  min-height: 100vh;
  min-height: 100svh;
}

/* Bühne des Globus, liegt hinter dem Text.

   Maße exakt wie im Original: Das Bündel misst die Leinwand für die
   Breite und nimmt für die Höhe das Fenster. Wird die Leinwand größer
   gemacht als das Fenster hoch ist, passt der Zeichenpuffer nicht mehr
   zur Anzeigefläche, und der Browser rechnet ihn hoch. Genau daher kam
   die Unschärfe. Größe und Lage der Weltkugel gehören deshalb nicht ins
   CSS, sondern an die Kamera, siehe ressourcen/js/globus-starter.js. */
.hero-globus__buehne {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* !important, weil das Bündel die Maße als Inline-Stil in dieselbe
   Leinwand schreibt, die es vorher vermisst. Beim ersten Durchgang steht
   dort 0; ohne feste Maße von außen bliebe die Leinwand für immer null
   Pixel groß. Dieselbe Regel steht im Original. */
.hero-globus__buehne canvas {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* Die Ladeanzeige des Bündels sitzt rechts, wo der Globus erscheint,
   nicht in der Mitte über der Überschrift. */
.hero-globus__buehne #loading-screen {
  position: absolute;
  inset: 0 0 0 auto;
  width: 45%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: opacity .4s ease;
}
.hero-globus__buehne .loader {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2px solid var(--akzent);
  border-right-color: transparent;
  animation: globus-dreht 1s linear infinite;
}
@keyframes globus-dreht { to { transform: rotate(360deg); } }

/* Der Globus ist bedienbar: drehen, zoomen, ein Land antippen. Damit das
   geht, darf die Textebene die Zeiger nicht abfangen. Sie reicht über die
   volle Breite, liegt also auch über der Weltkugel.

   Deshalb lässt die Ebene Zeiger durch, und nur die Textspalte selbst
   nimmt sie wieder an. Links bleiben Schaltflächen und Verweise
   bedienbar, rechts greift der Globus. */
.hero-globus__innen {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding: 96px var(--rand);
  pointer-events: none;
}
.hero-globus__text {
  max-width: 620px;
  pointer-events: auto;
}

.hero-globus__marke {
  font: 600 20px/1.3 var(--schrift-ueberschrift);
  color: var(--akzent);
  margin-bottom: 20px;
}

.hero-globus h1 {
  font: 600 clamp(38px, 5vw, 62px)/1.15 var(--schrift-ueberschrift);
  letter-spacing: -1.4px;
  color: #fff;
  margin: 0;
}

.hero-globus__vorspann {
  font-size: 21px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .84);
  margin: 20px 0 32px;
  max-width: 34em;
}

.hero-globus .knopfreihe { margin-bottom: 14px; }

.hero-globus__mikrotext {
  font-size: 15px;
  color: rgba(255, 255, 255, .68);
  margin: 0;
}

/* Vertrauenszeile: Merkmale nebeneinander, durch feine Striche getrennt. */
.hero-globus__belege {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
}
.hero-globus__belege li {
  font: 500 15px/1.3 var(--schrift-text);
  color: rgba(255, 255, 255, .88);
  padding-left: 22px;
  position: relative;
}
.hero-globus__belege li + li { border-left: 1px solid rgba(255, 255, 255, .18); padding-left: 22px; }
.hero-globus__belege li:first-child { padding-left: 0; }

/* Auf schmalen Geräten steht die Weltkugel hinter dem Text statt
   daneben. Damit die Schrift darauf lesbar bleibt, liegt zwischen
   beidem ein Schleier: unten dicht, oben durchsichtig. Ohne ihn träfe
   weiße Schrift auf die hellen Punkte der Landmassen.

   Die Kameraführung dafür setzt der Starter, nicht das CSS. */
@media (max-width: 900px) {
  .hero-globus { min-height: 82svh; }
  .hero-globus__innen { padding: 64px var(--rand) 72px; }

  .hero-globus__buehne::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
                  rgba(6, 42, 71, .15) 0%,
                  rgba(6, 42, 71, .72) 46%,
                  rgba(6, 42, 71, .92) 100%);
  }

}

/* Dieselben Wege stehen unten in der angehefteten Leiste. Zwei Aufrufe
   übereinander kosten nur Platz vor dem eigentlichen Text. */
@media (max-width: 640px) {
  .hero-globus .knopfreihe { display: none; }
  .hero-globus__mikrotext { margin-top: 4px; }
}

/* Ist der Globus aus einem der Gründe des Starters ausgeblieben, bleibt
   die leere Bühne stehen. Sie stört nicht, kostet aber auch nichts. */
.hero-globus__buehne[data-globus] { display: none; }

/* Wer Bewegung reduziert, bekommt den Globus gar nicht erst geladen,
   siehe ressourcen/js/globus-starter.js. Falls doch eine Leinwand da
   ist, wird sie hier stillgelegt. */
@media (prefers-reduced-motion: reduce) {
  .hero-globus__buehne { display: none; }
}

/* =====================================================================
   Bausteine der neuen Startseite

   Übersetzt aus dem Gestaltungsentwurf (Artboard „Startseite Local SEO
   Agentur"). Alle Farben kommen aus dem Token-Vertrag ganz oben, damit
   der Dunkelmodus ohne eine einzige zusätzliche Regel funktioniert.

   Zwei Regeln, die hier durchgehend gelten:
   Mint ist Fläche, Ziffer, Punkt, Unterstrich oder Rahmen, nie Schrift
   auf hellem Grund. Raster laufen über auto-fit/minmax, damit zwei oder
   fünf Karten genauso tragen wie drei.
   ===================================================================== */

/* ══ 1. Hero ══ */
/* Bewertungsleiste.
   Steht auf der Startseite, den regionalen Zielseiten und den
   Leistungsseiten — überall auf dunklem Grund, deshalb helle Schrift.

   Die Sterne tragen die Farbe des jeweiligen Anbieters: Google in seinem
   Gold, Trustpilot in seinem Grün. Das ist kein Schmuck, sondern
   Wiedererkennung; ein mintfarbener Stern liest sich wie unsere eigene
   Behauptung, ein goldener wie ein Zitat. */
.bewertungen {
  list-style: none; margin: 40px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px;
}
.bewertung {
  display: flex; align-items: center; gap: 14px;
  padding-inline-start: 32px;
  border-inline-start: 1px solid rgba(255, 255, 255, .2);
}
.bewertung:first-child { padding-inline-start: 0; border-inline-start: 0; }
.bewertung__anbieter {
  font: 700 30px/1 var(--schrift-ueberschrift);
  letter-spacing: -.6px; color: var(--band-text);
}
.bewertung__urteil { display: flex; flex-direction: column; gap: 2px; }
.bewertung__sterne {
  font-size: 17px; letter-spacing: 2px;
  color: var(--sternfarbe, var(--akzent));
}
.bewertung--gold  { --sternfarbe: #F5B301; }
.bewertung--gruen { --sternfarbe: #00B67A; }
.bewertung__text { font-size: 13px; color: rgba(255, 255, 255, .7); }

@media (max-width: 900px) {
  .bewertungen { gap: 14px 20px; margin-top: 30px; }
  .bewertung { padding-inline-start: 20px; }
  .bewertung__anbieter { font-size: 23px; }
}

/* Unterhalb dieser Breite passen die beiden Bewertungen nicht mehr
   nebeneinander — gemessen bei 390 Pixeln: Google bleibt oben, Trustpilot
   rutscht in die zweite Zeile.

   Der Trennstrich gehört aber zwischen zwei Nachbarn in derselben Zeile.
   Nach dem Umbruch hing er am Zeilenanfang und schob das Badge um zwanzig
   Pixel nach rechts, sodass die beiden nicht mehr untereinander standen.
   :first-child hilft dagegen nicht: Trustpilot ist das zweite Kind und
   bleibt es, auch wenn es in einer neuen Zeile steht — ob umbrochen wurde,
   weiß CSS nicht.

   Deshalb entfällt der Strich hier ganz. Der größere Zeilenabstand trennt
   die beiden deutlich genug. */
@media (max-width: 640px) {
  .bewertungen { gap: 18px 24px; }
  .bewertung {
    padding-inline-start: 0;
    border-inline-start: 0;
  }
}

/* ══ 2. Vertrauensleiste ══ */
.logo-leiste {
  background: var(--sanft);
  border-block: 1px solid var(--linie);
  padding-block: 52px 56px;
}
.logo-leiste__kopf {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px;
  margin-bottom: 30px;
}
.logo-leiste__titel {
  font: 700 19px/1.3 var(--schrift-ueberschrift);
  letter-spacing: .2px; color: var(--tinte); margin: 0;
}
.logo-leiste__untertitel { color: var(--gedaempft); font-size: 16px; margin: 0; }

.logo-leiste__band {
  overflow: hidden;

  /* Die Klammer muss waagerecht schneiden — sonst wäre das Band breiter
     als die Seite. Senkrecht darf sie es nicht: Die Angaben zum Logo
     erscheinen darüber und wären sonst abgeschnitten.
     overflow-x: hidden mit overflow-y: visible geht nicht, das ergibt
     laut Spezifikation wieder einen Scrollbereich. Deshalb wächst der
     Kasten stattdessen nach oben und wird mit einem gleich großen
     negativen Außenabstand wieder an seinen Platz gezogen: sichtbar
     unverändert, innen aber Platz für die Blase.
     Die Maske verläuft waagerecht, die zusätzliche Höhe ändert an ihr
     also nichts. */
  padding-top: 124px;
  margin-top: -124px;

  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.logo-leiste__spur { display: flex; width: max-content; }

/* Der Kasten ragt jetzt über die Überschrift. Damit er dort nichts
   abfängt, lässt er Zeiger durch; die Logos nehmen sie wieder an. */
.logo-leiste__band { pointer-events: none; }
.logo-leiste__band .kundenlogo,
.logo-leiste__band /* Auf dem Telefon kleinere Kacheln, sonst passen kaum zwei ins Bild.
   Die Blase wird mitverkleinert und bleibt so innerhalb des Kastens. */
@media (max-width: 560px) {
  .kundenlogo { width: 172px; }
  .kundenlogo__flaeche { height: 64px; }
  .logoinfo { max-width: 208px; padding: 12px 14px; }
  .logo-leiste__band { padding-top: 108px; margin-top: -108px; }
}

.logo-leiste__pause { pointer-events: auto; }
.logo-leiste__gruppe {
  list-style: none; margin: 0; padding: 0 22px 0 0;
  display: flex; align-items: center; gap: 22px;
}
.logo-leiste--laufschrift .logo-leiste__spur { animation: laufband 38s linear infinite; }
.logo-leiste--laufschrift .logo-leiste__spur[data-angehalten] { animation-play-state: paused; }
@keyframes laufband { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .logo-leiste--laufschrift .logo-leiste__spur { animation: none; }
}

/* Ruhende Darstellung: alle Logos stehen still nebeneinander.

   Ohne Laufband gibt es nichts, was die Reihe in Bewegung hielte — sie
   wäre am Rand des Kastens schlicht abgeschnitten. Deshalb bricht sie
   hier um und bleibt in der gewohnten Containerbreite. Die Maske, die
   beim Laufband die Ränder ausblendet, hätte hier keinen Sinn: Sie
   würde das erste und das letzte Logo verblassen lassen, obwohl beide
   vollständig zu sehen sind. */
.logo-leiste:not(.logo-leiste--laufschrift) .logo-leiste__band {
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
  mask-image: none;
}
.logo-leiste:not(.logo-leiste--laufschrift) .logo-leiste__spur { width: 100%; }
.logo-leiste:not(.logo-leiste--laufschrift) .logo-leiste__gruppe {
  flex-wrap: wrap; width: 100%; padding-right: 0;
}

.kundenlogo {
  position: relative;
  width: 230px; flex: none;
}
.kundenlogo__flaeche {
  height: 78px;
  display: grid; place-items: center; gap: 4px;
  border: 1px solid var(--linie); border-radius: var(--radius-klein);
  background: var(--karte);
  transition: border-color .18s ease;
}
.kundenlogo__flaeche img {
  max-width: 78%; max-height: 62%; object-fit: contain;
  /* Zurückhaltend, damit die Reihe ruhig wirkt und kein Logo das
     andere überstrahlt. Unter der Maus bekommt es seine Farbe. */
  filter: grayscale(1); opacity: .72;
  transition: filter .2s ease, opacity .2s ease;
}
.kundenlogo:hover .kundenlogo__flaeche img,
.kundenlogo:focus-within .kundenlogo__flaeche img { filter: none; opacity: 1; }
.kundenlogo__name { font: 800 21px/1 var(--schrift-ueberschrift); color: var(--tinte); text-align: center; }
.kundenlogo__hinweis { font: 400 10px/1 var(--schrift-mono); color: var(--gedaempft); }

/* Angaben zum Logo: Sitz und Verweis auf die Fallstudie.

   Sie erscheinen beim Überfahren und beim Tastaturfokus. Nur „hover"
   wäre auf dem Telefon nicht erreichbar und mit der Tastatur gar nicht;
   focus-within deckt beides mit ab, weil der Verweis darin selbst
   fokussierbar ist und die Blase dann offen bleiben muss.

   Wichtig ist das Anhalten: Ein Verweis, der unter dem Zeiger wegwandert,
   ist nicht anklickbar. Sobald jemand ein Logo berührt, steht das Band. */
.kundenlogo--mitinfo .kundenlogo__flaeche { cursor: default; }
.kundenlogo--mitinfo:hover .kundenlogo__flaeche,
.kundenlogo--mitinfo:focus-within .kundenlogo__flaeche { border-color: var(--kontur); }
.kundenlogo__flaeche:focus-visible { outline: 3px solid var(--akzent-tief); outline-offset: 3px; }

.logo-leiste--laufschrift .logo-leiste__spur:hover,
.logo-leiste--laufschrift .logo-leiste__spur:focus-within { animation-play-state: paused; }

.logoinfo {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  z-index: 30;
  width: max-content;
  max-width: 260px;
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-radius: var(--radius-klein);
  border: 1px solid rgba(255, 255, 255, .12);
  background: var(--tief);
  color: #fff;
  box-shadow: 0 18px 44px -18px rgba(0, 0, 0, .6);
  text-align: start;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

/* Spitze zum Logo hin, damit die Blase zugeordnet bleibt. */
.logoinfo::after {
  content: '';
  position: absolute; top: 100%; left: 50%;
  width: 12px; height: 12px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--tief);
  border-inline-end: 1px solid rgba(255, 255, 255, .12);
  border-block-end: 1px solid rgba(255, 255, 255, .12);
}

.kundenlogo--mitinfo:hover .logoinfo,
.kundenlogo--mitinfo:focus-within .logoinfo {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.logoinfo__name { font: 700 15px/1.3 var(--schrift-ueberschrift); }
.logoinfo__sitz { font-size: 13.5px; color: rgba(255, 255, 255, .7); line-height: 1.45; }
.logoinfo__verweis {
  margin-top: 6px;
  color: var(--akzent);
  font: 600 13.5px/1.3 var(--schrift-text);
  border-bottom: 1px solid rgba(41, 254, 170, .45);
  padding-bottom: 2px;
  justify-self: start;
}
.logoinfo__verweis:hover { color: #fff; border-bottom-color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .logoinfo { transition: none; }
}

.logo-leiste__pause {
  display: block; margin: 18px auto 0;
  border: 1px solid var(--linie); border-radius: 999px;
  background: var(--karte); color: var(--tinte);
  font: 500 14px/1 var(--schrift-text); padding: 10px 18px; cursor: pointer;
}
.logo-leiste__pause:hover { border-color: var(--kontur); }

/* ══ 3. Leistungen ══ */
.leistungstabelle {
  /* position: relative ist hier kein Beiwerk, sondern der Grund, warum
     die Seite auf dem Telefon nicht mehr seitlich ins Leere scrollt.

     Die Tabelle ist breiter als der Bildschirm und scrollt deshalb in
     sich. In ihren Schaltflächen stecken unsichtbare Zusätze für
     Bildschirmleser („für SEO On-Page"), und die sind absolut
     positioniert. Ein absolut positioniertes Element wird von einem
     overflow: hidden nur dann mitgeschnitten, wenn der clippende
     Vorfahre selbst positioniert ist. War er nicht — also standen die
     Zusätze bei 778 Pixeln im Dokument und zogen die ganze Seite
     entsprechend breit. */
  position: relative;
  overflow-x: auto;
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  background: var(--karte);
  box-shadow: var(--schatten-karte);
}
.leistungstabelle__tabelle {
  width: 100%; min-width: 860px;
  border-collapse: collapse;
  text-align: start;
}

.leistungstabelle__ecke { padding: 30px 28px 26px; vertical-align: top; }
.leistungstabelle__eckentitel { display: block; font: 700 17px/1.3 var(--schrift-ueberschrift); color: var(--tinte); }
.leistungstabelle__eckentext  { display: block; margin-top: 6px; font-size: 15px; color: var(--gedaempft); font-weight: 400; }

.leistungstabelle__paket {
  position: relative;
  padding: 30px 24px 26px;
  border-inline-start: 1px solid var(--linie);
  vertical-align: top;
}
.leistungstabelle__paket--empfohlen,
.leistungstabelle__zelle--empfohlen,
.leistungstabelle__aktion--empfohlen { background: var(--sanft); }

.leistungstabelle__fahne {
  position: absolute; top: 0; inset-inline-start: 24px;
  background: var(--marke); color: var(--akzent);
  font: 700 12px/1 var(--schrift-ueberschrift);
  letter-spacing: 1px; text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 0 0 var(--radius-klein) var(--radius-klein);
}
.leistungstabelle__pakettitel   { display: block; margin-top: 22px; font: 700 21px/1.3 var(--schrift-ueberschrift); color: var(--tinte); }
.leistungstabelle__preis        { display: block; margin-top: 6px; font: 800 30px/1.1 var(--schrift-ueberschrift); letter-spacing: -.8px; color: var(--tinte); }
.leistungstabelle__preishinweis { display: block; margin-top: 4px; font-size: 14px; font-weight: 400; color: var(--gedaempft); }

.leistungstabelle__merkmal {
  padding: 16px 28px; font: 400 16px/1.5 var(--schrift-text);
  color: var(--tinte); text-align: start;
}
.leistungstabelle__zelle {
  padding: 16px 24px; border-inline-start: 1px solid var(--linie); font-size: 18px;
}
.leistungstabelle__tabelle tbody tr > *,
.leistungstabelle__tabelle thead tr > * { border-bottom: 1px solid var(--linie); }

.leistungstabelle__ja   { color: var(--akzent-tief); font-weight: 700; }
.leistungstabelle__nein { color: var(--gedaempft); }
.leistungstabelle__wert { font-size: 15px; color: var(--tinte); }

.leistungstabelle__aktion { padding: 22px 24px 28px; border-inline-start: 1px solid var(--linie); }
.leistungstabelle__ecke--leer { padding: 26px 28px; }
.knopf--breit { display: flex; width: 100%; }

.leistungstabelle__fussnote { margin-top: 18px; color: var(--gedaempft); font-size: 15px; }

/* ══ 4. Optimierungen 01-04 ══ */
.prozess {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(258px, 100%), 1fr)); gap: 20px;
}
.prozess__schritt {
  display: flex; flex-direction: column; gap: 12px;
  padding: 30px 28px 32px;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  transition: border-color .18s ease;
}
.prozess__schritt:hover { border-color: var(--kontur); }
.prozess__nummer {
  font: 800 15px/1 var(--schrift-ueberschrift);
  letter-spacing: 1px; color: var(--akzent-tief);
}
.prozess__titel { font: 700 23px/1.2 var(--schrift-ueberschrift); color: var(--tinte); margin: 0; }
.prozess__text  { color: var(--gedaempft); font-size: 16px; line-height: 1.62; margin: 0; }
.prozess__ergebnis {
  margin: auto 0 0; padding-top: 14px;
  border-top: 1px solid var(--linie);
  color: var(--tinte); font-size: 15px; font-weight: 500;
}

/* ══ 5. Erfolgsstories ══ */
.fallraster {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 22px;
}
.fallkarte {
  /* Aus demselben Grund wie bei der Leistungstabelle: Die Karte schneidet
     mit overflow, also muss sie auch der Bezugspunkt für alles sein, was
     darin absolut positioniert ist. */
  position: relative;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  transition: border-color .18s ease;
}
.fallkarte:hover { border-color: var(--kontur); }
.fallkarte__bild { aspect-ratio: 16 / 10; border-bottom: 1px solid var(--linie); }
.fallkarte__bild img { width: 100%; height: 100%; object-fit: cover; }
.fallkarte__inhalt { display: flex; flex-direction: column; gap: 14px; flex: 1; padding: 26px 26px 28px; }
.fallkarte__kategorie { font: 400 12px/1.4 var(--schrift-mono); letter-spacing: .6px; color: var(--gedaempft); margin: 0; }
.fallkarte__titel { font: 700 23px/1.2 var(--schrift-ueberschrift); color: var(--tinte); margin: 0; }
.fallkarte__text  { color: var(--gedaempft); font-size: 16px; line-height: 1.6; margin: 0; }

.fallkarte__kennzahlen {
  display: flex; gap: 26px; margin: auto 0 0; padding: 16px 0;
  border-block: 1px solid var(--linie);
}
.fallkarte__kennzahlen .kennzahl { display: flex; flex-direction: column; gap: 2px; }
.fallkarte__kennzahlen .kennzahl__wert {
  font: 800 26px/1.1 var(--schrift-ueberschrift); letter-spacing: -.6px; color: var(--tinte);
}
.fallkarte__kennzahlen .kennzahl__text { font-size: 13px; color: var(--gedaempft); margin: 0; }
.fallkarte__verweis { align-self: flex-start; }

/* Unterstrichener Textverweis, Mint nur als Linie – nie als Schriftfarbe auf Hell */
.textlink {
  color: var(--tinte); font: 600 16px/1.3 var(--schrift-text);
  border-bottom: 2px solid var(--akzent); padding-bottom: 3px;
}
.textlink:hover { color: var(--akzent-tief); border-bottom-color: var(--akzent-tief); }

/* ══ 6. CTA-Band ══ */
.cta-band { position: relative; overflow: hidden; }
.cta-band__muster {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, var(--band-linie) 1px, transparent 1.4px);
  background-size: 26px 26px;
  mask-image: linear-gradient(105deg, transparent 42%, #000 100%);
}

/* Die Punkte glimmen dort auf, wo der Zeiger steht.

   Dieselbe Idee wie die Lichtimpulse auf den Straßen der Standortkarte,
   nur ruhiger: kein Wandern, kein Blinken, nur ein weicher Lichtkreis,
   der dem Zeiger folgt.

   Zwei Punktlagen übereinander ergeben das Leuchten ohne Weichzeichner:
   ein scharfer Punkt und ein größerer, fast durchsichtiger Hof darum.
   Ein filter: drop-shadow() sähe ähnlich aus, müsste aber über tausend
   Punkte gerechnet werden — auf dem Telefon merkt man das.

   Die Lage des Zeigers kommt als --glut-x/--glut-y aus haupt.js. Ohne
   Skript bleiben die Werte auf ihrem Standard und die Lage ist mangels
   :hover ohnehin ohne Belang.

   Die Maske des Elternteils blendet links schon alles aus. Diese hier
   begrenzt zusätzlich auf die Umgebung des Zeigers — beide zusammen
   ergeben genau die Punkte rechts, die gerade unter der Maus liegen. */
.cta-band__glut {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle, rgba(41, 254, 170, .85) 1px, transparent 1.5px),
    radial-gradient(circle, rgba(41, 254, 170, .16) 2.6px, transparent 4.2px);
  background-size: 26px 26px, 26px 26px;
  opacity: 0;
  transition: opacity .45s ease;
  -webkit-mask-image: radial-gradient(circle 170px at var(--glut-x, 50%) var(--glut-y, 50%),
                      #000 0%, rgba(0, 0, 0, .5) 45%, transparent 72%);
          mask-image: radial-gradient(circle 170px at var(--glut-x, 50%) var(--glut-y, 50%),
                      #000 0%, rgba(0, 0, 0, .5) 45%, transparent 72%);
}
.cta-band:hover .cta-band__glut { opacity: .55; }

/* Wer Bewegung reduziert, bekommt kein dem Zeiger folgendes Licht. */
@media (prefers-reduced-motion: reduce) {
  .cta-band__glut { display: none; }
}
.cta-band__innen {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 36px;
}
.cta-band__text { max-width: 660px; }
.cta-band__ueberschrift {
  font: 700 clamp(30px, 3.4vw, 42px)/1.2 var(--schrift-ueberschrift);
  letter-spacing: -1.1px; color: var(--band-text); margin: 0 0 14px;
}
.cta-band__vorspann { color: var(--band-sub); font-size: 18px; line-height: 1.6; margin: 0; }

.cta-band__aktionen { display: flex; flex-direction: column; gap: 12px; min-width: 270px; }
.cta-band__mikrotext { margin: 2px 0 0; color: var(--band-sub); font-size: 14px; text-align: center; }

/* Kennzeichnung auf dem Band: Mint ist hier zulässig, der Grund ist dunkel */
.marke-zeile--akzent { color: var(--akzent); }

/* ══ 7. Team ══ */
/* Alle Zeilen gleich hoch.

   Nicht jede Person hat einen Zusatztext, und ohne diese Zeile richtete
   sich jede Zeile nach ihrer laengsten Karte: 258 Pixel, dann 138, dann
   wieder 258. Der Sprung dazwischen war das, was den Blick stoerte, nicht
   die leeren Karten selbst.

   1fr verteilt die Hoehe der hoechsten Zeile auf alle. Wo weniger drin
   steht, bleibt unten Luft, und das ist ruhiger als eine Treppe. */
.team {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(288px, 100%), 1fr));
  gap: 22px;
}

/* Nur, wo mehrere Karten nebeneinander stehen. Untereinander gibt es
   keine Treppe, die auszugleichen waere, und eine Karte mit nur Name und
   Rolle waere dort ohne Not doppelt so hoch wie noetig. Ab etwa 660
   Pixeln passen zwei Spalten in den Behaelter. */
@media (min-width: 700px) {
  .team { grid-auto-rows: 1fr; }
}
.personenkarte {
  display: flex; flex-direction: column; gap: 16px;
  padding: 26px;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  transition: border-color .18s ease;
}
.personenkarte:hover { border-color: var(--kontur); }

.personenkarte__kopf { display: flex; align-items: center; gap: 18px; }

/* Das Portraet ist immer 84 auf 84 und rund.

   Diese Regel hing frueher an .team--kompakt. In der Rasterfassung, die
   „Ueber uns“ benutzt, gab es damit gar keine Groessenangabe: Jedes Bild
   brachte stattdessen seine eigenen width/height-Attribute aus der
   Mediathek mit. Nebeneinander standen dann Koepfe von 72, 113 und 201
   Pixeln, und die Karten darunter waren entsprechend verschieden hoch.

   bildblock() gibt hier direkt ein <img> aus, keinen Behaelter mit Bild
   darin. Die frueher danebenstehende Regel „.personenkarte__bild img“
   traf deshalb nie etwas und ist weg. object-fit kommt aus .medienbild. */
.personenkarte__bild {
  width: 84px; height: 84px; flex: none;
  border-radius: 999px; overflow: hidden;
  border: 1px solid var(--linie);
  object-fit: cover;
}

/* Anfangsbuchstaben, solange kein Portraet hinterlegt ist. */
.personenkarte__kuerzel {
  display: grid; place-items: center;
  background: var(--sanft); color: var(--marke);
  font: 700 26px/1 var(--schrift-ueberschrift);
  letter-spacing: .5px;
}

.personenkarte__name  { font: 700 21px/1.2 var(--schrift-ueberschrift); color: var(--tinte); margin: 0 0 4px; }
.personenkarte__rolle { color: var(--gedaempft); font-size: 15px; margin: 0; }
.personenkarte__text  { color: var(--gedaempft); font-size: 16px; line-height: 1.62; margin: 0; }
.personenkarte__schlagworte { margin-top: auto; }
.personenkarte__verweis { align-self: flex-start; }

/* Pille mit Rahmen statt Mint-Fläche, wie im Entwurf */
.pille--umriss { background: var(--flaeche); border: 1px solid var(--linie); color: var(--tinte); }
.pillenreihe { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }

/* ══ 8. Einzugsgebiete ══ */
/* Hauptsitz links, Städte rechts.

   Vorher stand hier auto-fit. Das ergab bei 1176 Pixeln drei Spuren, von
   denen die dritte leer blieb und auf null zusammenfiel — zwei gleich
   breite Spalten also, nur auf Umwegen. Ausgeschrieben ist es nicht nur
   ehrlicher, sondern erlaubt auch die ungleiche Teilung: Die Städteliste
   trägt acht Zeilen, der Hauptsitz eine Anschrift.

   align-items bleibt auf dem Standard „stretch". Mit „start" war die
   Hauptsitzkarte 225 Pixel hoch und die Liste daneben 386 — zwei Kästen
   mit ausgefranster Unterkante. */
.standortraster {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 22px;
}
@media (max-width: 900px) {
  .standortraster { grid-template-columns: minmax(0, 1fr); }
}

.hauptsitz {
  position: relative; overflow: hidden;
  background: var(--marke); color: var(--band-text);
  border-radius: var(--radius-gross);
  padding: 36px 34px 34px;
  display: flex;
}
/* Die Karte ist jetzt so hoch wie die Liste daneben. Damit der Inhalt
   dabei nicht oben klebt, sitzen die Schaltflächen am Boden und der
   Abstand dazwischen wächst mit. */
.hauptsitz__innen { display: flex; flex-direction: column; flex: 1 1 auto; }
.hauptsitz__innen > .knopfreihe { margin-top: auto; padding-top: 24px; }
.hauptsitz__muster {
  position: absolute; inset: 0; opacity: .7;
  background-image: radial-gradient(circle, var(--band-linie) 1px, transparent 1.4px);
  background-size: 22px 22px;
}
.hauptsitz__innen { position: relative; }
/* Ohne Hinweisliste und ohne Schaltflächen wäre die Anschrift das letzte
   Element. Ihr unterer Abstand liefe dann ins Leere. */
.hauptsitz__adresse:last-child { margin-bottom: 0; }
.hauptsitz__hinweise:last-child { margin-bottom: 0; }
/* align-self, und zwar zwingend: .hauptsitz__innen ist ein Flexkasten in
   Spaltenrichtung. Dort wird „display: inline-block" blockifiziert, und
   die Vorgabe „align-items: stretch" zieht die Kapsel anschliessend ueber
   die volle Breite der Karte. Sie sah dadurch aus wie ein Balken, nicht
   wie eine Kapsel.

   Dieselbe Falle wie „margin: 0 auto" an einem Flex-Element: Eine
   Angabe, die ausserhalb eines Flexkastens genau das Richtige tut, wird
   darin stillschweigend ausgehebelt. */
.hauptsitz__kennzeichnung {
  display: inline-block; align-self: flex-start; margin: 0;
  background: var(--sanft); color: var(--marke);
  font: 700 13px/1 var(--schrift-ueberschrift);
  letter-spacing: 1.2px; text-transform: uppercase;
  padding: 7px 14px; border-radius: 999px;
}
.hauptsitz__stadt {
  font: 700 clamp(32px, 3.6vw, 40px)/1.1 var(--schrift-ueberschrift);
  letter-spacing: -1px; color: var(--band-text); margin: 20px 0 12px;
}
.hauptsitz__adresse { margin: 0 0 22px; max-width: 420px; color: var(--band-sub); font-size: 17px; line-height: 1.6; }
.hauptsitz__hinweise {
  list-style: none; margin: 0 0 22px; padding: 20px 0;
  display: grid; gap: 10px;
  border-block: 1px solid var(--band-linie);
  color: var(--band-sub); font-size: 16px;
}

.staedteliste {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  padding: 12px 10px;
  display: flex; flex-direction: column;
}

/* Zwei Spalten, nicht drei.

   auto-fit ergab bei acht Städten drei Spalten und damit eine letzte
   Reihe mit zwei Einträgen und einer Lücke. Zwei Spalten teilen acht
   ohne Rest. Der kleine Abstand trennt die Zeilen, ohne dass es dafür
   Striche bräuchte — die Fläche unter der Maus übernimmt das. */
.staedteliste__raster {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 8px;
}
@media (max-width: 520px) {
  .staedteliste__raster { grid-template-columns: minmax(0, 1fr); }
}

.staedteliste__eintrag {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 16px; border-radius: var(--radius-klein);
  color: var(--tinte); font-size: 17px; font-weight: 500;
  transition: background-color .16s ease;
}
.staedteliste__eintrag:hover { background: var(--flaeche); color: var(--tinte); }

/* Hinweistext und Pfeil bilden rechts eine Einheit. Der Pfeil rückt beim
   Überfahren ein Stück nach rechts — das ist die eigentliche Auskunft,
   dass die Zeile irgendwohin führt. Der Text daneben ist frei gepflegt
   und kann fehlen. */
.staedteliste__ziel { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.staedteliste__hinweis { color: var(--gedaempft); font-size: 14px; white-space: nowrap; }
.staedteliste__pfeil {
  flex: none; opacity: .45;
  transition: transform .16s ease, opacity .16s ease;
}
.staedteliste__eintrag:hover .staedteliste__pfeil { opacity: 1; transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .staedteliste__pfeil { transition: none; }
  .staedteliste__eintrag:hover .staedteliste__pfeil { transform: none; }
}
.staedteliste__fussnote {
  margin: 14px 16px 8px; padding-top: 14px;
  border-top: 1px solid var(--linie);
  color: var(--gedaempft); font-size: 15px; line-height: 1.6;
}

/* ── Vergleichskarte aus dem GMB-Tracker ─────────────────────────────

   Zwei Spalten, Text und Widget. Die Reihenfolge im Markup ist immer
   Text zuerst — das ist die sinnvolle Lesefolge auf dem Telefon, wo
   beides untereinander steht. Die Vertauschung für „Widget links“
   passiert nur in der Darstellung, nicht im Dokument. */
.gmb-vergleich__innen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 44px;
  align-items: center;
}
.gmb-vergleich--gedreht .gmb-vergleich__text { order: 2; }

@media (max-width: 900px) {
  .gmb-vergleich__innen { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .gmb-vergleich--gedreht .gmb-vergleich__text { order: 0; }
}

.gmb-vergleich__text .vorspann { margin-bottom: 20px; }
.gmb-vergleich__text .knopfreihe { margin-top: 24px; }

/* Der Rahmen um das Widget. Der Tracker liefert seinen eigenen Inhalt,
   deshalb bekommt er hier nur eine Fläche und einen Mindestplatz —
   sonst springt das Layout, sobald er nachlädt. */
.gmb-vergleich__widget {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 18px;
  min-height: 320px;
  display: grid;
  align-content: center;
}
.gmb-vergleich__widget > div { min-width: 0; }
.gmb-vergleich__widget img,
.gmb-vergleich__widget iframe,
.gmb-vergleich__widget canvas,
.gmb-vergleich__widget svg { max-width: 100%; }

.gmb-vergleich__vorbehalt {
  display: grid; gap: 10px; justify-items: start;
  color: var(--gedaempft); font-size: 16px; line-height: 1.6;
}
.gmb-vergleich__vorbehalt p { margin: 0; }
.gmb-vergleich__vorbehalt-titel {
  font: 700 17px/1.35 var(--schrift-ueberschrift); color: var(--tinte);
}
.gmb-vergleich__vorbehalt .knopf { margin-top: 6px; }

/* ── Rezensionsslider ────────────────────────────────────────────────

   Eine Leiste mit Einrastpunkten, kein Karussell. Gewischt und gescrollt
   wird vom Browser, die Knöpfe setzen nur die Bildlaufposition. */
/* Die Bühne läuft über die volle Breite, die Karten laufen an beiden
   Rändern in nichts aus. Sichtbarer Abstand zum Bildschirmrand gibt es
   keinen — genau wie bei der Logoleiste unter dem Startbereich.

   --versatz ist der Abstand vom Rand des Abschnitts bis zur Textkante
   des Behälters. Er sorgt dafür, dass die erste Karte auf derselben
   Linie beginnt wie die Überschrift darüber, während der Bildlauf selbst
   über die ganze Breite geht. Die Rechnung ist dieselbe, die .behaelter
   aus max-width und margin:auto ergibt.

   Bewusst ohne 100vw: Diese Einheit zählt die Bildlaufleiste mit, und
   das hat in diesem Projekt schon einmal die ganze Startseite waagerecht
   verschoben. 100 % des Abschnitts kennt sie nicht. */
.rezensionen__buehne {
  --versatz: calc(max(0px, 100% - var(--breite)) / 2 + var(--rand));
  --schleier: 80px;
}

.rezensionen__spur {
  list-style: none; margin: 0;
  padding: 4px var(--versatz) 18px;
  display: grid; grid-auto-flow: column;

  /* Rückfallwert für Browser ohne Größencontainer: drei Karten in der
     Breite des Behälters. Zwei Drittel eines Abstands je Spalte
     abziehen, dann geht die Rechnung auf:
     3 × (33,333 % − 12px) + 2 × 18px = 100 %. */
  grid-auto-columns: minmax(280px, calc(33.333% - 12px));
  gap: 18px;

  /* Ohne das entkommen die .nur-screenreader-Texte in den Karten der
     Beschneidung und schieben die Seite mobil auf 705 statt 390 Pixel.
     Siehe den Hinweis bei .nur-screenreader. */
  position: relative;
  overflow-x: auto;
  /* proximity, nicht mandatory. Bei „mandatory" muss der Browser auf
     einem Einrastpunkt landen. Ragt die Reihe nur wenig über den Rand
     hinaus, liegt der nächste Punkt jenseits des möglichen Bildlaufs —
     erreichbar bleibt dann nur der erste, und die hinteren Karten sind
     nicht mehr anzusteuern. „proximity" rastet ein, wenn man in der Nähe
     ist, und steht dem Ende nie im Weg.

     Genau angesteuert wird ohnehin aus haupt.js: Die Knöpfe rechnen die
     Bildlaufposition aus der Kante der Zielkarte aus, nicht aus einer
     Schrittweite, die sich aufsummiert. */
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--versatz);
  overscroll-behavior-x: contain;

  /* Die Bildlaufleiste ist ausgeblendet, die Punkte darunter zeigen die
     Stelle an. Gescrollt und gewischt wird weiterhin — nur die graue
     Leiste unter den Karten ist weg.

     Mit ihr verschwindet allerdings eine Bedienmöglichkeit: Wer den
     Balken gezogen hat, hat jetzt nichts mehr in der Hand. Deshalb sind
     die Punkte Knöpfe und nicht bloß Anzeige. */
  scrollbar-width: none;
  -ms-overflow-style: none;

  /* Ausblenden statt harter Kante. Der Schleier liegt am Rand des
     Kastens, nicht am Inhalt — er wandert also nicht mit dem Bildlauf. */
  -webkit-mask-image: linear-gradient(to right,
      transparent 0, #000 var(--schleier),
      #000 calc(100% - var(--schleier)), transparent 100%);
  mask-image: linear-gradient(to right,
      transparent 0, #000 var(--schleier),
      #000 calc(100% - var(--schleier)), transparent 100%);
}

/* Die eigentliche Breite: höchstens 3,8 Karten auf der vollen Breite.
   100cqi ist die Breite der Bühne, also des ganzen Abschnitts — anders
   als 100 %, das sich hier auf den um --versatz verschmälerten
   Innenbereich der Spur bezöge und die Karten schmaler statt breiter
   machen würde. */
@supports (container-type: inline-size) {
  .rezensionen__buehne { container-type: inline-size; }

  /* „Höchstens 3,8" heißt nicht „immer 3,8". Auf einem 1024 Pixel
     breiten Schirm ergäbe die reine Rechnung 251 Pixel je Karte, und
     ein Zitat von drei Zeilen wird darin zu einer Spalte aus
     Einzelwörtern. Die Untergrenze von 288 Pixeln greift genau in
     diesem Bereich; darüber rechnet wieder die Formel. */
  .rezensionen__spur { grid-auto-columns: max(288px, calc(100cqi / 3.8 - 18px)); }
}

/* Der Fokusrahmen sitzt auf der Bühne, nicht auf der Spur: Die Maske
   der Spur würde ihn an den Rändern mit ausblenden. */
.rezensionen__spur::-webkit-scrollbar { width: 0; height: 0; }

.rezensionen__spur:focus-visible { outline: none; }
.rezensionen__buehne:focus-within {
  outline: 3px solid var(--akzent-tief);
  outline-offset: -3px;
  border-radius: var(--radius-klein);
}

/* ── Punkte statt Bildlaufleiste ─────────────────────────────────────

   Der Knopf ist 32 Pixel groß, der sichtbare Punkt darin nur 9. Das ist
   Absicht: Auf dem Telefon muss die Fläche zum Tippen deutlich größer
   sein als das, was man sieht, sonst trifft man daneben.

   FARBE, und zwar nachgerechnet: Das Leuchtgrün allein trägt hier nicht.
   #29FEAA auf der hellgrauen Fläche ergibt 1,23:1, verlangt sind 3:1 für
   Bedienelemente — der aktive Punkt wäre praktisch unsichtbar. Dieselbe
   Falle wie seinerzeit beim FAQ-Zeichen. Der aktive Punkt bekommt
   deshalb den grünen Kern UND einen marineblauen Ring; der Ring schafft
   13,7:1 und trägt die Erkennbarkeit, das Grün die Handschrift.

   Auf dunklem Grund ist das Grün von sich aus deutlich (11,7:1), dort
   entfällt der Ring. */
.rezensionen__punkte {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 2px; margin-top: 18px;
}

.rezensionen__punkt {
  display: grid; place-items: center;
  width: 32px; height: 32px; padding: 0;
  background: none; border: 0; cursor: pointer;
  border-radius: 999px;
  -webkit-tap-highlight-color: transparent;
}
.rezensionen__punkt-kern {
  width: 9px; height: 9px; border-radius: 999px;
  background: rgba(6, 42, 71, .25);
  transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.rezensionen__punkt:hover .rezensionen__punkt-kern { background: rgba(6, 42, 71, .45); }

.rezensionen__punkt[aria-current="true"] .rezensionen__punkt-kern {
  background: var(--akzent);
  box-shadow: 0 0 0 2px var(--marke);
  transform: scale(1.15);
}
.rezensionen__punkt:focus-visible {
  outline: 3px solid var(--akzent-tief);
  outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
  .rezensionen__punkt-kern { transition: none; }
}

.rezensionen--dunkel .rezensionen__punkt-kern { background: rgba(255, 255, 255, .28); }
.rezensionen--dunkel .rezensionen__punkt:hover .rezensionen__punkt-kern { background: rgba(255, 255, 255, .5); }
.rezensionen--dunkel .rezensionen__punkt[aria-current="true"] .rezensionen__punkt-kern {
  background: var(--akzent); box-shadow: none;
}

@media (max-width: 900px) {
  /* Eine gute Karte plus ein Streifen der nächsten: Das zeigt, dass es
     weitergeht, ohne dass man es erklären muss. */
  .rezensionen__buehne { --schleier: 28px; }
  .rezensionen__spur { grid-auto-columns: minmax(262px, 82%); }
  @supports (container-type: inline-size) {
    .rezensionen__spur { grid-auto-columns: min(82cqi, 340px); }
  }
}

.rezension { scroll-snap-align: start; display: flex; }
.rezension__karte {
  margin: 0; display: flex; flex-direction: column; gap: 14px; flex: 1;
  padding: 26px 26px 22px;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
}

.rezension__sterne {
  color: #F5B301; font-size: 17px; letter-spacing: 2px; line-height: 1;
}

.rezension__zitat { margin: 0; }
.rezension__zitat p {
  margin: 0; color: var(--tinte);
  font-size: 17.5px; line-height: 1.6;
}

/* Anführungszeichen als Zierde vor dem Zitat. Es ist ein
   Gestaltungselement, kein Text — deshalb aus dem Fluss genommen und für
   Vorlesegeräte unsichtbar. */
.rezension__zitat p::before {
  content: '„';
  color: var(--akzent-tief);
  font: 700 34px/0.6 var(--schrift-ueberschrift);
  vertical-align: -6px; margin-inline-end: 2px;
}

.rezension__person {
  margin-top: auto; padding-top: 6px;
  display: flex; align-items: center; gap: 12px;
}
.rezension__bild, .rezension__kuerzel {
  width: 46px; height: 46px; flex: none;
  border-radius: 999px; object-fit: cover;
}
.rezension__kuerzel {
  display: grid; place-items: center;
  background: var(--sanft); color: var(--marke);
  font: 700 15px/1 var(--schrift-ueberschrift);
  letter-spacing: .5px;
}
.rezension__angaben { display: grid; gap: 2px; min-width: 0; }
.rezension__name { font: 700 16px/1.3 var(--schrift-ueberschrift); color: var(--tinte); }
.rezension__rolle { color: var(--gedaempft); font-size: 14px; line-height: 1.4; }

.rezension__quelle { margin: 0; font-size: 13.5px; color: var(--gedaempft); }
.rezension__quelle a { color: var(--akzent-tief); }

/* Die Herkunft ist eine Fussnote, der Weg zur Fallstudie ist eine
   Einladung. Deshalb bekommt er Gewicht und einen Pfeil, der beim
   Ueberfahren ein Stueck vorlaeuft. */
.rezension__fall {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 600; text-decoration: none;
}
.rezension__fall::after {
  content: '\2192'; transition: transform .18s ease;
}
.rezension__fall:hover { text-decoration: underline; }
.rezension__fall:hover::after { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .rezension__fall::after { transition: none; }
}

.rezensionen__steuerung { display: flex; gap: 10px; flex: none; }
.rezensionen__knopf {
  width: 44px; height: 44px;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--linie); border-radius: 999px;
  background: var(--karte); color: var(--tinte);
  transition: border-color .18s ease, color .18s ease;
}
.rezensionen__knopf:hover:not(:disabled) { border-color: var(--kontur); color: var(--marke); }
.rezensionen__knopf:focus-visible { outline: 3px solid var(--akzent-tief); outline-offset: 2px; }
.rezensionen__knopf:disabled { opacity: .35; cursor: default; }

.rezensionen__fussnote {
  margin: 6px 0 0; color: var(--gedaempft);
  font-size: 15px; line-height: 1.6; max-width: 62ch;
}

/* Auf dunklem Grund. Die Karten werden zur getönten Scheibe statt zur
   weißen Fläche, sonst leuchten sie wie Scheinwerfer. */
.rezensionen--dunkel .rezension__karte {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .16);
}
.rezensionen--dunkel .rezension__zitat p,
.rezensionen--dunkel .rezension__name { color: var(--band-text); }
.rezensionen--dunkel .rezension__rolle,
.rezensionen--dunkel .rezension__quelle,
.rezensionen--dunkel .rezensionen__fussnote { color: var(--band-sub); }
.rezensionen--dunkel .rezension__zitat p::before,
.rezensionen--dunkel .rezension__quelle a { color: var(--akzent); }
.rezensionen--dunkel .rezension__kuerzel { background: rgba(255, 255, 255, .12); color: var(--band-text); }
.rezensionen--dunkel .rezensionen__knopf {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .2);
  color: var(--band-text);
}
.rezensionen--dunkel .rezensionen__knopf:hover:not(:disabled) { border-color: var(--akzent); color: var(--akzent); }

@media (prefers-reduced-motion: reduce) {
  .rezensionen__spur { scroll-behavior: auto; }
  .rezensionen__knopf { transition: none; }
}

/* ── Regionale Linkempfehlungen ──────────────────────────────────────

   Karten statt einer Aufzählung: Jede Empfehlung trägt Name, Einordnung
   und einen Satz, warum sie dasteht. Als Liste nackter Adressen — so
   stand es auf der alten Seite — sieht man weder, was einen erwartet,
   noch warum es dort steht. */
.linkliste {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(min(288px, 100%), 1fr));
}
.linkkarte { display: flex; }
.linkkarte__ziel {
  /* relative wegen des .nur-screenreader-Texts im Fuß, siehe dort. */
  position: relative;
  display: flex; flex-direction: column; gap: 8px; flex: 1;
  padding: 20px 22px;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  color: var(--tinte);
  transition: border-color .18s ease, transform .18s ease;
}
.linkkarte__ziel:hover {
  border-color: var(--kontur);
  transform: translateY(-2px);
}
.linkkarte__ziel:focus-visible { outline: 3px solid var(--akzent-tief); outline-offset: 2px; }

.linkkarte__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.linkkarte__titel { font: 700 17px/1.35 var(--schrift-ueberschrift); color: var(--tinte); }
.linkkarte__art {
  font: 600 11.5px/1 var(--schrift-text);
  letter-spacing: .5px; text-transform: uppercase;
  color: var(--akzent-tief);
  padding: 5px 9px; border-radius: 999px;
  background: var(--sanft);
}
.linkkarte__text { color: var(--gedaempft); font-size: 15px; line-height: 1.55; }

/* Die nackte Adresse klein am Fuß: Man soll sehen, wohin es geht,
   bevor man klickt. Der Pfeil rückt beim Überfahren nach außen. */
.linkkarte__fuss {
  margin-top: auto; padding-top: 6px;
  display: flex; align-items: center; gap: 6px;
  color: var(--gedaempft); font: 500 13.5px/1 var(--schrift-mono);
  overflow-wrap: anywhere;
}
.linkkarte__pfeil { flex: none; opacity: .5; transition: transform .18s ease, opacity .18s ease; }
.linkkarte__ziel:hover .linkkarte__pfeil { opacity: 1; transform: translate(2px, -2px); }
.linkkarte__ziel:hover .linkkarte__fuss { color: var(--akzent-tief); }

.linkliste__fussnote {
  margin: 18px 0 0; color: var(--gedaempft);
  font-size: 15px; line-height: 1.6; max-width: 62ch;
}

@media (prefers-reduced-motion: reduce) {
  .linkkarte__ziel, .linkkarte__pfeil { transition: none; }
  .linkkarte__ziel:hover { transform: none; }
  .linkkarte__ziel:hover .linkkarte__pfeil { transform: none; }
}

/* Der abgesetzte Satz über die Beratungsbüros. Ein Mintstrich links
   statt eines Kastens: Er hebt den Satz heraus, ohne ihn zu einem
   eigenen Bauteil zu machen — er gehört zum Kopf, nicht neben ihn. */
.beratungsnotiz {
  margin: 20px 0 0;
  padding: 2px 0 2px 18px;
  border-left: 3px solid var(--akzent);
  max-width: 62ch;
  color: var(--gedaempft);
  font-size: 17px; line-height: 1.65;
}
.abschnitt--karte .beratungsnotiz { color: var(--band-sub); }

/* ══ 9. FAQ ══ */
/* Einleitung oben, Aufklapper darunter über die volle Containerbreite.

   Die frühere zweispaltige Fassung ist entfallen. Sie drückte die Fragen
   in eine schmale Spalte, in der die Antworten eng wurden und ein Bild
   gar keinen Platz mehr hatte. */
.faq { display: grid; gap: 40px; align-items: start; }
.faq__einleitung { max-width: 62ch; }
.faq__einleitung .vorspann { margin-bottom: 22px; }
.faq__liste { display: grid; gap: 12px; }

.faq-eintrag {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
}
.faq-eintrag__frage {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 22px 24px; cursor: pointer;
  font: 700 19px/1.35 var(--schrift-ueberschrift); color: var(--tinte);
  list-style: none;
}
.faq-eintrag__frage::-webkit-details-marker { display: none; }
.faq-eintrag__zeichen {
  position: relative; flex: none;
  width: 30px; height: 30px; border-radius: 999px;
  border: 1px solid var(--linie);
}
.faq-eintrag__zeichen::before,
.faq-eintrag__zeichen::after {
  content: ''; position: absolute; inset-inline: 8px; top: 50%;
  height: 2px; background: var(--tinte);
  transition: transform .18s ease;
}
.faq-eintrag__zeichen::after { transform: rotate(90deg); }
.faq-eintrag[open] .faq-eintrag__zeichen::after { transform: rotate(0deg); }

/* Aus dem Kreuz wird beim Aufklappen ein Minus. Damit man das auch am
   Rand sieht, färbt sich der Kreis dabei mint ein — dieselbe Farbe, die
   überall sonst „hier passiert etwas" bedeutet. */
.faq-eintrag__frage:hover { background: var(--sanft); }
.faq-eintrag__frage:hover .faq-eintrag__zeichen { border-color: var(--akzent); }
.faq-eintrag__frage:focus-visible {
  outline: 3px solid var(--akzent-tief);
  outline-offset: -3px;
}
.faq-eintrag__zeichen {
  transition: border-color .18s ease, background-color .18s ease;
}
/* Beim Aufklappen füllt sich der Kreis mit dem Leuchtgrün der
   Schaltflächen — dieselbe Farbe, die überall sonst „hier passiert
   etwas" bedeutet.

   Die Striche darin bleiben marineblau: Weiß auf Mint liegt bei 1,3:1
   und wäre praktisch unsichtbar, Marineblau darauf bei 11:1.

   Der Kreis selbst hebt sich mit 1,3:1 kaum vom weißen Aufklapper ab.
   Das ist hier vertretbar, weil er nichts erklärt, was nicht auch
   anders zu sehen wäre: Ob ein Eintrag offen ist, zeigt die sichtbare
   Antwort darunter. Die Fläche ist Schmuck, kein Signalgeber. */
.faq-eintrag[open] .faq-eintrag__zeichen {
  border-color: var(--akzent);
  background: var(--akzent);
}
.faq-eintrag[open] .faq-eintrag__zeichen::before,
.faq-eintrag[open] .faq-eintrag__zeichen::after { background: var(--marke); }

/* Der offene Eintrag hebt sich ab, sonst verschwimmt in einer langen
   Liste, wo die Antwort eigentlich anfängt. */
.faq-eintrag { transition: border-color .18s ease; }
.faq-eintrag[open] { border-color: var(--kontur); }

@media (prefers-reduced-motion: reduce) {
  .faq-eintrag, .faq-eintrag__zeichen,
  .faq-eintrag__zeichen::before, .faq-eintrag__zeichen::after { transition: none; }
}

.faq-eintrag__antwort {
  padding: 0 24px 24px; max-width: 78ch;
  color: var(--gedaempft); font-size: 17px; line-height: 1.65;
}

/* Bilder in einer Antwort.

   Der Filter lässt img, figure und figcaption seit jeher durch — es
   fehlte nur die Darstellung. Ohne max-width sprengt ein Bild aus der
   Mediathek den Aufklapper, weil es seine eigene Breite mitbringt.

   height: auto gehört dazu: Die Mediathek schreibt width und height ins
   Bild, damit beim Laden nichts springt. Ohne die Rücknahme der Höhe
   würde ein verkleinertes Bild verzerrt. */
.faq-eintrag__antwort img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-klein);
  margin: 18px 0;
}
.faq-eintrag__antwort figure { margin: 18px 0; }
.faq-eintrag__antwort figure img { margin: 0; }
.faq-eintrag__antwort figcaption {
  margin-top: 8px;
  font-size: 14.5px; line-height: 1.5;
  color: var(--gedaempft);
}
.faq-eintrag__antwort > *:first-child { margin-top: 0; }
.faq-eintrag__antwort > *:last-child  { margin-bottom: 0; }

/* ══ 10. Kontakt ══ */
.kontakt {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 24px; align-items: start;
}
.kontakt__vorspann { max-width: 480px; margin-bottom: 30px; }

.kanaele {
  list-style: none; margin: 0; padding: 8px; max-width: 480px;
  display: grid; gap: 2px;
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius);
}
.kanal {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px; border: 0; border-radius: var(--radius-klein);
  background: transparent; color: var(--tinte);
  font-family: var(--schrift-text); text-align: start; cursor: pointer;
}
.kanal:hover { background: var(--flaeche); color: var(--tinte); }
.kanal__text { display: flex; flex-direction: column; gap: 3px; }
.kanal__art  { font-size: 13px; letter-spacing: .4px; color: var(--gedaempft); }
.kanal__wert { font: 600 19px/1.3 var(--schrift-ueberschrift); }
.kanal__hinweis { color: var(--gedaempft); font-size: 14px; }
.kanal__hinweis--punkt { display: flex; align-items: center; gap: 7px; }
.kanal__hinweis--punkt::before {
  content: ''; width: 8px; height: 8px; border-radius: 999px; background: var(--akzent); flex: none;
}

.soziale { list-style: none; margin: 22px 0 0; padding: 0; display: flex; gap: 10px; }
.soziale__knopf {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--linie); border-radius: var(--radius-klein);
  background: var(--karte); color: var(--tinte); font: 600 14px/1 var(--schrift-text);
}
.soziale__knopf:hover { border-color: var(--kontur); color: var(--tinte); }

.anfrageformular {
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--radius-gross); padding: 32px;
  box-shadow: var(--schatten-karte);
  display: grid; gap: 18px;
}
.feldpaar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 18px; }
.feld { display: flex; flex-direction: column; gap: 8px; }
.feld__beschriftung { font: 500 15px/1.3 var(--schrift-text); color: var(--tinte); }
.feld__zusatz { color: var(--gedaempft); font-weight: 400; }
.feld__eingabe {
  font: 400 16px/1.4 var(--schrift-text);
  padding: 14px 15px;
  border: 1px solid var(--linie); border-radius: var(--radius-klein);
  background: var(--grund); color: var(--tinte);
}
.feld__eingabe--gross { resize: vertical; }
.feld__eingabe[data-fehler="ja"] { border-color: var(--fehler); background: var(--fehler-flaeche); }
.feld__fehler { color: var(--fehler); font-size: 14px; }

.feld--einwilligung { flex-direction: row; align-items: flex-start; gap: 12px; cursor: pointer; }
.feld__haken { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--akzent-tief); }
.feld__einwilligungstext { color: var(--gedaempft); font-size: 15px; line-height: 1.55; }

.erfolgsmeldung {
  border: 1px solid var(--akzent); background: var(--sanft);
  border-radius: var(--radius-klein); padding: 16px 18px;
  color: var(--tinte); font-size: 16px; margin: 0;
}
.anfrageformular__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 14px; }
.anfrageformular__hinweis { margin: 0; color: var(--gedaempft); font-size: 14px; }
.textlink--fein { border-bottom-width: 1px; font-weight: 400; }

/* ══ 11. Footer ══ */
/* ---------------------------------------------------------------------
   Fußbereich

   Dunkel wie der Startbereich, damit die Seite zwischen zwei Navyflächen
   steht statt unten auszufransen. Vier Spalten über auto-fit: Fällt
   einmal eine weg, rücken die übrigen nach, ohne dass hier etwas
   nachgezogen werden muss.
   --------------------------------------------------------------------- */
.fussbereich {
  position: relative;
  background: var(--tief);
  color: rgba(255, 255, 255, .78);
  padding: clamp(64px, 6vw, 92px) 0 30px;
}

/* Feine Mintlinie als Abschluss nach oben. Sie trennt den Fußbereich vom
   letzten Abschnitt, ohne wie ein Rahmen zu wirken. */
.fussbereich::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--akzent) 0%, rgba(41, 254, 170, .25) 38%, transparent 78%);
}

/* Vier Spalten, die erste breiter: Dort stehen Logo, Beschreibung und die
   sozialen Profile, die drei anderen tragen nur Listen.

   Vorher stand hier „1.4fr repeat(auto-fit, minmax(190px, 1fr))". Das sieht
   vernünftig aus, ist aber ungültig: auto-fit darf in derselben Zeile nicht
   neben einer flexiblen Spur stehen, weil der Browser die Zahl der Spalten
   dann nicht ausrechnen kann. Er verwirft die ganze Deklaration — und ohne
   grid-template-columns bleibt genau eine Spalte übrig. Der Fußbereich fiel
   deshalb in eine Säule zusammen.

   Die Spalten stehen jetzt ausgeschrieben da. Das ist weniger elegant,
   aber es gilt. */
.fussbereich__raster {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 44px 40px;
}

/* Mittlere Breite: Die Markenspalte legt sich über die volle Breite, die
   Listen teilen sich darunter zwei Spalten. */
@media (max-width: 1080px) {
  .fussbereich__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fussbereich__raster > .fussbereich__spalte:first-child { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .fussbereich__raster { grid-template-columns: minmax(0, 1fr); }
}

/* min-width: 0, damit lange Wörter in einer Spalte die Rasterspalte
   nicht aufblähen und die Nachbarn zusammendrücken. */
.fussbereich__spalte { min-width: 0; }

.fussbereich__marke { display: inline-flex; margin-bottom: 22px; }
.fussbereich__marke img {
  height: 52px; width: auto; display: block;
  transition: opacity .18s ease;
}
.fussbereich__marke:hover img { opacity: .8; }

/* Die Spaltenüberschriften tragen eine kurze Mintlinie über sich. Sie
   wiederholt den Abschluss oben am Fußbereich und lässt die drei
   Listenspalten als zusammengehörige Gruppe lesen, ohne dass dafür
   Trennlinien zwischen die Spalten müssten. */
.fussbereich__titel {
  font: 700 13px/1.3 var(--schrift-ueberschrift);
  letter-spacing: 1.4px; text-transform: uppercase;
  color: #fff;
  margin: 0 0 18px;
  padding-top: 14px;
  position: relative;
}
.fussbereich__titel::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 26px; height: 2px;
  background: var(--akzent);
  border-radius: 2px;
}

.fussbereich__text, .fussbereich__adresse {
  color: rgba(255, 255, 255, .68);
  font-size: 15.5px; line-height: 1.7; font-style: normal;
  margin: 0 0 14px;
  max-width: 34em;
}
.fussbereich__text a, .fussbereich__adresse a { color: rgba(255, 255, 255, .88); }
.fussbereich__text a:hover, .fussbereich__adresse a:hover { color: var(--akzent); }

.fussbereich__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.fussbereich__liste--quer { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.fussbereich__liste a { color: rgba(255, 255, 255, .68); font-size: 15px; }
.fussbereich__liste a:hover { color: var(--akzent); }

/* Der Kasten für die Stellenanzeigen. Mint als dünner Rahmen, nicht als
   Fläche — als Fläche zöge er mehr Blick auf sich als die Kontaktdaten
   daneben, und das wäre die falsche Rangfolge. */
.fussbereich__kasten {
  border: 1px solid rgba(41, 254, 170, .35);
  border-radius: var(--radius-klein);
  background: rgba(41, 254, 170, .06);
  padding: 16px 18px;
  margin-top: 4px;
}
.fussbereich__kastentitel {
  font: 700 15px/1.3 var(--schrift-ueberschrift);
  color: #fff; margin: 0 0 4px;
}

.soziale { list-style: none; margin: 22px 0 0; padding: 0; display: flex; gap: 10px; }
.soziale__knopf {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--radius-klein);
  background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .82);
  font: 600 14px/1 var(--schrift-text);
}
.soziale__knopf:hover {
  border-color: var(--akzent); color: var(--akzent);
  background: rgba(41, 254, 170, .08);
}

.fussbereich__unten {
  margin-top: 52px; padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: 18px 28px;
}
.fussbereich__unten .fussbereich__text { margin: 0; font-size: 14.5px; white-space: nowrap; }
.fussbereich__rechtliches { flex: 1 1 320px; }
.fussbereich__rechtliches a { font-size: 14.5px; }

/* Unter 620 Pixeln steht in der Fußzeile alles untereinander und links
   ausgerichtet. Nebeneinander gedrängt bräche sonst mitten in einem
   Linktext um. */
@media (max-width: 620px) {
  .fussbereich__unten { align-items: flex-start; }
  .fussbereich__unten .fussbereich__text { white-space: normal; }
}

/* Hell und Dunkel. Zwei Schaltflächen statt eines Kippschalters, weil
   man einem Kippschalter nicht ansieht, welcher Zustand gerade gilt. */
.modusschalter {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
}
.modusschalter__titel {
  color: rgba(255, 255, 255, .6);
  font-size: 13.5px;
  padding-inline: 10px 4px;
}
.modusschalter__knopf {
  border: 0; border-radius: 999px; cursor: pointer;
  font: 600 13.5px/1 var(--schrift-text);
  padding: 9px 16px;
  background: transparent; color: rgba(255, 255, 255, .72);
}
.modusschalter__knopf:hover { color: #fff; }
.modusschalter__knopf[aria-pressed="true"] { background: var(--akzent); color: var(--tief); }

@media (max-width: 640px) {
  .fussbereich { padding-bottom: calc(30px + 76px); }
  .fussbereich__raster { gap: 34px; }
  .fussbereich__unten { margin-top: 36px; }
}

/* ---------------------------------------------------------------------
   Nachträge: Klassen, die die neuen Bausteine brauchen

   „grund" statt „weiss": Der Seitengrund ist im Dunkelmodus nicht weiß.
   Die alte Schreibweise bleibt als Zweitname stehen, damit bestehende
   Blöcke in der Datenbank weiterlaufen.
   --------------------------------------------------------------------- */
.abschnitt--grund,
.abschnitt--weiss { background: var(--grund); }

.abschnittskopf--schmal { max-width: 720px; }

/* Namensgruppe in der Teamkarte: Name und Rolle stehen zusammen neben
   dem Portrait, deshalb eine eigene Hülle. */
.personenkarte__namen { min-width: 0; }

/* Stadtname in der Einzugsgebietsliste, links neben dem Hinweis. */
.staedteliste__name { min-width: 0; }

/* Antworttext im Akkordeon. Redaktionelles HTML, deshalb Abstände für
   die Elemente, die darin vorkommen dürfen. */
.faq-eintrag__text > :first-child { margin-top: 0; }
.faq-eintrag__text > :last-child  { margin-bottom: 0; }
.faq-eintrag__text p  { margin: 0 0 12px; }
.faq-eintrag__text ul,
.faq-eintrag__text ol { margin: 0 0 12px; padding-inline-start: 22px; }
.faq-eintrag__text li { margin-bottom: 6px; }

/* Linke Spalte der Kontaktsektion. */
.kontakt__seite { min-width: 0; }

/* ---------------------------------------------------------------------
   Standortfähnchen auf dem Globus

   Das Bündel legt diese Elemente selbst an, wenn jemand ein Land
   antippt. Ohne Gestaltung fallen sie unformatiert übereinander, weil
   die zugehörigen Regeln im Original in einem eigenen Stylesheet des
   fremden Themes stehen. Hier sind sie nachgebaut, mit unseren Farben
   und unserer Schrift statt Arial und Fast-Schwarz.
   --------------------------------------------------------------------- */
.label-renderer {
  position: absolute;
  inset: 0 auto auto 0;
  max-width: 100%;
  max-height: 100%;
  pointer-events: none;
  z-index: 2;
}

.label-container { pointer-events: auto; cursor: pointer; transition: transform .3s ease; }
.label-container:hover { transform: scale(1.2); }

.marker-container {
  position: absolute;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  z-index: 10;
}

.marker-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-bottom: 35px;
  z-index: 20;
  width: max-content;
  max-width: min(360px, 80vw);
  background: var(--tief);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-klein);
  box-shadow: 0 18px 44px -18px rgba(0, 0, 0, .7);
  font-family: var(--schrift-text);
  line-height: 1.45;
  text-align: start;
  opacity: 0;
  pointer-events: none;
  transform-origin: center;
  will-change: transform, opacity;
}

.tooltip-visible { animation: sprechblase-auf .35s forwards; opacity: 1; }
.tooltip-hidden  { animation: none; opacity: 0; }
.tooltip-visible.tooltip-hidden { animation: sprechblase-zu .25s forwards; }

@keyframes sprechblase-auf { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
@keyframes sprechblase-zu  { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(.85); } }

@media (prefers-reduced-motion: reduce) {
  .tooltip-visible, .tooltip-visible.tooltip-hidden { animation: none; }
  .label-container { transition: none; }
}

.tooltip-content-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
}
.tooltip-img-container {
  position: relative;
  z-index: 2;
  flex: none;
  width: 92px; height: 92px;
  display: grid; place-items: center;
  overflow: hidden;
  border-radius: var(--radius-klein);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}
.tooltip-img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 6px; background: #fff; }
.tooltip-bullet-wrapper { display: flex; align-items: center; min-width: 0; }
.tooltip-bullet { margin-inline-end: 8px; font-size: 20px; color: var(--akzent); }
.tooltip-title { font-weight: 700; font-size: 16px; }
.tooltip-description { color: rgba(255, 255, 255, .68); font-size: 14px; }

/* Ältere Fassung derselben Sprechblase, kommt bei manchen Ländern vor. */
.location-tooltip {
  position: absolute; z-index: 1000;
  padding: 8px 12px;
  background: var(--tief); color: #fff;
  border-radius: var(--radius-klein);
  font-size: 14px; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}

/* ---------------------------------------------------------------------
   Standortkarte im Startbereich einer Standortseite

   Die Karte liegt hinter dem Text und füllt den Abschnitt vollständig,
   auf dem Telefon genauso wie am Rechner. Die SVG bringt dafür bereits
   preserveAspectRatio="xMidYMid meet" mit; damit sie den Abschnitt
   wirklich ausfüllt statt hineinzupassen, deckt hier object-fit den Rest
   ab und der Überstand wird abgeschnitten.
   --------------------------------------------------------------------- */
.seitenkopf--karte {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--marke);
  color: var(--band-text);
  min-height: 62svh;

  /* Senkrecht zentrieren, waagerecht nichts verändern.

     Die Spalte muss ausdrücklich 1fr sein. Ohne sie bekommt das Raster
     eine automatisch bemessene Spalte, und weil .behaelter ein
     margin-inline: auto trägt, schaltet das die Dehnung ab: Die Spalte
     schrumpft dann auf Inhaltsbreite und wird mittig gesetzt. Genau so
     rutschte die Überschrift aus der gewohnten Spalte. Mit 1fr ist die
     Spalte so breit wie der Abschnitt, und der Behälter zentriert sich
     darin wie überall sonst. minmax(0, …), damit lange Wörter die
     Spalte nicht aufblähen. */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
}

.standortkarte {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
/* Die Datei bringt ihre Maße als Inline-Stil mit (position absolute,
   100 Prozent in beide Richtungen). Das passt bereits, hier wird es nur
   festgezurrt, falls eine Karte ohne diesen Stil hochgeladen wird.

   Kein object-fit: Das wirkt nur auf ersetzte Elemente wie <img>, nicht
   auf eingebettetes SVG. Das Füllen erledigt preserveAspectRatio="slice",
   gesetzt in karte_einbetten(). */
/* Das Bild aus dem <noscript>: dieselbe Karte, nur unbewegt. Hier
   greift object-fit, weil ein <img> ein ersetztes Element ist — bei
   eingebettetem SVG erledigt das preserveAspectRatio="slice". */
.standortkarte__ersatz {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.standortkarte svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Schleier zwischen Karte und Text. Ohne ihn trifft helle Schrift auf
   helle Straßenlinien, und je nach Kartenausschnitt ist mal das eine,
   mal das andere unlesbar. Links dicht, nach rechts offen: Dort steht
   kein Text, dort darf man die Karte sehen. */
/* Der Schleier muss zwei Dinge zugleich: Schrift lesbar halten und das
   Glühen der Straßen durchlassen. Beides zusammen geht am besten mit
   Mattglas statt mit Farbe: Die Karte wird hinter der Schrift weich
   gezeichnet, ihre Linien verschwinden dabei nicht, sie beruhigen sich
   nur. Weniger Deckung, mehr Lesbarkeit.

   Grundzustand ist reine Farbe, nach rechts auslaufend. Das trägt die
   Schrift überall, auch ohne Mattglas. */
.standortkarte__schleier {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  background: linear-gradient(90deg,
      rgba(6, 42, 71, .80) 0%,
      rgba(6, 42, 71, .64) 38%,
      rgba(6, 42, 71, .28) 58%,
      rgba(6, 42, 71, 0) 100%);
}

/* Mattglas nur zusammen mit der Maske, und das ist kein Feinschliff:
   Ein Filter lässt sich nicht örtlich abstufen, nur eine Maske auf der
   filternden Ebene kann das. Ohne Maske läge die Unschärfe über der
   ganzen Karte und würde rechts genau das Glühen schlucken, das dort
   zur Geltung kommen soll. Deshalb entweder beides oder keines.

   Die Maske blendet Mattglas und Farbe gemeinsam aus: links voll, ab
   64 Prozent gar nicht mehr. Dort endet auch die Textspalte. */
@supports ((-webkit-mask-image: none) or (mask-image: none)) {
  .standortkarte__schleier {
    background: linear-gradient(90deg,
        rgba(6, 42, 71, .58) 0%,
        rgba(6, 42, 71, .48) 38%,
        rgba(6, 42, 71, .24) 58%,
        rgba(6, 42, 71, 0) 100%);

    -webkit-backdrop-filter: blur(10px) saturate(108%);
            backdrop-filter: blur(10px) saturate(108%);

    -webkit-mask-image: linear-gradient(90deg,
        #000 0%, #000 30%, rgba(0, 0, 0, .55) 47%, transparent 64%);
            mask-image: linear-gradient(90deg,
        #000 0%, #000 30%, rgba(0, 0, 0, .55) 47%, transparent 64%);
  }
}

.seitenkopf--karte .seitenkopf__innen {
  position: relative;
  z-index: 2;

  /* width: 100% ist hier das Entscheidende, nicht Beiwerk.
     .behaelter trägt margin-inline: auto. In einem Raster bedeutet ein
     automatischer Außenabstand: nicht dehnen, sondern auf den Inhalt
     schrumpfen und mittig setzen. Genau deshalb stand die Überschrift
     mittig statt links, obwohl die Spalte darüber die volle Breite hat.
     Mit einer ausdrücklichen Breite entfällt das Schrumpfen; max-width
     kappt anschließend bei 1240px und die automatischen Ränder
     zentrieren den Behälter wie auf jeder anderen Seite. */
  width: 100%;
}
.seitenkopf--karte h1,
.seitenkopf--karte .marke-zeile { color: var(--band-text); }
.seitenkopf--karte .vorspann { color: var(--band-sub); }
.seitenkopf--karte .brotkrumen,
.seitenkopf--karte .brotkrumen a { color: var(--band-sub); }
.seitenkopf--karte .brotkrumen a:hover { color: var(--band-text); }

@media (max-width: 900px) {
  .seitenkopf--karte { min-height: 70svh; }

  /* Auf dem Telefon steht der Text über die ganze Breite, ein Verlauf
     nach rechts hilft dort nicht. Farbe und Mattglas laufen deshalb von
     oben nach unten: oben licht, dort liegt die Karte frei, unten
     dicht, dort steht die Schrift. */
  .standortkarte__schleier {
    background: linear-gradient(180deg,
        rgba(6, 42, 71, .18) 0%,
        rgba(6, 42, 71, .52) 34%,
        rgba(6, 42, 71, .74) 100%);
  }

  /* Weniger Unschärfe als am Rechner: Ein großer Mattglasbereich kostet
     auf dem Telefon spürbar Rechenzeit, und dort läuft nebenher schon
     die Impulsanimation. */
  @supports ((-webkit-mask-image: none) or (mask-image: none)) {
    .standortkarte__schleier {
      background: linear-gradient(180deg,
          rgba(6, 42, 71, .10) 0%,
          rgba(6, 42, 71, .34) 34%,
          rgba(6, 42, 71, .56) 100%);

      -webkit-backdrop-filter: blur(7px) saturate(108%);
              backdrop-filter: blur(7px) saturate(108%);

      -webkit-mask-image: linear-gradient(180deg,
          transparent 0%, rgba(0, 0, 0, .5) 26%, #000 48%, #000 100%);
              mask-image: linear-gradient(180deg,
          transparent 0%, rgba(0, 0, 0, .5) 26%, #000 48%, #000 100%);
    }
  }
}

/* Wer Bewegung reduziert, bekommt keine Impulse — das entscheidet
   haupt.js. Die Karte selbst bleibt, sie ist ja nur ein Stadtplan. */

/* ---------------------------------------------------------------------
   Abschnitt mit Standortkarte im Hintergrund

   Dieselbe Karte und derselbe Schleier wie im Startbereich der
   Standortseiten, nur eine Etage tiefer: im Abschnitt „Einzugsgebiete"
   der Startseite. Der Abschnitt wird dabei dunkel, denn der Stadtplan
   trägt helle Schrift.
   --------------------------------------------------------------------- */
.abschnitt--karte {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--marke);
  color: var(--band-text);
}
.abschnitt--karte > .behaelter { position: relative; z-index: 2; }

.abschnitt--karte .marke-zeile { color: var(--akzent); }
.abschnitt--karte h2,
.abschnitt--karte .ueberschrift-m { color: var(--band-text); }
.abschnitt--karte .vorspann { color: var(--band-sub); }

/* Die Städteliste ist sonst eine helle Karte auf hellem Grund. Hier
   steht sie auf dem Stadtplan und wird zur getönten Scheibe, damit die
   Karte darunter durchscheint statt verdeckt zu werden. */
.abschnitt--karte .staedteliste {
  background: rgba(4, 30, 51, .58);
  border-color: rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.abschnitt--karte .staedteliste__eintrag { color: var(--band-text); }
.abschnitt--karte .staedteliste__eintrag:hover {
  background: rgba(255, 255, 255, .08);
  color: var(--band-text);
}
.abschnitt--karte .staedteliste__hinweis,
.abschnitt--karte .staedteliste__fussnote { color: var(--band-sub); }
.abschnitt--karte .staedteliste__fussnote { border-top-color: rgba(255, 255, 255, .16); }

/* Der Hauptsitz ist schon dunkel. Auf dem Stadtplan braucht er einen
   Rand, sonst verschwimmen zwei Navyflächen ineinander. */
.abschnitt--karte .hauptsitz {
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(4, 30, 51, .72);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.abschnitt--karte .hauptsitz__muster { display: none; }

/* ── Verlaufskurve ───────────────────────────────────────────────────

   Ein serverseitig erzeugtes SVG, keine Diagrammbibliothek. Die Kurve
   ist ohne JavaScript vollstaendig lesbar; das Skript ergaenzt nur die
   Fahne beim Ueberfahren. */
.verlauf__eckwerte {
  display: flex; flex-wrap: wrap; gap: 40px;
  margin: 34px 0 20px;
}
.verlauf__zahl {
  margin: 0 0 2px; font-variant-numeric: tabular-nums;
  font: 800 30px/1 var(--schrift-ueberschrift); letter-spacing: -1px;
  color: var(--gedaempft);
}
.verlauf__zahl--jetzt { color: var(--akzent-tief); font-size: 38px; }
.verlauf__zeit { margin: 0; font-size: 13.5px; color: var(--gedaempft); }

.verlauf__rahmen {
  margin: 0;
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 18px 18px 10px;
}

/* Der linke Einzug macht Platz fuer die Hoehenbeschriftung, die neben der
   Zeichnung liegt statt darin. Siehe den Kommentar im Baustein. */
.verlauf__plot { padding-left: 58px; }
.verlauf__spur { position: relative; height: 300px; }

.verlauf__markey {
  position: absolute; right: calc(100% + 10px); margin: 0;
  transform: translateY(-50%); white-space: nowrap;
  font-family: var(--schrift-mono); font-size: 11px; color: var(--gedaempft);
}

/* preserveAspectRatio="none" im Markup: Die Kurve soll die Breite fuellen
   und dabei ihre Hoehe behalten, nicht mitwachsen. overflow sichtbar,
   weil die Linie den Kasten oben und unten genau beruehrt und ihre
   Strichstaerke sonst zur Haelfte abgeschnitten wuerde. */
.verlauf__bild { display: block; width: 100%; height: 100%; overflow: visible; }

.verlauf__raster { stroke: var(--linie); stroke-width: 1; }
.verlauf__flaeche { fill: var(--akzent); opacity: .12; }
.verlauf__linie {
  fill: none; stroke: var(--akzent-tief); stroke-width: 2.5;
  stroke-linejoin: round; stroke-linecap: round;
}

/* Die Punkte werden nie gezeichnet, sie tragen nur Werte und Stelle.
   Sichtbar ist der Zeiger darunter, ein runder Punkt in HTML: Im
   gedehnten SVG waere ein Kreis eine Ellipse. */
.verlauf__punkt { fill: none; stroke: none; pointer-events: none; }

/* Zeiger und Fahne bekommen vom Skript ihre fertige obere linke Ecke
   gesetzt, kein translate(-50%). Die Fahne muss am Rand des Kastens
   abgefangen werden, und begrenzen laesst sich nur die Kante, die auch
   gesetzt wird. */
.verlauf__zeiger {
  position: absolute; left: 0; top: 0; pointer-events: none;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--akzent-tief); box-shadow: 0 0 0 3px var(--karte);
}

.verlauf__fahne {
  position: absolute; left: 0; top: 0; margin: 0; pointer-events: none;
  background: var(--marke); color: #fff;
  border-radius: var(--radius-klein); padding: 7px 11px;
  font: 600 13px/1.35 var(--schrift-ueberschrift);
  white-space: nowrap; box-shadow: var(--schatten-karte);
}

.verlauf__zeitachse {
  display: flex; justify-content: space-between;
  margin: 8px 0 0 58px; font-family: var(--schrift-mono);
  font-size: 11px; color: var(--gedaempft);
}

.verlauf__tabelle { margin-top: 18px; }
.verlauf__tabelle summary {
  cursor: pointer; font-size: 14.5px; color: var(--gedaempft);
  padding: 8px 0;
}
.verlauf__tabelle summary:hover { color: var(--tinte); }
.verlauf__tabellenrahmen { max-height: 320px; overflow: auto; margin-top: 8px; }
.verlauf__tabellenrahmen table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.verlauf__tabellenrahmen th,
.verlauf__tabellenrahmen td {
  text-align: left; padding: 7px 12px; border-bottom: 1px solid var(--linie);
  font-variant-numeric: tabular-nums;
}
.verlauf__tabellenrahmen th { position: sticky; top: 0; background: var(--karte); }

.verlauf__quelle { margin: 18px 0 0; font-size: 14px; color: var(--gedaempft); }
.verlauf__fussnote {
  margin: 8px 0 0; max-width: 76ch;
  font-size: 13.5px; line-height: 1.6; color: var(--gedaempft);
}

@media (max-width: 700px) {
  .verlauf__eckwerte { gap: 24px; }
  .verlauf__zahl { font-size: 24px; }
  .verlauf__zahl--jetzt { font-size: 30px; }
  .verlauf__rahmen { padding: 14px 12px 8px; }
  .verlauf__plot { padding-left: 46px; }
  .verlauf__spur { height: 210px; }
  .verlauf__markey { right: calc(100% + 7px); font-size: 10px; }
  .verlauf__zeitachse { margin-left: 46px; font-size: 10px; }
}

/* ── KI-Zitate (Local GEO) ───────────────────────────────────────────

   Balkenvergleich ohne Grafikbibliothek. Die Breite steht als Prozentwert
   im style-Attribut der Vorlage; alles andere ist gewoehnliches Layout.

   Der Balken traegt kein aria — er zeigt dieselbe Zahl, die rechts daneben
   steht. Deshalb genuegen hier Farbe und Breite. */
/* Reiter. Ohne Skript bleiben sie verborgen und alle Tafeln stehen
   untereinander — ein Umschalter, der ohne Skript alles bis auf eine
   Tafel verstecken würde, hätte den größten Teil der Daten unerreichbar
   gemacht. */
.geo-reiter {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 36px;
  border-bottom: 1px solid var(--linie);
  padding-bottom: 0;
}
.geo-reiter__knopf {
  appearance: none; border: 0; background: none; cursor: pointer;
  padding: 10px 14px 12px;
  font: 500 15px/1.3 var(--schrift-ueberschrift);
  color: var(--gedaempft);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  border-radius: var(--radius-klein) var(--radius-klein) 0 0;
}
.geo-reiter__knopf:hover { color: var(--tinte); background: rgba(6, 42, 71, .04); }
.geo-reiter__knopf[aria-selected="true"] {
  color: var(--tinte); font-weight: 600;
  border-bottom-color: var(--akzent-tief);
}
.geo-reiter__knopf:focus-visible { outline: 3px solid var(--akzent-tief); outline-offset: -3px; }

.geo-tafel + .geo-tafel { margin-top: 48px; }
.geo-tafel__titel {
  margin: 32px 0 0; font: 600 20px/1.3 var(--schrift-ueberschrift); color: var(--tinte);
}
.geo-tafel__text {
  margin: 8px 0 0; max-width: 78ch;
  font-size: 15.5px; line-height: 1.65; color: var(--gedaempft);
}

/* Legende der gestapelten Balken. Die Farben allein tragen die Aussage
   nicht — die Anteile stehen zusätzlich in der Vorlesebeschriftung
   jeder Zeile. */
.geo-legende {
  list-style: none; margin: 20px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  font-size: 13.5px; color: var(--gedaempft);
}
.geo-legende li { display: flex; align-items: center; gap: 7px; }
.geo-legende__farbe {
  width: 12px; height: 12px; border-radius: 3px; flex: none;
}
.geo-legende__farbe--1 { background: var(--marke); }
.geo-legende__farbe--2 { background: var(--akzent-tief); }
.geo-legende__farbe--3 { background: var(--akzent); }
.geo-legende__farbe--4 { background: var(--gedaempft); }

.geo-balken {
  list-style: none; margin: 24px 0 0; padding: 0;
  display: grid; gap: 4px;
}
.geo-balken__zeile {
  display: grid;
  grid-template-columns: 28px minmax(140px, 1.1fr) minmax(0, 3fr) auto;
  align-items: center; gap: 16px;
  padding: 10px 12px;
  border-radius: var(--radius-klein);
}
.geo-balken__zeile:nth-child(odd) { background: rgba(6, 42, 71, .035); }

.geo-balken__rang {
  font: 600 13px/1 var(--schrift-ueberschrift);
  color: var(--gedaempft); text-align: right;
  font-variant-numeric: tabular-nums;
}

.geo-balken__name {
  display: grid; gap: 2px; min-width: 0;
  font-size: 15.5px; font-weight: 500; color: var(--tinte);
  overflow-wrap: anywhere;
}
.geo-balken__name small {
  font-size: 12.5px; font-weight: 400; color: var(--gedaempft);
}

/* Immer ein Flexkasten, auch beim einzelnen Balken. Damit brauchen die
   gestapelten Anteile keine eigene Ausnahme und kein :has(). */
.geo-balken__spur {
  display: flex; height: 12px; border-radius: 999px;
  background: rgba(6, 42, 71, .08);
  overflow: hidden;
}
.geo-balken__wert {
  height: 100%; border-radius: 999px; flex: none;
  background: linear-gradient(90deg, var(--marke), var(--akzent-tief));
  /* Ein sehr kleiner Wert soll nicht unsichtbar sein. */
  min-width: 3px;
}

.geo-balken__zahl {
  font: 600 15.5px/1.2 var(--schrift-ueberschrift);
  color: var(--tinte); text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.geo-balken__zahl small {
  display: block; font-size: 12px; font-weight: 400; color: var(--gedaempft);
}

.geo-balken__zeile--hervor { background: rgba(0, 212, 255, .10); }
.geo-balken__zeile--hervor .geo-balken__name { font-weight: 600; }

/* Gestapelte Balken: die Anteile liegen nebeneinander in derselben Spur. */
.geo-balken__teil { height: 100%; flex: none; }
.geo-balken__teil--1 { background: var(--marke); }
.geo-balken__teil--2 { background: var(--akzent-tief); }
.geo-balken__teil--3 { background: var(--akzent); }
.geo-balken__teil--4 { background: var(--gedaempft); }

/* Fragenkarten */
.geo-fragen {
  list-style: none; margin: 24px 0 0; padding: 0;
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
.geo-frage {
  padding: 20px 22px;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  border-left: 3px solid var(--akzent-tief);
}
.geo-frage__text {
  margin: 0; font: 500 16.5px/1.5 var(--schrift-ueberschrift); color: var(--tinte);
}
.geo-frage__text::before { content: '„'; }
.geo-frage__text::after  { content: '“'; }
.geo-frage__quelle {
  margin: 8px 0 0; font-size: 13px; color: var(--gedaempft);
}

.geo-zitate__abschluss {
  margin-top: 34px; padding-top: 26px;
  border-top: 1px solid var(--linie);
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 18px;
}
.geo-zitate__abschluss p {
  margin: 0; max-width: 62ch;
  font-size: 17px; line-height: 1.6; color: var(--tinte);
}

.geo-zitate__quelle {
  margin: 22px 0 0; font-size: 14px; color: var(--gedaempft);
}
.geo-zitate__fussnote {
  margin: 10px 0 0; max-width: 76ch;
  font-size: 13.5px; line-height: 1.6; color: var(--gedaempft);
}

/* Auf schmalen Schirmen wandert der Balken unter den Namen: Vier Spalten
   nebeneinander lassen keiner davon genug Platz, und der Balken ist die
   Spalte, die von Enge am meisten verliert. */
@media (max-width: 700px) {
  .geo-balken__zeile {
    grid-template-columns: 24px minmax(0, 1fr) auto;
    row-gap: 8px;
  }
  .geo-balken__spur { grid-column: 2 / -1; grid-row: 2; }
  .geo-balken__zahl { grid-column: 3; grid-row: 1; }
}

/* Dunkle Fassung */
.geo-zitate--dunkel .geo-balken__zeile:nth-child(odd) { background: rgba(255, 255, 255, .05); }
.geo-zitate--dunkel .geo-balken__name,
.geo-zitate--dunkel .geo-balken__zahl { color: #fff; }
.geo-zitate--dunkel .geo-balken__rang,
.geo-zitate--dunkel .geo-balken__name small,
.geo-zitate--dunkel .geo-balken__zahl small,
.geo-zitate--dunkel .geo-zitate__quelle,
.geo-zitate--dunkel .geo-zitate__fussnote { color: rgba(255, 255, 255, .72); }
.geo-zitate--dunkel .geo-balken__spur { background: rgba(255, 255, 255, .12); }
.geo-zitate--dunkel .geo-balken__wert {
  background: linear-gradient(90deg, var(--akzent-tief), var(--akzent));
}
.geo-zitate--dunkel .geo-balken__zeile--hervor { background: rgba(0, 212, 255, .18); }
.geo-zitate--dunkel .geo-reiter { border-bottom-color: rgba(255, 255, 255, .16); }
.geo-zitate--dunkel .geo-reiter__knopf { color: rgba(255, 255, 255, .72); }
.geo-zitate--dunkel .geo-reiter__knopf:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.geo-zitate--dunkel .geo-reiter__knopf[aria-selected="true"] { color: #fff; border-bottom-color: var(--akzent); }
.geo-zitate--dunkel .geo-tafel__titel { color: #fff; }
.geo-zitate--dunkel .geo-tafel__text,
.geo-zitate--dunkel .geo-legende { color: rgba(255, 255, 255, .72); }
.geo-zitate--dunkel .geo-legende__farbe--1 { background: #fff; }
.geo-zitate--dunkel .geo-balken__teil--1 { background: #fff; }
.geo-zitate--dunkel .geo-zitate__abschluss { border-top-color: rgba(255, 255, 255, .16); }
.geo-zitate--dunkel .geo-zitate__abschluss p { color: #fff; }

/* ── Ablauf als Zeitstrahl ───────────────────────────────────────────

   Zweite Fassung des Bausteins „Vorgehen in Schritten". Links eine
   senkrechte Linie mit nummerierten Punkten, rechts eine Spalte, die
   beim Blaettern mitlaeuft.

   Die Linie verlaeuft von Leuchtgruen nach Linienfarbe: Sie wird nach
   unten hin blasser, und der letzte Punkt ist gefuellt statt umrandet.
   Damit sieht man ohne ein Wort, dass es eine Reihenfolge mit einem
   Ende ist und keine Aufzaehlung. */
.ablaufstrahl__innen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 64px;
  align-items: start;
}
.ablaufstrahl__vorspann { margin-bottom: 48px; }

.zeitstrahl {
  list-style: none; margin: 0; padding: 0 0 0 70px;
  display: grid; gap: 40px;
  position: relative;
  /* Von haupt.js gesetzt: die Pixelhöhe vom oberen Rand bis zur Mitte
     des letzten Punkts. Ohne Skript bleibt die Voreinstellung stehen,
     und die Linie läuft bis zum unteren Rand des Kastens durch — nicht
     perfekt, aber vollständig sichtbar und nie falsch positioniert. */
  --zeitstrahl-linie: 100%;
  --zeitstrahl-fortschritt: 0px;
}

/* Zwei Linien übereinander, keine.
   Die untere ist die Spur: gedämpft, von Anfang bis zum letzten Punkt,
   nicht weiter. Das behebt für sich schon den Fehler, dass die Linie
   frueher bis zum unteren Rand der Liste durchlief — also durch den
   Text und das Ergebnis-Feld des letzten Schritts hindurch, weit unter
   dessen Punkt.
   Die obere ist der Fortschritt: in der Akzentfarbe, und ihre Höhe
   wächst beim Herunterscrollen mit, Schritt für Schritt, bis sie bei
   --zeitstrahl-linie ankommt und damit genau am letzten Punkt endet.
   Beide sitzen am Listenkasten, nicht an den Punkten, damit sie zwischen
   dem ersten und dem letzten Punkt durchlaufen statt an jedem Schritt
   neu anzusetzen. */
.zeitstrahl::before,
.zeitstrahl::after {
  content: ''; position: absolute;
  left: 23px; top: 8px; width: 2px;
}
.zeitstrahl::before {
  height: calc(var(--zeitstrahl-linie) - 8px);
  background: var(--linie);
}
.zeitstrahl::after {
  height: var(--zeitstrahl-fortschritt);
  max-height: calc(var(--zeitstrahl-linie) - 8px);
  background: var(--akzent);
  transition: height .4s ease;
}
@media (prefers-reduced-motion: reduce) {
  .zeitstrahl::after { transition: none; }
}

.zeitstrahl__schritt { position: relative; }

.zeitstrahl__nummer {
  position: absolute; left: -70px; top: 0;
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--marke); color: var(--akzent);
  font: 900 17px/1 var(--schrift-ueberschrift);
  /* Der Rand in Hintergrundfarbe stanzt den Kreis aus der Linie aus. */
  border: 4px solid var(--flaeche);
  transition: background-color .3s ease, color .3s ease;
}
.abschnitt--grund .zeitstrahl__nummer { border-color: var(--grund); }

@media (prefers-reduced-motion: reduce) {
  .zeitstrahl__nummer { transition: none; }
}

/* Erreicht ist, woran der Besucher beim Herunterscrollen bereits vorbei
   ist — nicht mehr nur der letzte Schritt fest verdrahtet, sondern
   jeder Schritt der Reihe nach, gesetzt von haupt.js. Ohne Skript bleibt
   kein Schritt hervorgehoben; das ist kein Informationsverlust, die
   Nummern selbst bleiben lesbar, nur der Fortschritt fehlt. */
.zeitstrahl__schritt--erreicht .zeitstrahl__nummer {
  background: var(--akzent); color: var(--tief);
}

.zeitstrahl__titel {
  margin: 0 0 10px;
  font: 700 25px/1.2 var(--schrift-ueberschrift);
  letter-spacing: -.5px; color: var(--tinte);
}
.zeitstrahl__text {
  margin: 0 0 14px; color: var(--gedaempft);
  font-size: 17px; line-height: 1.65;
}
.zeitstrahl__ergebnis {
  margin: 0; display: inline-flex; gap: 8px; align-items: center;
  background: var(--sanft); border-radius: 999px;
  padding: 9px 16px;
  font-size: 15.5px; font-weight: 600; color: var(--tinte);
}
.zeitstrahl__haken {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  background: var(--akzent); color: var(--tief);
  display: grid; place-items: center;
  font-size: 11px; font-weight: 800;
}

/* Der Abstand rechnet die Kopfzeile mit ein. Bei „top: 24px“ klebte die
   Spalte 24 Pixel unter dem Fensterrand — und damit hinter der 73 Pixel
   hohen Kopfzeile, die dort ebenfalls klebt. Sie verschwand beim
   Scrollen also erst dahinter, statt rechtzeitig mitzugehen. */
.ablaufstrahl__seite {
  position: sticky; top: calc(var(--kopfhoehe) + 24px);
  display: grid; gap: 20px;
}
.ablaufstrahl__bild {
  border-radius: var(--radius-gross);
  border: 1px solid var(--linie);
}
.ablaufstrahl__kasten {
  background: var(--marke); border-radius: var(--radius-gross);
  padding: 28px; display: grid; gap: 14px;
}
.ablaufstrahl__kasten p {
  margin: 0; color: rgba(255, 255, 255, .78);
  font-size: 16.5px; line-height: 1.6;
}
.ablaufstrahl__kasten .knopf { justify-content: center; text-align: center; }

/* Unter 900 Pixeln untereinander. Die Seitenspalte darf dann nicht mehr
   kleben — festgepinnt in einer einspaltigen Anordnung heisst, dass sie
   den halben Bildschirm belegt, waehrend man den Text darunter liest. */
@media (max-width: 900px) {
  .ablaufstrahl__innen { grid-template-columns: 1fr; gap: 40px; }
  .ablaufstrahl__seite { position: static; }
}

@media (max-width: 560px) {
  /* Die Punkte wandern nach innen, sonst bleibt fuer den Text nichts. */
  .zeitstrahl { padding-left: 54px; }
  .zeitstrahl::before, .zeitstrahl::after { left: 17px; }
  .zeitstrahl__nummer { left: -54px; width: 38px; height: 38px; font-size: 14px; border-width: 3px; }
  .zeitstrahl__titel { font-size: 21px; }
}

/* ── Fallbeispiele: eines hervorgehoben ──────────────────────────────

   Eine grosse dunkle Karte, daneben zwei schmale Querkarten. Die
   Gewichtung ist die Aussage: Ein Projekt traegt den Abschnitt, zwei
   belegen, dass es kein Einzelfall war. */
.klemm2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.fallbuehne {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 24px;
}

/* ── die grosse Karte ── */
.fallgross {
  display: flex; flex-direction: column;
  border-radius: var(--radius-gross); overflow: hidden;
  /* position: relative ist hier Pflicht, nicht Geschmack: Die Karte
     beschneidet waagerecht UND enthaelt .nur-screenreader-Text. Ohne
     einen positionierten Vorfahren entkommt der dem overflow und
     schiebt die Seite auf. Siehe den Hinweis bei .nur-screenreader. */
  position: relative;
  background: var(--marke); color: #fff;
  transition: box-shadow .2s ease, transform .2s ease;
}
.fallgross:hover { box-shadow: var(--schatten-karte); transform: translateY(-2px); }
.fallgross:hover .fallgross__titel { color: #fff; }
.fallgross__bild { width: 100%; }
.fallgross__inhalt {
  padding: 34px; display: flex; flex-direction: column; gap: 14px;
  flex: 1 1 auto;
}
.fallgross__marken {
  margin: 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.fallmarke {
  font: 400 11px/1 var(--schrift-mono); letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}
.fallmarke--akzent {
  background: var(--akzent); color: var(--tief);
  border-radius: 999px; padding: 6px 11px;
}
.fallgross__titel {
  margin: 0; color: #fff;
  font: 700 clamp(26px, 2.8vw, 32px)/1.16 var(--schrift-ueberschrift);
  letter-spacing: -1px;
}
.fallgross__text {
  margin: 0; color: rgba(255, 255, 255, .76);
  font-size: 17px; line-height: 1.62;
}
.fallgross__zahlen {
  margin: 8px 0 0; padding-top: 22px;
  display: flex; flex-wrap: wrap; gap: 34px;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.fallgross__zahlen div { margin: 0; }
.fallgross__zahlen dt {
  margin: 0 0 3px; color: var(--akzent); white-space: nowrap;
  font: 900 32px/1 var(--schrift-ueberschrift); letter-spacing: -1px;
}
.fallgross__zahlen dd {
  margin: 0; color: rgba(255, 255, 255, .62);
  font-size: 13.5px; line-height: 1.45;
}
.fallgross__mehr {
  margin-top: auto; padding-top: 20px;
  font-weight: 700; font-size: 16px; color: #fff;
}
.fallgross__mehr::after { content: ' »'; }

/* ── die beiden schmalen ── */
.fallneben { display: grid; grid-template-rows: 1fr 1fr; gap: 24px; }

.fallklein {
  display: grid; grid-template-columns: 132px minmax(0, 1fr);
  border: 1px solid var(--linie); border-radius: var(--radius-gross);
  /* Wie bei .fallgross: beschneidet und enthaelt Vorlesetext, also
     position: relative. */
  overflow: hidden; position: relative;
  background: var(--karte); color: var(--tinte);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.fallklein--ohnebild { grid-template-columns: minmax(0, 1fr); }
.fallklein:hover { box-shadow: var(--schatten-karte); border-color: var(--kontur); }
.fallklein__bild {
  width: 100%; height: 100%; object-fit: cover;
  border-right: 1px solid var(--linie);
}
.fallklein__inhalt {
  padding: 26px 28px; display: flex; flex-direction: column;
  gap: 11px; justify-content: center; min-width: 0;
}
.fallklein__marke {
  margin: 0; font: 400 11px/1 var(--schrift-mono);
  letter-spacing: 1px; text-transform: uppercase; color: var(--gedaempft);
}
.fallklein__titel {
  margin: 0; font: 700 21px/1.25 var(--schrift-ueberschrift);
  letter-spacing: -.5px; color: var(--tinte);
}
.fallklein__text {
  margin: 0; color: var(--gedaempft); font-size: 15.5px; line-height: 1.55;
}
.fallklein__pillen {
  margin: 2px 0 0; display: flex; flex-wrap: wrap; gap: 8px;
}
.fallpille {
  background: var(--sanft); border-radius: 999px;
  padding: 8px 13px; font-size: 14px; font-weight: 700;
  white-space: nowrap; color: var(--tinte);
}
.fallklein__mehr {
  margin-top: auto; padding-top: 8px;
  align-self: flex-start;
  font-weight: 700; font-size: 15.5px;
  border-bottom: 2px solid var(--akzent); padding-bottom: 3px;
}
.fallklein__mehr::after { content: ' »'; }

@media (max-width: 1000px) {
  .fallbuehne { grid-template-columns: 1fr; }
  .fallneben  { grid-template-rows: auto auto; }
}
@media (max-width: 560px) {
  /* Die Bildspalte wandert nach oben. 132 Pixel neben zwei Zeilen Text
     lassen keiner von beiden genug Platz. */
  .fallklein { grid-template-columns: 1fr; }
  .fallklein__bild { aspect-ratio: 16/9; border-right: 0; border-bottom: 1px solid var(--linie); }
  .fallgross__inhalt { padding: 26px 24px; }
  .fallgross__zahlen { gap: 24px; }
}

/* ── Kontaktformular: zwei zusaetzliche Anordnungen ──────────────────

   Beide arbeiten mit denselben zwei Teilen wie die Standardfassung:
   dem Seitenteil mit den Kontaktwegen und dem Formular. Nur die
   Anordnung unterscheidet sich. */

/* ── „karte“: beides in einem Rahmen, die Seite dunkel ── */
.kontakt--karte {
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 0; align-items: stretch;
  border: 1px solid var(--linie); border-radius: var(--radius-gross);
  overflow: hidden; background: var(--karte);
  box-shadow: var(--schatten-karte);
}
.kontakt--karte .kontakt__seite {
  background: var(--marke); color: #fff;
  padding: 54px 44px; position: relative; overflow: hidden;
}
/* Das Punktmuster liegt hinter dem Text und laeuft nach oben aus. */
.kontakt--karte .kontakt__seite::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(41, 254, 170, .14) 1px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(160deg, transparent 45%, #000 100%);
  mask-image: linear-gradient(160deg, transparent 45%, #000 100%);
}
.kontakt--karte .kontakt__seite > * { position: relative; }
.kontakt--karte .kontakt__seite .ueberschrift-m,
.kontakt--karte .kontakt__seite .kanal__wert { color: #fff; }
.kontakt--karte .kontakt__seite .marke-zeile { color: var(--akzent); }
.kontakt--karte .kontakt__vorspann { color: rgba(255, 255, 255, .78); max-width: none; }
.kontakt--karte .kanaele {
  background: none; border: 0; padding: 0; max-width: none; gap: 14px;
}
/* Symbol links, daneben Wert ueber Hinweis. Als Raster mit benannten
   Feldern, nicht als Flexzeile: In der schmalen dunklen Spalte standen
   Adresse und Zusatz sonst nebeneinander und quetschten sich gegenseitig. */
.kontakt--karte .kanal {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-areas: "symbol wert" "symbol hinweis";
  column-gap: 16px; row-gap: 2px; align-items: center;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius-klein);
  padding: 18px 20px; color: #fff;
}
.kontakt--karte .kanal:hover { border-color: var(--akzent); background: rgba(255, 255, 255, .1); }
.kontakt--karte .kanal__symbol { grid-area: symbol; }
.kontakt--karte .kanal__text   { grid-area: wert; display: grid; gap: 1px; min-width: 0; }
.kontakt--karte .kanal__hinweis { grid-area: hinweis; text-align: left; }
.kontakt--karte .kanal__wert {
  font: 800 21px/1.2 var(--schrift-ueberschrift); letter-spacing: -.4px;
  overflow-wrap: anywhere;
}
.kontakt--karte .kanal__art,
.kontakt--karte .kanal__hinweis { color: rgba(255, 255, 255, .66); font-size: 14.5px; }

/* Das Sinnbild im Leuchtgruen. Dunkles Blau darin, weil Gruen auf Gruen
   nichts hergibt — dieselbe Rechnung wie bei den Punkten des
   Rezensionsslider. */
.kanal__symbol {
  width: 42px; height: 42px; border-radius: 10px; flex: none;
  display: grid; place-items: center;
  background: var(--akzent); color: var(--tief);
}
/* In den uebrigen Fassungen traegt die Zeile das Sinnbild nicht — dort
   stehen die Kontaktwege in einer hellen Liste, in der ein gruenes
   Quadrat nur laut waere. */
.kontakt--standard .kanal__symbol,
.kontakt--bild .kanal__symbol { display: none; }
.kontakt--karte .anfrageformular {
  padding: 54px 44px; border: 0; border-radius: 0; background: none; box-shadow: none;
}

/* ── „bild“: Bild links, Formular ragt darueber ── */
.kontakt--bild { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 0; }

.kontakt__buehne { position: relative; z-index: 0; }
.kontakt__bild { width: 100%; border-radius: var(--radius-gross); border: 1px solid var(--linie); }

/* Der Kasten sitzt im Bild, nicht darunter: Das Bild traegt die
   Stimmung, die Angaben tragen die Auskunft. Rechts bleibt Platz, damit
   das Formular ihn nicht verdeckt. */
.kontakt--bild .kontakt__seite {
  position: absolute; left: 28px; right: 120px; bottom: 28px;
  background: var(--marke); color: #fff;
  border-radius: var(--radius); padding: 24px 26px;
}
.kontakt--bild .kontakt__seite .marke-zeile { color: var(--akzent); }
.kontakt--bild .kontakt__seite .ueberschrift-m {
  color: #fff; font-size: clamp(21px, 2.2vw, 24px); margin-bottom: 18px;
}
.kontakt--bild .kanaele {
  background: none; border: 0; padding: 0; max-width: none; gap: 10px;
}
.kontakt--bild .kanal {
  background: none; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .14);
  border-radius: 0; padding: 0 0 10px; color: #fff;
}
.kontakt--bild .kanaele li:last-child .kanal { border-bottom: 0; padding-bottom: 0; }
.kontakt--bild .kanal__art,
.kontakt--bild .kanal__hinweis { color: rgba(255, 255, 255, .62); }
.kontakt--bild .kanal__wert { color: #fff; }

/* Ohne Bild steht der Kasten im Fluss statt im Bild, und das Formular
   ragt ueber nichts. Beides zurueck auf normal. */
.kontakt__buehne--ohnebild .kontakt__seite {
  position: static; left: auto; right: auto; bottom: auto;
}
.kontakt--bild:has(.kontakt__buehne--ohnebild) .anfrageformular { margin-left: 0; }

.kontakt--bild .anfrageformular {
  position: relative; z-index: 1; margin-left: -72px;
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--radius-gross); padding: 44px;
  box-shadow: var(--schatten-menue);
}
.anfrageformular__vorspann {
  margin: 0 0 4px; color: var(--gedaempft);
  font-size: 16.5px; line-height: 1.6;
}

@media (max-width: 1000px) {
  /* Untereinander. Der Kasten verlaesst dabei das Bild — festgepinnt in
     einer schmalen Spalte wuerde er es vollstaendig verdecken. */
  .kontakt--karte, .kontakt--bild { grid-template-columns: 1fr; gap: 24px; }
  .kontakt--bild .kontakt__seite {
    position: static; left: auto; right: auto; bottom: auto;
    margin-top: -48px; margin-inline: 20px;
  }
  .kontakt--bild .anfrageformular { margin-left: 0; }
}
@media (max-width: 560px) {
  .kontakt--karte .kontakt__seite,
  .kontakt--karte .anfrageformular { padding: 34px 24px; }
  .kontakt--bild .anfrageformular { padding: 32px 24px; }
  .kontakt--bild .kontakt__seite { margin-inline: 12px; padding: 20px 22px; }
}