* {
  margin: 0;
  padding: 0;
}

@font-face {
  font-family: 'DINdong';
  src: url('/assets/fonts/DINdong.woff2') format('woff2');
}

:root {
  --padding: 1.5rem;

  --color-header-bg-dark: var(--color-dark);
  --color-header-text-light: var(--color-light);

  --color-header-bg-light: var(--color-light);
  --color-header-text-dark: var(--color-dark);

  --color-body-bg-light: var(--color-light);
  --color-body-text-dark: var(--color-dark);

  --color-body-bg-dark: var(--color-dark);
  --color-body-text-light: var(--color-light);

  --color-highlight-light: var(--color-code-purple);
  --color-highlight-dark: var(--color-code-green);

  --color-black: #000000;
  --color-white: #fff;
  --color-dark: #1a171a;
  --color-light: #f9e9e9;
  
  --color-code-grey:        #777;
  --color-code-lightgrey:   #cacbd1;
  --color-code-comment:     #a9aaad;
  --color-code-white:       #c5c9c6;
  --color-code-red:         #d16464;
  --color-code-orange:      #de935f;
  --color-code-yellow:      #f0c674;
  --color-code-green:       #a7bd68;
  --color-code-aqua:        #8abeb7;
  --color-code-blue:        #7e9abf;
  --color-code-purple:      #aa00ff;
  --color-code-framboise:   #ffb7bb;

  --font-family-headline: 'DINdong', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;

  /* clamp(MIN ≤ IDEAL ≤ MAX) */ 
  --font-size-h1: clamp(1.25rem, 1.5vw, 1.75rem);
  --font-size-h2: clamp(2rem, 3.6vw, 3.6rem);
  --font-size-h3: clamp(1.5rem, 3.2vw, 3.2rem);
  --font-size-h4: clamp(1.2rem, 2.5vw, 2.5rem);
  --font-size-h5: clamp(1.25rem, 1.5vw, 1.75rem);
  --font-size-h6: clamp(1rem, 1vw, 1.5rem);
  --font-size-p:  clamp(1.25rem, 1.5vw, 1.75rem);
  --font-size-meta: clamp(1rem, 1vw, 1.5rem);
  --font-size-big: clamp(6rem, 10vw, 10rem);
  --font-size-mini: clamp(0.7rem, 0.9vw, 0.9rem);

  --line-height-h1: 1.2;
  --line-height-h2: 1.1;
  --line-height-h3: 1.2;
  --line-height-h4: 1.1;
  --line-height-h5: 1.4;
  --line-height-h6: 1.5;
  --line-height-p: 1.4;
  --line-height-meta: 1.2;
  --line-hight-big: 1.4;
  --line-hight-mini: 1.1;
}

html {
  font-family: var(--font-family-sans);
}

img {
  width: 100%;
}

body {
  margin: 0 auto;
  color: var(--color-body-text-dark);
  background: var(--color-body-bg-light);
}

body.darkmode {
  color: var(--color-body-text-light);
  background: var(--color-body-bg-dark);
}

main {
  padding: var(--padding);
  margin: 0 auto;
}

li {
  list-style: none;
}

a {
  color: currentColor;
  text-decoration: underline;
  text-decoration-thickness: clamp(0.4px, 0.3em, 4px);
  cursor: pointer;
}

a:hover {
  color: var(--color-highlight-light);
}

body.darkmode a:hover {
  color: var(--color-highlight-dark);
}

p {
  font-size: var(--font-size-p);
  line-height: var(--line-height-p);
  margin-bottom: 1.5rem;
}

button {
  font: inherit;
  background: none;
  border: 0;
  color: currentColor;
  cursor: pointer;
}

.header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--color-header-bg-light);
  color: var(--color-header-text-dark);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding);
  margin-bottom: 6rem;
}

.header a {
  font-family: var(--font-family-headline);
  text-decoration: none;
}

body.darkmode .header {
  background: var(--color-header-bg-dark);
  color: var(--color-header-text-light);
}

header .logo {
  font-family: var(--font-family-headline);
  display: flex;
  align-items: center;
  font-size: var(--font-size-h2);
  cursor: pointer;
  margin-bottom: 1rem;
}

/* H1 nur für Screenreader sichtbar */
.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;
}

/* Keyboard Navigation */
:focus-visible {
    outline: 2px solid black;
    border-radius: 20px;
    padding: 4px;
 }

.intro {
  margin-bottom: 4rem;
  max-width: 1900px;
  font-family: var(--font-family-headline);
}

/* Responsive Headings H1–H6 */
h1 {
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  font-weight: var(--font-weight-h1);
  font-family: var(--font-family-headline);
}

h2 {
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  font-weight: var(--font-weight-h2);
  font-family: var(--font-family-headline);
}

h3 {
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  font-weight: var(--font-weight-h3);
  font-family: var(--font-family-headline);
}

h4 {
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
  font-weight: var(--font-weight-h4);
  font-family: var(--font-family-headline);
}

h5 {
  font-size: var(--font-size-h5);
  line-height: var(--line-height-h5);
  font-weight: var(--font-weight-h5);
  font-family: var(--font-family-headline);
}

h6 {
  font-size: var(--font-size-h6);
  line-height: var(--line-height-h6);
  font-weight: var(--font-weight-h6);
  font-family: var(--font-family-headline);
}

.footer {
  padding: 9rem var(--padding) 6rem;
  line-height: 1.5em;
}

.footer:before {
  display: block;
  width: 1.5rem;
  height: 2px;
  background: var(--color-black);
  margin-bottom: 1.5rem;
}