/* Kasten „Drei Wege zum fertigen Antrag“ (Gestaltung D, Freigabe Inhaber 12.11.2026; App\Cms\Antragswege, Ansicht
   resources/views-v2/cms/antragswege/kasten.blade.php lädt diese Datei). Gilt in CMS-Seiten (.v2-seite main) und auf den
   Elterngeldstellen-Seiten der Länder (#z-wege-stelle, Layout ohne inhalt.css; die ID hebt die Regeln über die
   Textregeln von laravel.css). Farben/Abstände aus system.css. */
:is(.v2-seite main, #z-wege-stelle) .z-wege { max-width: var(--inhaltsbreite, var(--lesebreite)); margin: var(--s-6) 0; box-sizing: border-box; }
:is(.v2-seite main, #z-wege-stelle) .z-wege p { margin: 0; }
#z-wege-stelle { padding: var(--s-4) 0 var(--s-6); }
#z-wege-stelle .z-wege { margin-inline: auto; font-family: var(--font); }

/* Kasten „Drei Wege“ (Gestaltung D, Freigabe Inhaber 12.11.2026): zarte Fläche ohne Rahmen; schmal Skala senkrecht + Listenzeilen,
   ab 48rem Skala waagerecht über drei Karten. Kontraste: Grau #5c5c5c auf #faf7f6 6,3:1, Weiß auf Rot 5,6:1, Rot auf Weiß 5,6:1. */
:is(.v2-seite main, #z-wege-stelle) .z-wege:not(.z-wege--kurz, .z-wege--arbeitgeber) { display: flex; flex-direction: column; gap: var(--s-4); padding: 1.25rem var(--s-4); background: #faf7f6; border-radius: var(--radius); color: var(--c-text); }
:is(.v2-seite main, #z-wege-stelle) .z-wege__kopf { font-size: 1.1875rem; font-weight: 700; line-height: 1.3; color: var(--c-text); }
:is(.v2-seite main, #z-wege-stelle) .z-wege__wahl { display: grid; grid-template-columns: 8px minmax(0, 1fr); grid-template-areas: "skala selbst" "skala karten" "skala wir"; gap: .625rem var(--s-3); }
:is(.v2-seite main, #z-wege-stelle) .z-wege__skala { grid-area: skala; position: relative; margin: 1.25rem 0; border-radius: var(--radius-pill); background: linear-gradient(180deg, var(--ee-rot-zart) 0%, var(--ee-rot-hell) 50%, var(--ee-rot) 100%); }
:is(.v2-seite main, #z-wege-stelle) .z-wege__punkt { display: none; }
:is(.v2-seite main, #z-wege-stelle) .z-wege__pol { font-size: .75rem; font-weight: 600; line-height: 1.4; color: var(--ee-grau-800); }
:is(.v2-seite main, #z-wege-stelle) .z-wege__pol--selbst { grid-area: selbst; }
:is(.v2-seite main, #z-wege-stelle) .z-wege__pol--wir { grid-area: wir; }
:is(.v2-seite main, #z-wege-stelle) .z-wege__karten { grid-area: karten; display: grid; grid-template-columns: minmax(0, 1fr); gap: .625rem; margin: 0; padding: 0; list-style: none; }
:is(.v2-seite main, #z-wege-stelle) .z-wege__karte { position: relative; display: grid; grid-template-columns: 40px auto minmax(0, 1fr) auto; grid-template-areas: "symbol titel titel titel" "symbol text text preis";
  align-items: center; gap: 2px var(--s-3); min-width: 0; min-height: 44px; margin: 0; padding: .875rem; background: #fff; border: 1px solid var(--c-linie); border-radius: 10px; box-sizing: border-box; list-style: none; }
:is(.v2-seite main, #z-wege-stelle) .z-wege__karte::before { content: none; }
:is(.v2-seite main, #z-wege-stelle) .z-wege__symbol { grid-area: symbol; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--ee-rot-zart) 45%, #fff); color: var(--ee-rot); }
:is(.v2-seite main, #z-wege-stelle) .z-wege__symbol svg { width: 20px; height: 20px; }
:is(.v2-seite main, #z-wege-stelle) .z-wege__karte .z-wege__titel { grid-area: titel; font-size: 1rem; font-weight: 700; line-height: 1.3; color: var(--c-text); }
:is(.v2-seite main, #z-wege-stelle) .z-wege__karte .z-wege__text { grid-area: text; font-size: .875rem; line-height: 1.45; color: var(--ee-grau-900); hyphens: auto; overflow-wrap: normal; }
:is(.v2-seite main, #z-wege-stelle) .z-wege__preis { grid-area: preis; align-self: start; display: flex; flex-direction: column; align-items: flex-end; padding-top: 2px; text-align: right; line-height: 1.25; }
:is(.v2-seite main, #z-wege-stelle) .z-wege__betrag { font-size: .875rem; font-weight: 700; color: var(--ee-rot); white-space: nowrap; }
:is(.v2-seite main, #z-wege-stelle) .z-wege__zusatz { font-size: .75rem; color: var(--ee-grau-800); }
:is(.v2-seite main, #z-wege-stelle) .z-wege__etikett { grid-area: etikett; justify-self: start; padding: 3px 10px; background: var(--ee-rot); color: #fff; border-radius: var(--radius-pill); font-size: .75rem; font-weight: 700; line-height: 1.4; }
:is(.v2-seite main, #z-wege-stelle) .z-wege__karte a.z-wege__knopf:is(:link, :visited) { grid-area: knopf; justify-self: stretch; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: .625rem .5rem; box-sizing: border-box;
  border: 1.5px solid var(--ee-rot); border-radius: var(--radius-s); background: #fff; color: var(--ee-rot); font-size: .9375rem; font-weight: 600; line-height: 1.3; text-align: center; text-decoration: none; }
:is(.v2-seite main, #z-wege-stelle) .z-wege__karte a.z-wege__knopf:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--ee-rot-zart) 45%, #fff); color: var(--ee-rot-dunkel); }
:is(.v2-seite main, #z-wege-stelle) .z-wege__karte--tipp { grid-template-areas: "symbol titel titel titel" "symbol text text preis" "etikett etikett knopf knopf"; border: 2px solid var(--ee-rot); box-shadow: 0 6px 18px rgba(189,49,34,.12); }
:is(.v2-seite main, #z-wege-stelle) .z-wege__karte--tipp .z-wege__etikett { margin-top: var(--s-3); }
:is(.v2-seite main, #z-wege-stelle) .z-wege__karte--tipp a.z-wege__knopf:is(:link, :visited) { margin-top: var(--s-3); background: var(--ee-rot); color: #fff; }
:is(.v2-seite main, #z-wege-stelle) .z-wege__karte--tipp a.z-wege__knopf:is(:hover, :focus-visible) { background: var(--ee-rot-dunkel); border-color: var(--ee-rot-dunkel); color: #fff; }
:is(.v2-seite main, #z-wege-stelle) .z-wege__karte--tipp .z-wege__symbol { background: var(--ee-rot); color: #fff; }
:is(.v2-seite main, #z-wege-stelle) .z-wege__mwst { font-size: .75rem; color: var(--ee-grau-800); }

/* schmal: ganze Zeile antippbar (der Link liegt über der ganzen Zeile, Linktext nur für Screenreader); Fokusrahmen am Link */
@media (max-width: 47.99rem) {
  :is(.v2-seite main, #z-wege-stelle) .z-wege__karte:not(.z-wege__karte--tipp) a.z-wege__knopf:is(:link, :visited) { position: absolute; inset: 0; z-index: 1; min-height: 0; padding: 0; border: 0; border-radius: inherit; background: none; }
  :is(.v2-seite main, #z-wege-stelle) .z-wege__karte:not(.z-wege__karte--tipp) .z-wege__knopftext { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  :is(.v2-seite main, #z-wege-stelle) .z-wege__karte:not(.z-wege__karte--tipp):has(a.z-wege__knopf:hover) { border-color: var(--ee-rot); }
}

/* breit: Skala waagerecht mit drei Punkten (Mitte = Software), darunter drei Karten */
@media (min-width: 48rem) {
  :is(.v2-seite main, #z-wege-stelle) .z-wege:not(.z-wege--kurz, .z-wege--arbeitgeber) { gap: 1.375rem; padding: 1.75rem; }
  :is(.v2-seite main, #z-wege-stelle) .z-wege__kopf { font-size: 1.375rem; }
  :is(.v2-seite main, #z-wege-stelle) .z-wege__wahl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "skala skala" "selbst wir" "karten karten"; row-gap: .75rem; }
  :is(.v2-seite main, #z-wege-stelle) .z-wege__skala { height: 8px; margin: 8px 4px 0; background: linear-gradient(90deg, var(--ee-rot-zart) 0%, var(--ee-rot-hell) 50%, var(--ee-rot) 100%); }
  :is(.v2-seite main, #z-wege-stelle) .z-wege__punkt { display: block; position: absolute; top: 50%; left: 16.6%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #fff; border: 3px solid var(--ee-rot-hell); box-sizing: border-box; }
  :is(.v2-seite main, #z-wege-stelle) .z-wege__punkt--tipp { left: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; background: var(--ee-rot); border: 4px solid #fff; box-shadow: 0 0 0 2px var(--ee-rot); }
  :is(.v2-seite main, #z-wege-stelle) .z-wege__punkt:last-child { left: 83.3%; border-color: var(--ee-rot); }
  :is(.v2-seite main, #z-wege-stelle) .z-wege__pol--wir { text-align: right; }
  :is(.v2-seite main, #z-wege-stelle) .z-wege__karten { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .875rem; margin-top: .25rem; }
  :is(.v2-seite main, #z-wege-stelle) .z-wege__karte, :is(.v2-seite main, #z-wege-stelle) .z-wege__karte--tipp { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto 1fr auto;
    grid-template-areas: "symbol etikett" "titel titel" "preis preis" "text text" "knopf knopf"; align-items: start; gap: .625rem; padding: 1.25rem; }
  :is(.v2-seite main, #z-wege-stelle) .z-wege__karte--tipp { padding: calc(1.25rem - 1px); }
  :is(.v2-seite main, #z-wege-stelle) .z-wege__symbol { width: 44px; height: 44px; }
  :is(.v2-seite main, #z-wege-stelle) .z-wege__symbol svg { width: 22px; height: 22px; }
  :is(.v2-seite main, #z-wege-stelle) .z-wege__etikett, :is(.v2-seite main, #z-wege-stelle) .z-wege__karte--tipp .z-wege__etikett { align-self: center; justify-self: end; margin: 0; }
  :is(.v2-seite main, #z-wege-stelle) .z-wege__karte .z-wege__titel { font-size: 1.0625rem; }
  :is(.v2-seite main, #z-wege-stelle) .z-wege__preis { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 6px; text-align: left; }
  :is(.v2-seite main, #z-wege-stelle) .z-wege__betrag { font-size: 1.375rem; line-height: 1.1; color: var(--c-text); }
  :is(.v2-seite main, #z-wege-stelle) .z-wege__karte .z-wege__text { font-size: .9375rem; line-height: 1.5; }
  :is(.v2-seite main, #z-wege-stelle) .z-wege__karte a.z-wege__knopf:is(:link, :visited), :is(.v2-seite main, #z-wege-stelle) .z-wege__karte--tipp a.z-wege__knopf:is(:link, :visited) { align-self: end; margin-top: 0; }
}