/* HENOS · Landing-Abschnitt „Henos für unterwegs" (Design 1a)
 * =========================================================
 * Nur auf index.html im Einsatz, direkt über der Live-Demo (#ausprobieren).
 *
 * Aufbau: eine randlose Navy-Bühne mit Überschrift und Store-Knöpfen, davor
 * drei Telefone, die unten aus der Bühne herausragen, darunter drei Spalten
 * mit dem Nutzen. Die Telefone sind KEINE Screenshots, sondern nachgebautes
 * Markup — dadurch bleiben sie scharf, folgen den Farbtokens und wiegen
 * nichts. Die gezeigten Daten sind erfunden; darauf weist .ha-mock-note hin.
 *
 * MASSSTAB: Die Telefone sind auf 320 × 672 px gebaut (so wie im Entwurf) und
 * werden als Ganzes über --ha-s skaliert, statt jede Innenmaßangabe noch
 * einmal pro Haltepunkt zu setzen. Weil `transform` die Layouthöhe nicht
 * verändert, rechnen .ha-rail (Höhe) und .ha-stage (unterer Innenabstand) den
 * Maßstab mit — sonst risse unter dem Telefon eine Lücke auf.
 *
 * ABWEICHUNG VOM ENTWURF: Der Entwurf setzt die Überschrift auf 54 px. Das
 * wäre größer als die h1 des Hero (44 px) und damit ein zweiter Seitenanfang
 * mitten auf der Seite. Hier steht sie auf 40 px (--text-6xl): größer als eine
 * gewöhnliche Abschnittsüberschrift (32 px), kleiner als der Hero.
 *
 * AUSNAHME VON DER TYPO-SKALA (bewusst, 07.09.2026): Alles INNERHALB der
 * Telefone (.ha-screen und darunter) behält seine eigenen Größen — 9, 10, 17
 * und 27 px stehen nicht in tokens.css. Das ist kein Versäumnis: Die Telefone
 * sind eine maßstäblich komponierte Abbildung mit fester Fläche
 * (302 × 654 px). Eine Schriftgröße dort auf die nächste Skalenstufe zu heben
 * verschiebt Zeilenumbrüche in einem Kasten, der nicht mitwachsen kann.
 * Die Bühne, die Spalten und alles außerhalb der Telefone folgen der Skala.
 *
 * OFFEN und davon zu trennen: --ha-s skaliert unter 400 px auf 0,74. Die
 * 9-px-Dachzeile im Papierdokument landet dadurch bei rund 6,7 px, die
 * 10-px-Labels bei 7,4 px — auf genau den Geräten, für die dieser Abschnitt
 * die App bewirbt. Das gehört gelöst, aber durch eine größere Komposition,
 * nicht durch das Ersetzen einzelner Werte.
 */

.ha-wrap {
  /* Luft nach oben wie bei .ld-voices-wrap, dem anderen farbigen Block über
   * die volle Breite. Ohne sie stößt der Abschnitt davor mit seiner letzten
   * Zeile direkt an die Navy-Kante — vor dem Entfernen von „Wofür Sie Henos
   * nutzen" lieferte dessen Innenabstand diesen Abstand mit. */
  margin-top: 80px;

  --ha-s: 1;                     /* Maßstab der Telefonzeile, s. u. */
  /* Gerätefarben — bewusst keine Markentokens: Das sind Kunststoff, Glas und
   * bedrucktes Papier, keine HENOS-Farben. Sie haben deshalb hier ihren Platz
   * und nicht in tokens.css. */
  --ha-notch: #05070F;           /* Aussparung der Frontkamera */
  --ha-frame: #26314F;           /* oberer Ton des Gehäuseverlaufs */
  --ha-paper-line: #DCE3EF;      /* Textzeilen auf dem Papierdokument */
}

/* ---- Navy-Bühne -------------------------------------------------------
 * Randlos wie .ld-voices-wrap: <main> ist nicht in der Breite begrenzt.
 * Der untere Innenabstand ist der Bereich, in den die Telefone hineinragen —
 * er skaliert deshalb mit ihnen. */
.ha-stage {
  background: linear-gradient(135deg, var(--c-navy-deep) 0%, var(--c-navy) 100%);
  padding: 80px 20px calc(320px * var(--ha-s));
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  text-align: center;
}
@media (max-width: 640px) { .ha-stage { padding-top: 56px; } }

