/* John & Martin Entrümpelungen, statische HTML-Seite. Marke: Rot und Anthrazit (Logo), Montserrat.
   Aufbau und Bausteine wie johnundmartin.de (Umzüge). */

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

:root { color-scheme: light only;
  /* Logo-Farben: Rot für Knöpfe und Akzente, Anthrazit für Überschriften und dunkle Bänder.
     Die Namen navy/gold bleiben aus der Vorlage, damit die Bausteine gleich bleiben. */
  --navy: #2b3433;
  --tief: #222a29;
  --anthrazit: #45514f;
  --gold: #c41e2c;
  --gold-hell: #a51925;
  --gold-text: #b81c29;
  --rot-hell: #f2959c;
  --grund: #ffffff;
  --flaeche: #f4f3f1;
  --flaeche-2: #eae8e4;
  --karte: #ffffff;
  --text: #1f2524;
  --text-2: #4d5655;
  --linie: #dedbd6;
  --titel: var(--navy);
  --akzent-text: var(--gold-text);
  --schatten: 0 24px 48px -28px rgba(28, 34, 33, 0.4);
  --serif: var(--sans);
  --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 not all /* Dunkelmodus abgeschaltet (24.10.): Seite immer hell */ {
  :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); }
/* overscroll-behavior: none entfernt (24.10.): nahm Safari/Trackpad das weiche Nachfedern, Scrollen wirkte steif */
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: #f6d3d6; 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: #fff; 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: #fff; 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 not all /* Dunkelmodus abgeschaltet (24.10.): Seite immer hell */ { .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); }


