/*
 * home.css - Stylesheet ausschliesslich fuer die Startseite (resources/views/search.blade.php).
 *
 * Wird nur dort ueber @push('styles') geladen und liegt im <head> NACH public/css/search.css
 * (siehe @stack('styles') in resources/views/layouts/app.blade.php). Die <body>-Klasse
 * "page-home" wird ebenfalls nur dort gesetzt (@section('body_class', 'page-home')).
 *
 * Regel fuer diese Datei: jede Regel beginnt mit "body.page-home" oder betrifft ein Element,
 * das nur auf der Startseite existiert (.hero, .value-bar, ...). Dadurch bleiben Login,
 * Dashboard, Admin, Checkout, "Ueber uns" und der Wissensbereich unveraendert, obwohl sie
 * dasselbe public/css/search.css nutzen.
 *
 * Eigene Farb-Tokens muessen hier einen eigenen prefers-color-scheme-Block bekommen, da die
 * :root-Werte aus search.css sonst den Dark Mode der Startseite ueberschreiben wuerden.
 *
 * Stand UX-Ueberarbeitung, Schritt 2 (Teilfreigabe): Design Tokens (Marine-Akzent nur Startseite),
 * Hintergrund, Typografie, Hero-Layout, Suchfeld, ruhiger Gratis-Credit-Hinweis. NICHT enthalten:
 * Produktvorschau, Trust-Bar-Umbau, Zielgruppenkarten, Pricing, Footer-Feinschliff.
 */

/* ---------------------------------------------------------------------------------------------
   1. Design Tokens (nur Startseite)
   Der Marine-Akzent #1F4E79 gilt seit 2026-10-08 site-weit (:root in search.css). Hier bleiben nur
   die Neutralfarben der Startseite (Hintergrund, Rahmen, Text, Schatten) - vorerst nicht site-weit.
   --------------------------------------------------------------------------------------------- */
body.page-home {
    --color-bg: #ffffff;
    --color-bg-alt: #edf1f6;
    --color-border: #dde3eb;
    --color-text: #111a2b;
    --color-text-muted: #556073;
    --shadow-sm: 0 1px 2px rgba(17, 26, 43, 0.05);
    --shadow-md: 0 1px 2px rgba(17, 26, 43, 0.04), 0 6px 20px rgba(17, 26, 43, 0.06);
    /* Gate 3: vertikaler Abstand der Baender (Desktop 64, Tablet ~48, Mobile 40). */
    --space-band: clamp(40px, 4.5vw, 64px);
    /* Prozess-Band "So funktioniert's": blauer als das Hellblau der anderen Baender, weicher als das Footer-Navy
       (--surface-navy bleibt unveraendert, der Footer nutzt es). Weisse Ueberschrift 5,4:1, weisse Karten 5,9:1. */
    --surface-process: #326895;
}

@media (prefers-color-scheme: dark) {
    body.page-home {
        --surface-process: #24465f;
        --color-bg: #0b0e13;
        --color-bg-alt: #10151c;
        --color-border: #252c37;
        --color-text: #f1f4f8;
        --color-text-muted: #a3adbb;
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.35);
    }
}

/* Der Footer folgt seit dem Design-Refresh (Gate 1) zentral den Navy-Tokens aus search.css. */

/* ---------------------------------------------------------------------------------------------
   2. Hero: linksbuendig, ruhige Typografie (Instrument Sans bleibt)
   .hero__aside enthaelt die Produktvorschau (siehe Abschnitt 6).
   --------------------------------------------------------------------------------------------- */
/* Design-Refresh (Gate 2b): Hero auf --surface-tint, zweispaltig ca. 55/45, Hoehe ergibt sich aus dem
   Inhalt (keine feste Hoehe). Balance-Fix: Header-Linie und Hero-Rand entfallen auf der Startseite - der
   Flaechenwechsel Header (weiss) / Hero (Tint) / weisses Band traegt die Trennung. Die Tint-Baender
   behalten ihre Linien (siehe Abschnitt 10). */
