/* Startseite (index.html), Bildwelt „Grün auf Dunkel“. Grundlagen in site.css. */

/* ---------- Hero: grüner Verlauf ins Schwarze, feines Korn, Licht folgt der Maus ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden; padding: 104px 0 0; text-align: center;
  background:
    radial-gradient(70% 60% at 50% -14%, rgba(102, 159, 50, 0.42), transparent 70%),
    radial-gradient(45% 45% at 88% 18%, rgba(102, 159, 50, 0.10), transparent 70%),
    linear-gradient(180deg, #131A10 0%, var(--grund) 78%);
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-licht {
  position: absolute; left: 0; top: 0; width: 720px; height: 720px; margin: -360px 0 0 -360px; border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgba(155, 203, 102, 0.16), transparent 62%); opacity: 0; transition: opacity 500ms ease; will-change: transform;
}
.hero.licht-an .hero-licht { opacity: 1; }
.hero h1 { font-size: clamp(46px, 7.4vw, 96px); line-height: 0.95; letter-spacing: -0.045em; margin: 0 auto 28px; }
.hero-zeile { display: block; }
.hero .lead { font-size: clamp(18px, 1.7vw, 21px); line-height: 1.55; color: var(--text-2); max-width: 54ch; margin: 0 auto 34px; }
.hero .lead strong { color: var(--text); font-weight: 650; }
.aktionen { display: flex; gap: 12px 28px; justify-content: center; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.hero .aktionen .btn { min-width: 250px; }
.hero .fein { font-size: 14.5px; color: var(--text-2); max-width: 62ch; margin: 0 auto 26px; }
.merkmale { display: flex; justify-content: center; gap: 10px 26px; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
.merkmale li { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: var(--text-2); }
.merkmale svg { width: 17px; height: 17px; color: var(--gruen-hell); flex-shrink: 0; }
/* Einmaliger Auftritt beim Laden: Zeile für Zeile */
.js .hero-zeile, .js .hero .lead, .js .hero .aktionen, .js .hero .fein, .js .merkmale, .js .hero-bild { opacity: 0; transform: translateY(16px); animation: hero-rein 760ms var(--ease-out) forwards; }
.js .hero-zeile + .hero-zeile { animation-delay: 80ms; }
.js .hero .lead { animation-delay: 160ms; }
.js .hero .aktionen { animation-delay: 230ms; }
.js .hero .fein, .js .merkmale { animation-delay: 290ms; }
.js .hero-bild { animation-delay: 360ms; animation-duration: 900ms; }
@keyframes hero-rein { to { opacity: 1; transform: none; } }
/* App-Bild im Browserfenster, läuft unten weich ins Dunkle aus */
.hero-bild { position: relative; max-width: 1100px; margin: 64px auto 0; }
.hero-bild::before {
  content: ""; position: absolute; left: 10%; right: 10%; top: 8%; height: 70%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(102, 159, 50, 0.45), transparent); filter: blur(30px);
}
.rahmen-ausschnitt { max-height: 540px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent); mask-image: linear-gradient(180deg, #000 72%, transparent); }
.hero-bild .rahmen { border-bottom: none; border-radius: 14px 14px 0 0; }
.hero-bild figcaption { font-size: 14px; color: var(--text-3); margin: 18px auto 0; padding-bottom: 8px; max-width: 60ch; }
@media (max-width: 640px) {
  .hero { padding-top: 64px; }
  /* „Mehr Handwerk.“ bleibt am Handy auf einer Zeile */
  .hero h1 { font-size: clamp(34px, 11vw, 46px); }
  .hero .aktionen .btn { width: 100%; min-width: 0; }
  .merkmale { flex-direction: column; align-items: center; }
  .hero-bild { margin-top: 44px; }
  .rahmen-ausschnitt { max-height: 260px; }
}

/* ---------- Werbevideo ---------- */
#video { padding-top: 96px; }
.film { position: relative; max-width: 1040px; margin: 0 auto; }
.film::before {
  content: ""; position: absolute; left: 12%; right: 12%; top: 10%; height: 70%; z-index: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(102, 159, 50, 0.38), transparent); filter: blur(34px);
}
.film-rahmen { position: relative; z-index: 1; margin: 0 auto; background: #0B0E09; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.10); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(0, 0, 0, 0.4); }
.film-bild { position: relative; aspect-ratio: 16 / 9; }
.film-video { display: block; width: 100%; height: 100%; object-fit: cover; background: #0B0E09; }
/* Handy: Hochformat, nie höher als der Bildschirm */
.film-rahmen.hoch { width: min(100%, calc(78svh * 9 / 16)); }
.film-rahmen.hoch .film-bild { aspect-ratio: 9 / 16; }
/* Großer Start-Knopf: unten in der Mitte, damit er im Vorschaubild nicht das Logo verdeckt */
.film-start {
  position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 8px 24px 8px 8px; border-radius: var(--radius-pill); border: 1px solid rgba(185, 219, 143, 0.32); cursor: pointer;
  font: 700 17px/1.2 var(--font); color: #fff; white-space: nowrap; background: rgba(14, 17, 12, 0.72);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 16px 40px -14px rgba(0, 0, 0, 0.9);
  transition: transform 160ms var(--ease-out), background-color 200ms ease, border-color 200ms ease;
}
.film-start[hidden] { display: none; }
.film-start:active { transform: translateX(-50%) scale(0.97); }
.film-start-symbol { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--gruen-knopf); box-shadow: 0 0 24px -6px var(--gruen-schein); }
.film-start-symbol svg { width: 20px; height: 20px; margin-left: 2px; }
.film-dauer { font-weight: 500; font-size: 14.5px; color: var(--text-2); }
@media (hover: hover) and (pointer: fine) { .film-start:hover { background: rgba(26, 31, 22, 0.9); border-color: rgba(185, 219, 143, 0.55); } }
/* „Mit Ton ansehen“: nur sichtbar, solange das Video stumm läuft; zieht den Blick mit einem
   ruhigen Puls (Ring dehnt sich aus und verblasst), Klick startet mit Ton von vorn */
.film-ton-gross {
  position: absolute; top: 14px; right: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 9px;
  min-height: 46px; padding: 8px 18px 8px 14px; border-radius: var(--radius-pill); border: 1px solid rgba(185, 219, 143, 0.4); cursor: pointer;
  font: 700 15.5px/1.2 var(--font); color: #fff; white-space: nowrap; background: var(--gruen-knopf);
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(155, 203, 102, 0.12);
  animation: film-ton-rein 420ms var(--ease-out) both; transition: transform 160ms var(--ease-out), background-color 200ms ease;
}
.film-ton-gross[hidden] { display: none; }
.film-ton-gross svg { width: 22px; height: 22px; flex-shrink: 0; }
.film-ton-gross::after {
  content: ""; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none;
  border: 2px solid rgba(155, 203, 102, 0.75); opacity: 0; animation: film-ton-puls 2.4s var(--ease-out) 0.6s infinite;
}
.film-ton-gross:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) { .film-ton-gross:hover { background: var(--gruen-knopf-tief); } }
@keyframes film-ton-rein { from { opacity: 0; transform: translateY(-6px); } }
@keyframes film-ton-puls { 0% { opacity: 0.9; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.14, 1.4); } }
/* Bedienleiste unter dem Bild, im Stil des Browserrahmens: verdeckt nie Text im Video */
.film-leiste { display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; background: #1A1F16; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); }
.film-leiste[hidden] { display: none; }
.film-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; height: 44px; padding: 0 10px; border-radius: var(--radius-pill);
  border: 1px solid transparent; background: transparent; color: var(--text); font: 650 14.5px var(--font); cursor: pointer;
  transition: transform 140ms var(--ease-out), background-color 160ms ease, border-color 160ms ease;
}
.film-knopf:active { transform: scale(0.94); }
.film-knopf svg { width: 22px; height: 22px; flex-shrink: 0; }
@media (hover: hover) and (pointer: fine) { .film-knopf:hover { background: rgba(155, 203, 102, 0.12); border-color: rgba(155, 203, 102, 0.3); } }
#film-ton { border-color: var(--linie-stark); padding: 0 14px 0 10px; }
#film-ton[aria-pressed="true"] { color: var(--gruen-hell-2); border-color: rgba(155, 203, 102, 0.4); background: rgba(102, 159, 50, 0.12); }
.film-knopf .symbol-anhalten, .film-knopf .symbol-ton { display: none; }
.film-rahmen[data-zustand="laeuft"] .symbol-abspielen { display: none; }
.film-rahmen[data-zustand="laeuft"] .symbol-anhalten { display: block; }
#film-ton[aria-pressed="true"] .symbol-stumm { display: none; }
#film-ton[aria-pressed="true"] .symbol-ton { display: block; }
.film-fortschritt { flex: 1; height: 4px; margin: 0 8px; border-radius: 2px; background: rgba(241, 244, 236, 0.14); overflow: hidden; }
.film-fortschritt span { display: block; height: 100%; background: var(--gruen-hell); transform: scaleX(0); transform-origin: left; }
.film-zeit { font-size: 14px; color: var(--text-3); white-space: nowrap; }
.film figcaption { position: relative; z-index: 1; font-size: 14px; color: var(--text-3); text-align: center; margin: 16px auto 0; max-width: 64ch; }
.film-aktion { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 32px; }
.film-aktion .btn { min-width: 280px; }
.film-text { width: 100%; max-width: 720px; border-top: 1px solid var(--linie); }
.film-text summary { cursor: pointer; padding: 12px 0; min-height: 44px; text-align: center; font-weight: 650; font-size: 15.5px; color: var(--text-2); }
.film-text summary::marker { color: var(--gruen-hell); }
.film-text p { color: var(--text-2); font-size: 16px; margin: 0 0 12px; }
@media (max-width: 640px) {
  #video { padding-top: 64px; }
  .film-start { bottom: 9%; padding-right: 18px; font-size: 16px; }
  .film-dauer { display: none; }
  .film-leiste { padding-right: 10px; }
  .film-ton-text { display: none; }
  .film-ton-gross { top: 10px; right: 10px; min-height: 44px; padding: 7px 14px 7px 11px; font-size: 14.5px; }
  #film-ton { padding: 0 10px; }
  .film-aktion .btn { width: 100%; min-width: 0; }
}

