/* ===================================================================
   Klassenschwung – Styles
   =================================================================== */

/* IBM Plex Sans (variabel) liegt lokal im Repo statt bei Google Fonts,
   damit beim Seitenaufruf keine Daten an Dritte gehen. Gewaehlt, weil
   grosses I (mit Serifen), kleines l (mit Bogen) und 1 klar verschieden
   sind – wichtig fuer Namen wie "Ilyas" am Beamer. Latin-Ext wird nur
   geladen, wenn ein Name es braucht (Ayşe, Çağla, Łukasz …). */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("./fonts/plex-sans-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("./fonts/plex-sans-latin-ext-wght.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Neutrale Basis "Lichtung" (heller Salbei-Grund statt Grau, wie auf der
     Startseite) + genau eine Akzentfarbe je Farbwelt (siehe unten). Die
     anderen Farbwelten toenen diese Basis in ihrer eigenen Farbe (--tint). */
  --bg:            #f5f7f4;
  --surface:       #ffffff;
  --surface-2:     #edf1ee;
  --border:        #dde5df;
  --text:          #18241d;
  --text-muted:    #3f5047;
  --danger:        #c9372c;
  --line:          #c9d3cc;  /* kraeftigere Linie, Rand von Pillen-Knoepfen */
  --soft:          #e3eae5;  /* weiche Flaeche: zweiter Knopf, Segment-Schiene */
  --seg-active:    #ffffff;  /* gewaehltes Segment */
  /* Dunkle Waldflaeche: Hinweiszeile, Fokus-Wald-Karte der Startseite */
  --forest:        #1e3328;
  --forest-text:   #f1f5f2;
  --forest-muted:  #c9d8cf;
  --forest-accent: #9dc5af;
  --forest-track:  #2f4a3b;

  /* Farbwelt "Salbei" (Standard): Akzent, Zustandsfarben der Spalten bzw.
     Kacheln (links = "Start", mitte = "gut", rechts = "grossartig")
     und Logo. Weitere Farbwelten weiter unten; per Konto waehlbar
     (Einstellungen in der App, data-palette am <html>). */
  --accent:               #39644d;
  --accent-hover:         #2e523f;
  --accent-soft:          rgba(57, 100, 77, 0.1);
  --accent-text:          #ffffff;
  --col-links-bg:         #e5e8e6;
  --col-links-head:       #5b6861;
  --col-mitte-bg:         #c1dbcd;
  --col-mitte-head:       #365f49;
  --col-rechts-bg:        #87b99e;
  --col-rechts-head:      #274535;
  --accent-on-dark:       #9dc5af;
  --accent-on-dark-hover: #b9d5c6;
  --accent-on-dark-text:  #17281f;

  --font:      "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius:    12px;
  --radius-sm: 8px;
  --shadow:    0 1px 2px rgba(24, 36, 29, 0.05), 0 1px 3px rgba(24, 36, 29, 0.06);
  --shadow-lg: 0 12px 32px rgba(24, 36, 29, 0.10), 0 2px 6px rgba(24, 36, 29, 0.05);
  --ease:      cubic-bezier(.2, .7, .3, 1);
  --t:         180ms var(--ease);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #0e1310;
    --surface:     #141b17;
    --surface-2:   #1b241f;
    --border:      #26312b;
    --text:        #eef3f0;
    --text-muted:  #a9b8b0;
    --danger:      #ff7b72;
    --line:        #33413a;
    --soft:        #1d2722;
    --seg-active:  #2b3730;
    --forest:      #1a2d23;
    --forest-track: #2c4335;
    --shadow:      0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-lg:   0 12px 32px rgba(0, 0, 0, 0.45);

    --accent:          #9dc5af;
    --accent-hover:    #b9d5c6;
    --accent-soft:     rgba(157, 197, 175, 0.12);
    --accent-text:     #17281f;
    --col-links-bg:    #232725;
    --col-links-head:  #98a59e;
    --col-mitte-bg:    #283d31;
    --col-mitte-head:  #88b89e;
    --col-rechts-bg:   #3a5948;
    --col-rechts-head: #c2dacd;
  }
}

/* ---------------- Farbwelten ---------------- */
/* Gleiche Tokens wie oben, je Farbwelt fuer hell und dunkel. Gilt fuer die
   ganze App (:root[data-palette]) oder nur fuer eine Vorschau
   ([data-palette-preview], Auswahl in den Einstellungen). Werte sind auf
   WCAG AA geprueft (Buttons, Links, Kacheltext, Spaltenkoepfe). */

[data-palette-preview="salbei"] {
  --accent:               #39644d;
  --accent-hover:         #2e523f;
  --accent-soft:          rgba(57, 100, 77, 0.1);
  --accent-text:          #ffffff;
  --col-links-bg:         #e5e8e6;
  --col-links-head:       #5b6861;
  --col-mitte-bg:         #c1dbcd;
  --col-mitte-head:       #365f49;
  --col-rechts-bg:        #87b99e;
  --col-rechts-head:      #274535;
  --accent-on-dark:       #9dc5af;
  --accent-on-dark-hover: #b9d5c6;
  --accent-on-dark-text:  #17281f;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-palette-preview="salbei"] {
    --accent:          #9dc5af;
    --accent-hover:    #b9d5c6;
    --accent-soft:     rgba(157, 197, 175, 0.12);
    --accent-text:     #17281f;
    --col-links-bg:    #232725;
    --col-links-head:  #98a59e;
    --col-mitte-bg:    #283d31;
    --col-mitte-head:  #88b89e;
    --col-rechts-bg:   #3a5948;
    --col-rechts-head: #c2dacd;
  }
}

:root[data-palette="tafel"],
[data-palette-preview="tafel"] {
  --tint:                 #226560;
  --accent:               #226560;
  --accent-hover:         #1c5350;
  --accent-soft:          rgba(34, 101, 96, 0.1);
  --accent-text:          #ffffff;
  --col-links-bg:         #e4e8e7;
  --col-links-head:       #5a6767;
  --col-mitte-bg:         #b7dcd9;
  --col-mitte-head:       #20605c;
  --col-rechts-bg:        #72bab5;
  --col-rechts-head:      #184743;
  --accent-on-dark:       #75cac5;
  --accent-on-dark-hover: #9cd9d5;
  --accent-on-dark-text:  #0e2927;
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="tafel"]:not([data-theme="light"]),
  :root:not([data-theme="light"]) [data-palette-preview="tafel"] {
    --accent:          #75cac5;
    --accent-hover:    #9cd9d5;
    --accent-soft:     rgba(117, 202, 197, 0.12);
    --accent-text:     #0e2927;
    --col-links-bg:    #232727;
    --col-links-head:  #97a5a4;
    --col-mitte-bg:    #233c3b;
    --col-mitte-head:  #53beb6;
    --col-rechts-bg:   #335956;
    --col-rechts-head: #a9dedb;
  }
}

:root[data-palette="tinte"],
[data-palette-preview="tinte"] {
  --tint:                 #3252bd;
  --accent:               #3252bd;
  --accent-hover:         #29449b;
  --accent-soft:          rgba(50, 82, 189, 0.1);
  --accent-text:          #ffffff;
  --col-links-bg:         #e7e7ea;
  --col-links-head:       #616470;
  --col-mitte-bg:         #cbd3ef;
  --col-mitte-head:       #304eb4;
  --col-rechts-bg:        #9cace0;
  --col-rechts-head:      #233984;
  --accent-on-dark:       #adbbe5;
  --accent-on-dark-hover: #c5ceed;
  --accent-on-dark-text:  #14214d;
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="tinte"]:not([data-theme="light"]),
  :root:not([data-theme="light"]) [data-palette-preview="tinte"] {
    --accent:          #adbbe5;
    --accent-hover:    #c5ceed;
    --accent-soft:     rgba(173, 187, 229, 0.12);
    --accent-text:     #14214d;
    --col-links-bg:    #25262a;
    --col-links-head:  #9fa1ab;
    --col-mitte-bg:    #293662;
    --col-mitte-head:  #9cace0;
    --col-rechts-bg:   #3b4e8f;
    --col-rechts-head: #cbd3ef;
  }
}

