/* style.css – Zeiterfassung. Responsiv fuer PC, Tablet, Smartphone. */

:root {
    --bg:        #edeef0;
    --card:      #ffffff;
    --ink:       #161a1d;
    --muted:     #6b7178;
    --hairline:  #dadde1;
    --panel:     #1b2024;
    --panel-ink: #f2f4f6;
    --gruen:     #1f8a4c;
    --rost:      #c2410c;
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    font-family: var(--sans);
    color: var(--ink);
    background: var(--bg);
    line-height: 1.5;
}

a { color: inherit; }

.eyebrow {
    display: inline-block; font-size: .72rem; letter-spacing: .18em;
    text-transform: uppercase; color: var(--muted); font-weight: 600;
}
h1 { font-size: 1.6rem; margin: .25rem 0 0; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; margin: 0 0 .9rem; }
h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 1.4rem 0 .6rem; }

/* ---------- Kopfleiste mit Logo ---------- */
.kopfbar {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem;
}
.kopf__titel { min-width: 0; }
.logout {
    display: inline-block; margin-top: .4rem; font-size: .8rem;
    color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--hairline);
}
.logout:hover { color: var(--ink); }

/* v6.0: Zeigt im Kopfbereich, wer angemeldet ist. Seit den benannten
   Verwaltungszugaengen ist das nicht mehr zwangslaeufig "Admin". Optisch bewusst
   zurueckhaltend und auf derselben Hoehe wie der Abmelden-Link, damit der Kopf
   nicht unruhig wird. */
.angemeldet-als {
    display: inline-block; margin-top: .4rem; margin-right: .8rem;
    font-size: .8rem; color: var(--muted);
}
.angemeldet-als strong { color: var(--ink); font-weight: 600; }

.logo-slot {
    width: 266px; height: 112px; max-width: 100%;
    display: flex; align-items: center; justify-content: flex-end; flex: 0 0 auto;
}
.logo-slot img { max-width: 266px; max-height: 112px; width: auto; height: auto; object-fit: contain; }
.logo-slot--leer {
    border: 1px dashed var(--hairline); border-radius: 8px;
    align-items: center; justify-content: center; color: var(--muted);
}
.logo-slot--leer span { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
.logo-slot--vorschau { justify-content: flex-start; margin-bottom: .75rem; }

/* v5.0: Logo oberhalb des Titels (statt daneben) auf der Nutzer-Erfassungsseite */
.kopfbar--logo-oben { flex-direction: column; align-items: center; text-align: center; }
.kopfbar--logo-oben .kopf__titel { text-align: center; }
.logo-slot--oben { width: auto; height: auto; max-height: 84px; justify-content: center; margin-bottom: .6rem; }
.logo-slot--oben img { max-height: 84px; max-width: 100%; }

/* ---------- Erfassungs-/Login-Karte ---------- */
.seite-erfassung {
    display: flex; flex-direction: column; min-height: 100dvh; align-items: center; justify-content: center; padding: 1.25rem;
}
.karte {
    width: 100%; max-width: 440px; background: var(--card);
    border: 1px solid var(--hairline); border-radius: 14px; padding: 1.75rem;
    box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 16px 40px -24px rgba(0,0,0,.25);
}
/* Reserviert Platz für den schwebenden Aktualisieren-Button (.aw-refresh-schwebend,
   fixed, 52px, rechts/unten 16px, z-index 500), der sonst z. B. die rechte "Details"-
   Spalte von Tabellen am unteren Bildschirmrand überlagert und deren Klicks abfängt
   (Button reagiert auf location.reload() statt der eigentliche Link zu navigieren). */
main.karte { padding-bottom: 88px; }
/* Tablet: mehr Breite nutzen statt eine schmale Handy-Spalte in der Bildschirmmitte -
   betrifft alle Monteur-Seiten (erfassung.php, Aufträge, Montagebericht, Muffenprotokoll). */
@media (min-width: 640px) { .karte { max-width: 600px; } }
@media (min-width: 900px) { .karte { max-width: 720px; padding: 2.25rem; } }
.karte .logo-slot { width: 200px; height: 84px; }
.karte .logo-slot img { max-width: 200px; max-height: 84px; }

.status { margin: 0 0 0; font-size: .9rem; font-weight: 600; display: inline-flex; align-items: center; gap: .45rem; }
.status::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; }
.status--an  { color: var(--gruen); }
.status--aus { color: var(--muted); }

.login-form { display: grid; gap: .9rem; margin-top: .5rem; }
.login-form label { display: grid; gap: .3rem; font-size: .82rem; color: var(--muted); }
.login-form input { font: inherit; padding: .6rem .7rem; border: 1px solid var(--hairline); border-radius: 8px; }
.login-form .btn--klein { justify-self: start; }

/* Pausen-Abfrage */
.pause-box {
    margin: 1rem 0; padding: 1rem 1.1rem; border-radius: 10px;
    background: #fff7ed; border: 1px solid #f4d4b4;
}
.pause-box h2 { font-size: .95rem; margin: 0 0 .4rem; }
.pause-box p { margin: 0 0 .7rem; font-size: .9rem; }

