/* ==========================================================================
   Sanovetis People – Oberflaeche
   Farben, Radien und Typografie sind an sanovetis.de gemessen, nicht
   geschaetzt: Gruenton #7A4DD1, Castoro fuer Ueberschriften, Akatab fuer den
   Fliesstext, und die asymmetrische Ecke mit eckiger rechter oberer Seite.
   Alle drei Schriften kommen aus der bestehenden Einbindung
   /basics/styles/fonts.css.
   ========================================================================== */

:root{
  /* FARBUMSTELLUNG 01.10.2026: Die Marke ist Lila, nicht mehr Gruen.
     Die Variablennamen heissen aus der Entstehungszeit weiter --green-*.
     Sie umzubenennen haette jede Verwendung in dieser Datei angefasst und
     damit mehr Risiko als Nutzen gebracht. Gemeint ist die Leitfarbe.
     Die Neutraltoene tragen denselben Farbstich, aber nur sehr leise:
     Text und Linien sollen lesbar bleiben, nicht bunt werden. */

  --green:#7A4DD1;
  --green-h:#6639BA;
  --green-deep:#4E2B92;
  --green-tint:#E2D8F6;
  --green-tint2:#EEE7FB;
  /* Noch eine Stufe leiser als --green-tint2. Fuer Flaechen, die nur
     „ausgewaehlt" sagen sollen und sonst nichts: der aktive Menuepunkt, die
     ausgewaehlte Zeile. Ein kraeftiger gruener Block zieht mehr Aufmerksamkeit
     auf sich als der Inhalt daneben. */
  --green-wash:#F6F2FE;

  --grey:#767080;
  --grey-mid:#5B5468;
  --ink:#1E1A28;
  --ink-soft:#3A3448;

  /* Warmes Off-White statt Kaltgrau. Der Unterschied zur weissen Flaeche
     betraegt gut zwei Prozent Helligkeit — gerade genug, dass der Inhalt
     vorne steht, zu wenig, dass man den Hintergrund bemerkt. */
  --page:#F8F6FC;
  --white:#ffffff;
  --f8:#FAF9FD;
  /* Feld- und Sockelflaeche: eine Spur waermer als Weiss. */
  --sunk:#FAF8FD;
  /* Eingabefelder tragen keine Umrandung mehr, also muss die Flaeche allein
     sagen „hier kannst du schreiben". Dafuer reichten die zwei Prozent von
     --sunk nicht; diese beiden Toene liegen bei rund vier und sechs. */
  --feld:#F2F0F9;
  --feld-h:#EDE9F7;
  --line:#E7E2F3;
  --line-soft:#EFEBF8;
  /* Fuer Trennungen, die man nur sehen soll, wenn man sie sucht. */
  --hairline:#F2EFFA;

  --warn:#9C6C33;
  --warn-tint:#F7F0E5;

  /* Abstandsleiter. Jeder Abstand in dieser Oberflaeche kommt aus dieser
     Reihe — nicht aus dem Gefuehl. Genau daran erkennt man, ob eine
     Oberflaeche gebaut oder gewachsen ist. */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px;
  --s5:24px; --s6:32px; --s7:48px; --s8:64px;

  /* Akatab ist die Fliesstextschrift von sanovetis.de. Sie kommt aus derselben
     Einbindung /basics/styles/fonts.css, die schon geladen wird — Poppins
     bleibt als Rueckfall stehen, falls die Datei einmal fehlt. */
  --sans:'Akatab','Poppins','Segoe UI',system-ui,-apple-system,sans-serif;
  --serif:'Castoro',Georgia,'Times New Roman',serif;

  /* Radien.
     Die asymmetrische Ecke ist an sanovetis.de gemessen und traegt die Marke:
     rechts oben eckig, rechts unten weit ausgerundet. Auf jeder Karte, jeder
     Tabelle und jedem Knopf wiederholt wirkt sie aber nicht mehr wie eine
     Handschrift, sondern wie ein Muster — und sie widerspricht dem, was diese
     Oberflaeche sein soll: ruhig. Sie bleibt deshalb genau an einer Stelle,
     der Hauptschaltflaeche, und wird dort zur Signatur. Alles andere folgt
     einer stillen, gleichmaessigen Leiter:
       Bedienelemente 9px, Felder und Panele 14px, grosse Flaechen 18px. */
  /* 30 Pixel sind an einer 56 Pixel hohen Flaeche gemessen. An einer 46
     Pixel hohen ist derselbe Wert zwei Drittel der Hoehe, und aus der
     Signatur wird ein Blatt. 26 haelt das Verhaeltnis. */
  --r-marke:6px 0 20px 6px;
  --r-ctl:9px;
  --r-btn:9px;
  --r-card:14px;
  --r-surface:18px;
  --r-soft:9px;

  /* Tiefe, nicht Schatten. Kaum Versatz, weiter Weichzeichner, sehr geringe
     Deckkraft — man soll nicht denken „da ist ein Schatten", sondern die
     Flaeche nur eine Spur vor dem Hintergrund sehen. */
  --shadow:0 1px 1px rgba(30,26,40,.015), 0 8px 28px rgba(30,26,40,.035);
  --shadow-lift:0 2px 6px rgba(30,26,40,.03), 0 20px 50px rgba(30,26,40,.07);

  /* Bewegungen. Kurz genug, dass nichts wartet, lang genug, dass nichts
     springt. Eine Kurve fuer alles, damit die Oberflaeche ein Tempo hat. */
  --ease:cubic-bezier(.22,.61,.36,1);
  --t-fast:150ms var(--ease);
  --t:190ms var(--ease);

  --maxw:1120px;
  --gap:clamp(20px,2.8vw,32px);
}

*,*::before,*::after{box-sizing:border-box}

/* Schmal, in der Hausfarbe, und nur zu sehen, wenn es etwas zu rollen gibt.
   Firefox versteht die beiden Standardangaben, WebKit braucht die eigenen —
   deshalb beides. */
*{scrollbar-width:thin;scrollbar-color:#DAD5E4 transparent}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#DDD8E7;border-radius:99px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#C7C0D6;background-clip:content-box}
::-webkit-scrollbar-corner{background:transparent}

/* Ausgewaehlter Text in der Hausfarbe statt im Systemblau. */
::selection{background:var(--green-tint);color:var(--green-deep)}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--page);
  color:var(--ink-soft);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
/* Vier Ebenen, mehr nicht.
   Seitentitel — Abschnittsueberschrift — Beschriftung — Fliesstext.
   Alles, was sich zwischen zwei Ebenen legt, macht die Rangfolge unschaerfer
   statt feiner. Die Schriften selbst bleiben, wie sie sind: Castoro fuer die
   grossen Ueberschriften, Akatab fuer alles andere. Es kommt keine dritte
   Schrift dazu. Was sich aendert, ist der Abstand zwischen den Ebenen: die
   grossen Titel werden groesser und ruhiger, die kleinen Beschriftungen
   leiser. */
h1,h2,h3,h4{margin:0;color:var(--ink);text-wrap:balance}
h1,h2{font-family:var(--serif);font-weight:400;letter-spacing:-.015em}
h1{font-size:clamp(2.1rem,1.4rem + 2.6vw,3.1rem);line-height:1.08}
h2{font-size:clamp(1.35rem,1.1rem + 1vw,1.75rem);line-height:1.22}
h3{font-family:var(--sans);font-size:1rem;font-weight:600;letter-spacing:-.005em}
h4{font-family:var(--sans);font-size:.9rem;font-weight:600}
p{margin:0}
a{color:var(--green-h);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:3px}
img,svg{max-width:100%}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(16px,3.5vw,44px)}
/* Die Beschriftungsebene. Klein, gesperrt, gruen — und genau deshalb darf sie
   nur ueber etwas stehen, das gross ist. Redaktionell gelesen: eine Zeile
   „ABWESENHEIT" ueber einer ruhigen grossen Ueberschrift. */
.eyebrow{
  display:block;font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--green);margin-bottom:var(--s3);
}
.muted{color:var(--grey)}
.small{font-size:13.5px}
.nums{font-variant-numeric:tabular-nums}

/* ---------- Seitenleiste ----------
   Das Menü steht links und läuft nach unten. Bei sechs Punkten mit Symbolen
   ist eine senkrechte Liste schneller zu erfassen als eine waagerechte Reihe,
   und sie wächst mit, ohne dass die Kopfzeile eng wird.
   ------------------------------------ */
.shell{display:flex;align-items:stretch;min-height:100vh}

.sidebar{
  flex:0 0 252px;width:252px;
  background:var(--white);border-right:1px solid var(--line-soft);
  position:sticky;top:0;height:100vh;overflow-y:auto;overflow-x:hidden;z-index:40;
  display:flex;flex-direction:column;gap:var(--s6);
  padding:var(--s5) var(--s3) var(--s4);
}
.sidebar-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 8px}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto;text-decoration:none}
.brand img{height:26px;width:auto;display:block}
.brand .fallback{font-family:var(--serif);font-size:1.3rem;color:var(--green);letter-spacing:-.01em}
.brand .sub{
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);
  padding-left:10px;margin-left:2px;border-left:1px solid var(--line-soft);
}

/* Der aktive Punkt war ein kraeftiger gruener Block — das lauteste Element
   auf jeder Seite, und es sagt nur, wo man ohnehin schon ist. Jetzt: eine
   sehr helle gruene Flaeche, gruene Schrift, kein Rahmen. Man findet ihn
   sofort, ohne dass er den Inhalt uebertoent. */
.mainnav{display:flex;flex-direction:column;gap:1px}
.mainnav a{
  display:flex;align-items:center;gap:var(--s3);
  padding:9px var(--s3);border-radius:var(--r-ctl);font-size:14.5px;font-weight:500;
  color:var(--grey-mid);text-decoration:none;
  transition:background var(--t-fast),color var(--t-fast);
}
.mainnav a:hover{background:var(--f8);color:var(--ink);text-decoration:none}
.mainnav a.active{background:var(--green-wash);color:var(--green-deep);font-weight:600}
.mainnav a.active:hover{background:var(--green-tint2)}
/* Alle Symbole gleich gross, gleich stark, gleich ausgerichtet. Eine Reihe,
   in der ein Symbol optisch heraussticht, liest sich als Fehler — auch wenn
   niemand sagen kann, welches es ist. */
.navicon{width:18px;height:18px;flex:0 0 18px;opacity:.7;transition:opacity var(--t-fast)}
.mainnav a:hover .navicon{opacity:.9}
.mainnav a.active .navicon{opacity:1}

/* Die Zahl neben „Stellen": unbearbeitete Bewerbungen.
   Dieselbe Form wie die Glocke oben, damit sie als dasselbe gelesen wird:
   etwas liegt an. Bewusst kein Rot — das Portal kennt keins, und eine
   Bewerbung ist kein Alarm. Steht die Zahl auf null, ist sie gar nicht da:
   eine dauerhafte 0 lernt das Auge weg, und dann faellt die 1 auch nicht
   mehr auf. */
.navzahl{margin-left:auto;min-width:19px;padding:1px 6px;border-radius:999px;
  background:var(--green);color:#fff;font-size:11px;font-weight:600;
  line-height:1.6;text-align:center}
.subzahl{display:inline-block;margin-left:6px;min-width:18px;padding:0 5px;
  border-radius:999px;background:var(--green);color:#fff;font-size:11px;
  font-weight:600;line-height:1.6;text-align:center}
.subnav a.active .subzahl{background:var(--green-deep)}

/* Der Benutzerblock sitzt unten, abgesetzt durch eine Linie. */
.usermenu{
  margin-top:auto;display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  border-top:1px solid var(--line-soft);padding:16px 8px 0;
}
.usermenu .name{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);min-width:0}
.usermenu .name:hover{text-decoration:none}
.usermenu .name:hover .wn{color:var(--green-h)}
.usermenu .who{display:flex;flex-direction:column;min-width:0}
.usermenu .wn{font-size:14px;font-weight:600;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.usermenu .wr{font-size:11.5px;color:var(--grey);line-height:1.3}

.linkbtn{background:none;border:0;padding:0;font:inherit;font-size:13px;color:var(--grey);cursor:pointer;text-decoration:underline;text-underline-offset:.2em}
.linkbtn:hover{color:var(--green-h)}
/* Auf dem Handy ist ein 20 Pixel hoher Textknopf mit dem Daumen schwer zu
   treffen, und „entfernen" ist kein Knopf, den man versehentlich daneben
   treffen moechte. Die Flaeche waechst nur bei grobem Zeiger; am Schreibtisch
   bleibt die Zeile so schmal wie bisher. */
/* Trefferflaechen auf dem Telefon.
   34 Pixel waren die alte Annahme; gemessen wird der Daumen aber mit 44.
   Am Schreibtisch aendert sich nichts — ein feiner Zeiger trifft auch 19
   Pixel, und dort waeren 44 Pixel hohe Textknoepfe unnoetig laut. */
@media (pointer: coarse) {
  .linkbtn{
    display:inline-flex;align-items:center;min-height:44px;
    padding-inline:2px;margin-inline:-2px;
  }
}

.navtoggle{display:none;background:none;border:1px solid var(--line);border-radius:var(--r-soft);padding:9px 12px;cursor:pointer;font:inherit;font-size:14px;color:var(--ink)}

.content{flex:1 1 auto;min-width:0}

/* ---------- Seitenrumpf ----------
   Mehr Luft aussen und zwischen den Abschnitten. Der teuerste Bestandteil
   einer ruhigen Oberflaeche ist der leere Raum — und der einzige, den man
   nicht nachtraeglich hinzufuegen kann, ohne alles andere zu verschieben.
   ---------------------------------- */
main{padding:clamp(40px,6vw,72px) 0 clamp(72px,10vw,120px)}
.pagehead{margin-bottom:clamp(32px,4.5vw,52px)}
.pagehead p{color:var(--grey);margin-top:var(--s3);max-width:62ch;font-size:15px}

/* Untermenue der Administration.
   Waagerecht statt in der Seitenleiste: die Verwaltung ist ein eigener
   Bereich mit eigenen Seiten, und sie soll die Hauptnavigation nicht
   aufblaehen. Auf schmalen Geraeten scrollt die Leiste seitlich weg,
   statt umzubrechen — sonst schoebe sie den Seitentitel nach unten. */
/* Reiter aus Schrift, Position und einer feinen Linie — nicht aus Kaesten
   oder Kapseln. Was aktiv ist, sagt das Gewicht der Schrift und ein zwei
   Pixel breiter Strich darunter; mehr braucht es nicht. */
.subnav{display:flex;gap:var(--s5);margin:0 0 clamp(28px,3.5vw,40px);padding-bottom:0;
  overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line-soft)}
.subnav::-webkit-scrollbar{display:none}
.subnav a{flex:0 0 auto;padding:0 0 12px;border-radius:0;
  color:var(--grey);text-decoration:none;font-size:14.5px;white-space:nowrap;
  border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color var(--t-fast),border-color var(--t-fast)}
.subnav a:hover{color:var(--ink);background:none;text-decoration:none}
.subnav a.active{color:var(--ink);font-weight:600;border-bottom-color:var(--green)}

/* Protokollliste auf dem Systemzustand.
   Sie darf lang sein, aber nicht die ganze Seite verschlucken — sonst
   scrollt man an allem vorbei, was darueber steht. */
.logbox{max-height:min(52vh,520px);overflow-y:auto}
.logbox li{padding:10px 0}
/* Nur was wirklich jemand ansehen muss wird hervorgehoben. Faerbt man
   jede Zeile, faellt keine mehr auf. */
.logbox .neg{margin-top:2px;color:var(--warn);font-weight:500}

.stack{display:grid;gap:var(--gap)}
/* Rasterfelder duerfen nicht mit ihrem Inhalt mitwachsen.
   Ohne min-width:0 macht ein breiter Inhalt — der Teamkalender etwa — die
   ganze Spalte breiter, und die Seite laeuft seitlich aus dem Bild.
   Der Kalender bringt seine eigene Bildlaufleiste mit; die wirkt aber nur,
   wenn ihr Rahmen sich begrenzen laesst. */
.stack>*,.cols-2>*,.cols-3>*,.cols-4>*{min-width:0}
.cols-2{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.cols-3{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.cols-4{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}

/* ---------- Karten ----------
   Eine Karte ist eine Behauptung: „das hier gehoert zusammen und ist vom
   Rest getrennt". Wenn alles eine Karte ist, behauptet nichts mehr etwas.
   Deshalb: sehr helle Umrandung, kein sichtbarer Schatten, viel Innenraum —
   und im Zweifel gar keine Karte, sondern nur Abstand.
   ---------------------------- */
.card{
  background:var(--white);border:1px solid var(--line-soft);
  border-radius:var(--r-card);padding:clamp(24px,3.2vw,36px);box-shadow:none;
}
/* „flat" hiess frueher „ohne Schatten". Schatten gibt es jetzt ohnehin
   keinen mehr, die Klasse bleibt trotzdem stehen — sie steht in Dutzenden
   Ansichten, und ein entfernter Name waere eine Aenderung an Dateien, an
   denen nichts geaendert werden soll. */
.card.flat{box-shadow:none}
/* Wirklich rahmenlos: nur Inhalt auf dem Seitenhintergrund. */
.card.bare{background:none;border-color:transparent;padding-inline:0;box-shadow:none}
.card.pad-sm{padding:var(--s5)}
/* Eine Karte, die nur ein schmales Formular traegt, folgt dessen Breite.
   Das Antragsformular ist bewusst 620 Pixel breit — so weit, wie eine Zeile
   noch angenehm zu lesen ist. In einer 1030 Pixel breiten Karte blieb rechts
   daneben eine leere weisse Flaeche stehen, die aussah, als fehle dort etwas.
   Auf der Seite „Zeit nachtragen" war die Karte schon immer mitgezogen; hier
   holt das die Regel nach, ohne dass eine Ansicht angefasst werden muss. */
.card:has(> form[style*="max-width"]){max-width:692px}
/* Eine Karte mit einer Tabelle darin ist selbst der Messpunkt fuer die
   Zellenpolster, und sie laesst rollen statt ueberlaufen. Ohne das schob
   eine zu breite Tabelle sich lautlos ueber ihre Nachbarin. */
.card:has(> table.data),.card:has(> .tablewrap > table.data){
  container-type:inline-size;overflow-x:auto;
}
/* Eine Karte in einer Karte ist immer ein Hinweis darauf, dass eine der
   beiden keine sein muesste. Wo es sich nicht vermeiden laesst, verliert die
   innere ihren Rahmen und behaelt nur die Flaeche. */
.card .card{border-color:transparent;background:var(--f8);box-shadow:none}
.card-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);margin-bottom:var(--s5);flex-wrap:wrap}
.card-head h2,.card-head h3{margin:0}

/* Kennzahl.
   Vier Kacheln mit Rahmen und Schatten machen aus vier Zahlen vier Objekte.
   Gefragt sind aber die Zahlen. Also: keine Flaeche, kein Rahmen, kein
   Schatten — grosse Zahl, kleine ruhige Beschriftung darueber, und die
   Trennung entsteht allein aus dem Abstand. */
.metric{background:none;border:0;border-radius:0;padding:0;display:grid;gap:var(--s2);align-content:start}
.metric .label{font-size:12.5px;color:var(--grey);font-weight:500}
.metric .value{font-size:2.1rem;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.05;letter-spacing:-.02em}
.metric .value.pos{color:var(--green-deep)}
.metric .value.neg{color:var(--grey-mid)}
.metric .hint{font-size:12.5px;color:var(--grey)}
/* Steht die Reihe direkt auf dem Seitenhintergrund, bekommt sie eine
   gemeinsame Flaeche statt vier einzelner — eine Trennung, kein Kasten. */
.metricband{
  background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r-card);
  padding:clamp(22px,2.8vw,30px) clamp(24px,3.2vw,36px);
}

/* ---------- Heute ----------
   Die Arbeitsflaeche des Tages. Sie soll sich wie eine Seite anfuehlen, auf
   der gearbeitet wird, nicht wie ein Anzeigefeld: viel Raum, eine grosse
   ruhige Zahl, alles andere leise darum herum.
   --------------------------- */
