/* ==========================================================================
   Tobias Schnippering: Gestaltung der Website
   Aufbau: Schriften, Farben, Grundlagen, Kopf, Bausteine, Startseite,
   Unterseiten, Kontakt, Rechtliches, Fuß, Tablet, Handy
   Grundregel Typografie: Roboto Condensed für alles, die Serifenschrift
   Newsreader nur im Kopfbereich und für eine Überschrift pro Abschnitt.
   ========================================================================== */

/* ---------- Schriften: liegen auf dem eigenen Server, kein Google-Abruf ---------- */
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-latin-opsz-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-latin-wght-italic.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Condensed";
  src: url("../fonts/roboto-condensed-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Farben und Maße ---------- */
:root {
  --navy: #073e62;          /* Markenfarbe laut Logo-Übersicht */
  --nacht: #04263d;         /* dunkle Flächen, Fußbereich */
  --sand: #c8b288;          /* sparsamer Akzent auf dunklem Grund */
  --papier: #f4f2ed;        /* heller Seitengrund */
  --text: #1d2733;          /* Fließtext */
  --weiss: #ffffff;

  --text-leise: rgba(29, 39, 51, 0.74);
  --linie: rgba(7, 62, 98, 0.16);
  --hell: rgba(255, 255, 255, 0.9);
  --hell-leise: rgba(255, 255, 255, 0.7);
  --linie-hell: rgba(255, 255, 255, 0.2);
  --fehler: #9a3b2e;

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Roboto Condensed", "Arial Narrow", "Segoe UI", system-ui, sans-serif;

  --breite: 72rem;
  --rand: clamp(1.25rem, 4vw, 2.5rem);
  --abstand: clamp(5.5rem, 11vw, 10rem);
  --weich: cubic-bezier(0.22, 0.61, 0.36, 1);
  color-scheme: light;
}

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

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

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.125rem;
  line-height: 1.62;
  color: var(--text);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }

h1, h2 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.012em;
  color: var(--navy);
  margin: 0 0 0.45em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.9rem, 6.2vw, 5.1rem); line-height: 1.02; }
h2 { font-size: clamp(2.1rem, 3.9vw, 3.25rem); line-height: 1.08; }
h3 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(1.25rem, 1.6vw, 1.4rem);
  line-height: 1.25;
  color: var(--navy);
  margin: 0 0 0.4em;
}
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }

:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.dunkel :focus-visible,
.fuss :focus-visible,
.bildband--dunkel :focus-visible { outline-color: var(--sand); }

.container { width: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto; }

.nur-vorlesen {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.sprungmarke {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--navy);
  color: var(--weiss);
  font-weight: 500;
  text-decoration: none;
  transition: top 0.2s;
}
.sprungmarke:focus { top: 1rem; }

/* ---------- Kleine Bausteine ---------- */
/* Orientierungstitel über einer Überschrift */
.eyebrow {
  margin: 0 0 1.1rem;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
}
.dunkel .eyebrow,
.bildband--dunkel .eyebrow { color: var(--sand); }

.einleitung { font-size: clamp(1.12rem, 1.4vw, 1.25rem); line-height: 1.6; color: var(--text-leise); max-width: 36rem; }
.dunkel .einleitung { color: var(--hell); }

/* Leitfrage unter der Überschrift auf Unterseiten: bewusst ohne Serifen */
.leitfrage {
  font-family: var(--sans);
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
  font-weight: 400;
  line-height: 1.35;
  color: var(--sand);
  margin: 0 0 1.25rem;
}

.kopf { max-width: 44rem; }
.kopf .einleitung { margin-top: 0.25rem; }

.icon { width: 1em; height: 1em; flex: none; }

/* Linien-Icons im Strich des Leuchtturms */
.linien-icon {
  width: 2.75rem; height: 2.75rem;
  flex: none;
  color: var(--navy);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Original-Leuchtturm als Grafik, Farbe kommt aus currentColor */
.leuchtturm {
  display: block;
  aspect-ratio: 138.898 / 204.094;
  background: currentColor;
  -webkit-mask: url("../img/leuchtturm.svg") center / contain no-repeat;
  mask: url("../img/leuchtturm.svg") center / contain no-repeat;
}

/* Knöpfe */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.1rem;
  padding: 0.8rem 1.6rem;
  font: 500 1.02rem/1.2 var(--sans);
  letter-spacing: 0.02em;
  text-decoration: none;
  text-align: center;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s, transform 0.25s var(--weich);
}
.btn .icon { transition: transform 0.3s var(--weich); }
.btn:hover .icon { transform: translateX(3px); }
.btn-primaer { background: var(--navy); color: var(--weiss); }
.btn-primaer:hover { background: var(--nacht); transform: translateY(-1px); }
.btn-sand { background: var(--sand); color: var(--nacht); }
.btn-sand:hover { background: var(--weiss); transform: translateY(-1px); }
.btn-rahmen { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn-rahmen:hover { background: var(--navy); color: var(--weiss); }
.btn[disabled] { opacity: 0.6; cursor: wait; transform: none; }

/* Textlink mit Pfeil */
.mehr {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  font-size: 1rem;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid var(--linie);
  padding-bottom: 0.2rem;
  transition: border-color 0.25s;
}
.mehr .icon { transition: transform 0.3s var(--weich); }
.mehr:hover { border-bottom-color: var(--navy); }
.mehr:hover .icon { transform: translateX(3px); }
.dunkel .mehr,
.bildband--dunkel .mehr { color: var(--weiss); border-bottom-color: var(--linie-hell); }
.dunkel .mehr:hover,
.bildband--dunkel .mehr:hover { border-bottom-color: var(--sand); }

/* Sanftes Einblenden beim Scrollen (nur mit JavaScript) */
.js .einblenden {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s var(--weich), transform 0.9s var(--weich);
}
.js .einblenden.ist-sichtbar { opacity: 1; transform: none; }
.js .verzoegert-1 { transition-delay: 0.1s; }
.js .verzoegert-2 { transition-delay: 0.2s; }
.js .verzoegert-3 { transition-delay: 0.3s; }

@keyframes aufsteigen {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Kopfbereich mit Navigation ---------- */
.seitenkopf-leiste {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(244, 242, 237, 0.95);
  -webkit-backdrop-filter: saturate(1.2) blur(8px);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.seitenkopf-leiste.ist-gescrollt {
  border-bottom-color: var(--linie);
  box-shadow: 0 10px 30px -24px rgba(4, 38, 61, 0.45);
}
.kopf-innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 5.25rem;
}
.marke { display: block; flex: none; }
.marke img { height: 3.9rem; width: auto; }

.navi-liste { display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 2.1rem); list-style: none; }
.navi-liste a:not(.btn) {
  position: relative;
  display: inline-block;
  padding: 0.4rem 0;
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--text);
  text-decoration: none;
}
.navi-liste a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.1rem;
  height: 1px;
  background: var(--navy);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--weich);
}
.navi-liste a:not(.btn):hover::after,
.navi-liste a[aria-current]::after { transform: scaleX(1); }
.navi-liste a[aria-current] { color: var(--navy); }
.navi-liste .btn { min-height: 2.75rem; padding: 0.6rem 1.2rem; }

.menue-knopf {
  display: none;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.9rem;
  padding: 0.5rem 0.9rem;
  font: 500 1rem var(--sans);
  color: var(--navy);
  background: transparent;
  border: 1px solid var(--linie);
  border-radius: 2px;
  cursor: pointer;
}
.menue-striche { position: relative; width: 1.1rem; height: 0.75rem; }
.menue-striche::before,
.menue-striche::after,
.menue-striche span {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.3s var(--weich), opacity 0.2s;
}
.menue-striche::before { top: 0; }
.menue-striche span { top: 50%; transform: translateY(-50%); }
.menue-striche::after { bottom: 0; }
.menue-knopf[aria-expanded="true"] .menue-striche::before { transform: translateY(0.33rem) rotate(45deg); }
.menue-knopf[aria-expanded="true"] .menue-striche::after { transform: translateY(-0.33rem) rotate(-45deg); }
.menue-knopf[aria-expanded="true"] .menue-striche span { opacity: 0; }

/* ---------- Startseite: großer Kopfbereich ---------- */
.dunkel { background: var(--navy); color: var(--hell); }
.dunkel h1, .dunkel h2 { color: var(--weiss); }
.dunkel h3 { color: var(--weiss); }

.buehne { position: relative; overflow: hidden; }
.buehne-innen {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
  padding-block: clamp(3.5rem, 7vw, 6rem) clamp(4rem, 8vw, 6.5rem);
}
.buehne h1 em { font-style: italic; color: var(--sand); }
.buehne-text > * { animation: aufsteigen 0.9s var(--weich) both; }
.buehne-text > :nth-child(2) { animation-delay: 0.08s; }
.buehne-text > :nth-child(3) { animation-delay: 0.16s; }
.buehne-text > :nth-child(4) { animation-delay: 0.24s; }
.buehne .einleitung { margin-bottom: 2rem; }
.handlung { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.handlung-notiz { font-size: 1rem; color: var(--hell-leise); margin: 0; }

/* Foto mit feinem, versetztem Rahmen */
.rahmenbild { position: relative; margin: 0; animation: aufsteigen 1.1s 0.2s var(--weich) both; }
.rahmenbild::before {
  content: "";
  position: absolute;
  inset: 1.1rem -1.1rem -1.1rem 1.1rem;
  border: 1px solid var(--sand);
  opacity: 0.75;
}
.rahmenbild img {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--nacht);
}

/* ---------- Abschnitte ---------- */
.abschnitt { padding-block: var(--abstand); }
.abschnitt--weiss { background: var(--weiss); }

/* Bildband: ein Foto über die ganze Breite, wenig Text */
.bildband {
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(28rem, 72vh, 44rem);
  overflow: hidden;
  isolation: isolate;
}
.bildband-foto {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bildband::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}
.bildband-text { padding-block: clamp(4rem, 8vw, 6rem); }
.bildband-text h2 { font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: 1.04; margin-bottom: 0.5em; }

/* Haltung: diffuse See, dunkle Schrift auf hellem Himmel */
.haltung .bildband-foto { object-position: 50% 28%; }
.haltung::after { background: linear-gradient(90deg, rgba(244, 242, 237, 0.62) 0%, rgba(244, 242, 237, 0.25) 55%, rgba(244, 242, 237, 0) 80%); }
.haltung-zeile {
  max-width: 30rem;
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  line-height: 1.55;
  color: var(--text);
}

/* Abschluss: klare See, helle Schrift */
.bildband--dunkel { color: var(--hell); }
.bildband--dunkel h2 { color: var(--weiss); }
.bildband--dunkel::after { background: linear-gradient(90deg, rgba(4, 38, 61, 0.7) 0%, rgba(4, 38, 61, 0.42) 50%, rgba(4, 38, 61, 0.06) 85%); }
.abschluss-bild .bildband-foto { object-position: 50% 40%; }
.abschluss-bild .einleitung { color: var(--hell); margin-bottom: 2rem; }
.abschluss-zeichen { width: 2.6rem; color: var(--weiss); margin-bottom: 1.75rem; opacity: 0.92; }

