/* ==========================================================================
   home.css - nur auf index.php geladen (siehe $extraHead)
   Eigener visueller Auftritt der Startseite, löst sich bewusst vom Rest
   des Systems, behält aber Farbpalette (Blau/Navy) und Design-Variablen bei.
   Nutzt Fallback-Werte, falls Variablennamen in variables.css abweichen.
   ========================================================================== */

.home {
    display: block;
    overflow-x: clip;
}

/* -------------------------------------------------------------------------
   NAVIGATION: nutzt die gemeinsame nav-modern.php/css (index.php lädt
   zusätzlich css/nav-modern.css). Hier nur die Zusatz-Regel, die die
   Navigation ausschließlich auf der Startseite über dem Hero fixiert -
   auf allen anderen Seiten (z.B. map.php) bleibt sie im normalen Fluss.
   ------------------------------------------------------------------------- */

body.page-home .modern-nav-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: rgba(9, 18, 40, .62);
}

/* -------------------------------------------------------------------------
   HERO
   ------------------------------------------------------------------------- */

.home-hero {
    position: relative;
    padding-top: 6.5rem;
    padding-bottom: var(--space-8, 5rem);
    overflow: hidden;
    background: #0b1a38;
    color: #fff;
}

/* Beispielfoto als Hero-Hintergrund (Lorem Picsum - stabiler Platzhalter-
   Dienst, extra fuer sowas gedacht). Vor dem Live-Gang durch ein eigenes
   Foto ersetzen: einfach die background-image-URL austauschen. */
.home-hero-photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url('https://picsum.photos/seed/bikeroute-hero/1800/1100');
    background-size: cover;
    background-position: center;
}

.home-hero-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(11, 26, 56, .88) 0%, rgba(15, 42, 92, .82) 55%, rgba(20, 51, 110, .92) 100%);
}

.home-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.home-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .55;
}

.home-blob-1 {
    width: 420px;
    height: 420px;
    background: #2563eb;
    top: -140px;
    left: -100px;
}

.home-blob-2 {
    width: 360px;
    height: 360px;
    background: #7dd3fc;
    opacity: .25;
    bottom: -160px;
    left: 30%;
}

.home-blob-3 {
    width: 300px;
    height: 300px;
    background: #f97316;
    opacity: .18;
    top: 10%;
    right: -80px;
}

.home-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: var(--space-6, 3rem);
    align-items: center;
}

.home-hero-copy .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .22);
    padding: .35rem .9rem;
    border-radius: var(--radius-full, 999px);
    font-size: .82rem;
}

.home-hero-copy .hero-title {
    color: #fff;
    font-size: clamp(2.1rem, 1.4rem + 3vw, 3.3rem);
    line-height: 1.12;
    margin: var(--space-4, 1.5rem) 0 var(--space-3, 1rem);
}

.home-hero-copy .text-accent {
    color: #7dd3fc;
}

.home-hero-copy .hero-subtitle {
    max-width: 560px;
    font-size: 1.08rem;
    color: rgba(255, 255, 255, .85);
}

.home-hero-copy .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3, 1rem);
    margin: var(--space-5, 2rem) 0;
}

.btn-lg {
    padding: .85rem 1.6rem;
    font-size: 1.05rem;
}

.home-hero-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.home-hero-tabs a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .5rem 1rem;
    border-radius: var(--radius-full, 999px);
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #fff;
    font-size: .87rem;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s ease, transform .15s ease;
}

.home-hero-tabs a:hover {
    background: rgba(255, 255, 255, .22);
    transform: translateY(-1px);
}

.home-hero-tabs .icon {
    width: 1rem;
    height: 1rem;
}

/* ---- Hero-Illustration mit schwebenden Glass-Chips ---- */

.home-hero-visual {
    position: relative;
    max-width: 420px;
    margin: 0 auto;
}

.home-hero-illustration {
    filter: drop-shadow(0 30px 50px rgba(4, 10, 28, .55));
}

.home-hero-illustration svg {
    width: 100%;
    height: auto;
    display: block;
}

