/* ═══════════════════════════════════════════════════════════════
   SCHICHTWERK WORKER — main.css
   ═══════════════════════════════════════════════════════════════ */

/* ─── Splash-Screen ──────────────────────────────────────────── */
#screen-splash {
  /* 01.10.2026: feste Markenfarbe statt Farbverlauf aus --primary — genau wie der
     Android-Startbildschirm (res/values/splash_farben.xml), damit der Wechsel
     vom nativen Splash zu diesem hier nicht sichtbar ist. */
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #243754;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .5s ease, visibility .5s ease;
}
#screen-splash.splash-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Logo steht exakt in der Bildschirmmitte (wie beim Android-Splash),
   Name und Punkte hängen darunter, ohne das Logo zu verschieben. */
.splash-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

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

.splash-name,
.splash-dots {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  animation: splashFadeIn .6s ease both;
}

.splash-name {
  top: calc(100% + 18px);
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.3px;
  white-space: nowrap;
}

.splash-dots {
  top: calc(100% + 72px);
  display: flex;
  gap: 8px;
}
.splash-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  animation: splashDot 1.2s ease-in-out infinite;
}
.splash-dots span:nth-child(2) { animation-delay: .15s; }
.splash-dots span:nth-child(3) { animation-delay: .3s; }

@keyframes splashDot {
  0%, 60%, 100% { opacity: .35; transform: scale(1); }
  30% { opacity: 1; transform: scale(1.3); }
}

@keyframes splashFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ─── CSS-Variablen & Reset ──────────────────────────────────── */
:root {
  --primary:       #35506f;
  --primary-light: #4a6d94;
  --primary-pale:  #edf2f6;
  --primary-dark:  #243a52;
  --text:          #203142;
  --text-muted:    #667688;
  --border:        #d9e3ec;
  --bg:            #dde4ec;
  --bg-gradient:   linear-gradient(160deg, #e2e8f0 0%, #cdd6e0 100%);
  --white:         #ffffff;
  --danger:        #DC2626;
  --success:       #059669;
  --radius:        12px;
  --radius-sm:     8px;
  --shadow:        0 4px 16px rgba(0,0,0,.06);
  --nav-h:         64px;
}

/* Dark Mode */
html.dark {
  --bg:          #0f1b2a;
  --bg-gradient: linear-gradient(160deg, #18283a 0%, #0f1b2a 100%);
  --white:       #111827;
  --text:        #F3F4F6;
  --text-muted:  #8fa3bc;
  --border:      #374151;
  --primary-pale: #1e2d42;
  --primary-dark: #172433;
  --shadow:      0 4px 16px rgba(0,0,0,.3);
}

/* ─── Farbmodi (Color Themes) ──────────────────────────────── */
/* Forest — Waldgrün */
html.color-forest {
  --primary:       #2d6a4f;
  --primary-light: #40916c;
  --primary-pale:  #ecf5f0;
  --primary-dark:  #1b4332;
}
html.dark.color-forest {
  --primary-pale:  #1a2e23;
  --primary-dark:  #14261b;
}

/* Sunset — Warmes Orange/Rot */
html.color-sunset {
  --primary:       #9c4221;
  --primary-light: #c05621;
  --primary-pale:  #fdf0e8;
  --primary-dark:  #7b2d12;
}
html.dark.color-sunset {
  --primary-pale:  #2e1f14;
  --primary-dark:  #1e1410;
}

/* Berry — Beerenfarben/Violett */
html.color-berry {
  --primary:       #6b3fa0;
  --primary-light: #8b5cf6;
  --primary-pale:  #f3eef9;
  --primary-dark:  #4c2882;
}
html.dark.color-berry {
  --primary-pale:  #241a30;
  --primary-dark:  #1a1226;
}

/* Slate — Neutrales Schiefergrau */
html.color-slate {
  --primary:       #475569;
  --primary-light: #64748b;
  --primary-pale:  #f1f5f9;
  --primary-dark:  #334155;
}
html.dark.color-slate {
  --primary-pale:  #1e2533;
  --primary-dark:  #1a202e;
}

/* Rose — Zartes Rosa (analog zu Ocean: kaum Farbe, viel Grau) */
html.color-rose {
  --primary:       #6b5060;
  --primary-light: #856e7c;
  --primary-pale:  #f0ecee;
  --primary-dark:  #4e3a46;
  --bg:            #e4dde0;
  --bg-gradient:   linear-gradient(160deg, #e9e3e6 0%, #ddd7da 100%);
  --text:          #33262e;
  --text-muted:    #7e6f77;
  --border:        #d8d1d4;
}
html.dark.color-rose {
  --primary-pale:  #252022;
  --primary-dark:  #1b171a;
  --bg:            #151113;
  --bg-gradient:   linear-gradient(160deg, #1e191b 0%, #151113 100%);
  --text:          #f0eded;
  --text-muted:    #9e949a;
  --border:        #362f33;
}

/* Mono — Schwarz-Weiß (analog zu Ocean) */
html.color-mono {
  --primary:       #3a3a3a;
  --primary-light: #555555;
  --primary-pale:  #f0f0f0;
  --primary-dark:  #252525;
  --bg:            #e2e2e2;
  --bg-gradient:   linear-gradient(160deg, #e8e8e8 0%, #d9d9d9 100%);
  --text:          #1a1a1a;
  --text-muted:    #777777;
  --border:        #d0d0d0;
}
html.dark.color-mono {
  --primary-pale:  #1e1e1e;
  --primary-dark:  #161616;
  --bg:            #0e0e0e;
  --bg-gradient:   linear-gradient(160deg, #181818 0%, #0e0e0e 100%);
  --text:          #e8e8e8;
  --text-muted:    #999999;
  --border:        #333333;
}

/* Lavender — Weiches Lavendel (analog zu Ocean) */
html.color-lavender {
  --primary:       #6e5e9e;
  --primary-light: #8878b5;
  --primary-pale:  #efedf5;
  --primary-dark:  #524577;
  --bg:            #e0dce8;
  --bg-gradient:   linear-gradient(160deg, #e6e2ed 0%, #d8d3e1 100%);
  --text:          #2d2640;
  --text-muted:    #7d7291;
  --border:        #d3ced9;
}
html.dark.color-lavender {
  --primary-pale:  #211c2e;
  --primary-dark:  #181422;
  --bg:            #12101a;
  --bg-gradient:   linear-gradient(160deg, #1c1826 0%, #12101a 100%);
  --text:          #f0eef3;
  --text-muted:    #9b90ac;
  --border:        #362f42;
}

/* Mint — Weiches Mint (analog zu Ocean) */
html.color-mint {
  --primary:       #4a8e86;
  --primary-light: #5ea8a0;
  --primary-pale:  #ebf3f2;
  --primary-dark:  #3a706a;
  --bg:            #dbe6e4;
  --bg-gradient:   linear-gradient(160deg, #e2ece9 0%, #d3dfdd 100%);
  --text:          #1e3533;
  --text-muted:    #6d8885;
  --border:        #cdd8d5;
}
html.dark.color-mint {
  --primary-pale:  #1a2524;
  --primary-dark:  #131c1b;
  --bg:            #0e1917;
  --bg-gradient:   linear-gradient(160deg, #162220 0%, #0e1917 100%);
  --text:          #eef3f2;
  --text-muted:    #8baba6;
  --border:        #2d3d3a;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  height: 100%;
  overflow: hidden;
  position: fixed;
  width: 100%;
  background: #c8d3de;
  touch-action: pan-x pan-y;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  background: var(--bg-gradient);
  color: var(--text);
  height: 100%;
  max-width: 430px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  overscroll-behavior: none;
}

/* ─── Utilities ──────────────────────────────────────────────── */
.hidden { display: none !important; }
/* Nicht im Tarif (app.js appTarifAnwenden) — eigene Klasse, damit .hidden-Umschalter sie nicht aufheben */
.tarif-aus { display: none !important; }

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: linear-gradient(135deg, var(--primary-light), var(--primary));
  color: #fff;
  border: none;
  border-radius: 13px;
  padding: 15px 20px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(42,157,143,0.3);
  transition: transform .15s;
}
.btn-primary:active { transform: scale(0.97); }
.btn-primary:disabled { opacity: .55; cursor: not-allowed; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--white);
  color: var(--text);
  border: 2px solid var(--border);
  border-radius: 13px;
  padding: 15px 20px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .15s, border-color .15s;
}
.btn-secondary:active { transform: scale(0.97); border-color: var(--primary); }
.btn-secondary:disabled { opacity: .55; cursor: not-allowed; }

.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--danger);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 13px 20px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
}
.btn-danger:hover { opacity: .88; }

.btn-success {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--success);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.btn-sm {
  padding: 7px 14px;
  font-size: 13px;
  border-radius: var(--radius-sm);
}

.btn-full { width: 100%; }

/* (Login-Styles sind weiter unten bei "Onboarding / Login-Panels") */

.form-field {
  margin-bottom: 16px;
}

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.form-input {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 15px;
  color: var(--text);
  background: var(--bg);
  transition: border-color .15s;
  appearance: none;
  -webkit-appearance: none;
}

.form-input:focus {
  outline: none;
  border-color: var(--primary);
}

#join-toggle-btn {
  background: none;
  border: none;
  color: var(--primary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#join-section {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  width: 100%;
  max-width: 380px;
  margin-top: 16px;
}

.join-card-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--text);
}

#join-success {
  background: #f0faf4;
  border: 1.5px solid var(--success);
  border-radius: var(--radius-sm);
  padding: 16px;
  color: var(--success);
  font-size: 14px;
  line-height: 1.6;
  font-weight: 500;
}

html.dark #join-success {
  background: #1a2e23;
}

/* ─── App-Shell ──────────────────────────────────────────────── */
#app-screen {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg);
  overflow: hidden;
}

/* Offline-Banner */
.offline-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  margin: 0 18px;
  background: #fef3c7;
  color: #92400e;
  font-size: 13px;
  font-weight: 600;
  border-radius: 12px;
  transition: opacity 0.3s ease, max-height 0.3s ease;
}
.offline-banner.hidden {
  display: none;
}
html.dark .offline-banner {
  background: #3a2e12;
  color: #fcd34d;
}

/* Abo gesperrt (app.js appAboSperreAnzeigen, 30.09.2026) */
.abo-sperre {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--bg-gradient);
}
.abo-sperre.hidden { display: none; }
.abo-sperre-box {
  width: 100%;
  max-width: 340px;
  padding: 28px 24px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-align: center;
}
.abo-sperre-titel { font-size: 19px; font-weight: 800; color: var(--text); margin-bottom: 6px; }
.abo-sperre-text { font-size: 14px; color: var(--text-muted); margin-bottom: 18px; }
.abo-sperre-abmelden {
  border: none;
  background: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
}

