/**
 * Gemeinsame Oberfläche für die fünf nativen Über-uns-Gadgets und ihre Nabenbühne.
 * Decision-IDs: pereta-ueberuns-fuenf-gadget-kacheln-20260828,
 * pereta-ueberuns-kacheln-wiederhergestellt-20260828,
 * pereta-ueberuns-kachel-eins-copy-20260828,
 * pereta-ueberuns-bestandsaufnahme-kachel1-20260828,
 * pereta-ueberuns-fluid-layout-fix-20260828,
 * pereta-ueberuns-leerraum-und-scrollfalle-20260828,
 * pereta-ueberuns-kacheln-linksfixiert-20260829,
 * pereta-ueberuns-linksnavigation-produktionsparitaet-20260829,
 * pereta-ueberuns-tabs-am-linken-rand-20260829,
 * pereta-ueberuns-tabs-kompakt-fluid-20260829,
 * pereta-ueberuns-tab-rail-phi-20260829,
 * pereta-ueberuns-ein-modul-doppelabnahme-20260829,
 * pereta-ueberuns-tabs-in-sektion-verankert-20260829,
 * pereta-ueberuns-tabs-bildschirmrand-wiederhergestellt-20260829,
 * pereta-ueberuns-tabs-rand-ohne-beschnitt-20260829,
 * pereta-agenturkontakt-fuenf-schritte-20260829,
 * pereta-agenturkontakt-tabs-kompakt-realrender-20260829,
 * pereta-agenturkontakt-einzelfragen-20260829,
 * pereta-agenturkontakt-sota-abschluss-20260830,
 * pereta-agenturkontakt-phi-neugestaltung-20260830,
 * pereta-agenturkontakt-einbildschirm-phi-20260830,
 * pereta-agenturkontakt-frage-ohne-scroll-20260830,
 * pereta-agenturkontakt-einleitung-vollstaendig-20260830,
 * pereta-agenturkontakt-kopf-typografie-20260830,
 * pereta-agenturkontakt-tabspalte-kompakt-20260830,
 * pereta-agenturkontakt-tabs-inhaltsbreit-20260830,
 * pereta-agenturkontakt-phi-arbeitsflaeche-20260830,
 * pereta-agenturkontakt-layout-phi-verdichtet-20260830,
 * pereta-agenturkontakt-css-cache-bust-20260830,
 * pereta-agenturkontakt-mobile-scrollfrei-20260830,
 * pereta-agenturkontakt-nutzen-copy-kompakt-20260830,
 * pereta-agenturkontakt-320-textkante-20260830,
 * pereta-agenturkontakt-fragefeld-phi-breite-20260831,
 * pereta-agenturkontakt-card-fluid-native-20260831,
 * pereta-startseite-sota-doppelabnahme-20260831
 */

/* Die Auswahl ist das vorhandene native ap/nabe-Modul. Labels statt Links
   bedeuten: kein Hash, kein Sprung und keine Navigation. Nur der aktuelle
   Formularschritt nimmt am Raster teil. */
#page-container .ap-nabe-buehne.ap-ueberuns-r3 {
  position: relative;
  isolation: isolate;
  display: grid !important;
  box-sizing: border-box;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  column-gap: 0;
  row-gap: clamp(0.5rem, 1.2svh, 1rem);
  block-size: auto !important;
  min-block-size: var(--ap-sektion-h, 100svh) !important;
  max-block-size: none !important;
  overflow: visible !important;
  overflow-anchor: none;
  padding-inline: 0;
  padding-block: clamp(0.625rem, 1.5svh, 1rem);
}

/* Decision-ID: pereta-agenturkontakt-layout-phi-verdichtet-20260830
   Ein Viewport bleibt das Ziel, aber nie auf Kosten vollständiger Inhalte.
   Erst ab einer belastbaren Gerätehöhe wird die Sektion exakt verriegelt. */
@media (min-height: 40rem) {
  #page-container .ap-nabe-buehne.ap-ueberuns-r3 {
    block-size: var(--ap-sektion-h, 100svh) !important;
    min-block-size: var(--ap-sektion-h, 100svh) !important;
    max-block-size: var(--ap-sektion-h, 100svh) !important;
    overflow: clip !important;
  }
}

/* Der Funnel tauscht Fragen und Kontaktdaten am selben Ort aus. Kein Kind
   darf dabei zum Scroll-Anker des Dokuments werden und die Seite verschieben. */
#page-container .ap-nabe-buehne.ap-ueberuns-r3,
#page-container .ap-nabe-buehne.ap-ueberuns-r3 * {
  overflow-anchor: none;
}

#page-container:has(.ap-nabe-buehne.ap-ueberuns-r3) {
  overflow-anchor: none;
}

/* Fünfstufiges Kontaktformular. Die Divi-Zeilen, Module und Naben-Radios
   bleiben nativ; dieses Bauteil steuert nur die lokale Formularoberfläche.
   Decision-ID: pereta-agenturkontakt-fuenf-schritte-20260829 */
.ap-ueberuns-gadget.ap-agenturfunnel {
  --af-control-height: 3.25rem;
  --af-control-radius: var(--gvid-apf-radius-m, 0.625rem);
  --af-card-radius: var(--gvid-ap-v2-card-radius, var(--gvid-apf-radius-l, 1rem));
  --af-gap-xs: var(--gvid-apf-gap-xs, 0.618rem);
  --af-work-gap: max(0.5rem, var(--gvid-apf-gap-xs, 0.618rem));
  --af-gap-s: var(--gvid-apf-gap-s, 0.875rem);
  --af-gap-m: var(--gvid-apf-gap-m, 1rem);
  --af-gap-l: var(--gvid-apf-gap-l, 1.5rem);
  /* Die Phi-Begrenzung liegt nativ auf der blauen Divi-Card. Der eigentliche
     Arbeitsinhalt nutzt deren Innenfläche vollständig; eine zweite 61,8-%-
     Begrenzung würde die Fläche doppelt verkleinern. */
  --af-work-inline-size: 100%;
  --af-selected: color-mix(in srgb, var(--ug-gold-soft) 34%, var(--ug-surface));
  container-type: inline-size;
  display: grid;
  grid-template-areas:
    "status"
    "arbeit";
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--af-gap-m);
  min-inline-size: 0;
  padding: 0;
}

.ap-agenturfunnel > .ap-ueberuns-gadget__kopf {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ap-agenturfunnel > .ap-ueberuns-gadget__kopf .ap-ueberuns-gadget__kicker {
  margin-block-end: var(--af-gap-xs) !important;
  color: var(--ug-gold-deep);
  font-size: 0.7875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
}

.ap-agenturfunnel > .ap-ueberuns-gadget__kopf h3 {
  color: var(--ug-ink);
  font-size: var(--gvid-ap-v2-h3, clamp(1rem, 0.85rem + 0.75vw, 1.625rem));
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.ap-agenturfunnel > .ap-ueberuns-gadget__kopf > p:last-child {
  display: none;
  max-inline-size: 46rem;
  margin-block-start: var(--af-gap-xs);
  color: var(--ug-muted);
  font-size: clamp(0.9375rem, 0.9rem + 0.12vw, 1rem);
  font-weight: 400;
  line-height: 1.55;
}

.ap-agenturfunnel__status {
  grid-area: status;
  display: flex;
  gap: var(--af-gap-s);
  align-items: center;
  justify-content: space-between;
  min-inline-size: 0;
  padding-block: var(--af-gap-xs);
  border-block: 1px solid var(--ug-border);
}

/* Decision-ID: pereta-agenturkontakt-card-fluid-native-20260831
   Fortschritt, Frage, Prüfung und Kontakt teilen sich die volle Innenachse
   der nativ fluid begrenzten Divi-Card. Dadurch bleibt jeder Zustand gleich
   breit, ohne innerhalb der Card zwei ungenutzte Seitenspalten zu erzeugen. */
.ap-agenturfunnel__status,
.ap-agenturfunnel__arbeitsblock,
.ap-agenturfunnel__pruefung,
.ap-agenturfunnel__kontakt {
  inline-size: var(--af-work-inline-size);
  max-inline-size: 100%;
  justify-self: center;
}

.ap-agenturfunnel__status p {
  margin: 0;
}

.ap-agenturfunnel__status [data-ap-agenturfunnel-fortschritt] {
  flex: 0 0 auto;
  color: var(--ug-ink);
  font-size: max(0.875rem, var(--gvid-apf-type-sm, 0.875rem));
  font-weight: 600;
  letter-spacing: 0.01em;
}

.ap-agenturfunnel__hinweis {
  min-inline-size: 0;
  color: var(--ug-muted);
  font-size: max(0.875rem, var(--gvid-apf-type-sm, 0.875rem));
  font-weight: 400;
  text-align: end;
}

.ap-agenturfunnel__arbeitsblock {
  grid-area: arbeit;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--af-work-gap);
  min-block-size: 0;
}

.ap-agenturfunnel__fragen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: stretch;
  min-block-size: 0;
  overflow: visible;
}

