/* Rechner-Formular + Ergebnis -- reuses the .contact-form/.auth-form input
   look from components.css (mono font, same border/radius tokens) rather
   than redefining it, only adds the layout/grid this calculator needs. */

/* Zweispaltiges Layout nach omnicalculator.com-Vorbild: Inhalt/Erklaerung
   links (fliessend), der Rechner selbst rechts in einer sticky Karte --
   umgekehrt zur vorherigen Fassung (Formular links), weil das der
   erkennbare Wiedererkennungswert der Vorlage ist: der Rechner bleibt beim
   Scrollen durch den Erklaertext sichtbar, statt darunter zu verschwinden. */
.rechner-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 24em);
    gap: var(--spacing-8);
    align-items: start;
    /* .page selbst hat bewusst kein Top-Padding (siehe layout.css) --
       ohne eigenen Abstand sitzt die H1 zu dicht am blurred Header
       (.site-header::after-Verlauf). */
    margin-top: var(--spacing-8);
}

.rechner-sidebar {
    position: sticky;
    top: var(--spacing-6);
    /* Buendig mit dem Lead-Absatz, nicht der H1: H1 hat kein margin-top
       und margin-bottom: var(--spacing-3) (siehe base.css), die Hoehe
       ergibt sich aus font-size * line-height. */
    margin-top: calc(var(--heading-size-h1) * var(--heading-leading) + var(--spacing-3));
}

@media (max-width: 900px) {
    .rechner-page {
        /* minmax(0, 1fr) statt nacktem 1fr -- sonst darf die Spalte nicht
           unter den Min-Content ihrer Kinder schrumpfen (z.B. die
           Ergebnistabelle mit langen Zahlenzeilen), das Grid waechst dann
           ueber die Containerbreite hinaus und erzeugt horizontales
           Scrollen auf der ganzen Seite -- derselbe Grund, warum die
           Desktop-Regel oben schon minmax(0, ...) fuer beide Spalten
           nutzt, hier ging das beim Umschalten auf eine Spalte verloren. */
        grid-template-columns: minmax(0, 1fr);
    }
    .rechner-sidebar {
        position: static;
        margin-top: 0;
        /* Formular zuerst, Inhalt/Ergebnis danach -- im HTML steht
           .rechner-main (Text, Ergebnis, FAQ) zuerst, damit der Rechner
           auf Desktop rechts sticky neben dem gesamten Inhalt steht; auf
           schmalen Bildschirmen (gestapelt) soll aber die Eingabe zuerst
           kommen, nicht ein Ergebnisplatzhalter vor dem eigentlichen
           Formular. */
        order: -1;
    }
}

.rechner-toc {
    margin: var(--spacing-8) 0;
    padding: var(--spacing-5) var(--spacing-6);
    border: 1px solid var(--border-neutral-subtle);
    border-radius: var(--input-border-radius);
    background: var(--bg-surface-raised);
    max-width: 24em;
}

.rechner-toc-title {
    margin: 0 0 var(--spacing-2);
    font-size: var(--text-size-label);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--fg-neutral-body);
}

.rechner-toc ol {
    margin: 0;
    padding-left: 1.2em;
}

.rechner-toc a {
    color: var(--body-color);
}

.rechner-form {
    max-width: none;
}

.rechner-form .field {
    margin-bottom: var(--spacing-6);
}

/* [hidden] ist nur eine UA-Stylesheet-Regel -- .field hat kein eigenes
   display, aber sicherheitshalber explizit (siehe .field-row[hidden]
   weiter unten, derselbe Grund). */
.rechner-form .field[hidden] {
    display: none;
}

/* <details>/<summary> ganz ohne eigenes Styling sieht wie normaler
   Fliesstext aus, nicht wie eine aufklappbare Box -- braucht sichtbare
   Umrandung und einen klar interaktiv wirkenden Titel (Vorbild:
   .rechner-toc-Kasten). */
.rechner-form .field-details {
    margin-bottom: var(--spacing-6);
    padding: var(--spacing-4) var(--spacing-5);
    border: 1px solid var(--border-neutral-subtle);
    border-radius: var(--input-border-radius);
    background: var(--bg-surface-raised);
}