body.page-home .site-header {
    border-bottom: 0;
}

body.page-home .hero {
    padding-block: clamp(28px, 3vw, 40px) clamp(28px, 3vw, 36px);
    background: var(--surface-tint);
    text-align: left;
}

body.page-home .hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
    gap: 64px;
    align-items: center;
}

/* Genf-Akzent (Prototyp): ein zurueckhaltendes Seeufer-Foto am unteren Hero-Rand, nur Desktop (ab 901 px).
   Reines Atmosphaere-Element: dekoratives CSS-Hintergrundbild (kein <img>, kein Alt-Text noetig), per Maske
   nach links und oben in die Tint-Flaeche ausgeblendet - Text, Suche und Vorschaukarte liegen darueber auf
   ruhigem Grund (der Hero bekommt dafuer einen eigenen Stapelkontext). Unter 901 px wird das Bild gar nicht
   erst geladen. Hoehe und Layout des Heros bleiben unveraendert (absolut positioniert, kein CLS). */
@media (min-width: 901px) {
    body.page-home .hero {
        position: relative;
        z-index: 0;
    }

    body.page-home .hero::before {
        content: "";
        position: absolute;
        z-index: -1;
        inset: auto 0 0 0;
        height: 270px;
        background: url("../images/geneva-lakefront.webp") right -70px bottom / cover no-repeat;
        opacity: 0.45;
        filter: contrast(1.05);
        /* multiply statt normalem Ueberblenden: Dunkles bleibt dunkel, Helles geht in die Hero-Flaeche ueber - das
           Foto wirkt weniger milchig, ohne dass die Deckkraft weiter steigen muss. Im Dark Mode wieder normal. */
        mix-blend-mode: multiply;
        pointer-events: none;
        -webkit-mask-image: linear-gradient(to right, transparent 28%, #000 64%), linear-gradient(to bottom, transparent, #000 14%);
        mask-image: linear-gradient(to right, transparent 28%, #000 64%), linear-gradient(to bottom, transparent, #000 14%);
        -webkit-mask-composite: source-in;
        mask-composite: intersect;
    }
}

/* 901-1100 px: die Vorschaukarte liegt ueber dem rechten Bildteil - die Maske blendet das Foto frueher ein,
   damit unter und neben den Karten weiterhin etwas Genf wahrnehmbar bleibt. Text und Karten bleiben unveraendert. */
@media (min-width: 901px) and (max-width: 1100px) {
    body.page-home .hero::before {
        -webkit-mask-image: linear-gradient(to right, transparent 8%, #000 66%), linear-gradient(to bottom, transparent, #000 14%);
        mask-image: linear-gradient(to right, transparent 8%, #000 66%), linear-gradient(to bottom, transparent, #000 14%);
    }
}

/* Ab 1235 px bleibt die Genf-Flaeche rechts verankert und hoechstens 1234 px breit. Bei 270 px Hoehe ist das genau
   die Breite, bei der das Bild (1600x350) ohne Zuschnitt oben passt; breitere Flaechen wuerden das Foto per
   cover weiter vergroessern und den Saleve oben aus der Flaeche schneiden (bei 1880 px ca. 85 px). Die Masken
   beziehen sich auf diese Flaeche, links entsteht kein harter Rand. Das Hero-Layout bleibt unveraendert. */
@media (min-width: 1235px) {
    body.page-home .hero::before {
        inset: auto 0 0 auto;
        width: 1234px;
    }
}

@media (min-width: 901px) and (prefers-color-scheme: dark) {
    body.page-home .hero::before {
        opacity: 0.2;
        mix-blend-mode: normal;
    }
}

body.page-home .hero__main {
    max-width: 720px;
}

body.page-home .hero__eyebrow {
    margin: 0 0 10px;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent);
}

body.page-home .hero h1 {
    font-size: clamp(2rem, 1.45rem + 2.2vw, 3.25rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.028em;
    margin: 0 0 14px;
    text-wrap: balance;
}

body.page-home .hero .lead {
    font-size: 1.0625rem;
    line-height: 1.55;
    max-width: 56ch;
    margin: 0 0 20px;
}

/* ---------------------------------------------------------------------------------------------
   3. Suchfeld
   --------------------------------------------------------------------------------------------- */
body.page-home .hero .search-card {
    max-width: 720px;
    margin-inline: 0;
}

body.page-home .hero .search-card .field-label {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
    margin-bottom: 8px;
}

body.page-home .hero .search-field__row {
    border-radius: 18px;
    padding: 12px;
    gap: 12px;
    border-color: color-mix(in srgb, var(--color-accent) 28%, var(--color-border));
    box-shadow: 0 1px 2px rgba(17, 26, 43, 0.05), 0 16px 40px -10px rgba(31, 78, 121, 0.24);
}

body.page-home .hero .search-field__row:focus-within {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 18%, transparent);
}

body.page-home .hero .search-card .search-input {
    font-size: 1.1875rem;
    padding: 20px 20px;
}

body.page-home .hero .search-button {
    border-radius: 10px;
    min-height: 62px;
    padding-inline: 36px;
    font-size: 1.0625rem;
    font-weight: 600;
}

/* ---------------------------------------------------------------------------------------------
   4. Gratis-Credit-Hinweis: ruhiger Hilfetext unter dem Suchfeld (vorher gelbe Warnbox)
   --------------------------------------------------------------------------------------------- */
body.page-home .guest-hint {
    background: none;
    border: 0;
    border-radius: 0;
    color: var(--color-text-muted);
    padding: 0;
    margin: 12px 0 0;
    max-width: 62ch;
    font-size: 0.9375rem;
    line-height: 1.55;
}

body.page-home .guest-hint strong {
    color: var(--color-text);
    font-weight: 600;
}

body.page-home .guest-hint a {
    color: var(--color-accent);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

body.page-home .guest-hint a:hover {
    color: var(--color-accent-hover);
}

body.page-home .hero .alert-banner {
    max-width: 720px;
    margin-inline: 0;
}

/* ---------------------------------------------------------------------------------------------
   6. Produktvorschau (Nachbau des PDF-Berichts, rein dekorativ, als "Beispiel" gekennzeichnet)
   Bewusst kleiner und leiser als die Suche: ein weisses Blatt, feine Linien, kein Dashboard.
   --------------------------------------------------------------------------------------------- */
/* Design-Refresh (Gate 2c): die Vorschau ist das rechte Hero-Visual - weisse Karte (Radius --radius-lg),
   ruhiger Schatten, "Beispiel"-Kennzeichnung gut sichtbar im Kartenkopf. Keine echten Daten, kein
   Prueferfolg-Versprechen. Bedienbar sind nur die beiden Pfeil-Buttons und der Link zum Muster-PDF (Fusszeile). */
body.page-home .hero__aside {
    align-self: center;
    justify-self: end;
    position: relative;
    width: 100%;
    max-width: 460px;
}

body.page-home .report-preview {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 26px 26px 20px;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-text);
    cursor: default;
}

body.page-home .report-preview__badge {
    display: inline-block;
    margin: 0 0 16px;
    background: var(--surface-tint);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

body.page-home .report-preview__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--color-border);
}

body.page-home .report-preview__logo {
    font-weight: 700;
    font-size: 0.9375rem;
    letter-spacing: -0.01em;
}

body.page-home .report-preview__logo-accent {
    color: var(--color-accent);
}

body.page-home .report-preview__doc {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    text-align: right;
}

body.page-home .report-preview__meta {
    margin: 0;
    padding: 6px 0;
}

body.page-home .report-preview__row {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border);
}

body.page-home .report-preview__row dt {
    color: var(--color-text-muted);
}

body.page-home .report-preview__row dd {
    margin: 0;
}

/* Quellen: dezenter Fliesstext "SECO · EU · OFAC · UK · UN" - keine Haken und keine Badges, damit nicht der
   Eindruck entsteht, die Quellen haetten die Person oder Firma "freigegeben". */
body.page-home .report-preview__sources {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 2px 8px;
    font-weight: 500;
    color: var(--color-text-muted);
}

/* Trennpunkt haengt hinten an (nicht vorn am Folgeeintrag), damit bei einem Umbruch keine Zeile mit "·" beginnt. */
body.page-home .report-preview__sources li {
    white-space: nowrap;
}

body.page-home .report-preview__sources li:not(:last-child)::after {
    content: "\00B7";
    margin-left: 8px;
}

body.page-home .report-preview__ref {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
}

/* Ergebnis: neutrale Flaeche, nur das kleine Status-Icon traegt das (gedaempfte) Gruen. */
body.page-home .report-preview__status {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-top: 16px;
    padding: 14px 16px;
    background: var(--surface-tint);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    color: var(--color-text);
}

body.page-home .report-preview__status svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    color: var(--color-success-text);
}

