/* ============================================================
   KulturKalender — Editorial Luxury
   Warme Creme-Flächen, Espresso-Tinte, gedämpftes Fichten-Grün.
   Serifen-Headlines (Fraunces) + Plus Jakarta Sans. Filmkorn.
   Funktionale Selektoren (States, JS-Hooks) sind unverändert.
   ============================================================ */

@font-face {
  font-family: 'Fraunces';
  src: url('/static/fonts/fraunces-latin.woff2') format('woff2');
  font-weight: 300 900;
  font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/static/fonts/pjs-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}

:root {
  /* Farbwelt: Editorial Luxury */
  --bg: #f5f1e8;
  --surface: #fdfcf8;
  --surface-2: #f8f5ee;
  --ink: #241e18;
  --text: #2b241d;
  --text-muted: #7d7367;
  --line: rgb(36 30 24 / .09);
  --line-strong: rgb(36 30 24 / .16);

  --primary: #2b6249;
  --primary-dark: #1e4b36;
  --primary-soft: #e4ede2;
  --accent: #b98a2f;                     /* Fokus-Ring, warmes Ocker */

  /* Status: getonte, entsättigte Familien */
  --c-free: #e7efe3;  --c-free-border: #5d8560;  --c-free-text: #2c4a30;
  --c-sel:  #dcebda;  --c-sel-border:  #2b6249;  --c-sel-text:  #1e4b36;
  --c-res:  #f4e9d4;  --c-res-border:  #a97e2f;  --c-res-text:  #6d4e14;
  --c-part: #f6e7d8;  --c-part-border: #b3703c;
  --c-busy: #eceae4;  --c-busy-border: #a8a294;  --c-busy-text: #6b6558;
  --c-block:#e0ded8;  --c-block-border: #7c766a;
  --c-hol:  #f3ddd8;  --c-hol-border:  #a4483c;  --c-hol-text:  #6d2c24;
  --c-fer:  #e9e2f2;  --c-fer-border:  #6f5a96;  --c-fer-text:  #463567;

  /* Form */
  --radius: 1.55rem;
  --radius-s: .85rem;
  --radius-bezel: 6px;

  /* Weiche, stark diffundierte Ambient-Schatten */
  --shadow: 0 1px 2px rgb(36 30 24 / .05), 0 22px 48px -26px rgb(36 30 24 / .3);
  --shadow-hover: 0 2px 4px rgb(36 30 24 / .06), 0 28px 56px -26px rgb(36 30 24 / .34);

  --ease: cubic-bezier(.32, .72, 0, 1);
  --font-serif: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font-sans); color: var(--text);
  background:
    radial-gradient(900px 420px at 85% -120px, rgb(43 98 73 / .07), transparent 70%),
    radial-gradient(700px 380px at -10% 8%, rgb(185 138 47 / .05), transparent 65%),
    var(--bg);
  line-height: 1.6; font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
/* Filmkorn: fixe Ebene, nie auf scrollenden Containern */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.8'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'%20opacity='0.05'/%3E%3C/svg%3E");
}
::selection { background: rgb(43 98 73 / .2); }
a { color: var(--primary-dark); text-underline-offset: 3px; }

h1, h2 { font-family: var(--font-serif); font-weight: 560; color: var(--ink); }
h1 { font-size: clamp(1.9rem, 3.6vw, 2.5rem); letter-spacing: -.022em; line-height: 1.12; margin: .3rem 0 .55rem; }
h2 { font-size: 1.3rem; letter-spacing: -.012em; line-height: 1.2; margin: .2rem 0 .65rem; }
main { max-width: 62rem; margin: 0 auto; padding: 1.25rem 1rem 3.5rem; }

/* Kopfzeile: schwebende Glas-Insel, kein kante-zu-kante-Balken */
.topbar {
  position: sticky; top: .8rem; z-index: 100;
  display: flex; flex-wrap: wrap; gap: .35rem .9rem; justify-content: space-between;
  align-items: center; max-width: 62rem; margin: 1rem auto .35rem;
  padding: .55rem .9rem .55rem 1.3rem; border-radius: 999px;
  color: var(--ink);
  background: rgb(253 252 248 / .72);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 0 0 1px var(--line), 0 14px 34px -18px rgb(36 30 24 / .4);
}
.topbar a, .topbar .link {
  color: var(--text); text-decoration: none; margin-inline-start: .85rem;
  opacity: .78; font-weight: 600; font-size: .92rem;
  transition: opacity .25s var(--ease);
}
.topbar a:hover, .topbar .link:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.brand { display: inline-flex; align-items: center; }
.brand-logo { height: 2.2rem; width: auto; display: block; }
button.link { background: none; border: 0; cursor: pointer; font: inherit; padding: 0; }
.footer { text-align: center; font-size: .85rem; padding: 2.5rem 1.5rem 3rem; color: var(--text-muted); }
.muted { color: var(--text-muted); }
.inline { display: inline; }

