/* CACHE-BUSTING-HINWEIS (2026-08-26): backontrack.css wird als seitenlokale
   Datei referenziert (backontrack.css?v=...), NICHT als ui.1.ki-Verweis --
   deploy.py's stempel()-Mechanismus (Inhalts-Hash aus Abschnitt 6h/Status-Log
   2026-08-26) haengt sich nur an https://ui.1.ki/... an und laesst diesen
   Query-String unangetastet. Jede inhaltliche Aenderung hier braucht deshalb
   von Hand einen neuen ?v=-Wert im <link>-Tag von index.html, sonst liefert
   der Browser mit noch gueltigem Cache weiterhin den alten Stand aus --
   dieselbe Fehlerklasse, die der automatische Hash bei ui.1.ki verhindert.

   ============================================================================
   BackOnTrack-Seite, App-Layer
   ----------------------------------------------------------------------------
   Laedt nach dem zentralen Theme und dem sections-Modul, enthaelt nur, was
   diese eine Seite zusaetzlich braucht. Keine eigenen Farbwerte (Regel aus
   UI-Module_Standard Abschnitt 6a), ausschliesslich Theme-Variablen.
   Quelle: Projektplan Landingpage-Engine, Paket S2.
   ========================================================================= */

/* ---- Phasen-Poster: zwei Streifen statt einem Bild (Seitenkonzept 6.3, Weg A) */
.bot-phasen-streifen {
  display: grid;
  gap: var(--space-3);
  margin: 0;
}

/* ---- Portraet-Block (Abschnitt 5.7): Portrait_Namensbogen.png ist eine
   fertige Komposition mit Namensbogen und Ring. Der runde Kachel-Ausschnitt
   aus dem sections-Modul (.sec-person-portraet) wuerde Namensbogen und Ring
   abschneiden -- diese eine Instanz bekommt deshalb einen eigenen, nicht
   beschnittenen Rahmen. Modul selbst bleibt unveraendert. */
.bot-portraet {
  width: clamp(160px, 26vw, 240px);
  aspect-ratio: auto;
  height: auto;
  border-radius: 0;
  border: none;
  background: none;
  overflow: visible;
}
.bot-portraet img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* ---- Formular-Platzhalter (Paket S4, noch kein HubSpot-Code) */
.bot-formular-platzhalter {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--glass);
  text-align: left;
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto;
}
.bot-formular-platzhalter p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.bot-formular-platzhalter .bot-formular-label {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sky);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 10px;
  margin-bottom: var(--space-2);
}

