@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-display: swap; src: url("/fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 700; font-display: swap; src: url("/fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Familjen Grotesk"; font-weight: 500; font-display: swap; src: url("/fonts/familjen-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Familjen Grotesk"; font-weight: 700; font-display: swap; src: url("/fonts/familjen-grotesk-latin-700-normal.woff2") format("woff2"); }

:root {
  --wald: #262e17;
  --wald-2: #39452a;
  --pfirsich: #dcc68f;
  --pfirsich-hell: #f4ecd2;
  --pfirsich-tief: #55611f;
  --knochen: #f8f6ef;
  --glas: rgb(255 255 255 / .1);
  --glas-rand: rgb(255 255 255 / .24);
  --sc-canvas: var(--wald);
  --sc-surface: var(--wald-2);
  --sc-ink: #f8f6ef;
  --sc-ink-soft: #dcdcc6;
  --sc-accent: var(--pfirsich);
  --sc-accent-ink: #252c18;
  --sc-font-display: "Familjen Grotesk", "Segoe UI", system-ui, sans-serif;
  --sc-font-text: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --sc-t-base: 1.1875rem;
  --sc-t-sm: 1.0625rem;
  --balken: 88px;
  --radius: 28px;
  --federn: cubic-bezier(.22, 1, .36, 1);
}

body { font-size: var(--sc-t-base); }
html { scroll-padding-top: var(--balken); }
img { display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--pfirsich-tief); outline-offset: 3px; }
.morgen :focus-visible, .kopf :focus-visible, .abend :focus-visible, .fuss :focus-visible, .abo-top :focus-visible, .abo-dunkel :focus-visible { outline-color: var(--pfirsich); }
.abo-top :focus-visible { outline-color: var(--wald); }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- Schwebende Leiste: wächst beim Öffnen in sich selbst ---- */
.kopf {
  position: fixed; z-index: 30;
  top: calc(10px + env(safe-area-inset-top, 0px)); inset-inline: 12px;
  max-width: 1180px; margin-inline: auto;
  border-radius: 26px; overflow: clip;
  background: rgb(38 46 23 / .78);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid var(--glas-rand);
  box-shadow: 0 16px 36px -20px rgb(16 20 8 / .7);
  color: var(--sc-ink);
}
.kopf-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 6px 8px 6px 20px; flex-wrap: wrap; }
.marke { font-family: var(--sc-font-display); font-weight: 700; font-size: 1.2rem; letter-spacing: .16em; text-decoration: none; margin: 0; }
.kopf-rechts { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.menue { display: none; }
.menue a { text-decoration: none; font-weight: 700; }
.sprache {
  display: inline-flex; align-items: center; gap: 6px; height: 46px; padding: 0 12px;
  border-radius: 999px; background: var(--glas); border: 1px solid var(--glas-rand); text-decoration: none;
  transition: background-color 160ms var(--federn), transform 120ms var(--federn);
}
.sprache:active { transform: scale(.96); }
.fahne { border-radius: 3px; display: block; }
.kopf-tel { display: none; align-items: center; height: 46px; padding: 0 18px; border-radius: 999px; font-weight: 700; text-decoration: none; background: var(--pfirsich); color: var(--sc-accent-ink); white-space: nowrap; }
.menue-knopf { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--glas-rand); background: var(--glas); color: inherit; display: grid; place-content: center; gap: 6px; cursor: pointer; padding: 0; }
.menue-knopf span { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; transition: transform 220ms var(--federn); }
.kopf[data-offen] .menue-knopf span:first-child { transform: translateY(4px) rotate(45deg); }
.kopf[data-offen] .menue-knopf span:last-child { transform: translateY(-4px) rotate(-45deg); }
.kopf[data-offen] .menue { display: grid; order: 5; width: 100%; padding: 4px 12px 14px 12px; }
.kopf[data-offen] .menue a { padding: 14px 0; font-size: 1.3rem; border-top: 1px solid var(--glas-rand); }
.kopf-fortschritt { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--pfirsich); transform-origin: 0 50%; transform: scaleX(var(--seite, 0)); }

/* ---- Knöpfe ---- */
.knopf {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 60px; padding: 10px 26px; border-radius: 999px;
  font: 700 1.2rem/1.2 var(--sc-font-text); text-align: center; text-decoration: none; cursor: pointer; border: 0;
  transition: transform 140ms var(--federn), background-color 160ms var(--federn), box-shadow 160ms var(--federn);
}
.knopf:active { transform: scale(.97); }
.knopf:disabled { opacity: .6; cursor: wait; }
.knopf-voll { background: var(--pfirsich); color: var(--sc-accent-ink); box-shadow: 0 14px 30px -16px rgb(220 198 143 / .75); }
.knopf-glas { background: var(--glas); color: var(--sc-ink); border: 1px solid var(--glas-rand); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
@media (hover: hover) and (pointer: fine) {
  .knopf-voll:hover { background: #e8d6a8; transform: translateY(-2px); }
  .knopf-glas:hover { background: rgb(255 255 255 / .2); transform: translateY(-2px); }
  .sprache:hover { background: rgb(255 255 255 / .22); }
  .menue a { position: relative; }
  .menue a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--pfirsich); transform: scaleX(0); transform-origin: 0 50%; transition: transform 220ms var(--federn); }
  .menue a:hover::after { transform: scaleX(1); }
}
.knoepfe { display: grid; gap: 10px; }

