/**
 * CLAUDE: YouTube-Seiten Styling
 * CLAUDE: Für page-youtube.php (Hub) und page-promptgefluester.php (Kanal)
 * CLAUDE: Anpassen: Farben, Abstände, Card-Layouts
 */

/* ==========================================================================
   CLAUDE: YouTube-spezifische Variablen
   ========================================================================== */

:root {
    --pvm-youtube-red: #FF0000;
    --pvm-youtube-red-hover: #CC0000;
    --pvm-youtube-dark: #282828;
}

/* ==========================================================================
   CLAUDE: Hero Section - YouTube Variante
   ========================================================================== */

/* CLAUDE: Hero mit YouTube-Branding */
.pvm-hero--youtube .pvm-hero-kicker,
.pvm-hero--promptgefluester .pvm-hero-kicker {
    color: var(--pvm-youtube-red);
}

/* ==========================================================================
   CLAUDE: Split-Hero Layout für YouTube Hub-Seite
   CLAUDE: Bild rechts, Content links - wie Chatbots-Seite
   ========================================================================== */

/* CLAUDE: Split-Hero Basis-Layout */
.pvm-hero--youtube.pvm-hero--split,
.pvm-hero--promptgefluester.pvm-hero--split {
    text-align: left;
    padding: var(--pvm-space-2xl) 0;
    min-height: auto;
}

/* CLAUDE: Grid mit 2 Spalten: Content links (55%), Bild rechts (45%) */
.pvm-hero--youtube.pvm-hero--split .pvm-hero__grid,
.pvm-hero--promptgefluester.pvm-hero--split .pvm-hero__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--pvm-space-2xl);
    align-items: center;
}

/* CLAUDE: Content-Spalte links (explizite Order) */
.pvm-hero--youtube.pvm-hero--split .pvm-hero__content,
.pvm-hero--promptgefluester.pvm-hero--split .pvm-hero__content {
    max-width: 600px;
    order: 1;
}

/* CLAUDE: Bild-Spalte rechts (explizite Order) */
/* CLAUDE: FIX 2026-01-09: align-self: stretch sorgt dafür, dass Bild-Spalte volle Höhe einnimmt */
.pvm-hero--youtube.pvm-hero--split .pvm-hero__image,
.pvm-hero--promptgefluester.pvm-hero--split .pvm-hero__image {
    position: relative;
    justify-self: end;
    align-self: stretch; /* CLAUDE: Volle Höhe des Grid-Rows */
    order: 2;
}

/* CLAUDE: Hero Visual (YouTube Play Icon + Thumbnails) */
.pvm-hero--youtube.pvm-hero--split .pvm-youtube-hero-visual {
    width: 100%;
    max-width: 480px;
    aspect-ratio: 4 / 3;
}

/* CLAUDE: CTA Buttons nebeneinander, gleiche Breite */
/* CLAUDE: flex-wrap: nowrap verhindert Umbruch auf Desktop */
/* CLAUDE: flex: 1 sorgt für gleiche Breite beider Buttons */
.pvm-hero--youtube.pvm-hero--split .pvm-hero-ctas,
.pvm-hero--promptgefluester.pvm-hero--split .pvm-hero-ctas {
    display: flex;
    flex-wrap: nowrap; /* CLAUDE: Kein Umbruch auf Desktop */
    gap: var(--pvm-space-md);
    align-items: stretch;
    justify-content: flex-start;
    margin-top: var(--pvm-space-lg);
    max-width: 520px; /* CLAUDE: Begrenzt Gesamtbreite für harmonisches Layout */
}

/* CLAUDE: Buttons gleiche Größe und Höhe - konsistent */
/* CLAUDE: flex: 1 verteilt Breite gleichmäßig */
.pvm-hero--youtube.pvm-hero--split .pvm-hero-ctas .pvm-btn,
.pvm-hero--promptgefluester.pvm-hero--split .pvm-hero-ctas .pvm-btn {
    flex: 1; /* CLAUDE: Gleiche Breite für beide Buttons */
    min-width: 0; /* CLAUDE: Erlaubt flex: 1 korrekt zu wirken */
    min-height: 56px;
    padding: var(--pvm-space-md) var(--pvm-space-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pvm-space-sm);
    font-size: var(--pvm-text-base);
    font-weight: 600;
    white-space: nowrap; /* CLAUDE: Verhindert Textumbruch im Button */
}

