/* ============================================================================
   KanzleiSimple - Design-Grundlage ks.css v1 (Release 1.7.0)
   ----------------------------------------------------------------------------
   Laedt als LETZTE Stylesheet-Datei (nach tailwind.min.css, glass.css,
   shadcn.css). Tailwind ist vorkompiliert (kein JIT) -> neue Optik nur ueber
   eigene Klassen mit Praefix "ks-".

   Leitlinien (ruhige, ADHS-/Autismus-freundliche Oberflaeche):
   - gut lesbar: 15-16px, klare Kontraste, eine Hauptaktion pro Bereich
   - wenig visuelles Rauschen: kein Verlauf, kein Leuchten, kein Hover-Lift
   - keine Dauerbewegung; prefers-reduced-motion wird vollstaendig respektiert
   - EIN Fokus-Stil fuer alle Bedienelemente

   Spezifitaet: Komponenten sind Ein-Klassen-Selektoren (schlagen Tailwind
   durch spaetere Ladereihenfolge). Wo shadcn.css mit `html body input[...]`
   arbeitet, ziehen die Formular-Klassen mit `html body :is(...)` gleich.
   ============================================================================ */

/* ================================ 1. TOKENS ================================ */

:root {
    /* Marke */
    --ks-brand:        #0369a1;
    --ks-brand-hover:  #075985;
    --ks-brand-soft:   #f0f9ff;

    /* Status: Schrift-/Randfarbe + heller Grund */
    --ks-ok:           #15803d;
    --ks-ok-soft:      #f0fdf4;
    --ks-warn:         #b45309;
    --ks-warn-soft:    #fffbeb;
    --ks-fehler:       #b91c1c;
    --ks-fehler-soft:  #fef2f2;
    --ks-info:         var(--ks-brand);
    --ks-info-soft:    var(--ks-brand-soft);

    /* Neutral */
    --ks-text:         #1f2937;
    --ks-text-leise:   #4b5563;
    --ks-rand:         #d1d5db;
    --ks-rand-stark:   #9ca3af;
    --ks-flaeche:      #ffffff;
    --ks-flaeche-2:    #f9fafb;
    --ks-flaeche-3:    #f3f4f6;

    /* Radien */
    --ks-r-ctl:        8px;
    --ks-r-flaeche:    12px;

    /* Schatten */
    --ks-sh-1:         0 1px 2px rgb(16 24 40 / .06);
    --ks-sh-overlay:   0 12px 32px -8px rgb(16 24 40 / .18);

    /* Fokus */
    --ks-fokus:        rgb(3 105 161 / .5);
    --ks-fokus-breite: 3px;
    --ks-fokus-abstand: 2px;
}

/* ================================ 2. FOKUS =================================
   Die EINE Fokus-Regel. :focus-visible -> nur bei Tastaturbedienung bzw.
   Texteingabe, nicht beim Mausklick auf Knoepfe. `html body :is(...)` hat
   hoehere Spezifitaet als die alten `html body input:focus`-Regeln, deren
   `outline: none` sonst gewinnen wuerde.
   ========================================================================= */

html body :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: var(--ks-fokus-breite) solid var(--ks-fokus);
    outline-offset: var(--ks-fokus-abstand);
}

/* ============================== 3. BUTTONS =================================
   Flach, ruhig, gleich hoch. Zustandswechsel nur ueber Farbe.
   ========================================================================= */

.ks-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: var(--ks-r-ctl);
    background-color: var(--ks-flaeche);
    background-image: none;
    box-shadow: none;
    color: var(--ks-text);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transform: none;
    filter: none;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.ks-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.ks-btn:hover,
.ks-btn:active {
    transform: none;
    filter: none;
}

