/* ============================================================
   BOXSPEC  FRAMEWORK7-THEME
   ------------------------------------------------------------
   Framework7 bringt Aufbau und Verhalten mit. Hier bekommt es
   die Marke: Rot statt iOS-Blau, echtes Schwarz statt Grau,
   und die Handvoll eigener Bausteine (Kalender, Zeitstrahl,
   Balken, Uebungszeilen), die es nicht mitbringt.
   Wirkt nur unter 768px.
   ============================================================ */
@media (max-width: 768px) {

/* Alte Oberflaeche stilllegen, schon vor dem ersten Bildaufbau */
html.is-mobile .topbar,
html.is-mobile .bottom-bar,
html.is-mobile .appbar-large,
html.is-mobile #app-screen > .page,
html.is-mobile #ai-coach-fab,
html.is-mobile #cloud-disconnected { display: none !important; }
html.is-mobile, html.is-mobile body { background: #000 !important; }

body.f7-on .topbar,
body.f7-on .bottom-bar,
body.f7-on .appbar-large,
body.f7-on #app-screen > .page,
body.f7-on #ai-coach-fab,
body.f7-on #cloud-disconnected { display: none !important; }
body.f7-on { margin: 0; background: #000; overflow: hidden; }

#f7-root { position: fixed; inset: 0; z-index: 900; }
#f7app  { width: 100%; height: 100%; }

/* ------------------------------------------------------------
   ALTBESTAND ENTWAFFNEN
   Das alte Stylesheet besitzt die Klasse .page schon und setzt
   sie auf display:none samt Innenabstand und Hoechstbreite.
   Framework7 benutzt exakt denselben Klassennamen. Innerhalb
   von #f7app gehoert .page deshalb Framework7, nicht style.css.
   ------------------------------------------------------------ */
#f7app .page {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  animation: none !important;
  opacity: 1 !important;
  background: #000;
}
#f7app .page > .page-header { display: block; }
#f7app .page-content { padding-left: 0; padding-right: 0; }
/* Die Aufraeumregeln der alten Handy-Schicht greifen hier nicht mehr */
#f7app .page > * { margin-left: 0; margin-right: 0; }
#f7app .page img { border-radius: 0; }

/* ---- Marke ---- */
:root, .dark, #f7app {
  --f7-theme-color: #E8000D;
  --f7-theme-color-rgb: 232, 0, 13;
  --f7-theme-color-shade: #c40009;
  --f7-theme-color-tint: #ff2430;
  --f7-bars-link-color: #FF4A4A;
  --f7-page-bg-color: #000;
  --f7-bars-bg-color: rgba(10,10,11,.82);
  --f7-list-bg-color: #131315;
  --f7-list-item-border-color: rgba(255,255,255,.09);
  --f7-block-strong-bg-color: #131315;
  --f7-list-strong-bg-color: #131315;
  --f7-text-color: #fff;
  --f7-block-title-text-color: rgba(235,235,245,.60);
  --f7-list-item-after-text-color: rgba(235,235,245,.60);
  --f7-list-item-subtitle-text-color: rgba(235,235,245,.60);
  --f7-list-item-text-text-color: rgba(235,235,245,.45);
  --f7-tabbar-link-inactive-color: rgba(235,235,245,.35);
  --f7-tabbar-link-active-color: #FF4A4A;
  --f7-picker-item-selected-text-color: #fff;
  --f7-font-size: 17px;
}
#f7app .page-content { background: #000; }
#f7app { -webkit-tap-highlight-color: transparent; }

/* Nur eine Schrift, wie im uebrigen System */
#f7app, #f7app .navbar, #f7app .title-large-text {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
               Roboto, system-ui, sans-serif;
}
#f7app .title-large-text { font-size: 34px; font-weight: 700; letter-spacing: -.02em; }
#f7app .block-title {
  font-size: 13px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; margin-bottom: 8px;
}

/* Erledigte Zeilen zuruecknehmen statt durchstreichen */
#f7app .item-content.is-done .item-title { color: rgba(235,235,245,.35); }

/* ---- Symbole und Navigationsleiste ---- */
/* Das alte Stylesheet besitzt .left und .right ebenfalls und malt
   dort einen Kreis hin. Innerhalb der Leiste gehoeren sie Framework7. */
#f7app .navbar .left, #f7app .navbar .right {
  background: none !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; padding: 0; min-width: 0; width: auto; height: auto;
}
#f7app .navbar .right .link.icon-only { padding: 0 8px; color: #FF4A4A; }
#f7app .ic { display: block; }
/* Apple verlangt 44pt Mindestflaeche. Die Reiterleiste bekommt sie
   vollstaendig, nicht nur so hoch wie ihr Inhalt. */
