/* 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, .doc h2.h-chapter { 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, .doc h2.h-chapter { 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)); }
}

/* Problem-Awareness oben auf der Unternehmensübersicht (Entscheid 01.10.2026).
   Bewusst ohne !important: Klassenselektoren statt #id, damit die Faktenkarten
   die Fliesstext-Regel überschreiben können, ohne Gewalt anzuwenden. */
.aw { margin-bottom: 30px; }
.aw > p, .aw-blocks > p { font-size: 14px; line-height: 22px; color: var(--ink2); margin: 0 0 12px; }
.doc .aw-h { font-size: 16px; font-weight: 700; letter-spacing: -0.2px; margin: 24px 0 7px; }
.aw .facts-intro { margin-top: 22px; font-weight: 600; color: var(--ink); }
.facts { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 14px; }
.fact { padding: 13px 16px; background: var(--card); border-left: 3px solid var(--sage); border-radius: 0 var(--r-md) var(--r-md) 0; }
.fact .fv { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.5px; color: var(--sage); line-height: 1.2; }
.fact .ft { margin: 5px 0 6px; font-size: 13px; line-height: 19px; color: var(--ink); }
.fact .fq { margin: 0; font-size: 11.5px; line-height: 17px; }
.fact .fq a { color: var(--ink4); text-decoration: none; }
.fact .fq a:hover { color: var(--ink3); text-decoration: underline; }
.aw .aw-close { font-size: 15px; font-weight: 600; line-height: 23px; color: var(--ink); margin-top: 18px; }
.aw-blocks > .aw-q { font-size: 11.5px; line-height: 17px; margin: -4px 0 12px; }
.aw-blocks > .aw-q a { color: var(--ink4); text-decoration: none; }
.aw-blocks > .aw-q a:hover { color: var(--ink3); text-decoration: underline; }

/* Session-Zeile: Vorschaubild der Session plus Kurztext (Shobhit 01.10.2026).
   In der App trägt die Zeile das Foto, darunter zwei Zeilen Beschreibung. */
.session-row { align-items: flex-start; }
.session-row .art { width: 62px; height: 62px; }
.session-row .text {
  display: block; margin-top: 4px; font-size: 13px; line-height: 19px; color: var(--ink3);
}

/* Die Unternehmensuebersicht hat drei gleichrangige Teile: das Problem, die Kosten,
   das Angebot. Sie tragen darum dieselbe Titelgroesse wie die Seitenueberschrift
   (Entscheid 01.10.2026). «Unser Pilot-Angebot» bleibt klein — das ist ein
   Kastentitel, kein Kapitel. */
.doc h2.h-chapter { margin: 40px 0 10px; }

/* ── Oeffentliche Seite: Behauptung, Wiedererkennung, Bestellformular ─────────
   Entscheid 02.10.2026. Die Seite nutzt dasselbe .doc-Layout wie die
   Unternehmensuebersicht, weil sie dieselbe Aufgabe hat: gelesen werden, auf
   dem Telefon wie am Schirm. Kein Telefon-Rahmen — das hier ist eine Webseite
   fuer jemanden, der von aussen kommt, keine Vorfuehrung der App. */

.doc .claim-sub {
  font-size: 18px; line-height: 27px; font-weight: 600;
  color: var(--ink); margin: 0 0 4px;
}

.recog { margin: 26px 0 4px; }
.recog p {
  font-size: 15px; line-height: 24px; color: var(--ink2); margin: 0 0 16px;
}
/* Der Wendesatz traegt die Seite: er benennt, was in allen drei Lagen fehlt.
   Darum abgesetzt und etwas schwerer, aber ohne Farbe — er soll gelesen,
   nicht angepriesen werden. */
.recog .turn {
  font-size: 16px; line-height: 25px; font-weight: 600; color: var(--ink);
  margin: 22px 0 0; padding-left: 14px; border-left: 2px solid var(--sage-soft);
}

.offer form { display: flex; flex-direction: column; gap: 0; }
.offer .fld {
  display: block; margin: 14px 0 6px;
  font-size: 13px; font-weight: 700; letter-spacing: -0.1px; color: var(--ink);
}
.offer input[type="text"], .offer input[type="email"] {
  display: block; width: 100%; height: 52px; box-sizing: border-box;
  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;
}
.offer input::placeholder { color: var(--ink4); }
.offer input[type="text"]:focus, .offer input[type="email"]:focus {
  outline: none; border-color: var(--sage); box-shadow: 0 0 0 3px var(--sage-soft);
}
.offer .fine { margin: 6px 0 0; }

.choices { border: 0; padding: 0; margin: 22px 0 0; }
.choices legend {
  padding: 0; margin: 0 0 2px;
  font-size: 15px; font-weight: 700; letter-spacing: -0.2px; color: var(--ink);
}
.choices .fine { margin: 4px 0 10px; }
.choices .extra { margin-top: 12px; }

/* Die Aussage steht gross, der Moment-Titel klein darunter: gewaehlt wird die
   Lage, die man wiedererkennt — der Produktbegriff baut nur die Bruecke zu den
   Kacheln, die danach in der Demo stehen. */
.choice {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; margin-bottom: 8px;
  border: 1px solid var(--line2); border-radius: var(--r-md);
  background: var(--paper); cursor: pointer;
}
.choice:has(input:checked) { border-color: var(--sage); box-shadow: 0 0 0 2px var(--sage-soft); }
.choice:has(input:focus-visible) { outline: 2px solid var(--sage); outline-offset: 2px; }
.choice input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--sage); flex: none; }
.choice span { display: block; }
.choice em {
  display: block; font-style: normal;
  font-size: 14.5px; line-height: 21px; font-weight: 500; color: var(--ink);
}
.choice small {
  display: block; margin-top: 4px;
  font-size: 12px; line-height: 17px; font-weight: 600; color: var(--ink3);
}
/* Nach zwei Wahlen wird die dritte gesperrt statt hinterher bemaengelt. */
.choice.aus { opacity: 0.45; cursor: default; }
.choice.slim { padding: 12px 16px; }

.offer .btn { margin-top: 22px; }
.offer .msg { margin-top: 10px; }
.offer #privacy { margin-top: 14px; }
.offer #danke .closing { margin: 0 0 10px; }
.offer #danke p { font-size: 14px; line-height: 21px; color: var(--ink2); }

@media (max-width: 460px) {
  .doc .claim-sub { font-size: 16px; line-height: 25px; }
  .recog p { font-size: 14.5px; line-height: 23px; }
  .choice { padding: 12px 14px; }
}