/* Mini-Auge: Mikro-Badge vor großen Überschriften */
.eyebrow {
  display: inline-block; margin: 0 0 .6rem; padding: .3rem .8rem; border-radius: 999px;
  border: 1px solid var(--line-strong); font-size: .66rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted);
  background: rgb(255 255 255 / .55);
}
.eyebrow-light { color: rgb(255 255 255 / .85); border-color: rgb(255 255 255 / .32); background: rgb(255 255 255 / .09); }

/* Inline-Aktionen im Fließtext (Zusammenfassung: Text kopieren / Seite drucken) */
.text-link { background: none; border: 0; cursor: pointer; font: inherit; padding: 0;
             color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.text-link:hover { text-decoration-thickness: 2px; }
.text-link:disabled { cursor: default; opacity: .7; }

/* Hero: dunkle Fichten-Platte im Doppelrand */
.hero {
  border: var(--radius-bezel) solid transparent; border-radius: calc(var(--radius) + .3rem);
  background:
    linear-gradient(150deg, #2d5f47, #1d4232 58%, #173527) padding-box,
    linear-gradient(155deg, rgb(255 255 255 / .22), rgb(255 255 255 / .05) 55%, rgb(255 255 255 / .12)) border-box;
  color: #f6f4ec; padding: 1.7rem 1.9rem; margin-bottom: 1.2rem;
  box-shadow: inset 0 1px 1px rgb(255 255 255 / .16), 0 26px 52px -28px rgb(23 53 39 / .65);
}
.hero h1 { color: #fdfcf8; margin: 0 0 .3rem; }
.hero-sub { margin: .35rem 0 0; color: rgb(255 255 255 / .88); max-width: 46ch; }
.hero-meta { margin: .75rem 0 0; font-size: .9rem; color: rgb(255 255 255 / .72);
             border-top: 1px solid rgb(255 255 255 / .16); padding-top: .75rem; }
.hero a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* Karten: Doppelrand — Furnier-Shell + heller Kern */
.card {
  border: var(--radius-bezel) solid transparent; border-radius: calc(var(--radius) + var(--radius-bezel));
  background:
    linear-gradient(180deg, #fefdfb, #fbf8f2) padding-box,
    linear-gradient(160deg, rgb(36 30 24 / .1), rgb(36 30 24 / .03) 50%, rgb(36 30 24 / .08)) border-box;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .8), var(--shadow);
  padding: 1.5rem 1.6rem; margin-bottom: 1.1rem;
}
.detail-header { display: flex; justify-content: space-between; align-items: start; gap: 1rem; margin-bottom: 1rem; }
.detail-header-actions { position: relative; flex-shrink: 0; }
/* Bestätigungs-Popup (z. B. Übersicht endgültig löschen) */
.popover-card { position: absolute; inset-inline-end: 0; top: calc(100% + .5rem); z-index: 10;
                width: max-content; max-width: min(22rem, calc(100vw - 2rem)); margin-bottom: 0; }
.action-btns { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; }

/* Sammel-Storno auf der Buchungsliste */
.bulk-head { display: inline-flex; align-items: center; gap: .4rem; font-weight: 500; }
.bulk-bar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: .8rem; }
.bulk-bar input[name="cancel_note"] { flex: 1 1 16rem; }
.bulk-count { font-weight: 500; }
.bulk-hint { flex-basis: 100%; margin: 0; }
/* Aufklappbare Aktionen als Button (details > summary.btn) */
details.btn-disclosure { margin: .5rem 0; }
details.btn-disclosure > summary.btn { margin-bottom: .5rem; }
.adjacent-form { margin-top: .7rem; }
.btn-icon { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: .4rem .6rem; }
.btn-icon-text { display: inline-flex; align-items: center; gap: .5rem; }
.ic { width: 1.15em; height: 1.15em; flex: none; }
.grid { display: grid; gap: 0 1.4rem; }
@media (min-width: 48rem) { .grid-2 { grid-template-columns: 1fr 1fr; } }

/* Buttons: Pills mit Druck-Physik */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
  min-height: 45px; padding: .6rem 1.25rem; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--text);
  font-weight: 650; font-size: .94rem; cursor: pointer; text-decoration: none; text-align: center;
  letter-spacing: .005em;
  box-shadow: 0 1px 2px rgb(36 30 24 / .05);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease),
              background-color .2s ease, border-color .2s ease, opacity .2s ease;
}
.btn:hover:not(:disabled) { transform: translateY(-1px);
  box-shadow: 0 2px 4px rgb(36 30 24 / .06), 0 16px 30px -16px rgb(36 30 24 / .38); }