.ha-badge {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(var(--c-white-rgb), 0.10);
  border: 1px solid rgba(var(--c-white-rgb), 0.14);
  border-radius: var(--radius-pill); padding: 8px 16px;
  color: var(--c-green-bright);
  font-size: 13px; font-weight: 700; letter-spacing: 0.1em; line-height: 1;
}

.ha-stage h2 {
  margin: 0; max-width: 860px;
  font-size: 40px; line-height: 1.1; font-weight: 800;
  letter-spacing: -0.02em; color: var(--c-surface);
  /* balance statt des Standardumbruchs: sonst riss die Zeile mitten durch den
     grünen Akzent („in der / Tasche"), und der Akzent zerfiel optisch in zwei. */
  text-wrap: balance;
}
/* Der <em>-Akzent auf Navy kommt aus tokens.css (--heading-accent-dark). */

.ha-lead {
  margin: 0; max-width: 700px;
  font-size: 18px; line-height: 1.6;
  color: rgba(var(--c-white-rgb), 0.78);
}

/* ---- Store-Knöpfe -----------------------------------------------------
 * Seit die App im App Store liegt, sind beide sichtbaren Knöpfe echte <a>:
 * „Jetzt starten" auf /preise und „Für iPhone laden" in den App Store. Die
 * Reihenfolge ist der Trichter — das Konto entsteht im Web, die App meldet
 * sich damit an (Begründung im Abschnitt #app in index.html).
 *
 * Android bleibt <span> ohne eigene Regel und trägt statt eines Knopfes das
 * Etikett „in Vorbereitung" in .ha-soon: ein Knopf, der aussieht wie ein
 * Download und in eine leere Play-Suche führt, wäre schlechter als ein Satz,
 * der sagt, dass es ihn noch nicht gibt. */
