/* Aufgeräumt 19.10.2026 vor dem Live-Gang: nur noch die entschiedene Fassung B Kartenstapel + Liste 3 „gezeichnete Linie“ (A, C, Listen 1/2, Umschalter entfernt).
   Services: Leistungen neu (Thomas 18.10.: „ich find die page furchtbar. mit all diesen kleinen punkten vor den texten … eine nette animation der
   blöcke wäre gut“ → „ich hätte gern A, B und C mit einem button zum umschalten“). Ein Inhalt (services/index.html #leistungen), drei Darstellungen:
   A vier Kapitel (ruhig: Linie zeichnet sich, große Nummer steigt, Liste zweispaltig)  ·  B Kartenstapel (Karten bleiben stehen, die nächste schiebt
   sich darüber, Leistungen als Etiketten)  ·  C Kreise führen (vier Kreise links bleiben stehen, der aktuelle füllt sich grün).
   html[data-sv] setzt ein Inline-Skript; Bewegung nur mit html.bew. Blocs erzwingt Textfarben → eigene Farben mit !important. */
.page-container { overflow: clip !important; } /* sticky braucht das (Blocs: overflow hidden) */
#leistungen { padding-top: 0; padding-bottom: 96px; }
.sv-leistung { position: relative; scroll-margin-top: 110px; --sv-text: var(--swatch-var-5803); --sv-akzent: var(--swatch-var-2425); --sv-linie: rgba(28, 25, 23, .14); color: var(--sv-text); }
.sv-nr { display: block; font-family: "FrauncesFein", Georgia, serif; font-weight: 300; color: var(--sv-akzent) !important; line-height: 1; }
.sv-titel { font-family: "FrauncesFein", Georgia, serif !important; font-weight: 250 !important; font-size: clamp(30px, 1.2rem + 1.6vw, 44px) !important; line-height: 1.1 !important;
	color: var(--sv-text) !important; margin: 0 0 16px !important; text-wrap: balance; }
.sv-text { color: var(--sv-text) !important; opacity: .86; margin: 0 !important; max-width: 560px; }
.sv-punkte { list-style: none; margin: 0; padding: 0; }
.sv-punkte li { color: var(--sv-text) !important; }
.sv-btn { margin-top: 28px; }

/* ---------- B: Kartenstapel ---------- */
html[data-sv="b"] .sv-liste { display: flex; flex-direction: column; gap: 28px; }
html[data-sv="b"] .sv-leistung { position: sticky; top: calc(108px + var(--i, 0) * 16px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px;
	align-items: start; min-height: min(540px, calc(100vh - 170px)); padding: 48px; border: 1px solid var(--swatch-var-2425); border-radius: 6px;
	background: var(--sv-grund); transform: scale(var(--sv-s, 1)); transform-origin: center top; }
html[data-sv="b"] .sv-leistung::after { content: ""; position: absolute; inset: 0; border-radius: 6px; background: #000; opacity: calc(var(--sv-d, 0) * .22); pointer-events: none; }
html[data-sv="b"] .sv-leistung:nth-child(2) { --i: 1; } html[data-sv="b"] .sv-leistung:nth-child(3) { --i: 2; } html[data-sv="b"] .sv-leistung:nth-child(4) { --i: 3; }
html[data-sv="b"] .sv-ton-hell { --sv-grund: var(--swatch-var-3854); }
html[data-sv="b"] .sv-ton-gruen { --sv-grund: var(--swatch-var-2425); --sv-text: var(--swatch-var-3854); --sv-akzent: var(--swatch-var-3854); --sv-linie: rgba(253, 250, 246, .45); }
html[data-sv="b"] .sv-ton-dunkel { --sv-grund: var(--swatch-var-5803); --sv-text: var(--swatch-var-3854); --sv-akzent: var(--swatch-var-2425); --sv-linie: rgba(253, 250, 246, .35); }
html[data-sv="b"] .sv-ton-gruen .sv-btn, html[data-sv="b"] .sv-ton-dunkel .sv-btn { background: var(--swatch-var-3854) !important; border-color: var(--swatch-var-3854) !important; color: var(--swatch-var-5803) !important; }
html[data-sv="b"] .sv-nr { font-size: 18px; margin-bottom: 26px; }
html[data-sv="b"] .sv-punkte { display: flex; flex-wrap: wrap; gap: 10px; align-content: flex-start; padding-top: 44px; }
html[data-sv="b"] .sv-punkte li { border: 1px solid var(--sv-linie); border-radius: 999px; padding: 9px 16px; font-size: 15px; line-height: 1.3; }
html.bew[data-sv="b"] .sv-punkte li { opacity: 0; transform: translateY(10px); transition: opacity .7s ease calc(.2s + var(--n, 0) * .06s), transform .7s cubic-bezier(.44, 0, .28, .99) calc(.2s + var(--n, 0) * .06s); }
html.bew[data-sv="b"] .sv-da .sv-punkte li { opacity: 1; transform: none; }
@media (max-width: 991.98px) {
	/* Handy: Karten sind höher als der Bildschirm → kein Stapeln (die nächste Karte deckte Etiketten + Button zu), stattdessen wachsen sie beim Hereinscrollen auf */
	html[data-sv="b"] .sv-leistung { position: relative; top: auto; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 30px 24px; min-height: 0; transform: none; }
	html[data-sv="b"] .sv-leistung::after { display: none; }
	html.bew[data-sv="b"] .sv-leistung { opacity: 0; transform: scale(.94) translateY(24px); transition: opacity .9s ease, transform 1s cubic-bezier(.44, 0, .28, .99); }
	html.bew[data-sv="b"] .sv-leistung.sv-da { opacity: 1; transform: none; }
	html[data-sv="b"] .sv-punkte { padding-top: 26px; }
}

/* ---------- B: rechte Liste in drei Darstellungen (Thomas 18.10.: „variante B klasse … aber die buttons rechts finde ich furchtbar … 3 varianten für den
   rechten teil mit den einzelnen positionen“). html[data-svp]: 1 Register · 2 Große Schrift · 3 Gezeichnete Linie. Etiketten (Pillen) entfallen. ---------- */
html[data-sv="b"][data-svp] .sv-punkte { display: block; counter-reset: svp; }
html[data-sv="b"][data-svp] .sv-punkte li { border: 0; border-radius: 0; padding: 0; counter-increment: svp; }
/* 3 Gezeichnete Linie: senkrechte Linie zeichnet sich, an jeder Position geht ein Punkt auf */
html[data-sv="b"][data-svp="3"] .sv-punkte { position: relative; padding-left: 30px; }
html[data-sv="b"][data-svp="3"] .sv-punkte::before { content: ""; position: absolute; left: 5px; top: calc(44px + 18px); bottom: 18px; width: 1px; background: var(--sv-akzent); transform-origin: top center; }
html[data-sv="b"][data-svp="3"] .sv-punkte li { position: relative; padding: 9px 0; font-family: "InterTight-Light", "Helvetica Neue", Arial, sans-serif; font-weight: 300; font-size: 17px; line-height: 1.4; }
html[data-sv="b"][data-svp="3"] .sv-punkte li::before { content: ""; position: absolute; left: -29.5px; top: calc(9px + .7em - 5px); width: 10px; height: 10px; border-radius: 50%;
	background: var(--sv-grund); border: 1px solid var(--sv-akzent); box-sizing: border-box; }
html.bew[data-sv="b"][data-svp="3"] .sv-punkte::before { transform: scaleY(0); transition: transform 1.4s cubic-bezier(.44, 0, .28, .99) .15s; }
html.bew[data-sv="b"][data-svp="3"] .sv-punkte li::before { transform: scale(0); transition: transform .5s cubic-bezier(.44, 0, .28, .99) calc(.3s + var(--n, 0) * .2s), background-color .5s ease calc(.5s + var(--n, 0) * .2s); }
html.bew[data-sv="b"][data-svp="3"] .sv-da .sv-punkte::before { transform: none; }
html.bew[data-sv="b"][data-svp="3"] .sv-da .sv-punkte li::before { transform: none; background-color: var(--sv-akzent); }
@media (max-width: 991.98px) {
	html[data-sv="b"][data-svp="3"] .sv-punkte::before { top: calc(26px + 18px); }
}
/* Liste 3 rückwärts (Thomas 18.10.: „können wir es retour auch wieder animieren, in die gegenrichtung? die punkte rechts, die linien mit den punkten“):
   ohne .sv-da (Karte läuft beim Zurückscrollen unten hinaus) verschwinden Text + Punkte von unten nach oben, danach zieht sich die Linie zurück.
   Vorwärts-Zeiten stehen bei .sv-da, Rückwärts-Zeiten im Grundzustand (--m = umgekehrte Reihenfolge, js/leistungen.js). */
html.bew[data-sv="b"][data-svp="3"] .sv-punkte li { transition: opacity .45s ease calc(var(--m, 0) * .07s), transform .45s cubic-bezier(.44, 0, .28, .99) calc(var(--m, 0) * .07s); }
html.bew[data-sv="b"][data-svp="3"] .sv-punkte li::before { transition: transform .4s cubic-bezier(.44, 0, .28, .99) calc(var(--m, 0) * .08s), background-color .3s ease calc(var(--m, 0) * .08s); }
html.bew[data-sv="b"][data-svp="3"] .sv-punkte::before { transition: transform 1s cubic-bezier(.44, 0, .28, .99) .45s; }
html.bew[data-sv="b"][data-svp="3"] .sv-da .sv-punkte li { transition: opacity .7s ease calc(.2s + var(--n, 0) * .06s), transform .7s cubic-bezier(.44, 0, .28, .99) calc(.2s + var(--n, 0) * .06s); }
html.bew[data-sv="b"][data-svp="3"] .sv-da .sv-punkte li::before { transition: transform .5s cubic-bezier(.44, 0, .28, .99) calc(.3s + var(--n, 0) * .2s), background-color .5s ease calc(.5s + var(--n, 0) * .2s); }
html.bew[data-sv="b"][data-svp="3"] .sv-da .sv-punkte::before { transition: transform 1.4s cubic-bezier(.44, 0, .28, .99) .15s; }
/* alter Anker #hospitality zeigt auf Growth (#growth, Brief v4.1, 24.10.2026) */
.sv-alias { position: absolute; top: 0; left: 0; width: 1px; height: 1px; scroll-margin-top: 110px; pointer-events: none; }

/* Thomas 24.10.: „die 4 bereiche in services haben zu viel negative space … nicht den kompletten leerraum abschneiden, sondern schon noch etwas behalten
   und vielleicht den inhalt zentrieren“ → Karte 540 → 440 px (Inhalt ≈ 340 px, rund die Hälfte der Luft bleibt), Inhalt senkrecht mittig. Handy unverändert. */
@media (min-width: 992px) {
	html[data-sv="b"] .sv-leistung { min-height: min(440px, calc(100vh - 170px)); align-content: center; }
}
/* 25.10. Thomas: Fragen weicher auf/zu, nur eine offen (data-bs-parent im HTML) – gleiche Dauer und Kurve wie js/details-weich.js auf der Startseite */
#services-faq .collapsing { transition: height .48s cubic-bezier(.44, 0, .28, .99); }
@media (prefers-reduced-motion: reduce) { #services-faq .collapsing { transition: none; } }