/* ============================================================
   Hearth Design System — Page compositions
   Landing, auth, and dashboard layouts. Components come from
   components.css; only page-level arrangement lives here.
   ============================================================ */

/* ---------- Shared shell ---------- */

.page--site {
  padding-top: var(--space-7);
}

.page--app {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-7) var(--space-10) 96px;
}

.navbar--sticky {
  position: sticky;
  top: var(--space-4);
  z-index: 40;
  box-shadow: var(--shadow-raised);
}

a.navbar__brand {
  color: inherit;
}

.masthead__link {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-ink-muted);
}

.masthead__link:hover {
  color: var(--color-ink);
}

/* ---------- Landing · hero ---------- */

.hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
  padding: var(--space-16) 0 var(--space-2);
}

.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}

.hero__lede {
  margin: 0;
  font-size: 18px;
  line-height: var(--leading-normal);
  color: var(--color-ink-muted);
  max-width: 480px;
}

.hero__visual {
  position: relative;
}

.hero-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-floating);
}

.hero-card__top {
  padding-bottom: var(--space-3);
}

.hero-card__amount {
  font-family: var(--font-mono);
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 6px 0 10px;
}

.hero-card .asset-row {
  cursor: default;
}

.hero-chip {
  position: absolute;
  right: -14px;
  bottom: -18px;
}

/* ---------- Landing · stats ---------- */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  padding-top: var(--space-12);
}

.stat {
  border-top: 1px solid var(--color-border-strong);
  padding-top: var(--space-4);
}

.stat__value {
  font-family: var(--font-mono);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.stat__label {
  margin-top: var(--space-1);
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-ink-muted);
}

/* ---------- Landing · how it works ---------- */

.how-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.how-stepper {
  max-width: 560px;
  margin: 0;
  padding: 0;
}

.how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.how-step p {
  margin: var(--space-2) 0 0;
  font-size: 14px;
  line-height: var(--leading-normal);
  color: var(--color-ink-muted);
}

/* ---------- Landing · CTA band ---------- */

.cta-band {
  margin-top: 88px;
  background: var(--color-ink);
  color: #fff;
  border-radius: var(--radius-xl);
  padding: var(--space-12);
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.cta-band .section-title {
  color: #fff;
}

.cta-band p {
  margin: var(--space-2) 0 0;
  color: var(--color-ink-on-dark);
  max-width: 460px;
}

/* Text link inside the ink band stays readable, and visible on hover */
.cta-band p a {
  color: var(--color-sky-light);
  text-decoration: underline;
}

.cta-band p a:hover {
  color: #fff;
}

.cta-band__actions {
  margin-left: auto;
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* ---------- Landing · footer ---------- */

.footer-grid {
  margin-top: 88px;
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-10);
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--space-8);
}

.footer-brand p {
  margin: var(--space-3) 0 0;
  font-size: 14px;
  line-height: var(--leading-normal);
  color: var(--color-ink-muted);
  max-width: 260px;
}

.footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.footer-col__title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-bottom: var(--space-1);
}

.footer-col a {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-ink-muted);
}

.footer-col a:hover {
  color: var(--color-ink);
}

.site-footer--tight {
  margin-top: var(--space-10);
}

/* ---------- Auth ---------- */

.auth-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  padding: var(--space-10) var(--space-6);
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-ink);
}

.auth-brand:hover {
  color: var(--color-ink);
}

.auth-card {
  width: 440px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  box-shadow: var(--shadow-raised);
}

.auth-sub {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--color-ink-muted);
}

.auth-alt {
  margin: var(--space-1) 0 0;
  text-align: center;
  font-size: 14px;
  color: var(--color-ink-muted);
}

.auth-foot {
  margin: 0;
  font-size: 13px;
  color: var(--color-ink-subtle);
  text-align: center;
}

/* ---------- Dashboard ---------- */

.dash-head {
  display: flex;
  align-items: flex-end;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin: var(--space-10) 0 var(--space-6);
}

