/* Erzeugt von build.mjs aus css/*.css. Nicht hier ändern, sondern in css/. */

/* ---- css/drucken.css ---- */
/* Tagesliste (Kapitel «Der Tag auf einem Blatt»): ein Blatt Papier auf ruhigem Grund wie in einer
   Druckvorschau, darüber die Wahl des Tages und «Drucken». Alles hängt an .demo-ui-drucken. Das Blatt
   hält links und rechts Abstand zum Rand, damit das Klemmbrett (.demo-objekt) nur den Grund verdeckt.
   Am Ende die Druckansicht: Mit .druck-tagesliste auf <html> (js/drucken.js) druckt nur das Blatt. */

.demo-ui-drucken {
  container: tagesliste / inline-size;
  justify-content: flex-start;
  background: var(--papier);
  color: var(--tinte);
  font-size: 14px;
}
.demo-ui-drucken > * {
  /* Breite von Leiste und Blatt: gleich, damit beide Kanten fluchten */
  --dr-breite: min(520px, 100cqi - 2 * clamp(14px, 9cqi, 68px));
}

/* Leiste: Tag wählen (wie ein Segment-Schalter) und die eine Hauptaktion */
.dr-leiste {
  flex: none; width: var(--dr-breite); margin: 0 auto; padding: 18px 0 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.dr-tage { display: flex; border-radius: 11px; background: color-mix(in srgb, var(--tinte) 6.5%, var(--papier)); }
.dr-tag {
  position: relative; isolation: isolate; min-width: 50px; height: 40px; padding: 0 12px;
  border: 0; border-radius: 11px; background: none; color: var(--leise); cursor: pointer;
  font: 600 14px/1 var(--schrift); letter-spacing: -0.005em; transition: color 0.15s ease;
}
.dr-tag::before {
  content: ""; position: absolute; inset: 3px; z-index: -1; border-radius: 8px;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.dr-tag:hover { color: var(--tinte); }
.dr-tag[aria-checked="true"] { color: var(--tinte); }
.dr-tag[aria-checked="true"]::before {
  background: var(--flaeche);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--tinte) 10%, transparent), 0 3px 8px -3px color-mix(in srgb, var(--tinte) 18%, transparent);
}
/* Ein Punkt in Amber: an diesem Tag steht ein Termin, den du oben angelegt hast */
.dr-tag.mit-eigenen::after {
  content: ""; position: absolute; top: 7px; right: 8px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--amber);
}
.dr-tag:focus-visible { outline-offset: 1px; border-radius: 11px; }

.dr-drucken {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 13px;
  border: 0; border-radius: 10px; background: var(--schiefer); color: var(--schiefer-text); cursor: pointer;
  font: 650 14px/1 var(--schrift); white-space: nowrap;
  box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--schiefer) 70%, transparent);
  transition: background-color 0.2s ease;
}
.dr-drucken:hover { background: var(--schiefer-2); }
.dr-drucken:active { translate: 0 1px; }
.dr-drucken:focus-visible { outline-offset: 3px; border-radius: 10px; }
.dr-drucken .sym { width: 18px; height: 18px; }

/* Grund: das Blatt scrollt darin und läuft unten weich aus */
.dr-tisch {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px 0 44px;
  scrollbar-gutter: stable both-edges; scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--tinte) 22%, transparent) transparent;
  -webkit-mask-image: linear-gradient(to bottom, transparent, var(--tinte) 12px, var(--tinte) calc(100% - 40px), transparent);
  mask-image: linear-gradient(to bottom, transparent, var(--tinte) 12px, var(--tinte) calc(100% - 40px), transparent);
}

/* Das Blatt: A4-Verhältnis, wächst mit, wenn der Tag voll ist */
.dr-blatt {
  width: min(var(--dr-breite), 100%); margin: 0 auto; aspect-ratio: 210 / 297;
  padding: clamp(22px, 6.5cqi, 42px) clamp(18px, 6.5cqi, 42px) 36px;
  background: var(--flaeche); border-radius: 3px;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--tinte) 7%, transparent), 0 12px 30px -16px color-mix(in srgb, var(--tinte) 26%, transparent);
}
.dr-kopf {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline;
  column-gap: 16px; row-gap: 5px; margin-bottom: 26px;
}
.dr-titel { grid-column: 1 / -1; margin: 0; font-size: 21px; font-weight: 750; line-height: 1.15; letter-spacing: -0.02em; }
.dr-unter { color: var(--leise); font-size: 13.5px; }
.dr-stand { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

.dr-gruppe + .dr-gruppe { margin-top: 22px; }
.dr-gruppe-name {
  display: flex; align-items: center; gap: 9px; margin: 0; padding-bottom: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--tinte) 82%, transparent);
  font-size: 14px; font-weight: 700; letter-spacing: -0.005em;
}
.dr-farbe { flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--buehne-rand); }
.dr-farbe.art-wagen { background: var(--wagen-rand); }
.dr-farbe.art-offen { background: var(--offen-rand); }

.dr-zeilen > li { border-bottom: 1px solid var(--linie-fein); }
.dr-zeilen > li:last-child { border-bottom: 0; }
.dr-zeile {
  display: grid; grid-template-columns: 92px minmax(0, 1fr) 32px; column-gap: 14px; align-items: start;
  min-height: 46px; margin: 0 -8px; padding: 11px 8px; border-radius: 7px; cursor: pointer;
  transition: background-color 0.15s ease;
}
.dr-zeile:hover { background: color-mix(in srgb, var(--papier) 65%, var(--flaeche)); }
.dr-zeit { font-size: 13px; font-weight: 650; line-height: 1.55; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dr-zeit span { display: block; font-weight: 500; color: var(--leise); }
.dr-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; line-height: 1.45; }
.dr-was { overflow-wrap: anywhere; transition: color 0.2s ease; }
.dr-notiz { flex-basis: 100%; font-size: 12.5px; color: var(--leise); font-variant-numeric: tabular-nums; }
.dr-eigen {
  padding: 0 7px; border-radius: 999px; background: var(--amber-hell);
  font-size: 12px; font-weight: 650; line-height: 1.6; white-space: nowrap;
}
.dr-leer { padding: 18px 0; color: var(--leise); }

/* Kästchen: echtes Eingabefeld; der Haken wird beim Abhaken wie mit dem Bleistift gezogen */
.dr-kasten { position: relative; display: grid; place-items: center; width: 32px; height: 23px; justify-self: end; }
.dr-kasten input {
  appearance: none; -webkit-appearance: none; margin: 0; width: 20px; height: 20px; cursor: pointer;
  border: 1.5px solid color-mix(in srgb, var(--tinte) 62%, transparent); border-radius: 5px; background: var(--flaeche);
  transition: border-color 0.15s ease;
}
.dr-zeile:hover .dr-kasten input { border-color: var(--tinte); }
.dr-kasten input:focus-visible { outline-offset: 3px; border-radius: 5px; }
.dr-strich {
  position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; translate: calc(-50% + 2px) calc(-50% - 3px);
  pointer-events: none; fill: none; stroke: var(--tinte); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}
.dr-strich path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.dr-kasten input:checked + .dr-strich path { stroke-dashoffset: 0; transition: stroke-dashoffset 0.34s cubic-bezier(0.3, 0.6, 0.2, 1); }
.dr-zeile:has(input:checked) :is(.dr-was, .dr-zeit) { color: var(--leise); }

/* Schmal (Handy): Zeit über dem Titel, «Drucken» nur als Symbol, die Tage füllen die Breite */
@container tagesliste (max-width: 460px) {
  .demo-ui-drucken > * { --dr-breite: calc(100cqi - 24px); }
  .dr-leiste { gap: 8px; padding-top: 12px; }
  .dr-tage { flex: 1; }
  .dr-tag { flex: 1; min-width: 0; padding: 0; }
  .dr-drucken { width: 44px; padding: 0; justify-content: center; }
  .dr-drucken span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .dr-tisch { padding-top: 8px; }
  .dr-kopf { grid-template-columns: minmax(0, 1fr); row-gap: 3px; margin-bottom: 20px; }
  .dr-titel { font-size: 19px; margin-bottom: 2px; }
  .dr-zeile { grid-template-columns: minmax(0, 1fr) 32px; grid-template-areas: "zeit kasten" "text kasten"; row-gap: 1px; padding: 10px 8px; }
  .dr-zeit { grid-area: zeit; }
  .dr-zeit span { display: inline; margin-left: 6px; }
  .dr-text { grid-area: text; }
  .dr-kasten { grid-area: kasten; align-self: center; }
}
@media (max-width: 1023px) {
  .demo-ui.demo-ui-drucken { height: clamp(440px, 128vw, 580px); }
}

/* Druckansicht: nur das Blatt, ohne Grund, Leiste und Seite drumherum. Die Vorfahren des Blatts verlieren
   Kleben, Höhe, Raster und Schatten; alles andere fällt weg. */
