/* =========================================================
   D3MO GmbH Website: zentrales Stylesheet
   Regeln: nur Klassen, alle Designwerte als Variablen in :root,
   Umbruchpunkte nur 1024 px (Tablet) und 767 px (Handy).
   ========================================================= */

/* Keine Schriftdateien: Segoe UI und Aptos dürfen nicht als Webschrift ausgeliefert werden.
   Genutzt wird die auf dem Gerät installierte Schrift (Windows: Segoe UI, Office: Aptos),
   sonst die Systemschrift. Spart ca. 2,3 MB pro Seitenaufruf. */

:root {
  /* Farben. Quelle: brandbook_compressed.pdf, Seite 6 (Color Palette) */
  --farbe-dunkelblau: #030733;
  --farbe-blau: #3575E5;
  --farbe-rot: #FE494E;
  /* Hintergrundfarbe (nicht im Brandguide benannt, neutrales Weiß) */
  --farbe-weiss: #FFFFFF;
  /* Ruhige Zwischenfläche: sehr helle Abstufung von Blau #3575E5 (nicht im Brandguide benannt) */
  --farbe-flaeche: #F3F6FD;
  /* Hover-Fläche für den sekundären Button: helle Abstufung von Blau #3575E5 */
  --farbe-flaeche-hover: #E6EEFC;

  /* Schriften. Quelle: brandbook_compressed.pdf, Seite 7 (Typography) */
  --schrift-ueberschrift: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --schrift-text: "Aptos", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --schriftstaerke-normal: 400;
  --schriftstaerke-fett: 700;

  /* Schriftgrößen */
  --schrift-h1: 56px;
  --schrift-h1-tablet: 44px;
  --schrift-h1-mobile: 34px;
  --schrift-h2: 40px;
  --schrift-h2-tablet: 34px;
  --schrift-h2-mobile: 28px;
  --schrift-h3: 24px;
  --schrift-h3-tablet: 22px;
  --schrift-h3-mobile: 20px;
  --schrift-text-gross: 20px;
  --schrift-text-gross-mobile: 18px;
  --schrift-text-normal: 18px;
  --schrift-text-normal-mobile: 17px;
  --schrift-klein: 16px;
  --schrift-button: 19px;
  --schrift-menue: 17px;
  --schrift-nummer: 22px;

  /* Zeilenhöhen */
  --zeilenhoehe-eng: 1.15;
  --zeilenhoehe-mittel: 1.3;
  --zeilenhoehe-text: 1.6;

  /* Laufweite */
  --laufweite-dachzeile: 0.08em;
  --laufweite-h1: -0.02em;
  --laufweite-h2: -0.015em;
  --laufweite-h3: -0.005em;

  /* Druckgefühl beim Klick auf Buttons */
  --druck-skalierung: 0.98;

  /* Breiten */
  --inhalt-max: 1280px;
  --text-max: 568px;
  --karte-basis: 260px;
  --karte-basis-tablet: 340px;
  --karte-basis-mobile: 100%;
  --karte-flach-basis: 320px;
  --schritt-basis: 200px;
  --schritt-basis-tablet: 240px;
  --schritt-basis-mobile: 100%;
  --spalte-basis: 420px;
  --spalte-basis-mobile: 100%;
  --fuss-spalte-basis: 180px;
  --fuss-logo-basis: 240px;
  --voll: 100%;
  --ebene-kopf: 10;
  --kopf-mindesthoehe: 123px;
  --kopf-oben: 0;
  --hauptinhalt-mindesthoehe: 100dvh;

  /* Abstände */
  --abstand-null: 0;
  --abstand-xs: 8px;
  --abstand-s: 16px;
  --abstand-m: 24px;
  --abstand-l: 40px;
  --abstand-xl: 64px;
  --abstand-xl-mobile: 40px;

  /* Innenabstände */
  --abschnitt-innen: 96px;
  --abschnitt-innen-tablet: 72px;
  --abschnitt-innen-mobile: 56px;
  --inhalt-rand: 40px;
  --inhalt-rand-tablet: 32px;
  --inhalt-rand-mobile: 24px;
  --karte-innen: 32px;
  --karte-innen-mobile: 24px;
  --button-innen-seite: 28px;
  --feld-innen: 14px;
  --platzhalter-innen: 16px;
  --platzhalter-kurz-innen-hoch: 4px;
  --platzhalter-kurz-innen-seite: 10px;

  /* Logo. Quelle: brandbook_compressed.pdf, Seiten 3 und 4 */
  --logo-hoehe: 75px;
  --logo-schutzraum: 24px;

  /* Eckenrundungen */
  --rundung-klein: 4px;
  --rundung-karte: 8px;
  --rundung-rund: 50%;

  /* Schatten (auf Basis von Dunkelblau #030733) */
  --schatten-kopf: 0 2px 12px rgba(3, 7, 51, 0.08);
  --schatten-karte: 0 4px 16px rgba(3, 7, 51, 0.08);
  --schatten-button: 0 6px 16px rgba(3, 7, 51, 0.28);

  /* Übergänge und Bewegung */
  --dauer-uebergang: 200ms;
  --dauer-einblenden: 500ms;
  --dauer-druck: 160ms;
  --dauer-menue: 200ms;
  --staffel-versatz: 50ms;
  /* Kräftiges Ausklingen: startet schnell, wirkt direkt */
  --kurve-aus: cubic-bezier(0.23, 1, 0.32, 1);
  --menue-weg: -8px;
  --hover-hub: -3px;
  --einblend-weg: 12px;
  --deckkraft-null: 0;
  --deckkraft-voll: 1;

  /* Symbole und Abzeichen */
  --symbol-groesse: 32px;
  --symbol-klein: 22px;
  --symbol-gross: 56px;
  --abzeichen-hoehe: 96px;
  --logoplatzhalter-breite: 200px;
  --abzeichen-breit-max: 230px;
  --partnerlogo-hoehe: 48px;
  --partnerlogo-hoehe-mobile: 36px;
  --partnerlogo-max: 180px;
  --partnerlogo-max-mobile: 130px;
  --partnerlogo-gross-hoehe: 80px;
  --partnerlogo-gross-hoehe-mobile: 60px;
  --partnerlogo-gross-max: 230px;
  --partnerlogo-gross-max-mobile: 170px;
  --badge-hoehe: 150px;
  --badge-hoehe-mobile: 120px;
  --badge-max: 200px;
  --badge-max-mobile: 150px;
  --nummer-groesse: 44px;

  /* Buttons und Felder */
  --button-hoehe: 52px;
  --menue-knopf-groesse: 48px;
  --feld-hoehe: 48px;
  --textfeld-hoehe: 160px;

  /* Rahmenbreiten */
  --rahmen-duenn: 1px;
  --rahmen-mittel: 2px;
  --rahmen-fokus: 3px;
  --rahmen-akzent: 4px;
  --fokus-abstand: 3px;
  --unterstrich-dicke: 3px;
  --unterstrich-abstand: 6px;

  /* Seitenverhältnisse */
  --verhaeltnis-bild: 4 / 3;
  --verhaeltnis-bild-tablet: 16 / 9;
  --verhaeltnis-bild-mobile: 16 / 9;
  --verhaeltnis-portrait: 1 / 1;
  --portrait-ausschnitt: center top;
  --portrait-max: 360px;
}