.home-hero-chip {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(255, 255, 255, .14);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: var(--radius-md, 16px);
    padding: .65rem 1rem;
    font-size: .85rem;
    font-weight: 600;
    color: #fff;
    box-shadow: 0 18px 34px rgba(4, 10, 28, .35);
}

.home-hero-chip .icon {
    width: 1rem;
    height: 1rem;
    color: #7dd3fc;
}

.chip-1 {
    top: 8%;
    left: -8%;
}

.chip-2 {
    top: 46%;
    right: -10%;
}

.chip-3 {
    bottom: 6%;
    left: 2%;
}

/* -------------------------------------------------------------------------
   LIVE-STATS - überlappt den Hero-Übergang
   ------------------------------------------------------------------------- */

.home-stats {
    position: relative;
    z-index: 2;
    margin-top: -2.75rem;
}

.home-stats-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: #fff;
    border-radius: var(--radius-lg, 22px);
    box-shadow: 0 24px 48px rgba(8, 16, 36, .18);
    padding: var(--space-5, 2rem) 1rem;
    text-align: center;
}

.home-stat-value {
    display: block;
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
    font-weight: 800;
    color: var(--color-primary-dark, #0f2a5c);
    line-height: 1.1;
}

.home-stat-label {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .85rem;
    color: var(--color-text-muted, #64748b);
    margin-top: .25rem;
}

.home-stat-label .icon {
    width: 1rem;
    height: 1rem;
}

/* -------------------------------------------------------------------------
   SÄULEN
   ------------------------------------------------------------------------- */

.home-pillars {
    padding: var(--space-8, 5rem) 0 var(--space-6, 3rem);
    background: var(--color-background, #ffffff);
}

.home-pillar-card {
    display: block;
    height: 100%;
    padding: var(--space-5, 2rem);
    border-radius: var(--radius-lg, 20px);
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5eaf2);
    text-decoration: none;
    color: inherit;
    transition: transform .18s ease, box-shadow .18s ease;
}

.home-pillar-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(15, 42, 92, .1);
}

.home-pillar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-md, 14px);
    background: rgba(37, 99, 235, .12);
    color: var(--color-primary, #2563eb);
    margin-bottom: var(--space-3, 1rem);
}

.home-pillar-card h3 {
    margin: 0 0 .4rem;
    font-size: 1.2rem;
}

