:root {
    /* PRIMARY COLORS */
    --rs-accent: #ff4500;
    --rs-accent-hover: #ff6a33;
    /* DARK MODE */
    --rs-bg-main: #0b1220;
    --rs-bg-secondary: #121b2e;
    --rs-bg-card: rgba(18, 27, 46, 0.72);
    /* GLASS */
    --rs-glass-border: rgba(255,255,255,.08);
    --rs-glass-blur: blur(14px);
    /* TEXT */
    --rs-text-primary: #ffffff;
    --rs-text-secondary: #b8c1d1;
    --rs-text-muted: #7e8aa3;
    /* BORDER */
    --rs-border: rgba(255,255,255,.06);
    /* SHADOW */
    --rs-shadow: 0 10px 35px rgba(0,0,0,.35);
    /* RADIUS */
    --rs-radius-sm: 10px;
    --rs-radius-md: 18px;
    --rs-radius-lg: 28px;
    /* TRANSITIONS */
    --rs-transition: all .25s ease;
    /* Font-Sizes */
    --rs-text-xs: 0.75rem;
    --rs-text-sm: 0.875rem;
    --rs-text-md: 1rem;
    --rs-text-lg: 1.125rem;
    --rs-text-xl: 1.5rem;
    --rs-text-2xl: 2.2rem;
    --rs-text-hero: clamp(3rem, 7vw, 5.5rem);
    /* Abstände */
    --rs-space-xs: .5rem;
    --rs-space-sm: 1rem;
    --rs-space-md: 1.5rem;
    --rs-space-lg: 2.5rem;
    --rs-space-xl: 4rem;
    --rs-space-2xl: 6rem;

    --rs-hero-overlay: linear-gradient(180deg, rgba(11, 18, 32, 0.4) 0%, rgba(11, 18, 32, 0.8) 100%);
}

/* Smooth Scrolling für die gesamte Seite */
html {
    scroll-behavior: smooth;
}

/* Offset für Anker (verhindert, dass der Sticky Header den Inhalt verdeckt) */
[id] {
    scroll-margin-top: 90px; /* Hier die ungefähre Höhe deines Headers eintragen */
}

.admin-bar .site-header {
    top: 32px; /* Standardhöhe der WP Admin-Bar */
}

/* Korrektur für schmale Bildschirme (Admin-Bar wird dort höher) */
@media screen and (max-width: 782px) {
    .admin-bar .site-header {
        top: 46px;
    }
}

/* Aktiver Link Effekt (optional, falls du Kadence Scroll-Spy nutzt) */
.main-navigation .primary-menu li.current-menu-item a {
    color: var(--rs-accent) !important;
}

body.light-mode {
    --rs-bg-main: #f4f7fb;
    --rs-bg-secondary: #ffffff;
    --rs-bg-card: rgba(255,255,255,.72);
    --rs-text-primary: #111827;
    --rs-text-secondary: #4b5563;
    --rs-text-muted: #6b7280;
    --rs-border: rgba(0,0,0,.08);

    --rs-hero-overlay: linear-gradient(180deg, rgba(244, 247, 251, 0.2) 0%, rgba(244, 247, 251, 0.6) 100%);
}

/* ==================================================
   GLASS SYSTEM
================================================== */

.rs-glass {
    position: relative;
    background: var(--rs-bg-card);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--rs-glass-border);
    box-shadow: var(--rs-shadow);
    border-radius: var(--rs-radius-md);
    overflow: hidden;
    transition: var(--rs-transition);
}
.rs-glass:hover {
    transform: translateY(-2px);
    border-color: rgba(255,255,255,.12);
    box-shadow: 0 18px 40px rgba(0,0,0,.42);
}

.rs-glow {
    position: relative;
}

.rs-glow::before {
    content: "";
    position: absolute;
    inset: -40%;
    background: radial-gradient(
            circle,
            rgba(255,69,0,.18),
            transparent 70%
        );
    z-index: 0;
    pointer-events: none;
}
.rs-glass::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
            135deg,
            rgba(255,255,255,.08),
            transparent 40%
        );
    pointer-events: none;
}

/* Margin-Utilities*/
.rs-mb-sm { margin-bottom: var(--rs-space-sm); }
.rs-mb-md { margin-bottom: var(--rs-space-md); }
.rs-mb-lg { margin-bottom: var(--rs-space-lg); }
.rs-mt-sm { margin-top: var(--rs-space-sm); }
.rs-mt-md { margin-top: var(--rs-space-md); }
.rs-mt-lg { margin-top: var(--rs-space-lg); }
.rs-mr-sm { margin-right: var(--rs-space-sm); }
.rs-mr-md { margin-right: var(--rs-space-md); }
.rs-mr-lg { margin-right: var(--rs-space-lg); }


/* Padding-Utilities*/
.rs-p-sm { padding: var(--rs-space-sm); }
.rs-p-md { padding: var(--rs-space-md); }
.rs-p-lg { padding: var(--rs-space-lg); }
.rs-p-xl { padding: var(--rs-space-xl); }

/* Text-Utilities */
.text-center {
    text-align: center;
}

/* ==========================================
   MAIN NAVIGATION: GLOW & ACTIVE
========================================== */

/* Grundstyling für die Haupt-Menüpunkte */
.header-navigation ul.menu > li > a {
    transition: all 0.3s ease !important;
    border-radius: 8px;
    color: rgba(255,255,255,.75) !important;
    margin: 0 5px !important; /* Etwas Luft zwischen den Buttons */
    position: relative;
}
.header-navigation ul.menu > li {
    text-align: center;
    margin: 0 5px !important; /* Etwas Luft zwischen den Buttons */
}

/* Hover & Active Zustand für die Hauptpunkte */
.header-navigation ul.menu > li:hover > a,
.header-navigation ul.menu > li.current-menu-item > a,
.header-navigation ul.menu > li.current-menu-ancestor > a {
    color: var(--rs-accent) !important; /* Dein Vivid Orange */
    background: rgba(255, 69, 0, 0.1) !important; /* Leichter oranger Hintergrund */
    box-shadow: 0 0 15px rgba(255, 69, 0, 0.2), inset 0 0 10px rgba(255, 69, 0, 0.1) !important;
    text-shadow: 0 0 8px rgba(255, 69, 0, 0.6) !important;
}