/* ---------- Seite ---------- */

.seite {
  margin: var(--abstand-null);
  background-color: var(--farbe-weiss);
  color: var(--farbe-dunkelblau);
  font-family: var(--schrift-text);
  font-size: var(--schrift-text-normal);
  line-height: var(--zeilenhoehe-text);
}

.hauptinhalt {
  display: flex;
  flex-direction: column;
  /* Jede Seite scrollt, damit die Breite beim Seitenwechsel nicht springt */
  min-height: var(--hauptinhalt-mindesthoehe);
}

/* ---------- Abschnitte und Inhalt ---------- */

.abschnitt {
  display: flex;
  justify-content: center;
  padding-top: var(--abschnitt-innen);
  padding-bottom: var(--abschnitt-innen);
  background-color: var(--abschnitt-hintergrund, var(--farbe-weiss));
}

.abschnitt-dunkel {
  --abschnitt-hintergrund: var(--farbe-dunkelblau);
  --titel-farbe: var(--farbe-weiss);
  --text-farbe: var(--farbe-weiss);
  --link-farbe: var(--farbe-weiss);
}

.abschnitt-hell {
  --abschnitt-hintergrund: var(--farbe-flaeche);
}

.abschnitt-kompakt {
  --abschnitt-innen: var(--abstand-l);
  --abschnitt-innen-tablet: var(--abstand-l);
  --abschnitt-innen-mobile: var(--abstand-l);
}

.inhalt {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-l);
  width: var(--voll);
  max-width: var(--inhalt-max);
  padding-left: var(--inhalt-rand);
  padding-right: var(--inhalt-rand);
  box-sizing: border-box;
}

.stapel {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-m);
  max-width: var(--text-max);
}

.stapel-eng {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-s);
}

.zweispaltig {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-xl);
}

.zweispaltig-oben {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--abstand-xl);
}

.spalte {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-m);
  flex: 1 1 var(--spalte-basis);
  min-width: 0;
}

/* ---------- Texte ---------- */

.ueberschrift-1 {
  margin: var(--abstand-null);
  font-family: var(--schrift-ueberschrift);
  font-size: var(--schrift-h1);
  font-weight: var(--schriftstaerke-fett);
  line-height: var(--zeilenhoehe-eng);
  letter-spacing: var(--laufweite-h1);
  text-wrap: balance;
  color: var(--titel-farbe, var(--farbe-dunkelblau));
  hyphens: manual;
  overflow-wrap: break-word;
}

.ueberschrift-2 {
  margin: var(--abstand-null);
  font-family: var(--schrift-ueberschrift);
  font-size: var(--schrift-h2);
  font-weight: var(--schriftstaerke-fett);
  line-height: var(--zeilenhoehe-eng);
  letter-spacing: var(--laufweite-h2);
  text-wrap: balance;
  color: var(--titel-farbe, var(--farbe-dunkelblau));
  hyphens: manual;
  overflow-wrap: break-word;
}

.ueberschrift-3 {
  margin: var(--abstand-null);
  font-family: var(--schrift-ueberschrift);
  font-size: var(--schrift-h3);
  font-weight: var(--schriftstaerke-fett);
  line-height: var(--zeilenhoehe-mittel);
  letter-spacing: var(--laufweite-h3);
  text-wrap: balance;
  color: var(--titel-farbe, var(--farbe-dunkelblau));
  hyphens: manual;
  overflow-wrap: break-word;
}

.dachzeile {
  margin: var(--abstand-null);
  padding-left: var(--abstand-xs);
  border-left: var(--rahmen-akzent) solid var(--farbe-rot);
  font-family: var(--schrift-text);
  font-size: var(--schrift-klein);
  font-weight: var(--schriftstaerke-fett);
  line-height: var(--zeilenhoehe-mittel);
  letter-spacing: var(--laufweite-dachzeile);
  text-transform: uppercase;
  color: var(--titel-farbe, var(--farbe-dunkelblau));
}

.text-normal {
  max-width: var(--text-max);
  margin: var(--abstand-null);
  font-family: var(--schrift-text);
  font-size: var(--schrift-text-normal);
  font-weight: var(--schriftstaerke-normal);
  line-height: var(--zeilenhoehe-text);
  color: var(--text-farbe, var(--farbe-dunkelblau));
  text-wrap: pretty;
}

.text-gross {
  max-width: var(--text-max);
  margin: var(--abstand-null);
  font-family: var(--schrift-text);
  font-size: var(--schrift-text-gross);
  font-weight: var(--schriftstaerke-normal);
  line-height: var(--zeilenhoehe-text);
  color: var(--text-farbe, var(--farbe-dunkelblau));
  text-wrap: pretty;
}

/* Einleitung über die volle Breite, nur wo ausdrücklich gewünscht */
.text-gross-breit {
  margin: var(--abstand-null);
  font-family: var(--schrift-text);
  font-size: var(--schrift-text-gross);
  font-weight: var(--schriftstaerke-normal);
  line-height: var(--zeilenhoehe-text);
  color: var(--text-farbe, var(--farbe-dunkelblau));
  text-wrap: pretty;
}

.text-klein {
  margin: var(--abstand-null);
  font-family: var(--schrift-text);
  font-size: var(--schrift-klein);
  font-weight: var(--schriftstaerke-normal);
  line-height: var(--zeilenhoehe-text);
  color: var(--text-farbe, var(--farbe-dunkelblau));
}

.text-fett {
  margin: var(--abstand-null);
  font-family: var(--schrift-text);
  font-size: var(--schrift-text-normal);
  font-weight: var(--schriftstaerke-fett);
  line-height: var(--zeilenhoehe-text);
  color: var(--text-farbe, var(--farbe-dunkelblau));
}

/* ---------- Links und Buttons ---------- */

.textlink {
  align-self: flex-start;
  font-family: var(--schrift-text);
  font-size: var(--schrift-text-normal);
  font-weight: var(--schriftstaerke-fett);
  line-height: var(--zeilenhoehe-text);
  color: var(--link-farbe, var(--farbe-dunkelblau));
  text-decoration: underline;
  text-decoration-thickness: var(--rahmen-mittel);
  text-underline-offset: var(--unterstrich-abstand);
  transition: text-decoration-color var(--dauer-uebergang);
}

.textlink:hover {
  text-decoration-color: var(--farbe-rot);
}

.textlink:focus-visible {
  outline: var(--rahmen-fokus) solid var(--farbe-rot);
  outline-offset: var(--fokus-abstand);
}

.button-primaer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-height: var(--button-hoehe);
  padding-top: var(--abstand-xs);
  padding-bottom: var(--abstand-xs);
  padding-left: var(--button-innen-lokal, var(--button-innen-seite));
  padding-right: var(--button-innen-lokal, var(--button-innen-seite));
  border: var(--abstand-null);
  border-radius: var(--rundung-klein);
  background-color: var(--farbe-blau);
  color: var(--farbe-weiss);
  font-family: var(--schrift-text);
  font-size: var(--button-schrift-lokal, var(--schrift-button));
  font-weight: var(--schriftstaerke-fett);
  line-height: var(--zeilenhoehe-mittel);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: transform var(--dauer-uebergang), box-shadow var(--dauer-uebergang);
}

@media (hover: hover) and (pointer: fine) {
  .button-primaer:hover {
    transform: translateY(var(--hover-hub));
    box-shadow: var(--schatten-button);
  }
}

.button-primaer:focus-visible {
  outline: var(--rahmen-fokus) solid var(--farbe-rot);
  outline-offset: var(--fokus-abstand);
}

.button-primaer:active {
  transform: scale(var(--druck-skalierung));
  box-shadow: none;
}

.button-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-m);
}

/* ---------- Kopfbereich ---------- */

/* Kopfbereich bleibt beim Scrollen sichtbar (in Elementor: Sticky-Einstellung) */
.kopf-huelle {
  position: sticky;
  top: var(--kopf-oben);
  z-index: var(--ebene-kopf);
  min-height: var(--kopf-mindesthoehe);
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--farbe-weiss);
  box-shadow: var(--schatten-kopf);
}

.kopf-inhalt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--logo-schutzraum);
  width: var(--voll);
  max-width: var(--inhalt-max);
  padding: var(--logo-schutzraum) var(--inhalt-rand);
  box-sizing: border-box;
}

.logo-link {
  display: flex;
  flex-shrink: 0;
  align-self: flex-start;
}

.logo-link:focus-visible {
  outline: var(--rahmen-fokus) solid var(--farbe-rot);
  outline-offset: var(--fokus-abstand);
}

