/* Dienstnetto – Rechner: Kartenstapel (Handy), Formular + Ergebnis (Desktop), Info-Blatt. */

.rechner { min-height: 60vh; }
.rechner-laden { padding: 1rem 0; }
.rechner-kopf { margin: 0.3rem 0 0.9rem; }
.rechner-kopf h1 { margin: 0; }
.rechner-kopf .unter { margin: 0.35rem 0 0; }
.rechner ~ .block, .rechner ~ .faq, .rechner ~ .such-chips { margin-top: 2rem; }

/* ---------- Kartenstapel ---------- */
.deck { display: flex; flex-direction: column; gap: 0.9rem; max-width: 520px; margin: 0 auto; }
.deck-kopf { display: flex; align-items: center; gap: 0.75rem; }
.zurueck { appearance: none; border: 1px solid var(--linie); background: var(--flaeche); color: var(--text);
  width: 40px; height: 40px; border-radius: 50%; font-size: 1.4rem; line-height: 1; cursor: pointer; flex: none; }
.zurueck:disabled { opacity: 0.35; cursor: default; }
.fortschritt { flex: 1; height: 6px; background: var(--flaeche-2); border-radius: 999px; overflow: hidden; }
.fortschritt span { display: block; height: 100%; background: var(--akzent); border-radius: inherit; transition: width 0.3s ease; }
.schritt { font-size: 0.85rem; color: var(--leise); font-weight: 650; font-variant-numeric: tabular-nums; }

.stapel { position: relative; padding-bottom: 14px; }
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 26px; box-shadow: var(--schatten-hoch); }
.karte.hinten1, .karte.hinten2 { position: absolute; left: 0; right: 0; top: 0; bottom: 14px; }
.karte.hinten1 { transform: translateY(8px) scale(0.965); opacity: 0.75; }
.karte.hinten2 { transform: translateY(16px) scale(0.93); opacity: 0.45; }
.karte.vorn { position: relative; padding: 1.25rem 1.2rem 1.3rem; touch-action: pan-y; animation: rein 0.28s ease-out;
  transition: transform 0.2s ease, opacity 0.2s ease; }
.karte.vorn.zieht { transition: none; cursor: grabbing; }
.karte.vorn[data-neigung="links"] { box-shadow: -12px 0 0 -4px var(--akzent-zart), var(--schatten-hoch); }
.karte.vorn[data-neigung="rechts"] { box-shadow: 12px 0 0 -4px var(--akzent-zart), var(--schatten-hoch); }
.karte.vorn.weg-links { transform: translateX(-120%) rotate(-14deg); opacity: 0; }
.karte.vorn.weg-rechts { transform: translateX(120%) rotate(14deg); opacity: 0; }
@keyframes rein { from { transform: translateY(14px) scale(0.97); opacity: 0.4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .karte.vorn { animation: none; } }
.karte-kopf { display: flex; justify-content: space-between; align-items: center; }
.karte-nr { margin: 0; font-size: 0.78rem; font-weight: 700; color: var(--akzent); text-transform: uppercase; letter-spacing: 0.06em; }
.karte h2 { font-size: 1.55rem; margin: 0.35rem 0 0.25rem; letter-spacing: -0.02em; }
.karte-text { margin: 0 0 1rem; color: var(--leise); }
.wisch-hinweis { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--leise); margin: 0.9rem 0 0; }

/* Info-Knopf */
.info-knopf { appearance: none; flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--leise);
  background: transparent; color: var(--leise); font: 700 0.8rem/1 Georgia, serif; font-style: italic; cursor: pointer;
  display: inline-grid; place-items: center; margin-left: 0.35rem; vertical-align: middle; }
.info-knopf:hover { border-color: var(--akzent); color: var(--akzent); }
.info-knopf { position: relative; }
.info-knopf::after { content: ""; position: absolute; inset: -8px; }  /* größere Tippfläche, Optik bleibt klein */