/* Typische Kundensituationen */
.lagen {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: start;
}
.lagen-liste { list-style: none; border-top: 1px solid var(--linie); }
.lagen-liste a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.45rem 0;
  border-bottom: 1px solid var(--linie);
  font-size: clamp(1.15rem, 1.55vw, 1.3rem);
  line-height: 1.45;
  color: var(--text);
  text-decoration: none;
  transition: color 0.25s, padding-left 0.4s var(--weich);
}
.lagen-liste a:hover { color: var(--navy); padding-left: 0.6rem; }
.lagen-liste .icon { color: var(--navy); transition: transform 0.3s var(--weich); }
.lagen-liste a:hover .icon { transform: translate(2px, -2px); }

/* Vier Schritte mit Linie und Icons */
.schritte {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.75rem);
  margin-top: clamp(3rem, 6vw, 4.5rem);
  list-style: none;
}
.schritte::before,
.schritte::after {
  content: "";
  position: absolute;
  left: 1.25rem; right: 1.25rem; top: 1.25rem;
  height: 1px;
  background: var(--linie);
}
.schritte::after { background: var(--navy); transform-origin: left; }
.js .schritte::after { transform: scaleX(0); transition: transform 1.6s var(--weich) 0.2s; }
.js .schritte.ist-sichtbar::after { transform: scaleX(1); }
.schritt { position: relative; }
.schritt .linien-icon { position: relative; z-index: 1; background: var(--papier); box-shadow: 0 0 0 0.6rem var(--papier); }
.abschnitt--weiss .schritt .linien-icon { background: var(--weiss); box-shadow: 0 0 0 0.6rem var(--weiss); }
.schritt-nr { display: block; margin: 1.6rem 0 0.35rem; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-leise); }
.schritt h3 { margin-bottom: 0.45rem; }
.schritt p { color: var(--text-leise); font-size: 1.05rem; }
.vorgehen-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--linie);
}
.vorgehen-fuss p { margin: 0; font-size: 1.15rem; }

/* Bereiche */
.bereiche-raster { margin-top: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--linie); }
.bereich-absichern {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-block: 2.25rem;
  border-bottom: 1px solid var(--linie);
}
.bereich-frage { color: var(--text-leise); font-size: 1.1rem; margin: 0; }
.zielgruppen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2.5rem); list-style: none; }
.zielgruppen li { display: flex; }
.zielgruppe {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 0.25rem 1rem;
  width: 100%;
  color: var(--text);
  text-decoration: none;
}
.zielgruppe .linien-icon { grid-row: span 3; transition: transform 0.4s var(--weich); }
.zielgruppe:hover .linien-icon { transform: translateY(-2px); }
.zielgruppe-titel { font-size: 1.25rem; font-weight: 500; color: var(--navy); }
.zielgruppe-frage { color: var(--text-leise); }
.zielgruppe .mehr { justify-self: start; margin-top: 0.5rem; }
.bereich-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bereich-kurz {
  display: block;
  padding: 2.25rem 2rem 2.25rem 0;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--linie);
}
.bereich-kurz + .bereich-kurz { padding-left: 2rem; border-left: 1px solid var(--linie); }
.bereich-kurz p { color: var(--text-leise); margin-bottom: 1.1rem; }
.bereich-kurz:hover .mehr { border-bottom-color: var(--navy); }
.bereich-kurz:hover .mehr .icon { transform: translateX(3px); }

/* Ruhestandsplanung: Bild und Text nebeneinander */
.ruhestand {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: center;
}
.ruhestand-bild { margin: 0; overflow: hidden; }
.ruhestand-bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1.4s var(--weich); }
.ruhestand-bild:hover img { transform: scale(1.03); }
.ruhestand .einleitung { margin-bottom: 1.75rem; }
.mitglied {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linie);
  font-size: 0.98rem;
  color: var(--text-leise);
}
.mitglied img { width: 6.5rem; height: auto; flex: none; }
.mitglied p { margin: 0; }

/* Über mich mit großer Zahl */
.vorstellung {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: center;
}
.bild-zoom { margin: 0; overflow: hidden; }
.bild-zoom img { width: 100%; transition: transform 1.4s var(--weich); }
.bild-zoom:hover img { transform: scale(1.03); }
.vorstellung .bild-zoom img { aspect-ratio: 4 / 5; object-fit: cover; }
.kennzahl { display: flex; align-items: baseline; gap: 1rem; margin: 0 0 1.5rem; }
.kennzahl-wert { font-size: clamp(4.5rem, 9vw, 7rem); font-weight: 300; line-height: 0.9; color: var(--navy); letter-spacing: -0.02em; }
.kennzahl-text { font-size: 0.8rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-leise); }
.nachweise { margin: 0 0 1.75rem; font-size: 0.98rem; color: var(--text-leise); }
.link-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.mehr--extern:hover .icon { transform: translate(2px, -2px); }