.logo {
  display: block;
  height: var(--logo-hoehe);
  width: auto;
}

.kopf-menue {
  --button-innen-lokal: var(--abstand-s);
  --button-schrift-lokal: var(--schrift-menue);
  display: flex;
  align-items: center;
  gap: var(--abstand-m);
}

.menue {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-s);
}

.menue-link {
  display: flex;
  align-items: center;
  font-family: var(--schrift-text);
  font-size: var(--schrift-menue);
  font-weight: var(--schriftstaerke-normal);
  line-height: var(--zeilenhoehe-mittel);
  color: var(--farbe-dunkelblau);
  text-decoration: none;
  text-decoration-thickness: var(--unterstrich-dicke);
  text-underline-offset: var(--unterstrich-abstand);
  transition: color var(--dauer-uebergang);
}

.menue-link:hover {
  text-decoration: underline;
  text-decoration-color: var(--farbe-rot);
}

.menue-link:focus-visible {
  outline: var(--rahmen-fokus) solid var(--farbe-rot);
  outline-offset: var(--fokus-abstand);
}

.menue-link-aktiv {
  display: flex;
  align-items: center;
  font-family: var(--schrift-text);
  font-size: var(--schrift-menue);
  font-weight: var(--schriftstaerke-fett);
  line-height: var(--zeilenhoehe-mittel);
  color: var(--farbe-dunkelblau);
  text-decoration: underline;
  text-decoration-color: var(--farbe-rot);
  text-decoration-thickness: var(--unterstrich-dicke);
  text-underline-offset: var(--unterstrich-abstand);
}

.menue-link-aktiv:focus-visible {
  outline: var(--rahmen-fokus) solid var(--farbe-rot);
  outline-offset: var(--fokus-abstand);
}

.menue-knopf {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-xs);
  min-width: var(--menue-knopf-groesse);
  min-height: var(--menue-knopf-groesse);
  padding-left: var(--abstand-s);
  padding-right: var(--abstand-s);
  border: var(--rahmen-mittel) solid var(--farbe-dunkelblau);
  border-radius: var(--rundung-klein);
  background-color: var(--farbe-weiss);
  color: var(--farbe-dunkelblau);
  font-family: var(--schrift-text);
  font-size: var(--schrift-klein);
  font-weight: var(--schriftstaerke-fett);
  cursor: pointer;
  transition: transform var(--dauer-druck) var(--kurve-aus);
}

.menue-knopf:active {
  transform: scale(var(--druck-skalierung));
}

.menue-knopf:focus-visible {
  outline: var(--rahmen-fokus) solid var(--farbe-rot);
  outline-offset: var(--fokus-abstand);
}

/* ---------- Fußbereich ---------- */

.fuss-huelle {
  display: flex;
  justify-content: center;
  background-color: var(--farbe-dunkelblau);
  --titel-farbe: var(--farbe-weiss);
  --text-farbe: var(--farbe-weiss);
  --link-farbe: var(--farbe-weiss);
}

.fuss-inhalt {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-l);
  width: var(--voll);
  max-width: var(--inhalt-max);
  padding: var(--abstand-xl) var(--inhalt-rand) var(--abstand-l);
  box-sizing: border-box;
}

.fuss-spalten {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-l);
}

.fuss-spalte {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-xs);
  flex: 1 1 var(--fuss-spalte-basis);
  min-width: 0;
}

.fuss-spalte-logo {
  flex-basis: var(--fuss-logo-basis);
  gap: var(--logo-schutzraum);
}

.fuss-adresse {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-null);
}

.fuss-titel {
  margin: var(--abstand-null);
  padding-bottom: var(--abstand-xs);
  font-family: var(--schrift-ueberschrift);
  font-size: var(--schrift-text-normal);
  font-weight: var(--schriftstaerke-fett);
  line-height: var(--zeilenhoehe-mittel);
  color: var(--farbe-weiss);
}

.fuss-link {
  align-self: flex-start;
  font-family: var(--schrift-text);
  font-size: var(--schrift-klein);
  line-height: var(--zeilenhoehe-text);
  color: var(--farbe-weiss);
  text-decoration: none;
  text-decoration-thickness: var(--rahmen-mittel);
  text-underline-offset: var(--unterstrich-abstand);
}

.fuss-link:hover {
  text-decoration: underline;
  text-decoration-color: var(--farbe-rot);
}

.fuss-link:focus-visible {
  outline: var(--rahmen-fokus) solid var(--farbe-rot);
  outline-offset: var(--fokus-abstand);
}

.fuss-unterzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-m);
  padding-top: var(--abstand-m);
  border-top: var(--rahmen-duenn) solid var(--farbe-weiss);
}

/* ---------- Karten ---------- */

.kartenreihe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-m);
}

.karte {
  --titel-farbe: var(--farbe-dunkelblau);
  --text-farbe: var(--farbe-dunkelblau);
  --link-farbe: var(--farbe-dunkelblau);
  display: flex;
  flex-direction: column;
  gap: var(--abstand-s);
  flex: 1 1 var(--karte-basis);
  min-width: 0;
  padding: var(--karte-innen);
  border-radius: var(--rundung-karte);
  background-color: var(--farbe-weiss);
  box-shadow: var(--schatten-karte);
  box-sizing: border-box;
}

