/*
 * premium.css - Veredelungsschicht fuer alle oeffentlichen Seiten (Startseite, Preise, Ueber uns, Wissensbereich,
 * Login/Registrierung, Rechtstexte). Wird NUR eingebunden, wenn kein App-Shell aktiv ist (siehe
 * resources/views/layouts/app.blade.php), der eingeloggte Bereich bleibt unberuehrt.
 *
 * Prinzip: Markup, Texte und Marke (Marine, Instrument Sans) bleiben unveraendert. Dieses Stylesheet liegt nach
 * search.css/home.css und ergaenzt nur Tiefe (mehrlagige Schatten), Flaechenverlaeufe, Typografie, Bewegung und
 * Zustaende. Alle Farben laufen ueber die bestehenden Tokens, der Dark Mode folgt automatisch.
 * Bewegung ist durchgehend an prefers-reduced-motion gebunden.
 */

/* ---------------------------------------------------------------------------------------------
   1. Tokens und Grundlagen
   --------------------------------------------------------------------------------------------- */
:root {
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    /* Mehrlagige Schatten: eng + weich, leicht bläulich statt grau - wirkt teurer als ein einzelner Schatten. */
    --elev-1: 0 1px 2px rgba(16, 36, 62, 0.06), 0 2px 6px -2px rgba(16, 36, 62, 0.06);
    --elev-2: 0 1px 2px rgba(16, 36, 62, 0.05), 0 8px 16px -6px rgba(16, 36, 62, 0.1), 0 18px 36px -12px rgba(16, 36, 62, 0.1);
    --elev-3: 0 2px 4px rgba(16, 36, 62, 0.05), 0 14px 28px -8px rgba(16, 36, 62, 0.14), 0 36px 64px -20px rgba(31, 78, 121, 0.22);
    --hairline: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    --accent-grad: linear-gradient(180deg, color-mix(in srgb, var(--color-accent) 86%, #fff) 0%, var(--color-accent) 100%);
}

@media (prefers-color-scheme: dark) {
    :root {
        --elev-1: 0 1px 2px rgba(0, 0, 0, 0.4);
        --elev-2: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 24px -8px rgba(0, 0, 0, 0.5);
        --elev-3: 0 2px 4px rgba(0, 0, 0, 0.4), 0 20px 40px -12px rgba(0, 0, 0, 0.6);
        --hairline: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 88px;
}

body {
    text-rendering: optimizeLegibility;
    font-kerning: normal;
}

::selection {
    background: color-mix(in srgb, var(--color-accent) 24%, transparent);
}

h1, h2, h3 {
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* ---------------------------------------------------------------------------------------------
   2. Header: haftet oben, Milchglas, feine Linie erst beim Scrollen
   --------------------------------------------------------------------------------------------- */
body .site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: color-mix(in srgb, var(--color-bg) 80%, transparent);
    -webkit-backdrop-filter: saturate(1.5) blur(16px);
    backdrop-filter: saturate(1.5) blur(16px);
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

body .site-header.is-scrolled {
    box-shadow: 0 1px 0 var(--color-border), 0 8px 24px -12px rgba(16, 36, 62, 0.18);
}

body.page-home .site-header {
    background: color-mix(in srgb, var(--surface-tint) 78%, transparent);
}

body .site-header__inner {
    padding-block: 16px;
}

body .logo {
    font-weight: 600;
    letter-spacing: -0.02em;
}

/* Nav-Links: feine Unterstreichung faehrt ein */
body .site-nav > .nav-link {
    position: relative;
}

body .site-nav > .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    height: 1.5px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s var(--ease-out);
}

body .site-nav > .nav-link:hover::after {
    transform: scaleX(1);
}

body .header-menu__toggle {
    transition: background-color 0.2s ease, color 0.2s ease;
}

body .header-menu__toggle:hover,
body .header-menu[open] > .header-menu__toggle {
    background: color-mix(in srgb, var(--color-accent) 9%, transparent);
}

/* ---------------------------------------------------------------------------------------------
   3. Buttons: Verlauf, Innenlicht, ruhige Bewegung
   --------------------------------------------------------------------------------------------- */
body .search-button,
body .cta-button--primary {
    background: var(--accent-grad);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 1px 2px rgba(16, 36, 62, 0.22), 0 6px 14px -4px color-mix(in srgb, var(--color-accent) 55%, transparent);
    transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), filter 0.2s ease;
}

body .search-button:hover:not(:disabled),
body .cta-button--primary:hover {
    background: var(--accent-grad);
    filter: brightness(1.07);
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 2px 4px rgba(16, 36, 62, 0.2), 0 12px 22px -6px color-mix(in srgb, var(--color-accent) 60%, transparent);
}

body .search-button:active:not(:disabled),
body .cta-button--primary:active {
    transform: translateY(0);
    filter: brightness(0.97);
}

body .cta-button--secondary {
    transition: transform 0.25s var(--ease-out), border-color 0.2s ease, color 0.2s ease, box-shadow 0.25s var(--ease-out);
}

body .cta-button--secondary:hover {
    transform: translateY(-1px);
    box-shadow: var(--elev-1);
}

/* ---------------------------------------------------------------------------------------------
   4. Startseite: Hero
   --------------------------------------------------------------------------------------------- */
body.page-home .hero {
    background:
        radial-gradient(62% 90% at 88% -10%, color-mix(in srgb, var(--color-accent) 20%, transparent) 0%, transparent 62%),
        radial-gradient(48% 70% at -4% 108%, color-mix(in srgb, var(--color-accent) 10%, transparent) 0%, transparent 68%),
        var(--surface-tint);
}

body.page-home .hero {
    position: relative;
    z-index: 0;
    overflow: clip;
}

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

body.page-home .hero h1 {
    font-size: clamp(2.25rem, 1.5rem + 2.9vw, 3.75rem);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -0.035em;
    margin-bottom: 18px;
}

body.page-home .hero .lead {
    font-size: 1.125rem;
    color: color-mix(in srgb, var(--color-text) 72%, var(--color-text-muted));
}

body.page-home .hero .search-field__row {
    background: var(--color-surface);
    border-radius: 20px;
    box-shadow: var(--hairline), 0 1px 2px rgba(16, 36, 62, 0.06), 0 22px 48px -14px color-mix(in srgb, var(--color-accent) 36%, transparent);
    transition: box-shadow 0.3s var(--ease-out), border-color 0.2s ease;
}

body.page-home .hero .search-field__row:focus-within {
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-accent) 16%, transparent), 0 22px 48px -14px color-mix(in srgb, var(--color-accent) 44%, transparent);
}

