/* ============================================================
   FARB-VARIABLEN
   ============================================================ */
:root {
  --bg-main: #14161f;
  --bg-card: #1b1e2a;
  --bg-card-2: #20232f;      /* leicht abgesetzt, z.B. für Sätze */
  --bg-nav: rgba(27, 30, 42, 0.68);
  --text-main: #ffffff;
  --text-muted: #7d8494;
  --accent-teal: #2fd9c2;        /* Karibik-Lagune statt Hellblau */
  --accent-green: #2ecc71;
  --trend-up: #2ecc71;
  --trend-down: #ef4a4a;
  --trend-same: #f2a93b;
  --border-subtle: #2a2e3d;
  --radius-lg: 22px;
  --radius-md: 14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  -webkit-tap-highlight-color: transparent;   /* kein graues Blitzen beim Tippen */
  overscroll-behavior: none;                   /* kein Gummiband-Zerren am Rand */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #000;
  display: flex;
  justify-content: center;
}

.app {
  width: 100%;
  max-width: 430px;
  height: 100vh;
  height: 100dvh;   /* auf dem Handy die echte sichtbare Hoehe */
  background: linear-gradient(180deg, #171a24 0%, #12141c 100%);
  color: var(--text-main);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.pages { flex: 1; position: relative; overflow: hidden; }

.page {
  position: absolute;
  inset: 0;
  /* oben Platz fuer Notch/Statusleiste, unten fuer die schwebende Nav */
  padding: calc(24px + env(safe-area-inset-top)) 20px calc(110px + env(safe-area-inset-bottom));
  display: none;
  overflow-y: auto;
  overflow-x: hidden;   /* verhindert, dass der Browser eigenmächtig waagerecht scrollt */
  touch-action: pan-y;  /* erlaubt vertikales Scrollen, überlässt waagerecht uns (JS) */
}

.page.active { display: block; }

.page-title { font-size: 26px; font-weight: 700; margin: 4px 0 20px; letter-spacing: -0.3px; }

.placeholder-text { color: var(--text-muted); }

/* ============================================================
   SWIPE-BEREICH
   ============================================================ */
.swipe-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.swipe-view {
  position: absolute;
  inset: 0;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  /* Muss hier nochmal stehen: touch-action wird NICHT vererbt. Ohne das
     schnappt sich der Browser die waagerechte Touch-Geste selbst und das
     Wischen kommt im JS nie an (nur die Maus funktionierte dann noch) */
  touch-action: pan-y;
  padding-bottom: 12px;
  transition: transform 0.32s cubic-bezier(.22,.9,.35,1);
  /* Scrollbalken dezent ausblenden - passt besser zum App-Look und kann
     dadurch auch nie an der Wischkante ins Nachbar-Panel reinragen */
  scrollbar-width: none;
}
.swipe-view::-webkit-scrollbar { display: none; }

/* Die äußere Workouts-Seite selbst soll nicht mehr scrollen - das übernehmen
   die beiden Panels (Plan / Historie) jetzt unabhängig voneinander */
#page-workouts { overflow-y: hidden; }

.swipe-dots {
  position: absolute;
  bottom: calc(96px + env(safe-area-inset-bottom));
  left: 0; right: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
}

.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border-subtle); }
.dot.active { background: var(--accent-teal); }

