/* --- style.css (Final Optimized) --- */

/* -------------------------
 * 1. GRUNDEINSTELLUNGEN & RESET
 * ------------------------- */
/* WICHTIG: Box-Sizing für konsistente Breitenberechnung */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Inter (Lokal - Variabel) */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('assets/fonts/Inter/Inter-VariableFont_opsz,wght.ttf') format('truetype');
}

/* Montserrat (Lokal - Variabel) */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('assets/fonts/Montserrat/Montserrat-VariableFont_wght.ttf') format('truetype');
}

:root {
    --primary-color: #5990BA;
    --primary-hover: #4a789a;
    --bg-light: #f4f7f6;
    --bg-white: #ffffff;
    --text-light: #FFFFFF;
    --text-dark: #333333;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --border-radius: 8px;
    --input-height: 48px; /* Touch-freundliche Höhe */

    --border-color: #e0e0e0;
    --error-bg:   #f8d7da;
    --error-text: #721c24;

    /* --- Farbfamilie aus der Personaleinsatzplanung, über die
       Hausverwaltung übernommen (28.07.2026) ---
       --primary-color (#5990BA) ist das Logoblau: nur für Flächen und
       Linien, nicht für Text. Auf Weiß erreicht es 2,9:1 und fällt damit
       unter die geforderten 4,5:1. Für Text den dunkleren Akzent nehmen. */
    --akzent:        #45708f;   /* auf Weiß 5,28:1 */
    --akzent-dunkel: #35576f;
    --akzent-hell:   #e8f0f5;
    --text-leise:    #5c6870;   /* auf Weiß 5,4:1 */
    --streifen:      3px;       /* Streifen unter dem Kopf / über dem Fuß */

    --font-heading: 'Montserrat', sans-serif;
}

html {
    /* Verhindert Text-Skalierung im Landscape-Modus auf iPhones */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    /* Schärfere Schrift auf MacOS/iOS */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--bg-light);
    color: var(--text-dark);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* -------------------------
 * 2. KOPFBEREICH
 * -------------------------
 * Gestaltung der Hausverwaltung und der Personaleinsatzplanung
 * (übernommen 28.07.2026): zweiteilig statt einer dunklen Leiste.
 *
 *   .markenband  hell, mit Bildmarke, Anwendungsname, Organisation
 *                und rechts der Benutzerleiste
 *   .seitenband  getönt, mit kräftigem Streifen in Logoblau, trägt
 *                den Namen der aktuellen Seite
 *
 * Der Klassenname .site-header bleibt, damit die Druckregel weiter greift.
 */

.sprungmarke {
    position: absolute; left: -9999px; top: 0;
    background: var(--akzent); color: #fff;
    padding: 0.75rem 1.25rem; z-index: 100;
}
.sprungmarke:focus { left: 0; }

.site-header { background: var(--bg-white); }

.markenband { border-bottom: 1px solid var(--border-color); }
.markenband-innen {
    max-width: 78rem; margin: 0 auto;
    padding: 0.7rem 1.25rem;
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 0.75rem 1.5rem;
}

.marke { margin: 0; }
.marke a {
    display: flex; align-items: center; gap: 0.9rem;
    text-decoration: none; color: var(--text-dark);
    border-radius: 5px;
    min-width: 0;              /* sonst schrumpft der Text nicht und steht über */
}
.marke a:hover { text-decoration: none; }
.marke a:hover .marke-titel { color: var(--akzent); }
.kopf-logo { height: 58px; width: auto; display: block; flex: none; }
.marke-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.marke-titel {
    font-family: var(--font-heading);
    font-size: 1.12rem; font-weight: 600; letter-spacing: 0.2px;
    overflow-wrap: anywhere;
}
.marke-organisation { font-size: 0.78rem; color: var(--text-leise); }

.benutzerleiste {
    margin-left: auto;
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem;
}
.benutzerkarte { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; }
.benutzername { font-weight: 600; }
.rolle {
    display: inline-block; padding: 0.1rem 0.55rem;
    border: 1px solid var(--primary-color);
    background: var(--akzent-hell); color: var(--akzent-dunkel);
    border-radius: 999px; font-size: 0.78rem; white-space: nowrap;
}

