/* ══════════════════════════════════════════════════════════════════════════
   Quantiz® Balance — öffentliche Infoseiten (BAL-221)
   Produkt (/), Tarife (/tarife), FAQ (/faq), Registrierung (/registrierung)

   Vorlage: docs/design/application/project/public.css (Präfix `pb-`).
   Strukturdoku: docs/css/structure/oeffentliche_seiten.md
   Blueprint:    blueprints/blueprint_oeffentliche_seiten.html

   GELADEN NACH tokens.css UND app.css. Das ist die Wiederverwendung, nicht
   ein Versehen: Tarifkarten, Leistungsvergleich, Add-ons, Kostenaufstellung,
   Full-User-Zähler (`tarif_*`), das Akkordeon der häufigen Fragen (`faq_*`),
   Auswahlkarten (`setup_wizard_option*`), Formularfelder (`content_form_*`),
   Knöpfe (`button_*`), Segmentreihe (`fseg`), Suchfeld (`ltb-search`),
   Themenpillen (`md-chip`), Hinweise (`info-note`) und Chatblasen
   (`ai_drawer_message_*`) kommen von dort. Hier steht nur,
   1. was es in Balance nicht gab - die Seite selbst und ihre Abschnitte
      (Präfix `public_`) und den Registrierungsablauf (`signup`), und
   2. Größenvarianten der übernommenen Klassen. Die Anwendung zeigt dieselben
      Bausteine in einer Einstellungsspalte, die Infoseite auf voller Breite.

   Klassenreihe: die ucs-Reihe mit Unterstrich (POL-001). Das Kürzel `pb-` des
   Entwurfs ist nicht übernommen - es hat außerhalb des Entwurfs keine
   Bedeutung.

   Umbrüche: 1100 · 900 · 560 px, dazu `prefers-reduced-motion`. Der Entwurf
   nannte 1080/1060/1000/860/600; übernommen sind die Stufen der Anwendung,
   die ihnen am nächsten liegen.

   Jeder Textbaustein setzt Größe, Gewicht, Zeilenhöhe und Farbe selbst: app.css
   stellt `body` auf 15 px / 300 und Knöpfe auf `background: transparent`.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Seite ──────────────────────────────────────────────────────────────── */
/* app.css baut eine Vollbildanwendung: html/body 100 % hoch, `overflow:
   hidden`, grauer Grund. Die Infoseite scrollt als Dokument. */
html.public_page { height: auto; min-height: 100%; scroll-behavior: smooth; }
html.public_page body {
  height: auto; min-height: 100vh; overflow: visible;
  background: var(--q-highlight-1);
  color: var(--q-dark); font-family: var(--font-sans); font-size: 16px; font-weight: var(--w-light); line-height: 1.55;
}
html.public_page a { color: var(--link); font-weight: var(--w-bold); transition: color var(--dur-fast) var(--ease-std); }
html.public_page a:hover { color: var(--link-hover); }
html.public_page h1, html.public_page h2, html.public_page h3 { text-wrap: balance; }
/* Mit Skript eingeblendete Bedienelemente tragen bis dahin `hidden`; Klassen wie
   .ltb-search (display: flex) schluegen das Attribut sonst. */
html.public_page [hidden] { display: none !important; }
html.public_page :focus-visible { outline: 2px solid var(--q-highlight-3); outline-offset: 2px; }
.public_skip { position: absolute; left: 16px; top: -60px; z-index: 50; padding: 10px 18px; border-radius: 999px; background: var(--q-highlight-2); color: #fff !important; font-size: 14px; }
.public_skip:focus { top: 16px; }

/* ── public_shell: Seitenrahmen (schwebende Containerkarte auf Lime) ───── */
.public_shell { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: calc(100vh - 24px); margin: 12px; overflow: clip; border-radius: 40px; background: #fff; box-shadow: var(--shadow-elev); }
.public_shell_main { flex: 1; }
.public_shell_wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 32px; }

.public_shell_header {
  position: sticky; top: 0; z-index: 20;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
  padding: 18px 32px; border-bottom: 1px solid var(--divider);
  background: rgba(255, 255, 255, 0.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.public_shell_brand, .public_shell_brand:hover { justify-self: start; display: flex; align-items: center; gap: 18px; color: var(--q-dark); }
.public_shell_brand img { display: block; }
.public_shell_brand_parent { width: auto; height: 30px; }
.public_shell_brand_separator { width: 1px; height: 34px; background: var(--q-bright); }
.public_shell_brand_mark { width: 30px; height: 30px; }
.public_shell_brand_name { position: relative; top: 3px; margin-left: -6px; color: var(--q-dark); font-family: var(--font-display); font-size: 24px; font-weight: var(--w-regular); line-height: 1; white-space: nowrap; }

.public_shell_nav { justify-self: center; display: flex; gap: 4px; }
.public_shell_nav_item {
  position: relative; display: flex; align-items: center; gap: 9px;
  padding: 10px 16px; color: var(--q-dark) !important;
  font-size: 14px; font-weight: var(--w-bold); letter-spacing: 0.02em; line-height: 1.4;
}
.public_shell_nav_item::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 2px; height: 3px; border-radius: 3px; background: transparent; transition: background var(--dur-base) var(--ease-std); }
.public_shell_nav_item .ui_icon { width: 18px; height: 18px; transition: transform var(--dur-base) linear; }
.public_shell_nav_item:hover { color: var(--q-highlight-2) !important; }
.public_shell_nav_item:hover::after { background: var(--q-bright); }
.public_shell_nav_item:hover .ui_icon { transform: scale(1.15); }
.public_shell_nav_item_active, .public_shell_nav_item_active:hover { color: var(--q-highlight-2) !important; }
.public_shell_nav_item_active::after, .public_shell_nav_item_active:hover::after { background: var(--q-highlight-1); }

.public_shell_controls { justify-self: end; display: flex; align-items: center; gap: 10px; }
.public_shell_controls_text { color: var(--q-dark); font-size: 14px; font-weight: var(--w-light); line-height: 1.4; }
.public_shell_menu_toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--q-highlight-4); color: var(--q-highlight-2); }

.public_shell_footer { display: flex; flex-direction: column; gap: 12px; padding: 22px 32px 20px; border-top: 1px solid var(--divider); color: var(--q-dark); font-size: 13px; font-weight: var(--w-light); line-height: 1.5; }
.public_shell_footer_main { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; }
.public_shell_footer_logo img { display: block; width: auto; height: 26px; }
.public_shell_footer_info { flex: 1; min-width: 280px; }
.public_shell_footer_info a { color: var(--q-highlight-2); }
.public_shell_footer_info a:hover { color: var(--q-highlight-3); }