.ha-stores { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; padding-top: 6px; }
.ha-store {
  display: inline-flex; align-items: center; gap: 10px;
  border-radius: var(--radius-pill);
  font-size: 15px; font-weight: 700; line-height: 1;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.ha-store-primary { background: var(--c-surface); color: var(--c-navy-deep); padding: 14px 24px; }
.ha-store-primary:hover { background: rgba(var(--c-white-rgb), 0.88); }
.ha-store-ghost {
  border: 1.5px solid rgba(var(--c-white-rgb), 0.34);
  color: var(--c-surface); padding: 13px 24px;
}
.ha-store-ghost:hover { border-color: rgba(var(--c-white-rgb), 0.62); }
/* Nicht `transform` für alle: Ein angehobener Knopf auf einem Gerät ohne
 * Hover bliebe beim Antippen hängen. */
@media (hover: hover) { .ha-store:hover { transform: translateY(-1px); } }
@media (prefers-reduced-motion: reduce) { .ha-store { transition: none; } .ha-store:hover { transform: none; } }
/* .ld-soon-badge ist für helle Flächen gebaut (amber-soft auf Weiß). Auf Navy
 * wird daraus ein stumpfes Oliv — dort ist --c-amber-bright der lesbare Ton,
 * genau wofür tokens.css ihn vorsieht. */
/* Trägt jetzt einen ganzen Satz („erst hier anlegen") und nicht mehr nur das
 * Etikett — deshalb hier die Textmaße, die .ha-trust schon hatte. */
.ha-soon {
  margin: -6px 0 0; max-width: 520px; text-align: center;
  color: rgba(var(--c-white-rgb), 0.5);
  font-size: 14px; line-height: 1.5;
}
.ha-soon .ld-soon-badge {
  background: rgba(var(--c-white-rgb), 0.10);
  border: 1px solid rgba(var(--c-white-rgb), 0.20);
  color: var(--c-amber-bright);
}

/* Bewusst kein Flex: Sobald die Zeile umbricht (Handy), stünde das Schloss als
 * eigene Spalte weit links neben dem zweizeiligen Text. Inline bleibt es am
 * ersten Wort kleben, so wie es gemeint ist. */
.ha-trust {
  max-width: 520px; text-align: center;
  color: rgba(var(--c-white-rgb), 0.5);
  font-size: 14px; line-height: 1.5;
}
.ha-trust .ico { margin-right: 7px; }

/* ---- Telefonzeile -----------------------------------------------------
 * Die Zeile ragt 300 px in die Bühne hinein (negativer Außenabstand) und
 * steht mit dem Rest auf dem Seitenhintergrund. Die feste Höhe ist nötig,
 * weil `transform: scale` nur die Darstellung staucht, nicht das Layout. */
.ha-rail {
  display: flex; justify-content: center;
  /* flex-start ist Pflicht, nicht Geschmack: Ohne sie streckt der Flex-Kasten
     .ha-rail-inner auf die (bereits verkleinerte) Höhe der Zeile, und weil die
     Telefone darin unten ausgerichtet sind, ragen sie oben aus ihr heraus —
     unterhalb von 1040 px schob sich das mittlere Telefon dadurch über die
     Vertrauenszeile. Mit flex-start behält der Innenkasten seine echten
     672 px, und der Maßstab greift sauber von oben. */
  align-items: flex-start;
  margin-top: calc(-300px * var(--ha-s));
  height: calc(672px * var(--ha-s));
  position: relative; z-index: 2;
}
.ha-rail-inner {
  display: flex; align-items: flex-end;
  transform: scale(var(--ha-s)); transform-origin: top center;
}
/* Die äußeren beiden treten zurück und rücken zur Mitte, damit die Zeile als
   ein Fächer gelesen wird und nicht als drei einzelne Bilder. */
.ha-ph-left  { transform: translateX(34px)  translateY(28px) scale(.84) rotate(-7deg); }
.ha-ph-right { transform: translateX(-34px) translateY(28px) scale(.84) rotate(7deg); }
.ha-ph-mid   { position: relative; z-index: 3; }

.ha-mock-note {
  text-align: center; margin: 18px 0 0;
  font-size: 13px; color: var(--c-text-muted);
}

/* ---- Nutzen-Spalten ---------------------------------------------------- */
/* Unten bewusst ohne Innenabstand: Auf dieser Seite bringt jeder Abschnitt
 * seinen Abstand nach OBEN mit (.ld-section: 80px 20px 0). Der Entwurf endet
 * mit 96 px, weil dort nichts mehr folgt — hier folgt die Live-Demo mit ihren
 * eigenen 80 px, und beides zusammen riss doppelt so viel Luft auf wie
 * zwischen allen anderen Abschnitten. */
.ha-feat {
  max-width: 1060px; margin: 0 auto;
  padding: 64px 20px 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
}
.ha-feat-col { display: flex; flex-direction: column; gap: 12px; padding: 0 40px; }
.ha-feat-col:first-child { padding-left: 0; }
.ha-feat-col:last-child { padding-right: 0; }
.ha-feat-col + .ha-feat-col { border-left: 1px solid var(--c-track); }
.ha-feat-head { display: flex; align-items: center; gap: 12px; }
.ha-feat-num {
  flex: none; width: 32px; height: 32px; border-radius: var(--radius-circle);
  background: var(--c-green-soft); color: var(--c-green-deep);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; line-height: 1;
}
.ha-feat-col h3 {
  margin: 0; font-size: 20px; line-height: 1.2; font-weight: 700;
  letter-spacing: -0.01em; color: var(--c-navy-deep);
}
.ha-feat-col p {
  margin: 0; font-size: 16px; line-height: 1.6;
  color: var(--c-text-muted); text-wrap: pretty;
}

/* ======================================================================
   DAS TELEFON
   ====================================================================== */
.ha-phone {
  width: 320px; height: 672px; flex: none;
  border-radius: 46px; padding: 9px;
  background: linear-gradient(155deg, var(--ha-frame), var(--c-navy-deep) 60%);
  box-shadow: 0 34px 70px rgba(var(--c-navy-deep-rgb), 0.30),
              0 4px 14px rgba(var(--c-navy-deep-rgb), 0.22);
}
.ha-screen {
  width: 302px; height: 654px; border-radius: 38px; overflow: hidden;
  position: relative; display: flex; flex-direction: column;
  background: var(--c-bg); text-align: left;
}
.ha-notch {
  position: absolute; top: 9px; left: 50%; margin-left: -38px;
  width: 76px; height: 21px; border-radius: 12px;
  background: var(--ha-notch); z-index: 9;
}
.ha-app { display: flex; flex-direction: column; height: 100%; background: var(--c-app-flaeche); }

/* ---- Statuszeile ---- */
.ha-status {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; font-weight: 700; line-height: 1; color: var(--c-text);
}
.ha-status-right { display: flex; gap: 5px; align-items: center; }
.ha-signal { display: flex; gap: 2px; align-items: flex-end; }
.ha-signal i { display: block; width: 3px; border-radius: 1px; background: currentColor; }
.ha-signal i:nth-child(1) { height: 5px; }
.ha-signal i:nth-child(2) { height: 7px; }
.ha-signal i:nth-child(3) { height: 9px; }
.ha-batt {
  display: block; width: 22px; height: 11px; padding: 2px;
  border: 1px solid currentColor; border-radius: 3px;
}
.ha-batt i { display: block; width: 100%; height: 100%; border-radius: 1px; background: currentColor; }
.ha-status-light { color: var(--c-surface); }

/* ---- Zeilen (Kategorien, Aktionen) ---- */
.ha-row {
  display: flex; align-items: center; gap: 11px;
  background: var(--c-surface); border: 1px solid var(--c-track);
  border-radius: var(--radius-lg); padding: 11px 12px;
}
.ha-row-ico {
  flex: none; width: 32px; height: 32px; border-radius: var(--radius-md);
  background: var(--c-surface-soft); color: var(--c-navy);
  display: flex; align-items: center; justify-content: center; line-height: 0;
  font-size: 17px;
}
.ha-row-name {
  flex: 1; display: flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 700; line-height: 1.2; color: var(--c-navy-deep);
}
.ha-row-n { font-size: 13px; font-weight: 700; line-height: 1; color: var(--c-text-muted); }
.ha-row-go { font-size: 15px; color: var(--c-app-rand-stark); }
.ha-dot { display: block; width: 6px; height: 6px; border-radius: var(--radius-circle); background: var(--c-amber); }

/* ---- Reiterleiste ----
 * Der Fuß erbt sonst die Arbeitsfläche der App. Nur beim Scanner steht er auf
 * --c-bg: dort ist der Rest des Screens navy, und die helle Leiste setzt den
 * Fuß gegen das Sucherbild ab — genau wie in der App. */
.ha-foot { padding: 10px 12px 16px; }
.ha-foot.is-companion { padding-top: 12px; }
.ha-foot.is-scan { background: var(--c-bg); }

.ha-tabs {
  display: flex; align-items: center; gap: 4px;
  background: var(--c-surface-soft); border-radius: var(--radius-pill); padding: 5px;
}
/* flex-basis auto statt 0: Die App teilt die Leiste in starre Drittel (flex: 1
 * in app/(app)/_layout.tsx) — auf einem echten Gerät mit 375–430 pt geht das
 * auf. Die Nachbildung ist nur 302 px breit, und dort braucht das fett
 * gesetzte „Companion" mit Icon 88,4 px, mehr als das Drittel (86,7 px)
 * hergibt: Die Pillenkante schnitt in die Schrift. Mit `auto` bekommt jeder
 * Reiter seine Inhaltsbreite und der Rest wird gleichmäßig verteilt — die
 * Reiter sind dann unterschiedlich breit, aber gleich großzügig gepolstert.
 * Sichtbar ist ohnehin nur die aktive Pille, die beiden anderen stehen ohne
 * Fläche auf der Leiste. */
.ha-tab {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 0; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 400; line-height: 1; color: var(--c-text-muted);
}
.ha-tab .ico { font-size: 15px; }
.ha-tab.is-on { background: var(--c-navy-deep); color: var(--c-surface); font-weight: 700; }

/* ======================================================================
   TRESOR
   ====================================================================== */
.ha-t-head {
  background: var(--c-surface); padding: 34px 18px 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.ha-t-title { font-size: 27px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: var(--c-navy-deep); }
.ha-t-sub { font-size: 12px; line-height: 1.5; color: var(--c-text-muted); }
.ha-t-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--c-surface-soft); border-radius: var(--radius-pill);
  padding: 10px 14px; color: var(--c-text-muted);
  font-size: 13px; line-height: 1;
}
.ha-t-search .ico { font-size: 15px; }
.ha-t-list { flex: 1; padding: 14px 14px 0; display: flex; flex-direction: column; gap: 9px; overflow: hidden; }
.ha-t-label { font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: 0.12em; color: var(--c-text-muted); }

