/* Skillzeit: neutrale Hell- und Dunkel-Palette, Blau als Akzent (Ziel, Fokus, Serie, Positives), Rot nur für Warnungen, WSS-Farben nur für Zufriedenheit.
   Seit 08.10.2026 (Sebastian): vorher Terrakotta, kaum vom Rot für „Ausbaufähig“ zu unterscheiden. */
:root {
  --ground: #f4f4f2;
  --paper: #ffffff;
  --ink: #1b1b19;
  --muted: #66655f;
  --line: #e3e2de;
  --brand: #1b1b19;        /* Hauptknöpfe */
  --brand-hover: #3a3a36;
  --brand-ink: #1b1b19;    /* Links, Auswahl, Balken */
  --brand-soft: #ebeae6;   /* Flächen für Auswahl und Etiketten */
  --on-brand: #ffffff;
  --accent: #3f5fa8;
  --warn: #c0473a;        /* nur Warnungen: überfällig, löschen, Rückgang */
  --flame-off: #d9d8d3;
  /* Zufriedenheit wie im Work Smarter System */
  --z1: #c9594f;
  --z2: #e3934a;
  --z3: #a9c46a;
  --z4: #5e9567;
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 22px;
  --radius-s: 14px;
  --shadow: 0 1px 2px rgb(27 27 25 / .04), 0 10px 28px -14px rgb(27 27 25 / .18);
  --w: 560px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #121211; --paper: #1d1d1b; --ink: #f0efeb; --muted: #a3a19b; --line: #2f2e2b;
    --brand: #f0efeb; --brand-hover: #d6d5d0; --brand-ink: #f0efeb; --brand-soft: #2a2927; --on-brand: #121211;
    --accent: #8ea8e6; --warn: #e5776a; --flame-off: #3a3936;
    --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 10px 28px -14px rgb(0 0 0 / .6);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #121211; --paper: #1d1d1b; --ink: #f0efeb; --muted: #a3a19b; --line: #2f2e2b;
  --brand: #f0efeb; --brand-hover: #d6d5d0; --brand-ink: #f0efeb; --brand-soft: #2a2927; --on-brand: #121211;
  --accent: #8ea8e6; --warn: #e5776a; --flame-off: #3a3936;
  --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 10px 28px -14px rgb(0 0 0 / .6);
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--font); font-size: 1.0625rem; line-height: 1.55;
  font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased;
}
h1, h2, p { margin: 0; }
h1, h2 { letter-spacing: -0.025em; line-height: 1.15; text-wrap: balance; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--brand-ink); outline-offset: 3px; border-radius: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted, .small { color: var(--muted); }
.small { font-size: .875rem; }

/* Rahmen */
.demo { background: var(--brand-soft); color: var(--brand-ink); font-size: .8125rem; text-align: center; padding: 8px 16px; }
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: color-mix(in srgb, var(--ground) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top__in, .main, .tabs__in { max-width: var(--w); margin: 0 auto; padding-inline: 16px; }
.top__in { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; }
.brand { font-weight: 800; letter-spacing: -0.02em; font-size: 1.05rem; }
.brand span { font-weight: 300; color: var(--muted); }
.brand--big { font-size: 1.6rem; }
.main { padding-block: 20px 120px; display: grid; gap: 18px; }

.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; background: var(--paper); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0px); }
.tabs__in { display: grid; grid-template-columns: repeat(5, 1fr); }
.tab { background: none; border: 0; padding: 10px 4px 12px; display: grid; justify-items: center; gap: 3px; font-size: .75rem; font-weight: 600; color: var(--muted); cursor: pointer; }
.tab svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tab.is-active { color: var(--brand-ink); }
.tab.is-active svg { stroke-width: 2.4; }

/* Heute */
.date { color: var(--muted); font-size: .9375rem; }
.card { background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px 22px; display: grid; gap: 14px; }
.kicker { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.card__title { font-size: clamp(1.7rem, 1.3rem + 2vw, 2.2rem); font-weight: 800; }
.card__task { font-size: 1.15rem; line-height: 1.5; }
.card__skill { font-size: .9375rem; color: var(--muted); }
.card__skill strong { color: var(--ink); font-weight: 650; }
.chip { display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: .8125rem; font-weight: 650; background: var(--brand-soft); color: var(--brand-ink); }
.flames { display: inline-flex; gap: 1px; }
.fl { color: var(--flame-off); display: inline-flex; }
.fl.is-on { color: var(--accent); }
.why { border-top: 1px solid var(--line); padding-top: 12px; }
.why summary { cursor: pointer; font-weight: 650; color: var(--brand-ink); list-style: none; display: flex; align-items: center; gap: 8px; }
.why summary::-webkit-details-marker { display: none; }
.why summary::after { content: "+"; font-weight: 400; font-size: 1.3rem; line-height: 1; }
.why[open] summary::after { content: "–"; }
.why p { margin-top: 8px; color: var(--muted); }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.btn { appearance: none; border: 0; border-radius: 999px; background: var(--brand); color: var(--on-brand); font-weight: 700; padding: 13px 24px; cursor: pointer; transition: background .15s; }
.btn:hover { background: var(--brand-hover); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn--ghost:hover { background: var(--brand-soft); }
.btn--wide { width: 100%; }
/* Zweite Wahl neben einer schwarzen Hauptaktion in derselben Liste (z. B. weitere Lernpfad-Vorschläge) */
.btn--grau { background: var(--ground); color: var(--ink); }
.btn--grau:hover { background: var(--line); }
.hint { font-size: .875rem; color: var(--muted); }
.linkbtn { background: none; border: 0; padding: 4px 0; color: var(--brand-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; justify-self: start; }
.linkbtn--danger { color: var(--warn); }

.card--done .card__title { font-size: 1.5rem; }
.done-badge { font-size: .8125rem; font-weight: 700; color: var(--brand-ink); }
.done-badge::before { content: "✓ "; }
.rated { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; }
.rated dt { font-size: .8125rem; color: var(--muted); }
.rated dd { margin: 2px 0 0; display: flex; align-items: center; gap: 8px; font-weight: 600; }
.note { font-style: italic; color: var(--muted); }
.next { color: var(--muted); text-align: center; font-size: .9375rem; }

/* Bewertung */
.rate { display: grid; gap: 18px; border-top: 1px solid var(--line); padding-top: 16px; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { font-weight: 700; padding: 0; margin-bottom: 10px; }
.rate input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.rate__flames { display: flex; align-items: center; gap: 6px; }
.flamebtn { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--ground); color: var(--flame-off); cursor: pointer; position: relative; }
.flamebtn svg { width: 22px; height: 28px; }
.flamebtn.is-on { color: var(--accent); }
.flamebtn:focus-within { outline: 3px solid var(--brand-ink); outline-offset: 2px; }
.rate__lbl { margin-left: 8px; font-weight: 600; color: var(--muted); }
.rate__colors { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.colorbtn { display: grid; justify-items: center; gap: 6px; cursor: pointer; text-align: center; position: relative; }
.colorbtn__sw { width: 100%; max-width: 64px; aspect-ratio: 1; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 0 var(--ink); transition: box-shadow .15s, transform .15s; }
.colorbtn__t { font-size: .75rem; line-height: 1.25; color: var(--muted); }
.colorbtn.is-on .colorbtn__sw { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink); transform: scale(1.04); }
.colorbtn.is-on .colorbtn__t { color: var(--ink); font-weight: 650; }
.colorbtn:focus-within .colorbtn__sw { outline: 3px solid var(--brand-ink); outline-offset: 5px; }
.z1 { --c: var(--z1); } .z2 { --c: var(--z2); } .z3 { --c: var(--z3); } .z4 { --c: var(--z4); }
.dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c); display: inline-block; flex: none; }

.field { display: grid; gap: 6px; }
.field > span, .field > legend { font-weight: 650; font-size: .9375rem; }
.field em { font-style: normal; font-weight: 400; color: var(--muted); }
input[type="email"], input:not([type]), .field input[type="date"], textarea, select { width: 100%; border: 1.5px solid var(--line); background: var(--paper); border-radius: 12px; padding: 11px 13px; }
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--brand-ink); }