.rechner-form .field-details summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-2);
    cursor: pointer;
    font-size: var(--label-font-size);
    font-weight: var(--label-font-weight);
    list-style: none;
}

.rechner-form .field-details summary::-webkit-details-marker {
    display: none;
}

/* Dieselbe Chevron-Grafik wie bei den <select>-Feldern (siehe
   .rechner-form select oben) statt eines reinen Text-Dreiecks -- rechts
   buendig zum Rest der Formularfelder, dreht sich beim Aufklappen. */
.rechner-form .field-details summary::after {
    content: "";
    display: inline-block;
    flex-shrink: 0;
    width: 10px;
    height: 6px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23808080' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    transition: transform 0.15s ease;
}

.rechner-form .field-details[open] summary::after {
    transform: rotate(180deg);
}

.rechner-form .field-details[open] summary {
    margin-bottom: var(--spacing-4);
}

.rechner-form .field-details .field-row {
    margin-bottom: 0;
}

/* Fuer Felder, deren Beschriftung als Praefix in die Auswahloptionen selbst
   wandert (Jahr/Steuerklasse, z.B. Option-Text "Jahr 2026" statt einer
   eigenen Labelzeile) -- Screenreader brauchen das Label trotzdem. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* "Berechnen" bleibt beim Scrollen sichtbar. Auf Desktop steckt das
   Formular ohnehin in der sticky .rechner-sidebar (immer im Blickfeld);
   relevant wird das erst auf Schmalbildschirmen, wo die Sidebar unter den
   Inhalt rutscht (siehe .rechner-page-Breakpoint) und der Button sonst erst
   nach Ergebnis/Hinweisen/FAQ erreichbar waere. */
@media (max-width: 900px) {
    .rechner-form .submit-row {
        position: sticky;
        bottom: 0;
        margin: var(--spacing-6) -var(--spacing-5) 0;
        padding: var(--spacing-4) var(--spacing-5);
        background: var(--bg-base);
        border-top: 1px solid var(--border-neutral-subtle);
        z-index: 20;
    }

    .rechner-form .submit-row .button {
        width: 100%;
    }
}

.rechner-form .field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-4);
}

/* [hidden] ist nur eine UA-Stylesheet-Regel (display:none) -- die eigene
   display:grid oben hat als Autoren-CSS hoehere Prioritaet und gewinnt
   sonst, das Attribut haette also keine sichtbare Wirkung mehr. */
.rechner-form .field-row[hidden] {
    display: none;
}

/* Nebeneinanderstehende Felder in einer .field-row koennen unterschiedlich
   lange Labels haben (z.B. "Kinderfreibeträge (Zähler)" zweizeilig neben
   "Kinder unter 25 Jahre" einzeilig) -- ohne feste Labelhoehe rutschen die
   Eingabefelder selbst dadurch auf unterschiedliche Hoehen. Zwei Zeilen
   Platz fuer beide reservieren haelt sie auf gleicher Linie, egal welches
   Label tatsaechlich umbricht. */
.rechner-form .field-row label {
    min-height: 2.6em;
}

/* .field-toggle innerhalb einer .field-row (z.B. PKV-Beitrag +
   Krankengeldanspruch nebeneinander) mischt sich mit einem normalen
   .field: Label+Switch stehen dort normalerweise nebeneinander (eigene
   Zeile, vertikal zentriert), waehrend ein .field Label OBEN und Eingabe
   DARUNTER stapelt. Beide Grid-Zellen teilen sich denselben Top-Rand --
   ohne Anpassung schwebt der Switch mittig neben einem zweizeiligen
   Label, weit ueber dem Eingabefeld der Nachbarzelle. Fix: im
   Zeilenkontext dasselbe Stapelmuster wie .field (Label oben, Kontrolle
   darunter, beide linksbuendig) statt der sonst ueblichen
   Nebeneinander-Anordnung. */
