/* John & Martin Umzüge, statische HTML-Seite. Marke: Navy und Gold, Newsreader und Montserrat. */

@font-face { font-family: "Newsreader"; src: url("/assets/fonts/newsreader.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/assets/fonts/newsreader-italic.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("/assets/fonts/montserrat.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --navy: #00276a;
  --tief: #0b1a3a;
  --gold: #b48634;
  --gold-hell: #ce9e4e;
  --gold-text: #8a6420;
  --grund: #ffffff;
  --flaeche: #f3f6fa;
  --flaeche-2: #e9eef5;
  --karte: #ffffff;
  --text: #1c2435;
  --text-2: #4a5568;
  --linie: #d6dde7;
  --titel: var(--navy);
  --akzent-text: var(--gold-text);
  --schatten: 0 24px 48px -28px rgba(11, 26, 58, 0.4);
  --serif: "Newsreader", Georgia, serif;
  --sans: "Montserrat", system-ui, sans-serif;
  --r: 16px;
  --r-klein: 10px;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --abstand: clamp(80px, 9vw, 128px);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #0b1424;
    --flaeche: #101c31;
    --flaeche-2: #16243d;
    --karte: #142139;
    --text: #e6ebf3;
    --text-2: #aeb9cb;
    --linie: #26354f;
    --titel: #f2f5fa;
    --akzent-text: var(--gold-hell);
    --schatten: 0 24px 48px -28px rgba(0, 0, 0, 0.7);
  }
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; scroll-padding-top: 96px; scrollbar-color: var(--navy) var(--flaeche-2); }
@media (pointer: fine) { html { overscroll-behavior: none; } }
body { background: var(--grund); color: var(--text); font: 400 18px/1.65 var(--sans); text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
ul, ol { padding: 0; list-style: none; }
button, a, summary, label { touch-action: manipulation; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; font-size: 17px; color: var(--text); caret-color: var(--gold); }
::selection { background: var(--gold-hell); color: var(--tief); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }
.i { width: 1.2em; height: 1.2em; fill: currentColor; flex: none; }

.wrap { width: min(1240px, 100% - 2 * clamp(16px, 4vw, 48px)); margin-inline: auto; }
.skip { position: absolute; left: 16px; top: -80px; z-index: 100; background: var(--gold); color: var(--tief); padding: 12px 20px; border-radius: 8px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }

.titel { font: 400 clamp(34px, 3.8vw, 54px)/1.1 var(--serif); letter-spacing: -0.02em; color: var(--titel); text-wrap: balance; max-width: 20em; padding-bottom: 4px; }
.titel em { font-style: italic; color: var(--akzent-text); }
.vorspann { margin-top: 18px; max-width: 40em; color: var(--text-2); font-size: 19px; }

/* Knöpfe: eine Form, eine Absicht */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 30px; border-radius: 999px; background: var(--gold); color: var(--tief); font: 700 17px/1.2 var(--sans); text-decoration: none; text-align: center; white-space: nowrap; user-select: none; -webkit-user-select: none; transition: background-color 0.2s var(--ease), transform 0.12s var(--ease); }
.knopf:active { transform: scale(0.97); }
.knopf--klein { min-height: 46px; padding: 0 22px; font-size: 15px; }
.knopf--zweit { background: transparent; color: var(--titel); box-shadow: inset 0 0 0 1.5px var(--linie); }
@media (hover: hover) and (pointer: fine) {
  .knopf:hover { background: var(--gold-hell); }
  .knopf--zweit:hover { background: var(--flaeche); }
}

