/* =============================================================================
   Lernportal — Designsystem
   Handgeschrieben, kein Build-Schritt. Ein Blatt Papier auf einem dunklen
   Tisch: der Rahmen ist Marken-Navy, die Fläche darin weiß, und auf der
   Fläche liegen wenige, klar unterscheidbare Kacheln. Jede Kachel hat genau
   eine Aufgabe und eine Farbe, die nur ihr gehört.

   Es gibt bewusst nur ein Theme. Der dunkle Rahmen ist Teil des Bilds, nicht
   ein Nachtmodus — hell und dunkel entstehen aus demselben Blatt.
   ============================================================================= */

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin.woff2") format("woff2");
}

:root {
  /* Der Tisch: Marken-Navy, leicht abgedunkelt, damit Weiß darauf leuchtet */
  --frame:         #0f2d4d;
  --frame-ink:     #bfd0e2;
  --frame-ink-on:  #ffffff;

  /* Das Blatt */
  --bg:            #ffffff;
  --surface:       #ffffff;
  --surface-muted: #f3f5f9;
  --well:          #f3f5f9;     /* ruhige Kachel */
  --ink:           #14213a;
  --ink-soft:      #5b6478;
  --ink-faint:     #8a92a6;
  --line:          #e6e9f0;

  /* Die zwei lauten Kacheln: der Verlauf (Himmel → Pfirsich) und Pfirsich pur */
  --hero-a:        #d7e6f1;
  --hero-b:        #f7dccb;
  --hero-ink:      #14213a;
  --peach:         #fbe7d9;
  --peach-deep:    #f0a24e;
  --peach-ink:     #3a2415;

  /* Marke: Navy trägt Knöpfe und aktive Zustände, Magenta die Gewohnheiten */
  --accent:        #1f5f8b;
  --accent-ink:    #ffffff;
  --accent-soft:   #e4eef6;
  --accent-2:      #be56ff;
  --accent-deep:   #003b72;
  --grad:          linear-gradient(135deg, var(--accent-deep), var(--accent-2));
  --warn:          #b8620f;
  --warn-soft:     #fdf1e4;
  --ok:            #1f9a5f;     /* erledigt: Häkchen und Punkte werden grün */
  --ok-soft:       #e3f5eb;

  --radius:    16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --tap:       44px;

  --shadow: 0 1px 2px rgba(20, 33, 58, .04), 0 10px 30px -18px rgba(20, 33, 58, .25);

  --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ------------------------------------------------------------------ Grundlagen */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  display: flex;                 /* Streifen oben (Zusehen/Testschüler) + Rahmen darunter */
  flex-direction: column;
  background: var(--frame);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3 { margin: 0; line-height: 1.2; letter-spacing: -.02em; font-weight: 700; }
p  { margin: 0; }
a  { color: inherit; }
svg { display: block; }
/* `hidden` muss gewinnen, auch gegen .task { display: flex } — darauf baut
   das Einpassen der Listen (app.js, „Passend") auf. */
[hidden] { display: none !important; }

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

/* ------------------------------------------------------------------ Gerüst

   Handy: das Blatt füllt den Bildschirm, unten die Tableiste.
   Laptop (ab 900px): dunkler Rahmen, links eine schmale Leiste mit den
   Reitern, rechts das weiße Blatt mit abgerundeten Ecken. Das Blatt ist so
   hoch wie der Bildschirm — was nicht hineinpasst, liegt hinter einem Klick,
   nicht hinter einem Scroll. */

.shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  /* Sicherheitsnetz: nichts darf die Seite breiter machen als den Bildschirm,
     sonst lässt das Handy herauszoomen und quetscht alles zusammen. clip statt
     hidden, weil clip keinen eigenen Scrollbereich erzeugt. */
  overflow-x: clip;
}

.sheet {
  flex: 1 1 auto;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rail { display: none; }

.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px 0;
}
.topbar__brand { font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.topbar__link  { margin-left: auto; font-size: 14px; color: var(--ink-soft); text-decoration: none; }
.topbar__link:hover { color: var(--ink); }
.topbar__logout { margin-left: auto; }
.topbar__link + .topbar__logout { margin-left: 0; }

.linkish {
  background: none; border: 0; padding: 0;
  font: inherit; font-size: 14px; color: var(--ink-faint);
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.linkish:hover { color: var(--ink); }

.page {
  flex: 0 0 auto;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 18px 16px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
body.has-nav .page { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }

@media (min-width: 900px) {
  /* Der Rahmen füllt den Bildschirm unter dem Streifen — nicht mehr, nicht
     weniger. Das Blatt wächst mit dem Rahmen, nie darüber hinaus. */
  body { height: 100dvh; min-height: 0; }
  .shell {
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: row;
    padding: 16px 16px 16px 0;
    gap: 0;
  }
  .rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 96px;
    padding: 8px 0 12px;
    color: var(--frame-ink);
  }
  .rail__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 10px 0 26px;
    color: var(--frame-ink-on);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: -.01em;
    text-decoration: none;
  }
  .rail__mark { width: 34px; height: 34px; }
  .rail__nav { display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 0 12px; }
  .rail__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 10px 4px 8px;
    border-radius: 14px;
    color: var(--frame-ink);
    font-size: 10.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
  }
  .rail__item:hover { color: var(--frame-ink-on); background: rgba(255, 255, 255, .06); }
  .rail__item--active { color: var(--frame-ink-on); }
  .rail__item--active .rail__icon { background: var(--bg); color: var(--frame); }
  .rail__icon {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    transition: background .15s ease, color .15s ease;
  }
  .rail__icon svg { width: 21px; height: 21px; }
  .rail__item > span:last-child { display: block; width: 100%; text-align: center; white-space: nowrap; font-size: 10px; letter-spacing: -.01em; }
  .rail__foot { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; }
  .rail__avatar {
    width: 40px; height: 40px;
    border-radius: 13px;
    display: grid; place-items: center;
    background: var(--hero-b);
    color: var(--peach-ink);
    font-weight: 700;
    font-size: 15px;
  }
  .rail .linkish { color: var(--frame-ink); font-size: 12px; text-decoration: none; }
  .rail .linkish:hover { color: var(--frame-ink-on); }

  .shell:not(.shell--rail) { padding-left: 16px; }
  .sheet {
    min-height: 0;
    border-radius: var(--radius-xl);
    overflow: auto;
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .5);
  }
  /* Die Kachel-Reiter sind auf die Fläche bemessen — dort scrollt nichts.
     Formulare und der Coach-Bereich dürfen weiterhin scrollen. */
  .sheet:has(> .page > .grid) { overflow: auto; }
  .shell--rail .topbar { display: none; }
  .tabbar { display: none; }

  .page, body.has-nav .page {
    max-width: none;
    /* Mindestens so hoch wie das Blatt, aber nie fest: sonst hätte das
       Raster eine feste Höhe und würde Kacheln unter ihren Inhalt drücken. */
    min-height: 100%;
    height: auto;
    flex: 0 0 auto;      /* als Flex-Kind des Blatts nie zusammendrücken lassen */
    padding: 28px 36px 30px;
    gap: 18px;
  }
  .page--wide { max-width: none; }
}

@media (min-width: 1440px) {
  .page, body.has-nav .page { padding: 34px 48px 34px; }
}

/* ------------------------------------------------------------------ Begrüßung

   Eine Zeile Kopf: links Name und Satz, rechts Platz für einen Knopf. Auf dem
   Laptop steht die Zeile über dem Raster und nimmt keine Kachelhöhe weg. */

.greeting { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; }
.greeting > .greeting__sub { flex-basis: 100%; margin-top: 0; }
.greeting__title { font-size: 26px; font-weight: 800; }
.greeting__sub   { margin-top: 4px; color: var(--ink-soft); font-size: 14.5px; }
.greeting__sub strong { color: var(--ink); font-weight: 700; }
.greeting__aside { display: flex; align-items: center; gap: 10px; }
@media (min-width: 900px) {
  .greeting__title { font-size: 30px; }
}

/* ------------------------------------------------------------------ Kacheln

   Das Raster hat zwölf Spalten. Jede Kachel sagt per Klasse, wie breit sie
   ist; auf dem Handy stapeln sich alle. Drei Kachelstimmen:
     .tile--hero   der Verlauf, einmal pro Seite, die größte Zahl
     .tile--peach  ein warmer Akzent, einmal pro Seite
     .tile--well   ruhiges Grau für alles, das nur da sein soll
   Ein Klick führt weiter; nichts scrollt in einer Kachel. */