/* Antworten */
.wahl { appearance: none; font: inherit; color: var(--text); text-align: left; cursor: pointer; display: flex; align-items: center;
  gap: 0.7rem; width: 100%; padding: 0.85rem 0.95rem; border-radius: 16px; border: 1.5px solid var(--linie);
  background: var(--flaeche); transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease; position: relative; }
.wahl:hover { border-color: var(--akzent); }
.wahl:active { transform: scale(0.985); }
.wahl.an { border-color: var(--akzent); background: var(--akzent-zart); }
.wahl-symbol { font-size: 1.45rem; line-height: 1; flex: none; }
.wahl-text { display: flex; flex-direction: column; min-width: 0; overflow-wrap: break-word; }
.wahl-text b { font-size: 1.02rem; -webkit-hyphens: auto; hyphens: auto; }
.wahl-text small { color: var(--leise); font-size: 0.82rem; -webkit-hyphens: auto; hyphens: auto; }
.empf { position: absolute; top: -9px; right: 10px; background: var(--akzent); color: var(--akzent-text); font-size: 0.68rem;
  font-weight: 750; padding: 0.1rem 0.45rem; border-radius: 999px; }
.wahl-zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.wahl-zwei .wahl { flex-direction: column; align-items: flex-start; padding: 1rem 0.9rem; min-height: 120px; }
.wahl-zwei .wahl-symbol { font-size: 1.9rem; }
.wahl-liste { display: grid; gap: 0.5rem; }
.wahl-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; }
.wahl-raster .wahl { padding: 0.65rem 0.75rem; }
.wahl-raster .wahl-text b { font-size: 0.93rem; }
.wahl-raster > :last-child:nth-child(odd) { grid-column: 1 / -1; }  /* keine einzelne Kachel in der letzten Reihe */
.wahl-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 0.5rem; }
.wahl-chips .wahl { flex-direction: column; align-items: flex-start; gap: 0.1rem; padding: 0.65rem 0.75rem; }
.weiter { margin-top: 1rem; width: 100%; justify-content: center; padding: 0.8rem 1rem; }

.gruppe-gross { display: flex; align-items: baseline; gap: 0.6rem; margin: 0.2rem 0 0.6rem; }
.gruppe-gross b { font-size: 3rem; letter-spacing: -0.04em; line-height: 1; color: var(--akzent); }
.marke-vor { font-size: 0.78rem; font-weight: 700; background: var(--akzent-zart); color: var(--akzent); padding: 0.15rem 0.55rem; border-radius: 999px; }
.marke-vor.eigen { background: var(--flaeche-2); color: var(--leise); }
.warum { background: var(--flaeche-2); border-radius: 14px; padding: 0.7rem 0.85rem; margin: 0 0 0.9rem; font-size: 0.93rem; }
.chip-rolle { display: flex; gap: 0.4rem; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; }
.chip-rolle::-webkit-scrollbar { display: none; }
.chip { appearance: none; font: inherit; font-weight: 700; border: 1.5px solid var(--linie); background: var(--flaeche);
  color: var(--text); border-radius: 999px; padding: 0.45rem 0.8rem; cursor: pointer; white-space: nowrap; }
.chip[aria-pressed="true"] { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); }

.zahl-feld { display: flex; align-items: center; gap: 0.5rem; background: var(--flaeche-2); border-radius: 16px; padding: 0.4rem 0.9rem; }
.zahl-feld input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font-weight: 800; font-size: 1.8rem; line-height: 1.2;
  padding: 0.35rem 0; font-variant-numeric: tabular-nums; }
.zahl-feld input:focus { outline: none; }
.zahl-feld:focus-within { box-shadow: 0 0 0 2px var(--akzent); }
.zahl-feld span { font-weight: 800; font-size: 1.3rem; color: var(--leise); }

.live { display: flex; justify-content: space-between; gap: 0.75rem; align-items: center;
  background: var(--flaeche); background: color-mix(in srgb, var(--flaeche) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--linie); border-radius: 18px; padding: 0.7rem 1rem; box-shadow: var(--schatten); font-size: 0.92rem;
  margin-bottom: max(0px, env(safe-area-inset-bottom)); }
