/* /var/www/html/CRSS/CRSS.css – Komplette Version mit geteiltem Header & Maus-Scrolling (16.12.2025) */

#crss-section.crss-body {
    margin: 0; padding: 0; font-family: "Montserrat", sans-serif;
    background: #f1f3f5; color: #1a1a1a; min-height: 100vh; width: 100%;
}

/* ==================================== */
/* GETEILTER HEADER – B2C links, CRSS rechts */
/* ==================================== */
.crss-split-header {
    display: flex;
    width: 100%;
    height: 150px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

.header-part {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
    cursor: grab;
    padding: 15px 10px;
    position: relative;
}

/* B2C (Private) – Weißer Hintergrund, schwarze Schrift */
.private-part {
    background: #ffffff;
    color: #000000;
}

/* CRSS (Business) – Schwarzer Hintergrund, weiße Schrift */
.business-part {
    background: #000000;
    color: #ffffff;
}

/* Titel */
.header-title {
    font-size: 1.8em;
    font-weight: 900;
    margin: 0 0 6px 0;
    letter-spacing: -0.8px;
}

/* Subtitle */
.header-subtitle {
    font-size: 0.9em;
    font-weight: 600;
    margin: 0 0 10px 0;
    opacity: 0.9;
}

/* Button */
.select-btn {
    background: transparent;
    border: 2px solid currentColor;
    padding: 8px 20px;
    font-size: 0.95em;
    font-weight: 700;
    border-radius: 40px;
    cursor: grab;
    transition: all 0.3s ease;
}

.private-part .select-btn {
    border-color: #000000;
    color: #000000;
}

.business-part .select-btn {
    border-color: #ffffff;
    color: #ffffff;
}

.header-part:hover .select-btn,
.header-part.crss-active .select-btn {
    background: rgba(255,255,255,0.2);
    transform: translateY(-2px);
}

/* Aktive Seite – Glow + Skalierung */
.header-part.crss-active {
    transform: scale(1.02);
    box-shadow: 0 0 25px rgba(255,255,255,0.4);
}

/* ==================================== */
/* GALLERY & FEATURED CARD */
/* ==================================== */
.crss-packages-rotator {
    padding: 40px 20px;
    background: #f1f3f5;
}

.crss-packages-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

.crss-featured-package {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}

.crss-featured-card {
    width: 100%;
    max-width: 1100px;
    height: 400px;
    background: white;
    box-shadow: 0 15px 40px rgba(0,0,0,0.18);
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    border: 1px solid #e1e5e9;
}

.cr-video-container { width: 65%; height: 100%; }
.crss-featured-info { width: 35%; padding: 30px 25px; gap: 14px; background: #fff; display: flex; flex-direction: column; justify-content: center; }

.crss-featured-info h3 { font-size: 1.5em; padding-bottom: 8px; border-bottom: 3px solid #28a745; }
.crss-featured-desc { font-size: 1em; color: #444; line-height: 1.5; }
.crss-featured-info ul { list-style: none; padding: 0; margin: 0; }
.crss-featured-info ul li { font-size: 0.95em; margin: 10px 0; padding-left: 28px; position: relative; }
.crss-featured-info ul li::before { content: "✓"; color: #28a745; font-weight: bold; font-size: 1.2em; position: absolute; left: 0; top: -3px; }

.crss-btn.crss-select-btn {
    background: linear-gradient(135deg, #28a745, #20c997); color: white; border: none; padding: 14px 30px; font-size: 1.1em; font-weight: 600;
    cursor: grab; border-radius: 12px; box-shadow: 0 8px 20px rgba(40,167,69,.4); transition: all .4s ease; text-transform: uppercase; letter-spacing: .5px;
}
.crss-btn.crss-select-btn:hover {
    background: linear-gradient(135deg, #34d058, #28a745); transform: translateY(-3px); box-shadow: 0 12px 25px rgba(40,167,69,.5);
}

/* Packages – nebeneinander, Maus-Position-Scrolling (15% links/rechts) */
.crss-packages-row {
    cursor: grab;
    .crss-packages-row::-webkit-scrollbar { display: none; }
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    -ms-overflow-style: none;
    scrollbar-width: none;
    display: flex;
    gap: 25px;
    padding: 40px 20px;
    background: #f1f3f5;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    cursor: grab;
}

.crss-packages-row::-webkit-scrollbar { display: none; }
.crss-packages-row { -ms-overflow-style: none; scrollbar-width: none; }
    cursor: grab;
    .crss-packages-row::-webkit-scrollbar { display: none; }
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    -ms-overflow-style: none;
    scrollbar-width: none;

.crss-package-thumb {
    width: 300px;
    height: 170px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(0,0,0,.15);
    cursor: grab;
    transition: all .4s ease;
    flex-shrink: 0;
}

.crss-package-thumb:hover { transform: translateY(-8px) scale(1.05); box-shadow: 0 15px 35px rgba(0,0,0,0.25); }
.crss-package-thumb.crss-active { transform: scale(1.06); box-shadow: 0 12px 30px rgba(0,0,0,0.2); }

.crss-package-thumb .thumb-content { padding: 15px; }
.crss-thumb-icon { font-size: 2.6em; margin-bottom: 10px; }
.crss-thumb-title { font-size: 1.1em; margin: 0 0 6px 0; }
.crss-thumb-desc { font-size: 0.85em; line-height: 1.3; }

/* Responsive */
@media (max-width: 768px) {
    .crss-split-header { height: auto; flex-direction: column; }
    .header-part { padding: 40px 20px; }
    .crss-featured-card { height: auto; flex-direction: column; }
    .cr-video-container, .crss-featured-info { width: 100%; }
    .cr-video-container { height: 250px; }
}
.crss-packages-row:active {
    cursor: grabbing;
}

/* CSP-sichere Featured-Video-Container (Platzhalter) */
.crss-featured-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.crss-featured-placeholder .placeholder-content {
    text-align: center;
    color: white;
    padding: 40px;
}

.crss-featured-placeholder .placeholder-icon {
    font-size: 6em;
    margin-bottom: 20px;
}

.crss-featured-placeholder h2 {
    font-size: 2.2em;
    margin: 0 0 12px 0;
}

.crss-featured-placeholder p {
    font-size: 1.3em;
    opacity: 0.95;
    margin: 0 0 30px 0;
}

.crss-featured-placeholder .price-badge {
    background: rgba(255,255,255,0.25);
    padding: 12px 28px;
    border-radius: 50px;
    font-weight: bold;
    display: inline-block;
}

/* Sicherstellen, dass beide Bereiche nebeneinander bleiben und nichts überlagert */
.crss-featured-card {
    position: relative;
    overflow: hidden; /* Verhindert Überlappung */
}

.cr-video-container {
    width: 65%;
    pointer-events: none; /* WICHTIG: Linker Bereich fängt keine Klicks mehr ab */
    position: relative;
    z-index: 1;
}

.crss-featured-info {
    width: 35%;
    position: relative;
    z-index: 2; /* Rechts liegt oben */
    pointer-events: auto; /* Erlaubt Klicks auf Buttons */
}

/* Button explizit klickbar machen */
.crss-btn.crss-select-btn {
    position: relative;
    z-index: 10;
    cursor: pointer !important; /* Erzwingt Hand-Cursor */
}

/* Optional: Beim Hover über den gesamten Card den Cursor nur auf klickbaren Bereichen ändern */
.crss-featured-card:hover .cr-video-container {
    cursor: default;
}