/* ═══════════════════════════════════════════════════════════════════
   E-BOOK-DESIGNS — persoenliche Erscheinungsbilder im Stil eines E-Books
   Eine gemeinsame Schicht fuer Karten, Knoepfe, Eingaben und Titelbild.
   Die Designs unterscheiden sich nur in den --eb-* Werten ganz oben:

   raupe    Rominas "Von der Raupe zum Schmetterling": Pink und
            Waldgruen, Pinselschrift (Permanent Marker, Apache-Lizenz).
            Gilt in der ganzen App.
   marshmallow  "Vom Marshmallow zum Monster" fuer alle, die abnehmen:
            Schwarz und Altrosa, Anton (OFL) fuer Ueberschriften, Playfair
            Display Kursiv (OFL) als Zierschrift.
   grashalm "Vom Grashalm zum Monster" fuer den Aufbau: Dunkelgruen und
            Salbei, dieselben Schriften.
   Marshmallow und Grashalm gelten nur im eigenen Coaching-Bereich.
   Welches Design jemand bekommt, steht in member_profiles_v2.coaching_design
   und wird in der Coaching-Verwaltung gewaehlt.

   Greift nur, wenn app.js data-ebook auf <html> setzt. Alle Regeln haengen
   daran und lassen das DFQ-Design fuer alle anderen unberuehrt.
   ═══════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Permanent Marker";
  src: url("/fonts/permanent-marker.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Anton";
  src: url("/fonts/anton.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("/fonts/playfair-italic.ttf") format("truetype");
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
}

html[data-ebook="raupe"] {
  --eb-akzent: #e25b8f;
  --eb-akzent-rgb: 226, 91, 143;
  --eb-akzent-hell: #f48db5;
  --eb-akzent-zart: #f8c9db;
  --eb-akzent-tief: #a93a66;
  --eb-zweit: #4d6b4f;
  --eb-zweit-rgb: 77, 107, 79;
  --eb-zweit-hell: #8fbf90;
  --eb-titel: "Permanent Marker", "Marker Felt", var(--eb-schrift);
  --eb-zier: var(--eb-titel);
  --eb-titel-gross: none;
  --eb-symbol: "🦋";
  --eb-hero: url("/ui/raupe-cover.jpg");
  --eb-hero-format: 1320 / 674;
  --eb-karte: rgba(34, 24, 32, 0.78);
  --eb-feld: #120d12;
  --eb-menue: #150f15;
  --eb-kopf: rgba(15, 11, 15, 0.86);
  --ink: #0f0b0f;
  --panel: #1a1319;
  --panel-deep: #140f14;
  --panel-2: #231a22;
  --line: #3a2a36;
  --text: #fdf4f7;
  --text-body: #eadbe2;
  --text-dim: #b79dab;
  --row: #151015;
  --row-open: #1c151b;
}

html[data-ebook="marshmallow"] {
  --eb-akzent: #c9738c;
  --eb-akzent-rgb: 201, 115, 140;
  --eb-akzent-hell: #e19bb0;
  --eb-akzent-zart: #efd3dc;
  --eb-akzent-tief: #8f4a5e;
  --eb-zweit: #8f4a5e;
  --eb-zweit-rgb: 143, 74, 94;
  --eb-zweit-hell: #e19bb0;
  --eb-titel: "Anton", "Impact", "Helvetica Neue", var(--eb-schrift);
  --eb-zier: "Playfair Display", Georgia, "Times New Roman", serif;
  --eb-titel-gross: uppercase;
  --eb-symbol: "💪";
  --eb-hero: url("/ui/marshmallow-cover.jpg");
  --eb-hero-format: 1140 / 580;
  --eb-karte: rgba(22, 16, 19, 0.9);
  --eb-feld: #0d090b;
  --eb-menue: #100b0d;
  --eb-kopf: rgba(10, 6, 8, 0.9);
  --ink: #0b0709;
  --panel: #161013;
  --panel-deep: #120c0f;
  --panel-2: #1f171b;
  --line: #3a2a31;
  --text: #f7eff2;
  --text-body: #e2d5da;
  --text-dim: #a8949c;
  --row: #120c0f;
  --row-open: #181115;
}

html[data-ebook="grashalm"] {
  --eb-akzent: #93a56b;
  --eb-akzent-rgb: 147, 165, 107;
  --eb-akzent-hell: #b5c48c;
  --eb-akzent-zart: #dfe5cc;
  --eb-akzent-tief: #5f6e3f;
  --eb-zweit: #5f6e3f;
  --eb-zweit-rgb: 95, 110, 63;
  --eb-zweit-hell: #b5c48c;
  --eb-knopf-text: #10150c;
  --eb-titel: "Anton", "Impact", "Helvetica Neue", var(--eb-schrift);
  --eb-zier: "Playfair Display", Georgia, "Times New Roman", serif;
  --eb-titel-gross: uppercase;
  --eb-symbol: "🌱";
  --eb-hero: url("/ui/grashalm-cover.jpg");
  --eb-hero-format: 1140 / 580;
  --eb-karte: rgba(23, 29, 18, 0.9);
  --eb-feld: #0c1009;
  --eb-menue: #0f130b;
  --eb-kopf: rgba(12, 16, 9, 0.9);
  --ink: #10150c;
  --panel: #171d12;
  --panel-deep: #131810;
  --panel-2: #1f2618;
  --line: #34402a;
  --text: #f1efe6;
  --text-body: #dcdccd;
  --text-dim: #9aa38a;
  --row: #131810;
  --row-open: #182014;
}

html[data-ebook] {
  --eb-schrift: -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Helvetica Neue", Arial, sans-serif;
  --eb-radius: 16px;

  /* Die DFQ-Variablen auf die E-Book-Farben umbiegen. So folgen alle
     Stellen, die bereits mit Variablen arbeiten, ohne eigene Regel. */
  --gold: var(--eb-akzent);
  --gold-lit: var(--eb-akzent-hell);
  --gold-dim: var(--eb-akzent-tief);
  --olive: var(--eb-zweit);
  --olive-lit: var(--eb-zweit-hell);
  --bevel-lit: transparent;
  --bevel-dark: transparent;
  --alarm: #e3674f;
  --chart-cap: var(--eb-akzent-zart);
  --font-head: var(--eb-titel);
  --font-num: var(--eb-schrift);
  --font-text: var(--eb-schrift);
  --btn-olive: none;
  --btn-dark: none;
  --btn-gold: none;
  --btn-compact: none;
}

