/* ---------------------------------------------------------------------------
   simple-asset - neutrales Weisslabel-Design.

   Alle Marken-Werte stehen als Variablen ganz oben. Beim Kunden reicht es,
   diesen Block zu ueberschreiben (eigene Datei nach sam.css einbinden), um
   Farben, Logo-Schrift und Rundungen anzupassen - ohne eine Zeile Code.
   Absichtlich kein CSS-Framework: weniger Gewicht, keine fremde Optik.
--------------------------------------------------------------------------- */
:root {
    --farbe-akzent: #2f5d8a;
    --farbe-akzent-dunkel: #24486b;
    --farbe-akzent-hell: #eaf1f8;

    --farbe-text: #1f2429;
    --farbe-text-leise: #616b76;
    --farbe-linie: #dde2e8;
    --farbe-flaeche: #ffffff;
    --farbe-hintergrund: #f5f7f9;

    --farbe-ok: #1f7a4d;
    --farbe-warnung: #9a6700;
    --farbe-fehler: #a6282d;
    --farbe-ok-hell: #e8f5ee;
    --farbe-warnung-hell: #fdf5e2;
    --farbe-fehler-hell: #fbeaea;

    --radius: 6px;
    --abstand: 16px;
    --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --schrift-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--schrift);
    font-size: 15px;
    line-height: 1.5;
    color: var(--farbe-text);
    background: var(--farbe-hintergrund);
}

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

/* -- Kopfzeile und Navigation ---------------------------------------------- */
.kopf {
    background: var(--farbe-flaeche);
    border-bottom: 1px solid var(--farbe-linie);
    position: sticky;
    top: 0;
    z-index: 10;
}
.kopf-innen {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--abstand);
    display: flex;
    align-items: center;
    gap: var(--abstand);
    min-height: 56px;
    flex-wrap: wrap;
}
.marke {
    font-weight: 600;
    letter-spacing: .01em;
    text-decoration: none;
    color: var(--farbe-text);
    white-space: nowrap;
}
.nav { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.nav a {
    padding: 6px 10px;
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--farbe-text-leise);
}
.nav a:hover { background: var(--farbe-akzent-hell); color: var(--farbe-akzent-dunkel); }
.nav a.aktiv { background: var(--farbe-akzent-hell); color: var(--farbe-akzent-dunkel); font-weight: 600; }
/* Noch nicht gebaute Bereiche sichtbar, aber erkennbar inaktiv (wie im ERP). */
.nav span.spaeter { padding: 6px 10px; color: #aab3bc; cursor: default; }

.benutzer-block { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.benutzer-block .rolle { color: var(--farbe-text-leise); }

/* -- Layout ---------------------------------------------------------------- */
.inhalt { max-width: 1200px; margin: 0 auto; padding: 24px var(--abstand) 64px; }
.seitentitel { display: flex; align-items: baseline; justify-content: space-between; gap: var(--abstand); flex-wrap: wrap; margin-bottom: var(--abstand); }
.seitentitel h1 { font-size: 22px; margin: 0; }
.hinweis-leise { color: var(--farbe-text-leise); font-size: 14px; }

.karte {
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius);
    padding: var(--abstand);
    margin-bottom: var(--abstand);
}
.karte h2 { font-size: 16px; margin: 0 0 12px; }

.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: var(--abstand); }
.kachel {
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius);
    padding: 14px 16px;
    text-decoration: none;
    color: inherit;
    display: block;
}
.kachel:hover { border-color: var(--farbe-akzent); }
.kachel .wert { font-size: 28px; font-weight: 600; line-height: 1.1; }
.kachel .titel { color: var(--farbe-text-leise); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }

/* -- Tabellen -------------------------------------------------------------- */
.tabellen-rahmen { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--farbe-linie); vertical-align: top; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--farbe-text-leise); font-weight: 600; white-space: nowrap; }
tbody tr:hover { background: var(--farbe-akzent-hell); }
td.zahl { text-align: right; font-variant-numeric: tabular-nums; }
.mono { font-family: var(--schrift-mono); font-size: 13px; }

