/* ==========================================================================
   Markitechture   Design-System
   Farben aus dem Logo ausgelesen, Schrift lokal gehostet
   ========================================================================== */

/* --- Schrift, lokal vom eigenen Server, nichts von Google ---------------- */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Design-Werte -------------------------------------------------------- */
:root {
  --blau:        #00437D;   /* Blueprint Blue */
  --blau-tief:   #002F57;
  --blau-hell:   #0058A5;
  --gelb:        #FFCA0F;   /* Activate Yellow */
  --orange:      #F7931E;   /* Momentum Orange */
  --orange-dark: #D9811A;
  --grau:        #F1F1F2;   /* Fundamental Gray */
  --grau-linie:  #DFDFE2;
  --tinte:       #12202E;
  --tinte-weich: #4A5A6B;
  --pflicht:     #C0392B;
  --weiss:       #FFFFFF;

  --schrift: 'Plus Jakarta Sans', 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;

  --breite:  1200px;
  --schmal:  760px;
  --rand:    clamp(1.25rem, 5vw, 3rem);
  --luft:    clamp(3.25rem, 6.5vw, 5.5rem);
  --radius:  3px;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 1.075rem;
  line-height: 1.68;
  font-weight: 400;
  color: var(--tinte);
  background: var(--weiss);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

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

h1, h2, h3, h4 {
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.022em;
  color: var(--blau);
  margin: 0 0 0.7em;
  text-wrap: balance;
  /* Lange Wörter werden nur an selbst gesetzten Stellen getrennt,
     nicht irgendwo mitten im Wort. */
  overflow-wrap: normal;
  -webkit-hyphens: manual;
  hyphens: manual;
}

h1 { font-size: clamp(2.05rem, 1.15rem + 3.4vw, 3.5rem); }
h2 { font-size: clamp(1.65rem, 1.1rem + 2.1vw, 2.5rem); }
h3 { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); font-weight: 700; letter-spacing: -0.012em; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--blau); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--blau-hell); }

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- Layout -------------------------------------------------------------- */
.huelle {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.abschnitt { padding-block: var(--luft); }
.abschnitt--eng { padding-block: clamp(2.75rem, 6vw, 4.5rem); }
/* Abschnitt, der unmittelbar an ein Bild oben anschliesst: oben wenig Luft,
   damit zwischen Bild und Text keine leere Flaeche steht. */
.abschnitt--anschluss { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
/* Buehne, unter der gleich der naechste Abschnitt folgt. */
.buehne--eng-unten { padding-bottom: clamp(1.25rem, 2.5vw, 2rem); }
/* Abschnitt, an den unmittelbar ein Bildstreifen anschliesst.
   Unten bleibt genau so viel Farbflaeche stehen wie zwischen den
   Karten Abstand ist, damit der Rahmen ringsum gleich wirkt. */
.abschnitt--bis-bild { padding-bottom: clamp(1.1rem, 2.2vw, 1.75rem); }
/* Abschnitt direkt unter einem Bildstreifen. Frueher stand hier das
   Anderthalbfache: Das war der Puffer fuer ein Bild, das aus seinem
   Container herausragte. Seit der Streifen sauber beschnitten wird,
   braucht es nur noch wenig Luft, damit die Ueberschrift nicht klebt. */
.abschnitt--nach-bild { padding-top: calc(var(--luft) * 0.6); }

.mass { max-width: 64ch; }
.mass-weit { max-width: 72ch; }

.zur-navigation {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--blau);
  color: #fff;
  padding: 0.75rem 1.25rem;
  z-index: 999;
}
.zur-navigation:focus { left: 0; }

/* --- Flächen ------------------------------------------------------------- */
.flaeche-grau { background: var(--grau); }
.flaeche-blau { background: var(--blau); color: rgba(255,255,255,0.9); }
.flaeche-blau h2, .flaeche-blau h3 { color: var(--weiss); }
.flaeche-blau > .huelle p { color: rgba(255,255,255,0.92); }
.flaeche-blau a,
.flaeche-tief a { color: var(--gelb); text-underline-offset: 4px; }
.flaeche-blau a:hover,
.flaeche-tief a:hover { color: #fff; }
.flaeche-tief { background: var(--blau-tief); color: rgba(255,255,255,0.9); }
.flaeche-tief h2, .flaeche-tief h3 { color: var(--weiss); }

/* --- Die gelbe Klammer, das Markenelement --------------------------------
   Sie steht nicht mehr über der Schrift, sondern die Schrift beginnt darin.
   Bewusst sparsam eingesetzt: einmal je Seite an der Hauptüberschrift,
   dazu als Anführungszeichen an Zitaten und an echten Fotos.            */
.klammer {
  position: relative;
  padding-top: clamp(18px, 2vw, 24px);
  padding-left: clamp(18px, 2vw, 26px);
}
.klammer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(52px, 7vw, 88px);
  height: clamp(52px, 7vw, 88px);
  border-top: 7px solid var(--gelb);
  border-left: 7px solid var(--gelb);
  pointer-events: none;
}

/* --- Vorzeile ------------------------------------------------------------ */
.vorzeile {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--blau);
  opacity: 0.8;
  margin: 0 0 1rem;
}
.flaeche-blau .vorzeile,
.flaeche-tief .vorzeile { color: var(--gelb); opacity: 1; }

/* --- Buttons ------------------------------------------------------------- */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.6rem;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.005em;
  padding: 0.95rem 1.6rem;
  border: 2px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}
.knopf .pfeil { transition: transform 0.18s ease; }
.knopf:hover .pfeil { transform: translateX(4px); }

/* Weisse Schrift auf Momentum Orange, so gewuenscht. */
.knopf--haupt {
  background: var(--orange);
  color: var(--weiss);
  border-radius: 2px;
}
.knopf--haupt .pfeil { color: var(--weiss); }
.knopf--haupt:hover {
  background: var(--orange-dark);
  color: var(--weiss);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.22);
}
/* Auf dunklen Flächen hebt eine feine weiße Kante den Knopf ab */
.flaeche-blau .knopf--haupt,
.flaeche-tief .knopf--haupt,
.kopfbuehne .knopf--haupt { box-shadow: inset 0 -3px 0 rgba(255,255,255,0.85); }
.flaeche-blau .knopf--haupt:hover,
.flaeche-tief .knopf--haupt:hover,
.kopfbuehne .knopf--haupt:hover { box-shadow: inset 0 -3px 0 rgba(255,255,255,0.85), 0 10px 24px rgba(0,0,0,0.3); }

.knopf--rand {
  background: var(--weiss);
  border-color: rgba(0,67,125,0.3);
  color: var(--blau);
  border-radius: 2px;
}
.knopf--rand .pfeil { color: var(--blau); }
.knopf--rand:hover { border-color: var(--blau); background: rgba(0,67,125,0.05); }
.flaeche-blau .knopf--rand,
.flaeche-tief .knopf--rand { border-color: rgba(255,255,255,0.4); color: #fff; }
.flaeche-blau .knopf--rand:hover,
.flaeche-tief .knopf--rand:hover { border-color: #fff; background: rgba(255,255,255,0.08); }

/* Textlink mit Pfeil */
.textlink {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  color: var(--blau);
  text-decoration: none;
  padding-bottom: 3px;
  background-image: linear-gradient(var(--gelb), var(--gelb));
  background-size: 100% 3px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.25s ease, color 0.18s ease;
}
.textlink:hover { background-size: 100% 100%; color: var(--blau-tief); }
.textlink .pfeil { transition: transform 0.2s ease; }
.textlink:hover .pfeil { transform: translateX(4px); }

/* --- Kopfleiste ---------------------------------------------------------- */
.kopfleiste {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.94);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--grau-linie);
}
.kopfleiste__innen {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 74px;
  padding-block: 0.7rem;
}
.marke { display: inline-flex; align-items: center; margin-right: auto; }
.marke img { width: 186px; height: auto; }

