/* Lolliversum-Portal, Admin-Oberfläche. Layout v2 nach DESIGN.md: hell, Papier statt Nachthimmel,
   gleiche Schrift und Farben wie die Mitarbeiterseiten (ma.css). Je Welt eine Kennfarbe. */
@font-face{font-family:"Atkinson Next";src:url("/static/schrift/AtkinsonHyperlegibleNext.ttf") format("truetype");font-weight:200 800;font-display:swap}
:root{
  --grund:#F6F8F9; --flaeche:#FFFFFF; --flaeche2:#EDF1F4;
  --linie:#D6DEE4; --linie-fein:#E6ECF0;
  --text:#16202A; --leise:#5B6B78;
  --gold:#B7791F; --ep:#07962F; --ep-tief:#004F18; --epgrau:#8F9195; --ls-blau:#00A5DF; --ls-blau2:#4EB1E5; --ls-tief:#0077A3;
  --gruen:#2E8B57; --flieder:#6F63A6;
  --minus:#C2445A; --plus:#2E8B57;
  /* Altnamen aus v1.1/v1.2, damit Werkbank, Kacheln und Diagramme Farben haben */
  --karte:var(--flaeche); --rand:var(--linie); --tinte:var(--text);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px);-webkit-text-size-adjust:100%}
html,body{height:100%}
body{
  margin:0; background:var(--grund); color:var(--text);
  font:400 16px/1.55 "Atkinson Next","Atkinson Hyperlegible",system-ui,sans-serif;
  font-variant-numeric:tabular-nums;
  display:flex; flex-direction:column; min-height:100%; overflow-x:hidden;
}
main{flex:1; width:min(1060px,100%); margin:0 auto; padding:0 20px 48px}
a{color:inherit}

/* Kopf: weiße Leiste mit Linie, aktive Seite als Reiter */
.kopf-band{background:var(--flaeche); border-bottom:1px solid var(--linie)}
.kopf{
  width:min(1060px,100%); margin:0 auto; padding:12px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.marke{display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:700; font-size:1.15rem}
.marke svg{width:32px; height:32px}
.kopf nav{display:flex; gap:2px; flex-wrap:wrap}
.kopf nav a{text-decoration:none; color:var(--leise); padding:10px 12px; border-radius:10px; font-weight:600}
.kopf nav a[aria-current="page"]{color:var(--text); background:var(--flaeche2)}
.kopf nav a:hover{color:var(--text); background:var(--flaeche2)}
.kopf nav .leise{margin-left:8px; font-weight:400}

/* Held */
.held{padding:34px 0 8px}
.held.klein{padding:24px 0 4px}
.datum{color:var(--gold); margin:0 0 2px; font-weight:700}
h1{font-size:clamp(1.75rem,4.5vw,2.5rem); line-height:1.15; margin:.05em 0 .3em; font-weight:700}
h2{font-size:1.15rem; font-weight:700; margin:1.6em 0 .5em}
.lage{color:var(--leise); max-width:62ch; margin:.2em 0 0}

/* Welten */
.welten{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px; margin-top:24px}
.welt{
  display:block; text-decoration:none; background:var(--flaeche);
  border:1px solid var(--linie); border-left:6px solid var(--linie); border-radius:12px;
  padding:18px 18px 14px;
}
.welt h2{margin:0 0 .35em; font-size:1.3rem}
.welt p{margin:0 0 .8em; color:var(--leise); font-size:.95rem}
.welt:hover{border-color:var(--leise)}
.welt.eploll{border-left-color:var(--ep)}
.welt.lollenstein{border-left-color:var(--ls-blau)}
.welt.privat{border-left-color:var(--flieder)}
.pfadzeile{display:block; color:var(--leise); font-size:.84rem}

/* Schnellzugriffe als Zeilen */
.schnell{margin-top:32px}
.schnellzeilen{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px; background:var(--linie); border:1px solid var(--linie); border-radius:14px; overflow:hidden}
.schnellzeilen a{background:var(--flaeche); padding:14px 16px; min-height:56px; text-decoration:none; font-weight:700}
.schnellzeilen a em{display:block; font-style:normal; font-weight:400; color:var(--leise); font-size:.88rem; margin-top:2px}
.schnellzeilen a:hover{background:var(--flaeche2)}

/* Tabellen: weiße Karte, ruhige Linien */
.daten{width:100%; border-collapse:collapse; margin-top:8px; font-size:.95rem; background:var(--flaeche); border:1px solid var(--linie); border-radius:12px; overflow:hidden}
.daten th{text-align:left; font-weight:700; color:var(--leise); background:var(--flaeche2); padding:9px 12px; border-bottom:1px solid var(--linie)}
.daten td{padding:10px 12px; border-bottom:1px solid var(--linie-fein); vertical-align:top}
.daten tr:last-child td{border-bottom:none}
.daten tbody tr:hover td{background:#FAFBFC}
.daten .zahl{text-align:right; white-space:nowrap}
.daten .fest{white-space:nowrap}
.daten .titel{display:block; font-weight:600}
.daten.breit{margin-top:16px}
tr[class^="rand-"] td:first-child{border-left:4px solid transparent}
.rand-eploll td:first-child{border-left-color:var(--ep)}
.rand-lollenstein td:first-child{border-left-color:var(--ls-blau)}
.rand-privat td:first-child{border-left-color:var(--flieder)}
.minus{color:var(--minus); font-weight:600} .plus{color:var(--plus)}
.tabellenrahmen{overflow-x:auto; max-width:100%}

/* Formulare */
.filter{display:flex; gap:8px; flex-wrap:wrap; margin-top:18px}
.filter input[type=search]{flex:1 1 240px}
input,select,button,textarea{
  font:inherit; color:var(--text); background:var(--flaeche);
  border:1.5px solid var(--linie); border-radius:10px; padding:9px 12px; min-height:44px; max-width:100%;
}
:focus-visible{outline:3px solid var(--ls-tief); outline-offset:2px}
button{cursor:pointer; background:var(--text); color:#fff; border-color:var(--text); font-weight:700}
button:hover{background:#2A3846}

.blaettern{display:flex; gap:14px; align-items:center; justify-content:center; margin-top:18px; color:var(--leise)}
.blaettern a{color:var(--text); font-weight:600}

.spalten{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:28px}
.spalten>*{min-width:0}

footer{width:min(1060px,100%); margin:0 auto; padding:18px 20px 26px; color:var(--leise); font-size:.84rem}

/* Anmeldung */
.anmeldung{display:grid; place-items:center; padding:24px}
.anmeldekarte{
  background:var(--flaeche); border:1px solid var(--linie); border-radius:18px;
  padding:32px 28px; width:min(380px,100%); display:flex; flex-direction:column; gap:12px;
}
.anmeldekarte h1{font-size:1.6rem; margin:0}
.anmeldekarte label{color:var(--leise); font-size:.92rem; margin-top:6px; font-weight:600}
.fehler{color:var(--minus); margin:0; font-weight:600}

@media (max-width:620px){
  .held{padding-top:20px}
  .daten th:nth-child(4),.daten td:nth-child(4){display:none}
  main{padding:0 14px 40px}
}
@media (prefers-reduced-motion:no-preference){
  .held h1,.held .datum,.held .lage{animation:auftauchen .4s ease-out both}
  @keyframes auftauchen{from{opacity:0; transform:translateY(6px)}to{opacity:1}}
}

/* ---- v1.1: Zuordnungs-Werkbank ---- */
.fortschritt { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--tinte) 12%, transparent); overflow: hidden; margin-top: 0.9rem; }
.fortschritt span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--ep)); border-radius: inherit; }
.werkbank { max-width: 680px; margin: 1.5rem auto; padding: 1.4rem 1.5rem 1.6rem; border-radius: 14px; background: var(--karte); border: 1px solid var(--rand); border-left-width: 5px; }
.werkbank .stufe { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.6; margin: 0 0 0.35rem; }
.werkbank h2 { margin: 0 0 0.4rem; font-size: 1.25rem; overflow-wrap: anywhere; }
.werkbank .notiz { background: color-mix(in srgb, var(--gold) 14%, transparent); border-radius: 8px; padding: 0.5rem 0.7rem; font-size: 0.9rem; }
.entscheiden { display: grid; gap: 0.9rem; margin-top: 1.1rem; }
.entscheiden label { display: grid; gap: 0.3rem; font-size: 0.85rem; opacity: 0.9; }
.entscheiden select, .entscheiden input, .zeilenform select { font: inherit; padding: 0.55rem 0.7rem; border-radius: 9px; border: 1px solid var(--rand); background: var(--grund); color: var(--tinte); }
.aktionen { display: flex; gap: 0.7rem; align-items: center; margin-top: 0.2rem; }
.aktionen button, .knopf { font: inherit; font-weight: 600; padding: 0.6rem 1.2rem; border-radius: 10px; border: 0; background: var(--text); color: #fff; cursor: pointer; text-decoration: none; display: inline-block; }
.knopf.leise, .aktionen .leise { background: transparent; color: var(--tinte); border: 1px solid var(--rand); }
.fertigmeldung { border-left-color: var(--gruen); text-align: center; }
td.kat { min-width: 9rem; }
.zeilenform select { padding: 0.3rem 0.45rem; font-size: 0.82rem; max-width: 10rem; }

/* ---- v1.2: Diagramme + Welten ---- */
.diagramme { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.diagramm { background: var(--karte); border: 1px solid var(--rand); border-radius: 14px; padding: 0.9rem 1rem 0.6rem; }
.diagramm h3 { margin: 0 0 0.5rem; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; }
.diagramm svg { width: 100%; height: auto; display: block; }
.dg-achse { font-size: 10px; fill: currentColor; opacity: 0.55; }
.dg-null { stroke: currentColor; opacity: 0.25; stroke-width: 1; }
.dg-plus { fill: var(--gold); }
.dg-minus { fill: #d97b66; }
.dg-linie { fill: none; stroke: var(--ep); stroke-width: 2.2; stroke-linejoin: round; }
.dg-flaeche { fill: var(--ep); opacity: 0.12; }
.dg-punkt { fill: var(--gold); stroke: var(--grund); stroke-width: 1.5; }
.kacheln { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin: 1.2rem 0; }
.kachel { background: var(--karte); border: 1px solid var(--rand); border-radius: 14px; padding: 1rem 1.1rem; }
.kachel strong { display: block; font-size: 1.5rem; font-weight:700; }
.kachel span { font-size: 0.82rem; opacity: 0.75; line-height: 1.4; }
.weltkopf { border-left: 5px solid var(--rand); border-radius: 14px; padding-left: 1.2rem; }
.welt-eploll, .werkbank.welt-eploll { border-left-color: var(--ep); }
.welt-lollenstein, .werkbank.welt-lollenstein { border-left-color: var(--ls-blau); }
.welt-privat, .werkbank.welt-privat { border-left-color: var(--flieder); }


/* ---- v1.2.1: Marken-Branding je Welt ---- */
.weltlogo { height: 44px; width: auto; display: block; margin-bottom: 0.8rem; }
.welt .weltlogo { height: 30px; margin: 0 0 0.5rem; }
.weltkopf.welt-lollenstein {
  background:
    radial-gradient(circle 5px at 88% 26%, var(--ls-blau) 4px, transparent 5px),
    radial-gradient(circle 4px at 93% 55%, var(--ls-blau2) 3px, transparent 4px),
    radial-gradient(circle 3px at 84% 72%, var(--ls-blau) 2px, transparent 3px),
    radial-gradient(circle 6px at 96% 82%, var(--ls-blau2) 5px, transparent 6px),
    var(--karte);
  border: 1px solid var(--rand); border-left: 5px solid var(--ls-blau);
}
.weltkopf.welt-lollenstein .datum, .welt-lollenstein h2 small { color: var(--ls-blau); }
.weltkopf.welt-eploll {
  background: linear-gradient(135deg, color-mix(in srgb, var(--epgrau) 10%, var(--karte)), var(--karte) 55%);
  border: 1px solid var(--rand); border-left: 5px solid var(--ep);
}
.weltkopf.welt-privat { background: var(--karte); border: 1px solid var(--rand); }
.welt-lollenstein .kachel strong { color: var(--ls-blau); }
.welt-eploll .kachel strong { color: var(--ep); }
.welt-lollenstein .dg-linie { stroke: var(--ls-blau); }
.welt-lollenstein .dg-flaeche { fill: var(--ls-blau); }

/* ---- Layout v2: Tabellen ohne Klasse (Personal, Leitung) wie .daten, breite Tabellen scrollen ---- */
main table:not(.daten){width:100%; border-collapse:collapse; margin-top:8px; font-size:.95rem; background:var(--flaeche); border:1px solid var(--linie); border-radius:12px; overflow:hidden}
main table:not(.daten) th{text-align:left; font-weight:700; color:var(--leise); background:var(--flaeche2); padding:9px 12px; border-bottom:1px solid var(--linie)}
main table:not(.daten) td{padding:9px 12px; border-bottom:1px solid var(--linie-fein); vertical-align:top}
main table:not(.daten) tr:last-child td{border-bottom:none}
th.r,td.r{text-align:right; white-space:nowrap}
@media (max-width:760px){
  main table{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch}
}
.weltkopf{margin-top:20px; padding-top:4px; padding-bottom:6px}

/* ---- Aufgaben ---- */
.reiter{display:flex; gap:6px; margin:16px 0 4px}
.reiter a{text-decoration:none; padding:10px 16px; border-radius:999px; border:1.5px solid var(--linie); background:var(--flaeche); font-weight:700; color:var(--leise)}
.reiter a[aria-current="page"]{background:var(--text); border-color:var(--text); color:#fff}
.aufgabenblock{margin-top:30px; scroll-margin-top:16px}
.aufgabenblock .lage{margin-bottom:10px}
.aufgabenzeilen{background:var(--flaeche); border:1px solid var(--linie); border-radius:14px; overflow:hidden}
.aufgabe{display:flex; gap:12px; align-items:center; flex-wrap:wrap; min-height:56px; padding:10px 16px; border-top:1px solid var(--linie-fein)}
.aufgabe:first-child{border-top:none}
.aufgabe:target{background:#FFF8E8}
.aufgabe .wer{font-weight:700; min-width:13rem; text-decoration:none}
.aufgabe .wer:hover{text-decoration:underline}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{font-size:.88rem; text-decoration:none; padding:6px 12px; border-radius:999px; background:#FFF3DC; color:#7A4F10; font-weight:600; border:1px solid #F0D9A8}
.chip:hover{background:#FCE6B8}
.vermerk{color:var(--text); flex:1 1 20rem}
.aufgabe form{margin:0}
.haken{width:34px; height:34px; min-height:34px; padding:0; border-radius:9px; background:var(--flaeche); color:var(--plus); border:2px solid var(--linie); font-size:1.2rem; line-height:1}
.ist-erledigt .haken{background:var(--plus); color:#fff; border-color:var(--plus)}
.ist-erledigt .text{color:var(--leise); text-decoration:line-through}
.aufgabe .text{flex:1 1 20rem}
.aufgabe .hin{margin-left:auto; font-weight:700; text-decoration:none; white-space:nowrap; color:var(--ls-tief)}
.erledigt-text{color:var(--plus); font-weight:700}
@media (max-width:620px){.aufgabe .wer{min-width:0; flex-basis:100%}}

/* Akte-Formular mit Beschriftung, fehlende Felder gelb */
.akteform{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px 16px}
.akteform label{display:grid; gap:4px; font-weight:700; font-size:.9rem; color:var(--leise)}
.akteform label.fehlt input{background:#FFF8E8; border-color:#F0D9A8}
.akteform label.ziel{color:var(--text)}
.akteform label.ziel input,.akteform label.ziel textarea{outline:3px solid var(--gold); outline-offset:1px}
.akteform .breit{grid-column:1/-1; margin:0}
.akteform textarea{width:100%}

/* ---- Wertgarantie: Modelle und Zuordnung ---- */
.sprung{margin:14px 0 0; font-weight:700}
.sprung a{color:var(--ls-tief)}
.modellliste{display:grid; gap:10px; scroll-margin-top:16px}
.modellzeile{display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1.6fr) minmax(0,1fr) auto auto; gap:10px; align-items:end; background:var(--flaeche); border:1px solid var(--linie); border-radius:14px; padding:12px 14px}
.modellzeile.neu{border-style:dashed}
.modellzeile label,.standardzeile label{display:grid; gap:4px; font-weight:700; font-size:.88rem; color:var(--leise)}
.modellzeile .nutzung{color:var(--leise); font-size:.88rem; padding:0 6px 12px; white-space:nowrap}
.modellzeile .knoepfe{display:flex; gap:6px}
.leise-knopf{background:var(--flaeche); color:var(--minus); border-color:var(--linie)}
.standardzeile{display:flex; gap:10px; align-items:end; flex-wrap:wrap; margin:0 0 12px}
.zuordnung select{flex:1 1 16rem}
.zuordnung .ab{display:flex; gap:6px; align-items:center; color:var(--leise); font-size:.9rem}
.zuordnung .verlauf{flex-basis:100%}
@media (max-width:760px){.modellzeile{grid-template-columns:minmax(0,1fr)} .modellzeile .nutzung{padding:0}}

/* ---- Fähigkeiten, Verlauf, Urlaubsprüfung ---- */
.skillzeile{display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 10px}
.skill{background:var(--flaeche2); border:1px solid var(--linie); border-radius:999px; padding:4px 12px; font-weight:600; font-size:.88rem}
.faehigkeiten{border:1.5px solid var(--linie); border-radius:12px; padding:10px 14px; display:flex; flex-wrap:wrap; gap:6px 18px}
.faehigkeiten legend{font-weight:700; font-size:.9rem; color:var(--leise); padding:0 6px}
.faehigkeiten label.haken,.akteform .faehigkeiten label{display:flex; align-items:center; gap:8px; font-weight:600; color:var(--text)}
.faehigkeiten input[type=checkbox],.skillmatrix input[type=checkbox]{width:22px; height:22px; min-height:22px; accent-color:var(--ep-tief)}
.akteform .gilt small{font-weight:400}
.skillkonfig{position:relative; display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px 14px; align-items:end}
.skillkonfig label{display:grid; gap:4px; font-weight:700; font-size:.9rem}
.skillkonfig .breit{grid-column:1/-1; margin:0}
.paar-klein{display:flex; gap:6px}
.paar-klein input{width:100%}
.paar-klein button{min-width:44px}
.plan td.knapp,.daten td.knapp{background:#FBE7EA; color:var(--minus); font-weight:700}
.pruefung{margin-top:6px; padding:8px 10px; border-radius:10px; font-size:.9rem; color:var(--text)}
.pruefung.gruen{background:#E4F3EA}
.pruefung.rot{background:#FBE7EA}

/* ---- Ziele, Stand-Kacheln, Verträge ---- */
.zielliste{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); margin:8px 0 6px}
.zielkarte{background:#fff; border:1px solid #D6DEE4; border-left:6px solid #D6DEE4; border-radius:14px; padding:12px 14px}
.zielkarte.vor,.zielkarte.erreicht{border-left-color:#2E8B57}
.zielkarte.hinter{border-left-color:#C2445A}
.zielkopf{display:flex; gap:8px; align-items:baseline; justify-content:space-between; flex-wrap:wrap}
.zielstatus{font-size:.85rem; font-weight:700; padding:2px 10px; border-radius:999px; background:#EDF1F4}
.vor .zielstatus,.erreicht .zielstatus{background:#E4F3EA; color:#1D5C39}
.hinter .zielstatus{background:#FBE7EA; color:#8A2236}
.balken{position:relative; height:12px; border-radius:999px; background:#EDF1F4; margin:10px 0 8px; overflow:visible}
.balken .ist{position:absolute; left:0; top:0; bottom:0; border-radius:999px; background:#5B6B78}
.vor .balken .ist,.erreicht .balken .ist{background:#2E8B57}
.hinter .balken .ist{background:#C2445A}
.balken .marke-soll{position:absolute; top:-4px; bottom:-4px; width:3px; margin-left:-1px; background:#16202A; border-radius:2px}
.zielzahlen{margin:0; font-variant-numeric:tabular-nums}
.standkacheln{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; margin:6px 0 4px}
.standkachel{background:#fff; border:1px solid #D6DEE4; border-radius:16px; padding:12px 14px; display:grid; gap:2px}
.standkachel span{color:#5B6B78; font-weight:600; font-size:.9rem}
.standkachel b{font-size:1.5rem; line-height:1.2}
.standkachel small{color:#5B6B78}
.vertraege{padding:0 16px 10px}
.vertrag{display:flex; gap:10px; align-items:center; padding:10px 0; border-top:1px solid #E6ECF0}
.vertrag .rechts{margin-left:auto; white-space:nowrap}
.vertrag.storno b{color:#C2445A}

/* ---- Verkaufsprovision ---- */
.vpkarte{background:#fff; border:1px solid #D6DEE4; border-radius:14px; padding:12px 14px; margin:8px 0}
.stufen{display:grid; gap:2px; margin-top:8px}
.stufe{display:flex; gap:10px; align-items:center; padding:8px 4px; border-top:1px solid #E6ECF0}
.stufe:first-child{border-top:none}
.stufe b{margin-left:auto; white-space:nowrap}
.stufe small{color:#5B6B78}
.stufe .haekchen{width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:700; flex:none}
.stufe.ok .haekchen{background:#2E8B57; color:#fff}
.stufe.offen .haekchen{background:#EDF1F4; color:#5B6B78}
.stufe.offen b{color:#5B6B78}

/* ---- Abwesenheitskalender ---- */
.kalnav{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:10px 0 6px}
.kalnav>a{text-decoration:none; font-weight:700; font-size:1.2rem; padding:6px 14px; border:1.5px solid #D6DEE4; border-radius:10px; background:#fff; color:inherit}
.kalnav b{font-size:1.15rem; min-width:9rem; text-align:center}
.kalreiter{display:flex; gap:6px; margin-left:auto}
.kalreiter a{text-decoration:none; padding:8px 14px; border-radius:999px; border:1.5px solid #D6DEE4; background:#fff; font-weight:700; color:#5B6B78}
.kalreiter a[aria-current="page"]{background:#16202A; border-color:#16202A; color:#fff}
.kalrahmen{overflow-x:auto; -webkit-overflow-scrolling:touch; background:#fff; border:1px solid #D6DEE4; border-radius:12px}
.kal{border-collapse:collapse; font-size:.8rem; width:max-content; min-width:100%}
.kal th,.kal td{border-right:1px solid #EEF2F5; border-bottom:1px solid #EEF2F5; text-align:center; padding:4px 2px; min-width:26px}
.kal thead th{font-weight:600; color:#5B6B78; line-height:1.2; padding:6px 2px}
.kal .kalname{position:sticky; left:0; background:#fff; text-align:left; padding:6px 10px; min-width:9rem; white-space:nowrap; font-weight:600; z-index:1; border-right:1px solid #D6DEE4}
.kal .we{background:#F2F5F7}
.kal .ft{background:#FFF1D6}
.kal td.heute{background:#EAF3FB} .kal th.heute{background:#16202A; color:#fff; border-radius:6px 6px 0 0}
.kal td.urlaub{background:#CDE9D6; color:#1D5C39; font-weight:700}
.kal td.beantragt{background:repeating-linear-gradient(45deg,#E4F3EA,#E4F3EA 4px,#fff 4px,#fff 8px); color:#1D5C39; font-weight:700}
.kal td.krank{background:#F8D3DA; color:#8A2236; font-weight:700}
.kal tr.summe td{font-weight:700; color:#5B6B78}
.kal tr.summe td.viele{color:#C2445A}
.kal td.zahl{font-weight:700; padding:4px 8px}
.kallegende span{display:inline-block; min-width:22px; text-align:center; border-radius:5px; margin-left:8px; font-weight:700}
.kallegende .urlaub{background:#CDE9D6} .kallegende .krank{background:#F8D3DA} .kallegende .beantragt{background:#E4F3EA} .kallegende .ft{background:#FFF1D6}
.kalabo input{width:100%; font-size:.85rem}
.kal .kurz{display:none}
@media (max-width:620px){.kal .lang{display:none} .kal .kurz{display:inline} .kal .kalname{min-width:0}}