/* =========================================================================
   Die Scheidungsstrateginnen: Stylesheet
   Aufbau: 1 Schriften, 2 Variablen, 3 Grundlagen, 4 Bausteine,
           5 Kopf und Navigation, 6 Abschnitte, 7 Formular, 8 Fuss,
           9 Kleine Bildschirme (vorlaeufig)
   Alle Farben, Schriften und Abstaende stehen in Abschnitt 2 und
   werden nur ueber Variablen benutzt: eine Aenderung dort wirkt ueberall.
   ========================================================================= */

/* 1 Schriften (lokal eingebunden, SIL Open Font License, siehe fonts/) */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/newsreader-latin-opsz-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/newsreader-latin-opsz-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Libre Franklin";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/libre-franklin-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Libre Franklin";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/libre-franklin-latin-wght-italic.woff2") format("woff2");
}

/* 2 Variablen */
:root {
  --schrift-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --schrift-sans: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;

  --farbe-papier: #faf7f2;          /* Seitenhintergrund, warmes Weiss */
  --farbe-papier-2: #f2ebe2;        /* zweiter Hintergrund fuer Wechsel */
  --farbe-text: #211913;            /* Fliesstext, fast schwarz */
  --farbe-text-2: #5b4b40;          /* Nebentext */
  --farbe-akzent: #7a3b50;          /* Bordeaux, sparsam einsetzen */
  --farbe-akzent-dunkel: #5f2c3d;
  --farbe-akzent-hell: #d9aabb;     /* Akzent auf dunklem Grund (Kontrast) */
  --farbe-dunkel: #3b2a1f;          /* Braun: Ziffern "Was Sie sich ersparen", Senden-Knopf */
  --farbe-dunkel-tief: #2a1e16;     /* Braun, dunkler: Senden-Knopf beim Darueberfahren */
  --farbe-hell: #f5f0e8;            /* Text auf dunklem Grund */
  --farbe-hell-2: rgba(245, 240, 232, 0.78);
  --farbe-linie: rgba(33, 25, 19, 0.2);
  --farbe-linie-hell: rgba(245, 240, 232, 0.28);
  --farbe-erfolg: #c8e6c9;          /* Hellgruen: Erfolgsmeldung im Kontaktformular (6 : 1 auf Bordeaux) */

  --breite: 1140px;                 /* maximale Inhaltsbreite */
  --breite-schmal: 720px;           /* Lesebreite fuer Fliesstext */
  --rand: 2.5rem;                   /* seitlicher Abstand */
  --abschnitt: 6rem;                /* vertikaler Abstand der Abschnitte */
  --kopf-hoehe: 4rem;
  --namensleiste-h: 3.75rem;         /* Leiste mit den Namen unter dem Einstieg */

  /* Titelfoto im Einstieg (Erklaerung in Abschnitt 6, „Einstieg“) */
  --titel-format: 0.9;              /* titel.jpg: 900 x 1000 px */
  --titel-zoom: 1.1;                /* hoechstens 10 % hineinzoomen */
  --titel-h-frei: calc(100vh - var(--kopf-hoehe) - 1px - var(--namensleiste-h));
  --titel-bild-b: min(50vw, max(20rem, calc(var(--titel-h-frei) * var(--titel-format) * var(--titel-zoom))));
  --titel-bild-h: clamp(calc(var(--titel-bild-b) / var(--titel-format) / var(--titel-zoom)), var(--titel-h-frei), calc(var(--titel-bild-b) / var(--titel-format)));
}

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

html {
  scroll-padding-top: calc(var(--kopf-hoehe) + 1rem); /* Sprungziele nicht unter dem Kopf verstecken */
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--farbe-papier);
  color: var(--farbe-text);
  font-family: var(--schrift-serif);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-optical-sizing: auto;
}

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

h1, h2, h3 {
  font-family: var(--schrift-serif);
  font-weight: 400;
  line-height: 1.08;
  margin: 0 0 1.25rem;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.75rem, 5vw, 4.25rem); }
h2 { font-size: clamp(2rem, 3.4vw, 2.85rem); }
h3 { font-size: 1.55rem; }
h1 em, h2 em { font-style: italic; color: var(--farbe-akzent); }

