@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-mono-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/static/fonts/inter.woff2') format('woff2');
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/static/fonts/oswald.woff2') format('woff2');
}

:root {
  /* Ohne diese Angabe rendert der Browser Datumswahl, Dropdown-Listen, Spinner und
     Scrollbars im Hellmodus — helle Fremdkoerper im dunklen Layout. */
  color-scheme: dark;
  accent-color: #E3A93B;

  --bg: #1E1B17;
  --surface: #28241F;
  --surface2: #332D26;
  --border: #453E34;
  --chalk: #F3EDE1;
  --muted: #A89A85;
  --amber: #E3A93B;
  --teal: #4F978C;
  --rust: #C25A3E;
  --green: #7FA24C;
  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;
  --font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--chalk);
  font-family: var(--font-body);
}

.ib-shell {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 20px 60px;
}

/* Vom Home-Bildschirm gestartet laeuft die Seite unter Notch und Home-Indicator, weil der Viewport dann
   den ganzen Bildschirm bekommt (viewport-fit=cover). max() haelt die bisherigen Abstaende, wo kein
   Geraetausschnitt im Weg ist. In Safari mit Adressleiste aendert sich dadurch nichts. */
@supports (padding: max(0px, env(safe-area-inset-left))) {
  .ib-shell {
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
    padding-bottom: max(60px, env(safe-area-inset-bottom));
  }
}

.ib-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--border);
  padding-bottom: 16px;
}

.ib-title {
  font-family: var(--font-display);
  font-size: 30px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--chalk);
}

.ib-subtitle {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.ib-nav {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.ib-tab {
  display: inline-flex;
  align-items: center;
  /* 44px ist Apples Mindestmass fuer Fingerziele -- vorher waren die Reiter rund 30px hoch. */
  min-height: 44px;
  padding: 8px 14px;
  border-radius: 6px;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  background: transparent;
}

.ib-tab-active {
  background: var(--amber);
  color: #241B0D;
  border-color: var(--amber);
}

/* Das Symbol erbt ueber fill="currentColor" die Farbe des Reiters, auch im aktiven Zustand. */
.ib-tab-icon {
  display: block;
  flex: none;
}

.ib-tab-label { white-space: nowrap; }

/* --- Am Telefon wandert die Navigation nach unten ---------------------------------------------------
   Vier Bereiche sind genau der Fall, fuer den die feste untere Leiste gedacht ist: daumenerreichbar,
   immer sichtbar, und im Standalone-Modus fuehlt sich die App damit wie eine native an. Dasselbe Markup
   wie oben, nur anders positioniert -- kein zweiter DOM-Zweig, der auseinanderlaufen koennte. */
@media (max-width: 560px) {
  .ib-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    gap: 0;
    flex-wrap: nowrap;
    background: var(--surface);
    border-top: 1px solid var(--border);
    /* Ueber dem Home-Indicator: ohne das liegt die unterste Reihe im Standalone-Modus darunter. */
    padding-bottom: env(safe-area-inset-bottom);
  }

  .ib-tab {
    /* Gleiche Breite fuer alle vier -- sonst bekommt "Einstellungen" mehr Platz als "Eingabe". */
    flex: 1 1 0;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-height: 56px;
    padding: 8px 4px;
    border: none;
    border-radius: 0;
    font-size: 11px;
  }

  /* Der aktive Reiter wird nicht flaechig eingefaerbt -- das waere in einer Leiste ein Klotz.
     Farbe und ein Strich oben reichen, wie es die Systemleisten auch machen. */
  .ib-tab-active {
    background: transparent;
    color: var(--amber);
    box-shadow: inset 0 2px 0 0 var(--amber);
  }
}

.ib-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ib-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
}

.ib-section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--chalk);
  margin: 0 0 14px;
}

.ib-kpi-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.ib-kpi {
  background: var(--surface);
  border-left: 4px solid var(--amber);
  border-radius: 8px;
  padding: 16px 18px;
  flex: 1 1 160px;
  min-width: 150px;
}

.ib-kpi-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.07em;
  color: var(--muted);
  text-transform: uppercase;
}