.navigation ul {
  display: flex;
  align-items: center;
  gap: 1.9rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.navigation a {
  position: relative;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--blau);
  text-decoration: none;
  padding-block: 0.4rem;
}
.navigation a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 3px;
  background: var(--gelb);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s ease;
}
.navigation a:hover::after { transform: scaleX(1); }
.navigation a[aria-current="page"]::after { transform: scaleX(1); }

.kopf-knopf { padding: 0.72rem 1.25rem; font-size: 0.95rem; gap: 0.3rem; }

.menue-knopf {
  display: none;
  width: 46px; height: 46px;
  padding: 0;
  border: 1px solid var(--grau-linie);
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
  color: var(--blau);
}
.menue-knopf span {
  display: block;
  width: 20px; height: 2px;
  margin: 4px auto;
  background: currentColor;
  transition: transform 0.22s ease, opacity 0.18s ease;
}
.menue-knopf[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menue-knopf[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menue-knopf[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* --- Großes Kopfbild: klare Teilung, kein Verlauf ------------------------- */
.kopfbuehne {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
  background: var(--blau);
  min-height: clamp(420px, 60vh, 600px);
}
.kopfbuehne__text {
  display: flex;
  align-items: center;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  padding-left: max(var(--rand), calc((100vw - var(--breite)) / 2));
  padding-right: clamp(1.5rem, 4vw, 3.5rem);
  color: rgba(255,255,255,0.92);
}
.kopfbuehne__bild { position: relative; overflow: hidden; }
.kopfbuehne__bild img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
  display: block;
}
.kopfbuehne .buehne__text { max-width: 39rem; }
.kopfbuehne h1 { font-size: clamp(1.95rem, 1.1rem + 2.6vw, 3rem); }
.kopfbuehne h1 { color: var(--weiss); }
.kopfbuehne .vorzeile { color: var(--gelb); opacity: 1; }

/* --- Kopfbuehne, Variante Breitbild mit Text darueber --------------------
   Das Bild liegt ueber die volle Breite, der Text steht darauf. Damit die
   Schrift lesbar bleibt, liegt ein blauer Verlauf zwischen Bild und Text,
   links dicht und nach rechts hin offen. Nur fuer den Vergleich gedacht. */
.kopfbuehne--breit {
  display: block;
  position: relative;
  min-height: 0;
  overflow: hidden;
}
.kopfbuehne--breit__bild {
  position: absolute;
  inset: 0;
  display: block;
}
.kopfbuehne--breit__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  display: block;
}
.kopfbuehne--breit::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(0,47,87,0.94) 0%,
    rgba(0,47,87,0.86) 34%,
    rgba(0,47,87,0.52) 58%,
    rgba(0,47,87,0.18) 100%);
}
.kopfbuehne--breit__text {
  position: relative;
  z-index: 1;
  padding-block: clamp(3.5rem, 9vw, 7rem);
  color: rgba(255,255,255,0.92);
}
@media (max-width: 760px) {
  /* Auf dem Handy steht das Foto ueber dem Text statt dahinter. So ist das
     Gesicht frei zu sehen, und die Schrift braucht keinen dichten Schleier
     mehr, um lesbar zu bleiben. */
  .kopfbuehne--breit { display: flex; flex-direction: column; }
  .kopfbuehne--breit__bild { position: static; order: -1; }
  .kopfbuehne--breit__bild img { aspect-ratio: 3 / 2; height: auto; object-position: 50% 28%; }
  .kopfbuehne--breit__text { padding-block: clamp(1.75rem, 6vw, 2.5rem); }
  .kopfbuehne--breit::after { display: none; }
}

/* Kontaktseite: Das Bild soll unten mit dem Knopf abschliessen statt mittig
   zu schweben. Es fuellt deshalb die volle Hoehe der Textspalte. Beschnitten
   wird dabei seitlich, der Schnitt sitzt oben, damit der Kopf bleibt wo er ist. */
#termin .buehne__raster { align-items: stretch; }
#termin .buehne__bild { display: flex; }
#termin .buehne__bild .bildrahmen,
#termin .buehne__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
@media (max-width: 1024px) {
  #termin .buehne__raster { align-items: center; }
  #termin .buehne__bild img { height: auto; }
}

/* --- Kopfbereich der Seiten ---------------------------------------------- */
.buehne { padding-block: clamp(3rem, 7vw, 6rem) clamp(3rem, 7vw, 5.5rem); }
.buehne__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
.buehne h1 { margin-bottom: 1rem; }
/* Innerhalb eines Blocks gilt genau eine Textgröße. */
.vorspann { font-size: inherit; line-height: inherit; color: inherit; }

/* --- Ergebniszeile ------------------------------------------------------- */
.ergebnis {
  margin: 2.4rem 0 0;
  padding: clamp(1.35rem, 2.2vw, 1.9rem) clamp(1.4rem, 2.4vw, 2rem);
  border-left: 7px solid var(--gelb);
  border-radius: var(--radius);
  background: var(--blau);
  font-size: clamp(1.06rem, 1rem + 0.5vw, 1.25rem);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--weiss);
}
.flaeche-blau .ergebnis,
.flaeche-tief .ergebnis {
  background: rgba(255,255,255,0.07);
  color: #fff;
}

/* --- Bildplatzhalter ----------------------------------------------------- */
.bildplatz {
  position: relative;
  display: grid;
  place-items: center;
  background: var(--blau);
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 46px 46px;
  overflow: hidden;
}
.bildplatz--hoch { aspect-ratio: 4 / 5; }
.bildplatz--quer { aspect-ratio: 3 / 2; }
.bildplatz--band { aspect-ratio: 21 / 9; }
.bildplatz svg {
  width: clamp(56px, 16%, 104px);
  height: auto;
  color: #fff;
  opacity: 0.34;
}

/* Hintergrund, damit waehrend des Ladens keine weisse Flaeche steht */
.bildrahmen { position: relative; background: var(--grau); }
.bildrahmen img { width: 100%; }
.bildrahmen::before {
  content: "";
  position: absolute;
  top: -14px; left: -14px;
  width: 62px; height: 62px;
  border-top: 7px solid var(--gelb);
  border-left: 7px solid var(--gelb);
  z-index: 1;
}

.bildrahmen--ohne::before { display: none; }

.bildband {
  display: block;
  width: 100%;
  aspect-ratio: 3.3 / 1;
  max-height: 340px;
  object-fit: cover;
}

