/*
 * base.css – Design Tokens & Reset
 * Praxis Wagenseil Joomla 6 Template v2.0
 * Farbschema: Original WordPress/Elementor-Design
 */

/* ─── 1. Design Tokens ──────────────────────────────────────── */
:root {
    /* Farben – 1:1 aus Original post-9.css */
    --color-primary:       #3B7FBC;   /* Header-Blau */
    --color-primary-dark:  #0D2237;   /* Topbar/Dropdown Navy */
    --color-primary-light: #dce9fa;   /* Helles Blau */
    --color-accent:        #F28526;   /* Orange Buttons */
    --color-accent-dark:   #d4701a;   /* Orange hover */
    --color-hero-bg:       #3B7FBC;   /* Hero-Hintergrund */
    --color-footer-bg:     #091E29;   /* Footer dunkel */
    --color-dropdown-bg:   #203C5A;   /* Dropdown */
    --color-dropdown-hover:#605BE5;   /* Dropdown hover lila */

    /* Neutral */
    --color-text:          #091E29;   /* Original Dunkelblau für Text */
    --color-text-muted:    #616060;
    --color-bg:            #ffffff;
    --color-bg-alt:        #F0F0F1;   /* Original Hellgrau */
    --color-bg-card:       #F8F9FE;   /* Original Kartenfarbe */
    --color-border:        #D1D1D1;   /* Original Trennlinie */
    --color-white:         #ffffff;

    /* Typografie */
    --font-heading: 'Raleway', 'Segoe UI', sans-serif;
    --font-body:    'Roboto', 'Segoe UI', sans-serif;
    --font-slab:    'Roboto Slab', Georgia, serif;

    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-md:   1.125rem;
    --text-lg:   1.25rem;
    --text-xl:   1.5rem;
    --text-2xl:  2rem;
    --text-3xl:  2.5rem;
    --text-4xl:  3rem;

    --leading-tight:  1.2;
    --leading-normal: 1.6;

    --font-weight-normal:   400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;

    /* Abstände */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* Layout */
    --container-max:   1440px;
    --container-pad:   80px;
    --header-height:   auto;
    --topbar-height:   65.5px;
    --section-padding: 50px;

    /* Radien */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   16px;
    --radius-full: 999px;

    /* Schatten */
    --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
    --shadow-md: 0 4px 16px rgba(0,0,0,.10);
    --shadow-lg: 0 8px 32px rgba(0,0,0,.12);

    /* Übergänge */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;

    /* Z-Ebenen */
    --z-sticky:  100;
    --z-overlay: 200;
}

/* ─── 2. Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 100%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-text);
    background: var(--color-bg);
}

/* ─── 3. Typografie ─────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-tight);
    color: var(--color-text);
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }

p {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    max-width: 100%;
}

p:last-child { margin-bottom: 0; }

/* Hinweis-/Fußnotentext: geringere Gewichtung */
p.note {
    color: var(--color-text-muted);
}

a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; transition: color var(--transition-fast); }
a:hover { color: var(--color-primary-dark); }

ul, ol { padding-left: var(--space-6); margin-bottom: var(--space-4); }
li { margin-bottom: var(--space-1); }

img, svg, video { max-width: 100%; height: auto; display: block; }
address { 
    font-style: normal; 
    font-size: var(--text-lg);
	}
strong { font-weight: var(--font-weight-semibold); }

:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; border-radius: var(--radius-sm); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }