/* Kapital- & Finanzservice Könitzer
   Farben direkt aus dem Logo gemessen:
   Tannengrün tief #083f21 (Streifen oben), Logo-Grün #194c2c, Schrift #022c15,
   Streifenverlauf #366a42 > #538358 > #90b184 > #b1c89e, Logo-Tafel Creme #fbf6e0. */

@font-face {
  font-family: "Libre Bodoni";
  src: url("../fonts/libre-bodoni-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Libre Bodoni";
  src: url("../fonts/libre-bodoni-italic-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Dancing Script";
  src: url("../fonts/dancing-script-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --tanne: #083f21;
  --gruen: #194c2c;
  --gruen-mittel: #366a42;
  --salbei: #538358;
  --salbei-hell: #b1c89e;
  --salbei-zart: #d5dec7;
  --creme: #fbf6e0;
  --papier: #fffdf6;
  --tinte: #022c15;

  color-scheme: light;
  --bg: var(--creme);
  --flaeche: var(--papier);
  --text: var(--tinte);
  --text-leise: #2f4d39;
  --linie: #c9d5bd;
  --akzent: var(--gruen);
  --akzent-text: var(--creme);
  --fokus: #b5651d;
  --fehler: #9b1c1c;

  --serif: "Libre Bodoni", "Bodoni 72", Didot, Georgia, serif;
  --schreib: "Dancing Script", "Snell Roundhand", "Apple Chancery", cursive;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --breite: 72rem;
  --radius: 2px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 7rem; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
  /* die Bodoni setzt Wortabstände sehr eng, etwa bei „in Jena“ */
  word-spacing: .08em;
  /* lange Komposita wie „Betriebsunterbrechungsversicherung“ auf Handy und Tablet trennen,
     kurze Wörter bleiben ganz */
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 14 6 6;
  overflow-wrap: break-word;
}

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

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  background: var(--akzent);
  color: var(--akzent-text);
  padding: .6rem 1rem;
  z-index: 30;
}
.skip:focus { top: 1rem; }

.rahmen {
  width: min(100% - 2rem, var(--breite));
  margin-inline: auto;
}

.abschnitt__titel {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  color: var(--akzent);
  max-width: 22ch;
}

.abschnitt__lead {
  font-size: 1.1875rem;
  color: var(--text-leise);
  max-width: 58ch;
  margin-top: 1rem;
}

.textlink {
  color: var(--akzent);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}
.textlink:hover { text-decoration-thickness: 2px; }

/* Knöpfe: eckig wie die Logo-Tafel, doppelte Linie als Markenzeichen */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: .75rem 1.5rem;
  border: 2px solid var(--akzent);
  border-radius: var(--radius);
  background: var(--akzent);
  color: var(--akzent-text);
  font: 600 1rem/1.2 var(--sans);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: inset 0 0 0 2px var(--akzent), inset 0 0 0 3px var(--akzent-text);
  transition: background-color .2s ease, color .2s ease, transform .1s ease;
}
.knopf:hover { background: var(--tanne); border-color: var(--tanne); }
.knopf:active { transform: translateY(1px); }
.knopf--rand {
  background: transparent;
  color: var(--akzent);
  box-shadow: none;
}
.knopf--rand:hover { background: var(--akzent); color: var(--akzent-text); }
.knopf--klein { min-height: 2.5rem; padding: .5rem 1.1rem; font-size: .9375rem; }

/* Kopf: schwebende Leiste mit Abstand zum Rand, bleibt beim Scrollen über dem Inhalt.
   Einzige Fläche mit größerem Radius, damit sie sich vom eckigen Raster abhebt. */
.kopf {
  position: sticky;
  top: .75rem;
  z-index: 20;
  width: min(100% - 1.5rem, calc(var(--breite) + 2.5rem));
  margin: .75rem auto 0;
  background: color-mix(in srgb, var(--creme) 84%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
          backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgb(25 76 44 / .16);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgb(255 253 246 / .8),
    0 12px 32px -14px rgb(2 44 21 / .35);
  transition: box-shadow .3s ease, background-color .3s ease;
}
/* nach dem ersten Scrollen etwas kräftiger, damit sie über grünen Bändern klar absetzt */
.kopf.gescrollt {
  background: color-mix(in srgb, var(--creme) 92%, transparent);
  box-shadow:
    inset 0 1px 0 rgb(255 253 246 / .8),
    0 18px 40px -16px rgb(2 44 21 / .55);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .kopf { background: var(--creme); }
}
.kopf__innen {
  padding-inline: clamp(.9rem, 2vw, 1.5rem);
  min-height: 4.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.kopf__logo img { width: 220px; }
.kopf__logo { margin-right: auto; }
.kopf__rechts { display: flex; align-items: center; gap: 1rem; }

/* Facebook und Instagram: grüne Glyphen, runde Trefferfläche */
.sozial {
  display: flex;
  align-items: center;
  gap: .25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sozial a {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--gruen);
  border-radius: 50%;
  transition: background-color .2s ease, color .2s ease;
}
.sozial a:hover { background: var(--salbei-zart); color: var(--tanne); }
.sozial svg { width: 22px; height: 22px; }
/* Trennstrich zwischen Navigation und Icons in der Kopfleiste */
.kopf .sozial { padding-left: .75rem; border-left: 1px solid var(--linie); }
.kopf__menue {
  display: none;
  font: 600 1rem var(--sans);
  color: var(--akzent);
  background: none;
  border: 2px solid var(--akzent);
  border-radius: var(--radius);
  padding: .5rem .9rem;
  cursor: pointer;
}
.nav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}
.nav > a:not(.knopf) {
  text-decoration: none;
  font-weight: 500;
  color: var(--text);
  padding-block: .25rem;
  border-bottom: 2px solid transparent;
}
.nav > a:not(.knopf):hover { border-bottom-color: var(--salbei); }

@media (min-width: 64rem) {
  .kopf__logo img { width: 300px; }
}

@media (max-width: 53.99rem) {
  .kopf__menue { display: inline-block; order: 3; }
  .kopf .sozial { order: 2; border-left: 0; padding-left: 0; }
  .nav {
    display: none;
    position: absolute;
    inset: calc(100% + .5rem) 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .5rem 1.25rem 1.25rem;
    background: var(--creme);
    border: 1px solid rgb(25 76 44 / .16);
    border-radius: 14px;
    box-shadow: 0 18px 40px -16px rgb(2 44 21 / .55);
  }
  .nav.offen { display: flex; }
  .nav > a:not(.knopf) { padding: .85rem 0; border-bottom: 1px solid var(--linie); }
  .kopf__logo img { width: 190px; }
  .nav .knopf { margin-top: 1rem; }
}

/* Held: Text links, Porträt randlos über die rechte Hälfte, beginnt ganz oben hinter der
   schwebenden Kopfleiste und läuft nach links und unten weich in den Cremegrund aus */
.held {
  /* Höhe der Kopfleiste samt ihrem Abstand nach oben */
  --kopf-raum: 5.95rem;
  position: relative;
  overflow: hidden;
  margin-top: calc(-1 * var(--kopf-raum));
  padding-top: calc(var(--kopf-raum) - .75rem);
}
.held__innen {
  width: min(100% - 2rem, var(--breite));
  margin-inline: auto;
  padding-block: clamp(4rem, 9vw, 8rem) clamp(5rem, 8vw, 7rem);
}
.held__text { position: relative; z-index: 1; }
@media (min-width: 64rem) {
  .held__text { max-width: 52%; }
}
@media (max-width: 63.99rem) {
  .held__innen { padding-bottom: 0; }
}
.held h1 {
  font-size: clamp(2.3rem, 1.2rem + 2.9vw, 3.4rem);
  color: var(--akzent);
  letter-spacing: -.01em;
  max-width: none;
}
.held__unter {
  margin-top: 1.5rem;
  font-size: 1.25rem;
  color: var(--text-leise);
  max-width: 40ch;
}
.held__aktionen {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: .875rem;
}

.held__bild {
  position: relative;
  height: 30rem;
  margin-top: -2rem;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 70%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 70%, transparent 100%);
}
.held__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 12%;
}
@media (min-width: 36rem) {
  .held__bild { height: 36rem; }
}
@media (min-width: 64rem) {
  .held__bild {
    position: absolute;
    inset: 0 0 0 auto;
    width: 54vw;
    max-width: 60rem;
    height: auto;
    margin: 0;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 42%), linear-gradient(to top, transparent 0%, #000 32%);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(to right, transparent 0%, #000 42%), linear-gradient(to top, transparent 0%, #000 32%);
            mask-composite: intersect;
  }
}
/* Namensschild zum Porträt: steht auf dem ausgeblendeten Bildrand */
.held__name {
  position: relative;
  z-index: 1;
  margin: -2.5rem 0 0;
  padding-bottom: 2rem;
  text-align: center;
  font-size: 1rem;
}
.held__name a { color: var(--text-leise); text-decoration: none; }
.held__name strong {
  display: block;
  font: 700 1.5rem/1.2 var(--serif);
  color: var(--akzent);
}
.held__name a:hover strong { text-decoration: underline; text-underline-offset: .15em; }
@media (min-width: 64rem) {
  .held__name {
    position: absolute;
    right: min(23vw, 26rem);
    bottom: 1.25rem;
    translate: 50% 0;
    margin: 0;
    padding: 0;
    white-space: nowrap;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .held__bild { animation: bild-einflug 1.1s cubic-bezier(.2, .8, .2, 1) both; }
  .held__name { animation: einblenden .8s .7s ease-out both; }
  .seite__held-bild { animation: bild-einflug 1.1s cubic-bezier(.2, .8, .2, 1) both; }
}
@keyframes bild-einflug { from { opacity: 0; transform: translateX(70px); } }
@keyframes einblenden { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (max-width: 30rem) {
  .held__aktionen .knopf { flex: 1 1 100%; }
}

/* Grüne Bänder: blenden oben und unten weich in Creme über,
   mit denselben Zwischentönen wie die Streifen im Logo (Tanne > Grün > Salbei > Creme).
   Creme-Abschnitte dazwischen sind flach Creme, dadurch entstehen keine Kanten. */
.gruen {
  --verlauf: clamp(5rem, 9vw, 8rem);
  background: linear-gradient(180deg,
    var(--creme) 0,
    var(--salbei-hell) calc(var(--verlauf) * .3),
    var(--salbei) calc(var(--verlauf) * .62),
    var(--gruen) var(--verlauf),
    var(--tanne) 50%,
    var(--gruen) calc(100% - var(--verlauf)),
    var(--salbei) calc(100% - var(--verlauf) * .62),
    var(--salbei-hell) calc(100% - var(--verlauf) * .3),
    var(--creme) 100%);
  color: var(--creme);
  padding-block: calc(var(--verlauf) + clamp(1.5rem, 3vw, 2.5rem));
}
.gruen .abschnitt__titel { color: var(--creme); }
.gruen .abschnitt__lead { color: #dfe7d3; }

.creme { background: var(--creme); padding-block: clamp(4rem, 8vw, 6.5rem); }

/* Logo-Laufband: sitzt im oberen Verlauf des Unabhängig-Bands (Creme > Salbei > Grün),
   direkt unter dem Hero. Ein durchgehender Verlauf, damit keine Naht entsteht. */
.unabhaengig.gruen {
  --verlauf: clamp(9rem, 13vw, 11rem);
  padding-top: 0;
  /* oben schneller ins Mittelgrün, damit die hellen Logos genug Kontrast haben */
  background: linear-gradient(180deg,
    var(--creme) 0,
    var(--salbei-hell) calc(var(--verlauf) * .16),
    var(--salbei) calc(var(--verlauf) * .34),
    var(--gruen-mittel) calc(var(--verlauf) * .52),
    var(--gruen) calc(var(--verlauf) * .85),
    var(--tanne) 50%,
    var(--gruen) calc(100% - var(--verlauf)),
    var(--salbei) calc(100% - var(--verlauf) * .62),
    var(--salbei-hell) calc(100% - var(--verlauf) * .3),
    var(--creme) 100%);
}
.partner {
  height: var(--verlauf);
  display: flex;
  align-items: center;
  padding-top: calc(var(--verlauf) * .2);
  margin-bottom: clamp(1rem, 2vw, 1.75rem);
}
.laufband {
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.laufband__spur {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: clamp(2.5rem, 5vw, 4rem);
  margin: 0;
  padding: 0 clamp(2.5rem, 5vw, 4rem) 0 0;
  list-style: none;
}
.laufband__spur li {
  display: grid;
  place-items: center;
  height: 3.5rem;
}
/* Freistehend ohne Kachel: alle Logos einheitlich in Hellcreme, leichter Schatten zur Absetzung */
.laufband__spur img {
  height: 2.6rem;
  width: auto;
  max-width: 10rem;
  object-fit: contain;
  filter: brightness(0) invert(97%) sepia(9%) saturate(380%) hue-rotate(5deg) drop-shadow(0 1px 1.5px rgb(2 44 21 / .45));
  opacity: .95;
  transition: opacity .2s ease;
}
.laufband__spur img:hover { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .laufband__spur { animation: laufen 55s linear infinite; }
  .laufband:hover .laufband__spur,
  .laufband:focus-within .laufband__spur { animation-play-state: paused; }
}
@keyframes laufen { to { transform: translateX(-100%); } }
/* Ohne Bewegung: Logos umbrechen statt laufen, Doppel ausblenden */
@media (prefers-reduced-motion: reduce) {
  .laufband { mask-image: none; -webkit-mask-image: none; }
  .laufband__spur { flex-wrap: wrap; justify-content: center; flex-shrink: 1; gap: 1rem 2rem; padding: 0; }
  .laufband__spur[aria-hidden="true"] { display: none; }
}
@media (max-width: 36rem) {
  .laufband__spur li { height: 3rem; }
  .laufband__spur img { height: 2.1rem; max-width: 7.5rem; }
}

/* Häuser über den Bausteinen: ein großes Foto, zwei kleinere rechts daneben */
.zuhause__bilder {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: clamp(.75rem, 1.5vw, 1.25rem);
  height: clamp(20rem, 38vw, 30rem);
  margin-top: 2.5rem;
}
.zuhause__bild {
  margin: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: 0 18px 36px -26px rgb(2 44 21 / .55);
}
.zuhause__bild--gross { grid-row: span 2; }
.zuhause__bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 45rem) {
  .zuhause__bilder {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    height: auto;
  }
  .zuhause__bild { aspect-ratio: 4 / 3; }
  .zuhause__bild--gross { grid-row: auto; grid-column: span 2; aspect-ratio: 3 / 2; }
}

/* Rund ums Zuhause: Wohngebäude links als Hauptthema, die übrigen Bausteine rechts als Zeilen */
.haus {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 0 clamp(2rem, 5vw, 4.5rem);
  margin-top: 3rem;
  align-items: start;
}
.haus__feld { padding: 1.4rem 0; border-top: 1px solid var(--linie); }
.haus__feld h3 { font-size: 1.45rem; color: var(--gruen); margin-bottom: .5rem; hyphens: manual; }
.haus__feld p { color: var(--text-leise); max-width: 52ch; }
.haus__feld:last-child { border-bottom: 1px solid var(--linie); }
.haus__feld--bild {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  column-gap: 1.25rem;
  align-content: start;
}
.haus__feld--bild img {
  grid-row: span 2;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}
.haus__feld--gross {
  grid-row: span 3;
  padding-top: 0;
  border-top: 0;
  border-bottom: 0 !important;
}
.haus__feld--gross h3 { font-size: clamp(2rem, 1.5rem + 1.5vw, 2.75rem); margin-bottom: 1rem; }
.haus__feld--gross p { font-size: 1.1875rem; color: var(--text); }
.haus__aktion { margin-top: 1.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.haken { list-style: none; margin: 1.75rem 0 0; padding: 0; }
.haken li {
  position: relative;
  padding: .7rem 0 .7rem 2rem;
  border-top: 1px solid var(--linie);
}
.haken li:last-child { border-bottom: 1px solid var(--linie); }
.haken li::before {
  content: "";
  position: absolute;
  left: .1rem;
  top: 1.15rem;
  width: .9rem;
  height: .45rem;
  border-left: 2px solid var(--gruen-mittel);
  border-bottom: 2px solid var(--gruen-mittel);
  transform: rotate(-45deg);
}
@media (max-width: 53.99rem) {
  .haus { grid-template-columns: 1fr; }
  .haus__feld--gross { grid-row: auto; margin-bottom: 1.5rem; }
}

/* Vorsorge: grünes Band, zwei Spalten mit feiner Trennlinie */
.vorsorge .abschnitt__lead { color: var(--salbei-hell); font-family: var(--serif); font-style: italic; font-size: 1.5rem; line-height: 1.35; }
.vorsorge__paar {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem clamp(2rem, 6vw, 5rem);
}
.vorsorge__paar article + article {
  padding-left: clamp(2rem, 6vw, 5rem);
  margin-left: calc(-1 * clamp(2rem, 6vw, 5rem));
  border-left: 1px solid rgb(251 246 224 / .28);
}
.vorsorge__bild {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin-bottom: 1.5rem;
  border-radius: var(--radius);
}
.vorsorge__paar h3 { color: var(--creme); font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); margin-bottom: .75rem; hyphens: manual; }
.vorsorge__paar p { color: #dfe7d3; max-width: 46ch; font-size: 1.0625rem; }
@media (max-width: 45rem) {
  .vorsorge__paar { grid-template-columns: 1fr; }
  .vorsorge__paar article + article { padding: 2rem 0 0; margin: 0; border-left: 0; border-top: 1px solid rgb(251 246 224 / .28); }
}

/* Unabhängig: große Zahl links, Text rechts; die Versicherer zeigt das Laufband darüber */
.unabhaengig__innen {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
/* „Wir vergleichen über 90 % aller Versicherer in Deutschland“:
   Schreibschrift links neben und unter der großen Zahl */
.vergleich {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas:
    "vor zahl"
    ".   nach";
  column-gap: 1.25rem;
  align-items: center;
  margin: 0;
}
.vergleich__vor,
.vergleich__nach {
  font-family: var(--schreib);
  font-weight: 600;
  color: var(--creme);
  line-height: 1.1;
  text-shadow: 0 2px 10px rgb(2 44 21 / .45);
}
.vergleich__vor {
  grid-area: vor;
  max-width: 6em;
  font-size: clamp(2rem, 1.4rem + 1.6vw, 2.75rem);
  text-align: right;
  transform: rotate(-6deg);
}
.vergleich__zahl {
  grid-area: zahl;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(5rem, 3rem + 9vw, 10rem);
  line-height: 1;
  color: var(--salbei-hell);
  white-space: nowrap;
}
.vergleich__nach {
  grid-area: nach;
  justify-self: start;
  margin-top: -.15em;
  padding-left: .6em;
  font-size: clamp(1.75rem, 1.3rem + 1.3vw, 2.4rem);
  transform: rotate(-3deg);
}
/* Unter der Zahl: drei kurze Belege, damit die linke Spalte nicht leer ausläuft */
.belege {
  display: grid;
  gap: 0;
  max-width: 34rem;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
}
.belege li {
  display: grid;
  grid-template-columns: minmax(0, 13rem) 1fr;
  gap: .25rem 1.5rem;
  padding: 1rem 0;
  border-top: 1px solid rgb(213 222 199 / .28);
  color: #dfe7d3;
  font-size: 1rem;
  line-height: 1.5;
}
.belege li:last-child { border-bottom: 1px solid rgb(213 222 199 / .28); }
.belege strong { font: 600 1.15rem/1.3 var(--serif); color: var(--creme); }
/* Tablet hochkant: Text unter die Zahl, sonst wird die rechte Spalte zu schmal */
@media (max-width: 60rem) {
  .unabhaengig__innen { grid-template-columns: 1fr; gap: 1.5rem; }
}
@media (max-width: 45rem) {
  .belege li { grid-template-columns: 1fr; }
  .vergleich { grid-template-columns: 1fr; grid-template-areas: "vor" "zahl" "nach"; }
  .vergleich__vor { max-width: none; text-align: left; transform: rotate(-3deg); }
  .vergleich__nach { padding-left: 0; }
}

/* Ablauf: echte Reihenfolge, deshalb nummeriert.
   Stapelkarten: jede Karte bleibt unter der schwebenden Kopfleiste stehen,
   die nächste schiebt sich darüber, die vorherige tritt zurück und blendet aus. */
.schritte {
  list-style: none;
  margin: 3rem 0 0;
  padding: 0;
  display: grid;
  gap: 2rem;
}
.schritt {
  --versatz: 0rem;
  position: sticky;
  top: calc(6.25rem + var(--versatz));
}
/* kleiner Versatz, damit die Kanten der gestapelten Karten sichtbar bleiben */
.schritt:nth-child(2) { --versatz: .9rem; }
.schritt:nth-child(3) { --versatz: 1.8rem; }
.schritt:nth-child(4) { --versatz: 2.7rem; }
.schritt__karte {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  min-height: clamp(20rem, 58vh, 27rem);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  background: linear-gradient(160deg, var(--tanne) 0%, var(--gruen) 60%, var(--gruen-mittel) 100%);
  color: var(--creme);
  border-radius: 14px;
  box-shadow: 0 -10px 30px -18px rgb(2 44 21 / .55), 0 28px 50px -30px rgb(2 44 21 / .7);
  transform-origin: 50% 0;
}
.schritt__text h3 {
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem);
  color: var(--creme);
  margin-bottom: .9rem;
}
.schritt__text p:not(.schritt__etikett) {
  color: #e4ebd8;
  font-size: 1.125rem;
  max-width: 46ch;
}
/* rechts das Foto zum jeweiligen Schritt */
.schritt__bild {
  align-self: stretch;
  min-height: 14rem;
  border-radius: 10px;
  overflow: hidden;
  background: var(--gruen-mittel);
}
.schritt__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Zurücktreten der unteren Karte, gesteuert vom Scrollfortschritt der jeweils nächsten Karte.
   Browser ohne Scroll-Timelines zeigen den Stapel ohne Ausblenden. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .schritte { timeline-scope: --schritt-2, --schritt-3, --schritt-4; }
    .schritt:nth-child(2) { view-timeline-name: --schritt-2; }
    .schritt:nth-child(3) { view-timeline-name: --schritt-3; }
    .schritt:nth-child(4) { view-timeline-name: --schritt-4; }
    .schritt:nth-child(1) .schritt__karte,
    .schritt:nth-child(1) .schritt__karte > * { animation-timeline: --schritt-2; }
    .schritt:nth-child(2) .schritt__karte,
    .schritt:nth-child(2) .schritt__karte > * { animation-timeline: --schritt-3; }
    .schritt:nth-child(3) .schritt__karte,
    .schritt:nth-child(3) .schritt__karte > * { animation-timeline: --schritt-4; }
    .schritt:not(:last-child) .schritt__karte {
      animation-name: zuruecktreten;
      animation-fill-mode: both;
      animation-timing-function: linear;
      animation-range: cover 22% cover 55%;
    }
    .schritt:not(:last-child) .schritt__karte > * {
      animation-name: verblassen;
      animation-fill-mode: both;
      animation-timing-function: linear;
      animation-range: cover 22% cover 50%;
    }
  }
}
@keyframes zuruecktreten { to { transform: scale(.94); filter: brightness(.8); } }
@keyframes verblassen { to { opacity: .12; } }

@media (max-width: 45rem) {
  .schritt { top: calc(5.75rem + var(--versatz) * .6); }
  .schritt__karte { grid-template-columns: 1fr; min-height: 0; gap: 1.25rem; }
  .schritt__bild { order: -1; min-height: 0; aspect-ratio: 16 / 9; }
  .schritt__text p:not(.schritt__etikett) { font-size: 1rem; }
}

/* Kontakt: grünes Band, Formular als helle Tafel */
.kontakt__innen {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.kontakt__info { position: sticky; top: 7rem; }
.kontakt__info p { color: #dfe7d3; max-width: 40ch; }
.kontakt__info .abschnitt__lead { margin-bottom: 1.25rem; }
.kontakt__info .textlink { color: var(--creme); }

.formular {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem 1.25rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--flaeche);
  color: var(--tinte);
  border: 3px solid var(--gruen);
  outline: 1px solid var(--gruen);
  outline-offset: -9px;
  box-shadow: 0 0 0 3px var(--salbei-hell), 0 30px 60px -30px rgb(2 44 21 / .8);
}
.formular > * { grid-column: 1 / -1; }
.formular > .feld--halb { grid-column: span 1; }

fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend {
  font-weight: 600;
  margin-bottom: .6rem;
  padding: 0;
}

.umschalter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.umschalter legend { grid-column: 1 / -1; }
.umschalter label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: .6rem 1rem;
  border: 2px solid var(--akzent);
  font-weight: 600;
  color: var(--akzent);
  cursor: pointer;
  text-align: center;
}
.umschalter label + label { border-left: 0; }
.umschalter input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.umschalter label:has(input:checked) { background: var(--akzent); color: var(--akzent-text); }
.umschalter label:has(input:focus-visible) { outline: 3px solid var(--fokus); outline-offset: 2px; z-index: 1; }

.themen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .4rem 1.25rem;
}
.themen legend { grid-column: 1 / -1; }
.themen label, .zustimmung {
  display: flex;
  gap: .65rem;
  align-items: flex-start;
  cursor: pointer;
  line-height: 1.4;
  padding-block: .2rem;
}
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--gruen);
  width: 1.15rem;
  height: 1.15rem;
  margin: .12rem 0 0;
  flex: none;
}
.immobilie {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  padding: 1.25rem;
  border: 1px solid var(--linie);
  background: var(--creme);
}
.immobilie[hidden] { display: none; }
.immobilie legend { float: left; width: 100%; grid-column: 1 / -1; margin-bottom: 0; font-family: var(--serif); font-size: 1.25rem; color: var(--akzent); }
.immobilie > .feld { grid-column: 1 / -1; }
.immobilie > .feld--halb { grid-column: span 1; }