/* CLAUDE: Icons in Buttons einheitlich */
.pvm-hero--youtube.pvm-hero--split .pvm-hero-ctas .pvm-btn svg,
.pvm-hero--promptgefluester.pvm-hero--split .pvm-hero-ctas .pvm-btn svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* CLAUDE: Responsive - Tablet (1024px) */
@media (max-width: 1024px) {
    .pvm-hero--youtube.pvm-hero--split .pvm-hero__grid,
    .pvm-hero--promptgefluester.pvm-hero--split .pvm-hero__grid {
        grid-template-columns: 1fr;
        gap: var(--pvm-space-xl);
    }

    .pvm-hero--youtube.pvm-hero--split .pvm-hero__image,
    .pvm-hero--promptgefluester.pvm-hero--split .pvm-hero__image {
        order: -1; /* CLAUDE: Bild oben auf Tablet/Mobile */
        justify-self: center;
        align-self: auto; /* CLAUDE: Überschreibt stretch für Mobile - Bild behält aspect-ratio */
    }

    .pvm-hero--youtube.pvm-hero--split .pvm-youtube-hero-visual {
        max-width: 400px;
    }

    /* CLAUDE: Featured Video auf Mobile - natürliches Seitenverhältnis */
    .pvm-hero--youtube.pvm-hero--split .pvm-featured-video,
    .pvm-hero--promptgefluester.pvm-hero--split .pvm-featured-video {
        height: auto; /* CLAUDE: Natürliche Höhe auf Mobile */
        aspect-ratio: 16 / 9; /* CLAUDE: YouTube Standard-Verhältnis */
        min-height: auto;
    }

    .pvm-hero--youtube.pvm-hero--split .pvm-hero__content,
    .pvm-hero--promptgefluester.pvm-hero--split .pvm-hero__content {
        max-width: none;
        text-align: center;
    }

    /* CLAUDE: Buttons bleiben nebeneinander, aber zentriert */
    .pvm-hero--youtube.pvm-hero--split .pvm-hero-ctas,
    .pvm-hero--promptgefluester.pvm-hero--split .pvm-hero-ctas {
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
    }
}

/* CLAUDE: Responsive - Mobile (768px) */
/* CLAUDE: Buttons untereinander auf Mobile für bessere Touch-Bedienung */
@media (max-width: 768px) {
    .pvm-hero--youtube.pvm-hero--split,
    .pvm-hero--promptgefluester.pvm-hero--split {
        padding: var(--pvm-space-xl) 0;
    }

    .pvm-hero--youtube.pvm-hero--split .pvm-hero-ctas,
    .pvm-hero--promptgefluester.pvm-hero--split .pvm-hero-ctas {
        flex-direction: column;
        flex-wrap: wrap;
        align-items: stretch;
        max-width: 320px; /* CLAUDE: Begrenzt Button-Breite auf Mobile */
    }

    .pvm-hero--youtube.pvm-hero--split .pvm-hero-ctas .pvm-btn,
    .pvm-hero--promptgefluester.pvm-hero--split .pvm-hero-ctas .pvm-btn {
        width: 100%;
        flex: none; /* CLAUDE: Überschreibt flex: 1 für volle Breite */
        white-space: normal; /* CLAUDE: Erlaubt Textumbruch falls nötig */
    }
}

/* CLAUDE: Subtitle für Promptgeflüster */
.pvm-hero-subtitle {
    font-size: var(--pvm-text-xl);
    color: var(--pvm-text-secondary);
    margin-top: calc(-1 * var(--pvm-space-sm));
    margin-bottom: var(--pvm-space-md);
}

/* CLAUDE: YouTube Hero Visual (Play Button + Thumbnails) */
.pvm-youtube-hero-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    background: linear-gradient(135deg, var(--pvm-surface) 0%, var(--pvm-surface-elevated) 100%);
    border-radius: var(--pvm-radius-xl);
    overflow: hidden;
}