.dash-head h1 {
  margin-top: 2px;
}

.balance-card {
  background: var(--color-ink);
  color: #fff;
  border-radius: var(--radius-xl);
  padding: var(--space-10);
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.balance-card__amount {
  font-family: var(--font-mono);
  font-size: 44px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-top: 10px;
}

.balance-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-3);
}

.balance-card__note {
  font-size: 13px;
  color: var(--color-ink-on-dark);
}

.balance-card__actions {
  margin-left: auto;
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.dash-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--space-6);
  align-items: start;
  margin-top: var(--space-6);
}

.panel-foot {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-5);
}

.aside-note {
  margin: -6px 0 var(--space-4);
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-ink-muted);
}

.address {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 10px var(--space-3);
  overflow-wrap: anywhere;
  margin-bottom: var(--space-4);
}

a.avatar:hover {
  color: #fff;
}

/* ---------- One-pager · A4 sheet (cohovi-onepager.html) ----------
   A fixed 210 × 297 mm sheet, previewed on screen and printed 1:1, in
   the normal Hearth palette (ink, warm hairlines, accents). Type sizes
   are print sizes, a step below the web scale. Nothing in here uses the
   responsive grid classes on purpose: the sheet must not reflow at
   print width. */

.sheet-stage {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: var(--space-10) var(--space-4);
  background: var(--color-surface-sunken);
}

.sheet {
  width: var(--sheet-width);
  height: var(--sheet-height);
  flex: none;
  display: flex;
  flex-direction: column;
  padding: var(--sheet-pad);
  background: var(--color-paper);
  color: var(--color-ink);
  box-shadow: var(--shadow-floating);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* Blocks never squash to fit — if the copy grows (or a reader enlarges
   text) it visibly spills onto the stage on screen; only print clips. */
.sheet > * {
  flex-shrink: 0;
}

.sheet .overline {
  margin: 0;
}

/* Header — wordmark + claim left, outline badge right */
.sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
}

.sheet-brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Wordmark is an image (TAN Pearl is not a webfont); ~85 mm wide */
.sheet-logo {
  width: 320px;
  height: auto;
}

.sheet-claim {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.sheet-head .badge {
  margin-top: var(--space-2);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Hero — the question headline; 36px so it holds two lines on A4 */
.sheet-title {
  margin: var(--space-3) 0 0;
  font-size: 36px;
  font-weight: var(--type-h1-weight);
  letter-spacing: var(--type-h1-tracking);
  line-height: var(--leading-tight);
}

.sheet-lede {
  margin: var(--space-3) 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-ink-muted);
}

/* The proof line answers the question — full ink, bold key phrases */
.sheet-proof {
  margin: var(--space-2) 0 0;
  font-size: 14px;
  line-height: 1.55;
}

.sheet-rule {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-5) 0;
}

/* Sections — labelled with the system kicker */
.sheet-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.sheet-section + .sheet-section {
  margin-top: var(--space-6);
}

.sheet .kicker {
  margin: 0;
}

/* Cards on the sheet: tighter than web cards */
.sheet .card {
  padding: var(--space-4);
}

.sheet .card__body {
  font-size: 12px;
  line-height: 1.5;
  text-wrap: pretty; /* no one-word last lines on paper */
}

.sheet-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.sheet .card__title {
  margin: var(--space-2) 0 var(--space-1);
  letter-spacing: -0.01em;
}

/* What we take over — list left, pilot box right */
.sheet-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: var(--space-6);
  align-items: stretch;
}

.sheet .dotlist__item {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}

.sheet-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-ink-muted);
}