.feld { display: grid; gap: .4rem; align-content: start; }
.feld > label { font-weight: 600; }
.optional { font-weight: 400; color: var(--text-leise); }

input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: var(--papier);
  border: 1px solid #7f957c;
  border-radius: var(--radius);
  padding: .7rem .85rem;
  min-height: 3rem;
}
textarea { resize: vertical; min-height: 8rem; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 1px; border-color: var(--akzent); }
[aria-invalid="true"] { border-color: var(--fehler) !important; border-width: 2px !important; }

.fehler { color: var(--fehler); font-size: .9375rem; margin: 0; font-weight: 500; }

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

.meldung {
  padding: 1rem 1.25rem;
  border: 1px solid var(--salbei);
  background: var(--bg);
  font-weight: 500;
}
.meldung--fehler { border-color: var(--fehler); color: var(--fehler); }

.knopf--senden { justify-self: start; min-width: 14rem; }
.knopf--senden[aria-busy="true"] { opacity: .7; cursor: progress; }

@media (max-width: 53.99rem) {
  .kontakt__innen { grid-template-columns: 1fr; }
  .kontakt__info { position: static; }
}
@media (max-width: 36rem) {
  .formular, .immobilie, .themen { grid-template-columns: 1fr; }
  .formular > .feld--halb, .immobilie > .feld--halb { grid-column: 1 / -1; }
  .formular { outline-offset: -7px; }
  .knopf--senden { justify-self: stretch; }
  .umschalter label { padding-inline: .5rem; font-size: .9375rem; }
}

