/* ==========================================================================
   Schriften (lokal, Latin-Subset)
   ========================================================================== */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/inter-latin-400-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/inter-latin-600-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Source Serif 4';
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url('../fonts/source-serif-4-latin-opsz-normal.woff2') format('woff2');
}

/* ==========================================================================
   Icons (Ersatz für das von Font Awesome per JS eingefügte CSS)
   ========================================================================== */

.svg-inline--fa {
    display: var(--fa-display, inline-block);
    height: 1em;
    overflow: visible;
    vertical-align: -0.125em;
    box-sizing: content-box;
}

:root {
    --papier: #F3F4F0;
    --blatt: #FFFFFF;
    --tinte: #18211D;
    --tinte_leise: #56605A;
    --linie: #D3D8D0;
    --akte: #2A5A45;
    --akte_text: #FFFFFF;
    --akte_hell: #E2EBE5;
    --marker: #F2DC4A;
    --marker_text: #18211D;
    --eigener: #2A5A45;
    --gegner: #D97B29;
    --gericht: #7F9BCB;
    --fehler: #9B2C1F;
    --fokus: #1F6FD1;
    --pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%2356605A' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    --schrift_text: 'Inter', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
    --schrift_titel: 'Source Serif 4', 'Iowan Old Style', Georgia, 'Times New Roman', serif;

    --radius_klein: 0.5rem;
    --radius: 0.75rem;
    --breite: 72rem;

    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --papier: #131815;
        --blatt: #1B221E;
        --tinte: #E7ECE8;
        --tinte_leise: #A2ACA5;
        --linie: #323C36;
        --akte: #7DBE9C;
        --akte_text: #0F1512;
        --akte_hell: #203129;
        --eigener: #6FBF95;
        --gegner: #F2A65A;
        --gericht: #A9C1EC;
        --fehler: #F08A7A;
        --fokus: #7FB2FF;
        --pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23A2ACA5' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --papier: #131815;
    --blatt: #1B221E;
    --tinte: #E7ECE8;
    --tinte_leise: #A2ACA5;
    --linie: #323C36;
    --akte: #7DBE9C;
    --akte_text: #0F1512;
    --akte_hell: #203129;
    --eigener: #6FBF95;
    --gegner: #F2A65A;
    --gericht: #A9C1EC;
    --fehler: #F08A7A;
    --fokus: #7FB2FF;
    --pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23A2ACA5' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    color-scheme: dark;
}

*, *::before, *::after {
    box-sizing: border-box;
    line-height: calc(1em + 0.5rem);
}

html {
    scroll-padding-top: env(safe-area-inset-top, 0px);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--papier);
    color: var(--tinte);
    font-family: var(--schrift_text);
    font-size: 1rem;
    line-height: calc(1em + 0.5rem);
    font-variant-numeric: tabular-nums;
}

h1, h2, h3 {
    font-family: var(--schrift_titel);
    font-weight: 600;
    line-height: calc(1em + 0.5rem);
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
    margin: 0;
}

p {
    margin: 0;
    /* Lange Komposita dürfen umbrechen, statt bei 320 px seitlich
       überzulaufen (WCAG 1.4.10 Reflow). */
    overflow-wrap: break-word;
}

input,
button,
select,
textarea {
    font: inherit;
    line-height: calc(1em + 0.5rem);
}

a {
    color: inherit;
}

:focus-visible {
    outline: 2px solid var(--fokus);
    outline-offset: 0.25rem;
}

img, svg {
    max-width: 100%;
}

.springen {
    position: absolute;
    left: 1rem;
    top: -4rem;
    background: var(--blatt);
    padding: 0.5rem 1rem;
    z-index: 10;
}

.springen:focus {
    top: calc(env(safe-area-inset-top, 0px) + 0.5rem);
}

.nur_druck {
    display: none;
}

.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;
}

/* Kopf */

.kopf {
    position: relative;
    z-index: 20;
    border-bottom: 1px solid var(--linie);
    background: var(--papier);
}

.kopf_innen {
    max-width: var(--breite);
    min-height: 4.25rem;
    margin: 0 auto;
    padding: 0.75rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: nowrap;
}

.wortmarke {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    font-family: var(--schrift_titel);
    font-size: 1.25rem;
    font-weight: 600;
    text-decoration: none;
}

/* Logo: §-Zeichen (Font Awesome, U+E447) im Kreis in der Button-Farbe */
.wortmarke_zeichen {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    margin-right: 0.5rem;
}

.wortmarke_zeichen circle {
    fill: var(--akte);
}

.wortmarke_zeichen path {
    fill: var(--akte_text);
}

.wortmarke span {
    color: var(--tinte_leise);
    font-weight: 400;
}

.kopf_navigation {
    margin-left: auto;
    display: flex;
    gap: 1.25rem;
    flex-wrap: nowrap;
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 1rem;
}

/* Burger: immer sichtbar; die Sprunglinks stehen daneben und wandern erst
   bei Platzmangel ins Menü */

.burger {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-right: -0.5rem;
    padding: 0;
    border: 1px solid var(--linie);
    border-radius: var(--radius_klein);
    background: var(--blatt);
    color: var(--tinte);
    font-size: 1.25rem;
    cursor: pointer;
}

.burger:hover {
    border-color: var(--tinte);
}

.burger_zu,
.burger[aria-expanded="true"] .burger_auf {
    display: none;
}

