/* ==========================================================================
   Metatax Bausteine — Premium-Neufassung (Spec 04.07.2026)
   Ruhe, Wertigkeit, Vertrauen: Flächen statt Kästen, Weißraum statt Linien
   ========================================================================== */

/* --- Säulen-Farblogik: body-Klasse setzt die Akzentfarbe der Seite --- */
body { --saeule-akzent: var(--cyan); --saeule-text: var(--blau); }
body.saeule-beratung { --saeule-akzent: var(--gold-akzent); --saeule-text: var(--gold-text); }
body.saeule-vermietung { --saeule-akzent: var(--gruen-akzent); --saeule-text: var(--gruen-text); }

/* --- Grundraster / Abschnitte --- */
.sektion { padding: clamp(3rem, 6.5vw, 5.5rem) var(--rand); }
.sektion--grau { background: var(--grau-10); }
.sektion__innen, .abschluss-cta__innen, .fuss__innen, .kopf__innen { max-width: var(--breite-inhalt); margin: 0 auto; }

h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 600; letter-spacing: -.02em; margin: 0 0 1.25rem; }
h3 { font-size: 1.2rem; font-weight: 600; margin: 0 0 .5rem; }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
/* Ruhige Zeilenlänge für frei stehenden Text direkt im Abschnitt */
.sektion__innen > p { max-width: 44rem; }

/* Abschnitts-Beschriftung (Vorzeile) mit Säulen-Kante */
.vorzeile {
  display: inline-block; font-family: var(--schrift-titel); font-size: .78rem;
  font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--saeule-text); border-left: 3px solid var(--saeule-akzent);
  padding-left: .6rem; margin-bottom: 1.1rem;
}

/* Merksatz (hervorgehobene Kernaussage im Text) */
.merksatz {
  border-left: 3px solid var(--saeule-akzent); background: var(--grau-10);
  border-radius: 0 var(--rundung) var(--rundung) 0;
  padding: 1.1rem 1.4rem; font-weight: 600; margin: 1.75rem 0;
}

/* Statement: groß gesetzte Kernaussage mit übergroßem Anführungszeichen
   (Beate 04.07.2026 — auffälligere Alternative zum Merksatz-Kasten) */
.statement {
  position: relative;
  max-width: 46rem;
  margin: 3.5rem auto 2.75rem;
  padding: .25rem 0 0 4.75rem;
  min-height: 4.6rem; /* Platz für das große Anführungszeichen bei kurzen Sätzen */
  font-family: var(--schrift-titel);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--navy);
}
.statement::before {
  content: "„";
  position: absolute; left: 0; top: -2.6rem;
  font-family: var(--schrift-titel);
  font-size: 7rem; line-height: 1; font-weight: 700;
  color: var(--cyan);
}
@media (max-width: 599px) {
  .statement { padding-left: 3.25rem; margin-top: 2.5rem; }
  .statement::before { font-size: 5rem; top: -1.8rem; }
}

/* Tastatur-Fokus deutlich sichtbar */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--cyan); outline-offset: 2px; border-radius: 2px;
}