.rechner-form .field-row .field-toggle {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

.rechner-form .field-row .field-toggle label {
    margin-bottom: var(--spacing-2);
}

.rechner-form label {
    display: block;
    font-size: var(--label-font-size);
    font-weight: var(--label-font-weight);
    margin-bottom: var(--spacing-2);
}

/* Info-Icon statt Dauertext unter dem Feld (Vorbild nettolohn.de) --
   spart die Zeile, die der frueher immer sichtbare .hint-Absatz brauchte.
   NICHT neben dem Label (erster Versuch) sondern als "kombiniertes Feld":
   Icon-Box und Eingabe/Auswahl bilden EINEN zusammenhaengenden Kasten mit
   gemeinsamer Umrandung, das Icon links angedockt -- exakt wie bei
   nettolohn.de, wo die "i"-Box optisch am Dropdown klebt statt frei daneben
   zu stehen. */
.field-combined {
    display: flex;
    align-items: stretch;
}

.info-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--fg-neutral-muted);
    color: var(--bg-base);
    font-size: 10px;
    font-weight: var(--weight-semibold);
    font-family: var(--font-mono);
    font-style: italic;
    cursor: help;
    vertical-align: middle;
}

.field-combined .info-icon {
    width: 2.25em;
    height: auto;
    border-radius: var(--input-border-radius) 0 0 var(--input-border-radius);
    flex-shrink: 0;
    border: 1px solid var(--border-input);
    border-right: none;
    background: var(--bg-surface-raised);
    color: var(--fg-neutral-muted);
    font-size: 12px;
}

.field-combined select,
.field-combined input {
    border-radius: 0 var(--input-border-radius) var(--input-border-radius) 0 !important;
}

/* Einheiten-Suffix (z.B. "%" beim Zusatzbeitrag) -- ohne das war nicht
   erkennbar, dass das Feld einen Prozentwert erwartet. Spiegelbild des
   .info-icon links: docked rechts an, das Eingabefeld verliert dafuer
   seine eigene rechte Rundung wieder (per ID, aktuell nur ein Vorkommen). */
#kv_zusatzbeitrag_prozent {
    border-radius: 0 !important;
}

.field-combined .field-suffix {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25em;
    flex-shrink: 0;
    border: 1px solid var(--border-input);
    border-left: none;
    background: var(--bg-surface-raised);
    color: var(--fg-neutral-muted);
    font-size: var(--input-font-size);
}

/* Kassenauswahl als reiner Chevron-Trigger direkt im %-Feld (nettolohn.de-
   Vorbild) statt eigenem Extra-Select -- selectedIndex wird per JS nach
   jeder Wahl zurueckgesetzt (siehe _rechner_form.php), die Box zeigt also
   praktisch nie einen Kassennamen, nur den Pfeil. Schmal statt volle
   Feldbreite, rechts abgerundet (letztes Element in der Reihe). */
.field-kasse-trigger {
    width: 2.5em !important;
    flex-shrink: 0;
    padding: 0 0 0 var(--input-padding-md) !important;
    border-radius: 0 var(--input-border-radius) var(--input-border-radius) 0 !important;
    border-left: none !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Kippschalter statt Checkbox/Radio-Paar -- fuer echte Ja/Nein-Angaben
   (kirchensteuerpflichtig, RV-/ALV-Befreiung, "Haben Sie Kinder?"). */
.field-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}

.field-toggle label {
    margin-bottom: 0;
    font-weight: var(--label-font-weight);
    cursor: pointer;
}

/* iOS-Stil: 51x31pt-Seitenverhaeltnis (hier 46x28px), gruen im "an"-Zustand
   (iOS-Systemstandard), weisser Knopf mit eigenem Schlagschatten fuer
   Tiefe statt der vorherigen flachen Zweifarb-Version. */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 28px;
    flex-shrink: 0;
}

.toggle-switch input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.toggle-switch .toggle-track {
    position: absolute;
    inset: 0;
    background: var(--border-input);
    border-radius: 999px;
    transition: background-color 0.15s ease;
    pointer-events: none;
}

.toggle-switch .toggle-track::before {
    content: "";
    position: absolute;
    height: 24px;
    width: 24px;
    left: 2px;
    top: 2px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 0 0 0.5px rgba(0, 0, 0, 0.05);
    transition: transform 0.15s ease;
}