/* Vorschaukarte = das Produkt (der Pruefbericht): ein zweites Blatt schaut hervor, wie ein Dossier. Die einzige
   bewusste Inszenierung der Seite, alles andere bleibt ruhig. */
body.page-home .hero__aside {
    isolation: isolate;
}

body.page-home .hero__aside::after {
    content: "";
    position: absolute;
    inset: 16px -14px -14px 16px;
    z-index: -1;
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--color-surface) 62%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-accent) 14%, var(--color-border));
    box-shadow: var(--elev-1);
    pointer-events: none;
}

body.page-home .report-preview {
    border-color: color-mix(in srgb, var(--color-accent) 12%, var(--color-border));
    box-shadow: var(--hairline), var(--elev-3);
}

body.page-home .report-preview__badge {
    background: color-mix(in srgb, var(--color-accent) 9%, var(--color-surface));
    color: var(--color-accent);
    border-color: color-mix(in srgb, var(--color-accent) 22%, var(--color-border));
}

@media (max-width: 900px) {
    body.page-home .hero__aside::after {
        inset: 12px -8px -10px 12px;
    }
}

@media (max-width: 560px) {
    body.page-home .hero h1 {
        font-size: clamp(2rem, 8.6vw, 2.5rem);
    }

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

    body.page-home .hero .lead {
        font-size: 1.0625rem;
    }
}

/* ---------------------------------------------------------------------------------------------
   5. Vertrauensleiste, Baender, Abschnittstitel
   --------------------------------------------------------------------------------------------- */
body.page-home .value-bar__list {
    box-shadow: var(--hairline), var(--elev-2);
    border-color: color-mix(in srgb, var(--color-accent) 10%, var(--color-border));
}

body.page-home .value-bar__item + .value-bar__item {
    position: relative;
}

body.page-home .value-bar__icon {
    padding: 6px;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
}

/* Tint-Baender: weicher Verlauf statt flacher Flaeche */
body.page-home .band--tint {
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface-tint) 70%, var(--color-bg)) 0%, var(--surface-tint) 100%);
}