:root[data-palette="bernstein"],
[data-palette-preview="bernstein"] {
  --tint:                 #81510a;
  --accent:               #81510a;
  --accent-hover:         #694309;
  --accent-soft:          rgba(129, 81, 10, 0.1);
  --accent-text:          #ffffff;
  --col-links-bg:         #e8e7e5;
  --col-links-head:       #6a645c;
  --col-mitte-bg:         #efcfa0;
  --col-mitte-head:       #7b4d0a;
  --col-rechts-bg:        #e0a143;
  --col-rechts-head:      #593907;
  --accent-on-dark:       #e9b25e;
  --accent-on-dark-hover: #f0c88d;
  --accent-on-dark-text:  #332104;
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="bernstein"]:not([data-theme="light"]),
  :root:not([data-theme="light"]) [data-palette-preview="bernstein"] {
    --accent:          #e9b25e;
    --accent-hover:    #f0c88d;
    --accent-soft:     rgba(233, 178, 94, 0.12);
    --accent-text:     #332104;
    --col-links-bg:    #282724;
    --col-links-head:  #a6a199;
    --col-mitte-bg:    #4a3414;
    --col-mitte-head:  #e59f38;
    --col-rechts-bg:   #6c4c1d;
    --col-rechts-head: #f2cf9c;
  }
}

/* Neutrale Basis der anderen Farbwelten: wie "Lichtung", nur in der Farbe
   der Farbwelt getoent statt in Salbei. data-palette fehlt bei Salbei
   (Standard), dort gelten die festen Werte oben. */