/* --- Raster -------------------------------------------------------------- */
.raster {
  display: grid;
  gap: clamp(1.1rem, 2.2vw, 1.75rem);
}
.raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Klee und Mesut stehen nebeneinander und werden auf gleiche Hoehe
   gezogen, das ist hier gewollt. Moeglich wurde das erst, seit das
   laengste Zitat allein ueber die volle Breite laeuft und keine
   Nachbarkarte mehr in die Hoehe zieht. */
.raster--stimmen { align-items: stretch; }
/* Die beiden laengeren Zitate laufen ueber die volle Breite. Dadurch
   braucht das laengste statt zwoelf nur noch fuenf Zeilen, und alle
   drei Karten sind aehnlich hoch. */
.zitat--breit { grid-column: 1 / -1; }
/* Abschluss der Stimmen: das laengste Zitat auf zwei Dritteln, daneben ein
   Bild im Hochformat. Die Aufteilung stand so im Bildplan vom 19.09.2026. */
.stimmen__schluss {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.1rem, 2.2vw, 1.75rem);
  align-items: stretch;
}
/* Das Bild ist auf das Verhaeltnis der Zitatkarte vorgeschnitten und wird
   auf deren Hoehe gezogen. Weil die Datei schon fast passt, bleibt der
   Restschnitt winzig; er wird nach oben gezogen, damit nie ein Kopf faellt. */
.stimmen__schluss { align-items: stretch; }
.stimmen__schluss .bildrahmen { overflow: hidden; }
.stimmen__schluss .bildrahmen img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
@media (max-width: 900px) {
  .stimmen__schluss { grid-template-columns: 1fr; }
  .stimmen__schluss .bildrahmen img { height: auto; }
}

.stimmen__kopf--breit { grid-column: 1 / -1; padding-right: 0; align-self: start; margin-bottom: 0.4rem; }

/* --- Zwei Spalten: Überschrift links, Text rechts ----------------------- */
.zweispaltig {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.zweispaltig > *:first-child { margin-bottom: 0; }
@media (max-width: 1024px) {
  .zweispaltig { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* --- Reservierte Bildplaetze und kleine Portraets ------------------------ */
.bildplatz--streifen { aspect-ratio: 4 / 1; }

/* Bildstreifen ueber die volle Bildschirmbreite, steht ausserhalb der Huelle */
.bildband { margin: clamp(2.5rem, 5vw, 3.75rem) 0 0; }
/* Eigenstaendiger Streifen zwischen zwei Abschnitten, ohne Abstand.
   WICHTIG: Die Grundregel oben deckelt .bildband auf 340px Hoehe, ohne das
   Ueberstehende zu beschneiden. Das Bild ragte dadurch aus dem Container
   heraus und legte sich auf den Abschnitt darunter. Hier wird der Deckel
   neu gesetzt und wirklich beschnitten, und zwar unten: der Kopf steht im
   oberen Bilddrittel und bleibt dadurch immer vollstaendig. */
.bildband--voll {
  margin: 0;
  display: block;
  aspect-ratio: auto;
  max-height: clamp(320px, 34vw, 560px);
  overflow: hidden;
}
.bildband--voll img { width: 100%; height: auto; display: block; }
.flaeche-grau .raster { margin-top: 0.25rem; }
.bildband .bildplatz { border-radius: 0; }
.bildband .bildunterschrift { margin-top: 0.9rem; max-width: 62ch; }

.bildstreifen { margin-top: clamp(2.25rem, 4vw, 3.25rem); }
.bildstreifen .bildunterschrift { max-width: 62ch; }

/* Text links, Bild rechts, fuer kurze Abschnitte */
.text-bild {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 4.5vw, 3.75rem);
  align-items: center;
}

/* Kleines Gesicht neben einem grossen Zitat */
.zitat.stimme-reihe,
.einzelstimme.stimme-reihe,
.stimme-reihe {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: start;
}
.stimme-portraet {
  width: clamp(74px, 8vw, 96px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  flex: none;
  background: var(--blau);
  display: grid;
  place-items: center;
  border: 3px solid var(--gelb);
}
.stimme-portraet img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stimme-portraet svg { width: 46%; height: auto; color: #fff; opacity: 0.5; }
.flaeche-grau .stimme-portraet { background: var(--blau); }

@media (max-width: 900px) {
  .text-bild { grid-template-columns: 1fr; }
  .zitat.stimme-reihe,
  .einzelstimme.stimme-reihe,
  .stimme-reihe { grid-template-columns: 1fr; gap: 1.1rem; }
}
@media (max-width: 900px) {
  .bildplatz--streifen { aspect-ratio: 5 / 2; }
}
@media (max-width: 620px) {
  .bildplatz--streifen { aspect-ratio: 3 / 2; }
  .bildplatz--band { aspect-ratio: 3 / 2; }
}

/* --- Karten -------------------------------------------------------------- */
.karte {
  position: relative;
  background: var(--weiss);
  border: 1px solid var(--grau-linie);
  border-top: 3px solid var(--blau);
  border-radius: var(--radius);
  padding: clamp(1.2rem, 1.8vw, 1.55rem);
  transition: border-top-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}
.karte:hover {
  border-top-color: var(--gelb);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0,67,125,0.09);
}
.karte h3 { margin-bottom: 0.5rem; font-size: clamp(1.02rem, 0.96rem + 0.28vw, 1.16rem); }
.karte p { font-size: 0.965rem; line-height: 1.58; color: var(--tinte-weich); }

/* --- Nummerierte Blöcke -------------------------------------------------- */
.stufe { position: relative; padding-top: 1.6rem; border-top: 1px solid var(--grau-linie); }
.flaeche-blau .stufe { border-top-color: rgba(255,255,255,0.22); }
.zaehler {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--blau);
  margin-bottom: 0.9rem;
}
.zaehler i { font-style: normal; color: var(--gelb); }
.flaeche-blau .zaehler { color: #fff; }
.stufe h3 { margin-bottom: 0.5rem; }
.stufe p { color: var(--tinte-weich); }
.flaeche-blau .stufe p { color: rgba(255,255,255,0.86); }
.stufe .rahmenzeile {
  margin-top: 0.9rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--blau);
}
.flaeche-blau .stufe .rahmenzeile { color: var(--gelb); }

/* --- Zeitstrahl: drei klar getrennte Kästen an einer Linie --------------- */
.zeitstrahl { gap: 2rem; }
.zeitstrahl .stufe {
  border-top: none;
  padding-top: 0;
  display: flex;
  flex-direction: column;
}
.zeitstrahl .stufe::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 0;
  right: -2rem;
  height: 2px;
  background: rgba(0,67,125,0.2);
}
.zeitstrahl .stufe:last-child::before { right: 0; }
.zeitstrahl .stufe::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gelb);
  box-shadow: 0 0 0 4px var(--grau);
}
.stufe__karte {
  flex: 1;
  margin-top: 2.5rem;
  background: var(--weiss);
  border: 1px solid var(--grau-linie);
  border-top: 3px solid var(--blau);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 2vw, 1.7rem);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-top-color 0.25s ease;
}
.stufe__karte:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0,67,125,0.1);
  border-top-color: var(--gelb);
}
.stufe__karte .zaehler { font-size: 1.35rem; margin-bottom: 0.6rem; }

