/* ---------------------------------------------------------------------------
   Rechnungs-Finder – Vanilla CSS, kein Framework.
   --------------------------------------------------------------------------- */

:root {
    --farbe-text: #1c2126;
    --farbe-text-schwach: #5d6b7a;
    --farbe-rand: #dbe1e8;
    --farbe-rand-stark: #b9c3ce;
    --farbe-flaeche: #ffffff;
    --farbe-hintergrund: #f4f6f9;
    --farbe-akzent: #1f5f8b;
    --farbe-akzent-hell: #e8f1f8;
    --farbe-gut: #1d7a4c;
    --farbe-gut-hell: #e6f4ec;
    --farbe-warn: #9a6206;
    --farbe-warn-hell: #fdf3e0;
    --farbe-schlecht: #a32b2b;
    --farbe-schlecht-hell: #fbeaea;
    --radius: 6px;
    --schatten: 0 1px 2px rgba(28, 33, 38, .08), 0 4px 12px rgba(28, 33, 38, .04);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--farbe-text);
    background: var(--farbe-hintergrund);
}

a { color: var(--farbe-akzent); }

code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .88em;
    background: rgba(28, 33, 38, .06);
    padding: .1em .35em;
    border-radius: 3px;
}

/* --- Kopfzeile ----------------------------------------------------------- */

.topbar {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0 1.5rem;
    height: 56px;
    background: var(--farbe-flaeche);
    border-bottom: 1px solid var(--farbe-rand);
    position: sticky;
    top: 0;
    z-index: 10;
}

.brand {
    font-weight: 650;
    font-size: 1.05rem;
    text-decoration: none;
    color: var(--farbe-text);
}

.topbar nav { display: flex; gap: .35rem; margin-right: auto; }

.topbar nav a {
    padding: .4rem .7rem;
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--farbe-text-schwach);
}

.topbar nav a:hover { background: var(--farbe-hintergrund); color: var(--farbe-text); }
.topbar nav a.active { background: var(--farbe-akzent-hell); color: var(--farbe-akzent); font-weight: 550; }

.logout, .local-note { font-size: .85rem; color: var(--farbe-text-schwach); }
.local-note { border: 1px dashed var(--farbe-rand-stark); padding: .15rem .5rem; border-radius: var(--radius); cursor: help; }

/* --- Grundgerüst --------------------------------------------------------- */

main { max-width: 1280px; margin: 0 auto; padding: 1.75rem 1.5rem 3rem; }

h1 { font-size: 1.5rem; margin: 0 0 .35rem; }
h2 { font-size: 1.1rem; margin: 2rem 0 .75rem; }
h3 { font-size: .95rem; margin: 0 0 .5rem; }

.untertitel { color: var(--farbe-text-schwach); margin: 0 0 1.5rem; }

footer {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.5rem;
    border-top: 1px solid var(--farbe-rand);
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: .82rem;
    color: var(--farbe-text-schwach);
}

/* --- Karten -------------------------------------------------------------- */

.karte {
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius);
    padding: 1.25rem;
    box-shadow: var(--schatten);
    margin-bottom: 1.25rem;
}

.karte > h2:first-child, .karte > h3:first-child { margin-top: 0; }

.kennzahlen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.kennzahl {
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius);
    padding: .9rem 1rem;
}

.kennzahl .wert { font-size: 1.6rem; font-weight: 600; line-height: 1.2; }
.kennzahl .bezeichnung { font-size: .8rem; color: var(--farbe-text-schwach); }
.kennzahl.hinweis { border-color: var(--farbe-warn); background: var(--farbe-warn-hell); }

/* --- Tabellen ------------------------------------------------------------ */

/* Der Rahmen scrollt waagerecht, wenn die Tabelle breiter ist als die Seite.
   display:block statt des Standardverhaltens verhindert, dass der Container
   in Safari auf wenige Pixel zusammenfällt – dort kollabiert ein
   Scroll-Container mit Tabelleninhalt sonst gelegentlich auf Höhe null. */
.tabelle-rahmen {
    display: block;
    width: 100%;
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius);
    overflow-x: auto;
    overflow-y: hidden;
    box-shadow: var(--schatten);
}

/* Sehr lange Listen bekommen zusätzlich eine eigene Höhe zum Blättern. */
.tabelle-rahmen.hoch {
    max-height: 70vh;
    overflow-y: auto;
}

table { width: 100%; min-width: 100%; border-collapse: collapse; font-size: .9rem; }