@media print {
  @page tagesliste { size: A4; margin: 14mm 15mm; }
  html.druck-tagesliste, html.druck-tagesliste body { background: none !important; }
  html.druck-tagesliste body :not(:has(.dr-blatt)):not(.dr-blatt):not(.dr-blatt *) { display: none !important; }
  html.druck-tagesliste body:has(.dr-blatt),
  html.druck-tagesliste body :has(.dr-blatt) {
    display: block !important; position: static !important; inset: auto !important;
    width: auto !important; max-width: none !important; height: auto !important; min-height: 0 !important; max-height: none !important;
    margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
    overflow: visible !important; background: none !important; box-shadow: none !important;
    transform: none !important; translate: none !important; opacity: 1 !important; visibility: visible !important; filter: none !important;
    -webkit-mask-image: none !important; mask-image: none !important; container-type: normal !important;
  }
  html.druck-tagesliste body :has(.dr-blatt)::before,
  html.druck-tagesliste body :has(.dr-blatt)::after { content: none !important; }

  html.druck-tagesliste .dr-blatt {
    page: tagesliste; width: auto; margin: 0; padding: 0; aspect-ratio: auto;
    background: none; box-shadow: none; border-radius: 0; color: var(--tinte); font-size: 10.5pt;
  }
  html.druck-tagesliste :is(.dr-stand, .dr-eigen, .dr-farbe) { display: none !important; }
  html.druck-tagesliste .dr-kopf { display: block; margin-bottom: 4mm; }
  html.druck-tagesliste .dr-titel { font-size: 16pt; }
  html.druck-tagesliste .dr-unter { margin-top: 1mm; font-size: 10pt; }
  html.druck-tagesliste .dr-gruppe { margin-top: 5mm; break-inside: avoid; }
  html.druck-tagesliste .dr-gruppe-name { font-size: 12pt; padding-bottom: 1mm; border-bottom-color: var(--tinte); break-after: avoid; }
  html.druck-tagesliste .dr-zeilen > li { break-inside: avoid; border-bottom: 1px solid color-mix(in srgb, var(--tinte) 25%, transparent); }
  html.druck-tagesliste .dr-zeile {
    grid-template-columns: 32mm minmax(0, 1fr) 8mm; grid-template-areas: none; column-gap: 3mm;
    min-height: 0; margin: 0; padding: 1.6mm 0; border-radius: 0; background: none;
  }
  html.druck-tagesliste .dr-zeit { font-size: 10pt; }
  html.druck-tagesliste .dr-notiz { font-size: 9.5pt; }
  html.druck-tagesliste .dr-zeile:has(input:checked) :is(.dr-was, .dr-zeit) { color: inherit; }
  html.druck-tagesliste .dr-kasten { width: 8mm; height: 5mm; }
  html.druck-tagesliste .dr-kasten input { width: 3.8mm; height: 3.8mm; border: 1px solid var(--tinte); border-radius: 0.6mm; }
  html.druck-tagesliste .dr-strich { width: 5.4mm; height: 5.4mm; translate: calc(-50% + 0.4mm) calc(-50% - 0.6mm); }
}

/* ---- css/hero.css ---- */
/* Startbild: der Mini-Planer im App-Fenster (js/hero.js). Grundformen (.fenster, .t, .sk, .tafel-*) stehen in
   styles.css; hier die Leiste mit Knöpfen, feste Höhen, Ziehen, die Karte zum Bearbeiten und die Meldung. */

.fenster { --kopf: 60px; user-select: none; -webkit-user-select: none; }

/* Leiste wie der Kopf der App: Ansicht, Datum mit Pfeilen, + Termin */
.fenster-leiste { gap: 12px; }
.fenster-ansichten { padding: 3px; }
.fenster-ansichten button {
  appearance: none; border: 0; background: transparent; color: var(--schiefer-leise); font: inherit; font-weight: 550;
  padding: 4px 12px; border-radius: 6px; cursor: pointer; transition: background-color 0.15s, color 0.15s;
}
.fenster-ansichten button:hover { color: var(--schiefer-text); }
.fenster-ansichten button[aria-pressed="true"] { background: rgb(255 255 255 / 0.16); color: var(--schiefer-text); }
.fenster-nav { display: flex; align-items: center; gap: 4px; min-width: 0; }
.fenster-pfeil {
  flex: none; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border-radius: 7px; cursor: pointer;
  border: 0; background: transparent; color: var(--schiefer-leise); transition: background-color 0.15s, color 0.15s;
}
.fenster-pfeil .sym { width: 18px; height: 18px; }
.fenster-pfeil:hover:not(:disabled) { background: rgb(255 255 255 / 0.1); color: var(--schiefer-text); }
.fenster-pfeil:disabled { opacity: 0.3; cursor: default; }
.fenster-datum { min-width: 0; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; font-variant-numeric: tabular-nums; }
/* + Termin gleich neben dem Datum: die rechte Ecke der Leiste gehört dem Autoschlüssel */
.fenster-neu {
  margin-left: 6px; display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px 0 9px;
  border: 0; border-radius: 8px; background: var(--amber); color: var(--tinte); font: inherit; font-size: 14px; font-weight: 650;
  cursor: pointer; transition: background-color 0.15s;
}
.fenster-neu:hover { background: var(--amber-hover); }
.fenster-neu .sym { width: 17px; height: 17px; stroke-width: 2.2; }
.fenster-leiste :focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* Feste Höhe: Tag, Woche und Monat wechseln ohne Sprung */
.fenster-inhalt { position: relative; height: calc(var(--kopf) + 1px + 4 * var(--stunde) + 6px); overflow: hidden; }
.fenster .tafel-kopf { height: calc(var(--kopf) + 1px); }
.fenster .sk { padding: 10px 12px 0; }
.fenster .sk span { margin-top: 1px; }

/* Termine: anfassen, verschieben, verlängern */
.fenster .spalte { cursor: cell; }
.fenster .spalte.zu { background-color: color-mix(in srgb, var(--papier-tief) 70%, transparent); cursor: default; }
.fenster .t {
  cursor: grab; touch-action: manipulation;
  left: calc(4px + (100% - 8px) * var(--spur, 0) / var(--spuren, 1));
  right: auto; width: calc((100% - 8px) / var(--spuren, 1) - (var(--spuren, 1) - 1) * 2px);
  transition: box-shadow 0.15s, background-color 0.5s var(--aus), border-color 0.5s var(--aus);
}
.fenster .t:hover { box-shadow: 0 1px 0 rgb(0 0 0 / 0.04), 0 8px 18px -12px rgb(31 42 51 / 0.45); }
.fenster .t:focus-visible { outline: 2px solid var(--tinte); outline-offset: 1px; z-index: 3; }
.fenster .t.fest { cursor: pointer; }
.fenster .t.neu { background: var(--amber-hell); border-left-color: var(--amber); }
.fenster .t.offen { box-shadow: 0 0 0 2px var(--tinte), 0 12px 24px -14px rgb(31 42 51 / 0.6); z-index: 4; }
.fenster .griff { position: absolute; left: 0; right: 0; bottom: 0; height: 9px; cursor: ns-resize; touch-action: manipulation; }
.fenster .griff::after {
  content: ""; position: absolute; left: 50%; bottom: 3px; width: 18px; height: 3px; margin-left: -9px; border-radius: 2px;
  background: currentColor; opacity: 0; transition: opacity 0.15s;
}
.fenster .t:hover .griff::after, .fenster .t:focus-visible .griff::after { opacity: 0.3; }
@media (pointer: coarse) { .fenster .griff { height: 16px; } .fenster .griff::after { opacity: 0.35; } }

.fenster.zieht, .fenster.zieht * { cursor: grabbing !important; }
.fenster .t.gezogen { opacity: 0.35; }
.fenster .t.vorschau {
  z-index: 5; left: 4px; right: 4px; width: auto; pointer-events: none;
  background: var(--flaeche); border: 2px solid var(--tinte); border-left-width: 3px;
  box-shadow: 0 18px 34px -16px rgb(31 42 51 / 0.6);
}
.fenster .t.vorschau.neu { background: var(--amber-hell); border-color: var(--amber); }
.fenster .t.vorschau.konflikt { border-color: var(--jetzt); background: color-mix(in srgb, var(--jetzt) 8%, var(--flaeche)); }

/* Der eine Moment: ein Termin wird aufgezogen und setzt sich dann wie jeder andere (wie .geist in der App).
   Nur mit JavaScript; ohne steht der Termin einfach da. */
.js .fenster .t.geist { background: var(--amber-hell); border-left-color: var(--amber); box-shadow: 0 16px 30px -18px rgb(31 42 51 / 0.55); }
.js .fenster .t.geist::before {
  content: ""; position: absolute; inset: 0; border: 2px dashed var(--amber); border-radius: inherit; pointer-events: none;
  transition: opacity 0.5s var(--aus);
}
.js .fenster .t.geist .griff::after { opacity: 1; background: var(--amber); }
.js .fenster .t.geist.setzt { background: var(--buehne); border-left-color: var(--buehne-rand); box-shadow: 0 1px 0 rgb(0 0 0 / 0.04); }
.js .fenster .t.geist.setzt::before, .js .fenster .t.geist.setzt .griff::after { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .js .fenster .t.geist { clip-path: inset(0 0 calc(100% - 23px) 0 round 5px); }
  .js .fenster .t.geist.laeuft { clip-path: none; animation: aufziehen 1.1s var(--aus) 0.3s backwards; }
}
/* Messfeld für den Start des Moments (js/hero.js), so gross wie der Termin, ohne Bild */
.fenster .geist-mass { position: absolute; left: 0; width: 1px; top: calc(var(--a) * var(--stunde) / 60); height: calc(var(--d) * var(--stunde) / 60); pointer-events: none; }
@keyframes aufziehen { from { clip-path: inset(0 0 calc(100% - 23px) 0 round 5px); } to { clip-path: inset(0 0 0 0 round 5px); } }

/* Einladung nach dem Moment: eine freie Stelle mit Plus */
.fenster .tipp {
  position: absolute; left: 4px; right: 4px; z-index: 1; pointer-events: none;
  top: calc(var(--a) * var(--stunde) / 60 + 1px); height: calc(var(--d) * var(--stunde) / 60 - 3px);
  /* Text oben: die Jetzt-Linie (10:05) läuft sonst mitten durch */
  display: flex; align-items: flex-start; justify-content: center; gap: 6px; padding-top: 7px;
  border: 1.5px dashed color-mix(in srgb, var(--amber) 80%, var(--tinte)); border-radius: 6px;
  background: color-mix(in srgb, var(--amber-hell) 70%, transparent);
  color: var(--tinte); font-size: 13px; font-weight: 600;
}
.fenster .tipp .sym { width: 16px; height: 16px; stroke-width: 2.2; }
.fenster .tipp-finger, .fenster .tipp-schmal { display: none; }
@media (max-width: 899px) { .fenster .tipp-maus { display: none; } .fenster .tipp-schmal { display: inline; } }
@media (pointer: coarse) { .fenster .tipp-maus, .fenster .tipp-schmal { display: none; } .fenster .tipp-finger { display: inline; } }
@media (prefers-reduced-motion: no-preference) {
  .fenster .tipp { animation: einladen 2.4s ease-in-out 0.2s 2 both; }
}
@keyframes einladen { 0% { opacity: 0; transform: scale(0.97); } 25%, 75% { opacity: 1; transform: none; } 100% { opacity: 1; } }