.ib-kpi-value {
  font-family: var(--font-display);
  font-size: 30px;
  color: var(--chalk);
  line-height: 1;
  margin-top: 8px;
}

.ib-kpi-unit {
  font-size: 14px;
  color: var(--muted);
  font-family: var(--font-body);
}

.ib-kpi-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
}

.ib-streak-dots {
  display: flex;
  gap: 3px;
  margin-top: 8px;
  align-items: center;
}

.ib-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
}

.ib-streak-extra {
  font-size: 11px;
  color: var(--muted);
  margin-left: 2px;
}

.ib-tdee-box {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 13px;
  color: var(--muted);
  font-family: var(--font-mono);
}

.ib-emph { color: var(--chalk); }

/* Die Aussage der Zusammensetzungs-Karte: eine Zeile, die man ohne Lesen der Zahlen versteht. */
.ib-verdict {
  color: var(--chalk);
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 6px;
}

/* Eine Schaetzung, keine Messung — monospace, damit sie sich von den gemessenen Werten abhebt. */
.ib-estimate {
  color: var(--chalk);
  font-family: var(--font-mono);
}

.ib-chart svg {
  display: block;
  width: 100%;
  height: auto;
}

.ib-muted-note {
  color: var(--muted);
  font-size: 13px;
}

.ib-error-note {
  color: var(--rust);
  font-size: 13px;
}

.ib-empty {
  text-align: center;
  padding: 30px 10px;
}

.ib-empty-title {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--chalk);
  margin-bottom: 8px;
}

.ib-empty p {
  color: var(--muted);
  font-size: 14px;
  max-width: 420px;
  margin: 0 auto;
}

.ib-pr-badge {
  display: inline-block;
  transform: rotate(-4deg);
  border: 2px dashed var(--rust);
  color: var(--rust);
  padding: 3px 10px;
  border-radius: 6px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}

.ib-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.ib-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
  font-family: var(--font-body);
}

.ib-input, .ib-select {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  color: var(--chalk);
  font-family: var(--font-mono);
  /* Nicht unter 16px: iOS Safari zoomt beim Fokus in jedes kleinere Eingabefeld hinein und laesst die
     Seite verschoben zurueck. Das Gewichtsfeld wird taeglich angefasst -- das war jeden Morgen ein
     unnoetiger Zoom. Aesthetik ist hier nicht der Grund. */
  font-size: 16px;
  outline: none;
  width: 100%;
}

.ib-select {
  font-family: var(--font-body);
  /* Eigener Pfeil statt des nativen: Inline-SVG, damit zur Laufzeit nichts nachgeladen wird. */
  appearance: none;
  -webkit-appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23A89A85' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 11px;
}

/* Spinner-Pfeile weg: am Handy ohnehin unsichtbar, am Desktop stoeren sie die mittig
   gesetzte Mono-Zahl. Hoch/Runter per Tastatur funktioniert unveraendert. */
.ib-input[type="number"]::-webkit-outer-spin-button,
.ib-input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.ib-input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.ib-input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.55;
  cursor: pointer;
}

.ib-input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* Bisher stand hier nur outline:none — bei Tastaturbedienung war nicht erkennbar,
   wo der Fokus steht. */
.ib-input:focus-visible,
.ib-select:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 1px;
  border-color: var(--amber);
}

.ib-btn:focus-visible,
.ib-set-delete:focus-visible,
.ib-plan-summary:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

/* Amber auf Amber waere unsichtbar. */
.ib-btn-primary:focus-visible { outline-color: var(--chalk); }

.ib-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.ib-btn {
  padding: 9px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body);
  border: none;
}

.ib-btn-primary { background: var(--amber); color: #241B0D; }
.ib-btn-ghost { background: transparent; color: var(--chalk); border: 1px solid var(--border); text-decoration: none; display: inline-flex; align-items: center; }
.ib-btn-danger { background: transparent; color: var(--rust); border: 1px solid var(--rust); }

.ib-flash {
  color: var(--green);
  font-size: 13px;
  animation: ib-fadeout 1.8s forwards;
}

@keyframes ib-fadeout {
  0%, 70% { opacity: 1; }
  100% { opacity: 0; }
}

.ib-exercise-block { margin-bottom: 16px; }

.ib-exercise-name {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--chalk);
  margin-bottom: 6px;
  text-transform: uppercase;
}