/* ---- Blätter schieben sich über die gehaltene Szene davor ---- */
.blatt { position: relative; z-index: 2; margin-top: -100svh; }
.morgen { position: relative; z-index: 1; }
.leistungen { z-index: 3; }
.versprechen, .preise, .abend, .fuss { position: relative; z-index: 4; }

/* ---- Akt 1: Morgen ---- */
.morgen-text { top: calc(var(--balken) + clamp(1rem, 5vh, 3.5rem)); bottom: auto; max-width: min(35rem, 88vw); display: grid; gap: 18px; }
.morgen h1 { font-size: clamp(2.2rem, 1.3rem + 2.5vw, 3.6rem); line-height: 1.04; }
.unterzeile { font-size: 1.3rem; color: var(--sc-ink); margin: 0; }

/* ---- Akt 2: Reinigung ---- */

/* ---- Heller Tag ---- */
.hell { --sc-ink: #252c18; --sc-ink-soft: #4f5739; --sc-hairline: #d9d3c0; background: var(--knochen); color: var(--sc-ink); }
.titel { font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.6rem); line-height: 1.06; margin: 0; text-wrap: balance; }

/* ---- Akt 3: Leistungen ---- */
.leistungen { border-radius: var(--radius) var(--radius) 0 0; padding-block: clamp(3.5rem, 8vw, 6.5rem); background: radial-gradient(52% 18% at 88% 2%, rgb(220 198 143 / .32), transparent 74%), var(--knochen); }
.leistungen-raster { display: grid; gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.leistungen-kopf { display: grid; gap: 14px; }
.leistungen-kopf p, .leistung p, .leistungen-firmen p { margin: 0; color: var(--sc-ink-soft); }
.leistungen-karten { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.75rem, 3vw, 2.5rem); }
.leistung { display: grid; align-content: start; gap: 10px; min-width: 0; }
.leistung-bild { overflow: hidden; border-radius: 20px; background: #e6e3d3; }
.leistung-bild img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.leistung h3, .leistungen-firmen h3 { font-family: var(--sc-font-display); font-weight: 500; font-size: 1.7rem; margin: 6px 0 0; line-height: 1.1; }
.leistungen-firmen { display: grid; align-content: center; gap: 10px; padding: 28px; border-radius: 20px; background: var(--wald-2); color: #f8f6ef; }
.leistungen-firmen p { color: #dcdcc6; }
@media (min-width: 860px) {
  .leistungen-raster { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .leistungen-kopf { position: sticky; top: calc(var(--balken) + 24px); }
  .leistungen-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .leistungen-firmen { grid-column: 1 / -1; }
}

/* ---- Akt 4: Versprechen ---- */
.versprechen { padding-block: clamp(3.5rem, 9vw, 7rem); }
.versprechen-innen { display: grid; gap: clamp(1.5rem, 4vw, 4rem); }
.versprechen-innen > * { min-width: 0; }
.versprechen figure { margin: 0; }
.versprechen img { width: 100%; height: auto; aspect-ratio: 9 / 8; object-fit: cover; border-radius: 20px; }
.zusagen { list-style: none; margin: var(--sc-5) 0 0; padding: 0; }
.zusagen li { display: flex; gap: 14px; padding-block: 16px; border-top: 1px solid var(--sc-hairline); font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); line-height: 1.16; }
.zusagen li::before { content: ""; flex: 0 0 auto; width: 10px; height: 10px; margin-top: .42em; border-radius: 50%; background: var(--pfirsich-tief); box-shadow: 0 0 0 5px rgb(85 97 31 / .14); }

/* ---- Akt 5: Preise als Kartenstapel ---- */
.preise { background: radial-gradient(70% 34% at 92% 22%, rgb(220 198 143 / .3), transparent 72%), radial-gradient(60% 30% at 4% 70%, rgb(220 198 143 / .2), transparent 74%), var(--knochen); color: #252c18; padding-block: clamp(2rem, 5vw, 4rem) clamp(3rem, 7vw, 6rem); --sc-ink: #252c18; --sc-ink-soft: #4f5739; }
.preise-kopf { display: grid; gap: 12px; margin-bottom: var(--sc-6); }
.preise-kopf p { margin: 0; color: var(--sc-ink-soft); max-width: var(--sc-measure); }
.stapel { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.abo {
  position: sticky; top: calc(78px + var(--i, 0) * 10px);
  display: grid; gap: 12px; padding: clamp(1.125rem, 3vw, 2.25rem);
  border-radius: var(--radius); background: #fff; color: #252c18;
  border: 1px solid #ddd8c6; box-shadow: 0 -14px 34px -22px rgb(24 30 12 / .45);
  transform-origin: 50% 0;
}
.abo:nth-child(1) { --i: 0; } .abo:nth-child(2) { --i: 1; } .abo:nth-child(3) { --i: 2; } .abo:nth-child(4) { --i: 3; }
.abo-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; column-gap: 12px; min-width: 0; }
.abo h3 { margin: 0; font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.4rem); line-height: 1.08; }
.abo-preis { margin: 0; font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.4rem); white-space: nowrap; font-variant-numeric: tabular-nums; }
.abo-monat { width: 100%; margin: 0; font-size: 1rem; text-align: right; color: #4f5739; }
.abo-satz { margin: 0; color: #4f5739; }
.abo-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.abo-liste li { display: flex; gap: 10px; line-height: 1.3; }
.abo-liste li::before { content: ""; flex: 0 0 auto; width: 18px; height: 18px; margin-top: .15em; border-radius: 50%; background: var(--pfirsich) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.3l2.7 2.7L13 6.5' fill='none' stroke='%2310201a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.abo-stufen { margin: 0; display: grid; gap: 0; border-top: 1px solid #ddd8c6; }
.abo-stufen div { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; border-bottom: 1px solid #ddd8c6; font-size: 1.0625rem; line-height: 1.25; }
.abo-stufen dt { color: #4f5739; }
.abo-stufen dd { margin: 0; font-weight: 700; text-align: right; }
.knopf-abo { background: var(--wald-2); color: #f8f6ef; min-height: 56px; }
.abo-top { background: var(--pfirsich); border-color: #c9b06d; }
.abo-top .abo-satz, .abo-top .abo-monat, .abo-top dt { color: #3a4226; }
.abo-top .abo-stufen, .abo-top .abo-stufen div { border-color: rgb(16 32 26 / .24); }
.abo-top .abo-liste li::before { background-color: #fff; }
.abo-marke { margin: 0; font-weight: 700; font-size: 1rem; }
.abo-dunkel { background: var(--wald-2); color: #f8f6ef; border-color: #4c5a33; }
.abo-dunkel .abo-satz, .abo-dunkel .abo-monat, .abo-dunkel dt { color: #dcdcc6; }
.abo-dunkel .abo-stufen, .abo-dunkel .abo-stufen div { border-color: rgb(255 255 255 / .22); }
.abo-dunkel .knopf-abo { background: var(--pfirsich); color: var(--sc-accent-ink); }
.preise-fuss { margin: var(--sc-5) 0 0; color: var(--sc-ink-soft); overflow-wrap: anywhere; hyphens: auto; }
.preis-zusatz { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); margin-top: var(--sc-7); }
.preis-zusatz h3 { font-family: var(--sc-font-display); font-weight: 500; font-size: 1.5rem; margin: 0 0 6px; line-height: 1.15; }
.preis-zusatz p { margin: 0; color: var(--sc-ink-soft); }
.preis-zusatz strong { color: var(--sc-ink); }

/* ---- Akt 6: Abend ---- */
.abend { background: #262e17; overflow: clip; isolation: isolate; color: #f8f6ef; }
.abend-bild { position: absolute; inset: 0 0 auto; z-index: -1; width: 100%; height: 100%; }
.abend-bild img { width: 100%; height: 118%; margin-top: -9%; object-fit: cover; object-position: 60% 60%; max-width: none; }
.abend-innen { padding-block: clamp(6rem, 22vh, 11rem) clamp(4rem, 9vw, 7rem); }
.karte { background: rgb(38 46 23 / .72); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); border: 1px solid var(--glas-rand); border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 2.25rem); box-shadow: 0 24px 48px -16px rgb(16 20 8 / .6); max-width: 42rem; display: grid; gap: 14px; }
.karte .titel { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); }
.karte > p { margin: 0; color: #e6e5d2; }
.formular { display: grid; gap: 8px; }
.formular > * { min-width: 0; }
.feld { display: grid; gap: 6px; margin-top: 6px; }
.formular label { font-weight: 700; }
.formular input, .formular textarea, .formular select { width: 100%; min-height: 56px; padding: 12px 16px; border: 1px solid transparent; border-radius: 16px; font: inherit; color: #252c18; background: #fff; }
.formular textarea { min-height: 110px; resize: vertical; }
.formular .knopf { margin-top: 10px; width: 100%; }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-turnstile { min-height: 65px; margin-top: 10px; }

/* ---- Fuß ---- */
.fuss { background: var(--wald); color: #dcdcc6; margin-top: calc(var(--radius) * -1); border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; isolation: isolate; padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px)); }
.fuss::before { content: ""; position: absolute; z-index: -1; width: 34rem; height: 34rem; top: -14rem; left: -10rem; border-radius: 50%; background: radial-gradient(circle, rgb(220 198 143 / .22), transparent 68%); }
.fuss-spalten { display: grid; gap: 34px; }
.fuss-marke { display: grid; gap: 10px; }
.fuss .marke { color: #f8f6ef; font-size: 1.5rem; }
.fuss-tel { font-weight: 700; color: var(--pfirsich); text-decoration: none; font-size: 1.3rem; }
.fuss h2 { margin: 0 0 12px; font: 700 .9375rem/1.2 var(--sc-font-text); letter-spacing: .14em; text-transform: uppercase; color: #f8f6ef; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.fuss ul a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.fuss p { margin: 0; }
.fuss-unten { display: grid; gap: 6px; margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--glas-rand); font-size: 1rem; }
.fuss .fuss-wasser { font-family: var(--sc-font-display); font-weight: 700; font-size: 21vw; line-height: .8; letter-spacing: .02em; text-align: center; white-space: nowrap; color: rgb(220 198 143 / .1); margin: 22px 0 -2vw; pointer-events: none; }

/* ---- Kontakt-Stapel ---- */
.fab { position: fixed; z-index: 25; right: 16px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 12px; opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity 240ms var(--federn), transform 240ms var(--federn); }
.fab[data-sichtbar] { opacity: 1; transform: none; pointer-events: auto; }
.fab-knopf { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; transition: transform 140ms var(--federn); }
.fab-knopf:active { transform: scale(.94); }
.fab-tel { background: #fff; color: #252c18; box-shadow: 0 14px 32px -14px rgb(16 20 8 / .55); }
.fab-wa { background: #25d366; color: #fff; box-shadow: 0 16px 36px -14px rgb(37 211 102 / .75); }

/* ---- Telefon: eigene Komposition, Bild randlos ---- */
@media (max-width: 859px) {
  .morgen-text { inset-inline: var(--sc-gutter); top: auto; max-width: none; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); gap: 10px; }
  .morgen h1 { font-size: clamp(1.9rem, 8.6vw, 2.5rem); }
  .unterzeile { font-size: 1.125rem; }
  .abend-bild { height: 66svh; }
  .abend-bild img { height: 100%; margin-top: 0; object-position: 50% 70%; -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent); mask-image: linear-gradient(to bottom, #000 62%, transparent); }
  .abend-innen { padding-top: 46svh; }
  .abo-liste { font-size: 1.0625rem; }
}
@media (max-width: 859px) and (max-height: 700px) {
  .abo { position: static; }
  .abo-stufen div { padding: 6px 0; }
}
@media (min-width: 860px) {
  .menue-knopf { display: none; }
  .menue { display: flex; gap: 26px; }
  .kopf-tel { display: inline-flex; }
  .kopf-zeile { flex-wrap: nowrap; }
  .knoepfe { grid-template-columns: auto auto; justify-content: start; }
  .versprechen-innen { grid-template-columns: 5fr 6fr; align-items: center; }
  .abo { grid-template-columns: 5fr 6fr; column-gap: 40px; }
  .abo > * { grid-column: 1; }
  .abo-liste, .abo-stufen { grid-column: 2; }
  .abo-liste { grid-row: 1 / span 2; align-self: start; }
  .abo-top .abo-liste { grid-row: 2 / span 2; }
  .preis-zusatz { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .formular { grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .formular .breit, .formular .knopf { grid-column: 1 / -1; }
  .fuss-spalten { grid-template-columns: 1.4fr 1fr 1.2fr 1fr; }
  .fuss-unten { grid-auto-flow: column; justify-content: space-between; }
  .fab-knopf:hover { transform: translateY(-3px); }
}

/* Native scroll-driven motion stays on the compositor, so iOS cannot lag it behind the thumb. Fallback: --sc-p above. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .leistung, .leistungen-firmen { animation: auftauchen linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    @keyframes auftauchen { from { opacity: 0; transform: translateY(28px); } }
    .abo { animation: weichen linear both; animation-timeline: view(); animation-range: exit-crossing 0% exit-crossing 100%; }
    @keyframes weichen { to { transform: scale(.95); } }
  }
}

/* same geometry before the engine mounts, or the first paint shifts the whole page */
[data-sc-stage] { position: sticky; top: 0; height: 100svh; overflow: clip; }

/* very large text settings: nothing may push the page sideways */
.titel, .zusagen li, .leistung h3, .morgen h1, .abo h3 { overflow-wrap: anywhere; hyphens: auto; }

@media (prefers-reduced-motion: reduce) {
  .abo { position: static; }
  .blatt { margin-top: 0; }
  .abend-bild img { height: 100%; margin-top: 0; }
}

.abo { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .abo { grid-template-columns: 5fr 6fr; } }
@media (max-width: 859px) {
}

.abo-stufen div { flex-wrap: wrap; }
.abo-liste li, .abo-stufen dt, .abo-stufen dd { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 859px) {
  /* phone: the view ends on the mossy driveway, so the line sits above it and clear of the contact buttons */
}
.abo-preis { white-space: normal; overflow-wrap: anywhere; }
.preis-zusatz { grid-template-columns: minmax(0, 1fr); }
.preis-zusatz h3, .preis-zusatz p { overflow-wrap: anywhere; }
@media (min-width: 860px) { .preis-zusatz { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- Browserflächen tragen den Ton mit ---- */
::selection { background: var(--pfirsich); color: #14201a; }
input, textarea { caret-color: var(--pfirsich-tief); }

/* ---- Ruhige Reaktionen: Der echte Zeiger bleibt, die Flächen antworten ---- */
.zeiger-licht { position: fixed; z-index: 20; left: 0; top: 0; width: 620px; height: 620px; margin: -310px 0 0 -310px; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(circle, rgb(220 198 143 / .34), rgb(220 198 143 / .1) 42%, transparent 68%); mix-blend-mode: soft-light; transition: opacity 400ms var(--federn); will-change: transform; }
.zeiger-licht[data-an] { opacity: 1; }
.licht-flaeche { isolation: isolate; }
.licht-flaeche:not(.abo) { position: relative; }
.licht-flaeche::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 260ms var(--federn); background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgb(220 198 143 / .42), transparent 72%); }
@media (hover: hover) and (pointer: fine) { .licht-flaeche:hover::after { opacity: 1; } }
.welle { position: fixed; z-index: 40; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 2px solid rgb(220 198 143 / .95); box-shadow: 0 0 0 1px rgb(255 255 255 / .35) inset; pointer-events: none; animation: welle 620ms var(--federn) forwards; }
.welle + .welle { animation-delay: 90ms; }
@keyframes welle { from { transform: scale(.4); opacity: .95; } to { transform: scale(5.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .zeiger-licht, .welle { display: none; } }
.leistung-bild img { transition: transform 700ms var(--federn); }
@media (hover: hover) and (pointer: fine) { .leistung:hover .leistung-bild img { transform: scale(1.04); } }

/* ---- Preisrechner ---- */
.rechner { position: relative; z-index: 4; padding-block: clamp(3.5rem, 8vw, 6.5rem); background: radial-gradient(50% 30% at 8% 6%, rgb(220 198 143 / .26), transparent 76%), var(--knochen); }
.rechner-kopf { display: grid; gap: 14px; margin-bottom: var(--sc-6); max-width: 46rem; }
.rechner-kopf p { margin: 0; color: var(--sc-ink-soft); }
.rechner-app { display: grid; gap: 24px; align-items: start; grid-template-columns: minmax(0, 1fr); }
.rechner-wahl { display: grid; gap: 20px; min-width: 0; grid-template-columns: minmax(0, 1fr); }
.rechner-wahl > *, .r-positionen > *, .r-chips > * { min-width: 0; }
.r-gruppe, .r-grad { border: 0; margin: 0; padding: 0; min-width: 0; }
.r-gruppe legend, .r-grad legend, .r-zone label, .r-zeile label, .r-menge label { font-weight: 700; padding: 0; }
.r-gruppe legend { font-family: var(--sc-font-display); font-weight: 500; font-size: 1.5rem; }
.r-hilfe { margin: 2px 0 14px; color: var(--sc-ink-soft); }
.r-zeile, .r-menge { display: grid; gap: 8px; }
.r-zeile select { width: 100%; min-height: 54px; padding: 10px 14px; border-radius: 14px; border: 1px solid #c9c4b0; background: #fff; font: inherit; color: inherit; }
.r-menge-zeile { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.r-menge-zeile input[type="range"] { flex: 1 1 8rem; min-width: 0; }
.r-menge input[type="range"] { width: 100%; height: 44px; accent-color: var(--pfirsich-tief); margin: 0; }
.r-zahl { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.r-zahl input { width: 5.2rem; min-height: 48px; padding: 8px 10px; border-radius: 12px; border: 1px solid #c9c4b0; font: inherit; font-variant-numeric: tabular-nums; text-align: right; }
.r-grad legend { margin-bottom: 8px; }
.r-grad-reihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.r-grad-karte { position: relative; display: grid; align-content: start; gap: 2px; padding: 6px 6px 10px; border-radius: 14px; border: 1px solid #ddd8c6; cursor: pointer; min-width: 0; transition: background-color 180ms var(--federn), border-color 180ms var(--federn); }
.r-grad-karte input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.r-grad-karte img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 9px; margin-bottom: 4px; }
.r-grad-name { font-weight: 700; padding-inline: 4px; overflow-wrap: anywhere; }
.r-grad-text { font-size: .9375rem; line-height: 1.25; color: var(--sc-ink-soft); padding-inline: 4px; overflow-wrap: anywhere; }
.r-grad-karte:has(input:checked) { background: var(--pfirsich-hell); border-color: #c9b06d; }
.r-grad-karte:has(input:focus-visible) { outline: 3px solid var(--pfirsich-tief); outline-offset: 2px; }
.r-extras { display: grid; gap: 4px; }
.r-haken { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; padding-block: 8px; cursor: pointer; line-height: 1.3; }
.r-haken input { flex: none; width: 22px; height: 22px; accent-color: var(--pfirsich-tief); margin: 0; }
.r-klein { margin: 0; font-size: 1rem; line-height: 1.35; color: var(--sc-ink-soft); }
.r-foto { display: grid; gap: 12px; padding: clamp(1rem, 2.4vw, 1.5rem); border-radius: 20px; background: var(--pfirsich-hell); }
.r-foto h3 { margin: 0; font: 500 1.35rem/1.15 var(--sc-font-display); }
.r-foto p { margin: 0; }
.r-foto .r-klein { color: #45432a; margin-top: 10px; }
.r-foto-knopf { max-width: 100%; background: #fff; color: #252c18; min-height: 54px; border: 1px solid #c9b06d; justify-self: start; cursor: pointer; }
.r-foto-knopf:has(input:focus-visible) { outline: 3px solid var(--pfirsich-tief); outline-offset: 2px; }
.r-foto-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.r-foto-liste:empty { display: none; }
.r-foto-liste li { position: relative; }
.r-foto-liste img { width: 96px; height: 72px; object-fit: cover; border-radius: 10px; }
.r-foto-weg { position: absolute; top: -10px; right: -10px; width: 44px; height: 44px; padding: 0; background: none; border: 0; cursor: pointer; display: grid; place-items: center; }
.r-foto-weg svg { box-sizing: content-box; padding: 5px; background: #252c18; color: #fff; border-radius: 50%; }
.r-turnstile:empty { display: none; }
.r-turnstile { margin-bottom: 10px; }
.r-meldung { font-weight: 700; }
.rechner-summe { min-width: 0; padding: clamp(1.125rem, 2.6vw, 1.75rem); border-radius: var(--radius); background: var(--wald-2); color: #f8f6ef; box-shadow: 0 26px 50px -30px rgb(24 30 12 / .7); position: relative; overflow: hidden; isolation: isolate; }
.rechner-summe::before { content: ""; position: absolute; z-index: -1; width: 24rem; height: 24rem; right: -9rem; top: -11rem; border-radius: 50%; background: radial-gradient(circle, rgb(220 198 143 / .24), transparent 70%); }
.rechner-summe h3 { margin: 0 0 12px; font: 500 1.5rem/1.15 var(--sc-font-display); scroll-margin-top: calc(var(--balken) + 24px); }
.r-leer { margin: 0; color: #dcdcc6; }
.r-posten { list-style: none; margin: 0 0 12px; padding: 0; }
.r-posten li { display: flex; justify-content: space-between; gap: 14px; padding-block: 10px; border-top: 1px solid rgb(255 255 255 / .16); }
.r-posten-name { display: grid; gap: 2px; min-width: 0; line-height: 1.25; overflow-wrap: anywhere; }
.r-posten small { font-size: .9375rem; color: #d6d6bf; font-variant-numeric: tabular-nums; }
.r-betrag { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.r-rabatt .r-betrag { color: var(--pfirsich); }
.r-pruefen small { color: var(--pfirsich); }
.r-summe-zahl { margin: 6px 0 2px; font: 700 clamp(2.4rem, 1.8rem + 2.4vw, 3.4rem)/1 var(--sc-font-display); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.r-spanne { margin: 0 0 10px; color: #ecebd8; }
.rechner-summe .r-klein { color: #d6d6bf; margin-bottom: 8px; }
.r-aktionen { display: grid; gap: 8px; margin-top: 14px; }
.r-link { background: transparent; color: #f8f6ef; border: 1px solid var(--glas-rand); min-height: 52px; font-size: 1.0625rem; overflow-wrap: anywhere; }
.r-leiste { position: fixed; z-index: 24; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 8px 18px; border-radius: 18px; background: var(--wald-2); color: #f8f6ef; text-decoration: none; box-shadow: 0 16px 34px -14px rgb(16 20 8 / .7); }
.r-leiste strong { margin-left: auto; font: 700 1.3rem var(--sc-font-display); font-variant-numeric: tabular-nums; }
.r-leiste-ziel { color: var(--pfirsich); font-weight: 700; }
.r-leiste[hidden], .r-leiste[data-weg] { display: none; }
.kalk-hinweis { margin: 8px 0 0; padding: 10px 14px; border-radius: 12px; background: rgb(220 198 143 / .18); }
@media (min-width: 860px) {
  .rechner-app { grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); }
  .rechner-summe { position: sticky; top: calc(var(--balken) + 16px); max-height: calc(100svh - var(--balken) - 32px); overflow-y: auto; }
  .r-leiste { display: none !important; }
}
@media (max-width: 859px) {
  .rechner { padding-bottom: 96px; }
  .r-grad-text { display: none; }
}
@media (prefers-reduced-motion: reduce) { .r-position { animation: none; } }

/* ---- Häufige Fragen ---- */
.fragen { position: relative; z-index: 4; padding-block: clamp(3.5rem, 8vw, 6rem); background: radial-gradient(44% 40% at 96% 80%, rgb(220 198 143 / .24), transparent 76%), var(--knochen); }
.fragen-innen { display: grid; gap: var(--sc-6); }
.fragen-liste { display: grid; }
.fragen-liste details { border-top: 1px solid var(--sc-hairline); }
.fragen-liste details:last-child { border-bottom: 1px solid var(--sc-hairline); }
.fragen-liste summary { cursor: pointer; display: flex; justify-content: space-between; gap: 16px; align-items: center; min-height: 60px; padding-block: 14px; font: 500 clamp(1.2rem, 1.05rem + .6vw, 1.5rem)/1.2 var(--sc-font-display); list-style: none; overflow-wrap: anywhere; }
.fragen-liste summary::-webkit-details-marker { display: none; }
.fragen-liste summary::after { content: ""; flex: none; width: 14px; height: 14px; border-right: 2px solid var(--pfirsich-tief); border-bottom: 2px solid var(--pfirsich-tief); transform: rotate(45deg) translate(-3px, -3px); transition: transform 240ms var(--federn); }
.fragen-liste details[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.fragen-liste p { margin: 0 0 18px; max-width: 66ch; color: var(--sc-ink-soft); }
@media (min-width: 860px) { .fragen-innen { grid-template-columns: 4fr 8fr; align-items: start; } }

/* ---- Ein ruhiger Moment beim Scrollen: Das Bild kommt aus dem warmen Ton ins Klare ---- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .versprechen figure img { animation: klar linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
    @keyframes klar { from { filter: sepia(.5) saturate(.8) brightness(1.08); transform: scale(1.05); } to { filter: none; transform: none; } }
  }
}

/* ---- Marke und Menü ---- */
.marke { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sc-font-display); font-weight: 700; font-size: 1.3rem; letter-spacing: 0; text-decoration: none; margin: 0; color: #f8f6ef; }
.marke-zeichen { flex: none; display: block; }
.menue a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 15px; border-radius: 999px; font-family: var(--sc-font-display); font-weight: 500; font-size: 1.0625rem; line-height: 1.1; text-decoration: none; transition: background-color 180ms var(--federn), color 180ms var(--federn); }
.menue a::after { content: none !important; }
.menue a[aria-current] { background: rgb(220 198 143 / .24); color: #f8eed0; }
@media (hover: hover) and (pointer: fine) { .menue a:hover { background: rgb(255 255 255 / .14); } }
.kopf[data-offen] .menue { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 6px 4px 12px; }
.kopf[data-offen] .menue a { min-height: 60px; padding: 12px; border: 1px solid var(--glas-rand); border-top: 1px solid var(--glas-rand); border-radius: 16px; background: var(--glas); font-size: 1.2rem; text-align: center; }
.kopf[data-offen] .menue a:last-child { grid-column: 1 / -1; background: var(--pfirsich); color: var(--sc-accent-ink); border-color: transparent; }
@media (min-width: 860px) { .menue { gap: 2px; } }

/* ---- Die Haus-Szene: Beim Scrollen wird alles sauber und gepflegt ---- */
.morgen { min-height: 340svh; }
.morgen [data-sc-stage] { height: 100lvh; background: var(--wald); }
.szene { position: absolute; inset: 0; overflow: hidden; }
.szene-kamera { position: absolute; inset: 0; transform: scale(1.03); will-change: transform; }
.szene-kamera picture, .szene-kamera img, .szene-kamera canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.szene-kamera img { object-fit: cover; }
.morgen-schleier { position: absolute; inset: 0; pointer-events: none; opacity: calc(1 - var(--sc-p, 0) * 7); background: radial-gradient(78% 86% at 0% 22%, rgb(30 37 18 / .95) 0%, rgb(30 37 18 / .86) 42%, rgb(30 37 18 / .46) 62%, rgb(30 37 18 / 0) 90%); }
.szene-text { left: var(--sc-gutter); top: calc(var(--balken) + 24px); bottom: auto; display: grid; gap: 10px; max-width: min(38rem, calc(100vw - 2 * var(--sc-gutter))); padding: 16px 20px; border-radius: 18px; background: rgb(30 37 18 / .7); color: #f8f6ef; }
.szene-text p { margin: 0; font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.6rem); line-height: 1.08; text-wrap: balance; }
.szene-text .fest { font: 700 1.25rem/1.3 var(--sc-font-text); }
@media (max-width: 859px) {
  .morgen-schleier { background: linear-gradient(to top, rgb(30 37 18 / .96) 0%, rgb(30 37 18 / .86) 40%, rgb(30 37 18 / 0) 66%); }
  .morgen-text { inset-inline: var(--sc-gutter); top: auto; max-width: none; bottom: calc(22px + env(safe-area-inset-bottom, 0px) + 100lvh - 100svh); gap: 10px; }
  .morgen h1 { font-size: clamp(1.8rem, 8vw, 2.4rem); }
  .unterzeile { font-size: 1.0625rem; }
}
@media (prefers-reduced-motion: reduce) { .szene-kamera { transform: none !important; } }

/* ---- Preisrechner als aufklappbare Liste ---- */
.r-basis { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); padding: clamp(1rem, 2.4vw, 1.5rem); border-radius: 20px; background: #fff; border: 1px solid var(--sc-hairline); }
.r-basis label { font-weight: 700; }
.r-basis input[type="text"] { width: 100%; min-height: 54px; padding: 10px 14px; border-radius: 14px; border: 1px solid #c9c4b0; background: #fff; font: inherit; color: inherit; }
.r-basis input::placeholder { color: #6b6f57; }
.r-gruppe h3 { margin: 0; font: 500 1.5rem/1.15 var(--sc-font-display); }
.r-gruppe-name { margin: 14px 0 2px; font: 700 1rem/1.2 var(--sc-font-text); color: var(--sc-ink-soft); }
.r-reihen { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
.r-reihe { border-radius: 18px; background: #fff; border: 1px solid var(--sc-hairline); min-width: 0; scroll-margin: calc(var(--balken) + 16px) 0 96px; transition: border-color 180ms var(--federn), background-color 180ms var(--federn); }
.r-reihe[data-an] { background: var(--pfirsich-hell); border-color: var(--pfirsich); }
.r-reihe[data-offen] { background: #fff; box-shadow: 0 18px 38px -26px rgb(30 37 18 / .6); }
.r-reihe-kopf { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 14px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 18px; }
.r-reihe-kopf:focus-visible { outline: 3px solid var(--pfirsich-tief); outline-offset: 2px; }
.r-symbol { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--pfirsich-hell); color: var(--pfirsich-tief); }
.r-reihe[data-an] .r-symbol { background: var(--pfirsich); color: #252c18; }
.r-reihe-text { display: grid; gap: 1px; min-width: 0; flex: 1; line-height: 1.2; overflow-wrap: anywhere; }
.r-reihe-text small { font-size: 1rem; color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; }
.r-reihe[data-an] .r-reihe-text small { color: #3f4630; font-weight: 700; }
.r-marke { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--wald-2); transition: transform 220ms var(--federn); }
.r-marke::before, .r-marke::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; background: #f8f6ef; border-radius: 2px; }
.r-marke::after { transform: rotate(90deg); transition: transform 220ms var(--federn); }
.r-reihe[data-offen] .r-marke::after { transform: rotate(0); }
.r-reihe[data-an]:not([data-offen]) .r-marke::before { width: 7px; margin: 1px 0 0 -7px; transform: rotate(45deg); }
.r-reihe[data-an]:not([data-offen]) .r-marke::after { width: 13px; margin: -1px 0 0 -3px; transform: rotate(-50deg); }
.r-reihe-inhalt { display: grid; gap: 16px; padding: 4px 14px 16px; min-width: 0; animation: r-auf 300ms var(--federn); }
.r-reihe-inhalt > * { min-width: 0; }
@keyframes r-auf { from { opacity: 0; transform: translateY(-6px); } }
.r-menge label { font-weight: 700; }
.r-zahl input { width: 6.5rem; min-height: 56px; font-size: 1.3rem; }
.r-reihe-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.r-fertig { min-height: 52px; flex: 1 1 10rem; }
.r-weg { min-height: 44px; padding: 8px 12px; background: none; border: 0; color: var(--sc-ink-soft); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (min-width: 620px) { .r-basis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .r-reihe-inhalt { animation: none; } }
.rechner-kopf ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rechner-kopf li { padding: 6px 14px; border-radius: 999px; background: var(--pfirsich-hell); color: #3f4630; font-weight: 700; font-size: 1.0625rem; }

/* ---- Auswahl als gut antippbare Liste statt abgeschnittener Dropdowns ---- */
.r-wahl { border: 0; margin: 0; padding: 0; min-width: 0; }
.r-wahl legend { font-weight: 700; padding: 0; margin-bottom: 8px; }
.r-wahl-liste { display: grid; gap: 6px; }
.r-wahl-punkt { position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px; border: 1px solid var(--sc-hairline); border-radius: 14px; cursor: pointer; line-height: 1.25; transition: background-color 160ms var(--federn), border-color 160ms var(--federn); }
.r-wahl-punkt input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--pfirsich-tief); }
.r-wahl-punkt:has(input:checked) { background: var(--pfirsich-hell); border-color: var(--pfirsich); font-weight: 700; }

/* Vordergrund-Ebene: unscharfe Blätter direkt vor der Kamera, sie gleiten beim Scrollen schneller weg als der Film */
.vorne { position: absolute; inset: 0; pointer-events: none; --v: min(1, calc(var(--sc-p, 0) / .3)); translate: var(--maus-x, 0) 0; }
.vorne img { position: absolute; bottom: -12%; width: auto; height: 74%; max-width: none; filter: blur(7px) brightness(.82); will-change: transform; }
.vorne-l { left: -6%; transform: translate(calc(var(--v) * -135%), calc(var(--v) * 30%)) scale(calc(1 + var(--v) * .45)); transform-origin: 0 100%; }
.vorne-r { right: -9%; height: 60%; transform: translate(calc(var(--v) * 135%), calc(var(--v) * 30%)) scale(calc(1 + var(--v) * .45)) scaleX(-1); transform-origin: 100% 100%; }
@media (max-width: 859px) { .vorne img { height: 42%; bottom: -8%; filter: blur(5px) brightness(.82); } .vorne-l { left: -34%; } .vorne-r { right: -38%; height: 36%; } }
@media (prefers-reduced-motion: reduce) { .vorne { display: none; } }