#f7app .tabbar .tab-link {
  flex-direction: column; gap: 3px; height: 100%; min-height: 49px;
}
#f7app .tabbar-label { font-size: 10px; font-weight: 500; letter-spacing: .01em; }
#f7app .toolbar.tabbar { --f7-tabbar-icons-height: 54px; height: 54px; }
#f7app .views.tabs > .tabbar { background: rgba(10,10,11,.90); }

/* Eigener Winkel, da die Icon-Schrift bewusst nicht mitgeliefert wird */
#f7app .item-after.chev {
  width: 8px; height: 8px; border: solid rgba(235,235,245,.30);
  border-width: 1.6px 1.6px 0 0; transform: rotate(45deg); margin-left: 6px;
}

/* ---- Heutige Einheit ---- */
#f7app .sess { padding: 16px; }
#f7app .sess-top {
  display: flex; justify-content: space-between;
  font-size: 13px; color: rgba(235,235,245,.60); margin-bottom: 6px;
}
#f7app .sess-title { font-size: 22px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 14px; }

/* ---- Balken ---- */
#f7app .statbar { height: 3px; background: rgba(255,255,255,.10); border-radius: 2px; margin-top: 8px; }
#f7app .statbar.big { height: 5px; border-radius: 3px; margin-top: 0; }
#f7app .statbar i { display: block; height: 100%; background: #E8000D; border-radius: inherit; }
#f7app .item-inner.stat { display: block; padding-top: 10px; padding-bottom: 10px; }

/* ---- Wochenleiste ---- */
#f7app .week { display: flex; gap: 6px; }
#f7app .wd {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 11px 0; background: #131315; border-radius: 12px;
  color: rgba(235,235,245,.60); font-size: 11px; font-weight: 600; text-decoration: none;
}
#f7app .wd.now { background: #1F1F22; color: #fff; }
#f7app .wd .ring {
  width: 20px; height: 20px; border-radius: 50%;
  background: conic-gradient(#E8000D var(--p), rgba(255,255,255,.12) 0);
  -webkit-mask: radial-gradient(circle, transparent 5px, #000 6px);
          mask: radial-gradient(circle, transparent 5px, #000 6px);
}
#f7app .wd.full .ring { background: #30D158; }

/* ---- Kalender ---- */
#f7app .cal { padding: 14px 10px 12px; }
#f7app .cal-h { text-align: center; font-size: 17px; margin-bottom: 12px; }
#f7app .cal-w, #f7app .cal-g { display: grid; grid-template-columns: repeat(7, 1fr); }
#f7app .cal-w span {
  text-align: center; font-size: 11px; font-weight: 600;
  color: rgba(235,235,245,.30); padding-bottom: 8px;
}
#f7app .cal-g { row-gap: 3px; }
#f7app .cal-d {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  position: relative; font-size: 16px; color: #fff; text-decoration: none; border-radius: 50%;
}
#f7app .cal-d.out { color: rgba(235,235,245,.18); pointer-events: none; }
#f7app .cal-d.today { background: #E8000D; font-weight: 600; }
#f7app .cal-d.has::after {
  content: ""; position: absolute; bottom: 5px; width: 4px; height: 4px;
  border-radius: 50%; background: #E8000D;
}
#f7app .cal-d.has.ok::after { background: #30D158; }
#f7app .cal-d.today.has::after { background: #fff; }

/* ---- Zeitstrahl ---- */
#f7app .tl { padding-left: 4px; }
#f7app .tl-e { display: flex; gap: 12px; position: relative; padding-bottom: 18px; }
#f7app .tl-e:last-child { padding-bottom: 0; }
#f7app .tl-t {
  flex: 0 0 46px; font-size: 13px; font-weight: 600;
  color: rgba(235,235,245,.60); padding-top: 13px; text-align: right;
}
#f7app .tl-c {
  flex: 1; display: block; background: #131315; border-radius: 12px;
  padding: 12px 14px; text-decoration: none; position: relative;
}
#f7app .tl-e::before {
  content: ""; position: absolute; left: 54px; top: 34px; bottom: 4px;
  width: 1px; background: rgba(255,255,255,.09);
}
#f7app .tl-e:last-child::before { display: none; }
#f7app .tl-n { display: block; font-size: 16px; color: #fff; }
#f7app .tl-s { display: block; font-size: 13px; color: rgba(235,235,245,.60); margin-top: 2px; }
#f7app .tl-e.is-done .tl-n { color: rgba(235,235,245,.35); }
#f7app .tl-e.is-now .tl-c { background: #1F1F22; }