.sheet-pilot {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* The key figure stays white — .card--ink p would dim it otherwise */
.card--ink .sheet-pilot__figure {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: inherit;
}

.sheet-pilot .badge {
  margin-top: auto;
  align-self: flex-start;
}

/* What we evaluate — full-width outline box */
.sheet-eval {
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.sheet .sheet-eval {
  padding: var(--space-3) var(--space-5);
}

.sheet-eval__title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
}

.sheet-metrics {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: var(--color-ink-muted);
}

.sheet-metrics li + li {
  margin-left: var(--space-3);
  padding-left: var(--space-3);
  border-left: 1px solid var(--color-border-muted);
}

/* Contact — anchored to the foot of the sheet, violet accent left.
   The accent is an inset pill bar so the card radius never clips it. */
.sheet-contact {
  margin-top: auto;
  display: flex;
  align-items: stretch;
}

.sheet .sheet-contact {
  padding: 0;
}

.sheet-contact__accent {
  width: var(--space-1);
  flex: none;
  margin: var(--space-4) 0 var(--space-4) var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--color-iris);
}

.sheet-contact__body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  padding: var(--space-4) var(--space-6) var(--space-4) var(--space-5);
}

.sheet-contact__title {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.sheet-contact__sub {
  margin: var(--space-1) 0 0;
  font-size: 12px;
  color: var(--color-ink-muted);
}

.sheet-address {
  font-style: normal;
  font-size: 12px;
  line-height: 1.45;
  text-align: right;
  white-space: nowrap;
}

.sheet-address strong {
  font-weight: 800;
}

/* Contact links print like text but stay clickable in the PDF */
.sheet-address a {
  color: inherit;
}

.sheet-address__label {
  color: var(--color-ink-muted);
}

@media print {
  .sheet-stage {
    min-height: 0;
    height: var(--sheet-height);
    padding: 0;
    background: none;
    display: block;
    overflow: hidden;
  }
  .sheet {
    box-shadow: none;
    overflow: hidden;
  }
}

/* ---------- COHOVI · site compositions ----------
   index.html (landing), kontakt.html (form), impressum / datenschutz.
   Everything below arranges existing components; colours, spacing and
   radii come from tokens. */

/* The wordmark is an image (TAN Pearl is not a webfont). Sized by
   height so it sits on the navbar's text line. */
.brand-mark {
  display: block;
  height: var(--space-6);
  width: auto;
}

.brand-mark--lg {
  height: var(--space-8);
}

/* The cube symbol (SVG) sits left of the wordmark, a touch taller */
.brand-symbol {
  display: block;
  height: var(--space-7);
  width: auto;
}

.brand-symbol--lg {
  height: var(--space-10);
}

/* Landing hero: wider copy column so the question headline holds
   its long compound on one line at the hero size. */
.hero--lead {
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--space-12);
  padding-bottom: 0;
}

.hero__title {
  margin: 0;
  font-size: var(--type-hero-size);
  font-weight: var(--type-display-weight);
  letter-spacing: var(--type-display-tracking);
  line-height: var(--leading-tight);
  text-wrap: balance;
}

/* Proof line under the CTA — answers the question in one breath */
.hero__proof {
  margin: 0;
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--color-meadow);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--color-surface);
  font-size: 15px;
  line-height: var(--leading-normal);
  color: var(--color-ink-muted);
  max-width: 560px;
}

.hero__proof strong {
  color: var(--color-ink);
}

/* Two-column section: list left, offer card right */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--space-6);
  align-items: stretch;
}

.split__lead {
  margin: 0 0 var(--space-6);
  font-size: 15px;
  line-height: var(--leading-normal);
  color: var(--color-ink-muted);
  max-width: 560px;
}

.split .dotlist {
  gap: var(--space-3);
}

.split .dotlist__item {
  font-size: 15px;
  font-weight: 500;
}

.split__note {
  margin-top: var(--space-6);
}

/* The pilot offer — headline figure on an ink card. The second
   selector outranks `.card--ink p`, which would dim it otherwise. */
.offer__figure,
.card--ink .offer__figure {
  margin: var(--space-2) 0 var(--space-3);
  font-size: var(--type-h1-size);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: inherit;
}

/* Struck-through "what you'd pay otherwise" figure on a light card */
.offer__figure--struck {
  color: var(--color-ink-muted);
}

