/*
 * Basis-Stile der Design-Phase 1 („unsichtbare Technik“, EE/14_design/konzept.md) – setzt tokens.css voraus.
 * Wird als letztes Stylesheet geladen (CMS-Seiten, Laravel-Seiten mit CMS-Rahmen, Kundenbereich, Zwei-Faktor).
 * Abschnitte: Sprunglink, Screenreader-Klasse, Tastaturfokus, Kontrast, Bilder, Symbole, Rechner-Überlauf.
 * Ändert die normale Darstellung nicht; sichtbar sind nur der Tastaturfokus, der Sprunglink beim Fokussieren
 * und die drei Kontrast-Korrekturen aus farben.md Abschnitt 4.
 */

/* ---------- Sprunglink „Zum Inhalt“ (nur bei Tastaturfokus sichtbar) ---------- */
.ee-sprunglink {
  position: absolute;
  left: -10000px;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.ee-sprunglink:focus {
  position: fixed;
  left: var(--s-4);
  top: var(--s-4);
  z-index: 2147483000;
  width: auto;
  height: auto;
  overflow: visible;
  padding: var(--s-3) var(--s-5);
  background: var(--ee-weiss);
  color: var(--ee-rot-tief);
  font: 600 1rem/1.5 var(--font);
  text-decoration: underline;
  border-radius: var(--radius-s);
  box-shadow: var(--schatten-hoch);
}

/* ---------- Nur für Screenreader (unsichtbar, aber vorgelesen) ---------- */
.ee-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  /* Systemschrift: verborgener Text (z. B. früherer Ligatur-Text der Dateiliste) soll keine Icon-Schrift nachladen */
  font-family: Arial, Helvetica, sans-serif !important;
}

/* ---------- Sichtbarer Tastaturfokus ----------
 * Theme (`*{outline:0!important}`), Bootstrap und App-CSS entfernen den Fokusrahmen ohne Ersatz.
 * :focus-visible greift bei Tastaturbedienung (bei Textfeldern auch beim Antippen) – Mausklicks
 * auf Links/Buttons zeigen weiterhin keinen Rahmen. Farbe/Breite: farben.md „Fokusrahmen“.
 */
:focus-visible {
  outline: var(--fokus-breite) solid var(--c-fokus) !important;
  outline-offset: var(--fokus-abstand) !important;
  box-shadow: 0 0 0 var(--fokus-abstand) var(--c-fokus-abstand) !important;
}
/* Programmatisch fokussierte Container (Dialoge, Sprungziele) brauchen keinen Rahmen */
[tabindex="-1"]:focus-visible,
.modal:focus-visible,
.modal-dialog:focus-visible,
main:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* ---------- Kontrast (farben.md Abschnitt 4) ----------
 * 1) Hellgraue Links #d9d9d9 auf Rot (4,1 : 1) → Weiß (5,8 : 1).
 * 2) Hover-Grau #a9a9a9 auf Rot (2,5 : 1) → bleibt Weiß, Unterstreichung entfällt beim Überfahren.
 */
.by-link-invert:not([class^=by-button]),
.content-bg-secondary a:not([class^=by-button]),
.com-teaserbox__inner__content a:not([class^=by-button]),
.com-teaserbox-grid__single.bg-red .com-teaserbox-grid__single__content a:not([class^=by-button]),
.com-text__inner.content-bg-secondary a:not([class^=by-button]) {
  color: var(--c-link-auf-rot);
}
.by-link-invert:not([class^=by-button]):hover,
.by-link-invert:not([class^=by-button]):active,
.content-bg-secondary a:not([class^=by-button]):hover,
.content-bg-secondary a:not([class^=by-button]):active,
.com-teaserbox__inner__content a:not([class^=by-button]):hover,
.com-teaserbox__inner__content a:not([class^=by-button]):active,
.com-teaserbox-grid__single.bg-red .com-teaserbox-grid__single__content a:not([class^=by-button]):hover,
.com-teaserbox-grid__single.bg-red .com-teaserbox-grid__single__content a:not([class^=by-button]):active,
.com-text__inner.content-bg-secondary a:not([class^=by-button]):hover,
.com-text__inner.content-bg-secondary a:not([class^=by-button]):active {
  color: var(--c-link-auf-rot) !important;
  text-decoration: none !important;
}
/* Social-Icons im roten Kopfband (nur breite Bildschirme, darunter stehen sie auf Weiß) */
@media screen and (min-width: 1361px) {
  #by-section-main-menu .by-social-icons li a {
    color: var(--c-link-auf-rot);
  }
  #by-section-main-menu .by-social-icons li a:hover,
  #by-section-main-menu .by-social-icons li a:active {
    color: var(--ee-rot-zart);
  }
}
/* 3) Rote Links auf rosa Hinweisfläche #fdd0cb (4,15 : 1) → Rot dunkel (5,2 : 1) */
.com-infobox__inner.box-error a:not([class^=by-button]) {
  color: var(--ee-rot-dunkel);
}

