/*
 * GERÜST, KEIN DESIGN.
 *
 * Diese Datei macht die Oberfläche benutzbar und sonst nichts: Layout, Abstände,
 * Lesbarkeit. Das eigentliche Design macht Codex - diese Datei darf dabei
 * vollständig ersetzt werden.
 *
 * Was dabei erhalten bleiben muss, weil app.js daran hängt:
 *   - die data-Attribute im Markup (data-ansicht, data-bereich, data-fehler, …)
 *   - das Attribut hidden zum Ein- und Ausblenden von Ansichten
 *   - die IDs der Formulare (form-login, form-register, form-benutzer, form-firma)
 *
 * Klassennamen sind frei änderbar, solange das Markup mitgeändert wird.
 * Die Farbwerte unten sind aus assets/styles.css der Landingpage übernommen.
 */

:root {
    --bg:       #090b0d;
    --surface:  #11161b;
    --surface2: #171b20;
    --yellow:   #ffc400;
    --red:      #ef3b2d;
    --green:    #8abf3b;
    --text:     #f4f3ee;
    --muted:    #a9afb7;
    --line:     rgba(255, 255, 255, .12);
}

/* Einheitliche Eingabedialoge statt Browser-Prompts. */
.app-dialog{width:min(calc(100% - 32px),480px);padding:0;border:1px solid rgba(255,159,10,.28);border-radius:14px;background:#1b242a;color:var(--text);box-shadow:0 28px 90px rgba(0,0,0,.58)}
.app-dialog::backdrop{background:rgba(5,9,11,.72);backdrop-filter:blur(5px)}
.app-dialog-form{display:grid;gap:20px;padding:22px}
.app-dialog-kopf{display:flex;align-items:center;gap:12px;padding-bottom:15px;border-bottom:1px solid rgba(255,159,10,.18)}
.app-dialog-symbol{flex:0 0 38px;width:38px;height:38px;border:1px solid rgba(139,195,55,.38);border-radius:10px;background:rgba(139,195,55,.09)}
.app-dialog-symbol:before{content:"";display:block;width:20px;height:20px;margin:8px;background:#a9d56a;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4L19 7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4L19 7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.app-dialog-kopf small{display:block;margin-bottom:3px;color:#ffad24;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.app-dialog-kopf h2{margin:0;color:#f3f5f6;font-size:17px;line-height:1.35}
.app-dialog label{margin:0}.app-dialog label>span{margin-bottom:7px;color:#d6dcdf;font-size:12px;font-weight:600}
.app-dialog input{width:100%;height:44px;padding:0 12px;border:1px solid rgba(255,255,255,.18);border-radius:8px;background:#141c21;color:#fff;font:inherit;font-size:15px}
.app-dialog input:focus{border-color:var(--orange);box-shadow:0 0 0 4px rgba(255,138,0,.1);outline:0}
.app-dialog label>small{display:block;margin-top:7px;color:#8f9aa0;font-size:10px}
.app-dialog-aktionen{display:flex;justify-content:flex-end;gap:8px;padding-top:4px}
.app-dialog-aktionen .knopf{min-height:40px;box-shadow:none}
.app-dialog-aktionen .knopf-geist{border-color:rgba(255,255,255,.13);background:#232d33;color:#b9c2c7}
.app-dialog-gefahr{border-color:rgba(239,87,75,.34)}
.app-dialog-gefahr .app-dialog-kopf{border-bottom-color:rgba(239,87,75,.2)}
.app-dialog-gefahr .app-dialog-symbol{border-color:rgba(239,87,75,.38);background:rgba(239,87,75,.09)}
.app-dialog-gefahr .app-dialog-symbol:before{background:#ef6a5e;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2.5 20h19Z'/%3E%3Cpath d='M12 9v5M12 18h.01'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2.5 20h19Z'/%3E%3Cpath d='M12 9v5M12 18h.01'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
.app-dialog-gefahr .app-dialog-kopf small{color:#ef8279}
.app-dialog-text{margin:0;color:#d8dee1;font-size:12px;line-height:1.6}
.app-dialog-folgen{display:grid;gap:8px;margin:0;padding:12px 14px 12px 31px;border:1px solid rgba(239,87,75,.14);border-radius:8px;background:rgba(239,87,75,.045);color:#aeb8bd;font-size:11px;line-height:1.5}
.app-dialog-folgen li::marker{color:#ef6a5e}
.app-dialog-loeschen{border-color:#d94d43;background:#d94d43;color:#fff}
.app-dialog-loeschen:hover{border-color:#ef6258;background:#ef6258;color:#fff}
@media(max-width:520px){.app-dialog{width:calc(100% - 20px);border-radius:12px}.app-dialog-form{gap:17px;padding:17px}.app-dialog-kopf{align-items:flex-start}.app-dialog-kopf h2{font-size:15px}.app-dialog input{font-size:16px}.app-dialog-aktionen{display:grid;grid-template-columns:1fr}.app-dialog-aktionen .knopf{width:100%;min-height:46px}.app-dialog-aktionen .knopf:last-child{grid-row:1}}

/* Alternative kompakte Plantafel für kleine Bildschirme. */
.plan-darstellung{display:inline-flex;gap:4px;padding-left:6px;border-left:1px solid rgba(255,255,255,.1)}
.plantafel-mobilliste{display:grid;gap:10px;padding:12px;background:#182127}
.plantafel-mobilliste[hidden]{display:none}
.plan-mobilkarte{overflow:hidden;border:1px solid rgba(255,255,255,.11);border-radius:10px;background:#202a30;box-shadow:0 6px 16px rgba(0,0,0,.13);transition:border-color .15s,transform .15s}
.plan-mobilkarte[role=button]{cursor:pointer}.plan-mobilkarte[role=button]:hover{border-color:rgba(255,159,10,.35);transform:translateY(-1px)}
.plan-mobilkarte[role=button]:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.plan-mobilkopf{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:13px 14px;background:linear-gradient(90deg,rgba(255,159,10,.065),transparent)}
.plan-mobilkopf>div{min-width:0}.plan-mobilkopf strong,.plan-mobilkopf small{display:block}.plan-mobilkopf strong{color:#f1f4f5;font-size:13px;line-height:1.35}.plan-mobilkopf small{margin-top:3px;color:#9aa6ac;font-size:10px;line-height:1.4}
.plan-mobilstatus{flex:none;padding:4px 7px;border:1px solid rgba(255,159,10,.25);border-radius:999px;background:rgba(255,159,10,.07);color:#ffb84a;font-size:9px;font-weight:700;white-space:nowrap}
.plan-mobilstatus.ist-frei{border-color:rgba(139,195,55,.28);background:rgba(139,195,55,.07);color:#aed670}.plan-mobilstatus.ist-belegt{color:#ffbd55}.plan-mobilstatus.ist-konflikt{border-color:rgba(225,87,73,.38);background:rgba(225,87,73,.09);color:#ef8177}
.plan-mobilzeiten{display:grid;grid-template-columns:88px 1fr;gap:7px 10px;margin:0;padding:11px 14px;border-top:1px solid rgba(255,255,255,.06);font-size:11px}.plan-mobilzeiten dt{color:#849198}.plan-mobilzeiten dd{margin:0;color:#d5dbde;font-weight:600}
.plan-mobilsperrung{margin:0;padding:0 14px 12px;color:#9da8ae;font-size:10px}
.plan-mobileinsaetze{display:grid;gap:1px;border-top:1px solid rgba(255,255,255,.06)}
.plan-mobileinsatz{width:100%;min-height:52px;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;border:0;border-bottom:1px solid rgba(255,255,255,.055);background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}.plan-mobileinsatz:last-child{border-bottom:0}.plan-mobileinsatz:hover{background:rgba(255,159,10,.055)}
.plan-mobileinsatz>span{min-width:0}.plan-mobileinsatz strong,.plan-mobileinsatz small{display:block}.plan-mobileinsatz strong{overflow:hidden;color:#e8edef;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.plan-mobileinsatz small{margin-top:2px;color:#89969c;font-size:9px}.plan-mobileinsatz time{flex:none;color:#ffbd55;font-size:9px;white-space:nowrap}
.plan-mobilfrei,.plan-mobilleer{margin:0;padding:18px 14px;color:#8f9ba1;font-size:11px;text-align:center}

@media(max-width:700px){
    [data-ansicht-bereich=plantafel]>.tafel:first-child{margin-bottom:14px}
    [data-ansicht-bereich=plantafel] .tafel-kopf{align-items:stretch}
    [data-ansicht-bereich=plantafel] .tafel-kopf>[data-plan-zeitraum]{width:100%}
    .plantafel-steuerung{display:grid;grid-template-columns:1fr auto auto auto;width:100%;gap:6px}
    .plan-umschalter{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;width:100%;margin:0}
    .plan-darstellung{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:1fr 1fr;width:100%;padding:0 0 7px;border:0;border-bottom:1px solid rgba(255,255,255,.08)}
    .plan-umschalter .knopf,.plan-darstellung .knopf{width:100%;min-height:40px}
    .plantafel-steuerung>[data-plan-zurueck],.plantafel-steuerung>[data-plan-vor]{min-width:44px;min-height:42px;font-size:18px}
    .plantafel-steuerung>[data-plan-heute]{min-height:42px}
    .plantafel-steuerung>[data-plan-wochen]{grid-column:4;min-width:100px!important;min-height:42px!important;height:42px!important}
    .plantafel-mobilliste{padding:9px}.plan-mobilkarte{border-radius:9px}
    .plan-legende{padding:11px 12px}
    [data-plantafel]{--plan-projekt-breite:132px}
    [data-plantafel] .plan-kopf-ecke{padding-inline:8px;font-size:11px}
    [data-plantafel] .plan-zeile-titel{min-height:48px;padding:7px 7px 6px 9px}
    [data-plantafel] .plan-zeile-titel:before{top:8px;bottom:8px}
    [data-plantafel] .plan-zeile-titel strong{display:-webkit-box;overflow:hidden;font-size:10px;line-height:1.25;text-overflow:ellipsis;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2}
    [data-plantafel] .plan-zeile-titel small{margin-top:2px;font-size:7px;line-height:1.25}
    [data-plantafel] .plan-balken{min-height:27px;margin-block:4px;padding-inline:6px;font-size:8px}
}

/* Kontrollbuchkarten: positiver Abschluss grün, nur offene Mängel rot. */
[data-ansicht-bereich=protokolle] details.kontrolle-eintrag{padding:0;border:1px solid rgba(255,255,255,.1);border-left-width:3px;background:rgba(22,31,36,.72)}
[data-ansicht-bereich=protokolle] details.kontrolle-eintrag.ist-positiv{border-left-color:#79ae35}
[data-ansicht-bereich=protokolle] details.kontrolle-eintrag.ist-offen{border-left-color:#e34e43}
[data-ansicht-bereich=protokolle] details.kontrolle-eintrag[open]{background:rgba(25,35,40,.9);box-shadow:0 8px 22px rgba(0,0,0,.1)}
[data-ansicht-bereich=protokolle] .kontrolle-eintrag-kopf{align-items:center;min-height:52px;padding:11px 13px;cursor:pointer;list-style:none;user-select:none}
[data-ansicht-bereich=protokolle] .kontrolle-eintrag-kopf::-webkit-details-marker{display:none}
[data-ansicht-bereich=protokolle] .kontrolle-eintrag-kopf:after{content:"";flex:0 0 9px;width:9px;height:9px;margin:0 2px 0 4px;border:solid #8f9aa0;border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg);transition:transform .18s,color .18s}
[data-ansicht-bereich=protokolle] details[open]>.kontrolle-eintrag-kopf:after{transform:translateY(2px) rotate(225deg)}
[data-ansicht-bereich=protokolle] .kontrolle-eintrag-kopf:hover{background:rgba(255,255,255,.025)}
[data-ansicht-bereich=protokolle] .kontrolle-eintrag-kopf:focus-visible{outline:2px solid var(--orange);outline-offset:-3px;border-radius:8px}
[data-ansicht-bereich=protokolle] .kontrolle-eintrag-inhalt{padding:0 13px 13px;border-top:1px solid rgba(255,255,255,.055)}
[data-ansicht-bereich=protokolle] .kontrolle-eintrag-inhalt>.kontrolle-standort-zeile:first-child{margin-top:11px}

@media(max-width:700px){
    [data-ansicht-bereich=protokolle] .kontrolle-eintrag-kopf{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 8px;padding:11px}
    [data-ansicht-bereich=protokolle] .kontrolle-eintrag-kopf>strong,[data-ansicht-bereich=protokolle] .kontrolle-eintrag-kopf>small{grid-column:1}
    [data-ansicht-bereich=protokolle] .kontrolle-eintrag-kopf>.marke{grid-column:1;justify-self:start;margin:4px 0 0}
    [data-ansicht-bereich=protokolle] .kontrolle-eintrag-kopf:after{grid-column:2;grid-row:1/4;align-self:center}
    [data-ansicht-bereich=protokolle] .kontrolle-eintrag-inhalt{padding:0 11px 11px}
}
@media(max-width:390px){.plan-mobilkopf{padding:11px}.plan-mobilzeiten{grid-template-columns:78px 1fr;padding:10px 11px}.plan-mobileinsatz{align-items:flex-start;flex-direction:column;gap:5px;padding:10px 11px}.plan-mobileinsatz time{white-space:normal}[data-plantafel]{--plan-projekt-breite:112px}[data-plantafel] .plan-zeile-titel small{display:none}}

/* Sekundäraktionen bleiben auch nach dem Theme dezent. */
.knopf.knopf-geist{border-color:rgba(255,255,255,.16);background:#222c32;color:#c3ccd0;box-shadow:none}
.knopf.knopf-geist:hover{border-color:rgba(255,159,10,.42);background:#2a353b;color:#fff;transform:none}

/* Kontrollbuch: viele kleine Aktionen, aber nur eine große Hauptaktion. */
[data-ansicht-bereich=protokolle] .kontrolle-eintrag-knoepfe,
[data-ansicht-bereich=protokolle] .kontrolle-nachtragen{display:flex;align-items:center;flex-direction:row;gap:7px;flex-wrap:wrap}
[data-ansicht-bereich=protokolle] .kontrolle-eintrag-knoepfe .knopf,
[data-ansicht-bereich=protokolle] .kontrolle-nachtragen .knopf{width:auto;min-height:34px;padding:6px 11px;font-size:10px}
[data-ansicht-bereich=protokolle] #kontrolle-nachweis{width:auto;min-height:36px;padding:7px 12px}

@media(max-width:700px){
    [data-ansicht-bereich=protokolle] .kontrolle-buch{padding:12px}
    [data-ansicht-bereich=protokolle] .kontrolle-nachweis{display:grid;grid-template-columns:1fr 1fr;align-items:end;width:100%;gap:8px}
    [data-ansicht-bereich=protokolle] .kontrolle-nachweis label{min-width:0;margin:0}
    [data-ansicht-bereich=protokolle] .kontrolle-nachweis input{width:100%;min-width:0}
    [data-ansicht-bereich=protokolle] #kontrolle-nachweis{grid-column:1/-1;justify-self:end;width:auto}
    [data-ansicht-bereich=protokolle] .kontrolle-eintrag{padding:12px}
    [data-ansicht-bereich=protokolle] .kontrolle-eintrag-knoepfe .knopf{flex:1 1 125px;width:auto;min-height:38px}
    [data-ansicht-bereich=protokolle] .kontrolle-nachtragen .knopf{flex:0 1 auto;width:auto;max-width:100%;min-height:38px}
    [data-ansicht-bereich=protokolle] .kontrolle-mangel-knoepfe .knopf{width:auto;min-height:36px;padding:6px 10px;font-size:10px}
}

/* Finale VLM-Produktoberfläche */
body{min-width:320px;background:radial-gradient(circle at 85% 0,rgba(255,196,0,.045),transparent 28%),#090b0d;-webkit-font-smoothing:antialiased}body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.knopf{border-radius:7px;box-shadow:0 8px 22px rgba(255,196,0,.1);transition:.18s}.knopf:hover{background:#ffd127;transform:translateY(-1px)}.knopf-geist{box-shadow:none}.knopf-geist:hover{background:rgba(255,255,255,.05)}input,select{background:#0c1115;transition:.18s}input:focus,select:focus{border-color:rgba(255,196,0,.7);box-shadow:0 0 0 4px rgba(255,196,0,.07);outline:0}.meldung{position:fixed;z-index:100;right:28px;top:88px;max-width:380px;box-shadow:0 20px 60px #000}
.tor{grid-template-columns:minmax(420px,1.18fr) minmax(430px,.82fr);padding:0;overflow:hidden;background:#090c0e}.tor-glow{display:block;position:absolute;width:800px;height:800px;left:-180px;bottom:-430px;border-radius:50%;background:rgba(255,196,0,.1);filter:blur(110px)}.tor-buehne{position:relative;z-index:1;align-self:stretch;display:flex;flex-direction:column;padding:clamp(35px,5vw,75px);border-right:1px solid var(--line);overflow:hidden;background:radial-gradient(circle at 20% 40%,rgba(36,48,57,.42),transparent 40%),linear-gradient(135deg,#0b0f12,#080a0c)}.tor-buehne:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 49.8%,rgba(255,255,255,.025) 50%,transparent 50.2%),linear-gradient(transparent 49.8%,rgba(255,255,255,.025) 50%,transparent 50.2%);background-size:65px 65px}.tor-buehne>img{position:relative;width:225px;height:auto}.tor-buehne>div{position:relative;margin:auto 0;max-width:700px}.tor-buehne>div>span{color:var(--yellow);font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase}.tor-buehne h2{margin:21px 0;font-size:clamp(48px,5.2vw,84px);line-height:1.01;letter-spacing:-.06em}.tor-buehne h2 em{color:var(--yellow);font-style:normal}.tor-buehne p{max-width:580px;color:#aab1b6;font-size:clamp(16px,1.3vw,20px)}.tor-buehne ul{display:flex;flex-wrap:wrap;gap:12px 24px;margin:34px 0 0;padding:0;list-style:none;color:#bbc1c5;font-size:12px}.tor-buehne li:before{content:"✓";display:inline-grid;place-items:center;width:19px;height:19px;margin-right:7px;border:1px solid rgba(255,196,0,.5);border-radius:50%;color:var(--yellow)}.tor-karte{position:relative;z-index:2;margin:auto;width:min(calc(100% - 48px),450px);padding:42px;background:linear-gradient(145deg,rgba(24,30,35,.97),rgba(13,17,20,.98));box-shadow:0 30px 90px rgba(0,0,0,.45)}.tor-marke{display:none}.sicherheits-hinweis{display:flex;align-items:center;gap:8px;margin-bottom:23px;color:#899299;font-size:10px;text-transform:uppercase;letter-spacing:.1em}.sicherheits-hinweis i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(138,191,59,.1)}.formular h1{font-size:31px}.wechsel{padding-top:19px;border-top:1px solid var(--line)}
.huelle{grid-template-columns:250px minmax(0,1fr);background:transparent}.seitenleiste{position:sticky;top:0;height:100vh;padding:22px 15px;background:rgba(13,17,20,.97)}.seiten-marke{width:181px;margin:1px 10px 38px}.seiten-marke img{width:100%}.nav-label{margin:0 12px 10px;color:#59636b;font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase}.seitenleiste nav{gap:5px}.seitenleiste nav a{position:relative;display:flex;align-items:center;min-height:46px;padding:0 13px;border:1px solid transparent;border-radius:7px;font-size:13px;transition:.18s}.seitenleiste nav a span{display:grid;place-items:center;width:25px;color:#69737a}.seitenleiste nav a:hover{background:rgba(255,255,255,.035);color:#fff}.seitenleiste nav a.aktiv{border-color:rgba(255,196,0,.1);background:linear-gradient(90deg,rgba(255,196,0,.13),rgba(255,196,0,.035))}.seitenleiste nav a.aktiv:before{content:"";position:absolute;left:-14px;width:3px;height:25px;background:var(--yellow)}.seiten-fuss{padding:16px 10px;border-top:1px solid var(--line)}.kopf{position:sticky;top:0;z-index:30;height:76px;padding:0 clamp(22px,3vw,46px);background:rgba(9,11,13,.84);backdrop-filter:blur(18px)}main{width:min(100%,1500px);margin:auto;padding:clamp(25px,3vw,48px)}.ansicht-intro{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:32px}.ansicht-intro span{color:var(--yellow);font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}.ansicht-intro h1{margin:9px 0 6px;font-size:clamp(30px,3vw,44px);line-height:1.08;letter-spacing:-.045em}.ansicht-intro p{margin:0;color:var(--muted);font-size:13px}.ansicht-intro time{padding:12px 16px;border-left:1px solid var(--line);font-size:13px}.kacheln{gap:15px}.kachel{position:relative;min-height:154px;padding:22px;background:linear-gradient(145deg,#151b20,#0e1317);overflow:hidden;transition:.18s}.kachel:after{content:"";position:absolute;right:-40px;bottom:-65px;width:150px;height:150px;border:1px solid rgba(255,196,0,.08);border-radius:50%}.kachel:hover{transform:translateY(-2px);border-color:rgba(255,196,0,.25)}.kachel strong{margin-top:18px;font-size:30px}.tafel{background:linear-gradient(145deg,#13191e,#0f1418);box-shadow:0 12px 35px rgba(0,0,0,.12);overflow:hidden}.tafel-kopf{min-height:62px;padding:13px 20px}.liste-schlicht{display:grid;grid-template-columns:repeat(2,1fr);margin:0;padding:0;list-style:none}.liste-schlicht li{position:relative;margin:0;padding:20px 20px 20px 49px;border-bottom:1px solid var(--line)}.liste-schlicht li:nth-child(odd){border-right:1px solid var(--line)}.liste-schlicht li:before{content:"→";position:absolute;left:20px;color:var(--yellow)}.reihe-formular{display:grid;grid-template-columns:repeat(4,1fr);gap:0 14px;background:rgba(255,255,255,.015)}.reihe-formular .reihe-knoepfe,.reihe-formular .fehler{grid-column:1/-1}.tabelle th{background:rgba(255,255,255,.018);font-size:9px;letter-spacing:.07em;text-transform:uppercase}.tabelle tbody tr:hover{background:rgba(255,255,255,.025)}.marke{display:inline-flex;align-items:center;gap:6px;text-transform:uppercase;font-size:9px}.marke:before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
@media(max-width:1050px){.tor{grid-template-columns:1fr}.tor-buehne{position:absolute;inset:0;opacity:.23}.tor-buehne>div,.tor-buehne>img{display:none}.tor-marke{display:block;margin:0 auto 26px}.tor-marke img{width:190px}.huelle{grid-template-columns:210px 1fr}.seiten-marke{width:155px}.reihe-formular{grid-template-columns:repeat(2,1fr)}}
@media(max-width:860px){.huelle{display:block;padding-bottom:72px}.seitenleiste{position:fixed;z-index:50;inset:auto 0 0;height:68px;padding:5px 10px;border-width:1px 0 0}.seiten-marke,.nav-label,.seiten-fuss{display:none}.seitenleiste nav{height:100%;grid-template-columns:repeat(3,1fr);grid-auto-flow:initial}.seitenleiste nav a{min-height:0;justify-content:center;flex-direction:column;gap:2px;padding:4px;font-size:9px}.seitenleiste nav a span{width:auto;margin:0}.seitenleiste nav a.aktiv:before{inset:0 auto auto;width:30px;height:2px}.kopf{height:66px;padding:0 17px}.wer{display:none}main{padding:24px 17px}.ansicht-intro time{display:none}.kacheln{grid-template-columns:1fr}.liste-schlicht{grid-template-columns:1fr}.liste-schlicht li:nth-child(odd){border-right:0}.gitter-formular,.reihe-formular{grid-template-columns:1fr}.reihe-formular .reihe-knoepfe,.reihe-formular .fehler{grid-column:auto}.meldung{top:78px;left:15px;right:15px;max-width:none}}
@media(max-width:500px){.tor{display:block;padding:20px 0}.tor-karte{width:calc(100% - 28px);padding:27px 22px;margin:20px auto}.formular h1{font-size:27px}.ansicht-intro h1{font-size:30px}.kopf-rechts{gap:7px}.kuerzel{display:none}.reihe-knoepfe{flex-direction:column}.reihe-knoepfe .knopf{width:100%}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, system-ui, sans-serif;
    line-height: 1.55;
}

[hidden] { display: none !important; }

a { color: inherit; text-decoration: none; }

/* ── Bedienelemente ─────────────────────────────────────── */

.knopf {
    min-height: 46px;
    padding: 0 22px;
    border: 1px solid var(--yellow);
    border-radius: 8px;
    background: var(--yellow);
    color: #111;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.knopf[disabled] { opacity: .5; cursor: default; }
.knopf-klein { min-height: 36px; padding: 0 14px; font-size: 14px; }
.knopf-geist { background: transparent; color: var(--text); border-color: var(--line); }

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

label { display: block; margin-bottom: 16px; }
label > span { display: block; margin-bottom: 6px; font-size: 13px; color: var(--muted); }
label > small { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }

input, select {
    width: 100%;
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface2);
    color: var(--text);
    font: inherit;
}

.fehler {
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid rgba(239, 59, 45, .5);
    border-radius: 8px;
    background: rgba(239, 59, 45, .1);
    font-size: 14px;
}

.meldung {
    margin: 0 0 20px;
    padding: 12px 14px;
    border: 1px solid rgba(138, 191, 59, .5);
    border-radius: 8px;
    background: rgba(138, 191, 59, .1);
    font-size: 14px;
}

/* ── Anmeldung ──────────────────────────────────────────── */

.tor { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.tor-glow { display: none; }

.tor-karte {
    width: min(100%, 430px);
    padding: 36px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
}
.tor-marke { display: block; margin-bottom: 28px; }
.tor-marke img { width: 190px; height: auto; }

.formular h1 { margin: 0 0 6px; font-size: 26px; letter-spacing: -.03em; }
.formular .unter { margin: 0 0 24px; color: var(--muted); font-size: 14px; }
.formular .knopf { width: 100%; }

.wechsel { margin: 20px 0 0; font-size: 14px; color: var(--muted); text-align: center; }
.wechsel button {
    border: 0; background: transparent; padding: 0;
    color: var(--yellow); font: inherit; cursor: pointer; text-decoration: underline;
}

/* ── Angemeldeter Bereich ───────────────────────────────── */

.huelle { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }

.seitenleiste {
    display: flex;
    flex-direction: column;
    padding: 22px 16px;
    border-right: 1px solid var(--line);
    background: var(--surface);
}
.seiten-marke { margin-bottom: 28px; }
.seiten-marke img { width: 150px; height: auto; }

.seitenleiste nav { display: grid; gap: 4px; }
.seitenleiste nav a {
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--muted);
    font-size: 15px;
}
.seitenleiste nav a span { margin-right: 10px; }
.seitenleiste nav a.aktiv { background: rgba(255, 196, 0, .11); color: var(--yellow); }

.seiten-fuss { margin-top: auto; }
.bald { color: #6d747a; font-size: 12px; }

.inhalt { min-width: 0; }

.kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 28px;
    border-bottom: 1px solid var(--line);
}
.kopf small { display: block; color: var(--muted); font-size: 12px; }
.kopf strong { font-size: 20px; letter-spacing: -.02em; }

.kopf-rechts { display: flex; align-items: center; gap: 14px; }
.wer { text-align: right; }
.wer strong { font-size: 14px; }
.kuerzel {
    display: grid; place-items: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--surface2);
    font-size: 13px; font-weight: 700;
}

main { padding: 28px; }

.kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 22px; }
.kachel { padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.kachel span  { display: block; color: var(--muted); font-size: 12px; }
.kachel strong { display: block; margin: 4px 0; font-size: 26px; letter-spacing: -.03em; }
.kachel small { color: var(--muted); font-size: 12px; }

.tafel { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); margin-bottom: 22px; }
.tafel-kopf {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 14px 18px; border-bottom: 1px solid var(--line);
}

.liste-schlicht { margin: 0; padding: 14px 18px 18px 34px; color: var(--muted); font-size: 14px; }
.liste-schlicht li { margin-bottom: 6px; }

.hinweis { margin: 0; padding: 0 18px 18px; color: var(--muted); font-size: 13px; }

.reihe-formular, .gitter-formular { padding: 18px; border-bottom: 1px solid var(--line); }
.gitter-formular { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 16px; border-bottom: 0; }
.gitter-formular .breit { grid-column: 1 / -1; }
.gitter-formular .fehler, .gitter-formular .reihe-knoepfe { grid-column: 1 / -1; }
.reihe-knoepfe { display: flex; gap: 10px; }

.tabelle-huelle { overflow-x: auto; }
.tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabelle th, .tabelle td { padding: 12px 18px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tabelle th { color: var(--muted); font-size: 12px; font-weight: 600; }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle td.tat { text-align: right; }
.tabelle .still { color: var(--muted); }

.marke { padding: 2px 8px; border-radius: 999px; font-size: 12px; border: 1px solid var(--line); }
.marke-gut { color: var(--green); border-color: rgba(138, 191, 59, .5); }
.marke-aus { color: var(--muted); }

.leer { padding: 18px; color: var(--muted); font-size: 14px; }

/* Normale Datenlisten duerfen niemals die App horizontal verbreitern. Die
   Plantafel und der VZ-Zeichentisch verwenden eigene Huellen und bleiben von
   dieser Regel unberuehrt. */
html,
body { max-width: 100%; overflow-x: hidden; }
.huelle,
.inhalt,
main { min-width: 0; max-width: 100%; }
.tabelle-huelle {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}
.tabelle {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
}
.tabelle th,
.tabelle td {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}
.tabelle td.tat { white-space: nowrap; }

@media (max-width: 860px) {
    .huelle { grid-template-columns: 1fr; }
    .seitenleiste { border-right: 0; border-bottom: 1px solid var(--line); }
    .seitenleiste nav { grid-auto-flow: column; }
    .seiten-fuss { display: none; }
    .kacheln { grid-template-columns: 1fr; }
    .gitter-formular { grid-template-columns: 1fr; }
    main, .kopf { padding: 18px; }
}

/* Kaskadenabschluss: Produktoberfläche liegt bewusst über dem Basisgerüst. */
.tor{grid-template-columns:minmax(420px,1.18fr) minmax(430px,.82fr);padding:0;overflow:hidden}.tor-glow{display:block}.tor-buehne{display:flex}.tor-karte{margin:auto;width:min(calc(100% - 48px),450px);padding:42px;background:linear-gradient(145deg,rgba(24,30,35,.97),rgba(13,17,20,.98));box-shadow:0 30px 90px rgba(0,0,0,.45)}.tor-marke{display:none}.formular h1{font-size:31px}.huelle{grid-template-columns:250px minmax(0,1fr)}.seitenleiste{position:sticky;top:0;height:100vh;padding:22px 15px;background:rgba(13,17,20,.97)}.seiten-marke{width:181px;margin:1px 10px 38px}.seiten-marke img{width:100%}.seitenleiste nav{gap:5px}.seitenleiste nav a{min-height:46px;padding:0 13px}.seiten-fuss{padding:16px 10px;border-top:1px solid var(--line)}.kopf{position:sticky;top:0;z-index:30;height:76px;padding:0 clamp(22px,3vw,46px);background:rgba(9,11,13,.84);backdrop-filter:blur(18px)}main{width:min(100%,1500px);margin:auto;padding:clamp(25px,3vw,48px)}.kacheln{gap:15px}.kachel{min-height:154px;padding:22px;background:linear-gradient(145deg,#151b20,#0e1317)}.tafel{background:linear-gradient(145deg,#13191e,#0f1418)}.tafel-kopf{min-height:62px;padding:13px 20px}.liste-schlicht{display:grid;grid-template-columns:repeat(2,1fr);margin:0;padding:0;list-style:none}.liste-schlicht li{margin:0;padding:20px 20px 20px 49px}.reihe-formular{display:grid;grid-template-columns:repeat(4,1fr);gap:0 14px}.reihe-formular .reihe-knoepfe,.reihe-formular .fehler{grid-column:1/-1}
@media(max-width:1050px){.tor{grid-template-columns:1fr}.tor-buehne{position:absolute;inset:0;opacity:.23}.tor-marke{display:block;margin:0 auto 26px}.huelle{grid-template-columns:210px 1fr}.reihe-formular{grid-template-columns:repeat(2,1fr)}}
@media(max-width:860px){.huelle{display:block;padding-bottom:72px}.seitenleiste{position:fixed;z-index:50;inset:auto 0 0;height:68px;padding:5px 10px;border-width:1px 0 0}.seiten-marke,.nav-label,.seiten-fuss{display:none}.seitenleiste nav{height:100%;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-flow:initial}.seitenleiste nav a{min-height:0;justify-content:center;flex-direction:column;padding:4px;font-size:9px}.kopf{height:66px;padding:0 17px}.wer{display:none}main{padding:24px 17px}.kacheln{grid-template-columns:1fr}.liste-schlicht{grid-template-columns:1fr}.gitter-formular,.reihe-formular{grid-template-columns:1fr}.reihe-formular .reihe-knoepfe,.reihe-formular .fehler{grid-column:auto}}
@media(max-width:500px){.tor{display:block;padding:20px 0}.tor-karte{width:calc(100% - 28px);padding:27px 22px;margin:20px auto}.formular h1{font-size:27px}}

/* Helleres Verkehrssicherungs-Theme */
:root{--bg:#11171b;--surface:#1a2228;--surface2:#222c33;--yellow:#ffc400;--orange:#ff8a00;--orange-soft:#ffad24;--text:#f7f7f3;--muted:#aeb8bf;--line:rgba(255,255,255,.15)}
body{background:radial-gradient(circle at 88% 4%,rgba(255,138,0,.12),transparent 27%),radial-gradient(circle at 18% 86%,rgba(255,196,0,.055),transparent 30%),#11171b}.tor{background:#12181c}.tor-buehne{background:radial-gradient(circle at 22% 42%,rgba(255,138,0,.15),transparent 37%),linear-gradient(135deg,#1b242a,#101518)}.tor-buehne:after{content:"";position:absolute;right:-48px;bottom:42px;width:390px;height:44px;transform:skew(-30deg);background:repeating-linear-gradient(90deg,var(--orange) 0 31px,transparent 31px 52px);filter:drop-shadow(0 8px 18px rgba(255,138,0,.18));opacity:.9}.tor-glow{background:rgba(255,138,0,.16)}.tor-buehne>div>span,.ansicht-intro span{color:var(--orange-soft)}.tor-buehne h2 em{background:linear-gradient(90deg,var(--yellow),var(--orange));-webkit-background-clip:text;background-clip:text;color:transparent}.tor-buehne li:before{border-color:rgba(255,138,0,.65);color:var(--orange-soft)}.tor-karte{border-color:rgba(255,138,0,.24);background:linear-gradient(145deg,rgba(38,49,57,.98),rgba(23,31,36,.99));box-shadow:0 32px 90px rgba(0,0,0,.35),0 0 70px rgba(255,138,0,.055)}.tor-karte:before{content:"";position:absolute;inset:0 0 auto;height:4px;border-radius:14px 14px 0 0;background:repeating-linear-gradient(135deg,var(--yellow) 0 18px,var(--orange) 18px 36px,#20272c 36px 54px)}input,select{background:#182127;border-color:rgba(255,255,255,.16)}input:focus,select:focus{border-color:var(--orange);box-shadow:0 0 0 4px rgba(255,138,0,.1)}.knopf{border-color:var(--orange);background:linear-gradient(110deg,var(--yellow),var(--orange-soft))}.knopf:hover{background:linear-gradient(110deg,#ffd437,#ff9f22)}.wechsel button{color:var(--orange-soft)}.sicherheits-hinweis i{background:var(--orange);box-shadow:0 0 0 4px rgba(255,138,0,.12)}
.huelle{background:linear-gradient(120deg,rgba(255,255,255,.018),transparent 32%)}.seitenleiste{border-right-color:rgba(255,138,0,.16);background:linear-gradient(180deg,#20292f,#171e23)}.seitenleiste:after{content:"";position:absolute;inset:auto 15px 112px;height:8px;background:repeating-linear-gradient(135deg,var(--orange) 0 10px,transparent 10px 18px);opacity:.65}.seitenleiste nav a{color:#a9b2b8}.seitenleiste nav a.aktiv{border-color:rgba(255,138,0,.23);background:linear-gradient(90deg,rgba(255,138,0,.19),rgba(255,196,0,.055));color:#ffd164}.seitenleiste nav a.aktiv:before{background:linear-gradient(var(--yellow),var(--orange))}.kopf{background:rgba(23,30,35,.9);border-bottom-color:rgba(255,138,0,.13)}.kuerzel{background:#2b363d;border-color:rgba(255,138,0,.24)}main{position:relative}.ansicht-intro h1{color:#fff}.ansicht-intro time{border-color:rgba(255,138,0,.36);color:#ffc46d}
.kachel{border-color:rgba(255,255,255,.16);background:linear-gradient(145deg,#27323a,#1a2329);box-shadow:0 16px 36px rgba(0,0,0,.16)}.kachel:before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:linear-gradient(var(--yellow),var(--orange));opacity:.85}.kachel:after{border-color:rgba(255,138,0,.18);box-shadow:0 0 0 24px rgba(255,196,0,.018)}.kachel:hover{border-color:rgba(255,138,0,.5);box-shadow:0 18px 45px rgba(0,0,0,.22),0 0 28px rgba(255,138,0,.055)}.kachel>span{color:#b8c0c5}.kachel strong{color:#fff}.kachel small{color:#99a4ab}.tafel{border-color:rgba(255,255,255,.16);background:linear-gradient(145deg,#252f36,#192126)}.tafel-kopf{background:linear-gradient(90deg,rgba(255,138,0,.07),transparent);border-bottom-color:rgba(255,138,0,.17)}.liste-schlicht li:before{color:var(--orange-soft)}.hinweis{background:rgba(255,138,0,.055);border-top:1px solid rgba(255,138,0,.15)}.tabelle th{background:rgba(255,138,0,.055);color:#bdc5ca}.tabelle tbody tr:hover{background:rgba(255,138,0,.06)}.marke-gut{background:rgba(138,191,59,.08)}.feldgruppe{border-color:rgba(255,255,255,.14)!important;background:rgba(255,255,255,.018)}.feldgruppe legend{color:var(--orange-soft)}
@media(max-width:860px){.seitenleiste{background:rgba(27,36,42,.97);border-top-color:rgba(255,138,0,.28)}.seitenleiste:after{display:none}.tor-buehne:after{opacity:.45}}

/* Einklappbares Desktop-Menü und dezenter Logout */
.huelle,.seitenleiste,.seiten-marke,.seitenleiste nav a,.seiten-fuss{transition:width .22s ease,padding .22s ease,grid-template-columns .22s ease,margin .22s ease,opacity .15s ease}.menue-klappen{position:absolute;z-index:3;top:87px;right:-14px;width:28px;height:28px;padding:0;display:grid;place-items:center;border:1px solid rgba(255,138,0,.3);border-radius:50%;background:#273138;color:#ffb247;font-size:21px;line-height:1;cursor:pointer;box-shadow:0 7px 18px rgba(0,0,0,.3);transition:.18s}.menue-klappen:hover{border-color:var(--orange);background:#313d45;color:#ffd174;transform:scale(1.06)}.menue-klappen span{transform:translateY(-1px)}.huelle.menue-klein{grid-template-columns:78px minmax(0,1fr)}.menue-klein .seitenleiste{padding-inline:10px}.menue-klein .seiten-marke{width:52px;height:52px;margin:2px auto 39px;overflow:hidden}.menue-klein .seiten-marke img{width:147px;max-width:none;height:52px;object-fit:cover;object-position:left center}.menue-klein .nav-label,.menue-klein .seiten-fuss{opacity:0;pointer-events:none}.menue-klein .seitenleiste nav a{justify-content:center;padding:0;font-size:0}.menue-klein .seitenleiste nav a span{width:auto;margin:0;font-size:17px}.menue-klein .seitenleiste nav a.aktiv:before{left:-10px}.kopf #abmelden{border-color:rgba(255,255,255,.12);background:#161d21;color:#929da4;box-shadow:none}.kopf #abmelden:hover{border-color:rgba(255,138,0,.32);background:#20292f;color:#e0e4e6;transform:none}
@media(max-width:860px){.menue-klappen{display:none}.huelle.menue-klein{display:block}.menue-klein .seitenleiste{padding:5px 10px}.menue-klein .seitenleiste nav a{font-size:9px}.menue-klein .seitenleiste nav a span{font-size:15px}.menue-klein .nav-label,.menue-klein .seiten-fuss{display:none}}
@media(prefers-reduced-motion:reduce){.huelle,.seitenleiste,.seiten-marke,.seitenleiste nav a,.seiten-fuss{transition:none}}

/* Registrierung: eigener breiter, mittiger Arbeitsbereich */
.tor.tor-register{display:grid;grid-template-columns:1fr;align-items:start;justify-items:center;min-height:100vh;padding:48px clamp(20px,5vw,80px);overflow:visible;background:radial-gradient(circle at 50% 10%,rgba(255,138,0,.11),transparent 34%),#12181c}.tor-register .tor-buehne{position:fixed;inset:0;display:block;opacity:.13;border:0;pointer-events:none}.tor-register .tor-buehne>img,.tor-register .tor-buehne>div{display:none}.tor-register .tor-buehne:after{right:-55px;bottom:40px;opacity:.38}.tor-register .tor-karte{width:min(100%,1040px);margin:0 auto;padding:clamp(30px,4vw,52px);border-color:rgba(255,138,0,.3);background:linear-gradient(145deg,rgba(40,52,60,.98),rgba(24,32,37,.99))}.tor-register .tor-marke{display:block;width:210px;margin:0 auto 25px}.tor-register .tor-marke img{width:100%;height:auto}.tor-register .sicherheits-hinweis{justify-content:center;margin-bottom:20px}.tor-register .formular>h1,.tor-register .formular>.unter{text-align:center}.tor-register .formular>h1{font-size:clamp(30px,4vw,42px);margin-bottom:5px}.tor-register .formular>.unter{margin-bottom:34px}.tor-register #form-register{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.tor-register #form-register>h1,.tor-register #form-register>.unter,.tor-register #form-register>.fehler,.tor-register #form-register>.knopf,.tor-register #form-register>.wechsel{grid-column:1/-1}.tor-register .feldgruppe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:0 18px;margin:0;padding:23px;border:1px solid rgba(255,255,255,.17);border-radius:10px;background:rgba(255,255,255,.025)}.tor-register .feldgruppe legend{padding:0 8px;color:var(--orange-soft);font-size:13px;font-weight:700}.tor-register .feldgruppe .breit,.tor-register .gruppen-hinweis{grid-column:1/-1}.tor-register .gruppen-hinweis{margin:0 0 18px;color:#aeb8bf;font-size:12px}.tor-register .zustimmungen{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 20px}.tor-register .zustimmungen .haken{grid-column:auto;margin:0;padding:15px;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:rgba(0,0,0,.1)}.tor-register .haken{display:grid;grid-template-columns:20px 1fr;align-items:start;gap:10px}.tor-register .haken input{width:18px;height:18px;min-height:0;margin:2px 0 0;accent-color:var(--orange)}.tor-register .haken span{margin:0;color:#bcc4c9;font-size:11px;line-height:1.55}.tor-register .haken a{color:var(--orange-soft);text-decoration:underline;text-underline-offset:2px}.tor-register .zustimmungen .gruppen-hinweis{grid-column:1/-1;margin:5px 0 0;padding-top:15px;border-top:1px solid var(--line)}.tor-register #form-register>.knopf{width:min(100%,360px);justify-self:center;margin-top:7px}.tor-register #form-register>.wechsel{width:min(100%,540px);justify-self:center;margin-top:0}
@media(max-width:800px){.tor.tor-register{padding:24px 14px}.tor-register .tor-karte{padding:28px 20px}.tor-register #form-register{grid-template-columns:1fr}.tor-register .feldgruppe,.tor-register .zustimmungen{grid-column:1;grid-template-columns:1fr}.tor-register .feldgruppe .breit,.tor-register .gruppen-hinweis,.tor-register .zustimmungen .haken,.tor-register .zustimmungen .gruppen-hinweis{grid-column:1}.tor-register #form-register>h1,.tor-register #form-register>.unter,.tor-register #form-register>.fehler,.tor-register #form-register>.knopf,.tor-register #form-register>.wechsel{grid-column:1}}
@media(max-width:500px){.tor.tor-register{display:grid;padding:14px 8px}.tor-register .tor-karte{width:100%;margin:0;padding:24px 15px}.tor-register .feldgruppe{padding:17px 13px}.tor-register .tor-marke{width:175px}}

/* Kompakte Standardmaße für Filter und Fachformulare */
.inhalt input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),.inhalt select{min-height:40px;height:40px;padding:0 12px;border-radius:7px;font-size:13px}.inhalt textarea{display:block;width:100%;min-height:88px;padding:10px 12px;border:1px solid var(--line);border-radius:7px;background:#182127;color:var(--text);font:inherit;font-size:13px;line-height:1.5;resize:vertical}.inhalt textarea:focus{border-color:var(--orange);box-shadow:0 0 0 4px rgba(255,138,0,.1);outline:0}.inhalt label{margin-bottom:12px}.inhalt label>span{margin-bottom:5px;font-size:11px}.inhalt input[type="checkbox"],.inhalt input[type="radio"]{appearance:none;-webkit-appearance:none;flex:0 0 18px;width:18px;height:18px;min-width:18px;min-height:18px;margin:0;border:1px solid #68747c;border-radius:4px;background:#151d22;display:grid;place-items:center;cursor:pointer}.inhalt input[type="checkbox"]:checked{border-color:var(--orange);background:linear-gradient(135deg,var(--yellow),var(--orange))}.inhalt input[type="checkbox"]:checked:after{content:"";width:8px;height:4px;border:solid #12171a;border-width:0 0 2px 2px;transform:translateY(-1px) rotate(-45deg)}.inhalt input[type="checkbox"]:focus-visible{outline:2px solid var(--orange);outline-offset:3px}.inhalt .haken{display:flex;align-items:center;gap:9px;min-height:40px;margin:0}.inhalt .haken>span{margin:0;font-size:11px}.filterzeile{display:grid;grid-template-columns:minmax(240px,1.4fr) minmax(180px,.8fr) auto;align-items:end;gap:12px;padding:15px 20px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.012)}.filterzeile label{margin:0}.filterzeile .haken{padding:0 5px 0 4px;white-space:nowrap}.tafel>.gitter-formular{width:min(calc(100% - 40px),1080px);margin:18px auto;padding:20px;border:1px solid rgba(255,255,255,.13);border-radius:9px;background:rgba(0,0,0,.09);gap:0 16px}.tafel>.gitter-formular .breit{grid-column:1/-1}.tafel>.gitter-formular .reihe-knoepfe{margin-top:5px}.tafel>.gitter-formular+.tabelle-huelle{border-top:1px solid var(--line)}
@media(max-width:760px){.filterzeile{grid-template-columns:1fr;padding:14px}.tafel>.gitter-formular{width:calc(100% - 24px);margin:12px;padding:15px}.inhalt input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),.inhalt select{height:42px;min-height:42px}}

/* Ruhige, klar unterscheidbare Tabellenaktionen */
.tabelle td.tat{display:flex;align-items:center;justify-content:flex-end;gap:7px;padding-block:10px}.tabelle .tabellen-aktion{position:relative;min-height:34px;height:34px;padding:0 12px 0 34px;border:1px solid rgba(255,255,255,.14);border-radius:7px;background:#1a2328;color:#c7cdd1;font-size:11px;font-weight:600;box-shadow:none}.tabelle .tabellen-aktion:before{content:"";position:absolute;left:11px;top:50%;width:14px;height:14px;transform:translateY(-50%);background-position:center;background-repeat:no-repeat;background-size:14px}.tabelle .aktion-bearbeiten:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c7cdd1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L8 18l-4 1 1-4Z'/%3E%3C/svg%3E")}.tabelle .aktion-warnung:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff9b45' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2m-9 0 1 14h8l1-14M10 10v6m4-6v6'/%3E%3C/svg%3E")}.tabelle .aktion-wiederherstellen:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238abf3b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E")}.tabelle .aktion-bearbeiten:hover{border-color:rgba(255,196,0,.38);background:#242d32;color:#fff;transform:none}.tabelle .aktion-warnung{border-color:rgba(255,138,0,.2);background:rgba(255,138,0,.055);color:#ffb36b}.tabelle .aktion-warnung:hover{border-color:rgba(255,138,0,.5);background:rgba(255,138,0,.12);color:#ffc18a;transform:none}.tabelle .aktion-wiederherstellen{border-color:rgba(138,191,59,.25);background:rgba(138,191,59,.055);color:#a9cf70}.tabelle .aktion-wiederherstellen:hover{border-color:rgba(138,191,59,.5);background:rgba(138,191,59,.11);transform:none}
@media(max-width:700px){.tabelle .tabellen-aktion{width:34px;padding:0;font-size:0}.tabelle .tabellen-aktion:before{left:9px}}

/* Dropdowns und Mehrfachauswahlen */
.inhalt select:not([multiple]),.tor select:not([multiple]){appearance:none;-webkit-appearance:none;padding-right:40px;background-color:#182127;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffad24' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;cursor:pointer}.inhalt select:not([multiple]):hover,.tor select:not([multiple]):hover{border-color:rgba(255,138,0,.45);background-color:#1d272d}.inhalt select option,.tor select option{background:#1b242a;color:#e9edef}.mehrfachauswahl{height:260px!important;min-height:260px!important;padding:7px!important;border-color:rgba(255,255,255,.18)!important;background:#151d22!important;background-image:none!important;overflow-y:auto;color:#dce1e4;scrollbar-color:#58636a #11181c;scrollbar-width:thin}.mehrfachauswahl optgroup{margin:4px 0 7px;padding:7px 5px 4px;color:#ffad24;font-size:11px;font-weight:700;font-style:normal;letter-spacing:.05em;text-transform:uppercase;background:#151d22}.mehrfachauswahl option{margin:3px 0 0;padding:8px 10px;border:1px solid transparent;border-radius:5px;background:#1c252b;color:#cbd2d6;font-size:12px;font-weight:400;text-transform:none;letter-spacing:normal;cursor:pointer}.mehrfachauswahl option:hover{border-color:rgba(255,138,0,.25);background:#263139;color:#fff}.mehrfachauswahl option:checked{border-color:rgba(255,138,0,.45);background:linear-gradient(90deg,rgba(255,138,0,.28),rgba(255,196,0,.1));color:#ffd392}.mehrfachauswahl:focus{border-color:var(--orange)!important;box-shadow:0 0 0 4px rgba(255,138,0,.1)}
@media(max-width:760px){.mehrfachauswahl{height:220px!important;min-height:220px!important}.mehrfachauswahl option{padding-block:9px}}

/* Neue Mehrfachauswahl „Art der Sperrung“ */
.auswahl-feld{position:relative;margin-bottom:12px}.auswahl-feld>.feld-titel{display:block;margin-bottom:5px;color:#b8c0c5;font-size:11px}.auswahlfeld{display:block;position:relative}.auswahlfeld-knopf{width:100%;height:40px;padding:0 42px 0 12px;display:flex;align-items:center;justify-content:space-between;border:1px solid rgba(255,255,255,.17);border-radius:7px;background:#182127;color:#e8ecee;font:inherit;font-size:13px;text-align:left;cursor:pointer;transition:.16s}.auswahlfeld-knopf:hover{border-color:rgba(255,138,0,.45);background:#1d272d}.auswahlfeld-knopf:focus-visible{outline:0;border-color:var(--orange);box-shadow:0 0 0 4px rgba(255,138,0,.1)}.auswahlfeld-knopf[aria-expanded="true"]{border-color:rgba(255,138,0,.55);border-radius:7px 7px 0 0;background:#202a30}.auswahlfeld-knopf [data-auswahl-text]{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.auswahlfeld-pfeil{position:absolute;right:13px;color:var(--orange-soft);font-size:15px;transition:transform .18s}.auswahlfeld-knopf[aria-expanded="true"] .auswahlfeld-pfeil{transform:rotate(180deg)}.auswahlfeld-liste{padding:12px;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;border:1px solid rgba(255,138,0,.38);border-top:0;border-radius:0 0 9px 9px;background:#151d22;box-shadow:0 18px 38px rgba(0,0,0,.28)}.auswahlfeld-liste:not([hidden]){display:grid}.auswahlfeld-gruppe{display:block;padding:10px;border:1px solid rgba(255,255,255,.09);border-radius:7px;background:#1b242a}.auswahlfeld-gruppentitel{display:block;margin-bottom:7px;padding-bottom:7px;border-bottom:1px solid rgba(255,138,0,.15);color:var(--orange-soft);font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}.inhalt .auswahlfeld-eintrag{min-height:34px;margin:0;padding:6px 7px;border-radius:5px;transition:.14s}.inhalt .auswahlfeld-eintrag:hover{background:rgba(255,138,0,.07)}.inhalt .auswahlfeld-eintrag>span{color:#cbd2d6;font-size:11px}.inhalt .auswahlfeld-eintrag:has(input:checked){background:rgba(255,138,0,.1)}.inhalt .auswahlfeld-eintrag:has(input:checked)>span{color:#ffd08b}.auswahl-feld>small{display:block;margin-top:7px;color:#8f999f;font-size:10px}
@media(max-width:760px){.auswahlfeld-knopf{height:42px}.auswahlfeld-liste{grid-template-columns:1fr;padding:9px}.auswahlfeld-gruppe{padding:8px}}

/* Plantafel */
[data-ansicht-bereich="plantafel"]{--plan-grid-soft:rgba(255,255,255,.055)}[data-ansicht-bereich="plantafel"]>.tafel{overflow:hidden}.plantafel-huelle{overflow:auto;padding:0 0 5px;background:linear-gradient(180deg,rgba(255,138,0,.025),transparent 120px);scrollbar-color:#526068 #151d22;scrollbar-width:thin}.plantafel{row-gap:0;padding:0 18px 18px;background:#182127}.plan-spalte{border-left:1px solid var(--plan-grid-soft)}.plan-spalte-wochenende{background:rgba(255,255,255,.035)}.plan-spalte-heute{background:linear-gradient(180deg,rgba(255,196,0,.16),rgba(255,138,0,.07));box-shadow:inset 1px 0 rgba(255,196,0,.25),inset -1px 0 rgba(255,196,0,.25)}.plan-kopf-ecke{position:sticky;left:0;z-index:8;align-self:stretch;background:#182127;border-right:1px solid rgba(255,138,0,.18)}.plan-kopf-monat{min-height:31px;padding:9px 8px 6px;border-bottom:1px solid rgba(255,138,0,.2);color:#ffad24;font-size:10px;letter-spacing:.1em}.plan-kopf-tag{min-height:49px;padding:7px 2px 8px;border-bottom:1px solid rgba(255,255,255,.1);color:#7f8b92;font-size:9px;text-transform:uppercase}.plan-kopf-tag b{margin-top:2px;color:#cbd2d6;font-size:13px}.plan-kopf-tag.ist-heute{background:rgba(255,196,0,.07);color:#ffbd55}.plan-kopf-tag.ist-heute b{display:grid;place-items:center;width:25px;height:25px;margin:0 auto;border-radius:50%;background:linear-gradient(135deg,var(--yellow),var(--orange));color:#14191c;box-shadow:0 4px 13px rgba(255,138,0,.22)}.plan-zeile-titel{position:sticky;left:0;z-index:5;min-height:52px;padding:9px 14px 8px 10px;border-right:1px solid rgba(255,138,0,.18);border-bottom:1px solid rgba(255,255,255,.075);background:#1c252b}.plan-zeile-titel:before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:2px;background:linear-gradient(var(--yellow),var(--orange));opacity:.7}.plan-zeile-titel strong{overflow:hidden;color:#eef1f2;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.plan-zeile-titel small{overflow:hidden;margin-top:2px;color:#7f8a91;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.plan-balken{z-index:4;min-height:30px;margin:5px 2px;padding:0 9px;border-radius:6px;font-size:10px;box-shadow:0 5px 13px rgba(0,0,0,.22);transition:filter .15s,transform .15s,box-shadow .15s}.plan-balken:hover{z-index:6;filter:brightness(1.12);transform:translateY(-1px);box-shadow:0 7px 18px rgba(0,0,0,.3)}.plan-balken-hv{border-color:rgba(255,138,0,.48);background:repeating-linear-gradient(135deg,rgba(255,138,0,.28) 0 7px,rgba(255,196,0,.08) 7px 14px);color:#ffd08a}.plan-balken-bau{border-color:#e59e00;background:linear-gradient(110deg,#ffd01a,#ff9b19);color:#181b1d;font-weight:700}.plan-balken-abgeholt{filter:saturate(.25);opacity:.42}.plan-leer{padding:50px 20px;color:#879299}.plan-legende{gap:22px;padding:13px 20px;border-top:1px solid rgba(255,138,0,.14);background:#1b2429;color:#929da4;font-size:10px}.plan-legende span{display:inline-flex;align-items:center}.plan-legende i{width:28px;height:10px;margin-right:8px}.plantafel-steuerung{gap:6px}.plantafel-steuerung .knopf{min-width:36px;height:34px;min-height:34px;padding:0 10px;border-color:rgba(255,255,255,.14);background:#192126;color:#b8c1c6;box-shadow:none;font-size:11px}.plantafel-steuerung .knopf:hover{border-color:rgba(255,138,0,.38);background:#263138;color:#fff;transform:none}.plantafel-steuerung select{width:auto!important;min-width:112px;height:34px!important;min-height:34px!important;font-size:11px!important}.marke-warnung{border-color:rgba(255,138,0,.42);background:rgba(255,138,0,.09);color:#ffae61}.marke-warnung:before{background:var(--orange)}
.fristenliste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:12px;background:#182127}.fristenliste li{position:relative;min-height:58px;align-items:center;gap:10px;padding:11px 13px;border:1px solid rgba(255,255,255,.1)!important;border-radius:7px;background:#1d272d;font-size:11px;transition:.15s}.fristenliste li:hover{border-color:rgba(255,138,0,.3)!important;background:#222d34;transform:translateY(-1px)}.frist-zeichen{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;font-weight:800}.frist-projekt{color:#7f8a91;font-size:9px}.frist-text{color:#cbd1d5;line-height:1.4}.frist-ueberfaellig{border-left:3px solid #ef5549!important}.frist-ueberfaellig .frist-zeichen{background:rgba(239,59,45,.12);color:#ff766c}.frist-dringend{border-left:3px solid var(--orange)!important}.frist-dringend .frist-zeichen{background:rgba(255,138,0,.12);color:#ffad50}.frist-hinweis{border-left:3px solid #68757d!important}.frist-hinweis .frist-zeichen{background:rgba(255,255,255,.055);color:#9da7ad}
@media(max-width:900px){.fristenliste{grid-template-columns:1fr}.plantafel{padding-inline:12px}.plantafel-steuerung{flex-wrap:wrap;justify-content:flex-end}}
@media(max-width:620px){[data-ansicht-bereich="plantafel"] .tafel-kopf{align-items:flex-start;flex-direction:column}.plantafel-steuerung{width:100%;justify-content:flex-start}.plantafel-steuerung select{margin-left:auto}.plan-legende{gap:12px}}

/* Aufbauart: eigenes gruppiertes Dropdown */
.select-original{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;opacity:0!important;pointer-events:none}.komfort-auswahl{position:relative;display:block;width:100%}.komfort-auswahl-knopf{width:100%;height:40px;padding:0 42px 0 12px;display:flex;align-items:center;border:1px solid rgba(255,255,255,.17);border-radius:7px;background:#182127;color:#e8ecee;font:inherit;font-size:13px;text-align:left;cursor:pointer;transition:.16s}.komfort-auswahl-knopf>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.komfort-auswahl-knopf>i{position:absolute;right:13px;width:15px;height:15px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffad24' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/15px no-repeat;transition:transform .16s}.komfort-auswahl-knopf:hover{border-color:rgba(255,138,0,.45);background:#1d272d}.komfort-auswahl-knopf:focus-visible{outline:0;border-color:var(--orange);box-shadow:0 0 0 4px rgba(255,138,0,.1)}.komfort-auswahl-knopf[aria-expanded="true"]{border-color:rgba(255,138,0,.5);border-radius:7px 7px 0 0;background:#202a30}.komfort-auswahl-knopf[aria-expanded="true"]>i{transform:rotate(180deg)}.komfort-auswahl-liste{position:absolute;z-index:60;top:100%;left:0;right:0;max-height:360px;padding:8px;overflow-y:auto;border:1px solid rgba(255,138,0,.45);border-top:0;border-radius:0 0 8px 8px;background:#151d22;box-shadow:0 20px 42px rgba(0,0,0,.4);scrollbar-color:#526068 #151d22;scrollbar-width:thin}.komfort-auswahl-liste:not([hidden]){display:block}.komfort-gruppe{display:block;padding:6px 0}.komfort-gruppe+.komfort-gruppe{border-top:1px solid rgba(255,255,255,.08)}.komfort-gruppe>strong{display:block;padding:5px 9px;color:#ffad24;font-size:9px;letter-spacing:.09em;text-transform:uppercase}.komfort-option{width:100%;min-height:34px;padding:7px 10px;border:1px solid transparent;border-radius:5px;background:transparent;color:#cbd2d6;font:inherit;font-size:11px;text-align:left;cursor:pointer}.komfort-option:hover{border-color:rgba(255,138,0,.2);background:rgba(255,138,0,.07);color:#fff}.komfort-option.ist-gewaehlt{background:linear-gradient(90deg,rgba(255,138,0,.19),rgba(255,196,0,.055));color:#ffd08a}.komfort-option.ist-gewaehlt:after{content:"✓";float:right;color:var(--orange-soft);font-weight:700}
@media(max-width:760px){.komfort-auswahl-knopf{height:42px}.komfort-auswahl-liste{max-height:310px}.komfort-option{min-height:38px}}

/* Einheitliche Materialvorschau – große Motive beeinflussen nie die Zeilenhöhe. */
.tabelle td.artikel-bild{width:78px;min-width:78px;height:62px;padding:7px 10px;vertical-align:middle}.artikel-bild img,.artikel-bild-platzhalter{display:grid;width:56px;height:46px;max-width:56px;max-height:46px;margin:0;place-items:center;border:1px solid rgba(255,255,255,.1);border-radius:6px;background:linear-gradient(145deg,#273138,#182026);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}.artikel-bild img{object-fit:contain;object-position:center;padding:4px}.artikel-bild-platzhalter{color:#768189;font-size:15px;font-weight:700}.tabelle tr:hover .artikel-bild img,.tabelle tr:hover .artikel-bild-platzhalter{border-color:rgba(255,138,0,.25)}
@media(max-width:700px){.tabelle td.artikel-bild{width:68px;min-width:68px;height:56px;padding:6px 8px}.artikel-bild img,.artikel-bild-platzhalter{width:50px;height:42px;max-width:50px;max-height:42px}}

/* Kontrolle: klarer Formularrahmen und ein eindeutiges Symbol im Seitenmenü. */
.seitenleiste nav a .nav-symbol{display:grid;place-items:center}
.seitenleiste nav a .nav-symbol svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
[data-ansicht-bereich="kontrolle"] .packen-tafel{width:min(100%,1180px);margin-inline:auto;overflow:hidden}
[data-ansicht-bereich="kontrolle"] #form-kontrolle{padding:20px}
[data-ansicht-bereich="kontrolle"] .kontrolle-kopfzeile{grid-template-columns:minmax(210px,1fr) minmax(210px,1fr) auto;gap:12px 16px;margin-bottom:22px}
[data-ansicht-bereich="kontrolle"] .kontrolle-kopfzeile>label{
    display:grid;grid-template-rows:16px 40px 16px;gap:4px;margin:0
}
[data-ansicht-bereich="kontrolle"] .kontrolle-kopfzeile>label>span,
[data-ansicht-bereich="kontrolle"] .kontrolle-kopfzeile>label>small{margin:0}
[data-ansicht-bereich="kontrolle"] .kontrolle-schnell{align-self:start;margin:20px 0 0}
[data-ansicht-bereich="kontrolle"] .kontrolle-gruppe>h4{border-bottom-color:rgba(255,159,10,.55);color:#dfe5e7}
[data-ansicht-bereich="kontrolle"] .kontrolle-punkte{gap:18px}
[data-ansicht-bereich="kontrolle"] .kontrolle-punkt{border-color:rgba(255,255,255,.09);background:rgba(12,20,24,.22)}
[data-ansicht-bereich="kontrolle"] .kontrolle-wahl button{border-color:rgba(255,255,255,.13);color:#d8dee1}
[data-ansicht-bereich="kontrolle"] .kontrolle-buch{margin:0;padding:20px;border-top-color:rgba(255,159,10,.2)}

@media(max-width:860px){
    /* Der Kopf scrollt auf Mobilgeräten normal mit und kann das lange
       Kontrollformular daher nicht mehr in der Bildschirmmitte verdecken. */
    .kopf{position:relative;top:auto}
    [data-ansicht-bereich="kontrolle"] #form-kontrolle,
    [data-ansicht-bereich="kontrolle"] .kontrolle-buch{padding:14px}
    [data-ansicht-bereich="kontrolle"] .kontrolle-kopfzeile{grid-template-columns:1fr 1fr}
    [data-ansicht-bereich="kontrolle"] .kontrolle-schnell{grid-column:1/-1}
}
@media(max-width:600px){
    [data-ansicht-bereich="kontrolle"] .kontrolle-kopfzeile{grid-template-columns:1fr}
    [data-ansicht-bereich="kontrolle"] .kontrolle-schnell{grid-column:auto}
    [data-ansicht-bereich="kontrolle"] .kontrolle-schnell .knopf{width:100%}
}

/* Bedienknöpfe der Kontrolle: Status statt allgemeiner Aktionsoptik. */
[data-ansicht-bereich="kontrolle"] #kontrolle-zurueck{
    min-height:36px;padding:7px 12px;border-color:rgba(255,255,255,.16);
    background:#202a30;color:#cbd2d6;box-shadow:none
}
[data-ansicht-bereich="kontrolle"] #kontrolle-zurueck:before{content:"←";margin-right:7px;font-size:15px}
[data-ansicht-bereich="kontrolle"] #kontrolle-zurueck:hover{
    border-color:rgba(255,159,10,.45);background:#29353b;color:#fff;transform:none
}
[data-ansicht-bereich="kontrolle"] #kontrolle-alle-ok{
    min-height:40px;padding:8px 14px;border-color:rgba(139,195,55,.5);
    background:rgba(139,195,55,.1);color:#b8df79;box-shadow:none
}
[data-ansicht-bereich="kontrolle"] #kontrolle-alle-ok:before{content:"✓";margin-right:7px;font-weight:800}
[data-ansicht-bereich="kontrolle"] #kontrolle-alle-ok:hover{
    border-color:#8bc337;background:rgba(139,195,55,.18);color:#d5f3a7;transform:none
}
[data-ansicht-bereich="kontrolle"] .kontrolle-wahl{
    gap:3px;padding:3px;border:1px solid rgba(255,255,255,.09);
    border-radius:10px;background:#151e23
}
[data-ansicht-bereich="kontrolle"] .kontrolle-wahl button{
    min-height:36px;padding:7px 11px;border-color:transparent;border-radius:7px;
    background:transparent;color:#aeb8bd;transition:background .15s,border-color .15s,color .15s
}
[data-ansicht-bereich="kontrolle"] .kontrolle-wahl button:hover{
    background:#222d33;color:#fff
}
[data-ansicht-bereich="kontrolle"] .kontrolle-wahl button[data-wert="ok"][aria-pressed="true"]{
    border-color:#78aa31;background:#78aa31;color:#10170d;box-shadow:0 3px 10px rgba(86,139,28,.22)
}
[data-ansicht-bereich="kontrolle"] .kontrolle-wahl button[data-wert="mangel"][aria-pressed="true"]{
    border-color:#df6258;background:#c94c43;color:#fff;box-shadow:0 3px 10px rgba(201,76,67,.22)
}
[data-ansicht-bereich="kontrolle"] .kontrolle-wahl button[data-wert="entfaellt"][aria-pressed="true"]{
    border-color:#68757d;background:#56636b;color:#fff;opacity:1
}

@media(max-width:700px){
    [data-ansicht-bereich="kontrolle"] .kontrolle-wahl{width:100%}
    [data-ansicht-bereich="kontrolle"] .kontrolle-wahl button{width:100%;min-width:0;padding:11px 4px}
}

/* Baustellenstreifen im Login weiter in die Bildfläche rücken. */
.tor:not(.tor-register) .tor-buehne:after{right:70px}
@media(max-width:1200px){.tor:not(.tor-register) .tor-buehne:after{right:35px}}

/* Packliste: kompakter Packtisch mit klar getrenntem Lager und Ladebereich. */
.packtisch{overflow:hidden;border-color:rgba(255,159,10,.22);background:linear-gradient(145deg,rgba(35,44,49,.98),rgba(24,33,38,.98));box-shadow:0 22px 55px rgba(0,0,0,.25)}
.packtisch>.tafel-kopf{min-height:62px;padding:13px 20px;border-bottom:1px solid rgba(255,159,10,.24);background:linear-gradient(90deg,rgba(255,159,10,.07),transparent 42%)}
.packtisch>.tafel-kopf>div{display:grid;gap:3px}.packtisch>.tafel-kopf strong{font-size:15px}.packtisch .zeile-unterzeile{color:#9eabb2;font-size:11px}
.packtisch>#packliste-schliessen{min-height:32px;padding:6px 12px;border-color:#55636a;background:#263137;color:#d8dfe2;font-size:12px;box-shadow:none}.packtisch>#packliste-schliessen:hover{border-color:#ff9f0a;background:#303b40;color:#fff}
.packtisch>.pack-summe,.packtisch>.pack-grenzen,.packtisch>.ladung-hinweise,.packtisch>.pack-spalten{margin-left:20px;margin-right:20px}
.packtisch>.pack-summe{gap:7px;margin-top:16px;margin-bottom:8px;padding:13px 15px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(10,17,21,.28)}
.pack-summe-kopf>span{color:#b7c0c5;font-size:12px}.pack-summe-kopf>strong{color:#f5f7f8;font-size:16px}.pack-summe>small{color:#aeb9be;font-size:11px}
.packtisch .ladung-balken-gross{height:7px;background:#111a1f}.packtisch .ladung-balken>span{background:linear-gradient(90deg,#79ad35,#92c83e);box-shadow:0 0 12px rgba(137,195,55,.22)}
.packtisch>.pack-grenzen{margin-bottom:13px}.pack-grenzen>summary{width:max-content;padding:4px 2px;color:#aeb8bd;font-size:11px}.pack-grenzen>summary:hover{color:#ffad24}
.packtisch>.pack-spalten{grid-template-columns:minmax(360px,1fr) minmax(420px,1fr);gap:18px;margin-bottom:18px}
.packtisch .pack-spalte{gap:9px;padding:14px;border:1px solid rgba(255,255,255,.09);border-radius:12px;background:rgba(13,21,25,.38);min-height:430px}
.packtisch .pack-spalte:first-child{border-top:2px solid rgba(255,159,10,.58)}.packtisch .pack-spalte:last-child{border-top:2px solid rgba(133,191,54,.58)}
.pack-spalte-kopf{min-height:34px}.pack-spalte-kopf>strong{font-size:13px;letter-spacing:.015em}.pack-spalte-zahl{padding:3px 8px;border-radius:999px;background:#263238;color:#b8c2c7;font-size:10px}
.pack-spalte-kopf>input[type=search]{height:34px;min-height:34px;padding:6px 11px;border-color:#46545b;border-radius:8px;background:#162127;font-size:12px}
.packtisch .pack-rollen{max-height:480px;gap:5px;padding:1px 5px 1px 1px;scrollbar-width:thin;scrollbar-color:#4c5a60 #172126}
.packtisch .pack-zeile{min-height:56px;gap:9px;padding:7px 8px;border-color:rgba(255,255,255,.065);border-radius:9px;background:rgba(35,46,51,.76);transition:border-color .16s ease,background .16s ease,transform .16s ease}
.packtisch .pack-zeile:hover{border-color:rgba(255,159,10,.28);background:#29363c;transform:translateX(1px)}
.packtisch .pack-bild{width:40px;height:40px;border-color:rgba(255,255,255,.14);border-radius:7px;background:#f4f5f3}.packtisch .pack-bild img{width:100%;height:100%;padding:3px;object-fit:contain}
.packtisch .pack-text>strong{overflow:hidden;color:#f0f3f4;font-size:12px;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}.packtisch .pack-text>small{margin-top:2px;color:#a8b3b8;font-size:10px}
.packtisch .pack-bestand{min-width:42px;color:#abb6bb;font-size:9px}.packtisch .pack-bestand>b{color:#eef2f3;font-size:13px}
.packtisch .pack-knoepfe{gap:3px}.packtisch .pack-knoepfe .knopf{min-width:68px;min-height:29px;padding:5px 9px;border:1px solid rgba(255,159,10,.5);border-radius:7px;background:rgba(255,159,10,.09);color:#ffb32d;font-size:10px;font-weight:700;box-shadow:none}.packtisch .pack-knoepfe .knopf:hover{background:#ff9f0a;color:#12191c;transform:none}
.packtisch .pack-gruppe{margin:2px 2px 1px;padding:0 2px 7px;border-bottom:1px solid rgba(139,193,58,.5);color:#dce4e6;font-size:10px;letter-spacing:.065em}.packtisch .pack-gruppe>span{color:#b7c5bd;font-size:10px}
.packtisch .pack-menge{gap:3px}.packtisch .pack-menge button{width:25px;height:25px;border-color:#46545a;border-radius:6px;background:#172228;color:#c2ccd0;font-size:13px}.packtisch .pack-menge button:hover{border-color:#ff9f0a;background:#2b3539;color:#ffae22}.packtisch .pack-menge input{width:48px;height:30px;padding:3px 5px;border-color:#3b494f;background:#182329;font-size:12px}.packtisch .pack-menge>small{min-width:34px;font-size:9px}.packtisch .pack-menge .pack-weg{border-color:transparent;background:transparent;color:#859197}.packtisch .pack-menge .pack-weg:hover{border-color:rgba(225,87,73,.35);background:rgba(225,87,73,.1);color:#ef766a}
.packtisch .pack-frei{margin-top:auto;border-top:1px solid rgba(255,255,255,.07)}.packtisch .pack-frei>summary{padding:10px 2px 3px;color:#aab5ba;font-size:10px}.packtisch .pack-leer{color:#9da8ad;font-size:11px}
@media(max-width:1100px){.packtisch>.pack-spalten{grid-template-columns:1fr}.packtisch .pack-spalte{min-height:0}.packtisch .pack-rollen{max-height:350px}}
@media(max-width:650px){.packtisch>.tafel-kopf{padding:11px 12px}.packtisch>.pack-summe,.packtisch>.pack-grenzen,.packtisch>.ladung-hinweise,.packtisch>.pack-spalten{margin-left:10px;margin-right:10px}.packtisch>.pack-spalten{gap:10px}.packtisch .pack-spalte{padding:9px}.pack-spalte-kopf{align-items:stretch;flex-direction:column}.pack-spalte-kopf>input[type=search]{width:100%}.packtisch .pack-zeile{flex-wrap:wrap}.packtisch .pack-menge{width:100%;justify-content:flex-end;padding-left:48px}}

/* Kodierungsfester Pfeil am einklappbaren Menü */
.menue-klappen span{display:block;width:8px;height:8px;border:solid currentColor;border-width:0 0 2px 2px;transform:translateX(2px) rotate(45deg)}.menue-klein .menue-klappen span{transform:translateX(-2px) rotate(225deg)}

/* Passwortauge im Eingabefeld */
.passwort-feld{position:relative;display:block;margin:0}.passwort-feld input{padding-right:52px}.passwort-zeigen{position:absolute;z-index:2;top:50%;right:7px;width:38px;height:36px;padding:0;transform:translateY(-50%);border:1px solid transparent;border-radius:7px;background-color:transparent;background-position:center;background-repeat:no-repeat;background-size:21px;color:transparent;font-size:0;cursor:pointer;opacity:.72;transition:background-color .16s,border-color .16s,opacity .16s;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23c4cbd0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='2.7'/%3E%3C/svg%3E")}.passwort-zeigen:hover{opacity:1;border-color:rgba(255,138,0,.25);background-color:rgba(255,138,0,.08)}.passwort-zeigen:focus-visible{outline:2px solid var(--orange);outline-offset:1px}.passwort-zeigen[aria-pressed="true"]{opacity:1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffad24' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M10.6 6.1A10.9 10.9 0 0 1 12 6c6.5 0 10 6 10 6a18 18 0 0 1-2.3 3.1M6.2 6.2C3.5 8 2 12 2 12s3.5 6 10 6a10.6 10.6 0 0 0 4-.8'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3C/svg%3E")}

/* Packen auf dem Hof: ruhige Arbeitsansicht mit eindeutigem Fortschritt. */
[data-ansicht-bereich=packen] .packen-tafel{width:min(100%,1180px);margin-inline:auto;overflow:hidden;border-color:rgba(255,159,10,.22);background:linear-gradient(145deg,#202a30,#172126);box-shadow:0 24px 65px rgba(0,0,0,.27)}
.packen-tafel>.tafel-kopf{min-height:70px;padding:14px 20px;border-bottom:1px solid rgba(255,159,10,.25);background:linear-gradient(90deg,rgba(255,159,10,.09),transparent 48%)}
.packen-tafel>.tafel-kopf>div{display:grid;gap:4px}.packen-tafel>.tafel-kopf strong{font-size:16px;letter-spacing:-.01em}.packen-tafel .zeile-unterzeile{color:#aeb8bd;font-size:11px}
.packen-tafel #packen-zurueck{min-height:32px;padding:6px 12px;border-color:#566269;background:#29343a;color:#e1e6e8;font-size:11px;box-shadow:none}.packen-tafel #packen-zurueck:hover{border-color:#ff9f0a;background:#343f44;color:#fff;transform:none}
.packen-fortschritt{gap:7px;margin:16px 20px 11px;padding:13px 15px;border:1px solid rgba(255,255,255,.085);border-radius:10px;background:rgba(10,17,21,.3)}
.packen-fortschritt-kopf>span{color:#c1c9cd;font-size:12px}.packen-fortschritt-kopf>strong{color:#ffbd4a;font-size:17px}.packen-fortschritt>.ladung-balken-gross{height:7px;background:#10191e}.packen-fortschritt>.ladung-balken-gross>span{background:linear-gradient(90deg,#ff9500,#ffc400);box-shadow:0 0 14px rgba(255,159,10,.2)}.packen-fortschritt>small{color:#95a1a7;font-size:10px}
.packen-schnell{gap:7px;margin:0 20px 13px;padding-bottom:13px;border-bottom:1px solid rgba(255,255,255,.07)}.packen-schnell .knopf{width:auto;min-height:31px;padding:5px 10px;border-color:#49575e;background:#222e34;color:#b9c3c8;font-size:10px;box-shadow:none}.packen-schnell .knopf:hover{border-color:rgba(255,159,10,.5);background:#2c383e;color:#ffbd55;transform:none}
.packen-positionen{gap:6px;margin:0 20px}.packen-gruppe{margin:7px 1px 1px;padding:0 3px 7px;border-bottom:1px solid rgba(255,159,10,.42);color:#dfe4e6;font-size:10px;letter-spacing:.08em}.packen-gruppe>span{color:#ffb63c;font-size:9px}
.packen-zeile{min-height:62px;gap:10px;padding:8px 11px;border-color:rgba(255,255,255,.07);border-radius:9px;background:rgba(35,47,53,.75);box-shadow:0 3px 9px rgba(0,0,0,.08);transition:border-color .16s,background .16s,transform .16s}.packen-zeile:hover{border-color:rgba(255,159,10,.34);background:#29373d;transform:translateX(2px)}
.packen-haken{width:27px;height:27px;border-width:1.5px;border-color:#8a979d;border-radius:7px;color:#fff;font-size:14px;opacity:.8}.packen-zeile:hover .packen-haken{border-color:#ffae26}.packen-zeile.ist-gepackt{border-color:rgba(128,184,54,.25);background:rgba(91,135,36,.09)}.packen-zeile.ist-gepackt .packen-haken{border-color:#88bd3e;background:#88bd3e;color:#15200e;opacity:1}.packen-zeile.ist-gepackt .packen-text>strong{text-decoration:none;opacity:.58}
.packen-bild{width:43px;height:43px;border-color:rgba(255,255,255,.14);border-radius:8px;background:#f3f4f2}.packen-bild img{width:100%;height:100%;padding:3px;object-fit:contain}.packen-text>strong{overflow:hidden;color:#f0f3f4;font-size:13px;text-overflow:ellipsis;white-space:nowrap}.packen-text>small{color:#9eaaaf;font-size:10px}.packen-menge{min-width:82px;padding:6px 9px;border-radius:7px;background:rgba(9,15,18,.24);color:#f1f3f4;font-size:13px;text-align:right}
.packen-abschluss{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 24px;margin:20px;padding:17px 18px;border:1px solid rgba(255,159,10,.19);border-radius:11px;background:linear-gradient(115deg,rgba(255,159,10,.07),rgba(8,14,17,.2))}.packen-abschluss>h3{grid-column:1;font-size:14px}.packen-hinweis{grid-column:1;margin:0;color:#aeb8bd;font-size:10px;line-height:1.55}.packen-foto{grid-column:2;grid-row:1/5;display:grid;grid-template-columns:130px auto;align-items:center;gap:9px;margin:0}.packen-foto-feld{width:130px;height:94px;border-color:rgba(255,159,10,.3);border-radius:8px;background:rgba(8,14,17,.25);color:#9da8ad;font-size:10px}.packen-foto>.reihe-knoepfe{flex-direction:column;gap:6px}.packen-foto .knopf{width:120px;min-height:30px;padding:5px 9px;border-color:rgba(255,159,10,.45);background:rgba(255,159,10,.08);color:#ffb638;font-size:10px;box-shadow:none}.packen-foto .knopf:hover{background:#ff9f0a;color:#151b1e;transform:none}.packen-abschluss>[data-packen-fehler],.packen-abschluss>.reihe-knoepfe:last-child{grid-column:1}.packen-abschluss>.reihe-knoepfe:last-child{margin-top:10px}.packen-abschluss #packen-fertig{width:auto;min-height:36px;padding:7px 16px;font-size:11px;box-shadow:0 8px 20px rgba(255,159,10,.12)}
@media(max-width:800px){.packen-abschluss{grid-template-columns:1fr}.packen-foto{grid-column:1;grid-row:auto;margin-top:10px}.packen-abschluss>[data-packen-fehler],.packen-abschluss>.reihe-knoepfe:last-child{grid-column:1}.packen-positionen,.packen-fortschritt,.packen-schnell,.packen-abschluss{margin-left:12px;margin-right:12px}}
@media(max-width:520px){.packen-tafel>.tafel-kopf{padding:11px 12px}.packen-schnell{display:grid;grid-template-columns:1fr 1fr}.packen-schnell .knopf{width:100%}.packen-zeile{min-height:68px;padding:9px 8px}.packen-haken{width:30px;height:30px}.packen-bild{width:40px;height:40px}.packen-text>strong{font-size:12px}.packen-menge{min-width:64px;padding:5px 6px;font-size:12px}.packen-foto{grid-template-columns:1fr}.packen-foto-feld{width:100%;height:150px}.packen-foto>.reihe-knoepfe{flex-direction:row}.packen-foto .knopf{width:auto}}

/* Kompakte Formularaktionen: Hauptaktion klar, Abbrechen bewusst zurückhaltend. */
.tafel>.gitter-formular>.reihe-knoepfe{align-items:center;gap:7px;margin-top:8px;padding-top:12px;border-top:1px solid rgba(255,255,255,.07)}
.tafel>.gitter-formular>.reihe-knoepfe .knopf{width:auto;min-width:0;min-height:31px;height:31px;padding:5px 11px;border-radius:7px;font-size:10px;font-weight:700;line-height:1;box-shadow:0 5px 13px rgba(255,159,10,.1)}
.tafel>.gitter-formular>.reihe-knoepfe .knopf-geist{border-color:#4b585f;background:#222c31;color:#aeb8bd;box-shadow:none}
.tafel>.gitter-formular>.reihe-knoepfe .knopf-geist:hover{border-color:#68767d;background:#2a353a;color:#eef1f2;transform:none}
.tafel>.gitter-formular>.reihe-knoepfe .knopf:not(.knopf-geist):hover{transform:translateY(-1px)}
@media(max-width:500px){.tafel>.gitter-formular>.reihe-knoepfe{flex-direction:row;flex-wrap:wrap}.tafel>.gitter-formular>.reihe-knoepfe .knopf{width:auto}}

/* Einheitliche Vektoricons für die Hauptnavigation. */
.seitenleiste nav a>span{flex:0 0 28px;width:28px;height:28px;margin-right:9px;border:1px solid rgba(255,255,255,.06);border-radius:7px;background:rgba(255,255,255,.025);color:transparent;font-size:0;transition:border-color .16s,background .16s,color .16s}
.seitenleiste nav a>span:before{content:"";display:block;width:16px;height:16px;background:#748189;-webkit-mask:var(--nav-icon) center/contain no-repeat;mask:var(--nav-icon) center/contain no-repeat;transition:background .16s,transform .16s}
.seitenleiste nav a:hover>span{border-color:rgba(255,159,10,.2);background:rgba(255,159,10,.06)}.seitenleiste nav a:hover>span:before{background:#c7d0d4;transform:scale(1.06)}
.seitenleiste nav a.aktiv>span{border-color:rgba(255,159,10,.35);background:linear-gradient(145deg,rgba(255,196,0,.18),rgba(255,138,0,.08));box-shadow:0 4px 12px rgba(0,0,0,.14)}.seitenleiste nav a.aktiv>span:before{background:#ffb22f}
.seitenleiste nav a[data-bereich=uebersicht]>span{--nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/g%3E%3C/svg%3E")}
.seitenleiste nav a[data-bereich=plantafel]>span{--nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4m8-4v4M3 10h18M8 14h2m4 0h2m-8 4h2'/%3E%3C/g%3E%3C/svg%3E")}
.seitenleiste nav a[data-bereich=vzplan]>span{--nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 6 5-3 8 3 5-3v15l-5 3-8-3-5 3Z'/%3E%3Cpath d='M8 3v15M16 6v15'/%3E%3Cpath d='m10.5 12 1.6-3 1.6 3Z'/%3E%3C/g%3E%3C/svg%3E")}
.seitenleiste nav a[data-bereich=projekte]>span{--nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 7h7l2 2h9v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 2h4' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E")}
.seitenleiste nav a[data-bereich=kunden]>span{--nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3.5 20v-2a5.5 5.5 0 0 1 11 0v2M16 5a3 3 0 0 1 0 6m1 3a5 5 0 0 1 3.5 5'/%3E%3C/g%3E%3C/svg%3E")}
.seitenleiste nav a[data-bereich=rechnungen]>span{--nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-2.5-1.5L13 21l-2.5-1.5L8 21l-2-1.2Z'/%3E%3Cpath d='M9 8h6M9 12h6M9 16h3'/%3E%3C/g%3E%3C/svg%3E")}
.seitenleiste nav a[data-bereich=material]>span{--nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='m12 3 9 5-9 5-9-5Z'/%3E%3Cpath d='m3 12 9 5 9-5M3 16l9 5 9-5'/%3E%3C/g%3E%3C/svg%3E")}
.seitenleiste nav a[data-bereich=protokolle]>span{--nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4h8M9 2h6v4H9z'/%3E%3Cpath d='M7 4H5a2 2 0 0 0-2 2v15h18V6a2 2 0 0 0-2-2h-2M7 11h10M7 15h7'/%3E%3C/g%3E%3C/svg%3E")}
.seitenleiste nav a[data-bereich=packen]>span{--nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='m4 7 8-4 8 4-8 4Z'/%3E%3Cpath d='M4 7v10l8 4 8-4V7M12 11v10'/%3E%3C/g%3E%3C/svg%3E")}
.seitenleiste nav a[data-bereich=abholen]>span{--nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 6h11v10H3zM14 10h4l3 3v3h-7z'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/g%3E%3C/svg%3E")}
.seitenleiste nav a[data-bereich=ruecklauf]>span{--nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9 7-5 5 5 5m11 0v-2a3 3 0 0 0-3-3H4M15 4h5v5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.seitenleiste nav a[data-bereich=packlisten]>span{--nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='2'/%3E%3Cpath d='M9 3h6v4H9zm0 9h6m-6 4h6'/%3E%3C/g%3E%3C/svg%3E")}
.seitenleiste nav a[data-bereich=fuhrpark]>span{--nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 13 5 7h12l4 6v5H3zM5 13h14'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3C/g%3E%3C/svg%3E")}
.seitenleiste nav a[data-bereich=mitarbeiter]>span{--nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/g%3E%3C/svg%3E")}
.seitenleiste nav a[data-bereich=einstellungen]>span{--nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2.8v3M12 18.2v3M2.8 12h3M18.2 12h3m-16-6.2 2.1 2.1m9.4 8.2 2.1 2.1m0-12.4-2.1 2.1m-9.4 8.2-2.1 2.1'/%3E%3C/g%3E%3C/svg%3E")}
.menue-klein .seitenleiste nav a>span{margin:0}.menue-klein .seitenleiste nav a>span:before{width:16px;height:16px}
@media(max-width:860px){.seitenleiste nav a>span{flex-basis:24px;width:24px;height:24px;margin:0}.seitenleiste nav a>span:before{width:14px;height:14px}}

/* Navigation verfeinert: mehr Symbol, weniger Kästchen. */
.seitenleiste nav a>span{flex-basis:30px;width:30px;height:30px;margin-right:8px;border-color:transparent;border-radius:8px;background:transparent}
.seitenleiste nav a>span:before{width:18px;height:18px;background:#89969d}
.seitenleiste nav a:hover>span{border-color:transparent;background:rgba(255,255,255,.045)}.seitenleiste nav a:hover>span:before{background:#d4dadd}
.seitenleiste nav a.aktiv>span{border-color:rgba(255,159,10,.32);background:linear-gradient(145deg,rgba(255,196,0,.2),rgba(255,138,0,.1));box-shadow:inset 0 0 0 1px rgba(255,196,0,.035),0 5px 13px rgba(0,0,0,.16)}
.seitenleiste nav a.aktiv>span:before{background:#ffc04a;transform:scale(1.03)}
.seitenleiste nav a[data-bereich=ruecklauf]>span{--nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 8H5V4M5.5 8a8 8 0 1 1-1.2 7.1' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='m5 8 4-4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}
.menue-klein .seitenleiste nav a>span{flex-basis:34px;width:34px;height:34px}.menue-klein .seitenleiste nav a>span:before{width:19px;height:19px}
@media(max-width:860px){.seitenleiste nav a>span{flex-basis:25px;width:25px;height:25px;margin:0}.seitenleiste nav a>span:before{width:15px;height:15px}}

/* Protokolle: Desktop-Untermenü und dieselbe Auswahl mobil als Reiter. */
.seitenleiste .nav-untermenue{display:none;margin:-1px 0 5px 43px;padding:3px 0 4px 12px;border-left:1px solid rgba(255,159,10,.24)}
.seitenleiste .nav-untermenue.offen{display:grid;gap:2px}
.seitenleiste .nav-untermenue button{padding:7px 9px;border:0;border-radius:5px;background:transparent;color:#89969d;font:inherit;font-size:11px;text-align:left;cursor:pointer}
.seitenleiste .nav-untermenue button:hover{background:rgba(255,255,255,.04);color:#d7dde0}
.seitenleiste .nav-untermenue button.aktiv{background:rgba(255,159,10,.1);color:#ffc04a}
.menue-klein .seitenleiste .nav-untermenue{display:none!important}
.protokoll-mobile-navigation{display:none}
.protokoll-hinweis{padding:28px 20px 32px;color:var(--muted)}
.protokoll-hinweis strong{color:var(--text)}
.protokoll-hinweis p{margin:7px 0 0}
@media(max-width:860px){
    .seitenleiste .nav-untermenue{display:none!important}
    .protokoll-mobile-navigation{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:0 0 12px;padding:4px;border:1px solid var(--line);border-radius:9px;background:#12191d}
    .protokoll-mobile-navigation button{min-width:0;min-height:38px;padding:6px 5px;border:0;border-radius:6px;background:transparent;color:#9da8ae;font:inherit;font-size:11px;cursor:pointer}
    .protokoll-mobile-navigation button.aktiv{background:rgba(255,159,10,.14);color:#ffc04a;box-shadow:inset 0 0 0 1px rgba(255,159,10,.22)}
}
@media(max-width:390px){.protokoll-mobile-navigation button{font-size:10px}}

/* Die Navigation darf bei kleinen Desktop-Höhen scrollen. Der Fuß bleibt
   davon getrennt, damit Untermenüs keine Einträge oder den Warnstreifen
   überlagern. */
@media(min-width:861px){
    .seitenleiste{overflow:hidden}
    .seitenleiste nav{flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;padding-right:4px;scrollbar-width:thin;scrollbar-color:rgba(255,159,10,.28) transparent}
    .seitenleiste nav::-webkit-scrollbar{width:4px}
    .seitenleiste nav::-webkit-scrollbar-thumb{border-radius:5px;background:rgba(255,159,10,.28)}
    .seitenleiste:after{display:none}
    .seiten-fuss{position:relative;flex:0 0 auto;margin-top:12px;padding-top:25px;background:linear-gradient(180deg,transparent,#171e23 18px)}
    .seiten-fuss:before{content:"";position:absolute;inset:0 0 auto;height:8px;background:repeating-linear-gradient(135deg,var(--orange) 0 10px,transparent 10px 18px);opacity:.65}
    .seiten-fuss .bald{margin:0}
}

/* Einheitliches Protokollformular. Die drei Arten benutzen dieselben
   Feldhöhen und Abstände; nur die Anzahl der Spalten richtet sich nach dem
   jeweiligen Inhalt. Damit bleiben Beschriftung, Eingabe und Hilfetext auch
   dann auf einer Linie, wenn einzelne Felder keinen Hilfetext besitzen. */
[data-ansicht-bereich="protokolle"] .packen-tafel{width:min(100%,1220px);margin-inline:auto;overflow:hidden}
[data-ansicht-bereich="protokolle"] #form-kontrolle,
[data-ansicht-bereich="protokolle"] [data-form-aufstellung],
[data-ansicht-bereich="protokolle"] [data-form-halteverbot]{padding:22px}
[data-ansicht-bereich="protokolle"] form>.kontrolle-kopfzeile{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:14px 16px;margin-bottom:20px}
[data-ansicht-bereich="protokolle"] #form-kontrolle>.kontrolle-kopfzeile{grid-template-columns:repeat(3,minmax(190px,1fr)) max-content}
[data-ansicht-bereich="protokolle"] form>.kontrolle-kopfzeile:has(>label:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
[data-ansicht-bereich="protokolle"] form>.kontrolle-kopfzeile>label{display:grid;grid-template-rows:minmax(16px,auto) 42px minmax(16px,auto);align-content:start;gap:4px;min-width:0;margin:0}
[data-ansicht-bereich="protokolle"] form>.kontrolle-kopfzeile>label>span,
[data-ansicht-bereich="protokolle"] form>.kontrolle-kopfzeile>label>small{margin:0;line-height:16px}
[data-ansicht-bereich="protokolle"] form>.kontrolle-kopfzeile input,
[data-ansicht-bereich="protokolle"] form>.kontrolle-kopfzeile select{width:100%;min-width:0;height:42px}
[data-ansicht-bereich="protokolle"] .kontrolle-schnell{align-self:start;margin:20px 0 0}
[data-ansicht-bereich="protokolle"] .kontrolle-standort{margin:0 0 20px;padding:12px 0;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
[data-ansicht-bereich="protokolle"] form>.kontrolle-standort-stand{margin:0 0 20px;padding:10px 0 14px;border-bottom:1px solid rgba(255,255,255,.06)}
[data-ansicht-bereich="protokolle"] form>label.breit{display:grid;gap:5px;margin:0 0 16px}
[data-ansicht-bereich="protokolle"] form>label.breit textarea{display:block;width:100%;min-width:0}
[data-ansicht-bereich="protokolle"] .protokoll-material,
[data-ansicht-bereich="protokolle"] .protokoll-fahrzeuge{margin:0 0 20px;padding:16px;border:1px solid rgba(255,255,255,.09);border-radius:9px;background:rgba(10,17,21,.18)}
[data-ansicht-bereich="protokolle"] .kontrolle-buch{margin:0;padding:22px;border-top-color:rgba(255,159,10,.2)}

@media(max-width:1050px){
    [data-ansicht-bereich="protokolle"] #form-kontrolle>.kontrolle-kopfzeile{grid-template-columns:repeat(2,minmax(0,1fr))}
    [data-ansicht-bereich="protokolle"] #form-kontrolle .kontrolle-schnell{grid-column:2;grid-row:2;margin-top:20px}
}
@media(max-width:760px){
    [data-ansicht-bereich="protokolle"] #form-kontrolle,
    [data-ansicht-bereich="protokolle"] [data-form-aufstellung],
    [data-ansicht-bereich="protokolle"] [data-form-halteverbot],
    [data-ansicht-bereich="protokolle"] .kontrolle-buch{padding:14px}
    [data-ansicht-bereich="protokolle"] form>.kontrolle-kopfzeile,
    [data-ansicht-bereich="protokolle"] #form-kontrolle>.kontrolle-kopfzeile,
    [data-ansicht-bereich="protokolle"] form>.kontrolle-kopfzeile:has(>label:nth-child(2):last-child){grid-template-columns:1fr}
    [data-ansicht-bereich="protokolle"] #form-kontrolle .kontrolle-schnell{grid-column:auto;grid-row:auto;margin-top:0}
    [data-ansicht-bereich="protokolle"] .kontrolle-schnell .knopf{width:100%;min-height:42px}
    [data-ansicht-bereich="protokolle"] .protokoll-material,
    [data-ansicht-bereich="protokolle"] .protokoll-fahrzeuge{padding:12px}
}

/* Protokollübersicht: breite Datensatzzeilen statt schmaler Packkarten. Eine
   einzelne Arbeitsstelle nutzt die Fläche ebenso sinnvoll wie eine lange
   Liste; Status und Aktionen bleiben klar voneinander getrennt. */
[data-protokoll-uebersicht]{grid-template-columns:1fr;padding:12px}
[data-protokoll-uebersicht] .protokoll-uebersicht-karte{display:grid;grid-template-columns:minmax(210px,.8fr) minmax(290px,1.25fr) auto;grid-template-rows:auto auto;gap:7px 24px;align-items:center;padding:16px 18px;cursor:default;background:rgba(17,25,30,.28)}
[data-protokoll-uebersicht] .protokoll-uebersicht-karte>strong{grid-column:1;grid-row:1;font-size:15px}
[data-protokoll-uebersicht] .protokoll-uebersicht-adresse{grid-column:1;grid-row:2;justify-content:flex-start;flex-wrap:wrap}
[data-protokoll-uebersicht] .protokoll-uebersicht-stand{grid-column:2;grid-row:1/3;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px 14px;opacity:1}
[data-protokoll-uebersicht] .protokoll-uebersicht-stand>span:first-child{color:#bcc5ca;line-height:1.45}
[data-protokoll-uebersicht] .protokoll-uebersicht-stand>.marke{white-space:nowrap}
[data-protokoll-uebersicht] .protokoll-uebersicht-aktionen{grid-column:3;grid-row:1/3;display:flex;flex-wrap:nowrap;justify-content:flex-end;margin:0}
[data-protokoll-uebersicht] .protokoll-uebersicht-aktionen .knopf{width:auto;white-space:nowrap}
@media(max-width:1100px){
    [data-protokoll-uebersicht] .protokoll-uebersicht-karte{grid-template-columns:minmax(200px,.8fr) minmax(260px,1.2fr)}
    [data-protokoll-uebersicht] .protokoll-uebersicht-aktionen{grid-column:1/-1;grid-row:3;justify-content:flex-start;padding-top:5px}
}
@media(max-width:680px){
    [data-protokoll-uebersicht]{padding:9px}
    [data-protokoll-uebersicht] .protokoll-uebersicht-karte{grid-template-columns:1fr;gap:7px;padding:14px}
    [data-protokoll-uebersicht] .protokoll-uebersicht-karte>strong,
    [data-protokoll-uebersicht] .protokoll-uebersicht-adresse,
    [data-protokoll-uebersicht] .protokoll-uebersicht-stand,
    [data-protokoll-uebersicht] .protokoll-uebersicht-aktionen{grid-column:1;grid-row:auto}
    [data-protokoll-uebersicht] .protokoll-uebersicht-stand{grid-template-columns:1fr;gap:8px;margin-top:5px;padding-top:11px;border-top:1px solid rgba(255,255,255,.07)}
    [data-protokoll-uebersicht] .protokoll-uebersicht-stand>.marke{justify-self:start}
    [data-protokoll-uebersicht] .protokoll-uebersicht-aktionen{display:grid;grid-template-columns:1fr 1fr;gap:7px;width:100%;padding-top:7px}
    [data-protokoll-uebersicht] .protokoll-uebersicht-aktionen .knopf{width:100%;white-space:normal}
    [data-protokoll-uebersicht] .protokoll-uebersicht-aktionen .knopf:first-child{grid-column:1/-1}
}

/* ── Verbindlicher Button-Standard ────────────────────────────────────────
   Jeder neue Aktionsbutton erhält die Klasse .knopf. Standardmäßig ist er
   primär; .knopf-geist kennzeichnet eine sekundäre Aktion und .knopf-klein
   eine kompakte Aktion in Tabellen, Karten oder Werkzeugleisten.

   Größen und Farben werden ausschließlich hier gepflegt. Fachliche
   Spezialbedienelemente (Statuswahl, Mengensteller, Navigation) sind keine
   Aktionsbuttons und dürfen eigene Regeln besitzen. */
:root{
    --knopf-hoehe:40px;
    --knopf-hoehe-klein:36px;
    --knopf-radius:7px;
    --knopf-polster:14px;
    --knopf-polster-klein:12px;
    --knopf-schrift:12px;
    --knopf-schrift-klein:11px;
}
.knopf{
    display:inline-flex;align-items:center;justify-content:center;gap:7px;
    min-height:var(--knopf-hoehe);height:auto;padding:7px var(--knopf-polster);
    border:1px solid #ff9f0a;border-radius:var(--knopf-radius);
    background:linear-gradient(110deg,#ffc400,#ffad24);color:#14191c;
    font:inherit;font-size:var(--knopf-schrift);font-weight:700;line-height:1.2;
    text-align:center;text-decoration:none;white-space:nowrap;cursor:pointer;
    box-shadow:0 5px 14px rgba(255,159,10,.1);
    transition:background .16s,border-color .16s,color .16s,box-shadow .16s,transform .16s
}
.knopf:hover{border-color:#ffb21f;background:linear-gradient(110deg,#ffd129,#ffb43b);transform:translateY(-1px);box-shadow:0 7px 17px rgba(255,159,10,.15)}
.knopf:active{transform:translateY(0);box-shadow:none}
.knopf:focus-visible{outline:2px solid #fff;outline-offset:2px}
.knopf[disabled],.knopf[aria-disabled="true"]{opacity:.48;cursor:not-allowed;transform:none;box-shadow:none}
.knopf-klein{min-height:var(--knopf-hoehe-klein);padding:6px var(--knopf-polster-klein);font-size:var(--knopf-schrift-klein)}
.knopf.knopf-geist{border-color:rgba(255,255,255,.17);background:#222c32;color:#c8d0d4;box-shadow:none}
.knopf.knopf-geist:hover{border-color:rgba(255,159,10,.45);background:#2a353b;color:#fff;transform:none;box-shadow:none}
@media(max-width:600px){
    :root{--knopf-hoehe:44px;--knopf-hoehe-klein:40px}
    .knopf{white-space:normal}
}

/* ── Dokumentakte ─────────────────────────────────────────────────────── */
dialog.dokumente-dialog{width:min(900px,calc(100vw - 28px));max-width:none;max-height:min(92dvh,920px);padding:0;border-color:rgba(255,159,10,.3);background:linear-gradient(145deg,#202a30,#172026);box-shadow:0 28px 90px rgba(0,0,0,.58)}
.dokumente-dialog::backdrop{background:rgba(5,9,11,.76);backdrop-filter:blur(5px)}
.dokumente-dialog>.app-dialog-form{gap:18px;padding:20px}
.dokumente-dialog .app-dialog-kopf{position:sticky;z-index:3;top:-20px;margin:-20px -20px 0;padding:18px 20px;border-bottom-color:rgba(255,159,10,.22);background:rgba(27,36,42,.97);backdrop-filter:blur(12px)}
.dokumente-dialog .app-dialog-symbol{border-color:rgba(255,159,10,.38);background:rgba(255,159,10,.1)}
.dokumente-dialog .app-dialog-symbol:before{background:#ffb634;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h6l2 2h8v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Z'/%3E%3Cpath d='M7 12h10M7 16h7'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h6l2 2h8v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Z'/%3E%3Cpath d='M7 12h10M7 16h7'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
.dokumente-dialog .app-dialog-kopf h2{font-size:19px}
.dokumente-liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.dokumente-fach,.dokumente-fach+.dokumente-fach{min-width:0;margin:0;padding:14px;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:rgba(10,17,21,.2)}
.dokumente-fach>strong{position:relative;display:flex;align-items:center;gap:9px;margin:0 0 10px;padding:0 0 10px;border-bottom-color:rgba(255,255,255,.08);color:#eef2f3;font-size:13px}
.dokumente-fach>strong:before{content:"";flex:0 0 25px;width:25px;height:25px;border-radius:7px;background-color:#ffb32f;background-image:var(--dokument-icon);background-position:center;background-repeat:no-repeat;background-size:16px}
.dokumente-fach[data-dokument-art=antrag]>strong{--dokument-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23172026' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 3h9l4 4v14H6zM14 3v5h5M9 13h7M9 17h5'/%3E%3C/g%3E%3C/svg%3E")}
.dokumente-fach[data-dokument-art=genehmigung]>strong{--dokument-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23172026' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 20 6v6c0 5-3.4 8-8 9-4.6-1-8-4-8-9V6Z'/%3E%3Cpath d='m8.5 12 2.2 2.2 4.8-5'/%3E%3C/g%3E%3C/svg%3E")}
.dokumente-fach[data-dokument-art=vzplan]>strong{--dokument-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23172026' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='m3 6 5-3 8 3 5-3v15l-5 3-8-3-5 3Z'/%3E%3Cpath d='M8 3v15M16 6v15'/%3E%3C/g%3E%3C/svg%3E")}
.dokumente-fach[data-dokument-art=sonstiges]>strong{--dokument-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23172026' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 5h6l2 2h8v12H4z'/%3E%3C/g%3E%3C/svg%3E")}
.dokumente-fach>.packen-leer{min-height:45px;margin:0;padding:12px 4px;color:#7f8b92;font-size:11px;text-align:left}
.dokumente-zeile{min-height:48px;padding:7px 0;gap:7px}
.dokumente-text>span{color:#edf1f2;font-size:12px;font-weight:600}
.dokumente-text>small{margin-top:2px;color:#8e9aa0;font-size:9px;line-height:1.4}
.dokumente-zeile>.knopf{flex:0 0 auto}
.dokumente-form{gap:10px 12px;margin-top:2px;padding:16px;border:1px solid rgba(255,159,10,.2);border-radius:10px;background:linear-gradient(110deg,rgba(255,159,10,.065),rgba(8,14,17,.16))}
.dokumente-form-kopf{grid-column:1/-1;margin-bottom:2px;padding-bottom:11px;border-bottom:1px solid rgba(255,255,255,.08)}
.dokumente-form-kopf strong,.dokumente-form-kopf small{display:block}
.dokumente-form-kopf strong{color:#f1f4f5;font-size:13px}
.dokumente-form-kopf small{margin-top:2px;color:#8f9ba1;font-size:10px}
.dokumente-form label{margin:0}
.dokumente-form input[type=file]{height:auto;min-height:44px;padding:5px 7px;color:#aeb8bd;font-size:11px}
.dokumente-form input[type=file]::file-selector-button{height:32px;margin-right:9px;padding:0 11px;border:1px solid rgba(255,159,10,.35);border-radius:6px;background:#263139;color:#dce2e4;font:inherit;font-weight:600;cursor:pointer}
.dokumente-form input[type=file]::file-selector-button:hover{border-color:#ff9f0a;color:#fff}
.dokumente-form .reihe-knoepfe{margin-top:0}
@media(max-width:720px){
    dialog.dokumente-dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}
    .dokumente-dialog>.app-dialog-form{padding:14px}
    .dokumente-dialog .app-dialog-kopf{top:-14px;margin:-14px -14px 0;padding:14px}
    .dokumente-liste{grid-template-columns:1fr}
    .dokumente-form{grid-template-columns:1fr;padding:13px}
    .dokumente-form>*{grid-column:1}
}

/* ── Projektübersicht ─────────────────────────────────────────────────── */
.projekt-tabelle td{vertical-align:middle}
.projekt-tabelle th:nth-child(1){width:17%}
.projekt-tabelle th:nth-child(2){width:22%}
.projekt-tabelle th:nth-child(3){width:17%}
.projekt-tabelle th:nth-child(4){width:13%}
.projekt-tabelle th:nth-child(5){width:13%}
.projekt-tabelle th:nth-child(6){width:120px;text-align:center}
.projekt-tabelle th:nth-child(7){width:130px;text-align:center}
.projekt-identitaet strong,.projekt-identitaet small{display:block}
.projekt-identitaet strong{color:#f0f3f4;font-size:13px;line-height:1.35}
.projekt-identitaet small{margin-top:4px;color:#89959b;font-size:9px;font-weight:700;letter-spacing:.045em}
.projekt-zeitraum-werte{display:grid;gap:5px}
.projekt-zeitraum-werte>span{display:grid;grid-template-columns:24px 1fr;align-items:baseline;gap:5px}
.projekt-zeitraum small{color:#7f8a90;font-size:8px;text-transform:uppercase}
.projekt-zeitraum strong{font-size:11px;font-weight:600;white-space:nowrap}
.projekt-tabelle th:nth-child(1),.projekt-tabelle td:nth-child(1),
.projekt-tabelle th:nth-child(5),.projekt-tabelle td:nth-child(5){white-space:nowrap}
.projekt-tabelle td.unterlagen{min-width:145px}
.projekt-tabelle td.unterlagen .unterlage{display:inline-flex;align-items:center;gap:5px;margin:2px 5px 2px 0;padding:4px 7px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(255,255,255,.025);color:#7f8a90;font-size:9px;line-height:1;white-space:nowrap}
.projekt-tabelle td.unterlagen .unterlage.ist-da{border-color:rgba(138,191,59,.3);background:rgba(138,191,59,.075);color:#a8d267}
.projekt-tabelle td.unterlagen .unterlage-zeichen{display:grid;place-items:center;width:12px;height:12px;border-radius:50%;font-size:9px;font-weight:800}
.projekt-tabelle td.tat{display:table-cell;min-width:0;max-width:none;padding-inline:8px;text-align:center;white-space:nowrap}
.projekt-tabelle td.tat .tabellen-aktion{display:inline-flex;margin-inline:2px;vertical-align:middle}
.projekt-tabelle td.tat .tabellen-aktion{width:30px;min-width:30px;min-height:30px;height:30px;padding:0;border-radius:7px;font-size:0}
.projekt-tabelle td.tat .tabellen-aktion:before{left:7px;width:14px;height:14px}
.projekt-tabelle td.tat .tabellen-aktion:hover{transform:translateY(-1px)}
.projekt-tabelle td:nth-child(6){text-align:center}
.projekt-tabelle td:nth-child(6) .marke{display:inline-flex;gap:4px;padding:3px 7px;border-color:rgba(255,255,255,.13);background:rgba(255,255,255,.025);font-size:8px;letter-spacing:.035em;white-space:nowrap;word-break:normal;overflow-wrap:normal}
.projekt-tabelle td:nth-child(6) .marke:before{width:4px;height:4px}
.projekt-tabelle .marke-offen{border-color:rgba(155,166,173,.26)!important;background:rgba(155,166,173,.07)!important;color:#aeb8bd}
.projekt-tabelle .marke-geplant{border-color:rgba(86,165,230,.38)!important;background:rgba(86,165,230,.1)!important;color:#83c4f2}
.projekt-tabelle .marke-beantragt{border-color:rgba(255,159,10,.42)!important;background:rgba(255,159,10,.1)!important;color:#ffb447}
.projekt-tabelle .marke-aufgestellt{border-color:rgba(138,191,59,.46)!important;background:rgba(138,191,59,.11)!important;color:#a9d563}
.projekt-tabelle .marke-abgeholt{border-color:rgba(52,199,184,.4)!important;background:rgba(52,199,184,.09)!important;color:#6bd6cb}
.projekt-tabelle .marke-archiviert{border-color:rgba(127,138,144,.22)!important;background:rgba(127,138,144,.055)!important;color:#818d93}
.projekt-tabelle .aktion-dokumente:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c7cdd1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h6l2 2h8v12H4z'/%3E%3Cpath d='M8 11h8m-8 4h5'/%3E%3C/svg%3E")}
.projekt-tabelle .aktion-senden:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c7cdd1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 18-8-8 18-2-8Z'/%3E%3Cpath d='m11 13 4-4'/%3E%3C/svg%3E")}
.projekt-tabelle .aktion-archiv:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffad55' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h16v12H4zM3 4h18v4H3zM9 12h6'/%3E%3C/svg%3E")}

/* Kundenliste: Kontaktdetails bleiben im Datensatz und in der Suche. In der
   Übersicht reicht der betriebliche Kern, damit Aktionen nicht abschneiden. */
.kunden-tabelle{table-layout:fixed}
.kunden-tabelle th:nth-child(1){width:96px}
.kunden-tabelle th:nth-child(2){width:34%}
.kunden-tabelle th:nth-child(3){width:25%}
.kunden-tabelle th:nth-child(4){width:160px}
.kunden-tabelle th:nth-child(5){width:92px}
.kunden-tabelle th:nth-child(6){width:84px;text-align:center}
.kunden-tabelle tbody td{padding-block:7px}
.kunden-tabelle td.tat{min-width:0;justify-content:center;gap:5px;padding:7px 8px;white-space:nowrap}
.kunden-tabelle td.tat .tabellen-aktion{width:30px;min-width:30px;height:30px;min-height:30px;padding:0;border-radius:7px;font-size:0}
.kunden-tabelle td.tat .tabellen-aktion:before{left:7px;width:14px;height:14px}
.kunden-tabelle .aktion-warnung:before{background-image:none;background-color:#ff9b45;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
@media(max-width:860px){.kunden-tabelle th:nth-child(1),.kunden-tabelle th:nth-child(2),.kunden-tabelle th:nth-child(3),.kunden-tabelle th:nth-child(4),.kunden-tabelle th:nth-child(5),.kunden-tabelle th:nth-child(6){width:auto}.kunden-tabelle td.tat{justify-content:flex-start}.kunden-tabelle td.tat .tabellen-aktion{width:38px;min-width:38px;height:38px;min-height:38px}.kunden-tabelle td.tat .tabellen-aktion:before{left:11px}}

/* Halteverbotsprotokoll, Desktop und Mobil: Fahrzeuge bleiben mit ausgefüllten Werten
   eindeutig. Jede Zeile ist eine beschriftete Karte statt einer Feldmatrix. */
[data-form-halteverbot] .protokoll-fahrzeug-zeile{display:grid;grid-template-columns:1.15fr 1.15fr .8fr .8fr 34px;align-items:end;gap:8px;margin-top:7px;padding:12px;border:1px solid rgba(255,255,255,.09);border-radius:8px;background:rgba(255,255,255,.025)}
[data-form-halteverbot] .protokoll-fahrzeug-kopf{display:none}
[data-form-halteverbot] .protokoll-fahrzeug-feld{display:grid;gap:4px;min-width:0;margin:0}
[data-form-halteverbot] .protokoll-fahrzeug-feld>span{overflow:hidden;color:#89959b;font-size:8px;font-weight:700;letter-spacing:.055em;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}
[data-form-halteverbot] .protokoll-fahrzeug-feld>input{width:100%;min-width:0;height:40px}
[data-form-halteverbot] .protokoll-fahrzeug-zeile>.knopf{width:34px;min-width:34px;height:40px;min-height:40px;padding:0;color:#d9dfe2;font-size:17px}

@media(max-width:700px){
    [data-form-halteverbot]{padding-bottom:calc(38px + env(safe-area-inset-bottom))!important}
    [data-form-halteverbot] .protokoll-material,
    [data-form-halteverbot] .protokoll-fahrzeuge{gap:10px;margin-bottom:16px;padding:11px!important;border-radius:10px}
    [data-form-halteverbot] .protokoll-material>.feld-titel,
    [data-form-halteverbot] .protokoll-fahrzeuge>.feld-titel{color:#f0f3f4;font-size:14px;font-weight:700}
    [data-form-halteverbot] .protokoll-material>.reihe-knoepfe{display:grid;grid-template-columns:1fr;gap:8px}
    [data-form-halteverbot] .protokoll-material>.reihe-knoepfe>*{width:100%;min-width:0}
    [data-form-halteverbot] .protokoll-fahrzeug-zeile{grid-template-columns:1fr 1fr 38px;gap:8px;margin:0;padding:11px}
    [data-form-halteverbot] .protokoll-fahrzeug-kopf{display:block;grid-column:1/3;align-self:center;color:#ffb43b;font-size:11px;letter-spacing:.035em;text-transform:uppercase}
    [data-form-halteverbot] .protokoll-fahrzeug-feld.feld-kennzeichen{grid-column:1/3}
    [data-form-halteverbot] .protokoll-fahrzeug-feld.feld-fabrikat{grid-column:1/3}
    [data-form-halteverbot] .protokoll-fahrzeug-feld.feld-farbe{grid-column:1}
    [data-form-halteverbot] .protokoll-fahrzeug-feld.feld-ventil{grid-column:2}
    [data-form-halteverbot] .protokoll-fahrzeug-zeile>.knopf{grid-column:3;grid-row:1;width:38px;min-width:38px;height:32px;min-height:32px;align-self:center;border-color:rgba(239,87,75,.25);color:#ef776d}
    [data-form-halteverbot] .protokoll-fahrzeug-feld>span{font-size:8px}
    [data-form-halteverbot] .protokoll-fahrzeug-feld>input{height:42px;font-size:13px}
    [data-form-halteverbot] [data-hv-fahrzeug-plus]{width:100%;min-height:42px}
    [data-form-halteverbot] .protokoll-fahrzeuge>small,
    [data-form-halteverbot] .protokoll-material>small{line-height:1.5}
    [data-form-halteverbot]>label.breit textarea[name=notiz]{height:120px;min-height:120px}
}

@media(max-width:380px){
    [data-form-halteverbot] .protokoll-fahrzeug-zeile{grid-template-columns:1fr 36px}
    [data-form-halteverbot] .protokoll-fahrzeug-kopf,
    [data-form-halteverbot] .protokoll-fahrzeug-feld.feld-kennzeichen,
    [data-form-halteverbot] .protokoll-fahrzeug-feld.feld-fabrikat,
    [data-form-halteverbot] .protokoll-fahrzeug-feld.feld-farbe,
    [data-form-halteverbot] .protokoll-fahrzeug-feld.feld-ventil{grid-column:1}
    [data-form-halteverbot] .protokoll-fahrzeug-zeile>.knopf{grid-column:2}
}

/* Tablet: Projekte sind als Karten schneller erfassbar und brauchen keine
   horizontale Tabelle. Zwei Karten nebeneinander, mobil nur noch eine. */
@media(max-width:1100px){
    [data-ansicht-bereich=projekte] .tabelle-huelle{overflow:visible;background:transparent}
    .projekt-tabelle,.projekt-tabelle tbody{display:block;width:100%}
    .projekt-tabelle thead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
    .projekt-tabelle tbody{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:12px}
    .projekt-tabelle tbody tr{display:block;min-width:0;overflow:hidden;border:1px solid rgba(255,255,255,.11);border-radius:10px;background:rgba(23,32,37,.82);box-shadow:0 6px 16px rgba(0,0,0,.11)}
    .projekt-tabelle tbody tr:hover{background:rgba(27,37,43,.92)}
    .projekt-tabelle tbody td{display:grid;grid-template-columns:minmax(92px,32%) minmax(0,1fr);align-items:start;gap:10px;width:100%;min-width:0;min-height:0;padding:9px 12px;border-bottom:1px solid rgba(255,255,255,.065);white-space:normal;text-align:left;overflow-wrap:anywhere}
    .projekt-tabelle tbody td:last-child{border-bottom:0}
    .projekt-tabelle tbody td[data-spalte]:before{content:attr(data-spalte);color:#89959b;font-size:9px;font-weight:700;letter-spacing:.055em;text-transform:uppercase}
    .projekt-tabelle td.unterlagen{min-width:0}
    table.tabelle.projekt-tabelle td.tat{display:flex;justify-content:flex-start;gap:7px;max-width:none;min-width:0;padding:11px 12px}
    table.tabelle.projekt-tabelle td.tat:before{content:"Aktionen";grid-column:1/-1;color:#89959b;font-size:9px;font-weight:700;letter-spacing:.055em;text-transform:uppercase}
    .projekt-tabelle td.tat .tabellen-aktion{flex:0 0 36px;width:36px;height:36px;min-height:36px;padding:0;font-size:0}
    .projekt-tabelle td.tat .tabellen-aktion:before{left:10px}
}
@media(max-width:760px){
    .projekt-tabelle tbody{grid-template-columns:1fr;padding:9px;gap:9px}
}
@media(max-width:390px){
    .projekt-tabelle tbody td{grid-template-columns:82px minmax(0,1fr);padding-inline:10px}
    table.tabelle.projekt-tabelle td.tat:before{grid-column:1}
}

.beleg-position-fest{display:flex;align-items:center;min-height:40px;padding:0 12px;border:1px solid rgba(255,159,10,.28);border-radius:7px;background:linear-gradient(90deg,rgba(255,159,10,.1),rgba(255,196,0,.035));color:#f2f4f5;font-size:12px;font-weight:600}.beleg-position-fest:before{content:"";flex:0 0 7px;width:7px;height:7px;margin-right:9px;border-radius:50%;background:#ffad24;box-shadow:0 0 0 4px rgba(255,159,10,.1)}.beleg-position-fest[hidden]{display:none}

/* Mobile Arbeitsoberfläche: sichere Touch-Ziele, kein verdeckter Inhalt und
   eine horizontal erreichbare Navigation für alle Arbeitsbereiche. */
@media(max-width:860px){
    html{scroll-padding-bottom:calc(84px + env(safe-area-inset-bottom))}
    body{overflow-x:hidden}
    .huelle,.huelle.menue-klein{display:block;padding-bottom:calc(84px + env(safe-area-inset-bottom))}
    .inhalt{width:100%;min-width:0}
    .kopf{position:relative;top:auto;min-height:62px;height:auto;padding:11px 14px;gap:10px}
    .kopf>div:first-child{min-width:0}.kopf>div:first-child small,.kopf>div:first-child strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .kopf-rechts{gap:7px}.kopf #abmelden{min-height:40px;padding:7px 10px}
    main{width:100%;padding:16px 12px 24px}
    .seitenleiste,.menue-klein .seitenleiste{position:fixed;z-index:80;inset:auto 0 0;width:100%;height:calc(74px + env(safe-area-inset-bottom));padding:5px 5px env(safe-area-inset-bottom);overflow:hidden;border-width:1px 0 0;background:rgba(22,30,35,.98);box-shadow:0 -10px 30px rgba(0,0,0,.28);backdrop-filter:blur(16px)}
    .seitenleiste nav,.menue-klein .seitenleiste nav{display:flex;height:68px;gap:2px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
    .seitenleiste nav::-webkit-scrollbar{display:none}
    .seitenleiste nav a,.menue-klein .seitenleiste nav a{flex:0 0 74px;min-width:74px;min-height:62px;justify-content:center;flex-direction:column;gap:2px;padding:4px 3px;scroll-snap-align:start;border-radius:8px;color:#9fabb1;font-size:9px;line-height:1.1}
    .seitenleiste nav a>span,.menue-klein .seitenleiste nav a>span{flex:0 0 30px;width:30px;height:30px;margin:0}
    .seitenleiste nav a>span:before,.menue-klein .seitenleiste nav a>span:before{width:17px;height:17px}
    .seitenleiste nav a.aktiv:before,.menue-klein .seitenleiste nav a.aktiv:before{inset:0 12px auto;width:auto;height:2px;border-radius:0 0 2px 2px}
    .tafel{max-width:100%;border-radius:9px}.tafel-kopf{min-height:58px;padding:11px 13px;gap:10px;flex-wrap:wrap}
    .tafel-kopf>div{min-width:0}.tafel-kopf strong,.tafel-kopf small{overflow-wrap:anywhere}
    .filterzeile{grid-template-columns:1fr;padding:12px 13px;gap:10px}.filterzeile .haken{padding:3px 0}
    .tafel>.gitter-formular{width:calc(100% - 20px);margin:10px;padding:13px}
    .gitter-formular,.reihe-formular{gap:0}
    .inhalt input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),.inhalt select,.inhalt textarea,.komfort-auswahl-knopf,.auswahlfeld-knopf{font-size:16px}
    .inhalt input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),.inhalt select{min-height:44px;height:44px}
    .inhalt textarea{min-height:104px}
    .knopf,.inhalt button{touch-action:manipulation}
    .reihe-knoepfe{flex-wrap:wrap}.reihe-knoepfe .knopf{min-height:44px}
    .tabelle-huelle{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
    .tabelle{font-size:12px}.tabelle th,.tabelle td{padding:10px 12px}
    .meldung{top:12px;left:12px;right:12px;max-width:none}
    .komfort-auswahl-liste,.auswahlfeld-liste{max-height:min(52vh,360px)}
}
@media(max-width:600px){
    .kopf .kuerzel{display:none}.kopf #abmelden{font-size:11px}
    .ansicht-intro{margin-bottom:18px}.ansicht-intro h1{font-size:28px}.ansicht-intro p{font-size:12px}
    .kachel{min-height:126px;padding:17px}.kachel strong{font-size:26px}
    .tafel-kopf>.knopf{margin-left:auto}
    .tafel>.gitter-formular>.reihe-knoepfe{display:grid;grid-template-columns:1fr 1fr;width:100%}
    .tafel>.gitter-formular>.reihe-knoepfe .knopf{width:100%;min-height:42px}
    .packen-karten{grid-template-columns:1fr}.packen-abschluss{margin:12px;padding:14px}
    [data-ansicht-bereich="kontrolle"] .kontrolle-punkt{gap:10px;padding:12px}
    [data-ansicht-bereich="kontrolle"] .kontrolle-punkt>span{flex:0 0 auto;width:100%;font-size:13px;line-height:1.45}
    [data-ansicht-bereich="kontrolle"] .kontrolle-wahl button{min-height:44px}
}
@media(max-width:380px){
    main{padding-inline:8px}.tafel{border-radius:8px}
    .seitenleiste nav a,.menue-klein .seitenleiste nav a{flex-basis:68px;min-width:68px}
    .tafel>.gitter-formular{width:calc(100% - 12px);margin:6px;padding:11px}
    .tafel>.gitter-formular>.reihe-knoepfe{grid-template-columns:1fr}
}

/* Listen werden rechtzeitig zu Datensatzkarten, bevor eine horizontale
   Scrollleiste noetig wird. Tablet: zwei Karten, Smartphone: eine. */
@media(max-width:1500px){
    .tabelle-huelle{overflow:visible;background:transparent}
    .tabelle,.tabelle tbody{display:block;width:100%}
    .tabelle thead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
    .tabelle tbody{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:10px}
    .tabelle tbody tr{display:block;overflow:hidden;border:1px solid rgba(255,255,255,.11);border-radius:10px;background:rgba(23,32,37,.8);box-shadow:0 5px 14px rgba(0,0,0,.1)}
    .tabelle tbody tr:hover{background:rgba(27,37,43,.9)}
    .tabelle tbody td{display:grid;grid-template-columns:minmax(88px,34%) minmax(0,1fr);align-items:start;gap:10px;width:100%;min-height:0;padding:9px 11px;border-bottom:1px solid rgba(255,255,255,.065);white-space:normal;text-align:left;overflow-wrap:anywhere}
    .tabelle tbody td:last-child{border-bottom:0}
    .tabelle tbody td[data-spalte]:before{content:attr(data-spalte);color:#89959b;font-size:9px;font-weight:700;letter-spacing:.055em;text-transform:uppercase}
    .tabelle tbody td[colspan]{display:block;padding:18px 12px;text-align:center}
    .tabelle tbody tr:has(>td[colspan]){grid-column:1/-1}
    .tabelle td.artikel-bild{width:100%;height:auto;min-width:0}
    .tabelle td.artikel-bild img,.tabelle td.artikel-bild .artikel-bild-platzhalter{margin:0}
    .tabelle td.tat{display:flex;align-items:center;justify-content:flex-start;gap:7px;padding:10px 11px;flex-wrap:wrap}
    .tabelle td.tat:before{content:"Aktionen";flex:0 0 100%;color:#89959b;font-size:9px;font-weight:700;letter-spacing:.055em;text-align:left;text-transform:uppercase}
    .tabelle .tabellen-aktion{width:auto;min-width:0;height:38px;min-height:38px;padding:0 11px 0 32px;font-size:10px}
    .tabelle .tabellen-aktion:before{left:10px}
}
@media(max-width:700px){
    .tabelle tbody{grid-template-columns:1fr}
}