/* ==========================================================================
   1. ROOT VARIABLEN (Design Tokens & Fluid Typography)
   ========================================================================== */

:root {
    /* --- Schriften --- */
    --font-body: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    --font-heading: 'Roboto Serif', Georgia, 'Times New Roman', serif;
    --font-light: 300;
    --font-regular: 400;
    --font-semibold: 600;
    --font-black: 700;

    /* --- Schriftgrößen (Basierend auf 16px Standard / Fluid Clamps) --- */
    --font-p: clamp(1rem, 0.3vw + 0.9rem, 1.125rem);
    --font-p-small: clamp(0.875rem, 0.2vw + 0.8rem, 1rem);
    --font-h1: clamp(2rem, 4vw, 4rem);
    --font-h1-unterseite: clamp(2rem, 4vw, 3.5rem);  
    --font-h2: clamp(1.75rem, 4vw, 2.5rem);     
    --font-h3: clamp(1.25rem, 2.5vw, 1.5rem);  
    --font-h4: clamp(1rem, 1.5vw, 1.125rem);   

    /* --- Spacing --- */
    --space-section-sm: clamp(1.5rem, 4vw, 3.5rem);   /* Für kleine Bereiche / Header */
    --space-section-md: clamp(2.5rem, 7vw, 5.5rem);   /* Der Standard-Webseiten-Abstand */
    --space-section-lg: clamp(3.5rem, 10vw, 8.5rem);  /* Für großzügige Hero-Bereiche */
    --container: 1800px;

    /* --- Abstände und Radien --- */
    --padding-8-16: clamp(0.5rem, 1vw, 0.8rem);
    --padding-16-32: clamp(1rem, 2.5vw, 1.5rem);      /* Kompakter, damit Boxen nicht explodieren */

    --gap-sm: .5rem;
    --gap-md: 1rem;
    --gap-lg: 1.5rem;
    --gap-xl: 2rem;
    --gap-xxl: 3rem;
    --radius: 9px;

    /* --- Farben --- */
    --black: #000000;
    --white: #ffffff;
    --offwhite: #Fdfefc;

    --primary-1: #1f3768; 
    --primary-2: #49484a; 
    --primary-3: #4ba2d6; 

    --secondary-1: #eb7218; 
    --secondary-2: #75b752; 
    --secondary-3: #7a7ab7; 

    --primary-1-medium: #8F9BB4; 
    --primary-2-medium: #A4A4A4; 
    --primary-3-medium: #A5D0EA; 

    --primary-1-light: #edeef4;  
    --primary-2-light: #D0D3D0;  
    --primary-3-light: #D2E8F5;  
    --primary-4-light: #f3fdff;  

    /* --- Schatten & Animationen --- */
    --shadow: rgba(73, 72, 74, 0.4);
    --shadow-blue: rgba(31, 55, 104, 0.4);
    
    --shadow-sm: 0 2px 5px rgba(31, 55, 104, 0.1);
    --shadow-md: 0 4px 10px var(--shadow);
    --shadow-md-2: 0 4px 10px var(--shadow-blue);

    --transition-smooth: all 0.3s ease;
}


/* ==========================================================================
   2. DOKUMENT & BODY SETUP
   ========================================================================== */

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px; 
}

body {
    font-family: var(--font-body);
    font-weight: var(--font-regular);
    background-color: var(--offwhite);
    color: var(--primary-2);
    line-height: 1.5; /* Schafft angenehmen Leseabstand im Text */
}

img {
    max-width: 100%;
    height: auto;
}


/* ==========================================================================
   3. TYPOGRAFIE BASICS
   ========================================================================== */

h1 {
    font-family: var(--font-body);
    font-size: var(--font-h1);
    font-weight: var(--font-black); 
    color: var(--primary-1);
    line-height: 1.2;
}

h2 {
    font-family: var(--font-heading);
    font-size: var(--font-h2);
    font-weight: var(--font-black); 
    text-align: center;
    color: var(--primary-1);
    line-height: 1.3;
}

h2 + p {
    text-align: center;
}

h3 {
    font-family: var(--font-heading);
    font-size: var(--font-h3);
    font-weight: var(--font-semibold); 
    color: var(--primary-1);
}

h4,
.lookslike_h4 {
    font-family: var(--font-body);
    font-size: var(--font-h4);
    font-weight: var(--font-semibold); 
    color: var(--primary-1);
}

h1, h2, h3, h4 {
    margin-block-start: 1.2em;
    margin-block-end: 0.6em;
    text-wrap: balance;
}

.lookslike_h4 + p {
    margin-top: 0.1rem;
}

p {
    font-size: var(--font-p);
}

.tag {
    font-size: var(--font-p-small);
}

p, .tag {
    -webkit-hyphens: auto; /* Für ältere Safari-Versionen */
    hyphens: auto;         /* Der Standard für alle modernen Browser */
}


/* ==========================================================================
   4. LAYOUT FUNDAMENT & UTILITIES
   ========================================================================== */

section.bgc {
    padding: var(--space-section-sm) 0;
}

.container {
    max-width: var(--container);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    box-sizing: border-box;
    padding: .3rem clamp(1.5rem, 4vw, 4rem);
}

/* Verhindert doppelte Abstände am Anfang und Ende von Containern */
.container > :first-child,
.container > * > :first-child {
    margin-block-start: 0;
    margin-top: 0;
}

.container > :last-child,
.container > * > :last-child {
    margin-block-end: 0;
    margin-bottom: 0;
}

.main-header,
footer {
    max-width: 100%;
}

.flex {
    display: flex;
}