/* Startseite, Fassung 5 (08.11.2026): ruhiger Aufbau nach dem Vorbild von
   Produktseiten wie bei Apple. Große Sätze, viel Weißraum, Fotos über die
   ganze Breite, ein Abschnitt, der beim Scrollen stehen bleibt und den Anruf
   erzählt. Alle Größen fließen mit Breite UND Höhe des Fensters (clamp, vw,
   svh), damit Handy hochkant, Tablet, Laptop und Breitbild gleich gut aussehen.
   Bewegung: js/start.js, ohne Skript ist alles sichtbar. */
.startseite {
  --s-tief: #1d1d1f; --s-grau: #6e6e73; --s-hell: #f5f5f7; --s-nacht: #000;
  --s-rund: clamp(14px, 1.6vw, 24px);
  --s-weit: clamp(1200px, 78vw, 1760px);
  --s-luft: clamp(72px, 12vw, 180px);
  --s-h1: clamp(40px, min(8vw, 11svh), 112px);
  --s-h2: clamp(32px, min(5.6vw, 9svh), 80px);
  --s-lead: clamp(17px, 1.5vw, 24px);
  color: var(--s-grau);
}
.startseite .rahmen { max-width: var(--s-weit); }
.startseite h1, .startseite h2, .startseite h3 { color: var(--s-tief); letter-spacing: -.02em; }
.startseite h2 { font-size: var(--s-h2); line-height: 1.05; font-weight: 600; }
.s-mitte { text-align: center; }
/* Telefonbuch-Abgleich */
.s-telefonbuch { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); align-items: center; padding-block: var(--s-luft) 0; }
.s-telefonbuch h2 { font-size: clamp(32px, min(4.2vw, 8svh), 64px); }
.s-tb-text p { font-size: var(--s-lead); line-height: 1.5; margin-top: 20px; max-width: 30ch; }
.s-tb-quellen { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.s-tb-quellen li { font-size: 14px; color: var(--s-tief); background: var(--s-hell); padding: 7px 14px; border-radius: 999px; }
.s-tb-fakten { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); margin: clamp(24px, 4vw, 56px) 0 0; border-top: 1px solid var(--linie); padding-top: clamp(24px, 3vw, 40px); }
.s-tb-fakten dt { font-size: clamp(19px, 1.6vw, 24px); font-weight: 600; color: var(--s-tief); letter-spacing: -.01em; }
.s-tb-fakten dd { margin: 6px 0 0; font-size: 16px; }
/* Wunsch: fehlendes Programm oder fehlende Funktion */
.s-wunsch { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 24px; margin-top: clamp(40px, 6vw, 80px); padding-block: clamp(24px, 3vw, 36px); border-top: 1px solid var(--linie); }
.s-wunsch p { font-size: var(--s-lead); color: var(--s-tief); font-weight: 600; }
.s-mitte p { margin: 20px auto 0; max-width: 46ch; font-size: var(--s-lead); line-height: 1.5; }
.s-klein { font-size: 14px; color: var(--s-grau); margin-top: 28px; }