p { margin: 0 0 1rem; }
ul, ol { margin: 0; padding: 0; }

a { color: inherit; }

/* Sichtbarer Tastaturfokus fuer alles, was bedienbar ist */
:focus-visible {
  outline: 2px solid var(--farbe-akzent);
  outline-offset: 3px;
}

/* Doppelnamen nicht am Bindestrich umbrechen */
.ohne-umbruch { white-space: nowrap; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute; left: 1rem; top: -100%;
  z-index: 200;
  background: var(--farbe-akzent); color: var(--farbe-hell);
  padding: 0.6rem 1rem; text-decoration: none;
  font-family: var(--schrift-sans); font-size: 0.85rem;
}
.skip-link:focus { top: 1rem; }

/* 4 Bausteine */
.wrap {
  max-width: var(--breite);
  margin: 0 auto;
  padding-left: var(--rand);
  padding-right: var(--rand);
}
.wrap-schmal { max-width: calc(var(--breite-schmal) + 2 * var(--rand)); }

.fliesstext p { margin-bottom: 1.15rem; }
.fliesstext p:last-child { margin-bottom: 0; }

.etikett {
  font-family: var(--schrift-sans);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--farbe-akzent);
  margin: 0 0 1.1rem;
}
.etikett-linie { display: flex; align-items: center; gap: 0.9rem; }
.etikett-linie::after {
  content: ""; width: 2.5rem; height: 1px; background: currentColor;
}

.abschnitt-kopf { text-align: center; margin-bottom: 3.5rem; }
.abschnitt-kopf h2 { margin-bottom: 0; }

.hervorhebung {
  font-family: var(--schrift-serif);
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.4;
  color: var(--farbe-akzent);
  border-left: 2px solid var(--farbe-akzent);
  padding-left: 1.4rem;
  margin: 2.25rem 0 0;
}
.hervorhebung-klein { font-size: 1.25rem; margin-top: 1.75rem; }