/* ---- Kontaktzeile unter dem Abschluss-CTA */
.bot-kontaktzeile {
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.bot-kontaktzeile a { color: var(--text-muted); }
.bot-kontaktzeile a:hover { color: var(--sky); }

/* ============================================================================
   Nacharbeit Christian-Feedback 2026-08-24, 21:53 Uhr
   ----------------------------------------------------------------------------
   Lebendigere Eyebrows nach Vorbild der Pitchpages (paket.css auf web.1.ki,
   Klassen .paket-eyebrows-pills/.eb-sky), Video-Bloecke fuer Loftfilm und
   Avatar-Chris, Zigzag-Logomarke, Valley-of-Tears-Diagramm. Bleibt App-Layer
   dieser einen Seite, das sections-Modul selbst ist unveraendert.
   ========================================================================= */

/* ---- Eyebrow-Pille statt schlichter Kicker-Zeile (Pitchpages-Vorbild) ----
   Nachtrag 2026-08-26: Vorbild paket.css (.eb-sky) haerelte Hintergrund und
   Rahmen als rohe rgba(68,168,222,...) fest -- unabhaengig vom aktiven
   Kontrastmodus. Funktional kein WCAG-Verstoss (Text bleibt ueber
   var(--text) tokenisiert, Kontrast blieb in allen drei Stufen ausreichend),
   aber ein Verstoss gegen die Token-Pflicht aus UI-Module_Standard Abschnitt
   1/6h -- genau die Regel, die sections.css und den uebrigen Modulen die
   automatische Anpassung an komfort/strikt ueberhaupt erst erlaubt, ohne
   dass a11y.css jede Komponente einzeln kennen muss. Mit color-mix() auf
   var(--sky) umgestellt (gleiches Muster wie 1ki-theme.css bei .note),
   damit die Pille in strikt (--sky wird dort auf die abgedunkelte,
   AAA-taugliche Fassung #12506F umgeschaltet) denselben Farbton wie der Rest
   der Seite zeigt statt weiterhin den urspruenglichen Marken-Sky. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .22em .85em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sky) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--sky) 50%, transparent);
}

/* ---- BackOnTrack-Treppe (Logo/Logos/BackOnTrack Treppe transparent.png,
   ausgeliefert über ui.1.ki/logos/, siehe Brand Styleguide) ------------- */
.bot-logomark {
  display: inline-flex;
  flex: none;
  align-items: center;
  height: 1.1em;
}
.bot-logomark img { height: 100%; width: auto; display: block; }

/* ---- Videoblöcke (Loftfilm + Avatar-Chris), Modul film liefert die Optik
   des Players selbst, hier nur der Rahmen ums figure herum. ---- */
.bot-video-block {
  max-width: var(--measure-wide);
}
.bot-video-block .film { margin: 0; }

/* ---- Avatar-Chris: Hochformat-Video (1080x1920) in der schmaleren
   Zweidrittel-Spalte, Breite begrenzen statt die Spalte zu sprengen -- */
.bot-avatar-video {
  max-width: 320px;
  margin-inline: auto;
}
.bot-avatar-video .film { margin: 0; }

/* ---- Valley of Tears: Positionierungs-Diagramm in Abschnitt 9 ---------- */
.bot-kurve {
  margin: var(--space-5) 0 0;
}
.bot-kurve picture {
  display: block;
  padding: var(--space-4);
  /* Bewusste Ausnahme von der Theme-Variablen-Pflicht (UI-Module_Standard,
     Regel 1): die eingebettete Rastergrafik hat einen weissen Hintergrund
     aus der Quelle, kein Theme-Wert kann das aendern. Reinweiss als Karte
     darum, damit das Diagramm nicht ohne Rahmen auf dunklem Grund schwebt. */
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
}
.bot-kurve img {
  display: block;
  width: 100%;
  height: auto;
}
.bot-kurve figcaption {
  margin-top: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* ============================================================================
   Nacharbeit Christian-Feedback 2026-08-24, Runde 3 (23:15 Uhr)
   ========================================================================= */

/* ---- Breite: "wir haben viel mehr Platz", gleiche Vorgabe wie bei den
   Pitchpages (P5-Nachfassung, web.1.ki/portal/assets/paket.css Zeile 827).
   Seitenlokal, weil andere sections-Nutzer die schmalere Standardbreite
   durchaus wollen koennen -- kein Eingriff in den Modul-Default. */
.page-wide .sec {
  max-width: min(1320px, 94vw);
}

/* ---- Embossed Background: Standard-Mechanik aus dem Theme (--theme-bg),
   jede Seite setzt nur ihren eigenen Bildpfad, siehe Vorbild
   web.1.ki/assets/hintergrund.css. Absolute URL Pflicht (loest sich am Ort
   der Verwendung auf, also auf ui.1.ki, nicht auf 1mpct.de). */
body { --theme-bg: url("https://1mpct.de/assets/bg-emblem.jpg"); }

/* ---- Bullet-Icon: Unicode-Haekchen ersetzt durch sauberes SVG, Farbe von
   Pulse/Magenta (Energie-Akzent, hier fehl am Platz) auf Sky umgestellt.
   Ueberschreibt seitenlokal sections.css .sec-symptome-liste li::before,
   Modul-Default bleibt unveraendert. */
.sec-symptome-liste li::before {
  content: "";
  width: 18px;
  height: 18px;
  background-color: var(--sky);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>') center / contain no-repeat;
}

/* ---- Treppe-Logo im Header, Zusatzbadge neben der 1.ki-Marke (siehe
   index.html Kopfleiste). Hoehe an das 45px hohe 1.ki-Logo angelehnt, das
   Treppe-Bild ist etwas breiter (2:1) als hoch. */
.bot-header-logo {
  height: 32px;
  width: auto;
  margin-left: var(--space-2);
  flex: none;
}
@media (max-width: 720px) {
  .bot-header-logo { height: 24px; }
}

/* ---- Rettungsbuch-Download: kleiner Ressourcen-Block, gleiche Optik wie
   der Formular-Platzhalter, vor dem Abschluss-CTA. */
.bot-download-karte {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--glass);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.bot-download-karte p { margin: 0; }
.bot-download-karte .bot-download-name { display: block; color: var(--text-strong); font-weight: var(--fw-semibold); }
.bot-download-karte .bot-download-hinweis { font-size: var(--fs-sm); color: var(--text-muted); }