body.page-home .report-preview__status strong,
body.page-home .report-preview__status span {
    display: block;
}

body.page-home .report-preview__status span {
    color: var(--color-text-muted);
}

/* Zweiter Zustand "mit Treffern": gleiche Karte, abgesetzt durch die vorhandenen Danger-Tokens (kein Freigabe-Gruen). */
body.page-home .report-preview__status--hit {
    background: var(--color-danger-bg);
    border-color: var(--color-danger-border);
}

body.page-home .report-preview__status--hit svg,
body.page-home .report-preview__status--hit strong {
    color: var(--color-danger-text);
}

/* Wechsel zwischen "keine Treffer" und "mit Treffern": beide Zustaende liegen uebereinander in derselben Grid-Zelle, die
   Hoehe richtet sich nach dem hoeheren - daher kein Layoutsprung (CLS). Der inaktive Zustand ist per visibility auch
   fuer Hilfstechnologien ausgeblendet. Grundzustand = "keine Treffer" (gruen); "mit Treffern" ist nur waehrend der
   Animation bzw. nach manuellem Wechsel sichtbar. */
body.page-home .report-preview__states,
body.page-home .report-preview__results {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

body.page-home .report-preview__state {
    grid-area: 1 / 1;
}

body.page-home .report-preview__state--hit {
    opacity: 0;
    visibility: hidden;
}

/* Dreimal hin und her, danach bleibt die Karte auf "keine Treffer" (Grundzustand). */
body.page-home .report-preview__state--clear {
    animation: report-preview-clear 12s ease-in-out 3;
}

body.page-home .report-preview__state--hit {
    animation: report-preview-hit 12s ease-in-out 3;
}

/* Nie beide Zustaende gleichzeitig sichtbar: erst wird der eine ausgeblendet, dann der andere eingeblendet (kurze Pause
   dazwischen), damit sich Texte nie ueberlagern. */
@keyframes report-preview-clear {
    0%, 42% { opacity: 1; visibility: visible; }
    45%, 94% { opacity: 0; visibility: hidden; }
    97%, 100% { opacity: 1; visibility: visible; }
}

@keyframes report-preview-hit {
    0%, 48% { opacity: 0; visibility: hidden; }
    51%, 89% { opacity: 1; visibility: visible; }
    92%, 100% { opacity: 0; visibility: hidden; }
}

/* Manueller Wechsel (Pfeil-Buttons, public/js/report-preview.js): Animation aus, genau ein Zustand sichtbar. */
body.page-home .report-preview[data-manual] .report-preview__state {
    animation: none;
    opacity: 0;
    visibility: hidden;
}

body.page-home .report-preview[data-manual][data-state="clear"] .report-preview__state--clear,
body.page-home .report-preview[data-manual][data-state="hit"] .report-preview__state--hit {
    opacity: 1;
    visibility: visible;
}

/* Ohne Animation (prefers-reduced-motion) bleibt der Grundzustand "keine Treffer"; von Hand ist der Wechsel weiter moeglich. */
@media (prefers-reduced-motion: reduce) {
    body.page-home .report-preview__state--clear,
    body.page-home .report-preview__state--hit {
        animation: none;
    }
}

/* Ergebnisfeld mit den beiden kleinen Pfeil-Buttons links und rechts. Die Spalten fuer die Buttons sind IMMER reserviert
   (feste Breite wie .report-preview__nav) und das Ergebnisfeld liegt ausdruecklich in der Mitte: so bleibt die Breite des
   Ergebnisfelds mit und ohne die per JavaScript eingeblendeten Buttons gleich - kein Layoutsprung beim Laden des Skripts. */
body.page-home .report-preview__stage {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 32px;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
}

body.page-home .report-preview__stage .report-preview__results {
    grid-column: 2;
}

body.page-home .report-preview__stage .report-preview__status {
    margin-top: 0;
}

body.page-home .report-preview__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    color: var(--color-text-muted);
    cursor: pointer;
}

