/* =========================================================================
   gauert-finanzbaustein.de
   Corporate Design der Bausparkasse Schwäbisch Hall, Layoutprinzip "Flächen".

   Die Seite ist die Fortsetzung des Flyers: gelbe Fläche trägt den Claim in
   schwarzer Fettschrift, Portrait daneben, SH-Logo darüber, hellgraue Karten
   mit dem roten Bausteine-Zeichen, roter Balken als Trenner. Wer den QR-Code
   scannt, soll dasselbe wiedererkennen.

   Alle Farben stammen aus dem BSH-Markenportal (Export vom 30.07.2026,
   vorlage/uploads/markenportal-colors-20260730/). Nichts hier ist geraten.

     1  Markenfarben
     2  Maßsystem und Schrift
     3  Grundlagen
     4  Typografie
     5  Flächen und Raster
     6  Logo und Bausteine-Zeichen
     7  Knöpfe und Links
     8  Hero
     9  Themen
    10  Arbeitsweise
    11  Kontakt und Formular
    12  Klebeleiste
    13  Fuß
    14  Rechtsseiten
    15  Prüfseite
    16  Bewegung
   ========================================================================= */


/* -------------------------------------------------------------------------
   1  MARKENFARBEN — aus dem Markenportal, nicht anfassen

   Das Interaktionsmodell ist das der BSH: Grundfarbe, heller bei Hover,
   dunkler bei Druck. Deshalb steht Hellrot beim Hover und Dunkelrot beim
   Drücken, nicht umgekehrt.
   ------------------------------------------------------------------------- */
:root {
  --gelb:        #FFF02D;   /* SH-Gelb            rgb(255,240,45)  */
  --gelb-hover:  #F0D71E;   /* SH-Dunkelgelb      rgb(240,215,30)  */
  --gelb-hell:   #FFF082;   /* SH-Hellgelb 2      rgb(255,240,130) */

  --rot:         #E6002D;   /* SH-Rot             rgb(230,0,45)    */
  --rot-hover:   #FA0041;   /* SH-Hellrot         rgb(250,0,65)    */
  --rot-druck:   #B70030;   /* SH-Dunkelrot       rgb(183,0,48)    */

  --grau:        #425866;   /* SH-Grau 2          rgb(66,88,102)   */
  --grau-hell:   #D0D5D9;   /* SH-Grau 5          rgb(208,213,217) */
  --gruen:       #00BB2D;   /* Grün (Check)       rgb(0,187,45)    */

  --schwarz:     #000000;
  --weiss:       #FFFFFF;

  /* Abgeleitet, NICHT im Markenportal: die hellgraue Kartenfläche des
     Flyers. Aus SH-Grau 5 aufgehellt, damit sie dem Portal folgt, wenn
     dort einmal ein Wert nachgezogen wird. */
  --flaeche:     color-mix(in srgb, var(--grau-hell) 30%, var(--weiss));
  --linie:       var(--grau-hell);

  /* Text auf dunklem Grund (Fuß). Aufgehelltes SH-Grau statt eines
     erfundenen Tons. */
  --grau-invers: color-mix(in srgb, var(--grau-hell) 72%, var(--schwarz));
}


/* -------------------------------------------------------------------------
   2  MASSSYSTEM UND SCHRIFT

   "Fuchs" ist die Hausschrift der Bausparkasse Schwäbisch Hall. Die Datei
   liegt NICHT im Projekt — sie ist lizenzpflichtig. Ohne sie greift Arial,
   das auf jedem Gerät vorhanden ist. Sobald eine Webfont-Lizenz und die
   woff2-Datei da sind: Datei nach assets/fonts/, Schalter
   'eigene_schriften' auf true. Siehe assets/css/schriften.css.
   ------------------------------------------------------------------------- */