/* Für welche Werkstatt erfasst wird — auf JEDER Seite, nicht nur auf der
   Übersicht. Die Frage stellt sich beim Arbeiten, nicht beim Ankommen.
   Bewusst kräftiger als die Rolle: die Rolle ändert sich nie, die Werkstatt
   ist die Angabe, bei der ein Irrtum Geld kostet. */
.werkstattkarte {
    display: inline-flex; align-items: baseline; gap: 0.35rem;
    padding: 0.15rem 0.65rem;
    border: 1px solid #0f6d6a;              /* Petrol wie die Stammdaten-Kacheln */
    background: #e6f1f0; color: #0b524f;    /* 8,1:1 — deutlich über 4,5:1 */
    border-radius: 999px; font-size: 0.82rem; white-space: nowrap;
    max-width: 32rem;
}
.werkstattkarte i { font-size: 0.78rem; }
/* Das Wort „Werkstatt:" ist die Beschriftung, der Name ist die Auskunft.
   Auf schmalen Fenstern tritt die Beschriftung ab, der Name bleibt. */
.werkstattkarte-wort   { opacity: 0.75; }
.werkstattkarte-name   { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.werkstattkarte-mutter { font-size: 0.74rem; opacity: 0.8; }

/* Knöpfe der Benutzerleiste — schlicht mit Rand */
.knopf {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.35rem 0.8rem; border-radius: 5px;
    font-size: 0.85rem; line-height: 1.3;
    text-decoration: none; cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.knopf-rand {
    border: 1px solid var(--primary-color);
    background: var(--bg-white); color: var(--akzent-dunkel);
}
.knopf-rand:hover, .knopf-rand:focus {
    background: var(--akzent-hell); color: var(--akzent-dunkel);
    text-decoration: none;
}
.knopf-abmelden { border-color: #c9a0a6; color: var(--error-text); }
.knopf-abmelden:hover, .knopf-abmelden:focus {
    background: var(--error-bg); color: var(--error-text);
}

.seitenband {
    background: var(--akzent-hell);
    border-bottom: var(--streifen) solid var(--primary-color);
}
.seitenband-innen {
    max-width: 78rem; margin: 0 auto;
    padding: 0.55rem 1.25rem;
}
.seitenband h1 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.15rem; font-weight: 600; letter-spacing: 0.3px;
    color: var(--akzent-dunkel);
}

/* -------------------------
 * 4. DASHBOARD & LAYOUT
 * ------------------------- */
.dashboard-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}
.main-navigation {
    width: 100%;
    /* KEIN eigener Höchstwert.
       Bis zum 28.07.2026 standen hier 1000 px. Innerhalb eines breiteren
       Behälters endete die Kachelreihe dadurch VOR ihrer eigenen Überschrift —
       auf der Übersicht lief der Strich der Gruppenüberschrift 140 px darüber
       hinaus, auf der Auswertungsseite Überschrift und Text 72 px. Das sah aus
       wie eine schiefe Zentrierung, war aber ein zweites Raster.
       Die Breite gibt jetzt der Behälter vor: .uebersicht auf der Übersicht,
       .card auf den Unterseiten. */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
    gap: 1.5rem;
}
/* Die Kacheln sind bewusst gross — die Anwendung wird auf Tablets bedient
   (Kundenwunsch). Grösse, Innenabstand und Symbolgrösse bleiben deshalb
   unangetastet.
   Geändert wurde nur der Farbton: Weiss auf dem Logoblau erreicht 3,43:1.
   Für Schrift dieser Grösse verlangt die Richtlinie 4,5:1 — derselbe Ton eine
   Stufe dunkler erreicht 5,29:1. In einer hellen Werkstatt ist das der
   Unterschied zwischen lesbar und erraten. */
.nav-button {
    background-color: var(--akzent);
    color: var(--text-light);
    text-decoration: none;
    border-radius: 10px;
    box-shadow: 0 4px 10px var(--shadow-color);
    padding: 2rem;
    font-size: 1.25rem;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.nav-button i {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
}
.nav-button:hover {
    background-color: var(--akzent-dunkel);
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}
/* Auf einem Tablet gibt es kein Überfahren mit der Maus — dort muss das
   Antippen selbst eine Rückmeldung geben. */
.nav-button:active { transform: translateY(-1px); background-color: var(--akzent-dunkel); }

/* Dasselbe Mass wie Kopf, Fuss und Übersicht: 78rem breit, 1,25rem
   Innenabstand. Vorher waren es 1200 px und 2rem — die Karten standen dadurch
   auf JEDER Unterseite 36 px rechts vom Seitentitel im Kopfband darüber.
   Ein Versatz, den man nicht benennen kann, aber sieht. */
.page-container {
    flex: 1;
    width: 100%;
    max-width: 78rem;
    margin: 2rem auto;
    padding: 0 1.25rem;
}
.card {
    background-color: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 4px 10px var(--shadow-color);
    padding: 2rem;
    margin-bottom: 2rem;
}
.card h2 {
    margin-top: 0;
    border-bottom: 2px solid var(--bg-light);
    padding-bottom: 0.75rem;
    font-weight: 600;
    font-size: 1.4rem;
}
.card h2 i {
    color: var(--akzent);
    margin-right: 0.5rem;
}

/* Info Boxen */
.customer-info-box, .notice-bar, .form-group.info-box {
    background-color: var(--bg-light);
    border: 1px solid #e0e0e0;
    padding: 1rem;
    border-radius: var(--border-radius);
    line-height: 1.5;
}
.notice-bar {
    background: #fff;
    margin-bottom: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}
.form-group.info-box label {
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid #ddd;
    padding-bottom: 0.5rem;
    display: block;
}

/* -------------------------
 * 5. FORMULARE
 * ------------------------- */
/* Formularkarten sind genauso breit wie alle anderen Karten.
   Vorher deckelte .form-container sie auf 1000 px und zentrierte sie — auf
   Seiten mit mehreren Karten stand die Formularkarte dadurch schmaler und
   eingerückt neben ihren Nachbarn. Die Lesbarkeit der Felder regelt ohnehin
   .form-grid, das ab 300 px umbricht; dafür braucht es keine zweite Breite. */
.form-container {
    margin: 0 auto;
}
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}
.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.5rem;
}
.form-group label {
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: #555;
}