/* --- Ebenenliste --------------------------------------------------------- */
.ebene {
  padding: clamp(1.5rem, 2.4vw, 1.9rem);
  background: var(--weiss);
  border: 1px solid var(--grau-linie);
  border-radius: var(--radius);
  transition: box-shadow 0.22s ease, transform 0.22s ease;
}
.ebene:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,67,125,0.09); }
.ebene__nr {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--blau);
  opacity: 0.72;
  display: block;
  margin-bottom: 0.7rem;
}
.ebene__satz {
  font-weight: 700;
  color: var(--blau);
  margin-bottom: 0.6rem;
}
.ebene__fragen { color: var(--tinte-weich); margin: 0; }

/* --- Listen -------------------------------------------------------------- */
.haken {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}
.haken li {
  position: relative;
  padding-left: 1.7rem;
}
.haken li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.42em;
  width: 10px; height: 10px;
  border-top: 3px solid var(--gelb);
  border-left: 3px solid var(--gelb);
}

/* Zweispaltig als Spaltensatz: die Punkte laufen erst die linke Spalte
   herunter, dann die rechte, dadurch entsteht kein Leerraum zwischen ihnen. */
.haken--zwei {
  display: block;
  columns: 2;
  column-gap: 2.4rem;
}
.haken--zwei li { break-inside: avoid; margin-bottom: 0.7rem; }
.haken--zwei li:nth-child(5) { break-after: column; }
.haken--zwei li:last-child { margin-bottom: 0; }

.breit { max-width: none; }

/* --- Abgrenzung ---------------------------------------------------------- */
.abgrenzung {
  border-left: 3px solid var(--grau-linie);
  padding: 0.35rem 0 0.35rem 1.4rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--tinte-weich);
  max-width: 74ch;
}

/* --- Zitate -------------------------------------------------------------- */
.zitat {
  position: relative;
  margin: 0;
  background: var(--weiss);
  border: 1px solid var(--grau-linie);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 2.6vw, 2.1rem);
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}
.zitat blockquote {
  position: relative;
  margin: 0;
  padding-top: 14px;
  padding-left: 16px;
  line-height: 1.62;
  color: var(--tinte);
}
.zitat blockquote::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 44px;
  border-top: 5px solid var(--gelb);
  border-left: 5px solid var(--gelb);
}
.zitat figcaption {
  font-size: 0.9rem;
  color: var(--tinte-weich);
  border-top: 1px solid var(--grau-linie);
  padding-top: 0.9rem;
  margin-top: auto;
}
.zitat figcaption strong { color: var(--blau); font-weight: 700; display: block; }

.hinweiszeile {
  font-size: 0.86rem;
  color: var(--tinte-weich);
  margin-top: 1.6rem;
}

/* --- Person -------------------------------------------------------------- */
.person {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.person--breit { grid-template-columns: minmax(0, 0.68fr) minmax(0, 1.32fr); }

/* --- Formular ------------------------------------------------------------ */
.formular {
  display: grid;
  gap: 1.15rem;
  max-width: 680px;
  margin-inline: auto;
  background: var(--weiss);
  border: 1px solid var(--grau-linie);
  border-top: 3px solid var(--blau);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3.2vw, 2.5rem);
}
.feld { display: grid; gap: 0.4rem; }
.feld label { font-size: 0.92rem; font-weight: 600; color: var(--blau); }
.feld input, .feld textarea {
  font: inherit;
  font-size: 1rem;
  color: var(--tinte);
  background: var(--weiss);
  border: 1px solid var(--grau-linie);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  width: 100%;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.feld input:focus, .feld textarea:focus {
  border-color: var(--blau);
  box-shadow: 0 0 0 3px rgba(0,67,125,0.12);
  outline: none;
}
.feld textarea { min-height: 170px; resize: vertical; }

.haken-feld {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.94rem;
  color: var(--tinte-weich);
}
.haken-feld input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--blau); }

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

.meldung {
  max-width: 680px;
  margin-inline: auto;
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  font-size: 0.98rem;
  margin-bottom: 1.75rem;
  border-left: 5px solid;
}
.meldung--gut { background: rgba(0,67,125,0.06); border-color: var(--blau); color: var(--blau); }
.meldung--schlecht { background: rgba(247,147,30,0.12); border-color: var(--orange); color: #8a4d00; }

/* --- Kontaktdaten -------------------------------------------------------- */
.daten { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.daten a { color: inherit; }

/* --- Fußbereich ---------------------------------------------------------- */
.fussbereich { background: var(--blau); color: rgba(255,255,255,0.78); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.fussbereich a { color: rgba(255,255,255,0.86); text-decoration: none; }
.fussbereich a:hover { color: var(--gelb); }
.fuss__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.fuss__logo { width: 190px; margin-bottom: 1.25rem; }
.fuss__titel {
  font-size: 0.78rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gelb);
  font-weight: 700;
  margin-bottom: 0.9rem;
}
.fuss__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; font-size: 0.97rem; }
.fuss__schluss {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.16);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  font-size: 0.86rem;
  color: rgba(255,255,255,0.6);
}

/* --- Rechtstexte --------------------------------------------------------- */
.rechtstext { max-width: 68ch; }
.rechtstext h2 { font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem); margin-top: 2.6rem; }
.rechtstext h3 { margin-top: 1.8rem; }
.rechtstext ul { padding-left: 1.2rem; }
.rechtstext li { margin-bottom: 0.4rem; }
/* Standzeile auf den Beratungsbedingungen: bei Aenderungen gilt fuer
   laufende Vertraege die Fassung vom Vertragsschluss, deshalb sichtbar. */
.stand {
  background: var(--grau);
  border-left: 5px solid var(--gelb);
  padding: 1.5rem 1.7rem;
  font-size: 0.96rem;
  line-height: 1.65;
  margin-bottom: 3.2rem;
}
.stand strong { color: var(--blau); }

/* Downloadkasten fuer die jeweils gueltige PDF-Fassung der
   Beratungsbedingungen. Der Link muss direkt auf die Datei zeigen,
   ohne Zwischenseite und ohne Weiterleitung. */
.pdf-kasten {
  background: var(--blau);
  border-radius: var(--radius);
  padding: clamp(1.9rem, 3.2vw, 2.6rem);
  margin: 2.4rem 0 3.6rem;
  max-width: 68ch;
}
.pdf-kasten__titel {
  margin: 0 0 1.4rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  color: var(--gelb);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pdf-kasten__hinweis {
  margin: 1.5rem 0 0;
  color: rgba(255,255,255,0.78);
  font-size: 0.92rem;
}
.fassungen {
  list-style: none;
  padding: 0;
  margin: 1.1rem 0 0;
  max-width: 68ch;
}
.fassungen li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.9rem;
  align-items: baseline;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--grau-linie);
}
.fassungen li:first-child { border-top: 1px solid var(--grau-linie); }
.fassungen a { font-weight: 700; }
.fassungen span { color: var(--tinte-weich); font-size: 0.92rem; }

.pruefhinweis {
  background: var(--grau);
  border-left: 5px solid var(--gelb);
  padding: 1.2rem 1.4rem;
  font-size: 0.96rem;
  margin-bottom: 2.5rem;
}


/* ==========================================================================
   Handy und Tablet, eigener Durchgang
   ========================================================================== */