/* ==========================================
   SUB-MENU: GLASSMORPHISM DROPDOWN
========================================== */

/* Der Kasten der Unternavigation */
.header-navigation ul.sub-menu {
    background: rgba(18, 27, 46, 0.75) !important; /* Dunkles, transparentes Blau */
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--rs-radius-md) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6) !important;
    padding: 10px !important;
    text-align: left;
}

/* Die einzelnen Links im Dropdown */
.header-navigation ul.sub-menu li a {
    color: #cccccc !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    transition: all 0.3s ease !important;
    border-radius: 6px !important;
    padding: 12px 15px !important;
}

/* Letzter Strich im Dropdown entfernen */
.header-navigation ul.sub-menu li:last-child > a {
    border-bottom: none !important;
}

/* Hover-Effekt im Dropdown: Glow & leichtes Einrücken */
.header-navigation ul.sub-menu li:hover > a,
.header-navigation ul.sub-menu li.current-menu-item > a {
    background: rgba(255, 69, 0, 0.15) !important;
    color: #ffffff !important;
    text-shadow: 0 0 5px rgba(255, 69, 0, 0.5) !important;
    padding-left: 22px !important; /* Smoother Slide-In Effekt nach rechts */
    border-left: 3px solid var(--rs-accent) !important;
}

/* Card-System */
.rs-card {
    background: var(--rs-bg-secondary);
    border: 1px solid var(--rs-border);
    border-radius: var(--rs-radius-md);
    padding: var(--rs-space-lg);
    transition: var(--rs-transition);
}
.rs-card-hover:hover {
    transform: translateY(-4px);
    border-color: rgba(255,69,0,.3);
    box-shadow: 0 16px 40px rgba(0,0,0,.28);
}
/* OnAir */
.rs-onair-card {
    min-height: 420px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}
@media (max-width: 768px) {
    .rs-glass {
        backdrop-filter: blur(8px);
    }
}

/* Dark- Light-Mode Toggler */
/* Grunddesign des Buttons */
.rs-theme-toggle {
    background: var(--rs-bg-card);
    border: 1px solid var(--rs-glass-border);
    color: var(--rs-text-primary);
    cursor: pointer;
    padding: 8px;
    border-radius: var(--rs-radius-sm);
    transition: var(--rs-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
}

.rs-theme-toggle:hover {
    border-color: var(--rs-accent); /* Dein Orange-Rot #ff4500 */
    box-shadow: 0 0 10px rgba(255, 69, 0, 0.3);
}

/* Icon-Steuerung via CSS-Klassen */
.rs-theme-icon::before {
    content: "🌙"; /* Default */
}

body.light-mode .rs-theme-icon::before {
    content: "☀️"; /* Wechselt automatisch, wenn body .light-mode hat */
}

/* KADENCE BRIDGE - Damit das Theme auf deine Variablen hört */
body {
    background-color: var(--rs-bg-main) !important;
    color: var(--rs-text-primary) !important;
    transition: background-color 0.3s ease, color 0.3s ease; /* Weicher Übergang */
}

/* Falls Kadence Container-Hintergründe nutzt */
#wrapper, .site, .site-content {
    background-color: var(--rs-bg-main);
}

/* Header Glass-Effekt */
.site-header {
    position: sticky !important;
    top: 0; /* Klebt direkt am oberen Rand */
    z-index: 9999; /* Muss über den Glow-Effekten und Modals liegen */
    width: 100%;
    /* background: var(--rs-bg-card) !important; */
    backdrop-filter: var(--rs-glass-blur);
    border-bottom: 1px solid var(--rs-glass-border);
    transition: var(--rs-transition);
}

/* Logo-Branding */
.site-branding img {
    transition: filter 0.4s ease;
    max-height: 60px; /* Oder deine Wunschgröße */
}

/* Der dezente Glow im Dark-Mode */
body:not(.light-mode) .site-branding img {
    filter: drop-shadow(0 0 15px rgba(255, 69, 0, 0.4));
}

/* Navigation Hover-Effekt */
.main-navigation .primary-menu > li > a {
    position: relative;
    transition: color 0.3s ease;
}

.main-navigation .primary-menu > li > a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--rs-accent);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.main-navigation .primary-menu > li > a:hover::after {
    width: 80%;
}

.main-navigation .primary-menu > li > a:hover {
    color: var(--rs-accent) !important;
}

/* HERO SYSTEM */
.rs-hero-row {
    position: relative;
    min-height: 80vh; /* Fast volle Bildschirmhöhe */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Dynamisches Overlay */
.rs-hero-row::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--rs-hero-overlay);
    z-index: 1;
    transition: var(--rs-transition);
}

/* Den Inhalt über das Overlay heben */
.rs-hero-row > .kt-row-layout-inner > .kt-row-column-wrap {
    position: relative;
    z-index: 2;
}

/* LOGO INSZENIERUNG */
.rs-hero-logo {
    max-width: 350px;
    height: auto;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.2));
    margin-bottom: var(--rs-space-md);
    animation: rs-float 6s ease-in-out infinite;
}

@keyframes rs-float {
	0% { transform: translateY(0px); }
	50% { transform: translateY(-15px); }
	100% { transform: translateY(0px); }
}

/* Custom Button Styling */
.rs-hero-row .kb-button-wrapper .button {
    border-radius: var(--rs-radius-sm) !important;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 15px 30px !important;
    transition: var(--rs-transition) !important;
}

.rs-hero-row .kb-button-primary {
    background: var(--rs-accent) !important;
    border: none !important;
}

.rs-hero-row .kb-button-secondary {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(5px);
    border: 1px solid var(--rs-glass-border) !important;
    color: var(--rs-text-primary) !important;
}

.rs-hero-row .kb-button-secondary:hover {
    background: var(--rs-accent) !important;
    border-color: var(--rs-accent) !important;
}

/* Container für die Streambox-Sektion */
.rs-streambox-section {
    padding: var(--rs-space-xl) 0;
    display: flex;
    justify-content: center;
}

/* Innere Hülle der Streambox (Glassmorphism) */
/* Streambox v2 - Zentriertes Layout */
.rs-streambox-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--rs-space-lg);
    gap: var(--rs-space-md);
}

.rs-sb-col-center {
    flex: 2;
    text-align: center;
}

