/* mehr gefunden — Werbe-Zielseite /gratis-check und Dankeseite /danke-check
   Farbwelt „mehrgefunden-Nacht“ (Entscheidung Alexander, 26.09.2026).

   Aufbau im Direktaufruf-Schema: Wortmarke oben mittig, Zielgruppenzeile,
   Riesen-Überschrift in Versalien mit Markierungsbalken und handgezogener
   Unterstreichung, direkt darunter das Website-Feld mit dem Knopf, darunter die
   Rahmenzeile. Kein Menü im ersten Bildschirm.

   Farben nur über die Variablen unten. Wer eine ändert, misst die Kontraste neu.
   Gemessen am 26.09.2026 (WCAG 2.x, gegen die hellste Stelle des Grunds):
   Bericht gratischeck-neu-bau.md, Abschnitt Kontraste.

   Die Seite /gratis-check lädt nur fonts.css und diese Datei. Die Dankeseite
   lädt zusätzlich style.css; ihre Regeln hier stehen unter body.gc-danke.

   Schrift (Entscheidung Alexander, 26.09.2026, Runde 2): Montserrat für alle
   Überschriften beider Seiten, Inter für den Fließtext. Die Wortmarke
   „mehr gefunden.“ bleibt in Clash Display (Markenzeichen, aus fonts.css).
   Montserrat liegt selbst gehostet in assets/fonts (variabel 100 bis 900,
   Lizenz SIL OFL 1.1, Text daneben in OFL-Montserrat.txt). */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/montserrat-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Grund: tiefes Marken-Navy, abgeleitet von --navy #123a6b */
  --gc-grund: #0a1d38;
  --gc-grund-2: #0d2444;          /* abgesetzte Abschnitte */
  --gc-grund-tief: #071630;       /* Fußzeile, Eingabefelder */
  --gc-schein: rgba(38, 96, 170, .42);   /* Lichtschein von oben, hellste Stelle etwa #163766 */
  --gc-schein-gruen: rgba(61, 220, 151, .07);
  --gc-punkte: rgba(255, 255, 255, .06);
  --gc-linie: rgba(169, 185, 207, .18);
  --gc-karte: rgba(255, 255, 255, .045);
  --gc-karte-rand: rgba(169, 185, 207, .22);

  /* Schrift */
  --gc-text: #f3f6fa;
  --gc-text-2: #c9d6e6;
  --gc-gedaempft: #a9b9cf;
  --gc-platzhalter: #94a6bd;

  /* Signalfarbe: helles mehrgefunden-Grün, gleicher Farbton wie --accent #0a6b43 (155°) */
  --gc-gruen: #3ddc97;
  --gc-gruen-hell: #6ae6b0;
  --gc-auf-gruen: #04182e;        /* Schrift auf Grün, dunkles Navy */

  --gc-feld: #071630;
  --gc-feld-rand: #7f93ad;
  --gc-feld-rand-hover: #a9b9cf;
  --gc-rot: #ff9b8f;
  --gc-rot-flaeche: #2a1320;
  --gc-fehlerkasten: #7a1f1f;

  --gc-glut: 0 12px 34px -14px rgba(61, 220, 151, .6);
  --gc-glut-hover: 0 16px 40px -14px rgba(61, 220, 151, .75);
  --gc-kasten-schein: 0 14px 44px -16px rgba(61, 220, 151, .55);
  --gc-fokus-feld: 0 0 0 3px rgba(61, 220, 151, .32);

  --gc-schrift-titel: "Montserrat", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --gc-schrift-marke: "Clash Display", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --gc-schrift-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --gc-schrift-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --gc-kopf-hoehe: 64px;           /* fest in px: wächst nicht mit der Systemschrift */
  --gc-kopf-grund: rgba(7, 22, 48, .95);
  --gc-rand: clamp(16px, 4vw, 32px);
  --gc-breite: 72rem;
}

/* Gegenstück zum FOUC-Wächter im Kopf der Seite */
html body { visibility: visible; animation: none; }
:root::before { content: none; animation: none; }

/* ======================================================================
   Seite /gratis-check (body.gc)
   ====================================================================== */
