/* Verhindert, dass x-show-Elemente vor der Alpine-Initialisierung kurz aufblitzen. */
[x-cloak] { display: none !important; }

/* ============================================================================================
   Digitally-Done-Markenfarben (aus www.digitally-done.com)

   Die Homepage ist durchgehend dunkel. Hier ist nur die Navigation dunkel, der Arbeitsbereich
   bleibt hell: Buchungstabellen werden stundenlang gelesen, und Belegbilder sind Scans von
   weissem Papier - auf dunklem Grund stehen sie wie Fremdkoerper in der Seite.

   Zum Cyan: auf dunklem Grund ist es der Akzent der Homepage, auf Weiss reicht sein Kontrast
   fuer Text nicht (rund 2,3:1). Deshalb zwei Werte - das Original fuer Flaechen mit dunkler
   Schrift darauf, eine abgedunkelte Variante fuer Links und Text auf hellem Grund.
   ============================================================================================ */
:root {
    --dd-navy-900: #0A0F1F;   /* Seitenhintergrund der Homepage, hier Navbar und Fusszeile */
    --dd-navy-800: #0D1428;   /* Karten auf der Homepage */
    --dd-navy-700: #1E2C48;   /* hellere Flaeche, Trennlinien auf Dunkel */
    --dd-cyan: #00B4FF;       /* Markenakzent - nur als Flaeche mit dunkler Schrift */
    --dd-cyan-tief: #0077B3;  /* abgedunkelt fuer Text und Links auf hellem Grund */
    --dd-cyan-dunkler: #0091CC;
    --dd-grau: #94A3B8;       /* gedaempfter Text auf Dunkel */
    --dd-arbeitsflaeche: #F4F6FA;

    --bs-link-color: var(--dd-cyan-tief);
    --bs-link-hover-color: var(--dd-navy-900);
}

body {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Mit Klassenselektor, sonst gewinnt Bootstraps .bg-light am body - beide !important, und
   eine Klasse schlaegt ein Element. */
body.bg-light {
    background-color: var(--dd-arbeitsflaeche) !important;
}

/* Die .h1-.h6-Klassen gehoeren dazu: Ueberschriften stehen hier meist als <h1 class="h3">, und
   Bootstraps Klassenregel (font-weight 500) wuerde eine reine Elementregel ueberstimmen. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.navbar-brand {
    font-family: "Space Grotesk", Inter, -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* --- Navigation ------------------------------------------------------------------------- */

.navbar.bg-dark {
    background-color: var(--dd-navy-900) !important;
    border-bottom: 1px solid var(--dd-navy-700);
}

.navbar .navbar-brand {
    color: #fff;
    letter-spacing: -0.03em;
}

/* Der Punkt im Wortzeichen der Homepage. */
.navbar .navbar-brand::after {
    content: ".";
    color: var(--dd-cyan);
}

.navbar .nav-link {
    color: var(--dd-grau) !important;
    border-radius: .375rem;
    padding-inline: .6rem;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: #fff !important;
    background-color: var(--dd-navy-700);
}

/* Mit .text-muted im Selektor: die Fusszeile traegt diese Klasse, und Bootstraps dunkles Grau
   darin wuerde sonst auf dem dunklen Grund stehen - gemessen 1,24:1, also unlesbar. */
footer,
footer.text-muted {
    background-color: var(--dd-navy-900);
    color: var(--dd-grau) !important;
}

/* --- Fusszeile -------------------------------------------------------------------------- */
/*
   Sie traegt Zusicherungen an den Mandanten - Standorte und Verschluesselung - und keine
   Randnotiz. Deshalb bekommt sie Struktur statt einer durchlaufenden Zeile: die Marke links,
   die Angaben rechts in drei Gruppen mit Symbolen. Ein Anwender, der wissen will, wo seine
   Buchhaltung liegt, findet es auf einen Blick.

   Auf schmalen Geraeten stapeln sich die Gruppen untereinander und die Marke wandert nach oben.
   Was hier steht, muss stimmen - die Belege dafuer stehen in docs/sicherung.md.
*/
.fibu-fuss {
    background-color: var(--dd-navy-900);
    border-top: 1px solid var(--dd-navy-700);
    padding: 1.15rem 0 1.25rem;
}

.fibu-fuss-inhalt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 2rem;
}

