/* Bridge Demo Portal — App-Oberfläche.
   Farben, Radien, Abstände und Typo-Stufen aus design/theme-export.json (Chalk & Mist).
   Aufbau nach den App-Screenshots in design/app-screens/ (Stand 24.09.2026) —
   diese schlagen die Hi-Fi-Entwürfe.
   ACHTUNG: Media Queries stehen am Ende der Datei — sonst gewinnt die Basisregel. */

@font-face { font-family: Inter; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/inter-400.woff2) format('woff2'); }
@font-face { font-family: Inter; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/inter-500.woff2) format('woff2'); }
@font-face { font-family: Inter; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/inter-600.woff2) format('woff2'); }
@font-face { font-family: Inter; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/inter-700.woff2) format('woff2'); }

:root {
  --paper: #FAF7F2; --paper-deep: #EFEAE0; --card: #F4F1EC; --card-soft: #D9EAE6;
  --ink: #1F2A37; --ink2: #4B5563; --ink3: #6B7280; --ink4: #9CA3AF;
  --line: #E3DED2; --line2: #D4CFC3;
  --sage: #3B7A6D; --sage-deep: #519486; --sage-soft: #B9D4CC;
  --clay: #D88F60; --clay-soft: #F8E2D2; --clay-ink: #7D4F2C;
  --primary: #3B7A6D; --on-primary: #ffffff;
  --danger: #D94F4F;
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px; --r-phone: 24px;
  --pad: 20px;
  --backdrop: #E2DCD0;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  background: var(--backdrop);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

/* ── Demo-Streifen ──────────────────────────────────────────── */
.demo-strip {
  background: var(--ink);
  color: #F3F1EC;
  font-size: 11.5px;
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: 0.1px;
  padding: 9px 16px;
  text-align: center;
}

/* ── Telefon-Rahmen ─────────────────────────────────────────── */
.stage {
  min-height: calc(100% - 40px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 16px 36px;
}

.shell {
  position: relative;
  width: 390px;
  height: 844px;
  border-radius: var(--r-phone);
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--line) inset, 0 18px 48px -18px rgba(31, 42, 55, 0.35);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.statusbar {
  flex: 0 0 auto;
  height: 44px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 24px 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.statusbar svg { display: block; }
.statusbar .icons { display: flex; align-items: center; gap: 6px; }

.screen { flex: 1 1 auto; position: relative; min-height: 0; display: flex; flex-direction: column; }
.screen[hidden] { display: none; }

.scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 var(--pad) 28px;
}

/* ── Kopfzeilen ─────────────────────────────────────────────── */
.appbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 10px var(--pad) 14px;
}
.appbar .who {
  width: 40px; height: 40px; border-radius: var(--r-pill);
  background: var(--primary); color: var(--on-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 600; letter-spacing: 0.2px;
}
.appbar .mark { margin-left: auto; width: 64px; height: auto; display: block; opacity: 0.85; }

/* Kopfzeile der Unterseiten: runder Zurück-Knopf + Titel */
.subbar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 14px;
  padding: 8px var(--pad) 12px;
}
.round-btn {
  width: 40px; height: 40px; flex: 0 0 auto;
  border: 0; border-radius: var(--r-pill);
  background: var(--line); color: var(--ink);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.round-btn:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }
.subbar h2 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.4px; }

/* ── Typo-Stufen ────────────────────────────────────────────── */
.kicker {
  font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--ink3); margin: 0;
}
.greet {
  font-size: 30px; font-weight: 800; letter-spacing: -0.6px; line-height: 1.18;
  margin: 0 0 8px;
}
.lead { font-size: 14px; line-height: 20px; color: var(--ink2); margin: 0 0 6px; }
.fine { font-size: 12px; line-height: 17px; color: var(--ink3); margin: 0; }
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin: 26px 0 10px;
}
.section-head h2 { font-size: 17px; font-weight: 700; letter-spacing: -0.3px; margin: 4px 0 0; }

/* ── Moment-Kacheln (Startbildschirm) ───────────────────────── */
/* #tiles ist seit Moments v4 (Entscheid 29.09.2026) nur noch die Klammer:
   darin liegen je Abschnitt eine Überschrift und ein Raster. */
