/* ==========================================================================
   Entwurf B „Im Gespräch“
   Felix als Person im Mittelpunkt: großes Porträt, Ich-Ansprache als Dialog,
   ruhige weiße Flächen im Wechsel mit Tiefblau-Anthrazit, Rot sparsam als
   gezogener Faden unter Schlüsselbegriffen.
   ========================================================================== */

/* Schriften – selbst gehostet (SIL Open Font License) */
@font-face { font-family: "Literata"; font-style: normal; font-weight: 500; font-display: swap; src: url("../../assets/fonts/literata-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Literata"; font-style: normal; font-weight: 600; font-display: swap; src: url("../../assets/fonts/literata-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap; src: url("../../assets/fonts/source-sans-3-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap; src: url("../../assets/fonts/source-sans-3-latin-600-normal.woff2") format("woff2"); }

:root {
  --weiss: #FFFFFF;
  --papier: #F6F7F9;
  --tinte: #1B2433;
  --tinte-tief: #141B27;
  --tinte-hell: #253046;
  --grau: #5E616B;
  --nebel: #C9CBD1;
  --linie: #D9DDE4;
  --linie-dunkel: rgba(255, 255, 255, 0.14);
  --rot: #C0282D;
  --rot-dunkel: #A21F24;
  --rot-hell: #EF5A5F;
  --rot-zart: #F6E3E3;

  --serif: "Literata", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;

  --kopf-h: 4rem;
  --rund: 10px;
  --faden-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M1.5 9 C 6 1, 9 12, 13.5 5 S 19.5 2, 22.5 4' fill='none' stroke='%23C0282D' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
@media (min-width: 48rem) { :root { --kopf-h: 4.75rem; } }

/* Grundlagen */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf-h) + 1rem); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--weiss); color: var(--tinte); font: 400 1.0625rem/1.65 var(--sans); }
@media (min-width: 48rem) { body { font-size: 1.125rem; } }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-color: var(--rot); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--rot-dunkel); }
:focus-visible { outline: 2px solid var(--rot); outline-offset: 3px; border-radius: 3px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.15; margin: 0; text-wrap: balance; }
p, ol, ul, dl, figure, blockquote { margin: 0; }
strong { font-weight: 600; }

.springen { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--tinte); color: #fff; padding: 0.6rem 1rem; border-radius: 6px; text-decoration: none; }
.springen:focus { top: 1rem; color: #fff; }

.rahmen { max-width: 72rem; margin-inline: auto; padding-inline: 1.25rem; }
.rahmen--schmal { max-width: 52rem; }
@media (min-width: 48rem) { .rahmen { padding-inline: 2rem; } }

/* Platzhalter – gut sichtbar */
.platzhalter {
  background: var(--rot-zart); color: var(--rot-dunkel);
  font-family: var(--sans); font-weight: 600; font-size: 0.85em;
  padding: 0.05em 0.4em; border-radius: 4px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.abschnitt--dunkel .platzhalter { background: rgba(239, 90, 95, 0.2); color: #FFD6D7; }

/* Entwurfsleiste (nur Entwurf) */
.entwurfsleiste {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.25rem 1rem;
  background: var(--tinte); color: #fff; font: 400 0.85rem/1.4 var(--sans); padding: 0.45rem 1rem;
}
.entwurfsleiste nav { display: flex; gap: 0.9rem; }
.entwurfsleiste a { color: #fff; text-decoration-color: rgba(255,255,255,.4); }
.entwurfsleiste a:hover { color: #fff; text-decoration-color: var(--rot-hell); }
.entwurfsleiste a[aria-current="page"] { text-decoration-color: var(--rot-hell); text-decoration-thickness: 2px; }

/* --------------------------------------------------------------------------
   Kopfzeile
   -------------------------------------------------------------------------- */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: saturate(1.4) blur(8px); backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--linie);
}
.kopf__innen {
  position: relative; max-width: 72rem; margin-inline: auto;
  min-height: var(--kopf-h); padding: 0.35rem 1.25rem;
  display: flex; align-items: center; gap: 0.5rem;
}
@media (min-width: 48rem) { .kopf__innen { padding-inline: 2rem; } }
.marke { margin-right: auto; margin-left: -0.55rem; flex: none; }
.marke img { height: 2.9rem; width: auto; }
@media (min-width: 48rem) { .marke img { height: 3.4rem; } }

.hauptnav { display: flex; flex-wrap: wrap; gap: 0.15rem 1.4rem; font-size: 1rem; }
.hauptnav a { text-decoration: none; color: var(--tinte); padding-block: 0.35rem; position: relative; }
.hauptnav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.1rem; height: 2px; background: var(--rot);
  transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease;
}
.hauptnav a:hover::after, .hauptnav a.ist-aktiv::after { transform: scaleX(1); }
@media (min-width: 62rem) { .hauptnav { margin-right: 1rem; } }

/* Ohne JavaScript: Navigation als Zeile; mit JavaScript: Menü */
@media (max-width: 61.99rem) {
  .kopf__innen { flex-wrap: wrap; }
  .hauptnav { order: 3; width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 0.35rem; }
  .hauptnav a { white-space: nowrap; }
  .js .kopf__innen { flex-wrap: nowrap; }
  .js .hauptnav {
    position: absolute; left: 0; right: 0; top: 100%;
    display: none; flex-direction: column; gap: 0;
    background: var(--weiss); border-bottom: 1px solid var(--linie);
    padding: 0.75rem 1.25rem 1.25rem;
    box-shadow: 0 18px 30px -18px rgba(27, 36, 51, 0.25);
  }
  .js .hauptnav.ist-offen { display: flex; }
  .js .hauptnav a { font-family: var(--serif); font-weight: 500; font-size: 1.3rem; padding: 0.75rem 0; border-bottom: 1px solid var(--linie); }
  .js .hauptnav a:last-child { border-bottom: 0; }
  .js .hauptnav a::after { display: none; }
  .js .menue-knopf { display: inline-grid; }
}
.menue-knopf {
  display: none; place-items: center;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  border: 1.5px solid var(--tinte); background: transparent; cursor: pointer; color: var(--tinte);
}
.menue-knopf__linien, .menue-knopf__linien::before, .menue-knopf__linien::after {
  display: block; width: 1.05rem; height: 2px; background: currentColor; border-radius: 1px; position: relative;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.menue-knopf__linien::before, .menue-knopf__linien::after { content: ""; position: absolute; left: 0; }
.menue-knopf__linien::before { top: -6px; }
.menue-knopf__linien::after { top: 6px; }
.menue-knopf[aria-expanded="true"] .menue-knopf__linien { background: transparent; }
.menue-knopf[aria-expanded="true"] .menue-knopf__linien::before { transform: translateY(6px) rotate(45deg); background: var(--rot); }
.menue-knopf[aria-expanded="true"] .menue-knopf__linien::after { transform: translateY(-6px) rotate(-45deg); background: var(--rot); }

/* --------------------------------------------------------------------------
   Knöpfe
   -------------------------------------------------------------------------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3rem; padding: 0.7rem 1.4rem;
  font: 600 1.02rem/1.2 var(--sans); text-decoration: none; text-align: center;
  border-radius: 999px; border: 2px solid transparent;
}
.knopf--haupt { background: var(--rot); color: #fff; }
.knopf--haupt:hover { background: var(--rot-dunkel); color: #fff; }
.knopf--leise { color: var(--tinte); padding-inline: 0.25rem; border-radius: 4px; }
.knopf--leise:hover { color: var(--rot-dunkel); text-decoration: underline; text-decoration-color: var(--rot); }
.knopf--gross { font-size: 1.1rem; min-height: 3.5rem; padding-inline: 2rem; }
.knopf--kopf { min-height: 2.75rem; width: 2.75rem; padding: 0; }
.knopf--kopf .knopf__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 62rem) {
  .knopf--kopf { width: auto; padding: 0.5rem 1.2rem; }
  .knopf--kopf .icon { display: none; }
  .knopf--kopf .knopf__text { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}

/* Augenbraue (kleine Überzeile) */
.augenbraue { font: 600 0.8rem/1.4 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--rot); }
.augenbraue--hell { color: var(--rot-hell); }

/* Gezogener Faden unter Schlüsselbegriffen */
.markiert { position: relative; white-space: nowrap; }
.unterstrich {
  position: absolute; left: -2%; width: 104%; bottom: -0.16em; height: 0.34em;
  color: var(--rot); overflow: visible; pointer-events: none;
}
.abschnitt--dunkel .unterstrich { color: var(--rot-hell); }

/* Avatar mit Initialen */
.avatar {
  flex: none; display: inline-grid; place-items: center;
  width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--tinte); color: #fff;
  font: 600 0.95rem/1 var(--serif); letter-spacing: 0.02em;
  box-shadow: 0 0 0 2px var(--weiss), 0 0 0 3.5px var(--rot);
}
.avatar--klein { width: 2.25rem; height: 2.25rem; font-size: 0.75rem; box-shadow: 0 0 0 2px var(--tinte), 0 0 0 3px var(--rot-hell); background: var(--weiss); color: var(--tinte); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero { padding: 2.25rem 0 4rem; overflow: hidden; }
@media (min-width: 62rem) { .hero { padding: 4.5rem 0 6.5rem; } }
.hero__raster { display: grid; gap: 2.75rem; align-items: center; }
@media (min-width: 62rem) { .hero__raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4.5rem; } }
.hero__text { display: grid; gap: 1.35rem; }
.hero__person { display: flex; align-items: center; gap: 0.85rem; font-size: 0.95rem; line-height: 1.35; color: var(--grau); }
.hero__person strong { color: var(--tinte); font-size: 1.05rem; }
.hero .augenbraue { display: none; }
@media (min-width: 62rem) {
  .hero__person { display: none; }
  .hero .augenbraue { display: block; }
}
.hero h1 { font-size: clamp(2.3rem, 1.5rem + 3vw, 3.7rem); line-height: 1.08; letter-spacing: -0.02em; }
.lead { font-size: 1.15rem; color: var(--grau); max-width: 36rem; }
@media (min-width: 48rem) { .lead { font-size: 1.22rem; } }
.lead--betont { font: 500 1.22rem/1.45 var(--serif); color: var(--tinte); }
@media (min-width: 48rem) { .lead--betont { font-size: 1.38rem; } }
.aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-top: 0.25rem; }
.fakten { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; font-size: 0.95rem; color: var(--grau); }
.fakten li { display: inline-flex; align-items: center; gap: 0.45rem; }
.fakten li::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--rot); }