.fibu-fuss-marke {
    font-family: "Space Grotesk", Inter, -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 700;
    letter-spacing: -.02em;
    color: #fff;
    font-size: .98rem;
    white-space: nowrap;
}

/* Der Zusatz tritt zurueck, damit "FIBU" die Marke bleibt und nicht der ganze Satz. */
.fibu-fuss-marke span {
    color: var(--dd-grau);
    font-weight: 400;
    font-size: .86rem;
    letter-spacing: 0;
}

.fibu-fuss-marke::after {
    content: ".";
    color: var(--dd-cyan);
}

.fibu-fuss-punkte {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.6rem;
    margin: 0;
    padding: 0;
    font-size: .8rem;
    line-height: 1.5;
    color: var(--dd-grau);
}

.fibu-fuss-punkte li {
    display: flex;
    align-items: center;
    gap: .45rem;
    white-space: nowrap;
}

.fibu-fuss-punkte i {
    color: var(--dd-cyan);
    font-size: .95rem;
    /* Die Symbole tragen keine Bedeutung, die nicht auch im Text steht - sie sollen den Blick
       fuehren, nicht informieren. Deshalb sind sie im Markup als aria-hidden gesetzt. */
    opacity: .85;
}

@media (max-width: 991.98px) {
    .fibu-fuss-inhalt {
        justify-content: flex-start;
    }
    .fibu-fuss-punkte {
        gap: .3rem 1.1rem;
    }
}

/* --- Schaltflaechen --------------------------------------------------------------------- */

/* Wie auf der Homepage: gefuelltes Cyan mit dunkler Schrift, nicht mit weisser. */
.btn-primary {
    --bs-btn-bg: var(--dd-cyan);
    --bs-btn-border-color: var(--dd-cyan);
    --bs-btn-color: var(--dd-navy-900);
    --bs-btn-hover-bg: var(--dd-cyan-dunkler);
    --bs-btn-hover-border-color: var(--dd-cyan-dunkler);
    --bs-btn-hover-color: var(--dd-navy-900);
    --bs-btn-active-bg: var(--dd-cyan-tief);
    --bs-btn-active-border-color: var(--dd-cyan-tief);
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: var(--dd-cyan);
    --bs-btn-disabled-border-color: var(--dd-cyan);
    --bs-btn-disabled-color: var(--dd-navy-900);
    font-weight: 600;
}

.btn-outline-primary {
    --bs-btn-color: var(--dd-cyan-tief);
    --bs-btn-border-color: var(--dd-cyan-tief);
    --bs-btn-hover-bg: var(--dd-cyan-tief);
    --bs-btn-hover-border-color: var(--dd-cyan-tief);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--dd-cyan-tief);
    --bs-btn-active-border-color: var(--dd-cyan-tief);
    font-weight: 600;
}

.btn-link {
    --bs-btn-color: var(--dd-cyan-tief);
    --bs-btn-hover-color: var(--dd-navy-900);
}

/* Bootstraps Sekundaergrau kommt auf der etwas blaueren Arbeitsflaeche nur noch auf 4,33:1 und
   liegt damit knapp unter dem Grenzwert fuer Fliesstext. Eine Spur dunkler reicht. */
.btn-outline-secondary {
    --bs-btn-color: #566070;
    --bs-btn-border-color: #A7B0BE;
}

/* Gebucht/Bestaetigt bleibt gruen - Erfolg ist eine Zustandsaussage, keine Markenfarbe.
   Als Textfarbe reichen Bootstraps Gruen und Rot auf der etwas blaueren Arbeitsflaeche aber
   nicht mehr (4,19:1 bzw. 4,0:1). Nur die Textvarianten abdunkeln; Flaechen (Badges, Alerts)
   bleiben unberuehrt, dort steht heller Text darauf. */
.text-success { color: #146C43 !important; }
.text-danger { color: #B02A37 !important; }

/* --- Formulare -------------------------------------------------------------------------- */

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--dd-cyan);
    box-shadow: 0 0 0 .2rem rgba(0, 180, 255, .25);
}

