/* ==========================================================================
   variables.css – Design Tokens
   - Global tokens + component tokens
   ========================================================================== */

:root {

  /* ========================================================================
     Global tokens
     ======================================================================== */

  /* ------------------------------------------------------------------------
     Colors
     ------------------------------------------------------------------------ */
  --c-marine: #0a1e3c;
  --c-blue:   #4682be;
  --c-gray:   #ededed;
  --c-neon:   #ebff73;

  /* Backgrounds */
  --c-bg-light: var(--c-gray);
  --c-bg-dark:  var(--c-marine);

  /* Text colors */
  --c-text-on-light: var(--c-marine);
  --c-text-on-dark:  var(--c-gray);
  --c-text-accent:   var(--c-blue);

  /* Semantic */
  --c-btn-bg: var(--c-neon);

  /* echtes Weiß für Produkt- & Partnerbilder */
  --c-media-bg: #fff;

  /* ------------------------------------------------------------------------
     Typography
     ------------------------------------------------------------------------ */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* Body */
  --fs-body: clamp(1.0625rem, 1.875vw, 1.125rem);
  --lh-body: 1.5;
  --ls-body: 0;

   /* Footer */
  --fs-footer: 1rem;
  --lh-footer: 1.5;
  --ls-footer: 0;
	
  /* Headings */
  --fs-h1: 2rem;
  --lh-h1: 1.15;
  --ls-h1: -0.01em;

  --fs-h2: clamp(1.375rem, 2vw, 1.75rem);
  --lh-h2: 1.3;
  --ls-h2: -0.005em;

  --fs-h3: clamp(1.375rem, 2vw, 1.75rem);
  --lh-h3: 1.3;
  --ls-h3: 0.02em;

  /* Measures */
  --text-max: 68ch;
  --measure: var(--text-max);

  /* Helpers */
  --lh-base: var(--lh-body);
  --lh-tight: 1.1;
  --ls-wide: 0.05em;

  /* Weights */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
	
  --link-underline: 0.1rem ;
  --link-underline-offset: 0.2rem;

  /* ========================================================================
     Layout
     ======================================================================== */

  /* Container */
  --container-max: 1652px;
  --container-pad: clamp(1.5rem, 4vw, 3rem);

  /* Header / Footer */
  --space-header-y: clamp(16px, 2.5vw, 32px);
  --space-footer-y: clamp(32px, 6vw, 96px);
	
  /* ------------------------------------------------------------------------
     Sections – Außenabstände (Rhythmus)
     ------------------------------------------------------------------------ */

  /* Basis-Gutter */
  --g-2: clamp(1rem, 2vw, 20px);
  --g-3: calc(var(--g-2) * 3);

  /* Default-Section-Abstand */
  --space-section-default: var(--g-2);

  /* Varianten */
  --space-section-tight: clamp(3rem, 4vw, 5rem);
  --space-section-loose: clamp(8rem, 10vw, 12rem);

  /* ------------------------------------------------------------------------
     Block / Content-Elemente – Innenabstände (generisch)
     ------------------------------------------------------------------------ */

  /* Design-Referenz für große Boxen (CTA, FAQ, etc.) */
  --space-section-y: clamp(4rem, 6vw, 6rem);
  --space-section-y-2: calc(var(--space-section-y) * 2);

  /* Default-Innenabstände für Mask-Elemente */
  --space-block-inset-top: var(--space-section-y);
  --space-block-inset-bottom: var(--space-section-y);

  /* ------------------------------------------------------------------------
     Spacing & Radius
     ------------------------------------------------------------------------ */
  --s-1: clamp(0.75rem, 2vw, 1.25rem);
  --s-2: clamp(1rem, 3vw, 2rem);

  --r-1: clamp(1rem, 2vw, 20px);

  /* ------------------------------------------------------------------------
     Icons (Mask-SVGs)
     ------------------------------------------------------------------------ */
  --icon-check: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M7%2012.5l3%203%207-7%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E");

  --icon-cross: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M7%207l10%2010%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M17%207L7%2017%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E");

  --icon-arrow-right: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M5%2012h14%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20vector-effect%3D%22non-scaling-stroke%22/%3E%3Cpath%20d%3D%22M13%206l6%206-6%206%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20vector-effect%3D%22non-scaling-stroke%22/%3E%3C/svg%3E");
	
	--icon-link: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20d%3D%22m11.077%2015%20.991-1.416a.75.75%200%201%201%201.229.86l-1.148%201.64a.8.8%200%200%201-.217.206%205.251%205.251%200%200%201-8.503-5.955.7.7%200%200%201%20.12-.274l1.147-1.639a.75.75%200%201%201%201.228.86L4.933%2010.7l.006.003a3.75%203.75%200%200%200%206.132%204.294zm5.494-5.335a.8.8%200%200%201-.12.274l-1.147%201.639a.75.75%200%201%201-1.228-.86l.86-1.23a3.75%203.75%200%200%200-6.144-4.301l-.86%201.229a.75.75%200%200%201-1.229-.86l1.148-1.64a.8.8%200%200%201%20.217-.206%205.251%205.251%200%200%201%208.503%205.955m-4.563-2.532a.75.75%200%200%201%20.184%201.045l-3.155%204.505a.75.75%200%201%201-1.229-.86l3.155-4.506a.75.75%200%200%201%201.045-.184%22%20fill%3D%22black%22/%3E%3C/svg%3E");

  /* Default: kein Icon */
  --btn-icon-mask: none;

  /* ------------------------------------------------------------------------
     Social Media Icons
     ------------------------------------------------------------------------ */	
  --icon-facebook: url('/fileadmin/SocialMediaIcons/facebook.svg');
  --icon-linkedin: url('/fileadmin/SocialMediaIcons/linkedin.svg');
  --icon-youtube: url('/fileadmin/SocialMediaIcons/youtube.svg');
  --icon-instagram: url('/fileadmin/SocialMediaIcons/instagram.svg');	



  /* ------------------------------------------------------------------------
     Buttons
     ------------------------------------------------------------------------ */
  --btn-font-size: .9375rem;
  --btn-line-height: 1;
  --btn-letter-spacing: 0.025em;

  /* Core size (Button & Icon identisch) */
  --btn-size: 3.5em;

  /* Shape */
  --btn-radius: 999px;

  /* Spacing */
  --btn-text-pad-x: 2em;
  --btn-icon-gap: 0.55em;

  /* Arrow */
  --btn-arrow-size: 3.5em;
  --btn-arrow-rotate-start: -45deg;
  --btn-arrow-rotate-hover: 0deg;

  /* Default Button (neutral) */
  --btn-bg: transparent;
  --btn-text: currentColor;
  --btn-bg-alpha: 100%;

  /* Motion */
  --btn-transition: 180ms ease;

  /* ------------------------------------------------------------------------
     Media / Aspect ratios
     ------------------------------------------------------------------------ */
  --ar-1:   20 / 9;
  --ar-644: 3 / 4;
  --ar-43:  4 / 3;
  --ar-21:  2 / 1;

  /* ========================================================================
     Component tokens
     ======================================================================== */

  /* IconList */
  --iconList-glyph: var(--icon-check);
  --iconList-glyph-scale: 130%;

  /* MediaList */
  --mediaList-thumb: clamp(110px, 11.5vw, 126px);
  --mediaList-item-gap: 1rem;
  --mediaList-grid-gap: 5rem 1rem;
  --mediaList-text-btn-gap: 0.8em;

   /* CTA Block */
  --cta-headline-size: clamp(2.5rem, 5.5vw, 6.125rem);
	
  /* CTA Block 2 */
  --cta2-max: 52ch;
  --cta2-headline-size: clamp(2rem, 4vw, 3rem);
  --cta2-eyebrow-size: clamp(1.125rem, 2vw, 1.25rem);
  --cta2-letter-spacing: 0.01em;
  --cta2-eyebrow-lh: 3;
  --cta2-lh: 1.3;

  /* Grid555 Nummer */
  --grid555-number: clamp(1.875rem, 3.5vw, 2.375rem);
	
  /* FAQ Accordion */
  --faqAcc-head-gap: clamp(6rem, 10vw, 15rem);
	
  /* Glossary */
  --glossaryAcc-head-gap: 3rem;

  /* Grid 77 */
  --grid77-gap: var(--g-3);
  --grid77-spacer: clamp(1rem, 2vw, 2rem);

  /* Grid 68 – Kontakt / Anfahrt */
  --contact68-map-h: clamp(320px, 32vw, 640px);

  /* Header / Navigation */
  --header-z: 5000;
  --nav-gap: var(--g-2);
  --nav-main-bg: #fff;
  --nav-main-fg: var(--c-marine);
	
  /* PageIntro */
  --pageIntro-max: 700px;
  --pageIntro68-text-pad-top: clamp(9rem, 15vw, 16rem);

  --header-h-desktop: 180px;
  /* Mobile Header */
  --mobHeader-h: calc(var(--header-logo-height) + (var(--container-pad) * 2));
  --mobNav-gap: calc(var(--nav-gap) * 0.6);
	
  /* PageIntro – optischer Abstand nach unten (Bottom68) */
  --pageIntro-bottom-space: clamp(var(--sp-5), 10vw, var(--sp-8));

/* -------------------------------------------------------------------------- */
/* Header / Branding                                                           */
/* -------------------------------------------------------------------------- */

--header-logo-height: clamp(48px, 5vw, 80px);

  --sp-0: 0;
  --sp-1: clamp(1rem, 2vw, 1.25rem);
  --sp-2: clamp(2rem, 4vw, 2.5rem);
  --sp-3: clamp(3rem, 6vw, 3.75rem);
  --sp-4: clamp(4rem, 8vw, 5rem);
  --sp-5: clamp(5rem, 10vw, 6.25rem);
  --sp-6: clamp(6rem, 12vw, 7.5rem);
  --sp-7: clamp(7rem, 14vw, 8.75rem);
  --sp-8: clamp(8rem, 16vw, 10rem);
  --sp-9: clamp(8rem, 12vw, 12rem);


}