/* Eingabezeile „fragen" über der Reiterleiste */
.ha-ask { padding: 10px 14px 0; display: flex; align-items: center; gap: 8px; }
.ha-ask-field {
  flex: 1; background: var(--c-surface); border: 1px solid var(--c-app-rand-stark);
  border-radius: var(--radius-pill); padding: 11px 14px;
  font-size: 12px; line-height: 1; color: var(--c-text-muted);
}
.ha-ask-btn {
  flex: none; width: 36px; height: 36px; border-radius: var(--radius-circle);
  background: var(--c-green); color: var(--c-surface);
  display: flex; align-items: center; justify-content: center; line-height: 0;
  font-size: 17px;
}

/* ======================================================================
   COMPANION
   ====================================================================== */
.ha-c-head {
  background: var(--c-navy-deep); padding: 34px 18px 12px;
  display: flex; flex-direction: column; gap: 12px;
}
.ha-c-brand { display: flex; align-items: center; gap: 10px; }
.ha-c-brand img { display: block; width: 28px; height: 28px; border-radius: 8px; flex: none; }
.ha-c-name { flex: 1; font-size: 16px; font-weight: 800; line-height: 1; letter-spacing: 0.01em; color: var(--c-surface); }
.ha-c-avatar {
  width: 28px; height: 28px; border-radius: var(--radius-circle);
  background: rgba(var(--c-white-rgb), 0.14); color: var(--c-surface);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; line-height: 1;
}
.ha-c-body { flex: 1; padding: 14px; display: flex; flex-direction: column; gap: 11px; overflow: hidden; }
.ha-greet { font-size: 20px; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: var(--c-navy-deep); }
.ha-greet-sub { font-size: 12px; line-height: 1.5; color: var(--c-text-muted); }
.ha-frage { display: flex; justify-content: flex-end; }
.ha-frage span {
  max-width: 80%; background: var(--c-navy-deep); color: var(--c-surface);
  border-radius: 14px 14px 5px 14px; padding: 10px 13px;
  font-size: 13px; line-height: 1.5;
}
.ha-antwort {
  background: var(--c-surface); border: 1px solid var(--c-track);
  border-radius: var(--radius-lg); padding: 12px;
  display: flex; flex-direction: column; gap: 9px;
}
.ha-antwort-text { font-size: 13px; line-height: 1.6; color: var(--c-text); }
.ha-quelle {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  background: var(--c-green-soft); color: var(--c-green-deep);
  border-radius: var(--radius-pill); padding: 6px 10px;
  font-size: 11px; font-weight: 700; line-height: 1;
}
.ha-quelle .ico { font-size: 13px; }
.ha-basis { font-size: 11px; line-height: 1.4; color: var(--c-text-muted); }
.ha-c-ask { padding: 0 14px; display: flex; align-items: center; gap: 8px; }
.ha-c-ask .ha-ask-field { border: none; padding: 12px 14px; }
.ha-c-ask .ha-ask-btn { width: 38px; height: 38px; }

