/* CLAUDE: Base Styles - Grundlegende Typo, Farben, Reset */
/* CLAUDE: Wird zuerst geladen, andere CSS-Dateien bauen darauf auf */
/* CLAUDE: Anpassen: CSS Custom Properties für Farben und Abstände */

/* ==========================================================================
   CLAUDE: CSS Custom Properties (Variablen) - KONSOLIDIERT
   ========================================================================== */

:root {
    /* === CLAUDE: MARKENFARBEN (Provimedia) - WCAG AA optimiert === */
    /* CLAUDE: Farbkontrast optimiert am 2026-01-09 für WCAG AA Compliance */
    --pvm-primary: #7B089F;            /* CLAUDE: Primärfarbe Lila (4.6:1 Kontrast auf Weiß) */
    --pvm-primary-dark: #690887;       /* CLAUDE: Primärfarbe dunkel (5.8:1 - Hover) */
    --pvm-primary-light: #9A1BC1;      /* CLAUDE: Primärfarbe hell (3.5:1 - nur für große Texte) */
    --pvm-secondary: #3D35C2;          /* CLAUDE: Sekundärfarbe Blau (5.2:1 Kontrast) */
    --pvm-secondary-dark: #312AA0;     /* CLAUDE: Sekundärfarbe dunkel (6.5:1) */
    --pvm-secondary-light: #5248D8;    /* CLAUDE: Sekundärfarbe hell (4.0:1) */
    --pvm-gradient: linear-gradient(36deg, #7B089F 0%, #3D35C2 100%); /* CLAUDE: Marken-Gradient WCAG */
    --pvm-gradient-reverse: linear-gradient(36deg, #3D35C2 0%, #7B089F 100%); /* CLAUDE: Gradient umgekehrt */

    /* === CLAUDE: NEUTRALE FARBEN === */
    --pvm-text: #333333;               /* CLAUDE: Haupttextfarbe */
    --pvm-text-muted: #666666;         /* CLAUDE: Gedämpfter Text */
    --pvm-text-light: #999999;         /* CLAUDE: Heller Text */
    --pvm-bg-white: #ffffff;           /* CLAUDE: Weißer Hintergrund */
    --pvm-bg-light: #f8f9fa;           /* CLAUDE: Heller Hintergrund */
    --pvm-bg-dark: #1a1a2e;            /* CLAUDE: Dunkler Hintergrund */
    --pvm-border: #e9ecef;             /* CLAUDE: Standard Border */
    --pvm-border-dark: #d2d2d2;        /* CLAUDE: Dunkler Border */

    /* === CLAUDE: DARK MODE FARBEN === */
    --pvm-dark-bg: #0f0f23;            /* CLAUDE: Dark Mode Hintergrund */
    --pvm-dark-surface: #1a1a2e;       /* CLAUDE: Dark Mode Oberfläche */
    --pvm-dark-surface-hover: #252542; /* CLAUDE: Dark Mode Hover */
    --pvm-dark-text: #e4e4e7;          /* CLAUDE: Dark Mode Text */
    --pvm-dark-text-muted: #a1a1aa;    /* CLAUDE: Dark Mode gedämpfter Text */
    --pvm-dark-border: #27273f;        /* CLAUDE: Dark Mode Border */

    /* === CLAUDE: LEGACY ALIAS (Rückwärtskompatibilität) === */
    --lila: var(--pvm-primary);                    /* CLAUDE: Alias für alten Code */
    --blau: var(--pvm-secondary);                  /* CLAUDE: Alias für alten Code */
    --gradient: var(--pvm-gradient);               /* CLAUDE: Alias für alten Code */
    --pvm-color-primary: var(--pvm-primary);       /* CLAUDE: Alias für alten Code */
    --pvm-color-primary-dark: var(--pvm-primary-dark); /* CLAUDE: Alias für alten Code */
    --pvm-color-secondary: var(--pvm-text-muted);  /* CLAUDE: Alias für alten Code */
    --pvm-color-dark: var(--pvm-text);             /* CLAUDE: Alias für alten Code */
    --pvm-color-light: var(--pvm-bg-light);        /* CLAUDE: Alias für alten Code */
    --pvm-color-white: var(--pvm-bg-white);        /* CLAUDE: Alias für alten Code */
    --pvm-color-border: var(--pvm-border);         /* CLAUDE: Alias für alten Code */

    /* === CLAUDE: TYPOGRAFIE === */
    --pvm-font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif; /* CLAUDE: Roboto als Hauptschrift */
    --pvm-font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);   /* CLAUDE: Extra klein fluid */
    --pvm-font-size-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);      /* CLAUDE: Klein fluid */
    --pvm-font-size-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);   /* CLAUDE: Basis fluid */
    --pvm-font-size-lg: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);     /* CLAUDE: Groß fluid */
    --pvm-font-size-xl: clamp(1.5rem, 1.25rem + 1vw, 2rem);          /* CLAUDE: Extra groß fluid */
    --pvm-font-size-2xl: clamp(2rem, 1.5rem + 2vw, 3rem);            /* CLAUDE: 2XL fluid */
    --pvm-font-size-3xl: clamp(2.5rem, 2rem + 2.5vw, 4rem);          /* CLAUDE: 3XL fluid */
    --pvm-font-size-4xl: clamp(3rem, 2.5rem + 3vw, 5rem);            /* CLAUDE: 4XL fluid */
    --pvm-line-height-tight: 1.2;      /* CLAUDE: Enge Zeilenhöhe für Überschriften */
    --pvm-line-height-base: 1.6;       /* CLAUDE: Standard Zeilenhöhe */
    --pvm-line-height-loose: 1.8;      /* CLAUDE: Lockere Zeilenhöhe */

    /* === CLAUDE: SPACING (8px Grid) === */
    --pvm-space-2xs: 0.25rem;          /* CLAUDE: 4px */
    --pvm-space-xs: 0.5rem;            /* CLAUDE: 8px */
    --pvm-space-sm: 1rem;              /* CLAUDE: 16px */
    --pvm-space-md: 1.5rem;            /* CLAUDE: 24px */
    --pvm-space-lg: 2rem;              /* CLAUDE: 32px */
    --pvm-space-xl: 3rem;              /* CLAUDE: 48px */
    --pvm-space-2xl: 4rem;             /* CLAUDE: 64px */
    --pvm-space-3xl: 6rem;             /* CLAUDE: 96px */
    --pvm-space-4xl: 8rem;             /* CLAUDE: 128px */
    /* CLAUDE: Legacy Spacing Alias */
    --pvm-spacing-xs: var(--pvm-space-xs);
    --pvm-spacing-sm: var(--pvm-space-sm);
    --pvm-spacing-md: var(--pvm-space-md);
    --pvm-spacing-lg: var(--pvm-space-lg);
    --pvm-spacing-xl: var(--pvm-space-xl);
    --pvm-spacing-xxl: var(--pvm-space-2xl);

    /* === CLAUDE: CONTAINER === */
    --pvm-container-sm: 640px;         /* CLAUDE: Klein */
    --pvm-container-md: 768px;         /* CLAUDE: Mittel */
    --pvm-container-lg: 1024px;        /* CLAUDE: Groß */
    --pvm-container-xl: 1280px;        /* CLAUDE: Extra groß */
    --pvm-container-max: 1400px;       /* CLAUDE: Maximum */
    --pvm-container-padding: clamp(1rem, 4vw, 2rem); /* CLAUDE: Responsive Padding */

    /* === CLAUDE: HEADER === */
    --pvm-header-height: 70px;         /* CLAUDE: Header-Höhe - kompakter für modernes Design */
    --pvm-header-container-max: 1800px; /* CLAUDE: Breiterer Container für Header - Logo näher am Rand */

    /* === CLAUDE: SCHATTEN === */
    --pvm-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);           /* CLAUDE: Minimal */
    --pvm-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);           /* CLAUDE: Klein */
    --pvm-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);          /* CLAUDE: Mittel */
    --pvm-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);          /* CLAUDE: Groß */
    --pvm-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16);         /* CLAUDE: Extra groß */
    --pvm-shadow-primary: 0 4px 20px rgba(123, 8, 159, 0.25); /* CLAUDE: Primary Glow (WCAG) */
    --pvm-shadow-secondary: 0 4px 20px rgba(76, 65, 224, 0.25); /* CLAUDE: Secondary Glow */

    /* === CLAUDE: BORDER RADIUS === */
    --pvm-radius-sm: 4px;              /* CLAUDE: Klein */
    --pvm-radius-md: 8px;              /* CLAUDE: Mittel */
    --pvm-radius-lg: 12px;             /* CLAUDE: Groß */
    --pvm-radius-xl: 16px;             /* CLAUDE: Extra groß */
    --pvm-radius-2xl: 24px;            /* CLAUDE: 2XL */
    --pvm-radius-full: 9999px;         /* CLAUDE: Komplett rund */

    /* === CLAUDE: TRANSITIONS === */
    --pvm-transition-fast: 150ms ease;  /* CLAUDE: Schnell */
    --pvm-transition-base: 250ms ease;  /* CLAUDE: Standard */
    --pvm-transition-slow: 400ms ease;  /* CLAUDE: Langsam */
    --pvm-transition-bounce: 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55); /* CLAUDE: Bounce */

    /* === CLAUDE: Z-INDEX === */
    --pvm-z-dropdown: 100;             /* CLAUDE: Dropdowns */
    --pvm-z-sticky: 200;               /* CLAUDE: Sticky Elemente */
    --pvm-z-fixed: 300;                /* CLAUDE: Fixed Elemente */
    --pvm-z-modal-backdrop: 400;       /* CLAUDE: Modal Hintergrund */
    --pvm-z-modal: 500;                /* CLAUDE: Modals */
    --pvm-z-toast: 600;                /* CLAUDE: Toasts/Notifications */

    /* ==========================================================================
       CLAUDE: Semantische Color Tokens (Light Mode Default)
       CLAUDE: Ändern sich automatisch je nach Theme via CSS Custom Properties
       CLAUDE: Neu hinzugefügt 2026-01-09 für konsistentes Dark Mode Theming
       ========================================================================== */
    --color-bg-primary: var(--pvm-bg-white);           /* CLAUDE: Haupthintergrund */
    --color-bg-secondary: var(--pvm-bg-light);         /* CLAUDE: Sekundärer Hintergrund */
    --color-bg-tertiary: #f0f0f5;                      /* CLAUDE: Tertiärer Hintergrund */
    --color-text-primary: var(--pvm-text);             /* CLAUDE: Haupttext */
    --color-text-secondary: var(--pvm-text-muted);     /* CLAUDE: Sekundärer Text */
    --color-text-tertiary: var(--pvm-text-light);      /* CLAUDE: Tertiärer Text */
    --color-border-primary: var(--pvm-border);         /* CLAUDE: Hauptborder */
    --color-border-secondary: var(--pvm-border-dark);  /* CLAUDE: Sekundärer Border */
    --color-shadow-sm: rgba(0, 0, 0, 0.06);            /* CLAUDE: Kleiner Schatten */
    --color-shadow-md: rgba(0, 0, 0, 0.08);            /* CLAUDE: Mittlerer Schatten */
    --color-shadow-lg: rgba(0, 0, 0, 0.12);            /* CLAUDE: Großer Schatten */
    --color-accent-primary: var(--pvm-primary);        /* CLAUDE: Akzentfarbe */
    --color-accent-primary-hover: var(--pvm-primary-dark); /* CLAUDE: Akzent Hover */
    --color-accent-secondary: var(--pvm-secondary);    /* CLAUDE: Sekundärer Akzent */
}