/* ── 1 Startbild ─────────────────────────────────── */
.s-held { position: relative; height: calc(100svh - 60px); min-height: 520px; max-height: 1400px; overflow: hidden; background: #2b3036; color: #fff; display: flex; align-items: flex-end; }
.s-held-foto, .s-held-foto img { position: absolute; inset: 0; width: 100%; height: 100%; }
.s-held-foto img { object-fit: cover; object-position: 50% 40%; transform-origin: 50% 40%; will-change: transform; }
.s-held::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .05) 30%, rgba(0, 0, 0, .62) 100%), linear-gradient(90deg, rgba(0, 0, 0, .35), transparent 60%); pointer-events: none; }
.s-held-text { position: relative; z-index: 1; width: 100%; padding-bottom: clamp(40px, 9svh, 120px); }
.s-held h1 { color: #fff; font-size: var(--s-h1); line-height: 1.02; font-weight: 600; letter-spacing: -.03em; max-width: 12ch; }
.s-held p { font-size: var(--s-lead); margin-top: clamp(14px, 2svh, 24px); color: rgba(255, 255, 255, .88); }
.s-held .aktionen { margin-top: clamp(22px, 4svh, 40px); }

/* ── 2 Aussage ───────────────────────────────────── */
.s-aussage { padding-block: var(--s-luft); }
.s-aussage p { font-size: clamp(26px, min(4.2vw, 7svh), 60px); line-height: 1.18; font-weight: 600; letter-spacing: -.02em; color: var(--s-tief); max-width: 24ch; margin: 0 auto; text-align: center; }
.js .s-aussage p span { color: #d2d2d7; transition: color .35s; }
.js .s-aussage p span.an { color: var(--s-tief); }

/* ── 3 Ablauf, bleibt beim Scrollen stehen ───────── */
.s-ablauf { background: var(--s-hell); }
.js .s-ablauf { height: 360svh; }
.s-ablauf-halter { padding-block: var(--s-luft); }
.js .s-ablauf-halter { position: sticky; top: 60px; height: calc(100svh - 60px); padding-block: 0; display: flex; align-items: center; overflow: hidden; }
.s-ablauf-innen { width: 100%; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 96px); align-items: center; }
.s-ablauf-texte { list-style: none; margin: 0; padding: 0; display: grid; }
.s-ablauf-texte li { grid-area: 1 / 1; }
.js .s-ablauf-texte li { opacity: 0; transform: translateY(24px); transition: opacity .5s var(--raus), transform .7s var(--raus); pointer-events: none; }
.js .s-ablauf-texte li.an { opacity: 1; transform: none; pointer-events: auto; }
html:not(.js) .s-ablauf-texte { gap: 40px; }
html:not(.js) .s-ablauf-texte li { grid-area: auto; }
.s-ablauf .zeit { display: inline-block; font-size: 14px; font-weight: 600; color: var(--primaer); font-variant-numeric: tabular-nums; margin-bottom: 14px; }
.s-ablauf h2 { font-size: clamp(30px, min(4.4vw, 7svh), 64px); }
.s-ablauf p { font-size: var(--s-lead); line-height: 1.5; margin-top: 18px; max-width: 34ch; }

.s-geraet { position: relative; width: 100%; max-width: calc((100svh - 220px) * 1.45); justify-self: center; }
.s-geraet-schirm { position: relative; aspect-ratio: 16 / 10; border-radius: var(--s-rund); overflow: hidden; background: #fff; box-shadow: 0 30px 80px rgba(0, 0, 0, .14), 0 0 0 1px rgba(0, 0, 0, .06); }
.s-geraet-schirm img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.js .s-ablauf .s-geraet-schirm img { opacity: 0; transition: opacity .6s ease; }
.js .s-ablauf .s-geraet-schirm img.an { opacity: 1; }
.s-geraet-popup { position: absolute; width: 58%; right: -4%; bottom: -8%; border-radius: calc(var(--s-rund) * .6); box-shadow: 0 24px 60px rgba(0, 0, 0, .25); transition: opacity .5s ease, transform .7s var(--raus); }
.js .s-geraet-popup { opacity: 0; transform: translateY(30px) scale(.96); }
.js .s-geraet-popup.an { opacity: 1; transform: none; }
.s-punkte { display: flex; gap: 8px; justify-content: center; margin-top: clamp(22px, 5svh, 48px); }
.s-punkte i { width: 8px; height: 8px; border-radius: 50%; background: #c7c7cc; transition: background-color .3s, width .3s var(--raus); }
.s-punkte i.an { background: var(--s-tief); width: 24px; border-radius: 4px; }
html:not(.js) .s-punkte { display: none; }

.s-weiter { text-align: center; padding-block: clamp(48px, 7vw, 96px) 0; }
.s-weiter p { font-size: var(--s-lead); color: var(--s-tief); font-weight: 600; margin-bottom: 18px; }

/* ── 4 Foto und Satz ─────────────────────────────── */
.s-geteilt { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; margin-top: var(--s-luft); min-height: min(100svh, 1000px); }
.s-geteilt-foto { position: relative; overflow: hidden; background: #ddd; }
.s-geteilt-foto img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; object-position: 50% 30%; will-change: transform; }
.s-geteilt-text { align-self: center; padding: clamp(40px, 7vw, 120px); max-width: 720px; }
.s-geteilt-text p { font-size: var(--s-lead); line-height: 1.5; margin-top: 24px; }
.s-zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: clamp(32px, 6svh, 64px) 0 0; }
.s-zahlen div { display: flex; flex-direction: column-reverse; gap: 6px; }
.s-zahlen dt { font-size: 14px; line-height: 1.35; }
.s-zahlen dd { margin: 0; font-size: clamp(32px, 4vw, 56px); font-weight: 600; color: var(--s-tief); letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }

/* ── 5 Self-Service, dunkel ──────────────────────── */
.s-dunkel { background: var(--s-nacht); color: #a1a1a6; padding-block: var(--s-luft); margin-top: var(--s-luft); overflow: hidden; }
.s-dunkel h2, .s-dunkel h3 { color: #f5f5f7; }
.s-gross { width: min(var(--s-weit), 92vw); margin: clamp(48px, 8vw, 110px) auto 0; transform-origin: 50% 0; }
.s-gross img { width: 100%; height: auto; border-radius: var(--s-rund); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 40px 120px rgba(14, 113, 184, .25); }
.s-vier { list-style: none; margin: clamp(48px, 7vw, 100px) auto 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
.s-vier h3 { font-size: clamp(19px, 1.6vw, 24px); margin-bottom: 8px; }
.s-vier p { font-size: 16px; line-height: 1.5; }
.s-alle { display: flex; justify-content: center; margin-top: clamp(32px, 5vw, 64px); }
.s-mehr { margin-top: clamp(40px, 5vw, 64px); padding-top: 24px; border-top: 1px solid #333336; text-align: center; font-size: var(--s-lead); color: #f5f5f7; font-weight: 600; }

/* ── 6 Programme ─────────────────────────────────── */
.s-programme { padding-block: var(--s-luft); overflow: hidden; }
.s-programme h2 span { color: var(--s-grau); }
.s-laufband { margin-top: clamp(40px, 7vw, 90px); display: grid; gap: clamp(10px, 1.4vw, 20px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
/* Laufband stockte (Meldung 09.11.): Mit flex-gap fehlt hinter der letzten
   Kopie ein halber Abstand, -50 % trifft den Anfang der zweiten Kopie nicht
   genau und die Schleife springt bei jeder Runde. Deshalb Abstand als
   padding je Eintrag (beide Hälften exakt gleich breit) und eine eigene
   Ebene für die Bewegung. */
.s-reihe { display: flex; width: max-content; animation: laufen 48s linear infinite; will-change: transform; backface-visibility: hidden; }
.s-reihe.rueck { animation-direction: reverse; animation-duration: 56s; }
.s-reihe span { padding-right: clamp(28px, 4vw, 64px); font-size: clamp(28px, 4.6vw, 68px); font-weight: 600; color: #d2d2d7; letter-spacing: -.02em; white-space: nowrap; }
.s-reihe span:nth-child(3n+1) { color: var(--s-tief); }
@keyframes laufen { to { transform: translateX(-50%); } }

/* ── 7 Branchen ──────────────────────────────────── */
.s-branchen { background: var(--s-hell); padding-block: var(--s-luft); }
.s-branchen h2 { max-width: 16ch; }
.s-kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin-top: clamp(40px, 6vw, 80px); }
.s-kacheln article { background: #fff; border-radius: var(--s-rund); overflow: hidden; padding-bottom: clamp(24px, 2.4vw, 36px); }
.s-kacheln img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1.2s var(--raus); }
.s-kacheln article:hover img { transform: scale(1.04); }
.s-kacheln h3 { font-size: clamp(21px, 1.8vw, 28px); margin: clamp(20px, 2vw, 28px) clamp(20px, 2.2vw, 32px) 10px; }
.s-kacheln p { font-size: 16px; line-height: 1.55; margin: 0 clamp(20px, 2.2vw, 32px); }

/* ── 8 Daten bleiben beim Kunden ─────────────────
   Weiß, weil die Branchen davor grau sind. Links der Satz, rechts zwei Orte:
   „Bei Ihnen“ groß und gefüllt, „Bei uns“ klein und nur umrandet – die
   Größe zeigt schon, wo die Daten liegen. */
.s-daten { padding-block: var(--s-luft); }
.s-daten-raster { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.s-daten-text h2 { font-size: clamp(32px, min(4.2vw, 8svh), 64px); max-width: 12ch; }
.s-daten-text p { font-size: var(--s-lead); line-height: 1.5; margin: 20px 0 28px; max-width: 34ch; }
.s-orte { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr); gap: clamp(12px, 1.4vw, 20px); align-items: start; }
.s-ort { border-radius: var(--s-rund); padding: clamp(24px, 2.6vw, 40px); }
.s-ort-ihr { background: var(--s-tief); color: #a1a1a6; }
.s-ort-uns { border: 1px solid var(--linie); }
.s-ort h3 { font-size: clamp(21px, 1.9vw, 28px); padding-bottom: clamp(14px, 1.4vw, 20px); border-bottom: 1px solid var(--linie); }
.s-ort-ihr h3 { color: #f5f5f7; border-color: #3a3a3c; }
.s-ort ul { list-style: none; margin: 0; padding: 0; }
.s-ort li { display: grid; gap: 4px; padding-block: clamp(14px, 1.4vw, 20px); }
.s-ort li + li { border-top: 1px solid #3a3a3c; }
.s-ort-uns li + li { border-top-color: var(--linie); }
.s-ort b { font-size: 17px; font-weight: 600; color: var(--s-tief); }
.s-ort-ihr b { color: #f5f5f7; }
.s-ort li span { font-size: 15px; line-height: 1.5; }

/* ── 9 Pakete ────────────────────────────────────── */
.s-pakete { padding-block: var(--s-luft); }
.s-preise { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin-top: clamp(40px, 6vw, 80px); }
.s-preise > div { background: var(--s-hell); border-radius: var(--s-rund); padding: clamp(28px, 3vw, 44px); }
.s-preise > div.empfohlen { background: var(--s-tief); color: #a1a1a6; }
.s-preise .empfohlen h3, .s-preise .empfohlen .preis b { color: #fff; }
.s-preise h3 { font-size: clamp(22px, 2vw, 28px); display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.s-preise h3 span { font-size: 12px; font-weight: 600; letter-spacing: 0; color: #fff; background: var(--primaer); padding: 4px 10px; border-radius: 999px; }
.s-preise .preis { margin: 18px 0 16px; font-size: 15px; }
.s-preise .preis b { font-size: clamp(44px, 5vw, 72px); color: var(--s-tief); letter-spacing: -.03em; font-weight: 600; line-height: 1; margin-right: 6px; }
.s-preise p { font-size: 16px; line-height: 1.55; }
.s-pakete .s-klein { text-align: center; }
.s-mitte-knoepfe { justify-content: center; margin-top: 24px; }

/* ── 10 Kontakt ──────────────────────────────────── */
.s-kontakt { padding-block: 0 var(--s-luft); }
.s-kontakt-raster { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 110px); align-items: center; }
.s-kontakt-foto img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--s-rund); }
.s-kontakt p { font-size: var(--s-lead); line-height: 1.5; margin: 22px 0 32px; max-width: 40ch; }
.s-kontakt .s-klein { font-size: 14px; margin: 28px 0 0; }

/* ── Schmal / hochkant ───────────────────────────── */
@media (max-width: 1080px) {
  .s-vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px), (max-aspect-ratio: 1/1) {
  .s-ablauf-innen { grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 4svh, 40px); align-content: center; }
  .s-ablauf-texte { order: 2; text-align: center; }
  .s-ablauf p { margin-inline: auto; }
  .s-geraet { max-width: min(100%, calc((100svh - 380px) * 1.6)); }
  .s-geraet-popup { right: 2%; bottom: -10%; width: 62%; }
  .s-geteilt { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .s-geteilt-foto { aspect-ratio: 3 / 2; }
  .s-geteilt-text { padding: clamp(40px, 9vw, 80px) max(16px, 5vw); }
  .s-kacheln, .s-preise, .s-tb-fakten { grid-template-columns: minmax(0, 1fr); }
  .s-telefonbuch { grid-template-columns: minmax(0, 1fr); }
  .s-kontakt-raster { grid-template-columns: minmax(0, 1fr); }
  .s-daten-raster { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 960px) { .startseite .kopf .rahmen { min-height: 56px; } }
@media (max-width: 560px) {
  .s-vier { grid-template-columns: minmax(0, 1fr); }
  .s-zahlen { gap: 14px; }
  .s-held .aktionen .knopf { flex: 1 1 auto; justify-content: center; }
}
/* Flache Fenster (Handy quer, kleine Laptops): Ablauf nebeneinander, kompakt */
@media (max-height: 560px) and (min-aspect-ratio: 1/1) {
  .s-held { min-height: 100svh; }
  .s-ablauf h2 { font-size: clamp(24px, 6svh, 40px); }
  .s-ablauf p { font-size: 15px; margin-top: 10px; }
  .s-punkte { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .s-reihe { animation: none; flex-wrap: wrap; width: auto; justify-content: center; gap: 8px 0; }
  .s-reihe span { padding-inline: 14px; }
  .s-laufband { -webkit-mask-image: none; mask-image: none; }
  .s-reihe span { font-size: clamp(22px, 3vw, 36px); }
  .s-held-foto img, .s-geteilt-foto img { transform: none !important; }
}

/* ── Scrollen rastet an den Abschnitten ein (09.11.2026) ──
   Nutzermeldung: man landete zu weit oder zu kurz und Inhalt war
   abgeschnitten. "proximity": nur nahe einer Kante rastet es, lange
   Abschnitte lassen sich weiter frei lesen. Der stehende Ablauf hat je
   Schritt eine eigene Raststelle (.s-raste, Mitte des Schritts). */
html:has(body.startseite) { scroll-snap-type: y proximity; }
.s-held, .s-aussage, .s-weiter, .s-telefonbuch, .s-geteilt, .s-dunkel, .s-programme, .s-branchen, .s-daten, .s-pakete, .s-kontakt { scroll-snap-align: start; scroll-margin-top: var(--kopf); }
.s-held { scroll-margin-top: 0; }
.s-ablauf { position: relative; }
.s-raste { position: absolute; left: 0; width: 1px; height: 1px; scroll-snap-align: start; pointer-events: none; }
.s-raste:nth-of-type(1) { top: calc((360svh - 100vh) * .17); }
.s-raste:nth-of-type(2) { top: calc((360svh - 100vh) * .5); }
.s-raste:nth-of-type(3) { top: calc((360svh - 100vh) * .83); }
html:not(.js) .s-raste { display: none; }
@media (prefers-reduced-motion: no-preference) { html:has(body.startseite) { scroll-behavior: smooth; } }
@media (max-width: 760px) {
  .s-orte { grid-template-columns: minmax(0, 1fr); }
}