@media (max-width: 992px) {
    .rs-streambox-container {
        grid-template-columns: 1fr; /* Stacked auf Mobile */
    }
}

/* Streambox Button (Spezial) */
.rs-player-trigger {
    background: rgba(255, 69, 0, 0.1);
    border: 2px solid var(--rs-accent);
    padding: 6px 30px;
    border-radius: 25px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: var(--rs-transition);
}

.rs-player-trigger:hover {
    background: var(--rs-accent);
    box-shadow: 0 0 25px rgba(255, 69, 0, 0.4);
}

.rs-play-icon {
    font-size: 1.2rem;
}

.rs-player-controls {
    display: flex;
    gap: 15px;
    margin-top: 40px;
    justify-content: center;
}
.play-btn {
    background-color: transparent;
    border: none;
}
.rs-btn-outline {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
}

.rs-btn-outline:hover {
    border-color: var(--rs-accent);
    background: rgba(255, 69, 0, 0.1);
    color: var(--rs-accent);
    border-radius: var(--rs-radius-lg);
}

.rs-btn-outline-to-game {
    padding: 10px 20px;
    background: transparent;
    border: 1px solid rgba(0,200,0,0.5);
    border-radius: var(--rs-radius-md);
    color: rgba(0,200,0,0.5);
    text-decoration: none;
    transition: all .3s ease;
}

.rs-btn-outline-to-game:hover {
    border-color: var(--rs-accent);
    border-radius: var(--rs-radius-lg);
    background: rgba(var(--rs-accent),0.1);
    color: var(--rs-accent);
}

/* Einfacher Visualizer-Dummy */
.rs-visualizer {
    display: flex;
    gap: 3px;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}
.rs-visualizer span {
    width: 3px;
    height: 15px;
    background: var(--rs-accent);
    animation: rs-bounce 1s infinite;
}
@keyframes rs-bounce {
    0%, 100% { height: 5px; }
    50% { height: 15px; }
}
/* DIE NEUE STREAMBOX V3 */
.rs-streambox-v3 {
    width: 80vw;
    padding: 30px;
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.rs-sb-body {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr; /* 3 Spalten Layout */
    gap: 30px;
    align-items: center;
}

/* Linke Spalte: Moderator */
.rs-sb-col.modi-col {
    text-align: center;
    border-right: 1px solid rgba(255,255,255,0.1);
    padding-right: 20px;
}

#rs-modi-avatar {
    width: 200px;
    height: auto;
    object-fit: cover;
    margin-left: auto;
    margin-right: auto;
    border: 2px solid var(--rs-accent);
    box-shadow: 0 0 15px rgba(255, 69, 0, 0.3);
    border-radius: var(--rs-radius-lg);
    transition: all .3s ease;
}

/* Mittlere Spalte: Titel & Buttons */
.rs-sb-col.track-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
}

.rs-track-info h2 {
    font-size: 2.2rem;
    margin: 5px 0;
    text-shadow: 0 0 10px rgba(255,255,255,0.2);
}

.rs-player-controls {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 25px;
}

/* Rechte Spalte: Sendeplan */
.rs-sb-col.schedule-col {
    background: rgba(255,255,255,0.03);
    padding: 15px;
    border-radius: var(--rs-radius-md);
    border: 1px solid rgba(255,255,255,0.05);
}

.rs-sb-time {
    font-size: 1.25rem;
    margin-bottom: 10px;
}

.rs-motto-title {
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    color: var(--rs-accent) !important;
}
.rs-label {
    text-align: center;
    color: var(--rs-accent);
}
.rs-schedule-item {
    display: flex;
    flex-direction: column;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    transition: all .3s ease;
}
.rs-schedule-item:hover {
    background: rgba(255, 69, 0, 0.05);
}
.rs-schedule-avatar {
    display: flex;
    /* justify-content: center; */
    align-items: center;
    width: 100%;
}
.rs-schedule-avatar img {
    display: inline-block;
    width: 35px;
    height: auto;
    margin-right: 10px;
    border-radius: 50%;
    border: 1px solid var(--rs-accent);
}
.rs-schedule-item.is-on-air {
    background: rgba(255, 69, 0, 0.1);
    padding: 10px;
    border-radius: var(--rs-radius-sm);
    border-left: 3px solid var(--rs-accent);
}
.rs-sched-time {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: #aaa;
    margin-bottom: 3px;
}
.rs-sched-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.rs-show-motto {
    font-size: 1rem;
    font-weight: bold;
    /* color: #888; */
    color: var(--rs-accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* max-width: 120px; */
}

.rs-badge-small {
    background: var(--rs-accent);
    color: #fff;
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 12px;
    font-weight: bold;
    animation: pulse 2s infinite;
}
	/* ==========================================
   STREAMBOX HISTORIE (Zuletzt gespielte Titel)
   ========================================== */
.rs-history-wrapper {
    border-top: 1px solid rgba(255, 69, 0, 0.3); /* Subtiler oranger Trennstrich */
    margin-top: 10px;
}

.rs-history-header {
    text-align: center;
    padding: 10px 15px;
    cursor: pointer;
    color: #ff4500; /* RS-Accent Orange */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
    transition: background 0.3s ease;
}

.rs-history-header:hover {
    background: rgba(255, 69, 0, 0.1);
}

.rs-history-dropdown {
    padding: 15px;
    background: rgba(18, 27, 46, 0.6); /* Dunkler Glas-Effekt für den aufklappbaren Bereich */
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Das 2-Spalten Layout */
.rs-history-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.rs-history-item {
    display: flex;
    gap: 12px;
    font-size: 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 8px;
}

/* Stellt sicher, dass das letzte Element einer Spalte keinen Rahmen unten hat */
.rs-history-item:nth-last-child(-n+2) {
    border-bottom: none;
    padding-bottom: 0;
}

.rs-history-time {
    color: #ff4500;
    font-weight: 700;
    white-space: nowrap;
}

.rs-history-song {
    color: #e2e8f0;
    line-height: 1.3;
}

/* Mobile Optimierung: Auf Handys wird es wieder einspaltig */
@media (max-width: 768px) {
    .rs-history-grid {
        grid-template-columns: 1fr;
    }
    .rs-history-item:nth-last-child(2) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        padding-bottom: 8px;
    }
}

/* ==========================================
   WUNSCHBOX MODAL STYLES
========================================== */
.rs-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 15, 30, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Aktiv-Zustand des Modals */
.rs-modal-overlay.rs-modal-active {
    opacity: 1;
    pointer-events: auto;
}

.rs-modal-content {
    width: 100%;
    max-width: 650px;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--rs-radius-md);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    transform: translateY(-30px);
    transition: transform 0.3s ease;
}

