/*
   Eine Verwaltungsoberfläche wird gelesen, nicht bewundert. Ruhige Flächen,
   klare Spalten, genug Zeilenabstand für Tabellen, die jemand über Minuten
   durchgeht.
*/

:root {
    --grund: #eef1f5;
    --flaeche: #ffffff;
    --linie: #d6dbe3;
    --text: #1f2933;
    --gedaempft: #6b7784;
    --blau: #1b4b8f;
    --warn: #b26a00;
    --gefahr: #b71c1c;
    --gut: #1b5e20;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--grund);
    color: var(--text);
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.5;
}

.rahmen { min-height: 100vh; display: flex; flex-direction: column; }

header {
    background: var(--blau);
    color: #fff;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.marke { color: #fff; font-size: 18px; font-weight: 700; text-decoration: none; }

.wer { display: flex; align-items: center; gap: 14px; font-size: 14px; }

.marke-hersteller {
    background: var(--warn);
    border-radius: 4px;
    padding: 3px 9px;
    font-size: 12px;
    font-weight: 600;
}

main { flex: 1; padding: 24px; max-width: 1180px; width: 100%; margin: 0 auto; }

h1 { font-size: 24px; margin: 0 0 4px; }
h2 { font-size: 18px; margin: 28px 0 10px; }

.unterzeile { color: var(--gedaempft); margin: 0 0 20px; }

.karte {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: 8px;
    padding: 18px 20px;
    margin-bottom: 18px;
}

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--linie); vertical-align: top; }
th { font-size: 13px; color: var(--gedaempft); font-weight: 600; }
tr:last-child td { border-bottom: none; }
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; }

a { color: var(--blau); }

.leer { color: var(--gedaempft); padding: 14px 0; }

/* Formulare */
label { display: block; font-size: 13px; color: var(--gedaempft); margin-bottom: 4px; }
input[type=text], input[type=email], input[type=password], input[type=date], select, textarea {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--linie);
    border-radius: 6px;
    font-size: 15px;
    font-family: inherit;
    background: #fff;
    color: inherit;
}
.feld { margin-bottom: 14px; }
.reihe { display: flex; gap: 14px; flex-wrap: wrap; }
.reihe > .feld { flex: 1 1 190px; }

button {
    font-family: inherit;
    font-size: 15px;
    padding: 9px 18px;
    border: none;
    border-radius: 6px;
    background: var(--blau);
    color: #fff;
    cursor: pointer;
}
button.schlicht { background: transparent; color: inherit; text-decoration: underline; padding: 0; }
button.zweit { background: #e4e8ed; color: var(--text); }
button.gefahr { background: #fdecea; color: var(--gefahr); }
button:disabled { opacity: .5; cursor: default; }

/* Hinweise */
.hinweis { border-radius: 6px; padding: 12px 14px; margin-bottom: 16px; }
.hinweis.warn { background: #fff4e5; color: #8a5200; }
.hinweis.gefahr { background: #fdecea; color: var(--gefahr); }
.hinweis.gut { background: #e8f3ea; color: var(--gut); }

/* inline-block und ein eigener Abstand: Stehen mehrere Merker nebeneinander,
   verschmelzen sie sonst zu einem Wort — „kein Rabattfreier Preis“. */
.merker {
    display: inline-block;
    font-size: 12px;
    border-radius: 4px;
    padding: 2px 8px;
    margin: 1px 4px 1px 0;
}
.merker.offen { background: #fff4e5; color: #8a5200; }
.merker.aus { background: #eceff1; color: var(--gedaempft); }
.merker.aktiv { background: #e8f3ea; color: var(--gut); }

/* Anmeldung */
.anmeldung { max-width: 380px; margin: 8vh auto; }

/* Navigation innerhalb eines Mandanten */
nav.reiter { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 20px; }
nav.reiter a {
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    text-decoration: none;
    font-size: 14px;
}
nav.reiter a.hier { background: var(--blau); color: #fff; border-color: var(--blau); }

/* Die zweite Leiste trägt die Stammdaten. Sie steht enger am Inhalt und ist
   zurückgenommen — sie gliedert, sie konkurriert nicht mit der ersten. */
nav.reiter.stamm { margin: -12px 0 20px; padding: 10px 0 0; border-top: 1px solid var(--linie); }
nav.reiter.stamm a { background: #fff; font-size: 13px; padding: 6px 12px; }
nav.reiter.stamm a.hier { background: var(--blau); color: #fff; }

/* break-all gilt nur dort, wo es gebraucht wird: bei einem Token, das sonst
   die Spalte sprengt. Ein Vorgangsname wie „vendor-access.grant“ ist kurz und
   soll am Bindestrich brechen oder gar nicht — mitten im Wort getrennt ist er
   in einer Protokolltabelle kaum wiederzuerkennen. */
code { font-size: 13px; background: #f4f7fa; padding: 2px 6px; border-radius: 4px; }

td code { white-space: nowrap; }

/* Ein Filial-Token oder ein Anfangskennwort steht in einem Hinweis und ist zu
   lang für jede Zeile — hier darf umgebrochen werden, wo es nötig ist. */
.hinweis code { word-break: break-all; }