:root {
  --app-bg: var(--page-bg, #f5f7fb);
  --app-surface: var(--surface-bg, #ffffff);
  --app-border: var(--border, #dbe2ea);
  --app-muted: var(--muted, #6b7280);
  --app-text: var(--text, #111827);
  --app-link: var(--link, #1d4ed8);
  --app-accent: var(--accent, #111827);
  --app-accent-contrast: var(--accent-contrast, #ffffff);
  --app-navbar-start: var(--navbar-start, #111827);
  --app-navbar-end: var(--navbar-end, #1f2937);
  --app-success: var(--success, #198754);
  --app-warning: var(--warning, #f59e0b);
  --app-danger: var(--danger, #dc3545);
  --app-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}
html, body { background: var(--app-bg); }
body.app-shell { color: var(--app-text); }
.app-navbar { background: linear-gradient(135deg, var(--app-navbar-start), var(--app-navbar-end)); box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.app-container { width: 100%; max-width: 100%; padding-left: 20px; padding-right: 20px; }
.card { border-radius: 1rem; border: 1px solid var(--app-border); box-shadow: var(--app-shadow); background: var(--app-surface); }
.btn, .form-control, .form-select, .form-check-input, .input-group-text { border-radius: .8rem; }
.table-responsive { border-radius: 1rem; }
.table { --bs-table-bg: transparent; }
.table thead th { position: sticky; top: 0; background: color-mix(in srgb, var(--app-surface) 82%, var(--app-border)); z-index: 1; border-bottom-width: 1px; }
.navbar .nav-link { border-radius: .75rem; padding: .65rem .9rem; }
.navbar .nav-link:hover, .navbar .nav-link:focus { background: rgba(255,255,255,.09); }
.page-toolbar, .section-toolbar { display:flex; gap:.75rem; flex-wrap:wrap; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.app-grid { display:grid; gap:1rem; }
.app-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.app-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat-card { padding: 1rem 1.1rem; }
.stat-card .value { font-size: 1.75rem; font-weight: 700; }
.filters-bar { display:flex; flex-wrap:wrap; gap:.75rem; align-items:end; }
.excel-table td, .excel-table th { white-space: nowrap; vertical-align: middle; }
.excel-table tbody tr:hover { background: rgba(17,24,39,.04); }
.excel-table .sticky-col { position: sticky; left: 0; background: var(--app-surface); z-index: 1; }
.badge-soft { background: color-mix(in srgb, var(--app-accent) 10%, var(--app-surface)); color: var(--app-accent); }
@media (max-width: 991.98px){
  .app-container { padding-left: 14px; padding-right: 14px; }
  .app-grid.cols-2, .app-grid.cols-3 { grid-template-columns: 1fr; }
  .card { border-radius: .9rem; }
  .btn { min-height: 44px; }
  .table thead th { position: static; }
  .table td, .table th { white-space: nowrap; }
}
.warehouse-subnav { display:flex; gap:.75rem; flex-wrap:wrap; }
.warehouse-subnav-link {
  display:inline-flex; align-items:center; gap:.4rem; padding:.75rem 1rem;
  border-radius:999px; background:color-mix(in srgb, var(--app-surface) 82%, var(--app-border)); color:var(--app-text); text-decoration:none; font-weight:600;
}
.warehouse-subnav-link.active { background:var(--app-accent); color:var(--app-accent-contrast); }

.module-topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.module-topbar .title-wrap h1,.module-topbar .title-wrap .h4{margin:0}
.module-topbar .title-wrap .text-muted{font-size:.95rem}
@media (max-width: 991.98px){
  .module-topbar{align-items:flex-start;flex-direction:column}
}
.scanner-panel { min-height: 100%; }
.scanner-video-wrap { position:relative; border-radius:1rem; overflow:hidden; background:var(--app-accent); }
.scanner-video-wrap video { width:100%; min-height:260px; max-height:420px; object-fit:cover; display:block; }
.scanner-overlay {
  position:absolute; inset:auto 0 1rem 0; margin:auto; width:min(82%, 420px); text-align:center;
  padding:.65rem 1rem; border:2px solid rgba(255,255,255,.9); border-radius:1rem; color:var(--app-accent-contrast);
  background:rgba(15,23,42,.25); backdrop-filter: blur(4px);
}
@media (max-width: 991.98px){
  .warehouse-subnav-link { width:100%; justify-content:center; }
  .scanner-video-wrap video { min-height:220px; }
}

/* Mobile Tab-System: Plan | Wunschstationen */
.mobile-tabs-nav {
    display: none;
}

.card-like-box {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 16px;
}

@media (max-width: 768px) {
    .mobile-tabs-nav {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        position: sticky;
        top: 10px;
        z-index: 60;
        margin: 10px 0 16px 0;
        background: color-mix(in srgb, var(--app-surface) 88%, var(--app-border));
        padding: 6px;
        border-radius: 14px;
        border: 1px solid var(--app-border);
    }

    .mobile-tab-btn {
        width: 100%;
        border: 0;
        border-radius: 10px;
        padding: 12px 14px;
        font-weight: 600;
        background: transparent;
        cursor: pointer;
    }

    .mobile-tab-btn.active {
        background: #ffffff;
        box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    }

    .mobile-tab-panel {
        display: none;
    }

    .mobile-tab-panel.active {
        display: block;
    }
}

/* Desktop: beide Bereiche normal sichtbar */
@media (min-width: 769px) {
    .mobile-tab-panel {
        display: block !important;
    }
}

/* Anhänger */
.trailer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0,1fr));
  gap: .5rem;
}
.calendar-day {
  min-height: 110px;
  border: 1px solid var(--app-border);
  border-radius: 12px;
  background: var(--app-surface);
  padding: .5rem;
}
.calendar-day.is-muted {
  opacity: .45;
}
.calendar-day-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:.35rem;
  font-size:.9rem;
  font-weight:600;
}
.calendar-entry {
  display:block;
  font-size:.75rem;
  border-radius:999px;
  padding:.2rem .45rem;
  margin-bottom:.25rem;
  background:color-mix(in srgb, var(--app-surface) 84%, var(--app-border));
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.calendar-entry.block { background:color-mix(in srgb, var(--app-danger) 18%, var(--app-surface)); }
.calendar-entry.approved { background:color-mix(in srgb, var(--app-success) 18%, var(--app-surface)); }
.calendar-entry.pending { background:color-mix(in srgb, var(--app-warning) 18%, var(--app-surface)); }
@media (max-width:768px){
  .calendar-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .calendar-day { min-height: 90px; }
}


.home-hero {
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--app-accent) 16%, transparent), transparent 30%), linear-gradient(135deg, var(--app-surface), color-mix(in srgb, var(--app-surface) 88%, var(--app-border)));
}
.home-kicker {
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.35rem .7rem;
  border-radius:999px;
  background:#eef2ff;
  color:#3730a3;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  margin-bottom:.9rem;
}
.home-hero-panel {
  border:1px solid var(--app-border);
  border-radius:1rem;
  background:var(--app-surface);
  padding:1rem;
}
.home-link-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:1rem;
}
.home-link-card {
  display:flex;
  align-items:flex-start;
  gap:1rem;
  padding:1rem;
  border:1px solid var(--app-border);
  border-radius:1rem;
  background:var(--app-surface);
  text-decoration:none;
  color:inherit;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.home-link-card:hover {
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(15,23,42,.08);
  border-color:var(--app-border);
}
.home-link-icon {
  width:48px;
  height:48px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:var(--app-accent);
  color:var(--app-accent-contrast);
  font-size:1.15rem;
  flex:0 0 auto;
}
.shift-board-grid {
  display:grid;
  grid-template-columns:minmax(260px, 320px) minmax(0, 1fr);
  gap:1rem;
}
.shift-pool-card, .shift-drop-card {
  border:1px solid var(--app-border);
  border-radius:1rem;
  background:var(--app-surface);
}
.shift-pool-sticky {
  position:sticky;
  top:88px;
}
.shift-pool-list, .shift-slot-dropzone {
  min-height:120px;
  display:flex;
  flex-direction:column;
  gap:.75rem;
}
.shift-person-chip {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  padding:.85rem 1rem;
  border:1px solid var(--app-border);
  border-radius:14px;
  background:color-mix(in srgb, var(--app-surface) 88%, var(--app-border));
  cursor:grab;
}
.shift-person-chip.is-assigned {
  background:var(--app-surface);
}
.shift-person-chip:active {
  cursor:grabbing;
}
.shift-dropzone {
  border:2px dashed #cbd5e1;
  border-radius:14px;
  background:color-mix(in srgb, var(--app-surface) 88%, var(--app-border));
  padding:1rem;
  transition:border-color .15s ease, background .15s ease;
}
.shift-dropzone.drag-over {
  border-color:var(--app-text);
  background:#eef2ff;
}
.shift-dropzone-hint {
  color:var(--app-muted);
  font-size:.92rem;
}
.shift-desktop-board { display:block; }
.shift-mobile-board { display:none; }
@media (max-width: 1199.98px){
  .shift-board-grid { grid-template-columns:1fr; }
  .shift-pool-sticky { position:static; }
}
@media (max-width: 991.98px){
  .dashboard-stats { grid-template-columns:1fr 1fr; }
}
@media (max-width: 768px){
  .dashboard-stats { grid-template-columns:1fr; }
  .shift-desktop-board { display:none; }
  .shift-mobile-board { display:block; }
}


.jako-home-card {
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--app-accent) 6%, transparent), transparent 28%), linear-gradient(135deg, var(--app-surface), color-mix(in srgb, var(--app-surface) 88%, var(--app-border)));
}
.jako-home-facts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.jako-fact-card {
  border: 1px solid var(--app-border);
  border-radius: 1rem;
  background: var(--app-surface);
  padding: 1rem;
}
.jako-fact-label {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--app-muted);
  margin-bottom: .45rem;
}
.jako-fact-text {
  color: var(--app-text);
}
.jako-product-list {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
}
.jako-product-pill {
  display: inline-flex;
  align-items: center;
  padding: .55rem .85rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--app-surface) 82%, var(--app-border));
  border: 1px solid #dbe2ea;
  font-weight: 600;
  color: var(--app-text);
}
@media (max-width: 991.98px) {
  .jako-home-facts {
    grid-template-columns: 1fr;
  }
}


.module-hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--app-link) 14%, transparent), transparent 30%), linear-gradient(135deg, var(--app-surface), color-mix(in srgb, var(--app-surface) 88%, var(--app-border)));
}
.module-hero::after {
  content: "";
  position: absolute;
  inset: auto -40px -40px auto;
  width: 180px;
  height: 180px;
  border-radius: 999px;
  background: rgba(17,24,39,.03);
}
.module-kicker {
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.4rem .75rem;
  border-radius:999px;
  background:#eef2ff;
  color:#3730a3;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.module-stats {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:1rem;
}
.module-stat {
  padding:1rem 1.1rem;
  border:1px solid var(--app-border);
  border-radius:1rem;
  background:var(--app-surface);
}
.module-stat-label {
  font-size:.78rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--app-muted);
}
.module-stat-value {
  margin-top:.35rem;
  font-size:1.8rem;
  font-weight:700;
  line-height:1;
}
.module-panel-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1rem;
}
.module-panel-title h2,
.module-panel-title h3 {
  margin:0;
  font-size:1.05rem;
}
.module-help {
  color:var(--app-muted);
  font-size:.92rem;
}
.module-list-card,
.module-message-card,
.module-resource-card,
.module-task-card {
  border:1px solid var(--app-border);
  border-radius:1rem;
  background:var(--app-surface);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.module-list-card:hover,
.module-message-card:hover,
.module-resource-card:hover,
.module-task-card:hover {
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(15,23,42,.08);
  border-color:var(--app-border);
}
.module-list-card.is-active {
  border-color:var(--app-text);
  background:color-mix(in srgb, var(--app-surface) 88%, var(--app-border));
}
.module-dot {
  width:.8rem;
  height:.8rem;
  border-radius:999px;
  display:inline-block;
  flex:0 0 auto;
}
.module-sticky {
  position:sticky;
  top:88px;
}
.module-empty {
  border:1px dashed #cbd5e1;
  border-radius:1rem;
  background:var(--app-surface);
  color:var(--app-muted);
  text-align:center;
  padding:1.25rem;
}
.task-board-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  margin-bottom:1rem;
}
.task-board-column {
  background:color-mix(in srgb, var(--app-surface) 88%, var(--app-border));
  border:1px solid var(--app-border);
  border-radius:1rem;
  padding:1rem;
}
.task-board-chip {
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.28rem .65rem;
  border-radius:999px;
  color:var(--app-accent-contrast);
  font-size:.78rem;
  font-weight:600;
}
.task-priority-bar { width:4px; border-radius:999px; }
.task-meta {
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:.55rem .9rem;
  font-size:.86rem;
}
.comm-post-header,
.resource-meta-grid,
.document-meta-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:.75rem;
}
.resource-status-pill,
.visibility-pill {
  display:inline-flex;
  align-items:center;
  padding:.28rem .65rem;
  border-radius:999px;
  font-size:.78rem;
  font-weight:700;
}
.visibility-pill.all { background:color-mix(in srgb, var(--app-success) 14%, var(--app-surface)); color:var(--app-success); }
.visibility-pill.member { background:color-mix(in srgb, var(--app-accent) 10%, var(--app-surface)); color:var(--app-accent); }
.visibility-pill.manager { background:color-mix(in srgb, var(--app-danger) 14%, var(--app-surface)); color:var(--app-danger); }
.resource-status-pill.aktiv { background:color-mix(in srgb, var(--app-success) 18%, var(--app-surface)); color:var(--app-success); }
.resource-status-pill.wartung { background:color-mix(in srgb, var(--app-warning) 18%, var(--app-surface)); color:var(--app-warning); }
.resource-status-pill.gesperrt { background:#e5e7eb; color:#374151; }
.resource-conflict-ok { color:var(--app-success); font-weight:700; }
.resource-conflict-bad { color:var(--app-danger); font-weight:700; }
.doc-version-table td,
.doc-version-table th { white-space:nowrap; }
.channel-list { display:flex; flex-direction:column; gap:.75rem; }
.comment-bubble {
  border:1px solid var(--app-border);
  border-radius:1rem;
  background:color-mix(in srgb, var(--app-surface) 88%, var(--app-border));
  padding:.85rem 1rem;
}
@media (max-width: 991.98px){
  .module-sticky { position:static; }
  .task-meta { grid-template-columns:1fr; }
}

/* 2026-04-05 Feinschliff Module */
.module-hero{
  border:1px solid #e5e7eb !important;
  box-shadow:0 12px 28px rgba(15,23,42,.06) !important;
  background:
    radial-gradient(circle at top right, rgba(59,130,246,.10), transparent 26%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
.module-hero .display-6{
  font-size:clamp(1.85rem, 2vw + 1rem, 2.6rem);
  line-height:1.1;
}
.module-hero .lead{
  max-width:860px;
  font-size:1.02rem;
}
.module-kicker{
  background:color-mix(in srgb, var(--app-surface) 84%, var(--app-border));
  color:var(--app-text);
  border:1px solid var(--app-border);
}
.module-stats{
  gap:.9rem;
}
.module-stat{
  position:relative;
  overflow:hidden;
  border:1px solid var(--app-border);
  box-shadow:0 8px 20px rgba(15,23,42,.04);
  background:linear-gradient(180deg,#ffffff 0%, #fbfdff 100%);
}
.module-stat::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:var(--app-accent);
  opacity:.08;
}
.module-stat-value{
  font-size:1.6rem;
  line-height:1.1;
}
.module-sticky > .card,
.col-xl-8 > .card,
.col-xl-8 > .vstack > .card,
.col-xl-8 .module-message-card,
.col-xl-8 .module-resource-card,
.col-xl-8 .module-task-card{
  border:1px solid #e5e7eb !important;
  box-shadow:0 10px 24px rgba(15,23,42,.05) !important;
}
.module-sticky > .card .card-body,
.col-xl-8 > .card .card-body,
.col-xl-8 > .vstack > .card .card-body,
.module-message-card .card-body{
  padding:1.25rem !important;
}
.module-panel-title{
  padding-bottom:.8rem;
  margin-bottom:1rem;
  border-bottom:1px solid var(--app-border);
}
.module-panel-title h2,
.module-panel-title h3{
  font-size:1rem;
  font-weight:700;
  color:var(--app-text);
}
.module-help{
  font-size:.82rem;
}
.module-list-card,
.module-message-card,
.module-resource-card,
.module-task-card{
  border-radius:1rem;
}
.module-list-card{
  background:linear-gradient(180deg,#fff 0%, #fbfcfe 100%);
}
.module-list-card:hover,
.module-message-card:hover,
.module-resource-card:hover,
.module-task-card:hover{
  transform:none;
  box-shadow:0 12px 24px rgba(15,23,42,.06);
}
.module-list-card.is-active{
  background:color-mix(in srgb, var(--app-surface) 88%, var(--app-border));
  border-color:var(--app-border);
  box-shadow:inset 0 0 0 1px #11182714;
}
.module-empty{
  background:color-mix(in srgb, var(--app-surface) 92%, var(--app-border));
  color:var(--app-muted);
}
.channel-list{ gap:.65rem; }
.form-label{
  font-size:.84rem;
  color:var(--app-muted);
  font-weight:600;
  margin-bottom:.35rem;
}
.form-control,
.form-select,
.input-group-text{
  border-color:#d7dee8;
  min-height:46px;
  background:var(--app-surface);
}
textarea.form-control{
  min-height:auto;
}
.form-control:focus,
.form-select:focus{
  border-color:#94a3b8;
  box-shadow:0 0 0 .2rem rgba(17,24,39,.08);
}
.btn-dark{
  box-shadow:0 6px 14px rgba(17,24,39,.14);
}
.task-board-column{
  background:linear-gradient(180deg,#f8fafc 0%, #f3f6fa 100%);
  border-color:var(--app-border);
  padding:.9rem;
}
.task-board-head{
  padding:.1rem .15rem .8rem;
  border-bottom:1px solid #e5e7eb;
}
.module-task-card{
  background:var(--app-surface);
}
.task-priority-bar{
  width:5px;
}
.task-meta{
  margin-top:.1rem;
  padding-top:.85rem;
  border-top:1px solid var(--app-border);
}
.task-meta > div{
  background:color-mix(in srgb, var(--app-surface) 88%, var(--app-border));
  border:1px solid var(--app-border);
  border-radius:.8rem;
  padding:.55rem .7rem;
}
.task-board-chip{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.document-meta-grid,
.resource-meta-grid,
.comm-post-header{
  gap:.8rem;
}
.document-meta-grid > div,
.resource-meta-grid > div{
  border:1px solid var(--app-border);
  border-radius:.9rem;
  background:color-mix(in srgb, var(--app-surface) 88%, var(--app-border));
  padding:.75rem .85rem;
}
.doc-version-table{
  border:1px solid var(--app-border);
  border-radius:1rem;
  overflow:hidden;
}
.doc-version-table .table thead th{
  background:color-mix(in srgb, var(--app-surface) 88%, var(--app-border));
}
details{
  border-top:1px solid var(--app-border);
  padding-top:.9rem;
}
summary{
  cursor:pointer;
  list-style:none;
  font-weight:600;
}
summary::-webkit-details-marker{ display:none; }
summary::before{
  content:'▸';
  display:inline-block;
  margin-right:.5rem;
  transition:transform .15s ease;
}
details[open] summary::before{
  transform:rotate(90deg);
}
.module-message-card{
  background:linear-gradient(180deg,#fff 0%, #fcfdff 100%);
}
.comment-bubble{
  background:var(--app-surface);
  border-color:#e8edf3;
}
.module-message-card .card-body > .mb-4{
  line-height:1.65;
  color:#1f2937;
}
.resource-status-pill,
.visibility-pill{
  letter-spacing:.02em;
}
.table tbody td{
  border-color:#eef2f7;
}
.table tbody tr:hover td{
  background:#fafcff;
}
@media (max-width: 991.98px){
  .module-hero .card-body,
  .module-sticky > .card .card-body,
  .col-xl-8 > .card .card-body,
  .module-message-card .card-body{
    padding:1rem !important;
  }
}

.app-nav-dropdown {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 1rem;
  padding: .5rem;
  box-shadow: 0 18px 40px rgba(15,23,42,.18);
}
.app-nav-dropdown .dropdown-item {
  border-radius: .75rem;
  padding: .7rem .85rem;
  font-weight: 500;
}
.app-nav-dropdown .dropdown-item:hover,
.app-nav-dropdown .dropdown-item:focus {
  background: color-mix(in srgb, var(--app-surface) 82%, var(--app-border));
  color: var(--app-text);
}
.app-profile-nav {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.app-profile-badge {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.app-profile-badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.profile-avatar,
.profile-avatar-lg {
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--app-navbar-start), var(--app-navbar-end));
  color: var(--app-accent-contrast);
  font-weight: 700;
}
.profile-avatar {
  width: 56px;
  height: 56px;
  font-size: 1rem;
}
.profile-avatar-lg {
  width: 104px;
  height: 104px;
  font-size: 1.8rem;
  box-shadow: 0 12px 24px rgba(15,23,42,.18);
}
.profile-avatar img,
.profile-avatar-lg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.profile-upload-preview {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}


.app-profile-nav-text {
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.05;
}
.app-profile-nav-name {
  font-size: .92rem;
  font-weight: 600;
  color: var(--app-accent-contrast);
  max-width: 170px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-profile-nav-label {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.72);
}
.app-profile-dropdown {
  min-width: 320px;
}
.app-profile-dropdown-header {
  padding: .2rem;
}
.app-profile-dropdown-card {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .8rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, var(--app-navbar-start), var(--app-navbar-end));
  color: var(--app-accent-contrast);
}
.app-profile-dropdown-avatar {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.app-profile-dropdown-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.app-profile-dropdown-meta {
  min-width: 0;
}
.app-profile-dropdown-title {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: .15rem;
}
.app-profile-dropdown-subtitle,
.app-profile-dropdown-note {
  font-size: .82rem;
  color: rgba(255,255,255,.78);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-profile-dropdown-note {
  color: rgba(255,255,255,.64);
  margin-top: .3rem;
}
@media (max-width: 1199.98px) {
  .app-profile-dropdown {
    min-width: min(100%, 320px);
  }
}


.home-hero-user{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.home-hero-avatar{width:84px;height:84px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,#111827,#374151);color:var(--app-accent-contrast);display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;box-shadow:0 10px 24px rgba(15,23,42,.18)}
.home-hero-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.online-members-list{display:flex;flex-wrap:wrap;gap:.75rem}
.online-member-pill{display:inline-flex;align-items:center;gap:.7rem;padding:.7rem .9rem;border-radius:999px;background:var(--app-surface);border:1px solid rgba(15,23,42,.08);box-shadow:0 10px 24px rgba(15,23,42,.05)}
.online-member-avatar{width:38px;height:38px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,#111827,#4b5563);color:var(--app-accent-contrast);display:inline-flex;align-items:center;justify-content:center;font-size:.95rem;font-weight:700;flex:0 0 38px}
.online-member-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.online-member-name{font-weight:600;color:#111827}
.online-member-status{display:inline-flex;align-items:center;gap:.35rem;font-size:.85rem;color:#4b5563}
.online-live-dot{width:10px;height:10px;border-radius:50%;background:#22c55e;display:inline-block;box-shadow:0 0 0 0 rgba(34,197,94,.55);animation:onlinePulse 1.8s infinite}
.online-live-dot.small{width:8px;height:8px}
@keyframes onlinePulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}70%{box-shadow:0 0 0 10px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
@media (max-width: 767.98px){.home-hero-avatar{width:68px;height:68px}.online-members-list{display:grid;grid-template-columns:1fr}.online-member-pill{width:100%;justify-content:flex-start}}


/* CCK FIX: robuste Darstellung für Checkboxen, Radio-Buttons und Bootstrap-Switches
   Verhindert, dass das dynamische Theme Haken/Schalter unsichtbar macht. */
.form-check:not(.dancer-switch) .form-check-input[type="checkbox"],
.form-check:not(.dancer-switch) .form-check-input[type="radio"]{
  opacity:1 !important;
  visibility:visible !important;
  border:1px solid var(--app-border, var(--border, #adb5bd)) !important;
  background-color:var(--app-surface, var(--surface-bg, #fff)) !important;
  color:var(--app-text, var(--text, #111827)) !important;
  cursor:pointer;
  flex:0 0 auto;
  accent-color:var(--app-success, var(--success, #198754));
}
.form-check:not(.dancer-switch):not(.form-switch) .form-check-input[type="checkbox"]{
  width:1.2rem !important;
  height:1.2rem !important;
  border-radius:.32rem !important;
}
.form-check:not(.dancer-switch):not(.form-switch) .form-check-input[type="radio"]{
  width:1.2rem !important;
  height:1.2rem !important;
  border-radius:50% !important;
}
.form-check:not(.dancer-switch):not(.form-switch) .form-check-input[type="checkbox"]:checked{
  background-color:var(--app-success, var(--success, #198754)) !important;
  border-color:var(--app-success, var(--success, #198754)) !important;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
  background-size:100% 100% !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}
.form-check:not(.dancer-switch):not(.form-switch) .form-check-input[type="radio"]:checked{
  background-color:var(--app-success, var(--success, #198754)) !important;
  border-color:var(--app-success, var(--success, #198754)) !important;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e") !important;
  background-size:100% 100% !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}
.form-check:not(.dancer-switch).form-switch{
  min-height:2rem;
  display:flex;
  align-items:center;
  gap:.45rem;
}
.form-check:not(.dancer-switch).form-switch .form-check-input[type="checkbox"]{
  width:2.7rem !important;
  height:1.45rem !important;
  min-width:2.7rem !important;
  border-radius:999px !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  background-color:#cbd5e1 !important;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
  background-position:left center !important;
  background-size:contain !important;
  background-repeat:no-repeat !important;
  transition:background-position .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}
.form-check:not(.dancer-switch).form-switch .form-check-input[type="checkbox"]:checked{
  background-color:var(--app-success, var(--success, #198754)) !important;
  border-color:var(--app-success, var(--success, #198754)) !important;
  background-position:right center !important;
}
.form-check:not(.dancer-switch) .form-check-input:focus{
  border-color:var(--app-success, var(--success, #198754)) !important;
  box-shadow:0 0 0 .22rem color-mix(in srgb, var(--app-success, var(--success, #198754)) 22%, transparent) !important;
}
.form-check:not(.dancer-switch) .form-check-label{cursor:pointer;}
/* =========================================================
   CCK DARK-MODE KOMPLETT-FIX
   Gilt zentral fuer Buttons, Labels, Dropdowns, Tabellen,
   Formulare, Modals, Offcanvas, Tabs, Listen und Alerts.
   ========================================================= */
html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] body.app-shell{
  background:var(--page-bg) !important;
  color:var(--text) !important;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .card-body,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-body,
html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .offcanvas,
html[data-theme="dark"] .offcanvas-header,
html[data-theme="dark"] .offcanvas-body,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .accordion-item,
html[data-theme="dark"] .accordion-button,
html[data-theme="dark"] .card-like-box,
html[data-theme="dark"] .home-link-card,
html[data-theme="dark"] .home-hero-panel,
html[data-theme="dark"] .calendar-day,
html[data-theme="dark"] .mobile-tabs-nav,
html[data-theme="dark"] .shift-pool-card,
html[data-theme="dark"] .shift-drop-card,
html[data-theme="dark"] .module-list-card,
html[data-theme="dark"] .module-message-card,
html[data-theme="dark"] .module-resource-card,
html[data-theme="dark"] .module-task-card,
html[data-theme="dark"] .task-board-column{
  background:var(--surface-bg) !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
}

html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .table-light,
html[data-theme="dark"] .table-light > *,
html[data-theme="dark"] .table thead th,
html[data-theme="dark"] .excel-table .sticky-col,
html[data-theme="dark"] .mobile-tab-btn.active{
  background:color-mix(in srgb, var(--surface-bg) 82%, var(--border)) !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
}

html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-body,
html[data-theme="dark"] .dropdown-item,
html[data-theme="dark"] .form-label,
html[data-theme="dark"] label,
html[data-theme="dark"] .form-check-label,
html[data-theme="dark"] .col-form-label,
html[data-theme="dark"] .card-title,
html[data-theme="dark"] .card-text,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] p,
html[data-theme="dark"] td,
html[data-theme="dark"] th,
html[data-theme="dark"] li,
html[data-theme="dark"] summary{
  color:var(--text) !important;
}

html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .form-text,
html[data-theme="dark"] small,
html[data-theme="dark"] .small,
html[data-theme="dark"] .text-secondary{
  color:var(--muted) !important;
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .input-group-text,
html[data-theme="dark"] .form-control-plaintext{
  background-color:color-mix(in srgb, var(--surface-bg) 88%, #000) !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
}
html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] textarea::placeholder{
  color:var(--muted) !important;
  opacity:1 !important;
}
html[data-theme="dark"] .form-select option,
html[data-theme="dark"] select option{
  background:var(--surface-bg) !important;
  color:var(--text) !important;
}
html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-select:disabled,
html[data-theme="dark"] textarea:disabled,
html[data-theme="dark"] .form-control[readonly]{
  background:color-mix(in srgb, var(--surface-bg) 70%, var(--border)) !important;
  color:var(--muted) !important;
  opacity:1 !important;
}

html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .btn-outline-light,
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn-outline-secondary{
  background:color-mix(in srgb, var(--surface-bg) 84%, var(--border)) !important;
  border-color:var(--border) !important;
  color:var(--text) !important;
}
html[data-theme="dark"] .btn-light:hover,
html[data-theme="dark"] .btn-outline-light:hover,
html[data-theme="dark"] .btn-secondary:hover,
html[data-theme="dark"] .btn-outline-secondary:hover,
html[data-theme="dark"] .btn-light:focus,
html[data-theme="dark"] .btn-outline-light:focus,
html[data-theme="dark"] .btn-secondary:focus,
html[data-theme="dark"] .btn-outline-secondary:focus{
  background:color-mix(in srgb, var(--surface-bg) 65%, var(--accent)) !important;
  border-color:var(--accent) !important;
  color:var(--text) !important;
}
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-dark{
  background:var(--accent) !important;
  border-color:var(--accent) !important;
  color:var(--accent-contrast) !important;
}
html[data-theme="dark"] .btn-outline-primary,
html[data-theme="dark"] .btn-outline-dark{
  background:transparent !important;
  border-color:var(--accent) !important;
  color:var(--link) !important;
}
html[data-theme="dark"] .btn-outline-primary:hover,
html[data-theme="dark"] .btn-outline-dark:hover,
html[data-theme="dark"] .btn-outline-primary:focus,
html[data-theme="dark"] .btn-outline-dark:focus{
  background:var(--accent) !important;
  border-color:var(--accent) !important;
  color:var(--accent-contrast) !important;
}
html[data-theme="dark"] .btn-close{
  filter:invert(1) grayscale(100%) brightness(200%) !important;
  opacity:.85 !important;
}

html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus,
html[data-theme="dark"] .dropdown-item.active,
html[data-theme="dark"] .dropdown-item:active{
  background:color-mix(in srgb, var(--accent) 18%, var(--surface-bg)) !important;
  color:var(--text) !important;
}
html[data-theme="dark"] .dropdown-divider,
html[data-theme="dark"] hr,
html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-start,
html[data-theme="dark"] .border-end{
  border-color:var(--border) !important;
}

html[data-theme="dark"] .table,
html[data-theme="dark"] .table td,
html[data-theme="dark"] .table th{
  background-color:transparent !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
}
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > *,
html[data-theme="dark"] .table-hover > tbody > tr:hover > *,
html[data-theme="dark"] .table tbody tr:hover td{
  background:color-mix(in srgb, var(--surface-bg) 86%, var(--border)) !important;
  color:var(--text) !important;
}

html[data-theme="dark"] .alert,
html[data-theme="dark"] .badge-soft,
html[data-theme="dark"] .home-kicker,
html[data-theme="dark"] .module-empty,
html[data-theme="dark"] .calendar-entry,
html[data-theme="dark"] .nav-tabs .nav-link{
  background:color-mix(in srgb, var(--surface-bg) 84%, var(--border)) !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
}
html[data-theme="dark"] .nav-tabs .nav-link.active,
html[data-theme="dark"] .page-link,
html[data-theme="dark"] .page-item:not(.active) .page-link{
  background:var(--surface-bg) !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
}
html[data-theme="dark"] .page-item.active .page-link{
  background:var(--accent) !important;
  border-color:var(--accent) !important;
  color:var(--accent-contrast) !important;
}

html[data-theme="dark"] .form-check-input:not(:checked){
  background-color:color-mix(in srgb, var(--surface-bg) 80%, var(--border)) !important;
  border-color:var(--border) !important;
}
html[data-theme="dark"] .form-check-input:checked{
  background-color:var(--success) !important;
  border-color:var(--success) !important;
}
html[data-theme="dark"] .form-switch .form-check-input:not(:checked){
  background-color:color-mix(in srgb, var(--surface-bg) 55%, var(--border)) !important;
}

@media (prefers-color-scheme: dark){
  html[data-theme="auto"],
  html[data-theme="auto"] body,
  html[data-theme="auto"] body.app-shell{
    background:var(--page-bg) !important;
    color:var(--text) !important;
  }
  html[data-theme="auto"] .card,
  html[data-theme="auto"] .card-body,
  html[data-theme="auto"] .modal-content,
  html[data-theme="auto"] .modal-header,
  html[data-theme="auto"] .modal-body,
  html[data-theme="auto"] .modal-footer,
  html[data-theme="auto"] .offcanvas,
  html[data-theme="auto"] .offcanvas-header,
  html[data-theme="auto"] .offcanvas-body,
  html[data-theme="auto"] .dropdown-menu,
  html[data-theme="auto"] .list-group-item,
  html[data-theme="auto"] .accordion-item,
  html[data-theme="auto"] .accordion-button,
  html[data-theme="auto"] .card-like-box,
  html[data-theme="auto"] .home-link-card,
  html[data-theme="auto"] .home-hero-panel,
  html[data-theme="auto"] .calendar-day,
  html[data-theme="auto"] .mobile-tabs-nav,
  html[data-theme="auto"] .shift-pool-card,
  html[data-theme="auto"] .shift-drop-card,
  html[data-theme="auto"] .module-list-card,
  html[data-theme="auto"] .module-message-card,
  html[data-theme="auto"] .module-resource-card,
  html[data-theme="auto"] .module-task-card,
  html[data-theme="auto"] .task-board-column{
    background:var(--surface-bg) !important;
    color:var(--text) !important;
    border-color:var(--border) !important;
  }
  html[data-theme="auto"] .bg-white,
  html[data-theme="auto"] .bg-light,
  html[data-theme="auto"] .table-light,
  html[data-theme="auto"] .table-light > *,
  html[data-theme="auto"] .table thead th,
  html[data-theme="auto"] .excel-table .sticky-col,
  html[data-theme="auto"] .mobile-tab-btn.active{
    background:color-mix(in srgb, var(--surface-bg) 82%, var(--border)) !important;
    color:var(--text) !important;
    border-color:var(--border) !important;
  }
  html[data-theme="auto"] .text-dark,
  html[data-theme="auto"] .text-body,
  html[data-theme="auto"] .dropdown-item,
  html[data-theme="auto"] .form-label,
  html[data-theme="auto"] label,
  html[data-theme="auto"] .form-check-label,
  html[data-theme="auto"] .col-form-label,
  html[data-theme="auto"] .card-title,
  html[data-theme="auto"] .card-text,
  html[data-theme="auto"] h1,
  html[data-theme="auto"] h2,
  html[data-theme="auto"] h3,
  html[data-theme="auto"] h4,
  html[data-theme="auto"] h5,
  html[data-theme="auto"] h6,
  html[data-theme="auto"] p,
  html[data-theme="auto"] td,
  html[data-theme="auto"] th,
  html[data-theme="auto"] li,
  html[data-theme="auto"] summary{
    color:var(--text) !important;
  }
  html[data-theme="auto"] .text-muted,
  html[data-theme="auto"] .form-text,
  html[data-theme="auto"] small,
  html[data-theme="auto"] .small,
  html[data-theme="auto"] .text-secondary{
    color:var(--muted) !important;
  }
  html[data-theme="auto"] .form-control,
  html[data-theme="auto"] .form-select,
  html[data-theme="auto"] textarea,
  html[data-theme="auto"] .input-group-text,
  html[data-theme="auto"] .form-control-plaintext{
    background-color:color-mix(in srgb, var(--surface-bg) 88%, #000) !important;
    color:var(--text) !important;
    border-color:var(--border) !important;
  }
  html[data-theme="auto"] .form-control::placeholder,
  html[data-theme="auto"] textarea::placeholder{
    color:var(--muted) !important;
    opacity:1 !important;
  }
  html[data-theme="auto"] .form-select option,
  html[data-theme="auto"] select option{
    background:var(--surface-bg) !important;
    color:var(--text) !important;
  }
  html[data-theme="auto"] .form-control:disabled,
  html[data-theme="auto"] .form-select:disabled,
  html[data-theme="auto"] textarea:disabled,
  html[data-theme="auto"] .form-control[readonly]{
    background:color-mix(in srgb, var(--surface-bg) 70%, var(--border)) !important;
    color:var(--muted) !important;
    opacity:1 !important;
  }
  html[data-theme="auto"] .btn-light,
  html[data-theme="auto"] .btn-outline-light,
  html[data-theme="auto"] .btn-secondary,
  html[data-theme="auto"] .btn-outline-secondary{
    background:color-mix(in srgb, var(--surface-bg) 84%, var(--border)) !important;
    border-color:var(--border) !important;
    color:var(--text) !important;
  }
  html[data-theme="auto"] .btn-light:hover,
  html[data-theme="auto"] .btn-outline-light:hover,
  html[data-theme="auto"] .btn-secondary:hover,
  html[data-theme="auto"] .btn-outline-secondary:hover,
  html[data-theme="auto"] .btn-light:focus,
  html[data-theme="auto"] .btn-outline-light:focus,
  html[data-theme="auto"] .btn-secondary:focus,
  html[data-theme="auto"] .btn-outline-secondary:focus{
    background:color-mix(in srgb, var(--surface-bg) 65%, var(--accent)) !important;
    border-color:var(--accent) !important;
    color:var(--text) !important;
  }
  html[data-theme="auto"] .btn-primary,
  html[data-theme="auto"] .btn-dark{
    background:var(--accent) !important;
    border-color:var(--accent) !important;
    color:var(--accent-contrast) !important;
  }
  html[data-theme="auto"] .btn-outline-primary,
  html[data-theme="auto"] .btn-outline-dark{
    background:transparent !important;
    border-color:var(--accent) !important;
    color:var(--link) !important;
  }
  html[data-theme="auto"] .btn-outline-primary:hover,
  html[data-theme="auto"] .btn-outline-dark:hover,
  html[data-theme="auto"] .btn-outline-primary:focus,
  html[data-theme="auto"] .btn-outline-dark:focus{
    background:var(--accent) !important;
    border-color:var(--accent) !important;
    color:var(--accent-contrast) !important;
  }
  html[data-theme="auto"] .btn-close{
    filter:invert(1) grayscale(100%) brightness(200%) !important;
    opacity:.85 !important;
  }
  html[data-theme="auto"] .dropdown-item:hover,
  html[data-theme="auto"] .dropdown-item:focus,
  html[data-theme="auto"] .dropdown-item.active,
  html[data-theme="auto"] .dropdown-item:active{
    background:color-mix(in srgb, var(--accent) 18%, var(--surface-bg)) !important;
    color:var(--text) !important;
  }
  html[data-theme="auto"] .dropdown-divider,
  html[data-theme="auto"] hr,
  html[data-theme="auto"] .border,
  html[data-theme="auto"] .border-top,
  html[data-theme="auto"] .border-bottom,
  html[data-theme="auto"] .border-start,
  html[data-theme="auto"] .border-end{
    border-color:var(--border) !important;
  }
  html[data-theme="auto"] .table,
  html[data-theme="auto"] .table td,
  html[data-theme="auto"] .table th{
    background-color:transparent !important;
    color:var(--text) !important;
    border-color:var(--border) !important;
  }
  html[data-theme="auto"] .table-striped > tbody > tr:nth-of-type(odd) > *,
  html[data-theme="auto"] .table-hover > tbody > tr:hover > *,
  html[data-theme="auto"] .table tbody tr:hover td{
    background:color-mix(in srgb, var(--surface-bg) 86%, var(--border)) !important;
    color:var(--text) !important;
  }
  html[data-theme="auto"] .alert,
  html[data-theme="auto"] .badge-soft,
  html[data-theme="auto"] .home-kicker,
  html[data-theme="auto"] .module-empty,
  html[data-theme="auto"] .calendar-entry,
  html[data-theme="auto"] .nav-tabs .nav-link{
    background:color-mix(in srgb, var(--surface-bg) 84%, var(--border)) !important;
    color:var(--text) !important;
    border-color:var(--border) !important;
  }
  html[data-theme="auto"] .nav-tabs .nav-link.active,
  html[data-theme="auto"] .page-link,
  html[data-theme="auto"] .page-item:not(.active) .page-link{
    background:var(--surface-bg) !important;
    color:var(--text) !important;
    border-color:var(--border) !important;
  }
  html[data-theme="auto"] .page-item.active .page-link{
    background:var(--accent) !important;
    border-color:var(--accent) !important;
    color:var(--accent-contrast) !important;
  }
  html[data-theme="auto"] .form-check-input:not(:checked){
    background-color:color-mix(in srgb, var(--surface-bg) 80%, var(--border)) !important;
    border-color:var(--border) !important;
  }
  html[data-theme="auto"] .form-check-input:checked{
    background-color:var(--success) !important;
    border-color:var(--success) !important;
  }
  html[data-theme="auto"] .form-switch .form-check-input:not(:checked){
    background-color:color-mix(in srgb, var(--surface-bg) 55%, var(--border)) !important;
  }
}


/* =========================================================
   CCK DARK-MODE LESBARKEIT V2 (gezielt, nicht global)
   Korrigiert nur echte helle Flaechen/Bootstrap-Variablen,
   ohne pauschal alle DIVs oder Layout-Bereiche zu ueberschreiben.
   ========================================================= */
html[data-theme="dark"]{
  --bs-body-bg:var(--page-bg);
  --bs-body-color:var(--text);
  --bs-border-color:var(--border);
  --bs-secondary-color:var(--muted);
  --bs-tertiary-bg:color-mix(in srgb, var(--surface-bg) 84%, var(--border));
  color-scheme:dark;
}
@media (prefers-color-scheme: dark){
  html[data-theme="auto"]{
    --bs-body-bg:var(--page-bg);
    --bs-body-color:var(--text);
    --bs-border-color:var(--border);
    --bs-secondary-color:var(--muted);
    --bs-tertiary-bg:color-mix(in srgb, var(--surface-bg) 84%, var(--border));
    color-scheme:dark;
  }
}

html[data-theme="dark"] .bg-body,
html[data-theme="dark"] .bg-body-tertiary,
html[data-theme="dark"] .bg-body-secondary,
html[data-theme="dark"] .text-bg-light,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .popover,
html[data-theme="dark"] .toast,
html[data-theme="dark"] .toast-header,
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .list-group,
html[data-theme="dark"] .accordion,
html[data-theme="dark"] .accordion-body{
  background:var(--surface-bg) !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
}

html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#ffffff"],
html[data-theme="dark"] [style*="background: #ffffff"],
html[data-theme="dark"] [style*="background:white"],
html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background-color:#fff"],
html[data-theme="dark"] [style*="background-color: #fff"],
html[data-theme="dark"] [style*="background-color:#ffffff"],
html[data-theme="dark"] [style*="background-color: #ffffff"],
html[data-theme="dark"] [style*="background-color:white"],
html[data-theme="dark"] [style*="background-color: white"]{
  background:var(--surface-bg) !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
}

@media (prefers-color-scheme: dark){
  html[data-theme="auto"] .bg-body,
  html[data-theme="auto"] .bg-body-tertiary,
  html[data-theme="auto"] .bg-body-secondary,
  html[data-theme="auto"] .text-bg-light,
  html[data-theme="auto"] .dropdown-menu,
  html[data-theme="auto"] .popover,
  html[data-theme="auto"] .toast,
  html[data-theme="auto"] .toast-header,
  html[data-theme="auto"] .card-header,
  html[data-theme="auto"] .card-footer,
  html[data-theme="auto"] .list-group,
  html[data-theme="auto"] .accordion,
  html[data-theme="auto"] .accordion-body{
    background:var(--surface-bg) !important;
    color:var(--text) !important;
    border-color:var(--border) !important;
  }

  html[data-theme="auto"] [style*="background:#fff"],
  html[data-theme="auto"] [style*="background: #fff"],
  html[data-theme="auto"] [style*="background:#ffffff"],
  html[data-theme="auto"] [style*="background: #ffffff"],
  html[data-theme="auto"] [style*="background:white"],
  html[data-theme="auto"] [style*="background: white"],
  html[data-theme="auto"] [style*="background-color:#fff"],
  html[data-theme="auto"] [style*="background-color: #fff"],
  html[data-theme="auto"] [style*="background-color:#ffffff"],
  html[data-theme="auto"] [style*="background-color: #ffffff"],
  html[data-theme="auto"] [style*="background-color:white"],
  html[data-theme="auto"] [style*="background-color: white"]{
    background:var(--surface-bg) !important;
    color:var(--text) !important;
    border-color:var(--border) !important;
  }
}


/* =========================================================
   CCK DARK-MODE PATCH: helle Restflaechen auf betroffenen Seiten
   Gezielt fuer Info, Showtanz, Schichten, Organigramm, Ontime,
   Kommunikation, Tickets, Admin-Bereiche.
   ========================================================= */
html[data-theme="dark"] .card,
html[data-theme="dark"] .card-body,
html[data-theme="dark"] .admin-signup-list,
html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .training-calendar-card,
html[data-theme="dark"] .training-calendar-head,
html[data-theme="dark"] .training-date-box,
html[data-theme="dark"] .training-summary-pill,
html[data-theme="dark"] .lift-category-details,
html[data-theme="dark"] .lift-category-details > summary,
html[data-theme="dark"] .lift-combo-details,
html[data-theme="dark"] .lift-combo-card,
html[data-theme="dark"] .lift-person-card,
html[data-theme="dark"] .lift-person-chip,
html[data-theme="dark"] .penalty-dropdown-menu,
html[data-theme="dark"] .shift-day-empty,
html[data-theme="dark"] .suggestion-pill,
html[data-theme="dark"] .shift-print-overview,
html[data-theme="dark"] .shift-print-overview-header,
html[data-theme="dark"] .mobile-shift-tabs,
html[data-theme="dark"] .mobile-shift-tab-btn.active,
html[data-theme="dark"] .ontime-card,
html[data-theme="dark"] .ontime-kpi .box,
html[data-theme="dark"] .ontime-row-current,
html[data-theme="dark"] .ontime-cue,
html[data-theme="dark"] .remote-card,
html[data-theme="dark"] .remote-kpi,
html[data-theme="dark"] .remote-item,
html[data-theme="dark"] .remote-item.current,
html[data-theme="dark"] .role-card,
html[data-theme="dark"] .role-card-header,
html[data-theme="dark"] .user-admin-stat,
html[data-theme="dark"] .user-card,
html[data-theme="dark"] .user-card-header,
html[data-theme="dark"] .permission-group,
html[data-theme="dark"] .user-empty,
html[data-theme="dark"] .orga-minimap,
html[data-theme="dark"] .orga-minimap-header,
html[data-theme="dark"] .orga-minimap-canvas,
html[data-theme="dark"] .orga-person-btn,
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .table,
html[data-theme="dark"] .table > :not(caption) > * > *{
  background:var(--surface-bg) !important;
  background-color:var(--surface-bg) !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
}

html[data-theme="dark"] .training-date-box .day,
html[data-theme="dark"] .training-date-box .month,
html[data-theme="dark"] .training-date-box .weekday,
html[data-theme="dark"] .training-meta-line,
html[data-theme="dark"] .stage-editor-meta,
html[data-theme="dark"] .stage-editor-help,
html[data-theme="dark"] .suggestion-empty,
html[data-theme="dark"] .remote-item .meta,
html[data-theme="dark"] .orga-muted,
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .small.text-muted{
  color:var(--muted) !important;
}

html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .btn-outline-light,
html[data-theme="dark"] .mobile-shift-tab-btn,
html[data-theme="dark"] .nav-tabs .nav-link,
html[data-theme="dark"] .orga-person-btn{
  background:color-mix(in srgb, var(--surface-bg) 82%, var(--border)) !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
}
html[data-theme="dark"] .btn-light:hover,
html[data-theme="dark"] .btn-outline-light:hover,
html[data-theme="dark"] .nav-tabs .nav-link.active,
html[data-theme="dark"] .nav-tabs .nav-link:hover{
  background:color-mix(in srgb, var(--surface-bg) 65%, var(--accent)) !important;
  color:var(--text) !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus{
  background-color:color-mix(in srgb, var(--surface-bg) 88%, var(--page-bg)) !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{color:var(--muted) !important; opacity:1;}

html[data-theme="dark"] .form-check-label,
html[data-theme="dark"] label,
html[data-theme="dark"] .form-label{color:var(--text) !important;}
html[data-theme="dark"] .form-check-input:not(:checked){background-color:color-mix(in srgb, var(--surface-bg) 75%, var(--border)) !important;border-color:var(--border) !important;}
html[data-theme="dark"] .form-check-input:checked{background-color:var(--success) !important;border-color:var(--success) !important;}

html[data-theme="dark"] .ql-toolbar,
html[data-theme="dark"] .ql-container,
html[data-theme="dark"] .ql-editor,
html[data-theme="dark"] .ql-picker,
html[data-theme="dark"] .ql-picker-options{
  background:var(--surface-bg) !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
}
html[data-theme="dark"] .ql-stroke{stroke:var(--text) !important;}
html[data-theme="dark"] .ql-fill{fill:var(--text) !important;}

html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .dropdown-item{
  background:var(--surface-bg) !important;
  color:var(--text) !important;
}
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus{background:color-mix(in srgb, var(--surface-bg) 70%, var(--accent)) !important;}

html[data-theme="dark"] .badge.bg-light,
html[data-theme="dark"] .text-bg-light{background:color-mix(in srgb, var(--surface-bg) 70%, var(--border)) !important;color:var(--text) !important;}

/* Automatischer Darkmode */
@media (prefers-color-scheme: dark){
  html[data-theme="auto"] .card,
  html[data-theme="auto"] .card-body,
  html[data-theme="auto"] .admin-signup-list,
  html[data-theme="auto"] .summary-card,
  html[data-theme="auto"] .training-calendar-card,
  html[data-theme="auto"] .training-calendar-head,
  html[data-theme="auto"] .training-date-box,
  html[data-theme="auto"] .training-summary-pill,
  html[data-theme="auto"] .lift-category-details,
  html[data-theme="auto"] .lift-category-details > summary,
  html[data-theme="auto"] .lift-combo-details,
  html[data-theme="auto"] .lift-combo-card,
  html[data-theme="auto"] .lift-person-card,
  html[data-theme="auto"] .lift-person-chip,
  html[data-theme="auto"] .penalty-dropdown-menu,
  html[data-theme="auto"] .shift-day-empty,
  html[data-theme="auto"] .suggestion-pill,
  html[data-theme="auto"] .shift-print-overview,
  html[data-theme="auto"] .shift-print-overview-header,
  html[data-theme="auto"] .mobile-shift-tabs,
  html[data-theme="auto"] .mobile-shift-tab-btn.active,
  html[data-theme="auto"] .ontime-card,
  html[data-theme="auto"] .ontime-kpi .box,
  html[data-theme="auto"] .ontime-row-current,
  html[data-theme="auto"] .ontime-cue,
  html[data-theme="auto"] .remote-card,
  html[data-theme="auto"] .remote-kpi,
  html[data-theme="auto"] .remote-item,
  html[data-theme="auto"] .remote-item.current,
  html[data-theme="auto"] .role-card,
  html[data-theme="auto"] .role-card-header,
  html[data-theme="auto"] .user-admin-stat,
  html[data-theme="auto"] .user-card,
  html[data-theme="auto"] .user-card-header,
  html[data-theme="auto"] .permission-group,
  html[data-theme="auto"] .user-empty,
  html[data-theme="auto"] .orga-minimap,
  html[data-theme="auto"] .orga-minimap-header,
  html[data-theme="auto"] .orga-minimap-canvas,
  html[data-theme="auto"] .orga-person-btn,
  html[data-theme="auto"] .bg-white,
  html[data-theme="auto"] .bg-light,
  html[data-theme="auto"] .list-group-item,
  html[data-theme="auto"] .table,
  html[data-theme="auto"] .table > :not(caption) > * > *{
    background:var(--surface-bg) !important;
    background-color:var(--surface-bg) !important;
    color:var(--text) !important;
    border-color:var(--border) !important;
  }
  html[data-theme="auto"] .training-date-box .day,
  html[data-theme="auto"] .training-date-box .month,
  html[data-theme="auto"] .training-date-box .weekday,
  html[data-theme="auto"] .training-meta-line,
  html[data-theme="auto"] .stage-editor-meta,
  html[data-theme="auto"] .stage-editor-help,
  html[data-theme="auto"] .suggestion-empty,
  html[data-theme="auto"] .remote-item .meta,
  html[data-theme="auto"] .orga-muted,
  html[data-theme="auto"] .text-muted,
  html[data-theme="auto"] .small.text-muted{color:var(--muted) !important;}
  html[data-theme="auto"] .btn-light,
  html[data-theme="auto"] .btn-outline-light,
  html[data-theme="auto"] .mobile-shift-tab-btn,
  html[data-theme="auto"] .nav-tabs .nav-link,
  html[data-theme="auto"] .orga-person-btn{
    background:color-mix(in srgb, var(--surface-bg) 82%, var(--border)) !important;
    color:var(--text) !important;
    border-color:var(--border) !important;
  }
  html[data-theme="auto"] input,
  html[data-theme="auto"] select,
  html[data-theme="auto"] textarea,
  html[data-theme="auto"] .form-control,
  html[data-theme="auto"] .form-select,
  html[data-theme="auto"] .form-control:focus,
  html[data-theme="auto"] .form-select:focus{
    background-color:color-mix(in srgb, var(--surface-bg) 88%, var(--page-bg)) !important;
    color:var(--text) !important;
    border-color:var(--border) !important;
  }
  html[data-theme="auto"] input::placeholder,
  html[data-theme="auto"] textarea::placeholder{color:var(--muted) !important; opacity:1;}
  html[data-theme="auto"] .form-check-label,
  html[data-theme="auto"] label,
  html[data-theme="auto"] .form-label{color:var(--text) !important;}
  html[data-theme="auto"] .form-check-input:not(:checked){background-color:color-mix(in srgb, var(--surface-bg) 75%, var(--border)) !important;border-color:var(--border) !important;}
  html[data-theme="auto"] .form-check-input:checked{background-color:var(--success) !important;border-color:var(--success) !important;}
  html[data-theme="auto"] .ql-toolbar,
  html[data-theme="auto"] .ql-container,
  html[data-theme="auto"] .ql-editor,
  html[data-theme="auto"] .ql-picker,
  html[data-theme="auto"] .ql-picker-options{
    background:var(--surface-bg) !important;
    color:var(--text) !important;
    border-color:var(--border) !important;
  }
  html[data-theme="auto"] .ql-stroke{stroke:var(--text) !important;}
  html[data-theme="auto"] .ql-fill{fill:var(--text) !important;}
  html[data-theme="auto"] .dropdown-menu,
  html[data-theme="auto"] .dropdown-item{background:var(--surface-bg) !important;color:var(--text) !important;}
  html[data-theme="auto"] .badge.bg-light,
  html[data-theme="auto"] .text-bg-light{background:color-mix(in srgb, var(--surface-bg) 70%, var(--border)) !important;color:var(--text) !important;}
}

/* =========================================================
   CCK DARK-MODE V4: gezielte Restflaechen-Fixes
   Betroffene Seiten: Info, Schichten, Organigramm,
   Kommunikation, Ticket-Scanner, Admin Dashboard/Benutzer/
   Kommunikationskanaele. Keine globalen Layout-Umbauten.
   ========================================================= */
html[data-theme="dark"]{
  --dm-panel: var(--surface-bg);
  --dm-panel-soft: color-mix(in srgb, var(--surface-bg) 88%, var(--page-bg));
  --dm-panel-head: color-mix(in srgb, var(--surface-bg) 78%, var(--border));
}

html[data-theme="dark"] .bg-light-subtle,
html[data-theme="dark"] .bg-body-tertiary,
html[data-theme="dark"] details.bg-light-subtle,
html[data-theme="dark"] div.bg-light-subtle,
html[data-theme="dark"] .border.bg-light-subtle,
html[data-theme="dark"] .admin-signup-list,
html[data-theme="dark"] .channel-admin-box,
html[data-theme="dark"] .viewer-chip,
html[data-theme="dark"] .shift-day-empty,
html[data-theme="dark"] .suggestion-pill,
html[data-theme="dark"] .shift-print-overview,
html[data-theme="dark"] .shift-print-overview-header,
html[data-theme="dark"] .shift-print-overview-day,
html[data-theme="dark"] .mobile-shift-tabs,
html[data-theme="dark"] .orga-card,
html[data-theme="dark"] .orga-board-wrap,
html[data-theme="dark"] .orga-board-viewport,
html[data-theme="dark"] .orga-node,
html[data-theme="dark"] .orga-node-head,
html[data-theme="dark"] .orga-minimap,
html[data-theme="dark"] .orga-minimap-header,
html[data-theme="dark"] .orga-minimap-canvas,
html[data-theme="dark"] .orga-mobile-card-inner,
html[data-theme="dark"] .orga-mobile-hint,
html[data-theme="dark"] .orga-mobile-photo,
html[data-theme="dark"] .user-admin-stat,
html[data-theme="dark"] .user-card,
html[data-theme="dark"] .user-card-header,
html[data-theme="dark"] .user-card-body,
html[data-theme="dark"] .permission-group,
html[data-theme="dark"] .user-empty,
html[data-theme="dark"] .role-card,
html[data-theme="dark"] .role-card-header,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .communication-channel-card{
  background:var(--dm-panel) !important;
  background-color:var(--dm-panel) !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
}

html[data-theme="dark"] .user-card-header,
html[data-theme="dark"] .shift-print-overview-header,
html[data-theme="dark"] .orga-node-head,
html[data-theme="dark"] .table-light,
html[data-theme="dark"] .table-light > *,
html[data-theme="dark"] .shift-print-table thead th,
html[data-theme="dark"] .mobile-shift-tab-btn.active{
  background:var(--dm-panel-head) !important;
  background-color:var(--dm-panel-head) !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
}

html[data-theme="dark"] .mobile-shift-tab-btn,
html[data-theme="dark"] .orga-pill,
html[data-theme="dark"] .orga-person-btn,
html[data-theme="dark"] .btn:not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-primary):not(.btn-info),
html[data-theme="dark"] a.btn:not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-primary):not(.btn-info){
  background:var(--dm-panel-soft) !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
}
html[data-theme="dark"] .btn-outline-primary,
html[data-theme="dark"] .btn-link,
html[data-theme="dark"] a:not(.btn){ color:var(--link) !important; }

html[data-theme="dark"] .orga-board,
html[data-theme="dark"] .orga-mobile-children{
  border-color:var(--border) !important;
  background-color:var(--dm-panel) !important;
}
html[data-theme="dark"] .orga-board{
  background-image:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px) !important;
}
html[data-theme="dark"] .orga-svg .auto-path{stroke:var(--text) !important;}
html[data-theme="dark"] .orga-mobile-title,
html[data-theme="dark"] .orga-node-role,
html[data-theme="dark"] .orga-node-resp,
html[data-theme="dark"] .orga-mobile-role,
html[data-theme="dark"] .orga-mobile-resp,
html[data-theme="dark"] .orga-mobile-empty,
html[data-theme="dark"] .shift-print-station-title,
html[data-theme="dark"] .shift-print-empty,
html[data-theme="dark"] .suggestion-empty{
  color:var(--muted) !important;
}
html[data-theme="dark"] .orga-mobile-title,
html[data-theme="dark"] .shift-print-station-title{color:var(--text) !important;}

html[data-theme="dark"] .user-visible-box,
html[data-theme="dark"] .rights-check-visual,
html[data-theme="dark"] .form-check-input:not(:checked){
  background:var(--dm-panel-soft) !important;
  color:var(--text) !important;
  border-color:#9ca3af !important;
}
html[data-theme="dark"] .user-visible-box.is-checked,
html[data-theme="dark"] .rights-check-visual.is-checked,
html[data-theme="dark"] .form-check-input:checked{
  background:var(--success) !important;
  border-color:var(--success) !important;
  color:#fff !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .input-group-text{
  background:color-mix(in srgb, var(--page-bg) 70%, var(--surface-bg)) !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{color:var(--muted) !important;opacity:1;}

html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-body,
html[data-theme="dark"] .text-black,
html[data-theme="dark"] .link-dark,
html[data-theme="dark"] label,
html[data-theme="dark"] .form-label,
html[data-theme="dark"] .form-check-label,
html[data-theme="dark"] .card-title,
html[data-theme="dark"] .card-text,
html[data-theme="dark"] summary,
html[data-theme="dark"] td,
html[data-theme="dark"] th{
  color:var(--text) !important;
}
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .form-text,
html[data-theme="dark"] small,
html[data-theme="dark"] .small{color:var(--muted) !important;}

html[data-theme="dark"] .text-bg-light,
html[data-theme="dark"] .badge.bg-light,
html[data-theme="dark"] .badge.text-bg-light{
  background:var(--dm-panel-head) !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
}

@media (prefers-color-scheme: dark){
  html[data-theme="auto"]{
    --dm-panel: var(--surface-bg);
    --dm-panel-soft: color-mix(in srgb, var(--surface-bg) 88%, var(--page-bg));
    --dm-panel-head: color-mix(in srgb, var(--surface-bg) 78%, var(--border));
  }
  html[data-theme="auto"] .bg-light-subtle,
  html[data-theme="auto"] .bg-body-tertiary,
  html[data-theme="auto"] details.bg-light-subtle,
  html[data-theme="auto"] div.bg-light-subtle,
  html[data-theme="auto"] .border.bg-light-subtle,
  html[data-theme="auto"] .admin-signup-list,
  html[data-theme="auto"] .channel-admin-box,
  html[data-theme="auto"] .viewer-chip,
  html[data-theme="auto"] .shift-day-empty,
  html[data-theme="auto"] .suggestion-pill,
  html[data-theme="auto"] .shift-print-overview,
  html[data-theme="auto"] .shift-print-overview-header,
  html[data-theme="auto"] .shift-print-overview-day,
  html[data-theme="auto"] .mobile-shift-tabs,
  html[data-theme="auto"] .orga-card,
  html[data-theme="auto"] .orga-board-wrap,
  html[data-theme="auto"] .orga-board-viewport,
  html[data-theme="auto"] .orga-node,
  html[data-theme="auto"] .orga-node-head,
  html[data-theme="auto"] .orga-minimap,
  html[data-theme="auto"] .orga-minimap-header,
  html[data-theme="auto"] .orga-minimap-canvas,
  html[data-theme="auto"] .orga-mobile-card-inner,
  html[data-theme="auto"] .orga-mobile-hint,
  html[data-theme="auto"] .orga-mobile-photo,
  html[data-theme="auto"] .user-admin-stat,
  html[data-theme="auto"] .user-card,
  html[data-theme="auto"] .user-card-header,
  html[data-theme="auto"] .user-card-body,
  html[data-theme="auto"] .permission-group,
  html[data-theme="auto"] .user-empty,
  html[data-theme="auto"] .role-card,
  html[data-theme="auto"] .role-card-header,
  html[data-theme="auto"] .list-group-item,
  html[data-theme="auto"] .communication-channel-card{
    background:var(--dm-panel) !important;
    background-color:var(--dm-panel) !important;
    color:var(--text) !important;
    border-color:var(--border) !important;
  }
  html[data-theme="auto"] .user-card-header,
  html[data-theme="auto"] .shift-print-overview-header,
  html[data-theme="auto"] .orga-node-head,
  html[data-theme="auto"] .table-light,
  html[data-theme="auto"] .table-light > *,
  html[data-theme="auto"] .shift-print-table thead th,
  html[data-theme="auto"] .mobile-shift-tab-btn.active{
    background:var(--dm-panel-head) !important;
    background-color:var(--dm-panel-head) !important;
    color:var(--text) !important;
    border-color:var(--border) !important;
  }
  html[data-theme="auto"] .mobile-shift-tab-btn,
  html[data-theme="auto"] .orga-pill,
  html[data-theme="auto"] .orga-person-btn,
  html[data-theme="auto"] .btn:not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-primary):not(.btn-info),
  html[data-theme="auto"] a.btn:not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-primary):not(.btn-info){
    background:var(--dm-panel-soft) !important;color:var(--text) !important;border-color:var(--border) !important;
  }
  html[data-theme="auto"] .btn-outline-primary,
  html[data-theme="auto"] .btn-link,
  html[data-theme="auto"] a:not(.btn){ color:var(--link) !important; }
  html[data-theme="auto"] .orga-board{background-color:var(--dm-panel) !important;background-image:linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px) !important;}
  html[data-theme="auto"] .orga-svg .auto-path{stroke:var(--text) !important;}
  html[data-theme="auto"] .orga-mobile-title,
  html[data-theme="auto"] .shift-print-station-title{color:var(--text) !important;}
  html[data-theme="auto"] .orga-node-role,
  html[data-theme="auto"] .orga-node-resp,
  html[data-theme="auto"] .orga-mobile-role,
  html[data-theme="auto"] .orga-mobile-resp,
  html[data-theme="auto"] .orga-mobile-empty,
  html[data-theme="auto"] .shift-print-empty,
  html[data-theme="auto"] .suggestion-empty{color:var(--muted) !important;}
  html[data-theme="auto"] .user-visible-box,
  html[data-theme="auto"] .rights-check-visual,
  html[data-theme="auto"] .form-check-input:not(:checked){background:var(--dm-panel-soft) !important;color:var(--text) !important;border-color:#9ca3af !important;}
  html[data-theme="auto"] .user-visible-box.is-checked,
  html[data-theme="auto"] .rights-check-visual.is-checked,
  html[data-theme="auto"] .form-check-input:checked{background:var(--success) !important;border-color:var(--success) !important;color:#fff !important;}
  html[data-theme="auto"] input,
  html[data-theme="auto"] select,
  html[data-theme="auto"] textarea,
  html[data-theme="auto"] .form-control,
  html[data-theme="auto"] .form-select,
  html[data-theme="auto"] .input-group-text{background:color-mix(in srgb, var(--page-bg) 70%, var(--surface-bg)) !important;color:var(--text) !important;border-color:var(--border) !important;}
  html[data-theme="auto"] input::placeholder,
  html[data-theme="auto"] textarea::placeholder{color:var(--muted) !important;opacity:1;}
  html[data-theme="auto"] .text-bg-light,
  html[data-theme="auto"] .badge.bg-light,
  html[data-theme="auto"] .badge.text-bg-light{background:var(--dm-panel-head) !important;color:var(--text) !important;border-color:var(--border) !important;}
}

/* =========================================================
   CCK DARKMODE FINAL READABILITY PATCH
   Ziel: Keine hellen Flaechen mit heller Schrift mehr.
   Ausnahme: Veranstaltungsplanung-Notizfeld bleibt bewusst hell.
   ========================================================= */
html[data-theme="dark"]{
  --cck-dark-bg:#0b1220;
  --cck-dark-panel:#111827;
  --cck-dark-panel-2:#162033;
  --cck-dark-panel-3:#1e293b;
  --cck-dark-border:#334155;
  --cck-dark-text:#f8fafc;
  --cck-dark-muted:#cbd5e1;
  --cck-dark-link:#93c5fd;
  --bs-body-bg:var(--page-bg, var(--cck-dark-bg));
  --bs-body-color:var(--text, var(--cck-dark-text));
  --bs-border-color:var(--border, var(--cck-dark-border));
  --bs-secondary-color:var(--muted, var(--cck-dark-muted));
  color-scheme:dark;
}
html[data-theme="dark"] body,
html[data-theme="dark"] .container,
html[data-theme="dark"] main{color:var(--text, var(--cck-dark-text));}

/* Helle Bootstrap-/Custom-Flaechen im Darkmode abdunkeln */
html[data-theme="dark"] .card,
html[data-theme="dark"] .card-body,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .offcanvas,
html[data-theme="dark"] .accordion-item,
html[data-theme="dark"] details,
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .bg-light-subtle,
html[data-theme="dark"] .bg-body,
html[data-theme="dark"] .bg-body-tertiary,
html[data-theme="dark"] .bg-body-secondary,
html[data-theme="dark"] .border.bg-white,
html[data-theme="dark"] .border.bg-light,
html[data-theme="dark"] .border.bg-light-subtle,
html[data-theme="dark"] .rounded.bg-white,
html[data-theme="dark"] .rounded.bg-light,
html[data-theme="dark"] .rounded-3.bg-white,
html[data-theme="dark"] .rounded-3.bg-light,
html[data-theme="dark"] .rounded-4.bg-white,
html[data-theme="dark"] .rounded-4.bg-light,
html[data-theme="dark"] .rounded-4.bg-light-subtle,
html[data-theme="dark"] .ticketshop-nav-settings,
html[data-theme="dark"] .ticketshop-nav-settings .ticketshop-option,
html[data-theme="dark"] .admin-signup-list,
html[data-theme="dark"] .channel-admin-box,
html[data-theme="dark"] .communication-channel-card,
html[data-theme="dark"] .viewer-chip,
html[data-theme="dark"] .user-admin-stat,
html[data-theme="dark"] .user-card,
html[data-theme="dark"] .user-card-body,
html[data-theme="dark"] .permission-group,
html[data-theme="dark"] .user-empty,
html[data-theme="dark"] .role-card,
html[data-theme="dark"] .role-card-body,
html[data-theme="dark"] .shift-day-empty,
html[data-theme="dark"] .suggestion-pill,
html[data-theme="dark"] .orga-card,
html[data-theme="dark"] .orga-board-wrap,
html[data-theme="dark"] .orga-board-viewport,
html[data-theme="dark"] .orga-node,
html[data-theme="dark"] .orga-mobile-card-inner,
html[data-theme="dark"] .pool,
html[data-theme="dark"] .pool-item,
html[data-theme="dark"] .drop-hint{
  background:var(--surface-bg, var(--cck-dark-panel)) !important;
  background-color:var(--surface-bg, var(--cck-dark-panel)) !important;
  color:var(--text, var(--cck-dark-text)) !important;
  border-color:var(--border, var(--cck-dark-border)) !important;
}

html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .table-light,
html[data-theme="dark"] .table-light > *,
html[data-theme="dark"] .table thead th,
html[data-theme="dark"] .user-card-header,
html[data-theme="dark"] .role-card-header,
html[data-theme="dark"] .accordion-button,
html[data-theme="dark"] .accordion-header,
html[data-theme="dark"] .orga-node-head,
html[data-theme="dark"] .shift-print-overview-header{
  background:color-mix(in srgb, var(--surface-bg, var(--cck-dark-panel)) 78%, var(--border, var(--cck-dark-border))) !important;
  background-color:color-mix(in srgb, var(--surface-bg, var(--cck-dark-panel)) 78%, var(--border, var(--cck-dark-border))) !important;
  color:var(--text, var(--cck-dark-text)) !important;
  border-color:var(--border, var(--cck-dark-border)) !important;
}

/* Text-Kontrast */
html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-body,
html[data-theme="dark"] .text-black,
html[data-theme="dark"] .link-dark,
html[data-theme="dark"] .dropdown-item,
html[data-theme="dark"] label,
html[data-theme="dark"] .form-label,
html[data-theme="dark"] .form-check-label,
html[data-theme="dark"] .col-form-label,
html[data-theme="dark"] .card-title,
html[data-theme="dark"] .card-text,
html[data-theme="dark"] .role-page-name,
html[data-theme="dark"] .permission-group-title,
html[data-theme="dark"] .user-card h1,
html[data-theme="dark"] .user-card h2,
html[data-theme="dark"] .user-card h3,
html[data-theme="dark"] .user-card h4,
html[data-theme="dark"] .user-card h5,
html[data-theme="dark"] .user-card h6,
html[data-theme="dark"] td,
html[data-theme="dark"] th,
html[data-theme="dark"] summary{
  color:var(--text, var(--cck-dark-text)) !important;
}
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-secondary,
html[data-theme="dark"] .form-text,
html[data-theme="dark"] .small,
html[data-theme="dark"] small,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .role-page-meta{
  color:var(--muted, var(--cck-dark-muted)) !important;
}
html[data-theme="dark"] a:not(.btn){color:var(--link, var(--cck-dark-link)) !important;}

/* Forms */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .form-control-plaintext,
html[data-theme="dark"] .input-group-text,
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
  background:color-mix(in srgb, var(--page-bg, var(--cck-dark-bg)) 72%, var(--surface-bg, var(--cck-dark-panel))) !important;
  background-color:color-mix(in srgb, var(--page-bg, var(--cck-dark-bg)) 72%, var(--surface-bg, var(--cck-dark-panel))) !important;
  color:var(--text, var(--cck-dark-text)) !important;
  border-color:var(--border, var(--cck-dark-border)) !important;
}
html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{color:var(--muted, var(--cck-dark-muted)) !important;opacity:1 !important;}
html[data-theme="dark"] option{background:var(--surface-bg, var(--cck-dark-panel)) !important;color:var(--text, var(--cck-dark-text)) !important;}

/* Buttons und Pills */
html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .btn-outline-light,
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn-outline-secondary,
html[data-theme="dark"] .btn-outline-dark,
html[data-theme="dark"] .btn-dark:not(.btn-primary){
  background:color-mix(in srgb, var(--surface-bg, var(--cck-dark-panel)) 78%, var(--border, var(--cck-dark-border))) !important;
  border-color:var(--border, var(--cck-dark-border)) !important;
  color:var(--text, var(--cck-dark-text)) !important;
}
html[data-theme="dark"] .btn-outline-primary{color:var(--link, var(--cck-dark-link)) !important;border-color:var(--link, var(--cck-dark-link)) !important;}
html[data-theme="dark"] .badge.bg-light,
html[data-theme="dark"] .badge.text-bg-light,
html[data-theme="dark"] .text-bg-light{
  background:color-mix(in srgb, var(--surface-bg, var(--cck-dark-panel)) 74%, var(--border, var(--cck-dark-border))) !important;
  color:var(--text, var(--cck-dark-text)) !important;
  border-color:var(--border, var(--cck-dark-border)) !important;
}

/* Tabellen */
html[data-theme="dark"] .table,
html[data-theme="dark"] .table td,
html[data-theme="dark"] .table th,
html[data-theme="dark"] .excel-table td,
html[data-theme="dark"] .excel-table th{
  background-color:transparent !important;
  color:var(--text, var(--cck-dark-text)) !important;
  border-color:var(--border, var(--cck-dark-border)) !important;
}
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > *,
html[data-theme="dark"] .table-hover > tbody > tr:hover > *{
  background:color-mix(in srgb, var(--surface-bg, var(--cck-dark-panel)) 82%, var(--border, var(--cck-dark-border))) !important;
  color:var(--text, var(--cck-dark-text)) !important;
}

/* Inline-helle Hintergruende abdunkeln, aber NICHT im Veranstaltungs-Notizfeld */
html[data-theme="dark"] [style*="background:#fff"]:not(.event-note-card):not(.event-note-card *),
html[data-theme="dark"] [style*="background: #fff"]:not(.event-note-card):not(.event-note-card *),
html[data-theme="dark"] [style*="background:#ffffff"]:not(.event-note-card):not(.event-note-card *),
html[data-theme="dark"] [style*="background: #ffffff"]:not(.event-note-card):not(.event-note-card *),
html[data-theme="dark"] [style*="background:white"]:not(.event-note-card):not(.event-note-card *),
html[data-theme="dark"] [style*="background: white"]:not(.event-note-card):not(.event-note-card *),
html[data-theme="dark"] [style*="background-color:#fff"]:not(.event-note-card):not(.event-note-card *),
html[data-theme="dark"] [style*="background-color: #fff"]:not(.event-note-card):not(.event-note-card *),
html[data-theme="dark"] [style*="background-color:#ffffff"]:not(.event-note-card):not(.event-note-card *),
html[data-theme="dark"] [style*="background-color: #ffffff"]:not(.event-note-card):not(.event-note-card *),
html[data-theme="dark"] [style*="background-color:white"]:not(.event-note-card):not(.event-note-card *),
html[data-theme="dark"] [style*="background-color: white"]:not(.event-note-card):not(.event-note-card *){
  background:var(--surface-bg, var(--cck-dark-panel)) !important;
  background-color:var(--surface-bg, var(--cck-dark-panel)) !important;
  color:var(--text, var(--cck-dark-text)) !important;
  border-color:var(--border, var(--cck-dark-border)) !important;
}

/* Veranstaltungsplanung: Notizfeld vom Darkmode ausnehmen = hell lassen */
html[data-theme="dark"] .event-note-card,
html[data-theme="dark"] .event-note-card .event-note-head,
html[data-theme="dark"] .event-note-card .event-note-actions{
  background:#ffffff !important;
  background-color:#ffffff !important;
  color:#111827 !important;
  border-color:#dbe1ea !important;
}
html[data-theme="dark"] .event-note-card .event-note-toolbar{
  background:#f8fafc !important;
  background-color:#f8fafc !important;
  color:#111827 !important;
  border-color:#e9eef5 !important;
}
html[data-theme="dark"] .event-note-card .event-note-toolbar button,
html[data-theme="dark"] .event-note-card .event-note-toolbar select,
html[data-theme="dark"] .event-note-card .event-note-toolbar input[type="color"],
html[data-theme="dark"] .event-note-card .event-note-editor{
  background:#ffffff !important;
  background-color:#ffffff !important;
  color:#111827 !important;
  border-color:#cbd5e1 !important;
}
html[data-theme="dark"] .event-note-card .note-status,
html[data-theme="dark"] .event-note-card .event-note-editor:empty:before{color:#64748b !important;}
html[data-theme="dark"] .event-note-card .btn-primary{background:#0d6efd !important;border-color:#0d6efd !important;color:#fff !important;}
html[data-theme="dark"] .event-note-card .btn-outline-secondary{background:#fff !important;border-color:#6c757d !important;color:#374151 !important;}

/* gleiche Regeln fuer Auto-Modus bei dunklem System */
@media (prefers-color-scheme: dark){
  html[data-theme="auto"]{
    --cck-dark-bg:#0b1220;
    --cck-dark-panel:#111827;
    --cck-dark-panel-2:#162033;
    --cck-dark-panel-3:#1e293b;
    --cck-dark-border:#334155;
    --cck-dark-text:#f8fafc;
    --cck-dark-muted:#cbd5e1;
    --cck-dark-link:#93c5fd;
    --bs-body-bg:var(--page-bg, var(--cck-dark-bg));
    --bs-body-color:var(--text, var(--cck-dark-text));
    --bs-border-color:var(--border, var(--cck-dark-border));
    --bs-secondary-color:var(--muted, var(--cck-dark-muted));
    color-scheme:dark;
  }
  html[data-theme="auto"] body,
  html[data-theme="auto"] .container,
  html[data-theme="auto"] main{color:var(--text, var(--cck-dark-text));}
  html[data-theme="auto"] .card,
  html[data-theme="auto"] .card-body,
  html[data-theme="auto"] .list-group-item,
  html[data-theme="auto"] .dropdown-menu,
  html[data-theme="auto"] .modal-content,
  html[data-theme="auto"] .offcanvas,
  html[data-theme="auto"] .accordion-item,
  html[data-theme="auto"] details,
  html[data-theme="auto"] .bg-white,
  html[data-theme="auto"] .bg-light,
  html[data-theme="auto"] .bg-light-subtle,
  html[data-theme="auto"] .bg-body,
  html[data-theme="auto"] .bg-body-tertiary,
  html[data-theme="auto"] .bg-body-secondary,
  html[data-theme="auto"] .border.bg-white,
  html[data-theme="auto"] .border.bg-light,
  html[data-theme="auto"] .border.bg-light-subtle,
  html[data-theme="auto"] .rounded.bg-white,
  html[data-theme="auto"] .rounded.bg-light,
  html[data-theme="auto"] .rounded-3.bg-white,
  html[data-theme="auto"] .rounded-3.bg-light,
  html[data-theme="auto"] .rounded-4.bg-white,
  html[data-theme="auto"] .rounded-4.bg-light,
  html[data-theme="auto"] .rounded-4.bg-light-subtle,
  html[data-theme="auto"] .ticketshop-nav-settings,
  html[data-theme="auto"] .ticketshop-nav-settings .ticketshop-option,
  html[data-theme="auto"] .admin-signup-list,
  html[data-theme="auto"] .channel-admin-box,
  html[data-theme="auto"] .communication-channel-card,
  html[data-theme="auto"] .viewer-chip,
  html[data-theme="auto"] .user-admin-stat,
  html[data-theme="auto"] .user-card,
  html[data-theme="auto"] .user-card-body,
  html[data-theme="auto"] .permission-group,
  html[data-theme="auto"] .user-empty,
  html[data-theme="auto"] .role-card,
  html[data-theme="auto"] .role-card-body,
  html[data-theme="auto"] .shift-day-empty,
  html[data-theme="auto"] .suggestion-pill,
  html[data-theme="auto"] .orga-card,
  html[data-theme="auto"] .orga-board-wrap,
  html[data-theme="auto"] .orga-board-viewport,
  html[data-theme="auto"] .orga-node,
  html[data-theme="auto"] .orga-mobile-card-inner,
  html[data-theme="auto"] .pool,
  html[data-theme="auto"] .pool-item,
  html[data-theme="auto"] .drop-hint{
    background:var(--surface-bg, var(--cck-dark-panel)) !important;
    background-color:var(--surface-bg, var(--cck-dark-panel)) !important;
    color:var(--text, var(--cck-dark-text)) !important;
    border-color:var(--border, var(--cck-dark-border)) !important;
  }
  html[data-theme="auto"] .card-header,
  html[data-theme="auto"] .card-footer,
  html[data-theme="auto"] .table-light,
  html[data-theme="auto"] .table-light > *,
  html[data-theme="auto"] .table thead th,
  html[data-theme="auto"] .user-card-header,
  html[data-theme="auto"] .role-card-header,
  html[data-theme="auto"] .accordion-button,
  html[data-theme="auto"] .accordion-header,
  html[data-theme="auto"] .orga-node-head,
  html[data-theme="auto"] .shift-print-overview-header{
    background:color-mix(in srgb, var(--surface-bg, var(--cck-dark-panel)) 78%, var(--border, var(--cck-dark-border))) !important;
    background-color:color-mix(in srgb, var(--surface-bg, var(--cck-dark-panel)) 78%, var(--border, var(--cck-dark-border))) !important;
    color:var(--text, var(--cck-dark-text)) !important;
    border-color:var(--border, var(--cck-dark-border)) !important;
  }
  html[data-theme="auto"] .text-dark,
  html[data-theme="auto"] .text-body,
  html[data-theme="auto"] .text-black,
  html[data-theme="auto"] .link-dark,
  html[data-theme="auto"] .dropdown-item,
  html[data-theme="auto"] label,
  html[data-theme="auto"] .form-label,
  html[data-theme="auto"] .form-check-label,
  html[data-theme="auto"] .col-form-label,
  html[data-theme="auto"] .card-title,
  html[data-theme="auto"] .card-text,
  html[data-theme="auto"] .role-page-name,
  html[data-theme="auto"] .permission-group-title,
  html[data-theme="auto"] td,
  html[data-theme="auto"] th,
  html[data-theme="auto"] summary{color:var(--text, var(--cck-dark-text)) !important;}
  html[data-theme="auto"] .text-muted,
  html[data-theme="auto"] .text-secondary,
  html[data-theme="auto"] .form-text,
  html[data-theme="auto"] .small,
  html[data-theme="auto"] small,
  html[data-theme="auto"] .muted,
  html[data-theme="auto"] .role-page-meta{color:var(--muted, var(--cck-dark-muted)) !important;}
  html[data-theme="auto"] a:not(.btn){color:var(--link, var(--cck-dark-link)) !important;}
  html[data-theme="auto"] .form-control,
  html[data-theme="auto"] .form-select,
  html[data-theme="auto"] .form-control-plaintext,
  html[data-theme="auto"] .input-group-text,
  html[data-theme="auto"] input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
  html[data-theme="auto"] select,
  html[data-theme="auto"] textarea{
    background:color-mix(in srgb, var(--page-bg, var(--cck-dark-bg)) 72%, var(--surface-bg, var(--cck-dark-panel))) !important;
    background-color:color-mix(in srgb, var(--page-bg, var(--cck-dark-bg)) 72%, var(--surface-bg, var(--cck-dark-panel))) !important;
    color:var(--text, var(--cck-dark-text)) !important;
    border-color:var(--border, var(--cck-dark-border)) !important;
  }
  html[data-theme="auto"] .form-control::placeholder,
  html[data-theme="auto"] input::placeholder,
  html[data-theme="auto"] textarea::placeholder{color:var(--muted, var(--cck-dark-muted)) !important;opacity:1 !important;}
  html[data-theme="auto"] option{background:var(--surface-bg, var(--cck-dark-panel)) !important;color:var(--text, var(--cck-dark-text)) !important;}
  html[data-theme="auto"] .btn-light,
  html[data-theme="auto"] .btn-outline-light,
  html[data-theme="auto"] .btn-secondary,
  html[data-theme="auto"] .btn-outline-secondary,
  html[data-theme="auto"] .btn-outline-dark,
  html[data-theme="auto"] .btn-dark:not(.btn-primary){
    background:color-mix(in srgb, var(--surface-bg, var(--cck-dark-panel)) 78%, var(--border, var(--cck-dark-border))) !important;
    border-color:var(--border, var(--cck-dark-border)) !important;
    color:var(--text, var(--cck-dark-text)) !important;
  }
  html[data-theme="auto"] .btn-outline-primary{color:var(--link, var(--cck-dark-link)) !important;border-color:var(--link, var(--cck-dark-link)) !important;}
  html[data-theme="auto"] .badge.bg-light,
  html[data-theme="auto"] .badge.text-bg-light,
  html[data-theme="auto"] .text-bg-light{
    background:color-mix(in srgb, var(--surface-bg, var(--cck-dark-panel)) 74%, var(--border, var(--cck-dark-border))) !important;
    color:var(--text, var(--cck-dark-text)) !important;
    border-color:var(--border, var(--cck-dark-border)) !important;
  }
  html[data-theme="auto"] .table,
  html[data-theme="auto"] .table td,
  html[data-theme="auto"] .table th,
  html[data-theme="auto"] .excel-table td,
  html[data-theme="auto"] .excel-table th{
    background-color:transparent !important;
    color:var(--text, var(--cck-dark-text)) !important;
    border-color:var(--border, var(--cck-dark-border)) !important;
  }
  html[data-theme="auto"] .table-striped > tbody > tr:nth-of-type(odd) > *,
  html[data-theme="auto"] .table-hover > tbody > tr:hover > *{
    background:color-mix(in srgb, var(--surface-bg, var(--cck-dark-panel)) 82%, var(--border, var(--cck-dark-border))) !important;
    color:var(--text, var(--cck-dark-text)) !important;
  }
  html[data-theme="auto"] .event-note-card,
  html[data-theme="auto"] .event-note-card .event-note-head,
  html[data-theme="auto"] .event-note-card .event-note-actions{
    background:#ffffff !important;background-color:#ffffff !important;color:#111827 !important;border-color:#dbe1ea !important;
  }
  html[data-theme="auto"] .event-note-card .event-note-toolbar{background:#f8fafc !important;background-color:#f8fafc !important;color:#111827 !important;border-color:#e9eef5 !important;}
  html[data-theme="auto"] .event-note-card .event-note-toolbar button,
  html[data-theme="auto"] .event-note-card .event-note-toolbar select,
  html[data-theme="auto"] .event-note-card .event-note-toolbar input[type="color"],
  html[data-theme="auto"] .event-note-card .event-note-editor{background:#ffffff !important;background-color:#ffffff !important;color:#111827 !important;border-color:#cbd5e1 !important;}
  html[data-theme="auto"] .event-note-card .note-status,
  html[data-theme="auto"] .event-note-card .event-note-editor:empty:before{color:#64748b !important;}
  html[data-theme="auto"] .event-note-card .btn-primary{background:#0d6efd !important;border-color:#0d6efd !important;color:#fff !important;}
  html[data-theme="auto"] .event-note-card .btn-outline-secondary{background:#fff !important;border-color:#6c757d !important;color:#374151 !important;}
}

/* Touch-Bedienung: Doppeltipp-Zoom auf der WebApp vermeiden,
   normales Scrollen und Pinch-Zoom bleiben erhalten. */
html,
body,
button,
a,
input,
select,
textarea,
.btn,
.clickable {
  touch-action: manipulation;
}