/* Abschluss auf Unterseiten: dunkle Fläche mit Original-Leuchtturm */
.abschluss { position: relative; overflow: hidden; padding-block: clamp(4.5rem, 8vw, 6.5rem); }
.abschluss-innen { position: relative; z-index: 1; max-width: 40rem; }
.abschluss h2 { margin-bottom: 0.4em; }
.abschluss .einleitung { margin-bottom: 2rem; }
.abschluss-telefon { margin-top: 1.5rem; font-size: 1rem; color: var(--hell-leise); }
.abschluss-telefon a { color: var(--weiss); font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--linie-hell); }
.abschluss-telefon a:hover { border-bottom-color: var(--sand); }
.leuchtfeuer {
  position: absolute;
  right: max(var(--rand), calc((100% - var(--breite)) / 2));
  top: 50%;
  width: clamp(8rem, 15vw, 12rem);
  transform: translateY(-50%);
  color: var(--weiss);
  opacity: 0.12;
  pointer-events: none;
}

/* ---------- Unterseiten ---------- */
.seitenkopf-innen {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.8fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
  padding-block: clamp(3rem, 6vw, 5rem) clamp(3.5rem, 7vw, 5.5rem);
}
.seitenkopf-innen h1 { font-size: clamp(2.75rem, 5.6vw, 4.5rem); margin-bottom: 0.25em; }
.seitenkopf-innen .rahmenbild { max-width: 26rem; justify-self: end; width: 100%; }

.zweispaltig {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.45fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: start;
}
.zweispaltig .kopf { position: sticky; top: 7.5rem; }

.leistungen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.75rem 3rem; list-style: none; }
.leistung h3::before {
  content: "";
  display: block;
  width: 2rem; height: 1px;
  margin-bottom: 1rem;
  background: var(--navy);
  transition: width 0.45s var(--weich);
}
.leistung:hover h3::before { width: 3.5rem; }
.leistung p { color: var(--text-leise); }

.punkte { list-style: none; margin-top: 1.25rem; display: grid; gap: 0.6rem; }
.punkte li { position: relative; padding-left: 1.6rem; }
.punkte li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 0.55rem; height: 0.55rem;
  border: 1.5px solid var(--navy);
  border-radius: 50%;
}
.dunkel .punkte li::before { border-color: var(--sand); }

.themenblock + .themenblock { margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: clamp(3rem, 6vw, 4.5rem); border-top: 1px solid var(--linie); }
.themenblock h3 { font-size: clamp(1.45rem, 2.2vw, 1.75rem); }
.themenblock p { max-width: 40rem; }

.hinweis {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  font-size: 1rem;
  color: var(--text-leise);
  background: var(--papier);
  border-left: 2px solid var(--sand);
}
.abschnitt:not(.abschnitt--weiss) .hinweis { background: var(--weiss); }

/* Schadenfall */
.schaden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 4rem); margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.nummern { list-style: none; counter-reset: nr; display: grid; gap: 1rem; }
.nummern li { counter-increment: nr; position: relative; padding-left: 3rem; min-height: 2.2rem; padding-top: 0.15rem; }
.nummern li::before {
  content: counter(nr);
  position: absolute;
  left: 0; top: 0;
  width: 2.1rem; height: 2.1rem;
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--navy);
  border: 1px solid var(--linie);
  border-radius: 50%;
}
.notruf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1rem;
  margin-top: 2rem;
  padding: 1.25rem 1.5rem;
  background: var(--navy);
  color: var(--hell);
}
.notruf a { font-size: 1.6rem; font-weight: 500; color: var(--weiss); text-decoration: none; }
.notruf a:hover { text-decoration: underline; }

/* Rollen bei der Nachfolge */
.rollen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; list-style: none; margin-top: 2rem; }
.rolle { padding: 1.5rem; background: var(--weiss); border: 1px solid var(--linie); }
.abschnitt--weiss .rolle { background: var(--papier); }
.rolle p { font-size: 1rem; color: var(--text-leise); }
.rolle--ich { background: var(--navy) !important; border-color: var(--navy); color: var(--hell); }
.rolle--ich h3 { color: var(--weiss); }
.rolle--ich p { color: var(--hell); }

/* Über mich: breites Foto, das in den dunklen Kopf ragt */
.ueber-kopf { padding-block: clamp(3rem, 6vw, 5rem) clamp(7rem, 14vw, 11rem); }
.ueber-kopf h1 { margin-bottom: 0.2em; }
.breitbild { margin: calc(-1 * clamp(5rem, 11vw, 8.5rem)) auto 0; position: relative; z-index: 1; }
.breitbild img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 30% 30%; }

.weg { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.8fr); gap: clamp(2rem, 6vw, 5.5rem); align-items: center; }
.weg .bild-zoom img { aspect-ratio: 1 / 1; object-fit: cover; }

.vergleich { width: 100%; border-collapse: collapse; margin-top: 2rem; font-size: 1.05rem; }
.vergleich caption { text-align: left; }
.vergleich th, .vergleich td { text-align: left; vertical-align: top; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--linie); }
.vergleich thead th { font-size: 1.2rem; font-weight: 500; color: var(--navy); border-bottom: 2px solid var(--linie); }
.vergleich tbody th { font-weight: 500; width: 26%; color: var(--text); }
.vergleich td { color: var(--text-leise); }
.vergleich .makler { background: rgba(7, 62, 98, 0.06); color: var(--text); }
.vergleich thead .makler { color: var(--navy); border-bottom-color: var(--navy); }

.kernsatz {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  font-weight: 400;
  line-height: 1.4;
  color: var(--navy);
  max-width: 44rem;
}
.kernsatz::before {
  content: "";
  display: block;
  width: 3rem; height: 2px;
  margin-bottom: 1.25rem;
  background: var(--sand);
}