.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}
@media (min-width: 640px) {
  .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .span-3 { grid-column: span 3; }
  .span-4 { grid-column: span 4; }
  .span-5 { grid-column: span 5; }
  .span-6 { grid-column: span 6; }
  .span-7 { grid-column: span 7; }
  .span-8 { grid-column: span 8; }
  .span-12 { grid-column: span 12; }
}
@media (min-width: 640px) and (max-width: 899px) {
  .span-3, .span-4, .span-5 { grid-column: span 6; }
  .span-7, .span-8 { grid-column: span 12; }
}
@media (min-width: 900px) {
  /* Zeilen teilen sich die Höhe, schrumpfen aber nie unter ihren Inhalt.
     Passt es nicht (kleines Fenster, Streifen oben), scrollt das Blatt —
     besser als Text, der übereinanderliegt. */
  .grid { flex: 1 1 auto; min-height: 0; gap: 18px; grid-auto-rows: auto; align-content: start; }
  /* Die zwei Zeilen teilen sich, was das Blatt an Höhe übrig hat — so
     bekommen eingepasste Listen (.fit) den Platz, den es gibt. Untergrenze
     ist ausdrücklich min-content, NICHT auto: bei auto zählt das min-height
     der Kacheln (33vh) statt ihres Inhalts, und eine höhere Kachel liefe
     über die Zeile hinaus. So wird nie Text übereinandergedrückt; passt es
     gar nicht, scrollt das Blatt. */
  .grid--rows-2 { grid-template-rows: minmax(min-content, 4fr) minmax(min-content, 3fr); align-content: stretch; }
  /* Kacheln bekommen eine Mindesthöhe aus der Bildschirmhöhe: auf einem
     normalen Laptop füllen sie das Blatt, bei kleinem Fenster oder Streifen
     oben wachsen sie mit dem Inhalt und das Blatt scrollt. */
  .grid--rows-2 > * { min-height: 33vh; }
  .grid--rows-2 > .tile--hero, .grid--rows-2 > .span-8:first-child, .grid--rows-2 > .span-7:first-child { min-height: 35vh; }
  .grid--rows-1 > * { min-height: 56vh; }
  .tile, .tile--hero { min-height: auto; }
  .tile--hero .tile__num { font-size: clamp(56px, 9vh, 76px); }
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 150px;
  padding: 20px 22px;
  border-radius: var(--radius-lg);
  background: var(--well);
  color: var(--ink);
  text-decoration: none;
  min-width: 0;
}
.tile--hero {
  background: linear-gradient(115deg, var(--hero-a) 0%, #e7e6f1 55%, var(--hero-b) 100%);
  color: var(--hero-ink);
  border-radius: var(--radius-xl);
  padding: 24px 26px;
  min-height: 220px;
}
.tile--peach { background: var(--peach); color: var(--peach-ink); border-radius: var(--radius-xl); }
.tile--paper { background: var(--surface); border: 1px solid var(--line); }

button.tile { width: 100%; border: 0; font: inherit; text-align: left; }
a.tile, button.tile { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
a.tile:hover, button.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
a.tile:active, button.tile:active { transform: translateY(0); }

.tile__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 10px;
  min-width: 0;
}
.tile__title { font-size: 15px; font-weight: 700; letter-spacing: -.01em; flex: 0 1 auto; min-width: 0; }
/* Die Randnotiz rechts darf umbrechen — ein langer Satz ohne Umbruch ragte
   am Handy über den Rand, und dann lässt Safari die ganze Seite herauszoomen. */
.tile__meta  { font-size: 12.5px; color: var(--ink-faint); text-align: right; flex: 0 1 auto; min-width: 0; }
@media (max-width: 639px) {
  .tile__head { flex-wrap: wrap; }
  .tile__meta { text-align: left; }
}
.tile--hero .tile__meta, .tile--peach .tile__meta { color: inherit; opacity: .65; }

.tile__num {
  font-size: 56px;
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.tile__num small { font-size: .42em; font-weight: 700; letter-spacing: -.01em; opacity: .55; margin-left: 2px; }
.tile--hero .tile__num { font-size: 72px; }
.tile__text { font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.tile--hero .tile__text, .tile--peach .tile__text { color: inherit; opacity: .78; }
.tile__body { flex: 1 1 auto; min-height: min-content; display: flex; flex-direction: column; gap: 8px; }
.tile__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* Der Knopf, der an der Kachelecke sitzt — wie ein Etikett am Blatt */
.tile__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 18px;
  border-radius: 14px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  font-size: 13.5px;
  text-decoration: none;
  white-space: nowrap;
}
.tile__cta svg { width: 14px; height: 14px; }
.tile__cta:hover { filter: brightness(1.08); }
.tile__cta--soft { background: rgba(255, 255, 255, .7); color: var(--ink); }

/* Ein Verweis in einer ruhigen Kachel: Text plus Pfeil, kein Knopf */
.tile__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;   /* zwei, drei Wörter — sie sollen nie umbrechen */
  flex: none;
}
.tile__more svg { width: 14px; height: 14px; }

/* Kleine Kennzahlen in der Hero-Kachel: Symbol im weißen Quadrat, Wert daneben */
.facts { display: flex; gap: 22px; flex-wrap: wrap; }
.fact  { display: flex; align-items: center; gap: 10px; }
.fact__icon {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .7);
  display: grid; place-items: center;
}
.fact__icon svg { width: 17px; height: 17px; }
.fact__label { display: block; font-size: 11.5px; opacity: .65; }
.fact__value { display: block; font-size: 16px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }

/* Drei Sichten nebeneinander: Punkt in Quellenfarbe, Wert */
.views { display: flex; gap: 14px; flex-wrap: wrap; margin-top: auto; }
.view  { display: flex; align-items: center; gap: 7px; font-size: 12.5px; opacity: .85; }
.view__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.view__dot--student { background: var(--src-student); }
.view__dot--coach   { background: var(--src-coach); }
.view__dot--parent  { background: var(--src-parent); }
.view strong { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Halbkreis-Tacho für die Standortbestimmung */
.gauge { width: 118px; height: 66px; flex: none; }
.gauge__track { fill: none; stroke: rgba(255, 255, 255, .75); stroke-width: 9; stroke-linecap: round; }
.gauge__fill  { fill: none; stroke: var(--peach-deep); stroke-width: 9; stroke-linecap: round; }
.gauge__needle { stroke: var(--peach-ink); stroke-width: 2.4; stroke-linecap: round; }
.gauge__pin { fill: var(--peach-ink); }

.trend {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}
.trend--up   { background: rgba(255, 255, 255, .75); color: #1f8a5c; }
.trend--down { background: rgba(255, 255, 255, .75); color: var(--warn); }
.trend--flat { background: rgba(255, 255, 255, .75); color: var(--ink-soft); }

/* Sieben Balken für die letzten sieben Tage — heute rechts, mit Tagesbuchstabe */
.days7 { display: flex; gap: 8px; align-items: flex-end; margin-top: auto; }
.days7__day { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.days7__bar {
  width: 100%;
  max-width: 22px;
  height: 46px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.days7__bar::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 0;
  background: var(--accent-2);
  border-radius: 8px;
  transition: height .3s ease;
}
.days7__bar--on::after  { height: 55%; }
.days7__bar--hot::after { height: 100%; }
.days7__day--today .days7__bar { border-color: var(--ink-faint); }
.days7__label { font-size: 11px; color: var(--ink-faint); font-weight: 600; }

/* Ein schmaler Streifen, wenn etwas fällig ist */
.strip {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--tap);
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--warn-soft);
  color: var(--ink);
  font-size: 14px;
  text-decoration: none;
}
.strip__text { flex: 1; }
.strip__text strong { font-weight: 700; }
.strip__cta { flex: none; font-weight: 700; color: var(--warn); white-space: nowrap; }

/* Kompakte Aufgabenzeilen in einer Kachel: höchstens drei, ohne Detailtext */
.tile .tasks { margin: 0; }
.tile .task { padding: 9px 0; }
.tile .task:first-child { padding-top: 2px; }
.tile .task__detail { display: none; }
/* Zwei Zeilen statt einer mit „…" — genug für fast jede Aufgabe, und es
   bleiben mehrere auf einmal sichtbar. Den ganzen Text zeigt ein Tipp darauf. */
.tile .task__title { font-size: 14.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile .task__due { display: inline-block; font-size: 12px; margin-top: 2px; }
.tile .task__xp { display: none; }

/* Ein Hinweistext in der Coach-Kachel, auf wenige Zeilen begrenzt */
.clamp {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.clamp--3 { -webkit-line-clamp: 3; }

/* Alte Kachel-Klassen (Coach-Überblick) auf das neue System gelegt */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.stat {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  min-height: 108px; padding: 14px 15px 13px;
  background: var(--well); border-radius: var(--radius-lg);
  color: inherit; text-decoration: none; overflow: hidden;
}
.stat__label { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
.stat__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.stat__value { font-size: 32px; font-weight: 800; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stat__of { font-size: 16px; font-weight: 700; color: var(--ink-faint); letter-spacing: 0; }
.stat__sub { font-size: 12.5px; color: var(--ink-soft); margin-top: auto; }
.stat .ring { width: 44px; height: 44px; }
.stat .ring__label { font-size: 0; }
.stat .ring circle { stroke-width: 6; }
.spark { flex: none; width: 84px; height: 28px; }
.spark__line { fill: none; stroke: var(--accent-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spark__dot  { fill: var(--accent-2); }
.strip7 { display: flex; gap: 3px; }
.strip7__day { width: 13px; height: 22px; border-radius: 4px; background: var(--surface-muted); font-size: 0; }
.strip7__day--on  { background: color-mix(in srgb, var(--accent-2) 55%, var(--surface-muted)); }
.strip7__day--hot { background: var(--accent-2); }
.strip7__day:last-child { outline: 1.5px solid var(--ink-faint); outline-offset: 1px; }

/* ------------------------------------------------------------------ Karten */

.card--row { display: flex; align-items: center; gap: 14px; }
.card--row .card__main { flex: 1; min-width: 0; }
.card--row .card__text { margin-top: 4px; }
.card--row .btn { flex: none; }

/* Ziele: ein Pokal statt eines Aufzählpunkts, ⋯ am Ende */
.goals { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.goal { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.45; }
.goal__icon { flex: none; font-size: 15px; line-height: 1.45; }
.goal__text { flex: 1 1 auto; min-width: 0; }

.card {
  background: var(--well);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
}
.card--muted { background: transparent; border: 1px dashed var(--line); }

.card__eyebrow {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.card__title { font-size: 18px; }
.card__text  { margin-top: 6px; color: var(--ink-soft); font-size: 14.5px; }

/* ------------------------------------------------------------------ Hinweise */

.note {
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 14.5px;
  line-height: 1.55;
  border: 1px solid transparent;
}
.note strong { display: block; margin-bottom: 3px; }
.note--ok   { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 25%, transparent); }
.note--warn { background: var(--warn-soft);   border-color: color-mix(in srgb, var(--warn)   30%, transparent); color: var(--warn); }

/* ------------------------------------------------------------------ Formulare */

.field { display: block; }
.field__label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 7px;
}
.field__input {
  width: 100%;
  min-height: var(--tap);
  padding: 12px 14px;
  font: inherit;
  font-size: 16px;                 /* < 16px lässt iOS beim Fokus hineinzoomen */
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.field__input::placeholder { color: var(--ink-faint); }

/* ------------------------------------------------------------------ Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 12px 22px;
  font: inherit;
  font-size: 15.5px;
  font-weight: 620;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .08s ease, opacity .15s ease, background .15s ease;
}
.btn:active   { transform: translateY(1px); }
.btn--block   { width: 100%; }
.btn--primary { background: var(--grad); color: #fff; border-color: transparent;
                box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--accent-2) 60%, transparent); }
.btn--primary:hover { filter: brightness(1.08); }
.btn--ghost   { background: transparent; border-color: var(--line); color: var(--ink); }
.btn--ghost:hover { background: var(--surface-muted); }

/* ------------------------------------------------------------------ Anmeldung */

.auth {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px 18px calc(24px + env(safe-area-inset-bottom));
}
.auth__card {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border: 0;
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.auth__card--center { text-align: center; align-items: center; }
.auth__eyebrow { font-size: 13px; font-weight: 700; color: var(--accent); }
.auth__title { font-size: 25px; margin-top: -8px; }
.auth__lead  { color: var(--ink-soft); font-size: 15px; }
.auth__hint  { color: var(--ink-faint); font-size: 13.5px; }
.auth__form  { display: flex; flex-direction: column; gap: 16px; }
/* Der Code: groß, gesperrt, Ziffern gleich breit — er wird vom Handy oder
   aus der Mail abgetippt. */
.field__input--code { font-size: 24px; font-weight: 700; letter-spacing: .18em; text-align: center; font-variant-numeric: tabular-nums; }
.auth__oder { display: flex; align-items: center; gap: 12px; color: var(--ink-faint); font-size: 13px; }
.auth__oder::before, .auth__oder::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ------------------------------------------------------------------ Tableiste */

.tabbar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 20;
  display: flex;
  justify-content: space-around;
  gap: 2px;
  padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border-top: 1px solid var(--line);
  backdrop-filter: saturate(1.6) blur(14px);
}
.tab {
  flex: 1 1 0;
  min-height: var(--tap);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 5px 2px;
  border-radius: 12px;
  color: var(--ink-faint);
  text-decoration: none;
}
.tab__icon { display: block; width: 23px; height: 23px; }
.tab__icon svg { width: 100%; height: 100%; display: block; }
.tab__label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: -.005em;
  /* Fünf Tabs auf einem 360-px-Gerät sind 68 px pro Spalte. „Fortschritt"
     passt dort nicht mehr — statt es umbrechen zu lassen (was den Balken
     höher macht und die Zeile verschiebt), wird es sauber gekürzt. */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tab--active { color: var(--accent); }

@media (min-width: 900px) { .tabbar { display: none; } }
@media (min-width: 700px) and (max-width: 899px) {
  .tabbar {
    max-width: 640px;
    margin: 0 auto;
    inset: auto 0 16px 0;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow);
  }
}

/* ------------------------------------------------------------------ Aufgaben */

.tasks { list-style: none; margin: 4px 0 0; padding: 0; }

.task {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}
.task:first-child { border-top: 0; padding-top: 6px; }

.task__check {
  flex: none;
  width: 26px; height: 26px;
  margin-top: 1px;
  padding: 0;
  border: 2px solid var(--line);
  border-radius: 9px;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .15s ease, border-color .15s ease;
}
/* Das eigentliche Tap-Ziel ist 44px groß, ohne dass die Kachel wächst. */
.task__check::before {
  content: '';
  position: absolute;
  width: var(--tap); height: var(--tap);
  margin: -9px;
}
.task { position: relative; }
.task__check svg {
  width: 15px; height: 15px;
  fill: none;
  stroke: var(--accent-ink);
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: scale(.5);
  transition: opacity .15s ease, transform .18s cubic-bezier(.34,1.56,.64,1);
}
.task__check:disabled { opacity: .5; cursor: wait; }

.task__body  { flex: 1; min-width: 0; }
.task__title { display: block; font-size: 15.5px; line-height: 1.45; }
.task__detail{ display: block; font-size: 13.5px; color: var(--ink-faint); margin-top: 3px; }
.task__due   { display: inline-block; font-size: 12.5px; color: var(--ink-faint); margin-top: 4px; }
.task__due--late { color: var(--warn); font-weight: 600; }

.task__xp {
  flex: none;
  font-size: 12px;
  font-weight: 650;
  color: var(--ink-faint);
  background: var(--surface-muted);
  padding: 3px 9px;
  border-radius: 999px;
  margin-top: 2px;
}

.task--done .task__check { background: var(--ok); border-color: var(--ok); }
.task--done .task__check svg { opacity: 1; transform: scale(1); }
.task--done .task__title { color: var(--ink-faint); text-decoration: line-through; }
.task--done .task__detail, .task--done .task__due { display: none; }
.task--done .task__xp { opacity: .5; }

/* ------------------------------------------------------------------ Fortschrittsring */

.ring { position: relative; flex: none; width: 58px; height: 58px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 5; }
.ring__track { stroke: var(--line); }
.ring__fill  { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset .45s ease; }
.ring__label {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 650;
}
.ring__of { color: var(--ink-faint); font-weight: 500; }

/* ------------------------------------------------------------------ Gewohnheiten */

.habits { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

.habit__btn {
  width: 100%;
  min-height: var(--tap);
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  font: inherit;
  font-size: 14.5px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.habit__dot {
  flex: none;
  width: 18px; height: 18px;
  border: 2px solid var(--line);
  border-radius: 50%;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.habit__title  { flex: 1; }
.habit__streak { flex: none; font-size: 12.5px; font-weight: 620; color: var(--warn); }

.habit--done .habit__btn   { background: var(--ok-soft); border-color: transparent; }
.habit--done .habit__dot   { background: var(--ok); border-color: var(--ok);
                             box-shadow: inset 0 0 0 3px var(--surface); }
.habit--done .habit__title { color: var(--ink-soft); }

/* ------------------------------------------------------------------ XP */

.bar {
  height: 9px;
  margin-top: 12px;
  background: var(--surface-muted);
  border-radius: 999px;
  overflow: hidden;
}
.bar__fill {
  display: block;          /* im Dimensionsvergleich ist der Balken ein <span> —
                              ohne das ignoriert er Höhe und Breite */
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: 999px;
  transition: width .5s cubic-bezier(.22,.61,.36,1);
}

/* Die CSP verbietet style-Attribute im Markup (siehe layout.php) — ein
   serverseitiges style="width:60%" wird vom Browser verworfen, der Balken
   bliebe beim Laden leer. Also eine Leiter aus Klassen in 5-%-Schritten. Für
   einen Fortschrittsbalken fein genug, und sie braucht kein JavaScript.
   (app.js setzt die Breite nach dem Abhaken zusätzlich exakt per CSSOM —
   das ist von der CSP nicht betroffen.) */
.bar__fill--p0   { width:   0% }
.bar__fill--p5   { width:   5% }
.bar__fill--p10  { width:  10% }
.bar__fill--p15  { width:  15% }
.bar__fill--p20  { width:  20% }
.bar__fill--p25  { width:  25% }
.bar__fill--p30  { width:  30% }
.bar__fill--p35  { width:  35% }
.bar__fill--p40  { width:  40% }
.bar__fill--p45  { width:  45% }
.bar__fill--p50  { width:  50% }
.bar__fill--p55  { width:  55% }
.bar__fill--p60  { width:  60% }
.bar__fill--p65  { width:  65% }
.bar__fill--p70  { width:  70% }
.bar__fill--p75  { width:  75% }
.bar__fill--p80  { width:  80% }
.bar__fill--p85  { width:  85% }
.bar__fill--p90  { width:  90% }
.bar__fill--p95  { width:  95% }
.bar__fill--p100 { width: 100% }

/* ------------------------------------------------------------------ Chips */

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 4px; padding: 0; }
.chip {
  font-size: 12.5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--ink-soft);
}


.card__count { float: right; font-weight: 500; color: var(--ink-faint); }
.card__more  { display: inline-block; margin-top: 12px; font-size: 14px; color: var(--accent); text-decoration: none; font-weight: 600; }
.card__eyebrow--spaced { margin-top: 16px; }
.btn--small  { min-height: 34px; padding: 6px 14px; font-size: 13.5px; }

.note-card__body p { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
.note-card__body p + p { margin-top: 10px; }

.list__title--struck { text-decoration: line-through; color: var(--ink-faint); }

/* ------------------------------------------------------------------ Formulare */

.stack { display: flex; flex-direction: column; gap: 13px; margin-top: 14px; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 11px; }
.grid2 > * { min-width: 0; }
.field__input { min-width: 0; }
@media (max-width: 380px) { .grid2 { grid-template-columns: 1fr; } }

select.field__input   { appearance: none; background-image: none; }
.field__req { float: right; font-weight: 500; color: var(--ink-faint); text-transform: none; }

/* ------------------------------------------------------------------ Kurzmeldung */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(96px + env(safe-area-inset-bottom));
  z-index: 40;
  transform: translate(-50%, 14px);
  opacity: 0;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-size: 14px;
  font-weight: 620;
  box-shadow: 0 8px 28px -8px rgba(0, 0, 0, .45);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.toast--in   { opacity: 1; transform: translate(-50%, 0); }
.toast--ok   { background: var(--accent); color: var(--accent-ink); }
.toast--warn { background: var(--warn); color: #fff; }

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

.list { list-style: none; margin: 0; padding: 0; }
.list__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.list__row:first-child { border-top: 0; padding-top: 4px; }
.list__main  { min-width: 0; flex: 1; }
.list__title { display: block; font-weight: 600; font-size: 15.5px; }
.list__meta  { display: block; font-size: 13px; color: var(--ink-faint); margin-top: 1px; }

.badge {
  flex: none;
  font-size: 11.5px;
  font-weight: 620;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.badge--ok   { background: var(--accent-soft); color: var(--accent); }
.badge--idle { background: var(--surface-muted); color: var(--ink-faint); }

/* ------------------------------------------------------------------ Fortschritt

   Drei Perspektiven, drei Farben — sie müssen in Hell und Dunkel und für
   Rot-Grün-Blindheit unterscheidbar bleiben, und sie dürfen nicht mit der
   Markenfarbe verschmelzen. Grün ist die einzige Farbe, die weder an Lila
   noch an Navy grenzt — deshalb bleibt es die eigene Stimme. Das Elternblau
   ist bewusst heller als das Marken-Navy. */

:root {
  --src-student: #1f8a5c;   /* Grün — die eigene Stimme */
  --src-coach:   #b06a12;   /* Bernstein */
  --src-parent:  #3567c9;   /* Blau, deutlich heller als --accent-deep */
}

.chart {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 14px;
}
.chart__grid { stroke: var(--line); stroke-width: 1; }

/* Kalender-Heatmap der Gewohnheiten: fünf Stufen von „nichts" bis Magenta */
.heatmap { display: block; width: 100%; max-width: 460px; height: auto; margin: 0 auto; }
.heatmap__axis { fill: var(--ink-faint); font-size: 7.5px; font-family: var(--font); }
.heatmap__cell    { fill: var(--surface); }
.heatmap__cell--1 { fill: color-mix(in srgb, var(--accent-2) 30%, var(--surface)); }
.heatmap__cell--2 { fill: color-mix(in srgb, var(--accent-2) 55%, var(--surface)); }
.heatmap__cell--3 { fill: color-mix(in srgb, var(--accent-2) 80%, var(--surface)); }
.heatmap__cell--4 { fill: var(--accent-2); }
.heatmap__cell--today { stroke: var(--ink-faint); stroke-width: 1.2; }
.chart__axis { fill: var(--ink-faint); font-size: 8px; font-family: var(--font); }

.chart__line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chart__line--student { stroke: var(--src-student); }
.chart__line--coach   { stroke: var(--src-coach); }
.chart__line--parent  { stroke: var(--src-parent); }

.chart__dot--student { fill: var(--src-student); }
.chart__dot--coach   { fill: var(--src-coach); }
.chart__dot--parent  { fill: var(--src-parent); }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 12px;
  padding: 0;
  list-style: none;
}
.legend__item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--ink-soft);
}
.legend__dot { width: 10px; height: 10px; border-radius: 999px; flex: none; }
.legend__dot--student { background: var(--src-student); }
.legend__dot--coach   { background: var(--src-coach); }
.legend__dot--parent  { background: var(--src-parent); }

.dim { min-width: 0; }

.dim__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.dim__name { font-size: 14.5px; font-weight: 600; }
.dim__gap  {
  flex: none;
  font-size: 11.5px;
  font-weight: 620;
  color: var(--warn);
  background: var(--warn-soft);
  padding: 3px 9px;
  border-radius: 999px;
}

.bar-row {
  display: grid;
  grid-template-columns: 132px 1fr 22px;
  align-items: center;
  gap: 10px;
  margin-top: 7px;
}
.bar-row__label { font-size: 12px; color: var(--ink-faint); }
.bar-row__value { font-size: 12.5px; font-weight: 640; text-align: right; font-variant-numeric: tabular-nums; }
.bar-row .bar   { margin-top: 0; height: 7px; }

.bar__fill--src-student { background: var(--src-student); }
.bar__fill--src-coach   { background: var(--src-coach); }
.bar__fill--src-parent  { background: var(--src-parent); }

/* ------------------------------------------------------------------ Zusehen

   Der Streifen, wenn ein Coach mit den Augen eines Schülers schaut. Bewusst
   auffällig und über allem — wer vergisst, dass er zusieht, hält irgendwann
   seine eigene Ansicht für die des Schülers. */

.peek {
  position: sticky;
  top: 0;
  flex: none;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px calc(9px + env(safe-area-inset-top));
  background: var(--warn);
  color: #241a0c;
  font-size: 13px;
  line-height: 1.4;
}
.peek__text { flex: 1 1 auto; }
.peek__text strong { font-weight: 700; }
.peek__exit {
  flex: none;
  min-height: 30px;
  padding: 4px 12px;
  font: inherit;
  font-weight: 640;
  color: var(--warn);
  background: #241a0c;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.peek__exit:hover { opacity: .9; }
/* Am Handy steht der Knopf unter dem Text statt in vier Zeilen daneben. */
.peek { flex-wrap: wrap; row-gap: 8px; }
.peek__exit { white-space: nowrap; }

  .peek { color: #fff; }
  .peek__exit { background: #fff; color: var(--warn); }
  .peek--demo { background: var(--accent); }
  .peek--demo .peek__exit { color: var(--accent); }

/* ------------------------------------------------------------------ Coach-Überblick

   Je Schüler eine Zeile, die sich aufklappt — vier Zahlen oben, darunter die
   Details. Die Kachel-Klassen sind dieselben wie auf der Schüler-Startseite. */

.stats--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stats--4 .stat { min-height: 104px; }
.stats--4 .stat:nth-child(3) { grid-column: auto; }
.stats--4 .stat__value { font-size: 30px; }
@media (min-width: 700px) { .stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Der Coach-Überblick darf breiter sein als das Schüler-Portal — er wird
   am Schreibtisch gelesen, nicht im Zug. */
.page--wide, body.has-nav .page--wide { max-width: 1040px; }
.greeting__sub a { color: var(--accent); text-decoration: none; font-weight: 600; }

.roster {
  background: var(--well);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.roster__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  min-height: var(--tap);
  cursor: pointer;
  list-style: none;
}
.roster__head::-webkit-details-marker { display: none; }
.roster__who  { min-width: 0; display: flex; flex-direction: column; }
.roster__name { font-size: 15.5px; font-weight: 620; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.roster__meta { font-size: 12.5px; color: var(--ink-faint); }
.roster__strip .strip7__day { width: 9px; height: 18px; background: var(--line); }   /* sonst grau auf grau */
.roster__strip .strip7__day--on  { background: color-mix(in srgb, var(--accent-2) 55%, var(--line)); }
.roster__strip .strip7__day--hot { background: var(--accent-2); }
.roster__tally { display: flex; align-items: center; gap: 6px; min-width: 52px; justify-content: flex-end; }
.roster__score { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.roster__score--none { color: var(--ink-faint); font-weight: 500; }
.badge--warn { background: var(--warn-soft); color: var(--warn); }

.roster__body { padding: 4px 16px 16px; border-top: 1px solid var(--line); }
.roster__cols { display: grid; grid-template-columns: 1fr; gap: 16px; padding-top: 12px; }
@media (min-width: 700px) { .roster__cols { grid-template-columns: 3fr 2fr; } }
.roster__cols .heatmap { max-width: 230px; }
.roster__quellen { list-style: none; margin: 8px 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--ink-soft); }
.roster__quellen li { display: flex; align-items: center; gap: 8px; }
.roster__quellen strong { margin-left: auto; color: var(--ink); font-variant-numeric: tabular-nums; }
.roster__actions { margin-top: 12px; }

@media (max-width: 480px) {
  .roster__head { grid-template-columns: minmax(0, 1fr) auto auto; }
  .roster__strip { display: none; }
}

/* ---- Coach-Bereich: eine Seite, je Schüler eine Zeile */
.coach-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.segment { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 14px; background: var(--well); }
.segment__item {
  min-height: 36px; padding: 8px 14px;
  border-radius: 10px;
  font-size: 13.5px; font-weight: 700;
  color: var(--ink-soft); text-decoration: none;
}
.segment__item:hover { color: var(--ink); }
.segment__item--on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(20, 33, 58, .12); }

.roster-liste { display: flex; flex-direction: column; gap: 8px; }
.roster__head--kurz { grid-template-columns: minmax(0, 1fr) auto auto; }
.roster__todos { display: flex; justify-content: flex-end; min-width: 76px; }
.roster[open] > .roster__head { border-bottom: 1px solid var(--line); }
.roster[open] .roster__body { border-top: 0; }
.roster--knopf { width: 100%; border: 0; font: inherit; text-align: left; color: inherit; }
.roster--knopf:hover, .roster > .roster__head:hover { background: color-mix(in srgb, var(--well) 70%, var(--line)); }
.roster__chev { display: grid; place-items: center; width: 16px; color: var(--ink-faint); }
.roster__chev svg { width: 14px; height: 14px; }
.roster__hint { font-size: 13px; color: var(--ink-faint); margin-left: 12px; }
/* Anmeldelink aus der Stunde: der Code groß zum Abtippen, darunter der Link */
.roster__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.roster__actions .roster__hint { margin-left: 4px; flex: 1 1 260px; }
.anmeldung { margin-top: 12px; padding: 16px 18px; border-radius: var(--radius); background: var(--accent-soft); display: flex; flex-direction: column; gap: 8px; }
.anmeldung__titel { font-size: 13px; font-weight: 700; color: var(--accent-deep); }
.anmeldung__code { font-size: 34px; font-weight: 800; letter-spacing: .14em; font-variant-numeric: tabular-nums; color: var(--ink); line-height: 1.1; }
.anmeldung__link { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.anmeldung__link .field__input { flex: 1 1 240px; min-width: 0; font-size: 13px; padding: 8px 10px; }
.anmeldung__hint { margin-left: 0; }
.coach-todos { margin-top: 6px; }
.coach-todos .list__main { display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 480px) {
  .roster__head--kurz { grid-template-columns: minmax(0, 1fr) auto; }
  .roster__chev { display: none; }
  .roster__todos { min-width: 0; }
  .roster__hint { display: block; margin: 8px 0 0; }
}

/* Tally zuordnen: Suchfeld, darunter die gefilterten Namen */
.pick { padding: 14px 0; border-top: 1px solid var(--line); }
.pick:first-child { border-top: 0; padding-top: 4px; }
.pick__wer { color: var(--ink); }
.pick__meta { display: block; font-size: 12.5px; color: var(--ink-faint); }
.pick__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; align-items: start; margin-top: 10px; }
.pick__suche { grid-column: 1; }
.pick__form > .btn { grid-column: 2; grid-row: 1; min-height: 44px; }
.pick__liste { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; max-height: 128px; overflow: auto; }
.pick__option {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 36px; padding: 6px 12px;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 13.5px; color: var(--ink); cursor: pointer;
}
.pick__option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.pick__option input { accent-color: var(--accent); margin: 0; }
.pick__coach { font-size: 12px; color: var(--ink-faint); }
.pick__leer { font-size: 13px; color: var(--ink-faint); padding: 6px 2px; }
@media (max-width: 480px) { .pick__form { grid-template-columns: minmax(0, 1fr); } .pick__form > .btn { grid-column: 1; grid-row: auto; } }

/* ------------------------------------------------------------------ Dateien */

.files { list-style: none; margin: 6px 0 0; padding: 0; }
.file  { border-top: 1px solid var(--line); }
.file:first-child { border-top: 0; }

.file__link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--tap);
  padding: 11px 2px;
  color: inherit;
  text-decoration: none;
  border-radius: 10px;
}
.file__link:hover  { background: var(--surface-muted); }
.file__link:active { transform: translateY(1px); }

.file__icon  { flex: none; font-size: 19px; line-height: 1; }
.file__body  { flex: 1 1 auto; min-width: 0; }
.file__title {
  display: block;
  font-size: 15px;
  line-height: 1.35;
  /* Drive-Titel sind oft lang und ohne Leerzeichen („KL25_PT1_ALL_DEU…") —
     ohne das sprengen sie die Karte. */
  overflow-wrap: anywhere;
}
.file__meta  { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-faint); }

/* Zuordnung nicht erkannter Tally-Einreichungen im Coach-Bereich */
.assign { display: flex; align-items: center; gap: 8px; flex: none; }
.assign__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.assign__select {
  min-height: 34px;
  max-width: 150px;
  padding: 4px 8px;
  font: inherit;
  font-size: 13.5px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 9px;
}

/* ------------------------------------------------------------------ htmx

   htmx setzt während einer Anfrage .htmx-request auf das auslösende Element
   (bzw. sein hx-indicator). Die Stile dafür stehen hier, weil das eingebaute
   Inline-<style> per Konfiguration abgeschaltet ist (CSP). */

.htmx-request .task__check,
.htmx-request .habit__dot   { opacity: .55; }
.btn.htmx-request           { opacity: .7; cursor: wait; }
.htmx-swapping              { opacity: .6; transition: opacity .12s ease; }

/* ------------------------------------------------------------------ Bewegung */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

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

   Was nicht auf die Fläche passt, öffnet sich als Blatt über dem Blatt —
   die ganze Coach-Nachricht, eine Woche im Plan. Ein Klick, kein Scroll. */

.dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: min(80dvh, 720px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius-xl);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .55);
  overflow: hidden;
}
.dialog::backdrop { background: rgba(15, 45, 77, .55); backdrop-filter: blur(3px); }
.dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px 0;
}
.dialog__title { font-size: 18px; }
.dialog__body { padding: 12px 24px 24px; overflow: auto; max-height: calc(min(80dvh, 720px) - 70px); font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.dialog__body p + p { margin-top: 10px; }
.dialog__close {
  flex: none;
  width: 36px; height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--well);
  color: var(--ink);
  font: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.dialog__close:hover { background: var(--line); }

/* ------------------------------------------------------------------ Fortschritt (Kacheln)

   Der Verlauf füllt die laute Kachel: das SVG hat einen viewBox, also darf es
   hier einfach die Resthöhe bekommen und skaliert mit. Die zwölf Bereiche
   liegen darunter als dreispaltiges Raster; was nicht daraufpasst, steht im
   Dialog. */

.grid--rows-1 { grid-template-rows: auto; }

.fs-chart { flex: 1 1 auto; min-height: 0; display: flex; }
.fs-chart .chart { flex: 1 1 auto; width: 100%; height: 100%; min-height: 0; margin-top: 0; }
.fs-first { max-width: 42ch; }

/* Die Legende sitzt im Kachelfuß und bringt keinen eigenen Abstand mit */
.tile__foot .legend { margin-top: 0; }
.tile--hero .legend__item { color: inherit; opacity: .8; }

/* Ein Textknopf, der aussieht wie .tile__more — für Kacheln, die einen
   Dialog öffnen statt weiterzuführen */
.tile__more--btn { border: 0; background: none; padding: 0; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }

/* Sechs Bereiche nebeneinander statt zwölf untereinander */
.dimgrid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px 26px;
}
.dimgrid .dim { padding: 0; border-top: 0; min-width: 0; }
.dimgrid .dim__name { font-size: 13.5px; }
.dimgrid .dim__gap { padding: 2px 8px; }
.dimgrid .bar-row { grid-template-columns: 128px minmax(0, 1fr) 18px; gap: 8px; margin-top: 5px; }
.dimgrid .bar-row__label { white-space: nowrap; }
@media (min-width: 640px) {
  .dimgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dimgrid--dialog { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
}

.dialog--wide { width: min(760px, calc(100vw - 32px)); }

/* ------------------------------------------------------------------ Habits (Kacheln)

   Die laute Kachel trägt links die Zahl des Tages und rechts die Zeilen zum
   Abhaken — auf dem Blatt stehen sie nebeneinander, am Handy untereinander.
   In der Hero-Kachel sind die Zeilen weiß statt umrandet, sonst verschwindet
   die Linie im Verlauf. */

.hero-split { gap: 18px; }
.hero-split__main { min-width: 0; }
.hero-split__side { flex: 1 1 auto; min-height: 0; min-width: 0; }
@media (min-width: 900px) {
  .hero-split { flex-direction: row; align-items: stretch; }
  .hero-split__main { flex: 0 0 34%; display: flex; flex-direction: column; gap: 8px; }
  .hero-split__side { margin-top: 0; }
}

.tile .habits { margin-top: 0; gap: 7px; }
.tile--hero .habit__btn {
  background: rgba(255, 255, 255, .6);
  border-color: transparent;
  color: var(--hero-ink);
  min-height: 40px;
  padding: 7px 13px;
  font-size: 14px;
}
.tile--hero .habit__btn:hover { background: rgba(255, 255, 255, .85); }
.tile--hero .habit__dot { border-color: rgba(20, 33, 58, .25); }
.tile--hero .habit .chip { background: rgba(255, 255, 255, .55); color: var(--hero-ink); opacity: .75; }
.tile--hero .habit--done .habit__btn { background: rgba(255, 255, 255, .92); }
.tile--hero .habit--done .habit__dot { background: var(--ok); border-color: var(--ok); }
.tile--hero .habit--done .habit__title { color: var(--ink-soft); }

/* Die Heatmap soll in ihrer Kachel mittig sitzen und nicht über sie hinaus */
.tile__body--center { justify-content: center; align-items: center; }
.tile__body--center .heatmap { max-width: min(100%, 360px); max-height: 100%; }
/* Auf der Startseite ist das Muster Beiwerk — kompakt, damit „Zu tun" Platz hat */
.tile--muster .heatmap { max-width: min(100%, 250px); margin: 0 auto; }

.xp-goal { margin-top: 10px; }
.tile--peach .bar { background: rgba(255, 255, 255, .6); }
.tile--peach .bar__fill { background: var(--peach-deep); }

/* Belohnungszeilen in einer Kachel: etwas enger als auf einer Karte */
.tile .list__row { padding: 9px 0; }
.tile .list__title { font-size: 14.5px; }
.tile .list__meta { font-size: 12.5px; }

/* ------------------------------------------------------------------ Plan (Kacheln)

   Der Plan hat viel Inhalt und wenig Fläche: die aktive Woche liegt in der
   Hero-Kachel und teilt sich in zwei Spalten — links Zähler, Ziel und
   Methoden, rechts die offenen Aufgaben zum Abhaken. Alle übrigen Wochen
   stehen als Leiste in der zweiten Zeile; jede öffnet ihren eigenen Dialog. */

.plan-hero__cols { display: flex; flex-direction: column; gap: 12px; }
.plan-hero__main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.plan-hero__side { min-width: 0; }
.plan-hero__count { display: flex; align-items: center; gap: 18px; }
.plan-hero__goal { font-size: 14.5px; }

.tile--hero .plan-hero__count .tile__num { font-size: 46px; }
.tile--hero .plan-hero__count .ring__track { stroke: rgba(255, 255, 255, .7); }
.plan-hero__count .ring__label { display: none; }   /* die Zahl steht schon groß daneben */
.plan-hero__count .ring { width: 64px; height: 64px; }

/* Chips auf dem Verlauf: das Grau der Standardchips verschwindet dort */
.chip--light { background: rgba(255, 255, 255, .72); color: var(--hero-ink); }

/* Die Wochenleiste: eine Kachel je Woche, Farbe sagt den Stand */
.weeks-strip {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 0;
}
.weeks-strip__cell { flex: 1 1 86px; min-width: 86px; display: flex; }

.week-chip {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 11px 12px 10px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: transform .12s ease, box-shadow .12s ease;
}
.week-chip:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.week-chip__no    { font-size: 11.5px; font-weight: 700; opacity: .6; white-space: nowrap; }
.week-chip__title {
  font-size: 13px;
  font-weight: 650;
  line-height: 1.28;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.week-chip__count {
  margin-top: auto;
  padding-top: 6px;
  font-size: 11.5px;
  font-weight: 700;
  opacity: .6;
  font-variant-numeric: tabular-nums;
}
.week-chip--erledigt { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.week-chip--aktiv    { border-color: var(--accent-2); border-width: 2px; padding: 10px 11px 9px; }
.week-chip--aktiv .week-chip__no { color: var(--accent-2); opacity: 1; }
.week-chip--leer {
  background: transparent;
  border-style: dashed;
  color: var(--ink-faint);
}
.week-chip--leer .week-chip__title { font-weight: 500; }

/* Belohnung und Zwischenüberschrift im Wochendialog */
.week-reward { margin-top: 12px; font-size: 14.5px; color: var(--ink-soft); }
.dialog__label { margin-top: 14px; font-size: 12.5px; font-weight: 700; color: var(--ink-faint); }
.dialog__body > .dialog__label:first-child { margin-top: 0; }
.dialog__body .chips { margin: 10px 0 0; }

/* Aufgaben im Dialog dürfen wieder alles zeigen — dort ist Platz */
.dialog__body .tasks { margin: 4px 0 0; }


@media (min-width: 900px) {
  /* Der aktiven Woche gehört mehr Höhe als der Leiste darunter */
  .grid--plan { grid-template-rows: auto auto; }
  .grid--plan > .tile--hero { min-height: 40vh; }
  .plan-hero__cols { flex-direction: row; gap: 26px; }
  .plan-hero__main { flex: 0 0 44%; }
  .plan-hero__side { flex: 1 1 auto; }
}

/* ------------------------------------------------------------------ Dateien (Kacheln)

   Links der eigene Drive-Ordner als warme Kachel, rechts die Themen als
   kleine weiße Unterkacheln in einem Raster. Mehr als vier Dateien je Thema
   liegen hinter einem Dialog. */

.files-grid {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
  align-content: start;
  min-height: 0;
}

.filecard {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 12px 14px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.filecard__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.filecard__title { font-size: 13.5px; font-weight: 700; min-width: 0; }
.filecard__count { flex: none; font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; }

.filecard .files { margin: 2px 0 0; }
.filecard .file__link { min-height: 0; padding: 7px 2px; gap: 9px; }
.filecard .file__icon { font-size: 16px; }
.filecard .file__title { font-size: 13.5px; line-height: 1.3; }
.filecard .badge { font-size: 10.5px; padding: 3px 8px; }

.filecard__more {
  margin-top: auto;
  padding: 8px 2px 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent);
  cursor: pointer;
}
.filecard__more svg { width: 13px; height: 13px; }

/* ------------------------------------------------------------------ Kachel-Details

   Zwei Nachträge, die Plan und Dateien brauchen: Knöpfe, die aussehen wie
   die Textlinks der Kacheln, und Aufgabenlisten im Dialog, die wieder alles
   zeigen dürfen — der Dialog liegt im Markup in einer Kachel, deren
   Kurzfassung sonst greifen würde. */

button.tile__more, button.tile__cta {
  border: 0;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
button.tile__more { background: none; padding: 0; font-size: 13.5px; color: var(--accent); }
button.tile__more:hover { text-decoration: underline; text-underline-offset: 3px; }

.tile .tasks--full .task { padding: 11px 0; }
.tile .tasks--full .task:first-child { padding-top: 6px; }
.tile .tasks--full .task__title, .dialog .task__title { font-size: 15.5px; display: block; -webkit-line-clamp: unset; overflow: visible; }
.tile .tasks--full .task__detail { display: block; }
.tile .tasks--full .task__due { display: inline-block; }
.tile .tasks--full .task__xp { display: inline-block; }
.tile .tasks--full .task--done .task__detail,
.tile .tasks--full .task--done .task__due { display: none; }

/* Eine Kachel in einem Hüllelement (Dialog-Kacheln) soll die Rasterzeile
   trotzdem ganz ausfüllen */
.tile-wrap { display: flex; min-width: 0; }
.tile-wrap > .tile { flex: 1 1 auto; min-width: 0; }

/* Die Zahl des Tages steht in einer schmalen Spalte — sie darf kleiner sein
   als die eine große Zahl auf der Startseite */
.hero-split .tile__num { font-size: clamp(44px, 7.5vh, 64px); }
@media (min-width: 900px) { .hero-split__main { flex: 0 0 40%; } }
#xp-card .tile__body { justify-content: center; }

/* Wenige Themen: großzügige Panels statt gedrängter Kärtchen */
.files-grid--luftig { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-auto-rows: auto; }
.files-grid--luftig .filecard { padding: 16px 18px 12px; }
.files-grid--luftig .filecard__title { font-size: 15px; }
.files-grid--luftig .file__link { min-height: var(--tap); padding: 10px 2px; }
.files-grid--luftig .file__title { font-size: 14.5px; }
.files-grid--luftig .file__icon { font-size: 18px; }
.files-grid--luftig .filecard .file__meta { display: block; }

/* Aufgaben auf der Pfirsich-Kachel: das helle Grau der Linien verschwindet dort */
.tile--peach .task { border-top-color: rgba(255, 255, 255, .7); }
.tile--peach .task__check,
.tile--hero .task__check { border-color: rgba(20, 33, 58, .28); background: rgba(255, 255, 255, .6); }
.tile--peach .task, .tile--hero .task { border-top-color: rgba(20, 33, 58, .1); }
.tile--peach .task--done .task__check { background: var(--ok); border-color: var(--ok); }

/* Wochentitel dürfen trennen — aber nicht so, dass ein oder zwei Buchstaben
   allein in der nächsten Zeile stehen („Motivati-on"). */
.week-chip__title { overflow-wrap: normal; hyphens: auto; hyphenate-limit-chars: 8 4 4; -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 4; }

/* Die Bereiche verteilen sich über die Kachelhöhe statt oben zu kleben */
.tile__body > .dimgrid { flex: 1 1 auto; align-content: space-between; }
/* Zahl und Zeilen stehen sich in der Hero-Kachel auf gleicher Höhe gegenüber */
@media (min-width: 900px) {
  .hero-split__main, .hero-split__side { justify-content: center; }
}

/* Dateien: wenige Unterlagen sollen nicht zu riesigen leeren Flächen
   aufgeblasen werden — die Kacheln behalten ihre natürliche Höhe, der Rest
   des Blatts bleibt ruhig weiß. */
@media (min-width: 900px) {
  .grid--top { flex: 0 1 auto; grid-auto-rows: auto; align-items: start; }
}
.facts--bottom { margin-top: auto; }
/* In der Kachel steht der Preis neben dem Titel, nicht darunter — sonst
   passen vier Belohnungen nicht mehr auf das Blatt */
.tile .list__main { display: flex; align-items: baseline; gap: 9px; }
.tile .list__meta { margin-top: 0; flex: none; }
/* Ein Schlusssatz, der unten in der Kachel steht statt direkt unter der Liste */
.tile__note { margin-top: auto; }

/* ---- Startseite: „Zu tun" — links die Zahl, rechts heute und die Aufgaben */
.zutun__cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px 28px; align-items: stretch; }
@media (min-width: 640px) { .zutun__cols { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.zutun__main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.zutun__count { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.zutun .tile__num { font-size: clamp(44px, 6.5vh, 56px); }
.zutun__heute { display: flex; flex-direction: column; gap: 5px; flex: 1 1 auto; min-height: 0; }
.zutun__zeile { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.zutun__zeile .tile__more { font-size: 12.5px; }
.zutun__list { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.zutun__label { font-size: 12.5px; font-weight: 700; opacity: .6; }
.zutun__list .tasks { margin: 0; }
.zutun__list .task { padding: 8px 0; }
.zutun__list .task:first-child { padding-top: 2px; }
.zutun__add { display: flex; align-items: center; gap: 16px; flex: none; }

/* Die Gewohnheiten von heute als Chips: antippen = abhaken */
.daychips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.daychip { min-width: 0; max-width: 100%; }
.daychip__btn {
  display: inline-flex; align-items: center; gap: 8px;
  max-width: 100%; min-height: 32px;
  padding: 5px 13px 5px 8px;
  border: 0; border-radius: 14px;
  background: rgba(255, 255, 255, .6);
  color: var(--hero-ink);
  font: inherit; font-size: 13.5px; font-weight: 600; text-align: left;
  cursor: pointer;
  transition: background .15s ease;
}
.daychip__btn:hover { background: rgba(255, 255, 255, .9); }
.daychip__btn:disabled { cursor: default; }
.daychip__title { min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
.daychip .habit__dot { width: 16px; height: 16px; border-color: rgba(20, 33, 58, .25); }
.daychip.habit--done .daychip__btn { background: rgba(255, 255, 255, .92); color: var(--ink-soft); }

/* ---- Fortschritt: die Verbesserung ist die Hauptsache */
.fs-gain { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.fs-gain .tile__num { font-size: 48px; }
.fs-gain .tile__text { max-width: 36ch; }
.fs-body { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 8px 24px; align-items: stretch; min-height: 0; }
@media (max-width: 899px) { .fs-body { grid-template-columns: minmax(0, 1fr); } }
.fs-gain { flex-direction: column; align-items: flex-start; gap: 6px; }
.fs-chart svg { width: 100%; height: 100%; }
.dialog__sub { margin: 18px 0 6px; font-size: 14px; font-weight: 700; color: var(--ink); }

.streak-badge { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, .7); font-size: 13px; font-weight: 700; color: var(--ink); }

/* ---- Tägliche Habit-Erinnerung */
.daily { min-height: 0; }
.daily__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.daily__time { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.daily__time .field__input { min-width: 150px; }
.daily .tile__foot { flex-wrap: wrap; }
.daily .tile__text a { color: var(--accent); font-weight: 700; text-decoration: none; }
.daily__foot { justify-content: flex-start; gap: 18px; }
.daily__hint { margin: 12px 0 6px; font-size: 13px; }

/* ---- Dateien & Links: links Drive-Ordner und Videokurs übereinander */
.stapel { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.stapel > .tile--peach { flex: 1 1 auto; }
.kurs { min-height: 0; flex: none; }
@media (min-width: 900px) { .stapel { gap: 18px; } }

/* ---- Passend: eine Liste zeigt, was ganz in ihre Kachel passt

   Der Rahmen (.fit) nimmt am Laptop den Platz, den die Kachel übrig hat —
   sein Inhalt liegt absolut darin und macht die Kachel deshalb nie höher.
   app.js blendet aus, was nicht mehr ganz hineinpasst, und zeigt dann
   „Alle N". Am Handy stapeln sich die Kacheln; dort begrenzt eine
   Höchsthöhe, damit die Seite nicht mit jeder Gewohnheit länger wird. */
.fit { position: relative; flex: 1 1 0; min-height: var(--fit-min, 96px); min-width: 0; }
.fit__inner { position: absolute; inset: 0; overflow: hidden; }
@media (max-width: 899px) {
  .fit { flex: none; min-height: 0; }
  .fit__inner { position: static; max-height: var(--fit-max, 320px); }
}
.fit--chips    { --fit-min: 76px;  --fit-max: 190px; }
.fit--aufgaben { --fit-min: 120px; --fit-max: 380px; }
.fit--ziele    { --fit-min: 96px;  --fit-max: 260px; }
.fit--habits   { --fit-min: 150px; --fit-max: 430px; }
.zutun__leer   { flex: 1 1 auto; }

/* Der Text einer Aufgabe oder eines Ziels ist ein Knopf: antippen zeigt ihn
   ganz (im Bearbeiten-Dialog). Der Kreis daneben hakt ab. */
.eintrag-text { display: block; flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.eintrag-text:hover .task__title, .eintrag-text:hover.goal__text { text-decoration: underline; text-decoration-color: rgba(20, 33, 58, .25); text-underline-offset: 3px; }

@media (min-width: 900px) {
  /* Habits-Reiter: die Liste ist dort die Hauptsache und bekommt die ganze Höhe links */
  .row-span-2 { grid-row: span 2; }
}

/* ---- Eintragen und Bearbeiten

   Aufgaben, Gewohnheiten und Ziele folgen demselben Muster: unten eine
   Zeile zum Eintragen (tippen, Enter), an jeder Zeile ⋯ zum Bearbeiten. */

.more {
  position: relative;
  flex: none;
  width: 30px; height: 30px;
  margin: -3px 0;
  display: grid; place-items: center;
  padding: 0;
  border: 0; border-radius: 9px;
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
  opacity: .55;
  transition: opacity .12s ease, background .12s ease;
}
.more svg { width: 18px; height: 18px; }
.more::before { content: ''; position: absolute; inset: -7px 0 -7px -10px; }   /* Tap-Ziel 44px hoch, nach innen verbreitert — nie über den Rand */
.more:hover, .more:focus-visible { opacity: 1; color: var(--ink); background: rgba(20, 33, 58, .07); }
.tile--hero .more, .tile--peach .more { color: inherit; }

.habit { display: flex; align-items: center; gap: 4px; }
.habit .habit__btn { flex: 1 1 auto; min-width: 0; }
.habit-list { display: flex; flex-direction: column; gap: 10px; }
.habit__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.habit__meta { font-size: 12px; font-weight: 500; opacity: .6; }

.add {
  display: flex; align-items: center; gap: 8px;
  flex: 1 1 auto; min-width: 0;
  min-height: 42px;
  padding: 3px 4px 3px 12px;
  border: 1px dashed rgba(20, 33, 58, .2);
  border-radius: 13px;
  background: rgba(255, 255, 255, .5);
  transition: background .12s ease, border-color .12s ease;
}
.tile:not(.tile--hero):not(.tile--peach) .add { background: var(--surface); }
.tile--paper .add { background: var(--surface-muted); }
.add:focus-within { border-style: solid; border-color: var(--accent); background: #fff; }
.add__plus { flex: none; font-size: 19px; font-weight: 600; line-height: 1; color: var(--ink-faint); }
.add__input {
  flex: 1 1 auto; min-width: 0;
  padding: 8px 0;
  border: 0; background: transparent; outline: none;
  font: inherit; font-size: 14.5px; color: var(--ink);
}
.add__input::placeholder { color: var(--ink-faint); opacity: 1; }
/* Unter 16px zoomt Safari beim Antippen hinein — und bleibt gezoomt. */
@media (max-width: 899px) { .add__input { font-size: 16px; } }
.add__btn {
  flex: none;
  padding: 7px 13px;
  border: 0; border-radius: 10px;
  background: var(--accent); color: var(--accent-ink);
  font: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer;
}
/* Der Knopf erscheint erst, wenn etwas dasteht — Enter reicht ohnehin. */
.add__input:placeholder-shown ~ .add__btn { display: none; }

.dialog__actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
#edit .dialog__body { color: var(--ink); }
.linkish--danger { color: var(--warn); }
.linkish--danger:hover { color: #8f4a0a; }
.dialog--page { max-width: 560px; }

.toast { display: flex; align-items: center; gap: 14px; }
.toast__undo {
  pointer-events: auto;
  padding: 5px 12px;
  border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .2); color: inherit;
  font: inherit; font-size: 13.5px; font-weight: 700;
  cursor: pointer;
}
.toast__undo:hover { background: rgba(255, 255, 255, .32); }

/* Die Ziele-Kachel: Kopf mit „Alle", unten die Eintragszeile */
.ziele .tile__body { gap: 4px; }
.ziele .goal__text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ziele .tile__body { min-height: 0; }
.dialog .ziele .goal__text, .dialog .goal__text { -webkit-line-clamp: unset; display: block; }

/* =============================================================================
   Umbau 27.09.2026 — Startseite, Serie, Belohnungen, Fortschritt
   ============================================================================= */

/* „Zu tun": ein Satz statt einer Null, die Punkte-Zeile, „Als Nächstes", „neu" */
.zutun__lead { font-size: clamp(30px, 5vh, 40px); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.zutun__xp {
  align-self: flex-start; max-width: 100%;
  padding: 4px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, .65);
  color: var(--ink); font-size: 12.5px; text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.zutun__xp:hover { background: rgba(255, 255, 255, .92); }
/* Die Beschriftung neben der großen Zahl bricht in sich um (eigene
   Zeilenhöhe), statt eine zweite Riesenzeile aufzumachen. */
.zutun__count .tile__num small { display: inline-block; max-width: 8.5em; line-height: 1.05; white-space: normal; }
/* Die Coach-Kachel füllt ihre Zelle wie alle anderen */
.start-coach { display: flex; min-width: 0; }
.start-coach > .tile { flex: 1 1 auto; }
.task__label { display: block; margin-bottom: 1px; font-size: 11.5px; font-weight: 700; color: var(--accent-2); }
.task__neu {
  display: inline-block; margin-right: 6px; padding: 0 7px;
  border-radius: 999px; background: var(--accent-2); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 17px;
}
.badge--neu { background: var(--accent-2); color: #fff; }
.dialog__zahl { margin-left: 4px; font-weight: 600; color: var(--ink-faint); }
.geschafft { margin-top: 10px; }
.geschafft__kopf { cursor: pointer; }

/* Die Woche als sieben Punkte: voll = geschafft, Ring = angefangen */
.woche { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.woche__tag { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.woche__punkt { width: 26px; height: 26px; border-radius: 50%; background: rgba(20, 33, 58, .08); border: 2px solid transparent; }
.woche__name { font-size: 11.5px; font-weight: 600; opacity: .6; }
.woche__tag--voll .woche__punkt { background: var(--ok); }
.woche__tag--teil .woche__punkt { background: var(--ok-soft); border-color: var(--ok); }
.woche__tag--zukunft .woche__punkt { background: transparent; border: 2px dashed rgba(20, 33, 58, .16); }
.woche__tag--heute .woche__punkt { box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 0 0 5px var(--accent); }
.woche__tag--heute .woche__name { opacity: 1; font-weight: 800; }
.woche--gross .woche__punkt { width: 32px; height: 32px; }
.start-gewohnheiten .tile__body { justify-content: center; gap: 12px; }

/* Belohnungen — und damit die Punkte */
.belohnungen .tile__body { gap: 8px; min-height: 0; }
.belohnungen__weg .bar { margin-top: 2px; }
.belohnungen__weg .tile__text { margin-top: 6px; }
.belohnungen__fuss { gap: 12px; }
.fit--belohnungen { --fit-min: 88px; --fit-max: 300px; }
.reward { gap: 8px; }
.reward .list__title { font-size: 15px; font-weight: 600; }
.add__preis { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--ink-faint); }
.add__zahl {
  width: 66px; padding: 6px 7px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
  font: inherit; font-size: 14px; text-align: right; color: var(--ink);
}
@media (max-width: 899px) { .add__zahl { font-size: 16px; } }
.field__input--kurz { max-width: 140px; }

/* Legende der Heatmap: weniger … mehr */
.heat-legende { display: inline-flex; align-items: center; gap: 3px; margin-top: 10px; font-size: 11.5px; color: var(--ink-faint); }
.heat-legende__zelle { display: inline-block; width: 11px; height: 11px; border-radius: 3px; }
.heat-legende__zelle--0 { background: var(--surface); border: 1px solid var(--line); }
.heat-legende__zelle--1 { background: color-mix(in srgb, var(--accent-2) 30%, var(--surface)); }
.heat-legende__zelle--2 { background: color-mix(in srgb, var(--accent-2) 55%, var(--surface)); }
.heat-legende__zelle--3 { background: color-mix(in srgb, var(--accent-2) 80%, var(--surface)); }
.heat-legende__zelle--4 { background: var(--accent-2); }
.dialog .heatmap { max-width: 100%; }

/* Fortschritt: Wo du gewachsen bist — Strecke vom ersten Assessment bis jetzt */
.wachs-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.wachs {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) 3.6rem 2.6rem;
  align-items: center; gap: 12px;
  padding: 7px 0;
  border-top: 1px solid rgba(20, 33, 58, .08);
}
.wachs:first-child { border-top: 0; padding-top: 2px; }
.wachs__name { min-width: 0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.wachs__werte { font-size: 12.5px; color: var(--ink-soft); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wachs__delta { padding: 2px 0; border-radius: 999px; font-size: 12.5px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.wachs__delta--auf    { background: var(--ok-soft); color: var(--ok); }
.wachs__delta--ab     { background: var(--warn-soft); color: var(--warn); }
.wachs__delta--gleich { color: var(--ink-faint); }
.strecke { display: block; width: 100%; height: auto; max-height: 22px; }
.strecke__spur   { stroke: rgba(20, 33, 58, .12); stroke-width: 3; stroke-linecap: round; }
.strecke__weg    { stroke-width: 4; stroke-linecap: round; }
.strecke__weg--auf { stroke: color-mix(in srgb, var(--src-student) 55%, transparent); }
.strecke__weg--ab  { stroke: color-mix(in srgb, var(--warn) 50%, transparent); }
.strecke__vorher { fill: #fff; stroke: rgba(20, 33, 58, .35); stroke-width: 2; }
.strecke__jetzt  { fill: var(--src-student); }
.strecke__jetzt--ab { fill: var(--warn); }
.fit--wachstum { --fit-min: 150px; --fit-max: 560px; }
@media (max-width: 520px) {
  .wachs { grid-template-columns: minmax(0, 1fr) 3.4rem 2.4rem; row-gap: 4px; }
  .wachs__strecke { grid-column: 1 / -1; grid-row: 2; }
}
.chart--kompakt .chart__axis { font-size: 11px; }
/* Das Diagramm nimmt den Platz, den die Kachel übrig hat — absolut, damit
   es die Kachel nie höher macht (dieselbe Idee wie bei .fit). */
.tile--peach .fs-chart { position: relative; flex: 1 1 0; min-height: 80px; }
.tile--peach .fs-chart .chart { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; }
@media (max-width: 899px) { .tile--peach .fs-chart { min-height: 170px; } }

/* ---- Niedrige Fenster (Paket C)

   Bemessen war das Blatt für 1280 × 800. Echte Laptop-Fenster sind oft
   niedriger (1366 × 650, 1280 × 713 mit Browserleisten) — dort scrollte das
   Blatt innen um bis zu 118 px, auf dem Mac ohne sichtbare Leiste. Diese
   Stufe macht Kopf, Abstände und Mindesthöhen kleiner; die eingepassten
   Listen (.fit) fangen den Rest auf. Gemessen mit bin/probe-hoehe.mjs. */
@media (min-width: 900px) and (max-height: 800px) {
  .shell { padding: 10px 10px 10px 0; }
  .shell:not(.shell--rail) { padding-left: 10px; }
  .page, body.has-nav .page { padding: 18px 26px 18px; gap: 12px; }
  .greeting__title { font-size: 24px; }
  .greeting__sub { margin-top: 2px; font-size: 13.5px; }
  .greeting .btn--small { min-height: 30px; padding: 4px 12px; }
  .grid { gap: 12px; }
  .grid--rows-2 > *,
  .grid--rows-2 > .tile--hero,
  .grid--rows-2 > .span-8:first-child,
  .grid--rows-2 > .span-7:first-child { min-height: 0; }
  .grid--rows-1 > * { min-height: 46vh; }
  .tile { padding: 15px 18px; gap: 6px; }
  .tile--hero { padding: 17px 20px; }
  .tile--hero .tile__num, .zutun .tile__num, .hero-split .tile__num { font-size: 42px; }
  .tile__num { font-size: 42px; }
  .zutun__lead { font-size: 28px; }
  .fit--aufgaben { --fit-min: 96px; }
  .fit--wachstum { --fit-min: 120px; }
  .rail__brand { padding-bottom: 12px; }
  .rail__item { padding: 6px 4px 5px; }
  .rail__nav { gap: 2px; }
}
@media (min-width: 900px) and (max-height: 700px) {
  .greeting__title { font-size: 22px; }
  .tile__text { font-size: 13px; line-height: 1.4; }
  .woche--gross .woche__punkt { width: 26px; height: 26px; }
  .woche--gross + .tile__num { font-size: 36px; }
  .fit--belohnungen { --fit-min: 44px; }
  .belohnungen__weg .tile__text { margin-top: 4px; }
}

/* Abgehakt = grün gefüllt, auch in den farbigen Kacheln und in Dialogen —
   steht bewusst ganz am Ende, damit keine Kachelregel es überschreibt. */
.task--done .task__check,
.tile--hero .task--done .task__check,
.tile--peach .task--done .task__check,
.dialog .task--done .task__check { background: var(--ok); border-color: var(--ok); }
.task--done .task__check svg { stroke: #fff; }
.habit--done .habit__dot,
.tile--hero .habit--done .habit__dot { background: var(--ok); border-color: var(--ok); }