.knopfzeile { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin: 2.5rem 0 0; }
.knopf {
  display: inline-block;
  font-family: var(--schrift-sans);
  font-size: 0.8rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none;
  padding: 0.95rem 2rem;
  border: 1px solid var(--farbe-akzent);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.knopf-primaer { background: var(--farbe-akzent); color: var(--farbe-hell); }
.knopf-primaer:hover { background: var(--farbe-akzent-dunkel); border-color: var(--farbe-akzent-dunkel); }
.knopf-sekundaer { background: transparent; color: var(--farbe-text); }
.knopf-sekundaer:hover { background: var(--farbe-akzent); color: var(--farbe-hell); }

.textlink {
  font-family: var(--schrift-sans);
  font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--farbe-akzent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.textlink:hover { color: var(--farbe-text); }

/* 5 Kopf und Navigation */
.kopf {
  position: sticky; top: 0; z-index: 100;
  background: var(--farbe-papier);
  border-bottom: 1px solid var(--farbe-linie);
}
.kopf-inner {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 var(--rand);
  min-height: var(--kopf-hoehe);
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}
.marke {
  font-family: var(--schrift-serif);
  font-size: 1.25rem; font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none; color: var(--farbe-text);
  white-space: nowrap;
}
.marke span { color: var(--farbe-akzent); }

.navigation ul { list-style: none; display: flex; gap: 2.25rem; }
.navigation a {
  font-family: var(--schrift-sans);
  font-size: 0.8rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; color: var(--farbe-text);
  padding: 0.4rem 0;
  border-bottom: 1px solid transparent;
}
.navigation a:hover { border-bottom-color: var(--farbe-akzent); color: var(--farbe-akzent); }

.menue-knopf {
  display: none;
  background: none; border: 1px solid var(--farbe-linie);
  width: 2.75rem; height: 2.75rem; padding: 0;
  cursor: pointer; position: relative;
}
.menue-knopf-linie,
.menue-knopf-linie::before,
.menue-knopf-linie::after {
  content: ""; display: block;
  width: 1.25rem; height: 2px; background: var(--farbe-text);
  position: absolute; left: 50%; transform: translateX(-50%);
  transition: transform 0.2s, opacity 0.2s;
}
.menue-knopf-linie { top: 50%; margin-top: -1px; }
.menue-knopf-linie::before { top: -6px; }
.menue-knopf-linie::after { top: 6px; }
.menue-knopf[aria-expanded="true"] .menue-knopf-linie { background: transparent; }
.menue-knopf[aria-expanded="true"] .menue-knopf-linie::before { transform: translateX(-50%) translateY(6px) rotate(45deg); }
.menue-knopf[aria-expanded="true"] .menue-knopf-linie::after { transform: translateX(-50%) translateY(-6px) rotate(-45deg); }

/* 6 Abschnitte */
section { padding: var(--abschnitt) 0; }

/* Einstieg (erster Bildschirm), nach der PowerPoint der Auftraggeberin und
   den Rueckmeldungen von Lars: links das Foto randlos, von der Kopfzeile bis
   zur Namensleiste; rechts Name, Ueberschrift (eine Zeile), Kernsatz, Knoepfe.
   - Das Foto zeigt den Schnitt der Bilddatei, hoechstens um --titel-zoom
     hineingezoomt (oben und unten minimal beschnitten, seitlich nie). Es ist
     hoechstens halb so breit wie das Fenster und hoechstens so hoch, dass es
     mit Kopfzeile und Namensleiste in den ersten Bildschirm passt. Die Hoehe
     des Einstiegs ergibt sich aus der Fotohoehe.
   - --titel-format ist das Seitenverhaeltnis der Bilddatei (Breite durch
     Hoehe). Wird das Foto ersetzt, muss dieser Wert mit angepasst werden.
   - Die Schriftgroesse von Name und Ueberschrift richtet sich nach der
     Fensterbreite, damit beide in eine Zeile
     passen; der Kernsatz waechst im selben Verhaeltnis mit.
   Das Foto hat 900 x 1000 px (WhatsApp-Qualitaet) und wird auf grossen
   Bildschirmen hochgerechnet; hoeher aufgeloeste Fassungen folgen
   (offener Punkt 31). */
.titel {
  --titel-schrift: clamp(1.75rem, calc(3.4vw - 0.2rem), 4.5rem);
  padding: 0;
}
.titel-raster {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);   /* Foto so breit wie noetig, Rest Text */
}
/* Im HTML steht der Text vor dem Foto (fuer schmale Bildschirme); auf dem
   Desktop kommt das Foto per Raster in die linke Spalte */
.titel-bild { grid-column: 1; grid-row: 1; }
.titel-text { grid-column: 2; grid-row: 1; }
.titel-bild img {
  width: var(--titel-bild-b);
  height: var(--titel-bild-h);
  object-fit: cover; object-position: 50% 40%;
}
.titel-text {
  align-self: center;
  padding: 3rem var(--rand) 3rem 5vw;
  container-type: inline-size;      /* Bezugsgroesse fuer die Namensgroesse (cqi) */
}
.titel-name {
  font-family: var(--schrift-serif);
  font-weight: 500;
  line-height: 1.1;
  white-space: nowrap;
  margin: 0 0 0.3em;
}
/* Der Name ist etwas groesser als die Ueberschrift, aber hoechstens so gross,
   dass er in einer Zeile in die Textspalte passt. Der Name ist gut 12,5-mal so
   breit wie seine Schriftgroesse; 7,7 % der Spaltenbreite (7.7cqi) passen also
   sicher. Browser ohne Container-Abfragen nehmen die vorsichtigere erste Regel. */
.titel-name { font-size: calc(var(--titel-schrift) * 1.05); }
@supports (container-type: inline-size) {
  .titel-name { font-size: min(calc(var(--titel-schrift) * 1.15), 7.7cqi); }
}
.titel-name span { color: var(--farbe-akzent); }
.titel h1 { font-size: var(--titel-schrift); white-space: nowrap; margin-bottom: 0.7em; }
/* Kernsatz unter der Ueberschrift (Text der Auftraggeberin) */
.titel-kernsatz {
  font-family: var(--schrift-serif);
  font-weight: 300;
  font-size: max(1.2rem, calc(var(--titel-schrift) * 0.58));
  line-height: 1.45;
  max-width: 25em;                  /* Zeilen nicht breiter als der Name */
  text-wrap: pretty;                /* kein einzelnes Wort allein in der letzten Zeile */
  margin: 0 0 2.5rem;
}
.titel .knopfzeile { justify-content: flex-start; margin: 0; }
.titel .knopf { padding-left: 1.6rem; padding-right: 1.6rem; }

/* Namen der beiden Strateginnen: Leiste direkt unter dem Einstieg. Der
   Trennstrich steht in der Mitte der Seite, links davon Karoline, rechts
   Barbara (Wunsch von Lars 2026-11-03; vorher auf dem Desktop unter der
   Stelle, an der sich die beiden im Foto beruehren). Auf dem Handy steht
   Karoline linksbuendig, Barbara rechtsbuendig (Abschnitt 9). */
.titel-personen {
  --titel-trenner-x: 50%;
  font-family: var(--schrift-sans);
  font-size: 0.82rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--farbe-text-2);
  position: relative;
  display: grid; grid-template-columns: var(--titel-trenner-x) 1fr; align-items: center;
  margin: 0;
  min-height: var(--namensleiste-h);
  padding: 0.75rem 0;
  background: var(--farbe-papier-2);
  border-top: 1px solid var(--farbe-linie);
  border-bottom: 1px solid var(--farbe-linie);
}
.titel-personen > span:first-child { justify-self: end; text-align: right; padding-right: 1.1rem; }
.titel-personen > span:last-child { padding-left: 1.1rem; }
.titel-trenner {
  color: var(--farbe-akzent);
  position: absolute; left: var(--titel-trenner-x); top: 50%;
  transform: translate(-50%, -50%);
  letter-spacing: 0;
}

