/* VendPro 2026 — ruhiges Designsystem (Apple-inspiriert): eine Aussage pro Abschnitt, viel Weißraum, Inter, Dunkel/Hell im Wechsel */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #fafaf7; --bg-soft: #f1f2ee;
  --ink: #0f1511; --mid: rgba(15,21,17,.74); --soft: rgba(15,21,17,.66);
  --line: rgba(15,21,17,.1); --line-2: rgba(15,21,17,.2);
  --card: #ffffff; --card-2: #ffffff;
  --g: #22c55e; --g-2: #11713a; --g-ink: #0b6b33;
  --sh: 0 1px 2px rgba(15,21,17,.05), 0 18px 44px -26px rgba(15,21,17,.28);
  --r: 28px; --r-sm: 16px;
  --ease: cubic-bezier(.16,1,.3,1);
  --wrap-max: 1180px; --wrap: min(var(--wrap-max), 100% - 48px);
  --nav-h: 48px;
}
.light { --bg: #f1f2ee; --bg-soft: #ffffff; }
.dark { --bg: #0b100d; --bg-soft: #141a16; --ink: #f4f6f2; --mid: rgba(244,246,242,.76); --soft: rgba(244,246,242,.66); --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.24); --card: #151b17; --card-2: #1b221d; --g-2: #4ade80; --g-ink: #4ade80; --sh: 0 20px 50px -28px rgba(0,0,0,.8); }
html { color-scheme: light; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; background: #fafaf7; scroll-padding-top: 70px; }
body { font-family: 'Inter', system-ui, -apple-system, sans-serif; color: var(--ink); background: var(--bg); overflow-x: clip; line-height: 1.5; font-feature-settings: 'ss01', 'cv11'; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
::selection { background: rgba(34,197,94,.35); }
:focus-visible { outline: 2px solid var(--g); outline-offset: 3px; border-radius: 8px; }
.wrap { width: var(--wrap); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: #0f1511; color: #fff; padding: 8px 14px; border-radius: 8px; }
.skip:focus { left: 8px; }

/* ── Typografie ── */
.kicker { font-size: 16px; font-weight: 600; color: var(--g-ink); letter-spacing: -.01em; }
.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--g-ink); }
.h1, .h2, .h3 { text-wrap: balance; font-weight: 700; letter-spacing: -.035em; line-height: 1.05; overflow-wrap: break-word; hyphens: auto; }
.h1 { font-size: clamp(2.5rem, 6.4vw, 5.2rem); letter-spacing: -.045em; line-height: 1.02; }
.h2 { font-size: clamp(2rem, 4.6vw, 3.6rem); letter-spacing: -.04em; }
.h3 { font-size: clamp(1.3rem, 2.2vw, 1.75rem); letter-spacing: -.025em; line-height: 1.12; }
.lead { font-size: clamp(1.05rem, 1.7vw, 1.4rem); line-height: 1.38; color: var(--mid); max-width: 36em; letter-spacing: -.012em; }
.dim { color: var(--soft); }
.sec { position: relative; padding: clamp(88px, 12vw, 168px) 0; background: var(--bg); color: var(--ink); }
.sec-head { max-width: 780px; margin: 0 auto clamp(40px, 6vw, 80px); display: grid; gap: 16px; text-align: center; justify-items: center; }
.left { text-align: left; margin-left: 0; justify-items: start; }
.note { font-size: 13px; color: var(--soft); }

/* ── Buttons ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 24px; border-radius: 999px; font-weight: 500; font-size: 16px; letter-spacing: -.01em; border: 1px solid transparent; transition: background .25s, transform .3s var(--ease), border-color .25s, color .25s; white-space: nowrap; }
.btn:hover { transform: scale(1.03); }
.btn-primary { background: var(--g); color: #04140a; }
.btn-primary:hover { background: #34d672; }
.btn-ghost { border-color: var(--line-2); color: var(--ink); background: rgba(255,255,255,.6); }
.btn-ghost:hover { border-color: var(--ink); background: #fff; }
.dark .btn-ghost { background: transparent; }
.btn-wa { background: transparent; border-color: rgba(21,128,61,.55); color: var(--g-2); }
.btn-sm { min-height: 38px; padding: 0 18px; font-size: 14px; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.arrow::after { content: '›'; font-size: 1.25em; line-height: 1; transition: transform .25s var(--ease); }
.arrow:hover::after { transform: translateX(3px); }
.btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.link { color: var(--g-ink); font-weight: 600; font-size: 16px; }
.link::after { content: ' ›'; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── Navigation (schwebende Milchglas-Kapsel) ── */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: var(--nav-h); pointer-events: none; background: transparent; border-bottom: 0; transition: background-color .3s, box-shadow .3s; }
.nav-in { pointer-events: auto; height: 44px; margin-top: 6px; width: min(calc(var(--wrap-max) - 80px), calc(100% - 24px)); margin-left: auto; margin-right: auto; padding: 0 8px 0 16px; border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,.56)); -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 1px rgba(15,21,17,.07), 0 14px 38px -16px rgba(15,21,17,.3); display: flex; align-items: center; justify-content: space-between; color: var(--ink); view-transition-name: vp-nav; }
.footer .brand { color: #f4f6f2; }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 17px; letter-spacing: -.03em; }
.brand-mark { width: 24px; height: 24px; border-radius: 7px; background: var(--g); display: grid; place-items: center; }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a:not(.btn) { font-size: 14px; color: var(--mid); transition: color .2s; position: relative; }
.nav-links a:not(.btn):hover, .nav-links a[aria-current="page"] { color: var(--ink); }
.nav-links a:not(.btn)::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: var(--g); transform: scaleX(0); transition: transform .35s var(--ease); }
.nav-links a:not(.btn):hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links a[aria-current="page"] { font-weight: 600; }
.nav-cta .btn { min-height: 30px; padding: 0 14px; font-size: 13px; }
.nav-actions { display: flex; align-items: center; gap: 4px; }
.nav-wa { display: none; width: 32px; height: 32px; border-radius: 50%; background: var(--g); color: #04140a; place-items: center; box-shadow: 0 4px 12px -2px rgba(34,197,94,.5); transition: transform .2s; }
.nav-wa:hover { transform: scale(1.08); }
.nav-wa svg { stroke-width: 2.2; }
.nav-burger { display: none; width: 38px; height: 38px; border: 0; background: none; border-radius: 999px; align-items: center; justify-content: center; cursor: pointer; }
.nav-burger span, .nav-burger span::before, .nav-burger span::after { display: block; width: 18px; height: 1.5px; background: var(--ink); border-radius: 2px; position: relative; transition: transform .3s var(--ease), background .3s; }
.nav-burger span::before, .nav-burger span::after { content: ''; position: absolute; left: 0; }
.nav-burger span::before { top: -5px; } .nav-burger span::after { top: 5px; }
.nav-open .nav-burger span { background: transparent; }
.nav-open .nav-burger span::before { transform: translateY(5px) rotate(45deg); }
.nav-open .nav-burger span::after { transform: translateY(-5px) rotate(-45deg); }
@media (max-width: 800px) {
  .nav-in { padding: 0 4px 0 14px; }
  .nav-wa { display: grid; }
  .nav-burger { display: flex; }
  .nav-links { position: fixed; top: calc(var(--nav-h) + 6px); left: 12px; right: 12px; flex-direction: column; align-items: stretch; gap: 0; padding: 10px 20px 20px; border-radius: 24px; background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.86)); -webkit-backdrop-filter: blur(26px) saturate(1.8); backdrop-filter: blur(26px) saturate(1.8); border: 1px solid rgba(15,21,17,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 20px 48px -12px rgba(15,21,17,.32); opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .25s, transform .3s var(--ease); max-height: calc(100svh - var(--nav-h) - 24px); overflow-y: auto; }
  .nav-open .nav-links { opacity: 1; transform: none; pointer-events: auto; }
  .nav-links a:not(.btn) { font-size: 19px; padding: 13px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
  .nav-links a:not(.btn)::after { display: none; }
  .nav-cta { padding-top: 14px; } .nav-cta .btn { width: 100%; min-height: 44px; font-size: 16px; }
}

/* ── Hero ── */
.hero { position: relative; isolation: isolate; background: var(--bg); padding: calc(var(--nav-h) + clamp(48px, 8vw, 96px)) 0 clamp(24px, 4vw, 48px); text-align: center; overflow: hidden; }
.hero-copy { display: grid; gap: 22px; justify-items: center; }
.hero-copy .lead { max-width: 30em; }
.stage-wrap { position: relative; margin-top: clamp(8px, 2vw, 24px); }
.stage { position: relative; height: clamp(430px, 66svh, 740px); }
.stage .m3d-canvas { width: 100%; height: 100%; display: block; cursor: grab; }
.stage .m3d-canvas:active { cursor: grabbing; }
.stage-hint { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); font-size: 13px; color: var(--soft); pointer-events: none; white-space: nowrap; z-index: 3; }
.hero-models { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 4px; }
.zoom-ctl { position: absolute; right: 4px; top: 8px; display: grid; gap: 8px; z-index: 4; }
.zoom-ctl button { width: 38px; height: 38px; border-radius: 50%; background: #fff; border: 1px solid var(--line-2); font-size: 20px; line-height: 1; color: var(--ink); box-shadow: var(--sh); transition: background .2s, transform .3s var(--ease); }
.zoom-ctl button:hover { background: var(--bg-soft); transform: scale(1.08); }

/* Hotspots */

/* Info-Leiste unter der Bühne */
.info { display: grid; gap: 12px; padding: 22px 4px 0; text-align: center; justify-items: center; min-height: 240px; align-content: start; }
.info-tag { display: inline-flex; align-self: start; width: fit-content; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: rgba(34,197,94,.16); color: var(--g-ink); }
.info h2 { font-size: 1.4rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }
.info p { color: var(--mid); font-size: 16px; max-width: 40em; }
.info-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.info-nav { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; }
.info-nav .count { font-size: 13px; color: var(--soft); }
.chip { padding: 7px 15px; border-radius: 999px; font-size: 14px; font-weight: 500; border: 1px solid var(--line-2); background: transparent; color: var(--mid); transition: background-color .2s, color .2s, border-color .2s; }
.chip:hover { color: var(--ink); border-color: var(--ink); }
.chip.active, .chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.info-img { margin-bottom: 4px; max-width: 420px; }





/* Performance: Footer erst rendern wenn im Sichtbereich */
.footer { content-visibility: auto; contain-intrinsic-size: 1px 450px; }
/* ── Karten ── */
.grid { display: grid; gap: 20px; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 960px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }
.card { border-radius: var(--r); background: var(--card); padding: clamp(26px, 3vw, 40px); display: grid; gap: 12px; align-content: start; }
.card h3, .card h2 { font-size: 1.35rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }
.card p { color: var(--mid); font-size: 16px; line-height: 1.45; }
.ico { width: 44px; height: 44px; color: var(--g-2); margin-bottom: 8px; }
.feature { text-align: center; padding: 0 12px; display: grid; gap: 12px; justify-items: center; }
.feature .ico { width: 52px; height: 52px; margin-bottom: 6px; }
.feature h3 { font-size: 1.5rem; font-weight: 700; letter-spacing: -.035em; }
.feature p { color: var(--mid); font-size: 17px; max-width: 22em; }

/* Produktkarten (Scroller) */
.scroller { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: none; padding: 4px max(24px, calc((100vw - var(--wrap-max)) / 2)) 28px; scroll-padding-inline: max(24px, calc((100vw - var(--wrap-max)) / 2)); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.scroller::-webkit-scrollbar { display: none; }
.scroller .pcard { flex: 0 0 min(340px, 82vw); }
.pcard { display: flex; flex-direction: column; border-radius: var(--r); background: var(--card); overflow: hidden; transition: transform .5s var(--ease); }
.pcard:hover { transform: translateY(-4px); }
.pcard-img { position: relative; aspect-ratio: 1 / 1.05; display: grid; place-items: center; background: radial-gradient(ellipse 60% 50% at 50% 55%, var(--ac, rgba(34,197,94,.12)), transparent 72%); }
.pcard-img img { width: 86%; height: 92%; object-fit: contain; transition: transform .8s var(--ease); }
.pcard:hover .pcard-img img { transform: scale(1.04); }
.pcard-tag { position: absolute; left: 18px; top: 18px; font-size: 12px; font-weight: 600; color: var(--soft); }
.pcard-body { padding: 4px 26px 28px; display: grid; gap: 8px; flex: 1; align-content: start; }
.pcard-cat { font-size: 12px; font-weight: 600; color: var(--soft); }
.pcard h3 { font-size: 1.45rem; font-weight: 700; letter-spacing: -.035em; line-height: 1.1; }
.pcard p { color: var(--mid); font-size: 15px; line-height: 1.4; }
.pcard .price { margin-top: 6px; }
.pcard-foot { display: flex; gap: 18px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.price .now { font-weight: 700; font-size: 1.45rem; letter-spacing: -.03em; }
.price .was { color: var(--soft); text-decoration: line-through; font-size: 14px; }
.price .save { font-size: 12px; font-weight: 600; color: var(--g-2); }
.price-note { font-size: 13px; color: var(--soft); }

.specs { display: grid; border-top: 1px solid var(--line); }
.specs div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; font-size: 14px; border-bottom: 1px solid var(--line); }
.specs dt { color: var(--soft); } .specs dd { font-weight: 500; text-align: right; }

/* ── Ablauf / Orte ── */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.step { padding: 8px 4px; display: grid; gap: 8px; align-content: start; }
.step i { font-style: normal; font-size: 14px; font-weight: 600; color: var(--g-2); }
.step h3 { font-size: 1.35rem; font-weight: 700; letter-spacing: -.03em; }
.step p { color: var(--mid); font-size: 16px; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }
.places { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.place { padding: 10px 20px; border-radius: 999px; background: var(--card); font-size: 15px; font-weight: 500; }

/* ── Pakete ── */
.pkg { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 56px); padding: clamp(24px, 4vw, 48px); border-radius: var(--r); background: var(--card); align-items: center; }
.pkg + .pkg { margin-top: 20px; }
.pkg:nth-child(even) .pkg-imgs { order: 2; }
.pkg-imgs { display: flex; align-items: flex-end; justify-content: center; min-height: 200px; }
.pkg-imgs img { height: clamp(150px, 19vw, 250px); width: auto; object-fit: contain; margin-inline: -14px; }
.pkg-body { display: grid; gap: 12px; justify-items: start; }
.pkg-body h3 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.08; }
.pkg-list { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.pkg-list li { padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; background: var(--bg); }
.pkg .price .now { font-size: 1.9rem; }
@media (max-width: 800px) { .pkg { grid-template-columns: 1fr; } .pkg:nth-child(even) .pkg-imgs { order: 0; } }

/* ── Rechner ── */
.calc { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.calc-card { border-radius: var(--r); background: var(--card); padding: clamp(22px, 3vw, 36px); display: grid; gap: 16px; }
.calc-card h3 { font-size: 1.5rem; font-weight: 700; letter-spacing: -.035em; }
.row { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 10px 14px; border-radius: 18px; border: 1px solid var(--line); transition: border-color .2s, background .2s; }
.row > * { min-width: 0; }
.row.on { border-color: var(--g-2); background: rgba(21,128,61,.06); }
.row img { width: 52px; height: 60px; object-fit: contain; }
.row b { font-weight: 600; font-size: 15px; display: block; letter-spacing: -.01em; }
.row small { color: var(--soft); font-size: 13px; }
.row .p { font-weight: 600; font-size: 14px; text-align: right; min-width: 78px; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: 999px; overflow: hidden; }
.stepper button { width: 36px; height: 36px; background: transparent; border: 0; font-size: 18px; }
.stepper button:hover { background: rgba(127,127,127,.15); }
.stepper output { min-width: 26px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.sum { position: sticky; top: 72px; }
.sum-line { display: flex; justify-content: space-between; gap: 12px; color: var(--mid); font-size: 15px; }
.sum-line b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.sum-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 16px; border-top: 1px solid var(--line-2); }
.sum-total span { color: var(--mid); font-size: 15px; }
.sum-total strong { font-weight: 700; font-size: 2.2rem; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.tip { padding: 14px 16px; border-radius: 16px; background: rgba(21,128,61,.09); font-size: 14px; display: grid; gap: 10px; }
.tip[hidden], [hidden] { display: none !important; }
.sl { display: grid; gap: 8px; }
.sl label { display: flex; justify-content: space-between; font-size: 15px; color: var(--mid); }
.sl label b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--g) var(--v, 50%), rgba(127,127,127,.3) var(--v, 50%)); outline-offset: 8px; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 2px solid var(--g); cursor: pointer; box-shadow: 0 2px 8px rgba(15,21,17,.3); }
input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid var(--g); cursor: pointer; }
.res { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.res div { padding: 16px; border-radius: 18px; background: var(--bg); }
.res dt { font-size: 13px; color: var(--soft); }
.res dd { font-weight: 700; font-size: 1.5rem; letter-spacing: -.035em; margin-top: 2px; }
.res .hi { background: rgba(21,128,61,.1); }
.fine { font-size: 13px; color: var(--soft); line-height: 1.45; }
@media (max-width: 980px) { .calc { grid-template-columns: minmax(0, 1fr); } .sum { position: static; } }
@media (max-width: 560px) { .row { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 4px 12px; } .row img { width: 44px; height: 52px; grid-column: 1; grid-row: 1 / span 2; } .row > div:nth-child(2) { grid-column: 2; grid-row: 1; } .row .p { grid-column: 2; grid-row: 2; text-align: left; } .row .stepper { grid-column: 3; grid-row: 1 / span 2; align-self: center; } }

/* ── Tabelle ── */
.tbl-wrap { overflow-x: auto; border-radius: var(--r); background: var(--card); }
table.tbl { border-collapse: collapse; width: 100%; min-width: 760px; font-size: 15px; }
.tbl th, .tbl td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl th { font-size: 13px; color: var(--soft); font-weight: 500; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td:first-child { font-weight: 600; }
.tbl td.pr { font-weight: 600; color: var(--g-2); }

/* ── FAQ ── */
.faq { display: grid; max-width: 820px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 0; font-weight: 600; font-size: 19px; letter-spacing: -.02em; display: flex; justify-content: space-between; gap: 18px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 26px; font-weight: 300; color: var(--soft); transition: transform .3s var(--ease); flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 24px; color: var(--mid); font-size: 17px; max-width: 40em; }

/* ── CTA ── */
.cta { text-align: center; display: grid; gap: 22px; justify-items: center; }
.cta .lead { max-width: 28em; }

/* ── Kontakt ── */
.contact { display: grid; grid-template-columns: 1.15fr 1fr; gap: 32px; align-items: start; }
.form-card { border-radius: var(--r); background: var(--card); padding: clamp(24px, 3.5vw, 44px); display: grid; gap: 16px; }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fg { display: grid; gap: 6px; }
.fl { font-size: 13px; font-weight: 500; color: var(--mid); }
.fi { width: 100%; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--bg); color: var(--ink); font: inherit; font-size: 16px; transition: border-color .2s, box-shadow .2s; }
.fi:focus { outline: 0; border-color: var(--g); box-shadow: 0 0 0 4px rgba(34,197,94,.2); }
select.fi { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23999' stroke-width='2' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }
textarea.fi { resize: vertical; min-height: 110px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.side { display: grid; gap: 14px; }
.clink { display: flex; align-items: center; gap: 16px; padding: 20px 22px; border-radius: 20px; background: var(--card); transition: transform .3s var(--ease); }
.clink:hover { transform: translateX(4px); }
.clink .ci { width: 28px; height: 28px; color: var(--g-2); flex: none; }
.clink b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.02em; } .clink small { color: var(--soft); font-size: 14px; }
.clink .go { margin-left: auto; color: var(--soft); font-size: 20px; }
.tl { padding: 8px 4px; display: grid; gap: 14px; }
.tl h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; }
.tl ol { list-style: none; display: grid; gap: 12px; counter-reset: t; }
.tl li { display: flex; gap: 14px; align-items: baseline; font-size: 16px; color: var(--mid); counter-increment: t; }
.tl li::before { content: counter(t); font-weight: 600; color: var(--g-2); min-width: 14px; }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } } @media (max-width: 480px) { .frow { grid-template-columns: 1fr; } }

