/* Elternzeitrechner 2.0 (resources/views/cms/components/rechner/elternzeit.blade.php, Ergebnis ElternzeitAusgabe).
   Baut auf public/css/mutterschaftsgeld.css auf (Schrittanzeige, Gruppen, Knöpfe, Kästen, Tabellen, Feinschliff für Safari und das
   neue Design) und ergänzt nur die eigenen Teile „ez-…“. Handy zuerst, Farben aus public/css/tokens.css mit Rückfallwerten. */
.ez-rechner { --ez-ms: #8a8a8a; --ez-ez: var(--ee-rot, #bd3122); --ez-tz: #e6aaa4; }

/* ---------- Schritte (mit Skript; Klassen wie beim Mutterschaftsgeldrechner) ---------- */
.mg-js [data-ez-schritt]:not(.mg-aktiv) { display: none; }
.mg-rechner:not(.mg-js) [data-ez-schritt] + [data-ez-schritt] { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--mg-linie); }

/* ---------- Eingabe ---------- */
/* unsichtbare Legende: die Breitenregel für Legenden aus mutterschaftsgeld.css darf sie nicht aufziehen (sonst ragt sie über den Rand) */
.mg-rechner fieldset > legend.screen-reader-text { position: absolute !important; width: 1px !important; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; padding: 0; margin: 0; }
.ez-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); column-gap: 1.25rem; align-items: start; }
.ez-raster > * { min-width: 0; }
.ez-rechner .ez-zwei { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); column-gap: 1rem; align-items: end; }
.ez-rechner .ez-zwei > .mb-formfield { min-width: 0; margin-top: .5rem; }
.ez-person-eingabe { border: 1px solid var(--mg-linie); border-radius: var(--mg-radius-s); padding: .25rem 1rem 1rem !important; margin-top: .75rem !important; background: #fff; }
.mg-rechner fieldset.ez-person-eingabe > legend { width: auto; padding: 0 .35rem; margin-left: -.35rem; }
.ez-person-eingabe .mb-formfield { margin-top: .5rem; }
.ez-einleitung { margin: 0 0 .5rem; }

.ez-person-plan { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--mg-linie); min-width: 0; }
.ez-person-plan:first-of-type { border-top: 0; padding-top: 0; }
.mg-rechner .ez-person-plan__titel { font-size: var(--fs-h4, 1.15rem); font-weight: 700; line-height: 1.3; margin: 0 0 .25rem; }
.ez-schnell { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .75rem 0 .25rem; }
.ez-schnell__titel { font-size: var(--fs-klein, .875rem); color: var(--mg-text2); width: 100%; }
.mg-rechner .ez-schnell .ez-schnell__knopf, .mg-rechner .ez-schnell .ez-schnell__knopf:hover { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; min-height: 40px; padding: .35rem .9rem; border: 1.5px solid var(--ee-grau-300, #d9d9d9); border-radius: 999px; background: #fff; color: var(--ee-text, #191919); font-size: .9375rem; line-height: 1.3; cursor: pointer; max-width: 100%; }
.mg-rechner .ez-schnell .ez-schnell__knopf:hover { border-color: var(--ee-text, #191919); }
.mg-rechner .ez-schnell .ez-schnell__knopf:focus-visible { outline: 3px solid var(--ee-rot-hell, #e6aaa4); outline-offset: 2px; }

.ez-abschnitt-eingabe { border: 1px solid var(--mg-linie); border-radius: var(--mg-radius-s); padding: .5rem 1rem 1rem; margin-top: .75rem; background: #fff; min-width: 0; }
.mg-rechner .ez-abschnitt-eingabe .mb-formfield > label { margin-top: .35rem; }
.mg-rechner .ez-abschnitt-eingabe .ez-zwei > .mb-formfield { margin-top: .25rem; }
.ez-abschnitt-eingabe__titel { margin: 0; font-weight: 600; font-size: .9375rem; color: var(--mg-text2); }
.ez-abschnitt-eingabe .mb-formfield:has(> input[type="checkbox"]) { margin-top: .75rem; }
.ez-stunden { max-width: 16rem; margin-top: .25rem; }
.mg-rechner .ez-mehr { margin-top: .75rem !important; }
.ez-konto-live { margin: .75rem 0 0; padding: .5rem .75rem; border-radius: var(--mg-radius-s); background: var(--ee-grau-50, #f7f7f7); font-size: var(--fs-klein, .875rem); }
.ez-konto-live--zu-viel { background: #fdf3f2; color: var(--ee-rot-tief, #661c0b); font-weight: 600; }

/* Neues Design: Felder füllen ihre Rasterspalte (22rem-Grenze aus inhalt.css), Datumsfelder in Schritt 1 bleiben begrenzt */
.v2-seite .com-calculators .ez-rechner .ez-zwei input[type="date"], .v2-seite .com-calculators .ez-rechner .ez-zwei select, .v2-seite .com-calculators .ez-rechner .ez-zwei .mb-formfield-datepicker { max-width: 100%; }
.v2-seite .com-calculators .ez-rechner [data-ez-schritt="1"] input[type="date"], .v2-seite .com-calculators .ez-rechner [data-ez-schritt="1"] .mb-formfield-datepicker { max-width: 22rem; }
.v2-seite .com-calculators .ez-rechner .ez-person-eingabe input[type="text"], .v2-seite .com-calculators .ez-rechner .ez-person-eingabe select { max-width: 100%; }
.v2-seite .com-calculators .ez-rechner .ez-stunden input[type="text"] { max-width: 100%; }
.ez-rechner .ez-zwei input.mb-input, .ez-rechner .ez-zwei select, .ez-rechner .ez-person-eingabe input.mb-input, .ez-rechner .ez-person-eingabe select, .ez-rechner .ez-stunden input.mb-input { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; }
.mg-rechner .ez-raster .mb-formfield-datepicker, .mg-rechner .ez-zwei .mb-formfield-datepicker { min-width: 0; max-width: 100%; }

/* ---------- Ergebnis ---------- */
.ez-ergebnis { min-width: 0; }
.ez-kopf { overflow: hidden; }
.ez-strahl { margin-top: .75rem; }
.ez-strahl__zeile { display: grid; grid-template-columns: 3.75rem minmax(0, 1fr); align-items: center; gap: .5rem; margin-top: .4rem; }
.ez-strahl__name { font-size: var(--fs-klein, .875rem); color: var(--c-text-2, #717171); overflow: hidden; text-overflow: ellipsis; }
.ez-strahl__spur { position: relative; display: block; height: 1.6rem; border-radius: 6px; background: #fff; border: 1px solid var(--c-linie, #e1e1e1); overflow: hidden; }
.ez-balken { position: absolute; top: 0; bottom: 0; display: block; }
.ez-balken--ms, .ez-punkt--ms { background: #8a8a8a; }
.ez-balken--ez, .ez-punkt--ez { background: var(--ee-rot, #bd3122); }
.ez-balken--tz, .ez-punkt--tz { background: repeating-linear-gradient(135deg, #bd3122 0 4px, #e6aaa4 4px 8px); }
.ez-strahl__achse { position: relative; display: block; height: 2.6rem; border-top: 1px solid var(--c-linie, #e1e1e1); }
.ez-marke { position: absolute; top: 0; height: .4rem; border-left: 2px solid var(--ee-text, #191919); }
.ez-marke__text { position: absolute; top: .45rem; left: 0; transform: translateX(-50%); white-space: nowrap; font-size: .75rem; line-height: 1.2; color: var(--c-text-2, #717171); text-align: center; }
.ez-marke--links .ez-marke__text { transform: none; text-align: left; }
.ez-marke--rechts .ez-marke__text { transform: translateX(-100%); text-align: right; }
.ez-tabelle-auf { margin-top: .5rem; }
.ez-tabelle-auf > summary { list-style: none; gap: .6rem; }
.ez-tabelle-auf > summary::-webkit-details-marker { display: none; }
.ez-tabelle-auf > summary::before { content: ""; flex: none; width: 8px; height: 8px; border-right: 2px solid var(--ee-rot, #bd3122); border-bottom: 2px solid var(--ee-rot, #bd3122); transform: rotate(-45deg); }
.ez-tabelle-auf[open] > summary::before { transform: rotate(45deg); }
.ez-tabelle-auf > summary:focus:not(:focus-visible) { outline: none; }
/* Handy: Beschriftungen der Geburtstage abwechselnd in zwei Zeilen, damit nahe Marken sich nicht überlagern */
@media (max-width: 39.99rem) {
  .ez-strahl__achse { height: 4.6rem; }
  .ez-marke:nth-child(even) { height: 2.4rem; }
  .ez-marke:nth-child(even) .ez-marke__text { top: 2.45rem; }
}
.ez-ergebnis .ez-tabelle td:last-child { white-space: nowrap; }

.ez-person { margin-top: 1.5rem; }
.ez-ergebnis .ez-person__titel { font-weight: 700; font-size: var(--fs-h4, 1.15rem); margin: 0 0 .25rem; }
.ez-abschnitte { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; gap: .75rem; }
.ez-abschnitt { border: 1px solid var(--c-linie, #e1e1e1); border-left: 4px solid var(--ee-rot, #bd3122); border-radius: var(--radius-s, 8px); padding: .75rem 1rem; background: #fff; margin: 0; min-width: 0; overflow-wrap: anywhere; }
.ez-abschnitt--tz { border-left-color: #e6aaa4; }
.ez-abschnitt::before { content: attr(data-titel); display: block; font-size: .8125rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--c-text-2, #717171); }
.ez-ergebnis .ez-abschnitt .amount { display: block; text-align: left; font-weight: 400; }
.ez-ergebnis .ez-abschnitt .ez-abschnitt__zeitraum { font-weight: 700; font-size: 1.0625rem; margin-top: .15rem; }
.ez-ergebnis .ez-abschnitt .ez-abschnitt__lm { color: var(--c-text-2, #717171); }
.ez-ergebnis .ez-abschnitt .ez-frist { margin-top: .4rem; }
.ez-ergebnis .ez-abschnitt .ez-abgelaufen { color: var(--ee-rot-tief, #661c0b); font-weight: 600; }
.ez-daten { margin: .6rem 0 0; display: grid; gap: .4rem; }
.ez-daten > div { display: grid; grid-template-columns: 1fr; gap: .1rem; }
.ez-daten dt { font-weight: 600; font-size: var(--fs-klein, .875rem); color: var(--c-text-2, #717171); }
.ez-daten dd { margin: 0; }
@media (min-width: 40rem) { .ez-daten > div { grid-template-columns: 11rem minmax(0, 1fr); gap: .75rem; } .ez-daten dt { padding-top: .1rem; } }
.ez-bedingungen { list-style: none; padding: 0; margin: .35rem 0 0; }
.ez-bedingung { margin-top: .25rem; font-size: var(--fs-klein, .875rem); }
.ez-bedingung__marke { display: inline-block; min-width: 5.5rem; font-size: .75rem; font-weight: 600; padding: 0 .45rem; border-radius: 999px; text-align: center; background: var(--ee-grau-50, #f2f2f2); color: var(--c-text-2, #717171); }
.ez-bedingung--ja .ez-bedingung__marke { background: #e3f3e8; color: #1d6b3a; }
.ez-bedingung--nein .ez-bedingung__marke { background: #fdf3f2; color: var(--ee-rot-tief, #661c0b); }
.ez-ms { margin: .5rem 0 0; }
.ez-konto, .ez-urlaub { background: #fff; border-color: var(--c-linie, #e1e1e1); }
.ez-konto__balken { display: flex; height: .9rem; margin-top: .5rem; border-radius: 999px; overflow: hidden; background: var(--ee-grau-100, #f0f0f0); border: 1px solid var(--c-linie, #e1e1e1); }
.ez-konto__teil--ms { background: #8a8a8a; }
.ez-konto__teil--ez { background: var(--ee-rot, #bd3122); }
.ez-warnungen { margin-top: 1rem; }
@media print {
  .ez-schnell, .ez-mehr, .ez-tabelle-auf > summary { display: none !important; }
  .ez-balken, .ez-konto__teil, .mg-punkt { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}