th, td { padding: .6rem .8rem; text-align: left; border-bottom: 1px solid var(--farbe-rand); vertical-align: top; }

/* Kein position:sticky auf den Kopfzeilen: in Verbindung mit einem
   Scroll-Container führt das in Safari dazu, dass die gesamte Tabelle nicht
   mehr dargestellt wird. Der Gewinn wiegt das Risiko nicht auf. */
th {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--farbe-text-schwach);
    font-weight: 600;
    background: #fafbfc;
    white-space: nowrap;
}

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #fafbfc; }

/* Der Datensatz, der gerade im Formular darunter bearbeitet wird. */
tbody tr.hervorgehoben { background: var(--farbe-akzent-hell); }
tbody tr.hervorgehoben:hover { background: var(--farbe-akzent-hell); }

.fehlertext { color: var(--farbe-schlecht); margin-top: .35rem; max-width: 340px; }

td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.schmal { white-space: nowrap; }
.schwach { color: var(--farbe-text-schwach); }
.klein { font-size: .82rem; }

/* --- Statusmarken -------------------------------------------------------- */

.marke {
    display: inline-block;
    padding: .12rem .5rem;
    border-radius: 20px;
    font-size: .78rem;
    font-weight: 550;
    white-space: nowrap;
    border: 1px solid transparent;
}