/* ── Seitenkopf ── */
.page-head { position: relative; isolation: isolate; overflow: hidden; background: var(--bg); padding: calc(var(--nav-h) + clamp(56px, 9vw, 110px)) 0 clamp(36px, 6vw, 72px); text-align: center; }
.page-head .wrap { display: grid; gap: 18px; justify-items: center; }
.page-head .lead { max-width: 30em; }

/* ── Footer ── */
.footer { background: #0b100d; color: #f4f6f2; padding: 64px 0 28px; font-size: 13px; border-top: 1px solid rgba(255,255,255,.07); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1.2fr 1.2fr 1fr 1.2fr; gap: 32px; }
.foot-grid .fh { font-size: 12px; font-weight: 600; color: rgba(245,245,247,.9); margin-bottom: 14px; display: block; }
.foot-grid ul { list-style: none; display: grid; gap: 9px; }
.foot-grid a, .foot-grid li { color: rgba(245,245,247,.58); }
.foot-grid a:hover { color: #fff; }
.foot-brand p { color: rgba(245,245,247,.5); margin-top: 12px; max-width: 30ch; line-height: 1.5; }
.foot-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.09); color: rgba(245,245,247,.66); font-size: 12px; }
.foot-bottom a { color: rgba(245,245,247,.78); } .foot-bottom a:hover { color: #fff; }
@media (max-width: 800px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }

/* ── Galerie / Lightbox ── */
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.shot { position: relative; border-radius: 22px; overflow: hidden; background: var(--bg-soft); box-shadow: var(--sh); }
.shot:first-child { grid-column: span 2; grid-row: span 2; }
.shot-btn { display: block; width: 100%; height: 100%; border: 0; padding: 0; background: var(--bg-soft); cursor: zoom-in; }
.shot img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 9; transition: transform .9s var(--ease); }
.shot:first-child img { aspect-ratio: auto; }
.shot:hover img { transform: scale(1.03); }
.shot figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 36px 18px 14px; display: grid; gap: 2px; background: linear-gradient(0deg, rgba(0,0,0,.7), transparent); pointer-events: none; color: #f5f5f7; }
.shot figcaption b { font-weight: 600; font-size: 1rem; letter-spacing: -.01em; }
.shot figcaption span { font-size: 13px; color: rgba(245,245,247,.7); }
@media (max-width: 860px) { .gallery { grid-template-columns: 1fr 1fr; } .shot:first-child { grid-column: span 2; grid-row: auto; } .shot:first-child img { aspect-ratio: 16 / 9; } }
@media (max-width: 520px) { .gallery { grid-template-columns: 1fr; } .shot:first-child { grid-column: auto; } }
dialog.lb { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 94vh; overflow: visible; }
dialog.lb::backdrop { background: rgba(0,0,0,.88); backdrop-filter: blur(6px); }
dialog.lb img { max-width: 96vw; max-height: 88vh; border-radius: 16px; display: block; }
dialog.lb button { position: absolute; right: 8px; top: -46px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255,255,255,.15); color: #fff; font-size: 22px; line-height: 1; }

/* ── Rechtstexte ── */
.legal { max-width: 760px; margin: 0 auto; display: grid; gap: 8px; }
.legal h2 { font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; margin-top: 26px; }
.legal p { color: var(--mid); font-size: 16px; line-height: 1.55; }
.legal a { color: var(--g-2); text-decoration: underline; text-underline-offset: 3px; }
.legal .todo { background: rgba(251,191,36,.35); padding: 1px 6px; border-radius: 6px; font-weight: 600; }

/* ── Reveal ── */
[data-r] { opacity: 0; transform: translateY(28px); transition: opacity 1.4s cubic-bezier(.2,.8,.2,1), transform 1.75s cubic-bezier(.16, 1, .3, 1); transition-delay: var(--d, 0ms); will-change: opacity, transform; }
[data-r].in { opacity: 1; transform: none; }
[data-parallax] { will-change: transform; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } [data-r] { opacity: 1; transform: none; transition: none; } .hs-ring { animation: none; } }
.no-js [data-r] { opacity: 1; transform: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sticky-wa { position: fixed; right: 16px; bottom: 16px; z-index: 55; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: var(--g); color: #04140a; box-shadow: 0 8px 28px -6px rgba(34,197,94,.6); transition: transform .3s var(--ease); }
.sticky-wa:hover { transform: scale(1.08); }
.sticky-wa span { display: none; }
@media (max-width: 800px) { .sticky-wa { display: none !important; } }

a, button, summary, .chip, .show-item { touch-action: manipulation; }
.stage { position: relative; }
.sp-pause { position: absolute; right: 8px; bottom: 8px; z-index: 4; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(255,255,255,.85); color: var(--ink); display: grid; place-items: center; backdrop-filter: blur(8px); cursor: pointer; }
.sp-pause:hover { background: #fff; }
.sp-pause:focus-visible { outline: 2px solid var(--g); outline-offset: 2px; }

/* Tabelle: Modellnamen verlinkt, auf Mobil nur Modell, Preis, Ersparnis */
.tbl a.tl { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line-2); }
.tbl a.tl:hover { border-color: var(--g); }
@media (max-width: 760px) {
  table.tbl { min-width: 0; font-size: 14px; }
  .tbl th, .tbl td { padding: 14px 12px; white-space: normal; }
  .tbl .c-cat, .tbl .c-spec, .tbl .c-stock, .tbl th:nth-child(2), .tbl th:nth-child(3), .tbl th:nth-child(4) { display: none; }
}
/* Info-Liste: was ist enthalten */
.assure { list-style: none; display: grid; gap: 12px; margin-top: 22px; padding: 20px; border-radius: var(--r-sm); background: var(--card); }
.assure li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 14px; line-height: 1.4; color: var(--mid); }
.assure li svg { color: var(--g-2); margin-top: 1px; }
.assure b { display: block; color: var(--ink); font-weight: 600; }

/* Mobil: Tippflächen mindestens 44 px (WCAG 2.5.5/Apple HIG) */
@media (pointer: coarse), (max-width: 760px) {
  .brand { min-height: 44px; display: inline-flex; align-items: center; }
  .chip, .show-item { min-height: 44px; display: inline-flex; align-items: center; }
  .zoom-ctl button, .sp-pause { width: 44px; height: 44px; }
  .hs-btn { position: relative; }
  .hs-btn::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; }
  .foot-grid ul { gap: 0; }
  .foot-grid a { display: inline-flex; align-items: center; min-height: 44px; }
  .nav-links a, .nav-burger { min-height: 44px; }
}

/* Mobil-Hero: Automat schon im ersten Bildschirm sichtbar */
@media (max-width: 760px) {
  .hero { padding-top: calc(var(--nav-h) + 20px); padding-bottom: 8px; }
  .hero-copy { gap: 10px; }
  .hero-copy .kicker { display: none; }
  .hero .h1 { font-size: clamp(2.1rem, 9.5vw, 2.6rem); }
  .hero-copy .lead { font-size: 15px; line-height: 1.35; }
  .hero-copy .btns { gap: 8px; flex-wrap: nowrap; }
  .hero-copy .btn { padding: 0 16px; font-size: 14px; white-space: nowrap; }
  .hero-models { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; margin: 0 -24px; padding: 4px 24px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .hero-models::-webkit-scrollbar { display: none; }
  .hero-models .chip { flex: none; }
  .stage { height: clamp(380px, 56svh, 520px); }
  .info { min-height: 200px; }
}
@media (pointer: coarse), (max-width: 760px) {
  .link { display: inline-flex; align-items: center; min-height: 44px; }
  .nav-burger { min-width: 44px; }
}
/* LCP: Text im ersten Bildschirm sofort sichtbar (nur Verschiebung animiert) */
.hero-copy [data-r], .page-head [data-r] { opacity: 1; }

/* ── Modellübersicht: Filter, Sortierung, Vergleich ── */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cmp-bar { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cmp-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.cmp-sort { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--soft); }
.cmp-sort select { appearance: none; background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.500 11 1.500' fill='none' stroke='%23999' stroke-width='1.800' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center; color: var(--ink); border: 1px solid var(--line-2); border-radius: 999px; padding: 0 38px 0 18px; min-height: 44px; font: inherit; font-size: 14px; cursor: pointer; }
.cmp-sort select:focus-visible { outline: 2px solid var(--g); outline-offset: 2px; }
.cmp-count { color: var(--soft); font-size: 14px; margin: 6px 0 22px; }
.cmp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cmp-card { position: relative; display: flex; flex-direction: column; border-radius: var(--r); background: var(--card); overflow: hidden; border: 1px solid transparent; transition: transform .5s var(--ease), border-color .3s, box-shadow .5s var(--ease); }
.cmp-card:hover { transform: translateY(-5px); box-shadow: 0 28px 60px -28px rgba(15,21,17,.4); }
.cmp-card.picked { border-color: var(--g); }
.cmp-card[hidden] { display: none; }
.cmp-in { animation: cmpIn .55s var(--ease) both; }
@keyframes cmpIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.cmp-img { position: relative; display: grid; place-items: center; aspect-ratio: 1 / .92; background: radial-gradient(ellipse 62% 52% at 50% 56%, var(--ac, rgba(34,197,94,.14)), transparent 74%); }
.cmp-img img { width: 82%; height: 90%; object-fit: contain; transition: transform .9s var(--ease); }
.cmp-card:hover .cmp-img img { transform: scale(1.05) translateY(-2px); }
.cmp-body { padding: 4px 24px 24px; display: grid; gap: 10px; flex: 1; align-content: start; }
.cmp-body h3 { font-size: 1.35rem; font-weight: 700; letter-spacing: -.035em; line-height: 1.12; }
.cmp-body h3 a { color: inherit; text-decoration: none; }
.cmp-specs { list-style: none; display: grid; gap: 0; margin-top: 2px; }
.cmp-specs li { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; }
.cmp-specs li span { color: var(--soft); }
.cmp-specs li b { font-weight: 600; text-align: right; }
.cmp-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 6px; }
.cmp-foot .price .now { font-size: 1.55rem; }
.cmp-foot .price-note { font-size: 13px; }
.cmp-pick { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--mid); cursor: pointer; min-height: 44px; }
.cmp-pick input { width: 20px; height: 20px; accent-color: var(--g); cursor: pointer; }
.cmp-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cmp-dock { position: sticky; bottom: 16px; z-index: 40; display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: center; margin: 22px auto 0; width: fit-content; max-width: 100%; padding: 12px 18px; border-radius: 999px; background: rgba(255,255,255,.94); border: 1px solid var(--line-2); box-shadow: var(--sh); backdrop-filter: blur(14px); font-size: 14px; color: var(--ink); }
.cmp-dock[hidden], .cmp-panel[hidden] { display: none; }
.cmp-panel { margin-top: 28px; scroll-margin-top: 80px; }
.cmp-panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.cmp-panel-head h3 { font-size: 1.4rem; letter-spacing: -.03em; }
.cmp-tbl { min-width: 560px; }
.cmp-tbl th[scope="row"] { color: var(--soft); font-weight: 500; font-size: 13px; position: sticky; left: 0; background: var(--card); }
.cmp-tbl thead th { font-size: 15px; color: var(--ink); font-weight: 700; white-space: normal; }
.cmp-tbl tr.pr td { color: var(--g-2); font-weight: 700; }
.cmp-tbl td { white-space: normal; }
@media (max-width: 960px) { .cmp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .cmp-grid { grid-template-columns: 1fr; }
  .cmp-bar { align-items: stretch; }
  .cmp-filters { flex-wrap: nowrap; overflow-x: auto; margin: 0 -24px; padding: 2px 24px; scrollbar-width: none; }
  .cmp-filters::-webkit-scrollbar { display: none; }
  .cmp-filters .chip { flex: none; }
  .cmp-dock { border-radius: 24px; bottom: 76px; }
}
@media (prefers-reduced-motion: reduce) { .cmp-in { animation: none; } .cmp-card, .cmp-img img { transition: none; } }

/* ── Politur: Karten, Hover, Fortschritt, Tabellen ── */
.feature { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(26px, 3vw, 40px) clamp(18px, 2vw, 28px); transition: transform .5s var(--ease), border-color .3s, box-shadow .5s var(--ease); }
.feature:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: 0 26px 60px -30px rgba(15,21,17,.35); }
.feature .ico { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: rgba(21,128,61,.1); margin-bottom: 8px; }
.card { border: 1px solid var(--line); transition: transform .5s var(--ease), border-color .3s, box-shadow .5s var(--ease); }
.card:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: 0 24px 56px -30px rgba(15,21,17,.35); }
.card .ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: rgba(21,128,61,.1); }
.step { padding: 22px 20px; border-radius: var(--r-sm); background: var(--card); border: 1px solid var(--line); transition: transform .5s var(--ease); }
.step:hover { transform: translateY(-3px); }
.step i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(34,197,94,.14); }
.tbl tbody tr { transition: background-color .2s; }
.tbl tbody tr:hover { background: rgba(127,127,127,.08); }
.tbl thead th { position: sticky; top: 0; background: var(--card); z-index: 1; }
.btn-primary { box-shadow: 0 8px 24px -10px rgba(34,197,94,.55); transition: transform .3s var(--ease), background-color .2s, box-shadow .3s; }
.btn-primary:hover { box-shadow: 0 14px 34px -10px rgba(34,197,94,.7); }
.place { transition: transform .3s var(--ease), background-color .2s; }
a.place:hover { transform: translateY(-2px); background: var(--card-2); }
.faq details { transition: background-color .25s; }
.faq details[open] { background: rgba(127,127,127,.05); }
.progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 80; background: linear-gradient(90deg, var(--g), var(--g-2)); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }
.nav.is-scrolled { background: rgba(250,250,247,.94); box-shadow: 0 12px 40px -28px rgba(15,21,17,.45); }
@media (prefers-reduced-motion: reduce) { .progress { display: none; } .feature, .card, .step { transition: none; } }
.feature > svg { box-sizing: border-box; width: 64px; height: 64px; padding: 15px; border-radius: 20px; background: rgba(21,128,61,.1); color: var(--g-2); margin-bottom: 8px; }
.sec-head[data-r], .sec-head [data-r] { opacity: 1; }