/* Button oder Link am Kartenende stehen in einer Reihe immer auf gleicher Höhe */
.karte .button-sekundaer,
.karte .textlink {
  margin-top: auto;
}

/* Flache Variante ohne Kartenfläche: nur Linie oben (für ruhigere Abschnitte) */
.karte-flach {
  flex-basis: var(--karte-flach-basis);
  padding: var(--abstand-m) var(--abstand-null) var(--abstand-null);
  border-top: var(--rahmen-mittel) solid var(--farbe-blau);
  border-radius: var(--abstand-null);
  background-color: transparent;
  box-shadow: none;
}

/* Zwei breite Spalten statt vieler schmaler Karten */
.kartenreihe-zweispaltig {
  column-gap: var(--abstand-xl);
  row-gap: var(--abstand-l);
}

.kartenreihe-zweispaltig .karte {
  flex-basis: var(--spalte-basis);
}

.schritt {
  --titel-farbe: var(--farbe-dunkelblau);
  --text-farbe: var(--farbe-dunkelblau);
  display: flex;
  flex-direction: column;
  gap: var(--abstand-s);
  flex: 1 1 var(--schritt-basis);
  min-width: 0;
  padding: var(--karte-innen);
  border-radius: var(--rundung-karte);
  border-top: var(--rahmen-akzent) solid var(--farbe-blau);
  background-color: var(--farbe-weiss);
  box-shadow: var(--schatten-karte);
  box-sizing: border-box;
}

.schritt-nummer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--nummer-groesse);
  height: var(--nummer-groesse);
  border: var(--rahmen-mittel) solid var(--farbe-dunkelblau);
  border-radius: var(--rundung-rund);
  font-family: var(--schrift-ueberschrift);
  font-size: var(--schrift-nummer);
  font-weight: var(--schriftstaerke-fett);
  color: var(--farbe-dunkelblau);
}

.abschluss-box {
  --titel-farbe: var(--farbe-weiss);
  --text-farbe: var(--farbe-weiss);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--abstand-m);
  padding: var(--abstand-xl);
  border-radius: var(--rundung-karte);
  border-left: var(--rahmen-akzent) solid var(--farbe-rot);
  background-color: var(--farbe-dunkelblau);
}

/* ---------- Symbole und Aufzählungen ---------- */

.symbol {
  display: block;
  flex-shrink: 0;
  width: var(--symbol-groesse);
  height: var(--symbol-groesse);
  color: var(--farbe-blau);
}

.symbol-gross {
  display: block;
  flex-shrink: 0;
  width: var(--symbol-gross);
  height: var(--symbol-gross);
  color: var(--farbe-weiss);
}

.aufzaehlung {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-s);
}

.aufzaehlungszeile {
  display: flex;
  align-items: flex-start;
  gap: var(--abstand-s);
}

.aufzaehlungspunkt {
  display: block;
  flex-shrink: 0;
  width: var(--symbol-klein);
  height: var(--symbol-klein);
  margin-top: var(--abstand-xs);
  color: var(--farbe-rot);
}

.folgenliste {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-s);
}

.folge {
  --titel-farbe: var(--farbe-dunkelblau);
  --text-farbe: var(--farbe-dunkelblau);
  --link-farbe: var(--farbe-dunkelblau);
  display: flex;
  align-items: center;
  gap: var(--abstand-m);
  padding: var(--abstand-m);
  border-radius: var(--rundung-karte);
  background-color: var(--farbe-weiss);
  box-shadow: var(--schatten-karte);
}

.merkmal {
  display: flex;
  align-items: center;
  gap: var(--abstand-s);
  flex: 1 1 var(--karte-basis);
  min-width: 0;
}

.merkmalsreihe {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--abstand-l);
}

.abzeichen {
  display: block;
  align-self: flex-start;
  height: var(--abzeichen-hoehe);
  width: auto;
}

.logoreihe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-l);
}

.partnerlogo {
  display: block;
  height: var(--partnerlogo-hoehe);
  width: auto;
  max-width: var(--partnerlogo-max);
  object-fit: contain;
}

/* Für Logodateien mit viel Leerraum im Bild */
.partnerlogo-gross {
  display: block;
  height: var(--partnerlogo-gross-hoehe);
  width: auto;
  max-width: var(--partnerlogo-gross-max);
  object-fit: contain;
}

.badgereihe {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--abstand-m);
}

.badge {
  display: block;
  flex: 0 1 var(--badge-max);
  min-width: 0;
  height: var(--badge-hoehe);
  width: auto;
  max-width: var(--badge-max);
  object-fit: contain;
}

/* Mehrere Badge-Gruppen untereinander, volle Breite */
.badgegruppen {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-l);
}

.badgegruppe {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-m);
}

.info-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-xs);
}

/* ---------- Bildflächen und Platzhalter ---------- */

.bildflaeche {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-s);
  width: var(--voll);
  aspect-ratio: var(--verhaeltnis-bild);
  padding: var(--abstand-m);
  border-radius: var(--rundung-karte);
  background-color: var(--farbe-blau);
  box-sizing: border-box;
}

/* Echtes Foto im Kopfbereich, gleiche Form wie die Bildfläche */
.kopfbild {
  display: block;
  width: var(--voll);
  height: auto;
  aspect-ratio: var(--verhaeltnis-bild);
  object-fit: cover;
  object-position: center;
  border-radius: var(--rundung-karte);
  background-color: var(--farbe-flaeche);
}