.qualis { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
.quali { padding: 1.4rem 1.5rem; background: var(--weiss); border: 1px solid var(--linie); transition: border-color 0.3s; }
.quali:hover { border-color: var(--navy); }
.quali strong { display: block; font-size: 1.2rem; font-weight: 500; color: var(--navy); line-height: 1.3; margin-bottom: 0.25rem; }
.quali span { font-size: 1rem; color: var(--text-leise); }

.grundsaetze { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); list-style: none; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.grundsatz { border-top: 1px solid var(--linie); padding-top: 1.25rem; }
.grundsatz-nr { font-size: 2rem; font-weight: 300; line-height: 1; color: var(--navy); opacity: 0.6; }
.grundsatz h3 { margin: 0.6rem 0 0.45rem; }
.grundsatz p { font-size: 1.05rem; color: var(--text-leise); }

/* ---------- Kontakt ---------- */
.kontakt-raster { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.8fr); gap: clamp(2.5rem, 6vw, 5.5rem); align-items: start; }
.formular-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.5rem; margin-top: 2rem; }
.feld { display: flex; flex-direction: column; gap: 0.45rem; }
.feld--breit { grid-column: 1 / -1; }
.feld label { font-size: 1rem; font-weight: 500; }
.feld .optional { font-weight: 400; color: var(--text-leise); }
.feld input,
.feld select,
.feld textarea {
  width: 100%;
  min-height: 3.1rem;
  padding: 0.8rem 1rem;
  font: 400 1.05rem/1.4 var(--sans);
  color: var(--text);
  background: var(--weiss);
  border: 1px solid rgba(29, 39, 51, 0.3);
  border-radius: 2px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.feld select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23073e62' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1rem;
}
.feld textarea { min-height: 9.5rem; resize: vertical; }
.feld input:focus,
.feld select:focus,
.feld textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(7, 62, 98, 0.16); }
.feld input:user-invalid,
.feld textarea:user-invalid { border-color: var(--fehler); }
.honigtopf { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.formular-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.75rem; }
.datenschutz-notiz { font-size: 0.95rem; color: var(--text-leise); margin: 0; max-width: 30rem; }
.meldung {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--weiss);
  border-left: 3px solid var(--navy);
}
.meldung--fehler { border-left-color: var(--fehler); color: var(--fehler); }

.direkt { list-style: none; border-top: 1px solid var(--linie); }
.direkt li { padding: 1.1rem 0; border-bottom: 1px solid var(--linie); }
.direkt-titel { display: block; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-leise); margin-bottom: 0.2rem; }
.direkt a { display: inline-block; padding-block: 0.3rem; color: var(--navy); font-weight: 500; text-decoration: none; }
.direkt a:hover { text-decoration: underline; }

/* ---------- Rechtliche Seiten ---------- */
.recht-kopf { padding-block: clamp(3rem, 6vw, 4.5rem); }
.recht-kopf h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); margin-bottom: 0.2em; }
.recht { max-width: 46rem; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.recht h2 { font-family: var(--sans); font-size: clamp(1.35rem, 2vw, 1.6rem); font-weight: 500; letter-spacing: 0; margin: 2.75rem 0 0.75rem; }
.recht h3 { font-size: 1.15rem; color: var(--text); margin: 1.75rem 0 0.5rem; }
.recht h4 { font-size: 1.05rem; font-weight: 500; margin: 1.25rem 0 0.4rem; }
.recht ul { padding-left: 1.25rem; margin-bottom: 1em; }
.recht li { margin-bottom: 0.35rem; }
.recht a { color: var(--navy); }
.recht .bildnachweise { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--linie); font-size: 0.95rem; color: var(--text-leise); }
.recht .bildnachweise h2 { font-size: 1.1rem; margin-top: 0; color: var(--text-leise); }

/* Erstinformation in Karten */
.erstinfo-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; list-style: none; }
.karte { position: relative; padding: 1.6rem 1.6rem 1.5rem; background: var(--weiss); border: 1px solid var(--linie); }
.karte--breit { grid-column: 1 / -1; }
.karte-nr { display: block; font-size: 1.6rem; font-weight: 300; line-height: 1; color: var(--navy); opacity: 0.55; margin-bottom: 0.6rem; }
.karte h2 { font-family: var(--sans); font-size: 1.2rem; font-weight: 500; line-height: 1.3; letter-spacing: 0; margin: 0 0 0.6rem; }
.karte p, .karte li { font-size: 1.02rem; color: var(--text-leise); }
.karte ul { padding-left: 1.1rem; margin-bottom: 0.8em; }
.karte dl { margin: 0 0 0.8em; display: grid; gap: 0.35rem; }
.karte dt { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-leise); }
.karte dd { margin: 0 0 0.4rem; font-size: 1.25rem; font-weight: 500; color: var(--navy); }
.drucken { margin-top: 2rem; }

