/* ForeverPix public UI foundations. Kept dependency-free for fast first paint. */
:root {
    --fp-ink: #151a2d;
    --fp-ink-soft: #5f6678;
    --fp-paper: #fffdfb;
    --fp-cloud: #f6f4f8;
    --fp-rose: #e8527a;
    --fp-rose-dark: #bc365e;
    --fp-peach: #ffb38a;
    --fp-violet: #745486;
    --fp-focus: #1b72e8;
    --fp-radius-sm: 14px;
    --fp-radius-md: 24px;
    --fp-shadow-soft: 0 18px 55px rgba(25, 22, 40, .09);
    --fp-shadow-brand: 0 18px 45px rgba(232, 82, 122, .24);
}

html { scroll-behavior: smooth; max-width: 100%; overflow-x: clip; }
body { max-width: 100%; overflow-x: clip; }
main, header, footer { width: 100%; min-width: 0; }

.fp-skip-link {
    position: fixed;
    z-index: 99999;
    top: 12px;
    left: 12px;
    padding: 11px 16px;
    border-radius: 10px;
    color: #fff;
    background: var(--fp-ink);
    font-weight: 800;
    text-decoration: none;
    transform: translateY(-160%);
    transition: transform .15s ease;
}
.fp-skip-link:focus { transform: translateY(0); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--fp-focus) !important;
    outline-offset: 3px;
}

main { isolation: isolate; }
main img { max-width: 100%; }

.btn, .fp-cta-primary, .fp-cta-secondary, .fp-cta-white {
    min-height: 44px;
    align-items: center;
    justify-content: center;
}

.fp-proof-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.fp-proof-card {
    height: 100%;
    padding: clamp(22px, 3vw, 32px);
    border: 1px solid rgba(21, 26, 45, .09);
    border-radius: var(--fp-radius-md);
    background: rgba(255, 255, 255, .88);
    box-shadow: var(--fp-shadow-soft);
}
.fp-proof-icon {
    display: inline-grid;
    width: 48px;
    height: 48px;
    margin-bottom: 18px;
    place-items: center;
    border-radius: 15px;
    color: var(--fp-rose-dark);
    background: linear-gradient(135deg, rgba(232,82,122,.14), rgba(255,179,138,.24));
}
.fp-proof-card h3 { color: var(--fp-ink); font-size: 1.05rem; font-weight: 800; }
.fp-proof-card p { margin: 0; color: var(--fp-ink-soft); line-height: 1.7; }

.fp-disclosure {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    border: 1px solid rgba(116,84,134,.16);
    border-radius: var(--fp-radius-sm);
    color: var(--fp-ink-soft);
    background: rgba(116,84,134,.06);
    font-size: .9rem;
    line-height: 1.55;
}
.fp-disclosure i { margin-top: 3px; color: var(--fp-violet); }