@media (max-width: 1024px) {
  .buehne__raster { grid-template-columns: 1fr; gap: 2.5rem; }
  /* Gestapelt darf das Hochformat nicht den ganzen Bildschirm füllen */
  .bildplatz--hoch { aspect-ratio: 16 / 10; }
  /* Gestapelt wird die ganze Bildspalte begrenzt, nicht nur das Bild.
     Sonst laufen Bildunterschrift und Faktenkasten breiter als das Foto. */
  .buehne__bild { max-width: 420px; }
  .buehne__bild .bildrahmen,
  .person .bildrahmen { max-width: 420px; }
  .person, .person--breit { grid-template-columns: 1fr; gap: 2rem; }
  .raster--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zeitstrahl { gap: 2.5rem; }
  .marke img { width: 168px; }
  .navigation ul { gap: 1.3rem; }
}

@media (max-width: 1040px) {
  .kopfleiste__innen { gap: 0.6rem; min-height: 66px; }
  .marke img { width: 148px; }
  .menue-knopf { display: block; order: 3; }

  .navigation {
    position: fixed;
    inset: 66px 0 auto 0;
    background: var(--weiss);
    border-bottom: 1px solid var(--grau-linie);
    box-shadow: 0 18px 40px rgba(0,67,125,0.12);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.28s ease;
  }
  .navigation.offen { max-height: 420px; }
  .navigation ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--rand) 1.5rem;
  }
  .navigation li { border-bottom: 1px solid var(--grau-linie); }
  .navigation a { display: block; padding: 1rem 0; font-size: 1.05rem; }
  .navigation a::after { display: none; }
  .navigation a[aria-current="page"] { color: var(--blau-hell); }

  /* Der Hauptknopf bleibt oben sichtbar, ohne Scrollen */
  .kopf-knopf { padding: 0.68rem 1rem; font-size: 0.9rem; order: 2; }
  .kopf-knopf .lang { display: none; }

  .raster--3, .raster--2 { grid-template-columns: 1fr; }
  .haken--zwei { grid-template-columns: 1fr; }

  /* Auf dem Handy braucht das Hochformat zu viel Höhe */
  .bildplatz--hoch { aspect-ratio: 3 / 2; }
  .bildplatz--band, .bildband { aspect-ratio: 16 / 9; }
  /* Der Streifen ueber die volle Breite richtet sich nach seinem Bild,
     nicht nach einem festen Seitenverhaeltnis. */
  .bildband--voll { aspect-ratio: auto; max-height: none; }

  .bildrahmen::before { top: -9px; left: -9px; width: 44px; height: 44px; border-width: 5px; }

  .knopf { width: 100%; justify-content: center; }
  .knopf.kopf-knopf { width: auto; }
  .knopf-reihe { display: grid; gap: 0.85rem; justify-items: start; }

  .fuss__raster { grid-template-columns: 1fr 1fr; gap: 2.25rem; }
  .fuss__schluss { flex-direction: column; }
}

@media (max-width: 520px) {
  .fuss__raster { grid-template-columns: 1fr; }
  body { font-size: 1.02rem; }
  .marke img { width: 132px; }
  .kopf-knopf { padding: 0.62rem 0.85rem; font-size: 0.85rem; }
  .ergebnis { padding: 1.15rem 1.15rem; font-size: 1rem; }

  /* Die lange Vorzeile darf auf dem Handy nicht den halben ersten Bildschirm füllen */
  .vorzeile { font-size: 0.72rem; letter-spacing: 0.075em; line-height: 1.5; margin-bottom: 0.85rem; }

  /* Lange Knopfbeschriftung bleibt lesbar und mittig */
  .knopf { font-size: 0.95rem; line-height: 1.35; padding: 0.9rem 1.15rem; text-align: center; }
  .knopf.kopf-knopf { line-height: 1.2; }

  .buehne { padding-block: 2rem 3rem; }
  .zitat blockquote { font-size: 0.99rem; }
}

/* --- Weniger Bewegung, wenn das System es wünscht ------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .auftritt { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

@media print {
  .kopfleiste, .menue-knopf, .knopf, .fussbereich { display: none; }
  body { font-size: 11pt; color: #000; }
}

/* --- Ruhiger Kasten ------------------------------------------------------ */
.kasten {
  background: var(--grau);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 2.4vw, 2rem);
}
.kasten h3:first-child { margin-top: 0; }
.kasten h3 { margin-top: 1.7rem; }
.flaeche-blau .kasten,
.flaeche-tief .kasten { background: rgba(255,255,255,0.08); }
.flaeche-blau .kasten p { color: rgba(255,255,255,0.88); }
.kasten--breit {
  max-width: none;
  border-left: 7px solid var(--gelb);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding-left: clamp(1.4rem, 2.4vw, 2.1rem);
}
.kasten--breit p + p { margin-top: 0.9rem; }

/* Auf blauem Grund ein weisser Kasten, damit er sich klar absetzt */
.flaeche-blau .kasten--breit,
.flaeche-tief .kasten--breit { background: var(--weiss); }
.flaeche-blau .kasten--breit h3,
.flaeche-tief .kasten--breit h3 { color: var(--blau); }
.flaeche-blau .kasten--breit p,
.flaeche-tief .kasten--breit p { color: var(--tinte-weich); }


/* ==========================================================================
   Icons, feine Linien mit gelbem Akzent
   ========================================================================== */
.ikon {
  display: block;
  width: 40px;
  height: 40px;
  margin-bottom: 1.15rem;
  color: var(--blau);
  --akzent: var(--gelb);
  flex: none;
}
.flaeche-blau .ikon,
.flaeche-tief .ikon { color: var(--weiss); --akzent: var(--gelb); }
.ikon--klein { width: 32px; height: 32px; margin-bottom: 0.85rem; }

.karte .ikon { width: 32px; height: 32px; margin-bottom: 0.85rem; }
.karte .ikon,
.ebene .ikon,
.stufe .ikon { transition: transform 0.3s cubic-bezier(0.22,0.61,0.36,1); }
.karte:hover .ikon,
.ebene:hover .ikon { transform: translateY(-3px); }

/* Ein Wort in Gelb, nur auf dunklen Flächen lesbar */
.hell { color: var(--gelb); }

/* ==========================================================================
   Bewegung
   ========================================================================== */
