/* Protius 2026: Skin für die Formularseiten (Fallprüfung, Wizard „form“, Vollmacht).

   Ladereihenfolge auf diesen Seiten (gesteuert in functions.php, Schalter
   protius_is_funnel_template()):
     1. protius-2026.css   neues Designsystem, Header, Footer, Cookie-Leiste
     2. style.css          ALT, bleibt geladen: das Formular-JavaScript (protius.js,
                            app.js) und die Schritt-Ein-/Ausblendung hängen an dessen
                            Klassen (.funnel__wrapper, .form__step, .secondary_nav …)
     3. p26-funnel.css     diese Datei: neue Optik über die alten Regeln legen

   Regeln für diese Datei:
   - Nur Optik. Keine display/visibility-Regeln an Elementen, die protius.js
     ein- und ausblendet (.form__step, .hide/.show, .opened, #message_alert …),
     ohne die Wirkung im Browser zu prüfen.
   - Selektoren mit body.p26-funnel beginnen, damit nichts auf andere Seiten wirkt.
   - Header, Footer und Leisten sind bereits durch protius-2026.css geschützt
     (Abschnitt „Schutz der Rahmen-Bauteile auf alten Seiten“).

   Was hier bewusst NICHT angefasst wird (Ein-/Ausblenden bleibt bei style.css
   und den Inline-Styles der Templates):
     .hide / .show (display !important), .form__step.hide, .popup.hide,
     #message_alert.hide, .vollmacht-error(.show), .vollmacht-success(.show),
     #signatureCanvas Breite 100 % / Höhe 200px (das Vollmacht-Skript liest die
     Größe beim Laden aus; Breite/Höhe hier nicht ändern).
   Spezifität: style.css setzt Abstands-Helfer (.mb20, .mb40 …) und den Dunkelmodus
   mit !important, die Inline-Styles der Templates kommen nach dieser Datei. Deshalb
   sind die Selektoren hier bewusst etwas länger (body.p26-funnel … .d1) und an
   wenigen, kommentierten Stellen mit !important versehen.

   Seitenbilder: Fallprüfung und Wizard = weiße Karte auf Markenblau,
   Vollmacht = weißes Dokument auf Hellgrau. */

/* ==========================================================================
   1. Fläche, Schrift, Übergang zum Footer
   ========================================================================== */

:root:has(body.p26-funnel) { color-scheme: light; }
body.p26-funnel { background: var(--paper-2); color: var(--ink); }

/* Eine Schrift in allen Gewichten. style.css arbeitet mit getrennten Schrift-Familien
   je Gewicht (BeVietnamPro_Bold …) und einem *-Selektor; hier gilt Be Vietnam Pro,
   das Gewicht kommt aus font-weight. */
body.p26-funnel .funnel__wrapper,
body.p26-funnel .funnel__wrapper * { font-family: var(--sans) !important; }
body.p26-funnel .funnel__wrapper { -webkit-font-smoothing: antialiased; }

/* Grundfläche: kein unscharfes Hintergrundbild, kein Verlauf, kein Glas.
   .d1 im Selektor schlägt die alte Regel und die Inline-Regel der Vollmacht. */
body.p26-funnel .funnel__wrapper.d1 {
  position: relative;
  z-index: auto;
  margin: 0;
  padding-top: clamp(1rem, .5rem + 2.5vw, 3rem);
  padding-bottom: calc(clamp(2.5rem, 1.5rem + 4vw, 4.5rem) + var(--register));
  padding-left: var(--gutter) !important;   /* .d1 setzt unter 450px !important */
  padding-right: var(--gutter) !important;
  background: var(--blue) none !important;  /* Vollmacht-Template setzt das Bild mit !important */
  border-radius: 0;
  color: var(--ink);
  overflow: visible;
  overflow-x: clip;
}
body.p26-funnel .funnel__wrapper.d1::after { content: none; display: none; }

/* Footer schiebt sich mit runden Ecken über die Formularfläche (Register wie auf den neuen Seiten) */
body.p26-funnel .p26-alt-main + .site-footer {
  position: relative;
  margin-top: calc(-1 * var(--register));
  border-radius: var(--register) var(--register) 0 0;
}

/* ==========================================================================
   2. Karte (Wizard und Auswahlseite)
   ========================================================================== */

body.p26-funnel .funnel {
  counter-reset: p26-steps;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  max-width: 68rem;
  min-height: 0;
  margin: 0 auto;
  padding: 0;
  background: var(--white);
  border-radius: var(--r-2);
  box-shadow: 0 1px 2px rgba(7, 26, 44, .10), 0 18px 40px -18px rgba(7, 26, 44, .45);
  color: var(--ink);
  transition: none;
}
@media (min-width: 56rem) {
  body.p26-funnel .funnel { grid-template-columns: 19rem minmax(0, 1fr); min-height: 32rem; }
}

/* ---------- Seitenleiste: Rechtsgebiet-Umschalter und Schrittleiste ---------- */
body.p26-funnel .funnel .navigation__wrapper {
  position: static;
  z-index: auto;
  width: auto;
  height: auto;
  padding: 1.125rem clamp(1.125rem, 4vw, 2rem) 0;
  background: transparent;
  border-radius: 0;
  color: var(--ink);
  transition: none;
}
@media (min-width: 56rem) {
  body.p26-funnel .funnel .navigation__wrapper {
    padding: 2rem 1.25rem 2rem 1.5rem;
    background: var(--paper-2);
    border-radius: var(--r-2) 0 0 var(--r-2);
  }
}
body.p26-funnel .funnel .navigation__wrapper ul { margin: 0; padding: 0; list-style: none; }
body.p26-funnel .funnel .navigation__wrapper li { list-style: none; text-wrap: wrap; }
body.p26-funnel .funnel .navigation__wrapper li::after,
body.p26-funnel .funnel .navigation__wrapper .primary_nav li::before,
body.p26-funnel .funnel.opened .navigation__wrapper li::after,
body.p26-funnel .funnel.opened .active::before { content: none; display: none; }

/* Rechtsgebiet-Umschalter (Links auf die anderen Fallprüfungen). Der Aufklapp-Pfeil
   (toggleNavFunnel) wird nicht gebraucht, die Links stehen immer sichtbar da. */