.portrait-foto {
  display: block;
  width: var(--voll);
  height: auto;
  aspect-ratio: var(--verhaeltnis-portrait);
  object-fit: cover;
  object-position: var(--portrait-ausschnitt);
  max-width: var(--portrait-max);
  border-radius: var(--rundung-karte);
  background-color: var(--farbe-blau);
}

.bildflaeche-portrait {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-xs);
  width: var(--voll);
  aspect-ratio: var(--verhaeltnis-portrait);
  padding: var(--abstand-m);
  border-radius: var(--rundung-karte);
  background-color: var(--farbe-blau);
  box-sizing: border-box;
}

.bildflaeche-text {
  margin: var(--abstand-null);
  font-family: var(--schrift-text);
  font-size: var(--schrift-text-gross);
  font-weight: var(--schriftstaerke-fett);
  line-height: var(--zeilenhoehe-mittel);
  text-align: center;
  color: var(--farbe-weiss);
}

.platzhalter {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-xs);
  padding: var(--platzhalter-innen);
  border: var(--rahmen-mittel) dashed var(--farbe-rot);
  border-radius: var(--rundung-klein);
  background-color: var(--farbe-weiss);
}

.platzhalter-titel {
  margin: var(--abstand-null);
  font-family: var(--schrift-text);
  font-size: var(--schrift-klein);
  font-weight: var(--schriftstaerke-fett);
  line-height: var(--zeilenhoehe-mittel);
  text-transform: uppercase;
  letter-spacing: var(--laufweite-dachzeile);
  color: var(--farbe-dunkelblau);
}

.platzhalter-text {
  margin: var(--abstand-null);
  font-family: var(--schrift-text);
  font-size: var(--schrift-klein);
  line-height: var(--zeilenhoehe-text);
  color: var(--farbe-dunkelblau);
}

/* Breite Logos (z. B. YouTube) in gleicher Höhe wie die Abzeichen */
.abzeichen-breit {
  display: block;
  align-self: flex-start;
  height: var(--abzeichen-hoehe);
  width: var(--abzeichen-breit-max);
  max-width: var(--voll);
  object-fit: contain;
  object-position: left center;
}

.logoplatzhalter {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  width: var(--logoplatzhalter-breite);
  height: var(--abzeichen-hoehe);
  margin: var(--abstand-null);
  padding: var(--abstand-xs);
  border: var(--rahmen-mittel) dashed var(--farbe-rot);
  border-radius: var(--rundung-klein);
  background-color: var(--farbe-weiss);
  font-family: var(--schrift-text);
  font-size: var(--schrift-klein);
  font-weight: var(--schriftstaerke-fett);
  line-height: var(--zeilenhoehe-mittel);
  text-align: center;
  color: var(--farbe-dunkelblau);
  box-sizing: border-box;
}

.platzhalter-kurz {
  display: inline-flex;
  align-self: flex-start;
  padding: var(--platzhalter-kurz-innen-hoch) var(--platzhalter-kurz-innen-seite);
  border: var(--rahmen-mittel) dashed var(--farbe-rot);
  border-radius: var(--rundung-klein);
  background-color: var(--farbe-weiss);
  font-family: var(--schrift-text);
  font-size: var(--schrift-klein);
  font-weight: var(--schriftstaerke-fett);
  line-height: var(--zeilenhoehe-mittel);
  color: var(--farbe-dunkelblau);
}

/* ---------- Formular (Attrappe) ---------- */

.formular {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-m);
}

.formular-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-m);
}

.kontaktfeld {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-xs);
  flex: 1 1 var(--karte-basis);
  min-width: 0;
}

.feld-beschriftung {
  font-family: var(--schrift-text);
  font-size: var(--schrift-klein);
  font-weight: var(--schriftstaerke-fett);
  line-height: var(--zeilenhoehe-mittel);
  color: var(--farbe-dunkelblau);
}

.eingabefeld {
  width: var(--voll);
  min-height: var(--feld-hoehe);
  padding: var(--feld-innen);
  border: var(--rahmen-duenn) solid var(--farbe-dunkelblau);
  border-radius: var(--rundung-klein);
  background-color: var(--farbe-weiss);
  color: var(--farbe-dunkelblau);
  font-family: var(--schrift-text);
  font-size: var(--schrift-text-normal);
  line-height: var(--zeilenhoehe-mittel);
  box-sizing: border-box;
}

.eingabefeld:focus-visible {
  outline: var(--rahmen-fokus) solid var(--farbe-blau);
  outline-offset: var(--abstand-null);
}

.textfeld {
  width: var(--voll);
  min-height: var(--textfeld-hoehe);
  padding: var(--feld-innen);
  border: var(--rahmen-duenn) solid var(--farbe-dunkelblau);
  border-radius: var(--rundung-klein);
  background-color: var(--farbe-weiss);
  color: var(--farbe-dunkelblau);
  font-family: var(--schrift-text);
  font-size: var(--schrift-text-normal);
  line-height: var(--zeilenhoehe-text);
  box-sizing: border-box;
  resize: vertical;
}

.textfeld:focus-visible {
  outline: var(--rahmen-fokus) solid var(--farbe-blau);
  outline-offset: var(--abstand-null);
}

/* ---------- Häufige Fragen ---------- */