.hero { position: relative; isolation: isolate; overflow: hidden; background: #f2f0ec; color: #222a29; }
.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__buehne::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(242, 240, 236, 0.95) 0%, rgba(242, 240, 236, 0.85) 26%, rgba(242, 240, 236, 0.3) 38%, rgba(242, 240, 236, 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: #3d4746; 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; }

/* 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: #f5f3f0; 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 #e3dfd9; 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 #d6d1c9; 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: #3d4746; 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: #e9e6e1; box-shadow: 0 30px 60px -40px rgba(28, 34, 33, 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: #e3dfd9; overflow: hidden; }
@media not all /* Dunkelmodus abgeschaltet (24.10.): Seite immer hell */ {
  .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: #fff; }
}
.weg__leiste i { display: block; height: 100%; background: var(--gold); transform: scaleX(0.2); transform-origin: left; transition: transform 0.4s var(--ease); }





/* Team */
/* Sandton trennt das Team von den weißen Nachbarn (Schutz, Standorte); im dunklen Modus die dunkle Fläche */
.team { --team-grund: #f5f3f0; padding-block: var(--abstand); background: var(--team-grund); }
@media not all /* Dunkelmodus abgeschaltet (24.10.): Seite immer hell */ { .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; } }


/* 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(28, 34, 33, 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; }
.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: #f5f3f0; background: var(--anfrage-grund); padding-block: var(--abstand); scroll-margin-top: calc(32px - var(--abstand)); }
@media not all /* Dunkelmodus abgeschaltet (24.10.): Seite immer hell */ { .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%, #6b6560), 0 40px 80px -40px rgba(28, 34, 33, 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: 42% 50%; }
.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 not all /* Dunkelmodus abgeschaltet (24.10.): Seite immer hell */ { .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 not all /* Dunkelmodus abgeschaltet (24.10.): Seite immer hell */ { .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 not all /* Dunkelmodus abgeschaltet (24.10.): Seite immer hell */ { .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 not all /* Dunkelmodus abgeschaltet (24.10.): Seite immer hell */ { .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: #f5f3f0; background: var(--danke-grund); padding-block: clamp(48px, 7vw, 104px); }
@media not all /* Dunkelmodus abgeschaltet (24.10.): Seite immer hell */ { .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; 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 not all /* Dunkelmodus abgeschaltet (24.10.): Seite immer hell */ { .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); } }
h1:has(.fm-h1k), h1:has(.fm-h1k) em { hyphens: manual; -webkit-hyphens: manual; }
.fm-h1k { display: block; margin-bottom: 10px; font: 600 15px/1.4 var(--sans); letter-spacing: 0; color: #6e6e73; }
.fuss__tel { font: 400 26px/1.2 var(--serif); }
.fuss__orte { padding-block: 0 clamp(28px, 4vw, 44px); } .fuss__orte .fuss__k { margin: 0 0 12px; font-size: 15px; } .fuss__orte ul { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 0; padding: 0; list-style: none; } .fuss__orte a { display: inline-flex; align-items: center; min-height: 34px; font-size: 15px; color: var(--text-2); } @media (hover: hover) { .fuss__orte a:hover { color: var(--akzent-text); } }
.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: #f2f0ec; }
  .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, #f2f0ec 0%, rgba(242, 240, 236, 0.6) 18%, rgba(242, 240, 236, 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: #f5f3f0; 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); }

/* 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); }

/* 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(28, 34, 33, 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: #9aa09f; }
.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: #fff; }
@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; }
}


/* 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: #222a29; 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(28, 34, 33, 0.05) 30%, rgba(28, 34, 33, 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(--rot-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: #fff; }
.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; }
}


/* 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; }
  /* visibility: inherit statt visible: sonst bleiben die Unterpunkte bei geschlossenem Menü unsichtbar anklickbar (Fehler 24.10.) */
  .nav__unter { position: static; min-width: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; opacity: 1; visibility: inherit; 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(28, 34, 33, 0.35); }
@media (max-width: 960px) { .nav__unter { border-top: 0; box-shadow: none; padding: 0; } }


/* 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 (#f5f3f0) */
.hero--weich-warm { --weich-ziel: 245 243 240; }
.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 (#f4f3f1) */
.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; }


/* Cookie-Hinweis (einwilligung.js), 24.10. v4: Karte in der Mitte mit leichtem Schleier, Startansicht + Einstellungen mit Schaltern */
.einwilligung { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 16px; background: rgba(28, 34, 33, 0.45); }
.ew-karte { position: relative; width: min(560px, 100%); max-height: calc(100dvh - 32px); overflow: auto; padding: 28px 28px 22px; border-radius: 22px; background: #fff; color: var(--text); box-shadow: 0 40px 80px -30px rgba(28, 34, 33, 0.6); font-size: 15.5px; line-height: 1.55; }
.ew-karte p { margin: 0 0 12px; color: var(--text-2); }
.ew-titel { margin: 0 0 10px !important; font: 700 24px/1.2 var(--sans); letter-spacing: -.02em; color: var(--titel) !important; }
.ew-liste { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 6px; color: var(--text-2); }
.ew-liste b { color: var(--text); }
.ew-links { display: flex; gap: 18px; font-size: 14px; }
.ew-links a { color: var(--titel); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--linie); }
.ew-knoepfe { display: grid; gap: 10px; margin-top: 18px; }
.ew-knoepfe button { min-height: 50px; padding: 0 16px; border-radius: 999px; font-weight: 700; font-size: 16px; }
.ew-voll { background: var(--navy); color: #fff; }
@media (hover: hover) { .ew-voll:hover { background: #222a29; } }
.ew-text { background: none; color: var(--titel); text-decoration: underline; text-underline-offset: 4px; min-height: 40px !important; }
.ew-rand { background: #fff; color: var(--titel); box-shadow: inset 0 0 0 1.5px var(--navy); }
.ew-knoepfe--drei { grid-template-columns: 1fr 1fr 1fr; }
.ew-knoepfe--drei button { font-size: 14.5px; padding: 0 10px; }
.ew-zweck { padding: 16px 0; border-top: 1px solid var(--linie); }
.ew-zweck__kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px; }
.ew-zweck__kopf b { font-size: 16.5px; color: var(--text); }
.ew-zweck p { margin: 0 0 6px; font-size: 14.5px; }
.ew-immer { font-size: 14px; font-weight: 700; color: #1a7f3c; }
.ew-zweck details { font-size: 14px; }
.ew-zweck summary { cursor: pointer; color: var(--titel); font-weight: 600; }
.ew-dienst { display: grid; grid-template-columns: 120px 1fr; gap: 4px 12px; margin: 10px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--flaeche); font-size: 13.5px; }
.ew-dienst dt { color: var(--text-2); } .ew-dienst dd { margin: 0; color: var(--text); }
.ew-schalter { position: relative; display: inline-flex; cursor: pointer; }
.ew-schalter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ew-schalter span[aria-hidden] { width: 50px; height: 28px; border-radius: 999px; background: #cfcbc5; transition: background 0.2s; position: relative; }
.ew-schalter span[aria-hidden]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.2s; }
.ew-schalter input:checked + span { background: var(--navy); }
.ew-schalter input:checked + span::after { transform: translateX(22px); }
.ew-schalter input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.ew-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 960px) {
  .einwilligung { place-items: end center; padding: 0; }
  .ew-karte { width: 100%; max-height: 88dvh; border-radius: 22px 22px 0 0; padding: 24px 20px calc(18px + env(safe-area-inset-bottom)); }
  .ew-titel { font-size: 23px; }
  .ew-knoepfe--drei { grid-template-columns: 1fr 1fr; } .ew-knoepfe--drei [data-ew="ja"] { grid-column: 1 / -1; order: -1; }
}
.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); } }

/* Nur Handy (24.10.): keine Telefonleiste oben und keine Telefonnummer unter dem Knopf im Einstieg.
   Anrufen geht über den Telefonknopf in der festen Leiste unten. Menü sitzt dadurch direkt unter dem Kopf. */
@media (max-width: 960px) {
  .topbar { display: none; }
  .hero .hero__tel, .lp-hero .hero__tel { display: none; }
  .nav { top: 69px; }
}

/* Nur Handy (24.10., Variante 4): statt Leiste drei runde Knöpfe rechts unten (WhatsApp, Anrufen, Anfrage).
   Knopf im Einstieg kürzer („Besichtigung anfragen →“) und nicht mehr über die ganze Breite. */
.nur-handy { display: none; }
.nur-gross { display: contents; } /* Text bleibt am Computer ein Stück, gleicher Wortabstand wie vorher */
@media (max-width: 960px) {
  .nur-gross { display: none; }
  .nur-handy { display: inline-flex; }
  .hero__aktion .knopf, .lp-hero .hero__aktion .knopf { width: auto; display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 26px; }
  .hero__aktion .knopf .i { width: 18px; height: 18px; }
  body { padding-bottom: 0; }
  .leiste { left: auto; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); padding: 0; gap: 12px; flex-direction: column; background: none; }
  .leiste__wa, .leiste__tel, .leiste .leiste__form { width: 56px; height: 56px; min-height: 0; flex: none; display: grid; place-items: center; padding: 0; border-radius: 50%; box-shadow: 0 12px 28px -10px rgba(28, 34, 33, 0.55); }
  .leiste__wa { background: #25d366; color: #fff; }
  .leiste__tel { background: var(--tief); color: #fff; }
  .leiste .leiste__form { background: var(--gold); color: #fff; }
  .leiste .i { width: 26px; height: 26px; }
  .einwilligung { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}



/* Nur Handy (24.10.): Vergleich als zwei Spalten nebeneinander, rechts durchgehend dunkelblau mit goldenen Haken */
@media (max-width: 960px) {
.vg .vg__rahmen{border-radius:20px;background:var(--karte)}
.vg .vg__tabelle{background:none}
.vg .vg__tabelle thead{display:block}
.vg .vg__tabelle thead tr,.vg .vg__tabelle tbody tr{display:grid !important;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);grid-template-rows:auto 1fr}
.vg .vg__tabelle td,.vg .vg__tabelle th{hyphens:manual;overflow-wrap:break-word}
.vg .vg__tabelle td.vg__wir{font-size:13.5px !important;padding-right:12px !important}
.vg .vg__tabelle td.vg__ueblich{align-self:stretch}
.vg .vg__tabelle thead td{display:none}
.vg .vg__tabelle thead th{padding:18px 14px 14px;font:700 11px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--text-2)}
.vg .vg__tabelle thead th.vg__wir{color: var(--rot-hell);background:var(--tief);padding-left:14px !important}
.vg .vg__tabelle tbody tr{border-top:0 !important;position:relative}
.vg .vg__tabelle th[scope="row"]{grid-column:1;grid-row:1;padding:16px 14px 2px;font:700 13px/1.3 var(--sans);color:var(--titel);background:none}
.vg .vg__tabelle td.vg__ueblich{grid-column:1;grid-row:2;padding:2px 14px 16px 14px !important;font-size:13.5px;line-height:1.45;color:var(--text-2);border-bottom:1px solid var(--linie)}
.vg .vg__ueblich span::before{content:none}
.vg .vg__ueblich .i{display:none}
.vg .vg__tabelle td.vg__wir{grid-column:2;grid-row:1/3;display:flex !important;gap:10px;align-items:flex-start;padding:16px 14px !important;font-size:14px;line-height:1.45;border-bottom:1px solid rgba(255,255,255,.1)}
.vg .vg__tabelle td.vg__wir::before{display:none}
.vg .vg__tabelle td.vg__wir .i{position:static;flex:none;width:20px;height:20px;padding:4px;margin-top:1px}
.vg .vg__tabelle tbody tr:last-child td{border-bottom:0}
}

/* Ablauf: Schritte sind antippbar (24.10.) */
.weg__schritte li { cursor: pointer; }
.weg__schritte li:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; border-radius: 12px; }
@media (hover: hover) and (pointer: fine) { .weg__schritte li:not(.ist-aktiv):hover { opacity: 0.85; } }

/* Kennen Sie das? (Schmerz-Block nach der Vergleichstabelle) */
.ks { padding-block: clamp(72px, 9vw, 130px); background: #fff; }
.ks__ueber { margin: 0 0 16px; font: 700 13px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.ks__titel { margin: 0 0 44px; font: 800 clamp(30px, 3.2vw, 46px)/1.1 var(--sans); letter-spacing: -.025em; color: #15181c; max-width: 22em; text-wrap: balance; }
.ks__titel span { color: var(--gold); }
.ks__raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.ks__k { padding: 28px 24px; background: #f6f7f9; border-radius: 16px; }
.ks__nr { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fde8ea; color: var(--gold); font: 800 13px var(--sans); }
.ks__k h3 { margin: 18px 0 8px; font: 800 20px/1.25 var(--sans); color: #15181c; letter-spacing: -.01em; }
.ks__k p { margin: 0; font-size: 16px; line-height: 1.55; color: #5b616b; }
.ks__wende { margin: 56px 0 0; text-align: center; font: 800 clamp(26px, 2.6vw, 36px)/1.2 var(--sans); color: #15181c; letter-spacing: -.02em; }
.ks__wende::after { content: ""; display: block; width: 2px; height: 56px; margin: 28px auto 0; background: linear-gradient(var(--gold), transparent); }
@media (max-width: 960px) { .ks__raster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ks__raster { grid-template-columns: 1fr; } }


/* Leistungen zum An- und Abwählen (übernommen von johnundmartin.de) */
.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(20, 22, 24, 0) 30%, rgba(20, 22, 24, 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: #fff; }
.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 not all /* Dunkelmodus abgeschaltet (24.10.): Seite immer hell */ {
  .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); }

/* Knopf direkt unter dem Ablauf (Startseite, Test 28.10.) */
.weg-cta { background: #f5f3f0; padding-bottom: var(--abstand); margin-top: calc(var(--abstand) * -0.5); }
.weg-cta__in { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 28px; }

/* Ablauf im Milchglas-Look (Startseite, gewählt 28.10.) */
.ag { position: relative; padding-block: clamp(90px, 10vw, 140px); overflow: hidden; isolation: isolate; background: #2a2622; }
.ag__hg { position: absolute; inset: -20px; z-index: -2; }
.ag__hg img { display: block; width: 100%; height: 100%; object-fit: cover; filter: blur(5px) saturate(1) brightness(1.1) sepia(.15); }
.ag::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(60,40,25,.35), rgba(40,28,18,.55)); }
.ag__titel { margin-bottom: clamp(40px, 5vw, 64px); text-align: center; color: #fff; } .ag__titel em { color: #f3d9b8; }
.ag__reihe { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.ag__k { padding: 12px 12px 22px; border-radius: 22px; background: rgba(255,250,244,.24); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), 0 20px 50px rgba(0,0,0,.18); }
.ag__f { position: relative; margin: 0 0 16px; aspect-ratio: 4/3.4; border-radius: 14px; overflow: hidden; }
.ag__f img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) contrast(1.03); }
.ag__sym { position: absolute; right: 8px; bottom: 6px; font: 500 11px var(--sans); color: rgba(255,255,255,.9); text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.ag__nr { display: block; padding-inline: 8px; font: 600 12px var(--sans); letter-spacing: .12em; color: #f3d9b8; }
.ag__k h3 { margin: 4px 0 6px; padding-inline: 8px; font: 400 25px/1.15 var(--serif); color: #fff; }
.ag__k p { margin: 0; padding-inline: 8px; font-size: 15.5px; line-height: 1.5; color: #ece6dc; }
.ag__cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 28px; margin-top: clamp(44px, 5vw, 64px); }
.ag__cta .anfrage__g { color: #e6e0d7; } .ag__cta .anfrage__g b { color: #fff; }
@media (max-width: 960px) { .ag__reihe { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ag__reihe { grid-template-columns: 1fr; } .ag__f { aspect-ratio: 16/10; } }


/* Schutz als Stapelkarten (gewählt 28.10.) */
.ss { padding-block: var(--abstand); background: #fff; }
.ss__kopf { max-width: 46em; margin-bottom: clamp(36px, 4vw, 56px); }
.ss__lead { margin: 16px 0 0; max-width: 34em; font-size: 18px; line-height: 1.6; color: var(--text-2); }
.ss__stapel { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px; timeline-scope: --ss0, --ss1, --ss2, --ss3, --ss4; }
.ss__k { position: sticky; top: calc(100px + var(--i) * 16px); }
.ss__k0 { view-timeline-name: --ss0; } .ss__k1 { view-timeline-name: --ss1; } .ss__k2 { view-timeline-name: --ss2; } .ss__k3 { view-timeline-name: --ss3; } .ss__k4 { view-timeline-name: --ss4; }
.ss__in { display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: center; padding: 26px; border-radius: 28px; background: #fff; box-shadow: 0 -12px 40px rgba(0,0,0,.08), 0 0 0 1px var(--linie); transform-origin: 50% 0; }
.ss__f { margin: 0; height: min(52vh, 440px); border-radius: 18px; overflow: hidden; }
.ss__f img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ss__nr { font: 400 15px var(--serif); color: var(--gold); }
.ss__t h3 { margin: 8px 0 14px; font: 400 clamp(32px, 3.2vw, 48px)/1.08 var(--serif); color: var(--titel); }
.ss__t p { margin: 0; font-size: 19px; line-height: 1.6; color: var(--text-2); max-width: 24em; }
@supports (animation-timeline: view()) {
  .ss__k0 > .ss__in { animation: ss-weg linear both; animation-timeline: --ss1; animation-range: entry 0% entry 100%; }
  .ss__k1 > .ss__in { animation: ss-weg linear both; animation-timeline: --ss2; animation-range: entry 0% entry 100%; }
  .ss__k2 > .ss__in { animation: ss-weg linear both; animation-timeline: --ss3; animation-range: entry 0% entry 100%; }
  .ss__k3 > .ss__in { animation: ss-weg linear both; animation-timeline: --ss4; animation-range: entry 0% entry 100%; }
}
@keyframes ss-weg { to { transform: scale(.92); filter: brightness(.75); } }
.ss__fuss { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px 40px; margin-top: clamp(56px, 7vw, 96px); padding: 32px 36px; border-radius: 22px; background: #f6f1ea; }
.ss__fuss q { font: italic 400 clamp(24px, 2.4vw, 32px) var(--serif); color: var(--gold); }
.ss__fuss p { margin: 6px 0 0; color: var(--text-2); }
@media (max-width: 960px) {
  .ss__in { grid-template-columns: 1fr; gap: 18px; padding: 16px; }
  .ss__f { height: 230px; }
  .ss__k { top: calc(80px + var(--i) * 10px); }
}
@media (prefers-reduced-motion: reduce) { .ss__in { animation: none !important; } }


/* Schutz als Übergabeprotokoll mit Umschalter (gewählt 28.10., Fassung G von /protokoll/) */
.pp { --tinte: #2b3f6b; --gruen: #3f7a4f; --papier: #fffefb; padding-block: var(--abstand); position: relative; overflow: clip; }
.pp figure { margin: 0; } .pp img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pp ol, .pp ul { list-style: none; margin: 0; padding: 0; }
.pp .titel { margin: 0; }
.pp-marke { display: block; margin-bottom: 16px; font: 600 12.5px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.pp-text p { margin: 18px 0 0; max-width: 31em; font-size: 18px; line-height: 1.65; color: var(--text-2); } .pp-text p b { color: var(--titel); font-weight: 600; }
.pp-knopf { margin-top: 32px; } .pp-mitte { display: flex; justify-content: center; margin-top: clamp(40px, 5vw, 64px); }
.pp svg path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
/* Papier */
.pp-blatt { position: relative; background: var(--papier); border-radius: 4px; padding: clamp(26px, 3vw, 44px); box-shadow: 0 1px 0 #ebe5dc, 0 30px 70px rgba(60,40,20,.15), 0 6px 18px rgba(60,40,20,.07); background-image: linear-gradient(90deg, transparent 0 calc(100% - 1px), transparent), repeating-linear-gradient(180deg, transparent 0 55px, #f1ece3 55px 56px); }
.pp-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 16px; margin-bottom: 6px; border-bottom: 2px solid var(--titel); }
.pp-kopf b { font: 400 27px var(--serif); color: var(--titel); } .pp-kopf span { font-size: 13px; color: var(--text-2); }
.pp-z { display: grid; grid-template-columns: 1fr auto 38px; gap: 14px; align-items: center; min-height: 56px; border-bottom: 1px dashed #ddd5c9; font-size: 16.5px; color: var(--titel); }
.pp-z em { font: italic 400 19px var(--serif); color: var(--gruen); }
.pp-kreis { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--gruen); color: var(--gruen); }
.pp-hk { width: 19px; height: 19px; stroke-width: 2.6; stroke-dasharray: 26; }
.pp-unter { display: flex; flex-direction: column; align-items: flex-end; margin-top: 22px; color: var(--tinte); }
.pp-us { width: 190px; height: 52px; stroke-width: 2.2; stroke-dasharray: 420; }
.pp-unter span { padding-top: 6px; border-top: 1px solid #8a8378; font-size: 12px; color: var(--text-2); }
.pp-stempel { display: grid; place-items: center; align-content: center; width: 124px; height: 124px; border-radius: 50%; border: 3px double #b0413e; color: #b0413e; text-align: center; transform: rotate(-12deg); mix-blend-mode: multiply; }
.pp-stempel span { font: 600 9.5px var(--sans); letter-spacing: .14em; text-transform: uppercase; } .pp-stempel b { margin: 4px 0; font: 700 italic 17px/1 var(--serif); }
@keyframes pp-zug { to { stroke-dashoffset: 0; } }
@keyframes pp-auf { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pp-stempel { 0% { opacity: 0; transform: rotate(-12deg) scale(1.8); } 70% { opacity: 1; transform: rotate(-12deg) scale(.94); } 100% { opacity: 1; transform: rotate(-12deg) scale(1); } }
@supports (animation-timeline: view()) {
  .pp-z .pp-hk { stroke-dashoffset: 26; animation: pp-zug linear both; animation-timeline: view(); animation-range: cover calc(28% + var(--d, 0%)) cover calc(36% + var(--d, 0%)); }
  .pp-z em { opacity: 0; animation: pp-auf linear both; animation-timeline: view(); animation-range: cover calc(24% + var(--d, 0%)) cover calc(32% + var(--d, 0%)); }
  .pp-us { stroke-dashoffset: 420; animation: pp-zug linear both; animation-timeline: view(); animation-range: cover 30% cover 48%; }
  .pp-stempel { opacity: 0; animation: pp-stempel linear both; animation-timeline: view(); animation-range: cover 38% cover 46%; }
}

/* 1 Klemmbrett */
.pp1 { background: #f5f3f0; }
.pp1__raster { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(40px, 6vw, 100px); align-items: center; }
.pp1__brett { position: relative; padding: 46px 22px 22px; border-radius: 22px; background: linear-gradient(135deg, #8a6a4a, #6e5238); box-shadow: 0 40px 80px rgba(60,40,20,.25), inset 0 1px 0 rgba(255,255,255,.2); transform: rotate(1.2deg); }
.pp1__klemme { position: absolute; left: 50%; top: -14px; width: 150px; height: 58px; transform: translateX(-50%); border-radius: 10px 10px 16px 16px; background: linear-gradient(180deg, #e8e8e6, #a9aaa8 60%, #c9cac8); box-shadow: 0 6px 14px rgba(0,0,0,.25); z-index: 2; }
.pp1__klemme i { position: absolute; left: 50%; top: 10px; width: 44px; height: 14px; transform: translateX(-50%); border-radius: 8px; background: #7d7e7c; box-shadow: inset 0 2px 3px rgba(0,0,0,.4); }
.pp1__blatt { border-radius: 3px; }
.pp1__kopf { display: flex; justify-content: space-between; align-items: baseline; padding-top: 10px; }
.pp1__kopf b { font: 400 30px var(--serif); color: var(--titel); } .pp1__kopf span { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.pp1__daten { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 18px 0 20px; padding: 14px 0; border-block: 1px solid #e3ddd3; }
.pp1__daten dt { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); } .pp1__daten dd { margin: 4px 0 0; font: italic 17px var(--serif); color: var(--tinte); }
.pp1__th { display: grid; grid-template-columns: 1fr auto 38px; gap: 14px; padding-bottom: 8px; border-bottom: 2px solid var(--titel); font: 600 11px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.pp1__fuss { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-top: 8px; }
.pp1__fuss .pp-stempel { order: -1; }

/* 3 Zwei Protokolle */
.pp3 { background: #f5f3f0; }
.pp3__kopf { max-width: 46em; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; } .pp3__kopf p { margin: 16px auto 0; max-width: 34em; font-size: 18px; line-height: 1.6; color: var(--text-2); }
.pp3__paar { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.pp3__blatt--ohne { transform: rotate(-1.5deg); opacity: .92; } .pp3__blatt--mit { transform: rotate(1deg) translateY(24px); }
.pp3__etikett { position: absolute; top: -14px; left: 28px; padding: 6px 14px; border-radius: 999px; background: #b0413e; color: #fff; font: 600 12px var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.pp3__etikett--gut { background: var(--gruen); }
.pp3__rot { color: #b0413e !important; }
.pp3__x { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid #b0413e; color: #b0413e; font-size: 14px; }
.pp3__folge { margin: 20px 0 0; font: italic 19px var(--serif); color: #b0413e; text-align: right; }
.pp3__klein { margin: 48px 0 0; text-align: center; font-size: 12.5px; color: var(--text-2); }

/* F/G Kombi */
.pp6 { background: #f5f3f0; }
.ppk__paar { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: start; padding-top: 20px; }
.ppk__brett { transform: rotate(-1.4deg); }
.ppk__brett--mit { transform: rotate(1.2deg) translateY(28px); }
.ppk__brett--ohne .pp1__blatt { filter: saturate(.9); }
.ppk__brett .pp3__etikett { top: -16px; left: 22px; z-index: 3; }
.ppk__fuss { align-items: center; } .ppk__fuss .pp3__folge { margin: 0; text-align: left; flex: 1; }
.pp-stempel.ppk__rot { order: 2; }
.ppk__satz { margin: clamp(56px, 6vw, 80px) auto 0; max-width: 34em; text-align: center; font-size: 19px; line-height: 1.6; color: var(--text-2); } .ppk__satz b { color: var(--titel); font-weight: 600; }
.pp7 { background: #f5f3f0; }
.ppu { position: relative; display: grid; }
.pp .ppu > input { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; margin: 0; pointer-events: none; }
.ppu__schalter { position: relative; justify-self: center; display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 34px; padding: 5px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--linie), 0 8px 24px rgba(60,40,20,.08); }
.ppu__schalter label { position: relative; z-index: 1; padding: 12px 22px; text-align: center; font: 600 14.5px var(--sans); color: var(--text-2); cursor: pointer; transition: color .3s; }
.ppu__schalter i { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 999px; background: var(--gruen); transition: transform .45s cubic-bezier(.2,.8,.2,1), background .3s; }
#ppu-ohne:checked ~ .ppu__schalter i { background: #b0413e; }
#ppu-mit:checked ~ .ppu__schalter i { transform: translateX(100%); }
#ppu-ohne:checked ~ .ppu__schalter label[for="ppu-ohne"], #ppu-mit:checked ~ .ppu__schalter label[for="ppu-mit"] { color: #fff; }
#ppu-ohne:focus-visible ~ .ppu__schalter, #ppu-mit:focus-visible ~ .ppu__schalter { outline: 2px solid var(--titel); outline-offset: 3px; }
.ppu__seite { grid-area: 3 / 1; transition: opacity .4s, transform .5s cubic-bezier(.2,.8,.2,1); }
.ppu .ppk__brett, .ppu .ppk__brett--mit { transform: rotate(1deg); }
#ppu-mit:checked ~ .ppu__seite--ohne, #ppu-ohne:checked ~ .ppu__seite--mit { opacity: 0; transform: translateY(14px) rotate(-1deg); pointer-events: none; visibility: hidden; }
.ppu .ppk__brett .pp3__etikett { display: none; }

@media (max-width: 960px) {
  .ppk__paar { grid-template-columns: 1fr; } .ppk__brett--mit { transform: rotate(1deg); }
  .pp1__raster, .pp2__raster, .pp3__paar, .pp5__raster { grid-template-columns: 1fr; }
  .pp2__links { position: relative; top: 0; } .pp3__blatt--mit { transform: rotate(1deg); }
  .pp4 .pp-z { grid-template-columns: 34px 1fr 40px; } .pp4 .pp-z em { grid-column: 2; grid-row: 2; padding-bottom: 14px; }
  .pp4__fuss { flex-direction: column; align-items: flex-start; }
  .pp5__tisch { padding: 30px 0 230px; } .pp5__foto { width: 150px; } .pp5__foto--a { top: auto; bottom: -10px; left: 10px; right: auto; } .pp5__foto--b { right: 10px; bottom: -20px; }
}
@media (prefers-reduced-motion: reduce) { .pp *, .pp *::after { animation: none !important; opacity: 1 !important; stroke-dashoffset: 0 !important; } }
.pp1__raster > *, .ppu, .ppu__seite { min-width: 0; }
@media (max-width: 600px) {
  .pp1__brett { padding: 40px 10px 12px; border-radius: 16px; }
  .pp1__klemme { width: 120px; height: 50px; }
  .pp-blatt { padding: 22px 16px; }
  .pp1__kopf { flex-direction: column; gap: 4px; } .pp1__kopf b { font-size: 25px; }
  .pp1__daten { grid-template-columns: 1fr; gap: 10px; }
  .pp-z { grid-template-columns: 1fr auto 30px; gap: 10px; min-height: 58px; font-size: 14.5px; line-height: 1.3; }
  .pp-z em { font-size: 16px; text-align: right; }
  .pp-kreis, .pp3__x { width: 28px; height: 28px; }
  .pp1__th { grid-template-columns: 1fr auto 30px; gap: 10px; }
  .pp-stempel { width: 96px; height: 96px; } .pp-stempel b { font-size: 14px; } .pp-stempel span { font-size: 8px; }
  .pp-us { width: 140px; height: 40px; }
  .ppk__fuss .pp3__folge { font-size: 16px; }
  .ppu__schalter label { padding: 11px 16px; font-size: 13.5px; }
}

/* Gewerbeseiten: Symbolbild-Hinweis im Hero und Räume mit Bildern (28.10.) */
.hero__sym { position: absolute; right: 14px; bottom: 10px; font: 500 11px var(--sans); color: rgba(255,255,255,.9); text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.gr { padding-block: var(--abstand); background: #fff; }
.gr__kopf { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: end; margin-bottom: clamp(36px, 4vw, 56px); }
.gr__kopf .titel { margin: 0; } .gr__kopf p { margin: 0; font-size: 18px; line-height: 1.6; color: var(--text-2); }
.gr__raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.4vw, 32px); }
.gr__k { display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; background: #f5f3f0; box-shadow: 0 0 0 1px var(--linie); }
.gr__f { position: relative; margin: 0; aspect-ratio: 16/9.5; overflow: hidden; }
.gr__f img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.gr__k:hover .gr__f img { transform: scale(1.04); }
.gr__sym { position: absolute; right: 12px; bottom: 10px; font: 500 11px var(--sans); color: rgba(255,255,255,.9); text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.gr__t { padding: 24px 28px 28px; }
.gr__t h3 { margin: 0 0 8px; font: 400 clamp(24px, 2.2vw, 30px)/1.15 var(--serif); color: var(--titel); }
.gr__t p { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--text-2); }
.gr__link { display: inline-block; margin-top: 12px; font-weight: 600; color: var(--titel); text-decoration: none; border-bottom: 1px solid var(--gold); }
@media (max-width: 960px) { .gr__kopf, .gr__raster { grid-template-columns: 1fr; } .gr__kopf { gap: 16px; } }
@media (prefers-reduced-motion: reduce) { .gr__k:hover .gr__f img { transform: none; } }

/* Gewerbe: Vertrauenspunkte im Hero, Vorher/Nachher-Bühne (29.10.) */
.hero__punkte { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 14.5px; font-weight: 600; color: var(--text-2); }
.hero__punkte li { display: inline-flex; align-items: center; gap: 8px; }
.hero__punkte a { display: inline-flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; }
.hero__punkte .i { width: 18px; height: 18px; color: var(--akzent-text); }
.vn { position: relative; background: #2a2622; }
.vn__bahn { height: 300vh; view-timeline: --vn; }
.vn__buehne { position: sticky; top: 0; height: 100dvh; overflow: hidden; isolation: isolate; }
.vn__b { position: absolute; inset: 0; z-index: -2; margin: 0; }
.vn__b img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vn__nach { clip-path: inset(0 0 0 100%); }
.vn__buehne::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(30,22,15,.6), rgba(30,22,15,.1) 55%, rgba(30,22,15,0)); }
.vn__linie { position: absolute; top: 0; bottom: 0; left: 100%; width: 3px; background: #fff; box-shadow: 0 0 24px rgba(0,0,0,.45); z-index: -1; }
.vn__marke { position: absolute; top: 96px; padding: 7px 14px; border-radius: 999px; background: rgba(20,16,12,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font: 600 12px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.vn__marke--vor { right: 24px; } .vn__marke--nach { right: 24px; opacity: 0; }
.vn__text { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 26px; }
.vn__glas { max-width: 560px; padding: clamp(24px, 3vw, 40px); border-radius: 26px; background: rgba(255,250,244,.18); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3), 0 20px 50px rgba(0,0,0,.2); }
.vn__glas .titel { margin: 0; color: #fff; } .vn__glas .titel em { color: #f3d9b8; }
.vn__glas p { margin: 16px 0 0; font-size: 18px; line-height: 1.6; color: #f1ebe2; }
.vn__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.vn__chips li { display: flex; align-items: center; gap: 8px; padding: 10px 18px 10px 12px; border-radius: 999px; background: rgba(255,255,255,.9); font: 500 15px var(--sans); color: var(--titel); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.vn__chips svg { width: 20px; height: 20px; color: #3f7a4f; } .vn__chips path { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.vn__sym { position: absolute; right: 16px; bottom: 12px; font: 500 11px var(--sans); color: rgba(255,255,255,.85); text-shadow: 0 1px 4px rgba(0,0,0,.6); }
@supports (animation-timeline: view()) {
  .vn__nach { animation: vn-wisch linear both; animation-timeline: --vn; animation-range: contain 12% contain 62%; }
  .vn__linie { animation: vn-linie linear both; animation-timeline: --vn; animation-range: contain 12% contain 62%; }
  .vn__marke--vor { animation: vn-aus linear both; animation-timeline: --vn; animation-range: contain 30% contain 45%; }
  .vn__marke--nach { animation: vn-ein linear both; animation-timeline: --vn; animation-range: contain 45% contain 58%; }
  .vn__chips li { opacity: 0; animation: vn-auf linear both; animation-timeline: --vn; }
  .vn__chips li:nth-child(1) { animation-range: contain 64% contain 72%; } .vn__chips li:nth-child(2) { animation-range: contain 72% contain 80%; } .vn__chips li:nth-child(3) { animation-range: contain 80% contain 88%; }
}
@supports not (animation-timeline: view()) { .vn__bahn { height: auto; } .vn__buehne { position: relative; height: 90vh; } .vn__nach { clip-path: none; } .vn__linie, .vn__marke { display: none; } }
@keyframes vn-wisch { to { clip-path: inset(0 0 0 0); } }
@keyframes vn-linie { to { left: 0; } }
@keyframes vn-aus { to { opacity: 0; } }
@keyframes vn-ein { to { opacity: 1; } }
@keyframes vn-auf { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (max-width: 960px) {
  .vn__buehne::before { background: linear-gradient(0deg, rgba(30,22,15,.78), rgba(30,22,15,0) 72%); }
  .vn__text { justify-content: flex-end; padding-bottom: 36px; gap: 16px; }
  .vn__glas p { font-size: 16px; } .vn__marke { top: 84px; }
  .vn__chips li { font-size: 13.5px; padding: 8px 14px 8px 10px; }
}
@media (prefers-reduced-motion: reduce) { .vn * { animation: none !important; } .vn__bahn { height: auto; } .vn__buehne { position: relative; height: 90vh; } .vn__nach { clip-path: none; } .vn__linie, .vn__marke { display: none; } .vn__chips li { opacity: 1; } }
.lp .vn, .vn { overflow: visible !important; }
.vn__marke { bottom: auto !important; left: auto; height: auto !important; display: inline-block; line-height: 1.2; }
.vn .vn__marke { left: auto !important; right: 24px !important; width: max-content !important; max-width: none; }

/* Feinschliff 29.10.: Markierfarbe, Fokus, Mangel-Symbol, Link-Pfeil */
::selection { background: rgba(196, 30, 48, .16); color: var(--titel); }
.pp3__x svg { width: 14px; height: 14px; } .pp3__x path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.gr__link { display: inline-flex; align-items: center; gap: 6px; }
.gr__link .i { width: 16px; height: 16px; transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.gr__link:hover .i { transform: translateX(3px); }
.gr__link:focus-visible, .hero__punkte a:focus-visible { outline: 2px solid var(--titel); outline-offset: 4px; border-radius: 4px; }
.ppu__schalter label:hover { color: var(--titel); }
#ppu-ohne:checked ~ .ppu__schalter label[for="ppu-ohne"]:hover, #ppu-mit:checked ~ .ppu__schalter label[for="ppu-mit"]:hover { color: #fff; }

/* Bewegung nach Emil Kowalski (29.10.): kurze, kräftige ease-out-Kurven, Druck-Feedback, Hover nur mit Maus */
:root { --ease-stark: cubic-bezier(.23, 1, .32, 1); }
.ppu__schalter i { transition: transform 280ms var(--ease-stark), background-color 200ms ease; }
.ppu__schalter label { transition: color 200ms ease, transform 140ms var(--ease-stark); }
.ppu__schalter label:active { transform: scale(.97); }
.ppu__seite { transition: opacity 240ms var(--ease-stark), transform 280ms var(--ease-stark), filter 240ms ease, visibility 0s; }
#ppu-mit:checked ~ .ppu__seite--ohne, #ppu-ohne:checked ~ .ppu__seite--mit { filter: blur(3px); transform: translateY(8px) rotate(-.6deg); transition: opacity 180ms ease, transform 180ms ease, filter 180ms ease, visibility 0s linear 180ms; }
.gr__f img { transition: transform 600ms var(--ease-stark); }
.gr__k:hover .gr__f img { transform: none; }
@media (hover: hover) and (pointer: fine) { .gr__k:hover .gr__f img { transform: scale(1.03); } }
.gr__t h3, .vn__glas .titel, .pp-text .titel, .gr__kopf .titel, .ks__titel { text-wrap: balance; }
.gr__t p, .vn__glas p, .pp-text p, .ks__k p { text-wrap: pretty; }
@media (prefers-reduced-motion: reduce) { .ppu__seite, .ppu__schalter i { transition-duration: 0s !important; } #ppu-mit:checked ~ .ppu__seite--ohne, #ppu-ohne:checked ~ .ppu__seite--mit { filter: none; transform: none; } }

/* Stresstest 29.10. (break-ui): sehr schmale Handys (320 px) */
.hero__text { min-width: 0; max-width: 100%; }
.pp1__kopf b { overflow-wrap: anywhere; hyphens: auto; }
.pp1__fuss { flex-wrap: wrap; }
@media (max-width: 380px) {
  .hero__text { padding-right: 0; }
  .ppu__schalter label { padding: 10px 12px; font-size: 13px; white-space: nowrap; }
  .pp-stempel { width: 84px; height: 84px; border-width: 2px; } .pp-stempel b { font-size: 12px; } .pp-stempel span { font-size: 7px; letter-spacing: .08em; }
  .pp-us { width: 120px; }
  .ppk__fuss .pp3__folge { font-size: 15px; }
}
@media (max-width: 380px) { .hero h1, .titel, .ks__titel { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; } .lp-hero h1 { font-size: clamp(30px, 9.4vw, 40px); } }
/* Foto neben dem Formular (1.11.): nicht über die ganze Formularhöhe strecken, sondern mitlaufen */
@media (min-width: 961px) { .anfrage__bild { align-self: start; position: sticky; top: 110px; min-height: 0; height: min(78vh, 760px); } }

/* Neues Design für Kosten, Über uns und FAQ (1.11.): gleiche Typo und Flächen wie die neuen Leistungsseiten */
.neu .titel, .neu h1, .neu h2, .neu h3, .neu .fragen summary, .neu .fragen__k, .neu .form__schritt legend, .neu .team__titel, .neu .st-vs__k, .neu .lp-kosten h3 { font-family: var(--sans) !important; font-weight: 700 !important; letter-spacing: -.025em; }
.neu .titel em, .neu h1 em, .neu h2 em { font-style: normal; color: var(--gold); }
.neu .lp-hero h1 { font-size: clamp(34px, 3.6vw, 52px); line-height: 1.08; max-width: 12em; } .neu .lp-hero h1 em { display: block; }
.neu .lp-kap .titel, .neu .vg .titel, .neu .team .titel { font-size: clamp(32px, 3.8vw, 52px); line-height: 1.08; }
.neu .lp-kap__text > p, .neu .st-vs__text { font: 500 clamp(17px, 1.4vw, 19px)/1.6 var(--sans); color: #6e6e73; }
.neu .lp-punkte h3 { font-size: 19px; line-height: 1.3; color: #1d1d1f; } .neu .lp-punkte p { font: 500 16.5px/1.55 var(--sans); color: #6e6e73; }
.neu .lp-punkte__ring { background: #2f8a4f; color: #fff; border: 0; } .neu .lp-punkte__ring .i { color: #fff; }
.neu .lp-kap--hell { background: #fff; } .neu .lp-kap--warm, .neu .fragen, .neu .anfrage, .neu .team, .neu .st-vs { background: #f5f5f7; }
.neu .lp-kap__medien img, .neu .lp-bild, .neu .lp-bild__rahmen { border-radius: 28px; }
.neu .belege { background: #fff; } .neu .belege__in { font-family: var(--sans); }
.neu .st-vs__karte, .neu .lp-kosten__karte { border-radius: 28px; }
.neu .fragen summary, .neu .form__schritt legend, .neu .fragen__k { letter-spacing: -.015em; }
.neu .lp-kap p, .neu .lp-kap li { font-family: var(--sans); } .neu .lp-kap__text > p { font-weight: 500; }
@media (max-width: 400px) { h1, h2, .titel { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; } main a { overflow-wrap: anywhere; } }
.initialen--foto img { display: block; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #fff; }
.initialen--foto img + img { margin-left: -14px; }

/* 2.11.: Vertrauen im ersten Bildschirm, ruhigere Handy-Knöpfe, keine Trennung von „Entrümpelung“ */
.kw { hyphens: manual; -webkit-hyphens: manual; white-space: nowrap; }
.hero__vt { display: inline-flex; align-items: center; gap: 14px; margin-top: 28px; text-decoration: none; color: inherit; }
.hero__vt .initialen--foto img { width: 48px; height: 48px; }
.hero__vt-text { display: flex; flex-direction: column; gap: 3px; }
.hero__vt-z { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font: 500 15.5px/1.3 var(--sans); color: #1d1d1f; }
.hero__vt-z .sterne { gap: 1px; } .hero__vt-z .sterne .i { width: 15px; height: 15px; }
.hero__vt small { font: 500 13.5px/1.3 var(--sans); color: #6e6e73; }
@media (hover: hover) { .hero__vt:hover .hero__vt-z { text-decoration: underline; text-underline-offset: 3px; } }
@media (max-width: 700px) {
  .nh .lp-hero h1 em, .neu .lp-hero h1 em { font-size: .74em; line-height: 1.12; margin-top: 6px; }
  .hero__vt { position: relative; z-index: 2; margin-top: 20px; gap: 10px; padding: 10px 18px; border-radius: 999px; background: rgba(255, 255, 255, .94); box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .25); }
  .hero__vt small { font-size: 12.5px; }
  .hero__vt .initialen--foto img { width: 42px; height: 42px; }
  .hero__vt-z { font-size: 14.5px; }
}

/* 2.11. Hinweis für Firmenkunden unter dem Hero-Button (nur Startseite) */
.hero__gew { margin: 16px 0 0; font: 500 15px/1.45 var(--sans); color: #6e6e73; }
.hero__gew b { font-weight: 600; color: #48484d; }
.hero__gew a { color: #1d1d1f; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.hero__gew a:hover { color: var(--rot, #c8102e); }
@media (max-width: 700px) { .hero__gew { font-size: 14px; margin-top: 12px; } }

/* 2.11. Übergang Inhalt → Footer: ohne Linie und roten Strich, nur der Wechsel von Grau zu Weiß */
.fuss { border-top: 0; }
.fuss::before { display: none; }


/* 2.11. Fünf Kacheln auch auf Kosten, Über uns, FAQ (Kopie der Startseiten-Regeln, auf .ing--seite begrenzt) */
.ing--seite { position: relative; z-index: 2; background: #fff; border-bottom: 1px solid #ececf0; }
.ing--seite .ing__reihe { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); }
.ing__k { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; padding: 40px 18px 44px; text-align: center; text-decoration: none; border-radius: 4px; background: transparent; transition: transform .3s cubic-bezier(.23,1,.32,1), box-shadow .3s ease, background-color .3s ease; }
.ing__i { width: 64px; height: 64px; margin-bottom: 14px; color: #1f2f45; transition: transform .3s cubic-bezier(.23,1,.32,1); }
.ing__i svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ing__i .a { stroke: var(--gold); } .ing__i .f { fill: #fbeced; }
.ing__k b { font: 700 21px/1.25 var(--sans); color: var(--gold); letter-spacing: -.01em; }
.ing__t { font: 500 18px/1.45 var(--sans); color: #48484d; max-width: 13em; }
@media (hover: hover) and (pointer: fine) {
  .ing__k:hover { background: #fff; transform: translateY(-18px); box-shadow: 0 18px 40px rgba(0,0,0,.14); }
  .ing__k:hover .ing__i { transform: scale(1.06); }
}
.ing__k:focus-visible { outline: 2px solid #1d1d1f; outline-offset: -4px; }
@media (max-width: 960px) {
  .ing--seite .ing__reihe { grid-template-columns: repeat(5, minmax(150px, 1fr)); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: -16px; padding-inline: 8px; }
  .ing--seite .ing__reihe::-webkit-scrollbar { display: none; }
  .ing__reihe li { scroll-snap-align: start; } .ing__k { padding: 24px 10px 26px; } .ing__i { width: 44px; height: 44px; } .ing__k b { font-size: 16.5px; } .ing__t { font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce) { .ing__k, .ing__i { transition: none; } }

/* 2.11. Kosten „Fünf Dinge“: Kartenraster statt Liste neben Bild */
.lp-kk { padding-block: clamp(64px, 7vw, 104px); background: #fff; }
.lp-kk__kopf { max-width: 780px; margin: 0 auto; text-align: center; }
.lp-kk__kopf .titel { font-family: var(--sans) !important; font-weight: 700 !important; letter-spacing: -.028em; } .lp-kk__kopf .titel em { font-style: normal; color: var(--gold); }
.lp-kk__kopf p { margin: 18px auto 0; font: 500 18.5px/1.6 var(--sans); color: #6e6e73; }
.lp-kk__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: clamp(40px, 5vw, 56px) 0 0; padding: 0; list-style: none; }
.lp-kk__k { padding: 30px 28px 32px; border-radius: 24px; background: #f5f5f7; }
.lp-kk__nr { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 18px; border-radius: 50%; background: var(--gold); color: #fff; font: 700 17px var(--sans); }
.lp-kk__k h3 { margin: 0; font: 700 21px/1.25 var(--sans); letter-spacing: -.015em; color: #1d1d1f; }
.lp-kk__k p { margin: 10px 0 0; font: 500 16.5px/1.55 var(--sans); color: #48484d; }
.lp-kk__bild { min-height: 260px; border-radius: 24px; overflow: hidden; background: #e8e8ed; } .lp-kk__bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 960px) { .lp-kk__raster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .lp-kk__raster { grid-template-columns: 1fr; gap: 12px; } .lp-kk__k { padding: 24px 22px; } .lp-kk__bild { min-height: 0; aspect-ratio: 4/3; } }
.ing--seite { border-bottom: 0; }
.ing--seite { background: #f5f5f7; }

/* 2.11. Häkchen in Punktlisten deutlich sichtbar (Leon: Icons fast unsichtbar) */
.lp-punkte li { grid-template-columns: 36px 1fr; }
.lp-punkte__ring, .lp-kap--hell .lp-punkte__ring { width: 36px; height: 36px; margin-top: 2px; background: var(--gold); box-shadow: none; }
.lp-punkte__ring .i { width: 18px; height: 18px; color: #fff; }
.lp-punkte .lp-punkte__ring { background: var(--gold) !important; box-shadow: none !important; border: 0 !important; } .lp-punkte .lp-punkte__ring .i { color: #fff !important; }

/* 2.11. Kosten „Bezahlt wird …“: große Zahl 0 € als Blickfang (Option 3) */
.lp-zahl { padding-block: clamp(64px, 7vw, 104px); background: #f5f5f7; }
.lp-zahl__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 88px); align-items: center; }
.lp-zahl__blick { display: grid; gap: 10px; padding: clamp(36px, 4vw, 56px); border-radius: 28px; background: #fff; text-align: center; }
.lp-zahl__blick b { font: 800 clamp(96px, 11vw, 168px)/1 var(--sans); letter-spacing: -.05em; color: var(--gold); }
.lp-zahl__blick span { font: 700 clamp(22px, 2vw, 28px)/1.3 var(--sans); color: #1d1d1f; }
.lp-zahl .titel { font-family: var(--sans) !important; font-weight: 700 !important; letter-spacing: -.028em; } .lp-zahl .titel em { font-style: normal; color: var(--gold); }
.lp-zahl__p { margin: 18px 0 0; font: 500 18px/1.6 var(--sans); color: #6e6e73; }
.lp-zahl .lp-punkte { margin-top: 28px; gap: 20px; }
@media (max-width: 960px) { .lp-zahl__in { grid-template-columns: 1fr; } }

/* 2.11. Vergleichskarte: Beschriftungen ohne Großbuchstaben-Sperrsatz (Leon: „sieht kacke aus“) */
.lp-kosten__marke { letter-spacing: 0 !important; text-transform: none !important; font-size: 14px !important; }
.lp-kosten__klein { letter-spacing: 0 !important; text-transform: none !important; font-size: 15px !important; }

/* 6.11. Leiste mit Kosten, Über uns, Häufige Fragen, Kontakt: bleibt einzeilig und ist auch zwischen 961 und 1080 px da (vorher dort kein Menü) */
@media (min-width: 961px) {
  .nav > a:not(.knopf), .nav__gruppe > a, .nav .nav__titel, .nav__cta { white-space: nowrap; }
  .logo { flex-shrink: 0; }
}
@media (min-width: 961px) and (max-width: 1240px) {
  .nav { gap: 12px; font-size: 14px; }
  .nav__cta { padding: 0 14px; font-size: 14px; }
}
@media (min-width: 961px) and (max-width: 1080px) {
  .nav__gruppe { display: flex; }
  .nav > a:not(.knopf) { display: inline; }
  .nav .nav__unter a:not(.knopf) { display: block; }
}
@media (min-width: 961px) and (max-width: 1000px) { .nav { gap: 8px; } }

/* 7.11. (Leon): überall dieselbe Schrift, keine Serifen und kein Kursiv mehr */
.titel, .hero h1, .danke h1, .recht h1, .form__schritt legend, .weg__schritte h3 { font-weight: 700; letter-spacing: -.028em; } .titel em, .hero h1 em, .fuss__claim em, .recht__lead, .team__gruss b, .gebiet__fern { font-style: normal; }
.fragen summary { font-weight: 600; letter-spacing: -.01em; } .fragen__k, .fuss__tel, .fuss__claim, .bw__wert b, .vg__tabelle thead th { font-weight: 700; } .recht__text h2, .recht__text h3 { font-weight: 700; } .fuss__claim { font-size: 20px; }

/* 8.11.: Danke- und Fehlerseite ohne Kursiv wie überall */
.danke h1 em, .nf h1 em { font-style: normal; }

/* 9.11.: Handy wie auf johnundmartin.de: kein seitliches Wackeln, Menü sperrt Scrollen, runde Knöpfe erst nach dem Startbild und nicht beim Formular */
@media (max-width: 960px) {
  html, body { overflow-x: clip; }
  html { overscroll-behavior-x: none; }
  body { touch-action: pan-y pinch-zoom; }
  .leiste { transition: opacity 0.2s ease, transform 0.2s ease; }
  html:not(.leiste-da) .leiste, html.form-im-bild .leiste { opacity: 0; transform: translateY(16px); pointer-events: none; }
  .nav { max-height: calc(100dvh - 69px); overflow-y: auto; overscroll-behavior: contain; }
  html.menue-offen, html.menue-offen body { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { .leiste { transition: none; } }
/* Cookie-Hinweis als schmale Leiste unten ohne Schleier, damit das Startbild frei bleibt (Einstellungen öffnen weiter als Fenster) */
.einwilligung--leiste{inset:auto 0 0 0;display:block;padding:0 16px calc(16px + env(safe-area-inset-bottom,0px));background:none;pointer-events:none}
.einwilligung--leiste .ew-karte{pointer-events:auto;width:min(1040px,100%);max-height:none;margin:0 auto;overflow:visible;padding:12px 12px 12px 22px;border-radius:16px;box-shadow:0 14px 36px -12px rgba(28,34,33,.45),0 0 0 1px rgba(28,34,33,.06);font-size:14px;line-height:1.45}
.einwilligung--leiste .ew-start{display:flex;align-items:center;gap:20px}
.ew-start .ew-satz{flex:1;margin:0;color:var(--text-2);font-size:14px;line-height:1.45}
.ew-start .ew-links{display:inline;font-size:inherit;margin:0 0 0 4px}
.ew-start .ew-links a{display:inline;margin-left:10px;padding:0;background:none;color:var(--titel);font:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--linie);white-space:nowrap}
.einwilligung--leiste .ew-knoepfe{display:flex;flex:none;gap:8px;margin:0}
.einwilligung--leiste .ew-knoepfe button{min-height:44px;padding:0 20px;font-size:15px}
@media (max-width:760px){.einwilligung--leiste{padding:0;bottom:0}.einwilligung--leiste .ew-karte{border-radius:16px 16px 0 0;padding:12px 14px calc(10px + env(safe-area-inset-bottom,0px))}.einwilligung--leiste .ew-start{display:block}.ew-start .ew-satz{font-size:13px;line-height:1.4}.ew-start .ew-links a{margin-left:8px}.einwilligung--leiste .ew-knoepfe{display:grid;grid-template-columns:auto auto auto;justify-content:stretch;gap:6px;margin-top:10px}.einwilligung--leiste .ew-knoepfe button{min-height:44px;padding:0 8px;font-size:13px;white-space:nowrap}}
html:has(.einwilligung--leiste) body { padding-bottom: 170px; }
@media (max-width: 359px) { .einwilligung--leiste .ew-knoepfe { grid-template-columns: 1fr 1fr; } .einwilligung--leiste .ew-knoepfe [data-ew="einstellungen"] { grid-column: 1 / -1; } }