/* GREENWORKS - Oberflaeche.
   Farben aus dem Logo: Blattgruen, Gold, fast-Schwarz.
   Drei Zustaende: hell, dunkel per Systemwahl, dunkel per Schalter. */

:root{
  --blatt:#1D4733; --blatt-hell:#2C6B4C; --gold:#BD9E2E; --gold-hell:#D9BE55;
  --grund:#F7F8F5; --flaeche:#FFFFFF; --flaeche-2:#EFF2EC;
  --tinte:#171C19; --tinte-leise:#5A6560; --linie:#D8DED6;
  --gut:#2C6B4C; --warnung:#A8761A; --kritisch:#9C3024;
  --schrift:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;
  --daten:ui-monospace,"Cascadia Mono","SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --knopf-ink:#FFFFFF;
  --rand:10px; --luft:16px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --grund:#101512; --flaeche:#171D19; --flaeche-2:#1E251F;
    --tinte:#E7EDE6; --tinte-leise:#98A49C; --linie:#2C3630;
    --blatt:#8FC6A6; --blatt-hell:#B2DCC2; --gold:#D9BE55; --gold-hell:#E8D488;
    --gut:#7EC79C; --warnung:#DDAE4E; --kritisch:#E08476;
    --knopf-ink:#0F1411;
  }
}
:root[data-theme="dark"]{
  --grund:#101512; --flaeche:#171D19; --flaeche-2:#1E251F;
  --tinte:#E7EDE6; --tinte-leise:#98A49C; --linie:#2C3630;
  --blatt:#8FC6A6; --blatt-hell:#B2DCC2; --gold:#D9BE55; --gold-hell:#E8D488;
  --gut:#7EC79C; --warnung:#DDAE4E; --kritisch:#E08476;
  --knopf-ink:#0F1411;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--grund); color:var(--tinte);
  font:15px/1.5 var(--schrift);
}
a{color:var(--blatt); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--gold); outline-offset:2px}

/* Kopf */
.kopf{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:12px 20px; background:var(--flaeche);
  border-bottom:1px solid var(--linie); position:sticky; top:0; z-index:20;
}
.kopf img{height:34px; width:auto; display:block}
.marke{font-weight:700; letter-spacing:.12em; font-size:13px; text-transform:uppercase}
.marke span{color:var(--gold); display:block; font-size:10px; letter-spacing:.18em;
  font-weight:600; color:var(--tinte-leise)}
.kopf .rest{margin-left:auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.wer{font-size:12.5px; color:var(--tinte-leise); text-align:right; line-height:1.35}
.wer b{display:block; color:var(--tinte); font-size:13.5px}

.marke-chip{
  font:600 11px/1 var(--daten); letter-spacing:.06em; text-transform:uppercase;
  padding:5px 9px; border-radius:99px; border:1px solid var(--linie);
  background:var(--flaeche-2); color:var(--tinte-leise); white-space:nowrap;
}
.marke-chip.tuer-buero{border-color:color-mix(in srgb,var(--blatt) 45%,transparent); color:var(--blatt)}
.marke-chip.tuer-feld{border-color:color-mix(in srgb,var(--gold) 55%,transparent); color:var(--gold)}
.marke-chip.tuer-link{border-color:var(--linie)}

/* Navigation */
.nav{display:flex; gap:4px; flex-wrap:wrap; padding:10px 20px 0}
.nav a{
  padding:7px 13px; border-radius:var(--rand) var(--rand) 0 0;
  font-size:13.5px; color:var(--tinte-leise);
  border:1px solid transparent; border-bottom:none;
}
.nav a.hier{background:var(--flaeche); border-color:var(--linie); color:var(--tinte); font-weight:600}
.nav a .phase{font:600 9.5px/1 var(--daten); color:var(--gold); margin-left:5px; vertical-align:super}

main{padding:var(--luft) 20px 56px; max-width:1240px; margin:0 auto}
h1{font-size:22px; margin:6px 0 2px; text-wrap:balance}
h2{font-size:16px; margin:26px 0 8px; text-wrap:balance}
.unter{color:var(--tinte-leise); font-size:13.5px; margin:0 0 18px; max-width:68ch}

/* Karten */
.gitter{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.karte{
  background:var(--flaeche); border:1px solid var(--linie);
  border-radius:var(--rand); padding:14px 16px;
}
.karte h3{margin:0 0 6px; font-size:13px; text-transform:uppercase;
  letter-spacing:.07em; color:var(--tinte-leise); font-weight:700}
.zahl{font:700 27px/1.1 var(--schrift); font-variant-numeric:tabular-nums}
.zahl .einheit{font-size:13px; font-weight:600; color:var(--tinte-leise); margin-left:4px}
.karte p{margin:6px 0 0; font-size:12.5px; color:var(--tinte-leise)}

/* Tabellen */
.rahmen{overflow-x:auto; border:1px solid var(--linie); border-radius:var(--rand);
  background:var(--flaeche)}
table{border-collapse:collapse; width:100%; font-size:13.5px}
th,td{padding:9px 12px; text-align:left; border-bottom:1px solid var(--linie);
  white-space:nowrap}
th{background:var(--flaeche-2); font-size:11.5px; text-transform:uppercase;
  letter-spacing:.06em; color:var(--tinte-leise); font-weight:700; position:sticky; top:0}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--flaeche-2)}