.frage {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-xs);
  padding-bottom: var(--abstand-m);
  border-bottom: var(--rahmen-duenn) solid var(--titel-farbe, var(--farbe-dunkelblau));
}

/* ---------- Dezente Bewegung beim Scrollen ---------- */

.einblenden {
  transition: opacity var(--dauer-einblenden) var(--kurve-aus), transform var(--dauer-einblenden) var(--kurve-aus);
}

/* Karten einer Reihe erscheinen nacheinander (50 ms Versatz, höchstens 250 ms) */
.einblenden .kartenreihe > * {
  transition: opacity var(--dauer-einblenden) var(--kurve-aus), transform var(--dauer-einblenden) var(--kurve-aus);
}

.einblenden-start .kartenreihe > * {
  opacity: var(--deckkraft-null);
  transform: translateY(var(--einblend-weg));
}

.einblenden-fertig .kartenreihe > * {
  opacity: var(--deckkraft-voll);
  transform: none;
}

.einblenden-fertig .kartenreihe > :nth-child(2) { transition-delay: calc(var(--staffel-versatz) * 1); }
.einblenden-fertig .kartenreihe > :nth-child(3) { transition-delay: calc(var(--staffel-versatz) * 2); }
.einblenden-fertig .kartenreihe > :nth-child(4) { transition-delay: calc(var(--staffel-versatz) * 3); }
.einblenden-fertig .kartenreihe > :nth-child(5) { transition-delay: calc(var(--staffel-versatz) * 4); }
.einblenden-fertig .kartenreihe > :nth-child(n+6) { transition-delay: calc(var(--staffel-versatz) * 5); }

.einblenden-start {
  opacity: var(--deckkraft-null);
  transform: translateY(var(--einblend-weg));
}

.einblenden-fertig {
  opacity: var(--deckkraft-voll);
  transform: translateY(var(--abstand-null));
}

/* ---------- Sprunglink, Brotkrumen, sekundärer Button ---------- */

.sprunglink {
  display: block;
  align-self: stretch;
  height: var(--abstand-null);
  overflow: hidden;
  font-family: var(--schrift-text);
  font-size: var(--schrift-klein);
  font-weight: var(--schriftstaerke-fett);
  color: var(--farbe-weiss);
  background-color: var(--farbe-dunkelblau);
  text-align: center;
}

.sprunglink:focus-visible {
  height: auto;
  padding: var(--abstand-s);
  outline: var(--rahmen-fokus) solid var(--farbe-rot);
  outline-offset: var(--abstand-null);
}

.brotkrumen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-xs);
}

.brotkrumen-link {
  font-family: var(--schrift-text);
  font-size: var(--schrift-klein);
  line-height: var(--zeilenhoehe-mittel);
  color: var(--link-farbe, var(--farbe-dunkelblau));
  text-decoration: underline;
  text-underline-offset: var(--unterstrich-abstand);
}

.brotkrumen-link:focus-visible {
  outline: var(--rahmen-fokus) solid var(--farbe-rot);
  outline-offset: var(--fokus-abstand);
}

.brotkrumen-text {
  margin: var(--abstand-null);
  font-family: var(--schrift-text);
  font-size: var(--schrift-klein);
  line-height: var(--zeilenhoehe-mittel);
  color: var(--text-farbe, var(--farbe-dunkelblau));
}

.button-sekundaer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-height: var(--button-hoehe);
  padding-top: var(--abstand-xs);
  padding-bottom: var(--abstand-xs);
  padding-left: var(--button-innen-seite);
  padding-right: var(--button-innen-seite);
  border: var(--rahmen-mittel) solid var(--farbe-blau);
  border-radius: var(--rundung-klein);
  background-color: var(--farbe-weiss);
  color: var(--farbe-dunkelblau);
  font-family: var(--schrift-text);
  font-size: var(--schrift-button);
  font-weight: var(--schriftstaerke-fett);
  line-height: var(--zeilenhoehe-mittel);
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color var(--dauer-uebergang), transform var(--dauer-uebergang);
}

@media (hover: hover) and (pointer: fine) {
  .button-sekundaer:hover {
    background-color: var(--farbe-flaeche-hover);
  }
}

.button-sekundaer:active {
  transform: scale(var(--druck-skalierung));
}

.button-sekundaer:focus-visible {
  outline: var(--rahmen-fokus) solid var(--farbe-rot);
  outline-offset: var(--fokus-abstand);
}

/* ---------- Rücksicht auf "Bewegung reduzieren" ---------- */

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  .einblenden-start {
    opacity: var(--deckkraft-voll);
    transform: none;
  }

  .einblenden,
  .einblenden .kartenreihe > *,
  .button-primaer,
  .button-sekundaer,
  .menue-knopf {
    transition: none;
  }
}

/* =========================================================
   Tablet: bis 1024 px
   ========================================================= */

