/* CrewPuls — Stylesheet (dunkles OLED-Design, Druck-Ansicht am Ende) */

:root {
  --bg: #0A0C10;
  --panel: #12151E;
  --rand: #232838;
  --radius: 20px;
  --akzent: #FF6B5E;
  --violett: #8B5CF6;
  --verlauf: linear-gradient(135deg, #FF6B5E, #8B5CF6);
  --text: #F4F6FB;
  --text2: #8A93A6;
  --warn: #E8B45A;
  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 16px;
  line-height: 1.45;
  min-height: 100vh;
}

button { font-family: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 16px; }
img { max-width: 100%; display: block; }
.zahl { font-variant-numeric: tabular-nums; }

/* Linien-Icons: stroke 1.8, runde Kappen (Stil aus design/icons.svg) */
.ik { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Grund-Layout ---------- */

#inhalt {
  max-width: 560px;
  margin: 0 auto;
  padding: 18px 16px calc(96px + env(safe-area-inset-bottom, 0px));
}

.tab-seite > * + * { margin-top: 14px; }

.panel {
  background: var(--panel);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 16px;
}

h1, h2, h3 { font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: 22px; }
h3 { font-size: 17px; }

.klein { font-size: 13px; color: var(--text2); }
.muted { color: var(--text2); }

.seiten-kopf { padding: 4px 2px 0; }
.seiten-kopf h2 { font-size: 26px; }
.seiten-kopf .klein { margin-top: 2px; }

.kopf-zeile { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 14px;
  padding: 12px 18px;
  font-size: 16px;
  font-weight: 600;
  transition: transform .08s ease, opacity .15s ease;
}
.btn:active { transform: scale(.97); }
.btn.primar { background: var(--akzent); color: #fff; }
.btn.verlauf { background: var(--verlauf); color: #fff; }
.btn.geist { background: transparent; color: var(--text2); border: 1px solid var(--rand); }
.btn.klein-btn { padding: 8px 12px; font-size: 14px; border-radius: 11px; }
.btn.breit { width: 100%; }
.btn[disabled] { opacity: .5; pointer-events: none; }

.text-link {
  color: var(--akzent);
  font-size: 14px;
  font-weight: 600;
  padding: 6px 0;
}

/* ---------- Formulare ---------- */

.feld { display: block; margin-bottom: 12px; }
.feld > span { display: block; font-size: 13px; color: var(--text2); margin-bottom: 6px; }
.feld input, .feld select, .feld textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--rand);
  border-radius: 12px;
  color: var(--text);
  padding: 11px 12px;
  outline: none;
}
.feld input:focus, .feld select:focus, .feld textarea:focus { border-color: var(--akzent); }
.feld textarea { min-height: 72px; resize: vertical; }
/* Datumsfelder (Aktivität/Workout nachtragen, Abwesenheit): dunkler nativer
   Picker + Token-Farben statt Browser-Default */
.feld input[type="date"] { color-scheme: dark; min-height: 44px; }

.inline-fehler {
  color: var(--akzent);
  font-size: 14px;
  margin: 4px 0 10px;
}

.feld-zeile { display: flex; gap: 10px; }
.feld-zeile .feld { flex: 1; }

/* Schalter (Toggle) */
.schalter-zeile {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 6px 0;
}
.schalter-zeile .beschreibung { font-size: 13px; color: var(--text2); margin-top: 2px; }
.schalter { position: relative; width: 50px; height: 30px; flex: none; }
.schalter input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.schalter .bahn {
  position: absolute; inset: 0;
  background: var(--bg); border: 1px solid var(--rand); border-radius: 999px;
  transition: background .2s ease, border-color .2s ease;
  pointer-events: none;
}
.schalter .knopf {
  position: absolute; top: 3px; left: 3px; width: 24px; height: 24px;
  background: var(--text2); border-radius: 50%;
  transition: transform .2s ease, background .2s ease;
  pointer-events: none;
}
.schalter input:checked ~ .bahn { background: var(--verlauf); border-color: transparent; }
.schalter input:checked ~ .knopf { transform: translateX(20px); background: #fff; }

/* ---------- Anmeldung ---------- */

.anmeldung {
  max-width: 420px;
  margin: 0 auto;
  padding: 12vh 20px 40px;
  text-align: center;
}
.anmeldung-logo svg { border-radius: 22px; }
.anmeldung-titel { font-size: 32px; margin-top: 14px; }
.anmeldung-untertitel { color: var(--text2); margin: 4px 0 22px; }
.anmeldung-panel { text-align: left; }
.anmeldung-panel .btn { margin-top: 6px; }

/* ---------- Tab-Leiste ---------- */

#tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: space-around;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
  background: rgba(10, 12, 16, .92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--rand);
  z-index: 40;
}
.tabbtn {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--text2);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 12px;
  min-width: 58px;
}
.tabbtn svg { width: 24px; height: 24px; }
.tabbtn .ik { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tabbtn.aktiv { color: var(--akzent); }

/* ---------- Toasts ---------- */

#toasts {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex; flex-direction: column; gap: 8px;
  width: min(92vw, 420px);
  pointer-events: none;
}
.toast {
  background: var(--panel);
  border: 1px solid var(--rand);
  border-left: 3px solid var(--violett);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 14px;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .25s ease, transform .25s ease;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .5);
}
.toast.fehler { border-left-color: var(--akzent); }
.toast.sichtbar { opacity: 1; transform: translateY(0); }