/* Zaehlwerk */
.zaehler {
    margin: 1.25rem 0; padding: 1.1rem 1.25rem; background: var(--panel);
    color: var(--panel-ink); border-radius: 10px; text-align: center;
    box-shadow: inset 0 2px 6px rgba(0,0,0,.45);
}
.zaehler__label { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #9aa1a8; }
.zaehler__wert { font-family: var(--mono); font-size: 3rem; font-weight: 600; line-height: 1.05; margin: .15rem 0; font-variant-numeric: tabular-nums; }
.zaehler__wert.ist-plus  { color: #5fd08a; }
.zaehler__wert.ist-minus { color: #f0916a; }
.zaehler__einheit { font-size: 1rem; color: #9aa1a8; margin-left: .25rem; }
.zaehler__sub { font-size: .78rem; color: #9aa1a8; }

.kennzahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: 0 0 1.5rem; padding: 0; }
.kennzahlen--vier { grid-template-columns: repeat(2, 1fr); }
.kennzahlen div { background: var(--bg); border-radius: 8px; padding: .7rem .5rem; text-align: center; }
.kennzahlen dt { font-size: .7rem; color: var(--muted); }
.kennzahlen dd { margin: .2rem 0 0; font-family: var(--mono); font-weight: 600; font-variant-numeric: tabular-nums; }

.aktionen { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.btn {
    appearance: none; border: 0; border-radius: 10px; padding: 1.1rem 1rem;
    font-family: inherit; font-size: 1.05rem; font-weight: 700; color: #fff;
    cursor: pointer; transition: transform .06s ease, filter .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn--kommen { background: var(--gruen); }
.btn--gehen  { background: var(--rost); }
.btn--passiv { opacity: .35; }
.btn--passiv:hover { opacity: .6; }

.fusszeile { margin: 1.25rem 0 0; font-size: .74rem; color: var(--muted); text-align: center; }
/* Backend-Fußzeile: Versionsnummer hier pflegen (bei Updates hochzählen). */
.version-fuss { margin: 1.5rem 0 .75rem; text-align: center; font-size: .74rem; color: var(--muted); }
.v-wort, #logo-egg { -webkit-touch-callout: none; touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }

.meldung { margin: 0 0 1rem; padding: .7rem .9rem; border-radius: 8px; font-size: .9rem; font-weight: 600; }
.meldung--erfolg  { background: #e7f5ec; color: var(--gruen); }
.meldung--warnung { background: #fdeee6; color: var(--rost); }
.meldung--info    { background: #eef1f4; color: var(--ink); }
.hinweis-fehler   { color: var(--muted); }

/* ---------- Abschnitte auf der Kioskkarte ---------- */
.abschnitt { margin-top: 1.5rem; border-top: 1px solid var(--hairline); padding-top: 1rem; }
.abschnitt h2 { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }

.urlaub-form { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: end; }
.urlaub-form label { font-size: .76rem; }
.urlaub-form input[type=date] { width: auto; }
label.inline { display: inline-flex; flex-direction: row; align-items: center; gap: .35rem; font-size: .8rem; color: var(--muted); }

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: .75rem 0 0; }
.chip {
    display: inline-flex; align-items: center; gap: .3rem; background: var(--bg);
    border: 1px solid var(--hairline); border-radius: 999px;
    padding: .2rem .3rem .2rem .65rem; font-size: .8rem; font-family: var(--mono);
}
.chip--kommend { border-color: var(--gruen); color: var(--gruen); }
.chip--plus  { border-color: var(--gruen); color: var(--gruen); }
.chip--minus { border-color: var(--rost); color: var(--rost); }
.chip form { display: inline; }
.chip button { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 .15rem; }
.chip button:hover { color: var(--rost); }

/* Abwesenheits-Kuerzel */
.abw-kuerzel {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.25rem; height: 1.25rem; padding: 0 .25rem;
    border-radius: 999px; font-weight: 700; font-size: .72rem;
    background: #eceae4; color: #4a4640;
}
.abw-U .abw-kuerzel { background: #e7f0fb; color: #245a9e; }
.abw-K .abw-kuerzel { background: #fdecdc; color: #8a5100; }
.abw-F .abw-kuerzel { background: #e7f5ec; color: #1f7a44; }
.abw-G .abw-kuerzel { background: #efe8f8; color: #5c3d99; }
.abw-W .abw-kuerzel { background: #e5f2f2; color: #1f6f74; }
.abw-S .abw-kuerzel { background: #f7e8ef; color: #9e3468; }

.legende { margin: .6rem 0 0; font-size: .78rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: .15rem .9rem; }
.legende strong { color: var(--text, #333); margin-right: .2rem; }
.legende .leg b { color: var(--text, #333); }

/* ---------- Verwaltungsseite ---------- */
.seite-admin { padding: 1.5rem 1rem 4rem; }
.wrap { max-width: 920px; margin: 0 auto; }
.wrap--breit { max-width: 1320px; }
.block { background: var(--card); border: 1px solid var(--hairline); border-radius: 12px; padding: 1.4rem 1.5rem; margin: 1rem 0; }

.zwei-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.raster { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem .9rem; align-items: end; }
.raster .check, .raster .mini, .raster button, .raster .voll { grid-column: 1 / -1; }

label { font-size: .8rem; color: var(--muted); display: grid; gap: .3rem; }
.check { display: flex; flex-direction: row; align-items: center; gap: .4rem; }

input[type=text], input[type=password], input[type=number],
input[type=datetime-local], input[type=date], input[type=time],
input[type=email], input[type=url], input[type=tel], input[type=search], select {
    font: inherit; padding: .55rem .65rem; border: 1px solid var(--hairline);
    border-radius: 8px; background: #fff; color: var(--ink); width: 100%; max-width: 100%;
    font-size: 16px; /* verhindert automatisches Hineinzoomen beim Fokussieren auf iOS Safari */
}
input[type=color] { padding: .2rem; height: 2.6rem; border: 1px solid var(--hairline); border-radius: 8px; width: 100%; }
input[type=file] { font: inherit; max-width: 100%; }

.zeile { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: 1rem; }
.zeile select, .zeile input:not([type=file]) { width: auto; flex: 0 1 auto; }

.btn--klein { background: var(--ink); color: #fff; padding: .55rem 1rem; border-radius: 8px; font-size: .9rem; font-weight: 600; border: 0; cursor: pointer; }
.btn--rand { background: #fff; color: var(--ink); border: 1px solid var(--hairline); }
.btn--gefahr { background: #fff; color: var(--rost); border: 1px solid var(--rost); }
.btn--gefahr:hover { background: var(--rost); color: #fff; }
.knopfzeile { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }

.qr { background: #fff; padding: 8px; border: 1px solid var(--hairline); border-radius: 8px; width: max-content; max-width: 100%; }
.mini { font-size: .76rem; color: var(--muted); margin: .5rem 0 0; }

/* Produktlogo im Kopfbereich (v5.5.0). Ersetzt den Schriftzug „Ergochronia"/
   „Ergotaxia". Höhe begrenzt, Breite automatisch - so passt jedes Logo-Seitenverhältnis,
   ohne den Kopfbereich zu sprengen. Margin/Padding des h1 werden zurückgesetzt, sonst
   entstünde über dem Bild der Abstand einer Textzeile.
   40px, damit der Untertitel im Logo ("Intelligente Zeiterfassung ...") lesbar bleibt -
   bei 34px wird er zu klein. Die Bilddateien liegen mit 120px Höhe vor, also dreifacher
   Auflösung: dadurch bleiben sie auch auf Tablets und hochauflösenden Bildschirmen scharf. */
.produktlogo { margin: 0; padding: 0; line-height: 0; }
/* v5.5.0: Höhe von 40 auf 72px angehoben, damit das Produktlogo links optisch mit
   dem Unternehmenslogo rechts zusammenpasst (dessen Rahmen ist 112px hoch). Nicht
   auf volle 112px: Die Produktlogos sind deutlich breiter als hoch (3:1), bei
   gleicher Höhe würden sie den halben Kopfbereich einnehmen und das Firmenlogo
   optisch erschlagen. 72px bringt beide auf eine ähnliche Fläche, und der
   Untertitel im Logo bleibt gut lesbar. */
.produktlogo img { height: 72px; width: auto; max-width: 100%; display: block; }
/* Firmenlogo rechts oben ist verlinkt (Firmenwebseite) - soll wie ein Logo wirken,
   nicht wie ein Textlink: keine Unterstreichung, nur dezente Rückmeldung. */
.logo-slot a { display: inline-block; line-height: 0; text-decoration: none; transition: opacity .15s; }
.logo-slot a:hover { opacity: .78; }
.logo-slot a:focus-visible { outline: 2px solid var(--rost, #b34700); outline-offset: 3px; border-radius: 3px; }
.produktlogo a { display: inline-block; line-height: 0; }
/* Der Link soll wie ein Logo wirken, nicht wie ein Textlink - daher keine
   Unterstreichung, nur eine dezente Rueckmeldung beim Darueberfahren. */
.produktlogo a { text-decoration: none; transition: opacity .15s; }
.produktlogo a:hover { opacity: .78; }
.produktlogo a:focus-visible { outline: 2px solid var(--rost, #b34700); outline-offset: 3px; border-radius: 3px; }
@media (max-width: 520px) { .produktlogo img { height: 48px; } }

/* Pflichtfeld-Markierung (v5.4.0, eingeführt mit dem Statik-Modul): kleines rotes
   Sternchen hinter dem Label. Bewusst nur als Zusatz zum nativen HTML-"required"
   der Eingabefelder - die eigentliche Prüfung passiert serverseitig. */
.pflicht { color: var(--rost, #b34700); font-weight: 700; margin-left: .15rem; }

/* Einzeiliges Formularlabel (v5.4.0-Folgefix). Hintergrund: die globale Regel
   "label { display: grid }" oben macht JEDES Kindelement im Label zu einer eigenen
   Grid-Zeile - dadurch landeten Index (<sub>), Einheit, Klammerhinweis und das
   Pflicht-Sternchen jeweils auf einer eigenen Zeile (3-4 Zeilen pro Feld). Mit
   display:block fließt der Labelinhalt wieder normal inline in EINE Zeile, direkt
   über dem zugehörigen Eingabefeld. Bewusst als eigene Klasse statt Änderung der
   globalen label-Regel, damit bestehende Masken unverändert bleiben. */
.feld-label { display: block; margin-bottom: .3rem; }
.feld-label .mini { margin: 0; }          /* sonst Abstand nach oben mitten in der Zeile */
.feld-label sub { font-size: .75em; }
.feld-label + input, .feld-label + select { margin-bottom: .75rem; }
.break { word-break: break-all; }
code { font-family: var(--mono); background: var(--bg); padding: .05rem .3rem; border-radius: 4px; }

.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabelle { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tabelle th { text-align: left; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--hairline); padding: .4rem .5rem; }
.tabelle td { padding: .4rem .5rem; border-bottom: 1px solid var(--hairline); }
.tabelle .leer { color: var(--muted); text-align: center; }
.tabelle--schmal { font-size: .8rem; }
.tabelle--uebersicht th, .tabelle--uebersicht td { white-space: nowrap; }
.tabelle .r { text-align: right; }
.tabelle .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tabelle tfoot td { border-top: 2px solid var(--hairline); font-weight: 600; }
.ip { font-family: var(--mono); color: var(--muted); font-size: .78rem; }
.plus { color: var(--gruen); }
.minus { color: var(--rost); }
.loeschen { border: 0; background: none; color: var(--rost); font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0 .3rem; }

/* v6.3.1: Kopf-Kontaktfelder (Auftraggeber/Monteur(e)/Datum/Uhrzeit/Kennzeichen)
   im Montagebericht oben rechts als schmale, linienlose Tabelle - siehe
   formular_montagebericht.php. Auf schmalen Bildschirmen fällt sie automatisch
   unter den Info-Block, statt gequetscht zu werden. */
.aw-kopf-flex { display: flex; flex-wrap: wrap; gap: 1.2rem; justify-content: space-between; align-items: flex-start; }
.aw-kopf-flex__info { flex: 1 1 220px; min-width: 0; }
.aw-kopf-tabelle { border-collapse: collapse; flex: 0 0 auto; margin-left: auto; }
.aw-kopf-tabelle td { border: none; padding: .18rem .4rem; vertical-align: middle; }
.aw-kopf-tabelle td:first-child { text-align: right; white-space: nowrap; padding-right: .6rem; color: var(--muted); }
.aw-kopf-tabelle input { margin: 0; min-width: 9rem; }
@media (max-width: 560px) {
    .aw-kopf-flex { flex-direction: column; }
    .aw-kopf-tabelle { margin-left: 0; width: 100%; }
    .aw-kopf-tabelle td:first-child { text-align: left; }
}

.pill { font-size: .7rem; font-weight: 600; padding: .12rem .5rem; border-radius: 999px; vertical-align: middle; margin-left: .35rem; }
.pill--an  { background: #e7f5ec; color: var(--gruen); }
.pill--aus { background: #f0eee9; color: var(--muted); }
.saldo-inline { font-size: .8rem; font-weight: 600; font-family: var(--mono); margin-left: .5rem; }
.tag { font-size: .7rem; background: #fdeee6; color: var(--rost); padding: .1rem .45rem; border-radius: 999px; margin-left: .4rem; font-weight: 600; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- Responsiv ---------- */
@media (max-width: 720px) {
    .zwei-spalten { grid-template-columns: 1fr; gap: 1.25rem; }
    .block { padding: 1.2rem 1.1rem; }
    h1 { font-size: 1.4rem; }
}
@media (max-width: 560px) {
    .raster { grid-template-columns: 1fr; }
    .logo-slot { width: 100%; justify-content: flex-start; }
    .karte .logo-slot { width: 160px; height: 68px; }
    .karte .logo-slot img { max-width: 160px; max-height: 68px; }
    .kennzahlen { grid-template-columns: repeat(2, 1fr); }
    .zeile .btn--klein { width: 100%; }
}
@media (max-width: 380px) {
    .aktionen { grid-template-columns: 1fr; }
    .zaehler__wert { font-size: 2.5rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ===== Erweiterungen: PIN, Krank, Audit, CSV ===== */
.pin-box {
    margin: 1rem 0; padding: 1.1rem 1.2rem; border-radius: 10px;
    background: #eef2f7; border: 1px solid #cdd7e2;
}
.pin-box h2 { font-size: 1rem; margin: 0 0 .6rem; }
.pin-box input[type=password] { letter-spacing: .3em; }

.statuszeile { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.sperren-form { margin: 0; }
.sperren { border: 1px solid var(--hairline); background: #fff; color: var(--muted);
           border-radius: 8px; padding: .3rem .7rem; font-size: .78rem; cursor: pointer; }
.sperren:hover { color: var(--ink); }

.chip--krank { border-color: #c98a00; color: #8a6100; }
.chip--warn  { border-color: var(--rost); color: var(--rost); }
.chip--warn a, .chip a { text-decoration: none; }

.abschnitt__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.csv-link { font-size: .8rem; color: var(--gruen); text-decoration: none; border-bottom: 1px solid currentColor; white-space: nowrap; }
.csv-link:hover { filter: brightness(.9); }
.export-mini { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.export-mini select { padding: .25rem .35rem; border: 1px solid var(--hairline); border-radius: 6px; font-size: .8rem; background: #fff; color: var(--ink); }
.export-mini button { padding: .28rem .6rem; border: 1px solid var(--hairline); border-radius: 6px; background: #fff; color: var(--gruen); font-size: .78rem; font-weight: 600; cursor: pointer; }
.export-mini button:hover { background: var(--gruen); color: #fff; }

/* ===== Mehrseitiges Backend: Tabs, Filter, KPIs, Pager ===== */
.tabs { display: flex; flex-wrap: wrap; gap: .3rem; margin: .25rem 0 1.25rem; border-bottom: 1px solid var(--hairline); }
.tabs a {
    text-decoration: none; color: var(--muted); font-weight: 600; font-size: .92rem;
    padding: .55rem .9rem; border-radius: 8px 8px 0 0; border: 1px solid transparent; border-bottom: 0;
}
.tabs a:hover { color: var(--ink); background: #fff; }
.tabs a.aktiv { color: var(--ink); background: #fff; border-color: var(--hairline); }

.filterleiste { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.filterleiste input[type=search], .filterleiste select, .filterleiste input[type=date] {
    font: inherit; padding: .5rem .6rem; border: 1px solid var(--hairline); border-radius: 8px; background: #fff; width: auto;
}
.filterleiste input[type=search] { min-width: 12rem; flex: 1 1 12rem; }

.tabelle th a { color: var(--muted); text-decoration: none; }
.tabelle th a:hover { color: var(--ink); }

.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin-bottom: 1rem; }
.kpi { background: var(--card); border: 1px solid var(--hairline); border-radius: 12px; padding: 1rem 1.1rem; }
.kpi__zahl { display: block; font-family: var(--mono); font-size: 1.7rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi__txt { font-size: .78rem; color: var(--muted); }

.pager { display: flex; gap: .75rem; align-items: center; justify-content: center; margin-top: 1rem; }
.zurueck { margin: 0 0 .5rem; }
.zurueck a { color: var(--muted); text-decoration: none; font-size: .9rem; }
.zurueck a:hover { color: var(--ink); }
.urlaub-stand { font-size: .85rem; color: var(--muted); margin: 0 0 .6rem; }

@media (max-width: 480px) { .filterleiste input[type=search] { min-width: 0; flex-basis: 100%; } }

/* ---- v2.0: Krankmeldung (Frontend) ---- */
.block-frontend {
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--rand, #e2e6ea);
}
.block-frontend h2 { margin: 0 0 .6rem; font-size: 1.05rem; }
.block-frontend .btn { display: inline-block; text-decoration: none; }

.krank-liste { list-style: none; margin: .4rem 0 0; padding: 0; }
.krank-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .55rem 0;
    border-bottom: 1px solid var(--rand, #e2e6ea);
}
.krank-item:last-child { border-bottom: 0; }
.krank-item--geloescht { opacity: .6; }
.krank-item--geloescht .krank-item__info span:first-child { text-decoration: line-through; }
.krank-item__info { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.krank-item__info a { font-weight: 600; word-break: break-word; }
.krank-item__info .mini { color: var(--grau-text, #6b7280); }

.zurueck-link { margin-top: 1.2rem; }
.zurueck-link a { text-decoration: none; color: var(--gruen, #205e41); font-weight: 600; }

/* ---- v3.0: Kiosk-Terminal (Tablet, stationaer) ---- */
.seite-kiosk {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 100dvh; padding: 1.25rem; background: var(--panel);
}
.kiosk {
    width: 100%; max-width: 520px; background: var(--card);
    border-radius: 18px; padding: 1.5rem; box-shadow: 0 20px 60px rgba(0,0,0,.4);
    text-align: center;
}
.kiosk__kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; gap: .75rem; }
.kiosk__firma { font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.kiosk__sprache { display: flex; gap: .3rem; }
.kiosk__sprache a { font-size: .7rem; padding: .15rem .4rem; border-radius: 4px; color: var(--muted, #6b7178); text-decoration: none; border: 1px solid #dadde1; }
.kiosk__sprache a.aktiv { background: var(--ink); color: #fff; border-color: var(--ink); }
.kiosk__kopf .logo-slot { width: 140px; height: 60px; }
.kiosk__kopf .logo-slot img { max-width: 140px; max-height: 60px; }

.kiosk__bild { position: static; }
.kiosk__kamera { position: relative; }
#kiosk-video {
    width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 14px;
    background: #000; transform: scaleX(-1); /* Frontkamera spiegeln, wirkt natuerlicher */
    display: block;
}
.kiosk__rahmen {
    position: absolute; inset: 8%; border: 3px solid rgba(255,255,255,.75);
    border-radius: 16px; pointer-events: none;
    box-shadow: 0 0 0 999px rgba(0,0,0,.25);
}
.kiosk__hinweis { margin: 1rem 0 .5rem; color: var(--muted); font-size: .95rem; }
#kiosk-start { margin-top: .75rem; background: var(--ink); }

.kiosk__karte h2 { margin: .25rem 0 .5rem; font-size: 1.5rem; }
.kiosk__status {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    margin: 0 0 1.25rem; font-size: .95rem; font-weight: 700; color: var(--muted);
}
.kiosk__status-punkt { width: 11px; height: 11px; border-radius: 50%; background: #9aa1a8; flex: 0 0 auto; }
.kiosk__status-punkt--an { background: var(--gruen); box-shadow: 0 0 0 4px rgba(31,138,76,.18); }
.kiosk__aktionen { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1rem; }
.btn--kiosk { padding: 1.4rem 1rem; font-size: 1.15rem; border-radius: 12px; }
.btn--kiosk:disabled {
    background: #e3e5e8; color: #9aa1a8; cursor: not-allowed;
    box-shadow: none; opacity: 1;
}
.kiosk__abbrechen {
    border: 0; background: none; color: var(--muted); font-size: .9rem;
    padding: .5rem; cursor: pointer; text-decoration: underline;
}

.kiosk__overlay { padding: 2.75rem 1rem; }
.kiosk__icon {
    width: 128px; height: 128px; line-height: 128px; margin: 0 auto 1.1rem; border-radius: 50%;
    font-size: 4rem; color: #fff; animation: kiosk-pop .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes kiosk-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.kiosk__overlay--ok .kiosk__icon { background: var(--gruen); box-shadow: 0 0 0 10px rgba(31,138,76,.15); }
.kiosk__overlay--fehler .kiosk__icon { background: var(--rost); box-shadow: 0 0 0 10px rgba(194,65,12,.15); }
.kiosk__overlay-text { font-size: 1.3rem; font-weight: 800; margin: 0 0 .3rem; }
.kiosk__overlay--ok .kiosk__overlay-text { color: var(--gruen); }
.kiosk__overlay--fehler .kiosk__overlay-text { color: var(--rost); }
.kiosk__overlay-name { font-size: 1rem; color: var(--muted); margin: 0; }

.kiosk #kiosk-fertig { margin-top: .5rem; }

@media (max-width: 480px) {
    .kiosk { padding: 1.1rem; border-radius: 0; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; }
}

/* ---- v4.1: PWA-Installationshinweis (iOS) ---- */
.pwa-hinweis {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    background: #f0f7f3; border: 1px solid var(--gruen, #1f8a4c); border-radius: 8px;
    padding: .55rem .8rem; margin: 1rem 0 0; font-size: .85rem; color: var(--ink, #161a1d);
}
/* v5.0-Fix: ohne diese Regel gewinnt .pwa-hinweis{display:flex} gegen das
   hidden-Attribut (gleiche Spezifitaet, Autoren-Stylesheet vor User-Agent-
   Stylesheet) - der Hinweis liess sich dadurch nie wegklicken. */
.pwa-hinweis[hidden] { display: none; }
.pwa-hinweis button {
    border: 0; background: none; font-size: 1.1rem; line-height: 1; cursor: pointer;
    color: var(--muted, #6b7178); padding: .1rem .3rem; flex: 0 0 auto;
}

/* ---- v4.3: Easter-Egg-Rennspiel ---- */
.spiel-wrap { position: relative; width: 100%; max-width: 380px; margin: 0 auto; aspect-ratio: 380/216;
    border: 3px solid var(--ink, #161a1d); border-radius: 14px; overflow: hidden; background: #dfe3e7; box-sizing: border-box; }
#spiel-canvas { display: block; width: 100%; max-width: 100%; height: 100%; background: #dfe3e7; }
.spiel-overlay {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 1rem; background: #ffffff;
    text-align: center; padding: 1rem;
}
.spiel-overlay[hidden] { display: none; }
.spiel-steuerung { display: flex; align-items: stretch; gap: .6rem; max-width: 380px; margin: .8rem auto 0; touch-action: manipulation; }
.spiel-knopf {
    flex: 0 0 auto; width: 92px; padding: .9rem .5rem; font-size: 1.05rem; font-weight: 700; line-height: 1.3;
    border-radius: 10px; background: var(--gruen, #1f8a4c); color: #fff; border: 0;
    box-shadow: 0 3px 0 rgba(0,0,0,.25); cursor: pointer; touch-action: manipulation;
}
.spiel-knopf--mitte {
    flex: 1 1 auto; width: auto; background: var(--ink, #161a1d);
    display: flex; align-items: center; justify-content: center;
}
.spiel-knopf:active { box-shadow: 0 0 0 rgba(0,0,0,.25); transform: translateY(3px); }
.spiel-knopf:disabled { opacity: .55; box-shadow: 0 3px 0 rgba(0,0,0,.25); transform: none; cursor: default; }
.spiel-besten { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: space-between; }
.spiel-besten > div { flex: 1 1 30%; min-width: 140px; }
.spiel-besten h3 { font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted, #6b7178); margin: 0 0 .3rem; }
.spiel-besten ol { margin: 0; padding-left: 1.2rem; font-size: .88rem; }
.spiel-besten li { margin: .15rem 0; }

/* ======================================================================
   RTL-Unterstuetzung (Version 8.0) - greift automatisch, wenn <html dir="rtl">
   gesetzt ist (aktuell nur Arabisch, siehe istRtlSprache() in funktionen.php).
   Deckt die wichtigsten Layout-Spiegelungen ab: Text- und Kopfzeilen-
   Ausrichtung, Abstaende, Listen-Einzug. Fuer Detailfaelle (einzelne
   Formulare) kann bei Bedarf gezielt nachgezogen werden.
   ====================================================================== */
[dir="rtl"] { text-align: right; }
[dir="rtl"] .kopfbar { flex-direction: row-reverse; }
[dir="rtl"] .kopf__titel { text-align: right; }
[dir="rtl"] .zaehler, [dir="rtl"] .kennzahlen, [dir="rtl"] dl.kennzahlen { text-align: right; }
[dir="rtl"] .btn--rand, [dir="rtl"] .btn--klein { text-align: center; } /* Buttons bleiben zentriert lesbar */
[dir="rtl"] .zurueck-link { text-align: right; }
[dir="rtl"] .zurueck-link a::before { content: ''; }
[dir="rtl"] ol, [dir="rtl"] ul { padding-right: 1.2rem; padding-left: 0; }
[dir="rtl"] .spiel-besten ol { padding-right: 1.2rem; padding-left: 0; }
[dir="rtl"] .tabelle th, [dir="rtl"] .tabelle td { text-align: right; }
[dir="rtl"] .tabelle .r { text-align: left; } /* Zahlenspalten bleiben an der aussen liegenden Kante */
[dir="rtl"] .sprachwahl { text-align: left; }
[dir="rtl"] .kiosk__sprache { flex-direction: row-reverse; }
[dir="rtl"] .spiel-steuerung { flex-direction: row-reverse; }

/* v3.0.44: Schwebender Aktualisieren-Button im Backend - gleiches Muster wie im
   Monteur-Frontend (dort inline via awMonteurStilTag() definiert), hier zentral in
   style.css, damit er auf allen Backend-Seiten verfuegbar ist. */
.aw-refresh-schwebend { position: fixed; right: 16px; bottom: 16px; width: 52px; height: 52px;
    border-radius: 50%; background: #24404A; color: #fff; border: none; font-size: 1.6rem;
    box-shadow: 0 2px 10px rgba(0,0,0,.3); cursor: pointer; z-index: 500; line-height: 1; }
.aw-refresh-schwebend:active { transform: scale(.94); }

/* v3.0.53: Erweiterte Tabellen (Filter/Sortierung/Spalten verschieben) */
.aw-tabelle-filterzeile td { background: #f4f6f7; padding: 4px 6px; }
.aw-tabelle-filter-input { width: 100%; box-sizing: border-box; font-size: 0.85rem; padding: 4px 6px;
    border: 1px solid #ccc; border-radius: 4px; }
.aw-sort-text { display: inline-flex; align-items: center; gap: 2px; user-select: none; }
.aw-sort-pfeil { font-size: 0.75em; opacity: .4; }
.aw-sort-pfeil.aw-sort-aktiv { opacity: 1; font-size: 0.85em; }
.aw-sort-text:hover .aw-sort-pfeil { opacity: 1; }
.aw-spalte-verschieben { display: inline-flex; gap: 2px; margin-left: 6px; }
.aw-spalte-pfeil { background: rgba(255,255,255,.15); border: none; color: inherit; border-radius: 3px;
    cursor: pointer; font-size: 0.7rem; padding: 1px 4px; line-height: 1.4; }
.aw-spalte-pfeil:active { background: rgba(255,255,255,.35); }
.aw-tabelle-reset-link { font-size: 0.85rem; }

/* v3.0.60: Durchsuchbare Artikel-Auswahl - eigene Trefferliste statt natives
   Dropdown, erscheint erst nach Eingabe (kein automatisches Aufklappen mehr). */
.aw-artikel-suche-wrapper { position: relative; }
.aw-artikel-suche-feld { font-size: 0.9rem; padding: 8px 10px; border: 1px solid #ccc; border-radius: 6px; width: 100%; box-sizing: border-box; }
.aw-artikel-ergebnisse {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 40; margin-top: 2px;
    background: #fff; border: 1px solid #ccc; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,.12);
    max-height: 260px; overflow-y: auto;
}
.aw-artikel-ergebnis-gruppe { padding: 5px 10px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; color: #888; background: #f4f6f5; }
.aw-artikel-ergebnis-zeile { padding: 7px 10px; font-size: 0.88rem; cursor: pointer; }
.aw-artikel-ergebnis-zeile:hover, .aw-artikel-ergebnis-aktiv { background: #eef4f2; }
.aw-artikel-ergebnis-leer { padding: 10px; font-size: 0.85rem; color: #888; font-style: italic; }

/* v3.0.58: .aw-liste-tabelle nutzte bereits data-label-Attribute je Zelle, aber die
   zugehoerige CSS-Regel fehlte komplett (data-label blieb bisher wirkungslos) - auf
   schmalen Bildschirmen (iOS) lief die Tabelle seitlich ueber den Rahmen hinaus,
   statt sich wie offenbar beabsichtigt in eine gestapelte Kartenansicht umzuwandeln. */
@media (max-width: 640px) {
    .aw-liste-tabelle thead { display: none; }
    .aw-liste-tabelle, .aw-liste-tabelle tbody, .aw-liste-tabelle tr, .aw-liste-tabelle td {
        display: block; width: 100%; box-sizing: border-box;
    }
    .aw-liste-tabelle tr { border: 1px solid var(--hairline, #ddd); border-radius: 8px; margin-bottom: 10px; padding: 6px 10px; }
    .aw-liste-tabelle td { border: none; padding: 4px 0; text-align: left; }
    .aw-liste-tabelle td[data-label]:not([data-label=""])::before {
        content: attr(data-label) ": "; font-weight: 600; color: var(--stahl, #667); margin-right: 4px;
    }
}

/* v3.0.58: Artikel-/Mengenfelder je Position im Montagebericht hatten auf manchen
   mobilen Browsern eine deutlich zu grosse Hoehe (vermutlich durch fehlende explizite
   Groessenvorgabe im Flex-Kontext) - jetzt explizit und robust auf eine kompakte,
   einheitliche Groesse festgelegt statt der Browser-Vorgabe ueberlassen. */
.aw-pos-zeile { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 8px; }
.aw-pos-zeile .aw-artikel-suche-wrapper { flex: 1 1 220px; min-width: 180px; }
.aw-pos-zeile select.aw-pos-artikel { height: 2.7rem; max-height: 2.7rem; }
.aw-pos-zeile input.aw-pos-menge { flex: 0 0 100px; max-width: 100px; height: 2.7rem; box-sizing: border-box; }
/* v6.3.1: Position löschen - schmaler Button hinter der Menge, siehe
   formular_montagebericht.php (Materialverbrauch). */
.aw-pos-zeile button.aw-pos-entfernen { flex: 0 0 2.7rem; width: 2.7rem; height: 2.7rem; box-sizing: border-box;
    border: 1px solid var(--hairline); border-radius: 8px; background: #fff; color: var(--rost, #b34700);
    font-size: 1.05rem; cursor: pointer; }
.aw-pos-zeile button.aw-pos-entfernen:hover { background: #fdeee6; }

/* v5.5.0: Materialpositionen auf dem Smartphone. Nebeneinander ist dort zu eng
   (Artikelnamen wie "RML-160/125 – Abschrumpfmuffe" werden abgeschnitten), deshalb
   bewusst untereinander - aber kompakt: Artikel zuerst, Menge darunter.
   Die Höhen sind hier fest gesetzt und die Zwischenräume klein gehalten, weil die
   Zeilen sonst durch das Zusammenspiel von Flexbox und dem eingeblendeten Suchfeld
   sehr hoch wurden und zwischen den Positionen große Lücken entstanden. */
@media (max-width: 560px) {
    .aw-pos-zeile {
        flex-direction: column;
        gap: 4px;
        margin-bottom: 12px;
        align-items: stretch;
    }
    .aw-pos-zeile > * {
        width: 100%;
        max-width: 100%;
        flex: 0 0 auto;      /* verhindert das Auseinanderziehen der Zeile */
        min-width: 0;
    }
    /* Artikel oben, Menge darunter - der Artikel ist die eigentliche Auswahl,
       die Menge nur die Ergänzung dazu. */
    .aw-pos-zeile .aw-artikel-suche-wrapper,
    .aw-pos-zeile select.aw-pos-artikel { order: 1; }
    .aw-pos-zeile input.aw-pos-menge { order: 2; }
    .aw-pos-zeile input.aw-pos-menge,
    .aw-pos-zeile select.aw-pos-artikel,
    .aw-pos-zeile .aw-artikel-suche-feld {
        height: 2.9rem;
        max-height: 2.9rem;
        box-sizing: border-box;
    }
    .aw-pos-zeile button.aw-pos-entfernen { order: 3; height: 2.9rem; max-height: 2.9rem; }
}

/* v4.0.5: Klick-Sortierung im Tabellenkopf (aw_tabelle_sortierbar.js) */
th.aw-sortierbar { user-select: none; white-space: nowrap; }
th.aw-sortierbar::after { content: " ⇅"; opacity: .35; font-size: .85em; }
th.aw-sortierbar.aw-sort-auf::after { content: " ▲"; opacity: 1; }
th.aw-sortierbar.aw-sort-ab::after { content: " ▼"; opacity: 1; }

/* v5.0.8: Soll-Vorgabe aus dem Auftrag im Montagebericht */
.aw-soll-block { background: #f4f6f7; border-left: 3px solid var(--gruen, #1F5E3D); border-radius: 6px; padding: 10px 12px; margin-bottom: 12px; }

/* v5.3.0: Schutzschalter gegen versehentliches Ändern kritischer Zugangsdaten
   (DMS/Nextcloud, Mailserver). Formularfelder sind per Attribut "disabled" gesperrt,
   solange der Regler nicht aktiv ist - das ist keine reine Optik, sondern verhindert
   auch technisch, dass gesperrte Felder überhaupt mitgesendet werden. */
.aw-schutz-leiste { display:flex; align-items:center; gap:10px; background:#fff7e6;
    border:1px solid #f0d999; border-radius:8px; padding:10px 14px; margin-bottom:14px; }
.aw-schutz-regler { position:relative; display:inline-block; width:42px; height:24px; flex-shrink:0; }
.aw-schutz-regler input { opacity:0; width:0; height:0; }
.aw-schutz-schieber { position:absolute; cursor:pointer; inset:0; background:#c9ccd1;
    border-radius:24px; transition:.15s; }
.aw-schutz-schieber::before { content:""; position:absolute; height:18px; width:18px; left:3px; bottom:3px;
    background:#fff; border-radius:50%; transition:.15s; }
.aw-schutz-regler input:checked + .aw-schutz-schieber { background:#C1652F; }
.aw-schutz-regler input:checked + .aw-schutz-schieber::before { transform:translateX(18px); }
.aw-schutz-leiste[data-frei="1"] { background:#fdeee6; border-color:#e0a37e; }

/* v5.5.11: Schulungsmandant. Dauerhaft sichtbarer Hinweis auf jeder Backend-Seite -
   bewusst nicht ausblendbar, denn der gesamte Zweck ist, dass niemand einen
   Übungsbeleg für einen echten hält. Gelb statt Rot: Rot ist in dieser Oberfläche
   für Fehler und Stornierungen reserviert und würde hier fälschlich Alarm auslösen. */
.schulung-banner { margin: .2rem 0 1rem; padding: .6rem .9rem; border-radius: 8px;
    background: #fff4ce; border: 1px solid #e3c46a; color: #6b5310;
    font-size: .88rem; font-weight: 600; }

/* Vorschaublöcke im Reset-Bereich. Drei Farben für drei Bedeutungen: was
   verschwindet, was bleibt, was unbekannt ist und deshalb unangetastet bleibt. */
.reset-block { border-radius: 8px; padding: .7rem .9rem; margin-bottom: .8rem; border: 1px solid; }
.reset-block h4 { margin: 0 0 .4rem; font-size: .92rem; }
.reset-block--weg    { background: #fdeee6; border-color: #e0a37e; }
.reset-block--bleibt { background: #e7f5ec; border-color: #9ecdb1; }
.reset-block--unbek  { background: #f4f6f7; border-color: #c9ccd1; }
.reset-block ul { margin: .3rem 0 0; padding-left: 1.1rem; font-size: .85rem; columns: 2; }
.reset-block li { break-inside: avoid; }
@media (max-width: 620px) { .reset-block ul { columns: 1; } }

/* v5.5.16: Überfällige Rechnungen. Die Färbung sitzt auf der ganzen Zeile, nicht nur
   auf dem Datum – beim Überfliegen einer langen Liste fällt eine gefärbte Zeile auf,
   ein einzelnes rotes Datum nicht. Bewusst zurückhaltend gesättigt, damit die Tabelle
   auch bei vielen offenen Posten lesbar bleibt. */
tr.aw-zeile-ueberfaellig > td { background: #fdeceb; }
tr.aw-zeile-ueberfaellig:hover > td { background: #fbdedc; }
tr.aw-zeile-ueberfaellig > td:first-child { box-shadow: inset 3px 0 0 #c0392b; }
.aw-mahn-badge { display: inline-block; padding: 1px 6px; border-radius: 10px;
    background: #c0392b; color: #fff; font-size: .72rem; white-space: nowrap; }

/* v6.3: Einheitlicher Belegwandlungs-Block. Sitzt auf jeder Belegseite an
   derselben Stelle (direkt unter dem Kopf), damit man die Schaltflaechen nicht
   je Belegart neu suchen muss. Auf schmalen Bildschirmen untereinander. */
.aw-wandlung-liste { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.aw-wandlung-schritt { flex: 1 1 15rem; min-width: 13rem; }
.aw-wandlung-schritt p.mini { margin-top: .35rem; }
/* v6.3.33: Schaltflaeche und Text sauber untereinander (vorher ueberlagerte der Knopf die
   "Ablauf"-Zeile, der Link-Knopf war unterstrichen und ohne Abstand). */
.aw-wandlung > h3 { margin-bottom: .5rem; }
.aw-wandlung > p.mini { margin: 0 0 1rem; line-height: 1.5; }
.aw-wandlung-schritt { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; }
.aw-wandlung-schritt .btn, .aw-wandlung-schritt a.btn { display: inline-block; margin: 0 0 .4rem; line-height: 1.3; text-decoration: none; position: static; }
.aw-wandlung-schritt form { margin: 0; }
.aw-wandlung-schritt p.mini { margin: 0; line-height: 1.45; }
@media (max-width: 640px) {
    .aw-wandlung-liste { flex-direction: column; gap: .9rem; }
    .aw-wandlung-schritt { flex: 1 1 auto; }
}

/* v6.3: Feldauswahl je Übersicht. Zugeklappt, damit sie die Liste nicht
   überlagert - wer sie braucht, klappt sie auf. */
.aw-spaltenwahl { margin: 6px 0 4px; }
.aw-spaltenwahl > summary { cursor: pointer; font-size: .85rem; color: var(--muted); }
.aw-spaltenwahl > summary:hover { color: var(--ink); }
.aw-spaltenwahl-liste {
    display: flex; flex-wrap: wrap; gap: .3rem 1.1rem;
    margin: .5rem 0 .2rem; padding: .6rem .8rem;
    border: 1px solid var(--hairline); border-radius: 6px;
}
.aw-spaltenwahl-liste label { font-size: .85rem; white-space: nowrap; }

/* Responsiv: Je mehr Spalten gewählt sind, desto eher wird seitlich gescrollt
   statt den Text unleserlich zu quetschen. Bei wenigen Spalten nutzt die Tabelle
   die volle Breite. */
.tabelle[data-aw-spalten] { width: 100%; }
@media (max-width: 900px) {
    .tabelle[data-aw-spalten] { min-width: 0; }
    .tabelle[data-aw-spalten="5"], .tabelle[data-aw-spalten="6"],
    .tabelle[data-aw-spalten="7"], .tabelle[data-aw-spalten="8"] { min-width: 44rem; }
    .tabelle[data-aw-spalten="9"], .tabelle[data-aw-spalten="10"],
    .tabelle[data-aw-spalten="11"], .tabelle[data-aw-spalten="12"] { min-width: 60rem; }
}
@media (max-width: 560px) {
    .aw-spaltenwahl-liste { flex-direction: column; gap: .35rem; }
}

/* v6.3: Positionsbearbeitung im Einkauf - gleiche Anmutung wie im Verkauf. */
.aw-pos-bearbeiten { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.aw-pos-pfeile { display: inline-flex; gap: .15rem; }
@media (max-width: 700px) {
    .aw-pos-bearbeiten { flex-direction: column; align-items: stretch; }
    .aw-pos-bearbeiten input { max-width: none !important; }
}

/* v6.3.13: Das Logo ist Ausloeser des Easter Eggs - das Bild selbst nimmt keine Eingaben an, damit kein Bildmenue (Speichern/Kopieren) erscheint. */
#logo-egg img { pointer-events: none; -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }