/* =========================================================================
   Components — Alle Page-Level-Bausteine
   -------------------------------------------------------------------------
     - Header (Meta-Nav, Main-Nav, Mobile-Menu)
     - Hero (Bild/Video mit Overlay)
     - Benefits / Story / Testimonial / Pricing / CTA-Banner
     - Forms / FAQ-Akkordeon (<details>) / Modal-Dialog / Toasts
     - Footer
   ========================================================================= */


/* =========================================================================
   1) Header
   -------------------------------------------------------------------------
   --header-h wird in lib/ui.js per ResizeObserver in :root geschrieben und
   ist die Grundlage für scroll-padding-top und Mobile-Menu-Positionierung.
   ========================================================================= */

.meta-nav-container {
    background-color: var(--neutral-800);
    color: var(--text-on-brand);
}

.meta-nav-container .container {
    padding-inline: var(--container-inline-padding);
}

.meta-nav-container ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    justify-content: flex-end;
    list-style: none;
    padding: 0;
    margin: 0;
}

.meta-nav-container li {
    font-size: var(--fs-14);
    padding-block: var(--space-2);
}

.meta-nav-container a {
    color: var(--text-on-brand);
    text-decoration: none;
}

.meta-nav-container a:hover,
.meta-nav-container a:focus-visible {
    color: var(--text-on-brand);
    text-decoration: underline;
}

/* Legacy: .desktop nur auf größeren Screens sichtbar */
.meta-nav-container li.desktop {
    display: none;
}

@media (min-width: 48rem) {
    .meta-nav-container li.desktop {
        display: list-item;
    }
}

@media (max-width: 47.999rem) {
    .meta-nav-container {
        display: none;
    }
}


.main-nav-container {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-header);
    background-color: var(--surface-default);
    box-shadow: var(--shadow-2);
}

.main-nav-elements {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: 4.5rem;
    padding-block: var(--space-3);
}

#logo {
    display: block;
    width: clamp(10rem, 18vw, 14rem);
    flex-shrink: 0;
}

#logo img {
    width: 100%;
    height: auto;
}

#logo a {
    display: block;
}


/* ---- Desktop nav --------------------------------------------------------- */
.main-nav {
    display: flex;
    align-items: center;
    gap: var(--space-5);
}

.main-nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: var(--min-touch);
    padding-inline: var(--space-2);
    color: var(--text-default);
    font-weight: var(--fw-light);
    letter-spacing: var(--tracking-wide);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: color var(--duration-2) var(--ease-out);
}

.main-nav a::after {
    content: "";
    position: absolute;
    inset-inline: var(--space-2);
    inset-block-end: 0.6rem;
    block-size: 2px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--duration-2) var(--ease-out);
    pointer-events: none;
}

.main-nav a:hover,
.main-nav a:focus-visible {
    color: var(--brand-blue);
    text-decoration: none;
}

.main-nav a:hover::after,
.main-nav a:focus-visible::after,
.main-nav a.is-current::after {
    transform: scaleX(1);
}

.main-nav a.is-current {
    color: var(--brand-blue);
    font-weight: var(--fw-regular);
}

/* CTA-Button: Link-Nav-Styles dürfen .btn--primary nicht überschreiben */
.main-nav a.btn {
    color: var(--btn-fg);
    font-weight: var(--fw-bold);
    padding-inline: var(--btn-padding-x);
    letter-spacing: var(--tracking-wide);
}

.main-nav a.btn::after {
    display: none;
}

.main-nav a.btn:hover,
.main-nav a.btn:focus-visible {
    color: var(--btn-fg-hover);
    background-color: var(--btn-bg-hover);
}

.main-nav a.btn.is-current {
    color: var(--btn-fg);
    font-weight: var(--fw-bold);
}

@media (prefers-reduced-motion: reduce) {

    .main-nav a,
    .main-nav a::after {
        transition: none;
    }
}


/* ---- Mobile menu --------------------------------------------------------- */
.mobile-menu-btn-container {
    display: flex;
    align-items: center;
}

.mobile-menu-btn-container .menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--min-touch);
    height: var(--min-touch);
    color: var(--brand-blue);
    background-color: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    padding: 0;
}