@media (max-width: 767.98px) {
    .fp-proof-grid { grid-template-columns: 1fr; gap: 12px; }
    .fp-proof-card { border-radius: 18px; }
    .btn-lg { padding-inline: 1.25rem !important; }
    h1, h2, h3, p { overflow-wrap: break-word; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

/* ==========================================================================
   Landing-Pages: gemeinsames Hero- und Abschnittssystem
   --------------------------------------------------------------------------
   Die sechs Landing-Pages sind je eine eigene Kopie mit eigenem CSS-Praefix
   (hw-, bd-, fb-, pb- …). Ihre Heros standen auf min-height: 88vh, hatten
   aber nur rund 260 px Inhalt und kein Bild — auf dem Handy blieben dadurch
   ueber 500 px leere Flaeche ueber der Ueberschrift stehen. Diese Klassen
   liegen bewusst hier in der Datei, die base.html ohnehin auf jeder Seite
   laedt: ein Ort statt sechs Kopien.
   ========================================================================== */

/* section.fp-lp-hero statt .fp-lp-hero: Die Seiten definieren ihr
   .hw-hero/.bd-hero in einem eigenen <style>-Block weiter unten im
   Dokument. Bei gleicher Spezifitaet gewinnt der spaetere Block, und
   min-height: 88vh stand weiter. Element + Klasse sticht das. */
section.fp-lp-hero {
    min-height: 0;
    padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2.5rem, 5vw, 4rem);
    display: block;
    overflow: hidden;
}

.fp-lp-grid {
    display: grid;
    gap: clamp(2rem, 5vw, 3.5rem);
    align-items: center;
}

/* Grundregel VOR der Media Query: Beide haben dieselbe Spezifitaet, also
   gewinnt die spaetere. Andersherum stand der Text auch auf breiten
   Bildschirmen noch zentriert. */
.fp-lp-copy { text-align: center; }

@media (min-width: 992px) {
    .fp-lp-grid {
        grid-template-columns: 1.05fr 1fr;
    }
    .fp-lp-copy { text-align: left; }
    .fp-lp-copy .fp-lp-actions,
    .fp-lp-copy .fp-lp-trust { justify-content: flex-start; }
    /* Die Seiten setzen teils margin:0 auto per style-Attribut auf den
       Fliesstext; links ausgerichtet wirkt das wie ein Versatz. */
    .fp-lp-copy p[style*="auto"] { margin-left: 0 !important; }
}

/* Das Bild traegt den Hero. Ein festes Seitenverhaeltnis haelt die Hoehe
   stabil, solange die Datei noch laedt — sonst springt der Text nach. */
.fp-lp-media {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    /* Die Event-Bilder sind quadratisch (1254x1254). Ein 4:3-Rahmen
       schnitt oben und unten je 12,5 % weg. */
    aspect-ratio: 1 / 1;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .38);
    border: 1px solid rgba(255, 255, 255, .10);
}

.fp-lp-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Kein harter Schnitt zwischen Bild und dunklem Grund. */
.fp-lp-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(15, 11, 30, .45) 100%);
    pointer-events: none;
}

.fp-lp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
    align-items: center;
    margin-top: 1.75rem;
}

/* Die vier Vertrauenspunkte liefen als Fliesstext ineinander und brachen
   mitten im Satz um ("Made in / Germany"). Als Chips hat jeder Punkt eine
   eigene Flaeche und bleibt am Stueck. */
.fp-lp-trust {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
    margin-top: 1.75rem;
}

.fp-lp-trust span {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    white-space: nowrap;
    padding: .42rem .85rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .86);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
}

.fp-lp-trust i {
    color: var(--fp-primary-light, #F07A99);
    font-size: .85em;
}

@media (max-width: 575.98px) {
    .fp-lp-trust span {
        font-size: .76rem;
        padding: .38rem .7rem;
    }
}

/* Ein Auftritt fuer alle Landing-Pages: Die Funnel-Seiten unter "Loesungen"
   nutzen laengst den Markenverlauf, die SEO-Seiten brachten jede ihren
   eigenen Knopf mit — mal violett, mal orange. Das war der sichtbarste
   Bruch zwischen den Seiten. */
.fp-lp-copy .btn-hw,
.fp-lp-copy .btn-accent,
.fp-lp-copy .btn-bd,
.fp-lp-copy .btn-fb,
.fp-lp-copy .btn-pb,
.fp-lp-copy .fp-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .95rem 2rem;
    border: none;
    border-radius: 999px;
    font-size: 1.02rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, var(--fp-primary, #E8527A) 0%, var(--fp-accent, #FFB38A) 100%);
    box-shadow: 0 16px 40px -12px rgba(232, 82, 122, .55);
    transition: transform .22s ease, box-shadow .22s ease;
}

.fp-lp-copy .btn-hw:hover,
.fp-lp-copy .btn-accent:hover,
.fp-lp-copy .fp-cta-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 48px -12px rgba(232, 82, 122, .65);
    color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .fp-lp-copy .btn-hw,
    .fp-lp-copy .btn-accent,
    .fp-lp-copy .fp-cta-primary { transition: none; }
    .fp-lp-copy .btn-hw:hover,
    .fp-lp-copy .btn-accent:hover,
    .fp-lp-copy .fp-cta-primary:hover { transform: none; }
}