/* =====================================================================
   RT-Beleg AI – Design-System
   ---------------------------------------------------------------------
   Diese Datei wird NACH style.css geladen und vereinheitlicht das
   Aussehen aller Seiten. style.css bleibt unverändert – wer das neue
   Aussehen abschalten will, entfernt in base.html die eine Zeile mit
   design.css. Nichts hier ändert Struktur oder Abläufe: es werden nur
   Farben, Abstände, Rundungen, Schatten und Schriftgrößen gesetzt.

   Drei Ziele, die aus der Kritik am alten Aussehen kommen:
     1. EINHEITLICH – jede Fläche, jeder Knopf, jede Tabelle folgt
        denselben Werten (Tokens unten). Bisher hatte fast jede Seite
        eigene Rundungen, Grautöne und Abstände.
     2. BEDIENBAR – größere Klickflächen, sichtbarer Fokus (Tastatur),
        klare Rangfolge: eine Hauptaktion je Bereich, der Rest ruhig.
     3. ZEITGEMÄSS – ruhiger Untergrund, weiche Schatten statt harter
        Rahmen, Zahlen in Tabellenziffern, mehr Luft.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Tokens – die einzige Stelle, an der Farben und Maße stehen.
   Wer später das Erscheinungsbild ändern will (auch für den Verkauf an
   andere Kanzleien: eigenes Blau statt Indigo), ändert nur diesen Block.
   --------------------------------------------------------------------- */
:root{
  /* Markenfarbe */
  --ds-primary:#4f46e5;         /* Indigo 600 – Hauptaktionen, aktive Zustände */
  --ds-primary-d:#4338ca;       /* gedrückt / Hover */
  --ds-primary-l:#eef0ff;       /* zarte Fläche (aktive Zeile, helle Knöpfe) */
  --ds-primary-b:#c7cbff;       /* Rahmen zur zarten Fläche */

  /* Signalfarben – bewusst gedämpft, nicht grell */
  --ds-ok:#059669;   --ds-ok-l:#e8f7f0;
  --ds-warn:#b45309; --ds-warn-l:#fdf3e3;
  --ds-err:#e11d48;  --ds-err-l:#fdecef;

  /* Neutrale Töne (Slate) */
  --ds-ink:#0f172a;             /* Überschriften */
  --ds-text:#334155;            /* Fließtext */
  --ds-muted:#64748b;           /* Nebeninfos */
  --ds-line:#e6e8f0;            /* Trennlinien, Rahmen */
  --ds-line-s:#eff1f6;          /* noch leiser (Tabellenzeilen) */
  --ds-surface:#ffffff;         /* Karten */
  --ds-bg:#f5f6fa;              /* Seitengrund */
  --ds-head:#f8f9fc;            /* Tabellenkopf */

  /* Maße: eine Rundung, eine Höhe, eine Abstandsleiter */
  --ds-r:10px;                  /* Karten */
  --ds-r-s:8px;                 /* Bedienelemente */
  --ds-h:38px;                  /* Höhe aller Knöpfe und Eingaben */
  --ds-gap:10px;

  /* Schatten: zwei Stufen, mehr braucht es nicht */
  --ds-sh:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --ds-sh-l:0 4px 16px rgba(15,23,42,.08), 0 1px 3px rgba(15,23,42,.05);

  /* Bestehende Namen mitziehen, damit alte Regeln zum neuen Bild passen */
  --line:var(--ds-line);
  --bg:var(--ds-bg);
  --blue:var(--ds-primary);
  --navy:var(--ds-ink);
  --grey:var(--ds-muted);
  --active:var(--ds-primary-l);
  --green:var(--ds-ok); --green-d:var(--ds-ok);
  --red:var(--ds-err); --orange:var(--ds-warn);
}

/* ---------------------------------------------------------------------
   2. Grundlagen: Schrift, Farbe, Fokus
   --------------------------------------------------------------------- */