.ib-exercise-category {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  text-transform: none;
}

.ib-set-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ib-set-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
  background: var(--surface2);
  border-radius: 6px;
  padding: 6px 10px;
}

.ib-set-main { color: var(--chalk); }

.ib-set-delete {
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--rust);
  cursor: pointer;
  font-size: 13px;
}

.ib-plan-table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-family: var(--font-mono);
  font-size: 13px;
}

.ib-plan-table th {
  text-align: left;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}

.ib-plan-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  color: var(--chalk);
  white-space: nowrap;
}

.ib-plan-old {
  color: var(--muted);
  text-decoration: line-through;
}

.ib-plan-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid currentColor;
}

.ib-plan-badge-new { color: var(--teal); }
.ib-plan-badge-updated { color: var(--amber); }
.ib-plan-badge-shrink { color: var(--rust); }
.ib-plan-badge-unchanged { color: var(--muted); }

/* --- Training: auf Handybedienung im Gym ausgelegt --- */

.ib-session-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.ib-session-title {
  font-family: var(--font-display);
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.ib-session-date { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }

.ib-btn-sm { padding: 6px 12px; font-size: 12px; }

.ib-plan-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.ib-plan-buttons .ib-btn { min-height: 48px; padding: 12px 22px; font-size: 15px; }

.ib-exercise-block {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 12px;
  background: var(--surface2);
}

.ib-exercise-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.ib-exercise-meta { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-bottom: 8px; }
.ib-swap-note { color: var(--amber); }

.ib-last-time {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--teal);
  margin-bottom: 8px;
}

.ib-set-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--border);
  color: var(--muted);
  font-size: 11px;
  flex: none;
}

.ib-dropoff { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: 6px; }

.ib-set-form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-top: 10px;
}

.ib-num-field { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.ib-num-label { font-size: 11px; color: var(--muted); }

/* 16px verhindert, dass iOS beim Fokus in das Feld hineinzoomt. */
.ib-num-input { font-size: 16px; min-height: 48px; text-align: center; }

.ib-set-form .ib-btn { min-height: 48px; white-space: nowrap; }

/* padding-right explizit, sonst frisst die Shorthand den Pfeil-Freiraum aus .ib-select (padding-right:
   30px) auf -- bei kurzen Alternativnamen (z.B. Beinpresse/Beinstrecker als einzige QUADRIZEPS-Uebungen)
   bleibt die Box eng am Text und der SVG-Pfeil ueberlappt mit der Ellipse aus "tauschen ...". */
.ib-swap-select { font-size: 16px; padding: 6px 30px 6px 8px; width: auto; max-width: 190px; }

.ib-set-row { min-height: 40px; }
.ib-set-delete { min-width: 40px; min-height: 40px; font-size: 16px; }

@media (max-width: 560px) {
  /* Unten Platz fuer die feste Navigationsleiste (56px) plus Home-Indicator, sonst verschwindet die
     letzte Karte dahinter und laesst sich nicht mehr erreichen. Links und rechts die Safe-Area, die im
     Querformat auf Geraeten mit Aussparung sonst Text verschluckt. */
  .ib-shell {
    padding:
      12px
      max(12px, env(safe-area-inset-right))
      calc(72px + env(safe-area-inset-bottom))
      max(12px, env(safe-area-inset-left));
  }
  .ib-exercise-head { flex-direction: column; }
  .ib-swap-select { max-width: 100%; }
  .ib-plan-buttons .ib-btn { width: 100%; }
}

/* --- Sätze je Muskelgruppe: Balken mit Zielband statt Achsen-Chart --- */

.ib-muscle-list { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }

.ib-muscle-row { display: flex; align-items: center; gap: 10px; }

.ib-muscle-name {
  flex: 0 0 120px;
  font-size: 12px;
  color: var(--muted);
  text-align: right;
}

.ib-muscle-track {
  position: relative;
  flex: 1;
  height: 18px;
  background: var(--surface2);
  border-radius: 4px;
  overflow: hidden;
}

.ib-muscle-band {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(127, 162, 76, 0.18);
  border-left: 1px solid rgba(127, 162, 76, 0.5);
  border-right: 1px solid rgba(127, 162, 76, 0.5);
}

.ib-muscle-bar {
  position: relative;
  height: 100%;
  background: var(--amber);
  border-radius: 4px 0 0 4px;
}

.ib-muscle-bar-ok { background: var(--green); }

.ib-muscle-value {
  flex: 0 0 66px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--chalk);
}