body.page-home .report-preview__nav[hidden] {
    display: none;
}

body.page-home .report-preview__nav svg {
    width: 16px;
    height: 16px;
}

body.page-home .report-preview__nav:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

body.page-home .report-preview__nav:focus-visible,
body.page-home .report-preview__foot:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Fusszeile = Link zum Muster-PDF (sichtbarer Linkstil auf der weissen Karte). */
body.page-home .report-preview__foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    color: var(--color-accent);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.page-home .report-preview__foot svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--color-accent);
}

/* ---------------------------------------------------------------------------------------------
   7. Trust-Bar (.value-bar): Inhalt unveraendert, nur Optik - durchgehende Leiste mit Rand
   --------------------------------------------------------------------------------------------- */
body.page-home .value-bar {
    padding-block: 0;
    margin-bottom: 56px;
    border-bottom: 0;
}

body.page-home .value-bar__list {
    grid-template-columns: 1.35fr repeat(4, 1fr);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 20px 8px;
}

body.page-home .value-bar__item {
    align-items: center;
    padding-inline: 20px;
}

body.page-home .value-bar__item:first-child {
    padding-inline-start: 20px;
}

body.page-home .value-bar__icon {
    width: 18px;
    height: 18px;
    margin-top: 0;
}

body.page-home .value-bar__text {
    font-size: 0.875rem;
    font-weight: 500;
}