.hero__bild { position: relative; max-width: 26rem; justify-self: center; width: 100%; }
@media (min-width: 62rem) { .hero__bild { max-width: none; } }
.hero__bild figcaption { margin-top: 0.85rem; font-size: 0.95rem; color: var(--grau); }

.bildplatzhalter {
  aspect-ratio: 4 / 5; width: 100%;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 0.45rem;
  padding: 1.25rem;
  background: repeating-linear-gradient(135deg, transparent 0 12px, rgba(27, 36, 51, 0.05) 12px 13px), var(--papier);
  border: 1px dashed #B9BFCA; border-radius: var(--rund);
  color: var(--grau);
}
.bildplatzhalter__titel { font-weight: 600; font-size: 0.95rem; color: var(--rot-dunkel); }
.bildplatzhalter__text { font-size: 0.88rem; line-height: 1.45; max-width: 22rem; }
.bildplatzhalter--dunkel {
  background: repeating-linear-gradient(135deg, transparent 0 12px, rgba(255, 255, 255, 0.05) 12px 13px), var(--tinte-hell);
  border-color: rgba(255, 255, 255, 0.25); color: var(--nebel);
}
.bildplatzhalter--dunkel .bildplatzhalter__titel { color: #FFD6D7; }

/* --------------------------------------------------------------------------
   Abschnitte
   -------------------------------------------------------------------------- */
.abschnitt { padding-block: 4.5rem; }
@media (min-width: 62rem) { .abschnitt { padding-block: 7rem; } }
.abschnitt--papier { background: var(--papier); }
.abschnitt--dunkel { background: var(--tinte); color: #fff; }
.abschnitt__kopf { display: grid; gap: 0.8rem; max-width: 44rem; margin-bottom: 2.5rem; }
@media (min-width: 62rem) { .abschnitt__kopf { margin-bottom: 3.5rem; } }
.abschnitt__kopf--mitte { text-align: center; margin-inline: auto; justify-items: center; }
.abschnitt h2 { font-size: clamp(1.85rem, 1.3rem + 2.3vw, 2.85rem); letter-spacing: -0.015em; }
.einleitung { font-size: 1.1rem; color: var(--grau); }

/* Leistungen */
.leistungen { display: grid; gap: 1.5rem; }
@media (min-width: 56rem) { .leistungen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; } }
.leistung {
  display: grid; gap: 0.9rem; align-content: start;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--rund);
  padding: 1.75rem 1.5rem;
}
@media (min-width: 48rem) { .leistung { padding: 2.5rem 2.25rem; } }
.leistung::before { content: ""; width: 3rem; height: 1.5rem; background: var(--faden-icon) no-repeat left center / contain; }
.leistung h3 { font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.6rem); }
.leistung__unterzeile { color: var(--grau); font-size: 1rem; margin-top: -0.4rem; }
.liste { list-style: none; padding: 0; display: grid; gap: 0.85rem; margin-top: 0.4rem; padding-top: 1.1rem; border-top: 1px solid var(--linie); }
.liste li { position: relative; padding-left: 2rem; }
.liste li::before { content: ""; position: absolute; left: 0; top: 0.42em; width: 1.3rem; height: 0.65rem; background: var(--faden-icon) no-repeat center / contain; }