.rs-modal-overlay.rs-modal-active .rs-modal-content {
    transform: translateY(0);
}

.rs-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 15px;
}

.rs-modal-header h2 {
    margin: 0;
    font-size: 1.6rem;
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 69, 0, 0.3);
}

.rs-modal-close-btn {
    background: none;
    border: none;
    color: #aaa;
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
}

.rs-modal-close-btn:hover {
    color: var(--rs-accent);
}

/* Grid für zwei Eingabefelder nebeneinander */
.rs-modal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.rs-form-group label {
    display: block;
    color: #bbb;
    font-size: 0.85rem;
    margin-bottom: 6px;
    font-weight: bold;
}

.rs-modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 20px;
}

#rs-wbox-feedback {
    font-weight: bold;
    font-size: 0.95rem;
    max-width: 60%;
}

@media (max-width: 500px) {
    .rs-modal-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

.rs-wbox-btn {
    border-color: #4CAF50;
    color: #4CAF50;
}

.rs-wbox-btn:hover {
    background: rgba(76, 175, 80, 0.1);
}

/* Der Visualizer unter dem Hörer-Count */
/* STATS BOX & VISUALIZER ZENTRIERUNG */
.rs-stats-box {
    display: flex;
    flex-direction: column;
    align-items: center; /* Das zwingt alle Kinder (Hörer & Canvas) exakt in die Mitte */
    justify-content: center;
    margin-top: 15px;
    width: 100%;
}
#rs-visualizer {
    display: block;
    margin: 10px auto 0 auto;
    /* WICHTIG: Keine width-Angabe im CSS! Das übernimmt das HTML-Attribut. */
}
@media (max-width: 350px) {
    .rs-streambox-v3 {
        width: 90vw;
    }
}
@media (max-width: 992px) {
    .rs-streambox-v3 {
        width: 90vw;
    }
    .rs-sb-body { grid-template-columns: 1fr; }
    .rs-sb-col.modi-col { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 20px; }
}

/* Team-Sektion Styles */
/* .rs-team-slider {
    padding-top: 50px;
} */
.splide__track {
    padding-top: 25px;
}
.splide__list {
    display: flex !important; /* Erzwingt die Anzeige der Liste */
    visibility: visible !important;
}
.rs-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--rs-space-lg);
    padding: var(--rs-space-xl) 0;
}

/* ==================================================
   TEAM CARD
================================================== */

.rs-team-card {
    position: relative;
    background: linear-gradient(180deg, rgba(18,27,46,.92), rgba(11,18,32,.96));
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 22px;
    padding: 2rem 1.5rem;
    overflow: hidden;
    transition: var(--rs-transition); /* Nutzt deine zentrale Variable */
    cursor: pointer;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* Verhindert Layout-Shift beim Skalieren */
    backface-visibility: hidden;
}
.rs-team-card:hover {
    transform: translateY(-10px) scale(1.03); /* Beides in EINEM Befehl = kein Ruckeln */
    border-color: var(--rs-accent);
    box-shadow: 0 0 0 1px rgba(255,69,0,.22), 0 18px 45px rgba(255,69,0,.18);
}

/* Und beim Avatar ebenfalls das doppelte Transform entfernen */
.rs-team-card:hover .rs-team-avatar {
    /* Das Avatar muss nicht extra transformiert werden, wenn die Card es schon tut */
    border-color: var(--rs-accent);
    box-shadow: 0 0 20px rgba(255, 69, 0, 0.4);
}
/* WICHTIG: Füge diese Zeile hinzu, um das Ruckeln bei Animationen zu unterdrücken */
.rs-team-card, .rs-team-avatar, .rs-score-card {
    backface-visibility: hidden;
    -webkit-font-smoothing: subpixel-antialiased;
}

.rs-team-card.is-active {
    border:
        1px solid #ff4500;
    box-shadow:
        0 0 0 1px rgba(255,69,0,.22),
        0 18px 45px rgba(255,69,0,.22);
}

.rs-team-avatar {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 1.25rem;
    /* Border-Breite bleibt gleich, nur Farbe ändert sich -> kein Ruckeln */
    border: 2px solid rgba(255,69,0,.75);
    box-shadow: 0 8px 25px rgba(0,0,0,.35);
    transition: var(--rs-transition);
}

.rs-team-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.rs-team-name {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--rs-text-primary);
    margin-bottom: .35rem;
}

.rs-team-role {
    font-size: .92rem;
    color: var(--rs-text-secondary);
    line-height: 1.5;
}

.rs-team-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* EXTREM HOCH: Überlagert alles, auch Header und Kadence-Blöcke */
    z-index: 100000; 
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s ease;
}
/* Wenn sichtbar, müssen sie den z-index behalten */
.rs-team-modal-overlay.is-visible,
.rs-team-modal.is-visible {
    opacity: 1;
    visibility: visible;
}

.rs-team-modal.is-visible {
    transform: translate(-50%, -50%) scale(1);
}