/* ── Grund: weicher Farbschimmer statt Scanlinien ─────────────── */
html[data-ebook] body {
  background-color: var(--ink);
  background-image:
    radial-gradient(120% 60% at 85% -10%, rgba(var(--eb-akzent-rgb), 0.22), transparent 60%),
    radial-gradient(90% 50% at -10% 110%, rgba(var(--eb-zweit-rgb), 0.2), transparent 60%);
  color: var(--text-body);
}
html[data-ebook] #app {
  background: transparent !important;
  border-color: var(--line) !important;
}

/* ── Schrift: ruhige Systemschrift, Pinsel nur fuer Ueberschriften ── */
html[data-ebook] body,
html[data-ebook] body * {
  font-family: var(--eb-schrift) !important;
}
html[data-ebook] .section-title,
html[data-ebook] .panel h1,
html[data-ebook] .panel .panel-title,
html[data-ebook] .topbar-where strong,
html[data-ebook] .coach-phase-kopf h2,
html[data-ebook] .coach-auftrag > strong,
html[data-ebook] .track-claim h1,
html[data-ebook] .ebook-hero strong,
html[data-ebook] .ebook-hero strong span,
html[data-ebook] .drawer h3 {
  font-family: var(--eb-titel) !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
  text-transform: var(--eb-titel-gross) !important;
}
html[data-ebook] .section-title,
html[data-ebook] .coach-phase-kopf h2 {
  color: var(--eb-akzent);
}
html[data-ebook] .coach-status-zeile strong,
html[data-ebook] .coach-status-zeile b,
html[data-ebook] .coach-sec .nr,
html[data-ebook] .coach-sec .stand,
html[data-ebook] .coach-kurzwerte strong {
  font-variant-numeric: tabular-nums;
}

/* ── Metallplatten und Warnstreifen weg ─────────────────────────── */
html[data-ebook] .btn,
html[data-ebook] .button,
html[data-ebook] .seg button,
html[data-ebook] .tabs .tab,
html[data-ebook] .coach-seg button,
html[data-ebook] .cfg-uebernehmen {
  border-image: none !important;
}
html[data-ebook] .hazard-strip,
html[data-ebook] .terminal-strip {
  display: none !important;
}
html[data-ebook] .brk::after {
  content: none !important;
}

