/* ============================================================
   Schichtwerk Terminal — main.css
   Design tokens and styles matching the Schichtwerk Admin app
   ============================================================ */

/* ------------------------------------------------------------ */
/*  1. Custom Properties / Design Tokens                        */
/* ------------------------------------------------------------ */

:root {
  --primary: #35506f;
  --primary-dark: #24384f;
  --primary-light: #4a6d94;
  --primary-pale: #eef2f7;
  --text: #1a2a3a;
  --text-muted: #6b7f95;
  --border: #e2e8f0;
  --bg: #f8fafc;        /* wie im Admin (war #e9eff5) */
  --white: #ffffff;
  --danger: #e74c3c;
  --success: #27ae60;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
  --font: -apple-system, BlinkMacSystemFont, 'Schichtwerk UI', 'Segoe UI', Helvetica, Arial, sans-serif;
  /* Sichere Raender (iPad ohne Home-Taste, Home-Bildschirm-App, 06.10.2026).
     Eigene Namen statt env() direkt: so kann die Pruefung sie im Browser setzen. */
  --sicher-oben: env(safe-area-inset-top, 0px);
  --sicher-unten: env(safe-area-inset-bottom, 0px);
  /* Reiter-Leiste (10.10.2026, schwebend wie im Admin): Abstand vom unteren Rand; mit Home-Balken liegen die Knoepfe darueber (Regel: Bedienelemente im sicheren Bereich) */
  --nav-unten: max(14px, var(--sicher-unten));
  --nav-hoehe: 64px;
  --sicher-links: env(safe-area-inset-left, 0px);
  --sicher-rechts: env(safe-area-inset-right, 0px);
  --tastatur-hoehe: 0px;  /* setzt js/tastatur.js, solange das Tastenblatt offen ist */
}

/* ------------------------------------------------------------ */
/*  2. Reset & Base                                             */
/* ------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  /* Kein Doppeltipp-Zoom, keine 300-ms-Pause; die Seite selbst scrollt nie (nur ihre Bereiche) */
  touch-action: manipulation;
  height: 100%;
  overflow: hidden;
}

/* Schrift (09.10.2026, Wunsch Lars: wirkte „recht grob"). Gleicher Stapel wie Worker/Admin (SF Pro am iPad, Segoe UI unter Windows).
   Segoe UI hat kein 800er-Gewicht: der Browser wuerde sonst „Black" nehmen oder faelschen. 'Schichtwerk UI' bildet die
   Gewichte auf echte Schnitte ab (wie im Admin). Gewichte im Terminal: 400/500 Text, 600 Ueberschriften und Knoepfe,
   700 nur grosse Zahlen (Uhr, Ergebnis). Groessen-Stufen: 10 11 12 13 14 15 17 20 24 28 32 40 56 72. */
@font-face { font-family: 'Schichtwerk UI'; font-weight: 300 350; src: local('Segoe UI Light'), local('Segoe UI'); }
@font-face { font-family: 'Schichtwerk UI'; font-weight: 400 599; src: local('Segoe UI'); }
@font-face { font-family: 'Schichtwerk UI'; font-weight: 600 699; src: local('Segoe UI Semibold'), local('Segoe UI'); }
@font-face { font-family: 'Schichtwerk UI'; font-weight: 700 900; src: local('Segoe UI Bold'), local('Segoe UI'); }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}

button, input, select, textarea { font-family: inherit; }

body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  overflow: hidden;
  /* iPad: festgenagelt, damit nichts nachfedert oder verrutscht */
  position: fixed;
  inset: 0;
  width: 100%;
}

img, svg {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

input, select, textarea {
  font: inherit;
}

a {
  color: var(--primary);
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

/* Utility */
.hidden {
  display: none !important;
}

/* ------------------------------------------------------------ */
/*  3. Splash Screen                                            */
/* ------------------------------------------------------------ */

#screen-splash {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
}

.splash-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.splash-logo {
  display: block;
  width: 92px;
  height: auto;
}

.splash-name {
  color: var(--white);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.splash-sub {
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  font-weight: 500;
}

.splash-dots {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.splash-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  animation: splash-dot 1.4s ease-in-out infinite;
}

.splash-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.splash-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes splash-dot {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}

/* ------------------------------------------------------------ */
/*  4. Login Screen                                             */
/* ------------------------------------------------------------ */

#screen-kopplung {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Gleicher Verlauf wie im Admin-Login */
  background: linear-gradient(135deg, #1a2a3a 0%, #2c4460 25%, #35506f 60%, #4a6d94 100%);
  overflow: hidden;
}

/* Bewegte Hintergrundformen. Bis 21.09.2026 lagen die hier als
   ::before/::after - im HTML stehen aber drei <div class="login-shape">
   wie im Admin, die damit ohne jede Regel und unsichtbar waren. */
.login-bg-shapes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.login-shape {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  animation: loginShapeFloat 20s ease-in-out infinite;
}

.login-shape--1 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(53, 80, 111, .15) 0%, transparent 70%);
  top: -80px; left: -60px;
  animation-delay: 0s;
  animation-duration: 22s;
}

.login-shape--2 {
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(96, 165, 250, .08) 0%, transparent 70%);
  top: 30%; right: -40px;
  animation-delay: -4s;
  animation-duration: 18s;
}

.login-shape--3 {
  width: 250px; height: 250px;
  background: radial-gradient(circle, rgba(255, 255, 255, .04) 0%, transparent 70%);
  bottom: -60px; left: 20%;
  animation-delay: -8s;
  animation-duration: 25s;
}

@keyframes loginShapeFloat {
  0%   { opacity: 0; transform: translate(0, 0) scale(1); }
  20%  { opacity: 1; }
  50%  { transform: translate(30px, -20px) scale(1.1); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-20px, 30px) scale(0.95); }
}

@keyframes loginFadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.login-wrapper {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 400px;
  padding: 0 20px;
  animation: loginFadeIn .6s ease-out both;
}

/* — Marke über der Karte — */
.login-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 32px;
}

.login-brand-icon {
  width: 52px;
  height: 52px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.login-brand-text {
  display: flex;
  flex-direction: column;
}

.login-brand-name {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.5px;
  line-height: 1.1;
}

.login-brand-label {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, .5);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

/* — Karte — */
.login-card {
  background: var(--white);
  border-radius: 18px;
  padding: 40px 36px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25), 0 4px 12px rgba(0, 0, 0, .08);
  position: relative;
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, .6);
  border-top: 1px solid rgba(255, 255, 255, .8);
}

.login-logo {
  margin-bottom: 28px;
}

.login-logo h1 {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.3px;
}

.login-logo p {
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 4px;
}

#login-error {
  background: #fef2f2;
  color: var(--danger);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13px;
  margin-bottom: 18px;
}

/* — Felder — */
.login-field {
  margin-bottom: 18px;
}

.login-field label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
  /* Bewusst keine Grossbuchstaben: die kamen vorher aus der generischen
     .form-field-Regel und passten nicht zum Admin-Login. */
  text-transform: none;
  letter-spacing: 0;
}

.login-card input[type="email"],
.login-card input[type="password"],
.login-card input[type="text"] {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 15px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  color: var(--text);
  background: var(--white);
}

.login-card input[type="email"]:focus,
.login-card input[type="password"]:focus,
.login-card input[type="text"]:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(53, 80, 111, .08);
}

/* — Eigene Checkbox wie im Admin — */
.login-remember {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  margin-bottom: 20px;
  text-transform: none;
  letter-spacing: 0;
  -webkit-user-select: none;
  user-select: none;
}

.login-remember input[type="checkbox"] {
  display: none;
}

.login-remember .check-box {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s, border-color .15s;
}

.login-remember .check-box svg {
  width: 12px;
  height: 12px;
  opacity: 0;
  transition: opacity .15s;
  color: #fff;
}

.login-remember input:checked + .check-box {
  background: var(--primary);
  border-color: var(--primary);
}

.login-remember input:checked + .check-box svg {
  opacity: 1;
}

.login-card .btn-primary {
  width: 100%;
  padding: 14px 20px;
  font-size: 15px;
  border-radius: 12px;
}

/* ------------------------------------------------------------ */
/*  4b. Lock Screen                                             */
/* ------------------------------------------------------------ */

#screen-lock {
  position: fixed;
  inset: 0;
  z-index: 950;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
  overflow: hidden;
}

.lock-bg-shapes {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.lock-shape {
  position: absolute;
  border-radius: 50%;
  opacity: 0.06;
  background: var(--white);
  animation: login-float 20s ease-in-out infinite;
}

.lock-shape--1 {
  width: 350px;
  height: 350px;
  top: -80px;
  right: -60px;
}

.lock-shape--2 {
  width: 250px;
  height: 250px;
  bottom: -40px;
  left: -40px;
  animation-delay: -10s;
  animation-duration: 25s;
}

.lock-wrapper {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 20px;
}

.lock-icon-ring {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.lock-org-name {
  color: var(--white);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.lock-hint {
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
}

.lock-pin-row {
  display: flex;
  gap: 10px;
  margin: 4px 0;
}

.lock-pin-input {
  width: 48px;
  height: 56px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  font-size: 24px;
  font-weight: 600;
  text-align: center;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
  -webkit-text-security: disc;
}

.lock-pin-input:focus {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.14);
}

/* PIN-Inputs im Modal (weiße Oberfläche) */
.modal-card .lock-pin-input {
  border-color: var(--border);
  background: var(--white);
  color: var(--text);
}

.modal-card .lock-pin-input:focus {
  border-color: var(--primary);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(53, 80, 111, 0.12);
}

/* PIN-Inputs in Einstellungen */
.eins-pin-setup .lock-pin-input {
  border-color: var(--border);
  background: var(--white);
  color: var(--text);
  width: 44px;
  height: 50px;
  font-size: 20px;
}

.eins-pin-setup .lock-pin-input:focus {
  border-color: var(--primary);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(53, 80, 111, 0.12);
}

.lock-error {
  color: #fca5a5;
  font-size: 13px;
  font-weight: 500;
}

.modal-card .lock-error {
  color: var(--danger);
}

.lock-unlock-btn {
  width: 220px;
  padding: 12px 24px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.15);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  color: var(--white);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 4px;
}

.lock-unlock-btn:hover {
  background: rgba(255, 255, 255, 0.22);
}

.lock-clock {
  color: rgba(255, 255, 255, 0.35);
  font-size: 48px;
  font-weight: 200;
  letter-spacing: 4px;
  margin-top: 24px;
}

/* Shake-Animation für falsche PIN */
@keyframes pin-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}

.pin-shake {
  animation: pin-shake 0.4s ease-in-out;
}

/* Einstellungen: PIN-Setup Bereich */
.eins-section-divider {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  padding: 20px 0 8px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}

.eins-pin-setup {
  padding: 16px 0 8px;
}

.eins-pin-field {
  margin-bottom: 14px;
}

.eins-pin-field label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.eins-row-disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* Modal klein */
.modal-card-sm {
  max-width: 380px;
}

/* ------------------------------------------------------------ */
/*  5. App Layout                                               */
/* ------------------------------------------------------------ */

#screen-app {
  /* Am Rand festgenagelt (inset: 0) statt 100dvh: so reicht die App im Safari-Tab
     und im Home-Modus immer genau bis zum unteren Rand, kein Streifen darunter (09.10.2026) */
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* — Header — */
.app-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 300;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: var(--white);
}

.app-header-brand {
  font-size: 17px;
  font-weight: 600;
}

.app-header-brand span {
  font-weight: 400;
  opacity: 0.75;
}

.app-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-clock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 13px;
  font-weight: 500;
  color: var(--white);
  backdrop-filter: blur(4px);
}

.btn-header {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
  font-size: 13px;
  font-weight: 600;
  transition: background 0.2s;
}

.btn-header:hover {
  background: rgba(255, 255, 255, 0.2);
}

.btn-header svg {
  width: 16px;
  height: 16px;
}

/* — Content Area — */
.app-content {
  flex: 1;
  min-height: 0;
  padding: 20px;
  padding-top: calc(20px + var(--sicher-oben));
  padding-left: calc(20px + var(--sicher-links));
  padding-right: calc(20px + var(--sicher-rechts));
  padding-bottom: 14px; /* die Leiste steht unter dem Inhalt (kein Ueberlappen mehr) */
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Tab-Panes sollen sich an den verfügbaren Platz anpassen */
.tab-pane {
  max-height: 100%;
}

/* — Bottom Navigation — */
.app-nav {
  /* Schwebende Leiste wie im Admin (10.10.2026): abgesetzt vom Hintergrund, runde Ecken,
     Schatten. Sie steht weiter im Fluss unter dem Inhalt (kein toter Streifen, nichts
     ueberlappt); der Rand darunter haelt sie ueber dem Home-Balken. */
  flex: none;
  position: relative;
  z-index: 200;
  display: grid;
  grid-auto-flow: column;              /* eine Reihe, egal wie viele Reiter (seit 13.10.2026: 4) */
  grid-auto-columns: minmax(0, 1fr);
  gap: 8px;
  width: min(1080px, calc(100% - 2 * max(20px, var(--sicher-links), var(--sicher-rechts))));
  margin: 8px auto var(--nav-unten);
  padding: 8px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 28px;
  box-shadow: 0 14px 36px rgba(24, 39, 75, 0.14);
}

.app-nav-btn {
  border: none;
  background: none;
  border-radius: 22px;
  padding: 9px 8px 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: .18s ease;
  position: relative;
}

.app-nav-btn:hover {
  background: var(--primary-pale);
  color: var(--text);
}

.app-nav-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-nav-btn span {
  line-height: 1;
  white-space: nowrap;
}

.app-nav-btn.active {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 10px 24px rgba(53, 80, 111, 0.22);
}

.app-nav-btn.active svg {
  stroke-width: 2;
}

/* ------------------------------------------------------------ */
/*  6. Tab Panes                                                */
/* ------------------------------------------------------------ */

.tab-pane {
  display: block;
}

/* ------------------------------------------------------------ */
/*  7. Cards                                                    */
/* ------------------------------------------------------------ */

.card {
  background: var(--white);
  border: 1px solid var(--border);   /* wie im Admin */
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  overflow: hidden;
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
  padding-bottom: 12px;
}

.card-kicker {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
}

.card-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}

.card-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 20px;
  background: var(--primary-pale);
  color: var(--primary);
  font-size: 12px;
  font-weight: 500;
  transition: background 0.2s;
}

.card-action:hover {
  background: #dce5f0;
}

.card-list {
  display: grid;
  gap: 8px;
  overflow: auto;
  flex: 1;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--primary-pale);
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 600;
}

/* ------------------------------------------------------------ */
/*  8. Dashboard — Week Strip                                   */
/* ------------------------------------------------------------ */

.week-strip {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  margin-bottom: 20px;
}

.week-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.week-head .card-title {
  font-size: 17px;
}

.week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.week-day {
  display: flex;
  flex-direction: column;
  min-height: 120px;
  padding: 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.week-day:hover {
  border-color: var(--primary-light);
  box-shadow: 0 2px 8px rgba(53, 80, 111, 0.1);
}

.week-day.is-today {
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(53, 80, 111, 0.15);
  background: var(--primary-pale);
}

.week-day.is-selected {
  border-color: var(--primary);
  background: var(--primary-pale);
  box-shadow: 0 0 0 2px rgba(53, 80, 111, 0.2);
}

.week-day-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.week-day-name {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
}

.week-day-date {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}

.week-meta {
  margin-top: auto;
}

.week-day-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 12px;
  background: var(--primary-pale);
  color: var(--primary);
  font-size: 11px;
  font-weight: 600;
}

.week-event-mini {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 10px;
  background: var(--primary-pale);
  font-size: 11px;
  font-weight: 500;
  color: var(--primary-dark);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.week-event-mini::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
}

.week-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  border: 2px dashed var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
  padding: 12px;
}

/* Status-Etikett (allgemein) */
.status-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  background: var(--primary-pale);
  color: var(--primary-dark);
}

.status-pill.active {
  background: rgba(39, 174, 96, 0.12);
  color: var(--success);
}

/* ------------------------------------------------------------ */
/*  12. Reservation Rows (Dashboard compact)                    */
/* ------------------------------------------------------------ */

.res-row {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
}

.res-row-time {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.res-row-main {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.res-row-main strong {
  font-size: 14px;
  font-weight: 600;
}

.res-row-main span {
  font-size: 12px;
  color: var(--text-muted);
}

.res-row-guests {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--primary-pale);
  color: var(--primary-dark);
  font-size: 13px;
  font-weight: 600;
}

/* ------------------------------------------------------------ */
/*  13. Empty State                                             */
/* ------------------------------------------------------------ */

.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border: 2px dashed var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
}

/* ------------------------------------------------------------ */
/*  14. Split Grid (Reservierungen + Hinweise tabs)             */
/* ------------------------------------------------------------ */

/* Alle Tabs bekommen weißes Panel auf grauem Hintergrund */
#tab-reservierungen,
#tab-hinweise,
#tab-einstellungen {
  height: 100%;
}

#tab-reservierungen > .split-grid {
  background: rgba(255,255,255,.92);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: 0 8px 32px rgba(0,0,0,.06);
  padding: 18px;
  height: 100%;
  overflow-y: auto;
}

#tab-einstellungen > .eins-layout {
  background: rgba(255,255,255,.92);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: 0 8px 32px rgba(0,0,0,.06);
  padding: 18px;
  height: 100%;
  overflow-y: auto;
  max-width: none;
}

.split-grid {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 20px;
}

/* Cards innerhalb der Panels brauchen keinen eigenen Shadow */
#tab-reservierungen .card,
#tab-einstellungen .card {
  box-shadow: none;
  border: 1px solid var(--border);
}

/* ------------------------------------------------------------ */
/*  15. Forms                                                   */
/* ------------------------------------------------------------ */

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form-field {
  display: grid;
  gap: 6px;
}

.form-field.full {
  grid-column: 1 / -1;
}

.form-field label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

input,
select,
textarea {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  font-size: 15px;
  color: var(--text);
  background: var(--white);
  transition: border-color 0.2s, box-shadow 0.2s;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(53, 80, 111, 0.12);
}

textarea {
  resize: vertical;
  min-height: 80px;
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b7f95' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.btn-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: var(--white);
  border: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}

.btn-primary:hover {
  background: var(--primary-light);   /* wie im Admin */
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--primary);
  border: 1.5px solid var(--border);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.btn-secondary:hover {
  background: var(--primary-pale);
  border-color: var(--primary-light);
}

/* ------------------------------------------------------------ */
/*  16. Reservation List (full)                                 */
/* ------------------------------------------------------------ */

.res-list {
  display: grid;
  gap: 10px;
}

.res-item {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  background: var(--white);
  transition: border-color 0.2s;
}

.res-item:hover {
  border-color: var(--primary-light);
}

.res-item-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.res-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.res-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.res-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.res-note {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-muted);
}

.mini-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  background: var(--primary-pale);
  color: var(--primary);
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}

.mini-btn:hover {
  background: #dce5f0;
}

.mini-btn.danger {
  background: rgba(231, 76, 60, 0.1);
  color: var(--danger);
}

.mini-btn.danger:hover {
  background: rgba(231, 76, 60, 0.18);
}

/* ------------------------------------------------------------ */
/*  17. Calendar                                                */
/* ------------------------------------------------------------ */

.cal-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  overflow: hidden;
}

.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.cal-head .card-title {
  font-size: 17px;
}

.cal-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cal-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cal-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  min-width: 36px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--white);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.cal-nav-btn:hover {
  background: var(--primary-pale);
  border-color: var(--primary-light);
}

.cal-nav-btn svg {
  width: 16px;
  height: 16px;
}

.cal-today {
  padding: 0 14px;
}

.cal-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: var(--white);
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(36, 56, 79, 0.2);
  transition: transform 0.15s, box-shadow 0.15s;
}

.cal-add:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(36, 56, 79, 0.25);
}

.cal-add svg {
  width: 16px;
  height: 16px;
}

.cal-shell {
  border-radius: var(--radius-sm);
  background: var(--bg);
  overflow: hidden;
}

.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.cal-weekdays span {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.cal-day {
  min-height: 100px;
  padding: 8px;
  background: var(--white);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.cal-day:hover {
  background: var(--primary-pale);
}

.cal-day.muted {
  background: var(--bg);
  opacity: 0.5;
}

.cal-day.today {
  border-color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary);
}

.cal-day.is-holiday {
  background: #fef9f0;
}

.cal-day-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.cal-day-num {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1;
}

.today .cal-day-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--white);
  font-size: 13px;
}

.cal-day-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--primary-pale);
  color: var(--primary);
  font-size: 10px;
  font-weight: 600;
}

.cal-events {
  display: grid;
  gap: 4px;
}

.cal-event {
  padding: 3px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-left: 3px solid var(--primary);
  background: var(--primary-pale);
  color: var(--primary-dark);
}

.cal-event.type-event {
  border-left-color: #8e44ad;
  background: rgba(142, 68, 173, 0.08);
  color: #6c3483;
}

.cal-event.type-holiday {
  border-left-color: var(--text-muted);
  background: rgba(107, 127, 149, 0.08);
  color: var(--text-muted);
}

.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dot-res {
  background: var(--primary);
}

.dot-event {
  background: #8e44ad;
}

.dot-today {
  background: var(--success);
}

/* ------------------------------------------------------------ */
/*  18. Calendar Modals                                         */
/* ------------------------------------------------------------ */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 20px;
  animation: modal-fade-in 0.2s ease;
}

@keyframes modal-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-card {
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15);
  width: 100%;
  max-width: 580px;
  max-height: 80vh;
  overflow: auto;
  animation: modal-slide-in 0.25s ease;
}

@keyframes modal-slide-in {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}

.modal-header h3 {
  font-size: 17px;
  font-weight: 600;
}

.modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg);
  color: var(--text-muted);
  font-size: 17px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}

.modal-close:hover {
  background: var(--border);
}

.modal-body {
  padding: 24px;
}