/* Abschnitts-Ueberschriften: gross, zentriert, mit kleinem Akzentstrich */
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 .knowledge-home h2 {
    font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

body.page-home .problem-solution h2 {
    letter-spacing: -0.025em;
    font-weight: 600;
}

/* ---------------------------------------------------------------------------------------------
   6. Prozessband: Tiefe, Verbindungslinie
   --------------------------------------------------------------------------------------------- */
body.page-home .band--tint:has(> .how-it-works) {
    background:
        radial-gradient(70% 120% at 12% 0%, rgba(255, 255, 255, 0.12), transparent 60%),
        radial-gradient(60% 100% at 100% 100%, rgba(15, 38, 62, 0.35), transparent 65%),
        var(--surface-process);
}

body.page-home .step {
    position: relative;
    padding: 26px 20px 24px;
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: var(--hairline), 0 1px 2px rgba(10, 25, 43, 0.12), 0 18px 32px -14px rgba(10, 25, 43, 0.4);
}

body.page-home .step__number {
    width: 36px;
    height: 36px;
    font-size: 1rem;
    background: var(--accent-grad);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-accent) 12%, transparent), 0 4px 10px -2px color-mix(in srgb, var(--color-accent) 50%, transparent);
    margin-bottom: 8px;
}

body.page-home .step__title {
    font-size: 1.0625rem;
    letter-spacing: -0.01em;
}

body.page-home .steps {
    isolation: isolate;
}

@media (min-width: 901px) {
    body.page-home .step:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 44px;
        left: calc(50% + 28px);
        width: calc(100% + 24px - 56px);
        height: 0;
        border-top: 2px dashed rgba(255, 255, 255, 0.55);
        z-index: -1;
        pointer-events: none;
    }
}

/* ---------------------------------------------------------------------------------------------
   7. Karten: Zielgruppen, Preise, Fachwissen
   --------------------------------------------------------------------------------------------- */
body.page-home .audience-card {
    position: relative;
    box-shadow: var(--hairline), var(--elev-1);
    border-color: color-mix(in srgb, var(--color-accent) 8%, var(--color-border));
    transition: box-shadow 0.35s var(--ease-out), border-color 0.25s ease;
}

body.page-home .audience-card__icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--color-accent) 16%, var(--color-surface)), color-mix(in srgb, var(--color-accent) 6%, var(--color-surface)));
    box-shadow: var(--hairline);
}

body.page-home .audience-card__title {
    font-size: 1.125rem;
}

/* Preise: mittlere Karte klar als Hauptangebot, ohne Badge-Text (kein neuer Inhalt) */
body.page-home .price-card {
    box-shadow: var(--hairline), var(--elev-1);
    transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}

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

body.page-home .price-card:nth-child(2) {
    position: relative;
    border-color: color-mix(in srgb, var(--color-accent) 55%, var(--color-border));
    box-shadow: var(--hairline), 0 0 0 1px color-mix(in srgb, var(--color-accent) 30%, transparent), var(--elev-3);
}

body.page-home .price-card:nth-child(2)::before {
    content: "";
    position: absolute;
    inset: -1px -1px auto;
    height: 4px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: var(--accent-grad);
}

@media (min-width: 901px) {
    body.page-home .price-card:nth-child(2) {
        transform: translateY(-10px);
    }

    body.page-home .price-card:hover {
        box-shadow: var(--hairline), var(--elev-2);
    }

    body.page-home .price-card:nth-child(2):hover {
        box-shadow: var(--hairline), 0 0 0 1px color-mix(in srgb, var(--color-accent) 36%, transparent), var(--elev-3);
    }
}

body .price-card__features li::before {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 14%, transparent);
}

/* Fachwissen-Karten sind klickbar: Hover mit Anhebung */
body .knowledge-card {
    position: relative;
    box-shadow: var(--hairline), var(--elev-1);
    transition: box-shadow 0.35s var(--ease-out), border-color 0.25s ease;
}

body .knowledge-card:hover {
    border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-border));
    box-shadow: var(--hairline), var(--elev-2);
}

@media (prefers-reduced-motion: reduce) {
    body .knowledge-card:hover,
    body.page-home .price-card:nth-child(2) {
        transform: none;
    }
}

/* ---------------------------------------------------------------------------------------------
   8. FAQ
   --------------------------------------------------------------------------------------------- */
body .faq__item {
    box-shadow: var(--elev-1);
    transition: box-shadow 0.3s var(--ease-out), border-color 0.25s ease;
}

body .faq__item:hover,
body .faq__item[open] {
    border-color: color-mix(in srgb, var(--color-accent) 30%, var(--color-border));
}

body .faq__item[open] {
    box-shadow: var(--elev-2);
}

body .faq__item summary {
    transition: color 0.2s ease;
}

body .faq__item summary:hover {
    color: var(--color-accent);
}

/* ---------------------------------------------------------------------------------------------
   9. Abschluss-CTA: dunkles Marine-Band als Schlusspunkt
   --------------------------------------------------------------------------------------------- */