/* ---------- Bilder (Design-Phase 1, Vorschlag 3) ----------
 * CMS-Bilder tragen jetzt width/height aus den Mediendaten (Platzhalter gegen Layout-Sprünge, sobald das Theme
 * eine Breite vorgibt). Die Attribute sollen die bisher angezeigte Größe nicht ändern: ohne Theme-Regel bleibt
 * die Größe wie bisher automatisch (:where = Spezifität 0, jede Theme-Regel hat Vorrang).
 */
:where(picture > img[width][height]) {
  width: auto;
  height: auto;
}

/* ---------- Symbole ohne Icon-Schrift (Design-Phase 1, Vorschlag 2) ----------
 * Material Icons / Material Icons Outlined (Google, Apache License 2.0, resources/icons/LICENSE-material-icons.txt).
 * Die SVG-Pfade sind aus den bisher geladenen Schriftdateien ausgelesen (gleiche Umrisse); dadurch entfallen
 * material-icons-outlined.woff2 (126 KB) und material-icons.woff2 (102 KB) auf den CMS-Seiten.
 * Die Pseudo-Elemente behalten Größe und Zeilenhöhe: Inhalt = geschütztes Leerzeichen in der Seitenschrift,
 * das Symbol liegt als Maske (Farbe = currentColor) bzw. Hintergrundbild darüber.
 */
:root {
  --ee-icon-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M140 107C141 126 144 144 149 162L124 188C115 162 109 135 107 107L140 107ZM350 363C368 368 387 371 405 373L405 404C377 403 350 397 324 388L350 363ZM160 64L85 64C74 64 64 74 64 85C64 286 226 448 427 448C438 448 448 438 448 427L448 352C448 340 438 331 427 331C400 331 374 327 351 319C348 318 346 318 344 318C338 318 333 320 329 324L282 371C221 340 172 291 141 230L188 183C194 177 196 169 193 161C186 138 181 112 181 85C181 74 172 64 160 64Z'/%3E%3C/svg%3E");
  --ee-icon-email: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M469 128C469 105 450 85 427 85L85 85C62 85 43 105 43 128L43 384C43 407 62 427 85 427L427 427C450 427 469 407 469 384L469 128ZM427 128L256 235L85 128L427 128ZM427 384L85 384L85 171L256 277L427 171L427 384Z'/%3E%3C/svg%3E");
  --ee-icon-exit-to-app: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M215 333L245 363L352 256L245 149L215 179L270 235L64 235L64 277L270 277L215 333ZM405 64L107 64C83 64 64 83 64 107L64 192L107 192L107 107L405 107L405 405L107 405L107 320L64 320L64 405C64 429 83 448 107 448L405 448C429 448 448 429 448 405L448 107C448 83 429 64 405 64Z'/%3E%3C/svg%3E");
  --ee-icon-person: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 128C279 128 299 147 299 171C299 194 279 213 256 213C233 213 213 194 213 171C213 147 233 128 256 128ZM256 341C314 341 380 369 384 384L128 384C133 369 199 341 256 341ZM256 85C209 85 171 124 171 171C171 218 209 256 256 256C303 256 341 218 341 171C341 124 303 85 256 85ZM256 299C199 299 85 327 85 384L85 427L427 427L427 384C427 327 313 299 256 299Z'/%3E%3C/svg%3E");
  --ee-icon-done: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M192 346L418 119L448 149L192 405L73 286L102 256L192 346Z'/%3E%3C/svg%3E");
}
.phone a::before,
.email a::before,
.exit_to_app a::before,
.person a::before,
#by-section-main-menu #by-lara-usermenu > .dropdown .dropdown-menu li:first-of-type a::before {
  content: "\00a0" !important;
  font-family: inherit !important;
  min-width: 1em;
  background-color: currentColor;
  -webkit-mask: var(--ee-icon-person) center / 1em 1em no-repeat;
  mask: var(--ee-icon-person) center / 1em 1em no-repeat;
}
.phone a::before { -webkit-mask-image: var(--ee-icon-phone); mask-image: var(--ee-icon-phone); }
.email a::before { -webkit-mask-image: var(--ee-icon-email); mask-image: var(--ee-icon-email); }
.exit_to_app a::before { -webkit-mask-image: var(--ee-icon-exit-to-app); mask-image: var(--ee-icon-exit-to-app); }
/* Häkchen-Listen */
ol.check-list li::before,
ul.check-list li::before {
  content: "\00a0" !important;
  font-family: inherit !important;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: var(--ee-icon-done) center / 1em 1em no-repeat;
  mask: var(--ee-icon-done) center / 1em 1em no-repeat;
}
/* Kontrollkästchen der Theme-Formulare (Rahmen + weiße Fläche bleiben, Haken als Hintergrundbild) */
.by-section input[type=checkbox]:checked + label::before,
.by-section input[type=checkbox]:checked + span::before {
  content: "" !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23191919'%3E%3Cpath d='M192 346L418 119L448 149L192 405L73 286L102 256L192 346Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1em 1em;
}
.content-bg-secondary .by-section input[type=checkbox]:checked + label::before,
.content-bg-secondary .by-section input[type=checkbox]:checked + span::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23ffffff'%3E%3Cpath d='M192 346L418 119L448 149L192 405L73 286L102 256L192 346Z'/%3E%3C/svg%3E");
}