@keyframes hereinkommen {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
@keyframes klammerZeichnen {
  from { clip-path: inset(0 100% 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes bildAufziehen {
  from { opacity: 0; transform: scale(0.965) translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* Auftritt beim Laden im Kopfbereich, gestaffelt */
.buehne__text > * {
  animation: hereinkommen 0.72s cubic-bezier(0.22,0.61,0.36,1) backwards;
}
.buehne__text > *:nth-child(1) { animation-delay: 0.14s; }
.buehne__text > *:nth-child(2) { animation-delay: 0.26s; }
.buehne__text > *:nth-child(3) { animation-delay: 0.38s; }
.buehne__text > *:nth-child(4) { animation-delay: 0.50s; }
.buehne__text > *:nth-child(5) { animation-delay: 0.62s; }
.buehne__text.klammer::before {
  animation: klammerZeichnen 0.85s cubic-bezier(0.65,0,0.35,1) 0.05s backwards;
}
.buehne__bild {
  animation: bildAufziehen 1s cubic-bezier(0.22,0.61,0.36,1) 0.34s backwards;
}

/* ---- Sprungleiste auf der Startseite --------------------------
   Eine schmale Leiste unter der Kopfleiste. Sie erscheint erst,
   wenn die Kopfbuehne weggescrollt ist, zeigt alle Abschnitte und
   markiert den, in dem man sich gerade befindet. */
.sprungleiste {
  /* Fest statt klebend. Als klebendes Element hat die Leiste 50 Pixel im
     Seitenfluss reserviert, auch solange sie unsichtbar war. Direkt unter
     der Kopfbuehne entstand dadurch eine leere Flaeche. Fest positioniert
     nimmt sie keinen Platz ein und ueberdeckt beim Erscheinen, so wie sie
     es als klebende Leiste ohnehin getan hat. */
  position: fixed;
  left: 0;
  right: 0;
  top: 74px;
  z-index: 90;
  background: rgba(255,255,255,0.94);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--grau-linie);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s;
}
.sprungleiste.ist-da {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.sprungleiste__rolle {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.sprungleiste__rolle::-webkit-scrollbar { display: none; }
.sprungleiste__liste {
  display: flex;
  gap: clamp(0.9rem, 2vw, 1.9rem);
  list-style: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}
.sprungleiste__liste a {
  display: block;
  padding: 0.85rem 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--tinte-weich);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.sprungleiste__liste a:hover,
.sprungleiste__liste a:focus-visible { color: var(--blau); }
.sprungleiste__liste a[aria-current="true"] {
  color: var(--blau);
  border-bottom-color: var(--gelb);
}
/* Ziel eines Sprungs darf nicht unter den beiden Leisten verschwinden */
.abschnitt[id] { scroll-margin-top: 124px; }

@media (max-width: 1040px) {
  .sprungleiste { top: 66px; }
  .abschnitt[id] { scroll-margin-top: 112px; }
  .sprungleiste__liste a { font-size: 0.86rem; padding: 0.7rem 0; }
}
@media print { .sprungleiste { display: none; } }

/* Auftritt beim Scrollen, Überschriften kommen leicht von links */
.auftritt {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.75s cubic-bezier(0.22,0.61,0.36,1),
    transform 0.75s cubic-bezier(0.22,0.61,0.36,1);
  will-change: opacity, transform;
}
.auftritt--seitlich { transform: translateX(-26px); }
.auftritt.sichtbar { opacity: 1; transform: none; }

/* Feiner Zoom auf echten Fotos */
.bildrahmen { overflow: hidden; }
.bildrahmen img { transition: transform 0.9s cubic-bezier(0.22,0.61,0.36,1); }
.bildrahmen:hover img { transform: scale(1.035); }

@media (prefers-reduced-motion: reduce) {
  .buehne__text > *,
  .buehne__bild,
  .buehne__text.klammer::before { animation: none; }
  .bildrahmen:hover img { transform: none; }
}

/* ==========================================================================
   Klammer auf schmalen Bildschirmen
   ========================================================================== */
@media (max-width: 520px) {
  .klammer { padding-top: 14px; padding-left: 16px; }
  .klammer::before { width: 46px; height: 46px; border-width: 5px; }
}


/* --- Zeitstrahl und Kopfbild auf schmalen Bildschirmen ------------------- */
@media (max-width: 1040px) {
  .zeitstrahl .stufe { padding-left: 2.3rem; }
  .zeitstrahl .stufe::before {
    top: 12px; bottom: -2.5rem; left: 6px; right: auto;
    width: 2px; height: auto;
  }
  .zeitstrahl .stufe:last-child::before { display: none; }
  .zeitstrahl .stufe::after { top: 6px; left: 0; }
  .stufe__karte { margin-top: 0; }
}

@media (max-width: 860px) {
  .kopfbuehne { min-height: clamp(400px, 72vh, 560px); }
  .kopfbuehne__schleier {
    background: linear-gradient(180deg,
      rgba(0,67,125,0.9) 0%,
      rgba(0,67,125,0.84) 45%,
      rgba(0,67,125,0.94) 100%);
  }
  .bildband { aspect-ratio: 2 / 1; max-height: 240px; }
  .bildband--voll { aspect-ratio: auto; max-height: none; }
}

/* Textlinks auf dunklen Flächen */
.flaeche-blau .knopf--haupt,
.flaeche-tief .knopf--haupt,
.kopfbuehne .knopf--haupt,
.flaeche-blau .knopf--haupt .pfeil,
.flaeche-tief .knopf--haupt .pfeil,
.kopfbuehne .knopf--haupt .pfeil { color: var(--weiss); }

.flaeche-blau .textlink,
.flaeche-tief .textlink,
.kopfbuehne .textlink { color: var(--gelb); background-image: linear-gradient(var(--gelb), var(--gelb)); }
.flaeche-blau .textlink:hover,
.flaeche-tief .textlink:hover,
.kopfbuehne .textlink:hover { color: var(--blau-tief); }


/* ==========================================================================
   Grafik: sechs gleichwertige Ebenen tragen zusammen das Marketing
   ========================================================================== */
.einordnung {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.fundament {
  background: var(--grau);
  border-radius: var(--radius);
  padding: clamp(1.3rem, 2.2vw, 1.8rem);
  position: sticky;
  top: 96px;
}
.fundament__text {
  font-size: 0.93rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--blau);
  margin: 0 0 1.7rem;
  text-align: center;
  text-wrap: balance;
}

/* Das Haus steht direkt auf dem Fundament */
.fundament__haus {
  display: flex;
  justify-content: center;
  margin-bottom: 0;
}
.fundament__haus svg {
  width: 126px;
  height: auto;
  color: var(--blau);
  display: block;
  margin-bottom: -1px;
}

.fundament__stapel {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--weiss);
  border: 1px solid var(--grau-linie);
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
}
.fundament__stapel li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.62rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--blau);
  border-top: 1px solid var(--grau-linie);
  transition: background-color 0.22s ease;
}
.fundament__stapel li:first-child { border-top: none; }
.fundament__stapel li:hover { background: rgba(255,202,15,0.16); }
.fundament__nr { font-size: 0.75rem; font-weight: 700; opacity: 0.5; flex: none; }

/* ---- Kontaktzeilen im Fußbereich mit kleinen Icons ---- */
.fuss__kontakt {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
  font-size: 0.95rem;
}
.fuss__kontakt li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.fuss__kontakt svg {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--gelb);
}

@media (max-width: 1024px) {
  .einordnung { grid-template-columns: 1fr; }
  .fundament { position: static; max-width: 460px; }
}

@media (max-width: 860px) {
  .kopfbuehne { grid-template-columns: 1fr; min-height: 0; }
  .kopfbuehne__text { padding: clamp(2.25rem, 7vw, 3rem) var(--rand); }
  .kopfbuehne__bild { aspect-ratio: 16 / 9; }
}

/* ==========================================================================
   Einzelne Stimme, ruhig gesetzt, ohne Kachel
   ========================================================================== */
.einzelstimme {
  max-width: 60rem;
  margin: 0;
}
.einzelstimme blockquote {
  position: relative;
  margin: 0;
  padding-top: 18px;
  padding-left: 22px;
  /* Etwas ruhiger gesetzt als vorher. Ein langes Zitat wirkt in
     grosser, fetter Schrift schnell wie eine Wand. Die Zeilenlaenge
     ist nach oben begrenzt, damit es auf breiten Bildschirmen nicht
     ueber die ganze Flaeche laeuft. */
  max-width: 34em;
  font-size: clamp(1.06rem, 0.98rem + 0.42vw, 1.28rem);
  font-weight: 600;
  line-height: 1.52;
  letter-spacing: -0.006em;
  color: var(--blau);
}
.einzelstimme blockquote::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 52px;
  height: 52px;
  border-top: 6px solid var(--gelb);
  border-left: 6px solid var(--gelb);
}
.einzelstimme figcaption {
  margin-top: 1.3rem;
  padding-left: 22px;
  font-size: 0.95rem;
  color: var(--tinte-weich);
}
.einzelstimme figcaption strong { display: block; color: var(--blau); font-weight: 700; }
.einzelstimme__link { margin: 1.8rem 0 0; padding-left: 22px; }

/* Portraet und Namensnennung stehen als eine Zeile unter dem Zitat.
   Vorher stand das Bild neben dem ganzen Text und hat dem Zitat
   Breite weggenommen. */
.stimme-zeile {
  display: flex;
  align-items: center;
  gap: 0.95rem;
}
.stimme-zeile .stimme-portraet {
  width: clamp(58px, 5vw, 72px);
}
.stimme-zeile > span:last-child { min-width: 0; }

/* Einzeln stehendes Zitat auf einer Unterseite. Es steht ohne Kasten
   direkt auf der Farbflaeche, mittig gesetzt und in der Breite
   begrenzt, damit die Zeilen nicht zu lang werden. */
.einzelstimme--mitte {
  max-width: none;
}
.einzelstimme--mitte blockquote {
  max-width: none;
  font-size: clamp(1rem, 0.97rem + 0.2vw, 1.12rem);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0;
}

/* Quellenangabe unter Zahlen und Belegen */
.quelle {
  margin-top: 1.5rem;
  font-size: 0.82rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--tinte-weich);
}

@media (max-width: 520px) {
  .einzelstimme blockquote { padding-top: 14px; padding-left: 17px; }
  .einzelstimme blockquote::before { width: 40px; height: 40px; border-width: 5px; }
  .einzelstimme figcaption,
  .einzelstimme__link { padding-left: 17px; }
}


/* ==========================================================================
   Große Zahlen, damit Belege sofort ins Auge fallen
   ========================================================================== */
.zahlen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
}
.zahl {
  border-top: 2px solid rgba(0, 67, 125, 0.22);
  padding-top: 1.15rem;
}
.zahl__zusatz {
  display: block;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blau);
  opacity: 0.7;
  margin-bottom: 0.75rem;
}
.zahl__wert {
  display: block;
  font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.2rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--blau);
  margin-bottom: 0.7rem;
}
.zahl__wert i { font-style: normal; color: var(--gelb); }
.zahl__wert small {
  font-size: 0.3em;
  font-weight: 700;
  letter-spacing: 0.02em;
  vertical-align: 0.62em;
  margin-right: 0.28em;
  opacity: 0.75;
}
.zahl p { font-size: 0.95rem; line-height: 1.55; color: var(--tinte-weich); margin: 0; }

