/* UntPlanWeb – Ergänzungen zu Bootstrap 5.3.
   Aufbau: Farbschema · Hülle (Navigationsleiste, Seitenleiste) · Stundenplan (Raster, Karten) · Tagesübersicht · Monitor · Druck */

/* ------------------------------------------------------------------ Farbschema */

:root {
  --bs-primary: #1d4f73;
  --bs-primary-rgb: 29, 79, 115;
  --bs-primary-text-emphasis: #12344c;
  --bs-primary-bg-subtle: #e3edf4;
  --bs-primary-border-subtle: #b9cfdf;
  --bs-link-color: #1d4f73;
  --bs-link-color-rgb: 29, 79, 115;
  --bs-link-hover-color: #12344c;
  --bs-link-hover-color-rgb: 18, 52, 76;
  --bs-body-bg: #f5f6f8;
  --bs-border-radius: .3rem;
  --tt-text: #414d55; --tt-linie: #e3e8ec; --tt-zeit: #81909b;
  --tt-aenderung: #dff6eb; --tt-entfall: #ffe5e5; --tt-gruen: #199c5f; --tt-rot: #e5484d;
  --app-navbar: 56px;
  --app-sidebar: 232px;
}
.btn-primary {
  --bs-btn-bg: #1d4f73; --bs-btn-border-color: #1d4f73;
  --bs-btn-hover-bg: #174262; --bs-btn-hover-border-color: #153c59;
  --bs-btn-active-bg: #153c59; --bs-btn-active-border-color: #133751;
  --bs-btn-disabled-bg: #1d4f73; --bs-btn-disabled-border-color: #1d4f73;
}
.btn-outline-primary {
  --bs-btn-color: #1d4f73; --bs-btn-border-color: #1d4f73;
  --bs-btn-hover-bg: #1d4f73; --bs-btn-hover-border-color: #1d4f73;
  --bs-btn-active-bg: #1d4f73; --bs-btn-active-border-color: #1d4f73;
}
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: #8eb0c8; box-shadow: 0 0 0 .2rem rgba(29, 79, 115, .18); }
.form-check-input:checked { background-color: #1d4f73; border-color: #1d4f73; }
.nav-tabs .nav-link { color: var(--bs-secondary-color); }
.nav-pills { --bs-nav-pills-link-active-bg: #1d4f73; --bs-nav-link-color: #3b4650; --bs-nav-link-hover-color: #1d4f73; }
.nav-tabs .nav-link.active { color: var(--bs-body-color); font-weight: 500; }
.card { --bs-card-border-color: #dfe3e8; --bs-card-cap-bg: #fff; }
.card-header { font-weight: 600; font-size: .925rem; padding-top: .65rem; padding-bottom: .65rem; }
.table { --bs-table-bg: transparent; font-size: .875rem; }
.table > thead th { font-weight: 600; color: var(--bs-secondary-color); font-size: .78rem; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
.table-card { margin-bottom: 0; }
.table-card > :not(caption) > * > *:first-child { padding-left: 1rem; }
.table-card > :not(caption) > * > *:last-child { padding-right: 1rem; }
.alt { text-decoration: line-through; color: var(--bs-secondary-color); margin-right: .25rem; }
.logo { width: 28px; height: 28px; flex: none; }
.zaehler { font-size: .7rem; }

/* ------------------------------------------------------------------ Hülle */

.app-navbar { height: var(--app-navbar); z-index: 1030; }
.app-navbar .navbar-brand { font-size: 1.05rem; }
.app-body { min-height: calc(100vh - var(--app-navbar)); }
.app-main { min-width: 0; }
.app-sidebar .nav-link { color: #3b4650; display: flex; align-items: center; gap: .65rem; padding: .45rem 1rem; margin: 1px .5rem; border-radius: .3rem; font-size: .925rem; }
.app-sidebar .nav-link .bi { font-size: 1.05rem; color: #6c7883; }
.app-sidebar .nav-link:hover { background: #eef1f4; color: #1f2933; }
.app-sidebar .nav-link.active { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); font-weight: 500; }
.app-sidebar .nav-link.active .bi { color: var(--bs-primary); }
.app-sidebar .nav-ueberschrift { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: #8a96a0; padding: 1rem 1.5rem .3rem; font-weight: 600; }
@media (min-width: 992px) {
  .app-sidebar { width: var(--app-sidebar); flex: none; position: sticky; top: var(--app-navbar); height: calc(100vh - var(--app-navbar)); overflow-y: auto; }
}
.seitenkopf { min-height: 38px; }
.seitenkopf h1 { font-size: 1.3rem; font-weight: 600; margin: 0; }

.anmeldung { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.anmeldung .card { width: 100%; max-width: 380px; }

/* Elementwahl (Suchliste) */
.elementwahl .wahl-menue { display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 1000; width: 320px; }
.elementwahl .wahl-menue.show { display: block; }
.elementwahl .liste { max-height: 340px; overflow-y: auto; }
.elementwahl .list-group-item { display: flex; gap: .75rem; font-size: .9rem; }
.elementwahl .list-group-item b { min-width: 3.2rem; font-weight: 600; }
.elementwahl .list-group-item span { color: var(--bs-secondary-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.elementwahl .list-group-item.active { background: var(--bs-primary); }
.elementwahl .list-group-item.active span { color: rgba(255, 255, 255, .8); }
.elementwahl .wahl-knopf { min-width: 200px; text-align: left; }

/* ------------------------------------------------------------------ Stundenplan (Raster nach Unterrichtsstunden, Karten wie im Original) */

.tt {
  position: relative; display: grid; grid-template-columns: 64px repeat(var(--tage), minmax(0, 1fr));
  background: #eef1f4; border-radius: .3rem; padding-bottom: 6px;
}
.tt-ecke { background: #eef1f4; }
.tt-tag { padding: .7rem .5rem .6rem; text-align: center; color: #6b7882; font-size: 15px; background: #eef1f4; }
.tt-tag.heute { color: #1f2933; font-weight: 700; }
.tt-leiste { padding: 0 1px 6px; display: flex; flex-direction: column; gap: 3px; background: #eef1f4; }
.tt-ereignis {
  position: relative; background: #f7f8fa; color: var(--tt-text); font-size: 13px; font-weight: 500; line-height: 26px;
  padding: 0 8px 0 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 2px;
}
.tt-ereignis::before { content: ""; position: absolute; left: 6px; top: 5px; bottom: 5px; width: 3px; border-radius: 2px; background: #c45ce0; }
.tt-ereignis.hinweis::before { background: #e8a33a; }
.tt-ereignis.hinweis { color: #6b5a3a; }
.tt-achse { position: relative; }
.tt-zeit { position: absolute; left: 0; right: 6px; padding-left: 10px; transform: translateY(5px); font-size: 13px; line-height: 14px; font-weight: 600; color: #7d8a94; font-variant-numeric: tabular-nums; }
.tt-zeit small { display: block; font-size: 11.5px; font-weight: 500; color: #9aa5ae; margin-top: 9px; padding-left: 8px; }
.tt-zeit:last-of-type { transform: translateY(-14px); }
.tt-spalte { position: relative; }
.tt-linie { position: absolute; left: 0; right: 0; border-top: 1px solid #dde2e7; }
.tt-spalte.frei { background: repeating-linear-gradient(-45deg, #eef1f4, #eef1f4 7px, #e7ebef 7px, #e7ebef 14px); }
/* Ferien, Feiertage, freie Tage wie im Original: hellblaue Spalte, Text mittig */
.tt-spalte.frei.ferien, .tt-spalte.frei.feiertag, .tt-spalte.frei.frei { background: none; }
.tt-ferien { position: absolute; inset: 0 3px; z-index: 3; background: #cddfee; color: #2b3a46; pointer-events: none; }
.tt-ferien .inhalt { position: absolute; left: 0; right: 0; top: 58%; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 0 .5rem; text-align: center; font-size: 14px; font-weight: 600; }
.tt-ferien .art .bi { font-size: 11px; vertical-align: 1px; }
.tt-frei { position: absolute; top: 30%; left: 0; right: 0; text-align: center; color: #7d8a94; font-size: .9rem; font-weight: 500; padding: 0 .5rem; }
.tt-jetzt { position: absolute; left: -1px; right: -1px; border-top: 1.5px solid #2f3a43; z-index: 6; pointer-events: none; }
.tt-jetzt-zeit { position: absolute; left: 4px; z-index: 7; transform: translateY(-50%); background: #2f3a43; color: #fff; font-size: 12.5px; font-weight: 700; line-height: 20px; padding: 0 6px; border-radius: 4px; font-variant-numeric: tabular-nums; }

/* Stundenkarte */
.std {
  position: absolute; z-index: 2; overflow: hidden; cursor: pointer; background: #fff; color: var(--tt-text);
  padding: 8px 22px 8px 19px; text-align: left; border-radius: 4px; box-shadow: 0 1px 2px rgba(31, 41, 55, .08);
  transition: box-shadow .12s ease;
}
.std::before { content: ""; position: absolute; left: 8px; top: 7px; bottom: 7px; width: 4px; border-radius: 2px; background: var(--fach, #c3cbd2); }
.std:hover, .std:focus-visible { z-index: 5; outline: 0; box-shadow: 0 4px 14px rgba(31, 41, 55, .18); }
/* Beginn/Ende links in der Karte, Akzentbalken rechts daneben */
.std.mit-zeit { padding-left: 58px; }
.std.mit-zeit::before { left: 47px; }
.std .zt { position: absolute; left: 9px; font-size: 11.5px; line-height: 13px; font-weight: 500; color: #7d8a94; font-variant-numeric: tabular-nums; }
.std .zt.o { top: 9px; }
.std .zt.u { bottom: 8px; }
.std.entfall .zt, .std.abwesend .zt { color: #b0787a; }
.std .z1 { font-size: 14px; font-weight: 600; line-height: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #414d55; }
.std .z2 { font-size: 12px; font-weight: 500; line-height: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #414d55; margin-top: 1px; }
.std .z3 { font-size: 11.5px; line-height: 15px; color: #6b7882; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.std .lbl { display: inline-block; padding: 0 3px; background: #0b7d65; color: #fff; font-weight: 600; line-height: 16px; font-size: 12px; border-radius: 2px; }
.z1 .lbl { font-size: 13.5px; line-height: 17px; }
.std .lbl.offen { background: #e5484d; }
.std .lbl.weg { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.std .mks { position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.std .info { position: absolute; right: 8px; bottom: 8px; width: 12px; height: 12px; border-radius: 50%; background: #7d8a94; color: #fff; font: italic 700 9px/12px Georgia, serif; text-align: center; }
.std.vergangen { background: #f5f7f8; box-shadow: none; }
.std.vergangen .z1, .std.vergangen .z2 { color: #6b7882; }

/* Marker (Karten und Legende) */
.mk-quadrat, .mk-kreis, .mk-dreieck, .mk-plus { display: inline-block; width: 11px; height: 11px; flex: none; }
.mk-quadrat { background: #1d9a5c; border-radius: 2px; }
.mk-plus { background: #1d9a5c; border-radius: 2px; position: relative; }
.mk-plus::before, .mk-plus::after { content: ""; position: absolute; background: #fff; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.mk-plus::before { width: 7px; height: 1.6px; }
.mk-plus::after { width: 1.6px; height: 7px; }
.mk-kreis { background: #f5c518; border-radius: 50%; }
.mk-dreieck { width: 12px; background: #f03e3e; clip-path: polygon(50% 0, 100% 100%, 0 100%); }

/* Zustände */
.std.geaendert, .std.offen, .std.buchung { background: #dcf5e8; box-shadow: 0 2px 6px rgba(31, 41, 55, .14); }
.std.entfall, .std.abwesend { background: #fde3e3; box-shadow: 0 2px 6px rgba(31, 41, 55, .12); }
.std.entfall::before, .std.abwesend::before { opacity: .55; }
.std.entfall .z1, .std.entfall .z2, .std.abwesend .z1, .std.abwesend .z2 { text-decoration: line-through; text-decoration-thickness: 1px; }
.std.klausur { background: #fdf3d4; box-shadow: 0 2px 6px rgba(31, 41, 55, .12); }
.std.bereitschaft { background: #f3f5f7; outline: 1px dashed #9aa5ad; outline-offset: -1px; }
.std.bereitschaft::before { background: #2fc6d8; }
.std.veranstaltung { background: #dcf5e8; box-shadow: 0 2px 6px rgba(31, 41, 55, .14); }
.std.vorgemerkt { background: #fff; outline: 1px dashed #8d99a3; outline-offset: -1px; }
.std.vorgemerkt::before { background: #8d99a3; }

/* Pausenzeile mit Aufsichten (trennt Blöcke) */
.tt-pause { position: absolute; left: 0; right: 0; background: transparent; border-top: 1px solid #dde2e7; }
.aufsicht {
  position: absolute; z-index: 4; display: flex; align-items: center; gap: 6px;
  background: #fff; color: var(--tt-text); padding: 0 8px 0 18px; overflow: hidden; white-space: nowrap;
  font-size: 12px; font-weight: 600; border-radius: 1px;
}
.aufsicht span { overflow: hidden; text-overflow: ellipsis; }
.aufsicht::before { content: ""; position: absolute; left: 8px; top: 5px; bottom: 5px; width: 3px; border-radius: 2px; background: #c3cbd2; }
.aufsicht.vertreten { background: #fde3e3; }
.aufsicht.vertreten span { text-decoration: line-through; }
.aufsicht.vertretung { background: #dcf5e8; }
.aufsicht .mk-plus { order: 2; margin-left: auto; }

/* Tagesauswahl (Mobil) */
.tt-tagwahl { display: none; }

/* Liste eines Tages (Übersicht) */
.tt-liste { display: flex; flex-direction: column; gap: 6px; }
.tt-liste .eintrag { display: flex; gap: .75rem; align-items: stretch; }
.tt-liste .zeit { width: 64px; flex: none; font-size: 12px; color: #7d8a94; padding-top: 8px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.tt-liste .zeit b { display: block; color: #414d55; font-size: 13px; font-weight: 600; }
.tt-liste .std { position: relative; flex: 1; min-width: 0; min-height: 52px; border: 1px solid #e3e7eb; }
.tt-liste .std.geaendert, .tt-liste .std.offen, .tt-liste .std.entfall, .tt-liste .std.klausur { border-color: transparent; }
.tt-liste .aufsicht { position: relative; left: auto; right: auto; flex: 1; height: 30px; font-size: 12px; box-shadow: none; border: 1px solid #e3e7eb; }
.tt-liste .tt-ereignis { border: 1px solid #e3e7eb; line-height: 32px; }

/* ------------------------------------------------------------------ Tagesübersicht */

.tagplan { overflow-x: auto; background: #fff; border: 1px solid #dfe3e8; border-radius: .3rem; }
.tagplan-gitter { display: grid; min-width: 900px; }
.tagplan-kopf { border-bottom: 1px solid #e3e8ec; border-left: 1px solid #e3e8ec; padding: .45rem .3rem; font-size: 11px; text-align: center; color: #81909b; }
.tagplan-kopf b { display: block; font-size: 13px; color: #414d55; font-weight: 600; }
.tagplan-element { padding: .5rem .75rem; border-bottom: 1px solid #e3e8ec; font-weight: 600; font-size: 14px; color: #414d55; position: sticky; left: 0; background: #fff; z-index: 1; }
.tagplan-element small { display: block; font-weight: 400; color: #81909b; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tagplan-zelle { border-bottom: 1px solid #e3e8ec; border-left: 1px solid #e3e8ec; padding: 4px; display: grid; gap: 4px; align-content: start; }
.tagplan { background: #eef1f4; }
.tagplan-zelle { background: #eef1f4; }
.tagplan .std { position: relative; min-height: 58px; }

/* ------------------------------------------------------------------ Vertretungsplan */

.vt-zeile.entfall td { color: var(--bs-secondary-color); }
.vt-zeile.offen .vt-lehrer { color: var(--bs-danger); font-weight: 600; }

/* ------------------------------------------------------------------ Monitor */

.monitor { background: #0f1c26; color: #e7edf1; min-height: 100vh; padding: 1.5rem 0; font-size: 1.15rem; }
.monitor-kopf { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.monitor-kopf .logo { width: 44px; height: 44px; }
.monitor-kopf h1 { font-size: 1.8rem; margin: 0; font-weight: 600; }
.monitor-kopf .uhr { margin-left: auto; font-size: 2.2rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.monitor .card { --bs-card-bg: #16283a; --bs-card-border-color: #24394d; --bs-card-cap-bg: #1b3046; color: #e7edf1; }
.monitor .card-header { font-size: 1.25rem; }
.monitor .table { --bs-table-color: #e7edf1; --bs-table-border-color: #24394d; font-size: 1.05rem; }
.monitor .table > thead th { color: #8fa9bc; font-size: .85rem; }
.monitor .entfall td { color: #8fa9bc; }
.monitor .alt { color: #7f97a8; }
.monitor .offen .vt-lehrer { color: #ff8f86; }
.monitor .nachricht { background: rgba(255, 255, 255, .06); border-left: 3px solid #6cc3a5; padding: .6rem .9rem; margin-bottom: .6rem; }
.monitor-rollbereich { max-height: calc(100vh - 230px); overflow: hidden; }

/* ------------------------------------------------------------------ Druck */

@media print {
  body { background: #fff; }
  .app-navbar, .app-sidebar, .nicht-drucken, .tt-tagwahl, .toast-container { display: none !important; }
  .app-body { display: block; }
  .container-fluid { padding: 0 !important; }
  .std { box-shadow: none !important; border: 1px solid #cfd6dc; }
  .tt-jetzt, .tt-jetzt-zeit { display: none; }
  .std, .tagplan-zelle { break-inside: avoid; }
}

/* ------------------------------------------------------------------ Schmale Bildschirme */

@media (max-width: 767.98px) {
  .tt-tagwahl { display: flex; }
  .tt { grid-template-columns: 58px 1fr; }
  .tt .tt-tag:not(.gewaehlt), .tt .tt-spalte:not(.gewaehlt), .tt .tt-leiste:not(.gewaehlt) { display: none; }
  .elementwahl .wahl-menue { width: calc(100vw - 2rem); }
  .monitor { padding: .75rem 0; font-size: 1rem; }
}

/* ------------------------------------------------------------------ Detaildialog: Anwesenheit, Raumwahl */

.fachpunkt { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.anw-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 12px; max-height: 360px; overflow-y: auto; }
.anw-zeile { display: flex; align-items: center; gap: 8px; padding: 3px 4px; border-radius: 4px; font-size: .9rem; }
.anw-zeile.fehlt { background: #fde3e3; }
.anw-zeile.verspaetet { background: #fdf3d4; }
.anw-knopf { width: 28px; height: 28px; flex: none; border: 1px solid #cfd6dc; border-radius: 6px; background: #fff; color: #199c5f; font-weight: 700; font-size: 13px; padding: 0; }
.anw-zeile.fehlt .anw-knopf { background: #e5484d; border-color: #e5484d; color: #fff; }
.anw-zeile.verspaetet .anw-knopf { background: #f0b429; border-color: #f0b429; color: #fff; }
.anw-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anw-min { width: 62px; flex: none; }
.raum-wahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; }
.raum-wahl .btn.active { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.raum-wahl .btn.active small { color: rgba(255, 255, 255, .8) !important; }

/* ------------------------------------------------------------------ Planleiste (Element mit Blättern, Woche mittig, Heute) */

.planleiste { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .75rem; }
.planleiste .links { display: flex; flex-wrap: nowrap; align-items: center; gap: .5rem; min-width: 0; }
.planleiste .rechts { display: flex; justify-content: flex-end; align-items: center; gap: .5rem; }
.planleiste .mitte { display: flex; align-items: center; gap: .25rem; }
.planleiste .zeitraum { font-weight: 600; font-size: 1rem; min-width: 190px; text-align: center; color: #2f3a43; font-variant-numeric: tabular-nums; cursor: pointer; position: relative; }
.planleiste .zeitraum small { display: block; font-weight: 500; font-size: .75rem; color: var(--bs-secondary-color); }
.planleiste .zeitraum input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.rundknopf { width: 34px; height: 34px; border-radius: 50%; border: 0; background: transparent; color: #46535d; display: inline-flex; align-items: center; justify-content: center; }
.rundknopf:hover { background: #e3e8ec; }
.rundknopf.aktiv { color: var(--bs-primary); background: var(--bs-primary-bg-subtle); }
.heute-pill { border-radius: 999px; background: #2f3a43; color: #fff; border: 0; padding: .35rem 1rem; font-weight: 600; font-size: .875rem; }
.heute-pill:hover { background: #1f2933; color: #fff; }
.element-pill { display: inline-flex; align-items: center; background: #fff; border: 1px solid #d5dbe0; border-radius: 999px; padding: 2px; }
.element-pill .rundknopf { width: 30px; height: 30px; }
.element-pill { min-width: 0; }
.element-pill .elementwahl { min-width: 0; }
.element-pill .wahl-knopf { border: 0 !important; min-width: 120px; max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 999px; box-shadow: none !important; }
@media (max-width: 1199.98px) {
  .planleiste { grid-template-columns: auto 1fr; }
  .planleiste .links { flex-wrap: wrap; grid-column: 1 / -1; }
  .planleiste .zeitraum { min-width: 0; }
}

/* Seitenleiste mit Untermenü „Stundenplan“ (wie im Original) */
.nav-paneele { position: relative; overflow: hidden; }
.app-sidebar .nav-unter { display: none; }
.app-sidebar.unter-offen .nav-haupt { display: none; }
.app-sidebar.unter-offen .nav-unter { display: flex; }
.nav-zurueck { display: flex; align-items: center; gap: .75rem; border: 0; background: none; padding: .9rem 1rem .9rem .75rem; font-size: 1.05rem; font-weight: 600; color: #3b4650; text-align: left; }
.nav-zurueck .rund { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(31, 41, 55, .16); background: #fff; }
.nav-zurueck:hover .rund { background: #eef1f4; }

/* ------------------------------------------------------------------ Stundendetails (Aufbau wie im Original) */

.stundendetails .modal-content { border: 0; border-radius: 6px; }
.sd-kopf { display: flex; align-items: flex-start; gap: 1rem; padding: 1.1rem 1.5rem .6rem 2.5rem; }
.sd-kopf.grau { background: #eef1f4; }
.sd-kopf .btn-close { margin-left: auto; }
.sd-titel h2 { font-size: 1.35rem; font-weight: 600; margin: 0 0 .35rem; color: #2f3a43; display: flex; flex-wrap: wrap; align-items: center; gap: .1rem; }
.sd-titel .trenn { color: #b8c1c9; font-weight: 300; margin: 0 .55rem; }
.sd-zeile { font-size: .9rem; color: #414d55; }
.sd-zeile .trenn { color: #b8c1c9; margin: 0 .5rem; }
.sd-badge { margin-left: .75rem; font-size: .68rem; font-weight: 700; letter-spacing: .04em; border: 1.5px solid #2f3a43; border-radius: 999px; padding: .1rem .55rem; }
.sd-leiste { background: #e5484d; color: #fff; font-weight: 700; font-size: .8rem; letter-spacing: .06em; padding: .3rem 2.5rem; }
.sd-reiter { gap: 1.75rem; padding: 0 2.5rem; border-bottom: 1px solid #dde2e7; }
.sd-reiter button { border: 0; background: none; padding: .55rem .25rem .6rem; font-weight: 600; color: #2f3a43; border-bottom: 3px solid transparent; }
.sd-reiter button.aktiv { color: var(--bs-primary); border-bottom-color: var(--bs-primary); }
.sd-rumpf { padding: 1.25rem 2.5rem 1.5rem; }
.sd-abschnitt { margin-bottom: 1.75rem; }
.sd-abschnitt-kopf { display: flex; align-items: center; gap: .65rem; padding-bottom: .55rem; margin-bottom: .9rem; border-bottom: 1px solid #dde2e7; font-weight: 600; color: #2f3a43; }
.sd-abschnitt-kopf > .bi { font-size: 1.15rem; color: #7d8a94; }
.sd-zahl { background: #eef1f4; border-radius: 999px; min-width: 24px; padding: 0 .45rem; text-align: center; font-size: .8rem; line-height: 22px; }
.sd-text { margin: 0; white-space: pre-wrap; color: #414d55; }
.sd-stift { border: 1.5px solid #9aa5ae; border-radius: 50%; width: 30px; height: 30px; background: #fff; color: #5b6770; display: inline-flex; align-items: center; justify-content: center; }
.sd-stift:hover { border-color: var(--bs-primary); color: var(--bs-primary); }
.sd-pille { border: 1px solid #c5cdd4; background: #fff; color: #2f3a43; border-radius: 999px; padding: .45rem 1.1rem; font-weight: 600; font-size: .925rem; display: inline-flex; align-items: center; gap: .4rem; }
.sd-pille:hover:not(:disabled) { border-color: #8d99a3; background: #f5f7f8; }
.sd-pille:disabled { opacity: .45; }
.sd-pille.klein { padding: .3rem .9rem; font-size: .85rem; font-weight: 500; }
.sd-pille.grau { background: #e9edf0; border-color: #e9edf0; color: #6b7882; }
.sd-pille.grau:not(:disabled) { color: #2f3a43; }
.sd-pille.primaer { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.sd-pille.primaer:hover:not(:disabled) { background: #174262; }
.sd-fuss { display: flex; flex-wrap: wrap; gap: .6rem; padding: .8rem 2.5rem; border-top: 1px solid #dde2e7; }
.sd-fuss.rechts { justify-content: flex-end; }
.sd-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 4px; }
.sd-kachel { position: relative; display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: .5rem; padding: .55rem .55rem .45rem; border: 1px solid #e3e7eb; border-radius: 2px; background: #fff; min-height: 84px; cursor: pointer; user-select: none; }
.sd-kachel.weg, .sd-kachel.spaet { background: #fff; }
.sd-kachel.da { background: #f2f4f6; }
.sd-kachel.gewaehlt { outline: 2px solid var(--bs-primary); outline-offset: -2px; }
.sd-kachel .sd-avatar { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1px solid #dde2e7; color: #8d99a3; display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 600; align-self: start; }
.sd-kachel .sd-name { display: flex; flex-direction: column; font-size: .85rem; line-height: 1.2; color: #2f3a43; min-width: 0; }
.sd-kachel .sd-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-kachel.weg .sd-name, .sd-kachel.spaet .sd-name { color: #9aa5ae; }
.sd-kachel .sd-status { position: absolute; top: 6px; left: 6px; width: 15px; height: 15px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 9px; z-index: 1; }
.sd-kachel.da .sd-status { background: #1f9d55; }
.sd-kachel.weg .sd-status { background: #e5484d; }
.sd-kachel.spaet .sd-status { background: #f0b429; }
.sd-umschalten { grid-column: 2; justify-self: start; border: 0; background: none; padding: 0; color: #7d8a94; font-size: 1rem; line-height: 1; margin-top: .25rem; }
.sd-umschalten:hover { color: var(--bs-primary); }
.sd-tabelle { font-size: .82rem; }
.sd-tabelle > thead th { text-transform: none; letter-spacing: 0; font-size: .78rem; color: #2f3a43; }
.sd-kontrolle { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2rem; padding-top: .75rem; color: #7d8a94; font-size: .95rem; }
.sd-kontrolle .ok { color: #2f3a43; }
.sd-kontrolle .ok .bi { color: #1f9d55; }
.sd-detail { display: flex; gap: 1rem; padding: .75rem 0; }
.sd-detail > .bi { font-size: 1.2rem; color: #7d8a94; width: 24px; text-align: center; flex: none; }
.sd-detail-titel { font-weight: 600; color: #2f3a43; margin-bottom: .2rem; font-size: .9rem; }
.sd-wert { display: inline-block; background: #eef1f4; border-radius: 999px; padding: .15rem .7rem; font-size: .85rem; margin-right: .3rem; }
.sd-plus { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid #9aa5ae; background: #fff; color: #5b6770; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.sd-notiz { max-width: 1260px; }
.sd-formular { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(0, 2fr); gap: .9rem 2rem; align-items: start; max-width: 860px; margin: 0 auto; }
.sd-formular label { font-weight: 600; padding-top: .4rem; }
.sd-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.sd-chip { border: 0; border-radius: 999px; background: #eef1f4; color: #9aa5ae; padding: .25rem .8rem; font-size: .85rem; font-weight: 500; }
.sd-chip.an { color: #2f3a43; background: #e3e8ec; }
@media (max-width: 767.98px) {
  .sd-kopf, .sd-rumpf, .sd-fuss { padding-left: 1rem; padding-right: 1rem; }
  .sd-reiter { padding: 0 1rem; }
  .sd-formular { grid-template-columns: 1fr; gap: .4rem; }
}
.planleiste-datum { position: relative; font-weight: 600; padding: 0 .5rem; cursor: pointer; color: #2f3a43; }
.planleiste-datum input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }