/* ==========================================================================
   IDBT-FAQ · Hilfezentrum
   --------------------------------------------------------------------------
   Aufbau nach der Vorlage vom 2026-10-01 (Hilfezentrum „Alder & Co."):
     Kopf: links Kategorien, Mitte Marke, rechts Sprache und Knopf
     Titelfeld: Überschrift links, Suche rechts, als abgesetzte Fläche
     darunter: links Kategorien zum Aufklappen mit ihren Fragen,
               rechts eine große Karte mit genau einer Antwort und der
               Frage „War diese Antwort hilfreich?"
     Fuß: Aufbau der 402PAYMENT-Hauptseite (homepage, .site-footer) mit
          Logo-Punktfeld, kurzer Beschreibung und „//"-Etiketten

   Gewählt ist Version 2 „Navy" (2026-10-01): Kopf und Titelfeld in Navy,
   fast weiße Seite, schlichte weiße Karte (ohne farbige Oberkante, ohne
   Quellenkasten), zweifarbige Überschrift.

   Vertieft und erhaben wie auf der Hauptseite: Die Kategorien im Kopf
   liegen in einer vertieften Schiene, die gewählte als erhabener weißer
   Schieber. Links sind die Kategorien erhabene Flächen, aufgeklappt
   vertieft, die gezeigte Frage darin wieder erhaben. „Frage stellen" ist
   ein roter Knopf. Die Vorschlagsliste der Suche ist ebenso gebaut.

   Knöpfe im Material der 402PAYMENT-Hauptseite (Desktop\402\homepage,
   docs/design-decisions.md): Verlauf, helle Oberkante, weicher Schatten,
   beim Überfahren 1 px höher, beim Drücken eingedrückt. Jede Variante
   setzt nur sieben Tokens (--top, --bottom, --fg, --edge, --shine, --drop,
   --press), die Basis macht den Rest. Kein Ripple, wie auf der Hauptseite.

   Keine Vorzeilen über Überschriften (landing-page-wissen, Regel 7): die
   Kategorie einer Antwort steht UNTER ihrer Überschrift.
   ========================================================================== */

