/**
 * Member Area Styles - i-doit Trainings
 *
 * Konsolidierte Styles für den Mitgliederbereich.
 * Verwendet konsistent Styleguide-Variablen.
 *
 * Breakpoint scale (aligned with CDN Styleguide):
 *   600px  — mobile
 *   768px  — tablet portrait
 *   900px  — tablet landscape
 *   1024px — desktop small
 */

/* ==========================================================================
   Section Member - Base Layout
   ========================================================================== */

.section-member {
    /* uses .page-content via HTML class, keep for backwards compat */
}

/* ==========================================================================
   Card Grid (Dashboard)
   ========================================================================== */

.section-member .card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--spacing-6);
}

.section-member .card-donamic {
    display: flex;
    flex-direction: column;
}

@media (max-width: 600px) {
    .section-member .card-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Course Card Dashboard (with image)
   ========================================================================== */

.course-card-dashboard {
    padding: 0;
    overflow: hidden;
}

.course-card-image {
    position: relative;
    height: 180px;
    overflow: hidden;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

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

.course-card-image.no-image img {
    display: none;
}

.course-card-badge {
    position: absolute;
    top: var(--spacing-3);
    left: var(--spacing-3);
}

.course-card-body {
    padding: var(--spacing-5);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.course-card-body .card-title {
    margin: 0 0 var(--spacing-2) 0;
}

.course-card-body .card-description {
    margin: 0 0 var(--spacing-3) 0;
}

/* Locked upsell variant */
.course-card-locked {
    border-style: dashed;
    opacity: 0.85;
    transition: opacity var(--duration-150);
}

.course-card-locked:hover {
    opacity: 1;
}

.course-card-locked .course-card-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   Profile Grid
   ========================================================================== */

.profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-8);
    max-width: 1000px;
}

@media (max-width: 768px) {
    .profile-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Course List
   ========================================================================== */

.course-list {
    display: grid;
    gap: var(--spacing-6);
}

/* Course Card Layout */
.course-card-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-6);
    flex-wrap: wrap;
}

.course-card-info {
    flex: 1;
    min-width: 300px;
}

.course-card-info h3 {
    margin: 0 0 var(--spacing-2) 0;
    font-size: var(--font-size-lg);
}

.course-card-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-2);
    flex-wrap: wrap;
}

.course-card-header h3 {
    margin: 0;
}

.course-description {
    margin: var(--spacing-2) 0;
    color: var(--color-text-muted);
}

.course-meta {
    display: flex;
    gap: var(--spacing-6);
    margin-top: var(--spacing-4);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.course-card-action {
    flex-shrink: 0;
}

.lock-icon {
    font-size: 1.25rem;
}

@media (max-width: 600px) {
    .course-card-content {
        flex-direction: column;
    }
    .course-card-action {
        width: 100%;
    }
    .course-card-action .btn-donamic {
        width: 100%;
    }
}

/* ==========================================================================
   Process Steps (zigzag layout with images, used on schulungen.php)
   CDN provides .steps for simple horizontal steps; this handles the
   alternating image+text layout.
   ========================================================================== */

.process-steps {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-10);
    margin-top: var(--spacing-6);
}

.process-step {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-10);
    align-items: center;
}

.process-step-right .process-step-content { order: 1; }
.process-step-right .process-step-image   { order: 2; }
.process-step-left .process-step-image    { order: 1; }
.process-step-left .process-step-content  { order: 2; }

.process-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--color-primary);
    color: var(--color-text-on-primary, #fff);
    border-radius: 50%;
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin-bottom: var(--spacing-4);
}

.process-step-image img {
    width: 100%;
    border-radius: var(--donamic-radius-lg, 12px);
}

@media (max-width: 768px) {
    .process-step {
        grid-template-columns: 1fr;
    }
    .process-step-right .process-step-content,
    .process-step-right .process-step-image,
    .process-step-left .process-step-content,
    .process-step-left .process-step-image {
        order: unset;
    }
}

/* ==========================================================================
   Kurs View (Single Course) — Two-Column Layout
   ========================================================================== */

.kurs-section {
    /* uses .page-content via HTML class */
}

.kurs-container {
    max-width: 1400px;
}

/* Top bar: breadcrumb + progress */
.kurs-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-4, 16px);
    margin-bottom: var(--spacing-4, 16px);
    flex-wrap: wrap;
}

.back-link {
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: var(--font-size-sm);
    transition: color var(--duration-150);
}

.back-link:hover {
    color: var(--color-primary);
}

/* Progress badge */
.kurs-progress-badge {
    display: flex;
    align-items: center;
    gap: var(--spacing-3, 12px);
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text-muted, #888);
}