/* CLAUDE: Großes YouTube Play Icon */
.pvm-youtube-play-icon {
    color: var(--pvm-youtube-red);
    animation: pvm-pulse 2s ease-in-out infinite;
}

@keyframes pvm-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.9; }
}

/* CLAUDE: Floating Thumbnails */
.pvm-floating-thumbnails {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.pvm-float-thumb {
    position: absolute;
    border-radius: var(--pvm-radius-md);
    box-shadow: var(--pvm-shadow-lg);
    width: 120px;
    height: auto;
    opacity: 0.7;
}

.pvm-float-thumb--1 { top: 10%; left: 5%; transform: rotate(-5deg); }
.pvm-float-thumb--2 { top: 60%; right: 5%; transform: rotate(5deg); }
.pvm-float-thumb--3 { bottom: 10%; left: 15%; transform: rotate(-3deg); }

/* ==========================================================================
   CLAUDE: YouTube Button Styling
   ========================================================================== */

.pvm-btn--youtube {
    background: var(--pvm-youtube-red);
    color: #ffffff;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: var(--pvm-space-xs);
}

.pvm-btn--youtube:hover,
.pvm-btn--youtube:focus {
    background: var(--pvm-youtube-red-hover);
    color: #ffffff;
}

.pvm-btn--youtube svg {
    flex-shrink: 0;
}

/* ==========================================================================
   CLAUDE: Featured Video (Hero rechts)
   ========================================================================== */

/* CLAUDE: FIX 2026-01-09: Featured Video füllt jetzt den verfügbaren Platz aus */
.pvm-featured-video {
    position: relative;
    display: block;
    height: 100%; /* CLAUDE: Volle Höhe des Containers */
    min-height: 280px; /* CLAUDE: Mindesthöhe für kleinere Viewports */
    border-radius: var(--pvm-radius-xl);
    overflow: hidden;
    box-shadow: var(--pvm-shadow-xl);
    transition: transform var(--pvm-transition), box-shadow var(--pvm-transition);
}

.pvm-featured-video:hover {
    transform: translateY(-4px);
    box-shadow: var(--pvm-shadow-2xl);
}

/* CLAUDE: Bild füllt Container mit object-fit: cover */
.pvm-featured-video img {
    width: 100%;
    height: 100%; /* CLAUDE: Volle Höhe statt auto */
    object-fit: cover; /* CLAUDE: Füllt Container, schneidet überschüssige Teile ab */
    object-position: center; /* CLAUDE: Zentriert das Bild */
    display: block;
}

/* CLAUDE: Play Button Overlay */
.pvm-featured-video__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: var(--pvm-youtube-red);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    transition: transform var(--pvm-transition), background var(--pvm-transition);
}

.pvm-featured-video:hover .pvm-featured-video__play {
    transform: translate(-50%, -50%) scale(1.1);
    background: var(--pvm-youtube-red-hover);
}

.pvm-featured-video__play svg {
    margin-left: 4px; /* CLAUDE: Optische Zentrierung des Play-Icons */
}

/* CLAUDE: "Neuestes Video" Badge */
.pvm-featured-video__badge {
    position: absolute;
    top: var(--pvm-space-md);
    left: var(--pvm-space-md);
    background: var(--pvm-youtube-red);
    color: #ffffff;
    padding: var(--pvm-space-xs) var(--pvm-space-sm);
    border-radius: var(--pvm-radius-sm);
    font-size: var(--pvm-text-sm);
    font-weight: 600;
}

/* ==========================================================================
   CLAUDE: Channel Cards (Hub-Seite)
   ========================================================================== */

.pvm-channels-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--pvm-space-xl);
    margin-top: var(--pvm-space-xl);
}

.pvm-channel-card {
    background: var(--pvm-surface);
    border-radius: var(--pvm-radius-xl);
    overflow: hidden;
    box-shadow: var(--pvm-shadow-md);
    transition: transform var(--pvm-transition), box-shadow var(--pvm-transition);
}

