@font-face {
  font-family: "DIN 2014";
  src: url("../Fonts/DIN2014-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Root font size drives the whole layout (Locofy output uses rem for every
   width; 120rem = the Figma 1920px frame). Two regimes:
     • 1200px–1919px viewport: scale proportionally so the 120rem design
       fits exactly — no horizontal scroll, no fluid-vs-fixed fights.
     • ≥ 1920px: cap at 16px so the design doesn't blow up past its
       intended size on 4K displays.
     • < 1200px: font is fixed at 14px for readability; the layout stops
       scaling here and relies on the responsive overrides further below
       in index.css to stack two-col sections vertically, make images
       full-width, etc.
   Bug fixed here: calc(100vw / 120) alone hits its own low point exactly
   at the 1200px boundary (1200/120 = 10px) - noticeably SMALLER than the
   14px floor used one pixel to the left of that boundary (< 1200px), so
   text got tiny right where the "1200px+" regime begins and only grew
   back past the 14px mobile floor around ~1680px (1680/120 = 14) instead
   of an immediate readable size. clamp() keeps the same proportional
   scaling and the same 16px ceiling at 1920px, but never lets it drop
   below the 14px floor that already applies just below 1200px. */
html {
  font-size: 16px;
  box-sizing: border-box;
}
@media (min-width: 1200px) and (max-width: 1919px) {
  html { font-size: clamp(14px, calc(100vw / 120), 16px); }
}
@media (max-width: 1199px) {
  html { font-size: 14px; }
}
*, *::before, *::after { box-sizing: inherit; }

html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* Cap and centre the full-bleed design on very wide screens so it doesn't
   stick to the right edge (Locofy's .home uses align-items: flex-end). */
.home {
  max-width: 120rem;
  margin-inline: auto;
}

:root {
  /* Common Style Variables */

  /* Color */
  --color-darkslateblue: #484e56;
  --color-deepskyblue: #37b5f4;
  --color-gainsboro-100: #e6e6e6;
  --color-gainsboro-200: #d9d9d9;
  --color-gainsboro-300: rgba(217, 217, 217, 0);
  --color-gray-100: #0e1729;
  --color-gray-200: rgba(0, 0, 0, 0.1);
  --color-gray-300: rgba(0, 0, 0, 0.15);
  --color-gray-400: rgba(255, 255, 255, 0.1);
  --color-silver: rgba(191, 191, 191, 0);
  --color-steelblue: #1f9cdb;
  --color-white: #fff;

  /* Gap */
  --gap-15: 0.937rem;
  --gap-16: 1rem;
  --gap-19: 1.187rem;
  --gap-20: 1.25rem;
  --gap-24: 1.5rem;
  --gap-100: 6.25rem;

  /* Padding */
  --padding-0: 0rem;
  --padding-01: 0;
  --padding-3: 0.187rem;
  --padding-10: 0.625rem;
  --padding-20: 1.25rem;
  --padding-40: 2.5rem;

  /* BorderRadius */
  --br-5: 5px;
  --br-15: 15px;
  --br-50: 50px;

  /* Font */
  --font-din-2014: "DIN 2014", "Archivo Black", Impact, sans-serif;
  --font-figtree: Figtree, system-ui, sans-serif;

  /* FontSize */
  --fs-18: 1.125rem;
  --fs-19: 1.187rem;
  --fs-22: 1.375rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-64: 4rem;
  --fs-100: 6.25rem;

  /* Borders */
  --border-1: 1px solid var(--color-deepskyblue);

  /* WidthHeights */
  --height-2: 0.125rem;
  --height-12: 0.75rem;
  --height-16: 1rem;
  --height-19: 1.187rem;
  --height-22: 1.375rem;
  --height-48: 3rem;
  --height-56: 3.5rem;
  --height-72: 4.5rem;
  --height-720: 45rem;
  --width-24: 1.5rem;
  --width-72: 4.5rem;
  --width-632: 39.5rem;
  --width-653: 40.812rem;
  --width-667: 41.687rem;

  /* LineHeights */
  --lh-18: 1.125rem;
  --lh-22: 1.375rem;
  --lh-26: 1.625rem;
  --lh-32: 1.25rem;

  /* LetterSpacings */
  --ls-6: 6px;

  --left-0: 0rem;
  --left-20: 1.25rem;
  --top-0: 0rem;
  --top-20: 1.25rem;
}

.skip-link {
  display: none;
}

body {
  margin: 0;
  line-height: normal;
  background: var( --color-darkslateblue);
}

/* ==========================================================================
   TYPO3-Standard-Abstandsklassen ("Erscheinungsbild"-Tab jedes Inhalts-
   elements, Felder "Abstand oberhalb/unterhalb"). Der Layout-Wrapper für
   Standard-Elemente (Text, Überschrift, ...) gibt die Klassen schon von
   sich aus aus (fluid_styled_content-Konvention) - hier fehlten bisher
   nur die tatsächlichen CSS-Regeln dazu. Mask-Elemente (uspsection,
   bildergalerie, projekteigenschaft, eigenschaftengrid, swiperslider)
   rendern ohne diesen Wrapper und geben die Klassen daher zusätzlich
   direkt in ihrem eigenen Template aus (siehe die jeweiligen
   Mask/Frontend/Templates/*.html).
   !important ist hier bewusst: die betroffenen Komponenten (.content-
   gallery, .eigenschaften-grid, .usp-section...) bringen selbst schon
   ein margin/padding als Standardabstand mit. CSS summiert zwei
   margin-top-Deklarationen auf demselben Element NICHT, es gewinnt nur
   eine - ohne !important hätte die spätere, spezifischere Komponenten-
   Regel diese Klasse hier sonst wirkungslos gemacht. Das ist genau der
   Sinn dieser Klassen: eine bewusste, editorielle Übersteuerung des
   eingebauten Standardabstands für ein einzelnes Element. */
.frame-space-before-extra-small { margin-top: 1rem !important; }
.frame-space-before-small { margin-top: 2rem !important; }
.frame-space-before-medium { margin-top: 3.5rem !important; }
.frame-space-before-large { margin-top: 5rem !important; }
.frame-space-before-extra-large { margin-top: 7.5rem !important; }

.frame-space-after-extra-small { margin-bottom: 1rem !important; }
.frame-space-after-small { margin-bottom: 2rem !important; }
.frame-space-after-medium { margin-bottom: 3.5rem !important; }
.frame-space-after-large { margin-bottom: 5rem !important; }
.frame-space-after-extra-large { margin-bottom: 7.5rem !important; }