:root[data-palette] {
  --bg:            color-mix(in srgb, var(--tint) 4%, #fafafa);
  --bg-glass:      color-mix(in srgb, var(--bg) 85%, transparent);
  --surface-2:     color-mix(in srgb, var(--tint) 6%, #f0f0f0);
  --border:        color-mix(in srgb, var(--tint) 10%, #e3e3e3);
  --text:          color-mix(in srgb, var(--tint) 20%, #121212);
  --text-muted:    color-mix(in srgb, var(--tint) 25%, #474747);
  --line:          color-mix(in srgb, var(--tint) 14%, #cfcfcf);
  --soft:          color-mix(in srgb, var(--tint) 8%, #e7e7e7);
  --forest:        color-mix(in srgb, var(--tint) 45%, #0c0e0d);
  --forest-muted:  color-mix(in srgb, var(--tint) 20%, #dedede);
  --forest-accent: var(--accent-on-dark);
  --forest-track:  color-mix(in srgb, var(--tint) 45%, #262a28);
}
@media (prefers-color-scheme: dark) {
  :root[data-palette]:not([data-theme="light"]) {
    --bg:            color-mix(in srgb, var(--tint) 6%, #0f0f10);
    --bg-glass:      color-mix(in srgb, var(--bg) 85%, transparent);
    --surface:      color-mix(in srgb, var(--tint) 6%, #161618);
    --surface-2:     color-mix(in srgb, var(--tint) 8%, #1d1d20);
    --border:        color-mix(in srgb, var(--tint) 12%, #2a2a2e);
    --text:          color-mix(in srgb, var(--tint) 6%, #f2f2f2);
    --text-muted:    color-mix(in srgb, var(--tint) 12%, #a8a8ae);
    --line:          color-mix(in srgb, var(--tint) 14%, #36363a);
    --soft:          color-mix(in srgb, var(--tint) 10%, #1f1f22);
    --seg-active:    color-mix(in srgb, var(--tint) 12%, #2c2c30);
    --forest:        color-mix(in srgb, var(--tint) 30%, #121413);
    --forest-track:  color-mix(in srgb, var(--tint) 35%, #222624);
  }
}

* { box-sizing: border-box; }

/* Author-Regeln mit `display` wuerden das hidden-Attribut sonst aushebeln
   (betrifft u. a. .topbar, .field und .captcha). */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; letter-spacing: -.01em; }

a { color: var(--accent); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ---------------- Layout-Raster (gemeinsam mit landing.css) ---------------- */
/* Abstaende folgen einem 8px-Raster, Breite und Seitenrand wie auf der
   Startseite, damit App und Startseite wie aus einem Guss wirken. */

:root {
  --container: 1120px;
  --gutter:    16px;
  --header-h:  64px;
  --bg-glass:  rgba(245, 247, 244, .85);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg-glass: rgba(14, 19, 16, .85); }
}
@media (min-width: 640px)  { :root { --gutter: 24px; } }
@media (min-width: 1024px) { :root { --gutter: 32px; } }

/* Kein grauer Tap-Blitz und keine Doppeltipp-Zoom-Verzoegerung auf Tablets */
button, a, .student, .seat, .goal { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* ---------------- Hinweiszeile ---------------- */
/* Dunkle Zeile ueber der Kopfzeile: auf der Startseite der Hinweis auf die
   Einladung, in der App die Stunde laut Stundenplan bzw. der Gastmodus.
   Feste Hoehe und einzeilig, weil die Kopfzeile mit top: -var(--hint-h)
   klebt: Beim Scrollen rollt nur die Hinweiszeile weg. */

:root { --hint-h: 40px; }

.hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: var(--hint-h);
  margin: 0;
  padding: 0 var(--gutter);
  overflow: hidden;
  background: var(--forest);
  color: var(--forest-muted);
  font-size: .875rem;
  white-space: nowrap;
}
.hint > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hint strong { color: var(--forest-text); font-weight: 600; }
.hint a {
  color: var(--forest-accent);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--t);
}
.hint a:hover { color: var(--forest-text); }
.hint a:focus-visible { outline: 2px solid var(--forest-accent); outline-offset: -2px; border-radius: 4px; }
/* Lange Fassung ab Tablet, kurze auf dem Handy */
.hint__short { display: none; }
@media (max-width: 719px) {
  .hint__long { display: none; }
  .hint__short { display: inline; }
}

/* ---------------- Segment-Schalter ---------------- */
/* Hauptnavigation als Pillen-Schiene, das aktuelle Ziel als helle Pille.
   Alle Segmente gleich fett, damit beim Wechsel nichts springt. Auf
   schmalen Bildschirmen eigene Zeile ueber die ganze Breite (Media
   Queries bei .topnav und in landing.css bei .site-nav). */

.seg {
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: var(--soft);
}
.seg a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  color: var(--text-muted);
  font-size: .9375rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--t), color var(--t), box-shadow var(--t);
}
.seg a:hover { color: var(--text); }
.seg a[aria-current] {
  background: var(--seg-active);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(24, 36, 29, .08);
}
.seg a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Feine Linie unter klebenden Kopfzeilen erst, wenn Inhalt darunter
   durchscrollt (wo scroll-getriebene Animationen gehen, sonst ohne). */
@supports (animation-timeline: scroll()) {
  .topbar, .site-header {
    animation: header-line linear both;
    animation-timeline: scroll();
    animation-range: 0 64px;
  }
}
@keyframes header-line {
  to { box-shadow: 0 1px 0 var(--border); }
}

/* ---------------- Topbar ---------------- */
/* Breit wie die Startseite: Logo links, Segment-Schalter mittig, Aktionen
   rechts. Schmal: Segment-Schalter als zweite Zeile ueber die ganze Breite
   (statt Menue-Knopf). */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg-glass);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
}
.topbar:not(.topbar--minimal):has(> .hint:not([hidden])) { top: calc(-1 * var(--hint-h)); }
.topbar__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: "lead nav actions";
  align-items: center;
  gap: 0 24px;
  min-height: var(--header-h);
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.topbar--wide .topbar__inner { max-width: none; }
.topbar__lead { grid-area: lead; display: flex; align-items: center; gap: 12px; min-width: 0; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -.01em;
  color: var(--text);
  text-decoration: none;
  transition: opacity var(--t);
}
.brand:hover { opacity: .75; }
.brand .brand-mark { width: 24px; height: 24px; }
.topbar__brand { flex: none; }
/* In der Kopfzeile groesser als im Footer; auf dem Handy etwas kleiner. */
.topbar__brand, .site-header .brand { gap: 10px; font-size: 1.3125rem; }
.topbar__brand .brand-mark, .site-header .brand .brand-mark { width: 36px; height: 36px; }
@media (max-width: 639px) {
  .topbar__brand, .site-header .brand { gap: 8px; font-size: 1.1875rem; }
  .topbar__brand .brand-mark, .site-header .brand .brand-mark { width: 30px; height: 30px; }
}

.topbar__back {
  flex: none;
  width: 40px;
  height: 40px;
  font-size: 1.25rem;
  line-height: 1;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background-color var(--t);
}
.topbar__back:hover { background: var(--soft); }
.topbar__back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.topnav { grid-area: nav; }

.topbar__actions { grid-area: actions; justify-self: end; display: flex; align-items: center; gap: 8px; }
.topbar__start { gap: 6px; min-height: 44px; }
.topbar__start > span:first-child { font-size: 1.125rem; line-height: 1; }
.topbar__account { gap: 8px; min-height: 44px; padding: 0 10px 0 7px; }
.topbar__name { max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9375rem; }
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: .8125rem;
  font-weight: 700;
}
.caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--text-muted); }

/* Unterricht: nur Zurueck und Logo, keine Ablenkung auf dem Beamer */
.topbar--minimal > .hint,
.topbar--minimal .topnav,
.topbar--minimal .topbar__actions { display: none; }

@media (max-width: 1099px) {
  .topbar__name, .caret { display: none; }
  .topbar__account { padding-right: 7px; }
}
@media (max-width: 1039px) {
  .topbar__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: var(--header-h) auto;
    grid-template-areas: "lead actions" "nav nav";
    padding-bottom: 12px;
  }
  .topbar--minimal .topbar__inner { padding-bottom: 0; }
  /* Ganze Breite, auf dem Tablet nicht breiter als noetig */
  .topnav { width: 100%; max-width: 560px; justify-self: center; }
  .topnav .topnav__link { flex: 1 1 auto; padding: 0 8px; font-size: .875rem; }
}
@media (max-width: 399px) {
  .topnav .topnav__link { padding: 0 6px; font-size: .8125rem; }
}
@media (max-width: 639px) {
  .topbar__start-label { display: none; }
  .topbar__start { width: 44px; padding: 0; }
}
@media (max-width: 379px) {
  .topbar__inner { column-gap: 8px; }
  .topbar__lead:has(.topbar__back:not([hidden])) .topbar__brandname { display: none; }
}
@media (max-width: 339px) {
  .topbar__brandname { display: none; }
}

/* Aufklappmenue */
.dropdown { position: relative; }
.dropdown__panel {
  position: absolute;
  top: calc(100% + 8px);
  z-index: 30;
  min-width: 15rem;
  max-width: min(22rem, calc(100vw - 32px));
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.dropdown__panel--end { right: 0; }
.dropdown__panel--start { left: 0; }
.dropdown__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text);
  font: inherit;
  font-size: .9375rem;
  text-align: left;
  cursor: pointer;
}
.dropdown__item:hover, .dropdown__item:focus-visible { background: var(--surface-2); outline: none; }
.dropdown__item--danger { color: var(--danger); }
.dropdown__sub { color: var(--text-muted); font-size: .8125rem; }
.dropdown__heading { padding: 8px 12px 4px; color: var(--text-muted); font-size: .8125rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdown__sep { height: 1px; margin: 6px 4px; background: var(--border); }

/* ---------------- Layout ---------------- */

.app { padding: 32px var(--gutter) 64px; max-width: var(--container); margin: 0 auto; }
.app--wide { max-width: none; padding-top: 24px; }

.loading { color: var(--text-muted); padding: 2rem 0; text-align: center; }

.stack > * + * { margin-top: 24px; }

/* Flach und rund wie die Karten der Startseite */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 24px;
}
.card > h2, .card > .row > h2 { font-size: 1.25rem; font-weight: 500; letter-spacing: -.015em; margin-bottom: 8px; }
.card > p.muted + * { margin-top: 16px; }
@media (max-width: 639px) { .card { padding: 16px; border-radius: 16px; } }

/* Seitenkopf wie die Abschnittskoepfe der Startseite */
.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: 32px;
}
.page-head__text { flex: 1 1 22rem; min-width: 0; }
.page-head .eyebrow { margin-bottom: 16px; }
.page-head h2 {
  margin: 0;
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.page-head__lead { margin: 12px 0 0; max-width: 60ch; color: var(--text-muted); font-size: 1.0625rem; text-wrap: pretty; }
.page-head__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: .875rem;
  font-weight: 500;
}
.eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--col-mitte-head);
}

.icon {
  width: 24px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.muted { color: var(--text-muted); }
.small { font-size: .875rem; }
.empty { color: var(--text-muted); padding: 1.25rem 0; text-align: center; }

/* ---------------- Buttons & Formulare ---------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .55rem 1rem;
  min-height: 2.5rem;
  font: inherit;
  font-weight: 500;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--t), border-color var(--t), color var(--t), box-shadow var(--t), transform var(--t);
}
.btn:hover:not(:disabled) { background: var(--soft); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}
.btn--primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }

/* Zweitrangig: Pille mit feinem Rand (wie "Anmelden" auf der Startseite) */
.btn--ghost { background: transparent; border-color: var(--line); }
.btn--danger { color: var(--danger); }
.btn--sm { padding: .3rem .6rem; min-height: 2rem; font-size: .85rem; }
.btn--icon { padding: .3rem; width: 2rem; }

.input, select.input {
  width: 100%;
  padding: .6rem .75rem;
  min-height: 2.5rem;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color var(--t);
}
.input:hover { border-color: var(--text-muted); }
.input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
textarea.input { min-height: 10rem; resize: vertical; line-height: 1.5; }

.field { display: block; margin-bottom: .85rem; }
.field__label { display: block; margin-bottom: .3rem; font-size: .875rem; color: var(--text-muted); }

.row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.row--form { flex-wrap: nowrap; }
.row--form .input { flex: 1 1 auto; min-width: 0; }

/* Header der sortierten Ansicht: Grid statt Flex, damit die mittlere
   Zaehlung unabhaengig von der (ungleichen) Breite von Klassenname und
   Button-Text exakt mittig zur ganzen Zeile bleibt, statt nur mittig im
   Restplatz zwischen den beiden zu sitzen. */
.board-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: .6rem;
}
.board-header > :last-child { justify-self: end; }
@media (max-width: 759px) {
  .board-header { grid-template-columns: 1fr; }
  .board-header > :last-child { justify-self: stretch; }
}

.board-actions { justify-content: flex-end; }
@media (max-width: 759px) {
  .board-actions { justify-content: flex-start; }
}

/* Warteschlange bei schlechtem WLAN */
.sync-status { display: block; margin-top: 2px; font-size: .8125rem; color: var(--text-muted); }
.sync-status--offline { color: var(--danger); font-weight: 600; }

/* "Wer ist da?" */
.modal__panel--wide { width: min(46rem, 100%); }
.presence__summary { margin: 0; font-weight: 600; }
.presence__grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
.presence__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 3.25rem;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--t), border-color var(--t), color var(--t);
}
.presence__item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.presence__name { font-weight: 600; overflow-wrap: anywhere; }
.presence__state { font-size: .75rem; color: var(--accent); font-weight: 600; }
.presence__item[aria-pressed="false"] { border-style: dashed; border-color: var(--border); background: var(--surface-2); color: var(--text-muted); }
.presence__item[aria-pressed="false"] .presence__name { font-weight: 500; }
.presence__item[aria-pressed="false"] .presence__state { color: var(--text-muted); }

.board-stats {
  justify-self: center;
  text-align: center;
  font-weight: 700;
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
}

.error-box {
  margin: 0 0 .85rem;
  padding: .6rem .8rem;
  border-radius: var(--radius-sm);
  background: rgba(201, 55, 44, .12);
  color: var(--danger);
  font-size: .9rem;
}

/* ---------------- Auth ---------------- */

.auth { max-width: 26rem; margin: 3rem auto; }
.auth__brand { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 1.5rem; }
.auth__brand h1 { font-size: clamp(2rem, 1.6rem + 1.4vw, 2.5rem); font-weight: 400; letter-spacing: -.03em; }
.auth__brand .brand-mark { width: 2.5rem; height: 2.5rem; margin-bottom: 1rem; }
.auth__home { display: block; margin-top: 1.5rem; text-align: center; font-size: .875rem; color: var(--text-muted); text-decoration: none; transition: color var(--t); }
.auth__home:hover { color: var(--text); }
.auth__note { margin-bottom: 1rem; }
.auth__note p { margin: 0 0 .6rem; }
.auth__note .row { margin-top: .9rem; }
.auth__note .btn { flex: 1 1 auto; }
.auth__note-tag {
  display: inline-block;
  padding: 2px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: .8125rem;
  font-weight: 600;
}

/* Logo: Kirschbaum mit Amsel wie im Fokus-Wald. Beim Laden der Seite fliegt
   die Amsel von rechts heran (.brand-mark__flyer, Fluegelschlag) und setzt
   sich auf den Ast (.brand-mark__perched). Die Angaben in px sind
   Einheiten der viewBox (32 = Logobreite). Im Footer sitzt sie schon. */
.brand-mark { display: block; flex: none; overflow: visible; }
.brand-mark__body { stroke: var(--logo-bird-edge, none); stroke-width: 1.4; paint-order: stroke; }
.brand-mark__flyer { opacity: 0; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .brand-mark__bird { animation: logo-fly 1.8s .3s cubic-bezier(.3, .55, .35, 1) both; }
  .brand-mark__perched { animation: logo-land 1.8s .3s step-end both; }
  .brand-mark__flyer { animation: logo-flyer 1.8s .3s step-end both, logo-flap .16s .3s 10 alternate ease-in-out; }
  .site-footer .brand-mark *, .app-footer .brand-mark * { animation: none; }
}
@keyframes logo-fly {
  0%   { transform: translate(260px, -70px); opacity: 0; }
  12%  { opacity: 1; }
  50%  { transform: translate(100px, -38px); }
  85%  { transform: translate(6px, -6px); }
  100% { transform: none; opacity: 1; }
}
@keyframes logo-flyer { 0% { opacity: 1; } 86% { opacity: 0; } 100% { opacity: 0; } }
@keyframes logo-land  { 0% { opacity: 0; } 86% { opacity: 1; } 100% { opacity: 1; } }
@keyframes logo-flap  { to { transform: scaleY(-.5); } }
/* Heller Rand, damit die schwarze Amsel im Dunkeln nicht verschwindet */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --logo-bird-edge: rgba(255, 255, 255, .5); }
}
/* Neutraler Umschalter, damit nur der Absenden-Button die Akzentfarbe traegt */
.auth__tabs { display: flex; gap: 2px; padding: 4px; margin-bottom: 1.1rem; border-radius: 999px; background: var(--soft); }
.auth__tabs .btn { flex: 1; min-height: 2.5rem; background: transparent; border-color: transparent; color: var(--text-muted); }
.auth__tabs .btn:hover:not(:disabled) { background: transparent; color: var(--text); }
.auth__tabs .btn[aria-pressed="true"] { background: var(--seg-active); color: var(--text); box-shadow: 0 1px 2px rgba(24, 36, 29, .08); }
.auth .btn--primary { width: 100%; }
.captcha { display: flex; justify-content: center; margin-bottom: .85rem; }

.terms-gate { max-width: 40rem; margin: 2rem auto 0; }

/* Checkbox mit Text (Nutzungsbedingungen bei der Registrierung) */
.check { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: 1rem; font-size: .875rem; color: var(--text-muted); line-height: 1.45; }
.check input { flex: none; width: 1.1rem; height: 1.1rem; margin: .1rem 0 0; accent-color: var(--accent); }

/* Rechtliche Links unter jeder App-Ansicht */
.app-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 1.5rem;
  padding: 1rem 1rem 2rem;
  font-size: .8125rem;
}
.app-footer a { color: var(--text-muted); text-decoration: none; transition: color var(--t); }
.app-footer a:hover { color: var(--text); text-decoration: underline; }
.app-footer a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.menu--after { margin-top: 48px; }

/* Farbwelt-Auswahl in den Einstellungen */
/* 1, 2 oder 4 Spalten – nie eine einzelne Karte allein in der letzten Reihe */
.palette-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .75rem;
  min-width: 0;
  margin: 1rem 0 0;
  padding: 0;
  border: 0;
}
.palette-option {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .85rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--t), box-shadow var(--t);
}
.palette-option:hover { border-color: var(--accent); }
.palette-option:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.palette-option:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.palette-option input { flex: none; width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--accent); }
.palette-option__swatches { display: flex; gap: 3px; flex: none; }
.palette-option__swatches i { width: 1rem; height: 1.75rem; border-radius: 4px; border: 1px solid var(--border); }
.palette-option__swatches .is-accent { background: var(--accent); border-color: transparent; }
.palette-option__swatches .is-links  { background: var(--col-links-bg); }
.palette-option__swatches .is-mitte  { background: var(--col-mitte-bg); }
.palette-option__swatches .is-rechts { background: var(--col-rechts-bg); }
.palette-option__text { display: grid; line-height: 1.3; min-width: 0; }
.palette-picker:disabled .palette-option { cursor: progress; opacity: .7; }
@media (min-width: 560px)  { .palette-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .palette-picker { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------------- Menue ---------------- */
/* Kacheln wie die Funktions-Karten der Startseite */

.menu { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.menu__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 32px;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: box-shadow var(--t), transform var(--t), border-color var(--t);
}
.menu__item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.menu__item h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 8px; }
.menu__item p { margin: 0; color: var(--text-muted); text-wrap: pretty; }
@media (max-width: 639px) { .menu__item { padding: 24px; } }

.feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 24px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent);
}

