/* Die Gestaltung ist die von stundenplanner.de (thalamus404/stundenplanner, docs/DESIGN.md §5, web/stil.css): dieselben
   Tokens, Zonen, Knöpfe, Ebenen und Maße. Silas, 05.10.2026: „genau dasselbe Layout haben, nur optimiert auf einen
   normalen Kalender. Und die Wochentage sollen natürlich von Montag bis Sonntag gehen. Und man soll ein bisschen
   einfacher zwischen den Wochen navigieren können."
   Was anders ist, steht an seiner Stelle: links statt der Module ein Monat zum Springen und „Deine Vorschläge",
   im Raster belegt (grau), vorbei (schraffiert), die Auswahl (gestrichelt) und das Formular als Karte bzw. Blatt.
   Wer einen Wert hier ändert, prüft ihn gegen DESIGN.md §5.5 dort (Kontraste) und beide Schemata. */

:root {
  color-scheme: light dark;
  --grau-1: #fdfdff; --grau-2: #f7f8fb; --grau-3: #eef0f3; --grau-4: #e5e6e9; --grau-5: #d7d9dc;
  --grau-6: #bcbec0; --grau-7: #7f8083; --grau-8: #6d6f71; --grau-9: #545557; --grau-10: #1d1e20;
  --konflikt: #cc2827; --konflikt-text: #a51f1e; --konflikt-flaeche: #ffebe8;
  --hinweis: #c17a00; --hinweis-text: #7b4c00; --hinweis-flaeche: #fef0d4;
  --fuss-text: #707274;
  --ebene: #fdfdff;
  --rand-ebene: var(--grau-5);
  --schatten: 0 1px 2px rgb(0 0 0 / .06), 0 8px 24px rgb(0 0 0 / .12);
  --ein: cubic-bezier(.2, 0, 0, 1);
  --aus: cubic-bezier(.3, 0, 1, 1);
  --h-min: 20.5px;
  --ziel: 32px;
  --zm: 28px;
  --rand-x: 24px;
  /* Die Auswahl trägt die Farbe des ersten Moduls von stundenplanner (Blau): eine Farbe für „deins", sonst Grau. */
  --m-rand: #488acb; --m-flaeche: #b4d8ff; --m-tinte: #0e375c;
  /* belegt: eingelassen wie die „zurückgenommene" Kachel dort; vorbei: dieselbe Fläche, schraffiert */
  --belegt: var(--grau-3); --belegt-rand: var(--grau-5);
  --schraffur: var(--grau-4);
  font: 14px/20px system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --grau-1: #252628; --grau-2: #111213; --grau-3: #1b1c1e; --grau-4: #202224; --grau-5: #2f3032;
    --grau-6: #46484a; --grau-7: #737477; --grau-8: #8b8c8f; --grau-9: #bfc1c3; --grau-10: #e6e8ea;
    --konflikt: #ef675c; --konflikt-text: #f8a59b; --konflikt-flaeche: #3b1c19;
    --hinweis: #e9b452; --hinweis-text: #e9ca89; --hinweis-flaeche: #31240e;
    --fuss-text: #7c7d80;
    --ebene: #303234;
    --rand-ebene: rgb(255 255 255 / .1);
    --schatten: none;
    --m-rand: #70a3d8; --m-flaeche: #233c56; --m-tinte: #bad8f8;
    --belegt: #2a2b2e; --belegt-rand: #3a3b3e;
    --schraffur: #1d1e20;
  }
}
@media (pointer: coarse) { :root { --h-min: 22.5px; --ziel: 44px; --zm: 44px; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--grau-2); color: var(--grau-10); }
body { margin: 0; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
p, h2, ul { margin: 0; }
ul { padding: 0; list-style: none; }
h2, b, strong { font-size: inherit; font-weight: 600; }
button, select, input, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
a { color: inherit; text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--grau-10); outline-offset: 2px; }
button:focus-visible { z-index: 1; }
.i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.i .voll { fill: currentColor; stroke: none; }
.symbole { position: fixed; top: 0; left: 0; width: 0; height: 0; overflow: hidden; }
.nur-sr { position: fixed; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

button { position: relative; }
button::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor;
  opacity: 0; transition: opacity 100ms linear; pointer-events: none;
}
@media (hover: hover) { button:hover::after { opacity: .08; } }
button:active::after { opacity: .1; }
:disabled::after { display: none; }