.pvm-channel-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--pvm-shadow-xl);
}

/* CLAUDE: Channel Thumbnail */
.pvm-channel-card__thumbnail {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.pvm-channel-card__thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--pvm-transition);
}

.pvm-channel-card:hover .pvm-channel-card__thumbnail img {
    transform: scale(1.05);
}

/* CLAUDE: Play Overlay */
.pvm-channel-card__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    background: rgba(255, 0, 0, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    opacity: 0;
    transition: opacity var(--pvm-transition);
}

.pvm-channel-card:hover .pvm-channel-card__play {
    opacity: 1;
}

.pvm-channel-card__play svg {
    margin-left: 4px;
}

/* CLAUDE: Channel Content */
.pvm-channel-card__content {
    padding: var(--pvm-space-lg);
}

.pvm-channel-card__content h3 {
    font-size: var(--pvm-text-xl);
    margin-bottom: var(--pvm-space-sm);
}

.pvm-channel-card__content h3 a {
    color: inherit;
    text-decoration: none;
}

.pvm-channel-card__content h3 a:hover {
    color: var(--pvm-primary);
}

.pvm-channel-card__description {
    color: var(--pvm-text-secondary);
    margin-bottom: var(--pvm-space-md);
    line-height: 1.6;
}

/* CLAUDE: Topic Tags */
.pvm-channel-card__topics {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pvm-space-xs);
    margin-bottom: var(--pvm-space-md);
}

.pvm-topic-tag {
    background: var(--pvm-surface-elevated);
    color: var(--pvm-text-secondary);
    padding: var(--pvm-space-xs) var(--pvm-space-sm);
    border-radius: var(--pvm-radius-sm);
    font-size: var(--pvm-text-sm);
}

/* CLAUDE: Channel Footer */
.pvm-channel-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--pvm-space-md);
    border-top: 1px solid var(--pvm-border);
}

.pvm-channel-card__count {
    color: var(--pvm-text-muted);
    font-size: var(--pvm-text-sm);
}

/* ==========================================================================
   CLAUDE: Topics Section (Hub-Seite)
   CLAUDE: FIX 2026-01-09: Kontrastreiche Farben für bessere Lesbarkeit
   CLAUDE: Problem: --pvm-surface Variablen waren undefined → weiß auf weiß
   ========================================================================== */

.pvm-topics-section {
    padding: var(--pvm-space-3xl) 0;
    background: #f4f5f7; /* CLAUDE: Leichtes Grau als Section-Hintergrund */
}

.pvm-topics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--pvm-space-lg);
    margin-top: var(--pvm-space-xl);
}

.pvm-topic-card {
    background: #ffffff; /* CLAUDE: Weiße Cards auf grauem Hintergrund */
    padding: var(--pvm-space-xl);
    border-radius: var(--pvm-radius-lg);
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); /* CLAUDE: Dezenter Schatten */
    border: 1px solid rgba(0, 0, 0, 0.06); /* CLAUDE: Minimale Border für Definition */
    transition: transform var(--pvm-transition-base), box-shadow var(--pvm-transition-base);
}

.pvm-topic-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); /* CLAUDE: Stärkerer Hover-Schatten */
}

.pvm-topic-card__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--pvm-space-md);
    background: var(--pvm-gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff; /* CLAUDE: Weiße Icons auf Gradient */
}

.pvm-topic-card h3 {
    font-size: var(--pvm-text-lg, 1.125rem);
    margin-bottom: var(--pvm-space-sm);
    color: #1a1a1a; /* CLAUDE: Dunkler Titel für Kontrast */
}

.pvm-topic-card p {
    color: #555555; /* CLAUDE: Mittelgrauer Text - gut lesbar auf weiß */
    font-size: var(--pvm-text-sm, 0.875rem);
    line-height: 1.6;
    margin: 0; /* CLAUDE: Kein zusätzliches Margin */
}

/* ==========================================================================
   CLAUDE: Subscribe CTA Section
   ========================================================================== */