:root {
  --schrift: Fuchs, Arial, Helvetica, "Helvetica Neue", sans-serif;

  /* Der Flyer setzt Überschriften fett und eng. Web-Obergrenze bewusst
     unter der Plakatgröße: die Seite wird am Handy gelesen.
     3,5 rem statt 4 rem, weil der Claim in der halbbreiten gelben Fläche
     sonst mit einer kurzen Waisenzeile ("Auf diese") umbricht. */
  --t-claim: clamp(2.15rem, 1.3rem + 3.4vw, 3.5rem);
  --t-h2:    clamp(1.5rem, 1.2rem + 1.3vw, 2.25rem);
  --t-h3:    clamp(1.125rem, 1.05rem + 0.4vw, 1.3rem);
  --t-lead:  clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --t-basis: 1.0625rem;
  --t-klein: 0.9375rem;
  --t-label: 0.8125rem;

  --s1: 0.5rem;
  --s2: 0.75rem;
  --s3: 1rem;
  --s4: 1.5rem;
  --s5: 2rem;
  --s6: 3rem;
  --s7: 4rem;
  --s8: 6rem;

  --band-y: clamp(3rem, 1.75rem + 5vw, 5.5rem);
  --rand-x: clamp(1.25rem, 0.5rem + 3vw, 2.5rem);
  --breite: 72rem;
  --spalte: 34rem;

  /* Der Flyer arbeitet mit harten Kanten. Nur Bedienelemente werden leicht
     gerundet, Flächen nicht. */
  --radius: 4px;

  --kurve: cubic-bezier(0.22, 1, 0.36, 1);
  --dauer: 140ms;

  --z-klebeleiste: 20;
  --z-uebersprung: 30;
}


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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-bottom: 5.5rem;
}

body {
  margin: 0;
  background: var(--weiss);
  color: var(--schwarz);
  font-family: var(--schrift);
  font-size: var(--t-basis);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

:focus-visible {
  outline: 3px solid var(--schwarz);
  outline-offset: 2px;
}
/* Auf Gelb und auf Rot ist Schwarz der sichtbarste Fokusring; auf Schwarz
   muss er weiß werden. */
.flaeche--schwarz :focus-visible { outline-color: var(--weiss); }

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

.uebersprung {
  position: absolute;
  left: var(--s3); top: var(--s3);
  z-index: var(--z-uebersprung);
  padding: 0.75rem 1.1rem;
  background: var(--schwarz);
  color: var(--weiss);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 180ms var(--kurve);
}
.uebersprung:focus { transform: translateY(0); }

/* Markierte Lücke für eine noch fehlende Pflichtangabe. Soll auffallen. */
.luecke {
  display: inline-block;
  background: transparent;
  color: var(--rot-druck);
  border: 1.5px dashed var(--rot);
  padding: 0.1em 0.45em;
  font-size: 0.9em;
  font-weight: 700;
  font-style: normal;
}
.flaeche--schwarz .luecke { color: var(--weiss); border-color: var(--weiss); }


/* -------------------------------------------------------------------------
   4  TYPOGRAFIE

   Eine Familie, Gewicht und Größe machen die Hierarchie — so hält es der
   Flyer. Keine zweite Schrift, kein Serif-Kontrast.
   ------------------------------------------------------------------------- */
h1, h2, h3 {
  margin: 0;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: var(--t-claim); letter-spacing: -0.03em; line-height: 1.05; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.25; letter-spacing: -0.01em; }

p { margin: 0 0 var(--s3); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.lead { font-size: var(--t-lead); line-height: 1.5; max-width: var(--spalte); }
.klein { font-size: var(--t-klein); }

/* Kleines gesperrtes Versal-Label in SH-Grau. Kommt so vom Flyer und ist
   damit Teil des Corporate Designs, nicht Zierrat. */
.label {
  display: block;
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grau);
  margin: 0 0 var(--s2);
}
.flaeche--schwarz .label { color: var(--grau-invers); }
.flaeche--gelb .label { color: var(--schwarz); }

.leise { color: var(--grau); }
.flaeche--schwarz .leise { color: var(--grau-invers); }


/* -------------------------------------------------------------------------
   5  FLÄCHEN UND RASTER
   ------------------------------------------------------------------------- */
.flaeche { padding: var(--band-y) var(--rand-x); }
.flaeche--gelb    { background: var(--gelb);    color: var(--schwarz); }
.flaeche--grau    { background: var(--flaeche); color: var(--schwarz); }
.flaeche--schwarz { background: var(--schwarz); color: var(--weiss); }
.flaeche--schwarz h1, .flaeche--schwarz h2, .flaeche--schwarz h3 { color: var(--weiss); }
.flaeche--knapp   { padding-top: var(--s5); padding-bottom: var(--s5); }

.inhalt { max-width: var(--breite); margin: 0 auto; }
.inhalt--eng { max-width: 46rem; }

/* Der rote Balken. Auf dem Flyer trennt er die gelbe Fläche vom Fußtext.
   Kein Seitenstreifen an einem Kasten, sondern ein eigenes Element. */
.rotbalken {
  height: 10px;
  background: var(--rot);
  border: 0;
  margin: 0;
  /* Auf dem Flyer läuft er nicht über die ganze Breite. */
  max-width: 18rem;
}


/* -------------------------------------------------------------------------
   6  LOGO UND BAUSTEINE-ZEICHEN
   ------------------------------------------------------------------------- */
.sh-logo { display: block; height: auto; }
.sh-logo--klein { width: 148px; }
.sh-logo--mittel { width: 190px; }

/* Das Logo im weißen Kasten über dem Portrait, wie auf dem Flyer. */
.logokasten {
  position: absolute;
  left: 0; bottom: 0;
  background: var(--weiss);
  padding: 0.85rem 1.1rem 0.75rem;
  max-width: 82%;
}
.logokasten__name {
  display: block;
  margin-top: 0.35rem;
  font-size: var(--t-klein);
  font-weight: 700;
  line-height: 1.25;
}
.logokasten__rolle {
  display: block;
  font-size: var(--t-label);
  font-weight: 400;
  color: var(--grau);
  line-height: 1.3;
}

/* Das rote Bausteine-Zeichen als Aufzählungsmarke der Themenkarten. */
.bausteine { display: block; width: 26px; height: auto; flex: none; }
.bausteine--gross { width: 84px; }

/* Schmale gelbe Kopfleiste der Unterseiten. */
.kopfleiste {
  background: var(--gelb);
  padding: var(--s3) var(--rand-x);
}
.kopfleiste a { display: inline-block; }


/* -------------------------------------------------------------------------
   7  KNÖPFE UND LINKS

   Rot ist im BSH-System die Interaktionsfarbe. Weiß auf SH-Rot liegt bei
   4,77:1 und damit über der Anforderung auch für normalen Text; die
   Beschriftung ist zusätzlich 19 px fett.
   ------------------------------------------------------------------------- */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 56px;
  padding: 0.9rem 1.6rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dauer) var(--kurve),
              border-color var(--dauer) var(--kurve);
}