.gc, .gc *, .gc *::before, .gc *::after { box-sizing: border-box; }
html:has(body.gc) { background: var(--gc-grund); -webkit-text-size-adjust: 100%; overflow-x: clip; }
body.gc {
  margin: 0; background: var(--gc-grund); color: var(--gc-text);
  font-family: var(--gc-schrift-text); font-size: 1rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
.gc img { display: block; max-width: 100%; height: auto; }
/* Rückstellung ohne Gewicht (:where), damit die Klassenregeln unten gewinnen */
:where(.gc) :where(h1, h2, h3, p, ul, ol, figure, address) { margin: 0; padding: 0; }
:where(.gc) :where(ul, ol) { list-style: none; }
.gc a { color: var(--gc-text); text-underline-offset: .18em; }
.gc a:hover { color: var(--gc-gruen); }
.gc :focus-visible { outline: 3px solid var(--gc-gruen); outline-offset: 3px; border-radius: 4px; }
.gc [hidden] { display: none !important; }
/* Große Systemschrift auf schmalen Geräten: Rasterzellen dürfen schrumpfen, lange Wörter brechen */
body.gc { overflow-wrap: break-word; }
.gc-bekommen > *, .gc-schritte > *, .gc-passt > *, .gc-faq > *, .gc-fuss__innen > * { min-width: 0; }
.gc a[href^="mailto:"] { overflow-wrap: anywhere; }
@media (max-width: 420px) {
  .gc h2, .gc h3, .gc-faq summary { -webkit-hyphens: auto; hyphens: auto; }
}

.gc-nur-vorleser {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.gc .hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.gc-seite { width: 100%; max-width: var(--gc-breite); margin-inline: auto; padding-inline: var(--gc-rand); }

/* ---------- Sprungmarke: per transform versteckt, wächst mit der Systemschrift mit ---------- */
.gc-sprung {
  position: absolute; left: 12px; top: 12px; z-index: 100;
  transform: translateY(calc(-100% - 24px));
  background: var(--gc-gruen); color: var(--gc-auf-gruen);
  padding: .6rem 1rem; border-radius: 10px;
  font: 700 1rem/1.2 var(--gc-schrift-text); text-decoration: none;
}
.gc-sprung:focus { transform: none; outline: none; box-shadow: 0 0 0 3px var(--gc-grund), 0 0 0 6px var(--gc-gruen); color: var(--gc-auf-gruen); }

/* ---------- Kopf: nur die Wortmarke, mittig ---------- */
.gc-kopf { position: absolute; left: 0; right: 0; top: 0; z-index: 10; }
.gc-kopf__innen {
  display: flex; align-items: center; justify-content: center;
  min-height: var(--gc-kopf-hoehe); padding-inline: var(--gc-rand);
}
.gc-marke {
  display: inline-flex; align-items: center; gap: .4em;
  font: 600 min(1.2rem, 7vw)/1 var(--gc-schrift-marke); letter-spacing: 0; word-spacing: .1em;
  color: var(--gc-text); text-decoration: none; white-space: nowrap;
}
.gc a.gc-marke:hover { color: var(--gc-text); }
.gc-marke img { width: auto; height: 1.45em; flex: none; }
.gc-marke__punkt { color: var(--gc-gruen); }

/* ---------- Kopfleiste (Entscheidung Alexander, 26.09.2026, Runde 2) ----------
   Oben im Held steht nur die Wortmarke. Ist die Zeile mit Website-Feld und
   „Jetzt prüfen“ im Held oben aus dem Bild, setzt gratischeck.js die Klasse
   gc-kopf-kompakt am body: Die Leiste wird fest, links die Wortmarke, rechts
   derselbe Knopf, der zurück ins Feld im Held führt. Keine Menüpunkte.
   Solange das Schlussformular im Bild ist, bleibt sie weg (ein Einstieg je
   Bildschirm). Höhe fest 64 px; Marke und Knopf sind zusätzlich über vw
   gedeckelt, damit beide bei großer Systemschrift auch auf 320 px in eine Zeile
   passen. Ohne JavaScript bleibt es bei der Wortmarke oben. */
.gc-kopf .gc-kopf__knopf { display: none; }
.gc-kopf-kompakt .gc-kopf {
  position: fixed; height: var(--gc-kopf-hoehe);
  background: var(--gc-kopf-grund); border-bottom: 1px solid var(--gc-linie);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .8);
  animation: gc-kopf-ein .28s ease-out both;
}
@supports (backdrop-filter: blur(8px)) {
  .gc-kopf-kompakt .gc-kopf { backdrop-filter: saturate(1.3) blur(14px); -webkit-backdrop-filter: saturate(1.3) blur(14px); }
}
.gc-kopf-kompakt .gc-kopf__innen {
  justify-content: space-between; gap: 12px;
  height: var(--gc-kopf-hoehe); min-height: 0; max-width: var(--gc-breite); margin-inline: auto;
}
.gc-kopf-kompakt .gc-kopf .gc-marke { font-size: min(1.15rem, 5vw); min-width: 0; }
.gc-kopf-kompakt .gc-kopf .gc-kopf__knopf { display: inline-flex; }
.gc .gc-kopf .gc-kopf__knopf {
  width: auto; flex: none; min-height: 44px; max-height: 52px; padding: 0 min(1.1em, 4vw);
  font-size: min(.95rem, 4vw); letter-spacing: .04em; border-radius: 12px; box-shadow: none;
  white-space: nowrap;
}
.gc .gc-kopf .gc-kopf__knopf:hover { transform: none; box-shadow: none; }
@media (max-width: 480px) {
  /* Schmal: Pfeil weg, damit Wortmarke und Knopf auch bei 150 % Systemschrift nebeneinander passen */
  .gc .gc-kopf .gc-kopf__knopf { letter-spacing: .02em; padding: 0 min(.9em, 3.2vw); }
  .gc .gc-kopf .gc-kopf__knopf svg { display: none; }
}
.gc .gc-kopf .gc-kopf__knopf:focus-visible { box-shadow: 0 0 0 3px var(--gc-grund-tief), 0 0 0 6px var(--gc-gruen); }
@keyframes gc-kopf-ein { from { transform: translateY(-100%); } to { transform: none; } }

/* Angesprungene Anker und Felder rutschen nie unter die Leiste */
html:has(body.gc) { scroll-padding-top: calc(var(--gc-kopf-hoehe) + 16px); }
.gc [id], .gc-feld { scroll-margin-top: calc(var(--gc-kopf-hoehe) + 16px); }

/* ---------- Held ---------- */
.gc-held {
  position: relative; isolation: isolate; text-align: center;
  padding: calc(var(--gc-kopf-hoehe) + clamp(.5rem, 3.5vw, 3rem)) 0 clamp(2.6rem, 7vw, 5.5rem);
  border-bottom: 1px solid var(--gc-linie);
}
.gc-held::before {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 55% at 50% 0%, var(--gc-schein), transparent 72%),
    radial-gradient(36% 28% at 50% 42%, var(--gc-schein-gruen), transparent 72%);
}
.gc-held::after {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background-image: radial-gradient(var(--gc-punkte) 1px, transparent 1.2px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 16%, #000 0%, transparent 75%);
  mask-image: radial-gradient(70% 60% at 50% 16%, #000 0%, transparent 75%);
}
.gc-held__innen { display: flex; flex-direction: column; align-items: center; }
/* Umschlag nur fürs Handy. Ab 640 px erzeugt er keine eigene Box. */
.gc-held__kern { display: contents; }

.gc-held__zielgruppe {
  font: 600 clamp(1rem, 2.6vw, 1.22rem)/1.4 var(--gc-schrift-text); letter-spacing: 0;
  color: var(--gc-text); max-width: 36ch; margin: 0 0 clamp(.8rem, 2.6vw, 1.5rem); text-wrap: balance;
}
/* Handy: erster Bildschirm nur Dachzeile, Überschrift, Feld und Knopf.
   Der freie Raum teilt sich über der Dachzeile und unter dem Knopf.
   Die Zeilenhöhe in Dachzeile und Überschrift ist hier etwas großzügiger.
   Ab 640 px bleibt der Held in den Abständen wie bisher. */
@media (max-width: 639px) {
  .gc-held { padding-top: 0; }
  .gc-held__kern {
    display: flex; flex-direction: column; align-items: center; align-self: stretch;
    width: 100%; box-sizing: border-box; min-height: 100svh;
    padding-top: calc((var(--gc-kopf-hoehe) + 1.45 * min(1.2rem, 7vw)) / 2);
  }
  .gc-held__kern::before,
  .gc-held__kern::after { content: ""; flex: 1 1 0; width: 100%; min-height: 0; }
  .gc-held__zielgruppe { line-height: 1.55; margin-bottom: clamp(1.2rem, 3.6vw, 1.8rem); }
}

/* Überschrift: Versalien per CSS, im Quelltext normale Schreibung.
   min(…, 12.4vw) deckelt die Größe auf schmalen Geräten mit großer Systemschrift. */
.gc-held__titel {
  font-family: var(--gc-schrift-titel); font-weight: 900;
  font-size: min(clamp(2.2rem, 9.4vw, 4.7rem), 11.4vw);
  line-height: 1.04; letter-spacing: -.015em; text-transform: uppercase;
  color: var(--gc-text); max-width: 12.5em; margin: 0 0 clamp(2.1rem, 5.4vw, 3.2rem);
  text-wrap: balance; overflow-wrap: break-word;
}
@media (max-width: 639px) {
  .gc-held__titel { line-height: 1.16; margin-bottom: clamp(2.35rem, 6vw, 3.4rem); }
}
/* Markierungsbalken: genau einer, auf der Zeitangabe */
.gc-kasten {
  display: inline-block; white-space: nowrap;
  background: var(--gc-gruen); color: var(--gc-auf-gruen);
  padding: .07em .18em .01em; margin: .04em 0 .08em; border-radius: .1em;
  transform: rotate(-1.6deg);
  box-shadow: var(--gc-kasten-schein);
}
/* Handgezogene Unterstreichung: genau ein Wort, zwei Striche.
   Grundzustand ist der Endzustand (ohne JavaScript, bei „Bewegung reduzieren“).
   Nur mit gratischeck.js (Klasse gc-js) wird der Strich eingezeichnet. */
.gc-strich { position: relative; display: inline-block; white-space: nowrap; }
.gc-strich svg {
  position: absolute; left: -3%; width: 106%; top: 88%; height: auto;
  overflow: visible; color: var(--gc-gruen); pointer-events: none;
}
.gc-strich path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 2; stroke-dashoffset: 0; }
.gc-js .gc-strich path { stroke-dashoffset: 1; animation: gc-strich .75s cubic-bezier(.3, .7, .4, 1) .95s forwards; }
.gc-js .gc-strich path + path { animation-delay: 1.45s; animation-duration: .5s; }
@keyframes gc-strich { to { stroke-dashoffset: 0; } }

/* ---------- Formular (Held und Schluss) ---------- */
.gc-aktion { width: 100%; max-width: 38rem; margin: 0 auto; scroll-margin-top: calc(var(--gc-kopf-hoehe) + 16px); text-align: left; }
.gc-form { width: 100%; }
.gc-label {
  display: block; margin: 0 0 .4rem;
  font: 600 .95rem/1.35 var(--gc-schrift-text); color: var(--gc-text);
}
.gc-zeile { display: flex; flex-direction: column; gap: .7rem; }
.gc-feld {
  display: block; width: 100%; min-height: 60px; margin: 0; padding: .7rem 1rem;
  font: 500 1.1rem/1.3 var(--gc-schrift-text); color: var(--gc-text);
  background: var(--gc-feld); border: 1.5px solid var(--gc-feld-rand); border-radius: 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none; appearance: none;
}
.gc-feld::placeholder { color: var(--gc-platzhalter); opacity: 1; }
.gc-feld:hover { border-color: var(--gc-feld-rand-hover); }
.gc .gc-feld:focus, .gc .gc-feld:focus-visible { outline: none; border-color: var(--gc-gruen); box-shadow: var(--gc-fokus-feld); }
.gc .gc-feld[aria-invalid="true"] { border-color: var(--gc-rot); background: var(--gc-rot-flaeche); }
.gc .gc-feld[aria-invalid="true"]:focus { border-color: var(--gc-rot); box-shadow: 0 0 0 3px rgba(255, 155, 143, .3); }
.gc-zeile .gc-feldfehler { margin: -.25rem 0 0; }
.gc-feldfehler { margin: .45rem 0 0; font: 600 .92rem/1.4 var(--gc-schrift-text); color: var(--gc-rot); }

/* Knopf im Imperativ */
.gc-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  width: 100%; min-height: 60px; margin: 0; padding: .9em clamp(.8em, 4vw, 1.4em);
  background: var(--gc-gruen); color: var(--gc-auf-gruen);
  border: 2px solid var(--gc-gruen); border-radius: 14px;
  font: 700 clamp(1.05rem, 3.4vw, 1.15rem)/1.15 var(--gc-schrift-text); letter-spacing: .05em; text-transform: uppercase;
  text-decoration: none; text-align: center; cursor: pointer;
  box-shadow: var(--gc-glut);
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.gc a.gc-knopf { color: var(--gc-auf-gruen); }
.gc .gc-knopf:hover { background: var(--gc-gruen-hell); border-color: var(--gc-gruen-hell); color: var(--gc-auf-gruen); transform: translateY(-1px); box-shadow: var(--gc-glut-hover); }
.gc-knopf:active { transform: translateY(0); }
.gc .gc-knopf:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--gc-grund), 0 0 0 6px var(--gc-gruen); }
.gc-knopf svg { width: 1.1em; height: 1.1em; flex: none; transition: transform .15s ease; }
.gc-knopf:hover svg { transform: translateX(3px); }
.gc-knopf[disabled] { opacity: .6; cursor: progress; transform: none; box-shadow: none; }
@media (max-width: 480px) { .gc-knopf { letter-spacing: .03em; gap: .4em; } }