/* Standard Inputs */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="password"],
.form-group input[type="date"],
.form-group input[type="number"],
.form-group textarea {
    width: 100%;
    min-height: var(--input-height);
    padding: 0.7rem 0.8rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    background-color: #fff;
    color: #333;
    transition: border-color 0.2s, box-shadow 0.2s;
    
    /* Entfernt iOS Schatten */
    -webkit-appearance: none;
    appearance: none;
}

/* -----------------------------------------------------------
 * WICHTIG: DROPDOWN (SELECT) FIX FÜR SAFARI / IOS
 * ----------------------------------------------------------- */
.form-group select {
    display: block;
    width: 100%;
    min-height: var(--input-height);
    padding: 0.7rem 2.5rem 0.7rem 0.8rem; /* Rechts Platz für Pfeil */
    
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: #333;
    
    /* Explizite Werte für Safari zwingend notwendig: */
    background-color: #ffffff;
    border: 1px solid #ccc;
    border-radius: 5px;
    
    /* Entfernt natives OS-Design */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    /* Neuer, robuster SVG-Pfeil (Dunkelgrau) */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1rem;
    cursor: pointer;
}

/* IE11 Fix */
.form-group select::-ms-expand { display: none; }

/* Fokus-Zustände für alle Inputs */
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(89, 144, 186, 0.2);
    outline: none;
}

.form-group textarea {
    min-height: 120px;
    resize: vertical;
}

.form-group-split {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
}

/* Checkboxen */
.form-group-checkbox-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 0.5rem;
}
.form-group-checkbox {
    display: flex;
    align-items: center;
}
.form-group-checkbox input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    cursor: pointer;
    accent-color: var(--primary-color);
    /* Checkbox darf nativ aussehen */
    -webkit-appearance: auto;
    appearance: auto;
}
.form-group-checkbox label { margin: 0; cursor: pointer; }
.form-divider {
    border: none;
    border-top: 1px solid var(--bg-light);
    margin: 2rem 0;
}

/* Buttons */
.form-actions {
    text-align: right;
    margin-top: 1.5rem;
}
.form-actions-split {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.button-primary, .button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Ohne gap kleben Symbol und Beschriftung aneinander — ein Leerzeichen
       im Quelltext fällt in einem Flex-Behälter weg. Wie in der
       Hausverwaltung: 0,5rem. */
    gap: 0.5rem;
    padding: 0 1.8rem;
    height: var(--input-height);
    border-radius: var(--border-radius);
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
    border: none;
    text-align: center;
}