.plan-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.add-day-btn {
  width: 36px; height: 36px; border-radius: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  color: var(--accent-teal);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

/* ============================================================
   PLAN-LISTE
   ============================================================ */
.plan-day {
  background: linear-gradient(155deg, var(--bg-card) 0%, #191c27 100%);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: var(--radius-lg);
  padding: 18px 18px 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.plan-day:active { transform: scale(0.98); }

.plan-day-name { font-size: 17px; font-weight: 600; }
.plan-day-sub { font-size: 13px; color: var(--text-muted); margin-top: 4px; }

.play-button {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--accent-green);
  border: none; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; cursor: pointer;
  box-shadow: 0 4px 14px rgba(46, 204, 113, 0.35);
}

/* ============================================================
   HISTORIE  (mit "klebenden" Monats-Überschriften)
   ============================================================ */
.month-group { margin-bottom: 4px; }

.month-header {
  position: sticky;
  top: 0;
  background: linear-gradient(180deg, #14161f 78%, transparent 100%);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 10px 2px 8px;
  z-index: 2;
}

.history-entry {
  background: linear-gradient(155deg, var(--bg-card) 0%, #191c27 100%);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.history-name { font-weight: 600; font-size: 16px; }
.history-date { font-size: 13px; color: var(--text-muted); margin-top: 3px; }
.history-progress { font-weight: 700; font-size: 15px; }
.history-progress.positive { color: var(--trend-up); }
.history-progress.negative { color: var(--trend-down); }
.history-progress.neutral { color: var(--trend-same); }

/* ============================================================
   DETAIL-HEADER (Logbook & Day-Edit)
   ============================================================ */
.detail-header { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }

.back-button {
  background: var(--bg-card); border: none; color: var(--text-main);
  width: 38px; height: 38px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}

.start-button {
  margin-left: auto;
  background: var(--accent-green);
  color: #0f1017;
  border: none;
  font-weight: 700;
  font-size: 14px;
  padding: 9px 18px;
  border-radius: 14px;
  cursor: pointer;
}

/* ============================================================
   ÜBUNGS-KARTEN (Logbook)
   ============================================================ */
.exercise-card {
  background: linear-gradient(160deg, var(--bg-card) 0%, #191c27 100%);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: var(--radius-lg);
  padding: 16px 16px 6px;
  margin-bottom: 16px;
}

.exercise-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 2px;
}

.exercise-name-row { display: flex; align-items: center; gap: 10px; }

.order-badge {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid var(--border-subtle);
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.order-badge.active {
  color: var(--text-main);
  border-color: var(--accent-teal);
  box-shadow: 0 0 10px rgba(47, 217, 194, 0.75);
  text-shadow: 0 0 6px rgba(255,255,255,0.6);
}

.exercise-icon {
  width: 32px; height: 32px; border-radius: 10px;
  background: rgba(47, 217, 194, 0.14);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-teal); flex-shrink: 0;
}

.exercise-name { font-size: 16px; font-weight: 600; }

.exercise-meta-col { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }

.exercise-setup-note, .exercise-reprange {
  font-style: italic;
  font-size: 12px;
  color: var(--text-muted);
  text-align: right;
  max-width: 150px;
  cursor: text;
  border-bottom: 1px dashed transparent;
}
.exercise-setup-note:hover, .exercise-reprange:hover { border-bottom-color: var(--border-subtle); }

/* Einheiten-Umschalter: eigene Zeile mit gleichem Spalten-Raster wie set-row,
   damit kg/lbs exakt über der Gewichts-Spalte sitzt */
.unit-header-row {
  display: grid;
  grid-template-columns: 20px 1fr 0.6fr 1.9fr 22px;
  gap: 7px;
  margin-bottom: 6px;
}
.unit-toggle {
  display: flex;
  justify-content: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-muted);
}
.unit-option { cursor: pointer; padding: 1px 4px; }
.unit-option.selected {
  color: var(--text-main);
  font-weight: 700;
  text-shadow: 0 0 8px rgba(255,255,255,0.55);
}
.reps-label { font-size: 11px; color: var(--text-muted); text-align: center; }

.set-block { margin-bottom: 10px; }

.set-row {
  display: grid;
  grid-template-columns: 20px 1fr 0.6fr 1.9fr 22px;
  gap: 7px;
  align-items: center;
}

.set-index { color: var(--text-muted); font-size: 13px; text-align: center; }

.set-row input {
  width: 100%;
  background: var(--bg-card-2);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  color: var(--text-main);
  padding: 8px 6px;
  font-size: 14px;
  text-align: center;
}

.set-row input.note-input { text-align: left; padding-left: 10px; }
.set-row input::placeholder { color: var(--text-muted); opacity: 0.7; }
.set-row input:focus { outline: none; border-color: var(--accent-teal); }
.set-row input:disabled { opacity: 0.75; }

.trend-icon { display: flex; align-items: center; justify-content: center; }

/* --- Swipe-zum-Löschen: Button liegt im normalen Layout, Breite 0 im Ruhezustand ---
   Dadurch kann nichts "durchschimmern", weil da einfach nichts ist, bis man zieht. */
.swipe-row {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border-radius: var(--radius-lg);
  margin-bottom: 16px;
}
.swipe-row.set-row-wrapper { border-radius: var(--radius-md); margin-bottom: 10px; }

.swipe-content {
  flex: 1 1 auto;
  min-width: 0;
}

.swipe-delete-btn {
  flex: 0 0 auto;
  width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  border: none;
  background: var(--trend-down);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

/* ============================================================
   DAY-EDIT (Trainingsplan bearbeiten)
   ============================================================ */
.edit-exercise-card {
  background: linear-gradient(160deg, var(--bg-card) 0%, #191c27 100%);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin-bottom: 14px;
}

.edit-exercise-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.edit-exercise-name { font-weight: 600; font-size: 15px; }

.edit-icon-btn {
  background: var(--bg-card-2);
  border: none;
  color: var(--text-muted);
  width: 28px; height: 28px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.edit-icon-btn:hover { color: var(--text-main); }
.edit-icon-row { display: flex; gap: 6px; }

.edit-controls-row {
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
}

.edit-field { flex: 1; }
.edit-field-label { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }

.stepper {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg-card-2); border-radius: 10px; padding: 4px 8px;
}
.stepper button {
  background: none; border: none; color: var(--text-main);
  font-size: 16px; width: 22px; cursor: pointer;
}

.reprange-row { display: flex; align-items: center; gap: 6px; }
.reprange-row input {
  width: 40px; background: var(--bg-card-2); border: 1px solid var(--border-subtle);
  border-radius: 8px; color: var(--text-main); text-align: center; padding: 6px 2px; font-size: 13px;
}
.reprange-row span { color: var(--text-muted); }

.edit-note-input {
  width: 100%;
  background: var(--bg-card-2);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  color: var(--text-main);
  padding: 8px 10px;
  font-size: 13px;
  font-style: italic;
}

.add-exercise-btn {
  width: 100%;
  background: var(--bg-card);
  border: 1px dashed var(--border-subtle);
  color: var(--accent-teal);
  border-radius: var(--radius-md);
  padding: 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 4px;
}

.drag-handle {
  background: none;
  border: none;
  color: var(--text-muted);
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  cursor: grab;
  touch-action: none;
}
.drag-handle:active { cursor: grabbing; }

.edit-exercise-left { display: flex; align-items: center; gap: 10px; }

/* ============================================================
   NEUEN TAG ANLEGEN
   ============================================================ */
.category-list { display: flex; flex-direction: column; gap: 10px; }

.category-item {
  background: linear-gradient(155deg, var(--bg-card) 0%, #191c27 100%);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  cursor: pointer;
}

.category-title { font-weight: 600; font-size: 15px; }

.subcategory-list {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.category-item.expanded .subcategory-list { display: flex; }

.subcategory-chip {
  background: var(--bg-card-2);
  border: 1px solid var(--border-subtle);
  color: var(--text-main);
  padding: 8px 14px;
  border-radius: 12px;
  font-size: 13px;
  cursor: pointer;
}
.subcategory-chip:hover { border-color: var(--accent-teal); }

.name-confirm-box {
  margin-top: 18px;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 16px;
}
.name-confirm-box input {
  width: 100%;
  background: var(--bg-card-2);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  color: var(--text-main);
  padding: 10px 12px;
  font-size: 15px;
  margin-bottom: 12px;
}
.name-confirm-box button {
  width: 100%;
  background: var(--accent-green);
  border: none;
  color: #0f1017;
  font-weight: 700;
  padding: 12px;
  border-radius: 12px;
  cursor: pointer;
}
/* ============================================================
   SPIEGEL (Training / Ernährung / Erholung – Checkliste)
   ============================================================ */
.spiegel-cat { margin-bottom: 26px; }

.spiegel-cat-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}
.spiegel-cat-title { font-size: 18px; font-weight: 700; }
.spiegel-cat-count { font-size: 13px; color: var(--text-muted); font-weight: 600; }

.spiegel-info-note {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  margin: -4px 0 14px;
  line-height: 1.4;
}

.spiegel-item {
  background: linear-gradient(155deg, var(--bg-card) 0%, #191c27 100%);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.spiegel-item-text { min-width: 0; }
.spiegel-item-label { font-size: 14px; font-weight: 600; }
.spiegel-item-hint { font-size: 12px; color: var(--text-muted); margin-top: 3px; line-height: 1.35; }

.spiegel-item-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.spiegel-auto-badge {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-teal);
  border: 1px solid rgba(47, 217, 194, 0.4);
  border-radius: 8px;
  padding: 2px 6px;
  white-space: nowrap;
}

.spiegel-check {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid var(--border-subtle);
  color: transparent;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s ease;
  background: none;
}
.spiegel-check.checked {
  border-color: var(--accent-teal);
  background: rgba(47, 217, 194, 0.14);
  color: var(--accent-teal);
  box-shadow: 0 0 10px rgba(47, 217, 194, 0.5);
}
.spiegel-check.auto { cursor: default; }

.bottom-nav {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: calc(20px + env(safe-area-inset-bottom));
  height: 66px;
  border-radius: 33px;
  background: #1b1e2ae8;
  border: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: space-around;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

.nav-btn {
  position: relative;
  background: none;
  border: none;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.highlight-pill {
  position: absolute;
  inset: 2px;
  border-radius: 16px;
  background: rgba(255,255,255,0.10);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.nav-btn.active .highlight-pill { opacity: 1; transform: scale(1); }

.nav-icon {
  width: 26px;
  height: 26px;
  background-color: #ffffff;
  -webkit-mask-image: var(--icon-url);
  mask-image: var(--icon-url);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  position: relative;
  z-index: 1;
  transition: background-color 0.2s ease;
}

.nav-btn.active .nav-icon { background-color: var(--accent-teal); }

/* ============================================================
   LADEBILDSCHIRM
   Liegt beim Start ueber allem, dreht das Icon und zeigt einen
   zufaelligen Tipp. Verschwindet danach weich.
   ============================================================ */
.ladeschirm {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: linear-gradient(180deg, #171a24 0%, #12141c 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding: 40px 34px calc(60px + env(safe-area-inset-bottom));
  text-align: center;
  opacity: 1;
  transition: opacity 0.45s ease;
}

/* wird per JS gesetzt, sobald die App bereit ist */
.ladeschirm.weg { opacity: 0; pointer-events: none; }

.lade-icon {
  width: 96px;
  height: 96px;
  background-color: var(--accent-teal);
  -webkit-mask-image: url("assets/figur-detail.png");
  mask-image: url("assets/figur-detail.png");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  filter: drop-shadow(0 0 26px rgba(47, 217, 194, 0.35));
  animation: lade-dreh 2s cubic-bezier(.5, .05, .25, 1) infinite;
}

/* Dreht sich um die eigene Achse, mit kurzer Pause dazwischen */
@keyframes lade-dreh {
  0%   { transform: rotateY(0deg)   scale(1);    }
  45%  { transform: rotateY(360deg) scale(1);    }
  58%  { transform: rotateY(360deg) scale(1.06); }
  70%  { transform: rotateY(360deg) scale(1);    }
  100% { transform: rotateY(360deg) scale(1);    }
}

.lade-tipp {
  margin: 0;
  max-width: 300px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-muted);
  min-height: 3em;              /* verhindert Springen bei kurzen Tipps */
  animation: lade-auf 0.6s ease both;
}

@keyframes lade-auf {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* Wer im Handy "Bewegung reduzieren" anhat, bekommt keine Drehung */
@media (prefers-reduced-motion: reduce) {
  .lade-icon { animation: none; }
  .lade-tipp { animation: none; }
}

/* ============================================================
   PROFIL-SEITE
   ============================================================ */
.profil-karte {
  background: linear-gradient(180deg, #1d2130 0%, #191c27 100%);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 16px 16px 18px;
  margin-bottom: 14px;
}

.profil-karte-titel { font-size: 15px; font-weight: 700; margin-bottom: 12px; }

.profil-hinweis {
  font-size: 12px; color: var(--text-muted);
  margin: -6px 0 12px; line-height: 1.4;
}

.profil-zeile {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.profil-zeile:last-child { border-bottom: none; padding-bottom: 0; }

.profil-label { font-size: 14px; font-weight: 600; }

.profil-eingabe { display: flex; align-items: center; gap: 7px; }
.profil-eingabe input {
  width: 76px;
  background: var(--bg-card-2);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  color: var(--text-main);
  text-align: center;
  padding: 8px 6px;
  font-size: 15px;
  font-weight: 600;
}
.profil-eingabe input:focus { outline: none; border-color: var(--accent-teal); }
.profil-eingabe span { font-size: 13px; color: var(--text-muted); min-width: 30px; }

/* Zwei-Wege-Schalter (Geschlecht) */
.profil-schalter { display: flex; gap: 6px; }
.profil-schalter button {
  background: var(--bg-card-2);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  color: var(--text-muted);
  padding: 8px 12px;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.profil-schalter button.aktiv {
  background: rgba(47,217,194,0.14);
  border-color: var(--accent-teal);
  color: var(--accent-teal);
}

/* Untereinander stehende Auswahlkacheln */
.profil-auswahl { display: flex; flex-direction: column; gap: 8px; }
.profil-auswahl button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  background: var(--bg-card-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-main);
  padding: 11px 13px;
  font-size: 14px; font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
}
.profil-auswahl button small { font-size: 11.5px; color: var(--text-muted); font-weight: 500; }
.profil-auswahl button.aktiv {
  background: rgba(47,217,194,0.12);
  border-color: var(--accent-teal);
}
.profil-auswahl button.aktiv small { color: rgba(255,255,255,0.65); }

.profil-stepper {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg-card-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 8px 14px;
}
.profil-stepper button {
  background: none; border: none; color: var(--accent-teal);
  font-size: 22px; width: 34px; cursor: pointer; line-height: 1;
}
.profil-stepper span { font-size: 17px; font-weight: 700; }

/* Ergebnis-Karte */
.profil-ziele { border-color: rgba(47,217,194,0.28); }

.ziel-liste { display: flex; flex-direction: column; gap: 2px; }

.ziel-zeile {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ziel-zeile:last-child { border-bottom: none; }
.ziel-zeile.haupt { padding-bottom: 13px; }

.ziel-name { font-size: 14px; font-weight: 600; }
.ziel-name small { display: block; font-size: 11.5px; color: var(--text-muted); font-weight: 500; margin-top: 2px; }

.ziel-wert { font-size: 15px; font-weight: 700; white-space: nowrap; }
.ziel-zeile.haupt .ziel-wert { font-size: 24px; color: var(--accent-teal); }
.ziel-wert small { font-size: 11.5px; color: var(--text-muted); font-weight: 600; margin-left: 3px; }

/* ============================================================
   GEWICHT – kleines Fenster auf der Startseite
   ============================================================ */
.gewicht-fenster {
  background: linear-gradient(180deg, #1d2130 0%, #191c27 100%);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 15px 16px 8px;
  margin-bottom: 14px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.gewicht-fenster:active { border-color: rgba(47,217,194,0.4); }

.gewicht-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.gewicht-titel { font-size: 13px; color: var(--text-muted); font-weight: 600; }
.gewicht-heute { font-size: 27px; font-weight: 700; line-height: 1.15; margin-top: 2px; }
.gewicht-heute small { font-size: 14px; color: var(--text-muted); font-weight: 600; margin-left: 2px; }

.gewicht-kopf-rechts { text-align: right; }
.gewicht-schnitt { font-size: 15px; font-weight: 700; }
.gewicht-schnitt small { display: block; font-size: 11px; color: var(--text-muted); font-weight: 600; margin-top: 1px; }
.gewicht-diff { font-size: 13px; font-weight: 700; margin-top: 5px; }
.gewicht-diff.rauf { color: var(--trend-up); }
.gewicht-diff.runter { color: var(--trend-down); }
.gewicht-diff.gleich { color: var(--trend-same); }

.gewicht-grafik-klein { height: 78px; margin-top: 6px; }
.gewicht-grafik-klein svg { display: block; width: 100%; height: 100%; }

.gewicht-leer {
  font-size: 12.5px; color: var(--text-muted);
  text-align: center; padding: 16px 0 18px;
}

/* ============================================================
   GEWICHT – grosse Ansicht
   ============================================================ */
.gewicht-abfrage {
  background: rgba(47,217,194,0.09);
  border: 1px solid rgba(47,217,194,0.32);
  border-radius: var(--radius-lg);
  padding: 14px 16px 16px;
  margin-bottom: 16px;
}
.gewicht-abfrage-text { font-size: 15px; font-weight: 700; margin-bottom: 11px; }
.gewicht-abfrage-zeile { display: flex; align-items: center; gap: 9px; }
.gewicht-abfrage-zeile input {
  flex: 1; min-width: 0;
  background: var(--bg-card-2);
  border: 1px solid var(--border-subtle);
  border-radius: 11px;
  color: var(--text-main);
  padding: 10px 12px;
  font-size: 17px; font-weight: 700;
}
.gewicht-abfrage-zeile input:focus { outline: none; border-color: var(--accent-teal); }
.gewicht-abfrage-zeile span { font-size: 14px; color: var(--text-muted); }
.gewicht-abfrage-zeile button {
  background: var(--accent-teal);
  border: none; border-radius: 11px;
  color: #0d1016;
  padding: 11px 15px;
  font-size: 14px; font-weight: 700;
  cursor: pointer;
}

.zeitraum-schalter { display: flex; gap: 6px; margin-bottom: 12px; }
.zeitraum-schalter button {
  flex: 1;
  background: var(--bg-card-2);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  color: var(--text-muted);
  padding: 8px 0;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.zeitraum-schalter button.aktiv {
  background: rgba(47,217,194,0.14);
  border-color: var(--accent-teal);
  color: var(--accent-teal);
}

.gewicht-gross {
  background: linear-gradient(180deg, #1d2130 0%, #191c27 100%);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 12px 12px 8px;
  position: relative;
}
.gewicht-lesekopf {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 0 4px 8px;
  min-height: 24px;
}
.gewicht-lesekopf span { font-size: 12.5px; color: var(--text-muted); font-weight: 600; }
.gewicht-lesekopf strong { font-size: 17px; font-weight: 700; }

.gewicht-grafik-gross { height: 210px; }
/* Waagerecht gehoert uns (Ablesen), senkrecht bleibt Scrollen */
.gewicht-grafik-gross svg { display: block; width: 100%; height: 100%; touch-action: pan-y; }

.gewicht-legende {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--text-muted);
  margin: 10px 2px 20px;
}
.legende-punkt { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.legende-punkt.kurve { background: var(--accent-teal); }
.legende-punkt.schnitt { background: #7d8494; margin-left: 12px; }

.gewicht-liste-titel { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.gewicht-liste { display: flex; flex-direction: column; gap: 6px; }

.gewicht-eintrag {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 11px 14px;
  cursor: pointer;
}
.gewicht-eintrag-datum { font-size: 13.5px; color: var(--text-muted); font-weight: 600; }
.gewicht-eintrag-wert { font-size: 15px; font-weight: 700; }
.gewicht-eintrag.wirdBearbeitet { border-color: var(--accent-teal); }
.gewicht-eintrag input {
  width: 92px;
  background: var(--bg-card-2);
  border: 1px solid var(--accent-teal);
  border-radius: 9px;
  color: var(--text-main);
  text-align: right;
  padding: 6px 9px;
  font-size: 15px; font-weight: 700;
}
.gewicht-eintrag input:focus { outline: none; }

/* ============================================================
   ERNÄHRUNG
   ============================================================ */
.tag-kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin: 4px 0 18px;
}
.tag-mitte { text-align: center; flex: 1; min-width: 0; }
.tag-mitte .page-title { margin: 0; }
.tag-datum { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }

.tag-pfeil {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  width: 36px; height: 36px;
  color: var(--text-main);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}
.tag-pfeil:disabled { opacity: 0.3; cursor: default; }

/* --- Tagesbilanz mit Ringen --- */
.tagesbilanz {
  background: linear-gradient(180deg, #1d2130 0%, #191c27 100%);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 18px 16px 15px;
  margin-bottom: 18px;
}

.ring { position: relative; flex-shrink: 0; }
.ring svg { display: block; }
.ring-mitte {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; line-height: 1.15;
}
.ring-mitte strong { font-size: 21px; font-weight: 700; }
.ring-mitte span { font-size: 9.5px; color: var(--text-muted); font-weight: 600; margin-top: 2px; }

.ring-reihe.gross {
  display: flex; align-items: center; justify-content: center;
  gap: 18px; margin-bottom: 18px;
}
.ring-reihe.gross .ring-mitte strong { font-size: 27px; }
.ring-reihe.gross .ring-mitte span { font-size: 10.5px; }

.bilanz-rest { text-align: left; }
.bilanz-rest strong { display: block; font-size: 22px; font-weight: 700; }
.bilanz-rest span { font-size: 11.5px; color: var(--text-muted); font-weight: 600; }
.bilanz-rest.drueber strong { color: var(--trend-down); }
.bilanz-rest.passt strong { color: var(--trend-up); }

.ring-reihe.klein { display: flex; justify-content: space-around; gap: 6px; }
.ring-block { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ring-block .ring-mitte strong { font-size: 15px; }
.ring-block .ring-mitte span { font-size: 8.5px; margin-top: 1px; }
.ring-name { font-size: 11.5px; color: var(--text-muted); font-weight: 600; }

.bilanz-rest-zeile {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  margin-top: 15px; padding-top: 13px;
  border-top: 1px solid rgba(255,255,255,0.05);
  font-size: 11.5px; color: var(--text-muted);
}
.bilanz-rest-zeile b { color: var(--text-main); font-weight: 700; }

.bilanz-hinweis {
  font-size: 12.5px; color: var(--text-muted);
  line-height: 1.45; text-align: center; padding: 4px 6px 2px;
}

/* --- Makro-Spalten: stehen bei Mahlzeit und Zutat untereinander --- */
.makro-spalten {
  display: grid;
  grid-template-columns: 1fr 58px 58px 58px;
  align-items: baseline;
  gap: 4px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-muted);
}
.makro-spalten span { text-align: right; font-variant-numeric: tabular-nums; }
.makro-spalten span i { font-style: normal; opacity: 0.65; margin-right: 2px; }
.makro-spalten em { font-style: normal; font-size: 11.5px; }
.makro-spalten.kopfzeile { color: var(--text-main); font-weight: 600; }

/* --- Mahlzeit --- */
.mahlzeit {
  background: linear-gradient(180deg, #1c2030 0%, #181b26 100%);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  margin-bottom: 12px;
}
.mahlzeit-kopf { cursor: pointer; }
.mahlzeit-zeile1 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.mahlzeit-titel { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 5px; }
.mahlzeit-kcal { font-size: 17px; font-weight: 700; white-space: nowrap; }
.mahlzeit-kcal small { font-size: 11px; color: var(--text-muted); font-weight: 600; }

.pfeil { display: inline-flex; color: var(--text-muted); transition: transform 0.18s ease; }
.mahlzeit.offen > .mahlzeit-kopf .pfeil,
.gruppe.offen .gruppe-kopf > .zeile-haupt .pfeil { transform: rotate(180deg); }

.mahlzeit-koerper { }
.mahlzeit.offen .mahlzeit-koerper { margin-top: 12px; }

/* --- Zutat --- */
.essen-reihe { margin-bottom: 6px; border-radius: var(--radius-md); }
.essen-zeile {
  background: var(--bg-card-2);
  border-radius: var(--radius-md);
  padding: 9px 12px;
  cursor: pointer;
}
.zeile-haupt { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.zeile-name {
  font-size: 13.5px; font-weight: 600; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: flex; align-items: center; gap: 4px;
}
.zeile-kcal { font-size: 14px; font-weight: 700; flex-shrink: 0; white-space: nowrap; }

/* --- eingefügte Mahlzeit --- */
.gruppe-reihe { margin-bottom: 6px; border-radius: var(--radius-md); }
.gruppe {
  background: rgba(47,217,194,0.07);
  border: 1px solid rgba(47,217,194,0.22);
  border-radius: var(--radius-md);
  padding: 9px 12px;
}
.gruppe-kopf { cursor: pointer; }
.gruppe.offen .gruppe-koerper { margin-top: 9px; }
.gruppe-koerper .essen-reihe:last-child { margin-bottom: 0; }

.mahlzeit-plus {
  width: 100%;
  background: none;
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  padding: 9px 0;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  margin-top: 2px;
}
.mahlzeit-plus:active { border-color: var(--accent-teal); color: var(--accent-teal); }

.mahlzeit-merken {
  width: 100%;
  background: none; border: none;
  color: var(--text-muted);
  padding: 9px 0 2px;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
}
.mahlzeit-merken:active { color: var(--accent-teal); }

/* --- Auswahl --- */
.auswahl-umschalter { display: flex; gap: 6px; margin-bottom: 10px; }
.auswahl-umschalter button {
  flex: 1;
  background: var(--bg-card-2);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  color: var(--text-muted);
  padding: 9px 0;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.auswahl-umschalter button.aktiv {
  background: rgba(47,217,194,0.14);
  border-color: var(--accent-teal);
  color: var(--accent-teal);
}

.essen-suche {
  width: 100%;
  background: var(--bg-card-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-main);
  padding: 11px 14px;
  font-size: 15px;
  margin-bottom: 10px;
}
.essen-suche:focus { outline: none; border-color: var(--accent-teal); }

.essen-neu-btn {
  width: 100%;
  background: rgba(47,217,194,0.1);
  border: 1px solid rgba(47,217,194,0.35);
  border-radius: var(--radius-md);
  color: var(--accent-teal);
  padding: 11px 0;
  font-size: 14px; font-weight: 700;
  cursor: pointer;
  margin-bottom: 16px;
}

.essen-liste { display: flex; flex-direction: column; gap: 6px; }

.essen-eintrag {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 11px 13px;
  cursor: pointer;
}
.essen-eintrag-name { font-size: 14px; font-weight: 600; }
.essen-eintrag-werte { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.essen-eintrag-stift {
  flex-shrink: 0; color: var(--text-muted);
  padding: 4px 2px 4px 10px; font-size: 15px;
}

.essen-leer {
  font-size: 13px; color: var(--text-muted);
  text-align: center; padding: 26px 20px; line-height: 1.5;
}

/* --- Menge --- */
.menge-karte {
  background: linear-gradient(180deg, #1d2130 0%, #191c27 100%);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 14px;
}
.menge-name { font-size: 17px; font-weight: 700; margin-bottom: 12px; }
.menge-zeile { display: flex; align-items: center; gap: 10px; }
.menge-zeile input {
  flex: 1; min-width: 0;
  background: var(--bg-card-2);
  border: 1px solid var(--border-subtle);
  border-radius: 11px;
  color: var(--text-main);
  padding: 11px 14px;
  font-size: 20px; font-weight: 700;
}
.menge-zeile input:focus { outline: none; border-color: var(--accent-teal); }
.menge-zeile span { font-size: 15px; color: var(--text-muted); }

.menge-schnell { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.menge-schnell button {
  background: var(--bg-card-2);
  border: 1px solid var(--border-subtle);
  border-radius: 9px;
  color: var(--text-muted);
  padding: 7px 11px;
  font-size: 12.5px; font-weight: 600;
  cursor: pointer;
}
.menge-schnell button:active { border-color: var(--accent-teal); color: var(--accent-teal); }

.menge-vorschau {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 4px 16px;
  margin-bottom: 16px;
}
.vorschau-zeile {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.vorschau-zeile:last-child { border-bottom: none; }
.vorschau-name { font-size: 13.5px; color: var(--text-muted); }
.vorschau-wert { font-size: 15px; font-weight: 700; }

.essen-loeschen {
  width: 100%;
  background: none;
  border: 1px solid rgba(239,74,74,0.35);
  border-radius: var(--radius-md);
  color: #ef4a4a;
  padding: 11px 0;
  font-size: 13.5px; font-weight: 700;
  cursor: pointer;
  margin-top: 4px;
}

.lm-name-feld {
  width: 100%;
  background: var(--bg-card-2);
  border: 1px solid var(--border-subtle);
  border-radius: 11px;
  color: var(--text-main);
  padding: 11px 13px;
  font-size: 15px; font-weight: 600;
  margin-top: 4px;
}
.lm-name-feld:focus { outline: none; border-color: var(--accent-teal); }

/* ============================================================
   DIALOG + KURZE RÜCKMELDUNG
   Ersetzt die grauen Browser-Fenster (prompt / confirm / alert).
   ============================================================ */
.dialog-hinter {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(8, 10, 16, 0.72);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: dialog-auf 0.16s ease both;
}
.dialog-hinter[hidden] { display: none; }

@keyframes dialog-auf { from { opacity: 0; } to { opacity: 1; } }

.dialog-kasten {
  width: 100%; max-width: 340px;
  background: linear-gradient(180deg, #212636 0%, #1a1e29 100%);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 20px 18px 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.5);
  animation: dialog-rein 0.18s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes dialog-rein { from { transform: translateY(14px) scale(0.98); } to { transform: none; } }

.dialog-titel { font-size: 16.5px; font-weight: 700; }
.dialog-text {
  font-size: 13px; color: var(--text-muted);
  line-height: 1.5; margin-top: 7px;
}
.dialog-text:empty { display: none; }

.dialog-feld {
  width: 100%;
  background: var(--bg-card-2);
  border: 1px solid var(--border-subtle);
  border-radius: 11px;
  color: var(--text-main);
  padding: 11px 13px;
  font-size: 15px; font-weight: 600;
  margin-top: 14px;
}
.dialog-feld:focus { outline: none; border-color: var(--accent-teal); }
.dialog-feld[hidden] { display: none; }

.dialog-knoepfe { display: flex; gap: 8px; margin-top: 18px; }
.dialog-knoepfe button {
  flex: 1;
  border-radius: 11px;
  padding: 11px 0;
  font-size: 14px; font-weight: 700;
  cursor: pointer;
}
.dialog-ab {
  background: none;
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
}
.dialog-ok {
  background: var(--accent-teal);
  border: none;
  color: #0d1016;
}
.dialog-ok.gefahr { background: var(--trend-down); color: #fff; }

.toast {
  position: fixed;
  left: 50%; bottom: calc(104px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 1300;
  max-width: 300px;
  background: #262c3c;
  border: 1px solid var(--border-subtle);
  border-radius: 13px;
  color: var(--text-main);
  padding: 11px 16px;
  font-size: 13px; font-weight: 600;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
  animation: toast-rein 0.2s ease both;
}
.toast[hidden] { display: none; }
@keyframes toast-rein {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* --- Historie: Monat auf- und zuklappen --- */
.month-header {
  display: flex; align-items: center; gap: 7px;
  cursor: pointer;
}
.month-pfeil { display: inline-flex; color: var(--text-muted); transition: transform 0.18s ease; }
.month-group.zu .month-pfeil { transform: rotate(-90deg); }
.month-name { flex: 1; min-width: 0; }
.month-anzahl {
  font-size: 11.5px; font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-card-2);
  border-radius: 20px;
  padding: 3px 9px;
  letter-spacing: 0;
  text-transform: none;
}

/* ============================================================
   EINSTIEG / ONBOARDING
   Liegt beim ersten Start über der ganzen App.
   ============================================================ */
.einstieg {
  position: fixed;
  inset: 0;
  z-index: 60;
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  background: linear-gradient(180deg, #171a24 0%, #12141c 100%);
  color: var(--text-main);
  display: flex;
  flex-direction: column;
}
.einstieg[hidden] { display: none; }

/* --- Kopf: Zurück + Fortschritt --- */
.eb-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(18px + env(safe-area-inset-top)) 20px 14px;
}
.eb-zurueck {
  background: none; border: none; padding: 4px;
  color: var(--text-muted); cursor: pointer; flex-shrink: 0;
}
.eb-zurueck[hidden] { display: none; }
.eb-balken-spur {
  flex: 1; height: 4px; border-radius: 2px;
  background: var(--border-subtle); overflow: hidden;
}
.eb-balken {
  height: 100%; width: 0;
  background: var(--accent-teal);
  border-radius: 2px;
  transition: width .32s ease;
}
.eb-zaehler {
  font-size: 12px; color: var(--text-muted);
  flex-shrink: 0; font-variant-numeric: tabular-nums;
}

/* --- Mitte --- */
.eb-inhalt {
  flex: 1;
  overflow-y: auto;
  padding: 10px 20px 20px;
  touch-action: pan-y;
}
.eb-titel {
  font-size: 26px; font-weight: 700; line-height: 1.22;
  margin: 8px 0 8px;
}
.eb-unter {
  font-size: 14px; color: var(--text-muted);
  line-height: 1.5; margin: 0 0 22px;
}
.eb-unter[hidden] { display: none; }

/* --- Auswahlknöpfe --- */
.eb-wahl { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.eb-wahl-quer { flex-direction: row; }
.eb-wahl-quer .eb-knopf { flex: 1; text-align: center; }

.eb-knopf {
  width: 100%;
  background: var(--bg-card);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 15px 16px;
  color: var(--text-main);
  text-align: left;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 4px;
  transition: border-color .15s ease, background .15s ease;
}
.eb-knopf:active { background: var(--bg-card-2); }
.eb-knopf.aktiv {
  border-color: var(--accent-teal);
  background: rgba(47, 217, 194, 0.09);
}
.eb-knopf-titel { font-size: 15px; font-weight: 600; }
.eb-knopf-unter { font-size: 12.5px; color: var(--text-muted); line-height: 1.45; }
.eb-kfa-prozent {
  font-weight: 400; color: var(--text-muted); font-size: 13px; margin-left: 6px;
}
.eb-tag {
  display: inline-block; margin-left: 8px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase;
  color: #0e2a26; background: var(--accent-teal);
  padding: 2px 7px; border-radius: 6px; vertical-align: middle;
}

/* --- Eingabefelder --- */
.eb-feld { display: block; margin-bottom: 14px; }
.eb-feld-label {
  display: block; font-size: 13px; color: var(--text-muted); margin-bottom: 6px;
}
.eb-feld-box {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-card);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0 16px;
}
.eb-feld-box:focus-within { border-color: var(--accent-teal); }
.eb-feld-box input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--text-main); font-size: 17px; font-weight: 600;
  padding: 14px 0; font-family: inherit; min-width: 0;
}
.eb-einheit { font-size: 14px; color: var(--text-muted); flex-shrink: 0; }

/* --- Block mit eigener Überschrift --- */
.eb-block { margin: 26px 0 0; }
.eb-block-titel { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.eb-hinweis {
  font-size: 13px; color: var(--text-muted); line-height: 1.55; margin: 0 0 14px;
}
.eb-stichel { color: var(--trend-same); }
.eb-empfehlung {
  background: rgba(47, 217, 194, 0.08);
  border: 1px solid rgba(47, 217, 194, 0.3);
  border-radius: var(--radius-md);
  padding: 13px 15px;
  font-size: 13.5px; line-height: 1.55;
  margin: 0 0 18px;
}

/* --- Muskel-Chips --- */
.eb-gitter { display: flex; flex-wrap: wrap; gap: 8px; }
.eb-chip {
  background: var(--bg-card);
  border: 1.5px solid var(--border-subtle);
  border-radius: 999px;
  padding: 9px 14px;
  color: var(--text-main); font-size: 13px; font-family: inherit;
  cursor: pointer;
}
.eb-chip.aktiv {
  border-color: var(--accent-teal);
  background: rgba(47, 217, 194, 0.12);
  color: var(--accent-teal);
}

/* --- Fuß --- */
.eb-fuss {
  padding: 14px 20px calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border-subtle);
  background: rgba(18, 20, 28, 0.9);
}
.eb-weiter {
  width: 100%;
  background: var(--accent-teal);
  color: #0e2a26;
  border: none; border-radius: var(--radius-md);
  padding: 16px;
  font-size: 16px; font-weight: 700; font-family: inherit;
  cursor: pointer;
}
.eb-weiter:disabled { opacity: .3; cursor: default; }

/* --- Muskelfigur in der Fokus-Auswahl --- */
.eb-figur {
  margin-top: 10px;
  background: var(--bg-card);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 10px;
}
.eb-figur.klickbar { border-color: var(--accent-teal); }
.eb-figur svg { width: 100%; height: auto; display: block; }
.eb-figur [data-background] { fill: none; }
.eb-figur-namen {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--accent-teal);
  text-align: center;
}

/* --- Zahlenknöpfe: wie oft pro Woche, Wochentage --- */
.eb-zahlen { display: flex; gap: 8px; flex-wrap: wrap; }
.eb-zahl {
  flex: 1; min-width: 42px;
  background: var(--bg-card);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px 4px;
  color: var(--text-main); font-size: 16px; font-weight: 600;
  font-family: inherit; cursor: pointer;
}
.eb-zahl.gut { border-color: rgba(47, 217, 194, 0.3); }
.eb-zahl.aktiv {
  border-color: var(--accent-teal);
  background: rgba(47, 217, 194, 0.12);
  color: var(--accent-teal);
}
.eb-zahl.breit { font-size: 14px; }

/* --- gesperrter Split --- */
.eb-knopf.gesperrt {
  opacity: .42;
  cursor: default;
  border-style: dashed;
}
.eb-knopf.gesperrt .eb-knopf-unter { color: var(--trend-same); }

/* --- Dauer --- */
.eb-dauer {
  font-size: 30px; font-weight: 700; text-align: center;
  margin-bottom: 10px; font-variant-numeric: tabular-nums;
}
.eb-dauer.empfohlen { color: var(--accent-teal); }
.eb-schieber {
  width: 100%; -webkit-appearance: none; appearance: none;
  height: 4px; border-radius: 2px; background: var(--border-subtle); outline: none;
}
.eb-schieber::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent-teal); cursor: pointer;
}
.eb-schieber::-moz-range-thumb {
  width: 26px; height: 26px; border: none; border-radius: 50%;
  background: var(--accent-teal); cursor: pointer;
}

/* --- Wochenübersicht nach der Split-Wahl --- */
.eb-wochenplan { display: flex; flex-direction: column; gap: 6px; }
.eb-wochentag {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: 11px 14px;
}
.eb-wt-tag {
  font-size: 13px; color: var(--text-muted);
  min-width: 46px; flex-shrink: 0;
}
.eb-wt-typ { font-size: 14.5px; font-weight: 600; }

/* --- Sportart-Auswahl --- */
.eb-auswahl {
  width: 100%;
  background: var(--bg-card);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  color: var(--text-main); font-size: 15px; font-family: inherit;
  margin-bottom: 14px;
}

/* --- Textknopf (überspringen, nochmal) --- */
.eb-text-knopf {
  background: none; border: none;
  color: var(--text-muted); font-size: 14px; font-family: inherit;
  padding: 12px 0; cursor: pointer; text-decoration: underline;
  display: block; margin: 4px auto 0;
}

/* --- Plan-Karte --- */
.eb-plan {
  background: var(--bg-card);
  border: 1.5px solid var(--accent-teal);
  border-radius: var(--radius-lg);
  padding: 22px 18px;
}
.eb-plan-gross { text-align: center; margin-bottom: 4px; }
.eb-plan-gross span {
  font-size: 44px; font-weight: 700; color: var(--accent-teal);
  display: block; line-height: 1.1; font-variant-numeric: tabular-nums;
}
.eb-plan-gross small { font-size: 13px; color: var(--text-muted); }
.eb-plan-her {
  font-size: 12.5px; color: var(--text-muted);
  text-align: center; line-height: 1.5; margin: 10px 0 18px;
}
.eb-plan-makros {
  display: flex; gap: 8px; text-align: center;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  padding: 15px 0; margin-bottom: 14px;
}
.eb-plan-makros div { flex: 1; }
.eb-plan-makros b { display: block; font-size: 17px; }
.eb-plan-makros small { font-size: 11.5px; color: var(--text-muted); }
.eb-plan-zeile { font-size: 13.5px; color: var(--text-muted); margin-top: 6px; }
.eb-plan-zeile b { color: var(--text-main); }

/* --- Unterschrift --- */
.eb-unterschrift {
  position: relative;
  background: var(--bg-card);
  border: 1.5px dashed var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.eb-unterschrift canvas {
  display: block; width: 100%; height: auto;
  touch-action: none;   /* sonst scrollt die Seite beim Malen weg */
}
.eb-us-linie {
  position: absolute; left: 14%; right: 14%; bottom: 24%;
  border-bottom: 1px solid var(--border-subtle);
  pointer-events: none;
}

/* --- Tour --- */
.eb-tour { display: flex; flex-direction: column; gap: 10px; }
.eb-tour-zeile {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: 15px 16px;
}
.eb-tour-name { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.eb-tour-text { font-size: 13px; color: var(--text-muted); line-height: 1.5; }

/* --- Sicherung im Profil --- */
.sicherung-knoepfe { display: flex; gap: 10px; margin-top: 14px; }
.sicherung-btn {
  flex: 1;
  background: var(--accent-teal);
  color: #0e2a26;
  border: none; border-radius: var(--radius-md);
  padding: 14px 10px;
  font-size: 14px; font-weight: 700; font-family: inherit;
  cursor: pointer;
}
.sicherung-btn.hell {
  background: transparent;
  color: var(--text-main);
  border: 1.5px solid var(--border-subtle);
}