/* Karte zum Bearbeiten: neben dem Termin, am Handy als Blatt unten im Fenster */
.fenster-karte {
  position: absolute; z-index: 20; width: 300px; padding: 16px; display: grid; gap: 12px;
  background: var(--flaeche); border-radius: 14px; border: 1px solid var(--linie);
  box-shadow: 0 2px 4px rgb(31 42 51 / 0.06), 0 30px 60px -24px rgb(31 42 51 / 0.45);
  user-select: text; -webkit-user-select: text;
}
.fenster-karte[hidden] { display: none; }
.fenster-karte:focus { outline: none; }
.fenster-karte.unten { left: 8px; right: 8px; bottom: 8px; width: auto; top: auto; }
.karte-kopf { display: flex; gap: 8px; align-items: baseline; font-size: 14px; color: var(--leise); }
.karte-kopf b { color: var(--tinte); font-weight: 700; font-variant-numeric: tabular-nums; }
.karte-kopf span::before { content: "·"; margin-right: 8px; }
.karte-titel {
  width: 100%; font: inherit; font-size: 16px; font-weight: 600; color: var(--tinte);
  padding: 9px 11px; border: 1px solid var(--linie); border-radius: 9px; background: var(--papier);
}
.karte-titel:focus { outline: none; border-color: var(--tinte); background: var(--flaeche); box-shadow: 0 0 0 3px rgb(31 42 51 / 0.08); }
/* Text in der dunkleren Rot-Mischung (rund 5.4:1 auf Weiss), --jetzt bleibt für Linien */
.karte-hinweis { margin: -4px 0 0; font-size: 13.5px; font-weight: 600; color: color-mix(in srgb, var(--jetzt) 82%, var(--tinte)); }
.karte-hinweis:empty { display: none; }
.karte-dienste { display: flex; flex-wrap: wrap; gap: 6px; }
.karte-dienste button {
  display: inline-flex; align-items: baseline; gap: 5px; padding: 5px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--linie); background: var(--flaeche); color: var(--tinte); font: inherit; font-size: 13px; font-weight: 550;
  transition: background-color 0.15s, border-color 0.15s;
}
.karte-dienste button small { font-size: 12px; color: var(--leise); font-weight: 500; }
.karte-dienste button:hover { border-color: rgb(31 42 51 / 0.35); }
.karte-dienste button[aria-pressed="true"] { background: var(--tinte); border-color: var(--tinte); color: var(--schiefer-text); }
.karte-dienste button[aria-pressed="true"] small { color: var(--schiefer-leise); }
.karte-dienste button[hidden] { display: none; }
.karte-fuss { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 2px; }
.karte-loeschen {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 8px; margin-left: -8px; border: 0; border-radius: 8px;
  background: transparent; color: var(--leise); font: inherit; font-size: 14px; font-weight: 550; cursor: pointer;
}
.karte-loeschen .sym { width: 17px; height: 17px; }
.karte-loeschen:hover { color: var(--jetzt); background: color-mix(in srgb, var(--jetzt) 8%, transparent); }
.karte-fertig {
  min-height: 38px; padding: 0 18px; border: 0; border-radius: 9px; background: var(--schiefer); color: var(--schiefer-text);
  font: inherit; font-size: 14.5px; font-weight: 650; cursor: pointer;
}
.karte-fertig:hover { background: var(--schiefer-2); }

/* Meldung mit Rückgängig, unten im Fenster */
.fenster-meldung {
  position: absolute; z-index: 25; left: 50%; bottom: 14px; transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  /* max-content: absolut mit left 50 % würde die Meldung sonst auf die halbe Fensterbreite schrumpfen */
  display: flex; align-items: center; gap: 14px; width: max-content; max-width: calc(100% - 28px); padding: 9px 9px 9px 16px; border-radius: 12px;
  background: var(--schiefer); color: var(--schiefer-text); font-size: 14px; font-weight: 550;
  box-shadow: 0 18px 36px -18px rgb(31 42 51 / 0.7); transition: opacity 0.2s, transform 0.3s var(--aus);
}
.fenster-meldung:empty { display: none; }
.fenster-meldung.da { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.fenster-meldung span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.fenster-meldung button {
  flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 0; border-radius: 8px;
  background: rgb(255 255 255 / 0.1); color: var(--amber); font: inherit; font-weight: 650; cursor: pointer;
}
.fenster-meldung button:hover { background: rgb(255 255 255 / 0.16); }
.fenster-meldung .sym { width: 16px; height: 16px; }
.fenster-meldung :focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* Zeile unter dem Fenster: was die Probegarage ist, und neu starten */
.probe-hinweis { margin-top: 14px; text-align: center; font-size: 14px; color: var(--leise); }
.probe-hinweis button {
  border: 0; background: none; padding: 2px; font: inherit; color: var(--tinte); font-weight: 600; cursor: pointer;
  text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--tinte) 35%, transparent); text-underline-offset: 3px;
}
.probe-hinweis button:hover { text-decoration-color: var(--tinte); }

@media (prefers-reduced-motion: reduce) {
  .fenster .t, .fenster-meldung, .js .fenster .t.geist::before { transition: none; }
}

/* Datum in der Leiste: kurz, sobald das lange nicht mehr neben Ansicht und «+ Termin» passt */
.fenster-datum .kurz { display: none; }
@media (max-width: 679px) {
  .fenster-datum .lang { display: none; }
  .fenster-datum .kurz { display: inline; }
}

/* Handy: die Tafel ist breiter als der Bildschirm und scrollt seitwärts, die Leiste bleibt stehen */
@media (max-width: 639px) {
  .fenster { --kopf: 56px; --achse: 48px; --stunde: 70px; border-radius: 16px 0 0 16px; }
  .fenster-leiste { gap: 6px; padding: 0 12px 0 10px; }
  .fenster-leiste .zeichen { display: none; }
  .fenster-ansichten { font-size: 12.5px; }
  .fenster-ansichten button { padding: 4px 7px; }
  .fenster-pfeil { width: 28px; height: 28px; }
  .fenster-datum { font-size: 14px; }
  .fenster-neu { margin-left: auto; width: 34px; padding: 0; justify-content: center; }
  .fenster-neu span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .fenster-inhalt { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .fenster-inhalt::-webkit-scrollbar { display: none; }
  .fenster-inhalt > .tafel { min-width: 600px; }
  .fenster .sk { padding: 9px 10px 0; }
  .fenster-meldung { bottom: 10px; font-size: 13.5px; }
  /* Die freie Bühne gehört zur Meldung: umbrechen statt abschneiden */
  .fenster-meldung span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35; }
  .probe-hinweis { padding-right: var(--rand); font-size: 13.5px; }
}
@media (max-width: 389px) {
  .fenster-leiste { gap: 4px; padding: 0 8px; }
  .fenster-ansichten { font-size: 12px; }
  .fenster-ansichten button { padding: 4px 5px; }
  .fenster-datum { font-size: 13px; padding: 0 2px; }
  .fenster-pfeil { width: 26px; }
}
/* Ganz schmal: das Datum ohne Wochentag, alles etwas enger */
@media (max-width: 359px) {
  .fenster-leiste { gap: 2px; padding: 0 6px; }
  .fenster-ansichten { font-size: 11.5px; }
  .fenster-ansichten button { padding: 4px 3px; }
  .fenster-pfeil { width: 24px; }
  .fenster-datum { font-size: 12px; }
  .fenster-datum .wt { display: none; }
}

/* ---- css/preise.css ---- */
/* Preise: Zähler «Wie viele Hebebühnen hast du?» über den Karten. Die passende Karte bekommt .plan-mitte
   (js/preise.js). Mit JS wird die Hervorhebung als Ring statt als 2-px-Rand gezeichnet, damit beim Wechsel
   nichts um einen Pixel springt und der Übergang weich ist. Ohne JS bleibt alles wie in styles.css. */

.preise-wahl { display: flex; justify-content: center; margin: calc(-1 * clamp(4px, 1.6vw, 22px)) auto clamp(28px, 3.6vw, 48px); }
.pw { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 28px; }
.pw-text { display: grid; gap: 2px; }
.pw-frage { font-size: 19px; font-weight: 650; letter-spacing: -0.01em; line-height: 1.3; }
.pw-hinweis { font-size: 14.5px; color: var(--leise); }

.pw-zaehler {
  display: inline-flex; align-items: center; gap: 2px; padding: 6px;
  background: var(--flaeche); border-radius: 999px; box-shadow: var(--schatten);
}
.pw-knopf {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; flex: none;
  border: 0; border-radius: 50%; background: var(--papier); color: var(--tinte); cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s var(--aus), opacity 0.2s ease;
}
.pw-knopf .sym { width: 18px; height: 18px; stroke-width: 2.2; }
.pw-knopf:hover { background: var(--papier-tief); }
.pw-knopf:active { transform: scale(0.94); }
.pw-knopf:focus-visible { border-radius: 50%; outline-offset: 2px; }
.pw-knopf[aria-disabled="true"] { opacity: 0.32; cursor: default; }
.pw-knopf[aria-disabled="true"]:hover { background: var(--papier); }
.pw-knopf[aria-disabled="true"]:active { transform: none; }
.pw-zahl {
  min-width: 2.4ch; padding: 0 6px; text-align: center;
  font-size: 30px; font-weight: 750; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums;
}
.pw-zahl b { font-weight: inherit; }
html:not(.js) .pw-zaehler { padding: 6px 14px; }

