/* Layout: Pico's centered container, light/dark from the visitor's system, Ledvora green as Pico's primary color. */
:root {
  --lv-green: #0B5D45;
  --lv-green-hover: #08402F;
  --lv-tint: #F4F8F6;
  --lv-chip-bg: #DDF5E8;
  --lv-chip-fg: #0B5D45;
  --lv-amber: #8A5A0C;
  --lv-neg: #A8361F;
  --lv-chart-line: #0B5D45;
  --lv-chart-fill: #DDF5E8;
  --lv-chart-dot: #FFFFFF;
  --lv-logo-tile: #0B5D45;
  --lv-logo-mark: #FFFFFF;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --lv-green: #6FD3A6; --lv-green-hover: #8FE3B9; --lv-tint: #16201D; --lv-chip-bg: #173A2D; --lv-chip-fg: #8FE3B9;
    --lv-amber: #E8B45A; --lv-neg: #F08A6E; --lv-chart-line: #8FE3B9; --lv-chart-fill: #173A2D; --lv-chart-dot: #13171F;
    --lv-logo-tile: #E6EFEA; --lv-logo-mark: #0B5D45; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --lv-green: #6FD3A6; --lv-green-hover: #8FE3B9; --lv-tint: #16201D; --lv-chip-bg: #173A2D; --lv-chip-fg: #8FE3B9;
  --lv-amber: #E8B45A; --lv-neg: #F08A6E; --lv-chart-line: #8FE3B9; --lv-chart-fill: #173A2D; --lv-chart-dot: #13171F;
  --lv-logo-tile: #E6EFEA; --lv-logo-mark: #0B5D45; color-scheme: dark;
}
:root:root {
  --pico-primary: var(--lv-green);
  --pico-primary-background: var(--lv-green);
  --pico-primary-border: var(--lv-green);
  --pico-primary-underline: color-mix(in srgb, var(--lv-green) 45%, transparent);
  --pico-primary-hover: var(--lv-green-hover);
  --pico-primary-hover-background: var(--lv-green-hover);
  --pico-primary-hover-border: var(--lv-green-hover);
  --pico-primary-hover-underline: var(--lv-green-hover);
  --pico-primary-focus: color-mix(in srgb, var(--lv-green) 35%, transparent);
  --pico-text-selection-color: color-mix(in srgb, var(--lv-green) 20%, transparent);
}
@media (prefers-color-scheme: dark) { :root:root:not([data-theme="light"]) { --pico-primary-inverse: #0B1512; } }
:root:root[data-theme="dark"] { --pico-primary-inverse: #0B1512; }
body { background: var(--pico-background-color); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.brand strong { font-size: 1.3rem; letter-spacing: -.01em; }
.brand svg { flex: none; }
.logo-tile { fill: var(--lv-logo-tile); }
.logo-mark { fill: var(--lv-logo-mark); }
.logo-bar { fill: #8FE3B9; }
.lang { margin: 0; }
.lang button { padding: .4rem .75rem; font-size: .85rem; }
.pill { background: var(--lv-chip-bg); color: var(--lv-chip-fg); padding: .25rem .65rem; border-radius: 999px; font-size: .85rem; font-weight: 600; }
.hero { padding-block: 3rem 2rem; }
.hero .grid { align-items: center; gap: 3rem; }
.hero h1 { font-size: clamp(2.3rem, 4.6vw, 3.6rem); line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }
.hero h1 span, .accent { color: var(--lv-green); }
.hero hgroup p { font-size: 1.2rem; line-height: 1.6; margin-top: 1rem; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.mock { margin: 0; }
.mock header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.muted { color: var(--pico-muted-color); }
.live { color: var(--lv-green); font-weight: 600; }
.bar-row { display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr) 5.5em; gap: .75rem; align-items: center; font-size: .9rem; }
.bar-row span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-row progress { margin: 0; }
.bar-row .val { text-align: right; font-variant-numeric: tabular-nums; }
.bar-row.neg .val { color: var(--lv-neg); }
.bar-row.neg progress::-webkit-progress-value { background-color: var(--lv-neg); }
.bar-row.neg progress::-moz-progress-bar { background-color: var(--lv-neg); }
.chart { width: 100%; max-width: 100%; height: auto; display: block; margin-top: .5rem; }
.chart .threshold { stroke: var(--lv-amber); }
.chart .area { fill: var(--lv-chart-fill); }
.chart .line { stroke: var(--lv-chart-line); fill: none; }
.chart .min { fill: var(--lv-chart-dot); stroke: var(--lv-amber); }
.chart .end { fill: var(--lv-chart-line); }
.chart-legend { display: flex; justify-content: space-between; gap: 1rem; font-size: .85rem; font-variant-numeric: tabular-nums; }
.chart-legend .min-label { color: var(--lv-amber); }
.stats { text-align: center; padding-block: 1rem; }
.stats .num { font-size: 2.2rem; font-weight: 700; letter-spacing: -.02em; color: var(--lv-green); margin-bottom: .25rem; }
.band { background: var(--lv-tint); padding-block: 4.5rem; margin-top: 3rem; }
.section { padding-block: 4rem 2rem; }
.intro { max-width: 46rem; }
.strike { font-size: 1.2rem; text-decoration: line-through; text-decoration-color: var(--lv-neg); text-decoration-thickness: 2px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr)); gap: var(--pico-grid-row-gap) var(--pico-grid-column-gap); }
.cards article, .grid article { margin: 0; }
.feature-head { display: flex; align-items: center; gap: .75rem; }
.feature-head svg { stroke: var(--lv-green); flex: none; }
.tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.tags kbd { background: var(--lv-green); color: var(--pico-primary-inverse); }
.step-no { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--lv-green); color: var(--pico-primary-inverse); font-weight: 700; }
.video { padding: 0; overflow: hidden; margin: 0; }
.video video { width: 100%; max-width: 100%; aspect-ratio: 16 / 9; display: block; background: #08402F; object-fit: cover; }
.price { font-size: 2.2rem; color: var(--lv-green); }
.booking-note { display: block; text-align: center; margin-top: .75rem; }
.trial { max-width: 760px; text-align: center; }
/* Statt Inline-Stilen, damit die Content-Security-Policy keine erlauben muss. */
.flush { margin: 0; }
.step-head { margin-bottom: .5rem; }
.feature-title { font-size: 1.35rem; }
.step-title { font-size: 1.2rem; }
.pricing { align-items: center; gap: 3rem; }
.price-line { margin: 0; }
.full-width { width: 100%; }
.site-footer { padding-block: 3rem 2rem; }
.site-footer ul { padding: 0; }
.site-footer li { list-style: none; }
.footer-brand { margin-bottom: .5rem; }
.footer-brand strong { font-size: 1rem; }
.footer-heading { margin-bottom: .5rem; }
/* „Vertrag widerrufen“ hervorgehoben in eigenem Block (§ 356a BGB) … */
.withdraw-block { margin-bottom: 2rem; padding: 1rem 0; border-bottom: 1px solid var(--pico-muted-border-color); }
.withdraw { font-weight: 700; }
/* … „Verträge hier kündigen“ getrennt davon und anders gestaltet (§ 312k BGB). */
.cancel { font-weight: 650; }
/* Impressum und Datenschutz */
.legal { max-width: 46rem; padding-block: 2rem 3rem; }
.legal h1 { font-size: 2rem; }
.legal h2 { font-size: 1.25rem; margin-top: 2rem; }
.legal h3 { font-size: 1.05rem; margin-top: 1.25rem; }
.legal address { font-style: normal; }
.back { display: inline-block; margin-bottom: 1.5rem; }

/* Auf dem Handy passen die Abschnitte nicht neben Marke und Sprache; dort scrollt man ohnehin. */
@media (max-width: 767px) {
  .nav-section { display: none; }
}