/* ── button: Größenvarianten für die Infoseiten ──────────────────────────
   Erweiterung von `.button` (app.css). In der Anwendung 13,5 px und 36 px hoch;
   auf der Infoseite die Maße des Entwurfs. `button_accent` = Lime (pb-btn-primary),
   `button_primary` = Navy (pb-btn-navy), `button_ghost` mit hellem Rahmen. */
.public_shell .button { min-height: 44px; padding: 10px 24px; border-width: 2px; font-family: var(--font-sans); font-size: 14.5px; line-height: 1.2; text-align: center; }
.public_shell .button_accent, .public_shell .button_accent:hover { color: var(--q-highlight-2) !important; }
.public_shell .button_primary, .public_shell .button_primary:hover { color: #fff !important; }
.public_shell .button_ghost { border-color: var(--q-bright); color: var(--q-highlight-2) !important; }
.public_shell .button_ghost:hover { border-color: var(--q-highlight-2); }
.public_shell .button_large { min-height: 52px; padding: 14px 30px; font-size: 15.5px; }
.public_shell .link-btn { color: var(--link) !important; font-size: 14.5px; }
.public_shell .link-btn:hover { color: var(--link-hover) !important; }

/* ── public_pretext: Vorzeile über Titeln (Kategorie, Abschnitt) ───────── */
.public_pretext { color: var(--q-highlight-2); font-size: 12px; font-weight: var(--w-bold); letter-spacing: var(--tracking-xwide); line-height: 1.4; text-transform: uppercase; }

/* ── public_hero: Seiteneinstieg ─────────────────────────────────────── */
.public_hero { position: relative; padding: 88px 0 72px; }
.public_hero_grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.public_hero_title { margin: 18px 0 22px; color: var(--q-highlight-2); font-family: var(--font-display); font-size: clamp(34px, 4.6vw, 54px); font-weight: var(--w-bold); letter-spacing: -0.01em; line-height: 1.15; }
.public_hero_lead { max-width: 560px; margin: 0 0 32px; color: var(--q-dark); font-size: 18px; font-weight: var(--w-light); line-height: 1.6; text-wrap: pretty; }
.public_hero_controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.public_hero_note { margin-top: 18px; color: var(--q-dark); font-size: 13.5px; font-weight: var(--w-light); line-height: 1.5; }
/* Variante: kurzer, zentrierter Einstieg der Unterseiten */
.public_hero_compact { padding: 72px 0 40px; text-align: center; }
.public_hero_compact .public_hero_title { max-width: 820px; margin: 16px auto 18px; font-size: clamp(32px, 4.2vw, 48px); }
.public_hero_compact .public_hero_lead { max-width: 640px; margin: 0 auto; }
.public_hero_compact .public_hero_controls { justify-content: center; margin-top: 28px; }

/* ── public_preview: verkleinerte Lagebild-Darstellung (Beispiel) ─────── */
.public_preview { margin: 0; padding: 22px; border-radius: 40px; background: var(--q-highlight-4); box-shadow: var(--shadow-card); }
.public_preview_header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding: 0 4px; }
.public_preview_title { color: var(--q-highlight-2); font-family: var(--font-display); font-size: 16px; font-weight: var(--w-regular); line-height: 1.55; }
.public_preview_caption { color: var(--q-dark); font-size: 12px; font-weight: var(--w-light); line-height: 1.4; }
.public_preview_kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.public_preview_kpi { padding: 14px 16px; border-radius: 18px; background: #fff; }
.public_preview_kpi_label { color: var(--q-dark); font-size: 11px; font-weight: var(--w-bold); letter-spacing: 0.06em; line-height: 1.55; text-transform: uppercase; }
.public_preview_kpi_value { margin-top: 4px; color: var(--q-highlight-2); font-family: var(--font-display); font-size: 22px; font-weight: var(--w-bold); line-height: 1.55; font-variant-numeric: tabular-nums; }
.public_preview_kpi_caption { margin-top: 2px; color: var(--q-dark); font-size: 12px; font-weight: var(--w-light); line-height: 1.55; }
.public_preview_kpi .util { height: 6px; margin-top: 10px; background: var(--q-bright); }
.public_preview_alerts { margin: 10px 0 0; list-style: none; padding: 6px 16px; border-radius: 18px; background: #fff; }
.public_preview_alert { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--divider); color: var(--q-dark); font-size: 13px; font-weight: var(--w-light); line-height: 1.55; }
.public_preview_alert:last-child { border-bottom: 0; }
.public_preview_alert_dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--q-highlight-3); }
.public_preview_alert_dot_warning { background: var(--warning); }
.public_preview_alert_dot_danger { background: var(--danger); }
.public_preview_alert_tag { margin-left: auto; font-size: 12px; white-space: nowrap; }

/* ── public_section: Abschnitt mit Kopf ───────────────────────────────── */
.public_section { padding: 96px 0; }
.public_section_soft { background: var(--q-highlight-4); }
.public_section_header { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 760px; margin: 0 auto 56px; text-align: center; }
.public_section_header_spaced { margin-top: 72px; margin-bottom: 0; }
.public_section_title { margin: 0; color: var(--q-highlight-3); font-family: var(--font-display); font-size: clamp(26px, 3.2vw, 36px); font-weight: var(--w-bold); line-height: 1.2; }
.public_section_description { margin: 0; color: var(--q-dark); font-size: 17.5px; font-weight: var(--w-light); line-height: 1.55; text-wrap: pretty; }
.public_section_footnote { margin: 36px 0 0; color: var(--q-dark); font-size: 16px; font-weight: var(--w-light); line-height: 1.55; text-align: center; }

/* ── public_cards: Kartenraster ──────────────────────────────────────────
   Eine Sammlung für alle Kartenreihen der Seiten. Spaltenzahl über
   `data-spalten`, Ausprägung über Variantenklassen. */
