/* =========================================================
   SWH Geschäftsbericht 2025 — Design Tokens
   Übernehmbar in Elementor unter "Site Settings → Global Colors / Typography"
   ========================================================= */

/* =========================================================
   FONT FACES — DIN Pro (Display) + FF Meta Pro (Body)
   Lokal aus assets/fonts. Pfade relativ zu dieser Datei.
   ========================================================= */

/* --- DIN Pro (Display) --- */
@font-face {
  font-family: "DIN Pro";
  src: url("../fonts/din-pro/dinpro_light.otf") format("opentype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DIN Pro";
  src: url("../fonts/din-pro/dinpro_lightitalic.otf") format("opentype");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "DIN Pro";
  src: url("../fonts/din-pro/dinpro_regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DIN Pro";
  src: url("../fonts/din-pro/dinpro_regularitalic.otf") format("opentype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "DIN Pro";
  src: url("../fonts/din-pro/dinpro_medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DIN Pro";
  src: url("../fonts/din-pro/dinpro_mediumitalic.otf") format("opentype");
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "DIN Pro";
  src: url("../fonts/din-pro/dinpro_bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DIN Pro";
  src: url("../fonts/din-pro/dinpro_bolditalic.otf") format("opentype");
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "DIN Pro";
  src: url("../fonts/din-pro/dinpro_black.otf") format("opentype");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DIN Pro";
  src: url("../fonts/din-pro/dinpro_blackitalic.otf") format("opentype");
  font-weight: 900; font-style: italic; font-display: swap;
}

/* --- FF Meta Pro (Body) --- */
@font-face {
  font-family: "Meta Pro";
  src: url("../fonts/meta-pro/FFMetaProThin.TTF") format("truetype");
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Meta Pro";
  src: url("../fonts/meta-pro/FFMetaProThinIt.TTF") format("truetype");
  font-weight: 200; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Meta Pro";
  src: url("../fonts/meta-pro/FFMetaProLight.TTF") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Meta Pro";
  src: url("../fonts/meta-pro/FFMetaProLightIt.TTF") format("truetype");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Meta Pro";
  src: url("../fonts/meta-pro/FFMetaProBook.TTF") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Meta Pro";
  src: url("../fonts/meta-pro/FFMetaProBookIt.TTF") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Meta Pro";
  src: url("../fonts/meta-pro/FFMetaProRegular.TTF") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Meta Pro";
  src: url("../fonts/meta-pro/FFMetaProRegIt.TTF") format("truetype");
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Meta Pro";
  src: url("../fonts/meta-pro/FFMetaProMedium.TTF") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Meta Pro";
  src: url("../fonts/meta-pro/FFMetaProMedIt.TTF") format("truetype");
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Meta Pro";
  src: url("../fonts/meta-pro/FFMetaProBold.TTF") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Meta Pro";
  src: url("../fonts/meta-pro/FFMetaProBoldIt.TTF") format("truetype");
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Meta Pro";
  src: url("../fonts/meta-pro/FFMetaProBlk.TTF") format("truetype");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Meta Pro";
  src: url("../fonts/meta-pro/FFMetaProBlkIt.TTF") format("truetype");
  font-weight: 900; font-style: italic; font-display: swap;
}

:root {
  /* === Brand Colors === */
  --swh-blue:        #0061A6;   /* Primärblau — Logo, Headlines, Links */
  --swh-blue-dark:   #003D6B;   /* Dunkelblau — große Display-Headlines */
  --swh-blue-tint:   #DCEEF9;   /* Hellblauer Tint — Inhaltsboxen, Karten-Hintergrund */
  --swh-yellow:      #FFD500;   /* Akzentgelb — Pfeile, Werte-Marker */
  --swh-yellow-soft: #FFE666;   /* Gelb soft — Hover, sekundäre Akzente */
  --swh-magenta:     #E6007E;   /* Akzent-Magenta — Bildunterschriften, Hervorhebungen */
  --swh-orange:      #ef7d00;   /* Akzent-Orange — Energie-Kapitel, Highlights */
  --swh-black:       #1A1A1A;   /* Body Text */
  --swh-gray-700:    #4A4A4A;
  --swh-gray-500:    #8A8A8A;
  --swh-gray-200:    #E5E7EB;
  --swh-gray-100:    #F3F4F6;
  --swh-white:       #FFFFFF;

  /* === Semantic === */
  --color-bg:        var(--swh-white);
  --color-bg-alt:    var(--swh-blue-tint);
  --color-text:      var(--swh-black);
  --color-text-soft: var(--swh-gray-700);
  --color-heading:   var(--swh-blue-dark);
  --color-accent:    var(--swh-yellow);
  --color-link:      var(--swh-blue);

  /* === Typography === */
  --font-body:       "Meta Pro", "FF Meta", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display:    "DIN Pro", "DINPro", "DIN Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Eyebrow / kleine Versalien-Headlines im Fließtext: DIN Pro Black */
  --font-eyebrow:    var(--font-display);
  --fw-eyebrow:      900;

  --fs-xs:    0.8125rem;   /* 13px */
  --fs-sm:    0.9375rem;   /* 15px */
  --fs-base:  1.0625rem;   /* 17px — angenehm gut lesbar */
  --fs-lg:    1.25rem;     /* 20px */
  --fs-xl:    1.5rem;      /* 24px */
  --fs-2xl:   2rem;        /* 32px */
  --fs-3xl:   2.75rem;     /* 44px */
  --fs-4xl:   4rem;        /* 64px — Display Mid */
  --fs-5xl:   5.75rem;     /* 92px — Display Hero (XL) */

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.55;
  --lh-loose:  1.7;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   900;

  /* === Spacing === */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;

  /* === Layout === */
  --container-xl:   1280px;
  --container-lg:   1100px;
  --container-md:   900px;
  --container-text: 720px;
  --gutter:         clamp(1rem, 4vw, 2.5rem);

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;

  /* === Effects === */
  --shadow-sm: 0 2px 8px rgba(0, 61, 107, 0.06);
  --shadow-md: 0 8px 24px rgba(0, 61, 107, 0.10);
  --shadow-lg: 0 24px 64px rgba(0, 61, 107, 0.18);

  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* === Header === */
  --header-h: 92px;   /* mehr Höhe → CI-Schutzzone/Freiraum ums Logo (Feedback) */

  /* === Pfeil-Masken (CI-Form) — als Data-URI inline, robust bei file://, lokal & WP === */
  --mask-arrow-fill: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 41.99 61.99'><path fill='black' d='M1.83,0C.26,0-.43,1.13.28,2.52c0,0,14.54,26.34,14.54,28.47S.35,59.5.35,59.5c-.75,1.37-.09,2.48,1.47,2.48h22.13c1.57,0,3.42-1.13,4.13-2.52l13.37-25.95c.72-1.39.72-3.65,0-5.04L28.09,2.52C27.37,1.13,25.52,0,23.95,0H1.83Z'/></svg>");
  --mask-arrow-outline: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 122.19 177.77'><path fill='none' stroke='black' stroke-width='0.8' d='M3.56.4C.85.4-.34,2.35.88,4.76c0,0,42.79,78.04,42.79,84.12S1.01,173.08,1.01,173.08c-1.3,2.37-.15,4.29,2.55,4.29h69.25c2.7,0,5.89-1.95,7.13-4.35l40.93-79.77c1.23-2.4,1.23-6.31,0-8.71L79.93,4.76c-1.23-2.4-4.43-4.35-7.13-4.35H3.56Z'/></svg>");

  /* Banner-Pfeil — 3-Slice fuer variable Breite (Cap-Links + stretchbare Mitte + Cap-Rechts).
     Cap-Aspect = 30.8/90.8 ≈ 0.339. Cap-Breite skaliert proportional zur Pfeilhoehe. */
  --mask-arrow-banner-l: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30.8 90.8'><path fill='black' d='M30.8,0H2.7C.4,0-.6,1.7.4,3.7c0,0,21.3,38.6,21.3,41.7S.5,87.2.5,87.2c-1.1,2-.1,3.6,2.2,3.6h28.1V0Z'/></svg>");
  --mask-arrow-banner-r: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='252.7 0 30.8 90.8'><path fill='black' d='M282.7,41.7l-19.6-38C262,1.7,259.3,0,257,0h-4.3v90.8h4.3c2.3,0,5-1.7,6.1-3.7l19.6-38c1.1-2,1.1-5.3,0-7.4Z'/></svg>");
  --arrow-banner-cap-aspect: calc(30.8 / 90.8);

  /* Themen-Header-Hintergrundform (aus assets/img/themen-header-bg-form.svg) als Data-URI inline,
     damit's bei file:// nicht von CORS blockiert wird. Form: Rechteck mit konkavem Pfeil-Einschnitt unten links. */
  --mask-themen-header-bg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 528.06 697.36'><path fill='black' d='M516.06,0c6.63,0,12,5.37,12,12v673.36c0,6.63-5.37,12-12,12H89.58c-6.63,0-14.48-4.77-17.55-10.64L5.55,559.15c-3.06-5.88-5.55-16.02-5.55-22.64V12C0,5.37,5.37,0,12,0h504.06Z'/></svg>");
}

@media (max-width: 720px) {
  :root {
    --fs-4xl:  3rem;
    --fs-5xl:  3.5rem;
    --header-h: 76px;
  }
}