/* ---------- Sync-Badge ---------- */

.sync-badge {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  background: var(--panel);
  border: 1px solid var(--warn);
  color: var(--warn);
  font-size: 13px;
  font-weight: 600;
  border-radius: 999px;
  padding: 8px 14px;
  z-index: 45;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .5);
}

/* ---------- Heute ---------- */

.naechster-tag .tag-nr { font-size: 13px; color: var(--text2); text-transform: uppercase; letter-spacing: .08em; }
.naechster-tag h2 { font-size: 28px; margin: 2px 0 4px; }
.naechster-tag .begruendung { color: var(--text2); font-size: 14px; margin-bottom: 14px; }

.hinweis-karte {
  display: flex; gap: 10px; align-items: flex-start;
  border-left: 3px solid var(--warn);
  font-size: 14px;
}
.hinweis-karte.comeback { border-left-color: var(--violett); }
.hinweis-karte .typ { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text2); display: block; }

.tag-wahl-liste { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.tag-wahl-liste .tag-wahl {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--bg); border: 1px solid var(--rand); border-radius: 12px;
  padding: 10px 14px; font-weight: 600;
}
.tag-wahl-liste .tag-wahl .klein { font-weight: 400; }

/* ---------- Aktivitäten (Multi-Sport, Heute-Tab) ---------- */

.akt-woche-titel { font-size: 14px; margin: 14px 0 2px; }

.aktivitaet-zeile {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--rand);
}
.aktivitaet-zeile:last-child { border-bottom: none; padding-bottom: 0; }
.akt-icon {
  width: 38px; height: 38px; flex: none;
  background: var(--bg); border: 1px solid var(--rand); border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text2);
}
.akt-icon svg { width: 21px; height: 21px; }
.akt-info { flex: 1; min-width: 0; }
.akt-sport { font-weight: 700; font-size: 15px; }
.akt-meta { font-size: 12px; color: var(--text2); margin-top: 1px; }
.akt-loeschen {
  width: 34px; height: 34px; flex: none;
  border: 1px solid var(--rand); border-radius: 10px;
  color: var(--text2); font-size: 15px;
}

/* Sportart-Chips im "+ Aktivität"-Modal */
.sport-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 14px; }
.sport-chip {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--rand); border-radius: 999px;
  padding: 8px 13px;
  font-size: 14px; font-weight: 600; color: var(--text2);
}
.sport-chip svg { width: 19px; height: 19px; }
.sport-chip.aktiv { background: var(--verlauf); border-color: transparent; color: #fff; }

/* Pill-Reihen (Intensität, Personen) im Modal */
.pill-zeile { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }

/* Beinlast-Hinweis: Warn-Ampel-Karte im Stil der "Plan denkt mit"-Karte */
.ampel-karte { border-left: 3px solid var(--warn); font-size: 14px; }
.ampel-karte .ampel-pill {
  display: inline-block;
  border: 1px solid var(--warn); border-radius: 999px;
  color: var(--warn); background: rgba(232, 180, 90, .12);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  padding: 3px 10px; margin-bottom: 8px;
}
.ampel-karte .ampel-empfehlung { font-size: 13px; font-weight: 600; color: var(--warn); margin-top: 6px; }

/* ---------- Workout ---------- */

.workout-kopf { display: flex; align-items: center; gap: 10px; }
.btn-zurueck {
  width: 40px; height: 40px; flex: none;
  border: 1px solid var(--rand); border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text2);
}
.btn-zurueck svg { width: 20px; height: 20px; }

.personen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.personen .label { font-size: 13px; color: var(--text2); width: 100%; }
.pill {
  border: 1px solid var(--rand);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 14px; font-weight: 600;
  color: var(--text2);
}
.pill.aktiv { background: var(--verlauf); border-color: transparent; color: #fff; }

.uebung .ue-kopf { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.uebung .ue-name { font-weight: 700; font-size: 16px; }
.uebung .ue-meta { font-size: 13px; color: var(--text2); margin-top: 2px; }
.uebung .ue-notiz { font-size: 13px; color: var(--warn); margin-top: 2px; }

.geraet-chip {
  display: inline-block;
  background: var(--bg);
  border: 1px solid var(--rand);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text2);
  padding: 2px 7px;
  vertical-align: 2px;
  margin-left: 6px;
  white-space: nowrap;
}

.letzte-leistung {
  background: var(--bg);
  border: 1px solid var(--rand);
  border-radius: 12px;
  padding: 10px 12px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--text2);
}
.letzte-leistung .vorschlag {
  margin-top: 6px;
  color: var(--text);
  font-weight: 600;
}
.letzte-leistung .vorschlag .v-gewicht {
  background: var(--verlauf);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 16px;
  font-weight: 800;
}

.satz-zeile {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px;
}
.satz-nr { width: 30px; flex: none; font-size: 13px; font-weight: 700; color: var(--text2); }

.stepper {
  display: flex; align-items: center; gap: 2px;
  background: var(--bg);
  border: 1px solid var(--rand);
  border-radius: 12px;
  padding: 3px;
  flex: 1;
  justify-content: space-between;
}
.stepper button {
  width: 34px; height: 34px; flex: none;
  border-radius: 9px;
  background: var(--panel);
  border: 1px solid var(--rand);
  color: var(--text);
  font-size: 19px;
  font-weight: 600;
  line-height: 1;
}
.stepper.gewicht { flex: 1.35; }
.stepper button:active { background: var(--rand); }
.stepper .wert {
  font-size: 19px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: center;
  min-width: 44px;
}
.stepper .einheit { font-size: 11px; color: var(--text2); margin-right: 2px; }