/* Verlauf */
.h { font-size: 1.8rem; font-weight: 800; }
.h2 { font-size: 1.15rem; font-weight: 750; margin-top: 8px; }
.sub { color: var(--muted); }
.empty { color: var(--muted); background: var(--paper); border-radius: var(--radius-s); padding: 20px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stats div { background: var(--paper); border-radius: var(--radius-s); padding: 14px; display: grid; gap: 2px; }
.stats strong { font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.stats span { font-size: .8125rem; color: var(--muted); }
.panel { background: var(--paper); border-radius: var(--radius-s); padding: 18px; display: grid; gap: 12px; }
.panel__h { font-size: 1.05rem; font-weight: 750; }
.stack { display: flex; height: 14px; border-radius: 999px; overflow: hidden; gap: 2px; }
.stack span { background: var(--c); }
.legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .8125rem; color: var(--muted); }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.legend b { color: var(--ink); font-variant-numeric: tabular-nums; }
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bars li { display: grid; grid-template-columns: minmax(0, 11rem) 1fr 2ch; align-items: center; gap: 10px; font-size: .875rem; }
.bars__t { height: 10px; background: var(--ground); border-radius: 999px; overflow: hidden; }
.bars__f { display: block; height: 100%; background: var(--brand-ink); border-radius: 999px; }
.bars b { text-align: right; font-variant-numeric: tabular-nums; }
.log { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.log__i { position: relative; background: var(--paper); border-radius: var(--radius-s); padding: 14px 16px 14px 18px; overflow: hidden; display: grid; gap: 2px; }
.corner { position: absolute; left: 0; top: 0; width: 0; height: 0; border-style: solid; border-width: 22px 22px 0 0; border-color: var(--c) transparent transparent transparent; }
.log__head { display: flex; justify-content: space-between; align-items: center; }
.log__d { font-size: .8125rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.log__t { font-weight: 700; }
.log__b { font-size: .8125rem; color: var(--muted); }
.log__n { font-size: .9375rem; font-style: italic; color: var(--muted); margin-top: 4px; }

/* Eigene */
.form { gap: 16px; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.seg input { position: absolute; opacity: 0; }
.seg label { position: relative; }
.seg span { display: block; text-align: center; padding: 9px 6px; border-radius: 10px; border: 1.5px solid var(--line); font-size: .875rem; font-weight: 600; cursor: pointer; }
.seg input:checked + span { border-color: var(--brand-ink); background: var(--brand-soft); color: var(--brand-ink); }
.seg input:focus-visible + span { outline: 3px solid var(--brand-ink); outline-offset: 2px; }
.own { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.own__row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.own__confirm { display: inline-flex; gap: 12px; align-items: center; font-size: .875rem; }
.switch { display: inline-flex; align-items: center; gap: 10px; font-size: .875rem; font-weight: 600; cursor: pointer; }
.switch input { position: absolute; opacity: 0; }
.switch span { width: 38px; height: 22px; border-radius: 999px; background: var(--line); position: relative; transition: background .15s; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); transition: transform .15s; box-shadow: 0 1px 2px rgb(0 0 0 / .2); }
.switch input:checked + span { background: var(--brand-ink); }
.switch input:checked + span::after { transform: translateX(16px); }
.switch input:focus-visible + span { outline: 3px solid var(--brand-ink); outline-offset: 2px; }

/* Konto */
.kv { margin: 0; display: grid; gap: 12px; }
.kv dt { font-size: .8125rem; color: var(--muted); }
.kv dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.kv .muted { font-weight: 400; font-size: .875rem; }
.roles { display: grid; gap: 8px; }
.role { text-align: left; background: var(--ground); border: 1.5px solid transparent; border-radius: 12px; padding: 12px 14px; cursor: pointer; font-weight: 600; font-size: .9375rem; }
.role.is-chosen { border-color: var(--brand-ink); background: var(--brand-soft); color: var(--brand-ink); }
.panel--demo { background: transparent; border: 1.5px dashed var(--line); }
.demo-actions { display: flex; flex-direction: column; gap: 4px; }

/* Anmeldung */
.login { min-height: 100%; }
.login__in { max-width: 440px; margin: 0 auto; padding: 48px 16px; display: grid; gap: 20px; }
.login__lead { font-size: 1.15rem; color: var(--muted); }
.login__buy { font-size: .9375rem; color: var(--muted); }
.login__buy a { color: var(--brand-ink); font-weight: 600; }

.toast { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--ink); color: var(--ground); padding: 10px 18px; border-radius: 999px; font-weight: 600; font-size: .9375rem; z-index: 10; animation: pop .25s ease-out; white-space: nowrap; }
@keyframes pop { from { transform: translate(-50%, 8px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } * { transition: none !important; } }
@media (max-width: 380px) { .card { padding: 20px 16px; } .rated { grid-template-columns: 1fr; } }

/* Einstellungen */
.panel__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.day { position: relative; }
.day input { position: absolute; opacity: 0; }
.day span { display: grid; place-items: center; aspect-ratio: 1; max-width: 48px; margin: 0 auto; border-radius: 50%; border: 1.5px solid var(--line); font-size: .8125rem; font-weight: 650; cursor: pointer; color: var(--muted); }
.day input:checked + span { background: var(--brand-ink); border-color: var(--brand-ink); color: var(--paper); }
.day input:focus-visible + span { outline: 3px solid var(--brand-ink); outline-offset: 2px; }
.field--row { grid-template-columns: 1fr auto; align-items: center; }
input[type="time"] { border: 1.5px solid var(--line); background: var(--paper); border-radius: 12px; padding: 9px 12px; font-variant-numeric: tabular-nums; }
.checks { display: grid; gap: 10px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .9375rem; cursor: pointer; overflow-wrap: anywhere; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--brand-ink); flex: none; }
.warn { color: var(--warn); }

/* Alle Pushes */
.filters { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 6px; }
.filter { border: 1.5px solid var(--line); background: var(--paper); border-radius: 999px; padding: 6px 11px; white-space: nowrap; font-size: .875rem; font-weight: 600; cursor: pointer; }
.filter span { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.filter.is-on { background: var(--ink); border-color: var(--ink); color: var(--ground); }
.filter.is-on span { color: inherit; opacity: .7; }
.group { display: grid; gap: 8px; }
.group__h { font-size: 1.05rem; font-weight: 750; display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; }
.group__h span { font-size: .8125rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.plist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pitem { background: var(--paper); border-radius: var(--radius-s); }
.pitem summary { list-style: none; display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 13px 14px; cursor: pointer; }
.pitem summary::-webkit-details-marker { display: none; }
.pitem__mark { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; }
.pitem.is-done .pitem__mark { background: var(--brand-ink); border-color: var(--brand-ink); }
.pitem.is-done .pitem__mark::after { content: ""; width: 9px; height: 5px; border: solid var(--paper); border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
.pitem__t { font-weight: 650; line-height: 1.3; }
.pitem.is-done .pitem__t { color: var(--muted); }
.pitem.is-off { opacity: .6; }
.pitem__own { font-style: normal; font-size: .75rem; font-weight: 600; color: var(--brand-ink); background: var(--brand-soft); border-radius: 999px; padding: 1px 7px; margin-left: 4px; white-space: nowrap; }
.pitem__own--today { color: var(--paper); background: var(--accent); }
.pitem[open] summary { border-bottom: 1px solid var(--line); }
.pitem__body { padding: 12px 14px 14px 46px; display: grid; gap: 8px; }
.pitem__why { font-size: .9375rem; color: var(--muted); }
.pitem__why strong { color: var(--ink); font-weight: 650; }
.btn--small { padding: 9px 18px; font-size: .9375rem; }
.tag-today { font-size: .875rem; font-weight: 700; color: var(--accent); }
@media (max-width: 380px) { .pitem__body { padding-left: 14px; } }

/* Eigener Bereich */
.chip--E { background: transparent; box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--accent); }
.bars__own { border-top: 1px solid var(--line); padding-top: 10px; }
.group__own { display: block; font-style: normal; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.group__h:has(.group__own) { display: grid; grid-template-columns: 1fr auto; }
.group__h:has(.group__own) .group__own { grid-column: 1 / -1; }

/* Mehrere Challenges pro Tag */
.date__count { color: var(--accent); font-weight: 650; }
.more { display: grid; justify-items: center; gap: 10px; }

/* ===== Skillbook ===== */
.card__why { font-size: .9375rem; font-weight: 650; color: var(--accent); }
.panel--cta { background: var(--ink); color: var(--ground); }
.panel--cta .kicker, .panel--cta .sub { color: color-mix(in srgb, var(--ground) 70%, transparent); margin: 0; }
.panel--cta .btn { justify-self: start; }
.panel--row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.panel--row .linkbtn { flex: none; }
.back { background: none; border: 0; padding: 0; color: var(--brand-ink); font-weight: 650; cursor: pointer; justify-self: start; }
.meter { display: block; height: 8px; border-radius: 999px; background: var(--ground); overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: 999px; background: var(--brand-ink); }
.delta { font-size: .75rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.delta.is-up { color: var(--z4); }
.delta.is-down { color: var(--warn); }

/* Meilensteine */
.ms { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ms__i { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); }
.ms__i:first-child { border-top: 0; }
.ms__i .check { flex: 1; }
.ms__i.is-done .check span { color: var(--muted); text-decoration: line-through; }
.ms__i { flex-wrap: wrap; }
.ms__frage { flex-basis: 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: 6px 0 2px 30px; }
.ms__frage p.small { margin: 0; flex-basis: 100%; }
.ms__frage > button { flex: none; width: auto; }
/* Mehr Abstand zwischen Datum und ×, damit man nicht versehentlich löscht */
.ms__i .x { margin-left: 6px; }
.ms__ziel { display: block; font-style: normal; font-size: .8125rem; color: var(--muted); text-decoration: none; }
.ms__d { font-size: .8125rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ms__d.is-late { color: var(--warn); font-weight: 700; }
.x { background: none; border: 0; color: var(--muted); font-size: 1.2rem; line-height: 1; padding: 4px 6px; cursor: pointer; border-radius: 6px; }
.x:hover { color: var(--warn); }

/* Ziele */
.goals { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.goal { width: 100%; text-align: left; background: var(--paper); border: 0; border-radius: var(--radius-s); padding: 16px; display: grid; gap: 6px; cursor: pointer; box-shadow: var(--shadow); }
.goal__t { font-weight: 750; font-size: 1.1rem; line-height: 1.3; }
.goal__d, .goal__m { font-size: .8125rem; color: var(--muted); }
.goal__prog { display: grid; gap: 6px; }
.skilltags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.skilltags li { background: var(--brand-soft); color: var(--brand-ink); border-radius: 999px; padding: 4px 11px; font-size: .8125rem; font-weight: 650; }
.skilltags b { font-weight: 800; margin-left: 2px; font-variant-numeric: tabular-nums; }
.inline-add { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; align-items: center; }
.inline-add input { border: 1.5px solid var(--line); background: var(--paper); border-radius: 10px; padding: 8px 10px; min-width: 0; font-size: .9375rem; }
.inline-add input[type="date"] { width: 9.5rem; }
@media (max-width: 420px) { .inline-add { grid-template-columns: 1fr auto; } .inline-add input[name="titel"] { grid-column: 1 / -1; } }
.skillpick__k { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
.skillpick, .picks { display: flex; flex-wrap: wrap; gap: 6px; }
.pick { position: relative; border: 1.5px solid var(--line); background: var(--paper); border-radius: 999px; padding: 6px 12px; font-size: .875rem; font-weight: 600; cursor: pointer; text-align: left; line-height: 1.3; }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick b { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.pick.is-on { border-color: var(--brand-ink); background: var(--brand-soft); color: var(--brand-ink); }
.pick:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.pick:focus-within { outline: 3px solid var(--brand-ink); outline-offset: 2px; }

/* Skills */
.bars--skills li { grid-template-columns: minmax(0, 11rem) 1fr 2.2ch 3.2ch; }
.skillcat summary { grid-template-columns: 1fr auto; }
.skilllist { list-style: none; margin: 0; padding: 12px 14px 14px; display: grid; gap: 14px; }
.skilllist li { display: grid; gap: 4px; }
.skilllist__h { display: flex; justify-content: space-between; gap: 10px; font-weight: 650; font-size: .9375rem; }
.skilllist__h b { font-variant-numeric: tabular-nums; }
.segtabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--paper); border-radius: 999px; padding: 4px; gap: 4px; }
.segtab { border: 0; background: none; border-radius: 999px; padding: 8px 10px; font-weight: 650; font-size: .9375rem; cursor: pointer; color: var(--muted); }
.segtab.is-on { background: var(--ink); color: var(--ground); }

/* Abläufe */
.flow__top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--ground); border-bottom: 1px solid var(--line); }
.flow__in { max-width: var(--w); margin: 0 auto; padding-inline: 16px; display: flex; justify-content: space-between; align-items: center; min-height: 56px; }
.flow__steps { list-style: none; margin: 0 auto; padding: 0 16px 10px; max-width: var(--w); display: flex; gap: 6px; }
.flow__steps li { flex: 1; font-size: .75rem; font-weight: 600; color: var(--muted); border-top: 3px solid var(--line); padding-top: 6px; line-height: 1.25; }
.flow__steps li.is-on { color: var(--ink); border-color: var(--accent); }
.flow__steps li.is-done { border-color: var(--brand-ink); }
.flow__main { padding-bottom: 60px; }
.flow__actions { position: sticky; bottom: 0; background: linear-gradient(to top, var(--ground) 70%, transparent); padding: 16px 0 calc(16px + env(safe-area-inset-bottom, 0px)); }
.how { margin: 0; padding-left: 1.3em; display: grid; gap: 10px; }
.sliders { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.sliders label { font-size: .9375rem; line-height: 1.4; }
.slider { display: grid; grid-template-columns: 1fr 3.5rem; align-items: center; gap: 10px; margin-top: 4px; }
.slider input { width: 100%; accent-color: var(--brand-ink); }
.slider output { font-weight: 750; text-align: right; font-variant-numeric: tabular-nums; }
.scales { margin: 0; padding: 0; list-style: none; display: grid; gap: 18px; counter-reset: q; }
.scales p { font-weight: 600; font-size: .9375rem; line-height: 1.4; margin-bottom: 8px; }
.scale { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.scale__b { border: 1.5px solid var(--line); background: var(--paper); border-radius: 8px; padding: 8px 0; font-weight: 700; font-size: .875rem; cursor: pointer; font-variant-numeric: tabular-nums; }
.scale__b.is-on { background: var(--brand-ink); border-color: var(--brand-ink); color: var(--paper); }
.yn { display: grid; gap: 8px; }
.yn p { font-size: .9375rem; line-height: 1.4; }
.yn__b { display: flex; gap: 6px; }
.seg__b { border: 1.5px solid var(--line); background: var(--paper); border-radius: 10px; padding: 8px 20px; font-weight: 650; cursor: pointer; }
.seg__b.is-on { border-color: var(--brand-ink); background: var(--brand-soft); color: var(--brand-ink); }
.rem { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.rem__t { font-weight: 700; }
.rem .panel__row { align-items: flex-start; }
.rem .switch { margin-top: 2px; }
.checks--sub { padding-left: 2px; }
.ci__t { font-size: .8125rem; font-weight: 700; margin-top: 6px; }
.ci__n { font-size: .9375rem; white-space: pre-line; }

/* ===== Heute: Tageseintrag, Tagesleiste, kompakte Challenge ===== */
button.colorbtn { background: none; border: 0; padding: 0; font: inherit; color: inherit; }
.tb__colors .colorbtn__sw, .rate__colors .colorbtn__sw { max-width: 52px; }
.tb__sum { display: flex; gap: 12px; align-items: center; }
.tb__sum .kicker { margin: 0; }
.tbsq { display: block; width: 26px; height: 26px; border-radius: 6px; background: var(--c); flex: none; }
.tbsq.is-empty { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); }
.tb__more select { margin-top: 8px; font-size: .9375rem; padding: 8px 10px; }
.tb__leit summary { font-size: .9375rem; }
.tb__leit .field { margin-top: 8px; }
.pick:disabled { opacity: .45; cursor: not-allowed; }

.strip { display: grid; gap: 8px; }
.strip__l { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; }
.strip__d { display: grid; justify-items: center; gap: 3px; }
.strip__d .tbsq { width: 100%; height: auto; aspect-ratio: 1; max-width: 26px; border-radius: 5px; }
.strip__d.is-today .tbsq { outline: 2px solid var(--ink); outline-offset: 2px; }
.strip__c { width: 5px; height: 5px; border-radius: 50%; background: transparent; }
.strip__c.is-on { background: var(--accent); }
.strip__t { font-size: .6875rem; color: var(--muted); }
.strip__leg { display: flex; align-items: center; gap: 6px; font-size: .75rem; }

.chall { gap: 8px; }
.chall__k { margin: 0; }
.chall__sum { list-style: none; cursor: pointer; display: grid; gap: 6px; }
.chall__sum::-webkit-details-marker { display: none; }
.chall__t { font-size: 1.2rem; font-weight: 750; letter-spacing: -0.015em; line-height: 1.3; }
.chall__more { font-size: .875rem; font-weight: 650; color: var(--brand-ink); text-decoration: underline; text-underline-offset: 3px; }
.chall__body { display: grid; gap: 12px; padding-top: 10px; border-top: 1px solid var(--line); margin-top: 4px; }
.chall__body .card__task { font-size: 1.05rem; }
.chall--done .chall__t { color: var(--muted); }
.chall__rated { display: flex; align-items: center; gap: 8px; font-size: .9375rem; font-weight: 600; }
.chall__rated .dot { margin-left: 6px; }
.chall .done-badge { order: -1; }
.chall[open] .m-auf, .chall:not([open]) .m-zu { display: none; }
.strip__b { background: none; border: 0; padding: 0; display: grid; justify-items: center; gap: 3px; width: 100%; cursor: pointer; font: inherit; color: inherit; }
.strip__d.is-sel .tbsq { outline: 2px solid var(--accent); outline-offset: 2px; }
.tb--nachtrag { box-shadow: inset 0 0 0 2px var(--accent); }
.tb--nachtrag .kicker { color: var(--accent); margin: 0; }
.inline-add--tb { grid-template-columns: 1fr auto; align-items: end; }
.inline-add--tb input[type="date"] { width: 100%; }
.tb { scroll-margin-top: 72px; }
.chall__top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.chall__streak { font-weight: 800; color: var(--accent); white-space: nowrap; font-variant-numeric: tabular-nums; font-size: .9375rem; }
.chall__streak span { font-weight: 500; color: var(--muted); font-size: .8125rem; }

/* Pakete */
.pitem__own--pak { color: var(--accent); background: transparent; box-shadow: inset 0 0 0 1.5px var(--accent); }
.paks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pak { border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 6px; }
.pak.is-on { border-color: var(--brand-ink); background: var(--brand-soft); }
.pak__st { font-size: .75rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.pak.is-on .pak__st { color: var(--brand-ink); }
.pak .btn { justify-self: start; }
.pak--soon { border-style: dashed; }
.filters { display: flex; flex-wrap: wrap; }

/* Neutrale Palette: Feinschliff */
.panel--cta .btn { background: var(--paper); color: var(--ink); }
.panel--cta .btn:hover { background: var(--brand-soft); }
.switch input:checked + span { background: var(--accent); }
.day input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.scale__b.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.pitem.is-done .pitem__mark { background: var(--ink); border-color: var(--ink); }
.themes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }

/* Logo */
.logo { display: block; height: 22px; width: auto; color: var(--ink); }
.brand { display: flex; align-items: center; gap: 8px; }
.brand--big .logo { height: 40px; }

/* Aktive Pakete rechts im Kopf */
.paks-top { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.pill { background: var(--ink); color: var(--paper); font-size: .75rem; font-weight: 700; letter-spacing: .02em; padding: 4px 10px; border-radius: 999px; line-height: 1.3; white-space: nowrap; }

/* Kategorie-Überschriften in der Challenge-Liste: größer, mit Linie */
.group { gap: 10px; margin-top: 14px; }
.group__h {
  margin: 0 -16px; padding: 12px 16px 10px;
  font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em;
  border-bottom: 2px solid var(--ink);
}
.group__h span { font-size: .875rem; font-weight: 700; color: var(--muted); }

/* Kalender */
.cal__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.cal__nav { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cal__arrow { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--paper); font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--ink); }
.cal__year { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; align-items: start; }
.cal__m { align-content: start; }
@media (min-width: 520px) { .cal__year { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cal__m { display: grid; gap: 6px; }
.cal__mt { justify-self: start; background: none; border: 0; padding: 0; font-weight: 750; font-size: .9375rem; cursor: pointer; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.cal__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.cal__grid li { min-width: 0; }
.cal__d { position: relative; display: block; width: 100%; aspect-ratio: 1; min-width: 0; padding: 0; border: 0; border-radius: 3px; background: transparent; box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; font: inherit; color: var(--ink); }
.cal__d.is-set { background: var(--c); box-shadow: none; }
.cal__d:disabled { cursor: default; opacity: .35; }
.cal__d.is-today { outline: 2px solid var(--ink); outline-offset: 1px; }
.cal__d.has-ch::after { content: ""; position: absolute; right: 2px; bottom: 2px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.cal__d.is-set.has-ch::after { background: var(--paper); }
.cal__wd { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; font-size: .75rem; color: var(--muted); text-align: center; font-weight: 600; }
.cal__grid--big { gap: 6px; }
.cal__grid--big .cal__d { border-radius: 8px; font-size: .8125rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.cal__grid--big .cal__d.is-set { color: #fff; text-shadow: 0 1px 1px rgb(0 0 0 / .25); }
.cal__grid--big .cal__d.has-ch::after { width: 6px; height: 6px; right: 5px; bottom: 5px; }
/* kleines Datum in der Jahresansicht */
.cal__n { position: absolute; left: 2px; top: 1px; font-size: 7.5px; line-height: 1; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.cal__d.is-set .cal__n { color: rgb(255 255 255 / .9); }
@media (min-width: 520px) { .cal__n { font-size: 8.5px; } }

/* Punkt für erledigte Challenge: schwarz im hellen, weiß im dunklen Modus, immer in der Kachel */
.strip__c.is-on, .cal__d.has-ch::after, .cal__d.is-set.has-ch::after { background: var(--ink); }
.strip__d .tbsq { position: relative; }
.tbsq.has-ch::after { content: ""; position: absolute; right: 3px; bottom: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); }

/* Eigene Kästchen: offen hellgrau umrandet, erledigt gefüllt mit Haken */
.check input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; flex: none; margin: 2px 0 0;
  width: 20px; height: 20px; border-radius: 6px; cursor: pointer;
  border: 1.5px solid color-mix(in srgb, var(--muted) 55%, transparent); background: var(--paper);
  display: grid; place-items: center; transition: background .15s, border-color .15s;
}
.check input[type="checkbox"]:hover { border-color: var(--muted); }
.check input[type="checkbox"]::after { content: ""; width: 9px; height: 5px; border: solid transparent; border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
.check input[type="checkbox"]:checked { background: var(--ink); border-color: var(--ink); }
.check input[type="checkbox"]:checked::after { border-color: var(--paper); }
.check input[type="checkbox"]:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* Challenge-Karte: links Titel, rechts Kategorie mit Flammen und Bewertung darunter */
.chall__main { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.chall__l { display: grid; gap: 6px; justify-items: start; }
.chall__r { display: grid; gap: 6px; justify-items: end; text-align: right; }
.chall__r .flames { margin-right: 2px; }
.chall__rated { display: flex; }
.chall__z { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.chall--done .done-badge { order: 0; }
.chall__k .date__count { text-transform: none; letter-spacing: 0; font-size: .8125rem; }

/* Abo-Auswahl im Konto */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.plan { display: flex; flex-direction: column; gap: 2px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); text-decoration: none; background: var(--paper); }
.plan b { font-size: .8125rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.plan span:not(.small) { font-weight: 700; font-size: 1.25rem; white-space: nowrap; }
.plan--best { border-color: var(--ink); }

/* App installieren (PWA) und Offline-Hinweis */
.offline { margin: 0; padding: 8px 16px; text-align: center; font-size: .875rem; font-weight: 600; background: var(--ink); color: var(--ground); }
.inst .btn { margin-top: 4px; }
.segtabs--inset { background: var(--ground); margin: 4px 0 12px; }
.steps-mini { margin: 0 0 8px; padding-left: 1.25rem; display: grid; gap: 8px; }
.steps-mini li { padding-left: 4px; line-height: 1.45; }
.ico-inline { width: 1.1em; height: 1.1em; vertical-align: -0.2em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Challenges: Kategorie, Sortierung, Mehr anzeigen */
.sortsel { display: flex; width: fit-content; justify-content: flex-start; align-items: center; gap: 8px; margin: 12px 0 0; font-size: .875rem; font-weight: 600; color: var(--muted); }
.sortsel select { width: auto; max-width: 100%; font: inherit; font-weight: 600; color: var(--ink); background: var(--paper); border: 1.5px solid var(--line); border-radius: 10px; padding: 6px 28px 6px 10px; }
.sortinfo { margin: 6px 0 0; }
.more { display: block; width: 100%; margin: 8px 0 0; padding: 11px 12px; border: 1.5px dashed var(--line); border-radius: 12px; background: none; color: var(--ink); font: inherit; font-weight: 650; font-size: .9375rem; cursor: pointer; }
.more:hover { border-color: var(--ink); }
.ctrl { display: grid; gap: 0; }
.more-row { display: flex; gap: 8px; margin-top: 8px; }
.more-row .more { margin: 0; flex: 1; }
.more span { color: var(--muted); font-weight: 500; }
.more--less { flex: 0 0 auto !important; width: auto; border-style: solid; }

/* Erreichte Ziele (Archiv) */
.archiv { margin-top: 8px; }
.archiv > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; padding: 6px 0; }
.archiv > summary::-webkit-details-marker { display: none; }
.archiv > summary::after { content: ""; width: 8px; height: 8px; margin-left: auto; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s; }
.archiv[open] > summary::after { transform: rotate(-135deg); }
.archiv > summary .h2 { margin: 0; }
.archiv__n { font-size: .8125rem; font-weight: 700; color: var(--muted); background: var(--line); border-radius: 999px; padding: 2px 9px; }
.archiv .goals { margin-top: 10px; }
.goal--done .goal__t { color: var(--muted); }
.goal--done .goal__t::before { content: "✓ "; color: var(--ink); }
.card--done .kicker { color: var(--ink); }
.zb__t { margin-bottom: 0; } .zb__d { margin: -8px 0 4px; }

/* Check-out pausiert, Meilensteine in der Zwischenbilanz */
.pausebar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 16px; background: var(--paper); border-bottom: 1px solid var(--line); font-size: .875rem; font-weight: 600; }
.pausebar > span:first-child { flex: 1 1 100%; }
.pausebar__ask { font-weight: 500; color: var(--muted); }
.zb__ms > summary { cursor: pointer; list-style: none; }
.zb__ms > summary::-webkit-details-marker { display: none; }
.zb__ms > summary u { text-underline-offset: 2px; }
.zb__ms[open] > summary u { text-decoration: none; }
.zb__ms .ms { margin: 10px 0 6px; }

/* Check-out auf dem Reiter Skills */
.h3 { margin: 6px 0 0; font-size: 1rem; font-weight: 750; display: flex; align-items: center; gap: 8px; }
.log--ci details > summary { cursor: pointer; list-style: none; }
.log--ci details > summary::-webkit-details-marker { display: none; }
.log--ci details > summary::after { content: ""; width: 7px; height: 7px; margin-left: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s; flex: none; }
.log--ci details[open] > summary::after { transform: rotate(-135deg); }
.log--ci .log__head .small { margin-left: auto; }
.log--ci details[open] > summary { margin-bottom: 6px; }
.bars--ci { gap: 6px; margin: 4px 0 8px; }
.bars--ci li { font-size: .8125rem; }

/* Journal nach Monaten */
.tb__jahr { margin: 14px 0 0; }
.tbmonat { background: none; }
.tbmonat > summary { display: grid; grid-template-columns: 1fr minmax(64px, 30%) auto; align-items: center; gap: 12px; padding: 12px 0; cursor: pointer; list-style: none; border-bottom: 1px solid var(--line); }
.tbmonat > summary::-webkit-details-marker { display: none; }
.tbmonat > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s; }
.tbmonat[open] > summary::after { transform: rotate(-135deg); }
.tbmonat__t { font-weight: 750; font-size: 1.0625rem; }
.tbmonat__n { display: block; font-weight: 500; font-size: .8125rem; color: var(--muted); }
.stack--mini { height: 10px; }
.tbmonat > .log { margin-top: 12px; }
.cal__links { display: flex; flex-wrap: wrap; gap: 8px 18px; }
/* Check-out-Verlauf: mehr Luft zwischen den Bereichen */
.log--ci .ci__t { margin-top: 18px; margin-bottom: 4px; }
.log--ci details[open] > summary + .ci__t { margin-top: 10px; }
.log--ci details[open] > summary { margin-bottom: 0; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.log--ci .bars--ci { margin: 6px 0 0; gap: 8px; }
.log--ci .ci__n { margin: 0; line-height: 1.5; }
.log--ci .ci__sub { margin: 2px 0 0; }
.goal__skh { margin: 14px 0 6px; font-size: .8125rem; font-weight: 700; }
.panel--ask { border: 1.5px solid var(--ink); }
.ask__list { margin: 4px 0 10px; padding-left: 1.2rem; display: grid; gap: 4px; font-size: .9375rem; }

/* Neuer Meilenstein mit sichtbaren Beschriftungen */
.ms-add { display: grid; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.ms-add__h { margin: 0; font-size: .875rem; font-weight: 700; }
.ms-add__f { display: grid; gap: 4px; font-size: .8125rem; color: var(--muted); font-weight: 600; }
.ms-add__f em { font-style: normal; font-weight: 500; }
.ms-add__f input { border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 10px; padding: 9px 10px; min-width: 0; font: inherit; font-size: .9375rem; font-weight: 500; }
.ms-add__row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; }
.ms-add__row input[type="date"] { width: 100%; }

/* Skill-Kategorien: aufklappbar erkennbar */
.skillcat summary { grid-template-columns: 1fr auto auto; align-items: center; }
.skillcat summary::after { content: ""; width: 8px; height: 8px; margin: 0 2px 0 6px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s; }
.skillcat[open] summary::after { transform: rotate(-135deg); }
.skillcat__n { display: block; font-size: .8125rem; font-weight: 500; color: var(--muted); }
.skillcat__intro { margin-top: -8px; }
.pitem__own--fokus { color: #fff; background: var(--accent); }

/* Skills im Fokus (aus den Zielen) */
.skilltags--fokus .delta { font-size: .75rem; margin-left: 2px; }
.skilltags .pitem__own--fokus { margin-left: 6px; }

/* ================= Desktop-Layout ================= */
.heute-grid, .heute-col { display: grid; gap: 18px; align-content: start; }
.heute-grid > .heute-col { min-width: 0; }

@media (min-width: 1024px) {
  :root { --side: 248px; }
  .shell { padding-left: var(--side); min-height: 100vh; }
  /* Seitenleiste: Logo oben, Reiter darunter */
  .top { position: fixed; left: 0; top: 0; bottom: 0; width: var(--side); border-bottom: 0; border-right: 1px solid var(--line); background: var(--paper); backdrop-filter: none; z-index: 6; }
  .top__in { max-width: none; margin: 0; padding: 28px 22px 0; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 14px; min-height: 0; }
  .top .logo { height: 26px; }
  .tabs { left: 0; right: auto; top: 128px; bottom: auto; width: var(--side); background: transparent; border-top: 0; padding: 0; z-index: 7; }
  .tabs__in { max-width: none; margin: 0; padding: 0 12px; display: flex; flex-direction: column; gap: 2px; }
  .tab { grid-auto-flow: column; justify-content: start; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; font-size: .9375rem; text-align: left; }
  .tab:hover { background: var(--ground); color: var(--ink); }
  .tab.is-active { background: var(--ground); color: var(--ink); }
  /* Inhalt */
  .main { max-width: 760px; padding: 36px 40px 80px; }
  .main--breit { max-width: 1120px; }
  .main--breit .heute-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 24px; align-items: start; }
  .demo, .pausebar, .offline { padding-inline: 40px; }
  .toast { left: calc(50% + var(--side) / 2); bottom: 28px; }
  .group__h { top: 0; margin: 0; padding-inline: 0; }
  .goals:not(.goals--done) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cal__year { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .flow__in, .flow__main { max-width: 760px; }
}
@media (min-width: 1440px) {
  :root { --side: 272px; }
  .main { padding-inline: 56px; }
}
.log__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); font-size: .875rem; }

/* Begrüßung auf der Heute-Seite und Namensfelder */
.hello { display: grid; gap: 2px; }
.hello__t { margin: 0; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.hello .date { margin: 0; }
.namefelder { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 380px) { .namefelder { grid-template-columns: 1fr; } }
.opt { font-style: normal; font-weight: 500; font-size: .8125rem; color: var(--muted); }
@media (min-width: 1024px) { .hello__t { font-size: 2rem; } }

/* Nächste Meilensteine auf der Heute-Seite */
.ms__i--heute { display: grid; grid-template-columns: 1fr auto; align-items: start; column-gap: 10px; row-gap: 2px; }
.ms__i--heute .ms__d { display: grid; justify-items: end; text-align: right; line-height: 1.3; padding-top: 2px; }
.ms__i--heute .ms__d small { font-size: .75rem; font-weight: 500; color: var(--muted); }
.ms__i--heute .ms__ziel { grid-column: 1 / -1; margin: 0 0 0 30px; font-size: .8125rem; color: var(--muted); }
.ms__i--heute .ms__ziel .linkbtn { display: inline; padding: 0; font-size: inherit; color: var(--ink); font-weight: 600; text-align: left; }
.ms__ask { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 8px 0 2px 30px; padding: 10px 12px; background: var(--ground); border-radius: 10px; font-size: .875rem; font-weight: 600; }
.ms__ask span { flex: 1 1 100%; }
.ms__link { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Kalender und Journal unter den letzten 14 Tagen */
.strip__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.navbtn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 14px; border: 0; border-radius: 12px; background: var(--paper); color: var(--ink); font: inherit; font-size: .9375rem; font-weight: 650; cursor: pointer; box-shadow: var(--shadow); }
.navbtn:hover { background: var(--line); }
.navbtn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Hilfe und Rechtliches */
.hilfe { display: grid; gap: 12px; }
.hilfe .btn { justify-self: start; }
.rlinks { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .875rem; }
.hilfe__del { padding-top: 10px; border-top: 1px solid var(--line); }
.version { margin: 0; font-size: .75rem; color: var(--muted); }
.login .rlinks { justify-content: center; margin-top: 8px; color: var(--muted); }
.recht { min-height: 100vh; }
.recht__in { max-width: 680px; margin: 0 auto; padding: 24px 16px 80px; display: grid; gap: 16px; }
.recht__s h2 { font-size: 1rem; font-weight: 750; margin: 0 0 4px; }
.recht__s p { margin: 0; line-height: 1.55; }
.recht .rlinks { margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.hinweis { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--paper); font-size: .875rem; }
.todo { background: #fff3a8; color: #1b1b19; border-radius: 3px; padding: 0 2px; }

/* Challenge auf der Heute-Seite: Überschrift, Status, Titel, eine Zeile in Worten, eine Hauptaktion */
.chall__sum { gap: 4px; }
.chall .done-badge { margin: 0; }
.chall__meta { display: grid; gap: 2px; font-size: .9375rem; }
.chall__meta p { margin: 0; }
.chall__lbl { color: var(--muted); }
.chall__sum .chall__more { justify-self: start; margin-top: 10px; text-decoration: none; }
.chall[open] .chall__sum .chall__more { box-shadow: none; padding-left: 0; padding-right: 0; text-decoration: underline; text-underline-offset: 3px; }
.chall--done .chall__t { color: var(--ink); }
.chall--done .note { margin: 4px 0 0; }
.chall__streak { display: inline-flex; align-items: center; gap: 4px; font-size: .875rem; font-weight: 700; color: var(--accent); }
.chall__fl svg { width: 12px; height: 15px; display: block; }
.chall__streak .chall__fl { color: var(--accent); font-size: inherit; }
.chall .done-badge, .chall__sum .done-badge { order: 0; }

/* Kickoff: Meilensteine zum ersten Ziel */
.kms { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 6px; }
.kms li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: var(--paper); }

/* Heute tagsüber: Tageseintrag als schmale Zeile, Hinweis zum Nachtragen */
.tb-nach .small { margin: 0; }
.tb-nach { padding-top: 12px; padding-bottom: 12px; }

/* Heutige Challenge: Akzentfarbe, damit sie neben dem Tageseintrag klar als eigene Sache erkennbar ist */
.chall__tabs { margin: 6px 0 0; }
.chall__det { display: grid; gap: 10px; }
/* Flammen mit Beschriftung darunter, wie die Farbkreise beim Tageseintrag */
.rate__flames { gap: 10px; }
.flamebtn { width: auto; height: auto; min-width: 84px; padding: 10px 8px 8px; display: grid; gap: 4px; justify-items: center; }
.flamebtn__f { display: flex; gap: 1px; }
.flamebtn__f svg { width: 18px; height: 24px; }
.flamebtn__t { font-size: .8125rem; color: var(--muted); font-weight: 500; }
.flamebtn.is-on .flamebtn__t { color: var(--ink); font-weight: 650; }
/* Flammen leicht orange, beim Darüberfahren und gewählt in voller Farbe; Fläche bleibt grau */
.chall .flamebtn { color: color-mix(in srgb, var(--accent) 40%, var(--ground)); transition: color .15s; }
.chall .flamebtn:hover, .chall .flamebtn.is-on { color: var(--accent); }
.rate--kurz .small { margin: 0; }
.chall__tabs + .chall__body { border-top: 0; padding-top: 4px; }

/* Challenge-Kasten ruhiger und im gleichen Maß wie der Tageseintrag */
.chall { gap: 12px; }
.chall .chall__sum { gap: 6px; }
.chall:not(.chall--done) .chall__t { font-size: 1.35rem; line-height: 1.15; margin-top: 6px; }
.chall .rate { border-top: 0; padding-top: 0; margin-top: 8px; gap: 14px; }
.chall .rate legend { font-size: .9375rem; font-weight: 650; }
.chall .flamebtn__t { font-size: .75rem; font-weight: 400; }
.chall .flamebtn.is-on .flamebtn__t { font-weight: 650; }
/* Umschalter zurückhaltend: helle Fläche statt schwarzer Pille */
.chall__tabs .segtab { font-size: .875rem; padding: 6px 10px; }
.chall__tabs .segtab.is-on { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgb(27 27 25 / .12); }
/* Aufgabe und Details in derselben Schrift wie die Texte im Tageseintrag */
.chall__body .card__task, .chall__det p { font-size: .9375rem; font-weight: 400; color: var(--ink); line-height: 1.55; margin: 0; }
.chall__det .card__why { font-weight: 650; color: var(--accent); }
.chall .chall__body { border-top: 0; padding-top: 0; }

/* Netzwerk-Kasten (Weekly Pad): Kontakte der Woche */
.nw__l { list-style: none; margin: 0; padding: 0; display: grid; }
.nw__i { display: grid; grid-template-columns: 1fr auto; align-items: start; column-gap: 10px; row-gap: 2px; padding: 10px 0; border-top: 1px solid var(--line); }
.nw__i:first-child { border-top: 0; padding-top: 2px; }
.nw__i .check span { font-weight: 600; }
.nw__i.is-done .check span { color: var(--muted); text-decoration: line-through; }
.nw__aendern { color: var(--muted); }
.nw__abs, .nw__i .ms__ziel { grid-column: 1 / -1; margin: 0 0 0 30px; font-size: .875rem; color: var(--muted); }
.nw__i .ms__ziel { font-size: .8125rem; }
.nw__i--leer, .nw__i--form { display: block; }
.nw__neu { width: 100%; text-align: left; background: none; border: 1.5px dashed var(--line); border-radius: 12px; padding: 10px 12px; font: inherit; font-size: .9375rem; color: var(--muted); cursor: pointer; }
.nw__neu::before { content: "+ "; }
.nw__neu:hover { color: var(--ink); border-color: var(--muted); }
.nw__form { display: grid; gap: 10px; }
.nw__plus { justify-self: start; }
.nw__frage { margin: 0; font-weight: 650; font-size: .9375rem; }
.nw__i--leer { border-top: 0; padding: 4px 0; }
.nw__i--leer:first-child { padding-top: 0; }
.nw__i--form + .nw__i--leer, .nw__i:not(.nw__i--leer) + .nw__i--leer { margin-top: 6px; }

/* Zähler wie die Serie bei der Challenge: orange, fett, mit Symbol */
.nw__zahl { margin: 0; display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--accent); white-space: nowrap; font-variant-numeric: tabular-nums; font-size: .875rem; }
.nw__ic svg { display: block; width: 17px; height: 13px; }
.nw__fuss { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.nw__wer { margin: 0; font-weight: 700; }
.nw__ds { margin-top: 18px; }
/* Mein Netzwerk */
.nw__sort { margin: 0 0 10px; gap: 10px; }
.nw__sort select { width: auto; flex: 1; max-width: 300px; }
.nwk { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.nwk__i { padding: 0; gap: 0; }
.nwk__kopf { width: 100%; text-align: left; background: none; border: 0; padding: 16px 18px; font: inherit; color: inherit; cursor: pointer; display: grid; grid-template-columns: 1fr auto; column-gap: 10px; row-gap: 2px; }
.nwk__name { font-weight: 700; }
.nwk__meta { grid-column: 1; font-size: .875rem; color: var(--muted); }
.nwk__dots { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: flex; gap: 4px; }
.nwk__body { display: grid; gap: 12px; padding: 0 18px 16px; }
.nwk__verlauf { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: 12px; }
.nwk__verlauf li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; }
.nwk__verlauf .dot { margin-top: 6px; }
.nwk__verlauf p { margin: 0; }
.nwk__d { font-size: .9375rem; }
.nwk__verlauf .ms__ziel { margin: 2px 0 0; }
#kontakt-neu { grid-template-columns: 1fr auto; align-items: end; }
.nw__suche { display: block; margin: 0 0 10px; }
.nw__suche input { width: 100%; border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 12px; padding: 11px 13px; font: inherit; }
.nwk + .more { margin-top: 10px; }
.nwk .own__confirm { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; }
.own__confirm .linkbtn { white-space: nowrap; }
/* Netzwerk Stufe 2: Vorschläge, „lange nicht gesprochen“, Bezug im Ziel */
.nw__vor { display: grid; gap: 8px; }
.nw__lange { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 10px 12px; border-radius: 12px; background: var(--ground); }
.nw__lange .small { margin: 0; flex: 1 1 100%; }
.zn { gap: 10px; }
.zn__zahl { margin: 0; font-weight: 650; font-size: .9375rem; }
.zn .nwk__verlauf { border-top: 0; padding-top: 0; }
.nw__lange .linkbtn { flex: none; width: auto; }
.nw .kicker { white-space: nowrap; }
@media (max-width: 460px) { .nw__zw { display: none; } }
.tb__leit .tb__leitk { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: -2px; }
.tb .tb__leit { margin-top: 6px; }

/* Handy: Hauptknopf über die volle Breite, „Abbrechen“ als ruhiger Textlink darunter (statt zufälligem Umbruch) */
@media (max-width: 480px) {
  .actions:has(> .btn--abbr) > .btn:not(.btn--ghost) { flex: 1 1 100%; }
  .actions > .btn--abbr { flex: 1 1 100%; background: none; box-shadow: none; padding: 6px 0; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
  .actions > .btn--abbr:hover { background: none; }
  .actions:has(> .btn--abbr) > .linkbtn { flex: 1 1 100%; text-align: center; }
}

/* Konto-Knopf (Initialen) oben rechts; Paketname auf dem Handy nicht im Kopf, sondern auf der Challenges-Seite */
.tabs__in { grid-template-columns: repeat(4, 1fr); }
.avatar { background: none; border: 0; padding: 0; font: inherit; color: var(--ink); cursor: pointer; display: flex; align-items: center; gap: 10px; }
.avatar__k { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--paper); font-size: .8125rem; font-weight: 700; letter-spacing: .02em; flex: none; }
.avatar__k svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.avatar.is-active .avatar__k { box-shadow: 0 0 0 2px var(--ground), 0 0 0 4px var(--accent); }
.avatar__t { display: none; }
.pak-aktiv { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: -4px 0 14px; font-size: .875rem; color: var(--muted); }
.pak-aktiv--fuss { margin: 20px 0 0; justify-content: center; }
@media (max-width: 1023px) { .paks-top { display: none; } }
@media (min-width: 1024px) {
  .top__in { height: 100%; padding-bottom: 22px; box-sizing: border-box; }
  .avatar { margin-top: auto; width: 100%; padding: 8px 10px; border-radius: 12px; font-weight: 600; font-size: .9375rem; color: var(--muted); }
  .avatar:hover, .avatar.is-active { background: var(--ground); color: var(--ink); }
  .avatar.is-active .avatar__k { box-shadow: none; }
  .avatar__k { width: 32px; height: 32px; }
  .avatar__t { display: inline; }
}

/* Aufgaben der Woche und „Heute dran“ */
.tabs__in { grid-template-columns: repeat(5, 1fr); }
.auf__l { list-style: none; margin: 0; padding: 0; display: grid; }
.auf__i { display: grid; grid-template-columns: 1fr; align-items: start; row-gap: 6px; padding: 10px 0; border-top: 1px solid var(--line); }
.auf__l > .auf__i:first-child { border-top: 0; }
.auf__i .ms__ziel { margin: 0 0 0 30px; font-size: .8125rem; color: var(--muted); }
.auf__i--form { display: block; }
.auf .nw__neu { margin-bottom: 2px; }
.auf__erl { border-top: 1px solid var(--line); padding-top: 10px; }
.auf__erl summary { cursor: pointer; font-weight: 650; font-size: .9375rem; color: var(--muted); }
.seg3 { grid-template-columns: repeat(3, 1fr); margin: 0; }
.seg3 .segtab { text-align: center; cursor: pointer; }
/* „Wann?“ bei Aufgaben und Netzwerk (13.10.2026): „Diese Woche“ in einer Zeile */
.seg3 .segtab { white-space: nowrap; padding-inline: 4px; }
.seg3 .segtab.is-on { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgb(27 27 25 / .12); }
.dran__fuss { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 10px; }
.dran__nw { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; color: var(--muted); }
.dran__nw .nw__ic { color: var(--accent); }

/* Aufgabenzeile: Status-Kreis · Titel (antippen = ändern) · Sonne (für heute) · Priorität A/B/C */
.auf__z { display: flex; align-items: flex-start; gap: 10px; }
.auf__st { flex: none; width: 24px; height: 24px; padding: 0; margin-top: 0; border: 0; background: none; color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.auf__st svg { width: 22px; height: 22px; display: block; }
.auf__st.st--offen { color: var(--muted); }
.auf__st.st--offen:hover { color: var(--ink); }
.auf__t { flex: 1; min-width: 0; text-align: left; background: none; border: 0; padding: 1px 0 0; font: inherit; font-size: .9375rem; color: var(--ink); cursor: pointer; overflow-wrap: anywhere; line-height: 1.45; }
.auf__t:hover { text-decoration: underline; text-underline-offset: 3px; }
.auf__i.is-done .auf__t { color: var(--muted); text-decoration: line-through; }
.auf__sonne { flex: none; width: 26px; height: 24px; padding: 0; border: 0; background: none; color: var(--line); cursor: pointer; display: grid; place-items: center; }
.auf__sonne svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.auf__sonne:hover { color: var(--muted); }
.auf__sonne.is-on { color: var(--ink); }
.auf__sonne.is-on svg circle { fill: currentColor; }
.auf__prio { flex: none; width: 22px; height: 22px; margin-top: 1px; padding: 0; border: 0; background: none; font-family: inherit; cursor: pointer; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; font-weight: 800; line-height: 1; }
.auf__prio--1 { background: var(--ink); color: var(--paper); }
.auf__prio--2 { box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); }
.auf__prio--3 { box-shadow: inset 0 0 0 1.5px var(--line); color: var(--muted); }
.auf__i .ms__ziel { margin: 0 0 0 34px; }
.auf__leg { margin: 0; font-size: .75rem; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; }
.auf__li { display: inline-grid; place-items: center; width: 14px; height: 14px; color: var(--muted); vertical-align: middle; }
.auf__li svg { width: 13px; height: 13px; }
.auf__li--s svg { fill: none; stroke: currentColor; stroke-width: 2; }
.dran__k { margin: 4px 0 -4px; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.dran__p { flex: none; width: 18px; height: 22px; display: grid; place-items: center; color: var(--muted); }
.dran__p svg { width: 17px; height: 13px; }
.dran__leer { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: 0; }
.dran .nw__l .auf__i .ms__ziel { margin-left: 62px; }
.dran__fuss { justify-content: flex-end; }
.dran__kopf { align-items: center; margin-top: 2px; }
.dran__kopf .panel__h { margin: 0; }
.dran .auf__l + .dran__kopf, .dran .small + .dran__kopf { margin-top: 10px; }
.nw__ic--h svg { width: 14px; height: 14px; display: block; }
.auf__dat { flex: none; font-size: .75rem; color: var(--muted); padding-top: 3px; }
.auf + .auf { margin-top: 12px; }
.auf__erl .auf__l { margin-top: 6px; }

/* 14 Tage und Kalender/Journal innerhalb der Tageseintrag-Kachel */
.tb > .strip { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 4px; }
.tb .strip__nav { margin-top: 4px; }
.tb .navbtn { background: var(--ground); box-shadow: none; padding: 9px 12px; font-size: .875rem; }
.tb .navbtn:hover { background: var(--line); }
.tb .navbtn svg { width: 18px; height: 18px; }

/* Einheitliche Kachel-Knöpfe (wie Kalender/Journal) */
.panel .navbtn { background: var(--ground); box-shadow: none; padding: 9px 12px; font-size: .875rem; }
.panel .navbtn:hover { background: var(--line); }
.panel .navbtn svg { width: 18px; height: 18px; }
.navbtn svg [fill="currentColor"] { fill: currentColor; stroke: none; }
.navbtn--voll { width: 100%; margin-top: 2px; }
.nw__absz { margin-left: 62px !important; }
.zn .auf__erl { border-top: 0; padding-top: 0; }
.nw .nw__neu { margin-bottom: 2px; }

/* Challenges-Seite im Stil der übrigen Kacheln */
.segtabs--hell { background: var(--line); }
.segtabs--hell .segtab.is-on { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgb(27 27 25 / .12); }
.filter.is-on { background: var(--line); border-color: var(--line); color: var(--ink); }
.filter.is-on span { color: var(--muted); opacity: 1; }
.panel.group { gap: 6px; margin-top: 14px; }
.panel.group .chall__top { align-items: center; margin-bottom: 4px; }
.panel.group .panel__h { margin: 0; }
.panel.group .plist { gap: 0; }
.panel.group .plist > li + li { border-top: 1px solid var(--line); }
.panel.group .pitem { background: none; border-radius: 0; }
.panel.group .pitem summary { padding: 11px 0; }
.panel.group .pitem__body { padding: 4px 0 14px 32px; }
.panel.group .pitem[open] summary { border-bottom: 0; }
.panel.group .more-row { margin-top: 6px; }
.nw__neu--seite { background: var(--paper); margin-top: 14px; }
/* Challenge-Liste: Details einheitlich, Zähler hinter dem Namen */
.pitem__info { font-size: .9375rem; color: var(--ink); }
.pitem__n { display: inline-flex; vertical-align: 1px; margin-left: 4px; font-size: .8125rem; }
.chall__nav { margin-top: 14px; }
.chall__body > .chall__nav { margin-top: 0; }
/* Flammen in der Challenge: blass orange hinterlegt, damit sie sich von den grauen Knöpfen abheben */
.chall .flamebtn { background: color-mix(in srgb, var(--accent) 9%, var(--paper)); color: color-mix(in srgb, var(--accent) 45%, var(--paper)); transition: color .15s, background .15s; }
.chall .flamebtn:hover, .chall .flamebtn.is-on { background: color-mix(in srgb, var(--accent) 15%, var(--paper)); color: var(--accent); }
/* Challenge-Knöpfe: nebeneinander, wenn beide Texte in eine Zeile passen, sonst untereinander */
.chall__nav { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.chall__nav .navbtn { flex: 1 1 0; min-width: max-content; white-space: nowrap; padding-inline: 10px; }
/* Symbole der Oberkategorien */
.katico { display: inline-flex; vertical-align: -3px; margin-right: 8px; color: var(--ink); }
.katico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.panel__h .katico svg { width: 20px; height: 20px; }
.bars__n .katico { vertical-align: -4px; }
.auf > .auf__leg { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line); }
/* Linie unter der letzten Aufgabe mit demselben Abstand wie zwischen den Aufgaben */
.auf > .auf__l + .auf__erl, .auf > .auf__l + .auf__leg { margin-top: -12px; }
/* Challenge-Liste: kleiner Pfeil zeigt, dass die Challenge aufklappt */
.panel.group .pitem summary { grid-template-columns: 22px 1fr auto auto; }
.panel.group .pitem summary::after { content: ""; width: 6px; height: 6px; margin: 0 3px 3px 2px; border-right: 1.8px solid var(--muted); border-bottom: 1.8px solid var(--muted); transform: rotate(45deg); transition: transform .2s; }
.panel.group .pitem[open] summary::after { transform: rotate(-135deg); margin-bottom: -3px; }
.auf__li--s svg circle { fill: currentColor; }
.auf__keinziel { margin: 0; }
/* Heute, Kachel „Woche“: kleiner Plus-Knopf neben Zähler zum Eintragen */
.dran__re { display: flex; align-items: center; gap: 10px; }
.dran__plus { width: 30px; height: 30px; border: 0; border-radius: 999px; background: var(--ground); color: var(--ink); display: grid; place-items: center; cursor: pointer; padding: 0; flex: none; }
.dran__plus:hover { background: var(--line); }
.dran__plus svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* Willkommen: Auswahl der Erweiterungen */
.erw__w span { line-height: 1.4; }
.tabs__in { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
/* Ausweichmöglichkeit unter der Aufgabe */
.chall__aus { margin: 6px 0 0; font-size: .875rem; line-height: 1.45; color: var(--muted); }
/* Lernpfade */
.pfad__zeile { margin: 2px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: .8125rem; font-weight: 650; color: var(--accent); }
.pfad__pkt { display: inline-flex; gap: 4px; }
.pfad__pkt i { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 22%, var(--paper)); }
.pfad__pkt i.is-on { background: var(--accent); }
/* Lernpfade: abgeschlossen (Farbecke in der Farbe der Bewertung am Ende) und vorzeitig beendet (grau) */
.pfad--fertig, .pfad--beendet { position: relative; overflow: hidden; }
/* Ecke größer als im Verlauf, weil die Kachel stärker abgerundet ist */
.pfad--fertig .corner, .pfad--beendet .corner { border-width: 34px 34px 0 0; }
/* Mehr Innenabstand in den Lernpfad-Kacheln, damit die Farbecke Luft zur Überschrift hat (Sebastian, 08.10.2026) */
.pfadraster .pfad { padding: 26px 24px 22px; }
.corner--grau { --c: var(--muted); opacity: .45; }
.pfad__status { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin: 2px 0 8px; font-size: .875rem; font-weight: 650; }
.pfad__status > span:last-child { display: inline-flex; align-items: center; gap: 5px; }
.pfad__status svg { width: 14px; height: 14px; }
.pfad__status--ab { color: var(--muted); font-weight: 500; }
.pfad { display: grid; gap: 10px; }
.pfad p { margin: 0; }
.pfad__schritte { margin: 0; padding-left: 22px; display: grid; gap: 4px; font-size: .9375rem; }
.pfad__schritte li.is-done { color: var(--muted); text-decoration: line-through; }
.pfad__det summary { cursor: pointer; font-weight: 650; font-size: .9375rem; color: var(--muted); }
.pfad__det[open] summary { margin-bottom: 6px; }
.pfad__ende { justify-self: start; }
.pfad-ende .pfad__pkt { margin-bottom: 4px; }
.segtabs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
.pfad--aktiv .kicker { color: var(--accent); }
/* Verlauf: Lernpfade */
.log__pfad { margin: 2px 0 0; font-size: .8125rem; font-weight: 650; color: var(--accent); }
.log__i--pfad .log__head { display: flex; justify-content: space-between; align-items: center; }
.log__ico { display: grid; color: var(--ink); }
.log__ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.reset__frage { display: grid; gap: 8px; }
.reset__frage p { margin: 0; }
.reset__knoepfe { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.pfad-ende .kicker { color: var(--accent); }
/* Festigen */
.festigen { margin: 10px 0 0; font-size: .9375rem; line-height: 1.55; color: var(--ink); }
.fest__lbl { color: var(--accent); font-weight: 700; }
.festigen .fest__link { display: inline; padding: 0; font-size: inherit; color: var(--accent); }
.festigen--wahl { display: grid; gap: 10px; }
.festigen--wahl p { margin: 0; }
.fest__zeile { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
.fest__stepper { display: inline-flex; align-items: center; gap: 4px; background: var(--brand-soft); border-radius: 999px; padding: 4px; }
.fest__pm { appearance: none; border: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--paper); color: var(--ink); font: inherit; font-size: 1.15rem; font-weight: 700; line-height: 1; cursor: pointer; }
.fest__pm:disabled { opacity: .35; cursor: not-allowed; }
.fest__wert { min-width: 4.6em; text-align: center; font-weight: 700; }
.fest__zu { padding: 0; font-size: inherit; }
/* Festigen beenden, Challenges pausieren */
.fest__endez { margin: 2px 0 0; }
.fest__endez .fest__ende { padding: 0; font-size: .8125rem; font-weight: 500; color: var(--muted); }
/* Wiederholen: Tagesauswahl über die ganze Breite, darunter Starten und Abbrechen nebeneinander */
.festigen--wahl .fest__stepper { display: flex; justify-content: space-between; }
.festigen--wahl .fest__zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.festigen--wahl .fest__zeile .btn { width: 100%; }
.fest__frage { margin-top: 12px; }
/* Mehr Abstand zwischen der Flammen-Bewertung und den Knöpfen darunter, damit die Bewertung nicht zu den Knöpfen gehört */
.chall__body > .rate--kurz { margin-bottom: 16px; }
/* Check-out-Kasten auf Heute: Stand der Kategorien, kompakt */
.ci__stand { display: grid; gap: 8px; margin: 12px 0 14px; }
.ci__stand .small { margin: 0; }
/* Alle Zeilen teilen sich die Spalten, damit die Balken bündig beginnen */
.bars--mini { grid-template-columns: max-content minmax(36px, 1fr) 2.2ch 3.2ch; gap: 10px 8px; align-items: center; font-size: .8125rem; }
.bars--mini li { display: contents; }
.bars--mini .bars__n { white-space: nowrap; }
.bars--mini .katico { margin-right: 6px; }
.bars--mini .katico svg { width: 16px; height: 16px; }
.panel--cta .ci__stand .katico { color: inherit; }
.bars--mini .bars__t { height: 8px; }
.panel--cta .ci__stand .bars__t { background: rgba(255,255,255,.18); }
.panel--cta .ci__stand .bars__f { background: currentColor; }
.panel--cta .ci__stand .muted { color: inherit; opacity: .8; }
/* Bewertung tagsüber: Erklärzeile unter der Frage; Hinweis oben in der Challenge-Box */
.rate .rate__hint { margin: -4px 0 12px; line-height: 1.45; }
.chall__passt { margin: -4px 0 0; }
/* Feine Linie zwischen Aufgabe/Details und der Bewertung, damit die Bewertung als eigener Schritt erkennbar ist */
.chall .chall__body > .rate { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 6px; }
.tb .tb__hint { margin: -10px 0 0; line-height: 1.45; }
/* Feine Linie unter den grauen Hinweiszeilen: dazwischen liegt der Bereich, in dem man etwas antippt */
.chall__passt, .tb .tb__hint { border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.chall__passt { margin-bottom: 4px; }
/* „Dein Tag“ mit Kästchen: etwas mehr Abstand zur Überschrift (08.10.2026, Sebastian) */
.chall__passt:has(.tagzeile) { margin-top: 4px; }
.tb .tb__hint { margin-bottom: 4px; }
.chall__trenn { border-bottom: 1px solid var(--line); margin: 8px 0 4px; }
/* Legende unter den 14 Tagen: Punkt mittig zur ersten Zeile, auch wenn der Text umbricht */
.strip__leg { align-items: flex-start; line-height: 1.5; }
.strip__leg .strip__c { flex: none; margin-top: calc(.75em - 2.5px); }
/* Ausgeschaltete Erweiterung im Ziel: ausgegraut mit Hinweis */
/* Ziel: Überschrift „Aufgaben“/„Netzwerk“ mit Plus rechts; Formular direkt darunter */
.zielkopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.zielkopf .h2 { margin-bottom: 0; }
.zielform { list-style: none; margin: 0; padding: 0; }
.zielkopf .dran__plus { background: var(--paper); box-shadow: var(--shadow); }
.zielform .auf__l { margin: 0; } .zielform .nw__ds { margin: 0; }
.zielform .nw__form { margin-bottom: 0; } .zielform .nw__i--form, .zielform .auf__i--form { padding-bottom: 0; border-bottom: 0; }
/* Zwei Spalten am Computer für alle breiten Reiter (Ziele, Skills, Challenges); auf dem Handy untereinander */
.spalten, .spalte, .raster { display: grid; gap: 18px; align-content: start; }
.spalten > .spalte, .raster > * { min-width: 0; }
.raster > .group { margin-top: 0; }
@media (min-width: 1024px) {
  .main--breit .spalten { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
  .main--breit .raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 24px; align-items: start; }
  .main--breit .goals:not(.goals--done) { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .main--breit .spalte > .h2:first-child { margin-top: 0; }
}
.zielende { display: grid; gap: 18px; justify-items: start; }
.zielende > .btn--wide, .zielende > .panel { justify-self: stretch; }
@media (min-width: 1024px) { .main--breit .zielende { width: calc(50% - 12px); } }
/* Ziel: Meilensteine, Aufgaben, Netzwerk als Kacheln mit Überschrift darin (wie Heute/Woche); Personen als Zeilen */
.zn > .small.muted, .panel > .chall__top + .small.muted { margin: -6px 0 0; }
.zn .nwk { gap: 0; }
.zn .nwk__i { border-top: 1px solid var(--line); }
.zn .nwk__i:first-child { border-top: 0; }
.zn .nwk__kopf { padding: 12px 0; }
/* Kachel mit Zeilen: Einträge, die sonst eigene Kacheln wären, stehen als Zeilen mit feinen Linien in einer Kachel */
.zeilen__l { display: grid; gap: 0; list-style: none; margin: 0; padding: 0; }
.zeilen__l > .pitem, .zeilen__l > .log__i { background: none; border-radius: 0; box-shadow: none; border-top: 1px solid var(--line); }
.zeilen__l > :first-child { border-top: 0; }
.zeilen__l > .pitem summary { padding-inline: 0; }
.zeilen__l > .log__i { padding-inline: 0; }
.zeilen > .more { margin-top: 4px; }
.zeilen__l > .skillcat .skilllist { padding-inline: 0; }
/* Erreichte Ziele: Kachel, Ziele als Zeilen */
.archiv.panel { margin-top: 0; }
.archiv.panel > summary { padding: 0; }
.archiv .zeilen__l { margin-top: 6px; }
.archiv .zeilen__l > li { border-top: 1px solid var(--line); }
.archiv .zeilen__l > li:first-child { border-top: 0; }
.archiv .zeilen__l .goal { background: none; box-shadow: none; border-radius: 0; padding-inline: 0; }
.goal--neu { background: transparent; box-shadow: none; border: 1px dashed var(--line); place-content: center; text-align: center; font-weight: 700; min-height: 72px; height: 100%; }
.goal--neu:hover { background: var(--paper); }
.goals > li { display: grid; }
.archiv.panel { display: block; }
/* Skills: Kategorien als Balken-Zeilen, antippen klappt die einzelnen Skills auf */
.skillcat__tipp { margin: 2px 0 6px; }
.skillcat--bar summary { grid-template-columns: minmax(0, 11rem) 1fr 2.2ch 3.2ch auto; gap: 10px; font-size: .875rem; padding-block: 11px; }
.skillcat--bar summary b { text-align: right; }
.skillcat--bar summary::after { margin: 0 2px 0 0; }
@media (max-width: 480px) { .skillcat--bar summary { grid-template-columns: minmax(0, 8.5rem) 1fr 2.2ch 3.2ch auto; gap: 8px; } }

/* ===== Einheitliche Schrift je Funktion (01.10.2026) =====
   Seitentitel 1.6rem/2rem 800 · Kachel-Überschrift 1.05rem 750 · Erklärtext unter der Überschrift .875rem grau
   · Eintragstitel in Listen .9375rem 600 · Datum/Metazeile .8125rem grau · Kicker .75rem 700 */
.h { font-size: 1.6rem; letter-spacing: -0.02em; line-height: 1.15; }
@media (min-width: 1024px) { .h { font-size: 2rem; } }
.panel .sub { font-size: .875rem; }
.panel .sub + .skilltags, .panel .sub + .leer { margin-top: 8px; }
.pitem__t, .log__t { font-size: .9375rem; font-weight: 600; }
.goal__t { font-size: 1.05rem; }
.goal--neu { border: 1.5px dashed var(--line); font-size: .9375rem; font-weight: 400; color: var(--muted); }
.goal--neu:hover { color: var(--ink); border-color: var(--muted); }

/* „Noch keine …“-Hinweise app-weit: Hinweisfeld, kursiv, halbfett, abgesetzt vom Erklärtext */
.leer, .empty { margin: 10px 0 0; padding: 12px 14px; border: 1.5px dashed var(--line); border-radius: 12px; background: var(--ground); color: var(--ink); font-size: .9375rem; font-style: italic; font-weight: 500; line-height: 1.45; }
.empty { background: var(--paper); margin-top: 14px; }
.leer .pick { font-style: normal; }
.dran__leer.leer { margin-top: 10px; }
.auf__keinziel.leer { margin-top: 4px; padding: 8px 12px; }

/* Challenges, Alle: mehr Abstand unter der Kategorie-Überschrift */
.panel.group .chall__top { margin-bottom: 10px; }
/* Filter und Sortieren in einer Zeile, getrennt durch einen senkrechten Strich */
.ctrl__zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.ctrl__zeile .sortsel { margin: 0; }
@media (min-width: 700px) { .ctrl__zeile .sortsel { padding-left: 14px; border-left: 1px solid var(--line); } }

/* Verlauf: Monat als graue Leiste, jede Challenge als eigene Kachel mit Rand (Farbecke sichtbar) */
.vl .tbmonat { margin-top: 10px; }
.vl .tbmonat > summary { background: var(--ground); border: 0; border-radius: 12px; padding: 10px 14px; }
.vl .tbmonat > .log { margin-top: 10px; gap: 10px; }
.vl .log__i { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 12px 14px 12px 18px; }
.vl .tb__jahr { margin: 18px 0 0; }
@media (min-width: 1024px) { .main--breit .vl .tbmonat > .log { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* Zwei Kacheln nebeneinander gleich hoch: Inhalt oben, Fußzeile unten (statt gestreckter Zeilenabstände) */
.vl .log__i { display: flex; flex-direction: column; gap: 2px; }
.vl .log__i > .log__foot { margin-top: auto; }
.vl .log__i > :has(+ .log__foot) { margin-bottom: 8px; }
.skillcat__tipp { margin-top: -6px; }
.log__foot .linkbtn { white-space: nowrap; }
/* Im Ziel: geöffnetes Formular (Meilenstein, Aufgabe, Person) gleich gesetzt, feine Linie darunter statt darüber */
.zf { margin-top: 12px; padding-bottom: 16px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.zf .ms-add { margin-top: 0; padding-top: 0; border-top: 0; }
.zf > p:last-child { margin-bottom: 0; }
/* Lernpfade: Vorschläge als Bubbles (Heute zum Starten, Skills/Hebel zum Ansehen) */
.pfadleer__h { margin: 12px 0 6px; }
.pfadleer__l { display: flex; flex-wrap: wrap; gap: 6px; }
.pfadleer .navbtn--voll { margin-top: 14px; }
.hebel__pfh { margin: 14px 0 6px; }
.pfad--ziel { outline: 2px solid var(--brand-ink); outline-offset: -2px; }
.pfadleer__l .pick { font-size: .875rem; padding: 6px 12px; font-weight: 600; }
.dran__kopf + .zf { margin-top: 2px; }

/* ===== Trainingsstand aus den Challenges (03.10.2026) ===== */
/* Plus hinter dem Skill-Check-Wert: Zuwachs aus den Challenges, eine Nachkommastelle */
.bars--skills li { grid-template-columns: minmax(0, 11rem) 1fr 2.2ch 4.4ch; }
.bars--mini { grid-template-columns: max-content minmax(36px, 1fr) 2.2ch 4.4ch; }
.skillcat--bar summary { grid-template-columns: minmax(0, 11rem) 1fr 2.2ch 4.4ch auto; }
@media (max-width: 480px) { .skillcat--bar summary { grid-template-columns: minmax(0, 8.5rem) 1fr 2.2ch 4.4ch auto; } }
.delta--tr.is-up { color: var(--z4); }
/* Balken: Skill-Check-Wert dunkel, Zuwachs aus den Challenges hell dahinter */
.bars__t, .meter { display: flex; }
.bars__f, .meter > span { flex: none; }
.bars__p, .meter > .meter__p { display: block; flex: none; height: 100%; background: var(--z3); border-radius: 0 999px 999px 0; }
.bars__t .bars__f:not(:last-child), .meter > span:not(:last-child) { border-radius: 999px 0 0 999px; }
.skillcat__erkl { margin: -4px 0 8px; }
/* Nach der Bewertung: „Das hat's gebracht“ */
.gebracht { margin: 14px 0 4px; padding: 12px 14px; border-radius: 12px; background: var(--ground); }
.gebracht__h { margin: 0 0 8px; font-size: .875rem; font-weight: 700; }
.gebracht__l { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 12rem) 1fr 4ch 4.4ch; gap: 8px 10px; align-items: center; font-size: .875rem; }
.gebracht__l li { display: contents; }
.gebracht__l .bars__t { height: 8px; background: var(--paper); }
.gebracht__l .delta { font-size: .875rem; text-align: right; }
.gebracht__f { margin: 8px 0 0; }
@media (max-width: 480px) { .gebracht__l { grid-template-columns: minmax(0, 8.5rem) 1fr 4ch 4.4ch; } }
.gebracht__l b { text-align: right; font-variant-numeric: tabular-nums; }

/* ===== Skill Check als Häufigkeit (03.10.2026): sechs Kästchen je Aussage, außen beschriftet, gewähltes Wort darunter ===== */
.aus__l { list-style: none; margin: 4px 0 0; padding: 0; display: grid; }
.aus { padding: 14px 0 10px; border-top: 1px solid var(--line); }
.aus:first-child { border-top: 0; padding-top: 6px; }
.aus__t { margin: 0 0 10px; font-size: .9375rem; line-height: 1.45; }
.aus__skala { display: grid; grid-template-columns: auto repeat(6, minmax(0, 1fr)) auto; align-items: center; gap: 6px; }
.aus__end { font-size: .75rem; color: var(--muted); white-space: nowrap; }
.aus__b { height: 34px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--paper); cursor: pointer; padding: 0; }
.aus__b:hover { border-color: var(--muted); }
.aus__b.is-on { background: var(--brand-ink); border-color: var(--brand-ink); }
.aus__w { margin: 6px 0 0; text-align: center; font-size: .8125rem; font-weight: 650; min-height: 1.2em; }
@media (max-width: 420px) { .aus__skala { gap: 4px; } .aus__end { font-size: .6875rem; } .aus__b { height: 30px; } }
/* Schrittverlauf der Kategorien im Skill Check */
.sk__steps { padding: 0; margin: 4px 0 16px; max-width: none; }
/* Späterer Check: grau der aktuelle Stand */
.aus__b.is-letzt { background: var(--line); border-color: var(--line); }
.aus__w.is-vor { color: var(--muted); font-weight: 500; }
/* Späterer Skill Check (04.10.2026): eine Zeile je Skill, antippen klappt Aussage und Kästchen auf */
.skz__l { list-style: none; margin: 4px 0 0; padding: 0; }
.skz { border-top: 1px solid var(--line); }
.skz:first-child { border-top: 0; }
.skz__k { width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 0; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.skz__n { flex: 1; min-width: 0; display: grid; gap: 4px; justify-items: start; font-size: .9375rem; }
.skz__n .pitem__own { margin: 0; }
.skz__z { width: 2.6em; text-align: right; font-variant-numeric: tabular-nums; }
.skz__p { width: 3.6em; text-align: right; font-size: .875rem; white-space: nowrap; }
.skz__a { font-size: .75rem; color: var(--muted); }
.skz__pf { color: var(--muted); transition: transform .15s; }
.skz.is-auf .skz__pf { transform: rotate(90deg); }
.skz__d { padding: 0 0 12px; }
/* Morgenfrage „Wie wird dein Tag?“ (05.10.2026) */
.tagfrage__l { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.chall__aus.is-heute { color: var(--ink); }
/* Meine Routinen (05.10.2026) */
.rt__i { flex-wrap: wrap; }
.rt__haupt { flex: 1; min-width: 0; display: flex; gap: 10px; align-items: flex-start; background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; font-size: .9375rem; }
.rt__box { width: 20px; height: 20px; margin-top: 2px; flex: none; border: 1.5px solid var(--line); border-radius: 5px; background: var(--paper); display: grid; place-items: center; }
.rt__boxbtn { background: none; border: 0; padding: 0; cursor: pointer; display: flex; }
.rt__boxbtn:hover .rt__box { border-color: var(--muted); }
.rt__box.is-an { background: var(--c); border-color: var(--c); }
.rt__box.is-an::after { content: ""; width: 9px; height: 5px; border: solid #fff; border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
.rt__txt { min-width: 0; overflow-wrap: anywhere; }
.rt__farben { flex-basis: 100%; padding: 6px 0 4px 30px; display: grid; gap: 8px; justify-items: start; }
.rt__farben p { margin: 0; }
.rt__kreise { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 300px; }
.rt__kreise .colorbtn__sw { max-width: 34px; }
.rt__kreise .colorbtn__t { font-size: .6875rem; }
.rt__auf { background: none; border: 0; color: var(--muted); font-size: 1.1rem; padding: 2px 6px; cursor: pointer; transition: transform .15s; }
.rt__auf[aria-expanded="true"] { transform: rotate(90deg); }
.rt__d { flex-basis: 100%; padding: 4px 0 4px 30px; display: grid; gap: 6px; }
.rt__d p { margin: 0; }
.rt__k { display: flex; align-items: center; gap: 14px; }
.rt__endelink { color: var(--muted); }
.rt__fuss { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.rt__ende { display: grid; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--ground); }
.rt__ende p { margin: 0; }
.rt__ende .rt__k { flex-wrap: wrap; gap: 10px; }
/* Details: „mehr anzeigen“ unter der Aufgabe */
.chall__mehr { margin-top: 8px; justify-self: start; }
.chall__det--mehr { margin-top: 12px; }
/* Heute: feste Überschrift „Skill Challenges“, darunter Umschalter Challenge des Tages · Routinen (06.10.2026) */
.chall .htabs { margin: 10px 0 10px; }
.chall .htabs + .chall__passt { margin-top: -8px; }
.chall .chall__sum > .htabs { margin-top: 16px; margin-bottom: 16px; }
.chall .htabs .segtab { white-space: nowrap; padding-left: 6px; padding-right: 6px; }
@media (max-width: 420px) { .chall .htabs .segtab { font-size: .875rem; } }
/* Challenge-Titel und die Fragen etwas größer als die Kachel-Überschriften */
.chall:not(.chall--done) .chall__t, .chall--done .chall__t { font-size: 1.25rem; line-height: 1.2; margin-top: 6px; }
/* Fragen in einer Kachel (08.10.2026, Punkt 4): nie größer als die Kachel-Überschrift, wie „Wie lief die Umsetzung?“ */
.frage, .tb .tb__h { font-size: 1rem; font-weight: 700; line-height: 1.35; margin: 10px 0 8px; letter-spacing: 0; }
.tb .tb__hint { margin-top: -4px; }
/* Dein Tag: Angaben als kleine Chips */
.tagchip { display: inline-block; border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 999px; padding: 1px 9px; font-size: .8125rem; font-weight: 600; margin: 2px 2px 2px 0; }
.tb__erg { margin: 2px 0 0; font-weight: 600; }
/* Kopf: Glocke (Hinweise) und Info (Hilfe) neben dem Konto, gleiche Optik (07.10.2026) */
.top__r { display: flex; align-items: center; gap: 8px; }
.topknopf { background: none; border: 0; padding: 0; font: inherit; color: var(--ink); cursor: pointer; display: flex; align-items: center; gap: 10px; }
.topknopf__k { position: relative; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line); flex: none; }
.topknopf__k svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.topknopf.is-active .topknopf__k { box-shadow: inset 0 0 0 1.5px var(--ink); }
.topknopf__p { position: absolute; top: 5px; right: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 2px var(--paper); }
.topknopf__p.is-neu { background: var(--accent); }
.topknopf__t { display: none; }
@media (min-width: 1024px) {
  .top__r { margin-top: auto; width: 100%; flex-direction: column; align-items: stretch; gap: 2px; }
  .top__r .avatar { margin-top: 0; }
  .topknopf { width: 100%; padding: 8px 10px; border-radius: 12px; font-weight: 600; font-size: .9375rem; color: var(--muted); }
  .topknopf:hover, .topknopf.is-active { background: var(--ground); color: var(--ink); }
  .topknopf__k { width: 32px; height: 32px; }
  .topknopf__t { display: inline; }
}
/* Hinweise: aufklappende Liste unter der Glocke */
.glocke-weg { position: fixed; inset: 0; z-index: 19; background: rgb(27 27 25 / .18); border: 0; padding: 0; cursor: default; }
.glocke-pop { position: fixed; z-index: 20; top: calc(env(safe-area-inset-top, 0px) + 64px); left: 12px; right: 12px; margin-left: auto; max-width: 400px; max-height: 70vh; overflow: auto; background: var(--paper); border-radius: 18px; padding: 16px 18px 18px; box-shadow: 0 10px 30px rgb(27 27 25 / .18); }
.glocke-pop__k { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px; }
.glocke-l { list-style: none; margin: 0; padding: 0; }
.glocke-l li { padding: 12px 0; border-top: 1px solid var(--line); }
.glocke-l li:first-child { border-top: 0; }
.glocke-l__t { margin: 0 0 2px; font-weight: 650; }
.glocke-l .small { margin: 0; }
.glocke-l__k { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 10px; }
@media (min-width: 1024px) {
  .glocke-pop { top: auto; bottom: 24px; left: calc(var(--side) + 12px); right: auto; margin: 0; width: 380px; }
}
/* Hilfe: Anleitung und Glossar */
.info__kopf { margin-bottom: 14px; }
.info__kopf .h { margin: 0; }
.info__l { gap: 14px; }
.glossar { margin: 0; display: grid; gap: 4px; }
.glossar dt { font-weight: 700; margin-top: 12px; }
.glossar dt:first-child { margin-top: 0; }
.glossar dd { margin: 0; line-height: 1.5; color: var(--ink); }
.info__fuss { margin-top: 16px; }
#inst { scroll-margin-top: 72px; }
.rt__voll { margin: 12px 0 0; }
/* Skill Challenges: Kopf mit und ohne Plus gleich hoch, damit der Reiterwechsel nicht springt */
.chall .htop { min-height: 30px; align-items: center; }
.chall .htop .panel__h { margin: 0; }
.chall .htop .chall__streak { margin: 0; }
/* „Trainiert:“, „Warum das wirkt:“ und „Gemacht:“ fett (07.10.2026, Sebastian) */
.chall__lbl--fett { font-weight: 700; }
/* Lernpfade mit Kapiteln (07.10.2026): Gedanke, Übung, Frage mit Notiz; Rückblick und Bewertung am Ende */
.pfadkarte .chall__passt .pfad__pkt { margin-left: 4px; vertical-align: middle; }
.pfadkarte .pfad__zeit { margin: -2px 0 0; }
.pfad__body { display: grid; gap: 12px; margin-top: 8px; }
.pfad__body p { margin: 0; }
.pfad__ged { line-height: 1.55; }
.pfad__ueb { line-height: 1.5; padding: 12px 14px; background: var(--ground); border-radius: 12px; }
.pfad__notiz { margin: 4px 0 0; }
.pfad__body .actions { margin-top: 0; }
.pfad__rueck { margin: 4px 0 8px; padding-left: 22px; display: grid; gap: 10px; }
.pfad__rueck p { margin: 0; }
.pfad__rk { font-weight: 650; }
.pfad__rueck .note { margin-top: 2px; }
.pfad__bq { margin: 14px 0 4px; font-weight: 700; font-size: 1rem; line-height: 1.35; } /* so groß wie die anderen Fragen mit Farbkreisen (08.10.2026, Sebastian) */
.pfad-ende .rate__colors { margin-bottom: 8px; }
.pfad-ende .actions { margin: 6px 0 8px; }
.pfad__det > p { margin: 0 0 8px; }
/* Lernpfad etwas kleiner als die Challenge (07.10.2026, Sebastian); eingeklappt nur Kopf und Kapiteltitel */
.pfadkarte .chall__t, .chall.pfadkarte:not(.chall--done) .chall__t { font-size: 1.125rem; line-height: 1.25; }
.pfad__body, .pfad__body .field > span, .pfad__rueck { font-size: .9375rem; }
.pfad__ged { line-height: 1.5; }
.pfadkarte--zu .chall__mehr { margin-top: 6px; }
.pfadkarte .htop .linkbtn { color: var(--muted); }
/* Lernpfad als Kern (07.10.2026): Einladung ohne Lernpfad, Bezug in der Challenge, Wiederholen */
.pfadeinl { display: grid; gap: 10px; }
.pfadeinl .chall__passt { margin: 0 0 2px; }
.pfadeinl__i { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 14px; }
.pfadeinl__i.is-top { border-color: var(--ink); }
.pfadeinl__i p { margin: 0; }
.pfadeinl__n { font-weight: 700; }
.pfadeinl__e { margin-top: 4px !important; line-height: 1.4; }
.pfadeinl__tag { display: inline-block; font-size: .75rem; font-weight: 650; color: var(--accent); margin-left: 2px; }
.pfadeinl__i .btn { flex: none; }
.pfadeinl .navbtn--voll { margin-top: 4px; }
.chall__bezug { margin: 2px 0 0; font-size: .8125rem; font-weight: 650; color: var(--accent); }
.chall__wdh { margin: 14px 0 4px; }
/* So kann es klingen (07.10.2026): Beispielsatz unter der Aufgabe */
.chall__klang { margin: 8px 0 0; padding: 10px 12px; background: var(--ground); border-radius: 12px; font-size: .9375rem; line-height: 1.45; font-style: italic; }
.chall__klang-l { display: block; font-style: normal; font-size: .75rem; font-weight: 700; letter-spacing: .02em; color: var(--muted); margin-bottom: 2px; }
/* Routinen-Sammlung */
.rtlib__sub { margin: 2px 0 6px; }
.rtlib__h { margin: 10px 0 4px; font-weight: 650; font-size: 1rem; display: flex; align-items: center; gap: 8px; }
.rtlib__l { list-style: none; margin: 0; padding: 0; }
.rtlib__i { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.rtlib__l .rtlib__i:first-child { border-top: 0; }
.rtlib__i p { margin: 0; }
.rtlib__t { font-weight: 600; line-height: 1.35; font-size: .9375rem; }
.rtlib__k { border-top: 1px solid var(--line); padding: 10px 0 0; margin-top: 8px; }
.rtlib__k summary { cursor: pointer; font-weight: 650; display: flex; align-items: center; gap: 8px; list-style: none; }
.rtlib__k summary::-webkit-details-marker { display: none; }
.rtlib__k summary .muted { font-weight: 500; margin-left: auto; }
.rtlib__k[open] summary { margin-bottom: 4px; }
/* Pfeil zum Aufklappen wie bei „Erreichte Ziele“ (14.10.2026, Sebastian) */
.rtlib__k summary::after { content: ""; width: 8px; height: 8px; margin: 0 4px 3px 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s; flex: none; }
.rtlib__k[open] summary::after { transform: rotate(-135deg); margin-bottom: -3px; }
.rtlib__k--pass { border-top: 0; margin-top: 0; }
.rtlib__fuss { margin-top: 14px; display: grid; gap: 6px; }
.rtlib__fuss .linkbtn { justify-self: center; }
.pfad__rt { margin: 10px 0 4px; }
.pfad__rt .rtlib__i { border-top: 0; padding: 6px 0 0; }

/* Entwicklung → Routinen (07.10.2026) */
.rtseite__l { display: grid; gap: 10px; margin: 2px 0 6px; }
/* Je Routine eine Kachel mit Wochenleiste (07.10.2026) */
.rtk { border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 14px; display: grid; gap: 6px; }
.rtk p { margin: 0; }
.rtk__t { font-weight: 650; line-height: 1.3; }
.rtw { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; max-width: 340px; }
.rtw__t { display: grid; justify-items: center; gap: 3px; }
.rtw__k { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); box-sizing: border-box; }
.rtw__k.is-an { background: var(--c); border-color: var(--c); }
.rtw__k.is-heute { border-style: dashed; border-color: var(--muted); }
.rtw__k.is-vor { border-color: transparent; background: var(--ground); }
.rtw__d { font-size: .6875rem; color: var(--muted); }
.rtseite .rtlib__fuss { margin-top: 16px; }

/* Einstieg: erster Lernpfad (07.10.2026) */
.kpfad { padding: 12px; gap: 10px; }
.kpfad__i { width: 100%; text-align: left; justify-content: flex-start; background: none; font: inherit; color: inherit; cursor: pointer; }
.kpfad__i > span:last-child { display: grid; gap: 2px; }
.kpfad__i.is-on { border-color: var(--ink); }
.kpfad__r { flex: none; width: 20px; height: 20px; margin-top: 1px; border: 2px solid var(--line); border-radius: 50%; }
.kpfad__i.is-on .kpfad__r { border-color: var(--ink); box-shadow: inset 0 0 0 4px var(--paper); background: var(--ink); }
/* Entwicklung: vier Umschalter passen auch aufs schmale Handy */
.segtabs--vier { grid-auto-columns: auto; }
.segtabs--vier .segtab { padding-left: 8px; padding-right: 8px; white-space: nowrap; }
@media (max-width: 420px) { .segtabs--vier .segtab { font-size: .875rem; padding-left: 4px; padding-right: 4px; } }
@media (max-width: 360px) { .segtabs--vier { gap: 2px; } .segtabs--vier .segtab { font-size: .8125rem; padding-left: 3px; padding-right: 3px; } }

/* Späterer Skill Check mit Leisten und Regler (07.10.2026) */
.skz > .meter { margin: -4px 0 12px; }
.skz__hinweis { margin: 4px 0 -2px; }
.skz__d { display: grid; gap: 8px; justify-items: start; }
.skz__d .aus__t { margin: 0; }
.regler { width: 100%; }
.regler input[type=range] { width: 100%; accent-color: var(--ink); margin: 6px 0 0; }
.regler__ende { display: flex; justify-content: space-between; }
.regler__k { margin-top: 2px; }

/* Referenzleiste Fast nie … Fast immer im späteren Skill Check (07.10.2026): gleiche Länge wie die Skill-Leisten (Panel-Innenabstand 18px),
   Hintergrund und Linie per Schatten über die ganze Breite */
/* Weißer Kasten (08.10.2026, Sebastian); beim Scrollen bleibt dahinter ein Streifen in Hintergrundfarbe, damit nichts durchscheint */
.stleiste-w { position: sticky; top: calc(var(--flowtop, 0px) + env(safe-area-inset-top, 0px)); z-index: 4; margin: 0 0 8px; padding: 8px 0; background: var(--ground); }
.stleiste { display: grid; padding: 10px 16px 8px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-s); }
.stleiste__s { display: grid; gap: 3px; text-align: center; min-width: 0; }
.stleiste__w { font-size: .75rem; font-weight: 450; line-height: 1.15; min-height: 2.3em; display: flex; align-items: flex-end; justify-content: center; }
.stleiste__b { height: 5px; margin: 0 1px; border-radius: 999px; background: var(--ink); }
.stleiste__s:first-child .stleiste__b { margin-left: 0; } .stleiste__s:last-child .stleiste__b { margin-right: 0; }
.stleiste__s--0 .stleiste__b { opacity: .15; } .stleiste__s--1 .stleiste__b { opacity: .3; } .stleiste__s--2 .stleiste__b { opacity: .45; }
.stleiste__s--3 .stleiste__b { opacity: .6; } .stleiste__s--4 .stleiste__b { opacity: .8; }
.stleiste__z { font-size: .6875rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 360px) { .stleiste__w { font-size: .625rem; } .stleiste__z { font-size: .5625rem; letter-spacing: -.02em; } }

/* Sehr schmale Handys: lange Skillnamen umbrechen statt die Seite zu verbreitern */
.skz__n strong { overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 360px) { .skz__k { gap: 6px; } .skz__p { width: 3.1em; font-size: .8125rem; } .skz__z { width: 2.3em; } }

/* Skills: Check-out innerhalb der Kachel „Skill Kategorien“ (07.10.2026) */
.ci__inline { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.ci__inline p { margin: 0; }
.ci__inline .btn { justify-self: start; }
/* „Skill Check vom …“ und „Gesamt … von 10 +Plus“ je in einer eigenen Zeile; die Gesamt-Zeile bricht nicht auseinander (07.10.2026) */
.gesamt { display: grid; gap: 1px; }
.gesamt__w { white-space: nowrap; }

/* Lernpfade: zwei unabhängige Spalten mit gleichem Abstand; am Handy eine Liste (07.10.2026) */
.pfadspalte { display: contents; }
@media (min-width: 1024px) {
  .main--breit .pfadraster { align-items: start; }
  .main--breit .pfadspalte { display: grid; gap: 24px; align-content: start; min-width: 0; }
}
@media (min-width: 1024px) { .main--breit .rtseite__l { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 10px; } .main--breit .rtseite__l .pfadspalte { gap: 10px; } }
/* Wochenleiste: Kreise antippbar zum Nachtragen (07.10.2026) */
button.rtw__k { padding: 0; background: none; cursor: pointer; }
button.rtw__k.is-an { background: var(--c); }
.rtw__k.is-gew { outline: 2px solid var(--ink); outline-offset: 2px; }
.rtw__wahl { margin-top: 6px; padding: 10px 0 2px; border-top: 1px solid var(--line); }
/* Heute: 7 kleine Punkte statt der Zählung, Link zur Wochenleiste (07.10.2026) */
.rtp { display: flex; gap: 5px; margin-top: 6px; }
.rtp i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--line); box-sizing: border-box; display: block; }
.rtp i.is-an { background: var(--c); border-color: var(--c); }
.rtp i.is-heute { border-style: dashed; border-color: var(--muted); }
.rtp i.is-vor { border-color: transparent; background: var(--ground); }
.rt__woche { margin: 2px 0 0; }
/* Links in den Routine-Infos unterscheidbar (07.10.2026): Icon + Gewicht statt drei gleicher Links */
.rtl { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.rtl svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rtl span { text-decoration: underline; text-underline-offset: 3px; }
.rtl--haupt { font-weight: 700; color: var(--ink); }
.rtl--weg { font-weight: 500; color: var(--ink); }
.rtl--weg span { text-decoration: none; }
.rtl--leise { font-weight: 400; color: var(--muted); font-size: .8125rem; }
.rtl--leise span { text-decoration: none; }
.rtl--leise svg { width: 13px; height: 13px; }
.rt__bew { margin: 0 0 2px; }
.rt__fuss { flex-wrap: wrap; row-gap: 4px; } .rtl { white-space: nowrap; text-align: left; }
.pfadspalte > .group { margin-top: 0; }
/* Handy: „seit …“ in eigener Zeile (07.10.2026) */
@media (max-width: 1023px) { .rtk__sep { display: none; } .rtk__seit { display: block; } }

/* Heute (07.10.2026): Anordnen aller Kacheln, zwei fließende Spalten */
/* „Anordnen“ als eigene Spalte rechts neben dem Gruß; ein langer Gruß bricht um, statt darunter zu rutschen oder zu überlappen */
.hello:has(.hello__anordnen) { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; }
.hello:has(.hello__anordnen) > :not(.hello__anordnen) { grid-column: 1; }
.hello__anordnen { grid-column: 2; grid-row: 1; align-self: start; margin-top: 2px; white-space: nowrap; }
.pfadspalte > section { margin-top: 0; }
.anordnen__l { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.anordnen__i { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1.5px solid var(--line); border-radius: 12px; }
.anordnen__n { width: 22px; height: 22px; border-radius: 50%; background: var(--ground); display: grid; place-items: center; font-size: .75rem; font-weight: 700; flex: none; }
.anordnen__t { flex: 1; font-weight: 600; }
.anordnen__b { width: 36px; height: 36px; border-radius: 10px; border: 0; background: var(--ground); color: var(--ink); font-size: 1.1rem; cursor: pointer; }
.anordnen__b:disabled { opacity: .3; cursor: default; }
.anordnen__auge { width: 36px; height: 36px; border-radius: 10px; border: 0; background: transparent; color: var(--ink); display: grid; place-items: center; cursor: pointer; padding: 0; flex: none; margin: -4px -4px -4px -6px; }
.anordnen__auge svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.anordnen__auge:hover { background: var(--ground); }
.anordnen__auge:disabled { opacity: .3; cursor: default; background: transparent; }
.anordnen__i.is-aus .anordnen__t { color: var(--muted); text-decoration: line-through; font-weight: 500; }
.anordnen__i.is-aus .anordnen__auge, .anordnen__i.is-aus .anordnen__n { color: var(--muted); }
.anordnen .panel__h + .small { margin: 2px 0 10px; }
.heute-aus { text-align: center; margin: 16px 0 0; }
/* Hauptbereich „Ziele“ auf Heute (07.10.2026) */
.zielk__l { display: grid; gap: 14px; }
.zielk__z { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.zielk__z:first-child { border-top: 0; padding-top: 0; }
.zielk__t { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; font-size: 1rem; text-align: left; color: var(--ink); cursor: pointer; line-height: 1.3; }
.zielk__t span { color: var(--muted); }
.zielk__m, .zielk__nl { margin: 0; }
.zielk__nl { margin-top: 4px; font-weight: 600; color: var(--muted); }
.zielk .ms { margin: 0; }

/* Konto in aufklappbaren Gruppen (08.10.2026, Punkt 6) */
.kgr { padding: 0; overflow: hidden; }
.kgr__k { width: 100%; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "t pf" "v pf"; align-items: center; gap: 2px 12px; padding: 16px 20px; background: none; border: 0; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.kgr__t { grid-area: t; font-size: 1.05rem; font-weight: 750; }
.kgr__v { grid-area: v; font-size: .875rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kgr__v:empty { display: none; }
.kgr__pf { grid-area: pf; font-size: 1.4rem; color: var(--muted); transition: transform .15s; }
.kgr.is-auf .kgr__pf { transform: rotate(90deg); }
.kgr__in { padding: 0 20px 18px; }
/* Abschnitte wie Kacheln mit 12px Abstand zwischen Text und Bedienelementen (Sebastian: sonst zu eng) */
.kgr__s { border-top: 1px solid var(--line); padding: 18px 0 16px; display: grid; gap: 12px; }
.kgr__s:last-child { padding-bottom: 4px; }
.kgr__s .panel__h { font-size: 1rem; margin: 0; }
.kgr__s .sub { margin: 0; }
/* Erste Zeile ohne eigene Linie, wenn der Abschnitt schon mit einer Linie beginnt */
.kgr__s > .rem:first-child, .kgr__s > .erw__z:first-of-type { border-top: 0; padding-top: 0; }
/* Verlauf: Kachel antippen zeigt „Heute erneut machen“ (08.10.2026, Punkt 7) */
.log__i--tipp { cursor: pointer; }
.log__i--tipp:hover { border-color: var(--muted); }
.ci__frueh { margin: 0; }
/* Symbol vor Kachel-Überschriften (08.10.2026, Variante A; schlicht in Schriftfarbe wie in der Navigation, Sebastian) */
.panel__h:has(> .kico) { display: inline-flex; align-items: center; gap: 9px; }
.kico { flex: none; width: 20px; height: 20px; color: var(--ink); display: grid; place-items: center; }
.kico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Konto-Hierarchie (08.10.2026, Sebastian): Gruppe 1.05rem mit Symbol > Abschnitt 1rem > Zeile .9375rem mit kleinem Symbol */
.kgr__t { display: inline-flex; align-items: center; gap: 9px; }
.kgr__v { padding-left: 29px; }
.kgr .rem__t { font-size: .9375rem; font-weight: 650; display: flex; align-items: center; gap: 8px; }
.kgr .rem__t + .small { padding-left: 24px; }
.kico--s, .kico--s svg { width: 16px; height: 16px; }
/* Uhrzeit eingerückt unter ihrer Erinnerung (08.10.2026) */
.kgr .rem__zeit, .kgr .rem .checks--sub { margin-left: 24px; }
/* skillzeit-Report jetzt zuschicken (14.10.2026) */
.kgr .rem__jetzt { display: grid; gap: 8px; margin: 6px 0 0 24px; padding-top: 14px; border-top: 1px solid var(--line); }
.kgr .rem__st { font-size: .9375rem; font-weight: 650; }
.kgr .rem__jetzt .small { margin-top: -4px; }
.kgr .rem__btn { justify-self: start; background: var(--ground); box-shadow: none; padding: 9px 14px; font-size: .875rem; }
.kgr .rem__btn:disabled { opacity: .6; cursor: default; }
.kgr .rem__btn svg { width: 18px; height: 18px; }
/* Skills: Check-outs am Computer links unter den Kategorien, am Handy ganz unten (08.10.2026) */
.nur-breit { display: none !important; }
@media (min-width: 1024px) { .main--breit .nur-breit { display: grid !important; } .main--breit .nur-schmal { display: none !important; } }
/* Gesamtwert oben rechts neben der Überschrift (08.10.2026) */
.score { margin: 0; display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.score__l { font-size: .8125rem; color: var(--muted); font-weight: 600; }
.score strong { font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; }

/* „in XX Tagen“ im Skills-Kasten immer in eigener Zeile (08.10.2026, Sebastian) */
.ci__wann { display: block; }
/* Skills auf Heute: Zeile unter der Überschrift etwas tiefer, wegen der großen Gesamtzahl (08.10.2026, Sebastian) */
.ci--heute .dran__kopf + .small { margin-top: 6px; }
/* Ziele auf Heute: mehr Luft unter der Überschrift, damit der Zielname nicht zur Überschrift gehört (08.10.2026, Sebastian) */
.zielk > .chall__top { margin-bottom: 10px; }
/* Lernpfad-Kachel auf Heute: Kapitelstand blau oben rechts, Name hervorgehoben (08.10.2026, Sebastian) */
.pfad__stand { margin: 0; font-size: .875rem; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent); white-space: nowrap; }
.pfad__name { color: var(--ink); font-weight: 700; }
/* Lernpfad: Kapitel einzeln abschließen und frei blättern (08.10.2026, Sebastian) */
.pfad__kap { margin: 6px 0 -6px; display: flex; align-items: center; gap: 10px; font-size: .8125rem; font-weight: 650; color: var(--muted); }
.pfad__ok { display: inline-flex; align-items: center; gap: 5px; color: var(--accent); font-weight: 700; }
.pfad__ok svg { width: 14px; height: 14px; display: block; }
.pfad__erl { align-items: center; gap: 14px; }
.pfad__erl > .pfad__ok { font-size: .9375rem; }
.pfadkarte .chall__nav + .pfad__unten { margin-top: 10px; }
.pfadkarte .pfad__ende { display: block; margin: 14px 0 0; }
.pfad__schritte li.is-done { text-decoration: none; }
.pfad__schritte .pfad__ok { margin-left: 6px; vertical-align: -2px; }
.pfad__kapbtn { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.pfad__kapbtn:hover { text-decoration: underline; }
.pfadkarte .strip__nav { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pfadkarte .strip__nav .navbtn { white-space: nowrap; padding-left: 8px; padding-right: 8px; gap: 6px; }
.pfadkarte .strip__nav .navbtn svg { flex-shrink: 0; }
/* Aufgaben „Später“ (08.10.2026, Sebastian) */
.auf__sp { display: block; }
.auf__sph { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; }
.auf__sph::-webkit-details-marker { display: none; }
.auf__sph::after { content: ""; margin-left: auto; width: 8px; height: 8px; border: solid var(--muted); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .15s; }
.auf__sp[open] > .auf__sph::after { transform: rotate(-135deg); }
.auf__sph .panel__h { margin: 0; }
.auf__spn { font-size: .875rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.auf__sp > p.small { margin: 12px 0 10px; }
.auf__spf { display: flex; gap: 10px; align-items: center; margin-bottom: 4px; }
.auf__spf input { flex: 1; min-width: 0; font: inherit; font-size: .9375rem; padding: 10px 12px; border: 1.5px dashed var(--line); border-radius: 12px; background: none; color: var(--ink); }
.auf__spf input:focus { border-style: solid; outline: none; border-color: var(--accent); }
.auf__hol { border: 1.5px solid var(--line); border-radius: 50%; width: 24px; height: 24px; color: var(--muted); }
.auf__hol svg { width: 14px; height: 14px; }
.auf__hol:hover { color: var(--accent); border-color: var(--accent); }
.auf__i--sp .auf__t { color: var(--muted); }
.auf__sptag { display: inline-block; margin-left: 6px; font-size: .75rem; font-weight: 650; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0 7px; vertical-align: 1px; }
.auf__schieb { display: block; margin-top: 12px; }
.auf__hol svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
/* Schutz gegen Überlauf (08.10.2026): wird die Kopfzeile einer Kachel zu breit, bricht der rechte Teil in die nächste Zeile um, statt die Seite zu verbreitern */
.dran__kopf { flex-wrap: wrap; row-gap: 6px; }
.dran__kopf > .dran__re { margin-left: auto; }
/* Handy: eine Spalte, die nie breiter als der Bildschirm wird; Kopfzeilen mit Zähler brechen notfalls um (08.10.2026) */
.raster { grid-template-columns: minmax(0, 1fr); }
.pfadspalte > section { min-width: 0; }
.chall__top.htop:has(> .dran__re) { flex-wrap: wrap; row-gap: 6px; }
.chall__top.htop > .dran__re { margin-left: auto; }
/* Bisherige Check-outs: die acht Antworten (08.10.2026, Sebastian) */
.ci__fragen { list-style: none; margin: 8px 0 4px; padding: 0; display: grid; gap: 8px; }
.ci__fragen li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline; font-size: .875rem; line-height: 1.4; color: var(--muted); }
.ci__fragen b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; min-width: 1.6em; text-align: right; }
.ci__ziel + .ci__ziel { margin-top: 10px; }
.ci__zt { margin: 4px 0 0; font-size: .9375rem; font-weight: 650; }
/* Aufgeklappter Check-out, übersichtlicher (08.10.2026, Sebastian): Blöcke mit gleicher Kopfzeile und feiner Linie dazwischen */
.log--ci .ci__auf { display: grid; }
.log--ci .ci__blk { padding: 14px 0; border-bottom: 1px solid var(--line); }
.log--ci .ci__blk:last-child { border-bottom: 0; padding-bottom: 4px; }
.log--ci .ci__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.log--ci .ci__kopf .ci__t { margin: 0; font-size: .875rem; font-weight: 700; color: var(--ink); }
.log--ci .ci__k { margin: 0; font-size: .875rem; font-weight: 700; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.log--ci .ci__ziel + .ci__ziel { margin-top: 10px; }
.log--ci .ci__zt { margin: 0; font-size: .875rem; font-weight: 600; line-height: 1.4; }
.log--ci .ci__zw { margin: 2px 0 0; font-size: .8125rem; color: var(--muted); }
.log--ci .ci__zw b { color: var(--ink); font-weight: 700; }
.log--ci .ci__fragen { margin: 0; gap: 6px; }
.log--ci .ci__fragen li { font-size: .8125rem; }
.log--ci .bars--ci { margin: 0; }
.log--ci .ci__nl { margin: 0 0 2px; font-size: .8125rem; font-weight: 650; color: var(--muted); }
.log--ci .ci__n { margin: 0; font-size: .875rem; line-height: 1.5; }
.log--ci .ci__n + .ci__nl { margin-top: 10px; }
.log--ci details[open] > summary { padding-bottom: 10px; }
.log--ci .ci__k--grau { font-weight: 500; color: var(--muted); }
/* Bisherige Check-outs: Vorjahre je Jahr einklappbar (08.10.2026, Sebastian) */
.ci__jahr { border-top: 1px solid var(--line); }
.ci__jahr > summary { display: flex; align-items: baseline; gap: 10px; padding: 12px 0; cursor: pointer; list-style: none; }
.ci__jahr > summary::-webkit-details-marker { display: none; }
.ci__jahr > summary::after { content: ""; width: 7px; height: 7px; margin-left: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); align-self: center; }
.ci__jahr[open] > summary::after { transform: rotate(-135deg); }
.ci__jt { font-weight: 700; font-variant-numeric: tabular-nums; }
.ci__jd { margin-left: auto; font-weight: 650; font-variant-numeric: tabular-nums; }
.ci__jahr > .log { padding-left: 0; }
.more + .ci__jahr { margin-top: 8px; }
/* Kalender-Facelift (08.10.2026, Sebastian): Kacheln, gut lesbare Tageszahlen, Überblick oben */
.cal__sum .stack { margin: 4px 0 12px; }
.cal__anz { margin: 0; font-size: .875rem; font-weight: 700; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cal__leg { gap: 6px 14px; }
.cal__year { gap: 12px; }
.cal__m.panel { padding: 12px 12px 14px; gap: 8px; }
.cal__mt { display: flex; align-items: baseline; justify-content: space-between; width: 100%; text-decoration: none; font-size: .9375rem; font-weight: 700; }
.cal__mn { font-size: .75rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.cal__grid { gap: 3px; }
.cal__d { box-shadow: none; background: var(--ground); border-radius: 5px; display: grid; place-items: center; font-size: .625rem; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.cal__d > span { line-height: 1; }
.cal__d.is-set { color: #fff; }
.cal__d:disabled { opacity: 1; background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.cal__d.is-today { outline: 2px solid var(--accent); outline-offset: 1px; }
.cal__d.has-ch::after { right: 2px; bottom: 2px; width: 3px; height: 3px; }
@media (min-width: 520px) { .cal__d { font-size: .6875rem; } }
.cal__grid--big .cal__d { font-size: .875rem; border-radius: 10px; }
.cal__knoepfe { margin-top: 16px; }
.cal__knoepfe .navbtn--voll:only-child { grid-column: 1 / -1; }
/* Lernpfade: Filter nach Skill-Kategorie (08.10.2026, Sebastian) */
.pfadctrl { margin: 4px 0 14px; }
.pfad__kats { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .8125rem; color: var(--muted); }
.pfad__kats span { display: inline-flex; align-items: center; gap: 5px; }
.pfad__kats .katico svg { width: 14px; height: 14px; }
/* Handy: Kategorie-Filter in einer wischbaren Zeile statt vier Zeilen untereinander */
.pfadctrl .ctrl__zeile { display: grid; grid-template-columns: minmax(0, 1fr); }
.pfadctrl .filters { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px; scroll-padding: 0 16px; }
.pfadctrl .filters::-webkit-scrollbar { display: none; }
.pfadctrl .filter { flex: none; }
.pfadctrl .sortsel { margin-top: 10px; }
@media (min-width: 900px) { .pfadctrl .filters { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; } }
/* Sprungleiste auf Heute (08.10.2026, Sebastian): nur am Handy, seitlich wischbar, Optik wie die Filter-Knöpfe */
/* Bleibt beim Scrollen unter der Kopfleiste stehen (11.10.2026) */
.sprung { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: -6px -16px 16px; padding: 8px 16px; position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--tophoehe, 57px)); z-index: 4; background: color-mix(in srgb, var(--ground) 96%, transparent); backdrop-filter: blur(10px); }
.sprung::-webkit-scrollbar { display: none; }
.sprung .filter { flex: none; }
/* Einschätzung von anderen (09.10.2026, Sebastian) */
.fremd__form { display: grid; gap: 12px; }
.fremd__l { margin: 0; font-size: .9375rem; font-weight: 650; }
.fremd__form .filters { display: flex; flex-wrap: wrap; }
.fremd__kats .filter { display: inline-flex; align-items: center; gap: 6px; }
.fremd__kats .katico svg { width: 15px; height: 15px; }
.fremd__wahl { display: grid; gap: 6px; max-height: 340px; overflow: auto; padding: 4px 2px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fremd__wk { margin: 8px 0 0; display: flex; align-items: center; gap: 6px; font-size: .8125rem; font-weight: 700; color: var(--muted); }
.fremd__a { padding: 14px 0; border-top: 1px solid var(--line); display: grid; gap: 10px; }

.fremd__ak { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.fremd__ad { margin: 0; font-size: .875rem; color: var(--muted); }
.fremd__link { display: flex; gap: 8px; }
.fremd__link input { flex: 1; min-width: 0; font: inherit; font-size: .8125rem; padding: 8px 10px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--ground); color: var(--muted); }
.fremd__vgl { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fremd__vgl li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: .875rem; }
.fremd__sn { display: grid; gap: 1px; }
.fremd__hin { font-size: .75rem; font-weight: 650; color: var(--muted); }
.fremd__hin.is-hoch { color: var(--accent); }
.fremd__w { display: inline-flex; gap: 12px; white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; }
.fremd__w b { color: var(--ink); }
.fremd__txt > summary { cursor: pointer; font-size: .875rem; font-weight: 650; }
.fremd__ql { margin: 10px 0 2px; font-size: .8125rem; font-weight: 650; color: var(--muted); }
.fremd__tr { border: 0; border-top: 1px solid var(--line); margin: 10px 0 0; }
.fremd__weg { justify-self: start; }
.fremd__seite { display: grid; gap: 14px; }
.fremd__seite .aus__t { font-size: .9375rem; }
.fremd .dran__kopf + .fremd__a { border-top: 0; padding-top: 6px; }
.fremd__basis { margin: 0; }
.fremd__knoepfe { display: flex; gap: 18px; }
.fremd__alt > summary { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; cursor: pointer; list-style: none; }
.fremd__alt > summary::-webkit-details-marker { display: none; }
.fremd__alt > summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); align-self: center; flex: none; }
.fremd__alt[open] > summary::after { transform: rotate(-135deg); }
.fremd__alt > summary .fremd__ad { flex: 1; }
.fremd__in { display: grid; gap: 10px; margin-top: 10px; }
.fremd__link .btn { flex: none; }
.fremd__anon { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 9%, var(--paper)); font-size: .875rem; line-height: 1.5; }
.fremd__anon strong { color: var(--accent); }
.fremd__mix { margin: 6px 0 0; }
/* Einschätzung: jede Anfrage einklappbar mit Titel und Gesamt (09.10.2026, Sebastian) */
.fremd__alt > summary { align-items: center; }
.fremd__st { flex: 1; display: grid; gap: 2px; min-width: 0; }
.fremd__st b { font-size: .9375rem; }
.fremd__st .fremd__ad { font-size: .8125rem; }
.fremd__sg { font-size: .875rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fremd__sg b { color: var(--ink); font-size: 1rem; }
.fremd__ges { padding-bottom: 8px; border-bottom: 1px solid var(--line); font-weight: 700; }
.fremd__frage { margin: 4px 0 8px; font-size: .875rem; font-weight: 650; color: var(--muted); }
/* Zugeklappte Anfragen enger (09.10.2026, Sebastian): kein Raster-Abstand für den versteckten Inhalt */
details.fremd__alt { display: block; padding: 12px 0; }
details.fremd__alt[open] { padding-bottom: 16px; }
.fremd .dran__kopf + .fremd__a { padding-top: 4px; }
details.fremd__alt { padding: 9px 0; }
details.fremd__alt[open] { padding-bottom: 14px; }
.fremd__st { gap: 1px; line-height: 1.3; }

/* Favoriten und „Nicht mehr vorschlagen“ (10.10.2026, Sebastian) */
.chall__tz { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.chall__tz .chall__t { min-width: 0; }
.favbtn { flex: none; width: 36px; height: 36px; margin: 2px -6px 0 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.favbtn:hover { background: var(--brand-soft); }
.favbtn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.favbtn.is-on { color: var(--ink); }
.favbtn.is-on svg { fill: currentColor; }
.chall__links { margin: 10px 0 0; }
.pitem__fav { color: var(--ink); white-space: nowrap; }
.pitem__fav svg, .filter__stern svg { width: 13px; height: 13px; fill: currentColor; vertical-align: -1px; }
.filter__stern { margin-right: 4px; }
.pitem__aus { margin: 8px 0 0; }
.pitem__own--aus { color: var(--muted); background: var(--ground); }
.pick__stern svg { width: 15px; height: 15px; fill: currentColor; vertical-align: -2px; margin-right: 6px; }
.pick__ico svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; margin-right: 6px; }

/* Bild für den Sperrbildschirm (12.10.2026) */
/* Gleich wie „Nicht mehr vorschlagen“ (12.10.2026, Sebastian) */
.sperrlink { margin-right: 18px; }
.sperrlink svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chall__links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; }
.rt__sperr { margin: 6px 0 14px; }
.rt__sperr--seite { margin: 12px 0 4px; }
.sperr-pop { position: fixed; z-index: 20; left: 12px; right: 12px; top: calc(env(safe-area-inset-top, 0px) + 24px); margin: 0 auto; max-width: 420px; max-height: calc(100vh - 48px); overflow: auto; background: var(--paper); border-radius: 18px; padding: 18px 18px 16px; box-shadow: 0 10px 30px rgb(27 27 25 / .25); display: grid; gap: 10px; }
.sperr-pop p { margin: 0; }
.sperr__bild { display: block; width: auto; max-width: 60%; max-height: 46vh; margin: 4px auto; border-radius: 14px; border: 1px solid var(--line); }
.sperr__laedt { text-align: center; padding: 40px 0; color: var(--muted); }
.sperr__schritte { margin: 0; padding-left: 20px; font-size: .875rem; display: grid; gap: 4px; }
.sperr-pop .actions { margin-top: 4px; }

/* Impuls über der Übung und Stufe 2 (12.10.2026) */
.chall__impuls { margin: 2px 0 16px; font-size: .9375rem; line-height: 1.55; color: var(--ink); }
.chall__uebung-l { font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px !important; }
.pitem__body .chall__impuls { margin: 0 0 10px; }
.chall__uebung-l + .card__task { margin-top: 0; }
/* Übung und „So kann es klingen“ in einem grauen Kasten (12.10.2026, Sebastian) */
.chall__uebung { background: var(--ground); border-radius: 14px; padding: 12px 14px; margin: 0 0 12px; }
.chall__uebung .chall__klang { background: none; padding: 10px 0 0; margin: 10px 0 0; border-top: 1px solid var(--line); border-radius: 0; }
.chall__uebung + .chall__aus { margin: 0; }
/* Challenge-Liste wie die Tages-Challenge (12.10.2026) */
.pitem__body .chall__meta { margin: 0 0 10px; }
.pitem__body .chall__uebung { margin: 0 0 8px; }
.pitem__body .chall__uebung + .chall__aus { margin: 0 0 4px; }
.pitem__links { display: grid; justify-items: start; gap: 6px; margin: 10px 0 0; }
.favlink svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.favlink.is-on svg { fill: currentColor; }
.pitem__body .chall__uebung .card__task { font-size: .9375rem; line-height: 1.55; margin: 0; }

/* ---------- Schrift je Funktion (Regel 01.10.2026, ergänzt 12.10.2026 um Fließtext und Zwischenüberschrift) ----------
   Kachel-Überschrift 1.05rem/750 · Zwischenüberschrift 1rem/700 · Fließtext und Eintragstitel .9375rem (Titel 600)
   · Erklärtext .875rem grau · Datum/Meta .8125rem grau · Kicker .75rem/700 */
:root { --fs-kachel: 1.05rem; --fs-zwischen: 1rem; --fs-fliess: .9375rem; --fs-erkl: .875rem; --fs-meta: .8125rem; --fs-kicker: .75rem; }
.sub--seite { font-size: var(--fs-erkl); }
.pfadraster .pfad p:not([class]) { font-size: var(--fs-fliess); line-height: 1.55; }
.pfadraster .pfad .chall__meta { margin: 6px 0 0; }
.rtk__t { font-size: var(--fs-fliess); font-weight: 600; }
.rtk__z { font-size: var(--fs-meta); }
.rtlib__h, .rtlib__k summary, .tbmonat__t { font-size: var(--fs-zwischen); font-weight: 700; }
.navbtn[data-act="eigen-neu"] { font-size: .875rem; padding: 10px 12px; margin: 4px 0 4px; }
/* Journal „Einen Tag nachtragen“ am iPhone: Datumsfeld lief unter den Knopf und war leer (12.10.2026) */
.inline-add--tb .field { min-width: 0; }
.inline-add--tb input[type="date"] { -webkit-appearance: none; appearance: none; display: block; box-sizing: border-box; min-width: 0; max-width: 100%; min-height: 42px; }
.inline-add--tb input[type="date"]::-webkit-date-and-time-value { text-align: left; }
/* Heute, Unterseiten und Konto nach der Schriftregel (12.10.2026) */
.sub { font-size: var(--fs-erkl); }
.date { font-size: var(--fs-erkl); }
.linkbtn:not(.small):not(.rtl--leise):not(.small *):not(.rlinks *) { font-size: var(--fs-fliess); }
.h2 { font-size: var(--fs-kachel); }
.h2.tb__jahr, .tb__jahr { font-size: var(--fs-kicker); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.zielk__t, .pfadeinl__n { font-size: var(--fs-fliess); font-weight: 600; }
.main .empty, .main .leer { font-size: var(--fs-erkl); font-style: normal; font-weight: 400; color: var(--muted); }
.kv dd { font-size: var(--fs-fliess); }
.steps-mini { font-size: var(--fs-fliess); }
/* Ziele und Skills nach der Schriftregel (12.10.2026) */
.main h1.card__title { font-size: 1.6rem; letter-spacing: -0.02em; line-height: 1.15; }
@media (min-width: 1024px) { .main h1.card__title { font-size: 2rem; } }
.main .note { font-size: var(--fs-fliess); }
.archiv .goal__t { font-size: var(--fs-fliess); font-weight: 600; }
.main .ci__t { font-size: var(--fs-erkl); }
.main .ci__n { font-size: var(--fs-fliess); }
/* Lernpfad-Notiz: kurzer Hinweis „Gespeichert“ (13.10.2026) */
.pfad__gesp { display: block; min-height: 1.2em; margin-top: 4px; opacity: 0; transition: opacity .3s; }
.pfad__gesp.is-an { opacity: 1; }
.field .pfad__gesp { font-size: var(--fs-meta); font-weight: 400; color: var(--muted); }

/* Skill Check: Stufen mit „x von 10“ (13.10.2026, Sebastian) */
.anker { list-style: none; margin: 12px 0 4px; padding: 10px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; background: var(--paper); border-radius: var(--radius-s); }
.anker li { display: grid; gap: 2px; text-align: center; font-size: var(--fs-meta); line-height: 1.3; }
.anker b { font-weight: 650; }
.anker span, .aus__von { color: var(--muted); font-weight: 500; }
.anker__satz { margin-top: 8px; }
@media (max-width: 560px) { .anker { grid-template-columns: repeat(3, 1fr); row-gap: 10px; } }

/* Hilfe: Kern-Satz vor dem Kreislauf (14.10.2026) */
.info__kern { margin-bottom: 14px; }

/* Einstieg einheitlich (14.10.2026, Sebastian): Rollenwahl wie die Schritte, Erklärtexte und Liste in Fließtextgröße,
   Skill-Check-Auswahl als Kreise (eine Wahl auf einer Skala, wie die Lernpfad-Auswahl) */
.rolle__kopf .h { margin: 0 0 8px; }
.rolle__kopf .sub { margin: 0; }
.flow__main > .sub, .rolle__kopf .sub { font-size: var(--fs-fliess); line-height: 1.55; }
.flow__main > .sub.anker__satz { font-size: var(--fs-erkl); }
.flow__main .how { font-size: var(--fs-fliess); line-height: 1.5; }
.aus__b { width: 34px; height: 34px; border-radius: 50%; justify-self: center; }
@media (max-width: 420px) { .aus__b { width: 30px; height: 30px; } }

/* „Heute anpassen“ statt „Anordnen“ (14.10.2026, Sebastian): als umrandeter Knopf, damit die Anpassbarkeit auffällt */
.hello__anordnen { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: var(--fs-erkl); font-weight: 650; color: var(--ink); background: var(--paper); border: 1.5px solid var(--line); border-radius: 999px; padding: 8px 14px 8px 12px; cursor: pointer; }
.hello__anordnen:hover { border-color: var(--muted); }
.hello__anordnen[aria-expanded="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.hello__anordnen svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.hello__anordnen:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.erw__heute { margin: 4px 0 0; }
/* Handy: Begrüßung immer zweizeilig (Umbruch nach dem Komma), Knopf oben rechts in der Größe der Sprung-Knöpfe darunter (Sebastian) */
.hello__br { display: none; }
@media (max-width: 560px) {
  .hello__br { display: inline; }
  .hello__anordnen { grid-row: 1; align-self: start; margin-top: 0; padding: 6px 11px 6px 9px; font-size: .875rem; font-weight: 600; gap: 6px; }
  .hello__anordnen svg { width: 15px; height: 15px; }
}

/* Bisherige Check-outs zugeklappt: Skills und Umsetzung nebeneinander (14.10.2026) */
.log--ci .ci__kurz { display: flex; flex-wrap: wrap; justify-content: flex-end; column-gap: 14px; row-gap: 2px; text-align: right; }
.log--ci .ci__kz { white-space: nowrap; }
.log--ci .ci__kz b { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; display: inline-block; min-width: 3.4em; text-align: right; }

/* Challenge per Mail (14.10.2026): wie „Immer im Blick behalten“ */
.maillink { margin-right: 18px; }
.maillink svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.maillink:disabled { opacity: .6; cursor: default; }

/* Challenge im Blick behalten: Uhrzeit wählen, dann Kalender, Mail oder Sperrbildschirm (14.10.2026) */
.blick-pop .blick__frage { display: block; font-size: var(--fs-zwischen); font-weight: 700; margin: 14px 0 6px; }
.blick-pop .blick__zeit { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0 0 4px; }
.blick-pop .blick__zeit input[type="time"] { flex: 0 1 170px; width: auto; }
.blick-pop input[type="time"] { min-height: 44px; }
.blick-pop .blick__l { display: grid; gap: 8px; margin: 14px 0 6px; }
.blick-pop .blick__k { justify-content: flex-start; text-align: left; background: var(--ground); }
.blick-pop .blick__k:hover { background: var(--line); }
.blick-pop .blick__k:disabled { opacity: .6; cursor: default; }

/* „Erinnern lassen“ unter der Übung (14.10.2026): umrandeter Knopf wie „Heute anpassen“ */
.chall__erinnern { margin: 14px 0 2px; }
.erinnernbtn { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: var(--fs-fliess); font-weight: 650; color: var(--ink); background: var(--paper); border: 1.5px solid var(--line); border-radius: 999px; padding: 9px 16px 9px 13px; cursor: pointer; }
.erinnernbtn:hover { border-color: var(--muted); }
.erinnernbtn:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.erinnernbtn svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Meldungen am Handy nicht breiter als der Bildschirm (14.10.2026: lange Mail-Adresse in „Gesendet an …“) */
.toast { white-space: normal; width: max-content; max-width: min(520px, calc(100vw - 32px)); text-align: center; border-radius: 20px; overflow-wrap: anywhere; line-height: 1.35; }
@media (min-width: 1024px) { .toast { max-width: min(520px, calc(100vw - var(--side) - 48px)); } }
/* „Täglich dranbleiben“ (15.10.2026): feste Routine, hakt sich von selbst ab; Akzentfarbe statt Bewertungsfarbe, Kästchen gestrichelt bis erledigt */
.rt__box--dran { border-style: dashed; border-color: var(--muted); }
.rt__box--dran.is-an { --c: var(--accent); border-style: solid; }
.rt__box--dran.is-an::after { border-color: var(--paper); }
.rt__i--dran .rt__boxbtn { cursor: default; }
.rtp i.is-dran, .rtw__k.is-dran { --c: var(--accent); }
.rtk--dran { border-color: var(--accent); border-style: dashed; }
.rt__dranan { margin-top: 14px; }
/* Hinweis auf neue Version (15.10.2026) */
.neubar > span:first-child { flex: 1 1 auto; }
/* Demo (16.10.2026): Hinweis mit Link „Selbst starten“ */
.demo--echt a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
/* Ziel abschließen: offene Punkte zum Aufklappen (16.10.2026) */
.zab { margin: -4px 0 10px; }
.zab summary { cursor: pointer; font-weight: 600; }
.zab__h { margin: 8px 0 2px; font-weight: 650; }