/* ═══ 2026 Hell-Redesign: Bühne, Übergänge, lebendige Karten ═══ */
.hero-bg, .page-head::before { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-bg i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; will-change: transform; }
.hero-bg i:nth-child(1) { width: 46vw; height: 46vw; max-width: 640px; max-height: 640px; left: -10%; top: 6%; background: radial-gradient(circle, rgba(34,197,94,.30), transparent 70%); }
.hero-bg i:nth-child(2) { width: 38vw; height: 38vw; max-width: 520px; max-height: 520px; right: -8%; top: 30%; background: radial-gradient(circle, rgba(250,204,21,.22), transparent 70%); }
.hero-bg::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(15,21,17,.09) 1px, transparent 1.2px); background-size: 26px 26px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); }
.page-head::before { content: ''; background: radial-gradient(60% 90% at 50% 0, rgba(34,197,94,.16), transparent 70%), radial-gradient(rgba(15,21,17,.08) 1px, transparent 1.2px) 0 0 / 26px 26px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 90%); mask-image: linear-gradient(180deg, #000, transparent 90%); }
.hero .h1 em, .h1 em, .h2 em { font-style: normal; background: linear-gradient(100deg, #0b6b33, #22c55e 55%, #a3e635); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Bühne: Licht-Ellipse + Boden unter dem Automaten (Renders sind transparent) */
.stage::before { content: ''; position: absolute; left: 50%; bottom: 7%; width: min(78%, 640px); height: 11%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(15,21,17,.26), transparent); filter: blur(10px); pointer-events: none; }
.stage::after { content: ''; position: absolute; inset: 4% 6% 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,255,255,0)); z-index: 0; pointer-events: none; }
.stage .m3d-canvas { position: relative; z-index: 1; }

/* Dunkle Akzentflächen mit weichem, gerundetem Übergang */
.sec.dark { border-radius: clamp(28px, 5vw, 56px) clamp(28px, 5vw, 56px) 0 0; margin-top: calc(clamp(28px, 5vw, 56px) * -1); z-index: 1; overflow: hidden; }
.sec.dark::before { content: ''; position: absolute; inset: 0; background: radial-gradient(50% 60% at 85% 0, rgba(34,197,94,.18), transparent 70%); pointer-events: none; }
.sec.dark > * { position: relative; }
.sec.dark .feature { background: var(--card); }
.sec.dark .btn-primary { box-shadow: 0 10px 30px -10px rgba(34,197,94,.6); }
.sec.dark + .footer { border-top: 0; }
.sec.tight { padding-block: clamp(64px, 8vw, 112px); }