/* ---- Haken ---- */
/* Sichtbar sind 26px, antippbar sind 44. Apple verlangt 44pt Flaeche,
   aber ein 44px grosser Kreis neben einer Zeile waere ein Klotz. Der
   Kreis steckt deshalb als Pseudoelement mittig in einer groesseren,
   durchsichtigen Flaeche. */
#f7app .tick {
  display: block; width: 44px; height: 44px; flex: 0 0 44px;
  position: relative; border: 0; background: none; padding: 0;
}
#f7app .tick::before {
  content: ""; position: absolute; left: 9px; top: 9px;
  width: 26px; height: 26px; border-radius: 50%; box-sizing: border-box;
  border: 1.6px solid rgba(255,255,255,.22);
  transition: background-color .12s linear, border-color .12s linear;
}
#f7app .tick.on::before { background: #30D158; border-color: #30D158; }
#f7app .tick.on::after {
  content: ""; position: absolute; left: 18px; top: 14px; width: 5px; height: 10px;
  border: solid #000; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
#f7app .item-media .tick { margin: 0; }
#f7app a.stretch { display: block; color: inherit; text-decoration: none; }

/* ---- Uebungszeilen mit Bild ---- */
#f7app .media-list .item-media img {
  width: 52px; height: 52px; border-radius: 10px; object-fit: cover;
  background: #1F1F22; display: block;
}
#f7app .media-list .item-media .ph {
  width: 52px; height: 52px; border-radius: 10px; background: #1F1F22; display: block;
}
#f7app .media-list .item-content { padding-top: 10px; padding-bottom: 10px; }

/* ---- Bild oben auf der Uebungsseite ---- */
#f7app .hero img { width: 100%; border-radius: 14px; display: block; background: #1F1F22; }

/* ---- Fliesstext ---- */
#f7app .prose { font-size: 15px; line-height: 1.55; color: rgba(235,235,245,.75); margin: 0; }

/* ---- Altbestand, der noch eingebettet wird ---- */
#f7app .legacy { font-size: 15px; line-height: 1.6; color: rgba(235,235,245,.75); }
#f7app .legacy h1, #f7app .legacy h2, #f7app .legacy h3 {
  font-size: 17px; font-weight: 600; color: #fff; margin: 22px 0 8px; letter-spacing: -.01em;
}
#f7app .legacy p, #f7app .legacy li { font-size: 15px; line-height: 1.6; }
#f7app .legacy ul, #f7app .legacy ol { padding-left: 20px; }
#f7app .legacy img { max-width: 100%; height: auto; border-radius: 10px; }
#f7app .legacy table {
  width: 100%; font-size: 14px; border-collapse: collapse; display: block; overflow-x: auto;
}
#f7app .legacy td, #f7app .legacy th {
  padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,.09); text-align: left;
}
#f7app .legacy .card, #f7app .legacy .info-box, #f7app .legacy .stat-card {
  background: #131315; border: 0; border-radius: 12px; padding: 14px; margin: 12px 0;
}

/* ------------------------------------------------------------
   EINGEBETTETER ALTBESTAND
   Die alte Handy-Ansicht klappt lange Textkaesten auf 160px zu
   und blendet "Mehr anzeigen" ein. Hier ist jedes Kapitel schon
   ein eigener Bildschirm, das Zuklappen versteckt nur Inhalt.
   ------------------------------------------------------------ */
#f7app .legacy .card-body {
  max-height: none !important; overflow: visible !important; cursor: default !important;
}
#f7app .legacy .card-body::after { display: none !important; content: none !important; }

/* Der Zeilenabstand kam aus der alten Plakat-Optik. Fliesstext liest
   sich bei 1,55 deutlich ruhiger. */
#f7app .legacy p,
#f7app .legacy li,
#f7app .legacy div,
#f7app .legacy span,
#f7app .legacy td { line-height: 1.55 !important; }
#f7app .legacy h1, #f7app .legacy h2, #f7app .legacy h3,
#f7app .legacy .card-header, #f7app .legacy [id^="ern-s"] {
  line-height: 1.25 !important; font-size: 19px !important;
  letter-spacing: -.01em; text-transform: none;
}
/* Kartentitel des Altbestands tragen dieselbe Abschnittsmarke wie
   der Rest der App, statt eine zweite Groesse einzufuehren. */