/* Schritt 1: Knopf „Jetzt prüfen“ gibt es nur mit JavaScript (Klasse gc-js).
   Ohne JavaScript stehen beide Felder und der Absende-Knopf sofort da. */
.gc-weiter { display: none; }
.gc-js .gc-weiter { display: inline-flex; }
.gc-js .gc-form.ist-schritt2 .gc-weiter { display: none; }
.gc-nur-mit-js { display: none; }
.gc-js .gc-nur-mit-js { display: block; }

/* Puls am Heldknopf: nur der Knopf im Heldformular, alle 2 Sekunden
   (Alexander, 29.09.2026; vorher 3 Sekunden). Die Bewegung selbst bleibt
   0,9 Sekunden und geht sanft auf 104 %. Nur transform, also kein Layout-Sprung.
   Ruhe bei Hover, Tastaturfokus und sobald das Heldformular den Fokus hat;
   bei „Bewegung reduzieren“ gar nicht. */
@media (prefers-reduced-motion: no-preference) {
  .gc-js .gc-form[data-gc-ort="hero"] .gc-weiter { animation: gc-puls 2s ease-in-out 2s infinite; }
  .gc-js .gc-form[data-gc-ort="hero"] .gc-weiter:hover,
  .gc-js .gc-form[data-gc-ort="hero"] .gc-weiter:focus-visible,
  .gc-js .gc-form[data-gc-ort="hero"]:focus-within .gc-weiter { animation: none; }
}
@keyframes gc-puls {
  0%, 45%, 100% { transform: scale(1); }
  22.5% { transform: scale(1.04); }
}

.gc-schritt2 { margin-top: 1.1rem; }
.gc-js .gc-form:not(.ist-schritt2) .gc-schritt2 { display: none; }
.gc-js .gc-form.ist-schritt2 .gc-schritt2 { animation: gc-ein .32s ease-out both; }
@keyframes gc-ein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.gc-schritt2__kopf {
  margin: 0 0 .7rem; padding: .7rem .9rem; border-radius: 12px;
  background: rgba(61, 220, 151, .1); border: 1px solid rgba(61, 220, 151, .35);
  font: 600 1rem/1.4 var(--gc-schrift-text); color: var(--gc-text);
}
.gc-schritt2__kopf b { color: var(--gc-gruen); font-weight: 700; }

.gc-status { margin: .7rem 0 0; font: 600 .95rem/1.45 var(--gc-schrift-text); color: var(--gc-rot); }
.gc-zusage { margin: .8rem 0 0; font-size: .95rem; line-height: 1.5; color: var(--gc-text-2); }
.gc-zusage b { color: var(--gc-text); }
.gc-hinweis { margin: .55rem 0 0; font-size: .84rem; line-height: 1.5; color: var(--gc-gedaempft); }
.gc-hinweis a { color: var(--gc-text-2); }

/* ---------- Newsletter-Häkchen (seit 27.09.2026) ----------
   Eigenes, nicht vorangekreuztes Kästchen, optisch vom Absendeknopf abgesetzt.
   Anrede und Nachname erscheinen erst mit dem Häkchen, per CSS (:checked ~),
   also auch ohne JavaScript. Die Tippfläche ist das ganze Label. */
.gc-nl {
  display: grid; grid-template-columns: auto 1fr; column-gap: .75rem; align-items: start;
  margin: .95rem 0 0; padding: .85rem .95rem; border-radius: 12px;
  background: var(--gc-karte); border: 1px solid var(--gc-karte-rand);
}
.gc-nl__haken {
  grid-column: 1; grid-row: 1; width: 24px; height: 24px; margin: .1rem 0 0;
  accent-color: var(--gc-gruen); cursor: pointer;
}
.gc-nl__text {
  grid-column: 2; grid-row: 1; display: block; min-height: 44px; cursor: pointer;
  font-size: .9rem; line-height: 1.5; color: var(--gc-text-2);
}
.gc-nl__haken:checked + .gc-nl__text { color: var(--gc-text); }
.gc-nl__anrede { display: none; grid-column: 1 / -1; margin-top: .75rem; }
.gc-nl__haken:checked ~ .gc-nl__anrede { display: block; }
.gc-nl__frage { margin: 0 0 .45rem; font: 600 .9rem/1.4 var(--gc-schrift-text); color: var(--gc-text); }
.gc-nl__frage span { font-weight: 500; color: var(--gc-gedaempft); }
/* Flex statt Raster: Die Anrede nimmt die Breite ihres längsten Eintrags
   („keine Angabe“), der Nachname den Rest. Bei großer Schrift oder schmalem
   Bildschirm rutscht der Nachname in eine eigene Zeile, statt zu schrumpfen. */
.gc-nl__felder { display: flex; flex-wrap: wrap; gap: .6rem; }
.gc-nl__feld { min-width: 0; }
.gc-nl__feld--anrede { flex: 0 0 auto; }
.gc-nl__feld--anrede .gc-feld { width: auto; }
.gc-nl__feld:not(.gc-nl__feld--anrede) { flex: 1 1 9rem; }
.gc-nl__feld:not(.gc-nl__feld--anrede) .gc-feld { width: 100%; }
.gc-nl__label { display: block; margin: 0 0 .25rem; font: 500 .82rem/1.3 var(--gc-schrift-text); color: var(--gc-gedaempft); }
.gc .gc-feld--klein { min-height: 48px; padding: .5rem .75rem; font-size: 1rem; border-radius: 10px; }
.gc select.gc-feld {
  padding-right: 2.2rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%23a9b9cf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .7rem center; background-size: 1.1rem;
}
.gc select.gc-feld option { background: var(--gc-feld); color: var(--gc-text); }
.gc-nl__freiwillig { grid-column: 1 / -1; margin: .6rem 0 0; font-size: .8rem; line-height: 1.45; color: var(--gc-gedaempft); }
.gc-nl__freiwillig a { color: var(--gc-text-2); }

/* Kompakt nur in den Formularen des Gratis-Checks: Kurzzeile am Häkchen,
   der Rest der Einwilligung darunter kleiner. /newsletter bleibt beim
   bisherigen Block, die Regeln hier greifen dort nicht. */
form[data-gc-form] .gc-nl { margin: .55rem 0 .65rem; padding: .6rem .75rem; }
form[data-gc-form] .gc-nl__kurz {
  display: block; font-weight: 700; font-size: 1rem; line-height: 1.35; color: var(--gc-text);
}
form[data-gc-form] .gc-nl__rest {
  display: block; margin-top: .15rem; font-weight: 400; font-size: .8rem; line-height: 1.45; color: var(--gc-text-2);
}
form[data-gc-form] .gc-schritt2 > .gc-knopf { margin-top: 0; }

/* Seiten der Newsletter-Anmeldung (/newsletter, Bestätigung, Abmeldung) */
.gc-nl-seite .gc-held { min-height: 100vh; min-height: 100svh; }
.gc-nl-seite .gc-held__innen { max-width: 40rem; text-align: left; }
/* Der Held zentriert seine Kinder (align-items: center). Kurze Überschriften wie
   „Sie sind abgemeldet.“ rutschten dadurch in die Mitte, lange blieben links:
   Kicker und Überschrift nehmen hier immer die volle Breite, also immer links. */
.gc-nl-seite .gc-kicker, .gc-nl-seite .gc-nl-titel { align-self: stretch; }
.gc-nl-seite .gc-marke { display: inline-flex; margin-bottom: 2rem; }
.gc-nl-titel { margin: 0 0 .8rem; font: 800 clamp(1.7rem, 6vw, 2.4rem)/1.15 var(--gc-schrift-titel); color: var(--gc-text); }
.gc-nl-seite .gc-lead { margin: 0 0 1.2rem; color: var(--gc-text-2); }
.gc-nl-knopf { width: auto; margin-top: .4rem; }
.gc-nl-fussnote { margin-top: 2.4rem; }
.gc-nl-seite .gc-nl { margin-top: 1rem; }
.gc-nl--pflicht .gc-nl__anrede { display: block; }
.gc-erfolg {
  margin: 0; padding: 1rem 1.1rem; border-radius: 14px;
  background: #0d2b25; border: 1px solid #1d5a46; border-left: 4px solid var(--gc-gruen);
  color: var(--gc-text); font-size: 1rem; line-height: 1.5;
}
.gc-erfolg b { display: block; font: 800 1.15rem/1.3 var(--gc-schrift-titel); color: var(--gc-gruen); margin-bottom: .2rem; }
.gc .gc-erfolg:focus { outline: none; box-shadow: 0 0 0 2px var(--gc-grund), 0 0 0 5px var(--gc-gruen); }