body.p26-funnel .funnel .primary__nav__toggle { display: block; min-height: 0; text-align: left; }
body.p26-funnel .funnel .primary__nav__toggle .arrow { display: none; }
body.p26-funnel .funnel .navigation__wrapper .primary_nav {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
}
body.p26-funnel .funnel .navigation__wrapper .primary_nav li {
  display: block;
  min-height: 0;
  margin: 0;
  padding: 0;
  cursor: default;
}
body.p26-funnel .funnel .navigation__wrapper .primary_nav li span { display: block; opacity: 1; padding: 0; text-align: left; }
body.p26-funnel .funnel .navigation__wrapper .primary_nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: .45rem .85rem;
  border: 1.5px solid var(--line);
  border-radius: var(--r-1);
  background: var(--white);
  color: var(--ink-2);
  font-size: var(--fs-1);
  font-weight: 400;
  line-height: 1.2;
  text-decoration: none;
}
body.p26-funnel .funnel .navigation__wrapper .primary_nav a:hover { border-color: var(--blue); color: var(--blue); }
body.p26-funnel .funnel .navigation__wrapper .primary_nav li.active a {
  border-color: var(--blue);
  background: var(--blue);
  color: var(--white);
  font-weight: 700;
}

/* Schrittleiste: Kreise mit Nummer (Desktop), Fortschrittsbalken (schmal) */
body.p26-funnel .funnel .navigation__wrapper .secondary_nav {
  display: grid;
  gap: .125rem;
  margin: 1.75rem 0 0;
  counter-reset: none;
}
body.p26-funnel .funnel .navigation__wrapper .secondary_nav li {
  counter-increment: p26-steps;
  position: relative;
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 2.75rem;
  margin: 0;
  padding: .375rem .625rem;
  border-radius: var(--r-1);
  color: var(--ink-2);
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
body.p26-funnel .funnel .navigation__wrapper .secondary_nav li span {
  display: block;
  opacity: 1;
  padding: 0;
  font-size: var(--fs-1);
  font-weight: 400;
  line-height: 1.3;
  text-align: left;
  color: inherit;
}
body.p26-funnel .funnel .navigation__wrapper .secondary_nav li::before {
  content: counter(p26-steps);
  position: static;
  flex: none;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1.5px solid #b9c2cc;
  border-radius: 50%;
  background: var(--white);
  color: var(--ink-2);
  font-size: var(--fs-0);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
body.p26-funnel .funnel .navigation__wrapper .secondary_nav li:hover { background: rgba(15, 76, 129, .07); color: var(--ink); }
/* erledigt = alle Schritte vor dem aktiven */
body.p26-funnel .funnel .navigation__wrapper .secondary_nav li:has(~ li.active)::before { border-color: var(--blue); color: var(--blue); }
body.p26-funnel .funnel .navigation__wrapper .secondary_nav li.active { background: var(--white); color: var(--blue); }
body.p26-funnel .funnel .navigation__wrapper .secondary_nav li.active span { font-weight: 700; }
body.p26-funnel .funnel .navigation__wrapper .secondary_nav li.active::before { border-color: var(--blue); background: var(--blue); color: var(--white); }

/* Pflichtangabe in einem Schritt fehlt (protius.js setzt .invalid erst beim Absenden,
   auch in ausgeblendeten Schritten): betroffenen Schritt in der Leiste rot markieren,
   damit man ihn findet. Reines CSS über die Position (n-ter Schritt = n-ter Eintrag). */
body.p26-funnel .funnel:has(.form_content > .form__step:nth-child(1) .invalid) .secondary_nav li:nth-child(1),
body.p26-funnel .funnel:has(.form_content > .form__step:nth-child(2) .invalid) .secondary_nav li:nth-child(2),
body.p26-funnel .funnel:has(.form_content > .form__step:nth-child(3) .invalid) .secondary_nav li:nth-child(3),
body.p26-funnel .funnel:has(.form_content > .form__step:nth-child(4) .invalid) .secondary_nav li:nth-child(4),
body.p26-funnel .funnel:has(.form_content > .form__step:nth-child(5) .invalid) .secondary_nav li:nth-child(5),
body.p26-funnel .funnel:has(.form_content > .form__step:nth-child(6) .invalid) .secondary_nav li:nth-child(6),
body.p26-funnel .funnel:has(.form_content > .form__step:nth-child(7) .invalid) .secondary_nav li:nth-child(7),
body.p26-funnel .funnel:has(.form_content > .form__step:nth-child(8) .invalid) .secondary_nav li:nth-child(8),
body.p26-funnel .funnel:has(.form_content > .form__step:nth-child(9) .invalid) .secondary_nav li:nth-child(9),
body.p26-funnel .funnel:has(.form_content > .form__step:nth-child(10) .invalid) .secondary_nav li:nth-child(10),
body.p26-funnel .funnel:has(.form_content > .form__step:nth-child(11) .invalid) .secondary_nav li:nth-child(11),
body.p26-funnel .funnel:has(.form_content > .form__step:nth-child(12) .invalid) .secondary_nav li:nth-child(12) {
  color: var(--err);
}
body.p26-funnel .funnel:has(.form_content > .form__step:nth-child(1) .invalid) .secondary_nav li:nth-child(1)::before,
body.p26-funnel .funnel:has(.form_content > .form__step:nth-child(2) .invalid) .secondary_nav li:nth-child(2)::before,
body.p26-funnel .funnel:has(.form_content > .form__step:nth-child(3) .invalid) .secondary_nav li:nth-child(3)::before,
body.p26-funnel .funnel:has(.form_content > .form__step:nth-child(4) .invalid) .secondary_nav li:nth-child(4)::before,
body.p26-funnel .funnel:has(.form_content > .form__step:nth-child(5) .invalid) .secondary_nav li:nth-child(5)::before,
body.p26-funnel .funnel:has(.form_content > .form__step:nth-child(6) .invalid) .secondary_nav li:nth-child(6)::before,
body.p26-funnel .funnel:has(.form_content > .form__step:nth-child(7) .invalid) .secondary_nav li:nth-child(7)::before,
body.p26-funnel .funnel:has(.form_content > .form__step:nth-child(8) .invalid) .secondary_nav li:nth-child(8)::before,
body.p26-funnel .funnel:has(.form_content > .form__step:nth-child(9) .invalid) .secondary_nav li:nth-child(9)::before,
body.p26-funnel .funnel:has(.form_content > .form__step:nth-child(10) .invalid) .secondary_nav li:nth-child(10)::before,
body.p26-funnel .funnel:has(.form_content > .form__step:nth-child(11) .invalid) .secondary_nav li:nth-child(11)::before,
body.p26-funnel .funnel:has(.form_content > .form__step:nth-child(12) .invalid) .secondary_nav li:nth-child(12)::before {
  border-color: var(--err);
  background: #fbeceb;
  color: var(--err);
}

/* Schmal (Handy, Tablet hochkant): Schrittleiste als Fortschrittsbalken in Segmenten.
   Die Schrittnamen bleiben im DOM (protius.js liest sie für den Titel), sind nur
   optisch ausgeblendet; der aktuelle Name steht über der Frage. */
@media (min-width: 56rem) {
  body.p26-funnel .funnel .navigation__wrapper .primary_nav { display: grid; grid-template-columns: minmax(0, 1fr); }
  body.p26-funnel .funnel .navigation__wrapper .primary_nav a { justify-content: flex-start; width: 100%; }
}
@media (max-width: 55.99rem) {
  body.p26-funnel .funnel .navigation__wrapper .secondary_nav {
    display: flex;
    gap: .25rem;
    margin: .875rem 0 0;
  }
  body.p26-funnel .funnel .navigation__wrapper .secondary_nav li {
    flex: 1 1 0;
    min-width: 0;
    min-height: 2rem;
    padding: 0;
    background: none;
    justify-content: center;
  }
  body.p26-funnel .funnel .navigation__wrapper .secondary_nav li:hover { background: none; }
  body.p26-funnel .funnel .navigation__wrapper .secondary_nav li span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  body.p26-funnel .funnel .navigation__wrapper .secondary_nav li::before,
  body.p26-funnel .funnel .navigation__wrapper .secondary_nav li.active::before,
  body.p26-funnel .funnel .navigation__wrapper .secondary_nav li:has(~ li.active)::before {
    content: "";
    width: 100%;
    height: .375rem;
    border: 0;
    border-radius: 3px;
    background: #d3d9e0;
  }
  body.p26-funnel .funnel .navigation__wrapper .secondary_nav li.active::before,
  body.p26-funnel .funnel .navigation__wrapper .secondary_nav li:has(~ li.active)::before { background: var(--blue); }
  body.p26-funnel .funnel:has(.form_content > .form__step:nth-child(1) .invalid) .secondary_nav li:nth-child(1)::before,
  body.p26-funnel .funnel:has(.form_content > .form__step:nth-child(2) .invalid) .secondary_nav li:nth-child(2)::before,
  body.p26-funnel .funnel:has(.form_content > .form__step:nth-child(3) .invalid) .secondary_nav li:nth-child(3)::before,
  body.p26-funnel .funnel:has(.form_content > .form__step:nth-child(4) .invalid) .secondary_nav li:nth-child(4)::before,
  body.p26-funnel .funnel:has(.form_content > .form__step:nth-child(5) .invalid) .secondary_nav li:nth-child(5)::before,
  body.p26-funnel .funnel:has(.form_content > .form__step:nth-child(6) .invalid) .secondary_nav li:nth-child(6)::before,
  body.p26-funnel .funnel:has(.form_content > .form__step:nth-child(7) .invalid) .secondary_nav li:nth-child(7)::before,
  body.p26-funnel .funnel:has(.form_content > .form__step:nth-child(8) .invalid) .secondary_nav li:nth-child(8)::before,
  body.p26-funnel .funnel:has(.form_content > .form__step:nth-child(9) .invalid) .secondary_nav li:nth-child(9)::before,
  body.p26-funnel .funnel:has(.form_content > .form__step:nth-child(10) .invalid) .secondary_nav li:nth-child(10)::before,
  body.p26-funnel .funnel:has(.form_content > .form__step:nth-child(11) .invalid) .secondary_nav li:nth-child(11)::before,
  body.p26-funnel .funnel:has(.form_content > .form__step:nth-child(12) .invalid) .secondary_nav li:nth-child(12)::before { background: var(--err); }
}

/* ==========================================================================
   3. Formularbereich
   ========================================================================== */

body.p26-funnel .funnel .form__wrapper {
  position: relative;
  min-width: 0;
  padding: 1.25rem clamp(1.125rem, 4vw, 2rem) clamp(1.25rem, 4vw, 2rem);
  transition: none;
}
@media (min-width: 56rem) {
  body.p26-funnel .funnel .form__wrapper {
    display: flex;
    flex-direction: column;
    padding: 2.25rem clamp(2rem, 4vw, 3.5rem) 2rem;
  }
}

/* Kopfzeile über der Frage: „Schritt 2 von 7“ und Schrittname */
body.p26-funnel .funnel .form_step_title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: .25rem .75rem;
  margin: 0 0 .75rem;
  padding: 0;
}
body.p26-funnel .funnel .form_step_title .step__counter {
  display: inline;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  background: none;
  border-radius: 0;
  color: var(--blue-500);
  font-size: var(--fs-0);
  font-weight: 700;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
body.p26-funnel .funnel .form_step_title .step__counter::before { content: "Schritt "; }
body.p26-funnel .funnel .form_step_title .step__counter::after { content: " von " counter(p26-steps); }
body.p26-funnel .funnel .form_step_title .step__counter:empty::before,
body.p26-funnel .funnel .form_step_title .step__counter:empty::after,
body.p26-funnel .funnel .form_step_title .step__counter:has(svg)::before,
body.p26-funnel .funnel .form_step_title .step__counter:has(svg)::after { content: none; }
body.p26-funnel .funnel .form_step_title .step__title {
  padding-left: .75rem;
  border-left: 1px solid var(--line);
  color: var(--ink-2);
  font-size: var(--fs-0);
  font-weight: 700;
  line-height: 1.4;
}

body.p26-funnel .funnel .form_content {
  max-width: 40rem;
  margin: 0;
  padding: 0;
}
@media (min-width: 56rem) { body.p26-funnel .funnel .form_content { flex: 1 0 auto; } }

/* Schritt-Wechsel: ruhiges Einblenden statt Hereinschieben von links */
body.p26-funnel .funnel .form__step { animation: p26-step-in .25s ease-out; transition: none; }
@keyframes p26-step-in { from { opacity: 0; } to { opacity: 1; } }

/* Frage (ACF-Layout headline) */
body.p26-funnel .funnel .form__step .form__second__title {
  margin: 0 0 1.25rem !important;   /* .mb40 ist !important */
  max-width: 30ch;
  color: var(--blue);
  font-size: var(--fs-4);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.015em;
  text-align: left;
  text-wrap: balance;
}

/* Erklärtext (ACF-Layout text) */
body.p26-funnel .funnel .form__step .mb20 { margin-bottom: 1rem !important; }
body.p26-funnel .funnel .form__step p {
  width: auto;
  max-width: 62ch;
  margin: 0 0 .75rem;
  color: var(--ink-2);
  font-size: var(--fs-2);
  font-weight: 400;
  line-height: 1.55;
}
body.p26-funnel .funnel .form__step p:last-child { margin-bottom: 0; }
body.p26-funnel .funnel .form__step a { color: var(--blue); font-weight: 700; text-decoration: underline; text-underline-offset: .18em; }

/* ---------- Auswahl-Buttons (radio_group) ----------
   Mechanik bleibt wie gehabt: das Radio liegt unsichtbar über dem Label und fängt den Klick. */
body.p26-funnel .funnel .radio__group {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .625rem;
  max-width: none;
  margin: 0 0 1.25rem !important;   /* .mb20 ist !important */
}
body.p26-funnel .funnel .radio__group.flexible { grid-template-columns: repeat(auto-fit, minmax(min(8rem, 100%), 1fr)); }
body.p26-funnel .funnel .radio__group > .radioInput,
body.p26-funnel .funnel .radio__group.flexible > .radioInput {
  position: relative;
  width: auto;
  flex-grow: 0;
  margin: 0;
  font-size: inherit;
}
body.p26-funnel .funnel .radioInput > input[type="radio"] {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent !important;   /* Dunkelmodus in style.css färbt Inputs mit !important */
  border: 0 !important;
  border-radius: var(--r-1);
  box-shadow: none;
  cursor: pointer;
}
body.p26-funnel .funnel .radioInput > label,
body.p26-funnel .funnel .radioInput > a {
  display: flex;
  align-items: center;
  gap: .875rem;
  width: 100%;
  min-height: 3.5rem;
  padding: .875rem 1.125rem;
  border: 1.5px solid var(--line);
  border-radius: var(--r-1);
  background: var(--white);
  color: var(--ink);
  font-size: var(--fs-2);
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
/* Radiopunkt */
body.p26-funnel .funnel .radioInput > label::before {
  content: "";
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  border: 1.5px solid #8b97a4;
  border-radius: 50%;
  background: var(--white);
  box-shadow: inset 0 0 0 3px var(--white);
  transition: border-color .15s, background-color .15s;
}
body.p26-funnel .funnel .radioInput > input:hover + label { border-color: var(--blue); }
body.p26-funnel .funnel .radioInput > input:checked + label {
  border-color: var(--blue);
  background: #eaf1f8;
  box-shadow: inset 0 0 0 1px var(--blue);
  color: var(--blue);
}
body.p26-funnel .funnel .radioInput > input:checked + label::before { border-color: var(--blue); background: var(--blue); }
body.p26-funnel .funnel .radioInput > input:focus-visible { outline: none; }
body.p26-funnel .funnel .radioInput > input:focus-visible + label { outline: 2px solid var(--blue); outline-offset: 2px; }
body.p26-funnel .funnel .form__wrapper .radioInput > .invalid[type="radio"] + label { border: 1.5px solid var(--err); background: #fdf3f2; box-shadow: none; }
body.p26-funnel .funnel .form__wrapper .radioInput > .invalid[type="radio"] + label::before { border-color: var(--err); }

/* Hinweis-Popup an einer Antwort (has_popup): Sprechblase unter der Antwort */
body.p26-funnel .funnel .radioInput .popup {
  position: absolute;
  top: calc(100% + .625rem);
  left: 0;
  right: auto;
  z-index: 5;
  width: min(22rem, calc(100vw - 2 * var(--gutter) - 2rem));
  padding: .75rem 1rem 1rem;
  background: var(--blue);
  border-radius: var(--r-2);
  box-shadow: 0 12px 28px -12px rgba(7, 26, 44, .55);
  color: var(--white);
}
body.p26-funnel .funnel .radio__group.flexible > .radioInput:nth-child(even) .popup { left: auto; right: 0; }
body.p26-funnel .funnel .radioInput .popup > svg { position: absolute; bottom: calc(100% - 1px); left: 1.25rem; right: auto; width: 1.5rem; height: auto; }
body.p26-funnel .funnel .radio__group.flexible > .radioInput:nth-child(even) .popup > svg { left: auto; right: 1.25rem; }
body.p26-funnel .funnel .radioInput .popup_head { position: relative; z-index: 1; display: flex; justify-content: flex-end; padding: 0; margin: -.25rem -.5rem 0 0; pointer-events: none; }
body.p26-funnel .funnel .radioInput .popup_head button { pointer-events: auto; }
body.p26-funnel .funnel .radioInput .popup_head button {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
body.p26-funnel .funnel .radioInput .popup_head button:hover { background: rgba(255, 255, 255, .12); }
body.p26-funnel .funnel .radioInput .popup_head button:focus-visible { outline: 2px solid var(--white); outline-offset: 0; }
body.p26-funnel .funnel .radioInput .popup_content { margin-top: -1.5rem; padding-right: 2.5rem; }
body.p26-funnel .funnel .radioInput .popup_content,
body.p26-funnel .funnel .radioInput .popup_content p,
body.p26-funnel .funnel .radioInput .popup_content li { color: var(--white); font-size: var(--fs-1); line-height: 1.5; }
body.p26-funnel .funnel .radioInput .popup_content a { color: var(--white); }

/* ---------- Textfelder (textbox_group, textarea) ---------- */
body.p26-funnel .funnel .form_content input[type="text"],
body.p26-funnel .funnel .form_content input[type="number"],
body.p26-funnel .funnel .form_content input[type="email"],
body.p26-funnel .funnel .form_content input[type="tel"],
body.p26-funnel .funnel .form_content textarea {
  width: 100%;
  min-height: 3.25rem;
  margin: 0 0 .875rem;
  padding: .8rem .9rem;
  border: 1.5px solid var(--line);
  border-radius: var(--r-1);
  background: var(--white);
  color: var(--ink);
  font-size: var(--fs-2);   /* ab 16 px zoomt iOS beim Tippen nicht */
  line-height: 1.4;
  box-shadow: none;
}
body.p26-funnel .funnel .form_content textarea { display: block; min-height: 7.5rem; resize: vertical; }
body.p26-funnel .funnel .form_content input::placeholder,
body.p26-funnel .funnel .form_content textarea::placeholder { color: #8b97a4; text-align: left; opacity: 1; }
body.p26-funnel .funnel .form_content input[type="text"]:focus,
body.p26-funnel .funnel .form_content textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(15, 76, 129, .18);
}
body.p26-funnel .funnel .form__wrapper .form_content .invalid[type="text"],
body.p26-funnel .funnel .form__wrapper .form_content textarea.invalid { border: 1.5px solid var(--err); background: #fffafa; }

/* Die Felder haben im Template ein Label mit .sr-only (Text = Platzhalter).
   Hier wird es sichtbar gemacht, damit beim Tippen klar bleibt, was gefragt ist.
   Ausnahme: Felder, die app.js erst bei einer Antwort einblendet (.hide), deren
   Label bleibt bis dahin versteckt. Der Platzhalter wird dann nicht doppelt gezeigt. */
body.p26-funnel .funnel .form_content label.sr-only:not(:has(+ .hide)) {
  position: static;
  display: block;
  width: auto;
  height: auto;
  margin: 0 0 .375rem;
  padding: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
  color: var(--ink);
  font-size: var(--fs-0);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .02em;
}
body.p26-funnel .funnel .form_content label.sr-only:not(:has(+ .hide)) + input::placeholder,
body.p26-funnel .funnel .form_content label.sr-only:not(:has(+ .hide)) + textarea::placeholder { color: transparent; }
body.p26-funnel .funnel .form__step .radio__group + label.sr-only:not(:has(+ .hide)),
body.p26-funnel .funnel .form__step .mb25 { margin-top: .25rem; }
body.p26-funnel .funnel .form__step .mb25 { margin-bottom: 1rem !important; }

/* ---------- Datei-Upload (upload_files_group) ---------- */
body.p26-funnel .funnel .cst__file_input { width: 100%; margin: 0 0 .875rem; }
body.p26-funnel .funnel .cst__file_input > p {
  margin: 0 0 .375rem !important;   /* .mb10 ist !important */
  color: var(--ink);
  font-size: var(--fs-0);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .02em;
  text-align: left;
}
/* Das Datei-Feld war per .hide ganz entfernt und damit per Tastatur unerreichbar.
   Hier bleibt es unsichtbar, ist aber fokussierbar (Tab, dann Leertaste). Die Klasse
   .hide setzt an diesem Feld kein Skript, sie steht fest im Template. */
body.p26-funnel .funnel .cst__file_input > input[type="file"].hide {
  display: block !important;
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  clip-path: inset(50%);
}
body.p26-funnel .funnel .cst__file_input { position: relative; }
body.p26-funnel .funnel .cst__file_input > label {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 3.5rem;
  padding: .8rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: var(--r-1);
  background: var(--paper-2);
  color: var(--blue);
  font-size: var(--fs-1);
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
body.p26-funnel .funnel .cst__file_input > label::before {
  content: "";
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='M17 8l-5-5-5 5'/%3E%3Cpath d='M12 3v12'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='M17 8l-5-5-5 5'/%3E%3Cpath d='M12 3v12'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.p26-funnel .funnel .cst__file_input > label:hover { border-color: var(--blue); background: #eaf1f8; }
body.p26-funnel .funnel .cst__file_input > input:focus-visible + label { outline: 2px solid var(--blue); outline-offset: 2px; }
body.p26-funnel .funnel .form__wrapper .cst__file_input > .invalid[type="file"] + label { border: 1.5px solid var(--err); background: #fdf3f2; color: var(--err); }

/* ---------- Einwilligung (checkbox) ---------- */
body.p26-funnel .funnel .terms__wrapper {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin: .75rem 0 0;
  color: var(--ink-2);
  font-size: var(--fs-1);
  font-weight: 400;
  line-height: 1.5;
}
body.p26-funnel .funnel .terms__wrapper > input[type="checkbox"] {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  min-height: 0;
  margin: .1rem 0 0;
  accent-color: var(--blue);
  cursor: pointer;
}
body.p26-funnel .funnel .terms__wrapper > label { padding: 0 0 .25rem; color: var(--ink-2); cursor: pointer; }
body.p26-funnel .funnel .terms__wrapper > label a { color: var(--blue); font-weight: 700; text-decoration: underline; text-underline-offset: .18em; }
body.p26-funnel .funnel .form__wrapper .terms__wrapper > .invalid[type="checkbox"] { outline: 2px solid var(--err); outline-offset: 1px; }
body.p26-funnel .funnel .form__wrapper .terms__wrapper > .invalid[type="checkbox"] + label { color: var(--err); }
body.p26-funnel .funnel .form__wrapper .terms__wrapper > .invalid[type="checkbox"] + label a { color: var(--err); }

/* ---------- Zurück / Weiter / Absenden ---------- */
body.p26-funnel .funnel .next_prev_wrapper {
  position: static;
  left: auto;
  bottom: auto;
  transform: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  width: auto;
  max-width: 40rem;
  margin: 1.5rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--line);
}
body.p26-funnel .funnel .next_prev_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-height: 3.25rem;
  padding: .8rem 1.4rem;
  border: 1.5px solid transparent;
  border-radius: var(--r-1);
  font-size: var(--fs-1);
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
body.p26-funnel .funnel .next_prev_btn span { font-weight: 700; }
body.p26-funnel .funnel .next_prev_btn.previous { background: var(--white); border-color: var(--line); color: var(--blue); }
body.p26-funnel .funnel .next_prev_btn.previous:hover:not(:disabled) { border-color: var(--blue); }
body.p26-funnel .funnel .next_prev_btn.next,
body.p26-funnel .funnel .next_prev_btn.next.absenden {
  min-width: 10rem;
  padding: .8rem 1.75rem;
  background: var(--blue);
  border-color: var(--blue);
  border-radius: var(--r-1);
  color: var(--white);
}
body.p26-funnel .funnel .next_prev_btn.next:hover:not(:disabled) { background: var(--navy-700); border-color: var(--navy-700); }
body.p26-funnel .funnel .next_prev_btn:disabled { opacity: .4; cursor: not-allowed; }
body.p26-funnel .funnel .next_prev_btn.next:disabled { opacity: .75; cursor: progress; }
body.p26-funnel .funnel .next_prev_btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
/* Pfeile in den Buttons entfallen (Gestaltungsregel); der Lade-Kreis beim Absenden bleibt. */
body.p26-funnel .funnel .next_prev_btn .icon { display: inline-flex; margin: 0 !important; }
body.p26-funnel .funnel .next_prev_btn .icon svg { display: none; }
body.p26-funnel .funnel .next_prev_btn .icon img { width: 1.25rem; height: 1.25rem; margin-left: .625rem; filter: invert(1); }
body.p26-funnel .funnel .next_prev_btn.absenden svg { background: none; }
@media (max-width: 35.99rem) {
  body.p26-funnel .funnel .next_prev_btn.previous { flex: 0 0 auto; padding-inline: 1.1rem; }
  body.p26-funnel .funnel .next_prev_btn.next { flex: 1 1 auto; min-width: 0; }
}

/* Hinweis, wenn Pflichtangaben in anderen (ausgeblendeten) Schritten fehlen.
   protius.js markiert sie nur, ohne den Schritt zu öffnen; die Leiste oben ist rot markiert. */
body.p26-funnel .funnel:has(.form__step.hide .invalid) .next_prev_wrapper { flex-wrap: wrap; }
body.p26-funnel .funnel:has(.form__step.hide .invalid) .next_prev_wrapper::after {
  content: "Es fehlen noch Angaben in den rot markierten Schritten. Wählen Sie einen markierten Schritt in der Leiste oben, um ihn zu öffnen.";
  order: 3;
  flex: 1 1 100%;
  padding: .75rem .9rem;
  border: 1.5px solid var(--err);
  border-radius: var(--r-1);
  background: #fbeceb;
  color: var(--err);
  font-size: var(--fs-1);
  line-height: 1.45;
}

/* Meldung unter den Buttons (Zeitüberschreitung, Serverfehler). Farbe setzt protius.js. */
body.p26-funnel .funnel #message_alert {
  max-width: 40rem;
  margin: .875rem 0 0;
  padding: .75rem .9rem;
  border: 1.5px solid currentColor;
  border-radius: var(--r-1);
  background: #fbeceb;
  font-size: var(--fs-1) !important;   /* Inline-Style 14px */
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
}

/* ==========================================================================
   4. Danke-Zustand (?sent=1): ruhige Bestätigung, ohne Schrittleiste
   ========================================================================== */

body.p26-funnel .funnel:has(.form_step_title .step__counter svg) { grid-template-columns: minmax(0, 1fr); max-width: 44rem; min-height: 0; }
body.p26-funnel .funnel:has(.form_step_title .step__counter svg) .navigation__wrapper { display: none; }
body.p26-funnel .funnel:has(.form_step_title .step__counter svg) .form__wrapper { padding: clamp(1.75rem, 1rem + 4vw, 3.5rem); }
body.p26-funnel .funnel .form_step_title .step__counter:has(svg) {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0 !important;   /* Inline-Style padding:6px */
  border-radius: 50%;
  background: #e5f1ea;
}
body.p26-funnel .funnel .form_step_title .step__counter:has(svg) svg { width: 1.75rem; height: 1.75rem; }
body.p26-funnel .funnel .form_step_title .step__counter:has(svg) svg path { stroke: var(--ok); }
body.p26-funnel .funnel .form_step_title:has(.step__counter svg) { flex-direction: column; align-items: flex-start; gap: .75rem; margin-bottom: 1rem; }
body.p26-funnel .funnel .form_step_title:has(.step__counter svg) .step__title { padding: 0; border: 0; color: var(--ok); font-size: var(--fs-1); }
body.p26-funnel .funnel .form__step[role="status"] h3 {
  margin: 0 0 .75rem;
  color: var(--blue);
  font-size: var(--fs-5);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.015em;
  text-align: left;
}
body.p26-funnel .funnel .form__step[role="status"] p {
  width: auto !important;          /* Inline-Style width:420px (zu breit fürs Handy) */
  max-width: 34rem;
  margin: 0 !important;            /* Inline-Style margin:0 auto, .mt25 */
  font-size: var(--fs-3);
  line-height: 1.5;
  text-align: left;
}
body.p26-funnel .funnel .next_prev_wrapper a.ctm--btn {
  display: inline-flex;
  align-items: center;
  min-height: 3.25rem;
  padding: .8rem 1.4rem;
  border: 1.5px solid var(--blue) !important;     /* Dunkelmodus in style.css mit !important */
  border-radius: var(--r-1);
  background: var(--white) !important;
  color: var(--blue) !important;
  font-size: var(--fs-1) !important;              /* Inline-Style 13px */
  font-weight: 700;
  line-height: 1.2 !important;
  text-decoration: none;
}
body.p26-funnel .funnel .next_prev_wrapper a.ctm--btn:hover { background: #eaf1f8 !important; }
body.p26-funnel .funnel .next_prev_wrapper a.ctm--btn svg { display: none; }
body.p26-funnel .funnel .next_prev_wrapper:has(a.ctm--btn) { justify-content: flex-start; }

/* ==========================================================================
   5. Auswahlseite (fallprüfung.php: Liste der Fallprüfungen)
   ========================================================================== */

/* Dort gibt es keine Schrittleiste; die Seitenleiste würde dieselben Links ein zweites
   Mal zeigen. Ein Feld, ein Inhalt. */
body.p26-funnel .funnel:not(:has(.secondary_nav)) { grid-template-columns: minmax(0, 1fr); max-width: 44rem; min-height: 0; }
body.p26-funnel .funnel:not(:has(.secondary_nav)) .navigation__wrapper { display: none; }
body.p26-funnel .funnel:not(:has(.secondary_nav)) .form__wrapper { padding: clamp(1.5rem, 1rem + 3vw, 3rem); }
body.p26-funnel .funnel:not(:has(.secondary_nav)) .form_step_title { margin-bottom: 1.25rem; }
body.p26-funnel .funnel:not(:has(.secondary_nav)) .form_step_title .step__title {
  padding: 0;
  border: 0;
  color: var(--blue);
  font-size: var(--fs-5);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.015em;
}
body.p26-funnel .funnel:not(:has(.secondary_nav)) .form_content { display: grid; gap: .625rem; max-width: none; }
body.p26-funnel .funnel .radio__group.navigation { margin: 0 !important; }
body.p26-funnel .funnel .radio__group.navigation .radioInput > a {
  justify-content: space-between;
  min-height: 4rem;
  padding: 1rem 1.25rem;
  font-size: var(--fs-3);
  color: var(--blue);
}
body.p26-funnel .funnel .radio__group.navigation .radioInput > a::after {
  content: "";
  flex: none;
  width: .6rem;
  height: .6rem;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}
body.p26-funnel .funnel .radio__group.navigation a:hover {
  border-color: var(--blue);
  background: #eaf1f8 !important;   /* alte Hover-Regel ist !important */
  color: var(--blue) !important;
}
body.p26-funnel .funnel .radio__group.navigation a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* Der „Weiter“-Button dieser Seite hat keine Funktion (die Seite führt über die Links
   weiter; formNextStep() bricht hier mit einem Skriptfehler ab, weil es keinen
   Zurück-Button gibt). Er wird deshalb nicht gezeigt. Siehe Bericht. */
body.p26-funnel .funnel:not(:has(.secondary_nav)) .next_prev_wrapper.right { display: none; }

/* ==========================================================================
   6. Vollmacht (page-vollmacht.php): weißes Dokument auf Hellgrau
   Die Inline-Styles im Template bleiben (Ein-/Ausblenden der Meldungen hängt daran);
   die Selektoren hier sind stärker und überschreiben nur die Optik.
   ========================================================================== */

body.p26-funnel.page-template-page-vollmacht,
body.p26-funnel:has(.vollmacht-page) { background: var(--paper-2) !important; }   /* Inline: Verlauf mit !important */
body.p26-funnel .funnel__wrapper.d1:has(.vollmacht-page) { background: var(--paper-2) none !important; }
body.p26-funnel .vollmacht-page-wrapper { min-height: 0; }
body.p26-funnel .funnel__wrapper .vollmacht-page { min-height: 0; padding: 0; }
body.p26-funnel .vollmacht-page .vollmacht-page__container { max-width: 50rem; margin: 0 auto; }

body.p26-funnel .vollmacht-page .vollmacht-page__header { margin: 0 0 clamp(1.25rem, 1rem + 1.5vw, 2rem); text-align: left; }
body.p26-funnel .vollmacht-page .vollmacht-page__title {
  margin: 0 0 .625rem;
  color: var(--blue) !important;   /* Dunkelmodus: h1 mit !important */
  font-size: var(--fs-5);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
}
body.p26-funnel .vollmacht-page .vollmacht-page__subtitle { max-width: 38rem; margin: 0; color: var(--ink-2); font-size: var(--fs-3); line-height: 1.5; }

body.p26-funnel .vollmacht-page .vollmacht-page__form-box {
  padding: clamp(1.25rem, .5rem + 4vw, 3rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--ink);
}

body.p26-funnel .vollmacht-page .vollmacht-section-title,
body.p26-funnel .vollmacht-page .vollmacht-signature-title {
  margin: 0 0 1rem;
  color: var(--blue) !important;
  font-size: var(--fs-3);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.01em;
  text-align: left;
}

/* Datenfelder mit sichtbarer Beschriftung (vorausgefüllte Werte bleiben lesbar) */
body.p26-funnel .vollmacht-page .vollmacht-name-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 1rem; margin: 0; }
@media (min-width: 36rem) { body.p26-funnel .vollmacht-page .vollmacht-name-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
body.p26-funnel .vollmacht-page .vm-feld { display: grid; gap: .375rem; margin: 0 0 1rem; }
body.p26-funnel .vollmacht-page .vm-feld label { color: var(--ink); font-size: var(--fs-0); font-weight: 700; line-height: 1.3; letter-spacing: .02em; }
body.p26-funnel .vollmacht-page .vm-feld label span { color: var(--ink-2); font-weight: 400; }
body.p26-funnel .vollmacht-page .vollmacht-input {
  width: 100%;
  min-height: 3.25rem;
  margin: 0;
  padding: .8rem .9rem;
  border: 1.5px solid var(--line);
  border-radius: var(--r-1);
  background: var(--white);
  color: var(--ink);
  font-size: var(--fs-2);
  font-weight: 400;
  line-height: 1.4;
  box-shadow: none;
}
body.p26-funnel .vollmacht-page .vollmacht-input::placeholder { color: #8b97a4; }
body.p26-funnel .vollmacht-page .vm-feld .vollmacht-input::placeholder { color: transparent; }   /* Beschriftung steht darüber */
/* Das Skript färbt den Rahmen bei Fehlern inline (#c33) und danach wieder hellgrau */
body.p26-funnel .vollmacht-page .vollmacht-input:focus {
  outline: none;
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px rgba(15, 76, 129, .18);
}
body.p26-funnel .vollmacht-page .vollmacht-input:not(:placeholder-shown) { font-weight: 700; }

/* Vollmachtstext: als Dokument gesetzt, ganz lesbar (kein eigener Scrollbereich) */
body.p26-funnel .vollmacht-page .vollmacht-text-container {
  max-height: none;
  overflow: visible;
  margin: 1.25rem 0 2rem;
  padding: clamp(1.125rem, .75rem + 2vw, 2rem);
  background: #fafafa;
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  color: var(--ink);
}
body.p26-funnel .vollmacht-page .vollmacht-text-container p,
body.p26-funnel .vollmacht-page .vollmacht-text-container ol,
body.p26-funnel .vollmacht-page .vollmacht-text-container li {
  max-width: 68ch;
  color: var(--ink);
  font-size: var(--fs-1);
  font-weight: 400;
  line-height: 1.65;
}
body.p26-funnel .vollmacht-page .vollmacht-text-container p { margin: 0 0 .875rem; }
body.p26-funnel .vollmacht-page .vollmacht-text-container p:last-child { margin-bottom: 0; }
body.p26-funnel .vollmacht-page .vollmacht-text-container strong { font-weight: 700; color: var(--ink); }
body.p26-funnel .vollmacht-page .vollmacht-text-container ol { margin: 0 0 .875rem; padding-left: 1.5rem; list-style: decimal; }
body.p26-funnel .vollmacht-page .vollmacht-text-container li { margin: 0 0 .5rem; padding-left: .25rem; list-style: decimal; }
body.p26-funnel .vollmacht-page .vollmacht-text-container li::marker { color: var(--blue); font-weight: 700; }

/* Unterschrift */
body.p26-funnel .vollmacht-page .vollmacht-signature-section { margin-top: 0; padding-top: 1.75rem; border-top: 1px solid var(--line); text-align: left; }
body.p26-funnel .vollmacht-page .vollmacht-signature-title { margin-bottom: .375rem; }
body.p26-funnel .vollmacht-page .vollmacht-signature-subtitle { margin: 0 0 1rem; color: var(--ink-2); font-size: var(--fs-1); line-height: 1.5; text-align: left; }
body.p26-funnel .vollmacht-page .vollmacht-canvas-container { max-width: none; margin: 0 0 .75rem; }
/* Breite/Höhe des Canvas bleiben wie im Template (100 % / 200px); nur Rahmen und Farbe */
body.p26-funnel .vollmacht-page #signatureCanvas {
  border: 1.5px solid #b9c2cc;
  border-radius: var(--r-1);
  background: var(--white);
}
body.p26-funnel .vollmacht-page #signatureCanvas:hover { border-color: var(--blue); }
/* Unterschriftslinie, klickt durch */
body.p26-funnel .vollmacht-page .vollmacht-canvas-container::after {
  content: "";
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  bottom: 2.75rem;
  border-bottom: 1px solid var(--line);
  pointer-events: none;
}
body.p26-funnel .vollmacht-page .vollmacht-canvas-hint {
  color: #8b97a4;
  font-size: var(--fs-1);
  font-style: normal;
  white-space: nowrap;
}
body.p26-funnel .vollmacht-page .vollmacht-clear-btn {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  margin: 0 0 1rem;
  padding: .55rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: var(--r-1);
  background: var(--white);
  color: var(--blue);
  font-size: var(--fs-1);
  font-weight: 700;
  line-height: 1.2;
  transition: border-color .15s;
}
body.p26-funnel .vollmacht-page .vollmacht-clear-btn:hover { border-color: var(--blue); background: var(--white); color: var(--blue); }
body.p26-funnel .vollmacht-page .vollmacht-error {
  margin: 0 0 1rem;
  padding: .75rem .9rem;
  border: 1.5px solid var(--err);
  border-radius: var(--r-1);
  background: #fbeceb;
  color: var(--err);
  font-size: var(--fs-1);
  line-height: 1.45;
  text-align: left;
}
body.p26-funnel .vollmacht-page .vollmacht-ssl-notice { margin: 1rem 0 0; color: var(--ink-2); font-size: var(--fs-0); line-height: 1.45; }
body.p26-funnel .vollmacht-page .vollmacht-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 3.5rem;
  margin-top: .5rem;
  padding: .9rem 1.75rem;
  border: 0;
  border-radius: var(--r-1);
  background: var(--blue);
  box-shadow: none;
  color: var(--white);
  font-size: var(--fs-2);
  font-weight: 700;
  line-height: 1.2;
  transform: none;
}
body.p26-funnel .vollmacht-page .vollmacht-submit-btn:hover { background: var(--navy-700); box-shadow: none; transform: none; }
body.p26-funnel .vollmacht-page .vollmacht-submit-btn:disabled { opacity: .75; cursor: progress; }
body.p26-funnel .vollmacht-page .vollmacht-submit-btn svg { display: none; }
body.p26-funnel .vollmacht-page :is(.vollmacht-submit-btn, .vollmacht-clear-btn):focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
@media (max-width: 35.99rem) { body.p26-funnel .vollmacht-page .vollmacht-submit-btn { width: 100%; padding-inline: 1rem; font-size: var(--fs-1); } }

/* Erfolg */
body.p26-funnel .vollmacht-page .vollmacht-success { padding: clamp(1rem, 4vw, 2.5rem) 0; text-align: left; }
body.p26-funnel .vollmacht-page .vollmacht-success-icon {
  position: relative;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 0 1.25rem;
  border-radius: 50%;
  background: #e5f1ea;
  font-size: 0;              /* Zeichen ✓ im Template wird durch ein gezeichnetes Häkchen ersetzt */
  color: transparent;
}
body.p26-funnel .vollmacht-page .vollmacht-success-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 1.25rem;
  height: .65rem;
  border-left: 3px solid var(--ok);
  border-bottom: 3px solid var(--ok);
  transform: translate(-50%, -50%) rotate(-45deg);
}
body.p26-funnel .vollmacht-page .vollmacht-success-title {
  margin: 0 0 .75rem;
  color: var(--blue) !important;
  font-size: var(--fs-4);
  font-weight: 800;
  line-height: 1.2;
}
body.p26-funnel .vollmacht-page .vollmacht-success-text { max-width: 36rem; margin: 0; color: var(--ink-2); font-size: var(--fs-2); line-height: 1.6; }

/* ==========================================================================
   7. Dunkelmodus: Die neue Seite ist bewusst nur hell. style.css färbt im
   Dunkelmodus Text, Überschriften, Inputs und den Body um (teils !important).
   Hier wird für die Formularseiten alles auf die helle Fassung zurückgesetzt.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  body.p26-funnel { background-color: var(--paper-2) !important; color: var(--ink) !important; }
  body.p26-funnel .funnel__wrapper :is(p, li, span, div, label, small, strong) { color: inherit; }
  body.p26-funnel .funnel .form__step p,
  body.p26-funnel .funnel .terms__wrapper > label,
  body.p26-funnel .vollmacht-page .vollmacht-page__subtitle,
  body.p26-funnel .vollmacht-page .vollmacht-signature-subtitle,
  body.p26-funnel .vollmacht-page .vollmacht-ssl-notice,
  body.p26-funnel .vollmacht-page .vollmacht-success-text { color: var(--ink-2); }
  body.p26-funnel .vollmacht-page .vollmacht-text-container :is(p, li, strong) { color: var(--ink); }
  body.p26-funnel .vollmacht-page .vollmacht-error { color: var(--err); }
  body.p26-funnel .funnel .radioInput .popup :is(div, p, li, span) { color: var(--white); }
  body.p26-funnel .funnel__wrapper :is(h1, h2, h3, h4) { color: var(--blue) !important; }
  body.p26-funnel .funnel__wrapper a:not(.ctm--btn) { color: var(--blue); }
  body.p26-funnel .funnel .navigation__wrapper .primary_nav li.active a { color: var(--white); }
  body.p26-funnel .funnel__wrapper img { filter: none; }
  body.p26-funnel .funnel .next_prev_btn .icon img { filter: invert(1); }

  body.p26-funnel .funnel .form_content input[type="text"],
  body.p26-funnel .funnel .form_content textarea,
  body.p26-funnel .vollmacht-page .vollmacht-input {
    background-color: var(--white) !important;
    border: 1.5px solid var(--line) !important;
    color: var(--ink) !important;
  }
  body.p26-funnel .funnel .form_content input::placeholder,
  body.p26-funnel .funnel .form_content textarea::placeholder,
  body.p26-funnel .vollmacht-page .vollmacht-input::placeholder { color: #8b97a4 !important; }
  body.p26-funnel .funnel .form_content label.sr-only:not(:has(+ .hide)) + input::placeholder,
  body.p26-funnel .funnel .form_content label.sr-only:not(:has(+ .hide)) + textarea::placeholder,
  body.p26-funnel .vollmacht-page .vm-feld .vollmacht-input::placeholder { color: transparent !important; }
  body.p26-funnel .funnel .form_content input[type="text"]:focus,
  body.p26-funnel .funnel .form_content textarea:focus,
  body.p26-funnel .vollmacht-page .vollmacht-input:focus { border-color: var(--blue) !important; }
  body.p26-funnel .funnel .form__wrapper .form_content .invalid[type="text"],
  body.p26-funnel .funnel .form__wrapper .form_content textarea.invalid { border-color: var(--err) !important; background-color: #fffafa !important; }
  body.p26-funnel .funnel .terms__wrapper > input[type="checkbox"] { background-color: var(--white) !important; border-color: #8b97a4 !important; }
}

/* Bewegung reduziert: kein Einblenden */
@media (prefers-reduced-motion: reduce) {
  body.p26-funnel .funnel .form__step { animation: none; }
}

/* Druck (Vollmacht): nur das Dokument */
@media print {
  body.p26-funnel .funnel__wrapper.d1 { background: none !important; padding: 0 !important; }
  body.p26-funnel .vollmacht-page .vollmacht-page__form-box { border: 0; box-shadow: none; padding: 0; }
}

/* Live-Fix 08.10.: Rechtsgebiet-Umschalter mit drei langen Einträgen darf nie aus der Seitenleiste ragen */
body.p26-funnel .funnel .navigation__wrapper .primary_nav,
body.p26-funnel .funnel .navigation__wrapper .primary_nav li,
body.p26-funnel .funnel .navigation__wrapper .primary_nav li span { position: static; max-width: 100%; min-width: 0; transform: none; }
body.p26-funnel .funnel .navigation__wrapper .primary_nav a { max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: left; }

/* Fix 08.10 (f): Die Einwilligungstexte aus ACF tragen noch Inline-Farben vom alten,
   dunklen Design (style="color:#ffffff"). Auf weißem Grund unsichtbar, daher hier hart überschreiben. */
body.p26-funnel .terms__wrapper label a,
body.p26-funnel .terms__wrapper label a[style],
body.p26-funnel .funnel .form__step p a[style*="color"],
body.p26-funnel .vollmacht-page a[style*="color"] { color: var(--blue) !important; }
body.p26-funnel .funnel .form__wrapper .terms__wrapper > .invalid[type="checkbox"] + label a { color: var(--err) !important; }
body.p26-funnel .terms__wrapper label span[style*="color"],
body.p26-funnel .terms__wrapper label p[style*="color"] { color: inherit !important; }