/* Einleitung */
.einleitung { text-align: center; padding-top: 2.5rem; }
.schlagworte {
  font-family: var(--schrift-sans);
  font-size: 0.76rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--farbe-akzent);
  display: flex; justify-content: center; flex-wrap: wrap; gap: 0.75rem 0;
  margin: 0 0 2.25rem;
}
.schlagworte span { padding: 0 0.9rem; white-space: nowrap; }
.schlagworte span + span { border-left: 1px solid var(--farbe-linie); }
.einleitung-text {
  text-align: left;
  font-size: 1.125rem;
  border-top: 1px solid var(--farbe-linie);
  border-bottom: 1px solid var(--farbe-linie);
  padding: 2rem 0;
}

/* Leitsatz: eine Leiste mit einem einzigen Satz, mittig (Wunsch der
   Auftraggeberin 2026-10-29; vorher zwei Leitsaetze nebeneinander) */
.leitsaetze { padding: 0; background: var(--farbe-papier-2); }
/* Groesser und kraeftiger als die frueheren Leitsaetze, damit der Satz
   hervorsticht (Wunsch von Lars 2026-11-03); auf dem Desktop in einer Zeile. */
.leitsatz {
  margin: 0 auto;
  max-width: 64rem;
  padding: 4rem 0;
  text-align: center;
  font-family: var(--schrift-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.6rem, 2.9vw, 2.6rem); line-height: 1.3;
  text-wrap: balance;               /* auf dem Handy gleich lange Zeilen */
}

/* Ansatz */
.ansatz { border-bottom: 1px solid var(--farbe-linie); }

