/* M-ONE Fahrschulverwaltung, V0.1 - 2026 | $Id: basis.css 1 27.09.2026 @fs$
   Gemeinsame Grundlage fuer alle Bereiche: Schriften (selbst gehostet, siehe
   assets/fonts/), Farb-Variablen (Standard nach Lastenheft, online per
   Branding im Backend ueberschreibbar - siehe includes/funk.php,
   einstellung()/einstellung_setzen()). Bereichseigenes Aussehen liegt in
   <bereich>/assets/css/, nicht hier. */

@font-face {
    font-family: 'Montserrat';
    src: url('/assets/fonts/Montserrat-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('/assets/fonts/Montserrat-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('/assets/fonts/Montserrat-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('/assets/fonts/Montserrat-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('/assets/fonts/Montserrat-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto Slab';
    src: url('/assets/fonts/RobotoSlab-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* M-ONE, hell (Lastenheft Kapitel 10) */
    --haupt: #000E70;
    --haupt-hover: #000A52;
    --haupt-hell: #E9EBF7;
    --hintergrund: #F6F7FB;
    --flaeche: #FFFFFF;
    --linie: #E1E3EA;
    --linie-stark: #D1D1D1;
    --text: #333333;
    --text-gedaempft: #5E6470;
    --warnung: #8A4600;
    --warnung-flaeche: #FFF1E0;
    --fehler: #9E1F17;
    --fehler-flaeche: #FDE8E7;
    --erfolg: #1F6B45;
    --erfolg-flaeche: #E6F4EC;
    --schrift-text: 'Montserrat', system-ui, sans-serif;
    --schrift-titel: 'Roboto Slab', Georgia, serif;
}

* { box-sizing: border-box; }

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

h1, h2, h3 { font-family: var(--schrift-titel); font-weight: 700; margin: 0 0 .5em; }

a { color: var(--haupt); }
a:hover { color: var(--haupt-hover); }

button, input, select, textarea { font-family: inherit; font-size: 1rem; }

.meldung { border-radius: 8px; padding: .75em 1em; margin: 0 0 1em; }
.meldung-fehler { background: var(--fehler-flaeche); color: var(--fehler); }
.meldung-erfolg { background: var(--erfolg-flaeche); color: var(--erfolg); }

.knopf {
    display: inline-flex; align-items: center; gap: .4em;
    border-radius: 8px; border: 1px solid var(--linie-stark);
    background: var(--flaeche); color: var(--text);
    padding: .6em 1.2em; font-weight: 600; cursor: pointer; text-decoration: none;
}
.knopf-primaer { background: var(--haupt); border-color: var(--haupt); color: #fff; }
.knopf-primaer:hover { background: var(--haupt-hover); border-color: var(--haupt-hover); }

/* Formulare (Firstsetup, Backend - gemeinsame Klassen, damit nichts doppelt gepflegt wird) */
.fs-formular { display: flex; flex-direction: column; gap: 16px; }
.fs-feld { display: flex; flex-direction: column; gap: 6px; }
.fs-feld label { font-size: .85rem; color: var(--text-gedaempft); font-weight: 600; }
.fs-feld input[type="text"], .fs-feld input[type="email"], .fs-feld input[type="password"],
.fs-feld input[type="number"], .fs-feld select {
    padding: 10px 12px; border: 1px solid var(--linie-stark); border-radius: 8px; background: var(--flaeche);
}
.fs-zeile { display: flex; gap: 16px; flex-wrap: wrap; }
.fs-zeile > .fs-feld { flex: 1 1 200px; }
.fs-kontrollkaestchen { display: flex; align-items: center; gap: 8px; font-size: .9rem; }
.fs-aktionen { display: flex; justify-content: flex-end; gap: 12px; margin-top: 8px; }

/* Tab-Gruppe (html/allgemein/tabgruppe*.html, assets/js/tabgruppe.js) */
.tabgruppe-reiter { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--linie); margin-bottom: 20px; }
.tab-reiter {
    font: inherit; cursor: pointer; background: none; border: none; border-bottom: 3px solid transparent;
    padding: 10px 16px; color: var(--text-gedaempft); font-weight: 600;
}
.tab-reiter:hover { color: var(--haupt); }
.tab-reiter.aktiv { color: var(--haupt); border-bottom-color: var(--haupt); }
.tab-zahl { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--haupt-hell); color: var(--haupt); font-size: .78rem; }

/* Kacheln/Karten in einer Reihe immer gleich gross (siehe CLAUDE.md) */
.kacheln {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

/* Fusszeile (html/allgemein/fussleiste.html): alles in einer Zeile rechtsbuendig wie in den anderen Projekten, 5px Abstand, 14px */
.fussleiste { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 .75rem; padding: 5px; font-size: 14px; color: var(--text-gedaempft); text-align: right; }

/* Neutrale Seite im Stamm der Domain (index.php) */
.stamm-inhalt { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.stamm-inhalt h1 { color: var(--haupt); }

/* Passwortfelder: Knopf zum Anzeigen/Verbergen (assets/js/formulare.js haengt ihn an jedes Feld) */
.pw-feld { position: relative; display: block; }
.pw-feld input { width: 100%; padding-right: 40px; }
.pw-zeigen { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--text-gedaempft); padding: 6px 8px; cursor: pointer; }
.pw-zeigen:hover, .pw-zeigen[aria-pressed="true"] { color: var(--haupt); }