.mobile-menu-btn-container .menu:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.mobile-menu-btn-container svg {
    width: 1.75rem;
    height: 1.75rem;
}

.mobile-menu-btn-container .icon-close {
    display: none;
}

.mobile-menu-btn-container .menu[aria-expanded="true"] .icon-open {
    display: none;
}

.mobile-menu-btn-container .menu[aria-expanded="true"] .icon-close {
    display: block;
}


/* Mobile-Nav-Layout: außerhalb von Desktop-BP versteckt + Slide-in */
@media (max-width: 47.999rem) {
    .main-nav {
        position: fixed;
        inset: var(--header-h) 0 auto 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        max-height: 0;
        overflow: hidden;
        background-color: var(--surface-default);
        box-shadow: var(--shadow-3);
        transition: max-height var(--duration-3) var(--ease-out);
    }

    .main-nav.is-open {
        max-height: calc(100vh - var(--header-h));
        overflow-y: auto;
    }

    .main-nav a {
        justify-content: center;
        padding-block: var(--space-4);
        font-size: var(--fs-18);
        font-weight: var(--fw-light);
        color: var(--text-default);
        border-block-end: 1px solid var(--border-subtle);
        border-inline-start: 3px solid transparent;
        transition: background-color var(--duration-2) var(--ease-out),
            color var(--duration-2) var(--ease-out),
            border-color var(--duration-2) var(--ease-out);
    }

    .main-nav a::after {
        display: none;
    }

    .main-nav a:hover,
    .main-nav a:focus-visible {
        background-color: var(--surface-raised);
        color: var(--brand-blue);
    }

    .main-nav a.is-current {
        color: var(--brand-blue);
        font-weight: var(--fw-bold);
        border-inline-start-color: var(--brand-blue);
        background-color: var(--surface-brand-soft);
    }

    .main-nav a.btn {
        border-block-end: none;
        border-inline-start: none;
        background-color: var(--btn-bg);
    }

    .main-nav a.btn:hover,
    .main-nav a.btn:focus-visible {
        background-color: var(--btn-bg-hover);
        color: var(--btn-fg-hover);
    }

    .main-nav a.btn.is-current {
        color: var(--btn-fg);
        background-color: var(--btn-bg);
        border-inline-start: none;
    }
}

@media (min-width: 48rem) {
    .mobile-menu-btn-container {
        display: none;
    }
}


/* =========================================================================
   2) Hero
   -------------------------------------------------------------------------
   Statt mix-blend-mode-Trapez bekommt jedes Hero ein .hero__overlay als
   linearer Gradient (var(--hero-overlay)) - das garantiert WCAG-konformen
   Text-Kontrast auf jedem Bild.
   ========================================================================= */

.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: var(--text-on-brand);
    background-color: var(--brand-blue);
}

.hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
}

.hero__media picture {
    display: block;
    width: 100%;
    height: 100%;
}

.hero__media img,
.hero__media video {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: center right;
}

@media (max-width: 47.999rem) {

    .hero__media img,
    .hero__media video {
        object-position: center center;
    }
}

.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--hero-overlay);
    pointer-events: none;
}

.hero__content {
    padding-block: var(--space-section);
    padding-inline: var(--container-inline-padding);
    max-width: var(--container-lg);
    margin-inline: auto;
}

.hero__inner {
    max-width: 38rem;
}

.hero__eyebrow {
    font-size: var(--fs-14);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--brand-accent);
    margin-block-end: var(--space-3);
    text-wrap: balance;
}

.hero h1,
.hero h2,
.hero h3,
.hero h4 {
    color: var(--text-on-brand);
}

.hero h1 {
    margin-block-end: var(--space-4);
}

.hero a:not(.btn) {
    color: var(--text-on-brand);
    text-decoration-color: rgba(255, 255, 255, 0.6);
}

.hero a:not(.btn):hover,
.hero a:not(.btn):focus-visible {
    color: var(--text-on-brand);
    text-decoration-color: var(--text-on-brand);
}

.hero p {
    color: var(--text-on-brand);
    text-wrap: pretty;
    word-wrap: break-word;
    hyphens: auto;

}

.hero p.tagline {
    color: var(--text-on-brand);
    opacity: 0.95;
}

.hero ul.checklist li {
    color: var(--text-on-brand);
}

