/* =========================================================================
   Produktseite (/ ohne Anmeldung). Nutzt nur die Farb-Tokens aus style.css,
   damit hell und dunkel von selbst stimmen. Kein Skript nötig.
   ========================================================================= */

.startseite {
  --s-breite: 1120px;
  --s-rund: 16px;
  --s-rund-klein: 10px;
  background: var(--grund);
  color: var(--text);
  line-height: 1.55;
  display: block;
  min-height: 100vh;
  overflow-x: hidden;
}
.startseite img { max-width: 100%; height: auto; }
.s-rahmen { max-width: var(--s-breite); margin: 0 auto; padding: 0 20px; }

/* Kopf */
.s-kopf { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--grund) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linie); }
.s-kopf .s-rahmen { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.s-marke { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 700; margin-right: auto; }
.s-marke img { height: 34px; width: auto; }
.s-marke .s-produkt { padding-left: 10px; border-left: 1px solid var(--linie-stark); color: var(--text-leise); font-weight: 600; }
.s-nav { display: flex; gap: 20px; }
.s-nav a { color: var(--text-leise); text-decoration: none; font-weight: 500; }
.s-nav a:hover { color: var(--text); }
@media (max-width: 760px) { .s-nav { display: none; } }

/* Knöpfe */
.s-knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 20px; border-radius: var(--s-rund-klein); border: 1px solid var(--linie-stark); background: var(--flaeche); color: var(--text); font-weight: 600; text-decoration: none; white-space: nowrap; transition: background .14s, border-color .14s; }
.s-knopf:hover { border-color: var(--marke-rand); background: var(--flaeche-leise); }
.s-knopf.s-primaer { background: var(--marke); border-color: var(--marke); color: var(--marke-auf); }
.s-knopf.s-primaer:hover { background: var(--marke-stark); border-color: var(--marke-stark); }
.s-knopf.s-klein { min-height: 40px; padding: 0 14px; }
.s-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }

/* Einstieg */
.s-held { padding: 64px 0 40px; }
.s-held .s-rahmen { display: grid; grid-template-columns: 1fr; gap: 40px; }
.s-kicker { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-leise); margin: 0 0 12px; }
.s-held h1 { font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.12; letter-spacing: -.02em; margin: 0 0 18px; max-width: 18ch; }
.s-held .s-lead { font-size: 1.15rem; color: var(--text-leise); margin: 0 0 28px; max-width: 58ch; }
.s-punkte { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--text-leise); font-size: .95rem; }
.s-punkte li::before { content: "✓"; color: var(--gruen); font-weight: 700; margin-right: 6px; }
.s-bildpaar { position: relative; }
.s-bildpaar .s-gross { border-radius: var(--s-rund); border: 1px solid var(--linie); box-shadow: 0 18px 48px rgba(22, 35, 44, .14); display: block; }
.s-bildpaar .s-handy { position: absolute; right: -8px; bottom: -28px; width: 26%; min-width: 120px; border-radius: 22px; border: 6px solid var(--text); box-shadow: 0 18px 48px rgba(22, 35, 44, .25); }
@media (max-width: 600px) { .s-bildpaar .s-handy { display: none; } }

/* Abschnitte */
.s-abschnitt { padding: 72px 0; }
.s-abschnitt.s-leise { background: var(--flaeche); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.s-abschnitt h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); line-height: 1.2; letter-spacing: -.01em; margin: 0 0 12px; }
.s-abschnitt .s-unter { color: var(--text-leise); margin: 0 0 36px; max-width: 62ch; font-size: 1.05rem; }

.s-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.s-karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--s-rund); padding: 22px; }
.s-leise .s-karte { background: var(--grund); }
.s-karte h3 { font-size: 1.08rem; margin: 0 0 8px; }
.s-karte p { margin: 0; color: var(--text-leise); }

/* Bild mit Text */
.s-zeile { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; margin-top: 56px; }
.s-zeile img { border-radius: var(--s-rund); border: 1px solid var(--linie); display: block; }
.s-zeile h3 { font-size: 1.4rem; margin: 0 0 10px; }
.s-zeile p { color: var(--text-leise); margin: 0 0 10px; }
.s-zeile ul { margin: 0; padding-left: 20px; color: var(--text-leise); list-style: disc; }
.s-zeile li { margin: 4px 0; }
.s-zeile .s-schmal { max-width: 300px; justify-self: center; }
@media (min-width: 900px) {
  .s-held .s-rahmen { grid-template-columns: 5fr 6fr; align-items: center; }
  .s-zeile { grid-template-columns: 1fr 1fr; gap: 56px; }
  .s-zeile.s-dreh > :first-child { order: 2; }
}