/* ---------- Kein waagrechtes Scrollen im Elterngeldrechner (/rechner, /software/rechner) ----------
 * Ursache: lange Adresse als Linktext in Schritt 1 (21 bzw. 27 px) und eine Bootstrap-Zeile mit negativem Rand (5 px).
 * break-word bricht nur, wenn ein Wort sonst überstehen würde (keine Änderung der Mindestbreite);
 * overflow-x: clip schneidet nur den leeren Randbereich ab (kein Scroll-Container, sticky bleibt intakt).
 */
.by-laravel-content a {
  overflow-wrap: break-word;
}

/* Lange Web-Adressen und Ausfüllzeilen („……“) im Fließtext (/widerruf, /agb, /datenschutz) schoben die Seite auf dem
 * Handy auf bis zu 796 px Breite. break-word bricht nur Wörter, die sonst überstehen würden. */
p,
li {
  overflow-wrap: break-word;
}
@media (max-width: 767px) {
  #form-container {
    overflow-x: clip;
  }
}

/* ---------- Rechtliche Pflichtlinks im Kundenbereich (Go-live-Checkliste I4) ---------- */
.ee-kundenbereich-fuss {
  margin-top: 32px;
  padding: 16px 15px;
  border-top: 1px solid var(--c-linie);
}
/* feste Größen: der Kundenbereich rechnet mit 10px Grundschrift (rem) */
.ee-kundenbereich-fuss .ee-rechtslinks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.5;
}
.ee-kundenbereich-fuss .ee-rechtslinks li {
  margin: 0;
  padding: 0;
}
.ee-kundenbereich-fuss .ee-rechtslinks a {
  color: var(--c-text-2);
  text-decoration: underline;
}

/* Website-Fuß: Pflichtlinks unter dem CMS-Fußmenü in einer Zeile (wie das Menü, umbrechend auf dem Handy) */
.by-footer .by-footer-widerruf {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2) var(--s-5);
  margin: var(--s-2) 0 0;
  padding: 0;
  list-style: none;
}

