/* Design-Tokens — 1:1 aus Figma "Dälken – Website Relaunch v1" (l2SvsYvSdRvqOP43fOWHod).
   Letter-Spacings liegen in Figma als Prozentwerte vor und stehen hier als em. */

/* Lizenzierte Fontwerk-Schnitte, statische Instanzen statt des variablen
   Trial-Subsets. Fünf Deklarationen unter einem Familiennamen — der Browser
   lädt nur den Schnitt, den eine Regel tatsächlich anfordert. Alle fünf sind
   im Einsatz (300 t-*-light, 400 Fließtext, 500 t-display/-medium,
   600 t-h1/t-h2/t-15-semibold, 700 t-wortmarke); kommt ein Schnitt außer
   Gebrauch, gehört seine Deklaration mitsamt Datei entfernt. */
@font-face {
  font-family: "Neue DIN";
  src: url("../fonts/NeueDIN-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neue DIN";
  src: url("../fonts/NeueDIN-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neue DIN";
  src: url("../fonts/NeueDIN-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neue DIN";
  src: url("../fonts/NeueDIN-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neue DIN";
  src: url("../fonts/NeueDIN-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Fluide Basis: 1rem = 16px bei 1440 (16/1440 = 1.1111vw). Oberhalb 1440 skaliert
   damit das gesamte Layout proportional weiter — 21,33px bei 1920, 28,44px bei 2560.
   Unten gedeckelt, damit Fließtext unterhalb der Tablet-Grenze lesbar bleibt. */
/* text-size-adjust MUSS aus. iOS Safari vergrößert Text eigenmächtig, und zwar
   pro Block und abhängig von dessen Breite. Im Laufband ist jeder Span ein
   Flex-Item und damit ein eigener Block — die kurzen und die langen Spans
   bekamen deshalb verschiedene Faktoren und standen im selben Satz in
   unterschiedlichen Größen nebeneinander. 100 % statt none: Der Nutzer kann
   weiterhin zoomen, nur die automatische Aufblähung entfällt. */
html {
  font-size: clamp(14px, 1.1111vw, 28.444px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

:root {
  /* Farben */
  --text-black: #1c1a15;
  --page-bg: #f6f4ec;
  --section-bg: #f0ece0;
  --linie-standard: #e3dcc9;
  --linie-black: #1c1a15;
  --linie-grey: #e5e5e5;
  --d-blue: #3cd0f2;
  --d-green: #89e600;
  --d-red: #feb39e;

  /* Gaps */
  --gap-xs: 1.5rem;      /* 24 */
  --gap-s: 1.5625rem;    /* 25 */
  --gap-m: 3.125rem;     /* 50 */
  --gap-l: 4.6875rem;    /* 75 */
  --gap-xl: 6.25rem;     /* 100 */

  --radius-voll: 999px;

  /* Raster — kein Breiten-Deckel, die Seite ist immer 100 % breit.
     Der Seitenrand wächst oberhalb 1440 aber NICHT mehr mit. Er bleibt auf
     seinem 1440er-Designwert von 30 px stehen, damit der Abstand Fensterkante →
     erste D-Form über 1920/2560/3440 konstant ist. Unterhalb 1440 skaliert er
     weiter mit (rem < 30 px). Der Deckel gilt bewusst für die ganze Seite: nur
     im Hero gekappt, stünden Wortmarke und H1 oben auf 30 px und die identische
     Wortmarke im Footer auf 53 px. */
  --page-pad: min(1.875rem, 30px);  /* 30 */

  /* Typografie */
  --font: "Neue DIN", "Helvetica Neue", Arial, sans-serif;

  --hover-opacity: 0.7;
}

/* Typo-Rollen als Utility-Klassen — Namen folgen den Figma-Styles.
   Größen in rem (Figma-px ÷ 16) — dadurch fluid aus der Root-Größe.
   Letter-Spacing in em, line-height unitless: beides skaliert automatisch mit. */
.t-wortmarke { font-size: 1.0625rem; font-weight: 700; line-height: 1; letter-spacing: 0.04em; }
.t-subline   { font-size: 1.0625rem; font-weight: 400; line-height: 1; letter-spacing: 0.04em; }

.t-display   { font-size: 6.875rem;  font-weight: 500; line-height: 1.12; letter-spacing: -0.015em; }
.t-h1        { font-size: 3.4375rem; font-weight: 600; line-height: 1.12; letter-spacing: -0.015em; }
.t-h2        { font-size: 3.4375rem; font-weight: 600; line-height: 1.12; letter-spacing: -0.015em; }

.t-38-medium { font-size: 2.375rem;  font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; }
.t-34-medium { font-size: 2.125rem;  font-weight: 500; line-height: 1.2; letter-spacing: -0.015em; }
.t-34        { font-size: 2.125rem;  font-weight: 400; line-height: 1.3; letter-spacing: -0.015em; }
.t-24-medium { font-size: 1.5rem;    font-weight: 500; line-height: 1.3; letter-spacing: -0.005em; }
.t-24        { font-size: 1.5rem;    font-weight: 400; line-height: 1.3; letter-spacing: -0.005em; }
.t-17        { font-size: 1.0625rem; font-weight: 400; line-height: 1.65; }
.t-17-light  { font-size: 1.0625rem; font-weight: 300; line-height: 1.65; }
.t-15        { font-size: 0.9375rem; font-weight: 400; line-height: 1.5; }
.t-15-semibold { font-size: 0.9375rem; font-weight: 600; line-height: 1.5; }
.t-15-light  { font-size: 0.9375rem; font-weight: 300; line-height: 1.5; }
.t-13-light  { font-size: 0.8125rem; font-weight: 300; line-height: 1.5; }
.t-10-light  { font-size: 0.625rem;  font-weight: 300; line-height: 1.5; letter-spacing: 0.05em; }