/* =====================================================================
   FAIST Design-Tokens (Ergänzung zum Elementor-Kit #6)
   Quelle für fluide Abstände, Typo-Aliase und gemeinsame Bausteine.
   Referenz = volle Breite (1440 px); alle Werte skalieren linear kleiner.
   clamp(min, max/14.4 vw, max)  ->  max ab 1440 px, min ab ~ 600-800 px.
   Die Elementor-Variablen (--e-global-*) sind auf body.elementor-kit-6
   definiert, deshalb werden die Aliase auf body gesetzt (Vererbung).
   ===================================================================== */
body {
  /* Abstände (fluid) */
  --faist-gutter:    35px;  /* Seitenrand links/rechts wie faist.com: 35 px, unter 768 px 20 px (siehe unten) */
  --faist-space-xs:  clamp(0.5rem,    0.833vw, 0.75rem);   /*  8 -> 12 px */
  --faist-space-s:   clamp(0.75rem,   1.389vw, 1.25rem);   /* 12 -> 20 px */
  --faist-space-m:   clamp(1.25rem,   2.431vw, 2.1875rem); /* 20 -> 35 px */
  --faist-space-l:   clamp(1.875rem,  4.167vw, 3.75rem);   /* 30 -> 60 px */
  --faist-space-lx:  clamp(2.5rem,    5.556vw, 5rem);      /* 40 -> 80 px (Karriere-Block) */
  --faist-space-xl:  clamp(2.8125rem, 6.25vw,  5.625rem);  /* 45 -> 90 px */
  --faist-space-xxl: clamp(3.75rem,   8.333vw, 7.5rem);    /* 60 -> 120 px */
  --faist-radius: 8px;
  --faist-content-max: var(--e-global-content-width, 1550px);

  /* Typografie-Aliase (Fluid-Tokens des Kits) */
  --faist-font:      var(--e-global-typography-e7f7308-font-family, "D-DIN Pro"), sans-serif;
  --faist-fs-eyebrow: var(--e-global-typography-6ddbd8c-font-size, clamp(1.25rem, 2.5vw, 1.875rem));
  --faist-lh-eyebrow: var(--e-global-typography-6ddbd8c-line-height, clamp(1.25rem, 2.5vw, 1.875rem));
  --faist-fs-hero:   var(--e-global-typography-8835186-font-size, clamp(2.187rem, 5vw, 4.875rem));
  --faist-lh-hero:   var(--e-global-typography-8835186-line-height, clamp(2.187rem, 5.2vw, 5.312rem));
  --faist-fs-title:  var(--e-global-typography-28f744d-font-size, clamp(1.75rem, 3vw, 2.812rem));
  --faist-lh-title:  var(--e-global-typography-28f744d-line-height, clamp(2.375rem, 3.5vw, 3.625rem));
  --faist-fs-body:   var(--e-global-typography-e7f7308-font-size, clamp(1.25rem, 1.5vw, 1.562rem));
  --faist-lh-body:   var(--e-global-typography-e7f7308-line-height, 1.4);
  --faist-fs-link:   var(--e-global-typography-366ef52-font-size, clamp(1.437rem, 2.5vw, 1.875rem));
  --faist-lh-link:   var(--e-global-typography-366ef52-line-height, clamp(2rem, 3vw, 2.625rem));
  --faist-fs-number: var(--e-global-typography-44ef72d-font-size, clamp(4.0625rem, 5.556vw, 5rem));
  --faist-lh-number: var(--e-global-typography-44ef72d-line-height, 1);
  --faist-fs-small:  var(--e-global-typography-23631c5-font-size, clamp(1.125rem, 1vw, 1.25rem));
  --faist-lh-small:  var(--e-global-typography-23631c5-line-height, clamp(1.687rem, 1.5vw, 1.875rem));
  --faist-fs-label:  var(--e-global-typography-3bd3375-font-size, clamp(1.437rem, 2vw, 1.75rem));
  --faist-lh-label:  var(--e-global-typography-3bd3375-line-height, clamp(1.725rem, 2.4vw, 2.099rem));

  /* Farben (Kit) */
  --faist-red:     var(--e-global-color-primary, #FF0827);
  --faist-red-2:   var(--e-global-color-secondary, #FF3C54);
  --faist-ink:     var(--e-global-color-text, #000000);
  --faist-white:   var(--e-global-color-9a86ecb, #FFFFFF);
  --faist-gray:    var(--e-global-color-cec1559, #ECECEC);
  --faist-surface: var(--e-global-color-7d83f61, #F7F7F7);
  --faist-muted:   var(--e-global-color-792e9c9, #4D4D4D);
  --faist-overlay: var(--e-global-color-fe66977, #00000040);

  /* FAIST-Pfeil (identisch mit dem Arrow-Button-Widget) */
  --faist-arrow-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 59 53"><path d="M59 26.4004L33.144 52.2564H28.728L52.984 28.0004H0.567957V24.8004H52.984L28.728 0.544418H33.144L59 26.4004Z"/></svg>');
}

@media (max-width: 767px) { body { --faist-gutter: 20px; } }

/* ---------- Eyebrow: "// Titel" in Rot, Fluid · Red title ---------- */
.faist-m-eyebrow {
  font-family: var(--faist-font);
  font-size: var(--faist-fs-eyebrow);
  line-height: var(--faist-lh-eyebrow);
  font-weight: 400;
  color: var(--faist-red);
  margin: 0 0 var(--faist-space-s);
}
.faist-m-eyebrow::before { content: "// "; }

/* ---------- Pfeil-Link: Text + Pfeil erscheint bei Hover (Desktop), roter Pfeil links (Mobil) ---------- */
.faist-m-link {
  --icon-scale: 0.9;
  --hover-shift: 8px;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  font-family: var(--faist-font);
  font-size: var(--faist-fs-link);
  line-height: 1.1;
  font-weight: 400;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transition: color .15s ease, transform .15s ease;
}
.faist-m-link__text { display: inline; min-width: 0; }
.faist-m-link::after {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  height: calc(1em * var(--icon-scale));
  aspect-ratio: 59 / 53;
  margin-left: 10px;
  margin-top: -0.12em;
  opacity: 0;
  transform: translateX(calc(var(--hover-shift) * -1));
  transition: opacity .15s ease, transform .15s ease;
  background-color: currentColor;
  -webkit-mask: var(--faist-arrow-mask) no-repeat center / contain;
          mask: var(--faist-arrow-mask) no-repeat center / contain;
}
.faist-m-link:hover::after,
.faist-m-link:focus-visible::after { opacity: 1; transform: translateX(0); }
.faist-m-link:focus { outline: none; }
.faist-m-link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (max-width: 768px) {
  .faist-m-link {
    display: grid;
    grid-template-columns: 1.25em minmax(0, auto);
    column-gap: .5em;
    align-items: center;
    line-height: 1.25;
  }
  .faist-m-link::before {
    content: "";
    grid-column: 1; grid-row: 1;
    height: 1em; aspect-ratio: 59 / 53;
    margin-top: -5px;
    background-color: var(--faist-red);
    -webkit-mask: var(--faist-arrow-mask) no-repeat center / contain;
            mask: var(--faist-arrow-mask) no-repeat center / contain;
  }
  .faist-m-link__text { grid-column: 2; grid-row: 1; }
  .faist-m-link::after { display: none; }
}

/* ---------- Fokus / Bewegung ---------- */
.faist-m-focusable:focus-visible { outline: 2px solid var(--faist-red); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .faist-m-eyebrow, .faist-m-link, [class^="faist-m-"], [class*=" faist-m-"] { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- Flächen & Kacheln (Referenz Startseite, gemessen 2026-09-08) ----------
   Kennzahl-Kachel „FAIST Weltweit“: Weiß, Radius 20 px, Innenabstand 20 px auf #ECECEC.
   Inhaltsflächen (Produkt-Infokarte 30 px, Rechtsflächen 50 px, Karriere-Block 80 px): Radius 0.
   Alles andere: Radius 0, keine Schatten, Trennlinien 1 px #ECECEC. */
body {
  --faist-tile-radius: 20px;                              /* nur Kennzahl-Kacheln */
  --faist-pad-s:  20px;                                   /* kleine Kachel */
  --faist-pad-m:  clamp(1.25rem, 2.083vw, 1.875rem);      /* 20 -> 30 px  Infokarte */
  --faist-pad-l:  clamp(1.875rem, 3.472vw, 3.125rem);     /* 30 -> 50 px  Rechtsfläche */
  --faist-pad-xl: clamp(2.5rem, 5.556vw, 5rem);           /* 40 -> 80 px  großer Block */
  --faist-line:   1px solid var(--faist-gray);
  --faist-icon-size: clamp(3.5rem, 6.944vw, 6.25rem);     /* 56 -> 100 px wie Produkt-Tabs */
}

/* ---------- Haus-Icon (Hairline, schwarz, offener Kreis) ---------- */
.faist-m-icon {
  display: inline-block;
  width: var(--faist-icon-size);
  height: var(--faist-icon-size);
  flex: 0 0 auto;
  color: var(--faist-ink);
  line-height: 0;
}
.faist-m-icon svg { display: block; width: 100%; height: 100%; overflow: visible; }
.faist-m-icon--s { --faist-icon-size: clamp(2.5rem, 4.167vw, 3.75rem); }  /* 40 -> 60 px */