/* Karten: Bühnenlicht, Schatten, Tilt (via JS-Variablen) */
.pcard, .cmp-card { box-shadow: var(--sh); border: 1px solid var(--line); will-change: transform; }
.pcard-img, .cmp-img { background: radial-gradient(ellipse 58% 48% at 50% 56%, var(--ac, rgba(34,197,94,.14)), transparent 74%), linear-gradient(180deg, #fff, var(--bg-soft)); }
.pcard-img::after, .cmp-img::after { content: ''; position: absolute; left: 50%; bottom: 9%; width: 56%; height: 6%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(15,21,17,.25), transparent); filter: blur(6px); transition: width .7s var(--ease), opacity .7s; pointer-events: none; }
.pcard:hover .pcard-img::after, .cmp-card:hover .cmp-img::after { width: 44%; opacity: .6; }
.pcard-img img, .cmp-img img { position: relative; z-index: 1; transition: transform .9s var(--ease); }
.pcard, .cmp-card, .feature, .card, .step { transform: translateY(0) perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.pcard:hover, .cmp-card:hover { transform: translateY(-4px) perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); box-shadow: 0 26px 52px -26px rgba(15,21,17,.38); }
.pcard:hover .pcard-img img, .cmp-card:hover .cmp-img img { transform: scale(1.015) translateY(-2px); }
.scroller .pcard { transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.sec.light .pcard { background: #fff; }

/* Mikro-Interaktionen */
.btn { position: relative; overflow: hidden; }
.btn-primary::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); transform: translateX(-120%); transition: transform .8s var(--ease); }
.btn-primary:hover::after { transform: translateX(120%); }
.btn:active { transform: scale(.97); }
.chip { background: #fff; }
.chip.active, .chip[aria-pressed="true"] { background: var(--ink); color: #fff; }
.brand-mark { box-shadow: 0 6px 16px -6px rgba(34,197,94,.7); transition: transform .5s var(--ease); }
.brand:hover .brand-mark { transform: rotate(-8deg) scale(1.08); }
.sticky-wa { animation: waPulse 3.2s ease-out 2s infinite; }
@keyframes waPulse { 0% { box-shadow: 0 8px 28px -6px rgba(34,197,94,.6), 0 0 0 0 rgba(34,197,94,.4); } 70%, 100% { box-shadow: 0 8px 28px -6px rgba(34,197,94,.6), 0 0 0 16px rgba(34,197,94,0); } }
.fi { background: #fff; }
.form-card, .calc-card, .tbl-wrap, .pkg { box-shadow: var(--sh); border: 1px solid var(--line); }
.tbl-wrap { background: #fff; }
.row { background: #fff; }
.res div { background: var(--bg-soft); }
.pkg-list li { background: var(--bg-soft); }
.place { background: #fff; border: 1px solid var(--line); }
.clink { border: 1px solid var(--line); box-shadow: var(--sh); }
.assure { border: 1px solid var(--line); }
.step { box-shadow: var(--sh); }
.step i { color: var(--g-ink); }
.tbl td.pr { color: var(--g-ink); }
.cmp-tbl tr.pr td { color: var(--g-ink); }
.legal a { color: var(--g-ink); }
.price .save { color: var(--g-ink); }

/* Lauftext-Band (nur echte Fakten aus dem Katalog) */
.ticker { overflow: hidden; border-block: 1px solid var(--line); background: #fff; }
.ticker-track { display: flex; gap: 48px; width: max-content; padding: 16px 0; animation: tick 80s linear infinite; }
.ticker span { font-size: 14px; font-weight: 600; color: var(--mid); white-space: nowrap; display: inline-flex; align-items: center; gap: 48px; }
.ticker span::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--g); }
@keyframes tick { to { transform: translateX(-50%); } }

/* Scroll-Szenen: geschmeidiges Hereinsliden beim Runterscrollen */
[data-r] { transition-property: opacity, transform; }
[data-r="left"] { transform: translateX(clamp(-110px, -9vw, -60px)); }
[data-r="right"] { transform: translateX(clamp(60px, 9vw, 110px)); }
[data-r="zoom"] { transform: scale(.92); }
[data-r].in { transform: none; }

/* Szenen-Bilder (Illustrationen) sliden mit sanftem Schwung herein */
.bt-scene img, .ct-scene img, .sum-scene img, .roi-pic img {
  transition: opacity 1.3s var(--ease), transform 1.85s cubic-bezier(.16, 1, .3, 1);
}
[data-r="left"] .bt-scene img, [data-r="left"] .ct-scene img, [data-r="left"] .sum-scene img, [data-r="left"] .roi-pic img {
  transform: translateX(-30px) rotate(-4deg);
}
[data-r="right"] .bt-scene img, [data-r="right"] .ct-scene img, [data-r="right"] .sum-scene img, [data-r="right"] .roi-pic img {
  transform: translateX(30px) rotate(4deg);
}
[data-r].in .bt-scene img, [data-r].in .ct-scene img, [data-r].in .sum-scene img, [data-r].in .roi-pic img {
  transform: none;
}
.hero-copy .h1 { background: none; }
@media (prefers-reduced-motion: reduce) {
  .ticker-track, .sticky-wa { animation: none; }
  .btn-primary::after { display: none; }
  .pcard, .cmp-card, .feature, .card, .step { transform: none !important; }
}
@media (max-width: 760px) {
  .hero-bg i { filter: blur(50px); }
  .stage::after { inset: 8% 0 10%; }
  .sec.dark { border-radius: 28px 28px 0 0; margin-top: -28px; }
}

/* Hero kompakter: Automat im ersten Desktop-Bildschirm */
@media (min-width: 761px) {
  .hero { padding-top: calc(var(--nav-h) + clamp(28px, 4vw, 48px)); }
  .hero-copy { gap: 14px; }
  .hero .h1 { font-size: clamp(2.5rem, 5vw, 4.2rem); }
  .hero-copy .lead { font-size: clamp(1rem, 1.4vw, 1.2rem); }
  .hero-copy .kicker { display: none; }
  .stage { height: clamp(420px, 60svh, 700px); }
}
.hero .stage-wrap[data-r] { opacity: 1; }
@media (pointer: coarse), (max-width: 760px) {
  .foot-bottom a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 4px; }
  .skip { min-height: 44px; display: inline-flex; align-items: center; }
}
@media (pointer: coarse), (max-width: 760px) {
  .btn-sm { min-height: 44px; }
  .stepper button { width: 44px; height: 44px; }
  .foot-bottom a { min-width: 44px; justify-content: center; }
  .cmp-body h3 a { display: inline-flex; align-items: center; min-height: 44px; }
  .form-card a, .clink, .legal a, .tl a { display: inline-flex; align-items: center; min-height: 44px; }
  .clink { display: flex; }
}
@media (pointer: coarse), (max-width: 760px) {
  input[type=range] { box-sizing: content-box; padding: 20px 0; background-clip: content-box; margin: 0; }
  .tbl a.tl { display: inline-block; padding-block: 11px; }
}

/* Mobil: kompaktere Abstände (Seitenkopf und Abschnitte) */
@media (max-width: 760px) {
  .page-head { padding: calc(var(--nav-h) + 20px) 0 28px; }
  .page-head .wrap { gap: 12px; }
  .sec { padding-block: 60px; }
  .sec.tight { padding-block: 52px; }
  .sec-head { margin-bottom: 32px; gap: 12px; }
}
@media (max-width: 760px) { .page-head + .sec { padding-top: 32px !important; } }
@media (max-width: 760px) {
  .pkg-imgs { max-width: 100%; min-height: 0; }
  .pkg-imgs img { flex: 0 1 auto; min-width: 0; max-width: 34%; height: auto; max-height: 190px; margin-inline: -6px; }
}

/* Dunkler Bereich ragt mit gerundeten Ecken auch unten in den hellen Abschnitt hinein */
.sec.dark.round-b { --rb: clamp(28px, 5vw, 56px); border-radius: var(--rb); margin-bottom: calc(var(--rb) * -1); }
.sec.after-dark { padding-top: calc(clamp(88px, 12vw, 168px) + clamp(28px, 5vw, 56px)); }
@media (max-width: 760px) { .sec.dark.round-b { --rb: 28px; } .sec.after-dark { padding-top: calc(60px + 28px); } }

/* Mobil: Info-Feld unter dem Automaten aufgeräumt (kurzer Text, Details als eine Wischzeile) */
@media (max-width: 760px) {
  .info { gap: 8px; padding-top: 14px; min-height: 0; }
  .info h2 { font-size: 1.25rem; }
  .info p { font-size: 15px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .info .info-hint { display: none; }
  .info-chips { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; width: calc(100% + 48px); margin-inline: -24px; padding: 2px 24px 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 32px), transparent); }
  .info-chips::-webkit-scrollbar { display: none; }
  .info-chips .chip { flex: none; scroll-snap-align: start; white-space: nowrap; font-size: 14px; padding: 0 14px; }
  .show-side .info-chips { width: auto; margin-inline: 0; }
  .stage-hint { position: static; transform: none; text-align: center; padding-top: 4px; }
}

/* Mobil-Hero schlanker: kompaktere Buttons, Chips und Abstände (Tippflächen bleiben 44 px) */
@media (max-width: 760px) {
  .hero { padding-top: calc(var(--nav-h) + 14px); }
  .hero-copy { gap: 8px; }
  .hero .h1 { font-size: clamp(1.9rem, 8.4vw, 2.3rem); }
  .hero-copy .lead { font-size: 14px; line-height: 1.35; }
  .hero-copy .btns { gap: 8px; margin-top: 2px; }
  .hero-copy .btn { min-height: 44px; padding: 0 16px; font-size: 14px; }
  .stage-wrap { margin-top: 2px; }
  .hero-models { gap: 6px; padding-block: 0; margin-bottom: 0; }
  .hero-models .chip { padding: 0 14px; font-size: 14px; }
  .stage { height: clamp(340px, 50svh, 470px); }
  .stage-hint { font-size: 12px; padding-top: 0; }
}

/* Mobil-Hero: flachere Buttons/Chips mit mehr Luft; Tippfläche bleibt 44 px durch unsichtbaren Rand */
@media (max-width: 760px) {
  .hero-copy .btn, .hero-models .chip { min-height: 38px; height: 38px; padding: 0 16px; font-size: 14px; font-weight: 500; letter-spacing: 0; overflow: visible; position: relative; }
  .hero-copy .btn::before, .hero-models .chip::before { content: ''; position: absolute; inset: -3px -2px; }
  .hero-copy .btn-primary::after { display: none; }
  .hero-copy .btns { gap: 10px; margin-top: 6px; margin-bottom: 8px; }
  .hero-models { gap: 10px; padding: 6px 24px 8px; }
  .hero-models .chip { box-shadow: 0 1px 2px rgba(15,21,17,.06); }
  .hero-models .chip.active { box-shadow: 0 6px 14px -6px rgba(15,21,17,.5); }
}

/* Desktop: kompakterer Seitenkopf (weniger Leerraum oberhalb der Überschrift) */
@media (min-width: 761px) {
  .page-head { padding: calc(var(--nav-h) + clamp(28px, 3.4vw, 48px)) 0 clamp(24px, 3vw, 40px); }
  .page-head .wrap { gap: 14px; }
  .page-head + .sec { padding-top: clamp(32px, 4vw, 56px) !important; }
}

/* ── App-Gefühl & Mobil-Fixes (2026-10-31) ── */
html { overflow-x: hidden; overscroll-behavior-x: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body { max-width: 100%; overscroll-behavior-x: none; }
.hero, .stage-wrap, .show { overflow-x: clip; }
/* Horizontales Ziehen gehört dem Automaten (Drehen), vertikales dem Seiten-Scroll */
.stage { touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.hero-models, .cmp-filters, .scroller { overscroll-behavior-x: contain; }
img { -webkit-user-drag: none; }
/* Installierte App (PWA): Safe-Areas für Notch und Home-Indikator */
.sticky-wa { bottom: max(18px, calc(env(safe-area-inset-bottom) + 10px)); }
footer, .foot { padding-bottom: env(safe-area-inset-bottom); }
@media (display-mode: standalone) { body { -webkit-user-select: none; user-select: none; } input, textarea, select { -webkit-user-select: text; user-select: text; } }

/* Desktop: mehr Breite statt leerer Ränder */
@media (min-width: 1280px) { :root { --wrap-max: 1320px; } }
@media (min-width: 1536px) { :root { --wrap-max: 1480px; --wrap: min(var(--wrap-max), 100% - 96px); } }
@media (min-width: 1920px) { :root { --wrap-max: 1680px; } }
@media (min-width: 1280px) {
  .stage { height: clamp(560px, 74svh, 860px); }
  
  .sec-head { max-width: 920px; }
  .grid-3 { gap: 28px; }
  .faq { max-width: 960px; }
  .legal { max-width: 860px; }
}

/* ── Startseite: Sortiment als Hero (Karten sofort sichtbar, seitlich wischen) ── */
.hero-cards { text-align: left; padding: calc(var(--nav-h) + clamp(16px, 2.4vw, 32px)) 0 clamp(8px, 1.6vw, 20px); }
.hero-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: clamp(12px, 1.6vw, 22px); }
.hero-title { display: grid; gap: 8px; }
.hero-cards .h1 { font-size: clamp(2.1rem, 4.6vw, 3.8rem); line-height: 1.02; }
.hero-cards .lead { font-size: clamp(.98rem, 1.3vw, 1.2rem); max-width: 30em; }
.hero-arrows { display: none; gap: 10px; flex: none; }
.hero-arrows button { width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 1px solid var(--line-2); font-size: 20px; line-height: 1; box-shadow: var(--sh); transition: transform .3s var(--ease), background .2s; }
.hero-arrows button:hover { background: var(--g); border-color: var(--g); transform: scale(1.06); }
.hero-cards .scroller { padding-bottom: 16px; }
.hero-cards .scroller .pcard { flex-basis: min(360px, 82vw); }
.hero-cta { justify-content: center; margin-top: clamp(4px, 1vw, 12px); }
@media (min-width: 900px) { .hero-arrows { display: flex; } .hero-cards .scroller .pcard { flex-basis: min(380px, 26vw); } }
@media (max-width: 760px) {
  .hero-cards { padding-top: calc(var(--nav-h) + 14px); padding-bottom: 6px; }
  .hero-head { margin-bottom: 10px; }
  .hero-cards .h1 { font-size: clamp(1.9rem, 8.6vw, 2.4rem); }
  .hero-cards .lead { font-size: 14.5px; line-height: 1.35; }
  .hero-cards .pcard-img { aspect-ratio: 1 / .92; }
  .hero-cards .pcard-body { padding: 2px 20px 20px; gap: 6px; }
  .hero-cards .pcard p { display: none; }
  .hero-cta { display: flex; flex-wrap: nowrap; gap: 8px; margin-top: 2px; }
  .hero-cta .btn { padding: 0 14px; font-size: 14px; white-space: nowrap; }
}

/* Hero Startseite: zentrierter Kopf wie im Sortiment-Abschnitt, kompakter */
.hero-cards { text-align: center; }
.hero-head { position: relative; flex-direction: column; align-items: center; justify-content: center; gap: 0; }
.hero-title { justify-items: center; gap: 10px; }
.hero-cards .h1 { font-size: clamp(1.9rem, 3.4vw, 3rem); }
.hero-cards .lead { margin-inline: auto; max-width: 34em; }
.hero-arrows { position: absolute; right: 0; bottom: 0; }
@media (max-width: 760px) { .hero-title { gap: 6px; } .hero-cards .h1 { font-size: clamp(1.8rem, 8vw, 2.2rem); } }
.hero-cards .pcard { text-align: left; }

.info-lead { font-size: 15px; line-height: 1.45; color: var(--mid); }
.info-hint { font-size: 13px !important; font-weight: 600; color: var(--soft) !important; margin-top: 2px; }

.specs-more { border-bottom: 1px solid var(--line); }
.specs-more summary { cursor: pointer; padding: 11px 0; font-size: 14px; font-weight: 600; color: var(--g-ink); list-style: none; }
.specs-more summary::-webkit-details-marker { display: none; }
.specs-more summary::after { content: ' +'; }
.specs-more[open] summary::after { content: ' –'; }
.specs-more .specs { border-top: 0; }

.specs dt { flex: none; } .specs dd { flex: 1; min-width: 0; }

/* Seitenköpfe: kompakter und dezenter, wie der Hero der Startseite */
.page-head { padding: calc(var(--nav-h) + clamp(16px, 2.4vw, 32px)) 0 clamp(14px, 2vw, 24px); }
.page-head .wrap { gap: 10px; }
.page-head .h1 { font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.04; }
.page-head .lead { font-size: clamp(.98rem, 1.3vw, 1.2rem); max-width: 34em; }
@media (max-width: 760px) { .page-head { padding: calc(var(--nav-h) + 14px) 0 10px; } .page-head .wrap { gap: 6px; } .page-head .h1 { font-size: clamp(1.8rem, 8vw, 2.2rem); } .page-head .lead { font-size: 14.5px; line-height: 1.35; } }

/* Preise/Rechner mobil: kompaktere Zeilen, feste Summenleiste */
.calc-bar { display: none; }
@media (max-width: 980px) {
  .calc-bar { position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 58; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px; border-radius: 999px; background: var(--ink); color: #fff; box-shadow: 0 14px 40px -12px rgba(0,0,0,.5); transform: translateY(160%); transition: transform .45s var(--ease); }
  .calc-bar.has:not(.hide) { transform: none; }
  .calc-bar span { display: grid; line-height: 1.15; } .calc-bar small { font-size: 12px; opacity: .7; } .calc-bar b { font-size: 1.15rem; letter-spacing: -.02em; }
  .calc-bar em { font-style: normal; font-weight: 600; font-size: 14px; color: #04140a; background: var(--g); padding: 9px 16px; border-radius: 999px; }
  body.calc-on .sticky-wa { bottom: 84px; }
}
@media (max-width: 560px) {
  .calc-card { padding: 18px 14px; gap: 12px; }
  .row { padding: 8px 10px; }
  .row b { font-size: 14px; line-height: 1.2; }
  .row small { display: none; }
  .row .p { font-size: 13px; }
  .stepper button { width: 32px; height: 32px; }
  .stepper output { min-width: 22px; }
}
.page-head { padding-bottom: clamp(20px, 2.6vw, 30px); }
@media (max-width: 760px) { .page-head { padding-bottom: 22px; } }

/* Seitenköpfe: gleiche Kicker-Optik wie die Eyebrows */
.page-head .kicker { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
/* Kontakt mobil: Schnellkontakt (WhatsApp/Anruf/E-Mail) vor dem Formular */
@media (max-width: 900px) {
  .contact .side { display: contents; }
  .contact .side .clink { order: -1; }
  .contact .form-card { order: 0; }
  .contact .side .tl { order: 1; }
  .contact { gap: 12px; }
}

/* Gesamte Seite kompakter: kleinere Abschnittstitel und weniger Leerraum */
.h2 { font-size: clamp(1.75rem, 3.4vw, 2.8rem); }
.sec-head { margin-bottom: clamp(28px, 4vw, 52px); gap: 12px; }
.sec-head .lead { font-size: clamp(.98rem, 1.3vw, 1.2rem); }
@media (max-width: 760px) { .h2 { font-size: clamp(1.65rem, 7.2vw, 2.1rem); } .sec { padding-block: 44px; } .sec.tight { padding-block: 40px; } .sec-head { margin-bottom: 24px; gap: 8px; } }
@media (min-width: 761px) { .sec { padding-block: clamp(56px, 6vw, 96px); } }

/* Mobil: Vorteils-Karten kompakt (Icon links, Text rechts) */
@media (max-width: 760px) {
  .feature { grid-template-columns: 48px 1fr; text-align: left; justify-items: start; align-items: start; column-gap: 14px; row-gap: 2px; padding: 16px 16px 18px; }
  .feature > svg { grid-row: 1 / span 2; width: 48px; height: 48px; padding: 11px; border-radius: 15px; margin: 0; }
  .feature h3 { font-size: 1.15rem; align-self: end; }
  .feature p { font-size: 15px; line-height: 1.4; max-width: none; grid-column: 2; }
  .feature [data-count] { grid-column: 1 / -1; }
}

/* ── Seitenübergänge (View Transitions, nur wo unterstützt) ── */
@view-transition { navigation: auto; }
.nav { view-transition-name: none; }
.sticky-wa { view-transition-name: vp-wa; }
::view-transition-old(root) { animation: vtOut .22s ease both; }
::view-transition-new(root) { animation: vtIn .38s var(--ease) both; }
@keyframes vtOut { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* ── Liquid-Glass-Navigation (Desktop: schwebende Kapsel) ── */
@media (min-width: 900px) {
  .nav { background: transparent; border-bottom: 0; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; pointer-events: none; }
  .nav-in { pointer-events: auto; height: 44px; margin-top: 6px; padding: 0 8px 0 16px; border-radius: 999px; width: min(calc(var(--wrap-max) - 80px), 100% - 32px);
    background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.52)); backdrop-filter: blur(22px) saturate(1.9); -webkit-backdrop-filter: blur(22px) saturate(1.9);
    box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 0 0 1px rgba(15,21,17,.07), 0 12px 36px -14px rgba(15,21,17,.28); }
  .nav-links { gap: 26px; }
}
@media (prefers-contrast: more) { .nav-in { background: #fff !important; } }

/* ── Bestandsanzeige an den Karten ── */
.pcard-stock { position: absolute; left: 18px; bottom: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--g-ink); background: rgba(255,255,255,.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 0 0 1px rgba(15,21,17,.07); }
.pcard-stock i { width: 7px; height: 7px; border-radius: 50%; background: var(--g); box-shadow: 0 0 0 0 rgba(34,197,94,.5); animation: stockPulse 2.6s ease-out infinite; }
@keyframes stockPulse { 70% { box-shadow: 0 0 0 7px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
@media (prefers-reduced-motion: reduce) { .pcard-stock i { animation: none; } }
.pcard-img.spin::before { content: 'Maus bewegen zum Drehen'; position: absolute; right: 14px; top: 14px; z-index: 2; font-size: 11px; font-weight: 600; color: var(--soft); background: rgba(255,255,255,.82); padding: 4px 10px; border-radius: 999px; opacity: 0; transition: opacity .3s; pointer-events: none; }
.pcard-img.spin:hover::before { opacity: 1; }

/* ── Vertrauen: Bento ── */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.bt { position: relative; display: grid; align-content: start; gap: 8px; padding: 22px 22px 24px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh); overflow: hidden; }
.bt::after { content: ''; position: absolute; inset: auto -30% -60% auto; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(34,197,94,.14), transparent); pointer-events: none; }
.bt-big { grid-column: span 2; grid-row: span 2; padding: 30px; align-content: end; background: linear-gradient(160deg, #0f1511, #123a22); color: #f4f6f2; border-color: transparent; }
.bt-big p { color: rgba(244,246,242,.78); max-width: 30em; } .bt-big .link { color: #4ade80; }
.bt-big h3 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.08; max-width: 14em; }
.bt-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: rgba(21,128,61,.1); color: var(--g-2); }
.bt-big .bt-ico { background: rgba(74,222,128,.16); color: #4ade80; margin-bottom: auto; }
.bt h3 { font-size: 1.1rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.bt p { font-size: 14.5px; line-height: 1.45; color: var(--mid); }
.bt p a { font-weight: 600; color: var(--ink); }
@media (max-width: 900px) { .bento { grid-template-columns: 1fr 1fr; } .bt-big { grid-column: 1 / -1; grid-row: auto; } }
@media (max-width: 560px) { .bento { grid-template-columns: 1fr; gap: 10px; } .bt { grid-template-columns: 46px 1fr; column-gap: 14px; row-gap: 2px; padding: 16px; } .bt .bt-ico { grid-row: 1 / span 2; } .bt h3 { align-self: end; } .bt p { grid-column: 2; } .bt-big { grid-template-columns: 1fr; padding: 22px; } .bt-big .bt-ico { margin-bottom: 8px; grid-row: auto; } .bt-big p { grid-column: auto; } }

/* ── CTA-Karte über dem Footer ── */
.cta-band { position: relative; z-index: 2; margin-top: clamp(36px, 5vw, 72px); margin-bottom: clamp(-150px, -12vw, -100px); background: transparent; }
.cta-card { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 12px; padding: clamp(28px, 4.4vw, 60px) clamp(24px, 4.4vw, 64px); border-radius: clamp(24px, 3vw, 40px); color: #f4fff7;
  background: radial-gradient(60% 90% at 88% 10%, rgba(255,255,255,.18), transparent 60%), linear-gradient(135deg, #16a34a 0%, #0f7a37 55%, #0b5a29 100%); box-shadow: 0 40px 90px -40px rgba(11,90,41,.7); }
.cta-card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.4px) 0 0 / 22px 22px; -webkit-mask-image: linear-gradient(100deg, transparent 30%, #000); mask-image: linear-gradient(100deg, transparent 30%, #000); }
.cta-copy { display: grid; gap: 14px; justify-items: start; text-align: left; }
.cta-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(244,255,247,.8); }
.cta-title { font-size: clamp(1.9rem, 4vw, 3.4rem); line-height: 1.02; letter-spacing: -.045em; font-weight: 800; text-wrap: balance; }
.cta-text { font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.45; color: rgba(244,255,247,.86); max-width: 34em; }
.cta-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.cta-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; font-weight: 600; font-size: 15px; transition: transform .3s var(--ease), background .2s; white-space: nowrap; }
.cta-btn:hover { transform: translateY(-2px); }
.cta-call { background: #0b100d; color: #fff; }
.cta-main { background: #fff; color: #0b5a29; }
.cta-wa { background: rgba(255,255,255,.14); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.cta-wa:hover { background: rgba(255,255,255,.24); }
.cta-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: rgba(244,255,247,.8); margin-top: 6px; }
.cta-facts li::before { content: '✓'; margin-right: 7px; font-weight: 700; color: #bbf7d0; }
.cta-fleet { position: relative; display: flex; align-items: flex-end; justify-content: center; min-height: 260px; }
.cta-fleet img { width: clamp(120px, 17vw, 230px); height: auto; filter: drop-shadow(0 26px 30px rgba(0,0,0,.35)); }
.cta-fleet img:nth-child(1) { transform: translateX(14%) scale(.86); z-index: 1; }
.cta-fleet img:nth-child(2) { z-index: 3; margin-inline: -9%; transform: scale(1.12); }
.cta-fleet img:nth-child(3) { transform: translateX(-14%) scale(.86); z-index: 1; }
.cta-band + .footer { padding-top: clamp(196px, 16vw, 236px); }
@media (max-width: 860px) {
  .cta-card { grid-template-columns: 1fr; padding: 26px 20px 0; gap: 0; }
  .cta-copy { padding-bottom: 6px; }
  .cta-btns { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .cta-main { grid-column: 1 / -1; order: -1; }
  .cta-btn { min-height: 46px; padding: 0 14px; }
  .cta-fleet { min-height: 0; margin-top: 4px; }
  .cta-fleet img { width: 36%; }
}
@media (prefers-reduced-motion: no-preference) { .cta-fleet img:nth-child(2) { animation: ctaFloat 6s ease-in-out infinite; } @keyframes ctaFloat { 50% { translate: 0 -8px; } } }

/* Hero Startseite: Karten komplett im ersten Bildschirm (Bild, Name, Preis, Links), keine Beschreibung */
.hero-cards .pcard p { display: none; }
.hero-cards .pcard-img { aspect-ratio: auto; height: clamp(190px, 33svh, 340px); }
.hero-cards .pcard-img img { height: 100%; }
.hero-cards .pcard-body { padding: 2px 22px 20px; gap: 6px; }
.hero-cards .scroller { padding-bottom: 12px; }
@media (min-width: 900px) { .hero-cards .h1 br { display: none; } .hero-cards .h1 { font-size: clamp(1.8rem, 2.8vw, 2.5rem); } .hero-head { margin-bottom: 14px; } }
@media (max-width: 760px) { .hero-cards .pcard-img { height: clamp(180px, 31svh, 300px); } }

/* Kontrast im dunklen Bento-Feld */
.bt.bt-big p { color: rgba(244,246,242,.84); }
.bt.bt-big h3 { color: #fff; }
.pcard-img { overflow: hidden; }
.pcard-img img { backface-visibility: hidden; }
.pcard-img.spin img, .pcard:hover .pcard-img.spin img { transform: none !important; }

/* Hero-Karten: Gerätebild füllt die Fläche exakt (nichts abgeschnitten), Platz unten für das Bestandsschild */
.hero-cards .pcard-img { display: block; position: relative; }
.hero-cards .pcard-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 1% 3% 11%; }

/* Glow ohne harte Kante: nur der weiche Radial-Verlauf, kein Boden-Verlauf (der endete sichtbar am Bildfeld-Rand); Bildfeld schneidet nichts ab */
.pcard-img, .cmp-img { background: radial-gradient(ellipse 58% 48% at 50% 54%, var(--ac, rgba(34,197,94,.14)), transparent 74%) !important; overflow: visible; }
.hero-cards .pcard-img::after { display: none; }

/* Wischleiste: Schatten und Hover-Anhebung der Karten werden nicht mehr am Rand der Leiste abgeschnitten
   (mehr Innenabstand oben/unten, per negativem Außenabstand wieder ausgeglichen) */
.scroller, .hero-cards .scroller { padding-top: 18px; padding-bottom: 76px; margin-top: -18px; margin-bottom: -64px; }
.hero-cards .hero-cta { position: relative; z-index: 1; }

/* Formular: Unternehmer-Bestätigung */
.chk { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-size: 14px; line-height: 1.4; color: var(--mid); }
.chk input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--g-2); }

/* Mobil: Hero kürzer (Platz sparen) */
@media (max-width: 760px) {
  .d-only { display: none; }
  .hero-cards .h1 { font-size: clamp(1.9rem, 8.8vw, 2.3rem); line-height: 1.04; }
  .hero-cards .pcard-body { padding: 2px 18px 16px; }
  .hero-cards .pcard h3 { font-size: 1.3rem; }
  .hero-cards .price .now { font-size: 1.5rem; }
  .hero-cta .btn-ghost { display: none; }
  .hero-cta { justify-content: flex-start; padding-right: 72px; }
}
@media (max-width: 760px) { .hero-cta { justify-content: center; padding-right: 0; } }
@media (max-width: 760px) { .ticker + .sec { padding-top: 16px; } .sec.trust .sec-head { margin-bottom: 18px; } }

/* Mobil: Hero füllt den ersten Bildschirm, die Laufschrift sitzt am unteren Rand (wie am Desktop); die Karte wächst mit */
@media (max-width: 760px) {
  .hero-cards { display: flex; flex-direction: column; min-height: calc(100svh - 54px); }
  .hero-cards .scroller { flex: 1 1 auto; min-height: 0; }
  .hero-cards .pcard-img { flex: 1 1 auto; height: auto; min-height: 170px; }
  .hero-cards .hero-cta { flex: none; }
}
@media (max-width: 760px) { .hero-cards .pcard-body { flex: none; } }
@media (max-width: 760px) { .hero-cards .pcard-img img { padding-top: 7%; } }
/* Mobil: Gerätebild größer (Kategorie-Zeile weg = mehr Höhe fürs Bild, leichte Vergrößerung), Text sitzt unten */
@media (max-width: 760px) {
  .hero-cards .pcard-cat { display: none; }
  .hero-cards .pcard-img img { --s: 1.1; transform: scale(var(--s)); transform-origin: 50% 62%; padding-top: 9%; padding-bottom: 12%; }
  .hero-cards .pcard-body { padding-top: 0; }
}

/* Mobil: Karten und Schritte auf Service-/Ratgeber-Seiten kompakter (wie die Vorteils-Karten der Startseite) */
@media (max-width: 760px) {
  .card { padding: 16px 16px 18px; gap: 6px; }
  .card h3, .card h2 { font-size: 1.12rem; }
  .card p { font-size: 15px; line-height: 1.4; }
  .card:has(> .ico) { grid-template-columns: 44px 1fr; column-gap: 14px; row-gap: 2px; align-items: start; }
  .card:has(> .ico) .ico { grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 14px; }
  .card:has(> .ico) .ico svg { width: 24px; height: 24px; }
  .card:has(> .ico) h3 { align-self: end; }
  .card:has(> .ico) p { grid-column: 2; }
  .step { padding: 14px 16px; }
  .step h3 { font-size: 1.1rem; }
  .step p { font-size: 15px; }
  .grid { gap: 10px; }
}

/* CTA-Karte mobil: nichts darf über den Kartenrand laufen (min-width:0 in den Grid-Spalten) */
.cta-card, .cta-copy { min-width: 0; }
@media (max-width: 860px) {
  .cta-card { grid-template-columns: minmax(0, 1fr); }
  .cta-btns { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 100%; }
  .cta-btn { min-width: 0; padding: 0 10px; font-size: 14px; white-space: normal; text-align: center; }
  .cta-facts { gap: 4px 14px; font-size: 12.5px; }
  .cta-facts li { white-space: normal; }
}
@media (max-width: 760px) { .feature:not(:has(> svg)) { grid-template-columns: 1fr; } .feature:not(:has(> svg)) p, .feature:not(:has(> svg)) h3 { grid-column: 1 / -1; } }

/* Weicher, milchiger Übergang von der hellen Seite in den dunklen Footer (statt harter Kante hinter der CTA-Karte) */
.cta-band + .footer { background: linear-gradient(180deg, var(--bg, #fafaf7) 0, #e8f3ec 14px, #bddcc7 40px, #72a888 80px, #2e5d40 124px, #14281c 168px, #0b100d 210px); border-top: 0; }

/* ── App-Start (PWA): grünes Ladebild wie das App-Icon ──
   Das App-Icon hat grünen Grund; manifest background_color ist dasselbe Grün. Das System zeigt daher den Pfeil mittig auf Grün,
   dieses Ladebild startet mit demselben Bild (Pfeil exakt in der Bildschirmmitte, kein Versatz), dann blendet die Wortmarke ein
   und alles blendet weich in die Seite über. */
.vps-root { display: none; position: fixed; inset: 0; z-index: 300; background: #22c55e; transition: opacity .55s ease; }
html.vp-splash { overflow: hidden; }
html.vp-splash .vps-root { display: block; }
html.vp-splash-out .vps-root { opacity: 0; pointer-events: none; }
.vps-mark { position: absolute; inset: 0; margin: auto; width: 210px; height: 210px; animation: vpsPulse 1.1s .35s cubic-bezier(.45, 0, .25, 1) both; }
.vps-mark svg { width: 100%; height: 100%; display: block; }
.vps-word { position: absolute; left: 0; right: 0; top: calc(50% + 66px); text-align: center; font: 700 30px/1 'Inter', system-ui, sans-serif; letter-spacing: -.045em; color: #04140a; opacity: 0; transform: translateY(10px); animation: vpsWord .7s .7s cubic-bezier(.22, .8, .24, 1) forwards; }
@keyframes vpsPulse { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.07); } }
@keyframes vpsWord { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .vps-mark { animation: none; } .vps-word { animation: none; opacity: 1; transform: none; } }

  .specs-more { border-bottom: 0; }
  .specs-more summary { padding: 14px 4px; }
  .specs-more .specs { margin-bottom: 4px; }
  
}

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.ph-nav.prev { left: 8px; } .ph-nav.next { right: 8px; }
.ph-count { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 2; font-size: 12px; font-weight: 600; background: rgba(15,21,17,.72); color: #fff; padding: 4px 10px; border-radius: 999px; }
@media (max-width: 640px) { .ph-zoom { inset: 10px 10px 36px; } .ph-nav { top: auto; bottom: 4px; transform: none; width: 34px; height: 34px; } .ph-nav.prev { left: 10px; } .ph-nav.next { right: 10px; } }

/* Foto-Leiste: nicht ausgewählte Bilder leicht abgedunkelt */
.thumb img { transition: filter .2s; }
.thumb:not(.active) img { filter: brightness(.72); }
.thumb:not(.active):hover img { filter: brightness(.9); }

/* Karten-Hover einheitlich: Karte wächst leicht und neigt sich (nur Maus); Touch bekommt keinen Hover-Zustand,
   damit sich das Gerät beim Tippen nicht verkleinert (vorher ersetzte scale(1.05) die mobile Vergrößerung 1.1). */
@media (hover: hover) and (pointer: fine) {
  .pcard, .cmp-card { transition: transform .6s var(--ease), box-shadow .6s var(--ease), border-color .3s; }
  .pcard:hover, .cmp-card:hover { transform: translateY(-4px) perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); box-shadow: 0 28px 56px -28px rgba(15,21,17,.38); z-index: 4; }
  .pcard:hover .pcard-img img, .pcard:hover .pcard-img.spin img { transform: scale(var(--s, 1)) !important; }
  .cmp-card:hover .cmp-img img { transform: scale(calc(var(--s, 1) * 1.015)); }
}
@media (hover: none) {
  .pcard:hover, .cmp-card:hover { transform: translateY(0) perspective(900px) rotateX(0deg) rotateY(0deg); box-shadow: var(--sh); }
  .pcard:hover .pcard-img img, .cmp-card:hover .cmp-img img { transform: scale(var(--s, 1)); }
  .pcard:hover .pcard-img::after, .cmp-card:hover .cmp-img::after { width: 56%; opacity: 1; }
}

/* Showroom Handy: Detail-Chips bündig mit dem Text in der Karte (vorher 24 px nach rechts versetzt und rechts abgeschnitten) */
@media (max-width: 960px) {
  .show-side .info-chips { width: calc(100% + 36px); margin-inline: -18px; padding: 2px 18px 6px; scroll-padding-inline: 18px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
}

/* Grüne Abschnitte (Variante): CTA-Grün als Hintergrund, Karten als helles Glas, weiße Akzente für Kontrast */
.sec.dark.green { --bg: #0d6b32; --bg-soft: #0a4d24; --ink: #ffffff; --mid: rgba(255,255,255,.92); --soft: rgba(255,255,255,.82); --card: rgba(255,255,255,.1); --card-2: rgba(255,255,255,.16); --line: rgba(255,255,255,.24); --line-2: rgba(255,255,255,.4); --g-2: #d9fbe4; --g-ink: #d9fbe4;
  background: radial-gradient(60% 80% at 88% 0, rgba(255,255,255,.16), transparent 60%), linear-gradient(135deg, #129443 0%, #0d6b32 55%, #0a4d24 100%); }
.sec.dark.green::before { background: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.4px) 0 0 / 22px 22px; -webkit-mask-image: linear-gradient(100deg, transparent 30%, #000); mask-image: linear-gradient(100deg, transparent 30%, #000); }
.sec.dark.green .feature { background: var(--card); border-color: var(--line); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sec.dark.green .feature:hover { border-color: var(--line-2); box-shadow: 0 26px 60px -30px rgba(0,0,0,.5); }
.sec.dark.green .feature > svg { background: rgba(255,255,255,.16); color: #fff; }
.sec.dark.green .eyebrow { color: #d9fbe4; }

/* Startseiten-Hero in Grün (CTA-Grün), Karten bleiben weiß */
.hero.green { --ink: #ffffff; --mid: rgba(255,255,255,.92); --soft: rgba(255,255,255,.82); color: #fff;
  background: radial-gradient(60% 70% at 88% 0, rgba(255,255,255,.16), transparent 60%), linear-gradient(135deg, #129443 0%, #0d6b32 55%, #0a4d24 100%);
  border-radius: 0 0 clamp(24px, 4vw, 48px) clamp(24px, 4vw, 48px); }
.hero.green .hero-bg i { display: none; }
.hero.green .hero-bg::after { background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.4px); background-size: 22px 22px; }
.hero.green .eyebrow { color: #d9fbe4; }
.hero.green .h1 { color: #fff; }
.hero.green .btn-primary { background: #fff; color: #0b5a29; box-shadow: 0 12px 30px -12px rgba(0,0,0,.45); }
.hero.green .btn-primary:hover { background: #f0fdf4; }
.hero.green .btn-ghost { background: rgba(255,255,255,.14); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); border-color: transparent; }
.hero.green .btn-ghost:hover { background: rgba(255,255,255,.24); }
.hero.green .pcard { --ink: #0f1511; --mid: rgba(15,21,17,.74); --soft: rgba(15,21,17,.66); color: #0f1511; }
.hero.green .hero-arrows button { color: #0b5a29; background: #fff; }

/* Startseite: breitere Container, mehr CTA-Grün als Akzent */
.sec.trust, .sec.dark.green, .sec.after-dark { --wrap: min(1320px, 100% - 48px); }
.ticker { background: linear-gradient(90deg, #0b5a29, #0f7a37 50%, #0b5a29); border-block-color: transparent; }
.ticker span { color: #fff; }
.ticker span::after { background: #86efac; }
/* Vertrauen: große Karte im CTA-Grün, zwei Karten mit hellgrünem Grund */
.sec.trust .bento { gap: 16px; }
.sec.trust .bt { padding: 26px 26px 28px; }
.sec.trust .bt-big { padding: clamp(28px, 3.4vw, 48px); background: radial-gradient(60% 80% at 90% 0, rgba(255,255,255,.18), transparent 60%), linear-gradient(135deg, #16a34a 0%, #0f7a37 55%, #0b5a29 100%); box-shadow: 0 40px 90px -44px rgba(11,90,41,.8); }
.sec.trust .bt-big::before { content: ''; position: absolute; inset: 0; background: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.4px) 0 0 / 22px 22px; -webkit-mask-image: linear-gradient(100deg, transparent 30%, #000); mask-image: linear-gradient(100deg, transparent 30%, #000); pointer-events: none; }
.sec.trust .bt-big > * { position: relative; }
.sec.trust .bt-big .bt-ico { background: rgba(255,255,255,.18); color: #fff; }
.sec.trust .bt-big .link { color: #fff; }
.sec.trust .bt-big::after { display: none; }
.sec.trust .bt:nth-child(3), .sec.trust .bt:nth-child(4) { background: #e7f5ec; border-color: rgba(21,128,61,.18); }
/* Preise: Zahlen in Grün, Karten mit hellgrünem Hintergrund */
.sec.after-dark { background: linear-gradient(180deg, #e7f5ec 0%, var(--bg) 100%); }
.sec.after-dark .feature { background: #fff; border-color: rgba(21,128,61,.16); box-shadow: 0 24px 60px -36px rgba(11,90,41,.35); }
.sec.after-dark .feature h3 { color: #0d6b32; }

/* Startseite Desktop: Überschrift minimal höher, Karten bleiben an derselben Stelle (12 px oben weniger, 12 px mehr Abstand darunter) */
@media (min-width: 900px) {
  .hero-cards { padding-top: calc(var(--nav-h) + clamp(16px, 2.4vw, 32px) - 12px); }
  .hero-cards .hero-head { margin-bottom: calc(clamp(12px, 1.6vw, 22px) + 12px); }
}

/* Hotspot-Karte (Desktop): kompakter, ruhiger, immer im Bild (Position setzt sprite.js placeCard) */
@media (min-width: 961px) {
   25% { opacity: 1; } 100% { transform: scale(1.7); opacity: 0; } }

/* CTA-Karte: Automaten stehen auf einer Bodenlinie mit Schatten und werden unten nicht mehr von der Kartenkante abgeschnitten */
.cta-fleet { --fl: clamp(26px, 3.2vw, 38px); padding-bottom: var(--fl); }
.cta-fleet::before { content: ''; position: absolute; left: 4%; right: 4%; bottom: calc(var(--fl) - 11px); height: 22px; z-index: 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.5), rgba(0,0,0,0)); filter: blur(3px); pointer-events: none; }
.cta-fleet::after { content: ''; position: absolute; left: -6%; right: -6%; bottom: var(--fl); height: 1px; z-index: 0; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.4) 25%, rgba(255,255,255,.4) 75%, rgba(255,255,255,0)); pointer-events: none; }
.cta-fleet img { position: relative; z-index: 1; }

/* CTA-Flotte mit 5 Geräten: Mitte (VisionLift) groß, außen kleiner */
.cta-fleet img { width: clamp(74px, 9.4vw, 138px); margin-inline: -1.6%; }
.cta-fleet img:nth-child(1), .cta-fleet img:nth-child(5) { transform: scale(.82); z-index: 1; margin-inline: -1.6%; }
.cta-fleet img:nth-child(2), .cta-fleet img:nth-child(4) { transform: scale(.92); z-index: 2; margin-inline: -1.6%; }
.cta-fleet img:nth-child(3) { transform: scale(1.14); z-index: 3; margin-inline: 0; }
@media (prefers-reduced-motion: no-preference) { .cta-fleet img:nth-child(2) { animation: none; } .cta-fleet img:nth-child(3) { animation: ctaFloat2 14s ease-in-out infinite; } @keyframes ctaFloat2 { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } } }
@media (max-width: 860px) { .cta-fleet img { width: 24%; margin-inline: -3.5%; } .cta-fleet img:nth-child(3) { margin-inline: -1%; } .cta-fleet img:nth-child(1), .cta-fleet img:nth-child(5) { transform: scale(.9); } }

/* Handybreite mit Maus: Karte beim Darüberfahren nicht anheben/vergrößern, damit sie der Überschrift nicht zu nah kommt */
@media (max-width: 760px) and (hover: hover) and (pointer: fine) {
  .hero-cards .pcard:hover { transform: none; box-shadow: var(--sh); z-index: auto; }
}

/* Vertrauen-Karte "Showroom": leere Fläche oben rechts mit drei Geräten auf Bodenlinie füllen */
.bt-scene { --fl: 20px; position: absolute; right: clamp(16px, 3vw, 44px); top: clamp(16px, 2.6vw, 34px); width: min(56%, 440px); height: 52%; display: flex; align-items: flex-end; justify-content: center; padding-bottom: var(--fl); z-index: 1; pointer-events: none; }
.bt-scene::before { content: ''; position: absolute; left: 4%; right: 4%; bottom: calc(var(--fl) - 9px); height: 18px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.42), rgba(0,0,0,0)); filter: blur(3px); }
.bt-scene::after { content: ''; position: absolute; left: -4%; right: -4%; bottom: var(--fl); height: 1px; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.4) 25%, rgba(255,255,255,.4) 75%, rgba(255,255,255,0)); }
.bt-scene img { position: relative; z-index: 1; height: 100%; width: auto; max-width: 36%; object-fit: contain; margin-inline: -2%; filter: drop-shadow(0 18px 20px rgba(0,0,0,.3)); }
.bt-scene img:nth-child(1), .bt-scene img:nth-child(3) { transform: scale(.84); transform-origin: 50% 100%; }
.bt-scene img:nth-child(2) { transform: scale(1.04); transform-origin: 50% 100%; z-index: 2; }
@media (max-width: 900px) { .bt-scene { position: relative; right: auto; top: auto; width: 100%; height: 170px; order: -1; margin-bottom: 14px; } }
.sec.trust .bt-big > .bt-scene { position: absolute; }
@media (max-width: 900px) { .sec.trust .bt-big > .bt-scene { position: relative; } }
/* Showroom-Karte: eigene Illustration (assets/img/showroom-scene.svg, erzeugt mit tools/gen_showroom_scene.py) statt Geräte-Renders */
.bt-scene { width: min(52%, 440px); height: 64%; padding-bottom: 0; top: clamp(12px, 2vw, 26px); right: clamp(12px, 2.4vw, 34px); }
.bt-scene::before, .bt-scene::after { display: none; }
.bt-scene img, .bt-scene img:nth-child(n) { height: 100%; width: 100%; max-width: none; margin: 0; transform: none; filter: none; object-fit: contain; object-position: 50% 100%; }
@media (max-width: 900px) { .bt-scene { width: 100%; height: 230px; } }

/* ---- Freier 3D-Modus (free3d.js): Blender-Viewport-Look, liegt über dem Sprite-Viewer ---- */
.f3d { position: absolute; inset: 0; z-index: 5; border-radius: 18px; overflow: hidden; opacity: 0; transition: opacity .4s; touch-action: none;
  background: radial-gradient(ellipse 90% 80% at 50% 32%, #4d4d50 0%, #38383b 52%, #262628 100%); }
.f3d.in { opacity: 1; }
.f3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.f3d-canvas:active { cursor: grabbing; }
.f3d-hint { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 2; font-size: 12.5px; color: rgba(255,255,255,.55); pointer-events: none; white-space: nowrap; }
.stage.photo .f3d { display: none; }
@media (max-width: 560px) { .f3d-hint { white-space: normal; text-align: center; width: max-content; max-width: 86%; } }
@media (prefers-reduced-motion: reduce) { .f3d { transition: none; } }
   /* Greifer-Animation läuft im Sprite-Viewer darunter und wäre unter dem 3D-Overlay unsichtbar */

/* Alle Modelle: Reservieren wieder in der Aktionszeile (eine Zeile), Karten etwas kompakter, damit eine Kartenreihe auf den Bildschirm passt */
.cmp-actions { flex-wrap: nowrap; gap: 8px; }
.cmp-actions .btn { padding-left: 16px; padding-right: 16px; white-space: nowrap; }
.cmp-img { aspect-ratio: 1 / .78; }
.cmp-img img { height: 92%; }
.cmp-body { padding: 2px 22px 20px; gap: 8px; }
.cmp-specs li { padding: 7px 0; }
.cmp-foot { margin-top: 2px; }
.cmp-grid { gap: 18px; }
@media (max-width: 420px) { .cmp-actions { flex-wrap: wrap; } }
.cmp-actions { justify-content: center; margin-top: 4px; }   /* Buttons mittig in der Karte */

/* Karten: Schatten der Karte bleibt wie er war (schwarz). Beim Hovern leuchtet nur der Glow hinter dem Automaten in Vendbro-Gruen, kraeftiger */
@property --ac { syntax: '<color>'; inherits: true; initial-value: rgba(34,197,94,.14); }
.pcard-img, .cmp-img { transition: none; }   /* Glow kommt sofort, ohne Wartezeit */
@media (hover: hover) and (pointer: fine) {
  .pcard:hover .pcard-img, .cmp-card:hover .cmp-img { --ac: rgba(34,197,94,.60); }
}

/* Startseite: Kartenleiste mit der Maus ziehen */
@media (hover: hover) and (pointer: fine) { .hero-cards .scroller { cursor: grab; } }
.hero-cards .scroller.dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; -webkit-user-select: none; }
.hero-cards .scroller.dragging a { pointer-events: none; }

/* Alle Modelle: Buttonzeile passt sich der Kartenbreite an (kleinere Buttons, ganz schmal darf sie umbrechen) */
.cmp-card { container-type: inline-size; }
@container (max-width: 400px) { .cmp-actions { gap: 6px; } .cmp-actions .btn { padding-left: 11px; padding-right: 11px; font-size: 13px; } }
@container (max-width: 290px) { .cmp-actions { flex-wrap: wrap; } }
@container (max-width: 340px) { .cmp-actions { gap: 4px; } .cmp-actions .btn { padding-left: 8px; padding-right: 8px; font-size: 12.5px; } }

/* "Alle Modelle": Hover-Drehung wie bei den Startkarten */
.cmp-img.spin::before { content: 'Maus bewegen zum Drehen'; position: absolute; right: 14px; top: 14px; z-index: 2; font-size: 11px; font-weight: 600; color: var(--soft); background: rgba(255,255,255,.82); padding: 4px 10px; border-radius: 999px; opacity: 0; transition: opacity .3s; pointer-events: none; }
.cmp-img.spin:hover::before { opacity: 1; }
.cmp-img.spin img, .cmp-card:hover .cmp-img.spin img { transform: none !important; }
@media (hover: hover) and (pointer: fine) { .cmp-card:hover .cmp-img.spin img { transform: scale(var(--s, 1)) !important; } }

/* Kopfleiste: Menüpunkte mittig in der Leiste und etwas kräftiger; "Anfrage" bleibt rechts, Logo links */
@media (min-width: 801px) {
  .nav-in { position: relative; }
  .nav-links { position: absolute; inset: 0; justify-content: center; gap: 34px; pointer-events: none; }
  .nav-links > a, .nav-links .nav-cta { pointer-events: auto; }
  .nav-cta { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }
  .nav-links a:not(.btn) { font-size: 15px; font-weight: 500; color: var(--ink); }
  .nav-links a[aria-current="page"] { font-weight: 700; }
}

/* Kopfleiste: Telefonnummer links neben "Anfrage" (nur Desktop ab 900 px; auf dem Handy ausgeblendet) */
.nav-tel { display: none; }
@media (min-width: 900px) {
  .nav-cta { display: flex; align-items: center; gap: 16px; }
  .nav-tel { display: inline-block; font-size: 14px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); white-space: nowrap; transition: color .2s; }
  .nav-tel:hover { color: var(--g-2); }
}
@media (min-width: 900px) { .nav-links a.nav-tel { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); } .nav-links a.nav-tel:hover { color: var(--g-2); } .nav-links a.nav-tel::after { display: none; } }

/* Preisrechner: Hinweis, falls die Mehrfach-Reservierung online nicht verfügbar ist */
.pay-msg { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(34,197,94,.1); font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.pay-msg a { color: var(--g-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Kurzes Ladebild am Desktop (nur Startseite, einmal je Sitzung; ?splash=0 schaltet es ab): ca. 1,2 s statt 2,5 s */
html.vp-splash-short .vps-root { transition-duration: .4s; }
html.vp-splash-short .vps-mark { animation-duration: .6s; animation-delay: .08s; }
html.vp-splash-short .vps-word { animation-duration: .4s; animation-delay: .22s; }

/* Service: Kopf und Kachel-Raster passen zusammen in einen Bildschirm (Desktop) */
@media (min-width: 901px) and (min-height: 560px) {
  .page-head:has(+ .sec.fit) { padding-top: calc(var(--nav-h) + 32px); padding-bottom: 10px; }
  .page-head:has(+ .sec.fit) .wrap { gap: 6px; }
  .page-head:has(+ .sec.fit) .h1 { font-size: clamp(1.7rem, 4.6vh, 2.5rem); }
  .page-head:has(+ .sec.fit) .h1 br { display: none; }
  .page-head:has(+ .sec.fit) .lead { max-width: 60em; font-size: clamp(.95rem, 1.2vw, 1.1rem); }
  .sec.fit { padding-block: 10px 28px; }
  .sec.fit .bento { height: clamp(400px, calc(100svh - var(--nav-h) - 235px), 760px); grid-template-rows: 1fr 1fr; }
  .sec.fit .bt { padding: 18px 20px; gap: 6px; }
  .sec.fit .bt-big { padding: 26px; }
  .sec.fit .bt p { font-size: 14px; line-height: 1.4; }
}

/* Service: Aktionsknöpfe in der grünen Karte */
.bt-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; position: relative; z-index: 3; }
@media (min-width: 901px) {
  .sec.trust .bt-big .bt-actions { position: absolute; top: 26px; left: 26px; flex-direction: column; align-items: flex-start; margin: 0; }
  .sec.trust .bt-big .bt-ico { display: none; }
}

/* Schatten großer Karten werden am Abschnittsende nicht mehr vom nächsten Abschnitt abgeschnitten */
.sec:has(+ .sec:not(.dark)) { z-index: 1; }
.sec.fit { padding-bottom: 56px; }
.cta-view { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }
.cta-view:hover { background: rgba(255,255,255,.14); }
@media (min-width: 901px) { .sec.trust .bt-big .bt-actions { gap: 12px; top: 22px; } .sec.trust .bt-big .bt-actions .cta-btn { min-height: 42px; font-size: 14px; padding: 0 20px; } }

/* Kontakt: grüner Container mit Bild, Kontaktwegen und Ablauf */
.ct-green { position: relative; overflow: hidden; isolation: isolate; align-self: stretch; display: grid; grid-template-rows: auto auto 1fr; gap: 14px; padding: clamp(18px, 2.2vw, 28px); border-radius: 28px; color: #f4fff7; background: radial-gradient(60% 80% at 90% 0, rgba(255,255,255,.18), transparent 60%), linear-gradient(135deg, #16a34a 0%, #0f7a37 55%, #0b5a29 100%); box-shadow: 0 40px 90px -44px rgba(11,90,41,.8); }
.ct-green::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.4px) 0 0 / 22px 22px; -webkit-mask-image: linear-gradient(120deg, transparent 20%, #000); mask-image: linear-gradient(120deg, transparent 20%, #000); }
.ct-scene { display: flex; justify-content: center; }
.ct-scene img { height: clamp(150px, 26vh, 270px); width: auto; max-width: 100%; object-fit: contain; }
.ct-links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ct-green .clink { padding: 14px 16px; gap: 12px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); box-shadow: none; color: #fff; }
.ct-green .clink:hover { background: rgba(255,255,255,.22); }
.ct-green .clink .ci, .ct-green .clink small, .ct-green .clink .go { color: rgba(244,255,247,.88); }
.ct-green .clink b { font-size: 16px; }
.ct-green .tl { padding: 0 2px; gap: 8px; align-content: start; }
.ct-green .tl h3 { color: #fff; font-size: 1.05rem; }
.ct-green .tl ol { gap: 6px; }
.ct-green .tl li { color: rgba(244,255,247,.9); font-size: 14.5px; line-height: 1.35; }
.ct-green .tl li::before { color: #bbf7d0; }
@media (max-width: 900px) { .ct-links { grid-template-columns: 1fr; } .contact .side.ct-green .clink { order: 0; } }
@media (min-width: 901px) and (min-height: 560px) {
  .page-head:has(+ .sec.fit) + .sec.fit .contact { align-items: stretch; }
  .sec.fit .form-card { padding: 22px 26px; gap: 11px; }
  .sec.fit .form-card form { gap: 11px !important; }
  .sec.fit .form-card .fi { padding: 10px 14px; }
  .sec.fit .form-card .h3 { font-size: 1.25rem; }
  .sec.fit .form-card .note { font-size: 12.5px; line-height: 1.35; }
}
@media (min-width: 901px) and (min-height: 560px) { .page-head + .sec.fit { padding-top: 14px !important; } .sec.fit .form-card textarea.fi { min-height: 0; } }
@media (min-width: 901px) and (min-height: 560px) {
  .sec.fit .form-card > .h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sec.fit .form-card { padding: 18px 24px; gap: 8px; }
  .sec.fit .form-card form { gap: 8px !important; }
  .sec.fit .form-card .fi { padding: 8px 12px; }
  .sec.fit .form-card .fg { gap: 3px; }
}
@media (min-width: 901px) and (min-height: 560px) {
  .page-head:has(+ .sec.fit .contact) { padding-bottom: 10px; }
  .page-head + .sec.fit:has(.contact) { padding-top: 14px !important; }
  .sec.fit .form-card { padding: 14px 22px; }
  .sec.fit .form-card textarea.fi { height: 40px; resize: none; }
  .sec.fit .form-card, .sec.fit .form-card form { gap: 6px !important; }
}

/* Preise: grüne Zusammenfassung mit Bild, kompakter Rechner */
.sum-green { position: relative; overflow: hidden; isolation: isolate; color: #f4fff7; border-color: transparent !important; background: radial-gradient(60% 80% at 90% 0, rgba(255,255,255,.18), transparent 60%), linear-gradient(135deg, #16a34a 0%, #0f7a37 55%, #0b5a29 100%); box-shadow: 0 40px 90px -44px rgba(11,90,41,.8) !important; }
.sum-green::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.4px) 0 0 / 22px 22px; -webkit-mask-image: linear-gradient(120deg, transparent 20%, #000); mask-image: linear-gradient(120deg, transparent 20%, #000); }
.sum-scene { display: flex; justify-content: center; }
.sum-scene img { height: clamp(120px, 20vh, 200px); width: auto; max-width: 100%; object-fit: contain; }
.sum-green h3, .sum-green .sum-line b, .sum-green .sum-total strong { color: #fff; }
.sum-green .note { color: rgba(244,255,247,.8); }
.sum-green .sum-line, .sum-green .sum-total span, .sum-green .fine { color: rgba(244,255,247,.86); }
.sum-green .sum-total { border-top-color: rgba(255,255,255,.3); }
.sum-green .tip { background: rgba(255,255,255,.16); color: #fff; }
.sum-green .btn-primary { background: #fff; color: #0b5a29; }
.sum-green .btn-ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }
.sum-green .pay-msg { color: #fff; }
.sum-green .pay-msg a { color: #fff; text-decoration: underline; }
@media (max-width: 900px) { .sum-scene img { height: 140px; } }
@media (min-width: 901px) and (min-height: 560px) {
  .page-head:has(+ #rechner.fit) { padding-top: calc(var(--nav-h) + 32px); padding-bottom: 10px; }
  .page-head:has(+ #rechner.fit) .wrap { gap: 6px; }
  .page-head:has(+ #rechner.fit) .h1 { font-size: clamp(1.7rem, 4.6vh, 2.5rem); }
  .page-head:has(+ #rechner.fit) .h1 br { display: none; }
  .page-head:has(+ #rechner.fit) .lead { max-width: 60em; font-size: clamp(.95rem, 1.2vw, 1.1rem); }
  #rechner.fit { padding-block: 12px 28px; }
  #rechner.fit .calc { align-items: stretch; }
  #rechner.fit .calc-card { padding: 18px 20px; gap: 10px; }
  #rechner.fit .calc-card h3 { font-size: 1.25rem; }
  #rechner.fit #calcRows { grid-template-columns: 1fr 1fr; gap: 8px !important; }
  #rechner.fit .row { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "img info step" "img price step"; gap: 1px 10px; padding: 7px 10px; border-radius: 14px; }
  #rechner.fit .row img { grid-area: img; width: 40px; height: 46px; }
  #rechner.fit .row > div:nth-child(2) { grid-area: info; }
  #rechner.fit .row .p { grid-area: price; text-align: left; min-width: 0; font-size: 13px; color: var(--mid); }
  #rechner.fit .row .stepper { grid-area: step; }
  #rechner.fit .row b { font-size: 14px; }
  #rechner.fit .row small { font-size: 12px; }
  #rechner.fit .sum { position: relative; top: 0; }
  #rechner.fit .sum-green { gap: 8px; }
  #rechner.fit .sum-line { font-size: 14px; }
  #rechner.fit .sum-total { padding-top: 10px; }
  #rechner.fit .sum-total strong { font-size: 1.8rem; }
  #rechner.fit .sum-green .btn { min-height: 42px; }
  #rechner.fit .fine { font-size: 12px; line-height: 1.35; }
}
@media (min-width: 901px) and (min-height: 560px) {
  #rechner.fit .sum-scene img { height: clamp(100px, 18vh, 165px); }
  #rechner.fit .row b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; }
  #rechner.fit .row small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  #rechner.fit .stepper button { width: 30px; height: 30px; }
  #rechner.fit .sum-green .btn { min-height: 38px; padding-block: 0; }
  #rechner.fit .sum-green h3 { font-size: 1.15rem; }
}

/* Rendite: grüne Eingabe-Karte, bessere Regler */
.roi-in.sum-green .fl, .roi-in.sum-green .fine, .roi-in.sum-green label { color: rgba(244,255,247,.9); }
.roi-in.sum-green .fi { background: #fff; color: #0f1511; border-color: transparent; }
.roi-in .sl { padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.24); gap: 10px; }
.roi-in .sl label { color: rgba(244,255,247,.92); }
.roi-in .sl label b { color: #0b5a29; background: #fff; padding: 2px 10px; border-radius: 999px; }
.roi-in.sum-green input[type=range] { background: linear-gradient(90deg, #fff var(--v, 50%), rgba(255,255,255,.35) var(--v, 50%)); }
.roi-in.sum-green input[type=range]::-webkit-slider-thumb { border-color: #fff; background: #16a34a; }
.roi-in.sum-green input[type=range]::-moz-range-thumb { border-color: #fff; background: #16a34a; }
.roi-in.sum-green input[type=checkbox] { accent-color: #fff; }

/* Rendite: Ergebnis-Zahlen */
.roi-out .res { gap: 12px; }
.roi-out .res div { position: relative; overflow: hidden; padding: 16px 18px; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 26px -18px rgba(15,21,17,.35); }
.roi-out .res div::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 0 4px 4px 0; background: #22c55e; }
.roi-out .res dt { font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--soft); }
.roi-out .res dd { font-size: 1.9rem; font-weight: 800; letter-spacing: -.04em; margin-top: 4px; font-variant-numeric: tabular-nums; color: var(--ink); }
.roi-out .res .hi { background: linear-gradient(135deg, #16a34a, #0b5a29); border-color: transparent; color: #fff; }
.roi-out .res .hi::before { background: #bbf7d0; }
.roi-out .res .hi dt { color: rgba(244,255,247,.85); }
.roi-out .res .hi dd { color: #fff; }
.roi-out .res div:last-child:nth-child(odd) { background: #f0fdf4; border-color: rgba(22,163,74,.3); }
.roi-out .res div:last-child:nth-child(odd) dd { color: #15803d; }
@media (min-width: 901px) { .calc .calc-card { align-content: start; } }
/* Ein-Bildschirm-Abschnitte: gleicher Hintergrund wie der Kopf (kein harter Streifen dazwischen) */
.sec.light.fit { background: #fafaf7; }
@media (prefers-color-scheme: dark) { .sec.light.fit { background: #fafaf7; } }

/* Platz unter großen Karten, damit der Schatten nicht am Abschnittsende abgeschnitten wird */
.sec.fit, #rechner.fit { padding-bottom: 104px; }

/* Übergänge: kein harter Farbsprung zwischen zwei Abschnitten, genug Luft unter großen Karten */
.sec.after-dark + .sec.after-dark { background: var(--bg); }
.sec.trust { padding-bottom: calc(clamp(56px, 6vw, 96px) + 64px); }
@media (max-width: 760px) { .sec.trust { padding-bottom: 72px; } }
.sec.trust.fit { padding-bottom: 104px; }
/* Kopf und erster Abschnitt gehen ohne grauen Streifen ineinander über (alle Seiten) */
.page-head + .sec.light { background: #fafaf7; }

/* ===== Einheitliches Seitenraster (Desktop): gleicher Kopf, Inhalte füllen den Bildschirm =====
   Regel für neue Abschnitte: Kopf = .page-head, erster Inhalt = .sec.fit mit Höhe var(--fit-h);
   unter Karten mit großem Schatten immer ~100px Luft lassen (kein harter Abschnittsrand). */
:root { --fit-h: clamp(430px, calc(100svh - 217px), 820px); }
@media (min-width: 901px) and (min-height: 560px) {
  .page-head { padding-top: calc(var(--nav-h) + 32px); padding-bottom: 10px; }
  .page-head .wrap { gap: 6px; }
  .page-head .h1 { font-size: clamp(1.7rem, 4.6vh, 2.5rem); }
  .page-head .h1 br { display: none; }
  .page-head .lead { max-width: 60em; font-size: clamp(.95rem, 1.2vw, 1.1rem); }
  .sec.fit .bento { height: var(--fit-h); }
  .sec.fit .contact { min-height: var(--fit-h); }
  .sec.fit .form-card { align-content: space-between; }
  .sec.fit .form-card form { align-content: space-between; height: 100%; }
  #rechner.fit > .calc:first-child { min-height: var(--fit-h); }
  #rechner.fit > .calc:first-child .calc-card { align-content: space-between; }
  #rechner.fit > .calc:first-child .calc-card:first-child { grid-template-rows: auto 1fr; }
  #rechner.fit #calcRows { grid-auto-rows: 1fr; align-content: stretch; }
}
/* gleiche Inhaltsbreite auf Service, Kontakt und Preise */
.sec.fit, #rechner.fit { --wrap: min(1320px, 100% - 48px); }

/* Rendite: Ergebnis-Zahlen dezenter, Bild im freien Platz */
.roi-out { grid-template-rows: auto auto auto 1fr; }
.roi-out .res { gap: 10px; }
.roi-out .res div { padding: 12px 16px; border-radius: 16px; background: #fcfcfa; border: 1px solid var(--line); box-shadow: none; }
.roi-out .res div::before { top: 12px; bottom: 12px; width: 3px; background: #86efac; }
.roi-out .res dt { font-size: 11.5px; font-weight: 600; letter-spacing: .05em; color: var(--soft); }
.roi-out .res dd { font-size: 1.45rem; font-weight: 700; letter-spacing: -.03em; margin-top: 2px; color: var(--ink); }
.roi-out .res .hi { background: #ecfdf3; border-color: rgba(22,163,74,.22); }
.roi-out .res .hi::before { background: #22c55e; }
.roi-out .res .hi dt { color: #166534; }
.roi-out .res .hi dd { color: #15803d; }
.roi-out .res div:last-child:nth-child(odd) { background: #fcfcfa; border-color: var(--line); }
.roi-out .res div:last-child:nth-child(odd) dd { color: var(--ink); }
.roi-pic { position: relative; overflow: hidden; isolation: isolate; min-height: 150px; border-radius: 22px; display: grid; place-items: center; background: radial-gradient(60% 80% at 90% 0, rgba(255,255,255,.18), transparent 60%), linear-gradient(135deg, #16a34a 0%, #0f7a37 55%, #0b5a29 100%); }
.roi-pic::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.4px) 0 0 / 22px 22px; -webkit-mask-image: linear-gradient(120deg, transparent 20%, #000); mask-image: linear-gradient(120deg, transparent 20%, #000); }
.roi-pic img { height: 100%; max-height: 220px; width: auto; max-width: 100%; object-fit: contain; padding-block: 6px; }
.roi-out .res div::before { display: none; }

/* Rendite: Zahlen-Kacheln als Glas auf zartem grünen Verlauf */
.roi-out { background: radial-gradient(40% 32% at 12% 16%, rgba(34,197,94,.22), transparent 70%), radial-gradient(45% 36% at 92% 30%, rgba(74,222,128,.26), transparent 70%), radial-gradient(50% 30% at 30% 62%, rgba(22,163,74,.16), transparent 70%), #fff; }
.roi-out .res div { background: rgba(255,255,255,.5); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); border: 1px solid rgba(255,255,255,.85); box-shadow: 0 8px 24px -14px rgba(11,90,41,.35), inset 0 1px 0 rgba(255,255,255,.9); }
.roi-out .res .hi { background: rgba(34,197,94,.16); border-color: rgba(255,255,255,.7); }
.roi-out .res div:last-child:nth-child(odd) { background: rgba(255,255,255,.5); border-color: rgba(255,255,255,.85); }

/* Formular füllt die Karte (Kontakt) */
@media (min-width: 901px) and (min-height: 560px) { .sec.fit .form-card { grid-template-rows: minmax(0, 1fr); } }

/* ===== Starkes Glas für Knöpfe und Kontakt-Kacheln auf grünen Flächen ===== */
.cta-btn, .ct-green .clink, .sum-green .btn, .sum-green .btn-primary, .sum-green .btn-ghost {
  -webkit-backdrop-filter: blur(18px) saturate(1.7); backdrop-filter: blur(18px) saturate(1.7);
  color: #fff; border: 1px solid rgba(255,255,255,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), inset 0 -10px 18px -12px rgba(255,255,255,.25), 0 12px 26px -14px rgba(0,0,0,.45);
  text-shadow: 0 1px 1px rgba(0,0,0,.18);
}
.cta-main, .sum-green .btn-primary { background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.22)); color: #fff; }
.cta-main:hover, .sum-green .btn-primary:hover { background: linear-gradient(180deg, rgba(255,255,255,.52), rgba(255,255,255,.3)); }
.cta-call { background: linear-gradient(180deg, rgba(7,40,20,.55), rgba(7,40,20,.38)); color: #fff; border-color: rgba(255,255,255,.28); }
.cta-call:hover { background: linear-gradient(180deg, rgba(7,40,20,.65), rgba(7,40,20,.48)); }
.cta-wa, .cta-view, .sum-green .btn-ghost { background: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.1)); color: #fff; }
.cta-wa:hover, .cta-view:hover, .sum-green .btn-ghost:hover { background: linear-gradient(180deg, rgba(255,255,255,.36), rgba(255,255,255,.18)); }
.ct-green .clink { background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.1)); border-radius: 20px; }
.ct-green .clink:hover { background: linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,.18)); }

/* Kontaktformular als Glas auf zartem grünen Verlauf */
.form-card { background: radial-gradient(44% 30% at 10% 8%, rgba(34,197,94,.24), transparent 70%), radial-gradient(46% 34% at 94% 36%, rgba(74,222,128,.28), transparent 70%), radial-gradient(50% 30% at 28% 88%, rgba(22,163,74,.2), transparent 70%), #fff; }
.form-card .fi { background-color: rgba(255,255,255,.5); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 8px 22px -14px rgba(11,90,41,.4), inset 0 1px 0 rgba(255,255,255,.95); }
.form-card .fi:focus { background-color: rgba(255,255,255,.75); border-color: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.22), inset 0 1px 0 rgba(255,255,255,.95); }
.form-card .fl { color: #2f4a38; font-weight: 600; }
.form-card .chk { color: #2f4a38; }
.form-card .btn-primary { -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6); background: linear-gradient(180deg, rgba(34,197,94,.95), rgba(16,128,58,.85)); color: #fff; border: 1px solid rgba(255,255,255,.55); text-shadow: 0 1px 1px rgba(0,0,0,.2); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -10px 18px -12px rgba(255,255,255,.3), 0 14px 28px -14px rgba(11,90,41,.6); }
.form-card .btn-primary:hover { background: linear-gradient(180deg, rgba(52,211,110,.98), rgba(22,150,70,.9)); }
.form-card .fi { border-color: rgba(22,120,60,.22); }
.form-card { background: #fff; }

/* Abstand zwischen letztem Inhalt und dem grünen Banner unten verkleinert */
.sec.fit:has(+ .cta-band) { padding-bottom: 28px; }
.cta-band { margin-top: clamp(0px, 1vw, 12px); }
main > .sec.fit:last-child { padding-bottom: 28px; }
/* Keine grauen Bänder mehr mit hartem Rand zwischen den Abschnitten (alle Seiten) */
.sec.light { background: #fafaf7; }

/* Preis-Gegenüberstellung: roter durchgestrichener Katalog-UVP links neben dem Preis, grünes Abzeichen im Bild */
.price .was { color: #dc2626; text-decoration: line-through; text-decoration-thickness: 2px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.price .was small { text-decoration: none; display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; color: #b91c1c; background: rgba(220,38,38,.1); padding: 1px 5px; border-radius: 6px; margin-right: 4px; vertical-align: 2px; }
.price .save { font-size: 12px; font-weight: 700; color: #15803d; background: rgba(34,197,94,.16); padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.deal-badge { position: absolute; top: 12px; right: 12px; z-index: 3; font-size: 13px; font-weight: 800; color: #fff; background: linear-gradient(180deg, #22c55e, #15803d); padding: 5px 11px; border-radius: 999px; box-shadow: 0 8px 18px -8px rgba(11,90,41,.7), inset 0 1px 0 rgba(255,255,255,.5); letter-spacing: -.01em; }
.cmp-foot .price, .pcard-body .price { flex-wrap: nowrap; gap: 8px; }
.cmp-foot .price .was, .pcard-body .price .was { font-size: 13.5px; margin-left: 2px; }

.sum-green #sumCta { color: #0f1511; text-shadow: none; }
/* Prozent-Abzeichen: rechts unten im Bild, auf Höhe der Lager-Pille */
.pcard-img .deal-badge, .cmp-img .deal-badge { top: auto; bottom: 14px; right: 18px; padding: 4px 11px; font-size: 12.5px; }
/* Abzeichen dezenter */
.deal-badge { color: #15803d; background: rgba(240,253,244,.88); border: 1px solid rgba(34,197,94,.35); box-shadow: 0 6px 14px -10px rgba(11,90,41,.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-weight: 700; }
@media (max-width: 900px) { .sec.trust .bt-big .bt-actions { flex-direction: column; align-items: stretch; width: 100%; } .bt-actions .cta-btn { width: 100%; } }
/* grüne Karten sind nicht mehr "sticky": der alte top-Wert hat sie auf dem Handy um 72 px nach unten geschoben */
.sum-green, .sum { top: 0; }
@media (max-width: 900px) { .sec.trust .bt-big .bt-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; } .bt-actions .cta-btn { width: 100%; padding: 0 10px; min-height: 46px; font-size: 14px; white-space: normal; text-align: center; line-height: 1.15; } }
@media (max-width: 900px) { .bt-actions > .cta-btn { grid-column: auto !important; } }

/* ===== Knöpfe dezenter, im Stil von Apple: dünner Rand, flaches Glas, normale Schriftstärke ===== */
.cta-btn, .ct-green .clink, .sum-green .btn, .sum-green .btn-primary, .sum-green .btn-ghost {
  -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.3); box-shadow: inset 0 .5px 0 rgba(255,255,255,.35); text-shadow: none; font-weight: 500;
}
.cta-main, .sum-green .btn-primary { background: rgba(255,255,255,.92); color: #0b3d1e; }
.cta-main:hover, .sum-green .btn-primary:hover { background: #fff; }
.cta-call { background: rgba(0,0,0,.22); color: #fff; border-color: rgba(255,255,255,.18); }
.cta-call:hover { background: rgba(0,0,0,.32); }
.cta-wa, .cta-view, .sum-green .btn-ghost { background: rgba(255,255,255,.14); color: #fff; }
.cta-wa:hover, .cta-view:hover, .sum-green .btn-ghost:hover { background: rgba(255,255,255,.22); }
.ct-green .clink { background: rgba(255,255,255,.14); }
.ct-green .clink:hover { background: rgba(255,255,255,.22); }
.ct-green .clink b { font-weight: 600; }
.sum-green #sumCta { color: #0b3d1e; }
.form-card .btn-primary { background: #22c55e; color: #fff; border: 0; box-shadow: none; text-shadow: none; font-weight: 600; -webkit-backdrop-filter: none; backdrop-filter: none; }
.form-card .btn-primary:hover { background: #1fb556; }

@media (max-width: 900px) { .bt-actions .cta-btn { min-height: 42px; font-size: 13.5px; font-weight: 500; } }

/* Handy: Bilder näher am Text, kein unnötiger Leerraum */
@media (max-width: 900px) {
  .sec.trust.fit .bt-big .bt-ico { display: none; }
  .sec.trust .bt-scene { height: 150px; margin-bottom: -4px; }
  .sec.trust .bt-big { padding: 16px 20px 20px; }
  .ct-green { padding: 14px 18px 18px; gap: 10px; }
  .ct-scene img { height: 128px; }
  .sum-scene img { height: 112px; }
  .sum-green { gap: 8px; }
  .roi-pic { min-height: 120px; }
  .roi-pic img { max-height: 150px; }
}
@media (max-width: 760px) {
  .page-head + .sec { padding-top: 14px !important; }
  .form-card { padding: 18px 16px; gap: 10px; }
  .form-card form { gap: 10px !important; }
  .form-card .fi { padding: 11px 14px; }
  .form-card .fg { gap: 4px; }
  .frow { gap: 10px; }
}
/* Kontakt mobil: der grüne Container bleibt ein Container (unter dem Formular) */
@media (max-width: 900px) {
  .contact .side.ct-green { display: grid; order: 1; }
  .contact .side .clink, .contact .side .tl { order: 0; }
}
/* Regler: Spur bleibt 4 px hoch (das background-Kürzel hatte background-clip zurückgesetzt) */
.roi-in.sum-green input[type=range] { background-clip: content-box; }
@media (max-width: 760px) { .roi-in .fi { font-size: 15px; } }

/* Rechner: Geräte-Zeilen als Glas (ausgewählt = zartes grünes Glas statt flächig grün) */
#calcRows .row { position: relative; isolation: isolate; background: transparent; border: 0; transition: transform .25s var(--ease); }
#calcRows .row::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgba(255,255,255,.72); box-shadow: inset 2px 4px 16px rgba(17,17,17,.05), 0 8px 20px -14px rgba(17,17,17,.4); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); transition: background .25s, box-shadow .25s; }
#calcRows .row::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; border: 1px solid rgba(17,17,17,.34); opacity: .45; pointer-events: none; -webkit-mask-image: linear-gradient(170deg, #000, transparent 50%); mask-image: linear-gradient(170deg, #000, transparent 50%); transition: border-color .25s, opacity .25s; }
#calcRows .row > * { position: relative; z-index: 2; }
#calcRows .row:hover { transform: translateY(-1px); }
#calcRows .row.on { background: transparent; }
#calcRows .row.on::before { background: linear-gradient(160deg, rgba(220,252,231,.85), rgba(255,255,255,.7)); box-shadow: inset 2px 4px 16px rgba(21,128,61,.08), 0 10px 22px -14px rgba(11,90,41,.45); }
#calcRows .row.on::after { border-color: #16a34a; opacity: .7; -webkit-mask-image: linear-gradient(170deg, #000, rgba(0,0,0,.25) 70%); mask-image: linear-gradient(170deg, #000, rgba(0,0,0,.25) 70%); }

/* Pakete: Bilder bleiben im Container (teilen sich die Breite), Text wird nicht überdeckt */
.pkg { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pkg-imgs, .pkg-body { min-width: 0; }
.pkg-imgs img { flex: 1 1 0; min-width: 0; max-width: none; width: auto; height: clamp(150px, 19vw, 250px); object-fit: contain; margin-inline: -8px; }
@media (max-width: 800px) { .pkg { grid-template-columns: minmax(0, 1fr); } .pkg-imgs img { height: auto; max-height: 190px; aspect-ratio: 560 / 690; } }

/* Abschnitt "Technik": Szenen links und rechts der Überschrift (nur breite Bildschirme) */
.tech-art { display: none; }
@media (min-width: 1100px) {
  .sec.dark.green > .tech-art { display: block; position: absolute; top: 56px; width: clamp(230px, 25vw, 400px); height: auto; pointer-events: none; z-index: 0; }
  .sec.dark.green > .tech-art-l { left: 1.5%; }
  .sec.dark.green > .tech-art-r { right: 1.5%; }
}
/* Die unteren Ecken des grünen Abschnitts bleiben rund: der folgende Abschnitt darf nicht darüber liegen */
.sec.dark.round-b + .sec { z-index: 0; }
.sec.dark.round-b { z-index: 2; }

/* Grüner Abschnitt kompakter (Technik / Klare Rollen) */
@media (min-width: 761px) {
  .sec.dark.green { padding-top: 64px; padding-bottom: 76px; }
  .sec.dark.green .sec-head { margin-bottom: 32px; }
  .sec.dark.green .feature { padding: 22px 20px 24px; gap: 8px; }
  .sec.dark.green .feature > svg { width: 52px; height: 52px; padding: 12px; margin-bottom: 2px; }
  .sec.dark.green .feature h3 { font-size: 1.3rem; }
  .sec.dark.green .feature p { font-size: 16px; }
}
@media (min-width: 1100px) { .sec.dark.green > .tech-art { top: 36px; width: clamp(210px, 22vw, 340px); } }
@media (max-width: 760px) { .sec.dark.green { padding-top: 44px; padding-bottom: 56px; } }

/* Navigation: stärkeres Glas (Muster "Dark Glass on paper": Weichzeichner, Lichtkante, Haarlinie) */
@media (min-width: 900px) {
  .nav-in { position: relative; background: linear-gradient(180deg, rgba(255,255,255,.46), rgba(255,255,255,.26)); backdrop-filter: blur(34px) saturate(2.1); -webkit-backdrop-filter: blur(34px) saturate(2.1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 2px 4px 16px rgba(255,255,255,.18), 0 14px 38px -16px rgba(15,21,17,.3); }
  .nav-in::after { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 1px solid rgba(15,21,17,.3); opacity: .4; pointer-events: none; -webkit-mask-image: linear-gradient(170deg, #000, transparent 55%); mask-image: linear-gradient(170deg, #000, transparent 55%); }
}
@media (max-width: 899px) {
  .nav { background: rgba(250,250,247,.5); backdrop-filter: blur(30px) saturate(2); -webkit-backdrop-filter: blur(30px) saturate(2); border-bottom: 1px solid rgba(15,21,17,.08); box-shadow: inset 0 -1px 0 rgba(255,255,255,.6); }
}
@media (min-width: 900px) { .nav-in { background: linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,.38)); } }

/* Handy: Modellkarten passen in die Breite (Preiszeile und Aktionen umbrechen, Spalte darf schrumpfen) */
@media (max-width: 560px) {
  .cmp-grid { grid-template-columns: minmax(0, 1fr); }
  .cmp-card, .cmp-body { min-width: 0; }
  .cmp-foot { flex-wrap: wrap; row-gap: 8px; }
  .cmp-foot .price, .pcard-body .price { flex-wrap: wrap; row-gap: 2px; }
  .cmp-specs li b { min-width: 0; overflow-wrap: anywhere; }
  .cmp-actions { justify-content: flex-start; }
}

/* Handy: Spalten dürfen schrumpfen, Knopftexte umbrechen statt abgeschnitten zu werden */
@media (max-width: 640px) {
  .grid-3, .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .grid > *, .contact > *, .calc > * { min-width: 0; }
  .sum-green .btn { white-space: normal; text-align: center; line-height: 1.2; min-height: 44px; padding-block: 8px; }
  .res > div { min-width: 0; }
  .res dd { overflow-wrap: anywhere; }
}
@media (max-width: 400px) { .btn { white-space: normal; text-align: center; line-height: 1.2; height: auto; min-height: 44px; padding-block: 8px; } .nav .btn { min-height: 30px; padding-block: 0; white-space: nowrap; } }

/* ===== Seite "Aufstellen": Einsatzorte mit Szenen ===== */
.st-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.st-card { display: grid; align-content: start; background: #fff; border: 1px solid var(--line); border-radius: 28px; overflow: hidden; box-shadow: 0 30px 60px -38px rgba(11,90,41,.4); }
.st-pic { position: relative; isolation: isolate; padding: 10px 10px 0; background: radial-gradient(60% 80% at 90% 0, rgba(255,255,255,.18), transparent 60%), linear-gradient(135deg, #16a34a 0%, #0f7a37 55%, #0b5a29 100%); }
.st-pic::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.4px) 0 0 / 22px 22px; -webkit-mask-image: linear-gradient(120deg, transparent 20%, #000); mask-image: linear-gradient(120deg, transparent 20%, #000); }
.st-pic img { display: block; width: 100%; height: auto; }
.st-body { padding: 20px 24px 26px; display: grid; gap: 8px; }
.st-body h3 { margin: 0; font-size: 1.3rem; letter-spacing: -.02em; }
.st-body p { margin: 0; color: var(--mid); font-size: 16px; line-height: 1.5; }
@media (max-width: 900px) { .st-grid { grid-template-columns: minmax(0, 1fr); } .st-card { grid-template-columns: minmax(0, 1fr); } }

/* Navigation: äußerer Header komplett transparent (Kapsel .nav-in schwebt frei, keine halbdurchsichtige Hülle, auch nicht beim Scrollen) */
.nav,
.nav.is-scrolled,
.nav.scrolled {
  background: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ===== Harmonische Abschnittsabstände (große Leerräume reduziert, keine Überlappung) ===== */
.sec { padding-bottom: clamp(36px, 4vw, 48px) !important; }
.sec + .sec { padding-top: clamp(32px, 3.5vw, 44px) !important; }
.sec.fit, .sec.trust.fit, #rechner.fit { padding-bottom: clamp(40px, 4.5vw, 52px) !important; z-index: 2; position: relative; }
.sec.dark.green { margin-top: 0 !important; padding-bottom: 56px !important; }
.sec.after-dark { padding-top: calc(clamp(36px, 4vw, 56px) + clamp(28px, 4vw, 48px)) !important; padding-bottom: clamp(24px, 3vw, 36px) !important; }
.sec.dark.round-b { margin-bottom: calc(clamp(28px, 4vw, 48px) * -1) !important; }
.sec.dark.round-b + .sec { z-index: 0; }
.sec-head { margin-bottom: clamp(28px, 3.5vw, 44px) !important; }

/* ===== Interaktiver Standort-Showcase (service.html) ===== */
.places-showcase {
  display: grid;
  gap: 24px;
}
.places-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.place-btn {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, #0f172a);
  background: #fff;
  border: 1px solid var(--line, rgba(0, 56, 34, 0.12));
  border-radius: 999px;
  cursor: pointer;
  transition: all .2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
  user-select: none;
}
.place-btn:hover {
  border-color: #16a34a;
  color: #003822;
  transform: translateY(-1px);
}
.place-btn.active {
  background: #003822;
  color: #fff;
  border-color: #003822;
  box-shadow: 0 8px 20px -4px rgba(0, 56, 34, 0.28);
}
.place-card {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  background: var(--card, #fff);
  border: 1px solid var(--line, rgba(0, 56, 34, 0.1));
  border-radius: 28px;
  box-shadow: 0 24px 60px -20px rgba(11, 90, 41, 0.18), 0 8px 20px -8px rgba(0, 0, 0, 0.05);
  padding: clamp(24px, 4vw, 44px);
  position: relative;
  overflow: hidden;
  transition: opacity .18s ease, transform .18s ease;
}
.place-card::after {
  content: '';
  position: absolute;
  inset: auto -20% -40% auto;
  width: 60%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(34, 197, 94, 0.12), transparent);
  pointer-events: none;
}
.place-card.switching {
  opacity: 0.55;
  transform: scale(0.995);
}
.place-content {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}
.place-tag {
  display: inline-block;
  align-self: flex-start;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #16a34a;
  background: rgba(22, 163, 74, 0.08);
  padding: 4px 10px;
  border-radius: 6px;
  margin-bottom: 12px;
}
.place-title {
  font-size: clamp(20px, 2.3vw, 28px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: #0f172a;
  margin: 0 0 12px 0;
}
.place-desc {
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.6;
  color: var(--mid, #475569);
  margin: 0 0 20px 0;
}
.place-perks {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.place-perks li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #1e293b;
}
.place-perks svg {
  flex-shrink: 0;
}
.place-model-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 18px;
  background: #f8faf9;
  border-radius: 16px;
  border: 1px solid rgba(0, 56, 34, 0.08);
}
.place-model-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.place-model-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #64748b;
  font-weight: 600;
}
.place-model-name {
  font-size: 15px;
  font-weight: 700;
  color: #003822;
}
.place-model-desc {
  font-size: 12px;
  color: #64748b;
}
.place-model-link {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  background: #003822;
  color: #fff !important;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: all .2s ease;
}
.place-model-link:hover {
  background: #16a34a;
  transform: translateX(2px);
}
.place-scene {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  padding: 12px;
  background: radial-gradient(circle at 50% 50%, rgba(34, 197, 94, 0.08) 0%, transparent 70%);
  border-radius: 20px;
}
.place-scene img {
  display: block;
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 16px 28px rgba(0, 56, 34, 0.14));
  transition: transform .4s cubic-bezier(.16, 1, .3, 1);
}
.place-card:hover .place-scene img {
  transform: translateY(-4px) scale(1.02);
}

@media (max-width: 900px) {
  .place-card {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 24px;
  }
  .place-scene {
    order: -1;
    max-width: 320px;
    margin: 0 auto;
  }
  .place-model-box {
    flex-direction: column;
    align-items: flex-start;
  }
  .place-model-link {
    width: 100%;
    justify-content: center;
  }
}
@media (max-width: 600px) {
  .places-nav {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .places-nav::-webkit-scrollbar {
    display: none;
  }
  .place-btn {
    flex-shrink: 0;
    padding: 8px 14px;
    font-size: 13px;
  }
}

/* ===== Ablauf-Schritte mit Szenen & Erreichbarkeit (aufstellen.html) ===== */
.flow-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
.flow-card {
  display: flex;
  flex-direction: column;
  background: var(--card, #fff);
  border: 1px solid var(--line, rgba(0, 56, 34, 0.1));
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 16px 36px -12px rgba(11, 90, 41, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: transform .25s ease, box-shadow .25s ease;
}
.flow-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 45px -12px rgba(11, 90, 41, 0.2);
}
.flow-pic {
  position: relative;
  width: 100%;
  aspect-ratio: 460 / 260;
  max-height: 205px;
  overflow: hidden;
  background: #0f5132;
}
.flow-pic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.flow-body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 8px;
}
.flow-num {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #16a34a;
}
.flow-num::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
}
.flow-body h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: #0f172a;
}
.flow-body p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--mid, #475569);
}
.flow-perks {
  list-style: none;
  padding: 0;
  margin: 4px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.flow-perks li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
  color: #1e293b;
}
.flow-perks svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}
@media (max-width: 900px) {
  .flow-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== Harmonische Abschnittsabstände (große Leerräume reduziert) ===== */
.sec.fit, .sec.trust.fit, #rechner.fit { padding-bottom: 28px !important; z-index: 2; position: relative; }
.sec.fit + .sec, #rechner.fit + .sec { padding-top: clamp(36px, 4vw, 52px) !important; }
.sec.after-dark { padding-top: calc(clamp(36px, 4vw, 56px) + clamp(28px, 4vw, 48px)) !important; }
.sec.dark.round-b { margin-bottom: calc(clamp(28px, 4vw, 48px) * -1) !important; }
.sec.dark.round-b + .sec { z-index: 0; }
.sec.dark.green { padding-bottom: 56px !important; }
.sec-head { margin-bottom: clamp(28px, 3.5vw, 44px) !important; }

/* Seite "Webseiten": zwei Karten nebeneinander */
.st-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .st-grid.two { grid-template-columns: minmax(0, 1fr); } }
/* Kopfleiste mit 6 Menüpunkten: unter 1180 px ohne Telefonnummer und mit engerem Abstand, damit nichts überlappt (Nummer steht im Footer/WhatsApp) */
@media (min-width: 900px) and (max-width: 1179px) {
  .nav-links a.nav-tel, .nav-tel { display: none; }
  .nav-links { gap: 24px; }
}

/* Ablauf-Karten: Bild zoomt sanft beim Hover, Text etwas größer (Seite Webseiten) */
.flow-pic img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.flow-card:hover .flow-pic img { transform: scale(1.04); }
#ablauf .flow-body p { font-size: 14.5px; }
#ablauf .flow-body h3 { font-size: 1.25rem; }

/* ===== FAQ: Karten statt Linien, runder Plus-Knopf, weiches Aufklappen (alle Seiten) ===== */
:root { interpolate-size: allow-keywords; }
.faq { max-width: 860px; gap: 12px; border-top: 0; }
.faq details { border: 1px solid var(--line); border-radius: 20px; background: #fff; overflow: hidden;
  box-shadow: 0 12px 30px -22px rgba(11,90,41,.4); transition: border-color .3s, box-shadow .3s, background .3s, transform .25s; }
.faq details:hover { border-color: rgba(34,197,94,.45); transform: translateY(-1px); }
.faq details[open] { background: linear-gradient(180deg, #f0fdf4, #fff 70%); border-color: rgba(34,197,94,.55);
  box-shadow: 0 20px 40px -24px rgba(11,90,41,.5); }
.faq summary { padding: 20px 22px 20px 26px; font-size: 18px; gap: 16px; border-radius: 20px; }
.faq summary:focus-visible { outline: 2px solid #22c55e; outline-offset: -3px; }
.faq summary::after { content: ''; width: 34px; height: 34px; border-radius: 50%; font-size: 0; flex: none;
  background: linear-gradient(#16a34a, #16a34a) center / 12px 2px no-repeat, linear-gradient(#16a34a, #16a34a) center / 2px 12px no-repeat, rgba(34,197,94,.14);
  transition: transform .4s var(--ease), background-color .3s; }
.faq details[open] summary::after { transform: rotate(135deg);
  background: linear-gradient(#fff, #fff) center / 12px 2px no-repeat, linear-gradient(#fff, #fff) center / 2px 12px no-repeat, #22c55e; }
.faq details p { margin: 0; padding: 0 26px 24px; max-width: none; font-size: 16.5px; line-height: 1.65; color: var(--mid); }
.faq details[open] p { animation: faqIn .45s var(--ease) both; }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.faq details::details-content { block-size: 0; overflow: clip; transition: block-size .4s var(--ease), content-visibility .4s allow-discrete; }
.faq details[open]::details-content { block-size: auto; }
@media (max-width: 640px) { .faq summary { padding: 16px 16px 16px 18px; font-size: 16.5px; } .faq details p { padding: 0 18px 20px; font-size: 15.5px; } }
@media (prefers-reduced-motion: reduce) { .faq details, .faq summary::after, .faq details::details-content { transition: none; } .faq details[open] p { animation: none; } }

/* ===== Kopfleiste als echtes Milchglas ===== */
/* Ursache für "Schrift scharf hinter der Leiste": ein view-transition-name am äußeren Header macht ihn zur Backdrop-Root,
   die Kapsel (.nav-in) weichzeichnete dann nur den eigenen Inhalt. Der Name sitzt jetzt auf der Kapsel selbst. */
.nav { view-transition-name: none; }
.nav-in { view-transition-name: vp-nav;
  background: linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,.56));
  -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 1px rgba(15,21,17,.07), 0 14px 38px -16px rgba(15,21,17,.3); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .nav-in { background: rgba(250,250,247,.96); } }

/* ===== Bildkarten kompakter: Bildhöhe richtet sich nach der Bildschirmhöhe ===== */
.st-pic { height: clamp(190px, 36svh, 340px); padding: 6px 6px 0; }
.st-pic img { width: 100%; height: 100%; object-fit: contain; }
.st-body { padding: 16px 22px 20px; }
@media (max-width: 900px) { .st-pic { height: clamp(170px, 30svh, 260px); } }
/* Grüner Abschnitt (zwei Reihen Karten) passt auf einen Bildschirm */
@media (min-width: 761px) {
  .sec.dark.green .feature { padding: 18px 18px 20px; gap: 6px; }
  .sec.dark.green .feature > svg { width: 44px; height: 44px; padding: 10px; }
  .sec.dark.green .feature h3 { font-size: 1.2rem; }
  .sec.dark.green .feature p { font-size: 15px; line-height: 1.45; }
  .sec.dark.green { padding-top: 52px !important; padding-bottom: 48px !important; }
}

/* Leiste mit "Unsere Modelle": Telefonnummer erst ab 1220 px, damit zwischen Menü und Nummer immer Platz bleibt */
@media (min-width: 1180px) and (max-width: 1219px) { .nav-links a.nav-tel, .nav-tel { display: none; } }

/* ===== Preise: weicher, milchiger Übergang zwischen Bild und Paket-Tipp (Container-Höhe bleibt gleich) ===== */
/* Bild: schrumpft, verblasst und verschwimmt, wenn der Tipp kommt (max-height = Bildhöhe, damit beides im Gleichschritt läuft) */
.sum-scene { max-height: clamp(120px, 20vh, 200px); overflow: hidden;
  transition: max-height .8s cubic-bezier(.2,.7,.2,1), opacity .6s ease, filter .6s ease, margin .8s cubic-bezier(.2,.7,.2,1); }
@media (max-width: 900px) { .sum-scene { max-height: 140px; } }
.sum:has(.tip-wrap.open) .sum-scene { max-height: 0; opacity: 0; filter: blur(12px); margin-bottom: -10px; }
/* Tipp: wächst auf die gemessene Höhe und blendet aus der Unschärfe ein; zu bleibt er unsichtbar im Fluss (Höhe 0) */
.tip-wrap { max-height: 0; margin-top: -10px; overflow: hidden; opacity: 0; filter: blur(10px); visibility: hidden;
  transition: max-height .8s cubic-bezier(.2,.7,.2,1), margin .8s cubic-bezier(.2,.7,.2,1), opacity .5s ease, filter .5s ease, visibility 0s .8s; }
.tip-wrap.open { max-height: var(--tip-h, 170px); margin-top: 0; opacity: 1; filter: none; visibility: visible;
  transition: max-height .8s cubic-bezier(.2,.7,.2,1), margin .8s cubic-bezier(.2,.7,.2,1), opacity .6s ease .2s, filter .6s ease .2s, visibility 0s; }
@media (prefers-reduced-motion: reduce) { .sum-scene, .tip-wrap, .tip-wrap.open { transition: none !important; } }