/* Drei Handys nebeneinander statt eines einzelnen in viel Leerraum */
.s-handys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
.s-handys img { border-radius: 18px; border: 5px solid var(--text); box-shadow: 0 14px 36px rgba(22, 35, 44, .18); display: block; width: 100%; }
.s-handys img:nth-child(2) { margin-top: 28px; }
.s-handys img:nth-child(3) { margin-top: 56px; }
@media (min-width: 1000px) { .s-raster.s-vier { grid-template-columns: repeat(4, 1fr); } }

/* Preise */
.s-preise { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.s-preis { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--s-rund); padding: 24px; display: flex; flex-direction: column; gap: 6px; }
.s-preis.s-empfohlen { border-color: var(--marke); box-shadow: 0 0 0 1px var(--marke); }
.s-preis h3 { margin: 0; font-size: 1.1rem; }
.s-preis .s-betrag { font-size: 2.2rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin-top: 6px; }
.s-preis .s-betrag small { font-size: .95rem; font-weight: 500; color: var(--text-leise); letter-spacing: 0; }
/* Sternchen am Preis: führt zur Fußnote mit dem Satz nach § 19 UStG */
.s-stern { font-weight: 600; margin-left: 1px; color: inherit; text-decoration: none; }
a.s-stern:hover, a.s-stern:focus-visible { text-decoration: underline; }
.s-fussnote .s-stern { font-size: 1em; vertical-align: baseline; }
.s-preis ul { list-style: none; padding: 0; margin: 12px 0 18px; color: var(--text-leise); flex: 1; }
.s-preis li { padding: 4px 0; }
/* Alle Knöpfe der Preiskarten gleich breit und gleich hoch */
.s-preis .s-knopf { width: 100%; box-sizing: border-box; }
.s-preis li::before { content: "✓"; color: var(--gruen); font-weight: 700; margin-right: 8px; }
.s-fussnote { color: var(--text-schwach); font-size: .9rem; margin: 18px 0 0; }
.s-fussnote a { color: var(--text-leise); }

/* Fragen */
.s-fragen { max-width: 780px; }
.s-fragen details { border-bottom: 1px solid var(--linie); padding: 4px 0; }
.s-fragen summary { cursor: pointer; font-weight: 600; font-size: 1.05rem; padding: 14px 0; list-style-position: outside; }
.s-fragen details p { margin: 0 0 16px; color: var(--text-leise); }

/* Schluss und Fuß */
.s-schluss { text-align: center; }
.s-schluss .s-knoepfe { justify-content: center; }
.s-schluss .s-unter { margin-left: auto; margin-right: auto; }
.s-fuss { padding: 32px 0 48px; color: var(--text-schwach); font-size: .9rem; border-top: 1px solid var(--linie); }
.s-fuss .s-rahmen { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; }
.s-fuss nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.s-fuss a { color: var(--text-leise); text-decoration: none; }
.s-fuss a:hover { color: var(--text); }

/* Logo hell/dunkel und Sprungmarke – auch dort, wo style.css sie nicht kennt */
.startseite .logo-dunkel { display: none; }
@media (prefers-color-scheme: dark) { .startseite .logo-hell { display: none; } .startseite .logo-dunkel { display: block; } }
.startseite .sprungmarke { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--marke); color: var(--marke-auf); padding: 10px 14px; border-radius: var(--s-rund-klein); }
.startseite .sprungmarke:focus { top: 12px; }

/* Auswahl Monatlich/Jährlich oben in jeder Preiskarte (js/preise.js) */
.s-zahlweise { display: flex; gap: 4px; padding: 3px; margin: 0 0 10px; border: 1px solid var(--linie); border-radius: var(--s-rund-klein); background: var(--grund); }
.s-zahlweise[hidden] { display: none; }
.s-zahlweise button { flex: 1; min-height: 34px; border: 0; border-radius: calc(var(--s-rund-klein) - 3px); background: transparent; color: var(--text-leise); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; }
.s-zahlweise button[aria-pressed="true"] { background: var(--marke); color: var(--marke-auf); }
.s-zahlweise button:focus-visible { outline: 2px solid var(--marke); outline-offset: 2px; }
.s-geschenkt { margin: 0; font-size: .85rem; font-weight: 600; color: var(--gruen); }