/* ---------- Einwilligung Gesundheits-/Religionsdaten (Art. 9 DSGVO, Go-live-Checkliste D3) ---------- */
.ee-einwilligung {
  max-width: 720px;
  margin: 0 0 32px;
  padding: 24px;
  border: 1px solid var(--c-linie);
  border-radius: 8px;
  background: var(--ee-weiss);
  font-size: 16px;
  line-height: 1.5;
}
#einwilligung-art9 h2.ee-einwilligung__titel {
  margin: 0 0 12px;
  font-size: 22px;
  line-height: 1.3;
}
.ee-einwilligung label.ee-einwilligung__auswahl,
.einwilligung-settings label.ee-einwilligung__auswahl {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 16px 0;
  font-weight: normal;
  cursor: pointer;
}
.ee-einwilligung label.ee-einwilligung__auswahl > span,
.einwilligung-settings label.ee-einwilligung__auswahl > span {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
}
/* echte, per Tastatur bedienbare Checkbox statt der Theme-Attrappe (input versteckt + span::before) */
#einwilligung-art9 .ee-einwilligung__auswahl input[type="checkbox"],
.einwilligung-settings .ee-einwilligung__auswahl input[type="checkbox"] {
  display: inline-block;
  position: static;
  opacity: 1;
  appearance: auto;
  -webkit-appearance: checkbox;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  accent-color: var(--ee-rot-tief);
  cursor: pointer;
}
#einwilligung-art9 .ee-einwilligung__auswahl > span::before,
#einwilligung-art9 .ee-einwilligung__auswahl > span::after,
.einwilligung-settings .ee-einwilligung__auswahl > span::before,
.einwilligung-settings .ee-einwilligung__auswahl > span::after {
  content: none;
  display: none;
}
.ee-einwilligung__klein {
  font-size: 14px;
  color: var(--c-text-2);
}
.ee-einwilligung__meldung {
  color: var(--ee-rot-tief);
  font-weight: 600;
}
.ee-einwilligung__erfolg {
  color: var(--c-text);
  font-weight: 600;
}
.ee-einwilligung__gast-widerruf .btn-link {
  padding: 0;
  font-size: 14px;
  color: var(--c-text-2);
  text-decoration: underline;
}
/* Kostenloser Rechner (beide Designs): Knopftexte umbrechen statt abschneiden. app.css setzt für alle Knöpfe im
   Laravel-Inhalt nowrap + overflow:hidden; auf dem Handy waren „Jetzt registrieren und Elterngeldantrag ausdrucken“,
   „Planen Sie Ihren Zuverdienst“ und „Einwilligung widerrufen …“ links und rechts abgeschnitten (Prüfung Nutzerführung 04.10.2026). */
#form-container .btn { white-space: normal; overflow: visible; text-overflow: clip; }
/* Ergebnis (Schritt 5): das alte CSS wollte < 480 px nur „Jetzt registrieren“ zeigen (Text auf 0 px + Ersatztext), griff aber
   wegen einer stärkeren Knopf-Regel nie – jetzt der vollständige Text, umbrochen */
#form-container .register-btn::after { content: none; }
#form-container .register-btn { max-width: 100%; }
/* „Einwilligung widerrufen und Eingaben löschen“ als leiser Textlink wie vorgesehen (nicht als großer Knopf direkt unter „Nächster Schritt“) */
#form-container .ee-einwilligung__gast-widerruf .btn-link {
  font-size: 14px; padding: 0; border: 0; background: none; box-shadow: none; min-height: 44px; height: auto;
  color: var(--c-text-2); text-decoration: underline; text-align: left; border-radius: 0; }
#form-container .ee-einwilligung__gast-widerruf .btn-link:hover { color: var(--ee-rot, #bd3122); background: none; }
/* Rechnerfragen vor der Einwilligung: sichtbar (Transparenz), aber gesperrt */
.ee-einwilligung__gesperrt {
  opacity: 0.45;
  pointer-events: none;
  user-select: none;
}