.ks-btn--primary {
    background-color: var(--ks-brand);
    border-color: var(--ks-brand);
    color: #fff;
}
.ks-btn--primary:hover { background-color: var(--ks-brand-hover); border-color: var(--ks-brand-hover); color: #fff; }

.ks-btn--secondary {
    background-color: var(--ks-flaeche);
    border-color: var(--ks-rand);
    color: var(--ks-text);
    box-shadow: var(--ks-sh-1);
}
.ks-btn--secondary:hover { background-color: var(--ks-flaeche-2); border-color: var(--ks-rand-stark); color: var(--ks-text); }

.ks-btn--danger {
    background-color: var(--ks-fehler);
    border-color: var(--ks-fehler);
    color: #fff;
}
.ks-btn--danger:hover { background-color: #991b1b; border-color: #991b1b; color: #fff; }

.ks-btn--ghost {
    background-color: transparent;
    border-color: transparent;
    color: var(--ks-text-leise);
}
.ks-btn--ghost:hover { background-color: var(--ks-flaeche-3); color: var(--ks-text); }

.ks-btn--sm {
    height: 32px;
    padding: 0 12px;
    gap: 6px;
    font-size: 14px;
}
.ks-btn--sm svg { width: 16px; height: 16px; }

.ks-btn:disabled,
.ks-btn[aria-disabled="true"] {
    opacity: .5;
    cursor: not-allowed;
}
.ks-btn--primary:disabled:hover   { background-color: var(--ks-brand); border-color: var(--ks-brand); }
.ks-btn--secondary:disabled:hover { background-color: var(--ks-flaeche); border-color: var(--ks-rand); }
.ks-btn--danger:disabled:hover    { background-color: var(--ks-fehler); border-color: var(--ks-fehler); }
.ks-btn--ghost:disabled:hover     { background-color: transparent; }

/* Icon-Farben in Buttons (z.B. gruenes Play beim Timer) */
.ks-btn .ks-icon--ok     { color: var(--ks-ok); }
.ks-btn .ks-icon--fehler { color: var(--ks-fehler); }
.ks-btn .ks-icon--leise  { color: var(--ks-text-leise); }

/* ========================== 4. EINGABE & AUSWAHL =========================== */

html body :is(input, textarea).ks-input,
html body select.ks-select {
    display: block;
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--ks-rand);
    border-radius: var(--ks-r-ctl);
    background-color: var(--ks-flaeche);
    color: var(--ks-text);
    font-size: 15px;
    line-height: 1.4;
    box-shadow: none;
    transition: border-color 150ms ease;
}
html body textarea.ks-input {
    height: auto;
    min-height: 96px;
    padding: 10px 12px;
}
html body :is(input, textarea).ks-input:hover,
html body select.ks-select:hover {
    border-color: var(--ks-rand-stark);
}
/* Fokus: Rahmen in Markenfarbe; den Ring liefert die zentrale Fokus-Regel */
html body :is(input, textarea).ks-input:focus,
html body select.ks-select:focus {
    border-color: var(--ks-brand);
    box-shadow: none;
}
html body :is(input, textarea).ks-input::placeholder { color: #6b7280; }
html body :is(input, textarea, select):is(.ks-input, .ks-select):disabled {
    background-color: var(--ks-flaeche-3);
    color: var(--ks-text-leise);
    cursor: not-allowed;
}

html body select.ks-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    min-width: 160px;
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%234b5563'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 18px 18px;
    cursor: pointer;
}
html body select.ks-select::-ms-expand { display: none; }

/* --- 4b. Grundformatierung ALLER Formularfelder ---------------------------
   Viele Vorlagen nutzen das Muster des Tailwind-Forms-Plugins
   ("rounded-lg border-gray-300 shadow-sm"), das nie installiert war: Die
   Felder hatten weder Innenabstand noch Höhe, Auswahlmenüs den nackten
   Windows-Pfeil. Diese Regeln geben jedem Feld eine ruhige Grundform.

   Gewichtung bewusst niedrig: input:where([type=…]) zählt wie ein einzelnes
   Element (0,0,1) — schlägt also Tailwinds Preflight (gleiches Gewicht, lädt
   früher), verliert aber gegen jede Utility-Klasse wie px-2/py-2/text-sm.
   Felder mit eigenen Abständen (z.B. schmale Felder im Rechnungsformular)
   bleiben damit unverändert. */
input:where([type="text"], [type="email"], [type="password"], [type="number"],
            [type="search"], [type="tel"], [type="url"], [type="date"],
            [type="time"], [type="datetime-local"], [type="month"], :not([type])),
select,
textarea {
    padding: 8px 12px;
    min-height: 40px;
    font-size: 15px;
    line-height: 1.4;
    background-color: var(--ks-flaeche);
    color: var(--ks-text);
}
textarea { min-height: 96px; }

/* Auswahlmenüs: einheitlicher, ruhiger Pfeil statt Betriebssystem-Optik.
   Der Platz für den Pfeil (padding-right) muss auch gegen px-* gewinnen,
   sonst läuft der Text unter den Pfeil — daher hier höhere Gewichtung. */
html body select:not([multiple]):not([size]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%234b5563'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 18px 18px;
    cursor: pointer;
}
html body select::-ms-expand { display: none; }
/* Aufgeklappte Liste: neutral statt grauer Systemfarbe, wo der Browser es zulässt */
html body select option { background-color: #fff; color: var(--ks-text); }
html body :is(input, select, textarea):disabled {
    background-color: var(--ks-flaeche-3);
    color: var(--ks-text-leise);
    cursor: not-allowed;
}

/* Raster fuer Filter-/Formularfelder: so viele Spalten wie Platz ist */
.ks-feldraster {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* Beschriftung fuer Formularfelder */
.ks-label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ks-text);
}

/* ================================ 5. BADGES ================================ */

.ks-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 9999px;
    border: 1px solid transparent;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    background-color: var(--ks-flaeche-3);
    color: var(--ks-text);
}
.ks-badge--neutral { background-color: var(--ks-flaeche-3); color: var(--ks-text); }
.ks-badge--info    { background-color: var(--ks-info-soft);   color: var(--ks-info); }
.ks-badge--ok      { background-color: var(--ks-ok-soft);     color: var(--ks-ok); }
.ks-badge--warn    { background-color: var(--ks-warn-soft);   color: var(--ks-warn); }
.ks-badge--fehler  { background-color: var(--ks-fehler-soft); color: var(--ks-fehler); }