/* ---------- Vorteile auf einen Blick ---------- */
#vorteile { padding-top: 96px; }
.vorteile { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.vorteil { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; align-content: start; padding: 24px 22px; overflow: hidden; }
.vorteil::after {
  content: ""; position: absolute; right: -90px; bottom: -110px; width: 240px; height: 240px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(102, 159, 50, 0.18), transparent);
}
.vorteil .symbol-box { grid-row: 1 / span 2; margin: 0; }
.vorteil h3 { font-size: 22px; line-height: 1.15; margin: 2px 0 6px; }
.vorteil p { margin: 0; font-size: 16px; color: var(--text-2); }
.kennzahlen { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.kennzahl { display: flex; align-items: center; gap: 16px; padding: 20px 24px; border: 1px solid var(--linie); border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.02); }
.kennzahl b { font-family: var(--font-display); font-size: 52px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--gruen-hell); white-space: nowrap; }
.kennzahl > span { font-size: 15px; line-height: 1.45; color: var(--text-2); }
@media (max-width: 960px) { .vorteile { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kennzahlen { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .vorteile { grid-template-columns: 1fr; gap: 10px; }
  .vorteil { padding: 18px; }
  .vorteil h3 { font-size: 20px; margin-bottom: 2px; }
  .vorteil p { font-size: 15px; }
  .kennzahl { padding: 16px 18px; }
  .kennzahl b { font-size: 42px; }
}

/* ---------- Produktvorschau ---------- */
.einblicke { display: grid; gap: 96px; }
.einblick { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 56px; align-items: center; }
.einblick.gespiegelt { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); }
.einblick.gespiegelt .einblick-text { order: -1; }
.einblick .rahmen { margin: 0; }
.einblick-text h3 { font-size: clamp(26px, 2.8vw, 34px); line-height: 1.08; margin: 0 0 18px; }
.haken { list-style: none; margin: 0; padding: 0; }
.haken li { position: relative; padding-left: 34px; margin-bottom: 14px; color: var(--text-2); }
.haken li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: rgba(102, 159, 50, 0.16);
  box-shadow: inset 0 0 0 1px rgba(155, 203, 102, 0.3);
}
.haken li::after {
  content: ""; position: absolute; left: 5px; top: 8px; width: 12px; height: 12px; background: var(--gruen-hell);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (max-width: 860px) {
  .einblicke { gap: 64px; }
  .einblick, .einblick.gespiegelt { grid-template-columns: 1fr; gap: 26px; }
  .einblick.gespiegelt .einblick-text { order: 0; }
}
.ausserdem { margin-top: 96px; }
.ausserdem h3 { font-size: clamp(24px, 2.6vw, 30px); margin: 0 0 18px; }
.ausserdem ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; }
.ausserdem li { padding: 16px 0; border-top: 1px solid var(--linie); }
.ausserdem strong { display: block; font-weight: 650; color: var(--text); }
.ausserdem span { font-size: 15.5px; color: var(--text-3); }
@media (max-width: 960px) { .ausserdem ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ausserdem { margin-top: 64px; } .ausserdem ul { grid-template-columns: 1fr; } }