.live b { font-variant-numeric: tabular-nums; }
.live span:last-child b { color: var(--akzent); font-size: 1.15rem; }
.ergebnis-knopf { justify-content: center; }

/* ---------- Ergebnis-Ticket ---------- */
.ergebnis { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }
.ticket { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 26px; box-shadow: var(--schatten-hoch);
  padding: 1.3rem 1.2rem; position: relative; overflow: hidden; }
.ticket::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: linear-gradient(90deg, var(--akzent), var(--akzent-hell)); }
.ticket-netto { font-size: clamp(2.4rem, 11vw, 3.2rem); font-weight: 850; letter-spacing: -0.04em; margin: 0.2rem 0 0.1rem;
  font-variant-numeric: tabular-nums; color: var(--akzent); line-height: 1.1; }
.ticket.leer .ticket-netto { color: var(--leise); }
.ticket-sub { color: var(--leise); margin: 0 0 1rem; font-size: 0.92rem; }
.vorl { color: var(--warn); }
.ticket-teil { border-top: 1px dashed var(--linie); padding-top: 0.75rem; margin-top: 0.75rem; }
.ticket-teil h3 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--leise); margin: 0 0 0.4rem; }
.posten { list-style: none; margin: 0; padding: 0; }
.posten li { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.3rem 0; }
.pz-label { display: flex; align-items: center; min-width: 0; }
.posten b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.posten .summe { border-top: 1px solid var(--linie); margin-top: 0.3rem; padding-top: 0.5rem; font-weight: 750; }
.posten .summe.netto b { color: var(--akzent); font-size: 1.15rem; }
.ticket-hinweise { margin: 0.8rem 0 0; padding: 0.7rem 0.85rem 0.7rem 1.9rem; color: var(--text); font-size: 0.88rem;
  background: var(--flaeche-2); border-radius: 12px; }
.ticket-hinweise li + li { margin-top: 0.35rem; }
.ticket-hinweise li::marker { color: var(--akzent); }
.warum-liste summary { font-weight: 700; }
.warum-liste ul { margin: 0.5rem 0 0; padding-left: 1.1rem; font-size: 0.9rem; color: var(--leise); }
.warum-liste li { margin-bottom: 0.35rem; }
.ticket-jahr { margin: 0.9rem 0 0; font-size: 0.9rem; color: var(--leise); }
.ticket-jahr b { color: var(--text); font-variant-numeric: tabular-nums; }
.vorl-text { margin: 0.75rem 0 0; }

.angaben { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1rem; }
.angaben h3 { margin: 0; }
.angaben-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; margin-top: 0.6rem; }
.angabe { appearance: none; font: inherit; text-align: left; border: 1px solid var(--linie); background: var(--bg); color: var(--text);
  border-radius: 12px; padding: 0.5rem 0.65rem; cursor: pointer; display: flex; flex-direction: column; min-width: 0; }
.angabe small { color: var(--leise); font-size: 0.74rem; }
.angabe b { font-size: 0.9rem; overflow-wrap: anywhere; }
.umfang { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.9rem; font-weight: 650; }
.umfang input { flex: 1; min-width: 0; accent-color: var(--akzent); }
.umfang b { white-space: nowrap; min-width: 3.4em; text-align: right; font-variant-numeric: tabular-nums; }
.ergebnis-knoepfe { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.ergebnis-knoepfe .knopf { flex: 1 1 auto; justify-content: center; white-space: nowrap; padding-inline: 0.8rem; }
.ergebnis-knoepfe .pdf-knopf { flex-basis: 100%; }

/* ---------- Desktop ---------- */
.desk { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 2.5rem; align-items: start; }
.titel-gross { font-size: clamp(1.9rem, 5.5vw, 2.6rem); line-height: 1.12; margin: 0.25rem 0 0.3rem; letter-spacing: -0.025em; font-weight: 800; }
.feld { padding: 1rem 0; border-top: 1px solid var(--linie); }
.feld-kopf { display: flex; align-items: center; gap: 0.2rem; }
.feld h3 { font-size: 1.02rem; margin: 0; }
.feld .klein { margin: 0.15rem 0 0.6rem; }
.seg { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.55rem; }
.seg .wahl { width: auto; padding: 0.5rem 0.9rem; border-radius: 999px; }
.seg .wahl-text { flex-direction: row; gap: 0.4rem; align-items: baseline; }
.seg-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.45rem; margin-top: 0.55rem; }
.seg-raster .wahl { padding: 0.6rem 0.75rem; }
.desk select { font: inherit; font-size: 1rem; padding: 0.6rem 0.8rem; border-radius: 12px; border: 1.5px solid var(--feldrand);
  background: var(--flaeche); color: var(--text); min-width: 240px; max-width: 100%; margin-top: 0.55rem; }