/* Kopf */
.topbar { background: var(--tief); color: rgba(255, 255, 255, 0.86); font-size: 15px; font-weight: 500; }
.topbar__in { display: flex; justify-content: flex-end; align-items: center; gap: 20px; min-height: 42px; }
.topbar__trenn { width: 1px; height: 18px; background: rgba(255, 255, 255, 0.3); }
.topbar a { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 700; text-decoration: none; }
.kopf { position: sticky; top: 0; z-index: 40; background: var(--grund); border-bottom: 1px solid var(--linie); }
.kopf__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; }
.logo img { width: 150px; }
@media (prefers-color-scheme: dark) { .logo img { content: url("/assets/img/logo-hell.png"); } }
.nav { display: flex; align-items: center; gap: clamp(16px, 2vw, 30px); font-size: 15px; font-weight: 600; }
.nav a:not(.knopf) { text-decoration: none; color: var(--text); padding-block: 8px; background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0 2px no-repeat; transition: background-size 0.25s var(--ease); }
@media (hover: hover) and (pointer: fine) { .nav a:not(.knopf):hover { background-size: 100% 2px; } }
.menue { display: none; width: 48px; height: 48px; place-items: center; }
.menue span, .menue span::before, .menue span::after { display: block; width: 24px; height: 2px; background: var(--titel); position: relative; transition: transform 0.2s var(--ease); }
.menue span::before, .menue span::after { content: ""; position: absolute; left: 0; }
.menue span::before { top: -7px; }
.menue span::after { top: 7px; }
.menue[aria-expanded="true"] span { background: transparent; }
.menue[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.menue[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }

/* Freigestellte echte Fotos: JPEG auf Navy plus Alpha-Maske (funktioniert in allen Browsern, klein) */
.frei { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }

/* Hero: der Film aus dem Entwurf. Ein echtes Wohnzimmer wird zur Zeichnung, die Möbel bekommen Folie,
   unsere Kartons kommen dazu. Der Film läuft einmal und bleibt auf dem letzten Bild stehen.
   Text sitzt links auf der hellen Wand, ohne Blur. Ohne Bewegung oder ohne JS: das letzte Bild als Foto. */
.hero { position: relative; isolation: isolate; overflow: hidden; background: #efe7df; color: #0b1a3a; }
.hero__buehne { position: absolute; inset: 0; z-index: -1; }
.hero__buehne img, .hero__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.hero__film { opacity: 0; transition: opacity 0.4s var(--ease); }
.hero__film.laeuft { opacity: 1; }
.hero__buehne::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(244, 238, 231, 0.95) 0%, rgba(244, 238, 231, 0.85) 26%, rgba(244, 238, 231, 0.3) 38%, rgba(244, 238, 231, 0) 46%); }
.hero__in { display: grid; align-items: center; min-height: clamp(560px, min(calc(100svh - 118px), 52vw), 820px); }
.hero__text { max-width: 540px; padding-block: clamp(48px, 6vw, 96px); }
.hero h1 { font: 400 clamp(38px, 3.7vw, 58px)/1.06 var(--serif); letter-spacing: -0.026em; color: var(--navy); text-wrap: balance; padding-bottom: 4px; }
.hero h1 em { display: block; margin-top: 10px; font-style: italic; color: var(--gold-text); }
.hero__lead { margin-top: 22px; font-size: 19px; color: #3a4459; max-width: 28em; }
.hero__aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 32px; }
.hero__tel { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; color: var(--navy); text-decoration: none; }
.hero__pause { position: absolute; right: clamp(16px, 3vw, 32px); bottom: clamp(16px, 3vw, 28px); width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.82); color: var(--tief); box-shadow: 0 0 0 1px rgba(11, 26, 58, 0.1); transition: transform 0.12s var(--ease), background-color 0.2s var(--ease); }
.hero__pause:active { transform: scale(0.94); }
.hero__pause .i { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) { .hero__pause:hover { background: #fff; } }

/* Belege direkt unter dem Hero, nicht im Hero */
.belege { background: var(--grund); border-bottom: 1px solid var(--linie); }
.belege__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; min-height: 76px; padding-block: 16px; font-size: 15px; font-weight: 600; color: var(--text-2); }
.belege__in li { display: inline-flex; align-items: center; gap: 10px; }
.belege__in .i { width: 20px; height: 20px; color: var(--akzent-text); }
.belege a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.belege b { color: var(--titel); font-size: 17px; }
.sterne { display: inline-flex; gap: 2px; color: #e7a614; }
.sterne .i { width: 16px; height: 16px; }

/* Weg des Umzugs: links die Schritte, rechts eine Bühne mit echten Motiven, die beim Scrollen wechselt */
.weg { background: #f7f3ee; padding-block: var(--abstand); }
.weg__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.weg__schritte { margin-top: clamp(32px, 4vw, 56px); display: grid; position: relative; }
.weg__schritte li { display: grid; grid-template-columns: 56px 1fr; column-gap: 20px; padding-block: clamp(32px, 6vh, 64px); border-top: 1px solid #e4dccf; opacity: 0.5; transition: opacity 0.3s var(--ease); }
.weg__schritte li.ist-aktiv { opacity: 1; }
.weg__nr { grid-row: 1 / span 2; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 1.5px #d9cdb8; font: 600 17px/1 var(--sans); color: var(--navy); font-variant-numeric: lining-nums; transition: background-color 0.25s var(--ease), color 0.25s var(--ease); }
.weg__schritte li.ist-aktiv .weg__nr { background: var(--navy); box-shadow: none; color: #fff; }
.weg__schritte h3 { font: 400 clamp(24px, 2.2vw, 30px)/1.2 var(--serif); color: var(--navy); }
.weg__schritte p { margin-top: 8px; color: #3a4459; max-width: 30em; }
.weg .titel { color: var(--navy); }
.weg .titel em { color: var(--gold-text); }
.weg__buehne { position: sticky; top: 120px; display: grid; gap: 16px; }
.weg__bilder { position: relative; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; background: #e9e2d8; box-shadow: 0 30px 60px -40px rgba(11, 26, 58, 0.45); }
.weg__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.5s var(--ease); }
.weg__bild.ist-aktiv { opacity: 1; }
.weg__leiste { height: 3px; border-radius: 3px; background: #e4dccf; overflow: hidden; }
@media (prefers-color-scheme: dark) {
  .weg, .weg__buehne { background: var(--flaeche) !important; }
  .weg .titel, .weg__schritte h3 { color: var(--titel); }
  .weg .titel em { color: var(--akzent-text); }
  .weg__schritte p { color: var(--text-2); }
  .weg__schritte li, .weg__leiste { border-color: var(--linie); }
  .weg__nr { background: var(--karte); box-shadow: inset 0 0 0 1.5px var(--linie); color: var(--titel); }
  .weg__schritte li.ist-aktiv .weg__nr { background: var(--gold); color: var(--tief); }
}
.weg__leiste i { display: block; height: 100%; background: var(--gold); transform: scaleX(0.2); transform-origin: left; transition: transform 0.4s var(--ease); }

/* Video neben dem Einstiegstext */
.video { padding-block: var(--abstand); }
.video__in { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.video__text p { margin-top: 16px; color: var(--text-2); max-width: 34em; }
.video__rahmen { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r); overflow: hidden; background: var(--tief); box-shadow: var(--schatten); }
.video__rahmen img, .video__rahmen iframe, .video__rahmen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.video__rahmen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(11, 26, 58, 0.5)); pointer-events: none; }
.video__play { position: absolute; z-index: 2; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--navy); box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.5); transition: transform 0.15s var(--ease); }
.video__play .i { width: 32px; height: 32px; margin-left: 4px; }
.video__play:active { transform: scale(0.95); }
.video__hinweis { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 16px; }
.vorteile { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 48px); margin-top: clamp(48px, 6vw, 80px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--linie); }
.vorteile li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.vorteile .i { width: 40px; height: 40px; color: var(--gold); }
.vorteile b { display: block; font: 600 21px/1.3 var(--serif); color: var(--titel); }
.vorteile p { margin-top: 4px; font-size: 16px; color: var(--text-2); }

/* Platzhalter: erst ersetzen, dann live */
.platzhalter { padding: 12px 16px; border: 1.5px dashed var(--gold); border-radius: var(--r-klein); background: color-mix(in srgb, var(--karte) 92%, var(--gold)); color: var(--text); font-size: 15px; line-height: 1.5; }

/* Erfahrungen */
.erfahrungen { background: var(--flaeche); padding-block: var(--abstand); }
.erf__raster { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 24px; margin-top: clamp(32px, 4vw, 48px); }
.erf__google { display: grid; justify-items: start; gap: 6px; padding: clamp(28px, 3vw, 44px); border-radius: var(--r); background: var(--karte); box-shadow: var(--schatten); text-decoration: none; }
.erf__quelle { font-weight: 600; font-size: 15px; color: var(--text-2); }
.erf__wert { font: 400 clamp(72px, 8vw, 104px)/1 var(--serif); color: var(--titel); letter-spacing: -0.03em; }
.erf__google .sterne .i { width: 22px; height: 22px; }
.erf__anzahl { font-size: 18px; color: var(--text-2); }
.erf__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-weight: 700; color: var(--titel); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--gold); }
.erf__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.erf__liste a { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 12px; height: 100%; padding: 22px 24px; border-radius: var(--r); background: var(--karte); border: 1px solid var(--linie); text-decoration: none; transition: border-color 0.2s var(--ease); }
.erf__liste span { font-weight: 700; color: var(--titel); min-width: 0; overflow-wrap: anywhere; }
.erf__liste b { font: 400 34px/1 var(--serif); color: var(--titel); }
.erf__liste small { grid-column: 1 / -1; font-size: 15px; color: var(--text-2); }
@media (hover: hover) and (pointer: fine) { .erf__liste a:hover { border-color: var(--gold); } }
.stand { margin-top: 18px; font-size: 14px; color: var(--text-2); }

/* Kommt Ihnen das bekannt vor? */
.bekannt { padding-block: var(--abstand); }
.bekannt__in { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.bekannt__kopf { position: sticky; top: 120px; display: grid; gap: 32px; }
.bekannt__kopf img { border-radius: var(--r); aspect-ratio: 4 / 3; object-fit: cover; }
.bekannt__liste { display: grid; }
.bekannt__liste li { padding-block: 28px; border-bottom: 1px solid var(--linie); }
.bekannt__liste li:first-child { padding-top: 0; }
.bekannt__liste h3 { font: italic 400 clamp(24px, 2.2vw, 30px)/1.25 var(--serif); color: var(--titel); }
.bekannt__liste p { margin-top: 10px; color: var(--text-2); max-width: 36em; }

/* Auswahl zum Anklicken */
.wahl { background: var(--tief); color: rgba(255, 255, 255, 0.86); padding-block: var(--abstand); }
.wahl .titel { color: #fff; }
.wahl .vorspann { color: rgba(255, 255, 255, 0.78); }
.wahl__raster { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(24px, 4vw, 56px); margin-top: clamp(32px, 4vw, 48px); align-items: start; }
.wahl__vorlagen { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.wahl__vorlage { min-height: 46px; padding: 0 20px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, 0.3); color: #fff; font-weight: 600; font-size: 15px; transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.12s var(--ease); }
.wahl__vorlage[aria-pressed="true"] { background: #fff; color: var(--tief); border-color: #fff; }
.wahl__vorlage:active, .wahl__punkt:active { transform: scale(0.98); }
.wahl__liste { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wahl__fix, .wahl__punkt { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px 18px; border-radius: 14px; text-align: left; font-weight: 600; font-size: 16px; line-height: 1.3; }
.wahl__fix { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 2px; background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.86); }
.wahl__fix .i { color: var(--gold-hell); }
.wahl__fix small { grid-column: 2; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.6); }
.wahl__fix .i { grid-row: 1 / span 2; }
.wahl__punkt { border: 1.5px solid rgba(255, 255, 255, 0.22); color: #fff; user-select: none; -webkit-user-select: none; transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.12s var(--ease); }
.wahl__punkt .i { color: rgba(255, 255, 255, 0.6); transition: color 0.2s var(--ease); }
.wahl__punkt[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--tief); }
.wahl__punkt[aria-pressed="true"] .i { color: var(--tief); }
@media (hover: hover) and (pointer: fine) {
  .wahl__punkt:hover, .wahl__vorlage:hover { border-color: rgba(255, 255, 255, 0.6); }
  .wahl__punkt[aria-pressed="true"]:hover { border-color: var(--gold-hell); }
}
.wahl__ergebnis { position: sticky; top: 120px; padding: clamp(24px, 3vw, 36px); border-radius: var(--r); background: var(--karte); color: var(--text); }
.wahl__name { font: 400 30px/1.15 var(--serif); color: var(--titel); }
.wahl__spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.wahl__k { font-weight: 700; font-size: 15px; color: var(--titel); margin-bottom: 8px; }
.wahl__wir li, .wahl__sie li { position: relative; padding-left: 22px; font-size: 15px; line-height: 1.45; margin-bottom: 6px; }
.wahl__wir li::before { content: ""; position: absolute; left: 0; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); }
.wahl__sie li { color: var(--text-2); }
.wahl__sie li::before { content: ""; position: absolute; left: 0; top: 7px; width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--text-2); }
.wahl__fuss { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--linie); font-size: 15px; color: var(--text-2); }
.wahl__ergebnis .knopf { margin-top: 18px; width: 100%; }

/* Schutz */
.schutz { padding-block: var(--abstand); }
/* Zeichnungen aus dem Entwurf: auf einer hellen Fläche, auch im Dunkelmodus (die Motive sind für hellen Grund gezeichnet) */
.schutz__zeichnungen { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: clamp(32px, 4vw, 48px); }
.schutz__zeichnungen figure { margin: 0; display: grid; align-content: space-between; gap: 20px; padding: clamp(24px, 3vw, 40px) clamp(20px, 3vw, 36px) 22px; border-radius: var(--r); background: #f4eee7; }
.schutz__zeichnungen img { width: 100%; height: clamp(140px, 14vw, 200px); object-fit: contain; }
.schutz__zeichnungen figcaption { font-size: 16px; color: #3a4459; }
.schutz__raster { display: grid; grid-template-columns: 1.5fr 1fr 1fr; grid-template-rows: auto auto; gap: 16px; margin-top: clamp(32px, 4vw, 48px); }
.schutz__raster figure { margin: 0; display: grid; gap: 12px; align-content: start; }
.schutz__raster img { border-radius: var(--r); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.schutz__gross { grid-row: 1 / span 2; display: flex !important; flex-direction: column; }
.schutz__gross img { flex: 1; }
.schutz__gross img { aspect-ratio: auto; min-height: 380px; height: 0; }
.schutz__raster figcaption { font-size: 16px; color: var(--text-2); }
.schutz__raster figcaption b { display: block; font: 600 20px/1.3 var(--serif); color: var(--titel); margin-bottom: 2px; }
.schutz__raster figure:nth-child(4) { grid-column: 2 / span 2; }
.schutz__raster figure:nth-child(4) img { aspect-ratio: 16 / 7; }

/* Kundengeschichte */
.geschichte { background: var(--flaeche); padding-block: var(--abstand); }
.geschichte__in { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.platzhalter-bild { aspect-ratio: 4 / 5; border-radius: var(--r); background: var(--flaeche-2); display: grid; place-items: center; padding: 24px; }
.geschichte__liste { display: grid; gap: 0; margin-top: 28px; }
.geschichte__liste div { display: grid; grid-template-columns: 13em 1fr; gap: 6px 20px; padding-block: 16px; border-top: 1px solid var(--linie); }
.geschichte__liste dt { font-weight: 700; color: var(--titel); }
.geschichte__liste dd.platzhalter { padding: 6px 12px; }

/* Team */
/* Sandton trennt das Team von den weißen Nachbarn (Schutz, Standorte); im dunklen Modus die dunkle Fläche */
.team { --team-grund: #f7f3ee; padding-block: var(--abstand); background: var(--team-grund); }
@media (prefers-color-scheme: dark) { .team { --team-grund: var(--flaeche); } }
.team__titel { max-width: 18em; margin: 0 auto clamp(32px, 4vw, 48px); text-align: center; }
.team__titel em { display: block; }
.team__bild { margin: 0; }
.team__bild img { width: 100%; aspect-ratio: 2.2 / 1; object-fit: cover; object-position: 50% 78%; border-radius: var(--r); }
.team__brief { max-width: 720px; margin: clamp(40px, 5vw, 56px) auto 0; text-align: center; }
.team__brief p { margin: 0 auto; max-width: 36em; font-size: 18px; line-height: 1.7; color: var(--text-2); }
.team__gruss { display: inline-flex; align-items: center; gap: 16px; margin-top: 28px; text-align: left; }
.team__fotos { display: flex; flex: none; }
.team__fotos img { width: 64px; height: 64px; border-radius: 50%; box-shadow: 0 0 0 4px var(--team-grund); }
.team__fotos img + img { margin-left: -14px; }
.team__gruss b { display: block; font: italic 400 24px/1.2 var(--serif); color: var(--titel); }
.team__gruss span { font-size: 14px; color: var(--text-2); }
@media (max-width: 900px) { .team__bild img { aspect-ratio: 4 / 3; object-position: 56% 75%; } .team__gruss b { font-size: 21px; } }

/* Ablauf und Kosten */
.ablauf { background: var(--flaeche); padding-block: var(--abstand); }
.ablauf__liste { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; margin-top: clamp(40px, 5vw, 64px); counter-reset: a; position: relative; }
.ablauf__liste::before { content: ""; position: absolute; left: 24px; right: 24px; top: 24px; height: 1px; background: var(--linie); }
.ablauf__liste li { counter-increment: a; position: relative; display: grid; gap: 8px; align-content: start; }
.ablauf__liste li::before { content: counter(a); width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--grund); border: 1.5px solid var(--gold); font: italic 400 22px/1 var(--serif); color: var(--akzent-text); margin-bottom: 8px; }
.ablauf__liste h3 { font: 600 20px/1.3 var(--serif); color: var(--titel); }
.ablauf__liste p { font-size: 16px; color: var(--text-2); }
.kosten { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(24px, 4vw, 64px); margin-top: clamp(56px, 6vw, 88px); padding: clamp(28px, 3.5vw, 48px); border-radius: var(--r); background: var(--karte); box-shadow: var(--schatten); }
.kosten__titel { font: 400 clamp(28px, 2.6vw, 36px)/1.2 var(--serif); color: var(--titel); }
.kosten p { margin-top: 12px; color: var(--text-2); max-width: 32em; }
.kosten__liste { display: grid; gap: 10px; align-content: center; }
.kosten__liste li { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.kosten__liste li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex: none; }

/* Einsatzgebiet */
.gebiet { padding-block: var(--abstand); }
.gebiet__in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(40px, 6vw, 88px); margin-top: clamp(32px, 4vw, 48px); align-items: start; }
.gebiet__karte { position: relative; aspect-ratio: 16 / 11; border-radius: var(--r); overflow: hidden; background: var(--flaeche); }
.gebiet__karte > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
/* My-Maps-Leiste mit Kartenname und Ersteller oben abschneiden; Google-Hinweise unten bleiben sichtbar */
.gebiet__karte iframe { position: absolute; left: 0; top: -68px; width: 100%; height: calc(100% + 68px); border: 0; }
.gebiet__laden { position: absolute; left: 16px; right: 16px; bottom: 16px; display: grid; justify-items: start; gap: 10px; padding: 18px 20px; border-radius: var(--r-klein); background: var(--karte); box-shadow: 0 12px 30px -16px rgba(11, 26, 58, 0.45); max-width: 440px; }
.gebiet__laden p { font-size: 13px; line-height: 1.5; color: var(--text-2); }
.gebiet__laden a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.gebiet__karte.geladen > img, .gebiet__karte.geladen > .gebiet__laden { display: none; }
/* eigene Google-Karte: Pins und Infokarte */
.gebiet__karte.eigen { isolation: isolate; }
.kpin { position: absolute; display: flex; align-items: center; gap: 8px; transform: translate(-21px, -50%); padding: 3px 12px 3px 3px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 39, 106, 0.14), 0 6px 16px -6px rgba(11, 26, 58, 0.45); font: 600 13px/1 var(--sans); color: #1c2435; white-space: nowrap; cursor: pointer; transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease); }
.kpin__marke { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px #e3e8ef; }
.kpin__marke img { display: block; width: 24px; height: 24px; max-width: none; object-fit: contain; }
.kpin--haupt { background: var(--navy); color: #fff; font-size: 14px; z-index: 2; }
.kpin:not(.kpin--haupt) { padding-right: 3px; }
.kpin:not(.kpin--haupt) .kpin__name { display: none; }
.kpin:not(.kpin--haupt):is(:hover, :focus-visible, .an) { padding-right: 12px; z-index: 4; }
.kpin:not(.kpin--haupt):is(:hover, :focus-visible, .an) .kpin__name { display: inline; }
.kpin--haupt .kpin__marke { box-shadow: inset 0 0 0 2px var(--gold); }
.kpin.an, .kpin:focus-visible { box-shadow: 0 0 0 2.5px var(--gold), 0 10px 22px -8px rgba(11, 26, 58, 0.5); z-index: 3; outline: none; }
@media (hover: hover) and (pointer: fine) { .kpin:not(.kpin--haupt):hover { transform: translate(-21px, -50%) scale(1.04); } }
.kinfo { position: absolute; left: 16px; top: 16px; z-index: 5; width: min(340px, calc(100% - 32px)); padding: 20px 22px; border-radius: var(--r); background: #fff; color: #1c2435; box-shadow: 0 0 0 1px rgba(0, 39, 106, 0.1), 0 24px 48px -20px rgba(11, 26, 58, 0.45); animation: kinfo-ein 0.22s var(--ease); }
@keyframes kinfo-ein { from { transform: translateY(6px); opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) { .kinfo { animation: none; } }
.kinfo__zu { position: absolute; right: 10px; top: 8px; width: 32px; height: 32px; border-radius: 50%; font-size: 22px; line-height: 1; color: #6b7280; }
.kinfo__zu:hover { background: #f3f5f8; }
.kinfo__ort { font: 400 24px/1.2 var(--serif); color: var(--navy); padding-right: 30px; }
.kinfo__marke { display: inline-block; margin-right: 8px; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--gold) 18%, transparent); color: #8a6420; font: 700 11px/1.4 var(--sans); vertical-align: 4px; }
.kinfo__adr { margin-top: 6px; font-size: 14px; color: #4a5568; }
.kinfo__bw { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 13px; color: #4a5568; text-decoration: none; }
.kinfo__bw svg { width: 16px; height: 16px; } .kinfo__bw b { color: #1c2435; font-size: 14px; } .kinfo__sterne { color: #e7a614; letter-spacing: 1px; }
.kinfo__bw:hover span:last-child { text-decoration: underline; text-underline-offset: 3px; }
.kinfo__knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
@media (max-width: 960px) { .kinfo { top: auto; bottom: 10px; left: 10px; width: calc(100% - 20px); padding: 14px 16px; } .kinfo__ort { font-size: 21px; } .kinfo__bw { margin-top: 8px; } .kinfo__knoepfe { margin-top: 10px; } .kinfo__knoepfe .knopf { min-height: 40px; padding: 0 16px; font-size: 14px; } }
.gebiet__haupt { margin-top: 24px; font: 400 28px/1.2 var(--serif); color: var(--titel); }
.gebiet__kontakt { display: grid; gap: 8px; margin: 14px 0 0; }
.gebiet__kontakt div { display: grid; grid-template-columns: 104px 1fr; gap: 12px; }
.gebiet__kontakt dt { font-size: 14px; font-weight: 600; color: var(--text-2); padding-top: 2px; }
.gebiet__kontakt dd { margin: 0; color: var(--text); }
.gebiet__knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.gebiet__auch { font: 700 16px/1.4 var(--sans); color: var(--text); }
.gebiet__liste { margin-top: 12px; border-top: 1px solid var(--linie); }
.gebiet__liste li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 2px; border-bottom: 1px solid var(--linie); }
.gebiet__liste b { display: block; font: 400 22px/1.2 var(--serif); color: var(--titel); }
.gebiet__liste li > div > span { display: block; margin-top: 3px; font-size: 13px; color: var(--text-2); }
.gebiet__wege { display: flex; align-items: center; gap: 10px; flex: none; }
.gebiet__tel { font-size: 15px; font-weight: 700; color: var(--titel); text-decoration: none; white-space: nowrap; }
.gebiet__profil { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--linie); background: var(--karte); transition: box-shadow 0.2s var(--ease); }
.gebiet__g { width: 16px; height: 16px; }
.gebiet__fern .i { width: 16px; height: 16px; transition: transform 0.2s var(--ease); }
@media (hover: hover) and (pointer: fine) { .gebiet__tel:hover { text-decoration: underline; text-underline-offset: 4px; } .gebiet__profil:hover { box-shadow: inset 0 0 0 1.5px var(--gold); } .gebiet__fern:hover .i { transform: translateX(4px); } }
.gebiet__fern { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; font: italic 400 21px/1.3 var(--serif); color: var(--akzent-text); text-decoration: none; }
@media (max-width: 960px) { .gebiet__in { grid-template-columns: 1fr; } .gebiet__karte { aspect-ratio: 1 / 1.05; } }

/* Fragen */
.fragen { background: var(--flaeche); padding-block: var(--abstand); }
.fragen__in { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.fragen__liste { border-top: 1px solid var(--linie); }
/* Links bleibt die Überschrift stehen, darunter der persönliche Kontakt. So bleibt neben der langen Liste keine leere Fläche */
.fragen__links { position: sticky; top: 120px; display: grid; gap: 32px; }
.fragen__kontakt { display: grid; gap: 12px; justify-items: start; max-width: 380px; padding: 24px; border-radius: 20px; background: var(--karte); box-shadow: 0 0 0 1px var(--linie); }
.fragen__fotos { display: flex; } .fragen__fotos img { width: 52px; height: 52px; border-radius: 50%; box-shadow: 0 0 0 3px var(--karte); } .fragen__fotos img + img { margin-left: -12px; }
.fragen__k { font: 400 22px/1.25 var(--serif); color: var(--titel); }
.fragen__kontakt p:not(.fragen__k) { font-size: 15px; color: var(--text-2); }
.fragen__tel { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 19px; color: var(--titel); text-decoration: none; } .fragen__tel .i { width: 20px; height: 20px; color: var(--gold); }
.fragen__weiter { font-weight: 700; font-size: 15px; color: var(--text-2); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 960px) { .fragen__links { position: static; } .fragen__kontakt { max-width: none; justify-self: stretch; } }
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 22px; cursor: pointer; list-style: none; font: 500 21px/1.35 var(--serif); color: var(--titel); }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary .i { width: 22px; height: 22px; color: var(--gold); transition: transform 0.2s var(--ease); }
.fragen details[open] summary .i { transform: rotate(45deg); }
.fragen details p { padding-bottom: 22px; color: var(--text-2); max-width: 38em; }

/* Anfrage */
/* Anfrage: links Text und Formular, rechts das Foto der Besichtigung. Die Formularkarte ragt ins Foto hinein. */
/* Warmer Ton wie beim Team: der Wechsel von den hellblauen Fragen wirkt gewollt */
.anfrage { --anfrage-grund: #f7f3ee; background: var(--anfrage-grund); padding-block: var(--abstand); scroll-margin-top: calc(32px - var(--abstand)); }
@media (prefers-color-scheme: dark) { .anfrage { --anfrage-grund: var(--grund); } }
.anfrage .form { background: var(--karte); }
.anfrage__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.anfrage .form textarea { min-height: 96px; }
.anfrage__text { position: relative; z-index: 1; padding-right: clamp(24px, 4vw, 64px); }
.anfrage__text .titel { font-size: clamp(34px, 3.3vw, 48px); }
.anfrage__lead { margin-top: 16px; font-size: 18px; color: var(--text-2); max-width: 30em; }
.anfrage .form { margin-top: 28px; margin-right: -120px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--anfrage-grund) 85%, #8a6d3b), 0 40px 80px -40px rgba(11, 26, 58, 0.45); }
.anfrage__bild { position: relative; align-self: stretch; min-height: 680px; border-radius: 28px; overflow: hidden; background: var(--flaeche); }
.anfrage__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 68% 40%; }
.anfrage__fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; margin-top: 22px; }
.anfrage__g { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; color: var(--text-2); text-decoration: none; }
.anfrage__g .bw__g { width: 18px; height: 18px; } .anfrage__g b { color: var(--text); }
.anfrage__tel { font-size: 15px; color: var(--text-2); } .anfrage__tel a { font-weight: 700; color: var(--titel); text-decoration: none; white-space: nowrap; }
@media (max-width: 960px) {
  .anfrage__bild { min-height: 260px; margin-top: 28px; border-radius: var(--r); }
  .anfrage__text { padding-right: 0; }
  .anfrage .form { margin-right: 0; }
}

.form { padding: clamp(24px, 3.5vw, 44px); border-radius: var(--r); background: var(--karte); color: var(--text); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.6); }
.form__kopf { margin-bottom: 24px; }
.form__stand { font-size: 14px; font-weight: 600; color: var(--text-2); }
.form__balken { height: 4px; margin-top: 10px; border-radius: 4px; background: var(--flaeche-2); overflow: hidden; }
.form__balken i { display: block; height: 100%; background: var(--gold); transform: scaleX(0.2); transform-origin: left; transition: transform 0.25s var(--ease); }
.form__schritt { border: 0; padding: 0; min-width: 0; display: grid; gap: 16px; transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); }
@starting-style { .form__schritt { opacity: 0; transform: translateY(8px); } }
.form__schritt legend { float: left; width: 100%; margin-bottom: 4px; font: 400 clamp(26px, 2.4vw, 32px)/1.2 var(--serif); color: var(--titel); }
.form__karten { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form__karten--klein { grid-template-columns: repeat(3, 1fr); }
.karte { position: relative; display: block; cursor: pointer; }
.karte input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.karte span { display: flex; align-items: center; justify-content: center; min-height: 60px; padding: 10px 14px; border-radius: 12px; border: 1.5px solid var(--linie); font-weight: 600; text-align: center; transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), transform 0.12s var(--ease); user-select: none; -webkit-user-select: none; }
.karte input:checked + span { border-color: var(--navy); background: color-mix(in srgb, var(--karte) 88%, var(--navy)); box-shadow: inset 0 0 0 1px var(--navy); }
@media (prefers-color-scheme: dark) { .karte input:checked + span { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); background: color-mix(in srgb, var(--karte) 85%, var(--gold)); } }
.karte input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }
.karte:active span { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .karte:hover span { border-color: var(--text-2); } }
.feld { display: grid; gap: 6px; }
.feld > span { font-weight: 600; font-size: 16px; }
.feld small { font-weight: 500; color: var(--text-2); }
.feld input, .feld select, .feld textarea { width: 100%; min-height: 54px; padding: 12px 16px; border-radius: 12px; border: 1.5px solid var(--linie); background: var(--grund); font-size: 17px; }
.feld textarea { min-height: 96px; resize: vertical; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 4px color-mix(in srgb, transparent 85%, var(--navy)); }
.feld input::placeholder, .feld textarea::placeholder { color: color-mix(in srgb, var(--text-2) 80%, transparent); }
.form__reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form__reihe > div { display: grid; gap: 10px; align-content: start; }
.form__hilfe { font-size: 15px; color: var(--text-2); }
.form__haken { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form__haken label { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; border-radius: 12px; border: 1.5px solid var(--linie); cursor: pointer; font-weight: 600; font-size: 15px; line-height: 1.3; }
.form__haken input { width: 22px; height: 22px; flex: none; accent-color: var(--navy); }
.form__haken label:has(input:checked) { border-color: var(--navy); background: color-mix(in srgb, var(--karte) 90%, var(--navy)); }
.form__ds { font-size: 14px; color: var(--text-2); }
.form__ds a { color: var(--titel); }
.form__fehler { color: #b3261e; font-weight: 600; font-size: 15px; margin-top: -6px; }
@media (prefers-color-scheme: dark) { .form__fehler { color: #ff8a80; } }
.form__fehler--senden { margin-top: 16px; }
.form__knoepfe { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; }
.form__knoepfe .knopf:last-child, .form__knoepfe #weiter { margin-left: auto; }
.form__stand { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.form__zurueck, .form__gewaehlt button, .form__ueber { font-size: 14px; font-weight: 700; color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }
.form__zeilen { display: grid; gap: 10px; }
.zeile { position: relative; display: block; cursor: pointer; }
.zeile input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.zeile > span { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; min-height: 64px; padding: 10px 18px; border-radius: 14px; border: 1.5px solid var(--linie); transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease), transform 0.12s var(--ease); user-select: none; -webkit-user-select: none; }
.zeile b { font-size: 17px; color: var(--text); } .zeile small { grid-row: 2; font-size: 13px; color: var(--text-2); }
.zeile .i { grid-row: 1 / span 2; grid-column: 2; width: 18px; height: 18px; color: var(--navy); transition: transform 0.2s var(--ease); }
.zeile input:checked + span { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.zeile input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }
.zeile:active > span { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) { .zeile:hover > span { border-color: var(--navy); background: color-mix(in srgb, var(--karte) 94%, var(--navy)); } .zeile:hover .i { transform: translateX(4px); } }
@media (prefers-color-scheme: dark) { .zeile .i { color: var(--gold); } .zeile input:checked + span { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); } }
.form__gewaehlt { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; border-radius: 999px; background: var(--flaeche); font-size: 14px; font-weight: 600; color: var(--text); }
.form__gewaehlt .i { width: 15px; height: 15px; color: #2e7d32; } .form__gewaehlt button { padding: 2px 6px; color: var(--titel); }
.form__senden { width: 100%; min-height: 58px; font-size: 17px; }
.form__senden[disabled], #ergaenzen[disabled] { opacity: 0.75; cursor: progress; }
.form__ok { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, #2e7d32 10%, transparent); color: #1f5d23; font-weight: 700; font-size: 15px; outline: none; }
.form__ok .i { width: 20px; height: 20px; flex: none; }
@media (prefers-color-scheme: dark) { .form__ok { color: #9ad7a0; } }
.form__knoepfe { align-items: center; }
.form__chips { display: flex; gap: 8px; } .form__chips .karte span { min-height: 44px; padding: 8px 22px; }

/* Danke-Seite */
.danke { --danke-grund: #f7f3ee; background: var(--danke-grund); padding-block: clamp(48px, 7vw, 104px); }
@media (prefers-color-scheme: dark) { .danke { --danke-grund: var(--flaeche); } }
.danke__in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.danke__haken { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: color-mix(in srgb, #2e7d32 12%, transparent); color: #2e7d32; }
.danke__haken svg { width: 30px; height: 30px; } .danke__haken path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: danke-zug 0.6s 0.2s var(--ease) forwards; }
@keyframes danke-zug { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .danke__haken path { animation: none; stroke-dashoffset: 0; } }
.danke h1 { margin-top: 22px; padding-bottom: 4px; font: 400 clamp(38px, 4.4vw, 62px)/1.08 var(--serif); color: var(--titel); letter-spacing: -0.01em; } .danke h1 em { display: block; color: var(--gold); }
.danke__lead { margin-top: 16px; font-size: 19px; color: var(--text-2); max-width: 32em; }
.danke__weg { display: grid; margin-top: 36px; }
.danke__weg li { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding-bottom: 24px; }
.danke__weg li::after { content: ""; position: absolute; left: 19px; top: 42px; bottom: 4px; width: 2px; background: var(--linie); }
.danke__weg li:last-child::after { display: none; } .danke__weg li.fertig::after { background: var(--gold); }
.danke__n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--karte); box-shadow: inset 0 0 0 1.5px var(--linie); font-weight: 700; color: var(--titel); }
.danke__weg .fertig .danke__n { background: var(--gold); box-shadow: none; color: #fff; } .danke__n .i { width: 18px; height: 18px; }
.danke__weg b { display: block; font-size: 17px; color: var(--text); } .danke__weg span { color: var(--text-2); }
.danke__weg small { margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--navy) 10%, var(--karte)); font-size: 12px; font-weight: 700; color: var(--titel); vertical-align: 2px; }
.danke__tel { display: inline-flex; align-items: center; gap: 14px; margin-top: 8px; padding: 14px 20px 14px 14px; border-radius: 16px; background: var(--karte); box-shadow: 0 0 0 1px var(--linie); text-decoration: none; }
.danke__tel > span:first-child { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--navy); } .danke__tel .i { width: 22px; height: 22px; color: #fff; }
.danke__tel small { display: block; font-size: 13px; color: var(--text-2); } .danke__tel b { font-size: 19px; color: var(--titel); }
.danke__links { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 28px; font-weight: 700; font-size: 15px; } .danke__links a { color: var(--text-2); text-underline-offset: 4px; }
.danke__bild img { width: 100%; aspect-ratio: 4 / 4.6; object-fit: cover; object-position: 66% 40%; border-radius: 28px; }
@media (max-width: 960px) { .danke__in { grid-template-columns: 1fr; } .danke__bild img { aspect-ratio: 4 / 3; border-radius: var(--r); } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Fuß */
/* Footer wie auf der Senioren-Seite: hell, oben eine goldene Linie, goldene Überschriften, Telefon groß in Serif */
/* Fuß F4 (24.10.): weiß und klar, feine Linie über die ganze Breite, kurzer goldener Strich in der Mitte */
.fuss { position: relative; background: var(--grund); color: var(--text-2); border-top: 1px solid var(--linie); padding-top: clamp(56px, 7vw, 88px); padding-bottom: env(safe-area-inset-bottom); font-size: 17px; }
.fuss::before { content: ""; position: absolute; top: -2px; left: 50%; width: 80px; height: 3px; margin-left: -40px; border-radius: 3px; background: var(--gold); }
.fuss a { text-decoration: none; }
.fuss__haupt { display: grid; grid-template-columns: 1.3fr 1fr 1fr 0.9fr; gap: 40px clamp(24px, 4vw, 64px); padding-bottom: clamp(48px, 6vw, 72px); }
.fuss__haupt > * { min-width: 0; hyphens: manual; }
.fuss__logo { width: 190px; margin-bottom: 24px; }
@media (prefers-color-scheme: dark) { .fuss__logo { content: url("/assets/img/logo-hell.png"); } }
.fuss__claim { font: 400 22px/1.4 var(--serif); color: var(--titel); max-width: 18em; } .fuss__claim em { color: var(--akzent-text); }
.fuss__k { margin: 10px 0 20px; font: 700 16px/1.2 var(--sans); color: var(--akzent-text); }
.fuss__liste { display: grid; gap: 10px; font-style: normal; }
.fuss__liste a { width: fit-content; color: var(--titel); background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0 1px no-repeat; transition: background-size 0.3s var(--ease); }
@media (hover: hover) { .fuss__liste a:hover { background-size: 100% 1px; } .fuss__unten a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--gold); } }
.fuss__tel { font: 400 26px/1.2 var(--serif); }
.fuss__unten { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 32px; padding-block: 18px 24px; border-top: 1px solid var(--linie); font-size: 16px; }
.fuss__unten nav { display: flex; flex-wrap: wrap; gap: 4px 28px; } .fuss__unten a { display: inline-flex; align-items: center; min-height: 44px; color: var(--titel); }

/* Leiste unten auf dem Handy */
.leiste { display: none; }

/* Rechtsseiten */
.recht { background: var(--flaeche); padding-block: clamp(40px, 6vw, 72px) clamp(80px, 9vw, 120px); }
.recht__in { max-width: 820px; }
.krumen { display: flex; gap: 10px; font-size: 15px; font-weight: 500; color: var(--text-2); margin-bottom: 20px; }
.krumen a { color: var(--text-2); }
.recht h1 { font: 400 clamp(40px, 5vw, 60px)/1.05 var(--serif); letter-spacing: -0.025em; color: var(--titel); }
.recht__text { margin-top: clamp(28px, 4vw, 44px); background: var(--karte); border-radius: var(--r); padding: clamp(24px, 4vw, 56px); border: 1px solid var(--linie); }
.recht__text h2 { font: 500 clamp(23px, 2.2vw, 29px)/1.25 var(--serif); color: var(--titel); margin: 40px 0 12px; }
.recht__text h2:first-child { margin-top: 0; }
.recht__text h3 { font: 600 20px/1.35 var(--serif); color: var(--titel); margin: 26px 0 8px; }
.recht__text p, .recht__text ul { margin: 0 0 14px; max-width: 68ch; }
.recht__text ul { padding-left: 22px; list-style: disc; display: grid; gap: 8px; }
.recht__text a { color: var(--titel); overflow-wrap: anywhere; }

/* Tablet und Handy */
@media (max-width: 1080px) {
  .nav a:not(.knopf) { display: none; }
}
@media (max-width: 960px) {
  .topbar span { display: none; }
  .topbar__in { justify-content: center; }
  .kopf__in { min-height: 68px; }
  .logo img { width: 128px; }
  .menue { display: grid; }
  .nav { position: fixed; inset: 110px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 20px 24px; background: var(--grund); border-bottom: 1px solid var(--linie); box-shadow: var(--schatten); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s; }
  .nav.offen { opacity: 1; transform: none; visibility: visible; }
  .nav a:not(.knopf) { display: block; padding-block: 14px; border-bottom: 1px solid var(--linie); font-size: 18px; background: none; }
  .nav .knopf { margin-top: 16px; }
  .hero { display: flex; flex-direction: column; background: #f4eee7; }
  .hero__buehne { position: relative; inset: auto; order: 2; aspect-ratio: 390 / 420; margin-top: -48px; }
  .hero__buehne img, .hero__film { object-position: 50% 100%; }
  .hero__buehne::after { background: linear-gradient(180deg, #f4eee7 0%, rgba(244, 238, 231, 0.6) 18%, rgba(244, 238, 231, 0) 40%); }
  .hero__in { min-height: 0; }
  .hero__text { padding-block: 36px 0; }
  .belege__in { justify-content: flex-start; }
  .weg__in { grid-template-columns: 1fr; }
  .weg__buehne { order: -1; top: 68px; z-index: 2; background: #f7f3ee; padding-block: 8px 12px; }
  .weg__bilder { aspect-ratio: 16 / 10; }
  .weg__schritte li { padding-block: 28px; }
  .video__in, .vorteile { grid-template-columns: 1fr; }
  .erf__raster, .bekannt__in, .wahl__raster, .geschichte__in, .team__in, .gebiet__in, .fragen__in, .anfrage__in, .kosten { grid-template-columns: 1fr; }
  .bekannt__kopf, .wahl__ergebnis { position: static; }
  .ablauf__liste { grid-template-columns: 1fr; gap: 20px; }
  .ablauf__liste::before { left: 24px; right: auto; top: 24px; bottom: 24px; width: 1px; height: auto; }
  .ablauf__liste li { grid-template-columns: 48px 1fr; column-gap: 18px; }
  .ablauf__liste li::before { grid-row: 1 / span 2; margin: 0; }
  .schutz__raster { grid-template-columns: 1fr 1fr; }
  .schutz__gross { grid-column: 1 / -1; grid-row: auto; }
  .schutz__gross img { min-height: 0; aspect-ratio: 4 / 3; height: auto; }
  .schutz__raster figure:nth-child(4) { grid-column: 1 / -1; }
  .gebiet__bild { aspect-ratio: 4 / 3; }
  .platzhalter-bild { aspect-ratio: 16 / 9; }
  .fuss__haupt { grid-template-columns: 1fr 1fr; } .fuss__haupt > :first-child { grid-column: 1 / -1; }
  .leiste { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; display: flex; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--tief) 97%, transparent); }
  .leiste .knopf { flex: 1; min-height: 52px; font-size: 16px; padding: 0 16px; }
  .leiste__tel { width: 52px; height: 52px; flex: none; display: grid; place-items: center; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.4); color: #fff; }
  .leiste__tel .i { width: 24px; height: 24px; }
  body { padding-bottom: 80px; }
  html { scroll-padding-top: 80px; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .hero__aktion .knopf { width: 100%; }
  .hero h1 { font-size: 36px; }
  .hero__lead { font-size: 18px; margin-top: 18px; }
  .hero__aktion { margin-top: 24px; }
  .erf__liste, .wahl__liste, .wahl__spalten, .gebiet__liste, .form__haken, .form__reihe { grid-template-columns: 1fr; }
  .schutz__raster, .schutz__zeichnungen { grid-template-columns: 1fr; }
  .geschichte__liste div { grid-template-columns: 1fr; }
  .form__karten--klein { grid-template-columns: 1fr 1fr 1fr; }
  .fuss__haupt { gap: 36px 20px; } .fuss__haupt > :nth-child(2) { grid-column: 1 / -1; } .fuss { font-size: 16px; }
  .knopf { white-space: normal; }
  .video__play { width: 72px; height: 72px; margin: -36px 0 0 -36px; }
  .video__hinweis { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
  .knopf:active, .karte:active span, .wahl__punkt:active { transform: none; }
}
.recht__stand { margin-top: 10px; font-size: 15px; color: var(--text-2); }
.recht__lead { font: italic 400 22px/1.4 var(--serif); color: var(--akzent-text); }
.kosten--ohne { margin-top: 0; }

/* Bewertungen: Kopf mit Google-Wert, Karten zum Blättern (Scroll-Snap), darunter weitere Plattformen */
.bw { padding-block: var(--abstand); background: var(--grund); }
.bw__leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; margin-top: clamp(28px, 3vw, 40px); }
.bw__kopf { display: flex; align-items: center; gap: 16px; text-decoration: none; color: var(--text); }
.bw__kopf > .bw__g { width: 44px; height: 44px; padding: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--linie); }
.bw__wert { display: flex; align-items: center; gap: 10px; }
.bw__wert b { font: 400 34px/1 var(--serif); color: var(--titel); }
.bw__wert .sterne .i { width: 20px; height: 20px; }
.bw__anzahl { font-size: 15px; color: var(--text-2); }
.bw__aktion { display: flex; align-items: center; gap: 10px; }
.bw__pfeil { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--karte); box-shadow: inset 0 0 0 1.5px var(--linie); color: var(--titel); transition: transform 0.12s var(--ease), background-color 0.2s var(--ease); }
.bw__pfeil--zurueck .i { transform: scaleX(-1); }
.bw__pfeil:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .bw__pfeil:hover { background: var(--flaeche); } }
/* Karten: Sterne, Kernsatz, Text, Name */
.bw__karten { display: flex; gap: 20px; margin-top: 28px; padding: 4px max(clamp(16px, 4vw, 48px), calc((100vw - 1240px) / 2)) 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(clamp(16px, 4vw, 48px), calc((100vw - 1240px) / 2)); scrollbar-width: none; overscroll-behavior-x: contain; }
.bw__karten::-webkit-scrollbar { display: none; }
.bw__karte { flex: none; width: min(380px, 84vw); display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 20px; background: var(--karte); box-shadow: 0 0 0 1px var(--linie); scroll-snap-align: start; }
.bw__kern { font: 500 24px/1.2 var(--serif); color: var(--titel); text-wrap: balance; }
.bw__text { margin: 0; flex: 1; }
.bw__text p { font-size: 15px; line-height: 1.65; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.bw__karte.offen .bw__text p { -webkit-line-clamp: unset; display: block; }
.bw__mehr { align-self: flex-start; font-size: 14px; font-weight: 700; color: var(--titel); text-decoration: underline; text-underline-offset: 4px; padding: 4px 0; }
.bw__autor { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--linie); font-size: 14px; color: var(--text-2); }
.bw__autor b { color: var(--text); }
.bw__quelle { display: inline-flex; } .bw__quelle .bw__g { width: 18px; height: 18px; }
/* Leiste mit allen Plattformen: immer weiß, damit die Logos in ihren Farben stehen */
.bw__plattformen { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 48px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px #e6e9ee, 0 24px 48px -28px rgba(15, 30, 60, 0.28); overflow: hidden; }
.bw__plattformen li + li { border-left: 1px solid #eef1f5; }
.bw__plattformen a { height: 100%; display: grid; justify-items: center; align-content: center; gap: 10px; padding: 26px 12px; text-decoration: none; color: #1c2435; transition: background-color 0.2s var(--ease); }
@media (hover: hover) and (pointer: fine) { .bw__plattformen a:hover { background: #fbf8f3; } }
.bw__logobox { height: 36px; display: flex; align-items: center; }
.bw__logo { display: block; width: auto; max-width: 100%; }
.bw__logo--pe { height: 44px; margin-block: -4px; }
.bw__logo-g { display: flex; align-items: center; gap: 8px; font: 600 18px var(--sans); color: #1c2435; }
.bw__logo-g .bw__g { width: 28px; height: 28px; }
.bw__zeile { display: flex; align-items: center; gap: 8px; }
.bw__zeile b { font: 400 22px/1 var(--serif); color: var(--navy); }
.bw__plattformen small { font-size: 13px; color: #6b7280; }
.bw__fuss { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; margin-top: 40px; }
.bw__aussage { font: 400 clamp(22px, 2.4vw, 28px)/1.25 var(--serif); color: var(--titel); }
.bw__aussage em { color: var(--akzent-text); font-style: italic; }
@media (max-width: 900px) {
  .bw__plattformen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bw__plattformen li + li { border-left: 0; }
  .bw__plattformen li { border-top: 1px solid #eef1f5; }
  .bw__plattformen li:nth-child(odd):not(:first-child) { border-left: 1px solid #eef1f5; }
  .bw__plattformen li:first-child { grid-column: 1 / -1; border-top: 0; }
  .bw__fuss { flex-direction: column; align-items: stretch; text-align: center; }
}

/* Der Unterschied: Tabelle, rechte Spalte dunkel (Stil wie jm-haushaltsaufloesungen.de) */
.vg { padding-block: var(--abstand); }
.vg__titel { margin-inline: auto; text-align: center; max-width: 16em; }
.vg__titel em { display: block; }
.vg__rahmen { margin-top: clamp(40px, 5vw, 64px); border-radius: 20px; overflow: hidden; box-shadow: 0 0 0 1px var(--linie), 0 30px 60px -48px rgba(11, 26, 58, 0.5); }
.vg__tabelle { width: 100%; border-collapse: collapse; background: var(--karte); font-size: 17px; }
.vg__tabelle thead th { padding: 28px 32px; font: 500 clamp(22px, 1.9vw, 28px)/1.2 var(--serif); color: var(--titel); text-align: left; }
.vg__tabelle th[scope="row"] { width: 24%; padding: 24px 32px; font-weight: 700; color: var(--text); text-align: left; vertical-align: top; }
.vg__tabelle td { padding: 24px 32px; vertical-align: top; }
.vg__tabelle tbody tr { border-top: 1px solid var(--linie); }
.vg__tabelle td span { display: block; }
.vg__ueblich { width: 36%; color: var(--text-2); display: table-cell; }
.vg__ueblich, .vg__tabelle td.vg__wir { position: relative; padding-left: 64px !important; }
.vg__ueblich .i { position: absolute; left: 32px; top: 29px; width: 14px; height: 14px; color: #9aa3b2; }
.vg__tabelle .vg__wir { background: var(--tief); color: #fff; }
.vg__tabelle thead .vg__wir { color: #fff; padding-left: 32px; }
.vg__tabelle tbody tr + tr .vg__wir { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.vg__tabelle td.vg__wir .i { position: absolute; left: 28px; top: 26px; width: 24px; height: 24px; padding: 5px; border-radius: 50%; background: var(--gold); color: var(--tief); }
@media (max-width: 760px) {
  .vg__tabelle, .vg__tabelle tbody, .vg__tabelle tr, .vg__tabelle th, .vg__tabelle td { display: block; width: auto; }
  .vg__tabelle thead { display: none; }
  .vg__tabelle tbody tr { padding: 0; }
  .vg__tabelle th[scope="row"] { width: auto; padding: 20px 20px 6px; }
  .vg__tabelle td { padding: 6px 20px 6px 52px !important; }
  .vg__ueblich { font-size: 15px; padding-bottom: 14px !important; }
  .vg__ueblich .i { left: 26px; top: 10px; }
  .vg__ueblich span::before { content: "Häufig am Markt: "; font-weight: 600; }
  .vg__tabelle td.vg__wir { padding-block: 16px !important; }
  .vg__tabelle td.vg__wir .i { left: 16px; top: 15px; }
}

/* Der Unterschied: ruhige Tabelle ohne Bewegung (Nutzerwunsch 20.10.2026) */
.vg { position: relative; isolation: isolate; overflow: hidden; }
/* Echtes Foto im Hintergrund, stark aufgehellt; oben und unten weich in die Seite übergeblendet */
.vg__hintergrund { position: absolute; inset: 0; z-index: -1; }
.vg__hintergrund img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.vg__hintergrund::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--grund) 0%, color-mix(in srgb, var(--grund) 84%, transparent) 22%, color-mix(in srgb, var(--grund) 80%, transparent) 70%, var(--grund) 100%); }
.vg__tabelle td.vg__wir::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gold); }
@media (max-width: 760px) {
  .vg__tabelle td.vg__wir::before { width: 3px; }
}

/* Leistungen: Paket-Schalter und Fotokacheln, jede einzeln an- und abwählbar */
.wl { padding-block: var(--abstand); background: #f7f3ee; }
.wl__kopf { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px 32px; }
.wl__satz { margin-top: 16px; font-size: 18px; color: #4a5568; max-width: 34em; min-height: 3.3em; }
.wl__wahl { position: relative; display: inline-flex; padding: 6px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px #e6ddcf; }
.wl__wahl button { position: relative; z-index: 1; min-height: 48px; padding: 0 24px; border-radius: 999px; font-weight: 700; font-size: 16px; color: #4a5568; transition: color 0.25s var(--ease); }
.wl__wahl button[aria-pressed="true"] { color: #fff; }
.wl__wahl i { position: absolute; top: 6px; bottom: 6px; left: 6px; border-radius: 999px; background: var(--navy); transition: transform 0.35s var(--ease), width 0.35s var(--ease), opacity 0.2s var(--ease); }
.wl__raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 200px; gap: 14px; margin-top: 36px; }
.wl__k--gross { grid-column: span 2; grid-row: span 2; }
.wl__k--breit { grid-column: span 2; }
.wl__knopf { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; border-radius: 20px; overflow: hidden; text-align: left; color: #fff; background: var(--tief); isolation: isolate; transition: transform 0.15s var(--ease); }
.wl__knopf img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: filter 0.4s var(--ease), transform 0.8s var(--ease); }
.wl__knopf::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11, 26, 58, 0) 30%, rgba(11, 26, 58, 0.88)); transition: background-color 0.4s var(--ease); }
.wl__knopf:active { transform: scale(0.98); }
.wl__knopf:focus-visible { outline-offset: 4px; }
.wl__text b { display: block; font: 500 22px/1.2 var(--serif); }
.wl__k--gross .wl__text b { font-size: clamp(26px, 2.4vw, 34px); }
.wl__text > span { display: block; margin-top: 4px; font-size: 14px; color: rgba(255, 255, 255, 0.85); }
.wl__marke { position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; background: rgba(255, 255, 255, 0.92); color: var(--navy); transition: background-color 0.25s var(--ease), color 0.25s var(--ease); }
.wl__marke .i { width: 14px; height: 14px; }
.wl__knopf .wl__an { display: none; }
.wl__knopf[aria-pressed="true"] .wl__an { display: inline; }
.wl__knopf[aria-pressed="true"] .wl__aus { display: none; }
.wl__knopf[aria-pressed="true"] .wl__marke { background: var(--gold); color: var(--tief); }
.wl__knopf[aria-pressed="false"] img { filter: grayscale(1) brightness(1.1); }
.wl__knopf[aria-pressed="false"]::after { background-color: rgba(243, 238, 231, 0.35); }
@media (hover: hover) and (pointer: fine) {
  .wl__knopf:hover img { transform: scale(1.04); }
  .wl__knopf[aria-pressed="false"]:hover img { filter: grayscale(0.4); }
}
/* Zuerst nur die acht wichtigsten Leistungen, der Rest klappt auf Wunsch auf */
.wl__raster:not(.offen) > li:nth-child(n+9) { display: none; }
.wl__raster.offen > li:nth-child(n+9) { animation: wl-auf 0.35s var(--ease) both; }
@keyframes wl-auf { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .wl__raster.offen > li:nth-child(n+9) { animation: none; } }
.wl__mehr { display: flex; justify-content: center; margin-top: 22px; }
.wl__mehr .knopf { gap: 10px; }
.wl__mehr .i { width: 18px; height: 18px; transition: transform 0.25s var(--ease); }
.wl__mehr [aria-expanded="true"] .i { transform: rotate(180deg); }
.wl__fuss { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 24px; margin-top: 28px; padding: 18px 18px 18px 26px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px #e6ddcf; }
.wl__fuss p { color: #4a5568; font-size: 16px; }
.wl__fuss b { color: var(--navy); }
@media (prefers-color-scheme: dark) {
  .wl { background: var(--flaeche); }
  .wl__satz, .wl__fuss p { color: var(--text-2); }
  .wl__wahl, .wl__fuss { background: var(--karte); box-shadow: 0 0 0 1px var(--linie); }
  .wl__fuss b { color: var(--titel); }
}
@media (max-width: 960px) {
  .wl__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 170px; }
  .wl__wahl { width: 100%; } .wl__wahl button { flex: 1; padding: 0 12px; }
  .wl__fuss { border-radius: 20px; padding: 18px; }
  .wl__fuss .knopf { width: 100%; }
}
@media (max-width: 480px) {
  .wl__raster { grid-auto-rows: 150px; gap: 10px; }
  .wl__knopf { padding: 14px; border-radius: 16px; }
  .wl__text b { font-size: 17px; }
  .wl__text > span { display: none; }
  .wl__k--gross .wl__text > span { display: block; }
}
/* Feste Leistungen: immer dabei, kein Druck-Effekt, Mauszeiger normal */
.wl__knopf[data-fest] { cursor: default; }
.wl__knopf[data-fest]:active { transform: none; }
.wl__knopf[data-fest] .wl__marke { background: #fff; color: var(--navy); }

/* Schutz: Foto-Akkordeon. Desktop waagerecht (offener Streifen breit), Handy senkrecht zum Aufklappen. */
.sz { padding-block: var(--abstand); background: var(--grund); color: var(--text); }
.sz__kopf { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 40px; }
.sz__lead { max-width: 26em; font-size: 18px; color: var(--text-2); }
.sz__reihe { display: flex; gap: 12px; height: clamp(480px, 42vw, 600px); margin-top: clamp(32px, 4vw, 48px); }
.sz__p { position: relative; flex: 1 1 0; min-width: 0; border-radius: 22px; overflow: hidden; isolation: isolate; background: #0e2048; transition: flex-grow 0.6s var(--ease); }
.sz__p.ist-offen { flex-grow: 4.2; }
.sz__p img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.4s var(--ease), transform 6s linear; }
.sz__p:not(.ist-offen) img { opacity: 0.55; }
.sz__p::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11, 26, 58, 0.05) 30%, rgba(11, 26, 58, 0.92)); pointer-events: none; }
/* Fortschritt bis zum automatischen Wechsel, unten im offenen Streifen */
.sz__p::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 3px; background: var(--gold); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.sz__p.laeuft::before { animation: kg-lauf var(--sz-dauer, 5000ms) linear forwards; }
.sz__knopf { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 4px; padding: 24px 24px 0; text-align: left; color: #fff; }
.sz__p.ist-offen .sz__knopf { padding-bottom: var(--sz-inhalt, 150px); cursor: default; }
.sz__p:not(.ist-offen) .sz__knopf { padding-bottom: 24px; }
.sz__knopf:focus-visible { outline-offset: -6px; border-radius: 22px; }
.sz__nr { font: italic 400 20px/1 var(--serif); color: var(--gold-hell); }
.sz__titel { font: 500 clamp(24px, 2vw, 30px)/1.15 var(--serif); }
.sz__p:not(.ist-offen) .sz__titel { font-size: 20px; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.sz__inhalt { position: absolute; left: 24px; right: 24px; bottom: 24px; display: grid; gap: 12px; justify-items: start; pointer-events: none; }
.sz__p:not(.ist-offen) .sz__inhalt { visibility: hidden; opacity: 0; transform: translateY(8px); }
.sz__p.ist-offen .sz__inhalt { transition: opacity 0.35s var(--ease) 0.25s, transform 0.45s var(--ease) 0.25s; }
.sz__inhalt p { max-width: 30em; font-size: 17px; color: rgba(255, 255, 255, 0.88); }
.sz__marke { display: inline-flex; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; background: rgba(255, 255, 255, 0.16); color: #fff; }
.sz__marke--immer { background: var(--gold); color: var(--tief); }
.sz__material { display: flex; flex-wrap: wrap; gap: 8px; }
.sz__material span { padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.28); font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.9); }
.sz__fuss { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px 48px; align-items: center; margin-top: clamp(32px, 4vw, 48px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--linie); }
.sz__fuss q { font: italic 400 clamp(24px, 2.2vw, 32px)/1.25 var(--serif); color: var(--akzent-text); }
.sz__fuss p { font-size: 17px; color: var(--text-2); }
@media (prefers-reduced-motion: no-preference) {
  .sz__p.ist-offen img { transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .sz__p, .sz__p img, .sz__inhalt { transition: none !important; }
}
@media (max-width: 760px) {
  .sz__reihe { flex-direction: column; height: auto; gap: 10px; }
  .sz__p { flex: none; height: 84px; transition: height 0.5s var(--ease); }
  .sz__p.ist-offen { height: 440px; }
  .sz__p:not(.ist-offen) .sz__titel { writing-mode: horizontal-tb; transform: none; }
  .sz__p:not(.ist-offen) .sz__knopf { flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; padding: 0 20px; }
  .sz__knopf { padding: 20px 20px 0; }
  .sz__inhalt { left: 20px; right: 20px; bottom: 20px; }
  .sz__fuss { grid-template-columns: 1fr; }
}

/* Kundengeschichte: echte Bewertung, markierte Stellen steuern das Foto rechts */
.kg { padding-block: var(--abstand); background: #f7f3ee; }
.kg__in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 40px); align-items: stretch; margin-top: clamp(32px, 4vw, 48px); }
.kg__karte { margin: 0; padding: clamp(24px, 3vw, 40px); border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px #ece4d8, 0 40px 80px -60px rgba(11, 26, 58, 0.55); }
.kg__oben { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.kg__name { display: flex; align-items: center; gap: 12px; }
.kg__name b { display: block; color: #1c2435; font-size: 17px; }
.kg__name small { display: block; color: #6b7280; font-size: 13px; }
.kg__av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #e8f0fe; color: #1558b0; font-weight: 700; }
.kg__g { width: 24px; height: 24px; }
.kg__sterne { margin-top: 14px; }
.kg__sterne .i { width: 18px; height: 18px; }
.kg__text { margin: 14px 0 0; }
.kg__text p { font-size: 18px; line-height: 1.8; color: #1c2435; }
.kg__mark { display: inline; padding: 0 2px; border-radius: 3px; font: inherit; color: inherit; text-align: left; background: linear-gradient(transparent 55%, rgba(206, 158, 78, 0.42) 55%); cursor: pointer; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-color 0.2s var(--ease); }
.kg__mark.ist-aktiv { background-color: rgba(206, 158, 78, 0.42); }
.kg__mark sup { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 4px; border-radius: 50%; background: var(--navy); color: #fff; font: 700 12px var(--sans); vertical-align: 4px; transition: background-color 0.2s var(--ease); }
.kg__mark.ist-aktiv sup { background: var(--gold); color: var(--tief); }
.kg__hinweis { margin-top: 14px; font-size: 14px; color: var(--text-2); }
.kg__buehne { position: relative; min-height: 480px; border-radius: 24px; overflow: hidden; background: var(--tief); isolation: isolate; }
.kg__buehne img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.45s var(--ease); }
.kg__buehne img.ist-aktiv { opacity: 1; }
.kg__buehne::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11, 26, 58, 0) 42%, rgba(11, 26, 58, 0.9)); }
/* Fortschritt bis zum automatischen Wechsel */
.kg__buehne::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 3px; background: var(--gold); transform: scaleX(0); transform-origin: left; }
.kg__buehne.laeuft::before { animation: kg-lauf var(--kg-dauer, 5000ms) linear forwards; }
@keyframes kg-lauf { to { transform: scaleX(1); } }
.kg__symbol { position: absolute; top: 16px; left: 16px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.9); color: #4a5568; font-size: 11px; font-weight: 700; }
.kg__info { position: absolute; left: 28px; right: 28px; bottom: 26px; color: #fff; opacity: 0; transform: translateY(8px); transition: opacity 0.3s var(--ease), transform 0.4s var(--ease); pointer-events: none; }
.kg__info.ist-aktiv { opacity: 1; transform: none; }
.kg__info span { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--gold); color: var(--tief); font: 700 14px var(--sans); }
.kg__info h3 { margin-top: 10px; font: 500 clamp(24px, 2.2vw, 30px)/1.15 var(--serif); }
.kg__info p { margin-top: 6px; max-width: 28em; color: rgba(255, 255, 255, 0.86); }
@media (prefers-color-scheme: dark) { .kg { background: var(--flaeche); } }
@media (max-width: 960px) {
  .kg__in { grid-template-columns: 1fr; }
  .kg__buehne { order: -1; min-height: 0; aspect-ratio: 4 / 3; }
}

/* Untermenü unter Privatumzug (Seniorenumzug): Pfeil daneben, öffnet bei Maus, Tastatur und Tippen */
.nav__gruppe { position: relative; display: flex; align-items: center; gap: 2px; }
.nav__pfeil { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--text-2); }
.nav__pfeil .i { width: 14px; height: 14px; transition: transform 0.2s var(--ease); }
.nav__unter { position: absolute; top: calc(100% + 10px); left: -18px; min-width: 220px; padding: 8px; border-radius: 14px; background: var(--karte); box-shadow: 0 0 0 1px var(--linie), var(--schatten); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s; z-index: 50; }
.nav__unter::before { content: ""; position: absolute; inset: -12px 0 auto; height: 12px; }
.nav .nav__unter a:not(.knopf) { display: block; padding: 10px 12px; border-radius: 10px; background: none; }
.nav__gruppe:focus-within .nav__unter, .nav__gruppe.offen .nav__unter { opacity: 1; visibility: visible; transform: none; }
.nav__gruppe.offen .nav__pfeil .i { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) {
  .nav__gruppe:hover .nav__unter { opacity: 1; visibility: visible; transform: none; }
  .nav__gruppe:hover .nav__pfeil .i { transform: rotate(180deg); }
  .nav .nav__unter a:not(.knopf):hover { background: var(--flaeche); }
}
@media (max-width: 1080px) { .nav__gruppe { display: none; } }
@media (max-width: 960px) {
  .nav__gruppe { display: block; }
  .nav__pfeil { display: none; }
  .nav__unter { position: static; min-width: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; opacity: 1; visibility: visible; transform: none; }
  .nav .nav__unter a:not(.knopf) { padding: 14px 0 14px 20px; border-radius: 0; font-size: 17px; }
}

/* Untermenü Variante D1 (24.10.): kleines goldenes Dreieck, schlichtes weißes Feld mit goldener Linie oben */
.nav__pfeil { width: 24px; height: 28px; border-radius: 0; }
.nav__dreieck { display: block; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--gold); transition: transform 0.2s var(--ease); }
.nav__gruppe.offen .nav__dreieck { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) { .nav__gruppe:hover .nav__dreieck { transform: rotate(180deg); } }
.nav__unter { padding: 6px; border-radius: 0 0 12px 12px; border-top: 3px solid var(--gold); box-shadow: 0 18px 40px -20px rgba(11, 26, 58, 0.35); }
@media (max-width: 960px) { .nav__unter { border-top: 0; box-shadow: none; padding: 0; } }

/* ProvenExpert-Bewertungszeile im Fuß (Skript fügt den Text ein) */
/* Nur für die Daten an Google da, sichtbar soll es nicht sein (Nutzer 24.10.) */
.fuss__pe { display: none; }

/* ProvenExpert ProSeal: auf dem Handy über der festen Leiste (Anruf/Anfrage), damit der Knopf frei bleibt */
@media (max-width: 960px) { .pe-pro-seal { bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; } }

/* Startseite: Startbild läuft unten weich in den weißen Bewertungsabschnitt aus (statt harter Kante) */
.hero--weich { isolation: isolate; }
.hero--weich::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(90px, 12vw, 180px); z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgb(var(--weich-ziel, 255 255 255) / 0) 0%, rgb(var(--weich-ziel, 255 255 255) / 0.75) 55%, rgb(var(--weich-ziel, 255 255 255)) 100%); }
/* Unterseiten: Übergang in den warmen Bewertungsabschnitt (#f7f3ee) */
.hero--weich-warm { --weich-ziel: 247 243 238; }
.hero--weich-warm + .lp-stimmen { padding-top: clamp(40px, 5vw, 72px); }
.hero--weich + .bw { padding-top: clamp(40px, 5vw, 72px); }
/* Einlagerung: Übergang in den hellblaugrauen Vorteile-Abschnitt (#f3f6fa) */
.hero--weich-kuehl { --weich-ziel: 243 246 250; }
.hero--weich-kuehl + .el-vorteile { padding-top: clamp(40px, 5vw, 72px); }

/* Navigation: „Leistungen“ ohne eigene Seite, der Titel selbst klappt das Untermenü auf */
@media (min-width: 961px) { .nav .nav__unter a:not(.knopf) { white-space: nowrap; } }
.nav .nav__titel { width: auto; height: auto; display: inline-flex; align-items: center; gap: 8px; padding-block: 8px; font: inherit; color: var(--text); cursor: pointer; }
.nav__gruppe:has(.nav__unter [aria-current="page"]) > .nav__titel { color: var(--titel); box-shadow: inset 0 -2px var(--gold); }
@media (max-width: 960px) {
  .nav .nav__titel, .nav__gruppe:has(.nav__unter [aria-current="page"]) > .nav__titel { display: block; width: 100%; padding: 14px 0; border-bottom: 1px solid var(--linie); font-size: 18px; text-align: left; color: var(--text); cursor: default; pointer-events: none; box-shadow: none; }
  .nav .nav__titel .nav__dreieck { display: none; }
}

/* Brotkrumen-Zeile nicht anzeigen (Nutzer 24.10.: optisch unnötig). Für Google bleibt die BreadcrumbList im JSON-LD. */
.krumen { display: none !important; }

/* Startseite Bewertungen B1 (24.10.): drei Karten fest nebeneinander statt endloser Reihe, darunter Link zu Google */
.bw--fest .bw__karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; scroll-snap-type: none; width: min(1240px, 100% - 2 * clamp(16px, 4vw, 48px)); margin-inline: auto; padding: 4px 0 0; }
.bw--fest .bw__karte { width: auto; }
.bw--fest .bw__karte:nth-child(n+4) { display: none; }
.bw__mehrlink { display: flex; justify-content: flex-end; margin-top: 20px; }
.bw__mehrlink a { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; color: var(--titel); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.bw__mehrlink .i { width: 18px; height: 18px; color: var(--gold-text); }
@media (max-width: 960px) { .bw--fest .bw__karten { grid-template-columns: 1fr; } .bw__mehrlink { justify-content: flex-start; } }

/* Cookie-Hinweis (einwilligung.js): klein unten links wie auf jm-haushaltsaufloesungen.de */
.einwilligung { position: fixed; left: 16px; bottom: 16px; z-index: 10000; width: min(420px, calc(100vw - 32px)); padding: 18px 20px; border-radius: 16px; background: var(--karte); color: var(--text); box-shadow: 0 0 0 1px var(--linie), 0 24px 48px -20px rgba(11, 26, 58, 0.45); font-size: 15px; line-height: 1.5; }
.einwilligung a { color: var(--titel); text-decoration: underline; text-underline-offset: 3px; }
.einwilligung__knoepfe { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.einwilligung button { min-height: 44px; padding: 0 18px; border-radius: 999px; font-weight: 700; font-size: 15px; }
.einwilligung__nein { background: var(--karte); color: var(--titel); box-shadow: inset 0 0 0 1.5px var(--linie); }
.einwilligung__ja { background: var(--gold); color: var(--tief); }
@media (max-width: 960px) { .einwilligung { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); } }
.fuss__cookies { display: inline-flex; align-items: center; min-height: 44px; color: var(--titel); font: inherit; }
@media (hover: hover) { .fuss__cookies:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--gold); } }
/* Platz für das schwebende ProvenExpert-Siegel rechts unten, damit es die Fußzeile nicht verdeckt */
@media (min-width: 961px) { .fuss__unten { padding-right: 190px; } }