/* ---------- Sparrechner ---------- */
.rechner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; padding: 28px; max-width: 1000px; margin: 0 auto; }
.rechner-eingaben { display: grid; gap: 22px; align-content: center; padding: 8px; }
.rechner-feld label { display: block; font-size: 16px; font-weight: 650; color: var(--text); margin-bottom: 8px; }
.rechner-feld .einheit { font-weight: 400; color: var(--text-3); }
.eingabe-zeile { display: grid; grid-template-columns: 58px minmax(0, 1fr) 58px; gap: 8px; }
.eingabe-zeile input {
  width: 100%; min-height: 60px; padding: 8px 10px; text-align: center; font: 700 26px var(--font-display); letter-spacing: -0.02em; color: var(--text);
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--linie-stark); border-radius: var(--radius-md); font-variant-numeric: tabular-nums;
  -moz-appearance: textfield; appearance: textfield; transition: border-color 160ms ease, background-color 160ms ease;
}
.eingabe-zeile input::-webkit-outer-spin-button, .eingabe-zeile input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.eingabe-zeile input:focus-visible { outline: 3px solid rgba(155, 203, 102, 0.55); outline-offset: 2px; border-color: var(--gruen-hell); background: rgba(255, 255, 255, 0.06); }
.schritt-knopf {
  min-height: 60px; border-radius: var(--radius-md); border: 1px solid var(--linie-stark); background: rgba(255, 255, 255, 0.05);
  color: var(--text); font: 600 28px/1 var(--font); cursor: pointer; transition: transform 140ms var(--ease-out), background-color 160ms ease, border-color 160ms ease;
}
.schritt-knopf:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .schritt-knopf:hover { background: rgba(155, 203, 102, 0.14); border-color: rgba(155, 203, 102, 0.4); } }
.rechner-ergebnis {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 36px 28px; border-radius: var(--radius-lg);
  background: radial-gradient(90% 80% at 50% 0%, rgba(102, 159, 50, 0.32), transparent 70%), #10150D; border: 1px solid rgba(155, 203, 102, 0.22);
}
.ergebnis-label { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gruen-hell); margin-bottom: 8px; }
.ergebnis-betrag { font-family: var(--font-display); font-weight: 700; font-size: clamp(64px, 9vw, 104px); line-height: 1; letter-spacing: -0.05em; color: #fff; }
.ergebnis-betrag .waehrung { font-size: 0.45em; letter-spacing: 0; color: var(--gruen-hell-2); }
.ergebnis-vergleich { font-size: 16px; color: var(--text-2); max-width: 34ch; margin: 14px 0 24px; }
.rechner-ergebnis .btn { width: 100%; max-width: 340px; }
.rechner-annahme { font-size: 14.5px; color: var(--text-3); text-align: center; max-width: 66ch; margin: 22px auto 0; }
@media (max-width: 760px) {
  .rechner { grid-template-columns: 1fr; padding: 16px; }
  .rechner-eingaben { padding: 4px; }
  .rechner-ergebnis { padding: 28px 18px; }
}

/* ---------- So funktioniert's ---------- */
.schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.schritt { padding: 28px 26px; }
.schritt-nr { display: block; font-family: var(--font-display); font-size: 60px; font-weight: 700; line-height: 0.9; letter-spacing: -0.04em; color: var(--gruen-hell); margin-bottom: 14px; }
.schritt h3 { font-size: 21px; line-height: 1.25; margin: 0 0 8px; }
.schritt p { margin: 0; font-size: 16px; color: var(--text-2); }
@media (max-width: 860px) { .schritte { grid-template-columns: 1fr; } .schritt-nr { font-size: 48px; } }
.gegenueber { margin-top: 40px; }
.gegenueber table { width: 100%; border-collapse: collapse; font-size: 16.5px; }
.gegenueber th { text-align: left; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0 24px 14px 0; border-bottom: 1px solid var(--linie-stark); width: 50%; color: var(--text-3); }
.gegenueber th + th { color: var(--gruen-hell); }
.gegenueber td { padding: 16px 24px 16px 0; border-bottom: 1px solid var(--linie); vertical-align: top; line-height: 1.5; color: var(--text-3); }
.gegenueber td + td { color: var(--text); font-weight: 600; }
@media (max-width: 640px) {
  .gegenueber table, .gegenueber tbody, .gegenueber tr, .gegenueber td { display: block; width: 100%; }
  .gegenueber thead { display: none; }
  .gegenueber tr { padding: 14px 0; border-bottom: 1px solid var(--linie); }
  .gegenueber td { border: none; padding: 0; }
  .gegenueber td:first-child { font-size: 15px; text-decoration: line-through; text-decoration-color: rgba(158, 167, 150, 0.6); margin-bottom: 4px; }
}

/* ---------- Branchen ---------- */
.gewerk-raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.gewerk-kachel {
  display: flex; align-items: center; gap: 14px; height: 100%; min-height: 76px; padding: 14px 16px; text-decoration: none; color: var(--text);
  transition: transform 160ms var(--ease-out), border-color 200ms ease;
}
.gewerk-kachel:active { transform: scale(0.98); }
.gewerk-name { font-weight: 650; font-size: 16.5px; line-height: 1.3; }
.gewerk-kachel .pfeil { width: 18px; height: 18px; margin-left: auto; flex-shrink: 0; color: var(--text-3); transition: transform 200ms var(--ease-out), color 160ms ease; }
@media (hover: hover) and (pointer: fine) { .gewerk-kachel:hover { border-color: rgba(155, 203, 102, 0.35); } .gewerk-kachel:hover .pfeil { transform: translateX(3px); color: var(--gruen-hell); } }
.handwerk-alle { text-align: center; margin: 28px 0 0; }
.gewerk-name { min-width: 0; overflow-wrap: break-word; hyphens: auto; }
/* Tablet und Handy: Symbol über dem Namen, damit lange Namen („Garten- und Landschaftsbau“) Platz haben */
@media (max-width: 960px) {
  .gewerk-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .gewerk-kachel { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; min-height: 0; }
  .gewerk-kachel .gewerk-symbol { width: 38px; height: 38px; }
  .gewerk-name { font-size: 15.5px; }
  .gewerk-kachel .pfeil { display: none; }
}
@media (max-width: 700px) { .gewerk-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Preis ---------- */
.preis-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: stretch; max-width: 1000px; margin: 0 auto; }
.preis-karte { display: flex; flex-direction: column; padding: 36px 32px; border-color: rgba(155, 203, 102, 0.25); box-shadow: 0 40px 90px -40px rgba(102, 159, 50, 0.5); }
.preis-betrag { font-family: var(--font-display); font-size: 76px; font-weight: 700; letter-spacing: -0.05em; line-height: 1; color: #fff; }
.preis-zeit { font-family: var(--font); font-size: 20px; font-weight: 500; letter-spacing: 0; color: var(--text-2); }
.preis-hinweis { font-size: 15px; color: var(--text-3); margin: 10px 0 24px; }
.preis-karte .btn { margin-top: auto; width: 100%; }
.preis-karte .haken { margin-bottom: 24px; }
.abo-ablauf { padding: 8px 4px; }
.abo-ablauf h3 { font-size: 26px; margin: 0 0 8px; }
.abo-ablauf ol { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.abo-ablauf li { counter-increment: s; position: relative; padding: 18px 0 18px 54px; border-top: 1px solid var(--linie); }
.abo-ablauf li:first-child { border-top: none; }
.abo-ablauf li::before {
  content: counter(s); position: absolute; left: 0; top: 16px; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font: 700 16px var(--font-display); color: var(--gruen-hell); border: 1px solid rgba(155, 203, 102, 0.4); background: rgba(102, 159, 50, 0.1);
}
.abo-ablauf strong { display: block; font-size: 18px; margin-bottom: 2px; }
.abo-ablauf span { color: var(--text-2); font-size: 16px; }
@media (max-width: 860px) { .preis-layout { grid-template-columns: 1fr; } .preis-karte { padding: 28px 22px; } .preis-betrag { font-size: 64px; } }

/* ---------- Fragen und Antworten ---------- */
.faq-layout { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 32px 64px; align-items: start; }
@media (max-width: 860px) { .faq-layout { grid-template-columns: 1fr; } }
.faq details { border-bottom: 1px solid var(--linie); }
.faq details:first-child { border-top: 1px solid var(--linie); }
.faq summary {
  position: relative; list-style: none; cursor: pointer; padding: 22px 48px 22px 0; min-height: 44px;
  font-family: var(--font-display); font-size: 19px; font-weight: 650; letter-spacing: -0.01em; color: var(--text); transition: color 160ms ease;
}
.faq summary::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) { .faq summary:hover { color: var(--gruen-hell-2); } }
.plus { position: absolute; right: 8px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; border: 1px solid var(--linie-stark); transition: transform 220ms var(--ease-out), border-color 160ms ease; }
.plus::before, .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; margin: -0.75px 0 0 -5px; background: var(--gruen-hell); border-radius: 1px; }
.plus::after { transform: rotate(90deg); }
.faq details[open] .plus { transform: rotate(45deg); border-color: rgba(155, 203, 102, 0.5); }
.antwort { padding: 0 48px 20px 0; }
.antwort p { margin: 0 0 12px; color: var(--text-2); }
.antwort p:last-child { margin: 0; }
.faq details[open] .antwort { animation: aufklappen 260ms var(--ease-out); }
@keyframes aufklappen { from { opacity: 0; transform: translateY(-6px); } }
@media (max-width: 640px) { .antwort { padding-right: 0; } .faq summary { font-size: 17.5px; } }

/* ---------- Abschluss: Download ---------- */
.start-tafel { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
@media (max-width: 860px) { .start-tafel { grid-template-columns: 1fr; } }
.start-tafel h2 { margin-bottom: 22px; }
.start-schritte { margin: 0; padding: 0; list-style: none; counter-reset: s; }
.start-schritte li { counter-increment: s; position: relative; padding: 0 0 16px 50px; color: var(--text-2); }
.start-schritte li:last-child { padding-bottom: 0; }
.start-schritte li::before {
  content: counter(s); position: absolute; left: 0; top: -2px; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font: 700 15px var(--font-display); color: #0E110C; background: var(--gruen-hell);
}
.start-schritte strong { color: var(--text); }
.btn-gross { font-size: 18px; min-height: 62px; padding: 18px 28px; }
.download-info { font-size: 14.5px; color: var(--text-3); margin: 0; }
.windows-hinweis { border: 1px solid var(--linie-stark); border-radius: var(--radius-md); background: rgba(0, 0, 0, 0.18); }
.windows-hinweis summary { cursor: pointer; padding: 13px 16px; min-height: 48px; font-weight: 650; font-size: 15.5px; color: var(--text); }
.windows-hinweis summary::marker { color: var(--gruen-hell); }
.windows-hinweis > div { padding: 0 16px 14px; font-size: 15px; color: var(--text-2); }
.windows-hinweis p, .windows-hinweis ol { margin: 0 0 10px; }

/* ---------- Checkliste per Newsletter ---------- */
#checkliste { padding: 0 0 112px; }
.checkliste { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 36px; align-items: start; padding: 32px; }
.checkliste-bild { width: 100%; height: auto; border-radius: var(--radius-sm); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.8); }
.checkliste-text h2 { font-size: clamp(26px, 3vw, 34px); line-height: 1.08; margin: 0 0 12px; }
.checkliste-text p { color: var(--text-2); max-width: 62ch; margin: 0 0 18px; }
.newsletter-form { display: flex; flex-wrap: wrap; gap: 10px; max-width: 580px; }
.newsletter-form input[type=email] {
  flex: 1 1 240px; font: 17px var(--font); padding: 12px 16px; min-height: 54px; border-radius: var(--radius-pill); color: var(--text);
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--linie-stark); transition: border-color 160ms ease;
}
.newsletter-form input[type=email]::placeholder { color: var(--text-3); }
.newsletter-form input[type=email]:focus-visible { border-color: var(--gruen-hell); outline: 3px solid rgba(155, 203, 102, 0.5); outline-offset: 2px; }
.hp-feld { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.newsletter-consent { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; font-size: 14.5px; color: var(--text-3); max-width: 64ch; cursor: pointer; }
.newsletter-consent input { width: 22px; height: 22px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--gruen); }
.newsletter-meldung { margin: 12px 0 0; font-size: 15.5px; font-weight: 600; min-height: 1em; }
.newsletter-meldung.ok { color: var(--gruen-hell); }
.newsletter-meldung.fehler { color: var(--fehler); }
@media (max-width: 640px) { .checkliste { grid-template-columns: 1fr; gap: 22px; padding: 22px; } .checkliste-bild { max-width: 130px; } .newsletter-form .btn { width: 100%; } }

/* „Bewegung reduzieren“: Auftritt und Bewegungen aus, alles sofort sichtbar */
@media (prefers-reduced-motion: reduce) {
  .js .hero-zeile, .js .hero .lead, .js .hero .aktionen, .js .hero .fein, .js .merkmale, .js .hero-bild { opacity: 1; transform: none; animation: none; }
  .hero-licht { display: none; }
  .schritt-knopf, .gewerk-kachel, .film-knopf, .film-start { transition-property: background-color, border-color; }
  .schritt-knopf:active, .gewerk-kachel:active, .film-knopf:active { transform: none; }
  .film-start:active { transform: translateX(-50%); }
  .film-ton-gross, .film-ton-gross::after { animation: none; }
  .film-ton-gross:active { transform: none; }
  .gewerk-kachel .pfeil { transition: color 160ms ease; transform: none !important; }
  .plus { transition: border-color 160ms ease; }
  .faq details[open] .antwort { animation: none; }
}