.button-primary {
    /* Weiss auf dem Logoblau erreicht nur 3,43:1 — zu wenig für Schrift
       dieser Grösse. Derselbe Farbton, eine Stufe dunkler: 5,29:1.
       So steht es auch in der Hausverwaltung. */
    background-color: var(--akzent);
    color: var(--text-light);
}
.button-primary:hover {
    background-color: var(--akzent-dunkel);
    transform: translateY(-2px);
}
.button-secondary {
    background-color: #f0f0f0;
    color: #555;
    border: 1px solid #ccc;
}
.button-secondary:hover {
    background-color: #e0e0e0;
    transform: translateY(-2px);
}
.button-secondary i { margin-right: 0.5rem; }

/* -------------------------
 * 6. TABELLEN & LISTEN
 * ------------------------- */
.table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Weiches Scrollen iOS */
    margin-top: 1rem;
    border: 1px solid #e0e0e0;
    border-radius: var(--border-radius);
}
.data-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 650px; /* Erzwingt Scrollbar auf Handy */
}
.data-table th,
.data-table td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
    vertical-align: middle;
}
.data-table th {
    background-color: var(--bg-light);
    font-weight: 600;
    color: #333;
    white-space: nowrap;
}
.data-table tbody tr:hover { background-color: #f9f9f9; }
.data-table .actions { text-align: right; white-space: nowrap; }

/* 36 px waren zu klein: in den Listen sind das die Knöpfe zum Öffnen und
   Löschen, und auf einem Tablet werden sie mit dem Finger getroffen. Die
   Vorgabe für Tippziele ist 44 px. Das Symbol bleibt gleich gross — nur die
   Fläche darum wächst. */
.button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    /* #777 auf Weiss sind 4,48:1 — knapp daneben. */
    color: var(--text-leise);
    text-decoration: none;
    border-radius: 6px;
    transition: background-color 0.2s, color 0.2s;
}
.button-icon:hover, .button-icon:focus-visible {
    background-color: var(--akzent-hell);
    color: var(--akzent-dunkel);
}
.button-icon.delete:hover {
    color: #e74c3c;
    background-color: #fce8e6;
}