.hero ul.checklist li::before {
    background-color: var(--text-on-brand);
}

.hero .cluster {
    margin-block-start: var(--space-5);
}

/* Inverse Hero — heller Hintergrund, dunkler Text */
.hero--inverse {
    background-color: var(--surface-default);
    color: var(--text-strong);
}

.hero--inverse .hero__overlay {
    background: var(--hero-overlay-soft);
}

.hero--inverse h1,
.hero--inverse h2,
.hero--inverse h3,
.hero--inverse h4,
.hero--inverse p,
.hero--inverse .hero__eyebrow {
    color: var(--text-strong);
}

.hero--inverse a:not(.btn) {
    color: var(--text-link);
    text-decoration-color: currentColor;
}

.hero--inverse .hero__eyebrow {
    color: var(--brand-blue);
}

.hero--inverse ul.checklist li {
    color: var(--text-default);
}

.hero--inverse ul.checklist li::before {
    background-color: var(--brand-blue);
}

/* Compact Hero (z.B. Kontakt-Banner, sekundäre CTAs) */
.hero--compact .hero__content {
    padding-block: var(--space-7);
}


/* =========================================================================
   Buttons innerhalb dunkler Heroes (CTA-/Kontakt-Banner)
   -------------------------------------------------------------------------
   Auf dem dunklen Brand-Blue-Overlay würden .btn--primary (dunkelblau)
   und .btn--secondary (Outline-blau-auf-transparent) jeden Kontrast
   verlieren. Innerhalb von .hero (Default-Variante, NICHT --inverse)
   werden die Farben deshalb automatisch invertiert: Primary wird zum
   weißen Solid-Button mit dunkelblauem Text, Secondary zum weißen
   Outline-Button.
   ========================================================================= */
.hero:not(.hero--inverse) .btn--primary,
.hero:not(.hero--inverse) .btn.primary {
    --btn-bg: var(--surface-default);
    --btn-fg: var(--brand-blue);
    --btn-border: var(--surface-default);
    --btn-bg-hover: var(--brand-blue-soft);
    --btn-fg-hover: var(--brand-blue-strong);
    --btn-border-hover: var(--brand-blue-soft);
}

.hero:not(.hero--inverse) .btn--secondary,
.hero:not(.hero--inverse) .btn.secondary-outline {
    --btn-bg: transparent;
    --btn-fg: var(--text-on-brand);
    --btn-border: var(--text-on-brand);
    --btn-bg-hover: var(--text-on-brand);
    --btn-fg-hover: var(--brand-blue);
    --btn-border-hover: var(--text-on-brand);
}

.hero:not(.hero--inverse) .btn--ghost {
    --btn-fg: var(--text-on-brand);
    --btn-fg-hover: var(--text-on-brand);
    --btn-bg-hover: rgba(255, 255, 255, 0.12);
}

/* Legacy: .hero-container ohne .white = dunkle Variante */
.hero-container:not(.white) .btn--primary,
.hero-container:not(.white) .btn.primary {
    --btn-bg: var(--surface-default);
    --btn-fg: var(--brand-blue);
    --btn-border: var(--surface-default);
    --btn-bg-hover: var(--brand-blue-soft);
    --btn-fg-hover: var(--brand-blue-strong);
    --btn-border-hover: var(--brand-blue-soft);
}

.hero-container:not(.white) .btn--secondary,
.hero-container:not(.white) .btn.secondary-outline {
    --btn-bg: transparent;
    --btn-fg: var(--text-on-brand);
    --btn-border: var(--text-on-brand);
    --btn-bg-hover: var(--text-on-brand);
    --btn-fg-hover: var(--brand-blue);
    --btn-border-hover: var(--text-on-brand);
}

@media (prefers-color-scheme: dark) {
    /* Weiße Hero-CTAs: bewusst hell auf dunklem Overlay — nicht --surface-default */
    .hero:not(.hero--inverse) .btn--primary,
    .hero:not(.hero--inverse) .btn.primary,
    .hero-container:not(.white) .btn--primary,
    .hero-container:not(.white) .btn.primary {
        --btn-bg: var(--neutral-0);
        --btn-fg: var(--brand-blue);
        --btn-border: var(--neutral-0);
        --btn-bg-hover: var(--brand-blue-soft);
        --btn-fg-hover: var(--brand-blue-strong);
        --btn-border-hover: var(--brand-blue-soft);
    }
}