/* ---------------------------------------------------------------------------------------------
   8. Abschnitte unterhalb des Hero: Zielgruppen, Preise, Abschluss-CTA, Fachwissen
   Gemeinsames System: Flaeche --color-surface, 1-px-Rand, Radius 14, ruhiger Schatten, keine
   Hover-Effekte auf nicht klickbaren Karten. Inhalt und Markup unveraendert. Alle Selektoren
   haengen an body.page-home, da dieselben Klassen auf Ueber-uns/Wissensbereich existieren.
   --------------------------------------------------------------------------------------------- */
/* Gate 3d: alle Abschnitts-H2 der Startseite einheitlich (auch So funktioniert's und FAQ). Ausnahme: die zwei
   Kernaussagen in .problem-solution bleiben bewusst kleiner (parallele Aussagen, kein Abschnittstitel). */
body.page-home .how-it-works h2,
body.page-home .audiences h2,
body.page-home .pricing-section h2,
body.page-home .faq h2,
body.page-home .closing-cta h2,
body.page-home .knowledge-home h2 {
    font-size: clamp(1.4375rem, 1.25rem + 0.7vw, 1.75rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

body.page-home .how-it-works h2,
body.page-home .faq h2 {
    margin-bottom: 32px;
}

body.page-home .audiences h2 {
    margin-bottom: 32px;
}

/* Zielgruppen */
body.page-home .audiences {
    padding-block: 16px 56px;
}

/* Gate 3e: Karten-System der Startseite - Radius --radius-lg (16), Raster-Abstand 24; die FAQ-Eintraege
   sind Zeilenelemente und bewusst kleiner (12). */
body.page-home .steps,
body.page-home .audiences__grid {
    gap: 24px;
}

body.page-home .step {
    border-radius: var(--radius-lg);
}

/* "So funktioniert's" hat vier Schritte (Name, E-Mail bestaetigen, Pruefung, Bericht): vier Spalten, auf Tablets 2x2,
   auf Smartphones untereinander (search.css setzt dort bereits 1 Spalte, hier wegen der hoeheren Spezifitaet erneut). */
body.page-home .steps {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 900px) {
    body.page-home .steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    body.page-home .steps {
        grid-template-columns: 1fr;
    }
}

/* "So funktioniert's" als blaues Prozess-Band: --surface-process (nur Startseite, siehe Abschnitt 1) mit heller
   Ueberschrift (--on-navy). Nur dieses eine Band; Kanten bleiben hart, keine Gradients, Karten unveraendert. Gewaehlt
   ueber :has(> .how-it-works), damit das Band-Markup unveraendert bleibt. Die helle Ueberschrift haengt am selben
   :has() - ohne :has()-Unterstuetzung bleiben Band und Ueberschrift beide im bisherigen Hellblau/Dunkel (kein heller
   Text auf hellem Grund). */
body.page-home .band--tint:has(> .how-it-works) {
    background: var(--surface-process);
    border-block-color: var(--surface-process);
}

body.page-home .band--tint:has(> .how-it-works) .how-it-works h2 {
    color: var(--on-navy);
}

body.page-home .faq__item {
    border-radius: 12px;
}

body.page-home .audience-card {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 26px 24px;
    gap: 8px;
}

body.page-home .audience-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 8px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--color-accent) 9%, var(--color-surface));
    border: 1px solid color-mix(in srgb, var(--color-accent) 16%, var(--color-surface));
}

body.page-home .audience-card__icon svg {
    width: 22px;
    height: 22px;
}

body.page-home .audience-card__title {
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

body.page-home .audience-card__body {
    line-height: 1.55;
}

/* Preise */
body.page-home .pricing-section-wrap {
    padding-block: 8px 64px;
}

/* Gate 3e: keine eigene Box mehr - das Tint-Band traegt die Flaeche, die weissen Preis-Karten stehen direkt darauf. */
body.page-home .pricing-section {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
}

body.page-home .pricing-section__lead {
    margin-bottom: 40px;
    line-height: 1.6;
}

body.page-home .price-cards {
    gap: 24px;
    align-items: stretch;
}

body.page-home .price-card {
    border-radius: var(--radius-lg);
    padding: 32px 28px 28px;
}

/* mittlere Karte (Guthabenpakete): kaum sichtbare Betonung - staerkerer Rand und etwas Tiefe,
   bewusst ohne Badge, Band oder "Empfohlen"-Hinweis. */
body.page-home .price-card:nth-child(2) {
    border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-border));
    box-shadow: var(--shadow-md);
}

body.page-home .price-card__name {
    letter-spacing: 0;
    margin-bottom: 16px;
}

body.page-home .price-card__price {
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: -0.025em;
}

body.page-home .price-card__unit {
    margin-bottom: 24px;
}

body.page-home .price-card__features {
    gap: 12px;
    margin-bottom: 28px;
}

body.page-home .price-card__features li {
    line-height: 1.45;
}

body.page-home .price-card__cta {
    display: block;
    border-radius: 10px;
    padding: 13px 22px;
}

/* Buttons der Startseite (Preise, Abschluss-CTA): einheitlicher, ruhiger Radius */
body.page-home .cta-button {
    border-radius: 10px;
}

body.page-home .cta-button--secondary {
    border-color: color-mix(in srgb, var(--color-text) 16%, var(--color-border));
}

/* Abschluss-CTA (Gate 3e): steht flach auf dem Tint-Band - die fruehere eigene Pseudo-Element-Flaeche entfaellt. */
body.page-home .closing-cta p {
    line-height: 1.6;
    margin-bottom: 28px;
}

body.page-home .closing-cta .cta-button {
    padding: 14px 28px;
    font-size: 1rem;
}

/* Fachwissen */
body.page-home .knowledge-home {
    padding-block: 16px 72px;
}

body.page-home .knowledge-home__audience {
    margin-bottom: 32px;
}