.knopf--haupt { background: var(--rot); color: var(--weiss); }
.knopf--haupt:hover  { background: var(--rot-hover); }
.knopf--haupt:active { background: var(--rot-druck); }

/* Auf Gelb braucht der zweite Knopf eine harte schwarze Kante, sonst
   verschwimmt er in der Fläche. */
.knopf--rand {
  background: transparent;
  border-color: var(--schwarz);
  color: var(--schwarz);
}
.knopf--rand:hover { background: var(--schwarz); color: var(--gelb); }
.flaeche--grau .knopf--rand:hover,
.knopf--rand:hover { color: var(--weiss); }
.flaeche--gelb .knopf--rand:hover { color: var(--gelb); }

.flaeche--schwarz .knopf--rand { border-color: var(--weiss); color: var(--weiss); }
.flaeche--schwarz .knopf--rand:hover { background: var(--weiss); color: var(--schwarz); }

.knopf--voll { width: 100%; }

.knopfreihe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s5);
}
.knopfreihe .knopf { flex: 1 1 15rem; }

/* Textlink mit Pfeil. Auf Weiß trägt Dunkelrot (6,4:1), nicht das
   leuchtende SH-Rot — das käme als Fließtext nicht auf 4,5:1. */
.pfeillink {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  /* Senkrechte Polsterung bringt die Trefffläche auf 44 px. Ohne sie ist der
     Link 26 px hoch — normkonform, aber mit klammen Fingern nicht zu treffen.
     Die Unterstreichung liegt deshalb auf text-decoration statt auf einem
     Rahmen, sonst rutschte sie mit der Polsterung nach unten weg. */
  padding: 0.6rem 0;
  color: var(--rot-druck);
  font-weight: 700;
  text-decoration: none;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.pfeillink:hover { text-decoration: underline; }
.pfeillink .pfeil { transition: transform var(--dauer) var(--kurve); flex: none; }
.pfeillink:hover .pfeil { transform: translateX(3px); }
.flaeche--gelb .pfeillink,
.flaeche--schwarz .pfeillink { color: currentColor; }

.textlink {
  color: var(--rot-druck);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.flaeche--gelb .textlink,
.flaeche--schwarz .textlink { color: currentColor; }


/* -------------------------------------------------------------------------
   8  HERO — Layoutprinzip Flächen

   Mobil: Portrait, darunter die gelbe Fläche mit Claim.
   Ab 60rem: Portrait links, gelbe Fläche rechts daneben.
   ------------------------------------------------------------------------- */
.hero { padding: 0; }

.hero__raster {
  display: grid;
  grid-template-columns: 1fr;
  max-width: var(--breite);
  margin: 0 auto;
}

.hero__bild {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--flaeche);
  overflow: hidden;
}
.hero__bild img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 28%;
}

