:root {
  --bg: #FFFFFF;
  --ink: #111214;
  --muted: #686C73;
  --faint: #8A8D93;
  --line: #E3E4E6;
  --line-2: #ECEDEF;
  --border: #DCDDE0;
  --soft: #F4F4F5;
  --good: #1F6E46;
  --good-soft: #E6F2EB;
  --warn: #8A5300;
  --on-ink: #FFFFFF;
  --scrim: rgba(17, 18, 20, 0.42);
  --font: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0E0F11; --ink: #F1F2F3; --muted: #9EA2A9; --faint: #6F737A; --line: #26282C; --line-2: #1F2124;
    --border: #33363B; --soft: #191B1E; --good: #5CC18B; --good-soft: #142A1E; --warn: #E3A54A;
    --on-ink: #0E0F11; --scrim: rgba(0, 0, 0, 0.6); color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font-family: var(--font); font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
button, input, select { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
[hidden] { display: none !important; }

.app { max-width: 480px; margin: 0 auto; min-height: 100dvh; padding: calc(env(safe-area-inset-top, 0px) + 14px) 20px calc(env(safe-area-inset-bottom, 0px) + 24px); display: flex; flex-direction: column; gap: 24px; }

.top { display: flex; justify-content: space-between; align-items: center; min-height: 44px; }
.brand { font-weight: 700; font-size: 18px; letter-spacing: -0.02em; text-decoration: none; }
.top-right { display: flex; align-items: center; gap: 4px; }
.top-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 8px; font-size: 15px; font-weight: 600; text-decoration: none; border-radius: 10px; }
.top-link.muted, .back { color: var(--muted); font-weight: 400; }
.back { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-size: 15px; background: none; border: 0; padding: 0; cursor: pointer; }
.icon { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.screen { display: flex; flex-direction: column; gap: 24px; flex: 1; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.stack-s { display: flex; flex-direction: column; gap: 4px; }
.grow { flex: 1; }
.eyebrow { font-size: 13px; font-weight: 600; color: var(--muted); }
.eyebrow.good { color: var(--good); }
h1 { margin: 0; font-size: 32px; line-height: 1.1; font-weight: 600; letter-spacing: -0.025em; text-wrap: balance; }
h2 { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; }
h3 { margin: 0; font-size: 15px; font-weight: 600; }
p { margin: 0; }
.lead { font-size: 15px; color: var(--muted); line-height: 1.5; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.center { text-align: center; }

.segs { display: grid; gap: 6px; }
.segs div { height: 3px; border-radius: 2px; background: var(--line); }
.segs div.on { background: var(--ink); }

.options { display: flex; flex-direction: column; gap: 10px; }
.option { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 68px; padding: 12px 16px 12px 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg); text-align: left; cursor: pointer; width: 100%; }
.option:active { background: var(--soft); }
.option .t { display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.option .s { display: block; font-size: 14px; color: var(--muted); margin-top: 2px; }

.btn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 56px; border-radius: 14px; border: 0; background: var(--ink); color: var(--on-ink); font-weight: 600; font-size: 17px; cursor: pointer; text-decoration: none; width: 100%; padding: 0 16px; }
.btn.secondary { background: var(--bg); color: var(--ink); border: 1px solid var(--border); font-size: 16px; }
.btn.small { height: 44px; font-size: 15px; border-radius: 12px; width: auto; }
.btn:disabled { opacity: 0.5; cursor: default; }
.link-btn { min-height: 44px; border: 0; background: none; color: var(--muted); font-size: 15px; cursor: pointer; padding: 0 4px; }
.link-btn.danger { color: #B3261E; }

.note { background: var(--soft); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.note b { font-size: 13px; }
.note span { font-size: 15px; line-height: 1.45; }
.note.loading span { color: var(--muted); }

.rows { display: flex; flex-direction: column; }
.row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line-2); }
.row .nr { font-size: 13px; color: var(--muted); }
.row .name { font-size: 16px; font-weight: 500; }
.row .sub { font-size: 13px; color: var(--muted); }
.row .val { font-size: 15px; font-weight: 500; text-align: right; }
.row.link { cursor: pointer; text-decoration: none; }
.row.two { grid-template-columns: minmax(0, 1fr) auto; }
.row.date { grid-template-columns: 52px minmax(0, 1fr) auto; }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.stats > div { display: flex; flex-direction: column; gap: 2px; padding: 14px 0 14px 14px; border-left: 1px solid var(--line-2); min-width: 0; }
.stats > div:first-child { border-left: 0; padding-left: 0; }
.stats .k { font-size: 13px; color: var(--muted); }
.stats .v { font-size: 22px; font-weight: 600; white-space: nowrap; }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tile { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tile .k { font-size: 13px; color: var(--muted); }
.tile .v { font-size: 24px; font-weight: 600; }
.bar { height: 6px; border-radius: 3px; background: var(--line-2); overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--ink); }

.seg-choice { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.seg-choice button { min-height: 48px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); cursor: pointer; font-size: 15px; padding: 0 6px; }
.seg-choice button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); font-weight: 600; }

/* Übung */
.media { position: relative; height: 190px; border-radius: 16px; background: var(--soft); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #FFFFFF; transition: opacity 0.35s; }
.media img.off { opacity: 0; }
.media .ph { color: var(--muted); font-size: 13px; }
.ex-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.weight-btn { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; background: none; border: 0; padding: 0; cursor: pointer; text-align: right; flex: none; }
.weight-btn .w { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; white-space: nowrap; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 5px; }
.weight-btn .l { font-size: 13px; color: var(--muted); white-space: nowrap; }
.sets { display: flex; flex-direction: column; border-top: 1px solid var(--line-2); }
.set { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 54px; border-bottom: 1px solid var(--line-2); }
.set .lbl { font-size: 14px; color: var(--muted); }
.set.cur { min-height: 66px; }
.set.cur .lbl { color: var(--ink); font-weight: 600; }
.set.open { color: var(--faint); }
.set .ok { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--good); background: none; border: 0; cursor: pointer; padding: 8px 0; }
.stepper { display: flex; align-items: center; gap: 4px; }
.stepper button { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); font-size: 20px; cursor: pointer; }
.stepper .n { font-size: 20px; font-weight: 600; min-width: 44px; text-align: center; }
.done-btn { height: 44px; padding: 0 16px; border-radius: 12px; border: 0; background: var(--ink); color: var(--on-ink); font-size: 15px; font-weight: 600; cursor: pointer; }
.notice { background: var(--soft); border-radius: 12px; padding: 10px 14px; font-size: 14px; line-height: 1.4; }
.bottom-bar { display: grid; grid-template-columns: 104px minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.pause { height: 56px; border-radius: 14px; background: var(--soft); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.pause .k { font-size: 11px; color: var(--muted); }
.pause .v { font-size: 17px; font-weight: 600; }
.pause.run { background: var(--ink); color: var(--on-ink); }
.pause.run .k { color: inherit; opacity: 0.7; }
.pause.run .v { font-size: 20px; }
.pause.end { background: var(--good); color: #FFFFFF; }
.pause.end .k { color: inherit; opacity: 0.8; }

/* Blatt von unten */
.sheet-back { position: fixed; inset: 0; background: var(--scrim); display: flex; flex-direction: column; justify-content: flex-end; z-index: 30; }
.sheet { background: var(--bg); width: 100%; max-width: 480px; margin: 0 auto; border-radius: 22px 22px 0 0; padding: 22px 20px calc(env(safe-area-inset-bottom, 0px) + 22px); display: flex; flex-direction: column; gap: 16px; max-height: 88dvh; overflow-y: auto; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { min-height: 40px; padding: 0 14px; border-radius: 20px; border: 1px solid var(--border); background: var(--bg); font-size: 14px; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); font-weight: 600; }

/* Verlauf */
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.grid-head, .grid-row { display: grid; grid-template-columns: 44px repeat(7, minmax(0, 1fr)); gap: 6px; align-items: center; }
.grid-head span { font-size: 12px; color: var(--muted); text-align: center; }
.grid-row .kw { font-size: 12px; color: var(--muted); }
.cell { aspect-ratio: 1; border-radius: 8px; background: var(--soft); display: flex; align-items: center; justify-content: center; }
.cell.train { background: var(--ink); }
.cell.move::after { content: ""; width: 8px; height: 8px; border-radius: 4px; background: var(--faint); }
.cell.future { background: none; border: 1px dashed var(--border); }
.legend { display: flex; gap: 16px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* Formulare */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 14px; font-weight: 600; }
.input { height: 48px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); padding: 0 14px; font-size: 16px; width: 100%; }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px; background-repeat: no-repeat; }
.hint { font-size: 13px; color: var(--muted); line-height: 1.45; }
.err { font-size: 14px; color: #B3261E; }
.ok-msg { font-size: 14px; color: var(--good); }
.section { display: flex; flex-direction: column; gap: 14px; padding-top: 20px; border-top: 1px solid var(--line); }
.code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; background: var(--soft); border-radius: 10px; padding: 10px 12px; word-break: break-all; user-select: all; }
.steps-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 1.45; }
details { border-bottom: 1px solid var(--line-2); padding: 4px 0; }
summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; font-size: 15px; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; margin-left: auto; color: var(--muted); font-weight: 400; font-size: 20px; }
details[open] summary::after { content: "−"; }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; }
.check input { width: 20px; height: 20px; accent-color: var(--ink); }
.toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); transform: translateX(-50%); background: var(--ink); color: var(--on-ink); padding: 12px 18px; border-radius: 12px; font-size: 15px; z-index: 50; max-width: calc(100% - 32px); }
.spinner { width: 18px; height: 18px; border: 2px solid var(--line); border-top-color: var(--ink); border-radius: 50%; animation: spin 0.8s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } .media img { transition: none; } }
.net { font-size: 12px; color: var(--warn); font-weight: 600; min-height: 0; }
.net:empty { display: none; }
.tag { display: inline-block; vertical-align: 2px; margin-left: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: var(--good); background: var(--good-soft); border-radius: 6px; padding: 2px 7px; }
.weather { font-size: 14px; line-height: 1.45; color: var(--ink); margin: 0; padding-left: 10px; border-left: 2px solid var(--line); }
.weather span { color: var(--muted); }
.bigtime { font-size: 64px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.block-now { border-radius: 16px; padding: 16px 18px; background: var(--soft); display: flex; flex-direction: column; gap: 4px; }
.block-now .k { font-size: 12px; color: var(--muted); font-weight: 600; }
.block-now b { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.block-now .rem { font-size: 15px; color: var(--muted); }
.block-now.hard, .block-now.run { background: var(--ink); color: var(--on-ink); }
.block-now.hard .k, .block-now.run .k, .block-now.hard .rem, .block-now.run .rem { color: inherit; opacity: 0.75; }
.cell.cardio { background: none; border: 2px solid var(--ink); }
.map { height: 220px; border-radius: 14px; overflow: hidden; background: var(--soft); border: 1px solid var(--line); z-index: 0; }
.leaflet-container { font-family: var(--font); }
button.top-link { border: 0; background: none; cursor: pointer; font: inherit; font-size: 15px; font-weight: 600; color: var(--ink); }

/* Leiste unten */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  background: var(--bg); border-top: 1px solid var(--line); padding: 6px 8px calc(env(safe-area-inset-bottom, 0px) + 6px); max-width: 100%; }
.tabbar a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; text-decoration: none; color: var(--faint); font-size: 11px; font-weight: 600; border-radius: 10px; }
.tabbar a[aria-current="page"] { color: var(--ink); }
.tabbar .icon { width: 24px; height: 24px; }
body.has-tabs { --tabh: 64px; }
body.has-tabs .app { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 84px); }
/* Knöpfe, die stehen bleiben */
.cta { position: sticky; bottom: calc(var(--tabh, 0px) + env(safe-area-inset-bottom, 0px)); z-index: 5; background: linear-gradient(to top, var(--bg) 80%, transparent); padding-top: 14px; padding-bottom: 8px; margin-bottom: -8px; }
/* Woche */
.week-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: -6px; }
.wd { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.wd.today span { color: var(--ink); font-weight: 700; }
.wd i { width: 100%; max-width: 38px; aspect-ratio: 1; border-radius: 10px; background: var(--soft); display: flex; align-items: center; justify-content: center; }
.wd i.train { background: var(--ink); }
.wd i.cardio { background: none; border: 2px solid var(--ink); box-sizing: border-box; }
.wd i.move::after { content: ""; width: 7px; height: 7px; border-radius: 4px; background: var(--faint); }
.wd i.future { background: none; border: 1px dashed var(--border); box-sizing: border-box; }
.wd.today i:not(.train):not(.cardio) { border: 2px solid var(--ink); box-sizing: border-box; background: none; }
.goal-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; text-decoration: none; font-size: 15px; margin-top: -8px; }
.tag.warn { color: var(--warn); background: var(--soft); }
/* Wie letztes Mal */
.option.quick { background: var(--soft); border-color: var(--soft); }
/* Coach */
textarea.input.area { height: auto; min-height: 64px; padding: 12px 14px; line-height: 1.45; resize: vertical; font-family: inherit; }
.qa { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-top: 1px solid var(--line-2); }
.qa b { font-weight: 600; }
.qa p { line-height: 1.5; }
body.has-tabs .toast { bottom: calc(env(safe-area-inset-bottom, 0px) + 84px); }