:root {
  --weiss:       #FFFFFF;
  --tinte:       #0B0B23;
  --tinte-weich: #5A5D66;
  --text:        #2F3140;
  --linie:       rgba(11, 11, 35, 0.12);
  --linie-stark: rgba(11, 11, 35, 0.24);
  --navy:        #0B0B23;
  --navy-hell:   #1A1A40;   /* Oberkante der Navy-Verläufe */
  --navy-tief:   #14143A;
  --signal:      #FF4436;
  --halt-gruen:  #0B4A2F;
  --koralle:     #F26B43;
  --navy-weich:  rgba(255, 255, 255, 0.72);
  --linie-hell:  rgba(255, 255, 255, 0.16);
  --navy-200:    #dadae7;

  --seite:       #F5F6FA;
  --karte:       #FFFFFF;

  --schrift: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --huelle: 1200px;
  --rand: clamp(1rem, 4vw, 2.5rem);
  --tipp: 44px;
  --kopf-hoehe: 4.25rem;
  --r-gross: 20px;
  --r-mittel: 12px;
  --r-klein: 8px;
  --aus: cubic-bezier(0.2, 0.7, 0.25, 1);
  --ease: cubic-bezier(.22, 1, .36, 1);   /* Kurve der Hauptseite */
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf-hoehe) + 1.25rem); }
body { background: var(--seite); color: var(--tinte); font: 400 1rem/1.6 var(--schrift); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
h1, h2, h3 { line-height: 1.12; letter-spacing: -0.025em; text-wrap: balance; }
.huelle { width: 100%; max-width: var(--huelle); margin-inline: auto; padding-inline: var(--rand); }
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--tinte); outline-offset: 2px; border-radius: var(--r-klein); }
:where(.kopf, .titelfeld, .fuss) :focus-visible { outline-color: #fff; }
[tabindex="-1"]:focus { outline: none; }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: .5rem; top: .5rem; z-index: 1001; transform: translateY(-160%); background: var(--tinte); color: #fff; padding: .75rem 1rem; border-radius: var(--r-klein); font-weight: 600; transition: transform .2s; }
.skip-link:focus-visible { transform: none; }
html[lang="en"] [lang="de"], html[lang="de"] [lang="en"] { display: none; }
main, footer { transition: opacity .14s ease; }
html.wechselt main, html.wechselt footer { opacity: 0; }
.todo { font-size: .78rem; font-weight: 500; letter-spacing: .04em; color: var(--tinte-weich); background: repeating-linear-gradient(45deg, rgba(11,11,35,.055) 0 5px, transparent 5px 10px); border-bottom: 1.5px dashed var(--linie-stark); padding: .12em .4em; white-space: nowrap; }

/* ==========================================================================
   KNÖPFE — Material der Hauptseite
   ========================================================================== */
.btn, .taktil {
  --top: #ffffff; --bottom: #f5f5f9; --fg: var(--tinte); --edge: var(--navy-200);
  --shine: rgba(255,255,255,.9); --drop: rgba(11,11,35,.08); --press: rgba(11,11,35,.14);
  border: 1px solid var(--edge);
  background: linear-gradient(180deg, var(--top), var(--bottom));
  color: var(--fg);
  box-shadow: inset 0 1px 0 var(--shine), 0 1px 2px var(--drop), 0 2px 6px var(--drop);
  cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), filter .18s var(--ease);
}
.btn:hover, .taktil:hover {
  transform: translateY(-1px); filter: brightness(1.03);
  box-shadow: inset 0 1px 0 var(--shine), 0 2px 4px var(--drop), 0 6px 14px var(--drop);
}
.btn:active, .taktil:active {
  transform: translateY(1px); filter: none; transition-duration: .06s;
  background: linear-gradient(180deg, var(--bottom), var(--top));
  box-shadow: inset 0 2px 4px var(--press), inset 0 1px 1px var(--press);
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: var(--tipp); height: 44px; padding: 0 1.3rem; border-radius: 999px;
  font-weight: 700; font-size: .9375rem; line-height: 1; letter-spacing: -.01em; white-space: nowrap;
}
.btn svg { width: 1.1rem; height: 1.1rem; flex: none; transition: transform .25s var(--ease); }
.btn--primary {
  --top: #ff5a4d; --bottom: #f53a2c; --fg: #fff; --edge: #e23225;
  --shine: rgba(255,255,255,.28); --drop: rgba(245,58,44,.25); --press: rgba(120,20,12,.35);
}
/* Dunkle Variante für Bedienelemente auf Navy (Sprachwahl im Kopf,
   „nach oben" im Fuß), wie .site-footer .btn--outline der Hauptseite. */
.taktil--dunkel, .btn--dunkel {
  --top: #26264f; --bottom: #12122e; --fg: #fff; --edge: rgba(255,255,255,.16);
  --shine: rgba(255,255,255,.14); --drop: rgba(0,0,0,.25); --press: rgba(0,0,0,.5);
}
/* Gewählt / gedrückt bleibend (Rückmeldung): Navy. */
.taktil[aria-pressed="true"] {
  --top: #22224a; --bottom: #0b0b23; --fg: #fff; --edge: #0b0b23;
  --shine: rgba(255,255,255,.14); --drop: rgba(11,11,35,.22); --press: rgba(0,0,0,.5);
}
.btn[disabled] { opacity: .55; cursor: default; transform: none; filter: none; }
.btn--rund { width: 44px; padding: 0; }
.btn:hover svg { transform: translateX(3px); }
.btn--rund:hover svg { transform: none; }

/* ==========================================================================
   KOPF — Navy, als Fläche mit Verlauf und heller Oberkante (wie die
   erhabene Leiste der Hauptseite, aber in Navy)
   ========================================================================== */