@media (max-width: 1024px) {
  .abschnitt {
    padding-top: var(--abschnitt-innen-tablet);
    padding-bottom: var(--abschnitt-innen-tablet);
  }

  .inhalt {
    padding-left: var(--inhalt-rand-tablet);
    padding-right: var(--inhalt-rand-tablet);
  }

  .kopf-inhalt {
    padding-left: var(--inhalt-rand-tablet);
    padding-right: var(--inhalt-rand-tablet);
  }

  .fuss-inhalt {
    padding-left: var(--inhalt-rand-tablet);
    padding-right: var(--inhalt-rand-tablet);
  }

  .ueberschrift-1 {
    font-size: var(--schrift-h1-tablet);
  }

  .ueberschrift-2 {
    font-size: var(--schrift-h2-tablet);
  }

  .ueberschrift-3 {
    font-size: var(--schrift-h3-tablet);
  }

  .karte {
    flex-basis: var(--karte-basis-tablet);
  }

  .schritt {
    flex-basis: var(--schritt-basis-tablet);
  }

  .bildflaeche {
    aspect-ratio: var(--verhaeltnis-bild-tablet);
  }

  .kopfbild {
    aspect-ratio: var(--verhaeltnis-bild-tablet);
  }

  .menue-knopf {
    display: inline-flex;
  }

  .kopf-menue {
    flex-direction: column;
    align-items: stretch;
    flex-basis: var(--voll);
    gap: var(--abstand-m);
  }

  .kopf-menue-zu {
    display: none;
  }

  .kopf-menue-offen {
    display: flex;
    transition: opacity var(--dauer-menue) var(--kurve-aus), transform var(--dauer-menue) var(--kurve-aus);
  }

  @starting-style {
    .kopf-menue-offen {
      opacity: var(--deckkraft-null);
      transform: translateY(var(--menue-weg));
    }
  }

  .menue {
    flex-direction: column;
    align-items: stretch;
    gap: var(--abstand-null);
  }

  .menue-link {
    min-height: var(--menue-knopf-groesse);
    border-bottom: var(--rahmen-duenn) solid var(--farbe-dunkelblau);
  }

  .menue-link-aktiv {
    min-height: var(--menue-knopf-groesse);
    border-bottom: var(--rahmen-duenn) solid var(--farbe-dunkelblau);
  }
}

/* =========================================================
   Handy: bis 767 px
   ========================================================= */

@media (max-width: 767px) {
  .abschnitt {
    padding-top: var(--abschnitt-innen-mobile);
    padding-bottom: var(--abschnitt-innen-mobile);
  }

  .inhalt {
    padding-left: var(--inhalt-rand-mobile);
    padding-right: var(--inhalt-rand-mobile);
  }

  .kopf-inhalt {
    padding-left: var(--inhalt-rand-mobile);
    padding-right: var(--inhalt-rand-mobile);
  }

  .fuss-inhalt {
    padding-left: var(--inhalt-rand-mobile);
    padding-right: var(--inhalt-rand-mobile);
  }

  .ueberschrift-1 {
    font-size: var(--schrift-h1-mobile);
  }

  .ueberschrift-2 {
    font-size: var(--schrift-h2-mobile);
  }

  .ueberschrift-3 {
    font-size: var(--schrift-h3-mobile);
  }

  .text-normal {
    font-size: var(--schrift-text-normal-mobile);
  }

  .text-gross {
    font-size: var(--schrift-text-gross-mobile);
  }

  .text-gross-breit {
    font-size: var(--schrift-text-gross-mobile);
  }

  .zweispaltig {
    gap: var(--abstand-xl-mobile);
  }

  .zweispaltig-oben {
    gap: var(--abstand-xl-mobile);
  }

  .spalte {
    flex-basis: var(--spalte-basis-mobile);
  }

  .karte {
    flex-basis: var(--karte-basis-mobile);
    padding: var(--karte-innen-mobile);
  }

  .karte-flach {
    padding: var(--abstand-m) var(--abstand-null) var(--abstand-null);
  }

  .schritt {
    flex-basis: var(--schritt-basis-mobile);
    padding: var(--karte-innen-mobile);
  }

  .abschluss-box {
    padding: var(--karte-innen-mobile);
  }

  .bildflaeche {
    aspect-ratio: var(--verhaeltnis-bild-mobile);
  }

  .kopfbild {
    aspect-ratio: var(--verhaeltnis-bild-mobile);
  }

  .button-primaer {
    align-self: stretch;
  }

  .button-sekundaer {
    align-self: stretch;
  }

  .abzeichen {
    height: var(--logo-hoehe);
  }

  .logoplatzhalter {
    height: var(--logo-hoehe);
  }

  .abzeichen-breit {
    height: var(--logo-hoehe);
  }

  .menue-knopf {
    padding-left: var(--abstand-null);
    padding-right: var(--abstand-null);
  }

  .menue-knopf-text {
    display: none;
  }

  .partnerlogo {
    height: var(--partnerlogo-hoehe-mobile);
    max-width: var(--partnerlogo-max-mobile);
  }

  .badge {
    flex-basis: var(--badge-max-mobile);
    height: var(--badge-hoehe-mobile);
    max-width: var(--badge-max-mobile);
  }

  .badgereihe {
    flex-wrap: wrap;
    justify-content: center;
  }

  .partnerlogo-gross {
    height: var(--partnerlogo-gross-hoehe-mobile);
    max-width: var(--partnerlogo-gross-max-mobile);
  }

  .logoreihe {
    gap: var(--abstand-m) var(--abstand-l);
  }
}

/* Handy-Menü bei "Bewegung reduzieren": nur Einblenden, kein Verschieben */
@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
  .kopf-menue-offen {
    transition: opacity var(--dauer-menue) var(--kurve-aus);
  }

  @starting-style {
    .kopf-menue-offen {
      transform: none;
    }
  }
}