.rs-team-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.92);
    /* EINS HÖHER ALS DAS OVERLAY */
    z-index: 100001; 
    width: min(680px, 92vw);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: rgba(18, 27, 46, 0.9);
    border: 1px solid var(--rs-glass-border);
    border-radius: var(--rs-radius-lg);
    backdrop-filter: blur(25px);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    padding: 2rem;
    opacity: 0;
    visibility: hidden;
    transition: all 0.28s ease;
}
.rs-team-modal-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--rs-glass-border);
    text-align: left; /* Wichtig für die Ausrichtung neben dem Bild */
}
.rs-modal-avatar {
    width: 120px !important; /* Etwas größer als im Slider */
    height: 120px !important;
    object-fit: cover;
    /* Tipp: Wenn du es wie im Slider rund willst, nutze 50% statt radius-md */
    border-radius: 50%; 
    border: 3px solid var(--rs-accent);
    box-shadow: 0 0 20px rgba(255, 69, 0, 0.3);
    flex-shrink: 0; /* Verhindert, dass das Bild gequetscht wird */
}
.rs-modal-titles {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.rs-modal-titles h3 {
    margin: 0;
    font-size: var(--rs-text-xl);
    color: var(--rs-text-primary);
}

.rs-modal-role {
    font-size: var(--rs-text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.rs-team-modal-content {
    overflow-y: auto; /* Nur der Inhalt scrollt */
    padding: var(--rs-space-lg);
    /* Schicker Scrollbar-Look für Webkit-Browser */
    scrollbar-width: thin;
    scrollbar-color: var(--rs-accent) transparent;
}

.rs-team-modal-content::-webkit-scrollbar {
    width: 6px;
}

.rs-team-modal-content::-webkit-scrollbar-thumb {
    background-color: var(--rs-accent);
    border-radius: 10px;
}
.rs-team-modal.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}
.rs-team-modal-close {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 10;
    background: var(--rs-bg-secondary);
    border: 1px solid var(--rs-glass-border);
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--rs-text-primary);
    transition: var(--rs-transition);
}

.rs-team-modal-close:hover {
    background: var(--rs-accent);
    color: #fff;
    transform: rotate(90deg);
}

.rs-modal-table {
    margin-top: 2rem;
}

.rs-modal-row {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 1rem;
    padding: .9rem 0;
    border-bottom: 1px solid rgba(255,255,255,.05);
}

.rs-modal-row span {
    color: var(--rs-text-muted);
    font-weight: 600;
}

.rs-modal-row strong {
    color: var(--rs-text-primary);
    font-weight: 500;
}

/**** Community-Tabs ****/

/* Griffel */
/* Highscore Grid */
.rs-highscore-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--rs-space-md);
    padding: var(--rs-space-md) 0;
}

/* Die Highscore Card */
.rs-score-card {
    text-align: center;
    padding: var(--rs-space-lg) var(--rs-space-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.rs-score-rank {
    position: absolute;
    top: 15px;
    left: 15px;
    font-size: var(--rs-text-xs);
    font-weight: 800;
    color: var(--rs-accent);
    opacity: 0.6;
}

.rs-score-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid var(--rs-glass-border);
    margin-bottom: var(--rs-space-sm);
    transition: var(--rs-transition);
}

.rs-score-card:hover .rs-score-avatar {
    border-color: var(--rs-accent);
    transform: scale(1.1);
}

.rs-score-value {
    font-size: var(--rs-text-xl);
    font-weight: 800;
    color: var(--rs-text-primary);
    margin: 5px 0;
}

/* Detail-Lupe */
.rs-score-details-trigger {
    position: absolute;
    bottom: 15px;
    right: 15px;
    cursor: pointer;
    font-size: 1.2rem;
    opacity: 0.4;
    transition: var(--rs-transition);
}

.rs-score-details-trigger:hover {
    opacity: 1;
    transform: scale(1.2);
}

/** Shoutbox */
.rs-shoutbox-container {
    height: 500px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: var(--rs-space-md);
    overflow-y: auto;
    scrollbar-width: thin;
}

.rs-shout-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    animation: fadeIn 0.3s ease;
}

.rs-shout-avatar {
    max-width: 50px;
    height: auto;
    border-radius: 50%;
    border: 1px solid var(--rs-accent);
    flex-shrink: 0;
}

.rs-shout-bubble {
    background: var(--rs-bg-secondary);
    padding: 10px 15px;
    border-radius: 0 15px 15px 15px;
    border: 1px solid var(--rs-glass-border);
    max-width: 85%;
}

/* Optimierung der Bubble, damit sie bei langen Daten nicht springt */
.rs-shout-meta {
    display: flex;
    justify-content: space-between;
    gap: 15px; /* Abstand zwischen Name und Datum */
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding-bottom: 4px;
}

.rs-shout-name {
    font-weight: 700;
    color: var(--rs-accent);
}

.rs-shout-time {
    font-size: var(--rs-text-xs);
    opacity: 0.5;
}

.rs-shout-message {
    font-size: var(--rs-text-sm);
    line-height: 1.4;
    word-break: break-word;
}

/* Smiley Fix: Inline statt Block */
.rs-shout-smiley {
    display: inline !important; /* Zwingt das Bild in die Textzeile */
    max-width: 100% !important;      /* Verhindert Verzerrungen */
    height: auto !important;    /* vorher - Passt sich der Schrifthöhe an */
    vertical-align: middle;      /* Zentriert den Smiley vertikal zum Text */
    margin: 0 2px;               /* Kleiner Abstand links/rechts zum Wort */
    border: none !important;     /* Entfernt eventuelle Rahmen */
    box-shadow: none !important; /* Entfernt eventuelle Schatten */
}

/* FEATURE GRID */
.rs-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--rs-space-lg);
    padding: var(--rs-space-xl) 0;
}