body.page-home .band--tint:has(> .closing-cta) {
    position: relative;
    overflow: clip;
    border-block-color: transparent;
    background:
        radial-gradient(50% 140% at 15% 0%, color-mix(in srgb, var(--color-accent) 50%, transparent), transparent 70%),
        radial-gradient(45% 120% at 90% 100%, rgba(127, 176, 224, 0.18), transparent 70%),
        var(--surface-navy);
    padding-block: clamp(56px, 7vw, 96px);
}

body.page-home .closing-cta {
    position: relative;
}

body.page-home .closing-cta h2 {
    color: var(--on-navy);
    font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
    font-weight: 600;
    letter-spacing: -0.03em;
}

body.page-home .closing-cta p {
    color: var(--on-navy-muted);
    font-size: 1.0625rem;
}

body.page-home .closing-cta .cta-button--primary {
    background: #ffffff;
    color: var(--surface-navy);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 14px 30px -8px rgba(0, 0, 0, 0.45);
}

body.page-home .closing-cta .cta-button--primary:hover {
    background: #ffffff;
    filter: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 20px 36px -8px rgba(0, 0, 0, 0.5);
}

body.page-home .closing-cta .cta-button--secondary {
    background: transparent;
    color: var(--on-navy);
    border-color: rgba(241, 245, 250, 0.35);
}

body.page-home .closing-cta .cta-button--secondary:hover {
    border-color: #ffffff;
    color: #ffffff;
}

/* ---------------------------------------------------------------------------------------------
   10. Footer
   --------------------------------------------------------------------------------------------- */
body .site-footer {
    position: relative;
    background:
        radial-gradient(60% 100% at 0% 0%, color-mix(in srgb, var(--color-accent) 22%, transparent), transparent 70%),
        var(--surface-navy);
    border-top: 0;
}

body .site-footer::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(241, 245, 250, 0.4), transparent);
}

body .site-footer__links a {
    transition: color 0.2s ease, padding-left 0.25s var(--ease-out);
}

body .site-footer__links a:hover {
    padding-left: 4px;
    text-decoration: none;
}

/* ---------------------------------------------------------------------------------------------
   12. Innenseiten (Preise, Ueber uns, Wissen, Rechtstexte, Login): weicher Seitenkopf und klare Titel
   Der Verlauf liegt auf #main und laeuft ueber die volle Breite aus - kein Markup, keine harte Kante.
   --------------------------------------------------------------------------------------------- */
body:not(.page-home) #main {
    background:
        radial-gradient(60% 320px at 82% 0%, color-mix(in srgb, var(--color-accent) 13%, transparent), transparent 100%),
        linear-gradient(180deg, color-mix(in srgb, var(--surface-tint) 85%, var(--color-bg)) 0, var(--color-bg) 380px);
    background-repeat: no-repeat;
}

body .breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 0;
    font-weight: 500;
}

body .breadcrumbs a {
    text-decoration: none;
    transition: color 0.2s ease;
}

body .breadcrumbs span[aria-current] {
    color: var(--color-text);
}

body .about-hero h1,
body .knowledge-page h1,
body .legal-page h1 {
    font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.032em;
}

body .about-hero__lead {
    font-size: 1.1875rem;
    line-height: 1.55;
    color: color-mix(in srgb, var(--color-text) 72%, var(--color-text-muted));
}

body .about-principles h2,
body .about-more h2 {
    font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
    font-weight: 600;
    letter-spacing: -0.025em;
}

/* Preistabelle: Karte mit Tiefe, ruhige Kopfzeile, Hover-Zeile, tabellarische Ziffern */
body .pricing-table {
    border-radius: var(--radius-lg);
    border-color: color-mix(in srgb, var(--color-accent) 10%, var(--color-border));
    box-shadow: var(--hairline), var(--elev-2);
    font-variant-numeric: tabular-nums;
    border-collapse: separate;
    border-spacing: 0;
}

body .pricing-table thead th {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    background: color-mix(in srgb, var(--color-accent) 6%, var(--color-bg-alt));
}

body .pricing-table th,
body .pricing-table td {
    padding: 17px 22px;
}

body .pricing-table tbody tr {
    transition: background-color 0.2s ease;
}

body .pricing-table tbody tr:hover {
    background: color-mix(in srgb, var(--color-accent) 5%, var(--color-surface));
}

/* Ueber-uns-Prinzipien, Rechts- und Fachwissen-Karten: gleiche Tiefe wie auf der Startseite */
body .about-principles__grid > li {
    box-shadow: var(--hairline), var(--elev-1);
    border-radius: var(--radius-lg);
}

/* Formulare (Login, Registrierung): Fokus mit weichem Ring */
body input:not([type="checkbox"]):not([type="radio"]):focus,
body select:focus,
body textarea:focus {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 16%, transparent);
}