.desk .zahl-feld { max-width: 260px; margin-top: 0.55rem; }
.desk .zahl-feld input { font-size: 1.4rem; }
.desk .warum { margin-top: 0.7rem; }
/* Klebt neben dem Formular, aber nie höher als das Fenster – sonst liegen Abzüge und Knöpfe außer Sicht */
.desk-ergebnis { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 0.8rem;
  max-height: calc(100vh - 100px); overflow-y: auto; overscroll-behavior: contain; padding: 2px; }

/* ---------- Info-Blatt ---------- */
.blatt-huelle { position: fixed; inset: 0; z-index: 50; background: rgba(5, 10, 20, 0); display: flex; align-items: flex-end;
  justify-content: center; transition: background 0.18s ease; }
.blatt-huelle.offen { background: rgba(5, 10, 20, 0.45); }
.blatt { background: var(--flaeche); color: var(--text); width: 100%; max-width: 560px; max-height: 80vh; overflow: auto;
  border-radius: 24px 24px 0 0; padding: 1.3rem 1.2rem calc(1.5rem + env(safe-area-inset-bottom)); position: relative;
  transform: translateY(100%); transition: transform 0.2s ease; }
.blatt-huelle.offen .blatt { transform: none; }
.blatt h3 { margin: 0 2.5rem 0.6rem 0; font-size: 1.25rem; }
.blatt h4 { margin: 1rem 0 0.3rem; font-size: 0.95rem; color: var(--akzent); }
.blatt p { margin: 0 0 0.7rem; line-height: 1.6; }
.blatt-zu { position: absolute; top: 0.9rem; right: 0.9rem; width: 36px; height: 36px; border-radius: 50%; border: 0;
  background: var(--flaeche-2); color: var(--text); font-size: 1.4rem; cursor: pointer; }
@media (min-width: 960px) {
  .blatt-huelle { align-items: center; }
  .blatt { border-radius: 24px; transform: scale(0.96); opacity: 0; transition: transform 0.18s ease, opacity 0.18s ease; }
  .blatt-huelle.offen .blatt { transform: none; opacity: 1; }
}

.so-rechnen { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.55rem; font-size: 0.9rem; color: var(--leise); }
.so-rechnen li { padding-left: 1.4rem; position: relative; }
.so-rechnen li::before { content: "✓"; position: absolute; left: 0; color: var(--akzent); font-weight: 800; }
.so-rechnen b { color: var(--text); }
.feld.gesperrt h3 { color: var(--leise); }
.feld.gesperrt .klein { font-style: italic; }