td.zahl-sp{text-align:right; font-variant-numeric:tabular-nums; font-family:var(--daten)}
td.weit{white-space:normal; min-width:16rem; max-width:36rem}

/* Marken */
.st{display:inline-block; padding:2.5px 8px; border-radius:99px; font-size:11.5px;
  font-weight:600; border:1px solid var(--linie); background:var(--flaeche-2)}
.st.lauf{color:var(--gut); border-color:color-mix(in srgb,var(--gut) 45%,transparent)}
.st.warn{color:var(--warnung); border-color:color-mix(in srgb,var(--warnung) 45%,transparent)}
.st.krit{color:var(--kritisch); border-color:color-mix(in srgb,var(--kritisch) 45%,transparent)}

/* Anmeldung */
.tuerwahl{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  margin:22px 0}
.tuer{background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--rand);
  padding:18px; display:flex; flex-direction:column; gap:10px}
.tuer h3{margin:0; font-size:16px}
.tuer p{margin:0; font-size:13px; color:var(--tinte-leise); flex:1}
.knopf{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:9px 16px; border-radius:8px; border:1px solid var(--blatt);
  background:var(--blatt); color:var(--knopf-ink); font:600 14px var(--schrift);
  cursor:pointer; text-decoration:none;
}
.knopf:hover{text-decoration:none; background:var(--blatt-hell); border-color:var(--blatt-hell)}
.knopf.leise{background:transparent; color:var(--blatt); border-color:var(--linie)}
.knopf.leise:hover{background:var(--flaeche-2); border-color:var(--blatt)}
.knopf:disabled{opacity:.5; cursor:default}
.probe{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px}
.probe a{font:600 12px var(--daten); padding:5px 9px; border:1px dashed var(--linie);
  border-radius:7px; color:var(--tinte-leise)}

/* Hinweisblock */
.merk{border-left:3px solid var(--gold); background:var(--flaeche);
  border-radius:0 var(--rand) var(--rand) 0; padding:12px 16px; margin:16px 0;
  border-top:1px solid var(--linie); border-right:1px solid var(--linie);
  border-bottom:1px solid var(--linie)}
.merk h3{margin:0 0 6px; font-size:13px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--gold)}
.merk p{margin:0 0 6px; font-size:13px; color:var(--tinte-leise)}
.merk p:last-child{margin-bottom:0}
.merk.streng{border-left-color:var(--kritisch)}
.merk.streng h3{color:var(--kritisch)}

/* Liste nicht gebauter Pruefungen */
.nichtliste{list-style:none; padding:0; margin:10px 0 0; display:grid; gap:8px}
.nichtliste li{display:grid; grid-template-columns:1.1rem 1fr; gap:8px; align-items:baseline;
  font-size:13px; color:var(--tinte-leise)}
.nichtliste li::before{content:"\2715"; color:var(--kritisch); font-weight:700}
.nichtliste b{color:var(--tinte); font-weight:600}

/* Ablauf */
.schritte{display:grid; gap:0; margin:10px 0 0}
.schritt{display:grid; grid-template-columns:3.2rem 8.5rem 1fr; gap:12px;
  padding:9px 12px; border-bottom:1px solid var(--linie); align-items:baseline}