/* Der Satz, der die Zahlen einordnet */
.pointe {
  margin: clamp(2.25rem, 4vw, 3rem) 0 0;
  max-width: 58ch;
  font-size: clamp(1.12rem, 1rem + 0.6vw, 1.42rem);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--blau);
}

@media (max-width: 860px) {
  .zahlen { grid-template-columns: 1fr; gap: 1.9rem; }
}

@media (max-width: 720px) {
  .haken--zwei { columns: 1; }
  .haken--zwei li:nth-child(5) { break-after: auto; }
}

/* Die Überschrift sitzt als erste Zelle im Zitatraster, dadurch bleiben
   die Zitate breit und werden nicht zu langen schmalen Säulen. */
.stimmen__kopf { align-self: center; padding-right: clamp(0rem, 2vw, 2rem); }
.stimmen__kopf h2 { margin-bottom: 0; }
@media (max-width: 1040px) {
  .stimmen__kopf { padding-right: 0; margin-bottom: 0.5rem; }
}

/* ==========================================================================
   Abschluss als eigener Kasten, damit er sich klar von der Fußzeile trennt
   ========================================================================== */
.abschluss-kasten {
  border-radius: var(--radius);
  border-bottom: 6px solid var(--gelb);
  padding: clamp(1.9rem, 4.5vw, 3.5rem);
}
.abschluss-kasten p { color: rgba(255,255,255,0.92); }
.abschluss-kasten .hell { color: var(--gelb); }

/* Die Fußzeile bekommt eine sichtbare Oberkante */
.fussbereich { border-top: 1px solid rgba(255,255,255,0.14); }

/* Einzelstimme als eigene blaue Fläche, damit sie sich von den weißen
   Nachbarabschnitten abgrenzt. Der Aufruf steht bewusst rechts daneben
   und nicht unter dem Namen, sonst liest er sich wie ein Gespräch mit
   der zitierten Person. */
.stimme-band {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
/* Zitat und Bild stehen nebeneinander statt uebereinander: links das Bild,
   rechts das Zitat mit Portraet und dem Aufruf zum Erstgespraech. */
.stimme-band--bild { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: stretch; }
/* Das Bild fuellt seine Spalte vollstaendig aus, oben und unten buendig mit
   dem Text daneben. Der Schnitt sitzt etwas oberhalb der Mitte, damit dabei
   keine Gesichter verloren gehen. */
.stimme-band__bild { position: relative; min-height: 100%; }
.stimme-band__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
@media (max-width: 1040px) {
  .stimme-band__bild img { height: auto; }
}
.stimme-band--bild .einzelstimme blockquote { max-width: none; }
.stimme-band__aufruf { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
@media (max-width: 1040px) {
  .stimme-band--bild { grid-template-columns: 1fr; }
}

.flaeche-blau .einzelstimme blockquote { color: var(--weiss); }
.flaeche-blau .einzelstimme figcaption { color: rgba(255,255,255,0.72); }
.flaeche-blau .einzelstimme figcaption strong { color: var(--gelb); }
.stimme-band__aufruf p { font-size: 1rem; margin-bottom: 1.1rem; }

@media (max-width: 1040px) {
  .stimme-band { grid-template-columns: 1fr; gap: 2rem; }
}

/* Der gelbe Sockel liegt breiter als das Bauwerk darüber. */
.fundament__sockel {
  width: calc(100% + 24px);
  margin-left: -12px;
  height: 9px;
  background: var(--gelb);
  border-radius: 0 0 2px 2px;
}

/* ==========================================================================
   Formularfelder: Pflichtangaben, zweispaltige Zeilen, Auswahlfelder
   ========================================================================== */
.pflicht { color: var(--pflicht); font-weight: 700; margin-left: 0.15em; }

.formular__hinweis {
  font-size: 0.86rem;
  color: var(--tinte-weich);
  margin: 0 0 0.4rem;
}
.formular__hinweis .pflicht { margin-left: 0; }

.feld-reihe {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.15rem;
}

.feld select {
  font: inherit;
  font-size: 1rem;
  color: var(--tinte);
  background: var(--weiss);
  border: 1px solid var(--grau-linie);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  width: 100%;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2300437D' stroke-width='1.8'%3E%3Cpath d='M1 1.5L6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px 8px;
  padding-right: 2.6rem;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.feld select:focus {
  border-color: var(--blau);
  box-shadow: 0 0 0 3px rgba(0,67,125,0.12);
  outline: none;
}
.feld__zusatz { font-size: 0.84rem; font-weight: 400; color: var(--tinte-weich); }

@media (max-width: 520px) {
  .feld-reihe { grid-template-columns: 1fr; }
}

/* Bild oben ausrichten, wenn die Textspalte deutlich länger ist */
.buehne__raster--oben { align-items: start; }

/* ==========================================================================
   Kompakter Faktenkasten, zum Beispiel unter einem Porträt
   ========================================================================== */
.fakten {
  margin-top: 1.25rem;
  background: var(--grau);
  border-radius: var(--radius);
  border-bottom: 4px solid var(--gelb);
  padding: clamp(1.15rem, 2vw, 1.5rem);
}
.fakten__titel {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blau);
  opacity: 0.75;
  margin: 0 0 0.9rem;
}
.fakten dl { margin: 0; display: grid; gap: 0.85rem; }
.fakten dt {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blau);
  opacity: 0.6;
  margin-bottom: 0.15rem;
}
.fakten dd { margin: 0; font-size: 0.92rem; line-height: 1.45; color: var(--tinte); }

/* Namenszeile unter einem Porträt */
.bildunterschrift {
  margin: 0.9rem 0 0;
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--tinte-weich);
}
.bildunterschrift strong {
  display: block;
  font-size: 1.06rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--blau);
  margin-bottom: 0.1rem;
}