.burger[aria-expanded="true"] .burger_zu {
    display: inline-flex;
}

.kopf:not(.ist_kompakt) .menue_seite {
    display: none;
}

.kopf.ist_kompakt .kopf_navigation {
    display: none;
}

.kopf.ist_kompakt .burger {
    display: inline-flex;
}

.menue {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - 4.5rem);
    max-height: calc(100dvh - 4.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--blatt);
    border-bottom: 1px solid var(--linie);
}

.menue[hidden] {
    display: none;
}

.menue_innen {
    max-width: var(--breite);
    margin: 0 auto;
    padding: 1rem 1.25rem 1.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: 1.5rem 2rem;
}

.menue_titel {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tinte_leise);
    margin-bottom: 0.25rem;
}

.menue_liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.menue_liste a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3rem;
    border-bottom: 1px solid var(--linie);
    text-decoration: none;
    color: var(--tinte);
}

.menue_liste li:last-child a {
    border-bottom: 0;
}

.menue_liste a:hover {
    color: var(--akte);
}

.menue_liste .ikon {
    width: 1rem;
}

.kopf_navigation a {
    text-decoration: none;
    color: var(--tinte_leise);
}

.kopf_navigation a:hover {
    color: var(--tinte);
    text-decoration: underline;
    text-underline-offset: 0.25rem;
}

/* Bühne mit Rechner und Kostenblatt */

.buehne {
    max-width: var(--breite);
    margin: 0 auto;
    padding: 2.5rem 1.25rem 3rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
}

@media (min-width: 60rem) {
    .buehne {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        grid-template-areas:
            "text blatt"
            "rechner blatt";
        column-gap: 3.5rem;
        row-gap: 2rem;
        padding-top: 3.5rem;
    }
    .buehne_text {
        grid-area: text;
    }
    .rechner {
        grid-area: rechner;
    }
    .kostenblatt {
        grid-area: blatt;
        align-self: start;
        position: sticky;
        top: calc(env(safe-area-inset-top, 0px) + 1.5rem);
    }
}

.buehne_text h1 {
    font-size: 2.5rem;
    letter-spacing: -0.01em;
}

.titel_dachzeile {
    display: block;
    margin-bottom: 0.75rem;
    font-family: var(--schrift_text);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5rem;
    letter-spacing: 0.02em;
    color: var(--akte);
}

.rechtsgrundlagen {
    margin-top: 2rem;
    max-width: 42em;
    color: var(--tinte_leise);
}

.einleitung {
    margin-top: 1rem;
    font-size: 1.25rem;
    max-width: 36em;
}

.rechtsstand_hinweis {
    margin-top: 0.75rem;
    color: var(--tinte_leise);
    font-size: 1rem;
}

/* Formular */

