/* ---------- Design-Tokens ----------
   Grundwerte = Stil „Glut“ (dunkel). css/styles/<stil>.css überschreibt sie je Stil und Modus;
   --ui, --glow-rgb, --k und --breath setzt js/core/theme.js minütlich nach der Uhrzeit
   (Stützpunkte in js/theme/palettes.js). Widgets verwenden nur diese Variablen. */
:root {
  /* Tageszeit */
  --ui: #EE8A4B;              /* Akzent roh */
  --accent: var(--ui);        /* Akzent für Bedienelemente (im Hellen abgedunkelt) */
  --on: #1B110C;              /* Text auf Akzentflächen */
  --glow-rgb: 238 138 75;
  --k: 0.5;                   /* Glühstärke */
  --gm: 1;                    /* Glüh-Faktor des Modus (hell: 0.5) */
  --breath: 10s;

  /* Flächen und Text */
  --bg: #130F0D;
  --surface: rgba(30, 24, 21, 0.78);
  --surface-solid: #1E1815;   /* deckend: Popover, Klingel-Fenster */
  --surface-2: #2A221E;
  --border: #3A302B;
  --text: #F2EAE2;
  --muted: #ABA095;
  --dim: #9C9187;

  /* Bedienelemente (Stile überschreiben z. B. weiße oder umrandete Buttons) */
  --primary-bg: var(--accent);
  --primary-fg: var(--on);
  --primary-border: var(--accent);
  --ring: var(--accent);      /* Fortschrittsringe */
  --dock-on-bg: color-mix(in srgb, var(--accent) 15%, transparent);
  --dock-on-fg: var(--accent);
  --dock-on-border: color-mix(in srgb, var(--accent) 50%, transparent);
  --card-bg: var(--surface);
  --card-border: 1px solid var(--border);
  --card-shadow: none;
  --hl-color: var(--accent);

  /* Statusfarben – bleiben in allen Stilen und Tageszeiten fest */
  --ok: #6CC08A;
  --danger: #F08A8A;
  --warn: #E3A944;
  --veg: #B5C46A;
  --temp-cold: #7FB4E6;
  --temp-warm: #F0B35E;
  --on-data: #FFFFFF;          /* Haken/Text auf frei gewählten Fach- und Gewohnheitsfarben */
  --spotify: #1DB954;

  --scrim: rgba(0, 0, 0, 0.55);
  --shadow-pop: 0 18px 50px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-lift: 0 6px 18px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ABA095' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");

  /* Formen */
  --r-card: 20px;
  --r-md: 12px;
  --r-sm: 8px;
  --r-pill: 999px;
  --r-dock: 16px;
  --radius: var(--r-card);
  --gap: 14px;

  /* Schriften (Google Fonts lädt theme.js je Stil, sonst greifen die Fallbacks) */
  --font: Manrope, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-display: var(--font);
  --font-brief: Newsreader, Georgia, "Times New Roman", serif;
  --font-title: var(--font);

  /* Icon-Farben (Wetter) */
  --ic-sun: #E09A1F;
  --ic-moon: #8B8FD0;
  --ic-cloud: #A2A5AD;
  --ic-rain: #3C82CF;
  --ic-snow: #7AAEE0;
  --ic-storm: #8B62D0;
  color-scheme: dark;
}

/* Statusfarben und Schatten im hellen Modus (Flächen je Stil in css/styles/) */
:root[data-theme="light"] {
  --ok: #276B42;
  --danger: #B42334;
  --warn: #7E5200;
  --veg: #5E6B1E;
  --ic-cloud: #8F939B;
  --scrim: rgba(20, 14, 10, 0.45);
  --shadow-pop: 0 18px 50px rgba(29, 28, 26, 0.14), 0 2px 6px rgba(29, 28, 26, 0.08);
  --shadow-lift: 0 6px 18px rgba(29, 28, 26, 0.16);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236A5B4E' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  color-scheme: light;
}

/* ---------- Grundlayout ---------- */
* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  color: var(--text);
  background: var(--bg);
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
           max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  overflow-x: hidden;
  transition: background-color 0.6s ease, color 0.4s ease;
}

.muted { color: var(--muted); }
.dim { color: var(--dim); }

/* ---------- Atmosphäre: atmendes Glühen ---------- */
.glow { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.glow-layer { position: absolute; inset: -10%; transition: opacity 1.4s ease; }
.glow-layer b { position: absolute; inset: 0; animation: breathe var(--breath) ease-in-out infinite alternate; }
.glow-calm b {
  background:
    radial-gradient(46% 42% at 20% 14%, rgb(var(--glow-rgb) / calc(var(--k) * var(--gm))), transparent 72%),
    radial-gradient(40% 36% at 88% 92%, rgb(var(--glow-rgb) / calc(var(--k) * var(--gm) * 0.35)), transparent 70%);
}
.glow-focus { opacity: 0; }
.glow-focus b { background: radial-gradient(40% 44% at 50% 50%, rgb(var(--glow-rgb) / calc(var(--k) * var(--gm) * 1.6)), transparent 72%); }
:root[data-mode="fokus"] .glow-calm { opacity: 0; }
:root[data-mode="fokus"] .glow-focus { opacity: 1; }
@keyframes breathe { from { transform: scale(1); opacity: 0.8; } to { transform: scale(1.08); opacity: 1; } }

/* Bis die Stil-Datei geladen ist, nichts zeigen (kein Aufblitzen von Glut beim Laden);
   falls das Skript ausfällt, nach 2 s trotzdem zeigen */
:root:not(.is-styled) body > * { visibility: hidden; animation: reveal-fallback 0s 2s forwards; }
@keyframes reveal-fallback { to { visibility: visible; } }

.top, .dock, .grid, .only-back, .noscript { position: relative; z-index: 1; }
.top { z-index: 3; } /* Popover über den Kacheln */

/* ---------- Kopfbereich: Begrüßung | Werkzeuge, Uhr + Datum | Briefing-Satz ---------- */
.top {
  max-width: 1240px;
  margin: clamp(4px, 2vw, 20px) auto clamp(16px, 2.5vw, 24px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "greet tools" "time say" "date say";
  align-items: center;
  column-gap: clamp(24px, 5vw, 56px);
  row-gap: 4px;
}
/* Die Uhr-Bausteine liegen direkt im Raster des Kopfes */
.slot-hero, .slot-widget--hero, .slot-widget--hero > .widget-body { display: contents; }
.hero-greeting-slot { grid-area: greet; min-width: 0; }
.hero-time { grid-area: time; }
.hero-date { grid-area: date; align-self: start; }
.say { grid-area: say; min-width: 0; max-width: 46ch; }
.hud { grid-area: time; display: none; }

.brief {
  margin: 0;
  font-family: var(--font-brief);
  font-style: italic;
  font-size: clamp(21px, 2.5vw, 30px);
  line-height: 1.3;
  text-wrap: balance;
}
.brief .hl { font-style: normal; font-weight: 500; color: var(--hl-color); }
.brief:empty { min-height: 1.3em; }

.top-tools {
  grid-area: tools;
  justify-self: end;
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

@media (max-width: 899px) {
  .top {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "greet tools" "time time" "date date" "say say";
  }
  .say { margin-top: 12px; max-width: 60ch; }
}
@media (max-width: 559px) {
  .top {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "tools" "greet" "time" "date" "say";
  }
}

/* Fokus: Uhr tritt zurück */
.hero-time { transition: opacity 0.5s ease; }
:root[data-mode="fokus"] .hero-time { opacity: 0.5; }

.slot-header { display: flex; gap: 8px; }

/* ---------- Kachel-Raster ----------
   Masonry aus js/core/layout.js: 4 / 3 / 2 / 1 Spalten, S = 1 Spalte, M und L = 2 Spalten breit,
   jede Kachel in ihrer natürlichen Höhe. Abstände aus --gap (oder --gap-x / --gap-y).
   Ohne Skript (Nur-Ansicht ?nur=…) einfach untereinander. */
.grid {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  gap: var(--gap-y, var(--gap)) var(--gap-x, var(--gap));
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
.grid:empty { display: none; }
.grid.is-masonry { display: block; position: relative; }
.grid.is-masonry > .card,
.grid.is-masonry > .card-placeholder { position: absolute; top: 0; left: 0; transition: transform 0.2s ease, opacity 0.5s ease; }
/* Bis die ersten Positionen berechnet sind, nichts zeigen (kein sichtbarer Sprung) */
.grid.is-masonry:not(.is-ready) > .card { opacity: 0; transition: none; }
.grid.is-masonry.is-instant > .card { transition: opacity 0.5s ease; }
@media (prefers-reduced-motion: reduce) {
  .grid.is-masonry > .card { transition: opacity 0.5s ease; }
}

.card {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 18px 16px;
  border-radius: var(--r-card);
  background: var(--card-bg);
  border: var(--card-border);
  box-shadow: var(--card-shadow);
  transition: opacity 0.5s ease;
}

/* Ruhe → Fokus: Lernzeit wird groß, der Rest tritt zurück */
:root[data-mode="fokus"] .card:not([data-widget="study"]) { opacity: 0.36; }
:root[data-mode="fokus"] .card:not([data-widget="study"]):focus-within,
:root[data-mode="fokus"] .card:not([data-widget="study"]):hover { opacity: 1; }

/* Werkzeuge im Kachelkopf (Größe, Griff): unsichtbar, bei Hover/Tastaturfokus sichtbar.
   Sie bleiben im Layout reserviert, damit der Kopf beim Einblenden nicht springt. */
.card-tool { opacity: 0; transition: opacity 0.15s ease; }
.card:hover .card-tool, .card:focus-within .card-tool, .card.is-tools .card-tool { opacity: 1; }
.size-btn { border-color: transparent; background: none; color: var(--text); }
.size-btn:hover { color: var(--text); border-color: var(--border); }
.size-btn .ln-ic { width: 18px; height: 18px; }
/* Verschieben am Kachelkopf (js/core/layout.js) */
.grid.is-sortable .card-header { cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.grid:not(.is-sortable) .drag-handle { display: none; }
.drag-handle { margin-left: -10px; border-color: transparent; background: none; color: var(--muted); cursor: grab; }
.drag-handle:hover { color: var(--text); }
.drag-handle .ln-ic { width: 18px; height: 18px; fill: currentColor; stroke: none; }
:root[data-mode="fokus"] .grid.is-sortable .card-header { cursor: auto; }
:root[data-mode="fokus"] .drag-handle { visibility: hidden; }
.card.is-dragging {
  position: fixed;
  z-index: 60;
  margin: 0;
  min-height: 0;
  background: var(--surface-solid); /* deckend, damit der Inhalt darunter nicht durchscheint */
  box-shadow: var(--shadow-pop);
  pointer-events: none;
  transition: none;
  will-change: transform;
}
.card.is-grabbed { outline: 2px solid var(--accent); outline-offset: 3px; box-shadow: var(--shadow-lift); }
.card-placeholder { border: 2px dashed var(--accent); border-radius: var(--r-card); background: color-mix(in srgb, var(--accent) 6%, transparent); }
body.is-card-dragging { cursor: grabbing; -webkit-user-select: none; user-select: none; }
body.is-card-dragging .grid { z-index: 4; }
body.is-card-dragging .card-header { cursor: grabbing; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Touch ohne Hover: erst ein Tipp auf den Kopf blendet die Werkzeuge 4 s ein;
   bis dahin sind sie nicht antippbar (keine versehentlichen Größenwechsel). */
@media (hover: none) {
  .card:not(.is-tools) .card-tool:not(:focus-visible) { opacity: 0; pointer-events: none; }
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
}

.card-title {
  margin: 0 auto 0 0;
  font-family: var(--font-title);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.is-loading .card-title::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 8px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
  animation: pulse 1s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.2; } }

.card-actions { display: flex; gap: 6px; }
.card-body { min-width: 0; }
.card-status { margin: 0; font-size: 0.75rem; color: var(--muted); }

/* ---------- Bedienelemente ---------- */
.chip {
  min-height: 34px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 6px 12px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
  background: var(--surface);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.chip:hover { border-color: var(--muted); }

.icon-btn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-icon, 50%);
  background: var(--surface);
  color: var(--text);
  font-size: 1.05rem;
  cursor: pointer;
}
.icon-btn:hover { border-color: var(--muted); }

/* Sichtbarer Fokusring in allen Stilen */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.icon-btn .ln-ic { width: 20px; height: 20px; }

input[type="search"], input[type="text"] {
  width: 100%;
  min-width: 0;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: inherit;
  font: inherit;
}

.widget-error { display: grid; gap: 6px; justify-items: start; }
.widget-error p { margin: 0; }
.widget-error-title { font-weight: 600; }
.widget-error-chip { color: var(--muted); }

.noscript { max-width: 1240px; margin: 0 auto; }

/* ---------- Icons ---------- */
.ic {
  width: 1.4em;
  height: 1.4em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ic-sun   { color: var(--ic-sun); }
.ic-moon  { color: var(--ic-moon); }
.ic-cloud, .ic-fog, .ic-partly { color: var(--ic-cloud); }
.ic-part-sun { stroke: var(--ic-sun); }
.ic-rain, .ic-snow, .ic-storm { color: var(--ic-cloud); }
.ic-rain .ic-drops { stroke: var(--ic-rain); }
.ic-snow .ic-drops { stroke: var(--ic-snow); stroke-width: 2.6; }
.ic-storm .ic-bolt { stroke: var(--ic-storm); }

/* ---------- Widget: Uhr (Kopfbereich) ---------- */
.hero-greeting {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 1.05rem;
  color: var(--muted);
  cursor: pointer;
}
.hero-greeting:hover { color: var(--text); }

.hero-time {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: clamp(72px, 12vw, 144px);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.hero-date {
  margin: 8px 0 0;
  font-size: 1.05rem;
  color: var(--muted);
}

.hero-name-form { display: flex; gap: 6px; max-width: 320px; }

/* ---------- Widget: Wetter (kompakt + Panel) ---------- */
.wx-toggle {
  height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.wx-toggle:hover,
.wx-toggle[aria-expanded="true"] { border-color: var(--muted); }
.wx-toggle.is-stale span::after { content: " ·"; color: var(--accent); }

.popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 10;
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding: 18px 20px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface-solid);
  box-shadow: var(--shadow-pop);
  animation: pop-in 0.2s ease-out;
}
.popover[hidden] { display: none; }
@keyframes pop-in {
  from { opacity: 0; transform: translateY(-4px); }
}

.wx-now {
  display: flex;
  align-items: center;
  gap: 12px;
}
.wx-now .ic { width: 2.6rem; height: 2.6rem; stroke-width: 1.3; }
.wx-temp {
  font-size: 2.6rem;
  font-weight: 250;
  line-height: 1;
  letter-spacing: -0.03em;
}
.wx-now-text { display: grid; gap: 2px; margin-left: 4px; }
.wx-meta { margin: 10px 0 0; font-size: 0.88rem; }

.wx-hours {
  list-style: none;
  margin: 16px -20px 0;
  padding: 12px 20px;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 20px;
  border-block: 1px solid var(--border);
  scrollbar-width: thin;
}
.wx-hour {
  flex: 0 0 auto;
  min-width: 44px;
  display: grid;
  justify-items: center;
  gap: 6px;
  scroll-snap-align: start;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}
.wx-hour-time { color: var(--muted); }
.wx-hour.is-now .wx-hour-time { color: var(--accent); font-weight: 600; }
.wx-hour-temp { font-weight: 500; }
.wx-rain { font-size: 0.72rem; min-height: 1em; color: var(--ic-rain); }

.wx-days {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
}
.wx-day {
  display: grid;
  grid-template-columns: 4.6em 1.4em 2.8em 2.2em 1fr 2.2em;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-variant-numeric: tabular-nums;
}
.wx-day + .wx-day { border-top: 1px solid var(--border); }
.wx-day-min { text-align: right; color: var(--muted); }
.wx-day-max { font-weight: 500; }
.wx-range {
  display: block;
  position: relative;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
}
.wx-range span {
  position: absolute;
  inset-block: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--temp-cold), var(--temp-warm));
}

.wx-picker {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.wx-picker[hidden] { display: none; }
.wx-search { display: flex; gap: 6px; }
.wx-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.wx-results:empty { display: none; }
.wx-result {
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  border: 0;
  border-radius: var(--r-md);
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.wx-result:hover { background: var(--surface-2); }
.wx-result .muted { font-size: 0.85em; margin-left: 6px; }

.wx-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
}
.wx-status { margin: 0; font-size: 0.75rem; }

/* ---------- Widget: Mensa ---------- */
.select {
  width: 100%;
  padding: 8px 36px 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface-2) var(--chevron) no-repeat right 12px center / 16px;
  color: var(--text);
  font: inherit;
  font-weight: 500;
  appearance: none;
  cursor: pointer;
}

.icon-btn--sm { width: 32px; height: 32px; font-size: 1.2rem; line-height: 1; }
.icon-btn:disabled { opacity: 0.35; cursor: default; }
.icon-btn:disabled:hover { border-color: var(--border); }

.mensa-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
}
.mensa-nav[hidden] { display: none; }
.mensa-day { font-weight: 600; }
.mensa-hint { margin: 6px 0 0; font-size: 0.85rem; text-align: center; }
.mensa-hint[hidden] { display: none; }
.mensa-list { margin-top: 8px; }
.mensa-list > p { margin: 8px 0 0; }

.meals { list-style: none; margin: 0; padding: 0; }
.meal {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
}
.meal + .meal { border-top: 1px solid var(--border); }
.meal-text { display: grid; gap: 2px; justify-items: start; min-width: 0; }
.meal-cat {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.meal-name { line-height: 1.35; }
.meal-price {
  display: grid;
  justify-items: end;
  gap: 2px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.meal-price strong { color: var(--accent); font-size: 1.05rem; font-weight: 600; }
.meal-price .muted { font-size: 0.75rem; }
.meal-sides { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--border); font-size: 0.85rem; }

.tag {
  margin-top: 4px;
  padding: 1px 8px;
  border-radius: var(--r-pill);
  font-size: 0.72rem;
  font-weight: 500;
}
.tag-vegan { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.tag-vegetarisch { color: var(--veg); background: color-mix(in srgb, var(--veg) 16%, transparent); }

@media (max-width: 480px) {
  .wx-day { grid-template-columns: 4em 1.4em 2.6em 2em 1fr 2em; gap: 6px; }
}

/* ---------- Allgemeine Ergänzungen ---------- */
.small { font-size: 0.8rem; }

/* Primäre Buttons folgen dem Akzent (Farben je Stil über --primary-*) */
.chip--accent { background: var(--primary-bg); border-color: var(--primary-border); color: var(--primary-fg); font-weight: 600; }
.chip--accent:hover { border-color: var(--primary-border); filter: brightness(1.06); }
a.chip { text-decoration: none; display: inline-block; }

.icon-btn--xs { width: 26px; height: 26px; font-size: 0.85rem; border-color: transparent; background: none; color: var(--muted); }
.icon-btn--xs:hover { color: var(--text); border-color: var(--border); }

input[type="password"], input[type="date"], input[type="time"] {
  min-width: 0;
  padding: 7px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: inherit;
  font: inherit;
}
input[type="password"] { width: 100%; }

.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.dot--btn { width: 18px; height: 18px; border: 0; padding: 0; cursor: pointer; }

/* ---------- Einstellungen / Sync ---------- */
.settings-panel { width: min(480px, calc(100vw - 32px)); }
.settings-section { border-top: 1px solid var(--border); }
.settings-section:last-child { border-bottom: 1px solid var(--border); }
.settings-section > summary {
  min-height: 48px;
  display: grid;
  align-content: center;
  gap: 1px;
  padding: 8px 28px 8px 0;
  position: relative;
  cursor: pointer;
  list-style: none;
}
.settings-section > summary::-webkit-details-marker { display: none; }
.settings-section > summary::after { content: "›"; position: absolute; right: 6px; top: 50%; translate: 0 -50%; color: var(--muted); transition: rotate 0.15s; }
.settings-section[open] > summary::after { rotate: 90deg; }
.settings-section-title { font-weight: 600; }
.settings-section > .settings-body { margin: 0 0 16px; }
.settings-label { margin: 6px 0 0; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.settings-field { display: grid; gap: 4px; }
.settings-field input[type="url"] { width: 100%; min-width: 0; padding: 7px 14px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface-2); color: inherit; font: inherit; }
.settings-secret { display: flex; gap: 6px; min-width: 0; }
.settings-secret input { flex: 1; width: auto; }
.settings-result { margin: 0; font-size: 0.9rem; }
.settings-result:empty { display: none; }
.settings-result.is-ok { color: var(--ok); }
.settings-result.is-error { color: var(--danger); }
.settings-btn { position: relative; }
.sync-dot {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--bg);
  display: none;
}
.settings-btn[data-sync="ok"] .sync-dot { display: block; background: var(--ok); }
.settings-btn[data-sync="syncing"] .sync-dot { display: block; background: var(--muted); animation: pulse 1s ease-in-out infinite; }
.settings-btn[data-sync="error"] .sync-dot { display: block; background: var(--danger); }
.settings-btn[data-sync="offline"] .sync-dot { display: block; background: var(--warn); }

.settings-body { display: grid; gap: 10px; margin-top: 10px; }
.settings-body p { margin: 0; }
.settings-steps { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; font-size: 0.9rem; }
.settings-steps a, .settings-body a:not(.chip) { color: var(--accent); }
.settings-form { display: flex; flex-wrap: wrap; gap: 6px; }
.settings-form > .settings-secret { flex: 1 1 220px; }
.settings-error { margin: 0; font-size: 0.85rem; color: var(--danger); min-height: 0; }
.settings-error:empty { display: none; }
.settings-state.is-ok::before { content: "● "; color: var(--ok); }
.settings-state.is-error::before { content: "● "; color: var(--danger); }
.settings-actions { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- Widget: Lernzeit ---------- */
.study-timer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
}
.study-timer-main { display: grid; gap: 6px; min-width: 0; flex: 1 1 200px; max-width: 320px; }
.study-time {
  font-size: clamp(2.2rem, 6vw, 2.8rem);
  font-weight: 250;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.is-running .study-time { color: var(--text); }
.study-btn {
  width: 76px;
  height: 76px;
  flex-shrink: 0;
  border-radius: var(--r-round, 50%);
  border: 1px solid var(--primary-border);
  background: var(--primary-bg);
  color: var(--primary-fg);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.2s;
}
.study-btn:hover { transform: scale(1.03); }
.study-btn.is-running { background: var(--text); border-color: var(--text); color: var(--bg); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 25%, transparent); }

.study-totals { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; color: var(--muted); }
.study-totals strong { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

.study-weekbar { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.study-week { font-weight: 600; font-size: 0.9rem; }

.study-chart {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  height: 150px;
  margin-top: 10px;
}
.study-day { display: grid; grid-template-rows: 1.2em 1fr 1.4em; justify-items: center; gap: 4px; min-width: 0; }
.study-day-total { font-size: 0.72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.study-bar {
  width: min(100%, 34px);
  display: flex;
  flex-direction: column-reverse;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--surface-2);
}
.study-bar span { display: block; width: 100%; }
.study-day-name { font-size: 0.8rem; color: var(--muted); }
.study-day.is-today .study-day-name { color: var(--accent); font-weight: 600; }

.study-legend { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.85rem; }
.study-legend li { display: inline-flex; align-items: center; gap: 6px; }
.study-legend:empty { display: none; }

.study-details { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 10px; }
.study-details summary { cursor: pointer; font-weight: 500; color: var(--muted); }
.study-details[open] summary { margin-bottom: 10px; }
.study-entries { display: grid; gap: 8px; justify-items: start; }
.study-entries > * { width: 100%; }
.study-entries > .chip { width: auto; }
.study-entries-day { margin: 8px 0 0; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.study-entry-list { list-style: none; margin: 0; padding: 0; }
.study-entry {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "dot subject edit del" "dot meta edit del";
  align-items: center;
  column-gap: 10px;
  row-gap: 1px;
  padding: 6px 0;
}
.study-entry + .study-entry { border-top: 1px solid var(--border); }
.study-entry .dot { grid-area: dot; }
.study-entry-subject { grid-area: subject; overflow-wrap: break-word; line-height: 1.3; }
.study-entry-meta { grid-area: meta; font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.study-entry-edit { grid-area: edit; }
.study-entry-del { grid-area: del; }

.study-form { display: grid; gap: 8px; padding: 12px; border-radius: var(--r-md); background: var(--surface-2); }
.study-form input, .study-form .select { background-color: var(--surface); }
.study-form-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.study-panel { display: grid; gap: 10px; margin-bottom: 16px; padding: 12px; border-radius: var(--r-md); background: var(--surface-2); }
.study-panel[hidden] { display: none; }
.study-panel input[type="text"] { background: var(--surface); }
.study-panel p { margin: 0; }
.study-subjects { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.study-subjects:empty { display: none; }
.study-subjects li { display: flex; align-items: center; gap: 8px; }
.study-panel .study-form-row input[type="text"] { flex: 1; width: auto; }

@media (max-width: 480px) {
  .study-btn { width: 68px; height: 68px; }
}

/* ---------- Pause & Bestätigungs-Buttons ---------- */
.study-buttons { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.study-btn[hidden] { display: none; }
.study-btn--secondary {
  width: 60px;
  height: 60px;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  font-size: 0.9rem;
}
.is-paused .study-time { color: var(--text); animation: pulse 1.6s ease-in-out infinite; }
.is-paused .study-btn--secondary { background: var(--primary-bg); border-color: var(--primary-border); color: var(--primary-fg); }
.is-paused .study-btn.is-running { box-shadow: none; }

.is-confirming { color: var(--danger) !important; border-color: var(--danger) !important; }
.icon-btn--xs.is-confirming { width: auto; padding: 0 8px; border-radius: var(--r-pill); font-size: 0.8rem; }

input[type="number"] {
  width: 4.5em;
  padding: 7px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: inherit;
  font: inherit;
}
.study-pause-field { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 0.9rem; }
.study-form-row > .select { flex: 1; min-width: 140px; width: auto; }

@media (max-width: 480px) {
  .study-btn--secondary { width: 54px; height: 54px; }
  .study-buttons { gap: 8px; }
}

/* ---------- Widget: Stundenplan (kompakt + Panel) ---------- */
.slot-header { flex-wrap: wrap; justify-content: flex-end; }

.tt-toggle {
  height: 40px;
  max-width: min(320px, 62vw);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}
.tt-toggle:hover,
.tt-toggle[aria-expanded="true"] { border-color: var(--muted); }
.tt-toggle .ic { color: var(--accent); width: 1.25em; height: 1.25em; }
.tt-toggle-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-toggle-text strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.tt-toggle.is-stale .tt-toggle-text::after { content: " ·"; color: var(--accent); }

.tt-panel { width: min(460px, calc(100vw - 32px)); }

.tt-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.tt-nav[hidden], .tt-days[hidden], .tt-setup[hidden] { display: none; }
.tt-nav-label { font-weight: 600; font-size: 0.9rem; }

.tt-day + .tt-day { margin-top: 6px; }
.tt-day-title {
  margin: 12px 0 6px;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.tt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

.tt-event {
  display: grid;
  grid-template-columns: 3.4em minmax(0, 1fr);
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--r-md);
}
.tt-event.is-now { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.tt-event.is-past { opacity: 0.5; }
.tt-event.is-cancelled .tt-title { text-decoration: line-through; color: var(--muted); }
.tt-time { font-variant-numeric: tabular-nums; font-weight: 600; line-height: 1.3; }
.tt-time .muted { font-weight: 400; font-size: 0.85rem; }
.tt-info { display: grid; gap: 2px; justify-items: start; min-width: 0; }
.tt-title { font-weight: 500; overflow-wrap: break-word; }
.tt-room { font-size: 0.88rem; }
.tt-flag {
  margin-top: 2px;
  padding: 1px 8px;
  border-radius: var(--r-pill);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 14%, transparent);
}
.tt-flag--now { color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, transparent); }
.tt-desc { font-size: 0.85rem; color: var(--muted); }
.tt-desc summary { cursor: pointer; }
.tt-desc p { margin: 4px 0 0; white-space: pre-line; }

.tt-allday {
  padding: 6px 10px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  font-size: 0.9rem;
  font-weight: 500;
}
.tt-allday.is-cancelled { text-decoration: line-through; color: var(--muted); }
.tt-gap { padding: 2px 10px 2px calc(3.4em + 22px); font-size: 0.78rem; color: var(--muted); }
.tt-gap::before { content: "┆ "; }
.tt-empty { padding: 6px 10px; }

.tt-setup { display: grid; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.tt-setup p { margin: 0; font-size: 0.88rem; }
.tt-setup input[type="url"] { width: 100%; min-width: 0; padding: 7px 14px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface-2); color: inherit; font: inherit; }
.tt-label { font-size: 0.85rem; font-weight: 600; }
.tt-saved { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.88rem; }
.tt-import { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.88rem; }
.tt-setup-info:empty { display: none; }

.tt-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
.tt-status { margin: 0; font-size: 0.75rem; display: grid; gap: 2px; }
.tt-problem { color: var(--danger); }
.tt-footer[hidden] { display: none; }
.tt-panel.is-unconfigured .tt-setup { margin-top: 0; padding-top: 0; border-top: 0; }

/* Kopfleiste darf umbrechen, damit sie nie breiter als das Fenster wird */
.top-tools { flex-wrap: wrap; justify-content: flex-end; flex-shrink: 1; min-width: 0; max-width: 100%; }
.slot-header { min-width: 0; max-width: 100%; }
.slot-widget--header { min-width: 0; max-width: 100%; }
.tt-toggle { max-width: min(320px, 100%); }
/* Kompakte Widgets und Buttons teilen sich eine Zeile und brechen gemeinsam um */
.slot-header { display: contents; }

/* ---------- Kachelkopf-Status ---------- */
.card-badge {
  padding: 2px 10px;
  border-radius: var(--r-pill);
  font-size: 0.78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  white-space: nowrap;
}
.card-badge[hidden] { display: none; }

/* ---------- Umschalter (Segmente) ---------- */
.segmented {
  display: inline-flex;
  padding: 3px;
  margin-bottom: 14px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.segment {
  padding: 5px 14px;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
}
.segment[aria-pressed="true"] { background: var(--surface-solid); color: var(--text); box-shadow: var(--shadow-sm); }
.segment:disabled { cursor: not-allowed; }
.segment:disabled:not([aria-pressed="true"]) { opacity: 0.45; }
.study-time[hidden], .study-buttons[hidden], .pomo[hidden] { display: none; }

/* ---------- Pomodoro ---------- */
.pomo { margin-top: 14px; }
.pomo-main { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.pomo-dial { position: relative; width: 140px; height: 140px; flex-shrink: 0; }
.pomo-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.pomo-ring circle { fill: none; stroke-width: 7; }
.pomo-ring-track { stroke: var(--border); }
.pomo-ring-bar { stroke: var(--ring); stroke-linecap: round; transition: stroke-dashoffset 0.9s linear; }
.pomo[data-phase="short"] .pomo-ring-bar,
.pomo[data-phase="long"] .pomo-ring-bar { stroke: var(--ok); }
.pomo-dial-text { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 2px; }
.pomo-time { font-size: 1.9rem; font-weight: 250; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pomo-phase { font-size: 0.8rem; color: var(--muted); max-width: 110px; }
.pomo.is-paused .pomo-time { animation: pulse 1.6s ease-in-out infinite; }
.pomo-side { display: grid; gap: 10px; min-width: 0; flex: 1 1 200px; }
.pomo-round { font-size: 0.9rem; }
.pomo-controls { display: flex; flex-wrap: wrap; gap: 6px; }
.pomo-controls[hidden], .pomo-question[hidden], .pomo-controls .chip[hidden] { display: none; }
.pomo-primary { min-width: 90px; }
.pomo-question { display: grid; gap: 8px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); font-size: 0.9rem; }
.pomo-question p { margin: 0; }
.pomo-settings { margin-top: 12px; font-size: 0.9rem; }
.pomo-settings summary { cursor: pointer; color: var(--muted); }
.pomo-settings[open] { display: grid; gap: 10px; padding: 10px 12px 12px; border-radius: var(--r-md); background: var(--surface-2); }
.pomo-settings[open] summary { margin-bottom: 2px; }
.pomo-settings p { margin: 0; }
.pomo-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 12px; }
.pomo-field { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pomo-check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.pomo-check input { accent-color: var(--accent); width: 16px; height: 16px; }

/* ---------- Widget: Gewohnheiten ---------- */
.habit-weekbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.habit-weekbar[hidden] { display: none; }
.habit-week-label { font-weight: 600; font-size: 0.9rem; }
.habit-list { list-style: none; margin: 0; padding: 0; }
.habit { display: flex; align-items: center; gap: 14px; padding: 12px 0; }
.habit + .habit { border-top: 1px solid var(--border); }
.habit-empty { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0; }

.habit-check {
  --habit: var(--accent);
  position: relative;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--habit) 55%, var(--border));
  background: var(--surface);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.1s;
}
.habit-check:hover { border-color: var(--habit); }
.habit-check:active { transform: scale(0.94); }
.habit-check.is-done { background: var(--habit); border-color: var(--habit); color: var(--on-data); }
.habit-emoji { font-size: 1.4rem; line-height: 1; transition: opacity 0.2s, transform 0.2s; }
.habit-tick { position: absolute; font-size: 1.4rem; font-weight: 700; opacity: 0; transform: scale(0.5); transition: opacity 0.2s, transform 0.2s; }
.habit-check.is-done .habit-tick { opacity: 1; transform: scale(1); }
.habit-check.is-done .habit-emoji { opacity: 0; transform: scale(0.5); }
.habit-check.pop { animation: habit-pop 0.35s ease-out; }
@keyframes habit-pop {
  40% { transform: scale(1.12); box-shadow: 0 0 0 6px color-mix(in srgb, var(--habit) 20%, transparent); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .habit-check.pop { animation: none; }
}

.habit-body { display: grid; gap: 4px; min-width: 0; flex: 1; }
.habit-name { font-weight: 500; overflow-wrap: break-word; }
.habit-stats { font-size: 0.82rem; }
.habit-goal { font-weight: 600; color: var(--text); }
.habit-goal.is-reached { color: var(--ok); }
.habit-week { display: flex; gap: 4px; margin-top: 2px; }
.habit-dot {
  --habit: var(--accent);
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.62rem;
  cursor: pointer;
}
.habit-dot:hover:not(:disabled) { border-color: var(--habit); }
.habit-dot.is-done { background: var(--habit); border-color: var(--habit); color: var(--on-data); }
.habit-dot.is-today { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px color-mix(in srgb, var(--habit) 60%, transparent); }
.habit-dot:disabled { opacity: 0.35; cursor: default; }

.habit-manage { margin-bottom: 14px; }
.habit-manage-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.habit-manage-list > li { display: grid; gap: 6px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.habit-manage-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.habit-manage-row input[type="text"]:not(.habit-emoji-input) { flex: 1; min-width: 120px; width: auto; }
.habit-emoji-input { width: 3.2em !important; text-align: center; padding-inline: 6px !important; flex: none; }
.habit-goal-select { width: auto; flex: 1; min-width: 130px; }
.habit-archive summary { cursor: pointer; color: var(--muted); font-size: 0.9rem; }
.habit-archive .habit-manage-list { margin-top: 8px; }
.habit-archive .habit-manage-list > li { display: flex; border: 0; padding: 0; }
.habit-archived-name { flex: 1; }

/* ---------- Widget: Klausuren ---------- */
.exam-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.exam {
  --subject: var(--accent);
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
}
.exam.is-next {
  border-color: color-mix(in srgb, var(--subject) 45%, var(--border));
  background: color-mix(in srgb, var(--subject) 8%, transparent);
  padding: 14px;
}
.exam.is-past { opacity: 0.6; }
.exam-head { display: flex; align-items: center; gap: 8px; }
.exam-subject { font-weight: 600; flex: 1; min-width: 0; overflow-wrap: break-word; }
.exam-countdown { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.exam.is-next .exam-countdown { font-size: 1.15rem; color: var(--subject); }
.exam-meta { font-size: 0.85rem; }
.exam-note { font-size: 0.88rem; }
.exam-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; }
.exam-studied { font-size: 0.8rem; }
.exam-actions { display: flex; gap: 2px; margin-left: auto; }
.exam-past { margin-top: 12px; }
.exam-past summary { cursor: pointer; color: var(--muted); font-size: 0.9rem; margin-bottom: 8px; }
.exam-empty { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.exam-form-slot:not(:empty) { margin-bottom: 12px; }
.exam-form .study-form-row > input[type="text"] { flex: 1; width: auto; min-width: 140px; background: var(--surface); }
.exam-form input[hidden] { display: none; }
.exam-items { grid-template-columns: minmax(0, 1fr); }
.exam { min-width: 0; }
.exam-head { flex-wrap: wrap; }
.exam-subject { flex: 1 1 140px; }

.mensa-hours { margin: 8px 2px 0; font-size: 0.85rem; color: var(--muted); }
.mensa-hours[hidden] { display: none; }
.mensa-hours.is-open { color: var(--ok); }
.mensa-hours.is-open::before { content: "● "; }

/* Klausuren: 2. Termin */
.exam-second { display: grid; gap: 8px; padding-left: 10px; border-left: 2px solid var(--border); }
.exam-second[hidden] { display: none; }
.exam-second .select { width: auto; flex: 1; }

.exam-summary { margin: 0 0 8px; font-size: 0.9rem; }
.exam-summary.is-soon { color: var(--accent); font-weight: 500; }
.exam-setting { margin-bottom: 12px; font-size: 0.88rem; color: var(--muted); }

/* Klausuren: zwei Termine als kompakter Umschalter */
.exam-pick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.exam-pick-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: pointer;
}
.exam-pick-btn:hover:not(:disabled) { border-color: var(--subject); color: var(--text); }
.exam-pick-n { font-weight: 600; }
.exam-pick-btn.is-selected { border-color: var(--subject); background: var(--subject); color: var(--on-data); }
.exam-pick-btn.is-past { text-decoration: line-through; opacity: 0.5; cursor: default; }
.exam-open-tag {
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  font-size: 0.7rem;
  font-weight: 600;
  vertical-align: 2px;
  color: var(--muted);
  border: 1px solid var(--border);
}

/* ---------- Dock (Leiste unter der Uhr): Liniensymbol über Beschriftung ---------- */
.dock {
  max-width: 1240px;
  margin: 0 auto clamp(14px, 2.5vw, 20px);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dock-btn {
  min-width: 66px;
  min-height: 58px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 8px 6px;
  border: 1px solid transparent;
  border-radius: var(--r-dock);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.25s, border-color 0.25s, color 0.25s;
}
.dock-btn:hover { background: var(--surface); color: var(--text); }
.dock-btn[aria-pressed="true"] { color: var(--dock-on-fg); background: var(--dock-on-bg); border-color: var(--dock-on-border); }
.dock-top { display: inline-flex; align-items: center; gap: 6px; }
.dock-badge {
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  white-space: nowrap;
}
.dock-badge[hidden] { display: none; }
/* Hervorhebung (z. B. überfällig, Klausur bald) ist eine Statusfarbe */
.dock-btn.is-highlight { border-color: color-mix(in srgb, var(--warn) 60%, transparent); }
.dock-btn.is-highlight .dock-badge { color: var(--warn); }

/* Liniensymbole */
.ln-ic { width: 22px; height: 22px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Kacheln mit Dock: Schließen-Button, Ein-/Ausblenden */
.card[hidden] { display: none; }
.card-close { margin-left: 2px; font-size: 1.3rem; }
.card.is-entering { animation: card-in 0.24s ease-out; }
.card.is-leaving { animation: card-out 0.2s ease-in forwards; }
/* translate/scale statt transform: transform hält die Position im Masonry */
@keyframes card-in { from { opacity: 0; translate: 0 6px; scale: 0.985; } }
@keyframes card-out { to { opacity: 0; translate: 0 6px; scale: 0.985; } }
@media (prefers-reduced-motion: reduce) {
  .card.is-entering, .card.is-leaving { animation: none; }
}


@media (max-width: 480px) {
  .dock { gap: 4px; }
  .dock-btn { min-width: 60px; padding-inline: 4px; }
}
.card-header { flex-wrap: wrap; }
.card-header .card-actions { flex-wrap: wrap; justify-content: flex-end; }

/* ---------- Widget: Notizen ---------- */
.note-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.note-tab {
  max-width: 14em;
  min-height: 32px;
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.note-tab:hover:not(:disabled) { color: var(--text); border-color: var(--muted); }
.note-tab.is-active { color: var(--text); font-weight: 600; border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.note-add { min-width: 32px; padding: 4px 10px; font-size: 1rem; line-height: 1; }
.note-add:disabled { opacity: 0.4; cursor: default; }
.note-text {
  display: block;
  width: 100%;
  min-height: 7.5em;
  max-height: min(60vh, 520px);
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 16px; /* ab 16 px zoomt Safari auf dem iPad/iPhone beim Antippen nicht hinein */
  line-height: 1.5;
  resize: none;
  overflow-y: auto;
}
.note-text:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.note-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin-top: 8px; }
.note-status { font-size: 0.78rem; }
.note-status.is-error { color: var(--danger); }
.note-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.note-rename { display: flex; gap: 6px; }
.note-rename input { width: 12em; }
.mensa-link { margin-top: 10px; }
.mensa-link[hidden] { display: none; }

/* ---------- Widget: Einkaufsliste ---------- */
.shop-add { display: flex; gap: 8px; scroll-margin: 80px 0 120px; }
.shop-input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 16px; /* kein Zoom beim Antippen auf iPhone/iPad */
}
.shop-add-btn {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: 1px solid var(--primary-border);
  border-radius: var(--r-md);
  background: var(--primary-bg);
  color: var(--primary-fg);
  font: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.shop-list { list-style: none; margin: 10px 0 0; padding: 0; }
.shop-item { display: flex; align-items: center; gap: 2px; border-radius: var(--r-md); transition: background 0.3s; }
.shop-item + .shop-item { border-top: 1px solid var(--border); }
.shop-item.is-flash { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.shop-toggle {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 4px;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
}
.shop-check { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--muted); }
.shop-name { overflow-wrap: break-word; hyphens: auto; min-width: 0; }
.shop-qty { font-size: 0.88rem; white-space: nowrap; }
.shop-item.is-done .shop-name { text-decoration: line-through; color: var(--muted); }
.shop-item.is-done .shop-check { border-color: var(--accent); background: var(--accent) radial-gradient(circle, var(--on) 0 3px, transparent 4px); }
.shop-icon-btn {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: 0;
  border-radius: var(--r-md);
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 1.05rem;
  cursor: pointer;
}
.shop-icon-btn:hover, .shop-icon-btn:focus-visible { color: var(--text); background: var(--surface-2); }
.shop-icon-btn[aria-pressed="true"] { color: var(--accent); }
.shop-empty { margin: 12px 0 0; }
.shop-empty[hidden], .shop-done[hidden], .shop-toast[hidden] { display: none; }
.shop-edit { display: grid; gap: 8px; padding: 10px 0; }
.shop-section-title { margin: 0; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.shop-frequent:not(:empty) { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
.shop-frequent-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.shop-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.shop-chip {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
  cursor: pointer;
}
.shop-chip-manage { display: inline-flex; align-items: center; gap: 2px; padding-left: 12px; border: 1px solid var(--border); border-radius: var(--r-pill); }
.shop-chip-manage.is-hidden .shop-chip-name { color: var(--muted); text-decoration: line-through; }
.shop-chip-name { font-size: 0.92rem; margin-right: 2px; }
.shop-hint { margin: 0; font-size: 0.85rem; }
.shop-done { margin-top: 14px; }
.shop-done summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--muted); }
.shop-clear { margin-top: 8px; }
.shop-toast {
  position: sticky;
  bottom: max(12px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding: 8px 8px 8px 14px;
  border-radius: var(--r-md);
  background: var(--text);
  color: var(--bg);
  font-size: 0.92rem;
}
.shop-toast .chip { min-height: 36px; background: var(--bg); color: var(--text); border-color: transparent; }
.shop-only-link { display: inline-block; margin-top: 14px; font-size: 0.82rem; }

/* Nur-Ansicht (?nur=einkauf) */
.only-view .top, .only-view .dock, .only-view .shop-only-link { display: none; }
.only-view .grid { grid-template-columns: minmax(0, 640px); justify-content: center; }
.only-back { display: block; max-width: 640px; margin: 16px auto 0; font-size: 0.85rem; color: var(--muted); }

/* Einstellungen: Spotify-Bereich */
.settings-spotify { display: grid; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.settings-spotify p { margin: 0; }
.settings-code { flex: 1; min-width: 0; padding: 7px 10px; border-radius: var(--r-sm); background: var(--surface-2); font-size: 0.8rem; overflow-wrap: anywhere; }
.settings-state.is-off::before { content: "● "; color: var(--muted); }

/* ---------- Widget: Musik (Spotify) ---------- */
.spotify-logo { display: inline-block; margin-bottom: 12px; line-height: 0; }
.spotify-logo img { width: 90px; height: auto; }
.spotify-logo-light { display: none; }
:root[data-theme="light"] .spotify-logo-light { display: inline; }
:root[data-theme="light"] .spotify-logo-dark { display: none; }

.music-notice { display: grid; gap: 8px; justify-items: start; margin-bottom: 12px; }
.music-notice[hidden] { display: none; }
.music-notice p { margin: 0; }
.music-big { min-height: 44px; padding: 0 18px; font-size: 0.95rem; }
.music-now { display: grid; gap: 12px; }
.music-now p { margin: 0; }
.music-track { display: flex; align-items: center; gap: 14px; min-width: 0; }
.music-cover { width: 72px; height: 72px; flex-shrink: 0; border-radius: 8px; object-fit: cover; } /* Cover unverändert, nur runde Ecken (Spotify-Richtlinie) */
.music-meta { display: grid; gap: 2px; min-width: 0; }
.music-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-artist { font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-open { margin-top: 2px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; color: var(--spotify); text-decoration: none; }
.music-open:hover { text-decoration: underline; }
.music-progress-row { display: flex; align-items: center; gap: 10px; }
.music-progress { flex: 1; min-width: 0; accent-color: var(--accent); height: 24px; }
.music-time { font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 2.6em; text-align: center; }
.music-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.music-btn {
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
}
.music-btn--main { width: 52px; height: 52px; background: var(--primary-bg); color: var(--primary-fg); border-color: var(--primary-border); font-size: 1.15rem; }
.music-btn:disabled { opacity: 0.35; cursor: default; }
.music-volume-wrap { display: flex; align-items: center; gap: 6px; margin-left: auto; min-height: 44px; }
.music-volume { width: 110px; accent-color: var(--accent); }
.music-status { margin: 10px 0 0; font-size: 0.8rem; min-height: 1em; }
.music-status.is-error { color: var(--danger); }
.music-browse { margin-top: 14px; }
.music-browse[hidden] { display: none; }

/* Musikauswahl */
.music-tabs { margin-bottom: 10px; }
.music-search { display: flex; gap: 6px; margin-bottom: 10px; }
.music-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.music-row {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px;
  border: 0;
  border-radius: var(--r-md);
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.music-row:hover, .music-row:focus-visible { background: var(--surface-2); }
.music-thumb { width: 40px; height: 40px; flex-shrink: 0; border-radius: 4px; object-fit: cover; } /* unverändert, runde Ecken laut Spotify */
.music-thumb--empty { display: grid; place-items: center; background: var(--surface-2); color: var(--muted); }
.music-row-text { display: grid; gap: 1px; min-width: 0; }
.music-row-name, .music-row-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-row-sub { font-size: 0.82rem; }
.music-results { display: grid; gap: 12px; }
.music-results .shop-section-title { margin-bottom: 4px; }
.music-pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 8px; font-size: 0.85rem; }

/* Musik: Mini-Modus (eine Zeile: Cover, Titel, ⏮ ⏯ ⏭) */
a.music-title { color: inherit; text-decoration: none; }
a.music-title:hover { text-decoration: underline; }
.card.is-mini { gap: 8px; }
.card.is-mini .spotify-logo { margin-bottom: 4px; }
.card.is-mini .spotify-logo img { width: 70px; } /* Mindestgröße laut Spotify */
.card.is-mini .music-browse,
.card.is-mini .music-progress-row,
.card.is-mini .music-volume-wrap,
.card.is-mini .music-open,
.card.is-mini .music-status:not(.is-error) { display: none; }
.card.is-mini .music-now { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.card.is-mini .music-track { gap: 10px; }
.card.is-mini .music-cover { width: 44px; height: 44px; border-radius: 4px; }
.card.is-mini .music-controls { gap: 4px; flex-wrap: nowrap; }
.card.is-mini .music-btn--main { width: 44px; height: 44px; }
.card.is-mini .music-now > p { grid-column: 1 / -1; }

/* ---------- Klingel-Overlay (Timer & Wecker) ---------- */
.ring-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 16px;
  background: var(--scrim);
  animation: card-in 0.24s ease-out;
}
.ring-overlay[hidden] { display: none; }
.ring-box {
  width: min(420px, 100%);
  display: grid;
  gap: 12px;
  justify-items: center;
  padding: 28px 24px;
  border-radius: var(--r-card);
  background: var(--surface-solid);
  color: var(--text);
  box-shadow: var(--shadow-pop);
  text-align: center;
}
.ring-icon { font-size: 3rem; animation: ring-wiggle 1s ease-in-out infinite; }
@keyframes ring-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
@media (prefers-reduced-motion: reduce) { .ring-icon { animation: none; } }
.ring-title { margin: 0; font-size: 1.5rem; }
.ring-text { margin: 0; color: var(--muted); }
.ring-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; margin-top: 6px; }
.ring-btn {
  flex: 1 1 140px;
  min-height: 56px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
}
.ring-btn--primary { background: var(--primary-bg); border-color: var(--primary-border); color: var(--primary-fg); }
.ring-more { margin: 0; font-size: 0.85rem; color: var(--muted); }

/* ---------- Timer (Lernzeit-Kachel) ---------- */
.timers[hidden], .sound-hint[hidden], .study-timer-main .select[hidden] { display: none; }
.timers { display: grid; gap: 14px; }
.timer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.timer-list:empty { display: none; }
.timer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.timer-info { display: grid; gap: 2px; min-width: 0; }
.timer-name { font-size: 0.85rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timer-tag { margin-left: 6px; }
.timer-time { font-size: 1.6rem; font-weight: 300; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.timer-row.is-paused .timer-time { color: var(--muted); }
.timer-row.is-done .timer-time { font-size: 1rem; color: var(--accent); }
.timer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.timer-form { display: grid; gap: 10px; }
.timer-hms { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.timer-hms label { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 0.85rem; }
.timer-hms input[type="number"] { width: 64px; min-height: 44px; text-align: center; }
.timer-hms input[type="text"] { flex: 1 1 160px; min-height: 44px; }
.timer-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.timer-study { font-size: 0.85rem; color: var(--muted); }
.sound-hint {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-bottom: 12px;
  padding: 8px 12px;
  border: 1px dashed var(--accent);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
}
@media (pointer: coarse) {
  .segment { min-height: 44px; }
}

/* ---------- Wecker (Lernzeit-Kachel) ---------- */
.alarms[hidden] { display: none; }
.alarms { display: grid; gap: 12px; justify-items: start; }
.alarms > .timer-list, .alarm-form, .alarm-missed { width: 100%; }
.alarm-note { margin: 0; }
.alarm-row { justify-content: flex-start; }
.alarm-row .timer-info { flex: 1 1 140px; }
.alarm-row .timer-name { white-space: normal; }
.alarm-row.is-off .alarm-time { color: var(--muted); }
.alarm-time { font-size: 1.6rem; font-weight: 300; font-variant-numeric: tabular-nums; }
.alarm-switch { display: grid; place-items: center; min-width: 44px; min-height: 44px; cursor: pointer; }
.alarm-toggle { width: 22px; height: 22px; accent-color: var(--accent); }
.alarm-scope { font-size: 0.95rem; }
.alarm-form { display: grid; gap: 10px; padding: 12px; border-radius: var(--r-md); background: var(--surface-2); }
.alarm-form input[type="time"] { min-height: 44px; }
.alarm-days { display: flex; flex-wrap: wrap; gap: 6px; }
.alarm-day {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.alarm-day[aria-pressed="true"] { background: var(--primary-bg); border-color: var(--primary-border); color: var(--primary-fg); }
.alarm-missed {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  font-size: 0.9rem;
}

/* ---------- Stumm ---------- */
.mute-btn.is-muted { background: var(--primary-bg); border-color: var(--primary-border); color: var(--primary-fg); }
.mute-hint[hidden] { display: none; }
.mute-hint { margin: 0 0 12px; padding: 8px 12px; border-radius: var(--r-md); background: var(--surface-2); font-size: 0.9rem; }

/* ---------- Aufgaben (To-do) ---------- */
.todo-date {
  flex: 0 0 auto;
  width: auto;
  max-width: 150px;
  min-height: 44px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 16px; /* kein Zoom beim Antippen auf iPhone/iPad */
}
.todo-add { flex-wrap: wrap; }
.todo-add .shop-input { flex: 1 1 180px; }
.todo-text { display: grid; gap: 1px; min-width: 0; }
.todo-meta { font-size: 0.8rem; color: var(--muted); }
.todo-item.is-due .todo-meta { color: var(--text); font-weight: 500; }
.todo-item.is-overdue .todo-meta { color: var(--danger); font-weight: 500; }
.todo-item.is-overdue { background: color-mix(in srgb, var(--danger) 8%, transparent); }
.todo-due-label { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; }
.todo-handle {
  flex-shrink: 0;
  width: 44px;
  min-height: 44px;
  margin: 0 -10px 0 -8px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 1.1rem;
  cursor: grab;
  touch-action: none; /* Ziehen statt Scrollen auf dem iPad */
  user-select: none;
  -webkit-user-select: none;
}
.todo-handle:focus-visible { color: var(--text); }
.todo-item.is-dragging {
  position: relative;
  z-index: 2;
  background: var(--surface-2);
  box-shadow: var(--shadow-lift);
  border-radius: var(--r-md);
}
.todo-item.is-dragging .todo-handle { cursor: grabbing; }
.todo-today[hidden], .todo-leftover[hidden], .todo-hint[hidden] { display: none; }
.todo-today {
  margin-top: 12px;
  padding: 10px 12px 4px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-2));
}
.todo-today .shop-list { margin-top: 4px; }
.todo-hint { margin: 6px 0 0; }
.todo-sun[aria-pressed="true"] { color: var(--accent); }
.todo-leftover {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  border: 1px dashed var(--accent);
  font-size: 0.92rem;
}
.todo-leftover p { margin: 0; }
.todo-check-btn {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 44px;
  min-height: 44px;
  border: 0;
  background: none;
  cursor: pointer;
}
.todo-check-btn[aria-pressed="true"] .shop-check { border-color: var(--accent); background: var(--accent) radial-gradient(circle, var(--on) 0 3px, transparent 4px); }
.todo-item .shop-toggle.todo-text { display: grid; gap: 1px; align-content: center; padding-left: 0; }
.todo-item.is-done .shop-check { border-color: var(--accent); }
.todo-item .shop-name { overflow-wrap: break-word; hyphens: auto; }

/* ---------- Stil-Menü (Palettensymbol) ---------- */
.theme-panel { width: min(360px, calc(100vw - 32px)); }
.theme-styles { display: grid; gap: 6px; margin: 10px 0 16px; }
.theme-style {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.theme-style:hover { border-color: var(--muted); }
.theme-style[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.theme-swatch { display: inline-flex; flex-shrink: 0; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--border); }
.theme-swatch span { width: 14px; height: 28px; }
.theme-style-text { display: grid; gap: 1px; min-width: 0; }
.theme-style-name { font-weight: 600; }
.theme-subtitle { margin-top: 4px; }
.theme-modes { margin: 10px 0 8px; }
.theme-hint { margin: 0; }

/* ---------- Fokus-Ring (Lernzeit, freier Timer und Countdown) ---------- */
.focus-dial { position: relative; width: 208px; height: 208px; margin: 4px auto 8px; }
.focus-dial[hidden] { display: none; }
.focus-ring { width: 100%; height: 100%; }
.focus-ring circle { fill: none; stroke-width: 5; }
.focus-ring-track { stroke: var(--border); }
.focus-ring-bar { stroke: var(--ring); stroke-linecap: round; transition: stroke-dashoffset 0.9s linear; }
.focus-dial-text { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4px; text-align: center; }
.focus-time { font-family: var(--font-display); font-size: 44px; font-weight: 200; line-height: 1; font-variant-numeric: tabular-nums; }
.focus-label { max-width: 150px; font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Ring nur im Fokus; außerhalb zeigen Timer und Uhrzeit wie gewohnt */
:root:not([data-mode="fokus"]) .focus-dial { display: none; }
:root[data-mode="fokus"] .card[data-widget="study"] .study-timer-main .study-time { display: none; }
:root[data-mode="fokus"] .card[data-widget="study"] .pomo-dial { width: 208px; height: 208px; }
:root[data-mode="fokus"] .card[data-widget="study"] .pomo-time { font-size: 44px; font-weight: 200; }
:root[data-mode="fokus"] .card[data-widget="study"] .pomo-main { justify-content: center; }

/* ---------- Inhalt je Kachelgröße: S = Kennzahl + Hauptaktion, M = Details, L = Verlauf ---------- */
/* Lernzeit */
.card[data-widget="study"][data-size="s"] .study-weekbar,
.card[data-widget="study"][data-size="s"] .study-chart,
.card[data-widget="study"][data-size="s"] .study-legend,
.card[data-widget="study"][data-size="s"] .study-details,
.card[data-widget="study"][data-size="s"] .pomo-settings,
.card[data-widget="study"][data-size="s"] .pomo-round,
.card[data-widget="study"][data-size="m"] .study-weekbar,
.card[data-widget="study"][data-size="m"] .study-chart,
.card[data-widget="study"][data-size="m"] .study-legend,
.card[data-widget="study"][data-size="m"] .study-details { display: none; }
.card[data-widget="study"][data-size="s"] .segmented { display: flex; width: 100%; overflow-x: auto; }
.card[data-widget="study"][data-size="s"] .segment { flex: 1 0 auto; padding-inline: 8px; }
.card[data-widget="study"][data-size="s"] .pomo-dial { width: 110px; height: 110px; }
.card[data-widget="study"][data-size="s"] .pomo-time { font-size: 1.5rem; }
.card[data-widget="study"][data-size="s"] .study-time { font-size: 2rem; }
/* Aufgaben */
.card[data-widget="todos"][data-size="s"] .shop-done,
.card[data-widget="todos"][data-size="s"] .todo-hint,
.card[data-widget="todos"]:not([data-size="l"]) .todo-item.is-done { display: none; }
.card[data-widget="todos"][data-size="s"] .todo-date { max-width: none; flex: 1 1 100%; }
.card[data-widget="todos"][data-size="s"] .todo-handle,
.card[data-widget="todos"][data-size="s"] .todo-sun { display: none; }
/* Klausuren */
.card[data-widget="exams"][data-size="s"] .exam:not(.is-next),
.card[data-widget="exams"][data-size="s"] .exam-setting,
.card[data-widget="exams"][data-size="s"] .exam-note,
.card[data-widget="exams"]:not([data-size="l"]) .exam-past { display: none; }
/* Gewohnheiten */
.card[data-widget="habits"][data-size="s"] .habit-week,
.card[data-widget="habits"][data-size="s"] .habit-weekbar { display: none; }
/* Mensa */
.card[data-widget="mensa"][data-size="s"] .meal:nth-child(n + 3),
.card[data-widget="mensa"]:not([data-size="l"]) .meal-sides { display: none; }
.card[data-widget="mensa"][data-size="l"] .meals { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); column-gap: 18px; }
.card[data-widget="mensa"][data-size="l"] .meal + .meal { border-top: 0; }
/* Einkauf */
.card[data-widget="shopping"][data-size="s"] .shop-frequent,
.card[data-widget="shopping"][data-size="s"] .shop-only-link,
.card[data-widget="shopping"]:not([data-size="l"]) .shop-done { display: none; }
/* Notizen */
.card[data-widget="notes"][data-size="l"] .note-text { min-height: 18em; }
/* Musik: S wie Mini-Modus */
.card[data-widget="music"][data-size="s"] .music-volume-wrap { display: none; }
/* Auswahl in jeder Größe; in S/M mit begrenzter Höhe und eigenem Scrollen */
.card[data-widget="music"]:not([data-size="l"]) .music-list-wrap { max-height: 320px; overflow-y: auto; overscroll-behavior: contain; }

/* ---------- Widget: Licht (Apple-Kurzbefehle) ---------- */
.light-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.light-btn {
  min-height: 48px;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.light-btn:hover { border-color: var(--muted); }
.light-btn .ln-ic { width: 20px; height: 20px; }
.light-label-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Rückmeldung nach dem Klick: Akzent und Haken, 1,5 s */
.light-btn.is-sent { background: var(--primary-bg); border-color: var(--primary-border); color: var(--primary-fg); }
.light-note { margin: 10px 0 0; }
.light-gear .ln-ic { width: 18px; height: 18px; }
.light-manage { margin-bottom: 4px; }
.light-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.light-row { display: grid; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.light-row-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.light-field { display: grid; gap: 2px; min-width: 0; }
.light-field input { background: var(--surface-solid); }
.light-icons { display: flex; flex-wrap: wrap; gap: 4px; }
.light-icon-pick { border-color: transparent; background: none; }
.light-icon-pick[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.light-icon-pick .ln-ic { width: 18px; height: 18px; }
.light-key { width: auto; flex: 0 1 150px; }
.light-test { display: grid; gap: 6px; justify-items: start; }
.light-link { width: 100%; font-family: ui-monospace, Menlo, monospace; font-size: 0.85rem; background: var(--surface-solid); }
@media (pointer: coarse) { .light-icon-pick { width: 40px; height: 40px; } }
/* Größen: S = die ersten zwei, M = bis zu vier in einer Reihe, L = alle als Raster mit Symbol über Label */
.card[data-widget="licht"][data-size="s"] .light-btn:nth-child(n + 3),
.card[data-widget="licht"][data-size="m"] .light-btn:nth-child(n + 5) { display: none; }
.card[data-widget="licht"][data-size="m"] .light-buttons { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card[data-widget="licht"][data-size="l"] .light-buttons { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.card[data-widget="licht"][data-size="l"] .light-btn { flex-direction: column; min-height: 88px; }
.card[data-widget="licht"][data-size="l"] .light-btn .ln-ic { width: 26px; height: 26px; }
@media (max-width: 559px) {
  .card[data-widget="licht"][data-size="m"] .light-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Touch: Ziele mindestens 40 px (bestehende 44 px bleiben) ---------- */
@media (pointer: coarse) {
  .icon-btn--sm { width: 40px; height: 40px; }
  .chip { min-height: 40px; }
  .icon-btn--xs { width: 40px; height: 40px; }
}

/* ---------- Weniger Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .glow-layer b, .hud-spin, .popover, .ring-overlay { animation: none; }
  .glow-layer, .card, .hero-time { transition: none; }
}