/* Ueber uns */
.team-raster {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3rem;
  max-width: 1000px; margin: 0 auto;
}
.person {
  border: 1px solid var(--farbe-linie); background: var(--farbe-papier);
  position: relative;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.person:hover, .person:focus-within {
  border-color: var(--farbe-akzent);
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(33, 25, 19, 0.10);
}
/* Der Link dehnt sich ueber die ganze Karte aus: ueberall klickbar */
.person-link { display: inline-block; margin-top: 1.5rem; }
.person-link::after { content: ""; position: absolute; inset: 0; }
.person:has(.person-link) { cursor: pointer; }
.person img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; }
.person-text { padding: 2rem 2rem 2.25rem; }
.person h3 { margin-bottom: 0.35rem; }
.person-rolle {
  font-family: var(--schrift-sans);
  font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--farbe-akzent);
  margin-bottom: 1.25rem;
}
.person-text p:not(.person-rolle) { font-size: 1rem; color: var(--farbe-text-2); }
.schlagwortliste { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; }
.schlagwortliste li {
  font-family: var(--schrift-sans);
  font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--farbe-akzent);
  background: var(--farbe-papier-2);
  padding: 0.35rem 0.75rem;
}

/* Investition */
.investition { background: var(--farbe-papier-2); border-top: 1px solid var(--farbe-linie); }
.investition-raster {
  display: grid; grid-template-columns: 1fr 1.35fr; gap: 4rem; align-items: start;
}
.investition h2 { margin-bottom: 0; }
/* Foto unter der Ueberschrift (Word-Punkt 12, 2026-09-23): volle Spaltenbreite, ganzes Foto ohne Beschnitt */
.investition-bild { display: block; margin-top: 2rem; }
.investition-bild img { display: block; width: 100%; height: auto; }

/* Was Sie sich ersparen: Hintergrund Bordeaux, Ziffern im Braun der dunklen
   Abschnitte (Wunsch der Auftraggeberin, Farben getauscht). */
.ersparen { background: var(--farbe-akzent); color: var(--farbe-hell); }
.ersparen h2 { font-style: italic; text-align: center; margin-bottom: 1.25rem; }
.ersparen-einleitung {
  max-width: var(--breite-schmal); margin: 0 auto 3.5rem;
  text-align: center; color: var(--farbe-hell-2);
  font-size: 1.3rem; line-height: 1.5;   /* genau so gross wie die Aufzaehlung (Wunsch der Auftraggeberin) */
}
/* Redaktionelle Liste: Haarlinien und Ziffern statt Kaesten (Variante A,
   weitere Varianten in docs/varianten/ersparen-varianten.html) */
.ersparen-liste {
  list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem 3rem;
  max-width: 1000px; margin: 0 auto;
}
.ersparen-liste li {
  border-top: 1px solid var(--farbe-linie-hell);
  padding-top: 1.25rem;
  display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: baseline;
  font-family: var(--schrift-serif);
  font-size: 1.3rem; line-height: 1.35;
}
/* Braun auf Bordeaux hat nur 1,7 : 1 Kontrast (Richtwert 4,5 : 1). Bewusst so
   entschieden (Lars, 2026-09-23); die Ziffern sind deshalb groesser und fett.
   Screenreader lesen sie nicht vor (aria-hidden), die Reihenfolge ergibt sich
   dort aus der nummerierten Liste (ol). */
.ersparen-nummer {
  font-family: var(--schrift-serif);
  font-style: italic;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--farbe-dunkel);
}

/* Bildband */
.bildband { margin: 0; position: relative; }
/* Volle Breite, rund 15 % des Fotos werden weggeschnitten (Wunsch von Lars
   beim ersten Foto). 1500/853 ist das Seitenverhaeltnis nach Beschnitt.
   Seit dem neuen Foto (2026-11-03) wird oben etwas mehr als unten
   weggeschnitten (55 %), weil die Koepfe hoeher im Bild sind; bei
   "unten buendig" wuerde Karolines Kopf oben angeschnitten. */
.bildband img {
  width: 100%;
  aspect-ratio: 1500 / 853;
  object-fit: cover; object-position: center 55%;
}
.bildband figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.25rem var(--rand);
  background: linear-gradient(to top, rgba(33, 25, 19, 0.75), transparent);
  color: var(--farbe-hell);
  font-family: var(--schrift-sans);
  font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
}