/* Ohne Foto: gelbe Fläche mit dem Bausteine-Zeichen. Sieht absichtlich
   aus, nicht kaputt. */
.hero__bild--leer {
  display: grid;
  place-items: center;
  gap: var(--s3);
  background: var(--gelb);
  padding: var(--s5);
  text-align: center;
}
.hero__bild--leer p {
  font-size: var(--t-klein);
  max-width: 18rem;
  color: var(--schwarz);
}

.hero__feld {
  background: var(--gelb);
  padding: var(--s5) var(--rand-x) var(--s6);
}
.hero__anlass {
  display: inline-block;
  background: var(--schwarz);
  color: var(--gelb);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.35rem 0.7rem;
  margin-bottom: var(--s4);
}
.hero__subline {
  font-size: var(--t-lead);
  line-height: 1.45;
  max-width: 30rem;
  margin-top: var(--s4);
  font-weight: 400;
}

/* Der Streifen unter der gelben Fläche: roter Balken, dann die
   Zuordnungszeile — genau die Reihenfolge des Flyers. */
.hero__fuss {
  max-width: var(--breite);
  margin: 0 auto;
  padding: var(--s4) var(--rand-x) var(--s6);
}
/* Die drei Vertrauenspunkte. Untereinander am Handy, nebeneinander ab
   Tablet — nie zweispaltig, weil drei Punkte in zwei Spalten eine Waise
   erzeugen. Der Haken trägt SH-Rot; die Aussage steht im Text daneben,
   die Farbe ist also nie der einzige Bedeutungsträger.

   Ohne eigene Trennlinie: Der rote Balken darüber ist der Trenner. Zwei
   Linien übereinander wären eine zu viel. */
.vertrauen {
  display: grid;
  gap: var(--s2);
  margin: var(--s4) 0 0;
  padding: 0;
  list-style: none;
}
.vertrauen li {
  display: flex;
  align-items: start;
  gap: 0.6rem;
  font-size: var(--t-klein);
  line-height: 1.45;
}
.vertrauen svg {
  flex: none;
  color: var(--rot);
  margin-top: 0.1rem;
}

@media (min-width: 48rem) {
  .vertrauen { grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
}

@media (min-width: 60rem) {
  .hero__raster { grid-template-columns: 0.85fr 1.15fr; align-items: stretch; }
  .hero__bild { aspect-ratio: auto; min-height: 30rem; }
  .hero__feld {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--s7) var(--s7) var(--s7) var(--s6);
  }
}


/* -------------------------------------------------------------------------
   9  THEMEN

   Gelbe Kopfleiste mit Logo und Überschrift, darunter hellgraue Karten mit
   dem roten Bausteine-Zeichen. So macht es der Flyer, deshalb sind Karten
   hier richtig — das Corporate Design gibt sie vor.
   ------------------------------------------------------------------------- */
