/* ==========================================================================
   beats4needs.org – Stylesheet
   Alle Maße wachsen fließend zwischen den drei Layouts mit:
   Smartphone 390 px  →  Tablet 768 px  →  Desktop 1920 px
   ========================================================================== */

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  /* feste Schriftmetrik, damit Abstände in allen Browsern gleich sind */
  ascent-override: 96.8%;
  descent-override: 25.1%;
  line-gap-override: 0%;
}

:root {
  --weiss: #ffffff;
  --blau:  #009ee2;
}

/* --- Fließende Maße ------------------------------------------------------ */
:root {
  --kreis: calc(160px + -12 * (100vw - 390px) / 378);
  --ueber: calc(16.2px + 8.0 * (100vw - 390px) / 378);
  --text: calc(12.85px + 6.3 * (100vw - 390px) / 378);
  --zeile: calc(15px + 8 * (100vw - 390px) / 378);
  --ueber-text: calc(50px + 3 * (100vw - 390px) / 378);
  --abstand-q: 24px;
  --versatz: calc(0px + -6 * (100vw - 390px) / 378);
}

@media (min-width: 768px) {
  :root {
    --kreis: calc(148px + 100 * (100vw - 768px) / 1152);
    --ueber: calc(24.2px + 16.6 * (100vw - 768px) / 1152);
    --text: calc(19.15px + 13.25 * (100vw - 768px) / 1152);
    --zeile: calc(23px + 15.5 * (100vw - 768px) / 1152);
    --ueber-text: calc(53px + 36 * (100vw - 768px) / 1152);
    --abstand-q: calc(24px + 18.5 * (100vw - 768px) / 1152);
    --versatz: calc(-6px + 187 * (100vw - 768px) / 1152);
  }
}

@media (min-width: 1920px) {
  :root {
    --kreis: 248px;
    --ueber: 40.8px;
    --text: 32.4px;
    --zeile: 38.5px;
    --ueber-text: 89px;
    --abstand-q: 42.5px;
    --versatz: 181px;
  }
}


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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--weiss);
  color: var(--blau);
  font-family: "Montserrat", Arial, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Smartphone: untereinander, 100 px von oben -------------------------- */
.gruppe {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100px 16px 60px;
}

.kreis {
  display: block;
  width: var(--kreis);
  height: var(--kreis);
  flex-shrink: 0;
}

.text { text-align: center; }

h1 {
  margin: calc(44px - 0.268 * var(--ueber)) 0 0;
  font-size: var(--ueber);
  font-weight: 400;
  line-height: 1.219;
  text-transform: uppercase;
}

p {
  margin: calc(var(--ueber-text) - 0.951 * var(--ueber) - var(--zeile) / 2 + 0.3415 * var(--text)) 0 0;
  font-size: var(--text);
  line-height: var(--zeile);
}

/* --- ab 640 px: Kreis links, Text rechts, senkrecht im Bildschirm verteilt
   (--oben-anteil = Anteil des freien Raums oberhalb, aus den Layouts) ------ */
@media (min-width: 640px) {
  body {
    display: flex;
    flex-direction: column;
  }
  body::before,
  body::after {
    content: "";
    flex-grow: var(--oben-anteil);
  }
  body::after { flex-grow: calc(1 - var(--oben-anteil)); }

  :root { --oben-anteil: 0.4844; }

  .gruppe {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    padding: 24px 16px;
    /* Gruppe um --versatz aus der Mitte nach rechts schieben (Desktop) */
    margin-left: calc(2 * var(--versatz));
  }

  .text { margin-left: var(--abstand-q); }

  /* Grundlinie der Überschrift auf Höhe der Grundlinie von „NEEDS“ im Kreis */
  h1 { margin-top: calc(0.742 * var(--kreis) - 0.968 * var(--ueber)); }
}

@media (min-width: 1280px) {
  :root { --oben-anteil: 0.5585; }
}