/* ── Die Zonen (stundenplanner §3.1) */
.seite {
  height: 100vh; height: 100dvh; max-width: 2448px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 16px; padding: 12px var(--rand-x) 24px;
}
@media (min-height: 860px) { .seite { padding-block: 24px 32px; gap: 24px; } }
@media (max-height: 700px) { .seite { gap: 12px; padding-bottom: 20px; } }
.kopf {
  flex: none; height: 56px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: "sg name rechts"; align-items: center; gap: 24px; min-width: 0;
}
.name { grid-area: name; display: flex; justify-content: center; color: var(--grau-10); }
/* Der Schriftzug: „silas" Sora 800, „heineken" Sora 300, als Pfad (index.html, #marke). 18 px ohne Unterlänge sind
   dieselbe Buchstabengröße wie 22 px „stundenplanner" mit dem p. */
.wortmarke { display: block; height: 18px; width: auto; aspect-ratio: 6599 / 748; fill: currentColor; }
.stand { height: var(--ziel); padding: 0 8px; border-radius: 8px; color: var(--grau-9); white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.stand.alt { color: var(--hinweis-text); }
.stand:disabled { cursor: default; }
.kopf-rechts { grid-area: rechts; justify-self: end; display: flex; align-items: center; gap: 8px; min-width: 0; }
.t-kurz { display: none; }
@media (max-width: 1199.98px) { .t-lang { display: none; } .t-kurz { display: inline; } }
@media (max-width: 1439.98px) { #stand { display: none; } }
@media (min-width: 1440px) { #stand-fuss { display: none; } }

/* Der Reiter (stundenplanner: Studiengang) trägt hier Monat und Woche; ein Tipp öffnet den Monat zum Springen. */
.studiengang { grid-area: sg; justify-self: start; max-width: 100%; display: flex; align-items: center; min-width: 0; }
.sg-reiter {
  display: grid; align-content: center; min-width: 0; min-height: 44px; padding: 4px 8px;
  border-bottom: 2px solid var(--grau-10); border-radius: 8px 8px 0 0; text-align: left;
}
.sg-name { display: flex; align-items: center; gap: 4px; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-i { color: var(--grau-8); }
.sg-fs { font-size: 12px; line-height: 16px; color: var(--grau-9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.knopf {
  height: var(--ziel); min-width: var(--ziel); padding: 0 12px; border-radius: 8px; border: 1px solid var(--grau-6);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
}
.knopf.haupt { background: var(--grau-10); border-color: var(--grau-10); color: var(--grau-1); font-weight: 600; }
.knopf.rund { padding: 0; width: var(--ziel); }
.knopf:disabled { opacity: .38; cursor: default; }
.leise { display: inline-flex; align-items: center; min-height: 24px; margin: -4px 0; padding: 0 4px; border-radius: 4px; text-decoration: underline; text-underline-offset: 2px; }

/* ── Mitte: links der Monat und deine Vorschläge (wo dort die Module stehen), rechts die Woche */
.mitte {
  /* Ohne min-height: 0 und mit „auto" als Untergrenze der Zeile: Reicht das Fenster nicht für die Mindesthöhe des
     Rasters, wächst die Mitte und die Seite scrollt — sonst lief das Raster über Legende und Fuß (gemessen bei 865 px). */
  flex: 1 1 0; display: grid; grid-template-columns: 240px minmax(0, 1fr); grid-template-rows: minmax(auto, 1fr) auto;
  grid-template-areas: "module buehne" "legende buehne"; gap: 16px 32px; margin-top: 8px;
}
.module { grid-area: module; display: grid; align-content: start; gap: 12px; }
.buehne { grid-area: buehne; display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 768px) { .buehne { padding-bottom: 8px; } }
.modul { min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 12px; background: var(--grau-1); border: 1px solid var(--grau-5); }
.m-titel { display: flex; align-items: center; gap: 8px; min-height: var(--zm); padding: 0 4px; font-weight: 600; }

/* Der Monat: KW und Mo–So, ein Tipp springt in die Woche. Die gezeigte Woche ist eine Zeile in Tinte. */
.mo-kopf { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.mo-kopf .knopf { border: 0; }
.mo-titel { font-weight: 600; padding: 0 4px; }
.mo-gitter { display: grid; grid-template-columns: 24px repeat(7, minmax(0, 1fr)); row-gap: 2px; font-size: 12px; line-height: 16px; text-align: center; }
.mo-gitter .kw, .mo-gitter .wt { color: var(--grau-9); display: grid; place-items: center; height: 24px; }
.mo-gitter .kw { font-size: 11px; }
.mo-zeile { display: contents; }
.mo-tag { height: 28px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; }
.mo-tag.anders { color: var(--grau-9); }
.mo-tag:disabled { opacity: .38; cursor: default; }
.mo-tag.heute span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--grau-10); color: var(--grau-1); font-weight: 600; }
/* Die gezeigte Woche: Fläche wie ein gewähltes Segment, 1 px Rand — eine Zeile, über KW und sieben Tage */
.mo-zeile.hier > .mo-tag, .mo-zeile.hier > .kw { background: var(--grau-3); }
.mo-zeile.hier > .kw { border-radius: 8px 0 0 8px; color: var(--grau-10); font-weight: 600; }
.mo-zeile.hier > .mo-tag { border-radius: 0; }
.mo-zeile.hier > .mo-tag:last-child { border-radius: 0 8px 8px 0; }
.mo-zeile.hier > .mo-tag.tag-hier { box-shadow: inset 0 0 0 1px var(--grau-10); border-radius: 8px; }
@media (pointer: coarse) { .mo-tag { height: 40px; } .mo-gitter .kw { height: 40px; } }

/* Deine Vorschläge: je einer eine Zeile mit Muster, Titel, Zeit und Stand */
.meine ul { display: grid; gap: 4px; }
.mein { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 2px 8px; align-items: center; width: 100%; padding: 6px 4px; border-radius: 8px; }
.mein .lg-k { margin-top: 2px; }
.mein-titel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.mein-zeit { grid-column: 2; font-size: 12px; line-height: 16px; color: var(--grau-9); }
.mein-stand { grid-column: 2; font-size: 12px; line-height: 16px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.mein-stand .i { width: 12px; height: 12px; }
.mein-stand.angenommen { color: var(--grau-10); }
.mein-stand.abgelehnt { color: var(--grau-9); }

.werkzeug { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; min-height: 40px; }
.lage { flex: 1 1 320px; min-width: 0; }
.l-titel { font-weight: 600; }
.l-unter { color: var(--grau-9); }
.steuer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.w-gruppe { display: flex; align-items: center; gap: 4px; }
.umschalter { display: inline-flex; padding: 2px; border-radius: 8px; background: var(--grau-3); }
.seg { display: flex; align-items: center; gap: 8px; height: var(--ziel); padding: 0 12px; border-radius: 6px; border: 1px solid transparent; white-space: nowrap; }
.seg[aria-pressed="true"] { background: var(--grau-1); border-color: var(--grau-6); font-weight: 600; }

/* ── Raster (stundenplanner §3.2): echte Zeitachse, die Stunde teilt sich die Höhe */
.raster {
  flex: 1 1 0; min-height: calc(40px + var(--stunden, 15) * var(--h-min));
  display: grid; grid-template-columns: 32px minmax(0, 1fr); grid-template-rows: 40px minmax(0, 1fr);
}
.tage { grid-column: 2; display: grid; grid-template-columns: repeat(var(--tage, 7), minmax(0, 1fr)); min-width: 0; }
.tag { display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 8px; font-weight: 600; white-space: nowrap; overflow: hidden; min-width: 0; }
.tag .datum { font-size: 12px; font-weight: 400; color: var(--grau-9); }
.tag .lang { display: none; }
/* Heute: das Datum in einem Kreis aus Tinte — das eine, was jetzt gilt */
.tag.heute .datum { color: var(--grau-1); background: var(--grau-10); border-radius: 10px; padding: 0 6px; font-weight: 600; }
.tag.vergangen { color: var(--grau-9); }
.ein-tag .tage { padding: 2px; border-radius: 8px; background: var(--grau-3); }
.ein-tag .tag { border: 1px solid transparent; border-radius: 6px; }
.ein-tag .tag[aria-pressed="true"] { background: var(--grau-1); border-color: var(--grau-6); }
@media (min-width: 1280px) { .tag .kurz { display: none; } .tag .lang { display: inline; } }
.koerper { grid-column: 1 / -1; position: relative; display: grid; grid-template-columns: repeat(var(--spalten, 7), minmax(0, 1fr)); padding-left: 32px; min-height: 0; touch-action: pan-y; }
.stunden { position: absolute; inset: 0 0 0 32px; pointer-events: none; }
.stunde { position: absolute; left: 0; right: 0; border-top: 1px solid var(--grau-4); }
.stunde span { position: absolute; right: calc(100% + 8px); top: -8px; font-size: 12px; line-height: 16px; color: var(--grau-9); }
.spalte { position: relative; border-left: 1px solid var(--grau-4); cursor: cell; }
.spalte:last-child { border-right: 1px solid var(--grau-4); }
.spalte.wochenende { background: color-mix(in srgb, var(--grau-3) 45%, transparent); }
.innen { position: absolute; inset: 0 2px 0 4px; }
.raster-text { grid-column: 1 / -1; align-self: center; justify-self: center; max-width: 40ch; padding: 16px; text-align: center; color: var(--grau-9); display: grid; gap: 12px; justify-items: center; }
.spaet { visibility: hidden; animation: zeigen 0s 300ms forwards; }
@keyframes zeigen { to { visibility: visible; } }
.start-fehler { visibility: hidden; animation: zeigen 0s 10s forwards; font-size: 12px; line-height: 16px; }
:root[data-gestartet] .start-fehler { display: none; }

/* Vorbei und zu kurzfristig: schraffiert, ohne Rand und ohne Wort — es ist keine Kachel, sondern Grund. Eigene Klasse,
   nicht „.vorbei": Die hieß zuerst so und zog das gleichnamige Legendenfeld (.lg-k.vorbei) als Fläche nach oben links. */
.schraffur-flaeche {
  position: absolute; left: -4px; right: -2px; top: 0; pointer-events: none;
  background: repeating-linear-gradient(135deg, var(--schraffur) 0 2px, transparent 2px 8px);
}
/* Kacheln: Container, die Beschriftung folgt der Größe (stundenplanner §3.2) */
.kachel { position: absolute; left: 0; right: 0; container: kachel / size; color: var(--grau-10); }
.k-flaeche {
  position: absolute; inset: 1px 0 0; display: flex; flex-direction: column; align-items: flex-start; overflow: hidden;
  padding: 4px 8px; border: 1px solid var(--grau-5); border-radius: 4px; background: var(--grau-1);
  font-size: 12px; line-height: 16px; text-align: left; width: 100%;
}
.k-flaeche > span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-1 { font-weight: 600; }
.k-2 { color: inherit; opacity: .9; }
/* belegt: eingelassen grau, das Wort in Zweittext — „ausgegraut", wie Silas es wollte */
.kachel.belegt { color: var(--grau-9); pointer-events: none; }
.belegt > .k-flaeche { background: var(--belegt); border-color: var(--belegt-rand); }
/* Deine Auswahl: wie der Vorschlag dort — Fläche, gestrichelter Rand in Tinte */
.kachel.auswahl { color: var(--m-tinte); z-index: 3; }
.auswahl > .k-flaeche { background: var(--m-flaeche); border-color: var(--m-flaeche); outline: 2px dashed var(--m-tinte); outline-offset: -2px; cursor: pointer; }
.auswahl > .k-flaeche:focus-visible { outline: 2px solid var(--grau-10); outline-offset: 4px; }
/* Gesendet: neutral, gestrichelt in Tinte; angenommen: gefüllt in Tinte (wie „eingeplant") */
.kachel.angefragt { z-index: 2; }
.angefragt > .k-flaeche { border-style: dashed; border-color: var(--grau-10); background: var(--grau-1); cursor: pointer; }
.kachel.angenommen { color: var(--grau-1); z-index: 2; }
.angenommen > .k-flaeche { background: var(--grau-10); border-color: var(--grau-10); cursor: pointer; }
/* Der Geist: wo ein Klick einen Vorschlag setzen würde (nur mit feinem Zeiger) */
.geist { position: absolute; left: 0; right: 0; pointer-events: none; border-radius: 4px; border: 1px dashed var(--grau-7); z-index: 1;
  display: flex; align-items: flex-start; padding: 2px 6px; font-size: 12px; line-height: 16px; color: var(--grau-9); }
@container kachel (max-height: 39.9px) { .k-2, .k-3 { display: none; } .k-flaeche { padding-block: 2px; } }
@container kachel (max-height: 23.9px) { .k-flaeche { flex-direction: row; gap: 6px; padding-block: 0; align-items: center; } }
@container kachel (max-width: 79.9px) { .k-2, .k-3 { display: none; } .k-flaeche { padding-inline: 4px; } }
@container kachel (max-width: 43.9px) { .k-flaeche > span { display: none; } }
/* „Jetzt": eine Linie in Tinte über dem heutigen Tag */
.jetzt { position: absolute; left: -4px; right: -2px; height: 0; border-top: 2px solid var(--grau-10); pointer-events: none; z-index: 4; }
.jetzt::before { content: ""; position: absolute; left: -4px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--grau-10); }

/* ── Legende und Fuß */
.legende { grid-area: legende; align-self: end; display: grid; gap: 8px; padding: 0 4px; font-size: 12px; line-height: 16px; color: var(--fuss-text); }
.lg-zustand { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
.lg-zustand > span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.lg-k { width: 14px; height: 10px; border-radius: 3px; border: 1px solid var(--grau-8); flex: none; }
.lg-k.frei { background: var(--grau-1); border-color: var(--grau-6); }
.lg-k.belegt { background: var(--belegt); border-color: var(--belegt-rand); }
.lg-k.vorbei { border-color: var(--grau-5); background: repeating-linear-gradient(135deg, var(--grau-6) 0 1px, transparent 1px 4px); }
.lg-k.auswahl { background: var(--m-flaeche); border: 1px dashed var(--m-tinte); }
.lg-k.angefragt { border-style: dashed; border-color: var(--grau-10); background: var(--grau-1); }
.lg-k.angenommen { background: var(--grau-10); border-color: var(--grau-10); }
.lg-k.abgelehnt { background: none; border-color: var(--grau-6); }

.fuss {
  flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 4px 24px;
  font-size: 12px; line-height: 16px;
}
.fuss-hinweis { max-width: 840px; color: var(--fuss-text); }
.fuss-mitte { justify-self: center; }
.fuss-links { justify-self: end; display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; color: var(--fuss-text); }
.fuss a, .fuss .leise { display: inline-flex; align-items: center; min-height: 24px; margin: -4px 0; padding: 0 4px; border-radius: 4px; }
@media (pointer: coarse) and (min-width: 768px) { .fuss-links { min-height: 44px; } .fuss a, .fuss .leise { min-height: 44px; margin: 0; } }

/* ── Schwebende Ebenen: Karte, Blatt, Meldung (stundenplanner §3.5) */
.hinter { position: fixed; inset: 0; z-index: 20; background: rgb(0 0 0 / .32); opacity: 0; transition: opacity 200ms var(--ein); }
.hinter.leer { background: none; }
.hinter.da { opacity: 1; }
.ebene {
  position: fixed; z-index: 21; width: 360px; max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px);
  display: flex; flex-direction: column; background: var(--ebene); border: 1px solid var(--rand-ebene); border-radius: 12px;
  box-shadow: var(--schatten); opacity: 0; transform: translateY(4px); transition: opacity 100ms var(--aus), transform 100ms var(--aus);
}
.ebene.da { opacity: 1; transform: none; transition-duration: 150ms; transition-timing-function: var(--ein); }
.ebene.dialog { inset: 0; margin: auto; width: min(560px, calc(100vw - 32px)); height: fit-content; }
.ebene.blatt { left: 0; right: 0; bottom: 0; top: auto; width: auto; max-width: none; max-height: 88dvh; border-radius: 12px 12px 0 0; transform: translateY(100%); transition-duration: 200ms; padding-bottom: env(safe-area-inset-bottom); }
.ebene.blatt.da { transform: none; transition-duration: 250ms; }
.e-kopf { display: flex; align-items: flex-start; gap: 8px; padding: 8px 8px 0 16px; }
.e-titel { flex: 1; padding-top: 4px; font-size: 16px; line-height: 24px; font-weight: 600; }
.e-zu { flex: none; width: var(--ziel); height: var(--ziel); display: grid; place-items: center; border-radius: 8px; }
.e-inhalt { padding: 4px 16px 16px; overflow: auto; overscroll-behavior: contain; display: grid; gap: 12px; }
.e-inhalt.lesen { max-width: 66ch; font-size: 16px; line-height: 24px; }
.e-aktionen { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.blatt .e-aktionen .knopf { flex: 1 1 0; height: 48px; }
.klein { font-size: 12px; line-height: 16px; color: var(--grau-9); }
.signal { padding: 8px 12px; border-radius: 8px; display: flex; gap: 8px; align-items: flex-start; }
.signal .i { margin-top: 2px; }
.signal.rot { background: var(--konflikt-flaeche); color: var(--konflikt-text); }
.signal.rot .i { color: var(--konflikt); }
.signal.gelb { background: var(--hinweis-flaeche); color: var(--hinweis-text); }

/* Das Formular */
.feldgruppe { display: grid; gap: 4px; }
.feldgruppe > label, .z-feld > label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-weight: 600; font-size: 12px; line-height: 16px; }
.feldgruppe .frei-feld { font-weight: 400; color: var(--grau-9); }
.feld { width: 100%; min-height: var(--ziel); padding: 0 8px; border: 1px solid var(--grau-7); border-radius: 8px; background: var(--grau-1); }
textarea.feld { padding: 6px 8px; min-height: 72px; resize: vertical; line-height: 20px; }
.feld[aria-invalid="true"] { border-color: var(--konflikt); outline: 1px solid var(--konflikt); }
.zeitraum { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: end; }
.z-feld { display: grid; gap: 4px; min-width: 0; }
.wahl { position: relative; display: flex; align-items: center; }
.wahl select { appearance: none; -webkit-appearance: none; width: 100%; height: var(--ziel); padding: 0 28px 0 8px; border: 1px solid var(--grau-7); border-radius: 8px; background: var(--grau-1); cursor: pointer; }
.wahl .i { position: absolute; right: 6px; pointer-events: none; color: var(--grau-8); }
.dauer { grid-column: 1 / -1; font-size: 12px; line-height: 16px; color: var(--grau-9); }
.ts { min-height: 0; }
.ts:not(:empty) { min-height: 65px; }
@media (pointer: coarse) { .feld, .wahl select { font-size: 16px; } }
.erfolg { display: grid; gap: 12px; justify-items: start; }
.erfolg .zeile { display: flex; gap: 8px; align-items: flex-start; }
.erfolg .zeile .i { margin-top: 2px; }

.meldung {
  position: fixed; left: 50%; bottom: 64px; z-index: 30; max-width: calc(100vw - 32px); padding: 12px 16px; border-radius: 8px;
  background: var(--grau-10); color: var(--grau-1); box-shadow: var(--schatten); pointer-events: none;
  opacity: 0; transform: translate(-50%, 4px); transition: opacity 100ms var(--aus), transform 100ms var(--aus);
}
.meldung.da { opacity: 1; transform: translate(-50%, 0); transition-duration: 150ms; transition-timing-function: var(--ein); }
.ohne-js { position: fixed; inset: auto 16px 16px; padding: 12px; border-radius: 8px; background: var(--hinweis-flaeche); color: var(--hinweis-text); }
@media (prefers-reduced-motion: reduce) {
  .ebene, .ebene.blatt, .meldung, .hinter { transform: none !important; transition: opacity 100ms linear !important; }
  .meldung, .meldung.da { transform: translateX(-50%) !important; }
}

/* ── Tablet, unter 1024 px: Monat und Vorschläge nebeneinander über der Woche */
@media (max-width: 1023.98px) {
  .mitte { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(auto, 1fr) auto; grid-template-areas: "module" "buehne" "legende"; }
  .module { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); align-items: start; }
  .legende { align-self: start; }
  .lg-zustand { display: flex; flex-wrap: wrap; gap: 8px 16px; }
  .kopf { height: auto; grid-template-areas: ". name rechts" "sg sg sg"; row-gap: 8px; }
  .lage { flex-basis: 100%; }
  .umschalter { margin-left: auto; }
}

/* ── Handy, unter 768 px (stundenplanner V-0225/V-0247): die Woche auf einem Schirm über dem schwebenden Umschalter,
   darunter Monat, Vorschläge, Legende und mit Abstand der Fuß. */
@media (max-width: 767.98px) {
  :root {
    --rand-x: 16px;
    --schalter: 52px;
    --schalter-zone: calc(16px + var(--schalter) + 8px + env(safe-area-inset-bottom, 0px));
  }
  .seite { height: auto; min-height: 100vh; gap: 0; padding: 12px var(--rand-x) calc(var(--schalter-zone) + 16px); }
  .kopf { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name rechts" "sg sg"; gap: 12px 8px; }
  .name { justify-content: flex-start; }
  .wortmarke { height: 15px; }
  .kopf .knopf { width: var(--ziel); padding: 0; }
  .kopf .knopf .t-kurz { display: none; }
  .sg-reiter { padding-inline: 0; border-radius: 0; }
  .mitte { flex: none; display: flex; flex-direction: column; gap: 0; margin-top: 16px; }
  .buehne { order: 1; flex: none; gap: 8px; min-height: calc(100vh - var(--schalter-zone) - 8px); min-height: calc(100svh - var(--schalter-zone) - 8px); }
  .module { order: 2; margin-top: 32px; grid-template-columns: minmax(0, 1fr); }
  .legende { order: 3; margin-top: 24px; }
  .werkzeug { min-height: 0; }
  .l-text { display: grid; }
  .l-titel { font-size: 16px; line-height: 24px; }
  .steuer { flex: 1 1 100%; }
  .w-gruppe { width: 100%; }
  .w-gruppe #heute { flex: 1 1 auto; }
  .raster { flex: 1 1 auto; grid-template-rows: 44px minmax(0, 1fr); row-gap: 8px; min-height: calc(52px + var(--stunden, 15) * var(--h-min)); }
  .ein-tag .tage { grid-column: 1 / -1; padding: 0; }
  .ein-tag .tag { border-radius: 8px; }
  .tag { flex-direction: column; gap: 0; line-height: 16px; }
  .umschalter {
    position: fixed; z-index: 15; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
    border: 1px solid var(--rand-ebene); box-shadow: var(--schatten); margin: 0;
  }
  .umschalter .seg { padding: 0 16px; }
  .fuss { margin-top: 48px; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 8px; text-align: center; }
  .fuss-links { justify-self: center; justify-content: center; }
  .fuss a, .fuss .leise { min-height: 44px; min-width: 44px; margin: 0; justify-content: center; }
  .meldung { bottom: calc(var(--schalter-zone) + 8px); }
  .zeitraum { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .z-tag { grid-column: 1 / -1; }
}

/* Datenschutz: eine ruhige Lesespalte */
.recht { max-width: 66ch; margin: 0 auto; padding: 48px var(--rand-x) 64px; font-size: 16px; line-height: 24px; display: grid; gap: 16px; }
.recht h1 { font-size: 16px; line-height: 24px; margin: 0; }
.recht h2 { font-size: 14px; line-height: 20px; margin-top: 8px; }
.recht .zurueck { justify-self: start; }