body .auth-section {
    filter: none;
}

/* ---------------------------------------------------------------------------------------------
   13. Ueberschriften-Schrift: Source Serif 4 (SIL OFL 1.1, Lizenztext: public/fonts/source-serif-4/OFL.txt)
   Nur H1/H2 der oeffentlichen Seiten; Fliesstext, Navigation, Karten und Footer bleiben Instrument Sans.
   Selbst gehostet (Quelle: @fontsource/source-serif-4 5.2.9), nur Schnitt 600. latin-ext wird dank
   unicode-range nur bei Bedarf geladen. Preload fuer latin: resources/views/layouts/app.blade.php.
   --------------------------------------------------------------------------------------------- */
@font-face {
    font-family: "Source Serif 4";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/source-serif-4/source-serif-4-latin-600-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Source Serif 4";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/source-serif-4/source-serif-4-latin-ext-600-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
}

body.page-home .hero h1,
body.page-home .problem-solution h2,
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,
body .about-hero h1,
body .about-principles h2,
body .about-more h2,
body .knowledge-page h1,
body .legal-page h1 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.018em;
}

body.page-home .hero h1 {
    font-size: clamp(2.25rem, 1.5rem + 3.1vw, 3.875rem);
    line-height: 1.06;
}

@media (max-width: 560px) {
    body.page-home .hero h1 {
        font-size: clamp(2rem, 8.8vw, 2.5rem);
    }
}

/* ---------------------------------------------------------------------------------------------
   14. Seitenaufbau: Kernaussagen gross und ohne Karten, Zielgruppen als ruhige Liste
   Markup unveraendert (Tests pinnen die Klassen), nur Darstellung.
   --------------------------------------------------------------------------------------------- */
body.page-home .problem-solution {
    gap: 0;
    padding-block: clamp(32px, 5vw, 72px) clamp(8px, 2vw, 24px);
}

body.page-home .problem-solution__col {
    padding-inline-end: clamp(24px, 4vw, 64px);
}

body.page-home .problem-solution__col + .problem-solution__col {
    padding-inline: clamp(24px, 4vw, 64px) 0;
    border-inline-start: 1px solid var(--color-border);
}

body.page-home .problem-solution h2 {
    font-size: clamp(1.625rem, 1.15rem + 1.7vw, 2.5rem);
    line-height: 1.12;
    margin: 0 0 18px;
}

body.page-home .problem-solution p {
    font-size: 1.125rem;
    line-height: 1.6;
    max-width: 42ch;
    color: color-mix(in srgb, var(--color-text) 78%, var(--color-text-muted));
}

@media (max-width: 760px) {
    body.page-home .problem-solution {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    body.page-home .problem-solution__col,
    body.page-home .problem-solution__col + .problem-solution__col {
        padding-inline: 0;
        border-inline-start: 0;
    }

    body.page-home .problem-solution__col + .problem-solution__col {
        padding-top: 28px;
        border-top: 1px solid var(--color-border);
    }
}

/* Zielgruppen: keine Aktion, also keine Karten - Linie, Titel, Text. Die Icons entfallen (dekorativ). */
body.page-home .audiences h2 {
    text-align: left;
}

body.page-home .audiences__grid {
    column-gap: clamp(24px, 4vw, 56px);
    row-gap: 0;
}

body.page-home .audience-card {
    background: none;
    border: 0;
    border-top: 1px solid var(--color-border);
    border-radius: 0;
    box-shadow: none;
    padding: 22px 0 28px;
    gap: 4px;
}

body.page-home .audience-card__icon {
    display: none;
}

/* ---------------------------------------------------------------------------------------------
   15. Treffer-Akzent: ein ruhiger Signalbalken am Rand, nur wo es um das Ergebnis geht
   Kein Treffer: dezentes Gruen, Treffer: Rot (bestehende Tokens, Dark Mode folgt).
   --------------------------------------------------------------------------------------------- */
body.page-home .report-preview__status {
    border-inline-start: 3px solid var(--color-success-text);
}

body.page-home .report-preview__status--hit {
    border-inline-start-color: var(--color-danger-text);
}

body.page-home .report-preview__status--hit strong {
    font-weight: 700;
}

body .results-summary--clear {
    border-inline-start: 3px solid var(--color-success-text);
}

body .results-summary--hit,
body .result-card {
    border-inline-start: 3px solid var(--color-danger-text);
}

/* ---------------------------------------------------------------------------------------------
   16. Berichtsabschnitt: der PDF-Bericht als Bild des Produkts (zwei Blaetter, HTML/CSS-Nachbau)
   Die Blaetter bleiben auch im Dark Mode weisses Papier mit festen Farben - wie der echte PDF-Bericht.
   Selektoren mit .band > ..., da home.css das vertikale Padding der Sections im Band auf 0 setzt.
   --------------------------------------------------------------------------------------------- */
body.page-home .report-showcase h2 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.018em;
    font-size: clamp(1.625rem, 1.15rem + 1.7vw, 2.5rem);
    line-height: 1.12;
    margin: 0 0 16px;
}

