* {
    box-sizing: border-box; /* mit dem * gilt es für alles. sorgt dafür, dass padding und border in Berechnungen enthalten sind */
}

/** Breakpoint: 576px+ */
@media (min-width: 36em) {}

/** Breakpoint: 768px+ */
@media (min-width: 48em) {}

/** Breakpoint: 992px+ */
@media (min-width: 62em) {}

/** Breakpoint: 1200px+ */
@media (min-width: 75em) {}

/** Breakpoint: 1400px+ */
@media (min-width: 87.5em) {}


/* Reset / Base */
* { box-sizing: border-box; }
html, body {
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
}

/* Design Tokens */
:root {
  --cc-orange: #fe8e1e;
  --cc-green: #5d693a;
  --cc-orange-600: #cc6600;
  --text: #222;
  --bg: #FDFDFD;
  --border: #e5e5e5;

  --space-2: 1rem;
  --container: 1200px;
  --font-body: 'Raleway', sans-serif;
}

/* Base Typografie */
body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1rem, .96rem + .3vw, 1.125rem);
  line-height: 1.5;
  color: var(--text);
  background: #FDFDFD;

}
h1, h2, h3 {
  margin: 0 0 var(--space-2);
  font-weight: 600;
  line-height: 1.2;
}
a { color: var(--cc-green);
  text-decoration: none;
}

/* Layout-Helfer */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-2);
}