/* Grundfarben: gedecktes Anthrazit + gedämpftes Bernstein als Arbeitsfarbe.
   Bewusst kein grelles Taxi-Gelb -- das Tool soll wie ein ruhiges
   Werkzeug für den Schreibtisch wirken, nicht wie eine Marketingseite. */
:root {
    --anthrazit: #1c2530;
    --anthrazit-hell: #2c3948;
    --bernstein: #b5793a;
    --bernstein-dunkel: #96602a;
    --hintergrund: #f6f4f0;
    --flaeche: #ffffff;
    --linie: #dedad2;
    --text: #262320;
    --text-schwach: #756f66;
    --rot: #a23e3e;
    --gruen: #3d7a4f;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--hintergrund);
    color: var(--text);
    line-height: 1.5;
}

h1, h2 {
    font-weight: 600;
    letter-spacing: -0.01em;
}

h1 { font-size: 1.6rem; margin: 0 0 1.25rem; }
h2 { font-size: 1.1rem; margin: 2rem 0 0.75rem; color: var(--anthrazit-hell); }

/* Login */
.login-seite {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--anthrazit);
}

.login-box {
    background: var(--flaeche);
    padding: 2.5rem;
    border-radius: 4px;
    width: 320px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

.login-box form { display: flex; flex-direction: column; gap: 0.35rem; }
.login-box label { font-size: 0.85rem; color: var(--text-schwach); margin-top: 0.5rem; }

/* Navigation */
.hauptnav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: var(--anthrazit);
    padding: 0 2rem;
    height: 56px;
}

.hauptnav a {
    color: #d9d4c8;
    text-decoration: none;
    font-size: 0.95rem;
}

.hauptnav a:hover { color: #fff; }
.nav-rechts { margin-left: auto; }

/* Layout */
.inhalt {
    max-width: 900px;
    margin: 2rem auto;
    padding: 0 1.5rem;
}

/* Kacheln auf dem Dashboard */
.kachel-reihe { display: flex; gap: 1rem; }

.kachel {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: 4px;
    padding: 1.25rem 1.5rem;
    text-decoration: none;
    color: var(--text);
    min-width: 140px;
}

.kachel-zahl {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--bernstein-dunkel);
}

.kachel-label { color: var(--text-schwach); font-size: 0.9rem; }

/* Formulare */
input, select, button {
    font: inherit;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--linie);
    border-radius: 3px;
}

/* Auf/Ab-Pfeile bei Zahlenfeldern ausblenden (Betrag, km-Stand, Liter, ...) */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] {
    -moz-appearance: textfield;
}

.formular-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

.formular-klein { margin-top: 0.5rem; }

button {
    background: var(--bernstein);
    color: #fff;
    border: none;
    cursor: pointer;
}

button:hover { background: var(--bernstein-dunkel); }

.button-gefahr {
    background: transparent;
    color: var(--rot);
    border: 1px solid var(--rot);
    margin-top: 0.4rem;
}

.button-gefahr:hover { background: var(--rot); color: #fff; }

/* Tabelle */
.tabelle {
    width: 100%;
    border-collapse: collapse;
    background: var(--flaeche);
    margin-top: 0.5rem;
}

.tabelle th, .tabelle td {
    text-align: left;
    padding: 0.6rem 0.7rem;
    border-bottom: 1px solid var(--linie);
    vertical-align: top;
}

.tabelle th {
    font-size: 0.8rem;
    text-transform: none;
    color: var(--text-schwach);
    font-weight: 600;
}

/* Kennzeichen wie auf einem echten Nummernschild absetzen */
.tabelle td:first-child {
    font-family: "Courier New", monospace;
    letter-spacing: 0.03em;
}

.hinweis-leer { color: var(--text-schwach); font-style: italic; }

.warnung-zelle { color: var(--bernstein-dunkel); font-weight: 600; }

.warnung-zeile td:first-child { border-left: 3px solid var(--rot); padding-left: 0.55rem; }

.zeile-bestaetigt { background: #eef6ef; color: var(--gruen); }

.feld-label {
    display: flex;
    flex-direction: column;
    font-size: 0.75rem;
    color: var(--text-schwach);
    gap: 0.15rem;
}
.fehlermeldung { color: var(--rot); }
.erfolgsmeldung { color: var(--gruen); }

details summary {
    cursor: pointer;
    color: var(--bernstein-dunkel);
    font-size: 0.9rem;
}