.kurs-progress-bar {
    width: 100px;
    height: 6px;
    background: var(--color-border, #e5e5e5);
    border-radius: 3px;
    overflow: hidden;
}

.kurs-progress-fill {
    height: 100%;
    background: var(--color-primary, #63e526);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.kurs-progress-text {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Header */
.kurs-header {
    margin-bottom: var(--spacing-6, 24px);
}

.kurs-header h1 {
    margin: 0 0 var(--spacing-2) 0;
}

/* ---- Two-Column Layout ---- */
.kurs-layout {
    display: grid;
    grid-template-columns: 1fr auto 380px;
    gap: 0;
    align-items: start;
    margin-bottom: var(--spacing-8, 32px);
    position: relative;
    transition: grid-template-columns 0.3s ease;
}

.kurs-layout .kurs-main {
    margin-right: var(--spacing-6, 24px);
}

.kurs-layout.sidebar-collapsed {
    grid-template-columns: 1fr auto 0;
}

.kurs-layout.sidebar-collapsed .kurs-main {
    margin-right: 0;
}

.kurs-layout.sidebar-collapsed .kurs-sidebar {
    opacity: 0;
    pointer-events: none;
    width: 0;
    min-width: 0;
    overflow: hidden;
    border: none;
    padding: 0;
}

@media (max-width: 1024px) {
    .kurs-layout {
        grid-template-columns: 1fr;
    }
    .kurs-sidebar-toggle {
        display: none !important;
    }
}

/* Sidebar toggle button (direct child of .kurs-layout, between main and sidebar) */
.kurs-sidebar-toggle {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-top: 12px;
    border-radius: 8px;
    border: 1px solid var(--color-border, #e5e5e5);
    background: var(--color-surface, #fff);
    color: var(--color-text-muted, #666);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.kurs-sidebar-toggle:hover {
    background: var(--color-primary, #63e526);
    border-color: var(--color-primary, #63e526);
    color: #000;
    box-shadow: 0 2px 8px rgba(99, 229, 38, 0.3);
}
.kurs-sidebar-toggle svg {
    color: inherit;
}

.kurs-sidebar-toggle-closed {
    display: none;
}

/* Collapsed state: swap arrow direction */
.kurs-layout.sidebar-collapsed .kurs-sidebar-toggle-open {
    display: none;
}
.kurs-layout.sidebar-collapsed .kurs-sidebar-toggle-closed {
    display: block;
}

/* Main column */
.kurs-main {
    min-width: 0;
}

.kurs-main .video-card-full {
    margin-bottom: 0;
    border-radius: var(--donamic-radius-lg, 12px);
    overflow: hidden;
}

/* Video info below player */
.kurs-video-info {
    padding: var(--spacing-5, 20px) 0;
}

.kurs-video-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-4, 16px);
}

.kurs-video-title {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.3;
}

.kurs-video-meta {
    margin: var(--spacing-1, 4px) 0 0;
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text-muted, #888);
}

.kurs-video-desc {
    margin: var(--spacing-3, 12px) 0 0;
    color: var(--color-text-muted, #555);
    line-height: 1.6;
}

/* Watched button */
.kurs-watched-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1.5px solid var(--color-border, #ddd);
    border-radius: 20px;
    background: none;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-muted, #888);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--duration-150, 150ms);
    flex-shrink: 0;
}

.kurs-watched-btn:hover {
    border-color: var(--color-primary, #63e526);
    color: var(--color-primary, #63e526);
}

.kurs-watched-btn.is-watched {
    background: rgba(99, 229, 38, 0.1);
    border-color: var(--color-primary, #63e526);
    color: var(--color-primary, #63e526);
}

.kurs-watched-btn .kurs-watched-check {
    width: 16px;
    height: 16px;
}

/* Video Materials (downloads attached to a video) */
.video-materials {
    padding: var(--spacing-4) var(--spacing-5);
    border-top: 1px solid var(--color-border, #e5e5e5);
    background: var(--color-surface-subtle, #fafafa);
    border-radius: var(--donamic-radius-lg, 12px);
    margin-top: var(--spacing-4, 16px);
}

.video-materials h4 {
    margin: 0 0 var(--spacing-3) 0;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.video-materials .resource-list {
    margin: 0;
    padding: 0;
    border: none;
}

.kurs-section-downloads {
    margin-top: var(--spacing-3, 12px);
}

/* ---- Sidebar ---- */
.kurs-sidebar {
    position: sticky;
    top: 88px; /* navbar height + spacing */
    max-height: calc(100vh - 100px);
    overflow: visible;
    border: 1px solid var(--color-border, #e5e5e5);
    border-radius: var(--donamic-radius-lg, 12px);
    background: var(--color-surface, #fff);
}

.kurs-sidebar-sections {
    max-height: calc(100vh - 160px);
    overflow-y: auto;
}

/* Section accordion in sidebar */
.kurs-sb-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--spacing-4, 16px);
    border: none;
    border-bottom: 1px solid var(--color-border, #e5e5e5);
    background: var(--color-surface-subtle, #fafafa);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background var(--duration-150, 150ms);
}

.kurs-sb-section:first-child .kurs-sb-section-header {
    border-radius: var(--donamic-radius-lg, 12px) var(--donamic-radius-lg, 12px) 0 0;
}

.kurs-sb-section-header:hover {
    background: var(--color-border, #eee);
}

.kurs-sb-section-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.kurs-sb-section-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-text, #1a1a2e);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kurs-sb-section-meta {
    font-size: 0.72rem;
    color: var(--color-text-muted, #888);
    font-variant-numeric: tabular-nums;
}

.kurs-sb-chevron {
    flex-shrink: 0;
    color: var(--color-text-muted, #999);
    transition: transform var(--duration-150, 150ms);
}

.kurs-sb-section.is-open .kurs-sb-chevron {
    transform: rotate(180deg);
}

/* Section body (collapsed by default) */
.kurs-sb-section-body {
    display: none;
}

.kurs-sb-section.is-open .kurs-sb-section-body {
    display: block;
}

/* Video item in sidebar */
.kurs-sb-video {
    display: flex;
    align-items: center;
    gap: var(--spacing-3, 12px);
    padding: 10px var(--spacing-4, 16px);
    text-decoration: none;
    color: var(--color-text, #1a1a2e);
    border-bottom: 1px solid var(--color-border, #f0f0f0);
    transition: background var(--duration-150, 150ms);
}

.kurs-sb-video:last-child {
    border-bottom: none;
}

.kurs-sb-video:hover {
    background: var(--donamic-primary-light, rgba(99, 229, 38, 0.06));
}

.kurs-sb-video.is-active {
    background: var(--donamic-primary-light, rgba(99, 229, 38, 0.1));
    border-left: 3px solid var(--color-primary, #63e526);
    padding-left: calc(var(--spacing-4, 16px) - 3px);
}

.kurs-sb-video-num {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-text-muted, #999);
    background: var(--color-border, #eee);
    border-radius: 50%;
}

.kurs-sb-video.is-active .kurs-sb-video-num {
    background: var(--color-primary, #63e526);
    color: #fff;
}

.kurs-sb-video-info {
    flex: 1;
    min-width: 0;
}

.kurs-sb-video-title {
    display: block;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--color-text, #1a1a2e);
}

.kurs-sb-video.is-watched .kurs-sb-video-title {
    color: var(--color-text-muted, #888);
}

.kurs-sb-video-duration {
    display: block;
    font-size: 0.7rem;
    color: var(--color-text-muted, #999);
    margin-top: 1px;
}

.kurs-sb-video-status {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted, #ccc);
}

.kurs-sb-video.is-active .kurs-sb-video-status {
    color: var(--color-primary, #63e526);
}

.kurs-sb-video.is-watched .kurs-sb-video-status {
    color: var(--color-primary, #63e526);
}

/* Next Section Link */
.kurs-sb-next {
    display: flex;
    align-items: center;
    gap: var(--spacing-3, 12px);
    padding: var(--spacing-4, 16px);
    border-top: 1px solid var(--color-border, #e5e5e5);
    text-decoration: none;
    color: var(--color-text, #1a1a2e);
    transition: background var(--duration-150, 150ms);
}

.kurs-sb-next:hover {
    background: var(--donamic-primary-light, rgba(99, 229, 38, 0.06));
}

.kurs-sb-next-label {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--color-text-muted, #888);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.kurs-sb-next-title {
    flex: 1;
    font-size: 0.82rem;
    font-weight: 600;
}

.kurs-sb-next svg {
    flex-shrink: 0;
    color: var(--color-text-muted, #999);
}

/* Sidebar: Download items */
.kurs-sb-download {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    text-decoration: none;
    color: var(--color-text, #1a1a1a);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    transition: background 150ms;
}

.kurs-sb-download:hover {
    background: rgba(99, 229, 38, 0.06);
}

.kurs-sb-download-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kurs-sb-download-icon-pdf {
    color: #d32f2f;
}

.kurs-sb-download-icon-zip {
    color: #1976d2;
}

.kurs-sb-download-info {
    flex: 1;
    min-width: 0;
}

.kurs-sb-download-title {
    display: block;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kurs-sb-download-meta {
    display: block;
    font-size: 0.72rem;
    color: var(--color-text-muted, #888);
    margin-top: 1px;
}

.kurs-sb-download-action {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-text-muted, #999);
    transition: color 150ms;
}

.kurs-sb-download:hover .kurs-sb-download-action {
    color: var(--color-primary, #63e526);
}

/* Sidebar: Downloads divider in mixed sections */
.kurs-sb-section-downloads-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: var(--color-surface-subtle, #f8f8f8);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.kurs-sb-section-downloads-divider span {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted, #888);
}

/* Course content accordion (below layout) */
.kurs-content-below {
    margin-top: var(--spacing-2);
}

.kurs-content-below .module-accordion {
    max-width: 900px;
}

/* Watched state in full accordion */
.module-lesson-watched .module-lesson-status {
    color: var(--color-primary, #63e526);
}

.module-lesson-watched .module-lesson-title {
    color: var(--color-text-muted, #888);
}

/* Mobile: sidebar below player */
@media (max-width: 1024px) {
    .kurs-sidebar {
        position: static;
        max-height: none;
    }
}

/* ==========================================================================
   Video Card
   ========================================================================== */

.video-card {
    padding: 0;
    overflow: hidden;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    background: #000;
}

.video-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-info {
    padding: var(--spacing-5);
}

.video-info h3 {
    margin: 0 0 var(--spacing-2) 0;
}

.video-info p {
    margin: 0;
    color: var(--color-text-muted);
}

.video-meta {
    margin-top: var(--spacing-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* ==========================================================================
   Interactive States
   ========================================================================== */

/* Course Cards */
.course-list .card-donamic {
    transition: border-color var(--duration-150), box-shadow var(--duration-150);
}

.course-list .card-donamic:hover {
    border-color: var(--color-primary);
}

.course-list .card-donamic:focus-within {
    border-color: var(--color-primary);
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Video Card */
.video-card {
    transition: border-color var(--duration-150), box-shadow var(--duration-150);
}

.video-card:hover {
    border-color: var(--color-primary);
}

/* Back Link */
.back-link:focus {
    color: var(--color-primary);
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.back-link:active {
    opacity: 0.8;
}

/* Form Inputs (local overrides for member area) */
.input-donamic:disabled,
.input-donamic[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.input-donamic.is-error {
    border-color: var(--color-danger, #ff4444);
}

.input-donamic.is-success {
    border-color: var(--color-success, #00c853);
}

/* Buttons disabled state */
.btn-donamic:disabled,
.btn-donamic[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Loading state */
.btn-donamic.is-loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.btn-donamic.is-loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Empty State */
.empty-state {
    padding: var(--spacing-10) var(--spacing-6);
}

/* ==========================================================================
   Module Description (extends Styleguide)
   ========================================================================== */

.module-description {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    margin: 0 0 var(--spacing-4) 0;
}

/* Resource List spacing in kurs context */
.kurs-section .resource-list {
    margin-top: var(--spacing-4);
    padding-top: var(--spacing-4);
    border-top: 1px solid var(--color-border);
}

/* ==========================================================================
   Utilities (supplement Styleguide)
   ========================================================================== */

.page-content {
    padding-top: 120px;
    min-height: 100vh;
}

.page-content-centered {
    padding-top: 120px;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Spacing */
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }
.mt-40 { margin-top: 40px; }
.mt-60 { margin-top: 60px; }
.mb-20 { margin-bottom: 20px; }
.mb-30 { margin-bottom: 30px; }
.mt-xl { margin-top: var(--spacing-10); }

/* Status Icons (verify, reset-password) */
.status-icon {
    font-size: 80px;
    margin-bottom: 20px;
}

/* Error Pages */
.error-icon {
    font-size: 6rem;
}

/* Contact Info (kontakt.php) */
.contact-info-row {
    display: flex;
    gap: var(--donamic-space-md);
    align-items: flex-start;
}

.contact-icon-box {
    width: 48px;
    height: 48px;
    background: var(--donamic-primary-light);
    border-radius: var(--donamic-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Legal Content (datenschutz, impressum) */
.legal-content h2 {
    margin-top: 40px;
}

.legal-content h3 {
    margin-top: 20px;
}

.legal-content .legal-intro {
    margin-top: 40px;
}

.legal-note {
    margin-top: 60px;
    font-size: 14px;
}

/* Cookie Table */
.table-legal {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.table-legal thead tr {
    background: var(--color-surface, #f5f5f5);
}

.table-legal th {
    padding: 12px;
    text-align: left;
    border-bottom: 2px solid var(--color-border, #ddd);
}

.table-legal td {
    padding: 12px;
    border-bottom: 1px solid var(--color-border, #ddd);
}

/* Back Link (anfrage pages) */
.back-link-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--donamic-primary);
    text-decoration: none;
    margin-bottom: 2rem;
}

/* Form Page Split (anfrage) */
.form-page-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

/* Card Centered */
.card-centered-narrow {
    max-width: 500px;
    margin: 0 auto;
}

/* Hero Compact (kontakt) */
.hero-compact {
    min-height: auto;
    padding: 120px 0 60px;
}

/* Video Container (shared) */
.aspect-16-9 {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}

.aspect-16-9 iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Quick Links Stack */
.quick-links-stack {
    display: flex;
    flex-direction: column;
    gap: var(--donamic-space-sm);
}

/* Width Utility */
.w-full { width: 100%; }

/* ==========================================================================
   Homepage Overrides
   ========================================================================== */

/* Hero: wider content box for longer headlines */
.donamic_redesign1 .hero-content-box {
    max-width: 720px;
}

/* Hero Split: 2-column layout with visual element on the right.
   Used on mastery.php (skill path) and strategie.php (roadmap).
   CDN .hero-split puts grid on the SECTION (breaks container centering).
   We reset section to flex and put grid on .container-donamic instead. */
.hero.hero-split {
    display: flex;
    grid-template-columns: none;
}

.hero-split .container-donamic {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--donamic-space-2xl, 2rem);
    align-items: center;
}

@media (max-width: 768px) {
    .hero-split .container-donamic {
        grid-template-columns: 1fr;
    }
    .hero-split .hero-content,
    .hero-split .hero-content-box {
        text-align: center;
    }
    .hero-split .hero-badges {
        justify-content: center;
    }
}

/* Hero roadmap visual (strategie.php) */
.hero-roadmap-visual {
    position: relative;
    height: 300px;
}

.roadmap-svg {
    width: 100%;
    height: 100%;
    color: var(--donamic-primary, #63e526);
}

.roadmap-labels {
    position: absolute;
    inset: 0;
}

.roadmap-label {
    position: absolute;
    background: rgba(99, 229, 38, 0.15);
    color: var(--donamic-primary, #63e526);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .hero-roadmap-visual {
        display: none;
    }
}

/* Hero badges: prevent text wrapping inside individual badges */
.hero-badges .badge-donamic {
    white-space: nowrap;
}

.hero-badges.justify-center {
    justify-content: center;
}

/* Logo Marquee Animation */
.logo-marquee {
    overflow: hidden;
    margin-bottom: var(--donamic-space-3xl);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.logo-marquee-track {
    display: flex;
    align-items: center;
    gap: var(--donamic-space-3xl);
    animation: marquee 30s linear infinite;
    width: max-content;
}

/* Logo sizing (mirrors CDN .logo-row .logo-item) */
.logo-marquee-track .logo-item {
    height: 40px;
    width: auto;
    opacity: 0.6;
    filter: grayscale(100%);
    transition: all var(--donamic-transition-base, 200ms ease);
}

.logo-marquee-track .logo-item:hover {
    opacity: 1;
    filter: grayscale(0%);
}

.logo-marquee-track:hover {
    animation-play-state: paused;
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .logo-marquee-track {
        animation: none;
    }
}

/* CTA box: wider than CDN default (700px) */
.donamic_redesign1 .section-cta .cta-box {
    max-width: 900px;
}

/* Testimonial hover effect */
.donamic_redesign1 .testimonial {
    transition: transform var(--donamic-transition-base, 200ms ease),
                box-shadow var(--donamic-transition-base, 200ms ease),
                border-color var(--donamic-transition-base, 200ms ease);
}

.donamic_redesign1 .testimonial:hover {
    transform: translateY(-4px);
    border-color: var(--donamic-primary);
    box-shadow: 0 8px 24px rgba(99, 229, 38, 0.1);
}

/* Pricing grid: centered variant for 2-card comparison layouts
   Compound selector overrides CDN .pricing-grid (3-col) */
.pricing-grid.pricing-grid-centered {
    grid-template-columns: repeat(2, 1fr);
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 768px) {
    .pricing-grid.pricing-grid-centered {
        grid-template-columns: 1fr;
    }
}

/* Pricing card hover effect */
.donamic_redesign1 .pricing-card {
    transition: transform var(--donamic-transition-base, 200ms ease),
                box-shadow var(--donamic-transition-base, 200ms ease),
                border-color var(--donamic-transition-base, 200ms ease);
}

.donamic_redesign1 .pricing-card:hover {
    transform: translateY(-4px);
    border-color: var(--donamic-primary);
    box-shadow: 0 8px 24px rgba(99, 229, 38, 0.1);
}

/* Content Group (videos / documents grouping) */
.content-group {
    margin-bottom: var(--donamic-space-2xl, 2rem);
}

.content-group:last-of-type {
    margin-bottom: 0;
}

.content-group-header {
    display: flex;
    align-items: center;
    gap: var(--donamic-space-md, 0.75rem);
    margin-bottom: var(--donamic-space-lg, 1.5rem);
}

.content-group-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--donamic-primary-light, rgba(99, 229, 38, 0.1));
    border-radius: 50%;
    color: var(--donamic-primary, #63e526);
    flex-shrink: 0;
}

.content-group-icon svg {
    width: 20px;
    height: 20px;
}

.content-group-title {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0;
    white-space: nowrap;
}

.content-group-line {
    flex: 1;
    height: 1px;
    background: var(--donamic-border-light, #e5e5e5);
}

/* Content cards in training overview (CDN .card + .result-icon) */
.content-list .card {
    border-color: var(--donamic-border-light, #e5e5e5);
}

.content-list .card:hover {
    border-color: var(--donamic-primary);
}

.content-list .card-text {
    line-height: 1.6;
}

/* ==========================================================================
   Timeline Alternating – Fix CDN/Theme specificity conflict
   The donamic theme overrides .timeline for process timelines (left: 24px,
   max-width: 700px). These rules restore the CDN alternating layout when
   .timeline-alternating is used (Über-mich page).
   ========================================================================== */

.donamic_redesign1 .timeline.timeline-alternating {
    max-width: none;
}

.donamic_redesign1 .timeline.timeline-alternating::before {
    left: 50%;
    transform: translateX(-50%);
}

@media (max-width: 768px) {
    .donamic_redesign1 .timeline.timeline-alternating {
        max-width: 700px;
    }

    .donamic_redesign1 .timeline.timeline-alternating::before {
        left: 24px;
        transform: none;
    }

    .donamic_redesign1 .timeline-alternating .timeline-item:nth-child(odd),
    .donamic_redesign1 .timeline-alternating .timeline-item:nth-child(even) {
        width: 100%;
        margin-left: 0;
        flex-direction: row;
        text-align: left;
        padding-left: 0;
        padding-right: 0;
    }

    .donamic_redesign1 .timeline-alternating .timeline-item:nth-child(even) .timeline-marker {
        margin-left: 0;
    }
}

/* ==========================================================================
   Landing Page Components
   Components used on mastery.php, strategie.php, schulungen.php.
   Not available in CDN styleguide, defined locally.
   ========================================================================== */

/* 3-Column Grid */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--donamic-space-lg, 1.5rem);
}

@media (max-width: 1024px) {
    .grid-3 {
        grid-template-columns: 1fr;
    }
}

/* 2+1 Content Grid (2 columns top, 1 full-width bottom) */
.grid-content-2-1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--donamic-space-lg, 1.5rem);
}

.grid-content-2-1 > :last-child {
    grid-column: 1 / -1;
}

@media (max-width: 768px) {
    .grid-content-2-1 {
        grid-template-columns: 1fr;
    }

    .grid-content-2-1 > :last-child {
        grid-column: auto;
    }
}

/* Results Grid (4 columns, used on strategie.php) */
.results-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--donamic-space-lg, 1.5rem);
    margin-top: var(--donamic-space-xl, 2.5rem);
}

@media (max-width: 1024px) {
    .results-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .results-grid {
        grid-template-columns: 1fr;
    }
}

/* Result Card */
.result-card {
    text-align: center;
    padding: var(--donamic-space-xl, 2rem);
    background: var(--donamic-white, #ffffff);
    border: 1px solid var(--donamic-border-light, #e5e5e5);
    border-radius: var(--donamic-radius-lg, 12px);
    transition: transform var(--donamic-transition-base, 200ms ease),
                box-shadow var(--donamic-transition-base, 200ms ease),
                border-color var(--donamic-transition-base, 200ms ease);
}

.result-card:hover {
    transform: translateY(-4px);
    border-color: var(--donamic-primary);
    box-shadow: 0 8px 24px rgba(99, 229, 38, 0.1);
}

.result-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    background: var(--donamic-primary-light, rgba(99, 229, 38, 0.1));
    border-radius: 50%;
    margin-bottom: var(--donamic-space-md, 1rem);
    color: var(--donamic-primary);
}

/* Content icon variant for glass cards on dark backgrounds */
.card-glass .result-icon {
    background: rgba(99, 229, 38, 0.15);
    margin-bottom: var(--donamic-space-lg, 1.5rem);
}

.result-card h3 {
    font-size: 1.125rem;
    margin-bottom: var(--donamic-space-sm, 0.5rem);
}

.result-card p {
    color: var(--donamic-text-muted, #666);
    font-size: 0.875rem;
    line-height: 1.6;
}

/* Comparison Grid */
.comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--donamic-space-xl, 2rem);
    margin-top: var(--donamic-space-xl, 2.5rem);
}

@media (max-width: 768px) {
    .comparison-grid {
        grid-template-columns: 1fr;
    }
}

.comparison-column {
    padding: var(--donamic-space-xl, 2rem);
    border-radius: var(--donamic-radius-lg, 12px);
}

.comparison-column h3 {
    margin-bottom: var(--donamic-space-lg, 1.5rem);
    font-size: 1.25rem;
}

.comparison-bad {
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.comparison-bad h3 {
    color: #dc2626;
}

.comparison-good {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

.comparison-good h3 {
    color: #16a34a;
}

.comparison-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.comparison-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--donamic-space-md, 0.75rem);
    margin-bottom: var(--donamic-space-md, 0.75rem);
    color: #374151;
    line-height: 1.5;
}

.comparison-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 14px;
    font-weight: bold;
}

.comparison-icon-bad {
    background: #fecaca;
    color: #dc2626;
}

.comparison-icon-good {
    background: #bbf7d0;
    color: #16a34a;
}

/* ==========================================================================
   Wizard (multi-step form, used on anfrage-strategie.php)
   ========================================================================== */

/* Dark variant for input-donamic (used on dark-background pages like anfrage forms).
   CDN only provides .cta-form context; this standalone class covers all dark contexts. */
.input-donamic.input-dark {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.input-donamic.input-dark::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.input-donamic.input-dark:hover {
    border-color: rgba(255, 255, 255, 0.2);
}

.input-donamic.input-dark:focus {
    border-color: var(--donamic-primary, #63e526);
    background: rgba(255, 255, 255, 0.1);
}

/* Force dark color scheme on native select dropdown popup (Chrome/Edge/Windows) */
.dark-donamic select,
select.input-donamic.input-dark {
    color-scheme: dark !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3e%3cpath fill='%23ffffff' fill-opacity='0.5' d='M6 8L1 3h10z'/%3e%3c/svg%3e");
}

select.input-donamic.input-dark option {
    background-color: #1a1a2e;
    color: #fff;
    color-scheme: dark;
}

select.input-donamic.input-dark optgroup {
    background-color: #1a1a2e;
    color: #fff;
}

/* Form labels for donamic public pages (dark backgrounds) */
.form-label-donamic {
    display: block;
    margin-bottom: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
}

.form-label-dark {
    color: rgba(255, 255, 255, 0.85);
}

/* Prevent wizard step indicators from wrapping to two lines */
.form-wizard-steps {
    flex-wrap: nowrap;
}

.form-wizard-step-connector {
    min-width: 1.5rem;
}

.form-wizard-step-label {
    font-size: 0.75rem;
    white-space: nowrap;
}

/* Hide the progress track bar (we use step connectors for progress instead) */
.form-wizard-progress-bar {
    display: none;
}

/* Calendly embed on thank-you pages */
.calendly-section {
    margin-top: var(--donamic-space-xl, 2rem);
    display: none;
}

.calendly-section.is-visible {
    display: block;
    animation: wizardFadeIn 0.5s ease;
}

.calendly-inline-widget {
    border-radius: var(--donamic-radius-lg, 12px);
}

.calendly-inline-widget iframe {
    overflow: visible !important;
}

/* Thank-you card countdown */
.danke-card-fade {
    transition: opacity 0.4s ease;
}

.danke-card-fade.is-hidden {
    opacity: 0;
    pointer-events: none;
    height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

/* Hide native checkbox/radio inputs inside option-picker tiles (CDN omits this) */
.option-picker-option input[type="checkbox"],
.option-picker-option input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.wizard-wrapper {
    max-width: 720px;
    margin: 0 auto;
}

.wizard-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--donamic-radius-lg, 12px);
    padding: var(--donamic-space-xl, 2rem);
}

/* Progress indicator */
.wizard-progress-container {
    margin-bottom: var(--donamic-space-xl, 2rem);
}

.wizard-steps-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
}

.wizard-step-dot {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    background: transparent;
    color: rgba(255, 255, 255, 0.35);
    border: 2px solid rgba(255, 255, 255, 0.15);
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.wizard-step-dot.is-active {
    background: var(--donamic-primary, #63e526);
    color: #000;
    border-color: var(--donamic-primary, #63e526);
}

.wizard-step-dot.is-completed {
    color: var(--donamic-primary, #63e526);
    border-color: var(--donamic-primary, #63e526);
}

.wizard-step-line {
    width: 60px;
    height: 2px;
    background: rgba(255, 255, 255, 0.12);
    transition: background 0.3s ease;
}

.wizard-step-line.is-done {
    background: var(--donamic-primary, #63e526);
}

/* Steps visibility */
.wizard-step {
    display: none;
}

.wizard-step.is-active {
    display: block;
    animation: wizardFadeIn 0.3s ease;
}

@keyframes wizardFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Tile grid */
.wizard-tile-grid {
    display: grid;
    gap: var(--donamic-space-md, 1rem);
}

.wizard-tile-grid-2 {
    grid-template-columns: 1fr 1fr;
}

.wizard-tile-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 600px) {
    .wizard-tile-grid-2,
    .wizard-tile-grid-3 {
        grid-template-columns: 1fr;
    }
}

/* Individual tile */
.wizard-tile {
    position: relative;
    display: block;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.04);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--donamic-radius-lg, 12px);
    padding: var(--donamic-space-lg, 1.5rem);
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
    text-align: center;
}

.wizard-tile:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.2);
}

.wizard-tile.is-selected {
    background: rgba(99, 229, 38, 0.08);
    border-color: var(--donamic-primary, #63e526);
}

.wizard-tile.is-selected:hover {
    background: rgba(99, 229, 38, 0.12);
}

/* Hidden native input */
.wizard-tile-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus ring for keyboard navigation */
.wizard-tile:focus-within {
    outline: 2px solid var(--donamic-primary, #63e526);
    outline-offset: 2px;
}

.wizard-tile-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--donamic-space-sm, 0.5rem);
}

.wizard-tile-icon {
    color: var(--donamic-primary, #63e526);
    margin-bottom: var(--donamic-space-xs, 0.25rem);
}

.wizard-tile-label {
    font-weight: 600;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9);
}

/* Checkmark overlay (step 1 multi-select) */
.wizard-tile-check {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 26px;
    height: 26px;
    background: var(--donamic-primary, #63e526);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.wizard-tile.is-selected .wizard-tile-check {
    opacity: 1;
    transform: scale(1);
}

/* Navigation */
.wizard-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--donamic-space-xl, 2rem);
}

/* Back button (subtle outline style) */
.wizard-back {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

.wizard-back:hover {
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: #fff !important;
}

/* Custom checkbox for privacy consent */
.wizard-checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--donamic-space-sm, 0.5rem);
    cursor: pointer;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.875rem;
    line-height: 1.5;
}

.wizard-checkbox-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.wizard-checkbox-box {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    margin-top: 1px;
}

.wizard-checkbox-box svg {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.wizard-checkbox-input:checked + .wizard-checkbox-box {
    background: var(--donamic-primary, #63e526);
    border-color: var(--donamic-primary, #63e526);
}

.wizard-checkbox-input:checked + .wizard-checkbox-box svg {
    opacity: 1;
    stroke: #000;
}

.wizard-checkbox-input:focus + .wizard-checkbox-box {
    outline: 2px solid var(--donamic-primary, #63e526);
    outline-offset: 2px;
}

.wizard-checkbox-text a {
    color: var(--donamic-primary, #63e526);
    text-decoration: underline;
}

.wizard-checkbox-text a:hover {
    color: #fff;
}

/* Success / redirect state */
.wizard-redirect-bar {
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
    max-width: 200px;
    margin: 0 auto;
}

.wizard-redirect-progress {
    height: 100%;
    background: var(--donamic-primary, #63e526);
    border-radius: 3px;
    animation: wizardRedirectFill 4s linear forwards;
}

@keyframes wizardRedirectFill {
    from { width: 0; }
    to   { width: 100%; }
}

/* ==========================================================================
   Problem Section (schulungen.php)
   ========================================================================== */

.problem-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--donamic-space-2xl, 2rem);
    align-items: start;
}

@media (max-width: 768px) {
    .problem-grid {
        grid-template-columns: 1fr;
    }
}

.problem-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.problem-item {
    display: flex;
    align-items: flex-start;
    gap: var(--donamic-space-md, 0.75rem);
    margin-bottom: var(--donamic-space-md, 0.75rem);
    line-height: 1.5;
}

.problem-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 14px;
    font-weight: bold;
}

.problem-item-bad .problem-icon {
    background: #fecaca;
    color: #dc2626;
}

/* ==========================================================================
   Problem Visual Variants (pv-) — Preview/Selection
   ========================================================================== */

/* Shared tokens */
.pv-bad  { color: #ef4444; }
.pv-warn { color: #f59e0b; }
.pv-empty { color: rgba(255, 255, 255, 0.25); }

.pv-badge-red {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 600;
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.pv-badge-yellow {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 600;
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

/* --- Variant 1: Dashboard Mock --- moved to strategie-hero-variants-backup.css */

/* --- Variant 2: Health Check --- */
.pv-health {
    background: linear-gradient(145deg, #13131f, #0e0e1a);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--donamic-radius-lg, 12px);
    overflow: hidden;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.pv-health-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.pv-health-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pv-health-score {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.35);
    font-weight: 500;
}

.pv-health-score-num {
    font-size: 1.4rem;
    font-weight: 800;
    color: #ef4444;
    letter-spacing: -0.02em;
}

.pv-health-metrics {
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pv-health-row {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 0.75rem;
    align-items: center;
}

.pv-health-label {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
}

.pv-health-bar {
    display: grid;
    grid-template-columns: 1fr 48px;
    gap: 0.5rem;
    align-items: center;
}

.pv-health-track {
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
}

.pv-health-fill {
    height: 100%;
    width: 0;
    border-radius: 3px;
    transition: width 0.8s ease-out;
}

.pv-health-fill-red {
    background: linear-gradient(90deg, #dc2626, #ef4444);
}

.pv-health-fill-orange {
    background: linear-gradient(90deg, #ea580c, #f59e0b);
}

.pv-health-val {
    font-family: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
    font-size: 0.7rem;
    font-weight: 600;
    text-align: right;
}

.pv-health-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0.6rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.68rem;
    color: rgba(239, 68, 68, 0.7);
    font-weight: 500;
}

/* --- Variant 3: Chaos Stack --- */
.pv-chaos {
    position: relative;
    height: 340px;
}

.pv-chaos-card {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.75rem 1rem;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    font-size: 0.78rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: pv-float 4s ease-in-out infinite;
}

.pv-chaos-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    z-index: 10;
}

.pv-chaos-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    flex-shrink: 0;
}

.pv-chaos-label {
    font-weight: 600;
    color: #1a1a2e;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pv-chaos-meta {
    font-size: 0.65rem;
    color: #999;
    white-space: nowrap;
}

/* Card positions and rotations */
.pv-chaos-1 {
    top: 0;
    transform: rotate(-1.5deg);
    animation-delay: 0s;
}

.pv-chaos-1 .pv-chaos-icon {
    background: rgba(22, 163, 74, 0.1);
    color: #16a34a;
}

.pv-chaos-2 {
    top: 64px;
    transform: rotate(1.2deg) translateX(8px);
    animation-delay: 0.5s;
}

.pv-chaos-2 .pv-chaos-icon {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.pv-chaos-3 {
    top: 128px;
    transform: rotate(-0.8deg) translateX(-4px);
    animation-delay: 1s;
}

.pv-chaos-3 .pv-chaos-icon {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.pv-chaos-4 {
    top: 192px;
    transform: rotate(1.8deg) translateX(12px);
    animation-delay: 1.5s;
}

.pv-chaos-4 .pv-chaos-icon {
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
}

.pv-chaos-5 {
    top: 256px;
    transform: rotate(-1deg) translateX(-6px);
    animation-delay: 2s;
}

.pv-chaos-5 .pv-chaos-icon {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

@keyframes pv-float {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -3px; }
}

/* ==========================================================================
   Video Search Overlay (navbar search for logged-in users)
   ========================================================================== */

/* Search button in navbar */
.navbar-donamic-search-btn {
    background: none;
    border: none;
    color: var(--color-text, #1a1a2e);
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--duration-150, 150ms), color var(--duration-150, 150ms);
}

.navbar-donamic-search-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--color-primary, #63e526);
}

/* Overlay (fullscreen) */
.video-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: 120px;
}

.video-search-overlay.is-active {
    display: flex;
}

.video-search-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Search container */
.video-search-container {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 0 var(--spacing-4, 16px);
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e5e5);
    border-radius: var(--donamic-radius-lg, 12px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    animation: videoSearchSlideIn 0.15s ease-out;
}

@keyframes videoSearchSlideIn {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Input row */
.video-search-input-wrap {
    display: flex;
    align-items: center;
    gap: var(--spacing-3, 12px);
    padding: var(--spacing-4, 16px) var(--spacing-5, 20px);
    border-bottom: 1px solid var(--color-border, #e5e5e5);
}

.video-search-icon {
    flex-shrink: 0;
    color: var(--color-text-muted, #888);
}

.video-search-input {
    flex: 1;
    border: none;
    outline: none;
    background: none;
    font-size: 1rem;
    color: var(--color-text, #1a1a2e);
    font-family: inherit;
}

.video-search-input::placeholder {
    color: var(--color-text-muted, #999);
}

.video-search-kbd {
    flex-shrink: 0;
    font-size: 0.7rem;
    font-family: inherit;
    padding: 2px 8px;
    border: 1px solid var(--color-border, #ddd);
    border-radius: 4px;
    color: var(--color-text-muted, #999);
    background: var(--color-surface, #f5f5f5);
}

/* Results area */
.video-search-results {
    max-height: 400px;
    overflow-y: auto;
}

.video-search-results:empty {
    display: none;
}

/* Single result item */
.video-search-result {
    display: block;
    padding: var(--spacing-3, 12px) var(--spacing-5, 20px);
    text-decoration: none;
    color: var(--color-text, #1a1a2e);
    border-bottom: 1px solid var(--color-border, #f0f0f0);
    transition: background var(--duration-150, 150ms);
}

.video-search-result:last-child {
    border-bottom: none;
}

.video-search-result:hover,
.video-search-result.is-active {
    background: var(--donamic-primary-light, rgba(99, 229, 38, 0.08));
}

.video-search-result-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-3, 12px);
}

.video-search-result-title {
    font-weight: 600;
    font-size: 0.9rem;
}

.video-search-result-duration {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--color-text-muted, #999);
    font-variant-numeric: tabular-nums;
}

.video-search-result-meta {
    font-size: 0.78rem;
    color: var(--color-text-muted, #888);
    margin-top: 2px;
}

/* Empty / loading states */
.video-search-empty,
.video-search-loading,
.video-search-more {
    padding: var(--spacing-5, 20px);
    text-align: center;
    font-size: 0.875rem;
    color: var(--color-text-muted, #999);
}

/* Mobile adjustments */
@media (max-width: 600px) {
    .video-search-overlay {
        padding-top: 80px;
    }

    .video-search-container {
        margin: 0 var(--spacing-3, 12px);
        border-radius: var(--donamic-radius-md, 8px);
    }

    .video-search-results {
        max-height: 60vh;
    }
}

/* Animate health bars on scroll */
.pv-health.is-visible .pv-health-fill {
    width: calc(var(--pv-w, 0) * 1%);
}

@media (max-width: 480px) {
    .pv-health-row {
        grid-template-columns: 80px 1fr;
    }

    .pv-chaos {
        height: 300px;
    }

    .pv-chaos-card {
        font-size: 0.7rem;
        padding: 0.6rem 0.75rem;
    }

    .pv-chaos-1 { top: 0; }
    .pv-chaos-2 { top: 56px; }
    .pv-chaos-3 { top: 112px; }
    .pv-chaos-4 { top: 168px; }
    .pv-chaos-5 { top: 224px; }
}

/* ==========================================================================
   Schulungen Visual – CMDB Health Check (Dual-Bar Comparison)
   ========================================================================== */

.sv-health-card {
    background: linear-gradient(145deg, rgba(20, 20, 35, 0.95), rgba(15, 15, 25, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--donamic-radius-lg, 12px);
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Header */
.sv-health-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sv-health-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Legend (top right) */
.sv-health-legend {
    display: flex;
    gap: 1rem;
}

.sv-legend-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.sv-legend-bad {
    color: #f87171;
}

.sv-legend-good {
    color: #63E526;
}

.sv-legend-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.sv-legend-bad .sv-legend-dot {
    background: #ef4444;
}

.sv-legend-good .sv-legend-dot {
    background: #63E526;
}

/* Metrics area */
.sv-health-metrics {
    padding: 1rem 1.25rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

/* Single metric row: label + dual bars */
.sv-health-row {
    display: grid;
    grid-template-columns: 105px 1fr;
    gap: 0.75rem;
    align-items: center;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.sv-health.is-active .sv-health-row {
    opacity: 1;
    transform: translateY(0);
}

.sv-health.is-active .sv-health-row:nth-child(1) { transition-delay: 0.1s; }
.sv-health.is-active .sv-health-row:nth-child(2) { transition-delay: 0.2s; }
.sv-health.is-active .sv-health-row:nth-child(3) { transition-delay: 0.3s; }
.sv-health.is-active .sv-health-row:nth-child(4) { transition-delay: 0.4s; }

.sv-health-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 500;
    white-space: nowrap;
}

/* Duo bars container (two bars stacked) */
.sv-health-duo {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* Single bar line: track + value */
.sv-duo-line {
    display: grid;
    grid-template-columns: 1fr 48px;
    gap: 0.5rem;
    align-items: center;
}

/* Bar track */
.sv-duo-track {
    height: 6px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
    overflow: hidden;
}

/* Bar fill */
.sv-duo-fill {
    height: 100%;
    width: 0;
    border-radius: 3px;
    transition: width 0.7s ease-out;
}

.sv-duo-bad .sv-duo-fill {
    background: linear-gradient(90deg, #ef4444, #f97316);
}

.sv-duo-good .sv-duo-fill {
    background: linear-gradient(90deg, #22c55e, #63E526);
}

/* Value text */
.sv-duo-val {
    font-family: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
    font-size: 0.7rem;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sv-duo-bad .sv-duo-val {
    color: #f87171;
}

.sv-duo-good .sv-duo-val {
    color: #63E526;
}

/* Animated states */
.sv-duo-fill.is-animated {
    width: var(--sv-pct);
}

.sv-duo-val.is-visible {
    opacity: 1;
}

/* Footer */
.sv-health-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.72rem;
    color: rgba(99, 229, 38, 0);
    font-weight: 500;
    transition: color 0.5s ease;
}

.sv-health-footer svg {
    color: #63E526;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.sv-health-footer.is-visible {
    color: rgba(99, 229, 38, 0.7);
}

.sv-health-footer.is-visible svg {
    opacity: 1;
}

/* Responsive */
@media (max-width: 480px) {
    .sv-health-row {
        grid-template-columns: 85px 1fr;
        gap: 0.5rem;
    }

    .sv-health-label {
        font-size: 0.68rem;
    }

    .sv-duo-line {
        grid-template-columns: 1fr 42px;
    }

    .sv-health-legend {
        gap: 0.5rem;
    }

    .sv-legend-item {
        font-size: 0.6rem;
    }
}