/* -- Formulare ------------------------------------------------------------- */
.feld { margin-bottom: 14px; }
.feld label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=search], select, textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius);
    font: inherit;
    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); }
textarea { min-height: 90px; resize: vertical; }
.feld-fehler { color: var(--farbe-fehler); font-size: 13px; margin-top: 4px; }
.feld-hinweis { color: var(--farbe-text-leise); font-size: 13px; margin-top: 4px; }
.feld-gruppe { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 var(--abstand); }

.knopf {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid var(--farbe-akzent);
    border-radius: var(--radius);
    background: var(--farbe-akzent);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
.knopf:hover { background: var(--farbe-akzent-dunkel); color: #fff; }
.knopf.leise { background: var(--farbe-flaeche); color: var(--farbe-text); border-color: var(--farbe-linie); }
.knopf.leise:hover { background: var(--farbe-hintergrund); color: var(--farbe-text); }
.knopf.gefahr { background: var(--farbe-flaeche); color: var(--farbe-fehler); border-color: var(--farbe-fehler); }
.knopf.gefahr:hover { background: var(--farbe-fehler); color: #fff; }
.knopfleiste { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* -- Meldungen ------------------------------------------------------------- */
.meldung { padding: 10px 14px; border-radius: var(--radius); margin-bottom: 12px; border: 1px solid transparent; }
.meldung.success { background: var(--farbe-ok-hell); border-color: var(--farbe-ok); }
.meldung.error { background: var(--farbe-fehler-hell); border-color: var(--farbe-fehler); }
.meldung.info { background: var(--farbe-akzent-hell); border-color: var(--farbe-akzent); }
.meldung.warning { background: var(--farbe-warnung-hell); border-color: var(--farbe-warnung); }

.marke-status { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid var(--farbe-linie); }
.marke-status.aktiv { background: var(--farbe-ok-hell); border-color: var(--farbe-ok); color: var(--farbe-ok); }
.marke-status.in_vorbereitung { background: var(--farbe-warnung-hell); border-color: var(--farbe-warnung); color: var(--farbe-warnung); }
.marke-status.archiviert { background: var(--farbe-hintergrund); color: var(--farbe-text-leise); }

/* -- Anmeldung ------------------------------------------------------------- */
.login-seite { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: var(--abstand); }
.login-karte { width: 100%; max-width: 380px; background: var(--farbe-flaeche); border: 1px solid var(--farbe-linie); border-radius: var(--radius); padding: 28px; }
.login-karte h1 { font-size: 20px; margin: 0 0 4px; }
.login-karte .unterzeile { color: var(--farbe-text-leise); font-size: 14px; margin: 0 0 20px; }

/* -- Rechte-Auswahl -------------------------------------------------------- */
.rechte-gruppe { border: 1px solid var(--farbe-linie); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 12px; }
.rechte-gruppe h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--farbe-text-leise); margin: 0 0 8px; }
.rechte-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 4px 16px; }
.rechte-liste label { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; font-weight: normal; }
.rechte-liste code { font-family: var(--schrift-mono); font-size: 12px; color: var(--farbe-text-leise); }

/* -- Filterleiste ---------------------------------------------------------- */
.filter { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.filter .feld { margin-bottom: 0; min-width: 160px; }

/* -- Seitenblaetterung ----------------------------------------------------- */
.blaettern { display: flex; gap: 8px; align-items: center; margin-top: 12px; font-size: 14px; }

/* -- Fehlerseiten ---------------------------------------------------------- */
.fehlerseite { text-align: center; padding: 64px var(--abstand); }
.fehlerseite .code { font-size: 44px; font-weight: 600; color: var(--farbe-text-leise); }

@media (max-width: 640px) {
    .kopf-innen { min-height: auto; padding-top: 8px; padding-bottom: 8px; }
    .nav { order: 3; width: 100%; }
    .inhalt { padding-top: 16px; }
}