.kopf {
  position: sticky; top: 0; z-index: 900;
  background: linear-gradient(180deg, var(--navy-hell) 0%, var(--navy) 100%);
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 2px 4px rgba(11,11,35,.08), 0 12px 32px -18px rgba(11,11,35,.55);
}
.kopf__innen { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1rem; min-height: var(--kopf-hoehe); }
/* Kategorieverweise im Kopf entfernt (Wunsch 2026-10-01); Kategorien nur links. */
.kopf__marke { display: inline-flex; align-items: center; gap: .55rem; font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; white-space: nowrap; }
.kopf__marke img { width: 1.75rem; height: 1.75rem; }
.kopf__marke-zusatz { font-weight: 600; color: rgba(255,255,255,.6); }
.kopf__rechts { display: flex; align-items: center; gap: .5rem; justify-self: end; }
.kopf__cta { padding-inline: 1rem 1.2rem; }
.rundknopf { display: inline-flex; align-items: center; gap: .35rem; height: var(--tipp); padding-inline: .8rem; border-radius: 999px; list-style: none; }
.rundknopf::-webkit-details-marker { display: none; }
.rundknopf svg { width: 1.1rem; height: 1.1rem; }
.sprache { position: relative; }
.sprache__code { font-size: .75rem; font-weight: 700; }
.sprache__liste { position: absolute; right: 0; top: calc(100% + .5rem); z-index: 2; min-width: 9rem; padding: .35rem; background: #fff; color: var(--tinte); border: 1px solid var(--linie); border-radius: var(--r-mittel); box-shadow: 0 18px 32px -20px rgba(11,11,35,.45); }
.sprache__liste button { display: block; width: 100%; padding: .6rem .75rem; border: 0; border-radius: var(--r-klein); background: transparent; text-align: left; font-size: .9rem; color: var(--tinte-weich); cursor: pointer; }
.sprache__liste button:hover { background: var(--seite); color: var(--tinte); }
.sprache__liste button[aria-pressed="true"] { color: var(--tinte); font-weight: 600; }

/* ==========================================================================
   TITELFELD — Navy, zweifarbige Überschrift, Suche rechts
   ========================================================================== */
.hilfe { padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(3rem, 6vw, 5rem); }
.titelfeld {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 26rem); align-items: center; gap: 1.25rem 3rem;
  padding: clamp(1.5rem, 3.5vw, 2.75rem) clamp(1.25rem, 3.5vw, 3rem);
  border-radius: var(--r-gross);
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-tief) 100%);
  color: #fff;
}
.titelfeld__titel { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem); font-weight: 800; letter-spacing: -.035em; }
.titelfeld .mute { color: rgba(255,255,255,.55); }
.titelfeld__text { margin-top: .6rem; color: var(--navy-weich); }
.suche { position: relative; }
.suche__zeichen { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); width: 1.05rem; height: 1.05rem; color: var(--tinte-weich); pointer-events: none; }
.suche input { width: 100%; min-height: 3rem; padding: .6rem 1rem .6rem 2.65rem; border: 1px solid transparent; border-radius: var(--r-mittel); background: #fff; color: var(--tinte); }
.suche input::placeholder { color: var(--tinte-weich); opacity: 1; }
.suche input:focus-visible { outline-offset: 2px; border-radius: var(--r-mittel); }
/* Autovervollständigung: die Liste hängt unter dem Feld, in Papierweiß auf
   dem Navy-Titelfeld. Die markierte Option ist der erhabene Daumen. */
.suche__liste {
  position: absolute; left: 0; right: 0; top: calc(100% + .45rem); z-index: 20;
  max-height: min(24rem, 60vh); overflow-y: auto; overscroll-behavior: contain;
  padding: .35rem; border-radius: var(--r-mittel);
  background: linear-gradient(180deg, #f4f4f8, #eef0f5); color: var(--tinte);
  box-shadow: inset 0 -1px 3px rgba(11,11,35,.08), 0 26px 40px -24px rgba(0,0,0,.6);
}
.suche__eintrag {
  display: grid; gap: .1rem; padding: .6rem .75rem; border: 1px solid transparent; border-radius: 10px;
  cursor: pointer; line-height: 1.35;
}
.suche__eintrag[aria-selected="true"] {
  border-color: var(--navy-200); background: linear-gradient(180deg, #fff, #f7f7fa);
  box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(11,11,35,.14);
}
.suche__frage { font-size: .9375rem; font-weight: 600; }
.suche__kat { font-size: .75rem; color: var(--tinte-weich); }
.suche__eintrag--fragen { margin-top: .25rem; border-top-color: var(--linie); border-radius: 0 0 10px 10px; }
.suche__eintrag--fragen .suche__frage { color: #c42d21; }
.suche__eintrag--fragen[aria-selected="true"] { border-radius: 10px; border-top-color: var(--navy-200); }
.suche__leer { padding: .6rem .75rem; font-size: .875rem; color: var(--tinte-weich); }

/* ==========================================================================
   RASTER: Kategorien links, Karte rechts
   ========================================================================== */
.hilfe__raster { display: grid; grid-template-columns: 17.5rem minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.seitenleiste { position: sticky; top: calc(var(--kopf-hoehe) + 1.5rem); }

/* Kategorien taktil, nach dem Material und den „verbundenen Ausklappern"
   der Hauptseite: geschlossen ist eine Kategorie ein erhabener Knopf
   (Verlauf, helle Oberkante, Schatten). Geöffnet wird sie zur vertieften
   Mulde, in der ihre Fragen liegen; die gezeigte Frage ist darin der
   erhabene weiße Daumen. */
.kategorien { display: grid; gap: .6rem; }
.kategorien__titel { font-size: .8rem; font-weight: 600; letter-spacing: 0; color: var(--tinte-weich); }
.kategorie {
  border: 1px solid var(--navy-200); border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #f5f5f9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(11,11,35,.08), 0 2px 6px rgba(11,11,35,.08);
  transition: box-shadow .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.kategorie:not([open]):hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 4px rgba(11,11,35,.08), 0 6px 14px rgba(11,11,35,.08); }
.kategorie[open] {
  border-color: transparent;
  background: linear-gradient(180deg, #e9e9f0, #f4f4f8);
  box-shadow: inset 0 1px 3px rgba(11,11,35,.14);
}
.kategorie summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 3.1rem; padding: 0 1rem; border-radius: 15px; cursor: pointer; list-style: none;
  font-weight: 700; font-size: .975rem;
}
.kategorie summary::-webkit-details-marker { display: none; }
.kategorie summary:active { transform: translateY(1px); }
.kategorie__zeichen { width: 1.05rem; height: 1.05rem; flex: none; color: var(--tinte-weich); }
.kategorie__zeichen .strich-hoch { transform-origin: center; transition: transform .2s var(--aus); }
.kategorie[open] .strich-hoch { transform: scaleY(0); }
.kategorie__liste { display: grid; gap: 2px; padding: 0 4px 4px; }
.kategorie__frage {
  display: block; padding: .55rem .75rem; border: 1px solid transparent; border-radius: 12px;
  font-size: .9rem; font-weight: 500; line-height: 1.4; color: #50546B;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.kategorie__frage:hover { background: rgba(255,255,255,.55); color: var(--tinte); }
.kategorie__frage[aria-current] {
  color: var(--tinte); font-weight: 700; border-color: var(--navy-200);
  background: linear-gradient(180deg, #ffffff, #f7f7fa);
  box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(11,11,35,.12);
}
/* „Frage stellen" ist keine Kategorie, sondern die Hauptaktion: ein roter
   taktiler Knopf über die ganze Breite, deutlich abgesetzt. Gezeigt (das
   Formular ist offen) wird er eingedrückt dargestellt. */
.kategorien__frage { margin-top: 1rem; width: 100%; height: 48px; justify-content: space-between; padding: 0 1.1rem; }
.kategorien__frage .kategorie__zeichen { color: inherit; }
.kopf__cta:hover svg { transform: none; }
.kategorien__frage[aria-current] { transform: translateY(1px); background: linear-gradient(180deg, var(--bottom), var(--top)); box-shadow: inset 0 2px 4px var(--press), inset 0 1px 1px var(--press); }

/* ==========================================================================
   KARTE mit einer Antwort
   ========================================================================== */
.karte {
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  border-radius: var(--r-gross);
  background: var(--karte);
  border: 1px solid var(--linie);
  box-shadow: 0 20px 50px -30px rgba(11,11,35,.35);
  min-width: 0;
}
/* Die farbige Oberkante je Kategorie ist auf Wunsch entfallen (2026-10-01). */
.hilfe-bereit .antwort:not(.ist-aktiv) { display: none; }
/* Ohne Script: alle Antworten untereinander, durch Linien getrennt. */
html:not(.hilfe-bereit) .antwort + .antwort { margin-top: 2.5rem; padding-top: 2.5rem; border-top: 1px solid var(--linie); }

.antwort__titel { font-size: clamp(1.55rem, 1.2rem + 1.3vw, 2.15rem); font-weight: 800; outline: none; }
.antwort__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin-top: .75rem; font-size: .8125rem; color: var(--tinte-weich); }
.antwort__kategorie { font-weight: 600; color: var(--tinte); }
.antwort__text { margin-top: 1.5rem; color: var(--text); font-size: 1.0625rem; line-height: 1.72; }
.antwort__text p { max-width: 66ch; }
.antwort__text p + p { margin-top: .9rem; }
.antwort__text a, .rueckmeldung__antwort a { font-weight: 600; color: var(--tinte); text-decoration: underline; text-underline-offset: .2em; text-decoration-color: var(--linie-stark); }
.antwort__text a:hover { text-decoration-color: currentColor; }
/* Quellen werden nicht mehr angezeigt (Wunsch 2026-10-01); sie stehen als
   Kommentar im Quelltext jeder Antwort. */

/* ---------- Rückmeldung ---------- */
.rueckmeldung { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid var(--linie); }
.rueckmeldung__frage { font-size: .9rem; color: var(--tinte-weich); }
.rueckmeldung__knoepfe { display: flex; gap: .5rem; }
.rueckmeldung__knopf { display: inline-flex; align-items: center; gap: .4rem; height: 38px; padding: 0 1rem; border-radius: 999px; font-size: .875rem; font-weight: 700; }
.rueckmeldung__knopf svg { width: 1rem; height: 1rem; }
.rueckmeldung__antwort { flex-basis: 100%; font-size: .9rem; }
.rueckmeldung__antwort:empty { display: none; }

/* ---------- Formular ---------- */
.formular { display: grid; gap: 1.1rem; margin-top: 1.75rem; max-width: 44rem; }
.formular__zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.formular__feld { display: grid; gap: .4rem; }
.formular__name { font-size: .875rem; font-weight: 600; }
.formular__optional { font-weight: 400; color: var(--tinte-weich); }
.formular :where(input, select, textarea) { width: 100%; min-height: var(--tipp); padding: .6rem .8rem; border: 1px solid var(--linie-stark); border-radius: var(--r-klein); background: #fff; }
.formular :where(input, select, textarea):focus-visible { outline-offset: 0; border-color: var(--tinte); }
.formular textarea { resize: vertical; min-height: 7rem; }
.formular select { appearance: none; padding-right: 2.4rem; cursor: pointer; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%235A5D66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .8rem center / 1rem; }
.formular [aria-invalid="true"] { border-color: var(--signal); }
.formular__hinweis { font-size: .8125rem; color: var(--tinte-weich); }
.formular__meldung { font-size: .9rem; }
.formular__meldung:empty { display: none; }
.formular__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.aehnlich { padding: .9rem 1rem; border-radius: var(--r-mittel); background: var(--seite); border: 1px solid var(--linie); }
.aehnlich__titel { font-size: .85rem; font-weight: 700; }
.aehnlich ul { margin-top: .35rem; display: grid; gap: .15rem; }
.aehnlich a { font-weight: 500; text-decoration: underline; text-underline-offset: .2em; text-decoration-color: var(--linie-stark); }

/* ==========================================================================
   FUSS im Aufbau der Hauptseite (homepage/assets/css/site.css,
   .site-footer): hoch und Navy, links Logo und Beschreibung, rechts zwei
   Spalten Verweise mit „//"-Etikett in Signal-Rot und darunter der rote
   Knopf; unten Copyright mit „//", Impressum und „nach oben". Dahinter das
   Logozeichen als feines Punktfeld, das zum Rand hin ausläuft.
   ========================================================================== */
.fuss { position: relative; overflow: hidden; background: var(--navy); color: #C5C7DC; padding-top: clamp(4.5rem, 9vw, 7.5rem); font-size: .9375rem; }
.fuss::before {
  content: ""; position: absolute; z-index: 0; top: -10px; left: max(-180px, calc(50% - 820px));
  width: min(640px, 100vw); aspect-ratio: 1; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.15) 1.1px, transparent 1.7px) 0 0 / 11px 11px;
  -webkit-mask: url(../assets/logos/logo-symbol.png) center / contain no-repeat, radial-gradient(closest-side, #000 30%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask: url(../assets/logos/logo-symbol.png) center / contain no-repeat, radial-gradient(closest-side, #000 30%, transparent 100%);
  mask-composite: intersect;
}
.fuss > .huelle { position: relative; z-index: 1; }
.fuss a:not(.btn) { color: inherit; }
.fuss__haupt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3.5rem 4rem; padding-bottom: clamp(3.5rem, 7vw, 6rem); }
.fuss__info { display: grid; gap: 1.75rem; align-content: start; justify-items: start; }
.fuss__logo img { height: 52px; width: auto; }
.fuss__etikett { display: flex; align-items: center; gap: .6rem; margin: 0 0 .75rem; font-size: .875rem; font-weight: 500; letter-spacing: 0; line-height: 1.4; color: #fff; }
.fuss__etikett::before { content: "//"; font-weight: 700; letter-spacing: -.06em; color: var(--signal); }
.fuss__info p { max-width: 30rem; color: #9A9CB8; line-height: 1.6; }
.fuss__verweise { display: grid; grid-template-columns: repeat(2, minmax(150px, 230px)); gap: 2.5rem 3.5rem; align-content: start; }
.fuss__verweise .fuss__etikett { margin-bottom: 1.5rem; }
.fuss__verweise ul { display: grid; gap: .875rem; }
.fuss__verweise ul a { color: #fff; font-weight: 500; font-size: 1rem; line-height: 1.4; }
.fuss__verweise ul a:hover, .fuss__unten a:not(.btn):hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--signal); }
.fuss__cta { grid-column: 1 / -1; justify-self: start; }
/* Verweis nach außen: Quadrat mit Pfeil hinter dem Namen. */
.fuss__extern { display: inline-flex; align-items: center; gap: .45rem; }
.fuss__extern svg { width: .95rem; height: .95rem; flex: none; opacity: .75; }
.fuss__extern:hover svg { opacity: 1; }
.fuss__unten { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; padding: 1.375rem 0; border-top: 1px solid #23244A; color: #9A9CB8; font-size: .875rem; }
.fuss__trenner { margin: 0 .35rem; color: var(--signal); font-weight: 700; letter-spacing: -.06em; }
.fuss__unten > span + a { margin-left: auto; }
.fuss__unten > a:not(.btn) { min-height: var(--tipp); display: inline-flex; align-items: center; }
.fuss__hoch svg { width: 18px; height: 18px; }

/* ==========================================================================
   UMBRÜCHE
   ========================================================================== */
@media (max-width: 860px) { .fuss__haupt { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .fuss__verweise { grid-template-columns: 1fr 1fr; gap: 2.25rem 1.5rem; } .fuss__cta { justify-self: stretch; } }
@media (max-width: 960px) {
  .hilfe__raster { grid-template-columns: minmax(0, 1fr); }
  .seitenleiste { position: static; }
  .titelfeld { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .kopf__cta { width: var(--tipp); padding: 0; }
  .kopf__cta-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .formular__zeile { grid-template-columns: minmax(0, 1fr); }
  .karte { padding: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  main, footer { transition: none; }
  .btn:hover, .btn:active, .taktil:hover, .taktil:active { transform: none; }
}