#f7app .legacy .card-title {
  font-size: 13px !important; font-weight: 600; letter-spacing: .04em;
  line-height: 1.3 !important; color: rgba(235,235,245,.60);
  margin: 0 0 10px; text-transform: uppercase;
}
#f7app .legacy [style*="font-size"] { font-size: inherit !important; }

/* Titel eines Detailbildschirms steht im Inhalt, nicht nur in der
   Leiste, wo er abgeschnitten wuerde. */
#f7app .big {
  font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15;
  margin: 4px 16px 16px; color: #fff;
}

/* ---- Formularfelder ----
   Framework7 bringt sie mit, sie brauchen nur die Farben und die
   Mindestflaeche. Schriftgroesse steht im Regelwerk auf 16px, sonst
   zoomt iOS beim Fokussieren hinein. */
#f7app .item-input .item-label { font-size: 13px; color: rgba(235,235,245,.60); }
#f7app .item-input input,
#f7app .item-input textarea {
  color: #fff; background: transparent; border: 0; width: 100%;
  padding: 6px 0 10px; min-height: 34px; resize: none;
  font-family: inherit;
}
#f7app .item-input input::placeholder,
#f7app .item-input textarea::placeholder { color: rgba(235,235,245,.30); }
#f7app .item-input input[type="date"] { -webkit-appearance: none; appearance: none; }
#f7app .item-input .item-inner { padding-top: 10px; padding-bottom: 4px; }
#f7app .item-content.item-input { min-height: 56px; }

/* ---- Bausteine der Inhaltsdaten ----
   Ersetzen den eingebetteten Altbestand. Ab hier braucht das Handy
   fuer diese Seiten kein style.css mehr. */

/* Produktnamen und Beschreibungen sind Inhalt, kein Etikett: sie
   duerfen umbrechen statt abgeschnitten zu werden. */
/* Framework7 kappt .item-text nach zwei Zeilen und setzt
   Auslassungspunkte. Bei Etiketten ist das richtig, bei Inhalt nicht:
   "Energieproduktion... nutzen." liest sich wie ein Fehler, und der
   Text steht ja da. Die Kappung muss vollstaendig zurueckgenommen
   werden, white-space allein reicht nicht. */
#f7app .bs-wrap {
  white-space: normal; overflow: visible; text-overflow: clip;
  display: block; -webkit-line-clamp: unset; -webkit-box-orient: horizontal;
  max-height: none;
}
#f7app .item-text.bs-wrap { line-height: 1.45; margin-top: 3px; }

#f7app .bs-list { margin: 0; padding-left: 20px; }
#f7app .bs-list li { margin-bottom: 7px; }
#f7app .bs-list li:last-child { margin-bottom: 0; }

/* Tabellen scrollen in ihrem eigenen Kasten, nie die Seite. Die
   Kopfzeile bleibt stehen, sonst weiss man nach zwei Spalten nicht
   mehr, was man liest. */
#f7app .bs-tablewrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  background: #131315; border-radius: 12px; padding: 0;
}
#f7app .bs-table { border-collapse: collapse; width: max-content; min-width: 100%; font-size: 14px; }
#f7app .bs-table th, #f7app .bs-table td {
  padding: 10px 14px; text-align: left; white-space: nowrap;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
#f7app .bs-table th {
  position: sticky; top: 0; z-index: 1; background: #1F1F22;
  font-size: 12px; font-weight: 600; letter-spacing: .03em;
  text-transform: uppercase; color: rgba(235,235,245,.60);
}
#f7app .bs-table td { color: rgba(235,235,245,.85); }
#f7app .bs-table tr:last-child td { border-bottom: 0; }

/* Hinweiskarte. Die Toenung sitzt als schmale Marke oben, nicht als
   Streifen links: ein farbiger Balken an der Kante ist das
   Erkennungsmerkmal generierter Seiten. */
#f7app .bs-note {
  background: #131315; border-radius: 12px; padding: 14px 16px;
}
/* Keine Versalien: Notiz-Titel sind ganze Saetze aus dem Inhalt, keine
   Etiketten. "Was Muskelproteinsynthese heisst" in Grossbuchstaben
   schreit, und im Deutschen macht text-transform aus dem ss ein SS,
   veraendert also das Wort. Etiketten duerfen gross, Saetze nicht. */
#f7app .bs-note-t {
  display: block; font-size: 15px; font-weight: 600; letter-spacing: -.01em;
  color: var(--tone); margin-bottom: 5px;
}
#f7app .bs-note .prose { margin: 0; }

#f7app .bs-card { margin-bottom: 4px; }
#f7app .bs-card .block-title { margin-top: 22px; }