/* ---------- Runde 3: Stepper, Bereiche, Zusatzfelder ---------- */
.stepper { display: flex; align-items: center; gap: 0.5rem; background: var(--flaeche-2); border-radius: 18px; padding: 0.4rem; }
.stepper input { flex: 1; min-width: 0; text-align: center; border: 0; background: transparent; color: var(--text);
  font-weight: 850; font-size: 2.1rem; line-height: 1.1; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input:focus { outline: none; }
.stepper:focus-within { box-shadow: 0 0 0 2px var(--akzent); }
.stepper-einheit { color: var(--leise); font-weight: 700; margin-right: 0.3rem; }
.stepper-knopf { flex: none; width: 48px; height: 48px; border-radius: 14px; border: 0; background: var(--flaeche); color: var(--akzent);
  font-size: 1.6rem; font-weight: 700; cursor: pointer; box-shadow: var(--schatten); }
.stepper-knopf:active { transform: scale(0.96); }
.chip-rolle.schnell { margin-top: 0.6rem; }
.chip-rolle.umbruch { flex-wrap: wrap; overflow: visible; }
.anders { margin-top: 0.9rem; border-top: 1px dashed var(--linie); padding-top: 0.7rem; }
.anders > summary { cursor: pointer; font-weight: 700; color: var(--akzent); list-style: none; }
.anders > summary::-webkit-details-marker { display: none; }
.anders > summary::before { content: "＋ "; }
.anders[open] > summary::before { content: "– "; }
.anders[open] > summary { margin-bottom: 0.6rem; }
.stufe-ergebnis { margin: 0.7rem 0 0; font-size: 1.05rem; min-height: 1.5em; }
.stufe-ergebnis b { color: var(--akzent); }
.link-knopf { appearance: none; border: 0; background: none; color: var(--akzent); font: inherit; font-weight: 650; padding: 0.4rem 0;
  margin-top: 0.4rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.bereich-titel { grid-column: 1 / -1; margin: 0.6rem 0 0.1rem; font-size: 0.75rem; font-weight: 750; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--leise); }
.wahl-liste .bereich-titel:first-child, .seg-raster .bereich-titel:first-child { margin-top: 0; }
.neben-feld { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 0.6rem; margin-top: 0.8rem; font-size: 0.9rem; color: var(--leise); }
.zahl-feld.klein-feld { padding: 0.15rem 0.7rem; width: 9rem; }
.zahl-feld.klein-feld input { font-size: 1.1rem; }
.zahl-feld.klein-feld span { font-size: 1rem; }
.weitere-titel { font-size: 1.05rem; margin: 1.6rem 0 0; padding-top: 1rem; border-top: 2px solid var(--linie); }
.desk .stepper { max-width: 320px; margin-top: 0.55rem; }
.desk .stepper input { font-size: 1.5rem; }
.desk .wahl-chips { margin-top: 0.55rem; }
/* Beruf: Bereiche als Kacheln, dann die Rollen – zweispaltig und kompakt */
.bereich-raster, .wahl-liste[data-frage="beruf"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; }
.bereich-raster .wahl, .wahl-liste[data-frage="beruf"] .wahl { flex-direction: column; align-items: flex-start; gap: 0.25rem; padding: 0.7rem 0.75rem; }
.bereich-raster .wahl-symbol, .wahl-liste[data-frage="beruf"] .wahl-symbol { font-size: 1.35rem; }
.bereich-raster .wahl-text b, .wahl-liste[data-frage="beruf"] .wahl-text b { font-size: 0.95rem; }
.bereich-raster .wahl-text small, .wahl-liste[data-frage="beruf"] .wahl-text small { font-size: 0.76rem; line-height: 1.3; }
@media (max-width: 359px) {
  /* Sehr schmale Handys: mehr Breite für die Namen der Bereiche */
  .karte.vorn { padding-left: 0.85rem; padding-right: 0.85rem; }
  .bereich-raster .wahl { padding: 0.6rem 0.6rem; }
}
/* 13 Bereiche: die letzte Kachel füllt die Reihe statt allein zu stehen (12 Kacheln gehen in 2, 3 und 4 Spalten auf) */
.bereich-raster > .wahl:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 0.7rem; }
.bereich-kopf { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin: -0.3rem 0 0.6rem; }
.bereich-kopf .link-knopf { margin: 0; }
.bereich-name { font-weight: 750; color: var(--leise); font-size: 0.9rem; }
/* Erfahrungsstufe: „Keine Berufserfahrung“ oben, Stufen darunter, „Ich kenne meine Stufe nicht“ gut sichtbar */
.neu-knopf { margin-bottom: 0.4rem; }
.neu-knopf .wahl-symbol { font-size: 1.5rem; }
.stufen-titel { margin: 0.8rem 0 0.45rem; font-weight: 650; }
.nicht-kennen { width: 100%; justify-content: center; margin-top: 0.75rem; }
.desk .bereich-raster { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); margin-top: 0.55rem; }
.desk .wahl-liste[data-frage="beruf"] { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.desk .neu-knopf { max-width: 360px; margin-top: 0.55rem; }
.desk .nicht-kennen { width: auto; }

/* ---------- Erhöhung, Ländervergleich, Laufzeiten ---------- */
.erh-zeile { display: flex; align-items: center; gap: 0.55rem; margin: -0.4rem 0 0.9rem; padding: 0.55rem 0.7rem; border-radius: 12px;
  background: var(--akzent-zart); font-size: 0.9rem; cursor: pointer; }
.erh-zeile input { width: 1.15rem; height: 1.15rem; accent-color: var(--akzent); flex: none; }
.erh-zeile span { flex: 1; }
.erh-zeile.klein { cursor: default; background: var(--flaeche-2); }
.erh-diff { color: var(--akzent); white-space: nowrap; }
.vergleich-teil summary { display: flex; align-items: center; flex-wrap: wrap; gap: 0.2rem 0.4rem; font-weight: 700; }
.vg-kopf { flex-basis: 100%; font-weight: 500; color: var(--leise); font-size: 0.85rem; }
.vg-liste { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.35rem; }
.vg-liste li { display: grid; grid-template-columns: minmax(0, 1fr) 70px auto; align-items: center; gap: 0.6rem; padding: 0.3rem 0.4rem; border-radius: 10px; }
.vg-liste li.ich { background: var(--akzent-zart); }
.vg-land { font-weight: 650; font-size: 0.9rem; min-width: 0; overflow-wrap: anywhere; }
.vg-land small, .vg-betrag small { display: block; font-weight: 500; font-size: 0.74rem; color: var(--leise); }
.vg-balken { height: 6px; background: var(--flaeche-2); border-radius: 999px; overflow: hidden; }
.vg-balken i { display: block; height: 100%; background: var(--akzent); border-radius: inherit; }
.vg-betrag { text-align: right; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 0.92rem; }

/* Ergebnis: Kennzahlen, aufklappbare Abschnitte, Was wäre wenn */
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; margin: 0 0 0.9rem; }
.kpis div { background: var(--flaeche-2); border-radius: 12px; padding: 0.5rem 0.6rem; min-width: 0; }
.kpis dt { font-size: 0.72rem; color: var(--leise); line-height: 1.2; }
.kpis dd { margin: 0.15rem 0 0; font-weight: 800; font-variant-numeric: tabular-nums; font-size: 1rem; overflow-wrap: anywhere; }
.aufklapp > summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.45rem;
  font-weight: 700; padding-right: 1.6rem; position: relative; min-height: 1.6rem; }