/* ---------------- Listen ---------------- */

.list { list-style: none; margin: 0; padding: 0; }
.list__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 8px;
  margin: 0 -8px;
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: background-color var(--t);
}
.list__item:last-child { border-bottom: none; }
.list__main {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 40px;
  text-align: left;
  font: inherit;
  font-weight: 600;
  color: var(--text);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color var(--t);
}
.list__main:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.list__sub { display: block; font-weight: 400; font-size: .875rem; color: var(--text-muted); }

/* Hover-Effekte nur fuer Maus/Stift: auf Touch-Geraeten "kleben" sie sonst
   nach dem Antippen. */
@media (hover: hover) {
  .menu__item:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); border-color: var(--text-muted); }
  .list__item:has(.list__main):hover { background: var(--surface-2); }
  .list__main:hover { color: var(--accent); }
}

/* Touch-Bedienung: Ziele mindestens 44px (Apple HIG / WCAG 2.5.5) */
@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .btn--sm { min-height: 40px; padding: .4rem .8rem; }
  .btn--icon { width: 44px; }
  .topbar__back { width: 44px; height: 44px; }
  .list__main { min-height: 48px; }
  .input, select.input { min-height: 44px; }
}

.badge {
  flex: none;
  padding: .12rem .5rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.badge--live { background: var(--col-mitte-bg); border-color: transparent; color: var(--col-mitte-head); }

/* ---------------- Reiter einer Klasse ---------------- */

.tabs {
  display: flex;
  gap: 4px;
  margin: -8px 0 32px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs__link {
  flex: none;
  padding: 10px 16px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--t), border-color var(--t);
}
.tabs__link:hover { color: var(--text); }
.tabs__link[aria-current="page"] { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }

/* ---------------- Heute ---------------- */

.badge--now { background: var(--accent-soft); border-color: transparent; color: var(--accent); }

.now-card { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.now-card h2 { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); font-weight: 400; letter-spacing: -.03em; margin-bottom: 16px; }
.now-card__kicker { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; color: var(--accent); font-size: .875rem; font-weight: 600; }
.now-pill__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--col-mitte-head);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--col-mitte-head) 20%, transparent);
}
.now-card--inline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.now-card--inline h2 { margin: 0; }

.hint-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.hint-card > div { flex: 1 1 24rem; }
.hint-card p { margin: 0; }

.day { list-style: none; margin: 0 0 8px; padding: 0; }
.day__item { display: flex; align-items: center; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.day__item:last-child { border-bottom: 0; }
.day__time { flex: none; width: 7.5rem; color: var(--text-muted); font-variant-numeric: tabular-nums; font-size: .9375rem; }
.day__item--past { opacity: .5; }
.day__item--now .day__time { color: var(--accent); font-weight: 600; }

/* ---------------- Einstellungen ---------------- */

.save-status { color: var(--text-muted); font-size: .875rem; min-height: 1.25rem; }
.field--inline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.field--inline .field__label { margin: 0; }
.input--time { width: 8rem; }
.input--num { width: 5rem; padding-right: .4rem; }
.times { margin: 8px 0 16px; max-width: 34rem; }
.times th[scope="row"] { color: var(--text); font-size: .9375rem; font-weight: 600; }
.times td.num { text-align: left; }
.times__min { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); }
.times__pause th[scope="row"], .times__pause td { color: var(--text-muted); font-weight: 400; background: var(--surface-2); }
.empty-hint { display: grid; gap: 12px; justify-items: start; margin: 8px 0 16px; }
.empty-hint p { margin: 0; }