.home-pillar-card p {
    margin: 0;
    color: var(--color-text-muted, #64748b);
}

/* -------------------------------------------------------------------------
   ALLGEMEINE SECTION-KOPFZEILE
   ------------------------------------------------------------------------- */

.home-section {
    padding: var(--space-8, 5rem) 0;
    /* Expliziter Hintergrund ist Pflicht: ohne body-Hintergrund als Fallback
       (siehe oben) braucht jede Sektion ihre eigene Farbe, sonst wird der
       Browser-Standard (meist weiß) sichtbar, was hier aber genau richtig ist. */
    background: var(--color-background, #ffffff);
}

.home-section-alt {
    background: var(--color-surface, #f3f6fb);
}

.home-section-head {
    max-width: 640px;
    margin: 0 auto var(--space-6, 3rem);
    text-align: center;
}

.home-section-head h2 {
    font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem);
    margin: var(--space-2, .5rem) 0;
}

.home-section-lead {
    color: var(--color-text-muted, #64748b);
    font-size: 1.05rem;
}

.home-eyebrow-sm {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-primary, #2563eb);
}

.home-eyebrow-sm .icon {
    width: 1rem;
    height: 1rem;
}

.home-feature-grid {
    margin-bottom: var(--space-2, .5rem);
}

/* -------------------------------------------------------------------------
   SPLIT-LAYOUT (Routing-Sektion: Text + Karten-Mockup)
   ------------------------------------------------------------------------- */

.home-split {
    padding: var(--space-8, 5rem) 0;
    background: var(--color-background, #ffffff);
}

.home-split-grid {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: var(--space-6, 3rem);
    align-items: center;
}

.home-check-list {
    list-style: none;
    margin: var(--space-4, 1.5rem) 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.home-check-list li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    color: var(--color-text, #1e293b);
}

.home-check-list .icon {
    width: 1.1rem;
    height: 1.1rem;
    color: var(--color-primary, #2563eb);
    flex-shrink: 0;
    margin-top: .15rem;
}

.home-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    justify-content: center;
    margin-bottom: var(--space-4, 1.5rem);
}

.home-chip-row-left {
    justify-content: flex-start;
}

.home-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem 1rem;
    border-radius: var(--radius-full, 999px);
    background: var(--color-surface, #f3f6fb);
    border: 1px solid var(--color-border, #e5eaf2);
    font-size: .88rem;
    font-weight: 500;
}

.home-chip .icon {
    width: 1rem;
    height: 1rem;
    color: var(--color-primary, #2563eb);
}

.home-mockup {
    border-radius: var(--radius-lg, 22px);
    filter: drop-shadow(0 26px 46px rgba(15, 42, 92, .18));
}

.home-mockup svg {
    width: 100%;
    height: auto;
    display: block;
}

/* -------------------------------------------------------------------------
   POI-GRID
   ------------------------------------------------------------------------- */

.home-poi-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .75rem;
    margin-bottom: var(--space-6, 3rem);
}

.home-poi-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .5rem;
    padding: var(--space-4, 1.5rem) .75rem;
    border-radius: var(--radius-md, 14px);
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5eaf2);
    font-size: .82rem;
    font-weight: 500;
    transition: transform .15s ease, box-shadow .15s ease;
}

.home-poi-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(15, 42, 92, .08);
}

.home-poi-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: rgba(37, 99, 235, .1);
    color: var(--color-primary, #2563eb);
}

/* -------------------------------------------------------------------------
   BILDERGALERIE (Beispielfotos - siehe Kommentar in index.php)
   ------------------------------------------------------------------------- */

.home-gallery {
    padding: var(--space-8, 5rem) 0;
    background: var(--color-background, #ffffff);
}

.home-gallery-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    grid-template-rows: repeat(2, 200px);
    gap: var(--space-3, 1rem);
}

.home-gallery-item {
    position: relative;
    border-radius: var(--radius-lg, 20px);
    overflow: hidden;
    background-size: cover;
    background-position: center;
}

.home-gallery-item.is-tall {
    grid-row: span 2;
}

.home-gallery-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(8, 15, 30, .55) 0%, rgba(8, 15, 30, 0) 45%);
}

.home-gallery-caption {
    position: absolute;
    left: 1rem;
    bottom: .9rem;
    z-index: 1;
    color: #fff;
    font-size: .88rem;
    font-weight: 600;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}

/* -------------------------------------------------------------------------
   COMMUNITY - ZEILEN-LISTE (Abwechslung zu Card-Grids)
   ------------------------------------------------------------------------- */

.home-row-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 var(--space-6, 3rem);
    max-width: 900px;
    margin: 0 auto;
}