.pvm-subscribe-cta {
    padding: var(--pvm-space-3xl) 0;
    background: linear-gradient(135deg, var(--pvm-youtube-dark) 0%, #1a1a1a 100%);
    color: #ffffff;
}

.pvm-subscribe-cta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pvm-space-xl);
    flex-wrap: wrap;
}

.pvm-subscribe-cta__content h2 {
    color: #ffffff;
    margin-bottom: var(--pvm-space-sm);
}

.pvm-subscribe-cta__content p {
    color: rgba(255, 255, 255, 0.8);
    max-width: 500px;
}

/* ==========================================================================
   CLAUDE: Video Gallery (Kanal-Seite)
   ========================================================================== */

.pvm-video-gallery {
    padding: var(--pvm-space-3xl) 0;
}

/* CLAUDE: Filter Buttons */
.pvm-video-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pvm-space-sm);
    margin-bottom: var(--pvm-space-xl);
}

.pvm-filter-btn {
    background: var(--pvm-surface-elevated);
    border: 1px solid var(--pvm-border);
    color: var(--pvm-text-secondary);
    padding: var(--pvm-space-sm) var(--pvm-space-md);
    border-radius: var(--pvm-radius-full);
    font-size: var(--pvm-text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--pvm-transition);
}

.pvm-filter-btn:hover {
    border-color: var(--pvm-primary);
    color: var(--pvm-primary);
}

.pvm-filter-btn--active {
    background: var(--pvm-primary);
    border-color: var(--pvm-primary);
    color: #ffffff;
}

/* CLAUDE: Video Grid */
.pvm-video-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--pvm-space-xl);
}

/* CLAUDE: Video Card */
.pvm-video-card {
    background: var(--pvm-surface);
    border-radius: var(--pvm-radius-lg);
    overflow: hidden;
    box-shadow: var(--pvm-shadow-sm);
    transition: transform var(--pvm-transition), box-shadow var(--pvm-transition);
}

.pvm-video-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--pvm-shadow-lg);
}

/* CLAUDE: Hidden State für Filter */
.pvm-video-card[hidden] {
    display: none;
}

/* CLAUDE: Video Thumbnail */
.pvm-video-card__thumbnail {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.pvm-video-card__thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--pvm-transition);
}

.pvm-video-card:hover .pvm-video-card__thumbnail img {
    transform: scale(1.05);
}

/* CLAUDE: Play Button */
.pvm-video-card__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    background: rgba(255, 0, 0, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    opacity: 0;
    transition: opacity var(--pvm-transition), transform var(--pvm-transition);
}

.pvm-video-card:hover .pvm-video-card__play {
    opacity: 1;
}

.pvm-video-card__play svg {
    margin-left: 4px;
}

/* CLAUDE: Video Content */
.pvm-video-card__content {
    padding: var(--pvm-space-md);
}

/* CLAUDE: Category Badge */
.pvm-video-card__category {
    display: inline-block;
    background: var(--pvm-surface-elevated);
    color: var(--pvm-primary);
    padding: var(--pvm-space-xs) var(--pvm-space-sm);
    border-radius: var(--pvm-radius-sm);
    font-size: var(--pvm-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--pvm-space-sm);
}

/* CLAUDE: Video Title */
.pvm-video-card__title {
    font-size: var(--pvm-text-base);
    line-height: 1.4;
    margin-bottom: var(--pvm-space-sm);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pvm-video-card__title a {
    color: inherit;
    text-decoration: none;
}

.pvm-video-card__title a:hover {
    color: var(--pvm-primary);
}

/* CLAUDE: Video Description */
.pvm-video-card__description {
    color: var(--pvm-text-secondary);
    font-size: var(--pvm-text-sm);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ==========================================================================
   CLAUDE: Premium Feature-Liste mit Checkmark-Icons
   CLAUDE: Ersetzt einfache Bullet Points für professionelleres Design
   ========================================================================== */

/* CLAUDE: Feature-Liste Container */
.pvm-feature-list {
    list-style: none;
    padding: 0;
    margin: var(--pvm-space-lg) 0;
}

/* CLAUDE: 2-spaltige Variante für Desktop */
.pvm-feature-list--2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--pvm-space-md) var(--pvm-space-xl);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* CLAUDE: Einzelnes Feature-Item */
.pvm-feature-list__item {
    display: flex;
    align-items: flex-start;
    gap: var(--pvm-space-sm);
    color: var(--pvm-text);
    font-size: var(--pvm-text-base);
    line-height: 1.5;
    text-align: left;
}

/* CLAUDE: Checkmark Icon - YouTube Red */
.pvm-feature-list__item svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--pvm-youtube-red);
    margin-top: 2px;
}