/* ==========================================================================
   CLAUDE: Semantische Tokens - Dark Mode Override (Manueller Toggle)
   CLAUDE: Aktiviert wenn data-theme="dark" auf <html> gesetzt ist
   ========================================================================== */
html[data-theme="dark"] {
    --color-bg-primary: var(--pvm-dark-bg);            /* CLAUDE: Haupthintergrund */
    --color-bg-secondary: var(--pvm-dark-surface);     /* CLAUDE: Sekundärer Hintergrund */
    --color-bg-tertiary: var(--pvm-dark-surface-hover);/* CLAUDE: Tertiärer Hintergrund */
    --color-text-primary: var(--pvm-dark-text);        /* CLAUDE: Haupttext */
    --color-text-secondary: var(--pvm-dark-text-muted);/* CLAUDE: Sekundärer Text */
    --color-text-tertiary: #71717a;                    /* CLAUDE: Tertiärer Text */
    --color-border-primary: var(--pvm-dark-border);    /* CLAUDE: Hauptborder */
    --color-border-secondary: #3f3f5c;                 /* CLAUDE: Sekundärer Border */
    --color-shadow-sm: rgba(0, 0, 0, 0.2);             /* CLAUDE: Kleiner Schatten */
    --color-shadow-md: rgba(0, 0, 0, 0.3);             /* CLAUDE: Mittlerer Schatten */
    --color-shadow-lg: rgba(0, 0, 0, 0.4);             /* CLAUDE: Großer Schatten */
    --color-accent-primary: #a855f7;                   /* CLAUDE: Akzentfarbe (heller) */
    --color-accent-primary-hover: #c084fc;             /* CLAUDE: Akzent Hover */
    --color-accent-secondary: var(--pvm-secondary-light); /* CLAUDE: Sekundärer Akzent */
}