.marke.ok    { background: var(--farbe-gut-hell);      color: var(--farbe-gut);      border-color: #b6dfc8; }
.marke.warn  { background: var(--farbe-warn-hell);     color: var(--farbe-warn);     border-color: #f0d9a8; }
.marke.bad   { background: var(--farbe-schlecht-hell); color: var(--farbe-schlecht); border-color: #efc4c4; }
.marke.link  { background: var(--farbe-akzent-hell);   color: var(--farbe-akzent);   border-color: #bcd7e9; }
.marke.muted { background: #eef1f4;                    color: var(--farbe-text-schwach); border-color: var(--farbe-rand); }

/* --- Schaltflächen ------------------------------------------------------- */

.knopf, button, input[type="submit"] {
    display: inline-block;
    padding: .45rem .9rem;
    border: 1px solid var(--farbe-rand-stark);
    border-radius: var(--radius);
    background: var(--farbe-flaeche);
    color: var(--farbe-text);
    font: inherit;
    font-size: .88rem;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.knopf:hover, button:hover { background: var(--farbe-hintergrund); border-color: #9aa8b6; }

.knopf.haupt, button.haupt {
    background: var(--farbe-akzent);
    border-color: var(--farbe-akzent);
    color: #fff;
    font-weight: 550;
}

.knopf.haupt:hover, button.haupt:hover { background: #17496b; border-color: #17496b; }

.knopf.gut, button.gut { background: var(--farbe-gut); border-color: var(--farbe-gut); color: #fff; font-weight: 550; }
.knopf.gut:hover, button.gut:hover { background: #156038; }

.knopf.gefahr, button.gefahr { color: var(--farbe-schlecht); border-color: #e0b4b4; }
.knopf.gefahr:hover, button.gefahr:hover { background: var(--farbe-schlecht-hell); }

.knopf.klein, button.klein { padding: .25rem .6rem; font-size: .82rem; }

.knopfreihe { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

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

label { display: block; font-size: .85rem; font-weight: 550; margin-bottom: .25rem; }

input[type="text"], input[type="password"], input[type="number"], input[type="date"],
input[type="file"], select, textarea {
    width: 100%;
    padding: .45rem .6rem;
    border: 1px solid var(--farbe-rand-stark);
    border-radius: var(--radius);
    font: inherit;
    font-size: .9rem;
    background: var(--farbe-flaeche);
    color: var(--farbe-text);
}

input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--farbe-akzent);
    outline-offset: -1px;
    border-color: var(--farbe-akzent);
}

.feld { margin-bottom: .9rem; }
.feld .hilfe { font-size: .8rem; color: var(--farbe-text-schwach); margin-top: .2rem; font-weight: 400; }

.feldgruppe { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 1rem; }

.ankreuz { display: flex; align-items: center; gap: .5rem; font-weight: 400; }
.ankreuz input { width: auto; }

/* --- Meldungen ----------------------------------------------------------- */

.flash {
    padding: .7rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1.25rem;
    border: 1px solid;
}

.flash-success { background: var(--farbe-gut-hell);      border-color: #b6dfc8; color: var(--farbe-gut); }
.flash-error   { background: var(--farbe-schlecht-hell); border-color: #efc4c4; color: var(--farbe-schlecht); }
.flash-info    { background: var(--farbe-akzent-hell);   border-color: #bcd7e9; color: var(--farbe-akzent); }

.hinweiskasten {
    background: var(--farbe-warn-hell);
    border: 1px solid #f0d9a8;
    border-radius: var(--radius);
    padding: .8rem 1rem;
    margin-bottom: 1.25rem;
    font-size: .9rem;
}

.leer { text-align: center; padding: 3rem 1rem; color: var(--farbe-text-schwach); }

/* --- Filterleiste -------------------------------------------------------- */

.filter { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; }

.filter a {
    padding: .3rem .7rem;
    border: 1px solid var(--farbe-rand);
    border-radius: 20px;
    background: var(--farbe-flaeche);
    text-decoration: none;
    color: var(--farbe-text-schwach);
    font-size: .85rem;
}

.filter a:hover { border-color: var(--farbe-rand-stark); }
.filter a.aktiv { background: var(--farbe-akzent); border-color: var(--farbe-akzent); color: #fff; font-weight: 550; }
.filter a .anzahl { opacity: .75; margin-left: .3rem; }

/* --- Prüfansicht --------------------------------------------------------- */

.pruefung { display: grid; grid-template-columns: 340px 1fr; gap: 1.25rem; align-items: start; }

@media (max-width: 900px) {
    .pruefung { grid-template-columns: 1fr; }
}

.gesucht dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .3rem .8rem; font-size: .9rem; }
.gesucht dt { color: var(--farbe-text-schwach); }
.gesucht dd { margin: 0; font-weight: 550; }

.treffer {
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius);
    background: var(--farbe-flaeche);
    margin-bottom: 1rem;
    box-shadow: var(--schatten);
    overflow: hidden;
}

.treffer.uebernommen { border-color: var(--farbe-gut); border-width: 2px; }

.treffer-kopf {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--farbe-rand);
    background: #fafbfc;
    flex-wrap: wrap;
}

.treffer-kopf .sicherheit { font-size: 1.15rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.treffer-kopf .titel { font-weight: 550; margin-right: auto; }

.treffer-inhalt { padding: 1rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

@media (max-width: 700px) { .treffer-inhalt { grid-template-columns: 1fr; } }

.treffer dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .25rem .7rem; font-size: .88rem; }
.treffer dt { color: var(--farbe-text-schwach); }
.treffer dd { margin: 0; }

.begruendung {
    padding: .6rem 1rem;
    background: #fafbfc;
    border-top: 1px solid var(--farbe-rand);
    font-size: .82rem;
    color: var(--farbe-text-schwach);
}

.regel { display: inline-block; margin-right: .5rem; white-space: nowrap; }
.regel.plus  { color: var(--farbe-gut); }
.regel.minus { color: var(--farbe-schlecht); }

.treffer-aktionen {
    display: flex;
    gap: .5rem;
    padding: .8rem 1rem;
    border-top: 1px solid var(--farbe-rand);
    flex-wrap: wrap;
}

.vorschau { width: 100%; height: 70vh; border: 1px solid var(--farbe-rand); border-radius: var(--radius); background: #fff; }

.portal-link {
    display: block;
    padding: .7rem 1rem;
    background: var(--farbe-akzent-hell);
    border: 1px solid #bcd7e9;
    border-radius: var(--radius);
    word-break: break-all;
    font-size: .88rem;
}

/* --- Zuordnung der Spalten ---------------------------------------------- */

.vorschau-tabelle { font-size: .82rem; }
.vorschau-tabelle td { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vorschau-tabelle thead th { background: var(--farbe-akzent-hell); position: static; }

.spaltenwahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .9rem; margin-bottom: 1.25rem; }

/* --- Anmeldung ----------------------------------------------------------- */
/* Bewusst nackt: kein Kopfbereich, keine Fußzeile, kein Anwendungsname. */

body.nackt {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1.5rem;
}

.anmeldung {
    width: 100%;
    max-width: 320px;
}

.anmeldung form {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--schatten);
}

.anmeldung input[type="password"] { text-align: center; letter-spacing: .1em; }
.anmeldung button { width: 100%; }

.anmeldung .fehler {
    margin: 0;
    font-size: .85rem;
    color: var(--farbe-schlecht);
    text-align: center;
}

/* Für Bildschirmleser sichtbar, optisch entfernt. */
.verborgen {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}