/* =========================================================================
   Legacy-Hero-Klassen (alte hero-container API) - Backward-Compat-Layer
   -------------------------------------------------------------------------
   Mappen die alten Klassen .hero-container, .hero-content, .trapeze auf das
   neue Pattern, damit alte Szenarien weiterhin funktionieren bis sie
   migriert sind.
   ========================================================================= */

.hero-container {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: var(--text-on-brand);
    background-color: var(--brand-blue);
}

.hero-container picture {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.hero-container picture img,
.hero-container .background-video,
.hero-container .background-mobile {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center right;
}

.hero-container .background-video {
    display: none;
}

@media (min-width: 62rem) {
    .hero-container .background-video {
        display: block;
    }

    .hero-container .background-mobile {
        display: none;
    }
}

/* Trapeze wird durch dezenten Gradient ersetzt — kein mix-blend-mode mehr */
.hero-container .trapeze {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--hero-overlay);
    pointer-events: none;
    transform: none !important;
    width: 100% !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
}

.hero-container.white .trapeze {
    background: var(--hero-overlay-soft);
}

.hero-content {
    padding-block: var(--space-section);
    background-color: transparent;
    color: var(--text-on-brand);
}

.hero-container.white .hero-content {
    color: var(--text-strong);
}

.hero-container .container .inner {
    max-width: 38rem;
}

.hero-container.white .hero-content h1,
.hero-container.white .hero-content h3,
.hero-container.white .hero-content p {
    color: var(--text-strong);
}

.hero-container.white .hero-content .checklist li {
    color: var(--text-default);
}

.hero-container.white .hero-content .checklist li::before {
    background-color: var(--brand-blue);
}

.btn-group-hero {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-block-start: var(--space-5);
}


/* =========================================================================
   3) Benefits
   ========================================================================= */

.benefits-section {
    padding-block: var(--space-section);
}

.benefits-section h2 {
    text-align: start;
    margin-block-end: var(--space-6);
    text-wrap: balance;
}

.benefits-section h3 {

    margin-block-end: var(--space-6);
}

.benefit {
    text-align: center;
}

.benefit figure {
    margin: 0 0 var(--space-3);
    display: flex;
    justify-content: center;
}

.benefit img {
    width: clamp(2.5rem, 5vw, 3.5rem);
    height: auto;
}

.benefit h3,
.benefit h4 {
    font-size: var(--fs-18);
    line-height: var(--lh-snug);
    margin-block-end: var(--space-2);
}

.benefit p {
    color: var(--text-muted);
    font-size: var(--fs-16);
    line-height: var(--lh-snug);
    margin-block-end: 0;
    text-wrap: pretty;
}

@media (min-width: 64rem) {
    .benefit {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: var(--space-4);
        text-align: start;
        align-items: start;
    }

    .benefit figure {
        margin: 0;
    }

    .benefit img {
        width: 3.25rem;
    }

    .hotfix-scale-icon {
        transform: scale(1.15);
        transform-origin: left top;
    }
}


/* =========================================================================
   4) Testimonial Slider
   ========================================================================= */

.testimonial-wrapper {
    padding-block: var(--space-section);
}

.testimonial-wrapper h2,
.testimonial-wrapper h3 {
    text-align: center;
    margin-inline: auto;
    margin-block-end: var(--space-6);
    max-width: var(--container-2xl);
    padding-inline: var(--container-inline-padding);
}

.testimonial .inner {
    margin: 0;
    text-align: center;
    padding-inline: var(--container-inline-padding);
}

.testimonial q {
    display: block;
    font-style: italic;
    font-size: var(--fs-18);
    line-height: var(--lh-relaxed);
    margin: 0 auto var(--space-3);
    text-wrap: pretty;
    max-width: var(--container-prose);
}

.testimonial q::before,
.testimonial q::after {
    content: '';
}

.testimonial img {
    width: clamp(8rem, 22vw, 15rem);
    height: auto;
    border-radius: 50%;
    margin: 0 auto var(--space-3);
}