#f7app .bs-fig { padding: 0; }
#f7app .bs-fig img { width: 100%; border-radius: 12px; display: block; background: #1F1F22; }
#f7app .bs-cap {
  display: block; font-size: 13px; color: rgba(235,235,245,.60); margin-top: 8px;
}

/* Phasen und Wochen des Programms */
#f7app .bs-phase-n { font-size: 19px; font-weight: 600; margin: 2px 0 10px; }
#f7app .bs-phase .bs-list { margin-top: 12px; font-size: 15px; color: rgba(235,235,245,.75); }
#f7app .bs-weeks { background: #131315; border-radius: 12px; padding: 4px 0; }
#f7app .bs-week {
  display: flex; align-items: center; gap: 12px; padding: 11px 16px;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
#f7app .bs-week:last-child { border-bottom: 0; }
#f7app .bs-week-n {
  flex: 0 0 26px; height: 26px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: 13px; font-weight: 600;
  background: rgba(255,255,255,.08); color: rgba(235,235,245,.60);
}
#f7app .bs-week.done .bs-week-n { background: rgba(48,209,88,.18); color: #30D158; }
#f7app .bs-week.now .bs-week-n { background: #E8000D; color: #fff; }
#f7app .bs-week-p { flex: 1; font-size: 16px; }
#f7app .bs-week.now .bs-week-p { font-weight: 600; }
/* Der Mahlzeitenplan nutzt den Zeitstrahl der Tagesansicht, braucht
   aber Fliesstext statt einer Zeile und einen Punkt je Mahlzeit. */
#f7app .tl-punkt { position: relative; }
#f7app .tl-punkt::after {
  content: ""; position: absolute; left: 51px; top: 18px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--tone, #0A84FF); z-index: 1;
}
#f7app .tl-punkt .tl-n { font-weight: 600; }
#f7app .tl-punkt .tl-s { line-height: 1.5; margin-top: 4px; }

#f7app .bs-week-tag {
  font-size: 11px; font-weight: 600; letter-spacing: .03em;
  color: rgba(235,235,245,.60); background: rgba(255,255,255,.08);
  padding: 3px 8px; border-radius: 6px;
}
#f7app .bs-week-jetzt {
  font-size: 12px; font-weight: 600; color: #FF4A4A;
  letter-spacing: .03em; text-transform: uppercase;
}

/* ---- Auswahlrad ----
   Framework7 richtet eine einzelne Spalte rechtsbuendig aus, weil sie
   zugleich erste und letzte ist. Bei einer Spalte gehoert der Wert in
   die Mitte, so wie es iOS macht. */
#f7app .picker {
  background: #1C1C1E; z-index: 12500;
}
/* Framework7 setzt die Leiste absolut an den oberen Rand, gibt den
   Spalten darunter aber keinen Ausgleich: beide begannen an derselben
   Stelle, und "Fertig" schwebte ueber der obersten Zahl. Geometrie
   deshalb hier explizit. */
#f7app .picker .toolbar {
  background: #1C1C1E; border-bottom: 1px solid rgba(255,255,255,.09);
  height: 44px;
}
#f7app .picker .toolbar .toolbar-inner {
  height: 44px; padding: 0 8px; justify-content: flex-end;
}
#f7app .picker .picker-columns {
  margin-top: 44px; height: calc(100% - 44px);
}
#f7app .picker { box-shadow: 0 -8px 30px rgba(0,0,0,.45); }
#f7app .picker .toolbar a.link { color: #FF4A4A; font-weight: 600; }
/* Neben dem Wort "Fertig" braucht es kein zweites Schliesszeichen. */
#f7app .picker .toolbar a.link .icon-close { display: none; }
#f7app .picker-column-first.picker-column-last .picker-item {
  text-align: center; padding: 0;
}
#f7app .picker-item { font-size: 22px; }
#f7app .picker-center-highlight { background: rgba(255,255,255,.08); }

/* Der schwebende Coach-Knopf hat in einer App nichts zu suchen,
   er sitzt jetzt als Symbol in der Navigationsleiste. */
body.f7-on #ai-coach-fab { display: none !important; }
/* Der Coach-Bereich liegt im alten Stylesheet auf 600 und waere damit
   hinter der neuen Oberflaeche (900) verschwunden. Er gehoert darueber,
   aber unter die Auswahlraeder von Framework7 (13000). */
body.f7-on #ai-coach-panel {
  z-index: 12000; width: 100vw; height: 82vh; max-height: none;
  border-radius: 16px 16px 0 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

}