body.page-home .band > .report-showcase {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
    padding-block: clamp(40px, 6vw, 88px) clamp(8px, 2vw, 24px);
}

body.page-home .report-showcase__lead {
    margin: 0 0 24px;
    max-width: 44ch;
    font-size: 1.125rem;
    line-height: 1.6;
    color: color-mix(in srgb, var(--color-text) 78%, var(--color-text-muted));
}

body.page-home .report-showcase__points {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    max-width: 46ch;
}

body.page-home .report-showcase__points li {
    display: grid;
    gap: 2px;
    padding: 14px 0;
    border-top: 1px solid var(--color-border);
}

body.page-home .report-showcase__points strong {
    font-weight: 600;
}

body.page-home .report-showcase__points span {
    color: var(--color-text-muted);
    font-size: 0.9375rem;
    line-height: 1.5;
}

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

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

body.page-home .report-showcase__sheets {
    display: grid;
    max-width: 580px;
    margin-inline: auto;
    font-size: 11px;
    line-height: 1.45;
    color: #1a2233;
}

body.page-home .report-showcase .sheet {
    grid-area: 1 / 1;
    background: #ffffff;
    border: 1px solid #e3e7ee;
    border-radius: 3px;
    padding: 22px 24px 24px;
    box-shadow: var(--elev-3);
}

body.page-home .report-showcase .sheet--hit {
    align-self: start;
    margin-right: 18%;
}

body.page-home .report-showcase .sheet--clear {
    position: relative;
    margin-left: 18%;
    margin-top: 224px;
}

body.page-home .report-showcase .sheet__brand {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

body.page-home .report-showcase .sheet__brand span {
    color: #1f4e79;
}

body.page-home .report-showcase .sheet__sub {
    margin: 1px 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e3e7ee;
    color: #6b7485;
}

body.page-home .report-showcase .sheet__rows {
    margin: 0 0 16px;
}

body.page-home .report-showcase .sheet__rows > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
    gap: 12px;
    padding: 5px 0;
}

body.page-home .report-showcase .sheet dt {
    color: #6b7485;
}

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

body.page-home .report-showcase .sheet__ref {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

body.page-home .report-showcase .sheet__line {
    display: block;
    font-variant-numeric: tabular-nums;
}

body.page-home .report-showcase .sheet__alert {
    padding: 11px 13px;
    border-radius: 4px;
    font-weight: 600;
}

body.page-home .report-showcase .sheet__alert--clear {
    background: #effaf2;
    border: 1px solid #bfe6cb;
    color: #15803d;
}

body.page-home .report-showcase .sheet__alert--hit {
    margin-bottom: 14px;
    background: #fdeeee;
    border: 1px solid #f6c9c9;
    color: #b91c1c;
}

body.page-home .report-showcase .sheet__match-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 10px;
    margin-bottom: 8px;
    font-size: 12px;
}

body.page-home .report-showcase .sheet__tag {
    padding: 2px 8px;
    border: 1px solid #f6c9c9;
    border-radius: 999px;
    background: #fdeeee;
    color: #b91c1c;
    font-size: 10px;
    font-weight: 600;
}

body.page-home .report-showcase .sheet__facts {
    margin: 0;
    padding-bottom: 6px;
}

body.page-home .report-showcase .sheet__facts > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
    gap: 12px;
    padding: 3px 0;
}

