/**
 * Mobile Optimizations
 * Ella Radio Theme - Schlager Radio
 *
 * Minimale Fixes auf Basis der bestehenden Styles
 */

/* ==============================================
   HERO SECTION - MOBILE FIXES
============================================== */

@media (max-width: 768px) {
    /* Prevent horizontal overflow */

    /* Channel Slider Overflow Fix */
    .channel-slider,
    .channel-slider-wrapper {
        overflow: hidden !important;
        max-width: 100vw !important;
    }

    .channel-slider-viewport {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        max-width: 100% !important;
    }
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* Usercentrics Fix */
    #usercentrics-root,
    [class*="uc-"],
    .uc-embed-container {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    /* On-Air Box: Margin entfernen für gleiche Breite wie Slider */
    .on-air-box {
        margin: 0;
        border-radius: var(--radius, 0.75rem);
        height: auto;
        max-height: none;
        min-height: auto;
        padding: 1.25rem;
    }

    .on-air-box-inner {
        gap: 1rem;
    }

    /* Hero Section Abstände - oben und unten gleich */
    .hero-section {
        padding-top: calc(90px + 1rem) !important; /* Mobile Header (90px) + gleicher Abstand wie unten */
        padding-bottom: 1rem !important;
    }

    /* Hero Grid Abstand zwischen On-Air und Slider */
    .hero-grid {
        gap: 1rem !important;
    }

    /* Hero Slider Wrapper: abgerundete Ecken */
    .hero-slider-wrapper {
        border-radius: 12px !important;
        overflow: hidden !important;
        -webkit-mask-image: -webkit-radial-gradient(white, black);
    }

    .hero-slider {
        height: auto !important;
        max-height: none !important;
        min-height: unset !important;
        aspect-ratio: 1200 / 676 !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        -webkit-mask-image: -webkit-radial-gradient(white, black);
    }

    .hero-slide {
        border-radius: 12px !important;
        overflow: hidden !important;
    }

    .hero-slide-image {
        object-fit: contain;
        width: 100%;
        height: 100%;
        border-radius: 12px !important;
    }

    /* ==============================================
       EINHEITLICHE SECTION ABSTÄNDE - MOBILE
    ============================================== */

    /* Alle Haupt-Sections: einheitliche Abstände */
    .section-channels,
    .section-news,
    .section-events,
    .section-hitfinder,
    .section-faq,
    .section-seo-text {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Channels direkt nach Hero: gleiche Abstände oben und unten zur Überschrift */
    .section-channels {
        padding-top: 1.25rem !important;
    }

    /* Section Headers - kleinere Abstände mobil */
    .section-header {
        margin-top: 0 !important;
        margin-bottom: 1rem !important;
    }

    /* Channels Section Header: gleiche Abstände oben und unten */
    .section-channels .section-header {
        margin-top: 0 !important;
        margin-bottom: 1.25rem !important;
    }

    /* Channel Slider: oberen Margin und Padding entfernen */
    .channel-slider {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .channel-slider-container {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    /* Channel Slider Pfeile ausblenden - mobil wird gewischt */
    .channel-slider-nav {
        display: none !important;
    }

    /* Section Description kompakter und kleiner */
    .section-header .section-description {
        margin-bottom: 0 !important;
        font-size: 0.875rem !important;
        line-height: 1.4 !important;
    }

    /* Überschriften mobil kleiner - nur für Content-Bereiche */
    .section-header h2,
    .page-content h1,
    .page-content h2,
    .page-content h3,
    .entry-content h1,
    .entry-content h2,
    .entry-content h3 {
        font-size: 1.5rem;
    }

    .section-header h2 {
        font-size: 1.375rem;
    }

    /* News Grid Mobile */
    .news-grid {
        gap: 1rem;
    }

    .news-card-image {
        height: auto !important;
        aspect-ratio: 16 / 9;
    }

    .news-card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .news-card.large .news-card-image {
        height: auto !important;
        aspect-ratio: 16 / 9;
    }

    .news-card-content {
        padding: 1rem;
    }

    .news-card-title {
        font-size: 1rem;
        line-height: 1.3;
        margin-bottom: 0.25rem;
    }

    .news-card-date {
        font-size: 0.75rem;
        margin-top: 0.25rem;
        margin-bottom: 0.5rem;
    }

    .news-card-excerpt {
        font-size: 0.875rem;
        -webkit-line-clamp: 2;
    }

    /* Events Grid Mobile - Startseite */
    .section-events .grid-3 {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }

    .event-card-image {
        height: auto !important;
        aspect-ratio: 16 / 9;
    }

    .event-card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .event-card-content {
        padding: 1rem;
    }

    .event-card-title {
        font-size: 1rem;
        line-height: 1.3;
    }

    .event-card-date,
    .event-card-location {
        font-size: 0.75rem;
    }

    /* Events Button näher an die Cards */
    .section-events .text-center {
        margin-top: 1rem !important;
    }

    /* ==============================================
       EVENTS ARCHIVE / KALENDER PAGE - MOBILE
    ============================================== */

    /* Events Controls - Search & Filters */
    .events-controls {
        flex-direction: column !important;
        gap: 0.75rem !important;
        margin-bottom: 1rem !important;
    }

    .events-search {
        width: 100% !important;
    }

    .events-search input {
        width: 100% !important;
        padding: 0.75rem 1rem 0.75rem 2.5rem !important;
        font-size: 0.9375rem !important;
    }

    .events-search .search-icon {
        width: 18px !important;
        height: 18px !important;
        left: 0.75rem !important;
    }

    .events-filters {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        width: 100% !important;
    }

    .event-filter {
        flex: 1 1 calc(50% - 0.25rem) !important;
        min-width: 0 !important;
        padding: 0.625rem 0.75rem !important;
        font-size: 0.8125rem !important;
    }

    .btn-reset {
        flex: 1 1 100% !important;
        padding: 0.625rem 1rem !important;
        font-size: 0.8125rem !important;
        justify-content: center !important;
    }

    .btn-reset svg {
        width: 14px !important;
        height: 14px !important;
    }

    /* View Toggle */
    .view-toggle {
        margin-bottom: 1rem !important;
        gap: 0.5rem !important;
    }

    .view-btn {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.8125rem !important;
        gap: 0.375rem !important;
    }

    .view-btn svg {
        width: 16px !important;
        height: 16px !important;
    }

    /* Month Title */
    .month-title {
        font-size: 1.25rem !important;
        margin-bottom: 0.75rem !important;
        padding-bottom: 0.5rem !important;
    }

    /* Events Grid */
    .events-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* Event Card */
    .event-card {
        border-radius: 12px !important;
        overflow: hidden !important;
    }

    .event-link {
        flex-direction: column !important;
    }

    /* Event Image */
    .event-image-wrapper {
        position: relative !important;
        width: 100% !important;
    }

    .event-image {
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
    }

    .event-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* Date Badge */
    .event-date-badge {
        padding: 0.375rem 0.5rem !important;
        border-radius: 6px !important;
    }

    .event-date-badge .day {
        font-size: 1rem !important;
    }

    .event-date-badge .month,
    .event-date-badge .year {
        font-size: 0.5625rem !important;
    }

    /* Event Content */
    .event-content {
        padding: 1rem !important;
    }

    .event-title {
        font-size: 1.125rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0.5rem !important;
    }

    /* Event Info Items */
    .event-artist,
    .event-datetime,
    .event-location,
    .event-price {
        font-size: 0.8125rem !important;
        margin-bottom: 0.375rem !important;
        gap: 0.5rem !important;
    }

    .event-artist svg,
    .event-datetime svg,
    .event-location svg,
    .event-price svg {
        width: 14px !important;
        height: 14px !important;
        flex-shrink: 0 !important;
    }

    .event-location .location-details {
        font-size: 0.8125rem !important;
    }

    .event-location .location-details strong {
        font-size: 0.8125rem !important;
    }

    .event-location .location-details span {
        font-size: 0.75rem !important;
    }

    /* Event Excerpt */
    .event-excerpt {
        font-size: 0.8125rem !important;
        line-height: 1.5 !important;
        margin: 0.5rem 0 !important;
        -webkit-line-clamp: 2 !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    /* Event Actions / Buttons */
    .event-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
        margin-top: 0.75rem !important;
    }

    .btn-tickets,
    .btn-details {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.375rem !important;
        padding: 0.625rem 1rem !important;
        font-size: 0.8125rem !important;
        border-radius: 8px !important;
        width: 100% !important;
    }

    .btn-tickets svg,
    .btn-details svg {
        width: 14px !important;
        height: 14px !important;
    }

    /* No Results */
    .no-results,
    .no-events {
        padding: 2rem 1rem !important;
        text-align: center !important;
    }

    .no-results svg,
    .no-events svg {
        width: 48px !important;
        height: 48px !important;
        margin-bottom: 1rem !important;
    }

    .no-results h3,
    .no-events h2 {
        font-size: 1.125rem !important;
        margin-bottom: 0.5rem !important;
    }

    .no-results p,
    .no-events p {
        font-size: 0.875rem !important;
    }

    /* Footer Partner Logos Mobile */
    .footer-partners {
        padding: 2rem 1rem;
    }

    .footer-partners-title {
        font-size: 1.125rem;
        margin-bottom: 1rem;
    }

    .footer-partners-logos {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    /* 5. Logo zentriert */
    .footer-partners-logos .partner-logo-link:nth-child(5) {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc(50% - 0.375rem);
        max-width: none;
    }

    .partner-logo-link {
        padding: 1rem;
        min-width: unset !important;
        min-height: unset !important;
        border-radius: 0.5rem;
    }

    .partner-logo-link .partner-logo {
        width: 100% !important;
        height: auto !important;
        max-height: 70px !important;
        object-fit: contain;
    }

    /* Footer Main Section Mobile */
    .footer-main-section {
        padding: 2rem 0 6rem;
    }

    .footer-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
        margin-bottom: 2rem !important;
    }

    /* Spalte 1 & 2: nebeneinander, zentriert */
    .footer-grid .footer-column:nth-child(1),
    .footer-grid .footer-column:nth-child(2) {
        grid-column: auto;
        text-align: center;
    }

    /* Spalte 3 (Kontakt): volle Breite, zentriert */
    .footer-grid .footer-column:nth-child(3) {
        grid-column: 1 / -1;
        text-align: center;
    }

    .footer-grid .footer-column:nth-child(3) .footer-contact {
        display: inline-block;
        text-align: left;
    }

    /* Spalte 4 (Folge uns): volle Breite, zentriert */
    .footer-grid .footer-column:nth-child(4) {
        grid-column: 1 / -1;
        text-align: center;
    }

    .footer-grid .footer-column:nth-child(4) .footer-social {
        justify-content: center;
    }

    .footer-grid .footer-column:nth-child(4) .accessibility-toggle {
        margin-left: auto;
        margin-right: auto;
    }

    .footer-title {
        font-size: 1rem;
        margin-bottom: 0.75rem;
    }

    .footer-links li,
    .footer-contact li {
        font-size: 0.875rem;
        margin-bottom: 0.5rem;
    }

    .footer-social {
        gap: 0.75rem;
    }

    .social-link {
        width: 36px;
        height: 36px;
    }

    .footer-column .accessibility-toggle {
        font-size: 0.8125rem;
        padding: 0.625rem 1rem;
        margin-top: 1rem;
    }

    /* Footer Legal Mobile */
    .footer-legal {
        padding-top: 1.5rem;
        gap: 1rem;
    }

    .footer-copyright {
        font-size: 0.75rem;
        text-align: center;
    }

    .footer-legal-links,
    .footer-legal-links ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem 1rem;
    }

    .footer-legal-links a,
    .footer-legal-links li a {
        font-size: 0.75rem;
    }

    /* Hitfinder/Playlist Mobile */
    .hitfinder-icon,
    .faq-icon {
        width: 24px !important;
        height: 24px !important;
    }

    .hitfinder-search-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.75rem !important;
    }

    .hitfinder-search-buttons {
        grid-column: 1 / -1;
        display: flex !important;
        gap: 0.5rem !important;
    }

    .hitfinder-search-buttons #hitfinder-search-btn {
        flex: 2 !important;
    }

    .hitfinder-search-buttons #hitfinder-reset-btn {
        flex: 1 !important;
    }

    /* ==============================================
       UNTERSEITEN MOBILE - EINHEITLICH FÜR ALLE TEMPLATES
       (Category, Archive, Page, Single, Channels, Events, etc.)
    ============================================== */

    /*
     * MASTER-REGEL: Alle Seiten mit page-content-top bekommen
     * denselben Abstand nach dem 90px Mobile-Header
     */
    .page-content-top,
    body.category .page-content-top,
    body.archive .page-content-top,
    body.page .page-content-top,
    body.single .page-content-top,
    body.post-type-archive .page-content-top {
        padding-top: calc(90px + 1.5rem) !important;
        padding-bottom: 1rem !important;
    }

    /* Breadcrumb mobil ausblenden */
    .breadcrumb-nav {
        display: none !important;
    }

    /* Category Badge kleiner */
    .category-badge,
    .event-category-badge,
    .post-category-badge,
    [class*="-category-badge"] {
        font-size: 0.625rem !important;
        padding: 0.2rem 0.5rem !important;
        line-height: 1.2 !important;
    }

    /* ALLE Header-Bereiche einheitlich - JEDES Template! */
    .page-header,
    .archive-header,
    .category-header,
    .category-hero,
    .entry-header,
    .channels-header,
    .events-header,
    .kuenstler-header,
    .empfang-header,
    .hitparade-header,
    .kontakt-header,
    .moderatoren-header,
    .programm-header,
    .streams-header,
    .job-header,
    .show-header,
    .team-header,
    .presse-header,
    [class*="-header"].container {
        padding-top: 0 !important;
        padding-bottom: 0.75rem !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* ALLE Seitentitel - einheitliche Größe 1.5rem - JEDES Template! */
    .page-title,
    .archive-title,
    .category-title,
    .entry-title,
    .channels-title,
    .events-title,
    .kuenstler-title,
    .empfang-title,
    .hitparade-title,
    .kontakt-title,
    .moderatoren-title,
    .programm-title,
    .streams-title,
    .job-title,
    .show-title,
    .presse-title,
    h1.gradient-text,
    .page-header h1,
    .archive-header h1,
    .category-header h1,
    .category-hero h1,
    .entry-header h1,
    .empfang-header h1,
    .hitparade-header h1,
    .kontakt-header h1,
    .kuenstler-header h1,
    .moderatoren-header h1,
    .programm-header h1,
    .streams-header h1,
    .job-header h1,
    .show-header h1,
    .presse-header h1,
    [class*="-header"] h1 {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
        margin-top: 0 !important;
        margin-bottom: 0.5rem !important;
    }

    /* ALLE Seitenbeschreibungen - einheitliche Größe - JEDES Template! */
    .page-description,
    .archive-description,
    .category-description,
    .entry-description,
    .empfang-intro,
    .empfang-description,
    .hitparade-description,
    .kontakt-description,
    .kuenstler-description,
    .moderatoren-description,
    .programm-description,
    .streams-description,
    .presse-description,
    .page-header p,
    .archive-header p,
    .category-header p,
    .category-hero p,
    .empfang-header p,
    .hitparade-header p,
    .kontakt-header p,
    .kuenstler-header p,
    .moderatoren-header p,
    .programm-header p,
    .streams-header p,
    [class*="-header"] p,
    [class*="-intro"] p,
    [class*="-description"] {
        font-size: 1rem !important;
        line-height: 1.5 !important;
        margin-top: 0 !important;
        margin-bottom: 0.5rem !important;
    }

    .category-description p,
    .page-description p,
    .archive-description p,
    [class*="-description"] p,
    [class*="-intro"] p {
        margin-bottom: 0.5rem !important;
    }

    /* Listen in Beschreibungen */
    [class*="-intro"] ul,
    [class*="-description"] ul {
        font-size: 1rem !important;
        margin-bottom: 0.5rem !important;
        padding-left: 1.25rem !important;
    }

    [class*="-intro"] li,
    [class*="-description"] li {
        margin-bottom: 0.25rem !important;
    }

    /* Content-Bereich nach Header einheitlich */
    .page-content,
    .archive-content,
    .category-content,
    .entry-content,
    body.category .page-content,
    body.archive .page-content,
    body.page .page-content {
        padding-top: 0.5rem !important;
    }

    /* Posts/Articles Grid einheitlich */
    .posts-grid,
    .articles-grid,
    .news-grid,
    .events-grid,
    .channels-grid,
    .kuenstler-grid {
        margin-top: 0 !important;
    }

    /* ==============================================
       SINGLE POST / BEITRAG MOBILE
    ============================================== */

    /* Single Titel */
    .single-title {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }

    /* Single Date unter Titel */
    .single-date {
        display: flex !important;
        align-items: center !important;
        gap: 0.375rem !important;
        font-size: 0.75rem !important;
        color: rgba(0, 0, 0, 0.6) !important;
        margin-top: 0.25rem !important;
    }

    .single-date svg {
        width: 12px !important;
        height: 12px !important;
        opacity: 0.7 !important;
    }

    /* Single Meta kleiner */
    .single-meta {
        font-size: 0.75rem !important;
    }

    .single-meta svg {
        width: 12px !important;
        height: 12px !important;
    }

    /* Single Content Überschriften */
    .single-content.prose h2 {
        font-size: 1.375rem !important;
    }

    .single-content.prose h3 {
        font-size: 1.125rem !important;
    }

    /* ==============================================
       EVENT DETAIL PAGE MOBILE
    ============================================== */

    /* Back Navigation */
    .back-navigation {
        margin-bottom: 1rem !important;
    }

    .back-link {
        font-size: 0.8125rem !important;
    }

    .back-link svg {
        width: 16px !important;
        height: 16px !important;
    }

    /* Event Detail Card */
    .event-detail-card {
        margin-bottom: 0.75rem !important;
    }

    /* Event Title */
    .event-title {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0.75rem !important;
    }

    /* Event Info Items */
    .event-artist-link,
    .event-datetime-info,
    .event-location-info,
    .event-price-info {
        font-size: 0.875rem !important;
        margin-bottom: 0.5rem !important;
    }

    .event-artist-link svg,
    .event-datetime-info svg,
    .event-location-info svg,
    .event-price-info svg {
        width: 16px !important;
        height: 16px !important;
    }

    .event-location-info .location-text strong {
        font-size: 0.875rem !important;
    }

    .event-location-info .location-text span {
        font-size: 0.8125rem !important;
    }

    /* Event CTA Buttons */
    .event-cta {
        flex-direction: column !important;
        gap: 0.5rem !important;
        margin-top: 1rem !important;
    }

    .event-cta .btn-tickets,
    .event-cta .btn-website {
        width: 100% !important;
        justify-content: center !important;
        padding: 0.75rem 1rem !important;
        font-size: 0.875rem !important;
    }

    /* Event Body - Stack on Mobile */
    .event-body {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    .event-main-content {
        width: 100% !important;
    }

    .event-sidebar {
        width: 100% !important;
    }

    /* Event Description */
    .event-description h2 {
        font-size: 1.25rem !important;
        margin-bottom: 0.75rem !important;
    }

    .event-description .description-content {
        font-size: 0.9375rem !important;
        line-height: 1.6 !important;
    }

    /* Line-Up Section - Card Style */
    .event-artists {
        background: #f8f8f8 !important;
        border-radius: 12px !important;
        padding: 1rem 1.25rem !important;
        margin-top: 1.5rem !important;
        border: 1px solid rgba(0, 0, 0, 0.06) !important;
    }

    .event-artists h2 {
        font-size: 1.125rem !important;
        margin-bottom: 0.75rem !important;
        padding-bottom: 0.5rem !important;
        border-bottom: 2px solid hsl(var(--primary)) !important;
        color: hsl(var(--primary)) !important;
    }

    /* Artists List */
    .artists-list {
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .artists-list li {
        display: flex !important;
        align-items: center !important;
        gap: 0.625rem !important;
        font-size: 0.9375rem !important;
        padding: 0.625rem 0 !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
        color: #333 !important;
    }

    .artists-list li:last-child {
        border-bottom: none !important;
        padding-bottom: 0 !important;
    }

    .artists-list li:first-child {
        padding-top: 0.375rem !important;
    }

    .artists-list svg {
        width: 16px !important;
        height: 16px !important;
        color: hsl(var(--primary)) !important;
        flex-shrink: 0 !important;
    }

    /* Sidebar Cards */
    .sidebar-card {
        padding: 1rem !important;
        margin-bottom: 1rem !important;
    }

    .sidebar-card h3 {
        font-size: 1rem !important;
        margin-bottom: 0.75rem !important;
    }

    /* Detail Items */
    .detail-item {
        padding: 0.625rem 0 !important;
    }

    .detail-label {
        font-size: 0.75rem !important;
    }

    .detail-label svg {
        width: 14px !important;
        height: 14px !important;
    }

    .detail-value {
        font-size: 0.875rem !important;
    }

    .detail-value strong {
        font-size: 0.875rem !important;
    }

    .map-link {
        font-size: 0.75rem !important;
    }

    /* Links Card */
    .link-item {
        padding: 0.75rem !important;
        font-size: 0.875rem !important;
    }

    .link-item svg {
        width: 16px !important;
        height: 16px !important;
    }

    /* Share Buttons */
    .share-buttons {
        gap: 0.5rem !important;
    }

    .share-btn {
        width: 40px !important;
        height: 40px !important;
    }

    .share-btn svg {
        width: 18px !important;
        height: 18px !important;
    }

    /* Date Badge */
    .event-date-badge-large {
        padding: 0.5rem !important;
    }

    .event-date-badge-large .day {
        font-size: 1.25rem !important;
    }

    .event-date-badge-large .month,
    .event-date-badge-large .year {
        font-size: 0.625rem !important;
    }

    /* SEO Text Section Mobile */
    .seo-text-title {
        font-size: 1.375rem !important;
        line-height: 1.3;
        margin-bottom: 1rem;
    }

    .seo-text-content {
        font-size: 0.9375rem;
        line-height: 1.6;
    }

    .seo-text-content h2,
    .seo-text-content h3,
    .seo-text-content h4 {
        font-size: 1.125rem !important;
        margin-top: 1.25rem;
        margin-bottom: 0.75rem;
    }

    .seo-text-content p {
        margin-bottom: 0.875rem;
    }

    /* ==============================================
       EMPFANG PAGE MOBILE
    ============================================== */

    /* Empfang Header */
    .empfang-header {
        padding-bottom: 1rem !important;
    }

    .empfang-title {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0.75rem !important;
    }

    .empfang-intro {
        font-size: 0.9375rem !important;
        line-height: 1.6 !important;
    }

    .empfang-intro p {
        margin-bottom: 0.625rem !important;
    }

    .empfang-intro ul {
        margin: 0.5rem 0 !important;
        padding-left: 1.25rem !important;
    }

    .empfang-intro li {
        margin-bottom: 0.25rem !important;
        font-size: 0.9375rem !important;
    }

    /* Section Titles */
    .section-title-small {
        font-size: 1.25rem !important;
        margin-bottom: 1rem !important;
    }

    /* Empfang Grid - Reception Methods */
    .empfang-grid-section {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .empfang-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    .empfang-card {
        padding: 1.25rem !important;
        border-radius: 12px !important;
    }

    .empfang-icon {
        margin-bottom: 0.75rem !important;
    }

    .empfang-icon svg {
        width: 48px !important;
        height: 48px !important;
    }

    .empfang-card-title {
        font-size: 1.125rem !important;
        margin-bottom: 0.5rem !important;
    }

    .empfang-card-description {
        font-size: 0.875rem !important;
        line-height: 1.5 !important;
    }

    .empfang-button {
        margin-top: 0.75rem !important;
        padding: 0.625rem 1rem !important;
        font-size: 0.8125rem !important;
    }

    /* Frequencies Section */
    .empfang-frequencies-section {
        padding: 1.5rem 0 !important;
    }

    .frequencies-intro {
        font-size: 0.9375rem !important;
        margin-bottom: 1rem !important;
    }

    .frequency-section-title {
        font-size: 1.125rem !important;
        margin-bottom: 0.75rem !important;
    }

    .frequencies-grid,
    .frequencies-grid-ukw,
    .frequencies-grid-dab {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    .frequency-card {
        padding: 1rem !important;
        border-radius: 10px !important;
    }

    .frequency-title {
        font-size: 1rem !important;
        margin-bottom: 0.5rem !important;
    }

    .frequency-list {
        gap: 0.375rem !important;
    }

    .freq-location {
        font-size: 0.8125rem !important;
    }

    .freq-value {
        font-size: 0.8125rem !important;
    }

    /* Cable Section */
    .empfang-cable-section {
        padding: 1.5rem 0 !important;
    }

    .cable-list {
        font-size: 0.9375rem !important;
    }

    .cable-list li {
        padding: 0.5rem 0 !important;
    }

    /* Smart Devices Section */
    .empfang-smart-section,
    .empfang-tech-section {
        padding: 1.5rem 0 !important;
        overflow-x: hidden !important;
        max-width: 100% !important;
    }

    /* Smart Grid - Single Column für Alexa/Google Assistant */
    .smart-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    .smart-card {
        padding: 1rem !important;
        border-radius: 10px !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .smart-icon {
        margin-bottom: 0.5rem !important;
        flex-shrink: 0 !important;
    }

    .smart-icon svg,
    .smart-icon img {
        width: 40px !important;
        height: 40px !important;
    }

    .smart-card h3 {
        font-size: 0.9375rem !important;
        margin-bottom: 0.25rem !important;
        word-wrap: break-word !important;
    }

    .smart-description {
        font-size: 0.8125rem !important;
        line-height: 1.4 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* Voice Command Buttons kleiner */
    .voice-command {
        font-size: 0.8125rem !important;
        padding: 0.5rem 0.75rem !important;
        margin: 0.5rem 0 !important;
    }

    .smart-note {
        font-size: 0.75rem !important;
        margin-top: 0.5rem !important;
        line-height: 1.4 !important;
    }

    /* Stream Info */
    .stream-intro,
    .stream-description {
        font-size: 0.9375rem !important;
    }

    .stream-subtitle {
        font-size: 1rem !important;
        margin-bottom: 0.5rem !important;
    }

    .stream-info-content {
        padding: 1rem !important;
    }

    .copy-btn {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.75rem !important;
    }

    /* Sonos Section */
    .empfang-sonos-section {
        padding: 1.5rem 0 !important;
    }

    .sonos-headline,
    .smarttv-headline {
        font-size: 1.25rem !important;
        margin-bottom: 0.5rem !important;
    }

    .sonos-subtitle,
    .smarttv-subtitle {
        font-size: 1rem !important;
        margin-bottom: 0.75rem !important;
    }

    .sonos-intro,
    .smarttv-intro {
        font-size: 0.9375rem !important;
        margin-bottom: 1rem !important;
    }

    .sonos-howto {
        font-size: 0.9375rem !important;
    }

    .sonos-howto li {
        padding: 0.375rem 0 !important;
    }

    .sonos-note,
    .smarttv-note {
        font-size: 0.8125rem !important;
        margin-top: 1rem !important;
    }

    /* Smart TV Section */
    .empfang-smarttv-section {
        padding: 1.5rem 0 !important;
    }

    /* TV Brands - Collapsible on Mobile */
    .smarttv-brands {
        gap: 0.75rem !important;
    }

    .smarttv-brands img {
        height: 28px !important;
    }

    .smarttv-subtitle {
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        background: #f5f5f5 !important;
        padding: 0.75rem 1rem !important;
        border-radius: 8px !important;
        margin-bottom: 0 !important;
        font-size: 0.9375rem !important;
    }

    .smarttv-subtitle::after {
        content: '' !important;
        width: 10px !important;
        height: 10px !important;
        border-right: 2px solid hsl(var(--primary)) !important;
        border-bottom: 2px solid hsl(var(--primary)) !important;
        transform: rotate(45deg) !important;
        transition: transform 0.3s ease !important;
        flex-shrink: 0 !important;
        margin-left: 0.5rem !important;
    }

    .smarttv-brands.expanded .smarttv-subtitle::after {
        transform: rotate(-135deg) !important;
    }

    .tv-brands-grid {
        max-height: 0 !important;
        overflow: hidden !important;
        transition: max-height 0.3s ease, padding 0.3s ease !important;
        padding: 0 !important;
    }

    .smarttv-brands.expanded .tv-brands-grid {
        max-height: 500px !important;
        padding-top: 0.75rem !important;
    }

    .tv-brand {
        font-size: 0.8125rem !important;
        padding: 0.5rem 0.75rem !important;
    }

    .smarttv-brands .smarttv-note {
        max-height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        transition: max-height 0.3s ease, margin 0.3s ease, padding 0.3s ease !important;
    }

    .smarttv-brands.expanded .smarttv-note {
        max-height: 100px !important;
        margin-top: 0.75rem !important;
    }

    /* App Buttons */
    .app-buttons {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    .app-store-button,
    .google-play-button {
        width: 100% !important;
        justify-content: center !important;
    }

    .app-button-text {
        font-size: 0.6875rem !important;
    }

    .app-button-store {
        font-size: 1rem !important;
    }

    /* FAQ Section */
    .empfang-faq-section {
        padding: 1.5rem 0 !important;
    }

    .faq-accordion {
        gap: 0.75rem !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .faq-item {
        border-radius: 10px !important;
        overflow: hidden !important;
    }

    .faq-question {
        padding: 1rem !important;
        font-size: 0.9375rem !important;
        gap: 0.75rem !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .faq-question span {
        flex: 1 !important;
        text-align: left !important;
    }

    .faq-icon {
        width: 20px !important;
        height: 20px !important;
        flex-shrink: 0 !important;
        transition: transform 0.3s ease !important;
    }

    .faq-item.active .faq-icon {
        transform: rotate(45deg) !important;
    }

    /* FAQ Answer - Only font/padding adjustments, max-height handled by base CSS + JS */
    .faq-answer {
        font-size: 0.875rem !important;
        line-height: 1.6 !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .faq-item.active .faq-answer {
        padding-bottom: 1rem !important;
    }

    .faq-answer p {
        margin-bottom: 0.5rem !important;
    }

    .faq-answer ul,
    .faq-answer ol {
        padding-left: 1.25rem !important;
        margin: 0.5rem 0 !important;
    }

    .faq-answer li {
        margin-bottom: 0.25rem !important;
    }

    /* Einheitliche Container-Padding auf Mobile */
    .container,
    .hero-container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* ==============================================
       PROGRAMM PAGE MOBILE - Nur Schriftgrößen-Anpassungen
       (Layout wird von programm.css bereits korrekt gehandhabt)
    ============================================== */

    /* Header Titel - passend zu anderen Seiten */
    .programm-header h1 {
        font-size: 1.5rem !important;
        margin-bottom: 0.75rem !important;
    }

    /* Beschreibung */
    .programm-description {
        font-size: 0.9375rem !important;
    }

    .programm-description p {
        margin-bottom: 0.5rem !important;
    }

    /* Tabs - nur Abkürzungen anzeigen (MO, DI, MI, etc.) */
    .programm-tab .tab-full {
        display: none !important;
    }

    .programm-tab .tab-short {
        display: block !important;
        font-size: 0.875rem !important;
    }

    .programm-tab {
        padding: 0.625rem 0.75rem !important;
    }

    /* Show Card - kompaktere Abstände */
    .show-card {
        gap: 0 !important;
    }

    /* Show Image - feste Höhe, Bild zentriert und vollständig sichtbar */
    .show-card .show-image {
        aspect-ratio: unset !important;
        padding-bottom: 0 !important;
        height: 160px !important;
        background: #f5f5f5 !important;
    }

    .show-card .show-image img {
        object-fit: contain !important;
        object-position: center !important;
    }

    .show-card .show-info {
        padding: 0.875rem 1rem !important;
        gap: 0.5rem !important;
    }

    .show-card .show-header {
        margin-bottom: 0.125rem !important;
    }

    /* Show Title - etwas kleiner */
    .show-card .show-title {
        font-size: 1.125rem !important;
        margin: 0 0 0.25rem 0 !important;
    }

    /* Show Description */
    .show-card .show-description {
        font-size: 0.875rem !important;
        margin: 0 0 0.375rem 0 !important;
    }

    /* Show Host */
    .show-card .show-host {
        font-size: 0.8125rem !important;
        margin-top: 0 !important;
    }

    /* Show Time Badge */
    .show-card .show-time {
        font-size: 0.75rem !important;
        padding: 0.25rem 0.5rem !important;
    }

    /* Channel Grid als horizontaler Swipe-Slider */
    .channel-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 0.5rem !important;
        padding-bottom: 0.5rem;
        margin-left: -1rem;
        margin-right: -1rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Scrollbar verstecken */
    .channel-grid::-webkit-scrollbar {
        display: none;
    }
    .channel-grid {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    /* Player Bar: Social Icons und Volume ausblenden */
    .player-social,
    .player-volume {
        display: none !important;
    }

    /* Channel Cards größer */
    .channel-card {
        flex: 0 0 155px !important;
        min-width: 155px !important;
        max-width: 155px !important;
        scroll-snap-align: start;
    }

    .channel-card-image {
        aspect-ratio: 1;
    }

    .channel-card-content {
        padding: 0.5rem;
    }

    .channel-card-name {
        font-size: 0.75rem;
        line-height: 1.3;
    }

    .channel-card-genre {
        font-size: 0.625rem;
    }

    .channel-card-play {
        width: 36px !important;
        height: 36px !important;
    }

    /* Play Button größer */
    .on-air-play-btn {
        width: 120px;
        height: 120px;
    }

    .on-air-icon-play {
        width: 52px;
        height: 64px;
        margin-left: 6px;
    }

    .on-air-icon-pause {
        width: 52px;
        height: 64px;
    }

    /* Titel und Channel Info kompakter */
    .on-air-title {
        font-size: 1rem;
    }

    .on-air-channel {
        padding-top: 1rem;
    }

    .on-air-channel-logo {
        width: 50px;
        height: 50px;
        padding: 0;
    }

    .on-air-channel-name {
        font-size: 1rem;
    }

    .on-air-channel-genre {
        font-size: 0.75rem;
    }

    /* Now Playing kompakter */
    .now-playing-cover {
        width: 50px;
        height: 50px;
    }

    .now-playing-track {
        font-size: 0.8125rem;
    }

    .now-playing-meta {
        font-size: 0.75rem;
    }

    /* Social Links */
    .on-air-social {
        padding-top: 0.5rem;
    }

    .on-air-social-link {
        width: 36px;
        height: 36px;
    }

    /* Hero Slide Content anpassen */
    .hero-slide-overlay {
        padding: 1.25rem;
    }

    .hero-slide-title {
        font-size: 1.25rem;
        margin-bottom: 0.5rem;
    }

    .hero-slide-description {
        font-size: 0.875rem;
        margin-bottom: 1rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .hero-slide-content .btn,
    .hero-slide-content .btn-primary {
        padding: 0.5rem 1rem;
        font-size: 0.8125rem;
    }
}

@media (max-width: 480px) {
    .hero-slider {
        height: 65vw; /* etwas höher für kleine Screens */
        max-height: 260px;
        min-height: 180px;
    }

    .on-air-box {
        padding: 1rem;
    }

    .on-air-play-btn {
        width: 100px;
        height: 100px;
    }

    .on-air-icon-play {
        width: 44px;
        height: 54px;
        margin-left: 5px;
    }

    .on-air-icon-pause {
        width: 44px;
        height: 54px;
    }

    .on-air-title {
        font-size: 0.9375rem;
    }

    .on-air-channel-logo {
        width: 50px;
        height: 50px;
    }

    .on-air-channel-name {
        font-size: 0.9375rem;
    }

    .hero-slide-title {
        font-size: 1.0625rem;
    }

    .hero-slide-description {
        font-size: 0.8125rem;
        -webkit-line-clamp: 1;
    }
}

/* ==============================================
   CHANNEL GRID - MOBILE (gleiche Breite)
============================================== */

@media (max-width: 768px) {
    /* Prevent horizontal overflow */

    /* Channel Slider Overflow Fix */
    .channel-slider,
    .channel-slider-wrapper {
        overflow: hidden !important;
        max-width: 100vw !important;
    }

    .channel-slider-viewport {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        max-width: 100% !important;
    }
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* Usercentrics Fix */
    #usercentrics-root,
    [class*="uc-"],
    .uc-embed-container {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    .section-channels,
    .section-news,
    .section-events {
        padding-left: 0;
        padding-right: 0;
    }

    .channel-grid {
        gap: 1rem;
    }

    .channel-card {
        max-width: none;
    }
}

/* ==============================================
   TABLET OPTIMIZATIONS (769px - 1279px)
============================================== */
@media (min-width: 769px) and (max-width: 1279px) {
    /* Container: Links/Rechts Padding */
    .container {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }

    /* On-Air Box: Auto-Höhe wenn einspaltiges Layout */
    .on-air-box {
        height: auto;
        max-height: none;
        min-height: auto;
        padding: 1.5rem;
    }

    /* Hero Grid: weniger Gap */
    .hero-grid {
        gap: 1.5rem;
    }

    /* Hero Section: Header-Abstand anpassen */
    .hero-section {
        padding-top: calc(160px + 1rem) !important;
    }

    /* Unterseiten: Header-Abstand anpassen */
    .page-content-top,
    body.category .page-content-top,
    body.archive .page-content-top,
    body.page .page-content-top,
    body.single .page-content-top,
    body.post-type-archive .page-content-top {
        padding-top: calc(160px + 1rem) !important;
    }

    /* On-Air Play Button: etwas kleiner */
    .on-air-play-btn {
        width: 140px;
        height: 140px;
    }

    .on-air-icon-play {
        width: 50px;
        height: 75px;
    }

    .on-air-icon-pause {
        width: 58px;
        height: 75px;
    }

    /* News Grid: 1 Spalte wie Mobile */
    .news-grid {
        grid-template-columns: 1fr !important;
    }

    /* Events Grid: 2 Spalten auf Tablet */
    .grid-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Drittes Event auf Tablet ausblenden */
    .section-events .grid-3 > .event-card:nth-child(3) {
        display: none !important;
    }

    /* Player sichtbar auf Tablet */
    .radio-player {
        display: block !important;
        position: fixed !important;
        bottom: 0 !important;
    }
}

/* ==============================================
   STREAMS PAGE - MOBILE OPTIMIERUNGEN
============================================== */
@media (max-width: 767px) {
    /* Container-Padding für Streams-Seite */
    .streams-page .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Streams Header kompakter */
    .streams-header {
        padding: 1rem 0 1.5rem !important;
    }
    
    .streams-header-text h1 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0.75rem !important;
    }
    
    .streams-description {
        font-size: 0.9375rem !important;
    }
    
    .streams-description p {
        margin-bottom: 0.5rem !important;
    }
    
    /* Grid: 2 Spalten aber mit mehr Platz */
    .streams-grid {
        display: grid !important;
        flex-wrap: wrap !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        scroll-snap-type: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.625rem !important;
    }
    
    /* Stream Cards - besser lesbar */
    .stream-card {
        border-radius: 0.75rem !important;
    }
    
    /* Stärkeres Overlay für bessere Lesbarkeit */
    .stream-card-overlay {
        background: linear-gradient(
            to top, 
            rgba(0, 0, 0, 0.85) 0%, 
            rgba(0, 0, 0, 0.5) 40%, 
            rgba(0, 0, 0, 0.1) 70%,
            transparent 100%
        ) !important;
    }
    
    /* Text Info - größer und besser lesbar */
    .stream-card-info {
        padding: 0.75rem !important;
    }
    
    .stream-card-name {
        font-size: 0.8125rem !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
        /* Max 2 Zeilen */
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
    
    /* Genre auf Mobile anzeigen */
    .stream-card-genre {
        display: block !important;
        font-size: 0.6875rem !important;
        opacity: 0.9 !important;
        margin-top: 0.125rem !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
    }
    
    /* Play Button auf Mobile immer leicht sichtbar */
    .stream-card-play {
        width: 2.5rem !important;
        height: 2.5rem !important;
        opacity: 0.9 !important;
    }
    
    .stream-card-play svg {
        width: 1.25rem !important;
        height: 1.25rem !important;
    }
    
    /* Suchfeld */
    .streams-search {
        max-width: none !important;
    }
    
    .search-input {
        height: 2.75rem !important;
        font-size: 1rem !important;
    }
}

/* Noch kleinere Screens (iPhone SE etc.) */
@media (max-width: 374px) {
    .streams-grid {
        display: grid !important;
        flex-wrap: wrap !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        scroll-snap-type: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }
    
    .stream-card-name {
        font-size: 0.75rem !important;
    }
    
    .stream-card-genre {
        font-size: 0.625rem !important;
    }
    
    .stream-card-info {
        padding: 0.5rem !important;
    }
}

/* ==============================================
   ON-AIR BOX - EINHEITLICHE AUSRICHTUNG MOBILE
============================================== */
@media (max-width: 767px) {
    /* Beide Info-Container gleich ausrichten */
    .on-air-channel-info,
    .now-playing-content {
        margin-left: 0 !important;
        gap: 0.75rem !important;
        align-items: center !important;
    }
    
    /* Beide Bilder gleiche Größe und Style */
    .on-air-channel-logo,
    .now-playing-cover {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        border-radius: 8px !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
    }
    
    .on-air-channel-logo img,
    .now-playing-cover img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 8px !important;
    }
}