.today{position:relative;overflow:hidden;padding:clamp(28px,3.6vw,44px)}
.today .date{font-size:14px;color:var(--grey);margin-bottom:var(--s6)}
.timer{display:flex;flex-wrap:wrap;align-items:flex-end;gap:clamp(32px,5vw,64px);margin-bottom:var(--s6)}
.timer .big{
  font-size:clamp(2.8rem,2rem + 4vw,4.4rem);font-weight:500;color:var(--ink);
  line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.035em;
}
.timer .big small{font-size:.32em;font-weight:500;color:var(--grey);margin-left:.28em;letter-spacing:0}
.timer .caption{font-size:13px;color:var(--grey);margin-top:8px}
.timer .side{display:grid;gap:2px}
.timer .side .t{font-size:1.35rem;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.state{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--green-deep);margin-bottom:14px}
.state .dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex:0 0 8px}
.state.paused{color:var(--warn)}
.state.paused .dot{background:var(--warn)}
.state.idle{color:var(--grey)}
.state.idle .dot{background:var(--grey)}
@media (prefers-reduced-motion:no-preference){
  .state:not(.idle) .dot{animation:pulse 2.4s ease-in-out infinite}
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

.actions{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- Schaltflaechen ---------- */
/* Drei Rangstufen, und nur drei:
     PRIMAER   gruen gefuellt — die eine Handlung, die auf dieser Seite zaehlt.
     SEKUNDAER hell, feine Umrandung — alles, was daneben moeglich ist.
     TERTIAER  reine Schrift, kein sichtbarer Behaelter.
   Die Marken-Ecke traegt nur noch die primaere Schaltflaeche. Dort ist sie
   eine Signatur; auf jedem zweiten Element waere sie ein Muster. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:46px;padding:0 var(--s5);border:1px solid transparent;border-radius:var(--r-btn);
  font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:-.005em;
  cursor:pointer;text-decoration:none;
  background:var(--feld);color:var(--ink-soft);
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast);
}
.btn:hover{background:var(--feld-h);color:var(--ink)}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(.5px)}

.btn.primary{background:var(--green);color:#fff;border-radius:var(--r-marke)}
.btn.primary:hover{background:var(--green-h)}

.btn.outline{background:var(--green-wash);color:var(--green-deep);border-color:transparent}
.btn.outline:hover{background:var(--green-tint2)}
.btn.quiet{background:var(--feld);color:var(--ink-soft);border-color:transparent}
.btn.quiet:hover{background:var(--feld-h);color:var(--ink)}
.btn.danger{background:var(--warn-tint);color:var(--warn);border-color:transparent}
.btn.danger:hover{background:#F2E7D5}
/* Tertiaer: gar kein Behaelter, bis man darauf zeigt. */
.btn.text{background:none;border-color:transparent;color:var(--grey-mid);padding-inline:var(--s3)}
.btn.text:hover{background:var(--f8);color:var(--ink)}

.btn.sm{min-height:36px;padding:0 var(--s4);font-size:13px}
/* Die weite untere Ecke ist an einer 44 Pixel hohen Flaeche gemessen. An
   einer 36 Pixel hohen wuerde derselbe Radius die Form zum Blatt machen. */
.btn.primary.sm{border-radius:6px 0 14px 6px}

/* Kleine Schaltflaechen auf dem Telefon.
   36 Pixel sind mit der Maus bequem und mit dem Daumen zu wenig — „Genehmigen"
   und „Ablehnen" stehen nebeneinander, und danebengetippt heisst hier das
   Gegenteil. Die Regel steht bewusst *hinter* `.btn.sm`: bei gleicher
   Gewichtung entscheidet die Reihenfolge, und davor haette sie nichts getan. */
@media (pointer: coarse){
  .btn.sm{min-height:44px}
  .chip{min-height:44px}

  /* Aufklapper sind Bedienelemente wie ein Knopf, hatten aber als einzige
     keine Mindesthoehe. Auf 390 Pixeln gemessen: „Menue" 42, „Filter" 31,
     „Termin eintragen" 29, „Aendern" 20 Pixel. Unter 44 tippt der Daumen
     daneben, und bei „Aendern" liegt darunter die naechste Zeile der
     Tabelle — danebentippen heisst dort, etwas anderes aufzuklappen.
     Die Flaeche waechst, die Schrift nicht: Groesse, Farbe und Umbruch
     bleiben, nur der Innenabstand reicht weiter. Am Schreibtisch aendert
     sich nichts, die Regel gilt nur fuer grobe Zeiger. */
  .navtoggle{min-height:44px}
  .wfilter > summary,
  .adminbox > summary,
  .artbearbeiten > summary{min-height:44px;padding-block:12px}
}
.btn.block{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed}

.arrowlink{font-weight:600;font-size:14px;color:var(--green-h);display:inline-flex;align-items:center;gap:6px}
.arrowlink::after{content:'→';transition:transform .18s ease}
.arrowlink:hover{text-decoration:none}
.arrowlink:hover::after{transform:translateX(3px)}

/* ---------- Formulare ----------
   Der Antrag auf Urlaub, Krankheit und Freistellung ist das Formular, das
   jeder im Haus benutzt. Es soll sich hochwertig anfassen: hohe Felder, eine
   sehr dezente Flaeche statt eines Kastens, eine feine Umrandung, klare
   Beschriftungen, ruhiger Fokus, viel Innenabstand — und Auswahl- und
   Datumsfelder in derselben Sprache wie alles andere, nicht in der des
   Browsers.
   ------------------------------- */
.field{display:grid;gap:var(--s2);margin-bottom:var(--s5)}
.field label{font-size:13px;font-weight:600;color:var(--ink)}
/* Umschliesst das `label` das Feld selbst, traegt die Beschriftung ein `span`.
   Ohne diese Zeile saehe sie aus wie Fliesstext — und genau das war sie in den
   Formularen, die schon vorher so gebaut waren. */
.field > span:not(.help){font-size:13px;font-weight:600;color:var(--ink)}
.field .help{font-size:12.5px;color:var(--grey)}
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]):not([type=range]):not([type=color]),select,textarea{
  width:100%;min-height:50px;padding:13px var(--s4);border:1px solid transparent;border-radius:var(--r-ctl);
  background:var(--feld);font:inherit;font-size:15.5px;color:var(--ink);
  /* Eigene Zeilenhoehe statt der geerbten 1,55 des Fliesstextes.
     Ein Feld ist keine Textseite: 15,5 Pixel mal 1,55 ergeben eine 24 Pixel
     hohe Zeile, und sobald irgendwo eine feste Hoehe dazukommt, bleiben
     davon 22 uebrig — die fehlenden zwei Pixel sind die Unterlaenge von „g".
     Mit 1,35 passt die Zeile in jede Hoehe, die hier vorkommt. */
  line-height:1.35;
  transition:border-color var(--t-fast),background var(--t-fast),box-shadow var(--t-fast);
}
/* Der Textbereich ist die Ausnahme: dort steht Fliesstext, und der braucht
   den weiteren Zeilenabstand. */
textarea{min-height:104px;resize:vertical;line-height:1.55;padding-block:var(--s3)}
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):hover,
select:hover,textarea:hover{background:var(--feld-h)}

/* Das Kreuz zum Leeren eines Suchfeldes ist beim Browser blau und traegt
   seine eigene Form. In einer Oberflaeche mit einer Symbolfamilie faellt es
   auf wie ein fremder Buchstabe. */
input[type=search]::-webkit-search-cancel-button{
  -webkit-appearance:none;appearance:none;
  width:15px;height:15px;cursor:pointer;opacity:.45;
  background:no-repeat center/13px url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3.5 3.5l7 7M10.5 3.5l-7 7' stroke='%2371767E' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  transition:opacity var(--t-fast);
}
input[type=search]::-webkit-search-cancel-button:hover{opacity:.9}
/* Ruhiger Fokus: die Umrandung wird gruen, der Ring liegt sehr hell darum.
   Kein springender Rahmen, keine zweite Farbe. */
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--green);background:var(--white);
  box-shadow:0 0 0 3px var(--green-wash);
}
/* Der Platzhalter ist ein Beispiel, kein Text — er steht leiser als eine
   Eingabe. `text-overflow` waere die schoenere Loesung fuer zu lange
   Platzhalter, aber Chromium wendet sie auf Platzhalter nicht an; die
   Platzhalter selbst muessen also kurz genug sein. */