.home-row-item {
    display: flex;
    gap: var(--space-3, 1rem);
    padding: var(--space-4, 1.5rem) 0;
    border-bottom: 1px solid var(--color-border, #e5eaf2);
}

.home-row-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: var(--radius-md, 14px);
    background: rgba(37, 99, 235, .1);
    color: var(--color-primary, #2563eb);
}

.home-row-item h3 {
    margin: 0 0 .25rem;
    font-size: 1.02rem;
}

.home-row-item p {
    margin: 0;
    font-size: .9rem;
    color: var(--color-text-muted, #64748b);
}

/* -------------------------------------------------------------------------
   DUNKLER KONTRASTBLOCK (Datenschutz)
   ------------------------------------------------------------------------- */

.home-section-dark {
    background: linear-gradient(180deg, #0f2a5c 0%, #0b1a38 100%);
    color: #fff;
}

.home-section-dark h2 {
    color: #fff;
}

.home-eyebrow-sm-light {
    color: #7dd3fc;
}

.home-section-lead-light {
    color: rgba(255, 255, 255, .78);
}

.home-card-dark {
    height: 100%;
    padding: var(--space-4, 1.5rem);
    border-radius: var(--radius-lg, 18px);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
}

.home-card-dark .feature-icon {
    color: #7dd3fc;
}

.home-card-dark .feature-title {
    color: #fff;
}

.home-card-dark .feature-text {
    color: rgba(255, 255, 255, .72);
}

.home-card-dark code {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    padding: .1rem .35rem;
    border-radius: 4px;
}

/* -------------------------------------------------------------------------
   ROADMAP
   ------------------------------------------------------------------------- */

.home-roadmap-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 1rem);
    max-width: 720px;
    margin: 0 auto;
}

.home-roadmap-item {
    display: flex;
    gap: var(--space-3, 1rem);
    padding: var(--space-4, 1.5rem);
    border-radius: var(--radius-lg, 20px);
    background: var(--color-surface, #fff);
    border: 1px dashed var(--color-border, #cdd6e4);
}

.home-roadmap-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: var(--radius-md, 14px);
    background: var(--color-background, #f3f6fb);
    color: var(--color-text-muted, #64748b);
}

.home-roadmap-item h3 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    font-size: 1.05rem;
    margin: 0 0 .3rem;
}

.home-roadmap-item p {
    margin: 0;
    color: var(--color-text-muted, #64748b);
    font-size: .92rem;
}

.badge-planned {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: .2rem .5rem;
    border-radius: var(--radius-full, 999px);
    background: rgba(37, 99, 235, .12);
    color: var(--color-primary, #2563eb);
}

/* -------------------------------------------------------------------------
   NEUIGKEITEN / BLOG
   ------------------------------------------------------------------------- */

.home-news {
    padding: var(--space-8, 5rem) 0;
    background: var(--color-surface, #f3f6fb);
}

.home-news-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2, .5rem);
    max-width: 420px;
    margin: 0 auto;
    padding: var(--space-6, 3rem);
    text-align: center;
    border-radius: var(--radius-lg, 20px);
    background: var(--color-background, #fff);
    border: 1px dashed var(--color-border, #cdd6e4);
    color: var(--color-text-muted, #64748b);
}

.home-news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-4, 1.5rem);
}

.home-news-card {
    display: block;
    padding: var(--space-4, 1.5rem);
    border-radius: var(--radius-lg, 20px);
    background: var(--color-background, #fff);
    border: 1px solid var(--color-border, #e5eaf2);
    text-decoration: none;
    color: inherit;
    transition: transform .18s ease, box-shadow .18s ease;
}

.home-news-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(15, 42, 92, .08);
}

.home-news-date {
    font-size: .8rem;
    color: var(--color-text-muted, #64748b);
}

.home-news-card h3 {
    margin: .3rem 0;
    font-size: 1.05rem;
}

.home-news-card p {
    margin: 0;
    font-size: .9rem;
    color: var(--color-text-muted, #64748b);
}

/* -------------------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------------------- */

@media (max-width: 991px) {
    .home-hero-grid {
        grid-template-columns: 1fr;
    }

    .home-hero-visual {
        margin-top: var(--space-6, 3rem);
        max-width: 340px;
    }

    .home-split-grid {
        grid-template-columns: 1fr;
    }

    .home-split-visual {
        order: -1;
    }

    .home-poi-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .home-row-list {
        grid-template-columns: 1fr;
    }

    .home-gallery-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .home-gallery-grid {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }

    .home-gallery-item,
    .home-gallery-item.is-tall {
        grid-row: auto;
        height: 220px;
    }
}

@media (max-width: 767px) {
    body.page-home .site-header {
        position: relative;
        background: #0f2a5c;
    }

    .home-hero {
        padding-top: var(--space-6, 3rem);
    }

    .home-hero-chip {
        display: none;
    }

    .home-stats-bar {
        grid-template-columns: 1fr;
        gap: var(--space-3, 1rem);
    }

    .home-poi-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .home-section {
        padding: var(--space-6, 3rem) 0;
    }

    .home-split {
        padding: var(--space-6, 3rem) 0;
    }
}