.week__scroll, .table-scroll { overflow-x: auto; }
.week { width: 100%; min-width: 36rem; border-collapse: separate; border-spacing: 4px; }
.week thead th { padding: 4px; color: var(--text-muted); font-size: .8125rem; font-weight: 600; text-align: left; }
.week tbody th { padding: 4px 8px 4px 0; text-align: left; font-weight: 600; white-space: nowrap; vertical-align: middle; }
.week__time { display: block; color: var(--text-muted); font-size: .75rem; font-weight: 400; font-variant-numeric: tabular-nums; }
.week td { padding: 0; }
.week__select { min-height: 36px; padding: 4px 8px; font-size: .9375rem; }
.week td.is-set .week__select { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--accent-soft); font-weight: 600; }
.week__pause td { padding: 2px 8px; color: var(--text-muted); font-size: .75rem; text-align: center; background: var(--surface-2); border-radius: 4px; }
.week__short { display: none; }
@media (max-width: 719px) { .week__long { display: none; } .week__short { display: inline; } }

.choices { display: grid; gap: 8px; margin: 16px 0; }
.choice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--t), background-color var(--t);
}
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.choice input { flex: none; margin: 4px 0 0; accent-color: var(--accent); width: 1.05rem; height: 1.05rem; }
.choice > span { font-weight: 600; }
.choice__sub { display: block; margin-top: 2px; color: var(--text-muted); font-size: .875rem; font-weight: 400; }
.choice__inline { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.choice__inline .input--num { min-height: 32px; width: 4.5rem; padding: 2px 6px; }
.check--setting { margin: 0; font-size: .9375rem; }
.check--setting strong { color: var(--text); }

/* ---------------- Auswertung Klasse ---------------- */

.class-stats a { color: var(--text); font-weight: 600; text-decoration: none; }
.class-stats a:hover { color: var(--accent); }

/* Kartenkopf mit Ueberschrift und Aktion (z. B. "Exportieren") */
.card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 8px; }
.card__head h2 { margin: 0; font-size: 1.25rem; font-weight: 500; letter-spacing: -.015em; }

/* ---------------- Import ---------------- */

.import-fields { display: grid; gap: 0 16px; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); align-items: end; margin-top: 16px; }
.name-list { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 16px 0; padding: 0; }
.name-list li {
  padding: 4px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: 999px;
  background: var(--accent-soft);
  font-size: .9375rem;
  font-weight: 500;
}
.name-list li.is-existing { border-color: var(--border); background: transparent; color: var(--text-muted); font-weight: 400; }
.name-list__note { margin-left: 6px; font-size: .75rem; }
.import-groups .list__item { flex-wrap: wrap; }
.import-groups__text { flex: 1 1 14rem; min-width: 0; }
.import-groups__select { flex: 0 1 16rem; width: auto; }
.week--preview td { padding: 6px 8px; min-height: 36px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: .9375rem; }
.week--preview td.is-set { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--accent-soft); font-weight: 600; }

/* ---------------- Board ---------------- */

.board {
  display: flex;
  gap: 1rem;
  align-items: stretch;
}
@media (max-width: 760px) {
  .board { flex-direction: column; }
}

.column {
  display: flex;
  flex-direction: column;
  /* flex-grow wird per JS proportional zur Schueleranzahl gesetzt
     (layoutBoard() in app.js); flex-basis 0 laesst die Breite allein
     daraus entstehen, min-width/-height sind die Untergrenze. */
  flex: 0 1 0;
  min-width: 12rem;
  min-height: 8rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--col-links-bg);
  overflow: hidden;
}
.column--mitte  { background: var(--col-mitte-bg); }
.column--rechts { background: var(--col-rechts-bg); }

.column__head {
  flex: none;
  padding: .75rem 1rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--col-links-head);
  border-bottom: 1px solid rgba(128, 128, 128, .18);
}
.column--mitte  .column__head { color: var(--col-mitte-head); }
.column--rechts .column__head { color: var(--col-rechts-head); }
.column__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.column__count { flex: none; font-weight: 500; opacity: .75; }

.column__body {
  flex: 1 1 auto;
  /* Muss auf 0 stehen, sonst verhindert die implizite min-height:auto
     eines Flex-Kindes das Schrumpfen und overflow-y:auto scrollt nie. */
  min-height: 0;
  display: grid;
  align-content: start;
  justify-content: start;
  padding: .75rem;
  gap: .6rem;
}
.column--dragover { outline: 2px dashed var(--accent); outline-offset: -4px; }
.column--invalid  { opacity: .55; }

/* ---------------- Sortierte Ansicht ---------------- */
/* Ein einzelnes Raster ueber alle Schueler statt drei Spalten; Groesse
   wird per JS gesetzt (layoutStudentGrid() in app.js). Zustand 0/1/2 wird
   direkt als Boxfarbe angezeigt, da es hier keine Spaltenflaeche gibt,
   die das sonst uebernehmen wuerde. */
.sorted-grid {
  display: grid;
  align-content: start;
  justify-content: start;
  padding: .75rem;
  overflow: hidden;
}
.sorted-grid .student { cursor: pointer; }
.sorted-grid .student[data-column="links"]  { background: var(--col-links-bg); }
.sorted-grid .student[data-column="mitte"]  { background: var(--col-mitte-bg); }
.sorted-grid .student[data-column="rechts"] { background: var(--col-rechts-bg); }

/* ---------------- Klassenansicht ---------------- */
/* Nur zum Anschauen (Beamer): keine Bedienung, daher kein Zeiger. */
.class-view .student,
.class-view .sorted-grid .student { cursor: default; }
.class-view__modes { flex: none; overflow: visible; }