/* =============================== 6. HINWEISE =============================== */

.ks-hinweis {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid var(--ks-rand);
    border-left-width: 4px;
    border-radius: var(--ks-r-ctl);
    background-color: var(--ks-flaeche-2);
    color: var(--ks-text);
    font-size: 15px;
    line-height: 1.5;
}
.ks-hinweis svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.ks-hinweis--info   { border-color: #bae6fd; border-left-color: var(--ks-info);   background-color: var(--ks-info-soft); }
.ks-hinweis--ok     { border-color: #bbf7d0; border-left-color: var(--ks-ok);     background-color: var(--ks-ok-soft); }
.ks-hinweis--warn   { border-color: #fde68a; border-left-color: var(--ks-warn);   background-color: var(--ks-warn-soft); }
.ks-hinweis--fehler { border-color: #fecaca; border-left-color: var(--ks-fehler); background-color: var(--ks-fehler-soft); }
.ks-hinweis--info svg   { color: var(--ks-info); }
.ks-hinweis--ok svg     { color: var(--ks-ok); }
.ks-hinweis--warn svg   { color: var(--ks-warn); }
.ks-hinweis--fehler svg { color: var(--ks-fehler); }

/* ============================ 7. FILTER-CHIPS ==============================
   Aktiver Filter mit eigenem Entfernen-Knopf (x). Der Knopf ist ein Link,
   der genau diesen Parameter aus der URL nimmt.
   ========================================================================= */

.ks-chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 32px;
    padding: 0 4px 0 12px;
    border: 1px solid #bae6fd;
    border-radius: 9999px;
    background-color: var(--ks-brand-soft);
    color: var(--ks-brand);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}
.ks-chip__x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-left: 2px;
    border-radius: 9999px;
    color: var(--ks-brand);
    text-decoration: none;
    font-size: 18px;
    line-height: 1;
    transition: background-color 150ms ease;
}
.ks-chip__x:hover { background-color: #e0f2fe; color: var(--ks-brand-hover); }

/* ========================= 8. TIMER-LAUFANZEIGE ============================
   Ruhig statt Alarm: heller Markengrund, statischer Punkt, keine Animation.
   ========================================================================= */

.ks-laufanzeige {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid #bae6fd;
    border-radius: var(--ks-r-ctl);
    background-color: var(--ks-brand-soft);
    color: var(--ks-brand);
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.ks-laufanzeige--sm { height: 32px; padding: 0 10px; font-size: 14px; }
button.ks-laufanzeige { cursor: pointer; transition: background-color 150ms ease; }
button.ks-laufanzeige:hover { background-color: #e0f2fe; }
.ks-laufanzeige__punkt {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background-color: var(--ks-brand);
    flex-shrink: 0;
}
.ks-laufanzeige svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ================================ 9. TOASTS ================================
   Ruhige Meldungen unten rechts. Farbe nur als Randstreifen + Icon.
   ========================================================================= */

.ks-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 12px 14px 16px;
    border: 1px solid #e5e7eb;
    border-left: 4px solid var(--ks-info);
    border-radius: var(--ks-r-ctl);
    background-color: var(--ks-flaeche);
    box-shadow: var(--ks-sh-overlay);
    color: var(--ks-text);
    font-size: 15px;
    line-height: 1.45;
    transition: opacity 150ms ease;
}
.ks-toast--success { border-left-color: var(--ks-ok); }
.ks-toast--error   { border-left-color: var(--ks-fehler); }
.ks-toast--warning { border-left-color: var(--ks-warn); }
.ks-toast--info    { border-left-color: var(--ks-info); }
.ks-toast__icon { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.ks-toast--success .ks-toast__icon { color: var(--ks-ok); }
.ks-toast--error   .ks-toast__icon { color: var(--ks-fehler); }
.ks-toast--warning .ks-toast__icon { color: var(--ks-warn); }
.ks-toast--info    .ks-toast__icon { color: var(--ks-info); }
.ks-toast__inhalt { flex: 1; min-width: 0; }
.ks-toast__titel { font-weight: 600; color: var(--ks-text); }
.ks-toast__text  { margin-top: 2px; color: var(--ks-text-leise); font-size: 14px; }
.ks-toast__schliessen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: -6px -2px -6px 0;
    border: 0;
    border-radius: var(--ks-r-ctl);
    background: transparent;
    color: var(--ks-text-leise);
    cursor: pointer;
    flex-shrink: 0;
}
.ks-toast__schliessen:hover { background-color: var(--ks-flaeche-3); color: var(--ks-text); }
.ks-toast__schliessen svg { width: 18px; height: 18px; }
.ks-toast--verborgen { opacity: 0; }

/* ======================= 10. FEHLENDE BACKDROP-KLASSEN =====================
   Diese Opazitaets-Klassen werden in Modals benutzt, fehlen aber im
   vorkompilierten Tailwind -> Seite wurde hinter Dialogen nicht abgedunkelt.
   (bg-gray-500/75, bg-gray-900/50, bg-gray-900/80 existieren im Build
   bereits, werden hier aber identisch abgesichert.)
   ========================================================================= */

.bg-black\/30    { background-color: rgb(0 0 0 / .3); }
.bg-black\/40    { background-color: rgb(0 0 0 / .4); }
.bg-black\/80    { background-color: rgb(0 0 0 / .8); }
.bg-gray-500\/75 { background-color: rgb(107 114 128 / .75); }
.bg-gray-900\/50 { background-color: rgb(17 24 39 / .5); }
.bg-gray-900\/75 { background-color: rgb(17 24 39 / .75); }
.bg-gray-900\/80 { background-color: rgb(17 24 39 / .8); }

/* ===================== 12. RECHNUNG FUER MANDANTEN =========================
   Oeffentliche Rechnungsseite + Kundenportal (billing/_rechnung_inhalt.html).
   Ruhig: weisse Karten, 16px Text, Zahlen rechtsbuendig, eine Hauptaktion.
   ========================================================================= */

.ks-seite {
    min-height: 100vh;
    margin: 0;
    background-color: var(--ks-flaeche-2);
    color: var(--ks-text);
    font-size: 16px;
    line-height: 1.5;
}
.ks-seite__inhalt {
    max-width: 52rem;
    margin: 0 auto;
    padding: 24px 16px 40px;
}
.ks-seite__fuss {
    margin-top: 24px;
    text-align: center;
    color: var(--ks-text-leise);
    font-size: 14px;
}

.ks-karte {
    background-color: var(--ks-flaeche);
    border: 1px solid var(--ks-rand);
    border-radius: var(--ks-r-flaeche);
    box-shadow: var(--ks-sh-1);
    padding: 20px;
}
@media (min-width: 640px) {
    .ks-karte { padding: 24px; }
}
.ks-karte__titel {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
    color: var(--ks-text);
}
.ks-karte__text { margin: 0; color: var(--ks-text-leise); font-size: 15px; }

.ks-rechnung { display: flex; flex-direction: column; gap: 16px; }
.ks-rechnung__kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.ks-rechnung__art {
    font-size: 14px;
    font-weight: 600;
    color: var(--ks-text-leise);
}
.ks-rechnung__nummer {
    margin: 2px 0 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ks-text);
    overflow-wrap: anywhere;
}
.ks-badge--gross { padding: 4px 12px; font-size: 15px; white-space: normal; }

/* Kopfdaten: Begriff ueber Wert, so viele Spalten wie Platz ist */
.ks-meta {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px 16px;
    margin: 0;
}
.ks-meta dt { font-size: 14px; color: var(--ks-text-leise); }
.ks-meta dd { margin: 2px 0 0; font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }

.ks-leise { display: block; margin-top: 2px; font-size: 14px; font-weight: 400; color: var(--ks-text-leise); }
.ks-zahl  { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ks-fett  { font-weight: 600; }
.ks-mono  { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em; }

/* Positionstabelle: keine innere Hoehenbegrenzung (Dokument, keine Liste) */
.ks-tabelle.ks-rechnung-tabelle { max-height: none; margin: -4px -4px 0; }
.ks-rechnung-tabelle table { width: 100%; border-collapse: collapse; font-size: 15px; }
.ks-rechnung-tabelle th {
    padding: 10px 8px;
    border-bottom: 1px solid var(--ks-rand);
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    color: var(--ks-text-leise);
}
.ks-rechnung-tabelle th.ks-zahl { text-align: right; }
.ks-rechnung-tabelle td {
    padding: 12px 8px;
    border-bottom: 1px solid var(--ks-flaeche-3);
    vertical-align: top;
}
.ks-rechnung-tabelle__text { min-width: 14rem; overflow-wrap: anywhere; }
.ks-rechnung-tabelle__pos { color: var(--ks-text-leise); }

/* Schmale Bildschirme: jede Position als kleiner Block, Begriff links */
@media (max-width: 639px) {
    .ks-tabelle.ks-rechnung-tabelle { overflow: visible; margin: 0; }
    .ks-rechnung-tabelle thead { display: none; }
    .ks-rechnung-tabelle tbody,
    .ks-rechnung-tabelle tr { display: block; }
    .ks-rechnung-tabelle tr { padding: 12px 0; border-bottom: 1px solid var(--ks-rand); }
    .ks-rechnung-tabelle tbody tr:first-child { padding-top: 0; }
    .ks-rechnung-tabelle td {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        padding: 3px 0;
        border: 0;
        text-align: right;
    }
    .ks-rechnung-tabelle td::before {
        content: attr(data-label);
        flex-shrink: 0;
        color: var(--ks-text-leise);
        font-size: 14px;
        text-align: left;
    }
    .ks-rechnung-tabelle td.ks-rechnung-tabelle__text {
        display: block;
        min-width: 0;
        padding-bottom: 6px;
        font-weight: 600;
        text-align: left;
    }
    .ks-rechnung-tabelle td.ks-rechnung-tabelle__text::before,
    .ks-rechnung-tabelle td.ks-rechnung-tabelle__pos { display: none; }
}

/* Summen */
.ks-summen { margin: 16px 0 0 auto; max-width: 26rem; }
.ks-summen > div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 4px 0;
    font-size: 15px;
}
.ks-summen dt { color: var(--ks-text-leise); }
.ks-summen dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ks-summen > .ks-summen__gesamt {
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--ks-rand);
    font-size: 17px;
    font-weight: 700;
}
.ks-summen__gesamt dt,
.ks-summen__offen dt { color: var(--ks-text); }
.ks-summen > .ks-summen__offen { font-weight: 700; font-size: 16px; }
.ks-steuerhinweis { margin-top: 12px; font-size: 14px; color: var(--ks-text-leise); }

/* Zahlung: erst Kopier-Knoepfe, daneben (breit) bzw. darunter (schmal) der QR-Code */
.ks-zahlung__betrag { margin-bottom: 16px; font-size: 16px; }
.ks-zahlung { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 640px) {
    .ks-zahlung--mit-qr { grid-template-columns: 1fr 200px; align-items: start; }
}
.ks-kopierliste { display: flex; flex-direction: column; }
.ks-kopierzeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    padding: 8px 0;
    border-bottom: 1px solid var(--ks-flaeche-3);
}
.ks-kopierzeile__text { display: flex; flex-direction: column; min-width: 0; }
.ks-kopierzeile__label { font-size: 14px; color: var(--ks-text-leise); }
.ks-kopierzeile__wert {
    font-size: 16px;
    font-weight: 600;
    overflow-wrap: anywhere;
    -webkit-user-select: all;
    user-select: all;
}
.ks-kopierzeile .ks-btn { flex-shrink: 0; min-width: 92px; }
.ks-kopierliste__meldung { min-height: 22px; margin-top: 8px; font-size: 14px; color: var(--ks-text-leise); }

.ks-qr { margin: 0; text-align: center; }
.ks-qr__bild {
    width: 180px;
    height: 180px;
    margin: 0 auto;
    padding: 6px;
    border: 1px solid var(--ks-rand);
    border-radius: var(--ks-r-ctl);
    background-color: #fff;
}
.ks-qr__bild svg { display: block; width: 100%; height: 100%; }
.ks-qr figcaption { margin-top: 8px; font-size: 14px; color: var(--ks-text-leise); }

.ks-aktionsleiste { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 639px) {
    .ks-aktionsleiste .ks-btn { flex: 1 1 100%; }
}

/* Rechnungsliste im Kundenportal */
.ks-liste { margin: 0; padding: 0; list-style: none; }
.ks-liste__eintrag + .ks-liste__eintrag { border-top: 1px solid var(--ks-flaeche-3); }
.ks-liste__link {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 14px 4px;
    color: var(--ks-text);
    text-decoration: none;
    border-radius: var(--ks-r-ctl);
    transition: background-color 150ms ease;
}
.ks-liste__link:hover { background-color: var(--ks-flaeche-2); }
.ks-liste__haupt { display: flex; flex-direction: column; min-width: 0; }
.ks-liste__titel { font-size: 16px; font-weight: 600; }
.ks-liste__unter { font-size: 14px; color: var(--ks-text-leise); }
.ks-liste__rechts { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; margin-left: auto; }
.ks-liste__betrag { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Zurueck-Link ueber dem Inhalt */
.ks-zurueck {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    color: var(--ks-brand);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}
.ks-zurueck:hover { color: var(--ks-brand-hover); text-decoration: underline; }
.ks-zurueck svg { width: 18px; height: 18px; }

/* ========================= 11. REDUZIERTE BEWEGUNG ========================
   Stoppt auch Endlos-Animationen (animate-ping/-pulse/-spin), nicht nur
   deren Dauer.
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }
    *, *::before, *::after {
        animation: none !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}