/* Farben: HTL Lebensmitteltechnologie (Pantone 339C / 144C) */
:root {
    --farbe-primaer: #04A58E;        /* Grün-Türkis */
    --farbe-primaer-dunkel: #038872;
    --farbe-primaer-licht: #e6f6f3;  /* nur für Focus-Ring */
    --farbe-akzent: #EEA743;         /* Orange */
    --farbe-akzent-dunkel: #d68f2c;
    --farbe-akzent-licht: #fff3df;   /* heller Orange-Tint (z.B. Treffer-Highlight) */
    --farbe-verwaltung: #2563EB;          /* Royal Blue (Verwaltung) */
    --farbe-verwaltung-dunkel: #1E40AF;
    --farbe-unterweisung: #5a5d63;        /* Grau (Sicherheits-Unterweisungen) */
    --farbe-unterweisung-dunkel: #3d4045;
    --farbe-mikrobiologie: #7C3AED;          /* Violett (Mikrobiologische Probenverwaltung) */
    --farbe-mikrobiologie-dunkel: #6D28D9;
    --farbe-schulverwaltung: #B0413E;        /* Dunkelrot (Schulverwaltung) */
    --farbe-schulverwaltung-dunkel: #8F3230;

    /* Neutrale Graustufen */
    --farbe-grau-50:  #e7e8ea;       /* Seiten-Hintergrund */
    --farbe-grau-100: #f2f2f3;       /* Zebra-Zeile */
    --farbe-grau-200: #e6e6e8;       /* Rahmen/Trenner */
    --farbe-grau-300: #cfcfd2;       /* Input-Rahmen */

    --farbe-hintergrund: var(--farbe-grau-50);
    --farbe-text: #1f2124;
    --farbe-text-hell: #5a5d63;
    --farbe-rahmen: var(--farbe-grau-200);
    --farbe-erfolg: #2e7d32;
    --farbe-fehler: #c62828;
}

* { box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--farbe-hintergrund);
    color: var(--farbe-text);
    margin: 0;
    padding: 0;
}

header {
    background: white;
    padding: 0.75rem 2rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    border-bottom: 4px solid var(--farbe-primaer);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

header .logo {
    height: 56px;
    width: auto;
    display: block;
    flex-shrink: 0;
}

header h1 {
    margin: 0;
    font-size: 1.35rem;
    color: var(--farbe-primaer);
    flex: 1;
    line-height: 1.2;
}

header nav {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--farbe-text-hell);
    font-size: 0.95rem;
}

header nav a {
    color: var(--farbe-primaer-dunkel);
    text-decoration: none;
    font-weight: 500;
}

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

main {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 2rem;
}

h2 {
    color: var(--farbe-primaer);
    border-bottom: 2px solid var(--farbe-grau-200);
    padding-bottom: 0.35rem;
}

h3 { color: var(--farbe-primaer-dunkel); }

button, .button {
    background: var(--farbe-primaer);
    color: white;
    border: none;
    padding: 0.6rem 1.2rem;
    font-size: 1rem;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    font-weight: 500;
    transition: background 0.15s;
}

button:hover, .button:hover { background: var(--farbe-primaer-dunkel); }

button.akzent, .button.akzent { background: var(--farbe-akzent); }
button.akzent:hover, .button.akzent:hover { background: var(--farbe-akzent-dunkel); }

input, select, textarea {
    font-size: 1rem;
    padding: 0.5rem;
    border: 1px solid var(--farbe-grau-300);
    border-radius: 4px;
    width: 100%;
    max-width: 400px;
    background: white;
    color: var(--farbe-text);
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--farbe-primaer);
    box-shadow: 0 0 0 3px var(--farbe-primaer-licht);
}

.kachel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.kachel {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    border-left: 4px solid var(--farbe-akzent);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    text-decoration: none;
    color: var(--farbe-text);
    display: block;
    transition: transform 0.1s, box-shadow 0.1s;
}

.kachel:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    border-left-color: var(--farbe-primaer);
}

.kachel h3 {
    margin: 0 0 0.5rem 0;
    color: var(--farbe-primaer);
}