.modal-footer {
  padding: 16px 24px 24px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.cal-day-entry {
  padding: 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.cal-day-entry strong {
  font-size: 14px;
  font-weight: 600;
  display: block;
}

.cal-day-entry span {
  font-size: 12px;
  color: var(--text-muted);
}

.cal-day-entry .mini-btn {
  flex-shrink: 0;
}

/* ------------------------------------------------------------ */
/*  21. Toast Notifications                                     */
/* ------------------------------------------------------------ */

.app-toast-container {
  position: fixed;
  bottom: calc(var(--nav-hoehe) + var(--nav-unten) + 14px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 250;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.app-toast {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 24px;
  background: var(--text);
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: auto;
}

.app-toast--visible {
  opacity: 1;
  transform: translateY(-4px);
}

.app-toast--success {
  border-left: 4px solid var(--success);
}

.app-toast--error {
  border-left: 4px solid var(--danger);
}

/* ------------------------------------------------------------ */
/*  22. Scrollbar Styling                                       */
/* ------------------------------------------------------------ */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(107, 127, 149, 0.25);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(107, 127, 149, 0.4);
}

/* ------------------------------------------------------------ */
/*  23. Responsive — Desktop (min-width: 981px)                 */
/* ------------------------------------------------------------ */

@media (min-width: 981px) {
  .week-grid {
    grid-template-columns: repeat(7, 1fr);
  }

  .dash-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .cal-grid {
    grid-template-columns: repeat(7, 1fr);
  }

  .split-grid {
    grid-template-columns: 2fr 3fr;
  }
}

/* Short desktop screens — tighter spacing */
@media (min-width: 981px) and (max-height: 820px) {
  .app-content {
    /* Kein Kopfbalken mehr (der alte .app-header ist nicht im Markup) –
       oben reichen 14px. Unten nur Abstand (die Leiste steht unter dem Inhalt):
       */
    padding: 14px;
    padding-top: calc(14px + var(--sicher-oben));
    padding-left: calc(14px + var(--sicher-links));
    padding-right: calc(14px + var(--sicher-rechts));
    padding-bottom: 14px;
  }

  .card {
    padding: 16px;
  }

  .week-strip {
    padding: 16px;
  }

  .week-day {
    min-height: 100px;
    padding: 8px;
  }

  .cal-day {
    min-height: 80px;
    padding: 6px;
  }

  .dash-grid {
    gap: 14px;
  }
}

/* ------------------------------------------------------------ */
/*  24. Responsive — Mobile (max-width: 980px)                  */
/* ------------------------------------------------------------ */

@media (max-width: 980px) {
  body {
    font-size: 14px;
  }

  .app-header {
    padding: 0 14px;
  }

  .app-header-brand {
    font-size: 15px;
  }

  .app-content {
    /* Kein Kopfbalken mehr (der alte .app-header ist nicht im Markup) –
       oben reichen 14px. Unten nur Abstand (die Leiste steht unter dem Inhalt):
       */
    padding: 14px;
    padding-top: calc(14px + var(--sicher-oben));
    padding-left: calc(14px + var(--sicher-links));
    padding-right: calc(14px + var(--sicher-rechts));
    padding-bottom: 14px;
  }

  /* Week Strip (old — unused, kept for safety) */
  .week-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .week-day {
    min-height: 90px;
  }

  .week-strip {
    padding: 14px;
  }

  /* Calendar */
  .cal-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cal-weekdays {
    display: none;
  }

  .cal-day {
    min-height: 80px;
  }

  .cal-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .cal-actions {
    width: 100%;
    justify-content: space-between;
  }

  /* Split Grid */
  .split-grid {
    grid-template-columns: 1fr;
  }

  /* Forms */
  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-field.full {
    grid-column: 1;
  }

  /* Modal */
  .modal-card {
    max-width: 100%;
    max-height: 90vh;
    margin: 10px;
    border-radius: var(--radius);
  }

  .modal-header {
    padding: 16px 18px;
  }

  .modal-body {
    padding: 18px;
  }

  .modal-footer {
    padding: 12px 18px 18px;
  }

  /* Buttons */
  .btn-primary,
  .btn-secondary {
    padding: 10px 18px;
    font-size: 13px;
  }

  /* Header elements */
  .header-clock {
    font-size: 12px;
    padding: 4px 10px;
  }

  .btn-header {
    font-size: 12px;
    padding: 5px 10px;
  }

  .btn-header span {
    display: none;
  }
}

/* ------------------------------------------------------------ */
/*  25. Small Mobile (max-width: 480px)                         */
/* ------------------------------------------------------------ */

@media (max-width: 480px) {
  .app-header-brand span {
    display: none;
  }

  .week-grid {
    grid-template-columns: 1fr;
  }

  .cal-grid {
    grid-template-columns: 1fr;
  }

  .res-row {
    grid-template-columns: 50px 1fr auto;
    gap: 8px;
  }

}

/* ------------------------------------------------------------ */
/*  Einstellungen                                               */
/* ------------------------------------------------------------ */

.eins-layout {
  max-width: 640px;
  margin: 0 auto;
}

.eins-sections {
  display: grid;
  gap: 24px;
}

.eins-section-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--primary);
  margin-bottom: 8px;
  padding-left: 4px;
}

.eins-section-card {
  display: grid;
  gap: 1px;
  background: var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.eins-cat-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: var(--white);
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--text);
  transition: background 0.15s;
}

.eins-cat-card:hover {
  background: var(--primary-pale);
}

.eins-cat-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.eins-cat-icon svg {
  width: 20px;
  height: 20px;
}

.eins-cat-body {
  flex: 1;
  min-width: 0;
}

.eins-cat-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.eins-cat-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
}

.eins-cat-chevron {
  font-size: 20px;
  font-weight: 300;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Detail-Ansicht */
.eins-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  padding: 6px 2px;
  margin-bottom: 12px;
}

.eins-back:hover {
  text-decoration: underline;
}

/* Einstellungen Detail-Inhalt */
.eins-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

.eins-row:last-child {
  border-bottom: none;
}

.eins-row-info {
  flex: 1;
  min-width: 0;
}

.eins-row-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.eins-row-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
}

.eins-row-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  text-align: right;
  flex-shrink: 0;
}

.eins-row input[type="text"],
.eins-row input[type="number"],
.eins-row select {
  width: 180px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  text-align: right;
}

.eins-row input:focus,
.eins-row select:focus {
  outline: none;
  border-color: var(--primary);
}

/* Toggle Switch */
.eins-toggle {
  position: relative;
  width: 48px;
  height: 28px;
  flex-shrink: 0;
}

.eins-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.eins-toggle-slider {
  position: absolute;
  inset: 0;
  background: #cbd5e1;
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.2s;
}

.eins-toggle-slider::before {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  left: 3px;
  top: 3px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.eins-toggle input:checked + .eins-toggle-slider {
  background: var(--success);
}

.eins-toggle input:checked + .eins-toggle-slider::before {
  transform: translateX(20px);
}

/* Danger-Buttons in Einstellungen */
.eins-danger-btn {
  border: none;
  background: #fee2e2;
  color: #991b1b;
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.eins-danger-btn:hover {
  background: #fecaca;
}


/* ------------------------------------------------------------ */
/*  26. Kalender: Blatt (Ansicht steht am Dateiende, wie im Admin) */
/* ------------------------------------------------------------ */

/* Blatt: Uhrzeit mit kleinem x zum Entfernen */
.kal-zeitwahl { display: flex; align-items: center; gap: 8px; }
.kal-leeren {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(53, 80, 111, .12);
  color: var(--resv-leise);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.kal-leeren[hidden] { display: none; }
.kal-leeren:active { background: rgba(53, 80, 111, .24); }
#kal-form input[type="text"] + .resv-zeile-form { border-top: .5px solid var(--border); }
#kal-form .resv-chips button { min-width: 0; padding: 0 16px; }

@media (hover: hover) {
  .kal-zelle:not(.gewaehlt):hover { background: color-mix(in srgb, var(--primary) 5%, transparent); }
  .kal-w-stunde:hover { background: color-mix(in srgb, var(--primary) 5%, transparent); }
}

/* ------------------------------------------------------------ */
/*  Reservierungen wie eine iPad-App (10.10.2026, Lars)          */
/*  Grosser Titel, Liste nach Tagen ohne Kaesten, Zeile nach     */
/*  links wischen fuer Aendern/Loeschen, Blatt mit Sichern.      */
/*  Hover nur mit Maus, sonst bleibt er am iPad haengen.         */
/* ------------------------------------------------------------ */

#tab-reservierungen,
#tab-hinweise {
  display: flex;
  flex-direction: column;
  height: 100%;
}
#tab-reservierungen.hidden,
#tab-hinweise.hidden { display: none !important; }

/* Hintergrund wie die Einstellungen am iPad: Grau, darauf weisse Listen */
#screen-app[data-reiter="reservierungen"],
#screen-app[data-reiter="reservierungen"] .app-content,
#screen-app[data-reiter="hinweise"],
#screen-app[data-reiter="hinweise"] .app-content { background: var(--bg); }
:root[data-theme="dark"] #screen-app[data-reiter="reservierungen"],
:root[data-theme="dark"] #screen-app[data-reiter="reservierungen"] .app-content,
:root[data-theme="dark"] #screen-app[data-reiter="hinweise"],
:root[data-theme="dark"] #screen-app[data-reiter="hinweise"] .app-content { background: var(--bg); }

.resv {
  --resv-zeile: #fff;
  --resv-gedrueckt: var(--primary-pale);
  --resv-grau: #94a3b8;
  --resv-trenn: var(--border);
  --resv-leise: var(--text-muted);   /* Schichtwerk-Blaugrau (11.10.2026, Wunsch Lars: zurueck zum Schichtwerk-Look) */
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0 12px;
}

.resv-kopf {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  padding: 4px 4px 14px;
}
.resv-kopf-text { flex: 1; min-width: 0; }
.resv-titel {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.4px;
  line-height: 1.1;
  color: var(--text);
}
.resv-unter {
  margin-top: 4px;
  font-size: 15px;
  color: var(--resv-leise);
}

.resv-plus {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  border: none;
  background: var(--primary);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .12s, background .12s;
}
.resv-plus svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.resv-plus:active { transform: scale(.92); background: var(--primary-dark); }

/* Segmente wie am iPad */
.resv-segment {
  display: inline-flex;
  align-self: flex-start;
  padding: 3px;
  margin: 0 4px 18px;
  border-radius: 10px;
  background: rgba(53, 80, 111, .12);
}
.resv-segment button {
  min-width: 96px;
  min-height: 36px;
  padding: 0 16px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s;
}
.resv-segment button.aktiv {
  background: var(--resv-zeile);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .04);
}

.resv-liste {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 12px;
}

.resv-tag { margin-bottom: 26px; }
.resv-tag-kopf {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px 8px;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--resv-leise);
}
.resv-trenner {
  margin: 8px 16px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--resv-leise);
}
.resv-vorbei { opacity: .6; }

/* Gruppe: eine weisse Flaeche, Zeilen nur durch feine Linien getrennt */
.resv-gruppe {
  background: var(--resv-zeile);
  border-radius: 12px;
  overflow: hidden;
}

.resv-zeile {
  position: relative;
  overflow: hidden;
}
.resv-zeile + .resv-zeile .resv-vorne::before {
  content: '';
  position: absolute;
  top: 0;
  left: 96px;
  right: 0;
  border-top: .5px solid var(--resv-trenn);
}