@media (max-width: 560px) {
  .ib-muscle-name { flex-basis: 88px; font-size: 11px; }
  .ib-muscle-value { flex-basis: 58px; font-size: 11px; }
}

/* --- Plan-Übersicht: natives <details>, kein JS --- */

.ib-plan {
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-top: 10px;
  background: var(--surface2);
  overflow: hidden;
}

.ib-plan-due { border-color: var(--amber); }

.ib-plan-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 16px;
  cursor: pointer;
  min-height: 52px;
  list-style: none;
}

.ib-plan-summary::-webkit-details-marker { display: none; }

.ib-plan-summary::after {
  content: "▾";
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
}

.ib-plan[open] .ib-plan-summary::after { content: "▴"; }

.ib-plan-name {
  font-family: var(--font-display);
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--chalk);
}

.ib-plan-when { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }

.ib-plan-due-badge {
  border: 1px solid var(--amber);
  color: var(--amber);
  border-radius: 4px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ib-plan-body { padding: 0 16px 14px; }

.ib-plan-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid var(--border);
  font-size: 13px;
}

.ib-plan-item-name { flex: 1; color: var(--chalk); }
.ib-plan-item-sets { font-family: var(--font-mono); color: var(--muted); flex: 0 0 30px; }
.ib-plan-item-last { font-family: var(--font-mono); font-size: 12px; color: var(--teal); flex: 0 0 110px; text-align: right; }

.ib-plan-body .ib-btn { min-height: 48px; width: 100%; }

@media (max-width: 560px) {
  .ib-plan-item-last { flex-basis: 88px; font-size: 11px; }
}

/* --- Makro-Bewertung: Gramm mit Ampel, Evidenzstaerke immer dabei --- */

.ib-macro-list { display: flex; flex-direction: column; gap: 8px; }

.ib-macro-row {
  border-left: 4px solid var(--border);
  background: var(--surface2);
  border-radius: 6px;
  padding: 10px 14px;
}

.ib-macro-ok { border-left-color: var(--green); }
.ib-macro-low { border-left-color: var(--rust); }
.ib-macro-high { border-left-color: var(--amber); }
.ib-macro-unrated { border-left-color: var(--muted); }

.ib-macro-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.ib-macro-name {
  font-family: var(--font-display);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  flex: 0 0 130px;
}

.ib-macro-value { font-family: var(--font-mono); font-size: 14px; color: var(--chalk); }
.ib-macro-perkg { color: var(--muted); }

.ib-macro-verdict {
  margin-left: auto;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.ib-macro-ok .ib-macro-verdict { color: var(--green); }
.ib-macro-low .ib-macro-verdict { color: var(--rust); }
.ib-macro-high .ib-macro-verdict { color: var(--amber); }

.ib-macro-note { font-size: 11px; color: var(--muted); margin-top: 4px; }

.ib-range-select { max-width: 220px; margin-bottom: 12px; }

/* --- Ziel-Vorschlag: die Herleitung, nicht nur die Zahl --- */

.ib-suggestion {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  margin-top: 12px;
}

.ib-suggestion-row { font-family: var(--font-mono); font-size: 13px; color: var(--muted); padding: 2px 0; }
.ib-suggestion-flag { color: var(--amber); }

.ib-suggestion-result {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--amber);
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

@media (max-width: 560px) {
  .ib-macro-name { flex-basis: 100%; }
  .ib-macro-verdict { margin-left: 0; }
}

/* --- Feld und Knopf in einer Zeile, unten buendig --- */

.ib-inline-form {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.ib-inline-form .ib-field { flex: 1 1 240px; }
.ib-inline-form .ib-btn { min-height: 40px; white-space: nowrap; }