.status-badge {
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: 0.85em;
    font-weight: 600;
    border-radius: 4px;
    color: #fff;
    white-space: nowrap;
}
.status-badge.status-aktiv { background-color: #28a745; }
.status-badge.status-inaktiv { background-color: #6c757d; }

.data-table .total-row td {
    border-top: 2px solid #ccc;
    font-weight: bold;
    background-color: #fafafa;
}

/* Tab-Navigation */
.tab-navigation {
    display: flex;
    border-bottom: 2px solid #e0e0e0;
    margin-bottom: 2rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.tab-button {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    padding: 1rem 1.5rem;
    border: none;
    background: none;
    cursor: pointer;
    text-decoration: none;
    color: #888;
    margin-bottom: -2px;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
    white-space: nowrap;
}
.tab-button:hover, .tab-button.active { color: var(--primary-color); }
.tab-button.active { border-bottom-color: var(--primary-color); }
.tab-button i { margin-right: 0.75rem; }

/* -------------------------
 * 7. FEEDBACK & FOOTER
 * ------------------------- */
.feedback {
    padding: 1rem;
    margin-bottom: 1.5rem;
    border-radius: var(--border-radius);
    font-weight: 500;
}
.feedback.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}
.feedback.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* -------------------------
 * 7. FUSSZEILE
 * -------------------------
 * Hell statt dunkel, mit kräftigem Streifen in Logoblau als oberem
 * Abschluss, die Angaben mittig in einer Reihe — wie in der Hausverwaltung.
 */
.site-footer {
    margin-top: auto;
    border-top: var(--streifen) solid var(--primary-color);
    background: var(--bg-white);
    color: var(--text-leise);
    font-size: 0.9rem;
}

.fuss-innen {
    max-width: 78rem; margin: 0 auto;
    padding: 1.4rem 1.25rem 1.6rem;
    text-align: center;
}

.fuss-zeile {
    margin: 0;
    /* Die Angaben stehen in einer Reihe und brechen bei Bedarf sauber um —
       ein Trennstrich darf dabei nie allein eine Zeile beginnen. */
    display: flex; flex-wrap: wrap;
    justify-content: center; align-items: baseline;
    gap: 0 0.55rem; line-height: 1.7;
}
.fuss-name { font-weight: 600; color: var(--text-dark); }
.fuss-strich { color: var(--text-leise); }

.site-footer a { color: var(--akzent); text-decoration: none; }
.site-footer a:hover { color: var(--akzent-dunkel); text-decoration: underline; }

.fuss-marke {
    margin-top: 0.7rem; padding-top: 0.7rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.8rem;
}

/* --- Schriftgröße ---------------------------------------------------------
   Bleibt erhalten, nur an die helle Gestaltung angepasst: eine beschriftete
   Gruppe statt einer dunklen Kapsel in der Ecke. Die Tippziele sind
   mindestens 44 px hoch — Vorgabe für Fingerbedienung. */
.schriftgroesse {
    display: inline-flex; align-items: center;
    gap: 0.35rem; margin-top: 1rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-light);
}
.schriftgroesse-text {
    font-size: 0.78rem; color: var(--text-leise);
    padding: 0 0.35rem 0 0.25rem;
}
.font-control-button {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px;
    border-radius: 999px;
    color: var(--akzent-dunkel);
    font-size: 1rem; text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}
.font-control-button:hover, .font-control-button:focus {
    background: var(--akzent-hell);
    color: var(--akzent-dunkel);
    text-decoration: none;
    outline: none;
}
.font-control-button:focus-visible {
    outline: 2px solid var(--akzent); outline-offset: 2px;
}

/* -------------------------
 * 8. RESPONSIVE (MOBILE / TABLET)
 * ------------------------- */
@media (max-width: 768px) {
    /* Kopfbereich — Marke und Benutzerleiste untereinander statt gedrängt */
    .markenband-innen { padding: 0.6rem 1rem; }
    .benutzerleiste { margin-left: 0; width: 100%; justify-content: flex-start; }

    /* Auf dem Telefon ist die Zeile knapp. Die Beschriftung „Werkstatt:" tritt
       ab — das Symbol sagt dasselbe, und der NAME ist die Auskunft, auf die es
       ankommt. Die Erklärung im title bleibt unverändert erhalten. */
    .benutzerkarte { flex-wrap: wrap; row-gap: 0.35rem; }
    .werkstattkarte-wort { display: none; }
    .werkstattkarte { max-width: 100%; }
    .kopf-logo { height: 46px; }
    .marke-titel { font-size: 1rem; }
    .seitenband-innen { padding: 0.5rem 1rem; }
    .seitenband h1 { font-size: 1.05rem; }

    /* Am Rechner sind „Übersicht" und „Abmelden" 31 px hoch — mit dem Finger
       auf dem Telefon zu wenig. Vorgabe für Tippziele ist 44 px. Nur hier,
       damit die Ansicht am Rechner unverändert bleibt. */
    .benutzerleiste .knopf { min-height: 44px; padding-left: 0.9rem; padding-right: 0.9rem; }

    /* Dieselbe Vorgabe für die übrigen kleinen Ziele, gefunden bei der
       Usability-Messung am 29.07.2026 (15 Seiten × 2 Breiten):
       die Telefon-/E-Mail-Verweise der Fusszeile, Verweise in Tabellenzellen
       (z. B. „#17" in der Lieferscheinliste) und die Sprungmarken der Hilfe
       waren mit ~19 px Höhe kaum zu treffen. Innenabstand statt fester Höhe:
       die Zeilen wachsen mit, nichts verschiebt sich am Rechner. */
    .site-footer a,
    .data-table td a:not(.button-icon),
    .hilfe-nach-oben a {
        display: inline-block;
        padding: 0.65rem 0.35rem;
        margin: -0.35rem 0;
    }

    /* Main Content */
    .dashboard-container { padding-top: 1rem; padding-bottom: 1rem; }
    .card { padding: 1.25rem; }

    /* Navigation */
    .nav-button { padding: 1.5rem; min-height: 130px; }

    /* Formulare */
    .form-group-split { grid-template-columns: 1fr; }
    
    /* WICHTIG FÜR SAFARI IOS: Schriftgröße 16px verhindert Zoom */
    .form-group input, 
    .form-group select, 
    .form-group textarea {
        font-size: 16px !important;
    }
    
    /* Knöpfe untereinander — auf dem Tablet aber NICHT über die volle
       Breite: dort ist Platz genug, und ein 700 px breiter Knopf schiebt die
       eigentliche Liste aus dem Bild. Volle Breite gibt es nur auf dem
       Telefon, weiter unten bei 600 px. */
    .form-actions-split { flex-wrap: wrap; }

    /* Footer */
    .fuss-innen { padding: 1.2rem 1rem 1.4rem; }
}

@media print {
    .site-header, .site-footer, .sprungmarke, .main-navigation, .tab-navigation,
    .form-actions, .form-actions-split, .button-icon { display: none !important; }
    body, .page-container, .card {
        background: #fff;
        color: #000;
        margin: 0;
        padding: 0;
        box-shadow: none;
        width: 100%;
        border: none;
    }
}

/* ===========================================================================
   GESTALTUNGSDURCHGANG 28.07.2026
   Vorbild: Hausverwaltung (haus_lgw2). Grundsatz dieser Anwendung: sie wird
   auf TABLETS bedient — grosse Flächen, grosse Tippziele, nichts, was ein
   Zeigegerät voraussetzt.
   =========================================================================== */

/* --- Verweise ------------------------------------------------------------
   Ein Verweis im Fliesstext war bisher nicht von gewöhnlichem Text zu
   unterscheiden: er erbte #333. Farbe allein genügt ohnehin nicht, deshalb
   kommt beim Überfahren und beim Tastaturfokus eine Unterstreichung dazu.
   Knöpfe, Kacheln und Reiter setzen ihre Farbe selbst und bleiben aussen vor. */
a:not([class]) {
    color: var(--akzent);
    text-decoration: none;
    transition: color 0.2s;
}
a:not([class]):hover,
a:not([class]):focus-visible {
    color: var(--akzent-dunkel);
    text-decoration: underline;
}

/* --- Sichtbarer Tastaturfokus --------------------------------------------
   Safari zeichnet ohne diese Angabe gar nichts. Wer mit der Tastatur
   arbeitet, muss sehen, wo er steht — das gilt auch für ein Tablet mit
   angesteckter Tastatur. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.nav-button:focus-visible,
.knopf:focus-visible {
    outline: 3px solid var(--akzent);
    outline-offset: 2px;
}
.nav-button:focus-visible { outline-color: var(--akzent-dunkel); }

/* --- Eingabefelder: Fokus zeigen -----------------------------------------
   Bisher änderte sich beim Hineinklicken nichts Sichtbares. */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--akzent);
    box-shadow: 0 0 0 3px rgba(69, 112, 143, 0.18);
    outline: none;
}