.rs-feature-card {
    text-align: center;
    padding: var(--rs-space-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: var(--rs-transition);
}

/* ICON CONTAINER */
.rs-feature-icon-box {
    width: 80px;
    height: 80px;
    background: rgba(255, 69, 0, 0.1);
    border: 1px solid var(--rs-glass-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--rs-space-md);
    font-size: 2rem;
    transition: var(--rs-transition);
    position: relative;
}

/* GLOW EFFEKT BEIM HOVERN */
.rs-feature-card:hover {
    transform: translateY(-10px);
    border-color: var(--rs-accent);
}

.rs-feature-card:hover .rs-feature-icon-box {
    background: var(--rs-accent);
    color: #fff;
    box-shadow: 0 0 30px rgba(255, 69, 0, 0.5);
    transform: rotate(10deg);
}
/* Gezieltes Styling für Kadence Info-Box Icons */
.kt-info-box-icon-container {
    background: rgba(255, 69, 0, 0.05) !important;
    border: 1px solid var(--rs-glass-border) !important;
    border-radius: 50% !important;
    padding: 20px !important;
    transition: var(--rs-transition) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px !important;
}

/* Hover-Effekt für die gesamte Card */
.rs-feature-card:hover .kt-info-box-icon-container {
    background: var(--rs-accent) !important;
    box-shadow: 0 0 30px rgba(255, 69, 0, 0.4);
    transform: scale(1.1) rotate(5deg);
}

.rs-feature-card:hover .kt-info-box-icon-container i,
.rs-feature-card:hover .kt-info-box-icon-container svg {
    color: #ffffff !important;
    fill: #ffffff !important;
    filter: drop-shadow(0 0 5px rgba(255,255,255,0.5));
}

/* Text-Anpassung in der Card */
.rs-feature-card h3 {
    margin-bottom: 15px !important;
    color: var(--rs-accent) !important;
}

.rs-feature-card p {
    font-size: var(--rs-text-sm);
    line-height: 1.6;
    color: var(--rs-text-secondary);
}

/* PRE-FOOTER (TIERSCHUTZ) */
.rs-pre-footer {
    padding: var(--rs-space-xl) 0;
    background: linear-gradient(180deg, transparent, rgba(255, 69, 0, 0.05));
}

.rs-charity-card {
    display: flex;
    align-items: center;
    gap: var(--rs-space-lg);
    padding: var(--rs-space-lg);
}

@media (max-width: 768px) {
    .rs-charity-card {
        flex-direction: column;
        text-align: center;
    }
}

/* MAIN FOOTER */
.rs-main-footer {
    background: rgba(7, 11, 20, 0.95);
    border-top: 1px solid var(--rs-accent) !important;
    padding: var(--rs-space-xl) 0 var(--rs-space-md);
    color: var(--rs-text-secondary);
}

.rs-footer-logo {
    max-width: 180px;
    height: auto;
    margin-bottom: var(--rs-space-sm);
    filter: grayscale(0.5) opacity(0.8);
    transition: var(--rs-transition);
}

.rs-footer-logo:hover {
    filter: grayscale(0) opacity(1);
}

.rs-footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: var(--rs-space-xl);
}

.rs-footer-heading {
    color: var(--rs-text-primary);
    font-size: var(--rs-text-md);
    font-weight: 700;
    margin-bottom: var(--rs-space-md);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.rs-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.rs-footer-links li {
    margin-bottom: 10px;
}

.rs-footer-links a {
    color: var(--rs-text-muted);
    text-decoration: none;
    transition: var(--rs-transition);
}

.rs-footer-links a:hover {
    color: var(--rs-accent);
    padding-left: 5px;
}

/* COPYRIGHT BAR */
.rs-footer-bottom {
    margin-top: var(--rs-space-xl);
    padding-top: var(--rs-space-md);
    border-top: 1px solid rgba(255,255,255,0.05);
    text-align: center;
    font-size: var(--rs-text-xs);
}

/* SHOUTBOX FORMULAR */
.rs-shout-form-wrapper {
    padding: 20px;
    margin-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.rs-form-group {
    margin-bottom: 15px;
}

.rs-input {
    width: 100%;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 12px 15px;
    border-radius: var(--rs-radius-sm);
    font-family: inherit;
    transition: all 0.3s ease;
}

.rs-input:focus {
    outline: none;
    border-color: var(--rs-accent);
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 10px rgba(255, 69, 0, 0.2);
}

.rs-textarea {
    resize: vertical;
    min-height: 80px;
}

.rs-form-footer {
    display: flex;
    align-items: center;
    gap: 15px;
}

#rs-shout-feedback {
    font-size: 0.9rem;
    font-weight: bold;
}
.rs-feedback-success { color: #4CAF50; }
.rs-feedback-error { color: #f44336; }

/* ==========================================
   SENDEPLAN SEKTION (GRID-KACHELN)
========================================== */
.rs-sendeplan-container {
    max-width: 1400px; /* Darf jetzt gerne etwas breiter sein */
    margin: 0 auto;
    padding: 20px 0;
}
.rs-sendeplan-jump-menu {
    margin-bottom: 20px;
    padding: var(--rs-space-sm);
}
.rs-sendeplan-day-group {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--rs-radius-md);
    margin-bottom: 40px;
    background: rgba(18, 27, 46, 0.4); /* Dezenter Glas-Hintergrund für die ganze Tages-Box */
    overflow: hidden; /* WICHTIG: Schneidet den farbigen Titel passend zu den runden Ecken ab */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.rs-sendeplan-day-title {
    /* Verlauf vom typischen Sunshine-Orange ins dunkle Blau */
    background: linear-gradient(90deg, var(--rs-accent) 0%, rgba(18, 27, 46, 0) 100%);
    padding: 15px 25px;
    margin: 0; /* Kein Abstand nach außen, klebt direkt am Rahmen */
    font-size: 1.5rem;
    color: #fff;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
    border-bottom: 1px solid rgba(255, 69, 0, 0.3);
}

.btn-new-show {
    background-color: var(--rs-accent);
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: var(--rs-radius-md);
    font-size: 1rem;
    text-shadow: none;
    padding: 8px 20px;
    vertical-align: middle;
    transition: all .3s ease;
}
.btn-new-show:hover {
    color: #000;
    border-color: #000;
}

/* Der neue Grid-Container */
/* Das Sendeplan-Grid (Komplett) */
.rs-sendeplan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 380px));
    gap: 30px;
    justify-content: center;
    width: 100%;
    padding: 25px; /* Der neue Abstand zum Rand der Tages-Box */
    box-sizing: border-box; /* Verhindert, dass das Padding das Grid breiter als 100% macht */
}

/* Die quadratische Karte mit Breiten-Sicherung */
.rs-sendeplan-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    aspect-ratio: 1 / 1; /* Das perfekte Quadrat bleibt erhalten */
    padding: 25px;
    background-size: cover;
    background-position: center;
    border-radius: var(--rs-radius-md);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.5);
    
    width: 100%;
    max-width: 380px; /* Verhindert, dass eine einzelne Karte unschön in die Breite gezogen wird */
    margin: 0 auto;   /* Zusätzliche Zentrierungs-Sicherheit */
}

.rs-sendeplan-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 15px rgba(255, 69, 0, 0.2);
    border-color: rgba(255, 69, 0, 0.4);
}

/* Oben: Meta-Infos (Uhrzeit & Titel) */
.rs-sp-time-meta {
    margin-top: 100px;
    text-align: center;
}

.rs-sp-clock {
    display: inline-block;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 0.95rem;
    font-weight: bold;
    color: var(--rs-accent);
    border: 1px solid rgba(255, 69, 0, 0.3);
    margin-bottom: 12px;
}