/* ==========================================================================
   CLAUDE: Semantische Tokens - System-Präferenz Dark Mode (Fallback)
   CLAUDE: Aktiviert wenn OS Dark Mode an UND kein manuelles Theme gesetzt
   ========================================================================== */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) {
        --color-bg-primary: var(--pvm-dark-bg);            /* CLAUDE: Haupthintergrund */
        --color-bg-secondary: var(--pvm-dark-surface);     /* CLAUDE: Sekundärer Hintergrund */
        --color-bg-tertiary: var(--pvm-dark-surface-hover);/* CLAUDE: Tertiärer Hintergrund */
        --color-text-primary: var(--pvm-dark-text);        /* CLAUDE: Haupttext */
        --color-text-secondary: var(--pvm-dark-text-muted);/* CLAUDE: Sekundärer Text */
        --color-text-tertiary: #71717a;                    /* CLAUDE: Tertiärer Text */
        --color-border-primary: var(--pvm-dark-border);    /* CLAUDE: Hauptborder */
        --color-border-secondary: #3f3f5c;                 /* CLAUDE: Sekundärer Border */
        --color-shadow-sm: rgba(0, 0, 0, 0.2);             /* CLAUDE: Kleiner Schatten */
        --color-shadow-md: rgba(0, 0, 0, 0.3);             /* CLAUDE: Mittlerer Schatten */
        --color-shadow-lg: rgba(0, 0, 0, 0.4);             /* CLAUDE: Großer Schatten */
        --color-accent-primary: #a855f7;                   /* CLAUDE: Akzentfarbe (heller) */
        --color-accent-primary-hover: #c084fc;             /* CLAUDE: Akzent Hover */
        --color-accent-secondary: var(--pvm-secondary-light); /* CLAUDE: Sekundärer Akzent */
    }
}