body.page-home .knowledge-grid {
    gap: 24px;
}

body.page-home .knowledge-card {
    border-radius: var(--radius-lg);
    padding: 26px 24px;
}

body.page-home .knowledge-card__category {
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    color: var(--color-accent);
    margin-bottom: 10px;
}

body.page-home .knowledge-card__title {
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 10px;
}

body.page-home .knowledge-card__excerpt {
    line-height: 1.55;
    margin-bottom: 16px;
}

body.page-home .knowledge-card__link {
    text-decoration: none;
}

body.page-home .knowledge-card__link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.page-home .knowledge-home__all a {
    text-decoration: none;
}

body.page-home .knowledge-home__all a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------------------------------------------------------------------------------------------
   10. Baender (Design-Refresh Gate 3): Full-Bleed-Flaechen hinter den bestehenden Sections der Startseite.
   Ein Band ist ein schlichtes <div class="band"> bzw. <div class="band band--tint"> AUSSERHALB der
   unveraenderten <section class="container ...">-Elemente (der Container sitzt auf der Section selbst und
   kann deshalb keine browserbreite Flaeche tragen). Keine Gradients, clip-path oder 100vmax-Tricks:
   harte, saubere Flaechenwechsel Weiss/Tint. Nur auf der Startseite (body.page-home) - Gate 4 uebernimmt
   das Muster ggf. fuer weitere Seiten.
   --------------------------------------------------------------------------------------------- */
body.page-home .band {
    padding-block: var(--space-band);
}

body.page-home .band--tint {
    background: var(--surface-tint);
    border-block: 1px solid var(--color-border);
}

/* Die Sections im Band verlieren ihr eigenes vertikales Padding (das Band uebernimmt den Abstand). */
body.page-home .band > .container {
    padding-block: 0;
}

body.page-home .band > :last-child {
    margin-bottom: 0;
}

/* Trefferbereich (nach einer Suche sichtbar): behaelt Abstand zum folgenden Inhalt im selben Band. */
body.page-home .band > .results-section {
    padding-bottom: 40px;
}

/* Footer: seit dem Design-Refresh (Gate 1) zentral in public/css/search.css (.site-footer*), keine
   Startseiten-Variante mehr. */

/* ---------------------------------------------------------------------------------------------
   5. Responsive
   --------------------------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    body.page-home .hero__grid {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        gap: 40px;
    }

    body.page-home .value-bar__list {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 20px;
    }

    body.page-home .value-bar__item:nth-child(3n+1) {
        border-inline-start: none;
        padding-inline-start: 20px;
    }
}

@media (max-width: 900px) {
    body.page-home .hero {
        padding-block: 48px 44px;
    }

    body.page-home .hero__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }

    body.page-home .hero__aside {
        justify-self: start;
        max-width: 440px;
    }

}

@media (max-width: 560px) {
    /* Design-Refresh (Gate 2b): die neue Eyebrow-Zeile darf die Suche auf Smartphones nicht weiter nach
       unten schieben - Abstaende oben/Eyebrow/Lead gleichen die zusaetzliche Zeile aus. */
    body.page-home .hero {
        padding-block: 20px 32px;
    }

    body.page-home .hero__eyebrow {
        font-size: 0.75rem;
        line-height: 1.3;
        margin-bottom: 6px;
    }

    body.page-home .hero h1 {
        margin-bottom: 12px;
    }

    body.page-home .hero .lead {
        font-size: 1.0625rem;
        line-height: 1.5;
        margin-bottom: 20px;
    }

    body.page-home .hero .search-field__row {
        padding: 6px;
    }

    body.page-home .hero .search-button {
        width: 100%;
    }

    body.page-home .hero__grid {
        gap: 28px;
    }

    body.page-home .price-card {
        padding: 26px 22px 24px;
    }

    body.page-home .audience-card,
    body.page-home .knowledge-card {
        padding: 22px 20px;
    }

    /* Kompakte Vorschau: Kopf, Suchbegriff, Ergebnis und der Link zum Muster-PDF - ohne Zeitpunkt, Referenz und Quellenzeile. */
    body.page-home .report-preview {
        padding: 18px 18px 16px;
        font-size: 0.8125rem;
    }

    body.page-home .report-preview__badge {
        margin-bottom: 12px;
    }

    body.page-home .report-preview__row:not(:first-child) {
        display: none;
    }

    body.page-home .report-preview__row:first-child {
        border-bottom: 0;
    }

    body.page-home .report-preview__stage {
        margin-top: 8px;
    }

    body.page-home .report-preview__status {
        padding: 12px 14px;
    }

    body.page-home .value-bar__list {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 18px;
        padding: 18px 16px;
    }

    body.page-home .value-bar__item,
    body.page-home .value-bar__item:nth-child(3n+1) {
        border: 0;
        padding-inline: 0;
    }

    body.page-home .value-bar__item:first-child {
        grid-column: 1 / -1;
    }
}

