/* =============================================================
   Wählerpotenzialanalyse, Marketing-Website
   Design-System / Corporate Identity
   Farbwelt aus dem Pitch-Deck (Navy-Teal + Orange-Akzent)
   ============================================================= */

:root {
  /* Markenfarben, abgeleitet aus der Bildmarke (Achteck mit Gebietsgliederung).
     Die Tokennamen sind historisch, --blue trägt jetzt das Teal des Logos. */
  --navy:        #1F2A44;   /* Überschriften, dunkle Flächen        */
  --navy-deep:   #16203A;   /* Footer, sehr dunkle Flächen          */
  --blue:        #0E8C8C;   /* Logo-Teal: Flächen, Rahmen, Verläufe */
  --blue-ink:    #0C7A7A;   /* Teal als Schrift, 5,15:1 auf Weiß    */
  --blue-soft:   #E6F2F2;   /* helle Info-Flächen                   */
  --teal-light:  #5FB7B7;   /* Akzent auf Navy, 6,07:1              */
  --orange:      #e1720c;   /* nur Flächen und Zierlinien ohne Schrift darauf */
  --orange-ink:  #b35505;   /* Schrift auf hellem Grund, Flächen mit weißer Schrift
                               4,98:1 gegen Weiß in beide Richtungen               */
  --orange-dark: #8f4304;   /* Hover, und Schrift auf --orange-soft               */
  --orange-soft: #fdf1e6;

  /* Neutraltöne */
  --bg:          #ffffff;
  --bg-alt:      #F1F4F7;   /* Section-Wechsel                      */
  --line:        #E2E5EB;
  --text:        #45505C;
  --muted:       #626A76;   /* 4,95:1 auch auf --bg-alt             */
  --on-dark-accent: #7FC9C9; /* Akzentschrift auf Navy, 7,0:1      */

  /* Struktur */
  --maxw:        1160px;
  --radius:      14px;
  --radius-sm:   9px;
  --shadow:      0 10px 30px rgba(18, 56, 74, 0.08);
  --shadow-lg:   0 20px 50px rgba(18, 56, 74, 0.14);
  --transition:  0.2s ease;
  --ico-chev:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ico-arrow:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --font: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}

/* ---------- Reset / Basis ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }

/* ---------- Tastaturfokus ----------
   Nur :focus-visible, damit ein Mausklick den Ring nicht auslöst. Navy auf
   hellem Grund, Weiß auf dunklen Flächen. Gilt für alles Fokussierbare. */
:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
  border-radius: 4px;
}
.section--navy :focus-visible,
.site-footer :focus-visible,
.cta-banner :focus-visible,
.compare__col--us :focus-visible { outline-color: #fff; }
a { color: var(--orange-ink); text-decoration: none; }
a:hover { color: var(--orange-dark); text-decoration: underline; }

h1, h2, h3, h4 { color: var(--navy); line-height: 1.2; margin: 0 0 0.5em; font-weight: 700; }
h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: -0.01em; }
h3 { font-size: 1.2rem; }
p  { margin: 0 0 1em; }

