/* =====================================================================
   pages/leistungen.css · Team Leistungen (Übersicht, Leistungsseiten, B12 GROW/SYNC, Franken Digital)
   Stand Gesamtentwurf v2: Seitenkopf-System „Schichtung“ nach den Unterseiten-Skizzen v1 (freigegeben 03.11.2026).
   Baut auf b12.css auf (.kopf, .feld, .h1u, .feldsatz, .aktion, .linien, .rastet, .fakten, .fragen, .luecken, .flut).
   Regeln: kein uppercase, keine Verläufe, keine Akzentränder (Linien 1 px als Trennung zwischen Zeilen),
   kein backdrop-filter, kein 100vw, Bewegung nur über b12.js (transform/opacity/clip-path), Reduced Motion = Endzustand.
   ===================================================================== */

/* ---------- gemeinsam ---------- */
/* Abschnittskopf: H2 links, Einleitung rechts unten (Skizzen 02–04) */
.sek-kopf { row-gap: 24px; }
.sek-kopf__intro { max-width: 32em; }
.sek-kopf__intro p + p { margin-top: 12px; }
@media (min-width: 1024px) {
  .sek-kopf .h2 { grid-column: 1 / 8; }
  .sek-kopf__intro { grid-column: 9 / 13; align-self: end; }
}
/* Fragen und Zwischentitel: Komposita nur an Bindestrichen trennen (frühere Anfrage K1, im Kern entfallen) */
.typ-leistung .frage h3, .typ-leistungen-uebersicht .frage h3, .typ-franken-digital .frage h3,
.station h3, .warum .fakt__wort, .bausteine__liste h3, .p-schritte h3 { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: break-word; }
/* Liste mit eingerastetem Stück (Kosten, Website-Check, Kapitel) */
.umfang { margin-top: 28px; border-bottom: 1px solid currentColor; }
.umfang li { display: flex; align-items: flex-start; gap: 16px; border-top: 1px solid currentColor; padding-block: 14px 16px; }
.umfang .slot { font-size: 32px; margin-top: 3px; }
.umfang span { flex: 1; }
.umfang .ist-eingerastet .slot__fill, .umfang li.ist-eingerastet .slot__fill { transform: scale(1); }
.auf-dunkel .umfang, .auf-dunkel .umfang li { border-color: var(--b-linie-dunkel); }

/* =====================================================================
   LEISTUNGSSEITE (Skizze 02) und PRODUKTSEITE (Skizze 03)
   ===================================================================== */
.l-feld__text { margin-top: 24px; max-width: 38em; }
.l-feld .aktion, .p-feld .aktion { margin-top: 32px; }
.l-feld__dazu { margin-top: 48px; }
.l-feld__dazu .linien { margin-top: 12px; }
.l-feld__dazu li { padding-block: 13px; }
@media (min-width: 1024px) {
  .l-feld__haupt { grid-column: 1 / 8; }
  .l-feld__dazu { grid-column: 9 / 13; margin-top: 0; align-self: start; padding-top: 6px; }
}

/* ---------- Beleg-Projekt auf der Feldkante (Amber/Weiß) ---------- */
.feld--mitbild .feld__inhalt { padding-bottom: 88px; }
.beleg { position: relative; margin-top: -48px; }
.beleg__bild img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.beleg__text { margin-top: 24px; display: grid; gap: 10px; justify-items: start; max-width: 34em; }
.beleg__text .textlink { margin-top: 6px; }
/* Motiv in Gelb/Orange: beginnt unter dem Feld auf Weiß, damit es nicht direkt an Amber stößt */
.beleg--unter { margin-top: 0; padding-top: 64px; }
@media (min-width: 1024px) {
  .feld--mitbild .feld__inhalt { padding-bottom: 240px; }
  .beleg { margin-top: -184px; }
  .beleg--unter { margin-top: 0; padding-top: 96px; }
  .beleg__bild { grid-column: 4 / 13; grid-row: 1; }
  .beleg__text { grid-column: 1 / 4; grid-row: 1; align-self: end; margin-top: 0; padding-bottom: 4px; }
}

/* ---------- Bausteine (Leistung): drei Spalten mit Linie oben ---------- */
.bausteine__liste { margin-top: 56px; display: grid; gap: 0 24px; }
.bausteine__liste li { border-top: 1px solid var(--b-schwarz); padding-block: 24px 32px; display: grid; gap: 12px; align-content: start; }
@media (min-width: 768px) { .bausteine__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .bausteine__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Produkt: Preisschild im Feld ---------- */
.preis { margin-top: 48px; border-top: 1px solid var(--b-schwarz); padding-top: 16px; display: grid; gap: 6px; align-content: start; }
.preis__wert { font: 800 clamp(56px, 42px + 3.2vw, 88px)/1 var(--f-display); font-stretch: 100%; letter-spacing: -.02em; margin-top: 8px; white-space: nowrap; }
.preis__wert--m { font-size: clamp(36px, 30px + 1.6vw, 56px); margin-top: 4px; }
.preis__zu { font-size: 17px; }
.preis__stufen { margin-block: 8px 12px; }
.preis__stufen li { display: grid; padding-block: 14px; }
@media (min-width: 1024px) {
  .p-feld .l-feld__haupt { grid-column: 1 / 8; }
  .preis { grid-column: 9 / 13; margin-top: 0; }
}

/* ---------- Produkt: vier Schritte mit Stück (rastet beim Scrollen ein, b12.js .rastet) ---------- */
.p-schritte { margin-top: 56px; display: grid; gap: 0 24px; }
.p-schritte li { border-top: 1px solid var(--b-schwarz); padding-block: 24px 32px; display: grid; gap: 12px; align-content: start; }
.p-schritte h3 { display: flex; gap: 12px; align-items: baseline; }
.p-schritte .slot { width: 18px; height: 20.8px; transform: translateY(2px); }
@media (min-width: 768px) { .p-schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .p-schritte { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Produkt: „Was es kostet“ als Leistungsliste (Preis steht im Kopf) ---------- */
.kosten { padding-top: 0; }
.kosten .raster { row-gap: 40px; }
.kosten__bedingungen { margin-top: 28px; max-width: 34em; }
.kosten__bedingungen p + p { margin-top: 16px; }
.kosten__fuss { margin-top: 24px; display: grid; gap: 12px; justify-items: start; max-width: 40em; }
.kosten__umfang { margin-top: 0; }
@media (min-width: 1024px) {
  .kosten__text { grid-column: 1 / 7; }
  .kosten__umfang { grid-column: 8 / 13; align-self: start; padding-top: 8px; }
}

/* ---------- Ablauf: Weg mit Sechseck-Stationen (Schwarz) ---------- */
.ablauf { background: var(--b-schwarz); color: var(--b-weiss); padding-block: var(--sek); }
.weg { margin-top: 64px; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 0; }
.station { position: relative; display: grid; align-content: start; grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; padding-bottom: 36px; }
.station__platz { grid-row: 1 / span 2; display: block; font-size: 52px; position: relative; z-index: 1; }
.station h3 { font: 700 clamp(21px, 19.6px + .38vw, 24px)/1.2 var(--f-display); font-stretch: 100%; padding-top: 6px; }
.station__text p { margin-top: 10px; color: var(--b-grau-dunkel); font-size: 17px; }
/* Verbindungslinie (1 px) zwischen den Stationen: mobil senkrecht unter dem Stück */
.station::after {
  content: ""; position: absolute; left: calc(52px * .3 - .5px); top: calc(52px * .6 * 1.1547 + 8px); bottom: 8px; width: 1px;
  background: var(--b-linie-dunkel);
}
.station:last-child::after { display: none; }
.ablauf__zusatz { margin-top: 40px; max-width: 46em; color: var(--b-grau-dunkel); }
.ablauf__zusatz .meta { display: block; color: var(--b-weiss); margin-bottom: 6px; }
.ablauf__zusatz strong { color: var(--b-weiss); }
@media (min-width: 900px) {
  .weg { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); column-gap: 24px; row-gap: 56px; }
  .weg[style*="--n: 6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .station { grid-template-columns: minmax(0, 1fr); padding-bottom: 0; }
  .station__platz { grid-row: auto; margin-bottom: 24px; }
  .station::after { left: calc(52px * .6 + 12px); right: -12px; top: calc(52px * .6 * 1.1547 / 2); bottom: auto; width: auto; height: 1px; }
  .weg[style*="--n: 6"] .station:nth-child(3)::after { display: none; }
}

/* ---------- Warum: Faktzeilen zweispaltig ---------- */
.warum__fakten { margin-top: 56px; }
@media (min-width: 900px) {
  .warum__fakten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; border-bottom: 0; }
  .warum__fakten .fakt { padding-block: 28px 40px; border-bottom: 1px solid var(--b-schwarz); margin-bottom: -1px; }
  .warum__fakten .fakt p { max-width: 30em; }
}
.warum + .fragen { padding-top: 0; }

/* ---------- Querverweis (B12 GROW / B12 SYNC) ---------- */
.quer { padding-block: 0 var(--sek); background: var(--b-weiss); }
.quer .luecken { margin-top: 0; }
.typ-leistung .fragen + .quer { margin-top: calc(var(--sek) * -1 + 8px); }

/* =====================================================================
   ÜBERSICHT /leistungen/ (Skizze 01): Feld als Register, Leistungen auf Weiß mit Linien
   ===================================================================== */
.r-feld__text { font-size: 20px; line-height: 1.5; max-width: 30em; }
.r-feld .aktion { margin-top: 32px; }
.register { margin-top: 40px; }
.register a { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; column-gap: 14px; row-gap: 2px; padding-block: 14px; text-decoration: none; }
.register a:hover .register__name, .register a:focus-visible .register__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.register .slot { width: 18px; height: 20.8px; }
.register__titel { margin-top: 28px; margin-bottom: 8px; }
.register__preis { margin-left: auto; text-align: right; }
@media (max-width: 599px) {
  .register__preis { grid-column: 2; grid-row: 2; margin-left: 0; text-align: left; }
}
@media (min-width: 1024px) {
  .r-feld__haupt { grid-column: 1 / 6; }
  .register { grid-column: 7 / 13; margin-top: 0; }
}

.plakat .raster { row-gap: 28px; }
.plakat--folge { padding-top: 0; }
.plakat--folge .raster { border-top: 1px solid var(--b-schwarz); padding-top: var(--sek);
  padding-inline: 0; width: calc(100% - 2 * var(--rand)); max-width: var(--innen); }   /* Linie genau auf der Inhaltskante */
.plakat h2 { hyphens: manual; -webkit-hyphens: manual; }
.plakat__text { display: grid; justify-items: start; max-width: 36em; }
.plakat__dazu-titel { margin-top: 28px; }
.plakat__dazu { margin-top: 8px; width: 100%; }
.plakat__dazu li { padding-block: 10px; font: 600 17px/1.3 var(--f-display); font-stretch: 100%; }
.plakat .textlink { margin-top: 20px; }
/* lange Linktexte (frühere Anfrage K2, im Kern entfallen): Pfeil folgt dem letzten Wort statt allein am rechten Rand */
.textlink--lang { display: inline; line-height: 1.6; }
.textlink__ende { white-space: nowrap; }
.textlink--lang svg { display: inline-block; vertical-align: -2px; margin-left: 10px; }
@media (min-width: 1024px) {
  .plakat h2 { grid-column: 1 / 8; }
  .plakat__text { grid-column: 9 / 13; }
}

/* Direkt buchbar: zwei Angebote nebeneinander, Linie oben, auf Weiß */
.angebote { margin-top: 56px; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 24px; }
.angebot { border-top: 1px solid var(--b-schwarz); padding-block: 24px 48px; display: grid; justify-items: start; align-content: start; }
.angebot__name { font: 800 clamp(32px, 24px + 2.1vw, 56px)/1 var(--f-display); font-stretch: var(--stretch); letter-spacing: -.01em; }
.angebot__unter { margin-top: 12px; font: 250 clamp(22px, 19.5px + .7vw, 30px)/1.25 var(--f-display); font-stretch: 100%; }
.angebot__text { margin-top: 16px; max-width: 32em; }
.angebot__betrag { margin-top: 32px; font: 800 clamp(44px, 28.51px + 4.131vw, 88px)/1 var(--f-display); font-stretch: var(--stretch); letter-spacing: -.01em; white-space: nowrap; }
.angebot__einheit { margin-top: 12px; }
.angebot .textlink { margin-top: 24px; }
@media (min-width: 900px) { .angebote { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.buchbar + .fragen { padding-top: 0; }

/* =====================================================================
   FRANKEN DIGITAL (Skizze 04): zwei Stimmen + Preisleiste im Feld
   ===================================================================== */
.fd-stimmen { font: 250 clamp(30px, 14.51px + 4.131vw, 72px)/1.04 var(--f-display); font-stretch: 100%; letter-spacing: -.015em; max-width: 14em; }
.fd-stimmen b { font-weight: 800; font-stretch: var(--stretch); }
.fd-feld__mitte { margin-top: 32px; row-gap: 28px; }
.fd-feld__text { font-size: 20px; line-height: 1.5; max-width: 32em; }
.preisleiste { margin-top: 48px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.preisleiste li { border-top: 1px solid var(--b-schwarz); }
.preisleiste a { display: grid; gap: 4px; padding-block: 14px 6px; text-decoration: none; }
.preisleiste .listentitel { font-size: 19px; hyphens: manual; -webkit-hyphens: manual; }
.preisleiste a:hover .listentitel, .preisleiste a:focus-visible .listentitel { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
@media (min-width: 1024px) {
  .fd-feld__text { grid-column: 1 / 7; }
  .fd-feld__aktion { grid-column: 8 / 13; align-self: end; justify-content: flex-end; }
  .preisleiste { grid-template-columns: repeat(7, minmax(0, 1fr)); margin-top: 64px; }
}

/* ---------- Themen mit Preis ---------- */
.themen__liste { margin-top: 56px; }
.thema { display: grid; gap: 10px; padding-block: 28px 32px; }
.thema h3 a { display: flex; gap: 14px; align-items: center; text-decoration: none; }
.thema h3 a:hover span, .thema h3 a:focus-visible span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.thema .slot { width: 20px; height: 23px; }
.thema__zusatz { margin-top: 6px; padding-left: 34px; }
.thema__text { max-width: 40em; }
@media (hover: hover) { .thema:hover .slot__fill, .thema:focus-within .slot__fill { transform: scale(1); } }
@media (min-width: 1024px) {
  .thema { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: baseline; }
  .thema__kopf { grid-column: 1 / 5; }
  .thema__preis { grid-column: 5 / 8; }
  .thema__text { grid-column: 8 / 13; }
}

/* ---------- Kostenloser Website-Check (Schwarz) ---------- */
.check { background: var(--b-schwarz); color: var(--b-weiss); padding-block: var(--sek); }
.check__raster { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
.check__preis { margin-top: 32px; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.check__betrag { font: 800 clamp(44px, 28.51px + 4.131vw, 88px)/1 var(--f-display); font-stretch: var(--stretch); }
.check__nach { font: 250 clamp(26px, 21.07px + 1.315vw, 40px)/1.2 var(--f-display); font-stretch: 100%; color: var(--b-grau-dunkel); }
.check__inhalt > p { color: var(--b-grau-dunkel); max-width: 34em; }
.check__inhalt > p + .umfang { margin-top: 20px; }
.check__inhalt .umfang + p { margin-top: 24px; }
.check__aktion { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 32px; }
@media (min-width: 1024px) {
  .check__raster { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .check__kopf { grid-column: 1 / 6; }
  .check__inhalt { grid-column: 7 / 13; padding-top: 10px; }
}

/* ---------- Kapitel je Thema: Themenspalte steht (sticky endet im Kapitel) ---------- */
.kapitelfolge { padding-block: var(--sek) 0; background: var(--b-weiss); }
.kapitel { border-top: 1px solid var(--b-schwarz); padding-block: 40px 72px; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
.kapitel__thema { font: 800 clamp(30px, 24.6px + 1.42vw, 48px)/1.08 var(--f-display); font-stretch: var(--stretch); letter-spacing: -.01em; hyphens: manual; -webkit-hyphens: manual; }
.kapitel__preis { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.kapitel__betrag { font: 800 clamp(24px, 21px + .8vw, 32px)/1.1 var(--f-display); font-stretch: 100%; white-space: nowrap; }
.kapitel__nach { font: 500 14px/1.4 var(--f-text); color: var(--b-grau-hell); }
.kapitel__titel { font: 250 clamp(26px, 21.07px + 1.315vw, 40px)/1.2 var(--f-display); font-stretch: 100%; margin-bottom: 20px; }
.kapitel__inhalt > p { max-width: 38em; color: var(--b-grau-hell); }
.kapitel__inhalt > p + p { margin-top: 16px; }
.kapitel__fragen { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px 24px; }
.kapitel__frage h4 { margin: 0; font: 700 clamp(19px, 18px + .3vw, 22px)/1.25 var(--f-display); font-stretch: 100%; }
.kapitel__frage p { margin-top: 8px; color: var(--b-grau-hell); font-size: 17px; }
.kapitel .textlink { margin-top: 24px; }
@media (min-width: 1024px) {
  .kapitel { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; padding-block: 48px 96px; }
  .kapitel__kopf { grid-column: 1 / 5; position: sticky; top: calc(var(--hdr-h) + 40px); }
  .kapitel__inhalt { grid-column: 6 / 13; }
  .kapitel__fragen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Drei Schritte + Preisfrage ---------- */
.schritte { padding-block: 0 var(--sek); background: var(--b-weiss); }
.schritte .wrap > .fehlt__kopf { border-top: 1px solid var(--b-schwarz); padding-top: var(--sek); }
.schritte__liste { margin-top: 56px; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 24px; }
.schritte__liste li { border-top: 1px solid var(--b-schwarz); padding-block: 20px 32px; }
.schritte__wort { font: 800 clamp(32px, 24px + 2.2vw, 56px)/1.05 var(--f-display); font-stretch: var(--stretch); letter-spacing: -.01em; }
.schritte__liste p { margin-top: 12px; color: var(--b-grau-hell); max-width: 24em; }
.schritte__fragen { margin-top: 72px; }
@media (min-width: 900px) { .schritte__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Franken Digital · Formular „Wohin dürfen wir uns melden?“ (#anfrage) nach den Schritten, Linie oben wie .schritte
   (Bausteine .formular aus b12.css; Themenwahl als Linienliste mit Checkbox) */
.anfrage { padding-block: 0 var(--sek); background: var(--b-weiss); }
.anfrage .wrap > .fehlt__kopf { border-top: 1px solid var(--b-schwarz); padding-top: var(--sek); }
.anfrage .formular { margin-top: 56px; max-width: 820px; }