/* ===================== base.css =====================
  Enthält:
  1) Font-Imports
  2) Globaler Reset
  3) Basisvariablen & CSS-Variablen
  4) Basisstile für HTML-Elemente und responsives Verhalten
  5) Dynamische, fluid skalierende Typografie (mit clamp)
  6) Schriftgrößen-Klassen (User-Wahl)
  7) Dynamische Schriftvarianten (Header und Text) – User-Wahl
  8) Layout-Klassen (narrow, default, wide) – User-Wahl
  9) Themes
*/

/* 1) FONTS */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&family=Open+Sans:wght@300;400;700&display=swap');

/* 2) GLOBALER RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
caption, tbody, tfoot, thead, tr, th, td,
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, output,
ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
  display: block;
}
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote::before, blockquote::after,
q::before, q::after { content: ''; }
table { border-collapse: collapse; border-spacing: 0; }

/* 3) BASISVARIABLEN & CSS-VARIABLEN */
:root {
  /* Standard-Schriftarten (überschreibbar durch Klassen) */
  --header-font: "Linux Libertine", serif;
  --text-font: "Open Sans", sans-serif;

  /* Abstände, Zeiten & Basisgrößen */
  --current-text-size: 1rem;
  --line-height: 1.6;
  --transition-speed: 0.3s;

  --spacing-xs: 0.25rem;   /* ca. 4px */
  --spacing-sm: 0.5rem;    /* ca. 8px */
  --spacing-md: 1rem;      /* ca. 16px */
  --spacing-lg: 1.5rem;    /* ca. 24px */
  --spacing-xl: 2rem;      /* ca. 32px */
  --spacing-xxl: 3rem;     /* ca. 48px */
  
  /* Farbwerte */
  --black: #000;
  --white: #fff;
  
  /* Typografie & Hintergründe */
  --bg-main: #FFFFFF;
  --bg-secondary: #F3F4F6;
  --bg-tertiary: #EDEFF2;
  --text-main: #202122;
  --text-secondary: #636C7E;
  --text-dim: #B0B6C1;
  --text-accent: #5F96CD;

  /* Layout-Breiten (maximale Container-Breiten) */
  --layout: 1600px;
  --layout-text: 928px;

  --layout-narrow: 1300px;
  --layout-text-narrow: 665px;
  --layout-default: 1600px;
  --layout-text-default: 928px;
  --layout-wide: 1677px;
  --layout-text-wide: 1048px;

  /* Text-Größen (Basiswerte) */
  --text-size-xxs: 0.75rem;   /* 12px */
  --text-size-xs:  0.875rem;  /* 14px */
  --text-size-sm:  1rem;      /* 16px */
  --text-size-md:  1.125rem;  /* 18px */
  --text-size-lg:  1.25rem;   /* 20px */
  --text-size-xl:  1.5rem;    /* 24px */
  --text-size-xxl: 2rem;      /* 32px */

  /* Code-Hintergrund */
  --code-bg: #ececec;

  /* Heading-Multiplikatoren (relativ zu --current-text-size) */
  --h1-multiplier: 2.5;
  --h2-multiplier: 2;
  --h3-multiplier: 1.75;
  --h4-multiplier: 1.5;
  --h5-multiplier: 1.25;
  --h6-multiplier: 1;

  /* Brandfarbe */
  --brand-color: #2b6ea0;
}

/* 4) BASISSTILE & GLOBALE ELEMENTE */
html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}
*, *::before, *::after { box-sizing: inherit; }
body {
  font-family: var(--text-font);
  font-size: var(--current-text-size);
  line-height: var(--line-height);
  color: var(--text-main);
  background-color: var(--bg-main);
  margin: 0;
  padding: 0;
}