.offer__figure--struck s {
  text-decoration-thickness: 0.08em;
  text-decoration-color: var(--color-rose);
}

/* Stepper on an ink card: the current label would be ink on ink */
.card--ink .stepper__step--current .stepper__label {
  color: var(--color-surface);
}

/* How-it-works with four steps: the stepper uses the SAME grid as the
   text columns below, so each dot sits exactly above its heading. The
   connector line runs on into the column gap up to the next dot. */
.how-stepper--4 {
  max-width: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

.how-stepper--4 .stepper__step {
  min-width: 0;
}

.how-stepper--4 .stepper__line {
  margin-right: calc(-1 * var(--space-6));
}

.how-stepper--4 .stepper__step--last .stepper__line {
  margin-right: 0;
}

.how-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Evaluation strip under the steps */
.metrics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* About: portrait left, copy right */
.about {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: var(--space-12);
  align-items: center;
}

.about__copy p {
  margin: 0 0 var(--space-4);
  font-size: var(--type-body-size);
  line-height: var(--leading-normal);
  color: var(--color-ink-muted);
}

.about__copy p:last-of-type {
  margin-bottom: 0;
}

/* Contact page: form left, what-happens-next right */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--space-6);
  align-items: start;
}

/* Submit above its consent note, button never squeezed into 3 lines */
.form-actions--stack {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding-top: var(--space-5);
}

.form-actions--stack .btn {
  white-space: nowrap;
}

.form-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-ink-muted);
  max-width: 480px;
}

/* Legal prose in cards: no UA margins, spacing via .stack + gap-* */
.card--prose p,
.card--prose ul {
  margin: 0;
}

/* Small-print line in the footer (Hormozi-style honesty note) */
.footnote {
  margin: var(--space-4) 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-ink-muted);
  max-width: 720px;
}

/* ---------- Responsive ---------- */

@media (max-width: 1000px) {
  .dash-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    gap: var(--space-10);
    padding-top: var(--space-12);
  }
  .hero__visual {
    max-width: var(--portrait-max);
  }
  .hero-chip {
    right: var(--space-2);
  }
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .how-grid {
    grid-template-columns: 1fr;
  }
  .how-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .how-stepper--4 {
    display: flex;
    max-width: 560px;
  }
  .how-stepper--4 .stepper__line {
    margin-right: var(--space-2);
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .split,
  .about,
  .contact-grid {
    grid-template-columns: 1fr;
  }
  /* Five links + CTA need ~780px in one row: wrap the bar earlier than
     the system's 700px, and keep wrapped rows tight */
  .navbar {
    flex-wrap: wrap;
    row-gap: var(--space-2);
    border-radius: var(--radius-lg);
  }
  .navbar__links {
    order: 3;
    width: 100%;
    margin-left: 0;
    flex-wrap: wrap;
    row-gap: var(--space-2);
  }
  .about {
    gap: var(--space-8);
  }
  .about__visual {
    max-width: var(--portrait-max);
  }
}