/* ── Knoepfe: Pink wie die Pinselbanner im E-Book ───────────────── */
html[data-ebook] .btn,
html[data-ebook] .button,
html[data-ebook] .cfg-uebernehmen {
  background: linear-gradient(135deg, var(--eb-akzent-hell), var(--eb-akzent)) !important;
  color: var(--eb-knopf-text, #fff) !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: 0 6px 18px rgba(var(--eb-akzent-rgb), 0.28) !important;
  text-shadow: none !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}
html[data-ebook] .btn:active,
html[data-ebook] .button:active {
  transform: scale(0.98);
}
html[data-ebook] .btn.ghost,
html[data-ebook] .btn.quiet,
html[data-ebook] .button.secondary,
html[data-ebook] .button.small {
  background: transparent !important;
  color: var(--eb-akzent-hell) !important;
  border: 1.5px solid var(--eb-akzent) !important;
  box-shadow: none !important;
}
html[data-ebook] .button.danger {
  background: transparent !important;
  color: var(--alarm) !important;
  border: 1.5px solid var(--alarm) !important;
  box-shadow: none !important;
}

/* ── Segmente, Reiter, Ja/Nein ──────────────────────────────────── */
html[data-ebook] .seg button,
html[data-ebook] .coach-seg button,
html[data-ebook] .tabs .tab {
  background: var(--panel-2) !important;
  color: var(--text-dim) !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}
html[data-ebook] .seg button.on,
html[data-ebook] .coach-seg button.on,
html[data-ebook] .tabs .tab.on {
  background: var(--eb-akzent) !important;
  border-color: var(--eb-akzent) !important;
  color: var(--eb-knopf-text, #fff) !important;
}
html[data-ebook] .coach-janein button {
  border-radius: 999px !important;
  border: 1.5px solid var(--line) !important;
  background: var(--panel-2) !important;
  color: var(--text-dim) !important;
  box-shadow: none !important;
}
html[data-ebook] .coach-janein button.on {
  background: var(--eb-akzent) !important;
  border-color: var(--eb-akzent) !important;
  color: var(--eb-knopf-text, #fff) !important;
}
html[data-ebook] .coach-janein button.on.nein {
  background: var(--eb-zweit) !important;
  border-color: var(--eb-zweit) !important;
}

/* ── Flaechen: weich gerundete Karten statt Platten ─────────────── */
html[data-ebook] .panel,
html[data-ebook] .card,
html[data-ebook] .coach-status,
html[data-ebook] .coach-auftrag,
html[data-ebook] .coach-phase,
html[data-ebook] .me-card {
  background: var(--eb-karte) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--eb-radius) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
html[data-ebook] .coach-phase .coach-sec {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-ebook] .coach-sec .sec-name {
  text-transform: none;
  letter-spacing: 0;
  font-size: 15px;
  font-weight: 600;
}
html[data-ebook] .coach-sec .nr {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(var(--eb-akzent-rgb), 0.16);
  color: var(--eb-akzent-hell);
  font-size: 11px;
  font-weight: 700;
}
html[data-ebook] .coach-sec .stand.ok {
  color: var(--eb-zweit-hell);
}

/* Die Nummernkreise wirken als "Etappen" - erledigte werden gruen,
   passend zum gruenen Banner "Kleine Schritte. Grosse Veraenderung." */
html[data-ebook] .coach-sec:has(.stand.ok) .nr {
  background: var(--eb-zweit);
  color: #fff;
}

/* ── Tagesfortschritt: die Raupe krabbelt zum Schmetterling ─────── */
html[data-ebook] .coach-status-balken {
  position: relative;
  height: 10px !important;
  border-radius: 999px !important;
  background: var(--panel-2) !important;
  border: 0 !important;
  overflow: visible !important;
}
html[data-ebook] .coach-status-balken::before {
  content: "" !important;
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--tagesfortschritt, 0%) !important;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--eb-zweit-hell), var(--eb-akzent)) !important;
}
html[data-ebook] .coach-status-balken::after {
  content: var(--eb-symbol) !important;
  position: absolute;
  top: 50%;
  left: clamp(0px, calc(var(--tagesfortschritt, 0%) - 10px), calc(100% - 20px));
  transform: translateY(-55%);
  font-size: 18px;
  line-height: 1;
  background: none !important;
  width: auto !important;
  height: auto !important;
}
html[data-ebook] .coach-status-zeile b {
  color: var(--eb-akzent-hell);
}
html[data-ebook] .coach-auftrag > small {
  color: var(--eb-akzent-hell);
}

/* ── Eingaben ───────────────────────────────────────────────────── */
html[data-ebook] .inp,
html[data-ebook] .coach-inp,
html[data-ebook] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html[data-ebook] select,
html[data-ebook] textarea {
  background: var(--eb-feld) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  color: var(--text) !important;
}
html[data-ebook] .inp:focus,
html[data-ebook] .coach-inp:focus,
html[data-ebook] input:focus,
html[data-ebook] select:focus,
html[data-ebook] textarea:focus {
  outline: none !important;
  border-color: var(--eb-akzent) !important;
  box-shadow: 0 0 0 3px rgba(var(--eb-akzent-rgb), 0.25) !important;
}