/* --- Breite Tabellen -----------------------------------------------------
   Die Bestellliste ist breiter als ein Tablet. Sie liess sich schon immer
   seitlich schieben — man sah es nur nicht, die Spalte „Summe" war abgeschnitten
   und wirkte wie ein Fehler. Der Schatten am Rand verschwindet, sobald das
   Ende erreicht ist, und zeigt damit an, dass dort noch etwas kommt. */
.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;

    background:
        linear-gradient(to right, var(--bg-white) 30%, rgba(255,255,255,0)) left / 2.5rem 100% no-repeat,
        linear-gradient(to left,  var(--bg-white) 30%, rgba(255,255,255,0)) right / 2.5rem 100% no-repeat,
        linear-gradient(to right, rgba(0,0,0,0.10), rgba(0,0,0,0)) left / 0.9rem 100% no-repeat,
        linear-gradient(to left,  rgba(0,0,0,0.10), rgba(0,0,0,0)) right / 0.9rem 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
}

/* --- Zeilen in Listen ----------------------------------------------------
   Auf einem Tablet trifft der Finger eine 36 px hohe Zeile schlecht. */
.data-table td { padding-top: 0.85rem; padding-bottom: 0.85rem; }
.data-table tbody tr:hover { background-color: var(--akzent-hell); }

/* --- Statusplaketten -----------------------------------------------------
   Die Werte kamen aus verschiedenen Ecken; „geloescht" und „inaktiv" fielen
   auf die Vorgabefarbe zurück und sahen aus wie „aktiv". */