table {
    border-collapse: collapse;
    width: 100%;
    background: white;
    margin-top: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

th, td {
    border: 1px solid var(--farbe-rahmen);
    padding: 0.5rem;
    text-align: left;
}

th {
    background: var(--farbe-primaer);
    color: white;
    font-weight: 500;
}

tr:nth-child(even) td { background: var(--farbe-grau-100); }
tr:hover td { background: var(--farbe-grau-200); }

.fehler { color: var(--farbe-fehler); }
.erfolg { color: var(--farbe-erfolg); }
.klein  { font-size: 0.85rem; color: var(--farbe-text-hell); }

/* Modul-Kacheln (z.B. Chemikalienverwaltung) — farblich abgesetzt vom Werkstatt-Stil. */
.kachel-grid-module {
    margin-top: 1rem;
    margin-bottom: 1.5rem;
}
.kachel.kachel-chemie {
    border-left-color: var(--farbe-primaer);
}
.kachel.kachel-chemie:hover {
    border-left-color: var(--farbe-primaer-dunkel);
}
.kachel.kachel-chemie h3 {
    color: var(--farbe-akzent);
}
.kachel.kachel-mikrobiologie { border-left-color: var(--farbe-mikrobiologie); }
.kachel.kachel-mikrobiologie:hover { border-left-color: var(--farbe-mikrobiologie-dunkel); }
.kachel.kachel-mikrobiologie h3 { color: var(--farbe-mikrobiologie); }
.kachel.kachel-verwaltung {
    border-left-color: var(--farbe-verwaltung);
}
.kachel.kachel-verwaltung:hover {
    border-left-color: var(--farbe-verwaltung-dunkel);
}
.kachel.kachel-verwaltung h3 {
    color: var(--farbe-verwaltung);
}
.kachel.kachel-unterweisung {
    border-left-color: var(--farbe-unterweisung);
}
.kachel.kachel-unterweisung:hover {
    border-left-color: var(--farbe-unterweisung-dunkel);
}
.kachel.kachel-unterweisung h3 {
    color: var(--farbe-unterweisung);
}
.kachel.kachel-schulverwaltung {
    border-left-color: var(--farbe-schulverwaltung);
}
.kachel.kachel-schulverwaltung:hover {
    border-left-color: var(--farbe-schulverwaltung-dunkel);
}
.kachel.kachel-schulverwaltung h3 {
    color: var(--farbe-schulverwaltung);
}

/* Disabled-Kachel: visualisiert Roadmap-Modul, das es noch nicht gibt. */
.kachel.kachel-disabled {
    border-left-color: var(--farbe-grau-300);
    opacity: 0.6;
    pointer-events: none;
    cursor: not-allowed;
}
.kachel.kachel-disabled h3 {
    color: var(--farbe-text-hell);
}
.kachel.kachel-disabled:hover {
    border-left-color: var(--farbe-grau-300);
}

/* ── QR-Etiketten-Druck (D3) ─────────────────────────────────────────── */
/* Druck-Container ist im Normalzustand unsichtbar; nur beim Drucken
   wird er sichtbar geschaltet und der Rest der Seite ausgeblendet.
   Body-Klasse 'qr-druck-modus' wird durch qrEtikett.drucke() gesetzt
   und im 'afterprint'-Event wieder entfernt. */

#qr-druck-container { display: none; }

@media print {
    body.qr-druck-modus { background: white; }
    body.qr-druck-modus > *:not(#qr-druck-container) { display: none !important; }
    body.qr-druck-modus #qr-druck-container { display: block; }
}

/* ALT — Avery L7160 (21/Bogen, 63,5 × 38,1 mm; 3×7, oben/links 15,15/7,21 mm).
   Auf Wunsch nur auskommentiert, NICHT geloescht. Zum Reaktivieren diesen
   Block einkommentieren und den 3479-Block darunter auskommentieren.
.etiketten-bogen {
    width: 210mm;
    min-height: 297mm;
    padding: 15.15mm 7.21mm;
    display: grid;
    grid-template-columns: repeat(3, 63.5mm);
    grid-template-rows: repeat(7, 38.1mm);
    column-gap: 2.5mm;
    row-gap: 0;
    box-sizing: border-box;
    page-break-after: always;
    background: white;
    color: black;
}
*/

/* NEU — Avery Zweckform 3479 (27/Bogen, 70 × 32 mm; 3×9).
   3×70 mm = 210 mm → seitlich randlos; 9×32 mm = 288 mm → oben/unten je 4,5 mm. */
.etiketten-bogen {
    width: 210mm;
    /* KEIN min-height:297mm mehr: Bogen = 4,5mm oben + 9×32mm = 292,5mm < A4-Höhe.
       Sonst schiebt Sub-Pixel-Rundung die letzte Zeile auf eine zweite Seite. */
    padding: 4.5mm 0 0 0; /* nur oben 4,5mm (3479-Oben-Rand); unten kein Padding */
    display: grid;
    grid-template-columns: repeat(3, 70mm);
    grid-template-rows: repeat(9, 32mm);
    column-gap: 0;
    row-gap: 0;
    box-sizing: border-box;
    page-break-after: always;
    page-break-inside: avoid; /* ganzen Bogen zusammenhalten — keine Zeile auf Folgeseite */
    background: white;
    color: black;
}

/* Nach dem LETZTEN Bogen keinen Umbruch erzwingen → keine leere Schluss-Seite. */
.etiketten-bogen:last-child { page-break-after: auto; }

.etikett {
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 2mm;
    padding: 2mm 2mm 2mm 6mm; /* links 6mm: Inhalt aus der nicht-druckbaren Drucker-Randzone schieben (Raster bleibt auf der Stanzung) */
    box-sizing: border-box;
}

.etikett-qr canvas {
    width: 26mm;  /* war 28mm (L7160); an 32-mm-hohes 3479-Etikett angepasst */
    height: 26mm;
    display: block;
}

.etikett-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-size: 8pt;
    line-height: 1.2;
}

.etikett-bezeichnung {
    font-weight: 600;
    font-size: 9pt;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;        /* war 2 — mehr Platz fuer lange Bezeichnungen */
    -webkit-box-orient: vertical;
    overflow-wrap: break-word;    /* lange Woerter/Namen umbrechen statt abschneiden */
    word-break: break-word;
}

.etikett-cas { color: #555; font-size: 7pt; margin-top: 1mm; }
.etikett-lager { color: #555; font-size: 7pt; margin-top: 0.5mm; }

/* Bildschirm-Vorschau (vor Druck): Bögen mit leichtem Schatten,
   damit man im Browser sieht, was rauskommt. */
@media screen {
    body.qr-druck-modus #qr-druck-container {
        display: block;
        padding: 1rem;
        background: #f4f4f4;
    }
    body.qr-druck-modus .etiketten-bogen {
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        margin: 0 auto 1rem auto;
    }
}

/* ── Beschriftungsetiketten Avery L7165 (D6) ───────────────────────── */
/* 99,1 x 67,7 mm, 8 Etiketten pro A4 (2 Spalten x 4 Zeilen).
   Aktiviert durch Body-Klasse 'beschriftung-druck-modus'; per
   afterprint-Event wieder entfernt. Bildschirm-Vorschau zeigt Bögen
   mit Schatten, Druck zeigt nur die Bögen ohne Rest-Seite. */

#beschriftung-druck-container { display: none; }

@media print {
    body.beschriftung-druck-modus { background: white; }
    body.beschriftung-druck-modus > *:not(#beschriftung-druck-container) { display: none !important; }
    body.beschriftung-druck-modus #beschriftung-druck-container { display: block; }
    @page { size: A4; margin: 0; }
}

.beschriftung-bogen {
    width: 210mm;
    min-height: 297mm;
    padding: 13.3mm 4.55mm;  /* Avery L7165 oberer und linker Bogen-Rand */
    display: grid;
    grid-template-columns: 99.1mm 2.5mm 99.1mm;
    grid-template-rows: repeat(4, 67.7mm);
    column-gap: 0;
    row-gap: 0;
    box-sizing: border-box;
    page-break-after: always;
    background: white;
    color: black;
}

/* Die mittlere Spalte (2,5 mm) bleibt strukturell leer als Spaltenabstand. */
.beschriftung-bogen .beschriftung-etikett { grid-column: 1; }
.beschriftung-bogen .beschriftung-etikett:nth-child(even) { grid-column: 3; }

.beschriftung-etikett {
    position: relative;
    box-sizing: border-box;
    padding: 2mm 2.5mm 5mm 2.5mm; /* unten extra Platz fuer die Fusszeile */
    border: 0.2mm solid #ccc;     /* nur im Vorschau-Modus sichtbar */
    overflow: hidden;
    font-family: Arial, Helvetica, sans-serif;
    color: #000;
    background: white;
}
.beschriftung-etikett.beschriftung-ueberlauf {
    border-color: #c62828;
    border-width: 0.5mm;
}

.beschriftung-etikett-kopf {
    display: block;   /* gestapelt: Bezeichnung, darunter Signalwort — QR floatet rechts daneben */
}

/* QR-Code auf dem Beschriftungsetikett: 14 mm oben rechts, Inhalt umfliesst ihn. */
.beschriftung-etikett-qr {
    float: right;
    width: 14mm;
    height: 14mm;
    margin: 0 0 1mm 2mm;
}
.beschriftung-etikett-qr canvas {
    width: 14mm;
    height: 14mm;
    display: block;
}
.beschriftung-etikett-bezeichnung {
    font-size: 11pt;
    font-weight: 700;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.15;
}
.beschriftung-etikett-signalwort {
    font-size: 10pt;
    font-weight: 700;
    white-space: nowrap;
}
.beschriftung-etikett-signalwort.gefahr  { color: #c62828; }
.beschriftung-etikett-signalwort.achtung { color: #d68f2c; }

.beschriftung-etikett-formel {
    font-size: 8pt;
    color: #333;
    margin-top: 0.5mm;
}

.beschriftung-etikett-pikt {
    display: flex;
    gap: 1mm;
    margin: 1mm 0;
}
.beschriftung-etikett-pikt img {
    width: 10mm;
    height: 10mm;
    display: block;
}

.beschriftung-etikett-saetze {
    font-size: 7pt;
    line-height: 1.2;
}
.beschriftung-etikett-saetze.beschriftung-saetze-klein {
    font-size: 6pt;
    line-height: 1.15;
}
.beschriftung-etikett-saetze p {
    margin: 0 0 0.3mm 0;
}
.beschriftung-etikett-saetze .code {
    font-weight: 700;
    margin-right: 1mm;
}

.beschriftung-etikett-fuss {
    position: absolute;
    bottom: 1.5mm;
    left: 2.5mm;
    right: 2.5mm;
    font-size: 6pt;
    color: #5a5d63;
    border-top: 0.1mm solid #ccc;
    padding-top: 0.5mm;
}

/* Bildschirm-Vorschau */
@media screen {
    body.beschriftung-druck-modus #beschriftung-druck-container {
        display: block;
        padding: 1rem;
        background: #f4f4f4;
    }
    body.beschriftung-druck-modus .beschriftung-bogen {
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        margin: 0 auto 1rem auto;
    }
}

@media print {
    .beschriftung-etikett { border: none; }  /* keine Hilfsrahmen beim Drucken */
}

/* ── Schüler-Anzeigen-Modal (geteilt, schueler-modal.js) ──────────────── */
.sm-trigger {
    margin-top: 0.35rem;
    padding: 0.4rem 0.8rem;
    font-size: 0.9rem;
    border: 1px solid var(--farbe-primaer);
    background: #fff;
    color: var(--farbe-primaer);
    border-radius: 6px;
    cursor: pointer;
}
.sm-trigger:hover:not(:disabled) { background: var(--farbe-primaer); color: #fff; }
.sm-trigger:disabled { opacity: 0.45; cursor: not-allowed; }

.sm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}
.sm-overlay.offen { display: flex; }
.sm-dialog {
    background: #fff;
    border-radius: 10px;
    width: min(420px, 100%);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}
.sm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    background: var(--farbe-primaer);
    color: #fff;
}
.sm-titel { margin: 0; font-size: 1rem; }
.sm-close {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.25rem;
}
.sm-body { padding: 0.75rem 1rem 1rem; overflow-y: auto; }
.sm-list { margin: 0; padding-left: 1.5rem; }
.sm-list li { padding: 0.15rem 0; }
.sm-info { margin: 0.5rem 0; color: #555; }
.sm-fehler { color: #b00020; }

/* ── QR-Scanner-Overlay (qr-scan-overlay.js) ─────────────────── */
.qrso-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000;
    padding: 1rem;
}
.qrso-box {
    position: relative;
    background: white;
    border-radius: 8px;
    padding: 1.25rem;
    max-width: 540px; width: 100%;
    max-height: 90vh; overflow-y: auto;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.qrso-titel { margin: 0 0 0.75rem 0; font-size: 1.1rem; }
.qrso-close {
    position: absolute; top: 0.5rem; right: 0.5rem;
    background: transparent; border: none;
    font-size: 1.2rem; line-height: 1; cursor: pointer;
    color: var(--farbe-text-hell); padding: 0.35rem 0.5rem;
}
.qrso-close:hover { color: var(--farbe-text); }
#qrso-reader {
    width: 100%; min-height: 280px;
    background: #000; border-radius: 4px; overflow: hidden;
}
.qrso-hint {
    font-size: 0.9rem; color: var(--farbe-text-hell);
    text-align: center; margin: 0.75rem 0 0.25rem 0;
}
.qrso-buttons {
    display: flex; justify-content: center; gap: 0.75rem;
    margin-top: 0.75rem; flex-wrap: wrap;
}
.qrso-btn {
    background: transparent;
    border: 1px solid var(--farbe-grau-300);
    color: var(--farbe-primaer-dunkel);
    border-radius: 4px; cursor: pointer;
    font-size: 0.9rem; padding: 0.4rem 0.8rem;
}
.qrso-btn:hover { border-color: var(--farbe-primaer); }
.qrso-status { text-align: center; margin-top: 0.5rem; min-height: 1.5em; }
.qrso-status.fehler { color: var(--farbe-fehler); }

/* ── Etiketten: Anzahl & Startposition ─────────────────────────────── */
/* Uebersprungene Felder (Startposition): nur in der Bildschirm-Vorschau
   duenn andeuten; im Druck bleiben sie leer. */
@media screen {
    body.qr-druck-modus .etikett-leer,
    body.beschriftung-druck-modus .beschriftung-leer {
        outline: 0.2mm dashed #bbb;
        outline-offset: -1mm;
    }
}

/* Options-Dialog fuer den Einzeldruck */
.etikett-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.etikett-modal {
    background: #fff;
    color: #222;
    padding: 1.5rem;
    border-radius: 8px;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}
.etikett-modal h3 { margin: 0; }
.etikett-modal label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9rem; }
.etikett-modal input { padding: 0.4rem; }
.etikett-modal-aktionen { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.5rem; }
.qrso-status.erfolg { color: var(--farbe-erfolg); }

/* ── Beschriftungsetikett klein (Avery Zweckform 3490, 70 × 36 mm, 24/Bogen) ── */
.beschriftung-bogen-klein {
    width: 210mm;
    padding: 4.5mm 0 0 0;   /* oben 4,5mm; 8×36+4,5 = 292,5mm < A4 */
    display: grid;
    grid-template-columns: repeat(3, 70mm);
    grid-template-rows: repeat(8, 36mm);
    column-gap: 0;
    row-gap: 0;
    box-sizing: border-box;
    page-break-after: always;
    page-break-inside: avoid;
    background: white;
    color: black;
}
.beschriftung-bogen-klein:last-child { page-break-after: auto; }

/* Inhalt der kleinen Variante proportional verkleinern */
/* Seitlich 6 mm Innenabstand (wie beim QR-Etikett 3479): Der 3490-Bogen ist
   randlos gestanzt (3 x 70 mm = 210 mm), die aeusseren Etiketten beginnen also
   bei x=0 bzw. enden bei x=210mm. Ohne diesen Abstand liegen Text und der
   rechts eingefloatete QR in der nicht-druckbaren Zone des Druckers. */
.beschriftung-etikett.beschriftung-etikett-klein { padding: 1.5mm 6mm 3.5mm 6mm; }
.beschriftung-etikett-klein .beschriftung-etikett-bezeichnung { font-size: 7pt; }
.beschriftung-etikett-klein .beschriftung-etikett-signalwort  { font-size: 6pt; }
.beschriftung-etikett-klein .beschriftung-etikett-formel      { font-size: 5pt; }
.beschriftung-etikett-klein .beschriftung-etikett-pikt img    { width: 7mm; height: 7mm; }
.beschriftung-etikett-klein .beschriftung-etikett-saetze      { font-size: 5pt; line-height: 1.1; }
.beschriftung-etikett-klein .beschriftung-etikett-saetze.beschriftung-saetze-klein { font-size: 4.5pt; }
.beschriftung-etikett-klein .beschriftung-etikett-qr          { width: 10mm; height: 10mm; }
.beschriftung-etikett-klein .beschriftung-etikett-qr canvas   { width: 10mm; height: 10mm; }
/* position:absolute ignoriert das Padding des Etiketts — der Druckrand-Abstand
   muss hier eigens stehen. */
.beschriftung-etikett-klein .beschriftung-etikett-fuss        { font-size: 4.5pt; bottom: 1mm; left: 6mm; right: 6mm; }