body{
  background:var(--ds-bg);
  color:var(--ds-text);
  font-family:"Inter","SF Pro Text",-apple-system,BlinkMacSystemFont,
              "Segoe UI Variable Text","Segoe UI",Roboto,Arial,sans-serif;
  /* Buchhaltung heißt Zahlenkolonnen: gleiche Ziffernbreite überall. */
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.page-title{color:var(--ds-ink);letter-spacing:-.01em;font-weight:650}
.page-title{font-size:23px;margin:2px 0 16px;line-height:1.25}
.muted{color:var(--ds-muted)}
.small{font-size:12.5px}
a{color:var(--ds-primary)}
a:hover{text-decoration:underline}
::selection{background:#dfe2ff}

/* `hidden` muss immer gewinnen.
   Der Browser versteckt ein Element mit dem Attribut `hidden` über
   `[hidden]{display:none}`. Sobald aber eine eigene Klassenregel `display`
   setzt – etwa `.preview-pane{display:flex}` in style.css –, schlägt sie das
   Attribut, und das Element bleibt sichtbar. Genau so stand im Portal eine
   leere Vorschaufläche unter der Liste, obwohl die Vorlage sie ausblendet.
   Diese eine Zeile stellt die erwartete Reihenfolge wieder her. */
[hidden]{display:none !important}

/* Sichtbarer Fokus für die Tastaturbedienung – vorher sprang der Fokus
   unsichtbar durch die Maske. `:focus-visible` stört die Maus nicht. */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--ds-primary);
  outline-offset:2px;
  border-radius:6px;
}

/* ---------------------------------------------------------------------
   3. Flächen: Karten, Panels, Seitenkopf
   Weiche Schatten statt Rahmenlinien – das ist der größte Unterschied
   zum bisherigen, technisch wirkenden Bild.
   --------------------------------------------------------------------- */
.panel,.card,.grid-scroll,.buchung,.ue-card,.modal-box{
  background:var(--ds-surface);
  border:1px solid var(--ds-line);
  border-radius:var(--ds-r);
  box-shadow:var(--ds-sh);
}
.panel{padding:14px 16px;margin-bottom:14px}
.card{padding:18px 20px}
.panel-label,.nav-sep{
  font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:#94a3b8;
}
.content{padding:24px 28px}

/* ---------------------------------------------------------------------
   4. Bedienelemente: Knöpfe
   Eine Höhe, eine Rundung, ein Gewicht. Farbe bedeutet Rang:
   gefüllt = Hauptaktion, hell = Nebenaktion, Umriss = selten gebraucht.
   --------------------------------------------------------------------- */
.b,.pa-btn,.zt-btn,.ma-pfeil,.nav-toggle,.tab,button.b{
  font-family:inherit;
  transition:background .13s ease,border-color .13s ease,
             box-shadow .13s ease,transform .06s ease;
}
.b{
  min-height:var(--ds-h);
  padding:0 15px;
  border:1px solid transparent;
  border-radius:var(--ds-r-s);
  font-size:13.5px;font-weight:600;
  box-shadow:var(--ds-sh);
  justify-content:center;
}
.b:hover{filter:none}
.b:active{transform:translateY(1px)}
.b[disabled],.b:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}