@media (max-width: 700px) {
  .page--app {
    padding: var(--space-5) var(--space-4) 80px;
  }
  .balance-card {
    padding: var(--space-6);
  }
  .balance-card__amount {
    font-size: 34px;
  }
  .balance-card__actions,
  .cta-band__actions {
    margin-left: 0;
  }
  .cta-band {
    padding: var(--space-8);
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .hero__title {
    font-size: var(--type-h1-size);
  }
  .how-grid--4 {
    grid-template-columns: 1fr;
  }
  /* A wrapped sticky bar would cover a fifth of a phone screen */
  .navbar--sticky {
    position: static;
    box-shadow: var(--shadow-flat);
  }
  /* Brand + CTA share the first row on a phone: tighter gap, smaller mark */
  .navbar {
    gap: var(--space-4);
  }
  .brand-symbol {
    height: var(--space-6);
  }
  .brand-mark {
    height: var(--space-5);
  }
  /* Four step labels don't fit 375px; the h3s right below repeat them */
  .how-stepper--4 .stepper__marker {
    position: relative;
  }
  .how-stepper--4 .stepper__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* ------------------------------------------------------------
   Hero-Titelbild: Wiener Straßenzug. Links (hinter dem Text)
   bleibt der Papierton dominant, nach rechts scheint das Foto
   deutlich durch; unten läuft es weich in die Seite aus.
   ------------------------------------------------------------ */

.hero--photo {
  background:
    linear-gradient(
      100deg,
      color-mix(in srgb, var(--color-paper) 97%, transparent) 0%,
      color-mix(in srgb, var(--color-paper) 92%, transparent) 42%,
      color-mix(in srgb, var(--color-paper) 55%, transparent) 75%,
      color-mix(in srgb, var(--color-paper) 35%, transparent) 100%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-paper) 35%, transparent) 0%,
      color-mix(in srgb, var(--color-paper) 15%, transparent) 55%,
      color-mix(in srgb, var(--color-paper) 75%, transparent) 100%
    ),
    url("../images/hero-wien-1920.jpg") center 65% / cover no-repeat;
}

/* Am Handy steht der Text über der vollen Breite – dort braucht es
   eine gleichmäßig ruhigere Aufhellung und das kleinere Bild. */
@media (max-width: 700px) {
  .hero--photo {
    background:
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--color-paper) 93%, transparent) 0%,
        color-mix(in srgb, var(--color-paper) 84%, transparent) 55%,
        color-mix(in srgb, var(--color-paper) 96%, transparent) 100%
      ),
      url("../images/hero-wien-900.jpg") center 65% / cover no-repeat;
  }
}

/* ------------------------------------------------------------
   Navbar-Rahmen + unterstrichene Menüpunkte (Tims Wunsch 30.08.2026).
   Zum Zurücksetzen: diesen Block löschen und ?v= hochzählen.
   ------------------------------------------------------------ */

.navbar {
  border: 2px solid var(--color-ink);
}

.navbar__link {
  text-decoration: underline;
  text-underline-offset: var(--space-1);
  text-decoration-thickness: 1.5px;
}

/* ------------------------------------------------------------
   Flow-Illustration "Von der Anfrage zum Termin" (aus dem
   One-Pager uebernommen, 31.08.2026): Kanal-Pills -> COHOVI ->
   Wochenkalender.
   ------------------------------------------------------------ */

.flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.flow .kicker {
  align-self: flex-start;
}

.flow__channels {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.flow__pill {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 176px;
  height: 76px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.flow__pill img {
  width: auto;
  max-width: 68%;
  max-height: 44px;
}

.flow__caption {
  margin: 0;
  font-size: 14px;
  color: var(--color-ink-muted);
}

.flow__arrow {
  color: var(--color-ink-subtle);
  font-size: 22px;
  line-height: 1;
}

.flow__cohovi {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: var(--space-4) var(--space-7);
  box-shadow: var(--shadow-raised);
}

.flow__cohovi .brand-symbol { height: 30px; width: auto; }
.flow__cohovi .brand-mark { height: 24px; width: auto; }

.flow__sep {
  width: 1px;
  height: 24px;
  background: var(--color-border-strong);
}

.flow__what {
  font-size: 14px;
  color: var(--color-ink-muted);
}

.flow__cal {
  width: 100%;
  max-width: 920px;
}

.flow__cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-hairline);
  margin-bottom: var(--space-4);
}

.flow__cal-label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink);
}

.flow__cal-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-3);
}

.flow__day {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.flow__day-name {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-1);
}

.flow__chip {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-sky-text);
  background: var(--color-sky-light);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 700px) {
  .flow__cal-grid { grid-template-columns: repeat(3, 1fr); }
  .flow__pill { width: 150px; height: 64px; }
  /* Am Handy nur die Uhrzeit zeigen, sonst wird der Text abgeschnitten */
  .flow__chip-word { display: none; }
  .flow__chip { text-align: center; }
}