.aufklapp > summary::-webkit-details-marker { display: none; }
.aufklapp > summary::after { content: ""; position: absolute; right: 0.35rem; top: 0.45rem; width: 0.5rem; height: 0.5rem;
  border-right: 2px solid var(--leise); border-bottom: 2px solid var(--leise); transform: rotate(45deg); transition: transform 0.15s; }
.aufklapp[open] > summary::after { transform: rotate(-135deg); top: 0.65rem; }
.aufklapp[open] > summary { margin-bottom: 0.5rem; }
.aufklapp-teaser { flex-basis: 100%; font-weight: 500; color: var(--leise); font-size: 0.86rem; }
.aufklapp h3 { margin-top: 0.2rem; }
.aufklapp h3.abstand { margin-top: 0.9rem; }
.warum-punkte { margin: 0; padding-left: 1.1rem; font-size: 0.9rem; color: var(--leise); }
.warum-punkte li { margin-bottom: 0.35rem; }
.wenn-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.wenn-zeile { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; font: inherit; text-align: left;
  padding: 0.55rem 0.75rem; border: 1px solid var(--linie); background: var(--flaeche); border-radius: 12px; color: var(--text); cursor: pointer; }
.wenn-zeile:hover { border-color: var(--akzent); }
.wenn-zeile span { min-width: 0; }
.wenn-zeile b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.wenn-zeile b.plus { color: var(--akzent); }
.wenn-zeile b.minus { color: var(--warn); }
.wenn-liste + .klein { margin-top: 0.5rem; }