.testimonial figcaption {
    max-width: var(--container-prose);
    margin-inline: auto;
    text-wrap: balance;
}

.testimonial .container {
    margin-bottom: var(--space-7);
}

@media (min-width: 64rem) {
    .testimonial .inner {
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: var(--space-7);
        align-items: center;
        text-align: start;
        max-width: var(--container-xl);
        margin-inline: auto;
    }

    .testimonial img {
        margin: 0;
    }

    .testimonial figcaption {
        margin-inline: 0;
    }

    .testimonial q {
        margin-inline: 0;
        font-size: var(--fs-21);
    }
}

/* Flickity-Overrides bleiben minimal */
.flickity-page-dots {
    bottom: -2rem;
}

.flickity-button {
    background: transparent;
}

.flickity-button:hover {
    background: transparent;
}

.flickity-button:focus,
.flickity-button:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.flickity-button-icon {
    fill: var(--brand-blue);
}


/* =========================================================================
   5) Story / Mehr-Lesen-Block
   ========================================================================= */

.story-intro {
    margin-block-end: var(--space-6);
    text-align: center;
}

.story-intro p {
    margin-inline: auto;
    max-width: var(--container-prose);
    text-wrap: pretty;
}

.story-wrapper .story-body {
    overflow: hidden;
    transition: max-height var(--duration-4) var(--ease-out);
}

.story-wrapper.collapsed .story-body {
    max-height: 0;
}

.story-block {
    margin-block-end: var(--space-7);
}

.story-block h3,
.story-block h4 {
    margin-block-end: var(--space-3);
}

.story-block p {
    text-wrap: pretty;
}

.story-block-image,
.story-intro-symbol {
    margin: 0 0 var(--space-5);
}

.story-block-image img,
.story-intro-symbol img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}

@media (min-width: 64rem) {
    .story-block {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-7);
        align-items: center;
    }

    .story-block:nth-child(odd) .story-block-image {
        order: 2;
    }
}


/* =========================================================================
   6) Pricing / Plan-Cards
   -------------------------------------------------------------------------
   Vorher: .plans-container { margin-top: calc(100vw / -6.5) } - magisch und
   fragil. Jetzt: reguläre Section, Cards in .grid--auto-fit.
   ========================================================================= */

.plans-container {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    margin-block: var(--space-6);
}

.card {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    background-color: var(--surface-default);
    box-shadow: var(--shadow-2);
    border: 1px solid var(--border-subtle);
}

.card.recommended {
    border: 2px solid var(--brand-blue);
    transform: translateY(-0.5rem);
    box-shadow: var(--shadow-3);
}

.card-header {
    position: relative;
    text-align: center;
    margin-block-end: var(--space-4);
}

.plan-version {
    color: var(--text-muted);
    margin-block-start: var(--space-2);
}

.card-body {
    margin-block-end: var(--space-4);
}

.card-footer {
    padding-block-end: var(--space-2);
}

.plan-badge {
    position: absolute;
    inset-block-start: -1.25rem;
    inset-inline-end: var(--space-4);
    padding: 0.25rem var(--space-3);
    font-size: var(--fs-12);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--text-strong);
    background-color: var(--brand-accent);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-1);
}

.current-plan-badge {
    display: none;
    position: absolute;
    inset-block-start: -1.25rem;
    inset-inline-end: var(--space-4);
    padding: 0.25rem var(--space-3);
    font-size: var(--fs-12);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--text-on-brand);
    background-color: var(--brand-blue);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-1);
}

.active-plan {
    background-color: var(--surface-raised);
    border-color: var(--border-default);
}

.active-plan .plan-badge {
    display: none;
}

.active-plan .current-plan-badge {
    display: inline-block;
}

.active-plan .btn {
    display: none;
}

.active-plan ul.checklist li::before {
    opacity: 0.55;
}

.plans-container .card-header h3 {
    font-size: var(--fs-30);
    line-height: var(--lh-tight);
}

.plans-container .card-header,
.plans-container .card-body p,
.plans-container .card-footer {
    text-align: center;
    text-wrap: balance;
}