.toggle-switch input:checked + .toggle-track {
    /* --bg-neutral-accent invertiert im Dark Mode zu einem hellen Grau
       (--smoke) -- als "an"-Zustand kaum von "aus" zu unterscheiden.
       --focus ist ein fixer Blauton, in beiden Themes bereits fuer die
       Fokus-Ringe im Einsatz und dort schon bewaehrt konsistent. */
    background: var(--focus);
}

.toggle-switch input:checked + .toggle-track::before {
    transform: translateX(18px);
}

.toggle-switch input:focus-visible + .toggle-track {
    outline: 2px solid var(--border-input-focus);
    outline-offset: 2px;
}

.info-icon .info-tooltip {
    display: none;
    position: absolute;
    left: 0;
    top: calc(100% + var(--spacing-2));
    width: 20em;
    max-width: 70vw;
    padding: var(--spacing-3);
    border-radius: var(--input-border-radius);
    background: var(--bg-neutral-inverse, #1a1a1a);
    color: var(--fg-neutral-inverse, #fff);
    font-size: var(--text-size-label);
    font-weight: normal;
    line-height: 1.4;
    z-index: 30;
    white-space: normal;
    text-align: left;
}

.info-icon:hover .info-tooltip,
.info-icon:focus .info-tooltip,
.info-icon:focus-within .info-tooltip {
    display: block;
}

.rechner-form .hint {
    display: block;
    margin-top: var(--spacing-2);
    font-size: var(--text-size-label);
    color: var(--fg-neutral-body);
}

.rechner-form input[type="text"],
.rechner-form input[type="number"],
.rechner-form select {
    width: 100%;
    height: var(--input-height);
    font-family: var(--font-mono);
    font-size: var(--input-font-size);
    padding: 0 var(--input-padding-md);
    border: 1px solid var(--border-input);
    border-radius: var(--input-border-radius);
    background: var(--bg-input);
    color: var(--body-color);
}

/* Nativer <select>-Chrome (Farbverlauf/Schatten je nach Betriebssystem)
   ist nicht flach wie der Rest des Formulars -- appearance:none entfernt
   ihn komplett, der Pfeil wird per Hintergrundbild selbst nachgezeichnet.
   Gleiches Muster wie form.demo select.input-country in components.css. */
.rechner-form select {
    appearance: none;
    -webkit-appearance: none;
    /* Englische Optionstexte sind laenger als die deutschen ("Tax bracket
       (Steuerklasse) 1" vs. "Steuerklasse 1") und werden in der
       Jahr/Steuerklasse-Zeile (je die Haelfte der Formularbreite) sonst
       hart am Kastenrand abgeschnitten, ohne Ellipsis -- wirkt wie ein
       Rendering-Fehler statt eines bewusst gekuerzten Textes. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: calc(var(--input-padding-md) * 2 + 10px);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23808080' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--input-padding-md) center;
}

.rechner-form input:focus,
.rechner-form select:focus {
    outline: none;
    border-color: var(--border-input-focus);
}

/* KEIN outline mehr -- das legt sich nur UEBER den grauen Rahmen, ersetzt
   ihn aber nicht (outline und border sind zwei getrennte Boxen), macht
   also einen sichtbaren Doppelrand statt eines einzigen sauberen Rahmens
   wie bei einem normalen Eingabefeld. Stattdessen direkt die Rahmenfarbe
   jedes Kindes steuern: erst alle Seiten auf neutral zuruecksetzen (hebt
   den generischen input:focus/select:focus-Effekt weiter oben auf), dann
   NUR die Aussenseiten der Gruppe (erstes Kind links, letztes Kind
   rechts, alle oben/unten) blau -- ein durchgehender Rahmen, innere
   Trennlinien bleiben grau. */
.field-combined:focus-within > * {
    border-color: var(--border-input) !important;
}

.field-combined:focus-within > *:first-child {
    border-top-color: var(--border-input-focus) !important;
    border-bottom-color: var(--border-input-focus) !important;
    border-left-color: var(--border-input-focus) !important;
}

.field-combined:focus-within > *:last-child {
    border-top-color: var(--border-input-focus) !important;
    border-bottom-color: var(--border-input-focus) !important;
    border-right-color: var(--border-input-focus) !important;
}

.field-combined:focus-within > *:not(:first-child):not(:last-child) {
    border-top-color: var(--border-input-focus) !important;
    border-bottom-color: var(--border-input-focus) !important;
}

.rechner-result {
    border: 1px solid var(--border-neutral-subtle);
    border-radius: calc(var(--card-border-radius) * var(--brm));
    padding: var(--spacing-8);
    background: var(--bg-surface-raised);
}

.rechner-result h2 {
    margin-top: 0;
    margin-bottom: var(--spacing-5);
}

.rechner-headline {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--spacing-5) 0;
    border-bottom: 2px solid var(--border-neutral-subtle);
    margin-bottom: var(--spacing-4);
}

.rechner-headline .label {
    font-size: var(--text-size-detail);
    color: var(--fg-neutral-body);
}

.rechner-headline .value {
    font-family: var(--font-mono);
    /* Golden-ratio-derived, statt einer zweiten frei erfundenen Zahl neben
       --text-size-detail: label * phi^2 (13px * 2.618 ~= 34px) gibt der
       Kopfzahl spuerbar mehr Gewicht als das alte, kaum groessere 1.75rem
       (28px), ohne eine neue Konstante ausserhalb des Token-Systems
       einzufuehren. */
    font-size: calc(var(--text-size-detail) * 1.618 * 1.618);
    font-weight: var(--weight-semibold);
}

table.rechner-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-mono);
    font-size: var(--text-size-detail);
}

