/*===========================================================
   ====== Basis, Design-Variablen und Grundtypografie =======
   ==========================================================*/

/*Reset für konsitentes verhalten*/
*,
*::before,
*::after {
    box-sizing: border-box;
}
html, body{
    margin: 0;
    padding: 0;
}

/*Design-Variablen*/
:root {
    /*Farben*/
    --color-bg: #0b0e12;
    --color-elev-1: #11151a;
    --color-elev-2: #151b23;
    --color-text: #e5e7eb;
    --color-muted: #94a3b8;
    --color-accent: #2a6fdb;
    --color-accent-2: #59d;
    --color-border: #1f2937;

    /*Tpyografie*/
    --font-sans: "Barlow", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
    --fs-300: 0.95rem; /*Nebeninfos*/
    --fs-400: 1rem; /*Standarttext*/
    --fs-500: 1.125rem; /*etwas grösser*/
    --fs-600: 1.5rem; /*Sections-Titel*/
    --fs-700: 2.25rem; /*H1*/

    /*Abstände*/
    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2rem;
    --space-5: 3rem;
    --space-6: 4rem;
    
    /*Container Breite*/
    --max-w: 1100px;

    /*Effekte*/
    --radius-1: 10px;
    --shadow-1: 0 6px 24px rgba(0,0,0,0.25);

    /*Fehlermeldungen*/
    --color-error: #ff7a7a;
    --color-error-soft: #ffb4b4;
}

/*Grundlegende dokument einstellungen*/
html{
    scroll-behavior: smooth; /*weiches scrollen*/
}

body{
    font-family: var(--font-sans);
    font-size: var(--fs-400);
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-bg);
}

/*Überschriften Grundstil*/
h1, h2, h3 {
    line-height: 1.2;
    margin: 0 0 var(--space-2);
}
h1 { font-size: var(--fs-700); font-weight: 700; }
h2 { font-size: var(--fs-600); font-weight: 700; }
h3 { font-size: var(--fs-500); font-weight: 600; }

/*Links erst bei Hover besser sichtbar*/
a{
    color: var(--color-text);
    text-decoration: none;
}
a:hover, a:focus{
    color: var(--color-accent-2);
}

/*Bilder werden Responsiv*/
img, video { 
    max-width: 100%;
    height: auto;
    display: block;
}

/* Fokus für Tastatur*/
:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}