/* Globale Stile für Formularelemente */
input, button, textarea, select {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* Responsives Medienverhalten für Bilder, Videos & eingebettete Medien */
img, video, embed, object {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Basis-Container (zentriert, padding) */
.container {
  width: 100%;
  max-width: var(--layout);
  padding: 0 var(--spacing-md);
  margin: 0 auto;
}

/* 5) DYNAMISCHE, FLUID SKALIERENDE TYPOGRAFIE */
/* Überschriften mit clamp() für einen responsiven Maßstab */
h1 {
  font-family: var(--header-font);
  font-size: clamp(2rem, calc(var(--current-text-size) * var(--h1-multiplier)), 3.5rem);
}
h2 {
  font-family: var(--header-font);
  font-size: clamp(1.75rem, calc(var(--current-text-size) * var(--h2-multiplier)), 3rem);
}
h3 {
  font-family: var(--header-font);
  font-size: clamp(1.5rem, calc(var(--current-text-size) * var(--h3-multiplier)), 2.5rem);
}
h4 {
  font-family: var(--header-font);
  font-size: clamp(1.25rem, calc(var(--current-text-size) * var(--h4-multiplier)), 2rem);
}
h5 {
  font-family: var(--header-font);
  font-size: clamp(1rem, calc(var(--current-text-size) * var(--h5-multiplier)), 1.75rem);
}
h6 {
  font-family: var(--header-font);
  font-size: clamp(0.875rem, calc(var(--current-text-size) * var(--h6-multiplier)), 1.5rem);
}

/* Basis-Typografie für Text */
p, span, li, a, blockquote {
  font-family: var(--text-font);
}

/* Links */
a {
  text-decoration: none;
  color: var(--text-accent);
  transition: color var(--transition-speed);
}
a:hover,
a:focus {
  color: var(--text-main);
}

/* Code-Element */
code {
  background-color: var(--code-bg);
  color: var(--text-accent);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
}

/* Screenreader-Only */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Bevorzugte reduzierte Motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* 6) SCHRIFTGRÖSSE-KLASSEN (User-Auswahl) */
.font-size-xxs { --current-text-size: var(--text-size-xxs); }
.font-size-xs  { --current-text-size: var(--text-size-xs); }
.font-size-sm  { --current-text-size: var(--text-size-sm); }
.font-size-md  { --current-text-size: var(--text-size-md); }
.font-size-lg  { --current-text-size: var(--text-size-lg); }
.font-size-xl  { --current-text-size: var(--text-size-xl); }
.font-size-xxl { --current-text-size: var(--text-size-xxl); }

/* 7) DYNAMISCHE SCHRIFTVARIANTEN – FONTAUSWAHL */
/* Diese Klassen ermöglichen es dem User, die Schriftarten für Überschriften und Fließtext individuell zu wählen */
.serif-header { --header-font: "Linux Libertine", serif; }
.sans-header  { --header-font: "Open Sans", sans-serif; }
.mono-header  { --header-font: "IBM Plex Mono", monospace; }

.serif-text { --text-font: "Linux Libertine", serif; }
.sans-text  { --text-font: "Open Sans", sans-serif; }
.mono-text  { --text-font: "IBM Plex Mono", monospace; }

/* 8) LAYOUT-KLASSEN – User-Auswahl */
.layout-narrow .header-container  { --layout: var(--layout-narrow); }
.layout-narrow .main-content      { --layout-text: var(--layout-text-narrow); }
.layout-default .header-container { --layout: var(--layout-default); }
.layout-default .main-content     { --layout-text: var(--layout-text-default); }
.layout-wide .header-container    { --layout: var(--layout-wide); }
.layout-wide .main-content        { --layout-text: var(--layout-text-wide); }

/* 9) THEMES */
.theme-default {
  --bg-main: #FFFFFF;
  --bg-secondary: #F3F4F6;
  --bg-tertiary: #EDEFF2;
  --text-main: #202122;
  --text-secondary: #636C7E;
  --text-dim: #B0B6C1;
  --text-accent: #5F96CD;
  --code-bg: #ececec;
  --divider: #D3D5D9;
}

.theme-paper {
  --bg-main: #F8F0E5;
  --bg-secondary: #F4E8D7;
  --bg-tertiary: #EBDAC4;
  --text-main: #202122;
  --text-secondary: #7E6D56;
  --text-dim: #BDAD96;
  --text-accent: #7A9C96;
  --code-bg: #f2e8d9;
  --divider: #D1C0AA;
}

.theme-dark {
  --bg-main: #191A1A;
  --bg-secondary: #222222;
  --bg-tertiary: #303030;
  --text-main: #D9D9D9;
  --text-secondary: #AEAEAE;
  --text-dim: #8A8A8A;
  --text-accent: #5BA4C8;
  --code-bg: #3a3a3a;
  --divider: #515151;
}

.theme-night {
  --bg-main: #282B38;
  --bg-secondary: #343746;
  --bg-tertiary: #3E4254;
  --text-main: #D9D9D9;
  --text-secondary: #BDC0CF;
  --text-dim: #818698;
  --text-accent: #7B9BBA;
  --code-bg: #3a3a50;
  --divider: #51576E;
}

.theme-eclipse {
  --bg-main: #030303;
  --bg-secondary: #141414;
  --bg-tertiary: #2A2A2A;
  --text-main: #B5B5B5;
  --text-secondary: #D9D9D9;
  --text-dim: #929292;
  --text-accent: #F9C84B;
  --code-bg: #1c1c1c;
  --divider: #383838;
}

.theme-power {
  --bg-main: #24242A;
  --bg-secondary: #191A1C;
  --bg-tertiary: #3C3C4E;
  --text-main: #CACACA;
  --text-secondary: #B6B6C3;
  --text-dim: #8989A0;
  --text-accent: #9DD27C;
  --code-bg: #2e2e35;
  --divider: #404B5F;
}

.theme-futur {
  --bg-main: #1B1337;
  --bg-secondary: #F3CE4B0F;
  --bg-tertiary: #3A2743;
  --text-main: #E1E0DA;
  --text-secondary: #F3CE4B;
  --text-dim: #9E9E9E;
  --text-accent: #D75EBC;
  --code-bg: #2c2330;
  --divider: #3B3161;
}

.theme-retro {
  --bg-main: #F6F1E9;
  --bg-secondary: #F3E7DE;
  --bg-tertiary: #D5C9E8;
  --text-main: #2C2C2C;
  --text-secondary: #AE794B;
  --text-dim: #AFA9A5;
  --text-accent: #D85251;
  --code-bg: #f0eae1;
  --divider: #E4DBD2;
}

.theme-joy {
  --bg-main: #EEEEEE;
  --bg-secondary: #EDE1E5;
  --bg-tertiary: #ECDDE2;
  --text-main: #141414;
  --text-secondary: #46212F;
  --text-dim: #8D8D8D;
  --text-accent: #F94B8A;
  --code-bg: #dcdcdc;
  --divider: #CCCCCC;
}

@media (max-width: 1199px) {
  html, body {
    overflow-x: hidden;
  }

  body {
    overscroll-behavior-x: none;
    -webkit-overflow-scrolling: touch;
  }  

  * {
    max-width: 100vw;
    box-sizing: border-box;
  }
}