/* Fuß */
.fuss {
  padding-block: 2rem 2.5rem;
  background: var(--creme);
  color: var(--tinte);
  font-size: .9375rem;
}
.fuss__innen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
}
.fuss__innen nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.fuss__innen nav a { color: var(--gruen); text-underline-offset: .2em; }
.fuss p { margin: 0; color: var(--text-leise); }

/* Rechtstexte */
.recht { padding-block: 3rem 5rem; }
.recht h1 { font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); color: var(--akzent); margin-bottom: 1.5rem; }
.recht p { max-width: 65ch; }
.recht h2 {
  font-size: 1.375rem;
  color: var(--akzent);
  margin: 2.5rem 0 .75rem;
}
.angaben {
  display: grid;
  grid-template-columns: minmax(10rem, 14rem) 1fr;
  gap: .6rem 1.5rem;
  margin: 0;
  max-width: 50rem;
}
.angaben dt { font-weight: 600; }
.angaben dd { margin: 0; color: var(--text-leise); }
.recht__liste { padding-left: 1.25rem; max-width: 65ch; }
.recht__liste li { margin-bottom: .3rem; }
.recht__stand { margin-top: 2.5rem; color: var(--text-leise); }
.recht__zurueck { margin-top: 1.5rem; }
@media (max-width: 36rem) {
  .angaben { grid-template-columns: 1fr; gap: .15rem; }
  .angaben dd { margin-bottom: .75rem; }
}