.rs-sp-motto {
    font-size: 1.4rem;
    line-height: 1.3;
    margin: 0;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

/* Unten: DJ-Bereich */
.rs-sp-dj-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(8px);
    padding: 12px 20px;
    border-radius: var(--rs-radius-sm);
    border: 1px solid rgba(255,255,255,0.05);
}

.rs-sp-avatar-wrap img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border: 2px solid var(--rs-accent);
    border-radius: 50%; /* Runde Avatare wirken im Kasten oft moderner */
}

.rs-sp-dj-name {
    display: flex;
    flex-direction: column;
    font-size: 0.95rem;
}

.rs-sp-dj-name strong {
    font-size: 1.1rem;
    letter-spacing: 0.5px;
}

.rs-sp-special-badge {
    color: var(--rs-accent);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.9rem;
    width: 100%;
    text-align: center;
    padding: 10px 0;
}

.rs-jump-title {
    text-align: center;
    font-size: 1.1rem;
    color: #ccc;
    margin-bottom: 20px;
}

.rs-jump-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.rs-jump-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(18, 27, 46, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--rs-radius-sm);
    padding: 12px 5px;
    color: #fff;
    text-decoration: none !important;
    transition: all 0.3s ease;
}

.rs-jump-btn:hover {
    background: rgba(255, 69, 0, 0.2);
    border-color: var(--rs-accent);
    box-shadow: 0 5px 15px rgba(255, 69, 0, 0.15);
    transform: translateY(-2px);
}

.rs-jump-day {
    font-size: 0.95rem;
    font-weight: bold;
    color: var(--rs-accent);
    margin-bottom: 3px;
}

.rs-jump-date {
    font-size: 0.8rem;
    color: #aaa;
}

/* Anpassung der Tages-Titel, damit sie beim Scrollen nicht vom Menü verdeckt werden */
.rs-sendeplan-day-title {
    scroll-margin-top: 120px; /* Hält Abstand nach oben beim Anspringen */
}
.rs-sendeplan-empty {
    margin: 25px;
    background: rgba(255, 69, 0, 0.1);
    border: 1px solid rgba(255, 69, 0, 0.3);
    color: #fff;
    padding: 20px;
    text-align: center;
    border-radius: var(--rs-radius-md);
    font-size: 1.1rem;
    box-shadow: inset 0 0 20px rgba(255, 69, 0, 0.05);
}

/* WUNSCHLISTE (SCHMALES MODAL) */
.rs-modal-narrow {
    max-width: 450px; /* Macht das Popup schön schlank */
}

.rs-wish-item {
    background: rgba(0, 0, 0, 0.3);
    border-left: 3px solid var(--rs-accent);
    padding: 12px 15px;
    margin-bottom: 15px;
    border-radius: 0 var(--rs-radius-sm) var(--rs-radius-sm) 0;
}

.rs-wish-song {
    font-size: 1.1rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 5px;
}

.rs-wish-meta {
    font-size: 0.85rem;
    color: #bbb;
}

.rs-wish-msg {
    margin-top: 8px;
    font-size: 0.95rem;
    font-style: italic;
    color: #ddd;
    background: rgba(255, 255, 255, 0.05);
    padding: 8px;
    border-radius: 4px;
}

.rs-wish-empty {
    text-align: center;
    color: #aaa;
    padding: 20px;
}

/* ==========================================
   TEAM SEITE (VOLLBILD-KARTEN)
========================================== */
.rs-team-page-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 0;
}

.rs-team-group-title {
    font-size: 1.8rem;
    color: #fff;
    background: linear-gradient(90deg, #000 0%, rgba(0,0,0,0) 100%);
    border-left: 4px solid var(--rs-accent);
    padding: 10px 20px;
    margin: 50px 0 30px 0;
    text-transform: uppercase;
    font-style: italic;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.rs-team-grid {
    display: grid;
    /* auto-fit und feste Maximalbreite (z.B. 350px) werfen die Geister-Spalten raus */
    grid-template-columns: repeat(auto-fit, minmax(320px, 350px)); 
    gap: 30px;
    justify-content: center;
    width: 100%;
}

.rs-team-card {
    position: relative;
    height: 420px;
    background: rgba(18, 27, 46, 0.4); /* Dein dunkler Hintergrund */
    border-radius: var(--rs-radius-md);
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;    
    /* HIER IST DER FIX: Zwingt das Padding auf 0, damit das Bild die Ränder berührt */
    padding: 0 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

/* VORDERSEITE */
.rs-team-card-front {
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: var(--rs-radius-md);
}

.rs-team-card-cover {
    width: 100% !important;
    height: 120px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0;
    padding: 0;
    display: block;
    border-top-left-radius: var(--rs-radius-md);
    border-top-right-radius: var(--rs-radius-md);
}

.rs-team-card-avatar-wrap {
    width: 130px;
    height: 130px;
    margin: -65px auto 0 auto;
    position: relative;
    z-index: 2;
}

.rs-team-card-avatar-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid #fff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    /* background: #fff; */
}

.rs-team-card-meta {
    flex: 1;
    padding: 15px 20px;
    text-align: center;
    color: #333;
}

.rs-team-member-name {
    font-size: 1.6rem;
    color: vat(--rs-text-primary);
    margin: 10px 0 15px 0;
    font-weight: bold;
}

.rs-team-member-roles {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
}

.rs-role-badge {
    font-size: 0.9rem;
    color: var(--rs-accent);
}

.rs-team-more-hint {
    background: #000;
    color: var(--rs-text-secondary);
    text-align: center;
    font-size: .75rem;
    padding: 15px;
    font-weight: bold;
    cursor: pointer;
    margin-top: auto;
}

/* RÜCKSEITE */
.rs-team-card-back {
    position: absolute;
    top: 100%; /* Startet unterhalb der Karte */
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 15, 30, 0.85);
    backdrop-filter: blur(10px);
    /* background: rgba(0,0,0,.5); */
    /* color: #eee; */
    display: flex;
    flex-direction: column;
    transition: top 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Weiches hochgleiten */
    z-index: 5;
}

.rs-team-card:hover .rs-team-card-back {
    top: 0; /* Gleitet bei Hover nach oben */
}

.rs-team-back-hint {
    background: #000;
    color: #fff;
    text-align: center;
    padding: 15px;
    font-weight: bold;
    font-size: .75rem;
}

.rs-team-card-scroll-area {
    padding: 20px 30px;
    overflow-y: auto;
    text-align: center;
    height: 100%;
}

.rs-team-member-name-back {
    font-size: 1.6rem;
    color: var(--rs-text-secondary);
    margin: 0;
}

.rs-team-divider {
    width: 60%;
    margin: 15px auto;
    border: none;
    border-top: 2px solid #eee;
}

.rs-team-detail-item {
    margin-bottom: 20px;
}

.rs-team-detail-item strong {
    display: block;
    font-size: 0.9rem;
    color: #fff;
    margin-bottom: 5px;
}

.rs-team-detail-item p {
    margin: 0;
    font-size: 1rem;
    color: var(--rs-text-secondary);
}

/* Scrollbar für die Rückseite */
.rs-team-card-scroll-area::-webkit-scrollbar {
    width: 6px;
}
.rs-team-card-scroll-area::-webkit-scrollbar-track {
    background: #f1f1f1;
}
.rs-team-card-scroll-area::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

/* ==========================================
   SCROLL ANIMATIONEN (Hyper-Lightweight)
========================================== */

/* Basis-Zustand: Unsichtbar und bereit für weiche Übergänge */
.rs-animate {
    opacity: 0;
    transition: opacity 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                transform 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform; /* Hardware-Beschleunigung für flüssiges Ruckeln */
}

/* Die 3 wichtigsten Richtungen (Start-Positionen) */
.rs-fade-up { transform: translateY(60px); }
.rs-fade-left { transform: translateX(200px); }
.rs-fade-right { transform: translateX(-200px); }

/* Ziel-Zustand: Wenn das Element im Bild ist! */
.rs-animate.rs-in-view {
    opacity: 1;
    transform: translate(0, 0);
}

/* Swup Transition Effekte */
.transition-fade {
    transition: 0.4s opacity ease-in-out;
    opacity: 1;
}

/* Diese Klasse fügt Swup automatisch hinzu, während er die neue Seite lädt */
html.is-animating .transition-fade {
    opacity: 0;
}

/* ==========================================
   SWUP TRANSITION EFFEKTE
========================================== */
.transition-fade {
    transition: 0.4s opacity ease-in-out, 0.4s transform ease-in-out;
    opacity: 1;
    transform: translateY(0);
}

/* Diese Klasse klebt Swup an den <html> Tag, während er lädt */
html.is-animating .transition-fade {
    opacity: 0;
    transform: translateY(10px); /* Sanftes "Absacken" beim Ausblenden */
}
/* ==========================================
   GLOBALER SCHWEBENDER PLAYER (FOOTER)
========================================== */
#rs-global-player-wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 9999; /* Garantiert, dass der Player IMMER im Vordergrund bleibt */
    
    /* Der edle Glassmorphism-Look für die Leiste */
    background: rgba(10, 15, 30, 0.85);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
}