.form-check-input:checked {
    background-color: var(--dd-cyan-tief);
    border-color: var(--dd-cyan-tief);
}

/* --- Flaechen --------------------------------------------------------------------------- */

.card {
    border-color: #DEE5EF;
    border-radius: .75rem;
}

.card-header {
    background-color: #fff;
    border-bottom-color: #E6ECF5;
}

.table > thead {
    /* Kopfzeilen in Markennavy statt Bootstrap-Grau - der einzige dunkle Ton im Arbeitsbereich. */
    --bs-table-bg: var(--dd-navy-700);
    --bs-table-color: #fff;
}

.table > thead th {
    font-family: "Space Grotesk", Inter, sans-serif;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Kontoblatt und andere eingebettete Tabellen: dort waere eine dunkle Kopfzeile zu schwer,
   sie sitzen als Beiwerk in einer Karte. */
.card .table > thead {
    --bs-table-bg: #EEF2F8;
    --bs-table-color: var(--dd-navy-900);
}

.progress-bar {
    background-color: var(--dd-cyan-tief);
}

.badge.text-bg-primary {
    background-color: var(--dd-cyan-tief) !important;
}

/* Bootstraps Primaerblau taucht auch als Rahmen- und Textfarbe auf (z.B. .card.border-primary
   auf der Belegliste) - sonst stuenden zwei verschiedene Blautoene nebeneinander. */
.border-primary { border-color: var(--dd-cyan-tief) !important; }
.text-primary { color: var(--dd-cyan-tief) !important; }
.bg-primary { background-color: var(--dd-cyan-tief) !important; }

/* --- Bestehendes ------------------------------------------------------------------------ */

.badge-konfidenz-hoch { background-color: #198754; }
.badge-konfidenz-mittel { background-color: #fd7e14; }
.badge-konfidenz-niedrig { background-color: #6c757d; }

.beleg-vorschau {
    height: calc(100vh - 230px);
    min-height: 500px;
    width: 100%;
    border: 1px solid #dee2e6;
    border-radius: .5rem;
}

img.beleg-vorschau {
    object-fit: contain;
    background-color: #f8f9fa;
}

.table-hover-pointer tbody tr {
    cursor: pointer;
}

/* --- Dashboard: Geschaeftsgang und Arbeitsstand -------------------------------------------- */

.monatsgrafik {
    width: 100%;
    height: auto;
    display: block;
}

.grafik-punkt {
    display: inline-block;
    width: .6rem;
    height: .6rem;
    border-radius: 2px;
    vertical-align: baseline;
}

.kennzahl-titel {
    font-size: .625rem;
    letter-spacing: .06em;
}

/* Betraege untereinander vergleichen zu koennen ist der ganze Zweck dieser Kaesten - dafuer
   muessen die Ziffern gleich breit sein. */
.kennzahl-tabelle {
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
}

.kennzahl-tabelle .kennzahl-ergebnis td {
    border-top: 1px solid #dee2e6;
    padding-top: .15rem;
    font-weight: 600;
}

.arbeitsstand-tabelle {
    font-size: .875rem;
    font-variant-numeric: tabular-nums;
}

.fortschritt-grafik {
    height: 46px;
}

.fortschritt-balken {
    background-color: #cbd5e1;
    border-radius: 1px;
}

.fortschritt-balken.ist-laufend {
    background-color: var(--dd-cyan-tief);
}

.fortschritt-kuerzel {
    font-size: .5625rem;
    color: #adb5bd;
    line-height: 1.4;
}

/* --- Gebuchter Buchungssatz am Beleg ------------------------------------------------------ */
/* Soll- und Habenspalte tragen Zahlen, die verglichen werden - dafuer muessen die Ziffern
   untereinander stehen, sonst zaehlt man Stellen ab. */
.buchungssatz td:nth-child(3),
.buchungssatz td:nth-child(4) {
    font-variant-numeric: tabular-nums;
}

.buchungssatz thead th {
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #6c757d;
    font-weight: 600;
}

/* --- Sichtdarstellung einer XRechnung ---------------------------------------------------- */
/* Eine XRechnung hat kein Belegbild. Diese Ansicht baut aus dem Datensatz eines: weisses Blatt,
   Absender oben links, Positionen in der Mitte, Summen rechts unten - die Anordnung, in der ein
   Buchhalter eine Rechnung liest. Sie sitzt im selben Rahmen wie PDF- und Bildvorschau, deshalb
   scrollt sie in .beleg-vorschau-rahmen statt die Seite zu verlaengern. */

.beleg-vorschau-rahmen {
    overflow-y: auto;
    background-color: #f8f9fa;
    padding: 1rem;
}

.erechnung {
    background: #fff;
    border-radius: .375rem;
    box-shadow: 0 1px 3px rgba(10, 15, 31, .12);
    padding: 2rem 2.25rem;
    font-size: .875rem;
    color: #212529;
}

.erechnung-herkunft {
    font-size: .75rem;
    color: #6c757d;
    border-bottom: 1px solid #e9ecef;
    padding-bottom: .75rem;
    margin-bottom: 1.5rem;
}

.erechnung-kopf {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
}

.erechnung-titel {
    font-family: "Space Grotesk", Inter, sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    color: var(--dd-navy-900);
    white-space: nowrap;
}

.erechnung-parteien {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    margin-top: 2rem;
}

.erechnung-label {
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #6c757d;
    margin-bottom: .25rem;
}

.erechnung-meta th {
    font-weight: 400;
    color: #6c757d;
    padding-right: 1.25rem;
    white-space: nowrap;
}

.erechnung-meta td {
    text-align: right;
    white-space: nowrap;
}

.erechnung-positionen {
    margin-top: 2rem;
    font-size: .8125rem;
}

.erechnung-positionen thead th {
    border-bottom: 2px solid var(--dd-navy-900);
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #6c757d;
    font-weight: 600;
}

.erechnung-ohne-positionen {
    margin-top: 2rem;
    padding: 1rem;
    background-color: #f8f9fa;
    border-radius: .375rem;
}

/* Die Summen stehen rechts, wie auf jeder Rechnung - dort sucht das Auge sie. */
.erechnung-summen {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}

.erechnung-summen table {
    min-width: 20rem;
}

.erechnung-summen th {
    font-weight: 400;
    color: #495057;
    padding: .25rem 1.5rem .25rem 0;
}

.erechnung-summen td {
    padding: .25rem 0;
    white-space: nowrap;
}

.erechnung-summen .erechnung-gesamt th,
.erechnung-summen .erechnung-gesamt td {
    border-top: 2px solid var(--dd-navy-900);
    padding-top: .5rem;
    font-weight: 700;
    color: var(--dd-navy-900);
    font-size: 1rem;
}

.erechnung-zahlung {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #e9ecef;
    color: #495057;
}

.erechnung-profil {
    margin-top: 1rem;
    font-size: .6875rem;
    color: #adb5bd;
    word-break: break-all;
}

/* Drucken: fuer die Handakte gibt es die PDF-Ausgabe, die auch in den Belegbilderexport geht.
   Wer trotzdem aus dem Browser druckt, soll aber den Beleg bekommen und nicht die Bedienleiste. */
/* --- Die Modulkacheln des Mandantenportals ----------------------------------------------- */
/*
   Gebaut am 27.09.2026 fuer /mandanten/{id}/portal. Was hier NICHT steht, ist so wichtig wie
   das, was steht: kein Farbverlauf, kein Leuchten, kein Anheben beim Ueberfahren, keine
   Bewegung. Der Rest dieses Stylesheets hat 0 Gradienten, 0 eigene transition-Regeln und genau
   1 @keyframes - eine Kachel, die sich hebt, waere hier ein Fremdkoerper.

   Der "digital touch", den der Anwender verlangt hat, kommt aus dem WORTZEICHEN: Navy-Quadrat
   mit rund 22 % Rundung, weisses Symbol, Cyan-Punkt unten rechts. Genau die Kombination, die
   das Favicon (static/bilder/favicon.svg) und das ::after hinter "FIBU" schon benutzen. Keine
   Erfindung, sondern das Vorhandene vergroessert.

   Und keine Aenderung an .btn oder .card: der Hausstil ist fuer den Buchhalter am grossen
   Schirm kompakt gebaut (94x btn-sm, 0x btn-lg). Wer .btn global vergroessert, vergroessert
   die ganze Buchhalterseite mit.
*/

/* Die Zielflaeche ist die KACHEL, nicht ein Wort darin - Mindesthoehe fuer den Daumen. */
.modul-kachel {
    min-height: 7.5rem;
}

.modul-zeichen {
    position: relative;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .625rem;
    background-color: var(--dd-navy-900);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.modul-zeichen i {
    font-size: 1.35rem;
    line-height: 1;
}

.modul-zeichen::after {
    content: "";
    position: absolute;
    right: -.125rem;
    bottom: -.125rem;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background-color: var(--dd-cyan);
    border: 2px solid #fff;
}

/* Gedaempft heisst "geht dich derzeit nichts an" - Grau traegt diese Aussage im Haus schon.
   Rot hiesse Fehler, und ein nicht gebuchtes Modul ist kein Fehler des Mandanten. */
.modul-kachel.ist-gedaempft {
    background-color: #FAFBFD;
}

.modul-kachel.ist-gedaempft .modul-zeichen {
    background-color: #E6ECF5;
    color: #8A94A6;
}

.modul-kachel.ist-gedaempft .modul-zeichen::after {
    background-color: #C9D3E2;
}

@media print {
    body { background: #fff !important; }

    .navbar, .erechnung-werkzeuge, footer { display: none !important; }

    .beleg-vorschau-rahmen {
        overflow: visible;
        height: auto;
        min-height: 0;
        border: 0;
        padding: 0;
        background: none;
    }

    .erechnung {
        box-shadow: none;
        padding: 0;
    }
}

/* Kontierungsliste: der Schalter "Gebuchte Zeilen ausblenden" setzt die Klasse auf den
   Tabellencontainer, nicht auf jede Zeile - so kostet das Umschalten nichts. */
.gebuchte-versteckt tr.zeile-gebucht { display: none; }
.nur-wenn-versteckt { display: none; }
.gebuchte-versteckt .nur-wenn-versteckt { display: block; }

/* Kassenbuch: nach einer Zeilenaktion springt die Seite an ihre Zeile zurueck, nicht an den
   Listenanfang. Der Abstand haelt sie von der Oberkante frei - dort sitzt sonst die
   Erfolgsmeldung davor. Die Hervorhebung verglimmt, damit man die Zeile findet, ohne dass die
   Liste dauerhaft bunt bleibt. */
.zeilenanker {
    scroll-margin-top: 6rem;
}
.zeilenanker:target > td {
    animation: zeile-gefunden 2.5s ease-out;
}
@keyframes zeile-gefunden {
    from { background-color: #fff3cd; }
    to { background-color: transparent; }
}

/* Kassenbuch: eine verworfene Zeile bleibt sichtbar, aber sie zaehlt nicht - das muss man
   sehen, ohne die Statusspalte zu lesen. */
.zeile-verworfen td {
    text-decoration: line-through;
}
.zeile-verworfen td:last-child,
.zeile-verworfen td:nth-last-child(2) {
    text-decoration: none;
}

/* Das Auswahlfenster fuer den Sachverhalt zu einem Steuerschluessel (§ 13b).
   Bewusst modal und nicht als weiteres Feld in der Maske: die Angabe ist Pflicht, und ein Feld
   weiter unten wird uebersehen - die Buchung ginge dann mit falscher Kennziffer in die
   Umsatzsteuer-Voranmeldung. Eigene Regeln statt des Bootstrap-Modals, weil dessen JavaScript
   hier nicht gebraucht wird: Alpine schaltet die Sichtbarkeit. */
.sachverhalt-fenster {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, .45);
}

.sachverhalt-kasten {
    background: #fff;
    border-radius: .5rem;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .3);
    padding: 1.25rem 1.5rem;
    width: min(46rem, 100%);
    /* Vierzehn Sachverhalte passen auf kleinen Schirmen nicht ins Bild - das Fenster scrollt,
       die Schaltflaechen bleiben erreichbar. */
    max-height: 85vh;
    overflow-y: auto;
}