.rechner {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.feld {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.feld > label,
.feld > legend {
    display: block;
    font-weight: 600;
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    padding: 0;
}

/* Legenden ohne Hilfetext darunter brauchen mehr Luft zum Inhalt,
   damit sie optisch wie das Label „Streitwert“ wirken. */
.feld > legend {
    margin-bottom: 0.75rem;
}

.feld_hilfe {
    color: var(--tinte_leise);
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.eingabe_mit_einheit {
    position: relative;
    max-width: 22rem;
}

.eingabe_mit_einheit input {
    width: 100%;
    font: inherit;
    line-height: calc(1em + 0.5rem);
    font-size: 1.75rem;
    font-weight: 600;
    padding: 0.5rem 2.75rem 0.5rem 1rem;
    border: 2px solid var(--tinte);
    border-radius: var(--radius_klein);
    background: var(--blatt);
    color: var(--tinte);
}

::placeholder {
    color: var(--tinte_leise);
    opacity: 1;
}

.eingabe_mit_einheit input::placeholder {
    color: var(--tinte_leise);
    font-weight: 400;
}

.einheit {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    color: var(--tinte_leise);
}

.schnellwahl {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.schnellwahl button {
    font: inherit;
    line-height: calc(1em + 0.5rem);
    font-size: 1rem;
    min-height: 2.5rem;
    padding: 0.25rem 1rem;
    border: 1px solid var(--linie);
    border-radius: 999px;
    background: transparent;
    color: var(--tinte);
    cursor: pointer;
}

.schnellwahl button:hover {
    border-color: var(--tinte);
}

.segmente {
    display: grid;
    border: 1px solid var(--tinte);
    border-radius: var(--radius_klein);
    overflow: hidden;
    background: var(--blatt);
}

.segmente_vier {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.segmente_zwei {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 26rem;
}

.segmente label {
    position: relative;
    display: flex;
    cursor: pointer;
}

.segmente label + label {
    border-left: 1px solid var(--tinte);
}

.segmente input {
    position: absolute;
    opacity: 0;
    inset: 0;
    margin: 0;
    cursor: pointer;
}

.segmente label > span {
    flex: 1;
    gap: 0.5rem;
    min-height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.75rem 0.5rem;
    font-size: 1rem;
    white-space: nowrap;
}

@media (max-width: 29.99rem) {
    .segmente_stapeln {
        grid-template-columns: minmax(0, 1fr);
    }
    .segmente_stapeln label + label {
        border-left: 0;
        border-top: 1px solid var(--tinte);
    }
}

.segmente input:checked + span {
    background: var(--akte);
    color: var(--akte_text);
    font-weight: 600;
}

.segmente input:focus-visible + span {
    outline: 2px solid var(--fokus);
    outline-offset: -0.25rem;
}

@media (max-width: 30rem) {
    .segmente_vier {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .segmente_vier label:nth-child(3) {
        border-left: 0;
    }
    .segmente_vier label:nth-child(n+3) {
        border-top: 1px solid var(--tinte);
    }
}

.umschalter {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 1rem;
}

.umschalter input {
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    accent-color: var(--akte);
    flex-shrink: 0;
}

/* Inaktiv, aber weiter bedienbar: gedämpft über die Sekundärfarbe statt
   über opacity, damit Text und Eingabewerte 4,5 : 1 einhalten (WCAG 1.4.3). */
.ist_inaktiv,
.ist_inaktiv input {
    color: var(--tinte_leise);
}

/* Expertenbereich */

.experten {
    border-top: 1px solid var(--linie);
    padding-top: 1rem;
}

.experten summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--akte);
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    /* Chevron wie beim Select-Pfeil 0.75rem vom rechten Rand eingerückt */
    padding-right: 0.75rem;
}

.experten summary::-webkit-details-marker {
    display: none;
}

.experten summary .ikon_chevron {
    margin-left: auto;
}

.experten_inhalt {
    margin-top: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.experten_raster {
    display: grid;
    align-items: end;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: 1rem;
}

.feld_klein label {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.feld_klein input,
.feld_klein select,
.satz_tabelle input {
    width: 100%;
    min-width: 0;
    min-height: 2.75rem;
    font: inherit;
    line-height: calc(1em + 0.5rem);
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--linie);
    border-radius: var(--radius_klein);
    background: var(--blatt);
    color: var(--tinte);
}

.feld_klein input:hover,
.feld_klein select:hover,
.satz_tabelle input:hover {
    border-color: var(--tinte_leise);
}

.tabellen_huelle {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.satz_tabelle {
    border-collapse: collapse;
    width: 100%;
    min-width: 26rem;
}

.satz_tabelle caption {
    text-align: left;
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.satz_tabelle th,
.satz_tabelle td {
    padding: 0.25rem 0.5rem 0.25rem 0;
    text-align: left;
    font-size: 1rem;
}

.satz_tabelle thead th {
    font-weight: 400;
    color: var(--tinte_leise);
}

.satz_tabelle tbody th {
    font-weight: 400;
    white-space: nowrap;
}

.satz_tabelle input {
    max-width: 5.5rem;
    text-align: right;
}

.experten_fuss {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.feld_geschaeft input {
    max-width: 5.5rem;
    text-align: right;
}

/* Knöpfe */

.knopf,
.knopf_leise {
    font: inherit;
    line-height: calc(1em + 0.5rem);
    font-weight: 600;
    border-radius: var(--radius_klein);
    padding: 0.75rem 1rem;
    cursor: pointer;
}

.knopf {
    background: var(--akte);
    color: var(--akte_text);
    border: 1px solid var(--akte);
}

.knopf:hover {
    filter: brightness(1.08);
}

.knopf_leise {
    background: transparent;
    color: var(--tinte);
    border: 1px solid var(--linie);
}

.knopf_leise:hover {
    border-color: var(--tinte);
}

/* Rechtstexte (Impressum, Datenschutz) */

.rechtstext {
    max-width: 48rem;
}

.band .rechtstext h2 {
    font-size: 1.5rem;
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
}

.band .rechtstext h2:first-child {
    margin-top: 0;
}

.rechtstext h3 {
    font-size: 1.25rem;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.rechtstext p + p,
.rechtstext p + ul,
.rechtstext ul + p,
.rechtstext address + p,
.rechtstext p + address {
    margin-top: 0.75rem;
}

.rechtstext ul {
    margin: 0;
    padding-left: 1.25rem;
}

.rechtstext li + li {
    margin-top: 0.25rem;
}

.rechtstext address {
    font-style: normal;
}

.rechtstext a {
    text-underline-offset: 0.25rem;
}

.rechtstext_stand {
    margin-top: 2.5rem;
    color: var(--tinte_leise);
}

/* Fehlende Angaben gut sichtbar markieren; vor dem Livegang ersetzen */
.platzhalter {
    background: var(--marker);
    color: var(--marker_text);
    padding: 0 0.25rem;
    border-radius: 0.25rem;
}

/* Kostenblatt */

.kostenblatt {
    background: var(--blatt);
    border: 1px solid var(--linie);
    border-top: 0.5rem solid var(--akte);
    border-radius: 0 0 var(--radius) var(--radius);
    padding: 1.5rem 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.kb_kopf {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px dashed var(--linie);
}

.kb_kopf h2 {
    font-size: 1.5rem;
}

.kb_meta {
    text-align: right;
    font-size: 1rem;
    color: var(--tinte_leise);
}

.kb_meta strong {
    color: var(--tinte);
}

.kb_fehler {
    color: var(--tinte_leise);
}

.kb_posten {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.kb_zeile {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.kb_zeile dt {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.kb_zeile dt::before {
    content: '';
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 0.25rem;
    background: var(--farbe);
    flex-shrink: 0;
}

.kb_zeile dd {
    margin: 0;
    font-weight: 600;
    white-space: nowrap;
}

.kb_zeile[hidden] {
    display: none;
}

.farbe_eigener {
    --farbe: var(--eigener);
}

.farbe_gegner {
    --farbe: var(--gegner);
}

.farbe_gericht {
    --farbe: var(--gericht);
}

.kb_balken {
    display: flex;
    height: 0.5rem;
    border-radius: 999px;
    overflow: hidden;
    background: var(--linie);
}

.kb_balken span {
    background: var(--farbe);
    transition: width 0.25s ease;
}

.kb_balken span + span {
    box-shadow: inset 0.25rem 0 0 var(--blatt);
}

.kb_gesamt {
    border-top: 2px solid var(--tinte);
    padding-top: 1rem;
}

.kb_gesamt p:first-child {
    font-size: 1rem;
    color: var(--tinte_leise);
}

.kb_gesamt_betrag {
    font-family: var(--schrift_titel);
    font-weight: 600;
    font-size: 2.25rem;
    margin-top: 0.25rem;
}

.kb_gesamt_betrag mark {
    color: var(--marker_text);
    background: linear-gradient(
        178deg,
        transparent 0 38%,
        var(--marker) 38% 90%,
        transparent 90% 100%
    );
    padding: 0 0.25rem;
    margin: 0 -0.25rem;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .kb_gesamt_betrag mark {
        background: var(--marker);
        border-radius: 0.25rem;
    }
}

:root[data-theme="dark"] .kb_gesamt_betrag mark {
    background: var(--marker);
    border-radius: 0.25rem;
}

/* Mobile Summenleiste, solange das Kostenblatt nicht sichtbar ist */

.mobil_summe {
    display: none;
}

@media (max-width: 59.99rem) {
    .mobil_summe {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 5;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 1rem;
        padding: 0.75rem 1.25rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
        background: var(--akte);
        color: var(--akte_text);
        text-decoration: none;
        font-size: 1rem;
        transition: transform 0.2s ease;
    }
    .mobil_summe strong {
        font-size: 1.25rem;
        white-space: nowrap;
    }
    .mobil_summe.ist_versteckt {
        transform: translateY(110%);
    }
    body {
        padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
    }
}

.ist_leer .kb_gesamt_betrag mark {
    background: none;
    color: var(--tinte_leise);
}

.kb_hinweise {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 1rem;
    color: var(--tinte_leise);
}

.kb_hinweise:empty {
    display: none;
}

.kb_aktionen {
    border-top: 1px dashed var(--linie);
    padding-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.kb_angelegenheit label {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.kb_angelegenheit .optional {
    font-weight: 400;
    color: var(--tinte_leise);
}

.kb_angelegenheit .feld_hilfe {
    margin: 0.5rem 0 0;
}

.kb_angelegenheit input {
    width: 100%;
    font: inherit;
    line-height: calc(1em + 0.5rem);
    font-size: 1rem;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--linie);
    border-radius: var(--radius_klein);
    background: var(--papier);
    color: var(--tinte);
}

/* PDF als Hauptaktion über die volle Breite, darunter Drucken und
   Link kopieren nebeneinander; bei wenig Platz untereinander. */
.kb_knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.kb_knoepfe .knopf {
    flex: 1 1 100%;
}

/* Erst ab je 12rem nebeneinander, sonst volle Breite; Beschriftung
   bricht nie in zwei Zeilen um. */
.kb_knoepfe .knopf_leise {
    flex: 1 1 12rem;
    white-space: nowrap;
}

/* Bänder */

.band {
    border-top: 1px solid var(--linie);
}

.band_text {
    background: var(--blatt);
}

.band_innen {
    max-width: var(--breite);
    margin: 0 auto;
    padding: 3rem 1.25rem;
}

.band h2 {
    font-size: 1.75rem;
}

.band_einleitung {
    margin-top: 0.75rem;
    max-width: 42em;
    color: var(--tinte_leise);
}

/* Aufschlüsselung */

.aufschluesselung {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
    gap: 1.5rem;
    align-items: start;
}

.grundlage,
.leer_hinweis {
    grid-column: 1 / -1;
    font-size: 1rem;
    color: var(--tinte_leise);
}

.abschnitt {
    background: var(--blatt);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    padding: 1rem 1rem 0.5rem;
}

.abschnitt_kopf {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.abschnitt_kopf h3 {
    font-size: 1.25rem;
}

.abschnitt_summe {
    font-weight: 600;
    white-space: nowrap;
}

.kosten_tabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: 1rem;
}

.kosten_tabelle thead th {
    font-weight: 400;
    font-size: 0.75rem;
    color: var(--tinte_leise);
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--linie);
}

.kosten_tabelle td {
    padding: 0.25rem 0;
    vertical-align: top;
}

.spalte_position {
    text-align: left;
}

.spalte_satz {
    text-align: right;
    width: 3.25rem;
    padding-right: 0.75rem !important;
    color: var(--tinte_leise);
}

.spalte_betrag {
    text-align: right;
    white-space: nowrap;
    padding-left: 0.5rem !important;
}

.position_name {
    display: block;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.position_norm {
    display: block;
    font-size: 0.75rem;
    color: var(--tinte_leise);
}

.kosten_tabelle .gruppe th {
    text-align: left;
    font-weight: 600;
    padding: 1rem 0 0.25rem;
    display: table-cell;
}

.kosten_tabelle .gruppe th::before {
    content: '';
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: var(--farbe);
    margin-right: 0.5rem;
    /* Unterkante auf der Grundlinie: die Punktmitte liegt dann auf halber
       Versalhöhe und wirkt neben fetten Großbuchstaben optisch zentriert. */
    vertical-align: baseline;
}

.art_anrechnung td {
    color: var(--akte);
}

.art_mwst td {
    color: var(--tinte_leise);
}

.zwischensumme td {
    border-top: 1px solid var(--linie);
    font-weight: 600;
}

/* Erklärung */

.drei_spalten {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: 2rem;
}

.erklaerung {
    border-left: 0.25rem solid var(--farbe);
    padding-left: 1rem;
}

.erklaerung_kopf {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.erklaerung_ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    /* Aufgehellte Spaltenfarbe (24 % Farbe auf Blattweiß bzw. im Dunkel-Modus
       auf dunklem Blatt); Icon einheitlich in Textfarbe, Kontrast ab 7,8 : 1. */
    background: var(--akte_hell);
    background: color-mix(in srgb, var(--farbe) 24%, var(--blatt));
    color: var(--tinte);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.erklaerung h3 {
    font-size: 1.25rem;
}

.erklaerung p {
    max-width: 34em;
}

/* Beispiele */

.beispiel_tabelle {
    margin-top: 1.5rem;
    width: 100%;
    min-width: 34rem;
    border-collapse: collapse;
}

.beispiel_tabelle th,
.beispiel_tabelle td {
    padding: 0.5rem 0.75rem;
    text-align: right;
    border-bottom: 1px solid var(--linie);
    white-space: nowrap;
}

.beispiel_tabelle th:first-child {
    text-align: left;
    padding-left: 0;
}

.beispiel_tabelle thead th {
    font-weight: 600;
    font-size: 1rem;
    border-bottom: 2px solid var(--tinte);
}

.beispiel_tabelle tbody th {
    font-weight: 600;
}

.beispiel_tabelle td:nth-child(4) {
    font-weight: 600;
}

/* Fragen */

.fragen {
    margin-top: 1.5rem;
    max-width: 48rem;
}

.fragen details {
    border-bottom: 1px solid var(--linie);
    padding: 1rem 0;
}

.fragen details {
    padding: 0;
}

.fragen summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    /* Chevron wie beim Select-Pfeil 0.75rem vom rechten Rand eingerückt */
    padding: 1rem 0.75rem 1rem 0;
    font-weight: 600;
    font-size: 1rem;
}

.fragen summary::-webkit-details-marker {
    display: none;
}

.fragen summary:hover {
    color: var(--akte);
}

.fragen details p {
    margin-top: 0;
    padding-bottom: 1rem;
}

.fragen details p {
    margin-top: 0.75rem;
    max-width: 42em;
}

/* Fuß */

.fuss {
    border-top: 1px solid var(--linie);
}

.fuss_innen {
    max-width: var(--breite);
    margin: 0 auto;
    padding: 2.5rem 1.25rem 2rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    font-size: 1rem;
    color: var(--tinte_leise);
}

@media (min-width: 48rem) {
    .fuss_innen {
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 3rem;
    }
}

.fuss_marke span {
    color: var(--tinte_leise);
    font-weight: 400;
}

.fuss_marke {
    font-family: var(--schrift_titel);
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--tinte);
    margin-bottom: 0.5rem;
}

.fuss_innen p + p {
    margin-top: 0.5rem;
}

.fuss_titel {
    font-family: var(--schrift_text);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tinte);
    margin-bottom: 0.5rem;
}

.fuss_liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fuss_liste a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    text-decoration: none;
    color: var(--tinte_leise);
}

.fuss_liste a:hover {
    color: var(--tinte);
    text-decoration: underline;
    text-underline-offset: 0.25rem;
}

.fuss_liste .ikon {
    width: 1rem;
}

.fuss_extern {
    font-size: 0.75rem;
    opacity: 0.7;
}

.fuss_rechtliches {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
}

.fuss_unten {
    grid-column: 1 / -1;
    border-top: 1px solid var(--linie);
    padding-top: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    font-size: 0.75rem;
}

.fuss_unten a,
.fuss_knopf {
    color: inherit;
}

.fuss_knopf {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* Unterseiten: Text, Schritte, Hinweisbox */

.kopf_navigation a[aria-current="page"] {
    color: var(--tinte);
    font-weight: 600;
}

.menue_liste a[aria-current="page"] {
    font-weight: 600;
}

.text_spalte {
    max-width: 44rem;
}

.text_spalte > * + * {
    margin-top: 1rem;
}

.text_spalte h2 {
    margin-top: 2.5rem;
}

.text_spalte h2:first-child {
    margin-top: 0;
}

.text_spalte p,
.text_spalte li {
    color: var(--tinte_leise);
}

.text_spalte ul {
    margin-bottom: 0;
    padding-left: 1.25rem;
}

.text_spalte li + li {
    margin-top: 0.5rem;
}

.text_spalte strong {
    color: var(--tinte);
}

.schritte {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
    counter-reset: schritt;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: 1rem;
}

.schritte li {
    counter-increment: schritt;
    background: var(--blatt);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    padding: 1.25rem;
}

.schritte li::before {
    content: counter(schritt);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-bottom: 0.75rem;
    border-radius: 999px;
    background: var(--akte);
    color: var(--akte_text);
    font-weight: 600;
}

.schritte h3 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.schritte p {
    color: var(--tinte_leise);
}

.hinweis_box {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    margin-top: 2rem;
    padding: 1.25rem 1.5rem;
    border-radius: var(--radius);
    background: var(--akte_hell);
}

@media (min-width: 48rem) {
    .hinweis_box {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

.hinweis_box p {
    color: var(--tinte);
}

.hinweis_box .knopf {
    text-decoration: none;
}

/* Cookie-Dialog */

.cookie {
    width: min(100% - 2rem, 32rem);
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    margin: auto auto 1rem;
    padding: 1.5rem;
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    background: var(--blatt);
    color: var(--tinte);
    overflow-y: auto;
}

.cookie::backdrop {
    background: rgb(0 0 0 / 0.4);
}

.cookie h2 {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
}

.cookie p {
    color: var(--tinte_leise);
}

.cookie_liste {
    margin: 1.25rem 0;
    padding: 0;
    border: 0;
    display: grid;
    gap: 0.75rem;
}

.cookie_option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.25rem 0.75rem;
    align-items: start;
    padding: 0.75rem 1rem;
    border: 1px solid var(--linie);
    border-radius: var(--radius_klein);
    cursor: pointer;
}

.cookie_option input {
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    accent-color: var(--akte);
}

.cookie_option strong {
    display: block;
}

.cookie_option span span {
    display: block;
    color: var(--tinte_leise);
}

/* Immer untereinander, Hauptaktion zuerst */
.cookie_knoepfe {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
}

@media (min-width: 48rem) {
    .cookie {
        margin-bottom: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kb_balken span,
    .ikon_chevron,
    .mobil_summe {
        transition: none;
    }
}

/* Schriftstufen ab Tablet und Desktop */

@media (min-width: 48rem) {
    .buehne_text h1 {
        font-size: 3rem;
    }
    .band h2 {
        font-size: 2.25rem;
    }
    .kb_gesamt_betrag {
        font-size: 3rem;
    }
    .kanzlei h2 {
        font-size: 1.75rem;
    }
}

@media (min-width: 60rem) {
    .buehne_text h1 {
        font-size: 3.5rem;
    }
}

/* Select mit eigenem Chevron */

.feld_klein select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 2.5rem;
    background-image: var(--pfeil);
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 0.75rem 0.75rem;
    cursor: pointer;
}

/* Icons (Font Awesome Free, solid) */

.ikon {
    color: var(--akte);
    flex-shrink: 0;
}

.feld > label,
.feld > legend {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
}

.knopf,
.knopf_leise {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.75rem;
}

.knopf .ikon {
    color: inherit;
}

.segmente input:checked + span .ikon {
    color: inherit;
}

.ikon_chevron {
    color: var(--tinte_leise);
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

details[open] > summary .ikon_chevron {
    transform: rotate(180deg);
}

.mobil_summe_wert {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Kanzlei */

.kanzlei {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem 1.25rem;
    align-items: start;
    background: var(--blatt);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    padding: 1.5rem;
}

.kanzlei_ikon {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius_klein);
    background: var(--akte_hell);
    color: var(--akte);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.kanzlei h2 {
    font-size: 1.5rem;
}

.kanzlei p {
    margin-top: 0.5rem;
    color: var(--tinte_leise);
    max-width: 44em;
}

.kanzlei_link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    font-weight: 600;
    color: var(--akte);
    text-decoration: none;
    min-height: 2.75rem;
}

.kanzlei_link:hover {
    text-decoration: underline;
    text-underline-offset: 0.25rem;
}

/* Mobil */

@media (max-width: 47.99rem) {
    .buehne {
        padding: 1.5rem 1.25rem 2.5rem;
        gap: 1.75rem;
    }
    .einleitung {
        font-size: 1rem;
    }
    .eingabe_mit_einheit {
        max-width: none;
    }
    .kostenblatt {
        padding: 1.25rem 1rem 1rem;
    }
    .kb_kopf {
        flex-direction: column;
        gap: 0.25rem;
    }
    .kb_meta {
        text-align: left;
    }
    .kb_knoepfe .knopf,
    .kb_knoepfe .knopf_leise {
        width: 100%;
    }
    .experten_raster {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .feld_breit {
        grid-column: 1 / -1;
    }
    .satz_tabelle {
        min-width: 18rem;
    }
    .satz_tabelle th,
    .satz_tabelle td {
        padding-right: 0.25rem;
    }
    .satz_tabelle input {
        max-width: 4rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    .experten_fuss {
        flex-direction: column;
        align-items: stretch;
    }
    .band_innen {
        padding: 2.25rem 1.25rem;
    }
    .aufschluesselung {
        margin-top: 1.5rem;
    }
    .abschnitt {
        padding: 1rem 1rem 0.5rem;
    }
    .fragen summary {
        font-size: 1rem;
    }
    .kanzlei {
        grid-template-columns: minmax(0, 1fr);
        padding: 1.25rem;
    }
    .kanzlei_ikon {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1.25rem;
    }

    /* Beispieltabelle als Karten */
    .beispiel_tabelle {
        min-width: 0;
    }
    .beispiel_tabelle thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }
    .beispiel_tabelle,
    .beispiel_tabelle tbody,
    .beispiel_tabelle tr,
    .beispiel_tabelle th,
    .beispiel_tabelle td {
        display: block;
    }
    .beispiel_tabelle tr {
        background: var(--blatt);
        border: 1px solid var(--linie);
        border-radius: var(--radius);
        padding: 0.75rem 1rem;
        margin-bottom: 0.75rem;
    }
    .beispiel_tabelle tbody th {
        font-family: var(--schrift_titel);
        font-size: 1.25rem;
        padding: 0 0 0.5rem;
        border-bottom: 1px dashed var(--linie);
        margin-bottom: 0.25rem;
    }
    .beispiel_tabelle td {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.25rem 0;
        border: 0;
    }
    .beispiel_tabelle td::before {
        content: attr(data-label);
        color: var(--tinte_leise);
        font-weight: 400;
        white-space: normal;
        text-align: left;
    }
}

@media (max-width: 24rem) {
    .kopf_innen {
        gap: 0.75rem;
    }
    .wortmarke {
        font-size: 1rem;
    }
    .wortmarke_zeichen {
        width: 1.5rem;
        height: 1.5rem;
    }
}

@media (max-width: 22rem) {
    .experten_raster {
        grid-template-columns: minmax(0, 1fr);
    }
    .segmente label > span {
        font-size: 1rem;
    }
}

@media (hover: none) {
    .fragen summary:hover {
        color: inherit;
    }
}

/* Druck */

@media print {
    :root {
        --papier: #FFFFFF;
        --blatt: #FFFFFF;
        --tinte: #000000;
        --tinte_leise: #444444;
        --linie: #BBBBBB;
        padding: 0;
    }
    .kopf,
    .menue,
    .buehne_text,
    .rechner,
    .kb_aktionen,
    #so-wird-gerechnet,
    #beispiele,
    #fragen,
    #ablauf,
    #kanzlei,
    .cookie,
    .fuss,
    .springen,
    .mobil_summe,
    .band_einleitung {
        display: none !important;
    }
    .nur_druck {
        display: block;
    }
    .druck_kopf {
        padding-bottom: 1rem;
        margin-bottom: 1rem;
        border-bottom: 2px solid #000;
    }
    .druck_titel {
        font-family: var(--schrift_titel);
        font-size: 1.5rem;
        font-weight: 600;
    }
    .buehne {
        display: block;
        padding: 0;
    }
    .kostenblatt {
        position: static;
        border: 1px solid #000;
        break-inside: avoid;
    }
    .band {
        border: 0;
    }
    .band_innen {
        padding: 1.5rem 0 0;
    }
    .aufschluesselung {
        display: block;
    }
    .abschnitt {
        break-inside: avoid;
        margin-bottom: 1rem;
    }
    .kb_balken span,
    .kb_zeile dt::before,
    .kosten_tabelle .gruppe th::before,
    .erklaerung_ikon,
    .kb_gesamt_betrag mark {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}


/* ==========================================================================
   Mikroanimationen (CSS only)
   Feedback 60–120 ms, Zustandswechsel 200 ms, Dialog 250 ms.
   Hover-Effekte nur für Geräte mit echtem Hover; reduzierte Bewegung wird
   am Ende respektiert.
   ========================================================================== */

:root {
    --dauer_druck: 60ms;
    --dauer_kurz: 120ms;
    --dauer: 200ms;
    --dauer_dialog: 250ms;
    --kurve: cubic-bezier(0.2, 0, 0, 1);
}

/* Weiche Farb-, Rahmen- und Formwechsel */
a,
button,
summary,
select,
input,
.segmente label > span,
.cookie_option {
    transition:
        color var(--dauer_kurz) ease-out,
        background-color var(--dauer_kurz) ease-out,
        border-color var(--dauer_kurz) ease-out,
        text-decoration-color var(--dauer_kurz) ease-out,
        filter var(--dauer_kurz) ease-out,
        transform var(--dauer_kurz) var(--kurve);
}

.ikon,
.fuss_extern,
.kanzlei_ikon,
.kanzlei_link svg,
.kanzlei_link i {
    transition: transform var(--dauer) var(--kurve);
}

.springen {
    transition: top var(--dauer) var(--kurve);
}

/* Unterstreichung blendet ein statt umzuspringen */
.kopf_navigation a,
.kanzlei_link {
    text-decoration-line: underline;
    text-decoration-color: transparent;
    text-underline-offset: 0.25rem;
}

/* Fokus-Ring zieht sich beim Erscheinen auf seine Position zusammen */
@keyframes fokus_ring {
    from {
        outline-color: transparent;
        outline-offset: 0.5rem;
    }
}

:focus-visible,
.segmente input:focus-visible + span {
    animation: fokus_ring var(--dauer) var(--kurve);
}

/* Drück-Feedback */
.knopf:active,
.knopf_leise:active,
.schnellwahl button:active,
.burger:active {
    transform: scale(0.97);
    transition-duration: var(--dauer_druck);
}

.umschalter input:active,
.cookie_option input:active {
    transform: scale(0.9);
    transition-duration: var(--dauer_druck);
}

/* Häkchen setzt mit kleinem Federn */
@keyframes haken {
    0% { transform: scale(0.8); }
    60% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.umschalter input:checked,
.cookie_option input:checked:not(:disabled) {
    animation: haken var(--dauer) var(--kurve);
}

/* Auf- und Zuklappen */
@keyframes aufklappen {
    from {
        opacity: 0;
        transform: translateY(-0.5rem);
    }
}

.fragen details[open] > p,
.experten[open] > .experten_inhalt {
    animation: aufklappen var(--dauer) var(--kurve);
}

.menue:not([hidden]) {
    animation: aufklappen var(--dauer) var(--kurve);
}

/* Burger-Icon dreht beim Wechsel ein */
@keyframes ikon_drehen {
    from {
        opacity: 0;
        transform: rotate(-90deg);
    }
}

.burger[aria-expanded="true"] .burger_zu,
.burger[aria-expanded="false"] .burger_auf {
    animation: ikon_drehen var(--dauer) var(--kurve);
}

/* Cookie-Dialog */
@keyframes dialog_auf {
    from {
        opacity: 0;
        transform: translateY(1rem) scale(0.98);
    }
}

@keyframes abdunkeln {
    from { opacity: 0; }
}

.cookie[open] {
    animation: dialog_auf var(--dauer_dialog) var(--kurve);
}

.cookie[open]::backdrop {
    animation: abdunkeln var(--dauer_dialog) ease-out;
}

/* Hover nur bei echter Maus/Trackpad, damit auf Touch nichts „kleben“ bleibt */
@media (hover: hover) and (pointer: fine) {
    .kopf_navigation a:hover,
    .kanzlei_link:hover {
        text-decoration-color: currentColor;
    }

    .schnellwahl button:hover,
    .knopf_leise:hover {
        background-color: var(--akte_hell);
    }

    .segmente input:not(:checked) + span:hover {
        background-color: var(--akte_hell);
    }

    .cookie_option:hover {
        border-color: var(--tinte);
    }

    .knopf:hover .ikon,
    .knopf_leise:hover .ikon,
    .kanzlei:hover .kanzlei_ikon {
        transform: scale(1.12);
    }

    .menue_liste a:hover .ikon,
    .fuss_liste a:hover .ikon {
        transform: translateX(0.125rem);
    }

    a:hover .fuss_extern,
    .kanzlei_link:hover svg,
    .kanzlei_link:hover i {
        transform: translate(0.125rem, -0.125rem);
    }

    .fragen summary:hover .ikon_chevron,
    .experten summary:hover .ikon_chevron {
        color: currentColor;
    }
}

/* Sprunglinks: weiches Scrollen zum Abschnitt */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* Accordions auf und zu (CSS only, gestaffelt nach Browser-Unterstützung):
   1. Ohne ::details-content (ältere Browser): nur Einblenden beim Öffnen
      über die Keyframes „aufklappen“ oben.
   2. Mit ::details-content (Chrome/Edge 131, Firefox 143, Safari 18.4):
      Ein- und Ausblenden beim Öffnen und Schließen.
   3. Zusätzlich mit interpolate-size (Chrome/Edge 129, Samsung 28):
      Höhe fährt weich auf und zu. */
@supports selector(::details-content) {
    .fragen details::details-content,
    .experten::details-content {
        opacity: 0;
        transform: translateY(-0.5rem);
        transition:
            opacity var(--dauer) var(--kurve),
            transform var(--dauer) var(--kurve),
            content-visibility var(--dauer) allow-discrete;
    }

    .fragen details[open]::details-content,
    .experten[open]::details-content {
        opacity: 1;
        transform: none;
    }

    .fragen details[open] > p,
    .experten[open] > .experten_inhalt {
        animation: none;
    }

    @media (prefers-reduced-motion: reduce) {
        .fragen details::details-content,
        .experten::details-content {
            transform: none;
            transition: none;
        }
    }
}

@supports (interpolate-size: allow-keywords) and selector(::details-content) {
    .fragen details,
    .experten {
        interpolate-size: allow-keywords;
    }

    .fragen details::details-content,
    .experten::details-content {
        block-size: 0;
        overflow: hidden;
        transform: none;
        transition:
            block-size var(--dauer) var(--kurve),
            opacity var(--dauer) var(--kurve),
            content-visibility var(--dauer) allow-discrete;
    }

    .fragen details[open]::details-content,
    .experten[open]::details-content {
        block-size: auto;
    }

    @media (prefers-reduced-motion: reduce) {
        .fragen details::details-content,
        .experten::details-content {
            transition: none;
        }
    }
}

/* Reduzierte Bewegung: keine Bewegungen, nur sofortige Zustandswechsel */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after,
    .cookie[open]::backdrop {
        animation: none !important;
        transition-duration: 1ms !important;
    }
    .knopf:active,
    .knopf_leise:active,
    .schnellwahl button:active,
    .burger:active,
    .umschalter input:active,
    .cookie_option input:active,
    .ikon,
    .fuss_extern,
    .kanzlei_ikon,
    .kanzlei_link svg {
        transform: none !important;
    }
}

/* Manuelle Anzeigenblöcke (AdSense), mit Kennzeichnung „Anzeige“ */
.werbeplatz {
    padding: 1.5rem 1.25rem;
    border-top: 1px solid var(--linie);
}

.werbeplatz[hidden] {
    display: none;
}

.werbeplatz::before,
.werbeplatz ins.adsbygoogle {
    max-width: calc(var(--breite) - 2.5rem);
    margin-left: auto;
    margin-right: auto;
}

.werbeplatz::before {
    content: "Anzeige";
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    color: var(--tinte_leise);
}

.werbeplatz ins.adsbygoogle {
    display: block;
    min-height: 6.25rem;
}

/* Kein Gebot von Google: Platz ausblenden */
.werbeplatz:has(ins[data-ad-status="unfilled"]) {
    display: none;
}

@media print {
    .werbeplatz {
        display: none;
    }
}