/*
 * Leihdex – Oberfläche. Reines CSS, kein Build-Schritt. Handy zuerst, ab 700 px Breite mehr Platz.
 * Bausteine sind in docs/UI.md beschrieben. Neue Seiten verwenden diese Klassen,
 * eigene Kleinigkeiten kommen ans Ende dieser Datei (nicht in <style> auf den Seiten).
 */

:root {
    --hintergrund: #f3f4f6;
    --flaeche: #ffffff;
    --text: #1f2933;
    --text-leise: #5b6673;
    --linie: #d8dde3;
    --linie-stark: #b9c1ca;
    --akzent: #1c5d99;
    --akzent-dunkel: #144a7a;
    --akzent-hell: #e6f0f9;
    --gefahr: #a32020;
    --gefahr-hell: #fbe9e9;
    --ok-hell: #e3f4e8;
    --ok-text: #1b5e2f;
    --warn-hell: #fdf3d8;
    --warn-text: #7a5300;
    --radius: 8px;
    --schatten: 0 1px 2px rgba(20, 30, 40, 0.08);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--hintergrund);
    color: var(--text);
    font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

:focus-visible { outline: 3px solid #f2a900; outline-offset: 2px; }

h1, h2, h3 { line-height: 1.25; margin: 0 0 0.5em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1em; }

.leise { color: var(--text-leise); }
.klein { font-size: 0.875rem; }
.rechts { text-align: right; }
.kein-umbruch { white-space: nowrap; }
.unsichtbar { /* nur für Vorlesegeräte sichtbar */
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Kopfzeile und Navigation ---------- */

.kopf { background: var(--flaeche); border-bottom: 1px solid var(--linie); }

.kopf__zeile {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
    max-width: 1200px; margin: 0 auto; padding: 8px 16px;
}

.marke { font-weight: 700; font-size: 1.15rem; color: var(--text); text-decoration: none; }

.firmenwahl { display: flex; align-items: center; gap: 8px; margin: 0; }
.firmenwahl select { width: auto; max-width: 14rem; min-height: 40px; }
.firmenname { font-weight: 600; }

.kopf__benutzer {
    display: flex; align-items: center; gap: 12px; margin-left: auto; margin-bottom: 0;
}
.kopf__benutzer form { margin: 0; }
.kopf__name { font-size: 0.9rem; }

.hauptnav { background: var(--akzent); }
.hauptnav__liste {
    display: flex; max-width: 1200px; margin: 0 auto; padding: 0 8px;
    list-style: none; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.hauptnav a {
    display: block; padding: 12px 14px; min-height: 46px;
    color: #fff; text-decoration: none; white-space: nowrap; font-weight: 500;
}
.hauptnav a:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.hauptnav a[aria-current="page"] { background: rgba(0, 0, 0, 0.22); box-shadow: inset 0 -3px 0 #fff; }

/* ---------- Inhalt ---------- */

.inhalt { max-width: 1200px; margin: 0 auto; padding: 16px; }

.seitenkopf {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 8px 16px; margin-bottom: 16px;
}
.seitenkopf h1 { margin: 0; }
.aktionen { display: flex; flex-wrap: wrap; gap: 8px; }

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

.meldung {
    padding: 12px 16px; margin-bottom: 16px; border-radius: var(--radius);
    border: 1px solid var(--linie-stark); background: var(--flaeche);
}
.meldung--ok { background: var(--ok-hell); border-color: #a6d8b3; color: var(--ok-text); }
.meldung--fehler { background: var(--gefahr-hell); border-color: #e3a8a8; color: var(--gefahr); }
.meldung--warnung { background: var(--warn-hell); border-color: #e6cd84; color: var(--warn-text); }
.meldung ul { margin: 0; padding-left: 1.25em; }

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

.karte {
    background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
    box-shadow: var(--schatten); margin-bottom: 16px; overflow: hidden;
}
.karte__kopf {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 8px 16px; padding: 12px 16px; border-bottom: 1px solid var(--linie);
}
.karte__titel { margin: 0; font-size: 1.05rem; }
.karte__inhalt { padding: 16px; }
.karte__inhalt--buendig { padding: 0; }

.raster { display: grid; gap: 16px; grid-template-columns: 1fr; }
.raster > .karte { margin-bottom: 0; }

/* ---------- Knöpfe ---------- */

.knopf {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 44px; padding: 8px 16px; border-radius: var(--radius);
    border: 1px solid var(--linie-stark); background: var(--flaeche); color: var(--text);
    font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.knopf:hover { background: var(--hintergrund); color: var(--text); }
.knopf--primaer { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.knopf--primaer:hover { background: var(--akzent-dunkel); color: #fff; }
.knopf--gefahr { background: var(--flaeche); border-color: var(--gefahr); color: var(--gefahr); }
.knopf--gefahr:hover { background: var(--gefahr-hell); color: var(--gefahr); }
.knopf--voll { width: 100%; }
.knopf--klein { min-height: 36px; padding: 4px 10px; font-size: 0.9rem; }
.knopf[disabled], .knopf[aria-busy="true"] { opacity: 0.55; cursor: not-allowed; }
.knopf--link { border: 0; background: none; color: var(--akzent); text-decoration: underline; padding: 4px 8px; font-weight: 500; }

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

.feld { margin-bottom: 16px; }
.feld label, .feld__label { display: block; font-weight: 600; margin-bottom: 4px; }
.feld__hinweis { color: var(--text-leise); font-size: 0.875rem; margin-top: 4px; }
.feld__fehler { color: var(--gefahr); font-size: 0.9rem; margin-top: 4px; }
.feld--fehler input, .feld--fehler select, .feld--fehler textarea { border-color: var(--gefahr); }

input[type="text"], input[type="email"], input[type="password"], input[type="date"],
input[type="number"], input[type="tel"], input[type="search"], input[type="datetime-local"],
input[type="time"], select, textarea {
    width: 100%; min-height: 44px; padding: 8px 12px;
    font: inherit; /* 16 px: iOS zoomt sonst beim Antippen */
    color: var(--text); background: #fff;
    border: 1px solid var(--linie-stark); border-radius: var(--radius);
}
textarea { min-height: 96px; resize: vertical; }
input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; vertical-align: middle; margin-right: 6px; }
.feld--haken label { font-weight: 500; }

.formzeile { display: grid; gap: 0 16px; grid-template-columns: 1fr; }

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

.tabelle-rahmen { overflow-x: auto; }
.tabelle { width: 100%; border-collapse: collapse; }
.tabelle th, .tabelle td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linie); }
.tabelle thead th {
    font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em;
    color: var(--text-leise); background: #f8f9fa; white-space: nowrap;
}
.tabelle tbody tr:hover { background: #fafbfc; }
.tabelle td.rechts, .tabelle th.rechts { text-align: right; }

/* Handy: Zeilen werden zu Karten. Zellen brauchen data-label="Spaltenname". */
@media (max-width: 699px) {
    .tabelle--karten thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .tabelle--karten, .tabelle--karten tbody, .tabelle--karten tr, .tabelle--karten td { display: block; width: 100%; }
    .tabelle--karten tr { padding: 8px 0; border-bottom: 2px solid var(--linie-stark); }
    .tabelle--karten td { border: 0; padding: 4px 16px; }
    .tabelle--karten td[data-label]::before {
        content: attr(data-label); display: block; font-size: 0.75rem;
        text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-leise);
    }
    .tabelle--karten td.rechts { text-align: left; }
}

/* Beschriftete Werte (Detailseiten) */
.werte { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; }
.werte dt { color: var(--text-leise); font-size: 0.85rem; margin-top: 10px; }
.werte dd { margin: 0; font-weight: 500; }

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

.badge {
    display: inline-block; padding: 2px 10px; border-radius: 999px;
    font-size: 0.8rem; font-weight: 700; white-space: nowrap; border: 1px solid transparent;
}
.badge--grau { background: #e8ebee; color: #3d4752; border-color: #cfd5db; }
.badge--blau { background: #e1edfa; color: #144a7a; border-color: #b5cfe9; }
.badge--gelb { background: #fdf0c8; color: #6b4a00; border-color: #ecd68b; }
.badge--gruen { background: #dcf1e2; color: #1b5e2f; border-color: #a6d8b3; }
.badge--rot { background: #fbe0e0; color: #8f1b1b; border-color: #e3a8a8; }
.badge--lila { background: #ece4f7; color: #53308c; border-color: #cdbbe8; }
.badge--tuerkis { background: #d9f0f0; color: #0e5a5a; border-color: #a2d4d4; }

/* ---------- Leerer Zustand ---------- */

.leer { text-align: center; padding: 32px 16px; color: var(--text-leise); }
.leer__text { font-size: 1.05rem; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.leer__hinweis { margin-bottom: 12px; }

/* ---------- Seitenwahl ---------- */

.seitenwahl { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 16px 0; }
.seitenwahl__eintrag {
    display: inline-block; min-width: 44px; padding: 10px 12px; text-align: center;
    border: 1px solid var(--linie-stark); border-radius: var(--radius);
    background: var(--flaeche); color: var(--akzent); text-decoration: none;
}
.seitenwahl__eintrag--aus { color: var(--text-leise); background: var(--hintergrund); }
.seitenwahl__eintrag--aktiv { background: var(--akzent); border-color: var(--akzent); color: #fff; font-weight: 700; }

/* ---------- Anmeldung ---------- */

.anmeldung { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.anmeldung__karte { width: 100%; max-width: 400px; }
.anmeldung__marke { text-align: center; font-size: 1.75rem; font-weight: 800; margin-bottom: 16px; }

/* ---------- Größere Bildschirme ---------- */

@media (min-width: 700px) {
    .inhalt { padding: 24px; }
    .kopf__zeile { padding: 8px 24px; }
    .hauptnav__liste { padding: 0 16px; }
    h1 { font-size: 1.75rem; }
    .raster--2 { grid-template-columns: repeat(2, 1fr); }
    .raster--3 { grid-template-columns: repeat(3, 1fr); }
    .formzeile--2 { grid-template-columns: repeat(2, 1fr); }
    .formzeile--3 { grid-template-columns: repeat(3, 1fr); }
    .werte { grid-template-columns: 11rem 1fr; gap: 6px 16px; }
    .werte dt { margin-top: 0; }
}

@media print {
    .kopf, .hauptnav, .aktionen, .knopf { display: none !important; }
    body { background: #fff; }
}

/* ---------- Eigene Ergänzungen der Seiten kommen ab hier ---------- */

/* ---------- Fehlerseiten (resources/views/errors/*) ---------- */

.fehlerseite {
    max-width: 40rem; margin: 24px auto; padding: 24px 20px;
    background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--schatten);
}
.fehlerseite__code { margin: 0 0 4px; color: var(--text-leise); font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.fehlerseite h1 { margin-bottom: 12px; }
.fehlerseite__text { font-size: 1.05rem; overflow-wrap: anywhere; }
.fehlerseite__wege { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }

/* ---------- Auftragsliste: Filter, Karten am Handy (AuftragListe, auftraege/index.blade.php) ---------- */

.liste-filter { display: grid; gap: 0 16px; grid-template-columns: 1fr; align-items: end; }
.liste-filter .feld { margin-bottom: 12px; }
.liste-filter__knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.liste-anzahl { margin: 0; padding: 10px 16px 0; }
.liste-link { display: inline-flex; align-items: center; min-height: 44px; }
.liste-geraete, .liste-kunde { overflow-wrap: anywhere; }

@media (max-width: 699px) {
    /* Ganze Karte antippbar: der Link der Auftragsnummer spannt sich unsichtbar über die Karte. */
    .liste-tabelle .liste-zeile { position: relative; }
    .liste-tabelle .liste-link::after { content: ""; position: absolute; inset: 0; }
    .liste-tabelle .liste-zeile:active { background: var(--akzent-hell); }
}

@media (min-width: 700px) {
    .liste-filter { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
    .liste-filter__suche { grid-column: 1 / -1; }
}

/* ---------- Kunden: Umsatz und stornierte Aufträge ---------- */

.kunde-umsatz { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.kunde-umsatz__wert { font-size: 1.6rem; font-weight: 800; }
.kunde-storniert td { color: var(--text-leise); }
.kunde-storniert td:not([data-label="Status"]) { text-decoration: line-through; text-decoration-color: rgba(0, 0, 0, 0.35); }

/* ---------- Tippflächen: mindestens 44 px am Handy und auf Touch-Geräten ---------- */

@media (max-width: 699px), (pointer: coarse) {
    .knopf--klein { min-height: 44px; padding: 6px 14px; }
    .knopf--link { min-height: 44px; }
    .firmenwahl select { min-height: 44px; }
    .tabelle--karten td a:not(.knopf):not(.badge) { display: inline-flex; align-items: center; min-height: 44px; }
    .tabelle--karten td .leise a, .tabelle--karten td .klein a { min-height: 44px; }
    .kopf__benutzer { gap: 8px; }
}

/* Kästchen und Auswahlkreise: das ganze Beschriftungsfeld ist antippbar (mind. 44 px hoch) */
label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) {
    display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 0; cursor: pointer;
}
label:has(> input[type="checkbox"]) > input, label:has(> input[type="radio"]) > input { flex: none; margin: 0; }
input[type="checkbox"], input[type="radio"] { min-width: 22px; min-height: 22px; }

/* ---------- Sichtbarer Fokus: dunkelblauer Rahmen mit hellem Rand (mind. 3:1 gegen jeden Hintergrund) ---------- */

:focus-visible {
    outline: 3px solid #0a2a66; outline-offset: 2px;
    box-shadow: 0 0 0 2px #fff, 0 0 0 7px #fff;
}
/* Navigation: blauer Hintergrund, deshalb weißer Rahmen innen */
.hauptnav a:focus-visible {
    outline: 3px solid #fff; outline-offset: -6px; box-shadow: inset 0 0 0 7px #0a2a66;
}
/* Eingabefelder: der Rahmen darf nicht abgeschnitten werden */
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 1px; }

/* ---------- Lange Wörter ohne Leerzeichen brechen um, statt die Seite zu verbreitern ---------- */

h1, h2, h3, .karte__titel, .meldung, .werte dd, .tabelle td, .kopf__name, .firmenname,
.eintrag__nummer, .eintrag__kunde, .eintrag__text, .eintrag__ort, .geraet, .aufgabe__text, .az-umbruch,
.liste-kunde, .liste-geraete, .fehlerseite__text, .leer__text, .leer__hinweis {
    overflow-wrap: anywhere;
}

/* ---------- Navigation am Handy: Knopf „Menü“ (details) statt seitlich scrollender Leiste ---------- */

.mobilnav { background: var(--akzent); }
.mobilnav > details { max-width: 1200px; margin: 0 auto; }
.mobilnav summary {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    min-height: 48px; padding: 0 16px; color: #fff; font-weight: 700; cursor: pointer; list-style: none;
}
.mobilnav summary::-webkit-details-marker { display: none; }
.mobilnav summary::after { content: "\25BE"; font-size: 1.1rem; }
.mobilnav details[open] > summary::after { content: "\25B4"; }
.mobilnav__aktuell { margin-left: 0.4em; font-weight: 500; opacity: 0.9; }
.mobilnav__liste { list-style: none; margin: 0; padding: 0; background: var(--flaeche); border-bottom: 1px solid var(--linie-stark); }
.mobilnav__liste a {
    display: flex; align-items: center; min-height: 48px; padding: 0 16px;
    color: var(--text); text-decoration: none; border-top: 1px solid var(--linie); font-weight: 500;
}
.mobilnav__liste a:active { background: var(--akzent-hell); }
.mobilnav__liste a[aria-current="page"] {
    background: var(--akzent-hell); color: var(--akzent-dunkel); font-weight: 700; box-shadow: inset 5px 0 0 var(--akzent);
}
.mobilnav summary:focus-visible { outline: 3px solid #fff; outline-offset: -6px; box-shadow: inset 0 0 0 7px #0a2a66; }

@media (max-width: 699px) {
    .hauptnav { display: none; }
}
@media (min-width: 700px) {
    .mobilnav { display: none; }
}

/* ---------- Kleine Hilfetexte unter Spaltenüberschriften ---------- */

.th-hilfe { display: block; margin-top: 2px; font-size: 0.72rem; font-weight: 400; text-transform: none; letter-spacing: 0; white-space: normal; }

/* ---------- Anmeldung ---------- */

.anmeldung__hilfe { margin: 12px 0 0; text-align: center; }

/* ---------- Tippflächen für kleine Textlinks (Kunde, Telefon, E-Mail, Auftragsnummern in Aufgaben) mindestens 44 px ---------- */

@media (max-width: 699px), (pointer: coarse) {
    .werte dd a, .aufgabe__meta a, .aufgabe__titel a, .eintrag--aufgabe .eintrag__inhalt a,
    .az-pruefkasten li a {
        display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; overflow-wrap: anywhere;
    }
}

/* ---------- Hauptmenü bei mittleren Breiten (700 bis 1050 px): enger, damit „Hilfe“ nie abgeschnitten wird ---------- */

@media (min-width: 700px) and (max-width: 1050px) {
    .hauptnav__liste { padding: 0 4px; }
    .hauptnav a { padding: 12px 9px; font-size: 0.95rem; }
}
@media (min-width: 700px) and (max-width: 820px) {
    .hauptnav a { padding: 12px 7px; font-size: 0.9rem; }
}