.themen__kopf {
  background: var(--gelb);
  padding: var(--s4) var(--rand-x);
}
.themen__kopf .inhalt {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2) var(--s4);
}
.themen__kopf h2 { margin: 0; }

.themen {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s2);
}
.thema {
  display: flex;
  gap: var(--s3);
  background: var(--flaeche);
  padding: var(--s4);
}
.thema__text { min-width: 0; }
.thema h3 { margin-bottom: 0.4rem; }
.thema p {
  font-size: var(--t-klein);
  line-height: 1.55;
  color: var(--grau);
  margin-bottom: var(--s3);
}
.thema .pfeillink { font-size: var(--t-klein); }

/* Zwei Wege je Karte, untereinander und klar gewichtet: oben der rote
   Pfeillink zum Angebot, darunter der leise Weg ins Gespräch. Nebeneinander
   ginge nicht — auf 375 px stünden beide Linktexte im Umbruch. */
.thema__wege {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/* Grau und unterstrichen statt fett und rot. Die Unterstreichung steht
   dauerhaft, weil Grau allein den Link sonst nicht als Link ausweist.
   SH-Grau 2 auf der Kartenfläche misst 6,7:1 — dieselbe Paarung wie der
   Fließtext der Karte. */
.thema__leise {
  padding: 0.6rem 0;          /* wie .pfeillink: Trefffläche 44 px */
  font-size: var(--t-klein);
  color: var(--grau);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.thema__leise:hover { color: var(--schwarz); }

@media (min-width: 60rem) {
  .themen { grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
  .thema { flex-direction: column; padding: var(--s5); }
}


/* -------------------------------------------------------------------------
   10  ZUR PERSON UND ARBEITSWEISE

   Beide Abschnitte tragen dasselbe Raster: links Label und Überschrift,
   rechts der Text. Zwei Bänder mit demselben Aufbau lesen sich als Paar —
   erst der Mensch, dann seine Methode.
   ------------------------------------------------------------------------- */
.person__raster,
.arbeitsweise__raster {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s4);
}
.person p,
.arbeitsweise p {
  font-size: var(--t-lead);
  line-height: 1.55;
  max-width: var(--spalte);
}
.person p + p,
.arbeitsweise p + p { margin-top: var(--s4); }

.person__rolle {
  margin-top: var(--s2);
  font-size: var(--t-klein) !important;
  line-height: 1.4;
  color: var(--grau-invers);
}

/* Der Kernsatz. Kein Anführungszeichen-Ornament, nur die harte rote Kante
   des Flyers — dasselbe Rot wie das Bausteine-Zeichen. */
.aussage {
  margin: var(--s5) 0 0;
  padding-left: var(--s3);
  border-left: 4px solid var(--rot);
  font-size: var(--t-lead);
  font-weight: 700;
  line-height: 1.4;
  max-width: var(--spalte);
}

.person__weg,
.arbeitsweise__weg { margin-top: var(--s4); }

.arbeitsweise__listentitel { margin-bottom: var(--s2) !important; }

/* Die vier Punkte, jeder mit dem Bausteine-Zeichen als Aufzählungsmarke.
   Ein eigenes Zeichen statt eines Punktes: Es ist ohnehin die Marke der
   Karten, und der Block bleibt damit im System des Flyers. */
.punkte {
  list-style: none;
  margin: 0 0 var(--s4);
  padding: 0;
  max-width: var(--spalte);
  display: grid;
  gap: var(--s2);
}
.punkte li {
  display: flex;
  align-items: start;
  gap: 0.7rem;
  font-size: var(--t-lead);
  line-height: 1.45;
}
.bausteine--punkt {
  flex: none;
  width: 1.1rem;
  margin-top: 0.45rem;
}

@media (min-width: 52rem) {
  .person__raster,
  .arbeitsweise__raster {
    /* 16rem statt 14: Hier steht die Überschrift, bei 1280 px in 35,8 px
       Fettschrift. Ihre längste Zeile misst gemessene 220 px und stünde in
       14 rem (224 px) auf Kante — mit der Hausschrift "Fuchs" statt Arial
       kippt so etwas. 16 rem lässt Luft, ohne die Textspalte zu drücken. */
    grid-template-columns: 16rem 1fr;
    gap: var(--s7);
    align-items: start;
  }
}


/* -------------------------------------------------------------------------
   11  KONTAKT UND FORMULAR
   ------------------------------------------------------------------------- */
.kontakt__raster {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s6);
}
@media (min-width: 56rem) {
  .kontakt__raster {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--s8);
    align-items: start;
  }
}