.haken {
  width: 40px; height: 40px; flex: none;
  border-radius: 12px;
  border: 1px solid var(--rand);
  display: flex; align-items: center; justify-content: center;
  color: var(--text2);
}
.haken svg { width: 20px; height: 20px; }
.haken .ik { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.haken.ok { background: var(--verlauf); border-color: transparent; color: #fff; }
.haken.wartet { border-color: var(--warn); color: var(--warn); }

.alt-liste { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.alt-liste .alt-eintrag {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  background: var(--bg); border: 1px solid var(--rand); border-radius: 12px;
  padding: 9px 12px; font-size: 14px; font-weight: 600; text-align: left;
}
.alt-liste .alt-eintrag .klein { font-weight: 400; }

.getauscht-hinweis { font-size: 12px; color: var(--violett); margin-top: 4px; }

/* Abschluss-Overlay */
.abschluss {
  text-align: center;
  padding: 28px 20px;
}
.abschluss .punkte-zahl {
  font-size: 64px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: var(--verlauf);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1.1;
}
.abschluss .punkte-label { color: var(--text2); margin-bottom: 18px; }
.abschluss .medaille { margin-top: 8px; width: 100%; text-align: left; }

/* ---------- Plan ---------- */

.plan-tag { padding: 0; overflow: hidden; }
.plan-tag .tag-kopf {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px;
  text-align: left;
}
.plan-tag .tag-kopf .titel { font-weight: 700; font-size: 16px; }
.plan-tag .tag-kopf .pfeil { transition: transform .2s ease; color: var(--text2); flex: none; }
.plan-tag .tag-kopf .pfeil svg { width: 18px; height: 18px; display: block; }
.plan-tag.offen .tag-kopf .pfeil { transform: rotate(180deg); }
.plan-tag .tag-inhalt { display: none; border-top: 1px solid var(--rand); padding: 6px 16px 14px; }
.plan-tag.offen .tag-inhalt { display: block; }

.plan-uebung { padding: 10px 0; border-bottom: 1px solid var(--rand); }
.plan-uebung:last-child { border-bottom: none; }
.plan-uebung .pu-zeile { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.plan-uebung .pu-name { font-weight: 600; font-size: 15px; }
.plan-uebung .pu-schema { font-size: 14px; color: var(--text2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.plan-uebung .pu-notiz { font-size: 13px; color: var(--text2); margin-top: 2px; }

/* ---------- Geräte ---------- */

.geraete-gitter { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.geraet-karte { padding: 0; overflow: hidden; text-align: left; display: block; width: 100%; }
.geraet-foto { height: 110px; background: var(--bg); position: relative; }
.geraet-foto img { width: 100%; height: 100%; object-fit: cover; }
.geraet-foto .platzhalter {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--rand);
}
.geraet-foto .platzhalter svg { width: 42px; height: 42px; }
.geraet-foto .platzhalter .ik { fill: none; stroke: var(--text2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .5; }
.geraet-korpus { padding: 12px 14px 14px; }
.geraet-code { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.geraet-name { font-size: 14px; color: var(--text); margin-top: 1px; }
.geraet-hersteller { font-size: 12px; color: var(--text2); }
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.chip {
  background: var(--bg);
  border: 1px solid var(--rand);
  border-radius: 999px;
  font-size: 11px;
  color: var(--text2);
  padding: 3px 9px;
  font-variant-numeric: tabular-nums;
}
.chip b { color: var(--text); }

.einstellung-zeile { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.einstellung-zeile input {
  background: var(--bg); border: 1px solid var(--rand); border-radius: 10px;
  color: var(--text); padding: 9px 10px; width: 100%; outline: none;
}
.einstellung-zeile input:focus { border-color: var(--akzent); }
.einstellung-zeile .entfernen {
  width: 36px; height: 36px; flex: none;
  border: 1px solid var(--rand); border-radius: 10px;
  color: var(--text2); font-size: 18px;
}

/* ---------- QR-Codes (Gerätekarte, Crew-Beitritt) ---------- */

/* Weißer Hintergrund + Innenabstand: die Quiet Zone der QR-Codes bleibt auch
   auf dem dunklen Design lesbar bzw. gut abfotografierbar */
.qr-klein { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.qr-klein img { width: 96px; height: 96px; flex: none; background: #fff; border-radius: 12px; padding: 6px; }

.beitritt-qr { display: flex; align-items: center; gap: 14px; margin: 12px 0; }
.beitritt-qr img { width: 128px; height: 128px; flex: none; background: #fff; border-radius: 12px; padding: 8px; }

/* Knopfgruppe in Seitenköpfen (Geräte-Tab) */
.kopf-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

/* Der Etikettenbogen existiert nur für den Druck (qrEtikettenDrucken in app.js) */
#qr-druckbogen { display: none; }

/* ---------- Modal ---------- */

.modal-hintergrund {
  position: fixed; inset: 0;
  background: rgba(4, 6, 10, .72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index: 60;
  display: flex; align-items: flex-end; justify-content: center;
}
.modal-panel {
  background: var(--panel);
  border: 1px solid var(--rand);
  border-radius: var(--radius) var(--radius) 0 0;
  width: min(100%, 560px);
  max-height: 88vh;
  overflow-y: auto;
  padding: 18px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  animation: hochfahren .22s ease;
}
.modal-panel.mittig { border-radius: var(--radius); align-self: center; }
@keyframes hochfahren { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.modal-kopf h3 { font-size: 18px; }
.modal-schliessen {
  width: 36px; height: 36px;
  border: 1px solid var(--rand); border-radius: 10px;
  color: var(--text2); font-size: 17px;
}

/* ---------- Crew ---------- */

.segmente {
  display: flex;
  background: var(--bg);
  border: 1px solid var(--rand);
  border-radius: 12px;
  padding: 3px;
  gap: 3px;
}
.segmente button {
  flex: 1;
  border-radius: 9px;
  padding: 8px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text2);
}
.segmente button.aktiv { background: var(--verlauf); color: #fff; }

.rang-zeile { display: flex; align-items: center; gap: 10px; padding: 9px 0; }
.rang-platz { width: 26px; flex: none; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text2); text-align: center; }
.rang-zeile.erster .rang-platz { color: var(--akzent); }
.rang-info { flex: 1; min-width: 0; }
.rang-name { font-weight: 700; font-size: 15px; display: flex; justify-content: space-between; gap: 8px; }
.rang-punkte { font-variant-numeric: tabular-nums; font-weight: 800; }
.rang-balken-bahn { height: 8px; background: var(--bg); border-radius: 999px; margin-top: 5px; overflow: hidden; }
.rang-balken { height: 100%; background: var(--verlauf); border-radius: 999px; min-width: 2%; }
.rang-detail { font-size: 12px; color: var(--text2); margin-top: 3px; font-variant-numeric: tabular-nums; }

.abstimmung-option {
  display: block; width: 100%; text-align: left;
  background: var(--bg); border: 1px solid var(--rand); border-radius: 12px;
  padding: 10px 12px; margin-top: 8px;
}
.abstimmung-option.meine { border-color: var(--violett); }
.abstimmung-option .ao-zeile { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; font-size: 15px; }
.abstimmung-option .ao-stimmen { font-variant-numeric: tabular-nums; color: var(--text2); }
.abstimmung-option .ao-balken-bahn { height: 6px; background: var(--panel); border-radius: 999px; margin-top: 6px; overflow: hidden; }
.abstimmung-option .ao-balken { height: 100%; background: var(--verlauf); border-radius: 999px; }
.abstimmung-option .ao-meine { font-size: 12px; color: var(--violett); margin-top: 4px; }

.vorschlag-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.vorschlag-chips .pill.gewaehlt { background: var(--verlauf); border-color: transparent; color: #fff; }

.abzeichen-gruppe { margin-top: 12px; }
.abzeichen-gruppe .ag-name { font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.medaillen { display: flex; flex-wrap: wrap; gap: 8px; }
.medaille {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg); border: 1px solid var(--rand); border-radius: 12px;
  padding: 7px 10px;
}
.medaille .ring {
  width: 34px; height: 34px; flex: none;
  border-radius: 50%;
  background: var(--verlauf);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; color: #fff;
  letter-spacing: .02em;
}
.medaille .m-titel { font-size: 13px; font-weight: 700; line-height: 1.2; }
.medaille .m-sub { font-size: 11px; color: var(--text2); }

.beitritt-code {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
  background: var(--verlauf);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-top: 4px;
}

/* ---------- Profil ---------- */

.bmi-anzeige { display: flex; align-items: baseline; gap: 12px; }
.bmi-wert { font-size: 44px; font-weight: 800; font-variant-numeric: tabular-nums; }
.bmi-kategorie {
  font-size: 13px; font-weight: 700;
  border: 1px solid var(--rand); border-radius: 999px;
  padding: 4px 12px; color: var(--text2);
}

.volumen-zeile { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.volumen-zeile .vl-label { width: 110px; flex: none; font-size: 13px; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.volumen-zeile .vl-bahn { flex: 1; height: 10px; background: var(--bg); border-radius: 999px; overflow: hidden; }
.volumen-zeile .vl-balken { height: 100%; background: var(--verlauf); border-radius: 999px; min-width: 2%; }
.volumen-zeile .vl-wert { width: 30px; flex: none; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 14px; }

.abwesenheit-eintrag {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 8px 0; border-bottom: 1px solid var(--rand);
  font-size: 14px; font-variant-numeric: tabular-nums;
}
.abwesenheit-eintrag:last-child { border-bottom: none; }
.abwesenheit-eintrag .grund { color: var(--text2); }

/* ---------- Statistik-Vollansicht (Profil-Tab) ---------- */

/* Übungs-Chips: horizontal scrollbar, ohne sichtbare Scrollleiste */
.uebung-chips {
  display: flex; gap: 8px;
  overflow-x: auto;
  padding: 2px 0 6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.uebung-chips::-webkit-scrollbar { display: none; }
.uebung-chips .pill { flex: none; white-space: nowrap; }

/* Charts (Inline-SVG): volle Panelbreite, Höhe folgt der viewBox */
.chart-box { margin-top: 12px; }
.chart-svg { display: block; width: 100%; height: auto; }
.chart-legende { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }
.chart-legende .lg {
  display: inline-block; width: 16px; height: 0;
  border-top: 2px solid; margin-right: 6px; vertical-align: middle;
}
.chart-legende .lg-gewicht { border-color: var(--akzent); }
.chart-legende .lg-e1rm { border-top-style: dashed; border-color: var(--violett); }

/* Kennzahlen-Zeile zur gewählten Übung */
.kennzahlen { display: flex; gap: 10px; margin-top: 12px; }
.kennzahlen .kz {
  flex: 1; min-width: 0;
  background: var(--bg); border: 1px solid var(--rand); border-radius: 12px;
  padding: 10px 8px; text-align: center;
}
.kennzahlen .kz-wert { font-size: 18px; font-weight: 800; }
.kennzahlen .kz-einheit { font-size: 12px; font-weight: 600; color: var(--text2); }
.kennzahlen .kz-label { font-size: 11px; color: var(--text2); margin-top: 2px; }
.kennzahlen .kz-sub { font-size: 10px; color: var(--text2); opacity: .75; }

/* Trainingskalender: Monatsraster Mo–So */
.kal-kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 10px; flex-wrap: wrap;
}
.kal-nav { display: flex; align-items: center; gap: 6px; }
.kal-monat {
  font-size: 14px; font-weight: 600; min-width: 122px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.kal-blaettern {
  width: 32px; height: 32px; flex: none;
  border: 1px solid var(--rand); border-radius: 10px;
  color: var(--text2); font-size: 18px; line-height: 1;
}
.kal-gitter { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.kal-wt { text-align: center; font-size: 11px; font-weight: 600; color: var(--text2); padding: 2px 0 6px; }
.kal-tag {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 4px 0 6px; border-radius: 10px;
}
.kal-tag.heute { background: var(--bg); box-shadow: inset 0 0 0 1px var(--rand); }
.kal-nr { font-size: 12px; }
.kal-punkt { width: 7px; height: 7px; border-radius: 50%; background: transparent; flex: none; }
.kal-punkt.workout { background: var(--akzent); }
.kal-punkt.aktivitaet { background: var(--violett); }
.kal-punkt.beides { background: var(--verlauf); }
.kal-legende { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; }
.kal-legende > span { display: inline-flex; align-items: center; gap: 6px; }

/* Rekorde-Liste */
.rekord-zeile {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 7px 0; border-bottom: 1px solid var(--rand);
  font-size: 14px;
}
.rekord-zeile:last-of-type { border-bottom: none; }
.rekord-icon { flex: none; }
.rekord-datum { flex: none; font-size: 12px; color: var(--text2); font-variant-numeric: tabular-nums; }
.rekord-name { flex: 1; min-width: 0; font-weight: 600; }
.rekord-wert { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- Heute-Karten „Was steht heute an?" (Multi-Sport, Phase A) ---------- */

.heute-karten { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.heute-karte {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; width: 100%; text-align: left;
}
.heute-karte.gym { grid-column: 1 / -1; }
.heute-karte:active { transform: scale(.98); }
.hk-icon {
  width: 44px; height: 44px; flex: none;
  background: var(--bg); border: 1px solid var(--rand); border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  color: var(--akzent);
}
.hk-icon svg { width: 24px; height: 24px; }
.hk-info { flex: 1; min-width: 0; }
.hk-titel {
  font-weight: 700; font-size: 16px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.hk-sub { font-size: 13px; color: var(--text2); margin-top: 1px; }
.hk-beg { font-size: 12px; color: var(--text2); margin-top: 1px; }
.hk-pill {
  border: 1px solid var(--warn); border-radius: 999px;
  color: var(--warn); background: rgba(232, 180, 90, .12);
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  padding: 2px 8px;
}
.tag-wahl-block { padding: 0 2px; }
/* Link-Zeile der Tag-Auswahl: „Anderen Tag wählen" + dezenter „Nachtragen"-Link (Phase F) */
.tag-wahl-links { display: flex; align-items: center; gap: 18px; }
.text-link.dezent-link { color: var(--text2); font-weight: 500; }

/* Nachtrag-Banner im Workout-Kopf (Phase F) — Warn-Stil wie die Ampel-Karte */
.nachtrag-banner b { color: var(--warn); }

/* Gym-Tabs (Plan, Geräte) dezent, wenn Gym nicht gewählt ist — erreichbar bleiben sie */
.tabbtn.dezent { opacity: .55; }

/* ---------- Verlauf-Vollansicht (Phase B) ---------- */

.verlauf-monat { margin-bottom: 4px; }
.verlauf-zeile {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  padding: 9px 0;
  border-bottom: 1px solid var(--rand);
}
.verlauf-zeile:last-child { border-bottom: none; padding-bottom: 0; }
.verlauf-pfeil { color: var(--text2); flex: none; transform: rotate(-90deg); }
.verlauf-pfeil svg { width: 16px; height: 16px; display: block; }

/* Workout-Detail (read-only) und Aktivitäts-Detail im Verlauf-Modal */
.vu-gruppe { padding: 9px 0; border-bottom: 1px solid var(--rand); }
.vu-gruppe:last-child { border-bottom: none; }
.vu-name { font-weight: 700; font-size: 15px; }
.vu-saetze { font-size: 13px; color: var(--text2); margin-top: 2px; }
.vu-detail {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  padding: 7px 0; border-bottom: 1px solid var(--rand);
  font-size: 14px;
}
.vu-detail:last-of-type { border-bottom: none; }

/* ---------- Vorschlag-Karte & Wetter (Phasen C + D) ---------- */

.vorschlag-karte { border-color: rgba(255, 107, 94, .45); }
.vk-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.vk-pill {
  border: 1px solid var(--akzent); border-radius: 999px;
  color: var(--akzent); background: rgba(255, 107, 94, .12);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  padding: 3px 10px;
}
.vk-haupt {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
}
.vk-haupt:active { transform: scale(.98); }
.vorschlag-alt { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.wetter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg);
  border: 1px solid var(--rand); border-radius: 999px;
  color: var(--text2);
  font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 3px 10px;
  white-space: nowrap;
}
.wetter-chip svg { width: 16px; height: 16px; flex: none; }
.seiten-kopf .wetter-chip { margin-top: 6px; }
/* Attribution (Open-Meteo, CC-BY) — dezent am Seitenende */
.wetter-fussnote { text-align: center; opacity: .75; padding-bottom: 2px; }

/* ---------- Wetter-Standort im Profil (Phase D) ---------- */

.ort-zeile {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 8px;
}
.ort-zeile .ort-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ort-treffer { display: flex; flex-direction: column; gap: 6px; }
.ort-treffer .ort-eintrag {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  background: var(--bg); border: 1px solid var(--rand); border-radius: 12px;
  padding: 9px 12px; font-size: 14px; font-weight: 600; text-align: left;
}
.ort-treffer .ort-eintrag .klein { font-weight: 400; flex: none; }

/* ---------- Gemeinsam trainieren & QR-Scanner (Phase E) ---------- */

.session-teilnehmer { margin-top: 2px; }

/* Session-QR im Modal: weißer Grund + Innenabstand = lesbare Quiet Zone */
.session-qr {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-align: center; padding: 6px 0 4px;
}
.session-qr img { width: 220px; height: 220px; background: #fff; border-radius: 16px; padding: 10px; }

/* Vollbild-Scanner: Kamerabild hinter abgedunkelter Maske mit Zielrahmen */
.scanner-overlay {
  position: fixed; inset: 0;
  background: #000;
  z-index: 80; /* über Modal (60), unter Toasts (100) */
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.scanner-overlay video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.scanner-rahmen {
  position: relative;
  width: min(68vw, 280px); height: min(68vw, 280px);
  border: 2px solid rgba(255, 255, 255, .9);
  border-radius: 24px;
  box-shadow: 0 0 0 100vmax rgba(4, 6, 10, .45); /* dunkelt alles außerhalb ab */
}
.scanner-hinweis {
  position: absolute; top: calc(18px + env(safe-area-inset-top, 0px));
  left: 0; right: 0; margin: 0 auto; width: max-content; max-width: 92vw;
  background: rgba(10, 12, 16, .75); color: var(--text);
  border-radius: 999px; padding: 8px 14px;
}
.scanner-schliessen {
  position: absolute; bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  left: 0; right: 0; margin: 0 auto; width: max-content;
  background: rgba(10, 12, 16, .8);
  border: 1px solid var(--rand); color: var(--text);
}

/* ---------- Plan-Editor (Bearbeiten-Modus im Plan-Tab) ---------- */

.tag-kopf-edit {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px;
}
.tag-kopf-edit > .klein { flex: none; }
.tag-titel-input {
  flex: 1; min-width: 0;
  background: var(--bg); border: 1px solid var(--rand); border-radius: 10px;
  color: var(--text); padding: 8px 10px;
  font-size: 15px; font-weight: 600; outline: none;
}
.tag-titel-input:focus { border-color: var(--akzent); }

.pe-knoepfe { display: flex; gap: 6px; flex: none; }
.pe-btn {
  width: 32px; height: 32px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--rand); border-radius: 10px;
  color: var(--text2); font-size: 15px; line-height: 1;
}
.pe-btn:active { background: var(--rand); }
.pe-btn[disabled] { opacity: .35; pointer-events: none; }
.pe-btn.pe-loeschen { color: var(--akzent); border-color: rgba(255, 107, 94, .45); }

.pe-uebung {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 0; border-bottom: 1px solid var(--rand);
}
.pe-uebung:last-of-type { border-bottom: none; }
.pe-uebung-info { flex: 1; min-width: 0; }
.pe-uebung-info .pu-name { font-weight: 600; font-size: 15px; }

/* Übungs-Modal: Katalog-Trefferliste + fester Kopf beim Bearbeiten */
.pu-katalog-liste {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 240px; overflow-y: auto;
  margin-bottom: 12px;
}
.pu-katalog-liste .pu-eintrag {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  background: var(--bg); border: 1px solid var(--rand); border-radius: 12px;
  padding: 9px 12px; font-size: 14px; font-weight: 600; text-align: left;
  flex: none;
}
.pu-katalog-liste .pu-eintrag .klein { font-weight: 400; flex: none; }
.pu-katalog-liste .pu-eintrag.aktiv { border-color: var(--akzent); background: rgba(255, 107, 94, .08); }
.pu-fest { margin-bottom: 12px; }
.pu-fest .pu-name { font-weight: 700; font-size: 16px; }

/* ---------- Trainer-Modus (Profil) ---------- */

.trainer-badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--verlauf); color: #fff;
  border-radius: 999px; padding: 6px 14px;
  font-size: 13px; font-weight: 700;
}
.trainer-badge svg { width: 15px; height: 15px; flex: none; }
.trainer-badge .ik { stroke-width: 2.2; }

/* ---------- Nur-Druck-Elemente (auf dem Bildschirm versteckt) ---------- */

.nur-druck { display: none; }

/* ---------- Druck: helles Klemmbrett-Layout für den Plan ---------- */

@media print {
  :root { --radius: 6px; }

  body { background: #fff; color: #111; font-size: 12px; }

  /* Bedienelemente nie mitdrucken */
  #tabbar, #toasts, #sync-badge, #modal-wurzel, .kein-druck { display: none !important; }

  /* Plan-Ansicht nur erzwingen, wenn der Plan-Tab schon gerendert wurde
     (renderPlan setzt body.plan-bereit) — sonst käme eine leere Seite heraus;
     ohne die Klasse druckt der Browser einfach die sichtbare Ansicht */
  body.plan-bereit #anmeldung,
  body.plan-bereit #tab-heute, body.plan-bereit #tab-geraete,
  body.plan-bereit #tab-crew, body.plan-bereit #tab-profil { display: none !important; }
  body.plan-bereit #haupt, body.plan-bereit #tab-plan { display: block !important; }
  body.plan-bereit #tab-plan[hidden] { display: block !important; }

  #inhalt { max-width: none; padding: 0; }

  .panel { background: #fff; border: 1px solid #999; color: #111; box-shadow: none; }
  .klein, .muted, .plan-uebung .pu-schema, .plan-uebung .pu-notiz { color: #444; }
  .seiten-kopf h2 { color: #111; }

  /* Alle Tage aufgeklappt, Umbruch innerhalb eines Tages vermeiden */
  .plan-tag { page-break-inside: avoid; margin-top: 10px; }
  .plan-tag .tag-inhalt { display: block !important; border-top: 1px solid #999; }
  .plan-tag .tag-kopf .pfeil { display: none; }
  .plan-tag .tag-kopf .titel, .plan-uebung .pu-name { color: #111; }
  .plan-uebung { border-bottom: 1px solid #ccc; }

  /* Schreib-Linien zum handschriftlichen Eintragen */
  .nur-druck { display: flex !important; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; }
  .druck-satz { font-size: 11px; color: #333; white-space: nowrap; }
  .druck-feld {
    display: inline-block;
    width: 46px;
    border-bottom: 1px solid #555;
    height: 12px;
    vertical-align: bottom;
  }
  .druck-kopfzeile { display: block !important; color: #444; font-size: 11px; margin-bottom: 8px; }
}

/* ---------- Druck: QR-Etikettenbogen (body.qr-druck, gesetzt von app.js) ---------- */

@media print {
  @page { size: A4; margin: 12mm; }

  /* Ganze App verstecken, nur der Etikettenbogen bleibt — steht bewusst NACH den
     Plan-Druckregeln, damit qr-druck auch bei gesetztem plan-bereit gewinnt */
  body.qr-druck #anmeldung, body.qr-druck #haupt { display: none !important; }

  body.qr-druck #qr-druckbogen {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr); /* ca. 3 Etiketten je Zeile */
    gap: 0;                                /* Schnittlinien liegen direkt aneinander */
    color: #111;
  }
  #qr-druckbogen .qr-etikett {
    border: 1px dashed #888;               /* gestrichelte Schnittlinien */
    padding: 6mm 4mm;
    text-align: center;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  #qr-druckbogen .qr-etikett img {
    width: 32mm; height: 32mm;
    margin: 0 auto;
    background: #fff;
    padding: 2mm;                          /* Quiet Zone bleibt lesbar */
  }
  #qr-druckbogen .qr-code-gross { font-size: 20pt; font-weight: 800; margin-top: 2mm; }
  #qr-druckbogen .qr-name { font-size: 10pt; margin-top: 1mm; }
  #qr-druckbogen .qr-marke {
    font-size: 8pt; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase;
    color: #666; margin-top: 2mm;
  }
}