.public_cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.public_cards_spaced { margin-top: 20px; }
.public_cards[data-spalten="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.public_cards[data-spalten="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.public_cards[data-spalten="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.public_cards[data-spalten="auto"] { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.public_cards_item { display: flex; flex-direction: column; gap: 8px; padding: 24px 26px; border-radius: 24px; background: #fff; box-shadow: var(--shadow-soft); }
.public_section_soft .public_cards_item { box-shadow: none; }
.public_cards_item_icon { width: 22px !important; height: 22px !important; color: var(--q-highlight-3); }
.public_cards_item_title { margin: 0; color: var(--q-highlight-2); font-family: var(--font-display); font-size: 17.5px; font-weight: var(--w-bold); line-height: 1.3; }
.public_cards_item_text { margin: 0; color: var(--q-dark); font-size: 14.5px; font-weight: var(--w-light); line-height: 1.5; text-wrap: pretty; }
.public_cards_item_link { margin-top: 4px; align-self: flex-start; }
/* Frage als Karte (Ausgangslage) */
.public_cards_question .public_cards_item { padding: 22px 24px; }
.public_cards_question .public_cards_item_title { font-size: 16.5px; font-weight: 600; line-height: 1.4; }
/* Zugang mit Icon (Plurale UX) */
.public_cards_access .public_cards_item { padding: 22px; }
.public_cards_access .public_cards_item_title { margin-top: 4px; font-family: var(--font-sans); font-size: 15.5px; }
.public_cards_access .public_cards_item_text { font-size: 13.5px; }
/* Kondition (Tarife) */
.public_cards_term .public_cards_item { gap: 4px; padding: 20px 22px; box-shadow: none; }
.public_cards_term .public_cards_item_title { font-size: 16px; }
.public_cards_term .public_cards_item_text { font-size: 14px; }
/* Werkzeug in einer Zeile (MCP) */
.public_cards_compact .public_cards_item { padding: 14px; border-radius: 18px; text-align: center; }
.public_cards_compact .public_cards_item_title { font-family: var(--font-sans); font-size: 13.5px; font-weight: var(--w-regular); line-height: 1.4; }
/* Farbige Fläche ohne Schatten (Hinweise unter den häufigen Fragen) */
.public_cards_item_tinted { box-shadow: none !important; background: var(--q-highlight-4); }
.public_cards_item_lime { box-shadow: none !important; background: var(--q-highlight-1); }

/* ── public_chain: fachliche Kette ───────────────────────────────────── */
.public_chain { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 8px 0 0; padding: 0; list-style: none; }
.public_chain::before { content: ""; position: absolute; left: 10%; right: 10%; top: 31px; height: 2px; background: linear-gradient(90deg, var(--q-highlight-1), var(--q-highlight-3), var(--q-highlight-2)); }
.public_chain_item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 10px; text-align: center; }
.public_chain_item_icon { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-card); color: var(--q-highlight-2); }
.public_chain_item_icon .ui_icon { width: 26px; height: 26px; }
.public_chain_item_text { display: flex; flex-direction: column; gap: 2px; }
.public_chain_item_title { color: var(--q-highlight-2); font-family: var(--font-display); font-size: 17px; font-weight: var(--w-bold); line-height: 1.3; }
.public_chain_item_description { color: var(--q-dark); font-size: 13.5px; font-weight: var(--w-light); line-height: 1.45; }

/* ── public_chips: statische Schlagwortreihe ─────────────────────────────
   Kein `md-chip`: Das ist ein Filter (Knopf, Hover, Zähler), hier stehen
   Beschriftungen ohne Wirkung. */