/* CLAUDE: Text in Feature-Item */
.pvm-feature-list__item span {
    flex: 1;
}

/* CLAUDE: Mobile - Einspaltig */
@media (max-width: 640px) {
    .pvm-feature-list--2col {
        grid-template-columns: 1fr;
        gap: var(--pvm-space-sm);
    }
}

/* ==========================================================================
   CLAUDE: Legacy Intro List Styling (Fallback)
   ========================================================================== */

.pvm-intro__list {
    list-style: none;
    padding: 0;
    margin: var(--pvm-space-md) 0;
}

.pvm-intro__list li {
    position: relative;
    padding-left: var(--pvm-space-lg);
    margin-bottom: var(--pvm-space-sm);
    color: var(--pvm-text-secondary);
}

.pvm-intro__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 8px;
    height: 8px;
    background: var(--pvm-gradient);
    border-radius: 50%;
}

/* ==========================================================================
   CLAUDE: Responsive Anpassungen
   ========================================================================== */

/* CLAUDE: Tablet */
@media (max-width: 1024px) {
    .pvm-video-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pvm-channels-grid {
        grid-template-columns: 1fr;
    }

    .pvm-subscribe-cta__inner {
        flex-direction: column;
        text-align: center;
    }

    .pvm-subscribe-cta__content p {
        max-width: none;
    }
}

/* CLAUDE: Mobile */
@media (max-width: 768px) {
    .pvm-video-grid {
        grid-template-columns: 1fr;
        gap: var(--pvm-space-lg);
    }

    .pvm-topics-grid {
        grid-template-columns: 1fr;
    }

    .pvm-floating-thumbnails {
        display: none;
    }

    .pvm-youtube-hero-visual {
        min-height: 200px;
    }

    .pvm-hero-subtitle {
        font-size: var(--pvm-text-lg);
    }

    .pvm-filter-btn {
        padding: var(--pvm-space-xs) var(--pvm-space-sm);
        font-size: var(--pvm-text-xs);
    }
}

/* ==========================================================================
   CLAUDE: Section Spacing - Konsistente Abstände
   CLAUDE: Behebt fehlende Paddings bei pvm-intro und pvm-channels-overview
   ========================================================================== */

/* CLAUDE: Intro Section mit korrektem Padding */
.pvm-intro {
    padding: var(--pvm-space-2xl) 0;
}

/* CLAUDE: Channels Overview mit korrektem Padding */
.pvm-channels-overview {
    padding: var(--pvm-space-2xl) 0 var(--pvm-space-3xl);
}

/* CLAUDE: Section Titel zentriert */
.pvm-channels-overview h2,
.pvm-topics-section h2,
.pvm-intro h2 {
    text-align: center;
    margin-bottom: var(--pvm-space-sm);
}

/* CLAUDE: Section Subtitle */
.pvm-section-subtitle {
    text-align: center;
    color: var(--pvm-text-muted);
    margin-bottom: var(--pvm-space-xl);
}

/* CLAUDE: Intro Content zentriert mit max-width */
.pvm-intro__content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.pvm-intro__content p {
    color: var(--pvm-text-secondary);
    line-height: 1.7;
    margin-bottom: var(--pvm-space-md);
}

/* CLAUDE: FAQ Section Spacing - konsistent mit anderen Seiten (Chatbots, Werbeformen, etc.) */
/* CLAUDE: FIX 2026-01-09: War padding-bottom 96px, jetzt 64px wie andere Seiten */
.pvm-faq {
    padding: var(--pvm-space-2xl) 0;
}