.b-blue,.b-icon{background:var(--ds-primary);color:#fff}
.b-blue:hover,.b-icon:hover{background:var(--ds-primary-d)}
.b-green{background:var(--ds-ok);color:#fff}
.b-green:hover{background:#047857}
.b-red{background:var(--ds-err);color:#fff}
.b-red:hover{background:#be123c}
.b-grey{background:#64748b;color:#fff}
.b-grey:hover{background:#475569}
.b-light{background:#fff;color:var(--ds-text);border-color:var(--ds-line);box-shadow:var(--ds-sh)}
.b-light:hover{background:#f8fafc;border-color:#cbd5e1}
.ghost{background:transparent;color:var(--ds-muted);border:1px solid var(--ds-line)}
.ghost:hover{background:#f8fafc;color:var(--ds-text)}
/* Gefährliche Aktionen: ruhig, bis man sie anfasst. Eine rote Fläche soll
   „endgültig" bedeuten – wenn drei Knöpfe rot sind, bedeutet sie nichts mehr.
   Deshalb steht Löschen normal da und wird erst beim Darüberfahren rot. */
.b-danger{background:#fff;color:var(--ds-err);border-color:#f4cdd5;box-shadow:var(--ds-sh)}
.b-danger:hover{background:var(--ds-err);color:#fff;border-color:var(--ds-err)}

/* ---------------------------------------------------------------------
   5. Bedienelemente: Eingaben und Auswahl
   Gleiche Höhe wie die Knöpfe – dadurch stehen Filterleisten sauber in
   einer Linie, was vorher der auffälligste Bruch war.
   --------------------------------------------------------------------- */
input[type=text],input[type=search],input[type=date],input[type=number],
input[type=password],input[type=email],input:not([type]),select,textarea,
.field,.filter-row input,.filter-row select,.lang{
  min-height:var(--ds-h);
  padding:8px 12px;
  border:1px solid var(--ds-line);
  border-radius:var(--ds-r-s);
  background:#fff;
  color:var(--ds-text);
  font-family:inherit;
  font-size:14px;
  box-shadow:inset 0 1px 1px rgba(15,23,42,.02);
  transition:border-color .13s ease,box-shadow .13s ease;
}
textarea{min-height:80px;line-height:1.5}
input:hover,select:hover,textarea:hover{border-color:#cbd5e1}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--ds-primary);
  box-shadow:0 0 0 3px rgba(79,70,229,.14);
}
input::placeholder,textarea::placeholder{color:#9aa4b4}
input[readonly],input[disabled],select[disabled]{background:#f8fafc;color:#7c8798}
label{color:var(--ds-text)}

/* ---------------------------------------------------------------------
   6. Tabellen: ruhig, ohne senkrechte Linien, Kopf bleibt lesbar
   --------------------------------------------------------------------- */
/* NICHT overflow:hidden setzen. Diese Datei wird NACH style.css geladen und
   überschrieb damit .grid-scroll{overflow-y:auto} – die Belegliste war auf
   100vh-300px begrenzt, der Rest wurde abgeschnitten statt scrollbar.
   Ramazan am 13.08.2026 bei Ömer Palta mit 33 Belegen: „hier sind noch mehr
   Belege vorhanden, aber kann leider nicht runterscrollen."
   Die Ecken der Karte rundet der Container darum, nicht der Scrollbereich. */
.grid-scroll{overflow-y:auto;overflow-x:auto}
.grid th{
  background:var(--ds-head);
  color:#5b6779;
  font-size:11.5px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;
  padding:10px 12px;
  border-bottom:1px solid var(--ds-line);
}
.grid td{
  padding:11px 12px;
  border-bottom:1px solid var(--ds-line-s);
  font-size:13.5px;color:var(--ds-text);
}
.grid tbody tr:last-child td{border-bottom:0}
.grid tbody .row:hover{background:#f8f9ff}
.grid tbody .row.sel{background:var(--ds-primary-l);box-shadow:inset 3px 0 0 var(--ds-primary)}
.grid .num{font-variant-numeric:tabular-nums}
.table-info{color:var(--ds-muted);font-size:12.5px;margin:6px 2px 10px}

/* ---------------------------------------------------------------------
   7. Reiter, Marken, Status
   --------------------------------------------------------------------- */
.tabs{gap:2px;border-bottom:1px solid var(--ds-line)}
.tab{
  padding:10px 14px;
  font-size:14px;font-weight:600;
  color:var(--ds-muted);
  border-bottom:2px solid transparent;
  border-radius:8px 8px 0 0;
}
.tab:hover{color:var(--ds-text);background:#f8fafc}
.tab.active{color:var(--ds-primary);border-bottom-color:var(--ds-primary);background:transparent}

.art,.status,.konf,.chip{
  border-radius:999px;
  padding:3px 10px;
  font-size:11.5px;font-weight:650;
  letter-spacing:.01em;
  display:inline-block;
}
.art{background:#f1f3f9;color:#5b6779}
.k0,.s-hochgeladen{background:var(--ds-err-l);color:var(--ds-err)}
.k1{background:var(--ds-warn-l);color:var(--ds-warn)}
.k2,.s-freigeschalten{background:var(--ds-ok-l);color:var(--ds-ok)}
.s-imported{background:var(--ds-primary-l);color:var(--ds-primary)}
.konf-banner{
  border-radius:var(--ds-r);padding:12px 15px;font-size:14px;
  border:1px solid transparent;
}
.konf-banner.k0{background:var(--ds-err-l);border-color:#f7c9d2}
.konf-banner.k1{background:var(--ds-warn-l);border-color:#f3ddb6}
.konf-banner.k2{background:var(--ds-ok-l);border-color:#bfe6d4}

/* ---------------------------------------------------------------------
   8. Rahmen der Anwendung: Seitenleiste und Kopfleiste
   Die dunkle Leiste bleibt – sie trennt Navigation und Arbeitsfläche
   deutlich. Nur die Zustände werden ruhiger.
   --------------------------------------------------------------------- */
/* Fast schwarz, ein einziger Akzent.
   Die Leiste soll ruhig im Hintergrund stehen und die Arbeitsfläche
   hervortreten lassen. Deshalb: sehr dunkler, leicht blaustichiger Grund,
   gedämpfte Schrift, und Farbe NUR dort, wo man gerade ist. */
:root{
  --sidebar:#0b0f19;      /* fast schwarz, minimal blaustichig */
  --side-2:#0b0f19;       /* kein Verlauf – ruhiger */
  --side-txt:#98a1b5;     /* gedämpft: inaktive Einträge drängen sich nicht auf */
  --side-accent:#a5b4fc;  /* Indigo hell für Symbole des aktiven Eintrags */
}
.sidebar{box-shadow:none;border-right:1px solid rgba(255,255,255,.05)}

/* Markenzeile: etwas Luft darunter und eine feine Trennlinie – sie ist der
   Kopf der Leiste, kein Menüpunkt. */
.brand{
  padding:18px 18px 18px;margin:0 8px 10px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.brand-txt{font-size:20.5px;font-weight:700;letter-spacing:-.015em;color:#f1f3f9}
.brand-txt strong{color:var(--side-accent)}
/* Das Zeichen ist aus dünnen Linien gebaut; auf fast schwarzem Grund wirkt
   reines Weiß hart. Etwas zurückgenommen, der Akzent bleibt farbig. */
.sidebar .brand-logo{width:58px;height:49px}
.sidebar .brand-logo line{stroke:#d8dce8}
.sidebar .brand-logo text{fill:#d8dce8}
.sidebar .brand-logo text:last-of-type{fill:var(--side-accent)}
.nav{
  margin:1px 8px;padding:10px 12px;
  font-size:14.5px;font-weight:550;
  border-left:0;border-radius:9px;
  gap:10px;
  /* Lange Beschriftungen („Offene Posten & Payment") dürfen NICHT aus der
     Leiste ragen. Sie standen bisher in einer Zeile ohne Umbruch; solange die
     Leiste ihren Überhang abschnitt, fiel das nicht auf. Seit sie ihn zeigen
     muss (sonst kann der Inhalt darin nicht oben kleben), brauchen die
     Einträge einen Umbruch statt eines Abschnitts – abgeschnittene Wörter
     wären schlechter lesbar als zwei Zeilen. */
  white-space:normal;
  line-height:1.25;
  align-items:flex-start;
  overflow-wrap:anywhere;
}
.nav span{flex:0 0 auto;margin-top:1px}
.nav{color:var(--side-txt)}
.nav span{color:#5d6883}                    /* Symbole treten zurück */
.nav:hover{background:rgba(255,255,255,.05);color:#e7eaf3}
.nav:hover span{color:#98a1b5}

/* Aktiver Eintrag: gefüllte Pille in der Markenfarbe. Ein leichter Schein
   nach unten hebt sie von der fast schwarzen Fläche ab, ohne zu leuchten. */
.nav.active{
  background:linear-gradient(180deg,#5b53ea,var(--ds-primary,#1f4f7a));
  color:#fff;font-weight:650;
  box-shadow:0 2px 10px rgba(79,70,229,.35);
}
.nav.active span{color:#fff}
.nav.disabled{color:#4b5468}
.nav.disabled span{color:#3b4356}

/* Abschnittsüberschrift („ADMIN"): sehr leise, mit Luft darüber. */
.nav-sep{padding:20px 22px 8px;color:#5d6883;font-size:10.5px}

.topbar{
  height:62px;padding:0 24px;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(1.6) blur(8px);
  border-bottom:1px solid var(--ds-line);
  box-shadow:0 1px 2px rgba(15,23,42,.03);
}
.client-select{
  min-height:36px;border:1px solid var(--ds-line);border-radius:var(--ds-r-s);
  color:var(--ds-ink);font-weight:600;font-size:13.5px;background:#fff;
  box-shadow:var(--ds-sh);
}
.client-select:hover{background:#f8fafc;border-color:#cbd5e1}
.topbar-right{font-size:13.5px;color:var(--ds-muted);gap:14px}
.admin-badge{background:var(--ds-primary-l);color:var(--ds-primary);
  border:1px solid var(--ds-primary-b);border-radius:999px;font-size:12px}
.nav-toggle{width:36px;height:36px;border-radius:9px;border-color:var(--ds-line);color:var(--ds-muted)}
.nav-toggle:hover{background:#f8fafc;color:var(--ds-text)}

/* Die dunkle Spalte bis zum unteren Fensterrand – OHNE die Seite höher zu
   machen.
   Vorgeschichte: Erst wurde `.app` auf `100vh / Zoom` gestreckt. Die Leiste
   reichte damit zwar bis unten, aber Safari rechnet den Scrollbereich ohne
   den Zoom – die Seite ließ sich rund 500 px ins Leere scrollen.
   Lösung: Der Hintergrund des `body` wird vom Browser auf die gesamte
   Zeichenfläche übertragen (das gilt nur für body, nicht für ein beliebiges
   Element). Er füllt damit immer das ganze Fenster, egal wie hoch der Inhalt
   ist, und fügt keine einzige Pixelzeile hinzu. Die Leiste selbst wird
   durchsichtig und liegt auf dieser Fläche. */
:root{--sbw:clamp(250px,15vw,320px)}
/* Der Hintergrund des body landet auf der Zeichenfläche des Fensters und wird
   dort NICHT vom `zoom` erfasst – die Leiste selbst schon. Ohne Umrechnung
   wäre der Streifen um den Kehrwert des Zoomfaktors zu breit. `--vhside` ist
   genau dieser Faktor (setzt base.html). */
/* Die Farbfläche ist ein festes Element INNERHALB der Seite – kein
   Fensterhintergrund mehr.
   Zwei Anläufe sind vorher gescheitert, beide aus demselben Grund: Der
   Hintergrund des `body` landet auf der Zeichenfläche des Fensters, und dort
   gelten andere Maßstäbe als im gezoomten Inhalt (`vw`, Zoomfaktor, gemessene
   Breiten – jede Variante passte nur für eine Fenstergröße).
   Ein `position:fixed`-Element hat dieses Problem nicht: Es benutzt dieselbe
   Breitenangabe `--sbw` wie die Leiste selbst, liegt also zwangsläufig genau
   darunter, und `top:0;bottom:0` spannt es über die volle Fensterhöhe, ohne
   dass irgendwo eine Höhe gerechnet werden müsste. */
.app::before{
  content:"";position:fixed;left:0;top:0;bottom:0;
  width:var(--sbw);background:var(--sidebar);
  z-index:0;pointer-events:none;
}
.app.nav-collapsed::before{display:none}
/* Die Leiste liegt auf dieser Fläche und bleibt selbst durchsichtig. */
.sidebar{background:transparent;position:relative;z-index:1}
/* Hier lag die Ursache für das „Scrollen ins Leere":
   style.css setzt `html,body{height:100%}`. Unter `body{zoom:0.66}` rechnet
   Safari diese 100 % gegen die UNskalierte Fensterhöhe – gemessen wurde
   body.clientHeight 1506 px bei 994 px Fensterhöhe. Der Körper ist damit
   anderthalb Fensterhöhen hoch, und genau diesen Überschuss ließ sich die
   Seite scrollen (gemessen: scrollY bis 883), obwohl `html` gar keinen
   Rollbereich meldet – daher die widersprüchlichen Zahlen.
   Die Höhenangabe wird nicht mehr gebraucht: Die durchgehende Farbfläche der
   Seitenleiste kommt seit oben vom Hintergrund des body, der das Fenster
   unabhängig von jeder Höhe füllt. Also Höhe frei geben – dann ist das
   Dokument genau so hoch wie sein Inhalt. */
html,body{height:auto}
.app{min-height:0}
/* Gleiche Falle auf der Anmeldeseite: Sie zentriert über `min-height:100vh`.
   Unter dem Zoom sind das nur zwei Drittel der Fensterhöhe – und rechnet man
   sie hoch, kommt das Scrollen ins Leere zurück. Deshalb gar keine
   Fensterhöhe mehr, sondern Abstand oben und unten. */
.login-body{min-height:0;padding:7vh 0 9vh}
.sidebar{background:transparent}
/* Eingeklappt gibt es keine Spalte – sonst bliebe ein dunkler Streifen. */
/* (der frühere Fensterhintergrund entfällt – siehe .app::before oben) */
/* Beim Drucken ist die Leiste ausgeblendet – die Fläche hätte dort nichts
   verloren. */
@media print{.app::before{display:none}}

/* ---------------------------------------------------------------------
   9. Dialoge, Ablageflächen, Fortschritt
   --------------------------------------------------------------------- */
.modal{background:rgba(15,23,42,.45);backdrop-filter:blur(2px)}
.modal-box{border-radius:14px;box-shadow:0 24px 64px rgba(15,23,42,.28);padding:24px 28px}
.modal-head{font-size:19px;font-weight:650;color:var(--ds-ink);margin-bottom:16px}
.dropzone{border:1.5px dashed #c3cbd9;border-radius:var(--ds-r);background:#fbfcfe;padding:28px 16px}
.dropzone:hover,.dropzone.drag{border-color:var(--ds-primary);background:var(--ds-primary-l)}
.dz-icon{color:var(--ds-primary)}
.file-list li{background:#f6f7fb;border-radius:7px;font-size:13px}
.pbar-fill{background:var(--ds-primary)}
code{background:#f1f3f9;border-radius:5px;color:#3f4a5c}

/* ---------------------------------------------------------------------
   10. Rückmeldungen
   Fehler- und Erfolgsmeldungen sahen bisher je nach Seite anders aus.
   --------------------------------------------------------------------- */
.err,.fehler{background:var(--ds-err-l);color:#9f1239;border:1px solid #f7c9d2;
  border-radius:var(--ds-r-s);padding:10px 13px;font-size:13.5px}
.ok,.erfolg{background:var(--ds-ok-l);color:#065f46;border:1px solid #bfe6d4;
  border-radius:var(--ds-r-s);padding:10px 13px;font-size:13.5px}

/* ---------------------------------------------------------------------
   11. Belegverarbeitung: Rangfolge in der linken Spalte
   Vorher standen sieben gleich aussehende Knöpfe untereinander – man musste
   jeden lesen. Jetzt: Speichern bleibt oben stehen und ist die einzige
   gefüllte Fläche, darunter Gruppen mit leiser Beschriftung, ganz unten
   abgesetzt der Weg zurück und das Löschen.
   --------------------------------------------------------------------- */
.rev-left{gap:8px}
/* Speichern bleibt beim Scrollen sichtbar – die Spalte ist länger als das
   Fenster, und Speichern ist der Knopf, den man am häufigsten sucht. */
.rev-left .b-blue.full:first-child{position:sticky;top:70px;z-index:5;min-height:42px;font-size:14.5px}
.rl-gruppe{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.rl-lbl{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:#9aa4b4;padding-left:2px}
/* Der gefährliche Bereich wird durch eine Linie abgetrennt, nicht durch Farbe. */
.rl-gruppe.gefahr{margin-top:16px;padding-top:14px;border-top:1px solid var(--ds-line)}
.rev-left form{margin:0}
.rev-left .totals{margin-top:14px}

/* Kleine Bildschirme: Knöpfe brauchen Daumenmaß. */
@media(max-width:820px){
  :root{--ds-h:44px}
  .content{padding:16px 14px}
  .b{font-size:14px}
}

/* ---------------------------------------------------------------------
   12. Meldeformulare (An-, Ab-, Wiedereintritts- und Änderungsmeldung)
   Diese Regeln standen bisher als KOPIE in zwei Vorlagen – deshalb sah
   die Abmeldung anders aus als die Anmeldung, obwohl beide dasselbe
   Formular sind. Jetzt stehen sie einmal hier und gelten für alle
   fünf Seiten (Kanzlei und Portal).
   --------------------------------------------------------------------- */
/* Das Formular nutzt die Werte des Design-Systems (design.css) – Farben,
   Rundungen und Bedienhöhen kommen aus den Tokens, nichts wird hier neu
   erfunden. Nur was dieses Formular an Eigenheiten hat (Wochentagsraster,
   Dateiliste), steht als eigene Regel darunter. */
.anm-form{max-width:1000px;margin:0 auto;background:var(--ds-surface,#fff);
  border:1px solid var(--ds-line,#e6e8f0);border-radius:14px;padding:24px 26px 20px;
  box-shadow:var(--ds-sh-l,0 4px 16px rgba(15,23,42,.08))}
.anm-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.anm-head h1{margin:0;color:var(--ds-ink,#0f172a);font-size:22px;font-weight:650;letter-spacing:-.01em}
.anm-sub{font-size:13.5px;color:var(--ds-muted,#64748b);margin-top:5px;max-width:620px;line-height:1.5}
.anm-back{color:var(--ds-primary,var(--ds-primary,#1f4f7a));text-decoration:none;font-weight:600;font-size:14px;white-space:nowrap}
.anm-back:hover{text-decoration:underline}

/* Der wichtigste Satz der Seite: die Anmeldung ist noch keine ÖGK-Meldung. */
.anm-warn{background:var(--ds-warn-l,#fdf3e3);border:1px solid #f0dcb4;
  border-left:3px solid var(--ds-warn,#b45309);color:#7a5713;border-radius:10px;
  padding:13px 15px;font-size:13.5px;line-height:1.55;margin:16px 0 4px}
.anm-warn u{text-underline-offset:2px}

/* Abschnitte: Überschrift plus feine Linie – das gliedert ohne Kästen im Kasten. */
.anm-sec{font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:#94a3b8;font-weight:700;margin:26px 0 12px;padding-bottom:7px;
  border-bottom:1px solid var(--ds-line-s,#eff1f6)}
.anm-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px 16px;align-items:start}
.anm-grid label{display:flex;flex-direction:column;gap:6px;
  font-size:13px;color:var(--ds-text,#334155);font-weight:600}
.anm-wide{grid-column:1 / -1}
.anm-hint{font-weight:400;font-size:12px;color:#9aa4b4}

.anm-grid input,.anm-grid select,.anm-grid textarea{
  min-height:var(--ds-h,38px);padding:9px 12px;
  border:1px solid var(--ds-line,#e6e8f0);border-radius:var(--ds-r-s,8px);
  font-size:15px;background:#fff;color:var(--ds-text,#334155);font-family:inherit;
  width:100%;box-sizing:border-box;font-weight:500;
  transition:border-color .13s,box-shadow .13s}
.anm-grid input:hover,.anm-grid select:hover,.anm-grid textarea:hover{border-color:#cbd5e1}
.anm-grid input:focus,.anm-grid select:focus,.anm-grid textarea:focus{
  outline:none;border-color:var(--ds-primary,var(--ds-primary,#1f4f7a));
  box-shadow:0 0 0 3px rgba(79,70,229,.14)}
.anm-grid input::placeholder,.anm-grid textarea::placeholder{color:#a6aebd;font-weight:400}
/* Eigener Pfeil: das Standard-Auswahlfeld sieht auf jedem System anders aus. */
.anm-grid select{appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;
  padding-right:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}
.anm-grid textarea{resize:vertical;min-height:84px;line-height:1.5}

/* Aktionsleiste: bleibt unten stehen, damit „Übermitteln" immer erreichbar ist. */
.anm-actions{display:flex;justify-content:flex-end;align-items:center;gap:14px;
  margin:26px -26px -20px;padding:14px 26px;
  border-top:1px solid var(--ds-line,#e6e8f0);background:#fcfdff;
  border-radius:0 0 14px 14px;position:sticky;bottom:0}
.anm-pflicht{margin-right:auto;font-size:12.5px;color:#94a3b8}
.anm-cancel{color:var(--ds-muted,#64748b);text-decoration:none;font-weight:600;font-size:14px;
  padding:9px 14px;border-radius:var(--ds-r-s,8px)}
.anm-cancel:hover{background:#f1f5f9;color:var(--ds-text,#334155)}
.anm-submit{background:var(--ds-primary,var(--ds-primary,#1f4f7a));color:#fff;border:0;
  border-radius:var(--ds-r-s,8px);min-height:42px;padding:0 20px;
  font-size:14.5px;font-weight:600;cursor:pointer;font-family:inherit;
  box-shadow:var(--ds-sh,0 1px 3px rgba(15,23,42,.06));transition:background .13s}
.anm-submit:hover{background:var(--ds-primary-d,#4338ca)}
.anm-submit:active{transform:translateY(1px)}

/* Dateien */
.anm-add{margin-top:8px;background:#fff;color:var(--ds-text,#334155);
  border:1px solid var(--ds-line,#e6e8f0);border-radius:var(--ds-r-s,8px);
  padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit}
.anm-add:hover{background:#f8fafc;border-color:#cbd5e1}
#dateiListe input[type=file]{margin-bottom:6px;background:#fff;
  border:1px dashed #c3cbd9;border-radius:var(--ds-r-s,8px);
  padding:9px 11px;font-size:13px;width:100%;box-sizing:border-box;cursor:pointer}
#dateiListe input[type=file]:hover{border-color:var(--ds-primary,var(--ds-primary,#1f4f7a));background:#fbfbff}
.anm-files{font-size:12.5px;color:var(--ds-muted,#64748b);margin:2px 0}
.anm-files span{display:inline-block;background:var(--ds-primary-l,#eef0ff);
  border:1px solid var(--ds-primary-b,#c7cbff);border-radius:999px;
  padding:3px 10px;margin:4px 5px 0 0}

/* Wochenstunden: Gesamt und Wochentage gehören zusammen und rechnen
   sich gegenseitig aus – deshalb eine eigene, abgesetzte Fläche. */
.ws-block{grid-column:1/-1;background:#f8f9fc;border:1px solid var(--ds-line,#e6e8f0);
  border-radius:var(--ds-r,10px);padding:14px 16px}
.ws-lbl{font-size:13px;color:var(--ds-text,#334155);font-weight:600;margin-bottom:10px}
.ws-row{display:flex;gap:22px;align-items:flex-end;flex-wrap:wrap}
.ws-total{display:flex;flex-direction:column;gap:5px;font-size:11.5px;
  color:#8a94a4;font-weight:700;letter-spacing:.05em;text-transform:uppercase;width:104px}
.ws-total input{width:100%;font-size:17px !important;font-weight:700;text-align:center;
  background:#fff !important}
.ws-days{display:flex;gap:7px;flex-wrap:wrap}
.ws-days label{display:flex;flex-direction:column;align-items:center;gap:4px;
  font-size:11.5px;color:#8a94a4;font-weight:700}
.ws-days .ws-d{width:50px;text-align:center;padding:8px 4px !important;
  font-size:14.5px !important;background:#fff !important}
.ws-hint{font-size:12px;color:#9aa4b4;margin-top:10px;line-height:1.5}

@media(max-width:900px){.anm-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.anm-grid{grid-template-columns:1fr}
  .anm-actions{margin-left:-16px;margin-right:-16px;padding:12px 16px}
  .anm-form{padding:16px}}

/* Nur im Ab-/Wiedereintrittsformular: Hinweis bei leerer Liste und die
   Zusammenfassung des gewählten Dienstnehmers. */
.anm-empty{padding:16px 18px;background:#f8f9fc;border:1px solid var(--ds-line);
  border-radius:var(--ds-r);color:var(--ds-muted);font-size:14px}
.anm-dnbox{background:var(--ds-primary-l);border:1px solid var(--ds-primary-b);
  border-radius:var(--ds-r);padding:12px 15px;margin:4px 0 2px;
  font-size:14px;color:#312e81}
.anm-dnbox b{font-weight:700}

/* ---------------------------------------------------------------------
   13. Analyse (Saldenliste, Kontenblatt, Bilanz, G&V, Offene Posten)
   Diese Seiten hatten ein eigenes Blau (var(--ds-primary,#1f4f7a)) – damit gab es im Werkzeug
   drei verschiedene Blautöne. Hier ziehen sie auf die Markenfarbe nach.
   Die Auswahl der Selektoren folgt style.css (dort mit `.content` davor),
   sonst greifen die Regeln nicht.
   --------------------------------------------------------------------- */
.content .an-tab{font-weight:600;color:var(--ds-muted)}
.content .an-tab:hover{background:#f8fafc;color:var(--ds-text)}
.content .an-tab.active{background:transparent;color:var(--ds-primary);
  border-bottom-color:var(--ds-primary)}

/* Steuerleiste: eine weiße Fläche, keine zweite Grauabstufung. */
.content .an-bar{background:#fff;border-color:var(--ds-line);
  border-radius:var(--ds-r);box-shadow:var(--ds-sh);padding:11px 14px}
.content .an-seg-lbl{color:#94a3b8;font-size:10.5px;letter-spacing:.09em}
.content .an-seg-btn{border-radius:8px;color:var(--ds-text)}
.content .an-seg-btn:hover{background:var(--ds-primary-l);color:var(--ds-primary-d)}
.content .an-seg-btn.on{background:var(--ds-primary);color:#fff;
  box-shadow:0 1px 3px rgba(79,70,229,.32)}
.content .seg-track{background:#f1f3f9;border-radius:10px}
.content .seg-track .an-seg-btn.on{background:#fff;color:var(--ds-ink);
  box-shadow:var(--ds-sh)}
.content .an-suche,.content .op-suche{border-color:var(--ds-line);border-radius:var(--ds-r-s)}
.content .an-suche:focus,.content .op-suche:focus{border-color:var(--ds-primary);
  box-shadow:0 0 0 3px rgba(79,70,229,.14)}
.content .an-csv,.an-print{border-radius:var(--ds-r-s);border-color:var(--ds-line);
  color:var(--ds-text);min-height:34px}
.content .an-csv:hover,.an-print:hover{background:#f8fafc;
  border-color:#cbd5e1;color:var(--ds-ink)}

/* Tabellen: Zahlenspalten sind hier die Hauptsache – Konto und Bezeichnung
   treten zurück, Gruppensummen bekommen Gewicht statt Farbe. */
.content .an-tbl,.content .op-tbl{border-color:var(--ds-line);
  border-radius:var(--ds-r);box-shadow:var(--ds-sh)}
.content .an-tbl thead th,.content .op-tbl thead th{
  background:var(--ds-head);color:#5b6779;font-size:11px;font-weight:700;
  letter-spacing:.05em;border-bottom:1px solid var(--ds-line);padding:10px 12px}
.content .an-tbl tbody td{border-bottom:1px solid var(--ds-line-s)}
.content .an-tbl .an-row:hover td{background:#f8f9ff}
.content .an-tbl .an-grp td{background:#f4f6fb;color:var(--ds-ink);
  border-top:1px solid var(--ds-line);border-bottom:1px solid var(--ds-line)}
.content .an-tbl .an-grp td:first-child{box-shadow:inset 3px 0 0 var(--ds-primary)}
.content .an-tbl .an-konto{color:var(--ds-primary);font-weight:600}
.content .an-tbl td.neg,.content .op-tbl td.neg{color:var(--ds-err)}
.content .an-tbl td.muted,.content .op-tbl td.muted{color:#98a2b3}
.content .an-tbl .an-sum td{background:var(--ds-primary-l);color:#312e81;
  border-top:1.5px solid var(--ds-primary-b)}
.content .an-tbl .an-sum td.neg{color:#be123c}