input::placeholder,textarea::placeholder{color:#9D97AB}
input[aria-invalid=true],select[aria-invalid=true]{border-color:#C08A55}

/* Auswahlfelder: kein Browser-Standardpfeil, sondern derselbe feine Haken wie
   ueberall sonst. Als Datenadresse eingebettet, weil die
   Sicherheitskopfzeile keine fremde Herkunft erlaubt. */
select{
  -webkit-appearance:none;appearance:none;
  padding-right:44px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%2371767E' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right var(--s4) center;
}
select::-ms-expand{display:none}
/* Ein mehrzeiliges Auswahlfeld traegt keinen Pfeil und keine feste Hoehe. */
select[multiple],select[size]:not([size="1"]){
  background-image:none;padding-right:var(--s4);min-height:0;
}

/* Datumsfelder. Der eingebaute Kalenderknopf laesst sich nicht ersetzen, aber
   beruhigen: gleiche Farbe, gleiche Groesse, gleicher Abstand wie der
   Auswahlhaken daneben. */
input[type=date],input[type=time]{padding-right:var(--s3)}
input[type=date]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator{
  opacity:.45;cursor:pointer;padding:4px;border-radius:5px;
  transition:opacity var(--t-fast),background var(--t-fast);
}
input[type=date]:hover::-webkit-calendar-picker-indicator,
input[type=time]:hover::-webkit-calendar-picker-indicator{opacity:.75}
input[type=date]::-webkit-calendar-picker-indicator:hover,
input[type=time]::-webkit-calendar-picker-indicator:hover{opacity:1;background:var(--green-wash)}
input[type=date]::-webkit-datetime-edit,
input[type=time]::-webkit-datetime-edit{padding:0;color:var(--ink)}
input[type=date]::-webkit-datetime-edit-fields-wrapper{padding:0}

/* Ankreuzfelder und Auswahlknoepfe in der Hausfarbe statt in der des
   Betriebssystems — sonst ist Blau die zweite Akzentfarbe der Oberflaeche. */
input[type=checkbox],input[type=radio]{accent-color:var(--green);width:17px;height:17px;cursor:pointer}

/* Dateiauswahl.
   Unbehandelt steht hier der Knopf des Browsers — auf einem englischen
   System sogar mit englischer Beschriftung („Choose File"), in einer Form
   und einer Schrift, die es sonst nirgends im Portal gibt. Der Knopf selbst
   laesst sich gestalten, seine Beschriftung nicht; deshalb bekommt er die
   Form der sekundaeren Schaltflaeche und das Feld ringsum dieselbe ruhige
   Flaeche wie jedes andere Eingabefeld. */
input[type=file]{
  width:100%;min-height:50px;padding:9px var(--s3);border:1px solid transparent;
  border-radius:var(--r-ctl);background:var(--feld);font:inherit;font-size:14px;
  color:var(--grey-mid);cursor:pointer;
  transition:border-color var(--t-fast),background var(--t-fast),box-shadow var(--t-fast);
}
input[type=file]:hover{background:var(--feld-h)}
input[type=file]:focus{outline:none;border-color:var(--green);background:var(--white);box-shadow:0 0 0 3px var(--green-wash)}
input[type=file]::file-selector-button{
  margin-right:var(--s3);border:1px solid var(--line);border-radius:7px;
  background:var(--white);color:var(--grey-mid);cursor:pointer;
  font-family:var(--sans);font-size:13px;font-weight:600;
  padding:9px var(--s4);
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast);
}
input[type=file]::file-selector-button:hover{background:var(--f8);border-color:#DED9EA;color:var(--ink)}

.err{font-size:12.5px;color:var(--warn);font-weight:500}
.formgrid{display:grid;gap:0 var(--s5);grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
fieldset{border:0;padding:0;margin:0 0 var(--s2)}
legend{font-size:13px;font-weight:600;color:var(--ink);padding:0;margin-bottom:var(--s3)}

/* ---------- Meldungen ---------- */
.flash{display:grid;gap:10px;margin-bottom:24px}
.note{
  border:1px solid var(--line-soft);border-left:2px solid var(--green);background:var(--white);
  border-radius:0 var(--r-ctl) var(--r-ctl) 0;padding:var(--s4) var(--s5);font-size:14.5px;color:var(--ink-soft);
}
.note.success{border-left-color:var(--green);background:var(--green-tint2)}
.note.error,.note.warn{border-left-color:var(--warn);background:var(--warn-tint)}
.note.info{border-left-color:var(--grey)}
.note strong{display:block;color:var(--ink);margin-bottom:2px;font-size:14px}

/* ---------- Status ---------- */
/* Status als dezentes Etikett, nicht als bunte Kapsel. Keine Umrandung —
   die Flaeche allein reicht, und ohne Rahmen fuegt sich das Etikett in die
   Zeile ein, statt aus ihr herauszuspringen. */
.pill{
  display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:6px;
  font-size:11.5px;font-weight:600;letter-spacing:.01em;border:1px solid transparent;white-space:nowrap;
  background:var(--f8);color:var(--grey-mid);
}
.pill.ok{background:var(--green-wash);color:var(--green-deep)}
.pill.requested{background:var(--f8);color:var(--grey-mid)}
.pill.approved{background:var(--green-wash);color:var(--green-deep)}
.pill.rejected{background:var(--warn-tint);color:var(--warn)}
.pill.cancelled{background:var(--f8);color:var(--grey)}
.pill.working{background:var(--green-wash);color:var(--green-deep)}
.pill.paused{background:var(--warn-tint);color:var(--warn)}
.pill.off{background:var(--f8);color:var(--grey)}

.delta{font-variant-numeric:tabular-nums;font-weight:600}
.delta.pos{color:var(--green-deep)}
.delta.zero{color:var(--grey)}
.delta.neg{color:var(--grey-mid)}

/* ---------- Tabellen, die auf dem Handy zu Karten werden ---------- */
/* Kein harter Tabellenkasten mehr. Die Tabelle steht auf der weissen Flaeche
   und wird von feinen waagerechten Linien gegliedert — senkrechte Linien und
   ein Rahmen ringsum machen aus Daten ein Gitter, und ein Gitter liest sich
   schwerer als eine Liste. */
.tablecard{background:var(--white);border:0;border-radius:var(--r-card);overflow-x:auto;padding:var(--s2) 0;
  container-type:inline-size}
/* Eine breite Tabelle darf seitlich scrollen, aber niemals die ganze Seite
   mitziehen. Ohne das steht die letzte Spalte ausserhalb des Bildschirms und
   niemand ahnt, dass sie existiert. */
.tablecard.wide{overflow-x:auto}
.tablecard.wide > table{min-width:70rem}
table.data{width:100%;border-collapse:collapse;font-size:14.5px}
/* Grosszuegige Zeilenhoehe, mehr Luft zwischen den Spalten, Trennlinien nur
   so kraeftig, dass das Auge der Zeile folgen kann. */
table.data th,table.data td{padding:var(--s4) var(--s5);text-align:left;border-bottom:1px solid var(--hairline)}
/* Der Kopf war ein graues Band mit Rahmen — die lauteste Zeile der Tabelle,
   obwohl in ihr keine Daten stehen. Jetzt nur noch Schrift und eine feine
   Linie darunter. */
table.data th{
  font-size:12.5px;letter-spacing:0;color:var(--grey);
  font-weight:600;background:none;border-bottom:1px solid var(--line);
  padding-block:var(--s3);
}
/* Eine Tabelle steht nicht immer in einer breiten Karte. Auf
   „Bewerbercoach → Einstellungen" hat sie eine halbe Seite: 428 Pixel
   Innenraum fuer vier Spalten. Bei 24 Pixeln Polster links und rechts gehen
   davon allein 192 fuer Luft drauf — die Tabelle wurde 528 Pixel breit und
   ragte 65 Pixel ueber ihre Karte hinaus, in die Karte daneben hinein. Auf
   dem Bild sah es aus, als sei „abschalten" zu „abschalte" abgeschnitten.
   Die Behaelterabfrage misst die Karte, nicht das Fenster — und genau darauf
   kommt es hier an. */
@container (max-width:640px){
  table.data th,table.data td{padding-inline:var(--s3)}
}
@container (max-width:520px){
  table.data th,table.data td{padding-inline:var(--s2)}
}
/* Nicht nur die Karte ist eng — manche Tabellen haben schlicht viele Spalten.
   Die Teamtabelle hat sieben: bei 24 Pixeln Polster links und rechts gehen
   336 Pixel der Zeile fuer Luft drauf, und der Rest reicht dann nicht mehr
   fuer einen Namen wie „Nilay-Minel Göktas". Ab sieben Spalten ruecken die
   Zellen deshalb enger zusammen — 16 statt 24 Pixel, das sind genau die 112,
   die fehlten. */
table.data:has(thead th:nth-child(7)) th,
table.data:has(thead th:nth-child(7)) td{padding-inline:var(--s4)}
table.data tbody tr:last-child td{border-bottom:0}
/* Kaum sichtbar — man soll die Zeile finden, unter der der Zeiger steht,
   und nicht bemerken, dass sich etwas faerbt. */
table.data tbody tr{transition:background var(--t-fast)}
table.data tbody tr:hover{background:var(--f8)}
/* Eine Zahl bricht nicht um. „0:00 h" auf zwei Zeilen ist keine Zahl mehr,
   sondern ein Absatz — und in einer Spalte voller Zahlen faellt genau die
   eine auf, die umgebrochen ist. */
table.data td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
table.data th.num,table.data td.num{width:1%}
/* Auch die Ueberschrift einer Zahlenspalte bleibt einzeilig — sonst ist die
   Spalte breiter als ihr Inhalt und der Text daneben enger als noetig. */
table.data th.num{white-space:nowrap}
table.data td .sub{display:block;font-size:12.5px;color:var(--grey);margin-top:2px}
/* Der Name in der fuehrenden Zelle bricht nicht um. Sollte er einmal
   wirklich zu lang sein, rollt die Karte sichtbar — das ist ehrlicher als
   ein Name, der auf zwei Zeilen zerfaellt. */
table.data td:first-child > a > strong,
table.data td:first-child > strong{white-space:nowrap}
table.data tr.is-weekend td,table.data tr.is-holiday td{color:var(--grey);background:#FCFBFE}
table.data a.row-edit{color:var(--grey);font-size:13px}
table.data a.row-edit:hover{color:var(--green-h)}

/* Kennzahlkacheln stehen auf dem Telefon zu zweit nebeneinander.
   Einspaltig braucht ein Satz aus vier Kacheln 375 Pixel — fast einen halben
   Bildschirm, bevor der eigentliche Inhalt ueberhaupt beginnt, und das auf
   jeder Seite, die mit Zahlen anfaengt. Nebeneinander sind es rund 190.
   Die Bedingung `:has(> .metric)` ist kein Schmuck: dasselbe Raster traegt an
   anderer Stelle Formularfelder, und zwei Eingabefelder nebeneinander sind
   auf 390 Pixeln nicht zu bedienen. Die bleiben untereinander. */
@media (max-width:760px){
  .cols-4:has(> .metric){grid-template-columns:1fr 1fr}
}

@media (max-width:760px){
  table.data thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  table.data,table.data tbody,table.data tr,table.data td{display:block;width:100%}
  table.data tr{border-bottom:1px solid var(--hairline);padding:var(--s4) var(--s5)}
  table.data tr:last-child{border-bottom:0}
  table.data td{border:0;padding:var(--s1) 0;display:flex;justify-content:space-between;gap:var(--s4);align-items:baseline}
  /* Ohne `min-width:0` schrumpft ein langer Wert in einer Flexzeile nicht,
     sondern schiebt die Zeile ueber den Rand — und mit ihr die ganze Seite.
     Auf 390 Pixeln Breite faellt das sofort auf: die Seite laesst sich
     seitlich ziehen, ohne dass dort etwas steht. */
  table.data td > *{min-width:0;overflow-wrap:anywhere}
  table.data td::before{
    content:attr(data-label);font-size:12.5px;
    color:var(--grey);font-weight:500;flex:0 0 auto;
  }
  table.data td:first-child{
    font-weight:600;color:var(--ink);font-size:15px;margin-bottom:8px;
    padding-bottom:8px;border-bottom:1px solid var(--line-soft);
  }
  table.data td:first-child::before{content:''}

  /* `td.num{width:1%}` macht die Zahlenspalte am Rechner so schmal wie
     möglich — genau richtig für eine Tabelle. Im Telefonlayout ist jede
     Zelle aber eine eigene Zeile, und aus dem einen Prozent werden drei
     Pixel. Mit einer bloßen Zahl darin fiel das nie auf: sie läuft über und
     sieht trotzdem richtig aus. Mit einem Eingabefeld darin stand der Knopf
     plötzlich halb außerhalb seiner Zelle. */
  table.data td.num{width:auto}
}

/* ---------- Leere Zustaende ---------- */
.empty{text-align:center;padding:clamp(32px,6vw,60px) 24px;display:grid;gap:12px;justify-items:center}
.empty h3{font-family:var(--serif);font-weight:400;font-size:1.35rem;color:var(--ink)}
.empty p{color:var(--grey);max-width:44ch;font-size:14.5px}
.empty .btn{margin-top:8px}

/* ---------- Anmeldung ---------- */
.authpage{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--page)}
.authbox{width:100%;max-width:400px}
.authbox .brand{justify-content:center;margin-bottom:28px}
.authbox .card{padding:clamp(26px,4vw,36px)}
.authbox h1{font-size:1.6rem;margin-bottom:6px}
.authbox .intro{color:var(--grey);font-size:14.5px;margin-bottom:24px}
.authfoot{text-align:center;margin-top:20px;font-size:12.5px;color:var(--grey)}

/* ---------- Fehlerseite ---------- */
.errorpage{min-height:100vh;display:grid;place-items:center;padding:24px;text-align:center}
.errorpage .code{font-family:var(--serif);font-size:3.5rem;color:var(--green-tint);line-height:1}
.errorpage h1{font-size:1.7rem;margin:8px 0 10px}
.errorpage p{color:var(--grey);max-width:44ch;margin:0 auto 22px}

/* ---------- Kleinteiliges ---------- */
.divider{height:1px;background:var(--line);border:0;margin:24px 0}
.rowbetween{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.inline-form{display:inline}
.list-reset{list-style:none;margin:0;padding:0}
.entrylist{display:grid;gap:10px}
.entryrow{display:flex;justify-content:space-between;gap:14px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--line-soft);font-size:14px}
.entryrow:last-child{border-bottom:0}
/* Umbrechen erlaubt. Unter „Bewerbungen" stehen hier zehn Standfilter;
   ohne Umbruch schob die Reihe die Seite waagerecht ueber den Rand. */
.monthnav{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.monthnav .label{font-weight:600;color:var(--ink);min-width:9ch;text-align:center}
.auditlist{display:grid;gap:0}
.auditrow{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:11px 0;border-bottom:1px solid var(--line-soft);font-size:13.5px}
.auditrow:last-child{border-bottom:0}
.auditrow .when{color:var(--grey);font-variant-numeric:tabular-nums;white-space:nowrap}
.auditrow .what strong{font-weight:600;color:var(--ink)}
.auditrow .what .chg{color:var(--grey)}

.seedbadge{
  display:inline-block;margin-left:8px;padding:2px 8px;border-radius:6px;background:var(--warn-tint);
  color:var(--warn);font-size:11px;font-weight:600;border:1px solid #E7DAC5;
}

@media (max-width:960px){
  /* Auf schmalen Geräten hätte eine feste Leiste zu wenig Platz neben sich.
     Sie wird deshalb wieder zur Kopfzeile, das Menü klappt auf Knopfdruck auf. */
  .shell{display:block}
  .sidebar{
    position:sticky;top:0;height:auto;width:auto;flex:none;overflow:visible;
    flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px;
    border-right:0;border-bottom:1px solid var(--line-soft);padding:12px 16px;
  }
  .sidebar-head{flex:1 1 auto;padding:0}
  .navtoggle{display:block}
  .mainnav{order:3;width:100%;display:none;border-top:1px solid var(--line-soft);padding-top:10px}
  .mainnav.open{display:flex}
  .mainnav a{padding:13px 14px;font-size:15.5px}
  .usermenu{
    order:2;margin-top:0;flex-direction:row;align-items:center;gap:12px;
    border-top:0;padding:0;width:auto;
  }
  .usermenu .who{display:none}
  .brand .sub{display:none}
  .timer{gap:22px}
  .actions .btn{flex:1 1 100%}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---------------------------------------------------------------------------
   Teamkalender
   Bewusst zurückhaltend: ein Punkt sagt „abwesend", ein Ring „Homeoffice".
   Keine Farbcodierung nach Abwesenheitsart — aus einer Farbskala ließe sich
   sonst ablesen, wer krank ist, und genau das soll der Kalender nicht verraten.
--------------------------------------------------------------------------- */
.calgrid { border-collapse: collapse; font-size: .82rem; }
.calgrid th, .calgrid td { border: 1px solid var(--line, #E4DFEE); }
.calgrid .calhead {
  width: 1.85rem; min-width: 1.85rem; padding: 4px 0; text-align: center;
  font-weight: 500; line-height: 1.15;
}
.calgrid .calhead .cd { display: block; font-variant-numeric: tabular-nums; }
.calgrid .calhead .cw { display: block; font-size: .66rem; opacity: .55; }
.calgrid .calhead.off, .calgrid .calcell.off { background: #F4F1FA; }
/* Der heutige Tag wird eingefärbt, nicht umrandet. Eine Umrandung je Zelle
   zerfällt in der Senkrechten zu einer gestrichelten Linie. */
.calgrid .calhead.today, .calgrid .calcell.today { background: #E8DFF9; }
.calgrid .calhead.today { font-weight: 700; color: var(--green-deep, #2E1A5C); }
.calgrid .calcell { text-align: center; padding: 6px 0; color: transparent; }
.calgrid .calcell.absent { color: var(--ink, #2E1A5C); background: #E2D8F6; }
.calgrid .calcell.remote { color: var(--accent, #7A4DD1); }

/* Die Namensspalte bleibt stehen.
   Der Kalender springt beim Öffnen auf den heutigen Tag; ohne diese Regel
   schiebt sich die Namensspalte dabei aus dem Bild, und es steht ein Raster
   ohne Beschriftung da. */
.calgrid th:first-child, .calgrid td:first-child {
  position: sticky; left: 0; z-index: 2;
  background: var(--white, #fff);
  box-shadow: 1px 0 0 var(--line, #E4DFEE);
}

.callegend { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 14px; font-size: .82rem; opacity: .75; }
.callegend .dot { display: inline-block; width: 1.1rem; text-align: center; }
.callegend .dot.absent { color: var(--ink, #2E1A5C); }
.callegend .dot.remote { color: var(--accent, #7A4DD1); }
.callegend .dot.off { background: #F4F1FA; }

/* Ankreuzfeld mit Beschriftung auf einer Zeile */
.checkline { display: flex; align-items: flex-start; gap: 10px; font-weight: 500; cursor: pointer; }
.checkline input { margin-top: .25rem; }

/* Zwei Auswahlfelder nebeneinander, etwa Tag und Monat beim Geburtstag.
   Auf schmalen Geraeten untereinander, sonst wird der Monat unlesbar kurz. */
.inline-fields { display: flex; gap: 8px; flex-wrap: wrap; }
.inline-fields select { flex: 1 1 8rem; min-width: 6rem; }

/* ---------------------------------------------------------------------------
   Profilbild
   Ohne Foto stehen die Initialen da — nie ein leerer Kasten und nie eine
   Platzhaltersilhouette, die aussieht, als fehlte etwas.
--------------------------------------------------------------------------- */
/* Die Initialen tragen die Flaeche, also duerfen sie nicht in ihr
   verschwinden: gedaempfte gruene Flaeche, dunkelgruene Schrift, leicht
   gesperrt. Zwei Buchstaben auf zwei Zentimetern werden sonst zu einem
   Fleck. */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden; border-radius: 50%; background: var(--green-wash);
  color: var(--green-deep); font-weight: 600; flex: 0 0 auto;
  letter-spacing: .03em; text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgba(122,77,209,.14);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.sm { width: 2rem; height: 2rem; font-size: .72rem; }
.avatar.md { width: 2.5rem; height: 2.5rem; font-size: .9rem; }
.avatar.lg { width: 8rem; height: 8rem; font-size: 2rem; }
/* Der Name neben dem Bild.
   Als reiner Fliesstext brach der Name mitten im Wort um und floss um das
   runde Bild herum — „Eigene" oben rechts, „Angabe" darunter links. Als
   eigener Block bricht er als Ganzes in die naechste Zeile, wenn die Spalte
   zu schmal wird. Die Zelle bleibt dabei eine Tabellenzelle: macht man sie
   zu einer Flexbox, verliert die Zeile ihre gemeinsame Grundlinie und die
   Trennlinien stehen versetzt. */
.data .avatar.sm { margin-right: 9px; vertical-align: middle; }
table.data td:first-child > a{display:inline-block;vertical-align:middle;max-width:calc(100% - 3rem)}
/* Eine Zelle mit Profilbild ist eine Personenzelle, und ein Personenname
   bricht nicht um. Live gefunden an „Nilay-Minel Göktas": der Name stand auf
   drei Zeilen, weil der Browser am Bindestrich trennt — waehrend rechts in
   derselben Zeile Platz frei blieb. In den Testdaten heissen alle „Eigene
   Angabe", zwei Woerter, kein Bindestrich; der Fall kam dort nicht vor.
   Die Begrenzung auf `calc(100% - 3rem)` muss dabei weg: zusammen mit
   `nowrap` schnitte sie den Namen ab, statt ihn stehen zu lassen. */
table.data td:first-child:has(> .avatar) > a{white-space:nowrap;max-width:none}

/* ===========================================================================
   Intranet-Ausbau: Kopfleiste, Wissen, Aktuelles, Team, Aufgaben
   ===========================================================================
   Die Bausteine folgen dem, was schon da war: helle Flächen, eine Linie statt
   eines Rahmens, Grün nur dort, wo etwas passiert. Kein zweiter Kartenstil.
   ------------------------------------------------------------------------ */

/* ---------- Kopfleiste mit Suche und Glocke ---------- */
.topbar{
  display:flex;align-items:center;gap:12px;justify-content:flex-end;
  padding:14px clamp(18px,4vw,44px) 0;
}
/* `min-width:0` ist hier nicht Kosmetik: ohne diese Zeile schrumpft das
   Suchfeld auf dem Telefon nicht unter die Breite seines Platzhaltertextes,
   sondern schiebt sich nach links aus dem Bild — der Anfang der Zeile war
   abgeschnitten. */
.searchbox{
  display:flex;align-items:center;gap:9px;flex:1 1 auto;min-width:0;max-width:460px;
  background:var(--feld);border:1px solid transparent;border-radius:var(--r-ctl);
  padding:0 var(--s3);height:40px;transition:border-color var(--t-fast),background var(--t-fast);
}
.searchbox:focus-within{border-color:var(--green);background:var(--white);box-shadow:0 0 0 3px var(--green-wash)}
.searchbox svg{width:16px;height:16px;color:var(--grey);flex:0 0 16px}
.searchbox input{
  border:0;background:none;flex:1 1 auto;min-width:0;font:inherit;font-size:14px;
  color:var(--ink);padding:0;
}
.searchbox input:focus{outline:none}
.searchbox input::placeholder{color:var(--grey)}
.searchgo{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 16px;
  width:16px;height:16px;padding:0;border:0;background:none;color:var(--grey);
  cursor:pointer;border-radius:3px;transition:color var(--t-fast);
}
.searchgo:hover{color:var(--ink)}
.searchgo:focus-visible{outline:2px solid var(--green);outline-offset:3px}
/* Auf dem Telefon ist 16px zu klein zum Treffen. Die Flaeche waechst, das
   Bild bleibt — sonst sitzt eine fette Lupe in einem schmalen Feld. */
@media (pointer: coarse){
  /* 44px, nicht 40. Die eigene Pruefreihe misst genau das und hat den ersten
     Versuch mit 41px zurueckgewiesen — zu Recht: unter 44px trifft ein Daumen
     unzuverlaessig. */
  .searchgo{width:44px;height:44px;min-height:44px;flex:0 0 44px;margin-left:-14px}
}

.bell{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:var(--r-ctl);background:var(--feld);
  border:1px solid transparent;color:var(--grey-mid);flex:0 0 40px;text-decoration:none;
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast);
}
.bell:hover{color:var(--ink);background:var(--feld-h);text-decoration:none}
.bell svg{width:18px;height:18px}
.bell .count{
  position:absolute;top:-3px;right:-3px;min-width:17px;height:17px;padding:0 4px;
  border-radius:9px;background:var(--green);color:#fff;font-size:10.5px;font-weight:600;
  display:flex;align-items:center;justify-content:center;line-height:1;
}
@media (max-width:960px){
  .topbar{padding-top:10px}
  .searchbox{max-width:none}
}

/* ---------- Brotkrumen ---------- */
.crumbs{display:flex;flex-wrap:wrap;gap:7px;align-items:center;font-size:13px;margin-bottom:14px;color:var(--grey)}
.crumbs a{color:var(--grey-mid);text-decoration:none}
.crumbs a:hover{color:var(--green-h);text-decoration:underline}
.crumbs .here{color:var(--ink);font-weight:500}

/* ---------- Suchkarte ---------- */
.searchcard{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.searchcard input[type=search]{
  flex:1 1 260px;min-width:0;height:48px;border:1px solid transparent;
  border-radius:var(--r-ctl);padding:0 var(--s4);font:inherit;font-size:15px;background:var(--feld);
}
.searchcard input[type=search]:focus{outline:none;border-color:var(--green);background:var(--white);box-shadow:0 0 0 3px var(--green-wash)}
.searchcard .help{flex:1 1 100%;margin:0}

/* ---------- Ordner ---------- */
.folders{display:grid;gap:var(--s3)}
@media (min-width:620px){.folders{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.folders{grid-template-columns:repeat(3,minmax(0,1fr))}}
.folder{
  display:grid;grid-template-columns:22px 1fr;grid-auto-rows:min-content;gap:2px 10px;
  padding:var(--s4) var(--s4);border:1px solid var(--line-soft);border-radius:var(--r-ctl);
  background:var(--white);text-decoration:none;color:var(--ink);
  transition:border-color var(--t-fast),background var(--t-fast);
}
.folder:hover{border-color:var(--line);background:var(--f8);text-decoration:none}
.folder svg{width:20px;height:20px;grid-row:1/3;color:var(--green);align-self:start;margin-top:2px}
.folder .fname{font-weight:600;font-size:14.5px}
.folder .fdesc{font-size:12.5px;color:var(--grey);grid-column:2}
.folder .fcount{font-size:11.5px;color:var(--grey);grid-column:2;margin-top:4px}
.folder .tag{grid-column:2;margin-top:4px}

/* ---------- Dokumentliste, Trefferliste ---------- */
.doclist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.doclist li{display:flex;align-items:baseline;gap:var(--s3);padding:var(--s3) 0;border-bottom:1px solid var(--hairline)}
.doclist li:last-child{border-bottom:0}

/* Das Schild vor einem Dokumententitel. Feste Breite, damit die Titel
   untereinander an derselben Stelle beginnen — sonst franst die Liste aus. */
.dtitel{display:flex;align-items:flex-start;gap:9px;min-width:0}
.dtitel > span{min-width:0}
.dart{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:22px;border-radius:5px;
  font-size:9.5px;font-weight:700;letter-spacing:.05em;
  background:var(--f8);color:var(--grey);border:1px solid var(--line-soft);
  position:relative;top:1px;
}
/* Frueher fuenf Farben: rot, blau, gruen, braun, violett — nebeneinander in
   einer Liste sah das aus wie ein Ordnerregister aus dem Buerobedarf. Die
   Kuerzel „PDF", „DOC" stehen ohnehin da und sagen dasselbe schneller. Was
   bleibt, ist eine Form, keine Ampel. */
.dart.d-pdf,.dart.d-text,.dart.d-tabelle,.dart.d-folie,.dart.d-bild,.dart.d-paket{
  background:var(--f8);border-color:var(--line-soft);color:var(--grey);
}
.doclist .tag{margin-left:auto;font-size:11px;color:var(--grey);white-space:nowrap}

.results{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.results li{padding:var(--s5) 0;border-bottom:1px solid var(--hairline)}
.results li:first-child{padding-top:0}
.results li:last-child{border-bottom:0;padding-bottom:0}
.rtitle{font-size:15.5px;font-weight:600;color:var(--ink);text-decoration:none}
.rtitle:hover{color:var(--green-h)}
.rsnip{margin:5px 0 0;font-size:13.5px;color:var(--grey-mid);max-width:78ch}
.rmeta{margin:6px 0 0;font-size:12px;color:var(--grey);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
mark{background:var(--green-tint2);color:var(--green-deep);padding:0 3px;border-radius:3px}

/* ---------- Dokumentkopf und Faktenliste ---------- */
.doc-head{display:flex;gap:18px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;margin-bottom:16px}
.doc-head .actions{flex:0 0 auto}
.facts{display:grid;gap:1px;margin:0;background:var(--hairline);border:1px solid var(--line-soft);border-radius:var(--r-ctl);overflow:hidden}
@media (min-width:640px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Begriff und Wert in einer Zeile — und wenn der Platz nicht reicht, rutscht
   der ganze Wert in die naechste Zeile statt mitten im Wort zu brechen.
   „ohne Angabe" stand sonst als „ohne" / „Angabe" untereinander, waehrend
   der laengere Nachbarwert „30 Tage / Jahr" einzeilig blieb. */
.facts > div{background:var(--white);padding:var(--s3) var(--s4);display:flex;gap:var(--s2) var(--s3);
  justify-content:space-between;align-items:baseline;flex-wrap:wrap}
.facts dd{white-space:nowrap}
.facts dt{font-size:12px;color:var(--grey);margin:0}
.facts dd{margin:0;font-size:13.5px;text-align:right;margin-left:auto}

/* ---------- Aktuelles ---------- */
.events{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.events li{display:flex;gap:var(--s4);align-items:flex-start;padding:var(--s4) 0;border-bottom:1px solid var(--hairline);flex-wrap:wrap}
.events li:last-child{border-bottom:0}
.edate{
  flex:0 0 54px;text-align:center;background:var(--green-wash);border-radius:var(--r-ctl);
  padding:var(--s2) 0;line-height:1.15;
}
.edate .d{display:block;font-size:1.2rem;font-weight:600;color:var(--green-deep);font-variant-numeric:tabular-nums}
.edate .m{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--green)}
.ebody{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:2px}
.ebody .et{font-weight:600;font-size:14.5px}
.ebody .em{font-size:12.5px;color:var(--grey)}
.ebody .ed{font-size:13px;color:var(--grey-mid);margin-top:3px}
.eact{display:flex;gap:10px;align-items:center;flex:0 0 auto;margin-left:auto}

.postlist{display:flex;flex-direction:column;gap:0}
.post{padding:var(--s6) 0;border-bottom:1px solid var(--hairline)}
.post:first-child{padding-top:0}
.post:last-child{border-bottom:0;padding-bottom:0}
.pmeta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12px;margin-bottom:6px}
.ptitle{font-family:var(--serif);font-weight:400;font-size:1.28rem;margin:0 0 6px;letter-spacing:-.01em}
.pbody{font-size:14.5px;color:var(--grey-mid);max-width:74ch}

.adminbox{margin-top:var(--s6);border-top:1px solid var(--line-soft);padding-top:var(--s4)}
.adminbox > summary{
  cursor:pointer;font-size:13.5px;font-weight:600;color:var(--green-h);
  list-style:none;padding:4px 0;
}
.adminbox > summary::-webkit-details-marker{display:none}
.adminbox > summary::before{content:"+ ";font-weight:700}
.adminbox[open] > summary::before{content:"– "}
.adminbox > form{margin-top:14px}

/* ---------- Team: Profilkarten ---------- */
.people{display:grid;gap:var(--s4)}
@media (min-width:620px){.people{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.people{grid-template-columns:repeat(3,minmax(0,1fr))}}
.person{
  background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r-card);
  padding:var(--s5);display:flex;flex-direction:column;gap:2px;min-width:0;
}
.ptop{position:relative;width:5rem;height:5rem;margin-bottom:12px}
.ptop .avatar.lg{width:5rem;height:5rem;font-size:1.25rem}
.statusdot{position:absolute;right:2px;bottom:2px;width:14px;height:14px;border:2px solid var(--white);border-radius:50%}
.pname{margin:0;font-size:1.02rem;font-weight:600}
.ppos{margin:2px 0 0;font-size:13.5px;color:var(--grey-mid)}
.pdep{margin:1px 0 0;font-size:12.5px;color:var(--grey)}
.pstate{margin:10px 0 0;font-size:13px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.pnote{margin:6px 0 0;font-size:13px;color:var(--grey-mid);font-style:italic}
.pcontact{display:flex;flex-direction:column;gap:3px;margin:12px 0 14px}
.pcontact > div{display:flex;gap:8px;justify-content:space-between;font-size:12.5px}
.pcontact dt{color:var(--grey);margin:0}
.pcontact dd{margin:0;text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis}
.person .btn{align-self:flex-start;margin-top:auto}

.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--grey);flex:0 0 9px}
.dot.ok{background:#7A4DD1}
.dot.warn{background:#D3A03C}
.dot.stop{background:#C0565A}
.dot.off{background:#B8C2BB}

.statuspick{display:grid;gap:8px;margin-bottom:14px}
@media (min-width:640px){.statuspick{grid-template-columns:repeat(4,minmax(0,1fr))}}
.statusopt{
  display:grid;grid-template-columns:12px 1fr;gap:3px 9px;align-items:center;
  border:1px solid transparent;border-radius:var(--r-ctl);padding:12px var(--s4);cursor:pointer;
  background:var(--feld);
  transition:border-color var(--t-fast),background var(--t-fast);
}
.statusopt:hover{background:var(--feld-h)}
.statusopt:has(input:checked){border-color:var(--green-tint);background:var(--green-wash)}
.statusopt input{grid-row:1/3;margin:0;opacity:0;width:0;height:0;position:absolute}
.statusopt .dot{grid-column:1}
.statusopt .sl{font-size:13.5px;font-weight:600}
.statusopt .sh{grid-column:2;font-size:11.5px;color:var(--grey);line-height:1.3}

/* ---------- Aufgaben ---------- */
.tasks{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:1px}
.task{display:flex;gap:var(--s3);align-items:baseline;padding:var(--s3) 0;border-bottom:1px solid var(--hairline);flex-wrap:wrap}
.task:last-child{border-bottom:0}
.task .tcat{
  flex:0 0 auto;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green);font-weight:600;min-width:5.5rem;
}
.task .ttext{flex:1 1 220px;min-width:0;font-size:14px}
.task .tmeta{display:flex;gap:6px;align-items:center;flex:0 0 auto}
.task .tact{display:flex;gap:10px;align-items:center;flex:0 0 auto;margin-left:auto}
.task.st-open .ttext{color:var(--ink)}
.task.st-done .ttext{color:var(--grey-mid)}

.taskform{border-top:1px solid var(--line-soft);padding-top:var(--s5);margin-top:var(--s5)}
.taskrow{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.taskrow .field{margin:0;flex:0 0 auto}
.taskrow .field.grow{flex:1 1 240px;min-width:0}
.taskrow .field.narrow{flex:0 0 90px}
.taskrow .field.narrow input{width:90px}
/* Feste Hoehe *und* der allgemeine Innenabstand von 13 Pixeln oben und unten
   ergeben zusammen mehr, als in 44 Pixel passt — die Unterlaengen von „g"
   und „j" wurden abgeschnitten. Bei fester Hoehe uebernimmt die Zeilenhoehe
   die Zentrierung. */
.taskrow select,.taskrow input{height:44px;min-height:44px;padding-block:0}

.carry{background:var(--green-wash);border-radius:var(--r-ctl);padding:var(--s4) var(--s5);margin-bottom:var(--s5)}
.carry p{margin:0 0 8px}
.carrylist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.carrylist li{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;font-size:13.5px}
.carrylist .ct{flex:1 1 200px;min-width:0}
.carrylist .cd{font-size:11.5px;color:var(--grey)}

/* ---------- Balken ---------- */
.bars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.bars li{display:grid;grid-template-columns:9rem 1fr 6rem;gap:12px;align-items:center;font-size:13px}
.bars .bt{background:var(--line-soft);border-radius:999px;height:6px;overflow:hidden}
.bars .bf{display:block;height:100%;background:var(--green);border-radius:999px;transition:width var(--t)}
.bars .bn{text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:560px){.bars li{grid-template-columns:1fr;gap:3px}.bars .bn{text-align:left}}

/* ---------- Benachrichtigungen ---------- */
.notes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.notes li{display:flex;gap:var(--s3);align-items:baseline;padding:var(--s3) 0;border-bottom:1px solid var(--hairline)}
.notes li:last-child{border-bottom:0}
.notes li.unread{font-weight:600}
.notes li.unread::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);flex:0 0 6px}
.notes .tag{margin-left:auto;font-size:11.5px;color:var(--grey);font-weight:400;white-space:nowrap}
/* Eine Nachricht bringt Fliesstext mit. Er gehoert unter die Zeile und nicht
   daneben, sonst quetscht er das Datum aus der Reihe. */
.notes li{flex-wrap:wrap}
.notes .ntext,.notes .nvon{flex:1 0 100%;order:2;font-weight:400}
.notes .tag{order:1}
.ntext{
  margin:2px 0 0;color:var(--ink-soft);font-size:13.5px;line-height:1.55;
  max-width:72ch;white-space:normal;
}
.nvon{font-size:11.5px;color:var(--grey);font-weight:400}

/* ---------- Fließtext (Datenschutz) ---------- */
.prose h3{font-family:var(--sans);font-size:1rem;font-weight:600;margin:26px 0 8px}
.prose h3:first-child{margin-top:0}
.prose p{max-width:74ch;font-size:14.5px;color:var(--grey-mid)}
.prose ul{max-width:74ch;font-size:14.5px;color:var(--grey-mid)}
.prose strong{color:var(--ink)}
textarea.mono{font-family:ui-monospace,'SFMono-Regular',Menlo,monospace;font-size:13px;line-height:1.6}

/* ---------- Kleinteile ---------- */
.lineitem{font-size:14px;margin:0 0 8px;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.pill.ok{background:var(--green-tint);color:var(--green-deep)}
.pill.warn{background:#F6EEDC;color:#8A6118}
/* Der ausgewaehlte Filter. Vorher die kraeftige gruene Flaeche — dieselbe,
   die auch der aktive Menuepunkt trug. Zwei verschieden wichtige Dinge in
   derselben Lautstaerke sind eine Auskunft weniger, nicht mehr. */
.btn.quiet.on{background:var(--green-wash);color:var(--green-deep);border-color:transparent}
.btn.quiet.on:hover{background:var(--green-tint2);color:var(--green-deep)}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------- Öffentliche Seiten (Stellen, Bewerbung) ----------
   Dieselbe Hülle wie die Anmeldung, nur breiter: eine Ausschreibung und ein
   Bewerbungsformular brauchen mehr als 400 px, sonst wird der Text zur Säule. */
.authbox.wide{max-width:44rem}
.authbox.wide .card{text-align:left}
.jobtext{white-space:pre-line;line-height:1.65;margin:0 0 22px}
.jobmeta{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 22px;font-size:13.5px;color:var(--grey)}
.jobmeta strong{color:var(--ink);font-weight:600}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Personenauswahl im Wissen.
   Eine kurze Liste mit Haken, mehrspaltig, damit neun Namen nicht neun Zeilen
   Hoehe kosten. Bewusst keine Suchbox: bei einem Team dieser Groesse ist eine
   Suche ueber neun Namen mehr Bedienung als Nutzen. */
/* Frueher ein Rahmen mit der Beschriftung in der oberen Kante — die einzige
   Stelle im Portal, die noch nach Standardformular aussah. Jetzt eine ruhige
   Flaeche mit der Beschriftung darueber, wie jedes andere Feld auch. */
.kb-personen{border:0;border-radius:var(--r-ctl);background:var(--sunk);
  padding:var(--s4) var(--s5) var(--s3);margin:var(--s1) 0 var(--s2)}
.kb-personen legend{padding:0;margin-bottom:var(--s3);font-size:13px;font-weight:600;color:var(--ink)}
.kb-personen-liste{display:grid;gap:var(--s2) var(--s5);
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));margin-bottom:var(--s3)}
.kb-personen .checkline{display:flex;gap:9px;align-items:center;font-weight:400;margin:0}
.kb-personen .help{display:block;margin:0}

/* ---------- Ressourcen ----------
   Eine Liste, kein Kachelfeld: eine Adresse wird gelesen, nicht angeschaut,
   und ein Name mit einem Satz darunter ist schneller erfasst als ein Logo in
   einem Quadrat. Das Sternchen sitzt links, weil es zur Zeile gehoert und
   nicht zur Handlung. */
.linkliste{list-style:none;margin:0;padding:0}
.linkliste > li{display:flex;align-items:flex-start;gap:12px;
  padding:13px 2px;border-bottom:1px solid var(--line-soft)}
.linkliste > li:last-child{border-bottom:0}
.linkliste > li.linkbearbeiten{display:block;padding:0 0 10px;border-bottom:1px solid var(--line-soft)}

.linkstern{flex:0 0 auto;margin-top:1px}
.sternknopf{background:none;border:0;padding:3px;cursor:pointer;color:var(--line);
  display:flex;line-height:0;border-radius:var(--r-soft)}
.sternknopf svg{width:19px;height:19px}
.sternknopf:hover{color:var(--green)}
.sternknopf.an{color:var(--green)}

.linkziel{flex:1 1 auto;min-width:0;display:block;text-decoration:none;color:inherit}
.linkziel:hover{text-decoration:none}
.linkziel .lt{display:block;font-weight:600;font-size:15px;color:var(--ink)}
.linkziel:hover .lt{color:var(--green-h);text-decoration:underline;text-underline-offset:.18em}
.linkziel .lb{display:block;font-size:13.5px;color:var(--grey);margin-top:1px}
.linkziel .lh{display:block;font-size:12px;color:var(--grey);opacity:.75;margin-top:3px}

.linkmeta{flex:0 0 auto;display:flex;align-items:center;gap:10px;text-align:right;
  padding-top:2px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:620px){
  .linkmeta{width:100%;justify-content:flex-start;padding-left:43px;padding-top:6px}
  .linkziel .lh{display:none}
}

.linkbearbeiten summary{cursor:pointer;font-size:13px;color:var(--grey);
  padding:6px 0 6px 43px;list-style:none}
.linkbearbeiten summary::-webkit-details-marker{display:none}
.linkbearbeiten summary::before{content:"› ";color:var(--green)}
.linkbearbeiten details[open] summary::before{content:"⌄ "}
.linkbearbeiten summary:hover{color:var(--green-h)}
.linkbearbeiten > details > div{padding-left:43px}
@media (max-width:620px){
  .linkbearbeiten summary,.linkbearbeiten > details > div{padding-left:2px}
}

/* ---------- Startseite, Feinschliff ----------
   Die Seite hatte lauter gleich schwere Karten untereinander: der laufende
   Arbeitstag sah aus wie der Hinweis darunter. Drei Eingriffe, keine
   Umstrukturierung — die Reihenfolge stimmt, nur das Gewicht nicht.

   1. Die Karte mit der Uhr bekommt einen ruhigen Grund und einen schmalen
      gruenen Streifen an der linken Kante, solange die Zeit laeuft. Sie ist
      damit ohne ein einziges zusaetzliches Wort als das Wichtigste erkennbar.
   2. Die drei Zahlen darunter stehen auf der Seite statt in Kaesten. Ein
      Rahmen um eine Zahl, die niemand anklicken kann, ist Verpackung.
   3. Die Begruessung bekommt Luft. */
/* Der Verlauf ist weg: eine Farbe, die sich von oben nach unten aendert,
   ohne dass die Aenderung etwas bedeutet, ist Dekor. Was die Karte
   auszeichnet, ist ihr Raum — und der gruene Streifen, wenn die Uhr laeuft. */
.card.today{
  background:var(--white);
  padding-left:clamp(24px,3.6vw,44px);
}
.card.today::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--green);opacity:0;transition:opacity var(--t);
}
.card.today:has(.state:not(.idle))::before{opacity:1}

.pagehead h1{margin-bottom:2px}
main > .wrap > .pagehead:first-child{margin-bottom:clamp(18px,2.6vw,26px)}

/* Die drei Zahlen: Trennlinien statt Kaesten. */
.cols-3 > .metric{
  background:transparent;border:0;border-left:1px solid var(--hairline);
  border-radius:0;padding:4px 0 4px 20px;
}
.cols-3 > .metric:first-child{border-left:0;padding-left:0}
@media (max-width:760px){
  .cols-3 > .metric{border-left:0;border-top:1px solid var(--hairline);padding:14px 0 0}
  .cols-3 > .metric:first-child{border-top:0;padding-top:0}
}

/* ---------- Willkommensbereich ----------
   Text links, Bild rechts, in einem Band statt in einer Karte: es ist keine
   Information, die man anklickt, sondern der Rahmen, in dem der Tag beginnt.
   Die Hoehe ist bewusst begrenzt — was jeden Morgen erscheint, darf nicht
   jeden Morgen scrollen kosten. */
/* Frueher ein gruener Verlauf. Ein Verlauf ist eine Farbe, die sich nicht
   entscheiden kann — und er ist das Erste, was man morgens sieht. Jetzt eine
   ruhige weisse Flaeche wie jede andere; die Begruessung traegt sich ueber
   die Schrift, nicht ueber den Hintergrund. */
.willkommen{
  display:grid;gap:clamp(24px,3vw,40px);align-items:center;
  grid-template-columns:1fr;
  background:var(--white);
  border:1px solid var(--line-soft);border-radius:var(--r-surface);
  padding:clamp(28px,3.6vw,44px);
  margin-bottom:var(--gap);
  overflow:hidden;
}
@media (min-width:820px){
  .willkommen{grid-template-columns:minmax(0,1fr) minmax(240px,340px)}
}
.willkommen .wtext{min-width:0}
.willkommen h1{margin:0}
.willkommen .eyebrow{margin-bottom:8px}
.willkommen .leitsatz{
  margin-top:12px;font-family:var(--serif);font-size:clamp(1.05rem,.95rem + .5vw,1.3rem);
  line-height:1.35;color:var(--green-deep);max-width:32ch;
}
.willkommen .wbild{
  border-radius:var(--r-card);overflow:hidden;background:var(--f8);
  aspect-ratio:16/10;
}
.willkommen .wbild img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:819px){
  .willkommen .wbild{max-height:180px;aspect-ratio:auto;height:180px}
}

/* ---------- Geburtstage ----------
   Eine Liste je Monat, nicht ein Kalendergitter: gesucht wird „wann ist
   Annette dran", nicht „was ist am 14. Maerz". Der laufende Monat steht oben
   und ist hervorgehoben; alles davor rutscht ans Ende des Jahres, damit die
   Liste immer bei heute anfaengt. */
.gebmonate{display:grid;gap:14px}
@media (min-width:640px){.gebmonate{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.gebmonate{grid-template-columns:repeat(3,minmax(0,1fr))}}
.gebmonat{border:1px solid var(--line-soft);border-radius:var(--r-soft);padding:14px 16px;background:var(--white)}
.gebmonat.jetzt{border-color:var(--green);background:var(--green-tint2)}
.gebmonat h3{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey);font-weight:600;margin-bottom:9px}
.gebmonat.jetzt h3{color:var(--green-deep)}
.gebmonat ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.gebmonat li{display:flex;gap:10px;align-items:baseline;font-size:14.5px}
.gebmonat .tag{flex:0 0 34px;font-variant-numeric:tabular-nums;color:var(--grey);font-size:13px}
.gebmonat .wer{color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis}
.gebmonat li.heute .wer{font-weight:600;color:var(--green-deep)}
.gebmonat li.heute .tag{color:var(--green-deep);font-weight:600}
.gebleer{color:var(--grey);font-size:13.5px}

/* ---------- Symbole ----------
   Ein Satz, eine Strichstaerke, drei Groessen. Sie stehen nie allein: neben
   jedem Symbol steht auch das Wort. Ein Symbol, das man deuten muss, kostet
   mehr Zeit, als es spart — deshalb sind sie hier Lesehilfe und nicht
   Beschriftung. */
.ico{width:17px;height:17px;flex:0 0 17px;vertical-align:-3px}
.ico-sm{width:14px;height:14px;flex:0 0 14px;vertical-align:-2px}
/* Die kleinste Groesse der Familie: Sichtbarkeit in einer Listenzeile. Bei
   13 Pixeln traegt die Strichstaerke 1.6 zu viel auf — 1.5 haelt die Form
   offen, ohne dass das Symbol duenner *wirkt* als seine Nachbarn. */
.ico-xs{width:13px;height:13px;flex:0 0 13px;vertical-align:-2px;stroke-width:1.5;color:var(--grey)}
.ico-lg{width:21px;height:21px;flex:0 0 21px;vertical-align:-4px}

/* Symbol vor einer Ueberschrift: gruen, damit die Zeile einen Anfang hat. */
.card-head h2 .ico,.card-head h3 .ico{color:var(--green);margin-right:9px}
.pagehead h1 .ico-lg{color:var(--green);margin-right:12px}

/* In Hinweisen sitzt das Symbol links neben dem Text, nicht darueber. */
.note{display:grid;grid-template-columns:auto 1fr;gap:0 12px;align-items:start}
.note > .ico{margin-top:2px;grid-row:1 / span 3}
.note.success > .ico{color:var(--green-deep)}
.note.error > .ico,.note.warn > .ico{color:var(--warn)}
.note.info > .ico{color:var(--grey)}

/* In Zustandsmarken klein und in derselben Farbe wie die Schrift. */
.pill{display:inline-flex;align-items:center;gap:6px}
.pill .ico-sm{opacity:.9}

/* Leerzustaende: ein blasses Symbol nimmt der leeren Flaeche die Haerte. */
.leerbild{display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:26px 0 22px;text-align:center;color:var(--grey)}
.leerbild .ico-lg{width:30px;height:30px;flex:0 0 30px;color:var(--line);stroke-width:1.3}
.leerbild p{margin:0;max-width:46ch;font-size:14px}

/* ---------- Hervorhebungen ----------
   Sparsam: je Seite hoechstens eine Sache, die heraussticht. Faerbt man drei
   Dinge, sticht keins mehr heraus. */
/* Heute in einer Tabelle. */
tr.ist-heute > td{background:var(--green-tint2)}
tr.ist-heute > td:first-child{box-shadow:inset 3px 0 0 var(--green)}
/* Etwas, das jemand noch ansehen muss. */
.hebt{position:relative;border-color:var(--green)}
.hebt::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--green);border-radius:var(--r-soft) 0 0 var(--r-soft)}

/* ---- Eigene Profilangaben ------------------------------------------------
   Ein Eingabefeld mit der Sichtbarkeit daneben. Die beiden gehoeren zusammen:
   wer die Nummer eintraegt, entscheidet im selben Blick, wer sie sieht.
   Stuenden sie untereinander, waere die Sichtbarkeit eine Zeile, die man
   uebersieht — und genau die darf man hier nicht uebersehen. */
.mitsicht{display:flex;gap:10px;align-items:stretch}
.mitsicht input{flex:1 1 auto;min-width:0}
.mitsicht select{flex:0 0 auto;width:auto}

.angaben{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.angaben > li{padding:10px 0;border-bottom:1px solid var(--hairline)}
.angaben > li:last-child{border-bottom:0}
.azeile{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.azeile .alabel{flex:0 0 34%;min-width:120px;color:var(--grey);font-size:13.5px}
.azeile .awert{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.azeile .tag{margin-left:auto}
.tag{font-size:12px;color:var(--grey);white-space:nowrap}
/* Stand und Sichtbarkeit einer Stelle stehen nebeneinander, nicht verkettet. */
.jobstand{display:inline-flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.tag.still{color:var(--grey);background:var(--f8);border:0;border-radius:5px;padding:2px 8px;font-weight:600;font-size:11px}
.angaben details{margin-top:8px}
.angaben summary{font-size:13px;color:var(--grey);cursor:pointer}
.angaben summary:hover{color:var(--green-deep)}

.angabeform{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px}
.angabeform input[name="label"]{flex:0 1 200px;min-width:0}
.angabeform input[name="value"]{flex:1 1 260px;min-width:0}
.angabeform select{flex:0 0 auto;width:auto}

@media (max-width:640px){
  .mitsicht{flex-direction:column}
  .mitsicht select{width:100%}
  .azeile .alabel{flex:1 1 100%}
  .angabeform input,.angabeform select,.angabeform button{flex:1 1 100%}
}

/* ---- Berechtigungen je Person --------------------------------------------
   Zwei Spalten auf dem Schreibtisch, eine auf dem Telefon. Der Hinweis steht
   unter dem Namen und nicht daneben: wer Rechte vergibt, liest ihn genau
   einmal, und dann soll er nicht in der Zeile stehen und stoeren. */
.rechteliste{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:2px 24px;margin-bottom:18px}
.rechtezeile{display:flex;gap:12px;align-items:flex-start;padding:11px 0;
  border-bottom:1px solid var(--hairline);cursor:pointer}
.rechtezeile input{margin-top:3px;flex:0 0 auto}
.rechtezeile .rb{display:flex;flex-direction:column;gap:2px;min-width:0}
.rechtezeile .rname{font-weight:600;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.rechtezeile .rhinweis{color:var(--grey);font-size:12.5px;line-height:1.45}
.rechtezeile:hover .rname{color:var(--green-deep)}

/* ---- Ressourcen als Raster ------------------------------------------------
   Die Kachel ist bewusst klein: gefragt war, moeglichst viele Adressen auf
   einen Blick zu sehen. 190px Mindestbreite ergeben auf dem Schreibtisch
   neben der Navigation vier bis sechs Spalten, auf dem Tablet drei, auf dem
   Telefon zwei — ohne feste Umbruchpunkte, das Raster rechnet selbst. */
.resgitter{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:10px}
.reskachel{position:relative;background:var(--white);border:1px solid var(--line-soft);
  border-radius:var(--r-card);transition:border-color .12s,box-shadow .12s,transform .12s}
.reskachel:hover{border-color:var(--green-tint);box-shadow:var(--shadow)}
.reskachel.fav{border-color:var(--green-tint)}

/* Die ganze Kachel oeffnet. Ein Link, der nur auf dem Namen liegt, laesst die
   halbe Kachel tot aussehen und trifft auf dem Telefon niemand. */
.reslink{display:flex;gap:11px;align-items:flex-start;padding:13px 34px 13px 13px;
  text-decoration:none;color:inherit}
.reslink,.reslink:hover,.reslink *{text-decoration:none}
.reslink:hover .rt{color:var(--green-deep)}
/* Alle Kacheln gleich hoch. Ein Raster mit ungleichen Kacheln liest sich als
   Liste, die schlecht ausgerichtet ist, und nicht als Raster. */
.reslink{min-height:74px}

.resmark{flex:0 0 34px;height:34px;border-radius:9px;display:grid;place-items:center;
  font-size:12.5px;font-weight:700;letter-spacing:.02em;
  color:hsl(var(--ton) 42% 34%);background:hsl(var(--ton) 46% 94%);
  border:1px solid hsl(var(--ton) 40% 86%)}

.restext{display:flex;flex-direction:column;gap:1px;min-width:0}
.restext .rt{font-weight:600;font-size:13.5px;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.restext .rd{color:var(--grey);font-size:11.5px;line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.restext .rh{color:var(--grey);font-size:11px;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Das Sternchen liegt ueber der Kachel und nicht darin: sonst waere es Teil
   des Links und wuerde beim Klick die Adresse oeffnen statt zu merken. */
.resstern{position:absolute;top:6px;right:6px}
/* Die beiden Marken liegen auf verschiedenen Seiten. Rechts standen sie
   uebereinander, und aus „oft" und dem Schloss wurde ein Fleck. */
.resoft{position:absolute;bottom:8px;right:9px;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--green-deep);opacity:.75}
.resvis{position:absolute;bottom:7px;left:11px;color:var(--grey);opacity:.55}

.reszeile{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.ressuche{flex:1 1 260px;display:flex;gap:9px;align-items:center;min-width:0;
  border:1px solid var(--line);border-radius:var(--r-btn);padding:0 13px;background:var(--white)}
.ressuche svg{width:16px;height:16px;color:var(--grey);flex:0 0 16px}
.ressuche input{border:0;background:none;padding:10px 0;flex:1 1 auto;min-width:0;
  font-size:13.5px;outline:none}
.ressuche:focus-within{border-color:var(--green)}
.reszahl{color:var(--grey);font-size:12.5px;white-space:nowrap}

.reschips{display:flex;gap:7px;flex-wrap:wrap}
.chip{border:1px solid transparent;background:var(--feld);color:var(--grey-mid);
  border-radius:var(--r-ctl);padding:7px 13px;font-size:12.5px;cursor:pointer;
  display:inline-flex;gap:6px;align-items:center;font-family:inherit}
.chip:hover{background:var(--feld-h);color:var(--ink)}
.chip.an{background:var(--green);border-color:var(--green);color:#fff}
.chip.an .cz{color:#fff;opacity:.8}
.chip .cz{color:var(--grey);font-variant-numeric:tabular-nums}

.resleer{color:var(--grey);font-size:13px;text-align:center;padding:26px 10px;margin:0}
.resbearbeiten{border-bottom:1px solid var(--hairline)}
.resbearbeiten:last-of-type{border-bottom:0}
.resbearbeiten summary{padding:11px 0;cursor:pointer;font-size:13.5px;
  display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.resbearbeiten summary .muted{font-size:12px}
.resbearbeiten summary:hover{color:var(--green-deep)}

@media (max-width:520px){
  .resgitter{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:8px}
  .reslink{padding:11px 30px 11px 11px;gap:9px;min-height:0}
  .resmark{flex-basis:29px;height:29px;font-size:11.5px}
  .restext .rd{display:none}
}

/* ---- Meine Kennzahlen -----------------------------------------------------
   Die Eingabe ist ein Raster kleiner Zahlenfelder, keine Formularliste. Zehn
   Zahlen untereinander sind zehn Zeilen und fuehlen sich nach Buchhaltung an;
   dasselbe im Raster passt in zwei Reihen und ist in zwanzig Sekunden
   ausgefuellt. Genau darum ging es. */
.kpigitter{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  gap:14px;margin-bottom:20px}
.kpifeld{display:flex;flex-direction:column;gap:4px;min-width:0}
.kpifeld .kl{font-size:13px;font-weight:600;line-height:1.3}
.kpifeld input{width:100%;font-size:19px;font-variant-numeric:tabular-nums;
  padding:9px 12px;text-align:right}
.kpifeld .kh{color:var(--grey);font-size:11.5px;line-height:1.35}
.kpifeld .kz{color:var(--green-deep);font-size:11.5px}

/* Die Pfeilchen der Zahlenfelder nehmen Platz und treffen niemand. */
.kpifeld input::-webkit-outer-spin-button,
.kpifeld input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.kpifeld input[type=number]{-moz-appearance:textfield;appearance:textfield}

.kpitabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:18px}
.kpitabs .chip{text-decoration:none}

.kpikarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:12px}
.kpikarte{border:1px solid var(--line-soft);border-radius:var(--r-soft);padding:13px 15px;
  display:flex;flex-direction:column;gap:3px;background:var(--white)}
.kk-label{color:var(--grey);font-size:12px;line-height:1.3}
.kk-wert{font-size:25px;font-weight:600;line-height:1.15}
.kk-ziel{font-size:15px;font-weight:400;color:var(--grey)}
.kk-balken{display:block;height:4px;border-radius:6px;background:var(--line);margin:4px 0 2px}
.kk-balken i{display:block;height:100%;border-radius:6px;background:var(--green)}
.kk-vor{color:var(--grey);font-size:11.5px}
.kk-vor .pos{color:var(--green-deep)}
.kk-vor .neg{color:var(--warn)}

.kpiwoche td.num,.kpiwoche th.num{font-variant-numeric:tabular-nums}

/* Kennzahlen einer Person einrichten — dieselbe Form wie die Berechtigungen,
   nur mit einem Zielfeld daneben. */
.kpiverwaltung{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));
  gap:2px 24px;margin-bottom:18px}
.kpizeile{display:flex;gap:12px;align-items:center;padding:9px 0;
  border-bottom:1px solid var(--hairline)}
.kpizeile > label{display:flex;gap:11px;align-items:flex-start;flex:1 1 auto;
  min-width:0;cursor:pointer}
.kpizeile input[type=checkbox]{margin-top:3px;flex:0 0 auto}
.kpizeile .kb{display:flex;flex-direction:column;gap:1px;min-width:0}
.kpizeile .kbn{font-weight:600;font-size:13.5px}
.kpizeile .kbh{color:var(--grey);font-size:11.5px;line-height:1.4}
.kpizeile .kziel{flex:0 0 88px;display:flex;flex-direction:column;gap:2px}
.kpizeile .kziel input{width:100%;text-align:right;padding:6px 9px;font-size:14px;
  font-variant-numeric:tabular-nums}
.kpizeile .kziel span{color:var(--grey);font-size:10.5px;text-align:right}

@media (max-width:520px){
  .kpigitter{grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:11px}
  .kpifeld input{font-size:17px}
  .kpikarten{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
}

/* Dokumentenarten der Personalakte ----------------------------------------
   Die Eigenschaften einer Art sind sieben Schalter. Untereinander gelistet
   wären sie eine Wand; in zwei Spalten mit dem erklärenden Satz unter dem
   Namen liest man sie in der Reihenfolge, in der man sie entscheidet. */
/* `min(298px,100%)` statt `298px`: in einem schmalen Kasten waere eine
   Spalte sonst breiter als der Platz, und das Raster schoebe sich ueber
   den Rand hinaus. */
.artgitter{display:grid;min-width:0;grid-template-columns:repeat(auto-fit,minmax(min(298px,100%),1fr));
  gap:0 26px;margin:6px 0 18px}
.artschalter{display:flex;gap:11px;align-items:flex-start;padding:10px 0;
  border-bottom:1px solid var(--line-soft)}
label.artschalter{cursor:pointer}
.artschalter input[type=checkbox]{margin-top:3px;flex:0 0 auto}
.artschalter .ab{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto}
.artschalter .an{font-weight:600;font-size:13.5px}
.artschalter .ah{color:var(--grey);font-size:11.5px;line-height:1.4}
.artschalter .artzahl{flex:0 0 76px;width:76px;text-align:right;padding:6px 9px;
  font-size:14px;font-variant-numeric:tabular-nums}

/* „Ändern“ klappt das Formular in der Zeile auf. Eine eigene Seite je Art
   wäre für sieben Schalter ein Umweg, und man verlöre beim Vergleichen den
   Überblick, den die Tabelle gerade gibt. */
.artbearbeiten > summary{cursor:pointer;font-size:13px;color:var(--green-h);
  list-style:none;white-space:nowrap}
.artbearbeiten > summary::-webkit-details-marker{display:none}
.artbearbeiten > summary::before{content:"›";display:inline-block;margin-right:5px;
  transition:transform .15s ease}
.artbearbeiten[open] > summary::before{transform:rotate(90deg)}
.artbearbeiten[open]{display:block;min-width:min(560px,72vw)}

@media (max-width:640px){
  .artgitter{grid-template-columns:1fr}
  .artbearbeiten[open]{min-width:0}
}

/* Personalakte nach Arten ---------------------------------------------------
   Jede Art ein Abschnitt, auch die leeren: was fehlt, braucht eine Zeile,
   sonst sieht man es nie. */
.aluecke{border:1px solid var(--warn);background:var(--warn-tint);color:var(--warn);
  border-radius:var(--r-soft);padding:11px 14px;margin-bottom:16px;font-size:13.5px;
  line-height:1.5}
.aluecke strong{color:var(--warn)}

.akte{display:flex;flex-direction:column;gap:2px}
.aabschnitt{padding:13px 0;border-bottom:1px solid var(--hairline)}
.aabschnitt:last-child{border-bottom:0}
.aabschnitt.ist-luecke .akopf h3{color:var(--warn)}

.akopf{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.akopf h3{font-size:14.5px;font-weight:600}

.astand{font-size:11px;line-height:1;padding:4px 8px;border-radius:6px;
  border:1px solid var(--line);color:var(--grey);white-space:nowrap}
.astand.ok{border-color:var(--green-tint);background:var(--green-tint2);color:var(--green-deep)}
.astand.fehlt,.astand.pflicht{border-color:var(--warn);color:var(--warn)}
.astand.fehlt{background:var(--warn-tint)}
.astand.offen{border-color:var(--warn);color:var(--warn)}
.astand.nurad{background:var(--line-soft)}

.ahinweis{color:var(--grey);font-size:12px;line-height:1.45;margin:3px 0 0}
.ahinweis.leer{font-style:italic}

.adateien{list-style:none;margin:8px 0 0;padding:0;display:flex;
  flex-direction:column;gap:9px}
.adateien > li{border:1px solid var(--line-soft);border-radius:var(--r-soft);
  padding:10px 13px;background:var(--white);display:flex;flex-direction:column;gap:4px}
.ad-kopf{display:flex;flex-direction:column;gap:1px;min-width:0}
.ad-kopf a{font-size:13.5px;font-weight:600}
.ad-meta{color:var(--grey);font-size:11.5px;line-height:1.4;overflow-wrap:anywhere}
.ad-fakten{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--grey)}
.ad-fakten .neg{font-weight:600}
.ad-wege{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:2px}
.ad-wege input[type=date]{padding:5px 8px;font-size:12.5px}
.ad-wege .inline-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

@media (max-width:640px){
  .ad-wege{gap:9px}
  .ad-wege input[type=date]{width:100%}
}

/* Bewerbungen und Bewerberakte --------------------------------------------- */
.bwstand{display:inline-block;font-size:11.5px;line-height:1;padding:5px 9px;
  border-radius:6px;border:1px solid var(--line);color:var(--grey);white-space:nowrap}
.bwstand.ok{border-color:var(--green-tint);background:var(--green-tint2);color:var(--green-deep)}
.bwstand.warm{border-color:var(--warn);color:var(--warn)}
.bwstand.aus{background:var(--line-soft)}

tr.ist-neu td:first-child{box-shadow:inset 3px 0 0 var(--green)}

.bwfaellig{border-color:var(--warn);background:var(--warn-tint);color:var(--warn)}
.bwfaellig strong{color:var(--warn)}

/* Die Stände als Reihe von Knöpfen: ein Klick, ein Wechsel. Ein Auswahlfeld
   mit Absendeknopf wären zwei Handgriffe für dieselbe Sache. */
.bwstaende{display:flex;gap:7px;flex-wrap:wrap}
.bwstaende .chip{border:1px solid var(--line);background:var(--white);cursor:pointer;
  font-size:12.5px;padding:6px 12px;border-radius:6px;color:var(--ink-soft)}
.bwstaende .chip:hover:not(:disabled){border-color:var(--green);color:var(--green-deep)}
.bwstaende .chip.an{background:var(--green);border-color:var(--green);color:var(--white)}
.bwstaende .chip:disabled{cursor:default}

.bwdateien{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.bwdateien > li{display:flex;flex-direction:column;gap:1px}
.bwdateien a{font-size:13.5px;font-weight:600;overflow-wrap:anywhere}
.bwdmeta{color:var(--grey);font-size:11.5px}
/* Die Beschriftung einer Unterlage: schmal, damit sie die Liste nicht
   auseinanderzieht, aber breit genug fuer „Arbeitszeugnis Klinikum". */
.bwdbeschriftung{display:flex;gap:6px;align-items:center;margin-top:4px}
.bwdbeschriftung input{flex:1 1 auto;min-width:0;font-size:12.5px;padding:5px 8px}
.bwdbeschriftung .btn{flex:0 0 auto}

/* ---------- Klappkarte ----------
   Eine Karte, die zugeklappt eine Zeile hoch ist.

   Anlass: auf der Bewerbungsseite standen 1240 Pixel Formular ueber der Liste.
   Wer die Seite oeffnete, sah Eingabefelder statt Bewerbungen. Ein `details`
   und kein Skript, weil die Sicherheitskopfzeile keine eingebetteten Skripte
   zulaesst und der Browser das ohnehin kann. */
.klappkarte{background:var(--white);border:1px solid var(--line-soft);
  border-radius:var(--r-card);box-shadow:var(--shadow);overflow:hidden}
.klappkarte > summary{
  cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:12px;
  flex-wrap:wrap;padding:16px 20px;font-size:14.5px;
}
.klappkarte > summary::-webkit-details-marker{display:none}
.klappkarte > summary::before{
  content:"";flex:0 0 auto;width:8px;height:8px;margin-right:2px;
  border-right:1.6px solid var(--green);border-bottom:1.6px solid var(--green);
  transform:rotate(-45deg);transition:transform .12s ease;
  position:relative;top:-2px;
}
.klappkarte[open] > summary::before{transform:rotate(45deg);top:-4px}
.klappkarte > summary:hover{background:var(--green-tint2)}
.klappkarte > summary:focus-visible{outline:2px solid var(--green);outline-offset:-2px}
.kk-titel{font-weight:600;color:var(--ink)}
.kk-hint{color:var(--grey);font-size:12.5px}
.kk-inhalt{padding:4px 20px 22px;border-top:1px solid var(--line-soft)}
.kk-inhalt.kk-tabelle{padding:0 0 18px}
.kk-inhalt.kk-tabelle > p{padding:0 20px}
.kk-ueber{font-size:1.05rem;margin:18px 0 4px}
.kk-ueber.kk-zweit{margin-top:30px;padding-top:22px;border-top:1px solid var(--line-soft)}

/* ---------- Bewerberakte: Kontaktstreifen ----------
   Was man in der Hand haben will, bevor man zum Hoerer greift. Vorher stand
   die Telefonnummer in einem Eingabefeld mitten in einem Formular mit zwanzig
   Zeilen und musste herausmarkiert werden. */
.bwkontakt{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:flex-start}
.bwk-punkt{display:flex;flex-direction:column;gap:1px;min-width:0;
  text-decoration:none;color:inherit;padding:2px 0}
a.bwk-punkt .bwk-wert{color:var(--green-deep);text-decoration:underline;
  text-decoration-color:var(--green-tint);text-underline-offset:2px}
a.bwk-punkt:hover .bwk-wert{text-decoration-color:var(--green)}
.bwk-was{font-size:12px;color:var(--grey)}
.bwk-wert{font-size:14px;font-weight:500;overflow-wrap:anywhere}

/* „Weitere Angaben" in der Akte: zugeklappt, damit oben die fuenf Felder
   stehen, die man wirklich braucht. */
.bwmehr{margin:2px 0 4px;border-top:1px solid var(--line-soft);padding-top:12px}
.bwmehr > summary{cursor:pointer;list-style:none;font-size:13.5px;font-weight:600;
  color:var(--green-h);padding:2px 0;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.bwmehr > summary::-webkit-details-marker{display:none}
.bwmehr > summary::before{content:"+ ";font-weight:700}
.bwmehr[open] > summary::before{content:"\2013 "}
.bwmehr > summary .muted{font-weight:400;font-size:12px}
.bwmehr > summary:hover{color:var(--green-deep)}
.bwmehr[open]{padding-bottom:6px}

/* In der Akte sollen die Karten oben anfangen und nicht auf Spaltenhoehe
   auseinandergezogen werden. Eine halb leere Karte sieht aus, als fehle etwas. */
.bwspalten{align-items:start}

/* Die Filterzeile klebt an der Liste darunter. */
.bwfilter{margin-bottom:-6px}
.bwtext{font-size:13.5px;line-height:1.6;color:var(--ink-soft);margin:0;
  max-height:20rem;overflow:auto}

.bwneu{display:flex;flex-direction:column;gap:9px;padding-bottom:18px;
  border-bottom:1px solid var(--hairline)}
.bwneukopf{display:flex;gap:9px;flex-wrap:wrap}
.bwneukopf select{flex:0 0 10rem}
.bwneu textarea{width:100%;resize:vertical;min-height:3.4rem}
.bwneu .actions{margin:0}

.bwverlauf{list-style:none;margin:16px 0 0;padding:0;display:flex;
  flex-direction:column;gap:0}
.bwverlauf > li{padding:12px 0 12px 16px;border-left:2px solid var(--line-soft);
  position:relative}
.bwverlauf > li::before{content:"";position:absolute;left:-5px;top:18px;width:8px;
  height:8px;border-radius:6px;background:var(--line)}
.bwverlauf > li.ist-stand::before{background:var(--green)}
.bvkopf{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.bvart{font-size:12px;
  color:var(--green);font-weight:600}
.bvzeit{color:var(--grey);font-size:11.5px}
.bvtext{font-size:13.5px;line-height:1.55;margin:3px 0 0;color:var(--ink-soft)}

@media (max-width:640px){
  .bwneukopf select,.bwneukopf input{flex:1 1 100%}
}

/* ===========================================================================
   Arbeitszentrale

   Drei Spalten, viel Weißraum, dezente Metadaten. Keine Karten, keine Farben
   ausser einer, keine Diagramme. Was die Aufmerksamkeit steuert, ist die
   Reihenfolge — nicht die Gestaltung.
   =========================================================================== */

.wzentrale{
  display:grid;
  grid-template-columns:210px minmax(300px,1fr) minmax(0,1.35fr);
  /* Genau eine Zeile, und die ist so hoch wie der Rahmen — nicht so hoch wie
     ihr Inhalt.

     Ohne diese Angabe legt der Browser eine Zeile nach Inhalt an. Bei acht
     Eintraegen faellt das nicht auf, weil der Inhalt kleiner ist als der
     Rahmen. Bei achtzehn wird die Zeile hoeher als der Rahmen, die Spalten
     erben diese Hoehe ueber `height:100%` — und dann hat keine Spalte mehr
     etwas zu scrollen, weil sie alles zeigt. Sichtbar bleibt trotzdem nur der
     Rahmen, der Rest wird von `overflow:hidden` abgeschnitten: die Liste hoert
     mitten drin auf und es gibt nichts zu rollen. `minmax(0,1fr)` bindet die
     Zeile an den Rahmen, und das `0` ist noetig — `1fr` allein waere nach
     unten immer noch so gross wie der Inhalt. */
  grid-template-rows:minmax(0,1fr);
  gap:0;
  align-items:stretch;
  /* Der Rahmen der Seite gibt die Hoehe vor, damit jede Spalte fuer sich
     scrollt. Sonst scrollt man in der Liste und verliert das Geoeffnete. */
  height:calc(100vh - 118px);
  /* Nicht hoeher, als ein flaches Fenster hat: sonst steht der untere Rand des
     Rahmens unter der Bildschirmkante, und man muesste erst die Seite und dann
     die Liste rollen. */
  min-height:30rem;
  border:1px solid var(--line-soft);
  border-radius:var(--r-card);
  background:var(--white);
  overflow:hidden;
}
.wzentrale.schmal{grid-template-columns:190px minmax(280px,1fr) minmax(0,1.25fr)}
/* Damit eine Spalte kleiner werden darf als ihr Inhalt.

   Ein Rasterfeld bekommt sonst als Mindesthoehe die Hoehe seines Inhalts, und
   diese Mindesthoehe zieht die Zeile wieder auf. Betroffen ist nur die
   mittlere Spalte: die beiden aeusseren rollen selbst (`overflow-y:auto`), und
   damit entfaellt die Regel von allein. Genannt sind trotzdem alle drei —
   sonst haengt die Hoehe der Seite unsichtbar daran, dass links und rechts
   eine Rollleiste haben. */
.wnav,.wmitte,.wrechts{min-height:0}

/* ---- linke Spalte ------------------------------------------------------- */
.wnav{
  height:100%;overflow-y:auto;padding:16px 14px;
  border-right:1px solid var(--line-soft);background:var(--white);
  display:flex;flex-direction:column;gap:16px;
}
.wnav .wneu{width:100%;text-align:center;justify-content:center}

.wlisten{display:flex;flex-direction:column;gap:1px}
.wlisten a{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:7px 10px;border-radius:6px;font-size:13px;color:var(--ink-soft);
  text-decoration:none;line-height:1.3;
}
.wlisten a:hover{background:var(--line-soft)}
.wlisten a.an{background:var(--green-tint2);color:var(--green-deep);font-weight:600}
.wnzahl{
  font-size:11px;color:var(--grey);font-variant-numeric:tabular-nums;
  background:var(--line-soft);border-radius:6px;padding:1px 7px;
}
.wlisten a.an .wnzahl{background:var(--white);color:var(--green-deep)}

.wfilter > summary{
  cursor:pointer;font-size:12px;color:var(--grey);list-style:none;
  padding:6px 10px;border-radius:6px;
}
.wfilter > summary::-webkit-details-marker{display:none}
.wfilter > summary::before{content:"›";display:inline-block;margin-right:6px;transition:transform .15s}
.wfilter[open] > summary::before{transform:rotate(90deg)}
.wfilter > summary:hover{background:var(--line-soft)}
.wfilter form{display:flex;flex-direction:column;gap:9px;padding:10px 2px 0}
.wfilter .field{gap:3px}
.wfilter .field > span{font-size:11px;color:var(--grey)}
.wfilter select,.wfilter input{font-size:12.5px;padding:6px 8px}
.wfilter .actions{margin-top:4px;gap:10px;align-items:center}

.wrhinweis{border-top:1px solid var(--line-soft);padding-top:14px;
  display:flex;flex-direction:column;gap:10px}
.wrhinweis p{margin:0;line-height:1.5}

/* ---- mittlere Spalte ---------------------------------------------------- */
.wmitte{
  height:100%;display:flex;flex-direction:column;min-width:0;
  border-right:1px solid var(--line-soft);
}
.wmkopf{
  padding:16px 18px 12px;border-bottom:1px solid var(--line-soft);
  display:flex;flex-direction:column;gap:10px;flex:0 0 auto;
}
.wmkopf h1{font-size:1.15rem;line-height:1.2}
.wmkopf p{margin:2px 0 0}
.wsuche input{width:100%;font-size:13px;padding:7px 10px}

.wmitte > div[data-work-listbox]{flex:1 1 auto;overflow-y:auto;min-height:0}

.wliste{list-style:none;margin:0;padding:0}
/* Die Zeile traegt links den Haken und rechts daneben den Eintrag. Der Haken
   liegt bewusst ausserhalb des Links: ein Klick darauf soll abarbeiten und
   nicht oeffnen. */
.wliste > li{border-bottom:1px solid var(--line-soft);
  display:flex;align-items:flex-start;gap:0}
.wliste > li:last-child{border-bottom:0}
.wliste a{
  display:flex;flex-direction:column;gap:3px;padding:12px 18px 12px 6px;
  text-decoration:none;color:var(--ink-soft);
  border-left:3px solid transparent;flex:1 1 auto;min-width:0;
}

.wzhaken{flex:0 0 auto;padding:12px 0 12px 15px;margin:0;display:flex}
.wzhkn{
  width:19px;height:19px;flex:0 0 auto;padding:0;cursor:pointer;
  border:1.5px solid var(--line);border-radius:5px;background:#fff;
  color:transparent;font-size:12px;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.wzhkn:hover{border-color:var(--green);color:var(--green-tint)}
/* Auf dem Telefon ist ein 19 Pixel grosses Kaestchen mit dem Daumen kaum zu
   treffen, und daneben liegt der Eintrag selbst — daneben zu tippen heisst
   also, etwas anderes zu oeffnen. Die Trefferflaeche waechst auf 45 Pixel,
   das Kaestchen bleibt so gross, wie es ist. Am Schreibtisch aendert sich
   nichts: ein feiner Zeiger trifft auch 19 Pixel. */
@media (pointer: coarse){
  .wzhkn{position:relative}
  .wzhkn::after{content:"";position:absolute;inset:-13px}
}
.wzhkn.an{background:var(--green);border-color:var(--green);color:#fff}
.wzhwer{font-size:11px;color:var(--grey);font-style:italic}
.wliste a:hover{background:var(--line-soft)}
.wliste > li.an a{background:var(--green-tint2);border-left-color:var(--green)}
.wliste > li.fertig .wztitel{color:var(--grey)}

.wzkopf{display:flex;align-items:baseline;gap:7px;min-width:0}
.wztitel{font-weight:600;font-size:13.5px;line-height:1.35;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto}
.wliste > li.fertig .wztitel{text-decoration:line-through;text-decoration-color:var(--line)}
.wzfav{color:var(--green);font-size:12px;flex:0 0 auto}

.wzmeta{display:flex;gap:5px;flex-wrap:wrap;align-items:center;
  font-size:11px;color:var(--grey);line-height:1.4}
.wzs{display:inline-flex;align-items:center;line-height:1}
.wzstand{border:0;background:var(--f8);color:var(--grey-mid);border-radius:5px;padding:2px 7px;font-size:10.5px;font-weight:600}
.wzstand.s-laeuft{background:var(--green-wash);color:var(--green-deep)}
.wzstand.s-wartet{background:var(--warn-tint);color:var(--warn)}
.wzstand.s-erledigt{background:var(--line-soft)}
.wzprio{color:var(--warn);font-weight:600;font-size:10.5px}
.wzvor{font-size:12px;color:var(--grey);line-height:1.45;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wzvor.gesperrt{font-style:italic}

.wleer,.wnichts{padding:44px 24px;text-align:center;color:var(--grey)}
.wleer p,.wnichts p{margin:0 0 6px;max-width:34ch;margin-left:auto;margin-right:auto}
.wnichts svg{color:var(--line);margin-bottom:10px}

/* ---- rechte Spalte ------------------------------------------------------ */
.wrechts{height:100%;overflow-y:auto;min-width:0;background:var(--white)}
.wdetail{padding:22px 26px 40px;display:flex;flex-direction:column;gap:18px}
.weinzeln .wdetail{padding:0;max-width:74ch}

.wdkopf{display:flex;flex-direction:column;gap:6px}
.wdtitel{display:flex;align-items:flex-start;gap:10px}
.wdtitel h2{font-size:1.45rem;line-height:1.25;flex:1 1 auto;overflow-wrap:anywhere}
.wstern{background:none;border:0;cursor:pointer;color:var(--line);font-size:19px;
  line-height:1;padding:2px 4px}
.wstern:hover{color:var(--green)}

.wdmeta{margin:0;font-size:12px;color:var(--grey);line-height:1.6;
  display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.wsicht{font-weight:600;color:var(--ink-soft)}
.wwartet{font-style:italic}

.wdurl{margin:0;display:flex;gap:7px;align-items:center;font-size:13px}
.wdurl svg{color:var(--grey);flex:0 0 auto}
.wdurl a{overflow-wrap:anywhere}
.wdjob{margin:0;font-size:13px;color:var(--ink-soft)}

/* Der Inhalt. Grosszuegig gesetzt — er ist der Grund, warum es die Seite gibt. */
.wdtext{
  font-size:14.5px;line-height:1.68;color:var(--ink-soft);
  max-width:70ch;overflow-wrap:anywhere;
}

.wgesperrt{
  border:1px solid var(--line-soft);border-radius:var(--r-soft);
  padding:28px 22px;text-align:center;color:var(--grey);
  display:flex;flex-direction:column;align-items:center;gap:6px;
}
.wgesperrt svg{color:var(--line)}
.wgesperrt p{margin:0;max-width:44ch}

/* Bloecke: aufklappbar, wo sie stoeren, offen, wo sie gebraucht werden. */
.wblock{border-top:1px solid var(--line-soft);padding-top:16px}
.wblock > summary{cursor:pointer;font-size:12.5px;color:var(--green-h);list-style:none}
.wblock > summary::-webkit-details-marker{display:none}
.wblock > summary::before{content:"›";display:inline-block;margin-right:6px;transition:transform .15s}
.wblock[open] > summary::before{transform:rotate(90deg)}
.wblock[open] > form,.wblock[open] > ol{margin-top:14px}
.wblock.offen > h3{font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;
  color:var(--grey);margin:0 0 10px;display:flex;gap:8px;align-items:center}
.wzahl{font-size:11px;color:var(--grey);background:var(--line-soft);
  border-radius:6px;padding:1px 7px;letter-spacing:0;text-transform:none}

/* ---- Unteraufgaben ------------------------------------------------------ */
.waufgaben{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column}
.waufgaben > li{display:flex;gap:9px;align-items:flex-start;padding:6px 0;
  border-bottom:1px solid var(--line-soft)}
.waufgaben > li:last-child{border-bottom:0}
.waufgaben > li.fertig .watext{color:var(--grey);text-decoration:line-through;
  text-decoration-color:var(--line)}
.whaken{background:none;border:0;cursor:pointer;line-height:1;
  color:var(--grey);padding:0;flex:0 0 auto;display:inline-flex;align-items:center;
  transition:color var(--t-fast)}
.whaken:hover{color:var(--green)}
.whaken .ico-xs{color:inherit}
.watext{flex:1 1 auto;font-size:13.5px;line-height:1.45;min-width:0}
.wameta{display:block;font-size:11px;color:var(--grey);margin-top:1px}
.wameta > span + span{margin-left:7px}
.wweg{background:none;border:0;cursor:pointer;color:var(--line);font-size:15px;
  line-height:1;padding:0 2px;flex:0 0 auto}
.wweg:hover{color:var(--warn)}

.wneuaufgabe{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.wneuaufgabe input[type=text]{flex:1 1 12rem;font-size:13px;padding:6px 9px}
.wneuaufgabe select{flex:0 0 7rem;font-size:12.5px;padding:6px 8px}
.wneuaufgabe input[type=date]{flex:0 0 9rem;font-size:12.5px;padding:6px 8px}

/* ---- Kommentare --------------------------------------------------------- */
.wkommentare,.wantworten{list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:14px}
.wantworten{margin:12px 0 0 18px;padding-left:14px;border-left:2px solid var(--line-soft);gap:12px}
.wkomm{display:flex;flex-direction:column;gap:2px}
.wkkopf{display:flex;gap:9px;align-items:baseline;flex-wrap:wrap}
.wkwer{font-weight:600;font-size:13px}
.wkzeit{font-size:11px;color:var(--grey)}
.wkkopf .linkbtn{font-size:11px}
.wktext{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink-soft);overflow-wrap:anywhere}
.werw{color:var(--green-deep);font-weight:600}

.wneukommentar{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.wneukommentar textarea{width:100%;resize:vertical;min-height:3.2rem;font-size:13.5px}
.wneukommentar .actions{margin:0}
.wantwortauf{margin:0;font-size:11.5px;color:var(--grey);
  display:flex;gap:8px;align-items:center}

/* ---- Zugriff ------------------------------------------------------------ */
.wsichtwahl{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:8px;border:0;padding:0;margin:0 0 12px}
.wsichtwahl legend{font-size:12px;color:var(--grey);padding:0 0 8px}
.wsichtopt{
  display:grid;grid-template-columns:auto auto 1fr;grid-template-areas:"r z l" ". . h";
  gap:2px 8px;align-items:center;cursor:pointer;
  border:1px solid transparent;border-radius:var(--r-ctl);padding:11px var(--s3);
  background:var(--feld);transition:background var(--t-fast),border-color var(--t-fast);
}
.wsichtopt:hover{background:var(--feld-h)}
.wsichtopt:has(input:checked){border-color:var(--green-tint);background:var(--green-wash)}
.wsichtopt input{grid-area:r;margin:0}
.wsz{grid-area:z;display:inline-flex;align-items:center;line-height:1}
.wsl{grid-area:l;font-weight:600;font-size:12.5px}
.wsh{grid-area:h;font-size:11px;color:var(--grey);line-height:1.4}

.wteamschreiben{display:flex;gap:9px;align-items:flex-start;font-size:12px;
  color:var(--grey);margin-bottom:10px;line-height:1.45}
.wteamschreiben input{margin-top:2px}

.wmitglieder{list-style:none;margin:0 0 12px;padding:0;
  display:flex;flex-direction:column;gap:1px}
.wmitglieder > li{display:flex;gap:9px;align-items:center;padding:6px 0;
  border-bottom:1px solid var(--line-soft);font-size:13px}
.wmitglieder > li:last-child{border-bottom:0}
.wmname{flex:1 1 auto}
.wmrolle{font-size:11px;color:var(--grey);border:1px solid var(--line);
  border-radius:6px;padding:1px 8px;white-space:nowrap}

.wneumitglied{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.wneumitglied select{flex:1 1 9rem;font-size:12.5px;padding:6px 8px}

/* ---- Verlauf ------------------------------------------------------------ */
.wverlauf{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.wverlauf > li{font-size:11.5px;color:var(--grey);line-height:1.5;
  display:flex;gap:7px;flex-wrap:wrap}
.wvzeit{font-variant-numeric:tabular-nums;flex:0 0 auto}
.wvwer{font-weight:600;color:var(--ink-soft)}

.wdfuss{border-top:1px solid var(--line-soft);padding-top:14px;
  display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.wdfuss .small{margin-left:auto}
.linkbtn.neg{color:var(--warn)}

/* ---- Neuer Eintrag ------------------------------------------------------ */
.pagehead.schmal{max-width:74ch}
.wneuform{max-width:74ch;display:flex;flex-direction:column;gap:16px}
.wgross textarea{
  width:100%;min-height:20rem;resize:vertical;
  font-size:15px;line-height:1.65;padding:16px 18px;
  border-radius:var(--r-soft);
}
.wgross textarea::placeholder{color:var(--grey);opacity:.8}
.wmehr > summary{cursor:pointer;font-size:13px;color:var(--green-h);list-style:none}
.wmehr > summary::-webkit-details-marker{display:none}
.wmehr > summary::before{content:"›";display:inline-block;margin-right:6px;transition:transform .15s}
.wmehr[open] > summary::before{transform:rotate(90deg)}
.wmehr[open]{border:1px solid var(--line-soft);border-radius:var(--r-soft);padding:16px 18px}
.wmehr[open] > summary{margin:-16px -18px 14px;padding:16px 18px;
  border-bottom:1px solid var(--line-soft)}
.wmehr > *:not(summary){margin-bottom:14px}
.wmehr > *:last-child{margin-bottom:0}

.whinweis{font-size:12px;color:var(--grey);line-height:1.55;margin:0;
  background:var(--line-soft);border-radius:var(--r-soft);padding:10px 13px}
.whinweis strong{color:var(--ink-soft)}

.feldlabel{display:block;font-weight:600;font-size:13px;margin-bottom:6px}
.wpersonen{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2px 18px}
.wperson{display:flex;gap:9px;align-items:center;padding:6px 0;
  border-bottom:1px solid var(--line-soft);font-size:13px;cursor:pointer}
.wperson > span{flex:1 1 auto}
.wperson select{flex:0 0 8.5rem;font-size:12px;padding:5px 7px}
.wperson.an > span{font-weight:600;color:var(--ink)}

/* Die Personenauswahl im Listenformular. Sie steht in einem eigenen Rahmen,
   damit erkennbar bleibt, dass die Haken zur Sichtbarkeit darueber gehoeren. */
.wpwahl{border:1px solid var(--line-soft);border-radius:var(--r-soft);
  padding:12px 14px;margin:14px 0 0}
.wpwahl legend{font-weight:600;font-size:13px;padding:0 6px}
.wpwahl .wpersonen{max-height:16rem;overflow:auto}
/* Ein Hinweis unter einem Feld ist ein Hinweis, egal ob ein `.field` darum
   steht. Ohne diese Zeile las er sich in den Formularen der Arbeitszentrale
   so gross wie der Fliesstext und zog den Blick von den Feldern weg. */
.wpwahl .help,
.wteilen .help{display:block;margin-top:10px;font-size:12.5px;color:var(--grey);line-height:1.55}

/* Wer sieht diese Liste — eine Zeile im Kopf der offenen Liste. */
.wmleute{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline;
  margin:6px 0 0;font-size:12.5px;color:var(--grey)}
.wmlsicht{background:var(--green-wash);color:var(--green-deep);
  border-radius:6px;padding:2px 10px;font-weight:600;white-space:nowrap}
.wmlnamen{min-width:0}

.wdublette{border:1px solid var(--warn);background:var(--warn-tint);color:var(--warn);
  border-radius:var(--r-soft);padding:10px 13px;margin-top:8px;font-size:12.5px;line-height:1.5}
.wdublette a{color:var(--warn);text-decoration:underline}

.wneuknopf{align-items:center;gap:14px;flex-wrap:wrap}

/* ---- Schnellablage in der Kopfzeile ------------------------------------- */
.schnell{
  display:inline-flex;align-items:center;gap:6px;
  padding:0 var(--s4) 0 var(--s3);height:40px;border-radius:var(--r-ctl);
  border:1px solid transparent;color:var(--ink-soft);text-decoration:none;
  font-size:13.5px;font-weight:600;background:var(--feld);white-space:nowrap;
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast);
  /* Nicht schrumpfen. Das Suchfeld daneben nimmt sich allen Platz; ohne diese
     Zeile blieb auf dem Telefon ein leerer Knopf ohne Symbol stehen. */
  flex:0 0 auto;
}
.schnell:hover{background:var(--feld-h);color:var(--ink)}
.schnell svg{width:15px;height:15px;stroke-width:2;flex:0 0 15px}

/* ---- schmalere Fenster -------------------------------------------------- */
@media (max-width:1180px){
  /* Zwei Spalten: die Liste und das Geoeffnete. Die Navigation legt sich
     darueber und wird zu einer Zeile — bei drei Spalten auf 1000 Pixeln
     waere jede zu schmal, um brauchbar zu sein. */
  .wzentrale,.wzentrale.schmal{grid-template-columns:minmax(260px,1fr) minmax(0,1.2fr);
    grid-template-rows:auto minmax(0,1fr)}
  .wnav{grid-column:1 / -1;height:auto;border-right:0;border-bottom:1px solid var(--line-soft);
    flex-direction:row;align-items:center;flex-wrap:wrap;gap:10px;padding:12px 14px}
  .wnav .wneu{width:auto;flex:0 0 auto}
  .wlisten{flex-direction:row;flex-wrap:wrap;gap:4px;flex:1 1 auto}
  .wlisten a{padding:5px 10px;border:1px solid var(--line);border-radius:6px;font-size:12px}
  .wfilter{flex:0 0 auto}
  .wfilter[open]{position:relative;flex:1 1 100%}
  .wfilter form{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
  .wrhinweis{display:none}
}

@media (max-width:820px){
  /* Auf dem Telefon eine Spalte. Das Geoeffnete bekommt eine eigene Seite —
     drei Bereiche nebeneinander sind dort keine Uebersicht, sondern Gedraenge. */
  /* Hier scrollt wieder die Seite selbst, also darf die Zeile so hoch werden
     wie ihr Inhalt — sonst faenge die Liste auf dem Telefon an zu klemmen. */
  .wzentrale,.wzentrale.schmal{grid-template-columns:1fr;grid-template-rows:auto;
    height:auto;min-height:0;border:0;border-radius:0}
  .wnav{border-radius:var(--r-card) var(--r-card) 0 0;border:1px solid var(--line-soft);
    border-bottom:0}
  .wmitte{border-right:0;border:1px solid var(--line-soft);border-radius:0 0 var(--r-card) var(--r-card)}
  .wmitte > div[data-work-listbox]{overflow:visible}
  .wrechts{display:none}
  .wrechts.zeigen{display:block;border:1px solid var(--line-soft);
    border-radius:var(--r-card);margin-top:14px}
  .wdetail{padding:18px 16px 28px}
  .wsichtwahl{grid-template-columns:1fr}
  .wneuaufgabe input[type=text]{flex:1 1 100%}
  .wgross textarea{min-height:14rem;font-size:16px;padding:13px 14px}
  .schnell span{display:none}
  .schnell{padding:7px 9px}
}

/* `hidden` muss gewinnen.
   Ein Element mit `display:flex` oder `grid` ignoriert das Attribut sonst
   stillschweigend — der Browser zeigt es an, und niemand sieht dem Quelltext
   an, warum. Das trifft in diesem Portal drei Stellen, und alle drei sind
   Felder, die nur manchmal gebraucht werden. */
[hidden]{display:none !important}

/* ===========================================================================
   Content-Zentrale

   Dieselbe Sprache wie der Rest des Portals: eine Farbe, viel Weißraum,
   Metadaten leise. Der Unterschied zur Arbeitszentrale ist, dass hier Bilder
   vorkommen — und die dürfen wirken. Alles andere tritt dafür zurück.
   =========================================================================== */

/* ---- Kopfzeilen und Filter ---------------------------------------------- */
.ckopfzeile{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:space-between}
.ckopfzeile > .cfilter{flex:1 1 22rem}
.csichten{display:flex;gap:6px;flex-wrap:wrap}
.cnav{display:flex;align-items:center;gap:8px}
.cmonat{font-size:15px;min-width:11rem;text-align:center}

.cfilter{margin:0}
.cfzeile{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cfzeile input[type=search]{flex:1 1 14rem;min-width:10rem}
.cfmehr{flex:0 0 auto}
.cfmehr > summary{cursor:pointer;font-size:12.5px;color:var(--grey);
  padding:7px 12px;border:1px solid var(--line);border-radius:6px;list-style:none}
.cfmehr > summary::-webkit-details-marker{display:none}
.cfmehr[open] > summary{border-color:var(--green);color:var(--green-deep)}
.cfmehr[open]{flex:1 1 100%}
.cfgitter{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));
  margin-top:12px}

/* ---- Karte --------------------------------------------------------------
   Sie steht im Kalender in einer 140-Pixel-Spalte und in der Liste über die
   volle Breite. Deshalb kein festes Maß, sondern ein Raster, das mitgeht. */
.ckarten{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.ckarten.breit{grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}

.ckarte{border:1px solid var(--line-soft);border-radius:var(--r-soft);background:var(--white);
  overflow:hidden;display:flex;flex-direction:column}
.ckarte:hover{border-color:var(--green)}
.ckarte.ist-live{border-left:3px solid var(--green)}
.ckarte .ckopf{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.ckarte .cbild{display:block;aspect-ratio:16/9;background:var(--green-tint2);overflow:hidden}
.ckarte .cbild img{width:100%;height:100%;object-fit:cover;display:block}
.ckarte .cbild.leer{display:flex;align-items:center;justify-content:center;color:var(--line)}
.ckarte .cbild.leer svg{width:26px;height:26px}
.ckarte .ctext{display:flex;flex-direction:column;gap:4px;padding:10px 12px}
.ckarte .ctitel{font-weight:600;font-size:13.5px;line-height:1.35;color:var(--ink)}
.ckarte .canriss{font-size:12.5px;color:var(--grey);line-height:1.45}
.ckarte .canriss.gesperrt{font-style:italic}
.ckarte .cmeta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  padding:0 12px 10px;font-size:11.5px;color:var(--grey)}
.ckarte.schmal .ctext{padding:7px 9px}
.ckarte.schmal .ctitel{font-size:12.5px}
.ckarte.schmal .cmeta{padding:0 9px 7px;font-size:11px}
.ckanal{border:1px solid var(--line);border-radius:6px;padding:1px 7px;font-size:10.5px}

/* Der Stand bekommt nur dann Farbe, wenn er etwas verlangt. */
.cstand{font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--grey)}
.cstand.s-aktiv{color:var(--green-deep)}
.cstand.s-warte{color:var(--warn)}
.cstand.s-gut{color:var(--green-h)}
.csicht{font-size:11.5px;color:var(--grey);white-space:nowrap;display:inline-flex;align-items:center;gap:5px}

/* ---- Kalender ----------------------------------------------------------- */
.ckalender{border:1px solid var(--line-soft);border-radius:var(--r-card);background:var(--white);
  overflow:hidden}
.ckwoche{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.ckkopf{background:var(--f8);border-bottom:1px solid var(--line-soft)}
.cktag-kopf{padding:8px 10px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey);font-weight:600}
.cktag{border-right:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  min-height:8.5rem;padding:6px;display:flex;flex-direction:column;gap:6px}
.ckalender.woche .cktag{min-height:16rem}
.cktag:nth-child(7n){border-right:0}
.cktag.fremd{background:#FCFBFE}
.cktag.fremd .cknummer{color:var(--line)}
.cktag.heute{background:var(--green-tint2)}
.cktag.ueberziel{outline:2px dashed var(--green);outline-offset:-3px}
.cktag-zeile{display:flex;justify-content:space-between;align-items:center}
.cknummer{font-size:12px;color:var(--grey);font-variant-numeric:tabular-nums}
.ckplus{color:var(--line);text-decoration:none;font-size:15px;line-height:1;padding:0 4px}
.cktag:hover .ckplus{color:var(--green)}
.ckinhalt{display:flex;flex-direction:column;gap:5px}
.ckinhalt .ckarte{border-radius:6px}

/* ---- Detailseite: Tabs -------------------------------------------------- */
.ctabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line-soft);
  margin-bottom:18px}
.ctabs a,.ctabs button{background:none;border:0;border-bottom:2px solid transparent;
  padding:9px 13px;font-size:13.5px;color:var(--grey);text-decoration:none;cursor:pointer;
  font-family:inherit}
.ctabs a:hover,.ctabs button:hover{color:var(--green-deep)}
.ctabs a.an,.ctabs button.an{color:var(--ink);border-bottom-color:var(--green);font-weight:600}
.ctab{display:none;flex-direction:column;gap:var(--gap)}
.ctab.an{display:flex}
.cdmeta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12.5px;color:var(--grey)}
.cabschnitt{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);
  margin:20px 0 8px;font-weight:600}
.cabschnitt:first-child{margin-top:0}

/* Editor links, Vorschau rechts — ab 1080 Pixeln, darunter untereinander. */
.cdspalten{display:grid;gap:var(--gap);grid-template-columns:minmax(0,1fr)}
@media (min-width:1080px){.cdspalten{grid-template-columns:minmax(0,1.35fr) minmax(280px,.75fr)}}
.cdtext textarea{min-height:20rem;line-height:1.6}
.cdvorschau{position:sticky;top:16px}
.cvtabs{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px}

/* ---- Vorschau ------------------------------------------------------------
   Nicht pixelgenau, sondern nah genug, um den Knick zu sehen. */
.cvorschau{border:1px solid var(--line-soft);border-radius:var(--r-soft);background:var(--white);
  padding:14px;font-size:13.5px;line-height:1.5;max-width:34rem}
.cvkopf{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.cvavatar{width:34px;height:34px;flex:0 0 34px;border-radius:50%;background:var(--green-tint);
  color:var(--green-deep);display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:14px}
.cvwer{display:flex;flex-direction:column;line-height:1.25}
.cvname{font-weight:600;font-size:13.5px}
.cvsub{font-size:11px;color:var(--grey)}
.cvtext{white-space:pre-wrap;word-break:break-word}
.cvmehr{color:var(--grey)}
.cvbild{margin:10px -14px 0;background:var(--green-tint2);overflow:hidden}
.cvbild img{width:100%;display:block}
.cvbild.quadrat{aspect-ratio:1/1}
.cvbild.quadrat img{width:100%;height:100%;object-fit:cover}
.cvbild.leer{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;color:var(--grey);font-size:12px;padding:24px 12px}
.cvleiste{display:flex;gap:18px;margin-top:12px;padding-top:9px;border-top:1px solid var(--line-soft);
  font-size:12px;color:var(--grey)}
.cvfliess{white-space:pre-wrap}
.cvbetreff{display:flex;gap:8px;align-items:baseline;padding-bottom:8px;margin-bottom:8px;
  border-bottom:1px solid var(--line-soft);font-size:12px;color:var(--grey)}
.cvfuss{margin:12px 0 0;font-size:11.5px;color:var(--grey)}
.cvfuss .neg{color:var(--warn)}
.cv-instagram .cvtext strong{margin-right:5px}

/* ---- Varianten ---------------------------------------------------------- */
.cvariante{border:1px solid var(--line-soft)}
.ckwahl,.ckontenwahl{display:grid;gap:8px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr))}
.ckopt,.ckonto{display:flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap;
  border:1px solid transparent;border-radius:var(--r-ctl);padding:10px var(--s3);
  background:var(--feld);font-size:13px;cursor:pointer;
  transition:background var(--t-fast),border-color var(--t-fast)}
.ckopt:hover,.ckonto:hover{background:var(--feld-h)}
.ckopt:has(input:checked),.ckonto:has(input:checked){border-color:var(--green-tint);background:var(--green-wash)}
.ckplattform{font-weight:600}
.ckname{color:var(--grey);font-size:12px}

/* ---- Anlegen ------------------------------------------------------------ */
.cartwahl{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr))}
.cartopt{display:flex;flex-direction:column;gap:2px;border:1px solid transparent;
  border-radius:var(--r-ctl);padding:11px var(--s3);cursor:pointer;background:var(--feld);
  transition:background var(--t-fast),border-color var(--t-fast)}
.cartopt:hover{background:var(--feld-h)}
.cartopt.an,.cartopt:has(input:checked){border-color:var(--green-tint);background:var(--green-wash)}
.cartopt input{position:absolute;opacity:0;width:0;height:0}
.cal{font-weight:600;font-size:13.5px}
.cah{font-size:12px;color:var(--grey);line-height:1.4}
.cmehr > summary{cursor:pointer;font-size:14px;padding:2px 0}
.cmehrinhalt{margin-top:16px;display:flex;flex-direction:column;gap:2px}
.cbeteiligte{margin-top:14px}
.cbeteiligte > summary{cursor:pointer;font-size:13px;color:var(--grey)}
.cpersonen{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.cpersonen li{display:flex;align-items:center;gap:10px;font-size:13.5px;
  padding:5px 0;border-bottom:1px solid var(--line-soft)}
.cpersonen li > label{flex:1 1 auto;display:flex;align-items:center;gap:8px;cursor:pointer}
.cpersonen select{flex:0 0 9rem;font-size:12px;padding:5px 7px}

/* ---- Rollenhilfe -------------------------------------------------------- */
.crollenhilfe{margin-top:14px}
.crollenhilfe > summary{cursor:pointer;font-size:12.5px;color:var(--grey)}
.crollenliste{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:5px;
  font-size:12.5px}
.crollenliste strong{margin-right:8px}

/* ---- Ideen-Board -------------------------------------------------------- */
.cboard{display:grid;gap:12px;grid-template-columns:repeat(5,minmax(0,1fr));align-items:start}
.cspalte{border:1px solid var(--line-soft);border-radius:var(--r-card);background:var(--white);
  padding:12px;display:flex;flex-direction:column;gap:10px;min-height:12rem}
.cspalte.ueberziel{border-color:var(--green);background:var(--green-tint2)}
.cspaltenkopf{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cspaltenkopf h2{font-size:13px;margin:0;letter-spacing:.02em}
.cspalteninhalt{display:flex;flex-direction:column;gap:9px}
.cboardkarte{display:flex;flex-direction:column;gap:4px}
.cspaltenwahl select{width:100%;font-size:11.5px;padding:4px 6px}
.cumwandeln{display:flex;gap:6px;align-items:center}
.cumwandeln select{flex:1 1 auto;font-size:11.5px;padding:4px 6px}
.cleerspalte{margin:0;text-align:center;padding:12px 0}
.cspaltenplus{font-size:12px;color:var(--grey);text-decoration:none}
.cspaltenplus:hover{color:var(--green-deep)}
@media (max-width:1180px){.cboard{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){.cboard{grid-template-columns:1fr}}

/* ---- Zwei Spalten (Kampagnen, Bausteine, Kanäle) ------------------------ */
.czwei{display:grid;gap:var(--gap);grid-template-columns:minmax(0,1fr)}
@media (min-width:1000px){.czwei{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}
.entryrow.an{background:var(--green-tint2);border-radius:6px;padding-left:8px;padding-right:8px}
.entryrow.unter{padding-left:22px;font-size:13px}
.entryrow.aus{opacity:.55}

/* ---- Bausteine ---------------------------------------------------------- */
.cbausteine{display:flex;flex-direction:column;gap:12px}
.cbaustein{border:1px solid var(--line-soft);border-radius:var(--r-soft);padding:12px 14px}
.cbkopf{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;justify-content:space-between}
.cbtext{margin:8px 0;font-family:inherit;font-size:13px;line-height:1.5;white-space:pre-wrap;
  color:var(--ink-soft);background:var(--f8);border-radius:6px;padding:9px 11px;
  max-height:11rem;overflow:auto}
.cbaktionen{display:flex;gap:14px;align-items:center;font-size:12.5px}

/* ---- Medien ------------------------------------------------------------- */
.cmgitter{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr))}
.cmkachel{display:flex;flex-direction:column;gap:4px;text-decoration:none;color:inherit;
  border:1px solid var(--line-soft);border-radius:var(--r-soft);padding:8px;overflow:hidden}
.cmkachel:hover,.cmkachel.an{border-color:var(--green)}
.cmvorschau{display:block;aspect-ratio:4/3;background:var(--green-tint2);border-radius:5px;
  overflow:hidden}
.cmvorschau img{width:100%;height:100%;object-fit:cover;display:block}
.cmkeinbild{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:6px;color:var(--grey);font-size:11px}
.cmname{font-size:12.5px;font-weight:600;line-height:1.3;word-break:break-word}
.cmmeta{font-size:11px;color:var(--grey)}
.cmdetail{display:grid;gap:var(--gap);grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.cmdetail{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}}
.cmbild img{width:100%;border-radius:var(--r-soft);display:block}
.cmbild .cmkeinbild{aspect-ratio:4/3;background:var(--green-tint2);border-radius:var(--r-soft)}
.cupload{display:flex;flex-direction:column;gap:2px}

/* ---- Auswertung --------------------------------------------------------- */
.czahlen td.cbalkenzelle{position:relative;min-width:11rem}
.cbalken{display:block;height:7px;border-radius:6px;background:var(--green-tint);
  min-width:2px;margin-bottom:3px}
.cbalkenwert{font-size:12.5px;color:var(--grey);font-variant-numeric:tabular-nums}
.czgitter{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr))}
.czform{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.czfeld{display:flex;flex-direction:column;gap:3px;font-size:12px}
.czlabel{color:var(--grey)}
.czwert{font-variant-numeric:tabular-nums;font-weight:600}

/* ---- Freigabe ----------------------------------------------------------- */
.cfreigabe{display:flex;flex-direction:column;gap:12px}
.cfstufe{display:flex;gap:12px;align-items:baseline;font-size:13.5px;
  padding:10px 0;border-bottom:1px solid var(--line-soft)}
.cfstufe:last-child{border-bottom:0}
.cwarn{border:1px solid var(--warn);background:var(--warn-tint);color:var(--warn);
  border-radius:var(--r-soft);padding:10px 13px;font-size:12.5px;line-height:1.5}

/* ---- Kleinteile --------------------------------------------------------- */
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0;font-size:13.5px}
.kv dt{color:var(--grey)}
.kv dd{margin:0}
.badge{display:inline-block;font-size:11.5px;
  border:1px solid var(--line);border-radius:6px;padding:1px 7px;color:var(--grey)}
.cwieder{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cbliste{display:flex;flex-direction:column;gap:6px;max-height:16rem;overflow:auto}

@media (max-width:820px){
  /* Der Monatskalender wird auf dem Telefon zur Liste. Sieben Spalten auf
     360 Pixeln sind sieben unlesbare Streifen. */
  .ckwoche{grid-template-columns:1fr}
  .ckkopf{display:none}
  .cktag{min-height:0;border-right:0}
  .cktag:empty{display:none}
  .cktag.fremd{display:none}
  .cdvorschau{position:static}
  .ctabs{overflow-x:auto;flex-wrap:nowrap}
  .ctabs a,.ctabs button{white-space:nowrap}
}

/* Die Zahl am Reiter — wie viele Kanäle, Kommentare, Bilder dranhängen.
   Ohne eigene Form liest sich „Kanäle 2" wie ein Tippfehler. */
.ctzahl{display:inline-block;margin-left:5px;min-width:1.15rem;padding:0 4px;
  border-radius:6px;background:var(--green-tint2);color:var(--green-deep);
  font-size:10.5px;font-weight:600;text-align:center;font-variant-numeric:tabular-nums}
.ctabs a.an .ctzahl{background:var(--green-tint)}

/* Der Knopf für Textbausteine steht unter dem Textfeld und ist kein Block. */
.cbeinfuegen{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:-6px 0 6px}
.cbeinfuegen .cbliste{align-self:stretch;border:1px solid var(--line-soft);border-radius:var(--r-soft);
  padding:8px;gap:5px}
.cbeinfuegen .cbliste input[type=search]{width:100%;margin-bottom:6px}
.cbeinfuegen .cbliste .btn{width:100%;justify-content:flex-start}

/* Die Kanalgruppe im Auswahlraster ueberspannt die ganze Zeile — sonst steht
   die Ueberschrift „LinkedIn" neben einem Kaestchen und liest sich wie eins. */
.ckgruppe{grid-column:1 / -1;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey);font-weight:600;margin:8px 0 -2px}
.ckwahl > .ckgruppe:first-child{margin-top:0}

/* ---- Adressen am Eintrag ------------------------------------------------
   Die Liste ist bewusst schlicht: ein Verweis je Zeile, der Anbieter leise
   dahinter, die Notiz darunter. Kacheln mit Vorschaubild waeren huebscher und
   wuerden aus zehn Links eine Bildergalerie machen, in der man nichts liest. */
.wlinks{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:2px}
.wlinks li{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  padding:7px 0;border-bottom:1px solid var(--line-soft);font-size:13.5px}
.wlinks li:last-child{border-bottom:0}
.wlurl{flex:0 1 auto;word-break:break-word}
.wlhost{font-size:11.5px;color:var(--grey);border:1px solid var(--line);
  border-radius:6px;padding:1px 7px;white-space:nowrap}
.wlnote{flex:1 1 100%;font-size:12.5px;color:var(--grey);line-height:1.45}
.wneulink{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.wneulink input[type=url]{flex:2 1 16rem;min-width:10rem}
.wneulink input[type=text]{flex:1 1 10rem;min-width:8rem}
@media (max-width:640px){
  .wneulink input[type=url],.wneulink input[type=text]{flex:1 1 100%}
}

/* ---- Zugriff beim Anlegen ----------------------------------------------
   Steht jetzt offen unter dem Textfeld und nicht mehr im Aufklapper. Die
   Frage, wer mitliest, ist keine Feineinstellung — und was man nicht sieht,
   entscheidet man nicht, sondern uebernimmt es. */
.wzugriff{border-top:1px solid var(--line-soft);padding-top:16px;margin-top:4px;
  display:flex;flex-direction:column;gap:12px}
.wzugriff .wsichtwahl{margin:0}
.wzugriff .whinweis{margin:0}
.wteilen > summary{cursor:pointer;font-size:13px;color:var(--grey);padding:2px 0}
.wteilen[open] > summary{margin-bottom:8px}
.wteilen .wpersonen{max-height:15rem;overflow:auto}

/* ---- Gruppierte Listen in der linken Spalte ----------------------------
   Vier Ueberschriften statt elf gleich lauter Angebote. Die Ueberschrift ist
   klein und grau: sie soll ordnen, nicht mitreden. */
.wlgruppe{display:flex;flex-direction:column;gap:1px;margin-bottom:14px}
.wlgruppe:last-child{margin-bottom:0}
.wlgruppe > h2{
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);
  font-weight:600;margin:0 0 4px;padding:0 8px;
}
/* „Faellig" mit Inhalt ist das einzige, was von selbst auffallen darf. */
.wlisten a.dringend .wnzahl{background:var(--warn-tint);color:var(--warn)}
.wlisten a.dringend.an .wnzahl{background:rgba(255,255,255,.25);color:#fff}

@media (max-width:1180px){
  /* Quer nebeneinander passen keine Ueberschriften; dort werden die Gruppen
     zu Abstaenden zwischen den Knoepfen. */
  .wlgruppe{flex-direction:row;flex-wrap:wrap;gap:4px;margin:0}
  .wlgruppe > h2{display:none}
}

/* ---- „Was sieht diese Person?" -----------------------------------------
   Ein Balken und vier Zahlen. Keine Torte: bei zwei Werten sagt ein Balken
   dasselbe und laesst sich nebenbei vorlesen. */
.wsicht-block{margin-bottom:22px}
.wsicht-block:last-child{margin-bottom:0}
.wsbalken{height:9px;border-radius:6px;background:var(--green-tint2);overflow:hidden;
  margin:2px 0 10px;max-width:40rem}
.wsb-voll{display:block;height:100%;background:var(--green);border-radius:6px}
.wszahlen{list-style:none;margin:0 0 8px;padding:0;display:flex;gap:20px;flex-wrap:wrap;
  font-size:13.5px}
.wszahlen strong{font-variant-numeric:tabular-nums}
.entryrow .sub{display:block;font-size:12.5px;color:var(--grey);margin-top:2px}
.wsantwort{white-space:nowrap;flex:0 0 auto}

/* ---- Eigene Listen -----------------------------------------------------
   Sie stehen unter den eingebauten Gruppen und sehen aus wie diese: es sind
   Listen, und ein zweites Aussehen waere eine zweite Bedienung. Der einzige
   Unterschied ist der Knopf am Ende. */
.wleigene .wlneu{font-size:12px;color:var(--grey);padding:6px 8px;text-decoration:none}
.wleigene .wlneu:hover{color:var(--green-deep)}

.wsammlungen .wsmarken{list-style:none;margin:0 0 10px;padding:0;
  display:flex;flex-wrap:wrap;gap:6px}
.wsmarken li{display:inline-flex;align-items:center;gap:2px;
  border:1px solid var(--line);border-radius:6px;padding:3px 4px 3px 11px;font-size:12.5px}
.wsmarken li:hover{border-color:var(--green)}
.wsmarken a{text-decoration:none;color:var(--ink-soft)}
.wsmarken .wweg{padding:0 5px;line-height:1}
.wneuliste{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.wneuliste select{flex:1 1 12rem;min-width:9rem}

/* ---- Schnelleingabe in der Liste --------------------------------------
   Eine Zeile unter der Suche. Sie sieht absichtlich fast aus wie das
   Suchfeld darueber: beides ist „hier tippen", und zwei verschiedene
   Gestaltungen fuer dieselbe Geste waeren eine Erklaerung mehr. */
.wschnell{display:flex;gap:8px;align-items:center;flex:0 0 auto;
  padding:12px 18px;border-bottom:1px solid var(--line-soft);background:var(--f8)}
.wschnell input[type=text]{flex:1 1 auto;min-width:0}
.wschnell .btn{flex:0 0 auto}
@media (max-width:820px){
  .wschnell{padding:10px 14px}
}

/* ---- Benachrichtigungen als Leiste --------------------------------------
   Sie schiebt sich von rechts herein und laesst die Seite darunter stehen.
   Das ist der ganze Zweck: nachsehen, ohne den Platz zu verlieren, an dem man
   gerade war. */
.notesschatten{
  position:fixed;inset:0;z-index:60;background:rgba(33,37,41,.18);
  backdrop-filter:blur(1px);
}
.notespanel{
  position:fixed;top:0;right:0;bottom:0;z-index:61;width:min(400px,92vw);
  background:var(--white);border-left:1px solid var(--line-soft);
  box-shadow:-20px 0 60px rgba(30,26,40,.09);
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .18s ease-out;
}
.notespanel.auf{transform:translateX(0)}
@media (prefers-reduced-motion:reduce){
  .notespanel{transition:none}
}

.npkopf{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 18px;border-bottom:1px solid var(--line-soft);flex:0 0 auto;
}
.npkopf h2{margin:0;font-size:1.05rem;display:flex;align-items:center;gap:8px}
.npzu{
  border:0;background:none;font-size:22px;line-height:1;color:var(--grey);
  cursor:pointer;padding:0 4px;font-family:inherit;
}
.npzu:hover{color:var(--ink)}

.npinhalt{flex:1 1 auto;overflow:auto;padding:8px 18px 18px}
.npliste{list-style:none;margin:0;padding:0}
.npliste li{
  display:flex;flex-direction:column;gap:3px;
  padding:11px 0 11px 14px;border-bottom:1px solid var(--line-soft);
  font-size:13.5px;line-height:1.45;position:relative;
}
.npliste li:last-child{border-bottom:0}
/* Ungelesenes bekommt einen Strich, keine Farbe: bei zehn Zeilen waeren zehn
   farbige Punkte ein Muster und kein Hinweis. */
.npliste li.neu::before{
  content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;
  background:var(--green);border-radius:2px;
}
.npliste a{color:var(--ink);text-decoration:none}
.npliste a:hover{color:var(--green-deep);text-decoration:underline}
.npzeit{font-size:11.5px;color:var(--grey)}

.npfuss{
  flex:0 0 auto;padding:12px 18px;border-top:1px solid var(--line-soft);
  font-size:12.5px;background:var(--f8);
}

/* ==========================================================================
   Bewerbercoach

   Ruhig gehalten und ohne Farbverlauf. Was hier steht, ist die Akte eines
   Menschen; sie soll sich lesen lassen wie eine Akte und nicht wie ein
   Vertriebsbildschirm. Farbe gibt es an genau zwei Stellen: an der Kachel,
   die zu spaet ist, und am Stand.
   ========================================================================== */

.ckacheln{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
/* Vier Kacheln waren vier Objekte. Gefragt sind vier Zahlen. Sie stehen
   jetzt gemeinsam auf einer weissen Flaeche, getrennt nur durch eine
   Haarlinie — grosse Zahl, kleine ruhige Beschriftung darunter. */
.ckacheln{
  background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r-card);
  gap:0;padding:clamp(22px,2.8vw,30px) clamp(24px,3.2vw,36px);
}
.ckachel{
  display:flex;flex-direction:column;gap:var(--s2);
  background:none;border:0;border-radius:0;
  padding:var(--s1) 0;text-decoration:none;color:var(--ink-soft);
  transition:color var(--t-fast);
}
.ckachel + .ckachel{border-left:1px solid var(--hairline);padding-left:clamp(20px,2.6vw,32px)}
.ckachel:hover{text-decoration:none}
.ckachel:hover .cktext{color:var(--ink)}
.ckzahl{font-size:2.1rem;line-height:1.05;font-weight:500;color:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cktext{font-size:12.5px;color:var(--grey);font-weight:500;transition:color var(--t-fast)}
.ckachel.warnt .ckzahl{color:var(--warn)}
.ckachel.gut .ckzahl{color:var(--green-deep)}
.ckachel.still .ckzahl{color:var(--grey)}

/* Die zehn Staende als Reihe. Die Gruppe gibt den Ton, nicht der einzelne
   Stand: zehn Farben waeren ein Muster und keine Auskunft. */
/* Zehn umrandete Kaesten nebeneinander waren ein Gitter, kein Ueberblick.
   Jetzt zehn Spalten aus Zahl und Wort; die Gruppe zeigt sich als kurzer
   Strich ueber der Zahl statt als farbige Kante um einen Kasten. */
/* Der Zeilenabstand muss groesser sein als der Abstand zwischen Strich und
   Zahl — sonst liest man den Strich der zweiten Reihe als Schlussstrich der
   ersten statt als Marke der Zahl darunter. */
.cstaende{display:grid;gap:var(--s5) var(--s5);grid-template-columns:repeat(auto-fit,minmax(118px,1fr))}
.cstand{
  display:flex;flex-direction:column;gap:var(--s1);padding:var(--s3) 0 var(--s3);
  border:0;border-top:2px solid var(--hairline);border-radius:0;
  text-decoration:none;color:var(--ink-soft);background:none;
  transition:border-color var(--t-fast);
}
.cstand:hover{border-top-color:var(--green);text-decoration:none}
.cstand:hover .cslabel{color:var(--ink)}
.cszahl{font-size:1.4rem;font-weight:500;color:var(--ink);line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.cslabel{font-size:11.5px;color:var(--grey);line-height:1.35;transition:color var(--t-fast)}
/* Vier Farbtoene auf zehn Striche gestreut lesen sich nicht als Gruppierung,
   sondern als Zufall — zumal die Gruppen nirgends benannt sind. Zwei
   Zustaende genuegen und sagen das Wesentliche: laeuft gerade (gruen) oder
   nicht (grau). */
.cstand.g-start,.cstand.g-ende{border-top-color:var(--hairline)}
.cstand.g-arbeit,.cstand.g-haus{border-top-color:var(--green-tint)}

.cpill{
  display:inline-block;border-radius:6px;padding:2px 10px;
  font-size:11px;font-weight:600;white-space:nowrap;
  border:1px solid var(--line);background:var(--f8);color:var(--grey);
}
.cpill{border-color:transparent}
.cpill.g-arbeit{background:var(--green-wash);color:var(--green-deep)}
.cpill.g-haus{background:var(--green-tint2);color:var(--green-deep)}
.cpill.g-ende{background:var(--f8);color:var(--grey)}

/* Heute und demnaechst: drei Spalten, die je eine Frage beantworten. */
.cdrei{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.cdkopf{display:flex;align-items:center;gap:7px;font-size:10.5px;margin:0 0 var(--s3);
  color:var(--grey);font-weight:600;text-transform:uppercase;letter-spacing:.14em}
.cdliste{list-style:none;margin:0;padding:0}
.cdliste li{padding:8px 0;border-bottom:1px solid var(--line-soft);
  display:flex;flex-direction:column;gap:2px;font-size:13.5px}
.cdliste li:last-child{border-bottom:0}
.cdliste a{color:var(--ink);text-decoration:none}
.cdliste a:hover{color:var(--green-deep);text-decoration:underline}
.cdliste li.spaet strong{color:var(--warn)}

/* Der Filterkasten der Kandidatenliste.
   `align-items:end` richtete alles an der Unterkante seiner Zeile aus. In der
   ersten Reihe ist das richtig — vier gleich hohe Felder. In der zweiten
   standen das Ankreuzfeld (22 Pixel hoch) und die Schaltflaechen (68 Pixel)
   dadurch 46 Pixel versetzt zueinander: dieselbe Zeile, zwei Grundlinien.
   `end` gilt jetzt nur noch fuer die Felder. */
.cfilter{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  align-items:center}
.cfilter > .field{align-self:end;margin-bottom:0}
.cfilter .actions{margin:0}

/* Zwei Felder nebeneinander, solange Platz ist. */
.cfeldpaar{display:grid;gap:0 16px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.ctrenn{border:0;border-top:1px solid var(--line-soft);margin:18px 0}

/* Unterlagen. */
.cuart{padding:12px 0;border-bottom:1px solid var(--line-soft)}
.cuart:last-of-type{border-bottom:0}
.cuakopf{font-size:13.5px;margin:0 0 6px;display:flex;align-items:center;gap:8px}
.cudatei{display:flex;gap:10px;align-items:flex-start;padding:7px 0}
.cudtext{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.cudtext a{color:var(--ink);text-decoration:none}
.cudtext a:hover{color:var(--green-deep);text-decoration:underline}
.cudtun{flex:0 0 auto;display:flex;gap:10px;align-items:center;font-size:12px}
.cufassungen{margin-top:4px;font-size:12px}
.cufassungen summary{cursor:pointer;color:var(--grey)}
.cufassungen ul{list-style:none;margin:6px 0 0;padding:0 0 0 12px;
  border-left:2px solid var(--line-soft)}
.cufassungen li{display:flex;gap:8px;align-items:baseline;padding:3px 0}
.cuneu summary,.cuablegen summary{cursor:pointer;color:var(--green-deep);font-size:13px;
  font-weight:600;padding:8px 0}
.cuablegen{border-top:1px solid var(--line-soft);margin-top:8px}

/* Notizen. */
.cnotizform textarea{width:100%}
.cnotizen{list-style:none;margin:14px 0 0;padding:0}
.cnotizen > li{padding:11px 0;border-bottom:1px solid var(--line-soft)}
.cnotizen > li:last-child{border-bottom:0}
.cnkopf{display:flex;gap:9px;align-items:baseline;flex-wrap:wrap;font-size:13px}
.cnotizen p{margin:5px 0 0;font-size:13.5px;line-height:1.55;white-space:pre-wrap}

/* Termine und Aufgaben teilen sich eine Darstellung: beide sind eine Zeile
   mit einem Haken davor. */
.ctermine{list-style:none;margin:0;padding:0}
.ctermine > li{display:flex;gap:10px;align-items:flex-start;padding:9px 0;
  border-bottom:1px solid var(--line-soft)}
.ctermine > li:last-child{border-bottom:0}
.ctinhalt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:13.5px}
.ctermine > li.fertig .ctinhalt strong{text-decoration:line-through;color:var(--grey)}
.ctermine > li.spaet .ctinhalt strong{color:var(--warn)}
.ctermine .wzhkn{margin-top:2px}

.clinks{list-style:none;margin:0;padding:0}
.clinks > li{padding:8px 0;border-bottom:1px solid var(--line-soft);
  display:flex;flex-direction:column;gap:2px;font-size:13.5px}
.clinks > li:last-child{border-bottom:0}

/* Die Schnelleingabe unter Aufgaben und Adressen. */
.cschnell{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px;
  padding-top:12px;border-top:1px solid var(--line-soft)}
.cschnell input[type=text],.cschnell input[type=url]{flex:1 1 150px;min-width:0}
.cschnell input[type=date],.cschnell select{flex:0 0 auto}

.cbeteiligen{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.cbeteiligen select{flex:1 1 130px;min-width:0}

/* Der Verlauf. Eine Linie mit Punkten, keine Kaesten: er wird ueberflogen
   und nicht gelesen. */
.czeitleiste{list-style:none;margin:0;padding:0 0 0 16px;
  border-left:2px solid var(--line-soft)}
.czeitleiste > li{position:relative;padding:7px 0 7px 4px}
.czpunkt{position:absolute;left:-21px;top:13px;width:7px;height:7px;
  border-radius:50%;background:var(--line);border:2px solid #fff}
.czinhalt{display:flex;flex-direction:column;gap:1px;font-size:13px;line-height:1.5}
.czinhalt strong{color:var(--ink)}

/* Die Akte bekommt links mehr Platz als rechts: links stehen Formular,
   Unterlagen und Notizen, rechts kurze Listen. Eigene Klasse und nicht
   `.czwei` allgemein, damit die anderen Seiten mit zwei Spalten bleiben,
   wie sie sind. */
@media (min-width: 1000px) {
  .czwei.ccase{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
}

/* Vorstellungen in der Kandidatenakte. Jede in einem eigenen Block: sie ist
   der Nachweis einer Uebermittlung und soll sich als Einheit lesen lassen. */
.cvorstellung{
  border:1px solid var(--line-soft);border-radius:var(--r-soft);
  padding:13px 15px;margin:0 0 12px;
}
.cvorstellung:last-of-type{margin-bottom:0}
.cvkopf{display:flex;gap:9px;align-items:baseline;flex-wrap:wrap;margin-bottom:8px}
.cvkopf strong{font-size:14px}
/* `.sub` ist sonst an Tabellenzellen gebunden; hier steht es in einem
   Flexkasten und braucht seine eigene Groesse, sonst liest sich der Ort
   wie ein Teil des Namens. */
.cvkopf .sub{font-size:12px;color:var(--grey)}
.cvdaten dt{white-space:nowrap}
/* Ein fehlendes Einverstaendnis faellt auf. Es ist die eine Angabe in
   diesem Block, deren Fehlen etwas bedeutet. */
.cvdaten .neg{color:var(--warn);font-weight:600}
.cvdaten .sub{display:block;font-size:12px;color:var(--grey);margin-top:2px}
.cvdaten{font-size:13px;gap:3px 14px}
.cvtun{display:flex;gap:14px;align-items:center;margin-top:10px;
  border-top:1px solid var(--line-soft);padding-top:8px}
.cvtun .cuneu summary{padding:0}

/* ==========================================================================
   Meine Passwörter

   Die Liste ist bewusst nüchtern: keine Kacheln, keine Farben, keine
   Vorschau. Was hier steht, will man kopieren und weiterarbeiten, nicht
   ansehen. Und was man nicht anzeigt, kann auch niemand über die Schulter
   mitlesen.
   ========================================================================== */
.tmeldung{
  margin:0 0 4px;font-size:13.5px;color:var(--grey);
  min-height:0;transition:min-height .15s;
}
.tmeldung.an{
  min-height:20px;padding:10px 14px;border-radius:var(--r-soft);
  background:var(--green-tint2);color:var(--ink-soft);
}
.tmeldung.an.fehler{background:var(--warn-tint);color:var(--warn)}

.tliste{list-style:none;margin:0;padding:0}
.tzeile{
  display:flex;flex-direction:column;gap:4px;
  padding:14px 0;border-bottom:1px solid var(--line-soft);
}
.tzeile:last-child{border-bottom:0}
.tzeile.kaputt{opacity:.6}

.tkopf{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px}
.ttitel{font-weight:600}
.thost{font-size:12.5px;color:var(--grey);text-decoration:none}
.thost:hover{color:var(--green-deep);text-decoration:underline}
.tbenutzer{font-size:13.5px;color:var(--ink-soft)}
.tnotiz{font-size:13px;color:var(--grey);max-width:70ch}

.taktionen{display:flex;flex-wrap:wrap;gap:14px;margin-top:4px}

/* Der Klartext steht in einer eigenen Zeile und nicht als Wert im Feld: ein
   Passwort, das in einem Eingabefeld sichtbar wird, wandert in die
   Formularspeicher des Browsers. */
.tklartext{
  display:block;margin-top:6px;padding:8px 11px;
  background:var(--f8);border:1px solid var(--line-soft);border-radius:var(--r-soft);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13.5px;word-break:break-all;user-select:all;
}

.tunterzeile{display:flex;gap:14px;margin-top:5px}

/* Die Anleitung im Intelligence-Bereich.
   Nicht als .note gebaut: dort macht das Stylesheet aus jedem <strong> einen
   eigenen Block, und in einer Aufzaehlung zerreisst das die Zeile mitten im
   Satz. Ein hervorgehobenes Wort in einem Satz ist <b>, kein Absatz. */
.ischritte{
  margin:0 0 18px;padding:16px 18px;max-width:74ch;
  background:var(--green-tint2);border-radius:var(--r-soft);
}
.ischritte .feldlabel{margin:0 0 8px}
.ischritte ol{margin:0;padding-left:20px;font-size:13.5px;line-height:1.65;color:var(--ink-soft)}
.ischritte li{margin-bottom:5px}
.ischritte li:last-child{margin-bottom:0}
.ischritte b{font-weight:600;color:var(--ink)}

/* Der geborgene Entwurf steht oben im Formular und ist nicht zu übersehen.
   Er verschwindet erst, wenn jemand entscheidet: einsetzen oder verwerfen. */
.note.entwurf{margin:0 0 18px}
.note.entwurf .actions{margin-top:10px}

/* Der Hinweis auf eine Seite, die zu lange offen liegt.
   Oben, über allem, und nicht wegklickbar: was darunter steht, würde beim
   Abschicken verloren gehen. */
.sitzungalt{
  position:fixed;top:0;left:0;right:0;z-index:80;
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  padding:12px 18px;background:var(--warn-tint);
  border-bottom:1px solid var(--warn);
  box-shadow:var(--shadow-lift);
}
.sitzungalt p{margin:0;font-size:13.5px;line-height:1.45;color:var(--warn)}
.sitzungalt strong{color:var(--warn)}

/* Die Ablagefläche für den Lebenslauf.

   Das Dateifeld liegt unsichtbar über der ganzen Fläche: dann ist der Klick
   irgendwo darin derselbe wie der Klick auf „Durchsuchen", und der Browser
   nimmt eine hineingezogene Datei auch ohne JavaScript an. Das Skript daneben
   macht nur sichtbar, was passiert. */
.ablage{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  min-height:96px;padding:16px 18px;
  border:1.5px dashed var(--line);border-radius:var(--r-soft);
  background:var(--f8);
  transition:border-color .12s ease,background-color .12s ease;
}
.ablage:hover{border-color:var(--green);background:var(--green-tint2)}
.ablage input[type=file]{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;cursor:pointer;
}
.ablage input[type=file]:focus-visible + .ablage-text{outline:2px solid var(--green);outline-offset:4px;border-radius:4px}
.ablage-text{margin:0;text-align:center;font-size:13.5px;line-height:1.5;color:var(--grey);pointer-events:none}
.ablage-link{color:var(--green-deep);text-decoration:underline}
.ablage.drueber{border-color:var(--green);border-style:solid;background:var(--green-tint)}
.ablage.gefuellt{border-style:solid;border-color:var(--green);background:var(--green-tint2)}
.ablage.gefuellt .ablage-text{color:var(--ink-soft)}
.ablage-liste{margin:0;padding:0;list-style:none;font-size:13px}
.ablage-liste li{margin:2px 0}

/* Die Einschätzung in der Bewerberakte.
   Radiofelder statt Sternchen: „nicht bewertet" ist ein eigener Zustand, und
   Sternchen können ihn nicht darstellen, ohne wie eine Null auszusehen. */
.bwnote{border:0;padding:0;margin:0 0 18px}
.bwnote legend{font-size:13px;font-weight:600;color:var(--ink);padding:0;margin-bottom:7px}
.bwnote-reihe{display:flex;flex-wrap:wrap;gap:8px}
.bwnote-stufe{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 12px;border:1px solid var(--line);border-radius:6px;
  background:#fff;font-size:13px;color:var(--grey);cursor:pointer;
}
.bwnote-stufe:hover{border-color:var(--green);color:var(--ink)}
.bwnote-stufe input{margin:0;accent-color:var(--green)}
.bwnote-stufe:has(input:checked){border-color:var(--green);background:var(--green-tint2);color:var(--ink);font-weight:600}

/* Der Absagegrund steht im Stand-Formular, nicht daneben: er wird mit dem
   Knopf zusammen abgeschickt. Eine eigene Zeile bekommt er trotzdem —
   zwischen den Stufen sähe er aus wie eine weitere Stufe. */
.bwgrund{flex:1 0 100%;margin:14px 0 0;max-width:60ch}
.bwgrund input{width:100%}

/* Die Einschätzung in der Bewerbungsliste: fünf Punkte, die gefüllten in
   Grün. Kein Sternchen — Sternchen lesen sich wie eine Bewertung des
   Menschen, Punkte wie eine Notiz. */
.bwnote-marke{white-space:nowrap;color:var(--green);letter-spacing:1px}
.bwnote-marke .bwnote-rest{color:var(--line)}

/* Der gelesene Text des Lebenslaufs. Zugeklappt, weil er lang ist. */
.cvtext > summary{cursor:pointer;font-size:1rem;list-style:none;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.cvtext > summary::-webkit-details-marker{display:none}
.cvtext > summary::before{content:"▸";color:var(--green);font-size:12px}
.cvtext[open] > summary::before{content:"▾"}
.cvtext-inhalt{
  margin:14px 0 0;padding:14px 16px;max-height:32rem;overflow:auto;
  background:var(--f8);border:1px solid var(--line-soft);border-radius:var(--r-soft);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px;line-height:1.65;color:var(--ink-soft);
  white-space:pre-wrap;overflow-wrap:anywhere;
}

/* Die Selbstprüfung im Systemzustand.
   Die Ampel steht in der Überschrift, damit man sie sieht, ohne zu lesen. */
.pruefkarte.fehler{border-color:var(--warn)}
.pruefampel{
  font-size:12px;font-weight:600;letter-spacing:.02em;
  padding:5px 12px;border-radius:6px;white-space:nowrap;
}
.pruefampel.ok{background:var(--green-tint2);color:var(--green-deep)}
.pruefampel.warnung{background:var(--warn-tint);color:var(--warn)}
.pruefampel.fehler{background:var(--warn);color:#fff}
.prueflist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.prueflist li{display:flex;gap:11px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--line-soft)}
.prueflist li:first-child{border-top:0}
.prueflist strong{display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:2px}
.prueflist .small{display:block;line-height:1.5}
.pruefpunkt{
  flex:0 0 auto;width:9px;height:9px;border-radius:50%;margin-top:6px;
  background:var(--green);
}
.prueflist li.warnung .pruefpunkt{background:var(--warn)}
.prueflist li.fehler .pruefpunkt{background:var(--warn);box-shadow:0 0 0 3px var(--warn-tint)}

/* --- Zwei-Faktor-Einrichtung ----------------------------------------------
   Zwei Klassen, die die Vorlage seit dem 18.09. benutzt und die es im
   Stilblatt nicht gab: die Rückfallcodes standen dadurch in der Schrift des
   Browsers und die Knöpfe untereinander statt nebeneinander. */
.codeliste{
  background:var(--feld);border:1px solid var(--line);border-radius:8px;
  padding:var(--s4);margin:0;overflow-x:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.btnzeile{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap}
.btnzeile form{margin:0}

/* --- Tageszahl einer Abwesenheit -------------------------------------------
   Das Feld steht in einer Tabellenzelle, und auf dem Telefon wird aus jeder
   Zelle eine Flexzeile mit der Beschriftung links und dem Wert rechts. Ein
   `display:inline`-Formular schrumpft darin nicht: Feld und Knopf standen
   zusammen 156 Pixel breit in einer 3 Pixel schmalen Zelle und ragten gut
   200 Pixel darüber hinaus. Sichtbar war es, treffen konnte man es kaum. */
.tagesfeld{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;justify-content:flex-end}
.tagesfeld input[type=text]{width:5em;min-width:4em;text-align:right}
@media (max-width:760px){
  /* Die Zelle ist auf dem Telefon eine Flexzeile mit der Beschriftung links.
     Feld plus Knopf passen daneben nicht mehr, also darf die Zeile umbrechen
     und das Formular die volle Breite nehmen — sonst steht der Knopf halb
     außerhalb und man trifft ihn nur mit Glück. */
  table.data td:has(> .tagesfeld){align-items:center;flex-wrap:wrap}
  .tagesfeld{flex:1 1 100%;justify-content:flex-start;margin-top:var(--s2)}
  .tagesfeld input[type=text]{text-align:left}
}
@media (pointer:coarse){
  /* Dieselbe Regel wie überall sonst in dieser Oberfläche: was gedrückt
     werden soll, ist mindestens 44 Pixel hoch. */
  .tagesfeld .btn{min-height:44px}
  .tagesfeld input[type=text]{min-height:44px}
}


/* ============================================================
   SEITENLEISTE IN LILA, 01.10.2026
   ------------------------------------------------------------
   Gewuenscht war eine lila Seitenleiste. Statt die bestehenden
   Regeln umzuschreiben, steht hier ein geschlossener Block am
   Ende der Datei. Er faerbt die Flaeche und alles, was darauf
   liegt. Nimmt man ihn heraus, ist die Seitenleiste wieder weiss,
   ohne dass sonst etwas kippt.

   Das Wortlogo ist ein Bild der Hauptwebsite und dort gruen. Auf
   dunklem Grund waere es schlecht zu lesen, deshalb wird es per
   Filter rein weiss gezeichnet - das braucht keine zweite Datei
   und bleibt richtig, falls die Website ihr Logo einmal aendert.
   ============================================================ */
.sidebar{
  background:var(--green-deep);
  border-right:1px solid rgba(255,255,255,.10);
}
.sidebar .brand{color:#fff}
.sidebar .brand img{filter:brightness(0) invert(1)}
.sidebar .brand .sub{color:rgba(255,255,255,.62)}
.sidebar .brand .fallback{color:#fff}
.sidebar .navtoggle{color:rgba(255,255,255,.80);background:transparent}
.sidebar .navtoggle:hover{background:rgba(255,255,255,.12);color:#fff}
.sidebar .mainnav a{color:rgba(255,255,255,.78)}
.sidebar .mainnav a:hover{background:rgba(255,255,255,.10);color:#fff}
.sidebar .mainnav a.active{background:rgba(255,255,255,.17);color:#fff;font-weight:600}
.sidebar .mainnav a .navicon,
.sidebar .mainnav a:hover .navicon,
.sidebar .mainnav a.active .navicon{color:currentColor;opacity:.92}
.sidebar .navzahl{background:rgba(255,255,255,.22);color:#fff}
.sidebar .mainnav a.active .navzahl{background:#fff;color:var(--green-deep)}
.sidebar .usermenu{border-top:1px solid rgba(255,255,255,.12)}
.sidebar .usermenu .name{color:#fff}
.sidebar .usermenu .name:hover{background:rgba(255,255,255,.10)}
.sidebar .usermenu .avatar{background:rgba(255,255,255,.20);color:#fff}
.sidebar .usermenu .who .wn{color:#fff}
.sidebar .usermenu .who .wr{color:rgba(255,255,255,.60)}
.sidebar .usermenu .name:hover .wn{color:#fff}
.sidebar .linkbtn{color:rgba(255,255,255,.70)}
.sidebar .linkbtn:hover{color:#fff}
/* Der eigene Rollbalken der Seitenleiste, sonst steht ein heller
   Streifen auf dunklem Grund. */
.sidebar::-webkit-scrollbar{width:8px}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:4px}
.sidebar::-webkit-scrollbar-track{background:transparent}
.sidebar{scrollbar-color:rgba(255,255,255,.22) transparent}

/* Auf dem Handy wird die Seitenleiste zur Kopfzeile. Die Trennlinien
   stammen von dort noch aus der hellen Fassung und saehen als heller
   Strich auf dem dunklen Grund falsch aus. Deshalb hier nachgezogen.
   Steht nach dem Block oben, damit es die Medienabfrage ueberstimmt. */
@media (max-width:960px){
  .sidebar{
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.14);
  }
  .sidebar .mainnav{border-top:1px solid rgba(255,255,255,.14)}
  .sidebar .usermenu{border-top:0}
  /* Der Knopf, der das Menue aufklappt, liegt jetzt auf dunklem Grund. */
  .sidebar .navtoggle{color:#fff}
}


/* ============================================================
   ANMELDESEITE IN LILA, 02.10.2026
   ------------------------------------------------------------
   Die Anmeldung ist das Erste, was jemand von People sieht. Sie
   traegt jetzt dieselbe Flaeche wie die Seitenleiste, damit der
   Eindruck vom ersten Bild an stimmt.

   Das Formular bleibt bewusst auf weisser Karte. Dunkle
   Eingabefelder lesen sich schlechter, und wer sich anmelden
   will, soll nicht suchen muessen, wo er tippt. Dafuer traegt
   die Karte einen kraeftigeren Schatten, damit sie auf dem
   dunklen Grund steht.
   ============================================================ */
.authpage{
  background:linear-gradient(170deg, var(--green-deep) 0%, #2E1A5C 100%);
  /* dvh statt vh: auf dem Handy rechnet vh die Adressleiste mit.
     Die Seite ragt dann unten heraus und wackelt beim Scrollen.
     Browser ohne dvh behalten die 100vh aus der Regel darueber. */
  min-height:100dvh;
}
.authpage .brand img{filter:brightness(0) invert(1)}
.authpage .brand,
.authpage .brand .fallback{color:#fff}
.authpage .brand .sub{color:rgba(255,255,255,.64)}
.authpage .card{
  background:var(--white);
  box-shadow:0 18px 50px rgba(20,10,45,.28);
}
.authpage .authfoot{color:rgba(255,255,255,.66)}
.authpage .authfoot a{color:rgba(255,255,255,.88)}