/* Layout „kompakt & app-artig“: Seitenleiste, Inhalte ohne Kartenrahmen, Zusammenfassung rechts */

/* Hausschriften: Spitzkant Head für Überschriften, DIN für Text */
@font-face { font-family: "DIN"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/DINReg.otf") format("opentype"); }
@font-face { font-family: "DIN"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/DINMed.otf") format("opentype"); }
@font-face { font-family: "DIN"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/DINBol.otf") format("opentype"); }
@font-face { font-family: "Spitzkant Head"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/SpitzkantHead-Regular.otf") format("opentype"); }
@font-face { font-family: "Spitzkant Head"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/SpitzkantHead-Medium.otf") format("opentype"); }
@font-face { font-family: "Spitzkant Head"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/SpitzkantHead-Bold.otf") format("opentype"); }
:root {
  --bg: #fff; --side: #111827; --side-text: #d1d5db; --text: #111827; --muted: #6b7280; --line: #e5e7eb;
  --soft: #f9fafb; --soft2: #f3f4f6; --field: #fff;
  --accent: #0f766e; --accent-soft: #ccfbf1; --on-accent: #fff; --verplant: #374151;
  --ok: #059669; --ok-soft: #d1fae5; --warn: #b45309; --warn-soft: #fef3c7; --bad: #dc2626; --bad-soft: #fee2e2;
  --lila: #4f46e5; --lila-soft: #e0e7ff;
  --frei: #d1fae5; /* verfügbare Stunden im Balken */
  --font-head: "Spitzkant Head", system-ui, sans-serif;
  --font-text: "DIN", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111318; --side: #0a0c10; --side-text: #c4c9d2; --text: #e5e7eb; --muted: #9aa1ad; --line: #2a2f3a;
    --soft: #171a21; --soft2: #222733; --field: #171a21;
    --accent: #2dd4bf; --accent-soft: #134e4a; --on-accent: #042f2e; --verplant: #94a3b8;
    --ok: #34d399; --ok-soft: #10392b; --warn: #fbbf24; --warn-soft: #3b2f12; --bad: #f87171; --bad-soft: #3f1d1d;
    --lila: #a5b4fc; --lila-soft: #2a2d55;
  }
}
* { box-sizing: border-box; }
/* Zeilenhöhe überall: Schriftgröße + 8 px */
*, *::before, *::after { line-height: calc(1em + 8px); }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--text); font-size: 16px; line-height: 24px; font-family: var(--font-text); font-variant-numeric: tabular-nums; }
a { color: var(--accent); }

/* Icons: Font Awesome Free 6.5.2 (CC BY 4.0), als Maske eingebunden – Farbe = Textfarbe, Größe = Schriftgröße */
.ico { display: inline-block; width: 1em; height: 1em; flex: none; vertical-align: -0.125em; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.i-check { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E"); }
.i-xmark { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z'/%3E%3C/svg%3E"); }
.i-chevron-left { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z'/%3E%3C/svg%3E"); }
.i-chevron-right { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z'/%3E%3C/svg%3E"); }
.i-chevron-down { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E"); }
.i-calendar-week { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M128 0c17.7 0 32 14.3 32 32V64H288V32c0-17.7 14.3-32 32-32s32 14.3 32 32V64h48c26.5 0 48 21.5 48 48v48H0V112C0 85.5 21.5 64 48 64H96V32c0-17.7 14.3-32 32-32zM0 192H448V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V192zm80 64c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16H368c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H80z'/%3E%3C/svg%3E"); }
.i-users { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M144 0a80 80 0 1 1 0 160A80 80 0 1 1 144 0zM512 0a80 80 0 1 1 0 160A80 80 0 1 1 512 0zM0 298.7C0 239.8 47.8 192 106.7 192h42.7c15.9 0 31 3.5 44.6 9.7c-1.3 7.2-1.9 14.7-1.9 22.3c0 38.2 16.8 72.5 43.3 96c-.2 0-.4 0-.7 0H21.3C9.6 320 0 310.4 0 298.7zM405.3 320c-.2 0-.4 0-.7 0c26.6-23.5 43.3-57.8 43.3-96c0-7.6-.7-15-1.9-22.3c13.6-6.3 28.7-9.7 44.6-9.7h42.7C592.2 192 640 239.8 640 298.7c0 11.8-9.6 21.3-21.3 21.3H405.3zM224 224a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zM128 485.3C128 411.7 187.7 352 261.3 352H378.7C452.3 352 512 411.7 512 485.3c0 14.7-11.9 26.7-26.7 26.7H154.7c-14.7 0-26.7-11.9-26.7-26.7z'/%3E%3C/svg%3E"); }
.i-user-gear { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M224 0a128 128 0 1 1 0 256A128 128 0 1 1 224 0zM178.3 304h91.4c11.8 0 23.4 1.2 34.5 3.3c-2.1 18.5 7.4 35.6 21.8 44.8c-16.6 10.6-26.7 31.6-20 53.3c4 12.9 9.4 25.5 16.4 37.6s15.2 23.1 24.4 33c15.7 16.9 39.6 18.4 57.2 8.7v.9c0 9.2 2.7 18.5 7.9 26.3H29.7C13.3 512 0 498.7 0 482.3C0 383.8 79.8 304 178.3 304zM436 218.2c0-7 4.5-13.3 11.3-14.8c10.5-2.4 21.5-3.7 32.7-3.7s22.2 1.3 32.7 3.7c6.8 1.5 11.3 7.8 11.3 14.8v17.7c0 7.8 4.8 14.8 11.6 18.7c6.8 3.9 15.1 4.5 21.8 .6l13.8-7.9c6.1-3.5 13.7-2.7 18.5 2.4c7.6 8.1 14.3 17.2 20.1 27.2s10.3 20.4 13.5 31c2.1 6.7-1.1 13.7-7.2 17.2l-14.4 8.3c-6.5 3.7-10 10.9-10 18.4s3.5 14.7 10 18.4l14.4 8.3c6.1 3.5 9.2 10.5 7.2 17.2c-3.3 10.6-7.8 21-13.5 31s-12.5 19.1-20.1 27.2c-4.8 5.1-12.5 5.9-18.5 2.4l-13.8-7.9c-6.7-3.9-15.1-3.3-21.8 .6c-6.8 3.9-11.6 10.9-11.6 18.7v17.7c0 7-4.5 13.3-11.3 14.8c-10.5 2.4-21.5 3.7-32.7 3.7s-22.2-1.3-32.7-3.7c-6.8-1.5-11.3-7.8-11.3-14.8V467.8c0-7.9-4.9-14.9-11.7-18.9c-6.8-3.9-15.2-4.5-22-.6l-13.5 7.8c-6.1 3.5-13.7 2.7-18.5-2.4c-7.6-8.1-14.3-17.2-20.1-27.2s-10.3-20.4-13.5-31c-2.1-6.7 1.1-13.7 7.2-17.2l14-8.1c6.5-3.8 10.1-11.1 10.1-18.6s-3.5-14.8-10.1-18.6l-14-8.1c-6.1-3.5-9.2-10.5-7.2-17.2c3.3-10.6 7.7-21 13.5-31s12.5-19.1 20.1-27.2c4.8-5.1 12.4-5.9 18.5-2.4l13.6 7.8c6.8 3.9 15.2 3.3 22-.6c6.9-3.9 11.7-11 11.7-18.9V218.2zm92.1 133.5a48.1 48.1 0 1 0 -96.1 0 48.1 48.1 0 1 0 96.1 0z'/%3E%3C/svg%3E"); }
.i-circle { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z'/%3E%3C/svg%3E"); }
:root { --ico-haken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E"); --ico-kreis: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z'/%3E%3C/svg%3E"); --pfeil-runter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%238b919c' d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E"); }

h1, h2, h3 { font-family: var(--font-head); }
h1 { font-size: 30px; line-height: 38px; font-weight: 700; margin: 0; }
h2 { font-size: 24px; line-height: 32px; font-weight: 700; margin: 0; }
#titel { color: var(--accent); } /* „Meine nächste Woche“: #0f766e, im Dunkelmodus hellere Variante */
.muted { color: var(--muted); }
small, .small { font-size: 13px; line-height: 21px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spread { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }

/* ---------- Rahmen: Seitenleiste + Inhalt ---------- */
.app { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
/* App-Seiten erst zeigen, wenn die Anmeldung geprüft ist – sonst blitzt vor der Weiterleitung zum Login die Seite auf */
.app:not(.bereit) { visibility: hidden; }
.seite { background: var(--side); color: var(--side-text); padding: 22px 14px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh; }
.logo { padding: 2px 10px 24px; display: flex; flex-direction: column; gap: 60px; }
.logo img { display: block; width: 104px; height: auto; }
.logo span { font-family: var(--font-head); font-weight: 500; font-size: 16px; line-height: 24px; color: #fff; }
.seite a { color: inherit; text-decoration: none; padding: 9px 10px; border-radius: 8px; font-size: 16px; line-height: 24px; display: flex; align-items: center; gap: 10px; }
.seite a:hover { background: rgba(255,255,255,.05); }
.seite a.aktiv { background: rgba(255,255,255,.09); color: #fff; }
.seite .ico { font-size: 16px; line-height: 24px; opacity: .85; }
.ich { margin-top: auto; border-top: 1px solid rgba(255,255,255,.1); padding: 16px 10px 0; font-size: 13px; line-height: 21px; }
.ich b { display: block; color: #fff; font-weight: 600; }
.ich button { font-family: inherit; font-size: inherit; font-weight: inherit; font-size: 13px; line-height: 21px; color: #9ca3af; background: none; border: 0; padding: 0; cursor: pointer; }
.ich button:hover { color: #fff; }
.inhalt { padding: 28px 36px 48px; min-width: 0; max-width: 1180px; }
.kopf { display: flex; align-items: flex-end; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--line); margin-bottom: 24px; flex-wrap: wrap; }
.kopf > div:first-child { margin-right: auto; }
.sub { color: var(--muted); font-size: 16px; line-height: 24px; }

/* ---------- Formularelemente ---------- */
input, select, textarea { font-family: inherit; font-size: inherit; font-weight: inherit; font-size: 16px; line-height: 24px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--field); color: var(--text); min-width: 0; width: 100%; }
input:not([type=checkbox]):not([type=radio]), select { height: 40px; padding-top: 0; padding-bottom: 0; }
select { appearance: none; -webkit-appearance: none; padding-right: 36px; background: var(--field) var(--pfeil-runter) no-repeat right 12px center / 12px 12px; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
textarea { resize: vertical; min-height: 64px; }
.btn { font-family: inherit; font-size: inherit; font-weight: inherit; font-size: 16px; line-height: 24px; font-weight: 600; padding: 9px 16px; border-radius: 8px; border: 1px solid var(--line); background: var(--field); color: var(--text); cursor: pointer; white-space: nowrap; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.ghost { border-color: transparent; background: none; color: var(--accent); padding: 0; font-size: 16px; line-height: 24px; }
.btn.voll { width: 100%; padding: 11px 16px; }
/* Dezenter Nebenknopf, z. B. „Reguläre Arbeitszeit ändern“ */
.btn.klein { font-size: 13px; line-height: 21px; padding: 5px 12px; color: var(--muted); background: var(--field); }
.btn.klein:hover { color: var(--text); border-color: var(--muted); }
.btn:disabled { opacity: .6; cursor: wait; }
.hinweis { padding: 10px 12px; border-radius: 8px; font-size: 16px; line-height: 24px; margin: 12px 0 0; }
.hinweis.ok { background: var(--ok-soft); color: var(--ok); }
.hinweis.ok::before, #hilfeInfo::before, .mit-haken::before { content: ""; display: inline-block; width: 1em; height: 1em; margin-right: 6px; vertical-align: -0.125em; background: currentColor; -webkit-mask: var(--ico-haken) center / contain no-repeat; mask: var(--ico-haken) center / contain no-repeat; }
.hinweis.bad { background: var(--bad-soft); color: var(--bad); }

/* ---------- Meldung: Formular links, Zusammenfassung rechts ---------- */
.zwei { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 36px; align-items: start; }
.abschnitt { padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.abschnitt:last-child { border-bottom: 0; margin-bottom: 0; }
.hilfe { color: var(--muted); margin: 8px 0 14px; }

/* Kleiner runder Icon-Knopf mit Tooltip links daneben (z. B. „letzte Meldung übernehmen“) */
.icon-knopf { position: relative; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--field); color: var(--accent); cursor: pointer; align-self: center; }
.icon-knopf svg { width: 15px; height: 15px; }
.icon-knopf:hover { background: var(--accent-soft); border-color: var(--accent); }
.icon-knopf:disabled { color: var(--muted); cursor: default; opacity: .5; }
.icon-knopf:disabled:hover { background: var(--field); border-color: var(--line); }
.icon-knopf:hover::after { content: attr(data-tip); position: absolute; right: calc(100% + 8px); top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: 13px; line-height: 21px; font-weight: 600; padding: 3px 8px; border-radius: 6px; background: var(--text); color: var(--bg); z-index: 2; pointer-events: none; }

/* Jobs: eine Zeile pro Job (Job + Status), Tätigkeit klein darunter, Felder ohne Rahmen bis zum Fokus */
.jobliste { border: 1px solid var(--line); border-radius: 12px; margin-top: 12px; overflow: hidden; }
.jobb { display: grid; grid-template-columns: minmax(0, 1fr) auto 28px; gap: 6px 8px; padding: 10px 8px 10px 12px; border-bottom: 1px solid var(--line); }
.jobb input { padding: 6px 10px; text-overflow: ellipsis; border-color: transparent; background: transparent; }
.jobb input:hover { background: var(--soft); }
.jobb input:focus { border-color: var(--accent); background: var(--field); }
.jobb .job { font-weight: 600; }
.jobb .taet { grid-column: 1 / 3; font-size: 16px; line-height: 24px; }
.jobb .status { width: auto; field-sizing: content; height: 28px; font-size: 13px; line-height: 21px; font-weight: 600; border: 0; border-radius: 99px; padding: 0 28px 0 12px; cursor: pointer; align-self: center;
  background: var(--soft2) var(--pfeil-runter) no-repeat right 10px center / 10px 10px; color: var(--muted); }
.jobb .status.ok { background-color: var(--ok-soft); color: var(--ok); }
.jobb .status.warn { background-color: var(--warn-soft); color: var(--warn); }
.jobb .status.lila { background-color: var(--lila-soft); color: var(--lila); }
.jobb .x { border: 0; background: none; color: var(--muted); font-size: 13px; line-height: 21px; cursor: pointer; border-radius: 6px; align-self: center; height: 28px; }
.jobb .x:hover { background: var(--soft2); color: var(--bad); }
.zus { display: block; width: 100%; text-align: left; font-family: inherit; font-size: inherit; font-weight: inherit; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--accent); background: none; border: 0; padding: 10px 14px; cursor: pointer; }
.zus:hover { background: var(--soft); }

/* Tage als zusammenhängende Leiste */
.days { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.day { font-family: inherit; font-size: inherit; font-weight: inherit; font-size: 13px; line-height: 21px; color: var(--text); background: var(--field); border: 0; border-right: 1px solid var(--line); padding: 10px 4px; text-align: center; cursor: pointer; user-select: none; }
.day:last-child { border-right: 0; }
.day b { display: block; font-size: 16px; line-height: 24px; }
.day small { display: block; font-size: 13px; line-height: 21px; color: var(--muted); }
button.day:hover { background: var(--soft); }
.day.weg, button.day.weg:hover { background: var(--warn-soft); color: var(--warn); }
.day.weg small { color: var(--warn); }
.day.frei { background: var(--soft2); color: var(--muted); cursor: default; }
.day.buero, button.day.buero:hover { background: var(--accent-soft); color: var(--accent); }
.day.buero small { color: var(--accent); }
.zwischen { display: block; font-family: var(--font-head); font-size: 18px; line-height: 26px; color: var(--text); margin-bottom: 2px; }

/* Reguläre Arbeitszeit: Stunden Mo–Fr */
.arbeitszeit { background: var(--soft); border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-top: 12px; }
.az-link { margin-top: 10px; }
.az-tage { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 10px; }
.az-tage label { font-size: 13px; line-height: 21px; color: var(--muted); text-align: center; }
.az-tage input { text-align: center; margin-top: 2px; }

.stunden-gross { width: 120px; font-size: 24px; line-height: 32px; font-weight: 700; padding: 8px 12px; }

/* Zusammenfassung rechts */
/* Rechte Spalte: „Deine Woche“, darunter „Kurzfristiger Support“ */
.rechte-spalte { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 16px; }
.zusammen { border: 1px solid var(--line); border-radius: 14px; padding: 20px; background: var(--soft); }
.zusammen > small { font-size: 13px; line-height: 21px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.big { font-size: 40px; line-height: 48px; font-weight: 700; letter-spacing: -.03em; margin: 4px 0 2px; }
.big span { font-size: 16px; line-height: 24px; color: var(--muted); font-weight: 500; letter-spacing: 0; }
.rechnung { margin: 16px 0 18px; font-size: 16px; line-height: 24px; display: grid; grid-template-columns: 1fr auto; row-gap: 6px; }
.rechnung dt { color: var(--muted); display: flex; align-items: center; gap: 8px; }
.rechnung dd { margin: 0; text-align: right; font-weight: 600; }
.rechnung i { width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
.rechnung .summe { border-top: 1px solid var(--line); padding-top: 6px; }
/* GF meldet nur Abwesenheiten: Jobs, Stunden und Info ausgeblendet */
.nur-abwesenheit .nicht-gf { display: none; }
.zusammen .gf-woche { font-size: 16px; line-height: 24px; color: var(--text); text-align: left; margin: 10px 0 18px; }
.zusammen p { font-size: 13px; line-height: 21px; color: var(--muted); margin: 10px 0 0; text-align: center; }
/* Leiste unten mit Abschicken-Knopf, nur auf dem Handy (siehe schmale Fenster) */
.mobil-leiste { display: none; }

/* Wochenbalken: verplant | verfügbar | abwesend, Breite = reguläre Stunden */
.bar { display: flex; height: 8px; border-radius: 99px; overflow: hidden; background: var(--soft2); }
.bar span { transition: width .2s; }
.bar .belegt { background: var(--verplant); }
.bar .frei { background: var(--frei); }
.bar .weg { background: repeating-linear-gradient(45deg, var(--line) 0 3px, var(--soft2) 3px 6px); }
.zusammen .bar { margin-top: 14px; }
.leg { display: inline-flex; gap: 12px; flex-wrap: wrap; font-size: 13px; line-height: 21px; color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; }
.leg span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; background: var(--c); }

/* Unterstützung: zwei Schalter für die laufende Woche */
.unterstuetzung { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; margin-bottom: 24px; background: var(--soft); }
.rechte-spalte .unterstuetzung { flex-direction: column; align-items: stretch; gap: 14px; padding: 20px; border-radius: 14px; margin: 0; }
.rechte-spalte .unterstuetzung .row { flex-direction: column; align-items: stretch; gap: 8px; }
.rechte-spalte .hilfe-knopf { justify-content: center; }
.rechte-spalte .unterstuetzung > div:first-child { flex: none; }
.rechte-spalte #hilfeKw { display: block; margin: 2px 0 6px; font-size: 13px; line-height: 21px; }
.unterstuetzung > div:first-child { flex: 1 1 320px; }
.unterstuetzung > div > .small { display: block; }
#hilfeKw { font-family: var(--font-text); font-weight: 400; margin-left: 6px; }
.unterstuetzung #hilfeInfo { flex-basis: 100%; margin: 0; color: var(--ok); }
/* Farben und Ecken wie die dezenten Nebenknöpfe (.btn.klein), Schrift und Abstände wie .btn */
.hilfe-knopf { display: inline-flex; align-items: center; gap: 8px; font-family: inherit; font-size: inherit; font-weight: inherit; font-size: 16px; line-height: 24px; font-weight: 600; padding: 9px 16px; border-radius: 8px; border: 1px solid var(--line); background: var(--field); color: var(--muted); cursor: pointer; }
.hilfe-knopf svg { width: 18px; height: 16px; }
.hilfe-knopf:hover { color: var(--text); border-color: var(--muted); }
.hilfe-knopf[data-hilfe="biete"][aria-pressed="true"] { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.hilfe-knopf[data-hilfe="brauche"][aria-pressed="true"] { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }
.hilfe-knopf:disabled { opacity: .6; cursor: wait; }
.hilfe-knopf.waehlt { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* Frage beim Einschalten: wobei und wie viele Stunden (beides optional) */
.hilfe-form { flex-basis: 100%; display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.hilfe-form label { display: block; font-size: 13px; line-height: 21px; color: var(--text); }
.hilfe-form label input { display: block; margin-top: 3px; }
.hilfe-form #hilfeStunden { width: 100px; }
.unterstuetzung #hilfeAngaben { flex-basis: 100%; margin: 0; }
.hilfe-detail { display: block; margin: 4px 0 6px; }

.hilfe-seite { align-items: flex-start; flex-direction: column; max-width: 640px; }
.hilfe-seite > div:first-child { flex: none; }
.hilfe-frage { display: flex; align-items: center; gap: 10px; }
.hilfe-frage svg { width: 22px; height: 20px; flex: none; }
.hilfe-frage.biete svg { color: var(--ok); }
.hilfe-frage.brauche svg { color: var(--warn); }

/* Icons in der Team-Übersicht, Tooltip rechts daneben */
.hilfe-icon { position: relative; display: inline-flex; vertical-align: -2px; margin-left: 6px; }
.hilfe-icon svg { width: 17px; height: 15px; }
.hilfe-icon.biete { color: var(--ok); }
.hilfe-icon.brauche { color: var(--warn); }
.hilfe-icon[data-hilfe-token] { cursor: pointer; border-radius: 4px; }
.hilfe-icon[data-hilfe-token]:hover { transform: scale(1.15); }
.hilfe-icon.vergeben { color: var(--muted); }
.hilfe-icon.vergeben svg { opacity: .55; } /* nur das Icon blass, nicht der Tooltip */
.hilfe-icon:hover::after { content: attr(data-tip); position: absolute; left: calc(100% + 6px); top: 50%; transform: translateY(-50%); width: max-content; max-width: 320px; white-space: normal; font-size: 13px; line-height: 21px; font-weight: 600; padding: 3px 8px; border-radius: 6px; background: var(--text); color: var(--bg); z-index: 5; pointer-events: none; opacity: 1; box-shadow: 0 4px 12px rgba(0, 0, 0, .2); }

/* Hinweisfenster oben rechts (neue Bitten/Angebote, Rückmeldungen) */
.hinweise { position: fixed; top: 16px; right: 16px; z-index: 50; display: flex; flex-direction: column; gap: 10px; width: min(360px, calc(100vw - 32px)); }
.hinweis-fenster { display: grid; grid-template-columns: 26px minmax(0, 1fr) 24px; gap: 10px; padding: 14px; background: var(--bg); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .15); animation: hf-rein .25s ease-out; }
.hinweis-fenster.biete { border-left-color: var(--ok); }
.hinweis-fenster.brauche { border-left-color: var(--warn); }
.hinweis-fenster b { display: block; font-size: 16px; line-height: 24px; }
.hinweis-fenster p { margin: 2px 0 10px; font-size: 16px; line-height: 24px; color: var(--muted); }
.hinweis-fenster.erledigt p { margin-bottom: 0; }
.hinweis-fenster .btn { display: inline-block; text-decoration: none; padding: 7px 14px; font-size: 16px; line-height: 24px; }
.hf-icon { font-size: 16px; line-height: 24px; font-weight: 700; color: var(--accent); }
.hf-icon svg { width: 24px; height: 21px; }
.biete .hf-icon { color: var(--ok); }
.brauche .hf-icon { color: var(--warn); }
.hf-zu { border: 0; background: none; color: var(--muted); font-size: 13px; line-height: 21px; padding: 4px; cursor: pointer; align-self: start; }
.hf-zu:hover { color: var(--text); }
@keyframes hf-rein { from { opacity: 0; transform: translateY(-8px); } }

/* ---------- Team-Übersicht ---------- */
.wochennav { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.wochennav button { border: 0; background: var(--field); color: var(--muted); padding: 7px 12px; font-family: inherit; font-size: inherit; line-height: calc(1em + 8px); font-weight: inherit; cursor: pointer; }
.wochennav button { font-size: 13px; line-height: 21px; }
.wochennav button:hover { background: var(--soft); }
.wochennav button { align-self: stretch; }
.kwbox { display: flex; flex-direction: column; align-items: center; padding: 5px 14px; border-left: 1px solid var(--line); border-right: 1px solid var(--line); min-width: 190px; }
.kwbox b { font-size: 13px; line-height: 21px; }
/* Lage der Woche: kommende Woche hervorgehoben, aktuelle Woche dezent, sonst grau */
.lage { font-size: 13px; line-height: 21px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.wochennav.kommend { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.wochennav.kommend .lage { color: var(--accent); }
.wochennav.aktuell .lage { color: var(--warn); }
.wochenwahl { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* Kennzahlen: dezente Zeile statt großer Kästen */
.kpis { display: flex; flex-wrap: wrap; gap: 6px 28px; padding: 10px 16px; background: var(--soft); border-radius: 10px; margin-bottom: 20px; }
.kpi { display: flex; align-items: baseline; gap: 8px; }
.kpi small { font-size: 13px; line-height: 21px; color: var(--muted); }
.kpi b { font-size: 16px; line-height: 24px; font-weight: 600; }
.offen-hinweis { font-size: 13px; line-height: 21px; color: var(--bad); margin: -6px 0 20px; }
.offen-hinweis::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; vertical-align: 1px; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.offen-hinweis { --ico: var(--ico-kreis); }
.titel { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.titel.ohne-titel { justify-content: flex-end; }
.liste { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 28px; }
.lk { display: grid; grid-template-columns: 230px minmax(0, 1fr) 90px; gap: 20px; align-items: center; padding: 12px 18px; border: 0; border-bottom: 1px solid var(--line); background: var(--bg); width: 100%; font-family: inherit; font-size: inherit; line-height: calc(1em + 8px); font-weight: inherit; color: inherit; text-align: left; }
.lk:last-child { border-bottom: 0; }
.lk.kopfzeile { background: var(--soft); padding: 9px 18px; font-size: 13px; line-height: 21px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
button.lk { cursor: pointer; }
button.lk:hover { background: var(--soft); }
.wer { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wer > span:last-child { min-width: 0; }
.pfeil { color: var(--muted); font-size: 13px; line-height: 21px; width: 10px; flex: none; transition: transform .15s; }
.lk[aria-expanded="true"] .pfeil { transform: rotate(90deg); }
.ini { width: 30px; height: 30px; border-radius: 8px; background: var(--soft2); display: grid; place-items: center; font-size: 13px; line-height: 21px; font-weight: 700; flex: none; }
.wer b { display: block; font-size: 16px; line-height: 24px; font-weight: 600; }
.wer small { display: block; font-size: 13px; line-height: 21px; color: var(--muted); }
.lk .bar { margin-bottom: 4px; }
.rech { font-size: 13px; line-height: 21px; color: var(--muted); }
.zahl { text-align: right; }
.pill { display: inline-block; font-size: 13px; line-height: 21px; font-weight: 600; padding: 3px 8px; border-radius: 6px; background: var(--soft2); color: var(--muted); white-space: nowrap; }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.bad { background: var(--bad-soft); color: var(--bad); }
.pill.lila { background: var(--lila-soft); color: var(--lila); }
.det { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 28px; padding: 18px 18px 20px 58px; background: var(--soft); border-bottom: 1px solid var(--line); }
.det h3 { font-size: 13px; line-height: 21px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 8px; }
.det .day { cursor: default; padding: 6px 2px; }
.det table { border-collapse: collapse; width: 100%; font-size: 16px; line-height: 24px; }
.det td { padding: 6px 12px 6px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.det td.muted { color: var(--muted); }
/* Wer ist wann im Büro: eine Spalte pro Tag */
.buero-woche { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.buero-woche > div { padding: 12px 14px; border-right: 1px solid var(--line); min-height: 88px; }
.buero-woche > div:last-child { border-right: 0; }
.buero-woche b { display: block; font-size: 16px; line-height: 24px; }
.buero-woche small { display: block; font-size: 13px; line-height: 21px; color: var(--muted); margin-bottom: 6px; }
.buero-woche span.weg { background: var(--warn-soft); color: var(--warn); }
.buero-woche span.frei { background: var(--soft2); color: var(--muted); }
.buero-woche span { display: inline-block; font-size: 13px; line-height: 21px; background: var(--accent-soft); color: var(--accent); border-radius: 6px; padding: 1px 7px; margin: 0 4px 4px 0; }
.notiz { margin: 12px 0 0; font-size: 13px; line-height: 21px; color: var(--muted); border-left: 3px solid var(--accent); padding-left: 10px; font-style: italic; }

/* ---------- Mitarbeitende ---------- */
.lk.vw { grid-template-columns: minmax(0, 1.5fr) 150px minmax(0, 1fr) 90px; }
.vw-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 20px; gap: 16px 24px; }
.vw-gruppe { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px 4px; margin: 0; min-width: 0; background: var(--bg); }
.vw-gruppe legend { font-size: 13px; line-height: 21px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 0 6px; }
.vw-form label { display: block; font-size: 13px; line-height: 21px; color: var(--muted); margin-bottom: 10px; }
.vw-form label input, .vw-form label select { margin-top: 3px; color: var(--text); }
.vw-name { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; }
.vw-form .haken { display: flex; align-items: flex-start; gap: 10px; color: var(--text); font-size: 16px; line-height: 24px; }
.vw-form .haken input { width: auto; flex: none; margin: 3px 0 0; }
.haken input { width: auto; margin: 0; }
.vw-form .haken small { display: block; font-size: 13px; line-height: 21px; color: var(--muted); }
.vw-form .az-tage { margin-bottom: 10px; }
.vw-form .az-tage label { margin: 0; }
.vw-passwort .row { margin-bottom: 4px; }
.vw-passwort .row input { flex: 1; min-width: 180px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
/* Hinweistexte unter Feldern (z. B. Passwort, Login) */
p.small.muted, .vw-passwort p { margin: 15px 0 10px; }
.vw-aktionen { grid-column: 1 / -1; display: flex; gap: 14px; align-items: center; }
.vw-form .hinweis { grid-column: 1 / -1; margin: 0; }
.btn.ghost.rot { color: var(--bad); }
.btn.loeschen { border-color: var(--bad); color: var(--bad); }
.btn.loeschen:hover { background: var(--bad-soft); }
#neuForm .vw-form { border-bottom: 2px solid var(--accent); }

/* ---------- Login ---------- */
.login { max-width: 380px; margin: 0 auto; padding: 72px 16px; }
.login .logo { padding: 0 0 28px; }
.login .logo span { color: var(--text); }
.login form { border: 1px solid var(--line); border-radius: 14px; padding: 22px; background: var(--soft); margin: 20px 0 14px; }
.login label { display: block; font-size: 13px; line-height: 21px; color: var(--muted); margin: 0 0 4px; }
.login label + input { margin-bottom: 14px; }

/* ---------- schmale Fenster ---------- */
@media (max-width: 820px) {
  .app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  /* Seitenleiste wird zur Leiste oben: Icon über kurzem Text, bleibt beim Scrollen stehen */
  .seite { flex-direction: row; align-items: center; padding: 6px 8px; height: auto; z-index: 20; overflow-x: auto; gap: 2px; }
  .seite .logo { display: none; }
  .seite a { flex-direction: column; gap: 2px; white-space: nowrap; font-size: 12px; line-height: 16px; padding: 6px 8px; }
  .seite .ico { font-size: 16px; line-height: 16px; }
  .ich { margin: 0 0 0 auto; border: 0; padding: 0 4px 0 8px; }
  .ich b { display: none; }
  .ich button { font-size: 12px; line-height: 16px; white-space: nowrap; }
  .inhalt { padding: 20px 16px 40px; }
  h1 { font-size: 26px; line-height: 34px; }
  h2 { font-size: 20px; line-height: 28px; }
  .abschnitt > .spread { flex-wrap: nowrap; align-items: flex-start; }
  .zwei { grid-template-columns: 1fr; gap: 0; }
  .zwei > div:first-child { padding-bottom: 72px; } /* Platz für die Leiste unten */
  .mobil-leiste { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(0, 0, 0, .08); transition: transform .2s; }
  .mobil-leiste.weg { transform: translateY(110%); }
  .mobil-leiste b { font-size: 20px; line-height: 28px; }
  .mobil-leiste span { color: var(--muted); }
  .mobil-leiste span b { color: var(--text); }
  .nur-abwesenheit .mobil-leiste { justify-content: flex-end; }
  .rechte-spalte { position: static; margin-top: 24px; }
  .jobb { grid-template-columns: minmax(0, 1fr) 28px; }
  .jobb .taet { grid-column: 1 / -1; }
  .jobb .status { grid-column: 1; grid-row: 3; justify-self: start; }
  .jobb .x { grid-column: 2; grid-row: 1; }
  .kpis { flex-direction: column; gap: 2px; }
  .lk { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
  .lk > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .lk.kopfzeile { display: none; }
  .det { grid-template-columns: minmax(0, 1fr); padding-left: 18px; }
  .det tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; border-bottom: 1px solid var(--line); padding: 6px 0; }
  .det td { border: 0; padding: 0 8px 0 0; }
  .det td.muted { grid-column: 1; grid-row: 2; font-size: 13px; line-height: 21px; }
  .det td:last-child { grid-column: 2; grid-row: 1; padding: 0; }
  .buero-woche { grid-template-columns: 1fr; }
  .buero-woche > div { border-right: 0; border-bottom: 1px solid var(--line); min-height: 0; }
  .buero-woche > div:last-child { border-bottom: 0; }
  .lk.vw { grid-template-columns: minmax(0, 1fr) auto; }
  .lk.vw > :nth-child(2) { grid-column: 2; grid-row: 1; }
  .lk.vw > :nth-child(3) { grid-column: 1; grid-row: 2; }
  .lk.vw > :nth-child(4) { grid-column: 2; grid-row: 2; justify-self: end; }
  .vw-form { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .vw-aktionen { flex-wrap: wrap; }
  .wer small { overflow-wrap: anywhere; }
}