/* Angebot */
.angebot { border-top: 1px solid var(--farbe-linie); }
.schritte {
  list-style: none;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem;
  position: relative;
  max-width: 1100px; margin: 0 auto;
}
/* Verbindungslinie auf Hoehe der Kreismitten */
.schritte::before {
  content: "";
  position: absolute; top: 1.7rem; left: 12.5%; right: 12.5%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--farbe-akzent) 15%, var(--farbe-akzent) 85%, transparent);
}
.schritt { text-align: center; padding: 0 1rem; }
.schritt-marker {
  display: flex; align-items: center; justify-content: center;
  width: 3.4rem; height: 3.4rem; margin: 0 auto 1.5rem;
  border-radius: 50%;
  background: var(--farbe-papier);
  border: 1.5px solid var(--farbe-akzent);
  box-shadow: 0 0 0 6px var(--farbe-papier);
  position: relative; z-index: 1;
  transition: background-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.schritt-nummer {
  font-family: var(--schrift-serif);
  font-size: 1.05rem; font-style: italic;
  color: var(--farbe-akzent);
  transition: color 0.25s;
}
.schritt:hover .schritt-marker {
  background: var(--farbe-akzent);
  transform: scale(1.1);
  box-shadow: 0 0 0 6px var(--farbe-papier), 0 0 0 7px rgba(122, 59, 80, 0.25);
}
.schritt:hover .schritt-nummer { color: var(--farbe-hell); }
.schritt h3 { font-style: italic; font-size: 1.5rem; margin-bottom: 0.75rem; }
.schritt p { font-size: 1rem; color: var(--farbe-text-2); margin-bottom: 0; }

/* Kontakt: Hintergrund Bordeaux, Senden-Knopf im Braun (Word-Punkt 8, 2026-09-23) */
.kontakt {
  padding: 0;
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--farbe-akzent); color: var(--farbe-hell);
}
.kontakt-bild { position: relative; min-height: 640px; }
.kontakt-bild picture, .kontakt-bild img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.kontakt-bild img { object-fit: cover; object-position: center 45%; }
.kontakt-formular { padding: 3.25rem 3.5rem; align-self: center; }
.kontakt-formular .etikett { color: var(--farbe-hell-2); }
.kontakt-formular h2 { margin-bottom: 0.75rem; }
.kontakt-formular h2 em { color: var(--farbe-hell); }
.kontakt-einleitung { color: var(--farbe-hell-2); margin-bottom: 2.25rem; }

/* Unterseiten (Impressum, Datenschutz) */
.unterseite { padding-top: 5rem; min-height: 60vh; }
.unterseite h1 { font-size: clamp(2.25rem, 4vw, 3.25rem); margin-bottom: 2rem; }
.platzhalter { color: var(--farbe-akzent); font-style: italic; }

/* Rechtstexte (Datenschutz, spaeter Impressum): lange Texte klar gegliedert */
.rechtstext h2 { font-size: clamp(1.6rem, 2.6vw, 2rem); margin: 3.25rem 0 1rem; }
.rechtstext h3 { font-size: 1.3rem; line-height: 1.25; margin: 2rem 0 0.6rem; }
.rechtstext h4 {
  font-family: var(--schrift-serif); font-size: 1.1rem; font-weight: 400; font-style: italic;
  margin: 1.5rem 0 0.4rem;
}
.rechtstext ul { padding-left: 1.25rem; margin: 0 0 1.15rem; }
.rechtstext li { margin-bottom: 0.4rem; }
.rechtstext a { color: var(--farbe-akzent); overflow-wrap: anywhere; }   /* lange Adressen brechen um */
/* Angaben als Liste: links die Bezeichnung, rechts der Wert; auf dem Handy untereinander */
.rechtstext dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.45rem 1.75rem; margin: 0 0 1.5rem; }
.rechtstext dt {
  font-family: var(--schrift-sans); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--farbe-text-2);
  padding-top: 0.3rem;
}
.rechtstext dd { margin: 0; }
/* Impressum: Angaben eingerueckt unter dem jeweiligen Namen */
.rechtstext .einzug { padding-left: 1.75rem; }
.rechtstext .einzug + h2 { margin-top: 3.75rem; }
.rechtstext .einzug h3 { margin-top: 2.25rem; }
@media (max-width: 560px) {
  .rechtstext dl { grid-template-columns: 1fr; gap: 0; }
  .rechtstext dd { margin-bottom: 0.7rem; }
  .rechtstext .einzug { padding-left: 1rem; }
}