.ap-agenturfunnel__fragen[hidden],
.ap-agenturfunnel__frage[hidden] {
  display: none;
}

.ap-agenturfunnel__frage {
  align-self: stretch;
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: 100%;
  margin: 0;
  padding: clamp(1rem, 0.875rem + 0.4vw, 1.25rem);
  background: var(--ug-surface);
  border: 1px solid var(--ug-border);
  border-radius: var(--af-card-radius);
  box-shadow: 0 0.25rem 0.75rem rgb(15 26 46 / 5%);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.ap-agenturfunnel__frage.is-current {
  display: grid;
  align-content: center;
}

.ap-agenturfunnel__frage.is-answered {
  border-color: var(--ug-gold);
  box-shadow: 0 0.25rem 0.75rem rgb(15 26 46 / 5%), inset 0.2rem 0 0 var(--ug-gold);
}

.ap-agenturfunnel__frage legend {
  float: left;
  inline-size: 100%;
  margin-block-end: var(--af-gap-m);
  padding: 0;
  color: var(--ug-ink);
  font-size: var(--gvid-ap-v2-h3, clamp(1rem, 0.85rem + 0.75vw, 1.625rem));
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.ap-agenturfunnel__frage legend > span {
  display: block;
  margin-block-end: var(--af-gap-xs);
  color: var(--ug-gold-deep);
  font-size: 0.7875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.ap-agenturfunnel__optionen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  clear: both;
  gap: var(--af-gap-s);
}

.ap-agenturfunnel__optionen[data-ap-agenturfunnel-optionen="4"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ap-agenturfunnel__option {
  position: relative;
  display: flex;
  gap: var(--af-gap-xs);
  align-items: center;
  min-inline-size: 0;
  min-block-size: var(--af-control-height);
  padding: var(--af-gap-xs) var(--af-gap-m);
  color: var(--ug-ink);
  background: var(--ug-surface);
  border: 1px solid var(--ug-border);
  border-radius: var(--af-control-radius);
  cursor: pointer;
  font-size: max(0.875rem, var(--gvid-apf-type-sm, 0.875rem));
  font-weight: 600;
  line-height: 1.3;
  text-align: start;
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.ap-agenturfunnel__option::before {
  content: "";
  flex: 0 0 auto;
  inline-size: 1.125rem;
  block-size: 1.125rem;
  background: var(--ug-surface);
  border: 1px solid var(--ug-border);
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.25rem var(--ug-surface);
}

.ap-agenturfunnel__option input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  clip-path: inset(50%);
}

.ap-agenturfunnel__option:has(input:checked) {
  background: var(--af-selected);
  border-color: var(--ug-gold);
  box-shadow: 0 0 0 1px var(--ug-gold);
}

.ap-agenturfunnel__option:has(input:checked)::before {
  background: var(--ug-gold);
  border-color: var(--ug-gold);
}

.ap-agenturfunnel__option:focus-within {
  outline: 3px solid var(--ug-gold);
  outline-offset: 2px;
}

.ap-agenturfunnel__navigation {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--af-gap-s);
  align-items: center;
  padding-block-start: 0;
}

.ap-agenturfunnel button,
.ap-agenturfunnel__pruefung button,
.ap-agenturfunnel__kontakt input,
.ap-agenturfunnel__kontakt textarea {
  font: inherit;
}

.ap-agenturfunnel__navigation button,
.ap-agenturfunnel__pruefung button,
.ap-agenturfunnel__kontakt button[type="submit"] {
  min-inline-size: var(--af-control-height);
  min-block-size: var(--af-control-height);
  padding: var(--af-gap-xs) var(--af-gap-l);
  color: var(--ug-surface);
  background: var(--ug-gold);
  border: 1px solid var(--ug-gold);
  border-radius: var(--af-control-radius);
  cursor: pointer;
  font-size: max(0.875rem, var(--gvid-apf-type-sm, 0.875rem));
  font-weight: 600;
  line-height: 1.3;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.ap-agenturfunnel__navigation button:disabled,
.ap-agenturfunnel__pruefung button:disabled,
.ap-agenturfunnel__kontakt button[type="submit"]:disabled {
  color: var(--ug-muted);
  background: color-mix(in srgb, var(--ug-surface) 78%, transparent);
  border-color: var(--ug-border);
  cursor: default;
  opacity: 1;
}

.ap-agenturfunnel__navigation [data-ap-agenturfunnel-zurueck][aria-hidden="true"] {
  visibility: hidden;
  pointer-events: none;
}

.ap-agenturfunnel__navigation [data-ap-agenturfunnel-zurueck] {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  color: var(--ug-ink);
  background: transparent;
  border-color: var(--ug-border);
}

.ap-agenturfunnel__navigation [data-ap-agenturfunnel-weiter] {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  background: var(--ug-gold);
}

.ap-agenturfunnel button:focus-visible,
.ap-agenturfunnel input:focus-visible,
.ap-agenturfunnel textarea:focus-visible,
.ap-agenturfunnel a:focus-visible {
  outline: 3px solid var(--ug-gold);
  outline-offset: 3px;
}

.ap-agenturfunnel[data-ap-agenturfunnel-pruefung-offen="1"],
.ap-agenturfunnel[data-ap-agenturfunnel-kontakt-offen="1"] {
  grid-template-areas:
    "haupt"
    "navigation";
  grid-template-rows: minmax(0, 1fr) auto;
}

.ap-agenturfunnel[data-ap-agenturfunnel-pruefung-offen="1"]
  > .ap-agenturfunnel__arbeitsblock,
.ap-agenturfunnel[data-ap-agenturfunnel-kontakt-offen="1"]
  > .ap-agenturfunnel__arbeitsblock {
  display: contents;
}

.ap-agenturfunnel[data-ap-agenturfunnel-pruefung-offen="1"]
  > .ap-agenturfunnel__arbeitsblock > .ap-agenturfunnel__navigation,
.ap-agenturfunnel[data-ap-agenturfunnel-kontakt-offen="1"]
  > .ap-agenturfunnel__arbeitsblock > .ap-agenturfunnel__navigation {
  grid-area: navigation;
  inline-size: var(--af-work-inline-size);
  max-inline-size: 100%;
  justify-self: center;
}

.ap-agenturfunnel[data-ap-agenturfunnel-pruefung-offen="1"]
  > .ap-ueberuns-gadget__kopf,
.ap-agenturfunnel[data-ap-agenturfunnel-kontakt-offen="1"]
  > .ap-ueberuns-gadget__kopf {
  display: none;
}

.ap-agenturfunnel[data-ap-agenturfunnel-pruefung-offen="1"]
  > .ap-agenturfunnel__status,
.ap-agenturfunnel[data-ap-agenturfunnel-kontakt-offen="1"]
  > .ap-agenturfunnel__status {
  display: none;
}

.ap-agenturfunnel__pruefung,
.ap-agenturfunnel__kontakt {
  grid-area: haupt;
  min-block-size: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.ap-agenturfunnel__pruefung {
  display: grid;
  align-content: start;
  gap: var(--af-gap-m);
  padding: clamp(1rem, 0.75rem + 1vw, 1.625rem);
  background: var(--ug-surface);
  border: 1px solid var(--ug-border);
  border-radius: var(--af-card-radius);
}

.ap-agenturfunnel__pruefung[hidden] {
  display: none;
}

.ap-agenturfunnel__pruefung-kopf h4,
.ap-agenturfunnel__pruefung-kopf p,
.ap-agenturfunnel__ergebnis p,
.ap-agenturfunnel__antwortgruppe h5 {
  margin: 0;
}

.ap-agenturfunnel__pruefung-kopf {
  display: grid;
  gap: 0.32rem;
}

.ap-agenturfunnel__pruefung-kopf h4 {
  color: var(--ug-ink);
  font-size: clamp(1.25rem, 1.12rem + 0.42vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.ap-agenturfunnel__pruefung-kopf > p:last-child {
  color: var(--ug-muted);
  font-size: max(0.875rem, var(--gvid-apf-type-sm, 0.875rem));
  line-height: 1.5;
}

.ap-agenturfunnel__ergebnis {
  display: grid;
  gap: var(--af-gap-xs);
  padding: var(--af-gap-m);
  background: color-mix(in srgb, var(--ug-gold-soft) 44%, var(--ug-surface));
  border-inline-start: 0.25rem solid var(--ug-gold);
  border-radius: var(--af-control-radius);
}

.ap-agenturfunnel__ergebnis > strong {
  color: var(--ug-ink);
  font-size: 1rem;
  font-weight: 600;
}

.ap-agenturfunnel__ergebnis p {
  color: var(--ug-ink);
  font-size: max(0.875rem, var(--gvid-apf-type-sm, 0.875rem));
  line-height: 1.5;
}

.ap-agenturfunnel__ergebnis .ap-agenturfunnel__ergebnis-hinweis {
  color: var(--ug-muted);
  font-size: max(0.875rem, var(--gvid-apf-type-sm, 0.875rem));
}

.ap-agenturfunnel__antworten {
  display: grid;
  gap: var(--af-gap-m);
}

.ap-agenturfunnel__antwortgruppe {
  display: grid;
  gap: 0;
}

.ap-agenturfunnel__antwortgruppe h5 {
  padding-block-end: var(--af-gap-xs);
  color: var(--ug-ink);
  border-block-end: 1px solid var(--ug-border);
  font-size: 1rem;
  font-weight: 600;
}

.ap-agenturfunnel__antwort {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(7rem, 0.72fr) auto;
  gap: var(--af-gap-xs);
  align-items: center;
  min-inline-size: 0;
  padding-block: var(--af-gap-xs);
  border-block-end: 1px solid var(--ug-border);
  font-size: max(0.875rem, var(--gvid-apf-type-sm, 0.875rem));
  line-height: 1.4;
}

.ap-agenturfunnel__antwort > span {
  color: var(--ug-muted);
}

.ap-agenturfunnel__antwort > strong {
  min-inline-size: 0;
  color: var(--ug-ink);
}

.ap-agenturfunnel__antwort button {
  min-block-size: var(--af-control-height);
  padding-inline: var(--af-gap-m);
  color: var(--ug-ink);
  background: transparent;
  border-color: var(--ug-border);
}

.ap-agenturfunnel__kontakt-oeffnen {
  justify-self: start;
}

.ap-agenturfunnel__kontakt {
  display: grid;
  align-content: start;
  gap: var(--af-gap-m);
  padding: clamp(1rem, 0.75rem + 1vw, 1.625rem);
  background: var(--ug-surface);
  border: 1px solid var(--ug-border);
  border-radius: var(--af-card-radius);
}

.ap-agenturfunnel__kontakt[hidden] {
  display: none;
}

.ap-agenturfunnel__kontakt-kopf h4,
.ap-agenturfunnel__kontakt-kopf p,
.ap-agenturfunnel__einwilligung,
.ap-agenturfunnel__fehler,
.ap-agenturfunnel__sendestatus {
  margin: 0;
}

.ap-agenturfunnel__kontakt-kopf h4 {
  color: var(--ug-ink);
  font-size: clamp(1.25rem, 1.12rem + 0.42vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.ap-agenturfunnel__kontakt-kopf p,
.ap-agenturfunnel__einwilligung,
.ap-agenturfunnel__sendestatus {
  color: var(--ug-muted);
  font-size: max(0.875rem, var(--gvid-apf-type-sm, 0.875rem));
  line-height: 1.5;
}

.ap-agenturfunnel__kontakt-raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--af-gap-s);
}

.ap-agenturfunnel__kontakt-raster label {
  display: grid;
  gap: 0.375rem;
  color: var(--ug-ink);
  font-size: max(0.875rem, var(--gvid-apf-type-sm, 0.875rem));
  font-weight: 600;
}

.ap-agenturfunnel__kontakt-raster input,
.ap-agenturfunnel__kontakt-raster textarea {
  inline-size: 100%;
  min-block-size: 3rem;
  padding: var(--af-gap-xs) var(--af-gap-m);
  color: var(--ug-ink);
  background: var(--ug-panel);
  border: 1px solid var(--ug-border);
  border-radius: var(--af-control-radius);
}

.ap-agenturfunnel__kontakt [aria-invalid="true"] {
  background: #fff8f8;
  border-color: #a92f2f;
  box-shadow: 0 0 0 1px #a92f2f;
}

.ap-agenturfunnel__feldfehler {
  color: #7a1f1f;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4;
}

.ap-agenturfunnel__feldfehler[hidden] {
  display: none;
}

.ap-agenturfunnel__nachricht {
  grid-column: 1 / -1;
}

.ap-agenturfunnel__einwilligung {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--af-gap-xs);
  align-items: start;
}

.ap-agenturfunnel__einwilligung input {
  inline-size: 1.1rem;
  block-size: 1.1rem;
  margin-block-start: 0.15rem;
}

.ap-agenturfunnel__einwilligung a {
  color: var(--ug-gold-deep);
  font-weight: 600;
}

.ap-agenturfunnel__honigtopf {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.ap-agenturfunnel__fehler {
  padding: 0.65rem 0.75rem;
  color: #7a1f1f;
  background: #fff1f1;
  border-inline-start: 0.22rem solid #a92f2f;
  border-radius: var(--af-control-radius);
}

#page-container .ap-nabe-buehne.ap-ueberuns-r3
  .ap-nabe__kachel.is-locked {
  cursor: not-allowed;
  opacity: 0.46;
}

#page-container .ap-nabe-buehne.ap-ueberuns-r3
  .ap-nabe__kachel.is-complete:not(.is-locked)::after {
  content: "✓";
  margin-inline-start: auto;
  color: var(--gcid-c-gold-600, #755d22);
  font-weight: 700;
}

#page-container .ap-nabe-buehne.ap-ueberuns-r3
  .ap_ueberuns_gadget_modul > .et_pb_module_inner,
#page-container .ap-nabe-buehne.ap-ueberuns-r3 .ap-agenturfunnel {
  block-size: 100%;
  min-block-size: 0;
}

#page-container .ap-nabe-buehne.ap-ueberuns-r3 .ap-agenturfunnel {
  overflow: hidden;
}

/* Auf Tablet und Mobil reicht der aktive Etappentitel als Orientierung.
   Kicker und Beschreibung wiederholen nur Nabe und Seiteneinleitung; ihr
   Wegfall gibt selbst der längsten Einzelfrage einen scrollfreien Platz. */
@media (max-width: 64rem) {
  .ap-agenturfunnel > .ap-ueberuns-gadget__kopf
    .ap-ueberuns-gadget__kicker,
  .ap-agenturfunnel > .ap-ueberuns-gadget__kopf > p:last-child {
    display: none;
  }
}

@media (max-width: 47.9375rem) {
  /* Alle fünf gleich großen Frageetappen belegen mobil denselben Rasterplatz.
     `visibility` aus der nativen Nabe blendet vier davon aus, ihr Platz hält
     die Bühne beim Wechsel aber stabil. Die frühere Neun-Fragen-Kachel, die
     diesen Ansatz unbrauchbar machte, existiert nicht mehr. */
  @supports selector(:has(*)) {
    body #page-container .ap-nabe-buehne.ap-ueberuns-r3
      > .et_pb_row.ap-nabe-tafel {
      display: grid;
    }
  }

  .ap-agenturfunnel__status {
    display: grid;
    gap: 0.25rem;
    justify-content: stretch;
  }

  .ap-agenturfunnel__hinweis {
    text-align: start;
  }

  /* Auch mobil bleiben Antwortprüfung und Kontakt am selben Platz. Die
     Prüfung mit 25 Zeilen scrollt innerhalb der Card; dadurch kollabiert das
     Dokument beim Wechsel zu den Kontaktdaten nicht um mehrere Viewports. */
  #page-container .ap-nabe-buehne.ap-ueberuns-r3
    .ap-agenturfunnel[data-ap-agenturfunnel-pruefung-offen="1"],
  #page-container .ap-nabe-buehne.ap-ueberuns-r3
    .ap-agenturfunnel[data-ap-agenturfunnel-kontakt-offen="1"] {
    block-size: 100%;
    min-block-size: 0;
    overflow: hidden;
  }

  .ap-agenturfunnel__optionen,
  .ap-agenturfunnel__optionen[data-ap-agenturfunnel-optionen="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ap-agenturfunnel__optionen
    > .ap-agenturfunnel__option:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .ap-agenturfunnel__option {
    padding-inline: var(--af-gap-xs);
  }

  .ap-agenturfunnel__kontakt-raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ap-agenturfunnel__antwort {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .ap-agenturfunnel__antwort > strong {
    grid-column: 1;
  }

  .ap-agenturfunnel__antwort button {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .ap-agenturfunnel__navigation button,
  .ap-agenturfunnel__kontakt button[type="submit"] {
    inline-size: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ap-agenturfunnel__frage {
    transition: none;
  }
}

/* Die Kachel-Navigation gehört zur Sektion, nicht zur Inhalts-Card. Darum darf
   die Sektion keine gemeinsame Kartenfläche hinter Navigation und Tafel
   zeichnen. Beide bleiben eigenständige native Divi-Zeilen. */
#page-container .ap-nabe-buehne.ap-ueberuns-r3::before {
  content: none;
}

#page-container .ap-nabe-buehne.ap-ueberuns-r3::after {
  content: none;
}

#page-container .ap-nabe-buehne.ap-ueberuns-r3 > .et_pb_row {
  position: relative;
  z-index: 1;
  min-block-size: 0;
}

#page-container .ap-nabe-buehne.ap-ueberuns-r3 > .et_pb_row.ap-ueberuns-einleitung {
  grid-column: 1;
  grid-row: 1;
  width: min(92%, var(--gvid-apf-width-wide, 80rem)) !important;
  max-width: none !important;
  margin: 0 auto !important;
  align-self: center;
  overflow: visible;
}

#page-container .ap-nabe-buehne.ap-ueberuns-r3 > .et_pb_row.ap-nabe-leiste {
  position: relative;
  top: auto;
  grid-column: 1;
  grid-row: 2;
  box-sizing: border-box;
  width: min(92%, var(--gvid-apf-width-wide, 80rem)) !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 0;
  overflow: visible !important;
  align-self: stretch;
}

#page-container .ap-nabe-buehne.ap-ueberuns-r3 > .et_pb_row.ap-nabe-tafel {
  grid-column: 1;
  grid-row: 3;
  box-sizing: border-box;
  width: min(92%, var(--gvid-apf-width-wide, 80rem)) !important;
  max-width: none !important;
  margin-inline: auto !important;
  block-size: 100%;
  min-block-size: 0;
  align-self: stretch;
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#page-container .ap-nabe-buehne.ap-ueberuns-r3
  > .et_pb_row.ap-ueberuns-einleitung
  > .et_pb_column {
  display: grid;
  block-size: 100%;
  min-block-size: 0;
  align-content: center;
  gap: clamp(0.25rem, 0.7svh, 0.5rem);
  overflow: visible;
}

#page-container .ap-nabe-buehne.ap-ueberuns-r3
  > .et_pb_row.ap-ueberuns-einleitung
  p,
#page-container .ap-nabe-buehne.ap-ueberuns-r3
  > .et_pb_row.ap-ueberuns-einleitung h2 {
  margin-block: 0 !important;
}

@supports selector(:has(*)) {
  #page-container .ap-nabe-buehne.ap-ueberuns-r3 > .et_pb_row.ap-nabe-tafel {
    display: none;
  }

  #page-container .ap-nabe-buehne.ap-ueberuns-r3:has(#ap-nabe-ueber-uns-wer:checked)
    > .et_pb_row.ap-nabe-tafel--ueber-uns-wer,
  #page-container .ap-nabe-buehne.ap-ueberuns-r3:has(#ap-nabe-ueber-uns-grundlage:checked)
    > .et_pb_row.ap-nabe-tafel--ueber-uns-grundlage,
  #page-container .ap-nabe-buehne.ap-ueberuns-r3:has(#ap-nabe-ueber-uns-messen:checked)
    > .et_pb_row.ap-nabe-tafel--ueber-uns-messen,
  #page-container .ap-nabe-buehne.ap-ueberuns-r3:has(#ap-nabe-ueber-uns-arbeitsweise:checked)
    > .et_pb_row.ap-nabe-tafel--ueber-uns-arbeitsweise,
  #page-container .ap-nabe-buehne.ap-ueberuns-r3:has(#ap-nabe-ueber-uns-start:checked)
    > .et_pb_row.ap-nabe-tafel--ueber-uns-start {
    display: grid;
    visibility: visible;
  }
}

#page-container .ap-nabe-tafel--ueber-uns-wer .et_pb_text_inner > h4 {
  margin-block: clamp(1rem, 1.4vw, 1.5rem) clamp(0.35rem, 0.55vw, 0.58rem);
  font-size: clamp(1rem, 0.94rem + 0.22vw, 1.15rem);
  line-height: 1.3;
}

#page-container .ap-nabe-tafel--ueber-uns-wer .et_pb_text_inner > p {
  margin-block: 0;
}

/* Die lange sichtbare Kopfzeile wiederholt die Einleitung direkt darüber. Sie
   bleibt für Vorlesehilfen erhalten, nimmt aber im kompakten Wechsler keinen
   eigenen Block mehr ein. */
#page-container .ap-nabe-buehne.ap-ueberuns-r3
  > .et_pb_row.ap-nabe-leiste
  .ap-nabe__kopf {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Mobil bleibt die Navigation als kompakte, einreihige Fortschrittsanzeige
   sichtbar. Die Schrittbezeichnung steht bereits im aktiven Modul. */
#page-container .ap-nabe-buehne.ap-ueberuns-r3
  > .et_pb_row.ap-nabe-leiste
  .ap-nabe {
  position: relative;
  inset-inline-start: 0;
  top: auto;
  box-sizing: border-box;
  inline-size: 100% !important;
  gap: var(--gvid-apf-gap-xs, 0.618rem);
}

#page-container .ap-nabe-buehne.ap-ueberuns-r3
  > .et_pb_row.ap-nabe-leiste
  .ap-nabe__kachel {
  min-block-size: clamp(2.75rem, 2.58rem + 0.3vw, 3rem);
  padding-block: clamp(0.3rem, 0.25rem + 0.15vw, 0.42rem);
  padding-inline: clamp(0.42rem, 0.34rem + 0.25vw, 0.62rem);
}

#page-container .ap-nabe-buehne.ap-ueberuns-r3
  > .et_pb_row.ap-nabe-leiste
  .ap-nabe__label {
  font-size: clamp(0.875rem, 0.84rem + 0.13vw, 0.96rem);
  line-height: 1.2;
}

/* Divis globale Eyebrow-Zeilenhoehe und der Nabe-Grundabstand machten die
   linke Navigation im echten Seitenrender 72 px hoch. Im Kontaktfunnel ist
   die Zahl nur eine knappe Orientierung; 44 px Bedienflaeche bleiben durch
   die Kachel selbst garantiert. */
#page-container .ap-nabe-buehne.ap-ueberuns-r3
  > .et_pb_row.ap-nabe-leiste
  .ap-nabe__nummer {
  margin: 0;
  font-size: clamp(0.68rem, 0.65rem + 0.1vw, 0.76rem);
  line-height: 1;
}

#page-container .ap-nabe-buehne.ap-ueberuns-r3
  > .et_pb_row.ap-nabe-leiste
  .ap-nabe__schalter:checked + .ap-nabe__kachel {
  color: var(--gcid-c-text, #0f1a2e);
  background: color-mix(
    in srgb,
    var(--gcid-c-gold-300, #e1cc98) 46%,
    var(--gcid-c-bg, #fff)
  );
  border-color: var(--gcid-c-gold-300, #e1cc98);
}

#page-container .ap-nabe-buehne.ap-ueberuns-r3
  > .et_pb_row.ap-nabe-leiste
  .ap-nabe__schalter:checked + .ap-nabe__kachel
  .ap-nabe__label {
  color: var(--gcid-c-text, #0f1a2e);
}

/* Ab Tabletbreite sitzt die Navigation wie im früher abgenommenen Zustand am
   linken Bildschirmrand. Die Divi-Zeile bleibt im Sektionsraster sticky; nur
   ihr kompakter Schalterblock wird um den äußeren Sektionsabstand nach links
   gezogen. Die Inhalts-Card bleibt davon strukturell und visuell getrennt. */
@media (width >= 48rem) {
  #page-container .ap-nabe-buehne.ap-ueberuns-r3 {
    --ap-ueberuns-randabstand: clamp(0.25rem, 0.15rem + 0.25vw, 0.5rem);
    --ap-ueberuns-tab-rail: clamp(9.5rem, 8.75rem + 1vw, 10.75rem);
    grid-template-columns: var(--ap-ueberuns-tab-rail) minmax(0, 1fr);
    grid-template-rows: auto clamp(24rem, 48svh, 28rem);
    column-gap: clamp(1rem, 1.5vw, 1.5rem) !important;
    align-content: center;
    padding-inline: var(--ap-ueberuns-randabstand);
  }

  #page-container .ap-nabe-buehne.ap-ueberuns-r3 > .et_pb_row.ap-ueberuns-einleitung {
    grid-column: 1 / -1;
    grid-row: 1;
    width: min(92%, var(--gvid-apf-width-wide, 80rem)) !important;
    max-width: var(--gvid-apf-width-wide, 80rem) !important;
    margin-inline: auto !important;
    align-self: center;
  }

  #page-container .ap-nabe-buehne.ap-ueberuns-r3 > .et_pb_row.ap-nabe-leiste {
    grid-column: 1;
    grid-row: 2;
    width: 100% !important;
    max-width: none !important;
    position: sticky;
    top: clamp(0.625rem, 1.5svh, 1rem);
    align-self: center;
    margin: 0 !important;
    padding: 0;
    z-index: 2;
  }

  /* Die native Divi-Spalte bleibt offen, damit Fokusrahmen und Statuszeichen
     des inhaltsbreiten Schalters nicht an der Zeilenkante abgeschnitten sind. */
  #page-container .ap-nabe-buehne.ap-ueberuns-r3
    > .et_pb_row.ap-nabe-leiste
    > .et_pb_column {
    inline-size: 100% !important;
    overflow: visible !important;
  }

  #page-container .ap-nabe-buehne.ap-ueberuns-r3
    > .et_pb_row.ap-nabe-leiste
    :is(.ap_nabe_modul, .ap_nabe_modul > .et_pb_module_inner) {
    inline-size: 100% !important;
  }

  #page-container .ap-nabe-buehne.ap-ueberuns-r3
    > .et_pb_row.ap-nabe-leiste
    .ap-nabe {
    position: relative;
    inset-inline-start: 0;
    top: auto;
    box-sizing: border-box;
    inline-size: 100% !important;
    grid-template-columns: max-content;
    grid-template-rows: min-content;
    align-content: start;
    gap: var(--gvid-apf-gap-xs, 0.618rem);
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  #page-container .ap-nabe-buehne.ap-ueberuns-r3
    > .et_pb_row.ap-nabe-leiste
    .ap-nabe::before {
    content: "";
    position: absolute;
    inset-block: 1.25rem;
    inset-inline-start: 1.375rem;
    inline-size: 1px;
    background: var(--gcid-c-border, #e0e8f5);
  }

  #page-container .ap-nabe-buehne.ap-ueberuns-r3
    > .et_pb_row.ap-nabe-leiste
    .ap-nabe__kachel {
    position: relative;
    grid-column: auto;
    grid-row: auto;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: var(--gvid-apf-gap-xs, 0.618rem);
    align-items: center;
    justify-items: start;
    justify-self: start;
    inline-size: fit-content;
    max-inline-size: 100%;
    min-block-size: 3.25rem;
    padding: 0.375rem clamp(0.5rem, 0.35rem + 0.4vw, var(--gvid-apf-gap-xs, 0.618rem));
    text-align: left;
    background: transparent !important;
    border-color: transparent !important;
    border-radius: var(--gvid-apf-radius-m, 0.625rem);
    box-shadow: none;
    white-space: nowrap;
  }

  #page-container .ap-nabe-buehne.ap-ueberuns-r3
    > .et_pb_row.ap-nabe-leiste
    .ap-nabe__nummer {
    position: relative;
    z-index: 1;
    display: grid;
    inline-size: 2rem;
    block-size: 2rem;
    place-items: center;
    color: var(--gcid-c-text-muted, #3b4761);
    background: var(--gcid-c-bg-alt, #faf7ef);
    border: 1px solid var(--gcid-c-border, #e0e8f5);
    border-radius: 50%;
    font-size: 0.875rem;
    font-weight: 600;
  }

  #page-container .ap-nabe-buehne.ap-ueberuns-r3
    > .et_pb_row.ap-nabe-leiste
    .ap-nabe__kachel:hover {
    background: color-mix(in srgb, var(--gcid-c-bg, #fff) 76%, transparent) !important;
    border-color: transparent !important;
    transform: none;
  }

  #page-container .ap-nabe-buehne.ap-ueberuns-r3
    > .et_pb_row.ap-nabe-leiste
    .ap-nabe__schalter:checked + .ap-nabe__kachel {
    color: var(--gcid-c-text, #0f1a2e) !important;
    background: color-mix(
      in srgb,
      var(--gcid-c-gold-300, #e1cc98) 46%,
      var(--gcid-c-bg, #fff)
    ) !important;
    border-color: transparent !important;
    border-inline-start-color: var(--gcid-c-gold, #8a6d28) !important;
    box-shadow: none;
  }

  #page-container .ap-nabe-buehne.ap-ueberuns-r3
    > .et_pb_row.ap-nabe-leiste
    .ap-nabe__schalter:checked + .ap-nabe__kachel
    .ap-nabe__nummer {
    color: var(--gcid-c-bg, #fff);
    background: var(--gcid-c-gold, #8a6d28);
    border-color: var(--gcid-c-gold, #8a6d28);
  }

  #page-container .ap-nabe-buehne.ap-ueberuns-r3
    > .et_pb_row.ap-nabe-leiste
    .ap-nabe__schalter:checked + .ap-nabe__kachel
    .ap-nabe__label {
    color: var(--gcid-c-text, #0f1a2e) !important;
  }

  #page-container .ap-nabe-buehne.ap-ueberuns-r3
    > .et_pb_row.ap-nabe-leiste
    .ap-nabe__label {
    font-size: clamp(0.875rem, 0.84rem + 0.13vw, 0.96rem);
    line-height: 1.2;
  }

  #page-container .ap-nabe-buehne.ap-ueberuns-r3 > .et_pb_row.ap-nabe-tafel {
    grid-column: 2;
    grid-row: 2;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    block-size: 100%;
    min-block-size: 0;
    align-self: stretch;
    padding: 0;
  }
}

@media (max-width: 47.9375rem) {
  #page-container .ap-nabe-buehne.ap-ueberuns-r3
    > .et_pb_row.ap-nabe-leiste
    .ap-nabe {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(0.25rem, 1.5vw, 0.5rem);
  }

  #page-container .ap-nabe-buehne.ap-ueberuns-r3
    > .et_pb_row.ap-nabe-leiste
    .ap-nabe__kachel {
    position: relative;
    display: grid;
    grid-column: auto !important;
    min-block-size: 2.75rem;
    padding: 0.25rem;
    place-items: center;
    border-radius: var(--gvid-apf-radius-m, 0.625rem);
  }

  #page-container .ap-nabe-buehne.ap-ueberuns-r3
    > .et_pb_row.ap-nabe-leiste
    .ap-nabe__label {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  #page-container .ap-nabe-buehne.ap-ueberuns-r3
    > .et_pb_row.ap-nabe-leiste
    .ap-nabe__nummer {
    font-size: 0.875rem;
    font-weight: 600;
  }

  #page-container .ap-nabe-buehne.ap-ueberuns-r3
    .ap-nabe__kachel.is-complete:not(.is-locked)::after {
    position: absolute;
    inset-block-start: 0.125rem;
    inset-inline-end: 0.2rem;
    margin: 0;
    font-size: 0.6875rem;
  }
}

#page-container .ap-nabe-buehne.ap-ueberuns-r3
  > .et_pb_row.ap-nabe-tafel
  > .et_pb_column,
#page-container .ap-nabe-buehne.ap-ueberuns-r3
  > .et_pb_row.ap-nabe-tafel
  .ap_ueberuns_gadget_modul > .et_pb_module_inner {
  block-size: 100%;
  min-block-size: 0;
}

#page-container .ap-nabe-buehne.ap-ueberuns-r3
  > .et_pb_row.ap-nabe-tafel
  .ap_ueberuns_gadget_modul {
  min-block-size: 0;
  overflow: hidden;
}

/* Die allgemeine Nabe besitzt ab 60rem einen historischen Drei-Spalten-
   Subgrid-Vertrag. Dieses Formular ist absichtlich zweigeteilt: Fortschritt
   links, eine einzige Arbeitsfläche rechts. Deshalb endet das alte Subgrid an
   der Tafelgrenze. Breite, Höhe und Zentrierung der Card bleiben anschließend
   vollständig in den nativen Divi-5-Moduloptionen. */
#page-container .ap-nabe-buehne.ap-ueberuns-r3
  > .et_pb_row.ap-nabe-tafel
  > .et_pb_column {
  display: block !important;
  grid-template: none !important;
}

.ap-ueberuns-gadget {
  --ug-ink: var(--gcid-c-text, #0f1a2e);
  --ug-muted: var(--gcid-c-text-muted, #3b4761);
  --ug-gold: var(--gcid-c-gold, #8a6d28);
  --ug-gold-deep: var(--gcid-c-gold-600, #755d22);
  --ug-gold-soft: var(--gcid-c-gold-300, #e1cc98);
  --ug-surface: var(--gcid-c-bg, #fff);
  --ug-panel: var(--gcid-c-navy-50, #f0f3fa);
  --ug-border: var(--gcid-c-border, #e0e8f5);
  display: grid;
  gap: clamp(1rem, 1.4vw, 1.5rem);
  min-inline-size: 0;
  color: var(--ug-ink);
}

.ap-ueberuns-gadget *,
.ap-ueberuns-gadget *::before,
.ap-ueberuns-gadget *::after {
  box-sizing: border-box;
}

.ap-ueberuns-gadget__kopf {
  max-inline-size: 44rem;
}

.ap-ueberuns-gadget__kopf p,
.ap-ueberuns-gadget__kopf h3,
.ap-ueberuns-gadget__schritt h4,
.ap-ueberuns-gadget__schritt p {
  margin: 0;
}

.ap-ueberuns-gadget__kicker {
  margin-block-end: clamp(0.25rem, 0.5vw, 0.5rem) !important;
  color: var(--ug-gold-deep);
  font-size: clamp(0.72rem, 0.68rem + 0.14vw, 0.82rem);
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ap-ueberuns-gadget__kopf h3 {
  color: var(--ug-ink);
  font-size: clamp(1.25rem, 1.05rem + 0.72vw, 1.75rem);
  line-height: 1.18;
}

.ap-ueberuns-gadget__kopf > p:last-child {
  margin-block-start: clamp(0.38rem, 0.6vw, 0.62rem);
  color: var(--ug-muted);
  font-size: clamp(0.92rem, 0.86rem + 0.18vw, 1.02rem);
  line-height: 1.58;
}

.ap-ueberuns-gadget__schritte {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.62rem, 1vw, 1rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ap-ueberuns-gadget__schritt {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(0.62rem, 0.8vw, 0.9rem);
  align-items: start;
  min-inline-size: 0;
  min-block-size: clamp(7.5rem, 9vw, 9rem);
  padding: clamp(0.75rem, 1.1vw, 1.05rem);
  background: color-mix(in srgb, var(--ug-surface) 78%, transparent);
  border: 1px solid var(--ug-border);
  border-radius: clamp(0.62rem, 0.8vw, 0.9rem);
  opacity: 0.72;
  transition: border-color 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
}

.ap-ueberuns-gadget__schritt.is-active {
  border-color: var(--ug-gold);
  box-shadow: inset 0 0 0 1px var(--ug-gold-soft), 0 0.5rem 1.25rem rgb(15 26 46 / 8%);
  opacity: 1;
}

.ap-ueberuns-gadget__schritt.is-complete {
  border-color: var(--ug-gold-soft);
  box-shadow: inset 0.22rem 0 0 var(--ug-gold-deep);
  opacity: 1;
}

.ap-ueberuns-gadget__nummer {
  display: grid;
  inline-size: clamp(2rem, 2.4vw, 2.5rem);
  block-size: clamp(2rem, 2.4vw, 2.5rem);
  place-items: center;
  color: var(--ug-muted);
  background: var(--ug-surface);
  border: 1px solid var(--ug-border);
  border-radius: 50%;
  font-size: clamp(0.72rem, 0.68rem + 0.12vw, 0.8rem);
  font-weight: 750;
}

.ap-ueberuns-gadget__schritt.is-active .ap-ueberuns-gadget__nummer {
  color: var(--ug-surface);
  background: var(--ug-ink);
  border-color: var(--ug-ink);
}

.ap-ueberuns-gadget__schritt.is-complete .ap-ueberuns-gadget__nummer {
  color: var(--ug-surface);
  background: var(--ug-gold-deep);
  border-color: var(--ug-gold-deep);
}

.ap-ueberuns-gadget__schritt h4 {
  color: var(--ug-ink);
  font-size: clamp(0.94rem, 0.88rem + 0.2vw, 1.08rem);
  line-height: 1.3;
}

.ap-ueberuns-gadget__schritt p {
  margin-block-start: 0.3rem;
  color: var(--ug-muted);
  font-size: clamp(0.78rem, 0.74rem + 0.14vw, 0.88rem);
  line-height: 1.48;
  overflow-wrap: anywhere;
}

.ap-ueberuns-gadget__zusage {
  inline-size: 100%;
  min-block-size: 44px;
  margin-block-start: clamp(0.62rem, 0.8vw, 0.82rem);
  padding: clamp(0.55rem, 0.7vw, 0.7rem) clamp(0.72rem, 0.9vw, 0.92rem);
  color: var(--ug-surface);
  background: var(--ug-ink);
  border: 1px solid var(--ug-ink);
  border-radius: 999px;
  font: inherit;
  font-size: clamp(0.76rem, 0.72rem + 0.13vw, 0.86rem);
  font-weight: 700;
  line-height: 1.25;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, opacity 180ms ease;
}

.ap-ueberuns-gadget__zusage:hover:not(:disabled) {
  background: var(--ug-gold);
  border-color: var(--ug-gold);
}

.ap-ueberuns-gadget__zusage:disabled {
  color: var(--ug-muted);
  background: color-mix(in srgb, var(--ug-surface) 72%, transparent);
  border-color: var(--ug-border);
  cursor: default;
  opacity: 0.72;
}

.ap-ueberuns-gadget__schritt.is-complete .ap-ueberuns-gadget__zusage:disabled {
  color: var(--ug-surface);
  background: var(--ug-gold-deep);
  border-color: var(--ug-gold-deep);
  opacity: 1;
}

.ap-ueberuns-gadget__zusage:focus-visible {
  outline: 3px solid var(--ug-gold);
  outline-offset: 3px;
}

.ap-ueberuns-gadget__schritt .ap-ueberuns-gadget__offen {
  min-block-size: clamp(3.25rem, 4vw, 3.75rem);
  margin-block-start: clamp(0.42rem, 0.6vw, 0.62rem);
  color: var(--ug-muted);
  font-size: clamp(0.72rem, 0.69rem + 0.1vw, 0.8rem);
}

.ap-ueberuns-gadget__fuss {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.62rem, 1vw, 1rem);
  align-items: center;
  justify-content: space-between;
}

.ap-ueberuns-gadget__fuss--zusagen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-block-size: clamp(7.5rem, 8vw, 8.5rem);
}

.ap-ueberuns-gadget__status {
  min-inline-size: 0;
  min-block-size: clamp(5.75rem, 6vw, 6.5rem);
  padding: clamp(0.7rem, 0.9vw, 0.9rem);
  background: color-mix(in srgb, var(--ug-surface) 78%, transparent);
  border-inline-start: clamp(0.2rem, 0.28vw, 0.28rem) solid var(--ug-gold);
  border-radius: clamp(0.5rem, 0.65vw, 0.7rem);
}

.ap-ueberuns-gadget__status strong,
.ap-ueberuns-gadget__status p {
  margin: 0;
}

.ap-ueberuns-gadget__status strong {
  color: var(--ug-ink);
  font-size: clamp(0.82rem, 0.78rem + 0.14vw, 0.92rem);
}

.ap-ueberuns-gadget__status p {
  margin-block-start: 0.25rem;
  color: var(--ug-muted);
  font-size: clamp(0.75rem, 0.71rem + 0.12vw, 0.84rem);
  line-height: 1.45;
}

.ap-ueberuns-gadget__fuss button {
  min-block-size: 44px;
  padding: clamp(0.62rem, 0.8vw, 0.82rem) clamp(0.95rem, 1.35vw, 1.3rem);
  color: var(--ug-surface);
  background: var(--ug-ink);
  border: 1px solid var(--ug-ink);
  border-radius: 999px;
  font: inherit;
  font-size: clamp(0.82rem, 0.78rem + 0.14vw, 0.92rem);
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease;
}

.ap-ueberuns-gadget__fuss button:hover {
  background: var(--ug-gold);
  border-color: var(--ug-gold);
}

.ap-ueberuns-gadget__fuss button:focus-visible {
  outline: 3px solid var(--ug-gold);
  outline-offset: 3px;
}

.ap-ueberuns-gadget__zuruecksetzen.is-inactive {
  visibility: hidden;
}

.ap-ueberuns-gadget__fuss span {
  color: var(--ug-muted);
  font-size: clamp(0.78rem, 0.74rem + 0.14vw, 0.88rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 47.9375rem) {
  .ap-ueberuns-gadget__schritte {
    grid-template-columns: minmax(0, 1fr);
  }

  .ap-ueberuns-gadget__schritt {
    min-block-size: 0;
  }

  .ap-ueberuns-gadget__fuss--zusagen {
    grid-template-columns: minmax(0, 1fr);
  }

  .ap-ueberuns-gadget__fuss--zusagen .ap-ueberuns-gadget__zuruecksetzen {
    inline-size: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ap-ueberuns-gadget__schritt,
  .ap-ueberuns-gadget__fuss button,
  .ap-ueberuns-gadget__zusage {
    transition: none;
  }
}

/* Alle neun Fragen bleiben Teil des normalen Dokumentflusses. Ein innerer
   Scrollport verdeckte je nach Breite fünf bis sechs Fragen und ließ die direkt
   folgende Abschlusskarte fälschlich wie das Ende des Fragebogens aussehen. */
.ap-bestandscheck {
  --bc-choice: color-mix(in srgb, var(--ug-surface) 90%, var(--ug-panel));
  --bc-selected: color-mix(in srgb, var(--ug-gold-soft) 62%, var(--ug-surface));
  container-type: inline-size;
}

.ap-bestandscheck__fragen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(0.7rem, 1vw, 1rem);
  block-size: auto;
  max-block-size: none;
  padding-inline-end: 0;
  overflow: visible;
}

.ap-bestandscheck__frage {
  display: flow-root;
  min-inline-size: 0;
  margin: 0;
  padding: clamp(0.85rem, 1.25vw, 1.2rem);
  background: var(--bc-choice);
  border: 1px solid var(--ug-border);
  border-radius: clamp(0.62rem, 0.8vw, 0.9rem);
}

.ap-bestandscheck__frage.is-answered {
  border-color: var(--ug-gold-soft);
  box-shadow: inset 0.22rem 0 0 var(--ug-gold-deep);
}

.ap-bestandscheck__frage legend {
  float: left;
  width: 100%;
  max-inline-size: 100%;
  margin-block-end: clamp(0.75rem, 0.9vw, 0.9rem);
  padding-inline: 0.18rem;
  color: var(--ug-ink);
  font-size: clamp(1rem, 0.9rem + 0.38vw, 1.28rem);
  font-weight: 800;
  line-height: 1.24;
}

.ap-bestandscheck__frage legend > span {
  display: block;
  margin-block-end: 0.35rem;
  color: var(--ug-gold-deep);
  font-size: clamp(0.7rem, 0.66rem + 0.13vw, 0.8rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ap-bestandscheck__optionen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  clear: both;
  gap: 0;
  margin-block-start: 0;
  overflow: clip;
  background: var(--ug-surface);
  border: 1px solid var(--ug-border);
  border-radius: clamp(0.5rem, 0.45rem + 0.18vw, 0.625rem);
}

.ap-bestandscheck__option {
  position: relative;
  display: grid;
  min-inline-size: 0;
  min-block-size: 44px;
  place-items: center;
  padding: 0.52rem 0.35rem;
  color: var(--ug-ink);
  background: var(--ug-surface);
  border: 0;
  border-inline-start: 1px solid var(--ug-border);
  border-radius: 0;
  cursor: pointer;
  font-size: clamp(0.76rem, 0.72rem + 0.14vw, 0.88rem);
  font-weight: 750;
  line-height: 1.2;
  text-align: center;
}

.ap-bestandscheck__option:first-child {
  border-inline-start: 0;
}

.ap-bestandscheck__option input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  clip-path: inset(50%);
}

.ap-bestandscheck__option input:checked + span {
  color: var(--ug-ink);
}

.ap-bestandscheck__option:has(input:checked) {
  background: var(--bc-selected);
  box-shadow: inset 0 0 0 1px var(--ug-gold-deep);
}

.ap-bestandscheck__option:focus-within {
  outline: 0;
  box-shadow: inset 0 0 0 3px var(--ug-gold);
}

.ap-bestandscheck__rueckmeldung {
  margin-block-start: 0.82rem;
  padding: 0.72rem 0.82rem;
  color: var(--ug-ink);
  background: var(--ug-surface);
  border-inline-start: 0.25rem solid var(--ug-gold-deep);
  border-radius: 0.42rem;
}

.ap-bestandscheck__rueckmeldung h4,
.ap-bestandscheck__rueckmeldung ul {
  margin: 0;
}

.ap-bestandscheck__rueckmeldung h4 {
  font-size: clamp(0.86rem, 0.81rem + 0.18vw, 0.98rem);
}

.ap-bestandscheck__rueckmeldung ul {
  display: grid;
  gap: 0.26rem;
  padding-inline-start: 1.08rem;
  margin-block-start: 0.38rem;
  color: var(--ug-muted);
  font-size: clamp(0.75rem, 0.71rem + 0.14vw, 0.85rem);
  line-height: 1.4;
}

.ap-bestandscheck__abschluss {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(0.72rem, 1vw, 1rem);
  align-items: end;
  padding: clamp(0.82rem, 1.1vw, 1rem);
  background: color-mix(in srgb, var(--ug-surface) 78%, transparent);
  border: 1px solid var(--ug-border);
  border-radius: clamp(0.62rem, 0.8vw, 0.9rem);
}

.ap-bestandscheck__abschluss > p,
.ap-bestandscheck__abschluss section > * {
  margin: 0;
}

.ap-bestandscheck__abschluss > [data-ap-bestandscheck-fortschritt] {
  grid-column: 1 / -1;
}

.ap-bestandscheck__abschluss > p,
.ap-bestandscheck__abschluss h4,
.ap-bestandscheck__abschluss [data-ap-bestandscheck-zaehler] {
  font-weight: 800;
}

.ap-bestandscheck__abschluss section {
  display: grid;
  gap: 0.38rem;
  block-size: clamp(8.5rem, 7.5rem + 2vw, 10rem);
  align-content: start;
  overflow-y: auto;
  color: var(--ug-muted);
  line-height: 1.45;
}

.ap-bestandscheck__abschluss h4 {
  color: var(--ug-ink);
  font-size: clamp(1rem, 0.92rem + 0.3vw, 1.18rem);
}

.ap-bestandscheck__abschluss button {
  min-inline-size: 44px;
  min-block-size: 44px;
  padding: clamp(0.62rem, 0.5rem + 0.4vw, 0.82rem)
    clamp(0.95rem, 0.75rem + 0.7vw, 1.3rem);
  color: var(--ug-surface);
  background: var(--ug-ink);
  border: 1px solid var(--ug-ink);
  border-radius: 999px;
  font: inherit;
  font-size: clamp(0.82rem, 0.78rem + 0.14vw, 0.92rem);
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}

.ap-bestandscheck__abschluss button:focus-visible {
  outline: 3px solid var(--ug-gold);
  outline-offset: 3px;
}

.ap-bestandscheck__abschluss button:disabled {
  color: var(--ug-muted);
  background: color-mix(in srgb, var(--ug-surface) 72%, transparent);
  border-color: var(--ug-border);
  cursor: default;
  opacity: 0.72;
}

@container (width >= 38rem) {
  .ap-bestandscheck__fragen {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container (width >= 56rem) {
  .ap-bestandscheck__fragen {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@container (width < 18rem) {
  .ap-bestandscheck__option {
    padding-inline: 0.12rem;
    font-size: clamp(0.64rem, 0.6rem + 0.25cqi, 0.7rem);
  }
}

@media (max-width: 38.9375rem) {
  .ap-bestandscheck__fragen,
  .ap-bestandscheck__abschluss {
    grid-template-columns: minmax(0, 1fr);
  }

  .ap-bestandscheck__abschluss button {
    inline-size: 100%;
  }

}

/* Schmale, kurze Geräte erhalten denselben Inhalt in einer verdichteten
   Hierarchie. Die Erklärung über dem Fragefeld bleibt sichtbar; sie darf nie
   wieder als unsichtbare Höhenreserve für das Einbildschirm-Raster dienen. */
@media (max-width: 30rem) {
  #page-container .ap-nabe-buehne.ap-ueberuns-r3
    > .et_pb_row.ap-ueberuns-einleitung {
    align-self: start;
  }

  #page-container .ap-nabe-buehne.ap-ueberuns-r3
    > .et_pb_row.ap-ueberuns-einleitung
    > .et_pb_column {
    align-content: start;
  }

  #page-container .ap-nabe-buehne.ap-ueberuns-r3
    > .et_pb_row.ap-ueberuns-einleitung
    .et_pb_column > .et_pb_text:last-child {
    display: block;
    max-inline-size: 45rem;
  }

  #page-container .ap-nabe-buehne.ap-ueberuns-r3 .ap-agenturfunnel {
    gap: 0.25rem;
  }

  .ap-agenturfunnel__status {
    display: flex;
    min-block-size: 2rem;
    padding-block: 0.25rem;
  }

  .ap-agenturfunnel__hinweis {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .ap-agenturfunnel__frage {
    padding: var(--af-gap-xs);
  }

  .ap-agenturfunnel__option {
    padding-block: 0.25rem;
  }

  .ap-agenturfunnel__frage legend {
    margin-block-end: 0.375rem;
  }

  .ap-agenturfunnel__optionen,
  .ap-agenturfunnel__optionen[data-ap-agenturfunnel-optionen="4"] {
    gap: 0.5rem;
  }

  .ap-agenturfunnel__kontakt-raster {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 22.5rem) {
  #page-container .ap-nabe-buehne.ap-ueberuns-r3 {
    row-gap: 0.25rem;
  }

  #page-container .ap-nabe-buehne.ap-ueberuns-r3
    > .et_pb_row.ap-ueberuns-einleitung
    .et_pb_column > .et_pb_text:first-child {
    display: none;
  }

  #page-container .ap-nabe-buehne.ap-ueberuns-r3 .ap-agenturfunnel {
    --af-control-height: 2.75rem;
    gap: 0.25rem;
  }

  .ap-agenturfunnel__option {
    gap: 0.25rem;
    padding-inline: 0.125rem;
  }

  .ap-agenturfunnel__option::before {
    inline-size: 0.875rem;
    block-size: 0.875rem;
    box-shadow: inset 0 0 0 0.1875rem var(--ug-surface);
  }

  .ap-agenturfunnel__status {
    min-block-size: 1.75rem;
    padding-block: 0;
  }

  .ap-agenturfunnel__frage legend {
    margin-block-end: 0.25rem;
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
    line-height: 1.15;
  }

  .ap-agenturfunnel__frage legend > span {
    display: none;
  }

}

/* Die mobile Aktivflaeche ist bewusst hell. Der generierte Nabe-Status setzte
   die Zahl dort weiterhin auf Weiss (1,22:1). Der dunkle Phi-Textwert erreicht
   AA und bleibt mit der ebenfalls dunklen aktiven Beschriftung konsistent. */
@media (max-width: 47.9375rem) {
  #page-container .ap-nabe-buehne.ap-ueberuns-r3
    > .et_pb_row.ap-nabe-leiste
    .ap-nabe__schalter:checked + .ap-nabe__kachel
    .ap-nabe__nummer {
    color: var(--gcid-c-text, #0f1a2e) !important;
  }
}