/* =========================================================================
   7) Forms
   -------------------------------------------------------------------------
   - Inputs: min-height = --min-touch (44 px), saubere Focus-/Error-States.
   - Fehler werden über .field-error (Text neben dem Input) UND eine
     zentrale .form-status-Region (aria-live) ausgegeben.
   - Pflichtfeld-Stern via [data-required] in base.css (kein span im HTML).
   ========================================================================= */

.form-container {
    padding-block: var(--space-section);
}

.form-intro {
    text-align: center;
    margin-block-end: var(--space-6);
    max-width: var(--container-prose);
    margin-inline: auto;
}

.form-intro h2,
.form-intro h3 {
    text-wrap: balance;
}

.form-info p {
    font-size: var(--fs-14);
    line-height: var(--lh-snug);
    color: var(--text-muted);
    margin-block-end: 0;
    text-wrap: pretty;
}

.form-status {
    grid-column: span 12;
    min-height: 1rem;
    margin-block-start: var(--space-3);
    color: var(--state-danger-fg);
    font-size: var(--fs-14);
    font-weight: var(--fw-bold);
}

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

.form-group label,
.form-group legend {
    font-family: var(--font-sans);
    font-size: var(--fs-16);
    font-weight: var(--fw-light);
    color: var(--text-strong);
    line-height: var(--lh-snug);
    padding: 0;
}

.form-group input:not([type="checkbox"], [type="radio"]),
.form-group select,
.form-group textarea {
    display: block;
    width: 100%;
    min-height: var(--min-touch);
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-sans);
    font-size: var(--fs-16);
    font-weight: var(--fw-light);
    line-height: var(--lh-snug);
    color: var(--text-strong);
    background-color: var(--surface-default);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-1);
    transition: border-color var(--duration-1) var(--ease-out),
        box-shadow var(--duration-1) var(--ease-out);
}

.form-group textarea {
    min-height: 7.5rem;
    resize: vertical;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover {
    border-color: var(--border-strong);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: var(--focus-ring);
}

.form-group.is-invalid input,
.form-group.is-invalid select,
.form-group.is-invalid textarea,
.form-group input.has-error,
.form-group select.has-error,
.form-group textarea.has-error {
    border-color: var(--state-danger-fg);
    background-color: var(--state-danger-bg);
}

.form-group .field-error {
    display: none;
    color: var(--state-danger-fg);
    font-size: var(--fs-14);
    font-weight: var(--fw-bold);
    margin: 0;
}

.form-group.has-error .field-error,
.form-group.is-invalid .field-error {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.form-group.has-error .field-error::before,
.form-group.is-invalid .field-error::before {
    content: "";
    flex-shrink: 0;
    width: 1.1em;
    height: 1.1em;
    background-color: currentColor;
    -webkit-mask: var(--icon-alert-circle) center / contain no-repeat;
    mask: var(--icon-alert-circle) center / contain no-repeat;
}

/* Radio- und Checkbox-Felder */
.form-group input[type="checkbox"],
.form-group input[type="radio"] {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--brand-blue);
    margin: 0;
    flex-shrink: 0;
}

.form-group.radios {
    gap: var(--space-3);
}

.form-group.radios .radios-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
}

.form-group.radios label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--min-touch);
    font-size: var(--fs-16);
    font-weight: var(--fw-light);
    cursor: pointer;
}

/* Legacy: alte Markup-Variante mit direktem <label><input> ohne wrapper */
.form-group.radios>label:not(.radios-options *) {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--min-touch);
    margin-inline-end: var(--space-4);
}

.form-group.consent label {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    background-color: var(--surface-default);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    font-size: var(--fs-14);
    line-height: var(--lh-snug);
    cursor: pointer;
    transition: border-color var(--duration-1) var(--ease-out),
        background-color var(--duration-1) var(--ease-out);
}

.form-group.consent label span {
    text-wrap: pretty;
}

.form-group.consent label:hover {
    border-color: var(--border-strong);
}

.form-group.consent input[type="checkbox"] {
    margin-block-start: 0.15rem;
}

/* Submit-Group bekommt etwas Atemraum nach oben */
.form-group.submit-group {
    margin-block-start: var(--space-3);
}


/* =========================================================================
   8) FAQ — natives <details>/<summary>
   ========================================================================= */

.faq-container {
    padding-block: var(--space-section);
}