/* Header */
.app-header {
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
  color: #fff;
  padding: 20px 18px 20px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 6px 18px;
  margin-top: max(6px, env(safe-area-inset-top, 6px));
  border-radius: 20px;
  padding-top: 16px;
  z-index: 100;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2), 0 2px 8px rgba(0,0,0,0.08);
  position: relative;
}

.app-header-back {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255,255,255,0.9);
  padding: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  -webkit-tap-highlight-color: transparent;
}
.app-header-back.hidden { display: none; }
.app-header-back:not(.hidden) ~ .app-header-greeting {
  padding-left: 28px;
}

.app-header-greeting {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.2px;
  flex: 1;
  text-align: left;
}

.app-header-bell {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  padding: 0;
  border: none;
  border-radius: 12px;
  background: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.9);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.app-header-bell:active { transform: translateY(-50%) scale(0.97); }

html.dark .app-header {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-dark) 100%);
  box-shadow: 0 8px 24px rgba(0,0,0,0.32), 0 2px 8px rgba(0,0,0,0.22);
}

html.dark .timer-card,
html.dark .timer-next-card,
html.dark .timer-stat-cell {
  background: #111827;
  color: #F3F4F6;
  box-shadow: 0 6px 24px rgba(0,0,0,.24);
}

html.dark .timer-next-plan-btn {
  background: #18362f;
  color: #7dd3c7;
}

html.dark .timer-stat-value {
  color: #F3F4F6;
}

html.dark .login-card {
  background: var(--white);
  color: var(--text);
}

html.dark .login-badge {
  background: #1e2d42;
  color: #7da8c8;
  border-color: #374151;
}