/* Kontaktdaten neben dem Formular */
.anschrift { font-style: normal; margin: 1.75rem 0 1.25rem; line-height: 1.7; }
.kontakt__person {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin: 1.75rem 0 1.25rem;
}
.kontakt__person .anschrift { margin: 0; }
.kontakt__person img {
  flex: none;
  width: 8rem;
  height: 8rem;
  border-radius: var(--radius);
  outline: 1px solid var(--salbei-hell);
  outline-offset: 4px;
}
.anschrift strong { font-family: var(--serif); font-size: 1.25rem; color: var(--salbei-hell); }
.anschrift a { color: var(--creme); font-weight: 600; text-underline-offset: .2em; }

/* Leistungsseite */
.leist-held { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3rem, 6vw, 4.5rem); }
.leist-held h1 {
  font-size: clamp(2.3rem, 1.5rem + 3vw, 3.8rem);
  color: var(--akzent);
  max-width: 18ch;
  margin-top: 1rem;
}
.leist-held__lead {
  margin-top: 1.25rem;
  font-size: 1.1875rem;
  color: var(--text-leise);
  max-width: 60ch;
}
.brotkrumen ol {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .9375rem;
  color: var(--text-leise);
}
.brotkrumen li + li::before { content: "/"; margin-right: .5rem; color: var(--salbei); }
.brotkrumen a { color: var(--akzent); text-underline-offset: .2em; }