/* Ergebnis in Worten: nur schmal, wo die Karten untereinander stehen und die passende weit unten sein kann */
.pw-passt { display: none; flex-basis: 100%; text-align: center; font-size: 15.5px; color: var(--leise); min-height: 1.5em; }
.pw-passt b { color: var(--tinte); font-weight: 650; }

.js .preise-wahl ~ .plaene .plan {
  transition: border-color 0.4s var(--aus), box-shadow 0.5s var(--aus);
}
.js .preise-wahl ~ .plaene .plan-mitte {
  border-width: 1px; border-color: var(--tinte);
  box-shadow: 0 0 0 1px var(--tinte), var(--schatten-gross);
}

@media (max-width: 899px) {
  .pw { flex-direction: column; flex-wrap: nowrap; gap: 14px; text-align: center; }
  .pw-text { justify-items: center; }
  .pw-passt { display: block; flex-basis: auto; margin-top: -2px; }
}

/* ---- css/schluss.css ---- */
/* Schluss: die Zeile zu den eigenen Terminen aus der Probegarage, hell auf Schiefer. Leer = kein Platz
   und keine Lücke im Raster, aber nicht display: none (sonst meldet der IntersectionObserver in
   js/start.js das Element nie, und das Modul startet nicht). */
.schluss-probe:empty { position: absolute; left: 50%; bottom: 0; width: 1px; height: 1px; overflow: hidden; pointer-events: none; }
.schluss-probe .sp-zeile {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 18px 9px 13px; border-radius: 999px;
  background: rgb(255 255 255 / 0.07);
  color: var(--schiefer-text); font-size: 16px; font-weight: 550; line-height: 1.4;
  text-align: left; font-variant-numeric: tabular-nums;
}
.schluss-probe .sp-zeile .sym { width: 18px; height: 18px; color: var(--amber); stroke-width: 2.4; }

/* ---- css/suche.css ---- */
/* Suche (Kapitel «Wann ist mein Auto dran?», js/suche.js): eine ruhige Suche wie Spotlight über die
   Termine der Probegarage. Grosses Feld, darunter Vorschläge zum Antippen, dann die Treffer mit dem Datum
   vorne. Keine Linien zwischen den Treffern, nur Luft. Die Liste scrollt in der Box; am Ende (oder wenn
   alles hineinpasst) scrollt die Seite weiter, sonst bleiben Mausrad und Wischen über der Demo stecken.
   Bewegt sich genau eines: der Hinweis nach «Anrufen» gleitet hoch. */

.demo-ui.demo-ui-suche { justify-content: flex-start; height: 520px; font-size: 15px; line-height: 1.45; }
@media (min-width: 1024px) {
  .js .demo-ui.demo-ui-suche { height: 100%; }
}

.demo-ui-suche .such {
  container: such / inline-size;
  position: relative; flex: 1; min-height: 0;
  display: flex; flex-direction: column;
}
.demo-ui-suche .such-kopf { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 28px 28px 6px; }

/* Das Feld: gross, ohne Rand, beim Tippen weiss mit klarem Ring */
.demo-ui-suche .such-feld {
  display: flex; align-items: center; gap: 12px;
  height: 58px; padding: 0 8px 0 18px; border-radius: 14px;
  background: color-mix(in srgb, var(--papier) 70%, var(--flaeche));
  color: var(--leise);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.demo-ui-suche .such-feld:focus-within { background: var(--flaeche); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--tinte) 62%, var(--flaeche)), 0 12px 28px -18px color-mix(in srgb, var(--tinte) 50%, transparent); }
.demo-ui-suche .such-feld > .sym { width: 22px; height: 22px; }
.demo-ui-suche .such-feld input {
  flex: 1; width: 0; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; background: transparent;
  -webkit-appearance: none; appearance: none;
  font: 500 20px/1.2 var(--schrift); letter-spacing: -0.01em; color: var(--tinte); caret-color: var(--tinte);
}
.demo-ui-suche .such-feld input:focus { outline: none; }
.demo-ui-suche .such-feld input::placeholder { color: var(--leise); opacity: 1; }
.demo-ui-suche .such-feld input::-webkit-search-cancel-button,
.demo-ui-suche .such-feld input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.demo-ui-suche .such-zahl { flex: none; font-size: 13.5px; color: var(--leise); white-space: nowrap; font-variant-numeric: tabular-nums; }
.demo-ui-suche .such-zahl:empty { display: none; }
.demo-ui-suche .such-leeren {
  flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--leise); cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.demo-ui-suche .such-leeren[hidden] { display: none; }
.demo-ui-suche .such-leeren:hover { background: color-mix(in srgb, var(--tinte) 7%, transparent); color: var(--tinte); }
.demo-ui-suche .such-leeren:focus-visible { outline-offset: -2px; border-radius: 50%; }
.demo-ui-suche .such-leeren .sym { width: 18px; height: 18px; }

/* Vorschläge: kleine Pillen, das Ziel zum Tippen ist trotzdem 40 px hoch */
.demo-ui-suche .such-vorschlaege { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; }
.demo-ui-suche .such-probier { margin: 0 4px 0 2px; font-size: 13.5px; color: var(--leise); }
.demo-ui-suche .such-vorschlaege button {
  display: inline-flex; align-items: center; min-height: 40px; max-width: 100%; padding: 0; border: 0;
  background: none; font: 550 14px/1 var(--schrift); color: var(--tinte); cursor: pointer;
}
.demo-ui-suche .such-vorschlaege button > span {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; max-width: 16em; padding: 0 13px;
  border-radius: 999px; background: color-mix(in srgb, var(--papier) 75%, var(--flaeche));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums;
  transition: background-color 0.15s ease;
}
.demo-ui-suche .such-vorschlaege button:hover > span { background: var(--papier-tief); }
.demo-ui-suche .such-vorschlaege button[aria-pressed="true"] > span { background: color-mix(in srgb, var(--tinte) 12%, var(--flaeche)); font-weight: 680; }
.demo-ui-suche .such-vorschlaege button.eigen > span::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.demo-ui-suche .such-vorschlaege button:focus-visible { outline: none; }
.demo-ui-suche .such-vorschlaege button:focus-visible > span { outline: 2px solid var(--tinte); outline-offset: 2px; }

