/* Dienstplan. Gedacht für den Bildschirm im Büro: viele Zeilen, ruhige
   Flächen, und die eine Zahl - die Auslastung - soll ins Auge springen. */
:root {
  --dunkel: #2A2520;
  --akzent: #B4491F;
  --grund: #FAF7F1;
  --sand: #E9E2D6;
  --text: #5C534A;
  --gedaempft: #6E655A;
  --gruen: #3F6B54;
  --rot: #A3301B;
  --radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--dunkel);
  font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.45;
}

/* ---------- Kopf ---------- */
header { background: var(--dunkel); color: var(--grund); padding: 14px 20px 0; }
.kopf { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.markenzeile { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.markenzeile .logo { height: 32px; width: auto; display: block; }
.kopf h1 { font-size: 21px; margin: 0; letter-spacing: .02em; }
.slogan {
  font-size: 14px; font-weight: 500; color: var(--akzent); white-space: nowrap;
  padding-left: 14px; border-left: 1px solid #4C453C;
}
@media (max-width: 760px) { .slogan { display: none; } }
.steuerung { margin-left: auto; }
.rechnen {
  background: var(--akzent); color: #fff; border: 0; border-radius: 6px;
  padding: 7px 15px; font: inherit; font-size: 14px; cursor: pointer;
}
.rechnen:hover { background: #97401B; }

.haeuser { display: flex; gap: 2px; margin-top: 14px; flex-wrap: wrap; }
.haeuser a {
  color: #C9C0B4; text-decoration: none; padding: 7px 14px 6px;
  border-radius: 6px 6px 0 0; font-size: 15px; display: flex;
  align-items: baseline; gap: 8px;
}
.haeuser a:hover { background: #3A342D; color: var(--grund); }
.haeuser a.aktiv { background: var(--grund); color: var(--dunkel); font-weight: 600; }
.haeuser .modell { font-size: 12px; color: var(--gedaempft); }
.haeuser a.aktiv .modell { color: var(--akzent); }

.zeitraum {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--grund); color: var(--dunkel);
  padding: 10px 16px; border-bottom: 1px solid var(--sand);
}
.blaettern {
  text-decoration: none; color: var(--dunkel); background: var(--sand);
  border-radius: 6px; width: 28px; height: 28px; display: grid;
  place-items: center; font-size: 17px; line-height: 1;
}
.blaettern:hover { background: #DCD3C4; }
.zeitraum .monat { font-weight: 700; font-size: 17px; min-width: 4.5em; }
.reiter { display: flex; gap: 4px; margin-left: 8px; }
.reiter a {
  text-decoration: none; color: var(--gedaempft); padding: 5px 12px;
  border-radius: 6px; font-size: 15px; display: flex; align-items: center; gap: 6px;
}
.reiter a:hover { background: var(--sand); color: var(--dunkel); }
.reiter a.aktiv { background: var(--dunkel); color: var(--grund); }
.reiter .zahl {
  background: var(--sand); color: var(--dunkel); border-radius: 9px;
  padding: 0 6px; font-size: 12px; font-weight: 700;
}
.reiter .zahl.rot { background: var(--rot); color: #fff; }
.reiter a.aktiv .zahl { background: #4C453C; color: var(--grund); }
.reiter a.aktiv .zahl.rot { background: var(--rot); color: #fff; }
.zeitraum .summe { margin-left: auto; color: var(--gedaempft); font-size: 14px; }

.banner {
  margin: 0; padding: 8px 20px; background: #FBEEDC;
  border-bottom: 1px solid #E8D5B4; color: #7A5B22; font-size: 14px;
}

main { padding: 18px 20px 60px; }

/* ---------- Listen ---------- */
.liste {
  width: 100%; border-collapse: collapse; background: #fff;
  border: 1px solid var(--sand); border-radius: var(--radius); overflow: hidden;
}
.liste th, .liste td { padding: 8px 12px; text-align: left; vertical-align: baseline; }
.liste thead th {
  background: var(--sand); font-size: 13px; font-weight: 600;
  color: var(--gedaempft); text-transform: uppercase; letter-spacing: .04em;
  white-space: nowrap;
}
.liste tbody tr { border-top: 1px solid #F0EBE1; }
.liste tbody tr.neuertag { border-top: 1px solid var(--sand); }
.liste tbody tr:hover { background: #FDFBF7; }
.liste tbody tr.warn { background: #FDF3EF; }
.liste tbody tr.warn:hover { background: #FBEBE4; }
.liste tbody tr.offen td { color: var(--gedaempft); font-style: italic; }
.liste .z { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.liste .a { width: 210px; }
.liste .nr { color: var(--gedaempft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.liste .leise { color: var(--gedaempft); }

.marke {
  display: inline-block; background: var(--sand); color: var(--gedaempft);
  border-radius: 5px; padding: 1px 7px; font-size: 12.5px; white-space: nowrap;
}
.marke.gut { background: #E3EDE7; color: var(--gruen); }
.marke.hand { background: #FBEEDC; color: #8A6420; }

.hinweiskasten {
  background: #fff; border: 1px solid var(--sand); border-left: 4px solid var(--akzent);
  border-radius: 8px; padding: 12px 16px; margin-bottom: 16px;
}
.hinweiskasten ul { margin: 8px 0 0; padding-left: 18px; }
.hinweiskasten li { margin-bottom: 4px; }
code {
  background: var(--sand); border-radius: 4px; padding: 1px 6px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13.5px;
}

.balken {
  display: inline-block; width: 120px; height: 9px; background: var(--sand);
  border-radius: 5px; overflow: hidden; vertical-align: middle; margin-right: 8px;
}
.balken i { display: block; height: 100%; background: var(--gruen); }
.balken i.voll { background: var(--akzent); }
.liste .a b { font-variant-numeric: tabular-nums; }
.grenze { display: block; font-size: 12.5px; color: var(--akzent); }
.leer { color: var(--gedaempft); font-size: 14px; }

.fuss { color: var(--gedaempft); font-size: 14px; max-width: 62ch; margin-top: 14px; }
.leerlauf { color: var(--gedaempft); }

/* ---------- Konflikte ---------- */
.konflikte { list-style: none; margin: 0; padding: 0; }
.konflikte li {
  display: grid; grid-template-columns: 6.5rem 6rem 11rem 1fr auto;
  gap: 12px; align-items: baseline; background: #fff;
  border: 1px solid var(--sand); border-left: 4px solid var(--sand);
  border-radius: 8px; padding: 9px 14px; margin-bottom: 6px;
}
.konflikte li.verstoss { border-left-color: var(--rot); }
.konflikte li.warnung { border-left-color: var(--akzent); }
.konflikte li.hinweis { border-left-color: var(--sand); }
.konflikte .stufe { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.konflikte li.verstoss .stufe { color: var(--rot); }
.konflikte li.warnung .stufe { color: var(--akzent); }
.konflikte li.hinweis .stufe { color: var(--gedaempft); }
.konflikte .wann { color: var(--gedaempft); font-variant-numeric: tabular-nums; }
.konflikte .wer { font-weight: 600; }
.konflikte .woher { color: var(--gedaempft); font-size: 12.5px; }

@media (max-width: 860px) {
  .konflikte li { grid-template-columns: 6.5rem 1fr; }
  .konflikte .was { grid-column: 1 / -1; }
  .konflikte .woher { display: none; }
  .liste .a { width: auto; }
  .balken { width: 60px; }
}

/* ---------- Anmeldung ---------- */
.anmeldeseite {
  display: grid; place-items: center; min-height: 100vh;
  background: var(--dunkel);
}
.anmeldung {
  background: var(--grund); border-radius: 14px; padding: 32px 34px 26px;
  width: min(24rem, 92vw); box-shadow: 0 14px 40px rgba(0,0,0,.3);
}
.anmeldung .logo { height: 30px; width: auto; display: block;
  filter: invert(1) brightness(.35); margin-bottom: 14px; }
.anmeldung h1 { margin: 0 0 18px; font-size: 22px; }
.anmeldung label {
  display: block; margin-bottom: 14px; font-size: 14px; color: var(--gedaempft);
}
.anmeldung input {
  display: block; width: 100%; margin-top: 5px; padding: 9px 11px;
  border: 1px solid var(--sand); border-radius: 7px; font: inherit;
  background: #fff; color: var(--dunkel);
}
.anmeldung input:focus { outline: 2px solid var(--akzent); outline-offset: 1px; }
.anmeldung button {
  width: 100%; background: var(--akzent); color: #fff; border: 0;
  border-radius: 7px; padding: 10px; font: inherit; font-weight: 600;
  cursor: pointer; margin-top: 4px;
}
.anmeldung button:hover { background: #97401B; }
.anmeldung .fehler {
  background: #FBE7E2; color: var(--rot); border-radius: 7px;
  padding: 8px 11px; font-size: 14px; margin: 0 0 16px;
}
.anmeldung .hinweis {
  color: var(--gedaempft); font-size: 13.5px; margin: 16px 0 0; line-height: 1.4;
}

/* ---------- Kopfzeile: wer angemeldet ist ---------- */
.wer { color: #C9C0B4; font-size: 13.5px; display: flex; align-items: center; gap: 10px; }
.wer .rolle { color: var(--gedaempft); }
.wer a { color: #C9C0B4; text-decoration: none; border-bottom: 1px solid #4C453C; }
.wer a:hover { color: var(--grund); }
.steuerung { display: flex; align-items: center; gap: 16px; margin-left: auto; }

.entscheiden { display: flex; gap: 5px; }
.entscheiden button {
  border: 1px solid var(--sand); background: #fff; border-radius: 6px;
  padding: 3px 10px; font: inherit; font-size: 13px; cursor: pointer;
  white-space: nowrap;
}
.entscheiden button.ja { border-color: var(--gruen); color: var(--gruen); }
.entscheiden button.ja:hover { background: #E3EDE7; }
.entscheiden button.nein:hover { background: var(--sand); }

/* ---------- Dienstplan ---------- */
.planleiste {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.planleiste b { font-size: 17px; }
.planleiste .rechts { margin-left: auto; }
.planleiste .leise { color: var(--gedaempft); font-size: 14px; }

.rasterrahmen { overflow-x: auto; margin-bottom: 26px; }
.raster {
  width: 100%; border-collapse: collapse; background: #fff;
  border: 1px solid var(--sand); border-radius: var(--radius); overflow: hidden;
  table-layout: fixed;
}
.raster th, .raster td {
  border: 1px solid #F0EBE1; padding: 6px 8px; vertical-align: top; text-align: left;
}
.raster thead th {
  background: var(--sand); font-size: 13px; font-weight: 600; color: var(--gedaempft);
  text-transform: uppercase; letter-spacing: .03em; white-space: nowrap;
}
.raster thead th.wochenende { background: #E2D9C9; }
.raster tbody th {
  width: 11rem; font-size: 14px; font-weight: 600; background: #FDFBF7; white-space: nowrap;
}
.raster td { min-width: 8.5rem; }
.raster td.wochenende { background: #FCFAF5; }
.schicht {
  background: #EFF3F0; border-left: 3px solid var(--gruen); border-radius: 5px;
  padding: 4px 7px; margin-bottom: 4px; font-size: 13px; line-height: 1.3;
}
.schicht b { display: block; font-variant-numeric: tabular-nums; font-weight: 600; }
.schicht span { color: var(--gedaempft); }
.schicht.unbesetzt { background: #FBEEDC; border-left-color: var(--akzent); }
.schicht.unbesetzt span { color: var(--akzent); font-style: italic; }
.ueberschrift { font-size: 17px; margin: 26px 0 10px; }

.einwand { font-size: 13px; line-height: 1.35; margin-bottom: 3px; }
.einwand.verstoss { color: var(--rot); }
.einwand.warnung { color: var(--akzent); }
.einwand.hinweis { color: var(--gedaempft); }

.konflikte.rhythmus li { grid-template-columns: 6.5rem 1fr; margin-bottom: 5px; }

/* Schichten im Browser anlegen und besetzen */
.schicht .mini { display: inline; margin: 0; }
.schicht select {
  width: 100%; margin-top: 3px; font-size: 12px; padding: 2px 3px;
  border: 1px solid var(--sand); border-radius: 4px; background: #fff;
  color: var(--text); font-family: inherit;
}
.schicht.unbesetzt select { border-color: var(--akzent); }
.schicht .x {
  border: none; background: none; color: var(--gedaempft); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 0 2px; float: right;
}
.schicht .x:hover { color: var(--rot); }
.planwerkzeuge { display: flex; flex-direction: column; gap: 10px; margin-bottom: 26px; }
.werkzeug {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  background: var(--sand); border-radius: var(--radius); padding: 10px 12px;
}
.werkzeug b { margin-right: 4px; }
.werkzeug select, .werkzeug input[type="time"], .werkzeug input[type="number"] {
  font-family: inherit; font-size: 14px; padding: 4px 6px;
  border: 1px solid #D6CCBB; border-radius: 6px; background: #fff; color: var(--text);
}
.werkzeug input[type="number"] { width: 4em; }
.werkzeug .tage { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.werkzeug .tage label { font-size: 13px; color: var(--text); display: inline-flex; align-items: center; gap: 3px; }

/* ============ Dienstplan im E2N-Stil ============ */
.planbereich { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 26px; }
.planbereich .rasterrahmen { flex: 1; margin-bottom: 0; }

.raster thead th { vertical-align: top; }
.raster .tagname { font-weight: 600; }
.raster .tagsumme { font-size: 12px; color: var(--gedaempft); font-weight: 400; margin-top: 2px; }
.raster .tagsumme .offenzahl { color: var(--akzent); }
.raster th.ecke { background: var(--sand); }
.raster th.bereich { color: #fff; text-align: left; font-size: 13px; letter-spacing: .02em; }

/* Schichtkarte */
.karte { border-radius: 6px; overflow: hidden; margin-bottom: 5px; font-size: 12px;
  border: 1px solid rgba(0,0,0,.08); background: #fff; }
.karte .kkopf { display: flex; align-items: center; gap: 4px; padding: 3px 6px; color: #fff; }
.karte .kkopf .zeit { font-weight: 600; font-variant-numeric: tabular-nums; }
.karte .kkopf .pause { font-size: 11px; opacity: .85; }
.karte .xform { margin: 0 0 0 auto; display: inline; }
.karte .kkopf .x { color: #fff; opacity: .8; border: none; background: none; cursor: pointer;
  font-size: 14px; line-height: 1; padding: 0 1px; }
.karte .kkopf .x:hover { opacity: 1; }
.karte .kbereich { padding: 3px 6px 0; font-weight: 600; color: var(--dunkel); }
.karte .kperson { display: flex; align-items: center; gap: 5px; padding: 3px 6px 5px; }
.karte .kperson select { flex: 1; min-width: 0; font-size: 12px; border: none;
  background: none; color: var(--text); font-family: inherit; padding: 1px 0; }
.karte.offen { border-color: var(--akzent); }
.karte.offen .kperson select { color: var(--akzent); font-style: italic; }

/* Initialen-Avatar */
.avatar { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--sand);
  color: var(--dunkel); font-size: 10px; font-weight: 700; display: inline-flex;
  align-items: center; justify-content: center; }

/* Farbfamilien je Bereich (Kopfband der Karte + Zeilenkopf) */
.f-service .kkopf, th.bereich.f-service { background: #E0553D; }
.f-service.karte { background: #FCECE8; }
.f-kueche .kkopf, th.bereich.f-kueche { background: #3E71AE; }
.f-kueche.karte { background: #EAF1FA; }
.f-theke .kkopf, th.bereich.f-theke { background: #B0413A; }
.f-theke.karte { background: #F8E9E7; }
.f-leitung .kkopf, th.bereich.f-leitung { background: #C39A44; }
.f-leitung.karte { background: #FAF2DE; }
.f-reinigung .kkopf, th.bereich.f-reinigung { background: #3F8E7E; }
.f-reinigung.karte { background: #E4F1ED; }
.f-catering .kkopf, th.bereich.f-catering { background: #7E5AA8; }
.f-catering.karte { background: #EFE8F7; }
.f-sonst .kkopf, th.bereich.f-sonst { background: #8A8178; }
.f-sonst.karte { background: #EFECE7; }

/* Mitarbeiterleiste rechts (Wochen-Auslastung) */
.mitarbeiterleiste { flex: none; width: 195px; background: var(--sand);
  border-radius: var(--radius); padding: 10px 12px; }
.mitarbeiterleiste .mltitel { font-size: 11px; font-weight: 600; color: var(--gedaempft);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.mitarbeiterleiste .ma { display: flex; align-items: center; gap: 7px; padding: 5px 0;
  border-top: 1px solid rgba(0,0,0,.06); }
.mitarbeiterleiste .ma:first-of-type { border-top: none; }
.mitarbeiterleiste .maname { flex: 1; min-width: 0; font-size: 13px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.mitarbeiterleiste .quote { flex: none; font-size: 11px; font-weight: 700; border-radius: 9px;
  padding: 1px 7px; background: #E3EDE7; color: var(--gruen); }
.mitarbeiterleiste .quote.ueber { background: #F6DAD3; color: var(--rot); }
.mitarbeiterleiste .quote.leer { background: #E9E2D6; color: var(--gedaempft); font-weight: 600; }

@media (max-width: 900px) {
  .planbereich { flex-wrap: wrap; }
  .mitarbeiterleiste { width: 100%; }
}

/* „+" zum Anlegen direkt in der Kalenderzelle */
.raster td { position: relative; }
.neu { margin-top: 3px; }
.neu > summary { list-style: none; cursor: pointer; width: 22px; height: 22px;
  border: 1px dashed #C9BEAD; border-radius: 6px; color: var(--gedaempft);
  font-size: 16px; line-height: 20px; text-align: center; }
.neu > summary::-webkit-details-marker { display: none; }
.neu > summary::marker { content: ""; }
.neu > summary:hover { border-color: var(--akzent); color: var(--akzent); background: #fff; }
.neu[open] > summary { background: var(--akzent); color: #fff; border-style: solid;
  border-color: var(--akzent); }
.neuform { margin-top: 5px; background: #fff; border: 1px solid #D6CCBB; border-radius: 8px;
  padding: 8px; display: flex; flex-direction: column; gap: 5px;
  box-shadow: 0 4px 14px rgba(0,0,0,.10); }
.neuform .nzeile { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.neuform label { font-size: 12px; color: var(--gedaempft); }
.neuform input, .neuform select { font-family: inherit; font-size: 13px; padding: 3px 5px;
  border: 1px solid #D6CCBB; border-radius: 5px; color: var(--text); background: #fff; }
.neuform input[type=time] { width: 6.2em; }
.neuform input[type=number] { width: 3.5em; }
.neuform select { width: 100%; }
.neuform button { margin-top: 3px; padding: 4px; }