@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --bg: #040406;
    --panel: #0a0a0f;
    --white: #fff;
    --muted: rgba(255,255,255,.62);
    --red: #ff1644;
    --red2: #a90028;
    --blue: #315dff;
    --purple: #8d45ff;
    --line: rgba(255,255,255,.1);
    --container: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--white);
    font-family: Inter, Arial, sans-serif;
    overflow-x: hidden;
    position: relative;
    isolation: isolate;
}

/*
 * Fester Charivari-Hintergrund:
 * Das Motiv bleibt beim Scrollen an exakt derselben Stelle stehen.
 * Der Seiteninhalt bewegt sich darüber hinweg.
 */
.site-background {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(
            180deg,
            rgba(2, 7, 12, .34) 0%,
            rgba(2, 7, 12, .18) 38%,
            rgba(2, 7, 12, .42) 100%
        ),
        url('../images/charivari-stoppelmarkt-background.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transform: translateZ(0);
    will-change: transform;
}

/* Feine Vignette für einen hochwertigen, ruhigen Rand */
.site-background::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at center,
        rgba(0,0,0,0) 20%,
        rgba(0,0,0,.18) 65%,
        rgba(0,0,0,.55) 100%
    );
}

main,
.site-footer {
    position: relative;
    z-index: 1;
}

body.no-scroll { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
::selection { background: var(--red); color: white; }

.site-header {
    position: fixed;
    z-index: 1000;
    top: 0; left: 0; right: 0;
    height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4vw;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: rgba(3,3,6,.68);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.brand { display:flex; align-items:center; gap:11px; }
.brand-mark {
    width: 42px; height: 42px;
    display:grid; place-items:center;
    border-radius: 50%;
    font-family: "Barlow Condensed", sans-serif;
    font-weight:900; font-size:25px;
    background: linear-gradient(135deg,var(--red),#ff5574);
    box-shadow: 0 0 30px rgba(255,22,68,.35);
}
.brand-text { display:flex; flex-direction:column; line-height:.95; }
.brand-text strong { font-size:15px; letter-spacing:2px; }
.brand-text small { margin-top:5px; color:#aeb4c8; font-size:9px; letter-spacing:2.2px; }

.main-nav { display:flex; align-items:center; gap:7px; }
.main-nav a {
    padding: 10px 14px;
    color: rgba(255,255,255,.7);
    font-size: 12px; font-weight:700;
    text-transform:uppercase; letter-spacing:1.3px;
    border-radius:999px;
    transition:.25s ease;
}
.main-nav a:hover, .main-nav a.active {
    color:white;
    background:rgba(255,255,255,.08);
}
.main-nav a.active { box-shadow: inset 0 -2px var(--red); }

.menu-toggle {
    display:none;
    width:45px; height:45px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.05);
    border-radius:12px;
    cursor:pointer;
}
.menu-toggle span {
    display:block; width:20px; height:2px;
    margin:4px auto; background:white;
    transition:.25s;
}

.hero {
    min-height: 100vh;
    position:relative;
    overflow:hidden;
    display:grid; place-items:center;
    isolation:isolate;
    background:
      radial-gradient(circle at 15% 48%, rgba(255,0,45,.18), transparent 28%),
      radial-gradient(circle at 87% 35%, rgba(35,75,255,.18), transparent 30%),
      linear-gradient(120deg,rgba(3,3,5,.58),rgba(18,2,7,.42) 38%,rgba(5,9,26,.46) 75%,rgba(3,3,5,.62));
}
.hero:after {
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(90deg,rgba(0,0,0,.4),transparent 50%,rgba(0,0,0,.4));
}
.hero-noise {
    position:absolute; inset:0; opacity:.04;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}
.hero-orb { position:absolute; border-radius:50%; filter:blur(45px); pointer-events:none; }
.hero-orb-red {
    width:48vw; height:48vw; left:-28vw; top:18%;
    background:rgba(255,0,45,.25);
    animation:floatRed 8s ease-in-out infinite alternate;
}
.hero-orb-blue {
    width:52vw; height:52vw; right:-30vw; top:2%;
    background:rgba(20,65,255,.25);
    animation:floatBlue 9s ease-in-out infinite alternate;
}
.hero-content {
    position:relative; z-index:2;
    width:min(1000px,92%);
    text-align:center;
    padding:130px 0 80px;
}
.eyebrow {
    margin:0 0 17px;
    color:rgba(255,255,255,.54);
    font-size:11px; font-weight:800;
    letter-spacing:5px; text-transform:uppercase;
}
.hero h1 {
    margin:0;
    font-family:"Barlow Condensed", Impact, sans-serif;
    font-size:clamp(82px,15vw,190px);
    font-weight:900; line-height:.72;
    letter-spacing:-5px;
    text-transform:uppercase;
    text-shadow:0 0 20px rgba(255,255,255,.18),0 0 70px rgba(255,0,45,.25);
}
.hero h1 span {
    display:block;
    font-size:.42em;
    margin-top:25px;
    letter-spacing:13px;
    background:linear-gradient(90deg,#ff1747,#fff 45%,#557cff);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}
.hero-subtitle {
    margin:36px 0 0;
    font-family:"Barlow Condensed",sans-serif;
    font-size:clamp(25px,4vw,43px);
    text-transform:uppercase;
    letter-spacing:1px;
}
.hero-subtitle strong { color:#ff3157; }
.hero-copy {
    max-width:620px; margin:20px auto 0;
    color:var(--muted); line-height:1.7; font-size:15px;
}
.hero-actions {
    display:flex; justify-content:center; flex-wrap:wrap;
    gap:12px; margin-top:34px;
}
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:12px;
    min-height:52px; padding:0 23px;
    border-radius:999px;
    font-size:12px; font-weight:800;
    text-transform:uppercase; letter-spacing:1.1px;
    transition:.25s ease;
}
.btn-primary {
    background:linear-gradient(100deg,var(--red),#ff4266);
    box-shadow:0 12px 40px rgba(255,22,68,.24);
}
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 16px 45px rgba(255,22,68,.38); }
.btn-ghost { border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.04); }
.btn-ghost:hover { background:rgba(255,255,255,.1); transform:translateY(-3px); }
.scroll-hint {
    position:absolute; z-index:3; bottom:28px; left:50%; transform:translateX(-50%);
    display:flex; align-items:center; gap:10px;
    color:rgba(255,255,255,.45); font-size:9px;
    letter-spacing:3px; text-transform:uppercase;
}
.scroll-hint span {
    display:block; width:7px; height:7px; border-radius:50%;
    background:var(--red); box-shadow:0 0 18px var(--red);
    animation:scrollDot 1.5s infinite;
}

.section { width:min(var(--container),100%); margin:auto; padding:120px 30px; }
.section-head {
    display:flex; align-items:end; justify-content:space-between; gap:40px; margin-bottom:48px;
}
.section-head h2, .gallery-section h2, .cta-section h2 {
    margin:0;
    font-family:"Barlow Condensed",sans-serif;
    font-size:clamp(55px,8vw,100px);
    line-height:.82;
    text-transform:uppercase;
    letter-spacing:-2px;
}
h2 em { font-style:normal; color:var(--red); }
.section-intro { max-width:360px; color:var(--muted); line-height:1.7; font-size:14px; }

.video-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}
.video-card { min-width:0; }
.video-thumb {
    position:relative;
    display:block; width:100%; height:300px;
    padding:0; border:0; border-radius:18px;
    overflow:hidden; cursor:pointer;
    background:#0c0c11;
    text-align:left;
}
.video-thumb video {
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; transition:transform .5s ease;
}
.video-shade {
    position:absolute; inset:0;
    background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.78));
}
.video-number {
    position:absolute; top:16px; left:18px;
    font:700 12px "Barlow Condensed",sans-serif;
    letter-spacing:2px; color:rgba(255,255,255,.7);
}
.play-button {
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:60px; height:60px; display:grid; place-items:center;
    padding-left:3px; border-radius:50%;
    color:white; background:rgba(255,22,68,.9);
    box-shadow:0 0 0 9px rgba(255,255,255,.08),0 12px 35px rgba(0,0,0,.4);
    transition:.3s ease;
}
.video-meta {
    position:absolute; left:18px; right:18px; bottom:18px;
    display:flex; flex-direction:column; gap:5px;
}
.video-meta small { color:#ff4b6c; text-transform:uppercase; font-weight:800; font-size:9px; letter-spacing:2px; }
.video-meta strong { font-family:"Barlow Condensed"; font-size:26px; text-transform:uppercase; }
.video-thumb:hover video { transform:scale(1.06); }
.video-thumb:hover .play-button { transform:translate(-50%,-50%) scale(1.1); }
.video-note { margin:25px 0 0; color:rgba(255,255,255,.35); font-size:11px; }
.video-note span { color:var(--red); }
.video-note code { color:rgba(255,255,255,.55); }

.stats-strip {
    display:grid; grid-template-columns:repeat(4,1fr);
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    background:linear-gradient(90deg,rgba(255,0,50,.06),rgba(30,70,255,.06));
}
.stats-strip div { padding:42px 20px; text-align:center; border-right:1px solid var(--line); }
.stats-strip div:last-child { border-right:0; }
.stats-strip strong { display:block; font:900 50px "Barlow Condensed"; }
.stats-strip span { color:var(--muted); font-size:10px; letter-spacing:2px; text-transform:uppercase; }

.centered { display:block; text-align:center; }
.centered .eyebrow { margin-bottom:15px; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.feature-card {
    min-height:290px; padding:35px;
    border:1px solid var(--line); border-radius:20px;
    background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
    position:relative; overflow:hidden;
    transition:.3s ease;
}
.feature-card:after {
    content:""; position:absolute; width:200px; height:200px; border-radius:50%;
    right:-100px; top:-100px; filter:blur(4px);
}
.feature-red:after { background:rgba(255,0,55,.2); }
.feature-blue:after { background:rgba(40,80,255,.2); }
.feature-purple:after { background:rgba(140,40,255,.2); }
.feature-card:hover { transform:translateY(-8px); border-color:rgba(255,255,255,.2); }
.feature-icon { font-size:30px; }
.feature-card p { margin:35px 0 7px; color:var(--red); font-size:9px; font-weight:800; letter-spacing:2px; }
.feature-card h3 { margin:0 0 12px; font:800 35px "Barlow Condensed"; text-transform:uppercase; }
.feature-card span:last-child { color:var(--muted); line-height:1.6; font-size:13px; }

.gallery-section {
    min-height:600px; position:relative; overflow:hidden;
    padding:120px max(30px,calc((100vw - var(--container))/2));
    background:
      radial-gradient(circle at 80% 45%,rgba(42,72,255,.2),transparent 30%),
      radial-gradient(circle at 20% 65%,rgba(255,0,55,.15),transparent 28%),
      rgba(5,5,8,.72);
}
.gallery-content { position:relative; z-index:2; max-width:600px; }
.gallery-content p:not(.eyebrow) { max-width:470px; color:var(--muted); line-height:1.8; margin:25px 0; }
.gallery-shapes { position:absolute; inset:0; }
.gallery-shapes div { position:absolute; border-radius:28px; border:1px solid rgba(255,255,255,.1); transform:rotate(-12deg); }
.gallery-shapes div:nth-child(1) { width:310px;height:420px;right:18%;top:12%;background:linear-gradient(145deg,rgba(255,30,75,.18),rgba(255,255,255,.02)); }
.gallery-shapes div:nth-child(2) { width:260px;height:350px;right:4%;top:25%;background:linear-gradient(145deg,rgba(40,70,255,.2),rgba(255,255,255,.02));transform:rotate(9deg); }
.gallery-shapes div:nth-child(3) { width:220px;height:300px;right:29%;top:32%;background:rgba(255,255,255,.035);transform:rotate(22deg); }

.cta-section {
    padding:130px 30px; text-align:center;
    background:radial-gradient(circle,rgba(255,0,50,.12),transparent 40%),rgba(4,4,6,.72);
}
.cta-section p:not(.eyebrow) { max-width:600px; margin:25px auto 0; color:var(--muted); line-height:1.8; }
.cta-section .hero-actions { margin-top:28px; }

.site-footer {
    display:flex; justify-content:space-between; align-items:center; gap:30px;
    padding:35px 5vw;
    border-top:1px solid var(--line);
    color:rgba(255,255,255,.45); font-size:10px;
}
.site-footer div:first-child { display:flex; flex-direction:column; gap:7px; }
.site-footer strong { color:white; font-size:11px; letter-spacing:1.5px; }
.footer-links { display:flex; gap:20px; flex-wrap:wrap; }
.footer-links a:hover { color:white; }

.lightbox {
    position:fixed; inset:0; z-index:2000;
    display:none; align-items:center; justify-content:center;
    padding:30px;
}
.lightbox.open { display:flex; }
.lightbox-backdrop {
    position:absolute; inset:0;
    background:rgba(0,0,0,.9);
    backdrop-filter:blur(14px);
}
.lightbox-dialog {
    position:relative; z-index:2;
    width:min(1050px,100%);
    max-height:95vh;
}
.lightbox-media {
    width:100%; background:#000; border-radius:18px; overflow:hidden;
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 30px 100px rgba(0,0,0,.7);
}
.lightbox-media video { display:block; width:100%; max-height:75vh; }
.lightbox-close,.lightbox-prev,.lightbox-next {
    position:absolute; z-index:5; border:0; cursor:pointer;
    color:white; background:rgba(255,255,255,.1);
    backdrop-filter:blur(8px);
}
.lightbox-close { top:-16px; right:-16px; width:46px;height:46px;border-radius:50%;font-size:27px; }
.lightbox-prev,.lightbox-next {
    top:45%; width:50px;height:70px; border-radius:14px; font-size:42px;
}
.lightbox-prev { left:-70px; }
.lightbox-next { right:-70px; }
.lightbox-caption { padding:15px 5px; }
.lightbox-caption span { color:#ff4166; font-size:9px; text-transform:uppercase; font-weight:800; letter-spacing:2px; }
.lightbox-caption h3 { margin:5px 0; font:700 28px "Barlow Condensed"; text-transform:uppercase; }
.lightbox-caption small { color:rgba(255,255,255,.4); }

@keyframes floatRed { to { transform:translate(12%,8%) scale(1.08); } }
@keyframes floatBlue { to { transform:translate(-12%,10%) scale(1.08); } }
@keyframes scrollDot { 50% { transform:translateY(7px); opacity:.4; } }

@media (max-width: 900px) {
    .main-nav {
        position:absolute; top:82px; left:12px; right:12px;
        display:none; flex-direction:column; align-items:stretch;
        padding:12px; border:1px solid var(--line); border-radius:18px;
        background:rgba(5,5,9,.96); backdrop-filter:blur(20px);
    }
    .main-nav.open { display:flex; }
    .main-nav a { padding:15px; }
    .menu-toggle { display:block; }
    .menu-toggle.open span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
    .menu-toggle.open span:nth-child(2) { opacity:0; }
    .menu-toggle.open span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
    .video-grid { grid-template-columns:repeat(2,1fr); }
    .video-thumb { height:280px; }
    .section-head { display:block; }
    .section-intro { margin-top:25px; }
    .feature-grid { grid-template-columns:1fr; }
    .gallery-shapes div:nth-child(1) { right:-5%; }
    .gallery-shapes div:nth-child(2) { right:-18%; }
    .gallery-shapes div:nth-child(3) { right:25%; }
    .lightbox-prev { left:10px; }
    .lightbox-next { right:10px; }
}
@media (max-width: 600px) {
    .site-header { height:70px; padding:0 15px; }
    .main-nav { top:70px; }
    .hero-content { padding-top:110px; }
    .hero h1 { font-size:clamp(64px,18vw,100px); letter-spacing:-3px; }
    .hero h1 span { letter-spacing:5px; margin-top:20px; }
    .hero-copy { font-size:13px; }
    .hero-actions { flex-direction:column; align-items:stretch; }
    .btn { width:100%; }
    .section { padding:80px 15px; }
    .video-grid { grid-template-columns:1fr; gap:14px; }
    .video-thumb { height:62vw; min-height:230px; }
    .stats-strip { grid-template-columns:repeat(2,1fr); }
    .stats-strip div { border-bottom:1px solid var(--line); }
    .gallery-section { padding:90px 15px; min-height:620px; }
    .gallery-shapes { opacity:.55; }
    .gallery-shapes div:nth-child(1) { right:-45%; top:38%; }
    .gallery-shapes div:nth-child(2) { right:-35%; top:47%; }
    .gallery-shapes div:nth-child(3) { right:10%; top:52%; }
    .site-background {
        background-position: center center;
        background-size: auto 100%;
    }
    .site-footer { flex-direction:column; align-items:flex-start; }
    .lightbox { padding:12px; }
    .lightbox-close { right:4px; top:-55px; }
    .lightbox-prev,.lightbox-next { top:auto; bottom:115px; width:42px;height:48px;font-size:32px; }
    .lightbox-prev { left:4px; }
    .lightbox-next { right:4px; }
}
@media (prefers-reduced-motion: reduce) {
    *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }
}


/* =========================
   GALERIE
========================= */

.gallery-section {
    position: relative;
    padding: 110px 5%;
    overflow: hidden;
}

.gallery-content {
    position: relative;
    z-index: 2;
    max-width: 850px;
    margin-bottom: 50px;
}

.gallery-content h2 {
    margin: 0 0 20px;
    font-family: "Barlow Condensed", sans-serif;
    font-size: clamp(55px, 8vw, 100px);
    line-height: .85;
    text-transform: uppercase;
}

.gallery-content h2 em {
    color: #ff174f;
    font-style: normal;
}

.gallery-content p:not(.eyebrow) {
    max-width: 650px;
    color: #aaa;
}

.gallery-content code {
    padding: 3px 7px;
    border-radius: 5px;
    color: #fff;
    background: rgba(255,255,255,.08);
}

/* 4 Bilder pro Reihe */

.gallery-grid {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.gallery-item {
    position: relative;
    padding: 0;
    border: 0;
    border-radius: 18px;
    overflow: hidden;

    aspect-ratio: 4 / 3;

    background: #15151e;
    cursor: pointer;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    display: block;

    object-fit: cover;

    transition:
        transform .45s ease,
        filter .45s ease;
}

.gallery-item::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.65),
            transparent 60%
        );

    opacity: 0;
    transition: opacity .3s ease;
}

.gallery-overlay {
    position: absolute;
    z-index: 2;

    inset: 0;

    display: grid;
    place-items: center;

    opacity: 0;

    transition: opacity .3s ease;
}

.gallery-overlay span {
    display: grid;
    place-items: center;

    width: 55px;
    height: 55px;

    border-radius: 50%;

    background: #fff;
    color: #111;

    font-size: 32px;
    font-weight: 400;
}

.gallery-item:hover img {
    transform: scale(1.08);
    filter: brightness(.75);
}

.gallery-item:hover::after,
.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

/* Keine Bilder vorhanden */

.gallery-empty {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    gap: 8px;

    padding: 35px;

    border: 1px dashed rgba(255,255,255,.18);
    border-radius: 18px;

    background: rgba(255,255,255,.03);

    color: #aaa;
}

.gallery-empty strong {
    color: #fff;
    font-size: 18px;
}

.gallery-empty code {
    color: #fff;
}

/* =========================
   LIGHTBOX
========================= */

.gallery-lightbox {
    position: fixed;
    inset: 0;

    z-index: 9999;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 40px 90px;

    background: rgba(0,0,0,.94);
}

.gallery-lightbox.active {
    display: flex;
}

.gallery-lightbox-content {
    max-width: 1200px;
    max-height: 90vh;

    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-lightbox-content img {
    display: block;

    max-width: 100%;
    max-height: 88vh;

    object-fit: contain;

    border-radius: 10px;

    box-shadow:
        0 30px 100px rgba(0,0,0,.7);
}

/* Buttons */

.gallery-close,
.gallery-prev,
.gallery-next {
    position: fixed;

    z-index: 10000;

    border: 0;

    color: #fff;

    background: rgba(255,255,255,.1);

    cursor: pointer;

    transition:
        background .2s ease,
        transform .2s ease;
}

.gallery-close:hover,
.gallery-prev:hover,
.gallery-next:hover {
    background: rgba(255,255,255,.2);
}

.gallery-close {
    top: 20px;
    right: 25px;

    width: 50px;
    height: 50px;

    border-radius: 50%;

    font-size: 34px;
    line-height: 1;
}

.gallery-prev,
.gallery-next {
    top: 50%;

    width: 55px;
    height: 75px;

    transform: translateY(-50%);

    border-radius: 15px;

    font-size: 50px;
    line-height: 1;
}

.gallery-prev {
    left: 20px;
}

.gallery-next {
    right: 20px;
}

body.gallery-open {
    overflow: hidden;
}


/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1100px) {

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

}

@media (max-width: 750px) {

    .gallery-section {
        padding: 80px 20px;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .gallery-lightbox {
        padding: 30px 55px;
    }

    .gallery-prev,
    .gallery-next {
        width: 42px;
        height: 58px;
        font-size: 40px;
    }

    .gallery-prev {
        left: 8px;
    }

    .gallery-next {
        right: 8px;
    }

}

@media (max-width: 500px) {

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

    .gallery-item {
        aspect-ratio: 16 / 11;
    }

}