/* Fehlerkasten für den Weg ohne JavaScript: /api/lead leitet auf #fehler um */
.gc .form-fehlerbox { display: none; }
.gc .form-fehlerbox:target {
  display: block; margin: 0 0 1rem; padding: .8rem 1rem; border-radius: 12px;
  background: var(--gc-fehlerkasten); color: #fff; font-size: .95rem; line-height: 1.5; text-align: left;
  scroll-margin-top: calc(var(--gc-kopf-hoehe) + 16px);
}

@media (min-width: 640px) {
  .gc-zeile { flex-direction: row; flex-wrap: wrap; align-items: stretch; }
  .gc-zeile .gc-feldfehler { order: 3; flex: 0 0 100%; margin: -.2rem 0 0; }
  .gc-zeile .gc-feld { flex: 1 1 0; width: auto; min-width: 0; }
  .gc-zeile .gc-knopf { flex: none; width: auto; }
}
@media (min-width: 1024px) {
  .gc-held .gc-aktion { max-width: 42rem; }
  .gc-feld, .gc-knopf { min-height: 66px; }
  .gc-feld { font-size: 1.18rem; padding-inline: 1.15rem; }
  .gc-label { font-size: 1rem; }
}

/* ---------- Rahmenzeile ---------- */
.gc-rahmen { margin: 1.1rem 0 0; font-size: clamp(.95rem, 2.6vw, 1.02rem); line-height: 1.6; color: var(--gc-text-2); }
.gc-rahmen span { white-space: nowrap; }
.gc-rahmen i { font-style: normal; color: var(--gc-gruen); padding: 0 .1em; }
.gc-rahmen .gc-rahmen__zeit { display: block; white-space: normal; font-size: .9em; color: var(--gc-gedaempft); }
.gc-bereich.ist-schritt2 > .gc-rahmen { display: none; }

/* Einfarbzeichen 18px, selbst gehostet, derselbe Filter wie der Streifen
   auf der Startseite. Alexander 29.09.2026: Zeichen neben den Namen.
   Der grüne Punkt bleibt bei den drei gemessenen Systemen. Claude bleibt
   ohne Punkt und in der Deckkraft zurückgenommen. */
.gc-ki { width: 100%; max-width: 40rem; margin: 1.25rem auto 0; text-align: center; }
.gc-ki__satz {
  margin: 0; font: 600 clamp(.92rem, 2.6vw, 1.02rem)/1.45 var(--gc-schrift-text);
  color: var(--gc-text-2); text-wrap: balance;
}
.gc-ki__zusatz {
  margin: .3rem 0 0; font: 500 .82rem/1.4 var(--gc-schrift-text); color: var(--gc-gedaempft);
}
.gc-ki__marken {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem .45rem;
  margin: .75rem 0 0; padding: 0; list-style: none;
}
.gc-ki__marken li {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  margin: 0; max-width: 100%;
  padding: .42rem .7rem; border: 1px solid var(--gc-karte-rand); border-radius: 999px;
  background: var(--gc-karte);
  font: 700 clamp(.72rem, 3.4vw, .88rem)/1.15 var(--gc-schrift-titel);
  letter-spacing: .03em; color: var(--gc-text); white-space: nowrap;
}
.gc-ki__marken li:not(.gc-ki__marke--doku)::before {
  content: ""; width: .42em; height: .42em; flex: none; border-radius: 50%;
  background: var(--gc-gruen);
}
.gc .gc-ki__zeichen {
  width: 18px; height: 18px; flex: none;
  filter: brightness(0) invert(1); opacity: .95;
}
.gc-ki__marke--doku { color: var(--gc-gedaempft); font-weight: 600; letter-spacing: .02em; }
.gc .gc-ki__marke--doku .gc-ki__zeichen { opacity: .62; }
@media (max-width: 420px) {
  .gc-ki__marken { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gc-ki__marken li { white-space: nowrap; letter-spacing: 0; padding-inline: .35rem; font-size: .7rem; }
}
@media (max-width: 360px) {
  .gc .gc-ki__zeichen { width: 14px; height: 14px; }
  .gc-ki__marken li { padding-inline: .22rem; font-size: .64rem; gap: .22em; }
}

/* ---------- Abschnitte unter dem Held ---------- */
.gc-abschnitt { padding: clamp(3.2rem, 8vw, 6rem) 0; border-bottom: 1px solid var(--gc-linie); }
.gc-abschnitt--ton { background: var(--gc-grund-2); }
.gc-abschnitt__kopf { max-width: 44rem; margin: 0 0 clamp(1.6rem, 4vw, 2.6rem); }
.gc-abschnitt__kopf--mitte { margin-inline: auto; text-align: center; }
.gc-kicker {
  margin: 0 0 .8rem; font: 500 .78rem/1.4 var(--gc-schrift-mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--gc-gruen);
}
.gc h2 {
  font: 800 clamp(1.6rem, 4.4vw, 2.6rem)/1.1 var(--gc-schrift-titel); letter-spacing: -.01em; text-transform: uppercase;
  color: var(--gc-text); margin: 0 0 .9rem; text-wrap: balance;
}
.gc-lead { font-size: clamp(1rem, 2vw, 1.12rem); line-height: 1.65; color: var(--gc-text-2); }
.gc-lead strong { color: var(--gc-text); }
.gc h3 { font: 700 1.14rem/1.3 var(--gc-schrift-titel); letter-spacing: -.005em; color: var(--gc-text); margin: 0 0 .45rem; }
:where(.gc-abschnitt) p { color: var(--gc-text-2); }

/* Rückweg zum Feld im Held: zählt als Wiederholung des Einstiegs */
.gc-weiter-link { display: flex; flex-direction: column; align-items: center; gap: .6rem; margin-top: clamp(2rem, 5vw, 3rem); text-align: center; }
.gc-weiter-link .gc-knopf { width: 100%; max-width: 24rem; }
.gc-weiter-link p { font-size: .92rem; color: var(--gc-gedaempft); }

/* Was Sie bekommen */
.gc-bekommen { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.6rem, 4vw, 3.5rem); align-items: center; }
@media (max-width: 900px) { .gc-bekommen { grid-template-columns: 1fr; } }
.gc-bericht { margin: 0; }
.gc-bericht__bild { display: block; border-radius: 14px; overflow: hidden; background: #eef2f7; border: 1px solid var(--gc-karte-rand); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); }
.gc-bericht__bild img { width: 100%; height: auto; }
.gc-bericht figcaption { margin-top: .7rem; font-size: .88rem; line-height: 1.5; color: var(--gc-gedaempft); }
.gc-bericht figcaption b { color: var(--gc-text); font-weight: 600; }
.gc-haken { display: grid; gap: 1rem; }
.gc-haken li { position: relative; padding-left: 2.1rem; font-size: 1rem; line-height: 1.55; color: var(--gc-text-2); }
.gc-haken li b { color: var(--gc-text); }
.gc-haken li::before {
  content: ""; position: absolute; left: 0; top: .2em; width: 1.3rem; height: 1.3rem; border-radius: 50%;
  background: var(--gc-gruen);
}
.gc-haken li::after {
  content: ""; position: absolute; left: .4rem; top: .5em; width: .5rem; height: .28rem;
  border-left: 2px solid var(--gc-auf-gruen); border-bottom: 2px solid var(--gc-auf-gruen); transform: rotate(-45deg);
}

/* Ablauf */
.gc-schritte { counter-reset: s; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 3vw, 1.6rem); }
@media (max-width: 860px) { .gc-schritte { grid-template-columns: 1fr; } }
.gc-schritte li {
  counter-increment: s; position: relative; padding: 1.4rem 1.3rem 1.3rem 4.2rem;
  background: var(--gc-karte); border: 1px solid var(--gc-karte-rand); border-radius: 14px;
}
.gc-schritte h3 { padding-top: .2rem; }
.gc-ganz { white-space: nowrap; }
.gc-schritte li::before {
  content: counter(s); position: absolute; left: 1.2rem; top: 1.25rem;
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--gc-gruen); color: var(--gc-auf-gruen); font: 800 1.05rem/1 var(--gc-schrift-titel);
}
.gc-schritte p { font-size: .98rem; line-height: 1.6; }

/* Für wen */
.gc-passt { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 3vw, 1.6rem); }
@media (max-width: 800px) { .gc-passt { grid-template-columns: 1fr; } }
.gc-passt__karte { padding: 1.4rem 1.4rem 1.3rem; border-radius: 14px; background: var(--gc-karte); border: 1px solid var(--gc-karte-rand); }
.gc-passt__karte--ja { border-top: 4px solid var(--gc-gruen); }
.gc-passt__karte--nein { border-top: 4px solid var(--gc-feld-rand); }
.gc-passt__karte ul { display: grid; gap: .8rem; margin-top: .6rem; }
.gc-passt__karte li { font-size: .98rem; line-height: 1.58; color: var(--gc-text-2); }
.gc-passt__karte li b { color: var(--gc-text); }
.gc-passt__karte .gc-branchen { display: flex; flex-wrap: wrap; gap: .45rem; margin: .6rem 0 .2rem; }
.gc-passt__karte .gc-branchen li { padding: .3em .8em; border-radius: 999px; border: 1px solid rgba(61, 220, 151, .45); color: var(--gc-text); font-size: .9rem; line-height: 1.4; }