body.page-home .report-showcase__caption {
    margin: 14px auto 0;
    max-width: 580px;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

@media (max-width: 860px) {
    body.page-home .band > .report-showcase {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }
}

@media (max-width: 560px) {
    body.page-home .report-showcase__sheets {
        font-size: 10px;
    }

    body.page-home .report-showcase .sheet {
        padding: 16px 16px 18px;
    }

    body.page-home .report-showcase .sheet--hit {
        margin-right: 8%;
    }

    body.page-home .report-showcase .sheet--clear {
        margin-left: 8%;
        margin-top: 218px;
    }
}

/* ---------------------------------------------------------------------------------------------
   17. Dossier-Sprache: die Seite spricht in Bloettern und Linien statt in runden Karten
   Papier-Elemente (Preisbloetter, Berichtskarte, Prozessschritte, Merkblaetter) haben einen kleinen Radius und feine
   Linien wie der PDF-Bericht; Listen (FAQ, Zielgruppen, Preis-Merkmale, Grundsaetze) sind Linienregister ohne Kasten.
   Nur Darstellung, Markup und Texte bleiben. Runde Formen bleiben Eingabefeldern und Buttons vorbehalten.
   --------------------------------------------------------------------------------------------- */
:root {
    --radius-sheet: 4px;
}

/* Papier-Bloetter */
body.page-home .price-card,
body.page-home .step,
body.page-home .report-preview,
body.page-home .hero__aside::after,
body .knowledge-card,
body .pricing-table,
body .result-card {
    border-radius: var(--radius-sheet);
}

body.page-home .price-card:nth-child(2)::before {
    border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
}

/* Preisblatt: Name als Kopfzeile, Merkmale als Linienregister, Zahl in der Ueberschriften-Schrift */
body.page-home .price-card__name {
    padding-bottom: 12px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--color-border);
}

body.page-home .price-card__price {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.02em;
}

body.page-home .price-card__features {
    gap: 0;
}

body.page-home .price-card__features li {
    padding: 11px 0;
    border-top: 1px solid var(--color-border);
}

body.page-home .price-card__features li:last-child {
    border-bottom: 1px solid var(--color-border);
}

body.page-home .price-card__features li::before {
    content: none;
}

body.page-home .price-card__cta {
    margin-top: 24px;
}

/* FAQ: Linienregister statt Kaesten */
body .faq__list {
    gap: 0;
    border-bottom: 1px solid var(--color-border);
}

body .faq__item {
    background: none;
    border: 0;
    border-top: 1px solid var(--color-border);
    border-radius: 0;
    box-shadow: none;
    padding: 2px 4px;
}

body .faq__item:hover,
body .faq__item[open] {
    border-color: var(--color-border);
    border-top-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-border));
    box-shadow: none;
}

body .faq__item summary {
    padding: 16px 0;
}

/* Grundsaetze (Ueber uns): gleiche Linienliste wie die Zielgruppen der Startseite */
body .about-principles__grid {
    gap: 0 clamp(24px, 4vw, 56px);
}

body .about-principles__grid > .audience-card {
    background: none;
    border: 0;
    border-top: 1px solid var(--color-border);
    border-radius: 0;
    box-shadow: none;
    padding: 22px 0 28px;
}

/* Merkblaetter (Wissen): Kategorie als Kopfzeile, ruhige Linie */
body .knowledge-card {
    padding: 18px 22px 20px;
}

body .knowledge-card__category {
    padding-bottom: 10px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--color-border);
    letter-spacing: 0.02em;
    text-transform: none;
    font-size: 0.8125rem;
}

body .knowledge-card__title {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.012em;
}

/* Preisseite: Tarifblatt, Kopfzeile ohne Grossbuchstaben */
body .pricing-table thead th {
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text);
    background: color-mix(in srgb, var(--color-accent) 5%, var(--color-bg-alt));
}

/* ---------------------------------------------------------------------------------------------
   18. Berichtsabschnitt: Absenderzeile, Aktualitaetshinweis und der eine inszenierte Moment
   Die Ablauf-Animation laeuft einmal, wenn die Blaetter ins Bild kommen (public/js/premium.js setzt is-armed und
   is-playing). Ohne JavaScript, ohne IntersectionObserver oder bei reduzierter Bewegung bleibt der Endzustand stehen.
   --------------------------------------------------------------------------------------------- */
body.page-home .report-showcase__updated {
    margin: 0 0 20px;
    color: var(--color-text);
    font-size: 0.9375rem;
    font-weight: 600;
}

body.page-home .report-showcase .sheet__foot {
    margin-top: 16px;
    padding-top: 10px;
    border-top: 1px solid #e3e7ee;
    color: #6b7485;
    font-size: 9px;
    line-height: 1.4;
}

body.page-home .report-showcase .sheet__line {
    position: relative;
    padding-left: 15px;
}