.btn:active:not(:disabled) { transform: translateY(0) scale(.975); transition-duration: .18s; }
.btn-primary {
  background: linear-gradient(180deg, #31704F, #24543D); border-color: transparent; color: #f4f6f0;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), 0 12px 26px -14px rgb(30 75 54 / .6);
}
.btn-primary:hover:not(:disabled) {
  background: linear-gradient(180deg, #367A57, #2b6249); color: #fff;
}
.btn-danger {
  background: linear-gradient(180deg, #b23a2c, #9c2f22); border-color: transparent; color: #fdf3f0;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), 0 12px 26px -14px rgb(156 47 34 / .55);
}
.btn-danger:hover:not(:disabled) { background: linear-gradient(180deg, #bc4031, #a83427); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
/* Button-im-Button: Pfeil sitzt in eigener Kreisebene */
.btn-orb {
  display: inline-grid; place-items: center; width: 1.65rem; height: 1.65rem;
  margin-right: -.55rem; margin-left: .5rem; border-radius: 999px; flex: none;
  background: rgb(255 255 255 / .16); font-size: .95em;
  transition: transform .45s var(--ease), background-color .2s ease;
}
.btn:hover .btn-orb { transform: translateX(2px) scale(1.06); background: rgb(255 255 255 / .26); }
.btn:not(.btn-primary):not(.btn-danger) .btn-orb { background: rgb(36 30 24 / .06); }
.btn:not(.btn-primary):not(.btn-danger):hover .btn-orb { background: rgb(36 30 24 / .1); }
.book-actions { display: flex; gap: .8rem; align-items: center; }

/* Overlay: milchige Bühne, Box fährt weich ein */
.overlay { position: fixed; inset: 0; background: rgb(26 21 16 / .48);
           backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
           display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 1rem; }
.overlay-box {
  border: var(--radius-bezel) solid transparent; border-radius: calc(var(--radius) + var(--radius-bezel));
  background:
    linear-gradient(180deg, #fefdfb, #faf7f0) padding-box,
    linear-gradient(160deg, rgb(36 30 24 / .12), rgb(36 30 24 / .04)) border-box;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .85), 0 32px 70px -28px rgb(0 0 0 / .45);
  padding: 1.7rem 1.9rem; max-width: 360px; text-align: center;
  animation: overlayIn .55s var(--ease);
}
@keyframes overlayIn {
  from { opacity: 0; transform: translateY(14px) scale(.965); }
  to   { opacity: 1; transform: none; }
}
.overlay-box p { font-size: 1.05rem; margin-bottom: 1.2rem; }
.overlay-actions { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; }
@media (max-width: 480px) {
  .overlay-box { padding: 1.25rem 1.3rem; max-width: 94vw; }
  .overlay-actions .btn { flex: 1 1 auto; min-height: 48px; }
}

/* Fehlerseite (404 etc.) */
.error-card { max-width: 34rem; margin: 3.5rem auto; text-align: center; padding: 3rem 2.2rem; }
.error-icon { color: var(--primary); margin-bottom: .9rem; }
.error-icon .ic { width: 3rem; height: 3rem; }
.error-card h1 { margin-top: 0; }

/* Angaben-Karte: Highlight-Animation bei Schulbestätigung */
.card.is-committing { animation: cardPop .45s var(--ease); }
@keyframes cardPop { 0% { transform: scale(1); } 40% { transform: scale(1.015); }
                     100% { transform: scale(1); } }
.card.is-hidden { max-height: 0; opacity: 0; overflow: hidden; padding: 0; margin: 0;
                  border: 0; pointer-events: none; transition: max-height .4s ease, opacity .3s ease, padding .3s ease; }
.card.is-hidden h2 { margin: 0; }

/* Terminauswahl: blur bis Schule gewählt */
.termine-section { transition: opacity .45s ease, filter .45s ease, transform .45s ease; }
.termine-section.is-locked {
  filter: blur(5px); opacity: .35; pointer-events: none; user-select: none;
  transform: translateY(6px);
}
.termine-section.is-locked .week-btn, .termine-section.is-locked .btn-week,
.termine-section.is-locked input[name="days"], .termine-section.is-locked select[data-role] { pointer-events: none; }
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
button:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* Formulare */
label { display: block; font-weight: 600; margin: .8rem 0 .3rem; letter-spacing: .002em; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=datetime-local], input[type=time], select, textarea {
  width: 100%; padding: .62rem .8rem; border: 1px solid var(--line-strong); border-radius: var(--radius-s);
  font: inherit; background: #fefdfb; color: var(--text);
  box-shadow: inset 0 1px 2px rgb(36 30 24 / .04);
  transition: border-color .2s ease, box-shadow .3s var(--ease);
}
input:focus, select:focus, textarea:focus { border-color: var(--primary); outline: none;
  box-shadow: 0 0 0 4px rgb(43 98 73 / .13); }
fieldset {
  border: 1px solid var(--line); border-radius: 1.1rem; margin: 1.1rem 0; padding: .8rem 1.05rem;
  background: rgb(255 255 255 / .42);
}
legend { font-weight: 700; padding: 0 .4rem; font-size: .8rem; letter-spacing: .12em;
         text-transform: uppercase; color: var(--text-muted); }
.check { display: flex; align-items: center; gap: .55rem; min-height: 44px; font-weight: 500; }
.check input { width: 1.3rem; height: 1.3rem; accent-color: var(--primary); }

/* Formular-Flow */
.form-flow { display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; align-items: end; }
.form-step { display: flex; flex-direction: column; gap: .25rem; }
.form-step-label { font-weight: 600; font-size: .85rem; color: var(--text-muted); }
.form-step select { min-width: 10rem; }

/* Schmale zentrierte Karte (Anmeldung) */
.auth-card { max-width: 26rem; margin: 2.75rem auto; }
.auth-title { margin: .2rem 0 .7rem; }
.auth-title img { height: 4.5rem; width: auto; display: block; }

/* Züge-pro-Klasse-Zeile (Schulverwaltung, Übersicht bearbeiten) */
.gtc-row { display: flex; align-items: center; gap: .5rem; margin: .3rem 0; }
.gtc-row .gtc-label { min-width: 4.5rem; font-weight: 600; }
.gtc-row input[type=number] { width: 4.5rem; padding: .3rem .4rem; }

/* Klassen & Zug-Anzahl (öffentlich): Label links, Steuerung rechtsbündig */
.tracks-header { display: flex; align-items: baseline; justify-content: space-between;
                 gap: 1rem; padding: 0 .8rem .4rem; color: var(--text-muted);
                 font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.tracks-header-zuege { width: 7.9rem; text-align: center; flex: none; }
.tracks-row { display: flex; align-items: center; justify-content: space-between;
              gap: 1rem; padding: .55rem .8rem; border: 1px solid var(--line);
              border-radius: var(--radius-s); background: rgb(255 255 255 / .55); }
.tracks-row label { font-weight: 600; margin: 0; }
.tracks-controls { display: flex; align-items: center; gap: .5rem; flex: none; }
.tracks-btn { min-width: 0; min-height: 0; width: 2.15rem; height: 2.15rem; padding: 0;
              font-size: 1.2rem; font-weight: 700; line-height: 1; color: var(--text);
              border: 1px solid var(--line-strong); border-radius: 999px;
              background: var(--surface); cursor: pointer;
              display: inline-flex; align-items: center; justify-content: center;
              transition: background-color .2s ease, border-color .2s ease, transform .3s var(--ease); }
.tracks-btn:hover { background: var(--primary-soft); border-color: rgb(43 98 73 / .5);
                    box-shadow: 0 1px 2px rgb(36 30 24 / .05); }
.tracks-btn:active { transform: scale(.94); }
.tracks-count { min-width: 2.6rem; text-align: center; flex: none;
                font-family: var(--font-serif); font-size: 1.35rem; font-weight: 620;
                letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--ink); }
.tracks-note { font-size: .9rem; }

/* Auswahl-Chips (Klassenstufen) */
.chips { display: flex; flex-wrap: wrap; gap: .55rem; padding: .25rem 0; }
.chip {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; font-weight: 600;
  border: 1px solid var(--line-strong); border-radius: 999px; padding: .35rem .95rem;
  cursor: pointer; background: var(--surface);
  box-shadow: 0 1px 2px rgb(36 30 24 / .04);
  transition: background-color .2s ease, border-color .2s ease, box-shadow .3s var(--ease);
}
.chip:has(input:checked) { background: var(--primary-soft); border-color: var(--primary);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .6), 0 0 0 1px rgb(43 98 73 / .25); }
.chip input { accent-color: var(--primary); width: 1.2rem; height: 1.2rem; }

/* Pro Schule freigegebene Klassen (Terminübersicht anlegen/bearbeiten):
   ohne angehakte Schule ausgegraut und deaktiviert */
.school-block { border-left: 3px solid var(--line); padding: .15rem 0 .15rem .9rem; margin: .35rem 0; }
.school-block:has(.school-grades:not(.is-off)) { border-left-color: var(--primary-soft); }
.school-grades { margin: .2rem 0 .5rem; display: grid; gap: .15rem;
                 transition: opacity .25s var(--ease); }
.school-grades.is-off { opacity: .45; }
.school-grades.is-off .chip { cursor: not-allowed; }
.school-grades .chip input:disabled { cursor: not-allowed; }
.school-grades .chips { padding-top: .1rem; }

/* Hinweise */
.error, .warn { border-radius: var(--radius-s); padding: .85rem 1.1rem; margin: 1rem 0; font-weight: 600; }
.error { background: #f6dedb; border: 1px solid rgb(164 72 60 / .5); color: #6d2c24; }
.warn { background: #f6ecd7; border: 1px solid rgb(169 126 47 / .55); color: #63491a; }
.success { background: #e2eedd; border: 1px solid rgb(93 133 96 / .55); color: #2c4a30;
           padding: .85rem 1.1rem; border-radius: var(--radius-s); margin: 1rem 0; font-weight: 600; }
.flash-ok { background: #e2eedd; border: 1px solid rgb(93 133 96 / .55); color: #2c4a30;
            border-radius: var(--radius-s); padding: .85rem 1.1rem; margin: 1rem 0; font-weight: 600; }

/* Status-Badges */
.badge {
  display: inline-block; padding: .2rem .65rem; border-radius: 999px;
  border: 1px solid; font-size: .78rem; font-weight: 700; white-space: nowrap; letter-spacing: .01em;
}
.badge-frei { background: var(--c-free); border-color: var(--c-free-border); color: var(--c-free-text); }
.badge-vorgemerkt { background: var(--c-res); border-color: var(--c-res-border); color: var(--c-res-text); }
.badge-teilweise { background: var(--c-part); border-color: var(--c-part-border); color: #7c4a1e; }
.badge-belegt { background: var(--c-busy); border-color: var(--c-busy-border); color: var(--c-busy-text); }
.badge-gesperrt { background: var(--c-block); border-color: var(--c-block-border); color: #4a4438; }
.badge-korrigiert { background: #f6ecd7; border: 1px solid rgb(169 126 47 / .6); color: #6d4e14; font-size: .76rem; }
.badge-feiertag { background: var(--c-hol); border-color: var(--c-hol-border); color: var(--c-hol-text); }
.badge-ferien { background: var(--c-fer); border-color: var(--c-fer-border); color: var(--c-fer-text); }
.badge-abgelaufen { background: #edeae2; border-color: rgb(36 30 24 / .18); color: var(--text-muted); }
.badge-ausgewaehlt { background: var(--c-sel); border-color: var(--c-sel-border); color: var(--c-sel-text); }
.badge-kw { background: #eae4f4; border-color: #6f5a96; color: #463567; }

/* Wochen */
.week { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
        box-shadow: var(--shadow); margin-bottom: 1rem; overflow: hidden; position: relative;
        max-width: 100%; transition: border-color .2s ease, box-shadow .35s var(--ease); }
.week-active { border-color: rgb(43 98 73 / .6); box-shadow: 0 0 0 3px rgb(43 98 73 / .12), var(--shadow); }
.week-active .week-head { background: var(--primary-soft); border-bottom-color: rgb(43 98 73 / .25); }
.week-partial { border-color: rgb(93 133 96 / .55); }
.week-partial .week-head { background: #eef3e9; border-bottom-color: rgb(93 133 96 / .3); }
.week-deleting { border-color: rgb(164 72 60 / .7); }
.week-deleting .week-head { background: #f7e6e2; border-bottom-color: rgb(164 72 60 / .3); }
.week-head { display: flex; flex-wrap: wrap; gap: .5rem 1rem; justify-content: space-between;
             align-items: center; padding: .9rem 1.25rem; background: linear-gradient(180deg, rgb(36 30 24 / .032), rgb(36 30 24 / .012));
             border-bottom: 1px solid var(--line); transition: background .2s ease; }
.week-title { font-family: var(--font-serif); font-weight: 620; font-size: 1.12rem; letter-spacing: -.01em; }
.week-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.btn-week { border-color: rgb(43 98 73 / .55); color: var(--primary-dark); font-weight: 700; background: rgb(255 255 255 / .7); }
.btn-week:hover:not(:disabled) { background: var(--primary-soft); }
.week-days { list-style: none; margin: 0; padding: .3rem 1.25rem .95rem; }
.week-days li { display: flex; justify-content: space-between; align-items: center;
                gap: .75rem; padding: .5rem 0; border-top: 1px dashed var(--line); }
.day-label { flex: 1; }
.day-check { display: flex; align-items: center; gap: .55rem; min-height: 44px; font-weight: 500; }
.day-check input { width: 1.3rem; height: 1.3rem; accent-color: var(--primary); }

/* Karten-Unlock („Wählen") + 2.-Klasse-Zeile */
.week-actions .btn-week { min-height: 34px; padding: .25rem 1rem; }
.week-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; min-height: 34px; padding: 0;
  border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface);
  font: inherit; font-size: 1.05rem; font-weight: 700; line-height: 1; cursor: pointer;
  color: var(--text); transition: background-color .2s ease, border-color .2s ease, transform .3s var(--ease);
}
.week-icon-btn:hover { background: var(--primary-soft); border-color: rgb(43 98 73 / .55); }
.week-icon-btn.icon-danger:hover { background: #f6dedb; border-color: rgb(164 72 60 / .7); }
.week-icon-btn .ic { width: .95rem; height: .95rem; }
.week-icon-btn[hidden], .grade2-row[hidden] { display: none !important; }

/* Wochen-Karte: gesperrt bis „Wählen" geklickt */
.week-locked .cal-grid, .week-locked .week-days, .week-locked .week-assign { pointer-events: none; }
.week-locked .week-assign { display: none; }
.week-locked .cal-grid, .week-locked .week-days { opacity: .55; }
.week-locked [data-role="reset-week"] { display: none; }
.week-locked [data-role="choose-week"] { display: inline-flex; }
.week:not(.week-locked) [data-role="choose-week"] { display: none; }
.week:not(.week-locked) [data-role="reset-week"] { display: inline-flex; }
/* Mehrklassen-Woche: Tage erst klickbar nach Wahl der 1. Klasse */
.week-awaits-grade .cal-grid, .week-awaits-grade .week-days { pointer-events: none; opacity: .55; }

/* Kalender-Ansicht */
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .4rem; padding: .9rem 1.25rem 1.15rem; overflow: hidden; }
.cal-grid .dow { font-weight: 700; text-align: center; font-size: .68rem; letter-spacing: .1em;
                 text-transform: uppercase; color: var(--text-muted); }
.day-cell { border: 1px solid var(--line); border-radius: var(--radius-s); min-height: 72px;
            padding: .35rem; font-size: .85rem; text-align: center; display: flex;
            flex-direction: column; justify-content: center; gap: .15rem; background: #fff;
            transition: border-color .2s ease, box-shadow .3s var(--ease); }
.day-cell.empty { border: 0; background: transparent; }
.day-cell .day-num { font-weight: 750; font-size: 1rem; font-family: var(--font-serif); letter-spacing: -.01em; }
.day-cell .day-state { font-size: .76rem; font-weight: 600; color: var(--text-muted);
                       white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.day-pick { position: relative; display: flex; flex-direction: column; align-items: center; gap: .15rem;
            cursor: pointer; min-height: 64px; justify-content: center; padding: .2rem; width: 100%; }
.day-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; } /* visuell: Zelle selbst ist toggler */
.day-pick input:focus-visible ~ .day-num { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.cell-frei { background: var(--c-free); border-color: rgb(93 133 96 / .55); }
.cell-frei:hover { border-color: var(--primary); cursor: pointer;
                   box-shadow: 0 6px 16px -8px rgb(43 98 73 / .5); }
.cell-ausgewaehlt { background: var(--c-sel); border-color: var(--c-sel-border); animation: cellPop .32s var(--ease); }
@keyframes cellPop { from { transform: scale(.965); } to { transform: scale(1); } }
.cell-ausgewaehlt .day-state { color: var(--c-sel-text); font-weight: 800; }
.cell-vorgemerkt { background: var(--c-res); border-color: var(--c-res-border); }
.cell-belegt { background: var(--c-busy); border-color: var(--c-busy-border); color: var(--c-busy-text); }
.cell-gesperrt { background: var(--c-block); border-color: var(--c-block-border); }
.cell-abgelaufen { background: #edeae2; border-color: rgb(36 30 24 / .08); color: #9a9284; }

/* Klassen-Farben: --gc-soft (Fläche) und --gc-solid (Rahmen) werden pro Element
   inline gesetzt (Index der Klasse in der Übersicht). Bei zwei Klassen teilt eine
   schmale weiße Diagonale die Karte in zwei Hälften (--gc2-soft = Farbe Klasse 2). */
.week-grade-solid { background: var(--gc-soft) !important; border-color: var(--gc-solid) !important; }
.week-grade-solid .week-head { background: var(--gc-soft); border-bottom-color: var(--gc-solid); }
.week-grade-multi {
  background-image: linear-gradient(135deg,
    var(--gc-soft, #eef0ea) 0 calc(50% - 3px),
    #fff calc(50% - 3px) calc(50% + 3px),
    var(--gc2-soft, #f5f4ef) calc(50% + 3px) 100%) !important;
  border-color: var(--gc-solid) !important;
}
.week-grade-multi .week-head {
  background: transparent;
  border-bottom-color: var(--gc-solid);
}
.cell-grade { background: var(--gc-soft, var(--c-sel)); border-color: var(--gc-solid, var(--c-sel-border)); }
.cell-grade .day-state { color: var(--c-sel-text); font-weight: 800; }
.cell-grade-multi {
  background-color: #fff;
  background-image: linear-gradient(135deg,
    var(--gc-soft, #eef0ea) 0 calc(50% - 2px),
    #fff calc(50% - 2px) calc(50% + 2px),
    var(--gc2-soft, #f5f4ef) calc(50% + 2px) 100%);
  border-color: var(--gc-solid, var(--c-sel-border));
}
.cell-grade-multi .day-state { color: var(--c-sel-text); font-weight: 800; }
.chip-grade:has(input:checked) { background: var(--gc-soft, var(--primary-soft)); border-color: var(--gc-solid, var(--primary)); }
.badge-assign { background: #fff; border-color: var(--gc-solid, var(--line-strong)); color: var(--text); font-weight: 700; }

/* Klassen-Zuweisung innerhalb einer Wochen-Karte (erst nach „Wählen" sichtbar) */
.week-assign { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem;
               padding: .7rem 1.25rem; border-bottom: 1px dashed var(--line); background: rgb(255 255 255 / .55); }
.week-assign select { font-size: .85rem; padding: .3rem .5rem; max-width: 16rem; }
.grade2-row { display: flex; align-items: center; gap: .4rem; }
.grade2-row select { font-size: .85rem; padding: .3rem .5rem; max-width: 16rem; }
.grade-select { font-size: .75rem; padding: .15rem .4rem; border-radius: 999px; border: 1px solid var(--line-strong); background: #fff; cursor: pointer; }

/* Klassen-Mini-Dropdown pro Tag (Wochen-Karte) */
.day-grade-slot { display: block; width: 100%; padding: 0 .15rem .2rem; }
.day-cell .grade-select { width: 94%; font-size: .6rem; padding: 0 .15rem; border-radius: .4rem;
                          border-width: 1px; min-height: 1.25rem; }
.day-grade-label { display: block; font-size: .6rem; font-weight: 800; color: var(--gc-solid, var(--c-sel-text)); }

/* Einklappbare Formblöcke (Admin) */
details.form-collapse { border: 1px solid var(--line); border-radius: 1.1rem;
                        padding: .6rem 1rem; margin: .9rem 0; background: rgb(255 255 255 / .5); }
details.form-collapse > summary { font-weight: 650; cursor: pointer; list-style: none;
                                  display: flex; align-items: center; gap: .45rem;
                                  transition: color .2s ease; }
details.form-collapse > summary::-webkit-details-marker { display: none; }
details.form-collapse > summary::before {
  content: "›"; display: inline-block; color: var(--text-muted); font-weight: 700;
  transition: transform .35s var(--ease);
}
details.form-collapse[open] > summary::before { transform: rotate(90deg); }
details.card > summary { cursor: pointer; }
details > summary > h2 { display: inline; margin: 0; }

/* Ansichtsumschalter */
.viewbar { display: flex; flex-wrap: wrap; gap: .6rem 1rem; justify-content: space-between;
           align-items: center; margin: 1.1rem 0 .45rem; }
.view-toggle { display: inline-flex; background: rgb(36 30 24 / .055); border-radius: 999px; padding: .28rem; gap: .25rem;
               box-shadow: inset 0 1px 2px rgb(36 30 24 / .05); }
.toggle { border: 0; background: transparent; border-radius: 999px; min-height: 40px; padding: .4rem 1.05rem;
          font: inherit; font-weight: 600; color: var(--text-muted); cursor: pointer;
          display: inline-flex; align-items: center; gap: .4rem;
          transition: color .2s ease, background-color .25s ease, box-shadow .3s var(--ease); }
.toggle-active { background: var(--surface); box-shadow: 0 1px 3px rgb(36 30 24 / .12), 0 0 0 1px var(--line);
                 color: var(--primary-dark); font-weight: 700; }
.selected-count { margin: .25rem 0 .65rem; color: var(--text-muted); }
.selected-count strong { color: var(--primary-dark); font-size: 1.05rem; }

/* Legende */
.legend { display: flex; flex-wrap: wrap; gap: .45rem 1rem; margin: .4rem 0 .9rem; font-size: .85rem; color: var(--text-muted); }
.legend span { display: inline-flex; align-items: center; gap: .4rem; }
.sw { width: 1rem; height: 1rem; border-radius: .35rem; border: 1px solid; display: inline-block;
      box-shadow: inset 0 1px 1px rgb(255 255 255 / .4); }
.sw-frei { background: var(--c-free); border-color: var(--c-free-border); }
.sw-ausgewaehlt { background: var(--c-sel); border-color: var(--c-sel-border); }
.sw-vorgemerkt { background: var(--c-res); border-color: var(--c-res-border); }
.sw-belegt { background: var(--c-busy); border-color: var(--c-busy-border); }
.sw-gesperrt { background: var(--c-block); border-color: var(--c-block-border); }

/* Aktionsleiste unten: schwebende Glas-Insel */
.reserve-bar { background: rgb(253 252 248 / .82);
               backdrop-filter: blur(16px) saturate(1.35); -webkit-backdrop-filter: blur(16px) saturate(1.35);
               border: 1px solid rgb(255 255 255 / .65);
               border-radius: 1.35rem; box-shadow: 0 0 0 1px var(--line), 0 20px 44px -22px rgb(36 30 24 / .45);
               padding: .6rem 1rem; margin-top: 1rem;
               position: sticky; bottom: .6rem; z-index: 50; }
.reserve-bar-inner { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center;
                     justify-content: space-between; }
.reserve-bar-selected-weeks { display: flex; flex-wrap: wrap; gap: .3rem; min-width: 0; }
.reserve-kw { display: inline-block; background: var(--c-sel); color: var(--c-sel-text); font-size: .72rem;
              font-weight: 650; padding: .18rem .55rem; border-radius: 999px; line-height: 1.3;
              box-shadow: inset 0 0 0 1px rgb(43 98 73 / .2); }
.reserve-bar-actions { display: flex; align-items: center; gap: .65rem; }
.reserve-count { font-size: .85rem; color: var(--text-muted); font-weight: 650; }

/* Tabellen */
table.data { width: 100%; border-collapse: collapse; background: transparent; }
table.data th, table.data td { text-align: start; padding: .65rem .75rem; border-bottom: 1px solid var(--line); }
table.data th { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
                color: var(--text-muted); font-weight: 700; background: rgb(36 30 24 / .03); }
table.data td code, .card code { overflow-wrap: anywhere; font-size: .85em; }
table.data .year-head { background: rgb(36 30 24 / .045); font-weight: 700;
                        font-family: var(--font-serif); letter-spacing: .02em; }
@media (max-width: 47.99rem) {
  table.data thead { display: none; }
  table.data tr { display: block; border: 1px solid var(--line); border-radius: var(--radius-s);
                  margin-bottom: .7rem; padding: .45rem; background: var(--surface);
                  box-shadow: 0 1px 2px rgb(36 30 24 / .04); }
  table.data td { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; border: 0; }
  table.data td::before { content: attr(data-label); font-weight: 700; color: var(--text-muted); font-size: .78rem;
                          letter-spacing: .08em; text-transform: uppercase; align-self: center; }
  table.data td[data-label=""] { justify-content: flex-end; }
}
table.data td[data-label=""]::before { content: none; }

/* KW-Auswahl (Admin) */
.weekpicker { border: 1px solid var(--line); border-radius: 1.1rem; padding: .8rem 1.05rem; background: rgb(255 255 255 / .5); }
.weekpicker-bar { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-bottom: .65rem; }
.picker-label { margin: 0; }
.weekpicker-bar select { width: auto; min-width: 7rem; }
.week-grid-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.6rem, 1fr)); gap: .45rem; }
.wk { border: 1px solid var(--line-strong); border-radius: .8rem; background: var(--surface); cursor: pointer;
      padding: .35rem .2rem; text-align: center; font: inherit; font-weight: 700; line-height: 1.2;
      transition: transform .3s var(--ease), background-color .15s ease, border-color .15s ease, box-shadow .3s var(--ease); }
.wk small { display: block; font-weight: 500; font-size: .68rem; color: var(--text-muted); }
.wk:hover { border-color: var(--primary); transform: translateY(-1px); }
.wk-on { background: linear-gradient(180deg, #31704F, #24543D); border-color: transparent; color: #fff;
         box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), 0 8px 18px -10px rgb(30 75 54 / .6); }
.wk-on small { color: rgb(255 255 255 / .75); }
.wk-locked { background: #e9e6df; border-color: rgb(36 30 24 / .18); color: #8b8375; cursor: not-allowed; opacity: .75; }
.wk-locked small { color: #9a9284; }
.wk-locked:hover { border-color: rgb(36 30 24 / .18); transform: none; }
.wk-past { background: #edeae2; border-color: rgb(36 30 24 / .1); color: #9a9284; cursor: not-allowed; opacity: .6; text-decoration: line-through; }
.wk-past small { color: #9a9284; }
.wk-ferien-partial { background: #f6ecd7; border-color: rgb(169 126 47 / .6); }
.wk-ferien-full { background: #f6dedb; border-color: rgb(164 72 60 / .65); color: #6d2c24; }
.wk-ferien-full.wk-locked { cursor: not-allowed; opacity: .65; }

/* Einbliden beim Scrollen (JS setzt .reveal + .is-in; ohne JS alles sichtbar) */
.reveal { opacity: 0; transform: translateY(14px);
          transition: opacity .65s var(--ease), transform .65s var(--ease);
          transition-delay: var(--reveal-delay, 0ms); }
.reveal.is-in { opacity: 1; transform: none; }

/* Druck */
.print-only { display: none; }
.print-logo { height: 2.6rem; width: auto; margin-bottom: .5rem; }
@media print {
  .topbar, .footer, .no-print, .reserve-bar, .viewbar, .view-toggle, body::after { display: none !important; }
  .print-only { display: block !important; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  body { background: #fff; }
  main { max-width: none; }
}

/* Mobile */
@media (max-width: 48rem) {
  main { padding: .75rem 1rem 4rem; }
  /* Inhalte zentriert ausrichten; Formulare behalten die gemeinsame Vorderkante */
  .topbar { justify-content: center; text-align: center; border-radius: 1.35rem;
            padding: .6rem .9rem; top: .6rem; }
  .topbar a, .topbar .link { margin-inline-start: .6rem; }
  main h1, .card h2 { text-align: center; }
  .hero { text-align: center; padding: 1.35rem 1.2rem; }
  .hero h1 { font-size: 1.55rem; }
  .hero-sub { margin-inline: auto; }
  .cal-grid { gap: 3px; padding: .55rem; }
  .day-cell { min-height: 54px; font-size: .78rem; padding: .2rem; }
  .day-cell .day-num { font-size: .88rem; }
  .day-pick { min-height: 50px; }
  .week-head { padding: .7rem .85rem; gap: .4rem .6rem; }
  .week-title { font-size: 1rem; }
  .btn-week { font-size: .82rem; padding: .4rem .75rem; min-height: 38px; }
  /* Primäre Aktion bleibt während der Auswahl erreichbar: kompakte Sticky-Leiste */
  .reserve-bar { bottom: calc(.6rem + env(safe-area-inset-bottom)); padding: .55rem .8rem; }
  .reserve-bar-inner { flex-wrap: nowrap; }
  .reserve-bar-selected-weeks { flex: 1 1 8rem; flex-wrap: nowrap; overflow-x: auto; }
  .reserve-bar-actions { flex: none; }
  .viewbar { flex-direction: column; align-items: center; }
}

/* Weniger Bewegung, wenn das System es verlangt */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}