/* Das Porträt behält sein Seitenverhältnis, damit nichts abgeschnitten wird.
   Der Kasten bleibt kompakt und wird nach unten geschoben, die verbleibende
   Höhe liegt als Abstand dazwischen. So schließt die rechte Spalte bündig
   mit dem Text links ab, ohne dass etwas auseinandergezogen wirkt. */
@media (min-width: 1025px) {
  .buehne__raster--oben { align-items: stretch; }
  .buehne__raster--oben .buehne__bild { display: flex; flex-direction: column; }
  /* Das Bild füllt die verbleibende Höhe und wird dafür seitlich
     beschnitten. Weil das Foto mittig auf die Person zugeschnitten ist,
     bleibt links und rechts genug Luft, es wird nichts abgeschnitten. */
  .buehne__raster--oben .bildrahmen { flex: 1; min-height: 340px; }
  .buehne__raster--oben .bildrahmen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 40 statt 50 Prozent: das Fenster sitzt weiter links, dadurch rückt
       die Schulter näher an den rechten Rand und der Ellenbogen bekommt Luft. */
    object-position: 40% center;
  }
}

/* Stoßen zwei Abschnitte ohne Hintergrundfarbe aneinander, addieren sich
   ihre Abstände zu einer großen weißen Lücke. Dann reicht einer davon. */
.abschnitt:not(.flaeche-grau):not(.flaeche-blau):not(.flaeche-tief)
  + .abschnitt:not(.flaeche-grau):not(.flaeche-blau):not(.flaeche-tief) {
  padding-top: 0;
}

/* ==========================================================================
   Seite Vorgehen
   ========================================================================== */

/* Kopfbereich mit größerem Bild */
.buehne__raster--breitbild { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); }
@media (min-width: 1025px) {
  .buehne__raster--breitbild { align-items: stretch; }
  .buehne__raster--breitbild .buehne__bild { display: flex; }
  .buehne__raster--breitbild .bildrahmen { flex: 1; }
  .buehne__raster--breitbild .bildrahmen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }
}

/* Drei Phasen als anklickbare Sprungmarken */
.phasenlink { text-decoration: none; color: inherit; }
.phasenlink .stufe__karte { display: block; }
.phasenlink__titel {
  display: block;
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.28rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--blau);
  margin-bottom: 0.45rem;
}
.phasenlink__text { display: block; font-size: 0.95rem; line-height: 1.5; color: var(--tinte-weich); }
.phasenlink,
.phasenlink * { text-decoration: none; }
.phasenlink__mehr {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  padding-bottom: 3px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--blau);
  background-image: linear-gradient(var(--gelb), var(--gelb));
  background-size: 100% 3px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.25s ease;
}
.phasenlink__mehr .pfeil { transition: transform 0.2s ease; }
.phasenlink:hover .phasenlink__mehr { background-size: 100% 100%; }
.phasenlink:hover .phasenlink__mehr .pfeil { transform: translateX(4px); }

/* Die sechs Ebenen zum Aufklappen */
.ebenen-liste { display: grid; gap: 8px; }
.ebene-auf {
  background: var(--weiss);
  border: 1px solid var(--grau-linie);
  border-left: 3px solid rgba(0,67,125,0.25);
  border-radius: var(--radius);
  transition: border-left-color 0.22s ease;
}
.ebene-auf[open] { border-left-color: var(--gelb); }
.ebene-auf > summary {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.95rem 1.15rem;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  color: var(--blau);
}
.ebene-auf > summary::-webkit-details-marker { display: none; }
.ebene-auf > summary:hover { background: rgba(0,67,125,0.03); }
.ebene-auf .ikon { width: 26px; height: 26px; margin: 0; flex: none; }
.ebene-auf__titel { flex: 1; font-size: 1.02rem; line-height: 1.3; }
.ebene-auf__pfeil { flex: none; width: 15px; height: 15px; color: var(--blau); transition: transform 0.25s ease; }
.ebene-auf[open] .ebene-auf__pfeil { transform: rotate(180deg); }
.ebene-auf__inhalt { padding: 0 1.15rem 1.2rem 1.15rem; }
.ebene-auf__satz { font-weight: 700; color: var(--blau); margin-bottom: 0.5rem; }
.ebene-auf__fragen { font-size: 0.96rem; color: var(--tinte-weich); margin: 0; }

/* Aufklappliste fuer die haeufigen Fragen, gleiche Bauweise ohne Ikon */
.ebene-auf--frage > summary { padding: 1.05rem 1.25rem; gap: 1.25rem; }
.ebene-auf--frage .ebene-auf__titel { font-size: 1.05rem; }
.ebene-auf--frage .ebene-auf__inhalt { padding: 0 1.25rem 1.3rem 1.25rem; }
.ebene-auf__antwort { font-size: 0.99rem; color: var(--tinte-weich); margin: 0; max-width: none; }

/* Sprungziele nicht unter der Kopfleiste verstecken */
[id^="phase-"] { scroll-margin-top: 96px; }

@media (max-width: 1024px) {
  .buehne__raster--breitbild { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .ebene-auf > summary { gap: 0.6rem; padding: 0.85rem 0.95rem; }
  .ebene-auf__titel { font-size: 0.97rem; }
  .ebene-auf__inhalt { padding: 0 0.95rem 1rem 0.95rem; }
  .ebene-auf--frage > summary { padding: 0.9rem 0.95rem; gap: 0.85rem; }
  .ebene-auf--frage .ebene-auf__titel { font-size: 0.99rem; }
  .ebene-auf--frage .ebene-auf__inhalt { padding: 0 0.95rem 1.1rem 0.95rem; }
}