/* ---------- Kundenbereich „Meine Anfragen“ (Support-Center) ---------- */
.anfragen { max-width: 900px; font-size: 16px; line-height: 1.5; }
.anfragen__tabelle { overflow-x: auto; }
.anfragen__liste td { vertical-align: top; }
.anfragen__betreff { overflow-wrap: anywhere; }
.anfragen__status-marke { display: inline-block; padding: 2px 10px; border-radius: 999px; background: #f1f1f1; color: var(--c-text); font-size: 14px; line-height: 1.5; white-space: nowrap; }
.anfragen__status-marke--wartet { background: #daf5e1; color: #15431f; }
.anfragen__status-marke--neu, .anfragen__status-marke--offen { background: #e9eef5; color: #2f3d4f; }
/* Handy (bis 600 px): Kartenliste statt Tabelle – die Spalte „Status“ war abgeschnitten (Tabelle breiter als der
 * Bildschirm, nur seitlich verschiebbar). Je Anfrage eine Karte: Nummer und Status oben, Betreff, letzte Nachricht. */
@media (max-width: 600px) {
  .anfragen__tabelle { overflow-x: visible; }
  .anfragen table.anfragen__liste, .anfragen .anfragen__liste tbody { display: block; width: 100%; border: 0; margin: 0; padding: 0; background: none; box-shadow: none; border-radius: 0; }
  .anfragen .anfragen__liste thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .anfragen .anfragen__liste tr.anfragen__zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nr status" "betreff betreff" "zeit zeit"; gap: 6px 12px; align-items: center; margin: 0 0 12px; padding: 14px 16px; border: 1px solid var(--c-linie); border-radius: 8px; background: var(--ee-weiss); }
  .anfragen .anfragen__liste tr.anfragen__zeile > td { display: block; padding: 0; border: 0; float: none; width: auto; min-width: 0; text-align: left; }
  .anfragen .anfragen__liste .anfragen__nr { grid-area: nr; font-weight: 600; }
  .anfragen .anfragen__liste .anfragen__nr a { display: inline-block; padding: 10px 0; margin: -10px 0; }
  .anfragen .anfragen__liste .anfragen__status { grid-area: status; justify-self: end; }
  .anfragen .anfragen__liste .anfragen__betreff { grid-area: betreff; }
  .anfragen .anfragen__liste .anfragen__zeit { grid-area: zeit; font-size: 14px; color: var(--c-text-2); }
  .anfragen .anfragen__liste .anfragen__zeit::before { content: attr(data-beschriftung) ": "; }
}
.anfragen__neu { margin-top: 32px; padding: 20px; border: 1px solid var(--c-linie); border-radius: 8px; background: var(--ee-weiss); }
.anfragen__neu label { display: block; margin: 12px 0 4px; font-weight: 600; }
.anfragen__neu button { margin-top: 12px; }
.anfragen__hinweis { font-size: 14px; color: var(--c-text-2); }
.anfragen__verlauf { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; }
.anfragen__nachricht { padding: 12px 16px; border-radius: 8px; border: 1px solid var(--c-linie); background: var(--ee-weiss); }
.anfragen__nachricht--ausgang { background: #f3f6fb; }
.anfragen__kopf { margin: 0 0 6px; font-size: 14px; color: var(--c-text-2); }
.anfragen__text { white-space: pre-wrap; overflow-wrap: anywhere; }
#software-content .anfragen { padding: 0 15px; }
#software-content .anfragen h1 { font-size: 26px; line-height: 1.25; margin: 0 0 8px; }
#software-content .anfragen h2 { font-size: 20px; line-height: 1.3; margin: 0 0 8px; }

/* ---------- Datenschutz auf einen Blick (Buchung, Art. 13 DSGVO) – beide Designs ---------- */
.ee-dsinfo__kasten { margin: 0; padding: 16px 18px; border: 1px solid var(--c-linie); border-left: 4px solid var(--ee-gruen); border-radius: 8px; background: var(--ee-weiss); font-size: 14px; line-height: 1.5; color: var(--c-text); text-align: left; }
.ee-dsinfo__titel { margin: 0 0 6px; font-size: 16px; font-weight: 600; }
.ee-dsinfo__kasten p { margin: 0 0 8px; font-size: 14px; }
.ee-dsinfo__liste { margin: 0 0 8px; padding-left: 18px; list-style: disc; }
.ee-dsinfo__liste li { margin: 0 0 6px; font-size: 14px; list-style: disc; }
.ee-dsinfo__liste li::before { content: none; }
.ee-dsinfo__details summary { cursor: pointer; font-weight: 600; text-decoration: underline; margin: 0 0 8px; min-height: 24px; }
.ee-dsinfo__details[open] summary { margin-bottom: 8px; }
.ee-dsinfo__mehr { margin: 0; color: var(--c-text-2); }
.ee-dsinfo a, .ee-dsinfo__kurs a { text-decoration: underline; }

/* ---------- Kundenbereich „Datenschutz & Datensicherheit“ ---------- */
.ee-datenschutz { max-width: 900px; font-size: 16px; line-height: 1.5; }
#software-content .ee-datenschutz { padding: 0 15px; }
#software-content .ee-datenschutz h1 { font-size: 26px; line-height: 1.25; margin: 0 0 8px; }
#software-content .ee-datenschutz h2 { font-size: 20px; line-height: 1.3; margin: 0 0 8px; }
.ee-datenschutz__lead { font-size: 17px; }
.ee-datenschutz__abschnitt { margin: 24px 0 0; padding: 20px; border: 1px solid var(--c-linie); border-radius: 8px; background: var(--ee-weiss); }
.ee-datenschutz__abschnitt ul { padding-left: 20px; }
.ee-datenschutz__abschnitt li { list-style: disc; margin: 0 0 6px; }
.ee-datenschutz__downloads { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 24px; }
.ee-datenschutz__downloads .btn { white-space: normal; height: auto; }
.ee-datenschutz__hinweis { margin: 12px 0 0; }
.ee-datenschutz__liste { display: grid; grid-template-columns: minmax(180px, 1fr) 2fr; gap: 6px 16px; margin: 8px 0 0; }
.ee-datenschutz__liste dt { font-weight: 600; }
.ee-datenschutz__liste dd { margin: 0; }
.ee-datenschutz__vorher { padding: 12px 16px; border-left: 4px solid var(--ee-gelb-hell); background: var(--ee-grau-50); border-radius: 4px; }
.ee-datenschutz__loeschen label { display: block; margin: 12px 0 4px; font-weight: 600; }
.ee-datenschutz__loeschen button { margin-top: 12px; }
.ee-datenschutz label.ee-einwilligung__auswahl { display: flex; gap: 12px; align-items: flex-start; margin: 16px 0; font-weight: normal; cursor: pointer; }
.ee-datenschutz label.ee-einwilligung__auswahl > span { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.ee-datenschutz .ee-einwilligung__auswahl input[type="checkbox"] { display: inline-block; position: static; opacity: 1; appearance: auto; -webkit-appearance: checkbox; flex: 0 0 auto; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--ee-rot-tief); cursor: pointer; }
.ee-datenschutz .ee-einwilligung__auswahl > span::before, .ee-datenschutz .ee-einwilligung__auswahl > span::after { content: none; display: none; }
@media (max-width: 600px) { .ee-datenschutz__liste { grid-template-columns: 1fr; } .ee-datenschutz__liste dd { margin-bottom: 8px; } }

/* ---------- Zahlungsarten-Kacheln (Registrierung, Beratungsbuchung; SK-6) ----------
 * Bildauswahl-Kacheln haben 30 px Innenabstand links/rechts (inputs.less). In schmalen Kacheln (142–152 px, z. B.
 * Registrierung bei 1200–1439 px Breite) blieb für das 100 px breite Logo zu wenig Platz: Es lief nach rechts über und
 * saß 5–10 px neben der Mitte. Weniger Innenabstand, Logo mittig und notfalls kleiner (Hintergrund „contain“). */
.inputs.pictures .input.picture > input[name="payment_brand"] + label.picture {
  padding-left: 12px;
  padding-right: 12px;
  align-items: center;
  justify-content: center;
}
.inputs.pictures .input.picture > input[name="payment_brand"] + label.picture .payment-icon {
  max-width: 100%;
  flex-shrink: 1;
  margin-left: auto;
  margin-right: auto;
}
/* Kachelreihe bündig mit den übrigen Feldern (Fund Inhaber 05.10.2026, Beratungsbuchung): Die Kachel-Spalten haben
 * 10 px Innenabstand (inputs.less), die Reihe aber den Bootstrap-Ausgleich von −15 px – die Kacheln standen links und
 * rechts 5 px über die Feldkante hinaus. Ohne :has() (ältere Browser) bleibt es beim bisherigen Bild. */
.inputs.pictures > .row:has(> .input.picture > input[name="payment_brand"]) {
  margin-left: -10px;
  margin-right: -10px;
}

/* ---------- Kindergeld-Fenster: Kacheln „Wer möchte Kindergeld beantragen?“ ----------
 * Auf dem Handy war die Kachel ein Drittel breit; nach 30 px Innenabstand je Seite blieben 54 px für den Namen, der
 * Nachname brach mitten im Wort um („Somm-er“). Zwei Kacheln je Reihe (Vorlage: col-xs-6), weniger Innenabstand, Namen
 * nie automatisch trennen – umbrochen wird zwischen Vor- und Nachname, ein einzelnes überlanges Wort notfalls ohne
 * Trennstrich. */
.input.picture.kindergeld-person > label.picture { padding-left: 12px; padding-right: 12px; }
.input.picture.kindergeld-person > label.picture p {
  -webkit-hyphens: manual;
  hyphens: manual;
  word-break: normal;
  overflow-wrap: break-word;
}