/* Trust-Bar im Tablet-Bereich (561-840 px): mit drei Spalten bricht der erste Eintrag (laengste Zeile) um.
   Wie auf dem Smartphone steht er ueber die volle Breite, die uebrigen vier folgen in zwei Spalten. */
@media (min-width: 561px) and (max-width: 840px) {
    body.page-home .value-bar__list {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 18px;
        padding: 18px 16px;
    }

    body.page-home .value-bar__item,
    body.page-home .value-bar__item:nth-child(3n+1) {
        border: 0;
        padding-inline: 8px;
    }

    body.page-home .value-bar__item:first-child {
        grid-column: 1 / -1;
    }
}

/* Design-Refresh (Gate 2c): die Vorschau ist reine Dekoration und nie wichtiger als die Suche - auf sehr
   kleinen bzw. niedrigen Smartphone-Viewports entfaellt sie ganz. */
@media (max-width: 560px) and (max-height: 700px), (max-width: 339px) {
    body.page-home .hero__aside {
        display: none;
    }
}

/* Design-Refresh (Gate 2b): niedrige Desktop-Viewports (z. B. 1366x768 mit Consent-Bar) - Suchfeld und
   Button muessen oberhalb der Bottom-Bar bleiben. Verkleinert nur Abstaende, keine Inhalte. */
@media (min-width: 901px) and (max-height: 700px) {
    body.page-home .hero {
        padding-block: 24px 28px;
    }

    body.page-home .hero__eyebrow {
        margin-bottom: 8px;
    }

    body.page-home .hero h1 {
        margin-bottom: 12px;
    }

    body.page-home .hero .lead {
        margin-bottom: 18px;
    }
}

/* ---------------------------------------------------------------------------------------------
   Gast-Erstpruefung (2026-10-28): E-Mail-Schritt und Bestaetigung unter dem Suchfeld. Nutzt die
   Suchfeld-Optik (.search-card/.search-field__row) und bleibt dem Hero-Layout untergeordnet.
   --------------------------------------------------------------------------------------------- */
body.page-home .hero .guest-email {
    max-width: 720px;
    margin: 20px 0 0;
}

body.page-home .hero .guest-email[hidden] {
    display: none;
}

body.page-home .hero .guest-email__title {
    margin: 0 0 6px;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-text);
}

body.page-home .hero .guest-email__body {
    margin: 0 0 14px;
    max-width: 62ch;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--color-text-muted);
}

body.page-home .hero .guest-email__query {
    margin: 0 0 14px;
    font-size: 0.9375rem;
    color: var(--color-text-muted);
}

body.page-home .hero .guest-email__query strong {
    color: var(--color-text);
    font-weight: 600;
    overflow-wrap: anywhere;
}

body.page-home .hero .guest-email__back {
    margin-left: 8px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

body.page-home .hero .guest-email--sent {
    padding: 16px 18px;
    border: 1px solid color-mix(in srgb, var(--color-accent) 28%, var(--color-border));
    border-radius: 14px;
    background: var(--color-bg-alt);
}

body.page-home .hero .guest-email--sent .guest-email__body {
    margin-bottom: 0;
}