.tiles { margin-top: 18px; }
.tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tiles > .section-head:first-child { margin-top: 4px; }
.tiles > .section-head + .tile-grid { margin-top: 0; }
.tile {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--card); overflow: hidden; text-align: left;
  padding: 0; font: inherit; color: inherit; cursor: pointer;
  display: flex; flex-direction: column;
}
.tile:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }
.art {
  height: 85px; display: flex; align-items: center; justify-content: center;
  background-repeat: no-repeat; background-position: center; background-size: cover;
}
.art svg { display: block; }
.tile-body { padding: 12px 14px 16px; flex: 1 1 auto; display: flex; align-items: flex-start; }
.tile-name {
  display: block; font-size: 15px; font-weight: 500;
  letter-spacing: -0.1px; line-height: 1.25; color: var(--ink);
}

/* ── Karte zur Unternehmensübersicht ────────────────────────── */
.roi-card {
  margin-top: 12px; padding: 16px;
  border-radius: var(--r-md); background: var(--sage-soft);
  border: 1px solid #C5D3C8;
}
.roi-card p { margin: 6px 0 12px; font-size: 13px; line-height: 19px; color: var(--ink2); }
.roi-card .kicker { color: var(--sage-deep); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 52px; padding: 0 22px; border: 0; border-radius: var(--r-md);
  background: var(--primary); color: var(--on-primary);
  font-family: var(--font); font-size: 15px; font-weight: 600; letter-spacing: -0.1px;
  text-decoration: none; cursor: pointer;
}
.btn.full { width: 100%; }
.btn[disabled] { opacity: 0.55; cursor: default; }

/* ── Tür: Marke oben, Anmeldeblatt unten (wie die App) ──────── */
.door { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.door-brand {
  flex: 1 1 auto; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 0 var(--pad) 24px;
}
.door-brand img { width: 196px; height: auto; display: block; }
.sheet {
  flex: 0 0 auto;
  background: var(--card);
  border-top-left-radius: 28px; border-top-right-radius: 28px;
  box-shadow: 0 -8px 24px -16px rgba(31, 42, 55, 0.3);
  padding: 10px 24px 26px;
  overflow-y: auto;
}
.sheet .handle {
  width: 48px; height: 4px; border-radius: var(--r-sm);
  background: var(--ink4); opacity: 0.5; margin: 0 auto 14px;
}
.sheet h1 {
  font-size: 28px; font-weight: 700; letter-spacing: -0.5px; line-height: 1.2;
  margin: 0 0 6px; text-align: center;
}
.sheet .lead { text-align: center; margin: 0 0 18px; }
.sheet form { display: flex; flex-direction: column; gap: 12px; }
.sheet input {
  display: block; width: 100%; height: 52px;
  padding: 0 16px; border: 1px solid var(--line2); border-radius: var(--r-md);
  background: var(--paper); color: var(--ink);
  font-family: var(--font); font-size: 15px; font-weight: 500; letter-spacing: -0.1px;
}
.sheet input::placeholder { color: var(--ink4); }
.sheet input:focus { outline: none; border-color: var(--sage); box-shadow: 0 0 0 3px var(--sage-soft); }
.sheet input[name="code"] { letter-spacing: 1.4px; text-transform: uppercase; }
.sheet .btn { margin-top: 4px; height: 56px; }
.msg { margin: 0; font-size: 13px; line-height: 19px; color: var(--ink2); min-height: 19px; text-align: center; }
.msg.err { color: var(--danger); }
.greeting { font-size: 26px; font-weight: 700; letter-spacing: -0.4px; margin: 18px 0; text-align: center; }
.sheet .fine { margin-top: 16px; text-align: center; }

/* ── Moment-Seite ───────────────────────────────────────────── */
.moment-card {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--card); overflow: hidden;
}
.moment-card .art { height: 180px; }
.moment-body { padding: 16px 18px 0; }
.tag {
  display: inline-flex; align-items: center; height: 26px; padding: 0 12px;
  border-radius: var(--r-pill); background: var(--sage-soft); color: var(--sage-deep);
  font-size: 12px; font-weight: 600; letter-spacing: 0.1px;
}
.moment-body h1 {
  font-size: 24px; font-weight: 700; letter-spacing: -0.4px; line-height: 1.2;
  margin: 12px 0 8px;
}
.moment-body p { font-size: 15px; line-height: 21px; color: var(--ink2); margin: 0 0 16px; }
.moment-foot {
  border-top: 1px solid var(--line); padding: 14px 18px;
  font-size: 11px; font-weight: 600; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--ink2);
}