/* Erstinformation als Fenster über der Seite */
.fenster {
  width: min(58rem, 100% - 2rem);
  max-height: min(88vh, 100% - 2rem);
  padding: 0;
  border: 0;
  background: var(--papier);
  color: var(--text);
  box-shadow: 0 40px 90px -30px rgba(4, 38, 61, 0.6);
  overflow: auto;
  overscroll-behavior: contain;
}
.fenster::backdrop { background: rgba(4, 38, 61, 0.6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.fenster[open] { animation: aufsteigen 0.4s var(--weich); }
.fenster-kopf {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.5rem;
  background: var(--papier);
  border-bottom: 1px solid var(--linie);
}
.fenster-kopf h2 { font-size: 1.7rem; margin: 0; }
.fenster-schliessen {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.9rem;
  font: 500 1rem var(--sans);
  color: var(--navy);
  background: transparent;
  border: 1px solid var(--linie);
  border-radius: 2px;
  cursor: pointer;
}
.fenster-schliessen:hover { border-color: var(--navy); }
.fenster-inhalt { padding: 1.5rem; }
.fenster-inhalt .unterzeile { margin-bottom: 1.25rem; color: var(--text-leise); }
html.fenster-offen { overflow: hidden; }

/* Fehlerseite */
.fehlerseite { padding-block: clamp(4rem, 10vw, 8rem); }
.fehlerseite .punkte { margin-bottom: 2rem; }

/* ---------- Wissen: Übersicht und Beiträge ---------- */
/* Sprungliste im Kopf der Übersicht */
.themen-sprung { align-self: end; }
.themen-sprung ul { list-style: none; border-top: 1px solid var(--linie-hell); }
.themen-sprung a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--linie-hell);
  font-size: 1.25rem;
  color: var(--weiss);
  text-decoration: none;
  transition: color 0.25s, padding-left 0.4s var(--weich);
}
.themen-sprung a:hover { color: var(--sand); padding-left: 0.5rem; }
.themen-anzahl { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hell-leise); }

/* Beiträge nach Bereichen */
.wissen-gruppe {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
  gap: clamp(1.5rem, 5vw, 5.5rem);
  align-items: start;
  padding-block: clamp(2.5rem, 5vw, 3.75rem);
  border-top: 1px solid var(--linie);
}
.wissen-gruppe:first-child { padding-top: 0; border-top: 0; }
.wissen-gruppe h2 { margin-bottom: 0.3em; }
.wissen-gruppe .bereich-frage { margin-bottom: 1.1rem; }
.wissen-notiz { max-width: 40rem; margin: clamp(1rem, 3vw, 2rem) 0 0; font-size: 0.95rem; color: var(--text-leise); }

/* Liste mit Beiträgen (Übersicht, Bereichsseiten, Weiterlesen) */
.beitrags-liste { list-style: none; border-top: 1px solid var(--linie); }
.beitrag-zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 1.5rem;
  row-gap: 0.35rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--linie);
  color: var(--text);
  text-decoration: none;
  transition: padding-left 0.4s var(--weich);
}
.beitrag-zeile:hover { padding-left: 0.6rem; }
.beitrag-titel,
.beitrag-teaser,
.beitrag-info { grid-column: 1; }
.beitrag-titel { margin: 0; font-size: clamp(1.2rem, 1.6vw, 1.35rem); line-height: 1.3; }
.beitrag-teaser { font-size: 1.05rem; line-height: 1.55; color: var(--text-leise); }
.beitrag-info { margin-top: 0.2rem; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-leise); }
.beitrag-zeile .icon { grid-column: 2; grid-row: 1 / span 3; align-self: center; color: var(--navy); transition: transform 0.3s var(--weich); }
.beitrag-zeile:hover .icon { transform: translateX(3px); }

/* Beitrag: Kopfbereich */
.beitrag-kopf-innen { align-items: end; }
.beitrag-kopf h1 { font-size: clamp(2.2rem, 4.3vw, 3.5rem); line-height: 1.08; margin-bottom: 0.5em; }
.pfad ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: -0.7rem 0 0.4rem;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.pfad li + li::before { content: "/"; margin-inline: 0.75rem; color: var(--hell-leise); }
.pfad a { display: inline-block; padding-block: 0.7rem; color: var(--sand); text-decoration: none; }
.pfad a:hover { text-decoration: underline; }
.beitrag-meta { margin: 0; font-size: 0.98rem; color: var(--hell-leise); }
.beitrag-meta a { color: var(--weiss); text-decoration: none; border-bottom: 1px solid var(--linie-hell); }
.beitrag-meta a:hover { border-bottom-color: var(--sand); }

/* Das Wichtigste vorab */
.kurz-gesagt {
  padding: 1.6rem 1.75rem 1.75rem;
  background: rgba(4, 38, 61, 0.42);
  border-left: 2px solid var(--sand);
  animation: aufsteigen 1s 0.25s var(--weich) both;
}
.kurz-gesagt .eyebrow { margin-bottom: 1rem; }
.kurz-gesagt .punkte { margin-top: 0; gap: 0.8rem; font-size: 1.05rem; line-height: 1.5; color: var(--hell); }

/* Beitrag: Text mit Inhaltsverzeichnis daneben */
.abschnitt--beitrag { padding-block: clamp(3.5rem, 7vw, 5.5rem) clamp(4rem, 8vw, 6rem); }
.beitrag-raster {
  display: grid;
  grid-template-columns: minmax(0, 44rem) minmax(0, 15rem);
  justify-content: space-between;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}
.beitrag-text { font-size: 1.15rem; line-height: 1.7; }
.beitrag-text h2 {
  font-family: var(--sans);
  font-size: clamp(1.45rem, 2.2vw, 1.75rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0;
  margin: 3rem 0 0.8rem;
}
.beitrag-text h2:first-child { margin-top: 0; }
.beitrag-text h3 { margin: 2rem 0 0.5rem; }
.beitrag-text p { margin: 0 0 1.1em; }
.beitrag-text strong { font-weight: 600; }
.beitrag-text a:not(.mehr) { color: var(--navy); }
.beitrag-text .punkte,
.beitrag-text .nummern { margin: 1.25rem 0 1.6rem; }
.beitrag-text .punkte { gap: 0.75rem; }
.beitrag-text .hinweis { margin: 2rem 0; font-size: 1.05rem; line-height: 1.6; color: var(--text); }
.beitrag-text .hinweis strong { display: block; margin-bottom: 0.2rem; font-weight: 500; color: var(--navy); }
.beitrag-text .vergleich { margin: 1.75rem 0 1rem; font-size: 1rem; line-height: 1.5; }
.beitrag-text .vergleich caption {
  padding-bottom: 0.6rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-leise);
}
.tabellen-notiz { font-size: 0.95rem; line-height: 1.55; color: var(--text-leise); }