/* 7 Formular */
.formular { display: flex; flex-direction: column; gap: 1rem; }
.formular-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.feld { display: flex; flex-direction: column; gap: 0.4rem; }
.feld label {
  font-family: var(--schrift-sans);
  font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--farbe-hell-2);
}
.feld input, .feld textarea {
  font: inherit; font-size: 1rem;
  color: var(--farbe-hell);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--farbe-linie-hell);
  border-radius: 0;
  padding: 0.75rem 0.9rem;
  width: 100%;
}
.feld textarea { resize: vertical; min-height: 6rem; }
.feld input:focus, .feld textarea:focus {
  outline: 2px solid var(--farbe-hell);
  outline-offset: 2px;
  border-color: var(--farbe-hell);
}
/* Spamschutz-Feld: fuer Menschen unsichtbar, im Dokument aber vorhanden */
.feld-falle { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.feld-einwilligung { flex-direction: row; align-items: flex-start; gap: 0.75rem; }
.feld-einwilligung input { width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; flex-shrink: 0; accent-color: var(--farbe-dunkel); }
.feld-einwilligung label {
  text-transform: none; letter-spacing: 0;
  font-family: var(--schrift-serif); font-size: 0.95rem; line-height: 1.5;
}
.feld-einwilligung a { color: var(--farbe-hell); }

.feld-hinweis {
  font-family: var(--schrift-sans); font-size: 0.8rem; line-height: 1.4;
  color: #f0c4c4;
}
.feld-hinweis:empty { display: none; }
.feld.ist-ungueltig input, .feld.ist-ungueltig textarea { border-color: #e0a3a3; }
/* Senden-Knopf im Braun. Die Knopfflaeche hebt sich nur mit 1,7 : 1 vom Bordeaux ab,
   die Schrift auf dem Knopf hat 12 : 1. */
.formular .knopf-primaer { background: var(--farbe-dunkel); border-color: var(--farbe-dunkel); }
.formular .knopf-primaer:hover { background: var(--farbe-dunkel-tief); border-color: var(--farbe-dunkel-tief); }
.knopf[aria-disabled="true"], .knopf:disabled { opacity: 0.5; cursor: not-allowed; }
.formular .knopf[aria-disabled="true"]:hover, .formular .knopf:disabled:hover { background: var(--farbe-dunkel); border-color: var(--farbe-dunkel); }

.formular-status { font-family: var(--schrift-sans); font-size: 0.9rem; margin: 0; min-height: 1.4em; }
.formular-status:empty { display: none; }
.formular-status.ist-hinweis { color: var(--farbe-hell); border-left: 2px solid var(--farbe-hell-2); padding-left: 0.9rem; }
.formular-status.ist-fehler { color: #f3c9c9; border-left: 2px solid #f3c9c9; padding-left: 0.9rem; }
.formular-status.ist-erfolg { color: var(--farbe-erfolg); border-left: 2px solid var(--farbe-erfolg); padding-left: 0.9rem; }
.formular .knopf { align-self: flex-start; }

/* 8 Fuss */
.fuss { background: var(--farbe-papier-2); border-top: 1px solid var(--farbe-linie); padding: 2.5rem 0; }
.fuss-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem 2rem; }
.marke-fuss { margin: 0; font-size: 1.1rem; }
.fuss nav ul { list-style: none; display: flex; gap: 1.75rem; }
.fuss nav a {
  font-family: var(--schrift-sans);
  font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; color: var(--farbe-text-2);
}
.fuss nav a:hover { color: var(--farbe-akzent); }
.fuss-copy { margin: 0; font-family: var(--schrift-sans); font-size: 0.8rem; color: var(--farbe-text-2); }

/* 9 Kleine Bildschirme: VORLAEUFIG. Nur das Noetigste, damit nichts
   auseinanderfaellt. Die Handy-Ansicht wird spaeter gezielt gestaltet. */
@media (max-width: 900px) {
  :root { --rand: 1.25rem; --abschnitt: 4rem; }

  /* Ohne JavaScript bleibt die Navigation einfach sichtbar (umbrechend).
     Mit JavaScript (html.js) wird sie hinter dem Menue-Knopf aufgeklappt. */
  .kopf-inner { flex-wrap: wrap; gap: 0.5rem 1.5rem; padding-top: 0.75rem; padding-bottom: 0.75rem; }
  .navigation ul { gap: 1.25rem; flex-wrap: wrap; }

  html.js .kopf-inner { flex-wrap: nowrap; }
  html.js .menue-knopf { display: block; }
  html.js .navigation {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--farbe-papier);
    border-bottom: 1px solid var(--farbe-linie);
  }
  html.js .navigation ul { flex-direction: column; gap: 0; padding: 0.5rem 0; }
  html.js .navigation a { display: block; padding: 0.9rem var(--rand); border-bottom: none; }
  html.js .navigation[hidden] { display: none; }

  .team-raster, .investition-raster, .formular-zeile, .kontakt { grid-template-columns: 1fr; }
  .leitsatz { padding: 2.75rem 0; font-size: 1.7rem; }
  .ersparen-liste { grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; }
  .schritte { grid-template-columns: 1fr 1fr; }
  .schritte::before { display: none; }
  /* Einstieg untereinander: erst Name, Ueberschrift, Kernsatz und Knoepfe,
     darunter das Foto randlos ueber die ganze Breite (vollstaendig, ohne Zoom) */
  .titel { --titel-schrift: clamp(1.5rem, 7vw, 2.25rem); }
  .titel-raster { display: block; }
  .titel-text { padding: 2rem var(--rand) 2.25rem; }
  .titel-bild img { width: 100%; height: auto; }
  .titel-name { white-space: normal; }
  @supports (container-type: inline-size) {
    .titel-name { font-size: min(calc(var(--titel-schrift) * 1.15), 8.2cqi); }
  }
  .titel h1 { white-space: normal; margin-bottom: 1.25rem; }
  .titel-kernsatz { margin-bottom: 1.75rem; }
  /* Namen nebeneinander, Trennstrich in der Mitte, auf einer Achse mit den
     Schlagworten darunter (Frage der Auftraggeberin „Ist das beides mittig?“,
     Entscheidung von Lars 2026-11-01). Gilt auch fuer den Ausdruck. */
  .titel-personen { padding: 0.9rem 0; letter-spacing: 0.12em; }
  .titel-personen > span:first-child { padding-left: 0.75rem; padding-right: 0.9rem; }
  .titel-personen > span:last-child { padding-left: 0.9rem; padding-right: 0.75rem; }
  .kontakt-bild { min-height: 60vh; }
  /* Ausschnitt etwas nach links verschoben, damit die linke Person ganz im Bild ist */
  .kontakt-bild img { object-position: 45% 45%; }
  /* Schlagworte untereinander, ohne Trennstriche */
  .schlagworte { flex-direction: column; align-items: center; gap: 0.5rem; }
  .schlagworte span + span { border-left: none; }
  .kontakt-formular { padding: 3rem var(--rand); }
  .fuss-inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
  .ersparen-liste, .schritte { grid-template-columns: 1fr; }
  /* Handy: Namen nebeneinander, Trennstrich in der Mitte, Nachname unter dem
     Vornamen; Karoline linksbuendig am linken Rand, Barbara als Gegenstueck
     rechtsbuendig am rechten Rand (Wunsch von Lars 2026-11-03) */
  .titel-personen > span:first-child { justify-self: start; text-align: left; padding-left: var(--rand); padding-right: 0.9rem; }
  .titel-personen > span:last-child { justify-self: end; text-align: right; padding-left: 0.9rem; padding-right: var(--rand); }
}
/* Sehr schmale Handys (320 px): engere Buchstaben, damit „Bach-Kresbach“
   neben dem Trennstrich Platz hat und nichts seitlich herausragt */
@media (max-width: 340px) {
  .titel-personen { letter-spacing: 0.04em; }
  .titel-personen > span:first-child { padding-right: 0.6rem; }
  .titel-personen > span:last-child { padding-left: 0.6rem; }
}