.formular { margin-top: var(--s5); }
.feld { margin-bottom: var(--s4); }

.feld > label {
  display: block;
  font-weight: 700;
  font-size: var(--t-basis);
  margin-bottom: 0.4rem;
}
.feld__hinweis {
  display: block;
  font-weight: 400;
  font-size: var(--t-klein);
  color: var(--grau);
  margin-top: 0.1rem;
}

.feld input[type="text"],
.feld input[type="tel"],
.feld input[type="email"],
.feld select,
.feld textarea {
  width: 100%;
  min-height: 52px;
  padding: 0.8rem 0.9rem;
  background: var(--weiss);
  border: 2px solid var(--grau-hell);
  border-radius: var(--radius);
  color: var(--schwarz);
  font-family: inherit;
  font-size: var(--t-basis);
  line-height: 1.5;
  transition: border-color var(--dauer) var(--kurve);
}
.feld textarea { min-height: 7rem; resize: vertical; }
.feld select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 49%, var(--schwarz) 50%),
                    linear-gradient(-45deg, transparent 49%, var(--schwarz) 50%);
  background-size: 7px 7px, 7px 7px;
  background-position: calc(100% - 20px) calc(50% + 2px),
                       calc(100% - 13px) calc(50% + 2px);
  background-repeat: no-repeat;
  padding-right: 2.75rem;
}
.feld input:hover, .feld select:hover, .feld textarea:hover { border-color: var(--grau); }
.feld ::placeholder { color: var(--grau); opacity: 1; }

/* Fehler: Rand UND Symbol UND Text — nie nur Farbe. Wichtig bei
   Rot-Grün-Sehschwäche, und in einem Rot-Gelb-System doppelt wichtig. */
.feld--fehler input,
.feld--fehler select,
.feld--fehler textarea { border-color: var(--rot); }

.feldfehler {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  margin-top: 0.4rem;
  color: var(--rot-druck);
  font-size: var(--t-klein);
  font-weight: 700;
}
.feldfehler svg { flex: none; margin-top: 0.15rem; }

.zustimmung {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  margin-bottom: var(--s4);
}
.zustimmung input[type="checkbox"] {
  width: 28px; height: 28px;
  margin: 0;
  accent-color: var(--rot);
  flex: none;
}
.zustimmung label {
  font-size: var(--t-klein);
  line-height: 1.55;
  padding: 0.25rem 0;
  cursor: pointer;
}