body.page-home .report-showcase .sheet__line::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.2em;
    width: 10px;
    height: 10px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2315803d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.2 6.4l2.4 2.4 5.2-5.4'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (prefers-reduced-motion: no-preference) {
    body.page-home .report-showcase.is-armed .sheet--clear {
        opacity: 0;
        transform: translateY(36px);
    }

    body.page-home .report-showcase.is-armed .sheet--clear .sheet__line {
        opacity: 0;
        transform: translateX(-8px);
    }

    body.page-home .report-showcase.is-armed .sheet--clear .sheet__alert,
    body.page-home .report-showcase.is-armed .sheet--clear .sheet__foot {
        opacity: 0;
        transform: translateY(6px);
    }

    body.page-home .report-showcase.is-armed.is-playing .sheet--clear {
        opacity: 1;
        transform: none;
        transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
    }

    body.page-home .report-showcase.is-armed.is-playing .sheet--clear .sheet__line {
        opacity: 1;
        transform: none;
        transition: opacity 0.4s ease, transform 0.4s var(--ease-out);
    }

    body.page-home .report-showcase.is-playing .sheet__line:nth-of-type(1) { transition-delay: 0.9s; }
    body.page-home .report-showcase.is-playing .sheet__line:nth-of-type(2) { transition-delay: 1.2s; }
    body.page-home .report-showcase.is-playing .sheet__line:nth-of-type(3) { transition-delay: 1.5s; }
    body.page-home .report-showcase.is-playing .sheet__line:nth-of-type(4) { transition-delay: 1.8s; }
    body.page-home .report-showcase.is-playing .sheet__line:nth-of-type(5) { transition-delay: 2.1s; }

    body.page-home .report-showcase.is-armed.is-playing .sheet--clear .sheet__alert,
    body.page-home .report-showcase.is-armed.is-playing .sheet--clear .sheet__foot {
        opacity: 1;
        transform: none;
        transition: opacity 0.5s ease, transform 0.5s var(--ease-out);
        transition-delay: 2.6s;
    }

    body.page-home .report-showcase.is-armed.is-playing .sheet--clear .sheet__foot {
        transition-delay: 3s;
    }
}

/* ---------------------------------------------------------------------------------------------
   19. Drei-Stufen-Signal, Zielgroessen, Mikrotexte, Pause-Knopf
   Signal: gruen = kein Treffer, bernstein = nur aehnliche Treffer (fuzzy), rot = mindestens ein exakter Treffer.
   Die Grundfarben der Stufen liegen in search.css (.results-summary--similar, .result-card__badge--similar) und im
   PDF-Bericht; hier nur der Randbalken der oeffentlichen Seiten.
   --------------------------------------------------------------------------------------------- */
body .results-summary--similar,
body .result-card--similar {
    border-inline-start: 3px solid var(--color-warning-text);
}

/* FAQ: nur eine Linie oben - der Radius aus home.css (12 px) entfaellt */
body.page-home .faq__item {
    border-radius: 0;
}

/* Mikrotexte mindestens 12 px (Oberflaechentexte; die dekorativen Blaetter im Berichtsabschnitt bleiben bewusst klein) */
body.page-home .report-preview__badge {
    font-size: 0.75rem;
}

body.page-home .knowledge-card__category {
    font-size: 0.8125rem;
}

/* Zielgroessen: sichtbare Groesse bleibt, die Trefferflaeche wird mindestens 44 x 44 px */
body.page-home .report-preview__nav {
    position: relative;
}

body.page-home .report-preview__nav::after {
    content: "";
    position: absolute;
    inset: -6px;
}

body .header-menu {
    margin-block: -9px;
}

body .header-menu__toggle {
    width: 44px;
    height: 44px;
}

body .site-nav > .nav-link {
    padding-block: 11px;
    margin-block: -11px;
}

body .site-footer__links {
    gap: 0;
}

body .site-footer__links a {
    display: inline-block;
    padding-block: 11px;
}

body .site-footer__consent {
    padding-block: 12px;
}

body .knowledge-card__link {
    display: inline-block;
    padding-block: 11px;
    margin-block: -11px;
}

body.page-home .report-preview__foot {
    padding-block: 12px;
    margin-block: 2px -12px;
}

body.page-home .report-showcase__link {
    display: inline-block;
    padding-block: 12px;
    margin-block: -12px;
}

/* Pause-Knopf der Hero-Karte: visuell verborgen, per Tastatur/Screenreader erreichbar, bei Fokus sichtbar */
body.page-home .report-preview__pause {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    border: 0;
    clip-path: inset(50%);
    white-space: nowrap;
}

body.page-home .report-preview__pause:focus,
body.page-home .report-preview__pause:focus-visible {
    top: 14px;
    right: 14px;
    z-index: 2;
    width: auto;
    height: auto;
    margin: 0;
    padding: 8px 14px;
    overflow: visible;
    clip-path: none;
    background: var(--color-surface);
    border: 1px solid var(--color-accent);
    border-radius: 999px;
    color: var(--color-accent);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

body.page-home .report-preview[data-paused="true"] .report-preview__state--clear,
body.page-home .report-preview[data-paused="true"] .report-preview__state--hit {
    animation-play-state: paused;
}