/* ---------- Layout-Helfer ---------- */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: 84px 0; }
.section--alt { background: var(--bg-alt); }
.section--navy { background: var(--navy); color: #dceaf0; }
.section--navy h2, .section--navy h3 { color: #fff; }
.section-head { max-width: 760px; margin: 0 0 48px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.eyebrow {
  display: inline-block; font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange-ink);
  margin-bottom: 14px;
}
.lead { font-size: 1.15rem; color: var(--muted); max-width: 68ch; }

/* ---------- Zeilenlänge ----------
   Fließtext bleibt unter rund 68 Zeichen. Alles, was in voller Spaltenbreite
   steht, käme sonst auf über 100 Zeichen je Zeile. Inline gesetzte
   max-width-Werte auf einzelnen Absätzen gehen weiterhin vor. */
.callout p,
.legal p,
.footnotes li,
.form-note,
.quote p,
.faq__body p { max-width: 68ch; }
.text-center .form-note, .form-note.text-center { margin-left: auto; margin-right: auto; }
.section--navy .lead { color: #b9d0da; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 1rem; padding: 13px 26px;
  border-radius: var(--radius-sm); border: 2px solid transparent;
  cursor: pointer; transition: var(--transition); text-decoration: none;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn--primary { background: var(--orange-ink); color: #fff; }
.btn--primary:hover { background: var(--orange-dark); color: #fff; }
.btn--ghost { background: transparent; color: var(--navy); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--navy); color: var(--navy); }
.btn--light { background: #fff; color: var(--navy); }
.btn--light:hover { background: #f0f4f6; color: var(--navy); }
.btn--lg { padding: 16px 34px; font-size: 1.05rem; }

/* ---------- Header / Navigation ---------- */
/* Der Wrapper klebt, nicht das <header> darin: sonst ist sein Bewegungsraum
   null und er scrollt trotz position:sticky weg. */
#site-header { position: sticky; top: 0; z-index: 100; }
.site-header {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 800; color: var(--navy); font-size: 1.05rem; }
.brand:hover { text-decoration: none; }
/* Die Bildmarke kommt als Inline-SVG aus main.js, damit sie ihre
   Gebietsgliederung behält und in beiden Größen sauber bleibt. */
.brand__mark { width: 40px; height: 40px; flex: 0 0 auto; display: block; }
.brand__mark svg { width: 100%; height: 100%; display: block; }
.brand__sub { display: block; font-size: 0.7rem; font-weight: 500; color: var(--muted); letter-spacing: 0.04em; }
.nav__links { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.nav__links a {
  color: var(--text); font-weight: 500; font-size: 0.95rem; white-space: nowrap;
  padding: 13px 14px; border-radius: 8px; transition: var(--transition);
}
.nav__links a:hover { background: var(--bg-alt); text-decoration: none; color: var(--navy); }
.nav__links a.is-active { color: var(--navy); font-weight: 700; }
/* Buttons in der Navigation behalten ihre eigene Schriftfarbe: die Regel
   .nav__links a oben ist spezifischer als .btn--primary und wuerde sie sonst
   ueberschreiben. */
.nav__links .btn--primary, .nav__links .btn--primary:hover { color: #fff; }
.nav__links .btn--ghost, .nav__links .btn--ghost:hover { color: var(--navy); }
/* ---------- Untermenü unter „Leistungen" ---------- */
.nav__has-sub { position: relative; }
.nav__has-sub > a { display: inline-flex; align-items: center; gap: 5px; }
.nav__has-sub > a svg { width: 14px; height: 14px; opacity: 0.6; transition: var(--transition); }
.nav__sub {
  position: absolute; top: 100%; left: 0; min-width: 244px;
  display: flex; flex-direction: column; gap: 2px; list-style: none;
  margin: 0; padding: 8px; border-radius: var(--radius-sm);
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
/* Hover und Tastaturfokus öffnen dasselbe Menü. */
.nav__has-sub:hover > .nav__sub,
.nav__has-sub:focus-within > .nav__sub { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__has-sub:hover > a svg, .nav__has-sub:focus-within > a svg { opacity: 1; transform: rotate(180deg); }
.nav__sub a { display: block; padding: 9px 13px; border-radius: 7px; }
.nav__sub strong { display: block; color: var(--navy); font-weight: 700; font-size: 0.95rem; }
.nav__sub span { display: block; color: var(--muted); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; }
.nav__sub a.is-active { background: var(--blue-soft); }
.nav__sub a.is-active strong { color: var(--blue-ink); }

/* „Live-Analysen": dezenter Knopf in Teal, der Punkt signalisiert Live. */
.nav__live a {
  display: inline-flex; align-items: center; gap: 8px; margin-left: 4px;
  padding: 9px 14px; background: var(--blue-soft); color: var(--blue-ink); font-weight: 700;
}
.nav__links .nav__live a:hover { background: var(--blue-soft); color: var(--navy); }
.nav__links .nav__live a.is-active { color: var(--blue-ink); box-shadow: inset 0 0 0 2px var(--blue); }
.nav__live-punkt {
  width: 8px; height: 8px; border-radius: 50%; background: var(--blue); flex: none;
  animation: live-puls 2s ease-in-out infinite;
}
@keyframes live-puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(14, 140, 140, 0.45); }
  50% { box-shadow: 0 0 0 5px rgba(14, 140, 140, 0); }
}
.nav__login { margin-left: 6px; }
.nav__login .btn { padding: 9px 16px; }
.nav__cta { margin-left: 8px; }
.nav__toggle {
  display: none; background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px; color: var(--navy);
}
.nav__toggle svg { width: 26px; height: 26px; }

/* Klappmenue schon unter 1100 px: mit „Live-Analysen" passt die Leiste darunter nicht
   mehr in eine Zeile. */
@media (max-width: 1100px) {
  .nav__toggle { display: inline-flex; align-items: center; justify-content: center; }
  .nav__links {
    position: absolute; top: 72px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: 14px 24px 22px; box-shadow: var(--shadow);
    display: none;
  }
  .nav__links.is-open { display: flex; }
  .nav__links a { padding: 12px 10px; }
  .nav__sub {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; background: transparent;
    padding: 0 0 6px 14px; min-width: 0;
    border-left: 2px solid var(--line); margin-left: 10px;
  }
  .nav__has-sub > a svg { display: none; }
  .nav__cta { margin: 8px 0 0; }
  .nav__live a { margin: 4px 0 0; }}

/* ---------- Abschnittsleiste (lange Seiten) ----------
   Klebt unter dem Kopf. Auf schmalen Bildschirmen waagerecht scrollbar,
   damit sie nie umbricht. */
.sectionnav {
  position: sticky; top: var(--header-h, 72px); z-index: 90;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.sectionnav ul {
  display: flex; gap: 2px; list-style: none; margin: 0; padding: 0;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.sectionnav ul::-webkit-scrollbar { display: none; }
.sectionnav a {
  display: block; white-space: nowrap; padding: 14px 14px;
  font-size: 0.92rem; font-weight: 500; color: var(--muted);
  border-bottom: 3px solid transparent; transition: var(--transition);
}
.sectionnav a:hover { color: var(--navy); text-decoration: none; }
.sectionnav a.is-active { color: var(--navy); font-weight: 700; border-bottom-color: var(--orange-ink); }
/* Sprungziele dürfen nicht unter Kopf und Leiste verschwinden. */
html { scroll-padding-top: calc(var(--header-h, 72px) + 20px); }
.has-sectionnav { scroll-padding-top: calc(var(--header-h, 72px) + var(--sectionnav-h, 50px) + 20px); }
@media (max-width: 900px) {
  .sectionnav .container { padding: 0 12px; }
  .sectionnav a { padding: 12px 12px; font-size: 0.88rem; }}
.hero__title { margin-bottom: 20px; }
/* Orange ist der Aufruf. In Überschriften akzentuiert das Teal der Bildmarke. */
.hero__title em { font-style: normal; color: var(--blue-ink); }
/* Dieselbe Leiste, aber klickbar: auf der Startseite und als Umschalter
   zwischen den drei Säulen-Seiten. */
.hero__claim a {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 600; color: var(--navy); font-size: 0.9rem; text-decoration: none;
  background: #fff; border: 1px solid var(--blue); padding: 11px 18px; border-radius: 24px;
  box-shadow: 0 1px 3px rgba(18, 56, 74, 0.08); transition: var(--transition);
}
/* Pfeil macht sichtbar, dass dahinter eine eigene Seite liegt. */
.hero__claim a::after {
  content: ""; width: 13px; height: 13px; flex: 0 0 auto;
  background: currentColor; opacity: 0.75;
  -webkit-mask: var(--ico-arrow) center / contain no-repeat;
  mask: var(--ico-arrow) center / contain no-repeat;
}
.hero__claim--nav .is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }

/* ==========================================================
   Version C: Zahlenband, Tore, Visualisierungsflächen
   ========================================================== */

/* ---------- Zahlenband ----------
   Belege stehen vorn und in Tabellenziffern, getrennt durch Haarlinien
   statt durch Karten mit Radius. */
.numberband {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  border-top: 1px solid var(--navy); border-bottom: 1px solid var(--navy);
  font-variant-numeric: tabular-nums;
}
.numberband > div { padding: 26px 30px 24px; border-right: 1px solid var(--line); }
.numberband > div:last-child { border-right: 0; }
.numberband b {
  display: block; font-size: clamp(1.9rem, 3vw, 2.4rem); font-weight: 800;
  color: var(--navy); line-height: 1; letter-spacing: -0.02em;
}
.numberband span { display: block; margin-top: 8px; font-size: 0.92rem; color: var(--muted); }
@media (max-width: 700px) {
  .numberband > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .numberband > div:last-child { border-bottom: 0; }}

/* ---------- Drei Tore ----------
   Messen, Verstehen, Umsetzen als gleichrangige Eingänge. Das mittlere Tor
   steht auf Navy, damit die Reihe eine Mitte hat. */
/* Steht im Inhaltsbereich wie alles andere, hebt sich aber durch die eigene
   Fläche, den Rahmen und die dunkle Mitte ab. Vorher lief der Block als
   einziges Element über die volle Seitenbreite und fiel aus der Ordnung. */
.doors {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
}
@media (max-width: 900px) { .doors { grid-template-columns: 1fr; }}
.door {
  background: #fff; padding: 36px 30px; display: flex; flex-direction: column;
  text-decoration: none; transition: var(--transition);
}
.door:hover { background: var(--blue-soft); text-decoration: none; }
.door--dark { background: var(--navy); }
.door--dark:hover { background: #253352; }
.door__verb { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue-ink); }
.door--dark .door__verb { color: var(--teal-light); }
.door h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 800; margin: 12px 0 14px; letter-spacing: -0.02em; }
.door--dark h2 { color: #fff; }
.door > p { color: var(--muted); font-size: 1rem; margin: 0 0 18px; }
.door--dark > p { color: #B8C2D0; }
.door ul { list-style: none; margin: 0 0 22px; padding: 0; }
.door li {
  display: flex; gap: 10px; font-size: 0.95rem; color: var(--muted); margin-bottom: 8px;
  padding-left: 24px; position: relative;
}
.door--dark li { color: #B8C2D0; }
/* Häkchen wie im Rest der Seite. Die kurzen Striche davor waren ein Fremdkörper. */
.door li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px;
  background-repeat: no-repeat; background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%230C7A7A'%3E%3Cpath d='M8 14L3 9l1.4-1.4L8 11.2l7.6-7.6L17 5z'/%3E%3C/svg%3E");
}
.door--dark li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%235FB7B7'%3E%3Cpath d='M8 14L3 9l1.4-1.4L8 11.2l7.6-7.6L17 5z'/%3E%3C/svg%3E");
}

/* ---------- Aufklapper im Tor ----------
   Überschrift, Verb und Claim bleiben immer sichtbar. Getauscht wird nur der
   mittlere Teil: die Liste weicht der Erklärung. Der Bereich hält dafür Platz
   vor, damit die Gridzeile ihre Höhe behält und die zwei anderen Kacheln nicht
   leer mitwachsen. */
.door__body { display: flex; flex-direction: column; }
@media (min-width: 901px) { .door__body { min-height: 23.6em; }}
.door__body { margin-bottom: 22px; }
.door__body > ul { margin-bottom: 0; }

.door__disc { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px; }
.door--dark .door__disc { border-top-color: rgba(255,255,255,0.16); }
.door__disc > summary {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  font-weight: 700; font-size: 0.98rem; color: var(--blue-ink); padding: 4px 0;
}
.door--dark .door__disc > summary { color: var(--teal-light); }
.door__disc > summary::-webkit-details-marker { display: none; }
.door__disc > summary::after {
  content: ""; width: 15px; height: 15px; background: currentColor;
  -webkit-mask: var(--ico-chev) center / contain no-repeat;
  mask: var(--ico-chev) center / contain no-repeat;
  transition: var(--transition);
}
.door__disc[open] > summary::after { transform: rotate(180deg); }
.door__disc > p { margin: 12px 0 0; font-size: 0.95rem; color: var(--muted); }
.door--dark .door__disc > p { color: #B8C2D0; }

/* Der Weg auf die Unterseite steht dauerhaft da und hängt nicht am Aufklappen. */
.door__more { margin-top: auto; align-self: flex-start; }
.door--dark .door__more { color: #fff; border-color: rgba(255,255,255,0.4); }
.door--dark .door__more:hover { border-color: #fff; color: #fff; }

@media (prefers-reduced-motion: no-preference) {
  .door__disc[open] > p { animation: doorFade 0.18s ease-out; }
  @keyframes doorFade { from { opacity: 0; } to { opacity: 1; } }}

/* Text nur fuer Screenreader: die Ziffer im Punkt sagt allein nichts. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- Punkte auf dem Produktbild ----------
   Vier Stellen im Bild werden beschriftet. Zeigen öffnet sie am Rechner,
   Tippen am Telefon, mit der Tastatur sind sie ebenfalls erreichbar: ein
   reines Hover-Element wäre für einen großen Teil der Besucher unsichtbar.
   Ist der Bildrahmen zu schmal für Punkte, tritt die Liste darunter an ihre
   Stelle. Deshalb eine Container-Abfrage und keine Bildschirmbreite. */
.shotmap { container-type: inline-size; }
/* Der Bildrahmen schneidet sonst die Hinweisfelder ab. Die runden Ecken
   übernimmt dafür das Bild selbst. */
.shotmap .viz, .shotmap .shot { overflow: visible; }
.shotmap .viz img, .shotmap .shot img { border-radius: calc(var(--radius) - 1px); display: block; }
.shotmap__hs { position: absolute; left: var(--x); top: var(--y); z-index: 3; }
/* Offener Hotspot liegt über allen anderen, sonst verdeckt ein späterer Punkt den Tooltip */
.shotmap__hs:hover, .shotmap__hs:focus-within, .shotmap__hs.is-open { z-index: 10; }
.shotmap__dot {
  width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer;
  transform: translate(-50%, -50%);
  background: var(--blue-ink); color: #fff;
  font: 700 0.86rem/1 var(--font); font-variant-numeric: tabular-nums;
  display: grid; place-items: center;
  box-shadow: 0 0 0 3px #fff, 0 2px 8px rgba(31,42,68,0.28);
  transition: var(--transition);
}
.shotmap__dot:hover { background: var(--navy); transform: translate(-50%, -50%) scale(1.12); }
.shotmap__dot:focus-visible { outline: 3px solid var(--navy); outline-offset: 4px; }
.shotmap__tip {
  position: absolute; top: 26px; width: max-content; max-width: min(280px, 62cqw);
  background: var(--navy); color: #fff; font-size: 0.88rem; line-height: 1.45;
  padding: 12px 14px; border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(22,32,58,0.32);
  opacity: 0; visibility: hidden; transition: opacity 0.15s ease, visibility 0.15s;
}
.shotmap__tip b { display: block; color: var(--on-dark-accent); margin-bottom: 3px; }
.shotmap__hs--start .shotmap__tip { left: -14px; }
.shotmap__hs--center .shotmap__tip { left: 50%; transform: translateX(-50%); }
.shotmap__hs--end .shotmap__tip { right: -14px; }
.shotmap__hs:hover .shotmap__tip,
.shotmap__hs:focus-within .shotmap__tip,
.shotmap__hs.is-open .shotmap__tip { opacity: 1; visibility: visible; }

.shotmap__legend { display: none; }
@container (max-width: 700px) {
  .shotmap__hs { display: none; }
  .shotmap__legend {
    display: grid; gap: 10px; list-style: none; margin: 16px 0 0; padding: 0;
    counter-reset: hs;
  }
  .shotmap__legend li {
    counter-increment: hs; position: relative; padding-left: 34px;
    font-size: 0.92rem; color: var(--muted); line-height: 1.5;
  }
  .shotmap__legend li::before {
    content: counter(hs); position: absolute; left: 0; top: 1px;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--blue-ink); color: #fff;
    font-size: 0.76rem; font-weight: 700; display: grid; place-items: center;
  }
  .shotmap__legend b { display: block; color: var(--navy); }
}

/* ---------- Kartenreihe ----------
   Drei Ansichten desselben Wahlkreises nebeneinander. Die Bilder haben
   unterschiedliche Seitenverhältnisse, deshalb sitzen sie in gleich hohen
   Feldern und werden vollständig eingepasst statt beschnitten. */
.mapstrip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; position: relative; margin-top: 44px; }
.mapstrip--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 780px) { .mapstrip { grid-template-columns: 1fr; }}
.mapstrip figure { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.mapstrip img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center;
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius);
}
.mapstrip figcaption { display: flex; flex-direction: column; gap: 2px; }
.mapstrip figcaption b { font-size: 1.02rem; color: var(--navy); }
.mapstrip figcaption span { font-size: 0.92rem; color: var(--muted); }
.mapstrip figure:last-child img { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(14,140,140,0.18); }

/* Solange die Karten das Wasserzeichen des fehlenden Kartenschlüssels tragen,
   muss das sichtbar sein. Die Marke verschwindet mit der Klasse. */
.is-placeholder { position: relative; }
.is-placeholder::after {
  content: "Platzhalter"; position: absolute; top: -34px; left: 0; z-index: 2;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff; background: var(--orange-ink); padding: 4px 9px; border-radius: 3px;
}
.mapstrip__verdict {
  margin: 22px auto 30px; max-width: 62ch; text-align: center;
  font-size: 1.12rem; color: var(--navy); font-weight: 600;
}
.compare--tight .clist li { margin-bottom: 8px; }

/* ---------- Visualisierungsfläche ----------
   Rahmen für echte Datenbilder. Die Bildmarke taucht als Wasserzeichen auf,
   damit Logo und Datenbild dieselbe Geometrie teilen. */
.viz { position: relative; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.viz img { width: 100%; height: auto; display: block; }

/* ---------- Platzhalter für fehlende Visualisierungen ----------
   Bewusst auffällig. scripts/check_site.js meldet jede verbliebene Fläche
   als Livegang-Blocker. */
.viz-slot {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 30px 26px; min-height: 210px;
  border: 2px dashed var(--blue-ink); border-radius: var(--radius);
  background:
    repeating-linear-gradient(45deg, rgba(14,140,140,0.05) 0 10px, transparent 10px 20px),
    var(--blue-soft);
}
.viz-slot__tag {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: #fff; background: var(--blue-ink); border-radius: 20px; padding: 4px 12px;
}
.viz-slot strong { color: var(--navy); font-size: 1.02rem; }
.viz-slot span { color: var(--muted); font-size: 0.9rem; max-width: 46ch; }

/* ---------- Angebot: Kern gegen Zusatz ----------
   Zwei Gruppen statt einer Kartenreihe, damit der Produktumfang erkennbar ist.
   Der Kern steht optisch vorn, der Zusatz tritt zurück. */
.offer { display: grid; grid-template-columns: 1.25fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 900px) { .offer { grid-template-columns: 1fr; }}
.offer__group {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 28px;
}
.offer__group--core { border-color: var(--blue); box-shadow: var(--shadow); }
.offer__head { padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.offer__head h3 { font-size: 1.3rem; margin: 10px 0 6px; }
.offer__head p { color: var(--muted); margin: 0; font-size: 0.98rem; }
.offer__tag {
  display: inline-block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 4px 12px; border-radius: 20px;
  background: var(--blue-ink); color: #fff;
}
.offer__tag--add { background: var(--bg-alt); color: var(--muted); }

/* ---------- Beleg ---------- */
.proof { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 900px) { .proof { grid-template-columns: 1fr; gap: 28px; }}
/* Zitat trägt, die Zahlen stehen schmal daneben. */
.proof--tight { grid-template-columns: 1.45fr 0.55fr; align-items: center; }
@media (max-width: 900px) { .proof--tight { grid-template-columns: 1fr; }}
.numberband--stack { grid-template-columns: 1fr; }

/* ---------- Fakten-Karten (3 Fakten) ---------- */
.grid { display: grid; gap: 24px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; }}

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 28px; transition: var(--transition); height: 100%;
}
.card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }

/* ---------- Trias: Messen · Verstehen · Machen ----------
   Klammer der drei Produktseiten. Steht auf jeder der drei Seiten,
   der aktuelle Baustein hervorgehoben, die beiden anderen verlinkt. */
/* Steht jetzt unter dem Vorspann: über der Überschrift konkurrierte sie
   mit der Kopfnavigation und ließ den Seitenkopf unruhig wirken. */
.trias { display: flex; gap: 10px; flex-wrap: wrap; margin: 30px 0 0; }
/* Weiterführung unter dem CTA: zentriert, ohne unteren Abstand. */
.trias--center { justify-content: center; margin: 32px 0 0; }
.trias__item {
  display: flex; flex-direction: column; gap: 3px; min-width: 132px;
  padding: 11px 20px; border-radius: 12px;
  border: 1px solid var(--line); background: #fff;
  text-decoration: none; transition: var(--transition);
}
.trias__item b { color: var(--navy); font-size: 1.02rem; font-weight: 800; letter-spacing: -0.01em; }
.trias__item span { color: var(--muted); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.05em; }
/* Die anklickbaren Bausteine bekommen Rahmenfarbe, Schatten und Pfeil,
   damit sie sich klar vom aktiven (nicht klickbaren) Baustein abheben. */
a.trias__item {
  border-color: var(--blue); box-shadow: 0 1px 3px rgba(18, 56, 74, 0.08);
  padding-right: 42px; position: relative;
}
a.trias__item::after {
  content: ""; position: absolute; right: 16px; top: 50%; margin-top: -7px;
  width: 14px; height: 14px; background: var(--blue); opacity: 0.7;
  -webkit-mask: var(--ico-arrow) center / contain no-repeat;
  mask: var(--ico-arrow) center / contain no-repeat;
}
a.trias__item:hover {
  background: var(--blue-soft); border-color: var(--blue);
  text-decoration: none; transform: translateY(-1px);
}
a.trias__item:hover b { color: var(--blue-ink); }
a.trias__item:hover::after { opacity: 1; }
.trias__item.is-active { background: var(--navy); border-color: var(--navy); }
.trias__item.is-active b { color: #fff; }
.trias__item.is-active span { color: #a9c1cc; }

/* ---------- Kette: Erheben → Auswerten → Lernen ----------
   Visuelles Rückgrat der Wissenschaftlich-Seite (Prozess statt Karten). */
.chain { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; position: relative; }
@media (max-width: 900px) { .chain { grid-template-columns: 1fr; }}
.chain__step { position: relative; padding: 0 28px 0 0; }
.chain__step:not(:last-child)::after {
  content: ""; position: absolute; top: 13px; left: 26px; right: 8px; height: 2px;
  background: linear-gradient(90deg, var(--blue) 0%, var(--line) 100%);
}
@media (max-width: 900px) { .chain__step:not(:last-child)::after { display: none; }}
.chain__dot {
  position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%;
  background: #fff; border: 2px solid var(--blue); color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.85rem; margin-bottom: 18px;
}
.chain__step h3 { margin: 0 0 8px; color: var(--navy); }
.chain__step p { color: var(--muted); margin: 0; padding-right: 12px; }

/* ---------- Positionierungssatz (gemeinsamer Abbinder der drei Seiten) ---------- */
.positioning { text-align: center; max-width: 780px; margin: 0 auto; }
.positioning p {
  font-size: 1.45rem; line-height: 1.55; font-weight: 600; color: #fff; margin: 0;
}
/* Bewusst drei Zeilen: der Satz ist eine Trias, keine Fließzeile. */
.positioning p span { display: block; }
@media (max-width: 700px) { .positioning p { font-size: 1.2rem; }}
.positioning em { font-style: normal; color: var(--on-dark-accent); }

/* Überschriften aus mehreren Sätzen brechen an der Satzgrenze, nicht mitten
   im Satz. inline-block heißt: passen beide Sätze in eine Zeile, bleiben sie
   dort; muss umbrochen werden, wandert der zweite Satz komplett nach unten. */
.satz { display: inline-block; }

/* Derselbe Dreiklang wie im Abbinder, nur auf hellem Grund. */
.claimlead span { display: block; }
.claimlead em { font-style: normal; font-weight: 700; color: var(--blue-ink); }

/* ---------- Sichtbarer Platzhalter für offene Werte ----------
   Muss vor dem Livegang leer sein - scripts/check_site.js prüft darauf. */
/* ---------- Werkbank (Praxisnah) ----------
   Millimeterpapier-Grund + Werkzeug-Karten. Gibt der Machen-Seite eine
   eigene Anmutung, ohne den Rest der Familie zu verlassen. */
.section--bench {
  background-color: var(--bg-alt);
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 28px 28px, 28px 28px;
  background-position: -1px -1px, -1px -1px;
}
.card--tool { border-top: 3px solid var(--blue); }
.card--tool .card__tool {
  width: 40px; height: 40px; border-radius: var(--radius-sm); margin-bottom: 16px;
  background: var(--blue-soft); color: var(--blue);
  display: flex; align-items: center; justify-content: center;
}
.card--tool .card__tool svg { width: 21px; height: 21px; }
.card__stat { font-size: 2.1rem; font-weight: 800; color: var(--blue-ink); line-height: 1; margin-bottom: 6px; }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--muted); margin: 0; font-size: 0.98rem; }

/* ---------- Kernversprechen ----------
   Zwei ungleiche Seiten: links knapp, was fehlt, rechts ausführlich, was man
   bekommt. Der Hauptclaim steht oben im dunklen Feld und trägt den Block. */
.valueprop { display: grid; grid-template-columns: 0.62fr 1.38fr; gap: 0; align-items: stretch; }
@media (max-width: 900px) { .valueprop { grid-template-columns: 1fr; }}
.valueprop__old {
  background: var(--bg-alt); border: 1px solid var(--line);
  border-radius: var(--radius) 0 0 var(--radius); padding: 30px 28px;
}
@media (max-width: 900px) { .valueprop__old { border-radius: var(--radius) var(--radius) 0 0; }}
.valueprop__old h3 { font-size: 1.06rem; color: var(--muted); margin-bottom: 2px; }
.valueprop__sub { font-size: 0.88rem; color: var(--muted); margin: 0 0 18px; }
.valueprop__old .clist li { font-size: 0.94rem; color: var(--muted); text-wrap: pretty; }

.valueprop__new {
  background: var(--navy); color: #dceaf0;
  border-radius: 0 var(--radius) var(--radius) 0; padding: 32px 34px;
}
@media (max-width: 900px) { .valueprop__new { border-radius: 0 0 var(--radius) var(--radius); }}
.valueprop__new h3 { color: #fff; font-size: 1.18rem; margin: 0 0 18px; }

/* Zahl auf eigener Zeile, der Satz darunter über die volle Breite: nebeneinander
   brach der Satz in drei kurze Zeilen. */
.valueprop__claim {
  padding-bottom: 20px; margin-bottom: 22px;
  border-bottom: 1px solid rgba(255,255,255,0.16);
}
.valueprop__claim b {
  display: block; font-size: clamp(2.2rem, 3.8vw, 3.1rem); line-height: 1.05; color: #fff;
  font-weight: 800; letter-spacing: -0.02em;
}
.valueprop__claim span {
  display: block; margin-top: 8px; max-width: 62ch;
  color: var(--on-dark-accent); font-size: 1.05rem; line-height: 1.5; text-wrap: pretty;
}

.clist--two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 34px; }
@media (max-width: 760px) { .clist--two { grid-template-columns: 1fr; }}
.valueprop__new .clist--two li { font-size: 0.94rem; color: #b9d0da; margin-bottom: 0; line-height: 1.55; text-wrap: pretty; }
.valueprop__new .clist--two strong { display: block; color: #fff; font-size: 1rem; margin-bottom: 3px; }
/* Auf dem dunklen Feld Teal statt Orange: Orange bleibt dem Aufruf vorbehalten. */
.valueprop__new .clist--yes li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%237FC9C9'%3E%3Cpath d='M10 0a10 10 0 100 20A10 10 0 0010 0zm-1.2 14.3L4.6 10.1 6 8.7l2.8 2.8L14 6.3l1.4 1.4z'/%3E%3C/svg%3E");
}

/* Lesehilfe: ein Satz je Zeile, solange die Breite reicht. Die Sätze brechen
   an ihrer Grenze, nicht mitten im Gedanken. */
.valueprop__note {
  margin: 24px auto 0; max-width: 92ch; text-align: center;
  font-size: 0.95rem; line-height: 1.6; color: var(--muted);
}
.valueprop__note b { color: var(--navy); font-weight: 700; }
/* Jeder Satz balanciert seine eigenen Zeilen, sonst bleibt am Ende ein
   einzelnes Wort stehen. */
.valueprop__note .satz { text-wrap: balance; }

/* Zitatzeile mit Umbruch zwischen Person und Rolle. */
.quote cite span { display: block; }
.clist { list-style: none; margin: 16px 0 0; padding: 0; }
.clist li { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 13px; font-size: 0.97rem; }
.clist li::before { content: ""; flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; background-size: contain; background-repeat: no-repeat; }
.clist--no li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23c0392b'%3E%3Cpath d='M10 0a10 10 0 100 20A10 10 0 0010 0zm3.5 12.1l-1.4 1.4L10 11.4l-2.1 2.1-1.4-1.4L8.6 10 6.5 7.9l1.4-1.4L10 8.6l2.1-2.1 1.4 1.4L11.4 10z'/%3E%3C/svg%3E"); }
.clist--yes li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23e1720c'%3E%3Cpath d='M10 0a10 10 0 100 20A10 10 0 0010 0zm-1.2 14.3L4.6 10.1 6 8.7l2.8 2.8L14 6.3l1.4 1.4z'/%3E%3C/svg%3E"); }

/* ---------- Dashboard-Feature-Split ---------- */
.split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 32px; }}
.split--even { grid-template-columns: 1fr 1fr; }
.split--top { align-items: start; }
.split--rev .split__media { order: 2; }
@media (max-width: 900px) { .split--rev .split__media { order: 0; }}
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { display: flex; gap: 13px; align-items: flex-start; margin-bottom: 18px; }
.checklist .ico {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 7px; margin-top: 2px;
  background: var(--blue-soft); color: var(--blue-ink);
  display: flex; align-items: center; justify-content: center;
}
.checklist .ico svg { width: 15px; height: 15px; }
.checklist strong { display: block; color: var(--navy); }
.checklist span { color: var(--muted); font-size: 0.96rem; }

/* Die Problemliste bleibt als Warnung lesbar, aber ohne das Braun.
   Rot auf Rosé: 6,14:1. */
.pledge .checklist .ico { background: #FBEDED; color: #A32F2F; }

/* Hervorhebungen im Fließtext: Teal, kein Farbkasten. */
.hl { color: var(--blue-ink); font-weight: 600; }

/* ---------- Datenkette ----------
   Drei Stufen: die Quellen, die Modelle darauf, das Ergebnis daraus, und was
   davon im Dashboard sichtbar wird. Die Fallstriche zwischen den Stufen zeigen
   die Richtung; sie entfallen im schmalen Layout, wo die Reihenfolge sie
   ohnehin ersetzt. */
.pipeline { display: grid; gap: 0; }
.pipeline__tier { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.pipeline__tier span {
  flex: 0 0 auto; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--blue-ink);
}
.pipeline__tier::after { content: ""; flex-grow: 1; height: 1px; background: var(--line); }
.pipeline__row { display: grid; gap: 18px; }
.pipeline__row--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pipeline__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pipeline__row .card { padding: 24px 22px; }
.pipeline__row .card h3 { font-size: 1.05rem; }

.pipeline__model {
  background: var(--blue-soft); border: 1px solid var(--blue);
  border-radius: var(--radius); padding: 26px 24px;
}
.pipeline__model h3 { font-size: 1.08rem; margin-bottom: 8px; }
.pipeline__model p { margin: 0; color: var(--text); font-size: 0.98rem; }

.pipeline__drop { display: grid; gap: 18px; height: 30px; }
.pipeline__drop--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pipeline__drop--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pipeline__drop--1 { grid-template-columns: 1fr; }
.pipeline__drop i { justify-self: center; width: 2px; height: 100%; background: var(--teal-light); }

.pipeline__core {
  text-align: center; background: var(--navy); color: #fff;
  border-radius: var(--radius); padding: 30px;
}
.pipeline__core .eyebrow { color: var(--on-dark-accent); margin-bottom: 8px; }
.pipeline__core strong { display: block; color: #fff; font-size: 1.3rem; font-weight: 700; }
.pipeline__core p { color: #b9d0da; margin: 8px auto 0; max-width: 62ch; }

@media (max-width: 900px) {
  .pipeline__row--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pipeline__drop { height: 22px; }
  .pipeline__drop--4, .pipeline__drop--2 { grid-template-columns: 1fr; }
  .pipeline__drop--4 i:nth-child(n+2), .pipeline__drop--2 i:nth-child(n+2) { display: none; }}
@media (max-width: 560px) {
  .pipeline__row--4, .pipeline__row--2 { grid-template-columns: 1fr; }}

/* ---------- Placeholder-Media ---------- */
.placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; min-height: 300px; border-radius: var(--radius);
  background:
    linear-gradient(45deg, rgba(46,125,166,0.06) 25%, transparent 25%) -12px 0,
    linear-gradient(-45deg, rgba(46,125,166,0.06) 25%, transparent 25%) -12px 0,
    linear-gradient(45deg, transparent 75%, rgba(46,125,166,0.06) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(46,125,166,0.06) 75%);
  background-size: 24px 24px; background-color: var(--blue-soft);
  border: 1px dashed var(--blue); color: var(--blue-ink); font-weight: 600; text-align: center; padding: 24px;
}
.placeholder svg { width: 40px; height: 40px; opacity: 0.7; }
.placeholder small { color: var(--muted); font-weight: 500; }

/* ---------- Screenshots (Produktansichten) ---------- */
/* .hero__visual rahmt schon selbst; .shot ist der Rahmen fuer alle uebrigen. */
/* Gleicher Rahmen wie .viz auf der Startseite, damit Datenbilder überall
   gleich auftreten. Der Schatten entfällt, die Kante trägt allein. */
.shot {
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); background: #fff;
}
.shot img, .hero__visual img { width: 100%; height: auto; }

/* ---------- Zitat / Track-Record ---------- */
.quote {
  background: var(--blue-soft); border-left: 4px solid var(--blue);
  border-radius: var(--radius); padding: 30px 34px;
}
.quote p { font-size: 1.25rem; color: var(--navy); font-weight: 600; margin: 0 0 14px; }
.quote cite { color: var(--muted); font-style: normal; font-size: 0.95rem; }

/* ---------- CTA-Banner ---------- */
.cta-banner {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  border-radius: var(--radius); padding: 56px 44px; text-align: center; color: #fff;
}
.cta-banner h2 { color: #fff; }
.cta-banner p { color: #b9d0da; max-width: 620px; margin: 0 auto 28px; font-size: 1.1rem; }
.cta-banner .btn--ghost { color: #fff; border-color: rgba(255,255,255,0.4); }
.cta-banner .btn--ghost:hover { border-color: #fff; color: #fff; }

/* ---------- Kontakt / Formular ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; }}
.field { display: flex; flex-direction: column; gap: 6px; }
.field--full { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: 0.9rem; color: var(--navy); }
.field input, .field select, .field textarea {
  font: inherit; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; color: var(--text); transition: var(--transition);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(46,125,166,0.15);
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 3px solid var(--navy); outline-offset: 2px; box-shadow: none;
}
.field textarea { resize: vertical; min-height: 120px; }
.form-note { font-size: 0.85rem; color: var(--muted); margin-top: 4px; }

/* ---------- FAQ (details/summary, ohne JS bedienbar) ---------- */
.faq { max-width: 820px; margin: 0 auto; }
.faq details {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  margin-bottom: 12px; transition: var(--transition);
}
.faq details[open] { box-shadow: var(--shadow); border-color: #cfd8de; }
.faq summary {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 24px; cursor: pointer; list-style: none;
  font-weight: 600; color: var(--navy); font-size: 1.03rem;
}
/* Standard-Dreieck der Browser entfernen … */
.faq summary::-webkit-details-marker { display: none; }
.faq summary::marker { content: ""; }
/* … und durch ein eigenes Plus/Minus ersetzen */
.faq summary::before {
  content: ""; flex: 0 0 auto; order: 2; margin-left: auto;
  width: 22px; height: 22px; background-repeat: no-repeat; background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e1720c' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  transition: transform var(--transition);
}
.faq details[open] summary::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e1720c' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}
.faq summary:hover { color: var(--blue-ink); }
.faq summary:focus-visible {
  outline: 2px solid var(--blue); outline-offset: -2px; border-radius: var(--radius);
}
.faq__body { padding: 0 24px 22px; color: var(--muted); }
.faq__body p { margin: 0 0 0.9em; font-size: 0.98rem; }
.faq__body p:last-child { margin-bottom: 0; }
.faq__body strong { color: var(--navy); }

/* ---------- Callout / Info-Box ---------- */
/* Orange gehoert dem Aufruf. Der Hinweiskasten traegt jetzt das Teal. */
.callout {
  border-left: 4px solid var(--blue); background: var(--blue-soft);
  padding: 20px 24px; border-radius: 0 var(--radius) var(--radius) 0; margin: 24px 0;
}
.callout p { margin: 0; }
.callout p + p { margin-top: 14px; }

/* ---------- Pledge / Mission ---------- */
.pledge {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 34px; box-shadow: var(--shadow); border-top: 5px solid var(--blue);
}
.pledge ol { padding-left: 20px; }
.pledge li { margin-bottom: 14px; }
.pledge li strong { color: var(--navy); }
/* Selbstverpflichtung links, Grundgesetz-Foto rechts */
.pledge-row { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 40px; align-items: stretch; }
.pledge-row .pledge { margin: 0; }
.pledge-photo { margin: 0; display: flex; flex-direction: column; }
.pledge-photo picture { flex: 1; display: block; min-height: 0; }
.pledge-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%;
  border-radius: var(--radius); box-shadow: var(--shadow); display: block; }
.pledge-photo figcaption { margin-top: 8px; font-size: .75rem; color: var(--muted); }
.pledge-photo figcaption a { color: inherit; }
@media (max-width: 900px) {
  .pledge-row { grid-template-columns: 1fr; gap: 24px; }
  .pledge-photo img { height: auto; max-height: 360px; }
}
/* Ansprechpartner im Kontaktkasten (Demotermin-Seiten) */
.contact-person { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; }
.contact-person img { width: 72px; height: 72px; border-radius: 50%; flex: none; object-fit: cover; }
.contact-person figcaption { font-size: 0.92rem; color: var(--muted); line-height: 1.35; }
.contact-person figcaption strong { display: block; color: var(--navy); font-size: 1rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-deep); color: #a9c1cc; padding: 60px 0 30px; margin-top: 0; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr; gap: 28px; }}
/* Die Rubriken sind h2, damit die Ebenen nicht springen. Die Optik
   bleibt klein und gesperrt, dafür sorgt die Klasse. */
.site-footer .footer__head { color: #fff; font-size: 0.95rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; margin: 0 0 14px; line-height: 1.3; }
.site-footer a { color: #a9c1cc; }
.site-footer a:hover { color: #fff; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
/* Trefferfläche im Abbinder: Polster statt größerer Schrift. */
.site-footer li { margin-bottom: 0; }
.site-footer li > a {
  display: block; padding: 11px 10px; margin-left: -10px;
  border-radius: 7px; transition: var(--transition);
}
.site-footer li > a:hover { background: rgba(255, 255, 255, 0.07); text-decoration: none; }
.site-footer li > .btn { margin-left: 0; }
.site-footer li > .footer__line { display: block; padding: 11px 10px; margin-left: -10px; }
.footer__brand { display: flex; align-items: center; gap: 11px; color: #fff; font-weight: 800; margin-bottom: 14px; }
.footer__claim {
  color: #fff; font-weight: 600; font-size: 0.9rem; letter-spacing: 0.03em;
  margin: -8px 0 14px; opacity: 0.85;
}
.footer__pledge {
  margin-top: 22px; padding: 16px 18px; border-radius: var(--radius);
  background: rgba(255,255,255,0.06); border-left: 3px solid var(--teal-light);
  max-width: 340px;
}
.footer__pledge strong { display: block; color: #fff; margin-bottom: 6px; }
.footer__pledge p { margin: 0 0 8px; font-size: 0.9rem; }
.footer__pledge a { font-weight: 600; display: inline-block; padding: 10px 0; }
.footer__bottom a { display: inline-block; padding: 13px 5px; }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.12); margin-top: 44px; padding-top: 9px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 0.85rem;
}

/* ---------- Fußnoten / Belege ---------- */
sup.fn { font-size: 0.75rem; font-weight: 700; line-height: 0; }
sup.fn a { color: var(--orange-ink); text-decoration: none;
  /* Polster statt größerer Schrift. line-height muss zurückgesetzt werden, sonst
     ist die Inhaltshöhe null und das Polster wirkungslos. Die vollen 44 px sind
     hier bewusst nicht das Ziel: der Marker steht mitten im Satz, ein so hohes
     Ziel würde die Trefferflächen benachbarter Zeilen überlappen. */
  display: inline-block; line-height: 1; padding: 10px 6px; margin: -10px -6px; }
sup.fn a:hover { text-decoration: underline; }
/* Belege stehen zugeklappt in einer Zeile statt über einen halben Bildschirm.
   Ein Klick auf eine Ziffer im Text öffnet sie (initFootnotes in main.js). */
.footnotes { border-top: 1px solid var(--line); padding-top: 10px; max-width: 68ch; }
.footnotes > summary {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 12px 0; list-style: none;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
}
.footnotes > summary::-webkit-details-marker { display: none; }
.footnotes > summary::after {
  content: ""; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: var(--ico-chev) center / contain no-repeat;
  mask: var(--ico-chev) center / contain no-repeat;
  transition: var(--transition);
}
.footnotes[open] > summary::after { transform: rotate(180deg); }
.footnotes > summary:hover { color: var(--navy); }
.footnotes ol { margin: 2px 0 14px; padding-left: 22px; color: var(--muted); font-size: 0.82rem; }
.footnotes li { margin-bottom: 7px; }
.footnotes a { color: var(--muted); }

/* ---------- Terminbuchung (Click-to-load) ---------- */
.cal-embed { position: relative; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--bg-alt); min-height: 640px; }
.cal-embed iframe { width: 100%; height: 660px; border: 0; display: block; }
.cal-consent { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: 14px; padding: 34px; }
.cal-consent .cal-ico { width: 54px; height: 54px; border-radius: 14px; display: flex;
  align-items: center; justify-content: center; background: var(--blue-soft); color: var(--blue); }
.cal-consent .cal-ico svg { width: 28px; height: 28px; }
.cal-consent h3 { margin: 0; }
.cal-consent p { max-width: 400px; color: var(--muted); font-size: 0.9rem; margin: 0; }

/* ---------- Rechtstexte / Langform ---------- */
.legal { max-width: 760px; }
.legal .meta { color: var(--muted); font-size: 0.9rem; margin: -8px 0 28px; }
.legal h2 { font-size: 1.35rem; margin-top: 38px; }
.legal h3 { font-size: 1.05rem; margin-top: 22px; color: var(--navy); }
.legal p, .legal li { color: var(--text); }
.legal ul { padding-left: 1.25rem; margin-bottom: 1rem; }
.legal li { margin-bottom: 0.4rem; }
.legal code { background: var(--bg-alt); padding: 1px 6px; border-radius: 4px; font-size: 0.9em; }
.legal .footer-note { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: 0.9rem; color: var(--muted); }
.legal-block { background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 26px; margin-bottom: 18px; }
.legal-block .label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); margin-bottom: 6px; }
.legal-block p { margin: 0 0 4px; }
/* Gleiche Behandlung wie der Hero der Startseite: weicher Verlauf statt
   hart abgesetztem Graublock, damit der Übergang nicht springt. */
.page-hero { background: linear-gradient(180deg, #fff 0%, var(--bg-alt) 100%); padding: 62px 0 54px; }
.page-hero h1 { max-width: 22ch; }
.page-hero .hero__cta { margin-top: 0; }
.page-hero .lead { margin-bottom: 0; }
.page-hero .eyebrow { margin-bottom: 10px; }
/* Scroll-Animation: greift NUR, wenn JS aktiv ist (<html class="js">).
   Ohne JS bleibt der Inhalt normal sichtbar statt unsichtbar. */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Skip-Link (Tastatur-Navigation) ---------- */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--navy); color: #fff; font-weight: 600;
  padding: 11px 18px; border-radius: var(--radius-sm);
  transition: top var(--transition);
}
.skip-link:focus { top: 12px; text-decoration: none; color: #fff; }

/* ---------- Fallback ohne JavaScript ---------- */
.noscript-note {
  background: var(--navy); color: #fff; margin: 0;
  padding: 14px 24px; font-size: 0.95rem; text-align: center;
}
.noscript-note a { color: #fff; text-decoration: underline; }

/* ---------- Bewegungsreduktion respektieren ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover, .card:hover { transform: none; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important; }
}