/* Haken bei Mahlzeiten und Supplements */
html[data-ebook] .coach-schalter .kasten {
  border-radius: 8px !important;
  border-color: var(--eb-akzent) !important;
}
html[data-ebook] .coach-schalter.on .kasten {
  background: var(--eb-akzent) !important;
}

/* Hinweise wie die Infoboxen im E-Book: pinker Kopf, heller Grund */
html[data-ebook] .coach-warnung {
  border-radius: 12px !important;
  border: 1px solid var(--eb-akzent) !important;
  background: rgba(var(--eb-akzent-rgb), 0.12) !important;
  color: var(--eb-akzent-zart) !important;
}

/* ── Kopfzeile, Menue, Fusszeile ────────────────────────────────── */
html[data-ebook] .topbar {
  background: var(--eb-kopf) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line) !important;
}
html[data-ebook] .topbar-where small {
  color: var(--eb-akzent-hell) !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
}
html[data-ebook] .topbar-where strong {
  color: var(--text) !important;
  font-size: 20px !important;
}
html[data-ebook] .topbar-me,
html[data-ebook] .topbar-icon,
html[data-ebook] .burger {
  border-radius: 50% !important;
  border: 1.5px solid var(--eb-akzent) !important;
  background: rgba(var(--eb-akzent-rgb), 0.12) !important;
  box-shadow: none !important;
  color: var(--eb-akzent-hell) !important;
}
html[data-ebook] .burger span {
  background: var(--eb-akzent-hell) !important;
}
html[data-ebook] .drawer-inner {
  background: var(--eb-menue) !important;
  border-right: 1px solid var(--line) !important;
}
html[data-ebook] .drawer button.on {
  color: var(--eb-akzent-hell) !important;
  background: rgba(var(--eb-akzent-rgb), 0.14) !important;
  border-radius: 12px;
}
html[data-ebook] .toast {
  background: var(--eb-akzent) !important;
  color: var(--eb-knopf-text, #fff) !important;
  border-radius: 999px !important;
  border: 0 !important;
}
html[data-ebook] .legal-bar button {
  color: var(--text-dim) !important;
}

/* ── Titelbild aus dem Cover ────────────────────────────────────── */
.ebook-hero {
  display: none;
}
html[data-ebook] .ebook-hero {
  display: block;
  position: relative;
  margin: 12px var(--gutter, 16px) 4px;
  aspect-ratio: var(--eb-hero-format);
  max-height: 260px;
  width: auto;
  border-radius: 20px;
  overflow: hidden;
  background: var(--ink) var(--eb-hero) center / cover no-repeat;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
}
html[data-ebook] .ebook-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, var(--eb-kopf));
}
html[data-ebook] .ebook-hero strong {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 10px;
  z-index: 1;
  color: #fff;
  font-size: clamp(18px, 5vw, 26px);
  font-weight: 400;
  line-height: 1.1;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}
html[data-ebook] .ebook-hero strong em {
  font-family: var(--eb-zier) !important;
  font-style: italic;
}
html[data-ebook] .ebook-hero strong span {
  color: var(--eb-akzent-hell);
}
html[data-ebook="marshmallow"] .ebook-hero strong em,
html[data-ebook="grashalm"] .ebook-hero strong em {
  font-weight: 500;
  text-transform: none;
}
html[data-ebook="marshmallow"] .ebook-hero strong span,
html[data-ebook="grashalm"] .ebook-hero strong span {
  letter-spacing: 0.04em !important;
}

/* Monster-E-Books: Etiketten gesperrt wie "TRAININGS-EBOOK" auf dem Cover */
html[data-ebook="marshmallow"] .coach-auftrag > small,
html[data-ebook="marshmallow"] .topbar-where small,
html[data-ebook="marshmallow"] .coach-status-zeile strong span,
html[data-ebook="grashalm"] .coach-auftrag > small,
html[data-ebook="grashalm"] .topbar-where small,
html[data-ebook="grashalm"] .coach-status-zeile strong span {
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
}
html[data-ebook="marshmallow"] .coach-phase-kopf h2,
html[data-ebook="grashalm"] .coach-phase-kopf h2 {
  letter-spacing: 0.06em !important;
}

/* Anmeldeseite auf Rominas Geraet: gleicher Look statt Terminal */
html[data-ebook] .header {
  background: transparent !important;
  border: 0 !important;
}
html[data-ebook] .auth-motto strong {
  font-family: var(--eb-titel) !important;
  color: var(--eb-akzent) !important;
  text-transform: none !important;
}