/* ======================================================================
   SCANNER
   ====================================================================== */
.ha-scan { background: linear-gradient(135deg, var(--c-navy-deep), var(--c-navy)); }
.ha-s-head { padding: 34px 18px 0; display: flex; flex-direction: column; gap: 12px; }
.ha-s-title { font-size: 27px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: var(--c-surface); }
.ha-s-sub { font-size: 12px; line-height: 1.5; color: rgba(var(--c-white-rgb), 0.78); }
.ha-s-body { flex: 1; padding: 14px 18px 0; display: flex; flex-direction: column; gap: 11px; }

.ha-vf {
  position: relative; flex: 1; border-radius: var(--radius-xl);
  border: 1px solid rgba(var(--c-white-rgb), 0.14);
  background: rgba(var(--c-white-rgb), 0.06);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.ha-paper {
  width: 152px; background: var(--c-surface); border-radius: 4px;
  padding: 14px 13px; transform: rotate(-5deg);
  box-shadow: 0 18px 40px rgba(var(--c-navy-deep-rgb), 0.45);
  display: flex; flex-direction: column; gap: 7px;
}
.ha-paper-kicker { font-size: 9px; font-weight: 800; line-height: 1.2; letter-spacing: 0.1em; color: var(--c-text-muted); }
.ha-paper-title { font-size: 12px; font-weight: 800; line-height: 1.25; color: var(--c-navy-deep); }
.ha-paper-lines { display: flex; flex-direction: column; gap: 5px; padding-top: 3px; }
.ha-paper-lines i { display: block; height: 4px; border-radius: 2px; background: var(--ha-paper-line); }
/* Die grüne Zeile ist die, die Henos gleich als Frist herausliest. */
.ha-paper-lines i.is-treffer { background: rgba(var(--c-green-rgb), 0.55); }

/* Vier Ecken des Suchers */
.ha-corner { position: absolute; width: 30px; height: 30px; }
.ha-corner-tl { left: 22px; top: 22px;    border-left: 3px solid var(--c-green); border-top: 3px solid var(--c-green);    border-radius: 8px 0 0 0; }
.ha-corner-tr { right: 22px; top: 22px;   border-right: 3px solid var(--c-green); border-top: 3px solid var(--c-green);   border-radius: 0 8px 0 0; }
.ha-corner-bl { left: 22px; bottom: 22px; border-left: 3px solid var(--c-green); border-bottom: 3px solid var(--c-green); border-radius: 0 0 0 8px; }
.ha-corner-br { right: 22px; bottom: 22px;border-right: 3px solid var(--c-green); border-bottom: 3px solid var(--c-green);border-radius: 0 0 8px 0; }

.ha-scanline {
  position: absolute; left: 0; right: 0; top: 56%; height: 2px;
  background: linear-gradient(90deg, rgba(var(--c-green-rgb), 0), var(--c-green-bright), rgba(var(--c-green-rgb), 0));
  box-shadow: 0 0 18px 4px rgba(var(--c-green-rgb), 0.5);
}
.ha-vf-hint {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 14px;
  display: flex; align-items: center; gap: 7px;
  background: rgba(var(--c-white-rgb), 0.16); border-radius: var(--radius-pill);
  padding: 7px 12px; color: var(--c-surface);
  font-size: 11px; font-weight: 600; line-height: 1; white-space: nowrap;
}
.ha-vf-hint .ico { font-size: 14px; }

.ha-erkannt {
  display: flex; align-items: flex-start; gap: 9px;
  background: rgba(var(--c-green-rgb), 0.14);
  border: 1px solid rgba(var(--c-green-rgb), 0.34);
  border-radius: var(--radius-lg); padding: 11px 12px;
}
.ha-erkannt > .ico { font-size: 15px; color: var(--c-green-bright); margin-top: 1px; }
.ha-erkannt-text { display: flex; flex-direction: column; gap: 2px; }
.ha-erkannt-titel { font-size: 12px; font-weight: 700; line-height: 1.3; color: var(--c-surface); }
.ha-erkannt-meta { font-size: 11px; line-height: 1.4; color: rgba(var(--c-white-rgb), 0.78); }

.ha-scan-cta {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--c-green); border-radius: var(--radius-pill); height: 46px;
  color: var(--c-surface); font-size: 15px; font-weight: 700; line-height: 1;
  box-shadow: 0 8px 22px rgba(var(--c-green-rgb), 0.34);
}
.ha-scan-cta .ico { font-size: 18px; }
.ha-scan-note {
  display: flex; align-items: flex-start; gap: 8px; padding-bottom: 4px;
  color: rgba(var(--c-white-rgb), 0.6); font-size: 10px; line-height: 1.5;
}
.ha-scan-note .ico { font-size: 13px; margin-top: 2px; }