.resv-aktionen {
  position: absolute;
  inset: 0 0 0 auto;
  display: flex;
  visibility: hidden;   /* sonst blitzt Rot an der runden Ecke */
}
.resv-zeile.wischt .resv-aktionen,
.resv-zeile.offen .resv-aktionen,
.resv-zeile.schliesst .resv-aktionen { visibility: visible; }
.resv-aktionen button {
  width: 88px;
  border: none;
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.resv-aendern { background: var(--resv-grau); }
.resv-weg { background: #ff3b30; }
.resv-aktionen button:active { filter: brightness(.88); }

.resv-vorne {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 68px;
  padding: 10px 16px 10px 20px;
  background: var(--resv-zeile);
  cursor: pointer;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), background .12s;
}
.resv-vorne:active { background: var(--resv-gedrueckt); }

.resv-zeit {
  width: 60px;
  flex-shrink: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.resv-mitte { flex: 1; min-width: 0; }
.resv-name {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.resv-info {
  margin-top: 2px;
  font-size: 14px;
  color: var(--resv-leise);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.resv-pers {
  flex-shrink: 0;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--primary-pale);
  color: var(--primary);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.resv-pfeil {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: #c4c4c9;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.resv-abgesagt .resv-mitte,
.resv-abgesagt .resv-zeit { opacity: .45; }

.resv-leer {
  margin-top: 60px;
  text-align: center;
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}
.resv-leer span {
  font-size: 15px;
  font-weight: 400;
  color: var(--resv-leise);
}

@media (hover: hover) {
  .resv-vorne:hover { background: var(--bg); }
  .resv-plus:hover { background: var(--primary-dark); }
  .resv-segment button:not(.aktiv):hover { background: rgba(53, 80, 111, .12); }
}

/* — Blatt: Neue Reservierung / Reservierung ändern — */
.resv-blatt {
  max-width: 540px;
  background: var(--bg);
  border-radius: 14px;
  animation: resv-blatt-rein .32s cubic-bezier(.2, .8, .2, 1);
}
@keyframes resv-blatt-rein {
  from { transform: translateY(60px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.resv-blatt-kopf {
  position: sticky;
  top: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 56px;
  padding: 0 8px;
  background: inherit;
  border-bottom: .5px solid var(--resv-trenn, rgba(60, 60, 67, .14));
}
.resv-blatt-kopf h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  text-align: center;
}
.resv-blatt-knopf {
  justify-self: start;
  min-height: 44px;
  padding: 0 12px;
  border: none;
  background: none;
  color: var(--primary);
  font: inherit;
  font-size: 17px;
  cursor: pointer;
}
.resv-sichern { justify-self: end; font-weight: 600; }
.resv-blatt-knopf:active { opacity: .45; }

.resv-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 20px 18px 24px;
}
.resv-form .resv-gruppe { background: #fff; }

.resv-form input[type="text"],
.resv-form textarea {
  display: block;
  width: 100%;
  min-height: 50px;
  padding: 13px 16px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 17px;
  box-shadow: none;
  outline: none;
}
.resv-form textarea { min-height: 96px; resize: none; }
.resv-form input[type="text"] + input[type="text"] { border-top: .5px solid var(--border); margin-left: 16px; width: calc(100% - 16px); padding-left: 0; }
.resv-form .tt-feld.tt-aktiv {
  box-shadow: none !important;
  background: var(--primary-pale) !important;
}

.resv-zeile-form {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
  padding: 6px 12px 6px 16px;
  font-size: 17px;
  color: var(--text);
}
.resv-zeile-form + .resv-zeile-form,
.resv-chips + .resv-zeile-form { border-top: .5px solid var(--border); }

/* Wert-Knopf: das echte Datums-/Zeitfeld liegt unsichtbar darueber (Auswahl des Systems) */
.resv-wert {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 8px;
  background: rgba(53, 80, 111, .12);
  color: var(--text);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.resv-wert.leer { color: var(--primary); }
.resv-wert input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: none;
  cursor: pointer;
}

.resv-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 16px 14px;
}
.resv-chips button {
  min-width: 70px;
  min-height: 40px;
  padding: 0 12px;
  border: none;
  border-radius: 999px;
  background: rgba(53, 80, 111, .12);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.resv-chips button.aktiv { background: var(--primary); color: #fff; font-weight: 600; }
.resv-chips button:active { transform: scale(.95); }

.resv-stepper {
  display: flex;
  align-items: center;
  border-radius: 9px;
  background: rgba(53, 80, 111, .12);
}
.resv-stepper button {
  width: 52px;
  height: 40px;
  border: none;
  background: none;
  color: var(--text);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.resv-stepper button:active { background: rgba(53, 80, 111, .2); }
.resv-stepper input {
  width: 52px;
  height: 40px;
  border: none;
  border-left: .5px solid rgba(60, 60, 67, .2);
  border-right: .5px solid rgba(60, 60, 67, .2);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.resv-stepper input::-webkit-outer-spin-button,
.resv-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.resv-loeschen {
  width: 100%;
  min-height: 52px;
  border: none;
  background: none;
  color: #ff3b30;
  font: inherit;
  font-size: 17px;
  cursor: pointer;
}
.resv-loeschen:active { background: var(--resv-gedrueckt, #e9edf2); }

:root[data-theme="dark"] .resv,
:root[data-theme="dark"] .resv-blatt { --resv-zeile: #1b242e; --resv-gedrueckt: #26323f; --resv-trenn: rgba(235, 235, 245, .12); --resv-leise: #98989f; }
:root[data-theme="dark"] .resv-blatt { background: #0f151c; }
:root[data-theme="dark"] .resv-form .resv-gruppe { background: #1b242e; }

/* ------------------------------------------------------------ */
/*  Hinweise wie eine iPad-App (10.10.2026, Lars)                */
/*  Teilt sich Titel, Segmente, Gruppen, Wischzeilen und Blatt   */
/*  mit den Reservierungen (.resv-*). Hier nur, was anders ist:  */
/*  Kreis links (erledigt), Farbe nach Wichtigkeit, Auswahl im   */
/*  Blatt.                                                       */
/* ------------------------------------------------------------ */

.hin .resv-zeile + .resv-zeile .resv-vorne::before { left: 68px; }

.hin-zeile { --hin-farbe: var(--primary); }
.hin-urgent { --hin-farbe: #ff3b30; }
.hin-low { --hin-farbe: #8e8e93; }
.hin-info { --hin-farbe: #0a84ff; }

.hin-zeile .resv-vorne { align-items: flex-start; padding-left: 12px; }
.hin-zeile .resv-pfeil { align-self: center; }

/* Kreis wie bei Erinnerungen: 30 px sichtbar, 48 px antippbar */
.hin-kreis {
  position: relative;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  margin-top: -3px;
  border: none;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.hin-kreis::before {
  content: '';
  position: absolute;
  width: 28px;
  height: 28px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid var(--hin-farbe);
  transition: background .15s;
}
.hin-kreis svg {
  position: relative;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
}
.hin-kreis:active::before { background: color-mix(in srgb, var(--hin-farbe) 22%, transparent); }
.hin-erledigt .hin-kreis::before { background: var(--hin-farbe); }
.hin-erledigt .hin-kreis svg { opacity: 1; }
.hin-erledigt .resv-name { text-decoration: line-through; text-decoration-color: var(--resv-grau); color: var(--resv-leise); }

.hin-zeile .resv-mitte { padding-top: 2px; }
.hin-zeile .resv-name { white-space: normal; }
.hin-note {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--resv-leise);
  white-space: pre-wrap;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Blatt: Wichtigkeit als Segmente ueber die ganze Breite, Kategorie als Chips */
.hin-wicht {
  display: flex;
  gap: 4px;
  margin: 0 16px 16px;
  padding: 3px;
  border-radius: 10px;
  background: rgba(53, 80, 111, .12);
}
.hin-wicht button {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  padding: 0 4px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}
.hin-wicht button.aktiv {
  background: var(--resv-zeile, #fff);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .04);
}
.hin-wicht button[data-prio="urgent"].aktiv { color: #ff3b30; }
#hint-form-modal .resv-chips button { min-width: 0; padding: 0 16px; }

/* ------------------------------------------------------------ */
/*  Dark Mode                                                   */
/*  Der Schalter in den Einstellungen setzt data-theme am <html>.*/
/*  Vorher gab es den Schalter, aber keine einzige dunkle Regel. */
/* ------------------------------------------------------------ */

:root[data-theme="dark"] {
  color-scheme: dark;
  --primary: #5b82ad;
  --primary-dark: #3c5a7c;
  --primary-light: #7aa0c7;
  --primary-pale: #22303d;
  --text: #e6edf4;
  --text-muted: #94a6b8;
  --border: #2b3946;
  --bg: #131a22;
  --white: #1b242e;
  --danger: #f4695a;
  --success: #3ec07a;
  --shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}

/* Die wenigen fest verdrahteten Farben nachziehen */
:root[data-theme="dark"] .card-action:hover,
:root[data-theme="dark"] .mini-btn:hover { background: var(--primary-pale); }
:root[data-theme="dark"] .cal-day.is-holiday { background: #2a2418; }


:root[data-theme="dark"] .app-nav {
  background: rgba(27, 36, 46, .92);
  border-color: rgba(122, 160, 199, .18);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .5);
}

/* Eingabefelder und Auswahllisten */
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
  background: #16202a;
  color: var(--text);
  border-color: var(--border);
}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: #6b7f95; }

/* ------------------------------------------------------------ */
/*  Sync-Status                                                 */
/* ------------------------------------------------------------ */

.sync-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: var(--primary-pale);
  color: var(--text-muted);
  white-space: nowrap;
}

.sync-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
  flex: 0 0 auto;
}

.sync-ok { color: var(--success); background: rgba(39, 174, 96, .12); }
.sync-ok .sync-badge-dot { background: var(--success); }

.sync-syncing { color: var(--primary); background: var(--primary-pale); }
.sync-syncing .sync-badge-dot { background: var(--primary); animation: sync-pulse 1s ease-in-out infinite; }

.sync-offline { color: var(--danger); background: rgba(231, 76, 60, .12); }
.sync-offline .sync-badge-dot { background: var(--danger); }

@keyframes sync-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .3; }
}

/* Noch nicht uebertragen */
.pending-dot {
  color: var(--danger);
  font-size: 10px;
  vertical-align: middle;
}

/* ------------------------------------------------------------ */
/*  Bestaetigungs-Dialog                                        */
/* ------------------------------------------------------------ */

.confirm-text {
  padding: 4px 0 8px;
  color: var(--text);
  line-height: 1.55;
}


/* ------------------------------------------------------------ */
/*  Einstellungen: Kleinteile                                   */
/* ------------------------------------------------------------ */

.eins-mono {
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.eins-note {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted);
  padding: 8px 0;
}

.eins-note strong { color: var(--text); }

.eins-danger-btn:disabled,
.btn-primary:disabled,
.btn-secondary:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* ------------------------------------------------------------ */
/*  Kiosk: kein Markieren, kein Ziehen, kein Pull-to-Refresh    */
/* ------------------------------------------------------------ */

html,
body {
  overscroll-behavior: none;
}

body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Felder auch nicht: getippt wird nur mit den eigenen Tasten (js/tastatur.js, 06.10.2026) –
   Lupe, Einfuegen-Menue und Markieren stoeren am Wandgeraet nur. */
input,
textarea,
select {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Ausnahme Kopplungs-Code (System-Tastatur): in einem Feld mit user-select:none tippt iOS Safari nichts ein */
input[data-system-tastatur] {
  -webkit-user-select: text;
  user-select: text;
}

/* ------------------------------------------------------------ */
/*  Kopplung und "gesperrt"                                     */
/* ------------------------------------------------------------ */

.login-card input.kopplung-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 6px;
  text-align: center;
  text-transform: uppercase;
  padding: 14px 12px;
}

/* Eine App (09.10.2026): nur in der eigenen App sichtbar */
.login-card .kopplung-modus {
  display: block;
  margin: 14px auto 0;
  padding: 10px 14px;
  background: none;
  border: 0;
  color: var(--primary);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.login-card .kopplung-modus.hidden { display: none; }

#screen-gesperrt {
  position: fixed;
  inset: 0;
  z-index: 960;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
}

.gesperrt-inhalt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  padding: 24px;
}

.gesperrt-titel {
  color: #fff;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -.3px;
}

.gesperrt-text {
  color: rgba(255, 255, 255, .6);
  font-size: 17px;
  font-weight: 600;
}

.lock-back-btn {
  color: rgba(255, 255, 255, .7);
  font-size: 15px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 10px;
}

.lock-back-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, .08);
}

/* Gesperrt: nur "Stempeln", keine Reiter */
#screen-app.is-gesperrt .app-nav {
  display: none;
}

#screen-app.is-gesperrt .app-content {
  padding-bottom: calc(20px + var(--sicher-unten));
}

/* ------------------------------------------------------------ */
/*  Stempeln (Startbildschirm)                                  */
/* ------------------------------------------------------------ */

.st-pane {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.st-pane.hidden {
  display: none;
}

.st-panel {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .06);  /* reicht nicht ueber den Inhaltsrand hinaus (sonst harte Kante ueber der schwebenden Leiste) */
  padding: 18px 20px 20px;
  overflow: hidden;
}

/* — Kopf — */
.st-kopf {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.st-kopf-betrieb {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.st-betrieb {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.st-terminal {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
}

.st-kopf-zeit {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.st-uhr {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.5px;
}

.st-datum {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 4px;
}

.st-kopf-knoepfe {
  display: flex;
  gap: 8px;
}

.st-rund-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--white);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s, color .15s;
}

.st-rund-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.st-rund-btn svg {
  width: 20px;
  height: 20px;
}

.st-entsperren {
  display: none;
}

#screen-app.is-gesperrt .st-entsperren {
  display: flex;
  color: var(--primary);
}

#st-vollbild .st-vollbild-aus,
#st-vollbild.is-an .st-vollbild-an {
  display: none;
}

#st-vollbild.is-an .st-vollbild-aus {
  display: block;
}

/* — Inhalt: Querformat zwei Spalten — */
.st-inhalt {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 16px;
}

.st-karte {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 20px;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.st-titel {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  text-align: center;
  letter-spacing: -.2px;
}

/* — Scannen — */
.st-scan {
  align-items: center;
  gap: 14px;
}

.st-qr-rahmen {
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.st-qr-code {
  background: #fff;
  border-radius: 16px;
  padding: 14px;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .2s;
}

/* Kein display hier: qrcodejs schaltet Canvas und <img> selbst um. */
.st-qr-code canvas,
.st-qr-code img {
  max-width: 100%;
  max-height: 100%;
}

.st-qr-platzhalter {
  font-size: 13px;
  color: var(--text-muted);
}

.st-qr-offline {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 600;
  color: var(--text-muted);
}

.st-scan.is-offline .st-qr-code {
  opacity: .12;
}

.st-scan.is-offline .st-qr-offline {
  display: flex;
}

.st-takt {
  width: min(280px, 80%);
  height: 6px;
  border-radius: 3px;
  background: var(--primary-pale);
  overflow: hidden;
  flex-shrink: 0;
}

.st-takt span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 3px;
  background: var(--primary);
  transform-origin: left center;
}

.st-scan.is-offline .st-takt span {
  visibility: hidden;
}

@keyframes st-takt {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* — PIN — */
.st-pin {
  gap: 12px;
}

.st-personen {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  flex-shrink: 0;
  padding: 2px 2px 4px;
  margin: -2px -2px 0;
  scrollbar-width: none;
}

.st-personen::-webkit-scrollbar {
  display: none;
}

.st-person {
  flex: 0 0 auto;
  width: 82px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px 6px;
  border-radius: 16px;
  border: 1.5px solid transparent;
  transition: background .12s, border-color .12s;
}

.st-person:active {
  background: var(--primary-pale);
}

.st-avatar {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--primary-pale);
  color: var(--primary);
  font-size: 17px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.st-person.is-da .st-avatar::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--success);
  border: 2px solid var(--white);
}

.st-person-name {
  max-width: 100%;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.st-person-zeit {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  min-height: 16px;
}

.st-person.is-gewaehlt {
  background: var(--primary-pale);
  border-color: var(--primary);
}

.st-person.is-gewaehlt .st-avatar {
  background: var(--primary);
  color: #fff;
}

.st-person.is-ohne-pin {
  opacity: .45;
}

.st-pin-kopf {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.st-pin-punkte {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 20px;
}

.st-punkt {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--border);
  transition: background .1s, border-color .1s;
}

.st-punkt.is-voll {
  background: var(--primary);
  border-color: var(--primary);
}

.st-tasten {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(52px, 1fr);
  gap: 10px;
}

.st-taste {
  min-height: 52px;
  max-height: 96px;
  border-radius: 18px;
  border: 1.5px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 28px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .1s, transform .08s;
}

.st-taste:active {
  background: var(--primary-pale);
  transform: scale(.97);
}

.st-taste svg {
  width: 30px;
  height: 30px;
}

.st-taste-loeschen {
  color: var(--text-muted);
}

.st-taste-ok {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-size: 20px;
  font-weight: 600;
}

.st-taste-ok:active {
  background: var(--primary-light);
}

.st-taste:disabled {
  opacity: .4;
  cursor: default;
  transform: none;
}

.st-tasten.is-gesperrt .st-taste {
  opacity: .3;
  pointer-events: none;
}

/* — Rueckmeldung — */
.st-ergebnis {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border-radius: 24px;
  animation: st-ein .18s ease-out;
}

.st-ergebnis.hidden {
  display: none;
}

.st-ergebnis.is-weg { opacity: 0; transition: opacity .25s ease-in; pointer-events: none; }

.st-ergebnis.is-fehler { background: #fdeeec; }
.st-ergebnis.is-info   { background: var(--primary-pale); }

@keyframes st-ein {
  from { opacity: 0; transform: scale(.98); }
  to   { opacity: 1; transform: scale(1); }
}

.st-ergebnis-inhalt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.st-ergebnis-symbol {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-bottom: 14px;
}

.st-ergebnis-symbol svg {
  width: 64px;
  height: 64px;
}

/* Bestaetigung im Stil der Worker-App (Variante A, 03.10.2026): weisser Haken zeichnet sich in 0,4 s,
   gross der Name. Seit 09.10.2026 (Wunsch Lars) Schichtwerk-Blau statt Gruen: Kommen helles Blau
   (--primary-light, #4a6d94), „Gehen" Dunkelblau (#243754). Farben fest, auch im Dunkelmodus. */
.st-ergebnis.is-ok        { background: #4a6d94; color: #fff; }
.st-ergebnis.is-ok.is-gehen { background: #243754; }
.is-ok .st-ergebnis-symbol {
  background: none;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .38);
  animation: st-haken-kreis .3s cubic-bezier(.2, .9, .3, 1.2) both;
}
.is-ok .st-ergebnis-symbol svg { width: 76px; height: 76px; }
.is-ok .st-ergebnis-symbol polyline {
  stroke-dasharray: 18;
  stroke-dashoffset: 18;
  animation: st-haken-zug .4s .1s cubic-bezier(.65, 0, .35, 1) forwards;
}
.is-ok .st-ergebnis-titel,
.is-ok .st-ergebnis-text { color: #fff; }
.is-ok .st-ergebnis-titel { font-size: 72px; font-weight: 600; letter-spacing: -1.5px; }
.is-ok .st-ergebnis-text  { color: rgba(255, 255, 255, .88); }
.is-ok .st-ergebnis-zusatz { background: rgba(255, 255, 255, .2); color: #fff; }

@keyframes st-haken-kreis {
  from { opacity: 0; transform: scale(.6); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes st-haken-zug {
  to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .st-ergebnis,
  .is-ok .st-ergebnis-symbol,
  .is-ok .st-ergebnis-symbol polyline { animation: none; stroke-dashoffset: 0; }
}
.is-fehler .st-ergebnis-symbol { background: var(--danger); }
.is-info .st-ergebnis-symbol   { background: var(--primary); }

.st-ergebnis-titel {
  font-size: 56px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.8px;
  color: var(--text);
}

.st-ergebnis-text {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
}

.is-fehler .st-ergebnis-text,
.is-info .st-ergebnis-text {
  font-size: 24px;
  color: var(--text-muted);
}

.st-ergebnis-zusatz {
  margin-top: 10px;
  padding: 6px 16px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  font-size: 17px;
  font-weight: 600;
}

/* — Hochformat: QR oben, PIN darunter — */
@media (orientation: portrait) {
  .st-inhalt {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }

  .st-scan {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: 1fr auto auto auto 1fr;
    column-gap: 24px;
    row-gap: 16px;
    align-items: center;
  }

  .st-scan .st-qr-rahmen {
    grid-column: 1;
    grid-row: 1 / 6;
    width: clamp(200px, 22vh, 340px);
    height: clamp(200px, 22vh, 340px);
    flex: none;
  }

  .st-scan .st-titel {
    grid-column: 2;
    grid-row: 2;
    text-align: left;
  }

  .st-scan .st-takt {
    grid-column: 2;
    grid-row: 3;
  }

  .st-panel {
    gap: 12px;
  }

  .st-inhalt {
    gap: 12px;
  }

  .st-tasten {
    max-width: 520px;
  }

  .st-taste {
    max-height: 104px;
  }
}

/* Kleine oder niedrige Bildschirme */
@media (max-height: 700px) {
  .st-panel { gap: 10px; padding: 14px 16px 16px; }
  .st-uhr { font-size: 32px; }
  .st-karte { padding: 14px; }
  .st-titel { font-size: 17px; }
  .st-avatar { width: 44px; height: 44px; font-size: 15px; }
  .st-taste { font-size: 24px; border-radius: 14px; }
  .st-ergebnis-titel { font-size: 40px; }
  .st-ergebnis-text { font-size: 24px; }
  .is-ok .st-ergebnis-titel { font-size: 56px; }
}

@media (max-width: 600px) {
  .st-kopf-zeit .st-datum { display: none; }
  .st-scan { grid-template-columns: minmax(0, 1fr); }
}

/* — Offline-Zeichen im Kopf (Paket g): Stempel, die noch nachgesendet werden — */
.st-offline {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.st-offline svg {
  width: 18px;
  height: 18px;
}

/* — Wege (Paket g): nur zeigen, was der Betrieb an hat — */
.st-leer {
  display: none;
  align-items: center;
  justify-content: center;
}

.weg-keiner .st-leer { display: flex; }
.weg-keiner .st-scan,
.weg-ohne-pin .st-pin,
.weg-ohne-qr .st-scan,
.weg-ohne-qr .st-qr-titel,
.weg-ohne-qr .st-qr-rahmen,
.weg-ohne-qr .st-takt {
  display: none;
}

.weg-keiner .st-leer .st-titel {
  color: var(--text-muted);
}

/* Nur eine Karte: eine Spalte, Inhalt mittig, nicht auf volle Breite gezogen */
.weg-eine-karte .st-inhalt,
.weg-keiner .st-inhalt {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}

.weg-eine-karte .st-pin,
.weg-eine-karte .st-scan {
  justify-self: center;
  width: min(100%, 640px);
}

.weg-eine-karte .st-scan {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.weg-eine-karte .st-scan .st-qr-rahmen {
  width: 100%;
  height: auto;
  flex: 1;
}

.weg-eine-karte .st-scan .st-titel { text-align: center; }

/* — Offline: Kommen oder Gehen? — */
.st-frage {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .97);
  animation: st-ein .18s ease-out;
}

.st-frage.hidden { display: none; }

.st-frage-inhalt {
  width: min(100%, 560px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.st-frage-titel {
  display: inline-flex;
  padding: 6px 16px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  font-size: 17px;
  font-weight: 600;
}

.st-frage-knoepfe {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.st-frage-knopf {
  min-height: 140px;
  border-radius: 22px;
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  transition: transform .08s, filter .12s;
}

.st-frage-knopf:active { transform: scale(.97); }
.st-frage-knopf.is-kommen { background: #4a6d94; }   /* wie die Bestaetigung: Kommen hellblau, Gehen dunkelblau */
.st-frage-knopf.is-gehen  { background: #243754; }

/* Pause: wie die Worker-App im Starter-Tarif (timer-status, timer-display, timer-btn-reihe), nur groesser fuers Tablet */
.st-pause .st-frage-inhalt { gap: 0; }
.st-pause .st-frage-titel { background: var(--primary-pale); color: var(--primary); margin-bottom: 26px; }
.st-pause-status {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 19px; font-weight: 600; color: var(--primary);
}
.st-pause-status.is-pause { color: #D97706; }
.st-pause-punkt {
  width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0;
  background: currentColor;
  animation: st-pause-puls 1.4s ease-in-out infinite;
}
@keyframes st-pause-puls { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.st-pause-uhr {
  margin: 18px 0 8px;
  font-size: 92px; font-weight: 500; line-height: 1; letter-spacing: -2px;
  color: var(--primary); font-variant-numeric: tabular-nums;
}
.st-pause-text { min-height: 22px; margin-bottom: 30px; font-size: 18px; color: var(--text-muted); text-align: center; }
.st-pause-reihe { display: flex; gap: 14px; width: 100%; }
.st-pause-btn {
  flex: 1; min-height: 104px; padding: 18px 12px;
  border: none; border-radius: 22px;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-size: 27px; font-weight: 700; letter-spacing: .2px; color: #fff;
  background: linear-gradient(135deg, var(--primary-light), var(--primary));
  box-shadow: 0 8px 24px rgba(53, 80, 111, .32);
  transition: transform .08s, filter .12s;
}
.st-pause-btn:active { transform: scale(.97); }
.st-pause-btn.hidden { display: none; }
.st-pause-btn.is-zweit { flex: 0 0 34%; background: var(--primary-pale); color: var(--primary); box-shadow: none; font-size: 22px; }
.st-pause-zeichen { font-size: 20px; }
.st-pause .st-frage-abbrechen { margin-top: 22px; }
.geraet-desktop .st-pause-btn:hover { filter: brightness(1.06); }
:root[data-theme="dark"] .st-pause-btn.is-zweit { background: #1F2937; color: #E5E7EB; }

/* Ausstempeln vergessen (Idee B, 15.10.2026): Uhrzeit mit Knöpfen wählen, keine Systemtastatur */
.st-vergessen .st-frage-titel { margin-bottom: 18px; }
.st-vergessen-frage { font-size: 30px; font-weight: 700; color: var(--text); text-align: center; text-wrap: balance; }
.st-vergessen .st-pause-text { margin: 8px 0 22px; }
.st-vergessen-wahl {
  width: 100%; margin-bottom: 30px;
  display: grid; grid-template-columns: 1fr 1fr minmax(0, 1.6fr) 1fr 1fr; align-items: center; gap: 10px;
}
.st-vergessen-schritt {
  min-height: 72px; border-radius: 18px;
  font-size: 20px; font-weight: 700; color: var(--primary); background: var(--primary-pale);
  font-variant-numeric: tabular-nums; transition: transform .08s;
}
.st-vergessen-schritt:active { transform: scale(.95); }
.st-vergessen-schritt:disabled { opacity: .35; }
.st-vergessen-zeit { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.st-vergessen-uhr {
  font-size: 64px; font-weight: 500; line-height: 1; letter-spacing: -1.5px;
  color: var(--primary); font-variant-numeric: tabular-nums;
}
.st-vergessen-tag { margin-top: 6px; font-size: 16px; font-weight: 600; color: var(--text-muted); }
.st-vergessen .st-pause-btn { font-size: 24px; }
.st-vergessen .st-pause-btn.is-zweit { font-size: 19px; }
.geraet-desktop .st-vergessen-schritt:hover { filter: brightness(.97); }
:root[data-theme="dark"] .st-vergessen-schritt { background: #1F2937; color: #E5E7EB; }
@media (max-width: 600px) {
  .st-vergessen-wahl { grid-template-columns: 1fr 1fr; }
  .st-vergessen-zeit { grid-column: 1 / -1; grid-row: 1; }
  .st-vergessen-frage { font-size: 24px; }
  .st-vergessen-wahl { margin-bottom: 22px; }
  .st-vergessen-schritt { min-height: 60px; }
  /* Speichern oben, volle Breite; „Ich arbeite noch“ darunter */
  .st-vergessen .st-pause-reihe { flex-direction: column-reverse; gap: 10px; }
  .st-vergessen .st-pause-btn, .st-vergessen .st-pause-btn.is-zweit { flex: none; min-height: 68px; }
}

.st-frage-abbrechen {
  padding: 10px 20px;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 600;
  color: var(--text-muted);
}

/* ------------------------------------------------------------ */
/*  Geraete-Varianten (02.10.2026). Die Klasse setzt js/geraet.js */
/*  vor dem Zeichnen. iPad (geraet-ipad) = Grundregeln oben,      */
/*  unveraendert. Hier nur Tablet (Finger) und Desktop (Maus).    */
/* ------------------------------------------------------------ */

/* — Tablet (Android, Windows im Tablet-Modus): Systemleisten, kein Hover — */
.geraet-tablet .app-content {
  padding-left: max(20px, var(--sicher-links));
  padding-right: max(20px, var(--sicher-rechts));
}

.geraet-tablet .st-rund-btn:hover,
.geraet-tablet .app-nav-btn:hover {
  border-color: var(--border);
  background: none;
  color: inherit;
}

.geraet-tablet .app-nav-btn.active:hover {
  background: var(--primary);
  color: #fff;
}

/* Kleine Tablets quer (z. B. 1024×600): Tasten etwas flacher, Kacheln kleiner */
@media (orientation: landscape) and (max-height: 640px) {
  .geraet-tablet .st-person { width: 70px; padding: 4px 2px; }
  .geraet-tablet .st-avatar { width: 40px; height: 40px; font-size: 15px; }
  .geraet-tablet .st-person-zeit { display: none; }
  .geraet-tablet .st-taste { min-height: 48px; }
  .geraet-tablet .st-tasten { grid-auto-rows: minmax(48px, 1fr); gap: 8px; }
}

/* — Desktop (Maus): begrenzte Breite, kompakte Tasten, Hover — */
.geraet-desktop .st-panel {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}

.geraet-desktop .st-pin {
  justify-content: center;
}

.geraet-desktop .st-tasten {
  flex: 0 0 auto;
  max-width: 400px;
  grid-auto-rows: 64px;
}

.geraet-desktop .st-taste {
  min-height: 0;
  font-size: 24px;
  border-radius: 14px;
  transition: background .1s, border-color .1s, transform .08s;
}

.geraet-desktop .st-taste:hover:not(:disabled) {
  border-color: var(--primary-light);
  background: var(--primary-pale);
}

.geraet-desktop .st-taste-ok:hover:not(:disabled) {
  background: var(--primary-light);
  border-color: var(--primary-light);
}

.geraet-desktop .st-person {
  cursor: pointer;
}

.geraet-desktop .st-person:hover {
  background: var(--primary-pale);
}

.geraet-desktop .st-frage-knopf:hover { filter: brightness(1.08); }

.geraet-desktop .app-nav {
  width: min(680px, calc(100% - 40px));
}

.geraet-desktop .app-nav-btn {
  padding: 9px 10px;
}

/* Niedrige Bildschirme (1366×768 und kleiner): alles etwas flacher */
@media (max-height: 800px) {
  .geraet-desktop .st-tasten { grid-auto-rows: 56px; gap: 8px; }
  /* Die Leiste steht unter dem Inhalt: unten nur Abstand, sonst bleibt am PC eine Luecke (11.10.2026) */
  .geraet-desktop .app-content { padding-bottom: 14px; padding-top: 16px; }
}

/* Eigene App: Vollbild macht die App selbst */
.ist-nativ #st-vollbild { display: none; }

.eins-kiosk-wert.is-an  { color: var(--success); font-weight: 600; }
.eins-kiosk-wert.is-aus { color: var(--danger);  font-weight: 600; }

/* — Dunkel — */
:root[data-theme="dark"] .st-panel {
  background: rgba(27, 36, 46, .92);
}

:root[data-theme="dark"] .st-ergebnis.is-fehler { background: #2d1b1b; }
:root[data-theme="dark"] .st-ergebnis:not(.is-ok) .st-ergebnis-zusatz { background: #3a2e12; color: #fcd34d; }
:root[data-theme="dark"] .st-frage              { background: rgba(27, 36, 46, .97); }
:root[data-theme="dark"] .st-offline,
:root[data-theme="dark"] .st-frage-titel        { background: #3a2e12; color: #fcd34d; }

/* ============================================================ */
/*  iPad-App: eigene Tasten, sichere Raender (06.10.2026)       */
/*  Die System-Tastatur geht nie auf (js/tastatur.js). Alle     */
/*  Felder sind readonly; getippt wird auf diesen Tasten.       */
/* ============================================================ */

/* Optik wie main/live (06.10.2026): die Tasten sehen aus wie das Stempel-Ziffernfeld
   (.st-taste), aktive Felder wie ein fokussiertes Feld in main. Kein eigenes Design. */

/* — Felder: sehen aus wie Felder, nehmen aber nie den Fokus — */
.tt-feld {
  cursor: pointer;
  caret-color: transparent;
}

/* wie :focus in main */
.tt-feld.tt-aktiv {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(53, 80, 111, .08) !important;
}

/* Vorbelegte Zahl: die erste Taste ersetzt den Wert (wie markiert) */
.tt-feld.tt-markiert {
  background: var(--primary-pale) !important;
}

/* Sperrbildschirm: wie .lock-pin-input:focus in main */
.lock-pin-input.tt-aktiv {
  border-color: rgba(255, 255, 255, .6) !important;
  background: rgba(255, 255, 255, .14);
  box-shadow: none !important;
}

.modal-card .lock-pin-input.tt-aktiv,
.eins-pin-setup .lock-pin-input.tt-aktiv {
  border-color: var(--primary) !important;
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(53, 80, 111, .12) !important;
}

/* — Eine Taste: wie .st-taste — */
.tt-taste {
  min-width: 0;
  min-height: 60px;
  border-radius: 18px;
  border: 1.5px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 28px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  transition: background .1s, transform .08s;
}

.tt-taste:active {
  background: var(--primary-pale);
  transform: scale(.97);
}

.tt-taste svg {
  width: 30px;
  height: 30px;
}

.tt-taste-loeschen {
  color: var(--text-muted);
}

.tt-taste-ok {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-size: 20px;
  font-weight: 600;
}

.tt-taste-ok:active {
  background: var(--primary-light);
}

.tt-luecke {
  flex: 1 1 0;
}

/* — Ziffernfeld 3 x 4 (Sperre, PIN-Abfrage, Blatt) — */
.tt-ziffern {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 60px;
  gap: 10px;
  width: 100%;
  max-width: 300px;
}

/* — Codefeld der Kopplung: 8 Spalten, letzte Reihe Loeschen + Koppeln — */
.tt-code {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-auto-rows: 60px;
  gap: 8px;
  width: 100%;
}

.tt-code .tt-taste {
  font-size: 24px;
  border-radius: 14px;
}

.tt-code .tt-taste-loeschen {
  grid-column: span 2;
}

.tt-code .tt-taste-ok,
.tt-code .btn-primary {
  grid-column: span 6;
}

/* — Tastenblatt unten (Text, Zahlen, Code) — */
.tt-blatt {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1200;
  background: var(--white);
  border-top: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 10px calc(10px + var(--sicher-rechts)) calc(10px + var(--sicher-unten)) calc(10px + var(--sicher-links));
  display: flex;
  justify-content: center;
}

.tt-blatt .tt-taste {
  border-radius: 14px;
}

.tt-blatt .tt-taste-fn {
  color: var(--text-muted);
  font-size: 20px;
}

.tt-blatt .tt-taste-fn.is-an,
.tt-blatt .tt-taste-fn.is-fest {
  background: var(--primary-pale);
  border-color: var(--primary);
  color: var(--primary);
}

.tt-blatt .tt-ziffern {
  max-width: 420px;
  gap: 8px;
}

.tt-blatt .tt-code {
  max-width: 760px;
}

.tt-text {
  width: 100%;
  max-width: 1100px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tt-reihe {
  display: flex;
  gap: 7px;
}

.tt-reihe .tt-taste {
  flex: 1 1 0;
  min-height: 62px;
  font-size: 24px;
  font-weight: 500;
}

.tt-taste-leer {
  font-size: 0;
}

/* Hochformat: 12,5 Tastenbreiten pro Reihe – mit schmalen Fugen bleibt jede Taste ueber 60 px */
@media (orientation: portrait) {
  .tt-blatt-text {
    padding-left: calc(4px + var(--sicher-links));
    padding-right: calc(4px + var(--sicher-rechts));
  }
  .tt-reihe { gap: 4px; }
  .tt-text { gap: 7px; }
}

/* Blatt offen: Inhalt bekommt unten Platz, damit das Feld sichtbar bleibt */
.tt-offen .app-content {
  padding-bottom: calc(var(--tastatur-hoehe) + 24px);
}

.tt-offen .app-nav {
  display: none; /* Leiste steht im Fluss: weg, sonst fehlt dem Inhalt Platz */
}

.tt-offen .modal-overlay {
  align-items: flex-start;
  padding-top: calc(16px + var(--sicher-oben));
  padding-bottom: calc(var(--tastatur-hoehe) + 16px);
}

.tt-offen .modal-card {
  max-height: 100%;
}

/* — Sichere Raender auf den Vollbild-Seiten (bei 0 px wie main) — */
#screen-kopplung,
#screen-lock,
#screen-gesperrt {
  padding: var(--sicher-oben) var(--sicher-rechts) var(--sicher-unten) var(--sicher-links);
}

.modal-overlay {
  padding-top: calc(20px + var(--sicher-oben));
  padding-bottom: calc(20px + var(--sicher-unten));
}

/* Als Home-Bildschirm-App ist schon Vollbild: der Knopf waere sinnlos */
.ist-standalone #st-vollbild {
  display: none;
}

/* — Kopplung mit System-Tastatur (09.10.2026): Bildschirm scrollt, Karte bleibt immer erreichbar,
     bei offener Tastatur schrumpft er auf den sichtbaren Bereich (--vv-oben/--vv-hoehe aus auth.js) — */
#screen-kopplung {
  align-items: flex-start;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
#screen-kopplung .login-bg-shapes {
  position: fixed;
}
#screen-kopplung .login-wrapper {
  margin: auto 0;
  padding-top: 12px;
  padding-bottom: 12px;
}
html.sys-tastatur #screen-kopplung {
  inset: auto;
  top: var(--vv-oben, 0px);
  left: 0;
  right: 0;
  height: var(--vv-hoehe, 100%);
  padding-bottom: 0;
}
html.sys-tastatur #screen-kopplung .login-brand {
  display: none;
}
.kopplung-karte #kopplung-tasten {
  display: block;
}
.kopplung-karte #kopplung-tasten .btn-primary {
  width: 100%;
}

/* — Kopplung: Karte wie main — */
.login-wrapper:has(.kopplung-karte) {
  max-width: 656px;
}

.kopplung-karte {
  max-width: 616px;
}

.kopplung-karte .login-field {
  margin-bottom: 16px;
}

/* — Sperrbildschirm: wie main untereinander, Ziffernfeld vor „Entsperren“ — */
.lock-tasten.tt-ziffern {
  margin: 4px 0;
}

/* Quer auf dem iPad (ab ~776 px Hoehe frei) passt alles nur mit etwas engeren Abstaenden */
@media (max-height: 900px) {
  #screen-lock .lock-wrapper {
    gap: 10px;
  }
  #screen-lock .lock-icon-ring {
    width: 72px;
    height: 72px;
  }
  #screen-lock .lock-clock {
    margin-top: 4px;
  }
  .kopplung-karte {
    padding-top: 28px;
    padding-bottom: 28px;
  }
  .kopplung-karte .login-logo {
    margin-bottom: 18px;
  }
}

/* — PIN-Abfrage vor den Einstellungen: Ziffernfeld unter den Kaestchen — */
.pin-check-tasten.tt-ziffern {
  margin: 16px auto 0;
}

/* ------------------------------------------------------------ */
/*  Ueberholte Aenderungen (js/konflikt.js, 10.10.2026)         */
/* ------------------------------------------------------------ */

.konflikt-banner {
  position: fixed;
  top: calc(var(--sicher-oben) + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 260;
  max-width: calc(100vw - 24px);
  padding: 10px 18px;
  border: 1px solid var(--danger);
  border-radius: 999px;
  background: var(--white);
  color: var(--danger);
  font: 600 14px/1.2 var(--font);
  box-shadow: var(--shadow);
  cursor: pointer;
}
.konflikt-banner.hidden { display: none; }

.konflikt-eintrag {
  padding: 12px 0;
  border-top: 1px solid var(--border);
}
.konflikt-eintrag:first-child { border-top: none; }
.konflikt-art {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.konflikt-fassung {
  padding: 8px 10px;
  margin-bottom: 6px;
  border-radius: var(--radius-sm);
  background: var(--primary-pale);
  color: var(--text);
  font-size: 14px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.konflikt-meine { border-left: 3px solid var(--danger); }
.konflikt-kopf {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.konflikt-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

/* Rueckfrage/Hinweis ueber ALLEN Vollbild-Seiten (auch ueber der Kopplung):
   „Als Terminal koppeln?" erscheint, bevor die App gestartet ist (eine-app-web, 10.10.2026) */
#confirm-modal {
  z-index: 1100;
}

/* ------------------------------------------------------------ */
/*  27. Dashboard wie eine iPad-App (11.10.2026, Lars)           */
/*  Gleiche Sprache wie Reservierungen, Hinweise und Kalender:   */
/*  grosser Tagestitel, Wochenstreifen als weisse Flaeche, darunter */
/*  Tagesplan und Schichten als Listen. Quer nebeneinander, hoch */
/*  untereinander.                                               */
/* ------------------------------------------------------------ */

#tab-dashboard {
  display: flex;
  flex-direction: column;
  height: 100%;
}
#tab-dashboard.hidden { display: none !important; }

#screen-app[data-reiter="dashboard"],
#screen-app[data-reiter="dashboard"] .app-content { background: var(--bg); }
:root[data-theme="dark"] #screen-app[data-reiter="dashboard"],
:root[data-theme="dark"] #screen-app[data-reiter="dashboard"] .app-content { background: var(--bg); }

/* Kopf: Sync-Stand und Sperre sitzen neben dem Plus */
.dash .sync-badge,
.dash .dash-lock-btn { align-self: center; }
.dash .sync-badge { padding: 6px 12px; font-size: 13px; }
.dash-lock-btn {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: rgba(53, 80, 111, .12);
  color: var(--primary);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .12s;
}
.dash-lock-btn.hidden { display: none; }
.dash-lock-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dash-lock-btn:active { background: rgba(53, 80, 111, .26); }

/* Wochenstreifen: eine weisse Flaeche, sieben Tage */
/* Heute | Morgen */
.dash .resv-segment { flex-shrink: 0; margin-bottom: 14px; }

/* Drei Kacheln: Im Haus, Reservierungen, Hinweise (tippen = in den Reiter) */
.dash-kacheln {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.dash-kachel {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  padding: 14px 16px 13px;
  border: none;
  border-radius: 12px;
  background: var(--resv-zeile);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.dash-kachel:active { background: var(--resv-trenn, #e5e5ea); }
.dash-kachel-label {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--resv-leise);
}
.dash-kachel-zahl {
  font-size: 40px;
  line-height: 1.1;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.5px;
}
.dash-kachel-zahl small {
  margin-left: 8px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--resv-leise);
}
.dash-kachel-unter {
  font-size: 15px;
  color: var(--resv-leise);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Eingeteilte und Reservierungen: quer nebeneinander, jede Spalte scrollt fuer sich */
.dash-spalten {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding-bottom: 12px;
}
.dash-spalte {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 900px), (orientation: portrait) {
  .dash-spalten {
    display: flex;
    flex-direction: column;
    gap: 22px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .dash-spalte { flex: 0 0 auto; overflow: visible; }
}

/* Nur ansehen: keine Wischzeile, kein Antippen-Grau */
.dash .resv-fest .resv-vorne { cursor: default; padding-right: 20px; }
.dash .resv-fest .resv-vorne:active { background: var(--resv-zeile); }

.dash-leer {
  padding: 26px 16px;
  border-radius: 12px;
  background: var(--resv-zeile);
  text-align: center;
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}
.dash-leer span {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  font-weight: 400;
  color: var(--resv-leise);
}

/* Schicht: Beginn gross, "bis ..." klein darunter, Stand als Etikett */
.shift-row .resv-zeit { width: 64px; font-size: 19px; color: var(--text); }
.shift-row .resv-zeit small {
  display: block;
  margin-top: 1px;
  font-size: 12px;
  font-weight: 400;
  color: var(--resv-leise);
}
.shift-row.is-active .resv-zeit { color: var(--primary); }
.shift-row.is-done .resv-zeit,
.shift-row.is-done .resv-mitte,
.shift-row.is-done .shift-pill { opacity: .5; }
.shift-row.is-open .shift-name { font-style: italic; font-weight: 500; color: var(--resv-leise); }
.shift-pill {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  background: rgba(53, 80, 111, .14);
  color: var(--resv-leise);
}
.shift-pill.shift-active { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); }
:root[data-theme="dark"] .shift-row.is-active .resv-zeit { color: #7aa0c7; }
:root[data-theme="dark"] .shift-pill.shift-active { background: rgba(122, 160, 199, .20); color: #9db9d8; }

@media (hover: hover) {
  .dash .resv-fest .resv-vorne:hover { background: var(--resv-zeile); }
  .dash-lock-btn:hover { background: rgba(53, 80, 111, .2); }
}

/* Dashboard ohne Gruen (11.10.2026, Lars): Reservierung und Aktiv in der Hausfarbe, Sync-Stand ruhig grau */
.dash .kal-t-reservierung { --kal-farbe: var(--primary); }
:root[data-theme="dark"] .dash .kal-t-reservierung { --kal-farbe: #7aa0c7; }
.dash .sync-badge.sync-ok { background: transparent; color: var(--resv-leise, #6e6e73); }
.dash .sync-ok .sync-badge-dot { background: var(--resv-grau, #94a3b8); }

/* Heute (11.10.2026): "Nicht da" nur als Umriss in der Hausfarbe, Vergangenes tritt zurueck */
.shift-pill.shift-spaet { background: transparent; box-shadow: inset 0 0 0 1.5px var(--primary); color: var(--primary); }
:root[data-theme="dark"] .shift-pill.shift-spaet { box-shadow: inset 0 0 0 1.5px #7aa0c7; color: #9db9d8; }
.dash .is-vorbei .resv-zeit,
.dash .is-vorbei .resv-mitte,
.dash .is-vorbei .kal-art { opacity: .5; }

/* ------------------------------------------------------------ */
/*  Schichtwerk-Look statt iPad-Grau (11.10.2026, Wunsch Lars)  */
/*  Wie Stempeln: Hintergrund --bg, darauf EINE grosse weisse   */
/*  Flaeche (Panel), darin die Karten in --bg mit feinem Rand.  */
/* ------------------------------------------------------------ */
.resv {
  --resv-zeile: var(--bg);
  --resv-gedrueckt: var(--primary-pale);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
  padding: 18px 20px 20px;
  overflow: hidden;
}
:root[data-theme="dark"] .resv { --resv-zeile: var(--bg); --resv-gedrueckt: var(--primary-pale); }
.resv-gruppe,
.kal-monat,
.dash-kachel,
.dash-leer {
  border: 1px solid var(--border);
}
.dash-kachel:active { background: var(--primary-pale); }
.resv-segment button.aktiv { background: var(--white); }
@media (hover: hover) {
  .resv-vorne:hover { background: var(--primary-pale); }
}

/* ------------------------------------------------------------ */
/*  Feinschliff Heute (11.10.2026): Kachel-Abstand,              */
/*  nur Hausfarbe (Lars: nicht so viele Farben), ruhiges Einblenden */
/* ------------------------------------------------------------ */
.dash-kachel { gap: 4px; padding: 14px 16px 14px; }

.resv-tag-kopf { font-weight: 600; letter-spacing: .6px; }

@keyframes resv-ein { from { opacity: 0; } to { opacity: 1; } }
.tab-pane:not(.hidden) > .resv { animation: resv-ein .2s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .tab-pane:not(.hidden) > .resv { animation: none; }
}

/* ------------------------------------------------------------ */
/*  Heute: weniger Rahmen (11.10.2026): Listen liegen direkt auf */
/*  der weissen Flaeche, nur die drei Kacheln bleiben Kaesten    */
/* ------------------------------------------------------------ */
:root .resv.dash,
:root[data-theme="dark"] .resv.dash { --resv-zeile: var(--white); }
.resv.dash .resv-gruppe { border: 0; border-radius: 0; background: transparent; }
.resv.dash .dash-kachel,
.resv.dash .dash-leer { border-color: transparent; background: var(--bg); }
.resv.dash .dash-kachel:active { background: var(--primary-pale); }
.resv.dash .resv-tag-kopf { padding-left: 4px; padding-right: 4px; }

/* ------------------------------------------------------------ */
/*  Heute im Admin-Look (11.10.2026, Wunsch Lars: naeher an dem  */
/*  Admin). Wie dort: Seite mit sanftem Blau-Verlauf, darauf     */
/*  weisse Karten (Radius 18, feiner Schatten), Kopfzeile mit    */
/*  Haarlinie, Zeiten und Namen fett in Hausblau, kleine         */
/*  Etiketten in Grau. Nur Hausfarbe. Fuer den Finger groesser.  */
/* ------------------------------------------------------------ */
:root {
  --dash-grund: linear-gradient(160deg, #eef3f7 0%, #dce5ed 100%);
  --dash-karte: #ffffff;
  --dash-rand: rgba(255, 255, 255, .6);
  --dash-linie: rgba(0, 0, 0, .07);
  --dash-schatten: 0 2px 12px rgba(0, 0, 0, .06);
}
:root[data-theme="dark"] {
  --dash-grund: var(--bg);
  --dash-karte: var(--white);
  --dash-rand: var(--border);
  --dash-linie: rgba(255, 255, 255, .08);
  --dash-schatten: none;
}
#screen-app[data-reiter="dashboard"] { background: #e5ecf2; }
#screen-app[data-reiter="dashboard"] .app-content { background: var(--dash-grund); }

/* Keine grosse Flaeche mehr: die Karten liegen direkt auf der Seite */
:root .resv.dash,
:root[data-theme="dark"] .resv.dash { --resv-zeile: transparent; }
.resv.dash {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0 2px;
  overflow: visible;
}

/* Kopf: Pille mit Tag, Datum daneben, Heute|Morgen, Sync, Plus */
.resv.dash .resv-kopf { align-items: center; flex-wrap: wrap; gap: 12px 14px; padding: 2px 2px 16px; }
.resv.dash .resv-kopf-text { flex: 1 1 auto; display: flex; align-items: center; gap: 14px; min-width: 0; }
.resv.dash .resv-titel {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 24px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.2px;
  white-space: nowrap;
}
.resv.dash .resv-unter {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.resv.dash .resv-segment { margin: 0; }

/* Drei Kacheln: je eine kleine Karte, Zahl gross, Name klein, Zusatz darunter */
.resv.dash .dash-kacheln { gap: 14px; margin-bottom: 14px; }
.resv.dash .dash-kachel {
  align-items: center;
  text-align: center;
  gap: 2px;
  padding: 14px 10px 12px;
  border: 1px solid var(--dash-rand);
  border-radius: 18px;
  background: var(--dash-karte);
  box-shadow: var(--dash-schatten);
}
.resv.dash .dash-kachel:active { background: var(--primary-pale); }
.resv.dash .dash-kachel-zahl { order: 1; font-size: 34px; font-weight: 800; letter-spacing: 0; color: var(--primary); }
.resv.dash .dash-kachel-zahl small { margin-left: 6px; font-size: 16px; font-weight: 600; color: var(--text-muted); }
.resv.dash .dash-kachel-label { order: 2; font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text-muted); }
.resv.dash .dash-kachel-unter { order: 3; font-size: 13px; font-weight: 600; color: var(--text-muted); text-align: center; }

/* Zwei Karten: Eingeteilt | Reservierungen und Termine */
.resv.dash .dash-spalten { gap: 14px; padding-bottom: 2px; }
.resv.dash .dash-spalte {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--dash-rand);
  border-radius: 18px;
  background: var(--dash-karte);
  box-shadow: var(--dash-schatten);
}
.resv.dash .dash-spalte > .resv-tag-kopf {
  flex-shrink: 0;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid var(--dash-linie);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .3px;
  text-transform: none;
  color: var(--primary);
}
.resv.dash .dash-spalte > .resv-tag-kopf span + span { font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--text-muted); }
.resv.dash .dash-spalte > div:not(.resv-tag-kopf) {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 20px 6px;
}
@media (max-width: 900px), (orientation: portrait) {
  .resv.dash .dash-spalte,
  .resv.dash .dash-spalte > div:not(.resv-tag-kopf) { overflow: visible; }
}

/* Zeilen: Zeit und Name fett in Hausblau, Haarlinie dazwischen */
.resv.dash .resv-vorne { gap: 14px; min-height: 64px; padding: 12px 0; }
.dash .resv-fest .resv-vorne { padding-right: 0; }
.resv.dash .resv-zeile + .resv-zeile .resv-vorne::before { left: 0; border-top: 1px solid var(--border); }
.resv.dash .resv-zeit,
.resv.dash .shift-row .resv-zeit { width: 60px; font-size: 17px; font-weight: 700; color: var(--primary); }
.resv.dash .resv-zeit small { font-weight: 600; color: var(--text-muted); }
.resv.dash .resv-name { font-size: 17px; font-weight: 700; color: var(--primary); }
.resv.dash .resv-info { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.resv.dash .kal-art {
  padding: 0;
  background: transparent;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.resv.dash .dash-leer {
  margin: 14px 0 12px;
  padding: 22px 14px;
  border: 0;
  border-radius: 14px;
  background: var(--primary-pale);
}
.resv.dash .dash-leer { font-weight: 700; color: var(--primary); }
.resv.dash .dash-leer span { font-weight: 600; color: var(--text-muted); }

/* ------------------------------------------------------------ */
/*  Admin-Look auch in Kalender, Reservierungen, Hinweise        */
/*  (11.10.2026, Lars: "ja zieh das nach"). Gleiche Bausteine    */
/*  wie Heute: Verlauf-Seite, weisse Karten, Pille, Haarlinien.  */
/*  Zeilen bleiben deckend weiss (Wischen legt Knoepfe dahinter) */
/* ------------------------------------------------------------ */
#screen-app[data-reiter="kalender"],
#screen-app[data-reiter="reservierungen"],
#screen-app[data-reiter="hinweise"] { background: #e5ecf2; }
#screen-app[data-reiter="kalender"] .app-content,
#screen-app[data-reiter="reservierungen"] .app-content,
#screen-app[data-reiter="hinweise"] .app-content { background: var(--dash-grund); }

:root .resv,
:root[data-theme="dark"] .resv { --resv-zeile: var(--dash-karte); --resv-gedrueckt: var(--primary-pale); }
.resv {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0 2px;
  overflow: visible;
}

/* Kopf: Pille, Untertitel, Segment, Knoepfe in einer Reihe */
.resv .resv-kopf { align-items: center; flex-wrap: wrap; gap: 12px 14px; padding: 2px 2px 16px; }
.resv .resv-kopf-text { flex: 1 1 auto; display: flex; align-items: center; gap: 14px; min-width: 0; }
.resv .resv-titel {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 24px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.2px;
  white-space: nowrap;
}
.resv .resv-unter {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.resv .resv-segment { margin: 0; flex-shrink: 0; }
.resv .kal-nav { flex-shrink: 0; }

/* Je Tag / je Wichtigkeit eine Karte mit Kopfzeile und Haarlinie */
.resv .resv-tag {
  margin-bottom: 14px;
  overflow: hidden;
  border: 1px solid var(--dash-rand);
  border-radius: 18px;
  background: var(--dash-karte);
  box-shadow: var(--dash-schatten);
}
.resv .resv-tag-kopf {
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid var(--dash-linie);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .3px;
  text-transform: none;
  color: var(--primary);
}
.resv .resv-tag-kopf span + span { font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--text-muted); }
.resv .resv-gruppe { border: 0; border-radius: 0; background: transparent; }
.resv .resv-trenner { margin: 20px 4px 10px; font-size: 14px; font-weight: 800; color: var(--text-muted); }
.resv .resv-leer { margin: 0; padding: 28px 16px; font-size: 17px; font-weight: 700; color: var(--primary); }
.resv .resv-leer span { font-weight: 600; color: var(--text-muted); }
.resv .resv-liste > .resv-leer {
  margin-top: 4px;
  border: 1px solid var(--dash-rand);
  border-radius: 18px;
  background: var(--dash-karte);
  box-shadow: var(--dash-schatten);
}

/* Zeilen: Zeit und Name fett in Hausblau, Haarlinie eingerueckt */
.resv .resv-vorne { gap: 14px; min-height: 64px; padding: 12px 20px; }
.resv .resv-zeile + .resv-zeile .resv-vorne::before { left: 20px; right: 20px; border-top: 1px solid var(--border); }
.resv .resv-zeit { width: 60px; font-size: 17px; font-weight: 700; color: var(--primary); }
.resv .resv-zeit small { font-weight: 600; color: var(--text-muted); }
.resv .resv-name { font-size: 17px; font-weight: 700; color: var(--primary); }
.resv .resv-info { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.resv .resv-pers { font-size: 13px; font-weight: 700; }
.resv .kal-art {
  padding: 0;
  background: transparent;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.resv .kal-herkunft { font-size: 12px; font-weight: 700; }
.resv .kal-zeile .resv-zeit { color: var(--primary); font-size: 17px; }
.resv .kal-zeile .resv-zeit.kal-ganztags { font-size: 13px; font-weight: 700; }
.resv .kal-zeile .resv-zeit small { font-size: 12px; }

/* Nur Hausfarbe: Arten unterscheiden sich durch Text, nicht durch Farbe */
.kal-t-termin, .kal-t-veranstaltung, .kal-t-reservierung, .kal-t-holiday { --kal-farbe: var(--primary); }
.kal-t-intern, .kal-t-sonstiges { --kal-farbe: #6b7f95; }
:root[data-theme="dark"] .kal-t-termin,
:root[data-theme="dark"] .kal-t-veranstaltung,
:root[data-theme="dark"] .kal-t-reservierung,
:root[data-theme="dark"] .kal-t-holiday { --kal-farbe: #7aa0c7; }
:root[data-theme="dark"] .kal-t-intern,
:root[data-theme="dark"] .kal-t-sonstiges { --kal-farbe: #98a8ba; }

/* Hinweise: Kreis in Hausfarbe, Wichtigkeit steht in der Kartenueberschrift */
.hin-urgent, .hin-info { --hin-farbe: var(--primary); }
.hin-low { --hin-farbe: #6b7f95; }
.resv .hin-zeile .resv-vorne { padding-left: 14px; }
.resv.hin .resv-zeile + .resv-zeile .resv-vorne::before { left: 76px; }
.hin-erledigt .resv-name { font-weight: 600; }

/* Kalender: Monat, Woche und Tagesliste als Karten */
.resv .kal-monat,
.resv .kal-woche-karte,
.resv .kal-tag {
  border: 1px solid var(--dash-rand);
  border-radius: 18px;
  background: var(--dash-karte);
  box-shadow: var(--dash-schatten);
}
.resv .kal-tag { overflow-y: auto; }
.resv .kal-wochentage { font-weight: 700; color: var(--text-muted); }
.resv .kal-raster,
.resv .kal-zelle,
.resv .kal-w-kopf,
.resv .kal-w-ganztag,
.resv .kal-w-feld,
.resv .kal-w-spalte,
.resv .kal-w-stunde { border-color: var(--border); }
.resv .kal-w-name { font-weight: 700; }


/* ------------------------------------------------------------ */
/*  Neu 12.10.2026 (Lars): ein Reiter = eine weisse Box          */
/*  Gleiche Box wie die Stempel-Seite, gleicher Grund, nur Hausblau */
/* ------------------------------------------------------------ */
#alt-reiter { display: none !important; }

.box-pane { height: 100%; display: flex; flex-direction: column; }
.box-pane.hidden { display: none; }

.box {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
  padding: 18px 20px 20px;
  overflow: hidden;
}
:root[data-theme="dark"] .box { background: var(--white); }

.box-kopf { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.box-titel { flex: 1; margin: 0; font-size: 22px; font-weight: 800; color: var(--primary); }
.box-aktionen { display: flex; align-items: center; gap: 10px; }
.box-inhalt { flex: 1; min-height: 0; overflow-y: auto; }

/* Mehr (Einstellungen): die vorhandene Box bekommt dieselbe Optik wie .box */
#tab-einstellungen > .eins-layout {
  box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
  padding: 18px 20px 20px;
}
#tab-einstellungen .eins-overview > .box-kopf { margin-bottom: 14px; }

/* Sync-Anzeige und Sperrknopf stehen jetzt in der Kopfzeile der Stempel-Seite (Heute ist dort aufgegangen) */
.st-kopf-knoepfe .sync-badge { padding: 6px 12px; font-size: 13px; }
.st-kopf-knoepfe .dash-lock-btn { width: 44px; height: 44px; align-self: center; }
/* Ohne Gruen (12.10.2026, Lars): Sync "ok" ruhig grau, "da" als Punkt in der Hausfarbe */
.st-kopf-knoepfe .sync-badge.sync-ok { background: transparent; color: var(--text-muted); }
.st-kopf-knoepfe .sync-ok .sync-badge-dot { background: var(--text-muted); }
.st-person.is-da .st-avatar::after { background: var(--primary); }

/* Stempeln ohne Personenreihe, Sync nur bei Problem (12.10.2026, Lars) */
#st-personen { display: none !important; }
.st-kopf-knoepfe .sync-badge.sync-ok,
.st-kopf-knoepfe .sync-badge.sync-syncing { display: none; }

/* Plan des Tages (12.10.2026): Zeitstrahl, "Jetzt"-Linie, Satz oben */
.box-unter { color: var(--text-muted); font-size: 15px; font-weight: 600; margin-left: auto; }
#box-plan { --plan-namen: 190px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.plan-jetzt { display: flex; flex-wrap: wrap; gap: 14px; }
.plan-jetzt-block {
  display: flex; align-items: baseline; gap: 12px;
  padding: 10px 18px; border-radius: 18px; background: var(--primary-pale, #eef2f7);
}
.plan-jetzt-zahl { font-size: 38px; line-height: 1; font-weight: 800; color: var(--primary); font-variant-numeric: tabular-nums; }
.plan-jetzt-text { font-size: 15px; font-weight: 700; color: var(--text-muted); }
.plan-jetzt-naechster { flex-wrap: wrap; flex: 1 1 320px; row-gap: 2px; }
.plan-jetzt-name { font-size: 24px; font-weight: 800; color: var(--text); }
.plan-jetzt-wann { font-size: 17px; font-weight: 700; color: var(--primary); }
.plan-filter { display: flex; flex-wrap: wrap; gap: 10px; }
.plan-chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--white); color: var(--text);
  font-size: 16px; font-weight: 700; font-family: inherit; cursor: pointer;
}
.plan-chip-zahl { color: var(--text-muted); font-weight: 600; font-size: 14px; }
.plan-chip.is-an { background: var(--primary); border-color: var(--primary); color: #fff; }
.plan-chip.is-an .plan-chip-zahl { color: rgba(255, 255, 255, .8); }

.plan-strahl { display: flex; flex-direction: column; }
.plan-kopfzeile, .plan-zeile { display: grid; grid-template-columns: var(--plan-namen) 1fr; align-items: center; column-gap: 12px; }
.plan-kopfzeile { height: 34px; }
.plan-spur { position: relative; height: 100%; }
.plan-spur-kopf { height: 34px; }
.plan-marke { position: absolute; top: 8px; transform: translateX(-50%); font-size: 13px; font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.plan-marke.is-ende { transform: translateX(-100%); }
.plan-bereichszeile {
  margin-top: 6px; padding: 4px 0; border-bottom: 1px solid var(--border);
  font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted);
}
.plan-zeile { height: 46px; border-bottom: 1px solid var(--border); }
.plan-zeile:last-child { border-bottom: 0; }
.plan-namenspalte { display: flex; align-items: center; gap: 10px; min-width: 0; }
.plan-punkt { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--border); box-sizing: border-box; }
.plan-zeile.is-da .plan-punkt { background: var(--primary); border-color: var(--primary); }
.plan-name { font-size: 17px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-zeile.is-da .plan-name { font-weight: 800; }
.plan-raster { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border); opacity: .6; }
.plan-jetzt-linie { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--primary); z-index: 3; pointer-events: none; }
.plan-jetzt-marke {
  position: absolute; top: 2px; left: 50%; transform: translateX(-50%);
  padding: 2px 8px; border-radius: 8px; background: var(--primary); color: #fff;
  font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.plan-balken {
  position: absolute; top: 7px; height: 32px; box-sizing: border-box; border-radius: 10px;
  display: flex; align-items: center; padding: 0 10px; overflow: hidden; z-index: 1;
}
.plan-balken-text { font-size: 14px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.plan-balken.plan-da { background: var(--primary); color: #fff; }
.plan-balken.plan-kommen { background: var(--white); border: 2px solid var(--primary); color: var(--primary); }
.plan-balken.plan-kommen.is-erwartet { border-style: dashed; }
.plan-balken.plan-fertig { background: var(--border); color: var(--text-muted); }
.plan-balken.is-offen { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
.plan-leer { margin: 8px 0 0; color: var(--text-muted); font-size: 16px; }
.plan-leer-gross { margin: 40px 0; text-align: center; font-size: 18px; }

/* Plan: Liste als Standard, Zeitstrahl umschaltbar (12.10.2026, Lars) */
.plan-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.plan-leiste .plan-filter { flex: 1 1 auto; }
.plan-ansicht { display: inline-flex; margin-left: auto; padding: 4px; border-radius: 999px; background: var(--primary-pale, #eef2f7); }
.plan-ansicht-btn {
  min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent;
  color: var(--text-muted); font-size: 15px; font-weight: 700; font-family: inherit; cursor: pointer;
}
.plan-ansicht-btn.is-an { background: var(--primary); color: #fff; }

.plan-liste { display: flex; flex-direction: column; }
.plan-lz {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(80px, 160px) 170px;
  align-items: center; column-gap: 14px; min-height: 40px; padding: 0 12px;
  border-bottom: 1px solid var(--border); color: var(--text);
}
.plan-lz:last-child { border-bottom: 0; }
.plan-lz-kopf {
  position: sticky; top: 0; z-index: 2; min-height: 30px; background: var(--white);
  font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted);
}
.plan-lz-rechts { justify-self: end; }
.plan-lz-zeit { font-size: 16px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.plan-lz-name { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-lz-bereich { font-size: 14px; font-weight: 500; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-lz-stand { justify-self: end; font-size: 14px; font-weight: 700; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* da: dezent hinterlegt mit schmalem Balken links */
.plan-lz.is-da { background: var(--primary-pale, #eef2f7); box-shadow: inset 4px 0 0 var(--primary); }
.plan-lz.is-da .plan-lz-name { font-weight: 800; }
.plan-lz.is-da .plan-lz-stand { color: var(--primary); }
/* kommt noch: Zeit in Hausfarbe; der naechste bekommt einen Rahmen */
.plan-lz.is-kommen .plan-lz-zeit, .plan-lz.is-kommen .plan-lz-stand { color: var(--primary); }
.plan-lz.is-naechste .plan-lz-stand { padding: 1px 10px; border: 1.5px solid var(--primary); border-radius: 999px; }
.plan-lz.is-fertig { color: var(--text-muted); }
.plan-lz.is-fertig .plan-lz-zeit, .plan-lz.is-fertig .plan-lz-name { color: var(--text-muted); font-weight: 500; }
/* viele Leute: zwei Spalten, links da, rechts kommt noch */
.plan-liste.is-dicht { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; align-items: start; }
.plan-spalte { display: flex; flex-direction: column; min-width: 0; }
.plan-lz-titel {
  display: flex; align-items: baseline; gap: 8px; padding: 4px 12px 2px;
  font-size: 15px; font-weight: 800; color: var(--primary);
}
.plan-lz-titel:not(:first-child) { margin-top: 14px; }
.plan-liste.is-dicht .plan-lz { grid-template-columns: 52px minmax(0, 1fr) 76px 142px; column-gap: 10px; min-height: 34px; }
.plan-liste.is-dicht .plan-lz-kopf { top: 0; }
.plan-liste.is-dicht .plan-lz-zeit, .plan-liste.is-dicht .plan-lz-name { font-size: 15px; }
.plan-liste.is-dicht .plan-lz-bereich, .plan-liste.is-dicht .plan-lz-stand { font-size: 13px; }
@media (max-width: 900px) {
  .plan-liste.is-dicht { grid-template-columns: 1fr; }
}
/* der Satz oben nimmt weniger Platz */
.plan-jetzt-block { padding: 6px 16px; }
.plan-jetzt-zahl { font-size: 30px; }
.plan-jetzt-name { font-size: 20px; }
.plan-jetzt-wann { font-size: 16px; }
@media (max-width: 760px) {
  .plan-lz { grid-template-columns: 54px minmax(0, 1fr) auto; }
  .plan-lz-bereich { display: none; }
  .plan-lz-kopf span:nth-child(3) { display: none; }
}

/* Plan: Wer fehlt (12.10.2026) – einzige Warnfarbe, nur wo jemand fehlt */
.plan-jetzt-fehlt { background: transparent; box-shadow: inset 0 0 0 1.5px var(--danger); }
.plan-jetzt-fehlt .plan-jetzt-zahl, .plan-jetzt-fehlt .plan-jetzt-text { color: var(--danger); }
.plan-lz.is-fehlt { box-shadow: inset 4px 0 0 var(--danger); }
.plan-lz.is-fehlt .plan-lz-zeit, .plan-lz.is-fehlt .plan-lz-stand { color: var(--danger); }
.plan-lz-titel.is-fehlt { color: var(--danger); }
.plan-balken.plan-fehlt { background: var(--white); border: 2px dashed var(--danger); color: var(--danger); }
.plan-zeile.is-fehlt .plan-punkt { border-color: var(--danger); }

/* Mein Tag nach der PIN: heute / morgen (12.10.2026) */
.st-ergebnis-dienst { margin-top: 18px; font-size: 22px; font-weight: 600; line-height: 1.5; opacity: .92; font-variant-numeric: tabular-nums; }

/* Plan: Kopf und Bereichs-Reiter ruhiger (12.10.2026, Lars: Reiter zu dick) */
.plan-jetzt { flex-wrap: nowrap; align-items: flex-end; gap: 0; padding: 2px 0 14px; }
.plan-jetzt-block { background: transparent; padding: 0 28px 0 0; border-radius: 0; align-items: baseline; gap: 10px; }
.plan-jetzt-block + .plan-jetzt-block { padding-left: 28px; border-left: 1px solid var(--border); }
.plan-jetzt-zahl { font-size: 46px; letter-spacing: -.02em; }
.plan-jetzt-text { font-size: 15px; font-weight: 600; }
.plan-jetzt-fehlt { box-shadow: none; }
.plan-jetzt-naechster { flex: 1 1 auto; min-width: 0; padding-right: 0; row-gap: 0; }
.plan-jetzt-naechster .plan-jetzt-text { flex: 0 0 100%; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.plan-jetzt-name { font-size: 20px; }
.plan-jetzt-wann { font-size: 15px; }

.plan-leiste { align-items: flex-end; gap: 0 16px; border-bottom: 1px solid var(--border); }
.plan-filter { gap: 2px; flex-wrap: wrap; }
.plan-chip {
  min-height: 40px; padding: 0 14px; gap: 7px; border: 0; border-bottom: 3px solid transparent; border-radius: 0;
  margin-bottom: -1px; background: transparent; color: var(--text-muted); font-size: 16px; font-weight: 700;
}
.plan-chip.is-an { background: transparent; border-color: transparent; border-bottom-color: var(--primary); color: var(--primary); }
.plan-chip-zahl { font-size: 13px; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; opacity: .8; }
.plan-chip-zahl b { font-weight: 800; color: var(--text); }
.plan-chip.is-an .plan-chip-zahl, .plan-chip.is-an .plan-chip-zahl b { color: var(--primary); opacity: 1; }
.plan-lz-titel .plan-chip-zahl { opacity: 1; }

.plan-ansicht { padding: 0; gap: 2px; background: transparent; align-self: center; margin-bottom: 4px; }
.plan-ansicht-btn { min-height: 32px; padding: 0 12px; border-radius: 8px; font-size: 14px; }
.plan-ansicht-btn.is-an { background: var(--primary-pale, #eef2f7); color: var(--primary); }

/* Plan wie die Planung in der Admin-App (12.10.2026, Lars: Admin als Vorbild)
   Leiste oben (Datums-Pille, kleine Bereichs-Pillen, Ansicht-Knoepfe rechts),
   darunter ein Rahmen: links Karten wie die Admin-Seitenleiste, rechts die Liste. */
#tab-plan .box-kopf { display: none; }
#box-plan { gap: 0; overflow: hidden; }
#box-plan .plan-leiste {
  flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px;
  padding: 0 0 12px; border-bottom: 0;
}
.plan-tag {
  display: inline-flex; height: 42px; padding: 3px; box-sizing: border-box;
  border-radius: 999px; background: var(--primary-pale);
}
.plan-tag-text {
  display: inline-flex; align-items: center; padding: 0 18px; border-radius: 999px;
  background: var(--white); box-shadow: 0 1px 4px rgba(53, 80, 111, .10);
  font-size: 15px; font-weight: 700; color: var(--primary); letter-spacing: -.2px; white-space: nowrap;
}
#box-plan .plan-filter { flex: 1 1 auto; justify-content: center; gap: 8px; flex-wrap: wrap; }
#box-plan .plan-chip {
  min-height: 36px; padding: 0 14px; gap: 6px; margin: 0;
  border: 1.5px solid var(--border); border-radius: 20px; background: var(--white);
  color: var(--text-muted); font-size: 14px; font-weight: 600;
}
#box-plan .plan-chip.is-an { background: var(--primary); border-color: var(--primary); color: #fff; }
#box-plan .plan-chip-zahl { font-size: 12px; font-weight: 600; opacity: .85; }
#box-plan .plan-chip-zahl b { font-weight: 800; color: inherit; }
#box-plan .plan-chip.is-an .plan-chip-zahl { color: rgba(255, 255, 255, .85); }
#box-plan .plan-ansicht { margin: 0 0 0 auto; padding: 0; gap: 8px; background: transparent; }
#box-plan .plan-ansicht-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--white);
  color: var(--text-muted); font-size: 14px; font-weight: 600;
}
#box-plan .plan-ansicht-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
#box-plan .plan-ansicht-btn.is-an { background: var(--primary); border-color: var(--primary); color: #fff; }

.plan-rahmen {
  flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 250px minmax(0, 1fr);
  border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--white);
}
.plan-seite { border-right: 1px solid var(--border); padding: 12px; overflow-y: auto; }
.plan-haupt { min-width: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 12px 12px; }
#box-plan .plan-jetzt { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 8px; padding: 0; align-items: stretch; }
.plan-karte {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--white);
}
#box-plan .plan-jetzt-block { padding: 12px 14px; border-left: 1px solid var(--border); border-radius: 12px; background: var(--white); }
#box-plan .plan-jetzt-block:first-child { background: var(--primary-pale); border-color: transparent; }
#box-plan .plan-jetzt-zahl { font-size: 34px; }
#box-plan .plan-jetzt-text { font-size: 14px; font-weight: 600; color: var(--text-muted); }
#box-plan .plan-jetzt-fehlt { border-color: var(--danger); box-shadow: none; background: var(--white); }
.plan-karte-titel { flex: 0 0 100%; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.plan-naechster-person { flex: 0 0 100%; display: flex; align-items: center; gap: 10px; min-width: 0; margin-top: 4px; }
#box-plan .plan-jetzt-name { font-size: 17px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#box-plan .plan-jetzt-wann { font-size: 14px; font-weight: 600; color: var(--primary); }
.plan-karte-klein .plan-jetzt-zahl { font-size: 22px !important; }

.plan-kuerzel {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; background: var(--primary-pale);
  color: var(--primary); font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.plan-schild {
  display: inline-flex; align-items: center; max-width: 100%; height: 24px; padding: 0 9px; box-sizing: border-box;
  border: 1px solid; border-radius: 6px; font-size: 12px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.plan-lz-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.plan-lz-name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-lz { min-height: 46px; }
.plan-lz.is-da { background: transparent; box-shadow: inset 3px 0 0 var(--primary); }
.plan-lz.is-da .plan-kuerzel { background: var(--primary); color: #fff; }
.plan-lz.is-fehlt .plan-kuerzel { background: transparent; box-shadow: inset 0 0 0 1.5px var(--danger); color: var(--danger); }
.plan-lz.is-fertig .plan-kuerzel, .plan-lz.is-fertig .plan-schild { opacity: .55; }
.plan-lz-kopf { min-height: 36px; background: var(--white); }
.plan-lz-titel:first-child { margin-top: 10px; }
.plan-liste.is-dicht { column-gap: 20px; }
.plan-liste.is-dicht .plan-lz { grid-template-columns: 46px minmax(0, 1fr) 84px 148px; column-gap: 8px; min-height: 40px; padding: 0 8px; }
.plan-liste.is-dicht .plan-kuerzel { width: 26px; height: 26px; font-size: 11px; }
.plan-liste.is-dicht .plan-lz-name { gap: 8px; }
#box-plan .plan-strahl { padding-top: 8px; }

@media (max-width: 900px) {
  .plan-rahmen { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .plan-seite { border-right: 0; border-bottom: 1px solid var(--border); }
  #box-plan .plan-jetzt { flex-direction: row; flex-wrap: wrap; }
  #box-plan .plan-jetzt > * { flex: 1 1 140px; }
  #box-plan .plan-filter { justify-content: flex-start; }
}

/* Linke Spalte ruhiger (12.10.2026, Lars: Seitenleiste verwirrend)
   Eine Zahlenkarte mit den Zeichen der Liste, darunter die naechsten Leute als Personenkarten. */
#box-plan .plan-stand { display: flex; flex-direction: column; gap: 2px; padding: 8px 6px; background: var(--primary-pale); border-color: transparent; }
.plan-stand-zeile { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; }
.plan-stand-punkt { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box; }
.plan-stand-zeile.is-da .plan-stand-punkt { background: var(--primary); }
.plan-stand-zeile.is-fehlt .plan-stand-punkt { border: 2px solid var(--danger); }
.plan-stand-zeile.is-kommen .plan-stand-punkt { background: var(--white); border: 2px solid var(--primary); }
.plan-stand-zeile.is-fertig .plan-stand-punkt { background: var(--border); }
#box-plan .plan-stand-zeile .plan-jetzt-text { flex: 1; font-size: 15px; font-weight: 600; color: var(--text); }
#box-plan .plan-stand-zeile .plan-jetzt-zahl { font-size: 20px; font-weight: 800; color: var(--primary); }
#box-plan .plan-stand-zeile.is-null .plan-jetzt-text, #box-plan .plan-stand-zeile.is-null .plan-jetzt-zahl { color: var(--text-muted); font-weight: 600; }
#box-plan .plan-stand-zeile.is-null .plan-stand-punkt { opacity: .45; }
#box-plan .plan-stand-zeile.plan-jetzt-fehlt { background: var(--white); border: 0; box-shadow: inset 0 0 0 1.5px var(--danger); }
#box-plan .plan-stand-zeile.plan-jetzt-fehlt .plan-jetzt-text, #box-plan .plan-stand-zeile.plan-jetzt-fehlt .plan-jetzt-zahl { color: var(--danger); }
.plan-naechste { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.plan-naechste .plan-karte-titel { padding: 6px 4px 2px; }
.plan-naechste-leer { margin: 4px; font-size: 14px; color: var(--text-muted); }
.plan-person {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--white);
}
.plan-person-text { display: flex; flex-direction: column; min-width: 0; }
.plan-person-name { font-size: 15px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-person-wann { font-size: 13px; font-weight: 600; color: var(--primary); font-variant-numeric: tabular-nums; }
.plan-person .plan-schild { height: 22px; padding: 0 7px; font-size: 11px; }
.plan-karte-titel + .plan-person { border-color: var(--primary); }
@media (max-width: 900px) {
  #box-plan .plan-jetzt.plan-stand { flex-direction: row; flex-wrap: wrap; }
  .plan-naechste { display: none; }
}
.plan-rahmen { grid-template-columns: 270px minmax(0, 1fr); }
.plan-person { grid-template-columns: auto minmax(0, 1fr); }
.plan-person-kopf { display: flex; align-items: center; gap: 8px; min-width: 0; }
.plan-person-kopf .plan-schild { flex: 0 0 auto; margin-left: auto; }
.plan-person-wann { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) { .plan-rahmen { grid-template-columns: 1fr; } }

/* Plan ruhiger (12.10.2026, Lars: zu viel Farbe, bei "Alle" zu voll)
   Keine Farbschilder, keine Kreise, keine Balken links. Ein kleiner Punkt je Zeile (wie links),
   Bereich als grauer Text, Rot nur fuer "fehlt". Die Zahlen links filtern die Liste. */
.plan-lz, .plan-lz.is-da, .plan-lz.is-fehlt { background: transparent; box-shadow: none; }
.plan-lz { min-height: 42px; border-bottom-color: var(--border-light, var(--border)); }
.plan-lz-kopf { min-height: 30px; }
.plan-lz-zeit, .plan-lz.is-kommen .plan-lz-zeit, .plan-lz.is-fehlt .plan-lz-zeit { color: var(--text); font-weight: 600; }
.plan-lz-name, .plan-lz.is-da .plan-lz-name { font-weight: 600; }
.plan-lz-bereich { font-size: 14px; font-weight: 500; color: var(--text-muted); }
.plan-lz-stand, .plan-lz.is-da .plan-lz-stand, .plan-lz.is-kommen .plan-lz-stand { font-size: 14px; font-weight: 500; color: var(--text-muted); }
.plan-lz.is-fehlt .plan-lz-stand { color: var(--danger); font-weight: 600; }
.plan-lz.is-fertig .plan-lz-zeit, .plan-lz.is-fertig .plan-lz-name { color: var(--text-muted); font-weight: 500; }
.plan-lz-punkt { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; box-sizing: border-box; }
.plan-lz.is-da .plan-lz-punkt { background: var(--primary); }
.plan-lz.is-fehlt .plan-lz-punkt { border: 1.5px solid var(--danger); }
.plan-lz.is-kommen .plan-lz-punkt { border: 1.5px solid var(--primary); }
.plan-lz.is-fertig .plan-lz-punkt { background: var(--border); }
.plan-liste .plan-lz-titel { padding: 14px 12px 4px; margin: 0; font-size: 14px; font-weight: 700; color: var(--text); }
.plan-liste .plan-lz-titel:first-child { padding-top: 10px; }
.plan-liste .plan-lz-titel.is-fehlt { color: var(--danger); }
.plan-liste .plan-lz-titel .plan-chip-zahl { font-size: 13px; font-weight: 500; color: var(--text-muted); }
.plan-liste.is-dicht .plan-lz { grid-template-columns: 46px minmax(0, 1fr) 76px 128px; min-height: 38px; }
.plan-liste.ohne-bereich .plan-lz { grid-template-columns: 54px minmax(0, 1fr) 0 150px; }
.plan-liste.ohne-bereich.is-dicht .plan-lz { grid-template-columns: 46px minmax(0, 1fr) 0 128px; }

/* linke Spalte: nur die Zahlen, als Knoepfe; darunter eine ruhige Zeile */
#box-plan .plan-stand { background: transparent; border: 0; padding: 0; gap: 4px; }
#box-plan .plan-stand-zeile {
  width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px;
  background: transparent; font-family: inherit; text-align: left; cursor: pointer;
}
#box-plan .plan-stand-zeile:disabled { cursor: default; }
#box-plan .plan-stand-zeile .plan-jetzt-zahl { font-size: 18px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
#box-plan .plan-stand-zeile.plan-jetzt-fehlt { background: transparent; box-shadow: none; }
#box-plan .plan-stand-zeile.plan-jetzt-fehlt .plan-jetzt-text { color: var(--text); }
#box-plan .plan-stand-zeile.plan-jetzt-fehlt .plan-jetzt-zahl { color: var(--danger); }
#box-plan .plan-stand-zeile.is-an { background: var(--primary-pale); }
#box-plan .plan-stand-zeile.is-an .plan-jetzt-text { font-weight: 700; }
.plan-stand-punkt { width: 10px; height: 10px; }
.plan-stand-zeile.is-fehlt .plan-stand-punkt, .plan-stand-zeile.is-kommen .plan-stand-punkt { border-width: 1.5px; }
.plan-seite-hinweis { margin: 12px 12px 0; padding-top: 12px; border-top: 1px solid var(--border); font-size: 14px; line-height: 1.4; color: var(--text-muted); }
.plan-seite-hinweis b { color: var(--text); font-weight: 700; }
.plan-stand-alle {
  margin: 12px 12px 0; padding: 0; border: 0; background: transparent; font-family: inherit;
  font-size: 14px; font-weight: 600; color: var(--primary); cursor: pointer;
}
@media (max-width: 900px) {
  .plan-seite-hinweis, .plan-stand-alle { display: none; }
  #box-plan .plan-jetzt.plan-stand > * { flex: 1 1 120px; }
}

/* Stand ohne Punkte und Zahlenliste (12.10.2026, Lars: "das muss anders") – Probe mit drei Varianten */
.plan-lz-name { gap: 0; }
/* A: Hinweis-Karten wie "2 Personen haben noch keine Wunschzeiten · Erinnern" im Admin */
#box-plan .plan-hinweise { display: flex; flex-direction: column; gap: 8px; padding: 0; }
.plan-hinweis {
  display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px;
  border-radius: 12px; background: var(--primary-pale);
}
.plan-hinweis-text { flex: 1; min-width: 0; font-size: 14px; line-height: 1.35; color: var(--text); }
.plan-hinweis-text b { font-weight: 700; }
.plan-hinweis-btn {
  flex: 0 0 auto; min-height: 34px; padding: 0 16px; border: 0; border-radius: 999px;
  background: var(--primary); color: #fff; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.plan-hinweis.is-fehlt { background: var(--white); box-shadow: inset 0 0 0 1.5px var(--danger); }
.plan-hinweis.is-fehlt .plan-hinweis-text b { color: var(--danger); }
#box-plan .plan-hinweis-btn.plan-jetzt-fehlt { background: var(--danger); box-shadow: none; }
.plan-hinweis.is-still { background: transparent; box-shadow: inset 0 0 0 1px var(--border); }
.plan-hinweis.is-still .plan-hinweis-btn { background: var(--white); color: var(--primary); box-shadow: inset 0 0 0 1px var(--border); }

/* B und C: ohne Seitenleiste, Liste ueber die volle Breite */
.plan-rahmen.is-ohne-seite { grid-template-columns: minmax(0, 1fr); }
/* B: Umschalter oben in der Liste */
#box-plan .plan-segment {
  display: flex; flex-direction: row; gap: 4px; flex-wrap: wrap; align-items: center;
  margin: 12px 0 4px; padding: 0 4px;
}
.plan-seg {
  min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent;
  font-family: inherit; font-size: 14px; font-weight: 600; color: var(--text-muted); cursor: pointer;
}
.plan-seg:disabled { opacity: .45; cursor: default; }
.plan-seg-zahl { margin-left: 4px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.plan-seg.plan-jetzt-fehlt, .plan-seg.plan-jetzt-fehlt .plan-seg-zahl { color: var(--danger); }
.plan-seg.is-an { background: var(--primary-pale); color: var(--primary); }
.plan-seg.is-an .plan-seg-zahl { color: var(--primary); }
.plan-seg.is-an.plan-jetzt-fehlt, .plan-seg.is-an.plan-jetzt-fehlt .plan-seg-zahl { color: var(--danger); }
/* C: drei Kacheln oben */
#box-plan .plan-kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0 0 12px; flex: 0 0 auto; }
.plan-kachel {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 14px 18px;
  border: 1px solid var(--border); border-radius: 14px; background: var(--white);
  font-family: inherit; text-align: left; cursor: pointer;
}
.plan-kachel:disabled { cursor: default; opacity: .6; }
.plan-kachel-zahl { font-size: 34px; font-weight: 800; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.plan-kachel-text { font-size: 16px; font-weight: 600; color: var(--text); }
.plan-kachel-unter { flex: 0 0 100%; font-size: 13px; font-weight: 500; color: var(--text-muted); }
.plan-kachel.plan-jetzt-fehlt { border-color: var(--danger); }
.plan-kachel.plan-jetzt-fehlt .plan-kachel-zahl, .plan-kachel.plan-jetzt-fehlt .plan-kachel-text { color: var(--danger); }
.plan-kachel.is-an { background: var(--primary-pale); border-color: var(--primary); }
.plan-kachel.is-an.plan-jetzt-fehlt { background: var(--white); box-shadow: inset 0 0 0 1px var(--danger); }

/* Plan in drei Spalten (12.10.2026, Lars: Variante C, aber geordneter)
   Jede Kachel ist der Kopf ihrer Spalte: Jetzt da | Kommen noch (nach Uhrzeit) | Fehlen. Jede Spalte scrollt fuer sich. */
#box-plan .plan-drei {
  flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px; padding: 0; align-items: stretch;
}
.plan-sp {
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
  border: 1px solid var(--border); border-radius: 16px; background: var(--white); overflow: hidden;
}
.plan-sp .plan-sp-kopf { flex: 0 0 auto; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: 14px 16px 12px; cursor: default; }
.plan-sp.is-fehlt .plan-sp-kopf.plan-jetzt-fehlt { border-bottom-color: var(--border); }
.plan-sp:has(.plan-jetzt-fehlt) { border-color: var(--danger); }
.plan-sp-liste { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 0 8px; }
.plan-sp .plan-lz {
  display: flex; align-items: baseline; gap: 10px; min-height: 0; padding: 9px 16px;
  border-bottom: 0; grid-template-columns: none;
}
.plan-sp .plan-lz + .plan-lz { border-top: 1px solid var(--border); border-top-color: color-mix(in srgb, var(--border) 60%, transparent); }
.plan-sp .plan-lz-name { flex: 1 1 auto; display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: 15px; font-weight: 600; }
.plan-sp .plan-lz-name-text { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-sp .plan-lz-bereich { flex: 0 1 auto; min-width: 0; font-size: 13px; font-weight: 500; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-sp .plan-lz-stand { flex: 0 0 auto; font-size: 13px; font-weight: 500; color: var(--text-muted); }
.plan-sp .plan-lz.is-fehlt .plan-lz-stand { color: var(--danger); font-weight: 600; }
.plan-sp .plan-lz.is-fertig .plan-lz-name { color: var(--text-muted); font-weight: 500; }
.plan-sp-zeit {
  display: flex; align-items: baseline; gap: 8px; padding: 12px 16px 4px;
  font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums;
}
.plan-sp-zeit b { font-size: 16px; font-weight: 800; color: var(--primary); }
.plan-sp-zeit.is-fertig b { font-size: 13px; font-weight: 700; color: var(--text-muted); }
.plan-sp-zeit + .plan-lz { border-top: 0 !important; }
.plan-sp-leer { margin: 16px; font-size: 14px; color: var(--text-muted); }
#box-plan .plan-kacheln .plan-sp-kopf { cursor: default; }
@media (max-width: 700px) {
  #box-plan .plan-drei { grid-template-columns: 1fr; overflow-y: auto; }
  .plan-sp-liste { overflow: visible; }
}
/* schmale Spalten (iPad hoch): Bereich unter den Namen, damit der Name ganz bleibt */
@media (max-width: 1100px) {
  .plan-sp .plan-lz { align-items: center; }
  .plan-sp .plan-lz-name { flex-direction: column; align-items: flex-start; gap: 0; }
  .plan-sp .plan-lz-name-text, .plan-sp .plan-lz-bereich { max-width: 100%; }
  .plan-sp .plan-lz-bereich { font-size: 12px; }
}

/* Plan als Lagebild (12.10.2026, Lars: Spalten wirken wie eine Tabelle voller Namen)
   Namensschilder mit Kuerzel statt Zeilen. Links Jetzt da (nach Bereich), rechts oben Fehlen, darunter Kommen noch als Zeitleiste.
   Kreis: gefuellt = da, Ring = kommt noch, rot = fehlt. */
#box-plan .plan-lage {
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "da fehlt" "da kommen";
}
.plan-lage .plan-sp.is-da { grid-area: da; }
.plan-lage .plan-sp.is-kommen { grid-area: kommen; }
.plan-lage .plan-sp.is-fehlt { grid-area: fehlt; max-height: 46vh; }
#box-plan .plan-lage .plan-sp .plan-sp-kopf { border: 0; padding: 16px 18px 6px; background: transparent; box-shadow: none; }
.plan-lage .plan-sp-liste { padding: 4px 14px 14px; }
.plan-lage .plan-sp.is-fehlt:has(.plan-jetzt-fehlt) { background: color-mix(in srgb, var(--danger) 4%, var(--white)); }

.plan-schilder { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 6px; }
.plan-sp .plan-lz.plan-person {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px 7px 7px; min-width: 0;
  border: 0 !important; border-radius: 12px; background: var(--bg);
}
.plan-lage .plan-sp.is-fehlt .plan-person { background: var(--white); box-shadow: 0 0 0 1px color-mix(in srgb, var(--danger) 18%, transparent); }
.plan-av {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
  background: var(--primary); color: #fff;
}
.plan-person.is-kommen .plan-av { background: var(--white); color: var(--primary); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary) 45%, transparent); }
.plan-person.is-fehlt .plan-av { background: color-mix(in srgb, var(--danger) 12%, var(--white)); color: var(--danger); box-shadow: inset 0 0 0 2px var(--danger); }
.plan-person.is-fertig { opacity: .5; }
.plan-person.is-fertig .plan-av { background: var(--text-muted); }
.plan-person-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.plan-person .plan-lz-name-text { font-size: 14px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-person-unter { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.plan-person.is-fehlt .plan-person-unter { color: var(--danger); font-weight: 600; }

.plan-gruppe + .plan-gruppe { margin-top: 14px; }
.plan-gruppe-kopf { display: flex; align-items: baseline; gap: 8px; padding: 4px 2px 8px; font-size: 13px; color: var(--text-muted); }
.plan-gruppe-kopf b { font-size: 13px; font-weight: 700; color: var(--text); text-transform: uppercase; letter-spacing: .06em; }

/* Zeitleiste: links die Uhrzeit an einer Linie, rechts die Schilder */
.plan-takt { position: relative; display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 10px; padding: 0 0 14px; }
.plan-takt::before { content: ""; position: absolute; left: 6px; top: 16px; bottom: -2px; width: 2px; background: var(--border); }
.plan-takt:last-child::before { display: none; }
.plan-lage .plan-sp-zeit { position: relative; display: flex; flex-direction: column; gap: 0; padding: 4px 0 0 22px; }
.plan-lage .plan-sp-zeit::before { content: ""; position: absolute; left: 1px; top: 9px; width: 12px; height: 12px; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 2px var(--primary); }
.plan-lage .plan-sp-zeit b { font-size: 17px; }
.plan-lage .plan-sp-zeit span { font-size: 12px; }
.plan-lage .plan-takt .plan-schilder { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

@media (max-width: 1100px) {
  #box-plan .plan-lage { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; grid-template-areas: "fehlt" "kommen" "da"; overflow-y: auto; }
  .plan-lage .plan-sp.is-fehlt { max-height: none; }
  .plan-lage .plan-sp-liste { overflow: visible; }
  .plan-lage .plan-sp { overflow: visible; min-height: auto; }
  #box-plan .plan-lage { align-content: start; }
  .plan-lage .plan-takt { grid-template-columns: 96px minmax(0, 1fr); }
  .plan-lage .plan-takt .plan-schilder { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); }
}

/* Plan als Aushang (12.10.2026, Lars: Mitarbeiter schauen am haeufigsten, der heutige Tag zaehlt)
   Je Bereich eine Spalte: Uhrzeit links, Name rechts, nach Beginn sortiert. Keine Signalfarben; wer fertig ist, steht grau. */
#box-plan .plan-aushang {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); grid-auto-rows: max-content; gap: 12px; align-content: start; align-items: start;
}
#box-plan .plan-aushang.is-eine { grid-template-columns: minmax(0, 560px); }
.plan-aus-spalte { min-width: 0; border: 1px solid var(--border); border-radius: 16px; background: var(--white); overflow: hidden; }
.plan-aus-kopf {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 12px 16px 10px; border-bottom: 1px solid var(--border); background: var(--bg);
}
.plan-aus-kopf b { font-size: 13px; font-weight: 700; color: var(--text); text-transform: uppercase; letter-spacing: .06em; }
.plan-aus-kopf span { font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.plan-aus-liste { padding: 4px 0; }
#box-plan .plan-lz.plan-aus-zeile {
  display: flex; align-items: baseline; gap: 12px; padding: 8px 16px; min-height: 0;
  border: 0; grid-template-columns: none;
}
#box-plan .plan-lz.plan-aus-zeile + .plan-lz.plan-aus-zeile { border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.plan-aus-zeit { flex: 0 0 auto; width: 92px; font-size: 14px; font-weight: 600; color: var(--primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.plan-aus-zeit i { font-style: normal; color: var(--text-muted); padding: 0 1px; }
.plan-aus-zeile .plan-lz-name-text { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-aus-zeile.is-fertig .plan-aus-zeit, .plan-aus-zeile.is-fertig .plan-lz-name-text { color: var(--text-muted); font-weight: 500; }

/* Plan als Belegung (12.10.2026, Lars: Idee 3 „wie ein Kalender“)
   Links der Bereich, rechts die Spur mit Stunden; jede Schicht ein Balken mit Namen. Skala klebt oben, Inhalt scrollt. */
#box-plan .plan-bl { --bl-name: 104px; flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.plan-bl-skala, .plan-bl-gruppe { display: grid; grid-template-columns: var(--bl-name) minmax(0, 1fr); }
.plan-bl-skala { position: sticky; top: 0; z-index: 3; height: 30px; background: var(--white); border-bottom: 1px solid var(--border); }
.plan-bl-spur { position: relative; min-width: 0; }
.plan-bl-marke { position: absolute; top: 4px; transform: translateX(-50%); font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.plan-bl-jetzt-marke {
  position: absolute; top: 2px; transform: translateX(-50%); padding: 2px 7px; border-radius: 6px;
  background: var(--primary); color: #fff; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.plan-bl-gruppe { border-bottom: 1px solid var(--border); }
.plan-bl-gruppe > .plan-bl-name { padding: 14px 8px 0 2px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-bl-gruppe > .plan-bl-spur { padding: 6px 0; }
.plan-bl-raster { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border); opacity: .7; }
.plan-bl-jetzt { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--primary); opacity: .45; z-index: 2; pointer-events: none; }
.plan-bl-bahn { position: relative; height: 36px; margin: 4px 0; }
#box-plan .plan-lz.plan-bl-balken {
  position: absolute; top: 0; height: 36px; box-sizing: border-box; min-height: 0; padding: 0 10px; margin-left: 1px;
  display: flex; align-items: center; overflow: hidden; white-space: nowrap; container-type: inline-size;
  border: 0; border-radius: 10px; background: var(--primary-pale); box-shadow: inset 3px 0 0 var(--primary);
  grid-template-columns: none; clip-path: inset(0 2px 0 0 round 10px);
}
.plan-bl-innen { display: flex; align-items: baseline; gap: 8px; min-width: 0; max-width: 100%; }
/* Kurze Schicht (schmaler Balken): Name oben, Zeit darunter, damit der Name ganz bleibt */
@container (max-width: 170px) {
  .plan-bl-innen { flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.15; }
  .plan-bl-innen .plan-lz-name-text { max-width: 100%; font-size: 13px; }
  .plan-bl-innen .plan-bl-zeit { max-width: 100%; font-size: 11px; }
}
.plan-bl-balken .plan-lz-name-text { flex: 0 1 auto; min-width: 0; font-size: 14px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.plan-bl-zeit { flex: 0 10 auto; min-width: 0; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
#box-plan .plan-lz.plan-bl-balken.is-vorbei { background: var(--bg); box-shadow: inset 3px 0 0 var(--border); }
.plan-bl-balken.is-vorbei .plan-lz-name-text { color: var(--text-muted); font-weight: 600; }
/* Stand (13.10.2026, Lars: kenntlich machen, wer fehlt): da = voll Hausblau, fehlt = einzige Hinweisfarbe */
#box-plan .plan-lz.plan-bl-balken.is-da { background: var(--primary); box-shadow: none; }
.plan-bl-balken.is-da .plan-lz-name-text { color: #fff; }
.plan-bl-balken.is-da .plan-bl-zeit { color: rgba(255, 255, 255, .78); }
#box-plan .plan-lz.plan-bl-balken.is-fehlt { background: rgba(231, 76, 60, .10); box-shadow: inset 3px 0 0 var(--danger); }
.plan-bl-balken.is-fehlt .plan-bl-zeit { color: var(--danger); font-weight: 700; }
#box-plan .plan-lz.plan-bl-balken.is-offen { -webkit-mask-image: linear-gradient(90deg, #000 75%, transparent); mask-image: linear-gradient(90deg, #000 75%, transparent); }
/* iPad hoch: Bereich als Zeile ueber den Balken, damit die Spur die ganze Breite hat */
@media (max-width: 1100px) {
  #box-plan .plan-bl { --bl-name: 0px; }
  .plan-bl-gruppe { grid-template-columns: minmax(0, 1fr); }
  .plan-bl-gruppe > .plan-bl-name { padding: 12px 2px 0; }
  .plan-bl-skala > .plan-bl-name { display: none; }
  .plan-bl-skala { grid-template-columns: minmax(0, 1fr); }
}
/* 13.10.2026 (Lars: Filter in der Mitte, rechts ein Gegenstueck zum Datum): Datum | Filter | Suche */
#box-plan .plan-leiste { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px 16px; }
#box-plan .plan-leiste > .plan-tag { grid-area: 1 / 1; justify-self: start; }
#box-plan .plan-leiste > .plan-filter { grid-area: 1 / 2; justify-content: center; }
#box-plan .plan-leiste > .plan-suche { grid-area: 1 / 3; justify-self: end; }
#box-plan .plan-tag { min-width: 236px; }
#box-plan .plan-suche { width: 236px; }
#box-plan .plan-tag-text { flex: 1 1 auto; justify-content: center; }
.plan-suche {
  display: flex; height: 42px; padding: 3px; box-sizing: border-box;
  border-radius: 999px; background: var(--primary-pale);
}
.plan-suche:has(.tt-aktiv) { background: rgba(53, 80, 111, .22); }
.plan-suche-innen {
  flex: 1 1 auto; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 5px 0 14px;
  border-radius: 999px; background: var(--white); box-shadow: 0 1px 4px rgba(53, 80, 111, .10);
}
.plan-suche-lupe { flex: 0 0 auto; width: 17px; height: 17px; fill: none; stroke: var(--text-muted); stroke-width: 2.2; stroke-linecap: round; }
#box-plan .plan-suche-feld {
  flex: 1 1 auto; min-width: 0; width: 100%; height: 100%; padding: 0; margin: 0;
  border: 0; background: transparent; outline: none; box-shadow: none;
  font: inherit; font-size: 15px; font-weight: 600; color: var(--text); cursor: text;
}
#box-plan .plan-suche-feld.tt-aktiv { border-color: transparent !important; box-shadow: none !important; }
.plan-suche-feld::placeholder { color: var(--text-muted); font-weight: 500; opacity: 1; }
.plan-suche-nichts { flex: 0 0 auto; font-size: 12px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.plan-suche-weg {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: var(--bg); cursor: pointer;
}
.plan-suche-weg[hidden] { display: none; }
.plan-suche-weg svg { width: 14px; height: 14px; fill: none; stroke: var(--text-muted); stroke-width: 2.4; stroke-linecap: round; }
/* Treffer bleiben kraeftig, alle anderen Balken treten zurueck */
#box-plan .plan-bl-balken { transition: opacity .15s; }
#box-plan.is-suche .plan-bl-balken:not(.is-treffer) { opacity: .22; }
/* iPad hoch: Datum und Suche oben, Filter darunter in der Mitte */
@media (max-width: 1100px) {
  #box-plan .plan-leiste { grid-template-columns: 1fr 1fr; }
  #box-plan .plan-leiste > .plan-suche { grid-area: 1 / 2; }
  #box-plan .plan-leiste > .plan-filter { grid-area: 2 / 1 / 3 / 3; }
}
/* Handy: Suche nimmt den Rest neben dem Datum */
@media (max-width: 600px) {
  #box-plan .plan-leiste { grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
  #box-plan .plan-tag { min-width: 0; }
  #box-plan .plan-leiste > .plan-suche { width: auto; min-width: 0; justify-self: stretch; }
}

/* 13.10.2026 (Lars): Schicht antippen – Heute frei / Frueher kommen (js/anfrage.js).
   Angefragt = Hausblau gestreift (wartet noch), heute frei = grau wie fertig. */
#box-plan .plan-bl-balken.is-tippbar { cursor: pointer; -webkit-tap-highlight-color: transparent; }
#box-plan .plan-bl-balken.is-tippbar:active { filter: brightness(.94); }
#box-plan .plan-lz.plan-bl-balken.is-angefragt {
  background: repeating-linear-gradient(135deg, var(--primary-pale) 0 7px, var(--white) 7px 14px);
  box-shadow: inset 3px 0 0 var(--primary-light), inset 0 0 0 1px rgba(53, 80, 111, .22);
}
.plan-bl-balken.is-angefragt .plan-bl-zeit { color: var(--primary); font-weight: 700; }
#box-plan .plan-lz.plan-bl-balken.is-frei { background: var(--bg); box-shadow: inset 3px 0 0 var(--border); }
.plan-bl-balken.is-frei .plan-lz-name-text { color: var(--text-muted); font-weight: 600; }
/* Pause (13.10.2026): eingestempelt, aber gerade in der Pause = Hausblau nur umrandet */
#box-plan .plan-lz.plan-bl-balken.is-pause { background: var(--primary-pale); box-shadow: inset 3px 0 0 var(--primary), inset 0 0 0 1.5px var(--primary); }
.plan-bl-balken.is-pause .plan-bl-zeit { color: var(--primary); font-weight: 700; }
/* Krankmeldung (13.10.2026): offene Schicht = weiss mit gestrichelter Kante (sucht noch jemanden), abgemeldet = grau wie frei.
   Nie als fehlt gezaehlt, nie tippbar. */
#box-plan .plan-lz.plan-bl-balken.is-unbesetzt { background: var(--white); border: 1.5px dashed var(--primary-light); box-shadow: none; clip-path: none; }
.plan-bl-balken.is-unbesetzt .plan-lz-name-text { color: var(--primary); }
#box-plan .plan-lz.plan-bl-balken.is-abgemeldet { background: var(--bg); box-shadow: inset 3px 0 0 var(--border); }
.plan-bl-balken.is-abgemeldet .plan-lz-name-text { color: var(--text-muted); font-weight: 600; }

.modal-card.sa-blatt { max-width: 420px; display: flex; flex-direction: column; max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow: hidden; }
.sa-kopf { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 56px; padding: 0 10px 0 6px; border-bottom: 1px solid var(--border); }
.sa-kopf h3 { font-size: 17px; font-weight: 600; color: var(--text); text-align: center; }
.sa-zurueck { justify-self: start; min-height: 44px; padding: 0 12px; border: 0; background: none; color: var(--primary); font: inherit; font-size: 17px; cursor: pointer; }
.sa-zurueck.is-weg { visibility: hidden; }
.sa-zurueck:active { opacity: .45; }
.sa-zu { justify-self: end; }
.sa-person { padding: 18px 24px 2px; text-align: center; }
.sa-name { font-size: 22px; font-weight: 700; color: var(--text); }
.sa-zeit { margin-top: 2px; font-size: 15px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.sa-inhalt { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px 22px; overflow: auto; }
.sa-option { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; padding: 16px 16px 16px 18px; border: 1.5px solid var(--border); border-radius: 14px; background: var(--white); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: background .1s, transform .08s; }
.sa-option:active { background: var(--primary-pale); transform: scale(.99); }
.sa-option:disabled { background: var(--bg); border-color: transparent; cursor: default; transform: none; }
.sa-option:disabled .sa-option-titel { color: var(--text-muted); }
.sa-option-titel { font-size: 18px; font-weight: 700; }
.sa-option-text { grid-column: 1; font-size: 14px; color: var(--text-muted); }
.sa-option svg { grid-row: 1 / 3; grid-column: 2; width: 20px; height: 20px; fill: none; stroke: var(--text-muted); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sa-hinweis { margin: 0; font-size: 14px; line-height: 1.45; color: var(--text-muted); text-align: center; text-wrap: balance; }
.sa-zeiten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sa-zeit-wahl { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 8px; border: 1.5px solid var(--border); border-radius: 14px; background: var(--white); color: var(--text); font: inherit; cursor: pointer; transition: background .1s, transform .08s; }
.sa-zeit-wahl:active { background: var(--primary-pale); transform: scale(.98); }
.sa-zeit-wahl b { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sa-zeit-wahl span { font-size: 13px; color: var(--text-muted); }
.sa-was { padding: 12px 14px; border-radius: 12px; background: var(--primary-pale); color: var(--primary-dark); font-size: 16px; font-weight: 700; text-align: center; }
.sa-was small { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--text-muted); }
.sa-pin-titel { font-size: 15px; font-weight: 600; color: var(--text); text-align: center; }
.sa-pin-titel small { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--text-muted); }
.sa-punkte { display: flex; align-items: center; justify-content: center; gap: 14px; height: 20px; }
.sa-fehler { min-height: 18px; margin-top: -4px; font-size: 14px; font-weight: 600; color: var(--danger); text-align: center; }
.sa-tasten { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 56px; gap: 8px; }
.sa-tasten.is-gesperrt { opacity: .5; pointer-events: none; }
.sa-taste { display: flex; align-items: center; justify-content: center; border-radius: 16px; border: 1.5px solid var(--border); background: var(--bg); color: var(--text); font: inherit; font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; transition: background .1s, transform .08s; }
.sa-taste:active { background: var(--primary-pale); transform: scale(.97); }
.sa-taste svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sa-taste-loeschen { color: var(--text-muted); }
.sa-taste-ok { background: var(--primary); border-color: var(--primary); color: #fff; font-size: 18px; }
.sa-taste-ok:active { background: var(--primary-light); }
.sa-taste:disabled { opacity: .4; cursor: default; transform: none; }
.sa-fertig-zeichen { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin: 2px auto 0; border-radius: 50%; background: var(--primary); }
.sa-fertig-zeichen svg { width: 30px; height: 30px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.sa-knopf { min-height: 50px; border: 0; border-radius: 14px; background: var(--primary); color: #fff; font: inherit; font-size: 17px; font-weight: 600; cursor: pointer; }
.sa-knopf:active { background: var(--primary-light); }


/* ------------------------------------------------------------ */
/*  Kalender wie im Admin (13.10.2026, Lars)                     */
/*  Gleiche Leiste, Monatskarten, Chips, Zeitachse wie die       */
/*  Admin-App (Admin css/main.css .kal-*). Hier ohne Gruen:      */
/*  Veranstaltung rosa statt gruen.                              */
/* ------------------------------------------------------------ */
#tab-kalender .kal-panel { gap: 0; padding: 18px; }

.kal-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; flex-shrink: 0; margin-bottom: 12px; }
.kal-toolbar-spacer { flex: 1; }

.kal-nav {
  display: grid; grid-template-columns: 40px minmax(170px, 1fr) 40px;
  height: 42px; padding: 3px; box-sizing: border-box;
  background: var(--primary-pale); border-radius: 999px;
}
.kal-nav-btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; border-radius: 999px; cursor: pointer;
  color: var(--primary); font-size: 22px; line-height: 1; padding: 0;
}
.kal-nav-btn:active { background: var(--white); }
.kal-nav-label {
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 999px; padding: 0 14px; cursor: pointer;
  background: var(--white); box-shadow: 0 1px 4px rgba(53, 80, 111, .10);
  color: var(--primary); font: inherit; font-size: 14px; font-weight: 700; letter-spacing: -.2px; white-space: nowrap;
}

.kal-view-switcher { display: inline-flex; align-items: center; gap: 3px; height: 42px; padding: 3px; box-sizing: border-box; background: var(--primary-pale); border-radius: 999px; }
.kal-view-btn {
  height: 36px; padding: 0 16px; border: none; border-radius: 999px; background: transparent;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--text-muted); cursor: pointer; white-space: nowrap;
}
.kal-view-btn.active { background: var(--white); color: var(--primary); box-shadow: 0 1px 4px rgba(53, 80, 111, .12); }

.kal-add-btn {
  display: inline-flex; align-items: center; height: 42px; padding: 0 18px; border: none; border-radius: 999px;
  background: linear-gradient(160deg, var(--primary-dark) 0%, var(--primary) 100%); color: #fff;
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap;
  box-shadow: 0 4px 12px rgba(53, 80, 111, .18);
}
.kal-add-btn:active { opacity: .85; }

.kal-body { flex: 1; min-height: 0; position: relative; overflow: hidden; }

/* Farbe je Art (wie Admin; Veranstaltung rosa statt gruen) */
.kal-type-reservierung  { --kt-bg: #dbeafe; --kt-fg: #1e40af; --kt-rand: #93c5fd; }
.kal-type-veranstaltung { --kt-bg: #fce7f3; --kt-fg: #9d174d; --kt-rand: #f9a8d4; }
.kal-type-termin        { --kt-bg: #fef3c7; --kt-fg: #92400e; --kt-rand: #fcd34d; }
.kal-type-intern        { --kt-bg: #ede9fe; --kt-fg: #5b21b6; --kt-rand: #c4b5fd; }
.kal-type-sonstiges,
.kal-type-holiday       { --kt-bg: #f1f5f9; --kt-fg: #334155; --kt-rand: #cbd5e1; }
:root[data-theme="dark"] .kal-type-reservierung  { --kt-bg: rgba(147, 197, 253, .14); --kt-fg: #bfdbfe; --kt-rand: #60a5fa; }
:root[data-theme="dark"] .kal-type-veranstaltung { --kt-bg: rgba(249, 168, 212, .14); --kt-fg: #fbcfe8; --kt-rand: #f472b6; }
:root[data-theme="dark"] .kal-type-termin        { --kt-bg: rgba(252, 211, 77, .14);  --kt-fg: #fde68a; --kt-rand: #fbbf24; }
:root[data-theme="dark"] .kal-type-intern        { --kt-bg: rgba(196, 181, 253, .14); --kt-fg: #ddd6fe; --kt-rand: #a78bfa; }
:root[data-theme="dark"] .kal-type-sonstiges,
:root[data-theme="dark"] .kal-type-holiday       { --kt-bg: rgba(255, 255, 255, .08); --kt-fg: #cbd5e1; --kt-rand: #64748b; }

/* Monat */
.kal-month { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.kal-month-head { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-bottom: 4px; flex-shrink: 0; }
.kal-month-head-cell { padding: 4px 10px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .8px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kal-month-grid {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: repeat(var(--kal-zeilen, 5), minmax(0, 1fr)); gap: 8px; flex: 1; min-height: 0;
}
.kal-month-cell {
  background: var(--white); border: 1px solid var(--border); border-radius: 16px; padding: 8px 10px;
  display: flex; flex-direction: column; gap: 4px; min-width: 0; min-height: 0; overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .03); cursor: pointer;
}
.kal-month-cell.other-month { background: var(--bg); opacity: .58; }
.kal-month-cell.other-month .kal-cell-day { color: var(--text-muted); }
.kal-month-cell.today { border: 2px solid var(--primary); padding: 7px 9px; box-shadow: 0 4px 16px rgba(53, 80, 111, .13); }
.kal-cell-day { display: flex; align-items: center; justify-content: space-between; gap: 6px; color: var(--text); }
.kal-cell-day-num { font-size: 14px; font-weight: 800; line-height: 1; }
.kal-month-cell.today .kal-cell-day-num {
  width: 24px; height: 24px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; font-size: 12px;
}
.kal-cell-day-badge { font-size: 9px; font-weight: 800; border-radius: 999px; padding: 3px 6px; white-space: nowrap; background: var(--primary); color: #fff; }

.kal-chip {
  display: flex; align-items: center; gap: 4px; min-width: 0; flex-shrink: 0;
  padding: 2px 6px; border-radius: 5px; border: none; border-left: 3px solid var(--kt-rand, var(--primary));
  background: var(--kt-bg, var(--primary-pale)); color: var(--kt-fg, var(--primary));
  font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; cursor: pointer;
}
.kal-chip-time { font-weight: 500; opacity: .8; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.kal-chip-title { overflow: hidden; text-overflow: ellipsis; }
.kal-chip-source { margin-left: auto; flex-shrink: 0; font-size: 8px; font-weight: 800; padding: 1px 4px; border-radius: 3px; background: rgba(53, 80, 111, .15); color: var(--primary); }
.kal-more-link { align-self: flex-start; font-size: 10px; font-weight: 600; color: var(--primary); padding: 1px 3px; border-radius: 3px; cursor: pointer; }

/* Woche: der Zeitraum fuellt immer genau die Hoehe (wie im Admin) */
.kal-timeline { display: flex; flex-direction: column; height: 100%; min-height: 0; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--white); }
.kal-timeline-head, .kal-timeline-allday { display: flex; flex-shrink: 0; background: var(--white); border-bottom: 1px solid var(--border); }
.kal-timeline-gutter-head, .kal-timeline-allday-gutter { width: 52px; flex-shrink: 0; }
.kal-timeline-allday-gutter { font-size: 9px; font-weight: 600; color: var(--text-muted); text-align: center; padding: 6px 2px; box-sizing: border-box; }
.kal-timeline-day-head { flex: 1; min-width: 0; padding: 6px 4px; text-align: center; border-left: 1px solid var(--border); color: var(--text); cursor: pointer; }
.kal-timeline-day-head .day-name { font-size: 11px; color: var(--text-muted); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kal-timeline-day-head .day-date { font-size: 16px; font-weight: 800; height: 30px; display: flex; align-items: center; justify-content: center; }
.kal-timeline-day-head.today { color: var(--primary); }
.kal-timeline-day-head.today .day-date { width: 30px; margin: 0 auto; border-radius: 50%; background: var(--primary); color: #fff; font-size: 14px; }
.kal-timeline-allday-cell { flex: 1; min-width: 0; padding: 3px 4px; border-left: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.kal-timeline-allday-cell.today { background: var(--primary-pale); }
.kal-timeline-body { flex: 1; min-height: 0; display: flex; overflow: hidden; }
.kal-time-gutter { width: 52px; flex-shrink: 0; display: flex; flex-direction: column; background: var(--white); }
.kal-hour-label { flex: 1; min-height: 0; padding: 3px 6px 0; font-size: 10px; font-weight: 600; color: var(--text-muted); border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.kal-day-col { flex: 1; min-width: 0; position: relative; display: flex; flex-direction: column; border-left: 1px solid var(--border); background: var(--white); }
.kal-day-col.today { background: var(--bg); }
.kal-hour-row { flex: 1; min-height: 0; position: relative; border-bottom: 1px solid var(--border); cursor: pointer; }
.kal-hour-row::after { content: ''; position: absolute; top: 50%; left: 0; right: 0; border-bottom: 1px dashed rgba(0, 0, 0, .05); pointer-events: none; }
.kal-hour-row:active { background: var(--primary-pale); }
.kal-event-block {
  position: absolute; box-sizing: border-box; z-index: 3; overflow: hidden; cursor: pointer;
  padding: 3px 6px; border-radius: 5px; border: 1.5px solid var(--kt-rand, var(--primary));
  background: var(--kt-bg, var(--primary-pale)); color: var(--kt-fg, var(--primary));
  font-size: 11px; font-weight: 700; line-height: 1.3;
}
.kal-event-block--tiny { padding: 0 5px; font-size: 10px; display: flex; align-items: center; }
.kal-event-block--tiny .kal-event-block-time { display: none; }
.kal-event-block-time { font-size: 10px; font-weight: 500; opacity: .8; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
.kal-event-block-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kal-now-indicator { position: absolute; left: 0; right: 0; height: 2px; background: var(--primary); z-index: 5; pointer-events: none; }
.kal-now-indicator::before { content: ''; position: absolute; left: -1px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); }

/* Eintrag ansehen (wie im Admin) und Tagesuebersicht */
.kal-detail-card { max-width: 440px; border-radius: 20px; }
.kal-detail-header { display: flex; align-items: center; gap: 10px; padding: 18px 20px 0; }
.kal-detail-type-badge { padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; border: 1.5px solid var(--kt-rand, var(--border)); background: var(--kt-bg, var(--primary-pale)); color: var(--kt-fg, var(--primary)); }
.kal-detail-type-badge.ist-tag { border-color: transparent; background: transparent; color: var(--text); font-size: 17px; font-weight: 800; padding: 0; }
.kal-detail-edit-btn { margin-left: auto; height: 36px; padding: 0 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--white); color: var(--primary); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.kal-detail-edit-btn[hidden] { display: none; }
.kal-detail-edit-btn[hidden] + .modal-close { margin-left: auto; }
.kal-detail-header .modal-close { flex-shrink: 0; }
.kal-detail-body { padding: 20px; }
.kal-detail-title { font-size: 20px; font-weight: 700; margin: 0 0 12px; color: var(--text); }
.kal-detail-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; font-size: 15px; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.kal-detail-row:last-child { border-bottom: none; }
.kal-detail-row-icon { flex-shrink: 0; width: 20px; height: 20px; color: var(--primary); }
.kal-detail-row-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kal-drawer-entry { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px; margin-bottom: 8px; border: 1.5px solid var(--border); border-radius: 12px; background: var(--white); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.kal-drawer-entry:last-child { margin-bottom: 0; }
.kal-drawer-entry-time { width: 92px; flex-shrink: 0; font-size: 13px; font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.kal-drawer-entry-title { flex: 1; min-width: 0; font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kal-drawer-entry-type { flex-shrink: 0; padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; background: var(--kt-bg); color: var(--kt-fg); }
.kal-detail-leer { color: var(--text-muted); font-size: 15px; padding: 8px 0; }

/* iPad hoch / schmal: Leiste umbrechen, Zellen enger */
@media (max-width: 900px), (orientation: portrait) {
  .kal-month-head, .kal-month-grid { gap: 5px; }
  .kal-month-head-cell { padding: 4px 4px; letter-spacing: .3px; }
  .kal-month-cell { padding: 6px 6px; border-radius: 12px; }
  .kal-month-cell.today { padding: 5px 5px; }
  .kal-cell-day-badge { display: none; }
  .kal-time-gutter, .kal-timeline-gutter-head, .kal-timeline-allday-gutter { width: 42px; }
}

/* ================================================================
   Kalender: Eintrag anlegen wie im Admin (14.10.2026, Lars)
   Gleiche Form und Schrift wie im Admin (kal-modal), fuer das iPad groesser:
   Felder 52 px hoch, Schrift 17 px, Chips 44 px, Knoepfe 52 px.
   Kopf und Fuss stehen fest, nur die Mitte scrollt.
   ================================================================ */
.kal-blatt {
  max-width: 620px;
  max-height: calc(100dvh - 48px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 24px;
  background: var(--white);
}
.tt-offen .kal-blatt { max-height: 100%; }
.kal-blatt form { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.kal-blatt-kopf {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 20px 12px 24px; flex-shrink: 0;
}
.kal-blatt-titel {
  font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .8px; color: var(--primary);
}
.kal-blatt-zu {
  width: 44px; height: 44px; border: none; background: none; border-radius: 50%;
  font-size: 28px; line-height: 1; color: var(--text-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.kal-blatt-zu:active { background: var(--bg); }

.kal-blatt-body {
  flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 0 24px 20px; display: flex; flex-direction: column; gap: 18px;
}

/* Titel: gross, grauer Grund (wie im Admin) */
.kal-blatt-titel-feld {
  width: 100%; min-height: 60px; padding: 0 20px;
  border: 1.5px solid var(--border); border-radius: 16px; background: var(--bg);
  font-size: 20px; font-weight: 700; color: var(--primary); outline: none;
}
.kal-blatt-titel-feld::placeholder { color: var(--text-muted); font-weight: 600; }
.kal-blatt-titel-feld:focus, .kal-blatt-titel-feld.tt-aktiv { border-color: var(--primary); }

/* Art-Chips */
.kal-blatt-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.kal-blatt-chips button {
  min-height: 44px; padding: 0 18px; border: 1.5px solid var(--border); border-radius: 999px;
  background: var(--white); color: var(--text-muted); font-size: 15px; font-weight: 700; cursor: pointer;
  transition: background .14s, color .14s, border-color .14s;
}
.kal-blatt-chips button.aktiv { background: var(--primary); border-color: var(--primary); color: #fff; }

/* Felder mit kleiner Ueberschrift in Grossbuchstaben */
.kal-blatt-reihe { display: flex; gap: 14px; align-items: flex-end; }
.kal-blatt-reihe[hidden] { display: none; }
.kal-blatt-feld { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.kal-blatt-feld > label:not(.kal-blatt-wert), .kal-blatt-label {
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted);
}
.kal-blatt-feld > input, .kal-blatt-feld > textarea {
  width: 100%; min-height: 52px; padding: 0 16px;
  border: 1.5px solid var(--border); border-radius: 12px; background: var(--white);
  font-size: 17px; font-weight: 600; color: var(--primary); outline: none;
}
.kal-blatt-feld > textarea {
  min-height: 104px; padding: 14px 16px; border-radius: 16px; background: var(--bg);
  font-weight: 400; color: var(--text); resize: none; line-height: 1.4;
}
.kal-blatt-feld > input::placeholder, .kal-blatt-feld > textarea::placeholder { color: var(--text-muted); font-weight: 400; }
.kal-blatt-feld > input:focus, .kal-blatt-feld > textarea:focus,
.kal-blatt-feld > input.tt-aktiv, .kal-blatt-feld > textarea.tt-aktiv { border-color: var(--primary); }

/* Wann: grauer Kasten mit Legende (wie im Admin) */
.kal-blatt-wann {
  margin: 0; padding: 14px 20px 20px; border: 1.5px solid var(--border); border-radius: 16px;
  background: var(--bg); display: flex; flex-direction: column; gap: 14px; min-width: 0;
}
.kal-blatt-wann legend {
  padding: 0 6px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--primary);
}
.kal-blatt-wann .kal-blatt-label { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 700; }

/* Datum/Uhrzeit: sieht aus wie ein Feld, darueber liegt unsichtbar die Auswahl des Systems */
.kal-blatt-wert {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 52px; padding: 0 16px; border: 1.5px solid var(--border); border-radius: 12px;
  background: var(--white); color: var(--primary); font-size: 17px; font-weight: 700;
  font-variant-numeric: tabular-nums; cursor: pointer; flex: 1; min-width: 0;
}
.kal-blatt-wert svg { flex-shrink: 0; color: var(--primary); }
.kal-blatt-wert.leer { color: var(--text-muted); font-weight: 600; }
.kal-blatt-wert input {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: none; cursor: pointer;
}
.kal-blatt-wert-mit-x { display: flex; align-items: center; gap: 8px; }
.kal-blatt-wert-mit-x .kal-leeren {
  width: 44px; height: 44px; flex-shrink: 0; border: none; border-radius: 50%;
  background: var(--white); color: var(--text-muted); font-size: 22px; cursor: pointer;
}
.kal-blatt-wert-mit-x .kal-leeren[hidden] { display: none; }

/* Ganztaegig + Schalter wie iOS (51 x 31) */
.kal-blatt-ganztag {
  display: flex; align-items: center; gap: 12px; min-height: 52px; flex-shrink: 0; cursor: pointer;
  font-size: 15px; font-weight: 700; color: var(--text-muted); white-space: nowrap;
}
.kal-schalter { position: relative; display: inline-block; width: 51px; height: 31px; }
.kal-schalter input { position: absolute; opacity: 0; width: 0; height: 0; }
.kal-schalter-spur { position: absolute; inset: 0; border-radius: 999px; background: var(--border); transition: background .2s; }
.kal-schalter-spur::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .2s;
}
.kal-schalter input:checked + .kal-schalter-spur { background: var(--primary); }
.kal-schalter input:checked + .kal-schalter-spur::after { transform: translateX(20px); }

/* Personen: Stepper im Feld-Look */
.kal-blatt-stepper {
  display: grid; grid-template-columns: 52px 1fr 52px; min-height: 52px;
  border: 1.5px solid var(--border); border-radius: 12px; background: var(--white); overflow: hidden;
}
.kal-blatt-stepper button {
  border: none; background: none; color: var(--primary); font-size: 24px; font-weight: 600; cursor: pointer;
}
.kal-blatt-stepper button:active { background: var(--bg); }
.kal-blatt-stepper input {
  width: 100%; min-width: 0; border: none; background: none; text-align: center; outline: none;
  font-size: 17px; font-weight: 700; color: var(--primary); -moz-appearance: textfield;
}
.kal-blatt-stepper input::-webkit-inner-spin-button, .kal-blatt-stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Fuss: Loeschen links, Abbrechen + Eintrag speichern rechts */
.kal-blatt-fuss {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-shrink: 0;
  padding: 14px 24px 22px; border-top: 1px solid var(--border);
}
.kal-blatt-fuss > #kal-delete-gruppe { margin-right: auto; }
.kal-blatt-fuss > #kal-delete-gruppe[hidden] { display: none; }
.kal-blatt-loeschen, .kal-blatt-abbrechen, .kal-blatt-sichern {
  min-height: 52px; padding: 0 22px; border: none; border-radius: 999px;
  font-size: 16px; font-weight: 700; cursor: pointer;
}
.kal-blatt-loeschen { background: none; color: var(--danger); }
.kal-blatt-abbrechen { background: none; color: var(--text); }
.kal-blatt-loeschen:active, .kal-blatt-abbrechen:active { background: var(--bg); }
.kal-blatt-sichern {
  padding: 0 28px; color: #fff;
  background: linear-gradient(160deg, var(--primary-dark) 0%, var(--primary) 100%);
  box-shadow: 0 4px 12px rgba(53, 80, 111, .18);
}
.kal-blatt-sichern:active { opacity: .85; }

/* Schmal (iPad hoch, kleine Fenster): Datum und Ganztaegig untereinander */
@media (max-width: 560px) {
  .kal-blatt-body { padding: 0 16px 16px; }
  .kal-blatt-wann > .kal-blatt-reihe:first-of-type { flex-wrap: wrap; }
  .kal-blatt-fuss { padding: 12px 16px 18px; }
}

/* ================================================================
   Reiter Notizen (14.10.2026, Lars): An den Chef | Fürs Team
   Zwei Spalten im iPad-Querformat, darunter einspaltig. Blatt nutzt
   die Bausteine von „Eintrag anlegen“ (.kal-blatt-*).
   ================================================================ */
#tab-notizen .box-kopf { flex-wrap: wrap; }
#tab-notizen .box-unter { margin-left: 0; }
.notiz-spalten {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px;
  align-items: start; -webkit-overflow-scrolling: touch;
}
.notiz-spalte {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
  padding: 16px; border-radius: 20px; background: var(--bg); border: 1px solid var(--border);
}
.notiz-spalte-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.notiz-spalte-titel { flex: 1; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--primary); }
.notiz-spalte-zahl {
  min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--white); color: var(--primary); font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.notiz-leer { padding: 22px 8px; text-align: center; font-size: 15px; color: var(--text-muted); }
.notiz-gruppe { display: flex; flex-direction: column; border-radius: 16px; background: var(--white); border: 1px solid var(--border); overflow: hidden; }
.notiz-zeile { display: flex; align-items: stretch; min-height: 64px; }
.notiz-zeile + .notiz-zeile { border-top: 1px solid var(--border); }
.notiz-kreis {
  flex-shrink: 0; width: 60px; border: none; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.notiz-kreis svg {
  width: 30px; height: 30px; padding: 5px; box-sizing: border-box; border-radius: 50%;
  border: 2px solid var(--border); fill: none; stroke: transparent; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
}
.notiz-ist-dringend .notiz-kreis svg { border-color: var(--danger); }
.notiz-erledigt .notiz-kreis svg { background: var(--primary); border-color: var(--primary); stroke: #fff; }
.notiz-mitte {
  flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px;
  padding: 12px 16px 12px 0; border: none; background: none; text-align: left; font: inherit; cursor: pointer;
}
.notiz-zeilen-text { font-size: 17px; font-weight: 600; color: var(--text); line-height: 1.35; overflow-wrap: anywhere; white-space: pre-line; }
.notiz-erledigt .notiz-zeilen-text { color: var(--text-muted); text-decoration: line-through; }
.notiz-meta { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
/* Wer hat's gesehen (Idee C, 16.10.2026): unter Team-Notizen, in Hausblau */
.notiz-gesehen { display: flex; align-items: flex-start; gap: 5px; font-size: 13px; font-weight: 600; color: var(--primary); line-height: 1.35; overflow-wrap: anywhere; }
.notiz-gesehen svg { flex: none; width: 15px; height: 15px; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.notiz-erledigt .notiz-gesehen { color: var(--text-muted); }
.notiz-marke {
  padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px;
}

/* Blatt */
.notiz-blatt { max-width: 560px; }
.notiz-blatt .notiz-text { min-height: 150px; padding-top: 16px; line-height: 1.4; resize: none; font-family: inherit; }
.notiz-blatt .notiz-dringend { justify-content: space-between; padding: 0 4px; }
.notiz-foto { display: flex; flex-direction: column; gap: 10px; }
.notiz-foto-knopf {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 60px; padding: 10px 16px;
  border-radius: 14px; border: 1px solid var(--border); background: var(--white); color: var(--primary);
  font: inherit; text-align: left; cursor: pointer;
}
.notiz-foto-knopf svg { width: 28px; height: 28px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.notiz-foto-text { display: flex; flex-direction: column; gap: 2px; }
.notiz-foto-text > span { font-size: 16px; font-weight: 700; }
.notiz-foto-text small { font-size: 13px; font-weight: 600; color: var(--primary); opacity: .75; }
.notiz-foto-bild { position: relative; border-radius: 14px; overflow: hidden; background: var(--bg); border: 1px solid var(--border); }
.notiz-foto-bild img { display: block; width: 100%; max-height: 240px; object-fit: contain; }
.notiz-foto-bild.laedt img { visibility: hidden; min-height: 120px; }
.notiz-foto-weg {
  position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; border-radius: 50%; border: none;
  background: rgba(0, 0, 0, .55); color: #fff; font-size: 24px; line-height: 1; cursor: pointer;
}
/* Foto per Handy (20261014w): QR-Code im Blatt, das Handy oeffnet die Worker-App */
.notiz-handy {
  display: flex; align-items: center; gap: 18px; padding: 14px; border-radius: 14px;
  border: 1px solid var(--border); background: var(--white);
}
.notiz-handy-qr { flex-shrink: 0; width: 184px; height: 184px; padding: 12px; border-radius: 10px; background: #fff; }
.notiz-handy-qr canvas, .notiz-handy-qr img { width: 160px !important; height: 160px !important; }
.notiz-handy.laedt .notiz-handy-qr { opacity: .15; }
.notiz-handy-seite { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.notiz-handy-seite strong { font-size: 17px; font-weight: 700; color: var(--text); }
.notiz-handy-zeit { font-size: 15px; font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; }
.notiz-handy-zu {
  margin-top: 8px; min-height: 44px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--white); color: var(--primary); font: inherit; font-weight: 700; cursor: pointer;
}
.notiz-foto-knopf[hidden], .notiz-handy[hidden] { display: none; }
@media (max-width: 520px) { .notiz-handy { flex-direction: column; align-items: center; text-align: center; } .notiz-handy-seite { align-items: center; } }
.notiz-foto-marke { display: inline-flex; width: 18px; height: 18px; color: var(--primary); }
.notiz-foto-marke svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }

/* Team-Notizen auf der Bestätigung beim Stempeln (Idee A, 14.10.2026, Lars: kein Blau, schlank, 10 Punkte müssen passen).
   Hell wie die Reiter; Farben fest, auch dunkel, wie die Bestätigung. */
.st-ergebnis.is-ok.mit-uebergabe { background: #eef2f6; color: #1d2b3e; overflow-y: auto; align-items: safe center; }
.mit-uebergabe .st-ergebnis-inhalt { width: min(920px, 100%); gap: 6px; }
.is-ok.mit-uebergabe .st-ergebnis-symbol { width: 56px; height: 56px; margin-bottom: 0; background: #35506f; box-shadow: none; }
.is-ok.mit-uebergabe .st-ergebnis-symbol svg { width: 32px; height: 32px; }
.is-ok.mit-uebergabe .st-ergebnis-titel { font-size: 40px; color: #1d2b3e; letter-spacing: -.8px; }
.is-ok.mit-uebergabe .st-ergebnis-text,
.is-ok.mit-uebergabe .st-ergebnis-dienst { color: #35506f; }
.is-ok.mit-uebergabe .st-ergebnis-zusatz { background: #fef3c7; color: #92400e; }
.mit-uebergabe .st-ergebnis-dienst { margin-top: 0; font-size: 17px; }
.st-uebergabe { align-self: stretch; margin-top: 14px; padding: 16px 22px 8px; border-radius: 20px; background: #fff; text-align: left; }
.st-uebergabe-kopf {
  display: flex; align-items: center; gap: 8px; padding-bottom: 6px;
  font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #35506f;
}
.st-uebergabe-zahl {
  min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: #e7edf4;
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; letter-spacing: 0;
}
.st-uebergabe-liste.is-zweispaltig { columns: 2; column-gap: 36px; }
@media (orientation: portrait) { .st-uebergabe-liste.is-zweispaltig { columns: 1; } }
.st-uebergabe-zeile {
  display: flex; align-items: baseline; gap: 12px; padding: 10px 0; break-inside: avoid;
  border-top: 1px solid #edf1f5; font-size: 18px; font-weight: 600; line-height: 1.3; color: #1d2b3e;
}
.st-uebergabe-zeile::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #35506f; transform: translateY(-2px); }
.st-uebergabe-zeile.is-dringend::before { background: #e74c3c; }
.st-uebergabe-zeile.is-mehr { color: #35506f; }
.st-uebergabe-zeile.is-mehr::before { background: transparent; }
.st-uebergabe-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.st-uebergabe-marke { flex: none; padding: 2px 10px; border-radius: 999px; background: #fdeeec; color: #c0392b; font-size: 13px; font-weight: 800; }
.st-uebergabe-ok {
  align-self: stretch; margin-top: 12px; min-height: 56px; border: 0; border-radius: 16px;
  background: #35506f; color: #fff; font: inherit; font-size: 19px; font-weight: 700; cursor: pointer;
}

/* Feierabend-Bilanz (Idee A, 15.10.2026): Heute / Diese Woche unter „Arbeit beendet“ */
.st-bilanz {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  width: min(560px, 100%);
  margin-top: 26px;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, .22);
  font-variant-numeric: tabular-nums;
}
.st-bilanz-feld { padding: 16px 22px 18px; background: rgba(255, 255, 255, .1); text-align: left; min-width: 0; }
.st-bilanz-name { font-size: 15px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: rgba(255, 255, 255, .75); }
.st-bilanz-wert { margin-top: 4px; font-size: 40px; font-weight: 700; letter-spacing: -.6px; line-height: 1.1; color: #fff; white-space: nowrap; }
.st-bilanz-soll { font-size: 22px; font-weight: 600; letter-spacing: 0; color: rgba(255, 255, 255, .8); }
.st-bilanz-balken { height: 6px; margin-top: 12px; border-radius: 3px; background: rgba(255, 255, 255, .22); overflow: hidden; }
.st-pause-fehlt { margin-top: 14px; padding: 12px 18px; border-radius: 14px; background: #fff3dc; color: #8a5200; font-size: 20px; font-weight: 500; line-height: 1.35; text-align: left; }
.st-pause-fehlt strong { font-weight: 700; margin-right: 6px; }
.st-bilanz-balken span { display: block; height: 100%; border-radius: 3px; background: #fff; }
@media (max-width: 600px) {
  .st-bilanz-wert { font-size: 30px; }
  .st-bilanz-soll { font-size: 17px; }
}

/* Bildschirmschoner (Idee D, 15.10.2026, Lars): Vollbild im Schichtwerk-Look wie das Startbild */
#st-schoner {
  position: fixed;
  inset: 0;
  z-index: 950;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: max(28px, env(safe-area-inset-top)) 32px max(28px, env(safe-area-inset-bottom));
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
  color: #fff;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  animation: schoner-rein .6s ease both;
}
#st-schoner.hidden { display: none; }
@keyframes schoner-rein { from { opacity: 0; } to { opacity: 1; } }

/* weicher Lichtschein, der langsam durchs Bild zieht */
.schoner-glanz {
  position: absolute;
  width: 90vmax;
  height: 90vmax;
  left: -20vmax;
  top: -30vmax;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .13), rgba(255, 255, 255, 0) 62%);
  animation: schoner-glanz 48s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes schoner-glanz { from { transform: translate(0, 0); } to { transform: translate(45vw, 55vh); } }

.schoner-oben {
  position: absolute;
  top: max(28px, env(safe-area-inset-top));
  left: 32px;
  right: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.schoner-marke { display: flex; align-items: center; gap: 12px; font-size: 19px; font-weight: 600; letter-spacing: .4px; }
.schoner-logo { width: 34px; height: auto; display: block; }
.schoner-betrieb { font-size: 17px; font-weight: 600; color: rgba(255, 255, 255, .78); text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.schoner-mitte { text-align: center; transition: transform 6s ease-in-out; }
.schoner-uhr {
  font-size: clamp(120px, 21vw, 260px);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.schoner-datum { margin-top: 14px; font-size: clamp(22px, 2.6vw, 32px); font-weight: 500; color: rgba(255, 255, 255, .8); }

.schoner-hinweis {
  position: absolute;
  bottom: max(32px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 26px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, .45);
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
  animation: schoner-atmen 3.2s ease-in-out infinite;
}
@keyframes schoner-atmen { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  #st-schoner, .schoner-glanz, .schoner-hinweis { animation: none; }
  .schoner-mitte { transition: none; }
}

/* ── Sprachwahl: Zeile + Fenster mit Suche (js/sprachwahl.js, 15.10.2026) – gleich in Admin und Worker ── */
.swl-zeile { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 14px; background: var(--white); color: var(--text); font: inherit; text-align: start; cursor: pointer; }
.swl-zeile:hover { background: var(--primary-pale); }
.swl-zeile:disabled { opacity: .6; cursor: default; }
.swl-zeile:focus-visible, .swl-eintrag:focus-visible, .swl-zu:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.swl-marke { flex-shrink: 0; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--bg); color: var(--text-muted); font-size: 11px; font-weight: 800; letter-spacing: .4px; }
.swl-marke--an { background: var(--primary); color: var(--white); }
.swl-text { flex: 1; min-width: 0; display: grid; text-align: start; }
.swl-name { font-size: 16px; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.swl-unter { font-size: 13px; color: var(--text-muted); overflow-wrap: anywhere; }
.swl-pfeil { flex-shrink: 0; font-size: 22px; line-height: 1; color: var(--text-muted); }
[dir="rtl"] .swl-pfeil { transform: scaleX(-1); }
.swl-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-end; justify-content: center; background: rgba(0, 0, 0, 0); transition: background .25s ease; }
.swl-overlay--offen { background: rgba(0, 0, 0, .45); }
.swl-blatt { width: 100%; max-width: 480px; max-height: calc(86dvh / var(--ui-zoom, 1)); display: flex; flex-direction: column; padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; background: var(--white); box-shadow: 0 -8px 30px rgba(0, 0, 0, .15); transform: translateY(100%); transition: transform .28s ease, opacity .2s ease; }
.swl-overlay--offen .swl-blatt { transform: none; }
.swl-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.swl-titel { margin: 0; font-size: 20px; font-weight: 800; color: var(--text); }
.swl-zu { flex-shrink: 0; width: 34px; height: 34px; border: none; border-radius: 50%; background: var(--bg); color: var(--text-muted); font-size: 20px; line-height: 1; cursor: pointer; }
.swl-suche { display: flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: 12px; background: var(--bg); margin-bottom: 6px; }
.swl-suche svg { flex-shrink: 0; width: 18px; height: 18px; fill: none; stroke: var(--text-muted); stroke-width: 2; }
.swl-suche input { flex: 1; min-width: 0; padding: 11px 0; border: none; background: transparent; color: var(--text); font: inherit; font-size: 16px; outline: none; }
.swl-liste { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.swl-gruppe { margin: 14px 4px 6px; font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--text-muted); }
.swl-eintrag { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: none; border-radius: 12px; background: transparent; color: var(--text); font: inherit; cursor: pointer; }
.swl-eintrag:hover, .swl-eintrag--an { background: var(--primary-pale); }
.swl-haken { flex-shrink: 0; width: 20px; height: 20px; fill: none; stroke: var(--primary); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.swl-leer { padding: 18px 12px; color: var(--text-muted); }
@media (min-width: 700px) {
  .swl-overlay { align-items: center; }
  .swl-blatt { max-height: calc(80dvh / var(--ui-zoom, 1)); border-radius: 20px; opacity: 0; transform: translateY(16px); }
  .swl-overlay--offen .swl-blatt { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .swl-overlay, .swl-blatt { transition: none; } }
.eins-sprache { display: grid; gap: 10px; padding: 16px 0; }
/* Arabisch: Stunden „7:45 h“ bleiben in Lese-Richtung der Zahl, Spalte rechts bündig (16.10.2026, terminal-sprachen) */
[dir="rtl"] .st-bilanz-wert { direction: ltr; text-align: right; }
[dir="rtl"] .st-bilanz-soll { direction: rtl; unicode-bidi: isolate; margin-left: .3em; }
/* ─── Schichtwerk Handwerk (Branchen-Schalter, 16.10.2026, js/branche.js) ───
   Greift nur bei <html data-branche="handwerk"> — Gastro hat das Attribut nie und bleibt unverändert. */
:root[data-branche="handwerk"] {
  /* Werte kommen aus BRANCHEN_LISTE (js/branche.js, marke.farben) als --branche-*; Farbe nur dort tauschen */
  --primary:       var(--branche-primary);
  --primary-dark:  var(--branche-tief);
  --primary-light: var(--branche-hell);
  --primary-pale:  var(--branche-blass);
}
:root[data-theme="dark"][data-branche="handwerk"] {
  --primary:       var(--branche-nacht-primary);
  --primary-dark:  var(--branche-nacht-tief);
  --primary-light: var(--branche-nacht-hell);
  --primary-pale:  var(--branche-nacht-blass);
}
/* Handwerk Anthrazit (18.10.2026): kleiner Orange-Akzent als Linie unter dem aktiven Reiter */
:root[data-branche="handwerk"] .app-nav-btn.active { box-shadow: inset 0 -3px 0 var(--branche-akzent), 0 10px 24px rgba(27, 30, 33, 0.22); }
:root[data-theme="dark"][data-branche="handwerk"] .app-nav-btn.active { box-shadow: inset 0 -3px 0 var(--branche-nacht-akzent), 0 10px 24px rgba(0, 0, 0, 0.3); }