.schritt:last-child{border-bottom:none}
.schritt .nr{font:700 12px var(--daten); color:var(--tinte-leise)}
.schritt .stat{font-size:11.5px; color:var(--gold); font-weight:600}
.schritt .was b{font-weight:600}
.schritt .was em{font-style:normal; color:var(--tinte-leise); font-size:12.5px; display:block}
.schritt.selbst{background:color-mix(in srgb,var(--gold) 8%,transparent)}

.fuss{margin-top:34px; padding-top:14px; border-top:1px solid var(--linie);
  font-size:12px; color:var(--tinte-leise); display:flex; gap:14px; flex-wrap:wrap}
.leer{padding:26px 16px; text-align:center; color:var(--tinte-leise); font-size:13.5px}

@media (max-width:520px){
  main{padding:12px 16px 48px}
  .kopf{padding:10px 16px}
  .nav{padding:8px 16px 0}
  .schritt{grid-template-columns:2.6rem 1fr; }
  .schritt .stat{grid-column:2}
  .schritt .was{grid-column:2}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}

/* ===================================================================
   Feldbildschirme - geteiltes Fahrzeuggerät.
   Andere Regeln als im Büro: Handschuhe, Sonne, Dreck auf dem Glas.
   Alle Ziele mindestens 56 px hoch, Text nicht unter 15 px, viel Abstand.
   =================================================================== */
.feld{max-width:640px; margin:0 auto}
.feld h1{font-size:26px; margin:10px 0 4px}
.feld h2{font-size:15px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--tinte-leise); margin:26px 0 10px}
.feld .unter{font-size:15px}

.geraetezeile{font:500 12.5px/1.5 var(--daten); color:var(--tinte-leise);
  background:var(--flaeche-2); border:1px solid var(--linie);
  border-radius:99px; padding:7px 14px; margin:0 0 14px; display:inline-block}
.geraetezeile b{color:var(--tinte)}

.knopf.gross{min-height:60px; font-size:18px; padding:0 24px; width:100%;
  justify-content:center; border-radius:12px}
.knopf.klein{min-height:44px; font-size:14px}

.stempel{background:var(--flaeche); border:1px solid var(--linie);
  border-radius:14px; padding:22px 20px; text-align:center; margin:16px 0}
.stempel.laeuft{border-color:var(--gut); border-width:2px}
.stempel .gross-zahl{font:700 54px/1 var(--daten); font-variant-numeric:tabular-nums;
  letter-spacing:-.02em}
.stempel.laeuft .gross-zahl{color:var(--gut)}
.stempel p{margin:8px 0 18px; font-size:14px; color:var(--tinte-leise)}
.stempel form{display:grid; gap:10px}

