/* Zentrale · Milchiges Glas über einem Foto.
   Hintergrund und Karten sind Glas. Dahinter liegt das Foto (Variable --foto, Datei public/hintergrund/new-york.jpg).
   Glas = Unschärfe, Milchschleier, Lichtkante und ein Glanz, der dem Mauszeiger folgt.
   Das ist eine Annäherung, keine echte Lichtbrechung. Dunkel ist der Standard, Hell die zweite Variante.
   Systemschrift, keine Apple-Assets. Fehlt das Foto, bleibt ein Farbverlauf. */

:root,
html[data-theme="dunkel"] {
  --bg: #08080b;
  --foto: url("/hintergrund/new-york.jpg");
  --korn: url("/textur/korn.svg");
  --licht-1: rgba(10, 132, 255, 0.3);
  --licht-2: rgba(191, 90, 242, 0.2);
  --licht-3: rgba(255, 159, 10, 0.12);
  --pane: rgba(58, 62, 78, 0.5);
  --pane-unschaerfe: 18px;
  --unschaerfe: blur(22px) saturate(150%) brightness(1.04);
  --glas: rgba(24, 24, 34, 0.32);
  --milch: rgba(255, 255, 255, 0.03);
  --glas-glanz: rgba(255, 255, 255, 0.08);
  --glas-rand: rgba(255, 255, 255, 0.4);
  --glas-hintergrund:
    radial-gradient(150% 110% at var(--mx, 0%) var(--my, 0%), rgba(255, 255, 255, 0.16), transparent 55%),
    linear-gradient(168deg, var(--glas-glanz), var(--milch) 40%, transparent 100%),
    var(--glas);
  --flaeche: #1d1d26;
  --flaeche-2: rgba(255, 255, 255, 0.06);
  --flaeche-3: rgba(255, 255, 255, 0.14);
  --daumen: rgba(255, 255, 255, 0.2);
  --linie: rgba(255, 255, 255, 0.12);
  --linie-2: rgba(255, 255, 255, 0.2);
  --text: #f7f7f9;
  --text-2: #e4e4ec;
  --text-3: #c2c2ce;
  --akzent: #6cb4ff;
  --akzent-stark: #0a6fe0;
  --akzent-weich: rgba(61, 155, 255, 0.24);
  --gut: #30d158;
  --warn: #ffbd5c;
  --dringend: #ff9a9a;
  --c0: #3d9bff;
  --c1: #ffbd5c;
  --c2: #30d158;
  --c3: #ff4f6f;
  --c4: #c77dff;
  --c5: #aeaebb;
  --schatten-klein: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 4px 14px rgba(0, 0, 0, 0.22);
  --schatten:
    0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 -1px 0 rgba(0, 0, 0, 0.12) inset, 0 2px 6px rgba(0, 0, 0, 0.22),
    0 12px 24px -12px rgba(0, 0, 0, 0.5);
  --kurve: cubic-bezier(0.32, 0.72, 0, 1);
  --kurve-weich: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: dark;
}

html[data-theme="hell"] {
  --bg: #e8ebf3;
  --licht-1: rgba(10, 132, 255, 0.2);
  --licht-2: rgba(255, 159, 10, 0.16);
  --licht-3: rgba(255, 45, 85, 0.1);
  --pane: rgba(246, 248, 252, 0.62);
  --pane-unschaerfe: 18px;
  --glas: rgba(255, 255, 255, 0.12);
  --milch: rgba(255, 255, 255, 0.03);
  --glas-glanz: rgba(255, 255, 255, 0.1);
  --glas-rand: rgba(255, 255, 255, 0.9);
  --flaeche: #f7f8fb;
  --flaeche-2: rgba(20, 20, 40, 0.035);
  --flaeche-3: rgba(20, 20, 40, 0.085);
  --daumen: #ffffff;
  --linie: rgba(20, 20, 40, 0.08);
  --linie-2: rgba(20, 20, 40, 0.14);
  --text: #1c1c1e;
  --text-2: #3f3f4a;
  --text-3: #5a5a66;
  --akzent: #0063d1;
  --akzent-stark: #0066d6;
  --akzent-weich: rgba(0, 99, 209, 0.14);
  --gut: #14815a;
  --warn: #9a5200;
  --dringend: #b42318;
  --c0: #0063d1;
  --c1: #9a5200;
  --c2: #137a52;
  --c3: #c2215a;
  --c4: #5b4bc4;
  --c5: #5a5a66;
  --schatten-klein: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 4px 12px rgba(20, 20, 40, 0.08);
  --schatten:
    0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 2px 6px rgba(20, 20, 40, 0.06),
    0 10px 22px -12px rgba(20, 20, 40, 0.16);
  color-scheme: light;
}

/* Akzentfarben. Ohne Wahl: dunkel Apple-Blau, hell Blau. Knopftexte mindestens 4,5 : 1. */
html[data-akzent="blau"] { --akzent: #3d9bff; --akzent-stark: #0a6fe0; --akzent-weich: rgba(61, 155, 255, 0.24); }
html[data-akzent="blau"][data-theme="hell"] { --akzent: #0063d1; --akzent-stark: #0066d6; --akzent-weich: rgba(0, 99, 209, 0.14); }
html[data-akzent="koralle"] { --akzent: #ff8a6b; --akzent-stark: #b8431f; --akzent-weich: rgba(255, 138, 107, 0.24); }
html[data-akzent="koralle"][data-theme="hell"] { --akzent: #b8431f; --akzent-stark: #a53a1b; --akzent-weich: rgba(184, 67, 31, 0.12); }
html[data-akzent="gruen"] { --akzent: #30d158; --akzent-stark: #137a31; --akzent-weich: rgba(48, 209, 88, 0.2); }
html[data-akzent="gruen"][data-theme="hell"] { --akzent: #148a3b; --akzent-stark: #137a31; --akzent-weich: rgba(20, 138, 59, 0.12); }
html[data-akzent="pink"] { --akzent: #ff4f6f; --akzent-stark: #d1245a; --akzent-weich: rgba(255, 79, 111, 0.24); }
html[data-akzent="pink"][data-theme="hell"] { --akzent: #c2215a; --akzent-stark: #b01c4f; --akzent-weich: rgba(194, 33, 90, 0.12); }

/* Grundlage */
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: -0.012em;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
/* Ganz hinten: das Foto. Fehlt es, bleiben die Lichtflecke als Verlauf. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-color: var(--bg);
  background-image:
    var(--foto),
    radial-gradient(60vw 50vw at 8% 4%, var(--licht-1), transparent 70%),
    radial-gradient(54vw 44vw at 96% 14%, var(--licht-2), transparent 70%),
    radial-gradient(60vw 48vw at 60% 110%, var(--licht-3), transparent 72%);
  background-size: cover, auto, auto, auto;
  background-position: center center, 0 0, 0 0, 0 0;
  background-repeat: no-repeat;
}
html[data-theme="hell"] body::before { filter: brightness(1.12) saturate(0.85); }
/* Davor: die Hintergrund-Glasfläche. Sie macht das Foto milchig und weich. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--pane);
  -webkit-backdrop-filter: blur(var(--pane-unschaerfe)) saturate(140%);
  backdrop-filter: blur(var(--pane-unschaerfe)) saturate(140%);
}
h1, h2, h3, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--akzent-weich); }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; border-radius: 10px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-variant-numeric: tabular-nums; }

/* Schale: schwebende Seitenleiste ab 960 px, sonst schwebendes Dock unten */
.schale { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.rail { display: none; }
.haupt { min-width: 0; padding: 18px 16px 124px; }
/* Blöcke auf einer Seite stehen immer mit gleichem Abstand, auch wenn sie nicht in einem Raster liegen. */
main > * + * { margin-top: 16px; }
.tabbar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 2px;
  padding: 6px;
  border-radius: 30px;
  border: 1px solid var(--glas-rand);
  background: var(--glas-hintergrund);
  -webkit-backdrop-filter: var(--unschaerfe);
  backdrop-filter: var(--unschaerfe);
  box-shadow: var(--schatten);
}
@media (min-width: 960px) {
  .schale { grid-template-columns: 112px minmax(0, 1fr); }
  .rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: sticky;
    top: 16px;
    height: calc(100vh - 32px);
    margin: 16px 0 16px 16px;
    padding: 22px 0;
    border-radius: 32px;
    border: 1px solid var(--glas-rand);
    background: var(--glas-hintergrund);
    -webkit-backdrop-filter: var(--unschaerfe);
    backdrop-filter: var(--unschaerfe);
    box-shadow: var(--schatten);
  }
  .haupt { padding: 34px 40px 64px; }
  .tabbar { display: none; }
}
.rail-punkt { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--akzent); box-shadow: 0 0 0 4px var(--akzent-weich); }
.rail .rail-punkt { margin-bottom: 16px; }

/* Markierer: gleitet unter den aktiven Eintrag (Seitenleiste, Dock, Segmente). Position setzt das Skript. */
.daumen {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-radius: 20px;
  background: var(--flaeche-3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 4px 14px rgba(0, 0, 0, 0.16);
  pointer-events: none;
  z-index: 0;
}
.segment .daumen {
  border-radius: 999px;
  background: var(--daumen);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 3px 10px rgba(0, 0, 0, 0.2);
}
html[data-theme="hell"] .daumen { box-shadow: 0 1px 2px rgba(20, 20, 40, 0.08), 0 4px 14px rgba(20, 20, 40, 0.1); }
.nav-knopf,
.segment button { position: relative; z-index: 1; }

.nav-knopf {
  appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--text-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 56px;
  padding: 6px 2px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: color 320ms var(--kurve), transform 240ms var(--kurve);
}
.nav-knopf span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail .nav-knopf { width: 76px; font-size: 12px; }
.nav-knopf:active { transform: scale(0.94); }
.nav-knopf svg { width: 22px; height: 22px; display: block; }
.nav-knopf[aria-current="page"] { color: var(--akzent); }

/* Kopf */
.kopf { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.kicker { color: var(--text-2); font-size: 13px; font-weight: 500; margin-bottom: 6px; }
.gruss { font-size: 34px; font-weight: 650; letter-spacing: -0.035em; line-height: 1.08; }
.kopf-aktionen { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 600;
  color: var(--akzent);
  background: var(--glas-hintergrund);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), var(--schatten-klein);
}

/* Seitenkopf: Titel, daneben die Aktion der Seite */
.seitenkopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; margin: 2px 0 18px; }
.seiten-titel { font-size: 26px; font-weight: 650; letter-spacing: -0.03em; line-height: 1.1; }

/* Segmentsteuerung */
.segment {
  position: relative;
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--flaeche-2);
  border: 1px solid var(--linie-2);
}
.segment button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  min-height: 32px;
  padding: 4px 15px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  transition: color 320ms var(--kurve);
}
.segment button[aria-pressed="true"] { color: var(--text); }

/* Knöpfe */
.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: none;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 240ms var(--kurve), background-color 300ms var(--kurve), box-shadow 300ms var(--kurve), opacity 300ms var(--kurve);
}
.btn:active { transform: scale(0.97); }
.btn-primary {
  color: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 55%), var(--akzent-stark);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 10px 22px -8px var(--akzent-weich), 0 2px 4px rgba(0, 0, 0, 0.18);
}
.btn-ghost {
  color: var(--text);
  background: var(--glas);
  border-color: var(--glas-rand);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), var(--schatten-klein);
}
.btn-leise { background: transparent; color: var(--text-2); border-color: var(--linie); }
.btn-gefahr {
  color: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 55%), #c4162a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 8px 18px -8px rgba(196, 22, 42, 0.5);
}
.btn-klein { min-height: 34px; padding: 5px 13px; font-size: 13px; }
.btn-icon { width: 40px; padding: 0; }
.btn-icon svg { width: 20px; height: 20px; display: block; }
.btn-breit { width: 100%; }
.btn:disabled { opacity: 0.55; cursor: default; }
a.btn { text-decoration: none; }

/* Karten: milchiges Glas. Die Fläche liefert --glas-hintergrund, der Glanz folgt dem Mauszeiger (--mx, --my). */
.card {
  position: relative;
  isolation: isolate;
  min-width: 0;
  padding: 22px 22px 24px;
  border-radius: 30px;
  background: var(--glas-hintergrund);
  -webkit-backdrop-filter: var(--unschaerfe);
  backdrop-filter: var(--unschaerfe);
  box-shadow: var(--schatten);
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(140deg, var(--glas-rand) 0%, rgba(255, 255, 255, 0.05) 36%, rgba(255, 255, 255, 0.03) 64%, var(--glas-rand) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* Mattierte Oberfläche: feines Korn, damit es nach Glas aussieht und nicht nach Folie */
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: var(--korn) 0 0 / 180px 180px;
  opacity: 0.5;
  mix-blend-mode: soft-light;
}
/* Karte als Knopf (Kennzahlen, die zu einer Ansicht führen) */
button.card { width: 100%; border: 0; text-align: left; color: inherit; font: inherit; cursor: pointer; }
@media (hover: hover) {
  button.card { transition: transform 320ms var(--kurve), box-shadow 320ms var(--kurve); }
  button.card:hover { transform: translateY(-2px); box-shadow: var(--schatten), 0 0 0 1px var(--linie-2); }
}
.punkte-held { background: linear-gradient(180deg, var(--akzent-weich), rgba(255, 255, 255, 0) 70%), var(--glas-hintergrund); }

/* Glas aus oder Transparenz reduziert: feste Flächen. Der Fokusblock bleibt dunkel. */
html[data-glas="aus"] .card:not(.fokus-kachel),
html[data-glas="aus"] .spalte,
html[data-glas="aus"] .rail,
html[data-glas="aus"] .tabbar,
html[data-glas="aus"] .btn-ghost,
html[data-glas="aus"] .fokus-pille,
html[data-transparenz="weniger"] .card:not(.fokus-kachel),
html[data-transparenz="weniger"] .spalte,
html[data-transparenz="weniger"] .rail,
html[data-transparenz="weniger"] .tabbar,
html[data-transparenz="weniger"] .btn-ghost,
html[data-transparenz="weniger"] .fokus-pille {
  background: var(--flaeche);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
@media (prefers-reduced-transparency: reduce) {
  .card:not(.fokus-kachel), .spalte, .rail, .tabbar, .btn-ghost, .fokus-pille {
    background: var(--flaeche);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Heute: Bento-Raster. Große Kacheln (bk-4, bk-2), kleine Kennzahlen (bk-s). Auf dem Handy zwei Spalten. */
.bento { display: grid; gap: 16px; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 16px; }
.bento > .bk-4 { grid-column: span 4; }
.bento > .bk-2,
.bento > .bk-s { grid-column: span 2; }
@media (max-width: 959px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento > .bk-4,
  .bento > .bk-2 { grid-column: span 2; }
  .bento > .bk-s { grid-column: span 1; }
  .bento > .bk-s.bk-e { grid-column: span 2; }
}
.kpi-reihe { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 16px; }
.grid-b { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); margin-bottom: 16px; }
@media (min-width: 960px) {
  .grid-b { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 959px) {
  .kpi-reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-reihe > :last-child:nth-child(odd) { grid-column: span 2; }
}

/* Fokusblock: dunkle Kachel, egal welcher Farbmodus. Milchig, aber dunkel, damit sie als Mittelpunkt wirkt. */
.fokus-kachel {
  --text: #f7f7f9;
  --text-2: rgba(247, 247, 249, 0.74);
  --text-3: rgba(247, 247, 249, 0.6);
  --flaeche-2: rgba(255, 255, 255, 0.07);
  --flaeche-3: rgba(255, 255, 255, 0.16);
  --glas: rgba(30, 30, 40, 0.5);
  --glas-glanz: rgba(255, 255, 255, 0.12);
  --glas-rand: rgba(255, 255, 255, 0.2);
  --linie: rgba(255, 255, 255, 0.12);
  --linie-2: rgba(255, 255, 255, 0.2);
  --schatten-klein: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 6px 14px rgba(0, 0, 0, 0.3);
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.14);
  background:
    radial-gradient(120% 90% at var(--mx, 0%) var(--my, 0%), rgba(255, 255, 255, 0.16), transparent 55%),
    radial-gradient(90% 70% at 0% 0%, rgba(10, 132, 255, 0.3), transparent 62%),
    radial-gradient(70% 60% at 100% 100%, rgba(191, 90, 242, 0.2), transparent 66%),
    linear-gradient(170deg, rgba(64, 64, 80, 0.6) 0%, rgba(16, 16, 24, 0.56) 100%);
}
.fokus-kachel .timer { font-size: clamp(56px, 6vw, 80px); color: var(--text); }
.timer-unterzeile { color: var(--text-3); font-size: 13px; margin-top: -4px; }
.fokus-zusatz { margin-top: 8px; }

/* Karteninhalt */
.karten-kopf { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 12px; margin-bottom: 14px; }
.karten-titel { font-size: 24px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.15; margin: 4px 0 6px; overflow-wrap: anywhere; }
.karten-titel-klein { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.karten-text { color: var(--text-2); font-size: 14px; margin-top: 6px; }
.karten-hinweis { display: block; color: var(--text-3); font-size: 12px; margin-top: 4px; line-height: 1.4; }
.karten-meta { margin-top: 16px; }
.karten-aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.timer { font-size: 60px; font-weight: 600; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; margin: 8px 0 2px; }
.leer { color: var(--text-2); padding: 12px 0; }
.leer-platz { min-height: 56px; border: 1px dashed var(--linie-2); border-radius: 18px; }
.gruppe { font-size: 14px; font-weight: 600; color: var(--text-2); margin: 18px 0 8px; }

/* Chips */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--flaeche-3);
  border: 1px solid var(--linie);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.chip-person { color: var(--text); background: var(--flaeche-2); }
.chip-akzent { background: var(--akzent-stark); color: #fff; border-color: transparent; }
.chip-tag { background: var(--akzent-weich); color: var(--text); border-color: transparent; }
.chip-warn { background: rgba(255, 181, 71, 0.18); color: var(--warn); border-color: transparent; }
.chip-dringend { background: rgba(255, 122, 122, 0.18); color: var(--dringend); border-color: transparent; }
.chip-gut { background: rgba(48, 209, 88, 0.18); color: var(--gut); border-color: transparent; }

/* Zeilen im Glas */
.zeilen { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
/* Listenzeilen als Trennlinien statt Kasten im Kasten */
.zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 13px 0;
  border-top: 1px solid var(--linie);
}
.zeilen .zeile:first-child { border-top: 0; }
.zeile-haupt { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.zeile-titel { font-weight: 600; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.zeile-grund { color: var(--text-2); font-size: 13px; }
.zeile-grund.warn { color: var(--dringend); }
.zeile-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.zeile-aktion { flex: none; margin-left: auto; }
.liste-schlicht { margin: 0; padding-left: 18px; color: var(--text-2); display: grid; gap: 6px; }

/* Zahlen, Ringe, Punkte */
.kpi { display: flex; flex-direction: column; gap: 4px; }
.kpi-ring { flex-direction: row; align-items: center; gap: 16px; }
.ring-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.zahl { font-size: 36px; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.zahl-warn { color: var(--warn); }
.zahl-dringend { color: var(--dringend); }
.label { font-size: 14px; color: var(--text); }
.klein { font-size: 13px; color: var(--text-2); }
.ring { width: 88px; height: 88px; flex: none; filter: drop-shadow(0 6px 14px var(--akzent-weich)); }
.ring-spur { fill: none; stroke: var(--flaeche-3); stroke-width: 7; }
.ring-wert {
  fill: none;
  stroke: var(--akzent);
  stroke-width: 7;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-box: view-box;
  transform-origin: 42px 42px;
  transition: stroke-dashoffset 1000ms var(--kurve);
}
.punkte-zeile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 8px 0 12px; }
.punkte-person { display: grid; gap: 2px; min-width: 0; }
.punkte-zahl { font-size: 44px; font-weight: 600; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.fortschritt-spur { height: 8px; border-radius: 999px; background: var(--flaeche-3); overflow: hidden; margin-top: 8px; }
.fortschritt-wert {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--akzent-stark), var(--akzent));
  transition: width 700ms var(--kurve);
}

/* Balkendiagramme */
.balken-reihe { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.balken-viele { grid-template-columns: repeat(auto-fit, minmax(14px, 1fr)); gap: 4px; overflow-x: auto; }
.balken-spalte { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.balken-schiene { position: relative; display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 132px; }
.balken-schiene::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--linie-2); }
.balken-viele .balken-schiene { height: 112px; }
.balken {
  width: 100%;
  max-width: 36px;
  min-height: 6px;
  height: 0;
  border-radius: 12px 12px 8px 8px;
  background: linear-gradient(180deg, var(--flaeche-3), var(--linie-2));
  transition: height 520ms var(--kurve);
}
.balken-heute { background: linear-gradient(180deg, var(--akzent), var(--akzent-stark)); box-shadow: 0 8px 18px -8px var(--akzent-weich); }
.balken[data-h="0"] { background: var(--linie-2); }
.balken-wert { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.balken-label { font-size: 12px; color: var(--text-3); }
.hbalken { display: grid; grid-template-columns: 90px minmax(0, 1fr) 40px; gap: 12px; align-items: center; margin: 12px 0; }
.hbalken-name { font-size: 13px; color: var(--text); }
.hbalken-spur { height: 10px; border-radius: 999px; background: var(--flaeche-3); overflow: hidden; }
.hbalken-wert {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--akzent-stark), var(--akzent));
  transition: width 600ms var(--kurve);
}
.hbalken-zahl { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-2); font-size: 13px; }

/* Fokus: Linie, die mit der Restzeit abläuft */
.fokus-boden { height: 6px; border-radius: 999px; background: var(--flaeche-3); overflow: hidden; margin: 6px 0 4px; }
.fokus-boden-wert {
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--akzent-stark), var(--akzent));
  transform-origin: 0 50%;
}

/* Ringdiagramm (Verteilung) */
.donut-zeile { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; align-items: center; }
.donut { width: 150px; height: 150px; transform: rotate(-90deg); filter: drop-shadow(0 8px 18px var(--akzent-weich)); }
.donut-spur { fill: none; stroke: var(--flaeche-3); stroke-width: 14; }
.donut-seg { fill: none; stroke-width: 14; }
.legende { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13px; color: var(--text-2); }
.legende li { display: flex; align-items: center; gap: 8px; }
.legende-punkt { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.seg-0 { stroke: var(--c0); background: var(--c0); }
.seg-1 { stroke: var(--c1); background: var(--c1); }
.seg-2 { stroke: var(--c2); background: var(--c2); }
.seg-3 { stroke: var(--c3); background: var(--c3); }
.seg-4 { stroke: var(--c4); background: var(--c4); }
.seg-5 { stroke: var(--c5); background: var(--c5); }

/* Boards: Spalten als Glasflächen. Drop-Ziele leuchten beim Ziehen auf. */
.board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(270px, 1fr);
  gap: 16px;
  margin-top: 16px;
  overflow-x: auto;
  scrollbar-width: none;
  /* Polster für die Schatten der Spalten, sonst schneidet der Scrollbereich sie als Bänder ab. */
  padding: 10px 4px 24px;
  scroll-snap-type: x proximity;
}
.board::-webkit-scrollbar { display: none; }
.spalte {
  position: relative;
  isolation: isolate;
  min-width: 0;
  padding: 14px;
  border-radius: 26px;
  border: 1px solid var(--linie);
  background: var(--glas-hintergrund);
  -webkit-backdrop-filter: var(--unschaerfe);
  backdrop-filter: var(--unschaerfe);
  box-shadow: var(--schatten);
  scroll-snap-align: start;
  transition: background-color 240ms var(--kurve), outline-color 240ms var(--kurve);
}
.spalte.ziel-aktiv {
  outline: 2px dashed var(--akzent);
  outline-offset: -6px;
  background: linear-gradient(180deg, var(--akzent-weich), rgba(255, 255, 255, 0) 60%), var(--glas-hintergrund);
}
.spalte-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px 14px; }
.spalte-titel { font-weight: 600; letter-spacing: -0.01em; }
.stapel { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.aufgabe {
  display: grid;
  gap: 10px;
  padding: 14px;
  min-width: 0;
  border-radius: 20px;
  background: var(--flaeche-2);
  border: 1px solid var(--linie);
  box-shadow: var(--schatten-klein);
}
[draggable="true"] { cursor: grab; }
[draggable="true"]:active { cursor: grabbing; }
.aufgabe.zieht { opacity: 0.5; }
.aufgabe.markiert { animation: markiert 1800ms var(--kurve) 1; }
@keyframes markiert {
  0% { box-shadow: 0 0 0 0 var(--akzent-weich); }
  25% { box-shadow: 0 0 0 6px var(--akzent-weich); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.aufgabe-titel { overflow-wrap: anywhere; font-weight: 600; letter-spacing: -0.01em; }
.ist-erledigt .aufgabe-titel { text-decoration: line-through; color: var(--text-2); }
.karte-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.zahl-klein { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.aufgabe-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.aufgabe-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.check { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--akzent); }

/* Details: aufklappbare Bearbeitung mit beschrifteten Feldern */
.details summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  font-size: 13px;
  font-weight: 600;
  color: var(--akzent);
}
.details summary::-webkit-details-marker { display: none; }
.details summary::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-top: -3px;
  transition: transform 300ms var(--kurve);
}
.details[open] summary::after { transform: rotate(-135deg); margin-top: 3px; }
.details-felder { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); padding-top: 8px; }
.details-aktion { display: flex; justify-content: flex-end; }
@media (min-width: 600px) {
  .details-felder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .details-felder .feld-breit { grid-column: 1 / -1; }
  .details-aktion { grid-column: 1 / -1; }
}

/* Formulare */
.formular { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); align-items: end; margin-top: 14px; }
.feld { display: grid; gap: 6px; min-width: 0; align-content: start; }
.feld label { font-size: 13px; font-weight: 500; color: var(--text-2); }
.feld input,
.feld select,
.details-felder input,
.details-felder select {
  width: 100%;
  min-height: 44px;
  padding: 8px 14px;
  border-radius: 14px;
  background: var(--flaeche-2);
  border: 1px solid var(--linie-2);
  transition: box-shadow 220ms var(--kurve), border-color 220ms;
}
.feld input:focus,
.feld select:focus,
.details-felder input:focus,
.details-felder select:focus,
.chat-eingabe input:focus,
.filter-auswahl:focus {
  outline: none;
  border-color: var(--akzent);
  box-shadow: 0 0 0 4px var(--akzent-weich);
}
.feld-breit { grid-column: 1 / -1; }
.formular .btn { justify-self: start; }
@media (min-width: 720px) {
  .formular { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .formular .feld-breit { grid-column: span 2; }
  .formular .btn { justify-self: end; }
}

/* Filter und Schalter */
.filter-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.filter-label { font-size: 13px; color: var(--text-2); margin-right: 2px; }
.chip-knopf {
  appearance: none;
  min-height: 36px;
  padding: 6px 15px;
  border-radius: 999px;
  cursor: pointer;
  background: var(--glas);
  border: 1px solid var(--glas-rand);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--schatten-klein);
  transition: background-color 260ms var(--kurve), color 260ms var(--kurve);
}
.chip-knopf[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.filter-auswahl {
  width: auto;
  min-height: 36px;
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--glas);
  border: 1px solid var(--glas-rand);
  font-size: 13px;
  font-weight: 600;
}
/* Schalter im iOS-Stil */
.schalter { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 48px; cursor: pointer; font-size: 15px; }
.schalter > span { display: flex; flex-direction: column; }
.schalter input[type="checkbox"] {
  appearance: none;
  position: relative;
  flex: none;
  width: 51px;
  height: 31px;
  margin: 0;
  border-radius: 999px;
  background: var(--flaeche-3);
  border: 1px solid var(--linie-2);
  cursor: pointer;
  transition: background-color 280ms var(--kurve);
}
.schalter input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 0 1px rgba(0, 0, 0, 0.2);
  transition: transform 280ms var(--kurve);
}
.schalter input[type="checkbox"]:checked { background: var(--akzent-stark); border-color: transparent; }
.schalter input[type="checkbox"]:checked::after { transform: translateX(20px); }
.akzent-reihe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.akzent-knopf {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 6px 15px 6px 8px;
  border-radius: 999px;
  cursor: pointer;
  background: var(--glas);
  border: 1px solid var(--glas-rand);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--schatten-klein);
}
.akzent-knopf[aria-pressed="true"] { border-color: var(--text); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--text); }
.akzent-punkt { width: 22px; height: 22px; border-radius: 50%; display: inline-block; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.akzent-blau { background: #3d9bff; }
.akzent-koralle { background: #ff8a6b; }
.akzent-gruen { background: #30d158; }
.akzent-pink { background: #ff4f6f; }
.akzent-standard { background: conic-gradient(#3d9bff, #ff8a6b, #30d158, #ff4f6f, #3d9bff); }
.stand-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .stand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.verloren { margin-top: 16px; }
.verloren summary { cursor: pointer; font-weight: 600; color: var(--text-2); min-height: 44px; display: flex; align-items: center; }
.verloren .stapel { margin-top: 12px; }

/* Dialog: Neuanlage als Blatt aus milchigem Glas, von überall aus */
dialog.dialog {
  width: min(560px, calc(100vw - 24px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 0;
  border: 1px solid var(--glas-rand);
  border-radius: 30px;
  background: var(--glas-hintergrund);
  color: var(--text);
  -webkit-backdrop-filter: var(--unschaerfe);
  backdrop-filter: var(--unschaerfe);
  box-shadow: 0 40px 90px -20px rgba(0, 0, 0, 0.55), var(--schatten);
}
dialog.dialog::backdrop {
  background: rgba(3, 3, 6, 0.42);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
dialog.dialog[open] { animation: blatt 420ms var(--kurve-weich) backwards; }
.dialog-kopf { padding: 22px 24px 0; }
.dialog-titel { font-size: 22px; font-weight: 650; letter-spacing: -0.02em; }
.formular-dialog { display: grid; gap: 14px; padding: 18px 24px 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) {
  .formular-dialog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.dialog-aktionen { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

/* Rückmeldung: kurzer Hinweis unten, verschwindet von selbst */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  z-index: 20;
  max-width: calc(100vw - 32px);
  padding: 11px 18px;
  border-radius: 999px;
  background: rgba(20, 20, 26, 0.82);
  color: #f7f7f9;
  border: 1px solid rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  font-size: 14px;
  font-weight: 600;
  pointer-events: none;
  animation: toast 3600ms var(--kurve) both;
}
.toast.ist-fehler { color: #ffb4b4; }
@media (min-width: 960px) { .toast { bottom: 32px; } }

/* Team */
.chat { display: grid; gap: 14px; }
.chat-verlauf { list-style: none; margin: 0; padding: 4px 2px; display: grid; gap: 10px; max-height: 60vh; overflow-y: auto; }
.bubble { max-width: 78%; padding: 11px 15px; border-radius: 22px; display: grid; gap: 3px; }
.bubble.fremde {
  justify-self: start;
  background: var(--flaeche-2);
  border: 1px solid var(--linie);
  border-bottom-left-radius: 8px;
}
.bubble.eigene {
  justify-self: end;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 60%), var(--akzent-stark);
  color: #fff;
  border-bottom-right-radius: 8px;
  box-shadow: 0 8px 18px -10px var(--akzent-weich);
}
.bubble-kopf { font-size: 12px; color: var(--text-3); }
.bubble.eigene .bubble-kopf { color: rgba(255, 255, 255, 0.9); }
.bubble-text { overflow-wrap: anywhere; white-space: pre-wrap; }
.chat-eingabe { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.chat-eingabe input {
  width: 100%;
  min-height: 46px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--flaeche-2);
  border: 1px solid var(--linie-2);
  transition: box-shadow 220ms, border-color 220ms;
}

/* Fokus-Pille: dunkles Glas, schwebt über jeder Ansicht */
.fokus-pille {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px 7px 16px;
  border-radius: 999px;
  background: rgba(18, 18, 24, 0.66);
  color: #f7f7f9;
  border: 1px solid rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  white-space: nowrap;
}
.fokus-pille .btn-ghost { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.2); color: #f7f7f9; }
.pille-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-weich); }
.pille-text { font-size: 13px; font-weight: 600; }
.pille-zeit { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 4.4ch; }

/* Anmeldung */
.fehler { color: var(--dringend); min-height: 1.5em; }
.login-hulle { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; box-sizing: border-box; }
.login-karte { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; gap: 16px; width: 100%; max-width: 420px; padding: 30px; box-sizing: border-box; }
.login-karte > .gruss, .login-karte > .marke { grid-area: auto; }
.login-karte > * { min-width: 0; }
.marke { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; letter-spacing: -0.02em; }

/* Bewegung mit Sinn. Ankommen, Aufsteigen, Absetzen, Gleiten. Rückwärts-Füllung: der Endzustand ist der normale Zustand. */
@keyframes eintritt {
  from { opacity: 0; transform: translate3d(0, 18px, 0) scale(0.985); filter: blur(10px); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes aufsteigen {
  from { transform: translateY(115%); }
  to { transform: none; }
}
@keyframes absetzen {
  0% { box-shadow: 0 26px 44px -12px rgba(0, 0, 0, 0.55), 0 6px 12px rgba(0, 0, 0, 0.25); }
  100% { box-shadow: var(--schatten); }
}
@keyframes toast {
  0% { opacity: 0; transform: translate(-50%, 14px); }
  7% { opacity: 1; transform: translate(-50%, 0); }
  84% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -6px); }
}
@keyframes blatt {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

/* Zahlen: Maske schneidet unten ab, die Zahl steigt aus der Bodenlinie */
.maske { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 12px; margin-bottom: -12px; }
.aufsteigen { display: inline-block; }

/* Karte, die die Spalte wechselt, setzt sich ab: der Schatten wird abgebaut */
.abgesetzt { animation: absetzen 620ms var(--kurve) backwards; }

/* Einblenden beim Laden und bei jedem Ansichtswechsel. Karten gestaffelt, Zahlen danach. */
.frisch .card,
.frisch .spalte { animation: eintritt 640ms var(--kurve-weich) backwards; }
.frisch .bento > .card:nth-child(2) { animation-delay: 70ms; }
.frisch .bento > .card:nth-child(3) { animation-delay: 130ms; }
.frisch .bento > .card:nth-child(4) { animation-delay: 180ms; }
.frisch .bento > .card:nth-child(5) { animation-delay: 230ms; }
.frisch .bento > .card:nth-child(6) { animation-delay: 280ms; }
.frisch .bento > .card:nth-child(7) { animation-delay: 330ms; }
.frisch .bento > .card:nth-child(8) { animation-delay: 380ms; }
.frisch .bento > .card:nth-child(9) { animation-delay: 430ms; }
.frisch .bento > .card:nth-child(10) { animation-delay: 480ms; }
.frisch .board .spalte:nth-child(2) { animation-delay: 70ms; }
.frisch .board .spalte:nth-child(3) { animation-delay: 140ms; }
.frisch .board .spalte:nth-child(4) { animation-delay: 210ms; }
.frisch .board .spalte:nth-child(5) { animation-delay: 280ms; }
.frisch .board .spalte:nth-child(6) { animation-delay: 350ms; }
.frisch .aufsteigen { animation: aufsteigen 720ms var(--kurve-weich) 320ms backwards; }

/* Mobil (unter 960 px): kompakter Kopf mit dem Plus, Tippziele mindestens 44 px, Filter brechen um statt abzuschneiden,
   Boards als wischbare Spalten. */
.nur-mobil { display: none; }
@media (max-width: 959px) {
  .nur-breit { display: none !important; }
  .nur-mobil { display: inline-flex; }
  .haupt { padding: 14px 16px 124px; }
  .kopf { flex-wrap: nowrap; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
  .kopf > div:first-child { min-width: 0; }
  .kopf-aktionen { flex: none; gap: 8px; }
  .kicker { font-size: 12px; margin-bottom: 2px; }
  .gruss { font-size: 27px; }
  .seitenkopf { margin: 0 0 12px; }
  .seiten-titel { font-size: 24px; }
  .btn,
  .btn-klein,
  .chip-knopf,
  .segment button,
  .details summary,
  .akzent-knopf { min-height: 44px; }
  .btn-klein { padding: 6px 14px; font-size: 14px; }
  .btn-icon { width: 44px; height: 44px; }
  .card { padding: 18px; border-radius: 26px; }
  .karten-titel { font-size: 22px; }
  .bento,
  .grid-b,
  .kpi-reihe,
  .stand-grid { gap: 16px; margin-bottom: 16px; }
  .zahl { font-size: 30px; }
  .timer { font-size: 52px; }
  .punkte-zahl { font-size: 36px; }
  .login-karte { padding: 24px; }
  .fokus-pille {
    top: auto;
    left: 12px;
    transform: none;
    bottom: calc(92px + env(safe-area-inset-bottom, 0px));
    max-width: calc(100vw - 96px);
  }
  .toast { bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
  .filter-zeile { margin-top: 12px; }
  .filter-auswahl { min-height: 44px; }
  .board {
    grid-auto-columns: min(86vw, 340px);
    gap: 12px;
    margin-top: 4px;
    padding: 10px 4px 24px;
    scroll-snap-type: x mandatory;
  }
  .spalte { scroll-snap-align: start; }
  .aufgabe { padding: 13px; }
}

/* Mobil-Regeln (Notizen feedback_efficiency_mobile_mandatory und pattern_ux_audit_handy):
   Eingabefelder 16 px (sonst zoomt iOS beim Antippen), Tippziele 44 px, Text nie unter 12 px,
   Dialog als Vollbild mit Daumen-Knöpfen, kleineres Hintergrundbild und keine Unschärfe am Hintergrund
   (Akku, Scrollen), beim Einblenden nur Bewegung ohne Weichzeichner. */
@media (max-width: 959px) {
  html[data-theme="hell"],
  html[data-theme="dunkel"] {
    --pane-unschaerfe: 0px;
    --unschaerfe: blur(16px) saturate(140%);
  }
  /* Handy: Foto vorab weichgezeichnet (kein Weichzeichner zur Laufzeit) und dichterer Milchschleier.
     Die Selektoren stehen hier mit gleicher Spezifität wie die Farbblöcke oben, damit sie im Dunkelmodus greifen. */
  :root,
  html[data-theme="dunkel"],
  html[data-theme="hell"] { --foto: url("/hintergrund/new-york-klein-weich.jpg"); }
  :root,
  html[data-theme="dunkel"] { --pane: rgba(58, 62, 78, 0.72); }
  html[data-theme="hell"] { --pane: rgba(246, 248, 252, 0.8); }
  input,
  select,
  textarea { font-size: 16px; }
  .check input { width: 24px; height: 24px; }
  .nav-knopf { font-size: 12px; letter-spacing: -0.02em; }
  .nav-knopf span { white-space: nowrap; line-height: 1.1; text-align: center; }
  .tabbar { left: 8px; right: 8px; padding: 6px 4px; gap: 0; }
  .nav-knopf { padding: 6px 0; }
  .kpi-ring { flex-direction: column; align-items: flex-start; gap: 12px; }
  .kpi-ring .ring { width: 64px; height: 64px; }
  .filter-auswahl { font-size: 16px; }
  .kopf {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "kicker aktionen" "gruss gruss";
    align-items: center;
    gap: 4px 12px;
  }
  .kopf > div:first-child { display: contents; }
  .kicker { grid-area: kicker; }
  .gruss { grid-area: gruss; font-size: 26px; }
  .kopf-aktionen { grid-area: aktionen; }
  .card { padding: 16px; border-radius: 24px; }
  .zeile-titel { font-size: 15px; }
  .balken-schiene,
  .balken-viele .balken-schiene { height: 96px; }
  .fokus-kachel .timer { font-size: 44px; margin: 4px 0 0; }
  .fokus-kachel .timer-unterzeile { display: none; }
  .fokus-kachel .karten-aktionen .btn-primary { width: 100%; }
  .frisch .card,
  .frisch .spalte { animation-name: eintritt-mobil; }
  dialog.dialog {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
  }
  dialog.dialog { background: var(--flaeche); }
  dialog.dialog .feld input,
  dialog.dialog .feld select { background: var(--flaeche); }
  .formular-dialog { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .dialog-kopf { padding: 18px 16px 0; }
  .dialog-aktionen { flex-direction: column-reverse; }
  .dialog-aktionen .btn { width: 100%; }
  button,
  .btn,
  .nav-knopf,
  .chip-knopf,
  .segment button,
  .details summary { touch-action: manipulation; }
}
@keyframes eintritt-mobil {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to { opacity: 1; transform: none; }
}

/* Personenfarben: jede Person hat eine Farbe. Chips, Namen und der Streifen am Rand nehmen sie.
   Im Dunkelmodus hellere Töne, damit die Schrift lesbar bleibt. */
:root { --person-titus: #6d4fd8; --person-korbi: #b4501a; }
html[data-theme="dunkel"] { --person-titus: #b9a6ff; --person-korbi: #ffb27a; }
.person-titus { --person: var(--person-titus); }
.person-korbi { --person: var(--person-korbi); }
.chip.person-titus, .chip.person-korbi {
  color: var(--person);
  background: color-mix(in srgb, var(--person) 14%, transparent);
  border-color: color-mix(in srgb, var(--person) 48%, transparent);
}
.person-name.person-titus, .person-name.person-korbi { color: var(--person); font-weight: 600; }
.bubble.eigene .person-name { color: inherit; }
.person-markiert { position: relative; }
.person-markiert::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 4px;
  border-radius: 4px;
  background: var(--person, transparent);
}

/* Gemeinsam: Übergaben, Termine, Projekt-Notizen */
[hidden] { display: none !important; }
.bento > .bk-6 { grid-column: span 6; }
.kpi-reihe.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 959px) {
  .bento > .bk-6 { grid-column: span 2; }
  .kpi-reihe.vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.termin-tag { display: grid; gap: 4px; }
.termin-team .zeile-titel { color: var(--akzent); }
.notiz.ist-erledigt .zeile-titel { text-decoration: line-through; opacity: 0.55; }
.notiz .karten-aktionen { margin-top: 8px; }

/* Tutorial: Rundgang über die echte Oberfläche. Ein Loch im Schleier zeigt das Ziel, die Karte erklärt es.
   Startet nur aus den Einstellungen. Der Schleier ist der Schatten des Lochs, damit bleibt das Ziel hell. */
dialog.tut {
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  overflow: hidden;
}
dialog.tut::backdrop { background: transparent; }
.tut-loch {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  border-radius: 26px;
  box-shadow: 0 0 0 100vmax rgba(9, 9, 16, 0.66);
  pointer-events: none;
  transition: left 480ms var(--kurve), top 480ms var(--kurve), width 480ms var(--kurve), height 480ms var(--kurve);
}
.tut-loch::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 1.5px solid var(--akzent);
  animation: tut-puls 2.4s var(--kurve) infinite;
}
.tut-loch.leer::after,
.tut-loch.hoch::after { display: none; }
@keyframes tut-puls {
  0% { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.1); }
}
.tut-karte {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 1;
  width: min(440px, calc(100% - 32px));
  transform: translateX(-50%);
  display: grid;
  gap: 14px;
  padding: 22px;
  border-radius: 28px;
  border: 1px solid var(--glas-rand);
  background: var(--glas-hintergrund);
  background-color: var(--flaeche);
  -webkit-backdrop-filter: var(--unschaerfe);
  backdrop-filter: var(--unschaerfe);
  box-shadow: var(--schatten);
}
.tut-karte[data-lage="oben"] {
  top: calc(20px + env(safe-area-inset-top, 0px));
  bottom: auto;
}
.tut-karte.neu { animation: tut-karte-ein 420ms var(--kurve-weich) backwards; }
@keyframes tut-karte-ein {
  from { opacity: 0; transform: translate(-50%, 14px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
.tut-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tut-titel { font-size: 26px; font-weight: 650; letter-spacing: -0.03em; line-height: 1.12; }
.tut-text { color: var(--text-2); font-size: 16px; line-height: 1.5; }
.tut-fortschritt { height: 4px; border-radius: 999px; background: var(--linie); overflow: hidden; }
.tut-fortschritt-wert { height: 100%; width: 0; border-radius: inherit; background: var(--akzent); transition: width 480ms var(--kurve); }
.tut-aktionen { display: flex; justify-content: space-between; gap: 8px; }
.tut-kopf .btn { min-height: 44px; }
.tut-aktionen .btn { min-height: 48px; }

/* Ruhig-Fassung: bei reduzierter Bewegung sofort der volle Zustand */
@media (prefers-reduced-motion: reduce) {
  .frisch .card,
  .frisch .spalte,
  .frisch .aufsteigen,
  .abgesetzt,
  .aufgabe.markiert,
  dialog.dialog[open] { animation: none; }
  .balken,
  .ring-wert,
  .fortschritt-wert,
  .hbalken-wert,
  .tut-loch,
  .tut-fortschritt-wert { transition: none; }
  .tut-loch::after,
  .tut-karte.neu { animation: none; }
  .btn:active,
  .nav-knopf:active { transform: none; }
  button.card:hover { transform: none; }
}