/*
Theme Name:     Die Hypnosewerkstatt Child Theme
Theme URI:      https://www.diehypnosewerkstatt.com
Description:    Style-CSS für Divi 5. Fokus auf Performance, Barrierefreiheit und SEO-Struktur.
Author:         diehypnosewerkstatt.com
Template:       Divi
Version:        1.0.0
*/

/* ==========================================================================
   1. PERFORMANCE & LAYOUT TOKENS
   ========================================================================== */
:root {
    /* Basiseinheiten für konsistente Abstände (Modular Scale) */
    --spacing-unit: 1rem;
    
    /* Standard Breakpoints (Divi konform) */
    --bp-desktop: 981px;
    --bp-tablet: 768px;
    --bp-mobile: 480px;

    /* Performance: Verhindert Layout Shifts bei Bildern */
    --image-aspect-ratio: auto;
}

/* ==========================================================================
   2. BROWSER RESET & PERFORMANCE OPTIMIZATION
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    /* Sanftes Scrollen für Ankerlinks (SEO & UX) */
    scroll-behavior: smooth;
    /* Verhindert Text-Größen-Sprünge auf Mobilgeräten */
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Verhindert horizontales Scrollen bei Animationen */
}

/* Hardware-Beschleunigung für flüssigere Animationen in Divi 5 */
.et_pb_section, .et_pb_module {
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* ==========================================================================
   3. ACCESSIBILITY (A11Y)
   ========================================================================== */
/* Standard Fokus-Ring für Tastatur-Navigation (Wichtig für Barrierefreiheit) */
:focus-visible {
    outline: 3px solid #005aff; /* Temporäre Farbe, bis CI feststeht */
    outline-offset: 3px;
}

/* Screenreader Only - Versteckt Inhalte visuell, lässt sie aber für SEO/A11Y lesbar */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

/* ==========================================================================
   4. MEDIA OPTIMIZATION
   ========================================================================== */
img {
    max-width: 100%;
    height: auto;
    display: block; /* Entfernt den ungewollten Abstand unter Bildern */
}

/* Reduzierte Bewegungen für Nutzer, die dies im OS eingestellt haben */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}