html.dark .login-panel-title { color: var(--text); }
html.dark .login-panel .form-input {
  background: #1F2937;
  color: #F3F4F6;
  border-color: #374151;
}
html.dark .login-panel .form-input::placeholder { color: #6B7280; }
html.dark .login-panel .form-label { color: #8fa3bc; }

html.dark .bottom-nav {
  background: #111827;
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
}

html.dark .modal-card {
  background: #111827;
}

html.dark .form-input {
  background: #1F2937;
  color: #F3F4F6;
  border-color: #374151;
}

/* Tab-Panes */
.app-content {
  flex: 1;
  overflow: hidden;
  padding-bottom: 80px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.tab-pane {
  padding: 16px 16px 8px;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#tab-timer {
  overflow: hidden;
}

#tab-log {
  overflow: hidden;
}

#log-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

#tab-log .log-add-top-btn {
  flex-shrink: 0;
}

/* Segment-Toggle (Aktuell / Abgegeben) */
.log-segment {
  display: flex;
  gap: 0;
  background: var(--card-bg, #fff);
  border-radius: 12px;
  padding: 3px;
  margin-bottom: 12px;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.log-segment-btn {
  flex: 1;
  padding: 8px 0;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  background: transparent;
  color: var(--text-muted, #7a8ca0);
  cursor: pointer;
  transition: all .2s ease;
}
.log-segment-btn.active {
  background: var(--primary, #35506f);
  color: #fff;
  box-shadow: 0 2px 6px rgba(53,80,111,.25);
}
.log-segment-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
  margin-left: 5px;
  vertical-align: middle;
}
.log-segment-btn.active .log-segment-badge {
  background: rgba(255,255,255,.25);
  color: #fff;
}
.log-segment-btn:not(.active) .log-segment-badge {
  background: var(--primary, #35506f);
  color: #fff;
}

.log-scroll-area {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-bottom: 24px;
  min-height: 0;
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(to bottom, black 0%, black calc(100% - 24px), transparent 100%);
}

#tab-einstellungen {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 16px, black calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 16px, black calc(100% - 24px), transparent 100%);
}

#tab-plan {
  overflow: hidden;
}
#tab-plan #plan-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Bottom Navigation */
.bottom-nav {
  position: fixed;
  bottom: 18px;
  left: 24px;
  right: 24px;
  margin: 0 auto;
  max-width: 380px;
  background: var(--white);
  border-radius: 28px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.10);
  display: flex;
  z-index: 200;
  padding: 4px;
}

.nav-btn {
  flex: 1;
  padding: 8px 4px;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: #9CA3AF;
  font-size: 10px;
  font-weight: 600;
  border-radius: 18px;
  position: relative;
  z-index: 3;
  transition: color .2s;
}
.nav-btn.active {
  color: #fff;
}

.nav-indicator {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  border-radius: 18px;
  background: var(--primary);
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  will-change: transform, width;
}

.nav-indicator.nav-indicator--no-transition,
.nav-indicator.nav-indicator--no-transition .nav-indicator-inner {
  transition: none !important;
}

.nav-indicator-inner {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  height: 100%;
  color: #fff;
  pointer-events: none;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.nav-indicator-inner .nav-btn-ghost {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  flex-shrink: 0;
}

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

.nav-btn-avatar {
  flex: 0 0 auto;
  padding: 5px 10px;
  background: none;
}
.nav-btn-avatar.active { background: transparent; }

.nav-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  box-shadow: 0 0 0 2.5px white, 0 0 0 4.5px var(--primary);
  transition: box-shadow 0.2s;
}

.nav-btn-avatar.active .nav-avatar {
  box-shadow: 0 0 0 2.5px white, 0 0 0 5px var(--primary), 0 0 0 7px rgba(42,157,143,0.25);
}

.nav-badge {
  position: absolute;
  top: 4px;
  right: 8px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* Card-Wrap (äußerer Tiefencontainer) */
.card-wrap {
  background: #f6f7f9;
  border-radius: 26px;
  padding: 12px;
  margin-bottom: 14px;
  width: 100%;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.card-wrap > .timer-card,
.card-wrap > .timer-next-card,
.card-wrap > .timer-stats {
  margin-bottom: 0;
  box-shadow: none;
}

html.dark .card-wrap {
  background: #1b2a3a;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}

/* ─── Timer-Tab ──────────────────────────────────────────────── */

/* Nächster Einsatz Card */
.timer-next-card {
  background: var(--white);
  border-radius: 18px;
  padding: 14px 16px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.13);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.timer-next-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.timer-next-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.timer-next-arrow {
  font-size: 22px;
  font-weight: 300;
  color: #9CA3AF;
  flex-shrink: 0;
  line-height: 1;
}

/* Timer Card */
.timer-card {
  background: var(--white);
  border-radius: 22px;
  padding: 28px 20px 24px;
  text-align: center;
  box-shadow: 0 6px 24px rgba(0,0,0,0.13);
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.timer-status {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  min-height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 18px;
}

.timer-status--active {
  color: var(--success);
}

.timer-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--success);
  flex-shrink: 0;
  animation: pulse-dot 1.4s ease-in-out infinite;
  will-change: opacity;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.timer-display {
  font-size: 58px;
  font-weight: 500;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -1px;
  line-height: 1;
  margin: 8px 0 4px;
}

/* Idle: mehr Abstand zwischen Display und Button */
.timer-status:not(.timer-status--active) ~ .timer-display {
  margin-bottom: 28px;
}

.timer-hint {
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  min-height: 18px;
  margin-bottom: 24px;
}

.timer-action-btn {
  width: 100%;
  padding: 17px;
  border: none;
  border-radius: 16px;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.2px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 0.15s, box-shadow 0.15s;
  background: linear-gradient(135deg, var(--primary-light), var(--primary));
  color: #fff;
  box-shadow: 0 6px 20px rgba(53,80,111,0.35);
}
.timer-action-btn:active { transform: scale(0.96); }
.timer-action-btn:disabled { opacity: .55; cursor: not-allowed; }

.timer-action-btn--stop {
  background: linear-gradient(135deg, #F87171, #DC2626);
  box-shadow: 0 6px 20px rgba(220,38,38,0.35);
}

.timer-action-icon {
  font-size: 14px;
}

/* Stempeln: Pause, zwei Knöpfe, Markierung (02.10.2026) */
.timer-status--pause { color: #D97706; }
.timer-status--pause .timer-dot { background: #D97706; }

.timer-btn-reihe {
  display: flex;
  gap: 10px;
  width: 100%;
}
.timer-btn-reihe .timer-action-btn { flex: 1; padding: 17px 10px; }
.timer-btn-reihe .timer-action-btn--zweit { flex: 0 0 34%; }

.timer-action-btn--zweit {
  background: var(--primary-pale);
  color: var(--primary);
  box-shadow: none;
}
html.dark .timer-action-btn--zweit { background: #1F2937; color: #E5E7EB; }

.timer-zu-lang {
  font-size: 14px;
  font-weight: 700;
  color: #B91C1C;
  background: #FEF2F2;
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
html.dark .timer-zu-lang { color: #f87171; background: #3b1f1f; }
#timer-korrigieren-btn { margin-bottom: 8px; }

.timer-markierung {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: #B45309;
  background: rgba(245, 158, 11, .12);
  border-radius: 999px;
  padding: 3px 10px;
}

/* Info-Cards Grid (2x2) */
.timer-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.timer-stat-cell {
  background: var(--white);
  border-radius: 16px;
  padding: 22px 12px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.timer-stat-value {
  font-size: 20px;
  font-weight: 800;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
}

.timer-stat-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
  font-weight: 500;
}

/* Zusammenfassungs-Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(200,210,220,.3);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  padding: 16px;
  animation: modalFadeIn 0.25s ease;
}

.modal-card {
  background: #fff;
  border-radius: 24px;
  padding: 14px 20px;
  width: 100%;
  max-width: 420px;
  text-align: center;
  box-shadow: 0 8px 40px rgba(0,0,0,.15);
  animation: modalScaleIn 0.3s cubic-bezier(.32,.72,0,1);
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalScaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

/* Einstellungen Slide-Animationen */
@keyframes einsSlideIn {
  from { opacity: 0; transform: translateX(60px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes einsSlideOut {
  from { opacity: 0; transform: translateX(-60px); }
  to { opacity: 1; transform: translateX(0); }
}

.eins-anim-in {
  animation: einsSlideIn 0.28s cubic-bezier(.25,.46,.45,.94);
}

.eins-anim-back {
  animation: einsSlideOut 0.28s cubic-bezier(.25,.46,.45,.94);
}

/* Plan Wochen-Wechsel Animation */

.modal-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 8px;
}

.modal-body {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 4px;
}

.modal-highlight {
  font-size: 28px;
  font-weight: 800;
  color: var(--primary);
  margin: 12px 0 4px;
}

.modal-highlight-sub {
  font-size: 22px;
  font-weight: 700;
  color: var(--success);
  margin-bottom: 20px;
}

.modal-close-btn {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 13px 32px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
}

/* Toast */
.timer-toast {
  position: fixed;
  bottom: calc(var(--nav-h) + 16px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: #1a2a3a;
  color: #fff;
  padding: 12px 20px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 500;
  z-index: 600;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .25s, transform .25s;
  pointer-events: none;
}

.timer-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ─── Im Betrieb freischalten (Sheet) ─────────────────────────── */
.stempel-wege {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.stempel-weg {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px;
  border-radius: 16px;
  background: #f6f7f9;
  border: none;
  font: inherit;
  text-align: left;
  color: var(--text);
}
.stempel-weg--knopf {
  background: linear-gradient(135deg, var(--primary-light), var(--primary));
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(53,80,111,0.30);
}
.stempel-weg--knopf:active { transform: scale(0.98); }

.stempel-weg-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--white);
  color: var(--primary);
}
.stempel-weg--knopf .stempel-weg-icon { background: rgba(255,255,255,.18); color: #fff; }

.stempel-weg-text {
  flex: 1;
  font-size: 15px;
  font-weight: 700;
}
.stempel-weg-pfeil { font-size: 22px; font-weight: 300; line-height: 1; }

.stempel-weg-link {
  border: none;
  background: none;
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  padding: 6px 0 6px 6px;
  cursor: pointer;
  flex-shrink: 0;
}

.stempel-weg--keiner { color: var(--text-muted); }
.stempel-weg--keiner .stempel-weg-text { font-weight: 600; }

.stempel-warten {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}
#stempel-sheet .log-form-error { margin-top: 12px; }

.stempel-knoepfe {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.stempel-knoepfe > button { flex: 1; margin: 0 !important; }
.stempel-pin-input { letter-spacing: 6px; font-size: 22px; text-align: center; }

.eins-pin-zeile { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.eins-pin-titel { font-size: 15px; font-weight: 600; color: var(--text); }
.eins-pin-status { font-size: 13px; font-weight: 700; color: var(--text-muted); }
.eins-pin-status--ok { color: var(--success); }
.eins-pin-form { margin-top: 12px; }
#eins-pin-msg { margin-top: 10px; }

html.dark .stempel-weg { background: #1F2937; color: #F3F4F6; }
html.dark .stempel-weg--knopf { background: linear-gradient(135deg, var(--primary-light), var(--primary)); }
html.dark .stempel-weg-icon { background: #111827; }
html.dark .stempel-weg-link { color: #9fb8d6; }

/* ─── Bestätigung nach dem Stempeln (Variante A, 03.10.2026) ──────
   Apple-Pay-Stil: Fläche grün (Ausstempeln: Schichtwerk-Dunkelblau), weißer
   Haken zeichnet sich in 0,4 s, darunter groß nur die Uhrzeit. Die ganze
   Einblendung ist eine 1,2-s-Animation; ihr Ende schließt sie
   (timer.js stempelBestaetigen). Farben fest, auch im Dunkelmodus. */
.stempel-ok {
  --stempel-ok-flaeche: var(--success);
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: env(safe-area-inset-top) 24px env(safe-area-inset-bottom);
  background: var(--stempel-ok-flaeche);
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: stempel-ok-ablauf 1.2s ease both;
}
.stempel-ok--aus { --stempel-ok-flaeche: #243754; }
.stempel-ok-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.stempel-ok-inhalt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  margin-top: -6vh;
}
.stempel-ok-haken {
  width: 112px;
  height: 112px;
  overflow: visible;
}
.stempel-ok-kreis {
  fill: none;
  stroke: rgba(255, 255, 255, .38);
  stroke-width: 2.5;
  transform-origin: 26px 26px;
  animation: stempel-ok-kreis .3s cubic-bezier(.2, .9, .3, 1.2) both;
}
.stempel-ok-zug {
  fill: none;
  stroke: #fff;
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 34;
  stroke-dashoffset: 34;
  animation: stempel-ok-zug .4s .1s cubic-bezier(.65, 0, .35, 1) forwards;
}
.stempel-ok-zeit {
  font-size: 72px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -2px;
  font-variant-numeric: tabular-nums;
  animation: stempel-ok-text .3s .3s ease-out both;
}
.stempel-ok-titel {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -.4px;
  animation: stempel-ok-text .3s .3s ease-out both;
}
@keyframes stempel-ok-ablauf {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  72%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes stempel-ok-kreis {
  from { opacity: 0; transform: scale(.6); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes stempel-ok-zug {
  to { stroke-dashoffset: 0; }
}
@keyframes stempel-ok-text {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes stempel-ok-still {
  from { opacity: 1; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .stempel-ok { animation: stempel-ok-still 1.2s linear both; }
  .stempel-ok-haken,
  .stempel-ok-kreis,
  .stempel-ok-zug,
  .stempel-ok-zeit,
  .stempel-ok-titel { animation: none; stroke-dashoffset: 0; }
}

/* Offline: statt Stempel-Knöpfen ein Hinweis (Stempeln braucht die Serverzeit) */
.timer-offline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 15px 16px;
  border-radius: 16px;
  background: #fef3c7;
  color: #92400e;
  font-size: 15px;
  font-weight: 700;
}
html.dark .timer-offline {
  background: #3a2e12;
  color: #fcd34d;
}

/* ─── QR-Scanner (Vollbild) ───────────────────────────────────── */
.stempel-scanner {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stempel-scanner-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.stempel-scanner-rahmen {
  position: relative;
  width: min(68vw, 280px);
  aspect-ratio: 1;
  border: 3px solid #fff;
  border-radius: 24px;
  box-shadow: 0 0 0 100vmax rgba(0,0,0,.45);
}
.stempel-scanner-text {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: calc(48px + env(safe-area-inset-bottom));
  text-align: center;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}
.stempel-scanner-zu {
  position: absolute;
  top: calc(16px + env(safe-area-inset-top));
  right: 16px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.2);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
}

/* ─── Plan-Tab ───────────────────────────────────────────────── */
/* Card-Wrap für die Woche */
.plan-wrap {
  background: #f6f7f9;
  border-radius: 26px;
  padding: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.plan-card {
  background: var(--white);
  border-radius: 20px;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Plan Header */
.plan-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 8px;
}

.plan-header-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.plan-header-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.4px;
}

.plan-header-range {
  display: flex;
  align-items: center;
  gap: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
}

.plan-nav-btn {
  width: 0;
  height: 0;
  overflow: hidden;
  border: none;
  padding: 0;
  opacity: 0;
  position: absolute;
}

.plan-wunsch-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg);
  border: none;
  color: var(--primary);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 12px;
}
.plan-wunsch-btn svg {
  flex-shrink: 0;
}

.plan-days-clip {
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

.plan-days {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 10px 10px;
  height: 100%;
}

.plan-day {
  display: flex;
  align-items: stretch;
  gap: 4px;
  background: var(--white);
  border: 1px solid #edf1f5;
  border-radius: 16px;
  padding: 4px;
  cursor: pointer;
  flex: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.plan-day:active { opacity: .85; }

.plan-day--today {}

.plan-day-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 6px 0;
  flex-shrink: 0;
  background: #f6f8fa;
  border-radius: 11px;
}

.plan-day--today .plan-day-left {
  background: var(--primary);
}

.plan-day--today .plan-day-wd,
.plan-day--today .plan-day-num {
  color: #fff;
}

.plan-day-wd {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: .3px;
}

.plan-day--today .plan-day-wd {
  color: #fff;
}

.plan-day-num {
  font-size: 15px;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.2;
}

.plan-day--today .plan-day-num {
  color: #fff;
}

.plan-day-divider {
  display: none;
}

.plan-day-content {
  flex: 1;
  padding: 8px 12px;
  min-width: 0;
  border-radius: 12px;
  display: flex;
  align-items: center;
}

.plan-day--has-shift .plan-day-content {
  background: #f0f1f3;
}

.plan-day--today .plan-day-content {}

.plan-day-text {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  display: block;
}

.plan-day-text--shift {
  color: var(--primary);
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.plan-shift-time {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.2px;
}

.plan-shift-area {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  background: #f0f1f3;
  padding: 2px 7px;
  border-radius: 6px;
  letter-spacing: 0.2px;
}

.plan-shift-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--text-muted);
}

.plan-shift-badge {
  font-size: 10px;
  font-weight: 600;
  color: #f39c12;
  background: rgba(243, 156, 18, 0.1);
  padding: 2px 7px;
  border-radius: 6px;
}


.plan-day-text--open {
  color: #f39c12;
  font-weight: 500;
  cursor: pointer;
}

.plan-day-text--leave {
  color: var(--success);
  font-weight: 500;
}

.plan-day-dash {
  font-size: 14px;
  color: var(--text-muted);
  margin-left: auto;
  padding-right: 4px;
  flex-shrink: 0;
}

/* Day-Sheet */
.sheet-card--day {
  min-height: 50vh;
}

.day-sheet-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0 14px;
}

.day-sheet-date {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  background: #f0f2f5;
  padding: 8px 18px;
  border-radius: 12px;
}
.day-sheet-date--today {
  background: var(--primary);
  color: #fff;
}

.day-sheet-arrow {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: none;
  background: var(--bg);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.day-sheet-arrow:active {
  background: var(--primary-pale);
}

/* Day-Sheet Stats */
.day-sheet-stats {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.day-sheet-stat {
  flex: 1;
  background: #f0f1f3;
  border-radius: 12px;
  padding: 12px 8px;
  text-align: center;
}

.day-sheet-stat-value {
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
}

.day-sheet-stat-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.day-sheet-section-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin: 16px 0 8px;
}

.day-sheet-shift-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f0f1f3;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 6px;
}

.day-sheet-shift-icon {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.day-sheet-shift-time {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.day-sheet-shift-area {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  background: #e2e5e9;
  padding: 2px 7px;
  border-radius: 6px;
}

.day-sheet-shift-note {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: auto;
  font-style: italic;
}

.day-sheet-empty {
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  padding: 20px 0;
}

.day-sheet-leave-badge {
  background: #fef3c7;
  color: #92400e;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 10px;
  text-align: center;
  margin-bottom: 12px;
}

html.dark .day-sheet-stat {
  background: #1f2937;
}

html.dark .day-sheet-shift-row {
  background: #1f2937;
}

html.dark .day-sheet-shift-area {
  background: #374151;
}

html.dark .day-sheet-leave-badge {
  background: #422006;
  color: #fcd34d;
}

/* Detail-Sheet Tabs */
.plan-detail-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1.5px solid var(--border);
  margin-bottom: 14px;
}

.plan-detail-tab {
  flex: 1;
  background: none;
  border: none;
  padding: 10px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1.5px;
  transition: color 0.15s;
}

.plan-detail-tab--active {
  color: var(--primary);
  font-weight: 700;
  border-bottom-color: var(--primary);
}

.plan-detail-tab-content {
  min-height: 60px;
}

/* Detail-Sheet Info-Card */
.plan-detail-info-card {
  background: #f0f4f8;
  border-radius: 14px;
  padding: 14px 16px;
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  text-align: center;
}

.plan-detail-info-card--shift {
  color: var(--primary);
  font-weight: 600;
}

.plan-shift-area {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.plan-shift-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  color: var(--primary);
  background: var(--primary-pale);
  border-radius: 999px;
  padding: 4px 8px;
  margin-top: 4px;
}

.plan-shift-badge--open {
  background: #fef3d0;
  color: #b7791f;
}

html.dark .plan-shift-badge--open {
  background: #3d2e10;
  color: #f39c12;
}

.plan-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin: 24px 0 10px;
}

.plan-swaps {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.plan-swap-card {
  background: var(--white);
  border-radius: 20px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.13);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.plan-swap-card--mine {
  opacity: .85;
}

.plan-swap-info {
  flex: 1;
  min-width: 0;
}

.plan-swap-date {
  font-size: 13px;
  color: var(--text-muted);
}

.plan-swap-time {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-top: 2px;
}

.plan-swap-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.plan-swap-status {
  font-size: 11px;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 999px;
}

.plan-swap-status--pending {
  background: #fef3d0;
  color: #b7791f;
}

.plan-swap-status--approved {
  background: #D1FAE5;
  color: #065F46;
}

.plan-swap-status--rejected {
  background: #FEE2E2;
  color: #7F1D1D;
}

html.dark .plan-swap-status--pending  { background: #3d2e10; color: #fcd34d; }
html.dark .plan-swap-status--approved { background: #1a2e23; color: #34d399; }
html.dark .plan-swap-status--rejected { background: #3b1f1f; color: #f87171; }

.plan-swap-notice {
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
  padding: 12px 0 4px;
}

/* ── Team-Ansicht im Schicht-Detail ── */
.plan-team-section {
  margin: 16px 0 4px;
  padding-top: 12px;
  border-top: 1px solid #F3F4F6;
}

.plan-team-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.plan-team-loading,
.plan-team-empty {
  font-size: 13px;
  color: var(--text-muted);
  padding: 4px 0 8px;
}

.plan-team-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.plan-team-member {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #F3F4F6;
  position: relative;
}

.plan-team-member--overlap {
  background: var(--primary-pale);
  border: 1px solid rgba(53, 80, 111, .15);
}

.plan-team-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary-pale);
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.plan-team-member--overlap .plan-team-avatar {
  background: var(--primary);
  color: white;
}

.plan-team-info {
  flex: 1;
  min-width: 0;
}

.plan-team-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.plan-team-time {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 1px;
}

.plan-team-overlap-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
}

/* Wunschzeiten Button im Plan-Tab */
/* plan-avail-btn nicht mehr sichtbar (durch plan-wunsch-btn im Header ersetzt) */
.plan-avail-btn {
  display: none;
}

html.dark .plan-wrap {
  background: #1a1f2e;
  box-shadow: 0 6px 18px rgba(0,0,0,.24);
}

html.dark .plan-card {
  background: #111827;
}

html.dark .plan-day {
  background: #111827;
  border-color: #374151;
}

html.dark .plan-day--today {}

html.dark .plan-day--has-shift .plan-day-content {
  background: #1f2937;
}

html.dark .plan-day--today .plan-day-left {
  background: var(--primary);
}

html.dark .plan-day-left--today {
  background: #166534;
}

html.dark .plan-day-divider {
  background: #374151;
}

html.dark 
html.dark .plan-shift-time {
  color: #e5e7eb;
}

html.dark .plan-shift-area {
  background: #374151;
  color: #9ca3af;
}

html.dark .plan-shift-badge {
  background: rgba(243, 156, 18, 0.2);
}

html.dark .plan-swap-card {
  background: #111827;
  box-shadow: 0 6px 24px rgba(0,0,0,.24);
}

html.dark .plan-nav-btn {
  background: #1F2937;
  color: #F3F4F6;
}

html.dark .plan-team-member {
  background: #1F2937;
}

html.dark .plan-detail-info-card {
  background: #1F2937;
}

/* Abwesenheits-Pill im Tagesplan */
.plan-leave-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 20px;
  text-align: center;
}
.plan-leave-pill--pending    { background: #fef9c3; color: #92400e; }
.plan-leave-pill--approved   { background: #dcfce7; color: #166534; }
.leave--krank.plan-leave-pill--approved { background: #fee2e2; color: #991b1b; }

/* Abwesenheit Sheet */
.leave-card-wrap {
  padding: 6px;
}
.leave-date-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.leave-date-grid .eins-field { margin-bottom: 0; }

.leave-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
}
.leave-item-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.leave-item-icon--urlaub    { background: #dbeafe; color: #2563eb; }
.leave-item-icon--krank     { background: #fee2e2; color: #dc2626; }
.leave-item-icon--sonstiges { background: #f1f5f9; color: #64748b; }
html.dark .leave-item-icon--urlaub    { background: #1e3a5f; color: #60a5fa; }
html.dark .leave-item-icon--krank     { background: #3b1f1f; color: #f87171; }
html.dark .leave-item-icon--sonstiges { background: #2a2f3e; color: #94a3b8; }
.leave-item-info { flex: 1; min-width: 0; }
.leave-item-type {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.leave-item-date {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.leave-item-note {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.leave-item-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.2px;
}
.leave-item-badge--pending  { background: #fef9c3; color: #92400e; }
.leave-item-badge--approved { background: #dcfce7; color: #166534; }
.leave-item-badge--rejected { background: #fee2e2; color: #991b1b; }
html.dark .leave-item-badge--pending  { background: #3d2e10; color: #fcd34d; }
html.dark .leave-item-badge--approved { background: #1a2e23; color: #34d399; }
html.dark .leave-item-badge--rejected { background: #3b1f1f; color: #f87171; }
.leave-divider {
  height: 1px;
  background: #eef1f4;
  margin: 0 14px 0 66px;
}
html.dark .leave-divider { background: #374151; }
.leave-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}
.leave-empty svg { display: block; margin: 0 auto 8px; opacity: .4; }

.sheet-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--border);
}

/* ── Chat ─────────────────────────────────────────────────── */
.chat-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--white);
}
.chat-header-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
}
#tab-chat .tab-pane,
#chat-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.chat-empty {
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  padding: 40px 0;
}
.chat-date-divider {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 10px 0 4px;
}
.chat-bubble {
  max-width: 80%;
  padding: 8px 12px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.4;
  word-wrap: break-word;
}
.chat-bubble--mine {
  align-self: flex-end;
  background: var(--primary);
  color: white;
  border-bottom-right-radius: 4px;
}
.chat-bubble--theirs {
  align-self: flex-start;
  background: var(--bg);
  color: var(--text);
  border-bottom-left-radius: 4px;
}
.chat-bubble-text { white-space: pre-wrap; }
.chat-bubble-time {
  font-size: 10px;
  opacity: .55;
  margin-top: 2px;
  text-align: right;
}
.chat-input-wrap {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
  background: var(--white);
}
.chat-input {
  flex: 1;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: 22px;
  font-size: 14px;
  outline: none;
  background: var(--bg);
  color: var(--text);
}
.chat-input:focus { border-color: var(--primary); }
.chat-send-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--primary);
  color: white;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ─── Benachrichtigungen Sheet ──────────────────────────────── */
.notif-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0);
  z-index: 400;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  transition: background 0.3s ease;
  pointer-events: none;
}

.notif-overlay.notif--visible {
  background: rgba(0,0,0,0.45);
  pointer-events: auto;
}

.notif-panel {
  background: var(--white);
  border-radius: 0 0 24px 24px;
  padding: 20px 20px 20px;
  padding-top: max(20px, env(safe-area-inset-top));
  width: 100%;
  max-width: 430px;
  max-height: 45vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 24px rgba(0,0,0,.14);
  transform: translateY(-100%);
  transition: transform 0.35s cubic-bezier(.32,.72,0,1);
  overflow: hidden;
}

.notif-drag-handle {
  display: flex;
  justify-content: center;
  padding: 10px 0 2px;
  cursor: grab;
  touch-action: none;
  flex-shrink: 0;
}

.notif-drag-bar {
  width: 42px;
  height: 5px;
  border-radius: 999px;
  background: var(--border);
}

.notif--visible .notif-panel {
  transform: translateY(0);
}

.notif--closing .notif-panel {
  transform: translateY(-100%);
  transition: transform 0.28s cubic-bezier(.55,.06,.68,.19);
}

.notif--closing {
  background: rgba(0,0,0,0);
  pointer-events: none;
}

#notif-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

html.dark .notif-panel {
  background: #111827;
}

.notif-header {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 14px;
}

.notif-tabs {
  display: flex;
  background: #f0f2f5;
  border-radius: 10px;
  padding: 3px;
  margin-bottom: 14px;
}

.notif-tab {
  flex: 1;
  padding: 8px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
}

.notif-tab--active {
  background: var(--white);
  color: var(--text);
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.notif-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  padding-bottom: 8px;
}

.notif-empty {
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
  padding: 40px 0;
}

.notif-date {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 10px 0 4px;
}

.notif-bubble {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.45;
  word-wrap: break-word;
}

.notif-bubble--mine {
  align-self: flex-end;
  background: var(--primary);
  color: white;
  border-bottom-right-radius: 4px;
}

.notif-bubble--theirs {
  align-self: flex-start;
  background: #f0f2f5;
  color: var(--text);
  border-bottom-left-radius: 4px;
}

.notif-bubble-text { white-space: pre-wrap; }
.notif-bubble-time {
  font-size: 10px;
  opacity: 0.5;
  margin-top: 3px;
  text-align: right;
}

.notif-input-wrap {
  display: flex;
  gap: 8px;
  padding-top: 10px;
  flex-shrink: 0;
}

.notif-input {
  flex: 1;
  padding: 10px 14px;
  border: 1.5px solid #e2e5ea;
  border-radius: 12px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  background: #f6f7f9;
  color: var(--text);
}
.notif-input:focus { border-color: var(--primary); }
.notif-input::placeholder { color: var(--text-muted); opacity: 0.6; }

.notif-send-btn {
  padding: 10px 16px;
  border-radius: 12px;
  border: none;
  background: var(--primary);
  color: white;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
}
.notif-send-btn:active { opacity: 0.85; }
.notif-send-btn:disabled { opacity: 0.5; }

.bell-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ef4444;
  color: white;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

html.dark .notif-tabs { background: #1F2937; }
html.dark .notif-tab--active { background: #111827; }
html.dark .notif-bubble--theirs { background: #1F2937; }
html.dark .notif-input { background: #1F2937; border-color: #374151; }

/* Zitat, gelöscht, Menü — gleiche Klassen wie im Admin (js/chat-gesten.js) */
.chat-zitat {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  background: rgba(0,0,0,0.06);
  border: none;
  border-left: 3px solid var(--primary);
  border-radius: 4px;
  padding: 4px 8px;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
}
.notif-bubble--mine .chat-zitat {
  background: rgba(255,255,255,0.15);
  border-left-color: rgba(255,255,255,0.5);
  color: rgba(255,255,255,0.85);
}
.chat-zitat-name {
  display: block;
  font-weight: 700;
  font-size: 11px;
  color: var(--primary);
  margin-bottom: 1px;
}
.chat-zitat-name:empty { display: none; }
.notif-bubble--mine .chat-zitat-name { color: rgba(255,255,255,0.9); }
.chat-zitat-text {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notif-bubble--geloescht { opacity: .7; }
.chat-geloescht {
  display: flex;
  align-items: center;
  gap: 6px;
  font-style: italic;
  font-size: 13px;
}
.notif-bubble {
  transition: transform .2s ease;
  -webkit-touch-callout: none;   /* lange drücken = eigenes Menü */
  -webkit-user-select: none;
  user-select: none;
}
.notif-bubble.chat-wischt { transition: none; }
.notif-bubble.chat-blink { animation: chat-blink 1.2s ease; }
@keyframes chat-blink {
  0%, 100% { box-shadow: none; }
  25%, 60% { box-shadow: 0 0 0 3px var(--primary-light); }
}
.chat-menue {
  position: fixed;
  z-index: 10001;
  min-width: 170px;
  padding: 4px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.chat-menue-knopf {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: none;
  border-radius: 10px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  text-align: left;
}
.chat-menue-knopf:active { background: var(--primary-pale); }
.chat-menue-knopf--gefahr { color: var(--danger); }

/* Datei-Anhang in Bubble */
.notif-file { margin-bottom: 4px; }
.notif-file-img {
  max-width: 100%;
  border-radius: 10px;
  display: block;
}
.notif-file-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(0,0,0,0.06);
  border-radius: 8px;
  color: var(--primary);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 4px;
}
.notif-bubble--mine .notif-file-link {
  background: rgba(255,255,255,0.15);
  color: #fff;
}

/* Reply-Preview über Input */
.notif-reply-preview { flex-shrink: 0; }
.notif-reply-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f0f2f5;
  border-left: 3px solid var(--primary);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 6px;
}
.notif-reply-info { flex: 1; min-width: 0; }
.notif-reply-name { display: block; font-size: 11px; font-weight: 700; color: var(--primary); }
.notif-reply-text { display: block; font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-reply-close {
  background: none;
  border: none;
  font-size: 18px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0 4px;
  flex-shrink: 0;
}
html.dark .notif-reply-bar { background: #1F2937; }

/* Attach-Button */
.notif-attach-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  padding: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.notif-attach-btn:active { color: var(--primary); }

/* Wunschzeiten Sheet */
.sheet-card--tall {
  max-height: 75vh;
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
}

#plan-avail-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.avail-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 20px;
}

.avail-title-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg);
  border-radius: 14px;
  padding: 8px 16px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
}
.avail-title-pill:not(#avail-tab-toggle) { cursor: default; }

.avail-title-arrow {
  font-size: 14px;
  color: var(--text-muted);
}

.avail-week-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 14px;
}

.avail-week-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.avail-week-nav {
  display: flex;
  gap: 6px;
}

.avail-nav-btn {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: none;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s;
}
.avail-nav-btn:active { opacity: .8; }

/* Hauptgitter */
.avail-grid {
  display: grid;
  grid-template-columns: 56px repeat(7, 1fr);
  grid-template-rows: auto 1fr 10px repeat(3, 1fr);
  gap: 8px;
  padding: 0 0 8px;
  flex: 1;
}

.avail-spacer {
  grid-column: 1 / -1;
  height: 4px;
}


.avail-cell {
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.avail-header-empty {
  /* leer - kein Hintergrund */
}

.avail-day-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 6px 0 8px;
  background: #f3f5f8;
  border-radius: 8px;
}

.avail-day-wd {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
}

.avail-day-num {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.avail-row-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  text-align: left;
  padding-right: 6px;
  line-height: 1.3;
  flex-direction: column;
  align-items: flex-start;
  background: #f3f5f8;
  border-radius: 8px;
  padding: 6px 6px;
}

.avail-row-time {
  font-size: 9px;
  font-weight: 400;
  color: var(--text-muted);
  white-space: nowrap;
  display: block;
}

/* Einzelne Box */
.avail-box {
  width: 100%;
  min-height: 48px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s, transform .1s;
  border: 2px solid transparent;
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

.avail-box::after {
  content: '–';
}

.avail-box.avail-state-green::after { content: '✓'; color: #16a34a; font-weight: 700; font-size: 15px; }
.avail-box.avail-state-red::after { content: '✕'; color: #dc2626; font-weight: 700; font-size: 14px; }
.avail-box.avail-state-default::after { content: '–'; }
.avail-box.avail-state-yellow::after { content: '~'; color: #d97706; font-weight: 700; }

.avail-box:active {
  transform: scale(.88);
}

/* Ganzer-Tag Box */
.avail-box--all {
  /* gleiche Größe wie Schicht-Boxen */
}

/* Zustände */
.avail-state-default {
  background: #f0f2f5;
  border-color: #e2e6eb;
}

.avail-state-green {
  background: #dcfce7;
  border-color: #22c55e;
}

.avail-state-red {
  background: #fee2e2;
  border-color: #ef4444;
}

.avail-state-yellow {
  background: #fef3c7;
  border-color: #f59e0b;
}

/* Bemerkung */
.avail-note-section {
  padding-top: 12px;
  margin-top: auto;
}

.avail-note-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.avail-note-input {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  color: var(--text);
  background: var(--white);
  outline: none;
  resize: none;
  font-family: inherit;
  box-sizing: border-box;
}
.avail-note-input:focus {
  border-color: var(--primary);
}
.avail-note-input::placeholder {
  color: var(--text-muted);
}

html.dark .avail-state-default { background: #2a2f3e; border-color: #3a3f52; }
html.dark .avail-note-input { background: #1F2937; color: #F3F4F6; border-color: #374151; }

/* Hilfe & Feedback: Reiter (05.10.2026) — gleiche Klassen wie im Admin */
.hilfe-reiter {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin: 4px 0 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.hilfe-reiter-knopf {
  flex: 1;
  min-height: 40px;
  border: none;
  border-radius: 9px;
  background: none;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-muted);
}
.hilfe-reiter-knopf.is-aktiv {
  background: var(--white);
  color: var(--text);
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.hilfe-fragen {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.hilfe-frage + .hilfe-frage { border-top: 1px solid var(--border); }
.hilfe-frage summary {
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.hilfe-frage summary::-webkit-details-marker { display: none; }
.hilfe-frage summary::after { content: '›'; color: var(--text-muted); transition: transform .15s; }
.hilfe-frage[open] summary::after { transform: rotate(90deg); }
.hilfe-frage p, .hilfe-kontakt p {
  margin: 0;
  padding: 0 16px 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
}
.hilfe-kontakt { padding-top: 14px; }
.hilfe-fragen + .eins-cat-label { margin-top: 22px; }
.hilfe-kontakt a { color: var(--primary); font-weight: 600; }

/* Feedback-Formular (js/feedback.js, gleiche Klassen in Admin und Worker) */
.fb {
  padding: 4px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.fb-arten {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.fb-art {
  flex: 1;
  min-height: 40px;
  border: none;
  border-radius: 9px;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}
.fb-art.is-aktiv {
  background: var(--white);
  color: var(--text);
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.fb-sterne-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.fb-sterne-label { font-size: 13px; color: var(--text-muted); }
.fb-sterne { display: flex; gap: 2px; }
.fb-stern {
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  font-size: 24px;
  line-height: 1;
  color: var(--border);
  cursor: pointer;
  transition: transform .12s;
}
.fb-stern.is-an { color: #f5b301; }
.fb-stern:active { transform: scale(.88); }
.fb-text {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  font: inherit;
  font-size: 15px;
  outline: none;
  background: var(--bg);
  color: var(--text);
  resize: vertical;
}
.fb-text:focus { border-color: var(--primary); background: var(--white); }
.fb-bild-knopf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 1.5px dashed var(--border);
  border-radius: 10px;
  background: none;
  font: inherit;
  font-size: 14px;
  color: var(--text-muted);
  cursor: pointer;
}
.fb-bild-knopf:hover { border-color: var(--primary); color: var(--primary); }
.fb-vorschau { position: relative; display: inline-block; }
.fb-vorschau img {
  display: block;
  max-width: 160px;
  max-height: 120px;
  border-radius: 10px;
  border: 1px solid var(--border);
}
.fb-bild-weg {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: var(--text);
  color: var(--white);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.fb-senden { width: 100%; }
.fb-meldung { font-size: 13px; color: var(--text-muted); min-height: 0; }
.fb-meldung:empty { display: none; }
.fb-meldung--fehler { color: var(--danger); }
.fb--danke { align-items: center; text-align: center; padding-top: 28px; padding-bottom: 28px; gap: 6px; }
.fb-danke-haken {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--success, #16a34a);
  color: #fff;
  font-size: 26px;
  line-height: 48px;
  margin-bottom: 6px;
}
.fb-danke-titel { font-size: 18px; font-weight: 700; color: var(--text); }
.fb-danke-text { font-size: 14px; color: var(--text-muted); }
.fb-nochmal {
  margin-top: 10px;
  border: none;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
}
html.dark .fb-stern { color: #4b5563; }
html.dark .fb-stern.is-an { color: #f5b301; }

/* ─── Dialogfenster (js/dialog.js, statt confirm/alert/prompt) ── */
.app-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 10000;
  opacity: 0;
  transition: opacity .2s;
}
.app-confirm--visible { opacity: 1; }
.app-confirm-box {
  background: var(--white);
  border-radius: 16px;
  padding: 24px 22px 18px;
  width: min(360px, 100%);
  box-sizing: border-box;
  box-shadow: 0 8px 32px rgba(0,0,0,.2);
}
.app-confirm-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}
.app-confirm-text {
  font-size: 15px;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: 20px;
}
.app-confirm-input {
  width: 100%;
  box-sizing: border-box;
  margin: -6px 0 18px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--white);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  resize: vertical;
}
.app-confirm-input:focus { outline: none; border-color: var(--primary); }
.app-confirm-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.app-confirm-cancel,
.app-confirm-ok {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.app-confirm-cancel {
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text-muted);
}
.app-confirm-ok {
  border: none;
  background: var(--primary);
  color: #fff;
}
.app-confirm-ok:disabled { opacity: .45; cursor: default; }
.app-confirm-ok--gefahr { background: var(--danger); }

/* ─── Bottom Sheet ───────────────────────────────────────────── */
.sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  z-index: 400;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: background 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease;
  pointer-events: none;
}

.sheet--visible {
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  pointer-events: auto;
}

.sheet--closing {
  background: rgba(0,0,0,0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  pointer-events: none;
}

.sheet-card {
  background: var(--white);
  border-radius: 24px 24px 0 0;
  padding: 24px 20px calc(32px + env(safe-area-inset-bottom));
  width: 100%;
  max-width: 430px;
  max-height: 88vh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  position: relative;
  box-shadow: 0 -4px 24px rgba(0,0,0,.14);
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(.32,.72,0,1);
}

.sheet-card::before {
  content: '';
  display: block;
  width: 42px;
  height: 5px;
  border-radius: 999px;
  background: var(--border);
  margin: -6px auto 14px;
}

.sheet--visible .sheet-card {
  transform: translateY(0);
}

.sheet--closing .sheet-card {
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(.55,.06,.68,.19);
}

.sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 14px;
}

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

.sheet-close {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: #F3F4F6;
  color: var(--text);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.sheet-close:active { transform: scale(0.96); }

.sheet-body {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sheet-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid #F3F4F6;
  font-size: 14px;
}

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

.sheet-row span:first-child {
  color: var(--text-muted);
  font-weight: 600;
  flex-shrink: 0;
  margin-right: 12px;
}

.sheet-row span:last-child {
  font-weight: 700;
  color: var(--text);
  text-align: right;
}

.sheet-overlay .btn-primary,
.sheet-overlay .btn-full {
  margin: 16px 0 0;
  width: 100%;
  padding: 15px;
  background: linear-gradient(135deg, var(--primary-light), var(--primary));
  border-radius: 13px;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(42,157,143,0.3);
}

html.dark .sheet-card {
  background: #111827;
}
html.dark .sheet-close {
  background: #1F2937;
  color: #F3F4F6;
}
html.dark .sheet-row {
  border-bottom-color: #374151;
}

/* ─── Log-Tab ────────────────────────────────────────────────── */
/* Abrechnung Header */
/* Top-Button "+ Eintrag manuell hinzufügen" */
.log-add-top-btn {
  width: 100%;
  padding: 15px;
  background: var(--white);
  border: none;
  border-radius: 18px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.13);
  font-size: 15px;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  margin-bottom: 16px;
  transition: transform 0.15s;
}
.log-add-top-btn:active { transform: scale(0.98); }

html.dark .log-add-top-btn {
  background: #111827;
  box-shadow: 0 6px 24px rgba(0,0,0,.24);
}

/* Leerer Zustand */
.log-empty-state {
  text-align: center;
  padding: 60px 20px 40px;
}
.log-empty-state svg {
  margin-bottom: 14px;
  opacity: .6;
}
.log-empty-state p {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
}
.log-empty-state p + p {
  margin-top: 2px;
  font-size: 13px;
}

/* Monats-Sektionen */
.log-months {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.log-month-wrap {
  background: #f6f7f9;
  border-radius: 26px;
  padding: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.log-month-section {
  background: var(--white);
  border-radius: 20px;
  overflow: hidden;
}

.log-month-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px;
  cursor: pointer;
  gap: 10px;
}
.log-month-header:active { opacity: .8; }

.log-month-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.log-month-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.3px;
}

.log-month-summary {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.log-month-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.log-pdf-btn {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.2px;
}

.log-month-chevron {
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg);
}

.log-month-body {
  border-top: 1px solid var(--border);
  padding: 12px 14px 14px;
}

/* Monats-Zusammenfassung Footer */
.log-month-footer {
  background: var(--primary-pale);
  border-radius: 14px;
  padding: 13px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}
.log-month-footer .mf-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.log-month-footer .mf-right {
  text-align: right;
}
.log-month-footer .mf-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--primary);
}
.log-month-footer .mf-tips {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 1px;
}

.log-entry {
  padding: 12px 4px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--border);
}
.log-entry:last-of-type {
  border-bottom: none;
}

.log-entry--open {
  border-left: 3px solid var(--success);
  padding-left: 10px;
}

.log-entry-left {
  flex: 1;
  min-width: 0;
}

.log-entry-date {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.log-entry-time {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.log-entry-right {
  text-align: right;
  flex-shrink: 0;
}

.log-entry-dur {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}

.log-entry-dur--open {
  color: var(--success);
  font-size: 12px;
  font-weight: 700;
}

.log-entry-earn {
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  margin-top: 1px;
  font-variant-numeric: tabular-nums;
}

.log-entry-tips {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  margin-top: 1px;
}

.log-entry-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.log-entry-action-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.log-entry-action-btn:active {
  background: var(--primary-pale);
}

/* Korrekturanträge (02.10.2026) */
.log-antraege { margin-bottom: 14px; }
.log-antraege-kopf {
  font-size: 11px;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: .5px;
  padding: 14px 16px 4px;
}
.log-antrag {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
}
.log-antraege-kopf + .log-antrag { border-top: none; }
.log-antrag-links { flex: 1; min-width: 0; }
.log-antrag-titel { font-size: 13px; font-weight: 600; color: var(--text); }
.log-antrag-antwort { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.log-antrag-zurueck {
  border: none;
  background: none;
  color: var(--danger);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
}
.log-entry-korr {
  font-size: 11px;
  font-weight: 700;
  color: #B45309;
  margin-top: 2px;
}
.log-entry-markierung { font-size: 11px; font-weight: 700; color: #B45309; }
.log-entry-zu-lang { color: #B91C1C; }
html.dark .log-entry-zu-lang { color: #f87171; }
.log-korr-art { margin: 12px 0 14px; }
.log-form-textarea { resize: none; font-weight: 500; font-family: inherit; }

.log-status-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: .3px;
}

.log-status--submitted,
.log-status--update,
.log-status--approved,
.log-status--rejected {
  background: var(--primary);
  color: #fff;
}

html.dark .log-status--submitted,
html.dark .log-status--update,
html.dark .log-status--approved,
html.dark .log-status--rejected { background: #2a4060; color: #c8d3de; }

/* Log: Abgabe-Button */
.log-submit-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, var(--primary-light), var(--primary));
  color: #fff;
  border: none;
  border-radius: 13px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  box-shadow: 0 4px 14px rgba(53,80,111,0.3);
  transition: transform 0.15s;
}
.log-submit-btn:active { transform: scale(0.97); }

.log-submit-desc {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 4px;
}

.log-locked-info {
  margin-top: 10px;
  padding: 8px 10px;
  font-size: 11px;
  color: var(--text-muted);
  background: #f6f7f9;
  border-radius: 8px;
  text-align: center;
  line-height: 1.3;
}

html.dark .log-locked-info {
  background: #1F2937;
}

.log-update-hint {
  margin-top: 10px;
  padding: 8px 10px;
  font-size: 12px;
  color: #f59e0b;
  background: rgba(245, 158, 11, .08);
  border-radius: 8px;
  text-align: center;
  line-height: 1.3;
  font-weight: 600;
}
html.dark .log-update-hint {
  background: rgba(245, 158, 11, .12);
}

.log-submit-btn--update {
  background: linear-gradient(135deg, var(--primary-light), var(--primary));
  box-shadow: 0 4px 14px rgba(53, 80, 111, 0.3);
}

.log-new-divider {
  padding: 8px 12px;
  margin: 4px 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #f59e0b;
  background: rgba(245, 158, 11, .08);
  border-radius: 8px;
  text-align: center;
}
.log-new-divider--sub {
  color: var(--text-muted);
  background: rgba(0, 0, 0, .03);
}
html.dark .log-new-divider {
  background: rgba(245, 158, 11, .12);
}
html.dark .log-new-divider--sub {
  background: rgba(255, 255, 255, .05);
}

.log-status-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 2px 8px;
  border-radius: 6px;
  vertical-align: middle;
  margin-left: 6px;
  text-transform: uppercase;
}

.log-entry--tappable {
  cursor: pointer;
}

/* Log: FAB Button */
.log-fab {
  position: fixed;
  bottom: calc(90px + env(safe-area-inset-bottom));
  right: 20px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-light), var(--primary));
  color: #fff;
  font-size: 28px;
  font-weight: 300;
  border: none;
  box-shadow: 0 6px 20px rgba(42,157,143,0.35);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  line-height: 1;
  transition: transform 0.15s;
}
.log-fab:active { transform: scale(0.96); }

/* Log: Formular */
.log-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.log-form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

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

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

.log-form-hint {
  font-weight: 400;
  font-size: 12px;
  color: var(--text-muted);
}

.log-form-input {
  width: 100%;
  padding: 14px 14px;
  border: 2px solid var(--border);
  border-radius: 13px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  background: var(--white);
  outline: none;
  transition: border-color 0.2s;
  -webkit-appearance: none;
  box-sizing: border-box;
}

.log-form-input:focus {
  border-color: var(--primary);
}

.log-form-error {
  background: #fef2f2;
  color: var(--danger);
  font-size: 13px;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

html.dark .log-form-error { background: #3b1f1f; }

html.dark .log-month-wrap {
  background: #1a1f2e;
  box-shadow: 0 6px 18px rgba(0,0,0,.24);
}

html.dark .log-month-section {
  background: #111827;
}

html.dark .log-month-footer {
  background: #18362f;
}

html.dark .log-entry-action-btn {
  background: #1F2937;
  border-color: #374151;
}

html.dark .log-form-input {
  background: #1F2937;
  color: #F3F4F6;
  border-color: #374151;
}

html.dark .log-segment {
  background: #1a1f2e;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
html.dark .log-segment-btn {
  color: #9ca3af;
}
html.dark .log-segment-btn.active {
  background: #3b82f6;
}

/* ─── Einstellungen-Tab ──────────────────────────────────────── */
/* Einstellungen Menü */
.eins-cat-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin: 0 0 6px 4px;
}

.eins-card-wrap {
  background: #f6f7f9;
  border-radius: 22px;
  padding: 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
  margin-bottom: 18px;
}

.eins-card {
  background: var(--white);
  border-radius: 16px;
  overflow: hidden;
}

.eins-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 14px;
  cursor: pointer;
  transition: background 0.15s;
}
.eins-menu-item:active { background: #f6f7f9; }
a.eins-menu-item { text-decoration: none; color: inherit; }

.eins-menu-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.eins-icon--blue { background: var(--primary); color: #fff; }
.eins-icon--lightblue { background: #3b82f6; color: #fff; }
.eins-icon--purple { background: #a855f7; color: #fff; }
.eins-icon--darkpurple { background: #7c3aed; color: #fff; }
.eins-icon--orange { background: #f59e0b; color: #fff; }
.eins-icon--green { background: #22c55e; color: #fff; }
.eins-icon--gray { background: #94a3b8; color: #fff; }

.eins-menu-text {
  flex: 1;
  min-width: 0;
}

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

.eins-menu-sub {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
  margin-top: 1px;
}

.eins-menu-chevron {
  font-size: 18px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.eins-menu-divider {
  height: 1px;
  background: #eef1f4;
  margin: 0 14px 0 64px;
}

.eins-signout-wrap {
  margin-top: 24px;
}

/* Einstellungen Sub-Page Felder */
.eins-page-card {
  padding: 16px;
}

.eins-field {
  margin-bottom: 14px;
}
.eins-field:last-child { margin-bottom: 0; }

.eins-field-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 6px;
}

.eins-field-input,
.eins-field-textarea,
select.eins-field-input {
  width: 100%;
  padding: 14px 14px;
  font-size: 15px;
  font-weight: 400;
  color: var(--text);
  background: #f6f7f9;
  border: 1px solid #eef1f4;
  border-radius: 12px;
  outline: none;
  font-family: inherit;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}
.eins-field-input:focus,
.eins-field-textarea:focus {
  border-color: var(--primary);
}
.eins-field-input::placeholder,
.eins-field-textarea::placeholder {
  color: var(--text-muted);
  opacity: 0.6;
}

.eins-field-textarea {
  resize: vertical;
  min-height: 100px;
}

.eins-field-value {
  padding: 14px 14px;
  font-size: 15px;
  color: var(--text-muted);
  background: #f6f7f9;
  border-radius: 12px;
}

.eins-page-section {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #eef1f4;
}
.eins-page-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.eins-page-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.eins-page-section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

/* Farbmodus-Wähler */
.eins-color-picker {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding: 4px 0;
}
.eins-color-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  position: relative;
  transition: transform .15s, border-color .15s;
  padding: 0;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.eins-color-btn:active { transform: scale(0.92); }
.eins-color-btn.active {
  border-color: var(--text);
  box-shadow: 0 0 0 2px var(--white), 0 2px 8px rgba(0,0,0,.15);
}
.eins-color-btn.active::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.eins-color-label {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 4px;
  font-weight: 500;
}

.eins-action-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px;
  margin-top: 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--primary);
  background: #f6f7f9;
  border: 1px solid #eef1f4;
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.eins-action-btn:active { background: #eef1f4; }
.eins-action-btn--danger { color: #dc2626; background: #fef2f2; border-color: #fecaca; }
.eins-action-btn--danger:active { background: #fee2e2; }
html.dark .eins-action-btn--danger { color: #f87171; background: #1c1010; border-color: #7f1d1d; }
html.dark .eins-action-btn {
  background: #1F2937;
  border-color: #374151;
}

.eins-logout-btn {
  width: 100%;
  padding: 14px;
  margin-top: 32px;
  border: none;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  color: #dc2626;
  background: #fef2f2;
  cursor: pointer;
}
.eins-logout-btn:active { background: #fee2e2; }
html.dark .eins-logout-btn {
  background: #2d1b1b;
  color: #f87171;
}

/* Meine Zeiten Übersicht */
.zt-year-summary {
  display: flex;
  justify-content: space-around;
  padding: 16px 0;
  margin-bottom: 12px;
  border-bottom: 1px solid #eef1f4;
}

.zt-stat {
  text-align: center;
}

.zt-stat-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--primary);
}

.zt-stat-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 2px;
}

.zt-month-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #f0f2f5;
}
.zt-month-row:last-child { border-bottom: none; }

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

.zt-month-details {
  display: flex;
  align-items: center;
  gap: 12px;
}

.zt-month-days {
  font-size: 12px;
  color: var(--text-muted);
}

.zt-month-hours {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.zt-month-eur {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
  min-width: 70px;
  text-align: right;
}

html.dark .zt-year-summary { border-bottom-color: #374151; }
html.dark .zt-month-row { border-bottom-color: #374151; }

/* Dokumente */
.doc-file-picker {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #f6f7f9;
  border: 1px solid #eef1f4;
  border-radius: 12px;
  cursor: pointer;
}

.doc-file-info {
  flex: 1;
  min-width: 0;
}

.doc-file-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.doc-file-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 1px;
}

.doc-file-btn {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--primary);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
  font-family: inherit;
}
.doc-file-btn:active { opacity: 0.85; }

.doc-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0 8px;
}

.doc-list-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.doc-refresh-btn {
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background: #f0f2f5;
  border: 1px solid #e2e5ea;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
}
.doc-refresh-btn:active { background: #e2e5ea; }

html.dark .doc-file-picker {
  background: #1F2937;
  border-color: #374151;
}
html.dark .doc-refresh-btn {
  background: #1F2937;
  border-color: #374151;
  color: var(--text-muted);
}

.eins-page-placeholder {
  padding: 20px 0;
  text-align: center;
  font-size: 14px;
  color: var(--text-muted);
}

html.dark .eins-field-input,
html.dark .eins-field-textarea {
  background: #1F2937;
  border-color: #374151;
  color: var(--text);
}
html.dark .eins-field-value {
  background: #1F2937;
}

.eins-info {
  text-align: center;
  padding: 16px 0 8px;
}

.eins-info-version {
  font-size: 12px;
  color: var(--text-muted);
}

html.dark .eins-card-wrap {
  background: #1a1f2e;
}
html.dark .eins-card {
  background: #111827;
}
html.dark .eins-menu-item:active {
  background: #1F2937;
}
html.dark .eins-menu-divider {
  background: #374151;
}

/* Legacy eins-section (für Sheets) */
.eins-section {
  margin-bottom: 18px;
}
.eins-section:last-child { margin-bottom: 0; }

.eins-section-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.9px;
  margin: 14px 0 6px;
  padding: 0 4px;
}
.eins-section-title:first-child { margin-top: 0; }

.eins-subsection-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 8px;
  padding-left: 4px;
}

.eins-list {
  background: var(--white);
  border-radius: 20px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.13);
  overflow: hidden;
  margin-bottom: 14px;
}

.eins-item {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid #F3F4F6;
  gap: 13px;
  cursor: pointer;
  transition: background 0.12s;
}
.eins-item:last-child { border-bottom: none; }
.eins-item:active { background: #F3F4F6; }

.eins-item-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: white;
  font-size: 16px;
}

.eins-label {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 600;
  min-width: 80px;
  flex-shrink: 0;
}

.eins-label-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 1px;
}

.eins-input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  text-align: right;
  outline: none;
  -webkit-appearance: none;
}
.eins-input:focus { color: var(--primary); }
.eins-input::placeholder { color: var(--text-muted); opacity: .6; }

.eins-value {
  flex: 1;
  font-size: 14px;
  text-align: right;
  color: var(--text);
}

.eins-value--muted {
  color: var(--text-muted);
}

.eins-arrow {
  color: #9CA3AF;
  font-size: 20px;
  font-weight: 300;
  flex-shrink: 0;
  line-height: 1;
}

.eins-select {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  text-align: right;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
}

.eins-msg {
  font-size: 13px;
  padding: 10px 14px;
  border-radius: 12px;
  margin-top: 8px;
}

.eins-msg--success {
  background: #D1FAE5;
  color: #065F46;
}

.eins-msg--error {
  background: #FEE2E2;
  color: #7F1D1D;
}

html.dark .eins-msg--success { background: #1a2e23; color: #34d399; }
html.dark .eins-msg--error   { background: #3b1f1f; color: #f87171; }

html.dark .eins-list {
  background: #111827;
  box-shadow: 0 6px 24px rgba(0,0,0,.24);
}

html.dark .eins-item { border-bottom-color: #374151; }
html.dark .eins-item:active { background: #1F2937; }

html.dark .eins-input,
html.dark .eins-select {
  color: #F3F4F6;
}

/* FAQ */
.eins-faq-list {
  display: flex;
  flex-direction: column;
}
.eins-faq-item {
  border-bottom: 1px solid var(--border);
}
.eins-faq-item:last-child { border-bottom: none; }
.eins-faq-q {
  padding: 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.eins-faq-q::after {
  content: '▸';
  font-size: 12px;
  color: var(--text-muted);
  transition: transform .15s;
}
.eins-faq-item .eins-faq-a:not(.hidden) ~ .eins-faq-q::after,
.eins-faq-item:has(.eins-faq-a:not(.hidden)) .eins-faq-q::after {
  transform: rotate(90deg);
}
.eins-faq-a {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  padding: 0 0 12px;
}

/* Textarea */
.eins-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  outline: none;
  background: var(--white);
  color: var(--text);
}
.eins-textarea:focus { border-color: var(--primary); }
.eins-item--full { flex-direction: column; gap: 6px; }

.eins-info {
  text-align: center;
  padding: 8px 0 16px;
}

.eins-info-text {
  font-size: 14px;
  color: var(--text-muted);
}

.eins-info-version {
  font-size: 12px;
  color: var(--border);
  margin-top: 4px;
}

/* ─── Onboarding / Login-Panels ─────────────────────────────────── */
#login-screen {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  background: #c8d3de;
  position: relative;
  overflow-y: auto;
  overscroll-behavior: none;
  overflow: hidden;
}

/* Verschwommener App-Hintergrund */
#login-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Header-Bar */
    linear-gradient(180deg, var(--primary) 0px, var(--primary) 56px, transparent 56px),
    /* Bottom-Nav */
    linear-gradient(0deg, #2a3f57 0px, #2a3f57 64px, transparent 64px),
    /* Content-Cards */
    linear-gradient(180deg,
      transparent 72px,
      #e8ecf0 72px, #e8ecf0 80px,
      #d5dce4 80px, #d5dce4 82px,
      #f0f2f5 82px, #f0f2f5 140px,
      #dde3ea 140px, #dde3ea 142px,
      #f0f2f5 142px, #f0f2f5 200px,
      #dde3ea 200px, #dde3ea 202px,
      #e8ecf0 202px, #e8ecf0 280px,
      #dde3ea 280px, #dde3ea 282px,
      #f0f2f5 282px, #f0f2f5 360px,
      transparent 360px
    );
  filter: blur(18px);
  opacity: .85;
  z-index: 0;
}

.login-error {
  width: 100%;
  max-width: 360px;
  background: #fee2e2;
  color: #991b1b;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 14px;
  margin-bottom: 16px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.login-panel {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  z-index: 1;
}

/* White Card */
.login-card {
  background: #fff;
  border-radius: 16px;
  padding: 28px 24px;
  box-shadow: 0 8px 40px rgba(0,0,0,.2);
}

/* Badge */
.login-badge {
  display: inline-block;
  align-self: flex-start;
  background: #eaf2f8;
  color: #4a7ab5;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 20px;
  letter-spacing: .2px;
  border: 1px solid #d4e4f1;
}

.login-panel-title {
  font-size: 22px;
  font-weight: 800;
  color: #1a2a3a;
}

.login-panel-desc {
  font-size: 14px;
  color: #6b7f95;
  line-height: 1.6;
  text-align: center;
}

/* Welcome Actions */
.welcome-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

/* Login-spezifische Buttons */
.btn-login-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
  width: 100%;
}
.btn-login-primary:hover { background: var(--primary-light); }
.btn-login-primary:disabled { opacity: .55; cursor: not-allowed; }

.btn-login-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #1a2a3a;
  border: 1.5px solid #e2e8f0;
  border-radius: var(--radius);
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  width: 100%;
}
.btn-login-outline:hover { border-color: var(--primary); background: #f8fafc; }

/* Zurück-Link */
.login-back-link {
  background: none;
  border: none;
  color: #6b7f95;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
  text-align: center;
  transition: color .15s;
}
.login-back-link:hover { color: var(--primary); }

/* Formular-Felder im Login-Screen */
.login-panel .form-field { display: flex; flex-direction: column; gap: 6px; }
.login-panel .form-label {
  font-size: 12px;
  font-weight: 700;
  color: #6b7f95;
  text-transform: uppercase;
  letter-spacing: .4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.form-label-hint {
  font-size: 11px;
  font-weight: 400;
  color: #9cafbf;
  text-transform: none;
  letter-spacing: 0;
}
.login-panel .form-input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid #e2e8f0;
  border-radius: var(--radius);
  font-size: 16px; /* 16px verhindert iOS-Zoom */
  outline: none;
  background: #fff;
  color: #1a2a3a;
  transition: border-color .15s;
}
.login-panel .form-input::placeholder { color: #b0bfcf; }
.login-panel .form-input:focus {
  border-color: var(--primary);
}

.login-success-msg {
  font-size: 13px;
  color: #166534;
  background: #dcfce7;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  text-align: center;
}

/* E-Mail-Bestätigung & Warten */
.email-sent-icon {
  font-size: 52px;
  text-align: center;
}

/* Legal-Panel */
.legal-badge {
  background: #e0e8f0;
  color: var(--primary);
  border-color: #c5d3e0;
}
.legal-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.legal-link-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1.5px solid #e2e8f0;
  border-radius: var(--radius);
  color: #1a2a3a;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: border-color .15s, background .15s;
}
.legal-link-item:hover {
  border-color: var(--primary);
  background: #f8fafc;
}
.legal-link-item span { flex: 1; }
.legal-link-arrow { color: #9cafbf; flex-shrink: 0; }

.legal-checkbox-wrap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.legal-checkbox-wrap input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.legal-checkbox-box {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: 2px solid #cbd5e1;
  border-radius: 6px;
  margin-top: 1px;
  transition: background .15s, border-color .15s;
  position: relative;
}
.legal-checkbox-wrap input:checked + .legal-checkbox-box {
  background: var(--primary);
  border-color: var(--primary);
}
.legal-checkbox-wrap input:checked + .legal-checkbox-box::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.legal-checkbox-text {
  font-size: 13px;
  color: #4b5e73;
  line-height: 1.5;
}

html.dark .legal-link-item {
  border-color: #334155;
  color: var(--text);
}
html.dark .legal-link-item:hover {
  border-color: var(--primary);
  background: #1e293b;
}
html.dark .legal-checkbox-box {
  border-color: #475569;
}
html.dark .legal-checkbox-text {
  color: #94a3b8;
}

/* OTP-Eingabefeld */
.otp-input {
  text-align: center;
  font-size: 28px !important;
  font-weight: 800;
  letter-spacing: 10px;
  padding: 14px !important;
}

/* ═══════════════════════════════════════════════════════════
   Checklisten (Auf-/Abbau)
   ═══════════════════════════════════════════════════════════ */
.tcl-card {
  background: var(--white);
  border-radius: 22px;
  padding: 18px 18px 14px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.13);
}
.tcl-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.tcl-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(16, 185, 129, .12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tcl-icon svg {
  stroke: #10b981;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tcl-title {
  flex: 1;
  font-size: 16px;
  font-weight: 700;
  color: var(--text, #1a1a1a);
}
.tcl-counter {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-muted, #888);
  background: rgba(0,0,0,.05);
  padding: 3px 10px;
  border-radius: 8px;
}
.tcl-card--progress .tcl-counter {
  background: rgba(245, 158, 11, .12);
  color: #f59e0b;
}
.tcl-card--done .tcl-counter {
  background: rgba(16, 185, 129, .12);
  color: #10b981;
}

.tcl-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tcl-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: background .15s;
  -webkit-tap-highlight-color: transparent;
}
.tcl-item:active {
  background: rgba(0,0,0,.04);
}
.tcl-check {
  width: 24px;
  height: 24px;
  border: 2.5px solid #d1d5db;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all .2s;
}
.tcl-item--done .tcl-check {
  background: #10b981;
  border-color: #10b981;
}
.tcl-item--done .tcl-check svg {
  stroke: #fff;
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tcl-text {
  font-size: 15px;
  color: var(--text, #1a1a1a);
  transition: opacity .2s;
}
.tcl-item--done .tcl-text {
  text-decoration: line-through;
  opacity: .45;
}
.tcl-item--done {
  pointer-events: none;
}
.tcl-done-msg {
  text-align: center;
  padding: 10px 0 6px;
  font-size: 14px;
  font-weight: 700;
  color: #10b981;
}

/* Dark Mode */
html.dark .tcl-card {
  background: #111827;
  box-shadow: 0 6px 24px rgba(0,0,0,.24);
}
html.dark .tcl-icon {
  background: rgba(16, 185, 129, .15);
}
html.dark .tcl-counter {
  background: rgba(255,255,255,.08);
}
html.dark .tcl-card--progress .tcl-counter {
  background: rgba(245, 158, 11, .15);
}
html.dark .tcl-card--done .tcl-counter {
  background: rgba(16, 185, 129, .15);
}
html.dark .tcl-check {
  border-color: #4b5563;
}
html.dark .tcl-item:active {
  background: rgba(255,255,255,.04);
}

/* ─── Schichttausch 2 (02.10.2026, js/tausch.js) ─────────────────
   Börse, Tauschanfragen, meine Tausche. Große Knöpfe, wenig Text. */
/* Plan-Reiter: Listen unter dem Wochenplan (Abwesenheiten, Tausch) waren abgeschnitten und haben den
   Wochenplan zusammengedrückt. Jetzt behält der Wochenplan mindestens seine Höhe und der Reiter scrollt.
   Senkrechtes Wischen auf dem Wochenplan bleibt Wochenwechsel (touch-action), gescrollt wird darunter. */
#tab-plan #plan-content {
  overflow-y: auto;
  overscroll-behavior: contain;
}
#tab-plan .plan-wrap {
  flex: 1 0 auto;
  touch-action: pan-x;
}
.tausch-liste {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tausch-karte {
  background: var(--white);
  border-radius: 20px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.13);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tausch-karte--ziel {
  box-shadow: 0 0 0 3px var(--primary-light), 0 6px 24px rgba(0,0,0,0.13);
}
.tausch-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.tausch-wer {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
}
.tausch-schicht {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.tausch-pfeil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 800;
  flex-shrink: 0;
}
.tausch-schicht--gibst .tausch-pfeil    { background: #FEE2E2; color: #991B1B; }
.tausch-schicht--bekommst .tausch-pfeil { background: #D1FAE5; color: #065F46; }
.tausch-bereich {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg);
  padding: 2px 8px;
  border-radius: 999px;
}
.tausch-knoepfe {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.tausch-knoepfe--gross { margin-top: 18px; }
.tausch-knopf {
  flex: 1;
  min-height: 54px;
  padding: 0 16px;
  border: none;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .15s;
}
.tausch-knopf:active { transform: scale(0.97); }
.tausch-knopf:disabled { opacity: .55; cursor: not-allowed; }
.tausch-knopf--ja {
  background: linear-gradient(135deg, var(--primary-light), var(--primary));
  color: #fff;
  box-shadow: 0 4px 14px rgba(42,157,143,0.3);
}
.tausch-knopf--nein {
  background: var(--white);
  color: var(--danger);
  border: 2px solid #FCA5A5;
}
.tausch-knopf--zweit {
  background: var(--white);
  color: var(--text);
  border: 2px solid var(--border);
}
.tausch-knopf--breit {
  width: 100%;
  margin-top: 14px;
}
.tausch-chip {
  font-size: 11px;
  font-weight: 800;
  padding: 5px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.tausch-chip--offen,
.tausch-chip--wartet { background: #fef3d0; color: #b7791f; }
.tausch-chip--ok     { background: #D1FAE5; color: #065F46; }
.tausch-chip--nein   { background: #FEE2E2; color: #7F1D1D; }
.tausch-chip--aus    { background: var(--bg); color: var(--text-muted); }
.tausch-sheet-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 18px;
}
.tausch-sheet-status .tausch-knopf {
  flex: 0 0 auto;
  min-height: 46px;
  font-size: 15px;
}
.tausch-auswahl { margin-top: 16px; }
.tausch-auswahl-titel {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: 8px;
}
.tausch-auswahl-liste {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 40vh;
  overflow-y: auto;
}
.tausch-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 12px 14px;
  border: 2px solid var(--border);
  border-radius: 14px;
  background: var(--white);
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.tausch-option--an {
  border-color: var(--primary-light);
  background: rgba(74,109,148,0.10);
}
.tausch-option-zeit {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
}
.tausch-option-wer {
  font-size: 13px;
  color: var(--text-muted);
}
.tausch-leer {
  text-align: center;
  font-weight: 700;
  color: var(--text-muted);
  padding: 18px 0 6px;
}
html.dark .tausch-schicht--gibst .tausch-pfeil    { background: #3b1f1f; color: #f87171; }
html.dark .tausch-schicht--bekommst .tausch-pfeil { background: #1a2e23; color: #34d399; }
html.dark .tausch-chip--offen,
html.dark .tausch-chip--wartet { background: #3d2e10; color: #fcd34d; }
html.dark .tausch-chip--ok     { background: #1a2e23; color: #34d399; }
html.dark .tausch-chip--nein   { background: #3b1f1f; color: #f87171; }
html.dark .tausch-knopf--nein  { border-color: #7f1d1d; color: #f87171; }