/* =====================================================
   BASE.CSS
   -----------------------------------------------------
   Enthält:
   - Reset / Normalisierung
   - CSS Variablen (Design Tokens)
   - Grundlegende Typografie
   - Globale Basis-Styles
   -----------------------------------------------------
   Diese Datei definiert das Fundament der gesamten Website.
   Hier werden KEINE Komponenten gestaltet.
===================================================== */


/* =====================================================
   1. RESET
   Minimale Normalisierung für konsistentes Rendering
===================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

img,
picture,
video {
    object-fit: cover;
    width: 100%;
    max-width: 100%;
    display: block;
}


/* =====================================================
   2. CSS VARIABLES (Design Tokens)
   Globale Designwerte zentral definiert
   Änderungen hier wirken sich auf die gesamte Seite aus
===================================================== */

:root {
    /* COLORS */
    --color-bg: #white;
    --color-surface: #ffffff;
    --color-text: #1f2937;
    --color-muted: #6b7280;
	--color-primary: #b20101;
    --color-primary-hover: #252525;
	--color-secondary: #252525;
	--color-overlay: #fff0f0;
	--color-hoveronlinks: var(--color-primary);
	--color-grey_light: #eeeeee;

    /* MASSE */
	--cleanstartheight: 70vh; /* Höhe des grossen Startbilds auf Home */
	--navheight: 50px;
	--footerheight: 70px;
	--maxwidth-page: 9000px;
	--maxwidth-content: 1100px;
	--reducedwidth: 900px;
	--reducedheaderheight: calc(30vh + 30vw);
	--columngap: 2em;
	--sectionpadding: 6vw;

    /* TYPOGRAPHY */
/*  --font-main: TitilliumWeb-Regular, Arial, sans-serif; oder 'Roboto'?*/
    --font-main: 'Montserrat',Helvetica,Arial,Lucida,sans-serif;
    --font-h1: var(--font-main);
    --font-h2: var(--font-h1);
    --font-h3: var(--font-h2);
    --font-h4: var(--font-h3);
    --font-size-base: 16px;
    --line-height-base: 1.45;
    --letter-spacing: 0px;

    /* SPACING */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 32px;
    --spacing-xl: 64px;

    /* BORDER */
    --radius: 6px;
}




h1 {
    font-size: clamp(1.5rem, 5vw, 3rem); /* Minimum, responsive Wert, Maximum */
}




/* =====================================================
   3. GLOBAL BASE STYLES
   Grundlegende HTML-Elemente
===================================================== */

html {
  font-size: var(--font-size-base);
}

body {
  font-family: var(--font-main);
  font-optical-sizing: auto;
  font-style: normal; 
  font-size: var(--font-size-base);
  
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing);
  background: var(--color-bg);
  color: var(--color-text);
}

p {
    padding-bottom: 0.8rem;
}

a {
    color: var(--color-primary);
    transition: color 0.25s ease;
    text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1 {
	font-family: var(--font-h1);
/*    font-size: clamp(1.5rem, 5vw, 3rem); /* Minimum, responsive Wert, Maximum */
	font-size: calc(1.1em + 1.1vw);
    font-weight: 600;
    letter-spacing: 0.2em;
	padding-top: 3rem;
	padding-bottom: 3rem;
    text-transform: uppercase;
    text-align: center;
}
h2 {
	font-family: var(--font-h2);
	font-size: calc(1em + 0.7vw);
	padding: 1.5rem 0 0.5rem 0;
}
h3 {
	font-family: var(--font-h3);
	font-size: 1.2em;
    font-weight: 500;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}
h4 {
	font-family: var(--font-h4);
	font-size: 1em;
	padding: 20px 0 5px 0;
}

/* wenn text markiert wird */
::selection {
	background-color: var(--color-primary);
    color: var(--color-surface);
}



/* =====================================================
   3. FONTS
   Grundlegende Schriften
===================================================== */

 @font-face {
	font-family: TitilliumWeb-Black;
	src: url(../font/Titillium_Web/TitilliumWeb-Black.ttf);
}
@font-face {
	font-family: TitilliumWeb-Bold;
	src: url(../font/Titillium_Web/TitilliumWeb-Bold.ttf);
}
@font-face {
	font-family: TitilliumWeb-SemiBold;
	src: url(../font/Titillium_Web/TitilliumWeb-SemiBold.ttf);
}
@font-face {
	font-family: TitilliumWeb-Regular;
	src: url(../font/Titillium_Web/TitilliumWeb-Regular.ttf);
}
@font-face {
	font-family: TitilliumWeb-Light;
	src: url(../font/Titillium_Web/TitilliumWeb-Light.ttf);
}