table.rechner-table th {
    text-align: left;
    font-weight: var(--weight-semibold);
    padding: var(--spacing-4) 0 var(--spacing-3);
    border-bottom: 1px solid var(--border-neutral-subtle);
}

table.rechner-table td {
    padding: var(--spacing-3) 0;
    border-bottom: 1px solid var(--border-neutral-subtle);
}

table.rechner-table td:last-child,
table.rechner-table th:last-child {
    text-align: right;
}

table.rechner-table tr.total td {
    font-weight: var(--weight-semibold);
    border-top: 1px solid var(--body-color);
    border-bottom: none;
}

table.rechner-table tr.subtotal td {
    font-weight: var(--weight-semibold);
}

.rechner-notice {
    margin-top: var(--spacing-8);
    padding: var(--spacing-5);
    border: 1px solid var(--border-neutral-subtle);
    border-radius: var(--input-border-radius);
    font-size: var(--text-size-label);
    color: var(--fg-neutral-body);
}

.rechner-notice ul {
    margin: var(--spacing-2) 0 0;
    padding-left: 1.2em;
}

/* Prev/Next-Navigation am Ende jeder Landingpage (/netto/{betrag}-brutto)
   -- Crawl-Pfad durch alle 46 Seiten ohne Sitemap, siehe
   steuerklassen.com-Vorbild. */
.rechner-prev-next {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-4);
    margin-top: var(--spacing-8);
    padding-top: var(--spacing-5);
    border-top: 1px solid var(--border-neutral-subtle);
    font-size: var(--text-size-label);
}

/* "Andere Bundesländer"-Liste am Fussende jeder /netto/{betrag}-brutto-
   Landingpage -- bisher ungestylt (nackte <ul>), macht direkt unter der
   Prev/Next-Navigation einen gedraengten, unruhigen Eindruck. Gleiches
   Grid-Muster wie .netto-uebersicht-liste (Hub-Seite) fuer Konsistenz. */
.rechner-bundesland-liste {
    margin-top: var(--spacing-8);
}

.rechner-bundesland-liste ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));
    gap: var(--spacing-2) var(--spacing-4);
    margin: var(--spacing-3) 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-size-label);
}

/* Hub-Seite /netto -- Liste aller Landingpages, einziger echter Nav-
   Einstiegspunkt (siehe .rechner-page's margin-top-Begruendung oben). */
.netto-uebersicht {
    max-width: var(--container-md, 48em);
    margin: var(--spacing-8) auto 0;
}

.netto-uebersicht-liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8em, 1fr));
    gap: var(--spacing-2) var(--spacing-4);
    margin: var(--spacing-6) 0 0;
    padding: 0;
    list-style: none;
}

.netto-uebersicht-liste li:first-child {
    grid-column: 1 / -1;
    font-weight: var(--weight-semibold);
}