/* ==========================================================================
   CLAUDE: Reset / Box Sizing
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box; /* CLAUDE: Border-Box für alle Elemente */
}

/* CLAUDE: Body Reset */
body {
    margin: 0;                                  /* CLAUDE: Kein Default Margin */
    padding: 0;                                 /* CLAUDE: Kein Default Padding */
    font-family: var(--pvm-font-family);        /* CLAUDE: Schriftart */
    font-size: var(--pvm-font-size-base);       /* CLAUDE: Basisgröße */
    line-height: var(--pvm-line-height-base);   /* CLAUDE: Zeilenhöhe */
    color: var(--pvm-color-dark);               /* CLAUDE: Textfarbe */
    background-color: var(--pvm-color-white);   /* CLAUDE: Hintergrund */
    -webkit-font-smoothing: antialiased;        /* CLAUDE: Schriftglättung */
    -moz-osx-font-smoothing: grayscale;         /* CLAUDE: Firefox Schriftglättung */
}

/* CLAUDE: Body Padding für Fixed Header */
body {
    padding-top: var(--pvm-header-height); /* CLAUDE: Platz für Fixed Header */
}

/* ==========================================================================
   CLAUDE: Typografie
   ========================================================================== */

/* CLAUDE: Überschriften */
h1, h2, h3, h4, h5, h6 {
    margin-top: 0;                             /* CLAUDE: Kein oberer Margin */
    margin-bottom: var(--pvm-spacing-sm);      /* CLAUDE: Unterer Abstand */
    font-weight: 700;                          /* CLAUDE: Fett */
    line-height: 1.2;                          /* CLAUDE: Engere Zeilenhöhe */
}