/* Treffer: scrollt in der Box. Unten blendet die Liste weich aus. */
.demo-ui-suche .such-liste {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 6px 16px 28px;
  scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--tinte) 22%, transparent) transparent;
  -webkit-mask-image: linear-gradient(to bottom, var(--tinte) calc(100% - 24px), transparent);
  mask-image: linear-gradient(to bottom, var(--tinte) calc(100% - 24px), transparent);
}
.demo-ui-suche .such-liste:focus-visible { outline-offset: -3px; border-radius: 10px; }
.demo-ui-suche .such-gruppe { display: grid; gap: 2px; }
.demo-ui-suche .such-treffer {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; column-gap: 16px;
  padding: 12px; border-radius: 12px;
}
.demo-ui-suche .such-tag { display: grid; align-content: center; line-height: 1.2; }
.demo-ui-suche .such-tag > span { font-size: 12.5px; font-weight: 600; color: var(--leise); }
.demo-ui-suche .such-tag.heute > span { color: color-mix(in srgb, var(--jetzt) 82%, var(--tinte)); }
.demo-ui-suche .such-tag b { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.demo-ui-suche .vergangen .such-tag b { color: var(--leise); font-weight: 650; }
.demo-ui-suche .such-inhalt { display: grid; gap: 3px; min-width: 0; }
.demo-ui-suche .such-titel {
  font-size: 15.5px; font-weight: 600; line-height: 1.35; color: var(--tinte);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere;
}
.demo-ui-suche .such-wann {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px;
  font-size: 13.5px; color: var(--leise); font-variant-numeric: tabular-nums;
}
.demo-ui-suche .such-wann > * { white-space: nowrap; }
.demo-ui-suche .such-wann .such-notiz { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
/* Die Spalte mit ihrer Farbe aus dem Plan: Bühne blau, Ersatzwagen grün, nicht zugeordnet ocker */
.demo-ui-suche .such-ort { display: inline-flex; align-items: center; gap: 7px; }
.demo-ui-suche .such-ort::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 2.5px; background: var(--buehne-rand); }
.demo-ui-suche .such-ort.art-wagen::before { background: var(--wagen-rand); }
.demo-ui-suche .such-ort.art-offen::before { background: var(--offen-rand); }
.demo-ui-suche .such-eigen { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; color: var(--tinte); }
.demo-ui-suche .such-eigen::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.demo-ui-suche mark {
  background: color-mix(in srgb, var(--amber) 38%, var(--flaeche)); color: inherit;
  border-radius: 3px; padding: 0 1px; margin: 0 -1px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* Anrufen: grüne Pille wie in der App */
.demo-ui-suche .such-anrufen {
  display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 15px 0 13px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: color-mix(in srgb, var(--wagen-rand) 15%, var(--flaeche)); color: var(--tinte);
  font: 600 14px/1 var(--schrift); white-space: nowrap;
  transition: background-color 0.15s ease;
}
.demo-ui-suche .such-anrufen:hover { background: color-mix(in srgb, var(--wagen-rand) 24%, var(--flaeche)); }
.demo-ui-suche .such-anrufen:active { background: color-mix(in srgb, var(--wagen-rand) 30%, var(--flaeche)); }
.demo-ui-suche .such-anrufen:focus-visible { outline-offset: 2px; border-radius: 999px; }
.demo-ui-suche .such-anrufen .sym { width: 17px; height: 17px; color: var(--wagen-rand); }

.demo-ui-suche .such-trenner { margin: 20px 12px 6px; font-size: 13px; font-weight: 650; color: var(--leise); }
.demo-ui-suche .such-nichts { padding: 10px 12px 0; font-size: 14px; color: var(--leise); }

/* Ruhiger Zustand und kein Treffer */
.demo-ui-suche .such-leer {
  display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 100%;
  padding: 16px 24px 40px; text-align: center; font-size: 14.5px; color: var(--leise);
}
.demo-ui-suche .such-leer-zeichen {
  display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 8px; border-radius: 50%;
  background: color-mix(in srgb, var(--papier) 70%, var(--flaeche)); color: var(--leise);
}
.demo-ui-suche .such-leer-zeichen .sym { width: 24px; height: 24px; }
.demo-ui-suche .such-leer-titel { font-size: 17px; font-weight: 650; color: var(--tinte); overflow-wrap: anywhere; }

/* Hinweis nach «Anrufen»: unten in der Box, wie eine Meldung der App */
.demo-ui-suche .such-hinweis {
  position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 16px;
  width: fit-content; margin: 0 auto;
  display: flex; align-items: center; gap: 12px; padding: 13px 18px 13px 15px;
  border-radius: 14px; background: var(--schiefer); color: var(--schiefer-text);
  box-shadow: var(--schatten-gross); font-size: 14px; line-height: 1.4;
}
.demo-ui-suche .such-hinweis[hidden] { display: none; }
.demo-ui-suche .such-hinweis .sym { width: 18px; height: 18px; color: var(--amber); }
.demo-ui-suche .such-hinweis b { font-weight: 650; }
.demo-ui-suche .such-nr { white-space: nowrap; }
.demo-ui-suche .such-hinweis b + span { color: var(--schiefer-leise); }
@media (prefers-reduced-motion: no-preference) {
  .demo-ui-suche .such-hinweis:not([hidden]) { animation: such-hinweis 0.45s var(--aus); }
}
@keyframes such-hinweis {
  from { opacity: 0; transform: translateY(12px) scale(0.98); filter: blur(3px); }
}

/* Schmal (Handy): weniger Rand, Anrufen nur als Symbol */
@container such (max-width: 479px) {
  .demo-ui-suche .such-kopf { padding: 18px 16px 4px; gap: 8px; }
  .demo-ui-suche .such-feld { height: 52px; padding-left: 15px; gap: 10px; border-radius: 13px; }
  .demo-ui-suche .such-feld input { font-size: 18px; }
  .demo-ui-suche .such-liste { padding: 4px 4px 24px; }
  .demo-ui-suche .such-treffer { grid-template-columns: 48px minmax(0, 1fr) auto; column-gap: 12px; padding: 11px 12px; }
  .demo-ui-suche .such-titel { font-size: 15px; }
  .demo-ui-suche .such-wann { column-gap: 12px; font-size: 13px; }
  .demo-ui-suche .such-anrufen { width: 40px; height: 40px; padding: 0; justify-content: center; }
  .demo-ui-suche .such-anrufen > span { display: none; }
  .demo-ui-suche .such-hinweis { left: 12px; right: 12px; bottom: 12px; }
}

/* ---- css/umstieg.css ---- */
/* Umstieg: oben die Export-Datei als Herkunft, darunter der Donnerstag mit «Nicht zugeordnet» und den
   Bühnen, unten eine Zeile für Hinweise. Die Bausteine .sk, .spalte, .t, .zeitachse kommen aus styles.css
   (wie in der App), hier nur leichter: Stundenlinien statt Halbstunden, feinere Spaltenlinien.
   Breit: alle vier Spalten nebeneinander. Handy: «Nicht zugeordnet» als Ablage über den drei Bühnen. */

.um {
  --achse: 50px; --hoehe: 248px;
  --frei-text: color-mix(in srgb, var(--wagen-rand) 70%, var(--tinte));
  --belegt-text: color-mix(in srgb, var(--offen-rand) 70%, var(--tinte));
  display: flex; flex-direction: column; font-size: 13px; color: var(--tinte);
}

/* ---- Die Export-Datei ---- */
.um-xls { padding: 14px 18px 10px; background: color-mix(in srgb, var(--papier) 70%, var(--flaeche)); }
.um-datei { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 12.5px; font-weight: 600; }
.um-datei i {
  font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: 0.02em; line-height: 1;
  color: var(--flaeche); background: var(--wagen-rand); padding: 3px 5px; border-radius: 4px;
}
.um-tabelle { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12px; font-variant-numeric: tabular-nums; }
.um-tabelle th { text-align: left; font-weight: 600; font-size: 11.5px; color: var(--leise); padding: 4px 8px 5px; border-bottom: 1px solid var(--linie); }
.um-tabelle th:nth-child(1), .um-tabelle th:nth-child(2) { width: 108px; }
.um-tabelle th.um-status { width: 96px; }
.um-tabelle td {
  padding: 6px 8px; border-bottom: 1px solid var(--linie-fein);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.um-tabelle tbody tr:last-child td { border-bottom: 0; }
.um-tabelle .um-status { text-align: right; }
.um-tabelle tr.erledigt td:not(.um-status) { color: var(--leise); }
.um-tabelle tr.hell td { background: color-mix(in srgb, var(--amber) 16%, transparent); }
.um-kreis {
  display: inline-grid; place-items: center; width: 16px; height: 16px; vertical-align: -3px;
  border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--leise) 45%, transparent);
}
.um-kreis.voll { background: var(--wagen-rand); border-color: var(--wagen-rand); color: var(--flaeche); }
.um-kreis .sym { width: 11px; height: 11px; stroke-width: 3.2; }
.um-wo { margin-left: 6px; font-weight: 600; color: var(--tinte); }

/* ---- Der Tag: Kopf, Zeitachse, Spalten ---- */
.um-plan {
  --stunde: calc(var(--hoehe) / var(--stunden));
  position: relative; display: grid;
  grid-template-columns: var(--achse) repeat(4, minmax(0, 1fr));
  grid-template-rows: auto var(--hoehe);
  border-top: 1px solid var(--linie);
}
.um-ecke {
  display: grid; align-content: end; justify-items: end;
  padding: 0 8px 9px 0; font-size: 11px; line-height: 1.3; color: var(--leise); font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--linie);
}
.um-ecke b { font-weight: 650; color: var(--tinte); }
.um .um-sk {
  min-width: 0; margin: 0; padding: 9px 10px 8px;
  border: 0; border-left: 1px solid var(--linie-fein); border-top: 3px solid var(--buehne-rand); border-bottom: 1px solid var(--linie);
  background: var(--flaeche); color: var(--tinte); font: inherit; text-align: left;
  transition: background-color 0.2s ease;
}
.um .um-sk.art-offen { border-top-color: var(--offen-rand); background: color-mix(in srgb, var(--offen) 45%, var(--flaeche)); }
.um .um-sk b { font-size: 13.5px; }
.um .um-achse { border-right: 0; }
.um .um-achse span { right: 9px; font-size: 11px; }
.um .um-spalte {
  position: relative; min-width: 0;
  border-left: 1px solid var(--linie-fein);
  background-image: repeating-linear-gradient(to bottom, var(--linie-fein) 0 1px, transparent 1px var(--stunde));
  transition: background-color 0.2s ease;
}
.um .um-spalte.art-offen { background-color: color-mix(in srgb, var(--offen) 26%, transparent); }

/* Plätze im Raster (breit): Kopfzeile, dann Achse und Spalten */
.um .um-ecke, .um .um-sk { grid-row: 1; }
.um .um-achse, .um .um-spalte { grid-row: 2; }
.um .um-ecke, .um .um-achse { grid-column: 1; }
.um .um-k-offen, .um .um-s-offen { grid-column: 2; }
.um .um-k-b1, .um .um-s-b1 { grid-column: 3; }
.um .um-k-b2, .um .um-s-b2 { grid-column: 4; }
.um .um-k-b3, .um .um-s-b3 { grid-column: 5; }

/* Termine; überlappende stehen nebeneinander (--spur von --spuren) */
.um .t {
  left: calc(4px + (100% - 5px) * var(--spur, 0) / var(--spuren, 1)); right: auto;
  width: calc((100% - 5px) / var(--spuren, 1) - 3px);
  font-size: 12.5px; padding: 3px 7px;
}
.um .t-zeit { font-size: 11.5px; }
.um .t-titel { -webkit-line-clamp: var(--zeilen, 2); }
.um .t.kurz { padding-top: 2px; }
/* Selbst angelegt (im Startbild): amber wie dort */
.um .t.neu { background: var(--amber-hell); border-left-color: var(--amber); }
/* Nebeneinander ist es eng: nur die Anfangszeit */
.um .t.eng .t-zeit .bis { display: none; }

/* Ziehbar: die drei übernommenen */
.um .um-zieh {
  cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: box-shadow 0.2s ease;
}
.um .um-zieh:hover { box-shadow: 0 6px 14px -8px rgb(31 42 51 / 0.45); }
.um .um-zieh:focus-visible { outline: 2px solid var(--tinte); outline-offset: 2px; border-radius: 5px; z-index: 4; }
.um .um-zieh.gewaehlt { z-index: 3; box-shadow: 0 0 0 2px var(--amber), 0 10px 20px -12px rgb(31 42 51 / 0.5); }
.um .um-zieh.gehalten { z-index: 3; box-shadow: 0 0 0 2px var(--amber), 0 12px 24px -12px rgb(31 42 51 / 0.55); }
.um .um-zieh.zieht {
  z-index: 30; cursor: grabbing; transition: none;
  box-shadow: 0 0 0 2px var(--amber), var(--schatten-gross);
}
.um.zieht-gerade, .um.zieht-gerade * { cursor: grabbing; }
/* Finger: kurze Termine auf einer Bühne bekommen oben und unten etwas mehr Fläche zum Greifen */
@media (pointer: coarse) {
  .um .um-spalte .um-zieh.kurz { overflow: visible; }
  .um .um-spalte .um-zieh.kurz::after { content: ""; position: absolute; inset: -6px -2px; }
}