/* ---------- Bilder unter dem Held (Auftrag check-bilder, 30.09.2026) ---------- */
/* Fünf Illustrationen im Bildstil der Startseite: eine im Abschnitt Problem, drei im Ablauf, eine bei Für wen.
   Sie behalten ihren hellen Papiergrund (#fbf9f6) und stehen als helle Tafeln auf dem Navy der Seite,
   gerundet und mit Schatten wie der Beispielbericht (.gc-bericht__bild). Das Seitenverhältnis ist fest
   (4 / 3 und 3 / 2): die Tafel hält den Platz frei, bevor das Bild geladen ist, nichts springt.
   Die Bilder sind Schmuck (alt leer), der Text daneben sagt dasselbe. Erscheinen und Zoom: Abschnitt Bewegung. */
.gc-bild {
  display: block; overflow: hidden; aspect-ratio: 4 / 3;
  border-radius: 14px; border: 1px solid var(--gc-karte-rand);
  background: #fbf9f6; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7);
}
.gc-bild--32 { aspect-ratio: 3 / 2; }
.gc-bild picture { display: block; }
.gc-bild img { width: 100%; height: auto; }

/* Problem: Abschnittskopf und Bild in einem Rahmen. Schmal steht das Bild nach dem Einleitungsabsatz
   (ab 640 px höchstens 30rem breit und mittig), ab 900 px in zwei Spalten: Kopf links, Bild rechts,
   vertikal mittig. */
.gc-kopfbild { margin-bottom: clamp(1.6rem, 4vw, 2.6rem); }
.gc-kopfbild > * { min-width: 0; }
.gc-kopfbild > .gc-bild { max-width: 30rem; margin-inline: auto; }
@media (max-width: 639px) { .gc-kopfbild > .gc-bild { max-width: none; } }
@media (min-width: 900px) {
  .gc-kopfbild { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
  .gc-kopfbild > .gc-abschnitt__kopf { max-width: none; margin-bottom: 0; }
  .gc-kopfbild > .gc-bild { max-width: none; margin-inline: 0; }
}

/* Ablauf: jede Schrittkarte zeigt oben ihr Bild über die volle Kartenbreite (obere Ecken wie die Karte).
   Nummernkreis, Überschrift und Text stehen darunter in .gc-schritt__text; der Zähler s läuft im li weiter.
   Von 640 bis 860 px (eine Spalte) steht das Bild links neben dem Text, damit es nicht über die ganze
   Breite wächst. */
.gc-schritte li { padding: 0; overflow: hidden; }
.gc-schritte li::before { content: none; }
.gc-schritte .gc-bild { border: 0; border-radius: 0; box-shadow: none; }
.gc-schritt__text { position: relative; padding: 1.4rem 1.3rem 1.3rem 4.2rem; }
.gc-schritt__text::before {
  content: counter(s); position: absolute; left: 1.2rem; top: 1.25rem;
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--gc-gruen); color: var(--gc-auf-gruen); font: 800 1.05rem/1 var(--gc-schrift-titel);
}
@media (min-width: 640px) and (max-width: 860px) {
  .gc-schritte li { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); align-items: center; }
  .gc-schritte .gc-bild { margin: 1rem 0 1rem 1rem; border-radius: 10px; }
}

/* Für wen: das Bild steht im Raster der Karten. Bis 639 px nach der Überschrift in voller Breite,
   von 640 bis 1119 px mittig über den Karten (höchstens 28rem), ab 1120 px als erste von drei Spalten
   (so bleiben die beiden Karten mindestens etwa 300 px breit). */
.gc-passt > .gc-bild { grid-column: 1 / -1; width: 100%; max-width: 28rem; margin-inline: auto; }
@media (max-width: 639px) { .gc-passt > .gc-bild { max-width: none; } }
@media (min-width: 1120px) {
  .gc-passt { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); }
  .gc-passt > .gc-bild { grid-column: auto; max-width: none; margin-inline: 0; align-self: center; }
}
/* ---------- Ende Bilder unter dem Held ---------- */

/* Problem und Nutzen: Karten im Raster (Auftrag mehrwert, 27.09.2026).
   Nutzen-Karten: Ergebniszeile als h3 zuerst, das Merkmal als Beleg darunter. */
.gc-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: clamp(1rem, 3vw, 1.4rem); }
.gc-karten > *, .gc-wert > * { min-width: 0; }
.gc-karte { padding: 1.4rem 1.4rem 1.3rem; border-radius: 14px; background: var(--gc-karte); border: 1px solid var(--gc-karte-rand); }
.gc-karte p { font-size: .98rem; line-height: 1.62; }
.gc-karte--nutzen { border-top: 4px solid var(--gc-gruen); }

/* Beispielrechnung im Problem-Abschnitt (Wunsch Alexander, 27.09.2026, Runde 2):
   derselbe Rechner wie auf der Startseite, im Look dieser Seite. Ohne JavaScript
   ist der Regler ausgeblendet und die Beispielwerte stehen fest (js/rechner.js
   setzt ist-bereit). Die Balken wachsen beim Erscheinen (Abschnitt Bewegung). */
.gc-rechner {
  margin-top: clamp(2rem, 5vw, 3rem); padding: clamp(1.3rem, 3.5vw, 2.4rem);
  border-radius: 14px; background: var(--gc-karte); border: 1px solid var(--gc-karte-rand);
}
.gc-rechner__kicker { margin: 0 0 .5rem; font: 500 .74rem/1.4 var(--gc-schrift-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gc-gruen); }
.gc .gc-rechner h3 { font-size: clamp(1.2rem, 3vw, 1.45rem); -webkit-hyphens: manual; hyphens: manual; } /* kurze Wörter, keine Trennung nötig */
.gc-rechner__annahme { margin-top: .2rem; font-size: .98rem; line-height: 1.55; }
/* Drei Kennzahlen nebeneinander, sobald der Kasten innen 18rem breit ist (Handy
   bei 100 %), sonst untereinander; nie 2 + 1. rem in der Container-Abfrage
   wächst mit der Schriftgröße der Seite mit. */
.gc-rechner { container-type: inline-size; }
.gc-rechner__zahlen {
  display: grid; grid-template-columns: 1fr;
  gap: 1rem clamp(1rem, 3vw, 1.8rem); margin-top: clamp(1.2rem, 3vw, 1.8rem);
}
@container (min-width: 18rem) { .gc-rechner__zahlen { grid-template-columns: repeat(3, 1fr); } }
.gc-rechner__zahlen > *, .gc-rechner__euro > * { min-width: 0; }
.gc-rechner__zahl { padding-top: .9rem; border-top: 1px solid var(--gc-karte-rand); }
.gc .gc-rechner__wert { font: 800 clamp(2.1rem, 6vw, 3.2rem)/1 var(--gc-schrift-titel); letter-spacing: -.02em; color: var(--gc-text); }
.gc-rechner__balken { display: block; margin-top: .7rem; height: 6px; border-radius: 3px; background: var(--gc-linie); overflow: hidden; }
.gc-rechner__balken > span { display: block; height: 100%; border-radius: 3px; background: var(--gc-gruen); }
.gc .gc-rechner__was { margin-top: .6rem; font: 500 .74rem/1.45 var(--gc-schrift-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--gc-gedaempft); }
.gc-rechner__euro {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem clamp(1.4rem, 4vw, 3rem); align-items: center;
  margin-top: clamp(1.4rem, 3.5vw, 2rem); padding-top: clamp(1.2rem, 3vw, 1.6rem); border-top: 1px solid var(--gc-linie);
}
@media (max-width: 720px) { .gc-rechner__euro { grid-template-columns: 1fr; } }
.gc-rechner__regler { display: flex; flex-direction: column; gap: .8rem; }
.gc-rechner__regler label { font: 600 1rem/1.4 var(--gc-schrift-text); color: var(--gc-text); }
.gc-rechner__kundenwert { font: 800 clamp(1.6rem, 4.4vw, 2rem)/1.1 var(--gc-schrift-titel); color: var(--gc-text); }
.gc-rechner__ergebnis { min-width: 0; }
.gc-rechner__label { font: 500 .74rem/1.45 var(--gc-schrift-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gc-gruen); }
.gc-rechner__betrag { display: block; margin-top: .35rem; font: 800 clamp(2.2rem, 7vw, 3.4rem)/1.05 var(--gc-schrift-titel); letter-spacing: -.02em; color: var(--gc-text); overflow-wrap: anywhere; }
/* Höchstwert „312.000 €“ bleibt auch bei 320 px und großer Systemschrift in einer Zeile */
.gc-rechner__betrag { font-size: min(clamp(2.2rem, 7vw, 3.4rem), 14cqi); }
.gc .gc-rechner__fuss { margin-top: .7rem; font-size: .88rem; line-height: 1.5; color: var(--gc-gedaempft); }
.gc .gc-rechner__hinweis { margin-top: clamp(1.2rem, 3vw, 1.6rem); font-size: .84rem; line-height: 1.5; color: var(--gc-gedaempft); }
.gc-rechner + .gc-weiter-link { margin-top: clamp(1.6rem, 4vw, 2.4rem); }

/* Regler: nur mit Skript sichtbar */
.gc-rechner input[type=range], .gc-rechner__nur-js { display: none; }
.gc-rechner.ist-bereit input[type=range] { display: block; }
.gc-rechner.ist-bereit .gc-rechner__nur-js { display: inline; }
.gc-rechner input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0;
  background: transparent; cursor: pointer;
}
.gc-rechner input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--gc-karte-rand); }
.gc-rechner input[type=range]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--gc-karte-rand); }
.gc-rechner input[type=range]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--gc-gruen); }
.gc-rechner input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%;
  background: var(--gc-gruen); border: 3px solid var(--gc-text); box-shadow: var(--gc-glut);
}
.gc-rechner input[type=range]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--gc-gruen); border: 3px solid var(--gc-text); box-shadow: var(--gc-glut);
}
.gc .gc-rechner input[type=range]:focus-visible { outline: 3px solid var(--gc-gruen); outline-offset: 4px; }

/* Mehrwert und Wertanker: kostenlos links, nächste Stufe rechts */
.gc-wert { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 3vw, 1.6rem); align-items: start; }
@media (max-width: 800px) { .gc-wert { grid-template-columns: 1fr; } }
.gc-wert__karte { padding: 1.5rem 1.4rem 1.4rem; border-radius: 14px; background: var(--gc-karte); border: 1px solid var(--gc-karte-rand); }
.gc-wert__karte--frei { border-top: 4px solid var(--gc-gruen); }
.gc-wert__karte--voll { border-top: 4px solid var(--gc-feld-rand); }
.gc-wert__stufe { margin: 0 0 .5rem; font: 500 .74rem/1.4 var(--gc-schrift-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gc-gedaempft); }
.gc-wert__karte--frei .gc-wert__stufe { color: var(--gc-gruen); }
.gc-wert__preis { margin: .2rem 0 1.2rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--gc-linie); }
.gc-wert__betrag { display: block; font: 800 clamp(1.8rem, 5vw, 2.3rem)/1.1 var(--gc-schrift-titel); letter-spacing: -.01em; color: var(--gc-text); }
.gc-wert__karte--frei .gc-wert__betrag { color: var(--gc-gruen); text-transform: uppercase; }
.gc-wert__zusatz { display: block; margin-top: .45rem; font-size: .88rem; line-height: 1.5; color: var(--gc-gedaempft); }
.gc-wert .gc-haken { gap: .8rem; }
.gc-wert .gc-haken li { font-size: .98rem; }
.gc-wert__karte .gc-weiter-link { margin-top: 1.5rem; }
.gc-wert__notiz { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--gc-linie); font-size: .95rem; line-height: 1.55; }