.count-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
@media (max-width: 760px) {
  .count-board { grid-template-columns: 1fr; }
}
.count-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 0;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--col-links-bg);
  color: var(--col-links-head);
  text-align: center;
}
.count-tile--mitte  { background: var(--col-mitte-bg);  color: var(--col-mitte-head); }
.count-tile--rechts { background: var(--col-rechts-bg); color: var(--col-rechts-head); }
.count-tile__value {
  font-size: clamp(3.5rem, 16vmin, 14rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.count-tile__label { font-size: clamp(1rem, 3.2vmin, 2.25rem); font-weight: 700; }

.student {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .2em;
  padding: .4em;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  user-select: none;
  -webkit-user-select: none;
  text-align: center;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  /* font-size wird per JS gesetzt (layoutBoard() in app.js), abhaengig von
     der berechneten Boxgroesse, nie unter der Mindestschriftgroesse. */
}
/* Kanban: Ziehen per Pointer Events; touch-action none, damit der Finger
   die Karte bewegt statt die Seite zu scrollen. */
.student--draggable { cursor: grab; touch-action: none; }
.student--dragging { opacity: .45; }
.student--floating {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 50;
  margin: 0;
  pointer-events: none;
  cursor: grabbing;
  opacity: .95;
  box-shadow: var(--shadow-lg);
  border-color: var(--accent);
}

.student__name {
  max-width: 100%;
  font-weight: 700;
  letter-spacing: -.01em;
  overflow-wrap: normal;
  line-height: 1.15;
}

/* ---------------- Auswertung ---------------- */

.stats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 16px;
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.stat__label { font-size: .875rem; color: var(--text-muted); }
.stat--mitte  { background: var(--col-mitte-bg); border-color: transparent; }
.stat--rechts { background: var(--col-rechts-bg); border-color: transparent; }
.stat--mitte  .stat__label { color: var(--col-mitte-head); }
.stat--rechts .stat__label { color: var(--col-rechts-head); }
.stat__value { order: -1; font-size: 1.75rem; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th, .table td { padding: .5rem .4rem; text-align: left; border-bottom: 1px solid var(--border); }
.table th { color: var(--text-muted); font-weight: 600; font-size: .8rem; }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------------- Fokus-Wald ---------------- */

.btn--lg { min-height: 3rem; padding: .7rem 1.4rem; font-size: 1.05rem; }

.rank {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.list__item:first-child .rank { background: var(--accent); border-color: transparent; color: var(--accent-text); }

.goals {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.25rem, 1fr));
  gap: .5rem;
  margin: .75rem 0 1rem;
}
.goal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  padding: .5rem .4rem .6rem;
  font: inherit;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color var(--t), box-shadow var(--t);
}
.goal:hover { border-color: var(--accent); }
.goal:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.goal[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.goal__min { font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.goal__species { font-size: .75rem; color: var(--text-muted); }

.rules { margin: .5rem 0 0; padding-left: 1.2rem; }
.rules li + li { margin-top: .25rem; }
details summary { cursor: pointer; }

.forest {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .1rem;
  margin-top: 1rem;
  padding: .6rem .5rem .3rem;
  border-radius: 10px;
  background: var(--col-mitte-bg);
}

.progress {
  height: .6rem;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.progress__fill { height: 100%; background: var(--col-mitte-head); border-radius: inherit; transition: width .4s; }

.reward {
  display: grid;
  gap: .35rem;
  margin-top: 1rem;
  padding: .75rem .85rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
}
.reward__head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.reward .btn { justify-self: start; }

.reward-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; }
.reward-form .field { flex: 1 1 14rem; margin-bottom: 0; }
.reward-form .field--num { flex: 0 1 7rem; }

/* Baum-Steckbrief */

.treefact {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px 24px;
  align-items: start;
  padding: 16px 24px 16px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.treefact__pic {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 8px 8px 0;
  border-radius: var(--radius-sm);
  background: linear-gradient(to bottom, var(--sky-top), var(--sky-bottom) 70%, var(--meadow) 70%);
}
.treefact__kicker { margin: 0 0 4px; color: var(--accent); font-size: .8125rem; font-weight: 600; }
.treefact h3 { margin: 0 0 8px; font-size: 1.125rem; font-weight: 600; }
.treefact__latin { margin-left: 8px; color: var(--text-muted); font-size: .875rem; font-weight: 400; font-style: italic; }
.treefact__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.treefact__chips li {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: .8125rem;
  font-weight: 500;
}
.treefact__text { margin: 0; text-wrap: pretty; }
.treefact__note { margin: 8px 0 0; color: var(--text-muted); font-size: .875rem; }
@media (max-width: 479px) {
  .treefact { grid-template-columns: 1fr; padding: 16px; }
  .treefact__pic { justify-self: start; }
}

.goal-fact { margin: 0 0 24px; }

/* Alle Arten in Wachstumsreihenfolge (offenes Ziel) */
.ladder {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.ladder li { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 4.5rem; font-size: .8125rem; }
.ladder span { color: var(--text-muted); }

/* ---------------- Waelder-Landschaft ---------------- */

:root {
  --sky-top:    #dcefff;
  --sky-bottom: #f3f9ec;
  --meadow:     #bfe0a0;
  --meadow-2:   #a5d184;
  --sign:       #8a5a33;
  --sign-text:  #fff8ec;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sky-top:    #0c1a2b;
    --sky-bottom: #1a2a2a;
    --meadow:     #22422a;
    --meadow-2:   #1a3521;
    --sign:       #6b4426;
  }
}

.landscape {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(to bottom, var(--sky-top), var(--sky-bottom));
  cursor: grab;
  -webkit-overflow-scrolling: touch;
}
.landscape.is-dragging { cursor: grabbing; user-select: none; }
.landscape:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.landscape__track {
  display: flex;
  align-items: flex-end;
  gap: 120px;
  width: max-content;
  min-width: 100%;
  /* Seitlicher Leerraum, damit auch der erste und letzte Wald mittig stehen koennen */
  padding: 24px max(48px, calc(50vw - 260px)) 36px;
  background: linear-gradient(to bottom, transparent calc(100% - 52px), var(--meadow) calc(100% - 52px), var(--meadow-2));
}
.landscape--compact { cursor: default; }
.card > .landscape, .reward + .landscape { margin-top: 16px; }
.landscape--compact .landscape__track { justify-content: center; padding: 24px 24px 28px; }
.landscape--compact .grove__sign { display: none; }

.grove { display: flex; flex-direction: column; align-items: center; flex: none; }
.grove__sign {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 12px;
  padding: 6px 16px 8px;
  border-radius: var(--radius-sm);
  background: var(--sign);
  color: var(--sign-text);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .18), var(--shadow);
  line-height: 1.25;
  white-space: nowrap;
}
.grove__sign strong { font-size: 1.125rem; letter-spacing: -.01em; }
.grove__sign span { font-size: .75rem; opacity: .85; font-variant-numeric: tabular-nums; }

.grove__plot { position: relative; }
.grove__plot::before {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -12px;
  height: 32px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(40, 80, 30, .30), transparent);
}
.grove__tree {
  position: absolute;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transform-origin: 50% 92%;
  transition: transform var(--t), filter var(--t);
}
.grove__tree .tree { width: 100%; height: 100%; }
.grove__tree:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.grove__tree.is-selected { filter: drop-shadow(0 0 6px rgba(253, 224, 71, .95)); transform: scale(1.06); }
@media (hover: hover) {
  .grove__tree:hover { transform: scale(1.08); }
}
.grove__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--text-muted);
  font-size: .875rem;
}
.grove__empty .tree { width: 72px; height: 86px; }

.walk__nav { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.chips { display: flex; gap: 8px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.chip {
  flex: none;
  min-height: 36px;
  padding: 4px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--t), color var(--t), border-color var(--t);
}
.chip[aria-current="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (pointer: coarse) { .chip { min-height: 44px; } }

.walk__info { margin-top: 16px; }
.walk__info:empty { display: none; }
.walk__hint { margin: 0; text-align: center; color: var(--text-muted); font-size: .9375rem; }

.lexicon { margin-top: 64px; }
.lexicon h2 { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); font-weight: 400; letter-spacing: -.03em; }
.lexicon > p { max-width: 60ch; margin: 0 0 24px; }
.lexicon__grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); }

/* Baum-Grafik (SVG, viewBox 0 0 200 240) */

.tree { display: block; overflow: visible; }
.tree__soil { fill: #6b4f3a; }
.tree__shadow { fill: rgba(0, 0, 0, .14); }
.tree__sprout { transition: opacity .6s; }
.tree__scale {
  transform-box: view-box;
  transform-origin: 100px 222px;
  transition: transform .8s ease-out, opacity .6s;
}
.tree__motion { transform-box: view-box; transform-origin: 100px 222px; }

.leaf {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  transition: transform .9s cubic-bezier(.34, 1.56, .64, 1), fill 1s;
}
.leaf.is-on { transform: scale(1); }

.tree--still .leaf,
.tree--still .tree__scale,
.tree--instant .leaf,
.tree--instant .tree__scale,
.tree--instant .tree__sprout { transition: none !important; }
.tree--instant .leaf { animation: none !important; }

.tree--calm   .tree__motion { animation: tree-sway 6s ease-in-out infinite; }
.tree--uneasy .tree__motion { animation: tree-sway 1.8s ease-in-out infinite; }
.tree--loud   .tree__motion { animation: tree-shake .35s linear infinite; }
.tree--done   .tree__motion { animation: tree-sway 4s ease-in-out infinite; }
.tree--done   { filter: drop-shadow(0 0 28px rgba(253, 224, 71, .45)); }

.tree--loud .leaf.is-on { fill: #d99a3a; }
.tree--withered .leaf.is-on {
  fill: #8a5a24;
  animation: leaf-fall 1.4s ease-in forwards;
  animation-delay: calc(var(--i, 0) * 60ms);
}

@keyframes tree-sway {
  0%, 100% { transform: rotate(-1.2deg); }
  50%      { transform: rotate(1.2deg); }
}
@keyframes tree-shake {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-3deg); }
  75%      { transform: rotate(3deg); }
}
@keyframes leaf-fall {
  to { transform: translateY(80px) rotate(40deg) scale(.5); opacity: 0; }
}

/* Voegel und Nest am Kirschbaum (offenes Ziel). Ebenen siehe birdLayers():
   .bird kommt an, .bird__mood reagiert auf Laerm, .bird__idle lebt im Alltag. */