/* Zwei Listen nebeneinander, z. B. passt / passt nicht */
.gegenueber { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.75rem 0 2rem; }
.gegenueber > div { padding: 1.4rem 1.5rem; background: var(--weiss); border: 1px solid var(--linie); }
.gegenueber h3 { margin: 0 0 0.6rem; font-size: 1.2rem; }
.gegenueber .punkte { margin: 0; gap: 0.6rem; font-size: 1.02rem; line-height: 1.5; }

/* Inhaltsverzeichnis am Rand (nur auf großen Bildschirmen) */
.beitrag-inhalt { position: sticky; top: 7.5rem; padding-left: 1.5rem; border-left: 1px solid var(--linie); }
.beitrag-inhalt .eyebrow { margin-bottom: 0.75rem; }
.beitrag-inhalt ol { list-style: none; margin-bottom: 1.75rem; }
.beitrag-inhalt ol a { display: block; padding-block: 0.45rem; font-size: 1rem; line-height: 1.35; color: var(--text-leise); text-decoration: none; transition: color 0.2s; }
.beitrag-inhalt ol a:hover { color: var(--navy); }
.beitrag-inhalt .mehr { font-size: 0.98rem; }

/* Autor und Hinweis am Ende eines Beitrags */
.beitrag-fuss { margin-top: clamp(3rem, 6vw, 4rem); padding-top: 2rem; border-top: 1px solid var(--linie); }
.autor { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.autor img { width: 6.5rem; height: 6.5rem; object-fit: cover; }
.autor .autor-name { margin-bottom: 0.3rem; font-size: 1.25rem; font-weight: 500; line-height: 1.3; color: var(--navy); }
.autor p { font-size: 1.02rem; line-height: 1.6; color: var(--text-leise); }
.beitrag-fuss .rechtshinweis { margin: 2rem 0 0; font-size: 0.92rem; line-height: 1.55; color: var(--text-leise); }

/* ---------- Fußbereich ---------- */
.fuss { background: var(--nacht); color: var(--hell-leise); font-size: 1rem; }
.fuss-raster {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
  padding-block: clamp(3.5rem, 6vw, 4.5rem);
}
.fuss-marke img { height: 4rem; width: auto; margin-bottom: 1.25rem; }
.fuss-titel { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sand); margin-bottom: 0.9rem; }
.fuss ul { list-style: none; display: grid; gap: 0.45rem; }
.fuss a { color: var(--hell); text-decoration: none; }
.fuss a:hover { color: var(--weiss); text-decoration: underline; }
.fuss-unten {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-block: 1.4rem;
  border-top: 1px solid var(--linie-hell);
  font-size: 0.95rem;
}
.fuss-unten ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; }

/* ---------- Tablet ---------- */
@media (max-width: 1040px) {
  .menue-knopf { display: inline-flex; }
  .navi { position: static; }
  .js .navi-liste {
    position: absolute;
    left: 0; right: 0; top: 100%;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--rand) 1.5rem;
    background: var(--papier);
    border-bottom: 1px solid var(--linie);
    box-shadow: 0 24px 40px -28px rgba(4, 38, 61, 0.5);
  }
  .js .navi-liste.ist-offen { display: flex; animation: aufsteigen 0.35s var(--weich); }
  .js .navi-liste li { border-bottom: 1px solid var(--linie); }
  .js .navi-liste li:last-child { border-bottom: 0; padding-top: 1.25rem; }
  .js .navi-liste a:not(.btn) { display: block; padding: 1rem 0; font-size: 1.15rem; }
  .js .navi-liste a:not(.btn)::after { display: none; }
  .js .navi-liste .btn { width: 100%; min-height: 3.25rem; }
  .no-js .menue-knopf { display: none; }
  .no-js .kopf-innen { flex-wrap: wrap; padding-block: 0.75rem; }
  .no-js .navi-liste { flex-wrap: wrap; }

  .fuss-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fuss-marke { grid-column: 1 / -1; }
  .rollen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grundsaetze { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; }
  .bereich-absichern { grid-template-columns: 1fr; }

  /* Beiträge: Inhaltsverzeichnis entfällt, Text bleibt gut lesbar breit */
  .beitrag-raster { grid-template-columns: minmax(0, 44rem); }
  .beitrag-inhalt { display: none; }
}