/* Grundsatz als Zitat */
.grundsatz { padding-top: 4.5rem; text-align: center; }
@media (min-width: 62rem) { .grundsatz { padding-top: 6.5rem; } }
.grundsatz .rahmen { display: grid; gap: 1.25rem; justify-items: center; }
.grundsatz__zitat { font: 500 clamp(1.45rem, 1.1rem + 1.7vw, 2.25rem)/1.35 var(--serif); letter-spacing: -0.01em; text-wrap: balance; }
.grundsatz__text { color: var(--grau); max-width: 36rem; }

/* Für wen – als Gespräch */
.gespraech { display: grid; gap: 2.25rem; }
.gespraech__paar { display: grid; gap: 0.75rem; }
.blase { max-width: 92%; padding: 1rem 1.25rem; border-radius: 20px; }
@media (min-width: 48rem) { .blase { max-width: 78%; padding: 1.1rem 1.5rem; } }
.blase--sie {
  justify-self: start;
  background: var(--weiss); border: 1px solid var(--linie); border-bottom-left-radius: 6px;
  font: 500 1.15rem/1.4 var(--serif);
}
@media (min-width: 48rem) { .blase--sie { font-size: 1.3rem; } }
.blase--ich {
  justify-self: end;
  display: flex; align-items: flex-start; gap: 0.9rem;
  background: var(--tinte); color: #fff; border-bottom-right-radius: 6px;
}
.blase--ich p { color: #E9EBEF; }

/* Ablauf */
.schritte { list-style: none; padding: 0; display: grid; gap: 2.25rem; counter-reset: schritt; }
.schritt { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: 1.25rem; row-gap: 0.4rem; align-content: start; }
.schritt__nr {
  grid-row: 1 / span 2;
  width: 3rem; height: 3rem; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px solid var(--tinte); background: var(--weiss);
  font: 600 1.15rem/1 var(--serif); position: relative; z-index: 1;
}
.schritt h3 { font-size: 1.25rem; padding-top: 0.6rem; }
.schritt p { color: var(--grau); grid-column: 2; }
.schritt:not(:last-child)::before { /* Verbindungslinie */
  content: ""; position: absolute; left: calc(1.5rem - 1px); top: 3rem; bottom: -2.25rem; width: 2px;
  background: var(--linie);
}
.schritt:not(:last-child)::after {
  content: ""; position: absolute; left: calc(1.5rem - 1px); top: 3rem; bottom: -2.25rem; width: 2px;
  background: var(--rot); transform-origin: top; transform: scaleY(1);
}
@media (min-width: 56rem) {
  .schritte { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
  .schritt { grid-template-columns: minmax(0, 1fr); row-gap: 0.6rem; }
  .schritt__nr { grid-row: auto; margin-bottom: 0.75rem; }
  .schritt h3 { padding-top: 0; }
  .schritt p { grid-column: auto; }
  .schritt:not(:last-child)::before, .schritt:not(:last-child)::after {
    left: 3.75rem; right: -1.25rem; top: calc(1.5rem - 1px); bottom: auto; width: auto; height: 2px;
    transform-origin: left;
  }
}

/* Über mich (dunkel) */
.person { display: grid; gap: 2.75rem; }
@media (min-width: 62rem) { .person { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 5rem; align-items: start; } }
.person__bild { position: relative; max-width: 24rem; }
@media (min-width: 62rem) { .person__bild { max-width: none; position: sticky; top: calc(var(--kopf-h) + 2rem); } }
.person__text { display: grid; gap: 1.1rem; }
.person__text h2 { margin-bottom: 0.25rem; }
.person__intro { font: 500 1.25rem/1.5 var(--serif); color: #fff; }
@media (min-width: 48rem) { .person__intro { font-size: 1.4rem; } }
.person__text > p:not(.person__intro):not(.augenbraue) { color: var(--nebel); }
.werdegang__titel { font-size: 1.2rem; margin-top: 1.5rem; }
.werdegang { list-style: none; padding: 0; border-top: 1px solid var(--linie-dunkel); }
.werdegang li { display: grid; gap: 0.25rem; padding: 1rem 0; border-bottom: 1px solid var(--linie-dunkel); }
@media (min-width: 40rem) { .werdegang li { grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1.25rem; } }
.werdegang__zeit { color: var(--nebel); font-size: 0.95rem; }
.werdegang__inhalt { color: var(--nebel); }
.werdegang__inhalt strong { display: block; color: #fff; }

/* Kundenstimmen */
.stimmen { list-style: none; padding: 0; display: grid; gap: 1.25rem; }
@media (min-width: 56rem) { .stimmen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }
.stimme {
  display: grid; gap: 1rem; align-content: start;
  background: var(--weiss); border-radius: var(--rund); padding: 1.75rem;
  border: 1px solid var(--linie);
}
.stimme::before { content: "„"; font: 600 4rem/0.6 var(--serif); color: var(--rot); height: 1.6rem; }
.stimme blockquote { font: 500 1.15rem/1.5 var(--serif); }
.stimme__quelle { font-size: 0.95rem; color: var(--grau); }

/* Vorträge */
.vortraege { list-style: none; padding: 0; border-top: 1px solid var(--linie); }
.vortraege li { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 0.2rem 1.5rem; padding: 1.15rem 0; border-bottom: 1px solid var(--linie); }
.vortraege__jahr { grid-row: span 2; color: var(--grau); }
.vortraege__titel { font: 500 1.15rem/1.4 var(--serif); }
.vortraege__anlass { color: var(--grau); }

/* Häufige Fragen */
.faq-raster { display: grid; gap: 0; }
@media (min-width: 62rem) {
  .faq-raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; align-items: start; }
  .faq-raster__kopf { position: sticky; top: calc(var(--kopf-h) + 2rem); }
}
.faq { display: grid; gap: 0.75rem; }
.faq details { background: var(--weiss); border-radius: var(--rund); border: 1px solid var(--linie); }
.faq summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.1rem 1.25rem; font-weight: 600; font-size: 1.06rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none; display: grid; place-items: center;
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  border: 1.5px solid var(--rot); color: var(--rot);
  font: 500 1.2rem/1 var(--sans);
  transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); background: var(--rot); color: #fff; }
.faq details p { color: var(--grau); padding: 0 1.25rem 1.3rem; }

/* Kontakt (dunkel) */
.kontakt__raster { display: grid; gap: 2.75rem; }
@media (min-width: 62rem) { .kontakt__raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4.5rem; align-items: center; } }
.kontakt__text { display: grid; gap: 1.25rem; justify-items: start; }
.kontakt h2 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.2rem); }
.kontakt__lead { font-size: 1.2rem; color: var(--nebel); max-width: 34rem; }
.hinweis { font-size: 0.95rem; color: var(--nebel); max-width: 34rem; }
.kontaktliste { background: var(--tinte-hell); border-radius: var(--rund); padding: 0.5rem 1.5rem; }
.kontaktliste > div { display: grid; gap: 0.15rem; padding: 0.95rem 0; border-bottom: 1px solid var(--linie-dunkel); }
.kontaktliste > div:last-child { border-bottom: 0; }
.kontaktliste > div[hidden] { display: none; }
.kontaktliste dt { font: 600 0.75rem/1.4 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--nebel); }
.kontaktliste dd { margin: 0; font-weight: 600; font-size: 1.08rem; color: #fff; }
.kontaktliste a { color: #fff; text-decoration-color: var(--rot-hell); }
.kontaktliste a:hover { color: #FFD6D7; }

/* --------------------------------------------------------------------------
   Fußzeile
   -------------------------------------------------------------------------- */
.fuss { background: var(--tinte-tief); color: var(--nebel); }
.fuss__innen { display: grid; gap: 0.8rem; padding-block: 2.5rem 3rem; font-size: 0.95rem; }
.fuss__logo { height: 3.2rem; width: auto; margin-left: -0.6rem; }
.fuss nav { display: flex; gap: 1.25rem; }
.fuss a { color: #fff; text-decoration-color: var(--rot-hell); }
.fuss a:hover { color: #FFD6D7; }
.fuss__hinweis { font-size: 0.8rem; opacity: 0.8; }

/* --------------------------------------------------------------------------
   Bewegung – nur wenn erwünscht und mit JavaScript
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .knopf, .faq details { transition: background-color 0.2s, color 0.2s, border-color 0.2s; }

  .js .einblenden { opacity: 0; transform: translateY(16px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .js .einblenden.ist-sichtbar { opacity: 1; transform: none; }

  .js .unterstrich { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(0.65, 0, 0.35, 1) 0.35s; }
  .js .ist-sichtbar .unterstrich, .js .markiert.ist-sichtbar .unterstrich { clip-path: inset(0 0 0 0); }

  .js .schritt:not(:last-child)::after { transform: scaleY(0); transition: transform 0.9s ease 0.3s; }
  .js .schritt.ist-sichtbar:not(:last-child)::after { transform: scaleY(1); }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 56rem) {
  .js .schritt:not(:last-child)::after { transform: scaleX(0); }
  .js .schritt.ist-sichtbar:not(:last-child)::after { transform: scaleX(1); }
  .js .schritt:nth-child(2)::after { transition-delay: 0.6s; }
  .js .schritt:nth-child(3)::after { transition-delay: 0.9s; }
}