/* --- Kopfzeile (unverändert aus der Startfassung) --- */
.kopf {
  position: sticky; top: 0; z-index: 50; background: var(--navy);
  box-shadow: 0 2px 14px rgba(8, 27, 61, .35);
  padding: 0 var(--rand);
}
.kopf__innen { display: flex; align-items: center; gap: .4rem; padding: 2.6rem 0 1.75rem; }
.kopf__logo { flex-shrink: 0; display: flex; }
.kopf__logo img { height: 3.563rem; width: auto; display: block; }
.kopf__nav { margin-left: auto; }
.nav__liste { list-style: none; display: flex; align-items: center; gap: .25rem; margin: 0; padding: 0; }
.nav__punkt { position: relative; }
.nav__link, .nav__aufklappknopf {
  font-family: var(--schrift-text); font-size: .95rem; font-weight: 400;
  color: rgba(255,255,255,.82); text-decoration: none; background: none; border: 0;
  padding: .55rem .65rem; cursor: pointer; display: flex; align-items: center; gap: .25rem;
  border-radius: 4px; margin: 0; line-height: 1.3;
  position: relative; transition: color .18s ease;
}
.nav__link::after, .nav__aufklappknopf::after {
  content: ""; position: absolute; left: .65rem; right: .65rem; bottom: .15rem;
  height: 2px; background: var(--cyan); border-radius: 1px;
  transform: scaleX(0); transform-origin: left; transition: transform .18s ease;
}
.nav__link:hover, .nav__aufklappknopf:hover,
.nav__aufklappknopf[aria-expanded="true"] { color: #fff; }
.nav__link:hover::after, .nav__aufklappknopf:hover::after,
.nav__aufklappknopf[aria-expanded="true"]::after { transform: scaleX(1); }
.nav__aufklappknopf svg { width: 1em; height: 1em; transition: transform .15s; }
.nav__aufklappknopf[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav__unterliste {
  display: none; position: absolute; top: 100%; left: 0; min-width: 17rem; white-space: nowrap;
  list-style: none; margin: 0; padding: .4rem;
  background: #0B2450; border: 1px solid rgba(255,255,255,.12); border-radius: 6px;
  box-shadow: 0 14px 34px rgba(3, 10, 25, .5);
}
.nav__aufklappknopf[aria-expanded="true"] + .nav__unterliste { display: block; }
.nav__unterliste a {
  display: block; padding: .5rem .7rem; text-decoration: none;
  color: rgba(255,255,255,.88); border-radius: 4px; border-left: 3px solid transparent;
}
.nav__unterliste a { transition: background .15s ease, border-color .15s ease; }
.nav__unterliste a:hover { background: rgba(255,255,255,.08); border-left-color: var(--cyan); color: #fff; }
.kopf__cta { flex-shrink: 0; font-size: .92rem; margin-left: 1rem; padding: .55rem .95rem; background: var(--cyan); color: var(--navy); font-weight: 700; }
.kopf__cta:hover { background: #33B4EC; box-shadow: 0 6px 16px rgba(0, 158, 227, .35); }
.kopf__menueknopf { display: none; background: none; border: 0; cursor: pointer; padding: .5rem; color: #fff; }
.kopf__menueknopf svg { width: 1.6rem; height: 1.6rem; }
.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* --- Hero (Signatur: Bauplan-Raster auf Navy) --- */
.hero {
  background:
    linear-gradient(rgba(255,255,255,.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.032) 1px, transparent 1px),
    linear-gradient(180deg, #081B3D 0%, #0C2A5A 100%);
  background-size: 2.75rem 2.75rem, 2.75rem 2.75rem, auto;
  color: #E4EBF5; padding: clamp(2rem, 5vw, 3.25rem) var(--rand) clamp(3rem, 7.5vw, 5rem);
}
.hero__innen { max-width: var(--breite-inhalt); margin: 0 auto; }
.hero h1 {
  font-size: clamp(1.9rem, 4.5vw, 3rem); font-weight: 600;
  letter-spacing: -.02em; margin: 0 0 1.1rem; max-width: 46rem;
  color: #E4EBF5;
}
.hero h1 .akzent { color: var(--cyan); }
.hero p { font-size: 1.1rem; line-height: 1.7; max-width: 40rem; color: rgba(228, 235, 245, .75); }
.hero .vorzeile { color: var(--cyan); border-left-color: var(--cyan); }
.hero__knoepfe { display: flex; gap: .9rem; flex-wrap: wrap; margin-top: 2rem; }
.hero .knopf--umriss { color: #fff; border-color: rgba(255,255,255,.45); }
.hero .knopf--umriss:hover { border-color: #fff; background: rgba(255,255,255,.06); }
/* Startseiten-Hero mit KI-Hintergrundbild (Entwurf A, 04.07.2026):
   Links dunkler Verlauf für die Text-Lesbarkeit, rechts das Bild */
.hero--start {
  padding: clamp(2.5rem, 6vw, 4rem) var(--rand) clamp(4rem, 9vw, 6.5rem);
  background:
    linear-gradient(90deg, #081B3D 0%, rgba(8, 27, 61, .88) 32%, rgba(8, 27, 61, .45) 60%, rgba(8, 27, 61, .15) 100%),
    url("../bilder/startseite-hero-a.jpg") right center / cover no-repeat,
    linear-gradient(180deg, #081B3D 0%, #0C2A5A 100%);
  min-height: min(34rem, 62vh);
  display: flex;
  align-items: center;
}
.hero--start .hero__innen { width: 100%; }
/* Auf Handys: Bild stärker abgedunkelt, Text bleibt gut lesbar */
@media (max-width: 699px) {
  .hero--start {
    background:
      linear-gradient(rgba(8, 27, 61, .92), rgba(8, 27, 61, .84)),
      url("../bilder/startseite-hero-a.jpg") center / cover no-repeat,
      linear-gradient(180deg, #081B3D 0%, #0C2A5A 100%);
  }
}

/* --- Test-Effekte nach Gemini-Vorbild (04.07.2026), einzeln entfernbar --- */
/* Effekt 1: Verlaufs-Akzent in der Hero-Überschrift (Blau→Himmelblau) */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .hero--start h1 .akzent {
    background: linear-gradient(90deg, var(--cyan), #7BD1F7);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
/* Effekt 3: sanfter Cyan-Lichtschein hinter dem Hero-Inhalt */
.hero--start { position: relative; overflow: hidden; }
.hero--start::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 55% 65% at 30% 45%, rgba(0, 158, 227, .14), transparent 70%);
}
.hero--start .hero__innen { position: relative; }
/* Effekt 2 (Pill-Knöpfe) und Effekt 4 (Kartenrundung 20px): siehe design.css */
/* Effekt 5: Hero-Schrift heller und leuchtend (Beate, 04.07.2026) */
.hero--start h1 {
  color: #fff;
  text-shadow: 0 0 30px rgba(0, 158, 227, .35), 0 0 8px rgba(255, 255, 255, .2);
}
.hero--start p { color: rgba(246, 250, 255, .93); }
.hero--start h1 {
  font-size: clamp(2.3rem, 4.8vw, 4rem); max-width: none;
  line-height: 1.12; margin-bottom: 1.4rem;
}
.hero--start p { font-size: clamp(1.1rem, 1.6vw, 1.25rem); max-width: 44rem; }
.hero--start .hero__knoepfe { margin-top: 2.4rem; }
.hero a:not(.knopf) { color: var(--cyan); }

/* --- Abschluss-CTA-Knopf (Cyan) --- */
.knopf--cta { background: var(--cyan); color: var(--navy); font-weight: 700; }
.knopf--cta:hover { background: #33B4EC; box-shadow: 0 8px 24px rgba(0, 158, 227, .25); }

/* Effekt 6 (Google-Workspace-Vorbild, 04.07.2026): beim Überfahren steigt
   ein sanfter Farbschimmer in der Säulenfarbe von unten in der Karte auf */
body { --schimmer: rgba(0, 158, 227, .14); --halo: rgba(0, 158, 227, .30); }
body.saeule-beratung { --schimmer: rgba(201, 162, 39, .14); --halo: rgba(201, 162, 39, .30); }
body.saeule-vermietung { --schimmer: rgba(76, 122, 92, .14); --halo: rgba(76, 122, 92, .30); }
.karten-raster li, .zwei-saeulen__karte { position: relative; overflow: hidden; }
.karten-raster li::after, .zwei-saeulen__karte::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, var(--schimmer), transparent 65%);
  opacity: 0; transition: opacity var(--uebergang);
}
.karten-raster li:hover::after, .zwei-saeulen__karte:hover::after { opacity: 1; }
/* Effekt 7 (gleiches Vorbild): leuchtender Lichtkranz um verlinkte Karten
   und ein erscheinender Pfeil als Klick-Einladung */
.karten-raster li:hover, .zwei-saeulen__karte:hover {
  box-shadow: var(--flaeche-schatten-hover), 0 0 44px 6px var(--halo);
}
.karten-raster h3 a::after {
  content: "→"; display: inline-block; margin-left: .35em; opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--uebergang), transform var(--uebergang);
}
.karten-raster li:hover h3 a::after { opacity: 1; transform: none; }

/* Alle Karten-Flächen heben sich beim Überfahren sanft an */
.problem-karten li, .loesung-karten li, .vergleich__spalte,
.karten-raster li, .zwei-saeulen__karte {
  transition: transform var(--uebergang), box-shadow var(--uebergang);
}
.problem-karten li:hover, .loesung-karten li:hover, .vergleich__spalte:hover,
.karten-raster li:hover, .zwei-saeulen__karte:hover {
  transform: translateY(-4px) scale(1.012);
  box-shadow: var(--flaeche-schatten-hover);
}

/* --- Problem-Karten (✖) / Lösung-Karten (✔): zarte Flächen statt Kästen --- */
.problem-karten, .loesung-karten {
  list-style: none; margin: 2.5rem 0 0; padding: 0;
  display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}
.problem-karten li, .loesung-karten li {
  background: var(--flaeche-verlauf); box-shadow: var(--flaeche-schatten);
  border-radius: var(--rundung-karte);
  padding: 1.75rem 1.6rem;
}
/* Rot bleibt vorerst (Entscheidung Beate 04.07.2026) */
.problem-karten li { border-left: 3px solid var(--rot-akzent); border-radius: 0 var(--rundung-karte) var(--rundung-karte) 0; }

/* Problem-Karten kompakt (Beate 04.07.2026): breit 4 nebeneinander,
   mittel 2×2, iPhone verkleinert 2×2, nur ganz schmal untereinander */
.problem-karten { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.problem-karten li { padding: 1.35rem 1.2rem; font-size: .95rem; }
@media (max-width: 1099px) {
  .problem-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .problem-karten li { padding: 1rem .9rem; font-size: .88rem; }
  .problem-karten .karten__zeichen { font-size: .95rem; }
}
@media (max-width: 349px) {
  .problem-karten { grid-template-columns: 1fr; }
}
.karten__zeichen {
  font-family: var(--schrift-titel); font-weight: 600; font-size: 1.05rem;
  display: block; margin-bottom: .45rem;
}
.problem-karten .karten__zeichen { color: var(--rot-akzent); }
.loesung-karten .karten__zeichen { color: var(--saeule-text); }

/* --- Vorher/Nachher-Vergleich --- */
.vergleich { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); margin: 2.5rem 0 0; }
.vergleich__spalte { border-radius: var(--rundung-karte); padding: 1.75rem 1.6rem; background: var(--flaeche-verlauf); box-shadow: var(--flaeche-schatten); }
.vergleich__spalte--vorher { border-top: 3px solid var(--rot-akzent); }
.vergleich__spalte--nachher { border-top: 3px solid var(--saeule-akzent); }
.vergleich__spalte h3 { text-transform: uppercase; font-size: .85rem; letter-spacing: .1em; }
.vergleich ul { list-style: none; margin: 0; padding: 0; }
.vergleich li { padding: .4rem 0; display: flex; gap: .55rem; align-items: baseline; }
.vergleich__x { color: var(--rot-akzent); font-weight: 700; }
.vergleich__haken { color: var(--saeule-text); font-weight: 700; }

/* --- Karten-Raster (Leistungs-Kacheln): Flächen, sanftes Anheben --- */
.karten-raster {
  list-style: none; margin: 2.5rem 0 0; padding: 0;
  display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}
.karten-raster li {
  background: var(--flaeche-verlauf); box-shadow: var(--flaeche-schatten);
  border-radius: var(--rundung-karte);
  padding: 1.9rem 1.7rem;
}
.karten-raster svg { width: 1.7rem; height: 1.7rem; color: var(--saeule-text); margin-bottom: .8rem; }
.karten-raster a { font-weight: 600; text-decoration: none; color: var(--saeule-text); }
.karten-raster a:hover { text-decoration: underline; }
.karten-raster p { font-size: 1rem; color: var(--grau-60); }

/* In grauen Abschnitten werden die Flächen heller (fast weiß) */
.sektion--grau .problem-karten li, .sektion--grau .loesung-karten li,
.sektion--grau .karten-raster li, .sektion--grau .vergleich__spalte,
.sektion--grau .zwei-saeulen__karte { background: var(--flaeche-verlauf-hell); }
.sektion--grau .merksatz { background: #fff; }

/* --- Schritt-Ablauf (nummerierte Zeitleiste) --- */
.schritte { list-style: none; margin: 2.5rem 0 0; padding: 0; counter-reset: schritt; }
.schritte li {
  counter-increment: schritt; position: relative;
  padding: 0 0 2.1rem 3.5rem;
}
.schritte li::before {
  content: counter(schritt);
  position: absolute; left: 0; top: 0;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--navy); color: #fff;
  font-family: var(--schrift-titel); font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.schritte li::after {
  content: ""; position: absolute; left: 1.15rem; top: 2.6rem; bottom: .2rem;
  width: 2px; background: var(--linie);
}
.schritte li:last-child { padding-bottom: 0; }
.schritte li:last-child::after { display: none; }

/* --- Tabellen --- */
.tabelle-rollen { overflow-x: auto; margin: 2.5rem 0 0; }
.tabelle-rollen table { border-collapse: collapse; width: 100%; min-width: 34rem; }
.tabelle-rollen th {
  font-family: var(--schrift-titel); font-size: .82rem; letter-spacing: .08em;
  text-transform: uppercase; text-align: left; color: var(--grau-60);
  border-bottom: 2px solid var(--saeule-akzent); padding: .7rem .9rem;
}
.tabelle-rollen td { border-bottom: 1px solid var(--linie); padding: .85rem .9rem; vertical-align: top; }
.tabelle-rollen tr:nth-child(even) td { background: var(--grau-10); }

/* --- FAQ: ruhige Liste mit feinen Trennlinien statt Kästen --- */
.faq { margin: 2.5rem 0 0; max-width: 50rem; }
.faq details { border-bottom: 1px solid var(--linie); }
.faq details:first-of-type { border-top: 1px solid var(--linie); }
.faq summary {
  cursor: pointer; font-weight: 600; padding: 1.2rem .25rem;
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-family: var(--schrift-titel); font-weight: 600;
  color: var(--saeule-text); font-size: 1.25rem;
  transition: transform var(--uebergang);
}
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding: 0 .25rem 1.3rem; color: var(--grau-60); }

/* --- Zwei-Säulen-Block (Startseite, Signatur-Baustein) --- */
.zwei-saeulen { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); margin: 2.5rem 0 0; }
.zwei-saeulen__karte {
  background: var(--flaeche-verlauf); box-shadow: var(--flaeche-schatten);
  border-radius: var(--rundung-karte);
  border-top: 3px solid var(--blau); padding: 2.2rem 2rem;
  display: flex; flex-direction: column; gap: .45rem;
}
.zwei-saeulen__karte--beratung { border-top-color: var(--gold-akzent); }
.zwei-saeulen__karte .vorzeile { margin-bottom: .3rem; }
.zwei-saeulen__karte--beratung .vorzeile { color: var(--gold-text); border-left-color: var(--gold-akzent); }
.zwei-saeulen__karte h3 { font-size: 1.35rem; }
.zwei-saeulen__karte .zwei-saeulen__leitsatz { font-weight: 600; color: var(--grau-60); font-style: italic; }
.zwei-saeulen__karte a { font-weight: 600; margin-top: auto; }
.zwei-saeulen__karte--beratung a { color: var(--gold-text); }

/* --- Formular (statisch, Anbindung folgt) --- */
.formular { max-width: 40rem; margin-top: 2rem; }
.formular__feld { margin-bottom: 1.1rem; }
.formular__feld label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: .35rem; }
.formular__feld input[type="text"], .formular__feld input[type="email"],
.formular__feld input[type="tel"], .formular__feld textarea, .formular__feld select {
  width: 100%; padding: .7rem .9rem; font: inherit; color: var(--grau-90);
  background: #fff; border: 1px solid #CBD2DC; border-radius: var(--rundung);
}
.formular__feld input:focus-visible, .formular__feld textarea:focus-visible,
.formular__feld select:focus-visible { outline: 3px solid var(--cyan); outline-offset: 1px; }
.formular__feld--zeile { display: flex; gap: .6rem; align-items: flex-start; }
.formular__feld--zeile label { font-weight: 400; margin: 0; }
.formular__feld--zeile input { margin-top: .3rem; }
.formular [disabled] { opacity: .55; cursor: not-allowed; }

/* --- Illustration + Text (zweispaltig, für KI-Bildwelt) --- */
.bild-text { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.bild-text__text > .vorzeile { margin-top: 0; }
.bild-text__text p { max-width: 34rem; }
.bild-text__bild img {
  width: 100%; height: auto; display: block;
  border-radius: var(--rundung-karte);
  box-shadow: 0 2px 6px rgba(8, 27, 61, .08), 0 22px 50px rgba(8, 27, 61, .16);
}
.bild-text--bild-links .bild-text__text { order: 2; }
@media (max-width: 767px) {
  .bild-text { grid-template-columns: 1fr; gap: 2rem; }
  .bild-text--bild-links .bild-text__text { order: 0; }
}

/* Dunkle Abschnitts-Variante: Navy-Illustrationen verschmelzen nahtlos
   mit dem Hintergrund (kein Rahmen, kein Schatten) — Beates Wunsch. */
.sektion--dunkel {
  /* Flaches Navy exakt in der Hintergrundfarbe der Illustrationen,
     damit die Bildkanten nahtlos verschwinden */
  background: #0c1f3d;
  color: #E4EBF5;
}
.sektion--dunkel h2 { color: #E4EBF5; }
.sektion--dunkel p { color: rgba(228, 235, 245, .78); }
.sektion--dunkel .vorzeile { color: var(--cyan); border-left-color: var(--cyan); }
.sektion--dunkel a:not(.knopf) { color: var(--cyan); }
.sektion--dunkel .bild-text__bild img { box-shadow: none; border-radius: 0; }

/* Bild HINTER dem Text (Beates Wunsch 06.07.2026): großes Illustrationsbild
   als Abschnitts-Hintergrund, Text darüber. Links dunkler Verlauf für
   Lesbarkeit — das Bild verschmilzt, man sieht keine Bildkante mehr.
   Bild-URL kommt per Inline-Variable --bg. */
.sektion--bildhinter {
  /* --bg = Bild-URL, --bgcolor = exakte Hintergrundfarbe DES Bildes
     (pro Abschnitt per Inline-Style gesetzt → nahtloser Übergang).
     Bild groß (höhenbasiert, füllt die Höhe) und in voller Helligkeit
     rechts; links ein weicher Verlauf. Die Textlesbarkeit im Überschnitt
     trägt die Schrift selbst (dunkler Schein, siehe unten). */
  background:
    linear-gradient(90deg, var(--bgcolor, #0c1f3d) 0%, var(--bgcolor, #0c1f3d) var(--verlauf-voll, 22%), transparent var(--verlauf-weg, 54%)),
    var(--bg) right center / auto 122% no-repeat,
    var(--bgcolor, #0c1f3d);
  min-height: min(30rem, 62vh);
  display: flex; align-items: center;
}
.sektion--bildhinter .sektion__innen { width: 100%; }
.sektion--bildhinter .bildhinter__text { max-width: 40rem; }
/* Schrift trägt einen weichen dunklen Schein → bleibt lesbar, auch wo sie
   sich mit dem hellen Motiv überschneidet (Beates Wunsch 08.07.2026). */
.sektion--bildhinter .bildhinter__text .vorzeile,
.sektion--bildhinter .bildhinter__text h2,
.sektion--bildhinter .bildhinter__text p {
  text-shadow: 0 2px 18px rgba(7,17,34,.92), 0 1px 4px rgba(7,17,34,.85);
}
/* Nur echtes Handy (<768px): Bild ganzflächig abgedunkelt hinter dem Text
   — dort muss der Text zwangsläufig überm Bild liegen. Darüber bleibt
   die helle, rechts stehende Darstellung. */
@media (max-width: 767px) {
  .sektion--bildhinter {
    background:
      linear-gradient(180deg, rgba(10,24,46,.82), rgba(10,24,46,.93)),
      var(--bg) center / cover no-repeat,
      var(--bgcolor, #0c1f3d);
  }
}

/* --- Porträtfoto (Inhaberin / Kanzleileitung) --- */
.portraet {
  display: block;
  width: 100%;
  max-width: 380px;
  height: auto;
  border-radius: var(--rundung-karte, 20px);
  box-shadow: 0 12px 34px rgba(8,27,61,.16);
  margin: 1.5rem 0 1.75rem;
}

/* --- Platzhalter (Arbeitsversion: sichtbar markiert) --- */
.platzhalter {
  border: 2px dashed #B9C0CB; border-radius: var(--rundung-karte); background: rgba(244,245,247,.6);
  padding: 1.25rem; margin: 1.75rem 0; color: var(--grau-60); font-size: .95rem;
}
.platzhalter p { margin: 0 0 .25rem; }
.platzhalter--dunkel { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.3); color: rgba(255,255,255,.75); }

/* --- Logo-Leiste (Schnittstellenpartner) --- */
.logo-leiste {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center;
  gap: 2rem 3rem; margin: 2rem 0 0; padding: 0;
}
/* Logo-Hoehe: hier anpassen, um alle Partnerlogos gleichmaessig groesser/kleiner zu machen */
.logo-leiste img { height: 5rem; width: auto; max-width: 100%; display: block; }

/* --- Abschluss-CTA --- */
.abschluss-cta {
  background:
    linear-gradient(rgba(255,255,255,.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.032) 1px, transparent 1px),
    linear-gradient(180deg, #0C2A5A 0%, #081B3D 100%);
  background-size: 2.75rem 2.75rem, 2.75rem 2.75rem, auto;
  color: #E4EBF5; padding: clamp(3rem, 6.5vw, 4.75rem) var(--rand); text-align: center;
}
.abschluss-cta h2 { color: #E4EBF5; }
.abschluss-cta p { max-width: 42rem; margin-left: auto; margin-right: auto; color: rgba(228, 235, 245, .78); }
.abschluss-cta .knopf--cta { margin: 1.25rem 0; }
.abschluss-cta__kontakt { font-size: .97rem; }
.abschluss-cta a:not(.knopf) { color: #fff; text-decoration: none; }

/* --- Fußzeile --- */
/* Etwas dunkler als der Abschnitt darüber (#081B3D) + feine Trennlinie oben
   → dezente, wertige Absetzung. Schrift kleiner als der Fließtext, damit der
   Footer ruhiger wirkt. */
.fuss {
  background: #06132B; border-top: 1px solid rgba(255,255,255,.09);
  color: rgba(255,255,255,.78); padding: 3.25rem var(--rand) 1.5rem;
  font-size: .9rem; line-height: 1.6;
}
.fuss__innen { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
.fuss a { color: #fff; }
.fuss__titel { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--cyan); margin-bottom: .6rem; }
.fuss__liste { list-style: none; margin: 0; padding: 0; columns: 2; }
.fuss__liste a { display: inline-block; padding: .22rem 0; text-decoration: none; }
.fuss__liste a:hover { text-decoration: underline; }
.fuss__anfahrt { color: rgba(255,255,255,.6); font-size: .84rem; }
.fuss__rechtliches {
  max-width: var(--breite-inhalt); margin: 2.5rem auto 0; padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,.12); display: flex; gap: 1.5rem; font-size: .84rem;
}
.fuss__spalte--kontakt img { margin-bottom: 1rem; }

/* Stufe 1 — schmalere Fenster: Menü rückt enger zusammen, bleibt eine Zeile */
@media (max-width: 1299px) and (min-width: 1100px) {
  .nav__link, .nav__aufklappknopf { font-size: .88rem; padding: .5rem .4rem; }
  .nav__link::after, .nav__aufklappknopf::after { left: .4rem; right: .4rem; }
  .kopf__cta { font-size: .88rem; margin-left: .5rem; padding: .5rem .75rem; }
  .kopf__innen { gap: .3rem; }
}

/* Stufe 2 — mittlere Fenster: Menü als eigene, volle zweite Zeile (kein Klapp-Menü!) */
@media (max-width: 1099px) and (min-width: 600px) {
  .kopf__innen { flex-wrap: wrap; padding: 2.6rem 0 0; row-gap: .2rem; }
  .kopf__cta { margin-left: auto; order: 2; }
  .kopf__nav { flex-basis: 100%; margin-left: 0; order: 3; }
  .nav__liste { flex-wrap: wrap; margin-left: -.5rem; padding: .2rem 0 .6rem; }
  .nav__link, .nav__aufklappknopf { font-size: .9rem; padding: .5rem .5rem; }
  .nav__link::after, .nav__aufklappknopf::after { left: .5rem; right: .5rem; }
  .kopf__logo img { height: 2.6rem; }
  .kopf__cta { font-size: .85rem; padding: .5rem .8rem; }
}

/* Stufe 3 — Handys: Klapp-Menü */
@media (max-width: 599px) {
  .kopf { padding: 0 1rem; }
  .kopf__innen { padding: .8rem 0; gap: .4rem; flex-wrap: wrap; }
  .kopf__menueknopf { display: block; margin-left: auto; padding: .3rem; }
  .kopf__menueknopf svg { width: 1.4rem; height: 1.4rem; }
  .kopf__nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--navy); border-bottom: 1px solid rgba(255,255,255,.12); margin: 0;
    box-shadow: 0 14px 30px rgba(3,10,25,.5); max-height: calc(100vh - 4rem); overflow-y: auto;
  }
  .kopf__nav--offen { display: block; }
  .nav__liste { flex-direction: column; align-items: stretch; padding: .75rem 1.25rem 1.25rem; }
  .nav__unterliste { position: static; box-shadow: none; border: 0; padding-left: 1.25rem; background: transparent; white-space: normal; }
  .kopf__logo img { height: 1.6rem; }
  .kopf__cta { margin-left: 0; }
  .fuss__liste { columns: 1; }
}

/* Sehr schmale Bildschirme: kurzer Button-Text */
.kopf__cta-kurz { display: none; }
@media (max-width: 599px) {
  .kopf__cta-lang { display: none; }
  .kopf__cta-kurz { display: inline; }
  .kopf__cta { font-size: .78rem; padding: .42rem .6rem; }
}

/* --- Sanfte Einblendung beim Scrollen (Klassen setzt js/einblendung.js) --- */
.einblenden { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.einblenden--sichtbar { opacity: 1; transform: none; }

/* --- Bewegung reduzieren --- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .einblenden { opacity: 1; transform: none; }
  /* Karten springen bei "Bewegung reduzieren" auch beim Überfahren nicht */
  .problem-karten li:hover, .loesung-karten li:hover, .vergleich__spalte:hover,
  .karten-raster li:hover, .zwei-saeulen__karte:hover { transform: none; }
}