/* ═══════════════════════════════════════════════════════════════════
   DFQ 90s — Übertragung des Theme-Entwurfs
   Schrift Gunplay (Typodermic Fonts, lizenziert), Grafiken als WebP
   statt PNG: 1,4 MB wurden zu 113 KB bei gleicher Optik.
   ═══════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Gunplay";
  src: url("/fonts/gunplay-regular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* ── SOLDIER: echte, kaufbasierte Ausrüstung ───────────────────── */
.soldier-title {
  display: none;
  margin: 0 16px 8px;
  font: clamp(24px, 6.6vw, 32px)/1 Gunplay, Oswald, sans-serif;
  letter-spacing: .05em;
  white-space: nowrap;
}
.soldier-dash {
  height: 570px;
  margin-inline: 16px;
  grid-template-columns: minmax(0, 1fr) minmax(166px, 44%);
  background: #050604;
}
html body #app .dash.soldier-dash { height: 570px !important; }
.soldier-dash .dash-avatar {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  background: #050604;
}
.soldier-dash .dash-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}
.soldier-body-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.soldier-body-choice button {
  min-width: 0;
  min-height: 44px;
  border: 1px solid #4a5135;
  background: #11140e;
  color: #b9bdac;
  font: 10px Gunplay, Oswald, sans-serif;
}
.soldier-body-choice button.on {
  border-color: var(--gold);
  color: #efd273;
  background: #272b18;
}
.soldier-dash .dash-gear-head {
  height: 48px;
}
.soldier-dash .dash-gear-head progress {
  width: 100%;
  height: 6px;
  border: 0;
  background: rgba(0,0,0,.5);
  appearance: none;
}
.soldier-dash .dash-gear-head progress::-webkit-progress-bar { background: rgba(0,0,0,.5); }
.soldier-dash .dash-gear-head progress::-webkit-progress-value { background: var(--gold); }
.soldier-dash .dash-gear-head progress::-moz-progress-bar { background: var(--gold); }
.soldier-gear-grid {
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin-top: 4px;
}
.soldier-dash .soldier-gear {
  min-height: 92px;
  padding: 4px;
  border: 2px solid #8f7931;
  background: linear-gradient(155deg, rgba(68, 73, 38, .92), rgba(13, 16, 10, .98));
  box-shadow: inset 0 0 0 2px #171a10;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}
.soldier-gear .gear-img {
  position: relative;
  overflow: hidden;
}
.soldier-gear .gear-img img {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  object-fit: cover;
  object-position: center 22%;
  transform: scale(2.4);
  transform-origin: center 22%;
}
.soldier-gear .gear-name {
  min-height: 35px;
  padding: 3px 2px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  font-size: 9px;
}
.soldier-gear .gear-name span,
.soldier-gear .gear-name small { display: block; }
.soldier-gear .gear-name small {
  color: #b9bdac;
  font: 8.5px "Share Tech Mono", monospace;
  letter-spacing: .06em;
}
.soldier-gear.locked { filter: saturate(.45); }
.soldier-gear.locked .gear-img::after {
  content: "🔒";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(3,4,2,.52);
  font-size: 18px;
}
.soldier-gear.equipped {
  filter: none;
  outline: 2px solid var(--gold);
  outline-offset: -4px;
}
.soldier-fehler {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  color: #b9bdac;
  font: 10px "Share Tech Mono", monospace;
  text-align: center;
}
.soldier-goal-row { grid-template-columns: minmax(0,1fr); }
.soldier-goal-coins { width: 100%; }

@media (max-width: 390px) {
  .soldier-dash {
    height: 550px;
    grid-template-columns: minmax(0, 1fr) 162px;
  }
  .soldier-dash .dash-name span { font-size: 16px; }
  .soldier-gear .gear-name { font-size: 8.5px; }
}

/* ── Pilot: Einsatzserie nach dem Gamification-Modell ─────────────── */
.streak-pilot { max-width: 720px; margin: 0 auto; }
.streak-status { min-height: 64px; display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; border-bottom: 1px solid var(--line); }
.streak-status > div { min-width: 0; }
.streak-status > div:not(:first-child) { text-align: right; }
.streak-status strong, .streak-status b, .streak-status small { display: block; }
.streak-status strong { font-family: Gunplay, sans-serif; font-size: 14px; }
.streak-status b { color: var(--gold-text, var(--gold)); font-family: "Share Tech Mono", monospace; font-size: 15px; }
.streak-status small { color: var(--c-sek, #b9bdac); font: 9px "Share Tech Mono", monospace; letter-spacing: .09em; }
.streak-nav { display: flex; gap: 4px; margin: 12px 0; overflow-x: auto; scrollbar-width: none; }
.streak-nav button { min-width: max-content; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); background: var(--s-0, #0e110c); color: var(--c-sek, #b9bdac); font: 11px Gunplay, sans-serif; }
.streak-nav button.on { color: var(--gold-text, #efd273); border-color: var(--gold); box-shadow: inset 0 -2px var(--gold); }
.streak-held { min-height: 150px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px; border: 1px solid var(--b-1, #343a27); background: linear-gradient(105deg,#171c10 0 58%,#252918); overflow: hidden; }
.streak-held span, .streak-held b { display: block; }
.streak-held span { color: var(--c-sek, #b9bdac); font: 10px "Share Tech Mono", monospace; letter-spacing: .14em; }
.streak-held strong { display: block; color: var(--gold-text, #f7f5e9); font: 68px/1 Gunplay, sans-serif; text-shadow: 0 3px #000; }
.streak-held b { margin-top: 4px; color: var(--gold-text, #efd273); font: 15px Gunplay, sans-serif; }
.streak-held > i { flex: 0 0 92px; height: 106px; display: grid; place-items: center; clip-path: polygon(50% 0,76% 38%,91% 68%,72% 93%,50% 100%,24% 91%,8% 64%,28% 37%); background: linear-gradient(#d6b64c,#6e742f); color: #171a0e; font-style: normal; font-size: 38px; }
.streak-platte { margin-top: 12px; padding: 16px; border: 1px solid var(--line); background: linear-gradient(150deg,rgba(255,255,255,.025),transparent 45%),#11140e; }
.streak-platte > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.streak-platte header span { display: block; margin-bottom: 3px; color: var(--c-sek, #b9bdac); font: 9px "Share Tech Mono", monospace; letter-spacing: .15em; }
.streak-platte h1, .streak-platte h2 { margin: 0; font: 20px Gunplay, sans-serif; }
.streak-platte header > small { padding: 6px 8px; border: 1px solid #4f5434; color: var(--gold-text, #efd273); font: 9px "Share Tech Mono", monospace; white-space: nowrap; }
.streak-fortschritt { width: 100%; height: 8px; margin: 24px 0 12px; border: 1px solid #414834; background: var(--s-3, #292e23); appearance: none; }
.streak-fortschritt::-webkit-progress-bar { background: var(--s-3, #292e23); }
.streak-fortschritt::-webkit-progress-value { background: linear-gradient(90deg,#727946,#c3a23e); }
.streak-fortschritt::-moz-progress-bar { background: linear-gradient(90deg,#727946,#c3a23e); }
.streak-ziele { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; }
.streak-ziele > div { min-width: 0; text-align: center; }
.streak-ziele b { width: 34px; height: 34px; margin: 0 auto 7px; display: grid; place-items: center; transform: rotate(45deg); border: 1px solid var(--b-1, #4a5140); background: var(--s-0, #0b0d09); color: var(--c-sek, #b9bdac); font: 11px "Share Tech Mono", monospace; }
.streak-ziele .erreicht b { color: #080a07; border-color: #9ba05f; background: #727946; }
.streak-ziele .naechstes b { color: #080a07; border-color: #efd273; background: #c3a23e; box-shadow: 0 0 14px rgba(195,162,62,.35); }
.streak-ziele small { color: var(--c-sek, #b9bdac); font: 8px "Share Tech Mono", monospace; white-space: nowrap; }
.streak-bilanz { display: grid; grid-template-columns: 1fr 1fr; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.streak-bilanz > div { padding: 4px 12px; }
.streak-bilanz > div + div { border-left: 1px solid var(--line); }
.streak-bilanz strong, .streak-bilanz small { display: block; }
.streak-bilanz strong { font: 28px/1 Gunplay, sans-serif; }
.streak-bilanz small { margin-top: 4px; color: var(--c-sek, #b9bdac); font: 8px "Share Tech Mono", monospace; }
.streak-wochentage, .streak-tage { display: grid; grid-template-columns: repeat(7,1fr); gap: 6px; }
.streak-wochentage { margin: 18px 0 7px; color: var(--c-sek, #b9bdac); font: 8px "Share Tech Mono", monospace; text-align: center; }
.streak-tag { position: relative; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--b-1, #24291f); background: var(--s-0, #0b0d09); color: var(--c-prim, #d8d9d0); font: 11px "Share Tech Mono", monospace; }
.streak-tag.leer { visibility: hidden; }
.streak-tag.aktiv { color: var(--gold-text, #f0eabb); border-color: #61673f; background: linear-gradient(145deg,#353a23,#1b1f14); }
.streak-tag.aktiv::after { content: "▲"; position: absolute; right: 2px; bottom: 1px; color: var(--gold-text, var(--gold)); font-size: 6px; }
.streak-tag.heute { outline: 2px solid var(--gold); outline-offset: -2px; color: var(--gold-text, #efd273); }
.streak-legende { display: flex; gap: 18px; margin-top: 12px; color: var(--c-sek, #b9bdac); font: 8px "Share Tech Mono", monospace; }
.streak-legende i { display: inline-block; width: 9px; height: 9px; margin-right: 5px; vertical-align: -1px; background: #727946; }
.streak-legende span + span i { border: 1px solid var(--gold); background: transparent; }
.streak-track { width: 100%; min-height: 56px; margin-top: 12px; border: 13px solid transparent; border-image: var(--btn-gold) 46 fill / 13px stretch; background: none; color: #0a0b07; font: 14px Gunplay, sans-serif; letter-spacing: .04em; }

@media (max-width: 374px) {
  .streak-held strong { font-size: 58px; }
  .streak-held > i { flex-basis: 76px; height: 90px; }
  .streak-status { gap: 8px; }
  .streak-platte { padding: 12px; }
  .streak-bilanz > div { padding-inline: 6px; }
}

:root {
  /* Werte aus dem Entwurf */
  --gold: #c3a23e;
  --gold-dim: #8a7433;
  --olive: #62683a;
  --olive-lit: #7c8050;
  --ink: #080a07;
  --panel: #11140e;
  --panel-2: #171a11;
  --line: #2b3025;
  --text: #efeee6;
  --text-dim: #9aa08a;

  --btn-olive: url("/ui/dfq-button-olive.webp");
  --btn-dark: url("/ui/dfq-button-dark.webp");
  --btn-gold: url("/ui/dfq-button-gold.webp");
  --btn-compact: url("/ui/dfq-button-compact.webp");
  --rank-gold: url("/ui/dfq-rank-gold.webp");
  --rank-silver: url("/ui/dfq-rank-silver.webp");
  --rank-bronze: url("/ui/dfq-rank-bronze.webp");
}

body,
.panel h1,
.panel .panel-title,
.section-title,
.header .mark {
  font-family: "Gunplay", "Black Ops One", sans-serif;
}
.panel .panel-title,
.section-title {
  letter-spacing: 0.04em;
}

/* ── Kopfzeile mit Bereichsangabe ───────────────────────────────── */
.topbar {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--ink-flaeche, var(--ink));
}
.burger {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
}
.burger span {
  display: block;
  width: 22px;
  height: 2px;
  margin: 3px 0;
  background: currentColor;
}
.topbar-where {
  min-width: 0;
}
.topbar-where small {
  display: block;
  font-family: Oswald, sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--gold-text, var(--gold));
  text-transform: uppercase;
}
.topbar-where strong {
  display: block;
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 21px;
  letter-spacing: 0.03em;
  color: var(--text);
  text-transform: uppercase;
}
.topbar-me {
  display: grid;
  place-items: center;
  min-width: 52px;
  height: 52px;
  padding: 0 10px;
  border: 1px solid var(--gold-dim);
  background: var(--panel);
  color: var(--gold-text, var(--gold));
  font-family: "Gunplay", sans-serif;
  font-size: 15px;
  letter-spacing: 0.06em;
  cursor: pointer;
}

/* ── Schubladenmenü ─────────────────────────────────────────────── */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(4, 5, 3, 0.86);
}
.drawer-inner {
  width: min(320px, 84vw);
  height: 100%;
  padding: 20px 16px;
  border-right: 1px solid var(--line);
  background: var(--ink-flaeche, var(--ink));
  overflow-y: auto;
}
.drawer h3 {
  font-family: Oswald, sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: var(--gold-text, var(--gold));
  text-transform: uppercase;
  margin: 20px 0 8px;
}
.drawer h3:first-child {
  margin-top: 0;
}
.drawer button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 14px 14px;
  margin-bottom: 6px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  font-family: Oswald, sans-serif;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.drawer button.on {
  border-color: var(--gold-dim);
  background: var(--olive);
}

/* ── Wochen-Kachel mit Countdown ────────────────────────────────── */
.roundcard {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: start;
  padding: 20px 18px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  background: var(--panel);
}
.roundcard .eyebrow {
  font-family: Oswald, sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: var(--gold-text, var(--gold));
  text-transform: uppercase;
}
.roundcard .kw {
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: clamp(28px, 8vw, 38px);
  line-height: 1.08;
  color: var(--text);
  margin: 6px 0 10px;
}
.roundcard p {
  font-family: Oswald, sans-serif;
  font-size: 12.5px;
  line-height: 1.55;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  text-transform: uppercase;
  max-width: 30ch;
}
.countdown {
  display: grid;
  grid-template-columns: auto auto;
  gap: 0 8px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--gold-dim);
  background: var(--ink-flaeche, var(--ink));
}
.countdown b {
  grid-row: span 2;
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 32px;
  line-height: 1;
  color: var(--gold-text, var(--gold));
}
.countdown span {
  font-family: "Share Tech Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--text-dim);
}

/* ── Abschnittsmarke  /// LIVE-BOARD ────────────────────────────── */
.eyebrow-rule {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0 8px;
  font-family: Oswald, sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: var(--gold-text, var(--gold));
  text-transform: uppercase;
}
.eyebrow-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* ── Ranglistenzeilen mit Instagram-Namen ───────────────────────── */
.rankrow {
  grid-template-columns: 44px 1fr auto;
}
.rankrow .who small {
  display: block;
  font-family: "Share Tech Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  text-transform: none;
  margin-top: 2px;
}
.rankrow .medal {
  width: 40px;
  height: 40px;
  clip-path: none;
  background-size: cover;
  background-position: center;
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 15px;
  color: #241f0c;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}
.rankrow .medal.m1 {
  background-image: var(--rank-gold);
}
.rankrow .medal.m2 {
  background-image: var(--rank-silver);
}
.rankrow .medal.m3 {
  background-image: var(--rank-bronze);
}
.rankrow .medal.mx {
  background-image: none;
  background-color: var(--panel);
  border: 1px solid var(--line);
  color: var(--text-dim);
  text-shadow: none;
}

/* ── Knöpfe mit den Texturen aus dem Entwurf ────────────────────── */
.btn {
  border: none;
  background:
    var(--btn-olive) center / 100% 100% no-repeat,
    linear-gradient(180deg, var(--olive-lit), var(--olive));
  font-family: "Gunplay", "Black Ops One", sans-serif;
  letter-spacing: 0.1em;
}
.btn.ghost {
  background:
    var(--btn-dark) center / 100% 100% no-repeat,
    var(--panel-2);
}
.btn.quiet {
  background:
    var(--btn-dark) center / 100% 100% no-repeat,
    transparent;
  color: var(--gold-text, var(--gold));
}
.btn.small,
.button.small {
  background:
    var(--btn-compact) center / 100% 100% no-repeat,
    var(--panel-2);
}
/* Die Texturen bringen ihren eigenen Rahmen mit, Eckwinkel entfallen */
.btn.brk::after {
  content: none;
}

/* ═══ Korrekturen ══════════════════════════════════════════════════ */

/* Namen in den Ranglisten in der Theme-Schrift, nicht in Oswald */
.rankrow .who,
.week-row strong,
.roundcard .kw {
  font-family: "Gunplay", "Black Ops One", sans-serif;
}
.rankrow .who {
  font-size: 16px;
  letter-spacing: 0.06em;
}

/* Medaillen: die Groesse muss in derselben Regel stehen wie das Bild,
   sonst gewinnt die Kurzschreibweise aus theme.css und setzt sie auf auto. */
.rankrow .medal.m1,
.rankrow .medal.m2,
.rankrow .medal.m3 {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  background-color: transparent;
  border: none;
}
.rankrow .medal.m1 {
  background-image: var(--rank-gold);
}
.rankrow .medal.m2 {
  background-image: var(--rank-silver);
}
.rankrow .medal.m3 {
  background-image: var(--rank-bronze);
}
.rankrow .medal {
  width: 44px;
  height: 44px;
  font-size: 16px;
  color: #1c1808;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}
.rankrow {
  grid-template-columns: 48px 1fr auto;
}

/* Knoepfe als Neunerschnitt: die verzierten Ecken bleiben scharf,
   nur die Mitte wird gedehnt. Vorher wurde die ganze Textur verzerrt. */
.btn {
  border: 13px solid transparent;
  border-image: var(--btn-olive) 46 39 46 44 fill / 13px stretch;
  background: none;
  padding: 5px 10px;
  min-height: 54px;
}
.btn.ghost {
  border-image: var(--btn-dark) 46 39 44 44 fill / 13px stretch;
}
.btn.quiet {
  border-image: var(--btn-gold) 46 39 45 44 fill / 13px stretch;
}
.btn.small,
.button.small {
  border: 10px solid transparent;
  border-image: var(--btn-compact) 33 28 30 32 fill / 10px stretch;
  background: none;
  min-height: 0;
}
.seg button {
  border: 12px solid transparent;
  border-image: var(--btn-dark) 46 39 44 44 fill / 12px stretch;
  background: none;
}
.seg button.on {
  border-image: var(--btn-olive) 46 39 46 44 fill / 12px stretch;
}
.seg button.brk::after {
  content: none;
}

/* Kopfzeile: Postfach neben dem Kuerzel */
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.topbar-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--gold-text, var(--gold));
  cursor: pointer;
}
.topbar-icon svg {
  width: 20px;
  height: 20px;
}

/* ── Reiterleiste, im Stil der Theme-Platten ─────────────────────── */
.tabs {
  display: grid;
  grid-auto-flow: column;
  gap: 5px;
  padding: 10px 12px 0;
  background: var(--ink-flaeche, var(--ink));
  border-bottom: 1px solid var(--line);
}
.tabs .tab {
  border: 11px solid transparent;
  border-image: var(--btn-dark) 46 39 44 44 fill / 11px stretch;
  background: none;
  color: var(--text-dim);
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  padding: 4px 2px;
  min-height: 46px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tabs .tab.on {
  border-image: var(--btn-olive) 46 39 46 44 fill / 11px stretch;
  color: var(--text);
}
@media (max-width: 430px) {
  .tabs .tab {
    font-size: 10.5px;
    border-width: 9px;
    border-image-width: 9px;
    min-height: 42px;
  }
}
/* Auf breiten Bildschirmen lief die Anmeldung ueber die volle Breite.
   Eine Spalte in Handybreite liest sich deutlich besser. */
@media (min-width: 620px) {
  .seg,
  .seg ~ .panel,
  .seg ~ #elite-preview,
  .seg ~ .elite-card {
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Hinweis, dass man wischen kann */
.swipe-hint {
  font-family: "Share Tech Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: #6d7263;
  text-align: center;
  padding: 6px 0 2px;
}

/* ═══════════════════════════════════════════════════════════════════
   Proportionen nach Apples Gestaltungsregeln
   Durchgehender Randabstand, klare Typo-Staffelung, Versalien nur
   für kurze Etiketten, ruhigerer vertikaler Rhythmus.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --gutter: 16px;
}

/* ── 1) Ein Randabstand für alles ───────────────────────────────── */
.topbar {
  padding: 10px var(--gutter);
  gap: 10px;
}
.content {
  padding-inline: var(--gutter);
}

/* Reiterleiste läuft nicht mehr über den Rand hinaus, sondern
   scrollt waagerecht, wenn nicht alle Reiter hineinpassen. */
.tabs {
  display: flex;
  gap: 6px;
  padding: 10px var(--gutter) 12px;
  margin: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.tabs::-webkit-scrollbar {
  display: none;
}
.tabs .tab {
  flex: 0 0 auto;
  scroll-snap-align: start;
  min-height: 44px; /* Apple: 44pt Mindestgröße für Tippziele */
  padding: 2px 6px;
  font-size: 12px;
}

/* ── 2) Kopfzeile ruhiger ───────────────────────────────────────── */
.topbar-where strong {
  font-size: 19px;
  letter-spacing: 0.02em;
}
.topbar-where small {
  font-size: 10px;
  letter-spacing: 0.16em;
}
.burger,
.topbar-icon,
.topbar-me {
  width: 44px;
  height: 44px;
  min-width: 44px;
}
.topbar {
  grid-template-columns: 44px 1fr auto;
}
.topbar-me {
  border-color: var(--line);
  font-size: 14px;
}

/* ── 3) Wochen-Kachel: Überschrift bricht nicht mehr um ─────────── */
.roundcard {
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 18px 16px;
  align-items: center;
}
.roundcard .kw {
  font-size: clamp(24px, 6.6vw, 32px);
  white-space: nowrap;
  margin: 4px 0 8px;
}
.roundcard .eyebrow {
  font-size: 10px;
  letter-spacing: 0.18em;
}
/* Fließtext: normale Schreibweise, lesbare Größe, mehr Kontrast */
.roundcard p {
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-sek, #b9bdac);
  max-width: 34ch;
}

/* Countdown: kompakte Nebeninformation statt zweiter Überschrift */
.countdown {
  grid-template-columns: auto;
  justify-items: center;
  gap: 2px;
  padding: 10px 14px;
  min-width: 74px;
}
.countdown b {
  grid-row: auto;
  font-size: 26px;
}
.countdown span {
  font-size: 8.5px;
  letter-spacing: 0.12em;
  white-space: nowrap;
}
.countdown span + span {
  margin-top: -3px;
}

/* ── 4) Abschnittsmarken enger an ihren Inhalt ──────────────────── */
.eyebrow-rule {
  margin: 22px 0 4px;
  font-size: 10px;
}
.content .section-title {
  font-size: 20px;
  letter-spacing: 0.02em;
  margin-bottom: 10px;
}

/* ── 5) Suchfeld und Zeilen: ruhigerer Rhythmus ─────────────────── */
.inp.search {
  padding: 12px 14px;
  font-size: 14px;
  margin-bottom: 10px;
}
.inp.search::placeholder {
  font-size: 12.5px;
  letter-spacing: 0.08em;
}
.history-suche {
  display: grid;
  gap: 8px;
  margin: 0 0 16px;
}

.history-admin-auswahl {
  display: grid;
  gap: 6px;
  margin: 0 0 14px;
}

.history-admin-auswahl > span {
  color: var(--muted);
  font-family: var(--font-head);
  font-size: 11px;
  letter-spacing: .13em;
}

.history-admin-auswahl select {
  min-height: 48px;
  font-size: 16px;
}

.rekrut-karte {
  display: grid;
  gap: 14px;
  margin-bottom: 12px;
}

.rekrut-status {
  display: block;
  margin-top: 8px;
  color: var(--accent);
  font-family: var(--font-head);
  font-size: 12px;
  letter-spacing: .04em;
}
.history-suche label {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.history-suche label span {
  color: var(--c-sek, #b9bdac);
  font: 10px "Share Tech Mono", monospace;
  letter-spacing: .1em;
}
.history-suche .inp.search {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  margin: 0;
  text-transform: none;
}
.history-kategorie-block {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.history-kategorie-block > span {
  color: var(--c-sek, #b9bdac);
  font: 10px "Share Tech Mono", monospace;
  letter-spacing: .1em;
}
.history-kategorien {
  display: flex;
  gap: 8px;
  width: 100%;
  padding: 0 0 4px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.history-kategorien::-webkit-scrollbar { display: none; }
.history-chip {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 8px 13px;
  border: 1px solid #62683a;
  border-radius: 0;
  background: var(--s-0, #0b0e09);
  color: var(--c-prim, #d4d6cb);
  font: 12px Gunplay, sans-serif;
  white-space: nowrap;
  scroll-snap-align: start;
}
.history-chip.on {
  border-color: #c3a23e;
  background: linear-gradient(145deg, #4c502d, #242817);
  color: var(--gold-text, #fff6ce);
  box-shadow: inset 0 -3px #c3a23e;
}
.adm-verlauf-filter {
  display: grid;
  gap: 4px;
  margin: 0 0 12px;
}
.adm-verlauf-filter span {
  color: var(--c-sek, #b9bdac);
  font: 10px "Share Tech Mono", monospace;
  letter-spacing: .1em;
}
.adm-verlauf-filter select {
  min-height: 48px;
  padding: 0 36px 0 12px;
  border: 1px solid #8a7433;
  border-radius: 0;
  background: var(--s-0, #0b0e09);
  color: var(--c-prim, #efeee6);
  font: 13px Gunplay, sans-serif;
}
.pruefen-filter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, .38fr);
  gap: 8px;
  margin: 0 0 12px;
}
.pruefen-filter label { display: grid; gap: 4px; min-width: 0; }
.pruefen-filter label span {
  color: var(--c-sek, #b9bdac);
  font: 10px "Share Tech Mono", monospace;
  letter-spacing: .1em;
}
.pruefen-filter .inp.search { min-width: 0; min-height: 48px; margin: 0; }
.pruefen-filter select {
  min-height: 48px;
  padding: 0 36px 0 12px;
  border: 1px solid #8a7433;
  border-radius: 0;
  background: var(--s-0, #0b0e09);
  color: var(--c-prim, #efeee6);
  font: 13px Gunplay, sans-serif;
}
@media (max-width: 520px) {
  .pruefen-filter { grid-template-columns: 1fr; }
}
.history-suche small {
  grid-column: 1 / -1;
  min-height: 16px;
  color: var(--c-sek, #b9bdac);
  font: 10px/1.4 "Share Tech Mono", monospace;
}
@media (max-width: 520px) {
  .history-suche { gap: 8px; }
  .history-suche small { grid-column: auto; }
}
.rankrow {
  padding: 10px 12px;
  margin-bottom: 6px;
  gap: 12px;
}
.rankrow .medal {
  width: 40px;
  height: 40px;
  font-size: 15px;
}
.rankrow {
  grid-template-columns: 40px 1fr auto;
}
.rankrow .who {
  font-size: 15px;
  line-height: 1.15;
}
.rankrow .who small {
  font-size: 10.5px;
  margin-top: 3px;
}
.rankrow .val {
  font-size: 17px;
  line-height: 1.1;
}
.rankrow .val small {
  font-size: 8.5px;
  margin-top: 1px;
}

/* Die Elite-Vorschau folgt denselben Maßen */
.elite-card {
  padding: 14px 12px;
}

/* ═══════════════════════════════════════════════════════════════════
   Ein Gold, keine Eckwinkel
   Der Entwurf kennt genau einen Goldton. Vorher liefen drei
   nebeneinander: #c3a23e aus dem Entwurf, #c9a84a aus dem alten
   Design und #d8bd6a, den ich fuer die Eckwinkel erfunden hatte.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --gold: #c3a23e;
  --gold-dim: #7f6a2a; /* derselbe Ton, nur abgedunkelt */
}

/* Eckwinkel vollstaendig abschalten. Die Metallplatten bringen ihren
   eigenen Rahmen mit, ein zweiter Rahmen darueber wirkt wie ein Fehler.
   Bewusst mit !important: .brk steht an sehr vielen Stellen im Markup,
   und die Winkel sollen ausnahmslos verschwinden. */
.brk::after,
.btn.brk::after,
.seg button.brk::after,
.panel.brk::after,
.elite-card.brk::after {
  content: none !important;
}

/* Der aktive Segmentreiter hatte unter der Textur einen 12 px dicken
   Goldrand. An den Ecken schaute der hervor - das waren die hellen
   Rahmen. Die Textur liefert den Rahmen bereits. */
.seg button,
.seg button.on,
.tabs .tab,
.tabs .tab.on,
.btn,
.btn.ghost,
.btn.quiet,
.button.small {
  border-color: transparent;
}

/* Reste des alten, helleren Goldtons angleichen */
.account-gear,
.logout-btn,
.chip.on,
.secure,
.claim-result,
.link-right,
.elite-head button,
.legal a,
button.link {
  border-color: var(--gold-dim);
}
.link-right,
.elite-head button,
.legal a,
button.link,
.eyebrow-rule,
.roundcard .eyebrow,
.topbar-where small,
.countdown b,
.rankrow .val,
.drawer h3 {
  color: var(--gold-text, var(--gold));
}

/* ═══════════════════════════════════════════════════════════════════
   Echtes Logo und kompaktere Masse
   Knoepfe rund 15 % flacher, Schriften rund 10 % kleiner.
   Tippziele bleiben bei mindestens 44 px - das ist Apples Untergrenze
   und wird auch dann nicht unterschritten, wenn optisch weniger reicht.
   ═══════════════════════════════════════════════════════════════════ */

.header {
  padding: 16px var(--gutter) 0;
  text-align: center;
}
.auth-header-row {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
}
.header .logo {
  display: block;
  width: 78px;
  height: auto;
  margin: 0;
}
.auth-help {
  position: relative;
  flex: none;
}
.auth-help summary {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--gold-dim);
  background: var(--panel);
  color: var(--gold-text, var(--gold));
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 18px;
  cursor: pointer;
  list-style: none;
}
.auth-help summary::-webkit-details-marker {
  display: none;
}
.auth-help summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.auth-help[open] summary {
  background: var(--olive);
  color: var(--text);
}
.auth-help-panel {
  position: absolute;
  top: 52px;
  right: 0;
  width: min(310px, calc(100vw - (var(--gutter) * 2)));
  padding: 14px;
  border: 1px solid var(--gold-dim);
  background: var(--panel);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.55);
  text-align: left;
}
.auth-help-panel strong {
  display: block;
  margin-bottom: 8px;
  color: var(--gold-text, var(--gold));
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 13px;
  letter-spacing: 0.08em;
}
.auth-help-panel p {
  margin: 0 0 8px;
  color: var(--text-dim);
  font-family: Oswald, sans-serif;
  font-size: 14px;
  line-height: 1.45;
}
.auth-help-panel p:last-child {
  margin-bottom: 0;
}
.header .motto {
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.38em;
}
.star-rule {
  padding: 10px 0;
}
.star-rule span {
  font-size: 11px;
}

/* ── Knoepfe flacher ────────────────────────────────────────────── */
.btn {
  border-width: 11px;
  border-image-width: 11px;
  min-height: 46px;
  padding: 2px 10px;
  font-size: 12.5px;
  letter-spacing: 0.09em;
  margin-bottom: 8px;
}
.btn svg {
  width: 16px;
  height: 16px;
}
.seg button {
  border-width: 10px;
  border-image-width: 10px;
  padding: 5px 6px;
  font-size: 11.5px;
  min-height: 44px;
}
.seg button svg {
  width: 15px;
  height: 15px;
}
.button.small,
.btn.small {
  border-width: 8px;
  border-image-width: 8px;
  font-size: 10.5px;
  padding: 2px 8px;
}
.tabs .tab {
  font-size: 11px;
  min-height: 44px; /* Untergrenze, nicht weiter verkleinern */
}

/* ── Schriften rund 10 Prozent kleiner ──────────────────────────── */
.panel .panel-title {
  font-size: 24px;
}
.panel .panel-sub {
  font-size: 11px;
}
.content .section-title {
  font-size: 18px;
}
.topbar-where strong {
  font-size: 17px;
}
.topbar-where small {
  font-size: 9px;
}
.roundcard .kw {
  font-size: clamp(22px, 6vw, 29px);
}
.roundcard .eyebrow {
  font-size: 9px;
}
.roundcard p {
  font-size: 12.5px;
}
.countdown b {
  font-size: 23px;
}
.countdown span {
  font-size: 8px;
}
.eyebrow-rule {
  font-size: 9px;
}
.fld > label {
  font-size: 11px;
}
.fld input {
  font-size: 13.5px;
  padding: 12px 13px;
}
.fld input::placeholder {
  font-size: 12.5px;
}
.inp.search {
  font-size: 12.5px;
  padding: 10px 13px;
}
.inp.search::placeholder {
  font-size: 11.5px;
}
.rankrow .who {
  font-size: 13.5px;
}
.rankrow .who small {
  font-size: 9.5px;
}
.rankrow .val {
  font-size: 15px;
}
.rankrow .val small {
  font-size: 8px;
}
.rankrow .medal {
  width: 36px;
  height: 36px;
  font-size: 13.5px;
}
.rankrow {
  grid-template-columns: 36px 1fr auto;
  padding: 9px 11px;
}

/* ═══ Elite Coins · Hall of Fame ═══════════════════════════════════
   Elite Coins sind die langfristige Auszeichnung, nicht die normale
   Wochenwertung. Deshalb bekommt diese Seite eine eigene Zeremonie:
   Emblem, Lichtkranz und ein deutliches Siegerpodest fuer die Top 3. */
.elite-hall,
.ranking-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 238px;
  margin: 4px 0 18px;
  padding: 24px 18px 19px;
  border: 1px solid var(--gold-dim);
  background:
    radial-gradient(circle at 50% 32%, rgba(195, 162, 62, 0.2), transparent 31%),
    linear-gradient(145deg, rgba(195, 162, 62, 0.1), transparent 42%),
    var(--panel-deep);
  text-align: center;
  box-shadow:
    inset 0 0 0 4px rgba(8, 9, 5, 0.72),
    inset 0 0 32px rgba(195, 162, 62, 0.08),
    0 14px 34px rgba(0, 0, 0, 0.28);
}
.elite-hall::before,
.elite-hall::after,
.ranking-hero::before,
.ranking-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 110px;
  height: 110px;
  border: 1px solid rgba(195, 162, 62, 0.22);
  transform: rotate(45deg);
}
.elite-hall::before,
.ranking-hero::before { left: -72px; top: -72px; }
.elite-hall::after,
.ranking-hero::after { right: -72px; bottom: -72px; }
.elite-hall-stars,
.ranking-hero-stars {
  color: var(--gold-text, var(--gold));
  font-size: 12px;
  letter-spacing: 0.24em;
  opacity: 0.82;
}
.elite-hall-emblem {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 8px auto 9px;
  border: 1px solid var(--gold);
  outline: 4px double rgba(195, 162, 62, 0.28);
  outline-offset: 4px;
  background: radial-gradient(circle, #d8bd6a 0 18%, #80691e 20% 54%, #17160d 56%);
  color: var(--gold-text, #f4dc82);
  font-size: 25px;
  text-shadow: 0 0 12px rgba(244, 220, 130, 0.72);
  transform: rotate(45deg);
}
.elite-hall-emblem::first-letter { transform: rotate(-45deg); }
.ranking-hero-brand {
  display: grid;
  place-items: center;
  width: 88px;
  height: 62px;
  margin: 5px auto 7px;
  border: 1px solid rgba(195, 162, 62, 0.48);
  background: radial-gradient(circle, rgba(216, 189, 106, 0.16), transparent 68%);
  box-shadow: inset 0 0 0 4px rgba(8, 9, 5, 0.58);
}
.ranking-hero-brand img {
  display: block;
  width: 68px;
  height: auto;
  filter: drop-shadow(0 0 10px rgba(216, 189, 106, 0.28));
}
.elite-hall-kicker,
.ranking-hero-kicker {
  margin-top: 12px;
  font-family: "Share Tech Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.24em;
  color: var(--gold-text, var(--gold));
}
.elite-hall h1,
.ranking-hero h1 {
  margin: 5px 0 4px;
  font: 30px/1 "Gunplay", "Black Ops One", sans-serif;
  letter-spacing: 0.055em;
  color: var(--text);
  text-shadow: 0 2px 0 #000, 0 0 22px rgba(195, 162, 62, 0.18);
}
.elite-hall p,
.ranking-hero p {
  margin: 0;
  color: var(--text-body);
  font-size: 13px;
  line-height: 1.4;
}
.elite-hall p strong,
.ranking-hero p strong { color: var(--gold-text, #d8bd6a); }
.elite-hall-rule,
.ranking-hero-rule {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 15px;
  font: 8px "Share Tech Mono", monospace;
  letter-spacing: 0.12em;
  color: var(--text-dim);
}
.elite-hall-rule::before,
.elite-hall-rule::after,
.ranking-hero-rule::before,
.ranking-hero-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dim));
}
.elite-hall-rule::after,
.ranking-hero-rule::after { transform: scaleX(-1); }
.ranking-hero-countdown {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 12px;
  padding: 7px 12px;
  border: 1px solid var(--gold-dim);
  background: rgba(6, 8, 4, 0.72);
  color: var(--gold-text, var(--gold));
}
.ranking-hero-countdown b {
  font: 22px/1 "Gunplay", "Black Ops One", sans-serif;
}
.ranking-hero-countdown span {
  font: 8px "Share Tech Mono", monospace;
  letter-spacing: 0.16em;
}
.ranking-board .section-title { margin-top: 2px; }
.ranking-board .inp.search {
  border-color: var(--gold-dim);
  background: linear-gradient(90deg, rgba(195, 162, 62, 0.055), transparent), #090b06;
}
.elite-ranking .inp.search {
  border-color: var(--gold-dim);
  background: linear-gradient(90deg, rgba(195, 162, 62, 0.055), transparent), #090b06;
}
.elite-rank {
  position: relative;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  min-height: 76px;
  gap: 12px;
  overflow: hidden;
  border-color: var(--line);
  background: linear-gradient(90deg, rgba(195, 162, 62, 0.045), transparent 48%), var(--panel-deep);
}
.elite-rank .place {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  background: var(--panel);
  font: 18px "Gunplay", "Black Ops One", sans-serif;
  color: var(--text-dim);
}
.elite-rank .elite-name { min-width: 0; }
.elite-rank .elite-name strong {
  display: block;
  overflow: hidden;
  font: 17px/1.1 "Gunplay", "Black Ops One", sans-serif;
  letter-spacing: 0.035em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.elite-rank .elite-name small,
.elite-rank .coins small {
  display: block;
  margin-top: 4px;
  font: 8px "Share Tech Mono", monospace;
  letter-spacing: 0.17em;
  color: var(--text-dim);
}
.elite-rank .coins {
  min-width: 76px;
  text-align: right;
  font: 22px/1 "Gunplay", "Black Ops One", sans-serif;
  color: var(--gold-text, var(--gold));
}
.elite-rank-1 {
  min-height: 98px;
  border-color: #b89332;
  background:
    radial-gradient(circle at 82% 50%, rgba(222, 188, 83, 0.18), transparent 28%),
    linear-gradient(90deg, rgba(195, 162, 62, 0.17), transparent 58%),
    #13140c;
  box-shadow: inset 4px 0 0 var(--gold), 0 8px 24px rgba(0, 0, 0, 0.22);
}
.elite-rank-1 .place {
  width: 54px;
  height: 60px;
  border-color: #d8bd6a;
  background: linear-gradient(145deg, #e2c96f, #8a6a18 70%);
  color: #171205;
  box-shadow: 0 0 18px rgba(195, 162, 62, 0.25);
}
.elite-rank-2 { border-left: 4px solid #aeb3b0; }
.elite-rank-3 { border-left: 4px solid #aa6e3d; }
.elite-rank-2 .place {
  border-color: #c4c9c6;
  background: linear-gradient(145deg, #d9dddb, #707572);
  color: #171918;
}
.elite-rank-3 .place {
  border-color: #c78853;
  background: linear-gradient(145deg, #d29a67, #70431f);
  color: #190e06;
}
.elite-crown {
  position: absolute;
  top: 6px;
  right: 9px;
  color: rgba(216, 189, 106, 0.22);
  font-size: 33px;
  transform: rotate(8deg);
}
@media (min-width: 720px) {
  .elite-hall,
  .ranking-hero { padding-inline: 48px; }
  .elite-ranking { max-width: 760px; margin-inline: auto; }
  .ranking-board { max-width: 760px; margin-inline: auto; }
}
.elite-head strong {
  font-size: 12.5px;
}
.elite-head button {
  font-size: 10.5px;
}
.link-right {
  font-size: 11px;
}
.rule {
  font-size: 10px;
  margin: 13px 0;
}
.notice {
  font-size: 12px;
}
.legal p {
  font-size: 12px;
}
.legal h2 {
  font-size: 12.5px;
}
.drawer button {
  font-size: 12px;
  padding: 12px 13px;
  min-height: 44px;
}
.drawer h3 {
  font-size: 9.5px;
}

/* ═══════════════════════════════════════════════════════════════════
   Profilbild und Aufbau der Tracking-Ansicht
   ═══════════════════════════════════════════════════════════════════ */

/* ── Kuerzel oben rechts wird zum Bild ──────────────────────────── */
.topbar-me {
  overflow: hidden;
  padding: 0;
}
.topbar-me.has-photo {
  border-color: var(--gold-dim);
}
.topbar-me img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Bildfeld im Konto ──────────────────────────────────────────── */
.avatar-edit {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}
/* Die Vorschau ist zugleich der Knopf zum Waehlen - der naheliegendste
   Ort, an dem man tippt, wenn man sein Bild aendern will. */
.avatar-vorschau {
  width: 72px;
  height: 72px;
  padding: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--gold-text, var(--gold));
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 21px;
}
.avatar-vorschau img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.avatar-tasten {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.avatar-tasten .button {
  margin: 0;
}
.avatar-hinweis {
  flex-basis: 100%;
  font-family: "Share Tech Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}

/* ── Tracking: Anreisser ────────────────────────────────────────── */
.track-claim {
  padding: 4px 0 18px;
}
.track-claim h1 {
  margin: 0 0 10px;
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: clamp(23px, 7vw, 30px);
  line-height: 1.12;
  letter-spacing: 0.01em;
  color: var(--text);
}
.track-claim h1 span {
  color: var(--gold-text, var(--gold));
}
/* Fliesstext in normaler Schreibweise - Versalien kosten hier nur Tempo. */
.track-claim p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--c-sek, #b9bdac);
  text-transform: none;
  letter-spacing: 0;
}

/* ── Tracking: eigene Karte ─────────────────────────────────────── */
.me-card {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  margin-bottom: 22px;
  background: var(--panel);
  border: 1px solid var(--line);
}
.me-avatar {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--gold-dim);
  color: var(--gold-text, var(--gold));
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 18px;
}
.me-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.me-ident {
  min-width: 0;
}
.me-ident strong {
  display: block;
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 15px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.me-ident small {
  display: block;
  margin-top: 2px;
  font-family: "Share Tech Mono", monospace;
  font-size: 10.5px;
  color: var(--text-dim);
}
.me-coins {
  text-align: right;
}
.me-coins b {
  display: block;
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 22px;
  line-height: 1;
  color: var(--gold-text, var(--gold));
}
.me-coins span {
  display: block;
  margin-top: 3px;
  font-family: "Share Tech Mono", monospace;
  font-size: 8.5px;
  letter-spacing: 0.14em;
  color: var(--text-dim);
}
.me-coins em {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 10px;
  color: #6d7263;
}

/* ── Tracking: Abschnittskopf mit Hinweis ───────────────────────── */
.head-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.head-row .section-title {
  margin: 0;
}
.head-row small {
  flex: 0 0 auto;
  text-align: right;
  font-family: "Share Tech Mono", monospace;
  font-size: 9px;
  line-height: 1.35;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ── Tracking: Aufgabenzeilen ───────────────────────────────────── */
.task-list {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}
.task {
  display: grid;
  grid-template-columns: 48px 1fr auto 34px;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 10px 10px 10px 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  min-height: 64px;
}
.task.on {
  border-color: var(--gold);
}
.task-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  font-size: 22px;
  background: var(--s-0, #0b0d09);
  border: 1px solid var(--line);
}
.task-text {
  min-width: 0;
}
.task-text strong {
  display: block;
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 13.5px;
  letter-spacing: 0.01em;
}
/* Beschreibung bewusst in normaler Schreibweise */
.task-text small {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--c-sek, #9aa08a);
  text-transform: none;
  letter-spacing: 0;
}
.task-coins {
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 14px;
  color: var(--gold-text, var(--gold));
  white-space: nowrap;
}
.task-go {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  font-size: 17px;
  color: var(--text-dim);
  background: var(--s-0, #0b0d09);
  border: 1px solid var(--line);
}
.task.on .task-go {
  color: var(--gold-text, var(--gold));
  border-color: var(--gold-dim);
}

/* ── Tracking: Beweisfoto als Zeile ─────────────────────────────── */
.proof-row {
  display: grid;
  grid-template-columns: 48px 1fr 40px;
  gap: 12px;
  align-items: center;
  padding: 10px 10px 10px 12px;
  margin-bottom: 12px;
  border: 1px dashed var(--line);
  cursor: pointer;
  min-height: 64px;
}
.proof-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  font-size: 20px;
  background: var(--s-0, #0b0d09);
  border: 1px solid var(--line);
}
.proof-text strong {
  display: block;
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 12.5px;
  letter-spacing: 0.06em;
}
.proof-text small {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--c-sek, #9aa08a);
  text-transform: none;
  letter-spacing: 0;
}
.proof-go {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  font-size: 16px;
  color: var(--gold-text, var(--gold));
  border: 1px solid var(--line);
  background: var(--s-0, #0b0d09);
}
#track-form .preview {
  max-width: 100%;
  margin-bottom: 10px;
  border: 1px solid var(--line);
}

@media (max-width: 380px) {
  .task {
    grid-template-columns: 42px 1fr auto;
  }
  .task-go {
    display: none;
  }
  .task-icon {
    width: 42px;
    height: 42px;
  }
}

/* ── Lebenszyklus-Regel im Klartext ─────────────────────────────── */
.regel {
  margin: 22px 0 4px;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold-dim);
}
.regel h2 {
  margin: 0 0 8px;
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 12.5px;
  letter-spacing: 0.1em;
  color: var(--gold-text, var(--gold));
}
.regel ul {
  margin: 0 0 8px;
  padding-left: 16px;
}
/* Fliesstext in normaler Schreibweise und hell genug zum Lesen */
.regel li,
.regel p {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--c-sek, #b9bdac);
  text-transform: none;
  letter-spacing: 0;
}
.regel li {
  margin-bottom: 5px;
}
.regel li b {
  color: var(--text);
}
.regel p {
  margin: 0;
  color: var(--c-sek, #9aa08a);
}

/* ── Gesperrtes Tracking ────────────────────────────────────────── */
.sperre {
  margin: 4px 0 18px;
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--gold-dim);
  border-left: 3px solid var(--gold);
}
.sperre h2 {
  margin: 0 0 8px;
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--gold-text, var(--gold));
}
/* Fliesstext in normaler Schreibweise */
.sperre p {
  margin: 0 0 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--c-sek, #b9bdac);
  text-transform: none;
  letter-spacing: 0;
}
.sperre textarea.inp {
  width: 100%;
  margin-bottom: 10px;
  font-size: 12.5px;
  text-transform: none;
  letter-spacing: 0;
  resize: vertical;
}
.sperre .btn {
  margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   COACHING
   Eingabelastige Ansicht: viele kleine Felder untereinander. Damit sie
   nicht als Wand wirkt, traegt jede Zeile links den Namen und rechts das
   Feld, und die Abschnitte sind durch Platten getrennt.
   Tippziele bleiben ueberall bei 44 px, auch wo optisch weniger reicht.
   ═══════════════════════════════════════════════════════════════════ */

/* Unterteilung Heute / Training / Bericht.
   Drei Reiter muessen nebeneinander auf 375 px passen. Die Plattentextur
   bringt eine Mindestbreite mit, darum hier ein schmalerer Neunerschnitt
   und kleinere Schrift - die Hoehe bleibt bei 44 px. */
.coach-seg {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}
.coach-seg button {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0 4px;
  border-width: 9px;
  border-image: var(--btn-dark) 46 39 44 44 fill / 9px stretch;
  font-size: 11px;
  letter-spacing: 0.1em;
}
.coach-seg button.on {
  border-image: var(--btn-olive) 46 39 46 44 fill / 9px stretch;
}

/* Datumszeile ueber dem ersten Abschnitt */
.coach-datum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.coach-datum strong {
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 15px;
  color: var(--text);
}

.coach-panel {
  padding: 2px 12px 10px;
  margin-bottom: 10px;
}
.coach-panel .eyebrow-rule:first-child {
  margin-top: 12px;
  margin-bottom: 4px;
}

/* Fliesstext im Coaching bleibt in normaler Schreibweise und hell genug. */
.coach-hinweis {
  margin: 4px 0 12px;
  font-family: Oswald, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-dim);
}

/* Name links, Feld rechts. Wird es eng, rutscht das Feld darunter. */
.coach-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 0;
  border-top: 1px solid var(--line);
}
.coach-row:first-of-type {
  border-top: none;
}
.coach-row.spalte {
  display: block;
  padding: 8px 0;
}
.coach-row > label {
  font-family: Oswald, sans-serif;
  font-size: 14px;
  color: var(--text);
}
.coach-row.spalte > label {
  display: block;
  margin-bottom: 4px;
}

.coach-inp {
  min-height: 44px;
  padding: 8px 10px;
  font-family: "Share Tech Mono", monospace;
  font-size: 14px;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.coach-inp:focus {
  outline: 2px solid var(--gold-dim);
  outline-offset: -2px;
}
.coach-row > .coach-inp {
  flex: 0 0 108px;
  text-align: right;
}
.coach-row > select.coach-inp {
  flex-basis: 132px;
  text-align: left;
}
.coach-row.spalte > .coach-inp,
.coach-row.spalte > textarea.coach-inp {
  width: 100%;
  text-align: left;
  font-family: Oswald, sans-serif;
  line-height: 1.5;
}

/* Abhaken: Kasten und Beschriftung sind zusammen ein Tippziel. */
.coach-schalter {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 8px 0;
  background: none;
  border: none;
  border-top: 1px solid var(--line);
  text-align: left;
  cursor: pointer;
}
.coach-schalter:first-of-type {
  border-top: none;
}
.coach-schalter .kasten {
  flex: none;
  width: 24px;
  height: 24px;
  border: 1px solid var(--olive-lit);
  background: var(--panel-2);
}
.coach-schalter.on .kasten {
  background: var(--olive);
  border-color: var(--olive);
}
.coach-schalter.on .kasten::after {
  content: "✓";
  display: block;
  margin-top: -2px;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
  color: var(--ink);
}
.coach-schalter .text {
  font-family: Oswald, sans-serif;
  font-size: 14px;
  color: var(--text);
}
.coach-schalter .text small {
  display: block;
  font-size: 12px;
  color: var(--text-dim);
}

.coach-meal {
  border-top: 1px solid var(--line);
  padding-bottom: 8px;
}
.coach-meal:first-of-type {
  border-top: none;
}
.coach-meal .coach-schalter {
  border-top: none;
}
.coach-meal .coach-inp {
  width: 100%;
  min-height: 44px;
  font-family: Oswald, sans-serif;
  text-align: left;
}

/* Fotos laufen waagerecht, statt sich zu quetschen. */
.coach-fotos {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  padding-bottom: 8px;
}
.coach-fotos::-webkit-scrollbar {
  display: none;
}
.coach-fotos figure {
  position: relative;
  flex: none;
  width: 132px;
  margin: 0;
  scroll-snap-align: start;
}
.coach-fotos img {
  display: block;
  width: 100%;
  height: 176px;
  object-fit: cover;
  border: 1px solid var(--line);
}
.coach-foto-weg {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  background: rgba(8, 10, 7, 0.72);
  border: none;
  color: var(--text);
  font-size: 15px;
  cursor: pointer;
}
.coach-foto-neu {
  display: block;
  min-height: 44px;
  margin-top: 8px;
  line-height: 44px;
  text-align: center;
  cursor: pointer;
}

/* Trainingsuhr.
   Die Knopftextur bringt eine Mindestbreite mit, die neben Zeit und
   Beschriftung nicht mehr auf 375 px passt. Darum steht der Knopf in
   einer eigenen Zeile darunter, ueber die volle Breite. */
.coach-uhr {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px 12px;
  margin-top: 12px;
  padding: 12px;
  background: var(--panel-2);
  border: 1px solid var(--line);
}
.coach-uhr .zeit {
  font-family: "Share Tech Mono", monospace;
  font-size: 24px;
  color: var(--text);
}
.coach-uhr .marke {
  flex: 1;
  font-family: Oswald, sans-serif;
  font-size: 12px;
  color: var(--text-dim);
}
.coach-uhr.laeuft {
  border-color: var(--olive-lit);
}
.coach-uhr.laeuft .zeit {
  color: var(--gold-text, var(--gold));
}
.coach-uhr.fertig .zeit {
  color: var(--olive-lit);
}
.coach-uhr .btn {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 44px;
  margin-top: 4px;
}

/* Uebung als aufklappbarer Abschnitt */
.coach-uebung > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 10px 0;
  cursor: pointer;
  list-style: none;
}
.coach-uebung-thumb {
  flex: 0 0 58px;
  width: 58px;
  height: 48px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--s-1, #11140d);
}
.coach-uebung-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.coach-uebung-thumb.platzhalter svg {
  width: 24px;
  height: 24px;
  color: var(--olive-lit);
}
.coach-uebung-index {
  flex: 0 0 auto;
  font: 12px "Share Tech Mono", monospace;
  color: var(--olive-lit);
}
.coach-uebung > summary::-webkit-details-marker {
  display: none;
}
.coach-uebung > summary::after {
  content: "▾";
  margin-left: auto;
  color: var(--gold-text, var(--gold));
  font-size: 12px;
}
.coach-uebung[open] > summary::after {
  content: "▴";
}
.coach-uebung .name {
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 15px;
  color: var(--text);
}
.coach-uebung .ziel {
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  color: var(--text-dim);
}
.coach-uebung-bild {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  margin-bottom: 8px;
  border: 1px solid var(--line);
}
.coach-uebung-bild.platzhalter {
  min-height: 150px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  color: var(--text-dim);
  background:
    linear-gradient(rgba(242, 169, 0, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242, 169, 0, 0.035) 1px, transparent 1px),
    #11140d;
  background-size: 14px 14px;
  text-align: center;
}
.coach-uebung-bild.platzhalter svg {
  width: 38px;
  height: 38px;
  color: var(--olive-lit);
}
.coach-uebung-bild.platzhalter strong {
  font: 15px "Gunplay", "Black Ops One", sans-serif;
  color: var(--text);
}
.coach-uebung-bild.platzhalter small {
  font: 11px "Share Tech Mono", monospace;
}

/* Ein Satz: Nummer, Gewicht, Wiederholungen */
.coach-satz {
  display: grid;
  grid-template-columns: 28px 1fr 1fr;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}
.coach-satz .nr {
  font-family: "Share Tech Mono", monospace;
  font-size: 12px;
  color: var(--gold-text, var(--gold));
  text-align: center;
}
.coach-satz .coach-inp {
  width: 100%;
  text-align: center;
}

/* Bericht */
.coach-bericht-kopf {
  display: flex;
  gap: 12px;
  padding: 8px 0 4px;
}
.coach-bericht-kopf div {
  flex: 1;
}
.coach-bericht-kopf strong {
  display: block;
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 22px;
  color: var(--text);
}
.coach-bericht-kopf small {
  font-family: Oswald, sans-serif;
  font-size: 11px;
  color: var(--text-dim);
}
.coach-bericht {
  padding-top: 12px;
}
.coach-bericht-zeile {
  display: grid;
  grid-template-columns: 44px repeat(3, 1fr) 1fr;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  border-top: 1px solid var(--line);
  font-family: "Share Tech Mono", monospace;
  font-size: 12.5px;
  color: var(--text);
}
.coach-bericht-zeile:first-child {
  border-top: none;
}
.coach-bericht-zeile .tag {
  color: var(--gold-text, var(--gold));
}
.coach-bericht-zeile .wert small {
  display: block;
  font-size: 9px;
  color: var(--text-dim);
}
.coach-seg.zeitraum {
  margin-top: 12px;
}

/* Auf schmalen Geraeten rutscht das Feld unter seinen Namen, damit
   nichts gequetscht wird. */
@media (max-width: 359px) {
  .coach-row {
    display: block;
    padding: 8px 0;
  }
  .coach-row > .coach-inp {
    width: 100%;
    margin-top: 4px;
    text-align: left;
  }
}

/* ── Bild zuschneiden ───────────────────────────────────────────── */
.cropper {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: rgba(3, 4, 3, 0.88);
}
.cropper-box {
  width: 100%;
  max-width: 360px;
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
}
.cropper-box h2 {
  margin: 0 0 12px;
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--gold-text, var(--gold));
  text-align: center;
}
/* Das sichtbare Quadrat ist zugleich das Ergebnis - was hier steht,
   steht spaeter oben rechts. */
.cropper-flaeche {
  position: relative;
  width: 100%;
  min-height: 200px; /* falls aspect-ratio fehlt, wird die Hoehe zusaetzlich per Skript gesetzt */
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--s-0, #050604);
  border: 1px solid var(--gold-dim);
  cursor: grab;
  touch-action: none; /* sonst scrollt die Seite beim Ziehen mit */
  user-select: none;
}
.cropper-flaeche:active {
  cursor: grabbing;
}
.cropper-flaeche img {
  position: absolute;
  max-width: none;
  pointer-events: none;
  user-select: none;
}
.cropper-regler {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
}
.cropper-regler span {
  font-family: "Share Tech Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--text-dim);
}
.cropper-regler input {
  width: 100%;
  height: 44px; /* Apple: 44 px Tippziel, auch fuer den Regler */
  accent-color: var(--gold);
  background: none;
}
.cropper-hinweis {
  margin: 2px 0 12px;
  font-size: 11.5px;
  color: var(--c-sek, #9aa08a);
  text-transform: none;
  letter-spacing: 0;
  text-align: center;
}
.cropper-tasten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.cropper-tasten .btn {
  margin-bottom: 0;
}

/* Auf sehr schmalen Geraeten rutschen die Stufen unter ihren Namen. */
@media (max-width: 359px) {
  .coach-row.skala {
    display: block;
    padding: 8px 0;
  }
  .coach-row.skala .coach-stufen {
    margin-top: 6px;
  }
  .coach-stufen .stufe {
    flex: 1;
    width: auto;
  }
}

/* ── Coaching aus Sicht des Coaches ───────────────────────────────── */
/* Vier Reiter statt drei: die Schrift wird kleiner, die Hoehe bleibt. */
.coach-seg.vier button {
  font-size: 10px;
  letter-spacing: 0.06em;
}

/* Zeigt, wessen Daten offen sind. Der Ruecksprung ist bewusst gross,
   damit man ihn ohne Zielen trifft. */
.coach-fuer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.coach-raus {
  flex: none;
  width: 44px;
  height: 44px;
  font-size: 22px;
  line-height: 1;
  color: var(--gold-text, var(--gold));
  background: var(--panel-2);
  border: 1px solid var(--line);
  cursor: pointer;
}
.coach-fuer span {
  display: block;
  min-width: 0;
}
.coach-fuer small {
  display: block;
  font-family: Oswald, sans-serif;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-text, var(--gold));
}
.coach-fuer strong {
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 18px;
  color: var(--text);
}

.coach-liste {
  margin-bottom: 12px;
}
.coach-eintrag {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 10px 12px;
  margin-bottom: 6px;
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--line);
}
.coach-eintrag .wer {
  flex: 1;
  min-width: 0;
}
.coach-eintrag strong {
  display: block;
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 15px;
  color: var(--text);
}
.coach-eintrag small {
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  color: var(--text-dim);
}
.coach-eintrag .marke {
  font-family: Oswald, sans-serif;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-dim);
}

/* Planzeilen: Felder nebeneinander, Loeschen rechts als eigenes Tippziel. */
.coach-plan-zeile {
  display: flex;
  gap: 6px;
  padding: 4px 0;
}
.coach-plan-zeile .coach-inp {
  flex: 1;
  min-width: 0;
  text-align: left;
  font-family: Oswald, sans-serif;
}
.coach-plan-zeile .coach-inp.satz {
  flex: 0 0 62px;
  text-align: center;
  font-family: "Share Tech Mono", monospace;
}
.coach-plan-zeile.eng {
  padding-left: 12px;
}
.coach-weg {
  flex: none;
  width: 44px;
  min-height: 44px;
  color: var(--text-dim);
  background: var(--panel-2);
  border: 1px solid var(--line);
  font-size: 14px;
  cursor: pointer;
}
.coach-plan-split {
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.coach-plan-split:first-of-type {
  border-top: none;
}
.btn.ghost.klein {
  min-height: 44px;
  margin-top: 6px;
  font-size: 12px;
}
.btn.ghost.klein.danger-ghost {
  border-color: #c0392b;
  color: #e74c3c;
}
.btn.ghost.klein.danger-ghost:hover {
  background: rgba(231,76,60,0.15);
}
.coach-plan-bild,
.coach-plan-import {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.coach-plan-bild input,
.coach-plan-import input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.coach-plan-bild.busy { opacity: .55; pointer-events: none; }
@media (max-width: 620px) {
  .coach-eintrag {
    grid-template-columns: 1fr 1fr;
  }
  .coach-eintrag .wer {
    grid-column: 1 / -1;
  }
  .coach-plan-zeile.eng {
    flex-wrap: wrap;
  }
  .coach-plan-zeile.eng > .coach-plan-bild {
    flex: 1 1 150px;
  }
}

/* ── Heute-Dashboard: Orientierung vor Formularen ───────────────── */
.coach-status,
.coach-auftrag,
.coach-phase {
  margin-bottom: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow:
    inset 1px 1px 0 var(--bevel-lit),
    inset -1px -1px 0 var(--bevel-dark);
}
.coach-status {
  padding: 14px;
}
.coach-status-zeile {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-family: "Gunplay", "Black Ops One", sans-serif;
  color: var(--text);
}
.coach-status-zeile strong {
  font-size: 16px;
  letter-spacing: 0.08em;
}
.coach-status-zeile strong span {
  display: block;
  margin-top: 3px;
  font-family: "Share Tech Mono", monospace;
  font-size: 10px;
  font-weight: 400;
  color: var(--text-dim);
}
.coach-status-zeile b {
  font-family: "Share Tech Mono", monospace;
  font-size: 12px;
  color: var(--gold-text, var(--gold));
}
.coach-status-balken {
  height: 12px;
  margin: 10px 0 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(
    90deg,
    var(--gold-dim) 0,
    var(--gold) var(--tagesfortschritt, 0%),
    #44483f var(--tagesfortschritt, 0%),
    #44483f 100%
  );
}
.coach-abschluss-stand {
  font-family: "Share Tech Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}
.coach-kurzwerte {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.coach-kurzwerte > div {
  min-width: 0;
  padding: 10px 8px 2px;
  border-left: 1px solid var(--line);
}
.coach-kurzwerte > div:first-child {
  padding-left: 0;
  border-left: 0;
}
.coach-kurzwerte small,
.coach-kurzwerte strong,
.coach-kurzwerte em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.coach-kurzwerte small,
.coach-kurzwerte em {
  font-family: "Share Tech Mono", monospace;
  font-size: 8px;
  font-style: normal;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}
.coach-kurzwerte strong {
  margin-top: 3px;
  font-family: Oswald, sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}
.coach-kurzwerte em {
  margin-top: 2px;
  color: var(--olive-lit);
}
.coach-kurzwerte em.kcal {
  color: var(--gold-text, var(--gold));
}
/* Rahmen an den Kacheln statt als Hintergrund: so bleibt bei 4 oder 5
   Werten keine leere graue Zelle stehen. */
.coach-health-werte {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 14px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.coach-health-werte > div {
  min-width: 0;
  padding: 8px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.coach-health-werte small {
  display: block;
  font-family: "Share Tech Mono", monospace;
  font-size: 8px;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}
.coach-health-werte strong {
  display: block;
  margin-top: 3px;
  font-family: Oswald, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
}
.coach-health-werte strong small {
  display: inline;
  font-size: 9px;
}
.coach-schlaf-details {
  margin: 6px 0 0;
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-dim);
}
.coach-health-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 5px;
  font-family: "Share Tech Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--olive-lit);
  border: 1px solid var(--olive-lit);
  vertical-align: middle;
}

.coach-health-lock-note {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-left: 3px solid var(--gold);
  background: rgba(195, 162, 62, 0.08);
  color: var(--text-body);
  font-size: 11px;
  line-height: 1.45;
}
.coach-health-sport {
  margin: 10px 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: rgba(7, 9, 5, 0.7);
}
.coach-health-sport > small {
  display: block;
  margin-bottom: 6px;
  color: var(--gold-text, var(--gold));
  font: 9px "Share Tech Mono", monospace;
  letter-spacing: 0.14em;
}
.coach-health-sport > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-top: 1px solid var(--line);
}
.coach-health-sport strong { font-size: 12px; }
.coach-health-sport span { color: var(--text-dim); font-size: 11px; }
[data-health-locked="true"],
.coach-janein.health-locked {
  opacity: 0.7;
  cursor: not-allowed;
}
.coach-auftrag {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 12px;
  align-items: center;
  padding: 13px 14px;
  border-color: var(--gold-dim);
}
.coach-auftrag > small {
  grid-column: 1;
  display: block;
  margin-bottom: 4px;
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--gold-text, var(--gold));
}
.coach-auftrag > strong {
  grid-column: 1;
  display: block;
  margin-bottom: 3px;
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: clamp(18px, 5vw, 24px);
  line-height: 1.1;
  color: var(--text);
}
.coach-auftrag > p {
  grid-column: 1;
  margin: 0;
  font-family: Oswald, sans-serif;
  font-size: 12px;
  color: var(--text-dim);
}
.coach-auftrag .btn {
  grid-column: 2;
  grid-row: 1 / 4;
  width: auto;
  min-width: 104px;
  min-height: 44px;
  padding: 0 14px;
  font-size: 12px;
}
.coach-phase-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
}
.coach-phase-kopf h2 {
  margin: 0;
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--text);
}
.coach-phase-kopf span {
  font-family: "Share Tech Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--gold-text, var(--gold));
}
.coach-phase.fertig .coach-phase-kopf span {
  color: var(--olive-lit);
}
.coach-phase-inhalt {
  padding: 8px;
}
.coach-phase .coach-sec {
  margin-bottom: 6px;
  background: var(--panel-deep);
  box-shadow: none;
}
.coach-phase .coach-sec:last-child {
  margin-bottom: 0;
}
.coach-abschluss-stand {
  display: block;
  margin-top: 10px;
  text-align: center;
  color: var(--gold-text, var(--gold));
}

@media (min-width: 700px) {
  .coach-status,
  .coach-auftrag,
  .coach-phase {
    max-width: 760px;
    margin-right: auto;
    margin-left: auto;
  }
}

/* ── Tagesablauf als nummerierte Abschnitte ──────────────────────── */
/* Die Reihenfolge traegt den Tag: erst wiegen, dann Trainingstag, dann
   der Rest. Jeder Kopf zeigt zugeklappt seinen Stand, damit man ohne
   Aufklappen sieht, was noch offen ist. */
.coach-sec {
  padding: 0 12px;
  margin-bottom: 8px;
}
.coach-sec > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  cursor: pointer;
  list-style: none;
}
.coach-sec > summary::-webkit-details-marker {
  display: none;
}
.coach-sec > summary::after {
  content: "▾";
  flex: none;
  color: var(--gold-text, var(--gold));
  font-size: 11px;
}
.coach-sec[open] > summary::after {
  content: "▴";
}
.coach-sec[open] > summary {
  border-bottom: 1px solid var(--line);
}
.coach-sec .nr {
  flex: none;
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  color: var(--gold-text, var(--gold));
}
.coach-sec .sec-name {
  flex: 1;
  min-width: 0;
  font-family: Oswald, sans-serif;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
}
.coach-sec .stand {
  flex: none;
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  color: var(--text-dim);
}
.coach-sec .stand.ok {
  color: var(--olive-lit);
}
.coach-sec-inhalt {
  padding: 4px 0 12px;
}

/* Ja-Nein-Paar. Beide Seiten gleich gross, keine ist vorausgewaehlt. */
.coach-frage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 6px 0;
  border-top: 1px solid var(--line);
}
.coach-frage:first-child {
  border-top: none;
}
.coach-frage .text {
  flex: 1;
  min-width: 0;
  font-family: Oswald, sans-serif;
  font-size: 14px;
  color: var(--text);
}
.coach-janein {
  display: flex;
  flex: none;
  gap: 4px;
}
.coach-janein button {
  width: 58px;
  min-height: 44px;
  font-family: Oswald, sans-serif;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  background: var(--panel-2);
  border: 1px solid var(--line);
  cursor: pointer;
}
.coach-janein button.on {
  color: var(--ink);
  background: var(--olive);
  border-color: var(--olive-lit);
  font-weight: 600;
}
.coach-janein button.on.nein {
  background: var(--gold-dim);
  border-color: var(--gold);
}
.coach-wochentage {
  display: grid;
  grid-template-columns: repeat(7, minmax(38px, 1fr));
  width: 100%;
}
.coach-wochentage button {
  width: auto;
  padding: 0 4px;
}
.coach-warnung {
  margin: 4px 0 8px;
  padding: 8px 10px;
  font-family: Oswald, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
  background: var(--panel-2);
  border-left: 2px solid var(--gold);
}

/* Uhrzeit rechts in der Mahlzeitenzeile */
.coach-schalter .zeit {
  flex: none;
  margin-left: auto;
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  color: var(--text-dim);
}

.coach-abschluss,
.coach-fertig {
  padding: 12px;
  margin-top: 4px;
}
.coach-abschluss .btn,
.coach-fertig .btn {
  width: 100%;
  min-height: 48px;
}

/* ─── Backend: Coin-Werte ─────────────────────────────────────────────────
   Neugestaltung nach dem Handoff "Backend Coin-Werte". Statt vier voll
   aufgeklappter Formulare eine dichte Tabelle: eine Zeile je Regel,
   Antippen klappt genau diese eine auf. Gespeichert wird ueber die feste
   Leiste unten, die nur bei offenen Aenderungen erscheint.
   Keine Radien, keine Schatten, keine Animationen - Tiefe entsteht
   ausschliesslich ueber die Neunerschnitt-Platte auf UEBERNEHMEN.        */
:root {
  --text-body: #b9bdac;
  --chart-cap: #d8bd6a;
  --row: #0b0e08;
  --row-open: #0e120b;
}
.cfg {
  /* Die Leiste unten liegt fest ueber dem Inhalt. Ohne diesen Sockel
     verdeckt sie die letzte Zeile. */
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}
.cfg-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 0 14px;
  margin: 20px 0 0;
}
.cfg-head + .cfg-head,
.cfg-sec + .cfg-head {
  margin-top: 26px;
}
.cfg-head h2 {
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  color: var(--text);
  margin: 0;
}
.cfg-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.cfg-note {
  font-family: "Oswald", sans-serif;
  font-weight: 300;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-dim);
  max-width: 34em;
  margin: 8px 14px 0;
}
.cfg-cols {
  display: grid;
  grid-template-columns: 1fr 54px 74px;
  gap: 8px;
  padding: 0 14px 6px;
  margin-top: 14px;
  font-family: "Share Tech Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--text-dim);
  border-bottom: 1px solid var(--line);
}
.cfg-cols span:nth-child(2),
.cfg-cols span:nth-child(3) {
  text-align: right;
}
.cfg-row {
  display: grid;
  grid-template-columns: 22px 1fr 54px 74px;
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  background: var(--row);
  border: 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}
.cfg-code {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--line);
  font-family: "Share Tech Mono", monospace;
  font-size: 8px;
  color: var(--text-dim);
}
.cfg-row.open .cfg-code {
  color: var(--gold-text, var(--gold));
}
.cfg-name {
  /* Ohne min-width:0 greift die Ellipsis im Grid-Kind nicht. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: var(--text);
}
.cfg-name.leer {
  color: var(--text-dim);
}
.cfg-coins {
  font-family: "Share Tech Mono", monospace;
  font-size: 14px;
  color: var(--gold-text, var(--gold));
  text-align: right;
}
.cfg-limit {
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  color: var(--text-dim);
  text-align: right;
}
.cfg-panel {
  display: grid;
  gap: 12px;
  padding: 14px 14px 16px;
  background: var(--row-open);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cfg-feld label,
.cfg-step > span {
  display: block;
  font-family: "Share Tech Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--text-dim);
}
.cfg-feld label {
  margin-bottom: 4px;
}
.cfg-feld input,
.cfg-feld textarea {
  width: 100%;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 4px 0;
  color: var(--text);
  font-family: "Oswald", sans-serif;
  font-size: 15px;
}
.cfg-feld textarea {
  resize: none;
  font-weight: 300;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-body);
}
.cfg-feld input::placeholder,
.cfg-feld textarea::placeholder {
  color: var(--text-dim);
}
.cfg-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.cfg-step {
  /* Die Umgebung stellt Zahlenspalten rechtsbuendig. Die Stepper-Labels
     gehoeren aber an den linken Rand ihrer Spalte. */
  text-align: left;
}
.cfg-step > span {
  letter-spacing: 0.18em;
  margin-bottom: 5px;
}
.cfg-stepper {
  display: grid;
  grid-template-columns: 24px 1fr 24px;
  height: 30px;
  border: 1px solid var(--line);
}
.cfg-stepper button {
  background: none;
  border: 0;
  color: var(--text-dim);
  font-family: "Share Tech Mono", monospace;
  font-size: 14px;
  cursor: pointer;
  padding: 0;
}
.cfg-stepper button:hover {
  color: var(--text);
}
.cfg-stepper button:first-child {
  border-right: 1px solid var(--line);
}
.cfg-stepper button:last-child {
  border-left: 1px solid var(--line);
}
.cfg-wert {
  display: grid;
  place-items: center;
  font-family: "Share Tech Mono", monospace;
  font-size: 14px;
  color: var(--text);
}
.cfg-step.coins .cfg-wert {
  color: var(--gold-text, var(--gold));
}
.cfg-fuss {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cfg-fuss button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: "Share Tech Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
}
.cfg-weg {
  color: #a8624f;
}
.cfg-weg:hover,
.cfg-weg.sicher {
  color: #d07a62;
}
.cfg-zu {
  color: var(--text-dim);
}
.cfg-zu:hover {
  color: var(--text);
}
.cfg-neu {
  display: block;
  width: 100%;
  text-align: left;
  padding: 14px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  font-family: "Share Tech Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--gold-text, var(--gold));
}
.cfg-neu:hover {
  color: var(--chart-cap);
}
.cfg-preise {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-top: 14px;
}
.cfg-preis {
  padding: 10px 12px;
  background: var(--row);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cfg-preis span {
  display: block;
  font-family: "Share Tech Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--text-dim);
}
.cfg-preis input {
  width: 100%;
  background: none;
  border: 0;
  padding: 0;
  font-family: "Share Tech Mono", monospace;
  font-size: 16px;
  color: var(--text);
}
.cfg-preis.erst input {
  color: var(--gold-text, var(--gold));
}
.cfg-bar-wrap {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* Der Wrapper laesst Klicks durch, nur die Leiste selbst faengt sie. */
  pointer-events: none;
  z-index: 40;
}
.cfg-bar {
  pointer-events: auto;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  max-width: 430px;
  margin: 0 auto;
  padding: 10px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(#080a07cc, #080a07);
  border-top: 1px solid var(--line);
}
.cfg-zahl {
  font-family: "Share Tech Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--text-dim);
}
.cfg-aktionen {
  display: flex;
  align-items: center;
  gap: 14px;
}
.cfg-verwerfen {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: "Share Tech Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--text-dim);
}
.cfg-verwerfen:hover {
  color: var(--text);
}
.cfg-uebernehmen {
  /* Die einzige Platte auf diesem Schirm. 9px statt der sonst ueblichen
     13px, sonst erschlaegt der Rahmen den kleinen Knopf. */
  background: none;
  border: 9px solid transparent;
  border-image: var(--btn-olive) 46 39 46 44 fill / 9px stretch;
  padding: 4px 16px;
  cursor: pointer;
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--text);
}

/* ═══════════════════════════════════════════════════════════════════
   DFQ KOMMANDOTERMINAL 2026 — Design-Handoff vom 08.09.2026
   Apple-orientierte Bedienqualitaet unter einer taktischen 90er-Huelle.
   Diese Schicht gestaltet nur die Oberflaeche; Anmelde-, API- und
   Coachinglogik bleiben unveraendert.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --gold: #f2a900;
  --gold-lit: #ffbc33;
  --gold-dim: #b87d05;
  --olive: #62683a;
  --olive-lit: #7c8050;
  --ink: #080a07;
  --panel: #11140e;
  --panel-deep: #0d1009;
  --panel-2: #171a11;
  --bevel-lit: #3c4232;
  --bevel-dark: #05070a;
  --line: #2b3025;
  --text: #efeee6;
  --text-body: #d5d8cb;
  --text-dim: #9aa08a;
  --alarm: #b4472f;
  --tap: 44px;
}

body {
  background-color: var(--ink-flaeche, var(--ink));
  background-image: repeating-linear-gradient(0deg, rgba(98,104,58,.05) 0 1px, transparent 1px 4px);
}

button,
[role="button"],
summary,
.legal a,
button.link,
.link-right,
.elite-head button {
  min-height: var(--tap);
}
button:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.terminal-strip {
  display: flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  color: var(--olive-lit);
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  letter-spacing: .18em;
  text-align: left;
}
.terminal-strip span { margin-right: auto; }
.terminal-strip i {
  width: 6px;
  height: 6px;
  margin-left: 5px;
  background: var(--line);
}
.terminal-strip i:first-of-type { background: var(--gold); }
.terminal-strip i:nth-of-type(2) { background: var(--olive); }
.hazard-strip {
  height: 6px;
  background-image: repeating-linear-gradient(135deg, var(--gold) 0 7px, #0b0d07 7px 14px);
  opacity: .8;
}

.header {
  padding: env(safe-area-inset-top, 0px) 16px 10px;
  border-bottom: 1px solid var(--line);
}
.header > .terminal-strip,
.header > .hazard-strip {
  margin-left: -16px;
  margin-right: -16px;
}
.auth-header-row {
  min-height: 68px;
  padding-top: 8px;
}
.auth-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.header .auth-brand .logo {
  width: 56px;
}
.auth-brand strong {
  color: var(--text);
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}
.auth-motto {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 22px;
  color: var(--text-body);
  font-family: var(--font-num);
  font-size: 11px;
  letter-spacing: .16em;
  text-align: left;
}
.auth-motto span { color: var(--gold-text, var(--gold)); }
.auth-motto strong { font-weight: 400; }

.auth-content {
  width: 100%;
  max-width: 740px;
  box-sizing: border-box;
  padding: 12px 16px 22px;
}
.auth-content .seg {
  gap: 8px;
  margin-bottom: 10px;
}
.auth-content .seg button {
  min-height: 47px;
  border-width: 5px;
  border-image-width: 5px;
  box-sizing: border-box;
  font-size: 15px;
}
.login-shell {
  display: grid;
  grid-template-columns: minmax(152px, .75fr) minmax(250px, 1.25fr);
  gap: 10px;
  align-items: start;
}
.login-main { min-width: 0; }
.login-shell .panel,
.login-shell .elite-card,
.login-shell .regel {
  margin-bottom: 8px;
  border: 1px solid var(--bevel-dark);
  border-radius: 0;
  background-color: var(--panel);
  box-shadow: inset 1px 1px 0 var(--bevel-lit), inset -1px -1px 0 var(--bevel-dark);
}
.login-shell .panel {
  padding: 12px;
}
.panel-kicker {
  margin-bottom: 4px;
  color: var(--gold-text, var(--gold));
  font-family: var(--font-num);
  font-size: 11px;
  letter-spacing: .18em;
}
.login-shell .panel-title {
  font-size: 20px;
  line-height: 1.1;
}
.login-shell .panel-sub {
  margin: 4px 0 10px;
  color: var(--text-body);
  font-size: 15px;
  line-height: 1.45;
  text-transform: none;
  letter-spacing: normal;
}
.login-shell .fld { margin-bottom: 8px; }
.login-shell .fld label {
  margin-bottom: 4px;
  color: var(--text-body);
  font-family: var(--font-num);
  font-size: 11px;
  letter-spacing: .14em;
}
.login-shell .box {
  min-height: 48px;
  border: 1px solid var(--bevel-dark);
  border-left: 3px solid var(--olive);
  background: var(--ink-flaeche, var(--ink));
  box-shadow: inset 1px 1px 0 var(--line);
}
.login-shell .box input {
  min-height: 46px;
  color: var(--text);
  font-size: 15px;
}
.login-shell .btn {
  min-height: 46px;
  margin-bottom: 8px;
  border-width: 5px;
  border-image-width: 5px;
  box-sizing: border-box;
  font-size: 16px;
  text-shadow: 0 1px 1px rgba(0,0,0,.7);
}
.login-shell .btn.ghost { font-size: 13px; }
.login-shell .rule {
  margin: 2px 0 8px;
  color: var(--text-dim);
  font-family: var(--font-num);
  font-size: 11px;
}
.auth-help-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.auth-help-actions .link-right {
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 6px;
  border: 1px solid var(--line);
  background: var(--panel-deep);
  color: var(--text-body);
  font-family: var(--font-num);
  font-size: 10px;
  letter-spacing: .08em;
  text-align: center;
}
.auth-help-actions .link-right:hover { border-color: var(--gold); }

.login-shell .elite-card {
  padding: 10px;
}
.login-shell .elite-head {
  min-height: 32px;
  margin-bottom: 6px;
}
.login-shell .elite-head strong {
  font-size: 17px;
}
.login-shell .elite-head button {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--gold-text, var(--gold));
  font-size: 10px;
}
.login-shell .rankrow {
  min-height: 48px;
  margin-bottom: 5px;
  padding: 5px 6px;
  grid-template-columns: 29px minmax(0,1fr);
  gap: 6px;
  border-left: 3px solid var(--line);
  background: var(--panel-deep);
}
.login-shell .rankrow:nth-of-type(1) { border-left-color: var(--gold); background: var(--panel-2); }
.login-shell .rankrow:nth-of-type(2) { border-left-color: #d8dbd6; }
.login-shell .rankrow:nth-of-type(3) { border-left-color: #cf9968; }
.login-shell .rankrow .medal {
  width: 26px;
  height: 29px;
  font-size: 13px;
}
.login-shell .rankrow .who {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
}
.login-shell .rankrow .val {
  grid-column: 2;
  font-family: var(--font-num);
  font-size: 11px;
}
.login-shell .regel {
  padding: 10px 12px;
  color: var(--text-body);
  font-size: 15px;
  line-height: 1.55;
}
.login-shell .regel h2 {
  margin-bottom: 8px;
  color: var(--gold-text, var(--gold));
  font-family: var(--font-num);
  font-size: 11px;
  letter-spacing: .14em;
}

.legal-bar button {
  min-height: 44px;
  padding: 8px;
}
.elite-head button,
.link-right { min-height: 44px; }

/* Rechtstexte: eine ruhige Dokumentspalte innerhalb des Terminals. */
.legal-content {
  width: 100%;
  max-width: 740px;
  padding: 0 0 24px;
}
#app[data-screen="legal-content"] > .header,
#app[data-screen="legal-content"] > .topbar,
#app[data-screen="legal-content"] > .tabs,
#app[data-screen="legal-content"] > .legal-bar {
  display: none !important;
}
.legal-terminal {
  border: 1px solid var(--bevel-dark);
  background: var(--ink-flaeche, var(--ink));
}
.legal-top {
  display: grid;
  grid-template-columns: 44px 40px auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
}
.legal-top button {
  width: 44px;
  min-height: 44px;
  border: 1px solid var(--line);
  background: var(--panel-deep);
  color: var(--gold-text, var(--gold));
  font-size: 20px;
}
.legal-top img { width: 40px; height: auto; }
.legal-top span,
.legal-top small {
  color: var(--text-dim);
  font-family: var(--font-num);
  font-size: 11px;
  letter-spacing: .12em;
}
.legal-top strong {
  color: var(--text);
  font-family: var(--font-head);
  font-size: 24px;
  font-weight: 400;
}
.legal-tabs {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1px;
  background: var(--line);
}
.legal-tabs button {
  min-height: 47px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: var(--panel-deep);
  color: var(--text-dim);
  font-family: var(--font-head);
  font-size: 14px;
}
.legal-tabs button.on {
  border-bottom-color: var(--gold);
  background: var(--panel-2);
  color: var(--text);
  box-shadow: inset 1px 1px 0 var(--bevel-lit);
}
.legal-toc {
  display: grid;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.legal-toc a {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  min-height: 44px;
  border-bottom: 1px solid var(--line);
  color: var(--text-body);
  font-family: var(--font-text);
  font-size: 15px;
  text-decoration: none;
}
.legal-toc a span {
  color: var(--gold-text, var(--gold));
  font-family: var(--font-num);
  font-size: 12px;
}
.legal-document > .section-title {
  display: none;
}
.legal-document .legal.card {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.legal-document .legal h2 {
  scroll-margin-top: 16px;
  margin: 0;
  padding: 16px 16px 8px;
  border-top: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  font-family: var(--font-head);
  font-size: 18px;
  line-height: 1.15;
}
.legal-document .legal p {
  margin: 0;
  padding: 0 16px 14px;
  background: var(--panel);
  color: var(--text-body);
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 1.65;
  overflow-wrap: anywhere;
  text-transform: none;
}
.legal-document .legal h2:nth-of-type(even),
.legal-document .legal h2:nth-of-type(even) + p { background: var(--panel-deep); }
.legal-document .legal-meta { color: var(--text-dim); }
.legal-document .legal-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--gold-text, var(--gold-lit));
  overflow-wrap: anywhere;
}
.legal-controls {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border-top: 1px solid var(--line);
}
.legal-controls button {
  min-height: 48px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  background: var(--panel-deep);
  color: var(--gold-text, var(--gold));
  font-family: var(--font-num);
  font-size: 14px;
}
#legal-top { width: 200px; font-size: 16px; }
.legal-controls button:hover { border-color: var(--gold); }

/* Gemeinsame Kompaktheit fuer Member- und Coachingansichten. */
.topbar,
.tabs,
.panel,
.card,
.coach-panel,
.rankrow,
.task {
  border-radius: 0;
}
.topbar {
  border-bottom: 1px solid var(--line);
  box-shadow: inset 0 -1px 0 var(--bevel-dark);
}
.topbar button,
.tabs .tab,
.drawer button,
.inbox-btn,
.account-gear,
.logout-btn {
  min-width: 44px;
  min-height: 44px;
}
.tabs {
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs .tab { flex: 0 0 auto; scroll-snap-align: start; }

/* Hauptnavigation wie in einer nativen App am unteren Bildschirmrand. */
#app > #member-tabs:not(.hidden) {
  position: fixed;
  z-index: 1000;
  left: 50%;
  right: auto;
  top: auto;
  bottom: 0;
  width: min(100%, 920px);
  height: calc(70px + env(safe-area-inset-bottom, 0px));
  min-height: 70px;
  max-height: calc(70px + env(safe-area-inset-bottom, 0px));
  margin: 0;
  padding: 8px var(--gutter) calc(8px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  align-items: center;
  overflow-y: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 0;
  background: rgba(10, 12, 8, 0.97);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.55);
}
#app > #member-tabs:not(.hidden) .tab {
  flex: 1 1 0;
  min-width: 132px;
}
#app > .content {
  padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
}
#app > .legal-bar {
  margin-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}
.panel,
.card,
.coach-panel {
  border-color: var(--bevel-dark);
  background-color: var(--panel);
  box-shadow: inset 1px 1px 0 var(--bevel-lit), inset -1px -1px 0 var(--bevel-dark);
}
.btn,
.button,
.tabs .tab {
  box-sizing: border-box;
}
.btn,
.button:not(.small) { min-height: 46px; }
.rankrow { min-height: 48px; }
.notice,
.panel-sub,
.coach-hinweis { color: var(--text-body); }

.profile-save-status {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  font: 13px/1.45 "Share Tech Mono", monospace;
  color: var(--text-body);
}
.profile-save-status.success {
  border-color: #71833d;
  color: var(--c-gruen, #dce9b2);
  background: rgba(74, 92, 36, 0.28);
}
.profile-save-status.error {
  border-color: #b5483a;
  color: var(--c-rot, #f0b4a7);
  background: rgba(117, 31, 24, 0.25);
}
.profile-save-status.working { color: var(--text-dim); }
#profile-save:disabled { cursor: wait; opacity: 0.78; }

.hd-detail .hd-eingabe {
  margin: 0 0 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.hd-detail .hd-eingabe label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.hd-detail .hd-eingabe small {
  color: var(--text-dim);
}

.anfrage-uebersicht {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--text-dim);
  font-family: "Share Tech Mono", monospace;
}
.anfrage-uebersicht strong { color: var(--accent); font-size: 28px; }
.anfrage-gruppe > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 18px 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.anfrage-gruppe > header h2 {
  margin: 0;
  font: 18px "Black Ops One", sans-serif;
  color: var(--text);
}
.anfrage-gruppe > header span {
  color: var(--accent);
  font: 12px "Share Tech Mono", monospace;
  text-align: right;
}

@media (max-width: 430px) {
  .header {
    padding-right: 12px;
    padding-left: 12px;
  }
  .header > .terminal-strip,
  .header > .hazard-strip {
    margin-right: -12px;
    margin-left: -12px;
  }
  .terminal-strip {
    height: 18px;
    font-size: 9px;
  }
  .hazard-strip { height: 4px; }
  .auth-header-row {
    min-height: 52px;
    padding-top: 4px;
  }
  .header .auth-brand .logo { width: 42px; }
  .auth-brand { gap: 8px; min-width: 0; }
  .auth-brand strong {
    overflow: hidden;
    font-size: 17px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .auth-motto {
    min-height: 20px;
    font-size: 9px;
    letter-spacing: .13em;
  }
  .auth-content { padding: 8px 10px 16px; }
  .auth-content .seg { margin-bottom: 8px; }
  .auth-content .seg button { font-size: 13px; }
  .login-shell { grid-template-columns: minmax(0,1fr); gap: 8px; }
  .login-shell .panel { padding: 9px; }
  .login-shell .panel-title { font-size: 17px; }
  .login-shell .panel-sub { margin-bottom: 8px; font-size: 13px; }
  .login-shell .btn { font-size: 14px; }
  .login-shell .btn.ghost { font-size: 11px; }
  .auth-help-actions { grid-template-columns: 1fr; gap: 4px; }
  .login-shell .elite-card {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 6px;
    padding: 8px;
  }
  .login-shell .elite-head {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 0;
  }
  .login-shell .elite-head > svg { display: none; }
  .login-shell .elite-head strong {
    font-size: 14px;
    white-space: nowrap;
  }
  .login-shell .elite-head button {
    justify-content: end;
    width: auto;
    min-height: 44px;
    padding: 0 2px;
    text-align: right;
  }
  .login-shell .rankrow {
    grid-template-columns: 24px minmax(0,1fr);
    gap: 5px;
    min-height: 66px;
    margin: 0;
    padding: 5px 4px;
  }
  .login-shell .rankrow .medal { width: 23px; height: 26px; font-size: 11px; }
  .login-shell .rankrow .who { font-size: 13px; }
  .login-shell .rankrow .val {
    grid-column: 1 / -1;
    font-size: 10px;
    text-align: right;
  }
  .login-shell > .regel {
    grid-column: 1 / -1;
    margin-top: 0;
  }
  .legal-top { grid-template-columns: 44px 40px 1fr auto; gap: 8px; padding: 8px 12px; }
  .legal-top span { display: none; }
  .legal-top strong { font-size: 20px; }
  .legal-top small { font-size: 9px; }
  .legal-tabs { overflow-x: auto; display: flex; scrollbar-width: none; }
  .legal-tabs button { flex: 1 0 auto; padding: 0 12px; }
  .legal-controls { flex-direction: column; }
  #legal-top { width: 100%; }
}

@media (max-width: 350px) {
  .header { padding-left: 12px; padding-right: 12px; }
  .header > .terminal-strip,
  .header > .hazard-strip { margin-left: -12px; margin-right: -12px; }
  .header .auth-brand .logo { width: 44px; }
  .auth-brand strong { font-size: 17px; }
  .auth-content { padding-left: 12px; padding-right: 12px; }
  .login-shell { grid-template-columns: minmax(0,1fr); gap: 7px; }
  .login-shell .elite-card { padding: 7px 5px; }
  .login-shell .elite-head svg { display: none; }
  .login-shell .elite-head strong { font-size: 14px; }
  .login-shell .elite-head button { font-size: 9px; }
  .login-shell .rankrow { grid-template-columns: 22px minmax(0,1fr); padding: 4px; gap: 4px; }
  .login-shell .rankrow .medal { width: 21px; height: 24px; font-size: 11px; }
  .login-shell .rankrow .who { font-size: 13px; }
  .login-shell .rankrow .val { font-size: 10px; }
  .login-shell .panel { padding: 8px; }
  .login-shell .panel-kicker { font-size: 9px; }
  .login-shell .panel-title { font-size: 16px; }
  .login-shell .panel-sub { display: none; }
  .login-shell .fld label { font-size: 9px; }
  .login-shell .box input { font-size: 13px; padding-left: 8px; }
  .login-shell .btn { font-size: 13px; padding-left: 4px; padding-right: 4px; }
  .login-shell .btn.ghost { font-size: 10px; }
  .login-shell .btn svg { display: none; }
  .auth-help-actions .link-right { font-size: 8.5px; }
  .login-shell .regel { grid-column: 1 / -1; }
  .legal-top strong { font-size: 17px; }
  .legal-top small { display: none; }
}

@media print {
  body { background: #fff; color: #111; }
  .legal-terminal { border: 0; }
  .legal-terminal > .terminal-strip,
  .legal-terminal > .hazard-strip,
  .legal-top,
  .legal-tabs,
  .legal-toc,
  .legal-controls,
  .legal-bar { display: none !important; }
  .legal-document .section-title,
  .legal-document .legal h2,
  .legal-document .legal p {
    color: #111;
    background: #fff;
  }
  .legal-document > .section-title {
    display: block;
    padding: 0 0 12px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   TRAINING — Uebung mit Orientierung
   Wer trainiert, braucht drei Dinge im Blick: was beim letzten Mal ging,
   was der Bestwert ist, und was jetzt zu tun ist. Vorher stand hier nur
   ein leeres Feld — damit laesst sich nicht steigern.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Kopf der Uebung ──────────────────────────────────────────────── */
.coach-uebung > summary {
  align-items: flex-start;
  gap: 10px;
  min-height: 56px;
}
.coach-uebung .haken {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border: 1px solid var(--line);
  background: var(--panel-2);
}
.coach-uebung.fertig .haken {
  background: var(--olive);
  border-color: var(--olive-lit);
}
.coach-uebung.fertig .haken::after {
  content: "✓";
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 21px;
  text-align: center;
  color: var(--ink);
}
.coach-uebung .kopf {
  flex: 1;
  min-width: 0;
}
.coach-uebung .kopf .name {
  display: block;
}
.coach-uebung .letztes {
  display: block;
  margin-top: 2px;
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  color: var(--text-dim);
}

/* ── Marken: Ziel, letztes Mal, Bestwert ──────────────────────────── */
/* Laufen waagerecht, statt sich auf schmalen Geraeten zu quetschen. */
.coach-uebung-marken {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 0 4px;
}
.coach-uebung-marken .ziel {
  font-family: Oswald, sans-serif;
  font-size: 14px;
  color: var(--text);
  margin-right: 2px;
  line-height: 26px;
}
.coach-uebung-marken .marke {
  padding: 4px 8px;
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--line);
}
.coach-uebung-marken .marke.best {
  color: var(--gold-text, var(--gold));
  border-color: var(--gold-dim);
}

/* ── Aufklapper fuer Anleitung und alte Notiz ─────────────────────── */
.coach-klapp {
  border-top: 1px solid var(--line);
}
.coach-klapp > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  font-family: Oswald, sans-serif;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  cursor: pointer;
  list-style: none;
}
.coach-klapp > summary::-webkit-details-marker {
  display: none;
}
.coach-klapp > summary::before {
  content: "+";
  margin-right: 8px;
  color: var(--gold-text, var(--gold));
}
.coach-klapp[open] > summary::before {
  content: "–";
}
.coach-hinweis.kursiv {
  font-style: italic;
  color: var(--olive-lit);
}

/* ── Aufwaermhinweis ──────────────────────────────────────────────── */
.coach-aufwaermen {
  margin: 8px 0;
  padding: 8px 10px;
  font-family: Oswald, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
  background: var(--panel-2);
  border-left: 2px solid var(--gold);
}

/* ── Satzzeile mit beschrifteten Feldern ──────────────────────────── */
.coach-satz-zeile {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) minmax(0, .72fr) 44px;
  align-items: end;
  gap: 6px;
  padding: 7px 0;
}
.coach-satz-zeile .satz-nr {
  font-family: "Share Tech Mono", monospace;
  font-size: 15px;
  color: var(--gold-text, var(--gold));
  line-height: 1.1;
  padding-bottom: 10px;
}
.coach-satz-zeile .satz-nr small {
  display: block;
  font-size: 8.5px;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}
.coach-satz-zeile .satz-feld {
  display: block;
  min-width: 0;
}
.coach-satz-zeile .satz-feld > span {
  display: block;
  margin-bottom: 4px;
  font-family: "Share Tech Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--text-dim);
}
.coach-satz-zeile .coach-inp {
  width: 100%;
  min-height: 44px;
  padding: 7px 6px;
  text-align: center;
}
.coach-saetze-kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 32px;
  margin-top: 5px;
  border-bottom: 1px solid var(--line);
  color: var(--text-dim);
  font: 10px "Share Tech Mono", monospace;
  letter-spacing: .15em;
}
.coach-saetze-kopf b { color: var(--gold-text, var(--gold)); font-size: 13px; }
.coach-satz-block + .coach-satz-block { border-top: 1px solid var(--line); }
.coach-satz-schwere {
  margin: 2px 0 8px;
  padding: 7px 0 2px 44px;
}
.coach-gesamtwertung {
  margin-top: 9px;
  padding-top: 10px;
  border-top: 1px solid var(--gold-dim);
}
.coach-satz-schritte {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 8px;
  margin: 6px 0 2px;
  font: 11px "Share Tech Mono", monospace;
  letter-spacing: .12em;
  text-align: center;
  color: var(--text-dim);
}
.coach-satz-schritte button {
  min-width: 44px;
  min-height: 44px;
  color: var(--gold-text, var(--gold));
  background: var(--panel-2);
  border: 1px solid var(--line);
}
.coach-satz-schritte button:disabled { opacity: .25; }
.coach-satz-aktionen {
  display: grid;
  grid-template-columns: 1fr 50px;
  align-items: stretch;
  gap: 9px;
  margin: 5px 0 9px;
}
.coach-satz-check {
  display: grid;
  place-items: center;
  width: 44px;
  min-height: 44px;
  padding: 0;
  color: var(--gold-text, var(--gold));
  background: var(--panel-2);
  border: 1px solid var(--gold-dim);
  cursor: pointer;
}
.coach-satz-check span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  opacity: 0;
  color: #11130c;
  background: var(--gold);
  font: 20px Oswald, sans-serif;
}
.coach-satz-check.on span {
  opacity: 1;
}
.coach-satz-aktionen .coach-pause-start {
  margin: 0;
}
.coach-bewertung-menue {
  margin: 6px 0 10px;
  padding: 2px 10px;
  border-left: 2px solid var(--gold);
  background: rgba(242, 169, 0, .035);
  animation: coach-bewertung-rein .2s ease-out;
}
@keyframes coach-bewertung-rein {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Pausenuhr ───────────────────────────────────────────────────── */
.coach-pause {
  margin: 4px 0;
  padding: 8px 10px;
  font-family: "Share Tech Mono", monospace;
  font-size: 14px;
  text-align: center;
  color: var(--gold-text, var(--gold));
  background: var(--panel-2);
  border: 1px solid var(--gold-dim);
}
.coach-pause.aus {
  color: var(--olive-lit);
  border-color: var(--olive-lit);
}

/* Auf sehr schmalen Geraeten rutscht die Satznummer ueber die Felder. */
@media (max-width: 359px) {
  .coach-satz-zeile {
    grid-template-columns: 32px minmax(0, 1fr) minmax(0, .68fr) 44px;
    gap: 4px;
  }
  .coach-satz-zeile .satz-nr small { font-size: 7px; }
  .coach-satz-schwere { padding-left: 36px; }
}

/* ═══════════════════════════════════════════════════════════════════
   TRAINING — Übersicht vor dem Start
   Nach dem Entwurf. Alle Zahlen kommen aus echten Daten: die Dauer ist
   der eigene Schnitt aus beendeten Einheiten, die Sätze sind die
   geplanten, der Fortschritt zählt, was heute schon eingetragen ist.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Kopfbereich ──────────────────────────────────────────────────── */
.tr-held {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 4px 0 16px;
}
.tr-held-text h1 {
  margin: 0;
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: clamp(26px, 8vw, 32px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--text);
  white-space: nowrap;
}
.tr-eyebrow {
  margin: 12px 0 4px;
  font-family: Oswald, sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.tr-eyebrow span {
  margin-right: 6px;
  color: var(--gold-text, var(--gold));
  letter-spacing: 0;
}
.tr-split {
  margin: 0;
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: clamp(21px, 6.4vw, 26px);
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--text);
}

/* Die Worttafel rechts. Statt eines Fotos, das wir nicht haben: der
   Eckenrahmen aus dem Entwurf mit den vier Worten. */
.tr-held-tafel {
  position: relative;
  padding: 12px 10px 12px 14px;
  font-family: "Share Tech Mono", monospace;
  font-size: 9.5px;
  line-height: 1.9;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: right;
  color: var(--text-dim);
}
.tr-held-tafel::before,
.tr-held-tafel::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid var(--olive-lit);
}

/* Tennis ist eine eigene Ballsport-Einheit, kein Krafttrainingssplit. */
.tr-ballsport-held {
  min-height: 132px;
  align-items: center;
}
.tr-ball {
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  color: var(--gold-text, var(--gold));
  font-size: 44px;
  line-height: 1;
  background:
    radial-gradient(circle at 38% 34%, rgba(255, 211, 63, 0.18), transparent 45%),
    var(--panel);
  box-shadow: inset 0 0 0 7px var(--panel), inset 0 0 0 8px var(--olive-lit);
}
.tr-sportstatus {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 14px;
  margin: 0 0 12px;
  border: 1px solid var(--line);
  background: var(--panel);
}
.tr-sportstatus .statuspunkt {
  flex: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--text-dim);
}
.tr-sportstatus.laeuft .statuspunkt,
.tr-sportstatus.fertig .statuspunkt {
  background: var(--gold);
  box-shadow: 0 0 12px rgba(255, 211, 63, 0.45);
}
.tr-sportstatus b,
.tr-sportstatus small {
  display: block;
}
.tr-sportstatus b {
  font-family: Oswald, sans-serif;
  font-size: 12px;
  letter-spacing: 0.15em;
  color: var(--text);
}
.tr-sportstatus small {
  margin-top: 3px;
  color: var(--text-dim);
}
.tr-sportnotizen {
  margin-top: 0;
}
.tr-held-tafel::before {
  top: 0;
  right: 0;
  border-left: none;
  border-bottom: none;
}
.tr-held-tafel::after {
  bottom: 0;
  right: 0;
  border-left: none;
  border-top: none;
}

/* ── Drei Kennzahlen ──────────────────────────────────────────────── */
.tr-kennzahlen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
/* Symbol links, Zahl gross daneben, Bezeichnung darunter. */
.tr-kachel {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 8px;
  background: var(--panel);
  border: 1px solid var(--line);
}
.tr-kachel .sinnbild {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--olive-lit);
}
.tr-kachel .sinnbild svg {
  display: block;
  width: 100%;
  height: 100%;
}
.tr-kachel .zahl {
  min-width: 0;
}
.tr-kachel strong {
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 19px;
  line-height: 1.1;
  color: var(--text);
}
.tr-kachel small {
  margin-left: 3px;
  font-family: "Share Tech Mono", monospace;
  font-size: 10px;
  color: var(--text-dim);
}
.tr-kachel .marke {
  display: block;
  margin-top: 1px;
  font-family: Oswald, sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ── Fortschrittsbalken ───────────────────────────────────────────── */
.tr-fortschritt {
  padding: 10px 12px 12px;
  margin-bottom: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
}
.tr-fortschritt .kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.tr-fortschritt .marke {
  font-family: Oswald, sans-serif;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
}
.tr-fortschritt .wert {
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  color: var(--text-dim);
}
.tr-fortschritt .wert b {
  margin-left: 6px;
  color: var(--olive-lit);
}
.tr-fortschritt .balken {
  height: 8px;
  overflow: hidden;
  background: var(--s-3, #44483f);
  border: 1px solid var(--line);
}
.tr-fortschritt .balken i {
  display: block;
  width: 0;
  height: 100%;
  max-width: 100%;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold-lit));
  box-shadow: 0 0 10px rgba(242, 169, 0, 0.25);
  transition: width 320ms ease;
}

/* ── Übungsliste ──────────────────────────────────────────────────── */
.tr-liste {
  margin-bottom: 14px;
}
.tr-zeile {
  display: grid;
  grid-template-columns: 78px 34px 1fr 18px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 64px;
  padding: 8px 12px 8px 8px;
  margin-bottom: 6px;
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--line);
  cursor: pointer;
}
/* Ohne Foto entfällt die Bildspalte, statt eine leere Fläche zu zeigen. */
.tr-zeile .bild {
  display: grid;
  place-items: center;
  height: 56px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.tr-zeile .bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tr-zeile .bild.platzhalter {
  gap: 2px;
  align-content: center;
  color: var(--text-dim);
  background:
    linear-gradient(rgba(242, 169, 0, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242, 169, 0, 0.035) 1px, transparent 1px),
    #11140d;
  background-size: 10px 10px;
}
.tr-zeile .bild.platzhalter svg {
  width: 22px;
  height: 22px;
  color: var(--olive-lit);
}
.tr-zeile .bild.platzhalter small {
  font: 7px "Share Tech Mono", monospace;
  letter-spacing: 0.08em;
}
.tr-zeile.fertig {
  border-color: var(--gold-dim);
}
.tr-zeile.fertig .nr,
.tr-zeile.fertig .pfeil {
  color: var(--gold-text, var(--gold));
}

.tr-fortschritt-live {
  position: sticky;
  top: 0;
  z-index: 4;
  box-shadow: 0 8px 18px rgba(6, 8, 5, 0.82);
}

.tr-live-held {
  position: relative;
  margin: 2px 0 12px;
  padding: 16px 18px;
  overflow: hidden;
  background:
    linear-gradient(110deg, rgba(98, 104, 58, 0.24), transparent 58%),
    var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
}
.tr-live-held::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 52px;
  height: 52px;
  border-top: 1px solid var(--gold-dim);
  border-right: 1px solid var(--gold-dim);
  clip-path: polygon(38% 0, 100% 0, 100% 62%);
}
.tr-live-held > span,
.tr-live-held > small {
  display: block;
  font: 10px "Share Tech Mono", monospace;
  letter-spacing: 0.14em;
  color: var(--olive-lit);
}
.tr-live-held > span {
  color: var(--gold-text, var(--gold));
}
.tr-live-held h2 {
  margin: 6px 0 4px;
  font: clamp(22px, 7vw, 29px)/1 "Gunplay", "Black Ops One", sans-serif;
  color: var(--text);
}

.tr-seiten {
  display: grid;
  grid-template-columns: 52px 1fr 52px;
  align-items: center;
  gap: 8px;
  margin: 4px 0 14px;
}
.tr-seiten button {
  min-width: 52px;
  min-height: 48px;
  color: var(--gold-text, var(--gold));
  background: var(--panel);
  border: 1px solid var(--gold-dim);
  font: 25px "Share Tech Mono", monospace;
  cursor: pointer;
}
.tr-seiten button:disabled {
  color: var(--text-dim);
  border-color: var(--line);
  opacity: 0.38;
  cursor: default;
}
.tr-seiten > span {
  font: 11px "Share Tech Mono", monospace;
  letter-spacing: 0.12em;
  text-align: center;
  color: var(--text-dim);
}
.tr-seiten > span b {
  color: var(--text);
}
.tr-seiten > span small {
  display: block;
  margin-top: 2px;
  font-size: 9px;
  color: var(--olive-lit);
}

.coach-pause-start {
  width: 100%;
  min-height: 44px;
  margin: 6px 0 10px;
  padding: 9px 12px;
  color: var(--gold-text, var(--gold));
  background: var(--panel-2);
  border: 1px dashed var(--gold-dim);
  font: 12px Oswald, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.coach-pause-start.aus {
  color: var(--olive-lit);
  border-color: var(--olive-lit);
}
.coach-uebung-einzeln > summary {
  cursor: default;
}
.coach-uebung-einzeln > summary::after {
  display: none;
}
.coach-uebung-nav {
  display: grid;
  grid-template-columns: minmax(92px, 1fr) auto minmax(122px, 1fr);
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
}
.coach-uebung-nav button {
  min-height: 44px;
  padding: 7px 9px;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--line);
  font: 10px Oswald, sans-serif;
  letter-spacing: .08em;
  cursor: pointer;
}
.coach-uebung-nav button:last-child {
  color: var(--gold-text, var(--gold));
  border-color: var(--gold-dim);
}
.coach-uebung-nav button:disabled { opacity: .25; cursor: default; }
.coach-uebung-nav span {
  color: var(--text-dim);
  font: 10px "Share Tech Mono", monospace;
}
.coach-hero-bild {
  position: relative;
  margin: 0 0 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--s-0, #0e100b);
}
.coach-hero-bild > img,
.coach-hero-bild > .platzhalter {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.coach-hero-bild > .platzhalter {
  color: var(--text-dim);
  background:
    linear-gradient(rgba(242, 169, 0, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242, 169, 0, 0.035) 1px, transparent 1px);
  background-size: 16px 16px;
}
.coach-hero-bild .platzhalter svg {
  width: 52px;
  height: 52px;
  color: var(--olive-lit);
}
.coach-hero-bild .platzhalter strong {
  font: 14px Oswald, sans-serif;
  letter-spacing: 0.12em;
  color: var(--text);
}
.coach-hero-bild .platzhalter small {
  max-width: 280px;
  padding: 0 15px;
  text-align: center;
}
.coach-bild-knopf {
  position: absolute;
  right: 10px;
  bottom: 10px;
  min-height: 44px;
  padding: 11px 14px;
  background: rgba(15, 17, 11, 0.92);
}
.coach-bild-knopf input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.coach-bewertung {
  margin: 14px 0;
}
.coach-bewertung-titel {
  display: block;
  margin-bottom: 8px;
  font: 12px Oswald, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}
.coach-skala,
.coach-qualitaet {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
}
.coach-skala button,
.coach-qualitaet button {
  min-width: 0;
  min-height: 52px;
  padding: 6px 3px;
  color: var(--text-dim);
  background: var(--panel-2);
  border: 1px solid var(--line);
  cursor: pointer;
}
.coach-skala button.on,
.coach-qualitaet button.on {
  color: #11130c;
  background: var(--gold);
  border-color: var(--gold-lit);
}
.coach-skala small,
.coach-qualitaet small {
  display: block;
  margin-top: 3px;
  font-size: 8px;
  line-height: 1.1;
}
.coach-qualitaet b {
  font: 16px "Share Tech Mono", monospace;
}
.tr-uebung-fertig {
  width: 100%;
  min-height: 54px;
  margin-top: 8px;
}

/* Laufendes Training: eine einzige Karte nutzt den verfuegbaren Screen. */
#app.training-fokus > .content {
  padding-top: 8px;
  padding-bottom: calc(82px + env(safe-area-inset-bottom));
}
#app.training-fokus .content > .section-title,
#app.training-fokus .coach-seg,
#app.training-fokus .tr-live-held,
#app.training-fokus > .legal-bar {
  display: none !important;
}
#app.training-fokus .tr-steuerung {
  margin-bottom: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
#app.training-fokus .coach-uhr {
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  margin: 0;
  padding: 7px 8px;
}
#app.training-fokus .coach-uhr .zeit {
  font-size: 20px;
}
#app.training-fokus .coach-uhr .btn {
  grid-column: auto;
  width: auto;
  min-width: 94px;
  min-height: 42px;
  margin: 0;
}
#app.training-fokus .tr-fortschritt-live {
  position: static;
  margin-bottom: 6px;
  padding: 7px 9px 8px;
  box-shadow: none;
}
#app.training-fokus .tr-fortschritt-live .kopf {
  margin-bottom: 5px;
}
#app.training-fokus .coach-uebung-einzeln {
  box-sizing: border-box;
  max-height: calc(100dvh - 258px - env(safe-area-inset-bottom));
  margin-bottom: 0;
  padding: 8px 10px 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
#app.training-fokus .coach-uebung-einzeln > summary {
  position: sticky;
  z-index: 3;
  top: -8px;
  min-height: 38px;
  padding: 7px 0;
  background: var(--panel);
}
#app.training-fokus .coach-hero-bild > img,
#app.training-fokus .coach-hero-bild > .platzhalter {
  aspect-ratio: 16 / 7;
  min-height: 128px;
}
#app.training-fokus .coach-hero-bild {
  margin-bottom: 8px;
}
#app.training-fokus .coach-uebung-marken,
#app.training-fokus .coach-bewertung {
  margin-top: 8px;
  margin-bottom: 8px;
}
#app.training-fokus .coach-aufwaermen {
  margin: 7px 0;
}
#app.training-fokus .coach-satz-zeile {
  min-height: 44px;
  padding-top: 4px;
  padding-bottom: 4px;
}
#app.training-fokus .coach-pause-start {
  margin: 4px 0 7px;
}
.btn.tr-weiter {
  width: 100%;
  min-height: 52px;
  margin-bottom: 14px;
}
.tr-zeile .nr {
  font-family: "Share Tech Mono", monospace;
  font-size: 13px;
  color: var(--olive-lit);
  border-left: 2px solid var(--olive);
  padding-left: 8px;
  line-height: 1.6;
}
.tr-zeile .text {
  min-width: 0;
}
.tr-zeile .text strong {
  display: block;
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 15px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tr-zeile .text small {
  display: block;
  margin-top: 2px;
  font-family: "Share Tech Mono", monospace;
  font-size: 11.5px;
  color: var(--text-dim);
}
.tr-zeile .pfeil {
  font-size: 20px;
  color: var(--text-dim);
  text-align: right;
}

/* ── Großer Startknopf ────────────────────────────────────────────── */
.btn.tr-start {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  min-height: 56px;
  margin-bottom: 8px;
  font-size: 15px;
  letter-spacing: 0.08em;
}
.btn.tr-start .winkel {
  font-family: "Share Tech Mono", monospace;
  font-size: 13px;
  opacity: 0.75;
}

/* Auf sehr schmalen Geräten rückt die Worttafel unter die Überschrift. */
@media (max-width: 359px) {
  .tr-held {
    grid-template-columns: 1fr;
  }
  .tr-held-tafel {
    text-align: left;
    padding-left: 0;
  }
  .tr-held-tafel::before,
  .tr-held-tafel::after {
    display: none;
  }
}

/* ── Bestwert berichtigen ─────────────────────────────────────────── */
/* Der Bestwert ist antippbar: darunter erscheinen die schwersten Sätze
   mit Datum. Ein Vertipper lässt sich dort wegwerfen, ohne dass jemand
   in die Datenbank muss. */
button.marke.best {
  cursor: pointer;
  min-height: 26px;
}
button.marke.best:hover {
  color: var(--text);
  border-color: var(--gold);
}
.coach-bestliste {
  margin: 4px 0 8px;
  padding: 8px 10px;
  background: var(--panel-2);
  border: 1px solid var(--line);
}
.coach-bestliste .coach-hinweis {
  margin: 0 0 6px;
  font-size: 12.5px;
}
.coach-bestzeile {
  display: grid;
  grid-template-columns: 62px 1fr 44px;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  border-top: 1px solid var(--line);
  font-family: "Share Tech Mono", monospace;
  font-size: 12.5px;
  color: var(--text);
}
.coach-bestzeile:first-of-type {
  border-top: none;
}
.coach-bestzeile .datum {
  color: var(--text-dim);
}
.coach-bestzeile .weg {
  width: 44px;
  min-height: 44px;
  color: var(--text-dim);
  background: none;
  border: none;
  font-size: 14px;
  cursor: pointer;
}
.coach-bestzeile .weg:hover {
  color: var(--gold-text, var(--gold));
}

/* Kleine Ja/Nein-Marke in den Planzeilen: an Trainings- oder Ruhetagen. */
.coach-tag {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-height: 44px;
  cursor: pointer;
  background: var(--panel-2);
  border: 1px solid var(--line);
}
.coach-tag input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.coach-tag span {
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  color: var(--text-dim);
}
.coach-tag input:checked + span {
  color: var(--gold-text, var(--gold));
  font-weight: 700;
}
.coach-tag:has(input:checked) {
  border-color: var(--gold-dim);
}

/* "Uebung abschliessen" ist nicht mehr disabled, damit ein Tippen sagen
   kann, was noch fehlt. Optisch bleibt er trotzdem als gesperrt erkennbar. */
.tr-uebung-fertig[aria-disabled="true"] {
  opacity: 0.45;
}

/* ── DFQ Ernaehrung (HEUTE › 03 Mahlzeiten) ───────────────────────── */
.essen-balken {
  position: relative;
  height: 6px;
  overflow: hidden;
  background: var(--s-3, #44483f);
  border: 1px solid var(--line);
}
.essen-balken.gross {
  height: 12px;
  margin-top: 8px;
}
.essen-balken i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--anteil, 0%);
  background: linear-gradient(90deg, var(--gold-dim), var(--gold));
}
.essen-balken.drueber i {
  background: linear-gradient(90deg, #a8553a, #d9774a);
}

/* Tagesbilanz oben im Abschnitt */
.mz-bilanz {
  padding: 4px 0 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.mz-kcal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-family: Oswald, sans-serif;
  font-size: 13px;
  color: var(--text-dim);
}
.mz-kcal strong {
  font-family: "Share Tech Mono", monospace;
  font-size: 24px;
  font-weight: 400;
  color: var(--text);
}
.mz-kcal b {
  font-family: "Share Tech Mono", monospace;
  font-size: 14px;
  font-weight: 400;
  color: var(--gold-text, var(--gold));
  white-space: nowrap;
}
.mz-kcal b.drueber {
  color: #d9774a;
}
.mz-makros {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.mz-makros small {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 4px;
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
}
.mz-makros small span {
  color: var(--text);
}
/* Unauffaelliger Textknopf, trotzdem 44 px Tippziel */
.mz-zielknopf {
  display: block;
  min-height: 44px;
  margin-top: 4px;
  padding: 0;
  font-family: Oswald, sans-serif;
  font-size: 13px;
  color: var(--gold-text, var(--gold));
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.mz-zielknopf.mz-einger {
  margin: -8px 0 4px 36px;
  color: var(--text-dim);
}
.mz-flexibel {
  display: grid;
  gap: 10px;
  margin: 14px 0 18px;
  padding: 14px;
  border: 1px solid var(--line);
  background: var(--panel-2);
}
.mz-flexibel > label,
.mz-plan-dropdown > label {
  font: 11px "Share Tech Mono", monospace;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.mz-flex-aktionen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.mz-flex-aktionen .btn {
  min-height: 52px;
}
.mz-plan-dropdown {
  display: grid;
  gap: 8px;
  margin: 0 0 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.mz-plan-dropdown > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}
.coach-plan-karte.nutrition-modus {
  margin-bottom: 14px;
}
@media (max-width: 420px) {
  .mz-flex-aktionen,
  .mz-plan-dropdown > div {
    grid-template-columns: 1fr;
  }
}

/* Planmahlzeit */
.mz-plankcal {
  margin-left: auto;
  font-family: "Share Tech Mono", monospace;
  font-size: 13px;
  color: var(--text-dim);
  white-space: nowrap;
}
.coach-schalter.on .mz-plankcal {
  color: var(--gold-text, var(--gold));
}
.coach-meal .coach-schalter .zeit + .mz-plankcal {
  margin-left: 8px;
}
.mz-items {
  margin: 0 0 4px 36px;
}
.mz-item {
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--line);
}
.mz-item-text {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  text-align: left;
  color: var(--text);
  background: none;
  border: 0;
  cursor: pointer;
}
.mz-item-text em {
  flex: none;
  width: 56px;
  font-family: "Share Tech Mono", monospace;
  font-size: 12px;
  font-style: normal;
  color: var(--text-dim);
}
.mz-item-text span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-family: Oswald, sans-serif;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mz-item b {
  flex: none;
  font-family: "Share Tech Mono", monospace;
  font-size: 13px;
  font-weight: 400;
  color: var(--text);
}
.mz-abweichung {
  margin: 4px 0 4px 36px;
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  color: #d9774a;
}
.mz-abweichung.nah {
  color: var(--text-dim);
}
.mz-knoepfe {
  display: flex;
  gap: 8px;
  margin: 0 0 8px 36px;
}
/* Zwei Knoepfe nebeneinander auf 375 px: schmalerer Neunerschnitt wie
   bei den Coaching-Reitern, damit die Beschriftung einzeilig bleibt. */
.mz-knoepfe .btn {
  flex: 1;
  min-width: 0;
  margin-top: 0;
  padding: 0 4px;
  font-size: 11px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* Extra gegessen / Tageszeiten ohne Plan */
.mz-extra {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.mz-extra h3 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 4px 0;
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--text);
}
.mz-extra h3 span {
  font-family: "Share Tech Mono", monospace;
  font-size: 13px;
  color: var(--gold-text, var(--gold));
}
.mz-extra .mz-items {
  margin-left: 0;
}
.essen-neu {
  width: 100%;
}

/* Unterseite: Suchen, Scannen, Menge, Ziele */
.essen-kopf strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.essen-suchfeld,
.essen-voll {
  width: 100%;
  box-sizing: border-box;
}
.essen-aktionen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.essen-treffer {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 6px 0;
  text-align: left;
  color: inherit;
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  cursor: pointer;
}
.essen-treffer:first-child {
  border-top: 0;
}
.essen-treffer-text {
  flex: 1;
  min-width: 0;
}
.essen-treffer-text strong {
  display: block;
  overflow: hidden;
  font-family: Oswald, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.essen-treffer-text small {
  display: block;
  overflow: hidden;
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  color: var(--text-dim);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.essen-treffer-p {
  flex: none;
  font-family: "Share Tech Mono", monospace;
  font-size: 12px;
  color: var(--gold-text, var(--gold));
}
.essen-quelle {
  margin: 8px 0 16px;
  font-family: "Share Tech Mono", monospace;
  font-size: 10px;
  line-height: 1.5;
  color: var(--text-dim);
}
.essen-marke {
  margin: 8px 0 4px;
  font-family: Oswald, sans-serif;
  font-size: 13px;
  color: var(--text-dim);
}
.essen-chips {
  display: flex;
  gap: 8px;
  margin: 8px 0 16px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.essen-chips::-webkit-scrollbar {
  display: none;
}
.essen-chip {
  flex: none;
  min-height: 44px;
  padding: 0 12px;
  font-family: "Share Tech Mono", monospace;
  font-size: 13px;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--line);
  cursor: pointer;
  scroll-snap-align: start;
}
.essen-chip.on {
  color: var(--ink);
  background: var(--gold);
  border-color: var(--gold);
}
.essen-ergebnis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 12px 0;
  text-align: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.essen-ergebnis small {
  display: block;
  font-family: Oswald, sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.essen-ergebnis strong {
  display: block;
  font-family: "Share Tech Mono", monospace;
  font-size: 20px;
  color: var(--text);
}
.essen-ergebnis div:first-child strong {
  color: var(--gold-text, var(--gold));
}
.essen-detail .btn,
.essen-kamera + .coach-hinweis + .coach-row + .btn {
  width: 100%;
}
.essen-slotwahl,
.essen-modus {
  margin: 4px 0 12px;
}
.essen-kamera {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  max-width: 100%;
  background: var(--s-0, #000);
  border: 1px solid var(--line);
}
.essen-kamera video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Ziellinie fuer den Barcode */
.essen-kamera i {
  position: absolute;
  inset: 50% 12% auto;
  height: 2px;
  background: var(--gold);
  box-shadow: 0 0 12px var(--gold);
}

/* ── Coach-Dashboard (Computer und Tablet) ─────────────────────────────
   Die App ist sonst Handybreite. Das Dashboard bekommt die volle Breite
   bis 1440 px, damit alle Kennzahlen nebeneinander lesbar sind. Am Handy
   scrollt die Tabelle waagerecht (Regel 2), statt gequetscht zu werden. */
#app[data-screen="coach-dashboard"] {
  max-width: 1440px;
}
#app[data-screen="coach-dashboard"] > #member-tabs:not(.hidden) {
  width: min(100%, 1440px);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.coach-dash-knopf {
  margin-bottom: 12px;
}
.dash {
  --dash-rot: #d9774a;
  --dash-gelb: var(--gold);
  --dash-gruen: #8f9a55;
  padding-top: 8px;
}
.dash-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: 16px;
}
.dash-kopf .section-title {
  margin-bottom: 4px;
  white-space: nowrap;
}
.dash-kopf .coach-hinweis {
  margin: 0;
}
.dash-steuerung {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.dash-zeitraum {
  display: flex;
  border: 1px solid var(--line);
  background: var(--panel);
}
.dash-zeitraum button {
  min-width: 64px;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--text-dim);
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  cursor: pointer;
}
.dash-zeitraum button:last-child {
  border-right: 0;
}
.dash-zeitraum button.on {
  background: var(--olive);
  color: var(--text);
}
.dash .btn {
  width: auto;
  min-height: 44px;
  padding-inline: 16px;
  white-space: nowrap;
}

.dash-summen {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
.dash-summen > div {
  padding: 12px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 2px solid var(--line);
}
.dash-summen > .rot { border-top-color: var(--dash-rot); }
.dash-summen > .gelb { border-top-color: var(--dash-gelb); }
.dash-summen > .gruen { border-top-color: var(--dash-gruen); }
.dash-summen strong {
  display: block;
  font-family: "Share Tech Mono", monospace;
  font-size: 24px;
  font-weight: 400;
  color: var(--text);
}
.dash-summen small {
  font-family: Oswald, sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.dash-tabelle-rahmen {
  overflow-x: auto;
  scrollbar-width: thin;
  border: 1px solid var(--line);
  background: var(--panel);
  margin-bottom: 16px;
}
.dash-tabelle {
  width: 100%;
  min-width: 1240px;
  border-collapse: separate;
  border-spacing: 0;
  font-family: Oswald, sans-serif;
  font-size: 13px;
  color: var(--text);
}
.dash-tabelle thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 10px 10px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
  font-family: Oswald, sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  text-align: left;
  white-space: nowrap;
}
.dash-tabelle th.zahl,
.dash-tabelle td.zahl {
  text-align: right;
}
.dash-tabelle td,
.dash-tabelle tbody th {
  height: 64px;
  padding: 0 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  white-space: nowrap;
  font-weight: 400;
  text-align: left;
}
.dash-tabelle tbody tr:last-child td,
.dash-tabelle tbody tr:last-child th {
  border-bottom: 0;
}
.dash-tabelle td.zahl {
  font-family: "Share Tech Mono", monospace;
  font-size: 13px;
}
.dash-tabelle small {
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  color: var(--text-dim);
}
.dash-tabelle small.unter {
  display: block;
  margin-top: 2px;
}
.dash-tabelle small.plus { color: var(--dash-gelb); }
.dash-tabelle small.minus { color: var(--dash-gruen); }
.dash-zeile {
  cursor: pointer;
}
.dash-zeile:hover td,
.dash-zeile:hover th {
  background: rgba(124, 128, 80, 0.08);
}
.dash-zeile:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}
/* Namensspalte: bleibt beim waagerechten Scrollen stehen. Eigener Klassen-
   name, weil .dash-name vom Mitglieder-Dashboard (theme-dfq2.css) belegt ist. */
.dash-tabelle .dash-klientname {
  position: sticky;
  left: 0;
  z-index: 2;
  display: table-cell;
  width: 230px;
  min-width: 230px;
  max-width: 230px;
  background: var(--panel);
  box-shadow: 1px 0 0 var(--line);
}
.dash-tabelle thead .dash-klientname {
  z-index: 3;
  background: var(--panel-2);
}
.dash-zeile:hover .dash-klientname {
  background: #23261b;
}
.dash-klientname > .dash-ampel {
  display: inline-block;
  vertical-align: middle;
  margin-right: 12px;
}
.dash-klienttext {
  display: inline-block;
  vertical-align: middle;
  width: calc(100% - 28px);
  min-width: 0;
}
.dash-klienttext strong,
.dash-klienttext small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-klienttext strong {
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--text);
}
.dash-klienttext small {
  margin-top: 2px;
  line-height: 1.2;
}
.dash-ampel {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dash-gruen);
}
.dash-ampel.gelb { background: var(--dash-gelb); }
.dash-ampel.rot { background: var(--dash-rot); }
.dash-wann {
  width: 110px;
  font-size: 13px;
  color: var(--c-sek, #b9bdac);
}
.dash-hinweise {
  width: 400px;
  min-width: 400px;
}
.dash-hinweisreihe {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 380px;
  overflow: hidden;
}
.dash-hinweis {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 3px 9px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 12px;
  line-height: 16px;
  color: #b9bdac;
  white-space: nowrap;
}
/* Farbe nur bei echten Problemen (rot). Gelbe Hinweise bleiben ruhig. */
.dash-hinweis.rot {
  background: rgba(217, 119, 74, 0.14);
  color: #f0b393;
}
.dash-hinweis.mehr {
  flex: none;
  padding-inline: 8px;
  color: var(--text-dim);
  font-family: "Share Tech Mono", monospace;
  cursor: help;
}
.dash-ok {
  font-size: 12px;
  color: var(--text-dim);
}
.dash-trend {
  font-size: 12px;
}
.dash-trend.besser { color: var(--dash-gruen); }
.dash-trend.schlechter { color: var(--dash-rot); }
.dash-trend.gleich,
.dash-trend.neutral { color: var(--text-dim); }
.dash-spark {
  display: block;
  overflow: visible;
}
.dash-spark path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.dash-leer {
  color: var(--text-dim);
  opacity: 0.45;
}

.dash-detail {
  padding: 16px;
  margin-bottom: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  scroll-margin-top: 16px;
}
.dash-detail-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.dash-detail-kopf h2 {
  margin: 0;
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 24px;
  font-weight: 400;
  color: var(--text);
}
.dash-detail-kopf p {
  margin: 4px 0 0;
  font-family: Oswald, sans-serif;
  font-size: 14px;
  color: var(--c-sek, #b9bdac);
}
.dash-marke {
  font-family: Oswald, sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-text, var(--gold));
}
.dash-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dash-hinweisleiste {
  margin-bottom: 12px;
}
.dash-kacheln {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
.dash-kachel {
  padding: 12px;
  background: var(--ink-flaeche, var(--ink));
  border: 1px solid var(--line);
  min-width: 0;
}
.dash-kachel small {
  display: block;
  font-family: Oswald, sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.dash-kachel strong {
  display: block;
  margin: 4px 0 2px;
  font-family: "Share Tech Mono", monospace;
  font-size: 22px;
  font-weight: 400;
  color: var(--text);
}
.dash-kachel span {
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  color: var(--text-dim);
}
.dash-tage {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.dash-tage::-webkit-scrollbar { display: none; }
.dash-tag {
  position: relative;
  flex: 1 0 14px;
  min-width: 14px;
  height: 28px;
  background: var(--ink-flaeche, var(--ink));
  border: 1px solid var(--line);
}
.dash-tag.checkin {
  background: var(--olive);
  border-color: var(--olive-lit);
}
.dash-tag.training::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: var(--gold);
}
.dash-tag em {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: "Share Tech Mono", monospace;
  font-size: 9px;
  font-style: normal;
  color: var(--text-dim);
}
.dash-tag.checkin em { color: var(--text); }
.dash-tage-legende {
  display: flex;
  gap: 16px;
  margin: 4px 0 16px;
  font-family: Oswald, sans-serif;
  font-size: 11px;
  color: var(--text-dim);
}
.dash-tage-legende span::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 4px;
  vertical-align: -1px;
}
.dash-tage-legende .checkin::before { background: var(--olive); }
.dash-tage-legende .training::before { background: var(--gold); height: 4px; vertical-align: 2px; }

.dash-charts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.dash-chart {
  margin: 0;
  padding: 12px;
  background: var(--ink-flaeche, var(--ink));
  border: 1px solid var(--line);
  min-width: 0;
}
.dash-chart svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.dash-chart-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.dash-chart-kopf span {
  font-family: Oswald, sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.dash-chart-kopf strong {
  font-family: "Share Tech Mono", monospace;
  font-size: 18px;
  font-weight: 400;
  color: var(--text);
}
.dash-chart-kopf small {
  margin-left: 4px;
  font-size: 11px;
  color: var(--text-dim);
}
.dash-chart-leer {
  display: grid;
  place-items: center;
  aspect-ratio: 560 / 180;
  margin: 0;
  font-family: Oswald, sans-serif;
  font-size: 14px;
  color: var(--text-dim);
}
.dash-raster {
  stroke: var(--line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.dash-achse {
  fill: var(--text-dim);
  font-family: "Share Tech Mono", monospace;
  font-size: 10px;
}
.dash-linie,
.dash-linie2 {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.dash-linie { stroke: var(--gold); }
.dash-linie2 { stroke: #8fa7b3; }
.dash-brueke {
  stroke-width: 1;
  stroke-dasharray: 3 4;
  opacity: 0.5;
}
.dash-linie-punkt { fill: var(--gold); }
.dash-linie2-punkt { fill: #8fa7b3; }
.dash-balken { fill: var(--olive); }
.dash-balken.erreicht { fill: var(--olive-lit); }
.dash-ziel {
  stroke: var(--gold);
  stroke-width: 1;
  stroke-dasharray: 5 4;
  vector-effect: non-scaling-stroke;
}
.dash-ziel-text {
  fill: var(--gold);
  font-family: "Share Tech Mono", monospace;
  font-size: 10px;
}
.dash-legende {
  display: flex;
  gap: 16px;
  margin-top: 4px;
  font-family: Oswald, sans-serif;
  font-size: 11px;
  color: var(--text-dim);
}
.dash-legende span::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 2px;
  margin-right: 4px;
  vertical-align: 3px;
}
.dash-legende .eins::before { background: var(--gold); }
.dash-legende .zwei::before { background: #8fa7b3; }

@media (max-width: 1180px) {
  .dash-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 739px) {
  .dash-summen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-summen > div:first-child { grid-column: 1 / -1; }
  .dash-charts { grid-template-columns: minmax(0, 1fr); }
  /* Die Grafik wird am Handy auf gut die Haelfte verkleinert. Schrift im
     SVG waechst entsprechend mit, damit sie lesbar bleibt. */
  .dash-achse,
  .dash-ziel-text { font-size: 15px; }
  .dash-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-steuerung { width: 100%; }
  .dash-zeitraum { width: 100%; }
  .dash-zeitraum button { flex: 1; min-width: 0; }
  .dash-steuerung .btn,
  .dash-aktionen,
  .dash-aktionen .btn { flex: 1 1 auto; }
}

/* ── Trainingsbericht nach dem Beenden ─────────────────────────────── */
.tr-bericht-kopf {
  position: relative;
  margin: 2px 0 12px;
  padding: 16px 18px;
  overflow: hidden;
  background:
    linear-gradient(110deg, rgba(195, 162, 62, 0.18), transparent 60%),
    var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
}
.tr-bericht-kopf > span,
.tr-bericht-kopf > small {
  display: block;
  font: 10px "Share Tech Mono", monospace;
  letter-spacing: 0.14em;
  color: var(--gold-text, var(--gold));
}
.tr-bericht-kopf > small {
  margin-top: 4px;
  letter-spacing: 0.04em;
  color: var(--text-dim);
}
.tr-bericht-kopf h2 {
  margin: 4px 0 0;
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: clamp(22px, 6.4vw, 28px);
  letter-spacing: 0.04em;
  color: var(--text);
}

.tr-bericht-kacheln {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.tr-bericht-kacheln > div {
  min-width: 0;
  padding: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
}
.tr-bericht-kacheln small {
  display: block;
  font: 10px "Share Tech Mono", monospace;
  letter-spacing: 0.12em;
  color: var(--text-dim);
}
.tr-bericht-kacheln strong {
  display: block;
  margin-top: 4px;
  font-family: "Share Tech Mono", monospace;
  font-size: clamp(20px, 6vw, 26px);
  font-weight: 400;
  color: var(--text);
  white-space: nowrap;
}
.tr-bericht-kacheln em {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  font: normal 11px "Share Tech Mono", monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tr-bericht-kacheln em.plus { color: var(--gold-text, var(--gold)); }
.tr-bericht-kacheln em.minus { color: #d9774a; }
.tr-bericht-kacheln em.gleich { color: var(--text-dim); }

.tr-bericht-highlights {
  margin: 0;
  padding: 0;
  list-style: none;
}
.tr-bericht-highlights li {
  padding: 8px 0;
  font-family: Oswald, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text);
  border-top: 1px solid var(--line);
}
.tr-bericht-highlights li:first-child { border-top: 0; }
.tr-bericht-highlights b {
  font-family: "Share Tech Mono", monospace;
  font-weight: 400;
  color: var(--gold-text, var(--gold));
}
.tr-bericht-highlights li.gold { color: var(--gold-text, var(--gold)); }
.tr-bericht-highlights li.minus b { color: #d9774a; }
.tr-bericht-health p {
  margin: 0;
  font-family: Oswald, sans-serif;
  font-size: 14px;
  color: var(--text);
}

.tr-bericht-liste {
  margin: 0;
  padding: 0;
  list-style: none;
}
.tr-bericht-uebung {
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.tr-bericht-uebung:first-child { border-top: 0; }
.tr-bericht-uebung .kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.tr-bericht-uebung .kopf strong {
  min-width: 0;
  overflow: hidden;
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 15px;
  letter-spacing: 0.03em;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tr-bericht-uebung .marke {
  flex: none;
  font: 10px "Share Tech Mono", monospace;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}
.tr-bericht-uebung .marke.gold { color: var(--ink); background: var(--gold); padding: 2px 6px; }
.tr-bericht-uebung .marke.plus { color: var(--gold-text, var(--gold)); }
.tr-bericht-uebung .marke.minus { color: #d9774a; }
.tr-bericht-uebung.ausgelassen .kopf strong { color: var(--text-dim); }
.tr-bericht-uebung.ausgelassen .kopf span {
  font: 11px "Share Tech Mono", monospace;
  color: var(--text-dim);
}
.tr-bericht-uebung .werte {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.tr-bericht-uebung .werte small {
  display: block;
  font: 9.5px "Share Tech Mono", monospace;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}
.tr-bericht-uebung .werte b {
  display: block;
  font: 13px "Share Tech Mono", monospace;
  color: var(--text);
  white-space: nowrap;
}
.tr-bericht-uebung .details {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 6px;
  font: 11px "Share Tech Mono", monospace;
  color: var(--text-dim);
}

.tr-bericht-aktionen {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}
.tr-bericht-aktionen .btn,
.tr-zum-bericht {
  width: 100%;
  min-height: 48px;
}
.tr-zum-bericht {
  margin-bottom: 12px;
}

/* ── Coach › PLAN: beschriftete Felder, Rechner und Handy ───────────────
   Vorher standen Name, Beschreibung und vier Zahlen ohne Beschriftung in
   einer 460 px schmalen Zeile - alles abgeschnitten. Jetzt: am Handy eine
   Karte pro Eintrag mit Beschriftung ueber jedem Feld, am Rechner eine
   Tabelle mit Spaltenkopf ueber die volle Breite. */
.coach-feld {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.coach-feld > span {
  font-family: Oswald, sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.coach-plan .coach-inp {
  width: 100%;
  min-width: 0;
  font-family: Oswald, sans-serif;
  font-size: 15px;
  text-align: left;
}
.coach-plan textarea.coach-inp {
  resize: vertical;
  min-height: 64px;
  line-height: 1.4;
}
.coach-plan .coach-inp.zahl {
  font-family: "Share Tech Mono", monospace;
  text-align: right;
}
.coach-plan-kopf {
  display: none;
}
.coach-plan-karte {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
  margin-bottom: 8px;
  background: var(--ink-flaeche, var(--ink));
  border: 1px solid var(--line);
}
.coach-plan-karte > .name,
.coach-plan-karte > .beschreibung,
.coach-plan-karte > .coach-plan-fuss,
.coach-plan-karte > .coach-plan-tage {
  grid-column: 1 / -1;
}
.coach-plan-karte.uebung > .name { grid-column: 1 / -1; }
.coach-plan-karte.uebung > .wert { grid-column: span 1; }
.coach-plan-karte.uebung { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.coach-plan-karte.split { grid-template-columns: minmax(0, 1fr); }
/* Die Phase ist ein einzelnes Feld mit Erklaerung darunter - in vier
   Spalten wuerde der Hinweis auf ein Viertel der Breite gequetscht. */
.coach-plan-karte.phase { grid-template-columns: minmax(0, 1fr); }
.coach-plan-karte.phase > .coach-hinweis { margin: 0; }
.coach-plan-fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.coach-plan-fuss .coach-plan-bild {
  flex: 1;
  margin-top: 0;
}
.coach-plan-quelle {
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  color: var(--text-dim);
}
.coach-plan-fuss .coach-weg {
  margin-left: auto;
}
.coach-plan-summe {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  padding: 12px;
  margin-bottom: 8px;
  border: 1px solid var(--gold-dim);
  background: rgba(195, 162, 62, 0.06);
}
.coach-plan-summe span {
  flex-basis: 100%;
  font-family: Oswald, sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-text, var(--gold));
}
.coach-plan-summe strong {
  font-family: "Share Tech Mono", monospace;
  font-size: 18px;
  font-weight: 400;
  color: var(--text);
}
.coach-plan-summe small {
  font-size: 11px;
  color: var(--text-dim);
}
.coach-plan-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.coach-plan-aktionen > .btn {
  flex: 1 1 180px;
  width: auto;
  margin-top: 0;
}
.coach-plan-split .coach-plan-neu {
  margin: 0 0 8px;
}
.coach-plan-split {
  padding: 8px 0 4px;
}
.coach-plan-tabelle.uebungen {
  padding-left: 12px;
  border-left: 2px solid var(--line);
}
.coach-plan-tage {
  display: flex;
  gap: 8px;
}
/* Nur die Tr/Ru-Haken im PLAN. Ohne diesen Bezug ueberschrieb die Regel
   die Mahlzeiten- und Supplement-Haken unter HEUTE (15.09.2026). */
.coach-plan-tage .coach-schalter {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 12px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  cursor: pointer;
}
.coach-plan-tage .coach-schalter input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.coach-plan-tage .coach-schalter span {
  font-family: Oswald, sans-serif;
  font-size: 13px;
  color: var(--text-dim);
}
.coach-plan-tage .coach-schalter span::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  vertical-align: -1px;
  border: 1px solid var(--text-dim);
}
.coach-plan-tage .coach-schalter:has(input:checked) {
  border-color: var(--gold-dim);
}
.coach-plan-tage .coach-schalter input:checked + span {
  color: var(--text);
}
.coach-plan-tage .coach-schalter input:checked + span::before {
  background: var(--gold);
  border-color: var(--gold);
}
.coach-plan-tage .coach-schalter:has(input:focus-visible) {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}
.coach-plan-info {
  margin-top: 12px;
}
.coach-plan-info summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-family: Oswald, sans-serif;
  font-size: 14px;
  color: var(--gold-text, var(--gold));
  cursor: pointer;
}
.coach-plan-info p {
  margin: 0 0 8px;
  font-family: Oswald, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-sek, #b9bdac);
}

/* Kopfzeile "Coaching fuer" steht auf derselben Linie wie die Reiter.
   Vorher klebte sie am linken Rand, die Reiter standen mittig. */
@media (min-width: 620px) {
  .coach-fuer {
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
  }
  #content:has(.coach-plan) .coach-fuer,
  #content:has(.coach-plan) .coach-seg,
  .coach-seg ~ .coach-plan {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
  }
  .coach-seg ~ .coach-plan .panel {
    max-width: none;
  }
  .coach-plan-karte.uebung { grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)); }
  .coach-plan-karte.uebung > .name { grid-column: auto; }
  .coach-plan-karte.split { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .coach-plan-karte.supplement { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .coach-plan-karte.supplement > .name,
  .coach-plan-karte.supplement > .beschreibung { grid-column: auto; }
}

/* PLAN darf am Rechner breiter werden als die Handyspalte der App. */
#app:has(> #content .coach-plan) {
  max-width: 1240px;
}
#app:has(> #content .coach-plan) > #member-tabs:not(.hidden) {
  width: min(100%, 1240px);
}
.coach-seg ~ .coach-plan ~ *,
#content:has(.coach-plan) .coach-seg {
  width: 100%;
}

/* Ab Rechnerbreite: echte Tabelle, eine Zeile pro Eintrag, Spaltenkopf
   oben, Beschriftungen nur noch fuer Screenreader. */
@media (min-width: 900px) {
  .coach-plan-kopf {
    display: grid;
    gap: 8px;
    padding: 0 12px 4px;
    font-family: Oswald, sans-serif;
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-dim);
  }
  .coach-plan-kopf span:nth-child(n+3) { text-align: right; }
  .coach-plan-tabelle .coach-plan-karte {
    align-items: center;
    padding: 8px 12px;
    margin-bottom: 4px;
  }
  .coach-plan-tabelle .coach-feld > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .coach-plan-tabelle .coach-plan-karte > * {
    grid-column: auto !important;
  }
  .coach-plan-tabelle .coach-plan-fuss {
    justify-content: flex-end;
  }

  .mahlzeiten .coach-plan-kopf,
  .mahlzeiten .coach-plan-karte {
    grid-template-columns: 170px minmax(0, 1fr) 80px 80px 80px 80px 140px;
  }
  /* Die Beschreibung ist der eigentliche Inhalt - sie waechst mit dem
     Text, statt abgeschnitten zu werden. */
  .mahlzeiten textarea.coach-inp {
    min-height: 44px;
    field-sizing: content;
  }
  .mahlzeiten .coach-plan-karte {
    align-items: start !important;
  }

  .uebungen .coach-plan-kopf,
  .uebungen .coach-plan-karte {
    grid-template-columns: minmax(0, 1fr) 84px 96px 96px 232px;
  }
  .uebungen .coach-plan-kopf span:nth-child(2) { text-align: right; }

  .supplements .coach-plan-kopf,
  .supplements .coach-plan-karte {
    grid-template-columns: 200px minmax(0, 1fr) 280px 60px;
  }
  .supplements .coach-plan-kopf span { text-align: left !important; }

  .coach-plan-karte.split {
    grid-template-columns: minmax(0, 1fr) 220px 160px;
    align-items: end;
  }
  .coach-plan-karte.split > * {
    grid-column: auto !important;
  }
  .coach-plan-karte.split .coach-plan-fuss {
    min-height: 44px;
  }
}

/* ── Klientenakte nach dem Vorbild von Apple Health ─────────────────────
   Uebersicht: Kacheln je Kennzahl, nach Themen gruppiert, jede Gruppe mit
   eigener Akzentfarbe. Kennzahl-Seite: Zeitraum, grosse Zahl, Diagramm,
   Trend; am Rechner rechts daneben alle Werte. */
#app[data-screen="coach-akte"] {
  max-width: 1240px;
}
#app[data-screen="coach-akte"] > #member-tabs:not(.hidden) {
  width: min(100%, 1240px);
}
.akte {
  --f-aktiv: #e58a55;
  --f-koerper: #8fb3c9;
  --f-schlaf: #a99be0;
  --f-essen: #a7bb63;
  --f-befinden: #d8bd6a;
  --f-herz: #e07b7b;
  padding-top: 8px;
}
.f-aktiv { --f: var(--f-aktiv); }
.f-koerper { --f: var(--f-koerper); }
.f-schlaf { --f: var(--f-schlaf); }
.f-essen { --f: var(--f-essen); }
.f-befinden { --f: var(--f-befinden); }
.f-herz { --f: var(--f-herz); }

.akte-kopf {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 16px;
  margin-bottom: 16px;
}
.akte-zurueck {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 0 12px 0 8px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--gold-text, var(--gold));
  font-family: Oswald, sans-serif;
  font-size: 15px;
  cursor: pointer;
}
.akte-zurueck:hover { border-color: var(--gold-dim); }
.akte-wer { min-width: 0; }
.akte-wer h1 {
  margin: 0;
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 400;
  line-height: 1.1;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.akte-wer p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 4px 0 0;
  font-family: Oswald, sans-serif;
  font-size: 14px;
  color: var(--c-sek, #b9bdac);
}
.akte-wer .dash-ampel { display: inline-block; }
.akte-kopf-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 12px;
}
.akte-kopf-aktionen > .btn {
  width: auto;
  margin: 0;
  padding-inline: 16px;
}
.akte-design {
  display: flex;
  align-items: center;
  gap: 8px;
}
.akte-design > span {
  font-family: Oswald, sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.akte-design select {
  min-height: 44px;
  min-width: 220px;
  font-family: Oswald, sans-serif;
  font-size: 14px;
}
.akte-design-fest {
  font-family: Oswald, sans-serif;
  font-size: 14px;
  color: var(--c-sek, #b9bdac);
}
.akte-reiter {
  display: flex;
  gap: 2px;
  padding: 2px;
  margin-bottom: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  max-width: 360px;
}
.akte-reiter button {
  flex: 1;
  min-height: 40px;
  background: transparent;
  border: 0;
  color: var(--text-dim);
  font-family: Oswald, sans-serif;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.akte-reiter button.on {
  background: var(--olive);
  color: var(--text);
}

/* Uebersicht */
.akte-highlights,
.akte-gruppe {
  margin-bottom: 24px;
}
.akte-highlights h2,
.akte-gruppe h2 {
  margin: 0 0 8px;
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: var(--text);
}
.akte-highlight-karte {
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
}
.akte-highlight-karte small {
  display: block;
  margin-bottom: 8px;
  font-family: Oswald, sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-text, var(--gold));
}
.akte-highlight-karte p,
.akte-highlight-karte li {
  margin: 0;
  font-family: Oswald, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
}
.akte-highlight-karte ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 4px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.akte-highlight-karte li::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  vertical-align: 2px;
  background: var(--gold);
}
.akte-highlight-karte li.rot::before { background: #d9774a; }

/* Themen nebeneinander, Kacheln je Thema untereinander - am Rechner
   passen so alle Kennzahlen auf einen Bildschirm. */
.akte-gruppen {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 0 16px;
}
.akte-karten {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}
.akte-karte {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 112px;
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.akte-karte:hover { border-color: var(--f); }
.akte-karte:focus-visible { outline: 2px solid var(--f); outline-offset: -2px; }
.akte-karte-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.akte-karte-kopf strong {
  font-family: Oswald, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--f);
}
.akte-karte-kopf small {
  flex: none;
  font-family: Oswald, sans-serif;
  font-size: 13px;
  color: var(--text-dim);
}
.akte-karte-fuss {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
}
.akte-zahl {
  font-family: "Share Tech Mono", monospace;
  font-size: 30px;
  line-height: 1;
  color: var(--text);
  white-space: nowrap;
}
.akte-zahl small {
  font-family: Oswald, sans-serif;
  font-size: 14px;
  color: var(--text-dim);
}
.akte-mini {
  flex: none;
  width: 70px;
  height: 28px;
}
.akte-mini rect,
.akte-mini circle { fill: var(--f); opacity: 0.85; }

/* Kennzahl-Seite */
.akte-wert-kopf {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}
.akte-wert-kopf h2 {
  margin: 0;
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 24px;
  font-weight: 400;
  color: var(--text);
}
/* Grosse Zahlen in der Textschrift mit gleich breiten Ziffern: In der
   Monospace-Schrift bekam das Komma eine volle Zeichenbreite ("7 , 1"). */
.akte .akte-zahl,
.akte .akte-grosszahl strong {
  font-family: Oswald, sans-serif;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.akte-werte li strong {
  letter-spacing: 0;
}
.akte-zeitraum {
  max-width: 520px;
  display: flex;
  gap: 2px;
  padding: 2px;
  margin-bottom: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
}
.akte-zeitraum button {
  flex: 1;
  min-height: 40px;
  background: transparent;
  border: 0;
  color: var(--text);
  font-family: Oswald, sans-serif;
  font-size: 15px;
  cursor: pointer;
}
.akte-zeitraum button.on {
  background: var(--panel-2);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--text);
  font-weight: 600;
}
.akte-wert-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
.akte-wert-haupt {
  min-width: 0;
  padding: 16px;
  background: var(--ink-flaeche, var(--ink));
  border: 1px solid var(--line);
}
.akte-grosszahl small {
  display: block;
  font-family: Oswald, sans-serif;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.akte-grosszahl strong {
  display: block;
  margin: 4px 0;
  font-family: "Share Tech Mono", monospace;
  font-size: clamp(36px, 5vw, 52px);
  font-weight: 400;
  line-height: 1;
  color: var(--text);
}
.akte-grosszahl strong span {
  font-family: Oswald, sans-serif;
  font-size: 18px;
  color: var(--text-dim);
}
.akte-grosszahl em {
  display: block;
  min-height: 20px;
  font-family: Oswald, sans-serif;
  font-size: 15px;
  font-style: normal;
  color: var(--text-dim);
}
.akte-diagramm {
  display: block;
  width: 100%;
  height: auto;
  margin: 16px 0;
  overflow: visible;
  touch-action: pan-y;
}
.akte-raster { stroke: var(--line); stroke-width: 1; }
.akte-senkrecht { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 3; }
.akte-achse {
  fill: var(--text-dim);
  font-family: Oswald, sans-serif;
  font-size: 13px;
}
.akte-balken { fill: var(--f); }
.akte-linie { fill: none; stroke: var(--f); stroke-width: 2; opacity: 0.6; }
.akte-punkt { fill: var(--f); }
.akte-ziel { stroke: var(--text-dim); stroke-width: 1; stroke-dasharray: 6 4; }
.akte-auswahl { stroke: var(--text); stroke-width: 1; }
.akte-auswahl[hidden] { display: none; }
.akte-treffer { fill: transparent; cursor: crosshair; }
.akte-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
  min-height: 52px;
  padding: 8px 16px;
  margin-top: 8px;
  border: 1px solid var(--line);
  font-family: Oswald, sans-serif;
}
.akte-zeile span { font-size: 15px; color: var(--c-sek, #b9bdac); }
.akte-zeile strong { font-size: 16px; font-weight: 600; color: var(--text); }
.akte-zeile strong.besser { color: var(--c-gruen, #a7bb63); }
.akte-zeile strong.schlechter { color: var(--c-orange, #e58a55); }
.akte-trend-karte {
  margin-top: 8px;
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
}
.akte-trend-karte small {
  font-family: Oswald, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--f);
}
.akte-trend-karte p {
  margin: 8px 0 0;
  font-family: Oswald, sans-serif;
  font-size: 17px;
  line-height: 1.4;
  color: var(--text);
}
.akte-werte {
  min-width: 0;
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
}
.akte-werte h3 {
  margin: 0;
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: var(--text);
}
.akte-werte > p {
  margin: 4px 0 8px;
  font-family: Oswald, sans-serif;
  font-size: 13px;
  color: var(--text-dim);
}
.akte-werte ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.akte-werte li button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 12px;
  width: 100%;
  min-height: 48px;
  padding: 8px 4px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.akte-werte li button:hover { background: rgba(255, 255, 255, 0.03); }
.akte-werte li span {
  font-family: Oswald, sans-serif;
  font-size: 14px;
  color: var(--c-sek, #b9bdac);
}
.akte-werte li strong {
  font-family: "Share Tech Mono", monospace;
  font-size: 16px;
  font-weight: 400;
  text-align: right;
}
.akte-werte li strong.text {
  font-family: Oswald, sans-serif;
  font-size: 15px;
}
.akte-werte li strong small {
  font-family: Oswald, sans-serif;
  font-size: 12px;
  color: var(--text-dim);
}
.akte-werte li button > small {
  grid-column: 1 / -1;
  font-family: Oswald, sans-serif;
  font-size: 13px;
  color: var(--text-dim);
}
.akte-werte li.leer {
  padding: 12px 4px;
  font-family: Oswald, sans-serif;
  font-size: 14px;
  color: var(--text-dim);
}

/* PLAN in der Akte: Sprungleiste und Ziele */
.coach-plan-sprung {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: 8px;
  padding: 8px 0;
  margin-bottom: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--ink-flaeche, var(--ink));
}
.coach-plan-sprung::-webkit-scrollbar { display: none; }
.coach-plan-sprung button {
  flex: none;
  min-height: 40px;
  padding: 0 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text);
  font-family: Oswald, sans-serif;
  font-size: 14px;
  cursor: pointer;
}
.coach-plan-sprung button small { display: none; }
.coach-plan-sprung button:hover { border-color: var(--gold-dim); }
.coach-plan-bereich { scroll-margin-top: 64px; }
.coach-plan-karte.ziele { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.coach-plan-karte.ziele > .wert:first-child { grid-column: 1 / -1; }
.btn.busy { opacity: 0.55; pointer-events: none; }
#app[data-screen="coach-akte"] .coach-seg ~ .coach-plan,
.akte .coach-plan { max-width: none; }
.akte .coach-plan .panel { max-width: none; }

@media (min-width: 900px) {
  .akte-wert-raster { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
  .akte-werte { position: sticky; top: 16px; max-height: calc(100vh - 140px); overflow-y: auto; }
  .coach-plan-karte.ziele { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .coach-plan-karte.ziele > .wert:first-child { grid-column: auto; }
}
@media (max-width: 620px) {
  .akte-kopf { grid-template-columns: auto minmax(0, 1fr); }
  .akte-kopf > .akte-kopf-aktionen { grid-column: 1 / -1; justify-content: stretch; }
  .akte-kopf-aktionen > * { flex: 1 1 100%; }
  .akte-design select { flex: 1; min-width: 0; }
  .akte-zurueck span { display: none; }
  .akte-reiter { max-width: none; }
  .akte-gruppen { grid-template-columns: minmax(0, 1fr); }
  .akte-achse { font-size: 20px; }
}

/* Coach-Akte > Plan
   Die Planpflege ist ein Arbeitsbereich, keine Statusanzeige. Deshalb sind
   aktive Reiter hier neutral-dunkel statt oliv und Gold dient nur noch als
   Wegweiser. Mehr Abstand und ruhigere Eingabeflaechen trennen Navigation,
   Abschnitte und Datensaetze klar voneinander. */
#app[data-screen="coach-akte"] .coach-seg button.on {
  position: relative;
  border-image: var(--btn-dark) 46 39 44 44 fill / 9px stretch;
  color: var(--text);
}
#app[data-screen="coach-akte"] .coach-seg button.on::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 4px;
  left: 10px;
  height: 2px;
  background: var(--gold);
}
#app[data-screen="coach-akte"] .coach-plan {
  --plan-surface: #10130f;
  --plan-row: #151914;
  --plan-input: #1b1f1a;
}
#app[data-screen="coach-akte"] .coach-plan-sprung {
  gap: 0;
  padding: 0;
  margin: 0 0 18px;
  background: var(--s-0, #0b0d0a);
  border: 1px solid var(--line);
}
#app[data-screen="coach-akte"] .coach-plan-sprung button {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 12px;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  color: var(--c-prim, #c9cbbf);
  font-size: 15px;
}
#app[data-screen="coach-akte"] .coach-plan-sprung button:last-child { border-right: 0; }
#app[data-screen="coach-akte"] .coach-plan-sprung button small {
  display: inline;
  font: 10px "Share Tech Mono", monospace;
  color: var(--gold-text, var(--gold));
}
#app[data-screen="coach-akte"] .coach-plan-sprung button:hover,
#app[data-screen="coach-akte"] .coach-plan-sprung button:focus-visible {
  background: rgba(195, 162, 62, 0.07);
  color: var(--text);
}
#app[data-screen="coach-akte"] .coach-plan-bereich {
  padding: 20px 18px 18px;
  margin-bottom: 18px;
  background: var(--plan-surface);
  border: 1px solid var(--b-1, #343a30);
  border-top: 3px solid var(--gold-dim);
}
#app[data-screen="coach-akte"] .coach-plan-bereich .eyebrow-rule:first-child {
  margin: 0 0 6px;
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--gold-text, var(--gold));
}
#app[data-screen="coach-akte"] .coach-plan-bereich > .coach-hinweis {
  max-width: 820px;
  margin: 0 0 18px;
  font-size: 14px;
  color: var(--c-sek, #b7baae);
}
#app[data-screen="coach-akte"] .coach-plan-karte {
  background: var(--plan-row);
  border-color: var(--b-1, #30362d);
}
#app[data-screen="coach-akte"] .coach-plan-tabelle .coach-plan-karte:nth-child(odd) {
  background: var(--s-1, #121612);
}
#app[data-screen="coach-akte"] .coach-plan .coach-inp {
  background: var(--plan-input);
  border-color: var(--b-1, #3a4036);
}
#app[data-screen="coach-akte"] .coach-plan .coach-inp:hover { border-color: #596052; }
#app[data-screen="coach-akte"] .coach-plan .coach-inp:focus {
  background: var(--s-2, #20241f);
  border-color: var(--gold);
  outline: 1px solid var(--gold);
}
#app[data-screen="coach-akte"] .coach-plan-karte.ziele {
  gap: 10px;
  padding: 14px;
  background: var(--s-0, #0b0e0b);
}
#app[data-screen="coach-akte"] .coach-plan-summe {
  margin-top: 12px;
  background: var(--s-1, #18170f);
}
#app[data-screen="coach-akte"] .coach-plan-aktionen { margin-top: 14px; }

@media (max-width: 620px) {
  #app[data-screen="coach-akte"] .coach-plan-sprung button {
    flex-direction: column;
    gap: 1px;
    min-width: 76px;
    padding: 5px 10px;
    font-size: 13px;
  }
  #app[data-screen="coach-akte"] .coach-plan-bereich { padding: 16px 12px 14px; }
}

/* ── DFQ Ernaehrung: detaillierte Naehrwerte ──────────────────────── */
.mz-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}
.mz-details small {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 4px;
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
}
.mz-details small span {
  color: var(--text);
}
.mz-details-hinweis {
  margin: 8px 0 0;
  font-family: "Share Tech Mono", monospace;
  font-size: 10px;
  line-height: 1.4;
  color: var(--text-dim);
}

/* "davon …" wie auf der Verpackung eingerueckt */
.coach-row:has(input[data-unter]) > label {
  padding-left: 12px;
  font-size: 13px;
  color: var(--text-dim);
}

.essen-naehrwerte {
  margin: 12px 0 4px;
  overflow-x: auto;
}
.essen-naehrwerte table {
  width: 100%;
  border-collapse: collapse;
  font-family: "Share Tech Mono", monospace;
  font-size: 12px;
}
.essen-naehrwerte th,
.essen-naehrwerte td {
  padding: 6px 0;
  border-top: 1px solid var(--line);
  text-align: left;
  font-weight: 400;
  color: var(--text);
}
.essen-naehrwerte td {
  padding-left: 8px;
  text-align: right;
  white-space: nowrap;
}
.essen-naehrwerte thead th,
.essen-naehrwerte thead td {
  border-top: 0;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--gold-text, var(--gold));
}
.essen-naehrwerte tr.unter th {
  padding-left: 12px;
  color: var(--text-dim);
}
.essen-naehrwerte tr.mikro th,
.essen-naehrwerte tr.mikro td {
  font-size: 11px;
  color: var(--text-dim);
}

/* ── Admin-Bereich: Rechner, Tablet und Handy ────────────────────────────
   Alle neuen Klassen tragen das Praefix adm-, damit nichts in bestehende
   Ansichten durchschlaegt. Am Handy: einspaltig, Navigation im Menue.
   Ab 1024 px: Navigation dauerhaft links, Inhalt ueber die volle Breite. */

/* Seitenkopf */
.adm-kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px 16px;
  margin: 8px 0 16px;
}
.adm-kopf > .back {
  grid-column: 1 / -1;
  justify-self: start;
  width: auto;
  margin: 0;
}
.adm-kopf-text h1 {
  margin: 0;
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.15;
  color: var(--text);
}
.adm-kopf-text p {
  max-width: 72ch;
  margin: 4px 0 0;
  font-family: Oswald, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color: var(--adm-text-2, #b9bdac);
  text-transform: none;
  letter-spacing: normal;
}
.adm-kopf-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.adm-kopf-aktionen .button {
  width: auto;
  margin: 0;
  padding-inline: 16px;
}
@media (max-width: 620px) {
  .adm-kopf { grid-template-columns: minmax(0, 1fr); }
  .adm-kopf-aktionen .button { width: 100%; }
}

/* Abschnitte, Kacheln, Links */
.adm-abschnitt { margin-bottom: 24px; }
.adm-abschnitt > h2 {
  margin: 0 0 8px;
  font-family: Oswald, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-text, var(--gold));
}
.adm-kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px;
}
.adm-kachel {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 4px;
  min-height: 132px;
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.adm-kachel:hover { border-color: var(--gold-dim); }
.adm-kachel.offen { border-left-color: var(--gold); }
.adm-kachel-titel {
  font-family: Oswald, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.adm-kachel strong {
  align-self: center;
  font-family: Oswald, sans-serif;
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.adm-kachel.offen strong { color: var(--gold-text, var(--gold)); }
.adm-kachel small {
  font-family: Oswald, sans-serif;
  font-size: 14px;
  color: var(--c-sek, #b9bdac);
}
.adm-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 8px;
}
.adm-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 12px;
  min-height: 64px;
  padding: 12px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.adm-link:hover { border-color: var(--gold-dim); }
.adm-link span { font-family: Oswald, sans-serif; font-size: 16px; font-weight: 600; }
.adm-link small { grid-column: 1; font-family: Oswald, sans-serif; font-size: 13px; color: var(--text-dim); }
.adm-link i { grid-column: 2; grid-row: 1 / span 2; font-style: normal; font-size: 22px; color: var(--gold-text, var(--gold)); }

/* Kontrollzentrum – Anpassen-Button & Risiko-Badge */
.adm-ctrl-bar { display: flex; justify-content: flex-end; margin: -8px 0 12px; }
.adm-anp-btn { padding: 7px 14px; font-size: 12px; letter-spacing: .06em; width: auto; }
.adm-kachel.risiko { border-left-color: #e53935; }
.adm-kachel.risiko strong { color: #e53935; }

/* Anpassen-Overlay (Slide-in von rechts) */
.adm-anp-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}
.adm-anp-overlay[hidden] { display: none; }
.adm-anp-panel {
  width: min(360px, 100vw);
  height: 100dvh;
  background: var(--bg);
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.adm-anp-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 14px;
  border-bottom: 1px solid var(--line);
  font-family: Oswald, sans-serif;
  font-size: 13px;
  letter-spacing: .14em;
}
.adm-anp-kopf button {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
}
.adm-anp-kopf button:hover { color: var(--text); }
.adm-anp-hinweis {
  margin: 0;
  padding: 10px 20px;
  font-size: 13px;
  color: var(--text-dim);
  border-bottom: 1px solid var(--line);
}
.adm-anp-liste { flex: 1; overflow-y: auto; padding: 4px 0; }
.adm-anp-zeile {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background .1s;
}
.adm-anp-zeile:hover { background: var(--panel); }
.adm-anp-toggle { accent-color: var(--gold); width: 16px; height: 16px; cursor: pointer; }
.adm-anp-titel { font-family: Oswald, sans-serif; font-size: 14px; font-weight: 600; }
.adm-anp-aktionen {
  display: flex;
  gap: 8px;
  padding: 16px;
  border-top: 1px solid var(--line);
}
.adm-anp-aktionen .btn { flex: 1; justify-content: center; }
@media (max-width: 600px) {
  .adm-anp-panel { width: 100vw; }
}

/* Kontrollzentrum – KPI-Karten */
.kpi-reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
.kpi-karte {
  position: relative;
  padding: 16px 30px 16px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 118px;
  cursor: pointer;
}
.kpi-karte:hover { border-color: var(--gold-dim); }
.kpi-karte.risiko { border-left-color: #e53935; }
.karte-griff {
  position: absolute;
  top: 8px;
  right: 10px;
  color: var(--text-dim);
  font-size: 14px;
  cursor: grab;
  user-select: none;
  line-height: 1;
}
.karte-griff:active { cursor: grabbing; }
.karte-dragging { opacity: .4; }
.karte-pfeil {
  position: absolute;
  bottom: 12px;
  right: 10px;
  font-style: normal;
  font-size: 20px;
  color: var(--text-dim);
  line-height: 1;
}
.kpi-karte:hover .karte-pfeil { color: var(--gold-text, var(--gold)); }
.kpi-kopf { display: flex; align-items: center; gap: 8px; }
.kpi-icon { font-size: 15px; }
.kpi-titel { font-family: Oswald, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--text-dim); text-transform: uppercase; }
.kpi-zahl { font-family: Oswald, sans-serif; font-size: 38px; font-weight: 600; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.kpi-karte.risiko .kpi-zahl { color: #e53935; }
.kpi-delta { font-family: Oswald, sans-serif; font-size: 13px; color: var(--text-dim); }
.kpi-delta.positiv { color: var(--dash-gruen); }
.kpi-spark { width: 100%; height: 36px; margin-top: 4px; }
.kpi-spark-flaeche { fill: rgba(195, 162, 62, 0.18); }
.kpi-spark-linie { stroke: var(--gold); stroke-width: 1.6; }

/* Unten-Reihe: Aufgaben, Betreuung, Aktivitäten */
.unten-reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px;
}
.unten-karte { position: relative; background: var(--panel); border: 1px solid var(--line); padding: 16px; display: flex; flex-direction: column; gap: 10px; min-height: 160px; }
.unten-kopf strong { font-family: Oswald, sans-serif; font-size: 13px; letter-spacing: .08em; color: var(--text); }
.unten-liste { display: flex; flex-direction: column; gap: 6px; }
.unten-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  font-family: Oswald, sans-serif;
  font-size: 13px;
}
.unten-zeile:hover { border-color: var(--gold-dim); }
.unten-zeile strong { color: var(--gold-text, var(--gold)); font-size: 16px; }
.betreuung-zeile { gap: 10px; }
.punkt { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--dash-gruen); }
.punkt.rot { background: var(--dash-rot); }
.punkt.gelb { background: var(--dash-gelb); }
.punkt.gruen { background: var(--dash-gruen); }
.aktivitaet-zeile { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-family: Oswald, sans-serif; font-size: 13px; }
.aktivitaet-zeile:last-child { border-bottom: none; }
.aktivitaet-zeile .punkt { margin-top: 5px; background: var(--gold); }
.aktivitaet-zeile strong { color: var(--text); }
.aktivitaet-zeile small { display: block; color: var(--text-dim); font-size: 11px; margin-top: 2px; }

/* Zahl offener Vorgaenge in der Navigation (Rechner und Handy-Menue) */
.adm-zahl {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--gold);
  color: var(--ink);
  font-family: Oswald, sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
}
.drawer button:has(.adm-zahl) {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Werkzeugleiste: Suche und Filter */
.adm-werkzeuge {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}
.adm-werkzeuge .inp.search { margin: 0; text-transform: none; }
.adm-werkzeuge .filter-bar { margin: 0; }
.adm-formular { margin-bottom: 16px; }
.adm-anzahl {
  margin: 0 0 8px;
  font-family: Oswald, sans-serif;
  font-size: 13px;
  color: var(--text-dim);
}

/* Protokoll: kompakte Liste, Details erst nach dem Oeffnen */
.audit-werkzeuge .filter-bar {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 3px;
}
.audit-werkzeuge .chip { flex: 0 0 auto; }
.audit-kopf { display: none; }
.audit-zeile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "zeit kategorie pfeil" "haupt haupt haupt" "akteur akteur akteur";
  gap: 4px 10px;
  width: 100%;
  min-height: 58px;
  padding: 10px 12px;
  margin-bottom: 4px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.audit-zeile:hover,
.audit-zeile:focus-visible { border-color: var(--gold-dim); background: rgba(195, 162, 62, .05); }
.audit-zeit { grid-area: zeit; color: var(--text-dim); font-size: 12px; }
.audit-kategorie { grid-area: kategorie; color: var(--gold-text, var(--gold)); font-size: 11px; letter-spacing: .05em; }
.audit-haupt { grid-area: haupt; min-width: 0; }
.audit-haupt strong,
.audit-haupt small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audit-haupt strong { font-family: Oswald, sans-serif; font-size: 15px; }
.audit-haupt small { color: var(--muted); }
.audit-akteur { grid-area: akteur; overflow: hidden; color: var(--text-dim); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.audit-zeile > i { grid-area: pfeil; color: var(--gold-text, var(--gold)); font-size: 20px; font-style: normal; }
.audit-detail .adm-modal-innen { width: min(900px, 100%); }
.audit-detail-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.audit-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 18px 0; background: var(--line); border: 1px solid var(--line); }
.audit-meta > div { padding: 12px; background: var(--panel); }
.audit-meta dt,
.audit-grund small { color: var(--muted); font-size: 11px; letter-spacing: .06em; }
.audit-meta dd { margin: 3px 0 0; overflow-wrap: anywhere; }
.audit-grund { padding: 12px; border-left: 3px solid var(--gold); background: rgba(195, 162, 62, .06); }
.audit-grund p { margin: 4px 0 0; }
.audit-daten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.audit-daten h3 { margin: 0 0 5px; font: 500 13px Oswald, sans-serif; color: var(--gold-text, var(--gold)); }
.audit-daten pre { max-height: 260px; overflow: auto; margin: 0; padding: 10px; border: 1px solid var(--line); background: var(--s-0, #090b08); color: var(--c-prim, #cbd0c1); font-size: 11px; white-space: pre-wrap; overflow-wrap: anywhere; }

@media (min-width: 900px) {
  .audit-kopf,
  .audit-zeile {
    display: grid;
    grid-template-columns: 135px 145px minmax(260px, 1fr) minmax(170px, .65fr) 18px;
    grid-template-areas: none;
    align-items: center;
    gap: 12px;
  }
  .audit-kopf { padding: 0 12px 7px; color: var(--text-dim); font-size: 11px; text-transform: uppercase; }
  .audit-zeile { min-height: 46px; padding: 7px 12px; }
  .audit-zeit,
  .audit-kategorie,
  .audit-haupt,
  .audit-akteur,
  .audit-zeile > i { grid-area: auto; }
}
@media (max-width: 680px) {
  .audit-meta,
  .audit-daten { grid-template-columns: 1fr; }
  .audit-detail-kopf { display: block; }
  .audit-detail-kopf > button { margin-top: 10px; }
}

/* Mitgliedertabelle: Handy als Karten, Rechner als Tabelle */
.adm-tabelle-kopf { display: none; }
.adm-zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name zahl" "marken marken" "wann wann";
  gap: 4px 12px;
  width: 100%;
  min-height: 64px;
  padding: 12px 16px;
  margin-bottom: 6px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.adm-zeile:hover { border-color: var(--gold-dim); }
.adm-zeile-name { grid-area: name; min-width: 0; }
.adm-zeile-name strong {
  display: block;
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 16px;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.adm-zeile-name small,
.adm-zeile-wann {
  font-family: Oswald, sans-serif;
  font-size: 13px;
  color: var(--text-dim);
}
.adm-zeile-marken { grid-area: marken; min-width: 0; }
.adm-zeile-marken .badges { margin: 0; }
.adm-zeile-zahl { grid-area: zahl; text-align: right; }
.adm-zeile-zahl strong {
  display: block;
  font-family: Oswald, sans-serif;
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.adm-zeile-zahl small {
  font-family: Oswald, sans-serif;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.adm-zeile-wann { grid-area: wann; }
.adm-zeile > i { display: none; }

/* Listen und Spalten */
.adm-liste { display: grid; gap: 0; }
.checkin-offen { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.checkin-offen-aktionen { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
@media (max-width: 700px) {
  .checkin-offen { align-items: stretch; flex-direction: column; }
  .checkin-offen-aktionen { display: grid; grid-template-columns: 1fr; }
}
.adm-spalten {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 24px;
  align-items: start;
}
.adm-spalte { min-width: 0; }

@media (max-width: 620px) {
  .adm-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm-kachel { min-height: 104px; padding: 12px; }
  .adm-kachel strong { font-size: 32px; }
  .adm-kachel small { font-size: 13px; }
  /* Drei Admin-Reiter unten passen nur ohne Mindestbreite ganz hinein. */
  #app[data-bereich="admin"] > #member-tabs:not(.hidden) .tab {
    min-width: 0;
    padding-inline: 4px;
    font-size: 10.5px;
    letter-spacing: 0.02em;
  }
}

/* Navigation links (nur Rechner sichtbar, Inhalt wird per JS gefuellt) */
.adm-nav { display: none; }

@media (min-width: 1024px) {
  #app[data-bereich="admin"] {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    max-width: none;
    border-inline: 0;
  }
  #app[data-bereich="admin"][data-screen] { max-width: none; }
  /* Die PLAN-Regel weiter unten (#app:has(> #content .coach-plan)) wiegt
     schwerer und deckelte die Akte samt Navigation auf 1240 px - PLAN war
     dadurch schmaler als die uebrigen Reiter, der Kopf quetschte den Namen. */
  #app[data-bereich="admin"]:has(> #content .coach-plan) { max-width: none; }
  #app[data-bereich="admin"] > :not(.adm-nav) { grid-column: 2; }
  #app[data-bereich="admin"] > .adm-nav:not(.hidden) {
    grid-column: 1;
    grid-row: 1 / -1;
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 16px 12px;
    overflow-y: auto;
    background: var(--ink-flaeche, var(--ink));
    border-right: 1px solid var(--line);
  }
  #app[data-bereich="admin"] > #member-tabs { display: none !important; }
  #app[data-bereich="admin"] > .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    padding-inline: 32px;
  }
  #app[data-bereich="admin"] > .topbar .burger { display: none; }
  #app[data-bereich="admin"] > .content {
    padding: 24px 32px 48px;
  }
  #app[data-bereich="admin"] > .legal-bar { margin-bottom: 0; }
  #app[data-bereich="admin"] .adm-kopf > .back:not(.adm-immer) { display: none; }
  /* Stammdaten eines Mitglieds zweispaltig, Begruendung und Knopf ueber
     die volle Breite. */
  .adm-mitglied #admin-member-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 12px;
  }
  .adm-mitglied #admin-member-form > .field:nth-last-of-type(1),
  .adm-mitglied #admin-member-form > .button { grid-column: 1 / -1; }
  #app[data-bereich="admin"] .cfg-bar-wrap { left: 264px; }

  .adm-nav-marke {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 8px 16px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--line);
  }
  .adm-nav-marke img { width: 44px; height: auto; }
  .adm-nav-marke small {
    display: block;
    font-family: Oswald, sans-serif;
    font-size: 10.5px;
    letter-spacing: 0.18em;
    color: var(--gold-text, var(--gold));
  }
  .adm-nav-marke strong {
    display: block;
    font-family: "Gunplay", "Black Ops One", sans-serif;
    font-size: 17px;
    font-weight: 400;
    color: var(--text);
  }
  .adm-nav h3 {
    margin: 16px 8px 4px;
    font-family: Oswald, sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-dim);
  }
  .adm-nav button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    margin: 0 0 2px;
    background: transparent;
    border: 0;
    border-left: 3px solid transparent;
    color: var(--adm-nav-text, #d5d8cb);
    font-family: Oswald, sans-serif;
    font-size: 15px;
    text-align: left;
    cursor: pointer;
  }
  .adm-nav button:hover { background: var(--panel); color: var(--text); }
  .adm-nav button.on {
    background: var(--panel-2);
    border-left-color: var(--gold);
    color: var(--text);
    font-weight: 600;
  }
  .adm-nav-liste { flex: 1; }
  .adm-nav-fuss {
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px solid var(--line);
  }

  .adm-liste {
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 0 12px;
  }
  .adm-spalten { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .adm-spalten.adm-formular-links { grid-template-columns: minmax(320px, 420px) minmax(0, 1fr); }
  .adm-spalten .adm-liste { grid-template-columns: minmax(0, 1fr); }
  .adm-mitglied .adm-liste { grid-template-columns: minmax(0, 1fr); }
  .adm-werkzeuge { grid-template-columns: minmax(260px, 420px) minmax(0, 1fr); align-items: center; }

  .adm-tabelle {
    background: var(--panel);
    border: 1px solid var(--line);
  }
  .adm-tabelle-kopf,
  .adm-zeile {
    grid-template-columns: minmax(180px, 1.2fr) minmax(0, 2fr) 100px 150px 24px;
    grid-template-areas: "name marken zahl wann pfeil";
    align-items: center;
  }
  .adm-tabelle-kopf {
    display: grid;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    font-family: Oswald, sans-serif;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-dim);
  }
  .adm-tabelle-kopf span:nth-child(3) { text-align: right; }
  .adm-tabelle .adm-zeile {
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
  }
  .adm-tabelle .adm-zeile:hover { background: rgba(255, 255, 255, 0.03); }
  .adm-zeile-zahl strong { display: inline; font-size: 17px; }
  .adm-zeile-zahl small { display: none; }
  .adm-zeile > i {
    display: block;
    grid-area: pfeil;
    font-style: normal;
    font-size: 20px;
    color: var(--gold-text, var(--gold));
  }
}

/* ── Coaching-Vertrag: Laufzeit je Klient ──────────────────────────────── */
.akte-vertrag-marke {
  padding: 2px 8px;
  border: 1px solid var(--line);
  font-family: Oswald, sans-serif;
  font-size: 13px;
  color: var(--c-sek, #b9bdac);
}
.akte-vertrag-marke.gelb { border-color: var(--gold-dim); color: var(--gold-text, #e2c96f); }
.akte-vertrag-marke.rot { border-color: #d9774a; color: var(--c-orange, #f0b393); }
.akte-vertrag {
  padding: 16px;
  margin-bottom: 16px;
  background: var(--panel);
  border: 1px solid var(--gold-dim);
}
.akte-vertrag-zeilen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: end;
}
.akte-vertrag-schnell,
.akte-vertrag-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.akte-vertrag-aktionen { margin-top: 12px; }
.akte-vertrag .btn {
  width: auto;
  margin: 0;
  padding-inline: 16px;
}
.akte-vertrag .coach-inp { width: 100%; min-height: 44px; }
@media (min-width: 900px) {
  .akte-vertrag-zeilen { grid-template-columns: 200px 200px minmax(0, 1fr); }
}

/* Erinnerung an auslaufende Vertraege */
.adm-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(4, 5, 3, 0.86);
}
.adm-modal-innen {
  width: min(760px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  padding: 24px;
  background: var(--ink-flaeche, var(--ink));
  border: 1px solid var(--gold-dim);
}
.adm-modal-innen h2 {
  margin: 0;
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 24px;
  font-weight: 400;
  color: var(--text);
}
.adm-modal-innen > p {
  margin: 8px 0 16px;
  font-family: Oswald, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color: var(--c-sek, #b9bdac);
}
.adm-modal-liste {
  margin: 0;
  padding: 0;
  list-style: none;
}
.adm-modal-liste li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.adm-modal-liste .wer strong {
  display: block;
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 17px;
  font-weight: 400;
  color: var(--text);
}
.adm-modal-liste .wer small {
  font-family: Oswald, sans-serif;
  font-size: 14px;
}
.adm-modal-liste .wer small.gelb { color: var(--gold-text, #e2c96f); }
.adm-modal-liste .wer small.rot { color: var(--c-orange, #f0b393); }
.adm-modal-liste .tasten {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.adm-modal .btn {
  width: auto;
  margin: 0;
  padding-inline: 14px;
}
.adm-modal-fuss {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 16px;
  margin-top: 8px;
  border-top: 1px solid var(--line);
}

/* Wochenabschluss: anklickbare Member und KPI-Report */
.week-member-link {
  width: 100%;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.week-member-link:first-child { border-top: 0; }
.week-member-link:hover,
.week-member-link:focus-visible {
  background: rgba(236, 184, 0, 0.08);
  outline: 1px solid var(--gold);
  outline-offset: -1px;
}
.week-member-link > span:nth-child(2) { min-width: 0; }
.week-member-link .insta { display: block; }
.week-history-members {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 8px;
  margin: 4px 0;
}
.week-history-member {
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--gold-dim);
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.week-history-member:hover,
.week-history-member:focus-visible { color: var(--gold-text, var(--gold)); }
.week-report-modal .adm-modal-innen { width: min(900px, 100%); }
.week-report-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.week-report-kopf p { margin: 6px 0 0; color: var(--muted); }
.week-report-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 20px 0;
  background: var(--line);
  border: 1px solid var(--line);
}
.week-report-kpis > div { padding: 16px; background: var(--panel); }
.week-report-kpis small { display: block; color: var(--muted); }
.week-report-kpis strong { display: block; margin-top: 4px; font-size: 28px; color: var(--gold-text, var(--gold)); }
.week-report-titel { margin: 0 0 8px; font-family: "Gunplay", "Black Ops One", sans-serif; font-weight: 400; }
.week-report-verteilung > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 70px;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.week-report-verteilung small { color: var(--muted); }
.week-report-verteilung strong { text-align: right; color: var(--gold-text, var(--gold)); }
@media (max-width: 680px) {
  .week-report-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .week-report-kopf { display: block; }
  .week-report-kopf > button { margin-top: 12px; }
}

/* Fortlaufender Inaktivitaets- und Loeschrisiko-Report */
.risk-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  background: var(--line);
}
.risk-kpis > div { padding: 16px; background: var(--panel); }
.risk-kpis strong { display: block; color: var(--gold-text, var(--gold)); font-size: 30px; }
.risk-kpis small { color: var(--muted); }
.risiko-zeile { cursor: default; }
.risk-actions { grid-area: wann; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; align-items: center; }
.risk-actions .button { width: auto; margin: 0; white-space: nowrap; }
.risk-no-phone { color: var(--muted); font: 12px Oswald, sans-serif; }
@media (min-width: 900px) {
  .adm-tabelle .risiko-zeile {
    grid-template-columns: minmax(180px, 1.2fr) minmax(0, 1.4fr) 90px 160px minmax(190px, auto);
    grid-template-areas: "name marken zahl wann pfeil";
  }
  .adm-tabelle .risiko-zeile .risk-actions { grid-area: pfeil; }
}
@media (max-width: 899px) {
  .risiko-zeile { grid-template-areas: "name zahl" "marken marken" "wann wann" "pfeil pfeil"; }
  .risiko-zeile .risk-actions { grid-area: pfeil; justify-content: flex-start; }
}
.badge.risk-loeschung_droht,
.badge.risk-gesperrt { border-color: #b85846; color: var(--c-orange, #f0b393); }
.badge.risk-warnung { border-color: var(--gold-dim); color: var(--gold-text, var(--gold)); }
.badge.risk-nie_getrackt { border-color: #737866; color: var(--c-prim, #c8ccbd); }
.risk-history { margin-top: 20px; }
.risk-history > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}
.risk-history span { color: var(--muted); }
@media (max-width: 680px) {
  .risk-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Pflichtangaben: Sichtbarkeit direkt am Formular erklaeren */
.profil-sichtbarkeit {
  display: grid;
  gap: 6px;
  margin-bottom: 16px;
  padding: 13px 15px;
  border-left: 3px solid var(--gold);
  background: rgba(195, 162, 62, .08);
}
.profil-sichtbarkeit strong { color: var(--gold-text, var(--gold)); font: 600 13px/1.3 Oswald, sans-serif; letter-spacing: .05em; }
.profil-sichtbarkeit span { color: var(--c-gruen, #cdd3b9); font: 14px/1.45 Oswald, sans-serif; }
.profil-pflicht { width: min(620px, calc(100% - 28px)); margin-inline: auto; }
.profil-pflicht .field label small { color: var(--gold-text, var(--gold)); font-size: 10px; }

/* Self-Service-Onboarding */
.onboarding-resend-title { margin: 0 0 12px; }
#app[data-screen="onboarding-content"] > .topbar,
#app[data-screen="onboarding-content"] > #member-tabs,
#app[data-screen="onboarding-content"] > #adm-nav,
#app[data-screen="onboarding-content"] > .header {
  display: none !important;
}
#app[data-screen="onboarding-content"] > #content { padding-bottom: 24px; }
.onboarding-shell {
  width: min(680px, calc(100vw - 32px));
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}
.onboarding-card {
  width: 100%;
  box-sizing: border-box;
  padding: 22px 16px;
  overflow: hidden;
}
.onboarding-card *, .onboarding-card *::before, .onboarding-card *::after {
  box-sizing: border-box;
}
.onboarding-card .panel-title {
  max-width: 100%;
  font-size: clamp(22px, 7vw, 30px);
  white-space: normal;
  overflow-wrap: normal;
}
.onboarding-progress {
  height: 6px;
  margin: 0 0 8px;
  overflow: hidden;
  border: 1px solid #434932;
  background: var(--s-0, #080a07);
}
.onboarding-progress span {
  display: block;
  width: var(--fortschritt);
  height: 100%;
  background: linear-gradient(90deg, #7c8050, #c3a23e);
  transition: width 180ms ease;
}
.onboarding-step {
  margin: 0 0 12px;
  font: 11px/1.2 "Share Tech Mono", monospace;
  letter-spacing: .12em;
  color: var(--gold-text, #c3a23e);
  text-align: right;
}
.onboarding-card .panel-title { margin-bottom: 8px; }
.onboarding-card .panel-sub {
  margin: 0 0 16px;
  color: var(--c-sek, #b9bdac);
  font-size: 14px;
  line-height: 1.5;
  white-space: normal !important;
  overflow-wrap: anywhere;
}
.onboarding-card fieldset {
  min-width: 0;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}
.onboarding-card legend,
.onboarding-card .field > label {
  display: block;
  margin-bottom: 6px;
  font: 600 11px/1.2 Oswald, sans-serif;
  letter-spacing: .08em;
  color: var(--c-prim, #d8d6c8);
}
.onboarding-card textarea.inp {
  min-height: 92px;
  resize: vertical;
  line-height: 1.45;
}
.onboarding-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 12px;
}
.onboarding-choices {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}
.onboarding-choice {
  position: relative;
  display: block;
  min-height: 56px;
  cursor: pointer;
}
.onboarding-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.onboarding-choice span {
  display: flex;
  min-height: 56px;
  box-sizing: border-box;
  flex-direction: column;
  justify-content: center;
  padding: 10px 14px 10px 44px;
  border: 1px solid var(--b-1, #353b2c);
  background: var(--s-0, #0e110c);
  color: var(--c-prim, #efeee6);
}
.onboarding-choice span::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 16px;
  height: 16px;
  border: 1px solid #73795a;
  transform: translateY(-50%) rotate(45deg);
}
.onboarding-choice input:checked + span {
  border-color: #c3a23e;
  background: var(--s-1, #191a10);
  box-shadow: inset 3px 0 0 #c3a23e;
}
.onboarding-choice input:checked + span::before {
  background: #c3a23e;
  box-shadow: inset 0 0 0 4px #191a10;
}
.onboarding-choice input:focus-visible + span { outline: 2px solid #e1c968; outline-offset: 2px; }
.onboarding-choice strong {
  font: 400 15px/1.2 "Gunplay", "Black Ops One", sans-serif;
}
.onboarding-choice small {
  margin-top: 4px;
  color: var(--c-sek, #b9bdac);
  font: 14px/1.35 Oswald, sans-serif;
}
.onboarding-match {
  min-height: 44px;
  box-sizing: border-box;
  margin: -4px 0 16px;
  padding: 10px 12px;
  border-left: 3px solid #62683a;
  background: rgba(98, 104, 58, .12);
  color: var(--c-sek, #b9bdac);
  font: 14px/1.4 Oswald, sans-serif;
}
.onboarding-match.ok { border-color: #8aa95f; color: var(--c-gruen, #d5e4bd); }
.onboarding-match.found { border-color: #c3a23e; color: var(--gold-text, #e6d592); }
.onboarding-match.warn { border-color: #bd6b4b; color: var(--c-orange, #efbaa3); }
.onboarding-consent { margin: 8px 0 16px; }
.onboarding-actions {
  display: grid;
  grid-template-columns: minmax(120px, .65fr) minmax(180px, 1.35fr);
  gap: 8px;
  margin-top: 16px;
}
.onboarding-actions .btn {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  margin: 0;
  padding-inline: 8px;
}
.onboarding-summary {
  display: grid;
  gap: 8px;
  margin: 16px 0;
  padding: 14px;
  border: 1px solid var(--b-1, #353b2c);
  background: rgba(8, 10, 7, .6);
}
.onboarding-summary span {
  color: var(--c-gruen, #cdd3b9);
  font: 14px/1.35 Oswald, sans-serif;
}
.coin-rules { display: grid; gap: 7px; }
.coin-rule { display: flex; min-height: 52px; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border: 1px solid var(--b-1, #353b2c); background: var(--s-0, #0e110c); }
.coin-rule span { display: grid; gap: 3px; }
.coin-rule strong, .prize-copy strong { color: var(--c-prim, #efeee6); font: 15px/1.2 Oswald, sans-serif; }
.coin-rule small { color: var(--c-sek, #929888); font: 12px/1.2 Oswald, sans-serif; }
.coin-rule b { color: var(--gold-text, #e4ca6c); font: 20px/1 "Share Tech Mono", monospace; }
.elite-title { margin-top: 12px; color: var(--gold-text, #c3a23e); font: 600 12px/1.2 Oswald, sans-serif; letter-spacing: .08em; }
.elite-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.elite-grid div { display: grid; gap: 5px; padding: 8px 4px; border: 1px solid var(--b-1, #353b2c); text-align: center; }
.elite-grid span { color: var(--c-sek, #929888); font: 10px/1.1 Oswald, sans-serif; }
.elite-grid b { color: var(--gold-text, #e4ca6c); font: 15px/1 "Share Tech Mono", monospace; }
.prize-copy, .lifecycle-warning, .push-checklist { display: grid; gap: 7px; margin-top: 12px; padding: 12px; border-left: 3px solid #c3a23e; background: rgba(195, 162, 62, .08); }
.prize-copy span, .lifecycle-warning span, .push-checklist span { color: var(--c-gruen, #cdd3b9); font: 14px/1.4 Oswald, sans-serif; }
.lifecycle-warning { border-color: #c76f54; background: rgba(199, 111, 84, .09); }
.lifecycle-warning strong, .push-checklist strong { color: var(--c-orange, #efbaa3); font: 600 12px/1.2 Oswald, sans-serif; letter-spacing: .08em; }
.push-rules, .push-manifesto { display: grid; gap: 8px; }
.push-rules > div { display: grid; grid-template-columns: 30px 1fr; gap: 8px; align-items: center; padding: 10px; border: 1px solid var(--b-1, #353b2c); background: var(--s-0, #0e110c); }
.push-rules span, .push-manifesto span { color: var(--c-prim, #d8d6c8); font: 14px/1.4 Oswald, sans-serif; }
.push-manifesto { margin: 14px 0; color: var(--gold-text, #e4ca6c); }
.push-manifesto span { color: var(--gold-text, #e4ca6c); }
.cfg-prize-preview { margin-top: 10px; padding: 12px; border: 1px solid var(--b-1, #353b2c); color: var(--c-sek, #b9bdac); font: 14px/1.45 Oswald, sans-serif; white-space: pre-wrap; }
.cfg-prize-panel { margin-top: 10px; }
.onboarding-result { text-align: center; }
.onboarding-result .btn { margin-top: 12px; }
.result-icon {
  display: grid;
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  place-items: center;
  border: 2px solid #c3a23e;
  color: var(--gold-text, #e4ca6c);
  font: 32px/1 "Share Tech Mono", monospace;
}

@media (max-width: 520px) {
  .onboarding-card { padding: 16px; }
  .onboarding-grid { grid-template-columns: 1fr; gap: 0; }
  .onboarding-actions { grid-template-columns: minmax(96px, .7fr) minmax(150px, 1.3fr); }
  .onboarding-actions .btn { font-size: 12px; }
}
/* ── Coaching: ausfuehrlicher Wochencheck ───────────────────────── */
.coach-health-dashboard {
  margin: 6px 0 10px;
  padding: 12px;
  background: linear-gradient(145deg, rgba(24,26,23,.98), rgba(11,12,11,.98));
  border-color: rgba(226,191,98,.28);
}

.coach-health-dashboard > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.coach-health-dashboard header small,
.coach-health-dashboard header span {
  color: var(--gold-text, var(--gold));
  font: 700 10px/1.3 var(--mono);
  letter-spacing: .12em;
}

.coach-health-dashboard header h2 {
  margin: 5px 0 0;
  font-size: 18px;
}

.coach-health-dashboard header span { color: var(--muted); text-align: right; }

.coach-health-kacheln {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.coach-health-kacheln > div {
  min-height: 68px;
  padding: 9px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.1);
}

.coach-health-kacheln small,
.coach-health-kacheln em { display: block; color: var(--muted); font: 700 8px/1.2 var(--mono); letter-spacing: .04em; overflow-wrap: anywhere; }
.coach-health-kacheln strong { display: block; margin-top: 5px; font-size: 17px; }
.coach-health-kacheln em { margin-top: 4px; color: var(--c-gruen, #a7c86b); font-style: normal; }
.coach-health-dashboard .coach-health-werte { margin-top: 7px; }

.coach-checkin-gesperrt {
  display: grid;
  place-items: center;
  min-height: 330px;
  padding: 24px 16px;
  text-align: center;
  background: radial-gradient(circle at 50% 52%, rgba(185,145,56,.12), transparent 31%), linear-gradient(180deg, rgba(26,28,25,.94), rgba(10,11,10,.98));
  border: 1px solid rgba(226,191,98,.25);
}

.coach-checkin-gesperrt small,
.coach-checkin-gesperrt > strong { color: var(--gold-text, var(--gold)); font: 700 11px/1.3 var(--mono); letter-spacing: .16em; }
.coach-checkin-gesperrt h2 { max-width: 440px; margin: 6px 0 0; font-size: clamp(22px, 6vw, 32px); line-height: 1; }
.coach-checkin-gesperrt p { max-width: 430px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.coach-checkin-schloss { display: grid; place-items: center; width: 72px; height: 72px; margin: 10px 0; color: var(--gold-text, var(--gold)); font-size: 32px; border: 2px solid rgba(226,191,98,.55); border-radius: 50%; box-shadow: 0 0 0 7px rgba(226,191,98,.04); }

.coach-wochencheck {
  display: grid;
  gap: 18px;
  padding-bottom: 112px;
}

.coach-checkin-kopf {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0 4px;
  border-bottom: 1px solid rgba(226, 191, 98, .32);
}

.coach-checkin-kopf span,
.coach-checkin-kopf b {
  color: var(--muted);
  font: 700 11px/1.2 var(--mono);
  letter-spacing: .13em;
}

.coach-checkin-kopf h2 {
  margin: 5px 0 14px;
  font-size: clamp(28px, 6vw, 46px);
  line-height: .95;
  text-transform: uppercase;
}

.coach-checkin-kopf b {
  margin-bottom: 14px;
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,.13);
}

.coach-checkin-kopf b.fertig {
  color: var(--c-gruen, #d6edaa);
  border-color: rgba(165, 199, 100, .5);
  background: rgba(111, 139, 61, .14);
}

.coach-checkin-intro {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.coach-checkin-gruppe {
  padding: 0;
  overflow: hidden;
  background: rgba(17, 18, 16, .84);
  border-color: rgba(255,255,255,.1);
}

.coach-checkin-gruppe > header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.025);
}

.coach-checkin-gruppe > header span {
  color: var(--gold-text, var(--gold));
  font: 800 12px/1 var(--mono);
  letter-spacing: .1em;
}

.coach-checkin-gruppe > header h3 {
  margin: 0;
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.coach-checkin-feld {
  padding: 16px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.coach-checkin-feld:last-child { border-bottom: 0; }
.coach-checkin-feld label { display: flex; align-items: center; gap: 8px; }
.coach-checkin-feld > small { margin: -3px 0 2px; color: var(--muted); }

.coach-pflicht {
  color: var(--gold-text, var(--gold));
  font: 700 9px/1 var(--mono);
  letter-spacing: .1em;
}

.coach-checkin-eingabe {
  display: flex;
  align-items: center;
  gap: 10px;
}

.coach-checkin-eingabe .coach-inp { flex: 1; }
.coach-checkin-eingabe > span { min-width: 68px; color: var(--muted); font-size: 12px; }
.coach-checkin-ja-nein { align-self: flex-start; }
.coach-checkin-fotos { padding-bottom: 16px; }
.coach-checkin-fotos > :not(header) { margin-left: 16px; margin-right: 16px; }

.coach-checkin-aktionen {
  position: sticky;
  bottom: 74px;
  z-index: 8;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px;
  background: rgba(11, 12, 10, .94);
  border: 1px solid rgba(226, 191, 98, .25);
  backdrop-filter: blur(14px);
}

.coach-checkin-aktionen.mit-pdf { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.coach-checkin-lesemodus {
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.akte-checkin { display: grid; gap: 14px; }
.akte-checkin-kopf,
.akte-checkin-antworten > header,
.akte-checkin-editor > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
.akte-checkin-kopf small,
.akte-checkin-kopf label span,
.akte-checkin-antworten small,
.akte-checkin-editor small,
.akte-checkin-frage label > span { color: var(--gold-text, var(--gold)); font: 700 9px/1.2 var(--mono); letter-spacing: .1em; }
.akte-checkin-kopf h2,
.akte-checkin-editor h2 { margin: 4px 0 0; }
.akte-checkin-kopf p { margin: 3px 0 0; color: var(--muted); }
.akte-checkin-kopf label { width: min(210px, 44%); }
.akte-checkin-antworten,
.akte-checkin-editor { padding: 14px; }
.akte-checkin-antworten > header strong { display: block; margin-top: 4px; color: var(--gold-text, var(--gold)); }
.akte-checkin-antwortliste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.akte-checkin-antwortliste > div { padding: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.025); }
.akte-checkin-antwortliste b { display: block; margin-top: 5px; font-size: 12px; }
.akte-checkin-antwortliste p { margin: 5px 0 0; color: var(--text); }
#akte-checkin-fragen { display: grid; gap: 7px; margin: 12px 0; }
.akte-checkin-frage { position: relative; display: grid; grid-template-columns: 54px minmax(180px, 2fr) minmax(130px, 1fr) minmax(130px, 1fr) auto 36px; align-items: end; gap: 7px; padding: 9px; border: 1px solid var(--line); }
.akte-checkin-frage label { display: grid; gap: 4px; }
.akte-checkin-sort { display: flex; gap: 3px; }
.akte-checkin-sort button,
.akte-checkin-loeschen { min-width: 26px; min-height: 36px; color: var(--text); background: var(--panel); border: 1px solid var(--line); }
.akte-checkin-pflicht { display: flex !important; min-height: 44px; align-items: center; grid-auto-flow: column; white-space: nowrap; }
.akte-checkin-loeschen { color: var(--c-orange, #d98a73); font-size: 20px; }

@media (max-width: 720px) {
  .akte-checkin-kopf { align-items: flex-start; }
  .akte-checkin-antwortliste { grid-template-columns: 1fr; }
  .akte-checkin-editor > header { align-items: flex-start; flex-direction: column; }
  .akte-checkin-editor > header .btn { width: 100%; }
  .akte-checkin-frage { grid-template-columns: 48px minmax(0, 1fr) 36px; }
  .akte-checkin-frage label { grid-column: 2; }
  .akte-checkin-sort { grid-column: 1; grid-row: 1 / span 4; flex-direction: column; }
  .akte-checkin-loeschen { grid-column: 3; grid-row: 1; }
}

@media (max-width: 560px) {
  .coach-health-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .coach-seg { gap: 3px; }
  .coach-seg button { padding-inline: 1px; border-width: 7px; font-size: 9px; letter-spacing: .035em; }
  .coach-checkin-kopf { align-items: flex-start; }
  .coach-checkin-kopf h2 { margin-bottom: 12px; }
  .coach-checkin-aktionen,
  .coach-checkin-aktionen.mit-pdf { grid-template-columns: 1fr; bottom: 66px; }
}

/* ── Freiwillige Sonntagserinnerung zum Wochencheck ──────────────────── */
.coach-sperre {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: var(--gutter, 16px);
  background: rgba(4, 5, 3, 0.9);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.coach-sperre-karte {
  position: relative;
  width: min(420px, 100%);
  padding: 24px;
  text-align: center;
  background: var(--ink-flaeche, var(--ink));
  border: 1px solid var(--gold-dim);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
.coach-sperre-zu {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font: 18px/1 sans-serif;
  cursor: pointer;
}
.coach-sperre-karte > small {
  display: block;
  font-family: "Share Tech Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--gold-text, var(--gold));
}
.coach-sperre-karte h2 {
  margin: 8px 0 0;
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: clamp(22px, 6vw, 28px);
  font-weight: 400;
  white-space: nowrap;
  color: var(--text);
}
.coach-sperre-karte p {
  margin: 16px 0 24px;
  font-family: Oswald, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-sek, #b9bdac);
}
.coach-sperre-karte .btn {
  width: 100%;
  min-height: 48px;
}
.coach-sperre-karte .btn + .btn {
  margin-top: 10px;
}
.coach-sperre-fuss {
  display: block;
  margin-top: 16px;
  font-family: Oswald, sans-serif;
  font-size: 12px;
  color: #8d9183;
}

/* ── FORTSCHRITT ────────────────────────────────────────────────────── */
/* Loest den alten BERICHT ab. Eine Spalte, 16 px Rand wie ueberall, jede
   Karte eine Frage. minmax(0,1fr) ist Absicht: sonst zieht ein breiter
   Karteninhalt die ganze Spalte ueber den Bildschirmrand hinaus. */
.fort {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  padding-inline: var(--gutter);
}
.fort > *,
.fort-karte > * {
  min-width: 0;
}
.fort-seg {
  margin: 0;
}
.fort-karte {
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
}
.fort-karte > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 16px;
}
.fort-karte header small {
  display: block;
  font-family: "Share Tech Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--gold-text, var(--gold));
}
.fort-karte h2 {
  margin: 4px 0 0;
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: var(--text);
}
.fort-luecke,
.fort-serie,
.fort-quelle {
  flex: 0 0 auto;
  font-family: "Share Tech Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  white-space: nowrap;
}
.fort-luecke { color: var(--c-orange, #c98b62); }
.fort-serie,
.fort-quelle { color: var(--text-dim); }

/* Gewicht */
.fort-kurs {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}
.fort-kurs strong {
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: clamp(28px, 9vw, 34px);
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  color: var(--text);
}
.fort-kurs strong i {
  margin-left: 4px;
  font-size: 15px;
  font-style: normal;
  color: var(--text-dim);
}
.fort-delta {
  text-align: right;
  font-family: Oswald, sans-serif;
}
.fort-delta b {
  display: block;
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}
.fort-delta.hoch b { color: var(--c-gruen, #9fd07a); }
.fort-delta.runter b { color: var(--gold-text, #e2c96f); }
.fort-delta small {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}
.fort-chart {
  display: block;
  width: 100%;
  height: 120px;
}
.fort-chart .fort-band { fill: rgba(195, 162, 62, 0.14); }
.fort-chart .fort-linie {
  fill: none;
  stroke: #9fd07a;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fort-chart .fort-punkt { fill: #5d6350; }
.fort-achse {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  font-family: "Share Tech Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--text-dim);
}

/* Konstanz */
.fort-ringe {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  text-align: center;
}
.fort-ringe figure { margin: 0; }
.fort-ringe svg {
  width: 100%;
  max-width: 64px;
  height: auto;
}
.fort-ringe circle {
  fill: none;
  stroke-width: 6;
}
.fort-ringe .spur { stroke: #2a2d22; }
.fort-ringe .voll {
  stroke: var(--gold);
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}
.fort-ringe .voll.gut { stroke: #9fd07a; }
.fort-ringe .voll.schwach { stroke: #c98b62; }
.fort-ringe b {
  display: block;
  margin-top: 8px;
  font-family: Oswald, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.fort-ringe figcaption {
  font-family: "Share Tech Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--text-dim);
}

/* Ernaehrung */
.fort-balken {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 96px;
}
.fort-balken span {
  flex: 1 1 0;
  min-width: 0;
  height: var(--anteil, 30%);
  background: var(--olive);
}
.fort-balken span.treffer { background: #9fd07a; }
.fort-balken span.drueber { background: #c98b62; }
.fort-balken span.drunter { background: var(--olive); }
.fort-balken span.leer {
  height: 30%;
  background: repeating-linear-gradient(
    45deg,
    #1b1e14,
    #1b1e14 2px,
    #23271b 2px,
    #23271b 4px
  );
}
.fort-werte {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}
.fort-werte div {
  padding: 12px 8px;
  text-align: center;
  border: 1px solid var(--line);
}
.fort-werte small {
  display: block;
  font-family: "Share Tech Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--text-dim);
}
.fort-werte strong {
  display: block;
  margin-top: 4px;
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 19px;
  font-weight: 400;
  color: var(--text);
}

/* Zeilen, Saetze, Hinweise */
.fort-zeile {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  font-family: Oswald, sans-serif;
  font-size: 14px;
  color: var(--text-body, #b9bdac);
}
.fort-zeile b {
  font-weight: 600;
  color: var(--text);
}
.fort-satz,
.fort-leer {
  display: block;
  margin: 16px 0 0;
  font-family: Oswald, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  white-space: normal;
  color: var(--text-body, #b9bdac);
}
.fort-satz b { color: var(--text); }
.fort-leer { margin: 0; }
.fort-hinweis {
  display: block;
  margin: 16px 0 0;
  padding: 12px;
  border-left: 2px solid var(--gold-dim);
  background: var(--panel-2);
  font-family: Oswald, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  white-space: normal;
  color: var(--text-body, #b9bdac);
}
.fort-tabelle summary .nr { color: var(--gold-text, var(--gold)); }

/* ── Klientenakte › Tagebuch ────────────────────────────────────────────
   Alle Tage untereinander zum Nachtragen. Am Handy je Tag eine Karte, ab
   1024 px eine Tabelle mit Spaltenkopf. */
.akte-tagebuch-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: 12px;
}
.akte-tagebuch-kopf h2 {
  margin: 0;
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 22px;
  font-weight: 400;
  color: var(--text);
}
.akte-tagebuch-kopf p {
  margin: 4px 0 0;
  font-family: Oswald, sans-serif;
  font-size: 14px;
  color: var(--c-sek, #b9bdac);
}
.akte-tagebuch-kopf .akte-zeitraum { margin: 0; max-width: 320px; }
.akte-tagebuch-spalten { display: none; }
.akte-tagebuch-zeile {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 12px;
  width: 100%;
  padding: 12px 16px;
  margin-bottom: 6px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.akte-tagebuch-zeile.eingecheckt { border-left-color: var(--olive-lit); }
.akte-tagebuch-zeile:hover { border-color: var(--gold-dim); }
.akte-tagebuch-zeile .tag { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 8px; }
.akte-tagebuch-zeile .tag strong {
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 16px;
  font-weight: 400;
}
.akte-tagebuch-zeile .tag small,
.akte-tagebuch-zeile .marke {
  font-family: Oswald, sans-serif;
  font-size: 13px;
  color: var(--text-dim);
}
.akte-tagebuch-zeile.eingecheckt .marke { color: var(--c-gruen, #a7bb63); }
.akte-tagebuch-zeile .wert {
  font-family: Oswald, sans-serif;
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.akte-tagebuch-zeile .wert small {
  margin-left: 4px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.akte-tagebuch-zeile .training,
.akte-tagebuch-zeile .notiz {
  font-family: Oswald, sans-serif;
  font-size: 14px;
  color: var(--c-sek, #b9bdac);
}
.akte-tagebuch-zeile .notiz {
  grid-column: 1 / -1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.akte-tagebuch-zeile .notiz em { font-style: normal; color: var(--gold-text, var(--gold)); }
.akte-tagebuch-zeile .notiz:empty { display: none; }
.akte-tagebuch-zeile > i { display: none; }

@media (min-width: 1024px) {
  .akte-tagebuch-tabelle {
    background: var(--panel);
    border: 1px solid var(--line);
  }
  .akte-tagebuch-spalten,
  .akte-tagebuch-zeile {
    grid-template-columns: 120px 110px 92px 92px 108px 100px 100px 130px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 12px;
  }
  .akte-tagebuch-spalten {
    display: grid;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    font-family: Oswald, sans-serif;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-dim);
  }
  .akte-tagebuch-zeile {
    margin: 0;
    padding: 10px 16px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-left: 3px solid transparent;
  }
  .akte-tagebuch-zeile:hover { background: rgba(255, 255, 255, 0.03); }
  .akte-tagebuch-zeile .tag,
  .akte-tagebuch-zeile .notiz { grid-column: auto; }
  .akte-tagebuch-zeile .tag { flex-direction: column; gap: 0; }
  .akte-tagebuch-zeile .wert { font-size: 15px; }
  .akte-tagebuch-zeile .wert small { display: none; }
  .akte-tagebuch-zeile > i {
    display: block;
    font-style: normal;
    font-size: 18px;
    color: var(--gold-text, var(--gold));
  }
}

/* ── Berichte: Tag und Zeitraum, am Bildschirm und gedruckt ─────────────
   Am Bildschirm im DFQ-Dunkel, beim Drucken hell und ohne Navigation -
   sonst kostet eine Seite eine halbe Patrone. */
.ber {
  display: block;
  max-width: 1100px;
  margin: 0 auto;
  padding-bottom: 32px;
}
.ber-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 16px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.ber-kopf small {
  font-family: Oswald, sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-text, var(--gold));
}
.ber-kopf h1 {
  margin: 4px 0 0;
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 400;
  color: var(--text);
}
.ber-kopf p {
  margin: 4px 0 0;
  font-family: Oswald, sans-serif;
  font-size: 15px;
  color: var(--c-sek, #b9bdac);
}
.ber-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ber-aktionen .btn {
  width: auto;
  margin: 0;
  padding-inline: 16px;
}
.ber-block {
  margin-bottom: 20px;
  break-inside: avoid;
}
.ber-block h2 {
  margin: 0 0 8px;
  font-family: Oswald, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-text, var(--gold));
}
.ber-block > p {
  margin: 0 0 8px;
  font-family: Oswald, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
}
.ber-spalten {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 24px;
}
.ber-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-family: Oswald, sans-serif;
  font-size: 15px;
  color: var(--text);
}
.ber-tabelle.klein { font-size: 13px; }
.ber-tabelle th,
.ber-tabelle td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-weight: 400;
}
.ber-tabelle thead th {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.ber-tabelle .zahl {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ber-tabelle td small { color: var(--text-dim); font-size: 11px; }
.ber-tabelle tr.offen th { color: var(--text-dim); }
.ber-trend { font-size: 14px; }
.ber-trend.besser { color: var(--c-gruen, #a7bb63); }
.ber-trend.schlechter { color: var(--c-orange, #e58a55); }
.ber-trend.gleich,
.ber-trend.neutral { color: var(--text-dim); }
.ber-liste {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ber-liste li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-family: Oswald, sans-serif;
  font-size: 15px;
  color: var(--text);
}
.ber-liste.eng li { padding: 5px 0; }
.ber-liste li span {
  grid-column: 1;
  font-size: 14px;
  color: var(--c-sek, #b9bdac);
}
.ber-liste li em {
  grid-row: 1;
  grid-column: 2;
  font-style: normal;
  font-size: 13px;
  color: var(--text-dim);
  text-align: right;
}
.ber-liste li.ok em { color: var(--c-gruen, #a7bb63); }
.ber-liste li.offen em { color: var(--text-dim); }
.ber-liste.besser li strong { color: var(--c-gruen, #a7bb63); }
.ber-liste.schlechter li strong { color: var(--c-orange, #e58a55); }
.ber-saetze {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ber-saetze li {
  display: grid;
  grid-template-columns: minmax(120px, 220px) minmax(0, 1fr);
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  font-family: Oswald, sans-serif;
  font-size: 14px;
}
.ber-saetze span { font-family: "Share Tech Mono", monospace; color: var(--c-sek, #b9bdac); }
.ber-notiz,
.ber-frage {
  font-family: Oswald, sans-serif;
  font-size: 15px;
  color: var(--text);
}
.ber-frage strong { color: var(--gold-text, var(--gold)); }
.ber-leer {
  font-family: Oswald, sans-serif;
  font-size: 14px;
  color: var(--text-dim);
}
.ber-fotos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.ber-fotos figure {
  margin: 0;
  break-inside: avoid;
}
.ber-fotos img {
  width: 100%;
  border: 1px solid var(--line);
}
.ber-fotos figcaption {
  margin-top: 4px;
  font-family: Oswald, sans-serif;
  font-size: 12px;
  color: var(--text-dim);
}
.ber-fuss {
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-family: Oswald, sans-serif;
  font-size: 12px;
  color: var(--text-dim);
}
.akte-tagebuch-werkzeuge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.akte-tagebuch-werkzeuge .btn {
  width: auto;
  margin: 0;
  padding-inline: 16px;
}
@media (min-width: 900px) {
  .ber-spalten { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media print {
  #adm-nav,
  #member-tabs,
  .topbar,
  .legal-bar,
  .ber-aktionen,
  .toast { display: none !important; }
  #app,
  #app[data-bereich="admin"] {
    display: block;
    max-width: none;
    background: #fff;
    border: 0;
  }
  #app > .content { padding: 0; }
  body { background: #fff; }
  .ber,
  .ber * {
    color: #111 !important;
    background: transparent !important;
  }
  .ber-kopf small,
  .ber-block h2,
  .ber-frage strong { color: #7a6316 !important; }
  .ber-trend.besser { color: #2f6b2f !important; }
  .ber-trend.schlechter { color: #9c4a1e !important; }
  .ber-kopf,
  .ber-tabelle th,
  .ber-tabelle td,
  .ber-liste li,
  .ber-saetze li,
  .ber-fotos img,
  .ber-fuss { border-color: #bbb !important; }
  .ber-block { page-break-inside: avoid; }
  .ber-fotos { grid-template-columns: repeat(3, 1fr); }
}

/* ─── Coin-Werte: Aufgaben verschieben (19.09.2026) ──────────────────────
   Jede Aufgabe ist eine Karte aus Griff + Zeile (+ offenem Panel). Den
   Griff zieht man mit Maus oder Finger; beim Ziehen hebt sich die Karte. */
.cfg-karte {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  background: var(--row);
}
.cfg-karte > .cfg-row {
  flex: 1;
  min-width: 0;
  padding-left: 4px;
}
.cfg-karte > .cfg-panel {
  flex-basis: 100%;
}
.cfg-griff {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  min-height: 46px;
  font-size: 18px;
  line-height: 1;
  color: var(--text-dim);
  border-bottom: 1px solid var(--line);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.cfg-griff:hover,
.cfg-griff:focus-visible {
  color: var(--gold-text, var(--gold));
}
.cfg-griff:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}
.cfg-karte.zieht {
  z-index: 3;
  background: var(--panel-2);
  outline: 1px solid var(--gold-dim);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
}
.cfg-karte.zieht .cfg-griff {
  color: var(--gold-text, var(--gold));
  cursor: grabbing;
}
.cfg-liste.sortiert {
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}
.cfg-cols.mit-griff {
  padding-left: 48px;
}

/* Coin-Werte: Zahl zwischen Plus und Minus ist ein Eingabefeld (19.09.2026). */
input.cfg-wert {
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 0 4px;
  text-align: center;
  background: transparent;
  border: 0;
  outline: none;
  -moz-appearance: textfield;
}
input.cfg-wert::placeholder {
  color: var(--text-dim);
  opacity: 1;
}
input.cfg-wert:focus {
  background: rgba(195, 162, 62, 0.08);
  box-shadow: inset 0 -2px 0 var(--gold);
}

/* ─── Aufgaben mit Admin-Freigabe (19.09.2026) ───────────────────────────
   Coin-Werte: Schalter im Panel, Marke in der Zeile. Tracking: Marke an der
   Aufgabe und Hinweis ueber dem (freiwilligen) Foto. */
.cfg-name {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cfg-name-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cfg-freigabe,
.task-freigabe {
  flex: none;
  padding: 1px 6px;
  font-family: "Share Tech Mono", monospace;
  font-size: 9px;
  font-style: normal;
  letter-spacing: 0.12em;
  color: var(--gold-text, var(--gold));
  border: 1px solid var(--gold-dim);
}
.task-freigabe {
  display: inline-block;
  margin-top: 4px;
  font-size: 10px;
  letter-spacing: 0.06em;
}
.cfg-schalter {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  cursor: pointer;
}
.cfg-schalter input {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--gold);
}
.cfg-schalter span {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cfg-schalter strong {
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--text);
}
.cfg-schalter small {
  font-family: Oswald, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: var(--c-sek, #b9bdac);
}
.freigabe-hinweis {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  margin-bottom: 8px;
  border: 1px solid var(--gold-dim);
  background: rgba(195, 162, 62, 0.06);
}
.freigabe-hinweis strong {
  font-family: Oswald, sans-serif;
  font-size: 14px;
  color: var(--gold-text, var(--gold));
}
.freigabe-hinweis span {
  font-family: Oswald, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--c-sek, #b9bdac);
}
.anfrage-foto {
  display: block;
  width: 96px;
  height: 96px;
  object-fit: cover;
  margin-top: 8px;
  border: 1px solid var(--line);
  cursor: zoom-in;
}

/* ─── Persoenlicher Einladungslink ──────────────────────────────────── */
#track-form .field > label,
#invite-liste > label {
  display: block;
  margin-bottom: 6px;
  font: 600 11px/1.2 Oswald, sans-serif;
  letter-spacing: .08em;
  color: var(--c-prim, #d8d6c8);
}
.invite-link-row {
  padding: 12px;
  border: 1px solid var(--line);
  background: var(--karte, #11140e);
  font-family: "Share Tech Mono", monospace;
  font-size: 13px;
  color: var(--text);
  word-break: break-all;
}
.invite-link-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.btn-klein {
  min-height: var(--tap);
  padding: 0 16px;
  font-size: 12px;
}
.invite-alt {
  margin-top: 16px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.invite-alt summary {
  font-family: Oswald, sans-serif;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--c-sek, #b9bdac);
  cursor: pointer;
}
.invite-liste {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.invite-liste li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  font-family: Oswald, sans-serif;
  font-size: 14px;
  color: var(--text);
}
.invite-liste-status {
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  color: var(--c-sek, #b9bdac);
  white-space: nowrap;
}
.invite-liste-status-gutgeschrieben {
  color: var(--gold-text, var(--gold));
}

/* ─── Lift der Woche per Instagram-Post ─────────────────────────────────
   Fenster von unten (Handy) bzw. mittig (ab 620 px) statt Aufklappen unter
   der Aufgabe. Darunter: Offene Anfragen mit eingebettetem Post. */
body.lift-fenster-offen {
  overflow: hidden;
}
.lift-fenster {
  position: fixed;
  inset: 0;
  /* ueber der unteren Reiterleiste (#member-tabs, 1000) */
  z-index: 1100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(4, 5, 3, 0);
  transition: background 0.2s ease;
}
.lift-fenster.auf {
  background: rgba(4, 5, 3, 0.86);
}
.lift-fenster-innen {
  width: min(460px, 100%);
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 16px calc(16px + env(safe-area-inset-bottom));
  background: var(--ink-flaeche, var(--ink));
  border: 1px solid var(--gold-dim);
  border-bottom: none;
  transform: translateY(100%);
  transition: transform 0.25s ease;
}
.lift-fenster.auf .lift-fenster-innen {
  transform: none;
}
@media (min-width: 620px) {
  .lift-fenster {
    align-items: center;
    padding: 16px;
  }
  .lift-fenster-innen {
    border-bottom: 1px solid var(--gold-dim);
    padding-bottom: 16px;
    transform: translateY(24px);
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .lift-fenster.auf .lift-fenster-innen {
    opacity: 1;
  }
  .lift-griff {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lift-fenster,
  .lift-fenster-innen {
    transition: none;
  }
}
.lift-griff {
  width: 40px;
  height: 4px;
  margin: 0 auto 12px;
  background: var(--line);
}
.lift-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.lift-icon {
  flex: none;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  font-size: 22px;
  background: var(--s-0, #0b0d09);
  border: 1px solid var(--line);
}
.lift-kopf > div {
  flex: 1;
  min-width: 0;
}
.lift-kopf h2 {
  margin: 0;
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: var(--text);
  white-space: nowrap;
}
.lift-kopf small {
  display: block;
  margin-top: 2px;
  font-family: Oswald, sans-serif;
  font-size: 14px;
  color: var(--gold-text, var(--gold));
}
.lift-zu {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  font-size: 18px;
  color: var(--text-dim);
  background: none;
  border: 1px solid var(--line);
  cursor: pointer;
}
.lift-text,
.lift-tipp {
  margin: 0 0 12px;
  font-family: Oswald, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--c-sek, #b9bdac);
}
.lift-tipp {
  margin-top: 4px;
  padding: 8px 12px;
  border-left: 2px solid var(--gold-dim);
}
.lift-schritte {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
.lift-schritte li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.lift-schritte li:last-child {
  border-bottom: 1px solid var(--line);
}
.lift-schritte b {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  font-family: "Share Tech Mono", monospace;
  font-size: 14px;
  color: var(--ink);
  background: var(--gold);
}
.lift-schritte strong {
  display: block;
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: var(--text);
}
.lift-schritte small {
  display: block;
  font-family: Oswald, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-dim);
}
a.btn.lift-insta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  color: var(--text);
  text-decoration: none;
}
.lift-label {
  display: block;
  margin: 16px 0 6px;
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--text-dim);
}
.lift-feld {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.lift-feld input {
  flex: 1;
  min-width: 0;
  min-height: 46px;
  box-sizing: border-box;
  padding: 0 12px;
  font-family: Oswald, sans-serif;
  /* 16 px, sonst zoomt das iPhone beim Antippen hinein */
  font-size: 16px;
  color: var(--text);
  background: var(--s-0, #0b0d09);
  border: 1px solid var(--line);
  border-radius: 0;
}
.lift-feld input:focus {
  outline: none;
  border-color: var(--gold-dim);
}
.lift-feld .btn {
  flex: none;
  width: auto;
  margin: 0;
}
.lift-status {
  min-height: 20px;
  margin: 6px 0 8px;
  font-family: Oswald, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: var(--gold-text, var(--gold));
}
.lift-status.err {
  color: #d9776b;
}
.lift-post,
.anfrage-post {
  display: block;
  width: 100%;
  max-width: 400px;
  height: 560px;
  margin: 0 auto 12px;
  background: #fff;
  border: 1px solid var(--line);
}
.lift-post {
  height: 440px;
}

/* Freigegebene DFQ Fitnessposts: bewusst wie ein Community-Board und nicht
   wie eine Backend-Tabelle. Reaktionen bleiben beim Original auf Instagram. */
.fitnesspost-community {
  margin: 28px 0;
  padding: 16px;
  background: var(--s-0, #0b0d09);
  border: 1px solid var(--gold-dim);
}
.fitnesspost-community-kopf {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.fitnesspost-community-kopf span,
.fitnesspost-community-kopf b {
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--gold-text, var(--gold));
}
.fitnesspost-community-kopf h2 {
  margin: 3px 0 0;
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 22px;
  font-weight: 400;
  color: var(--text);
}
.fitnesspost-community-kopf b {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--ink);
  background: var(--gold);
}
.fitnesspost-community-text,
.fitnesspost-karte p {
  font-family: Oswald, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-dim);
}
.fitnesspost-community-text {
  margin: 12px 0 16px;
}
.fitnesspost-liste {
  display: grid;
  gap: 16px;
}
.fitnesspost-karte {
  min-width: 0;
  padding: 12px;
  background: var(--ink-flaeche, var(--ink));
  border: 1px solid var(--line);
}
.fitnesspost-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.fitnesspost-meta strong {
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 17px;
  font-weight: 400;
  color: var(--text);
}
.fitnesspost-meta small {
  font-family: "Share Tech Mono", monospace;
  color: var(--text-dim);
}
.fitnesspost-embed {
  display: block;
  width: 100%;
  height: 460px;
  background: #fff;
  border: 0;
}
.fitnesspost-karte p {
  margin: 10px 0;
}
a.btn.fitnesspost-support {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  color: var(--text);
  text-decoration: none;
}
@media (min-width: 760px) {
  .fitnesspost-liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 390px) {
  .lift-feld {
    flex-direction: column;
  }
  .lift-feld .btn {
    width: 100%;
  }
  .fitnesspost-community {
    padding: 12px;
  }
  .fitnesspost-embed {
    height: 420px;
  }
}

/* Offene Anfragen: Karten mit Post, am Rechner nebeneinander */
.adm-liste:has(.anfrage-post-karte) {
  gap: 16px;
}
@media (min-width: 1024px) {
  .adm-liste:has(.anfrage-post-karte) {
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    align-items: start;
  }
}
.anfrage-post-karte {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.anfrage-kopf strong {
  display: block;
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 17px;
  font-weight: 400;
  color: var(--text);
}
.anfrage-kopf small {
  display: block;
  font-family: Oswald, sans-serif;
  font-size: 14px;
  color: var(--text-dim);
}
.anfrage-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--gold-text, var(--gold));
  text-decoration: none;
  border: 1px solid var(--gold-dim);
}

/* ─── Coin-System auf der Startseite (WOCHE) ─────────────────────────── */
.coin-system {
  margin-top: 24px;
}
.coin-system .section-title {
  margin-top: 16px;
}
.cs-text {
  margin: 0 0 12px;
  font-family: Oswald, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--c-sek, #b9bdac);
}
.cs-liste,
.cs-ablauf {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
.cs-liste li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.cs-liste li:last-child {
  border-bottom: 1px solid var(--line);
}
.cs-icon {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  font-size: 20px;
  background: var(--s-0, #0b0d09);
  border: 1px solid var(--line);
}
.cs-info {
  flex: 1;
  min-width: 0;
}
.cs-info strong,
.cs-ablauf strong {
  display: block;
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: var(--text);
}
.cs-info small {
  display: block;
  margin-top: 2px;
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}
.cs-info p,
.cs-ablauf p,
.cs-gewinne p {
  margin: 6px 0 0;
  font-family: Oswald, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--c-sek, #b9bdac);
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.cs-coins {
  flex: none;
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: var(--gold-text, var(--gold));
}
.cs-ablauf li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.cs-ablauf li:last-child {
  border-bottom: 1px solid var(--line);
}
.cs-ablauf li > b {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  font-family: "Share Tech Mono", monospace;
  font-size: 14px;
  color: var(--ink);
  background: var(--gold);
}
.cs-ablauf li > div {
  flex: 1;
  min-width: 0;
}
.cs-plaetze {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}
.cs-platz {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 2px;
  background: var(--s-0, #0b0d09);
  border: 1px solid var(--line);
}
.cs-platz span {
  font-family: "Share Tech Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  white-space: nowrap;
}
.cs-platz b {
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: var(--text);
}
.cs-platz.p1 {
  border-color: var(--gold);
}
.cs-platz.p1 b {
  color: var(--gold-text, var(--gold));
}
.cs-platz.p2,
.cs-platz.p3 {
  border-color: var(--gold-dim);
}
.cs-gewinne {
  padding: 12px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
}
.cs-gewinne strong {
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--gold-text, var(--gold));
}

/* Coin-System: nur Kopfzeilen, Erklaerung zum Aufklappen */
.cs-liste li {
  display: block;
  padding: 0;
}
.cs-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 10px 0;
  list-style: none;
  cursor: pointer;
}
.cs-track-link {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
}
.cs-track-link:hover .cs-info strong,
.cs-track-link:focus-visible .cs-info strong { color: var(--gold-text, var(--gold)); }
div.cs-kopf {
  cursor: default;
}
.cs-kopf::-webkit-details-marker {
  display: none;
}
.cs-kopf .cs-info {
  flex: 1;
  min-width: 0;
}
.cs-ablauf .cs-kopf > b {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  font-family: "Share Tech Mono", monospace;
  font-size: 14px;
  color: var(--ink);
  background: var(--gold);
}
.cs-ablauf .cs-kopf > strong {
  flex: 1;
  min-width: 0;
}
.cs-pfeil {
  flex: none;
  width: 16px;
  font-size: 20px;
  line-height: 1;
  text-align: center;
  color: var(--text-dim);
  transition: transform 0.2s ease;
}
details[open] > .cs-kopf .cs-pfeil {
  transform: rotate(90deg);
  color: var(--gold-text, var(--gold));
}
.cs-kopf:focus-visible {
  outline: 1px solid var(--gold-dim);
  outline-offset: 2px;
}
.cs-mehr {
  margin: 0 0 12px !important;
  font-family: Oswald, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-sek, #b9bdac);
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.cs-liste .cs-mehr {
  padding-left: 52px;
}
.cs-ablauf .cs-mehr {
  padding-left: 40px;
}
@media (prefers-reduced-motion: reduce) {
  .cs-pfeil {
    transition: none;
  }
}

/* Kopf von WOCHE und ELITE wie in der alten Coin-App, Logo ueber die
   ganze Breite, KW-Schild liegt oben rechts auf dem schwarzen Logorand */
.dfq-kopf {
  position: relative;
  margin: 0 -16px 8px;
  /* oben Platz fuer das KW-Schild, damit es die Hantel nicht beruehrt */
  padding: 44px 0 24px;
  text-align: center;
  border-bottom: 2px solid var(--b-1, #3a3d31);
  background: var(--s-0, #000);
}
/* Das Bild hat viel schwarzen Rand unter der Grafik. Zugeschnitten auf
   Hantel + D·F·Q, damit Logo und Motto zusammen mittig im Kopf sitzen. */
.dfq-kopf-logo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 760 / 290;
  object-fit: cover;
  object-position: 50% 18%;
  margin: 0;
  filter: contrast(1.1);
}
.dfq-kopf-motto {
  margin-top: 16px;
  font-family: "Stardos Stencil", serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 5px;
  color: #7d8169;
  white-space: nowrap;
}
.dfq-kopf-kw {
  position: absolute;
  z-index: 1;
  top: 12px;
  right: 16px;
  padding: 4px 8px;
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--gold-text, var(--gold));
  border: 1px solid var(--gold-dim);
  background: rgba(8, 10, 7, 0.7);
  white-space: nowrap;
}
@media (min-width: 620px) {
  .dfq-kopf-motto {
    font-size: 14px;
  }
}

/* TRACKING: Aufgaben wie die Coin-Werte auf WOCHE, zum Aufklappen */
.task-list:has(.task-karte) {
  gap: 0;
}
.task-karte {
  border-top: 1px solid var(--line);
}
.task-karte:last-child {
  border-bottom: 1px solid var(--line);
}
.task-karte[open] > .cs-kopf .cs-info strong {
  color: var(--gold-text, var(--gold));
}
.task-karte .cs-mehr {
  padding-left: 52px;
}
.task-karte .task-form:not(:empty) {
  padding: 0 0 16px;
}
.task-karte .task-form .btn {
  width: 100%;
}

/* Health-Dashboard (COACHING › HEUTE): vier kleine Kacheln, Details per Tipp */
.coach-health-dashboard.hd {
  padding: 12px;
}
.hd-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.hd .hd-kopf small {
  font: 700 10px/1.3 "Share Tech Mono", monospace;
  letter-spacing: 0.12em;
  color: var(--gold-text, var(--gold));
}
.hd .hd-kopf span {
  font: 400 11px/1.3 Oswald, sans-serif;
  letter-spacing: 0;
  color: var(--text-dim);
  text-align: right;
}
.hd-kacheln {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
@media (min-width: 620px) {
  .hd-kacheln {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.hd-kachel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 64px;
  padding: 8px 10px;
  text-align: left;
  color: var(--text);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
}
.hd-kachel[aria-expanded="true"] {
  border-color: var(--gold);
  background: rgba(195, 162, 62, 0.08);
}
.hd-kachel small {
  font: 700 10px/1.2 "Share Tech Mono", monospace;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}
.hd-kachel strong {
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0;
  white-space: nowrap;
}
.hd-kachel em {
  font: 400 12px/1.2 Oswald, sans-serif;
  font-style: normal;
  color: var(--c-gruen, #a7c86b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.hd-detail {
  margin-top: 8px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--gold-dim);
}
.hd-detail h3 {
  margin: 0 0 6px;
  font: 700 10px/1.3 "Share Tech Mono", monospace;
  letter-spacing: 0.12em;
  color: var(--gold-text, var(--gold));
}
.hd-detail dl {
  margin: 0;
}
.hd-detail dl > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-top: 1px solid var(--line);
}
.hd-detail dl > div:first-child {
  border-top: none;
}
.hd-detail dt {
  font: 400 14px/1.3 Oswald, sans-serif;
  color: var(--text-dim);
}
.hd-detail dd {
  margin: 0;
  font: 500 14px/1.3 Oswald, sans-serif;
  color: var(--text);
  text-align: right;
}
.hd-detail dd small {
  margin-left: 4px;
  font-size: 12px;
  color: var(--text-dim);
}
.hd-detail p {
  margin: 8px 0 0;
  font: 400 13px/1.45 Oswald, sans-serif;
  color: var(--c-sek, #b9bdac);
}

/* FORTSCHRITT › GEWICHT: MEIN ZIEL (Phase + Wunschgewicht) */
.fort-ziel {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.fort-ziel-titel,
.fort-ziel-label {
  display: block;
  margin-bottom: 6px;
  font: 700 10px/1.3 "Share Tech Mono", monospace;
  letter-spacing: 0.12em;
  color: var(--gold-text, var(--gold));
}
.fort-ziel-label {
  margin-top: 12px;
  color: var(--text-dim);
}
.fort-ziel-wahl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.fort-ziel-wahl button {
  min-height: 44px;
  padding: 0 4px;
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
}
.fort-ziel-wahl button[aria-pressed="true"] {
  color: var(--ink);
  background: var(--gold);
  border-color: var(--gold);
}
.fort-ziel-feld {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.fort-ziel-feld input {
  flex: 1;
  min-width: 0;
  min-height: 46px;
  box-sizing: border-box;
  padding: 0 12px;
  font: 400 16px Oswald, sans-serif;
  color: var(--text);
  background: var(--s-0, #0b0d09);
  border: 1px solid var(--line);
  border-radius: 0;
}
.fort-ziel-feld input:focus {
  outline: none;
  border-color: var(--gold-dim);
}
.fort-ziel-feld span {
  align-self: center;
  font: 400 14px Oswald, sans-serif;
  color: var(--text-dim);
}
.fort-ziel-feld .btn {
  flex: none;
  width: auto;
  margin: 0;
}
.fort-ziel-satz {
  margin: 10px 0 0;
  font: 400 14px/1.45 Oswald, sans-serif;
  color: var(--c-sek, #b9bdac);
}
.fort-ziel-satz b {
  color: var(--gold-text, var(--gold));
  font-weight: 500;
}

/* Erster Start eines vorbereiteten Coaching-Profils: Einwilligung */
.einwilligung {
  max-width: 460px;
  margin: 0 auto;
  padding: 24px 16px;
}
.einwilligung-logo {
  display: block;
  width: 120px;
  margin: 0 auto 16px;
}
.einwilligung h1 {
  margin: 0 0 8px;
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: clamp(22px, 6.6vw, 28px);
  font-weight: 400;
  text-align: center;
  color: var(--text);
}
.einwilligung > p {
  margin: 0 0 16px;
  font: 400 14px/1.45 Oswald, sans-serif;
  text-align: center;
  color: var(--c-sek, #b9bdac);
}
.einwilligung-haken {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 16px 0;
  font: 400 14px/1.45 Oswald, sans-serif;
  color: var(--c-sek, #b9bdac);
  cursor: pointer;
}
.einwilligung-haken input {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  accent-color: var(--gold);
}
.einwilligung-link {
  display: inline;
  min-height: 0;
  min-width: 0;
  margin: 0;
  line-height: inherit;
  letter-spacing: 0;
  text-transform: none;
  padding: 0;
  font: inherit;
  color: var(--gold-text, var(--gold));
  text-decoration: underline;
  background: none;
  border: none;
  cursor: pointer;
}
.einwilligung .btn {
  width: 100%;
}

/* Erklaervideo zur App: erster Schritt nach der Registrierung und unter
   MEIN KONTO. Das Video ist hochkant (Handy-Bildschirm) - die Hoehe
   bestimmt die Groesse, damit es auf Handy wie Rechner moeglichst gross ist. */
.app-video {
  margin: 0 0 16px;
}
.app-video-player {
  display: block;
  width: 100%;
  max-width: calc((100dvh - 150px) * 498 / 1080);
  min-width: min(100%, 280px);
  aspect-ratio: 498 / 1080;
  margin: 0 auto;
  border: 1px solid #434932;
  background: var(--s-0, #000);
  object-fit: contain;
}
.app-video-leiste {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}
.app-video-steuerung {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}
.app-video-sprung {
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid #7b6a28;
  background: var(--s-0, #080a07);
  color: var(--c-prim, #d8d6c8);
  font: 600 13px/1 Oswald, sans-serif;
  letter-spacing: .08em;
  cursor: pointer;
}
.app-video-sprung:active {
  background: #c3a23e;
  color: #080a07;
}
.app-video-sprung:focus-visible {
  outline: 2px solid #c3a23e;
  outline-offset: 2px;
}
.app-video-leiste > span {
  flex: none;
  font: 11px/1.2 "Share Tech Mono", monospace;
  letter-spacing: .12em;
  color: var(--gold-text, #c3a23e);
}
.app-video-tempi {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}
.app-video-tempo {
  min-height: 44px;
  padding: 0 4px;
  border: 1px solid #434932;
  background: var(--s-0, #080a07);
  color: var(--c-prim, #d8d6c8);
  font: 600 14px/1 Oswald, sans-serif;
  cursor: pointer;
}
.app-video-tempo.aktiv {
  border-color: #c3a23e;
  background: #c3a23e;
  color: #080a07;
}
.app-video-tempo:focus-visible {
  outline: 2px solid #c3a23e;
  outline-offset: 2px;
}
.app-video-autoplay {
  margin: 8px 0 0;
  color: var(--c-sek, #929888);
  font: 12px/1.4 Oswald, sans-serif;
  text-align: center;
}
.app-video-shell .btn {
  width: 100%;
}

/* ─── Bausteine (18.09.2026) ─────────────────────────────────────────────
   Fertige Plan-Pakete. Seite "Bausteine" im Admin-Bereich, Editor und die
   Leiste in Klientenakte › PLAN, aus der man Pakete auf den Plan zieht. */
.bs-uebersicht {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
.bs-import {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 0 0 22px;
  padding: 14px;
  border: 1px solid var(--line);
  background: var(--panel);
}
.bs-import .btn {
  width: auto;
  margin: 0;
}
.bs-import small {
  flex: 1 1 260px;
  font-family: "Share Tech Mono", monospace;
  color: var(--text-dim);
}
.bs-gruppe {
  min-width: 0;
}
.bs-gruppe-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.bs-gruppe-kopf h2 {
  margin: 0;
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 20px;
  color: var(--text);
}
.bs-gruppe-kopf p {
  margin: 4px 0 0;
  font-family: Oswald, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: var(--c-sek, #b9bdac);
}
.bs-gruppe-kopf .btn {
  flex: none;
  width: auto;
  margin: 0;
}
.bs-karte {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  margin-bottom: 8px;
  background: var(--panel);
  border: 1px solid var(--line);
}
.bs-karte-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.bs-karte-text strong {
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: var(--text);
}
.bs-karte-text small,
.bs-stein-text small {
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  color: var(--text-dim);
}
.bs-karte-text p {
  margin: 0;
  font-family: Oswald, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: var(--c-sek, #b9bdac);
}
.bs-karte-knoepfe {
  display: flex;
  gap: 8px;
}
.bs-karte-knoepfe .btn {
  flex: 1;
  width: auto;
  margin: 0;
}
.bs-karte[data-art="training"],
.bs-stein[data-art="training"] { border-left: 2px solid var(--f-aktiv, #e58a55); }
.bs-karte[data-art="ernaehrung"],
.bs-stein[data-art="ernaehrung"] { border-left: 2px solid var(--f-essen, #a7bb63); }
.bs-karte[data-art="supplements"],
.bs-stein[data-art="supplements"] { border-left: 2px solid var(--f-schlaf, #a99be0); }

@media (min-width: 1024px) {
  .bs-uebersicht { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}

/* Editor */
.bs-editor .bs-kopf {
  grid-template-columns: minmax(0, 1fr);
}
.bs-editor .bs-kopf > .coach-feld {
  grid-column: 1 / -1;
}
.bs-editor-fuss {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  padding: 16px 0 24px;
}
.bs-editor-fuss .btn {
  flex: 0 1 220px;
  width: auto;
  margin: 0;
}
@media (min-width: 900px) {
  .bs-editor .bs-kopf { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .bs-editor .bs-kopf > .coach-feld { grid-column: auto; }
}

/* Auswahl beim Zuweisen */
/* margin: auto holt den Dialog in die Mitte - ein globaler Reset setzt
   den Aussenabstand sonst auf 0 und er klebt oben links. */
.bs-dialog {
  position: fixed;
  inset: 0;
  height: fit-content;
  margin: auto;
  width: min(92vw, 440px);
  padding: 16px;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--gold-dim);
}
.bs-dialog::backdrop {
  background: rgba(8, 10, 7, 0.78);
}
.bs-dialog h2 {
  margin: 0 0 8px;
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 20px;
  line-height: 1.2;
}
.bs-dialog p {
  margin: 0 0 16px;
  font-family: Oswald, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-sek, #b9bdac);
}
.bs-dialog-knoepfe {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bs-dialog-knoepfe .btn {
  width: 100%;
  margin: 0;
}

/* Leiste in PLAN: steht zusammen mit der Sprungleiste im Kopf. Am Handy
   ist der Kopf ein normaler Block (display: contents, die Sprungleiste
   klebt wie gewohnt allein), am Rechner laeuft der ganze Kopf mit, damit
   man auch auf Training und Supplements weiter unten ziehen kann. */
.coach-plan-oben { display: contents; }
.bs-leiste {
  padding: 8px 0;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.bs-leiste-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin-bottom: 8px;
}
.bs-leiste-titel {
  font-family: Oswald, sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--gold-text, var(--gold));
}
.bs-leiste-kopf small {
  flex: 1;
  min-width: 160px;
  font-family: Oswald, sans-serif;
  font-size: 13px;
  color: var(--text-dim);
}
.bs-leiste-kopf .btn {
  flex: none;
  width: auto;
  margin: 0;
}
.bs-leiste-liste {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.bs-leiste-liste::-webkit-scrollbar { display: none; }
.bs-leiste-gruppe {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: none;
  scroll-snap-align: start;
}
.bs-leiste-gruppe h3 {
  margin: 0;
  font-family: Oswald, sans-serif;
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.bs-leiste-gruppe > .bs-stein + .bs-stein { margin-top: 4px; }
.bs-stein {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 280px;
  min-height: 56px;
  padding: 6px 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  cursor: grab;
}
.bs-stein:active { cursor: grabbing; }
.bs-stein:hover { border-color: var(--gold-dim); }
.bs-griff {
  flex: none;
  font-size: 16px;
  color: var(--text-dim);
}
.bs-stein-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.bs-stein-text strong {
  overflow: hidden;
  font-family: Oswald, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bs-stein .btn {
  flex: none;
  width: auto;
  margin: 0;
}
@media (min-width: 900px) {
  .coach-plan-oben {
    position: sticky;
    top: 0;
    z-index: 5;
    display: block;
    background: var(--ink-flaeche, var(--ink));
  }
  .coach-plan-oben > .coach-plan-sprung {
    position: static;
    margin-bottom: 0;
  }
  /* Gruppen nebeneinander, Steine einer Gruppe auch - eine Zeile Hoehe. */
  .bs-leiste-gruppe { flex-direction: row; flex-wrap: nowrap; align-items: flex-end; }
  .bs-leiste-gruppe h3 {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    align-self: stretch;
    text-align: center;
  }
  .bs-leiste-gruppe > .bs-stein + .bs-stein { margin-top: 0; }
}

/* Waehrend des Ziehens: der passende Abschnitt ist gestrichelt markiert,
   ueber dem Plan wird er gold. */
.coach-plan[data-bs-zieht="training"] #plan-training,
.coach-plan[data-bs-zieht="ernaehrung"] #plan-essen,
.coach-plan[data-bs-zieht="supplements"] #plan-supplements {
  outline: 1px dashed var(--gold-dim);
  outline-offset: 4px;
}
.coach-plan .bs-drueber {
  outline: 2px solid var(--gold) !important;
  background: rgba(195, 162, 62, 0.06);
}


/* ─── Einladungen (18.09.2026) ───────────────────────────────────────────
   Coach: Klient anlegen, Link kopieren. Klient: Einladungsseite und
   Willkommen. Dialoge nutzen die Grundform von .bs-dialog. */
.ein-marke {
  display: inline-block;
  padding: 2px 8px;
  font-family: Oswald, sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: var(--gold-text, var(--gold));
  border: 1px solid var(--gold-dim);
  background: rgba(195, 162, 62, 0.08);
}
.ein-marke.gelb {
  color: var(--gold-text, #d8bd6a);
  border-color: #8a7433;
}
.ein-dialog {
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}
.ein-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ein-form .coach-inp {
  width: 100%;
  font-family: Oswald, sans-serif;
  font-size: 15px;
  text-align: left;
}
.ein-form .check-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-family: Oswald, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: var(--c-sek, #b9bdac);
}
.ein-form .check-row input {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
}
.ein-link {
  width: 100%;
  margin-bottom: 16px;
  font-family: "Share Tech Mono", monospace;
  font-size: 12px;
}
.ein-schritte {
  display: grid;
  gap: 8px;
  margin: 16px 0;
  padding: 0;
  list-style: none;
  counter-reset: schritt;
}
.ein-schritte li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 0 12px;
  padding: 12px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  counter-increment: schritt;
}
.ein-schritte li::before {
  content: counter(schritt, decimal-leading-zero);
  grid-row: 1 / 3;
  font-family: "Share Tech Mono", monospace;
  font-size: 13px;
  color: var(--gold-text, var(--gold));
}
.ein-schritte strong {
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: var(--text);
}
.ein-schritte span {
  font-family: Oswald, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: var(--c-sek, #b9bdac);
}
.ein-seite .onboarding-consent span {
  font-size: 13px;
  line-height: 1.45;
}
.ein-seite select.inp {
  width: 100%;
}
.coach-eintrag .ein-marke {
  white-space: nowrap;
}
.coach-eintrag .wer .ein-marke {
  margin-top: 4px;
  white-space: normal;
}
/* Saetze in normaler Schreibweise (DESIGN-PROMPT Regel 4) - die
   Anmeldeseiten setzen .panel-sub sonst in Versalien. */
.ein-seite .panel-sub {
  font-family: Oswald, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: none;
  color: var(--c-sek, #b9bdac);
}

/* Profilbild in der Mitgliederakte: zeigt dem Coach, ob jemand eins hat. */
.adm-kopf-text h1 {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.adm-avatar {
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid #434932;
  border-radius: 50%;
  object-fit: cover;
  background: var(--s-0, #080a07);
}
.adm-avatar.leer {
  display: grid;
  place-items: center;
  font: 600 14px/1 Oswald, sans-serif;
  letter-spacing: .04em;
  color: #7c8050;
}

/* ONBOARDING & ZIELE in der Mitgliederakte: Begriff und Antwort als Paare.
   Die Liste hatte bisher gar keine Gestaltung und lief als Blocktext. */
.onboarding-admin {
  display: grid;
  gap: 12px;
  margin: 0;
}
.onboarding-admin > div {
  display: grid;
  gap: 2px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.onboarding-admin > div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.onboarding-admin dt {
  font: 600 11px/1.2 Oswald, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-text, #c3a23e);
}
.onboarding-admin dd {
  margin: 0;
  font: 400 14px/1.45 Oswald, sans-serif;
  color: var(--c-prim, #d8d6c8);
  overflow-wrap: anywhere;
}

/* Altprofil-Zuordnungen: Hinweis zur Adresse und Warnung bei vergebenem Profil. */
.zuordnung-mail {
  margin-top: 4px;
  font: 400 13px/1.45 Oswald, sans-serif;
  color: var(--c-sek, #b9bdac);
}
.zuordnung-warnung {
  margin-top: 6px;
  padding: 8px 10px;
  border: 1px solid #7a2f2f;
  background: var(--s-0, #1b0e0e);
  font: 400 13px/1.45 Oswald, sans-serif;
  color: var(--c-rot, #e5b4b4);
}

/* Prüfmaschine: bestehende Trackings als schnelle Arbeitsliste. */
.review-board {
  border: 1px solid var(--line);
  padding: 28px;
  background: linear-gradient(135deg, #12180f, #0d100c);
}
.review-summary { display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0; }
.review-summary span { border: 1px solid var(--line); padding: 10px 13px; color: var(--muted); font-size: 12px; }
.review-summary b { color: var(--gold-text, var(--gold)); font-family: Impact, sans-serif; font-size: 19px; margin-right: 5px; }
.pruefen-entry { align-items: center; }
.pruefen-status { display: inline-block; margin-top: 8px; border: 1px solid var(--gold); color: var(--gold-text, var(--gold)); padding: 3px 6px; font-size: 10px; letter-spacing: .08em; }
@media (max-width: 680px) { .review-board { padding: 18px; } .review-summary span { flex: 1 1 100%; } }
/* Postfach */
.postfach-type-badge { display: inline-block; padding: 2px 7px; font-size: 10px; letter-spacing: .08em; border: 1px solid var(--line); color: var(--muted); margin-bottom: 5px; }
.postfach-type-badge.type-anfrage { border-color: var(--gold); color: var(--gold-text, var(--gold)); }
.postfach-type-badge.type-freischaltung { border-color: #5b9cf6; color: var(--c-blau, #5b9cf6); }
.postfach-type-badge.type-datenschutz { border-color: #e05a2b; color: #e05a2b; }
.postfach-age { display: block; margin-top: 4px; color: var(--muted); }
.postfach-age.dringlich { color: #e05a2b; }
.postfach-details { color: var(--muted); font-size: 13px; margin-top: 3px; }
.postfach-grund { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.postfach-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* ── Challenges: Mitgliederkarten im Tracking und Admin-Verwaltung ── */
.challenge-liste { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.challenge-karte.geschafft { border-color: var(--gold); }
.challenge-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.challenge-kopf strong { font: 15px Gunplay, sans-serif; color: var(--text); }
.challenge-text { margin: 4px 0 0; font: 13px/1.4 Oswald, sans-serif; color: var(--c-sek, #b9bdac); }
.challenge-karte .streak-fortschritt { margin: 12px 0 8px; }
.challenge-fuss { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.challenge-fuss small { color: var(--c-sek, #9aa08a); font: 10px "Share Tech Mono", monospace; letter-spacing: .05em; }

.adm-challenge-form { display: grid; gap: 8px; }
.adm-challenge-form .field-row { display: flex; gap: 8px; flex-wrap: wrap; }
.adm-challenge-form .field-row .field { flex: 1 1 160px; }
.adm-challenge-vorlagen { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.adm-challenge-liste .challenge-kopf { align-items: center; }
.adm-challenge-status { padding: 3px 8px; border: 1px solid var(--line); color: var(--muted); font: 9px "Share Tech Mono", monospace; letter-spacing: .08em; white-space: nowrap; }
.adm-challenge-status.laeuft { color: var(--gold-text, var(--gold)); border-color: var(--gold); }

.konto-status {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  align-items: center;
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 2px solid var(--line);
  background: rgba(0, 0, 0, .22);
}
.konto-status span,
.konto-status small {
  color: var(--muted);
  font: 11px "Share Tech Mono", monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.konto-status strong {
  grid-row: 1 / span 2;
  grid-column: 2;
  font-size: clamp(18px, 2vw, 26px);
  letter-spacing: .06em;
}
.konto-status small { letter-spacing: .03em; text-transform: none; }
.konto-status.aktiv { border-color: #71803f; }
.konto-status.aktiv strong { color: var(--c-gruen, #c9d68d); }
.konto-status.gesperrt { border-color: #b85043; }
.konto-status.gesperrt strong { color: var(--c-rot, #ef9284); }

@media (max-width: 620px) {
  .konto-status { grid-template-columns: 1fr; }
  .konto-status strong { grid-row: auto; grid-column: auto; }
}
.adm-challenge-teilnehmer { margin-top: 8px; color: var(--c-sek, #9aa08a); font: 10px "Share Tech Mono", monospace; }
.challenge-wiederholen-feld { display: flex; align-items: center; gap: 8px; min-height: 44px; color: var(--text); font: 12px Oswald, sans-serif; }
.challenge-wiederholen-feld input { width: 20px; height: 20px; }
@media (max-width: 680px) { .adm-challenge-form .field-row .field { flex: 1 1 100%; } }
.shop-bereich { max-width: 560px; }
.shop-grid { display: flex; flex-direction: column; gap: 20px; }
.shop-karte { border-radius: 6px; border: 1px solid #3a3e28; background: var(--s-0, #0d0f0a); }
.shop-karte:hover { border-color: var(--gold-dim); }
.shop-bild { aspect-ratio: 3/4; object-fit: cover; background-color: var(--s-0, #0d0f0a); }
.shop-info { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.shop-name { font-family: "Gunplay", "Share Tech Mono", monospace; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); line-height: 1.3; }
.shop-preiszeile { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.shop-preis { font-family: "Share Tech Mono", monospace; font-size: 17px; color: var(--gold-text, var(--gold)); font-weight: 700; }
.shop-vergleich { font-family: "Share Tech Mono", monospace; font-size: 13px; color: #666; text-decoration: line-through; }
.shop-sale { background: #c0392b; color: #fff; font-family: "Share Tech Mono", monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; padding: 2px 6px; border-radius: 3px; }
.shop-beschreibung { font-family: "Share Tech Mono", monospace; font-size: 10px; color: #777; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0; }
.shop-btn { margin-top: 6px; font-family: "Share Tech Mono", monospace; font-size: 10px; letter-spacing: 0.1em; color: var(--gold-text, var(--gold)); border: 1px solid var(--gold-dim); padding: 9px 0; text-align: center; white-space: nowrap; }

/* ─── Lift der Woche: Community-Voting ────────────────────────────────── */
.lw-sieger, .lw-admin { max-width: 760px; margin: 0 auto 16px; padding: 16px; }
.lw-sieger-name { margin: 4px 0 8px; font: 20px "Gunplay", sans-serif; color: var(--gold-text, var(--gold)); }
.lw-sieger p { margin: 0 0 8px; font-size: 14px; color: var(--c-prim, #d8d9d0); }
.lw-admin-lift { padding: 12px 0; border-top: 1px solid var(--line); }
.lw-admin-lift > div:first-child { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.negative { font-family: "Share Tech Mono", monospace; color: var(--c-rot, #e0897b); }
/* Links im Voting: gleiche Optik wie die uebrigen App-Links (Gold, ohne Unterstreichung). */
.history-main a, .lw-sieger a, .lw-admin a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--gold-text, var(--gold)); text-decoration: none;
  font: 11px "Share Tech Mono", monospace; letter-spacing: 0.12em;
}
.history-main a:hover, .lw-sieger a:hover { color: var(--gold-text, #efd273); }
.lw-admin .button { width: 100%; margin-top: 8px; }
.lw-liste { margin-top: 12px; border-top: 1px solid var(--line); }
.lw-liste summary { min-height: 44px; display: flex; align-items: center; color: var(--c-sek, #b9bdac); font-size: 14px; cursor: pointer; }
.lw-liste ul { list-style: none; margin: 0; padding: 0; }
.lw-liste li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); }
.lw-liste li span { min-width: 0; overflow-wrap: anywhere; }
.lw-liste li .button { width: auto; margin: 0; }
/* Pop-up: schmale Handys (375 px) - nichts laeuft ueber, Inhalt scrollt. */
.lift-fenster-innen { overflow-x: hidden; }
.lift-fenster-innen .lift-post { max-width: 100%; height: min(440px, 52dvh); }

.lw-cta { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 72px; margin: 0 0 18px; padding: 12px 16px; color: #14110a; text-align: left; cursor: pointer; background: linear-gradient(180deg, #f4c542, #c9961a); border: 2px solid #ffe08a; box-shadow: 0 0 0 1px #000, 0 6px 22px rgba(244, 197, 66, 0.35); }
.lw-cta:not(.offen) { color: var(--gold-text, var(--gold)); background: var(--s-1, #15170f); border-color: var(--gold-dim); box-shadow: none; }
.lw-cta.offen { animation: lw-puls 1.8s ease-in-out infinite; }
.lw-cta-icon { font-size: 30px; line-height: 1; }
.lw-cta-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.lw-cta-text strong { font-size: 17px; letter-spacing: 0.06em; }
.lw-cta-text small { font-size: 12px; opacity: 0.85; }
.lw-cta-pfeil { font-size: 26px; font-weight: 700; }
@keyframes lw-puls { 0%, 100% { box-shadow: 0 0 0 1px #000, 0 6px 22px rgba(244, 197, 66, 0.3); } 50% { box-shadow: 0 0 0 1px #000, 0 6px 30px rgba(244, 197, 66, 0.7); } }
@media (prefers-reduced-motion: reduce) { .lw-cta.offen { animation: none; } }
/* Lift-der-Woche-Pop-up (Design "Lift Popup"): alles auf einer Seite, ohne
   Scrollen. Die Instagram-Vorschau schrumpft zuerst (min. 100 px). */
@keyframes dfqPop { 0% { transform: translateY(40px) scale(.92); opacity: 0; } 60% { transform: translateY(-6px) scale(1.02); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes dfqGlow { 0%, 100% { box-shadow: 0 0 0 1px #f2a900, 0 0 18px 2px rgba(242, 169, 0, .45); } 50% { box-shadow: 0 0 0 1px #f2a900, 0 0 34px 8px rgba(242, 169, 0, .8); } }
@keyframes dfqBoom { 0% { transform: scale(0); opacity: 0; } 55% { transform: scale(1.3); opacity: 1; } 75% { transform: scale(.92); } 100% { transform: scale(1); opacity: 1; } }
@keyframes dfqRays { 0% { transform: translate(-50%, -50%) rotate(0); } 100% { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes dfqBlink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.lift-fenster .lift-fenster-innen.lw-popup {
  display: flex; flex-direction: column; gap: 10px; box-sizing: border-box;
  width: calc(100% - 24px); max-width: 460px;
  height: calc(100dvh - 46px - env(safe-area-inset-bottom)); max-height: 820px;
  margin: 0 0 calc(12px + env(safe-area-inset-bottom));
  padding: 12px; overflow: hidden;
  background: var(--s-0, #070905); border: 2px solid #f2a900; color: var(--c-prim, #efeee6); font-family: Oswald, sans-serif;
  transform: none; opacity: 1; transition: none;
  animation: dfqPop .6s ease-out both, dfqGlow 2s ease-in-out .6s infinite;
}
.lw-popup button, .lw-popup a { font-family: Oswald, sans-serif; }
.lw-kopf { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: #f2a900; color: #000; }
.lw-hantel { font-size: 26px; line-height: 1; animation: dfqBlink 1.2s infinite; }
.lw-fertig .lw-hantel { animation: none; }
.lw-kopf-text { flex: 1; min-width: 0; }
.lw-kopf-text h2 { margin: 0; font: 400 20px/1.05 "Black Ops One", Oswald, sans-serif; letter-spacing: .04em; color: #000; white-space: nowrap; }
.lw-kopf-text small { display: block; margin-top: 2px; font: 400 11px "Share Tech Mono", monospace; letter-spacing: .08em; color: #000; }
.lw-zu { flex: none; width: 36px; height: 36px; min-height: 36px; display: flex; align-items: center; justify-content: center; padding: 0; background: var(--s-0, #000); color: var(--gold-text, #f2a900); border: 0; font-size: 20px; cursor: pointer; }
.lw-balken { flex: none; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; }
.lw-balken i { height: 6px; background: var(--s-3, #2b3025); }
.lw-balken i.on { background: #f2a900; }
.lw-name { flex: none; display: flex; align-items: center; gap: 8px; }
.lw-name strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 22px Oswald, sans-serif; }
.lw-name span { flex: none; font: 400 12px "Share Tech Mono", monospace; color: var(--c-sek, #b9bdac); letter-spacing: .08em; }
.lw-neuladen { flex: none; margin: 0 0 0 auto; min-height: 32px; padding: 0 6px; background: none; border: 0; color: var(--c-sek, #b9bdac); font-size: 11px; letter-spacing: .08em; cursor: pointer; }
.lw-video { position: relative; flex: 1 1 0; min-height: 100px; background: var(--s-1, #1a1c16); border: 1px solid var(--b-1, #2b3025); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.lw-video .lift-post { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; border: 0; }
.lw-video-leer { font: 400 11px "Share Tech Mono", monospace; color: var(--c-sek, #b9bdac); letter-spacing: .1em; }
.lw-insta { flex: none; height: 46px; display: flex; align-items: center; justify-content: center; gap: 8px; background: #545a2c; color: var(--c-prim, #efeee6); border: 1px solid #f2a900; font-size: 15px; font-weight: 600; letter-spacing: .08em; text-decoration: none; cursor: pointer; }
.lw-insta:hover { background: #7c8050; }
.lw-bewerten { flex: none; text-align: center; color: var(--gold-text, #f2a900); font: 500 17px Oswald, sans-serif; letter-spacing: .04em; }
.lw-status { flex: none; min-height: 27px; margin-top: -6px; text-align: center; color: var(--c-sek, #b9bdac); font: 400 10px/1.35 "Share Tech Mono", monospace; }
.lw-status.err { color: var(--c-rot, #e0897b); }
.lw-status.ok { color: var(--gold-text, #f2a900); }
.lw-raenge { flex: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.lw-rang { height: 66px; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; background: var(--s-0, #0c0e09); border: 1px solid var(--b-1, #2b3025); opacity: .6; }
.lw-rang img { width: 100%; height: auto; max-height: 100%; object-fit: contain; display: block; }
.lw-rang:hover { opacity: 1; border-color: #f2a900; }
.lw-rang.on { opacity: 1; background: rgba(242, 169, 0, .18); border: 2px solid #f2a900; box-shadow: 0 0 14px rgba(242, 169, 0, .6); }
.lw-rang:disabled { cursor: default; }
.lw-nav { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lw-zurueck, .lw-weiter { height: 46px; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0; font-size: 15px; letter-spacing: .08em; cursor: pointer; }
.lw-zurueck { background: transparent; color: var(--c-prim, #efeee6); border: 1px solid #545a2c; font-weight: 600; }
.lw-weiter { background: #f2a900; color: #000; border: 1px solid #f2a900; font-weight: 700; }
.lw-nav button:disabled { opacity: .4; cursor: default; }
/* Fertig-Bildschirm */
.lw-fertig { align-items: center; gap: 14px; }
.lw-fertig .lw-kopf, .lw-fertig .lw-balken { align-self: stretch; }
.lw-boom { margin-top: 18px; text-align: center; color: var(--gold-text, #f2a900); font: 400 36px/1.05 "Black Ops One", Oswald, sans-serif; letter-spacing: .03em; animation: dfqBoom .6s ease-out .3s both; }
.lw-buehne { position: relative; width: 100%; flex: 1 1 0; min-height: 0; display: flex; align-items: center; justify-content: center; }
.lw-strahlen { position: absolute; left: 50%; top: 50%; width: 320px; height: 320px; border-radius: 50%; background: repeating-conic-gradient(rgba(242, 169, 0, .28) 0 8deg, transparent 8deg 24deg); -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 70%); mask-image: radial-gradient(circle, #000 20%, transparent 70%); animation: dfqRays 14s linear infinite; }
.lw-siegel { position: relative; width: 190px; max-width: 60%; max-height: 100%; height: auto; object-fit: contain; display: block; animation: dfqBoom .8s ease-out .6s both; }
.lw-danke { font: 500 18px Oswald, sans-serif; letter-spacing: .08em; animation: dfqBoom .5s ease-out 1s both; }
.lw-testhinweis { margin: 0; text-align: center; color: var(--c-sek, #b9bdac); font: 400 10px/1.35 "Share Tech Mono", monospace; }
.lw-weiter-tracken { align-self: stretch; flex: none; height: 56px; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0; background: #f2a900; color: #000; border: 1px solid #f2a900; font-size: 18px; font-weight: 700; letter-spacing: .1em; cursor: pointer; }
.lw-weiter-tracken:hover { background: #ffc233; }
@media (max-height: 700px) { .lw-boom { margin-top: 0; font-size: 30px; } .lw-fertig { gap: 10px; } }
@media (prefers-reduced-motion: reduce) {
  .lift-fenster .lift-fenster-innen.lw-popup, .lw-hantel, .lw-boom, .lw-strahlen, .lw-siegel, .lw-danke { animation: none; }
  .lift-fenster .lift-fenster-innen.lw-popup { box-shadow: 0 0 0 1px #f2a900, 0 0 18px 2px rgba(242, 169, 0, .45); }
  .lw-strahlen { transform: translate(-50%, -50%); }
}

/* Community-History: Teilen, Melden */
.history-sozial {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.history-akt {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.history-akt.on { color: var(--gold-text, #efd273); border-color: #efd273; }
.history-akt:disabled { cursor: default; opacity: 0.8; }
#history-ansicht { margin: 8px 0 12px; }
article.history { flex-wrap: wrap; }
.history-sozial, article.history .history-photo-slot { flex: 1 1 100%; }

/* Beitrag melden (Member) */
.mel-gruende { display: grid; gap: 8px; margin: 0 0 14px; }
.mel-grund { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 12px; border: 1px solid var(--line); background: var(--s-0, #0c0e09); cursor: pointer; }
.mel-grund input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: #f2a900; }
.mel-grund span { min-width: 0; overflow-wrap: anywhere; }
.mel-grund:has(input:checked) { border-color: #f2a900; background: rgba(242, 169, 0, 0.14); }
.mel-notiz { width: 100%; box-sizing: border-box; resize: vertical; min-height: 76px; }
.mel-zaehler { display: block; text-align: right; opacity: 0.7; margin-top: 2px; }
.lift-status.ok { color: var(--gold-text, #f2a900); }

/* Pop-up "MEMBER GEMELDET" fuer Brandon/Admins: goldener Stil wie das Lift-Pop-up, Inhalt scrollt */
.lift-fenster .lift-fenster-innen.mm-popup {
  display: flex; flex-direction: column; gap: 10px; box-sizing: border-box;
  width: calc(100% - 24px); max-width: 460px; max-height: calc(100dvh - 46px - env(safe-area-inset-bottom));
  margin: 0 0 calc(12px + env(safe-area-inset-bottom));
  padding: 12px; overflow-x: hidden; overflow-y: auto;
  background: var(--s-0, #070905); border: 2px solid #f2a900; color: var(--c-prim, #efeee6); font-family: Oswald, sans-serif;
  transform: none; opacity: 1; transition: none;
  animation: dfqPop .6s ease-out both, dfqGlow 2s ease-in-out .6s infinite;
}
.mm-popup button, .mm-popup a { font-family: Oswald, sans-serif; }
.mm-karte { display: grid; gap: 6px; padding: 10px; background: var(--s-0, #0c0e09); border: 1px solid var(--b-1, #2b3025); overflow-wrap: anywhere; }
.mm-karte strong { font: 600 18px/1.25 Oswald, sans-serif; }
.mm-karte p { margin: 0; }
.mm-grund { color: var(--gold-text, #f2a900); font-weight: 600; letter-spacing: .04em; }
.mm-notiz { font-style: italic; color: var(--c-prim, #d6d9c8); }
.mm-karte small { font: 400 11px "Share Tech Mono", monospace; color: var(--c-sek, #b9bdac); letter-spacing: .06em; }
.mm-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.mm-knoepfe .lw-insta, .mm-knoepfe .lw-weiter { height: 46px; min-width: 0; font-size: 14px; }
.mm-knoepfe .lw-weiter { cursor: pointer; }
.mm-knoepfe .lw-weiter:disabled { opacity: .4; cursor: default; }
.mm-knoepfe .lw-insta.leer { opacity: .4; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .lift-fenster .lift-fenster-innen.mm-popup { animation: none; box-shadow: 0 0 0 1px #f2a900, 0 0 18px 2px rgba(242, 169, 0, .45); }
}

/* Meldungs-Pop-up: Einbettung, Aktionen unten fest */
.mm-video { position: relative; flex: none; height: min(380px, 38dvh); min-height: 160px; background: var(--s-1, #1a1c16); border: 1px solid var(--b-1, #2b3025); overflow: hidden; }
.mm-video .lift-post { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; border: 0; }
.mm-foto { flex: none; background: var(--s-1, #1a1c16); border: 1px solid var(--b-1, #2b3025); }
.mm-foto img { display: block; width: 100%; max-height: min(380px, 42dvh); object-fit: contain; background: var(--s-0, #000); }
.mm-links { flex: none; display: flex; align-items: center; gap: 8px; }
.mm-links .lw-insta { flex: 1; min-width: 0; height: 40px; font-size: 13px; }
.mm-links .lw-neuladen { margin: 0; }
.mm-fuss { position: sticky; bottom: -12px; z-index: 2; flex: none; margin: 0 -12px -12px; padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); background: var(--s-0, #070905); border-top: 1px solid #f2a900; }
.mm-fuss .mm-knoepfe { margin-top: 0; }
.mm-abziehen, .mm-zurueck { height: 46px; min-width: 0; padding: 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .06em; cursor: pointer; }
.mm-abziehen { background: #8f2418; color: #fff; border: 1px solid #d9776b; }
.mm-abziehen:disabled { opacity: .45; cursor: default; background: var(--s-3, #2b3025); border-color: #545a2c; color: var(--c-sek, #b9bdac); }
.mm-zurueck { background: transparent; color: var(--c-prim, #efeee6); border: 1px solid #545a2c; }
.mm-coins { color: var(--c-rot, #e0897b); }
.mm-fuss .mel-notiz { background: var(--s-0, #0c0e09); color: var(--c-prim, #efeee6); }
.mm-fuss .lift-status { margin: 0 0 6px; min-height: 0; }
.mm-fuss .lift-label { display: block; font-size: 11px; }

/* ======================================================================
   Projekte (Kanban) – alle Klassen mit Praefix .pm-
   Mobil zuerst (375 px): 16 px Rand, Tippziele mindestens 44 px, Spalten
   scrollen waagerecht. Farben nur ueber Klassen (CSP: kein style="...").
   ====================================================================== */
.pm-c-gray { --pm-farbe: #8b8f7e; --pm-text: #11140e; }
.pm-c-blue { --pm-farbe: #5b8fd6; --pm-text: #08101c; }
.pm-c-amber { --pm-farbe: #d9a441; --pm-text: #1c1204; }
.pm-c-purple { --pm-farbe: #9b7bd1; --pm-text: #120a1f; }
.pm-c-green { --pm-farbe: #6aa75d; --pm-text: #08130a; }
.pm-c-red { --pm-farbe: #d4604f; --pm-text: #1f0805; }
.pm-c-teal { --pm-farbe: #4fb3a9; --pm-text: #04151a; }
.pm-c-pink { --pm-farbe: #d474a8; --pm-text: #1f0615; }

.pm-wurzel { min-width: 0; padding: 16px 16px 32px; border-radius: 10px; }
.pm-kopf-platz .adm-kopf { margin-bottom: 12px; }

/* Knoepfe */
.pm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px;
  margin: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font-family: Oswald, sans-serif;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pm-btn:hover { border-color: var(--olive-lit); }
.pm-btn:focus-visible,
.pm-karte:focus-visible,
.pm-tab:focus-visible,
.pm-add:focus-visible,
.pm-karte-menue:focus-visible,
.pm-spalte-menue:focus-visible,
.pm-farbe:focus-visible,
.pm-menue-punkt:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.pm-btn[disabled] { opacity: 0.5; cursor: default; }
.pm-btn.pm-klein { min-height: 44px; padding: 6px 12px; font-size: 13px; }
.pm-btn.pm-primaer, .pm-btn.pm-an { background: var(--olive); border-color: var(--olive-lit); color: #fff; }
.pm-btn.pm-ghost { background: transparent; color: var(--pm-gedaempft); }
.pm-btn.pm-gefahr { background: transparent; color: var(--pm-rot); border-color: #c0594a; }
.pm-btn.pm-voll { width: 100%; }

/* Eingabefelder */
.pm-inp {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font-family: Oswald, sans-serif;
  font-size: 16px; /* 16 px verhindert das Heranzoomen auf dem iPhone */
  box-sizing: border-box;
}
textarea.pm-inp { min-height: 96px; resize: vertical; line-height: 1.4; }
.pm-inp:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.pm-feld { display: block; margin: 0 0 12px; min-width: 0; }
.pm-label-text {
  display: block;
  margin: 0 0 4px;
  font-family: "Share Tech Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.pm-haken { display: flex; align-items: center; gap: 12px; min-height: 44px; font-family: Oswald, sans-serif; font-size: 15px; color: var(--text); }
.pm-haken input { width: 24px; height: 24px; flex: none; accent-color: var(--olive-lit); }
.pm-hilfe { margin: 0 0 12px; font-family: Oswald, sans-serif; font-size: 14px; line-height: 1.45; color: var(--pm-gedaempft); }
.pm-dialog-fehler { min-height: 0; margin: 0 0 8px; font-family: Oswald, sans-serif; font-size: 14px; color: var(--pm-rot); }
.pm-dialog-fehler:empty { display: none; }
.pm-reihe { display: flex; flex-wrap: wrap; gap: 8px; }

/* Reiter */
.pm-tabs {
  display: flex;
  gap: 8px;
  margin: 0 0 12px;
  padding: 0 0 4px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.pm-tabs::-webkit-scrollbar { display: none; }
.pm-tab {
  flex: none;
  scroll-snap-align: start;
  min-height: 44px;
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--pm-gedaempft);
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
.pm-tab.on { background: var(--olive); border-color: var(--olive-lit); color: #fff; }

/* Hinweis- und Fehlerband */
.pm-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 12px;
  padding: 12px;
  background: #fdecea;
  border: 1px solid #c0594a;
  border-radius: 6px;
  color: #6b1a10;
  font-family: Oswald, sans-serif;
  font-size: 14px;
}
.pm-banner-text { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }

.pm-leer { padding: 24px 16px; text-align: center; font-family: Oswald, sans-serif; font-size: 15px; line-height: 1.45; text-transform: none; letter-spacing: normal; color: var(--pm-gedaempft); }
.pm-leer p { margin: 0 0 12px; }

/* Board */
.pm-boardname { margin: 4px 0 8px; font-family: "Gunplay", "Black Ops One", sans-serif; font-size: 20px; font-weight: 400; color: var(--text); }
.pm-boardname small { font-family: Oswald, sans-serif; font-size: 13px; color: var(--text-dim); }
.pm-nur-lesen { margin: 0 0 8px; font-family: Oswald, sans-serif; font-size: 14px; color: var(--pm-gedaempft); }
.pm-boardwahl { display: block; max-width: 320px; margin: 0 0 12px; }
.pm-board {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 -16px;
  padding: 4px 16px 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 16px;
  scrollbar-width: thin;
}
.pm-spalte {
  flex: 0 0 min(84vw, 300px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-height: 78vh;
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 4px solid var(--pm-farbe, var(--line));
  border-radius: 8px;
}
.pm-spalte-neu { background: transparent; border-style: dashed; border-top-width: 1px; padding: 8px; align-self: flex-start; }
.pm-spalte-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 8px 8px 12px;
  min-height: 48px;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.pm-spalte-kopf[data-spaltenkopf] { cursor: grab; }
.pm-spalte-titel { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.pm-spalte-titel h3 { margin: 0; font-family: "Gunplay", "Black Ops One", sans-serif; font-size: 15px; font-weight: 400; color: var(--text); overflow-wrap: anywhere; }
.pm-spalte-zahlen { display: flex; align-items: center; gap: 4px; flex: none; }
.pm-zaehler {
  min-width: 24px;
  padding: 2px 8px;
  border-radius: 12px;
  background: #e1e5da;
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  text-align: center;
  color: var(--pm-gedaempft);
}
.pm-wip { padding: 2px 8px; border-radius: 12px; border: 1px solid var(--line); font-family: "Share Tech Mono", monospace; font-size: 11px; color: var(--pm-gedaempft); }
.pm-wip.pm-wip-zuviel { background: #fde4e0; border-color: #c0392b; color: var(--pm-rot); font-weight: 700; }
.pm-erledigt-marke { padding: 1px 6px; border: 1px solid #6a9a5f; border-radius: 4px; font-family: "Share Tech Mono", monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: #1f6a1a; }
.pm-spalte-menue, .pm-karte-menue {
  min-width: 44px;
  min-height: 44px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--pm-gedaempft);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.pm-karten {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 48px;
  padding: 4px 8px 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.pm-spalte-leer { margin: 0; padding: 12px 4px; text-align: center; font-family: Oswald, sans-serif; font-size: 13px; color: var(--text-dim); }
.pm-add {
  min-height: 44px;
  margin: 0 8px 8px;
  padding: 8px 12px;
  background: transparent;
  border: 1px dashed var(--line);
  border-radius: 6px;
  color: var(--pm-gedaempft);
  font-family: Oswald, sans-serif;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.pm-add:hover { border-color: var(--olive-lit); color: var(--text); }
.pm-add-form { display: grid; gap: 8px; padding: 0 8px 8px; }
.pm-add-tasten { display: flex; gap: 8px; }

/* Karten */
.pm-karte {
  display: block;
  position: relative;
  padding: 8px 12px 12px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.pm-karte:hover { border-color: var(--olive-lit); }
.pm-karte.pm-p-high { border-left-color: #d9a441; }
.pm-karte.pm-p-urgent { border-left-color: #d4604f; }
.pm-karte.pm-p-low { border-left-color: #5b6150; }
.pm-karte.pm-erledigt .pm-titel { color: var(--pm-gedaempft); text-decoration: line-through; text-decoration-color: #62683a; }
.pm-karte-oben { display: flex; align-items: flex-start; justify-content: space-between; gap: 4px; min-height: 8px; margin: 0 -8px 0 0; }
.pm-karte-oben .pm-karte-menue { margin: -8px -4px -8px 0; flex: none; }
.pm-karte-leer { flex: 1; }
.pm-labels { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; padding-top: 4px; }
.pm-label {
  max-width: 100%;
  padding: 1px 8px;
  border-radius: 4px;
  background: var(--pm-farbe);
  color: var(--pm-text, #111);
  font-family: Oswald, sans-serif;
  font-size: 11px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pm-titel { margin: 4px 0 0; font-family: Oswald, sans-serif; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.pm-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 8px; }
.pm-chip {
  display: inline-block;
  padding: 1px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  color: var(--pm-gedaempft);
}
.pm-chip.pm-ueberfaellig { background: #fde4e0; border-color: #c0392b; color: var(--pm-rot); }
.pm-chip.pm-fertig { background: #e3f3e0; border-color: #6a9a5f; color: #1f6a1a; }
.pm-chip.pm-p-urgent { border-color: #c0392b; color: var(--pm-rot); }
.pm-chip.pm-p-high { border-color: #b08a2c; color: #7a5200; }
.pm-zustaendig { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.pm-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--olive);
  color: #fff;
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  flex: none;
}
.pm-avatar.pm-inaktiv { background: transparent; border: 1px dashed #c0594a; color: var(--pm-rot); }
.pm-hinweis-inaktiv { margin-top: 4px; font-family: Oswald, sans-serif; font-size: 12px; color: var(--pm-rot); }

/* Listenansicht */
.pm-liste { display: grid; gap: 16px; }
.pm-gruppen-titel { margin: 0 0 8px; font-family: "Gunplay", "Black Ops One", sans-serif; font-size: 20px; font-weight: 400; color: var(--text); }
.pm-unter { margin: 0 0 12px; padding-left: 12px; border-left: 4px solid var(--pm-farbe, var(--line)); }
.pm-unter-titel { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-family: "Gunplay", "Black Ops One", sans-serif; font-size: 15px; font-weight: 400; color: var(--text); }
.pm-listenkarten { display: grid; gap: 8px; }
@media (min-width: 720px) { .pm-listenkarten { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } }

/* Team verwalten */
.pm-team { display: grid; gap: 16px; max-width: 720px; }
.pm-karte-form { padding: 16px; }
.pm-abschnitt { margin: 0 0 8px; font-family: "Gunplay", "Black Ops One", sans-serif; font-size: 20px; font-weight: 400; color: var(--text); }
.pm-staffliste { margin: 0; padding: 0; list-style: none; }
.pm-staffzeile { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.pm-staffzeile.pm-aus { opacity: 0.7; }
.pm-staffname { flex: 1; min-width: 0; }
.pm-staffname strong { display: block; font-family: Oswald, sans-serif; font-size: 15px; font-weight: 500; color: var(--text); overflow-wrap: anywhere; }
.pm-staffname small { font-family: Oswald, sans-serif; font-size: 13px; color: var(--pm-gedaempft); overflow-wrap: anywhere; }

/* Dialoge */
.pm-modal-innen { width: min(560px, 100%); }
.pm-modal-titel { overflow-wrap: anywhere; }
.pm-form { margin-top: 12px; }
.pm-modal-fuss { margin-top: 16px; }
.pm-farben { display: flex; flex-wrap: wrap; gap: 8px; }
.pm-farbe {
  width: 44px;
  height: 44px;
  background: var(--pm-farbe);
  border: 3px solid transparent;
  border-radius: 50%;
  cursor: pointer;
}
.pm-farbe.on { border-color: var(--text); }
.pm-menue-text { margin: 0 0 12px; font-family: Oswald, sans-serif; font-size: 14px; color: var(--pm-gedaempft); overflow-wrap: anywhere; }
.pm-menue-liste { display: grid; gap: 8px; margin: 0 0 12px; }
.pm-menue-punkt {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 8px 12px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font-family: Oswald, sans-serif;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}
.pm-menue-punkt.on { border-color: var(--gold-dim); }
.pm-menue-punkt small { margin-left: auto; color: var(--text-dim); }
.pm-punkt { width: 12px; height: 12px; flex: none; border-radius: 50%; background: var(--pm-farbe, var(--line)); }

@media (min-width: 900px) {
  .pm-board { margin: 0; padding-inline: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pm-karte, .pm-btn { transition: none; }
}

/* Ziehen und Ablegen */
.pm-karte.pm-zieht, .pm-spalte.pm-zieht { position: absolute; visibility: hidden; pointer-events: none; }
.pm-geist {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 300;
  margin: 0;
  pointer-events: none;
  opacity: 0.92;
  box-shadow: 0 12px 28px rgba(20, 24, 12, 0.28);
  transform-origin: 0 0;
  max-height: 60vh;
  overflow: hidden;
  cursor: grabbing;
}
.pm-platzhalter {
  flex: none;
  min-height: 24px;
  border: 2px dashed var(--gold-dim);
  border-radius: 8px;
  background: rgba(138, 106, 0, 0.08);
}
.pm-platzhalter-spalte { flex: 0 0 auto; }
.pm-karten:has(.pm-platzhalter) .pm-spalte-leer { display: none; }
body.pm-ziehen-aktiv { user-select: none; -webkit-user-select: none; cursor: grabbing; }

/* Kartendetail */
.pm-detail-modal .adm-modal-innen { width: min(860px, 100%); }
.pm-detail-modal .pm-modal-titel { font-family: "Share Tech Mono", monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
.pm-detail-ort { margin: 0 0 8px; font-family: Oswald, sans-serif; font-size: 13px; color: var(--text-dim); overflow-wrap: anywhere; }
.pm-titel-feld { font-family: "Gunplay", "Black Ops One", sans-serif; font-size: 18px; }
.pm-detail-raster { display: grid; gap: 16px; }
@media (min-width: 760px) { .pm-detail-raster { grid-template-columns: minmax(0, 1fr) 240px; } .pm-detail-seite { order: 2; } }
.pm-box { margin: 0 0 16px; }
.pm-box-titel { margin: 0 0 8px; font-family: "Gunplay", "Black Ops One", sans-serif; font-size: 15px; font-weight: 400; color: var(--text); }
.pm-status { min-height: 20px; margin: 8px 0 0; font-family: Oswald, sans-serif; font-size: 13px; color: #1f6a1a; }
.pm-status.pm-status-fehler { color: var(--pm-rot); }
.pm-checkliste { display: grid; gap: 0; }
.pm-checkliste .pm-haken { margin: 0; }
.pm-label-wahl { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.pm-label-knopf {
  min-height: 44px;
  padding: 4px 12px;
  background: transparent;
  border: 2px solid var(--pm-farbe);
  border-radius: 6px;
  color: var(--text);
  font-family: Oswald, sans-serif;
  font-size: 13px;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.pm-label-knopf.on { background: var(--pm-farbe); color: var(--pm-text, #111); font-weight: 500; }
.pm-label-neu, .pm-neu-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.pm-label-neu .pm-kurz { grid-column: 1; }
.pm-label-neu .pm-btn { grid-column: 2; grid-row: 1 / span 2; }
.pm-inp.pm-kurz { font-size: 14px; }
.pm-fortschritt-zeile { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; }
.pm-fortschritt { flex: 1; height: 8px; accent-color: var(--olive-lit); }
.pm-fortschritt-text { font-family: "Share Tech Mono", monospace; font-size: 11px; color: var(--pm-gedaempft); white-space: nowrap; }
.pm-schritte-liste, .pm-kommentare, .pm-verlauf { margin: 0 0 8px; padding: 0; list-style: none; }
.pm-schritt { padding: 8px 0; border-top: 1px solid var(--line); }
.pm-schritt-titel { overflow-wrap: anywhere; }
.pm-schritt-felder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; margin-left: 48px; }
.pm-schritt-kopf { display: flex; align-items: center; gap: 4px; }
.pm-schritt-kopf .pm-schritt-titel { flex: 1; min-width: 0; margin-bottom: 8px; }
.pm-haken .pm-schritt-feld { flex: 1; width: auto; min-width: 0; height: auto; min-height: 44px; }
.pm-schritt-fertig .pm-schritt-feld, .pm-schritt-fertig .pm-schritt-text { color: var(--pm-gedaempft); text-decoration: line-through; }
.pm-schritt-knoepfe { display: flex; gap: 8px; }
.pm-pfeil { min-width: 44px; padding: 6px; font-size: 18px; }
.pm-griff { flex: none; width: 44px; height: 44px; margin-bottom: 8px; padding: 0; background: transparent; border: 1px solid transparent; border-radius: 6px; color: var(--pm-gedaempft); font-size: 20px; letter-spacing: -2px; line-height: 1; cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; }
.pm-griff:hover, .pm-griff:focus-visible { border-color: var(--olive-lit); color: var(--text); }
.pm-schritt.pm-schritt-zieht { position: absolute; visibility: hidden; pointer-events: none; }
.pm-schritt-geist { padding: 10px 14px; background: #fff; border: 1px solid var(--olive-lit); border-radius: 6px; color: var(--text); font-family: Oswald, sans-serif; font-size: 15px; overflow-wrap: anywhere; }
.pm-schritt-platz { list-style: none; margin: 4px 0; }
@media (max-width: 520px) { .pm-schritt-felder { grid-template-columns: minmax(0, 1fr) auto; } .pm-schritt-felder select { grid-column: 1 / -1; } }
.pm-kommentar { padding: 8px 0; border-top: 1px solid var(--line); }
.pm-kommentar-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pm-kommentar-kopf strong { font-family: Oswald, sans-serif; font-size: 14px; font-weight: 500; color: var(--text); }
.pm-kommentar-kopf small, .pm-verlauf-zeile small { font-family: "Share Tech Mono", monospace; font-size: 10px; color: var(--text-dim); }
.pm-kommentar-text { margin: 4px 0 0; font-family: Oswald, sans-serif; font-size: 15px; line-height: 1.45; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.pm-verlauf-zeile { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-top: 1px solid var(--line); font-family: Oswald, sans-serif; font-size: 14px; line-height: 1.4; color: var(--pm-gedaempft); overflow-wrap: anywhere; }
@media (max-width: 620px) {
  .pm-detail-modal { padding: 0; place-items: stretch; }
  .pm-detail-modal .adm-modal-innen { width: 100%; max-height: 100vh; max-height: 100dvh; height: 100%; padding: 16px; border-left: 0; border-right: 0; }
}

/* Filter */
.pm-filterleiste { margin: 0 0 12px; }
.pm-filter-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pm-filter-chips { display: flex; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
.pm-filter-chip { min-height: 44px; background: #e1e5da; cursor: pointer; font-size: 12px; }
.pm-filter-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 12px; margin: 12px 0 8px; }
.pm-filter-feld { margin: 0; }
.pm-filterleiste .pm-btn .pm-zaehler { margin-left: 4px; }

/* Gespeicherte Ansichten */
.pm-ansichten { max-width: 760px; }
.pm-ansichtenliste { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.pm-ansicht { padding: 16px; }
.pm-ansicht-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pm-ansicht-name { font-family: "Gunplay", "Black Ops One", sans-serif; font-size: 17px; font-weight: 400; color: var(--text); overflow-wrap: anywhere; }
.pm-ansicht-info { margin: 4px 0 8px; }
.pm-ansicht .pm-reihe { margin-top: 12px; }
.pm-ansicht-wahl { width: auto; max-width: 100%; }
.pm-warnung { color: #7a5200; }

/* Archiv und Boards verwalten */
.pm-boardknoepfe { margin: 0 0 12px; }
.pm-archiv { max-width: 760px; }
.pm-archivliste, .pm-boardliste { display: grid; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.pm-archiv-zeile { padding: 12px 16px; }
.pm-archiv-titel { font-family: "Gunplay", "Black Ops One", sans-serif; font-size: 16px; font-weight: 400; color: var(--text); overflow-wrap: anywhere; }
.pm-archiv-info { margin: 4px 0 8px; overflow-wrap: anywhere; }
.pm-boardzeile { display: grid; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); }
.pm-boardzeile.pm-aus { opacity: 0.8; }
.pm-boardzeile .pm-chip { justify-self: start; }

/* ----------------------------------------------------------------------
   Heller Look des Projekte-Reiters. Gilt nur unter .pm-hell (Wurzel, Dialoge
   auf <body>, Zieh-Geist); Seitenleiste und Kopfzeile der App bleiben dunkel.
   Die Werte ueberschreiben die globalen Variablen nur in diesem Bereich.
   ---------------------------------------------------------------------- */
.pm-hell {
  --ink: #ffffff;
  --panel: var(--pm-spalte);
  --panel-2: var(--pm-karte);
  --line: var(--pm-rand);
  --text: #1e1f21;
  --text-dim: #6d6e6f;
  --olive: #4573d2;
  --olive-lit: #3a64bc;
  --gold: #4573d2;
  --gold-dim: #8aa7e6;
  --pm-gedaempft: #6d6e6f;
  --pm-rot: #c62828;
  --pm-blau: #4573d2;
  --pm-blau-hell: #e7effd;
  --pm-blau-text: #2c5fcb;
  --pm-flaeche: #ffffff;
  --pm-flaeche2: #fafafa;
  --pm-spalte: #f2f2f2;
  --pm-karte: #ffffff;
  --pm-modal: #ffffff;
  --pm-rand: #e2e2e2;
  --pm-rand-stark: #c8c8c8;
  --pm-hover: #f4f4f4;
  --pm-chip: #f1f1f1;
  --pm-chip-hover: #e8e8e8;
  --pm-feld-rand: #cfcfcf;
  --pm-feld-bg: #ffffff;
  --pm-leiste-text: #4a4b4e;
  --pm-gruen: #2e7d32;
  --pm-gruen-bg: #e8f5e9;
  --pm-gruen-rand: #bfdcb9;
  --pm-rot-bg: #fde4e0;
  --pm-rot-rand: #e0a29a;
  --pm-hinweis-bg: #f5f8ff;
  --pm-hinweis-rand: #d6e2fb;
  --pm-hinweis-text: #2b4b8f;
  --pm-platz-bg: #edf2fd;
  --pm-platz-rand: #a9bdea;
  --pm-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
}
.pm-wurzel.pm-hell { background: var(--pm-flaeche); border: 0; }
.pm-hell .loading, .pm-hell .empty { color: var(--pm-gedaempft); }
html body #app .pm-hell .card, html body .pm-hell .card { background: var(--pm-karte); background-color: var(--pm-feld-bg); border: 1px solid var(--line); border-radius: 8px; box-shadow: none; color: var(--text); }
.pm-hell .adm-kopf-text p { color: var(--pm-gedaempft); }
html body #app .pm-hell .button.secondary, html body .pm-hell .button.secondary { background: var(--pm-karte); border: 1px solid var(--line); border-image: none; border-radius: 6px; color: var(--text); text-shadow: none; }
.pm-hell .button.secondary:hover { border-color: var(--olive-lit); filter: none; }
.pm-hell select.pm-inp { color: var(--text); background-color: var(--pm-feld-bg); }
.pm-hell .pm-inp::placeholder { color: #727869; opacity: 1; }
.pm-hell .pm-karte { box-shadow: 0 1px 2px rgba(30, 36, 20, 0.08); }
.pm-hell .pm-spalte-neu { background: transparent; }
.pm-hell .pm-btn.pm-primaer, .pm-hell .pm-btn.pm-an { color: #fff; }
.pm-hell .pm-tab.on { color: #fff; }
.pm-hell .pm-avatar, .pm-hell .pm-avatar.pm-inaktiv { color: #fff; }
.pm-hell .pm-avatar.pm-inaktiv { color: var(--pm-rot); }
.pm-hell .adm-modal-innen > p, .pm-hell .adm-modal-innen p { color: var(--pm-gedaempft); }
.pm-hell .pm-karte.pm-zieht, .pm-hell .pm-spalte.pm-zieht { visibility: hidden; }
.adm-modal.pm-hell { background: rgba(26, 31, 18, 0.5); }
.adm-modal.pm-hell .adm-modal-innen { background: var(--pm-modal); border: 1px solid var(--line); box-shadow: 0 18px 48px rgba(26, 31, 18, 0.3); color: var(--text); }
.pm-geist.pm-hell { background: var(--pm-karte); }

/* Schiebebalken unter dem Board */
.pm-boardwrap { min-width: 0; }
.pm-board.pm-board-schiebt { scroll-snap-type: none; }
.pm-schieber {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 36px;
  margin: 4px 0 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
  --pm-daumen: 44px;
}
.pm-schieber.pm-schieber-aus { display: none; }
.pm-schieber::-webkit-slider-runnable-track {
  height: 28px;
  background: #dfe3d6;
  border: 1px solid #b9bfab;
  border-radius: 14px;
}
.pm-schieber::-moz-range-track {
  height: 26px;
  background: #dfe3d6;
  border: 1px solid #b9bfab;
  border-radius: 14px;
}
.pm-schieber::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--pm-daumen);
  height: 28px;
  margin-top: -1px;
  background: var(--olive);
  border: 2px solid var(--pm-karte);
  border-radius: 14px;
  box-shadow: 0 1px 4px rgba(26, 31, 18, 0.4);
  cursor: grab;
}
.pm-schieber::-moz-range-thumb {
  box-sizing: border-box;
  width: var(--pm-daumen);
  height: 28px;
  background: var(--olive);
  border: 2px solid var(--pm-karte);
  border-radius: 14px;
  box-shadow: 0 1px 4px rgba(26, 31, 18, 0.4);
  cursor: grab;
}
.pm-schieber:active::-webkit-slider-thumb { cursor: grabbing; background: var(--olive-lit); }
.pm-schieber:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 14px; }
@media (min-width: 900px) { .pm-schieber { margin-top: 0; } }

/* ----------------------------------------------------------------------
   Projekte nach Vorlage (Asana-Stil): weiss, ruhig, neutrale System-Schrift.
   Nur unter .pm-hell. Spaetere Regeln ueberschreiben die alten oben.
   ---------------------------------------------------------------------- */
.pm-hell, .pm-hell * { font-family: var(--pm-font) !important; }
.pm-hell { letter-spacing: normal; }
.pm-wurzel.pm-hell { position: relative; padding: 0 0 8px; border-radius: 12px; color: var(--text); }
.pm-hell .pm-ico { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pm-hell .pm-ico-klein { width: 12px; height: 12px; stroke-width: 2.2; }
.pm-hell .pm-ico-fett { stroke-width: 3.2; }
.pm-hell .loading, .pm-hell .empty { text-transform: none; letter-spacing: 0; font-size: 14px; }

/* Kopfzeile */
.pm-hell .pm-kopf { padding: 14px 20px 8px; }
.pm-hell .pm-zurueck { display: inline-flex; align-items: center; min-height: 36px; margin: -6px 0 4px; padding: 0; background: none; border: 0; color: var(--pm-gedaempft); font-size: 13px; cursor: pointer; }
.pm-hell .pm-zurueck:hover { color: var(--text); }
.pm-hell .pm-kopf-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pm-hell .pm-kopf-avatar { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #5b86e0, #3a64bc); color: #fff; font-size: 12px; font-weight: 600; }
.pm-hell .pm-seitentitel { flex: 0 1 auto; min-width: 0; margin: 0; font-size: 20px; font-weight: 600; line-height: 1.25; color: var(--text); text-transform: none; letter-spacing: 0; }
.pm-hell .pm-titel-text { overflow-wrap: anywhere; }
.pm-hell .pm-titel-knopf { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: -6px -8px; padding: 6px 8px; background: transparent; border: 0; border-radius: 8px; color: inherit; font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.pm-hell .pm-titel-knopf:hover { background: var(--pm-hover); }
.pm-hell .pm-titel-knopf:focus-visible, .pm-hell .pm-leistenknopf:focus-visible, .pm-hell .pm-hauptknopf:focus-visible, .pm-hell .pm-pop-punkt:focus-visible, .pm-hell .pm-zurueck:focus-visible { outline: 2px solid var(--pm-blau); outline-offset: 2px; }
.pm-hell .pm-kopf-aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.pm-hell .pm-kopf-knopf, .pm-hell .pm-btn { border-radius: 8px; font-size: 14px; font-weight: 500; letter-spacing: 0; border-color: var(--pm-feld-rand); }
.pm-hell .pm-btn:hover { border-color: var(--pm-rand-stark); background: var(--pm-flaeche2); }
.pm-hell .pm-btn.pm-primaer, .pm-hell .pm-btn.pm-an { background: var(--pm-blau); border-color: var(--pm-blau); color: #fff; }
.pm-hell .pm-btn.pm-primaer:hover, .pm-hell .pm-btn.pm-an:hover { background: #3a64bc; border-color: #3a64bc; }
.pm-hell .pm-btn.pm-ghost { border-color: transparent; background: transparent; }
.pm-hell .pm-btn.pm-ghost:hover { background: var(--pm-hover); }
.pm-hell .pm-btn.pm-gefahr { border-color: var(--pm-rot-rand); }

/* Tab-Zeile: reiner Text, aktiver Tab als blaue Pille */
.pm-hell .pm-tabs { gap: 4px; margin: 0; padding: 0 20px 10px; border-bottom: 1px solid var(--line); }
.pm-hell .pm-tab { min-height: 36px; padding: 4px 12px; background: transparent; border: 0; border-radius: 8px; color: var(--pm-gedaempft); font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.pm-hell .pm-tab:hover { background: var(--pm-hover); color: var(--text); }
.pm-hell .pm-tab.on, .pm-hell .pm-tab.on:hover { background: var(--pm-blau-hell); color: var(--pm-blau-text); }

/* Werkzeugleiste */
.pm-hell .pm-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 12px 20px; border-bottom: 1px solid var(--line); }
.pm-hell .pm-leiste[hidden] { display: none; }
.pm-hell .pm-leiste-links { display: flex; align-items: center; }
.pm-hell .pm-hauptknopf { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; margin: 0; padding: 0 12px; background: var(--pm-blau); border: 0; border-radius: 8px 0 0 8px; color: #fff; font-size: 14px; font-weight: 500; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pm-hell .pm-hauptknopf:hover { background: #3a64bc; }
.pm-hell .pm-hauptknopf-pfeil { margin-left: 1px; padding: 0 9px; border-radius: 0 8px 8px 0; }
.pm-hell .pm-hauptknopf:only-child { border-radius: 8px; }
.pm-hell .pm-leiste-rechts { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 2px; min-width: 0; }
.pm-hell .pm-leistenknopf { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; margin: 0; padding: 0 10px; background: transparent; border: 0; border-radius: 8px; color: var(--pm-leiste-text); font-size: 14px; font-weight: 500; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pm-hell .pm-leistenknopf:hover { background: var(--pm-hover); }
.pm-hell .pm-leistenknopf.pm-an { background: var(--pm-blau-hell); color: var(--pm-blau-text); }
.pm-hell .pm-icon-knopf { padding: 0; width: 34px; }
.pm-hell .pm-leiste-trenner { width: 1px; height: 22px; margin: 0 6px; background: var(--line); }
.pm-hell .pm-filterzahl { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--pm-blau); color: #fff; font-size: 11px; font-weight: 600; }
.pm-hell .pm-filterzahl[hidden] { display: none; }
.pm-hell .pm-suche { display: flex; align-items: center; margin-right: 4px; }
.pm-hell .pm-suche-inp { box-sizing: border-box; width: 250px; max-width: 100%; min-height: 34px; padding: 0 12px; background: var(--pm-karte); border: 1px solid var(--pm-feld-rand); border-radius: 8px; color: var(--text); font-size: 14px; }
.pm-hell .pm-suche-inp:focus-visible { outline: 2px solid var(--pm-blau); outline-offset: 1px; border-color: transparent; }

/* Popup-Menue */
.pm-hell .pm-pop { position: absolute; z-index: 60; box-sizing: border-box; min-width: 220px; max-width: calc(100% - 16px); padding: 6px; background: var(--pm-karte); border: 1px solid var(--pm-rand); border-radius: 10px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16); }
.pm-hell .pm-pop-punkt { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; margin: 0; padding: 0 10px; background: transparent; border: 0; border-radius: 6px; color: var(--text); font-size: 14px; text-align: left; cursor: pointer; }
.pm-hell .pm-pop-punkt:hover, .pm-hell .pm-pop-punkt:focus-visible { background: var(--pm-hover); outline: none; }
.pm-hell .pm-pop-punkt.pm-an { color: var(--pm-blau-text); font-weight: 600; }
.pm-hell .pm-pop-haken { display: inline-flex; width: 14px; flex: none; }
.pm-hell .pm-pop-text { min-width: 0; overflow-wrap: anywhere; }
.pm-hell .pm-pop-trenner { height: 1px; margin: 6px 4px; background: var(--line); }

/* Banner, Filter-Bereich, Hauptflaeche */
.pm-hell .pm-banner-platz:not(:empty) { padding: 12px 20px 0; }
.pm-hell .pm-banner { margin: 0; border-radius: 8px; }
.pm-hell .pm-filter-platz { padding: 0 20px; }
.pm-hell .pm-filterleiste { margin: 0; padding: 0; }
.pm-hell .pm-filter-chips { padding: 12px 0 0; }
.pm-hell .pm-filter-chips:empty { display: none; }
.pm-hell .pm-filter-chip { min-height: 32px; padding: 0 12px; background: var(--pm-chip); border: 0; border-radius: 16px; color: var(--text); font-size: 13px; cursor: pointer; }
.pm-hell .pm-filter-chip:hover { background: var(--pm-chip-hover); }
.pm-hell .pm-filter-raster { margin: 12px 0 8px; padding: 12px; background: var(--pm-flaeche2); border: 1px solid var(--line); border-radius: 10px; }
.pm-hell .pm-filterleiste > .pm-reihe { margin: 0 0 4px; }
.pm-hell .pm-label-text { margin: 0 0 4px; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text); }
.pm-hell .pm-main { padding: 16px 20px 20px; min-width: 0; }
.pm-hell .pm-sort-hinweis { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; padding: 8px 12px; background: var(--pm-hinweis-bg); border: 1px solid var(--pm-hinweis-rand); border-radius: 8px; color: var(--pm-hinweis-text); font-size: 14px; line-height: 1.4; }
.pm-hell .pm-nur-lesen { font-size: 14px; }

/* Board und Spalten */
.pm-hell .pm-board { gap: 14px; margin: 0 -20px; padding: 2px 20px 14px; scroll-padding-inline: 20px; }
.pm-hell .pm-spalte { flex: 0 0 275px; gap: 8px; max-height: 78vh; background: transparent; border: 0; border-radius: 0; }
.pm-hell .pm-spalte-kopf { flex: none; min-height: 44px; padding: 0 6px 0 14px; background: var(--pm-spalte); border-radius: 10px; }
.pm-hell .pm-spalte-titel { flex-wrap: nowrap; gap: 8px; }
.pm-hell .pm-spalte-titel h3 { font-size: 17px; font-weight: 600; letter-spacing: 0; text-transform: none; line-height: 1.25; }
.pm-hell .pm-spalten-punkt { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--pm-farbe, #b8b9bc); }
.pm-hell .pm-zaehler { min-width: 0; padding: 0; background: transparent; border-radius: 0; color: var(--pm-gedaempft); font-size: 15px; font-weight: 400; }
.pm-hell .pm-wip { padding: 1px 8px; background: var(--pm-karte); border-color: var(--pm-rand); font-size: 12px; }
.pm-hell .pm-wip.pm-wip-zuviel { background: var(--pm-rot-bg); border-color: var(--pm-rot-rand); }
.pm-hell .pm-erledigt-marke { padding: 1px 6px; border-color: var(--pm-gruen-rand); border-radius: 6px; font-size: 11px; letter-spacing: 0; text-transform: none; color: var(--pm-gruen); }
.pm-hell .pm-spalte-menue { display: grid; place-items: center; min-width: 36px; min-height: 36px; border-radius: 8px; color: #6d6e6f; }
.pm-hell .pm-spalte-menue:hover { background: var(--pm-hover); }
.pm-hell .pm-spalte-koerper { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; padding: 10px; background: var(--pm-spalte); border-radius: 10px; }
.pm-hell .pm-karten { flex: 1 1 auto; gap: 8px; min-height: 0; padding: 0; margin-top: 8px; }
.pm-hell .pm-karten:empty { display: none; }
.pm-hell .pm-add { display: flex; flex: none; align-items: center; gap: 8px; box-sizing: border-box; width: 100%; min-height: 44px; margin: 0; padding: 0 12px; background: transparent; border: 0; border-radius: 8px; color: var(--pm-gedaempft); font-size: 15px; font-weight: 400; text-align: left; }
.pm-hell .pm-add:hover { background: rgba(0, 0, 0, 0.05); color: var(--text); }
.pm-hell .pm-add-form { flex: none; padding: 0; }
.pm-hell .pm-spalte-leer { padding: 8px 4px; font-size: 13px; }
.pm-hell .pm-spalte-neu { flex: 0 0 275px; padding: 0; background: transparent; border: 0; }
.pm-hell .pm-spalte-neu .pm-btn { justify-content: flex-start; min-height: 44px; padding: 0 14px; background: var(--pm-flaeche2); border: 1px dashed var(--pm-feld-rand); border-radius: 10px; color: var(--pm-gedaempft); font-size: 15px; }

/* Karten */
.pm-hell .pm-karte, .pm-karte.pm-hell { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; background: var(--pm-karte); border: 1px solid var(--pm-rand); border-radius: 10px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); color: var(--text); }
.pm-hell .pm-karte:hover { border-color: var(--pm-rand-stark); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1); }
.pm-hell .pm-karte:focus-visible { outline: 2px solid var(--pm-blau); outline-offset: 2px; }
.pm-hell .pm-karte-kopf { display: flex; align-items: center; gap: 4px; min-width: 0; padding-right: 30px; color: var(--pm-gedaempft); font-size: 13px; line-height: 1.3; }
.pm-hell .pm-karte-board { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-hell .pm-karte-chip { display: inline-block; max-width: 100%; min-width: 0; padding: 1px 8px; overflow: hidden; background: var(--pm-flaeche2); border: 1px solid var(--pm-rand); border-radius: 999px; color: var(--pm-gedaempft); font-size: 12px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.pm-hell .pm-karte-menue { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 30px; height: 30px; min-width: 0; min-height: 0; margin: 0; padding: 0; background: var(--pm-karte); border: 1px solid var(--pm-rand); border-radius: 8px; color: #6d6e6f; opacity: 0; transition: opacity 0.12s; }
.pm-hell .pm-karte:hover .pm-karte-menue, .pm-hell .pm-karte:focus-within .pm-karte-menue, .pm-hell .pm-karte-menue:focus-visible { opacity: 1; }
.pm-hell .pm-karte-menue:hover { background: var(--pm-hover); }
.pm-hell .pm-titelzeile { display: flex; align-items: flex-start; gap: 10px; }
.pm-hell .pm-titelzeile.pm-erste { padding-right: 26px; }
.pm-hell .pm-prio-quadrat { flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 5px; background: #cfd2d6; }
.pm-hell .pm-prio-low { background: #9cc7f2; }
.pm-hell .pm-prio-normal { background: #cfd2d6; }
.pm-hell .pm-prio-high { background: #f3b657; }
.pm-hell .pm-prio-urgent { background: #ee6a63; }
.pm-hell .pm-titel { min-width: 0; margin: 0; font-size: 15px; font-weight: 400; line-height: 1.4; color: var(--text); overflow-wrap: anywhere; }
.pm-hell .pm-karte.pm-erledigt .pm-titel { color: var(--pm-gedaempft); text-decoration: line-through; text-decoration-color: #b5b5b5; }
.pm-hell .pm-labels { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; }
.pm-hell .pm-label { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 9px 3px 6px; background: var(--pm-chip); border-radius: 6px; color: var(--text); font-size: 13px; font-weight: 400; line-height: 1.3; }
.pm-hell .pm-label-punkt { flex: none; width: 14px; height: 14px; border-radius: 4px; background: var(--pm-farbe, #b8b9bc); }
.pm-hell .pm-label-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-hell .pm-karte-fuss { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; }
.pm-hell .pm-faellig { padding-left: 2px; color: var(--pm-gedaempft); font-size: 13px; }
.pm-hell .pm-faellig.pm-ueberfaellig { color: var(--pm-rot); }
.pm-hell .pm-kein-datum { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 1.5px dashed var(--pm-gedaempft); border-radius: 50%; color: var(--pm-gedaempft); }
.pm-hell .pm-kein-datum .pm-ico { width: 14px; height: 14px; }
.pm-hell .pm-fuss-rechts { display: flex; align-items: center; gap: 10px; min-width: 0; margin-left: auto; }
.pm-hell .pm-zahl { display: inline-flex; align-items: center; gap: 4px; color: var(--pm-gedaempft); font-size: 13px; }
.pm-hell .pm-zahl.pm-fertig { color: var(--pm-gruen); }
.pm-hell .pm-zustaendig { display: inline-flex; flex-wrap: nowrap; margin: 0; padding-left: 6px; }
.pm-hell .pm-avatar { width: 24px; height: 24px; margin-left: -6px; border: 2px solid var(--pm-karte); background: var(--pm-blau); box-sizing: content-box; font-size: 10px; font-weight: 600; letter-spacing: 0; }
.pm-hell .pm-avatar.pm-inaktiv { border: 2px dashed var(--pm-rot-rand); background: var(--pm-karte); }
.pm-hell .pm-hinweis-inaktiv { margin: 0; font-size: 12px; }
.pm-hell .pm-karte.pm-zieht, .pm-hell .pm-spalte.pm-zieht { visibility: hidden; }
.pm-hell .pm-platzhalter { border: 2px dashed var(--pm-platz-rand); border-radius: 10px; background: var(--pm-platz-bg); }
.pm-geist.pm-hell { background: var(--pm-karte); border-radius: 10px; }
.pm-spalte.pm-geist.pm-hell { background: transparent; }

/* Listenansicht (Mein Bereich, Alle Aufgaben) */
.pm-hell .pm-liste { gap: 28px; }
.pm-hell .pm-gruppen-titel { margin: 0 0 12px; font-size: 20px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.pm-hell .pm-unter { margin: 0 0 18px; padding: 0; border: 0; }
.pm-hell .pm-unter-titel { gap: 8px; margin: 0 0 10px; font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.pm-hell .pm-unter.pm-c-gray .pm-unter-titel::before, .pm-hell .pm-unter[class*="pm-c-"] .pm-unter-titel::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pm-farbe, #b8b9bc); }
.pm-hell .pm-listenkarten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
@media (min-width: 640px) { .pm-hell .pm-listenkarten { grid-template-columns: repeat(auto-fill, 275px); gap: 12px; } }

/* Archiv, Ansichten, Dialoge */
.pm-hell .pm-abschnitt { font-size: 18px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.pm-hell .pm-archiv-titel, .pm-hell .pm-ansicht-name, .pm-hell .pm-box-titel { font-weight: 600; letter-spacing: 0; text-transform: none; }
.pm-hell .pm-archiv .pm-btn:first-child { margin-bottom: 12px; }
.pm-hell .pm-chip { border-radius: 6px; font-size: 12px; letter-spacing: 0; border-color: var(--pm-rand); }
.pm-hell .pm-chip.pm-fertig { background: var(--pm-gruen-bg); border-color: var(--pm-gruen-rand); color: var(--pm-gruen); }
.pm-hell .pm-inp { border-color: var(--pm-feld-rand); border-radius: 8px; }
.pm-hell .pm-inp:focus-visible { outline: 2px solid var(--pm-blau); outline-offset: 1px; border-color: transparent; }
.adm-modal.pm-hell .adm-modal-innen { border-radius: 14px; }
.pm-hell .pm-modal-titel { font-size: 18px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text); }
.pm-hell .pm-detail-modal .pm-modal-titel, .pm-detail-modal.pm-hell .pm-modal-titel { font-size: 13px; font-weight: 500; color: var(--pm-gedaempft); }
.pm-hell .pm-titel-feld { font-size: 20px; font-weight: 600; }
.pm-hell .pm-menue-punkt { border-radius: 8px; font-size: 15px; }
.pm-hell .pm-menue-punkt.on { border-color: var(--pm-blau); background: var(--pm-blau-hell); }
.pm-hell .pm-label-knopf { border-radius: 8px; }
.pm-hell .pm-fortschritt-text, .pm-hell .pm-kommentar-kopf small, .pm-hell .pm-verlauf-zeile small { letter-spacing: 0; font-size: 12px; }

/* Schiebebalken: neutral grau mit blauem Griff */
.pm-hell .pm-schieber::-webkit-slider-runnable-track { background: var(--pm-spalte); border-color: var(--pm-rand); }
.pm-hell .pm-schieber::-moz-range-track { background: var(--pm-spalte); border-color: var(--pm-rand); }
.pm-hell .pm-schieber::-webkit-slider-thumb { background: #4573d2; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); }
.pm-hell .pm-schieber::-moz-range-thumb { background: #4573d2; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); }
.pm-hell .pm-schieber:active::-webkit-slider-thumb { background: #3a64bc; }

/* Maus am Desktop: etwas kompaktere Knoepfe */
@media (min-width: 900px) and (pointer: fine) {
  .pm-hell .pm-btn, .pm-hell .pm-btn.pm-klein { min-height: 36px; }
  .pm-hell .pm-inp { min-height: 38px; }
  .pm-hell .pm-board { margin: 0 -20px; padding-inline: 20px; }
}

/* Handy und Touch: Tippziele mindestens 44 px */
@media (max-width: 899px), (hover: none) {
  .pm-hell .pm-karte-menue { opacity: 1; top: 6px; right: 6px; width: 44px; height: 44px; border: 0; background: transparent; }
  .pm-hell .pm-karte-menue:hover { background: var(--pm-hover); }
}
@media (max-width: 640px) {
  .pm-hell .pm-kopf { padding: 12px 16px 6px; }
  .pm-hell .pm-tabs { padding: 0 16px 8px; }
  .pm-hell .pm-tab { min-height: 44px; }
  .pm-hell .pm-leiste { padding: 10px 16px; }
  .pm-hell .pm-filter-platz, .pm-hell .pm-banner-platz:not(:empty) { padding-inline: 16px; }
  .pm-hell .pm-main { padding: 14px 16px 16px; }
  .pm-hell .pm-board { margin: 0 -16px; padding-inline: 16px; scroll-padding-inline: 16px; gap: 10px; }
  .pm-hell .pm-spalte, .pm-hell .pm-spalte-neu { flex-basis: min(85vw, 300px); }
  .pm-hell .pm-kopf-knopf, .pm-hell .pm-hauptknopf, .pm-hell .pm-leistenknopf, .pm-hell .pm-suche-inp, .pm-hell .pm-pop-punkt, .pm-hell .pm-spalte-menue { min-height: 44px; }
  .pm-hell .pm-leistentext, .pm-hell .pm-lang { display: none; }
  .pm-hell .pm-leistenknopf { min-width: 44px; padding: 0 8px; }
  .pm-hell .pm-icon-knopf { width: 44px; }
  .pm-hell .pm-leiste-trenner { display: none; }
  .pm-hell .pm-leiste-rechts { flex: 0 1 auto; margin-left: auto; }
  .pm-hell .pm-leiste:has(.pm-suche) .pm-leiste-rechts { flex: 1 1 100%; }
  .pm-hell .pm-suche { flex: 1 1 100%; order: -1; margin: 0 0 4px; }
  .pm-hell .pm-suche-inp { width: 100%; font-size: 16px; }
  .pm-hell .pm-hauptknopf-pfeil { min-width: 40px; }
  .pm-hell .pm-pop { min-width: 0; width: calc(100% - 16px); }
  .pm-hell .pm-inp { font-size: 16px; }
  .pm-hell .pm-filter-chip { min-height: 44px; }
}

/* ----------------------------------------------------------------------
   Projekte: ganze Seitenflaeche hell oder dunkel + Umschalter.
   Das Attribut data-pm-theme sitzt auf <body>, solange der Reiter offen ist.
   Zusaetzlich verlangen alle Seiten-Regeln :has(#content > .pm-wurzel):
   ohne Projekte-Oberflaeche im Dokument bleibt jedes Attribut wirkungslos.
   Kopfleiste (Logo) und Admin-Navigation bleiben dunkel.
   ---------------------------------------------------------------------- */
body[data-pm-theme="dunkel"]:has(#content > .pm-wurzel) { --pm-seite: #121316; --pm-legal: #8b8f99; color-scheme: dark; }
body[data-pm-theme]:has(#content > .pm-wurzel) { background: var(--pm-seite); background-image: none; }
body[data-pm-theme]:has(#content > .pm-wurzel)::before, body[data-pm-theme]:has(#content > .pm-wurzel)::after { display: none; }
body[data-pm-theme]:has(#content > .pm-wurzel) #app { background: var(--pm-seite) !important; border-inline: 0 !important; max-width: none !important; }
body[data-pm-theme]:has(#content > .pm-wurzel) #content.pm-aktiv { padding: 0 !important; background: transparent; }
body[data-pm-theme]:has(#content > .pm-wurzel) .legal-bar,
body[data-pm-theme]:has(#content > .pm-wurzel) .legal-bar button,
body[data-pm-theme]:has(#content > .pm-wurzel) .legal-bar span { color: var(--pm-legal) !important; background: transparent !important; }
body[data-pm-theme]:has(#content > .pm-wurzel) .pm-wurzel.pm-hell { border-radius: 0; padding-bottom: 24px; }

/* Umschalter im Kopf */

/* Gemeinsame Basiselemente mit Variablen (gelten in beiden Modi) */
.pm-hell .pm-btn, .pm-hell .pm-inp { background: var(--pm-feld-bg); color: var(--text); }
.pm-hell .pm-btn.pm-ghost, .pm-hell .pm-btn.pm-gefahr { background: transparent; }
.pm-hell .pm-btn.pm-gefahr { color: var(--pm-rot); }
.pm-hell .pm-btn.pm-primaer, .pm-hell .pm-btn.pm-an { background: var(--pm-blau); color: #fff; }
.pm-hell .pm-btn.pm-primaer:hover, .pm-hell .pm-btn.pm-an:hover { background: #3a64bc; }
.pm-hell .pm-btn:hover:not(.pm-primaer):not(.pm-an):not(.pm-ghost) { background: var(--pm-hover); }
.pm-hell .pm-banner { background: var(--pm-rot-bg); border-color: var(--pm-rot-rand); color: var(--pm-rot); }
.pm-hell .pm-schritt-geist { background: var(--pm-karte); color: var(--text); }
.pm-hell .pm-menue-punkt { background: var(--pm-karte); }
.pm-hell .pm-label-knopf { color: var(--text); }
.pm-hell .pm-pop-punkt.pm-an { color: var(--pm-blau-text); }
.pm-hell .pm-hilfe, .pm-hell .pm-menue-text, .pm-hell .pm-nur-lesen { color: var(--pm-gedaempft); }
.pm-hell .pm-warnung { color: #b07a00; }
.pm-hell .pm-status { color: var(--pm-gruen); }
.pm-hell .pm-status.pm-status-fehler, .pm-hell .pm-dialog-fehler { color: var(--pm-rot); }
.pm-hell .pm-wip.pm-wip-zuviel, .pm-hell .pm-chip.pm-ueberfaellig { background: var(--pm-rot-bg); border-color: var(--pm-rot-rand); color: var(--pm-rot); }
.pm-hell .pm-schieber::-webkit-slider-thumb { border-color: var(--pm-karte); }
.pm-hell .pm-schieber::-moz-range-thumb { border-color: var(--pm-karte); }

/* Dunkel: dieselbe Optik, nur andere Farben */
body[data-pm-theme="dunkel"] .pm-hell {
  --pm-flaeche: #121316;
  --pm-flaeche2: #17181c;
  --pm-spalte: #1c1e23;
  --pm-karte: #25272d;
  --pm-modal: #202227;
  --pm-rand: #363a42;
  --pm-rand-stark: #555a66;
  --pm-hover: #2d3037;
  --pm-chip: #34373f;
  --pm-chip-hover: #3d414a;
  --pm-feld-rand: #4a4f5a;
  --pm-feld-bg: #1a1c20;
  --pm-leiste-text: #c9ccd3;
  --pm-gruen: #7fd68a;
  --pm-gruen-bg: #1e3a26;
  --pm-gruen-rand: #2f6b3c;
  --pm-rot-bg: #3d201d;
  --pm-rot-rand: #8a423a;
  --pm-rot: #ff8f85;
  --pm-hinweis-bg: #1c2740;
  --pm-hinweis-rand: #2f4577;
  --pm-hinweis-text: #a9c3f7;
  --pm-platz-bg: #212b45;
  --pm-platz-rand: #4a6196;
  --pm-blau-hell: #243556;
  --pm-blau-text: #9bbaf8;
  --text: #ecedf0;
  --text-dim: #a3a7b0;
  --pm-gedaempft: #a3a7b0;
  color-scheme: dark;
}
body[data-pm-theme="dunkel"] .pm-hell .pm-karte { box-shadow: none; }
body[data-pm-theme="dunkel"] .pm-hell .pm-karte:hover { box-shadow: none; }
body[data-pm-theme="dunkel"] .pm-hell .pm-pop { box-shadow: 0 8px 28px rgba(0, 0, 0, 0.6); }
body[data-pm-theme="dunkel"] .pm-hell .pm-inp::placeholder, body[data-pm-theme="dunkel"] .pm-hell .pm-suche-inp::placeholder { color: #7f848f; }
body[data-pm-theme="dunkel"] .pm-hell .pm-warnung { color: var(--gold-text, #f0c36a); }
body[data-pm-theme="dunkel"] .adm-modal.pm-hell { background: rgba(0, 0, 0, 0.65); }
body[data-pm-theme="dunkel"] .adm-modal.pm-hell .adm-modal-innen { box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6); }
body[data-pm-theme="dunkel"] .pm-hell .pm-kein-datum { border-color: #5a5e69; }
body[data-pm-theme="dunkel"] .pm-hell .pm-schieber::-webkit-slider-runnable-track { background: var(--pm-spalte); }
body[data-pm-theme="dunkel"] .pm-hell .pm-schieber::-moz-range-track { background: var(--pm-spalte); }

/* ----------------------------------------------------------------------
   Kartendetail kompakt: Hauptfelder auf einem Handy-Bildschirm, Rest in
   Reitern. Alle Farben ueber die Variablen (hell und dunkel).
   ---------------------------------------------------------------------- */
.pm-detail-modal.pm-hell .adm-modal-innen { position: relative; display: flex; flex-direction: column; width: min(960px, 100%); max-height: 92vh; max-height: 92dvh; padding: 14px 16px 12px; overflow: hidden; }
.pm-detail-modal.pm-hell .pm-modal-titel { flex: none; margin: 0 56px 8px 0; font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--pm-gedaempft); }
.pm-detail-modal .pm-detail { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.pm-detail-zu { position: absolute; top: 4px; right: 6px; display: grid; place-items: center; width: 44px; height: 44px; min-height: 44px; padding: 0; background: transparent; border: 0; border-radius: 8px; color: var(--pm-gedaempft); cursor: pointer; }
.pm-detail-zu:hover { background: var(--pm-hover); color: var(--text); }
.pm-detail-zu:focus-visible { outline: 2px solid var(--pm-blau); outline-offset: 1px; }
.pm-hell .pm-detail-inhalt { position: relative; display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.pm-hell .pm-detail-spalten { display: flex; flex: 1 1 auto; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.pm-hell .pm-detail-links { display: flex; flex: none; flex-direction: column; gap: 8px; min-width: 0; }
.pm-hell .pm-detail-rechts { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 190px; min-width: 0; }
.pm-hell .pm-kompakt { margin: 0; }
.pm-hell .pm-kompakt .pm-label-text { margin: 0 0 2px; font-size: 12px; font-weight: 600; color: var(--pm-gedaempft); }
.pm-hell .pm-nur-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pm-hell .pm-detail-paar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.pm-hell .pm-detail-inhalt .pm-inp { min-width: 0; max-width: 100%; box-sizing: border-box; }
.pm-hell .pm-detail-inhalt .pm-titel-feld { padding-inline: 12px; font-size: 18px; font-weight: 600; }
.pm-hell .pm-detail-inhalt select.pm-inp { padding-right: 24px; text-overflow: ellipsis; }
.pm-hell .pm-detail-inhalt textarea.pm-inp { min-height: 0; resize: none; line-height: 1.4; }
.pm-hell .pm-detail-inhalt textarea.pm-inp:focus { min-height: 140px; }

/* Datum mit eingebautem Entfernen-Knopf: darf nie ueber den Rand ragen */
.pm-hell .pm-datum { position: relative; display: block; min-width: 0; max-width: 100%; }
.pm-hell .pm-datum input[type="date"] { display: block; width: 100%; max-width: 100%; min-width: 0; padding-inline: 10px 68px; font-size: 15px; -webkit-appearance: none; appearance: none; }
.pm-hell .pm-datum-weg { position: absolute; top: 50%; right: 28px; display: grid; place-items: center; width: 36px; height: 36px; min-height: 36px; margin: 0; padding: 0; transform: translateY(-50%); background: transparent; border: 0; border-radius: 8px; color: var(--pm-gedaempft); cursor: pointer; }
.pm-hell .pm-datum-weg:hover { background: var(--pm-hover); color: var(--text); }
.pm-hell .pm-datum-weg[disabled] { display: none; }

/* Zustaendige als Avatar-Chips, Labels als Chipzeile */
.pm-hell .pm-chipknopf { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; cursor: pointer; overflow: hidden; }
.pm-hell .pm-chipknopf[disabled] { cursor: default; opacity: 1; }
.pm-hell .pm-chipknopf .pm-zustaendig { padding-left: 6px; }
.pm-hell .pm-chip-leer, .pm-hell .pm-chip-mehr { color: var(--pm-gedaempft); font-size: 14px; }
.pm-hell .pm-label-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 44px; }
.pm-hell .pm-label-plus { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px; background: transparent; border: 1px dashed var(--pm-feld-rand); border-radius: 8px; color: var(--pm-gedaempft); font-size: 14px; cursor: pointer; }
.pm-hell .pm-label-plus:hover { background: var(--pm-hover); color: var(--text); }
.pm-hell .pm-label-plus[disabled] { display: none; }
.pm-hell .pm-label-zeile .pm-label { padding-block: 6px; }

/* Kleines Auswahlfenster im Dialog */
.pm-hell .pm-detail-pop { position: absolute; z-index: 30; box-sizing: border-box; width: min(320px, 100%); max-height: 60%; padding: 8px 10px; overflow-y: auto; background: var(--pm-modal); border: 1px solid var(--pm-rand); border-radius: 10px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25); }
.pm-hell .pm-detail-pop[hidden] { display: none; }
.pm-hell .pm-detail-pop .pm-checkliste .pm-haken { min-height: 44px; margin: 0; }
.pm-hell .pm-detail-pop .pm-label-wahl { margin: 0 0 8px; }
.pm-hell .pm-detail-pop .pm-label-neu { grid-template-columns: minmax(0, 1fr) auto; }
.pm-hell .pm-detail-pop-fuss { display: flex; justify-content: flex-end; padding-top: 6px; }

/* Reiter */
.pm-hell .pm-reiter-leiste { display: flex; flex: none; gap: 2px; border-bottom: 1px solid var(--pm-rand); overflow-x: auto; scrollbar-width: none; }
.pm-hell .pm-reiter-leiste::-webkit-scrollbar { display: none; }
.pm-hell .pm-reiter { flex: 1 1 auto; min-height: 44px; padding: 0 12px; background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--pm-gedaempft); font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.pm-hell .pm-reiter.on { border-bottom-color: var(--pm-blau); color: var(--pm-blau-text); }
.pm-hell .pm-reiter:hover:not(.on) { background: var(--pm-hover); }
.pm-hell .pm-reiter:focus-visible { outline: 2px solid var(--pm-blau); outline-offset: -2px; }
.pm-hell .pm-reiter-panel { flex: 1 1 auto; min-height: 0; padding: 10px 2px 4px; overflow-y: auto; overscroll-behavior: contain; }
.pm-hell .pm-reiter-panel[hidden] { display: none; }
.pm-hell .pm-detail-inhalt .pm-status { flex: none; min-height: 18px; margin: 4px 0 0; font-size: 12px; }
.pm-hell .pm-detail-inhalt .pm-modal-fuss { flex: none; margin-top: 4px; padding-top: 8px; flex-wrap: nowrap; justify-content: space-between; }
.pm-hell .pm-archiv-knopf { margin-right: auto; }

/* Desktop: links Hauptfelder + Beschreibung, rechts die Reiter */
@media (min-width: 760px) {
  .pm-detail-modal.pm-hell .adm-modal-innen { height: min(720px, 92vh); padding: 18px 22px 14px; }
  .pm-hell .pm-detail-spalten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; overflow: hidden; }
  .pm-hell .pm-detail-links { overflow-y: auto; padding-right: 2px; }
  .pm-hell .pm-detail-rechts { min-height: 0; }
  .pm-hell .pm-detail-inhalt textarea.pm-inp { min-height: 120px; resize: vertical; }
}
/* Handy: Vollbild, Hauptfelder oben fest, Reiterinhalt scrollt */
@media (max-width: 620px) {
  .pm-detail-modal.pm-hell { padding: 0; place-items: stretch; }
  .pm-detail-modal.pm-hell .adm-modal-innen { width: 100%; height: 100%; max-height: none; padding: 10px 14px 10px; border-radius: 0; }
  .pm-hell .pm-detail-inhalt .pm-inp, .pm-hell .pm-detail-inhalt select.pm-inp, .pm-hell .pm-detail-inhalt textarea.pm-inp { font-size: 16px; }
  .pm-hell .pm-detail-inhalt .pm-titel-feld { font-size: 18px; }
  .pm-hell .pm-detail-inhalt textarea.pm-inp { min-height: 64px; }
}

/* ----------------------------------------------------------------------
   Benachrichtigungen (Glocke, Panel, Push), Erwaehnungen
   ---------------------------------------------------------------------- */
.pm-hell .pm-glocke { position: relative; padding-inline: 12px; }
.pm-hell .pm-glocke-zahl { position: absolute; top: -6px; right: -6px; display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; background: #d93025; border: 2px solid var(--pm-flaeche); border-radius: 10px; color: #fff; font-size: 11px; font-weight: 700; line-height: 1; }
.pm-hell .pm-glocke-zahl[hidden] { display: none; }

/* Panel: Handy Vollbild, Desktop Dropdown rechts oben */
.pm-notif-modal.pm-hell { place-items: start end; padding: 76px 24px 16px; }
.pm-notif-modal.pm-hell .adm-modal-innen { display: flex; flex-direction: column; width: min(440px, 100%); max-height: calc(100vh - 100px); max-height: calc(100dvh - 100px); padding: 14px 16px; }
.pm-notif-modal.pm-hell .pm-modal-titel { flex: none; margin: 0 0 8px; font-size: 18px; }
.pm-hell .pm-notif { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.pm-hell .pm-notif-kopf { display: flex; flex: none; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.pm-hell .pm-notif-liste { flex: 1 1 auto; min-height: 120px; overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--pm-rand); }
.pm-hell .pm-notif-leer { padding: 24px 4px; text-align: center; }
.pm-hell .pm-notif-eintrag { position: relative; display: flex; align-items: flex-start; gap: 12px; box-sizing: border-box; width: 100%; min-height: 64px; margin: 0; padding: 12px 8px; background: transparent; border: 0; border-bottom: 1px solid var(--pm-rand); color: var(--text); text-align: left; cursor: pointer; }
.pm-hell .pm-notif-eintrag:hover { background: var(--pm-hover); }
.pm-hell .pm-notif-eintrag:focus-visible { outline: 2px solid var(--pm-blau); outline-offset: -2px; }
.pm-hell .pm-notif-eintrag.pm-ungelesen { background: var(--pm-blau-hell); }
.pm-hell .pm-notif-avatar { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--pm-blau); color: #fff; font-size: 12px; font-weight: 600; }
.pm-hell .pm-notif-text { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
.pm-hell .pm-notif-satz { font-size: 14px; line-height: 1.35; color: var(--pm-gedaempft); overflow-wrap: anywhere; }
.pm-hell .pm-notif-titel { font-size: 15px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.pm-hell .pm-notif-meta { font-size: 13px; line-height: 1.35; color: var(--pm-gedaempft); overflow-wrap: anywhere; }
.pm-hell .pm-notif-zeit { font-size: 12px; color: var(--pm-gedaempft); }
.pm-hell .pm-notif-punkt { flex: none; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--pm-blau); }
.pm-hell .pm-push { flex: none; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--pm-rand); }
.pm-hell .pm-push .pm-box-titel { margin: 0 0 4px; font-size: 14px; }
.pm-hell .pm-push-status { margin: 0 0 8px; }
.pm-hell .pm-push-status.pm-push-fehler { color: var(--pm-rot); }
.pm-hell .pm-push .pm-btn[hidden] { display: none; }
@media (max-width: 620px) {
  .pm-notif-modal.pm-hell { padding: 0; place-items: stretch; }
  .pm-notif-modal.pm-hell .adm-modal-innen { width: 100%; height: 100%; max-height: none; padding: 12px 14px; border-radius: 0; }
}

/* @-Erwaehnung im Kommentarfeld */
.pm-hell .pm-erwaehnung-feld { position: relative; }
.pm-hell .pm-erwaehnung-liste { position: absolute; z-index: 20; right: 0; bottom: calc(100% + 4px); left: 0; max-height: 240px; padding: 4px; overflow-y: auto; background: var(--pm-modal); border: 1px solid var(--pm-rand); border-radius: 10px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25); }
.pm-hell .pm-erwaehnung-liste[hidden] { display: none; }
.pm-hell .pm-erwaehnung-punkt { display: flex; align-items: center; gap: 10px; box-sizing: border-box; width: 100%; min-height: 44px; margin: 0; padding: 0 10px; background: transparent; border: 0; border-radius: 8px; color: var(--text); font-size: 15px; text-align: left; cursor: pointer; }
.pm-hell .pm-erwaehnung-punkt:hover, .pm-hell .pm-erwaehnung-punkt.on { background: var(--pm-blau-hell); }
.pm-hell .pm-erwaehnung-hinweis { margin: 6px 0 0; font-size: 12px; }
.pm-hell .pm-erwaehnung { padding: 0 3px; background: var(--pm-blau-hell); border-radius: 4px; color: var(--pm-blau-text); font-weight: 600; }

/* Projekte: Ansicht "Meeting" (Aufnahme -> Aufgaben). Nur Klassen, kein style="". */
.pm-hidden { display: none !important; }
.pm-mt { display: grid; gap: 16px; max-width: 720px; margin: 0 auto; padding: 16px 16px 32px; box-sizing: border-box; min-width: 0; }
.pm-mt-karte { background: var(--pm-karte, #fff); border: 1px solid var(--pm-rand, #e2e2e2); border-radius: 12px; padding: 16px; min-width: 0; }
.pm-mt-titel { margin: 0 0 8px; font-size: 18px; font-weight: 600; color: var(--text); }
.pm-mt-hinweis { margin: 0 0 12px; font-size: 14px; line-height: 1.45; color: var(--pm-gedaempft, #6d6e6f); }
.pm-mt-zone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; box-sizing: border-box; min-height: 120px; margin: 0 0 12px; padding: 16px; border: 2px dashed var(--pm-rand, #c9c9c9); border-radius: 12px; text-align: center; cursor: pointer; overflow-wrap: anywhere; -webkit-tap-highlight-color: transparent; }
.pm-mt-zone:hover, .pm-mt-zone-drag { border-color: var(--pm-blau, #4573d2); background: var(--pm-hover, #f4f4f4); }
.pm-mt-zone-aus { opacity: 0.6; cursor: default; }
.pm-mt-zone-text { font-size: 16px; font-weight: 600; color: var(--text); }
.pm-mt-zone-info { font-size: 13px; color: var(--pm-gedaempft, #6d6e6f); }
.pm-mt-datei { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.pm-mt-datei:focus-visible + * , .pm-mt-zone:focus-within { outline: 2px solid var(--pm-blau, #4573d2); outline-offset: 2px; }
.pm-mt-zeile { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; min-height: 44px; }
.pm-mt-label { font-size: 14px; color: var(--text); }
.pm-mt-check input { width: 24px; height: 24px; margin: 0; }
.pm-mt-aktionen { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.pm-mt-balken { display: block; width: 100%; height: 10px; margin: 0 0 8px; accent-color: var(--pm-blau, #4573d2); }
.pm-mt-status { margin: 0 0 8px; min-height: 20px; font-size: 14px; color: var(--text); }
.pm-mt-fehler { margin: 0 0 8px; padding: 10px 12px; border: 1px solid var(--pm-rot, #c62828); border-radius: 8px; font-size: 14px; line-height: 1.45; color: var(--pm-rot, #c62828); }
.pm-mt-erfolg { margin: 0 0 8px; font-size: 20px; font-weight: 600; color: var(--pm-gruen, #2e7d32); }
.pm-mt-aufgaben, .pm-mt-liste { margin: 0; padding: 0 0 0 20px; font-size: 14px; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
.pm-mt-leer { list-style: none; margin-left: -20px; color: var(--pm-gedaempft, #6d6e6f); }
.pm-mt-spuren { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.pm-mt-spur { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; align-items: center; padding: 10px 12px; border: 1px solid var(--pm-rand, #e2e2e2); border-radius: 10px; min-width: 0; }
.pm-mt-spur-offen { border-color: var(--pm-blau, #4573d2); }
.pm-mt-spur-name { font-size: 14px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; min-width: 0; }
.pm-mt-spur-groesse { font-size: 12px; color: var(--pm-gedaempft, #6d6e6f); justify-self: end; }
.pm-mt-wer { grid-column: 1 / 2; width: 100%; min-height: 44px; min-width: 0; box-sizing: border-box; }
.pm-mt-weg { grid-column: 2 / 3; min-height: 44px; }
.pm-hell .pm-erwaehnung-liste.pm-erwaehnung-unten { top: calc(100% + 4px); bottom: auto; }

/* Lift der Woche: Ergebnis-Pop-up (Montag, einmalig) */
.lift-fenster .lift-fenster-innen.le-popup {
  display: flex; flex-direction: column; gap: 10px; box-sizing: border-box;
  width: calc(100% - 24px); max-width: 460px; max-height: calc(100dvh - 46px - env(safe-area-inset-bottom));
  margin: 0 0 calc(12px + env(safe-area-inset-bottom));
  padding: 12px; overflow-x: hidden; overflow-y: auto;
  background: var(--s-0, #070905); border: 2px solid #f2a900; color: var(--c-prim, #efeee6); font-family: Oswald, sans-serif;
  transform: none; opacity: 1; transition: none;
  animation: dfqPop .6s ease-out both, dfqGlow 2s ease-in-out .6s infinite;
}
.le-popup button, .le-popup a { font-family: Oswald, sans-serif; }
.le-sieger { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 14px 10px; background: rgba(242, 169, 0, .12); border: 1px solid #f2a900; overflow-wrap: anywhere; }
.le-sieger > span { color: var(--gold-text, #f2a900); font: 400 12px "Share Tech Mono", monospace; letter-spacing: .14em; }
.le-sieger strong { font: 400 28px/1.1 "Black Ops One", Oswald, sans-serif; color: var(--gold-text, #f2a900); animation: dfqBoom .6s ease-out .3s both; }
.le-sieger small, .le-platz small { font: 400 12px "Share Tech Mono", monospace; color: var(--c-sek, #b9bdac); letter-spacing: .06em; }
.le-link { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 14px; background: #545a2c; color: var(--c-prim, #efeee6); border: 1px solid #f2a900; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-decoration: none; }
.le-podest { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.le-platz { display: grid; gap: 4px; align-content: start; padding: 10px; background: var(--s-0, #0c0e09); border: 1px solid var(--b-1, #2b3025); min-width: 0; overflow-wrap: anywhere; }
.le-platz b { color: var(--gold-text, #f2a900); font: 400 11px "Share Tech Mono", monospace; letter-spacing: .1em; }
.le-platz strong { font: 600 17px/1.2 Oswald, sans-serif; }
.le-platz .le-link { min-height: 36px; font-size: 12px; padding: 0 8px; }
.le-liste { margin: 0; padding: 0 12px 0 28px; max-height: 160px; overflow-y: auto; font-size: 14px; }
.le-liste li { padding: 4px 0; }
.le-liste li > span, .le-liste li > small { vertical-align: baseline; }
.le-liste li::marker { color: var(--c-sek, #b9bdac); }
.le-liste li span { overflow-wrap: anywhere; }
.le-liste li small { float: right; margin-left: 8px; padding-right: 4px; color: var(--c-sek, #b9bdac); font: 400 12px "Share Tech Mono", monospace; }
.le-dein { text-align: center; color: var(--gold-text, #f2a900); font-size: 15px; letter-spacing: .03em; }
.le-weiter { flex: none; height: 46px; min-height: 0; padding: 0; font-size: 15px; letter-spacing: .08em; cursor: pointer; background: #f2a900; color: #000; border: 1px solid #f2a900; font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
  .lift-fenster .lift-fenster-innen.le-popup { animation: none; box-shadow: 0 0 0 1px #f2a900, 0 0 18px 2px rgba(242, 169, 0, .45); }
  .le-sieger strong { animation: none; }
}

/* Ergebnis-Pop-up: Podest mit Emblemen, Pokal beim Sieger. */
.le-pokal { font-size: 40px; line-height: 1; animation: dfqBoom .7s ease-out .2s both; filter: drop-shadow(0 0 10px rgba(242, 169, 0, .6)); }
.le-emblem { display: block; width: 130px; max-width: 60%; height: auto; margin: 4px auto 2px; animation: dfqBoom .8s ease-out .5s both; filter: drop-shadow(0 0 12px rgba(242, 169, 0, .45)); }
.le-emblem.klein { width: 76px; animation: none; filter: none; }
.le-sieger small, .le-platz small { color: var(--gold-text, #f2a900); font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .le-pokal, .le-emblem { animation: none; } }
.pm-mt-reiter-leiste { display: flex; gap: 8px; }
.pm-mt-reiter { flex: 1 1 0; min-height: 44px; padding: 8px 12px; border: 1px solid var(--pm-rand, #c9c9c9); border-radius: 10px; background: transparent; color: var(--text); font-size: 15px; font-weight: 600; cursor: pointer; }
.pm-mt-reiter-an { background: var(--olive); border-color: var(--olive-lit); color: #fff; }
.pm-mt-text { display: block; width: 100%; min-height: 160px; margin: 4px 0 12px; box-sizing: border-box; resize: vertical; font: inherit; font-size: 16px; line-height: 1.45; }

.pm-mt-recbox { margin: 0 0 12px; }
.pm-mt-rec { min-height: 44px; }
.pm-mt-rec-an { background: #c0392b; border-color: #c0392b; color: #fff; }
.pm-hell .pm-btn.pm-mt-rec-an { background: #c0392b; border-color: #c0392b; color: #fff; }
.pm-mt-rec-zeit { align-self: center; font-variant-numeric: tabular-nums; color: #c0392b; font-weight: 600; }
.pm-mt-unter { font-size: 1rem; margin: 16px 0 6px; }
.pm-mt-zusammen { white-space: pre-line; line-height: 1.5; margin: 0 0 12px; }
/* Karten in der scrollenden Spalte nie zusammendruecken (sonst ueberlappen lange Titel) */
.pm-karten > .pm-karte { flex: none; }

/* ── CRM › Mitglieder (Admin) ───────────────────────────────────────────────
   Kennzahlen, Filterleiste, Tabelle und Detail-Panel. Alle Klassen tragen das
   Praefix adm-. Handy und Tablet: Karten, das Panel oeffnet als Blatt von
   unten. Ab 1024 px: Tabelle und Panel nebeneinander. */
.adm-kicker {
  display: block;
  margin-bottom: 2px;
  font-family: Oswald, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.adm-kacheln {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.adm-kachel {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.adm-kachel:hover { border-color: var(--gold-dim); }
.adm-kachel.on { border-color: var(--gold); }
.adm-kachel-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  background: var(--panel-2);
  color: var(--text-body);
}
.adm-kachel-icon svg { width: 24px; height: 24px; }
.adm-kachel-aktiv .adm-kachel-icon { background: var(--adm-ok-bg, rgba(88, 194, 106, 0.14)); color: var(--adm-ok-punkt, #58c26a); }
.adm-kachel-handlung .adm-kachel-icon { background: rgba(242, 169, 0, 0.14); color: var(--gold-text, var(--gold)); }
.adm-kachel-text { min-width: 0; }
.adm-kachel-text > span {
  display: block;
  font-family: Oswald, sans-serif;
  font-size: 13px;
  line-height: 1.2;
  color: var(--text-body);
}
.adm-kachel-text strong {
  display: block;
  font-family: Oswald, sans-serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.adm-filterleiste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.adm-suche {
  position: relative;
  display: block;
  grid-column: 1 / -1;
}
.adm-suche-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  color: var(--text-dim);
  pointer-events: none;
}
.adm-suche-icon svg { display: block; width: 20px; height: 20px; }
.adm-suche .inp {
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding-left: 44px;
  text-transform: none;
}
.adm-auswahl {
  display: block;
  position: relative;
  min-width: 0;
}
.adm-auswahl > span {
  position: absolute;
  left: 14px;
  top: 8px;
  font-family: Oswald, sans-serif;
  font-size: 12px;
  color: var(--text-dim);
  pointer-events: none;
}
.adm-auswahl .inp {
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 22px 12px 4px 14px;
  text-transform: none;
}
.adm-reset {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  margin: 0;
}
.adm-reset svg { width: 18px; height: 18px; flex: none; }
.adm-reset:disabled { opacity: 0.5; cursor: default; }

.adm-crm-raster { display: block; }
.adm-mtab { min-width: 0; }
.adm-mtab-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 4px;
  font-family: Oswald, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.adm-mtab-kopf > :nth-child(2),
.adm-mtab-kopf > :nth-child(3),
.adm-mtab-kopf > :nth-child(5),
.adm-mtab-kopf > :nth-child(6) { display: none; }
.adm-mtab-kopf button {
  min-height: 44px;
  padding: 0 8px;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  white-space: nowrap;
  cursor: pointer;
}
.adm-mtab-kopf button.on { color: var(--gold-text, var(--gold)); }
.adm-mtab-kopf button i { font-style: normal; }
.adm-mrow {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name menue" "status coins" "wann zugang";
  align-items: center;
  gap: 6px 12px;
  margin-bottom: 6px;
  padding: 12px 8px 12px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text);
  cursor: pointer;
}
.adm-mrow:hover { border-color: var(--gold-dim); }
.adm-mrow.gewaehlt { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.adm-mrow:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.adm-m-name { grid-area: name; display: flex; align-items: center; gap: 12px; min-width: 0; }
.adm-m-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 50%;
  font-family: Oswald, sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}
.adm-m-avatar.gross { width: 72px; height: 72px; font-size: 30px; }
.adm-m-text { min-width: 0; }
.adm-m-text strong {
  display: block;
  overflow: hidden;
  font-family: Oswald, sans-serif;
  font-size: 17px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adm-m-text small,
.adm-detail-person small {
  display: block;
  overflow: hidden;
  font-family: Oswald, sans-serif;
  font-size: 14px;
  color: var(--text-dim);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adm-m-status { grid-area: status; min-width: 0; }
.adm-m-wann,
.adm-m-zugang,
.adm-m-coins {
  font-family: Oswald, sans-serif;
  font-size: 14px;
  color: var(--text-body);
}
.adm-m-wann { grid-area: wann; }
.adm-m-wann em,
.adm-m-coins em {
  margin-right: 6px;
  font-style: normal;
  color: var(--text-dim);
}
.adm-m-coins { grid-area: coins; text-align: right; }
.adm-m-coins strong { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); }
.adm-m-zugang { grid-area: zugang; text-align: right; white-space: nowrap; }
.adm-m-menue { grid-area: menue; position: relative; }
.adm-punkte {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  color: var(--text-body);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.adm-punkte:hover { color: var(--gold-text, var(--gold)); }
.adm-menue {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 30;
  display: grid;
  min-width: 220px;
  padding: 4px;
  background: var(--panel-2);
  border: 1px solid var(--gold-dim);
  box-shadow: 0 12px 28px var(--adm-schatten, rgba(0, 0, 0, 0.55));
}
.adm-menue button {
  min-height: 44px;
  padding: 0 12px;
  background: transparent;
  border: 0;
  color: var(--text);
  font-family: Oswald, sans-serif;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}
.adm-menue button:hover { background: var(--panel); }
.adm-menue button.gefahr { color: var(--adm-rot-text, #ff7d6e); }

.adm-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 10px;
  border: 1px solid var(--line);
  background: var(--adm-grau-bg, rgba(255, 255, 255, 0.04));
  font-family: Oswald, sans-serif;
  font-size: 13px;
  line-height: 1.3;
  color: var(--text-body);
  white-space: nowrap;
}
.adm-punkt-klein,
.adm-zugang-punkt {
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-dim);
}
.adm-zugang-punkt { margin-right: 8px; }
.adm-chip-aktiv { border-color: var(--adm-ok-rand, #2f7a3c); background: var(--adm-ok-bg, rgba(88, 194, 106, 0.12)); color: var(--adm-ok-text, #7ddc8d); }
.adm-chip-aktiv .adm-punkt-klein { background: var(--adm-ok-punkt, #58c26a); }
.adm-chip-handlung { border-color: var(--gold-dim); background: rgba(242, 169, 0, 0.12); color: var(--gold-text, var(--gold-lit)); }
.adm-chip-handlung .adm-punkt-klein { background: var(--gold); }
.adm-zugang-login { background: var(--adm-ok-punkt, #58c26a); }
.adm-zugang-gesperrt { background: var(--adm-rot-text, #ff7d6e); }

/* Detail-Panel: am Handy ein Blatt von unten, ab 1024 px eine feste Spalte. */
.adm-detail { display: none; }
.adm-detail.offen {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: block;
  max-height: 88vh;
  overflow-y: auto;
  padding: 16px;
  background: var(--panel);
  border-top: 1px solid var(--gold-dim);
  box-shadow: 0 0 0 100vmax var(--adm-schleier, rgba(0, 0, 0, 0.6));
}
.adm-detail-leer {
  padding: 16px;
  font-family: Oswald, sans-serif;
  font-size: 15px;
  color: var(--text-dim);
}
.adm-detail-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.adm-detail-kopf h2 {
  margin: 0;
  font-family: Oswald, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--text-body);
}
.adm-detail-zu {
  width: 44px;
  height: 44px;
  margin-right: -10px;
  background: transparent;
  border: 0;
  color: var(--text-body);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.adm-detail-zu:hover { color: var(--gold-text, var(--gold)); }
.adm-detail-person {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.adm-detail-person > div { min-width: 0; }
.adm-detail-person strong {
  display: block;
  overflow: hidden;
  font-family: Oswald, sans-serif;
  font-size: 22px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adm-detail-person .adm-chip { margin-top: 8px; }
.adm-detail-person .adm-detail-grund { margin-top: 6px; white-space: normal; }
.adm-detail-werte { margin: 0; padding: 8px 0 12px; }
.adm-detail-werte > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
}
.adm-detail-werte dt { font-family: Oswald, sans-serif; font-size: 14px; color: var(--text-dim); }
.adm-detail-werte dd {
  display: flex;
  align-items: center;
  margin: 0;
  font-family: Oswald, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.adm-detail-aktionen { display: grid; gap: 8px; }
.adm-insta { display: grid; gap: 8px; margin-top: 16px; }
.adm-insta h3 { margin: 0; font-size: 12px; letter-spacing: 0.08em; }
.adm-insta-hinweis, .adm-insta-feld { margin: 0; font-size: 13px; opacity: 0.8; }
.adm-aktion {
  min-height: 48px;
  padding: 0 14px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text);
  font-family: Oswald, sans-serif;
  font-size: 15px;
  cursor: pointer;
}
.adm-aktion:hover { border-color: var(--gold-dim); background: var(--panel-2); }
.adm-aktion.primaer { background: var(--gold); border-color: var(--gold); color: #14110a; font-weight: 600; }
.adm-aktion.primaer:hover { background: var(--gold-lit); }
.adm-aktion.gefahr { border-color: var(--adm-rot-rand, #8f3a30); color: var(--adm-rot-text, #ff7d6e); background: var(--adm-rot-bg, rgba(255, 90, 70, 0.06)); }
.adm-aktion.gefahr:hover { background: var(--adm-rot-bg2, rgba(255, 90, 70, 0.14)); }

@media (min-width: 700px) {
  .adm-kacheln { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .adm-filterleiste { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
  .adm-reset { grid-column: auto; }
  .adm-suche { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .adm-filterleiste { grid-template-columns: minmax(200px, 2.2fr) minmax(130px, 1fr) minmax(130px, 1fr) auto; }
  .adm-suche { grid-column: auto; }
  .adm-reset { padding-inline: 16px; }
  .adm-crm-raster {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 16px;
    align-items: start;
  }
  .adm-mtab { background: var(--panel); border: 1px solid var(--line); }
  .adm-mtab-kopf { padding: 0 8px 0 16px; border-bottom: 1px solid var(--line); }
  .adm-mrow {
    grid-template-columns: minmax(0, 1fr) auto 44px;
    grid-template-areas: "name status menue" "wann coins menue";
    gap: 4px 12px;
  }
  .adm-m-zugang { display: none; }
  .adm-m-menue { align-self: center; }
  .adm-mrow {
    margin: 0;
    border: 1px solid transparent;
    border-bottom-color: var(--line);
    background: transparent;
  }
  .adm-mrow:hover { background: var(--adm-hover, rgba(255, 255, 255, 0.03)); border-color: transparent; border-bottom-color: var(--line); }
  .adm-mrow.gewaehlt { background: rgba(242, 169, 0, 0.06); border-color: var(--gold); box-shadow: none; }
  .adm-detail,
  .adm-detail.offen {
    position: sticky;
    top: 16px;
    z-index: auto;
    display: block;
    max-height: calc(100vh - 32px);
    padding: 16px;
    background: var(--panel);
    border: 1px solid var(--line);
    box-shadow: none;
  }
  .adm-detail-leer { padding: 8px 0; }
}
@media (min-width: 1280px) {
  .adm-crm-raster { grid-template-columns: minmax(0, 1fr) 320px; }
  .adm-mtab-kopf > :nth-child(2),
  .adm-mtab-kopf > :nth-child(3),
  .adm-mtab-kopf > :nth-child(5),
  .adm-mtab-kopf > :nth-child(6) { display: block; }
  .adm-mtab-kopf,
  .adm-mrow {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) 160px 130px 90px 130px 44px;
    grid-template-areas: "name status wann coins zugang menue";
    gap: 12px;
    align-items: center;
  }
  .adm-mtab-kopf { min-height: 48px; }
  .adm-m-zugang { display: block; text-align: left; }
  .adm-m-wann em,
  .adm-m-coins em { display: none; }
  .adm-m-coins { text-align: left; }
  .adm-m-wann { color: var(--text); }
}

/* Feinschliff Mitglieder: Auswahlfelder mit eigenem Pfeil, Spaltenkoepfe ohne Umbruch */
#app .adm-filterleiste .adm-auswahl select.inp {
  height: 52px;
  padding: 22px 36px 2px 14px;
  border: 1px solid var(--line);
  border-radius: 0;
  background-color: var(--panel);
  background-image: linear-gradient(45deg, transparent 50%, var(--text-body) 50%), linear-gradient(135deg, var(--text-body) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  color: var(--text);
  font: 15px Oswald, sans-serif;
  -webkit-appearance: none;
  appearance: none;
}
#app .adm-filterleiste .adm-suche input.inp {
  height: 52px;
  padding: 0 12px 0 44px;
  border: 1px solid var(--line);
  border-radius: 0;
  background-color: var(--panel);
  color: var(--text);
  font: 15px Oswald, sans-serif;
}
.adm-mtab-kopf button { white-space: nowrap; }
.adm-reset span { font-size: 14px; }

/* ── Admin: gemeinsames Design fuer alle Unterseiten ─────────────────────────
   Gleicher Look wie CRM > Mitglieder: flache dunkle Flaechen, Gold nur als
   Akzent. Bausteine (Kachel, Chip, Karte, Tafel, Reihe) tragen das Praefix
   adm-. Die allgemeinen Regeln unten gelten nur im Admin-Bereich und nicht
   fuer Projekte (eigenes Design, erkennbar an .pm-wurzel). */

/* Status-Chips: gruen = ok/aktiv, gelb = Handlungsbedarf/offen,
   grau = archiviert/erledigt, rot = Problem. */
.adm-chip-ok { border-color: var(--adm-ok-rand, #2f7a3c); background: var(--adm-ok-bg, rgba(88, 194, 106, 0.12)); color: var(--adm-ok-text, #7ddc8d); }
.adm-chip-ok .adm-punkt-klein { background: var(--adm-ok-punkt, #58c26a); }
.adm-chip-warn { border-color: var(--gold-dim); background: rgba(242, 169, 0, 0.12); color: var(--gold-text, var(--gold-lit)); }
.adm-chip-warn .adm-punkt-klein { background: var(--gold); }
.adm-chip-grau { border-color: var(--line); background: var(--adm-grau-bg, rgba(255, 255, 255, 0.04)); color: var(--text-body); }
.adm-chip-rot { border-color: var(--adm-rot-rand, #8f3a30); background: var(--adm-rot-bg, rgba(255, 90, 70, 0.1)); color: var(--adm-rot-text, #ff9a8c); }
.adm-chip-rot .adm-punkt-klein { background: var(--adm-rot-punkt, #ff6a58); }
.adm-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }

/* Kennzahl-Kacheln (auch ohne Klick) */
.adm-kachel.statisch { cursor: default; }
.adm-kachel.statisch:hover { border-color: var(--line); }
.adm-kachel-rot .adm-kachel-icon { background: var(--adm-rot-bg2, rgba(255, 90, 70, 0.14)); color: var(--adm-rot-text, #ff7d6e); }
.adm-kachel-grau .adm-kachel-icon { background: var(--panel-2); color: var(--text-dim); }
.adm-kachel-text > span { font-size: 14px; }
.adm-kachel-text small { display: block; font-family: Oswald, sans-serif; font-size: 12px; color: var(--text-dim); }
@media (min-width: 700px) {
  .adm-kacheln.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .adm-kacheln.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Karte mit Abschnittstitel (Formulare, Einstellungen, Listen) */
.adm-karte {
  margin: 0 0 16px;
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
}
.adm-karte-titel {
  margin: 0 0 4px;
  font-family: Oswald, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-text, var(--gold));
}
.adm-karte-text { margin: 0 0 12px; font-family: Oswald, sans-serif; font-size: 14px; color: var(--text-body); }
.adm-zwei { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 1024px) {
  .adm-zwei { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .adm-zwei.links-schmal { grid-template-columns: 380px minmax(0, 1fr); }
}

/* Tafel: Tabelle am Rechner, Karten am Handy */
.adm-tafel { min-width: 0; margin-bottom: 16px; background: var(--panel); border: 1px solid var(--line); }
.adm-tafel-titel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  font-family: Oswald, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-text, var(--gold));
}
.adm-tafel-titel small { font-size: 12px; font-weight: 400; letter-spacing: 0.06em; color: var(--text-dim); text-transform: none; }
.adm-tafel-kopf {
  display: none;
  padding: 0 16px;
  min-height: 44px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  font-family: Oswald, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.adm-reihe {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px 16px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
}
.adm-reihe:last-child { border-bottom: 0; }
button.adm-reihe { cursor: pointer; text-align: left; width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line); font: inherit; }
button.adm-reihe:hover { background: var(--adm-hover, rgba(255, 255, 255, 0.03)); }
.adm-reihe.gewaehlt { background: rgba(242, 169, 0, 0.06); box-shadow: inset 0 0 0 1px var(--gold); }
.adm-reihe-haupt { display: flex; align-items: center; gap: 12px; min-width: 0; }
.adm-reihe-text { min-width: 0; flex: 1 1 auto; }
.adm-reihe-text strong {
  display: block;
  font-family: Oswald, sans-serif;
  font-size: 17px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.adm-reihe-text small,
.adm-reihe-text > div {
  display: block;
  margin-top: 2px;
  font-family: Oswald, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-body);
  overflow-wrap: anywhere;
}
.adm-reihe-text small { color: var(--text-dim); }
.adm-reihe-text .adm-warn { color: var(--adm-rot-text, #ff9a8c); }
.adm-reihe-zahl { font-family: Oswald, sans-serif; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.adm-reihe-zahl.plus { color: var(--gold-text, var(--gold)); }
.adm-reihe-zahl small { display: block; font-size: 11px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }
.adm-reihe-aktionen { display: flex; flex-wrap: wrap; gap: 8px; }
.adm-reihe-medien { grid-column: 1 / -1; display: grid; gap: 10px; min-width: 0; }
.adm-reihe-medien .anfrage-post { width: 100%; max-width: 540px; border: 1px solid var(--line); background: var(--s-0, #000); }
.adm-reihe-medien img { max-width: 100%; max-height: 360px; object-fit: contain; justify-self: start; border: 1px solid var(--line); }
.adm-reihe-medien .history-photo-slot { margin: 0; }
.adm-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 50%;
  font-family: Oswald, sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}
.adm-leer {
  padding: 28px 16px;
  text-align: center;
  font-family: Oswald, sans-serif;
  font-size: 15px;
  color: var(--text-dim);
}
/* Die Tafel entscheidet selbst, ab wann sie als Tabelle zeigt: nach ihrer
   eigenen Breite, nicht nach der des Fensters (sie steht auch in Spalten). */
.adm-tafel { container-type: inline-size; }
@container (min-width: 680px) {
  .adm-tafel-kopf.spalten-2,
  .adm-tafel-kopf.spalten-3 { display: grid; }
  .adm-tafel-kopf.spalten-3,
  .adm-reihe.spalten-3 { grid-template-columns: minmax(0, 1fr) 170px 250px; gap: 12px; }
  .adm-tafel.breit .adm-tafel-kopf.spalten-3,
  .adm-tafel.breit .adm-reihe.spalten-3 { grid-template-columns: minmax(0, 1fr) 170px 330px; }
  .adm-tafel-kopf.spalten-2,
  .adm-reihe.spalten-2 { grid-template-columns: minmax(0, 1fr) auto; gap: 16px; }
  .adm-reihe.spalten-2 .adm-reihe-aktionen,
  .adm-reihe.spalten-3 .adm-reihe-aktionen { justify-content: flex-end; flex-wrap: nowrap; }
  .adm-tafel-kopf span:last-child { text-align: right; }
  .adm-tafel-kopf span:nth-child(2),
  .adm-tafel-kopf span:nth-child(3) { text-align: left; }
  .adm-reihe.spalten-3 .adm-chips:empty,
  .adm-reihe.spalten-3 .adm-reihe-aktionen:empty { display: block; }
}
@container (min-width: 820px) {
  .adm-tafel-kopf.spalten-4 { display: grid; }
  .adm-tafel-kopf.spalten-4,
  .adm-reihe.spalten-4 { grid-template-columns: minmax(0, 1fr) 150px 100px 264px; gap: 12px; }
  .adm-reihe.spalten-4 .adm-reihe-aktionen { justify-content: flex-end; flex-wrap: nowrap; }
}

/* ── Allgemeine Elemente im Admin-Bereich ───────────────────────────────── */
/* Buttons: primaer gold, sekundaer dunkel mit Rand, gefaehrlich rot umrandet */
#app[data-bereich="admin"] #content:not(:has(.pm-wurzel)) :is(.button, .btn):where(:not(.cfg-neu):not(.tab)) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--gold);
  border-image: none;
  border-radius: 0;
  background: var(--gold);
  box-shadow: none;
  font-family: Oswald, sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: #14110a;
  text-shadow: none;
  filter: none;
  cursor: pointer;
}
#app[data-bereich="admin"] #content:not(:has(.pm-wurzel)) :is(.button, .btn):where(:not(.cfg-neu):not(.tab)):hover { background: var(--gold-lit); border-color: var(--gold-lit); filter: none; }
#app[data-bereich="admin"] #content:not(:has(.pm-wurzel)) :is(.button.secondary, .btn.ghost, .btn.quiet, .button.ghost) {
  background: transparent;
  border-color: var(--line);
  color: var(--text);
  font-weight: 500;
}
#app[data-bereich="admin"] #content:not(:has(.pm-wurzel)) :is(.button.secondary, .btn.ghost, .btn.quiet, .button.ghost):hover { background: var(--panel-2); border-color: var(--gold-dim); }
#app[data-bereich="admin"] #content:not(:has(.pm-wurzel)) :is(.button.danger, .btn.danger-ghost, .btn.danger) {
  background: var(--adm-rot-bg, rgba(255, 90, 70, 0.06));
  border-color: var(--adm-rot-rand, #8f3a30);
  color: var(--adm-rot-text, #ff7d6e);
  font-weight: 500;
}
#app[data-bereich="admin"] #content:not(:has(.pm-wurzel)) :is(.button.danger, .btn.danger-ghost, .btn.danger):hover { background: var(--adm-rot-bg2, rgba(255, 90, 70, 0.14)); border-color: var(--adm-rot-rand, #b4473a); }
#app[data-bereich="admin"] #content:not(:has(.pm-wurzel)) :is(.button.small, .btn.small, .btn.klein) { min-height: 44px; padding: 0 14px; font-size: 14px; }
#app[data-bereich="admin"] #content:not(:has(.pm-wurzel)) :is(.button, .btn):disabled { opacity: 0.5; cursor: default; }
#app[data-bereich="admin"] #content:not(:has(.pm-wurzel)) .adm-kopf-aktionen :is(.button, .btn) { width: auto; margin: 0; }
#app[data-bereich="admin"] #content:not(:has(.pm-wurzel)) .adm-reihe-aktionen :is(.button, .btn) { width: auto; margin: 0; }
#app[data-bereich="admin"] #content:not(:has(.pm-wurzel)) .adm-kopf .back { background: transparent; border-color: var(--line); color: var(--text); font-weight: 500; }
@media (min-width: 1024px) {
  #app[data-bereich="admin"] #content:not(:has(.pm-wurzel)) .adm-kopf > .back:not(.adm-immer) { display: none; }
}

/* Karten und Platten ohne Rahmenbild */
#app[data-bereich="admin"] #content:not(:has(.pm-wurzel)) :is(.card, .panel, .coach-panel) {
  border: 1px solid var(--line);
  border-image: none;
  border-radius: 0;
  background: var(--panel);
  box-shadow: none;
  padding: 16px;
  margin: 0 0 12px;
}
#app[data-bereich="admin"] #content:not(:has(.pm-wurzel)) .card + .card { margin-top: 0; }
#app[data-bereich="admin"] #content:not(:has(.pm-wurzel)) :is(.card, .panel) :is(.card, .panel) { background: var(--panel-2); }

/* Ueberschriften: Seitentitel gross, Abschnitte klein in Gold */
#app[data-bereich="admin"] #content:not(:has(.pm-wurzel)) .section-title {
  display: block;
  min-height: 0;
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  text-shadow: none;
  font-family: Oswald, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-text, var(--gold));
}
#app[data-bereich="admin"] #content:not(:has(.pm-wurzel)) h1.section-title {
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--text);
}
#app[data-bereich="admin"] #content:not(:has(.pm-wurzel)) .section-title::after,
#app[data-bereich="admin"] #content:not(:has(.pm-wurzel)) .section-title::before { content: none; display: none; }
#app[data-bereich="admin"] #content:not(:has(.pm-wurzel)) .eyebrow-rule { display: none; }
#app[data-bereich="admin"] #content:not(:has(.pm-wurzel)) :is(.empty, .loading) {
  padding: 28px 16px;
  border: 1px solid var(--line);
  border-image: none;
  background: var(--panel);
  font-family: Oswald, sans-serif;
  font-size: 15px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  color: var(--text-dim);
}
#app[data-bereich="admin"] #content:not(:has(.pm-wurzel)) .adm-tafel .adm-leer { border: 0; }
#app[data-bereich="admin"] #content:not(:has(.pm-wurzel)) :is(.notice, .coach-hinweis) {
  font-family: Oswald, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-body);
  text-transform: none;
  letter-spacing: normal;
}

/* Formularfelder: beschriftet, flach, gleiche Hoehe wie die Filterleiste */
#app[data-bereich="admin"] #content:not(:has(.pm-wurzel)) .field { margin: 0 0 12px; }
#app[data-bereich="admin"] #content:not(:has(.pm-wurzel)) .field label {
  display: block;
  margin: 0 0 4px;
  font-family: Oswald, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
#app[data-bereich="admin"] #content:not(:has(.pm-wurzel)) :is(input.inp, select.inp, textarea.inp) {
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-image: none;
  border-radius: 0;
  background-color: var(--panel-2);
  box-shadow: none;
  font: 15px Oswald, sans-serif;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text);
}
#app[data-bereich="admin"] #content:not(:has(.pm-wurzel)) :is(input.inp, select.inp, textarea.inp):focus { border-color: var(--gold); outline: 0; }
#app[data-bereich="admin"] #content:not(:has(.pm-wurzel)) select.inp {
  padding-right: 36px;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-body) 50%), linear-gradient(135deg, var(--text-body) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  -webkit-appearance: none;
  appearance: none;
}
/* Suche und Filter-Chips (Pruefen, Protokoll) */
#app[data-bereich="admin"] #content:not(:has(.pm-wurzel)) .adm-werkzeuge { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 12px; }
#app[data-bereich="admin"] #content:not(:has(.pm-wurzel)) .adm-werkzeuge .adm-suche { grid-column: auto; }
#app[data-bereich="admin"] #content:not(:has(.pm-wurzel)) .adm-suche input.inp { height: 52px; padding: 0 12px 0 44px; background-color: var(--panel); }
#app[data-bereich="admin"] #content:not(:has(.pm-wurzel)) :is(.chip, .history-chip) {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-image: none;
  border-radius: 0;
  background: var(--panel);
  font-family: Oswald, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--text-body);
  cursor: pointer;
}
#app[data-bereich="admin"] #content:not(:has(.pm-wurzel)) :is(.chip.on, .history-chip.on) { border-color: var(--gold); background: rgba(242, 169, 0, 0.1); color: var(--gold-text, var(--gold-lit)); box-shadow: none; }
#app[data-bereich="admin"] #content:not(:has(.pm-wurzel)) .history-kategorie-block { margin: 0 0 12px; }
#app[data-bereich="admin"] #content:not(:has(.pm-wurzel)) .history-kategorie-block > span { display: block; margin-bottom: 6px; font-family: Oswald, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); }
#app[data-bereich="admin"] #content:not(:has(.pm-wurzel)) :is(.history-kategorien, .filter-bar) { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }

/* Dialoge im Admin (Wochenreport, Protokoll-Details, Bausteine) */
.adm-modal-innen,
.bs-dialog { background: var(--panel); border: 1px solid var(--gold-dim); border-radius: 0; }
.adm-modal-fuss { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* Mitglieder-Seite: dieselben flachen Buttons */
#app[data-bereich="admin"] .adm-reset { background: transparent; border: 1px solid var(--line); color: var(--text); font-weight: 500; }

/* Reihen: leere Spalten am Handy ausblenden, am Rechner als Platzhalter halten */
.adm-reihe[hidden] { display: none; }
.adm-chips:empty,
.adm-reihe-aktionen:empty,
.adm-reihe-zahl:empty { display: none; }
.adm-kacheln.n5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) {
  .adm-kacheln.n5 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
}
.adm-kacheln:not(.n1):not(.n2):not(.n3):not(.n4):not(.n5) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.adm-kacheln.n1 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) {
  .adm-kacheln.n1 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .adm-kacheln.n1 > :only-child { grid-column: 1; }
}
.risk-no-phone { font-family: Oswald, sans-serif; font-size: 13px; color: var(--text-dim); align-self: center; }

.pruefen-entry .adm-reihe-zahl,
.adm-reihe-zahl.plus { color: var(--gold-text, var(--gold)); }

/* ── Feinschliff der Admin-Unterseiten ───────────────────────────────────── */
.adm-karte-titel + form,
.adm-karte-titel + .field { margin-top: 12px; }
.adm-reihe-text > div.week-history-members { display: flex; }
.adm-karte-titel { margin-bottom: 12px; }
.adm-karte .button:not(.small) { width: 100%; }
#app[data-bereich="admin"] #content:not(:has(.pm-wurzel)) .adm-karte form .button { width: 100%; }
#app[data-bereich="admin"] #content:not(:has(.pm-wurzel)) .adm-karte .notice { margin: 10px 0 0; }

/* Instagram-Link in Anfragen */
#app[data-bereich="admin"] #content:not(:has(.pm-wurzel)) .anfrage-link {
  justify-content: flex-start;
  width: fit-content;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  font-family: Oswald, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--gold-text, var(--gold-lit));
}
#app[data-bereich="admin"] #content:not(:has(.pm-wurzel)) .anfrage-link:hover { border-color: var(--gold-dim); background: var(--panel-2); }

/* Kontrollzentrum: Karten wie die Tafeln */
#app[data-bereich="admin"] .unten-reihe { margin-bottom: 20px; }
#app[data-bereich="admin"] .kpi-reihe { margin-bottom: 8px; }
#app[data-bereich="admin"] .unten-karte { gap: 12px; padding: 16px; }
#app[data-bereich="admin"] .unten-kopf strong {
  font-family: Oswald, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--gold-text, var(--gold));
}
#app[data-bereich="admin"] .unten-zeile {
  min-height: 44px;
  background: var(--panel-2);
  font-size: 15px;
}
#app[data-bereich="admin"] .betreuung-zeile > span:nth-child(2) { flex: 1; text-align: left; }
#app[data-bereich="admin"] .unten-zeile strong { font-size: 18px; color: var(--text); }
#app[data-bereich="admin"] .kpi-karte { border-left-width: 1px; }
#app[data-bereich="admin"] .kpi-karte.risiko { border-color: var(--adm-rot-rand, #8f3a30); }
#app[data-bereich="admin"] .kpi-titel { letter-spacing: 0.12em; }
#app[data-bereich="admin"] .adm-abschnitt > h2 { font-size: 13px; letter-spacing: 0.16em; }
#app[data-bereich="admin"] .adm-link { background: var(--panel); }
#app[data-bereich="admin"] .adm-link span { font-size: 17px; }

/* Wochenabschluss */
.adm-wochenliste { margin: 12px 0 16px; border: 1px solid var(--line); }
#app[data-bereich="admin"] #content .week-row {
  grid-template-columns: 36px minmax(0, 1fr) auto;
  min-height: 56px;
  padding: 8px 14px;
  background: var(--panel-2);
}
#app[data-bereich="admin"] #content .week-row .insta { font-family: Oswald, sans-serif; font-size: 13px; letter-spacing: normal; color: var(--text-dim); }
#app[data-bereich="admin"] #content .week-row strong { font-family: Oswald, sans-serif; font-size: 17px; font-weight: 600; }
#app[data-bereich="admin"] #content .week-row .place,
#app[data-bereich="admin"] #content .week-row .coins { font-family: Oswald, sans-serif; font-weight: 600; color: var(--gold-text, var(--gold)); }
#app[data-bereich="admin"] #content .week-row .coins small { display: block; font-size: 11px; letter-spacing: 0.1em; color: var(--text-dim); }
#app[data-bereich="admin"] #content .week-history-member {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  font-family: Oswald, sans-serif;
  font-size: 14px;
}
#app[data-bereich="admin"] #content .week-history-member:hover { border-color: var(--gold-dim); color: var(--gold-text, var(--gold-lit)); }

/* Protokoll */
#app[data-bereich="admin"] .audit-tafel { padding: 0; }
.audit-tafel .audit-zeile { margin: 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; }
.audit-tafel .audit-zeile:last-child { border-bottom: 0; }
.audit-tafel .audit-zeile:hover,
.audit-tafel .audit-zeile:focus-visible { background: var(--adm-hover, rgba(255, 255, 255, 0.03)); }
.audit-tafel .audit-zeit { font-family: Oswald, sans-serif; font-size: 14px; color: var(--text-body); }
.audit-tafel .audit-kategorie { font-size: 13px; letter-spacing: normal; }
.audit-tafel .audit-haupt strong { font-size: 16px; font-weight: 600; }
.audit-tafel .audit-haupt small,
.audit-tafel .audit-akteur { font-family: Oswald, sans-serif; font-size: 14px; color: var(--text-dim); }
.audit-tafel .audit-kopf {
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  font-family: Oswald, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--text-dim);
}
.audit-tafel { container-type: inline-size; }
.audit-tafel .audit-kopf { display: none; }
.audit-tafel .audit-zeile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "zeit kategorie pfeil" "haupt haupt haupt" "akteur akteur akteur";
  gap: 4px 10px;
  align-items: center;
  min-height: 58px;
  padding: 10px 16px;
}
.audit-tafel .audit-zeit { grid-area: zeit; }
.audit-tafel .audit-kategorie { grid-area: kategorie; }
.audit-tafel .audit-haupt { grid-area: haupt; }
.audit-tafel .audit-akteur { grid-area: akteur; }
.audit-tafel .audit-zeile > i { grid-area: pfeil; }
@container (min-width: 860px) {
  .audit-tafel .audit-kopf { display: grid; }
  .audit-tafel .audit-kopf,
  .audit-tafel .audit-zeile { grid-template-columns: 135px 190px minmax(200px, 1fr) minmax(150px, 0.65fr) 18px; grid-template-areas: none; gap: 12px; }
  .audit-tafel .audit-zeile { min-height: 50px; padding: 7px 16px; }
  .audit-tafel .audit-zeit,
  .audit-tafel .audit-kategorie,
  .audit-tafel .audit-haupt,
  .audit-tafel .audit-akteur,
  .audit-tafel .audit-zeile > i { grid-area: auto; }
}

/* Coin-Werte */
#app[data-bereich="admin"] .cfg.adm-karte { padding: 16px 16px calc(96px + env(safe-area-inset-bottom, 0px)); }
.cfg.adm-karte .cfg-cols span { font-family: Oswald, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; color: var(--text-dim); }
.cfg.adm-karte .cfg-head { padding: 0; margin-top: 24px; }
.cfg.adm-karte .cfg-head h2 { font-family: Oswald, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-text, var(--gold)); }
.cfg.adm-karte .cfg-note { font-weight: 400; font-size: 14px; color: var(--text-body); padding: 0; }
.cfg.adm-karte .cfg-neu { font-family: Oswald, sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0.08em; padding: 14px 0; min-height: 44px; }
.cfg.adm-karte .cfg-preis span { font-family: Oswald, sans-serif; font-size: 12px; letter-spacing: 0.12em; }
.cfg.adm-karte .cfg-preis input { font-family: Oswald, sans-serif; font-size: 18px; font-weight: 600; }
.cfg.adm-karte .cfg-code { font-family: Oswald, sans-serif; }
.cfg.adm-karte .cfg-coins,
.cfg.adm-karte .cfg-limit { font-family: Oswald, sans-serif; font-size: 15px; }
.cfg.adm-karte .cfg-prize-preview { font-family: Oswald, sans-serif; font-size: 14px; color: var(--text-body); }
@media (min-width: 1024px) {
  #app[data-bereich="admin"] .cfg-bar-wrap { left: 264px; }
  #app[data-bereich="admin"] .cfg-bar { max-width: none; margin: 0; padding-inline: 24px; }
}
.cfg-bar { background: var(--panel); border-top: 1px solid var(--gold-dim); }
.cfg-zahl,
.cfg-verwerfen { font-family: Oswald, sans-serif; font-size: 13px; letter-spacing: 0.1em; }
#app[data-bereich="admin"] .cfg-uebernehmen {
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--gold);
  border-image: none;
  background: var(--gold);
  font-family: Oswald, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #14110a;
}

/* Coaching: Dashboard, Liste, Bausteine optisch angleichen */
#app[data-bereich="admin"] .dash-kopf { display: none; }
#app[data-bereich="admin"] .dash .adm-kopf { align-items: center; }
#app[data-bereich="admin"] .dash .adm-kopf-aktionen { align-items: center; gap: 8px; }
.dash-zeitraum { background: transparent; }
.dash-zeitraum button { font-family: Oswald, sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.08em; }
.dash-zeitraum button.on { background: rgba(242, 169, 0, 0.12); color: var(--gold-text, var(--gold-lit)); box-shadow: inset 0 0 0 1px var(--gold); }
#app[data-bereich="admin"] .dash-tabelle-rahmen { border: 1px solid var(--line); background: var(--panel); }
#app[data-bereich="admin"] .dash-tabelle thead th { font-family: Oswald, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; color: var(--text-dim); }
#app[data-bereich="admin"] .dash-tabelle tbody tr:hover { background: var(--adm-hover, rgba(255, 255, 255, 0.03)); }
#app[data-bereich="admin"] .dash-hinweis { border-radius: 0; font-family: Oswald, sans-serif; }
#app[data-bereich="admin"] .coach-eintrag { border: 1px solid var(--line); border-image: none; background: var(--panel); box-shadow: none; }
#app[data-bereich="admin"] .coach-eintrag:hover { border-color: var(--gold-dim); }
#app[data-bereich="admin"] .coach-eintrag strong { font-family: Oswald, sans-serif; font-size: 17px; font-weight: 600; }
#app[data-bereich="admin"] .coach-eintrag small { font-family: Oswald, sans-serif; font-size: 14px; color: var(--text-dim); }
#app[data-bereich="admin"] .coach-eintrag .marke { color: var(--text-dim); }
#app[data-bereich="admin"] .bs-gruppe { background: var(--panel); border: 1px solid var(--line); padding: 16px; }
#app[data-bereich="admin"] .bs-gruppe-kopf h2 { font-family: Oswald, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-text, var(--gold)); }
#app[data-bereich="admin"] .bs-gruppe-kopf { margin-bottom: 12px; }
#app[data-bereich="admin"] .bs-karte { background: var(--panel-2); border: 1px solid var(--line); }
#app[data-bereich="admin"] .bs-karte[data-art] { border-left: 1px solid var(--line); }
#app[data-bereich="admin"] .bs-karte-text strong { font-family: Oswald, sans-serif; font-size: 17px; font-weight: 600; }
#app[data-bereich="admin"] .bs-karte-text small,
#app[data-bereich="admin"] .bs-import small { font-family: Oswald, sans-serif; font-size: 14px; color: var(--text-dim); }
#app[data-bereich="admin"] .bs-import { background: var(--panel); }
#app[data-bereich="admin"] .bs-import .btn { width: auto; }

/* Mitglieder-Filterleiste behaelt ihre eigenen Feldmasse */
#app[data-bereich="admin"] #content:not(:has(.pm-wurzel)) .adm-filterleiste .adm-auswahl select.inp {
  height: 52px;
  min-height: 52px;
  padding: 22px 36px 2px 14px;
  background-color: var(--panel);
}
#app[data-bereich="admin"] #content:not(:has(.pm-wurzel)) .adm-filterleiste .adm-suche input.inp {
  height: 52px;
  min-height: 52px;
  padding: 0 12px 0 44px;
  background-color: var(--panel);
}

/* Coaching: Felder und Zeilen im gleichen Look */
#app[data-bereich="admin"] #content:not(:has(.pm-wurzel)) .coach-inp {
  border: 1px solid var(--line);
  border-left-width: 1px;
  border-radius: 0;
  background-color: var(--panel-2);
  font-family: Oswald, sans-serif;
  font-size: 15px;
  letter-spacing: normal;
  color: var(--text);
}
#app[data-bereich="admin"] #content:not(:has(.pm-wurzel)) .coach-inp:focus { border-color: var(--gold); outline: 0; }

/* Coaching-Dashboard: Aktionen unter den Titel, solange es eng ist */
#app[data-bereich="admin"] .dash .adm-kopf { grid-template-columns: minmax(0, 1fr); }
#app[data-bereich="admin"] .dash .adm-kopf-aktionen { justify-content: flex-start; }
@media (min-width: 1500px) {
  #app[data-bereich="admin"] .dash .adm-kopf { grid-template-columns: minmax(0, 1fr) auto; }
}
#app[data-bereich="admin"] #content:not(:has(.pm-wurzel)) .btn.brk::after,
#app[data-bereich="admin"] #content:not(:has(.pm-wurzel)) .btn.brk::before { content: none; display: none; }
/* ── Projekte: Faelligkeits-Pop-up (projekte-faellig.js) ─────────────
   Bleibt im Admin-Dunkel, auch wenn der Projekte-Reiter hell ist.
   Handy: Blatt von unten, ab 640 px zentrierter Dialog. */
.pm-faellig-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: var(--adm-schleier, rgba(0, 0, 0, .66));
  overscroll-behavior: contain;
}
.pm-faellig {
  box-sizing: border-box;
  width: 100%;
  max-height: 88vh;
  max-height: 88dvh;
  display: flex;
  flex-direction: column;
  padding: 20px var(--gutter, 16px) calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--panel, #11140e);
  color: var(--text, #efeee6);
  border: 1px solid var(--line, #2b3025);
  border-top: 3px solid var(--gold, #c3a23e);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -12px 40px var(--adm-schatten, rgba(0, 0, 0, .55));
  font-family: Oswald, sans-serif;
  animation: pm-faellig-hoch .22s ease-out;
}
.pm-faellig:focus { outline: none; }
.pm-faellig-titel {
  margin: 0 0 4px;
  font-family: Oswald, sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--gold-text, var(--gold, #c3a23e));
}
.pm-faellig-hinweis {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-dim, #9aa08a);
}
.pm-faellig-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}
.pm-faellig-eintrag + .pm-faellig-eintrag { margin-top: 8px; }
.pm-faellig-zeile {
  box-sizing: border-box;
  width: 100%;
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--panel-2, #171a11);
  border: 1px solid var(--line, #2b3025);
  border-radius: 10px;
  cursor: pointer;
}
.pm-faellig-zeile:hover { border-color: var(--gold-dim, #8a7433); }
.pm-faellig-zeile:focus-visible,
.pm-faellig-knopf:focus-visible,
.pm-faellig-mehr:focus-visible { outline: 2px solid var(--gold, #c3a23e); outline-offset: 2px; }
.pm-faellig-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pm-faellig-karte {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.pm-faellig-meta { font-size: 13px; color: var(--text-dim, #9aa08a); overflow-wrap: anywhere; }
.pm-faellig-frist { font-size: 14px; font-weight: 600; }
.pm-faellig-heute { color: var(--gold-text, var(--gold, #c3a23e)); }
.pm-faellig-ueber { color: var(--adm-rot-text, #ff6b5e); }
.pm-faellig-pfeil { flex: none; font-size: 24px; line-height: 1; color: var(--gold-text, var(--gold, #c3a23e)); }
.pm-faellig-mehr {
  align-self: flex-start;
  min-height: 44px;
  margin-top: 4px;
  padding: 0 4px;
  font: inherit;
  font-size: 14px;
  color: var(--gold-text, var(--gold, #c3a23e));
  background: transparent;
  border: 0;
  text-decoration: underline;
  cursor: pointer;
}
.pm-faellig-fuss { display: flex; gap: 10px; margin-top: 14px; }
.pm-faellig-knopf {
  flex: 1;
  min-height: 48px;
  padding: 0 14px;
  font-family: Oswald, sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text, #efeee6);
  background: transparent;
  border: 1px solid var(--line, #2b3025);
  border-radius: 10px;
  cursor: pointer;
}
.pm-faellig-knopf:hover { border-color: var(--gold-dim, #8a7433); }
.pm-faellig-haupt { color: #11140e; background: var(--gold, #c3a23e); border-color: var(--gold, #c3a23e); }
.pm-faellig-haupt:hover { background: #d3b24e; }
@keyframes pm-faellig-hoch {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@media (min-width: 640px) {
  .pm-faellig-overlay { align-items: center; }
  .pm-faellig {
    width: min(520px, calc(100% - 32px));
    padding: 24px;
    border-radius: 12px;
    border-top-width: 1px;
    border-top-color: var(--line, #2b3025);
    box-shadow: 0 20px 60px var(--adm-schatten, rgba(0, 0, 0, .6));
  }
  .pm-faellig-knopf { flex: none; min-width: 150px; }
  .pm-faellig-fuss { justify-content: flex-end; }
}
@media (prefers-reduced-motion: reduce) { .pm-faellig { animation: none; } }
@media (max-width: 739px) {
  .dash-tabelle { min-width: 1100px; }
  .dash-tabelle .dash-klientname {
    width: 160px;
    min-width: 160px;
    max-width: 160px;
  }
  .dash-klientname > .dash-ampel { margin-right: 8px; }
  .dash-klienttext { width: calc(100% - 20px); }
  .dash-klienttext strong { font-size: 14px; }
}

/* Coaching-Dashboard: Platzhalter waehrend des Ladens, gleiche Hoehe wie die
   Tabelle, damit beim Zeitraum-Wechsel nichts springt. */
.dash-lade {
  display: grid;
  place-items: center;
  min-height: 320px;
  font-family: Oswald, sans-serif;
  letter-spacing: 0.12em;
  color: var(--text-dim);
}

/* ── Benachrichtigungen: Streifen auf jeder Admin-Seite (projekte-push.js) ──
   Steht ganz oben im Inhalt (#push-streifen, von app.js eingesetzt), bleibt im Admin-Dunkel. */
.pm-pushstreifen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  box-sizing: border-box;
  margin: 0 0 14px;
  padding: 10px 12px;
  background: var(--panel, #11140e);
  border: 1px solid var(--line, #2b3025);
  border-left: 3px solid var(--gold, #c3a23e);
  color: var(--text, #efeee6);
  font-family: Oswald, sans-serif;
}
.pm-pushstreifen[hidden] { display: none; }
.pm-pushstreifen-text { flex: 1 1 260px; display: flex; flex-direction: column; gap: 2px; min-width: 0; margin: 0; font-size: 14px; line-height: 1.35; }
.pm-pushstreifen-text strong { font-size: 15px; letter-spacing: 0.04em; color: var(--gold-text, var(--gold, #c3a23e)); }
.pm-pushstreifen-text span { color: var(--text, #efeee6); opacity: .85; overflow-wrap: anywhere; }
.pm-pushstreifen-knoepfe { display: flex; flex: none; flex-wrap: wrap; gap: 8px; }
.pm-pushstreifen-knopf {
  min-height: 44px;
  padding: 8px 16px;
  margin: 0;
  background: transparent;
  border: 1px solid var(--line, #2b3025);
  border-radius: 6px;
  color: var(--text, #efeee6);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pm-pushstreifen-knopf:hover { border-color: var(--gold, #c3a23e); }
.pm-pushstreifen-knopf:focus-visible { outline: 2px solid var(--gold, #c3a23e); outline-offset: 2px; }
.pm-pushstreifen-knopf[disabled] { opacity: .5; cursor: default; }
.pm-pushstreifen-haupt { background: var(--gold, #c3a23e); border-color: var(--gold, #c3a23e); color: #11140e; font-weight: 600; }
.pm-pushstreifen-meldung { flex: 1 1 100%; margin: 0; font-size: 13px; line-height: 1.4; opacity: .9; overflow-wrap: anywhere; }
.pm-pushstreifen-meldung[hidden] { display: none; }
@media (max-width: 620px) {
  .pm-pushstreifen-knoepfe { width: 100%; }
  .pm-pushstreifen-knopf { flex: 1 1 0; }
}

/* Benachrichtigungs-Panel (Projekte): Test-Knopf, Ergebnis, Ton-Schalter */
.pm-hell .pm-push-zeile { display: flex; flex-wrap: wrap; gap: 8px; }
.pm-hell .pm-push-ergebnis { margin: 8px 0 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.4; }
.pm-hell .pm-push-ergebnis[hidden] { display: none; }
.pm-hell .pm-push-ergebnis li { padding: 6px 0; border-top: 1px solid var(--pm-rand); overflow-wrap: anywhere; }
.pm-hell .pm-push-ergebnis .pm-push-fehler { color: var(--pm-rot); }
.pm-hell .pm-push-ton { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 4px; font-size: 14px; cursor: pointer; }
.pm-hell .pm-push-ton input { flex: none; width: 20px; height: 20px; margin: 0; }
.pm-hell .pm-push .pm-btn[hidden] { display: none; }
/* ── Admin › Gesamte History (Mockup) ────────────────────────────────────────
   Kopf mit Umschalter, Filterleiste, Karten-Raster und Detail-Panel. Alle
   Klassen tragen das Praefix history-adm-. Nur die Admin-Ansicht; die
   History der Mitglieder bleibt unveraendert. Handy: Karten einspaltig, das
   Panel oeffnet als Blatt von unten. Ab 1024 px im Admin-Bereich: Panel
   rechts, ab 1280 px zwei Kartenspalten. */
.history-adm { display: block; }
.history-adm-segment {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}
.history-adm-segment button {
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-body, #c9cdbd);
  font-family: Oswald, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.history-adm-segment button:hover:not(.on):not(:disabled) { color: var(--text); }
.history-adm-segment button.on { background: var(--gold); color: #14110a; }
.history-adm-segment button:disabled { opacity: 0.4; cursor: default; }
.history-adm-segment button:focus-visible,
.history-adm-karte:focus-visible,
.history-adm-akt:focus-visible,
.history-adm-oeffnen:focus-visible,
.history-adm-aberkennen:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.history-adm-filter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}
.history-adm-filter .adm-suche { grid-column: 1 / -1; }
#app .history-adm-filter .adm-suche input.inp {
  height: 52px;
  padding: 0 12px 0 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-color: var(--adm-feld, #0c0e09);
  color: var(--text);
  font: 15px Oswald, sans-serif;
}
.history-adm-zeitraum {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text-body, #c9cdbd);
  font-family: Oswald, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.history-adm-zeitraum svg { width: 20px; height: 20px; flex: none; }
.history-adm-filter .history-adm-segment { justify-self: stretch; }
.history-adm-filter .history-adm-segment button { flex: 1; }
.history-adm-zaehler {
  grid-column: 1 / -1;
  font-family: Oswald, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-body, #c9cdbd);
}
.history-adm-kategorien {
  display: flex;
  gap: 8px;
  margin: 0 0 14px;
  padding-bottom: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
#app #content .history-adm .history-chip.history-adm-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text-body, #c9cdbd);
  font-family: Oswald, sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  box-shadow: none;
}
#app #content .history-adm .history-chip.history-adm-chip.on {
  border-color: var(--gold);
  background: rgba(195, 162, 62, 0.12);
  color: var(--gold-text, var(--gold));
}
.history-adm-chip-icon { display: inline-grid; flex: none; place-items: center; width: 20px; height: 20px; }
.history-adm-chip-icon svg { width: 20px; height: 20px; }

.history-adm-raster { display: block; }
/* Die Kartenspalte ist ein Container: wie viele Karten nebeneinander stehen,
   haengt an ihrer Breite (nicht am Fenster) - siehe @container hspalte unten. */
.history-adm-spalte { min-width: 0; container: hspalte / inline-size; --hbild: 92px; }
.history-adm-liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.history-adm-spalte > #history-more { width: 100%; margin-top: 14px; }

.history-adm-karte {
  container-type: inline-size;
  display: grid;
  grid-template-columns: var(--hbild, 92px) minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  gap: 4px 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  cursor: pointer;
}
/* Karten ausserhalb des Bildschirms werden nicht gebaut/gemalt (Scrollen und
   Neuzeichnen bei vielen Eintraegen). Mit offenem Menue sichtbar, damit das
   Menue nicht abgeschnitten wird. */
.history-adm-karte { content-visibility: auto; contain-intrinsic-size: auto 210px; }
.history-adm-karte.menue-offen { content-visibility: visible; }
.history-adm-karte:hover { border-color: var(--gold-dim); }
.history-adm-karte.gewaehlt {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold);
  background: rgba(195, 162, 62, 0.06);
}
.history-adm-bild {
  display: grid;
  place-items: center;
  width: var(--hbild, 92px);
  aspect-ratio: 1;
  align-self: start;
  overflow: hidden;
  border-radius: 10px;
  background: var(--panel-2);
  color: var(--text-dim);
  font-family: Oswald, sans-serif;
  font-size: 30px;
  font-weight: 600;
}
.history-adm-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.history-adm-inhalt { display: grid; gap: 4px; align-content: start; min-width: 0; }
/* Eine Zeile: Name, Instagram-Name (kuerzt zuerst), Coins rechts. */
.history-adm-karte .history-adm-zeile { display: flex; flex-wrap: nowrap; align-items: baseline; gap: 0 8px; min-width: 0; }
.history-adm-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: Oswald, sans-serif; font-size: 17px; font-weight: 600; color: var(--text); }
.history-adm-insta { font-family: Oswald, sans-serif; font-size: 14px; color: var(--text-body, #c9cdbd); overflow-wrap: anywhere; }
.history-adm-karte .history-adm-insta { flex: 0 10 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.history-adm-coins { margin-left: auto; font-family: Oswald, sans-serif; font-size: 16px; font-weight: 600; letter-spacing: 0.03em; color: var(--gold-text, var(--gold)); white-space: nowrap; }
.history-adm-karte .history-adm-coins { flex: none; font-size: 15px; }
.history-adm-coins.minus { color: var(--adm-rot-text, #ff9a8c); }
.history-adm-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.history-adm-challenge { text-transform: uppercase; letter-spacing: 0.03em; }
.history-adm-karte .history-adm-chips .adm-chip { min-height: 26px; padding: 0 8px; font-size: 12px; }
.history-adm-challenge .history-adm-chip-icon { width: 16px; height: 16px; }
.history-adm-challenge .history-adm-chip-icon svg { width: 16px; height: 16px; }
.history-adm-zeit { font-family: Oswald, sans-serif; font-size: 13px; color: var(--text-body, #c9cdbd); }
/* Text in der Karte auf zwei Zeilen gekuerzt; voll steht er im Detail-Panel. */
.history-adm-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin: 0; overflow: hidden; font-family: Oswald, sans-serif; font-size: 14px; line-height: 1.35; color: var(--text); text-transform: none; letter-spacing: 0; overflow-wrap: anywhere; }
.history-adm-karte .history-adm-link { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.history-adm-link { display: inline-flex; align-items: center; gap: 6px; font-family: Oswald, sans-serif; font-size: 14px; color: var(--adm-link, #6fb3ff); text-decoration: underline; overflow-wrap: anywhere; }
.history-adm-link svg { width: 16px; height: 16px; flex: none; }

.history-adm-aktionen {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}
.history-adm-akt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--text-body, #c9cdbd);
  font-family: Oswald, sans-serif;
  font-size: 14px;
  cursor: pointer;
}
.history-adm-akt svg { width: 20px; height: 20px; flex: none; }
.history-adm-akt em { font-style: normal; }
/* Beschriftungen nur bei viel Platz (Karte ab 440 px Breite). */
.history-adm-karte .history-adm-akt em { display: none; }
.history-adm-karte .history-adm-oeffnen { width: 40px; padding: 0; }
.history-adm-karte .history-adm-oeffnen span { display: none; }
@container (min-width: 440px) {
  .history-adm-karte .history-adm-akt em { display: inline; }
  .history-adm-karte .history-adm-oeffnen { width: auto; padding: 0 10px; }
  .history-adm-karte .history-adm-oeffnen span { display: inline; }
}
.history-adm-akt:hover:not(.statisch) { color: var(--text); }
.history-adm-akt.statisch { cursor: default; }
.history-adm-akt.on { color: var(--gold-text, var(--gold)); }
.history-adm-akt.on svg { fill: currentColor; }
.history-adm-akt[data-hadm="like"].on { color: var(--adm-herz, #ff6a7a); }
.history-adm-menuebox { position: relative; }
.history-adm-aktionen .adm-punkte { width: 40px; height: 40px; }
.history-adm-menuebox .adm-menue button:disabled { opacity: 0.5; cursor: default; }
.history-adm-oeffnen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  margin-left: auto;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-family: Oswald, sans-serif;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}
.history-adm-oeffnen:hover { border-color: var(--gold-dim); background: var(--panel-2); }
.history-adm-oeffnen svg { width: 18px; height: 18px; flex: none; }

/* Detail-Panel */
.history-adm-panel { display: none; }
.history-adm-panel.offen {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: block;
  max-height: 88vh;
  padding: 16px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  background: var(--panel);
  box-shadow: 0 -14px 40px var(--adm-schatten, rgba(0, 0, 0, 0.6));
}
.history-adm-schleier { display: none; }
.history-adm-schleier.offen { position: fixed; inset: 0; z-index: 55; display: block; background: var(--adm-schleier, rgba(0, 0, 0, 0.55)); }
.history-adm-panel-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.history-adm-panel-kopf h2 { margin: 0; font-family: Oswald, sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0.16em; color: var(--text-body, #c9cdbd); }
.history-adm-zu { width: 44px; height: 44px; margin-right: -10px; border: 0; background: transparent; color: var(--text-body, #c9cdbd); font-size: 28px; line-height: 1; cursor: pointer; }
.history-adm-zu:hover { color: var(--gold-text, var(--gold)); }
.history-adm-grossbild {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 10px;
  background: var(--panel-2);
  color: var(--text-dim);
  font-family: Oswald, sans-serif;
  font-size: 48px;
  font-weight: 600;
}
.history-adm-grossbild img { display: block; width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.history-adm-person { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: 12px; }
.history-adm-person strong { font-family: Oswald, sans-serif; font-size: 22px; font-weight: 600; color: var(--text); }
.history-adm-panel-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin-top: 4px; font-family: Oswald, sans-serif; font-size: 14px; color: var(--text-body, #c9cdbd); }
.history-adm-panel-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
.history-adm-panel-zeile .history-adm-coins { margin-left: 0; font-size: 20px; }
.history-adm-panel-text { margin: 12px 0 0; font-family: Oswald, sans-serif; font-size: 17px; line-height: 1.4; color: var(--text); text-transform: none; letter-spacing: 0; overflow-wrap: anywhere; }
.history-adm-panel .history-adm-link { margin-top: 8px; font-size: 15px; }
.history-adm-aktionen.im-panel { margin-top: 12px; border-top: 0; padding-top: 0; }
.history-adm-teilen { display: flex; gap: 14px; margin-top: 2px; }
.history-adm-text-knopf { min-height: 36px; padding: 0; border: 0; background: transparent; color: var(--text-body, #c9cdbd); font-family: Oswald, sans-serif; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: underline; cursor: pointer; }
.history-adm-text-knopf:disabled { opacity: 0.6; cursor: default; text-decoration: none; }
.history-adm-abschnitt { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.history-adm-abschnitt h3 { margin: 0 0 10px; font-family: Oswald, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.16em; color: var(--text-body, #c9cdbd); }
.history-adm-kommentare { display: grid; gap: 12px; margin: 0 0 12px; padding: 0; list-style: none; }
.history-adm-komm { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.history-adm-komm .adm-avatar { width: 36px; height: 36px; }
.history-adm-komm strong { font-family: Oswald, sans-serif; font-size: 15px; color: var(--text); }
.history-adm-komm small { font-family: Oswald, sans-serif; font-size: 13px; color: var(--text-dim); }
.history-adm-komm p { margin: 2px 0 0; font-family: Oswald, sans-serif; font-size: 15px; line-height: 1.35; color: var(--text); text-transform: none; letter-spacing: 0; overflow-wrap: anywhere; }
.history-adm-komm-weg { width: 36px; height: 36px; border: 0; background: transparent; color: var(--text-dim); font-size: 22px; line-height: 1; cursor: pointer; }
.history-adm-komm-weg:hover { color: var(--adm-rot-text, #ff7d6e); }
.history-adm-komm-leer { font-family: Oswald, sans-serif; font-size: 14px; color: var(--text-dim); }
.history-adm-komm-form { display: grid; grid-template-columns: minmax(0, 1fr) 48px; gap: 8px; }
#app .history-adm-komm-form input.inp {
  height: 48px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-color: var(--adm-feld, #0c0e09);
  color: var(--text);
  font: 15px Oswald, sans-serif;
  text-transform: none;
}
.history-adm-senden { display: grid; place-items: center; height: 48px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--gold-text, var(--gold)); cursor: pointer; }
.history-adm-senden:hover { border-color: var(--gold-dim); background: var(--panel-2); }
.history-adm-senden svg { width: 22px; height: 22px; }
.history-adm-hinweis { margin: 0 0 12px; font-family: Oswald, sans-serif; font-size: 14px; color: var(--text-body, #c9cdbd); text-transform: none; letter-spacing: 0; }
.history-adm-infos { margin: 0; }
.history-adm-infos > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; padding: 7px 0; font-family: Oswald, sans-serif; font-size: 15px; }
.history-adm-infos dt { color: var(--text-dim); }
.history-adm-infos dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.history-adm-infos dd a { color: var(--adm-link, #6fb3ff); }
.history-adm-panel-fuss { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 16px; }
.history-adm-oeffnen.gross { width: 100%; margin: 0; min-height: 52px; font-size: 15px; }
.history-adm-aberkennen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: #e5544a;
  color: #fff;
  font-family: Oswald, sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.history-adm-aberkennen:hover { background: #f0645a; }
.history-adm-aberkennen svg { width: 20px; height: 20px; flex: none; }

/* Rekruten (gleicher Kopf, Karten statt Liste) */
.history-adm-rekrutenraster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.history-adm-karte.rekrut-karte { display: flex; flex-direction: column; gap: 10px; cursor: default; }
.history-adm-karte.rekrut-karte:hover { border-color: var(--line); }
.history-adm-rekrut-kopf { display: flex; align-items: center; gap: 12px; min-width: 0; }
.history-adm-rekrut-text { display: grid; min-width: 0; }
.history-adm-rekrut-text strong { font-family: Oswald, sans-serif; font-size: 18px; font-weight: 600; color: var(--text); }
.history-adm-rekrut-text small,
.history-adm-rekrut-von { font-family: Oswald, sans-serif; font-size: 14px; color: var(--text-body, #c9cdbd); overflow-wrap: anywhere; }
.history-adm-fortschritt { align-self: center; font-family: Oswald, sans-serif; font-size: 14px; color: var(--text-body, #c9cdbd); }
.history-adm-rekrut-aktionen { display: flex; flex-wrap: wrap; gap: 8px; }
.history-adm-rekrut-aktionen .button { width: auto; margin: 0; }

@media (min-width: 640px) {
  .history-adm-rekrutenraster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Spalten nach Platz in der Kartenspalte: einspaltig bis 599 px, zwei Karten
   nebeneinander ab 600 px, drei ab 1100 px. Bei viel Platz pro Karte wird
   das Foto etwas groesser. */
@container hspalte (min-width: 520px) and (max-width: 599px) { .history-adm-spalte, .history-adm-liste { --hbild: 112px; } }
@container hspalte (min-width: 600px) { .history-adm-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@container hspalte (min-width: 860px) and (max-width: 1099px) { .history-adm-liste { --hbild: 112px; } }
@container hspalte (min-width: 1100px) { .history-adm-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  #app[data-bereich="admin"] .history-adm-filter { grid-template-columns: minmax(250px, 1fr) auto auto auto; align-items: center; }
  #app[data-bereich="admin"] .history-adm-filter .adm-suche { grid-column: auto; }
  #app[data-bereich="admin"] .history-adm-filter .history-adm-segment { justify-self: auto; }
  #app[data-bereich="admin"] .history-adm-zaehler { grid-column: auto; min-width: 96px; text-align: right; }
  #app[data-bereich="admin"] .history-adm-kategorien { flex-wrap: wrap; overflow: visible; }
  #app[data-bereich="admin"] .history-adm-raster.mit-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 316px;
    gap: 16px;
    align-items: start;
  }
  #app[data-bereich="admin"] .history-adm-panel.offen {
    position: sticky;
    top: 16px;
    z-index: auto;
    max-height: calc(100vh - 32px);
    padding: 16px;
    border-bottom: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: none;
  }
  #app[data-bereich="admin"] .history-adm-schleier.offen { display: none; }
}
@media (min-width: 1280px) {
  #app[data-bereich="admin"] .history-adm-rekrutenraster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1440px) {
  #app[data-bereich="admin"] .history-adm-raster.mit-panel { grid-template-columns: minmax(0, 1fr) 340px; }
}
@media (min-width: 1600px) {
  #app[data-bereich="admin"] .history-adm-raster.mit-panel { grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; }
}
@media (prefers-reduced-motion: reduce) { .history-adm * { transition: none !important; animation: none !important; } }

/* ── Admin: Seitenleiste mit Symbolen ────────────────────────────────────────
   Ein Symbol vor jedem Menuepunkt (Rechner und Handy-Menue), gleiche
   Strichstaerke, aktiver Punkt mit Goldrahmen. Nur dunkel. */
.adm-nav-ico { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; font-style: normal; color: var(--text-dim); }
.adm-nav-ico svg { width: 22px; height: 22px; display: block; }
.adm-nav-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.drawer button:has(.adm-nav-ico) { display: flex; align-items: center; gap: 12px; }
.drawer button:has(.adm-nav-ico) .adm-zahl { margin-left: auto; }
.drawer button.on .adm-nav-ico { color: var(--gold); }
@media (min-width: 1024px) {
  .adm-nav button {
    justify-content: flex-start;
    gap: 14px;
    min-height: 44px;
    padding: 0 12px;
    margin: 0 0 2px;
    border: 1px solid transparent;
    border-left-width: 1px;
    border-radius: 8px;
    font-size: 16px;
    letter-spacing: 0.01em;
  }
  .adm-nav button:hover { background: rgba(255, 255, 255, 0.04); }
  .adm-nav button:hover .adm-nav-ico { color: var(--text); }
  .adm-nav button.on {
    background: rgba(242, 183, 5, 0.08);
    border-color: var(--gold);
    border-left-color: var(--gold);
    font-weight: 500;
  }
  .adm-nav button.on .adm-nav-ico { color: var(--gold); }
  .adm-nav button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  .adm-nav h3 {
    margin: 20px 12px 6px;
    font-size: 11px;
    letter-spacing: 0.2em;
    color: var(--text-dim);
  }
  .adm-nav-liste h3:first-child { margin-top: 12px; }
  .adm-nav .adm-zahl { margin-left: auto; }
  .adm-nav-marke { padding: 4px 8px 16px; margin-bottom: 4px; }
}

/* ── Admin: Entwurfs-Look (Karten, runde Ecken, ruhige Abstaende) ────────────
   Gleiche Formensprache wie "Gesamte History": Karten mit 12 px Rundung,
   Gold nur als Akzent, Knoepfe 8 px rund. Gilt nur im Admin-Bereich ausser
   Projekte (eigenes Design, .pm-wurzel). */
#app[data-bereich="admin"] #content:not(:has(.pm-wurzel)) :is(.button, .btn):where(:not(.cfg-neu):not(.tab)) { border-radius: 8px; }
#app[data-bereich="admin"] #content:not(:has(.pm-wurzel)) :is(.card, .panel, .coach-panel) { border-radius: 12px; }
#app[data-bereich="admin"] #content:not(:has(.pm-wurzel)) :is(.adm-karte, .adm-tafel, .adm-tabelle) { border-radius: 12px; }
#app[data-bereich="admin"] #content:not(:has(.pm-wurzel)) .adm-tafel { overflow: hidden; }
#app[data-bereich="admin"] #content:not(:has(.pm-wurzel)) .adm-kachel { border-radius: 12px; }
#app[data-bereich="admin"] #content:not(:has(.pm-wurzel)) .adm-kachel-icon { border-radius: 10px; }
#app[data-bereich="admin"] #content:not(:has(.pm-wurzel)) :is(input.inp, select.inp, textarea.inp, .inp) { border-radius: 8px; }

/* Tafel als Karten-Raster (Pruefen): Bild links, Name und Chips, Coins oben
   rechts in Gold, Knoepfe unten. */
.adm-tafel.karten { background: transparent; border: 0; overflow: visible; }
.adm-tafel.karten .adm-tafel-inhalt {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
@container (min-width: 900px) {
  .adm-tafel.karten .adm-tafel-inhalt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.adm-tafel.karten .adm-reihe {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "haupt zahl" "chips chips" "aktionen aktionen";
  gap: 10px 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}
.adm-tafel.karten .adm-reihe:hover { border-color: var(--gold-dim); }
.adm-tafel.karten .adm-reihe:last-child { border-bottom: 1px solid var(--line); }
.adm-tafel.karten .adm-reihe:has(.adm-reihe-medien > *) {
  grid-template-columns: 96px minmax(0, 1fr) auto;
  grid-template-areas: "medien haupt zahl" "medien chips chips" "medien aktionen aktionen";
  column-gap: 14px;
}
.adm-tafel.karten .adm-reihe-haupt { grid-area: haupt; align-self: start; }
.adm-tafel.karten .adm-chips { grid-area: chips; }
.adm-tafel.karten .adm-reihe-zahl { grid-area: zahl; text-align: right; font-size: 18px; letter-spacing: 0.02em; }
.adm-tafel.karten .adm-tafel-kopf { display: none !important; }
.adm-tafel.karten .adm-reihe-zahl small { display: block; }
.adm-tafel.karten .pruefen-entry .adm-reihe-zahl small { display: inline; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-text, var(--gold)); font-weight: 500; }
.adm-tafel.karten .adm-reihe-aktionen { grid-area: aktionen; justify-content: flex-start; flex-wrap: wrap; align-self: end; }
.adm-tafel.karten .pruefen-entry .adm-reihe-aktionen .button { flex: 1 1 auto; }
.adm-tafel.karten .adm-reihe-aktionen { align-items: center; }
.adm-tafel.karten .adm-reihe-medien { grid-area: medien; grid-column: auto; align-self: start; }
.adm-tafel.karten .adm-reihe-medien img,
.adm-tafel.karten .adm-reihe-medien .history-photo-slot {
  display: block;
  width: 96px;
  height: 96px;
  max-height: none;
  flex: none;
  object-fit: cover;
  border: 0;
  border-radius: 10px;
  background-color: var(--panel-2);
}
.adm-tafel.karten .adm-avatar { display: none; }
.adm-tafel.karten .adm-reihe:not(:has(.adm-reihe-medien > *)) .adm-avatar { display: grid; }
.adm-tafel.karten .adm-reihe-text strong { font-size: 18px; }
@media (max-width: 480px) {
  .adm-tafel.karten .adm-reihe:has(.adm-reihe-medien > *) { grid-template-columns: 80px minmax(0, 1fr) auto; }
  .adm-tafel.karten .adm-reihe-medien img,
  .adm-tafel.karten .adm-reihe-medien .history-photo-slot { width: 80px; height: 80px; }
}

/* Am Rechner traegt die Seitenleiste das Logo; die Kopfleiste bleibt schlank. */
@media (min-width: 1024px) {
  html body #app[data-bereich="admin"] > .topbar::after { display: none; }
  html body #app[data-bereich="admin"] > .topbar { min-height: 0; padding-block: 10px 0; border-bottom: 0; background: transparent; justify-content: flex-end; }
  html body #app[data-bereich="admin"] > .topbar .topbar-where { visibility: hidden; }
}

/* ── Admin: heller Modus ─────────────────────────────────────────────────────
   Gilt nur im Admin-Bereich: app.js setzt data-adm-theme="hell" auf <html>
   (nicht auf #app, damit auch Pop-ups und Blaetter am body mitziehen) und
   entfernt es in der Member-Ansicht. Standard ist dunkel, dort aendert sich
   nichts. Die Farben kommen aus Variablen; --gold-text ist das dunklere Gold
   fuer Schrift auf hellem Grund (Gold als Flaeche bleibt --gold). Ausserdem
   steht hier, was in den aelteren Bloecken noch fest verdrahtet ist. */
html[data-adm-theme="hell"] {
  color-scheme: light;
  --gold-text: #8a5a00;
  --gold-dim: #c99410;
  --ink-flaeche: #fbf8f2;
  --panel: #fffdf9;
  --panel-2: #f4efe5;
  --panel-deep: #ece6d9;
  --line: #e1d9c8;
  --text: #22201a;
  --text-dim: #6d6555;
  --text-body: #3b372d;
  --adm-seite: #f2eee5;
  --adm-feld: #fffdf9;
  --c-prim: #22201a;
  --c-sek: #4b4638;
  --c-rot: #b3301f;
  --c-orange: #a8530f;
  --c-gruen: #2f6d1c;
  --c-blau: #1f5fa8;
  --s-0: #fffdf9;
  --s-1: #fbf8f2;
  --s-2: #f4efe5;
  --s-3: #ebe5d8;
  --b-1: #e1d9c8;
  --row: #fffdf9;
  --row-open: #f8f4ea;
  --chart-cap: #8a5a00;
  --adm-text-2: #4b4638;
  --adm-nav-text: #3b372d;
  --adm-link: #1f5fa8;
  --adm-hover: rgba(60, 45, 10, 0.05);
  --adm-grau-bg: rgba(60, 45, 10, 0.06);
  --adm-ok-text: #1f6a33;
  --adm-ok-rand: #a9cdb0;
  --adm-ok-bg: rgba(47, 138, 66, 0.1);
  --adm-ok-punkt: #2b8a3e;
  --adm-rot-text: #a3271a;
  --adm-rot-rand: #e5b3ab;
  --adm-rot-bg: rgba(200, 60, 45, 0.08);
  --adm-rot-bg2: rgba(200, 60, 45, 0.15);
  --adm-rot-punkt: #c93a2b;
  --adm-herz: #b81d36;
  --adm-schatten: rgba(60, 45, 10, 0.18);
  --adm-schleier: rgba(34, 28, 12, 0.45);
}
html[data-adm-theme="dunkel"] { color-scheme: dark; }
/* Das weisse Logo wird auf hellem Grund dunkel. */
html[data-adm-theme="hell"] .adm-nav-marke img { filter: invert(1) contrast(1.2); }
html[data-adm-theme="hell"] body { background: var(--adm-seite); color: var(--text); }
html[data-adm-theme="hell"] body::before,
html[data-adm-theme="hell"] body::after { display: none; }
html[data-adm-theme="hell"] #app[data-bereich="admin"] { background: var(--adm-seite); border-inline-color: var(--line); color: var(--text); }
/* Die Kopfleiste mit dem Logo bleibt dunkel; dort gilt das helle Gold. */
/* "Dunkle Inseln": Bereiche, die auch im hellen Modus dunkel bleiben, bekommen
   die dunklen Werte der Variablen zurueck. */
html[data-adm-theme="hell"] .topbar,
html[data-adm-theme="hell"] .dunkel-insel {
  --gold-text: var(--gold);
  --s-0: #000000; --s-1: #0c0e09; --s-2: #11140e; --s-3: #1b1f14; --b-1: #2b3025;
  --c-prim: #efeee6; --c-sek: #b9bdac; --c-rot: #ff8a78; --c-gruen: #b7e07a; --c-orange: #f0c4b6; --c-blau: #6fb3ff;
  --text: #efeee6; --text-dim: #b9bdac; --text-body: #d5d8cb;
  --panel: #0a0c08; --panel-2: #0f120b; --panel-deep: #070905; --line: #2b3025; --ink-flaeche: #000000;
}
html[data-adm-theme="hell"] .legal-bar,
html[data-adm-theme="hell"] .legal-bar button,
html[data-adm-theme="hell"] .legal-bar span { color: var(--text-dim); }
html[data-adm-theme="hell"] .dash { --dash-rot: #b4401c; --dash-gelb: #8a5d00; --dash-gruen: #3d6b14; }
html[data-adm-theme="hell"] .akte { --f-aktiv: #b8561b; --f-koerper: #2d6a8f; --f-schlaf: #5b4bb0; --f-essen: #4a6a10; --f-befinden: #7a5200; --f-herz: #b33a3a; }
html[data-adm-theme="hell"] #app[data-screen="coach-akte"] .coach-plan { --plan-surface: #ffffff; --plan-row: #f6f7f1; --plan-input: #ffffff; }
/* Aktive Reiter/Knoepfe mit olivgruenem Grund behalten helle Schrift. */
html[data-adm-theme="hell"] :is(.akte-reiter button.on, .drawer button.on, .lw-insta, .le-link, .tab.on, .auth-help[open] summary) {
  color: #f4f3e8;
}
html[data-adm-theme="hell"] .history-adm-aberkennen { background: #c23a30; }
html[data-adm-theme="hell"] .history-adm-aberkennen:hover { background: #a92f26; }
html[data-adm-theme="hell"] .dash-hinweis.ok { color: var(--c-gruen); border-color: #9bb47a; }
html[data-adm-theme="hell"] .adm-avatar.leer { color: var(--text-dim); }
/* Umschalter Hell/Dunkel in der Kopfzeile: liegt ueber dem Logo (Handy). */
#topbar-theme { width: 40px; }
/* Am Handy deckt das Logo die Kopfzeile; dort steht der Umschalter im Menue (Drawer). */
@media (max-width: 600px) { html body #app #topbar-theme { display: none; } }

/* ── Coaching: neue Startseite (Mitglied, Handy) ─────────────────────────
   Eine Hauptaufgabe oben, darunter grosse Kacheln. Jede Kachel oeffnet
   eine Unterseite; dort fuehrt "‹ COACHING" zurueck. Abstaende in
   Achterschritten, Tippflaechen ab 44 px (DESIGN-PROMPT.md). */
.cs-start { display: block; }
.cs-marke {
  margin: 0 0 4px;
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--text-dim);
}
.cs-gruss {
  margin: 0 0 16px;
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: clamp(24px, 6.6vw, 30px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
}
.cs-auftrag {
  display: block;
  width: 100%;
  margin: 0 0 12px;
  padding: 8px 12px 12px;
  text-align: left;
  color: var(--text);
  cursor: pointer;
}
.cs-auftrag small {
  display: block;
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: #e3e6c4;
}
.cs-auftrag strong {
  display: block;
  margin: 4px 0 12px;
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #f4f1dc;
}
.cs-auftrag-los {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 2px solid var(--gold);
  background: var(--panel);
  color: var(--gold);
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 14px;
  letter-spacing: 0.12em;
}
.cs-raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.cs-kachel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4px;
  min-height: 140px;
  padding: 12px;
  text-align: left;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold-dim);
  cursor: pointer;
}
.cs-kachel:active { border-color: var(--olive-lit); }
.cs-kachel.breit {
  grid-column: 1 / -1;
  min-height: 72px;
  justify-content: center;
}
.cs-etikett {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--text-dim);
}
.cs-zahl {
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 28px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.cs-zahl.klein { font-size: 20px; }
.cs-zeile {
  font-family: Oswald, sans-serif;
  font-size: 14px;
  color: #b9bdac;
}
.cs-balken {
  height: 6px;
  margin-top: 8px;
  background: var(--line);
}
.cs-balken span {
  display: block;
  width: var(--anteil, 0%);
  height: 100%;
  background: var(--gold);
}
.cs-zurueck {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: "Share Tech Mono", monospace;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--gold);
  cursor: pointer;
}
.cs-seitentitel { margin-top: 0; }

/* ── Coaching: Unterseite ESSEN (nur der Mahlzeiten-Abschnitt von HEUTE) ── */
.cs-nur:has(#coach-mahlzeiten) > :not(:has(#coach-mahlzeiten)) { display: none; }
.cs-nur .coach-phase:has(#coach-mahlzeiten) > .coach-phase-kopf { display: none; }
.cs-nur .coach-phase:has(#coach-mahlzeiten) .coach-phase-inhalt > :not(#coach-mahlzeiten) { display: none; }
.cs-nur #coach-mahlzeiten > details > summary { display: none; }
.cs-nur #coach-mahlzeiten > details { border: 0; background: none; padding: 0; }
.cs-nur .mz-bilanz {
  margin: 0 0 16px;
  padding: 16px;
  border: 2px solid var(--gold-dim);
  background: var(--olive);
  box-shadow: inset 0 0 0 3px #3d4224, inset 0 0 0 4px var(--olive-lit);
}
.cs-nur .mz-kcal strong {
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 1;
  color: #f4f1dc;
}

/* ── Coaching: Check-in Schritt fuer Schritt ─────────────────────────── */
.cs-schritte [hidden] { display: none !important; }
.cs-schritte .coach-checkin-feld > label {
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.03em;
  text-transform: none;
  color: var(--text);
}
.cs-schritte .coach-checkin-feld { gap: 12px; padding: 8px 0; }
.cs-schritte .coach-inp { min-height: 52px; font-size: 16px; }
.cs-schritt-nav { margin: 16px 0 0; }
.cs-schritt-leiste { height: 6px; background: var(--line); }
.cs-schritt-leiste span { display: block; width: var(--anteil, 0%); height: 100%; background: var(--gold); }
.cs-schritt-zahl {
  margin: 8px 0 16px;
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.cs-schritt-knoepfe { display: flex; gap: 12px; }
.cs-schritt-knoepfe .btn { flex: 1; min-height: 54px; }
.cs-schritte .coach-pflicht { display: inline-block; margin-left: 8px; vertical-align: middle; font-size: 11px; }
/* Heller Modus im Entwurfs-Look: warme Neutraltoene, feine Raender, weiche
   Schatten, Gold nur als Akzent (Flaeche mit dunkler Schrift). */
html[data-adm-theme="hell"] .adm-nav { background: var(--ink-flaeche); }
html[data-adm-theme="hell"] .adm-nav button:hover { background: rgba(60, 45, 10, 0.05); }
html[data-adm-theme="hell"] .adm-nav button.on { background: rgba(224, 161, 0, 0.14); border-color: #d9a21b; color: var(--text); }
html[data-adm-theme="hell"] .adm-nav button.on .adm-nav-ico { color: #9a6700; }
html[data-adm-theme="hell"] .adm-nav-ico { color: #7a7060; }
html[data-adm-theme="hell"] .drawer button.on .adm-nav-ico { color: #f2b705; }
html[data-adm-theme="hell"] .adm-zahl { background: #e0a100; color: #1f1700; }
html[data-adm-theme="hell"] :is(.adm-karte, .adm-tafel, .adm-kachel, .history-adm-karte, .history-adm-panel, .adm-tafel.karten .adm-reihe, .card):not(.adm-tafel.karten) { box-shadow: 0 1px 2px rgba(60, 45, 10, 0.06), 0 4px 14px rgba(60, 45, 10, 0.05); }
html[data-adm-theme="hell"] .adm-tafel.karten .adm-reihe { box-shadow: 0 1px 2px rgba(60, 45, 10, 0.06), 0 4px 14px rgba(60, 45, 10, 0.05); }
html[data-adm-theme="hell"] .adm-chip-warn { background: rgba(224, 161, 0, 0.16); border-color: #d9a21b; color: #7a4e00; }
html[data-adm-theme="hell"] .adm-chip-warn .adm-punkt-klein { background: #d18f00; }
html[data-adm-theme="hell"] .adm-tafel.karten .adm-reihe-zahl,
html[data-adm-theme="hell"] .adm-tafel.karten .pruefen-entry .adm-reihe-zahl small { color: #8a5a00; }
html[data-adm-theme="hell"] #app[data-bereich="admin"] #content:not(:has(.pm-wurzel)) :is(.button, .btn):where(:not(.cfg-neu):not(.tab)):not(.secondary):not(.danger):not(.ghost):not(.quiet) { background: #e0a100; border-color: #c99410; color: #1f1700; }
html[data-adm-theme="hell"] #app[data-bereich="admin"] #content:not(:has(.pm-wurzel)) :is(.button.secondary, .btn.ghost, .btn.quiet, .button.ghost) { background: #fffdf9; border-color: #d6ccb6; color: var(--text); }
html[data-adm-theme="hell"] #app[data-bereich="admin"] #content:not(:has(.pm-wurzel)) :is(.button.secondary, .btn.ghost, .btn.quiet, .button.ghost):hover { background: var(--panel-2); border-color: #c99410; }
html[data-adm-theme="hell"] .history-adm-segment button.on { background: #e0a100; color: #1f1700; }
@media (min-width: 1024px) {
  html[data-adm-theme="hell"] #app[data-bereich="admin"] > .topbar {
    --gold-text: #8a5a00;
    --text: #22201a; --text-dim: #6d6555; --text-body: #3b372d;
    --panel: #fffdf9; --panel-2: #f4efe5; --line: #e1d9c8; --ink-flaeche: transparent;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  html[data-adm-theme="hell"] #app[data-bereich="admin"] > .topbar .topbar-me { background: #fffdf9; color: #8a5a00; border-color: #d9a21b; }
  html[data-adm-theme="hell"] #app[data-bereich="admin"] > .topbar .topbar-icon { color: #8a5a00; }
}

/* Die schlanke Kopfleiste (Mond, Postfach, Profil) bleibt beim Scrollen oben
   stehen und hat einen deckenden Grund, damit nichts darunter durchscheint. */
@media (min-width: 1024px) {
  html body #app[data-bereich="admin"] > .topbar { position: sticky; top: 0; z-index: 20; background: var(--ink, #000) !important; border-bottom: 1px solid var(--line) !important; padding-block: 8px; }
  html[data-adm-theme="hell"] body #app[data-bereich="admin"] > .topbar,
  html[data-adm-theme="hell"] #app[data-bereich="admin"] > .topbar { background: var(--adm-seite) !important; border-bottom: 1px solid var(--line) !important; }
}

/* Profilbild statt Anfangsbuchstabe (Mitgliederliste und Detail) */
.adm-m-avatar.mit-bild { padding: 0; overflow: hidden; background: var(--panel-2); }
.adm-m-avatar.mit-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 1024px) {
  html body #app[data-bereich="admin"] > .topbar { transition: transform 0.2s ease; }
  html body #app[data-bereich="admin"] > .topbar.ausgeblendet { transform: translateY(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  html body #app[data-bereich="admin"] > .topbar { transition: none; }
}

/* ── Admin Hell: DFQ-Gruen fuer Navigation und Coaching-Dashboard ───────────
   Der Inhaltsbereich bleibt warm und hell. Die linke Leiste ist die feste
   gruene Markenflaeche; Gold markiert nur Auswahl und Hauptaktionen. */
@media (min-width: 1024px) {
  html[data-adm-theme="hell"] #app[data-bereich="admin"] > .adm-nav:not(.hidden) {
    --text: #f6f3e7;
    --text-dim: #d5d9c2;
    --adm-nav-text: #f0f1e7;
    --line: rgba(246, 243, 231, 0.18);
    background: #46552a;
    border-right-color: #35411f;
    box-shadow: 8px 0 24px rgba(39, 48, 22, 0.1);
  }
  html[data-adm-theme="hell"] .adm-nav-marke img {
    filter: none;
  }
  html[data-adm-theme="hell"] .adm-nav-marke small,
  html[data-adm-theme="hell"] .adm-nav button.on .adm-nav-ico {
    color: #f1b61c;
  }
  html[data-adm-theme="hell"] .adm-nav-marke strong,
  html[data-adm-theme="hell"] .adm-nav button,
  html[data-adm-theme="hell"] .adm-nav-ico {
    color: #f6f3e7;
  }
  html[data-adm-theme="hell"] .adm-nav h3 {
    color: #d5d9c2;
  }
  html[data-adm-theme="hell"] .adm-nav button:hover {
    background: rgba(255, 255, 255, 0.09);
  }
  html[data-adm-theme="hell"] .adm-nav button:hover .adm-nav-ico {
    color: #ffffff;
  }
  html[data-adm-theme="hell"] .adm-nav button.on {
    background: rgba(241, 182, 28, 0.14);
    border-color: #f1b61c;
    color: #ffffff;
  }
}

html[data-adm-theme="hell"] #app[data-screen="coach-dashboard"] .dash-zeitraum {
  border-color: #bcc5a3;
  border-radius: 8px;
  overflow: hidden;
  background: #fffdf8;
}
html[data-adm-theme="hell"] #app[data-screen="coach-dashboard"] .dash-zeitraum button {
  border-right-color: #d9ddcc;
  color: #626957;
}
html[data-adm-theme="hell"] #app[data-screen="coach-dashboard"] .dash-zeitraum button.on {
  background: #586a31;
  color: #ffffff;
  box-shadow: inset 0 -3px #e0a100;
}
html[data-adm-theme="hell"] #app[data-screen="coach-dashboard"] .adm-kachel {
  border-color: #ccd2b9;
}
html[data-adm-theme="hell"] #app[data-screen="coach-dashboard"] .adm-kachel-icon {
  background: #e5ead8;
  color: #52642c;
}
html[data-adm-theme="hell"] #app[data-screen="coach-dashboard"] .adm-kachel-rot .adm-kachel-icon {
  background: #f8e1db;
  color: #b4401c;
}
html[data-adm-theme="hell"] #app[data-screen="coach-dashboard"] .adm-kachel-handlung .adm-kachel-icon {
  background: #f7ebc8;
  color: #8a5d00;
}
html[data-adm-theme="hell"] #app[data-screen="coach-dashboard"] .adm-kachel-aktiv .adm-kachel-icon {
  background: #dce9d5;
  color: #3d6b14;
}
html[data-adm-theme="hell"] #app[data-screen="coach-dashboard"] .dash-tabelle thead th {
  background: #46552a;
  color: #f6f3e7;
  border-bottom-color: #35411f;
}
html[data-adm-theme="hell"] #app[data-screen="coach-dashboard"] .dash-tabelle tbody tr:hover {
  background: #f0f3e8;
}

/* Shooting-Tag: kleiner Hinweis im Mahlzeiten-Abschnitt */
.shooting-chip {
  display: inline-block;
  margin: 0 0 10px;
  padding: 4px 10px;
  font-family: "Share Tech Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--gold);
  border: 1px solid var(--gold);
  background: transparent;
}

/* ── Elite-Ziele: Tafel oben auf WOCHE ──────────────────────────── */
.elite-ziel {
  margin-top: 6px;
}
.ziel-zeile {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.ziel-plakette {
  width: 60px;
  height: 60px;
  background: center / contain no-repeat;
  display: grid;
  place-items: center;
  text-align: center;
}
.ziel-plakette.gold { background-image: url("/ui/dfq-rank-gold.webp"); }
.ziel-plakette.silber { background-image: url("/ui/dfq-rank-silver.webp"); }
.ziel-plakette.bronze { background-image: url("/ui/dfq-rank-bronze.webp"); }
.ziel-plakette b {
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 13px;
  line-height: 1;
  color: #10120b;
  letter-spacing: 0.02em;
  margin-top: -4px;
}
.ziel-plakette small {
  display: block;
  font-family: "Share Tech Mono", monospace;
  font-size: 8px;
  letter-spacing: 0.1em;
  color: #2a2410;
}
.ziel-titel {
  font-family: "Gunplay", "Black Ops One", sans-serif;
  font-size: 15px;
  color: var(--gold);
  letter-spacing: 0.04em;
  margin: 0 0 2px;
}
.ziel-text {
  font-size: 13px;
  line-height: 1.35;
  color: var(--text);
  margin: 0;
}
.ziel-stand {
  margin-top: 2px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}
.ziel-stand p {
  font-family: "Share Tech Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  margin: 0 0 8px;
}
.ziel-balken {
  height: 6px;
  background: var(--ink);
  border: 1px solid var(--line);
}
.ziel-balken i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--olive), var(--gold));
}
.ziel-marken {
  display: flex;
  justify-content: space-between;
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 6px;
}
.sieger-popup .lift-fenster-innen {
  text-align: center;
}
.sieger-popup .btn {
  width: 100%;
  margin-top: 10px;
}

/* WOCHE: Das DFQ-Logo ragt unten ueber das Wochen-Ranking-Schild. Die Kopfzeile
   ist etwa 91 px hoch, das Logo ist hier groesser und hangelt darueber hinaus. */
html body #app:has(.ranking-board) .topbar::after {
  width: 180px;
  height: 102px;
  z-index: 40;
}
/* Nachrichten-Knopf und Profilbild liegen immer vor dem Logo */
html body #app:has(.ranking-board) .topbar-actions {
  position: relative;
  z-index: 50;
}

/* Elite-Ziele: goldene Tafel, damit sie sich von der Rangliste abhebt */
html body #app .elite-ziel {
  margin: 10px 0 14px;
  border: 1px solid var(--gold-dim, #7a5a10);
  border-top: 3px solid var(--gold, #f2a900);
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(242, 169, 0, 0.16), transparent 70%),
    linear-gradient(180deg, #1c1706 0%, #0d0b04 100%);
  box-shadow: 0 0 18px rgba(242, 169, 0, 0.12), inset 0 0 0 1px rgba(242, 169, 0, 0.08);
}
html body #app .elite-ziel .ziel-zeile {
  border-top-color: rgba(242, 169, 0, 0.22);
}

/* Elite-Ziele: staerker abgehoben (Gold-Rahmen, Kopfstreifen, Glanz) */
html body #app .elite-ziel {
  position: relative;
  border: 1px solid var(--gold, #f2a900);
  border-top-width: 4px;
  background:
    radial-gradient(110% 55% at 50% 0%, rgba(255, 196, 40, 0.30), transparent 70%),
    linear-gradient(180deg, #2a2108 0%, #120e03 100%);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.6),
    0 0 26px rgba(242, 169, 0, 0.30),
    inset 0 0 0 1px rgba(255, 210, 90, 0.18);
}
html body #app .elite-ziel::before {
  content: "";
  position: absolute;
  inset: -4px 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, #8a5f00, #ffd45a 35%, #fff2b0 50%, #ffd45a 65%, #8a5f00);
}
html body #app .elite-ziel .panel-kicker {
  color: #ffd45a;
  letter-spacing: 0.22em;
}
html body #app .elite-ziel .panel-title {
  color: #fff2b0;
  text-shadow: 0 0 14px rgba(255, 196, 40, 0.55);
}
html body #app .elite-ziel .ziel-zeile {
  border-top-color: rgba(255, 196, 40, 0.35);
  background: linear-gradient(90deg, rgba(255, 196, 40, 0.10), transparent 70%);
}
html body #app .elite-ziel .ziel-plakette {
  filter: drop-shadow(0 0 8px rgba(255, 196, 40, 0.55));
}
html body #app .elite-ziel .ziel-titel {
  color: #ffd45a;
  text-shadow: 0 0 10px rgba(255, 196, 40, 0.35);
}
html body #app .elite-ziel .ziel-stand p {
  color: #f1dfa6;
}
html body #app .elite-ziel .ziel-balken {
  height: 8px;
  border-color: rgba(255, 196, 40, 0.5);
  background: #070602;
}
html body #app .elite-ziel .ziel-balken i {
  background: linear-gradient(90deg, #b07d00, #ffd45a 70%, #fff2b0);
  box-shadow: 0 0 12px rgba(255, 196, 40, 0.8);
}
html body #app .elite-ziel .ziel-marken {
  color: #d9c07a;
}

/* ── Lift der Woche: Erklaer-Pop-up (lift-info-*) und Admin-Karte ───────────
   Nutzt die Huelle .lift-fenster (Handy: Blatt von unten, ab 620 px mittig).
   Alle Tippflaechen mindestens 44 px. */
.lift-fenster .lift-fenster-innen.lift-info {
  display: flex; flex-direction: column; gap: 12px; box-sizing: border-box;
  width: 100%; max-width: 460px; max-height: calc(100dvh - 24px);
  padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
  background: #070905; border: 2px solid #f2a900; border-bottom: none; color: #efeee6;
  font-family: Oswald, sans-serif; overflow-x: hidden; overflow-y: auto;
}
@media (min-width: 620px) {
  .lift-fenster .lift-fenster-innen.lift-info { border-bottom: 2px solid #f2a900; padding-bottom: 14px; }
}
.lift-info-kopf { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; background: #f2a900; color: #000; }
.lift-info-hantel { flex: none; font-size: 26px; line-height: 1; }
.lift-info-kopf h2 { flex: 1; min-width: 0; margin: 0; font: 400 19px/1.1 "Black Ops One", Oswald, sans-serif; letter-spacing: .03em; color: #000; overflow-wrap: anywhere; }
.lift-info-zu { flex: none; width: 44px; height: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; background: #000; color: #f2a900; border: 0; font-size: 24px; line-height: 1; cursor: pointer; }
.lift-info-liste { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.lift-info-liste > li { display: grid; gap: 3px; padding: 10px 12px; background: #0c0e09; border: 1px solid #2b3025; border-left: 3px solid #f2a900; }
.lift-info-liste strong { color: #f2a900; font: 400 13px "Share Tech Mono", monospace; letter-spacing: .1em; }
.lift-info-liste span { font-size: 16px; line-height: 1.35; }
.lift-info-preise { display: grid; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.lift-info-platz { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 6px 12px; background: rgba(242, 169, 0, .1); border: 1px solid #545a2c; }
.lift-info-platz span { font: 400 13px "Share Tech Mono", monospace; letter-spacing: .1em; color: #b9bdac; }
.lift-info-platz b { font: 400 22px/1 "Black Ops One", Oswald, sans-serif; color: #f2a900; white-space: nowrap; }
.lift-info-platz.p1 { border-color: #f2a900; background: rgba(242, 169, 0, .18); }
.lift-info-danach { display: grid; gap: 6px; }
.lift-info-danach p { margin: 0; font-size: 16px; line-height: 1.35; }
.lift-info-ende { display: grid; gap: 4px; padding: 10px 12px; text-align: center; border-top: 1px solid #2b3025; }
.lift-info-motto { margin: 0; color: #b9bdac; font-size: 15px; font-style: italic; }
.lift-info-schluss { margin: 0; color: #f2a900; font: 400 20px/1.1 "Black Ops One", Oswald, sans-serif; letter-spacing: .06em; }
.lift-info-ok { flex: none; min-height: 48px; padding: 0 16px; background: #f2a900; color: #000; border: 1px solid #f2a900; font: 700 16px Oswald, sans-serif; letter-spacing: .1em; cursor: pointer; }
.lift-info-ok:hover { background: #ffc233; }
.lift-info-zu:focus-visible, .lift-info-ok:focus-visible, .lift-info-link:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.lift-info-link { display: inline-flex; align-items: center; min-height: 44px; margin: 4px 0; padding: 0 2px; background: none; border: 0; color: #f2a900; font: 600 14px Oswald, sans-serif; letter-spacing: .04em; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: left; }
.lift-info-adm { margin-top: 8px; }
.lift-info-adm-karte .adm-kachel-text strong { overflow-wrap: break-word; }
@media (max-width: 599px) {
  .lift-info-adm .adm-kacheln { grid-template-columns: minmax(0, 1fr); }
}

/* Lift der Woche: einzelne Lifts aus dem Voting nehmen (Admin, Freigaben).
   Nur Variablen, keine festen Farben; Hell und Dunkel ziehen mit. */
.lw-liste { margin-top: 14px; }
.lw-liste .adm-reihe-aktionen { align-items: center; }
.lw-liste .adm-reihe-text .lw-liste-link { margin: 6px 0 0; }
.lw-liste-grund { display: block; margin-top: 6px; color: var(--text-body); overflow-wrap: anywhere; }
.lw-liste-aus .adm-reihe-text strong,
.lw-liste-aus .adm-avatar { opacity: 0.65; }
.lw-liste-vorschau:not([hidden]) { display: block; }
.lw-liste-vorschau .anfrage-post { display: block; width: 100%; max-width: 540px; min-height: 420px; }
.lw-ausschluss .adm-modal-innen { width: min(520px, 100%); }
.lw-ausschluss .lw-ausschluss-wer { margin: 8px 0 12px; color: var(--text-body); }
.lw-ausschluss-wer strong { color: var(--text); }
.lw-ausschluss-hinweis { display: grid; gap: 6px; margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--adm-rot-rand, #8f3a30); background: var(--adm-rot-bg, rgba(255, 90, 70, 0.06)); }
.lw-ausschluss-hinweis p { margin: 0; font-family: Oswald, sans-serif; font-size: 14px; line-height: 1.4; color: var(--text-body); }
.lw-ausschluss-hinweis .lw-ausschluss-kern { font-weight: 600; color: var(--adm-rot-text, #ff9a8c); }
.lw-ausschluss-label { display: block; margin: 0 0 6px; font-family: Oswald, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
.lw-ausschluss-grund { display: block; width: 100%; box-sizing: border-box; min-height: 84px; resize: vertical; padding: 10px 12px; background: var(--adm-feld, var(--panel-2)); border: 1px solid var(--line); color: var(--text); font: 400 16px/1.4 Oswald, sans-serif; }
.lw-ausschluss-grund:focus-visible { outline: 2px solid var(--gold-dim); outline-offset: 1px; }
.lw-ausschluss .lw-ausschluss-fehler { margin: 10px 0 0; font-family: Oswald, sans-serif; font-size: 14px; color: var(--adm-rot-text, #ff9a8c); }
.lw-ausschluss .lw-ausschluss-fehler[hidden] { display: none; }
.lw-ausschluss .adm-modal-fuss .button { width: auto; min-height: 44px; margin: 0; padding: 0 16px; border: 1px solid var(--line); background: transparent; color: var(--text); font: 600 14px Oswald, sans-serif; letter-spacing: 0.08em; cursor: pointer; }
.lw-ausschluss .adm-modal-fuss .button.danger { background: var(--adm-rot-bg, rgba(255, 90, 70, 0.06)); border-color: var(--adm-rot-rand, #8f3a30); color: var(--adm-rot-text, #ff7d6e); }
.lw-ausschluss .adm-modal-fuss .button.danger:hover:not(:disabled) { background: var(--adm-rot-bg2, rgba(255, 90, 70, 0.14)); }
.lw-ausschluss .adm-modal-fuss .button:disabled { opacity: 0.5; cursor: default; }
.lw-ausschluss .adm-modal-fuss .button:focus-visible { outline: 2px solid var(--gold-dim); outline-offset: 2px; }
.lw-ausschluss .adm-modal-fuss .button[hidden] { display: none; }
@media (max-width: 599px) {
  .lw-ausschluss .adm-modal-fuss { flex-direction: column-reverse; }
  .lw-ausschluss .adm-modal-fuss .button { width: 100%; }
  .lw-liste .adm-reihe-aktionen .button { flex: 1 1 140px; }
}