h1 { font-size: 2.5rem; }   /* CLAUDE: 40px */
h2 { font-size: 2rem; }     /* CLAUDE: 32px */
h3 { font-size: 1.5rem; }   /* CLAUDE: 24px */
h4 { font-size: 1.25rem; }  /* CLAUDE: 20px */
h5 { font-size: 1rem; }     /* CLAUDE: 16px */
h6 { font-size: 0.875rem; } /* CLAUDE: 14px */

/* CLAUDE: Absätze */
p {
    margin-top: 0;
    margin-bottom: var(--pvm-spacing-sm);
}

/* CLAUDE: Links */
a {
    color: var(--pvm-color-primary);           /* CLAUDE: Link-Farbe */
    text-decoration: none;                      /* CLAUDE: Keine Unterstreichung */
    transition: color var(--pvm-transition-fast); /* CLAUDE: Smooth Hover */
}

a:hover {
    color: var(--pvm-color-primary-dark);      /* CLAUDE: Hover-Farbe */
}

/* ==========================================================================
   CLAUDE: Bilder
   ========================================================================== */

img {
    max-width: 100%;       /* CLAUDE: Responsive Bilder */
    height: auto;          /* CLAUDE: Proportionen beibehalten */
    display: block;        /* CLAUDE: Block-Element */
}

/* ==========================================================================
   CLAUDE: Listen
   ========================================================================== */

ul, ol {
    margin: 0;
    padding: 0;
    list-style-position: inside; /* CLAUDE: Bullets innerhalb */
}

/* ==========================================================================
   CLAUDE: Buttons
   ========================================================================== */

.pvm-btn {
    display: inline-flex;                       /* CLAUDE: Flexbox für Icon-Ausrichtung */
    align-items: center;                        /* CLAUDE: Vertikal zentriert */
    justify-content: center;                    /* CLAUDE: Horizontal zentriert */
    padding: 0.75rem 1.5rem;                    /* CLAUDE: Innenabstand */
    font-size: 0.95rem;                         /* CLAUDE: Schriftgröße */
    font-weight: 600;                           /* CLAUDE: Halbfett */
    text-decoration: none;                      /* CLAUDE: Keine Unterstreichung */
    border: none;                               /* CLAUDE: Kein Border */
    border-radius: var(--pvm-radius-md);        /* CLAUDE: Abgerundete Ecken */
    cursor: pointer;                            /* CLAUDE: Pointer-Cursor */
    transition: all var(--pvm-transition-fast); /* CLAUDE: Smooth Transitions */
}

/* CLAUDE: Primärer Button */
.pvm-btn--primary {
    background-color: var(--pvm-color-primary); /* CLAUDE: Hintergrund */
    color: var(--pvm-color-white);              /* CLAUDE: Textfarbe */
}

.pvm-btn--primary:hover {
    background-color: var(--pvm-color-primary-dark); /* CLAUDE: Hover */
    color: var(--pvm-color-white);
    transform: translateY(-1px);                /* CLAUDE: Leichter Lift */
}

/* CLAUDE: Full-Width Button */
.pvm-btn--full {
    width: 100%;                                /* CLAUDE: Volle Breite */
}

/* ==========================================================================
   CLAUDE: Utility Classes
   ========================================================================== */