/* WICHTIG: 
   Da der Player jetzt "schwebt", würde er den untersten Teil deiner Seite (z.B. das Impressum) verdecken. 
   Wir geben der gesamten Seite daher unten ein unsichtbares Polster! 
*/
body {
    padding-bottom: 80px; /* Diesen Wert später anpassen, je nachdem wie hoch dein Player wird */
}

/* ==========================================
   GLOBALER SCHWEBENDER PLAYER (FOOTER)
========================================== */
#rs-global-player-wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background: rgba(10, 15, 30, 0.85);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-top: 1px solid rgba(255, 69, 0, 0.3); /* Dezenter Rahmen in Orange */
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}

body {
    padding-bottom: 90px; /* Platz für den Player machen */
}

/* Flex-Grid für den Player */
.rs-player-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    height: 80px;
}

/* LINKS: Info */
.rs-player-left {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 33%;
    overflow: hidden;
}

.rs-player-avatar {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    border: 2px solid var(--rs-accent);
    object-fit: cover;
}

.rs-player-trackinfo {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    white-space: nowrap;
}

.rs-track-artist {
    font-size: 0.85rem;
    color: var(--rs-accent);
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
}

.rs-track-title-wrap {
    overflow: hidden;
    width: 100%;
}

.rs-track-title {
    font-size: 1.1rem;
    color: #fff;
    font-weight: bold;
}

/* MITTE: Steuerung */
.rs-player-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 33%;
}

.rs-play-btn {
    background: var(--rs-accent);
    color: #fff;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(255, 69, 0, 0.5);
    transition: transform 0.2s, box-shadow 0.2s;
}

.rs-play-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 0 25px rgba(255, 69, 0, 0.8);
}

/* RECHTS: Extras */
.rs-player-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    width: 33%;
}

.rs-action-icon {
    background: none;
    border: none;
    color: #bbb;
    font-size: 1.5rem;
    cursor: pointer;
    transition: color 0.2s;
}

.rs-action-icon:hover {
    color: var(--rs-accent);
}

.rs-volume-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
}

#rs-footer-volume {
    accent-color: var(--rs-accent);
    cursor: pointer;
}

/* ==========================================
   MOBILE RESPONSIVENESS (SMARTPHONES)
========================================== */
@media (max-width: 768px) {
    .rs-player-container {
        height: 65px;
        padding: 5px 15px;
    }
    
    body { padding-bottom: 75px; } /* Polster anpassen */

    /* Rechten Bereich (Volume etc.) komplett ausblenden */
    .rs-player-right {
        display: none; 
    }

    /* Linken Bereich breiter machen, Avatar verkleinern */
    .rs-player-left {
        width: 70%;
        gap: 10px;
    }
    
    .rs-player-avatar {
        width: 40px;
        height: 40px;
    }

    .rs-track-title {
        font-size: 0.95rem;
    }

    /* Mittleren Bereich (Play-Button) nach rechts schieben, Equalizer ausblenden */
    .rs-player-center {
        width: 30%;
        justify-content: flex-end;
    }

    #rs-footer-visualizer {
        display: none;
    }

    .rs-play-btn {
        width: 40px;
        height: 40px;
        font-size: 1.4rem;
    }
}

/* Animation für überlange Titel auf dem Handy */
@media (max-width: 480px) {
    .rs-track-title {
        display: inline-block;
        animation: rs-marquee 10s linear infinite;
    }
    
    @keyframes rs-marquee {
        0%   { transform: translateX(100%); }
        100% { transform: translateX(-100%); }
    }
}