.session-row {
  display: flex; align-items: center; gap: 14px;
  width: 100%; margin-top: 14px; padding: 12px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--card); text-align: left; font: inherit; color: inherit; cursor: pointer;
}
.session-row:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }
.session-row .art {
  width: 56px; height: 56px; flex: 0 0 auto; border-radius: var(--r-sm); overflow: hidden;
}
.session-row .body { flex: 1 1 auto; min-width: 0; }
.session-row .meta { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.session-row .pill {
  display: inline-flex; align-items: center; height: 22px; padding: 0 10px;
  border-radius: var(--r-pill); background: var(--sage-soft); color: var(--sage-deep);
  font-size: 11px; font-weight: 600;
}
.session-row .pill.setting {
  background: var(--paper-deep, #EFEAE0); color: var(--ink2);
}
.session-row .mins { margin-left: auto; font-size: 13px; color: var(--ink3); }
.session-row .name { font-size: 16px; font-weight: 700; letter-spacing: -0.2px; line-height: 1.25; }

/* ── Spieler ────────────────────────────────────────────────── */
.player { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 0 var(--pad) 22px; }
.player-top { display: flex; align-items: center; justify-content: space-between; padding: 8px 0 0; }
.player-top .spacer { width: 40px; height: 40px; }

.ready {
  align-self: center; display: inline-flex; align-items: center; gap: 12px;
  padding: 9px 18px; border-radius: var(--r-pill);
  background: transparent; border: 1px solid var(--line2);
  font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--clay); margin-top: 14px;
}
.ready .sep { width: 1px; height: 16px; background: var(--line2); }
.ready svg { color: var(--ink2); display: block; }
.ready .prep { display: inline-flex; align-items: center; gap: 12px; }


/* Aufteilung wie in der App (14_player.jpg nachgemessen, Entscheid 29.09.2026):
   Das Bild behält sein Quadrat, der überschüssige Platz liegt UNTER dem Text.
   Vorher nahm der Bildbereich den Rest der Höhe und drückte das Bild auf dem
   Telefon zu einem Rechteck, sobald der Untertitel zwei Zeilen brauchte. */
.artwork-wrap {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  padding: 22px 0 18px;
}
.artwork {
  /* Wie in der App: Quadrat, 280 von 402 Punkten breit — schmaler als der
     Fortschrittsbalken. max-height ist nur die Notbremse für sehr flache
     Fenster; background-size: cover schneidet, verzerrt nie. */
  flex: 0 0 auto;
  width: 77%; height: auto; max-height: 46vh;
  aspect-ratio: 1;
  border-radius: var(--r-lg);
  background: var(--sage-soft) center / cover no-repeat;
  display: flex; align-items: center; justify-content: center;
}
.artwork svg { width: 34%; height: auto; opacity: 0.6; }

.player-head { flex: 0 0 auto; text-align: center; }
/* Der Leerraum ist ein eigenes Element: er sammelt die überschüssige Höhe
   zwischen «Stimme: Elias» und dem Fortschrittsbalken wie in der App und darf
   auf null schrumpfen, wenn der Platz knapp wird. Vorher schrumpfte stattdessen
   der Textblock und lief über den Fortschrittsbalken. */
.player-gap { flex: 1 1 auto; min-height: 0; }
.player-title { font-size: 26px; font-weight: 700; letter-spacing: -0.5px; line-height: 1.2; margin: 0 0 6px; }
.player-sub { font-size: 14px; line-height: 20px; color: var(--ink3); margin: 0; }
.player-voice { font-size: 14px; color: var(--ink3); margin: 14px 0 0; }

.progress { flex: 0 0 auto; margin-top: 26px; }
.track { height: 4px; border-radius: 2px; background: var(--line); position: relative; cursor: pointer; }
.track i { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--primary); }
.track .knob {
  position: absolute; top: 50%; left: 0; width: 13px; height: 13px; border-radius: var(--r-pill);
  background: var(--primary); transform: translate(-50%, -50%);
}
.times {
  display: flex; justify-content: space-between; margin-top: 12px;
  font-size: 13px; color: var(--ink3); font-variant-numeric: tabular-nums;
}

.transport { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 26px; margin-top: 16px; }
.round {
  border: 0; border-radius: var(--r-pill); background: var(--card);
  color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center;
  width: 54px; height: 54px;
}
.round:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }
.round.main { width: 68px; height: 68px; background: var(--primary); color: var(--on-primary); }