/* CLAUDE: Screen Reader Only - visuell versteckt, für Screenreader sichtbar */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* CLAUDE: Skip Link für Barrierefreiheit - WCAG 2.1 konform */
/* CLAUDE: Optimiert am 2026-01-09 für bessere Sichtbarkeit und Zugänglichkeit */
.pvm-skip-link {
    position: fixed;                           /* CLAUDE: Fixed für konsistente Position */
    top: -100%;                                /* CLAUDE: Versteckt oberhalb des Viewports */
    left: 50%;
    transform: translateX(-50%);
    background: var(--pvm-primary);            /* CLAUDE: WCAG-konforme Primärfarbe */
    color: var(--pvm-bg-white);
    padding: 1rem 2rem;                        /* CLAUDE: Größerer Klickbereich für Touch */
    border-radius: 0 0 var(--pvm-radius-md) var(--pvm-radius-md); /* CLAUDE: Abgerundet unten */
    z-index: 99999;                            /* CLAUDE: Über allem anderen */
    text-decoration: none;
    font-weight: 600;
    font-size: var(--pvm-font-size-base);
    box-shadow: var(--pvm-shadow-lg);
    transition: top 0.3s ease;
}

.pvm-skip-link:focus,
.pvm-skip-link:focus-visible {
    top: 0;                                    /* CLAUDE: Bei Fokus sichtbar am oberen Rand */
    outline: 3px solid var(--pvm-secondary);   /* CLAUDE: Deutlicher Fokus-Ring */
    outline-offset: 2px;
}

/* CLAUDE: High Contrast Mode Support für Skip-Link */
@media (prefers-contrast: high) {
    .pvm-skip-link {
        border: 3px solid currentColor;
    }
}

/* ==========================================================================
   CLAUDE: Container
   ========================================================================== */

.container,
.pvm-container {
    max-width: var(--pvm-container-max);       /* CLAUDE: Maximale Breite */
    margin: 0 auto;                             /* CLAUDE: Zentriert */
    padding-left: var(--pvm-container-padding); /* CLAUDE: Links */
    padding-right: var(--pvm-container-padding);/* CLAUDE: Rechts */
}

/* ==========================================================================
   CLAUDE: Focus-Visible - Moderne Fokus-Behandlung
   CLAUDE: Implementiert am 2026-01-09 für bessere Accessibility
   ========================================================================== */

/* CLAUDE: Fokus-Ring nur bei Keyboard-Navigation zeigen */
/* CLAUDE: Verbessert UX für Maus-User, erhält A11y für Keyboard-User */

/* CLAUDE: Reset - Standard-Outline entfernen */
*:focus {
    outline: none;
}

/* CLAUDE: Focus-Visible - Sichtbarer Ring bei Keyboard-Navigation */
*:focus-visible {
    outline: 2px solid var(--pvm-primary);
    outline-offset: 2px;
}

/* CLAUDE: Buttons und Links - spezifischer Fokus-Stil */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--pvm-primary);
    outline-offset: 3px;
    border-radius: var(--pvm-radius-sm);
}

/* CLAUDE: Form-Elemente - Fokus mit Border-Highlight */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--pvm-primary);
    outline-offset: 0;
    border-color: var(--pvm-primary);
}

/* CLAUDE: Cards und interaktive Container */
.pvm-card:focus-visible,
.pvm-service-card:focus-visible,
.pvm-feature-card:focus-visible,
.pvm-problem-card:focus-visible {
    outline: 2px solid var(--pvm-primary);
    outline-offset: 4px;
    box-shadow: var(--pvm-shadow-lg);
}

/* CLAUDE: Navigation Links - subtiler Hintergrund */
.pvm-nav-link:focus-visible,
.pvm-mobile-nav-link:focus-visible,
.pvm-nav-mobile__item a:focus-visible {
    background: rgba(123, 8, 159, 0.1);         /* CLAUDE: WCAG Primary mit Transparenz */
    border-radius: var(--pvm-radius-sm);
}

/* CLAUDE: Buttons mit Gradient - stärkerer Fokus */
.pvm-btn:focus-visible {
    outline: 3px solid var(--pvm-secondary);
    outline-offset: 3px;
    box-shadow: var(--pvm-shadow-primary);
}

/* CLAUDE: High Contrast Mode - verstärkter Fokus */
@media (prefers-contrast: high) {
    *:focus-visible {
        outline-width: 3px;
        outline-style: solid;
    }
}

/* CLAUDE: Reduced Motion - keine Transition beim Fokus */
@media (prefers-reduced-motion: reduce) {
    *:focus-visible {
        transition: none;
    }
}