/* ============================================================
   Select Agency — HR & Zeiterfassung
   Minimalistisches Design-System: Schwarz / Weiss / Select-Gelb
   ============================================================ */

/* ══ Poppins ═════════════════════════════════════════════════════════════════
   Die Hausschrift von select-fotostudio.ch. **Selbst gehostet, nicht von Google**:
   die Morning Show läuft pünktlich um 09:15 auf dem Beamer — sie darf nicht auf einen
   fremden Server warten, und eine Schrift, die eine Sekunde später umspringt, sieht man
   auf der Leinwand sofort. 10 Dateien à ~7 KB, latin + latin-ext.
   Genutzt wird sie NUR auf der Bühne (`.brfs-*`); der Rest der App bleibt bei Georgia. */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/poppins-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/poppins-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/poppins-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/poppins-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/poppins-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/poppins-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('fonts/poppins-800-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('fonts/poppins-800-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 900; font-display: swap;
  src: url('fonts/poppins-900-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 900; font-display: swap;
  src: url('fonts/poppins-900-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --bg: #f7f5f0;
  --card: #ffffff;
  --ink: #1a1915;
  --muted: #6e6a5f;
  --faint: #aca698;
  --line: #e8e4da;
  --line-soft: #f0ede5;
  --yellow: #f5c400;
  --yellow-hover: #e3b600;
  --yellow-soft: #fdf3c8;
  --yellow-ink: #8a6f00;
  --green-soft: #e4f0e0;
  --green-ink: #3a7031;
  --red-soft: #fbe7e2;
  --red-ink: #b3402a;
  --indigo-soft: #e9e8f4;
  --indigo-ink: #55509b;
  --shadow: 0 1px 2px rgba(26, 25, 21, 0.04), 0 6px 20px rgba(26, 25, 21, 0.05);
  --radius: 18px;
  --serif: Georgia, 'Times New Roman', 'Iowan Old Style', serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 24px 48px;
}
a { color: var(--ink); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; }

/* ---------- Brand / Wortmarke ---------- */
.brand-mark { display: block; height: 26px; width: auto; }
.brand-mark--lg { height: 46px; }

/* ---------- Top-Navigation ---------- */
.topnav {
  width: 100%;
  max-width: 1080px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 30px;
}
.topnav-logo:hover { text-decoration: none; }
.topnav-links { display: flex; align-items: center; gap: 20px; }
.topnav-links a { font-size: 14px; font-weight: 500; color: var(--muted); padding: 4px 0; }
.topnav-links a:hover { color: var(--ink); text-decoration: none; }
.topnav-links a.active { color: var(--ink); box-shadow: inset 0 -2px 0 var(--yellow); }
.topnav-links .logout { color: var(--faint); }

/* ---------- Gruss (à la Claude) ---------- */
.greeting {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.2;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
}
.greeting .spark { width: 22px; height: 22px; flex-shrink: 0; color: var(--yellow); }

/* ---------- Karten ---------- */
.card {
  width: 100%;
  max-width: 480px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
}
.card--wide { max-width: 1080px; }

/* Gilt bewusst für h1 UND h2 (Raphael, 31.07.2026): ein <h2 class="title"> — «Heute im
   Office», «Deine Schichten», «Deine Verfügbarkeit» — fiel vorher auf die Browser-Vorgabe
   von 24 px zurück und sprengte auf dem Handy die Karte. */
.title { font-size: 17px; font-weight: 650; color: var(--ink); margin: 0 0 4px; text-transform: none; }
.subtitle { font-size: 13px; color: var(--muted); margin: 0 0 16px; }

/* ---------- Fortschritt / Arbeitszeit ---------- */
.progress-track { height: 8px; border-radius: 999px; background: var(--line-soft); overflow: hidden; margin-bottom: 6px; }
.progress-fill { height: 100%; border-radius: 999px; background: var(--yellow); transition: width 0.3s; }
.progress-fill--over { background: var(--red-ink); }
.progress-labels { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-bottom: 20px; }

.worktime-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.worktime-row .label { color: var(--muted); font-size: 14px; }
.worktime-row .value { font-size: 24px; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.worktime-row .value .target { font-size: 14px; font-weight: 400; color: var(--faint); }
.num-pos { color: var(--green-ink) !important; }
.num-neg { color: var(--red-ink) !important; }
.row-muted .label, .row-muted { color: var(--muted); font-size: 14px; }

.activity-badge { font-size: 13px; color: var(--yellow-ink); background: var(--yellow-soft); border-radius: 10px; padding: 8px 12px; margin-bottom: 16px; }

.error { font-size: 13px; color: var(--red-ink); margin-bottom: 12px; text-align: center; }
.warn-box { margin-top: 12px; margin-bottom: 0; background: var(--yellow-soft); color: var(--yellow-ink); border-radius: 10px; padding: 10px 14px; text-align: left; font-size: 13px; }

/* ---------- Formulare ---------- */
select, input[type=text], input[type=date], input[type=time], input[type=password], input[type=email], input[type=number], input[type=url] {
  width: 100%; padding: 11px 12px; border-radius: 10px; border: 1.5px solid var(--line); color: var(--ink); font-size: 15px;
  margin-bottom: 8px; background: var(--card); font-family: inherit;
}
select:focus, input:focus { outline: none; border-color: var(--ink); }

.form-row-group { display: flex; gap: 12px; }
.form-row-group .form-field { flex: 1; min-width: 0; }
.form-field { margin-bottom: 4px; }
.field-label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }

/* ---------- Tätigkeits-Auswahl ---------- */
.activity-tiles { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.activity-group-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--faint); font-weight: 700;
  margin: 10px 0 2px;
}
.activity-group-label:first-child { margin-top: 0; }
.activity-tile {
  display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left;
  padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--card); cursor: pointer;
  font-size: 14px; color: var(--ink); font-weight: 500; font-family: inherit;
}
.activity-tile:hover { border-color: var(--faint); }
.activity-tile.selected { border-color: var(--ink); background: var(--ink); color: #fff; }
.activity-tile .check { color: var(--yellow); font-weight: 700; }

/* ---------- Buttons ---------- */
button, .btn {
  width: 100%; padding: 15px; border-radius: 12px; border: none; font-weight: 600; font-size: 16px; cursor: pointer;
  font-family: inherit;
}
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #000; }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-small { width: auto; padding: 8px 16px; font-size: 14px; border-radius: 10px; }

.done-note { text-align: center; color: var(--muted); }

/* ---------- Login ---------- */
.login-hero { display: flex; flex-direction: column; align-items: center; gap: 18px; margin: 24px 0 30px; text-align: center; }
.login-hero .greeting { font-size: 26px; }
/* Werkzeugname unter dem Logo — «Select Crew» soll man sehen, nicht nur im Betreff lesen. */
.login-tool { margin: 4px 0 0; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.login-sub { font-size: 14px; color: var(--muted); margin: -6px 0 0; }
/* Zweite Sprache auf der Profil-Auswahl — leiser als die erste (siehe login.php). */
.login-sub-alt { font-size: 13px; color: var(--faint); }

.picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
@media (max-width: 600px) {
  .picker-grid { grid-template-columns: 1fr 1fr; }
}
.picker-item {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 12px;
  border-radius: 14px; border: 1.5px solid var(--line); background: var(--card); cursor: pointer; font: inherit;
}
.picker-item:hover { border-color: var(--ink); box-shadow: var(--shadow); }
.avatar {
  width: 64px; height: 64px; border-radius: 999px; overflow: hidden; background: var(--line-soft);
  display: flex; align-items: center; justify-content: center; font-weight: 600; color: var(--muted);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.picker-item .pname { font-size: 14px; color: var(--ink); text-align: center; line-height: 1.25; font-weight: 500; }

/* ---------- Team-Listen (Admin) ---------- */
.team-row { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.team-row:last-child { border-bottom: none; }
.avatar-sm { width: 40px; height: 40px; border-radius: 999px; overflow: hidden; background: var(--line-soft); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: var(--muted); flex-shrink: 0; }
.avatar-sm img { width: 100%; height: 100%; object-fit: cover; }
.team-info { flex: 1; min-width: 0; }
.tname { font-weight: 550; color: var(--ink); }
.team-info .tmeta { font-size: 12px; color: var(--faint); }
.team-info .tactivity { font-size: 12px; color: var(--yellow-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-badge { font-size: 12px; font-weight: 550; padding: 4px 12px; border-radius: 999px; flex-shrink: 0; }
.status-not-started { background: var(--line-soft); color: var(--muted); }
.status-working { background: var(--green-soft); color: var(--green-ink); }
.status-on-pause { background: var(--indigo-soft); color: var(--indigo-ink); }
.status-on-lunch { background: var(--yellow-soft); color: var(--yellow-ink); }
.status-done { background: #e9e7df; color: #55524a; }

.team-table-head {
  display: grid; grid-template-columns: 40px 1.4fr 90px 90px 1.2fr 130px 110px;
  gap: 14px; padding: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--faint);
  border-bottom: 1px solid var(--line-soft); margin-bottom: 4px;
}
.team-table-head span:nth-child(3), .team-table-head span:nth-child(4) { text-align: right; }
.team-table-head span:nth-child(6) { text-align: right; }

.team-row-cols {
  display: grid; grid-template-columns: 40px 1.4fr 90px 90px 1.2fr 130px 110px;
  align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line-soft);
}
.team-row-cols:last-child { border-bottom: none; }
.team-row-cols .col-today, .team-row-cols .col-week { font-size: 13px; color: var(--muted); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.team-row-cols .col-activity { font-size: 13px; color: var(--yellow-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team-row-cols .col-status { justify-self: end; }
.team-row-cols .col-pin { justify-self: end; }

.vac-pending { background: var(--yellow-soft); color: var(--yellow-ink); }
.vac-approved { background: var(--green-soft); color: var(--green-ink); }
.vac-rejected { background: var(--red-soft); color: var(--red-ink); }
.vac-recorded { background: var(--line-soft); color: var(--muted); }

.anomaly-card {
  width: 100%; max-width: 1080px; background: var(--yellow-soft); border: 1px solid #eeda8e; border-radius: 14px;
  padding: 16px 20px; margin-bottom: 16px;
}
.anomaly-card h2 { font-size: 14px; margin: 0 0 8px; color: var(--yellow-ink); }
.anomaly-item { font-size: 13px; color: var(--yellow-ink); padding: 4px 0; }

.activity-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.activity-row input { flex: 1; margin-bottom: 0; }
.activity-row .save { color: var(--green-ink); font-size: 14px; font-weight: 500; background: none; border: none; cursor: pointer; width: auto; padding: 0; }
.activity-row .delete { color: var(--red-ink); font-size: 14px; font-weight: 500; background: none; border: none; cursor: pointer; width: auto; padding: 0; }
.add-row { display: flex; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line-soft); margin-top: 8px; }
.add-row input { flex: 1; margin-bottom: 0; }
.add-row button { width: auto; padding: 12px 20px; }

/* ---------- Stempeluhr-Dashboard (index.php) ---------- */
.dash {
  width: 100%;
  max-width: 480px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.clock-head { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.clock-head .avatar { width: 54px; height: 54px; flex-shrink: 0; }
.clock-meta { font-size: 13.5px; color: var(--muted); margin-top: 6px; }
.clock-meta .status-live { color: var(--yellow-ink); font-weight: 550; }
.clock-actions { margin-top: 18px; }

.tile-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px; width: 100%;
}
.tile {
  background: var(--card); border-radius: 14px; border: 1.5px solid var(--line); font-family: inherit;
  padding: 18px 8px 14px; display: flex; flex-direction: column; align-items: center; gap: 9px;
  cursor: pointer;
}
.tile:hover { border-color: var(--ink); }
.tile:disabled { opacity: 0.35; cursor: not-allowed; }
.tile:disabled:hover { border-color: var(--line); }
.tile-icon { width: 24px; height: 24px; color: var(--ink); }
.tile-label { font-size: 13px; font-weight: 600; color: var(--ink); text-align: center; line-height: 1.25; }
.tile.tile-accent { background: var(--yellow); border-color: var(--yellow); }
.tile.tile-accent:hover { background: var(--yellow-hover); border-color: var(--yellow-hover); }
.tile.tile-amber .tile-icon { color: var(--yellow-ink); }
.tile.tile-dark { background: var(--ink); border-color: var(--ink); }
.tile.tile-dark .tile-icon, .tile.tile-dark .tile-label { color: #fff; }
.tile.tile-dark:hover { background: #000; }

.quick-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.quick-links a {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 16px 8px; border-radius: 14px; border: 1px solid var(--line); background: var(--card);
  font-size: 13px; font-weight: 600; color: var(--ink); text-align: center;
}
.quick-links a:hover { text-decoration: none; border-color: var(--ink); }
.quick-link-icon { width: 22px; height: 22px; color: var(--yellow-ink); }
.quick-link-icon svg { width: 100%; height: 100%; }

.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.stat-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px;
}
.stat-label { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.stat-value { font-size: 24px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.stat-value.pos { color: var(--green-ink); }
.stat-value.neg { color: var(--red-ink); }
.stat-sub { font-size: 12px; color: var(--faint); margin-top: 4px; }

/* ---------- Rechnungs-Aufschlüsselung (Ferienkonto) ---------- */
.calc { margin-bottom: 10px; }
.calc-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 7px 0; font-size: 14px; color: var(--muted);
}
.calc-row .calc-num { font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.calc-row.calc-total { border-top: 1px solid var(--line-soft); font-weight: 600; color: var(--ink); }
.calc-row.calc-total .calc-num { font-weight: 650; }
.calc-hint { display: block; font-size: 12px; color: var(--faint); }
.calc-note { font-size: 12px; color: var(--faint); margin: 0 0 4px; }

.calc-details summary {
  cursor: pointer; list-style: none; font-size: 13px; font-weight: 500; color: var(--muted);
  display: flex; align-items: center; gap: 6px; padding: 4px 0;
}
.calc-details summary::-webkit-details-marker { display: none; }
.calc-details summary::before { content: '\203a'; font-weight: 700; color: var(--faint); transition: transform 0.15s; display: inline-block; }
.calc-details[open] summary::before { transform: rotate(90deg); }
.calc-details[open] summary { margin-bottom: 4px; }

/* ---------- Wochen-Zeilen (Wochen-Cap-Modell) ---------- */
.week-row { gap: 10px; margin-bottom: 4px; }
.week-row .day-date { width: 92px; flex-shrink: 0; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.week-row .week-bar { flex: 1; }
.week-row .week-bar .hbar { margin-top: 0; }
.week-row .week-num { font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.week-row--foreign { opacity: 0.55; }
.chip-ok, .chip-pos, .chip-muted {
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.chip-ok { background: var(--line-soft); color: var(--muted); }
.chip-pos { background: var(--green-soft); color: var(--green-ink); }
.chip-muted { background: var(--line-soft); color: var(--faint); }

/* ---------- Monats-Detail (month.php) ---------- */
.month-nav { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.month-nav a { color: var(--muted); }
.month-nav strong { color: var(--ink); }
.day-row { margin-bottom: 2px; padding: 4px 0; font-size: 13px; }
.day-row .day-date { color: var(--ink); width: 90px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.day-row.is-weekend .day-date { color: var(--faint); }
.day-row .day-info { flex: 1; text-align: right; color: var(--ink); }
.day-row .day-absence { color: var(--yellow-ink); }
.day-row .day-empty { color: var(--faint); }
.day-row .day-activity { color: var(--faint); }
.day-row .day-manual { color: var(--yellow-ink); }

/* ---------- Admin-Dashboard-Shell (Sidebar) ---------- */
body.admin-shell-page {
  padding: 0;
  display: block;
  align-items: stretch;
  background: var(--bg);
}

.admin-shell { display: flex; min-height: 100vh; width: 100%; }

.admin-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: #191817;
  color: #d8d4c9;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.admin-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; margin: 4px 8px 28px; }
.admin-brand .brand-mark { height: 24px; width: auto; max-width: 100%; }
.admin-brand-sub { font-size: 11px; color: #8d897d; text-transform: uppercase; letter-spacing: 0.08em; }

.admin-nav { display: flex; flex-direction: column; gap: 2px; }
.admin-nav a {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px;
  color: #b5b1a4; font-size: 14px; font-weight: 500; text-decoration: none;
}
.admin-nav a:hover { background: rgba(255,255,255,0.07); color: #fff; text-decoration: none; }
.admin-nav a.active {
  background: rgba(245,196,0,0.14);
  color: var(--yellow);
}
.admin-nav .nav-icon { display: block; width: 18px; height: 18px; flex-shrink: 0; }
.admin-nav .nav-icon svg { display: block; width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.admin-nav-section { display: flex; flex-direction: column; gap: 2px; }
.admin-nav-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700;
  color: #7a766b; margin: 16px 12px 4px;
}
.admin-nav-section:first-child .admin-nav-label { margin-top: 0; }

.admin-sidebar-footer { margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.1); display: flex; flex-direction: column; gap: 2px; }
.admin-sidebar-footer a {
  display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 10px;
  color: #8d897d; font-size: 13px; font-weight: 500;
}
.admin-sidebar-footer a:hover { color: #fff; background: rgba(255,255,255,0.07); text-decoration: none; }
.admin-sidebar-footer .nav-icon { display: block; width: 18px; height: 18px; flex-shrink: 0; }
.admin-sidebar-footer .nav-icon svg { display: block; width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.admin-main { flex: 1; min-width: 0; padding: 28px 36px 40px; }
.admin-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 8px; }
.admin-topbar .who { font-size: 12px; color: var(--faint); }
.admin-topbar .name { font-weight: 600; color: var(--ink); font-size: 15px; }

.admin-content-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 28px; width: 100%; max-width: none;
}

/* «Ansicht von …» direkt aus der Kopfzeile (siehe render_admin_peek_picker). */
.peekjump { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.peekjump-label { font-size: 12px; color: var(--faint); white-space: nowrap; }
.peekjump select {
  border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px;
  font: inherit; font-size: 13px; background: var(--card); color: var(--ink); max-width: 190px;
}
.peekjump-go { width: auto; padding: 6px 12px; font-size: 13px; border-radius: 8px; }

/* Das Menü am Handy: die Checkbox trägt den Zustand, sichtbar ist sie nie.
   Nicht `display:none` — sonst wäre sie nicht mehr mit der Tastatur erreichbar. */
.admin-menu-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.admin-mobilebar, .admin-menu-backdrop, .admin-menu-close { display: none; }

@media (max-width: 900px) {
  .admin-shell { flex-direction: column; }

  /* Kopfzeile: «Menü» als beschrifteter Knopf, daneben der Name der offenen Seite. */
  .admin-mobilebar {
    display: flex; align-items: center; gap: 10px;
    position: sticky; top: 0; z-index: 100;
    background: #191817; color: #d8d4c9; padding: 10px 14px;
  }
  .admin-burger {
    display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; cursor: pointer;
    padding: 8px 12px; border-radius: 10px; background: rgba(255,255,255,0.10);
    color: #fff; font-size: 14px; font-weight: 600;
    /* Ohne das markiert ein etwas längerer Fingerdruck das Wort «Menü», statt zu öffnen. */
    user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  }
  .admin-burger .nav-icon { display: block; width: 18px; height: 18px; }
  .admin-burger .nav-icon svg { display: block; width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
  .admin-mobilebar-here {
    display: inline-flex; align-items: center; gap: 8px; min-width: 0;
    color: var(--yellow); font-size: 14px; font-weight: 600;
  }
  .admin-mobilebar-here .nav-icon { display: block; width: 17px; height: 17px; flex-shrink: 0; }
  .admin-mobilebar-here .nav-icon svg { display: block; width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .admin-mobilebar-here > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Die Sidebar wird zum Schubfach — mit Beschriftungen und Gruppen wie am Desktop.
     z-index unter dem Vorschau-Band (300), damit «Ansicht von …» sichtbar bleibt. */
  .admin-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 200;
    width: min(320px, 86vw); height: 100%;
    padding: 20px 14px 24px; gap: 2px;
    transform: translateX(-102%);
    transition: transform 0.22s ease;
    box-shadow: 0 0 40px rgba(0,0,0,0.45);
  }
  body:has(.peekbar) .admin-sidebar { top: 0; height: 100%; }
  .admin-menu-toggle:checked ~ .admin-sidebar { transform: none; }
  .admin-menu-toggle:focus-visible ~ .admin-mobilebar .admin-burger { outline: 2px solid var(--yellow); outline-offset: 2px; }

  .admin-menu-backdrop { position: fixed; inset: 0; z-index: 190; background: rgba(0,0,0,0.45); }
  .admin-menu-toggle:checked ~ .admin-menu-backdrop { display: block; }

  .admin-brand { position: relative; margin: 0 8px 20px; padding-right: 34px; }
  .admin-menu-close {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: -4px; right: -4px; width: 34px; height: 34px;
    border-radius: 10px; background: rgba(255,255,255,0.10); color: #fff;
    font-size: 15px; line-height: 1; cursor: pointer;
    user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  }

  .admin-main { padding: 20px 16px 32px; }
  .admin-content-card { padding: 18px; border-radius: 16px; }

  .admin-topbar { align-items: flex-start; }
  .peekjump { flex-wrap: wrap; gap: 6px; }
  .peekjump select { max-width: 170px; }
}

/* Karten innerhalb der Admin-Shell nutzen die volle Breite */
.admin-main .card, .admin-main .card--wide { max-width: none; }
.admin-main .stat-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 16px; }

/* ---------- Absenz-Übersicht (Ferien / Krankheit) ---------- */
.absence-row { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.absence-row:last-child { border-bottom: none; }
.absence-main { flex: 1; min-width: 0; }
.absence-name { font-weight: 600; color: var(--ink); }
.absence-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.absence-figure { flex: 0 0 300px; max-width: 300px; }
@media (max-width: 820px) {
  .absence-row { flex-wrap: wrap; }
  .absence-main { flex-basis: calc(100% - 56px); }
  .absence-figure { flex: 1 1 100%; max-width: 100%; margin-left: 56px; }
}

/* Jahres-Monatsstreifen (12 Zellen) */
.year-strip { display: flex; gap: 3px; }
.year-strip .cell {
  flex: 1; height: 26px; border-radius: 4px; background: var(--line-soft);
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600;
  color: var(--faint); position: relative;
}
.year-strip .cell.has { color: #fff; }
.year-strip .cell.vac { background: var(--yellow); color: var(--ink); }
.year-strip .cell.sick { background: var(--red-ink); color: #fff; }
.year-strip .cell.issue { background: var(--red-ink); color: #fff; }

/* Ampel-Punkte */
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 999px; margin-right: 7px; vertical-align: middle; flex-shrink: 0; }
.dot-good { background: var(--green-ink); }
.dot-warn { background: var(--yellow); }
.dot-bad { background: var(--red-ink); }

/* Health-Karte (Balance-Seite) */
.health-card { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; border-left: 4px solid var(--line); }
.health-card.health-good { border-left-color: var(--green-ink); }
.health-card.health-warn { border-left-color: var(--yellow); }
.health-card.health-bad { border-left-color: var(--red-ink); }
.health-dot { width: 16px; height: 16px; border-radius: 999px; flex-shrink: 0; }
.health-title { font-size: 13px; color: var(--muted); }
.health-msg { font-family: var(--serif); font-size: 19px; color: var(--ink); line-height: 1.3; margin-top: 2px; }
.year-strip-labels { display: flex; gap: 3px; margin-top: 3px; }
.year-strip-labels span { flex: 1; text-align: center; font-size: 9px; color: var(--faint); }

.big-figure { display: flex; align-items: baseline; gap: 6px; }
.big-figure .num { font-size: 22px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.big-figure .num.sick { color: var(--red-ink); }
.big-figure .unit { font-size: 13px; color: var(--muted); }

/* ---------- Mini-Visualisierungen (Admin) ---------- */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }

.hbar {
  display: block;
  height: 6px; border-radius: 999px; background: var(--line-soft); overflow: hidden;
  min-width: 56px; margin-top: 5px;
}
.hbar > i { display: block; height: 100%; border-radius: 999px; background: var(--yellow); }
.hbar.hbar--over > i { background: var(--green-ink); }
.hbar.hbar--muted > i { background: var(--faint); }

.colchart { display: flex; align-items: stretch; gap: 3px; height: 64px; position: relative; margin: 12px 0 2px; }
.colchart::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--line); }
.colchart .col { flex: 1; position: relative; min-width: 8px; }
.colchart .col i { position: absolute; left: 0; right: 0; display: block; border-radius: 3px 3px 0 0; }
.colchart .col i.pos { bottom: 50%; background: #3a7031; }
.colchart .col i.neg { top: 50%; background: #b3402a; border-radius: 0 0 3px 3px; }
.colchart .col.today::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 4px; height: 4px; margin-left: -2px; border-radius: 999px; background: var(--faint); }
.colchart-labels { display: flex; gap: 3px; margin-bottom: 12px; }
.colchart-labels span { flex: 1; min-width: 8px; text-align: center; font-size: 9px; color: var(--faint); }

/* ---------- 2-Spalten-Layout (month.php, vacation.php) ---------- */
.page-grid {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 480px;
}

@media (min-width: 900px) {
  .page-grid {
    max-width: 1080px;
    flex-direction: row;
    align-items: flex-start;
    gap: 18px;
  }
  .page-grid .col-main {
    flex: 0 0 460px;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .page-grid .col-side {
    flex: 1;
    min-width: 0;
  }
  .page-grid .col-side .card {
    max-height: calc(100vh - 140px);
    overflow-y: auto;
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
  body { padding: 14px 14px 32px; }

  .topnav { margin-bottom: 20px; flex-wrap: wrap; row-gap: 10px; }
  .topnav-links { gap: 14px; flex-wrap: wrap; }
  .topnav-links a { font-size: 13px; }

  .greeting { font-size: 24px; }
  .greeting .spark { width: 18px; height: 18px; }

  .header { flex-wrap: wrap; row-gap: 8px; margin-bottom: 16px; }
  .header .links { flex-wrap: wrap; row-gap: 6px; column-gap: 10px; font-size: 13px; }

  .card, .card--wide, .anomaly-card, .tile-grid { max-width: 100%; }
  .card, .card--wide { padding: 18px; border-radius: 16px; }

  .clock-head { gap: 12px; margin-bottom: 16px; }
  .clock-head .avatar { width: 46px; height: 46px; }

  .stat-grid { gap: 10px; }
  .stat-card { padding: 14px; border-radius: 14px; }
  .stat-value { font-size: 20px; }

  .team-row { flex-wrap: wrap; gap: 10px; padding: 14px 0; }
  .team-info { min-width: 60%; }
  .team-row form { width: 100%; justify-content: flex-end; }
  .team-row .status-badge { margin-left: auto; }

  /* «Team heute» auf dem Handy: EINE Zeile pro Person (Raphael, 06.08.2026).
     Vorher brach hier nur das Desktop-Raster um — Name, Zahlen, Status-Chip und
     «PIN zurücksetzen» ergaben gut 100 px pro Person, für zehn Personen also drei
     Bildschirme. Das ist eine Seite, die man im Vorbeigehen liest: kleiner Avatar,
     farbiger Status-Punkt, Name, Ist/Soll mit Mini-Balken, Woche. */
  .team-table-head { display: none; }
  .team-row-cols { display: flex; align-items: center; flex-wrap: wrap; gap: 0 8px; padding: 8px 0; }
  .team-row-cols .avatar-sm { order: -2; width: 28px; height: 28px; font-size: 10px; }
  .team-row-cols .tname { flex: 1; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Status als Punkt — die Chip-Reihe oben zählt die Zustände bereits, hier genügt
     die Farbe (Beschriftung bleibt als title für langes Antippen). `currentColor` ist
     die Schriftfarbe der status-*-Klasse: der Punkt bekommt so den kräftigen Ton und
     nicht den blassen Chip-Hintergrund, in dem er unsichtbar wäre. */
  .team-row-cols .col-status {
    order: -1; flex-shrink: 0; width: 8px; height: 8px; padding: 0; margin: 0;
    border-radius: 999px; background: currentColor; font-size: 0; line-height: 0;
  }
  .team-row-cols .col-today { display: flex; align-items: center; gap: 6px; text-align: left; font-size: 12px; }
  /* Das Soll steht nicht in der Zeile: es ist bei allen dasselbe (8h24), und der
     Balken daneben zeigt ohnehin, wie weit der Tag ist — sein title nennt beide
     Zahlen. Die ~46 px gehen an den Namen, der sonst schon bei «Leonie Schw…» abbricht. */
  .team-row-cols .col-today .ct-target { display: none; }
  .team-row-cols .col-today .hbar { width: 26px; min-width: 26px; margin-top: 0; }
  .team-row-cols .col-week { text-align: right; font-size: 11.5px; min-width: 38px; }
  /* Tätigkeit auf die zweite Zeile, aber nur wenn eine läuft — die leere Zelle
     kostete sonst bei jeder Person eine Zeile. */
  .team-row-cols .col-activity { flex-basis: 100%; margin-left: 52px; font-size: 11.5px; white-space: normal; }
  .team-row-cols .col-activity:empty { display: none; }
  /* «PIN zurücksetzen» ist Pflege, nicht Übersicht — sie steht weiter im Profil. */
  .team-row-cols .col-pin { display: none; }

  .form-row-group { flex-direction: column; gap: 0; }
  .form-row-group--tight { flex-direction: row; gap: 8px; }

  /* Zeiten nachtragen: kompakteres Formular, damit es auf Mobile nicht ewig scrollt. */
  .form-field { margin-bottom: 2px; }
  select, input[type=text], input[type=date], input[type=time], input[type=password], input[type=email], input[type=number] {
    padding: 9px 10px; margin-bottom: 6px;
  }
  .field-label { margin-bottom: 2px; }

  .add-row, .activity-row { flex-wrap: wrap; }
  .add-row input, .activity-row input { width: 100%; flex-basis: 100%; }
  .add-row button { width: 100%; }

  .tile-label { font-size: 12px; }
  .tile { padding: 10px 6px 9px; gap: 5px; }
  .tile-icon { width: 20px; height: 20px; }

  /* Stempeluhr: Tätigkeits-Auswahl 2-spaltig und kompakter, damit der ganze
     Einstempel-Vorgang ohne Scrollen auf einen Bildschirm passt.
     ⚠️ Das ist der Massstab dieser Seite (Raphael, 07.08.2026): «Einstempeln» muss
     ohne Scrollen erreichbar sein. Wer acht Tätigkeiten hat (Moritz: Select ×5,
     Display ×2, FotoKids), war vorher gut 120 px darunter — der Knopf lag unter der
     Safari-Leiste. Jede Zeile hier ist ein Stück dieser 120 px; wer eine Zahl
     hochsetzt, prüft die Seite bei 430 × 700 mit acht Kacheln gegen. */
  .greeting { font-size: 20px; gap: 7px; }
  .greeting .spark { width: 16px; height: 16px; }
  .clock-meta { font-size: 12.5px; margin-top: 3px; }
  .card, .card--wide { padding: 16px; }
  .clock-head { margin-bottom: 12px; gap: 10px; }
  .clock-head .avatar { width: 42px; height: 42px; }
  /* Auf die Stempeluhr eingeschnürt: .worktime-row steht auch in Balance, Monat,
     Profil und auf der Fotografen-Seite, .progress-labels auch in vacation.php —
     die sollen von dieser Platz-Diät nichts abbekommen. */
  .progress-labels { margin-bottom: 8px; }
  .clock-card .progress-labels { font-size: 11.5px; }
  .worktime-row { margin-bottom: 4px; }
  .clock-card .worktime-row .value { font-size: 22px; }
  .clock-note { margin-top: 8px; padding: 7px 10px; font-size: 13px; }
  .clock-actions { margin-top: 10px; }
  .subtitle { margin-bottom: 8px; }
  .activity-badge { padding: 6px 10px; margin-bottom: 8px; }

  .activity-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 8px; }
  .activity-group-label { grid-column: 1 / -1; margin: 4px 0 0; font-size: 10.5px; }
  .activity-group-label:first-child { margin-top: 0; }
  /* 12.5 px ist keine Kosmetik: bei 14 px bricht «Projects › Business Admin» auf zwei
     Zeilen und macht seine ganze Kachelreihe höher. */
  .activity-tile { padding: 8px 10px; font-size: 12.5px; }

  .dash { gap: 12px; }
  .quick-links a { padding: 12px 6px; font-size: 12px; }
}

/* ---------- Monatskalender (month.php) ---------- */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin: 8px 0 12px;
}
.cal-head {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--faint);
  padding-bottom: 2px;
}
.cal-blank { min-height: 44px; }
.cal-day {
  appearance: none;
  border: 1px solid var(--line-soft);
  background: var(--card);
  border-radius: 10px;
  min-height: 44px;
  padding: 4px 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  font-family: inherit;
  color: var(--ink);
  position: relative;
}
button.cal-day { cursor: pointer; transition: transform 0.08s ease, box-shadow 0.08s ease; }
button.cal-day:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.cal-num { font-size: 12px; font-weight: 600; line-height: 1; }
.cal-val { font-size: 9.5px; line-height: 1.1; color: var(--muted); min-height: 11px; }
.cal-day--worked { background: var(--yellow-soft); border-color: #f0dfa0; }
.cal-day--worked .cal-val { color: var(--yellow-ink); font-weight: 600; }
.cal-day--vac { background: var(--green-soft); border-color: #cfe3c9; }
.cal-day--vac .cal-val { color: var(--green-ink); font-weight: 600; }
.cal-day--sick { background: var(--red-soft); border-color: #f0d2c9; }
.cal-day--sick .cal-val { color: var(--red-ink); font-weight: 600; }
.cal-day--absent { background: var(--line-soft); }
.cal-day--holiday { background: var(--indigo-soft); border-color: #d8d6ec; }
.cal-day--holiday .cal-val { color: var(--indigo-ink); font-weight: 600; }
.cal-day--off { background: transparent; border-color: transparent; }
.cal-day--off .cal-num, .cal-day--future .cal-num { color: var(--faint); font-weight: 400; }
.cal-day--future { background: transparent; }
.cal-day--today { box-shadow: 0 0 0 2px var(--yellow); }
.cal-day--manual::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d99a2b;
}
.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 11.5px;
  color: var(--muted);
}
.cal-legend span { display: inline-flex; align-items: center; gap: 5px; }
.cal-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 4px;
  border: 1px solid var(--line);
}
.cal-dot--manual { background: var(--card); position: relative; }
.cal-dot--manual::after {
  content: "";
  position: absolute;
  top: 1px;
  right: 1px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #d99a2b;
}

/* ---------- Aufklappbare Karten & Erklärtexte ---------- */
.card-collapse > summary {
  cursor: pointer;
  list-style: none;
}
.card-collapse > summary::-webkit-details-marker { display: none; }
.card-collapse > summary::after {
  content: "›";
  float: right;
  font-size: 20px;
  color: var(--faint);
  transform: rotate(90deg);
  transition: transform 0.15s ease;
  margin-top: -26px;
}
.card-collapse[open] > summary::after { transform: rotate(-90deg); }
.calc-note-details > summary {
  cursor: pointer;
  font-size: 12.5px;
  color: var(--muted);
  list-style: none;
}
.calc-note-details > summary::-webkit-details-marker { display: none; }
.calc-note-details > summary::before { content: "ⓘ "; color: var(--faint); }

/* ---------- Stempeluhr-Momente (Pausen-Erinnerung, Feierabend, Ferien-Countdown) ---------- */
.clock-note {
  margin: 12px 0 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--yellow-ink);
  background: var(--yellow-soft);
  border-radius: 10px;
  padding: 8px 12px;
}
.clock-note--vac {
  color: var(--green-ink);
  background: var(--green-soft);
}
/* Mindestpause bereits unterschritten — deutlicher als der freundliche Hinweis davor. */
.clock-note--breakdue {
  color: var(--red-ink);
  background: var(--red-soft);
  font-weight: 500;
}

/* ---------- Quick-Link-Kacheln mit Mini-Wert ---------- */
.quick-link-value { font-size: 11.5px; color: var(--muted); font-weight: 400; margin-top: -2px; }

/* ---------- Kompaktere Mobile-Navigation & Login-Kacheln ---------- */
@media (max-width: 600px) {
  .topnav { margin-bottom: 14px; row-gap: 6px; }
  .brand-mark { height: 20px; }
  .topnav-links { gap: 12px; }

  .picker-grid { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .picker-item { padding: 10px 6px; gap: 6px; }
  .picker-item .avatar { width: 52px; height: 52px; }
  .picker-item .pname { font-size: 12.5px; }
  .login-hero .greeting { font-size: 22px; }
}

/* ---------- Team-Puls (team.php) ---------- */
.quick-links { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 600px) {
  .quick-links { grid-template-columns: 1fr 1fr; }
}
.team-birthday {
  background: var(--yellow-soft);
  border: 1px solid #f0dfa0;
  font-size: 14.5px;
  padding: 14px 18px;
}
.team-pulse-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
}
.team-pulse-row:last-child { border-bottom: none; }
.team-avatar { width: 40px; height: 40px; flex: none; font-size: 13px; }
.team-pulse-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.team-pulse-name { font-size: 14.5px; font-weight: 600; }
.team-pulse-activity { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-chip {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  padding: 4px 10px;
}
.team-chip--work { background: var(--green-soft); color: var(--green-ink); }
.team-chip--pause { background: var(--yellow-soft); color: var(--yellow-ink); }
.team-chip--absent { background: var(--line-soft); }
.team-empty { font-size: 14px; color: var(--muted); margin: 8px 0 0; }
.team-avatar-strip { display: flex; flex-wrap: wrap; gap: 12px; }
.team-strip-item { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 56px; }
.team-strip-item--muted { opacity: 0.55; }
.team-strip-name { font-size: 11.5px; color: var(--muted); max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Abmelden: Desktop als Text, Mobile als Icon (hält die Nav einzeilig) */
.topnav-links .logout-icon { display: none; width: 17px; height: 17px; vertical-align: -3px; }
@media (max-width: 600px) {
  .topnav-links .logout-text { display: none; }
  .topnav-links .logout-icon { display: inline-block; }
}

/* month.php: breite Hauptspalte (Kalender braucht Platz), schmale Seitenspalte (Nachtrag-Formular) */
@media (min-width: 900px) {
  .page-grid--wide-main .col-main { flex: 1 1 auto; min-width: 0; }
  .page-grid--wide-main .col-side { flex: 0 0 340px; }
  .page-grid--wide-main .cal-day { min-height: 56px; }
  .page-grid--wide-main .cal-val { font-size: 11px; }
}

@media (min-width: 900px) {
  .page-grid--wide-main .col-main .card { max-width: none; }
}

/* ---------- Einsatzplan aus dem Select-All-Kalender (team.php) ---------- */
.plan-day { margin-bottom: 10px; }
.plan-day:last-of-type { margin-bottom: 0; }
.plan-day-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--faint);
  margin-bottom: 4px;
}
.plan-row { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; font-size: 14px; }
.plan-station {
  flex: none;
  font-size: 11.5px;
  font-weight: 700;
  background: var(--yellow-soft);
  color: var(--yellow-ink);
  border-radius: 6px;
  padding: 2px 7px;
}
.plan-names { min-width: 0; }
.plan-reserve { color: var(--muted); font-size: 12.5px; }
.plan-note { color: var(--muted); font-style: italic; }

/* «Einteilung» als Raster (Raphael, 10.08.2026: «geht das nicht geordneter, mehr
   nebeneinander?»). Untereinander waren sechs Rollen mal zwei Tage zwölf Zeilen —
   auf dem Handy eine halbe Bildschirmhöhe für sechs Namen. Zwei Rollen nebeneinander,
   ab 760 px die beiden Tage. Der Chip hat eine feste Mindestbreite, damit die Namen
   trotz «Back Up» und «Camp» eine gemeinsame Kante bilden — genau das fehlte vorher. */
.plan-cols { display: grid; gap: 14px; }
.plan-cols .plan-day { margin-bottom: 0; }
.plan-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 2px 14px; }
.plan-slot { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 3px 0; font-size: 14px; }
.plan-slot .plan-station { min-width: 62px; text-align: center; }
@media (min-width: 760px) {
  .plan-cols { grid-template-columns: 1fr 1fr; gap: 24px; }
}

/* ---------- Maskottchen — schwebende Mini-Qualle in Select-Gelb ---------- */
.mascot {
  width: 30px;
  height: 30px;
  flex: none;
  animation: mascot-float 5s ease-in-out infinite;
}
.greeting .mascot { width: 28px; height: 28px; }
.jelly-bell {
  transform-box: fill-box;
  transform-origin: 50% 80%;
  animation: jelly-pulse 3.2s ease-in-out infinite;
}
.jelly-tentacle {
  transform-box: fill-box;
  transform-origin: 50% 0%;
  animation: jelly-sway 3.2s ease-in-out infinite;
}
.jelly-tentacle.t2 { animation-delay: 0.35s; }
.jelly-tentacle.t3 { animation-delay: 0.7s; }
.jelly-tentacle.t4 { animation-delay: 1.05s; }
@keyframes mascot-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-3px) rotate(2.5deg); }
}
@keyframes jelly-pulse {
  0%, 100% { transform: scale(1, 1); }
  45% { transform: scale(1.05, 0.93); }
  70% { transform: scale(0.97, 1.03); }
}
@keyframes jelly-sway {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(5deg); }
}
.mascot:hover { animation: mascot-wiggle 0.5s ease-in-out; }
@keyframes mascot-wiggle {
  0% { transform: rotate(0); }
  25% { transform: rotate(-12deg) scale(1.08); }
  65% { transform: rotate(10deg) scale(1.04); }
  100% { transform: rotate(0); }
}
.mascot-hop { animation: mascot-hop 0.9s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes mascot-hop {
  0% { transform: translateY(0) scale(1, 1); }
  30% { transform: translateY(-8px) scale(0.94, 1.08) rotate(-7deg); }
  50% { transform: translateY(0) scale(1.1, 0.88); }
  70% { transform: translateY(-3px) scale(0.98, 1.04) rotate(6deg); }
  100% { transform: translateY(0) scale(1, 1); }
}
@media (max-width: 600px) {
  .greeting .mascot { width: 23px; height: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  .mascot, .jelly-bell, .jelly-tentacle { animation: none !important; }
}

/* Einsatzplan: Cockpit-Rollen & Absenz-Chips */
.plan-role {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--yellow-ink);
  background: var(--yellow-soft);
  border-radius: 5px;
  padding: 1px 5px;
  margin-left: 6px;
  vertical-align: 1px;
}
.plan-names .plan-role:first-child { margin-left: 0; }
.plan-station--vac { background: var(--green-soft); color: var(--green-ink); }
.plan-station--sick { background: var(--red-soft); color: var(--red-ink); }
.plan-station--free { background: var(--line-soft); color: var(--muted); }

/* ---------- Daily (Feierabend-Frage) ---------- */
.daily-card { border-left: 3px solid var(--yellow); }
.daily-label {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--yellow-ink);
}
.daily-question {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ink);
}
.daily-answer { font-size: 13.5px; color: var(--muted); font-style: italic; }

/* ---------- FAQ ---------- */
.faq-group {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--yellow-ink);
  margin: 20px 0 6px;
}
.faq-item {
  border-bottom: 1px solid var(--line-soft);
  padding: 9px 0;
}
.faq-item > summary {
  cursor: pointer;
  list-style: none;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::before { content: "› "; color: var(--faint); }
.faq-item[open] > summary::before { content: "⌄ "; }
.faq-item > p { margin: 8px 0 2px 14px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }

/* FAQ-Navigationslink: Desktop «FAQ», Mobile nur «?» */
.faq-short { display: none; }
@media (max-width: 600px) {
  .faq-full { display: none; }
  .faq-short { display: inline; font-weight: 700; }
}

/* Login: Team-Gruppen */
.picker-group-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--yellow-ink);
  margin: 18px 0 8px;
}
.picker-group-label:first-of-type { margin-top: 0; }

/* Login: Team-Chips auf den Profilkacheln */
.pteam {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 999px;
  padding: 2px 8px;
}
.pteam--office { background: var(--yellow-soft); color: var(--yellow-ink); }
.pteam--fotografen { background: var(--indigo-soft); color: var(--indigo-ink); }
.pteam--display { background: var(--green-soft); color: var(--green-ink); }
.pteam--agentur { background: var(--line-soft); color: var(--muted); }

/* Team-Chip Geschäftsführung: Brand-Schwarz */
.pteam--geschaeftsfuehrung { background: var(--ink); color: #fff; }

/* ---------- Fotografen-Seite (fotograf.php) ---------- */
/* Drei Kennzahlen (Stunden · Trinkgeld · Upgrades) gehören auf EINE Zeile — auch auf
   dem Handy, das ist die Hauptansicht der Fotograf:innen (Sandro, 28.07.2026).
   Eine allfällige vierte Kachel (Reisezeit) rutscht in die zweite Reihe. */
.foto-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.foto-stat {
  background: var(--yellow-soft);
  border-radius: 14px;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.foto-stat-num { font-size: 24px; font-weight: 700; color: var(--ink); }
.foto-stat-label { font-size: 12.5px; color: var(--yellow-ink); font-weight: 600; }
.foto-stat-rank { font-size: 11px; color: var(--yellow-ink); opacity: .72; font-weight: 600; }
/* Auf schmalen Geräten müssen «CHF 36.08» und die Beschriftung in ein Drittel passen —
   darum sind die Labels einzeilig gehalten («Stunden», nicht «Stunden bisher»). */
@media (max-width: 520px) {
  .foto-stats { gap: 8px; }
  .foto-stat { padding: 13px 6px; }
  .foto-stat-num { font-size: 17px; letter-spacing: -.01em; }
  .foto-stat-label { font-size: 10.5px; text-align: center; line-height: 1.25; white-space: nowrap; }
  .foto-stat-rank { font-size: 9.5px; }
}
/* Auf dem Desktop mehr Platz (Raphael, 31.07.2026): die 480px-Handy-Spalte wirkte auf
   dem Mac verloren, die vierte Kachel (Reisezeit) brach allein in die zweite Reihe. */
@media (min-width: 900px) {
  .dash--foto { max-width: 720px; }
  .dash--foto .card { max-width: none; }
  .dash--foto .foto-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}
/* Schichtzeile: Datum · Studio · Zeit auf einer Zeile, die Buchungslage linksbündig
   darunter. Rechtsbündig gestapelt franste sie auf dem Handy über drei Zeilen aus
   und schob das Datum in die Mitte (Raphael, 31.07.2026). */
.shift-row { flex-wrap: wrap; row-gap: 2px; padding: 8px 0; margin-bottom: 0; border-bottom: 1px solid var(--line-soft); }
.shift-row:last-child { border-bottom: none; }
.shift-row .day-date { width: 80px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.shift-row .studio-name { flex: none; }
.shift-row .shift-time { flex: 1; text-align: right; font-size: 13px; color: var(--muted); white-space: nowrap; }
.shift-row .shift-bookings { flex-basis: 100%; padding-left: 80px; font-size: 12px; color: var(--muted); }
/* Zugesagte Startzeit aus dem Abendcheck (04.08.2026). Bewusst die einzige hervorgehobene
   Zahl in der Zeile: sie ist das Einzige hier, was sich nicht mehr ändert. Alles andere in
   der Schichtzeile ist Planung. */
.shift-row .shift-promise { flex-basis: 100%; padding-left: 80px; font-size: 13px;
  font-weight: 600; color: var(--green-ink); }
.shift-row .shift-promise .promise-src { font-weight: 400; color: var(--muted); font-size: 12px; }
@media (max-width: 600px) {
  .shift-row .shift-bookings, .shift-row .shift-promise { padding-left: 0; }
}

/* Grüner Punkt = Person ist gerade eingestempelt («jetzt erreichbar»). */
.live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green-ink); flex-shrink: 0; }
.foto-forms { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.foto-form { display: flex; flex-direction: column; gap: 8px; }
.foto-form input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
}
.foto-delete {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--faint);
  font-size: 14px;
  cursor: pointer;
  padding: 4px 6px;
}
.foto-delete:hover { color: var(--red-ink); }
@media (max-width: 600px) {
  .foto-forms { grid-template-columns: 1fr; }
}

/* ---------- Einsatzplan-Kalender (admin_schedule.php) ---------- */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.plan-grid-head {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--faint);
  padding-bottom: 2px;
}
.plan-cell {
  min-height: 86px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: var(--card);
}
.plan-cell--blank { border: none; background: transparent; min-height: 0; }
.plan-cell--off { background: var(--bg); }
.plan-cell--today { box-shadow: 0 0 0 2px var(--yellow); border-color: transparent; }
.plan-cell-num { font-size: 11px; font-weight: 700; color: var(--faint); }
.plan-tag {
  font-size: 10.5px;
  line-height: 1.3;
  border-radius: 6px;
  padding: 3px 5px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.plan-tag--duty { background: var(--yellow-soft); color: var(--yellow-ink); }
.plan-tag--duty b { color: var(--ink); }
.plan-tag--vac { background: var(--green-soft); color: var(--green-ink); }
.plan-tag--sick { background: var(--red-soft); color: var(--red-ink); }
.plan-tag--free { background: var(--line-soft); color: var(--muted); }
.plan-tag--note { background: var(--indigo-soft); color: var(--indigo-ink); font-style: italic; }

/* ---------- Office-Planer (admin_schedule.php) ---------- */
.plan-table { border-collapse: separate; border-spacing: 4px; width: 100%; }
.plan-table th {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  padding: 4px;
  text-align: center;
  min-width: 74px;
}
.plan-table th.is-today { color: var(--ink); background: var(--yellow-soft); border-radius: 8px; }
.plan-table th.is-holiday { color: var(--indigo-ink); }
.plan-table-date { font-size: 10px; color: var(--faint); font-weight: 400; }
.plan-table td { padding: 0; }
td.plan-table-name, th.plan-table-name {
  text-align: left;
  min-width: 130px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
td.plan-table-name { display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 0; }
.plan-cell-form { margin: 0; }
.plan-select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 4px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  background: var(--card);
  color: var(--faint);
  cursor: pointer;
  appearance: none;
}
.plan-select:hover { border-color: var(--ink); }
.plan-select--hello { background: var(--yellow-soft); color: var(--yellow-ink); border-color: #f0dfa0; }
.plan-select--office { background: var(--green-soft); color: var(--green-ink); border-color: #cfe3c9; }
.plan-select--projekt { background: var(--indigo-soft); color: var(--indigo-ink); border-color: #d8d6ec; }
.plan-select--aussen { background: #e6eef5; color: #35566e; border-color: #cfdde8; }
.plan-select--backup { background: #e0efec; color: #2f6b60; border-color: #c9e2dc; }
.plan-select--admin { background: #efe9e2; color: #6f5f4e; border-color: #e0d6c8; }
.plan-select--kidscamp { background: #fbe6ea; color: #a8455e; border-color: #f2ccd4; }
.plan-select--frei { background: var(--line-soft); color: var(--muted); border-color: var(--line); }

/* Rollen-Wähler: Zelle antippen → Menü (löste am 05.08.2026 das Durchklicken ab —
   bei acht Rollen brauchte «Frei» sieben Klicks). */
.plan-pick { position: relative; padding-right: 16px; transition: transform 0.12s ease, box-shadow 0.12s ease; }
.plan-pick:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(26, 25, 21, 0.09); }
.plan-pick:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.plan-pick .plan-pick-caret {
  position: absolute; right: 6px; top: 50%; margin-top: -2px;
  width: 0; height: 0; opacity: 0.5;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor;
  transition: transform 0.15s ease;
}
.plan-pick.is-open { box-shadow: 0 0 0 2px var(--ink); }
.plan-pick.is-open .plan-pick-caret { transform: rotate(180deg); }
.plan-pick.is-saving { opacity: 0.55; }
.plan-pick.is-saved { animation: plan-pop 0.45s ease; }
@keyframes plan-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

.plan-menu-backdrop { position: fixed; inset: 0; z-index: 40; background: transparent; }
.plan-menu {
  position: fixed;
  z-index: 41;
  min-width: 218px;
  padding: 6px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  animation: plan-menu-in 0.13s ease-out;
}
@keyframes plan-menu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.plan-menu-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 4px 8px 7px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 4px;
}
.plan-menu-who { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.plan-menu-day { font-size: 11px; color: var(--faint); }
.plan-menu-item {
  display: flex; align-items: center; gap: 9px;
  width: 100%;
  padding: 8px 8px;
  border: 0;
  border-radius: 9px;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
}
.plan-menu-item:hover { background: var(--line-soft); }
.plan-menu-item:focus-visible { outline: none; background: var(--line-soft); box-shadow: inset 0 0 0 2px var(--ink); }
.plan-menu-item.is-current { background: var(--yellow-soft); }
.plan-menu-dot {
  flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--card);
}
.plan-menu-text { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.plan-menu-text b { font-size: 13px; font-weight: 600; }
.plan-menu-text em { font-size: 10.5px; font-style: normal; color: var(--faint); }
.plan-menu-check { font-size: 12px; color: var(--yellow-ink); opacity: 0; }
.plan-menu-item.is-current .plan-menu-check { opacity: 1; }

@media (max-width: 640px) {
  .plan-menu.is-sheet {
    left: 0 !important; right: 0; top: auto !important; bottom: 0;
    min-width: 0;
    border-radius: 18px 18px 0 0;
    padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
    animation: plan-sheet-in 0.16s ease-out;
  }
  .plan-menu.is-sheet .plan-menu-item { padding: 12px 8px; }
  .plan-menu-backdrop { background: rgba(26, 25, 21, 0.18); }
}
@keyframes plan-sheet-in {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.plan-abs {
  display: block;
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  background: var(--line-soft);
  border-radius: 8px;
  padding: 8px 4px;
}
.role-dot--hello { background: var(--yellow-soft); border-color: #f0dfa0; }
.role-dot--office { background: var(--green-soft); border-color: #cfe3c9; }
.role-dot--projekt { background: var(--indigo-soft); border-color: #d8d6ec; }
.role-dot--aussen { background: #e6eef5; border-color: #cfdde8; }
.role-dot--backup { background: #e0efec; border-color: #c9e2dc; }
.role-dot--admin { background: #efe9e2; border-color: #e0d6c8; }
.role-dot--kidscamp { background: #fbe6ea; border-color: #f2ccd4; }
.role-dot--frei { background: var(--line-soft); border-color: var(--line); }
.role-dot--none { background: var(--card); border-style: dashed; border-color: var(--faint); }

/* Studio-Woche (Fotografen) */
.studio-week { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.studio-day {
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 8px;
  min-height: 70px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.studio-day--today { box-shadow: 0 0 0 2px var(--yellow); border-color: transparent; }
.studio-day-head { font-size: 11px; font-weight: 700; color: var(--faint); }
.studio-shift { display: flex; flex-direction: column; gap: 1px; background: var(--bg); border-radius: 7px; padding: 4px 6px; }
.studio-name { font-size: 10px; font-weight: 700; color: var(--yellow-ink); text-transform: uppercase; letter-spacing: 0.04em; }
.studio-person { font-size: 11.5px; color: var(--ink); }
.studio-person--unknown { color: var(--muted); font-style: italic; }
.studio-empty { font-size: 12px; color: var(--faint); }
@media (max-width: 900px) {
  .studio-week { grid-template-columns: 1fr 1fr; }
}

/* ---------- «Meine Einteilung» (month.php) ----------
   Rollen-Töne als Variablen-Satz: eine Quelle für Kalenderfeld und Chip, statt derselben
   acht Farbpaare an jedem Ort noch einmal. */
.role-tone--hello    { --role-bg: var(--yellow-soft); --role-line: #f0dfa0;    --role-ink: var(--yellow-ink); }
.role-tone--office   { --role-bg: var(--green-soft);  --role-line: #cfe3c9;    --role-ink: var(--green-ink); }
.role-tone--projekt  { --role-bg: var(--indigo-soft); --role-line: #d8d6ec;    --role-ink: var(--indigo-ink); }
.role-tone--aussen   { --role-bg: #e6eef5;            --role-line: #cfdde8;    --role-ink: #35566e; }
.role-tone--backup   { --role-bg: #e0efec;            --role-line: #c9e2dc;    --role-ink: #2f6b60; }
.role-tone--admin    { --role-bg: #efe9e2;            --role-line: #e0d6c8;    --role-ink: #6f5f4e; }
.role-tone--kidscamp { --role-bg: #fbe6ea;            --role-line: #f2ccd4;    --role-ink: #a8455e; }
.role-tone--frei     { --role-bg: var(--line-soft);   --role-line: var(--line); --role-ink: var(--muted); }

.cal-day--role { background: var(--role-bg); border-color: var(--role-line); }
.cal-day--role .cal-val { color: var(--role-ink); font-weight: 600; }
/* Noch nicht geplant ≠ nicht eingeteilt — der gestrichelte Rand ist genau dieser Unterschied. */
.cal-day--unplanned { background: transparent; border-style: dashed; border-color: var(--line); }
.cal-day--unplanned .cal-num { color: var(--faint); font-weight: 400; }

.myplan-next { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.myplan-chip {
  display: flex; flex-direction: column; gap: 1px;
  padding: 7px 12px;
  border-radius: 12px;
  border: 1px solid var(--role-line, var(--line));
  background: var(--role-bg, var(--card));
  min-width: 92px;
}
.myplan-chip b { font-size: 12px; font-weight: 700; color: var(--ink); }
.myplan-chip span { font-size: 11.5px; font-weight: 600; color: var(--role-ink, var(--muted)); }
/* Der Samstag ist der Grund, warum es diese Karte gibt — er darf nicht mitlaufen. */
.myplan-chip--sat { box-shadow: 0 0 0 2px var(--yellow); }
.myplan-none { font-size: 13.5px; color: var(--muted); margin: 10px 0 2px; }
.myplan-horizon { font-size: 12px; color: var(--faint); margin: 8px 0 0; }

/* Rollen-Chips im Team-Tab */
.role-chip--hello { background: var(--yellow-soft); color: var(--yellow-ink); }
.role-chip--office { background: var(--green-soft); color: var(--green-ink); }
.role-chip--projekt { background: var(--indigo-soft); color: var(--indigo-ink); }
.role-chip--aussen { background: #e6eef5; color: #35566e; }
.role-chip--backup { background: #e0efec; color: #2f6b60; }
.role-chip--admin { background: #efe9e2; color: #6f5f4e; }
.role-chip--kidscamp { background: #fbe6ea; color: #a8455e; }
.role-chip--frei { background: var(--line-soft); color: var(--muted); }

/* ===== Fotografen-Ressourcenplanung (planung.php / admin_planung.php) ===== */
.fplan-saved { font-size: 14px; color: var(--green-ink, #2f6627); }
.fplan-late { color: var(--red-ink, #b3261e); }

/* Verfügbarkeits-Kalender (Fotograf:innen) */
.fplan-quick { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.fplan-quick button {
  width: auto;   /* ohne das zieht `button {width:100%}` jeden Schnellwahl-Chip auf volle Breite */
  font-size: 13px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; cursor: pointer; color: var(--ink);
}
.fplan-quick button:hover { border-color: var(--ink); }
.fplan-cal { width: 100%; border-collapse: separate; border-spacing: 5px; table-layout: fixed; }
.fplan-cal th { font-size: 12px; font-weight: 700; color: var(--muted); cursor: pointer; user-select: none; padding-bottom: 2px; }
.fplan-cal th:hover { color: var(--ink); }
.fplan-day {
  width: 100%; min-height: 44px; border-radius: 12px; font-size: 14px; cursor: pointer;
  border: 1.5px solid var(--line); background: #fff; color: var(--ink);
}
.fplan-day:hover { border-color: var(--ink); }
.fplan-day.on { background: var(--yellow, #f5c400); border-color: var(--yellow, #f5c400); font-weight: 700; }
.fplan-count { font-size: 13px; color: var(--muted); }

.fplan-chip {
  font-size: 12px; padding: 3px 10px; border-radius: 999px;
  background: var(--bg, #f4f2ec); color: var(--muted); border: 1px solid var(--line);
}
.fplan-chip.answered { background: var(--green-soft, #e3f0dc); color: var(--green-ink, #2f6627); border-color: transparent; }

/* Admin: Status-Badge + Bedarf */
.fplan-status { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; vertical-align: middle; margin-left: 6px; }
.fplan-status-open { background: var(--yellow-soft, #fbf0c4); color: var(--yellow-ink, #8a6d00); }
.fplan-status-published { background: var(--green-soft, #e3f0dc); color: var(--green-ink, #2f6627); }
.fplan-demand { border-collapse: collapse; font-size: 12px; }
.fplan-demand th, .fplan-demand td { padding: 3px 8px; border-bottom: 1px solid var(--line-soft); }

/* Admin: Planungsraster */
.fplan-grid-wrap { overflow-x: auto; }
.fplan-grid { border-collapse: collapse; font-size: 12px; min-width: 1250px; width: 100%; }
.fplan-grid th, .fplan-grid td { border: 1px solid var(--line-soft); padding: 2px 3px; text-align: left; }
.fplan-grid thead th { font-size: 10.5px; color: var(--muted); background: var(--bg, #f4f2ec); position: sticky; top: 0; white-space: nowrap; }
.fplan-grid tr.week-start td { border-top: 3px solid var(--line); }
.fplan-sticky { position: sticky; left: 0; background: #fff; z-index: 1; }
/* Am Handy klebt die Admin-Kopfzeile (54 px) zuoberst — der Tabellenkopf beginnt darunter,
   sonst scrollt er dahinter und die Spaltentitel sind weg. */
@media (max-width: 900px) { .fplan-grid thead th { top: 54px; } }
.fplan-daylabel { font-size: 12px; white-space: nowrap; font-weight: 600; }
.fplan-daylabel span { color: var(--muted); font-weight: 400; }
.fplan-grid select, .fplan-grid input {
  width: 100%; min-width: 86px; font-size: 12px; border: none; background: transparent;
  padding: 3px 1px; color: var(--ink); font-family: inherit;
}
.fplan-grid select:focus, .fplan-grid input:focus { outline: 2px solid var(--yellow, #f5c400); border-radius: 4px; }
.fplan-grid input.fplan-time { min-width: 70px; font-size: 11px; color: var(--muted); }
.fplan-grid td.fplan-demanded { background: #fffbe8; }
.fplan-grid td.fplan-dim { background: #fafaf7; }
.fplan-grid td.fplan-suggested { box-shadow: inset 0 0 0 2px var(--yellow, #f5c400); }
/* «Eingeteilt, aber diesen Tag nicht angeboten» — seit 17.08.2026 klar rot statt blass
   orange (Raphael: «eine andere, klarere rote Farbe»). Der rote RAHMEN daneben heisst
   etwas anderes (dieselbe Person zweimal am Tag), darum Fläche vs. Rahmen. */
.fplan-grid td.warn { background: #fbdcd8; }
.fplan-grid td.dupe { box-shadow: inset 0 0 0 2px var(--red-ink, #b3261e); }
.fplan-grid td.saving { opacity: 0.5; }
.fplan-grid td.save-error { background: #fbd9d3; }
.fplan-grid td.fplan-col-sharon, .fplan-grid th.fplan-col-sharon { background: var(--green-soft, #e3f0dc); }

/* Zeitfenster-Editor auf planung.php (mobile-first) */
.fplan-hint { font-size: 13px; color: var(--muted); margin: 12px 0 0; }
.fplan-day { position: relative; }
.fplan-day.part::after {
  content: ''; position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%);
  width: 14px; height: 3px; border-radius: 2px; background: var(--ink);
}
.fplan-editor { border: 1.5px solid var(--ink); border-radius: 14px; padding: 12px 14px; margin-top: 12px; background: #fff; }
.fplan-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.fplan-editor-head strong { white-space: nowrap; }
.fplan-editor-remove { border: none; background: none; color: var(--red-ink, #b3261e); font-size: 13px; cursor: pointer; padding: 4px; }
.fplan-editor-note { font-size: 13px; color: var(--muted); margin: 4px 0; }
.fplan-window-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 13px; color: var(--muted); }
.fplan-window-row input[type="time"] {
  flex: 1; min-width: 104px; padding: 8px 6px; border: 1px solid var(--line); border-radius: 10px;
  font-size: 16px; font-family: inherit; color: var(--ink); background: #fff; text-align: center;
}
.fplan-window-x { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 14px; padding: 6px; }
.fplan-editor-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.fplan-editor-actions button {
  padding: 8px 14px; border-radius: 10px; border: 1px solid var(--line); background: #fff;
  font-size: 14px; cursor: pointer; color: var(--ink);
}
.fplan-editor-actions button.btn-primary { border: none; margin-left: auto; background: var(--ink); color: #fff; }
@media (max-width: 480px) {
  .fplan-cal { border-spacing: 3px; }
  .fplan-day { min-height: 46px; font-size: 15px; }
  .fplan-quick button { padding: 8px 14px; }
}

/* Studio-Auswahl, Abendschicht & Bemerkung auf planung.php (Sandro, 02.08.2026) */
.fplan-studios { margin: 12px 0 2px; }
.fplan-studios-label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.fplan-studio-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.fplan-studio {
  width: auto; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff;
  font: inherit; font-size: 14px; font-weight: 400; cursor: pointer; color: var(--ink);
}
.fplan-studio:hover { border-color: var(--ink); }
.fplan-studio.on { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 600; }
.fplan-shift-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 0 10px; font-size: 13px; color: var(--muted); }
.fplan-shift {
  width: auto; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line); background: #fff;
  font: inherit; font-size: 13px; font-weight: 400; cursor: pointer; color: var(--ink);
}
.fplan-shift.on { background: var(--yellow, #f5c400); border-color: var(--yellow, #f5c400); font-weight: 600; }
.fplan-day.eve::before { content: '☾'; position: absolute; top: 1px; right: 4px; font-size: 10px; line-height: 1; }
.fplan-comment-label { display: block; font-size: 13px; color: var(--muted); margin: 14px 0 4px; }
.fplan-comment {
  width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 10px; font: inherit; font-size: 14px; min-height: 52px; resize: vertical; background: #fff; color: var(--ink);
}

/* Bemerkungen der Fotograf:innen auf admin_planung.php */

/* «Plan gesehen»-Bestätigung auf planung.php */
.fplan-confirmed { margin: 12px 0 0; font-size: 14px; font-weight: 600; color: var(--green-ink, #2f6627); }

/* «geschlossen»-Zellen im Fotografen-Planungsraster */
.fplan-grid td.fplan-closedcell { background: #ecebe4; }
.fplan-grid td.fplan-closedcell select { color: var(--muted); font-style: italic; }

/* Office-Einsatzplan: Tipp-zum-Durchschalten (statt Dropdown) */
.plan-cycle { touch-action: manipulation; user-select: none; }
.plan-cycle:disabled { opacity: 0.5; cursor: wait; }

/* ===== Planung Fotografie «Variante A»: Chips + Personenwähler (16.07.2026) ===== */
.fplan-grid td.fplan-cell { padding: 4px 5px; height: 40px; white-space: nowrap; }
.fplan-namechip {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%; cursor: pointer;
  background: #eeedfe; color: #3c3489; border: 1px solid transparent; border-radius: 999px;
  padding: 4px 11px; font: inherit; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.fplan-namechip:hover { border-color: #3c3489; }
.fplan-namechip .t { font-weight: 400; opacity: 0.75; font-size: 11px; }
/* Feste Studio-Zeit (Bellevue 09-18, Central 12-19): steht in der Spalte, nicht in
   der Zelle — darum blasser als eine von Hand gesetzte Zeit. */
.fplan-namechip .t.fix { opacity: 0.5; }
/* Zweite Person derselben Schicht (Einarbeitung, Sarina 10.08.2026) */
.fplan-namechip .fplan-second { display: block; font-weight: 400; font-size: 10.5px; opacity: 0.8; }
/* Ihre eigene Zeit (time2, 17.08.2026) — kleiner als die Zeit der ersten Person,
   sonst überragt die Zweitzeile die Hauptzeile. */
.fplan-namechip .fplan-second .t { font-size: 10px; }
/* Sharon trägt die Farbe IHRER SPALTE und kein Zeichen (Raphael, 18.08.2026: «sharon
   braucht keinen stern, andere farbe genügt, aber dann die gleiche farbe wie ihre
   spalte»). Dieselben Variablen wie .fplan-col-sharon weiter oben — hier standen bis
   dahin ein eigenes Beige (#faeeda/#633806) UND ein ⭐ im ::before: zwei Zeichen für
   dieselbe Aussage, und keins davon passte zu ihrer Spalte. */
.fplan-namechip--sharon { background: var(--green-soft, #e4f0e0); color: var(--green-ink, #3a7031); }
.fplan-namechip--sharon:hover { border-color: var(--green-ink, #3a7031); }
.fplan-empty {
  display: inline-flex; align-items: center; border: 1.5px dashed var(--line); background: transparent;
  color: var(--faint); border-radius: 999px; padding: 3.5px 10px; font: inherit; font-size: 11.5px; cursor: pointer; white-space: nowrap;
}
.fplan-empty:hover { border-color: var(--ink); color: var(--ink); }
/* «+ n verfügbar» erscheint nur noch, wenn es wirklich jemanden gibt (Sarina, 12.08.2026)
   — und dann kräftig genug, um es im Raster zu sehen. Die 0-Fälle liegen als .none da:
   leer und unauffällig, aber anklickbar (der Klick hängt am <td>), damit man auch ohne
   Verfügbare von Hand zuteilen kann. */
.fplan-empty.need { border-color: #d8bf4e; background: #fff6d0; color: #7a5f00; font-weight: 600; }
.fplan-empty.none { border-color: transparent; padding: 3.5px 12px; min-width: 34px; }
.fplan-empty.none:hover { border-color: var(--line); }
.fplan-empty.none:hover::after { content: '+'; color: var(--faint); }
.fplan-rest { font-size: 10px; color: var(--faint); margin-left: 4px; vertical-align: middle; }
.fplan-empty.quiet { border-color: transparent; padding: 3.5px 12px; }
.fplan-closedtext { border: none; background: none; font: inherit; font-size: 11.5px; color: var(--faint); font-style: italic; cursor: pointer; padding: 4px 6px; }
.fplan-grid td.fplan-cell.dupe { box-shadow: inset 0 0 0 2px var(--red-ink, #b3261e); }
/* Der Name selbst wird rot gefüllt: im Raster fällt die Zellenfläche allein zu wenig auf. */
.fplan-grid td.fplan-cell.warn .fplan-namechip { background: var(--red-ink, #b3261e); color: #fff; }
.fplan-grid td.fplan-cell.warn .fplan-namechip:hover { border-color: #7a1a14; }
.fplan-grid td.fplan-cell.warn .fplan-namechip .t { opacity: 0.85; }
.fplan-textcell input { min-width: 90px; }

/* ---- 🚐 Ausseneinsatz in der Planung (18.08.2026) -------------------------------------------
   Die Spalte kommt aus Backstage (On Location) und wird hier nur ANGEZEIGT. Bewusst eine
   eigene Fläche statt einer Studio-Zelle: ein Einsatz besetzt keinen Raum. Lila wie die
   🚐-Zeile in Team → Einteilung, damit beide Seiten dieselbe Sprache sprechen. */
.fplan-grid td.fplan-textcell { vertical-align: top; padding: 3px 4px; }
.fplan-onloc { display: block; background: #f3ecf5; border-radius: 8px; padding: 4px 7px;
  margin: 0 0 3px; font-size: 11px; line-height: 1.4; color: #4a1256; white-space: normal; min-width: 210px; }
.fplan-onloc .f { font-weight: 650; display: block; }
.fplan-onloc .f a { color: #4a1256; text-decoration: none; border-bottom: 1px solid #cfa9da; }
.fplan-onloc .f a:hover { border-bottom-color: #4a1256; }
.fplan-onloc .m { display: block; color: #6a1b7a; }
.fplan-onloc .m .z { font-weight: 650; }        /* das «von–bis» ist die wichtigste Angabe */
.fplan-onloc .leute { display: flex; flex-wrap: wrap; gap: 2px 8px; margin-top: 3px; align-items: center; }
.fplan-onloc .face { font-size: 11px; gap: 4px; }
.fplan-onloc .face-av { width: 20px; height: 20px; font-size: 9px; }
.fplan-onloc .r { opacity: 0.7; margin-left: -5px; }
.fplan-onloc .offen { color: var(--red-ink, #b3261e); font-weight: 600; }
.fplan-grid th .hublink { font-weight: 400; }
.fplan-grid th .hublink a { color: #4a1256; }
/* Sharons Tag: der Einsatz als eigene Zeile unter ihrem Feld — nie IM Feld (wird gespeichert) */
.fplan-sharon-aus { display: block; margin-top: 2px; font-size: 10.5px; line-height: 1.3; color: #4a1256; }
.fplan-sharon-aus .z { font-weight: 650; }
/* Melden, nicht verhindern: die Person ist an dem Tag zusätzlich draussen */
.fplan-namechip.onloc::after { content: ' \1F690'; font-size: 10px; }
.fplan-pop {
  position: absolute; z-index: 60; width: 250px; background: #fff;
  border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 32px rgba(26,25,21,0.18); padding: 8px;
}
.fplan-pop h4 { margin: 2px 6px 6px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.fplan-pop button {
  display: flex; width: 100%; align-items: center; gap: 8px; padding: 7px 9px; border: none;
  background: none; font: inherit; font-size: 13px; border-radius: 8px; cursor: pointer; text-align: left; color: var(--ink);
}
.fplan-pop button:hover { background: var(--yellow-soft, #fbf0c4); }
.fplan-pop button:disabled { opacity: 0.45; cursor: not-allowed; }
.fplan-pop button.busy { opacity: 0.55; }
/* Sharon steht im Wähler zuoberst — erkennbar an derselben Farbe wie ihre Spalte,
   nicht mehr an einem Stern (Raphael, 18.08.2026). ⚠️ Eigene Hover-Regel nötig:
   .fplan-pop button:hover setzt den Grund gelb und nähme ihr sonst die Farbe. */
.fplan-pop button.sharon { background: var(--green-soft, #e4f0e0); color: var(--green-ink, #3a7031); font-weight: 600; }
.fplan-pop button.sharon:hover { background: #d7e8d1; }
.fplan-pop .cnt { margin-left: auto; font-size: 11px; color: var(--faint); white-space: nowrap; }
.fplan-pop .grp { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin: 8px 6px 3px; }
.fplan-pop .sep { border-top: 1px solid var(--line-soft); margin: 6px 4px; }
.fplan-pop .ghost { color: var(--muted); font-size: 12.5px; }
.fplan-pop details summary { font-size: 12px; color: var(--muted); cursor: pointer; padding: 5px 8px; }
/* Zeit-Zeilen im Wähler: eine für die Zelle, bei Einarbeitung eine zweite mit dem Namen
   der eingearbeiteten Person davor (17.08.2026). Der Name darf nicht umbrechen, sonst
   rutscht das Feld weg. */
.fplan-pop-time { display: flex; align-items: center; gap: 8px; margin: 2px 6px 8px; font-size: 12px; color: var(--muted); }
.fplan-pop-time > span { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fplan-pop-time input { flex: 1; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 13px; }

/* Kompakte Text-Aktionen (z.B. Feiertage-Liste) */
.linkbtn { border: none; background: none; font: inherit; font-size: 12px; color: var(--muted); cursor: pointer; padding: 2px 4px; text-decoration: underline; text-underline-offset: 2px; }
.linkbtn:hover { color: var(--ink); }
.linkbtn.danger { color: var(--red-ink, #b3261e); }

/* ---------- «Ansicht von …» — Band der Admin-Vorschau (siehe config.php) ---------- */
.peekbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 300;
  display: flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 14px;
  background: var(--ink); color: #fff; font-size: 13px;
  box-shadow: 0 2px 10px rgba(26, 25, 21, 0.18);
}
.peekbar-eye { font-size: 15px; flex-shrink: 0; }
.peekbar-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.peekbar-text strong { color: var(--yellow); }
.peekbar-hint { color: #b5b1a4; }
.peekbar-jump { margin-left: auto; display: flex; gap: 6px; flex-shrink: 0; }
.peekbar-jump select {
  background: rgba(255, 255, 255, 0.10); color: #fff; border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px; padding: 5px 8px; font: inherit; font-size: 12.5px; max-width: 190px;
}
.peekbar-jump option, .peekbar-jump optgroup { color: var(--ink); }
.peekbar-go { width: auto; padding: 5px 10px; font-size: 12.5px; border-radius: 8px; }
.peekbar-exit {
  flex-shrink: 0; color: #fff; white-space: nowrap; font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.30); border-radius: 8px; padding: 5px 10px;
}
.peekbar-exit:hover { background: rgba(255, 255, 255, 0.12); text-decoration: none; }
/* Platzhalter in der Seite — das Band liegt fix und würde sonst den Seitenkopf verdecken. */
.peekbar-spacer { height: 44px; flex-shrink: 0; }
/* Die Admin-Sidebar klebt selbst oben; in der Vorschau beginnt sie unter dem Band.
   Nur am Desktop — am Handy ist sie ein Schubfach und liegt hinter dem Band. */
@media (min-width: 901px) {
  body:has(.peekbar) .admin-sidebar { top: 44px; height: calc(100vh - 44px); }
}
@media (max-width: 640px) {
  .peekbar-hint { display: none; }
  .peekbar-jump select { max-width: 110px; }
}

/* «Heute im Office» — auf dem Handy gestapelt, ab Desktop-Breite zwei Spalten
   (Raphael, 03.08.2026): untereinander war die Karte hoch und rechts leer. */
.office-grid { display: grid; gap: 14px; margin-top: 10px; }
.office-hello { display: flex; align-items: center; gap: 12px; }
.office-more-label { font-size: 12px; margin: 4px 0 4px; }
.office-faces { display: flex; flex-wrap: wrap; align-items: center; }
@media (min-width: 900px) {
  .dash--foto .office-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: start; }
  .dash--foto .office-grid .office-more { border-left: 1px solid var(--line-soft); padding-left: 26px; }
  .dash--foto .office-grid .office-more-label { margin-top: 0; }
  /* Steht niemand sonst da, soll die Hello-Spalte nicht die halbe Karte leer lassen. */
  .dash--foto .office-grid > :only-child { grid-column: 1 / -1; }
}

/* ============================================================
   Ferienplan «Wer ist wann weg?» (ferienplan.php)
   Seit 07.08.2026 **Wochenraster**: eine Spalte je Kalenderwoche, die sieben Tage
   als Segmente darin. Davor eine Spalte je Tag — 31 Spalten passten auf kein Handy.
   Prefix `fcal-`: `.cal-*` gehört month.php, `.plan-*` der Office-Einteilung,
   `.fplan-*` der Fotografen-Planung.
   ============================================================ */
.fcal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.fcal-nav { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.fcal-navbtn {
  width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1; color: var(--muted); background: var(--card);
}
.fcal-navbtn:hover { text-decoration: none; border-color: var(--ink); color: var(--ink); }
.fcal-navmonth { font-size: 15px; font-weight: 600; min-width: 128px; text-align: center; }
.fcal-today { font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); }

/* Jahresleiste: ein Balken je Monat = Ferientage im ganzen Team, zum Durchklicken. */
.fcal-months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; margin-bottom: 18px; }
.fcal-month {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px;
  padding: 5px 0 4px; border-radius: 10px; border: 1px solid var(--line); background: var(--card);
}
.fcal-month:hover { text-decoration: none; border-color: var(--yellow); }
.fcal-month-bar { display: flex; align-items: flex-end; height: 22px; border-bottom: 1px solid var(--line); width: 60%; justify-content: center; }
.fcal-month-bar > span { display: block; width: 13px; border-radius: 3px 3px 0 0; background: var(--yellow); }
.fcal-month-n { font-size: 10px; font-weight: 600; color: var(--faint); letter-spacing: 0.02em; }
.fcal-month--active { background: var(--ink); border-color: var(--ink); }
.fcal-month--active .fcal-month-n { color: #fff; }

.fcal-blockinfo {
  margin: 0 0 10px; padding: 9px 13px; border-radius: 12px; font-size: 13px; line-height: 1.45;
  background: var(--red-soft); color: var(--red-ink); border: 1px solid #f0d2c9;
}
.fcal-blockinfo--other { background: var(--line-soft); color: var(--muted); border-color: var(--line); }

/* ---- Das Raster: ruhiger Zeitstrahl (Raphael, 07.08.2026: «schöner und cooler») ----
   Leere Wochen sind fast unsichtbar — eine dünne Linie pro Zeile, sonst nichts.
   Nur Abwesenheiten liegen als farbige Balken darauf. Die früheren grauen Füllungen
   (arbeitsfrei/ausserhalb) machten aus jeder Zeile ein Flickwerk; diese Info steckt
   jetzt nur noch im Tooltip, Feiertage sind ein kleiner Punkt auf der Linie. */
table.fcal { border-collapse: separate; border-spacing: 0; width: 100%; table-layout: fixed; }
.fcal th, .fcal td { padding: 0; margin: 0; }

.fcal-name {
  width: 128px; text-align: left; padding: 0 10px 0 0;
  font-size: 13px; font-weight: 550; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fcal-name--head { font-size: 12px; font-weight: 600; color: var(--muted); vertical-align: bottom; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.fcal-name--sub { font-size: 11px; font-weight: 500; color: var(--faint); }
.fcal-person { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fcal-av {
  width: 26px; height: 26px; border-radius: 999px; overflow: hidden; flex-shrink: 0;
  background: var(--line-soft); display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 600; color: var(--muted); box-shadow: 0 0 0 2px var(--card);
}
.fcal-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fcal-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fcal-me { font-size: 10px; font-weight: 600; color: var(--yellow-ink); background: var(--yellow-soft); border-radius: 999px; padding: 1px 6px; }
.fcal-row--me .fcal-av { box-shadow: 0 0 0 2px var(--yellow); }

/* Wochenkopf */
/* Spaltenkopf: nur noch die Kalenderwoche (Raphael, 10.08.2026). Darunter stand das
   Datum des Montags — «KW 36 / 31.8.» las sich wie zwei Angaben zur selben Spalte.
   Das genaue Datum liefern der Tooltip der Spalte und die Tipp-Blase am Tag. */
.fcal th.fcal-w { text-align: center; padding: 5px 2px 8px; border-bottom: 1px solid var(--line); }
.fcal-w-d {
  display: inline-block; font-size: 11.5px; font-weight: 600; color: var(--muted);
  line-height: 1.6; font-variant-numeric: tabular-nums; padding: 0 8px; white-space: nowrap;
}
.fcal-w--now .fcal-w-d { background: var(--yellow); color: var(--ink); border-radius: 999px; }
/* KW als zweite, leisere Zeile unter dem Datum (Sarina, 12.08.2026). Wer nach
   Kalenderwochen plant, findet sie weiterhin; wer nach Datum plant, muss nicht rechnen. */
.fcal-w-kw { display: block; font-size: 9.5px; color: var(--faint); line-height: 1.3; letter-spacing: 0.02em; }

/* Wochenzelle: sieben unsichtbare Tagessegmente über einer dünnen Grundlinie. */
/* Luft zwischen den Wochenspalten (Raphael, 10.08.2026): die Laschen zweier Wochen
   stiessen aneinander und lasen sich als ein Balken — dabei ist jede Spalte eine
   eigene Woche. Zusammen mit den runden Enden je Woche (ferienplan.php) trennt das.
   ⚠️ Der Selektor braucht das `td`: `.fcal th, .fcal td {padding:0}` weiter oben ist
   spezifischer als ein blosses `.fcal-wc` — die Polsterung hier hat darum nie
   gegriffen, seit es die Seite gibt. */
.fcal td.fcal-wc { padding: 0 7px; }
.fcal-wc--now { background: rgba(245, 196, 0, 0.06); }
.fcal-wk { display: flex; height: 22px; margin: 7px 0; position: relative; }
.fcal-wk::before {
  content: ""; position: absolute; left: 1px; right: 1px; top: 50%; height: 2px;
  margin-top: -1px; border-radius: 2px; background: var(--line-soft);
}
.fcal-seg { flex: 1 1 0; min-width: 0; display: block; position: relative; z-index: 1; }

/* Feiertag = Punkt auf der Linie; arbeitsfrei/ausserhalb bleiben unsichtbar (Tooltip). */
.fcal-seg--holiday::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px;
  margin: -3px 0 0 -3px; border-radius: 999px; background: #b9b6d9;
}
.fcal-seg--off, .fcal-seg--out, .fcal-seg--outside, .fcal-seg--blocked { background: transparent; }

/* Abwesenheits-Balken. Die Farbe steht als `--seg`, damit die Brücke zwischen zwei
   Wochenspalten (unten) sie mitnehmen kann, ohne jede Farbe zweimal zu nennen. */
.fcal-seg--vac { --seg: #7ba86f; background: var(--seg); }
.fcal-seg--free { --seg: var(--yellow); background: var(--seg); }
.fcal-seg--unpaid { --seg: #a9a5c4; background: var(--seg); }
.fcal-seg--other { --seg: var(--faint); background: var(--seg); }

/* Brücke über die Lücke zwischen zwei Wochenspalten: der Abstand trennt zwei getrennte
   Abwesenheiten — eine durchgehende darf er nicht zerschneiden (Raphael, 10.08.2026).
   Breite = beide Zell-Polsterungen zusammen. ::before, weil ::after am Segment schon
   den Feiertagspunkt zeichnet. */
.fcal-seg--bridge::before {
  content: ""; position: absolute; left: 100%; top: 0; bottom: 0; width: 14px;
  background: var(--seg); background-image: inherit;
}
.fcal-seg--dim { opacity: 0.4; }
.fcal-seg--start { border-radius: 999px 0 0 999px; }
.fcal-seg--end { border-radius: 0 999px 999px 0; }
.fcal-seg--open {
  background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,0.85) 0 3px, transparent 3px 7px);
  box-shadow: inset 0 0 0 1px rgba(26, 25, 21, 0.16);
}

/* Sperrtage-Band unter dem Wochenkopf — gehört zur Achse, nicht zu einer Person. */
.fcal-blockrow .fcal-wk { height: 8px; margin: 4px 0; }
.fcal-blockrow .fcal-wk::before { display: none; }
.fcal-seg--blockband { background: repeating-linear-gradient(-45deg, #f3cabe 0 4px, #fbe7e2 4px 8px); }
.fcal-blockrow .fcal-seg--blockband:first-child { border-radius: 4px 0 0 4px; }
.fcal-blockrow .fcal-seg--blockband:last-child { border-radius: 0 4px 4px 0; }

/* Fusszeile: Spitzenwert der Woche als Chip. */
.fcal-sumrow .fcal-n { height: 30px; text-align: center; border-top: 1px solid var(--line-soft); }
.fcal-sumrow .fcal-name { border-top: 1px solid var(--line-soft); }
.fcal-nchip {
  display: inline-flex; min-width: 20px; height: 20px; padding: 0 6px; margin-top: 4px;
  align-items: center; justify-content: center; border-radius: 999px;
  background: var(--line-soft); color: var(--muted); font-size: 11px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.fcal-n--crowd .fcal-nchip { background: var(--red-soft); color: var(--red-ink); }

/* Sanfter Einzug der Zeilen — nur Deckkraft, transform auf <tr> ist heikel. */
@media (prefers-reduced-motion: no-preference) {
  .fcal tbody .fcal-row { animation: fcalRow 0.45s ease backwards; }
  .fcal tbody .fcal-row:nth-child(2)  { animation-delay: 0.04s; }
  .fcal tbody .fcal-row:nth-child(3)  { animation-delay: 0.08s; }
  .fcal tbody .fcal-row:nth-child(4)  { animation-delay: 0.12s; }
  .fcal tbody .fcal-row:nth-child(5)  { animation-delay: 0.16s; }
  .fcal tbody .fcal-row:nth-child(6)  { animation-delay: 0.20s; }
  .fcal tbody .fcal-row:nth-child(7)  { animation-delay: 0.24s; }
  .fcal tbody .fcal-row:nth-child(8)  { animation-delay: 0.28s; }
  .fcal tbody .fcal-row:nth-child(9)  { animation-delay: 0.32s; }
  .fcal tbody .fcal-row:nth-child(10) { animation-delay: 0.36s; }
  .fcal tbody .fcal-row:nth-child(n+11) { animation-delay: 0.40s; }
}
@keyframes fcalRow { from { opacity: 0; } }

/* Die beiden Karten der Seite liegen direkt im <body> (kein `.dash`-Raster) — ohne
   diesen Rand stossen «Wer ist wann weg?» und «Abwesend im …» aneinander. */
.fcal-card { position: relative; margin-bottom: 18px; }

/* Tipp-Blase: auf dem Handy gibt es kein Hover, der `title` der Tagessegmente war dort
   nie zu sehen (Raphael, 10.08.2026). Sie wird in ferienplan.php erzeugt. */
.fcal-bub {
  position: absolute; z-index: 6; pointer-events: none;
  max-width: min(240px, 72vw); padding: 7px 10px; border-radius: 10px;
  background: var(--ink); color: #fff; font-size: 11.5px; line-height: 1.4;
  box-shadow: 0 8px 22px rgba(26, 25, 21, 0.22);
}
.fcal-bub strong { display: block; font-size: 12.5px; font-weight: 600; }
.fcal-bub span { display: block; opacity: 0.72; }
.fcal-bub span:empty { display: none; }

.fcal-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 16px; font-size: 11.5px; color: var(--muted); }
.fcal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.fcal-key { width: 16px; height: 10px; border-radius: 999px; background: var(--line-soft); display: inline-block; flex-shrink: 0; }
.fcal-key--vac { background: #7ba86f; }
.fcal-key--free { background: var(--yellow); }
.fcal-key--unpaid { background: #a9a5c4; }
.fcal-key--holiday { width: 7px; height: 7px; background: #b9b6d9; }
.fcal-key--blocked { border-radius: 3px; background: repeating-linear-gradient(-45deg, #f3cabe 0 3px, #fbe7e2 3px 6px); }
.fcal-key--open {
  background: #7ba86f;
  background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,0.85) 0 2px, transparent 2px 5px);
  box-shadow: inset 0 0 0 1px rgba(26, 25, 21, 0.16);
}

@media (max-width: 640px) {
  .fcal-card { padding-left: 14px; padding-right: 14px; }
  .fcal-head { gap: 10px; }
  .fcal-nav { width: 100%; justify-content: space-between; }
  .fcal-navmonth { min-width: 0; flex: 1; }
  .fcal-month-n { font-size: 9px; }
  .fcal-month-bar { width: 100%; }
  .fcal-month-bar > span { width: 9px; }

  .fcal-name { width: 98px; padding-right: 6px; font-size: 11.5px; font-weight: 500; }
  .fcal-person { gap: 6px; }
  .fcal-av { width: 22px; height: 22px; font-size: 8px; }
  .fcal-me { display: none; }
  .fcal th.fcal-w { padding: 4px 0 6px; }
  /* Auf 375 px teilen sich 5–6 Wochenspalten den Platz — «31.8.–6.9.» passt nur klein. */
  .fcal-w-d { font-size: 9.5px; padding: 0 3px; }
  .fcal-w-kw { font-size: 8.5px; }
  .fcal td.fcal-wc { padding: 0 5px; }
  .fcal-seg--bridge::before { width: 10px; }
  .fcal-wk { height: 18px; margin: 6px 0; }
  .fcal-sumrow .fcal-n { height: 26px; }
  .fcal-nchip { min-width: 18px; height: 18px; font-size: 10px; }
  .fcal-legend { gap: 6px 12px; font-size: 11px; }
}

/* Einstieg von der Ferienseite aus. */
.fcal-cta {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-top: 14px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--bg);
}
.fcal-cta:hover { text-decoration: none; border-color: var(--yellow); }
.fcal-cta-icon { font-size: 20px; line-height: 1; flex-shrink: 0; }
.fcal-cta-text { font-size: 13.5px; font-weight: 550; }
.fcal-cta-sub { display: block; font-size: 12px; font-weight: 400; color: var(--muted); margin-top: 1px; }
.fcal-cta-go { margin-left: auto; color: var(--faint); font-size: 18px; }

/* ===== Cockpit Planung Fotografie (Sandro, 06.08.2026: «viel übersichtlicher») =====
   Kopf: Monats-Pillen (gelb = offen, grün = veröffentlicht) + «+ Runde».
   Runde: Zeitstrahl (Einladung → Frist → Versand) + Phase + Füllstands-Balken,
   rechts eine primäre Aktion pro Phase, der Rest hinter «Mehr». */
.fplan-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.fplan-months { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fplan-month {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; font-size: 13px; color: var(--ink); text-decoration: none; white-space: nowrap;
}
.fplan-month:hover { border-color: var(--ink); }
.fplan-month.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); font-weight: 700; }
.fplan-month-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.fplan-month-dot--open { background: var(--yellow, #f5c400); }
.fplan-month-dot--pub { background: var(--green-ink, #2f6627); }
.fplan-month-more { width: auto; border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px; font: inherit; font-size: 13px; color: var(--muted); background: #fff; }
.fplan-month-add {
  width: auto; padding: 6px 12px; border-radius: 999px; border: 1.5px dashed var(--line);
  background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.fplan-month-add:hover { border-color: var(--ink); color: var(--ink); }

.fplan-cockpit { display: flex; gap: 26px; align-items: flex-start; }
.fplan-cockpit-main { flex: 1; min-width: 0; }
.fplan-cockpit-actions { display: flex; flex-direction: column; gap: 8px; width: 232px; flex-shrink: 0; }
.fplan-cockpit-actions form { margin: 0; }
.fplan-cockpit-actions button, .fplan-ghost-link { width: 100%; padding: 10px 14px; font-size: 14px; border-radius: 10px; }
.fplan-ghost { background: #fff; border: 1px solid var(--line); color: var(--ink); font-weight: 600; cursor: pointer; }
.fplan-ghost:hover { border-color: var(--ink); }
.fplan-ghost-link { display: block; box-sizing: border-box; text-align: center; text-decoration: none; font-weight: 600; }
.fplan-more-btn { color: var(--muted); border-style: dashed; }
.fplan-more { display: flex; flex-direction: column; gap: 8px; border-top: 1px dashed var(--line); padding-top: 8px; }
.fplan-more[hidden] { display: none; }   /* display:flex schlägt sonst das hidden-Attribut */
@media (max-width: 820px) {
  .fplan-cockpit { flex-direction: column; }
  .fplan-cockpit-actions { width: 100%; }
}

.fplan-phase { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; vertical-align: middle; margin-left: 8px; white-space: nowrap; }
.fplan-phase--sammeln { background: var(--yellow-soft, #fbf0c4); color: var(--yellow-ink, #8a6d00); }
.fplan-phase--planen { background: #eeedfe; color: #3c3489; }
.fplan-phase--fertig { background: var(--green-soft, #e3f0dc); color: var(--green-ink, #2f6627); }

.fplan-tl { display: flex; margin: 18px 0 2px; max-width: 500px; }
.fplan-tl-step { flex: 1; position: relative; text-align: center; }
.fplan-tl-step::before { content: ''; position: absolute; top: 6px; left: 0; right: 0; height: 2px; background: var(--line-soft, var(--line)); }
.fplan-tl-step:first-child::before { left: 50%; }
.fplan-tl-step:last-child::before { right: 50%; }
.fplan-tl-step.is-done::before { background: var(--green-ink, #2f6627); }
.fplan-tl-dot {
  position: relative; z-index: 1; display: block; width: 14px; height: 14px; margin: 0 auto;
  border-radius: 50%; background: #fff; border: 2px solid var(--line); box-sizing: border-box;
}
.fplan-tl-step.is-done .fplan-tl-dot { background: var(--green-ink, #2f6627); border-color: var(--green-ink, #2f6627); }
.fplan-tl-step.is-done .fplan-tl-dot::after {
  content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 9px; line-height: 1;
}
.fplan-tl-step.is-active .fplan-tl-dot { background: var(--yellow, #f5c400); border-color: var(--yellow, #f5c400); box-shadow: 0 0 0 4px var(--yellow-soft, #fbf0c4); }
.fplan-tl-step.is-late .fplan-tl-dot { background: var(--red-ink, #b3261e); border-color: var(--red-ink, #b3261e); }
.fplan-tl-lbl { display: block; margin-top: 7px; font-size: 12px; font-weight: 700; }
.fplan-tl-step.is-future .fplan-tl-lbl { color: var(--muted); font-weight: 600; }
.fplan-tl-date { display: block; font-size: 11.5px; color: var(--muted); }
.fplan-tl-step.is-active .fplan-tl-date { color: var(--yellow-ink, #8a6d00); font-weight: 700; }
.fplan-tl-step.is-late .fplan-tl-date { color: var(--red-ink, #b3261e); font-weight: 700; }

.fplan-kpis { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 16px; }
.fplan-kpi { flex: 1; min-width: 150px; max-width: 240px; }
.fplan-kpi .lbl {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); white-space: nowrap;
}
.fplan-kpi .lbl b { font-size: 13.5px; color: var(--ink); letter-spacing: 0; }
.fplan-kpi .bar { display: block; height: 6px; margin-top: 5px; border-radius: 4px; background: var(--line-soft, #ece9e2); overflow: hidden; }
.fplan-kpi .bar i { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--yellow, #f5c400); transition: width 0.3s ease; }
.fplan-kpi .bar.full i { background: var(--green-ink, #2f6627); }
.fplan-cockpit-notes { margin-top: 14px; font-size: 12.5px; color: var(--muted); display: grid; gap: 3px; }
.fplan-note-warn { color: var(--yellow-ink, #8a6d00); font-weight: 600; }

/* Jahres-Fahrplan (admin_planung_jahr.php, 06.08.2026): eine Karte pro Runde statt
   der dichten Tabelle. Erreichbar über den 🗓-Knopf auf «Planung Fotografie». */
.fplan-back { font-size: 13px; color: var(--muted); text-decoration: none; }
.fplan-back:hover { color: var(--ink); text-decoration: underline; }
.fplan-month--tool { color: var(--muted); }
.fplan-jgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); gap: 12px; }
.fplan-jcard { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.fplan-jcard.past { opacity: 0.55; }
.fplan-jcard.laufend { border-color: var(--yellow, #f5c400); box-shadow: inset 0 0 0 1px var(--yellow, #f5c400); }
.fplan-jcard-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.fplan-jcard-head strong { font-size: 15px; }
.fplan-jmoved { font-size: 10.5px; font-weight: 700; color: #3c3489; background: #eeedfe; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.fplan-jrow { display: flex; align-items: center; gap: 8px; margin: 5px 0; font-size: 12.5px; }
.fplan-jlbl { width: 74px; color: var(--muted); flex-shrink: 0; }
.fplan-jrow input[type="date"] {
  flex: 1; min-width: 0; font: inherit; font-size: 13px; padding: 4px 6px;
  border: 1px solid var(--line-soft, var(--line)); border-radius: 8px; background: #fff; color: var(--ink);
}
.fplan-jrow input[type="date"]:focus { outline: 2px solid var(--yellow, #f5c400); }
.fplan-jwd { width: 20px; text-align: right; font-size: 11px; color: var(--faint); flex-shrink: 0; }
.fplan-jflags { font-size: 11px; color: var(--yellow-ink, #8a6d00); margin: -2px 0 4px 82px; }
.fplan-jcard-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--line-soft, var(--line));
  font-size: 12px; color: var(--muted);
}
.fplan-jcard-foot a { color: var(--ink); }
.fplan-jsave { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 14px 0 4px; font-size: 13px; color: var(--muted); }

/* ===== Rückmeldungen Planung Fotografie (Sarina, 06.08.2026) =====
   Eine einzige Übersicht statt Chip-Reihe oben und grosser Tabelle unten («momentan
   ist es auch doppelt»). Der Name trägt den ganzen Zustand: grün = alles beisammen,
   gelb = es fehlt etwas, grau = keine Rückmeldung. Ein Klick klappt darunter auf,
   was genau fehlt — deshalb ist die Liste selbst so knapp. */
.fplan-people { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.fplan-person {
  /* width: auto — global `button {width:100%}` würde sonst jeden Namen auf eine eigene Zeile legen */
  display: inline-flex; width: auto; align-items: center; gap: 6px; cursor: pointer; font: inherit; font-size: 13px;
  font-weight: 600; border-radius: 999px; padding: 6px 13px 6px 5px; border: 1.5px solid transparent;
  background: var(--bg); color: var(--muted);
}
/* Das Gesicht steht vor dem Namen (Raphael, 18.08.2026) — dieselbe `.face-av` wie in den
   Einteilungs- und Kalenderzeilen, nur kleiner: bei 16 px bleibt das Chip 35 px hoch wie
   bisher, und die Reihe der 21 Namen bleibt ab 1030 px Breite zweizeilig (mit 20 px erst ab
   1090, mit 24 px ab 1150 — auf einem 1440er Bildschirm stehen hier 1078 px zur Verfügung).
   Darum links nur 5 px Polster: die Kugel ist sonst ein zweiter Rand. */
.fplan-person .face-av { width: 16px; height: 16px; font-size: 7.5px; }
.fplan-person.is-ok      { background: var(--green-soft, #e3f0dc); color: var(--green-ink, #2f6627); }
.fplan-person.is-partial { background: var(--yellow-soft, #fbf0c4); color: var(--yellow-ink, #8a6d00); }
.fplan-person.is-none    { background: var(--bg); color: var(--faint); border-color: var(--line); }
.fplan-person:hover { border-color: currentColor; }
.fplan-person[aria-expanded="true"] { border-color: currentColor; }
.fplan-person-n { font-weight: 400; opacity: 0.75; font-size: 12px; }
.fplan-person-mark { font-size: 11px; }
.fplan-legend { display: inline-flex; align-items: center; gap: 4px; margin-right: 10px; }
.fplan-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.fplan-legend i.is-ok      { background: var(--green-ink, #2f6627); }
.fplan-legend i.is-partial { background: var(--yellow, #f5c400); }
.fplan-legend i.is-none    { background: var(--line); }

.fplan-person-detail {
  border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-top: 4px; background: var(--bg);
}
.fplan-detail-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.fplan-detail-head span { font-size: 12.5px; color: var(--muted); }
.fplan-todo { margin: 8px 0 0; padding-left: 18px; font-size: 13.5px; color: var(--yellow-ink, #8a6d00); }
.fplan-todo li { margin: 2px 0; }
.fplan-alldone { margin: 8px 0 0; font-size: 13.5px; color: var(--green-ink, #2f6627); }
.fplan-detail-place { margin-top: 10px; font-size: 13px; }
.fplan-dates { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 6px; }
.fplan-dates span {
  font-size: 11.5px; color: var(--muted); background: #fff; border: 1px solid var(--line-soft, var(--line));
  border-radius: 7px; padding: 1px 6px; white-space: nowrap;
}
.fplan-dates span.sa { border-color: #e8d896; background: #fffbe8; color: var(--yellow-ink, #8a6d00); font-weight: 600; }
/* Bemerkung je Studio — seit 10.08.2026 editierbar (Sarina konnte sie nicht löschen). */
.fplan-detail-comment { margin-top: 5px; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.fplan-detail-comment input {
  flex: 1; min-width: 0; border: 1px solid var(--line); background: #fff;
  border-radius: 8px; padding: 5px 8px; font: inherit; font-size: 13px; color: var(--ink);
}
.fplan-detail-comment input:focus { border-color: var(--ink); outline: none; }
.fplan-detail-comment input.saved { border-color: var(--green-ink, #2f6627); }
.fplan-detail-note { display: block; margin-top: 12px; font-size: 12px; color: var(--muted); }
.fplan-detail-note input {
  display: block; width: 100%; margin-top: 3px; border: 1px solid var(--line); background: #fff;
  border-radius: 8px; padding: 6px 9px; font: inherit; font-size: 13px; color: var(--ink);
}
.fplan-detail-note input:focus { border-color: var(--ink); outline: none; }
.fplan-detail-note input.saved { border-color: var(--green-ink, #2f6627); }
.fplan-danger { color: var(--red-ink, #b3261e); }

/* Einzel-Einladung + Planungs-Pause im Personen-Detail (Sarina, 11.08.2026).
   Beides sind Aktionen an EINEM Menschen — sie stehen darum unten im aufgeklappten
   Detail und nicht im Cockpit, wo die Aktionen am Monat hängen.
   ⚠️ Alle Knöpfe hier brauchen `width: auto`: die globale Regel `button {width:100%}`
   legte sie sonst als Balken über die ganze Karte. */
.fplan-detail-acts {
  display: grid; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
}
@media (min-width: 720px) { .fplan-detail-acts { grid-template-columns: 1fr 1fr; gap: 14px; } }
.fplan-act { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.fplan-act b { font-size: 12.5px; }
.fplan-act > span { font-size: 12.5px; color: var(--muted); }
.fplan-act .fplan-act-why { color: var(--yellow-ink, #8a6d00); }
.fplan-act form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.fplan-act button { width: auto; padding: 6px 11px; font-size: 12.5px; border-radius: 9px; cursor: pointer; }
.fplan-pause-form { width: 100%; }
.fplan-pause-form label { font-size: 12.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.fplan-pause-form select, .fplan-pause-form input[type="text"] {
  border: 1px solid var(--line); background: #fff; border-radius: 8px;
  padding: 5px 8px; font: inherit; font-size: 12.5px; color: var(--ink);
}
.fplan-pause-form input[type="text"] { flex: 1 1 180px; min-width: 0; }
.fplan-pause-list { display: flex; flex-wrap: wrap; gap: 5px; }
.fplan-pause-chip {
  display: inline-flex !important; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 600;
  background: var(--bg); border: 1px solid var(--line); border-radius: 20px; padding: 2px 4px 2px 9px;
  color: var(--muted);
}
.fplan-pause-chip.is-now { border-color: var(--ink); color: var(--ink); }
.fplan-pause-chip button {
  width: auto !important; padding: 0 4px !important; font-size: 12px; line-height: 1.4;
  background: none; border: none; color: var(--muted); cursor: pointer; border-radius: 50%;
}
.fplan-pause-chip button:hover { color: var(--red-ink, #b3261e); }
/* Pausiert ist ein eigener Zustand, nicht «grün» und nicht «grau»: die Person ist
   diesen Monat weg, also weder fertig noch säumig. */
.fplan-person.is-paused { background: var(--bg); color: var(--faint); border-style: dashed; }
.fplan-legend i.is-paused { background: var(--faint); }

/* Studio-Umschalter + Belegungszahl auf planung.php (Sarina, 06.08.2026):
   jedes Studio hat eigene Tage, und die kleine Zahl im Tag sagt, wie voll er schon
   ist — «gerne tragen sich die Fotografen für Tage ein, wo es noch leer ist». */
.fplan-studio.active { box-shadow: 0 0 0 2px var(--yellow, #f5c400); }
.fplan-studio-n { font-weight: 400; opacity: 0.8; }
.fplan-place-title { font-size: 15px; margin: 14px 0 0; }
/* oben links — unten sitzt der Zeitfenster-Strich (.part), oben rechts der Mond (.eve) */
.fplan-day-n {
  position: absolute; top: 3px; left: 5px;
  font-size: 10px; font-weight: 500; line-height: 1; color: var(--muted); pointer-events: none;
}
.fplan-day-n.busy { color: var(--red-ink, #b3261e); }
.fplan-day.on .fplan-day-n { color: inherit; opacity: 0.65; }

/* Sanfter Samstags-Hinweis auf planung.php (Raphael, 06.08.2026) */
.fplan-sa-hint {
  margin: 10px 0 0; font-size: 13px; color: var(--yellow-ink, #8a6d00);
  background: #fffbe8; border: 1px solid #e8d896; border-radius: 10px; padding: 9px 12px;
}

/* ===== Tool-Zugänge (admin_tools.php, 06.08.2026) =====
   Präfix `tool-`. Oben der Katalog als Karten, darunter die Matrix. Die Matrix ist
   bewusst eine Tabelle — man will Personen untereinander vergleichen können; auf
   schmalen Schirmen scrollt sie waagrecht und die Namensspalte bleibt stehen
   (gleiches Muster wie .fcal-/.fplan-Raster). */
.tool-flash { font-size: 13.5px; border-radius: 10px; padding: 9px 12px; margin: 12px 0 0; }
.tool-flash--ok  { color: var(--green-ink); background: var(--green-soft); }
.tool-flash--err { color: var(--red-ink); background: var(--red-soft); }

/* Katalog: eine Zeile je Tool, Details erst auf Klick (22.08.2026, «kompakter»).
   Punkt · Name · Zweck · Anzahl. Jede Zeile ist ein eigenes <details> und damit ein
   eigenes Raster — deshalb ist die Namensspalte fest breit und die Zahl rechts
   ausgerichtet, sonst fluchtet die Liste nicht. */
.tool-list { margin-top: 12px; border-top: 1px solid var(--line-soft); }
.tool-item { border-bottom: 1px solid var(--line-soft); }
.tool-item > summary {
  display: grid; align-items: baseline; gap: 4px 10px; cursor: pointer;
  grid-template-columns: 8px 172px 1fr auto auto;
  padding: 7px 2px; list-style: none; font-size: 13px;
}
.tool-item > summary::-webkit-details-marker { display: none; }
.tool-item > summary:hover { background: var(--bg); }
.tool-item__dot { width: 8px; height: 8px; border-radius: 50%; align-self: center; }
.tool-item__dot--ok   { background: var(--green-ink); }
.tool-item__dot--warn { background: var(--yellow-ink); }
.tool-item__dot--off  { background: var(--faint); }
.tool-item__name { font-size: 13.5px; color: var(--ink); }
.tool-item__desc {
  color: var(--muted); font-size: 12.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tool-item__flag:empty { display: none; }
.tool-item__n {
  color: var(--ink); font-size: 13px; white-space: nowrap; text-align: right;
  min-width: 48px; font-variant-numeric: tabular-nums;
}
.tool-item__n span { color: var(--faint); }
.tool-item__n.leer { color: var(--faint); }
.tool-item[open] > summary { background: var(--bg); }
.tool-item__more {
  padding: 2px 2px 12px 20px; font-size: 12.5px; color: var(--muted); line-height: 1.5;
}
.tool-item__more p { margin: 0; }
.tool-item__meta { margin-top: 6px !important; color: var(--faint); font-size: 12px; }

.tool-badge {
  font-size: 10.5px; letter-spacing: 0.03em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; white-space: nowrap;
}
.tool-badge--ok   { color: var(--green-ink); background: var(--green-soft); }
.tool-badge--warn { color: var(--yellow-ink); background: var(--yellow-soft); }
.tool-badge--off  { color: var(--muted); background: var(--line-soft); }

/* Titel, Suche und Zähler in einer Zeile — spart drei Blöcke Höhe über der Matrix. */
.tool-matrix-head {
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
}
.tool-matrix-head .tool-search { margin: 0; flex: 1 1 220px; max-width: 300px; }
.tool-matrix-head .tool-count { margin: 0; white-space: nowrap; }

.tool-search { width: 100%; max-width: 420px; margin-top: 12px; font-size: 13px; padding: 6px 10px; }
.tool-count { font-size: 12px; color: var(--faint); margin: 6px 0 0; }

.tool-extern-box { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.tool-extern-box summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.tool-empty { font-size: 13px; color: var(--muted); margin: 14px 0 0; }

.tool-matrix-wrap { overflow-x: auto; margin-top: 10px; }
.tool-matrix { width: 100%; border-collapse: collapse; font-size: 13px; }
.tool-matrix thead th {
  position: sticky; top: 0; z-index: 3; background: var(--card);
  font-size: 11px; font-weight: 400; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--faint); text-align: left; white-space: nowrap;
  padding: 7px 8px; border-bottom: 1px solid var(--line);
}
.tool-matrix td { padding: 5px 8px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.tool-matrix tbody tr.tool-row:hover td { background: var(--bg); }
/* Namensspalte bleibt beim Querscrollen stehen — ohne sie ist eine Zeile nicht zuzuordnen. */
.tool-matrix__name { position: sticky; left: 0; z-index: 2; background: var(--card); min-width: 160px; }
@media (max-width: 900px) { .tool-matrix thead th { top: 54px; } }
.tool-matrix thead .tool-matrix__name { z-index: 4; }
.tool-matrix tbody tr.tool-row:hover .tool-matrix__name { background: var(--bg); }
.tool-matrix__name a { color: var(--ink); text-decoration: none; }
.tool-matrix__name a:hover { text-decoration: underline; }
.tool-nopin { display: block; font-size: 11px; color: var(--yellow-ink); }
.tool-dash { color: var(--faint); font-size: 12px; }

.tool-group td {
  padding: 16px 10px 4px; font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--faint); border-bottom: none;
}
/* Die Zelle ist so breit wie die Tabelle — nur ihr Text klebt links, sonst steht die
   Team-Überschrift beim Querscrollen ausserhalb des Bildes. */
.tool-group td span { position: sticky; left: 10px; display: inline-block; }
.tool-matrix select {
  max-width: 165px; font-size: 12.5px; padding: 4px 7px; margin: 0;
  border-color: transparent; background: transparent;
}
.tool-matrix select:hover, .tool-matrix select:focus { border-color: var(--line); background: var(--card); }
/* Spotlight trägt den längsten Text («Automatisch: gesperrt») und braucht mehr Platz. */
.tool-matrix select.tool-sel-wide { max-width: 195px; }
/* Kein Zugang wird gedämpft — so liest man die Spalte als Muster, nicht Wort für Wort. */
.tool-matrix select.tool-off { color: var(--faint); }

/* Häkchen selbst gezeichnet statt Systemkästchen: sieben schwarze Blöcke je Zeile
   erschlagen die Tabelle — aus ist jetzt ein feiner Rahmen, an ein ruhiges Feld. */
.tool-check, .tool-matrix thead th.tool-th-check { text-align: center; }
.tool-check label { display: inline-flex; cursor: pointer; position: relative; }
.tool-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.tool-check label > span {
  display: block; width: 18px; height: 18px; border-radius: 6px;
  border: 1.5px solid var(--line); background: var(--card); transition: background .12s, border-color .12s;
}
.tool-check label:hover > span { border-color: var(--muted); }
.tool-check input:checked + span { background: var(--ink); border-color: var(--ink); }
.tool-check input:checked + span::after {
  content: ''; display: block; width: 4px; height: 8px; margin: 2px auto 0;
  border: solid var(--card); border-width: 0 1.7px 1.7px 0; transform: rotate(42deg);
}
.tool-check input:focus-visible + span { border-color: var(--ink); box-shadow: 0 0 0 3px var(--line-soft); }

/* Rolle und App-Chips in EINER Zeile — beides zusammen darf darum nicht breiter
   werden als die Spalte vorher war, sonst scrollt die Tabelle waagrecht. */
.tool-bs { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.tool-matrix .tool-bs select { margin: 0; flex: 0 0 auto; max-width: 132px; }

/* 📱 App-Freigaben: das Symbol IST der Schalter. Vorher standen hier fünf blaue
   Systemkästchen neben fünf Emoji — zehn Zeichen je Zeile für fünf Ja/Nein.
   Aus = ausgegraut, an = farbig, von der Rolle vergeben = an und gesperrt. */
.bsapps { display: flex; gap: 1px; flex: 0 0 auto; }
.bsapps.aus, .bsapp.aus { display: none; }
.bsapp { position: relative; cursor: pointer; line-height: 1; }
.bsapp input { position: absolute; opacity: 0; width: 0; height: 0; }
.bsapp > span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 6px; font-size: 11.5px;
  border: 1px solid transparent; filter: grayscale(1); opacity: .35; transition: all .12s;
}
.bsapp:hover > span { opacity: .7; }
.bsapp input:checked + span { filter: none; opacity: 1; background: var(--bg); border-color: var(--line-soft); }
/* Kommt die App aus der Rolle, gibt es nichts zu klicken — kein Zeigefinger, kein Hover. */
.bsapp input:disabled { cursor: default; }
.bsapp:has(input:disabled) { cursor: default; }
.bsapp:has(input:disabled):hover > span { opacity: inherit; }
.bsapp input:checked:disabled + span { background: transparent; border-color: transparent; opacity: .85; }

/* Der Knopf bleibt beim Scrollen der langen Matrix erreichbar, ohne als schwarzer
   Balken die halbe Karte zu füllen — darum linksbündig statt über die volle Breite. */
.tool-save {
  position: sticky; bottom: 0; z-index: 5; margin-top: 4px;
  padding: 12px 0 2px; background: linear-gradient(to top, var(--card) 70%, rgba(255,255,255,0));
}
.tool-save .btn-primary { width: auto; padding: 10px 22px; }

.tool-gone { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 14px; }
.tool-gone summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.tool-gone__list { list-style: none; padding: 0; margin: 10px 0 0; font-size: 13px; }
.tool-gone__list li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 6px 0; border-bottom: 1px solid var(--line-soft); color: var(--muted);
}
.tool-gone__tools { color: var(--faint); font-size: 12px; text-align: right; }

.tool-extern { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 10px; }
.tool-extern__check { display: flex; align-items: center; gap: 6px; font-size: 13px; height: 34px; }
.tool-extern__check input { width: 16px; height: 16px; accent-color: var(--ink); }

@media (max-width: 700px) {
  /* Der Zweck-Text fliegt zuerst raus — Name und Anzahl tragen die Zeile. */
  .tool-item > summary { grid-template-columns: 8px 1fr auto auto; gap: 4px 8px; }
  .tool-item__desc { display: none; }
  .tool-matrix { font-size: 13px; }
  .tool-matrix__name { min-width: 130px; }
  .tool-matrix select { max-width: 140px; }
}

/* ---------- Reisezeit (admin_reisezeit.php) ----------
   Prefix rz-. Achtung: die Seite benutzte bis 06.08.2026 die Klassen .btn-ghost,
   .alert-warn und .alert-error — die es in diesem Stylesheet nie gab. Die Knöpfe
   fielen darum auf die globale Regel button{width:100%} zurück und lagen als graue
   Balken quer über die Seite, die Hinweise standen als nackter Text da. */
.rz-alert { border-radius: 12px; padding: 11px 14px; font-size: 14px; margin-bottom: 14px; }
.rz-alert--warn  { background: var(--yellow-soft); color: var(--yellow-ink); }
.rz-alert--error { background: var(--red-soft); color: var(--red-ink); }
.rz-alert a { color: inherit; }

.rz-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; }
.rz-nav a { color: var(--muted); text-decoration: none; }
.rz-nav a:hover { color: var(--ink); }
.rz-nav strong { font-size: 17px; }
.rz-nav-off { color: var(--faint); }

.rz-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.rz-stat { background: var(--line-soft); border-radius: 11px; padding: 8px 13px; font-size: 13px; color: var(--muted); }
.rz-stat--open { background: var(--yellow-soft); color: var(--yellow-ink); }
.rz-num { font-size: 17px; font-weight: 650; color: var(--ink); margin-right: 3px; font-variant-numeric: tabular-nums; }
.rz-stat--open .rz-num { color: var(--yellow-ink); }

.rz-people { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.rz-person { font-size: 13px; color: var(--muted); background: var(--line-soft); border-radius: 9px; padding: 4px 10px; }
.rz-person strong { color: var(--ink); font-weight: 600; margin-right: 4px; }

.rz-scroll { overflow-x: auto; margin-top: 6px; }
.rz-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rz-table td { padding: 9px 8px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.rz-table tr:last-child td { border-bottom: none; }
.rz-row--open td { background: #fffcf0; }
.rz-row--soon td { color: var(--faint); }
.rz-row--soon .rz-who strong, .rz-row--soon .rz-route strong { color: var(--muted); font-weight: 500; }
.rz-date  { color: var(--muted); white-space: nowrap; width: 92px; font-variant-numeric: tabular-nums; }
.rz-who   { white-space: nowrap; }
.rz-route { color: var(--muted); }
.rz-route strong { color: var(--ink); font-weight: 600; }
.rz-shift { color: var(--faint); font-size: 12px; margin-left: 8px; }
.rz-tag   { color: var(--faint); font-size: 12px; margin-left: 5px; }
.rz-act   { text-align: right; white-space: nowrap; }
.rz-act form { display: inline; }
.rz-state { color: var(--faint); font-size: 13px; margin-right: 8px; }
.rz-state--ok { color: var(--green-ink); }

.rz-btn {
  width: auto; padding: 7px 13px; font-size: 13px; font-weight: 600; border-radius: 9px;
  border: 1px solid var(--line); background: var(--card); color: var(--muted); cursor: pointer;
}
.rz-btn:hover { border-color: var(--faint); color: var(--ink); }
.rz-btn--ok { background: var(--ink); border-color: var(--ink); color: #fff; margin-right: 5px; }
.rz-btn--ok:hover { background: #000; color: #fff; }
.rz-btn--sm { padding: 5px 10px; font-size: 12px; }

.rz-summary { cursor: pointer; font-size: 17px; }
.rz-summary::marker { color: var(--faint); }
.rz-home { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.rz-home-name { flex: 1; min-width: 0; }
.rz-home select { width: auto; flex: 0 1 190px; padding: 6px 10px; border-radius: 9px; }

@media (max-width: 760px) {
  .rz-table { font-size: 13px; }
  .rz-shift { display: none; }
  .rz-nav strong { font-size: 15px; }
  .rz-home { flex-wrap: wrap; }
  .rz-home select { flex: 1 1 auto; }
}

/* ─── Champion-Liste (Team-Tab) ──────────────────────────────────────────────
   Präfix `champ-`. Bewusst ruhig gehalten: Medaille + Punktzahl tragen die
   Aussage, der Rest bleibt Fliesstext. Kein Rot und keine Markierung fürs
   Schlusslicht — die Liste soll ziehen, nicht bloßstellen. */
.champ-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.champ-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px; border-radius: 12px;
}
.champ-row--lead { background: var(--yellow-soft); }
.champ-row--me { box-shadow: inset 0 0 0 1.5px var(--yellow); }
.champ-rank { flex: none; width: 26px; text-align: center; font-size: 16px; font-weight: 700; color: var(--faint); }
.champ-row--lead .champ-rank, .champ-row--me .champ-rank { color: var(--ink); }
.champ-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.champ-name { font-weight: 600; font-size: 14.5px; }
.champ-detail { font-size: 12px; color: var(--muted); }
.champ-points { flex: none; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.champ-points-unit { font-size: 11px; font-weight: 600; color: var(--faint); margin-left: 2px; }

@media (max-width: 420px) {
  .champ-row { gap: 8px; padding: 7px 4px; }
  .champ-rank { width: 22px; font-size: 15px; }
  .champ-detail { font-size: 11.5px; }
}

/* Gesichter in den Namenslisten (team.php, Raphael 07.08.2026): reine Vornamen-Listen
   liessen sich nicht überfliegen — am Foto erkennt man die Person schneller als am Wort. */
.plan-faces { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 10px; }
.plan-row:has(.plan-faces) { align-items: center; }
.face { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.face-av {
  width: 24px; height: 24px; border-radius: 999px; overflow: hidden; flex-shrink: 0;
  background: var(--line-soft); display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 600; color: var(--muted);
}
.face-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.face--plain { color: var(--ink); }
.plan-faces .plan-role { align-self: center; }
@media (max-width: 600px) {
  .plan-faces { gap: 5px 8px; }
  .face { font-size: 13.5px; gap: 5px; }
  .face-av { width: 22px; height: 22px; }
}

/* ============================================================
   Briefing (briefing.php) — die Morgenseite fürs Daily.
   Präfix `brf-`: `.plan-*` gehört der Office-Einteilung, `.fplan-*` der
   Fotografen-Planung, `.fcal-*` dem Ferienplan, `.team-*` dem Team-Tab.
   Wiederverwendet werden nur `.card`, `.plan-faces`/`.face*`, `.role-chip--*`.
   ⚠ Jeder Knopf hier braucht `width:auto` — die globale Regel `button{width:100%}`
   legt sie sonst als Balken über die ganze Karte (dieselbe Falle wie bei den
   Namens-Chips der Planung).
   ============================================================ */
.brf-flash { border-left: 4px solid var(--green-ink); font-size: 14px; padding: 12px 16px; }
.brf-flash--bad { border-left-color: var(--red-ink); }

/* ---------- Kopf: Datum + Daily-Termin ---------- */
.brf-head-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.brf-daily { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.brf-daily-when { display: flex; align-items: baseline; gap: 7px; font-size: 13px; color: var(--muted); }
.brf-daily-when strong { font-size: 22px; color: var(--ink); font-variant-numeric: tabular-nums; }
.brf-daily-in { color: var(--muted); }
/* «läuft jetzt» ist die einzige Stelle, die im Daily wirklich drängt — darum Gelb. */
.brf-daily-now {
  background: var(--yellow); color: var(--ink); font-weight: 650; padding: 2px 8px;
  border-radius: 999px; font-size: 12px;
}
.brf-daily-past { color: var(--faint); }
/* Abgesagt: die Uhrzeit bleibt stehen und wird durchgestrichen — «kein Daily» und
   «fällt aus» sind zwei Aussagen, und die zweite braucht die gewohnte Zeit daneben. */
.brf-daily-when--off strong { text-decoration: line-through; color: var(--faint); }
.brf-daily-off {
  background: var(--line-soft); color: var(--muted); font-weight: 650; padding: 2px 8px;
  border-radius: 999px; font-size: 12px;
}
.brf-daily-note--off { color: var(--ink); }
/* ⚠️ `button {width:100%}` global — ohne width:auto legt sich der Knopf über die Karte. */
.brf-offform { margin: 0; }
.brf-off {
  width: auto; background: var(--card); color: var(--muted); border: 1.5px solid var(--line);
  padding: 9px 14px; border-radius: 12px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.brf-off:hover { border-color: var(--ink); color: var(--ink); }
/* Vorgemerkte Absagen: Datum links, Zurücknehmen rechts. */
.brf-offlist { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.brf-offlist li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: var(--line-soft); border-radius: 12px; padding: 9px 12px; font-size: 13px;
}
.brf-offby { color: var(--faint); }
.brf-daily-nolink { font-size: 12.5px; color: var(--faint); }
.brf-join {
  display: inline-block; background: var(--ink); color: #fff; padding: 10px 18px;
  border-radius: 12px; font-size: 14px; font-weight: 600;
}
.brf-join:hover { background: #000; text-decoration: none; }
.brf-join--empty { background: var(--card); color: var(--muted); border: 1.5px dashed var(--line); }
.brf-daily-note { font-size: 13px; color: var(--muted); margin: 10px 0 0; }

.brf-kpis { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.brf-kpi {
  background: var(--line-soft); border-radius: 999px; padding: 5px 12px;
  font-size: 12.5px; color: var(--muted);
}
.brf-kpi strong { color: var(--ink); font-size: 14px; font-variant-numeric: tabular-nums; }

/* ---------- Studios ---------- */
.brf-studio {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 0; border-top: 1px solid var(--line-soft);
}
.brf-studio:first-of-type { border-top: none; }
.brf-studio-name { font-size: 13px; font-weight: 650; min-width: 96px; }
.brf-studio-people { flex: 1 1 180px; }
/* Zeit gehört zur Person daneben, nicht in eine eigene Spalte — sonst zerfällt die Zeile. */
.brf-time { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.brf-noshift-hint { font-size: 12.5px; color: var(--faint); font-style: italic; }
.brf-studio--noshift .brf-studio-name { color: var(--muted); font-weight: 550; }
.brf-bookings { margin-left: auto; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.brf-bookings-first { color: var(--faint); }
.brf-closed { font-size: 12.5px; color: var(--faint); margin: 12px 0 0; }
.brf-empty { font-size: 13.5px; color: var(--muted); margin: 4px 0 0; }

/* ---------- Team: Einteilung und Anwesenheit nebeneinander ----------
   Zwei Spalten ab Tablet (Raphael, 10.08.2026: «bisschen chaotisch angeordnet»).
   Untereinander waren das sechs Rollen plus vier Status-Zeilen — zehn Zeilen für
   eine Frage, die man auf einen Blick beantwortet haben will. Trennlinien gibt es
   hier bewusst KEINE: die Spaltenüberschrift trägt die Struktur schon. */
.brf-team { display: grid; gap: 18px; }
/* auto-fit statt «1fr 1fr»: hat eine Karte nur EINE Spalte (im Ausblick fehlen oft
   Abwesende und Notizen), nimmt sie die ganze Breite statt die linke Hälfte. */
@media (min-width: 720px) { .brf-team { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; } }
.brf-col { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.brf-col-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--faint); font-weight: 600;
}
/* nowrap am Chip + eigener Umbruch bei den Namen: bei zwei Personen in einer Rolle
   («Projekt: Daniel, Moritz») rutschte die ganze Namensgruppe sonst UNTER den Chip. */
.brf-role { display: flex; align-items: flex-start; gap: 9px; flex-wrap: nowrap; }
.brf-role .plan-faces { flex: 1 1 auto; min-width: 0; }
.brf-role .plan-station { min-width: 62px; text-align: center; flex: none; }
.brf-line { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.brf-line--muted { opacity: 0.55; }
.brf-line-label { font-size: 11.5px; color: var(--faint); min-width: 74px; }
.brf-reason { font-size: 12px; color: var(--muted); margin-right: 6px; }

/* ---------- Auffälliges im Kopf ---------- */
/* Erscheint nur, wenn der Tag vom Normalfall abweicht — sonst gar keine Zeile. */
.brf-alerts { margin: 14px 0 0; padding: 0; list-style: none; }
.brf-alerts li { font-size: 14px; line-height: 1.7; }

/* ---------- Listen (VIP / Ausseneinsätze) ---------- */
.brf-item { display: flex; gap: 14px; padding: 11px 0; border-top: 1px solid var(--line-soft); }
.brf-item:first-of-type { border-top: none; }
.brf-item-date {
  display: flex; flex-direction: column; min-width: 74px; font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.brf-item-time { font-size: 11.5px; font-weight: 400; color: var(--muted); }
/* align-items:flex-start ist Pflicht, nicht Kosmetik: ohne sie streckt die Spalte das
   Etikett auf die ganze Kartenbreite (Standard ist `stretch`) — «VIP» lag als gelber
   Balken über der Zeile. */
.brf-item-body { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font-size: 14px; }
.brf-item-head { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.brf-item-sub { font-size: 12.5px; color: var(--muted); }
.brf-badge {
  display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 999px; margin-right: 6px;
}
.brf-badge--vip { background: var(--yellow-soft); color: var(--yellow-ink); }
.brf-badge--probe { background: var(--indigo-soft); color: var(--indigo-ink); }
.brf-badge--aussen { background: #e6eef5; color: #35566e; }

/* ---------- Pinnwand ---------- */
.brf-pinform { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 16px; }
.brf-pinform input[type=text] { margin-bottom: 0; }
.brf-pinform button { width: auto; padding: 11px 18px; font-size: 14px; white-space: nowrap; }
.brf-pins { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
/* Zettel-Anmutung: leichtes Gelb, kein Schatten-Overkill. */
.brf-pin {
  background: var(--yellow-soft); border: 1px solid #f0e3a8; border-radius: 12px;
  padding: 12px 13px; display: flex; flex-direction: column; gap: 9px;
}
/* Zettel altern sichtbar — eine Pinnwand, an der alles gleich frisch aussieht,
   wird nie abgeräumt (BRIEFING_PIN_STALE_DAYS in lib_briefing.php). */
.brf-pin--old { background: var(--line-soft); border-color: var(--line); }
.brf-pin-text { margin: 0; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.brf-pin-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; flex-wrap: wrap; }
.brf-pin-age { font-size: 11.5px; color: var(--muted); }
.brf-pin-del { margin-left: auto; }
.brf-pin-del button {
  width: auto; padding: 3px 9px; font-size: 11.5px; font-weight: 500; border-radius: 8px;
  background: transparent; color: var(--muted); border: 1px solid var(--line);
}
.brf-pin-del button:hover { color: var(--ink); border-color: var(--faint); }

/* ---------- Daily-Termin einstellen (jede Person, siehe set_briefing_daily) ---------- */
.brf-setupwrap { margin-top: 14px; }
/* Klein und grau: die Zeile war als fette Überschrift das dritte Element zum selben
   Termin (Zeit, Knopf, Aufklapp-Zeile) — «teilweise redundant» (Raphael, 10.08.2026). */
.brf-setup-summary { cursor: pointer; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.brf-setup-summary::-webkit-details-marker { display: none; }
.brf-setup-summary::before { content: "⚙ "; color: var(--faint); }
.brf-setup { display: flex; flex-direction: column; gap: 4px; max-width: 420px; }
.brf-setup label { font-size: 12.5px; color: var(--muted); display: block; }
/* align-self statt width:auto: die Spalte streckt sonst jeden Knopf auf die volle
   Feldbreite (dieselbe stretch-Falle wie beim VIP-Etikett oben). */
.brf-setup button { width: auto; align-self: flex-start; padding: 11px 20px; font-size: 14px; margin-top: 6px; }
.brf-weekdays { border: none; padding: 0; margin: 6px 0 0; }
.brf-weekdays legend { font-size: 12.5px; color: var(--muted); padding: 0; }
/* Die Wochentage stehen in einer Reihe — `.brf-setup label {display:block}` ist
   spezifischer als `.brf-wd` allein und hatte sie untereinander gelegt. */
.brf-setup .brf-wd { display: inline-flex; align-items: center; gap: 5px; margin: 8px 14px 0 0; font-size: 13.5px; color: var(--ink); }
.brf-wd input { width: auto; margin: 0; }

/* ---------- Einstieg von der Stempeluhr ---------- */
.brf-cta {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border: 1.5px solid var(--line); border-radius: 14px; background: var(--card);
}
.brf-cta:hover { border-color: var(--yellow); text-decoration: none; }
.brf-cta-icon { font-size: 20px; line-height: 1; flex-shrink: 0; }
.brf-cta-text { font-size: 13.5px; font-weight: 550; }
.brf-cta-sub { display: block; font-size: 12px; font-weight: 400; color: var(--muted); margin-top: 1px; }
.brf-cta-go { margin-left: auto; color: var(--faint); font-size: 18px; }

@media (max-width: 600px) {
  .brf-head-top { flex-direction: column; gap: 12px; }
  .brf-daily { width: 100%; justify-content: space-between; }
  .brf-studio { align-items: flex-start; }
  .brf-studio-name { min-width: 0; flex: 0 0 100%; }
  .brf-bookings { margin-left: 0; }
  .brf-line-label { min-width: 66px; }
  .brf-pinform { flex-direction: column; }
  .brf-pinform button { width: 100%; }
  .brf-pins { grid-template-columns: 1fr; }
}

/* ===== Kurzanleitung Einsatzplan (planung-hilfe.php), Raphael 10.08.2026 =====
   Eigenes Präfix `phelp-`: `.fplan-*` gehört dem echten Formular, und die Seite
   baut dessen Bausteine nur NACH (Tages-Knopf, Studio-Chip) — würden hier dieselben
   Klassen stehen, änderte jede Formular-Anpassung stillschweigend die Anleitung. */
.phelp-steps { list-style: none; counter-reset: phelp; margin: 18px 0 0; padding: 0; }
.phelp-step {
  counter-increment: phelp; position: relative;
  padding: 0 0 18px 42px; margin: 0;
}
.phelp-step::before {
  content: counter(phelp);
  position: absolute; left: 0; top: 0;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--yellow); color: var(--ink);
  font-size: 14px; font-weight: 700; line-height: 28px; text-align: center;
}
/* Verbindungslinie zwischen den Schritten — nicht hinter dem letzten. */
.phelp-step::after {
  content: ''; position: absolute; left: 13.5px; top: 32px; bottom: 6px;
  width: 1.5px; background: var(--line);
}
.phelp-step:last-child::after { display: none; }
.phelp-step h3 { margin: 3px 0 6px; font-size: 15.5px; }
.phelp-step p { margin: 0 0 6px; font-size: 14px; line-height: 1.5; }
.phelp-note { font-size: 13px; color: var(--muted); }
.phelp-tip { font-size: 13px; color: var(--yellow-ink); background: var(--yellow-soft); border-radius: 10px; padding: 8px 10px; }
.phelp-list { margin: 6px 0 0; padding-left: 18px; font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.phelp-list li { margin-bottom: 4px; }

/* Nachgebaute Bedienelemente — reine Anschauung, keine Knöpfe. */
.phelp-demo { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 10px 0 8px; }
.phelp-day {
  position: relative; min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--line); border-radius: 12px; background: #fff;
  font-size: 14px; color: var(--ink);
}
.phelp-day.on { background: var(--yellow); border-color: var(--yellow); font-weight: 700; }
.phelp-day-n {
  position: absolute; top: 3px; left: 5px;
  font-size: 10px; font-weight: 600; color: var(--faint);
}
.phelp-day-n.busy { color: var(--red-ink); }
.phelp-studio {
  display: inline-block; font-size: 13px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
}
.phelp-studio.active { border-color: var(--ink); font-weight: 600; }

/* Regeln & Ablauf */
.phelp-rules { margin: 10px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.6; }
.phelp-rules li { margin-bottom: 6px; }
.phelp-flow { list-style: none; margin: 12px 0 0; padding: 0; }
.phelp-flow li { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.phelp-flow-i { font-size: 17px; line-height: 1.3; flex-shrink: 0; }
.phelp-flow strong { display: block; font-size: 14px; }
.phelp-flow span:not(.phelp-flow-i) { font-size: 13px; color: var(--muted); line-height: 1.5; }

.phelp-end p { margin: 0 0 12px; font-size: 14px; }
.phelp-cta { width: auto; padding: 10px 18px; border: none; border-radius: 12px; cursor: pointer; }
/* Weg zur Anleitung (planung.php, fotograf.php) */
.phelp-link { font-size: 13px; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.phelp-link:hover { color: var(--ink); }

/* «mit Ken» in der Fotografen-Ansicht des eigenen Einsatzplans (10.08.2026) */
.fplan-with { font-size: 12px; color: var(--muted); font-weight: 400; }

/* Namen ändern im Personalverzeichnis (Sarina, 10.08.2026) */
.emp-name-edit {
  width: auto; border: none; background: transparent; cursor: pointer;
  font-size: 15px; padding: 0 0 0 6px; vertical-align: middle; opacity: 0.45;
}
.emp-name-edit:hover { opacity: 1; }
.emp-name-form { margin: 0 0 14px; padding: 12px 14px; background: var(--bg); border-radius: 12px; }
.emp-name-form[hidden] { display: none; }
.emp-name-form .field-label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.emp-name-form input[type="text"] {
  display: block; width: 100%; margin-top: 3px; border: 1px solid var(--line); background: #fff;
  border-radius: 8px; padding: 7px 9px; font: inherit; font-size: 14px; color: var(--ink);
}

/* ---------- Monatsübersicht der Office-Einteilung (admin_schedule.php, 11.08.2026) ----------
   Sarina: «damit ich sehe, ob es fair aufgeteilt ist.» Die Antwort ist die Reihenfolge
   plus der Balken — eine blosse Zahlenspalte muss man vergleichen, ein Balken nicht.
   ⚠️ CSS-Präfix `pmon-`: `.plan-*` gehört dem Wochenraster derselben Seite,
   `.fplan-*` der Fotografen-Planung, `.cal-*` dem Monatskalender. */
.pmon-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.pmon-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; }
.pmon-tab {
  width: auto; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border: 1px solid var(--role-line, var(--line)); background: #fff; color: var(--role-ink, var(--ink));
  border-radius: 999px; padding: 6px 13px; font-size: 13px; font-weight: 600;
}
.pmon-tab:hover { border-color: var(--role-ink, var(--ink)); }
.pmon-tab.is-on { background: var(--role-bg, var(--bg)); border-color: var(--role-ink, var(--ink)); }
.pmon-tab-n { font-weight: 400; font-size: 11.5px; opacity: 0.7; }
.pmon-hint { font-size: 12.5px; color: var(--muted); margin: 8px 0 0; }
.pmon-sum { font-size: 12.5px; color: var(--muted); margin: 12px 0 8px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.pmon-tag { font-size: 11.5px; font-weight: 600; border-radius: 7px; padding: 2px 8px; }
.pmon-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.pmon-row {
  display: grid; grid-template-columns: 150px 90px 38px 1fr; align-items: center; gap: 10px;
  padding: 7px 4px; border-top: 1px solid var(--line-soft, var(--line));
}
.pmon-row.is-zero { opacity: 0.5; }
.pmon-who { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; min-width: 0; }
.pmon-who .avatar-sm { width: 28px; height: 28px; font-size: 10px; }
.pmon-bar { display: block; height: 7px; border-radius: 999px; background: var(--line-soft, var(--line)); overflow: hidden; }
.pmon-bar i { display: block; height: 100%; background: var(--ink); border-radius: 999px; }
.pmon-n { font-size: 13px; font-weight: 700; text-align: right; }
.pmon-days { display: flex; flex-wrap: wrap; gap: 4px; }
.pmon-days span {
  font-size: 11.5px; color: var(--muted); background: #fff; border: 1px solid var(--line-soft, var(--line));
  border-radius: 7px; padding: 1px 6px; white-space: nowrap;
}
/* Der Samstag ist der Tag, um den es bei «fair» am ehesten geht. */
.pmon-days span.sa { border-color: #e8d896; background: #fffbe8; color: var(--yellow-ink, #8a6d00); font-weight: 600; }
.pmon-days em { font-size: 11.5px; color: var(--faint); }
/* Auf dem Handy trägt das Raster nicht: Name/Zahl in eine Zeile, Tage darunter. */
@media (max-width: 700px) {
  .pmon-row { grid-template-columns: 1fr 60px 34px; grid-template-areas: "who bar n" "days days days"; }
  .pmon-who { grid-area: who; }
  .pmon-bar { grid-area: bar; }
  .pmon-n   { grid-area: n; }
  .pmon-days { grid-area: days; }
}

/* Feriensperre über dem Antragsformular (Sarina, 12.08.2026). CSS-Präfix `vblock-` —
   `.fcal-*` gehört dem Ferienplan, `.calc-*` der Guthaben-Rechnung auf derselben Seite.
   Der Balken links ist die Sperrzeit als Fläche: eine Datumszeile allein liest sich wie
   eine Fussnote, und genau das war das Problem. */
.vblock { margin: 0 0 16px; border: 1px solid #f0d9d6; background: #fdf4f3; border-radius: 12px; padding: 12px 14px; }
.vblock-head { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: #8a2f26; }
.vblock-row { display: flex; align-items: stretch; gap: 10px; padding: 5px 0; }
.vblock-bar { flex: 0 0 5px; border-radius: 999px; background: repeating-linear-gradient(135deg, #d9534f 0 4px, #e88b87 4px 8px); }
.vblock-row--now .vblock-bar { background: #b3261e; }
.vblock-txt { display: flex; flex-direction: column; gap: 1px; font-size: 13.5px; line-height: 1.35; }
.vblock-sub { font-size: 12px; color: var(--muted); }
/* «wird 27» im Geburtstags-Banner (Sarina, 12.08.2026) — leiser als der Name, damit der
   Satz die Hauptsache bleibt. */
.team-birthday-age { font-size: 12.5px; color: var(--muted); white-space: nowrap; }

/* Steckbrief (Raphael, 13.08.2026) — dieselbe Karte im Admin-Profil und auf der eigenen
   Balance-Seite. CSS-Präfix `stb-`; `.dash`/`.card` kommen von aussen.
   auto-fit/minmax statt fester Spaltenzahl: die Umsatz-Kachel gibt es nicht bei allen,
   und eine Lücke im Raster sähe aus wie ein fehlender Wert. */
.stb { margin-bottom: 16px; }
.stb-h { font-size: 16px; margin-bottom: 12px; }
.stb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; }
.stb-tile {
  display: flex; flex-direction: column; gap: 2px; padding: 11px 13px;
  border: 1px solid var(--line-soft); border-radius: 12px; background: rgba(255, 255, 255, 0.6);
}
.stb-label { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.stb-val { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; }
.stb-sub { font-size: 11.5px; color: var(--faint); }
.stb-tile.stb-pos .stb-val { color: var(--green-ink, #2c6e3f); }
.stb-tile.stb-neg .stb-val { color: var(--red-ink, #b3261e); }
.stb-tile.stb-warn { border-color: #e8d896; background: #fffbe8; }
.stb-tile.stb-good { border-color: #cfe6d4; background: #f4fbf6; }
@media (max-width: 520px) { .stb-grid { grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); } .stb-val { font-size: 17px; } }

/* ---------- Signatur-Generator (signatur.php) — Präfix sig- ---------- */
.sig-page { width: 100%; max-width: 1080px; }
.sig-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 14px; align-items: start; }
.sig-col-form, .sig-col-preview { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sig-card { max-width: none; }
.sig-sticky { position: sticky; top: 16px; }
@media (max-width: 900px) {
  .sig-grid { grid-template-columns: 1fr; }
  .sig-sticky { position: static; }
}
.sig-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.sig-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 560px) { .sig-row { grid-template-columns: 1fr; } }
.sig-help { font-size: 12px; color: var(--muted); margin: 2px 0 8px; }
.sig-fehler { margin: 10px 0 0; font-size: 13px; color: var(--red-ink, #b3261e); }
.sig-tag { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--yellow-soft); color: var(--yellow-ink); }

.sig-marken { display: flex; flex-wrap: wrap; gap: 8px; }
.sig-marke { width: auto; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; font-size: 14px; font-weight: 600; border: 1.5px solid var(--line); border-radius: 999px; background: var(--card); color: var(--muted); cursor: pointer; }
.sig-marke[aria-pressed=true] { border-color: var(--ink); color: var(--ink); background: var(--bg); }
.sig-marke-punkt { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }

.sig-seg { display: inline-flex; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 3px; gap: 3px; }
.sig-seg button { width: auto; border: 0; background: transparent; font-size: 13px; font-weight: 600; color: var(--muted); padding: 6px 13px; border-radius: 999px; cursor: pointer; }
.sig-seg button[aria-pressed=true] { background: var(--ink); color: #fff; }

.sig-card input[type=range] { width: 100%; accent-color: var(--ink); margin: 2px 0 10px; }

.sig-fotozeile { display: flex; align-items: center; gap: 12px; background: var(--bg); border: 1px solid var(--line-soft); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.sig-thumb { width: 48px; height: 48px; flex: 0 0 auto; border-radius: 50%; background: var(--line-soft) center/cover no-repeat; border: 1px solid var(--line-soft); }
.sig-fototxt { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.sig-fototxt b { display: block; color: var(--ink); font-weight: 600; font-size: 13px; }
.sig-fotozeile[data-state=warn] { border-color: #e8d896; background: #fffbe8; }
.sig-fotozeile[data-state=error] { border-color: #e6b0ac; background: #fdf1f0; }
.sig-fotozeile[data-state=ok] { border-color: #cfe6d4; background: #f4fbf6; }

.sig-checks { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.sig-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 14px; color: var(--ink); }
.sig-check input { margin-top: 3px; width: 16px; height: 16px; flex: 0 0 auto; cursor: pointer; accent-color: var(--ink); }
.sig-check span small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.45; }

/* Die Vorschau-Fläche ist bewusst WEISS, nicht var(--card): die Signatur landet in
   Mails auf Weiss, und auf dem warmen Karten-Ton sähen die Grautöne anders aus. */
.sig-stage { background: #fff; border: 1px dashed var(--line); border-radius: 12px; padding: 22px; overflow-x: auto; }

.sig-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.sig-actions .sig-btn { width: auto; padding: 10px 18px; font-size: 14px; border-radius: 999px; }
.sig-btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.sig-btn--ghost:hover { border-color: var(--ink); }

.sig-code { background: #191817; color: #ece9e2; border-radius: 12px; padding: 16px; margin: 14px 0 0; overflow: auto; font-size: 11.5px; line-height: 1.6; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; word-break: break-word; max-height: 320px; }

.sig-anleitung { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; }
.sig-anleitung h3 { font-size: 13.5px; font-weight: 650; margin: 0 0 6px; }
.sig-anleitung ol { margin: 0 0 0 18px; padding: 0; font-size: 12.5px; color: var(--muted); }
.sig-anleitung li { margin-bottom: 5px; }

.sig-toast { position: fixed; left: 50%; bottom: 30px; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; z-index: 60; background: var(--ink); color: #fff; padding: 11px 20px; border-radius: 999px; font-size: 13.5px; font-weight: 600; transition: 0.3s; }
.sig-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ══ DAILY-SHOW (briefing.php?show=1) ══════════════════════════════════════════
   Präfix `brfs-` — `brf-` gehört der Seite Situation Room, `plan-` der Office-
   Einteilung. Wiederverwendet werden nur `.face*`, `.plan-faces`, `.role-chip--*`
   und `.brf-studio*` (die Studio-Zeile ist dieselbe, nur grösser gesetzt).
   ⚠️ Jeder Knopf braucht `width: auto` — die globale Regel `button { width: 100% }`
   legt ihn sonst als Balken quer über die Steuerleiste. */

/* ══ BÜHNENLOOK ═══════════════════════════════════════════════════════════════
   Raphael, 20.08.2026: «können wir the morning show mehr in diesem look n feel haben?»
   → https://select-fotostudio.ch/jobs/. Diese Seite hat ein fertig benanntes System
   (Präfix `sj-`); die Bühne übernimmt es 1:1, mit den ORIGINALNAMEN der Farben, damit
   Seite und Show nicht auseinanderdriften: Tinte · Gelb · Sand · Grau · Linie.

   ⚠️ Die Umstellung passiert als TOKEN-LAYER, nicht als Regel-für-Regel-Umschreibung.
   Jede `.brfs-`-Regel greift schon auf `--bg`, `--card`, `--muted` … zu — hier werden
   genau diese Namen für die Bühne umgebogen, und alle bestehenden Regeln erben mit.
   Wer eine Bühnenfarbe ändern will, ändert sie HIER, nicht an dreissig Stellen.
   Die App ausserhalb von `.brfs-body` bleibt unberührt (Creme + Georgia).

   Warum dunkel, obwohl die Jobs-Seite überwiegend hell ist: übernommen ist ihr HERO,
   und die Show ist ein Hero — 16:9 auf einer Leinwand, Licht aus. Ein Sand-Modus wäre
   ein zweiter Token-Block an genau dieser Stelle, sonst nichts. */
.brfs-body {
  /* Die Palette der Jobs-Seite, Originalnamen */
  --gelb: #FFCD00; --gelb-tief: #E8B900;
  --tinte: #101010; --tinte-weich: #1C1C1C; --tinte-rand: #2C2C2C;
  --sand: #F6F4EF; --grau: #6B6B6B;
  --brfs-display: Poppins, 'Helvetica Neue', Arial, sans-serif;

  /* … und die App-Token darauf umgebogen. Ab hier erbt jede brfs-Regel den neuen Look. */
  --bg: var(--tinte-weich);
  --card: var(--tinte);
  --ink: #FFFFFF;
  --muted: rgba(255, 255, 255, .64);
  --faint: rgba(255, 255, 255, .38);
  --line: var(--tinte-rand);
  --line-soft: #262626;
  --yellow: var(--gelb);
  --yellow-ink: var(--gelb);          /* auf Tinte trägt das satte Gelb selbst, nicht das dunkle */
  --yellow-soft: rgba(255, 205, 0, .13);
  --green-ink: #7BD88F;               /* die App-Töne sind für Creme gemischt und */
  --red-ink: #FF8B6B;                 /* verschwinden auf Tinte — hier die hellen Zwillinge */
  --shadow: 0 30px 70px rgba(0, 0, 0, .45);

  padding-top: 18px;
  background: var(--tinte);
  color: #FFFFFF;
  font-family: var(--brfs-display);
}
.brfs-top { width: 100%; max-width: 1180px; display: flex; align-items: center; gap: 14px; }
.brfs-mark { display: inline-flex; }
.brfs-mark .brand-mark { height: 22px; }
.brfs-title { font-family: var(--brfs-display); font-weight: 800; font-size: 17px; letter-spacing: -.02em; }
.brfs-exit { margin-left: auto; font-size: 13.5px; color: var(--muted); }

.brfs-stage {
  width: 100%; max-width: 1180px; aspect-ratio: 16 / 9; margin-top: 12px;
  background: var(--card); border: 1px solid var(--tinte-rand); border-radius: var(--rund, 18px);
  box-shadow: var(--shadow); position: relative; overflow: hidden;
}
.brfs-rail { position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--line-soft); z-index: 3; }
.brfs-rail-fill { height: 100%; width: 0; background: var(--yellow); transition: width .12s linear; }
.brfs-rail-ticks { position: absolute; inset: 0; display: flex; }
.brfs-rail-ticks i { border-right: 1px solid var(--card); height: 100%; display: block; }
.brfs-rail-ticks i:last-child { border-right: 0; }
.brfs-stage[data-hold="1"] .brfs-rail-fill { background: var(--yellow-soft); }

/* ⚠️ DREI ZONEN MIT FLUCHTLINIEN (Raphael, 18.08.2026: «gibt's nicht schöne
   Fluchtlinienabstände?»). Gemessen vorher: die Slides füllten 14–66 % der Bühne, alles
   klebte unter dem Titel und der Rest war weiss. Jetzt: Kopfzeile auf fester Linie ·
   Körper OPTISCH ZENTRIERT im freien Raum · Fusszeile mit Datum und Frage auf fester Linie.
   Der Titel bleibt dabei stehen, wo er steht — er darf zwischen Slides nicht springen,
   sonst wackelt die ganze Show. Nur der Inhalt DARUNTER zentriert sich. */
.brfs-slide { position: absolute; inset: 3px 0 0 0; padding: 34px var(--brfs-gutter) 24px; display: grid; grid-template-rows: auto 1fr auto; gap: 0; }
.brfs-stage { --brfs-gutter: 54px; }
.brfs-bd { display: grid; grid-template-rows: auto 1fr; min-height: 0; }
.brfs-in { display: flex; flex-direction: column; justify-content: center; gap: 16px; min-height: 0; overflow: hidden; }
.brfs-in > * { margin-top: 0; margin-bottom: 0; }

/* Kopf- und Fusslinie sind die beiden Fluchtlinien, an denen jede Slide hängt. */
.brfs-eyebrow { padding-bottom: 13px; border-bottom: 1px solid var(--line-soft); margin-bottom: 22px; }
.brfs-footline {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  padding-top: 12px; margin-top: 18px; border-top: 1px solid var(--line-soft);
  font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); font-weight: 600;
}
.brfs-askslot { text-align: right; }
@media (prefers-reduced-motion: no-preference) {
  .brfs-slide { animation: brfsRise .34s cubic-bezier(.2,.7,.3,1) both; }
}
@keyframes brfsRise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

/* `.sj-etikett`: der 26×3-Balken in Gelb vor der Zeile. Das ist das Zeichen, an dem
   man die Seite erkennt — auf der Bühne markiert er jede Slide-Kopfzeile. */
.brfs-eyebrow > span:first-child { display: inline-flex; align-items: center; gap: .62em; }
.brfs-eyebrow > span:first-child::before {
  content: ""; width: 26px; height: 3px; background: var(--gelb); border-radius: 2px; flex-shrink: 0;
}
.brfs-eyebrow {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-size: 12.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); font-weight: 600;
}
.brfs-count { color: var(--faint); font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.brfs-bd h2 {
  /* = `.sj-titel` der Jobs-Seite: 800, eng gesetzt, normal geschrieben. Kleingeschrieben
     ist dort NUR der Hero — auf der Bühne ist das der Impuls-Claim, siehe `.brfs-claim`. */
  font-family: var(--brfs-display); font-weight: 800; font-size: clamp(24px, 3.1vw, 37px);
  line-height: 1.04; letter-spacing: -.025em; margin: 0 0 20px; text-wrap: balance; max-width: 22ch;
}
/* Ein Titel, der über die halbe Bühne läuft (Schätzfragen), darf breiter werden. */
.brfs-bd h2.brfs-h2--long, .brfs-in:empty ~ * { max-width: none; }
.brfs-lead { font-size: clamp(16px, 1.8vw, 20px); color: var(--muted); max-width: 62ch; margin: 0; }
.brfs-small { font-size: 15px; margin-top: 14px; }

/* Gesichter grösser als in den Listen der App — das hier wird aus drei Metern gelesen. */
.brfs-slide .face { font-size: 16px; gap: 8px; }
.brfs-slide .face-av { width: 38px; height: 38px; font-size: 13px; }
.brfs-slide .plan-faces { gap: 8px 14px; }

/* ⚠️ `subgrid`: Etikett, Zahl und Unterzeile teilen sich über ALLE Kacheln dieselben drei
   Zeilen — sonst rutschen die grossen Zahlen gegeneinander, sobald ein Etikett umbricht
   («Laufen in 30 Tagen ab»). Genau das ist die Fluchtlinie, die vorher fehlte. */
.brfs-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); grid-template-rows: auto auto auto; gap: 13px; }
.brfs-fig { background: var(--bg); border-radius: 12px; padding: 15px 18px 13px; display: flex; flex-direction: column; gap: 3px; }
.brfs-figs > .brfs-fig { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 3px; align-content: start; }
.brfs-fig-k { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.brfs-fig-v { font-family: var(--brfs-display); font-weight: 800; font-size: clamp(26px, 3.5vw, 40px); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.brfs-fig-t { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.brfs-trend { white-space: nowrap; }
.brfs-up { color: var(--green-ink); font-weight: 700; }
.brfs-down { color: var(--red-ink); font-weight: 700; }
.brfs-flat { color: var(--faint); font-weight: 700; }

/* Rangreihe: die Länge trägt die Menge, jede Zeile ist beschriftet — auf einer
   Leinwand gibt es kein Hover, also steht jeder Wert da. Die Balken wachsen
   versetzt nach vorn.
   ⚠️ .brfs-bar-fl MUSS display:block sein: .brfs-bar-tr ist Grid-Item und wird
   blockifiziert, das Kind darin nicht — an einem Inline-Element greift width nicht. */
.brfs-bars { display: flex; flex-direction: column; gap: 7px; }
/* Zwischentitel in einer Fokus-Slide (Zahlen oben, Balken darunter) — Wochentag-Fokus seit 18.08.2026. */
.brfs-h3 { margin: 0 0 8px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
/* ⚠️ Die Namensspalte ist ANTEILIG, nicht fix: 160 px liessen in einer halbbreiten
   Spalte («Woher» neben der Sparkline) nur 50 px Balkenspur übrig — die Länge trägt hier
   aber die Aussage. Gemessen und korrigiert am 18.08.2026. */
.brfs-bar { display: grid; grid-template-columns: minmax(72px, 30%) 1fr 46px; align-items: center; gap: 12px; }
.brfs-bar-nm { font-size: 15.5px; color: var(--muted); }
.brfs-bar-tr { background: var(--line-soft); border-radius: 0 4px 4px 0; height: 22px; overflow: hidden; }
.brfs-bar-fl { display: block; background: var(--yellow); height: 100%; border-radius: 0 4px 4px 0; width: 3px; }
.brfs-bar-vl { font-size: 16px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
  .brfs-bar-fl { transition: width 1.1s cubic-bezier(.18,.82,.28,1); transition-delay: calc(var(--i, 0) * 70ms); }
}

.brfs-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.brfs-list li { display: flex; gap: 14px; align-items: center; font-size: 18px; }
.brfs-d { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); min-width: 96px; flex-shrink: 0; }
.brfs-d--warn { color: var(--yellow-ink); }
.brfs-m { color: var(--muted); }
/* Sitzt seit 18.08.2026 in der Fusszeile (`.brfs-askslot`) — eine Frage, immer auf derselben
   Linie. Darum KEIN eigener Rand mehr: den Abstand macht die Fusslinie. */
.brfs-ask { margin: 0; font-family: var(--brfs-display); font-size: clamp(15px, 1.5vw, 19px); color: var(--gelb);
  letter-spacing: -.01em; text-transform: none; font-weight: 700; }

.brfs-note {
  background: var(--bg); border-left: 3px solid var(--yellow); border-radius: 0 12px 12px 0;
  padding: 17px 21px; font-family: var(--brfs-display); font-weight: 600;
  font-size: clamp(17px, 2vw, 24px); line-height: 1.4; letter-spacing: -.015em;
}
.brfs-note--stale { border-left-color: var(--line); color: var(--muted); }
.brfs-note-by { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-family: var(--sans, inherit); font-size: 14px; color: var(--muted); }

.brfs-stress { display: flex; align-items: center; gap: 7px; margin-bottom: 16px; }
.brfs-stress i { width: 34px; height: 10px; border-radius: 2px; background: var(--line-soft); display: block; }
.brfs-stress i.on { background: var(--yellow); }
.brfs-stress-lbl { font-size: 17px; color: var(--muted); margin-left: 8px; }

.brfs-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.brfs-cols h3 { margin: 0 0 10px; font-size: 12.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
/* ⚠️ `flex-start`, nicht `center`: brechen die Gesichter auf zwei Zeilen um, rutschte die
   Zahl mittig zwischen beide — sie gehört auf die Höhe der ERSTEN Reihe. */
.brfs-tally { display: flex; align-items: flex-start; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); }
.brfs-tally:last-child { border-bottom: 0; }
.brfs-tally b { font-family: var(--brfs-display); font-weight: 800; font-size: 25px; min-width: 32px; line-height: 38px; font-variant-numeric: tabular-nums; }
.brfs-tally-w { color: var(--muted); min-width: 92px; font-size: 16px; line-height: 38px; }
.brfs-slot { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.brfs-slot b { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

.brfs-studios .brf-studio { font-size: 17px; padding: 8px 0; }
.brfs-closed { margin-top: 10px; color: var(--faint); font-size: 15.5px; }

.brfs-kudos { display: flex; flex-direction: column; gap: 10px; }
.brfs-kudo { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; background: var(--yellow-soft); border-radius: 12px; padding: 13px 17px; }
.brfs-kudo--neu { outline: 2px solid var(--yellow); }
.brfs-kudo-pair { display: flex; align-items: center; gap: 8px; }
.brfs-kudo-arrow { color: var(--yellow-ink); font-size: 18px; }
.brfs-kudo-txt { font-family: var(--brfs-display); font-weight: 600; font-size: clamp(15px, 1.7vw, 20px); line-height: 1.35; }

/* ── Impuls-Slides (20.08.2026) ───────────────────────────────────────────────
   Bewusst die einzigen Slides OHNE Kachel, Balken und Diagramm — ausser der ersten,
   die genau umgekehrt so aussehen MUSS wie eine gewöhnliche Zahlen-Slide (Tarnung,
   siehe briefing.php). Hier wird nicht gerechnet, hier wird geschaut. */

/* Die Leerstellen: links die Zahl, die die Maschine hat, rechts das, was sie nicht
   weiss. ⚠️ Die Gewichtung ist die Aussage — Zahl klein und gedämpft, Satz gross und
   weiss. Wer beide Spalten gleich setzt, hat eine Tabelle statt eines Arguments. */
.brfs-blind { display: flex; flex-direction: column; gap: 13px; }
.brfs-blind-row {
  display: grid; grid-template-columns: minmax(120px, 21%) 1fr; gap: 20px; align-items: baseline;
  padding-left: 16px; border-left: 3px solid var(--tinte-rand);
  opacity: 0; animation: brfs-auf .5s cubic-bezier(.2,.7,.3,1) forwards;
  animation-delay: calc(var(--i, 0) * .5s);
}
.brfs-blind-row--last { border-left-color: var(--gelb); }
.brfs-blind-z {
  font-size: clamp(13px, 1.4vw, 17px); font-weight: 700; letter-spacing: -.01em;
  color: var(--faint); font-variant-numeric: tabular-nums;
}
.brfs-blind-t {
  font-weight: 800; font-size: clamp(17px, 2.1vw, 27px); line-height: 1.15;
  letter-spacing: -.025em; text-wrap: balance;
}
.brfs-blind-row--last .brfs-blind-t { color: var(--gelb); }

/* `.sj-display`: 900, line-height unter 1, stark negative Laufweite. ⚠️ KEIN
   `text-transform: lowercase` — das würde «KI» zu «ki» machen und den Satz zerstören.
   Die Kleinschreibung steht darum im TEXT (BRIEFING_IMPULS), wo sie gewollt ist. */
.brfs-claim {
  font-family: var(--brfs-display); font-weight: 900;
  font-size: clamp(30px, 4.8vw, 64px); line-height: .94; letter-spacing: -.035em;
  margin: 0; max-width: 17ch; text-wrap: balance;
}
.brfs-claim em { font-style: normal; color: var(--gelb); }
/* Der längere Satz — kleiner als der Claim, grösser als ein Lead. */
.brfs-claim--mid { font-weight: 800; font-size: clamp(22px, 2.9vw, 36px); line-height: 1.06; letter-spacing: -.028em; max-width: 26ch; }

/* Die Momente laufen als Reihe ein, einer nach dem anderen — die Aufzählung SOLL
   sich beim Vorlesen aufbauen, sonst steht sie fertig da, bevor der Satz gesagt ist. */
.brfs-moments { display: flex; flex-wrap: wrap; gap: 11px 12px; margin: 0; padding: 0; list-style: none; }
.brfs-moment {
  font-family: var(--brfs-display); font-weight: 700; letter-spacing: -.015em;
  font-size: clamp(17px, 2.1vw, 27px); line-height: 1.15;
  background: rgba(255, 255, 255, .07); border: 1px solid var(--tinte-rand);
  border-radius: 100px; padding: 11px 24px;
  opacity: 0; animation: brfs-auf .5s cubic-bezier(.2,.7,.3,1) forwards;
  animation-delay: calc(var(--i, 0) * .55s);
}
/* `.sj-fahne`: die eine gelbe Pille, auf die alles hinausläuft. */
.brfs-moment--key { background: var(--gelb); border-color: var(--gelb); color: var(--tinte); font-weight: 800; }

/* = `.sj-auf` der Jobs-Seite: von unten einblenden, nichts weiter. */
@keyframes brfs-auf { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .brfs-moment, .brfs-blind-row { opacity: 1; animation: none; }
}

.brfs-pinned { display: flex; flex-direction: column; gap: 9px; }
.brfs-pinned-row { font-size: 18px; }
.brfs-pinned-row::before { content: "— "; color: var(--faint); }

.brfs-controls { width: 100%; max-width: 1180px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
/* ── Rollen-Chips auf der Bühne ───────────────────────────────────────────────
   ⚠️ Die acht `role-tone`/`role-chip`-Töne der App sind auf CREME gemischt: blasses
   Grün auf blassem Grund. Auf Tinte verschwinden sie — «Office» war am 20.08.2026 aus
   drei Metern nicht mehr zu lesen. Hier dieselben acht Rollen als Fahnen im Bühnenton:
   Form von `.sj-fahne`, Farbe kräftig genug für die Leinwand.
   Hello trägt als einzige das volle Gelb — sie ist die Rolle am Kunden. */
.brfs-slide .plan-station, .brfs-slide .plan-role {
  border-radius: 100px; padding: 3px 11px; font-size: 11px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  background: rgba(255, 255, 255, .09); color: rgba(255, 255, 255, .78); border: 0;
}
.brfs-slide .role-chip--hello    { background: var(--gelb);                 color: var(--tinte); }
.brfs-slide .role-chip--office   { background: rgba(123, 216, 143, .16);    color: #7BD88F; }
.brfs-slide .role-chip--projekt  { background: rgba(150, 145, 235, .20);    color: #ADA8F7; }
.brfs-slide .role-chip--aussen   { background: rgba(120, 180, 225, .18);    color: #8FC4EC; }
.brfs-slide .role-chip--backup   { background: rgba(110, 200, 185, .18);    color: #79D3C2; }
.brfs-slide .role-chip--admin    { background: rgba(255, 255, 255, .10);    color: rgba(255, 255, 255, .75); }
.brfs-slide .role-chip--kidscamp { background: rgba(240, 140, 170, .20);    color: #F49BB4; }
.brfs-slide .role-chip--frei     { background: rgba(255, 255, 255, .06);    color: var(--faint); }

/* ── Bedienleiste = `.sj-knopf` ────────────────────────────────────────────────
   Sieht nur der Gastgeber, trotzdem dieselbe Sprache: Pille, Poppins 700, und der
   Hauptknopf in Gelb auf Tinte mit dem 6px-Sockel, den die Seite ihren Knöpfen gibt. */
.brfs-controls button, .brfs-inputs button {
  width: auto; align-self: flex-start; font-family: var(--brfs-display);
  font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .78);
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--tinte-rand); border-radius: 100px; padding: 8px 17px;
}
.brfs-controls button:first-child {
  background: var(--gelb); color: var(--tinte); border-color: var(--gelb);
  box-shadow: 0 4px 0 var(--gelb-tief);
}
.brfs-controls button:first-child:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--gelb-tief); }
.brfs-controls button:hover, .brfs-inputs button:hover { color: #fff; border-color: rgba(255, 255, 255, .35); }
.brfs-controls button:first-child:hover { color: var(--tinte); border-color: var(--gelb); }
.brfs-clock { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.brfs-clock b { color: var(--ink); }

.brfs-inputs { width: 100%; max-width: 1180px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.brfs-field { flex: 1 1 320px; display: flex; gap: 8px; align-items: center; min-width: 280px; margin: 0; }
.brfs-field input[type="text"] { flex: 1; font-size: 13.5px; padding: 8px 15px; border-radius: 999px; margin: 0; }
.brfs-field select { max-width: 140px; font-size: 13.5px; padding: 8px 12px; border-radius: 999px; margin: 0; }
.brfs-msg { font-size: 13.5px; color: var(--green-ink); }
.brfs-msg--bad { color: var(--red-ink); }

.brfs-foot { width: 100%; max-width: 1180px; color: var(--muted); font-size: 13px; margin-top: 14px; }
.brfs-foot kbd { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; }

.brf-showcta { border-color: var(--yellow); }
.brf-showcta .brf-cta-icon { color: var(--yellow-ink); }

/* ── Bühnen-Elemente der Fokus-Slides (18.08.2026, «präsi aufpeppen») ────────────────
   Hero-Zahl · Sparkline · Ring. Alle drei animieren über animate() in briefing.php:
   die Säulen über height, der Ring über die registrierte Eigenschaft --p (ohne
   @property gäbe es keinen Übergang, nur einen Sprung — dann steht er halt sofort). */
.brfs-hero { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 0; }
.brfs-hero-u { font-size: 13px; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.brfs-hero-v { font-family: var(--brfs-display); font-weight: 900; font-size: clamp(60px, 8.4vw, 108px); line-height: .92; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.brfs-hero-c { font-size: clamp(16px, 1.8vw, 20px); color: var(--muted); max-width: 60ch; margin-top: 6px; }
.brfs-hero-c strong { color: var(--ink); }

.brfs-spark { display: flex; align-items: flex-end; gap: 8px; height: clamp(96px, 15vh, 150px); padding-top: 20px; }
.brfs-spark-c { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; }
.brfs-spark-c b { position: absolute; left: -10px; right: -10px; text-align: center; margin-bottom: 4px; font-size: 14px; font-variant-numeric: tabular-nums; }
/* Spur + absolute Säule: als Flex-Kind löste `height: 100%` nicht auf (3 px statt 170). */
.brfs-spark-t { flex: 1; width: 100%; max-width: 36px; position: relative; display: block; }
.brfs-spark-b { position: absolute; left: 0; right: 0; bottom: 0; min-height: 3px; background: var(--line); border-radius: 4px 4px 0 0; }
.brfs-spark-c:last-child .brfs-spark-b { background: var(--yellow); }
.brfs-spark-c > span:last-child { font-size: 11px; color: var(--faint); letter-spacing: .04em; white-space: nowrap; }
/* Wachsen über transform, nicht height: eine height-Transition 0 → % blieb in Chrome bei 3 px stehen. */
@media (prefers-reduced-motion: no-preference) {
  .brfs-spark-b { transform: scaleY(0); transform-origin: 50% 100%; transition: transform .9s cubic-bezier(.18,.82,.28,1); transition-delay: calc(var(--i, 0) * 45ms); }
  .brfs-spark-b.is-on { transform: scaleY(1); }
}
.brfs-cols--wide { grid-template-columns: 1.5fr 1fr; gap: 34px; margin-top: 0; }

@property --p { syntax: '<number>'; inherits: false; initial-value: 0; }
.brfs-rings { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 13px; align-items: stretch; }
.brfs-ring-w { display: flex; align-items: center; gap: 16px; background: var(--bg); border-radius: 12px; padding: 14px 18px; }
.brfs-rings > .brfs-fig { justify-content: center; }
.brfs-ring { --p: 0; width: 98px; height: 98px; border-radius: 50%; flex-shrink: 0; position: relative; display: grid; place-items: center;
  background: conic-gradient(var(--yellow) calc(var(--p) * 1%), var(--line-soft) 0); }
.brfs-ring::before { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: var(--bg); }
.brfs-ring > span { position: relative; display: flex; align-items: baseline; gap: 1px; }
.brfs-ring b { font-family: var(--brfs-display); font-size: 29px; font-weight: 800; font-variant-numeric: tabular-nums; }
.brfs-ring small { font-size: 13px; color: var(--muted); }
.brfs-ring-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
@media (prefers-reduced-motion: no-preference) {
  .brfs-ring { transition: --p 1.1s cubic-bezier(.18,.82,.28,1); }
}

@media (max-width: 760px) {
  .brfs-stage { aspect-ratio: 3 / 4; --brfs-gutter: 20px; }
  .brfs-hero-v { font-size: 56px; }
  .brfs-spark { height: 120px; }
  .brfs-cols--wide { gap: 16px; }
  .brfs-slide { padding: 22px var(--brfs-gutter) 16px; }
  .brfs-cols { grid-template-columns: 1fr; gap: 16px; }
  .brfs-bar { grid-template-columns: 108px 1fr 42px; }
  .brfs-d { min-width: 74px; }
}


/* ── 🚐 Ausseneinsatz (Weg B, 18.08.2026) — Karte auf Stempeluhr/«Mein Monat», Zeile in Team → Einteilung ── */
.onloc-card { border-left: 4px solid #8E24AA; }
.onloc-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.onloc-title { font-size: 16px; font-weight: 650; margin: 0; }
.onloc-title small { font-size: 13px; font-weight: 500; color: var(--muted); }
.onloc-when { font-size: 12px; font-weight: 600; color: #6a1b7a; background: #f3ecf5; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.onloc-sub { font-size: 13px; color: var(--muted); margin: 0 0 10px; line-height: 1.55; }
.onloc-sub b { color: var(--ink); }
.onloc-fehlt { color: var(--red-ink, #b91c1c); font-weight: 600; }
.onloc-facts { display: flex; gap: 6px 14px; flex-wrap: wrap; font-size: 13px; margin: 0 0 12px; }
.onloc-facts > span { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.onloc-mit { display: inline-flex; align-items: center; gap: 5px; }
.onloc-mit small { color: var(--muted); }
.onloc-fc { width: 22px; height: 22px; border-radius: 50%; overflow: hidden; background: var(--line-soft); display: inline-block; vertical-align: middle; }
.onloc-fc img { width: 100%; height: 100%; object-fit: cover; display: block; }
.onloc-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.onloc-btn { display: inline-block; background: var(--ink); color: #fff; border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 600; text-decoration: none; }
.onloc-btn:hover { text-decoration: none; opacity: .9; }
.onloc-btn.ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.onloc-more { font-size: 12.5px; color: var(--muted); margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-soft); line-height: 1.6; }
.onloc-more b { color: var(--ink); }
.onloc-note { font-size: 11.5px; color: var(--faint, #a8a49a); margin: 8px 0 0; }

/* Kompakte Ausseneinsatz-Karte auf der Stempeluhr (19.08.2026): drei Zeilen statt einer
   halben Seite. Office/GL sehen den Einsatz nur als Randnotiz — die Details stehen in
   Backstage unter «On Location», und der erste Link geht genau dorthin. Die ausführliche
   Fassung auf fotograf.php bleibt unangetastet. */
.onloc-mini { padding-top: 14px; padding-bottom: 14px; border-left-width: 3px; }
.onloc-mini .onloc-mini-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 8px; font-size: 13.5px; font-weight: 600; }
.onloc-mini .onloc-when { font-size: 11px; font-weight: 650; padding: 2px 8px; }
/* ⚠️ Die Liste trug bis 20.08.2026 GAR KEINE Regel (die Klasse hiess einmal
   `.onloc-mini-was`, das Markup wurde am 19.08. auf `.onloc-mini-list` umgestellt, das
   CSS nicht). Also griff die Browser-Grundschrift: dicke Aufzählungspunkte, 40 px
   Einzug — und ~16 px Text, GRÖSSER als die 13.5 px der eigenen Überschrift. Wer hier
   eine Klasse umbenennt, sucht sie zuerst in dieser Datei.
   Getrennt wird jetzt durch Gewicht, Ton und Haarlinie statt durch «·»: Datum kräftig,
   Firma in Tintenfarbe, Ort und Zeit gedämpft. Zeilenumbruch auf dem Handy bricht
   zwischen den Spans, nie mitten in einer Angabe. */
.onloc-mini-list { list-style: none; margin: 0; padding: 0; }
.onloc-mini-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px;
  font-size: 12.5px; line-height: 1.5; padding: 5px 0; border-top: 1px solid var(--line-soft); }
.onloc-mini-list li:first-child { border-top: none; padding-top: 0; }
.onloc-mini-list li:last-child { padding-bottom: 0; }
.onloc-mini-list .d { font-weight: 650; color: var(--ink); white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.onloc-mini-list .w { color: var(--ink); }
.onloc-mini-list .o { color: var(--muted); }
.onloc-mini-list .z { color: var(--muted); white-space: nowrap; }
.onloc-mini .onloc-mini-links { display: flex; gap: 12px; flex-wrap: wrap; margin: 9px 0 0; font-size: 12px; }
.onloc-mini .onloc-mini-links a { color: var(--muted); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid var(--line); }
.onloc-mini .onloc-mini-links a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.onloc-mini .onloc-more { margin-top: 8px; padding-top: 8px; font-size: 12px; }

/* ─── Agenda (agenda.php, 19.08.2026) ───────────────────────────────────────────
   Eine Zeile pro TAG, nicht pro Schicht: am 29.08. steht Sharon in zwei Studios, und
   als zwei Zeilen las sich das wie zwei Tage. Datum links auf fester Breite (tabellarische
   Ziffern, damit die Kante stimmt), alles andere fliesst rechts davon und bricht auf dem
   Handy unter das Datum. Keine neue Farbwelt — die Chips nehmen die Töne, die Ferienplan
   und Monatskalender schon benutzen. */
.ag-row { display: flex; gap: 12px; align-items: baseline; padding: 8px 0;
  border-bottom: 1px solid var(--line-soft); }
.ag-row:last-of-type { border-bottom: none; }
.ag-row--heute { background: var(--yellow-soft, #fdf6e3); border-radius: 8px;
  padding-left: 8px; padding-right: 8px; margin: 0 -8px; }
.ag-date { width: 92px; flex-shrink: 0; font-variant-numeric: tabular-nums; font-size: 15px;
  white-space: nowrap; }   /* ⚠️ «Mo 17.08.» misst bei 15px 86 px — bei 84 px brach es um */
.ag-what { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; flex: 1; }
.ag-slot { display: inline-flex; gap: 6px; align-items: baseline; }
.ag-time { font-size: 13px; color: var(--muted); white-space: nowrap; }
.ag-note { font-size: 12px; color: var(--faint, #a8a49a); white-space: nowrap; }
.ag-tag { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.ag-tag--rest  { background: #e8f0fb; color: #1e4f8f; }
.ag-tag--vac   { background: #e6f4ea; color: #1b6b34; }
.ag-tag--frei  { background: #f1efe9; color: #6b6559; }
.ag-tag--sick  { background: #fdeceb; color: #a3251c; }
.ag-tag--holi  { background: #f5efe1; color: #7a5c00; text-transform: none; letter-spacing: 0; font-weight: 600; }
.ag-tag--onloc { background: #f3ecf5; color: #6a1b7a; text-transform: none; letter-spacing: 0; font-weight: 650; }
/* Getipptes aus Sharons Statusspalte («Office», «Display Shooting») — Arbeit, aber
   weder Studio noch Absenz: neutraler Ton, damit es weder mit dem Gold der Studios
   noch mit den Absenzfarben konkurriert. Gemischtschreibung bleibt (VERSALIEN
   machen aus «Display Shooting» ein Geschrei). */
.ag-tag--plan  { background: #eceae4; color: #3a372f; text-transform: none; letter-spacing: 0; font-weight: 650; }
.ag-foot { font-size: 11.5px; color: var(--faint, #a8a49a); margin: 14px 0 0; line-height: 1.5; }
/* Lücke: ein Arbeitstag ab heute ohne Eintrag (Raphael, 20.08.2026: «wieso fehlen da
   tage? was ist z.b. morgen»). Bewusst OHNE Datumsspalte und ohne Haarlinie darüber —
   sie ist keine Tageszeile, sondern die Auskunft, dass zwischen zwei Tagen nichts steht.
   Aufeinanderfolgende Tage stehen als EINE Zeile, sonst wäre ein leerer Monat wieder
   die 31-zeilige Tabelle, gegen die diese Seite gebaut wurde. */
.ag-gap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px;
  padding: 6px 0; font-size: 12.5px; color: var(--faint, #a8a49a); }
.ag-gap b { font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.ag-gap + .ag-row { border-top: 1px solid var(--line-soft); }

/* ⚠️ EINZEILIG AUCH AUF DEM HANDY (Raphael, 20.08.2026: «kannst du ihre agenda nicht
   einzeilig machen statt zweizeilig?»). Bis dahin stellte `width: 100%` das Datum unter
   520 px auf eine EIGENE Zeile — aus jedem Tag wurden zwei, aus fünfzehn Tagen dreissig
   Zeilen. Statt das Datum umzubrechen wird es schmaler: «Di 25.08.» braucht bei 13 px
   gemessen 75 px, die Spalte 78 px; auf einem 375-px-Gerät bleiben damit 227 px für
   Studio und Zeit. Wer die Breite ändert, misst im Browser nach — nicht schätzen. */
@media (max-width: 520px) {
  .ag-row { gap: 8px; }
  .ag-date { width: 78px; font-size: 13px; font-weight: 650; }   /* gemessen: «Mo 17.08.» = 75 px */
  .ag-what { gap: 3px 8px; }
  .ag-time, .ag-note { font-size: 12px; }
  .ag-tag { font-size: 11px; padding: 2px 7px; }
  .ag-gap { font-size: 12px; }
}
/* Team → Einteilung: die 🚐-Zeile — eigene Art, kein Studio */
.plan-slot.plan-slot--onloc { display: grid; grid-template-columns: auto 1fr; gap: 4px 8px; align-items: center; background: #f3ecf5; border-radius: 10px; padding: 8px 10px; margin: 6px -10px 0; }
.plan-slot--onloc .plan-onloc-ort { grid-column: 1 / -1; font-size: 12px; color: #6a1b7a; }
.plan-slot--onloc .plan-onloc-ort b { font-weight: 650; }
.onloc-warn { margin-top: 12px; background: var(--red-soft); border: 1px solid #f0c8c0; border-radius: 10px; padding: 10px 12px; font-size: 13px; line-height: 1.55; color: #7f1d1d; }
.onloc-warn b { color: var(--red-ink, #b91c1c); }
.onloc-warn-z { display: flex; gap: 6px; margin-top: 4px; }
.onloc-warn-z.knapp { color: #7a5c00; }
.onloc-warn-z.knapp b { color: #7a5c00; }

/* ---------- Signatur-Generator: Umbau 23.08.2026 (Schritte, Einklapp-Blöcke, Banner) ---------- */
.sig-intro { margin-bottom: 14px; }
.sig-step { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; margin-right: 8px; vertical-align: middle; }
.sig-card select { margin-bottom: 8px; }
/* Der Einklapp-Block ist eine Karte, deren Kopf die <summary> ist — Polster sitzt darum
   am Kopf und am Körper, nicht an der Karte, sonst klappt ein leerer Rand mit. */
.sig-more { padding: 0; overflow: hidden; }
.sig-more > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 24px; }
.sig-more > summary::-webkit-details-marker { display: none; }
.sig-more > summary::after { content: "+"; font-size: 20px; color: var(--muted); line-height: 1; flex: 0 0 auto; }
.sig-more[open] > summary::after { content: "–"; }
.sig-more-hint { font-size: 12px; color: var(--muted); text-align: right; }
.sig-more-body { padding: 0 24px 22px; border-top: 1px solid var(--line-soft); }
.sig-h3 { font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 18px 0 8px; }
.sig-einbau { margin-top: 14px; border-top: 1px solid var(--line-soft); padding-top: 12px; }
.sig-einbau > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink); list-style: none; }
.sig-einbau > summary::-webkit-details-marker { display: none; }
.sig-einbau > summary::before { content: "▸ "; color: var(--muted); }
.sig-einbau[open] > summary::before { content: "▾ "; }
.sig-einbau .sig-anleitung { margin-top: 12px; }
.sig-actions .sig-btn--ghost { padding: 8px 14px; font-size: 13px; }

/* ---------- Signatur-Banner (admin_banner.php) — Präfix sigb- ---------- */
.sigb-link { font-size: 13px; color: var(--muted); }
.sigb-regeln { margin: 0; padding-left: 18px; font-size: 13px; color: var(--muted); }
.sigb-regeln li { margin-bottom: 4px; }
.sigb-card { margin-top: 14px; }
.sigb-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.sigb-status { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--line-soft); color: var(--muted); }
.sigb-status--on { background: var(--yellow-soft); color: var(--yellow-ink); }
.sigb-ok { font-size: 13px; color: var(--green-ink, #2c6e3f); margin: 0 0 8px; }
.sigb-grid { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 760px) { .sigb-grid { grid-template-columns: 1fr; } }
.sigb-vorschau img { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.sigb-meta { font-size: 12px; color: var(--muted); margin-top: 6px; }
.sigb-leer { width: 100%; max-width: 360px; aspect-ratio: 4 / 1; border: 1px dashed var(--line); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--muted); text-align: center; padding: 10px; }
.sigb-felder input[type=file] { display: block; margin-bottom: 10px; font-size: 13px; }
.sigb-hint { font-size: 12px; color: var(--muted); margin: -2px 0 10px; }
.sigb-hint code { font-size: 11px; }
.sigb-check { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 4px 0 12px; cursor: pointer; }
.sigb-check input { width: 16px; height: 16px; accent-color: var(--ink); }
.sigb-actions .btn-small { width: auto; }

/* ---------- Morning Show verwalten (admin_show.php) — Präfix msw- ----------
   ⚠️ `button, .btn { width: 100% }` gilt global in dieser Datei — jeder Knopf hier
   braucht darum ausdrücklich `width: auto`, sonst füllt er seine Zeile.
   ⚠️ Die Vorschau (.msw-buehne) ist ABSICHTLICH dunkel: sie zeigt die Folie so, wie sie
   auf der Leinwand steht. Sie übernimmt die Bühnenfarben aus `.brfs-body`, aber fest
   verdrahtet — die Admin-Seite ist keine Bühne und soll deren Token-Layer nicht erben. */
.msw-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.msw-kopf--folien { margin-top: 26px; }
.msw-link { font-size: 13px; color: var(--muted); }
.msw-mute { color: var(--faint); font-weight: 400; }

.msw-regeln { margin: 0; padding-left: 18px; font-size: 13px; color: var(--muted); }
.msw-regeln li { margin-bottom: 5px; }
.msw-regeln code, .msw-f code { font-size: 11.5px; background: var(--line-soft); padding: 1px 5px; border-radius: 5px; }

.msw-ok { font-size: 13.5px; color: var(--green-ink); background: var(--green-soft); border: none; }
.msw-fehler { font-size: 13.5px; color: var(--red-ink); background: var(--red-soft); border: none; }
.msw-leer { font-size: 13.5px; color: var(--muted); text-align: center; }

.msw-heute { background: var(--yellow-soft); border: none; }
.msw-heute-z { margin: 0; font-size: 14px; color: var(--yellow-ink); }
.msw-heute-z strong { color: var(--ink); }

/* ── Wochenplan ── */
.msw-plan { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.msw-plan-tag { display: flex; flex-direction: column; gap: 5px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; }
.msw-plan-tag--heute { border-color: var(--yellow); background: var(--yellow-soft); }
.msw-plan-name { font-size: 12.5px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.msw-plan-tag select { width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: 9px; font-family: inherit; font-size: 13px; background: var(--card); }
.msw-chip { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 2px 6px; border-radius: 999px; background: var(--yellow); color: var(--ink); }

.msw-hinweis { font-size: 12.5px; color: var(--muted); margin: 12px 0 0; }
.msw-fehlt { margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.msw-fehlt summary { cursor: pointer; font-weight: 600; }
.msw-fehlt ul { padding-left: 18px; margin: 6px 0; }
.msw-fehlt li { margin-bottom: 3px; }

.msw-aktionen { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; font-size: 12.5px; }
.msw-aktionen button { width: auto; }

/* ── Eine Folie in der Liste ── */
.msw-folie { margin-top: 12px; }
.msw-folie--an { border-left: 3px solid var(--yellow); }
.msw-folie-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.msw-folie-kicker { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.msw-folie-titel { font-size: 17px; font-weight: 600; line-height: 1.25; margin-top: 2px; }
.msw-folie-titel em { font-style: normal; background: var(--yellow-soft); padding: 0 3px; border-radius: 4px; }
.msw-folie-meta { font-size: 12px; color: var(--muted); margin-top: 6px; }
.msw-marke { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--line-soft); color: var(--muted); white-space: nowrap; }
.msw-marke--an { background: var(--yellow); color: var(--ink); }
.msw-warn { color: var(--red-ink); }

.msw-zeile { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; }
.msw-inline { display: flex; gap: 4px; flex: 0 0 auto; }
.msw-mini { width: auto; padding: 4px 9px; font-size: 13px; line-height: 1; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--muted); }
.msw-mini:disabled { opacity: .3; cursor: not-allowed; }
.msw-auf { flex: 1 1 auto; min-width: 0; }
.msw-auf > summary, .msw-vorschau > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted); padding: 4px 0; }
.msw-vorschau { margin-top: 8px; }

/* ── Die Maske ── */
.msw-form { margin-top: 10px; }
.msw-f-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.msw-f-reihe--schmal { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.msw-f { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.msw-f > span { font-size: 12.5px; font-weight: 600; }
.msw-f > span em { font-style: normal; font-weight: 400; font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: .08em; }
.msw-f input, .msw-f textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; font-family: inherit; font-size: 13.5px; background: var(--card); color: var(--ink); }
.msw-f textarea { resize: vertical; line-height: 1.5; }
.msw-f small { font-size: 11.5px; color: var(--faint); }
.msw-f-haken { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13.5px; margin: 4px 0 2px; }
.msw-f-haken label { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.msw-f-haken input { width: 16px; height: 16px; accent-color: var(--ink); }
.msw-f-haken small { color: var(--faint); }

.msw-weg { margin-top: 4px; }
.msw-weg-btn { width: auto; padding: 5px 12px; font-size: 12px; font-weight: 500; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--muted); }
.msw-weg-btn:hover { border-color: var(--red-ink); color: var(--red-ink); }

/* ── Vorschau: die Folie, wie sie auf der Leinwand steht ── */
.msw-buehne { background: #101010; color: #fff; border-radius: 14px; padding: 22px 24px; margin-top: 8px; }
.msw-buehne em { font-style: normal; color: #FFCD00; }
.msw-b-kicker { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #FFCD00; display: flex; align-items: center; gap: 9px; }
.msw-b-kicker::before { content: ''; width: 24px; height: 3px; background: #FFCD00; flex: 0 0 auto; }
.msw-b-titel { font-size: 26px; font-weight: 800; letter-spacing: -.025em; line-height: 1.1; margin: 10px 0 0; }
.msw-b-lead { font-size: 14.5px; color: #cfcbc2; margin: 12px 0 0; line-height: 1.5; }
.msw-b-punkte { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 7px; }
.msw-b-punkte li { font-size: 13.5px; padding-left: 16px; position: relative; line-height: 1.45; }
.msw-b-punkte li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: #FFCD00; }
.msw-b-schluss { font-size: 17px; font-weight: 700; letter-spacing: -.02em; margin: 16px 0 0; }
.msw-b-frage { font-size: 13px; color: #8e887a; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid #2C2C2C; }

@media (max-width: 560px) {
  .msw-zeile { flex-direction: column; }
  .msw-b-titel { font-size: 21px; }
}

/* ---------- Lohnabrechnungen (lohn.php, admin_lohn.php — 02.10.2026) ---------- */
.lohn-liste { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--line, #e5e2da); }
.lohn-liste li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line, #e5e2da); }
.lohn-monat { font-weight: 600; flex: 1; }
.lohn-vorab { font-size: 12px; color: var(--muted); }
.lohn-liste a { font-size: 14px; font-weight: 600; white-space: nowrap; }
.lohn-hinweis { margin: 16px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--line-soft); font-size: 14px; }
.lohn-ok { margin: 14px 0 0; padding: 10px 14px; border-radius: 10px; background: #e7f4ea; font-size: 14px; }
.lohn-naechste { margin-top: 14px; font-size: 13px; }
.lohn-wahl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.lohn-wahl select { min-width: 220px; }
.lohn-zuordnen { font-size: 13px; margin-left: auto; }
.lohn-erklaerung { margin-top: 10px; }
.lohn-erklaerung summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.lohn-tabelle { width: 100%; border-collapse: collapse; margin: 18px 0; }
.lohn-tabelle th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--line, #e5e2da); }
.lohn-tabelle td { padding: 6px 8px; border-bottom: 1px solid var(--line, #e5e2da); vertical-align: middle; }
.lohn-tabelle td .subtitle { margin-left: 6px; font-size: 12px; }
.lohn-tabelle select { max-width: 100%; width: 360px; }
.lohn-vorschlag td { background: #fff7d6; }
.lohn-wie { font-size: 12px; color: var(--muted); margin-left: 8px; }
@media (max-width: 640px) {
  .lohn-tabelle td { display: block; border-bottom: 0; }
  .lohn-tabelle tr { display: block; border-bottom: 1px solid var(--line, #e5e2da); padding: 6px 0; }
  .lohn-tabelle thead { display: none; }
  .lohn-tabelle select { width: 100%; }
  .lohn-zuordnen { margin-left: 0; }
}

/* ── Tagesplan auf der Stempeluhr (lib_tagesplan.php, 02.10.2026) ───────────────── */
.tp-card { background: var(--yellow-soft); border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; }
.tp-label { display: block; font-weight: 600; font-size: 14px; margin: 0 0 4px; color: var(--ink); }
.tp-label + .tp-quote, .tp-quote + .tp-label { margin-top: 8px; }
.tp-hint { font-size: 12.5px; color: var(--muted, var(--faint)); margin: 0 0 6px; }
.tp-quote { font-size: 13.5px; line-height: 1.45; margin: 0 0 10px; white-space: pre-wrap; color: var(--ink); }
.tp-input { width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; font-family: inherit; font-size: 14px; line-height: 1.45; background: var(--card); color: var(--ink); resize: vertical; margin-bottom: 10px; }
.tp-save { width: auto; padding: 8px 14px; border-radius: 10px; border: 0; background: var(--ink); color: var(--card); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
/* Tagesplan-Übersicht (admin_tagesplan.php) */
.tpa-card { margin-bottom: 16px; }
.tpa-head { display: flex; gap: 12px; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.tpa-row { display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.tpa-row:last-of-type { border-bottom: 0; }
.tpa-when { flex: 0 0 118px; display: flex; flex-direction: column; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.tpa-when strong { color: var(--ink); font-size: 13.5px; }
.tpa-text { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.45; }
.tpa-text p { margin: 0 0 4px; }
.tpa-tag { display: inline-block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin-right: 6px; }
.tpa-tag--done { color: var(--green-ink); }
.tpa-open { color: var(--yellow-ink); font-size: 13px; }
.tpa-more { margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.tpa-more summary { cursor: pointer; }
@media (max-width: 600px) { .tpa-row { flex-direction: column; gap: 4px; } .tpa-when { flex-direction: row; flex-wrap: wrap; gap: 8px; flex-basis: auto; } }

/* Laschen Crew / Archiviert über Personenlisten (ui_crew_tabs, 05.10.2026) */
.crew-tabs { display: inline-flex; background: var(--bg); border-radius: 10px; padding: 3px; margin-bottom: 14px; }
.crew-tabs a { padding: 6px 14px; border-radius: 8px; font-size: 13px; color: var(--muted); text-decoration: none; font-weight: 600; }
.crew-tabs a span { font-weight: 400; margin-left: 2px; }
.crew-tabs a.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.crew-bis { font-weight: 400; color: var(--muted); font-size: 13px; margin-left: 4px; }
.lohn-tabelle tr[hidden] { display: none; }   /* die Handy-Ansicht setzt tr auf display:block */