/* ---------- Handy: eigene Anordnung ---------- */
@media (max-width: 860px) {
  body { font-size: 1.08rem; }
  .kopf-innen { min-height: 4.5rem; }
  .marke img { height: 3.1rem; }

  /* Kopfbereich: erst Text, dann ein flacheres Foto */
  .buehne-innen,
  .seitenkopf-innen { grid-template-columns: 1fr; gap: 2.5rem; }
  .rahmenbild::before { inset: 0.7rem -0.7rem -0.7rem 0.7rem; }
  .rahmenbild img { aspect-ratio: 4 / 3; object-position: 50% 22%; }
  .seitenkopf-innen .rahmenbild { max-width: none; justify-self: stretch; margin-right: 0.7rem; }
  .buehne .rahmenbild { margin-right: 0.7rem; }

  /* Bildbänder: Text oben, Bild füllt den Rest */
  .bildband { min-height: 0; align-items: start; }
  .bildband-text { padding-block: 4rem 9rem; }
  .haltung::after { background: linear-gradient(180deg, rgba(244, 242, 237, 0.7) 0%, rgba(244, 242, 237, 0.2) 60%, rgba(244, 242, 237, 0) 100%); }
  .haltung .bildband-foto { object-position: 50% 60%; }
  .bildband--dunkel::after { background: linear-gradient(180deg, rgba(4, 38, 61, 0.76) 0%, rgba(4, 38, 61, 0.45) 58%, rgba(4, 38, 61, 0.05) 100%); }
  .abschluss-bild .bildband-text { padding-bottom: 11rem; }

  .lagen,
  .vorstellung,
  .zweispaltig,
  .weg,
  .kontakt-raster,
  .ruhestand { grid-template-columns: 1fr; }
  .zweispaltig .kopf { position: static; }
  .lagen-liste a { padding: 1.15rem 0; }

  /* Schritte senkrecht, Linie links */
  .schritte { grid-template-columns: 1fr; gap: 2.25rem; }
  .schritte::before,
  .schritte::after { left: 1.25rem; right: auto; top: 1.25rem; bottom: 1.25rem; width: 1px; height: auto; }
  .schritte::after { transform-origin: top; }
  .js .schritte::after { transform: scaleY(0); }
  .js .schritte.ist-sichtbar::after { transform: scaleY(1); }
  .schritt { display: grid; grid-template-columns: auto 1fr; column-gap: 1.25rem; }
  .schritt .linien-icon { grid-row: span 3; }
  .schritt-nr { margin-top: 0.35rem; }

  .zielgruppen,
  .bereich-paar { grid-template-columns: 1fr; gap: 0; }
  .zielgruppe { padding-block: 1.25rem; }
  .zielgruppen li + li .zielgruppe { border-top: 1px solid var(--linie); }
  .bereich-kurz,
  .bereich-kurz + .bereich-kurz { padding: 1.75rem 0; border-left: 0; }

  .ruhestand-bild { order: -1; }
  .ruhestand-bild img { aspect-ratio: 16 / 10; }

  .vorstellung .bild-zoom { max-width: 22rem; }
  .vorstellung .bild-zoom img { aspect-ratio: 1 / 1; object-position: 50% 20%; }

  .leuchtfeuer { display: none; }

  .leistungen,
  .schaden,
  .qualis,
  .erstinfo-raster { grid-template-columns: 1fr; }
  .leistungen { gap: 2rem; }

  /* Direkt nach dem breiten Foto wäre ein zweites Porträt zu viel: auf dem Handy entfällt es */
  .weg .bild-zoom { display: none; }

  /* Vergleichstabelle wird zu Karten */
  .vergleich thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .vergleich, .vergleich tbody, .vergleich tr, .vergleich th, .vergleich td { display: block; width: 100%; }
  .vergleich caption { display: block; }
  .vergleich tr { margin-bottom: 1rem; border: 1px solid var(--linie); background: var(--weiss); }
  .vergleich tbody th { width: 100%; padding: 0.9rem 1rem 0.5rem; border-bottom: 0; font-size: 1.15rem; font-weight: 500; color: var(--navy); }
  .vergleich td { padding: 0.6rem 1rem; border-bottom: 0; }
  .vergleich td::before { content: attr(data-label); display: block; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-leise); }
  .vergleich td.makler { padding-bottom: 1rem; }

  .ueber-kopf { padding-bottom: clamp(5rem, 18vw, 7rem); }
  .breitbild { margin-top: calc(-1 * clamp(3.5rem, 14vw, 5rem)); }
  .breitbild img { aspect-ratio: 4 / 3; }

  /* Wissen und Beiträge */
  .wissen-gruppe { grid-template-columns: 1fr; gap: 1.25rem; }
  .gegenueber { grid-template-columns: 1fr; }
  .beitrag-text { font-size: 1.08rem; }
  .beitrag-kopf h1 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
  .kurz-gesagt { padding: 1.3rem 1.25rem 1.4rem; }
  .themen-sprung a { font-size: 1.15rem; }
}

@media (max-width: 560px) {
  .handlung .btn,
  .bildband .btn,
  .abschluss .btn,
  .formular-fuss .btn { width: 100%; }
  .formular-raster { grid-template-columns: 1fr; }
  .rollen,
  .grundsaetze { grid-template-columns: 1fr; }
  .fuss-raster { grid-template-columns: 1fr; gap: 2rem; }
  .fuss-unten { flex-direction: column; }
  .notruf a { font-size: 1.4rem; }
  .fenster-inhalt { padding: 1.1rem; }
  .fenster-kopf { padding: 0.9rem 1.1rem; }
  .karte { padding: 1.3rem; }
  .mitglied { flex-direction: column; align-items: flex-start; }
  .autor { gap: 1rem; }
  .autor img { width: 4.5rem; height: 4.5rem; }
  .beitrag-zeile { column-gap: 1rem; }
}

/* ---------- Weniger Bewegung, wenn gewünscht ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .einblenden { opacity: 1; transform: none; }
  .js .schritte::after { transform: none; }
}

/* ---------- Drucken (z. B. Erstinformation) ---------- */
@media print {
  .seitenkopf-leiste, .fuss, .drucken, .sprungmarke, .abschluss, .beitrag-inhalt { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .dunkel { background: #fff; color: var(--text); }
  .dunkel h1 { color: var(--navy); }
  .karte { break-inside: avoid; }
}