/* Häufige Fragen */
.gc-faq { display: grid; gap: .7rem; max-width: 48rem; }
.gc-faq details { background: var(--gc-karte); border: 1px solid var(--gc-karte-rand); border-radius: 12px; padding: 0 1.1rem; }
.gc-faq summary {
  cursor: pointer; list-style: none; padding: 1.05rem 0;
  font: 700 1.04rem/1.35 var(--gc-schrift-titel); letter-spacing: -.005em; color: var(--gc-text);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.gc-faq summary::-webkit-details-marker { display: none; }
.gc-faq summary::after { content: "+"; font: 500 1.4rem/1 var(--gc-schrift-mono); color: var(--gc-gruen); flex: none; }
.gc-faq details[open] summary::after { content: "\2013"; }
.gc-faq p { font-size: .98rem; line-height: 1.66; padding: 0 0 1.1rem; max-width: 68ch; }
.gc-faq a { color: var(--gc-text); }

/* Schluss-Aufruf */
.gc-schluss { position: relative; isolation: isolate; text-align: center; }
.gc-schluss::before {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: radial-gradient(60% 70% at 50% 100%, var(--gc-schein), transparent 72%);
}
.gc-schluss .gc-lead { max-width: 40rem; margin: 0 auto clamp(1.4rem, 4vw, 2rem); }

/* ---------- Fußzeile ---------- */
.gc-fuss { background: var(--gc-grund-tief); color: var(--gc-gedaempft); padding: 2.6rem 0 2.4rem; font-size: .9rem; }
.gc-fuss__innen { display: flex; flex-wrap: wrap; gap: 1.4rem 3rem; align-items: center; justify-content: space-between; }
.gc-fuss .gc-marke { font-size: min(1.35rem, 7.4vw); }
.gc-fuss__claim { margin-top: .5rem; font: 500 .72rem/1.4 var(--gc-schrift-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gc-gedaempft); }
.gc-fuss__nav { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.gc-fuss__nav a { color: var(--gc-text-2); font: 500 .8rem/1.4 var(--gc-schrift-mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; padding: .35rem 0; }
.gc-fuss__nav a:hover { color: var(--gc-gruen); text-decoration: underline; }
.gc-fuss__credit { width: 100%; padding-top: 1.2rem; border-top: 1px solid var(--gc-linie); font: 500 .72rem/1.6 var(--gc-schrift-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--gc-gedaempft); }
.gc-fuss__credit + .gc-fuss__credit { padding-top: 0; border-top: 0; margin-top: -.8rem; }
.gc-fuss__credit a { color: var(--gc-text-2); text-decoration: underline; }

/* ---------- Bewegung (Alexander, 30.09.2026: alle Elemente schön animiert) ----------
   Nur transform, opacity und clip-path, alles nur ohne „Bewegung reduzieren“.
   1. Der Held der Checkseite baut sich nach dem Laden auf (reines CSS). Auf der Startseite
      übernimmt das css/lp-held.css, sobald der Block im Bild ist.
   2. Die Abschnitte darunter erscheinen beim Scrollen. gratischeck.js markiert die Ziele mit
      gc-rv und setzt html.gc-anim, dann gc-rv-an, sobald ein Ziel ins Bild kommt. Ohne Skript,
      ohne IntersectionObserver oder bei „Bewegung reduzieren“ fehlt gc-anim: Alles steht sofort da.
      Der Endzustand ist immer der normale Zustand der Seite, nie ein Zusatz.
   3. Dauerbewegung: Pfeil an den Knöpfen, Puls am Knopf des Schlussformulars. */
:root { --gc-ease: cubic-bezier(.2, .7, .2, 1); }

@keyframes gc-hoch { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
/* Markierungsbalken wird aufgezogen; unten und seitlich viel Platz, damit der Schein nicht abgeschnitten wird */
@keyframes gc-wisch {
  from { clip-path: inset(-200% 100% -200% 0%); }
  85% { clip-path: inset(-200% 0% -200% 0%); }
  to { clip-path: inset(-200% -100% -200% -100%); }
}
@keyframes gc-pop { 0% { transform: scale(0); } 60% { transform: scale(1.22); } 100% { transform: scale(1); } }
@keyframes gc-blende { from { opacity: 0; } to { opacity: 1; } }
@keyframes gc-zoom { from { transform: scale(1.09); } to { transform: none; } }
@keyframes gc-balken { from { transform: scaleX(0); } to { transform: none; } }
@keyframes gc-pfeil { 0%, 45%, 100% { transform: none; } 22.5% { transform: translateX(4px); } }

@media (prefers-reduced-motion: no-preference) {
  /* ----- 1. Held der Checkseite ----- */
  .gc-held:not(.lp-held) .gc-held__zielgruppe { animation: gc-hoch .7s var(--gc-ease) backwards; }
  .gc-held:not(.lp-held) .gc-held__titel { animation: gc-hoch .85s var(--gc-ease) .12s backwards; }
  .gc-held:not(.lp-held) .gc-kasten { animation: gc-wisch .75s cubic-bezier(.65, .05, .25, 1) .5s backwards; }
  /* Formular (Website-Feld und Knopf) ohne Einblendung: Es steht ab dem ersten Bild da.
     Mit 0,8 s Verzögerung erschien es am Handy erst nach 1,6 bis 2,4 s; von 21 echten
     Werbebesuchern (30.09.–02.10.2026) hat nur einer die Seite benutzt. */
  .gc-held:not(.lp-held) .gc-rahmen { animation: gc-hoch .7s var(--gc-ease) 1s backwards; }
  .gc-held:not(.lp-held) .gc-ki__satz,
  .gc-held:not(.lp-held) .gc-ki__zusatz { animation: gc-hoch .7s var(--gc-ease) 1.1s backwards; }
  .gc-held:not(.lp-held) .gc-ki__marken li { animation: gc-hoch .55s var(--gc-ease) 1.25s backwards; }
  .gc-held:not(.lp-held) .gc-ki__marken li:nth-child(2) { animation-delay: 1.33s; }
  .gc-held:not(.lp-held) .gc-ki__marken li:nth-child(3) { animation-delay: 1.41s; }
  .gc-held:not(.lp-held) .gc-ki__marken li:nth-child(n+4) { animation-delay: 1.49s; }

  /* Pfeil im Heldknopf schiebt im Takt des Pulses mit (gleiche Dauer und Startverzögerung) */
  .gc-js .gc-form[data-gc-ort="hero"] .gc-weiter svg { animation: gc-pfeil 2s ease-in-out 2s infinite; }
  .gc-js .gc-form[data-gc-ort="hero"] .gc-weiter:hover svg,
  .gc-js .gc-form[data-gc-ort="hero"] .gc-weiter:focus-visible svg,
  .gc-js .gc-form[data-gc-ort="hero"]:focus-within .gc-weiter svg { animation: none; }

  /* ----- 2. Erscheinen beim Scrollen ----- */
  html.gc-anim .gc-rv:not(.gc-rv-an) { opacity: 0; transform: translateY(24px); }
  html.gc-anim .gc-rv--links:not(.gc-rv-an) { transform: translateX(-18px); }
  html.gc-anim .gc-rv--gross:not(.gc-rv-an) { transform: translateY(30px) scale(.96); }
  html.gc-anim .gc-rv--pop:not(.gc-rv-an) { transform: scale(.8); }
  /* Die Übergangszeit steht nur am erschienenen Zustand: Das Verstecken beim Start blendet nicht erst aus */
  html.gc-anim .gc-rv-an {
    transition: opacity .75s var(--gc-ease) var(--gc-verz, 0ms), transform .75s var(--gc-ease) var(--gc-verz, 0ms);
  }
  html.gc-anim .gc-rv-an.gc-rv-sofort { transition: none; }

  /* Bilder: Tafel erscheint, das Bild zoomt darin leicht ein */
  html.gc-anim .gc-bild.gc-rv-an img,
  html.gc-anim .gc-rv-an .gc-bild img,
  html.gc-anim .gc-bericht.gc-rv-an .gc-bericht__bild img {
    animation: gc-zoom 1.3s var(--gc-ease) calc(var(--gc-verz, 0ms) + .1s) backwards;
  }
  html.gc-anim .gc-rv-an.gc-rv-sofort img { animation: none; }

  /* Häkchen und Schrittnummern springen auf, das Häkchen-Zeichen blendet danach ein */
  html.gc-anim .gc-haken li.gc-rv-an::before,
  html.gc-anim .gc-schritte li.gc-rv-an .gc-schritt__text::before {
    animation: gc-pop .55s ease-out calc(var(--gc-verz, 0ms) + .3s) backwards;
  }
  html.gc-anim .gc-haken li.gc-rv-an::after { animation: gc-blende .3s ease-out calc(var(--gc-verz, 0ms) + .55s) backwards; }
  html.gc-anim .gc-rv-an.gc-rv-sofort::before,
  html.gc-anim .gc-rv-an.gc-rv-sofort::after,
  html.gc-anim .gc-rv-an.gc-rv-sofort .gc-schritt__text::before { animation: none; }

  /* Balken der Beispielrechnung wachsen von links; spätere Änderungen am Regler laufen ohne Animation */
  html.gc-anim .gc-rechner__zahl.gc-rv-an .gc-rechner__balken > span {
    transform-origin: left center;
    animation: gc-balken 1.1s var(--gc-ease) calc(var(--gc-verz, 0ms) + .4s) backwards;
  }
  html.gc-anim .gc-rechner__zahl.gc-rv-an.gc-rv-sofort .gc-rechner__balken > span { animation: none; }

  /* ----- 3. Dauerbewegung ----- */
  /* Pfeil an den Wiederholungsknöpfen: sanft nach rechts, Ruhe bei Hover und Fokus */
  html.gc-anim .gc-weiter-link.gc-rv-an .gc-knopf svg,
  html.gc-anim .gc-rv-an .gc-weiter-link .gc-knopf svg { animation: gc-pfeil 3.2s ease-in-out calc(var(--gc-verz, 0ms) + 1.2s) infinite; }
  html.gc-anim .gc-weiter-link.gc-rv-an .gc-knopf:hover svg,
  html.gc-anim .gc-weiter-link.gc-rv-an .gc-knopf:focus-visible svg,
  html.gc-anim .gc-rv-an .gc-weiter-link .gc-knopf:hover svg,
  html.gc-anim .gc-rv-an .gc-weiter-link .gc-knopf:focus-visible svg { animation: none; }

  /* Schlussformular: derselbe Puls wie im Held, sobald es erschienen ist */
  .gc-js .gc-schluss .gc-aktion.gc-rv-an .gc-form .gc-weiter { animation: gc-puls 2s ease-in-out 1.4s infinite; }
  .gc-js .gc-schluss .gc-aktion.gc-rv-an .gc-form .gc-weiter svg { animation: gc-pfeil 2s ease-in-out 1.4s infinite; }
  .gc-js .gc-schluss .gc-aktion.gc-rv-an .gc-form .gc-weiter:hover,
  .gc-js .gc-schluss .gc-aktion.gc-rv-an .gc-form .gc-weiter:focus-visible,
  .gc-js .gc-schluss .gc-aktion.gc-rv-an .gc-form:focus-within .gc-weiter,
  .gc-js .gc-schluss .gc-aktion.gc-rv-an .gc-form .gc-weiter:hover svg,
  .gc-js .gc-schluss .gc-aktion.gc-rv-an .gc-form .gc-weiter:focus-visible svg,
  .gc-js .gc-schluss .gc-aktion.gc-rv-an .gc-form:focus-within .gc-weiter svg { animation: none; }
}
/* Druck: alles zeigen */
@media print {
  html.gc-anim .gc-rv { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- Weniger Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .gc-js .gc-strich path, .gc-js .gc-strich path + path { stroke-dashoffset: 0; animation: none; }
  .gc-js .gc-form.ist-schritt2 .gc-schritt2 { animation: none; }
  .gc-kopf-kompakt .gc-kopf { animation: none; }
  .gc-knopf, .gc-knopf svg, .gc-feld { transition: none; }
  .gc .gc-knopf:hover, .gc-knopf:hover svg { transform: none; }
}

/* ======================================================================
   Dankeseite /danke-check (body.gc-danke): nur Optik.
   Lädt zusätzlich style.css; die Regeln hier setzen die Farbwelt darüber.
   ====================================================================== */
html:has(body.gc-danke) { background: var(--gc-grund); }
body.gc-danke { background: var(--gc-grund); color: var(--gc-text); }
.gc-danke :focus-visible { outline: 3px solid var(--gc-gruen); outline-offset: 3px; }

.gc-danke .site-header-min { position: relative; background: transparent; border-bottom: 1px solid var(--gc-linie); padding: 14px 0; }
.gc-danke .site-header-min .container { display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.gc-danke .site-header-min .brand { color: var(--gc-text); font-family: var(--gc-schrift-marke); font-weight: 600; font-size: min(1.2rem, 6.4vw); word-spacing: .1em; text-decoration: none; }
.gc-danke .site-header-min .zurueck { font-family: var(--gc-schrift-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; white-space: normal; text-align: right; min-width: 0; }
@media (max-width: 560px) { .gc-danke .site-header-min .zurueck { font-size: .62rem; letter-spacing: .06em; } }
.gc-danke .site-header-min .brand__dot { color: var(--gc-gruen); }
.gc-danke .site-header-min .zurueck { color: var(--gc-text-2); }
.gc-danke .site-header-min .zurueck:hover { color: var(--gc-gruen); }

.gc-danke .danke-hero { position: relative; isolation: isolate; background: transparent; padding: clamp(32px, 7vw, 84px) 0 clamp(36px, 6vw, 64px); }
.gc-danke .danke-hero::before {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: radial-gradient(60% 50% at 50% 0%, var(--gc-schein), transparent 72%);
}
.gc-danke .danke-hero .kicker { color: var(--gc-gruen); }
.gc-danke .danke-hero h1 {
  font-family: var(--gc-schrift-titel); font-weight: 900; letter-spacing: -.015em;
  font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1.04; color: var(--gc-text); margin: 14px 0 18px; max-width: 16em;
  /* Geerbtes break-word schnitt „Erstmessung“ mitten durch. Silbentrennung
     bleibt aus: sie zog das Wort bei 390 px in die erste Zeile. */
  overflow-wrap: normal;
}
/* Bis 360 px: 2rem wird bei 150 % (24 px Wurzel) zu 48 px, „Erstmessung“ misst
   dann 333 px und passt nicht in den Satzspiegel von 280 px. 12,2 vw ergeben
   39 px, das Wort braucht 271 px. Ab 390 px greift die Regel nicht. */
@media (max-width: 360px) {
  .gc-danke .danke-hero h1 { font-size: min(clamp(2rem, 6vw, 3.4rem), 12.2vw); }
}
.gc-danke .danke-hero p { color: var(--gc-text-2); max-width: 62ch; margin-bottom: 14px; line-height: 1.62; }
.gc-danke .danke-hero strong { color: var(--gc-text); }
.gc-danke .danke-hero a { color: var(--gc-text); text-decoration: underline; text-underline-offset: .18em; }
.gc-danke .danke-hero a:hover { color: var(--gc-gruen); }
.gc-danke .danke-kontakt { font-size: .92rem; }

/* Freiwilliger Rückruf-Schritt */
.gc-danke .rueckruf {
  background: var(--gc-grund-2); color: var(--gc-text); border: 1px solid var(--gc-karte-rand); border-top: 4px solid var(--gc-gruen);
  border-radius: 16px; padding: clamp(20px, 3vw, 34px); max-width: 640px; margin-top: 26px;
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .8); scroll-margin-top: 18px;
}
.gc-danke .danke-hero .rueckruf .rueckruf__kicker { font-family: var(--gc-schrift-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gc-gruen); margin: 0; }
.gc-danke .rueckruf h2 { font-family: var(--gc-schrift-titel); font-weight: 800; letter-spacing: -.01em; font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin: 6px 0 8px; line-height: 1.2; color: var(--gc-text); }
.gc-danke .danke-hero .rueckruf p { color: var(--gc-text-2); max-width: none; }
.gc-danke .rueckruf__lead { font-size: .95rem; line-height: 1.55; margin: 0 0 16px; }
.gc-danke .rueckruf .checkform { gap: 12px; }
.gc-danke .rueckruf .field label { font-family: var(--gc-schrift-mono); font-size: .72rem; letter-spacing: .08em; font-weight: 500; color: var(--gc-text); }
.gc-danke .rueckruf .field input {
  min-height: 54px; font-size: 1.05rem; color: var(--gc-text);
  background: var(--gc-feld); border: 1.5px solid var(--gc-feld-rand); border-radius: 12px;
}
.gc-danke .rueckruf .field input::placeholder { color: var(--gc-platzhalter); opacity: 1; }
.gc-danke .rueckruf .field input:focus { outline: none; border-color: var(--gc-gruen); box-shadow: var(--gc-fokus-feld); background: var(--gc-feld); }
.gc-danke .rueckruf .btn--accent {
  justify-self: stretch; width: 100%; min-height: 56px; border-radius: 14px;
  background: var(--gc-gruen); color: var(--gc-auf-gruen); border-color: var(--gc-gruen);
  font-family: var(--gc-schrift-text); font-weight: 700; font-size: 1rem; letter-spacing: .05em;
  box-shadow: var(--gc-glut); transition: background-color .15s ease, box-shadow .15s ease;
}
.gc-danke .rueckruf .btn--accent:hover { background: var(--gc-gruen-hell); border-color: var(--gc-gruen-hell); color: var(--gc-auf-gruen); }
.gc-danke .rueckruf .btn--accent:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--gc-grund-2), 0 0 0 6px var(--gc-gruen); }
.gc-danke .rueckruf .btn--accent[disabled] { opacity: .6; cursor: progress; }
.gc-danke .rueckruf .form-fehlerbox:target { background: var(--gc-fehlerkasten); color: #fff; }
.gc-danke .form-okbox { display: none; }
.gc-danke .form-okbox:target { display: block; background: #0d2b25; border: 1px solid #1d5a46; border-left: 4px solid var(--gc-gruen); color: var(--gc-text); border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; font-size: .95rem; }
.gc-danke .danke-hero .rueckruf .checkform__note { color: var(--gc-gedaempft); margin-bottom: 0; }
.gc-danke .rueckruf .checkform__note a { color: var(--gc-text-2); }
.gc-danke .danke-hero .rueckruf .checkform__status { color: var(--gc-rot); }
.gc-danke .rueckruf__einwilligung { background: var(--gc-feld); border: 1px solid var(--gc-karte-rand); border-radius: 10px; padding: 13px 14px; margin: 0; min-width: 0; }
.gc-danke .rueckruf__einwilligung legend { font-family: var(--gc-schrift-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gc-gedaempft); padding: 0 6px; margin: 0 0 8px; }
.gc-danke .rueckruf__einwilligung label { display: flex; gap: 11px; align-items: flex-start; cursor: pointer; }
.gc-danke .rueckruf__einwilligung input { margin-top: .28em; width: 18px; height: 18px; flex: none; accent-color: var(--gc-gruen); }
.gc-danke .rueckruf__einwilligung span { font-size: .86rem; line-height: 1.55; color: var(--gc-text-2); min-width: 0; overflow-wrap: anywhere; }
.gc-danke .rueckruf [data-mail-feld][hidden] { display: none; }
.gc-danke .rueckruf .checkform__done-title { color: var(--gc-gruen); font-family: var(--gc-schrift-titel); font-weight: 800; }
.gc-danke .danke-hero .rueckruf .checkform__done p { color: var(--gc-text); }

.gc-danke .danke-naechstes { background: var(--gc-grund-2); padding: clamp(40px, 6vw, 72px) 0; border-top: 1px solid var(--gc-linie); }
.gc-danke .danke-naechstes h2,
.gc-danke .danke-selbsttest h2 { font-family: var(--gc-schrift-titel); font-weight: 800; letter-spacing: -.01em; font-size: clamp(1.5rem, 3.4vw, 2.2rem); line-height: 1.1; color: var(--gc-text); margin-bottom: 22px; }
.gc-danke .danke-schritte { counter-reset: s; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 820px) { .gc-danke .danke-schritte { grid-template-columns: 1fr; } }
.gc-danke .danke-schritte li { counter-increment: s; position: relative; padding-left: 48px; color: var(--gc-text-2); font-size: .97rem; line-height: 1.6; }
.gc-danke .danke-schritte li::before { content: counter(s); position: absolute; left: 0; top: -2px; width: 32px; height: 32px; border-radius: 50%; background: var(--gc-gruen); color: var(--gc-auf-gruen); font: 800 .95rem/1 var(--gc-schrift-titel); display: flex; align-items: center; justify-content: center; }
.gc-danke .danke-schritte b { display: block; color: var(--gc-text); font-family: var(--gc-schrift-titel); font-weight: 700; font-size: 1.06rem; margin-bottom: 5px; }

.gc-danke .danke-selbsttest { background: var(--gc-grund); padding: clamp(40px, 6vw, 72px) 0; border-top: 1px solid var(--gc-linie); }
.gc-danke .danke-selbsttest p { color: var(--gc-text-2); max-width: 64ch; line-height: 1.66; margin-bottom: 14px; }
.gc-danke .danke-frage { display: inline-block; background: var(--gc-grund-tief); border: 1px solid var(--gc-karte-rand); border-left: 4px solid var(--gc-gruen); border-radius: 0 10px 10px 0; padding: 14px 18px; font-family: var(--gc-schrift-mono); font-size: .92rem; color: var(--gc-text); line-height: 1.5; }

.gc-danke .site-footer { background: var(--gc-grund-tief); color: var(--gc-gedaempft); border-top: 1px solid var(--gc-linie); }
.gc-danke .footer__nav a { color: var(--gc-text-2); }
.gc-danke .footer__nav a:hover { color: var(--gc-gruen); }
.gc-danke .footer__brand .brand__dot { color: var(--gc-gruen); }
.gc-danke .footer__credit { color: var(--gc-gedaempft); }
.gc-danke .footer__credit a { color: var(--gc-text-2); text-decoration: underline; text-underline-offset: 3px; }
.gc-danke .brand__logo { height: 1.3em; vertical-align: -.26em; }
.gc-danke .footer__brand { min-width: 0; max-width: 100%; }
.gc-danke .footer__brand .brand { white-space: normal; font-size: clamp(1.3rem, 6vw, 1.7rem); }
.gc-danke .danke-hero { overflow-wrap: break-word; }
.gc-danke .danke-hero a[href^="mailto:"], .gc-danke .danke-hero a[href^="tel:"] { overflow-wrap: anywhere; }

/* style.css gibt h1/h2 für Clash Display einen Wortabstand von .1em; Montserrat braucht ihn nicht */
.gc-danke .danke-hero h1, .gc-danke .rueckruf h2, .gc-danke .danke-naechstes h2, .gc-danke .danke-selbsttest h2 { word-spacing: normal; }

@media (prefers-reduced-motion: reduce) {
  .gc-danke .rueckruf .btn--accent { transition: none; }
}