/* Vorschau beim Ziehen: hier landet der Termin (gleiche Zeit, neue Bühne) */
.um-geist {
  position: absolute; left: 4px; right: 4px; z-index: 0; pointer-events: none;
  top: calc(var(--a) * var(--stunde) / 60 + 1px); height: calc(var(--d) * var(--stunde) / 60 - 3px);
  border: 2px dashed var(--amber); border-radius: 6px; background: color-mix(in srgb, var(--amber-hell) 75%, transparent);
}
.um .um-spalte.ziel { background-color: color-mix(in srgb, var(--buehne) 45%, var(--flaeche)); }
.um .um-spalte.ziel.ziel-belegt { background-color: color-mix(in srgb, var(--offen) 55%, var(--flaeche)); }
.um .um-sk.ziel { background: color-mix(in srgb, var(--buehne) 45%, var(--flaeche)); }
.um .um-sk.ziel.ziel-belegt { background: color-mix(in srgb, var(--offen) 60%, var(--flaeche)); }

/* Frei oder belegt: im Kopf, solange ein Termin gewählt ist oder gezogen wird */
.um .um-lage { display: none; font-weight: 650; }
.um.waehlt .um-sk:is(.lage-frei, .lage-belegt) .um-n,
.um.zieht-gerade .um-sk:is(.lage-frei, .lage-belegt) .um-n { display: none; }
.um.waehlt .um-sk:is(.lage-frei, .lage-belegt) .um-lage,
.um.zieht-gerade .um-sk:is(.lage-frei, .lage-belegt) .um-lage { display: block; }
.um .lage-frei .um-lage { color: var(--frei-text); }
.um .lage-belegt .um-lage { color: var(--belegt-text); }

/* Gewählt: Kopf und Spalte nehmen den Termin auf */
.um button.um-sk { cursor: pointer; }
.um button.um-sk:hover, .um button.um-sk:focus-visible { background: color-mix(in srgb, var(--buehne) 45%, var(--flaeche)); }
.um button.um-sk.lage-belegt:hover, .um button.um-sk.lage-belegt:focus-visible { background: color-mix(in srgb, var(--offen) 60%, var(--flaeche)); }
.um button.um-sk:focus-visible { outline: 2px solid var(--tinte); outline-offset: -2px; border-radius: 0; }
.um .um-spalte.waehlbar { cursor: pointer; }
.um .um-spalte.waehlbar:hover { background-color: color-mix(in srgb, var(--buehne) 30%, var(--flaeche)); }
.um .um-spalte.waehlbar.lage-belegt:hover { background-color: color-mix(in srgb, var(--offen) 40%, var(--flaeche)); }

/* Alles zugeordnet: die Spalte ist leer und sagt es ruhig */
.um-leer {
  position: absolute; inset: 0; margin: 0; display: grid; place-content: center; justify-items: center; gap: 6px;
  padding: 12px; text-align: center; color: var(--leise); font-size: 12.5px; font-weight: 550; line-height: 1.3;
}
.um-leer .sym { width: 20px; height: 20px; color: var(--wagen-rand); stroke-width: 2.2; }