.leistungsgruppe { scroll-margin-top: 6rem; }

.leist-cta__innen { text-align: left; }
.leist-cta .held__aktionen { margin-top: 1.75rem; }

/* Ortsbezug über der Hero-Überschrift (Teil der H1) */
.held__ort {
  display: block;
  margin-bottom: .6rem;
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--gruen-mittel);
}
.kontakt__ort { font-size: 1.375rem; color: var(--creme); margin: 1.75rem 0 .5rem; }

/* Mega-Menü „Leistungen“ */
.nav__mega {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .25rem 0;
  font: 500 1rem var(--sans);
  color: var(--text);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.nav__mega::after {
  content: "";
  width: .45rem;
  height: .45rem;
  margin-top: -.2rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.nav__mega[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: .2rem; }
.nav__mega:hover,
.nav__mega[aria-expanded="true"],
.nav__mega[aria-current="page"] { border-bottom-color: var(--salbei); }

.mega {
  position: absolute;
  top: calc(100% + .5rem);
  left: 0;
  right: 0;
  max-height: calc(100dvh - 7.5rem);
  overflow: auto;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  background: var(--creme);
  border: 1px solid rgb(25 76 44 / .16);
  border-radius: 14px;
  box-shadow: 0 26px 50px -22px rgb(2 44 21 / .55);
}
.mega[hidden] { display: none; }
.mega__raster {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr .8fr;
  gap: 1.5rem 2.25rem;
}
.mega__titel {
  display: block;
  margin-bottom: .6rem;
  padding-bottom: .45rem;
  font: 700 1.2rem/1.2 var(--serif);
  color: var(--gruen);
  text-decoration: none;
  border-bottom: 2px solid var(--salbei-hell);
}
.mega__titel:hover { color: var(--tanne); border-bottom-color: var(--gruen); }
.mega__gruppe {
  margin: .9rem 0 .25rem;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--gruen-mittel);
  break-after: avoid;
}
.mega__spalte--privat { columns: 2; column-gap: 2rem; }
.mega__spalte--privat .mega__titel { column-span: all; }
.mega__spalte--privat .mega__gruppe:first-of-type { margin-top: .3rem; }
.mega ul { margin: 0; padding: 0; list-style: none; break-inside: avoid; }
.mega li a {
  display: block;
  padding: .28rem 0;
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--tinte);
  text-decoration: none;
}
.mega li a:hover { color: var(--gruen); text-decoration: underline; text-underline-offset: .2em; }
.mega li a[aria-current="page"] { color: var(--gruen); font-weight: 700; }
.mega__alle { display: inline-block; margin-top: 1.25rem; font-weight: 700; }

@media (max-width: 53.99rem) {
  .nav { max-height: calc(100dvh - 7rem); overflow: auto; }
  .nav__mega {
    justify-content: space-between;
    width: 100%;
    padding: .85rem 0;
    border-bottom: 1px solid var(--linie);
  }
  .mega {
    position: static;
    max-height: none;
    overflow: visible;
    padding: .5rem 0 1rem;
    border: 0;
    border-bottom: 1px solid var(--linie);
    border-radius: 0;
    box-shadow: none;
  }
  .mega__raster { grid-template-columns: 1fr; gap: 1.1rem; }
  .mega__spalte--privat { columns: 1; }
  .mega li a { padding: .45rem 0; }
}

/* Leistungs-Unterseiten */
.seite__held { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(2.5rem, 5vw, 3.5rem); }
.seite__held h1 {
  margin-top: 1rem;
  font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.5rem);
  color: var(--akzent);
  max-width: 20ch;
}
.seite__intro {
  margin-top: 1.25rem;
  font-size: 1.1875rem;
  color: var(--text-leise);
  max-width: 62ch;
}
.seite__held .held__aktionen { margin-top: 1.75rem; }
.seite__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 19rem;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  padding-block: clamp(1rem, 3vw, 2rem) clamp(3.5rem, 7vw, 5.5rem);
}
.seite__text { max-width: 46rem; }
.seite__abschnitt + .seite__abschnitt { margin-top: 3rem; }
.seite__abschnitt h2 {
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
  color: var(--akzent);
  margin-bottom: 1rem;
}
.seite__abschnitt > p { font-size: 1.0625rem; color: var(--text); max-width: 68ch; }
.seite__seitenleiste { position: sticky; top: 7rem; }
.seite__karte {
  padding: 1.5rem;
  background: linear-gradient(165deg, var(--tanne), var(--gruen) 60%, var(--gruen-mittel));
  color: var(--creme);
  border-radius: 14px;
  box-shadow: 0 24px 44px -28px rgb(2 44 21 / .7);
}
.seite__karte-titel { font: 700 1.3rem/1.2 var(--serif); margin-bottom: .75rem; }
.seite__karte p { color: #e4ebd8; }
.seite__karte .textlink { color: var(--creme); }
.seite__karte .knopf {
  margin-top: .5rem;
  background: var(--creme);
  color: var(--tanne);
  border-color: var(--creme);
  box-shadow: inset 0 0 0 2px var(--creme), inset 0 0 0 3px var(--tanne);
}
.seite__karte .knopf:hover { background: var(--salbei-hell); border-color: var(--salbei-hell); }



@media (max-width: 60rem) {
  .seite__raster { grid-template-columns: 1fr; }
  .seite__seitenleiste { position: static; }
}
.held__ort { word-spacing: normal; }
.seite__karte-titel,
.mega__titel { word-spacing: .08em; }

.held__zeile { display: block; }

/* Über uns */
.partnerraster__liste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem 3rem;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
}
.partnerraster__liste img {
  height: 2.4rem;
  width: auto;
  max-width: 10rem;
  object-fit: contain;
  filter: brightness(0) invert(97%) sepia(9%) saturate(380%) hue-rotate(5deg) drop-shadow(0 1px 1.5px rgb(2 44 21 / .45));
}