.status-badge.status-aktiv      { background-color: #2e7d32; }
.status-badge.status-inaktiv    { background-color: #5c6870; }
.status-badge.status-geloescht  { background-color: #b3261e; }

/* --- Meldungen -----------------------------------------------------------
   Ein farbiger Kasten allein ist für Farbfehlsichtige keine Aussage; der
   Streifen an der Seite trägt sie mit. */
.feedback {
    border-left: 4px solid currentColor;
    border-radius: 6px;
}

/* ===========================================================================
   TELEFON — erst hier wird alles auf volle Breite gestellt
   =========================================================================== */
@media (max-width: 600px) {
    .form-actions-split { flex-direction: column-reverse; }
    .button-primary, .button-secondary { width: 100%; }
}

/* ===========================================================================
   TABLET — der eigentliche Arbeitsplatz
   =========================================================================== */
@media (min-width: 601px) and (max-width: 1024px) {
    /* Die Spaltenzahl bleibt dem Raster überlassen (auto-fit ab 225 px).
       Hier stand vorher `repeat(2, 1fr)` — das galt aber nur für Seiten OHNE
       .uebersicht, weil deren Regel spezifischer ist. Kacheln verhielten sich
       dadurch auf der Übersicht anders als auf den Unterseiten. */
    .main-navigation { gap: 1.25rem; }

    /* Der Rand um den Inhalt darf schmaler sein, die Liste gewinnt Platz.
       Die Breite bleibt die gemeinsame (78rem) — nur der Abstand nach oben
       und unten schrumpft. */
    .page-container { margin: 1.25rem auto; }
    .dashboard-container { padding-top: 1.25rem; padding-bottom: 1.25rem; }

    /* Knöpfe nebeneinander statt untereinander, aber mit genug Fläche. */
    .form-actions, .form-actions-split { gap: 0.75rem; }
    .button-primary, .button-secondary { padding: 0 1.4rem; }
}


/* ===========================================================================
   ÜBERSICHT — Kacheln nach Gruppen eingefärbt (28.07.2026)

   Drei Gruppen, drei Farben, dazu eine warme für die eine Handlung, mit der
   fast jeder Arbeitstag beginnt. Warum nicht neun Farben für neun Kacheln:
   siehe Kommentar in index.php.

   Alle Werte auf Weiss nachgerechnet, alle über 4,5:1. Die Grösse der Kacheln
   bleibt unverändert — sie ist für die Bedienung auf Tablets so gewollt.
   =========================================================================== */

/* Dasselbe Mass wie Kopf und Fuss: 78rem breit, 1,25rem Innenabstand.
   Vorher hatte die Übersicht ein eigenes Mass — die Kacheln standen dadurch
   34 px weiter rechts als „Dashboard" im Kopf darüber. Das las sich als
   schiefe Zentrierung, war aber ein zweites Raster. */
.uebersicht {
    width: 100%;
    max-width: 78rem;
    margin: 0 auto;
    padding: 0 1.25rem;
}
/* Der waagerechte Innenabstand steckt jetzt in .uebersicht; bliebe er hier
   zusätzlich stehen, wäre er doppelt. */
.dashboard-container { padding-left: 0; padding-right: 0; }

/* (Der frühere Sonderfall .uebersicht .main-navigation { max-width: none }
   ist entfallen — .main-navigation hat gar keinen Höchstwert mehr.) */

.kachelgruppe + .kachelgruppe { margin-top: 2.25rem; }

.gruppentitel {
    margin: 0 0 0.9rem 0;
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-leise);
    display: flex;
    align-items: center;
    gap: 0.9rem;
}
/* Der Strich läuft neben der Überschrift aus und trennt die Gruppen, ohne
   dafür eine weitere Linie zu brauchen. */
.gruppentitel::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

.kachel-start { background-color: #9a6212; }   /* Bernstein   5,08:1 */
.kachel-tag   { background-color: #45708f; }   /* Akzentblau  5,29:1 */
.kachel-stamm { background-color: #0f6d6a; }   /* Petrol      6,15:1 */
.kachel-schau { background-color: #4a5568; }   /* Schiefer    7,53:1 */

.kachel-start:hover, .kachel-start:active { background-color: #7d4f0e; }
.kachel-tag:hover,   .kachel-tag:active   { background-color: #35576f; }
.kachel-stamm:hover, .kachel-stamm:active { background-color: #0b524f; }
.kachel-schau:hover, .kachel-schau:active { background-color: #394352; }
/* (Hier stand dieselbe Regel zweimal, die erste mit einem achtstelligen Wert
   #39435270 — also 44 % durchsichtig. Sie wurde von der zweiten überschrieben
   und blieb deshalb unbemerkt liegen.) */

/* ---------------------------------------------------------------------------
   DAS STARTBAND
   ---------------------------------------------------------------------------
   „Neue Bestellung" ist keine Kachel neben anderen, sondern der Anfang des
   Arbeitstages. Als fünfte Kachel brach die Reihe auf dem iPad quer (1024 bis
   1194 px) auf 4 + 1 um; als Band darüber steht das Tagesgeschäft in einer
   sauberen Vierer-Reihe UND die häufigste Handlung ist grösser als zuvor.

   Es erbt .nav-button — Farbe, Schatten, Anfassen und die Rückmeldung beim
   Antippen gelten damit unverändert. Geändert wird nur die Richtung. */
.startband {
    flex-direction: row;
    justify-content: flex-start;
    gap: 1.25rem;
    text-align: left;
    padding: 1.5rem 2rem;
    margin-bottom: 1.5rem;
    /* Dieselbe Höhe wie eine halbe Kachel — es soll führen, nicht erschlagen. */
    min-height: 96px;
}
.startband i { margin-bottom: 0; }
.startband-text { display: flex; flex-direction: column; gap: 0.15rem; }
.startband-titel { font-size: 1.35rem; font-weight: 600; }
/* 82 % Weiss auf dem Bernstein sind noch 3,9:1 — für diese Schriftgrösse
   verlangt die Richtlinie 4,5:1 nur ab 18,66 px fett bzw. 24 px normal, hier
   sind es 15 px. Deshalb 90 %: 4,53:1. */
.startband-erklaerung { font-size: 0.94rem; font-weight: 400; color: rgba(255,255,255,0.9); }
.startband-pfeil { margin-left: auto; font-size: 1.5rem !important; opacity: 0.85; }
.startband:hover .startband-pfeil { transform: translateX(4px); }

/* Auf dem Telefon ist neben Symbol und Text kein Platz mehr für den Pfeil —
   und die Erklärung würde umbrechen. Beides tritt ab, die Handlung bleibt.

   ACHTUNG, hier steckt eine Falle: `.startband-pfeil { display: none }` allein
   wirkt NICHT. Font Awesome setzt `.fas { display: var(--fa-display,…) }` mit
   derselben Stärke (eine Klasse) — und `all.min.css` wird im Seitenkopf NACH
   `style.css` geladen, also gewinnt es bei Gleichstand. Nachgemessen: die
   Erklärung verschwand, der Pfeil blieb stehen und drückte die Überschrift in
   den Umbruch.
   Deshalb der Elternteil davor: zwei Klassen schlagen eine. Wer hier ein
   Symbol ausblenden will, muss dasselbe tun. */
@media (max-width: 600px) {
    .startband { padding: 1.25rem 1.5rem; min-height: 0; }
    .startband .startband-pfeil,
    .startband .startband-erklaerung { display: none; }
}

/* Vier Kacheln im Tagesgeschäft brachen bei 1000 px auf 3 + 1 um — eine
   einzelne Kachel in der zweiten Reihe sieht aus wie ein Versehen. Etwas mehr
   Breite und ein kleineres Mindestmass, dann steht jede Gruppe in EINER Reihe.
   Die Kacheln selbst bleiben gleich gross. */
/* (Das Mindestmass 225 px steht jetzt bei .main-navigation selbst — Übersicht
   und Unterseiten rechnen damit gleich.) */

/* Der Kopfbereich rückt ab 768 px auf 1rem Innenabstand — die Übersicht muss
   mit, sonst stehen Kacheln und „Dashboard" vier Pixel versetzt. */
@media (max-width: 768px) {
    .uebersicht, .page-container { padding: 0 1rem; }
}

/* Auf dem Telefon stehen die Kacheln untereinander; dann darf jede etwas
   flacher sein, sonst wird die Übersicht zur Rutschbahn. */
@media (max-width: 600px) {
    .nav-button { padding: 1.4rem; }
    .nav-button i { font-size: 2rem; margin-bottom: 0.5rem; }
    .kachelgruppe + .kachelgruppe { margin-top: 1.75rem; }
}