/* ---- Hinweiszeile ---- */
.um-leiste {
  display: flex; align-items: center; gap: 10px 14px; min-height: 64px; padding: 12px 18px;
  border-top: 1px solid var(--linie); font-size: 14px; line-height: 1.45;
}
.um-text { flex: 1 1 auto; min-width: 0; margin: 0; text-wrap: pretty; }
.um-text b { font-weight: 650; }
.um-leise { color: var(--leise); font-variant-numeric: tabular-nums; }
.um-auf { color: var(--leise); }
.um-tipp { color: var(--leise); }
.um-finger { display: none; }
@media (pointer: coarse) {
  .um-maus { display: none; }
  .um-finger { display: inline; }
}
.um-fertig { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.um-fertig .sym { width: 18px; height: 18px; color: var(--wagen-rand); stroke-width: 2.4; }
.um-frei-liste { white-space: nowrap; }
.um-frei {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; margin-left: 6px;
  border: 1px solid color-mix(in srgb, var(--wagen-rand) 55%, var(--flaeche)); border-radius: 999px;
  background: var(--flaeche); color: var(--tinte); font: 600 13.5px/1 var(--schrift); cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.um-frei:hover { background: var(--wagen); border-color: var(--wagen-rand); }
.um-nochmals {
  display: inline-flex; align-items: center; gap: 7px; flex: none; min-height: 40px; padding: 0 16px 0 13px;
  border: 1px solid var(--linie); border-radius: 999px; background: var(--flaeche); color: var(--tinte);
  font: 600 14px/1 var(--schrift); cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease;
}
.um-nochmals .sym { width: 17px; height: 17px; }
.um-nochmals:hover { background: var(--papier); border-color: color-mix(in srgb, var(--tinte) 30%, transparent); }
.um-rund {
  display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: 50%; background: var(--papier); color: var(--tinte); cursor: pointer;
}
.um-rund .sym { width: 17px; height: 17px; }
.um-rund:hover { background: var(--papier-tief); }
.um :is(.um-frei, .um-nochmals, .um-rund):focus-visible { border-radius: 999px; outline-offset: 2px; }

/* Das Rad liegt auf der Ecke, nicht auf der Hinweiszeile oder Bühne 3 (DESIGN.md: nie über Inhalt) */
@media (min-width: 1024px) {
  .um-leiste { padding-right: 96px; }
}
@media (max-width: 1023px) {
  .um-leiste { padding-right: 84px; }
}

/* ---- Handy: «Nicht zugeordnet» als Ablage oben, darunter die drei Bühnen ---- */
@media (max-width: 639px) {
  .um { --achse: 44px; --hoehe: 264px; }
  .um-datei i { font-size: 12px; padding: 2px 5px; }
  .um-tabelle th, .um .t-zeit, .um .um-achse span, .um-ecke { font-size: 12px; }
  .um-xls { padding: 12px 14px 8px; }
  .um-tabelle .um-bis, .um-tabelle .um-datum { display: none; }
  .um-tabelle th:nth-child(1) { width: 50px; }
  .um-tabelle th.um-status { width: 88px; }
  .um-tabelle th, .um-tabelle td { padding-left: 6px; padding-right: 6px; }

  .um-plan { grid-template-columns: var(--achse) repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto var(--hoehe); }
  .um .um-k-offen { grid-row: 1; grid-column: 1 / -1; }
  .um .um-s-offen { grid-row: 2; grid-column: 1 / -1; }
  .um .um-ecke, .um .um-k-b1, .um .um-k-b2, .um .um-k-b3 { grid-row: 3; }
  .um .um-achse, .um .um-s-b1, .um .um-s-b2, .um .um-s-b3 { grid-row: 4; }
  .um .um-k-b1, .um .um-s-b1 { grid-column: 2; }
  .um .um-k-b2, .um .um-s-b2 { grid-column: 3; }
  .um .um-k-b3, .um .um-s-b3 { grid-column: 4; }
  .um .um-sk { padding: 8px 8px 7px; }
  .um .um-k-offen { border-left: 0; display: flex; align-items: baseline; gap: 8px; }
  .um .um-s-offen {
    display: grid; align-content: start; gap: 6px; padding: 8px 10px 10px;
    min-height: calc(var(--export, 3) * 48px + 12px);
    border-left: 0; background-image: none;
  }
  .um .um-ecke { border-top: 1px solid var(--linie); }

  /* In der Ablage: eine Zeile pro Termin, gross genug für den Finger */
  .um .um-s-offen .t {
    position: relative; top: auto; left: auto; width: auto; height: auto; min-height: 42px;
    display: flex; align-items: center; gap: 10px; padding: 0 12px;
  }
  .um .um-s-offen .t-titel { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .um .um-s-offen .um-geist { display: none; }
  /* Schmale Spalten: kurze Termine zeigen den Namen, die Zeit steht an der Achse */
  .um .um-spalte:not(.um-s-offen) .t.kurz .t-zeit { display: none; }
  .um .um-leer { position: static; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0; min-height: calc(var(--export, 3) * 48px - 8px); }
  .um .um-leer .sym { width: 18px; height: 18px; }

  .um-leiste { min-height: 84px; padding: 12px 14px; font-size: 14px; }
  .um-frei-liste { white-space: normal; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
  .um-frei { min-height: 40px; margin-left: 0; }
}

/* ---- css/woche.css ---- */
/* Woche und Monat (js/woche.js): im Kapitel «Sehen, wo noch Platz ist» (.demo-ui-woche) und im
   Startbild-Fenster (.wo-im-hero). Alle Klassen tragen das Präfix wo-, damit nichts mit styles.css
   (.stufe-*, .monat, .kurz …) zusammenstösst. Breiten über Container-Abfragen: .wo-rahmen ist das Kapitel,
   .wo die Woche oder der Monat selbst. So passt dieselbe Ansicht in die Box, ans Handy und ins Startbild. */

/* ---- Gemeinsam ------------------------------------------------------------------------------------ */
.wo { container: wo / inline-size; color: var(--tinte); font-size: 13px; line-height: 1.35; font-variant-numeric: tabular-nums; }
:where(.wo, .demo-ui-woche) button {
  appearance: none; margin: 0; padding: 0; border: 0; background: none; color: inherit;
  font: inherit; text-align: left; cursor: default; -webkit-tap-highlight-color: transparent;
}
.js :where(.wo, .demo-ui-woche) button { cursor: pointer; }
.wo :focus-visible, .demo-ui-woche :focus-visible { outline: 2px solid var(--tinte); outline-offset: 0; border-radius: 8px; }
.wo-lang { display: none; }

/* Heute: die Zahl im roten Kreis (Rot der Jetzt-Linie, etwas dunkler für weisse Schrift 5:1) */
.wo-nr, .wo-m-nr {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 4px; border-radius: 11px;
  font-weight: 650; color: var(--tinte);
}
.wo-heute { background: color-mix(in srgb, var(--jetzt) 82%, var(--tinte)); color: var(--flaeche); }
/* Grün: am meisten Platz (siehe Satz unter der Demo). Amber: hier hast du etwas geändert. */
.wo-punkt { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; }
.wo-punkt-frei { background: var(--wagen-rand); }
.wo-punkt-neu { background: color-mix(in srgb, var(--amber) 75%, var(--tinte)); }

/* Auslastung: Spur in hellem Bühnen-Blau, Füllung wie die Balken der App */
.wo-spur { display: block; flex: 1 0 100%; height: 4px; border-radius: 2px; overflow: hidden; background: color-mix(in srgb, var(--buehne-rand) 14%, var(--flaeche)); }
.wo-spur i { display: block; height: 100%; width: calc(var(--p) * 1%); border-radius: inherit; background: var(--buehne-rand); }

/* ---- Woche: pro Tag eine Spalte wie in der App ---------------------------------------------------- */
.wo-woche { display: grid; grid-template-columns: repeat(var(--tage, 5), minmax(0, 1fr)); }
.wo-tag { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-left: 1px solid var(--linie-fein); }
.wo-tag:first-child { border-left: 0; }
.wo-kopf { display: grid; gap: 6px; align-content: start; margin: 4px; padding: 9px 9px 8px; border-radius: 10px; transition: background-color 0.15s; }
.wo-datum { display: flex; align-items: center; gap: 6px; min-height: 22px; font-size: 13px; font-weight: 600; color: var(--leise); white-space: nowrap; }
.wo-wt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wo-zahl { font-size: 13px; line-height: 1.15; color: var(--leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wo-zahl b { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--tinte); margin-right: 1px; }
.wo-ohne { display: none; }
.wo-balken { display: grid; gap: 7px; margin-top: 2px; }
.wo-b { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 6px; font-size: 12px; line-height: 1.2; color: var(--leise); }
.wo-b .wo-spur { grid-column: 1 / -1; }
.wo-b-wagen { display: flex; flex-wrap: wrap; justify-content: space-between; }
.wo-b-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wo-b-wert { color: var(--tinte); font-weight: 600; white-space: nowrap; }
.wo-b-wagen .wo-b-wert { font-weight: 500; }

.wo-liste { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 2px 8px 4px; list-style: none; overflow: hidden; }
.wo-liste > [hidden], .wo-mehr[hidden] { display: none; }
/* Ohne JS: alle Termine der Woche zeigen (die Box wächst mit), «+ n weitere» ist dann .nur-js */
html:not(.js) .wo-liste > [data-fix] { display: block; }
.wo-t { display: block; flex: none; min-width: 0; padding: 4px 7px; border-radius: 6px; background: var(--buehne); border-left: 3px solid var(--buehne-rand); line-height: 1.25; }
.wo-t > b, .wo-t > span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wo-t > b { font-size: 12px; font-weight: 650; }
.wo-t > span { font-size: 12.5px; }
.wo-t.art-wagen { background: var(--wagen); border-left-color: var(--wagen-rand); }
.wo-t.art-offen { background: var(--offen); border-left-color: var(--offen-rand); }
/* Deine Termine aus dem Startbild: Amber wie dort */
.wo-t.wo-neu { background: var(--amber-hell); border-left-color: var(--amber); }
.wo-mehr { display: block; flex: none; align-self: flex-start; margin: 0 8px 8px; padding: 5px 7px; border-radius: 6px; font-size: 12.5px; font-weight: 600; color: var(--leise); }
.js button.wo-mehr:hover { color: var(--tinte); background: color-mix(in srgb, var(--tinte) 5%, transparent); }

/* Schmale Spalten (kleine Box): nur Beginn, etwas weniger Rand */
@container wo (max-width: 559px) {
  .wo-bis { display: none; }
  .wo-kopf { margin: 4px 3px; padding: 9px 6px 8px; }
  .wo-liste { padding: 2px 5px 4px; }
  .wo-mehr { margin: 0 5px 8px; }
}
/* Breite Woche (Startbild am Bildschirm, Tablet): Wochentag ausgeschrieben, «ohne Bühne» */
@container wo (min-width: 760px) {
  .wo-lang { display: inline; }
  .wo-kurz { display: none; }
  .wo-ohne { display: inline; }
  .wo-kopf { padding: 9px 10px 8px; }
}
/* Noch breiter: Balken einzeilig wie in der App (Name, Balken, Prozent) */
@container wo (min-width: 900px) {
  .wo-woche .wo-b { display: grid; grid-template-columns: 76px minmax(0, 1fr) 38px; align-items: center; gap: 8px; }
  .wo-woche .wo-b .wo-spur { grid-column: 2; grid-row: 1; }
  .wo-woche .wo-b-wert { grid-column: 3; text-align: right; }
  .wo-woche .wo-b-wagen { grid-template-columns: 76px minmax(0, 1fr); }
  .wo-woche .wo-b-wagen .wo-b-wert { grid-column: 2; text-align: left; }
  .wo-balken { gap: 6px; }
}

/* ---- Monat: Mo–So, Tage nach Auslastung gefärbt ----------------------------------------------------- */
.wo-monat { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; }
.wo-m-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; font-size: 12.5px; color: var(--leise); }
.wo-m-summe b { color: var(--tinte); font-weight: 700; }
.wo-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 11px; font-size: 12px; }
.wo-legende > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.wo-legende i { width: 12px; height: 12px; border-radius: 3px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tinte) 9%, transparent); }
.wo-leg-titel { color: var(--tinte); font-weight: 600; }
.wo-m-gitter {
  flex: 1 1 auto; min-height: 0; display: grid; gap: 4px;
  grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: auto repeat(var(--wochen, 5), minmax(44px, 1fr));
}
.wo-m-wt { text-align: center; font-size: 12px; font-weight: 600; color: var(--leise); }
.wo-m-tag {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr);
  align-items: end; gap: 0 4px; min-width: 0; min-height: 0; padding: 4px 5px 6px 4px; border-radius: 8px; overflow: hidden;
  transition: box-shadow 0.15s;
}
.wo-m-nr { grid-column: 1; grid-row: 1; align-self: start; justify-self: start; font-size: 12.5px; }
.wo-m-n { grid-column: 1; grid-row: 2; padding-left: 3px; font-size: 16px; font-weight: 700; line-height: 1; letter-spacing: -0.01em; white-space: nowrap; }
.wo-m-p { display: none; grid-column: 2; grid-row: 2; font-size: 12px; font-weight: 600; white-space: nowrap; }
.wo-m-tag .wo-punkt { position: absolute; top: 9px; right: 8px; }
.wo-m-tag .wo-punkt-frei + .wo-punkt-neu { right: 19px; }
/* Ganz schmale Zellen (Handy ab 320 px): Punkte in die Ecke, sonst decken sie die Tagesnummer */
@container wo (max-width: 300px) {
  .wo-m-tag .wo-punkt { top: 4px; right: 3px; width: 6px; height: 6px; }
  .wo-m-tag .wo-punkt-frei + .wo-punkt-neu { top: 12px; right: 3px; }
}
.wo-s0 { background: color-mix(in srgb, var(--papier) 55%, var(--flaeche)); }
.wo-s1 { background: color-mix(in srgb, var(--buehne-rand) 10%, var(--flaeche)); }
.wo-s2 { background: color-mix(in srgb, var(--buehne-rand) 24%, var(--flaeche)); }
.wo-s3 { background: color-mix(in srgb, var(--buehne-rand) 40%, var(--flaeche)); }
.wo-s4 { background: color-mix(in srgb, var(--buehne-rand) 60%, var(--flaeche)); }
/* Geschlossen: feine Schraffur wie in der App */
.wo-m-tag.wo-zu, .wo-legende i.wo-zu {
  background: repeating-linear-gradient(135deg, var(--linie) 0 1.5px, transparent 1.5px 6px), color-mix(in srgb, var(--papier) 60%, var(--flaeche));
}
.wo-m-tag.wo-zu .wo-m-nr { color: var(--leise); }
.wo-m-tag.wo-gewaehlt { box-shadow: inset 0 0 0 2px var(--tinte); }
.js .wo-m-tag:not(.wo-gewaehlt):hover { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tinte) 32%, transparent); }

/* Breiter Monat (Startbild): dazu wie voll die Bühnen sind */
@container wo (min-width: 760px) {
  .wo-m-tag { padding: 6px 9px 8px 6px; }
  .wo-m-n { font-size: 17px; }
  .wo-m-p { display: inline; }
}

/* ---- Startbild: im Fenster mit fester Höhe, ohne inneres Scrollen --------------------------------- */
.wo-im-hero { height: 100%; container-type: size; background: var(--flaeche); }
.wo-im-hero.wo-woche .wo-tag { padding: 4px 0 0; transition: background-color 0.15s; }
.wo-im-hero .wo-kopf { margin: 0; padding: 8px 12px 10px; gap: 6px; }
.wo-im-hero .wo-balken { gap: 6px; }
.wo-im-hero .wo-liste { padding: 0 8px; }
.wo-im-hero .wo-mehr { margin: 4px 8px 8px; padding: 0 7px; }
.wo-im-hero .wo-mehr-klein { display: none; }
.wo-im-hero.wo-woche .wo-tag.wo-gewaehlt { background: color-mix(in srgb, var(--buehne) 40%, transparent); }
.js .wo-im-hero.wo-woche .wo-tag:hover { background: color-mix(in srgb, var(--tinte) 3%, transparent); }
.wo-im-hero.wo-woche .wo-tag:focus-visible { outline-offset: -3px; border-radius: 0; }
.wo-im-hero.wo-monat { padding: 10px 14px 12px; gap: 8px; }
.wo-im-hero .wo-m-gitter { grid-template-rows: auto repeat(var(--wochen, 5), minmax(0, 1fr)); }
/* Handy: Die Woche ist breiter als das Fenster und scrollt seitlich wie die Tagesansicht (hero.css),
   der Monat passt in die Breite (Raster minmax(0, 1fr), Legende bricht um) */
