/* ===== RD Eventtechnik – Brand Theme (hell) ===== */
:root {
    --rd-red: #ff0000;
    --rd-primary: #ff0000; /* RD Rot */
    --rd-primary-600: #d60000;
    --rd-primary-700: #b80000;
    --rd-ink: #0f172a;
    --rd-text: #1f2937;
    --rd-muted: #6b7280;
    --rd-border: #e5e7eb;
    --rd-bg: #ffffff;
    --rd-bg-soft: #f8fafc;
    --prefooter-bg: #f5f6f8;
    --prefooter-title: #5b6670;
}

/* ===== Base ===== */
html, body {
    background: var(--rd-bg);
    color: var(--rd-text)
}

body {
    font-family: "Figtree",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif
}

a {
    color: var(--rd-primary);
    text-decoration: none
}

    a:hover {
        text-decoration: underline
    }

/* ===== NAVBAR (dark) ===== */
.rd-header {
    z-index: 1050
}

.navbar {
    background: #1f1f1f !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.18)
}

/* Mobil: leicht transparent + Blur */
@media (max-width: 991.98px) {
    .navbar {
        background: rgba(31,31,31,.85) !important;
        backdrop-filter: saturate(120%) blur(6px);
        -webkit-backdrop-filter: saturate(120%) blur(6px);
    }

    .mobile-nav.show {
        background: rgba(31,31,31,.92);
        backdrop-filter: saturate(120%) blur(6px);
        -webkit-backdrop-filter: saturate(120%) blur(6px);
        border-radius: .75rem;
        margin-top: .5rem;
        padding: .75rem;
    }
}

.mobile-nav {
    /* wenn zu, kein overlay */
}

    .mobile-nav.show {
        background: rgba(31,31,31,.92);
        backdrop-filter: saturate(120%) blur(6px);
        -webkit-backdrop-filter: saturate(120%) blur(6px);
        border-radius: .75rem;
        margin-top: .5rem;
        padding: .75rem;
    }

    .mobile-nav .nav-link {
        padding: .5rem .25rem;
    }

.navbar-brand img {
    height: 44px
}

/* alle Nav-Links im dunklen Header */
.navbar .nav-link {
    color: #fff !important;
    font-weight: 500;
    opacity: .85;
}

    .navbar .nav-link:hover,
    .navbar .nav-link.active {
        opacity: 1;
        color: var(--rd-primary) !important;
    }

/* Unterstreichung nur auf großen Bildschirmen, wenn aktiv */
@media (min-width: 992px) {
    .navbar .nav-link.active {
        position: relative;
    }

        .navbar .nav-link.active::after {
            content: "";
            position: absolute;
            left: .75rem;
            right: .75rem;
            bottom: .2rem;
            height: 3px;
            border-radius: 3px;
            background: var(--rd-primary)
        }
}

/* ========== Hamburger Button (animated) ========== */
.hamburger {
    width: 42px;
    height: 38px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid rgba(255,255,255,.25);
    background: transparent;
    border-radius: .5rem;
}

    .hamburger .bar {
        width: 22px;
        height: 2px;
        background: #fff;
        display: block;
        transition: transform .25s ease, opacity .25s ease, background-color .25s ease;
    }

    .hamburger.is-active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger.is-active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger.is-active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

/* optional dünne rote Linie unten am Header */
.rd-accent-line {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    background: var(--rd-primary)
}

/* Erster Buchstabe rot, Rest weiß */
.navbar .nav-link .nav-text {
    display: inline-block;
    color: #fff;
}

    .navbar .nav-link .nav-text::first-letter {
        color: var(--rd-primary) !important;
        font-weight: 700;
    }

/* Hover/Aktiv: kompletter Text rot (wie zuvor gewünscht) */
.navbar .nav-link:hover .nav-text,
.navbar .nav-link.active .nav-text {
    color: var(--rd-primary) !important;
}

/* Mobile: gleiche Logik */
@media (max-width: 991.98px) {
    .navbar .nav-link .nav-text::first-letter {
        color: var(--rd-primary);
        font-weight: 700;
    }
}

/* ===== Buttons ===== */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--rd-primary);
    --bs-btn-border-color: var(--rd-primary);
    --bs-btn-hover-bg: var(--rd-primary-600);
    --bs-btn-hover-border-color: var(--rd-primary-600);
    --bs-btn-active-bg: var(--rd-primary-700);
    --bs-btn-active-border-color: var(--rd-primary-700);
    --bs-btn-focus-shadow-rgb: 255,0,0;
}

.btn-outline-primary {
    --bs-btn-color: var(--rd-primary);
    --bs-btn-border-color: var(--rd-primary);
    --bs-btn-hover-bg: var(--rd-primary);
    --bs-btn-hover-border-color: var(--rd-primary);
    --bs-btn-hover-color: #fff;
}

/* ===== Hero ===== */
.hero-carousel {
    position: relative;
    width: 100%;
    height: clamp(42vh,62vh,78vh);
    overflow: hidden;
    background: #000
}

    .hero-carousel .hero-track {
        display: flex;
        width: 100%;
        height: 100%;
        animation: slideX 24s infinite;
        z-index: 0;
    }

    .hero-carousel .hero-slide {
        min-width: 100%;
        height: 100%;
        position: relative
    }

        .hero-carousel .hero-slide img {
            -webkit-user-drag: none;
            user-select: none;
            pointer-events: none;
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: brightness(.78);
        }

    .hero-carousel .hero-overlay {
        position: absolute;
        inset: 0;
        pointer-events: none
    }

    .hero-carousel::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg,rgba(15,23,42,.65) 0%,rgba(15,23,42,.35) 45%,rgba(0,0,0,0) 70%);
        pointer-events: none;
        z-index: 1;
    }

    .hero-carousel::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,.28);
        pointer-events: none;
        z-index: 2;
    }

.hero-blocker {
    position: absolute;
    inset: 0;
    background: transparent;
    z-index: 3;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
}

    .hero-overlay .text-white {
        color: #fff !important;
    }

.hero-copyright {
    position: absolute;
    right: 1rem;
    bottom: 0.75rem;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.85);
    background: rgba(0,0,0,0.45);
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 500;
    pointer-events: none;
    z-index: 5;
}

.text-shadow {
    text-shadow: 0 14px 30px rgba(0,0,0,.55)
}

@keyframes slideX {
    0%,30% {
        transform: translateX(0)
    }

    33%,63% {
        transform: translateX(-100%)
    }

    66%,96% {
        transform: translateX(-200%)
    }

    100% {
        transform: translateX(0)
    }
}

/* ===== Sections ===== */
#hcaptcha-container {
    min-height: 78px;
}

section {
    scroll-margin-top: 84px
}

.bg-light {
    background: var(--rd-bg-soft) !important
}

.section-divider {
    height: 4px;
    background: linear-gradient(90deg,var(--rd-primary),#ff6b6b 50%,var(--rd-primary))
}

.badge-soft {
    display: inline-block;
    padding: .35rem .6rem;
    border-radius: 50rem;
    background: rgba(255,0,0,.08);
    color: var(--rd-primary);
    font-weight: 600;
    font-size: .85rem
}

/* ===== Cards ===== */
.card {
    border: 1px solid var(--rd-border)
}

    .card.h-100:hover {
        transform: translateY(-2px);
        transition: transform .2s ease,box-shadow .2s ease;
        box-shadow: 0 16px 36px rgba(15,23,42,.08)
    }

    .card .card-img-top {
        object-fit: cover
    }

/* ===== Typography ===== */
h1, .display-6 {
    color: var(--rd-ink)
}

.lead {
    color: var(--rd-muted)
}

/* ===== Footer (full red band) ===== */
.rd-footer {
    background: #222;
    color: #ccc;
    position: relative; /* wichtig: Anker für ::after */
    overflow: hidden; /* falls irgendwas übersteht */
}

    .rd-footer a {
        color: #ccc;
        text-decoration: none;
    }

        .rd-footer a:hover {
            color: #fff;
        }

    /* dunkle Trennkante nach unten, damit es „fertig“ aussieht */
    .rd-footer::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0; /* am Footer-Boden, nicht mitten in der Seite */
        height: 4px;
        pointer-events: none;
        background: linear-gradient(0deg, rgba(0,0,0,.25), rgba(0,0,0,0));
    }

    .rd-footer .footer-legal a {
        position: relative;
        text-decoration: none; /* keine Standard-Unterstreichung */
        padding-bottom: 2px; /* Platz, damit nichts springt */
    }

        .rd-footer .footer-legal a::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0; /* direkt unter dem Text */
            height: 3px;
            border-radius: 3px;
            background: var(--rd-primary);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform .18s ease;
        }

        .rd-footer .footer-legal a:hover::after,
        .rd-footer .footer-legal a:focus-visible::after {
            transform: scaleX(1);
        }


/* ===== Back-to-top Button ===== */
.back-to-top {
    position: fixed;
    right: 16px;
    bottom: 16px;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    border: 0;
    outline: none;
    background: var(--rd-primary);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 12px 28px rgba(0,0,0,.22);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    z-index: 1060;
}

    .back-to-top:hover {
        filter: brightness(0.95);
    }

    .back-to-top.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

/* optional: etwas Abstand bei sehr schmalen Geräten */
@media (max-width: 480px) {
    .back-to-top {
        right: 12px;
        bottom: 12px;
        width: 44px;
        height: 44px;
        border-radius: 10px;
    }
}

/* ===== Utilities ===== */
.object-fit-cover {
    object-fit: cover
}

::selection {
    background: var(--rd-primary);
    color: #fff
}

/* --- Prefooter --- */
.prefooter {
    background: #f5f5f5; /* hellgrau */
    border-top: 4px solid var(--rd-primary, #EC3892);
}

.prefooter-logo {
    height: 56px;
    width: auto;
    display: block;
}

.prefooter-title {
    color: var(--prefooter-title);
    font-weight: 700;
}

.prefooter-links a {
    color: #4a4f57;
    text-decoration: none;
}

    .prefooter-links a:hover {
        color: var(--rd-primary);
        text-decoration: underline;
    }

/* --- Animated Instagram Button --- */
/* --- Animated Instagram Button in RD-Rot mit Pulse --- */
.insta-btn {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .65rem .95rem;
    border-radius: 9999px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    color: #fff;
    position: relative;
    overflow: hidden;
    background: var(--rd-primary, #EC3892); /* Dein Rot */
    border: 0;
    box-shadow: 0 0 0 rgba(236,56,146,.6);
    transition: transform .18s ease, box-shadow .18s ease, background .3s ease;
    animation: pulseGlow 3s ease-in-out infinite;
}

    .insta-btn svg {
        flex: 0 0 auto;
    }

    /* Hover-Effekt: kühles Blau */
    .insta-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 24px rgba(0,0,0,.18);
        background: #3B82F6; /* bläulich beim Hover */
    }

    .insta-btn:active {
        transform: translateY(0);
    }

/* Pulse-Animation */
@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 0 rgba(236,56,146,0.4);
    }

    50% {
        box-shadow: 0 0 18px rgba(236,56,146,0.7);
    }
}


/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .insta-btn {
        animation: none;
    }
}

/* Responsive tweaks */
@media (max-width: 767.98px) {
    .prefooter-logo {
        height: 44px;
    }
}

/* Platzhalter für externe Embeds (z.B. Maps) */
.ext-embed {
    position: relative;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: .5rem;
}

    .ext-embed::before {
        content: "";
        display: block;
        padding-top: 56.25%; /* 16:9 Ratio, falls kein .ratio-Wrapper */
    }

    .ext-embed iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

    .ext-embed .ext-embed-placeholder {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        text-align: center;
        padding: 1rem;
        background: repeating-linear-gradient(45deg, rgba(0,0,0,.03) 0 10px, rgba(0,0,0,.05) 10px 20px);
    }

        .ext-embed .ext-embed-placeholder > div {
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: .75rem;
            padding: 1rem 1.25rem;
            max-width: 520px;
            box-shadow: 0 10px 30px rgba(0,0,0,.06);
        }

        .ext-embed .ext-embed-placeholder p {
            color: #6b7280;
            margin: .25rem 0 .5rem;
        }

/* 404 – zentrierter, freundlicher Screen */
.notfound-wrap {
    min-height: calc(100vh - 160px); /* Platz für Header/Footer */
    display: grid;
    place-items: center;
    padding: 2rem 1rem;
    background: var(--rd-bg-soft);
}

.notfound-card {
    max-width: 560px;
    width: 100%;
    text-align: center;
    background: #fff;
    border: 1px solid var(--rd-border);
    border-radius: 1rem;
    padding: 2rem 1.5rem;
    position: relative;
    overflow: hidden;
}

    /* orangener Akzentkasten-Effekt */
    .notfound-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(255,149,0,.12), rgba(255,149,0,.08));
        pointer-events: none;
    }

/* Kopfbereich mit kräftigem Orange */
.nf-icon {
    width: 86px;
    height: 86px;
    display: grid;
    place-items: center;
    margin: 0 auto 1rem;
    border-radius: 20px;
    background: #ff9500; /* Orange */
    box-shadow: 0 12px 30px rgba(255,149,0,.28);
}

/* Bild im Bootstrap-Ratio richtig einpassen (auch mit <picture>) */
.ratio > picture {
    position: absolute;
    inset: 0;
}
    /* füllt die Ratio-Fläche */
    .ratio > picture > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

/* saubere Abrundung/Clipping am Kartenkopf */
.card .ratio.rounded-top {
    overflow: hidden;
    border-top-left-radius: var(--bs-card-inner-border-radius, .5rem);
    border-top-right-radius: var(--bs-card-inner-border-radius, .5rem);
}

/* Blur-Up */
.blur-up {
    filter: blur(10px);
    opacity: .6;
    transition: filter .35s, opacity .35s;
}

    .blur-up.is-loaded {
        filter: blur(0);
        opacity: 1;
    }

/* Button bleibt in deiner CI (rot) – falls du hier auch Orange willst: */
.notfound-card .btn-primary {
    --bs-btn-bg: var(--rd-primary);
    --bs-btn-border-color: var(--rd-primary);
    --bs-btn-hover-bg: var(--rd-primary-600);
    --bs-btn-hover-border-color: var(--rd-primary-600);
}
.services .feature-title {
    display: inline-block;
    transition: color .25s ease, transform .25s ease;
    position: relative;
}

    .services .feature-title::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -6px;
        width: 0;
        height: 2px;
        background: var(--rd-red);
        transition: width .25s ease, left .25s ease;
    }

/* Hover/Focus-Effekt: Farbe + Unterstreichung + mini Lift */
.services .feature:hover .feature-title,
.services .feature:focus-within .feature-title {
    color: var(--rd-red);
    transform: translateY(-2px);
}

    .services .feature:hover .feature-title::after,
    .services .feature:focus-within .feature-title::after {
        width: 100%;
        left: 0;
    }

/* Respektiere reduzierte Bewegungen */
@media (prefers-reduced-motion: reduce) {
    .services .feature-title,
    .services .feature-title::after {
        transition: none;
    }
}