.faq-container .intro {
    text-align: center;
    margin-block-end: var(--space-6);
}

.accordion-wrapper,
.accordeon-wrapper {
    /* Legacy-Alias */
    display: grid;
    gap: var(--space-2);
}

.accordion,
.accordeon {
    /* Legacy-Alias */
    background-color: var(--surface-default);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
    interpolate-size: allow-keywords;
    transition: box-shadow var(--duration-2) var(--ease-out),
        border-color var(--duration-2) var(--ease-out);
}

/* Sanftes Auf-/Zuklappen des Inhalts (nativ über ::details-content) */
.accordion::details-content,
.accordeon::details-content {
    block-size: 0;
    overflow: clip;
    transition:
        block-size var(--duration-3) var(--ease-out),
        content-visibility var(--duration-3) allow-discrete;
}

.accordion[open]::details-content,
.accordeon[open]::details-content {
    block-size: auto;
}

@starting-style {

    .accordion[open]::details-content,
    .accordeon[open]::details-content {
        block-size: 0;
    }
}

.accordion[open],
.accordeon[open] {
    border-color: var(--border-default);
    box-shadow: var(--shadow-1);
}

.accordion>summary,
.accordeon>summary {
    list-style: none;
    cursor: pointer;
    padding: var(--space-4) var(--space-5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    background-color: var(--surface-raised);
    color: var(--text-strong);
    font-weight: var(--fw-bold);
    font-size: var(--fs-18);
    line-height: var(--lh-snug);
    text-align: start;
    min-height: var(--min-touch);
}

.accordion>summary::-webkit-details-marker,
.accordeon>summary::-webkit-details-marker {
    display: none;
}

.accordion>summary:focus-visible,
.accordeon>summary:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
}

.accordion>summary::after,
.accordeon>summary::after {
    content: "";
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    background-color: currentColor;
    -webkit-mask: var(--icon-chevron-down) center / contain no-repeat;
    mask: var(--icon-chevron-down) center / contain no-repeat;
    transition: transform var(--duration-3) var(--ease-out);
}

.accordion[open]>summary::after,
.accordeon[open]>summary::after {
    transform: rotate(180deg);
}

.accordion__body,
.accordion>.inner,
.accordeon>.inner,
.accordeon .accordeon-body .inner {
    padding: var(--space-4) var(--space-5) var(--space-5);
}

.accordion__body p,
.accordeon .accordeon-body p {
    margin: 0;
    text-wrap: pretty;
}

/* Legacy: alte Markup-Struktur (div.accordeon-head + div.accordeon-body)
   weiter zumindest visuell sauber darstellen, falls noch genutzt. */
.accordeon .accordeon-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background-color: var(--surface-raised);
    cursor: pointer;
    width: 100%;
    border: 0;
    text-align: start;
    color: inherit;
    font: inherit;
    font-weight: var(--fw-bold);
}

.accordeon .accordeon-head h4 {
    margin: 0;
}

.accordeon-toggle-btn {
    width: 1.5rem;
    height: 1.5rem;
    pointer-events: none;
    background: transparent;
    border: 0;
    padding: 0;
}

.accordeon .accordeon-toggle-icon {
    width: 1rem;
    height: 1rem;
    transition: transform var(--duration-2) var(--ease-out);
    transform: rotate(180deg);
}

.accordeon.collapsed .accordeon-toggle-icon {
    transform: rotate(0deg);
}

.accordeon .accordeon-body {
    overflow: hidden;
    max-height: 60rem;
    transition: max-height var(--duration-3) var(--ease-out);
}

.accordeon.collapsed .accordeon-body {
    max-height: 0;
}


/* =========================================================================
   9) Modal-Dialog (native <dialog>)
   ========================================================================= */

dialog.lp-dialog {
    border: 0;
    padding: 0;
    margin: auto;
    max-width: min(40rem, 92vw);
    width: 100%;
    background: transparent;
    color: var(--text-default);
    overflow: visible;
}

dialog.lp-dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
}

dialog.lp-dialog .lp-dialog__panel,
dialog.lp-dialog> :is(.modal-header, .modal-body, .modal-actions) {
    background-color: var(--surface-default);
}

dialog.lp-dialog .lp-dialog__panel {
    padding: var(--space-6) var(--space-6) var(--space-5);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-3);
    position: relative;
}

/* Legacy-Markup ohne __panel: alle direkten Kinder bekommen das Panel-Look */
dialog.lp-dialog:not(:has(.lp-dialog__panel)) {
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-3);
    background-color: var(--surface-default);
}

dialog.lp-dialog .modal-header {
    padding: 0 var(--space-6) var(--space-4) 0;
}

dialog.lp-dialog .modal-header h3 {
    margin: 0;
}

dialog.lp-dialog .modal-body p {
    text-wrap: pretty;
    margin-block-end: 0;
}

dialog.lp-dialog .modal-actions {
    margin-block-start: var(--space-5);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: flex-end;
}

dialog.lp-dialog .dialog-close {
    position: absolute;
    inset-block-start: var(--space-3);
    inset-inline-end: var(--space-3);
    width: var(--min-touch);
    height: var(--min-touch);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
}

dialog.lp-dialog .dialog-close:hover {
    color: var(--text-strong);
    background-color: var(--surface-sunken);
}

dialog.lp-dialog .dialog-close:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

dialog.lp-dialog .dialog-close::before {
    content: "";
    width: 1.25rem;
    height: 1.25rem;
    background-color: currentColor;
    -webkit-mask: var(--icon-x) center / contain no-repeat;
    mask: var(--icon-x) center / contain no-repeat;
}

/* Animation — wird via [data-state] gesetzt (siehe lib/ui.js) */
@media (prefers-reduced-motion: no-preference) {
    dialog.lp-dialog[open] {
        animation: dialog-in var(--duration-3) var(--ease-out);
    }

    dialog.lp-dialog[open]::backdrop {
        animation: backdrop-in var(--duration-3) var(--ease-out);
    }
}

@keyframes dialog-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes backdrop-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


/* =========================================================================
   10) Toast Stack
   ========================================================================= */

.toast-stack {
    position: fixed;
    inset-block-end: var(--space-5);
    inset-inline-end: var(--space-5);
    z-index: var(--z-toast);
    display: grid;
    gap: var(--space-2);
    pointer-events: none;
    max-width: min(22rem, calc(100vw - var(--space-7)));
}

.toast {
    background-color: var(--surface-inverse);
    color: var(--text-inverse);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-2);
    font-size: var(--fs-14);
    pointer-events: auto;
    animation: toast-in var(--duration-2) var(--ease-out);
}

.toast.success {
    background-color: var(--state-success-fg);
    color: var(--text-on-brand);
}

.toast.error {
    background-color: var(--state-danger-fg);
    color: var(--text-on-brand);
}

.toast.warning {
    background-color: var(--state-warning-fg);
    color: var(--text-on-brand);
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================================================
   11) Footer
   ========================================================================= */

/* Page-Footer — nur das direkte body > footer (NICHT card-footer, testimonial figcaption etc.) */
body>footer {
    background-color: var(--neutral-800);
    color: var(--neutral-200);
    padding-block: var(--space-7);
    text-align: center;
    font-size: var(--fs-14);
}

body>footer nav {
    margin-block-end: var(--space-5);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2) var(--space-4);
}

body>footer nav a {
    color: var(--neutral-200);
    text-decoration: none;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    min-height: 2rem;
    display: inline-flex;
    align-items: center;
}

body>footer nav a:hover,
body>footer nav a:focus-visible {
    color: var(--neutral-0);
    text-decoration: underline;
}

body>footer .info {
    color: var(--neutral-300);
}

body>footer .info p {
    margin-block-end: var(--space-1);
    text-wrap: balance;
}

#forum_logo_footer {
    margin: var(--space-2) auto;
    fill: currentColor;
    color: var(--neutral-200);
}


/* =========================================================================
   12) Captcha-Error-State (Legacy)
   ========================================================================= */

.g-recaptcha.error {
    box-shadow: 0 0 5px var(--state-danger-fg);
}

.form-captcha {
    display: flex;
    align-items: flex-end;
    margin-block-end: var(--space-4);
}

/* Benefits-Cluster (CTA unter Benefit-Wrapper) - Token-konformes Spacing */
.benefits-section .cluster {
    margin-block-start: var(--space-6);
}