/* FAQ-Seite: aufklappbare Fragen */
.faq-gruppe { scroll-margin-top: 6rem; }
.creme.faq-gruppe { padding-block: clamp(3rem, 6vw, 4.5rem); }

/* ===== Redaktionelles Layout statt Kacheln =====
   Inhalte stehen frei auf der Fläche, getrennt durch feine Linien. Keine Boxen, keine Schatten. */

/* Überschrift-Links in Listen */
.haus__feld h3 a, .vorsorge__paar h3 a, .leistung h3 a, .seite__punkt h3 a { color: inherit; text-decoration: none; }
.haus__feld h3 a:hover, .vorsorge__paar h3 a:hover, .leistung h3 a:hover, .seite__punkt h3 a:hover {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em;
}

/* Textlinks statt Pillen (Sprungmarken, Weiterführendes) */
.sprung ul, .verwandt__liste {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.75rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}
.sprung a, .verwandt__liste a {
  display: inline-block;
  padding: .35rem 0;
  color: var(--gruen);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--salbei-hell);
  text-decoration-thickness: 2px;
  text-underline-offset: .35em;
  transition: text-decoration-color .2s ease;
}
.sprung a:hover, .verwandt__liste a:hover { text-decoration-color: var(--gruen); }

/* Leistungsübersicht: zweispaltige Liste mit Trennlinien */
.leistungen {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(2rem, 5vw, 4.5rem);
}
.leistung {
  scroll-margin-top: 7rem;
  padding: 1.35rem 0 1.5rem;
  border-top: 1px solid var(--linie);
}
.leistung h3 { font-size: 1.35rem; color: var(--gruen); margin-bottom: .45rem; hyphens: auto; }
.leistung p { color: var(--text-leise); max-width: 56ch; }
.gruen .leistung { border-top-color: rgb(251 246 224 / .25); }
.gruen .leistung h3 { color: var(--creme); }
.gruen .leistung p { color: #dfe7d3; }
@media (max-width: 45rem) { .leistungen { grid-template-columns: 1fr; } }

/* Unterseiten: Unterpunkte als Zeilen mit Linie oben */
.seite__punkte {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 2.5rem;
  margin-top: 1.75rem;
}
.seite__punkt { padding: 1.2rem 0 1.3rem; border-top: 1px solid var(--linie); }
.seite__punkt h3 { font-size: 1.25rem; color: var(--gruen); margin-bottom: .4rem; }
.seite__punkt p { color: var(--text-leise); }
@media (max-width: 40rem) { .seite__punkte { grid-template-columns: 1fr; } }

/* FAQ auf Unterseiten: Frage links, Antwort rechts */
.faq__liste { margin-top: 2rem; }
.faq__eintrag {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: .5rem clamp(1.5rem, 4vw, 3.5rem);
  padding: 1.4rem 0;
  border-top: 1px solid rgb(251 246 224 / .25);
}
.faq__eintrag:last-child { border-bottom: 1px solid rgb(251 246 224 / .25); }
.faq__eintrag h3 { font-size: 1.25rem; color: var(--creme); }
.faq__eintrag p { color: #dfe7d3; max-width: 62ch; }
@media (max-width: 45rem) { .faq__eintrag { grid-template-columns: 1fr; } }

/* FAQ-Seite: Akkordeon mit Linien */
.fragen { margin-top: 2rem; max-width: 56rem; border-bottom: 1px solid var(--linie); }
.frage { border-top: 1px solid var(--linie); }
.frage summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.15rem 0;
  cursor: pointer;
  list-style: none;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
  content: "";
  flex: none;
  width: .6rem;
  height: .6rem;
  margin-top: -.3rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .25s ease;
}
.frage[open] summary::after { transform: rotate(-135deg); margin-top: .3rem; }
.frage summary h3 { font-size: 1.25rem; color: var(--gruen); }
.frage summary:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.frage p { padding: 0 0 1.35rem; color: var(--text-leise); max-width: 68ch; }
.frage .textlink { white-space: nowrap; }
.gruen .fragen { border-bottom-color: rgb(251 246 224 / .25); }
.gruen .frage { border-top-color: rgb(251 246 224 / .25); color: var(--creme); }
.gruen .frage summary h3 { color: var(--creme); }
.gruen .frage p { color: #dfe7d3; }
.gruen .frage .textlink { color: var(--salbei-hell); }

/* Zitat ohne Kasten */
.zitat { position: relative; margin: 2.25rem 0 0; padding-top: 1.5rem; max-width: 44rem; }
.zitat::before {
  content: "„";
  position: absolute;
  top: -1.4rem;
  left: -.3rem;
  font: italic 700 5rem/1 var(--serif);
  color: var(--salbei-hell);
}
.zitat p { font: italic 600 clamp(1.4rem, 1.15rem + 1vw, 1.9rem)/1.35 var(--serif); color: var(--gruen); }
.zitat footer { margin-top: .75rem; font-size: .9375rem; color: var(--text-leise); }

/* Ablauf: Schrittangabe in Schreibschrift, ohne Kachel */
.schritt__etikett {
  margin: 0 0 .4rem;
  font-family: var(--schreib);
  font-weight: 600;
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
  line-height: 1.1;
  color: var(--salbei-hell);
}

/* Scroll-Effekte (Klassen setzt js/main.js nur bei erlaubter Bewegung).
   „von-oben“ kehrt die Richtung um, wenn ein Element beim Hochscrollen von oben ins Bild kommt. */
main { overflow-x: clip; }
.bewegt {
  opacity: 0;
  transition:
    opacity .7s ease,
    transform .85s cubic-bezier(.2, .8, .2, 1),
    filter .8s ease;
  transition-delay: var(--verz, 0ms);
}
.bewegt.ohne-uebergang { transition: none; }
.bewegt--links { transform: translateX(-56px); }
.bewegt--rechts { transform: translateX(56px); }
.bewegt--hoch { transform: translateY(32px); }
.bewegt--hoch.von-oben { transform: translateY(-32px); }
.bewegt--zoom { transform: scale(.9); }
.bewegt--unschaerfe { filter: blur(8px); transform: translateY(14px); }
.bewegt--unschaerfe.von-oben { transform: translateY(-14px); }
.bewegt--kippen { transform: perspective(700px) rotateX(16deg) translateY(24px); transform-origin: 50% 0; }
.bewegt--kippen.von-oben { transform: perspective(700px) rotateX(-16deg) translateY(-24px); transform-origin: 50% 100%; }
.bewegt--drehen { transform: rotate(-5deg) translateX(-24px); transform-origin: 0 100%; }
.bewegt.sichtbar { opacity: 1; transform: none; filter: none; }

/* Hero-Überschrift: die zwei Zeilen kommen beim Laden von links und rechts */
@media (prefers-reduced-motion: no-preference) {
  .held__zeile { animation: einflug-links .9s cubic-bezier(.2, .8, .2, 1) both; }
  .held__zeile + .held__zeile { animation-name: einflug-rechts; animation-delay: .15s; }
  .held__ort { animation: einblenden .7s ease-out both; }
  .held__unter, .held__aktionen { animation: einblenden .8s .35s ease-out both; }
}
@keyframes einflug-links { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: none; } }
@keyframes einflug-rechts { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: none; } }

