/* 
 * basis.css
 * Grundlegende Stile, Resets und Variablen
 */

/* Farbvariablen */
:root {
    /* Primäre Farben */
    --farbe-blau: #0080c8;             /* Hauptfarbe (Blau) */
    --farbe-blau-hell: #e9f5fc;        /* Helles Blau (für Hover-Effekte) */
    --farbe-blau-dunkel: #2449a4;      /* Dunkles Blau (für Kontraste) */
    
    /* Akzentfarben */
    --farbe-rot: #dc3a1a;              /* Akzentfarbe (Rot) */
    --farbe-pink: #9E2165;             /* Alternative Akzentfarbe (Pink) */
    --farbe-gelb: #f7ae18;             /* Highlight-Farbe (Gelb) */
    
    /* Neutrale Farben */
    --farbe-text: #333333;             /* Standardtextfarbe */
    --farbe-text-hell: #aaaaaa;        /* Helle Textfarbe */
    --farbe-weiss: #ffffff;            /* Hintergrundfarbe */
    --farbe-grau-hell: #efefef;        /* Helles Grau für Hintergründe */
    --farbe-grau-mittel: #dddddd;      /* Mittleres Grau für Ränder */
    --farbe-schwarz: #000000;          /* Schwarz für bestimmte Elemente */
    
    /* Abstände und Größen */
    --abstand-klein: 0.5rem;           /* Kleiner Abstand */
    --abstand-standard: 1rem;          /* Standardabstand */
    --abstand-mittel: 1.5rem;          /* Mittlerer Abstand */
    --abstand-gross: 2rem;             /* Großer Abstand */
    
    /* Breakpoints */
    --breakpoint-mobil: 768px;         /* Smartphone */
    --breakpoint-tablet: 1024px;       /* Tablet */
    --breakpoint-desktop: 1200px;      /* Desktop */
    --breakpoint-desktop-gross: 1600px; /* Großer Desktop */
}

/* Grundlegende Resets */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Grundlegende HTML-Elemente */
html {
    font-family: 'Karla', Arial, sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    background: var(--farbe-weiss);
    color: var(--farbe-text);
    text-transform: lowercase;
}

body {
    margin: 0;
    text-transform: lowercase;
}

/* Selektion und Fokus */
::selection {
    background: var(--farbe-blau);
    color: var(--farbe-weiss);
}

:focus {
    outline: none;
}

/* Keine Nutzerauswahl für bestimmte Elemente */
.nein,
img {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Block-Level-Elemente */
header,
nav,
section {
    display: block;
    max-width: 100%;
}

/* Links */
a {
    color: var(--farbe-text);
    text-decoration: none;
    transition: color 0.25s ease;
}

a:hover {
    color: var(--farbe-blau);
    text-decoration: none;
}

a:focus {
    outline: none;
}

a:hover,
a:active {
    outline: 0;
}

/* Versteckte Elemente */
[hidden] {
    display: none;
}

/* Horizontale Linien */
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid var(--farbe-text-hell);
    margin: var(--abstand-standard) 0;
    padding: 0;
}

/* Listen */
ul,
ol {
    margin: var(--abstand-standard) 0;
    padding: 0 0 0 2.5rem;
}

nav ul,
nav ol {
    list-style: none;
    list-style-image: none;
    margin: 0;
    padding: 0;
}

/* Bilder */
img {
    border: 0;
    vertical-align: middle;
    width: 100%;
}

/* Absätze */
p {
    text-align: justify;
}

/* Text-Styling-Klassen */
.text__blau {
    color: var(--farbe-blau);
}

.text__rot {
    color: var(--farbe-rot);
}

.text__grau {
    color: var(--farbe-text-hell);
}

.text__fett {
    font-weight: bold;
}

/* Hintergrund-Klassen */
.hintergrund__blau {
    background-color: var(--farbe-blau);
}

.hintergrund__rot {
    background-color: var(--farbe-rot);
}

.hintergrund__grau {
    background-color: var(--farbe-grau-hell);
}

/* Inline-Links */
.link__inline, 
.link__inline a {
    color: var(--farbe-rot);
    transition: color 0.5s ease;
}

.link__inline:hover, 
.link__inline a:hover {
    color: var(--farbe-blau);
}

/* Anzeigen/Ausblenden */
.verstecken {
    display: none !important;
}

.anzeigen {
    display: block !important;
}

/* Scrollbar-Anpassungen */
body::-webkit-scrollbar {
    width: 9px;
}

body::-webkit-scrollbar-track {
    background: var(--farbe-weiss);
}

body::-webkit-scrollbar-thumb {
    background-color: var(--farbe-blau);
    border: 3px solid rgba(0,0,0,0);
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--farbe-blau) var(--farbe-weiss);
}

@media screen and (min-width: 1600px) {
    body::-webkit-scrollbar {
        width: 0;
    }
    * {
        scrollbar-width: none;
    }
}