/* ------------------------------------------------------------
   Hero-Demo-Video (ersetzt seit 01.09.2026 die Live-Animation).
   ------------------------------------------------------------ */

.hero-video {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 620px;
  margin-inline: auto;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-floating);
  background: var(--color-surface);
}

/* ------------------------------------------------------------
   Startseite im acquisition.com-Stil (06.09.2026):
   schwarze Leiste ueber die volle Breite, Hero mit zentrierter
   Frage + grossem Button und Foto rechts, Video darunter.
   ------------------------------------------------------------ */

/* Die Leiste liegt im Markup ausserhalb von .page und ist deshalb
   von selbst so breit wie das Fenster; .navbar__inner richtet den
   Inhalt an der Seitenbreite aus. */
.navbar--dark {
  display: block;
  top: 0;
  border: 0;
  border-radius: 0;
  background: var(--color-ink);
  padding: var(--space-3) var(--space-10);
  box-shadow: none;
}

.navbar--dark .navbar__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  max-width: calc(var(--container) - 2 * var(--space-10));
  margin: 0 auto;
}

.navbar--dark .navbar__link {
  color: var(--color-surface);
  text-decoration-color: var(--color-ink-on-dark);
}

.navbar--dark .navbar__link:hover {
  color: var(--color-surface);
  text-decoration-color: var(--color-surface);
}

.navbar--dark .navbar__link[aria-current="page"] {
  color: var(--color-surface);
  text-decoration-thickness: 2.5px;
  text-decoration-color: var(--color-surface);
}

/* Hero: Frage zentriert, Foto rechts unten buendig */
.hero--center {
  grid-template-columns: minmax(0, 1fr) var(--portrait-max);
  gap: var(--space-10);
  align-items: end;
  padding: var(--space-8) 0 0;
}

.hero--center .hero__copy {
  align-self: center;
  align-items: center;
  text-align: center;
  gap: var(--space-6);
  padding: var(--space-10) 0 var(--space-12);
}

.hero--center .hero__title {
  font-size: var(--type-display-size);
}

.hero--center .hero__lede {
  max-width: 34em;
}

.hero__cta {
  font-size: var(--type-h3-size);
  padding: var(--space-5) var(--space-12);
}

.hero__portrait {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.hero__portrait img {
  display: block;
  width: 100%;
  height: auto;
}

/* Demo-Video direkt unter dem Hero: Hochformat 9:16, so hoch wie
   vorher im Hero (620px), zentriert. Ohne feste Breite wuerde das
   <video> als Block die ganze Zeile fuellen. */
.video-stage {
  --stage-h: 620px;
  padding-top: var(--space-12);
}

.video-stage .hero-video {
  width: 100%;
  max-width: calc(var(--stage-h) * 9 / 16);
  height: auto;
  max-height: none;
  aspect-ratio: 9 / 16;
}

@media (max-width: 900px) {
  .navbar--dark .navbar__inner {
    flex-wrap: wrap;
    row-gap: var(--space-2);
  }
  .navbar--dark .navbar__links {
    order: 3;
    width: 100%;
    margin-left: 0;
    flex-wrap: wrap;
    row-gap: var(--space-2);
  }
  /* Die 2-Spalten-Regel von .hero--center steht weiter unten in der Datei
     als die allgemeine .hero-Regel dieses Media-Blocks und wuerde sonst
     gewinnen: hier explizit auf eine Spalte (Text oben, Foto darunter). */
  .hero--center {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    padding-top: var(--space-6);
  }
  .hero--center .hero__copy {
    padding-bottom: var(--space-4);
  }
  .hero__portrait {
    max-width: var(--portrait-max);
    margin: 0 auto;
  }
}

@media (max-width: 700px) {
  .navbar--dark {
    padding: var(--space-3) var(--space-6);
  }
  .hero--center .hero__title {
    font-size: var(--type-h1-size);
  }
  .hero__cta {
    width: 100%;
  }
}