.bird, .bird__mood, .bird__idle, .bird__head, .bird__wing, .bird__beak, .bird__wings {
  transform-box: fill-box;
}
.bird {
  transform-origin: center bottom;
  transform: scale(0);
  opacity: 0;
  transition: transform .7s cubic-bezier(.34, 1.56, .64, 1), opacity .4s;
}
.bird.is-on { transform: scale(1); opacity: 1; }
/* Sitzende und fliegende Voegel fliegen vom Rand herein statt aufzuploppen. */
.bird--perched, .bird--flying { transform: none; }
.bird--perched.is-on, .bird--flying.is-on { animation: bird-arrive 1.8s cubic-bezier(.2, .7, .3, 1) both; }

/* Alltag: picken, umschauen, Gefieder schuetteln, betteln; jeder Vogel im
   eigenen Takt. Nur sichtbare Voegel bewegen sich (grosse Waelder). */
.bird__idle { transform-origin: 60% 100%; }
.bird__head { transform-origin: center; }
.bird__wing { transform-origin: 75% 40%; }
.bird__beak { transform-origin: center bottom; }
.bird__wings { transform-origin: center 80%; }
.bird--perched.is-on .bird__idle { animation: bird-peck var(--t) var(--delay) ease-in-out infinite; }
.bird.is-on .bird__head { animation: bird-look calc(var(--t) * 1.3) var(--delay) ease-in-out infinite; }
.bird.is-on .bird__wing { animation: wing-ruffle var(--t) var(--delay) ease-in-out infinite; }
.bird--chick.is-on .bird__idle { animation: chick-beg calc(var(--t) * .6) var(--delay) ease-in-out infinite; }
.bird--chick.is-on .bird__beak { animation: beak-open calc(var(--t) * .6) var(--delay) ease-in-out infinite; }
.bird--flying.is-on .bird__idle { animation: bird-glide 3.2s var(--delay) ease-in-out infinite; }
.bird.is-on .bird__wings { animation: wing-beat 2.4s var(--delay) ease-in-out infinite; }
/* Beim Anflug schlagen die Fluegel, danach wieder Alltag. */
.bird--perched.is-on .bird__wing { animation: wing-ruffle var(--t) var(--delay) ease-in-out infinite, wing-flap .15s ease-in-out 11 alternate; }

/* Nestbau (offenes Ziel, 12 bis 15 min): die zwei Erbauer fliegen abwechselnd
   los und kommen mit einem Zweig zum Nest. Jeder Durchlauf endet am Nest, dort
   legt app.js (animationiteration) den naechsten Zweig ab. */
.nest-twig { opacity: 0; transition: opacity .5s; }
.nest-twig.is-on { opacity: 1; }
.bird__stick { opacity: 0; }
.is-building .bird--builder.is-on .bird__mood { animation: bird-trip 24s var(--trip-delay) ease-in-out infinite; }
.is-building .bird--builder.is-on .bird__stick { animation: stick-carry 24s var(--trip-delay) linear infinite; }

/* Laerm: unruhig hopsen; wird der Baum zurueckgesetzt, fliegen sie davon. */
.tree.tree--loud .bird .bird__mood { animation: bird-hop .3s linear infinite; }
.tree.tree--withered .bird .bird__mood,
.tree.tree--banked .bird .bird__mood { animation: bird-away 1.2s ease-in forwards; }

.tree--still .bird,
.tree--instant .bird { transition: none !important; animation: none !important; }
/* Schwarze Amseln auf dem dunklen Beamer-Hintergrund: heller Schein als Kontur. */
.focus__stage .bird--perched,
.focus__stage .bird--flying { filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, .7)); }
.tree--still .bird--perched.is-on .bird__wing { animation: wing-ruffle var(--t) var(--delay) ease-in-out infinite; }