/* ======================================================================
   HALTEPUNKTE
   ====================================================================== */
/* Die Zeile ist von Haus aus 960 px breit (3 × 320). Sie wird als Ganzes
   kleiner, statt umzubrechen — ein umgebrochener Fächer wäre keiner mehr. */
@media (max-width: 1040px) { .ha-wrap { --ha-s: 0.82; } }
@media (max-width: 880px)  { .ha-wrap { --ha-s: 0.70; } }

@media (max-width: 780px) {
  /* Unter 780 px bleibt nur der Companion stehen. Drei ineinander geschobene
     Telefone auf Handybreite sind drei Streifen, kein Fächer — und was auf den
     beiden äußeren steht, sagen die Spalten darunter ohnehin. */
  .ha-wrap { --ha-s: 0.86; }
  .ha-ph-left, .ha-ph-right { display: none; }

  .ha-stage h2 { font-size: 32px; }
  .ha-lead { font-size: 16px; }
  .ha-stores { width: 100%; }
  .ha-store { justify-content: center; }

  .ha-feat { padding: 48px 20px 0; grid-template-columns: 1fr; gap: 28px; }
  /* Die senkrechten Trennlinien werden waagerecht, sonst stünde die Liste
     ohne jede Gliederung untereinander. */
  .ha-feat-col,
  .ha-feat-col:first-child,
  .ha-feat-col:last-child { padding: 0; }
  .ha-feat-col + .ha-feat-col {
    padding-top: 28px; border-left: none;
    border-top: 1px solid var(--c-track);
  }
}

@media (max-width: 640px) {
  .ha-wrap { margin-top: 56px; }   /* dieselbe Stufe wie .ld-voices-wrap */
  .ha-stage h2 { font-size: 28px; }
}

@media (max-width: 400px) { .ha-wrap { --ha-s: 0.74; } }