/* ── ROI-Seite (kein App-Bildschirm, Unternehmensansicht) ───── */
.doc {
  max-width: 720px; margin: 0 auto; padding: 32px 22px 56px;
  background: var(--paper); min-height: calc(100% - 40px);
}
.doc .brand { display: flex; align-items: center; gap: 10px; }
.doc .brand img { width: 86px; height: auto; }
.doc .back { display: inline-block; margin: 20px 0 22px; font-size: 13px; font-weight: 600; color: var(--sage); text-decoration: none; }
.doc .back:hover { text-decoration: underline; }
.doc h1 { font-size: 30px; font-weight: 800; letter-spacing: -0.6px; line-height: 1.15; margin: 0 0 10px; }
.doc h2 { font-size: 18px; font-weight: 700; letter-spacing: -0.3px; margin: 30px 0 8px; }
.doc .lead { font-size: 15px; line-height: 23px; color: var(--ink2); }
.doc .muted { font-size: 12.5px; line-height: 19px; color: var(--ink3); }
.metrics { display: flex; flex-direction: column; gap: 12px; margin: 20px 0 14px; }
.metric { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); }
.metric .k { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: -0.1px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.metric .k .tag {
  height: 22px; padding: 0 9px; background: var(--card-soft); color: var(--ink2);
  border: 1px solid var(--line); font-size: 10px; font-weight: 600; letter-spacing: 0.3px;
}
.metric .v { margin: 8px 0 6px; font-size: 24px; font-weight: 800; letter-spacing: -0.5px; color: var(--sage); }
.metric .how { margin: 0; font-size: 12.5px; line-height: 19px; color: var(--ink2); }
.pilot-list { margin: 8px 0 12px; padding-left: 20px; font-size: 14px; line-height: 21px; color: var(--ink2); }
.pilot-list li { margin-bottom: 5px; }
.pilot-list strong { color: var(--ink); font-weight: 600; }
.closing { font-size: 17px; font-weight: 600; letter-spacing: -0.2px; line-height: 25px; margin: 26px 0; }
.offer { padding: 20px; border-radius: var(--r-md); background: var(--sage-soft); border: 1px solid #C5D3C8; }
.offer p { font-size: 14px; line-height: 21px; color: var(--ink2); margin: 0 0 14px; }
.doc details { margin-top: 26px; }
.doc summary { font-size: 13px; font-weight: 600; color: var(--ink2); cursor: pointer; }
.doc details ul { margin: 10px 0 0; padding-left: 20px; font-size: 12.5px; line-height: 19px; color: var(--ink3); }
.doc details a { color: var(--sage); }
.doc footer { margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink4); }

/* Erklärzeile unter dem Pilot-Abschnittstitel (Entscheid 29.09.2026:
   der Titel wird persönlich, die bisherige Überschrift rutscht darunter). */
.pilot-lead { margin: -6px 0 10px; font-size: 15px; font-weight: 600; color: var(--ink2); }

/* ── Telefon auf kleinen Schirmen: Vollbild ─────────────────── */

@media (max-width: 460px) {
  .appbar { padding-top: 14px; }
  .artwork-wrap { padding: 14px 0 12px; }
  .door-brand img { width: 176px; }

  /* Im Telefonbrowser stehen rund 180 px weniger zur Verfügung als auf dem
     App-Bildschirm (Adresszeile, Systemleisten) plus der Demo-Streifen.
     Ohne diese Deckelung liegt der Abspielknopf unter der Falte.
     min() statt max-height: mit aspect-ratio würde max-height das Bild wieder
     zum Rechteck ziehen — die Breite muss die kleinere der beiden Grenzen sein.
     (Entscheid 29.09.2026, nachgemessen auf iPhone 13 und iPhone SE.) */
  .artwork { width: min(77%, 30vh); max-height: none; }
  .progress { margin-top: 14px; }
  .player-voice { margin-top: 8px; }
  body { display: flex; flex-direction: column; height: 100dvh; }
  .demo-strip { flex: 0 0 auto; }
  .stage { flex: 1 1 auto; min-height: 0; padding: 0; display: block; }
  .shell {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  body:has(.doc) { display: block; height: auto; }
  .statusbar { display: none; }
  .doc { padding: 24px 18px 48px; }
  .doc h1 { font-size: 25px; }
  .metric .v { font-size: 21px; }
}

@media (max-height: 940px) and (min-width: 461px) {
  .stage { padding: 14px 16px 20px; }
  .shell { height: min(844px, calc(100vh - 92px)); }
}