@keyframes bird-arrive {
  from { transform: translate(var(--fx), var(--fy)) scale(.7); opacity: 0; }
  20%  { opacity: 1; }
  to   { transform: none; opacity: 1; }
}
@keyframes wing-flap {
  from { transform: rotate(0); }
  to   { transform: rotate(-55deg); }
}
@keyframes bird-peck {
  0%, 56%, 76%, 100% { transform: none; }
  60%, 68%           { transform: rotate(34deg); }
  64%, 72%           { transform: rotate(14deg); }
}
@keyframes bird-look {
  0%, 18%, 36%, 100% { transform: none; }
  21%, 33%           { transform: scaleX(-1); }
}
@keyframes wing-ruffle {
  0%, 84%, 94%, 100% { transform: none; }
  86%, 90%           { transform: rotate(-24deg); }
  88%, 92%           { transform: rotate(-6deg); }
}
@keyframes chick-beg {
  0%, 40%, 64%, 100% { transform: none; }
  44%, 52%, 60%      { transform: translateY(-3px); }
  48%, 56%           { transform: translateY(-1.5px); }
}
@keyframes beak-open {
  0%, 40%, 64%, 100% { transform: none; }
  44%, 60%           { transform: scale(1.3, 1.6); }
}
@keyframes bird-glide {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(5px, -6px); }
}
@keyframes wing-beat {
  0%, 30%, 100% { transform: none; }
  5%, 15%, 25%  { transform: scaleY(-.7); }
  10%, 20%      { transform: none; }
}
/* Koordinaten im Vogel (1.3-fach, gespiegelt): (18, 55) ist das Nest. */
@keyframes bird-trip {
  0%       { transform: translate(18px, 55px); opacity: 1; }
  10%, 45% { transform: none; opacity: 1; }
  57%, 72% { transform: translate(-130px, -70px); opacity: 0; }
  80%      { transform: translate(-50px, -12px); opacity: 1; }
  90%, 100% { transform: translate(18px, 55px); opacity: 1; }
}
@keyframes stick-carry {
  0%, 72%  { opacity: 0; }
  74%, 99% { opacity: 1; }
  100%     { opacity: 0; }
}
@keyframes bird-hop {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
@keyframes bird-away {
  to { transform: translate(40px, -70px) scale(.6); opacity: 0; }
}

/* Beamer-Ansicht: feste Farben, unabhaengig vom Hell/Dunkel-Modus */

.app--focus { padding: 0; max-width: none; }

.focus {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  color: #f1f5f4;
  background-color: #12343b;
  background-image:
    radial-gradient(ellipse 80% 55% at 50% 100%, rgba(255, 255, 255, .10), transparent 70%),
    linear-gradient(to bottom, rgba(0, 0, 0, .28), transparent 45%);
  transition: background-color 1.2s ease;
}
.focus--uneasy   { background-color: #4a3d14; }
.focus--loud     { background-color: #5c1b1b; }
.focus--withered { background-color: #4a2a17; }
.focus--paused   { background-color: #262b36; }
.focus--done     { background-color: #14452f; }
.focus--banked   { background-color: #14452f; }

.focus__progress { position: absolute; top: 0; left: 0; right: 0; height: 5px; background: rgba(255, 255, 255, .1); }
.focus__progress-fill { width: 0; height: 100%; background: #86efac; transition: width .3s linear; }

.focus__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1.1rem 1.25rem .5rem;
}
.focus__time {
  font-size: clamp(3rem, 10vw, 7rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.focus__goal { margin-top: .4rem; font-size: 1.05rem; opacity: .8; }
.focus__head { min-width: 0; flex: 1 1 18rem; }
.focus__fact { max-width: 46ch; margin-top: .6rem; font-size: clamp(.9rem, .8rem + .4vw, 1.1rem); line-height: 1.45; opacity: .7; text-wrap: pretty; }

.focus__panel {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  width: min(22rem, 100%);
  padding: .8rem .9rem;
  border-radius: 12px;
  background: rgba(0, 0, 0, .28);
  border: 1px solid rgba(255, 255, 255, .12);
}
.focus__buttons { display: flex; flex-wrap: wrap; gap: .4rem; }
/* Umbrochene Knoepfe fuellen die Zeile, statt einzeln links zu haengen */
.focus__buttons .btn { flex: 1 1 auto; }
.focus .btn { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .22); color: inherit; }
.focus .btn:hover:not(:disabled) { background: rgba(255, 255, 255, .24); }
.focus .btn--primary { background: #f1f5f4; border-color: #f1f5f4; color: #12343b; }
.focus .btn--primary:hover:not(:disabled) { background: #fff; }
.focus .btn:focus-visible { outline-color: #fde047; }
.focus__label { display: block; margin-bottom: .3rem; font-size: .8rem; opacity: .75; }
.focus__scale { display: flex; justify-content: space-between; font-size: .75rem; opacity: .6; }
.focus__sub { font-size: .9rem; opacity: .8; }

.meter {
  position: relative;
  height: .8rem;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, .14);
}
.meter__fill { width: 0; height: 100%; border-radius: inherit; transition: width .12s linear, background-color .3s; }
.meter__fill--ruhig   { background: #4ade80; }
.meter__fill--unruhig { background: #facc15; }
.meter__fill--laut    { background: #f87171; }
.meter__mark { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(255, 255, 255, .6); }

.slider { display: block; width: 100%; accent-color: #86efac; }

.focus__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-height: 0;
  padding: 0 1rem;
}
.focus__stage > :not(.focus__backdrop) { position: relative; z-index: 1; }
/* Bisher geschaffte Baeume der Klasse, blass hinter dem wachsenden Baum. */
.focus__backdrop {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  opacity: .35;
  pointer-events: none;
}
.focus__backdrop .forest {
  flex-wrap: wrap-reverse;
  justify-content: center;
  gap: 0 .4rem;
  margin: 0;
  padding: 0 0 .2rem;
  background: none;
}
.focus__status {
  margin-bottom: .25rem;
  min-height: 1.3em;
  font-size: clamp(1.25rem, 3.4vw, 2.2rem);
  font-weight: 700;
  text-align: center;
}
.focus__stage .tree { flex: 0 1 auto; min-height: 0; height: min(60vh, 38rem); height: min(60dvh, 38rem); width: auto; max-width: 100%; aspect-ratio: 200 / 240; }

.focus__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: .75rem 2rem;
  padding: .5rem 1.25rem 1.1rem;
}
.focus__forest { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; min-width: 0; }
.focus__forest .forest { margin: 0; padding: 0; background: none; }
.focus__reward { display: grid; gap: .3rem; flex: 1 1 16rem; max-width: 30rem; }
.focus .progress { background: rgba(255, 255, 255, .14); border-color: transparent; }
.focus .progress__fill { background: #86efac; }

.celebrate {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(4, 20, 16, .55);
}
.celebrate__panel {
  position: relative;
  width: min(30rem, 100%);
  padding: 1.5rem 1.75rem;
  text-align: center;
  border-radius: 16px;
  background: #0c2c21;
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: var(--shadow-lg);
}
.celebrate__panel .tree { margin: 0 auto .5rem; }
.celebrate__panel h2 { font-size: 2rem; }
.celebrate__reward { font-weight: 600; color: #fde047; }
.celebrate__fact { margin: 0 0 1rem; font-size: .95rem; line-height: 1.45; opacity: .85; text-wrap: pretty; }
.celebrate__panel h2 { text-wrap: balance; }

.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.confetti span {
  position: absolute;
  top: -16px;
  width: 10px;
  height: 14px;
  border-radius: 2px;
  opacity: 0;
  animation: confetti-fall var(--d, 2.6s) linear var(--delay, 0s) forwards;
}
@keyframes confetti-fall {
  0%   { opacity: 1; transform: translateY(0) rotate(0); }
  100% { opacity: .9; transform: translateY(105vh) rotate(540deg); }
}

@media (max-width: 560px) {
  .focus__panel { width: 100%; }
  .focus__stage .tree { height: 42vh; height: 42dvh; }
}

@media (prefers-reduced-motion: reduce) {
  .tree__motion, .tree--withered .leaf.is-on, .confetti span,
  .bird, .bird *, .bird__mood, .bird__idle { animation: none !important; }
  .confetti { display: none; }
  .leaf, .tree__scale, .bird { transition: none; }
}

/* ---------------- Dialog ---------------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(17, 17, 17, .5);
}
.modal__panel {
  width: min(32rem, 100%);
  max-height: 85vh;
  max-height: 85dvh;   /* mobil: Hoehe ohne eingeblendete Browserleiste */
  overflow: auto;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 1.25rem;
}

/* Ansicht waehlen (Start eines Unterrichts) */
.mode-options { display: grid; gap: 12px; }
@media (min-width: 480px) { .mode-options { grid-template-columns: 1fr 1fr; } }
.mode-option {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 12px 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.mode-option:active { transform: scale(.98); }
.mode-option:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) {
  .mode-option:hover { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
}
.mode-option__title { display: block; padding: 0 4px; font-weight: 600; }
.mode-option__sub { display: block; margin-top: 2px; padding: 0 4px; color: var(--text-muted); font-size: .875rem; line-height: 1.4; }

.mode-glyph { display: grid; gap: 4px; height: 64px; padding: 6px; border-radius: var(--radius-sm); background: var(--surface-2); }
.mode-glyph i { border-radius: 3px; }
.mode-glyph--kanban { grid-template-columns: 2fr 1fr 1fr; }
.mode-glyph--grid { grid-template-columns: repeat(6, 1fr); grid-template-rows: 1fr 1fr; }
.mode-glyph [data-s="links"]  { background: var(--col-links-bg); box-shadow: inset 0 0 0 1px var(--border); }
.mode-glyph [data-s="mitte"]  { background: var(--col-mitte-bg); }
.mode-glyph [data-s="rechts"] { background: var(--col-rechts-bg); }
@media (prefers-reduced-motion: reduce) { .mode-option:active { transform: none; } }

/* ---------------- Toast ---------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  z-index: 50;
  max-width: min(28rem, calc(100vw - 2rem));
  padding: .7rem 1rem;
  border-radius: 16px;
  background: var(--forest);
  color: var(--forest-text);
  box-shadow: var(--shadow-lg);
  font-size: .9rem;
}
.toast--error { background: var(--danger); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------- Sitzplan ---------------- */
/* Raum in virtuellen Einheiten 1200 x 700, Tisch 120 x 60 (SEAT_* in
   app.js). Tische sind prozentual positioniert, die Schrift skaliert per
   Container-Einheiten mit der Raumbreite. */

.seat-tray {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  min-height: 3.2rem;
}
.seat-tray .seat { position: relative; width: 7.5rem; height: 3.2rem; font-size: .9rem; }

.seating { padding: .75rem; }

.seat-room {
  position: relative;
  aspect-ratio: 1200 / 700;
  container-type: inline-size;
  background:
    linear-gradient(var(--border) 1px, transparent 1px) 0 0 / calc(100% / 20) calc(100% / 11.667),
    linear-gradient(90deg, var(--border) 1px, transparent 1px) 0 0 / calc(100% / 20) calc(100% / 11.667),
    var(--surface-2);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
}

.seating__board {
  margin: 0 auto;
  width: 45%;
  padding: .35rem 0;
  text-align: center;
  font-weight: 700;
  letter-spacing: .08em;
  color: #e8f5e9;
  background: #2e5a3c;
  border-radius: 0 0 8px 8px;
}

.seat {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .2em .4em;
  background: var(--surface);
  border: 1px solid var(--col-links-head);
  border-radius: 8px;
  box-shadow: var(--shadow);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  text-align: center;
  overflow: hidden;
}
/* Position und Groesse setzt app.js (placeEl) prozentual. */
.seat-room .seat { font-size: clamp(.7rem, 1.25cqw, 1.05rem); }
.seat__name {
  font-weight: 700;
  line-height: 1.1;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Hochkant: Name senkrecht, damit er in den schmalen Tisch passt. */
.seat--rot { padding: .4em .2em; }
.seat--rot .seat__name { writing-mode: vertical-rl; }

.seat--sq-tl { border-top-left-radius: 0; }
.seat--sq-tr { border-top-right-radius: 0; }
.seat--sq-bl { border-bottom-left-radius: 0; }
.seat--sq-br { border-bottom-right-radius: 0; }

.seat--lifted { opacity: .3; }
.seat--floating {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 50;
  pointer-events: none;
  cursor: grabbing;
  box-shadow: var(--shadow-lg);
  border-color: var(--accent);
}
.seat--invalid { border-color: var(--danger); opacity: .8; }

.seat-ghost {
  position: absolute;
  border: 2px dashed var(--accent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  pointer-events: none;
}

/* Einladungen (Einstellungen, nur Admins) */
.invite__main { flex: 1 1 auto; min-width: 0; font-weight: 600; }