/* Beratungsseite /beratung (neues Design, 30.10.2026) – nur auf dieser Seite geladen (resources/views-v2/cms/frame/v2-head.blade.php).
   Ablauf in vier Schritten, Stichpunkte im Kopf, Paketkarten mit Kernleistungen, Aufklapp-Bereiche (details), Vergleichstabelle,
   Kurzfassungen, FAQ-Gruppen und feste Handy-Leiste. Die Texte stehen vollständig im HTML; aufgeklappt wird mit dem Browser-Element
   details/summary (Tastatur und Bildschirmleser ohne Skript). Hintergründe: Weiß; höchstens eine warme Fläche (Pakete und Buchung). */

.page-beratung {
  --ber-warm: var(--c-flaeche-warm, #fbf3f0);
  --ber-rot-text: var(--ee-rot-dunkel, #a52719);
}

/* ---------- Kopf: drei Stichpunkte ---------- */
.v2-seite .page-beratung .ber-stichpunkte__liste { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: var(--s-3); }
.v2-seite .page-beratung .ber-stichpunkte__liste li { position: relative; margin: 0; padding-left: 2rem; }
.v2-seite .page-beratung .ber-stichpunkte__liste li::before,
.v2-seite .page-beratung .by-servicepackage__kern li::before {
  content: ""; position: absolute; left: 0; top: .3em; width: 1.3rem; height: 1.3rem; border-radius: 50%; background-color: var(--ee-gruen);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: .85rem; }

/* Desktop (ab 64 rem, wie die zweispaltige Bühne): Schnellzugriff „Ihre Beratung in drei Schritten“ und Vertrauenszeile rechts; die drei
   Stichpunkte und der Knopf „Paket wählen“ nur auf dem Handy/Tablet. Umgekehrt zeigt das Handy nur die Vertrauenszeile, nicht die Karte.
   Ausgeblendet wird mit display:none (auch für Bildschirmleser), damit nichts doppelt vorgelesen wird. */
@media (min-width: 64rem) {
  .v2-seite .page-beratung .z-buehne .com-text.ber-stichpunkte, .v2-seite .page-beratung .z-buehne .z-knoepfe { display: none; }
}
@media (max-width: 63.99rem) {
  .v2-seite .page-beratung .z-buehne .z-aufgaben { display: none; }
}

/* ---------- Ablauf in vier Schritten ---------- */
.v2-seite .page-beratung .com-text.ber-schritte > * { max-width: none; }
.v2-seite .page-beratung .ber-schritte__liste { counter-reset: schritt; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .v2-seite .page-beratung .ber-schritte__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .v2-seite .page-beratung .ber-schritte__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.v2-seite .page-beratung .ber-schritte__liste > li { counter-increment: schritt; margin: 0; padding: var(--s-5); background: #fff; border: 1px solid var(--c-linie); border-radius: var(--radius); box-shadow: var(--schatten);
  display: flex; flex-direction: column; gap: var(--s-3); }
.v2-seite .page-beratung .ber-schritte__liste > li::before { content: counter(schritt); display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--ee-rot-dunkel, #a52719); color: #fff; font-weight: 600; line-height: 1; }
.v2-seite .page-beratung .ber-schritt__titel { display: block; font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-kopf); margin: 0; }
.v2-seite .page-beratung .ber-schritte__liste p { margin: 0; }
.v2-seite .page-beratung .ber-schritt__mehr { margin-top: auto; }
/* Einheitlicher Aufklapp-Kopf (wie das FAQ-Akkordeon, inhalt.css „FAQ“): Linien oben und unten, Beschriftung links in Überschriftengröße
   fett, roter Pfeil rechts (dreht beim Öffnen), mindestens 56 px hoch; in Karten nur die Linie oben (kein Doppelrahmen) */
.v2-seite .page-beratung .ber-akk { width: 100%; border-block: 1px solid var(--c-linie); }
.v2-seite .page-beratung :is(.ber-schritte__liste, .by-servicepackage) .ber-akk { border-bottom: 0; }
.v2-seite .page-beratung .ber-akk__kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); width: 100%; box-sizing: border-box; min-height: 56px; padding: var(--s-3) 0; margin: 0;
  font-size: var(--fs-h4); font-weight: 600; line-height: 1.35; color: var(--c-text); background: none; border: 0; border-radius: 0; cursor: pointer; list-style: none; }
.v2-seite .page-beratung .ber-akk__kopf::-webkit-details-marker { display: none; }
.v2-seite .page-beratung .ber-akk__kopf::after { content: ""; width: 10px; height: 10px; flex: none; margin-right: 6px; border-right: 2px solid var(--ee-rot); border-bottom: 2px solid var(--ee-rot); transform: rotate(45deg); transition: transform .2s; }
.v2-seite .page-beratung .ber-akk[open] > .ber-akk__kopf::after { transform: rotate(-135deg); }
.v2-seite .page-beratung .ber-akk__kopf:hover { color: var(--ber-rot-text); }
.v2-seite .page-beratung .ber-akk__kopf:focus-visible { outline: 2px solid var(--ee-rot); outline-offset: -2px; border-radius: var(--radius-s, 6px); box-shadow: none; }
.v2-seite .page-beratung .ber-akk[open] > :not(summary) { padding-bottom: var(--s-4); }
.v2-seite .page-beratung .ber-schritt__mehr h4 { font-size: var(--fs-h4); margin: 0 0 var(--s-2); }
.v2-seite .page-beratung .ber-schritt__mehr p, .v2-seite .page-beratung .ber-schritt__mehr li { font-size: var(--fs-klein); }
.v2-seite .page-beratung .ber-schritt__mehr ol { list-style: none; margin: 0; padding: 0; }
.v2-seite .page-beratung .ber-schritt__mehr ol > li::before { content: none; }
.v2-seite .page-beratung .ber-schritt__mehr i.fa { display: none; }
.v2-seite .page-beratung .ber-schritt__mehr .text { display: block; }
.v2-seite .page-beratung .ber-schritt__mehr > :last-child { margin-bottom: var(--s-2); }

/* ---------- Pakete und Buchung: eine warme Fläche ---------- */
.v2-seite .page-beratung .by-content-area:has(#pakete) { background: var(--ber-warm); border-block: 0; padding-block: calc(var(--abschnitt) * 1.1); --c-text-2: var(--ee-grau-800); --ee-grau-100: #fff; }
.v2-seite .page-beratung .by-content-area:has(#pakete) + .by-content-area { padding-top: calc(var(--abschnitt) * 1.1); }
.v2-seite .page-beratung .by-servicepackage__kern { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.v2-seite .page-beratung .by-servicepackage__kern li { position: relative; margin: 0; padding-left: 2rem; }
.v2-seite .page-beratung .by-servicepackage__kern-vorspann { margin: 0; font-weight: 600; }
.v2-seite .page-beratung .by-servicepackage__alle { margin-top: var(--s-2); }
.v2-seite .page-beratung .com-servicepackage__hinweis { margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4); background: #fff; border-left: 4px solid var(--ee-rot); border-radius: var(--radius-s); font-weight: 600; }
/* Paketkarten ab 64 rem (drei nebeneinander): die Karten teilen sich die Zeilen Preis | Kernleistungen | Aufklapp-Kopf mit Leistungsliste | Knopf
   (CSS-Subgrid), so stehen Köpfe, Zeilen und Knöpfe waagerecht auf einer Linie. Die Leistungszeilen gleichen sich im Skript
   (beratung.js) zeilenweise an; ohne Subgrid greifen Mindesthöhen. Darunter (Karten untereinander) bleibt alles wie bisher. */
@media (min-width: 64rem) {
  .v2-seite .page-beratung .by-servicepackage__kernblock { min-height: 11rem; }
  .v2-seite .page-beratung .by-servicepackage__alle .by-servicepackage__body__service { min-height: 3.4rem; align-items: center; }
}
@supports (grid-template-rows: subgrid) {
  @media (min-width: 64rem) {
    .v2-seite .page-beratung .com-servicepackage__inner { grid-template-rows: auto auto auto auto; row-gap: 0; align-items: stretch; }
    .v2-seite .page-beratung .com-servicepackage__single { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: var(--s-3); }
    .v2-seite .page-beratung .com-servicepackage__single > .by-servicepackage__body { display: contents; }
    .v2-seite .page-beratung .by-servicepackage__kernblock { min-height: 0; }
    .v2-seite .page-beratung .by-servicepackage__alle { align-self: start; }
  }
}

/* Stepper über dem Formular: Paket ✓ · Angaben · Zahlung, zentriert, verbunden durch eine Linie (nur Orientierung, keine Funktion) */
.v2-seite .page-beratung .com-text.ber-stepper > * { max-width: none; }
.v2-seite .page-beratung .com-text.ber-stepper { margin-top: var(--s-8); margin-bottom: var(--s-5); }
.v2-seite .page-beratung .ber-stepper__liste { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; }
.v2-seite .page-beratung .ber-stepper__schritt { position: relative; display: grid; justify-items: center; gap: var(--s-2); width: 6.5rem; margin: 0; font-weight: 600; }
.v2-seite .page-beratung .ber-stepper__schritt + .ber-stepper__schritt::before { content: ""; position: absolute; top: 1.1rem; right: 50%; width: 100%; height: 2px; background: var(--ee-grau-500); }
.v2-seite .page-beratung .ber-stepper__schritt--fertig + .ber-stepper__schritt::before { background: var(--app-gruen-800, #2b773b); }
.v2-seite .page-beratung .ber-stepper__punkt { position: relative; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: #fff; color: var(--c-text); border: 2px solid var(--ee-grau-800); font-weight: 600; line-height: 1; }
.v2-seite .page-beratung .ber-stepper__schritt--fertig .ber-stepper__punkt { background: var(--app-gruen-800, #2b773b); border-color: var(--app-gruen-800, #2b773b); color: #fff; }
.v2-seite .page-beratung .ber-stepper__schritt--jetzt .ber-stepper__punkt { background: var(--ber-rot-text); border-color: var(--ber-rot-text); color: #fff; }
.v2-seite .page-beratung .ber-stepper__text { font-size: var(--fs-klein); text-align: center; }
@media (max-width: 39.99rem) { .v2-seite .page-beratung .ber-stepper__schritt { width: 5.25rem; } }

/* ---------- Aufklapp-Bereiche (Hintergrundwissen, Vergleich) ---------- */
.v2-seite .page-beratung .z-aufklapp { margin-top: var(--s-4); }
.v2-seite .page-beratung .z-aufklapp__inhalt { padding-top: var(--s-2); }
.v2-seite .page-beratung .z-aufklapp__inhalt > .by-section:first-child { margin-top: 0; }

/* ---------- Kurzfassungen ---------- */
.v2-seite .page-beratung .ber-kurz p { font-size: var(--fs-lead); margin: 0; }

/* ---------- FAQ in Gruppen ---------- */
.v2-seite .page-beratung .ber-faq-gruppe { margin-top: var(--s-6); }
.v2-seite .page-beratung .ber-faq-gruppe p { margin: 0; font-size: .8125rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ber-rot-text); line-height: 1.5; }
.v2-seite .page-beratung .ber-faq-gruppe + .com-accordion-faq { margin-top: var(--s-2); }

/* ---------- Vergleichstabelle ---------- */
.v2-seite .page-beratung .com-text.ber-vergleich > * { max-width: none; }
.v2-seite .page-beratung .ber-vergleich__tabelle { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--c-linie); border-radius: var(--radius); overflow: hidden; }
/* die Überschrift darüber nennt das Thema; die Beschriftung bleibt für Bildschirmleser */
.v2-seite .page-beratung .ber-vergleich__tabelle caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.v2-seite .page-beratung .ber-vergleich__tabelle th, .v2-seite .page-beratung .ber-vergleich__tabelle td { text-align: left; vertical-align: top; padding: var(--s-3) var(--s-4); }
.v2-seite .page-beratung .ber-vergleich__tabelle thead th { background: var(--c-flaeche-ruhig, #fafafa); font-weight: 600; }
.v2-seite .page-beratung .ber-vergleich__tabelle thead th:last-child { background: var(--ee-rot-zart, #fdd0cb); }
.v2-seite .page-beratung .ber-vergleich__tabelle tbody th { font-weight: 600; width: 20%; }
.v2-seite .page-beratung .ber-vergleich__tabelle tbody tr + tr > * { border-top: 1px solid var(--c-linie); }
@media (max-width: 47.99rem) {
  /* Handy: je Thema ein Block; die Spaltenköpfe stehen vor jedem Wert (data-label), die Kopfzeile bleibt für Bildschirmleser */
  .v2-seite .page-beratung .ber-vergleich__tabelle { display: block; border: 0; background: none; }
  .v2-seite .page-beratung .ber-vergleich__tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .v2-seite .page-beratung .ber-vergleich__tabelle tbody, .v2-seite .page-beratung .ber-vergleich__tabelle tr, .v2-seite .page-beratung .ber-vergleich__tabelle th, .v2-seite .page-beratung .ber-vergleich__tabelle td { display: block; }
  .v2-seite .page-beratung .ber-vergleich__tabelle tbody tr { background: #fff; border: 1px solid var(--c-linie); border-radius: var(--radius); margin-bottom: var(--s-3); padding: var(--s-2) 0; }
  .v2-seite .page-beratung .ber-vergleich__tabelle tbody tr + tr > * { border-top: 0; }
  .v2-seite .page-beratung .ber-vergleich__tabelle tbody th { width: auto; padding-bottom: 0; }
  .v2-seite .page-beratung .ber-vergleich__tabelle td::before { content: attr(data-label); display: block; font-size: var(--fs-klein); color: var(--c-text-2); }
}

/* ---------- Abschluss: Knopf und Kontaktwege als eine zentrierte Karte in Lesebreite (Knopf-Baustein davor + Text-Baustein .ber-abschluss) ---------- */
.v2-seite .page-beratung .com-button:has(+ .ber-abschluss) { margin-top: var(--s-8); margin-bottom: 0; }
.v2-seite .page-beratung .ber-abschluss { margin-top: 0; }
.v2-seite .page-beratung .com-button:has(+ .ber-abschluss) > .com-button__wrapper,
.v2-seite .page-beratung .ber-abschluss > .com-text__wrapper { max-width: var(--lesebreite); margin-inline: auto; background: #fff; border: 1px solid var(--c-linie); box-sizing: border-box; text-align: center; }
.v2-seite .page-beratung .com-button:has(+ .ber-abschluss) > .com-button__wrapper { justify-content: center; padding: var(--s-6) var(--s-5) var(--s-3); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; box-shadow: var(--schatten); }
.v2-seite .page-beratung .ber-abschluss > .com-text__wrapper { padding: 0 var(--s-5) var(--s-6); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--schatten); }
.v2-seite .page-beratung .ber-abschluss > .com-text__wrapper > .com-text__inner { max-width: none; }
.v2-seite .page-beratung .ber-abschluss p { margin: 0; }
.v2-seite .page-beratung .ber-abschluss a:not(.v2-btn) { font-weight: 600; white-space: nowrap; }
.v2-seite .page-beratung .ber-abschluss a[href^="tel:"]::before, .v2-seite .page-beratung .ber-abschluss a[href^="mailto:"]::before {
  content: ""; display: inline-block; width: 1.1em; height: 1.1em; margin-right: .35em; vertical-align: -.15em; background-color: currentColor;
  -webkit-mask: var(--ber-icon) center / contain no-repeat; mask: var(--ber-icon) center / contain no-repeat; }
.v2-seite .page-beratung .ber-abschluss a[href^="tel:"] { --ber-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E"); }
.v2-seite .page-beratung .ber-abschluss a[href^="mailto:"] { --ber-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E"); }

/* ---------- Feste Leiste „Paket wählen“ (Handy und Tablet) ---------- */
.ber-leiste { display: none; }
@media (max-width: 63.99rem) {
  /* links neben der runden Hilfe-Kugel der Aktionsleiste (rechts unten), unter Einwilligungsfenster (z-index) und Menü */
  .ber-leiste { display: block; position: fixed; z-index: 55; left: var(--s-3); right: calc(var(--tap) + var(--s-3) * 2 + var(--s-2)); bottom: calc(var(--s-3) + env(safe-area-inset-bottom)); }
  /* ohne Hilfe-Kugel (App-Fenster, Buchungsansicht im Safari-Fenster der App) über die volle Breite */
  body:not(:has(.v2-aktionsleiste)) .ber-leiste { right: var(--s-3); }
  .ber-leiste .v2-btn { width: 100%; box-shadow: 0 4px 14px rgba(0, 0, 0, .2); }
  .ber-leiste.ber-leiste--weg { visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .2s, visibility .2s; }
  .page-beratung { padding-bottom: calc(var(--tap) + var(--s-6)); }
}

@media (prefers-reduced-motion: reduce) {
  .v2-seite .page-beratung .ber-akk__kopf::after, .ber-leiste.ber-leiste--weg { transition: none; }
}