/* =====================================================================
   DEMO auf der Startseite — im Aussehen der Anwendung (16.10.2026).
   Wer wegen der Demo testet, soll in der Anwendung wiedererkennen, was
   er hier gesehen hat. Deshalb kein eigenes Aussehen mehr: Der Teil
   unter „AUS DER ANWENDUNG“ sind die Regeln der Anwendung selbst,
   herausgezogen aus dem Stylesheet der Anwendung und auf .app-stil
   begrenzt, damit außerhalb nichts davon abfärbt. Wer dort etwas am
   Aussehen ändert, zieht es hier mit nach.
   Nur index.html lädt diese Datei.
   ===================================================================== */

/* ---------- Rahmen und Hülle (nur Demo) ---------- */
.fenster{border-radius:18px;overflow:hidden;border:1px solid var(--linie);box-shadow:0 14px 40px rgba(23,37,58,.14);background:#fff}
.fenster .app-stil h2,.fenster .app-stil h3{line-height:1.5;text-wrap:wrap}
.app-stil a{color:var(--primary)}
.fenster .app-stil .app-header{position:relative;z-index:2;box-shadow:none}
.fenster .app-stil .app-header-inner{gap:12px;flex-wrap:wrap}
.fenster .app-stil .app-leib{background:linear-gradient(135deg,#0f172a 0%,#1e3a5f 50%,#1e40af 100%);padding:16px}
.fenster .app-stil .app-leib > .card:last-child,.fenster .app-stil .app-leib > :last-child{margin-bottom:0}
.fenster .app-stil th{position:static}
.fenster .app-stil .tab[aria-selected="true"]{color:#fff;font-weight:600}
.fenster .app-stil .tab[aria-selected="true"]::after{transform:scaleX(1)}
.fenster .app-stil .tabs{scrollbar-width:none}
.fenster .app-stil .tabs::-webkit-scrollbar{display:none}
.fenster .app-stil .user-menu-toggle{cursor:default}
.fenster .app-stil .user-menu-toggle:hover{background:none}
@media (max-width:860px){
  .fenster .app-stil .app-header-inner{padding:9px 12px}
  .fenster .app-stil .tabs{order:3;width:100%;flex:none;justify-content:flex-start;border-top:1px solid rgba(255,255,255,.14);padding-top:3px}
}
@media (max-width:560px){.fenster .app-stil .app-leib{padding:10px}}
/* Kleine Knöpfe am Handy: mindestens 24 px hoch (WCAG 2.5.8) */
.fenster .app-stil .btn-sm{min-height:24px}
/* Gesperrt ist der Dienstfilter nur, weil die Demo einen einzigen Dienst kennt. */
.app-stil select:disabled{opacity:1;color:var(--gray-700);-webkit-text-fill-color:var(--gray-700)}
.app-stil .mn-btn:disabled{cursor:default}

/* Ansicht-Umschalter — gehört zur Seite, nicht zur Anwendung */
.ap-ansicht{padding:10px 14px;background:color-mix(in srgb,var(--kupfer) 11%,var(--papier));color:var(--tinte);font-size:.78rem;font-weight:600;border-bottom:1px solid color-mix(in srgb,var(--kupfer) 45%,transparent)}
.ap-ansicht-wahl{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.ap-ansicht-text{margin:8px auto 0;max-width:76ch;text-align:center;font-weight:400;font-size:.76rem;line-height:1.55;color:var(--tinte)}
.ap-ansicht button{font:600 .75rem/1 'IBM Plex Sans',sans-serif;padding:7px 11px;min-height:32px;border:1px solid var(--kupfer-text);border-radius:8px;background:var(--karte);color:var(--kupfer-text);cursor:pointer}
.ap-ansicht button[aria-pressed="true"]{background:var(--kupfer-text);color:var(--papier)}
@media (prefers-color-scheme:dark){.ap-ansicht{background:#F1E6DA;color:#17253A}.ap-ansicht-text{color:#17253A}.ap-ansicht button{background:#fff;color:#8F5226;border-color:#8F5226}.ap-ansicht button[aria-pressed="true"]{background:#8F5226;color:#fff}}

/* Erklärungen sind Beiwerk der Seite, nicht Text der Anwendung — deshalb
   tragen sie einen Aufkleber, damit niemand sie für Teil der Software hält. */
.ap-hinweis{font-size:.74rem;color:var(--gray-500);margin:14px 0 0;padding-top:9px;border-top:1px dashed var(--gray-200);line-height:1.5}
.ap-hinweis::before{content:"Erklärung";display:inline-block;margin-right:7px;padding:1px 6px;border-radius:6px;background:#F6E7DA;color:#8F5226;font-size:.65rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;vertical-align:1px}

/* Meldungen wie die Toasts der Anwendung (unten rechts) */
#apMeldungen{position:fixed;bottom:20px;right:20px;z-index:300;display:flex;flex-direction:column-reverse;gap:8px;pointer-events:none;max-width:calc(100% - 40px)}
.ap-meldung{padding:10px 16px;border-radius:12px;color:#fff;font:400 .85rem/1.4 'IBM Plex Sans',sans-serif;box-shadow:0 4px 6px rgba(0,0,0,.1);max-width:360px;background:#15803d;animation:toastIn .3s ease}
.ap-meldung.info{background:#b45309}
@keyframes toastIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
@media (prefers-reduced-motion:reduce){.ap-meldung{animation:none}}

/* Kacheln als Knöpfe (Verfügbarkeit, eigene Schicht anbieten) */
.app-stil button.shift-kachel-multi{width:100%;font:inherit;font-size:.75rem;cursor:pointer;color:inherit}
.app-stil button.shift-kachel-multi .skm-header,.app-stil button.shift-kachel-multi .skm-names,.app-stil button.shift-kachel-multi .skm-name{display:flex}
.app-stil button.shift-kachel-multi .skm-names{flex-direction:column}
.app-stil abbr[title]{text-decoration:none}

/* ---------- AUS DER ANWENDUNG ---------- */
.app-stil{color-scheme: light; --primary: #2563eb; --primary-dark: #1d4ed8; --primary-light: #dbeafe; --danger: #b91c1c; --danger-light: #fee2e2; --success: #15803d; --success-light: #dcfce7; --warning: #b45309; --warning-light: #fef3c7; --purple: #7c3aed; --purple-light: #ede9fe; --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db; --gray-400: #646c7a; --gray-500: #5f6775; --gray-600: #4b5563; --gray-700: #374151; --gray-800: #1f2937; --gray-900: #111827; --radius: 8px; --shadow: 0 1px 3px rgba(0,0,0,0.1); --shadow-md: 0 4px 6px rgba(0,0,0,0.1);}
.app-stil *{margin: 0px; padding: 0px; box-sizing: border-box;}
.app-stil .card-header h2,.app-stil .card-header h3,.app-stil .month-nav .mn-label{font-family: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: -0.01em;}
.app-stil{font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: transparent; color: var(--gray-800); line-height: 1.5; font-size: 14px;}
.app-stil .app-header{background: linear-gradient(135deg, rgb(15, 23, 42) 0%, rgb(30, 58, 95) 50%, rgb(30, 64, 175) 100%); color: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 16px; position: sticky; top: 0px; z-index: 100;}
.app-stil .app-header-safe{padding-top: env(safe-area-inset-top);}
.app-stil .app-header-inner{display: flex; justify-content: space-between; align-items: center; padding-top: 10px; padding-bottom: 10px; padding-left: calc(20px + env(safe-area-inset-left)); padding-right: calc(20px + env(safe-area-inset-right));}
.app-stil .app-header .ap-h1{font-family: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; flex-shrink: 0;}
.app-stil .app-header .ap-h1 .hdr-icon{width: 34px; height: 34px; border-radius: 50%;}
.app-stil .app-header .ap-h1 .hdr-titel{display: flex; flex-direction: column; line-height: 1.15; min-width: 0px;}
.app-stil .app-header .ap-h1 .hdr-inst{font-size: 0.65rem; font-weight: 600; opacity: 0.8; letter-spacing: 0.03em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 42vw;}
.app-stil .app-header .user-info{display: flex; align-items: center; gap: 10px; font-size: 0.85rem; white-space: nowrap; flex-shrink: 0;}
.app-stil .user-menu{position: relative;}
.app-stil .user-menu-toggle{display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 4px 10px; border-radius: var(--radius); transition: background 0.15s;}
.app-stil .user-menu-toggle:hover{background: rgba(255, 255, 255, 0.1);}
.app-stil .user-menu-toggle .um-arrow{font-size: 0.65rem; opacity: 0.7; transition: transform 0.2s;}
.app-stil .btn{display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; border: none; border-radius: var(--radius); font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: 0.2s; text-decoration: none; box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 2px;}
.app-stil .btn:hover{transform: translateY(-1px); box-shadow: rgba(0, 0, 0, 0.12) 0px 3px 8px;}
.app-stil .btn:active{transform: translateY(0px); box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 2px;}
.app-stil .btn-primary{background: linear-gradient(135deg, rgb(59, 130, 246) 0%, rgb(37, 99, 235) 6%, rgb(29, 78, 216) 100%); color: rgb(255, 255, 255);}
.app-stil .btn-primary:hover{background: linear-gradient(135deg, rgb(37, 99, 235) 0%, rgb(29, 78, 216) 6%, rgb(30, 64, 175) 100%);}
.app-stil .btn-success{background: linear-gradient(135deg, rgb(34, 197, 94) 0%, rgb(21, 128, 61) 6%, rgb(22, 101, 52) 100%); color: rgb(255, 255, 255);}
.app-stil .btn-secondary{background: var(--gray-100); color: var(--gray-700); border: 1px solid var(--gray-200); box-shadow: none;}
.app-stil .btn-secondary:hover{background: var(--gray-200); box-shadow: none;}
.app-stil .btn-outline{background: rgb(255, 255, 255); color: var(--primary); border: 1px solid var(--primary); box-shadow: none;}
.app-stil .btn-outline:hover{background: var(--primary-light); box-shadow: none;}
.app-stil .btn-sm{padding: 3px 8px; font-size: 0.75rem;}
.app-stil .btn:disabled{opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none;}
.app-stil .card{background: rgb(255, 255, 255); border-radius: 14px; box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 16px, rgba(0, 0, 0, 0.04) 0px 1px 4px; padding: 20px; margin-bottom: 20px; border: none; transition: box-shadow 0.2s, transform 0.2s;}
.app-stil .card:hover{box-shadow: rgba(0, 0, 0, 0.12) 0px 8px 28px; transform: translateY(-2px);}
.app-stil .card-header{display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--gray-100);}
.app-stil .card-header h2{font-size: 1rem; font-weight: 600; color: var(--gray-800);}
.app-stil .card-header h3{font-size: 0.9rem; font-weight: 600; color: var(--gray-700);}
.app-stil input[type="number"],.app-stil input[type="date"],.app-stil select{width: 100%; padding: 6px 10px; border: 1px solid var(--gray-300); border-radius: var(--radius); font-size: 0.85rem; box-sizing: border-box; height: 36px;}
.app-stil input[type="date"]{appearance: none; background-color: rgb(255, 255, 255);}
.app-stil input,.app-stil select,.app-stil button{font-family: inherit;}
.app-stil input[type="date"]::-webkit-datetime-edit{font-family: inherit;}
.app-stil input[type="date"]::-webkit-date-and-time-value{margin: 0px; line-height: 1.2; min-height: 0px;}
.app-stil input[type="date"]::-webkit-datetime-edit{padding: 0px; line-height: 1.2;}
.app-stil input[type="date"]::-webkit-calendar-picker-indicator{margin: 0px;}
.app-stil .dl-row{display: flex; align-items: center; gap: 8px; flex-wrap: wrap;}
.app-stil .dl-name{font-size: 0.8rem; font-weight: 600; flex: 1 1 130px; min-width: 130px;}
.app-stil input[type="date"].dl-date{flex: 0 0 auto; width: 126px; height: 26px; padding: 1px 6px; font-size: 0.75rem; box-sizing: border-box; color: var(--gray-800); font-weight: 600;}
.app-stil select{appearance: none; background-color: rgb(255, 255, 255); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 11px; padding-right: 28px;}
.app-stil input:focus,.app-stil select:focus{outline: none; border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary);}
.app-stil table{width: 100%; border-collapse: separate; border-spacing: 0px;}
.app-stil th,.app-stil td{padding: 8px 10px; text-align: left; font-size: 0.8rem;}
.app-stil th{background: linear-gradient(135deg, rgb(241, 245, 249), rgb(226, 232, 240)); font-weight: 600; color: var(--gray-700); position: sticky; top: 0px; letter-spacing: 0.01em;}
.app-stil th:first-child{border-radius: 8px 0px 0px 8px;}
.app-stil th:last-child{border-radius: 0px 8px 8px 0px;}
.app-stil tr:not(:last-child) td{border-bottom: 1px solid var(--gray-100);}
.app-stil .table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch;background:linear-gradient(to right,#fff 30%,rgba(255,255,255,0)) 0 0,linear-gradient(to right,rgba(255,255,255,0),#fff 70%) 100% 0,radial-gradient(farthest-side at 0 50%,rgba(15,23,42,.13),rgba(15,23,42,0)) 0 0,radial-gradient(farthest-side at 100% 50%,rgba(15,23,42,.13),rgba(15,23,42,0)) 100% 0;background-repeat:no-repeat;background-size:34px 100%,34px 100%,13px 100%,13px 100%;background-attachment:local,local,scroll,scroll}
.app-stil .tabs{display: flex; gap: 0px; overflow-x: auto; flex: 1 1 0%; justify-content: center;}
.app-stil .tab{padding: 8px 12px; cursor: pointer; font-size: 0.78rem; font-weight: 500; color: rgba(255, 255, 255, 0.75); border: none; background: none; white-space: nowrap; transition: color 0.2s; position: relative;}
.app-stil .tab::after{content: ""; position: absolute; left: 12px; right: 12px; bottom: 0px; height: 2px; background: rgb(255, 255, 255); transform: scaleX(0); transition: transform 0.25s;}
.app-stil .tab:hover{color: rgb(255, 255, 255);}
.app-stil .tab:hover::after{transform: scaleX(1);}
.app-stil .tab.active{color: rgb(255, 255, 255); font-weight: 600;}
.app-stil .tab.active::after{transform: scaleX(1);}
.app-stil .cal-wrapper{overflow-x: auto; border-radius: 12px;}
.app-stil .cal-table{border-collapse: separate; border-spacing: 3px; width: 100%; min-width: 900px; table-layout: fixed;}
.app-stil .cal-table th{background: linear-gradient(135deg, rgb(241, 245, 249), rgb(226, 232, 240)); padding: 8px 4px; text-align: center; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; color: var(--gray-500); border: none; border-radius: 8px;}
.app-stil .cal-table th.kw-col{width: 50px;}
.app-stil .cal-table td{border: none; border-radius: 8px; padding: 4px; vertical-align: top; position: relative; overflow: hidden; word-break: break-word; background: rgb(255, 255, 255); transition: background 0.15s;}
.app-stil .cal-table td.empty{background: var(--gray-50); opacity: 0.5;}
.app-stil .cal-table td.weekend{background: rgb(255, 251, 240);}
.app-stil .cal-table td.holiday{background: rgb(255, 251, 240);}
.app-stil .cal-day-num{font-size: 0.7rem; font-weight: 600; color: var(--gray-400); margin-bottom: 2px; text-align: right; height: 22px; line-height: 22px;}
.app-stil .cal-day-mit{display: flex; align-items: center; gap: 3px; margin-bottom: 2px;}
.app-stil .tz-knopf{display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 1px solid var(--gray-300); border-radius: 6px; background: rgb(255, 255, 255); color: var(--primary); cursor: pointer; flex: 0 0 auto; transition: 0.15s;}
.app-stil .tz-knopf:hover{background: var(--primary-light); border-color: var(--primary);}
.app-stil .cal-day-mit .cal-day-num{margin-bottom: 0px; flex: 1 0 auto;}
.app-stil .cal-day-header{display: flex; align-items: center; gap: 3px; margin-bottom: 2px; height: 22px;}
.app-stil .cal-holiday-name{flex: 1 1 auto; min-width: 0px; font-size: 0.65rem; color: var(--danger); font-weight: 600; line-height: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.app-stil .cal-day-header .cal-day-num{margin-left: auto;}
.app-stil .cal-day-header .cal-day-num{margin-bottom: 0px; flex-shrink: 0;}
.app-stil .shift-kachel-multi{display: block; padding: 4px 5px; border-radius: 8px; font-size: 0.75rem; margin: 2px 0px; border: 1px solid transparent; text-align: left; box-shadow: rgba(0, 0, 0, 0.08) 0px 1px 2px; overflow: hidden; box-sizing: border-box;}
.app-stil .shift-kachel-multi .skm-header{display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1px; flex-wrap: wrap; gap: 0px 4px;}
.app-stil .shift-kachel-multi .skm-label{font-size: 0.65rem; font-weight: 700; white-space: normal; min-width: 0px;}
.app-stil .shift-kachel-multi .skm-shift-name{font-weight: 700;}
.app-stil .shift-kachel-multi .skm-shift-time{font-weight: 400;}
@media (prefers-contrast: more){
  .app-stil .shift-kachel-multi.fremd,.app-stil .shift-kachel-multi.nur-lesend,.app-stil .shift-kachel-multi.clickable.unavailable[data-sperre="0"]{opacity: 1 !important;}
}
.app-stil .shift-kachel-multi .skm-names{display: flex; flex-direction: column; gap: 0px; min-width: 0px;}
.app-stil .shift-kachel-multi .skm-name{display: flex; align-items: center; gap: 2px; font-size: 0.7rem; font-weight: 600; line-height: 1.3; min-width: 0px;}
.app-stil .shift-kachel-multi .skm-name > span:first-child{flex: 1 1 0%; min-width: 0px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.app-stil .shift-kachel-multi .skm-name .skm-remove{flex-shrink: 0; cursor: pointer; opacity: 0.5; font-size: 0.85rem; line-height: 1; padding: 0px 3px;}
.app-stil .shift-kachel-multi .skm-name .skm-remove:hover{opacity: 1;}
.app-stil .shift-kachel-multi select{font-size: 0.7rem; width: 100%; border: none; background: transparent; cursor: pointer; padding: 0px; margin-top: 1px;}
.app-stil .shift-kachel-multi select:focus{outline: 1px solid var(--primary);}
.app-stil .chip{display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: 10px; font-size: 0.7rem; font-weight: 500;}
.app-stil .alert{padding: 10px 14px; border-radius: 12px; font-size: 0.8rem; margin-bottom: 10px;}
.app-stil .alert-success{background: var(--success-light); color: rgb(22, 101, 52);}
.app-stil .alert-info{background: var(--primary-light); color: rgb(30, 64, 175);}
.app-stil .stats-row{display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px;}
.app-stil .stat-card .kachel-i{position: absolute; top: 8px; right: 8px; margin: 0px;}
.app-stil .stat-card{position: relative; flex: 1 1 0%; min-width: 120px; background: rgb(255, 255, 255); border-radius: 14px; padding: 14px 12px; box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 16px, rgba(0, 0, 0, 0.04) 0px 1px 4px; text-align: center; border-right: none; border-bottom: none; border-left: none; border-image: initial; border-top: 3px solid var(--primary); transition: transform 0.2s, box-shadow 0.2s;}
.app-stil .stat-card:hover{transform: translateY(-2px); box-shadow: rgba(0, 0, 0, 0.12) 0px 8px 28px;}
.app-stil .stat-card .stat-value{font-size:1.3rem;font-weight:700;background:linear-gradient(135deg,#2563eb,#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.app-stil .stat-card .stat-label{font-size: 0.7rem; color: var(--gray-500); margin-top: 2px;}
.app-stil .toggle-pub{position: relative; display: inline-block; width: 44px; height: 24px; vertical-align: middle; flex-shrink: 0;}
.app-stil .toggle-pub input{opacity: 0; width: 0px; height: 0px; position: absolute;}
.app-stil .toggle-pub .slider{position: absolute; inset: 0px; background: var(--gray-300); border-radius: 24px; cursor: pointer; transition: 0.25s;}
.app-stil .toggle-pub .slider::before{content: ""; position: absolute; width: 18px; height: 18px; left: 3px; bottom: 3px; background: rgb(255, 255, 255); border-radius: 50%; transition: 0.25s; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 3px;}
.app-stil .toggle-pub input:checked + .slider{background: var(--success);}
.app-stil .toggle-pub input:checked + .slider::before{transform: translateX(20px);}
.app-stil .month-nav{display: flex; align-items: center; gap: 8px;}
.app-stil .month-nav .mn-btn{background: none; border: 1px solid var(--gray-300); border-radius: 10px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1rem; color: var(--gray-600); transition: 0.15s;}
.app-stil .month-nav .mn-btn:hover:not(:disabled){background: var(--primary-light); border-color: var(--primary); color: var(--primary);}
.app-stil .month-nav .mn-label{font-size: 0.95rem; font-weight: 600; min-width: 160px; text-align: center;}
@media (max-width: 768px){
  .app-stil .dl-name{flex: 1 1 auto; min-width: 0px;}
  .app-stil input[type="date"].dl-date{width: 112px; height: 24px; font-size: 0.7rem;}
  .app-stil .stats-row{flex-direction: column;}
  .app-stil .cal-table{min-width: 700px;}
  .app-stil .cal-table th{font-size: 0.7rem; padding: 4px 2px;}
  .app-stil .cal-table th.kw-col{width: 32px; font-size: 0.65rem;}
  .app-stil .cal-table td{padding: 2px; height: auto;}
  .app-stil .cal-day-num{font-size: 0.65rem;}
  .app-stil .shift-kachel-multi{font-size: 0.65rem; padding: 2px 3px; margin: 1px 0px;}
  .app-stil .shift-kachel-multi .skm-label{display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; font-size: 0.65rem; white-space: normal;}
  .app-stil .shift-kachel-multi .skm-shift-name{overflow-wrap: anywhere;}
  .app-stil .shift-kachel-multi .skm-shift-time{font-size: 0.65rem; font-weight: 500;}
  .app-stil .shift-kachel-multi .skm-name{font-size: 0.65rem;}
  .app-stil .shift-kachel-multi select{font-size: 0.65rem;}
  .app-stil .btn{padding: 5px 10px; font-size: 0.75rem;}
  .app-stil .btn-sm{padding: 2px 6px; font-size: 0.65rem;}
  .app-stil .table-responsive{overflow-x: auto;}
  .app-stil .card{padding: 14px; margin-bottom: 14px; border-radius: 12px;}
  .app-stil .card-header{margin-bottom: 8px; padding-bottom: 6px;}
  .app-stil .card-header h2{font-size: 0.9rem;}
  .app-stil .sched-toolbar{justify-content: center; gap: 4px !important;}
  .app-stil .sched-toolbar .btn{font-size: 0.7rem;}
}
@media (max-width: 480px){
  .app-stil .cal-table{min-width: 800px;}
  .app-stil .cal-table th{font-size: 0.65rem;}
  .app-stil .cal-table td{height: auto;}
  .app-stil .month-nav .mn-label{font-size: 0.8rem; min-width: 120px;}
}
.app-stil .ganzer-tag{flex: 0 0 auto; font-size: 0.65rem; line-height: 1.2; padding: 1px 5px; margin-right: 3px; border: 1px solid var(--gray-300); border-radius: 999px; background: rgb(255, 255, 255); color: var(--gray-600); cursor: pointer; white-space: nowrap;}
.app-stil .ganzer-tag:hover{border-color: var(--primary); color: var(--primary);}
.app-stil .info-i{display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 5px; border-radius: 50%; border: 1px solid var(--gray-400); background: transparent; color: var(--gray-500); font-size: 0.65rem; font-weight: 700; font-style: italic; line-height: 1; cursor: pointer; vertical-align: 1px; padding: 0px; flex-shrink: 0;}
.app-stil .info-i:hover{border-color: var(--primary); color: var(--primary); background: var(--primary-50,rgba(59,130,246,.08));}
@media (prefers-reduced-motion: reduce){
  .app-stil *{animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important;}
}
.app-stil .soll-balken{position: relative; display: inline-block; width: 64px; height: 6px; border-radius: 3px; background: var(--gray-200); vertical-align: middle; overflow: hidden;}
.app-stil .soll-balken .sb-bereich{position: absolute; top: 0px; bottom: 0px; left: var(--sb-von,0); width: calc(var(--sb-bis,0%) - var(--sb-von,0%)); background: color-mix(in srgb,var(--sb-farbe,var(--gray-400)) 30%,transparent);}
.app-stil .soll-balken .sb-fuell{position: absolute; top: 0px; bottom: 0px; left: 0px; width: var(--sb-fuell,0); background: var(--sb-farbe,var(--gray-400)); border-radius: 3px;}
.app-stil .ps-zelle .soll-balken{display: block; margin: 0px auto 3px;}
.app-stil .ps-zeichen{margin-left: 2px;}
.app-stil .sr-only{top: 0px; left: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px; position: absolute !important;}
.app-stil button.user-menu-toggle{border: 0px; background: transparent; color: inherit; font: inherit; text-align: left;}
.app-stil button.user-menu-toggle:hover{background: rgba(255, 255, 255, 0.1);}
.app-stil button.tz-knopf{padding: 0px; font: inherit;}
.app-stil button.skm-remove{border: 0px; background: none; color: inherit; font-family: inherit;}
.app-stil .tab:focus-visible{outline: rgb(255, 255, 255) solid 2px; outline-offset: -3px; border-radius: 6px;}
.app-stil .user-menu-toggle:focus-visible{outline: rgb(255, 255, 255) solid 2px; outline-offset: 1px;}
.app-stil .shift-kachel-multi.clickable:focus-visible{outline: 2px solid var(--gray-800); outline-offset: 2px;}
.app-stil .toggle-pub input{position: absolute; inset: 0px; width: 100%; height: 100%; margin: 0px; opacity: 0; cursor: pointer;}
.app-stil .toggle-pub input:focus-visible + .slider{outline: 2px solid var(--primary); outline-offset: 2px;}
.app-stil .cal-table td.today .cal-day-num{display:flex;align-items:center;justify-content:center;background:var(--danger);color:#fff;border-radius:50%;width:22px;height:22px;font-size:.7rem;margin-left:auto;line-height:22px}
.app-stil .cal-table td.today .cal-day-mit .cal-day-num{flex:0 0 22px}

.app-stil .alert-warning{background:var(--warning-light);color:#92400e;border:1px solid #fcd34d}
@media (max-width:768px){.app-stil button.shift-kachel-multi{font-size:.65rem}}

/* ---------- Leitungsblick: die vier Kacheln der Team-Übersicht als Bild ---------- */
.app-stil.leiste-gross{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0}
.app-stil.leiste-gross .stat-card{padding:20px 14px}
.app-stil.leiste-gross .stat-value{font-size:1.7rem}
.app-stil.leiste-gross .stat-label{font-size:.85rem}