/* ==========================================================================
   CLAUDE: Standard FAQ Styling (konsistent mit Chatbots-Seite)
   CLAUDE: Für pvm-faq-item Klassen (Card-Design Pattern)
   CLAUDE: FIX 2026-01-09: Vollständiger Border wie Chatbots statt nur border-bottom
   ========================================================================== */

/* CLAUDE: FAQ Container mit max-width */
.pvm-faq__list {
    max-width: 800px;
    margin: 0 auto;
}

/* CLAUDE: FAQ Item als Card mit vollständigem Border (wie Chatbots) */
.pvm-faq-item {
    background: #fafafa; /* CLAUDE: Leichter Hintergrund */
    border: 1px solid #e0e0e0; /* CLAUDE: Vollständiger Border um die Karte */
    border-radius: 10px;
    margin-bottom: var(--pvm-space-md); /* CLAUDE: Abstand zwischen Cards */
    overflow: hidden;
}

.pvm-faq-item:last-child {
    margin-bottom: 0;
}

/* CLAUDE: Frage-Button - Full Width mit Space-Between (Card-Style wie Chatbots) */
.pvm-faq-item__question {
    width: 100%;
    padding: var(--pvm-space-md) var(--pvm-space-lg); /* CLAUDE: Innerer Padding für Card */
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.0625rem; /* CLAUDE: 17px wie Chatbots */
    font-weight: 600;
    text-align: left;
    color: #1a1a1a; /* CLAUDE: Fast Schwarz */
    transition: background 0.2s;
    line-height: 1.4;
}

.pvm-faq-item__question:hover {
    background: #f0f0f0; /* CLAUDE: Sichtbarer Hover-Effekt */
}

.pvm-faq-item__question[aria-expanded="true"] {
    background: #f0f0f0; /* CLAUDE: Aktiver Zustand */
}

/* CLAUDE: Frage-Text */
.pvm-faq-item__question span {
    flex: 1;
    padding-right: var(--pvm-space-md);
}

/* CLAUDE: Plus/Minus Icon mit Rotation bei Open (wie Chatbots) */
.pvm-faq-item__icon {
    font-size: 1.5rem;
    color: #5a0778; /* CLAUDE: Provimedia Lila */
    transition: transform 0.3s;
    flex-shrink: 0;
    margin-left: var(--pvm-space-sm);
}

.pvm-faq-item__question[aria-expanded="true"] .pvm-faq-item__icon {
    transform: rotate(45deg); /* CLAUDE: + wird zu × */
}

/* CLAUDE: Antwort-Container (Card-Style mit horizontalem Padding) */
.pvm-faq-item__answer {
    padding: 0 var(--pvm-space-lg) var(--pvm-space-lg);
    color: #333333; /* CLAUDE: Dunklerer Text für Lesbarkeit */
    line-height: 1.7;
    font-size: 0.9375rem; /* CLAUDE: 15px */
}

.pvm-faq-item__answer[hidden] {
    display: none;
}

/* CLAUDE: Absätze in Antworten */
.pvm-faq-item__answer p {
    margin-bottom: var(--pvm-space-sm);
    color: #333333;
}

.pvm-faq-item__answer p:last-child {
    margin-bottom: 0;
}

/* CLAUDE: Listen in Antworten */
.pvm-faq-item__answer ul,
.pvm-faq-item__answer ol {
    margin: var(--pvm-space-sm) 0;
    padding-left: var(--pvm-space-lg);
}

.pvm-faq-item__answer li {
    margin-bottom: var(--pvm-space-xs);
    color: #333333;
}

/* CLAUDE: Strong/Bold in Antworten */
.pvm-faq-item__answer strong {
    color: #1a1a1a; /* CLAUDE: Fetter Text dunkler */
    font-weight: 600;
}

/* CLAUDE: Links in Antworten */
.pvm-faq-item__answer a {
    color: var(--pvm-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pvm-faq-item__answer a:hover {
    color: var(--pvm-primary-dark, var(--pvm-primary));
    text-decoration: none;
}

/* CLAUDE: Code in Antworten */
.pvm-faq-item__answer code {
    background: var(--pvm-surface-elevated);
    padding: 2px 6px;
    border-radius: var(--pvm-radius-sm);
    font-size: 0.9em;
}

/* ==========================================================================
   CLAUDE: Dark Mode Support
   CLAUDE: Dual-Selector Pattern - Manueller Toggle + System-Präferenz
   ========================================================================== */

/* CLAUDE: Manueller Toggle */
html[data-theme="dark"] .pvm-subscribe-cta {
    background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
}

html[data-theme="dark"] .pvm-topic-card,
html[data-theme="dark"] .pvm-channel-card,
html[data-theme="dark"] .pvm-video-card {
    background: var(--pvm-dark-surface);
    border: 1px solid var(--pvm-dark-border);
}

html[data-theme="dark"] .pvm-topics-section {
    background: var(--pvm-dark-bg);
}

html[data-theme="dark"] .pvm-topic-card {
    background: var(--pvm-dark-surface);
    border: 1px solid var(--pvm-dark-border);
}

html[data-theme="dark"] .pvm-topic-card h3 {
    color: var(--pvm-dark-text);
}

html[data-theme="dark"] .pvm-topic-card p {
    color: var(--pvm-dark-text-muted);
}

html[data-theme="dark"] .pvm-channel-card__content h3,
html[data-theme="dark"] .pvm-video-card__title {
    color: var(--pvm-dark-text);
}

html[data-theme="dark"] .pvm-channel-card__description,
html[data-theme="dark"] .pvm-video-card__description {
    color: var(--pvm-dark-text-muted);
}

html[data-theme="dark"] .pvm-faq-item {
    background: var(--pvm-dark-surface);
    border-color: var(--pvm-dark-border);
}

html[data-theme="dark"] .pvm-faq-item__question {
    color: var(--pvm-dark-text);
}

html[data-theme="dark"] .pvm-faq-item__question:hover {
    background: var(--pvm-dark-bg);
}

html[data-theme="dark"] .pvm-faq-item__answer,
html[data-theme="dark"] .pvm-faq-item__answer p {
    color: var(--pvm-dark-text-muted);
}

/* CLAUDE: System-Präferenz - Fallback */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .pvm-subscribe-cta {
        background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
    }

    html:not([data-theme="light"]) .pvm-topic-card,
    html:not([data-theme="light"]) .pvm-channel-card,
    html:not([data-theme="light"]) .pvm-video-card {
        background: var(--pvm-dark-surface);
        border: 1px solid var(--pvm-dark-border);
    }

    html:not([data-theme="light"]) .pvm-topics-section {
        background: var(--pvm-dark-bg);
    }

    html:not([data-theme="light"]) .pvm-topic-card {
        background: var(--pvm-dark-surface);
        border: 1px solid var(--pvm-dark-border);
    }

    html:not([data-theme="light"]) .pvm-topic-card h3 {
        color: var(--pvm-dark-text);
    }

    html:not([data-theme="light"]) .pvm-topic-card p {
        color: var(--pvm-dark-text-muted);
    }

    html:not([data-theme="light"]) .pvm-channel-card__content h3,
    html:not([data-theme="light"]) .pvm-video-card__title {
        color: var(--pvm-dark-text);
    }

    html:not([data-theme="light"]) .pvm-channel-card__description,
    html:not([data-theme="light"]) .pvm-video-card__description {
        color: var(--pvm-dark-text-muted);
    }

    html:not([data-theme="light"]) .pvm-faq-item {
        background: var(--pvm-dark-surface);
        border-color: var(--pvm-dark-border);
    }

    html:not([data-theme="light"]) .pvm-faq-item__question {
        color: var(--pvm-dark-text);
    }

    html:not([data-theme="light"]) .pvm-faq-item__question:hover {
        background: var(--pvm-dark-bg);
    }

    html:not([data-theme="light"]) .pvm-faq-item__answer,
    html:not([data-theme="light"]) .pvm-faq-item__answer p {
        color: var(--pvm-dark-text-muted);
    }
}