/* Ämter und Funktionen in der Gruppenwahl */
.amt-titel { margin: 0.9rem 0 0.35rem; font-weight: 700; color: var(--text); }
.amt-liste { display: grid; gap: 0.35rem; margin-bottom: 0.8rem; }
.amt { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; width: 100%; text-align: left; font: inherit; cursor: pointer;
  padding: 0.55rem 0.75rem; border: 1.5px solid var(--linie); border-radius: 12px; background: var(--flaeche); color: var(--text); }
.amt span { display: flex; flex-direction: column; min-width: 0; }
.amt b { font-size: 0.95rem; overflow-wrap: anywhere; }
.amt small { color: var(--leise); font-size: 0.78rem; overflow-wrap: anywhere; }
.amt em { font-style: normal; font-weight: 800; color: var(--akzent); white-space: nowrap; font-variant-numeric: tabular-nums; }
.amt[aria-pressed="true"] { border-color: var(--akzent); background: var(--akzent-zart); }

/* Zeitleiste der Stufen im Ergebnis */
.seit-zeile { display: grid; gap: 0.3rem; margin: 0 0 0.7rem; font-weight: 650; font-size: 0.92rem; }
.seit-zeile .klein { font-weight: 500; }
.seit-zeile input { font: inherit; padding: 0.5rem 0.65rem; border: 1.5px solid var(--feldrand); border-radius: 10px; background: var(--flaeche); color: var(--text); max-width: 220px; }
.zeitleiste tr.ich { background: var(--akzent-zart); }
.karte.vorn h2:focus { outline: none; }  /* nur Ansage-Ziel nach Kartenwechsel, kein Bedienelement */

/* ---------- Desktop-Gestaltung (ab 960 px) ---------- */
@media (min-width: 960px) {
  .desk { grid-template-columns: minmax(0, 1fr) 440px; gap: 3.25rem; }
  .desk .titel-gross { font-size: 2.9rem; letter-spacing: -0.035em; }
  /* Schritte nummeriert: 1 Beruf, 2 Status, 3 Land … – gesperrte grau */
  .desk-form { counter-reset: schritt; }
  .desk-form > .feld { counter-increment: schritt; padding: 1.35rem 0; }
  .desk-form > .feld .feld-kopf h3::before { content: counter(schritt); display: inline-grid; place-items: center; width: 1.65rem; height: 1.65rem;
    margin-right: 0.65rem; border-radius: 50%; background: var(--akzent); color: var(--akzent-text); font-size: 0.82rem; font-weight: 750;
    vertical-align: 0.08em; font-variant-numeric: tabular-nums; }
  .desk-form > .feld.gesperrt .feld-kopf h3::before { background: var(--flaeche-2); color: var(--leise); }
  .desk-form > .feld .feld-kopf h3 { font-size: 1.08rem; }
  .desk-form > .feld > .klein, .desk-form > .feld > :not(.feld-kopf) { margin-left: 2.3rem; }
  /* Ergebnis: Platz für den Schatten innerhalb der scrollenden Spalte, damit keine Kante entsteht */
  .desk-ergebnis { padding: 4px 16px 36px; margin: -4px -16px 0; }
  .desk-ergebnis .ticket { box-shadow: var(--schatten); }
  .desk .ticket.leer .ticket-netto { width: 62%; height: 3.4rem; margin: 0.5rem 0 0.9rem; border-radius: 14px; background: var(--flaeche-2);
    color: transparent; }  /* Platzhalter statt einsamem Strich; vorgelesen wird weiter „–“ */
  .desk .ergebnis-knoepfe .knopf.hell { flex: 1 1 0; }
}
/* „Bleibt bei dir“: leise, mit Schloss in der Akzentfarbe */
.privat { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0.9rem 0.2rem 0; font-size: 0.8rem; line-height: 1.45; color: var(--leise); }
.privat svg { flex: none; width: 14px; height: 14px; margin-top: 0.12rem; color: var(--akzent); }
.privat b { color: var(--text); font-weight: 650; }
.desk-ergebnis .privat { margin-top: 0; }