.honigtopf {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.meldung {
  display: flex;
  gap: var(--s2);
  padding: var(--s4);
  margin-bottom: var(--s5);
}
.meldung svg { flex: none; margin-top: 0.2rem; }
.meldung h3 { font-size: var(--t-h3); margin-bottom: 0.4rem; }
.meldung p { font-size: var(--t-basis); }
.meldung--gut { background: var(--gelb); color: var(--schwarz); }
.meldung--gut svg { color: var(--schwarz); }
.meldung--schlecht {
  background: var(--weiss);
  border: 2px solid var(--rot);
  color: var(--schwarz);
}
.meldung--schlecht svg { color: var(--rot-druck); }

.direktkontakt { border-top: 4px solid var(--schwarz); padding-top: var(--s4); }
.direktkontakt h3 { margin-bottom: var(--s4); }
.direktkontakt dl { margin: 0; }
.direktkontakt dt {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grau);
  margin-bottom: 0.15rem;
}
.direktkontakt dd {
  margin: 0 0 var(--s4);
  font-size: var(--t-lead);
  font-weight: 700;
}
.direktkontakt dd a { color: var(--schwarz); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.direktkontakt dd a:hover { color: var(--rot-druck); }

/* Steht bewusst unter der Rufnummer und nicht im Fließtext weiter oben:
   genau hier überlegt jemand, ob er wirklich anruft. */
.direktkontakt__zusage {
  margin: 0 0 var(--s4);
  font-size: var(--t-klein);
  line-height: 1.5;
  color: var(--grau);
}


/* -------------------------------------------------------------------------
   11b  KONFIGURATOR

   Segmentknöpfe statt Schieberegler. Fünf feste Stufen trifft man mit
   klammen Fingern in der Sonne per Knopf sicherer als per Regler, und ein
   <input type="range"> zeigt ohne JavaScript keinen Wert an.

   Das echte Bedienelement ist der Radiobutton, er liegt nur optisch
   verborgen unter dem Knopf — nicht mit display:none, sonst wäre er für
   Tastatur und Screenreader weg.
   ------------------------------------------------------------------------- */
.konf {
  border: 0;
  border-left: 4px solid var(--gelb);
  margin: 0 0 var(--s5);
  padding: 0 0 0 var(--s3);
}
.konf__einleitung {
  font-size: var(--t-klein);
  color: var(--grau);
  margin-bottom: var(--s4);
  max-width: var(--spalte);
}
.konf__reihe { margin-bottom: var(--s4); }
.konf__frage {
  font-size: var(--t-klein);
  font-weight: 700;
  margin-bottom: var(--s2);
}
.konf__knoepfe { display: flex; flex-wrap: wrap; gap: var(--s1); }

.konf__knopf { position: relative; }
.konf__knopf input {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.konf__knopf span {
  display: block;
  /* 48 px Trefffläche: Der erste Kontakt ist draußen am Handy. */
  min-height: 48px;
  padding: 0.8rem 0.9rem;
  border: 2px solid var(--linie);
  background: var(--weiss);
  font-size: var(--t-klein);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  transition: background var(--dauer) var(--kurve),
              border-color var(--dauer) var(--kurve);
}
.konf__knopf:hover span { border-color: var(--schwarz); }
/* Gewählt = SH-Gelb mit schwarzem Rand. Gelb allein trägt die Bedeutung
   nicht — der Rand wird gleichzeitig schwarz und dicker sichtbar. */
.konf__knopf input:checked + span {
  background: var(--gelb);
  border-color: var(--schwarz);
}
.konf__knopf input:focus-visible + span {
  outline: 3px solid var(--schwarz);
  outline-offset: 2px;
}

/* Die Zusammenfassung. Erscheint erst, wenn alle drei Angaben stehen —
   ein halber Satz ist schlechter als keiner. Ausgeblendet wird über
   display, NIEMALS über opacity: In den In-App-Browsern von Facebook und
   Instagram bleibt eine Deckkraft-Animation im Anfangsbild stehen, und
   genau von dort kommt der Verkehr dieser Kampagne. */
.konf__satz {
  margin: var(--s4) 0 0;
  padding: var(--s3);
  background: var(--flaeche);
  font-size: var(--t-klein);
  font-weight: 700;
  line-height: 1.5;
  max-width: var(--spalte);
}
.konf__satz--leer { display: none; }


/* -------------------------------------------------------------------------
   12  KLEBELEISTE
   ------------------------------------------------------------------------- */
.klebeleiste {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-klebeleiste);
  display: none;
  gap: var(--s1);
  padding: 0.6rem;
  padding-bottom: max(0.6rem, env(safe-area-inset-bottom));
  background: var(--schwarz);
  transform: translateY(105%);
  transition: transform 280ms var(--kurve);
}
.klebeleiste .knopf { flex: 1; min-height: 52px; font-size: 1.0625rem; }
.klebeleiste .knopf--rand { border-color: var(--weiss); color: var(--weiss); }
.klebeleiste .knopf--rand:hover { background: var(--weiss); color: var(--schwarz); }

@media (max-width: 59.99rem) {
  .klebeleiste { display: flex; }
  .klebeleiste.ist-sichtbar { transform: translateY(0); }
}


/* -------------------------------------------------------------------------
   13  FUSS
   ------------------------------------------------------------------------- */
.fuss { font-size: var(--t-klein); }
.fuss__oben {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--grau);
}
.fuss__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  list-style: none;
  margin: 0; padding: 0;
}
.fuss__links a { color: var(--weiss); text-decoration: none; border-bottom: 1px solid var(--grau); }
.fuss__links a:hover { border-bottom-color: var(--weiss); }
.fuss__hinweis {
  margin-top: var(--s4);
  color: var(--grau-invers);
  max-width: 46rem;
  line-height: 1.6;
}
.fuss__hinweis a { color: var(--weiss); }