@media (max-width: 639px) {
  .wo-im-hero.wo-woche { min-width: 600px; }
}
/* Niedriges Fenster (Handy) oder Balken zweizeilig: weniger Terminzeilen */
@container wo (max-height: 360px) or (max-width: 899px) {
  .wo-im-hero .wo-nur-gross, .wo-im-hero .wo-mehr-gross { display: none; }
  .wo-im-hero .wo-mehr-klein { display: block; }
}

/* ---- Kapitel: Leiste, Fläche, Satz ---------------------------------------------------------------- */
.demo-ui.demo-ui-woche { justify-content: flex-start; }
.wo-rahmen { container: wo-rahmen / inline-size; flex: 1 1 auto; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.wo-leiste { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 20px; border-bottom: 1px solid var(--linie-fein); }
.wo-titel { display: flex; align-items: baseline; gap: 10px; min-width: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.wo-titel-zahl { font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--leise); }
.wo-flaeche-monat .wo-m-summe { display: none; }
.wo-umschalter { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: color-mix(in srgb, var(--papier) 70%, var(--linie-fein)); }
.wo-umschalter button {
  min-height: 32px; padding: 0 14px; border-radius: 8px; text-align: center;
  font-size: 13.5px; font-weight: 600; color: var(--leise); transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.wo-umschalter button[aria-pressed="true"] {
  background: var(--flaeche); color: var(--tinte);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--tinte) 10%, transparent), 0 3px 10px -4px color-mix(in srgb, var(--tinte) 28%, transparent);
}
.js .wo-umschalter button[aria-pressed="false"]:hover { color: var(--tinte); }
.wo-flaeche { position: relative; min-height: 0; }
.wo-flaeche-woche > .wo-woche { height: 100%; }
.js .wo-flaeche-woche .wo-kopf:hover { background: color-mix(in srgb, var(--tinte) 4%, transparent); }
.wo-flaeche-woche.wo-offen .wo-gewaehlt .wo-kopf { background: color-mix(in srgb, var(--buehne) 60%, transparent); }

.wo-fazit { display: flex; align-items: baseline; gap: 9px; padding: 11px 20px 13px; border-top: 1px solid var(--linie-fein); font-size: 13px; line-height: 1.45; color: var(--leise); }
.wo-fazit .wo-punkt { transform: translateY(-1px); }
.wo-fazit b { color: var(--tinte); font-weight: 650; }

/* Tagesleiste: die Termine eines Tages, nach Bühne gruppiert */
.wo-detail { display: grid; align-content: start; gap: 16px; min-width: 0; padding: 16px 20px 20px; background: var(--flaeche); }
.wo-d-kopf { position: relative; display: grid; gap: 3px; }
.wo-flaeche-woche .wo-d-kopf { padding-right: 40px; }
.wo-d-titel { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; }
.wo-d-titel:focus:not(:focus-visible) { outline: none; }
.wo-d-titel:focus-visible { outline-offset: 4px; border-radius: 6px; }
.wo-d-zahl { font-size: 13px; color: var(--leise); }
.wo-schliessen { position: absolute; top: -9px; right: -11px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; color: var(--leise); }
.wo-schliessen .sym { width: 18px; height: 18px; }
.js .wo-schliessen:hover { color: var(--tinte); background: color-mix(in srgb, var(--tinte) 6%, transparent); }
.wo-gruppen { display: grid; gap: 12px; }
.wo-g-kopf { display: grid; grid-template-columns: auto minmax(24px, 1fr) auto; align-items: center; gap: 10px; font-size: 12px; color: var(--leise); }
.wo-gruppe:not(.art-buehne) .wo-g-kopf { grid-template-columns: auto minmax(0, 1fr); }
.wo-gruppe:not(.art-buehne) .wo-g-wert { justify-self: end; }
.wo-g-name { display: inline-flex; align-items: center; gap: 7px; font-weight: 650; color: var(--tinte); white-space: nowrap; }
.wo-g-name::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--buehne-rand); }
.art-wagen .wo-g-name::before { background: var(--wagen-rand); }
.art-offen .wo-g-name::before { background: var(--offen-rand); }
.wo-g-wert { font-weight: 600; color: var(--tinte); white-space: nowrap; }
.wo-g-liste { display: grid; gap: 1px; margin: 5px 0 0; padding: 0; list-style: none; }
.wo-g-liste li { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 8px; align-items: baseline; margin: 0 -8px; padding: 3px 8px; border-radius: 6px; font-size: 13px; line-height: 1.35; }
.wo-g-liste b { font-size: 12.5px; font-weight: 650; white-space: nowrap; }
.wo-g-liste li > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wo-g-liste li.wo-neu { background: var(--amber-hell); }

/* Woche breit: Tagesleiste rechts über den Spalten, nur wenn geöffnet */
.wo-flaeche-woche .wo-detail {
  position: absolute; z-index: 3; inset: 0 0 0 auto; width: min(300px, 64%); display: none;
  overflow: auto;
  box-shadow: -20px 0 44px -26px color-mix(in srgb, var(--tinte) 50%, transparent);
}
.wo-flaeche-woche.wo-offen .wo-detail { display: grid; }

/* Monat: Tagesleiste daneben */
.wo-flaeche-monat { display: grid; grid-template-columns: minmax(0, 1fr) 252px; }
.wo-flaeche-monat > .wo-monat { min-height: 0; }
.wo-flaeche-monat > .wo-detail { overflow: auto; border-left: 1px solid var(--linie-fein); }

/* Schmaler (kleine Box): Monat mit Tagesleiste darunter */
@container wo-rahmen (max-width: 599px) {
  .wo-flaeche-monat { grid-template-columns: minmax(0, 1fr); align-content: start; overflow: auto; }
  .wo-flaeche-monat .wo-m-gitter { flex: none; grid-template-rows: auto repeat(var(--wochen, 5), 50px); }
  .wo-flaeche-monat > .wo-monat { min-height: auto; }
  .wo-flaeche-monat > .wo-detail { overflow: visible; border-left: 0; border-top: 1px solid var(--linie-fein); }
}

/* Handy: die Woche als Leiste mit fünf Tagen, darunter der gewählte Tag */
@container wo-rahmen (max-width: 479px) {
  .wo-leiste { padding: 10px 10px 10px 16px; }
  .wo-titel-zahl { display: none; }
  .wo-umschalter button { min-height: 40px; padding: 0 13px; }
  .wo-flaeche-woche > .wo-woche { height: auto; gap: 4px; padding: 12px 10px 6px; }
  .wo-flaeche-woche .wo-tag { border-left: 0; }
  .wo-flaeche-woche .wo-liste, .wo-flaeche-woche .wo-mehr { display: none; }
  .wo-flaeche-woche .wo-kopf { position: relative; justify-items: center; gap: 8px; margin: 0; padding: 9px 7px 12px; border-radius: 12px; }
  .wo-flaeche-woche .wo-datum { flex-direction: column; gap: 3px; min-height: 0; }
  .wo-flaeche-woche .wo-datum .wo-punkt { position: absolute; top: 8px; right: 8px; }
  .wo-flaeche-woche .wo-datum .wo-punkt-frei + .wo-punkt-neu { right: 18px; }
  .wo-flaeche-woche .wo-einheit, .wo-flaeche-woche .wo-b-name, .wo-flaeche-woche .wo-b-wert, .wo-flaeche-woche .wo-b-wagen { display: none; }
  .wo-flaeche-woche .wo-zahl b { font-size: 18px; margin: 0; }
  .wo-flaeche-woche .wo-balken { width: 100%; gap: 3px; margin: 0; }
  .wo-flaeche-woche .wo-gewaehlt .wo-kopf, .wo-flaeche-woche.wo-offen .wo-gewaehlt .wo-kopf { background: var(--papier); box-shadow: inset 0 0 0 1.5px var(--tinte); }
  .wo-flaeche-woche .wo-detail { position: static; display: grid; width: auto; overflow: visible; box-shadow: none; border-top: 1px solid var(--linie-fein); }
  .wo-flaeche-woche .wo-schliessen { display: none; }
  .wo-flaeche-woche.wo-oeffnet .wo-detail { animation: none; }
  .wo-detail { padding: 16px 16px 18px; }
  .wo-fazit { padding: 12px 16px 14px; }
}

/* ---- Der eine Moment: Änderungen aus dem Startbild landen ------------------------------------------
   Kommt die Demo ins Bild (oder ändert sich oben etwas), wachsen die Balken der geänderten Tage vom
   zuletzt gesehenen Stand und der Tag leuchtet kurz in Amber auf. Ohne Bewegung bleibt der Amber-Punkt. */
@media (prefers-reduced-motion: no-preference) {
  .wo-frisch { animation: wo-leuchten 2.4s var(--aus); }
  .wo-waechst { animation: wo-wachsen 1s var(--aus) 0.15s backwards; }
  .wo-oeffnet .wo-detail { animation: wo-rein 0.24s var(--aus); }
}
@keyframes wo-leuchten {
  0%, 22% { background-color: var(--amber-hell); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--amber) 85%, transparent); }
}
@keyframes wo-wachsen { from { width: calc(var(--p0) * 1%); } }
@keyframes wo-rein { from { opacity: 0; transform: translateX(14px); } }