/* 25 Jahre: IHK-Urkunde auf weichem Salbei-Lichtschein */
.jubilaeum.creme {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 7vw, 6rem) clamp(4rem, 8vw, 7rem);
  background:
    radial-gradient(ellipse 42% 60% at 76% 48%, rgb(177 200 158 / .55), rgb(213 222 199 / .25) 55%, transparent 75%),
    var(--creme);
}
.jubilaeum__innen {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.jubilaeum__vor {
  margin: 0 0 .5rem;
  font-family: var(--schreib);
  font-weight: 600;
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
  color: var(--gruen-mittel);
}
.jubilaeum__absatz { margin-top: 1rem; color: var(--text-leise); max-width: 54ch; font-size: 1.0625rem; }
.jubilaeum__urkunde {
  position: relative;
  margin: 0;
  justify-self: center;
  width: min(100%, 380px);
}
.jubilaeum__deko {
  position: absolute;
  z-index: 0;
  /* rechtsbündig knapp hinter dem linken Rand der Urkunde, damit die ganze 25 links daneben sichtbar ist */
  top: 50%;
  right: calc(100% - .5rem);
  translate: 0 -55%;
  font: italic 700 clamp(9rem, 5rem + 11vw, 17rem)/1 var(--serif);
  white-space: nowrap;
  letter-spacing: -.02em;
  color: rgb(83 131 88 / .14);
  pointer-events: none;
  user-select: none;
}
.jubilaeum__urkunde picture { position: relative; z-index: 1; display: block; }
.jubilaeum__urkunde img {
  width: 100%;
  height: auto;
  border-radius: 3px;
  transform: rotate(-2.5deg);
  box-shadow:
    0 2px 6px rgb(2 44 21 / .12),
    0 28px 60px -22px rgb(2 44 21 / .45);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s ease;
}
.jubilaeum__urkunde:hover img {
  transform: rotate(0deg) scale(1.02);
  box-shadow: 0 2px 6px rgb(2 44 21 / .12), 0 36px 70px -24px rgb(2 44 21 / .5);
}
.jubilaeum__urkunde figcaption {
  position: relative;
  z-index: 1;
  margin-top: 1.4rem;
  text-align: center;
  font-size: .9375rem;
  font-style: italic;
  color: var(--text-leise);
}
@media (max-width: 53.99rem) {
  .jubilaeum__innen { grid-template-columns: 1fr; }
  .jubilaeum__urkunde { width: min(100%, 300px); }
  .jubilaeum.creme {
    background:
      radial-gradient(ellipse 80% 40% at 50% 72%, rgb(177 200 158 / .5), transparent 75%),
      var(--creme);
  }
}
@media (prefers-reduced-motion: reduce) {
  .jubilaeum__urkunde img, .jubilaeum__urkunde:hover img { transition: none; }
}

.jubilaeum__text { position: relative; z-index: 1; }
@media (max-width: 53.99rem) {
  .jubilaeum__deko { right: auto; left: 50%; translate: -50% -55%; }
}

/* ===== Shiny-Button für alle Call-to-Action-Knöpfe =====
   Nachbau der React-Komponente „ShinyButton“ (framer-motion) in reinem CSS:
   ein Lichtstreifen wandert über die Variable --x von 100 % nach -100 % (Winkel -75°),
   danach eine Pause, dazu ein glänzender Rand und Eindrücken beim Klick auf 0,95. */
@property --x {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
.knopf {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: background-color .2s ease, color .2s ease, transform .25s cubic-bezier(.3, 1.6, .5, 1), box-shadow .3s ease;
}
/* Lichtstreifen über der Fläche */
.knopf::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(-75deg,
    transparent calc(var(--x) + 20%),
    rgb(255 253 246 / .38) calc(var(--x) + 25%),
    transparent calc(var(--x) + 35%));
}
/* glänzender Rand, der mitläuft */
.knopf::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(-75deg,
    rgb(255 253 246 / .1) calc(var(--x) + 20%),
    rgb(255 253 246 / .75) calc(var(--x) + 25%),
    rgb(255 253 246 / .1) calc(var(--x) + 100%));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* Umrandete Variante: Licht in Salbei statt Creme, damit es auf hellem Grund sichtbar ist */
.knopf--rand::before {
  background: linear-gradient(-75deg,
    transparent calc(var(--x) + 20%),
    rgb(83 131 88 / .22) calc(var(--x) + 25%),
    transparent calc(var(--x) + 35%));
}
.knopf--rand::after {
  background: linear-gradient(-75deg,
    rgb(25 76 44 / .1) calc(var(--x) + 20%),
    rgb(25 76 44 / .6) calc(var(--x) + 25%),
    rgb(25 76 44 / .1) calc(var(--x) + 100%));
}
.knopf:hover { box-shadow: inset 0 0 0 2px var(--tanne), inset 0 0 0 3px var(--akzent-text), 0 10px 24px -12px rgb(2 44 21 / .55); }
.knopf--rand:hover { box-shadow: 0 10px 24px -12px rgb(2 44 21 / .45); }
.knopf:active { transform: scale(.95); }

@media (prefers-reduced-motion: no-preference) {
  .knopf::before, .knopf::after { animation: glanz 3.2s cubic-bezier(.45, .05, .25, 1) infinite; }
  /* leicht versetzt, damit nicht alle Knöpfe gleichzeitig glänzen */
  .knopf--rand::before, .knopf--rand::after { animation-delay: .6s; }
  .knopf--klein::before, .knopf--klein::after { animation-delay: 1.1s; }
  /* Auftritt wie in der Komponente: von 0,8 auf 1 skaliert, federnd */
  .knopf { animation: knopf-auftritt .6s cubic-bezier(.3, 1.6, .5, 1) backwards; }
}
@keyframes glanz {
  0% { --x: 100%; }
  70%, 100% { --x: -100%; }
}
@keyframes knopf-auftritt {
  from { transform: scale(.8); }
  to { transform: scale(1); }
}

/* Unterseiten: Foto zur Leistung verschwommen im Hintergrund des Kopfbereichs.
   Es füllt die rechte Seite und läuft nach links und unten weich in Creme aus,
   damit Schrift, Farbe und Schriftstärke unverändert lesbar bleiben. */
.seite__held--bild {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3rem, 6vw, 4.5rem);
}
.seite__held-bild {
  position: absolute;
  z-index: -1;
  inset: 0 0 0 30%;
  margin: 0;
  pointer-events: none;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, rgb(0 0 0 / .7) 28%, #000 52%),
    linear-gradient(180deg, #000 65%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(90deg, transparent 0%, rgb(0 0 0 / .7) 28%, #000 52%),
    linear-gradient(180deg, #000 65%, transparent 100%);
          mask-composite: intersect;
}
.seite__held-bild picture { display: block; width: 100%; height: 100%; }
.seite__held-bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(7px) saturate(1.05);
  transform: scale(1.08);
  opacity: .87;
}
.seite__held-text { position: relative; max-width: 44rem; }
/* Weicher Creme-Schein, damit Zeilenenden über dem Foto lesbar bleiben */
.seite__held--bild .seite__held-text :is(h1, p, .brotkrumen) { text-shadow: 0 0 .6rem var(--creme), 0 0 1.4rem var(--creme); }
@media (max-width: 60rem) {
  .seite__held-bild {
    inset: 0;
    -webkit-mask-image: linear-gradient(180deg, rgb(0 0 0 / .9) 0%, transparent 92%);
            mask-image: linear-gradient(180deg, rgb(0 0 0 / .9) 0%, transparent 92%);
  }
  .seite__held-bild img { opacity: .57; filter: blur(9px) saturate(1.05); }
}

/* ===== Call-to-Action-Bausteine ===== */

/* Knöpfe auf grünen Flächen: hell gefüllt bzw. heller Rand */
.knopf--hell {
  background: var(--creme);
  color: var(--tanne);
  border-color: var(--creme);
  box-shadow: inset 0 0 0 2px var(--creme), inset 0 0 0 3px var(--tanne);
}
.knopf--hell:hover { background: var(--salbei-hell); border-color: var(--salbei-hell); box-shadow: inset 0 0 0 2px var(--salbei-hell), inset 0 0 0 3px var(--tanne), 0 10px 24px -12px rgb(0 0 0 / .45); }
.knopf--hell::before {
  background: linear-gradient(-75deg, transparent calc(var(--x) + 20%), rgb(83 131 88 / .25) calc(var(--x) + 25%), transparent calc(var(--x) + 35%));
}
.knopf--hell::after {
  background: linear-gradient(-75deg, rgb(8 63 33 / .1) calc(var(--x) + 20%), rgb(8 63 33 / .55) calc(var(--x) + 25%), rgb(8 63 33 / .1) calc(var(--x) + 100%));
}
.knopf--rand-hell {
  background: transparent;
  color: var(--creme);
  border-color: rgb(251 246 224 / .7);
  box-shadow: none;
}
.knopf--rand-hell:hover { background: var(--creme); color: var(--tanne); border-color: var(--creme); }

/* Zeile mit Knöpfen und kurzem Hinweis unter einem Abschnitt */
.cta-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1rem;
  margin-top: 2.5rem;
}
.cta-zeile__hinweis { margin: 0; font-size: .9375rem; color: var(--text-leise); }
.gruen .cta-zeile__hinweis { color: #dfe7d3; }

/* Vertrauenszeile mit Häkchen */
.vertrauen {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.4rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  font-size: .9375rem;
  color: var(--text-leise);
}
.vertrauen li { position: relative; padding-left: 1.4rem; }
.vertrauen li::before {
  content: "";
  position: absolute;
  left: .1rem;
  top: .42em;
  width: .7rem;
  height: .36rem;
  border-left: 2px solid var(--gruen-mittel);
  border-bottom: 2px solid var(--gruen-mittel);
  transform: rotate(-45deg);
}
.gruen .vertrauen { color: #dfe7d3; }
.gruen .vertrauen li::before { border-color: var(--salbei-hell); }

/* Großer Abschluss-Block, z. B. nach Fachtexten und über dem Footer */
.cta-band {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) auto;
  gap: 1.5rem 3rem;
  align-items: center;
  padding: clamp(1.75rem, 4vw, 3rem);
  background:
    radial-gradient(ellipse 60% 120% at 100% 0%, rgb(177 200 158 / .35), transparent 60%),
    linear-gradient(160deg, var(--tanne) 0%, var(--gruen) 60%, var(--gruen-mittel) 100%);
  color: var(--creme);
  border-radius: 14px;
  box-shadow: 0 30px 60px -32px rgb(2 44 21 / .7);
  overflow: hidden;
}
.cta-band .cta-band__titel {
  margin: 0 0 .6rem;
  font: 700 clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem)/1.15 var(--serif);
  color: var(--creme);
  word-spacing: .08em;
}
.cta-band .cta-band__text { margin: 0; color: #e6ecdc; font-weight: 500; max-width: 52ch; }
.cta-band .vertrauen { color: #dfe7d3; margin-top: 1rem; }
.cta-band .vertrauen li::before { border-color: var(--salbei-hell); }
.cta-band__knoepfe { display: flex; flex-direction: column; gap: .75rem; }
.cta-band__knoepfe .knopf { min-width: 15rem; }
.seite__text .cta-band { margin-top: 3.5rem; }
.fuss__cta { padding-top: clamp(2.5rem, 5vw, 4rem); }
@media (max-width: 45rem) {
  .cta-band { grid-template-columns: 1fr; }
  .cta-band__knoepfe .knopf { min-width: 0; width: 100%; }
}
/* In der schmalen Textspalte der Unterseiten (Tablet quer, neben der Seitenleiste):
   Knöpfe unter den Text, damit der Text nicht zur schmalen Säule wird */
.seite__text { container-type: inline-size; }
@container (max-width: 44rem) {
  .cta-band { grid-template-columns: 1fr; }
  .cta-band__knoepfe { flex-direction: row; flex-wrap: wrap; }
  .cta-band__knoepfe .knopf { min-width: 0; flex: 1 1 14rem; }
}

/* Feste Kontaktleiste unten auf dem Handy */
.mobil-cta { display: none; }
@media (max-width: 53.99rem) {
  .mobil-cta {
    position: fixed;
    z-index: 19;
    left: .5rem;
    right: .5rem;
    bottom: calc(.5rem + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: .5rem;
    padding: .5rem;
    background: color-mix(in srgb, var(--creme) 90%, transparent);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    border: 1px solid rgb(25 76 44 / .16);
    border-radius: 14px;
    box-shadow: 0 -10px 30px -16px rgb(2 44 21 / .45);
  }
  .mobil-cta .knopf { width: 100%; min-height: 2.9rem; padding-inline: .75rem; font-size: .9375rem; }
  body { padding-bottom: 5.25rem; }
}

/* ===== Einwilligungs-Hinweis (Cookie-Banner) =====
   Ablehnen und Akzeptieren sehen bewusst gleich aus, damit keine Wahl bevorzugt wird. */
.einwilligung {
  position: fixed;
  z-index: 40;
  left: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  width: min(34rem, calc(100% - 2rem));
  padding: 1.25rem 1.25rem 1.1rem;
  background: var(--papier);
  color: var(--tinte);
  border: 1px solid rgb(25 76 44 / .18);
  border-radius: 14px;
  box-shadow: 0 24px 60px -24px rgb(2 44 21 / .55);
}
.einwilligung[hidden] { display: none; }
.einwilligung:focus { outline: none; }
.einwilligung:focus-visible { outline: 3px solid var(--salbei); outline-offset: 3px; }
.einwilligung__titel { margin: 0 0 .4rem; font: 600 1.35rem/1.2 var(--serif); color: var(--gruen); }
.einwilligung p { margin: 0; font-size: .9375rem; line-height: 1.55; }
.einwilligung__knoepfe {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
  margin-top: 1rem;
}
.einwilligung__knoepfe .knopf { width: 100%; min-height: 2.9rem; padding-inline: .75rem; font-size: .9375rem; }
.einwilligung__knoepfe .knopf--rand { grid-column: 1 / -1; }
@media (max-width: 30rem) {
  .einwilligung { left: .5rem; bottom: calc(.5rem + env(safe-area-inset-bottom)); width: calc(100% - 1rem); }
  .einwilligung__knoepfe { grid-template-columns: 1fr; }
}

/* „Cookie-Einstellungen“ im Fuß: Knopf, der wie die Links daneben aussieht */
.fuss__einstellungen {
  padding: 0;
  border: 0;
  background: none;
  color: var(--gruen);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
}
.fuss__einstellungen:hover { color: var(--tanne); }