.public_chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.public_chips_centered { justify-content: center; margin-top: 44px; }
.public_chips_spaced { margin-top: 20px; }
.public_chips_item { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: var(--q-highlight-4); color: var(--q-highlight-2); font-size: 13.5px; font-weight: var(--w-regular); line-height: 1.4; }
.public_section_soft .public_chips_item { background: #fff; }
.public_chips_outlined .public_chips_item { border: 1px solid var(--q-bright); background: #fff; }
.public_chips_outlined .public_chips_item_active { border-color: var(--q-highlight-1); background: var(--q-highlight-1); }

/* ── public_values: Unterscheidung der Kennzahlen ────────────────────── */
.public_values { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; margin: 56px 0 0; padding: 0; overflow: hidden; border: 1px solid var(--divider); border-radius: 24px; background: var(--divider); list-style: none; }
.public_values_item { display: flex; align-items: center; gap: 10px; padding: 18px; background: #fff; color: var(--q-highlight-2); font-size: 14px; font-weight: var(--w-regular); line-height: 1.4; }
.public_values_item::before { content: ""; flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--wert-farbe, var(--q-highlight-3)); }

/* ── public_features: Funktionsbereiche ──────────────────────────────── */
.public_features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.public_features_item { display: flex; flex-direction: column; gap: 12px; padding: 36px 36px 32px; border-radius: 40px; background: #fff; box-shadow: var(--shadow-card); }
.public_features_item_icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--q-highlight-1); color: var(--q-highlight-2); }
.public_features_item_icon .ui_icon { width: 24px; height: 24px; }
.public_features_item_title { margin: 6px 0 0; color: var(--q-highlight-2); font-family: var(--font-display); font-size: 21px; font-weight: var(--w-bold); line-height: 1.3; }
.public_features_item_text { margin: 0; color: var(--q-dark); font-size: 15px; font-weight: var(--w-light); line-height: 1.55; text-wrap: pretty; }
.public_features_item_points { display: grid; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; }
.public_features_item_point { display: flex; align-items: flex-start; gap: 10px; color: var(--q-dark); font-size: 14.5px; font-weight: var(--w-light); line-height: 1.45; }
.public_features_item_point .ui_icon { width: 14px; height: 14px; margin-top: 4px; color: var(--q-highlight-3); }

/* ── public_split: zwei Spalten Text | Darstellung ───────────────────── */
.public_split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.public_split_top { align-items: start; }
.public_split_title { margin: 12px 0 18px; color: var(--q-highlight-3); font-family: var(--font-display); font-size: clamp(26px, 3vw, 34px); font-weight: var(--w-bold); line-height: 1.2; }
.public_split_text { margin: 0 0 1em; color: var(--q-dark); font-size: 16px; font-weight: var(--w-light); line-height: 1.55; text-wrap: pretty; }

/* ── public_contrast: Gegenüberstellung zweier Arbeitsweisen ────────── */
.public_contrast { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-top: 24px; }
.public_contrast_item { padding: 20px 22px; border-radius: 24px; background: var(--q-highlight-4); color: var(--q-dark); }
.public_contrast_item_active { background: var(--q-highlight-2); color: #fff; }
.public_contrast_item_title { display: block; margin-bottom: 6px; color: var(--q-highlight-2); font-family: var(--font-display); font-size: 16px; font-weight: var(--w-bold); line-height: 1.3; }
.public_contrast_item_active .public_contrast_item_title { color: var(--q-highlight-1); }
.public_contrast_item_text { color: inherit; font-size: 14px; font-weight: var(--w-light); line-height: 1.5; }

/* ── public_events: Beispiele für Benachrichtigungen ─────────────────── */
.public_events { margin: 0; padding: 14px 28px; border-radius: 40px; background: #fff; box-shadow: var(--shadow-card); list-style: none; }
.public_events_item { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--divider); color: var(--q-dark); font-size: 14.5px; font-weight: var(--w-light); line-height: 1.45; }
.public_events_item:last-child { border-bottom: 0; }
.public_events_item .ui_icon { width: 18px; height: 18px; color: var(--q-highlight-2); }
.public_events_item_tag { margin-left: auto; padding: 3px 10px; border-radius: 999px; background: var(--q-highlight-4); color: var(--q-highlight-2); font-size: 12px; font-weight: var(--w-bold); letter-spacing: 0.04em; line-height: 1.4; white-space: nowrap; }

/* ── public_quote, public_verbs: Leitsatz der pluralen UX ────────────── */
.public_quote { max-width: 760px; margin: 0 auto 48px; color: var(--q-highlight-2); font-family: var(--font-display); font-size: clamp(19px, 2.2vw, 24px); font-weight: 600; line-height: 1.45; text-align: center; }
.public_verbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 40px 0 0; padding: 0; list-style: none; color: var(--q-highlight-2); font-family: var(--font-display); font-size: 18px; font-weight: var(--w-bold); line-height: 1.4; }
.public_verbs_item:not(:last-child)::after { content: "·"; margin-left: 22px; color: var(--q-highlight-3); }

/* ── public_chat: Beispieldialog mit dem Assistenten ─────────────────────
   Die Blasen sind die des Assistenten (`ai_drawer_message_*`, app.css); hier
   nur der Rahmen und die Größe der Infoseite. */
.public_chat { margin: 0; display: flex; flex-direction: column; gap: 12px; padding: 26px; border-radius: 40px; background: var(--q-highlight-4); }
.public_chat_caption { align-self: center; color: var(--q-dark); font-size: 12px; font-weight: var(--w-bold); letter-spacing: var(--tracking-wide); line-height: 1.4; text-transform: uppercase; }
.public_chat .ai_drawer_message { max-width: 86%; padding: 13px 18px; border-radius: 22px; font-size: 14.5px; font-weight: var(--w-light); line-height: 1.5; }
.public_chat .ai_drawer_message_user { border-bottom-right-radius: 6px; }
.public_chat .ai_drawer_message_assistant { border-bottom-left-radius: 6px; background: #fff; }
.public_chat .ai_drawer_message b { color: var(--q-highlight-2); font-weight: var(--w-bold); }
.public_chat_sources { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.public_chat_source { padding: 3px 10px; border-radius: 999px; background: var(--q-highlight-4); color: var(--q-highlight-2); font-size: 12px; font-weight: var(--w-bold); line-height: 1.4; }
.public_asks { display: grid; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.public_asks_item { display: flex; align-items: flex-start; gap: 10px; color: var(--q-highlight-2); font-size: 15px; font-weight: var(--w-regular); line-height: 1.45; }
.public_asks_item .ui_icon { width: 16px; height: 16px; margin-top: 3px; color: var(--q-highlight-3); }

/* ── public_galaxy: zwei Anwendungen, zwei Verantwortungen ───────────── */
.public_galaxy { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 20px; align-items: stretch; }
.public_galaxy_item { display: flex; flex-direction: column; gap: 10px; padding: 34px; border-radius: 40px; }
.public_galaxy_item_mission_control { background: var(--q-highlight-2); color: #fff; }
.public_galaxy_item_balance { background: var(--q-highlight-1); color: var(--q-highlight-2); }
.public_galaxy_item .public_pretext { color: inherit; }
.public_galaxy_item_title { margin: 0; color: inherit; font-family: var(--font-display); font-size: 22px; font-weight: var(--w-bold); line-height: 1.3; }
.public_galaxy_item_text { margin: 0; color: inherit; font-size: 16px; font-weight: var(--w-regular); line-height: 1.5; }
.public_galaxy_join { display: flex; align-items: center; justify-content: center; color: var(--q-highlight-3); }
.public_galaxy_join .ui_icon { width: 28px; height: 28px; }

/* ── public_cta: Abschlussfläche ─────────────────────────────────────── */
.public_cta { position: relative; margin: 0 32px 32px; padding: 64px 40px; overflow: hidden; border-radius: 40px; background: var(--quantiz-ambience); background-size: 800% 800%; color: #fff; text-align: center; animation: public_cta_ambience var(--dur-amb) ease infinite; }
.public_cta::before { content: ""; position: absolute; inset: 0; background: linear-gradient(45deg, rgba(16, 49, 78, 0.88), rgba(16, 49, 78, 0.62)); }
.public_cta > * { position: relative; }
.public_cta_spaced { margin-top: 32px; }
.public_cta .public_pretext { color: var(--q-highlight-1); }
.public_cta_title { margin: 12px 0 14px; color: #fff; font-family: var(--font-display); font-size: clamp(26px, 3.2vw, 38px); font-weight: var(--w-bold); line-height: 1.2; }
.public_cta_text { max-width: 620px; margin: 0 auto 28px; color: #fff; font-size: 17px; font-weight: var(--w-light); line-height: 1.55; }
.public_cta .public_hero_controls { justify-content: center; }
.public_cta .button_ghost { border-color: rgba(255, 255, 255, 0.5); background: transparent; color: #fff !important; }
.public_cta .button_ghost:hover { border-color: #fff; }
@keyframes public_cta_ambience { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

/* ── public_origin: „Entwickelt in Österreich" ───────────────────────── */
.public_origin { display: flex; align-items: flex-start; gap: 14px; color: var(--q-dark); font-size: 14px; font-weight: var(--w-light); line-height: 1.6; text-align: left; }
.public_origin_compact { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; line-height: 1.5; white-space: nowrap; }
.public_origin_on_dark { justify-content: center; width: fit-content; margin: 40px auto 0; color: #fff; }
.public_origin_flag { flex-shrink: 0; width: 26px; height: 16px; margin-top: 4px; border-radius: 3px; background: linear-gradient(#c8102e 0 33.33%, #fff 33.33% 66.66%, #c8102e 66.66%); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06); }
.public_origin_compact .public_origin_flag { margin-top: 0; }

/* ══ Tarife: Erweiterungen von tarif_* (app.css) ════════════════════════ */
.tarif_cycle_public { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 32px 0 36px; }
.tarif_cycle_public .fseg { align-self: center; width: auto; margin: 0; padding: 4px; gap: 2px; border: 0; background: var(--q-highlight-4); }
.tarif_cycle_public .fseg-btn { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; min-height: 40px; padding: 8px 20px; font-size: 14px; }
.tarif_cycle_public .fseg-btn.on, .tarif_cycle_public .fseg-btn.on:hover { background: #fff; color: var(--q-highlight-2); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); }
.tarif_cycle_public .tarif_cycle_badge { padding: 2px 8px; font-size: 11px; }
.tarif_cycle_public_hint { color: var(--q-dark); font-size: 13px; font-weight: var(--w-light); line-height: 1.4; }

.tarif_plans_public { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; text-align: left; }
.tarif_plans_public .tarif_plan { gap: 10px; padding: 28px 24px 24px; border-color: var(--q-bright); border-radius: 32px; }
.tarif_plans_public .tarif_plan_recommended { padding: 27px 23px 23px; border: 2px solid var(--q-highlight-1); background: #fff; box-shadow: var(--shadow-card); }
.tarif_plans_public .tarif_plan_header { min-height: 24px; }
.tarif_plans_public .tarif_plan_pretext { color: var(--q-dark); font-size: 11px; line-height: 1.55; }
.tarif_plans_public .tarif_plan_badge { padding: 4px 10px; font-size: 11.5px; }
.tarif_plans_public .tarif_plan_title { font-size: 22px; }
.tarif_plans_public .tarif_plan_title span { color: var(--q-dark); }
.tarif_plans_public .tarif_plan_price { flex-wrap: wrap; min-height: 48px; }
.tarif_plans_public .tarif_plan_price b { font-size: 38px; font-variant-numeric: tabular-nums; }
.tarif_plans_public .tarif_plan_price b.tarif_plan_price_individual { font-size: 26px; }
.tarif_plans_public .tarif_plan_price span { color: var(--q-dark); font-size: 13px; }
.tarif_plan_price_caption { min-height: 19px; margin-top: -6px; color: var(--q-dark); font-size: 12.5px; font-weight: var(--w-light); line-height: 1.5; }
.tarif_plans_public .tarif_plan_users { color: var(--q-highlight-2); font-size: 13.5px; line-height: 1.55; }
.tarif_plans_public .tarif_plan_items { gap: 8px; margin-top: 6px; }
.tarif_plans_public .tarif_plan_description { font-size: 14px; font-weight: var(--w-light); }
.tarif_plans_public .tarif_plan_item { align-items: flex-start; font-size: 14px; font-weight: var(--w-light); line-height: 1.45; }
.tarif_plans_public .tarif_plan_item { gap: 10px; }
.tarif_plans_public .tarif_plan_item_icon { margin-top: 3px; }
.tarif_plans_public .tarif_plan_footer { padding-top: 14px; }
.tarif_plans_public .tarif_plan_control { width: 100%; }

.tarif_unlimited_public { margin: 20px 0 0; padding: 16px 20px; border: 0; border-radius: 24px; background: rgba(198, 211, 28, 0.18); font-size: 14.5px; line-height: 1.5; text-align: left; }
.tarif_unlimited_public .ui_icon { margin-top: 2px; color: var(--q-highlight-2); }

.tarif_addons_public { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tarif_addons_public .tarif_addon { grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 22px 24px; border: 0; border-radius: 24px; background: #fff; }
.tarif_addons_public .tarif_addon:first-child { padding-top: 22px; }
.tarif_addons_public .tarif_addon_icon { width: 44px; height: 44px; }
.tarif_addons_public .tarif_addon_title { margin: 0 0 4px; font-size: 15.5px; }
.tarif_addons_public .tarif_addon_description { margin: 0 0 8px; color: var(--q-dark); font-size: 13.5px; font-weight: var(--w-light); line-height: 1.5; }
.tarif_addon_availability { color: var(--q-highlight-2); font-size: 12.5px; font-weight: var(--w-regular); line-height: 1.4; }
.tarif_addons_public .tarif_addon_price { font-size: 20px; text-align: right; }
.tarif_addons_public .tarif_addon_price small { display: block; margin: 0; color: var(--q-dark); font-size: 12px; font-weight: var(--w-light); }

.tarif_compare_public { margin: 0; border-radius: 24px; background: #fff; }
.tarif_compare_public .tarif_compare_table { min-width: 720px; font-size: 14px; }
.tarif_compare_public .tarif_compare_table thead th { padding: 12px 16px; background: var(--q-highlight-4); color: var(--q-highlight-2); font-family: var(--font-display); font-size: 15px; letter-spacing: normal; text-transform: none; }
.tarif_compare_public .tarif_compare_table tbody th { padding: 12px 16px; border-bottom: 1px solid var(--divider); font-size: 14px; font-weight: var(--w-regular); }
.tarif_compare_public .tarif_compare_table td { padding: 12px 16px; border-bottom: 1px solid var(--divider); text-align: center; }
.tarif_compare_public .tarif_compare_plan { width: 15%; text-align: center; }
.tarif_compare_public .tarif_compare_table .tarif_compare_group th { padding: 22px 16px 12px; background: #fff; color: var(--q-highlight-2); font-family: var(--font-sans); font-size: 11.5px; letter-spacing: var(--tracking-xwide); }
.tarif_compare_recommended { background: rgba(198, 211, 28, 0.10); }
.tarif_compare_public thead .tarif_compare_recommended { background: rgba(198, 211, 28, 0.35) !important; }
.tarif_compare_public tbody tr:last-child th, .tarif_compare_public tbody tr:last-child td { border-bottom: 0; }

/* ══ Häufige Fragen: Erweiterungen von faq_* (app.css) ══════════════════ */
.faq_search_public { flex: none; max-width: 560px; min-height: 52px; margin: 28px auto 0; padding: 0 16px; border: 2px solid var(--q-medium); border-radius: 0; }
.faq_search_public:focus-within { border-color: var(--q-highlight-1); }
.faq_search_public input { font-size: 16px; }
.faq_search_public .ui_icon { color: var(--q-dark); opacity: 1; }
.faq_search_public .ltb-clear { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: var(--q-dark); }
.faq_public { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px; align-items: start; margin: 0; padding-bottom: 16px; }
.faq_topics_vertical { position: sticky; top: 110px; flex-direction: column; flex-wrap: nowrap; gap: 4px; margin: 0; }
.faq_topics_vertical .md-chip { justify-content: space-between; gap: 10px; min-height: 44px; padding: 10px 16px; border: 0; background: transparent; font-size: 14.5px; text-align: left; }
.faq_topics_vertical .md-chip:hover { background: var(--q-highlight-4); }
.faq_topics_vertical .md-chip.on, .faq_topics_vertical .md-chip.on:hover { background: var(--q-highlight-2); }
.faq_topics_vertical .md-chip-count { background: transparent; color: inherit; font-size: 12px; opacity: 0.9; }
.faq_group { margin-bottom: 40px; }
.faq_group_title { margin: 0 0 14px; color: var(--q-highlight-3); font-family: var(--font-display); font-size: 22px; font-weight: var(--w-bold); line-height: 1.3; }
.faq_public .faq_body { padding: 0; overflow: hidden; border: 1px solid var(--divider); border-radius: 24px; box-shadow: var(--shadow-soft); }
.faq_public .faq_list_item { border-bottom-color: var(--divider); }
.faq_public .faq_list_item_question { min-height: 56px; padding: 18px 24px; font-size: 15.5px; }
.faq_public .faq_list_item_question:hover { background: var(--q-highlight-4); color: var(--q-highlight-2); }
.faq_public .faq_list_item_answer { padding: 0 24px 20px; }
.faq_public .faq_list_item_text { max-width: none; font-size: 15px; font-weight: var(--w-light); }
.faq_public .faq_list_item_link { display: inline-block; margin-top: 10px; font-size: 14px; }
.faq_public .faq_empty { padding: 40px; color: var(--q-dark); font-size: 15px; }
.faq_more { margin: 16px 0 72px; }

/* ══ zugang: Einladung und Registrierung bestaetigen (BAL-232) ═══════════════
   Dieselben Bausteine wie die Registrierung (signup_header, signup_panel,
   signup_form, signup_done) - nur einspaltig und schmaler, weil es weder
   Schritte noch eine Kostenspalte gibt. */
.zugang { max-width: 680px; padding: 48px 0 72px; }
.zugang_form .signup_panel_description { margin-bottom: 18px; }
.zugang_controls { margin-top: 22px; }

/* ══ signup: Selbstregistrierung ════════════════════════════════════════ */
.signup { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; padding: 48px 0 72px; }
.signup_header { margin-bottom: 28px; }
.signup_title { margin: 10px 0 8px; color: var(--q-highlight-2); font-family: var(--font-display); font-size: clamp(28px, 3.4vw, 38px); font-weight: var(--w-bold); line-height: 1.2; }
.signup_description { margin: 0; color: var(--q-dark); font-size: 16px; font-weight: var(--w-light); line-height: 1.55; }

.signup_steps { display: flex; gap: 6px; margin: 0 0 28px; padding: 0; list-style: none; }
.signup_steps_item { display: flex; flex: 1; flex-direction: column; gap: 8px; min-width: 0; color: var(--q-dark); font-size: 12.5px; font-weight: var(--w-bold); line-height: 1.4; }
.signup_steps_item::before { content: ""; height: 4px; border-radius: 4px; background: var(--q-bright); }
.signup_steps_item_done::before { background: var(--q-highlight-3); }
.signup_steps_item_active { color: var(--q-highlight-2); }
.signup_steps_item_active::before { background: var(--q-highlight-1); }
.signup_steps_control { overflow: hidden; padding: 0; color: inherit; font: inherit; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.signup_steps_control:disabled { cursor: default; }

.signup_panel { padding: 32px; border: 1px solid var(--divider); border-radius: 32px; background: #fff; }
.signup_panel + .signup_panel { margin-top: 16px; }
.signup_panel_title { margin: 0 0 6px; color: var(--q-highlight-2); font-family: var(--font-display); font-size: 21px; font-weight: var(--w-bold); line-height: 1.3; }
.signup_panel_description { margin: 0 0 22px; color: var(--q-dark); font-size: 14.5px; font-weight: var(--w-light); line-height: 1.5; }
.signup_panel_link { margin-top: 18px; }
.signup_panel .content_form_item_group_caption { margin: 28px 0 12px; font-size: 12px; }
.signup_panel .content_form_item_group_caption:first-of-type { margin-top: 0; }

/* Auswahlkarten: setup_wizard_option (app.css) mit echtem Eingabefeld darin */
.signup_options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.signup_options_single { grid-template-columns: minmax(0, 1fr); }
.signup_options .setup_wizard_option { position: relative; gap: 14px; padding: 18px 20px; border: 2px solid var(--q-bright); border-radius: 24px; }
.signup_options .setup_wizard_option:hover { border-color: var(--q-medium); }
.signup_options .setup_wizard_option_active, .signup_options .setup_wizard_option_active:hover { border-color: var(--q-highlight-2); background: #fafbfc; }
.signup_options .setup_wizard_option:has(input:focus-visible) { box-shadow: var(--shadow-focus); }
.signup_options .setup_wizard_option input { position: absolute; opacity: 0; pointer-events: none; }
.signup_options .imp-radio { margin-top: 3px; }
/* `imp-radio` (app.css) als Ankreuzfeld: eckig, Häkchen nur im gewählten Zustand */
.signup_options .imp-check { border-radius: 6px; }
.signup_options .imp-check .ui_icon { opacity: 0; }
.signup_options .setup_wizard_option_active .imp-check { border-color: var(--q-highlight-2); background: var(--q-highlight-2); color: #fff; }
.signup_options .setup_wizard_option_active .imp-check .ui_icon { opacity: 1; }
.signup_options .setup_wizard_option_active .imp-radio:not(.imp-check) { border-color: var(--q-highlight-2); }
.signup_options .setup_wizard_option_text { display: flex; flex: 1; flex-direction: column; gap: 6px; }
.signup_options .setup_wizard_option_label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; color: var(--q-highlight-2); font-size: 15.5px; }
.signup_options .setup_wizard_option_description { margin: 0; color: var(--q-dark); font-size: 13.5px; font-weight: var(--w-light); line-height: 1.45; }
.signup_option_full { grid-column: 1 / -1; }
.signup_option_disabled { cursor: not-allowed !important; opacity: 0.55; }
.signup_option_info { cursor: default !important; border-color: var(--q-highlight-4) !important; background: var(--q-highlight-4) !important; }
.signup_option_pretext { color: var(--q-highlight-2); font-size: 12px; font-weight: var(--w-bold); line-height: 1.4; }
.signup_option_price { color: var(--q-highlight-2); font-family: var(--font-display); font-size: 16px; font-weight: var(--w-bold); white-space: nowrap; }
.signup_option_price small { font-family: var(--font-sans); font-size: 12px; font-weight: var(--w-light); }
.signup_options .tarif_plan_badge { position: absolute; top: -11px; right: 16px; }

.signup_seats { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-radius: 24px; background: var(--q-highlight-4); }
.signup_seats_text { flex: 1; min-width: 220px; color: var(--q-dark); font-size: 13.5px; font-weight: var(--w-light); line-height: 1.45; }
.signup_seats_text b { display: block; color: var(--q-highlight-2); font-size: 15px; font-weight: var(--w-bold); }
.signup .tarif_stepper { overflow: hidden; border-radius: 999px; background: #fff; }
.signup .tarif_stepper_control { width: 44px; height: 44px; font-size: 20px; }
.signup .tarif_stepper_control:hover:not(:disabled) { background: var(--q-highlight-4); }
.signup .tarif_stepper_value { min-width: 44px; color: var(--q-highlight-2); font-size: 15px; font-variant-numeric: tabular-nums; }

/* Felder: content_form_* (app.css), auf der Infoseite in Satzschreibung */
.signup_form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
.signup_form .ffield-full { grid-column: 1 / -1; }
.signup_form .content_form_item_caption { min-height: 0; }
.signup_form .content_form_item_caption label, .signup_form .content_form_item_caption .signup_label {
  color: var(--q-highlight-2); font-size: 13.5px; font-weight: var(--w-bold); letter-spacing: 0; line-height: 1.4; text-transform: none;
}
.signup_label_optional { color: var(--q-dark); font-weight: var(--w-light); }
.signup_form .content_form_input { min-height: 48px; padding: 11px 14px; font-size: 15px; }
.signup_form .content_form_input:focus { border-color: var(--q-highlight-1); outline: 0; }
.signup_form textarea.content_form_input { resize: vertical; }
.signup_form .ffield-hint { margin: 0; color: var(--q-dark); font-size: 12.5px; font-weight: var(--w-light); line-height: 1.4; }
/* Fehlerzustand: content_form_item_error (app.css, seit BAL-224 allgemein) */
.signup .fseg { flex-wrap: wrap; width: auto; margin: 0; border-radius: 24px; background: var(--q-highlight-4); border: 0; padding: 4px; }
.signup .fseg-btn { flex: 0 0 auto; min-height: 40px; padding: 8px 20px; }
.signup .fseg-btn.on, .signup .fseg-btn.on:hover { background: #fff; color: var(--q-highlight-2); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); }

.signup_check { display: flex; align-items: flex-start; gap: 12px; color: var(--q-dark); font-size: 14.5px; font-weight: var(--w-light); line-height: 1.5; cursor: pointer; }
.signup_check input { flex-shrink: 0; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--q-highlight-2); }
.signup_check_error { color: #a83232; }
.signup_check_message { display: block; margin-top: 4px; color: #a83232; font-size: 12.5px; font-weight: var(--w-regular); }
.signup_checks { display: grid; gap: 12px; margin-top: 22px; }
.signup_note { margin: 22px 0 0; }

.signup_review { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.signup_review_item { padding: 16px 18px; border-radius: 20px; background: var(--q-highlight-4); color: var(--q-dark); font-size: 14px; font-weight: var(--w-light); line-height: 1.5; overflow-wrap: anywhere; }
.signup_review_item_header { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.signup_review_item_title { margin: 0; color: var(--q-highlight-2); font-size: 12px; font-weight: var(--w-bold); letter-spacing: var(--tracking-xwide); line-height: 1.4; text-transform: uppercase; }
.signup_review_item_control { padding: 0; color: var(--link); font-size: 12.5px; font-weight: var(--w-bold); line-height: 1.4; }
.signup_review_item_control:hover { color: var(--link-hover); }

.signup_controls { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; }
.signup_message { margin: 16px 0 0; }
.signup_message:empty { display: none; }

.signup_done { padding: 56px 32px; text-align: center; }
.signup_done_icon { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin: 0 auto 20px; border-radius: 50%; background: var(--q-highlight-1); color: var(--q-highlight-2); }
.signup_done_icon .ui_icon { width: 30px; height: 30px; }
.signup_done_title { margin: 0 0 10px; color: var(--q-highlight-3); font-family: var(--font-display); font-size: 26px; font-weight: var(--w-bold); line-height: 1.3; }
.signup_done_text { max-width: 540px; margin: 0 auto 10px; color: var(--q-dark); font-size: 16px; font-weight: var(--w-light); line-height: 1.55; }
.signup_done .public_hero_controls { justify-content: center; margin-top: 24px; }

.signup_aside { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 20px; }
.signup_aside .public_origin { padding: 0 26px; }
/* Kostenaufstellung: tarif_summary (app.css) auf der Seitenspalte */
.signup_summary { position: static; padding: 26px; border: 0; border-radius: 32px; background: var(--q-highlight-4); }
.signup_summary_title { margin: 0 0 4px; color: var(--q-highlight-2); font-family: var(--font-display); font-size: 18px; font-weight: var(--w-bold); line-height: 1.3; }
.signup_summary_caption { margin: 0 0 16px; color: var(--q-dark); font-size: 13.5px; font-weight: var(--w-light); line-height: 1.45; }
.signup_summary .tarif_summary_line { font-size: 14px; }
.signup_summary .tarif_summary_line > span { font-variant-numeric: tabular-nums; }
.signup_summary .tarif_summary_line small { color: var(--q-dark); font-size: 12px; }
.signup_summary .tarif_summary_total { border-top-color: var(--q-bright); }
.signup_summary .tarif_summary_line_discount { color: var(--q-highlight-2); font-weight: var(--w-regular); }
.signup_summary .tarif_summary_line_muted { color: var(--q-dark); }
.signup_summary .tarif_summary_line_total { border-top: 0; padding-top: 0; font-size: 16px; }
.signup_summary .tarif_summary_line_total > span { font-family: var(--font-sans); font-size: 16px; }
.signup_trial { margin-top: 16px; padding: 14px 16px; border-radius: 20px; background: #fff; color: var(--q-dark); font-size: 13.5px; font-weight: var(--w-light); line-height: 1.5; }
.signup_trial b { color: var(--q-highlight-2); font-weight: var(--w-bold); }
.signup_summary_state { color: var(--q-dark); font-size: 13.5px; font-weight: var(--w-light); line-height: 1.5; }

/* ── Umbrüche ─────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .public_shell_header { gap: 16px; }
  .public_shell_nav_item { padding: 10px 12px; }
  .public_shell_nav_item::after { left: 12px; right: 12px; }
  .public_shell_controls .button_ghost { display: none; }
  /* Auf der Registrierung ist "Anmelden" der einzige Knopf im Kopf - er bleibt. */
  .public_shell_controls .public_shell_controls_login { display: inline-flex; }
  .public_shell_brand { gap: 14px; }
  .public_shell_brand_parent { height: 26px; }
  .public_shell_brand_name { font-size: 21px; }
  .tarif_plans_public { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .public_cards[data-spalten="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .public_cards[data-spalten="5"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .signup { grid-template-columns: minmax(0, 1fr); }
  .signup_aside, .faq_topics_vertical { position: static; }
}
@media (max-width: 900px) {
  .public_shell { border-radius: 28px; }
  .public_shell_wrap { padding: 0 22px; }
  .public_shell_header { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 14px 18px; }
  /* justify-self: stretch - als absolut gesetztes Rasterelement wuerde es sonst
     auf seine Inhaltsbreite geschrumpft und mittig gestellt. */
  .public_shell_nav { position: absolute; top: calc(100% + 6px); left: 12px; right: 12px; justify-self: stretch; display: none; flex-direction: column; margin: 0; padding: 10px; border-radius: 24px; background: #fff; box-shadow: var(--shadow-card); }
  .public_shell_nav_expanded { display: flex; }
  .public_shell_nav_item { padding: 13px 18px; border-radius: 18px; }
  .public_shell_nav_item::after { display: none; }
  /* Aufgeklapptes Menue (BAL-237): KEIN Seitenstreifen mehr - ein gerader
     Balken an einer Pille mit runden Ecken wirkte abgeschnitten. Die aktuelle
     Seite traegt den Lime-Ton als Flaeche (die Lime-Linie der breiten
     Navigation, in die Form der Pille uebersetzt), Hover und Fokus einen
     neutralen Grauton - beide bleiben unterscheidbar. */
  .public_shell_nav_item:hover, .public_shell_nav_item:focus-visible { background: var(--q-highlight-4); }
  .public_shell_nav_item_active, .public_shell_nav_item_active:hover, .public_shell_nav_item_active:focus-visible { background: rgba(198, 211, 28, 0.24); color: var(--q-highlight-2) !important; }
  .public_shell_menu_toggle { display: inline-flex; }
  .public_shell_controls_text { display: none; }
  .public_hero_grid, .public_split, .public_features, .public_galaxy, .faq_public, .tarif_addons_public,
  .public_cards, .public_cards[data-spalten="2"] { grid-template-columns: minmax(0, 1fr); }
  .public_galaxy_join { transform: rotate(90deg); }
  .faq_topics_vertical { flex-direction: row; overflow-x: auto; padding-bottom: 6px; }
  .faq_topics_vertical .md-chip { flex-shrink: 0; white-space: nowrap; }
  .public_chain { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .public_chain::before { top: 20px; bottom: 20px; left: 31px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--q-highlight-1), var(--q-highlight-3), var(--q-highlight-2)); }
  .public_chain_item { flex-direction: row; align-items: center; padding: 0; text-align: left; }
  .public_section { padding: 64px 0; }
  .public_hero { padding: 56px 0 48px; }
  .public_cta { margin: 0 14px 14px; padding: 48px 24px; }
}
@media (max-width: 560px) {
  .public_shell { min-height: calc(100vh - 12px); margin: 6px; }
  .public_shell_wrap { padding: 0 16px; }
  /* Mit .public_shell_brand davor: `.public_shell_brand img { display: block }`
     ist sonst spezifischer, und das Quantiz-Logo bliebe stehen. */
  .public_shell_brand .public_shell_brand_parent, .public_shell_brand .public_shell_brand_separator { display: none; }
  .public_shell_brand_name { margin-left: -4px; }
  .public_shell_controls .button { padding: 10px 16px; font-size: 13.5px; }
  .tarif_plans_public, .public_cards[data-spalten="4"], .signup_options, .signup_form, .signup_review, .public_contrast { grid-template-columns: minmax(0, 1fr); }
  .public_cards[data-spalten="5"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tarif_addons_public .tarif_addon { grid-template-columns: auto minmax(0, 1fr); }
  .tarif_addons_public .tarif_addon_price { grid-column: 2; text-align: left; }
  .signup_panel { padding: 22px 18px; border-radius: 24px; }
  .signup_steps_item { gap: 0; font-size: 0; }
  .signup_steps_item_active { flex: 3; gap: 8px; font-size: 12.5px; }
  .public_events { padding: 8px 18px; border-radius: 28px; }
  .public_events_item { flex-wrap: wrap; }
  .public_events_item_tag { margin-left: 32px; }
  .public_preview { padding: 16px; border-radius: 28px; }
  .public_features_item { padding: 26px 22px 24px; border-radius: 28px; }
  .public_shell_footer { padding: 20px 18px; }
}
/* Sehr schmale Telefone (360 px): Marke und "Kostenlos testen" passen sonst
   nicht nebeneinander - gemessen 11 px Ueberlappung. */
@media (max-width: 400px) {
  .public_shell_header { gap: 8px; padding: 12px 14px; }
  .public_shell_brand { gap: 10px; }
  .public_shell_brand_name { font-size: 19px; }
  .public_shell_controls { gap: 6px; }
  .public_shell_controls .button { padding: 9px 12px; font-size: 13px; }
}
@media (max-width: 340px) {
  .public_shell_brand_name { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.public_page { scroll-behavior: auto; }
  .public_cta { animation: none; }
  .public_shell_nav_item .ui_icon, .public_shell_nav_item::after { transition: none; }
}

/* Kontrast: Der Entwurf setzt die Vorzeile der Auswahlkarten und die
   Gruppenzeilen des Vergleichs in Petrol (#15a5b5) - auf Weiss 2,97 : 1, fuer
   11-12 px zu wenig. Hier Navy (11,9 : 1). Die grossen Titel bleiben Petrol
   (Entwurf); sie liegen knapp unter 3 : 1, offen in BAL-221. */

/* ── Hilfsklassen ─────────────────────────────────────────────────────── */
/* Nur für Hilfsmittel: Statusmeldungen der Suche, Beschriftungen ohne Platz. */
.public_visually_hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.faq_groups { min-width: 0; }