/* -------------------------------------------------------------------------
   14  RECHTSSEITEN
   ------------------------------------------------------------------------- */
.rechtsseite { max-width: 44rem; margin: 0 auto; }
.rechtsseite h1 { font-size: var(--t-h2); margin-bottom: var(--s5); }
.rechtsseite h2 {
  font-size: var(--t-h3);
  margin: var(--s6) 0 var(--s3);
  padding-top: var(--s4);
  border-top: 2px solid var(--grau-hell);
}
.rechtsseite h3 { font-size: 1.0625rem; font-weight: 700; margin: var(--s4) 0 var(--s2); }
.rechtsseite p, .rechtsseite li { max-width: 38rem; }
.rechtsseite ul, .rechtsseite ol { padding-left: 1.3rem; margin: 0 0 var(--s3); }
.rechtsseite li { margin-bottom: 0.4rem; }
.rechtsseite dl { margin: 0 0 var(--s3); }
.rechtsseite dt { font-weight: 700; margin-top: var(--s3); }
.rechtsseite dd { margin: 0.15rem 0 0; }
.rechtsseite address { font-style: normal; }
.zurueck { display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: var(--s5); }


/* -------------------------------------------------------------------------
   15  PRÜFSEITE
   ------------------------------------------------------------------------- */
.pruef__liste { list-style: none; padding: 0; margin: 0; }
.pruef__liste li {
  display: flex;
  gap: var(--s2);
  align-items: baseline;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--grau-hell);
}
.pruef__zeichen { flex: none; font-weight: 700; width: 1.6rem; }
.pruef__gut  { color: var(--schwarz); }
.pruef__warn { color: var(--rot-druck); font-weight: 700; }
.pruef__pfad { font-family: ui-monospace, Consolas, monospace; font-size: 0.85rem; color: var(--grau); }


/* -------------------------------------------------------------------------
   16  BEWEGUNG

   Hier wird bewusst KEINE Deckkraft animiert. Erste Fassung tat das und war
   nachweisbar kaputt: In einem Browser, der die Seite nicht aktiv zeichnet,
   läuft die Zeitachse von CSS-Animationen nicht an, und mit
   animation-fill-mode "both" bleibt das Element im Anfangsbild hängen — also
   unsichtbar. Betroffen sind die In-App-Browser von Facebook und Instagram
   sowie Vorschau-Renderer, also ausgerechnet die Kanäle für Stufe 2.

   Deshalb bewegt sich nur die Position. Bleibt die Zeitachse stehen, sitzt
   der Text 10 px tiefer und ist vollständig lesbar.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .hebt-sich { animation: hebt-sich 460ms var(--kurve) var(--verzug, 0ms) both; }
}

.verzug-1 { --verzug:  70ms; }
.verzug-2 { --verzug: 140ms; }
.verzug-3 { --verzug: 210ms; }
.verzug-4 { --verzug: 280ms; }

@keyframes hebt-sich {
  from { transform: translateY(10px); }
  to   { transform: none; }
}

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


/* -------------------------------------------------------------------------
   Druck
   ------------------------------------------------------------------------- */
@media print {
  .klebeleiste, .uebersprung, .knopfreihe { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .flaeche, .flaeche--gelb, .flaeche--grau, .flaeche--schwarz {
    background: #fff !important; color: #000 !important; padding: 0 0 1.5rem;
  }
  .flaeche--schwarz h1, .flaeche--schwarz h2, .flaeche--schwarz h3 { color: #000 !important; }
  .hero__bild, .hero__feld { background: #fff !important; }
}