.namen{display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.namen.klein{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.name{min-height:64px; text-align:left; padding:12px 16px; cursor:pointer;
  background:var(--flaeche); border:1px solid var(--linie); border-radius:12px;
  color:var(--tinte); font:inherit; display:grid; gap:2px}
.name b{font-size:16.5px}
.name span{font-size:12.5px; color:var(--tinte-leise)}
.name.gewaehlt{border-color:var(--blatt); border-width:2px;
  background:color-mix(in srgb,var(--blatt) 10%,var(--flaeche))}
.namen.klein .name{min-height:56px}

.pinfeld{margin:22px 0 0; display:grid; gap:10px; background:var(--flaeche);
  border:1px solid var(--linie); border-radius:14px; padding:18px}
.pinfeld label{font-size:14px; color:var(--tinte-leise)}
.pinfeld input, .pinform input{min-height:58px; font:700 26px/1 var(--daten);
  letter-spacing:.4em; text-align:center; border:1px solid var(--linie);
  border-radius:12px; background:var(--flaeche-2); color:var(--tinte); padding:0 12px}
.pinform{display:grid; gap:8px; background:var(--flaeche); border:1px solid var(--linie);
  border-radius:14px; padding:18px; max-width:420px}
.pinform label{font-size:14px; color:var(--tinte-leise); margin-top:8px}

.einsatzkarte{background:var(--flaeche); border:1px solid var(--linie);
  border-radius:12px; padding:14px 16px; margin-bottom:10px; display:grid; gap:10px}
.einsatzkarte.heute{border-left:4px solid var(--gold)}
.einsatzkarte .wann{display:flex; gap:10px; align-items:baseline;
  font-size:13.5px; color:var(--tinte-leise)}
.einsatzkarte .wann b{font-size:15px; color:var(--tinte)}
.einsatzkarte .wo{display:grid; gap:2px}
.einsatzkarte .wo b{font-size:16px}
.einsatzkarte .wo span{font-size:13.5px; color:var(--tinte-leise)}
.einsatzkarte .wo .mono{font-family:var(--daten); font-size:11.5px}
.berichtform{display:grid; gap:8px}
.berichtform textarea{font:inherit; font-size:15px; padding:10px 12px;
  border:1px solid var(--linie); border-radius:10px; background:var(--flaeche-2);
  color:var(--tinte); resize:vertical; min-height:60px}
.berichtform .knopf{justify-self:start}

@media (max-width:520px){
  .feld h1{font-size:22px}
  .stempel .gross-zahl{font-size:44px}
  .namen, .namen.klein{grid-template-columns:1fr}
}

/* Anmeldung und Passwort - eine schmale Spalte, nichts daneben. */
.anmeldespalte{max-width:520px; margin:0 auto}
.anmeldeform{display:grid; gap:8px; background:var(--flaeche);
  border:1px solid var(--linie); border-radius:var(--rand); padding:20px;
  margin:16px 0}
.anmeldeform label{font-size:13.5px; color:var(--tinte-leise); margin-top:6px}
.anmeldeform label:first-of-type{margin-top:0}
.anmeldeform input{min-height:48px; font:inherit; font-size:16px; padding:0 13px;
  border:1px solid var(--linie); border-radius:9px; background:var(--flaeche-2);
  color:var(--tinte)}
.anmeldeform .knopf{margin-top:14px}
.klein{font-size:13px; color:var(--tinte-leise); margin:10px 0 0}
.klein a{color:var(--blatt)}

/* Mitarbeiter anlegen */
.anlegeform{display:grid; gap:8px; background:var(--flaeche);
  border:1px solid var(--linie); border-radius:var(--rand); padding:20px;
  margin:14px 0; max-width:760px}
.anlegeform label{font-size:13.5px; color:var(--tinte-leise)}
.anlegeform input[type=text], .anlegeform input[type=email],
.anlegeform input:not([type]), .anlegeform select{
  min-height:46px; width:100%; font:inherit; font-size:15.5px; padding:0 12px;
  border:1px solid var(--linie); border-radius:9px; background:var(--flaeche-2);
  color:var(--tinte)}
.anlegeform .zeile{display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.anlegeform .zeile span{display:grid; gap:4px}
.anlegeform fieldset{border:1px solid var(--linie); border-radius:9px;
  padding:12px 14px; margin:8px 0}
.anlegeform legend{font-size:12.5px; color:var(--tinte-leise); padding:0 6px}
.rollenwahl{display:grid; gap:8px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.kaestchen{display:grid; grid-template-columns:auto 1fr; gap:9px;
  align-items:start; font-size:14px; cursor:pointer}
.kaestchen input{margin-top:3px; width:18px; height:18px; min-height:0}
.kaestchen span{display:grid; gap:1px}
.kaestchen em{font-style:normal; font-size:12px; color:var(--tinte-leise)}
.kaestchen.breit{background:var(--flaeche-2); border:1px solid var(--linie);
  border-radius:9px; padding:12px 14px; margin:8px 0}
code.einmal{font-family:var(--daten); font-size:14px; background:var(--flaeche-2);
  border:1px solid var(--linie); border-radius:6px; padding:3px 8px;
  word-break:break-all}
td.mono{font-family:var(--daten); font-size:12.5px}

/* Gewerke als kleine Kästchen in der Personaltabelle */
.gewerkform{display:flex; gap:6px; align-items:center; margin:0; flex-wrap:wrap}
.gewerkform .marke{display:inline-flex; align-items:center; gap:4px; cursor:pointer;
  border:1px solid var(--linie); border-radius:99px; padding:3px 8px 3px 6px;
  background:var(--flaeche-2); font:600 11.5px/1 var(--daten)}
.gewerkform .marke input{width:14px; height:14px; min-height:0; margin:0}
.gewerkform .marke:has(input:checked){border-color:var(--blatt);
  background:color-mix(in srgb,var(--blatt) 14%,var(--flaeche-2)); color:var(--blatt)}
.knopf.winzig{min-height:30px; font-size:12px; padding:0 10px; border-radius:7px}

/* ==== 0.4.0: Mitarbeiter und Verkauf (nur Geschäftsleitung bzw. Vertriebsleitung) ==== */
.ma-reiter{display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 16px}
.ma-reiter a{display:inline-block; padding:7px 14px; border:1px solid var(--linie); border-radius:999px;
  color:var(--tinte); font-weight:600; font-size:14px; background:var(--flaeche)}
.ma-reiter a:hover{text-decoration:none; border-color:var(--blatt)}
.ma-reiter a.hier{background:var(--blatt); border-color:var(--blatt); color:var(--knopf-ink)}
.klein-reiter{margin:0}
.klein-reiter a{padding:5px 11px; font-size:13px}
.ma-leiste{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 12px}
.ma-titel{font-size:16px; min-width:10ch; text-align:center}
.ma-filter{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px}
.ma-filter input,.ma-filter select{font:inherit; padding:7px 10px; border:1px solid var(--linie); border-radius:8px;
  background:var(--flaeche); color:var(--tinte); min-width:0}
.ma-filter input{flex:1 1 220px}
.klein{display:block; font-size:11.5px; color:var(--tinte-leise); font-weight:400; margin-top:2px}
.rechts{text-align:right}
td.weit{min-width:280px}
tr.summe td{font-weight:700; background:var(--flaeche-2)}
tr.gruppe td{background:var(--flaeche-2); font-size:11.5px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--tinte-leise); font-weight:700}
.legende{display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; font-size:12.5px; color:var(--tinte-leise); margin:8px 0 18px}
.legende i{display:inline-block; width:14px; height:14px; border-radius:3px; vertical-align:-2px; margin-right:5px;
  border:1px solid var(--linie)}
/* Kalenderzellen: U Urlaub, F Freizeitausgleich, K krank, b beantragt */
.ma-kal table.kal{width:auto; min-width:100%; border-collapse:separate; border-spacing:0}
table.kal th,table.kal td{padding:0; height:24px; min-width:22px; text-align:center; font-size:11px;
  border-right:1px solid var(--linie); border-bottom:1px solid var(--linie)}
table.kal th span{display:block; font-size:9.5px; color:var(--tinte-leise); font-weight:400}
table.kal th.mo{font-size:11px; text-transform:none; letter-spacing:0}
table.kal td.nm,table.kal th.nm{position:sticky; left:0; z-index:1; background:var(--flaeche); text-align:left;
  padding:0 10px; min-width:170px; white-space:nowrap; font-size:13px}
table.kal th.nm{background:var(--flaeche-2)}
table.kal .frei{background:color-mix(in srgb,var(--tinte-leise) 12%,transparent)}
table.kal .ft{background:color-mix(in srgb,var(--gold) 22%,transparent)}
table.kal .heute{outline:2px solid var(--gold); outline-offset:-2px}
table.kal td.u,.legende i.u,table.kal .mz .u{background:#3E8E63}
table.kal td.f,.legende i.f,table.kal .mz .f{background:#5B8FD0}
table.kal td.k,.legende i.k,table.kal .mz .k{background:#C8553D}
table.kal td.b,.legende i.b{background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.55) 0 3px,transparent 3px 6px)}
table.kal td.leer{background:transparent; border-color:transparent}
table.kal .mz{min-width:58px; padding:2px 4px}
table.kal .mz span{display:inline-block; min-width:18px; margin:1px; padding:0 3px; border-radius:3px; color:#FFFFFF;
  font-family:var(--daten); font-size:11px}
table.kal .mz .b{background:var(--warnung)}
table.kal.monat td{min-width:24px}
/* Verkauf: Säulen je Monat */
.vk-diag{padding:12px 14px}
.vk-diag svg{display:block; width:100%; max-width:100%; height:auto; color:var(--tinte)}

/* ==== CEO-Ansicht (0.5.0): Reiter, Kalender, Website ==== */
.ceo-reiter{display:flex; flex-wrap:wrap; align-items:flex-end; gap:2px 4px; margin:0 0 18px;
  border-bottom:1px solid var(--linie)}
.ceo-marke{font:600 10.5px/1 var(--daten); letter-spacing:.12em; text-transform:uppercase; color:var(--gold);
  padding:0 12px 11px 0}
.ceo-reiter a{padding:9px 14px 10px; font-weight:600; font-size:14px; color:var(--tinte-leise);
  border-bottom:3px solid transparent; margin-bottom:-1px}
.ceo-reiter a:hover{color:var(--tinte); text-decoration:none; border-bottom-color:var(--linie)}
.ceo-reiter a.hier{color:var(--tinte); border-bottom-color:var(--blatt)}
.hinweis-zeile{font-size:13px; color:var(--tinte-leise); background:var(--flaeche-2); border:1px solid var(--linie);
  border-radius:8px; padding:9px 12px; margin:0 0 14px; max-width:80ch}
.hinweis-zeile code,.unter code{font:12px var(--daten)}

/* Kalender: eine Woche */
.kal-quellen{display:flex; flex-wrap:wrap; gap:6px; margin-left:auto}
.kq{font:600 11px/1 var(--daten); padding:5px 8px; border-radius:99px; border:1px solid var(--linie);
  background:var(--flaeche); color:var(--tinte-leise)}
.kq.aus{border-style:dashed; opacity:.8}
.kw-gitter{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px}
.kw-tag{background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--rand); min-height:150px;
  display:flex; flex-direction:column; min-width:0}
.kw-tag.frei{background:var(--flaeche-2)}
.kw-tag.heute{border-color:var(--blatt); box-shadow:inset 0 3px 0 var(--blatt)}
.kw-tag header{display:flex; justify-content:space-between; align-items:baseline; gap:6px; padding:9px 10px 7px;
  border-bottom:1px solid var(--linie)}
.kw-tag header b{font-size:13.5px; font-variant-numeric:tabular-nums}
.kw-feiertag{font-size:11px; color:var(--gold); font-weight:600; text-align:right}
.kw-fehlen{display:block; font-size:11.5px; color:var(--tinte-leise); padding:6px 10px; border-bottom:1px dashed var(--linie)}
.kw-tag ul{list-style:none; margin:0; padding:7px; display:flex; flex-direction:column; gap:6px}
.kw-t{border-left:4px solid var(--linie); background:var(--flaeche-2); border-radius:0 6px 6px 0; padding:5px 7px;
  font-size:12.5px; line-height:1.35; overflow-wrap:anywhere}
.kw-t time{display:block; font:600 11px/1.3 var(--daten); color:var(--tinte-leise)}
.kw-titel{display:block; font-weight:600}
.kw-ort,.kw-quelle{display:block; font-size:11px; color:var(--tinte-leise)}
.kw-quelle{font-family:var(--daten); font-size:10px; letter-spacing:.04em; text-transform:uppercase}
.kw-t.vorl{border-left-style:dashed}
.kw-leer{color:var(--tinte-leise); font-size:12px; padding:2px 4px}
.art-kalender{border-left-color:#5B8FD0 !important}
.art-vorstellung,.art-probearbeit{border-left-color:var(--gold) !important}
.art-montage{border-left-color:var(--blatt) !important}
.art-fundament{border-left-color:#8A6E45 !important}
.art-vor_ort{border-left-color:#C8553D !important}
.kw-legende i{border-radius:2px}
.kw-legende i.art-kalender{background:#5B8FD0}
.kw-legende i.art-vorstellung{background:var(--gold)}
.kw-legende i.art-montage{background:var(--blatt)}
.kw-legende i.art-fundament{background:#8A6E45}
.kw-legende i.art-vor_ort{background:#C8553D}
@media (max-width:980px){ .kw-gitter{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .kw-gitter{grid-template-columns:1fr} .kw-tag{min-height:0} .kal-quellen{margin-left:0} }

/* Website: Ampeln, Befunde, Flows */
.amp,.note{display:inline-block; min-width:2.2em; text-align:center; padding:1px 6px; border-radius:6px;
  font:600 12px/1.5 var(--daten); background:var(--flaeche-2); color:var(--tinte)}
.amp.gut,.note.gut{background:color-mix(in srgb,var(--gut) 18%,transparent); color:var(--gut)}
.amp.mittel,.note.mittel{background:color-mix(in srgb,var(--warnung) 18%,transparent); color:var(--warnung)}
.amp.schlecht,.note.schlecht{background:color-mix(in srgb,var(--kritisch) 18%,transparent); color:var(--kritisch)}
.befund{border:1px solid var(--linie); border-left:4px solid var(--warnung); background:var(--flaeche);
  border-radius:0 8px 8px 0; padding:9px 12px; margin:8px 0; font-size:13.5px; max-width:110ch}
.befund.hoch{border-left-color:var(--kritisch)}
.befund.gut{border-left-color:var(--gut)}
.befund .stufe{font:600 10.5px/1 var(--daten); text-transform:uppercase; letter-spacing:.08em;
  color:var(--tinte-leise); margin-right:8px}
.fa-wrap{display:grid; grid-template-columns:minmax(200px,260px) minmax(0,1fr); gap:14px; align-items:start}
.fa-liste{display:flex; flex-direction:column; gap:4px; background:var(--flaeche); border:1px solid var(--linie);
  border-radius:var(--rand); padding:8px}
.fa-gruppe{font:600 10.5px/1 var(--daten); text-transform:uppercase; letter-spacing:.1em; color:var(--tinte-leise);
  padding:8px 8px 4px}
.fa-liste a{display:block; padding:8px 10px; border-radius:8px; color:var(--tinte); font-weight:600; font-size:13.5px}
.fa-liste a:hover{background:var(--flaeche-2); text-decoration:none}
.fa-liste a.hier{background:var(--flaeche-2); box-shadow:inset 3px 0 0 var(--blatt)}
.fa-liste i,.fa-st i{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:7px; background:var(--tinte-leise)}
.fa-liste i.live,.fa-st i.live{background:var(--gut)}
.fa-detail{background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--rand); padding:14px 16px; min-width:0}
.fa-kopf{display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px}
.fa-kopf h3{margin:4px 0 2px; font-size:18px}
.fa-marke{font:600 10.5px/1 var(--daten); text-transform:uppercase; letter-spacing:.1em; color:var(--gold)}
.fa-marke.eigen{color:var(--blatt)}
.fa-st{font-size:12.5px; color:var(--tinte-leise)}
.fa-zr{text-align:right; font-size:13px}
.fa-zr small{display:block; color:var(--tinte-leise); font-size:11.5px}
.fa-kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:8px; margin:12px 0}
.fa-kpi{background:var(--flaeche-2); border-radius:8px; padding:9px 11px}
.fa-kpi span{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--tinte-leise)}
.fa-kpi b{font-size:21px; font-variant-numeric:tabular-nums}
.fa-d{display:block; font:600 11.5px var(--daten)}
.fa-d.auf{color:var(--gut)} .fa-d.ab{color:var(--kritisch)}
.fa-h{margin:16px 0 6px; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--tinte-leise)}
.fa-bar{display:inline-block; width:70px; height:7px; background:var(--flaeche-2); border-radius:4px; margin-right:8px;
  vertical-align:middle; overflow:hidden}
.fa-bar i{display:block; height:100%; background:var(--blatt)}
.fa-rate{font:600 12px var(--daten)}
.fa-rate.hoch{color:var(--kritisch)} .fa-rate.mittel{color:var(--warnung)}
.fa-tab tr.heiss td{background:color-mix(in srgb,var(--kritisch) 7%,transparent)}
.fa-plan{margin:0; padding-left:22px; font-size:13.5px}
.fa-plan li{padding:3px 0}
.fa-plan li b{color:var(--tinte-leise); font-weight:400; margin-left:8px}
.fa-ger{display:flex; flex-direction:column; gap:6px; font-size:13px}
.fa-ger div{display:grid; grid-template-columns:80px minmax(60px,1fr) 52px 60px; gap:8px; align-items:center}
.fa-ger .fa-bar{width:100%; margin:0}
.fa-ger small{color:var(--tinte-leise); text-align:right}
.fa-dl{display:grid; grid-template-columns:max-content minmax(0,1fr); gap:4px 12px; font-size:13.5px; margin:0}
.fa-dl dt{color:var(--tinte-leise)} .fa-dl dd{margin:0}
.fa-pkt{margin:12px 0 0; padding-left:20px; font-size:13.5px}
.fa-pkt li{margin:3px 0}
@media (max-width:760px){ .fa-wrap{grid-template-columns:1fr} }

/* ==== Website (0.6.0): Zahlen der Ratgeber-Websites ==== */
.web-unter{margin:2px 0 12px}
.web-stand{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px}
a.kq:hover{text-decoration:none; border-style:solid}
.kq.ok{border-color:color-mix(in srgb,var(--gut) 45%,transparent); color:var(--gut)}
.kq.fehler{border-color:color-mix(in srgb,var(--kritisch) 55%,transparent); color:var(--kritisch)}
.web-filter{gap:10px 14px}
.web-filter .ma-filter{margin:0; flex:1 1 420px}
.web-kpi{grid-template-columns:repeat(auto-fit,minmax(165px,1fr))}
.web-kpi .zahl{font-variant-numeric:normal}
th a.sortier{color:inherit; text-decoration:none; display:inline-block}
th a.sortier:hover,th a.sortier.hier{color:var(--tinte)}
tr.aus td{color:var(--tinte-leise)}
.web-fehler{color:var(--kritisch); white-space:normal}
.web-verlauf{padding:14px 16px}
/* Tagesverlauf: kleine Vielfache, je Reihe eigene Skala, eine Farbe. Säulen
   höchstens 22 px breit mit 4 px runder Oberkante; die Lücke bleibt Fläche. */
.wv{display:flex; flex-direction:column; gap:14px}
.wv-kopf{display:flex; justify-content:space-between; align-items:baseline; gap:4px 12px; flex-wrap:wrap;
  font-size:12.5px; font-weight:600; color:var(--tinte-leise); margin:0 0 5px}
.wv-kopf b{color:var(--tinte); margin-left:4px}
.wv-spitze{font:400 11.5px var(--daten)}
.wv-feld,.wv-achse{display:grid; grid-template-columns:repeat(var(--tage,30),minmax(0,1fr))}
.wv-feld{height:46px; border-bottom:1px solid var(--linie)}
.wv-tag{display:flex; align-items:flex-end; justify-content:center; padding:0 2px}
.wv-tag:hover{background:color-mix(in srgb,var(--tinte) 8%,transparent)}
.wv-tag i{display:block; width:100%; max-width:22px; min-height:2px; background:var(--blatt);
  border-radius:4px 4px 0 0}
.wv-achse{margin-top:-8px}
.wv-achse span{position:relative; height:16px}
.wv-achse em{position:absolute; left:50%; transform:translateX(-50%); white-space:nowrap;
  font:normal 11px/16px var(--daten); color:var(--tinte-leise)}
.wv-achse em.anfang{left:0; transform:none}
.wv-achse em.ende{left:auto; right:0; transform:none}
.web-tabelle{margin-top:10px}
.web-tabelle summary{cursor:pointer; font-size:13px; color:var(--tinte-leise); padding:4px 0}
.web-tabelle table{margin-top:6px}
.web-schalter{margin:0}
.web-eintragen{max-width:none}
.web-eintragen textarea{font:13.5px/1.5 var(--daten); padding:10px 12px; border:1px solid var(--linie);
  border-radius:9px; background:var(--flaeche-2); color:var(--tinte); resize:vertical; min-height:96px; width:100%}
.web-eintragen code{font:12px var(--daten)}

/* Dashboard (0.7.0): der Schieber je Projekt */
.zst-liste{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:12px}
.zst{background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--rand); padding:14px 16px 10px; min-width:0}
.zst-kopf{display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; align-items:baseline}
.zst-kopf b{font-size:15.5px}
.zst-stand{font-size:12.5px; color:var(--tinte-leise)}
.zst-schieber{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; margin:12px 0 8px;
  background:var(--flaeche-2); border:1px solid var(--linie); border-radius:999px; padding:3px; gap:3px}
.zst-pos{appearance:none; border:0; background:transparent; color:var(--tinte-leise); font:600 13px/1 var(--schrift);
  padding:9px 6px; border-radius:999px; cursor:pointer; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.zst-pos:hover{color:var(--tinte); background:var(--flaeche)}
.zst-pos.an{background:var(--blatt); color:var(--knopf-ink)}
.zst-pos.frei.an{background:var(--flaeche); color:var(--tinte); box-shadow:inset 0 0 0 1px var(--linie)}
.zst-fuss{display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; font-size:12px; color:var(--tinte-leise)}
.zst-fuss form{margin:0}
.zst-zeit{font-family:var(--daten); font-size:11px}
.zst-weg{margin-left:auto !important}
.zst-link{appearance:none; background:none; border:0; padding:0; color:var(--tinte-leise); font:12px var(--schrift); cursor:pointer; text-decoration:underline}
.knopf.klein{padding:4px 10px; font-size:12px}
.zst-neu{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:18px}
.zst-neu label{font-weight:600; font-size:13.5px}
.zst-neu input{flex:1 1 220px; min-width:0; padding:8px 10px; border:1px solid var(--linie); border-radius:8px;
  background:var(--flaeche); color:var(--tinte); font:14px var(--schrift)}