/* global.css */
p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li,
a {
  font-family: var(--font-family);
  color: var(--primary-font-color);

  margin: 0;
  padding: 0;
}
body {
  margin: 0;
  padding: 0;

  scroll-behavior: smooth;
}

:root {
  /* Blacks and Whites */
  --black-color: hsl(0, 0%, 0%); /*#black*/
  --white-color: hsl(0, 0%, 100%); /*#black*/

  /* Background Colors */
  --primary-bg-color: hsl(0, 0%, 7%); /*#111111*/
  --secondary-bg-color: hsl(0, 0%, 14%); /*#232323*/
  --accent-bg-color: hsl(0, 0%, 17%); /*#2C2C2C*/

  /* Primary, Secondary, Accent colors */
  --primary-color: hsl(243, 98%, 66%); /*#2f27ce*/
  --secondary-color: hsl(0, 2%, 19%); /*#575757*/
  --accent-color: hsl(22, 100%, 43%); /*#DA4F00*/

  /* Font color */
  --primary-font-color: hsl(0, 0%, 100%); /*#FFFFFF*/
  --secondary-font-color: hsl(0, 0%, 80%); /*#B4B4B4 -> 0, 0, 71*/

  /* Fonts */
  --font-family: "Montserrat", sans-serif;

  /* Margin */
  --margin-xxs: 0.25rem;
  --margin-xs: 0.5rem;
  --margin-s: 0.75rem;
  --margin-m: 1rem;
  --margin-l: 1.25rem;
  --margin-xl: 1.75rem;
  --margin-xxl: 2.5rem;
  --margin-xxxl: 5rem;

  /* Padding */
  --padding-xxs: 0.25rem;
  --padding-xs: 0.5rem;
  --padding-s: 0.75rem;
  --padding-m: 1rem;
  --padding-l: 1.25rem;
  --padding-xl: 1.75rem;
  --padding-xxl: 2.5rem;

  /* font size */
  --font-size-xxs: 0.75rem;
  --font-size-xs: 0.875rem;
  --font-size-s: 1rem;
  --font-size-sm: 1.125rem;
  --font-size-m: 1.25rem;
  --font-size-l: 1.5rem;
  --font-size-xl: 2rem;
  --font-size-xxl: 3rem;
  --font-size-xxxl: 4rem;
  --font-size-xxxxl: 6rem;
  --font-size-xxxxxl: 8rem;
  --font-size-xxxxxxl: 10rem;

  --side-padding: 5vw;

  /* screen max width */
  --screen-sm: 576px;
  --screen-md: 768px;
  --screen-lg: 992px;
  --screen-xl: 1200px;
  --screen-xxl: 1400px;
}


.side-padding {
  max-width: var(--screen-xxl); /* Maximale Breite des Containers */
  padding-left: var(--side-padding); /* Abstand links */
  padding-right: var(--side-padding); /* Abstand rechts */
}
.section-headline {
  font-size: clamp(var(--font-size-xl), 1.6vw, var(--font-size-xxl));
  font-weight: 700;
  color: var(--primary-font-color);

  display: inline-block;
  padding-bottom: var(--padding-m);
  border-bottom: 3px solid var(--accent-color);

  margin-bottom: 1vw;
}