/* ============================================================================
   FIX 2026-10-05 10:40 HanwareWebERP (Zusatzmodul "Aufgaben & Plaene", Anwender-Auftrag 05.10.2026): Oberflaeche des Moduls -
   Modulnavigation, Planuebersicht, Board, Liste, Kalender, Zeitleiste, Detailfenster, Mein Tag, Zeiterfassung, Berichte.
   Portiert aus HanwareAdminPortal\wwwroot\Content\portal-module.css (nur die Aufgaben-Teile; ohne Tickets/Chat/Status/Wissen/Regeln).
   Hanware-Design (Segoe UI, Navy, flache Karten, dezente Rahmen), Dunkelmodus ueber html[data-farbschema="dunkel"] mit den
   Variablen aus hw-dunkel.css (--hw-d-*). Praefixe: au- Modulnavigation, pm- allgemein, pl- Plaene, ab- Board, ad- Detail,
   al- Liste, mt- Mein Tag, kal Kalender, gt- Zeitleiste, zt- Zeiterfassung.
   ========================================================================== */
:root { --pm-karte: #fff; --pm-karte2: #f8fafc; --pm-feld: #fff; --pm-text: #1e293b; --pm-text2: #64748b; --pm-rand: var(--hw-rahmen, #cbd5e1); --pm-linie: var(--hw-linie, #e2e8f0); --pm-flaeche: var(--hw-flaeche, #f1f5f9); --pm-label: var(--hw-label, #475569); --pm-navy: var(--hw-navy, #1e3a5f); --pm-hell: var(--hw-hell, #dbeafe); --pm-bubble-hw: #eff6ff; --pm-schatten-g: 0 12px 32px rgba(15,23,42,.18); }
html[data-farbschema="dunkel"] { --pm-karte: var(--hw-d-flaeche, #1e293b); --pm-karte2: var(--hw-d-flaeche2, #273449); --pm-feld: var(--hw-d-bg, #0f172a); --pm-text: var(--hw-d-text, #e2e8f0); --pm-text2: var(--hw-d-text2, #94a3b8); --pm-rand: var(--hw-d-rand, #334155); --pm-linie: var(--hw-d-rand, #334155); --pm-flaeche: var(--hw-d-bg, #0f172a); --pm-label: var(--hw-d-text2, #94a3b8); --pm-navy: #bfdbfe; --pm-hell: #1e3a8a; --pm-bubble-hw: #172554; --pm-schatten-g: 0 12px 32px rgba(0,0,0,.6); }

/* ---------- Modulnavigation ---------- */
.au-nav { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; padding: 6px; background: var(--pm-karte); border: 1px solid var(--pm-rand); border-radius: 12px; }
.au-nav a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 8px; color: var(--pm-text2); font: 700 12.5px var(--hw-font); text-decoration: none; white-space: nowrap; }
.au-nav a:hover { background: var(--pm-flaeche); color: var(--pm-text); text-decoration: none; }
.au-nav a.aktiv { background: var(--hw-navy); color: #fff; }
.au-nav a.hilfe { margin-left: auto; width: 32px; height: 32px; justify-content: center; padding: 0; border-radius: 50%; border: 1px solid var(--pm-rand); color: var(--hw-akzent); }
@media (max-width: 760px) { .au-nav a .t { display: none; } .au-nav a { padding: 8px 10px; } .au-nav a.hilfe .t { display: none; } }

/* ---------- allgemeine Bausteine ---------- */
.hw-mini { font-size: 11.5px; color: var(--pm-text2); }
.hw-raster-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.hw-raster-31 { display: grid; grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr); gap: 14px; align-items: start; }
@media (max-width: 1000px) { .hw-raster-2, .hw-raster-31 { grid-template-columns: 1fr; } }
.hw-chart { position: relative; min-height: 200px; }
.hw-chart canvas { max-width: 100%; }
.pm-av { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--pm-hell); color: var(--pm-navy); font: 700 10.5px var(--hw-font); flex: 0 0 26px; border: 2px solid var(--pm-karte); }
.pm-avs { display: inline-flex; } .pm-avs .pm-av + .pm-av { margin-left: -8px; }
.pm-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font: 700 11px var(--hw-font); background: var(--pm-flaeche); color: var(--pm-label); white-space: nowrap; }
.pm-chip.farbe { background: var(--f, #64748b); color: #fff; }
.pm-leer { text-align: center; padding: 34px 14px; color: var(--pm-text2); font-size: 13.5px; }
.pm-leer i.fa { font-size: 28px; display: block; margin-bottom: 8px; opacity: .5; }
.pm-leiste { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.pm-leiste .raum { flex: 1; }
.pm-suche { position: relative; min-width: 220px; flex: 1 1 260px; max-width: 420px; }
.pm-suche input { width: 100%; padding: 8px 12px 8px 32px; border: 1px solid var(--pm-rand); border-radius: 10px; font: 600 13px var(--hw-font); background: var(--pm-feld); color: var(--pm-text); box-sizing: border-box; }
.pm-suche i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--pm-text2); }
.pm-tabs { display: flex; gap: 2px; border-bottom: 2px solid var(--pm-linie); margin-bottom: 14px; overflow-x: auto; scrollbar-width: thin; }
.pm-tabs a, .pm-tabs button { padding: 9px 14px; font: 700 13px var(--hw-font); color: var(--pm-text2); text-decoration: none; border: 0; background: none; border-bottom: 3px solid transparent; margin-bottom: -2px; cursor: pointer; white-space: nowrap; display: inline-flex; gap: 7px; align-items: center; }
.pm-tabs a.aktiv, .pm-tabs button.aktiv { color: var(--pm-navy); border-bottom-color: var(--hw-akzent); }
.pm-hinweis { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border-radius: 12px; border: 1px solid #bfdbfe; background: #eff6ff; color: #1e3a8a; font-size: 13px; margin-bottom: 14px; }
.pm-hinweis.amber { border-color: #fde68a; background: #fffbeb; color: #92400e; }
html[data-farbschema="dunkel"] .pm-hinweis { background: #172554; border-color: #1e3a8a; color: #dbeafe; }
html[data-farbschema="dunkel"] .pm-hinweis.amber { background: #3b2f0b; border-color: #78350f; color: #fde68a; }
.pm-raster-kpi { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 14px; }
.pm-kpi { background: var(--pm-karte); border: 1px solid var(--pm-rand); border-radius: 14px; padding: 12px 14px; color: var(--pm-text); display: block; position: relative; overflow: hidden; }
.pm-kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--k, var(--hw-akzent)); }
.pm-kpi .t { font: 700 11.5px var(--hw-font); color: var(--pm-text2); text-transform: uppercase; letter-spacing: .3px; }
.pm-kpi .z { font: 800 26px var(--hw-font); color: var(--pm-navy); margin-top: 3px; line-height: 1.1; }
.pm-kpi .u { font-size: 11.5px; color: var(--pm-text2); margin-top: 2px; }
.pm-balken { display: flex; flex-direction: column; gap: 7px; }
.pm-balken .b { display: grid; grid-template-columns: minmax(90px, 160px) 1fr 40px; gap: 8px; align-items: center; font-size: 12.5px; color: var(--pm-text); }
.pm-balken .b .s { height: 9px; border-radius: 5px; background: var(--pm-flaeche); overflow: hidden; } .pm-balken .b .s div { height: 100%; border-radius: 5px; background: var(--f, var(--hw-akzent)); }
.pm-balken .b .n { text-align: right; font-weight: 700; } .pm-balken .b .l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-flex; gap: 6px; align-items: center; }
.pm-fortschritt { height: 6px; border-radius: 4px; background: var(--pm-flaeche); overflow: hidden; } .pm-fortschritt div { height: 100%; background: var(--hw-gruen); border-radius: 4px; }
.pm-prio { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #94a3b8; flex: 0 0 9px; }
.pm-prio.Kritisch { background: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,.18); } .pm-prio.Eilig { background: #f59e0b; } .pm-prio.Standard { background: #3b82f6; } .pm-prio.Niedrig { background: #94a3b8; }
.ta-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--pm-text); }
.ta-liste li { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.ta-liste li .l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-komp { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--pm-linie); }
.st-komp:last-child { border-bottom: 0; } .st-komp .n { flex: 1; } .st-komp .n b { display: block; font-size: 14px; color: var(--pm-text); } .st-komp .n small { color: var(--pm-text2); }
/* Klappmenue ohne Bootstrap */
.pm-dd { position: relative; display: inline-block; }
.pm-dd-menu { display: none; position: absolute; right: 0; top: calc(100% + 4px); min-width: 210px; background: var(--pm-karte); border: 1px solid var(--pm-rand); border-radius: 10px; box-shadow: var(--pm-schatten-g); list-style: none; margin: 0; padding: 5px; z-index: 950; }
.pm-dd.offen .pm-dd-menu { display: block; }
.pm-dd-menu li a { display: flex; gap: 9px; align-items: center; padding: 7px 10px; border-radius: 7px; color: var(--pm-text); font: 600 12.5px var(--hw-font); text-decoration: none; white-space: nowrap; }
.pm-dd-menu li a:hover { background: var(--pm-flaeche); text-decoration: none; }
.pm-dd-menu li a i.fa { width: 16px; text-align: center; color: var(--pm-text2); }

/* ---------- Planuebersicht ---------- */
/* FIX 2026-10-10 14:48 HanwareWebERP (Projekte & Aufgaben Stufe 1): Chips (Kategorie/Kunde/Budget), Kundensuche */
.pl-chips{display:flex;gap:5px;flex-wrap:wrap;margin:4px 0 6px}
.au-kunde{position:relative}.au-treffer{display:none;position:absolute;left:0;right:0;top:100%;z-index:30;background:var(--hw-karte,#fff);border:1px solid var(--hw-rahmen,#cbd5e1);border-radius:8px;box-shadow:0 8px 24px rgba(15,23,42,.14);max-height:240px;overflow:auto}
.au-treffer.offen{display:block}.au-treffer>div{padding:6px 10px;cursor:pointer}.au-treffer>div:hover{background:var(--hw-flaeche,#f1f5f9)}.au-treffer small{color:var(--hw-label,#64748b)}
.pl-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.pl-karte { background: var(--pm-karte); border: 1px solid var(--pm-rand); border-radius: 14px; padding: 14px; text-decoration: none; color: var(--pm-text); display: flex; flex-direction: column; gap: 9px; position: relative; overflow: hidden; }
.pl-karte::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--f, var(--hw-akzent)); }
.pl-karte:hover { text-decoration: none; box-shadow: 0 6px 18px rgba(15,23,42,.12); transform: translateY(-1px); color: var(--pm-text); }
.pl-karte .k { display: flex; gap: 10px; align-items: center; } .pl-karte .k i.fa { width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--f, var(--hw-akzent)); color: #fff; }
.pl-karte h3 { margin: 0; font-size: 15px; color: var(--pm-text); } .pl-karte .b { font-size: 12.5px; color: var(--pm-text2); min-height: 18px; }
.pl-karte .m { display: flex; justify-content: space-between; font-size: 12px; color: var(--pm-text2); align-items: center; gap: 8px; flex-wrap: wrap; }
.pl-karte .fav { position: absolute; right: 12px; top: 12px; color: #f59e0b; cursor: pointer; }

/* ---------- Plan: Kopf, Ansichten, Filter ---------- */
.pl-kopf { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.pl-kopf .sym { width: 40px; height: 40px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 17px; background: var(--f, var(--hw-akzent)); }
.pl-kopf h2 { margin: 0; font-size: 19px; } .pl-kopf .sub { font-size: 12.5px; color: var(--pm-text2); }
.pl-ansichten { display: flex; gap: 2px; border-bottom: 1px solid var(--pm-linie); margin-bottom: 12px; overflow-x: auto; scrollbar-width: thin; }
.pl-ansichten a { padding: 8px 13px; font: 700 12.5px var(--hw-font); color: var(--pm-text2); text-decoration: none; border-bottom: 3px solid transparent; white-space: nowrap; }
.pl-ansichten a.aktiv { color: var(--pm-navy); border-bottom-color: var(--hw-akzent); } .pl-ansichten a:hover { text-decoration: none; color: var(--pm-text); }
.pl-filter { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.pl-filter select, .pl-filter input { padding: 6px 9px; border: 1px solid var(--pm-rand); border-radius: 8px; font: 600 12.5px var(--hw-font); background: var(--pm-feld); color: var(--pm-text); }
.pl-filter .pm-suche input { padding-left: 30px; }

/* ---------- Board ---------- */
.ab { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(272px, 300px); gap: 12px; overflow-x: auto; padding-bottom: 12px; align-items: start; min-height: 60vh; }
.ab-spalte { background: var(--pm-flaeche); border: 1px solid var(--pm-rand); border-radius: 14px; display: flex; flex-direction: column; max-height: calc(100vh - 230px); }
.ab-spalte.ueber { outline: 2px dashed var(--hw-akzent); }
.ab-spalte .sk { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font: 800 12px var(--hw-font); text-transform: uppercase; letter-spacing: .4px; color: var(--pm-label); border-top: 4px solid var(--f, #94a3b8); border-radius: 14px 14px 0 0; }
.ab-spalte .sk .n { margin-left: auto; background: var(--pm-karte); border: 1px solid var(--pm-rand); border-radius: 999px; padding: 0 8px; font-size: 11px; }
.ab-spalte .sk .n.voll { background: #fee2e2; color: #991b1b; }
.ab-spalte .karten { padding: 4px 8px 8px; overflow-y: auto; flex: 1; min-height: 40px; display: flex; flex-direction: column; gap: 8px; }
.ab-karte { background: var(--pm-karte); border: 1px solid var(--pm-rand); border-radius: 11px; padding: 9px 11px; cursor: pointer; box-shadow: var(--hw-schatten); display: flex; flex-direction: column; gap: 6px; }
.ab-karte:hover { border-color: var(--hw-akzent); } .ab-karte.drag { opacity: .45; } .ab-karte.erledigt .t { text-decoration: line-through; color: var(--pm-text2); }
.ab-karte .et { display: flex; flex-wrap: wrap; gap: 4px; } .ab-karte .et span { height: 6px; width: 34px; border-radius: 3px; }
.ab-karte .t { font: 600 13px/1.35 var(--hw-font); color: var(--pm-text); word-break: break-word; }
.ab-karte .m { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; font-size: 11.5px; color: var(--pm-text2); }
.ab-karte .m .faellig.ueber { color: #dc2626; font-weight: 700; } .ab-karte .m .faellig.heute { color: #d97706; font-weight: 700; }
.ab-karte .m .raum { flex: 1; }
.ab-neu { margin: 0 8px 8px; } .ab-neu input { width: 100%; padding: 7px 10px; border: 1px dashed var(--pm-rand); border-radius: 9px; background: transparent; font: 600 12.5px var(--hw-font); color: var(--pm-text); box-sizing: border-box; }
.ab-neu input:focus { border-style: solid; background: var(--pm-karte); outline: 0; border-color: var(--hw-akzent); }

/* ---------- Detailfenster (Seitenpanel) ---------- */
.ad-huelle { position: fixed; inset: 0; z-index: 900; background: rgba(15,23,42,.35); display: none; }
.ad-huelle.offen { display: block; }
.ad { position: fixed; right: 0; top: 0; bottom: 0; width: 640px; max-width: 100vw; background: var(--pm-karte); color: var(--pm-text); z-index: 901; box-shadow: var(--pm-schatten-g); display: flex; flex-direction: column; transform: translateX(105%); transition: transform .22s ease-out; }
.ad.offen { transform: none; }
.ad-kopf { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--pm-linie); }
.ad-kopf .titel { flex: 1; font: 700 16px var(--hw-font); border: 1px solid transparent; border-radius: 8px; padding: 4px 6px; background: transparent; color: var(--pm-text); min-width: 0; }
.ad-kopf .titel:hover, .ad-kopf .titel:focus { border-color: var(--pm-rand); background: var(--pm-feld); outline: 0; }
.ad-inhalt { flex: 1; overflow-y: auto; padding: 14px 16px 30px; font-size: 13px; }
.ad-inhalt a { color: var(--hw-akzent); }
.ad-felder { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px 12px; align-items: center; font-size: 13px; margin-bottom: 14px; }
.ad-felder > label { color: var(--pm-text2); font-weight: 600; }
.ad-felder select, .ad-felder input { padding: 6px 9px; border: 1px solid var(--pm-rand); border-radius: 8px; font: 600 12.5px var(--hw-font); background: var(--pm-feld); color: var(--pm-text); max-width: 100%; box-sizing: border-box; }
.ad h4 { font: 800 11.5px var(--hw-font); text-transform: uppercase; letter-spacing: .4px; color: var(--pm-text2); margin: 18px 0 8px; display: flex; justify-content: space-between; align-items: center; }
.ad textarea { width: 100%; min-height: 90px; padding: 9px 11px; border: 1px solid var(--pm-rand); border-radius: 10px; font: 500 13px/1.5 var(--hw-font); background: var(--pm-feld); color: var(--pm-text); resize: vertical; box-sizing: border-box; }
.ad-check { list-style: none; margin: 0; padding: 0; } .ad-check li { display: flex; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--pm-linie); font-size: 13px; }
.ad-check li.ok span { text-decoration: line-through; color: var(--pm-text2); } .ad-check li span { flex: 1; } .ad-check li .w { opacity: 0; } .ad-check li:hover .w { opacity: 1; }
.ad-check input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--hw-gruen); }
.ad-zeile { display: flex; gap: 8px; align-items: center; } .ad-zeile input[type=text] { flex: 1; padding: 6px 9px; border: 1px solid var(--pm-rand); border-radius: 8px; font: 500 12.5px var(--hw-font); background: var(--pm-feld); color: var(--pm-text); }
.ad-zeile select, .ad-zeile input[type=number] { padding: 6px 9px; border: 1px solid var(--pm-rand); border-radius: 8px; font: 600 12.5px var(--hw-font); background: var(--pm-feld); color: var(--pm-text); }
.ad-kommentar { display: flex; gap: 9px; margin-bottom: 10px; } .ad-kommentar .b { flex: 1; background: var(--pm-karte2); border: 1px solid var(--pm-linie); border-radius: 11px; padding: 8px 11px; font-size: 13px; min-width: 0; }
.ad-kommentar .b .m { font-size: 11.5px; color: var(--pm-text2); margin-bottom: 3px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .ad-kommentar .b .x { white-space: pre-wrap; word-break: break-word; }
.ad-kommentar.angeheftet .b { border-color: #f59e0b; }
.ad-verlauf { font-size: 12px; color: var(--pm-text2); list-style: none; padding: 0; margin: 0; } .ad-verlauf li { padding: 3px 0; border-bottom: 1px dotted var(--pm-linie); }
.ad-tabs { display: flex; gap: 2px; margin: 16px 0 10px; border-bottom: 1px solid var(--pm-linie); overflow-x: auto; } .ad-tabs button { padding: 7px 12px; border: 0; background: none; font: 700 12.5px var(--hw-font); color: var(--pm-text2); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.ad-tabs button.aktiv { color: var(--pm-navy); border-bottom-color: var(--hw-akzent); }
@media (max-width: 700px) { .ad-felder { grid-template-columns: 1fr; } .ad-felder > label { margin-top: 6px; } }

/* ---------- Aufgabenliste (Mein Tag, Meine Aufgaben, Liste) ---------- */
.al { background: var(--pm-karte); border: 1px solid var(--pm-rand); border-radius: 14px; overflow: hidden; margin-bottom: 14px; }
.al-kopf { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; font: 800 12.5px var(--hw-font); color: var(--pm-label); text-transform: uppercase; letter-spacing: .4px; background: var(--pm-karte2); border-bottom: 1px solid var(--pm-linie); }
.al-kopf.rot { color: #b91c1c; } .al-kopf.amber { color: #b45309; }
.al-zeile { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--pm-linie); cursor: pointer; }
.al-zeile:last-child { border-bottom: 0; } .al-zeile:hover { background: var(--pm-karte2); }
.al-haken { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--pm-rand); display: inline-flex; align-items: center; justify-content: center; color: transparent; cursor: pointer; background: var(--pm-karte); flex: 0 0 20px; }
.al-haken:hover { border-color: var(--hw-gruen); color: var(--hw-gruen); } .al-zeile.erledigt .al-haken { background: var(--hw-gruen); border-color: var(--hw-gruen); color: #fff; }
.al-zeile.erledigt .t { text-decoration: line-through; color: var(--pm-text2); }
.al-zeile .t { font: 600 13.5px var(--hw-font); color: var(--pm-text); } .al-zeile .u { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 11.5px; color: var(--pm-text2); margin-top: 2px; }
.al-zeile .r { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--pm-text2); }
.al-zeile .r .ueber { color: #dc2626; font-weight: 700; } .al-zeile .r .heute { color: #d97706; font-weight: 700; }
.mt-gruss { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.mt-gruss h2 { margin: 0; font-size: 22px; } .mt-gruss .sub { color: var(--pm-text2); font-size: 13px; }
.mt-schnell { display: flex; gap: 8px; margin-bottom: 14px; } .mt-schnell input { flex: 1; padding: 10px 14px; border: 1px solid var(--pm-rand); border-radius: 12px; font: 600 14px var(--hw-font); background: var(--pm-feld); color: var(--pm-text); min-width: 0; }
@media (max-width: 640px) { .mt-schnell { flex-wrap: wrap; } .mt-schnell input { flex: 1 1 100%; } .mt-schnell select { flex: 1; max-width: none !important; } }
.mt-timer { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 12px; background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; margin-bottom: 14px; font-size: 13px; flex-wrap: wrap; }
html[data-farbschema="dunkel"] .mt-timer { background: #052e16; border-color: #14532d; color: #bbf7d0; }
.mt-timer .uhr { font: 800 18px Consolas, monospace; }

/* ---------- Kalender ---------- */
.kal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--pm-rand); border-radius: 14px; overflow: hidden; background: var(--pm-karte); }
.kal .wt { padding: 7px; text-align: center; font: 800 11px var(--hw-font); text-transform: uppercase; color: var(--pm-text2); background: var(--pm-karte2); border-bottom: 1px solid var(--pm-linie); }
.kal .tag { min-height: 110px; border-right: 1px solid var(--pm-linie); border-bottom: 1px solid var(--pm-linie); padding: 5px; display: flex; flex-direction: column; gap: 3px; }
.kal .tag:nth-child(7n) { border-right: 0; } .kal .tag.fremd { background: var(--pm-karte2); opacity: .65; } .kal .tag.heute { background: var(--pm-bubble-hw); }
.kal .tag.ueber { outline: 2px dashed var(--hw-akzent); outline-offset: -3px; }
.kal .tag .d { font: 700 12px var(--hw-font); color: var(--pm-text2); } .kal .tag.heute .d { color: var(--hw-akzent); }
.kal .ev { font-size: 11.5px; padding: 2px 6px; border-radius: 6px; background: var(--f, var(--hw-akzent)); color: #fff; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kal .ev.erledigt { opacity: .5; text-decoration: line-through; }
@media (max-width: 700px) { .kal .tag { min-height: 70px; } .kal .ev { font-size: 10px; } }

/* ---------- Zeitleiste / Gantt ---------- */
.gt { background: var(--pm-karte); border: 1px solid var(--pm-rand); border-radius: 14px; overflow: auto; position: relative; max-height: calc(100vh - 230px); }
.gt-raster { display: grid; position: relative; }
.gt-name { position: sticky; left: 0; z-index: 2; background: var(--pm-karte); color: var(--pm-text); border-right: 1px solid var(--pm-rand); padding: 6px 10px; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; border-bottom: 1px solid var(--pm-linie); height: 34px; box-sizing: border-box; }
.gt-kopf { position: sticky; top: 0; z-index: 3; background: var(--pm-karte2); border-bottom: 1px solid var(--pm-rand); font: 700 10.5px var(--hw-font); color: var(--pm-text2); text-align: center; padding: 5px 0; height: 40px; box-sizing: border-box; }
.gt-kopf.links { left: 0; z-index: 4; text-align: left; padding-left: 10px; }
.gt-zelle { border-bottom: 1px solid var(--pm-linie); border-right: 1px solid var(--pm-linie); height: 34px; box-sizing: border-box; }
.gt-zelle.we { background: var(--pm-karte2); } .gt-zelle.heute { background: var(--pm-bubble-hw); }
.gt-balken { position: absolute; height: 20px; border-radius: 6px; background: var(--f, var(--hw-akzent)); color: #fff; font: 700 10.5px var(--hw-font); padding: 0 6px; display: flex; align-items: center; white-space: nowrap; overflow: hidden; cursor: pointer; box-shadow: var(--hw-schatten); z-index: 1; }
.gt-balken.kritisch { box-shadow: 0 0 0 2px #dc2626; } .gt-balken.erledigt { opacity: .5; }
.gt-balken .fp { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(255,255,255,.28); }
.gt svg { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 1; }

/* ---------- Zeiterfassung ---------- */
.zt-woche { display: grid; grid-template-columns: 200px repeat(7, minmax(60px, 1fr)) 80px; font-size: 12.5px; min-width: 760px; color: var(--pm-text); }
.zt-woche > div { padding: 7px 8px; border-bottom: 1px solid var(--pm-linie); text-align: right; } .zt-woche > div.n { text-align: left; font-weight: 700; } .zt-woche > div.k { background: var(--pm-karte2); font-weight: 800; color: var(--pm-text2); font-size: 11px; text-transform: uppercase; }

.hw-form .hw-feld.s3 { grid-column: span 3; } .hw-form .hw-feld.s8 { grid-column: span 8; } .hw-form .hw-feld.s9 { grid-column: span 9; }
@media (max-width: 760px) { .hw-form .hw-feld.s3, .hw-form .hw-feld.s8, .hw-form .hw-feld.s9 { grid-column: span 12; } }
.hw-form .hw-feld > input:not([type=checkbox]):not([type=radio]), .hw-form .hw-feld > select, .hw-form .hw-feld > textarea { width: 100%; box-sizing: border-box; }
/* FIX 2026-10-05 12:05 HanwareWebERP (Aufgaben, Edge-Test): Farbfelder (input type=color) in Plan-Einstellungen/Neuer Plan waren nur ein Strich */
.hw-form input[type=color], .pm-leiste input[type=color] { height: 38px; width: 100%; min-width: 48px; padding: 2px 4px; border: 1px solid var(--pm-rand); border-radius: 8px; background: var(--pm-feld); cursor: pointer; box-sizing: border-box; }
.pm-leiste input[type=color] { width: 48px; height: 34px; }
/* ---------- Dunkelmodus: Karten/Dialoge des Moduls ---------- */
html[data-farbschema="dunkel"] .pl-kopf h2, html[data-farbschema="dunkel"] .mt-gruss h2 { color: var(--pm-text); }
html[data-farbschema="dunkel"] .hw-raster-2 .hw-card, html[data-farbschema="dunkel"] .hw-raster-31 .hw-card { background: var(--pm-karte); border-color: var(--pm-rand); }
@media print { .au-nav, .pl-filter, .ad-huelle, .ad, .ab-neu, .mt-schnell { display: none !important; } .ab { overflow: visible; } }