/* Einladung, Einrichtung, Tour */
.funnel { gap: 22px; }
.option.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.option.multi .box { flex: none; width: 24px; height: 24px; border-radius: 7px; border: 1.5px solid var(--border); display: inline-flex; align-items: center; justify-content: center; }
.option.multi[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.option.multi[aria-pressed="true"] .box { background: var(--ink); border-color: var(--ink); }
.option.multi[aria-pressed="true"] .box::after { content: ""; width: 6px; height: 11px; border: solid var(--on-ink); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.input.codein { height: 64px; font-size: 28px; font-weight: 600; letter-spacing: 0.12em; text-align: center; text-transform: uppercase; }
.code.big { font-size: 30px; font-weight: 600; letter-spacing: 0.1em; text-align: center; padding: 18px 12px; word-break: normal; }
.terms { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.terms li b { display: block; font-size: 15px; }
.terms li span { display: block; font-size: 14px; color: var(--muted); line-height: 1.45; }
.demo { border: 1px solid var(--line); border-radius: 18px; padding: 18px 16px; background: var(--bg); pointer-events: none; }
.demo .option { min-height: 60px; }
.week-count { margin: -8px 0 -14px; }
.btn.danger-btn { background: #B3261E; color: #FFFFFF; }
a.option.quick { text-decoration: none; }

/* Einstellungen wie in der Kurve: Übersicht mit Gruppen, Unterseiten */
.pcard { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 16px; background: var(--soft); text-decoration: none; }
.pcard .pav { width: 52px; height: 52px; border-radius: 50%; background: var(--ink); color: var(--on-ink); display: inline-flex; align-items: center; justify-content: center; font-size: 21px; font-weight: 600; flex: none; }
.pcard .grow { flex: 1; min-width: 0; }
.pcard b { display: block; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.pcard .grow > span { display: block; font-size: 14px; color: var(--muted); }
.pcard > .icon, .srow > .icon { color: var(--faint); flex: none; }
.sgroup { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.srow { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 8px 14px; border-top: 1px solid var(--line-2); text-decoration: none; }
.srow:first-child { border-top: 0; }
.srow:active { background: var(--soft); }
.srow .si { width: 32px; height: 32px; border-radius: 9px; background: var(--soft); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.srow .si .icon { width: 19px; height: 19px; }
.srow .st { flex: 1; font-size: 16px; font-weight: 500; }
.srow .sv { font-size: 14px; color: var(--muted); }
.screen.sub > h1 + .section { border-top: 0; padding-top: 0; }
.screen.sub > h1 + .section > .stack-s:first-child > h2 { display: none; }

/* Schalter wie in der Kurve */
.sgh { font-size: 13px; font-weight: 600; color: var(--muted); padding-left: 4px; }
.scard { border: 1px solid var(--line); border-radius: 16px; padding: 2px 14px; }
.toggle { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 58px; padding: 10px 0; border-top: 1px solid var(--line-2); cursor: pointer; }
.scard > .toggle:first-child, .scard > :first-child { border-top: 0; }
.toggle .l { font-size: 16px; font-weight: 500; }
.toggle .l small { display: block; font-size: 13px; font-weight: 400; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.sw { position: relative; flex: none; width: 50px; height: 30px; }
.sw input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.sw span { position: absolute; inset: 0; border-radius: 15px; background: var(--line); transition: background 0.15s; }
.sw span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: transform 0.15s; }
.sw input:checked + span { background: var(--ink); }
.sw input:checked + span::after { transform: translateX(20px); }
.sw input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.trow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0 12px; font-size: 15px; color: var(--muted); flex-wrap: wrap; }
.trow .input { width: auto; height: 40px; padding: 0 10px; }
.daychips { display: flex; gap: 4px; }
.daychips button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg); font-size: 13px; cursor: pointer; padding: 0; }
.daychips button.on { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.dim { opacity: 0.55; }
.hidden { display: none !important; }
.goalcard { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 16px; background: var(--soft); text-decoration: none; }
.goalcard b { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.goalcard.empty b { font-size: 20px; }
.screen.sub .stack + .note { margin-top: 0; }
.screen.sub > h1 + .toggle { border-top: 0; }
.btn.logout { color: #B3261E; border-color: rgba(179, 38, 30, 0.35); }
@media (prefers-color-scheme: dark) { .btn.logout { color: #F2B8B5; border-color: rgba(242, 184, 181, 0.35); } }

/* Freunde */
.fcard { border: 1px solid var(--line); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.fhead { display: flex; align-items: center; gap: 12px; }
.fhead .grow { flex: 1; min-width: 0; }
.fhead b { display: block; font-size: 17px; font-weight: 600; }
.fhead .grow > span { display: block; font-size: 13px; color: var(--muted); }
.pav.sm, .pcard .pav.sm { width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--on-ink); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 600; flex: none; }
.week-strip.mini { margin-top: 0; gap: 4px; }
.week-strip.mini .wd span { font-size: 11px; }
.thumb { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.thumb[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.thumb .icon { width: 20px; height: 20px; }
.fcard .rows .row:last-child { border-bottom: 0; }
.tabbar a span { font-size: 11px; }