/* -------------------------------------------------------------------------
   COZYX - Impressum, Datenschutz, 404

   Gestaltung uebernommen von pseudomate.de (gleiche Gesellschaft):
   schwarzer Grund, Figtree, 72px-Seitentitel ueber einer 860px-Textspalte,
   Fliesstext in Weiss auf 64 % Deckkraft, Akzentgruen #07C42C.
   Die Zeilenhoehen der Ueberschriften sind hier nicht 1:1 uebernommen, sondern
   in Aussenabstaende umgerechnet - dadurch bleibt der gleiche vertikale
   Rhythmus, aber umbrechende Ueberschriften reissen auf schmalen Displays
   nicht auseinander.
   ------------------------------------------------------------------------- */

:root {
  --bg:     #000;
  --fg:     #fff;
  --muted:  rgba(255, 255, 255, .64);
  --dim:    rgba(255, 255, 255, .40);
  --line:   rgba(255, 255, 255, .10);
  --accent: #07c42c;
}

/* Figtree wie auf pseudomate.de. Solange die Schriftdatei nicht danebenliegt,
   greift die Systemschrift-Kette darunter - Segoe UI, SF Pro bzw. Roboto.
   Zum Aktivieren: assets/fonts/figtree-latin.woff2 ablegen und auskommentieren.

@font-face {
  font-family: Figtree;
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("fonts/figtree-latin.woff2") format("woff2");
}
*/

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

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: Figtree, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.shell {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
}

/* --- Kopfzeile ----------------------------------------------------------- */

.top { padding: 36px 0; }

.top .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.top__mark { display: block; height: 30px; width: auto; }

.top__back {
  flex: none;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--fg);
  text-decoration: none;
}
.top__back:hover,
.top__back:focus-visible { color: var(--accent); }

/* --- Titel und Textspalte ------------------------------------------------ */

main { flex: 1 0 auto; padding-bottom: 112px; }

.title { padding: 50px 0 40px; }

h1 {
  margin: 0;
  font-size: clamp(38px, 8.5vw, 72px);
  line-height: 1.11;
  font-weight: 500;
  letter-spacing: -.03em;
  text-align: center;
}

.stand {
  margin: 20px 0 0;
  text-align: center;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dim);
}

.legal { max-width: 860px; margin: 0 auto; }

h2 {
  margin: 64px 0 20px;
  font-size: 26px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--fg);
}

h3 {
  margin: 44px 0 12px;
  font-size: 19px;
  line-height: 1.45;
  font-weight: 600;
  color: var(--fg);
}

p, address, ul {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 28px;
  font-style: normal;
  color: var(--muted);
}

ul { padding-left: 20px; }
li { margin-bottom: 6px; }
li::marker { color: var(--dim); }

strong { color: var(--fg); font-weight: 600; }

a { color: var(--accent); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

/* --- Fusszeile ----------------------------------------------------------- */

.foot {
  flex: none;
  border-top: 1px solid var(--line);
  padding: 48px 0 32px;
}

.foot__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.foot__mark { display: block; height: 48px; width: auto; }

.foot__cols { display: flex; gap: 72px; }

.foot__col { display: flex; align-items: flex-start; gap: 20px; }

.foot__label {
  padding-top: 10px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
}

.foot__col ul {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: right;
}
.foot__col li { margin: 0; }

.foot__col a {
  display: block;
  font-size: 32px;
  line-height: 40px;
  font-weight: 450;
  letter-spacing: -.02em;
  color: var(--fg);
  text-decoration: none;
}
.foot__col a:hover,
.foot__col a:focus-visible { color: var(--accent); text-decoration: none; }

.foot__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 56px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: -.01em;
}

.foot__bottom a { color: var(--fg); }
.foot__bottom a:hover { color: var(--accent); text-decoration: none; }

/* --- schmale Displays ---------------------------------------------------- */

@media (max-width: 720px) {
  .shell { padding: 0 20px; }
  .title { padding: 32px 0 28px; }
  main { padding-bottom: 72px; }

  h2 { margin: 48px 0 16px; font-size: 22px; }
  h3 { margin: 32px 0 10px; font-size: 17px; }

  .foot__top { flex-direction: column; gap: 32px; }
  .foot__cols { flex-direction: column; gap: 28px; width: 100%; }
  .foot__col { justify-content: space-between; width: 100%; }
  .foot__col a { font-size: 26px; line-height: 34px; }
  .foot__bottom { margin-top: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}