/**
 * tokens.css — Layout, Typography & Color tokens
 * Split from style.css 2026-04-02
 */

/* =========================================
   LAYOUT TOKENS
   ========================================= */

:root {
  --borderstrength: 6px;
  --gridstrength: 48px;
  --scalefactor-line-height: 1.25;
  --scalefactor-line-height-big: 1.5;
  --scalefactor-font-size: 1;
  --content-max-width: 1970px;
}
@media only screen and (max-width: 1024px) {
  :root {
    --borderstrength: 5px;
    --gridstrength: 24px;
  }
}
@media only screen and (max-width: 768px) {
  :root {
    --borderstrength: 4px;
    --gridstrength: 24px;
  }
}
@media only screen and (max-width: 480px) {
  :root {
    --borderstrength: 3px;
    --gridstrength: 12px;
  }
}

/* Breakpoint placeholders */
@media only screen and (max-width: 320px) {}
@media only screen and (min-width: 321px) and (max-width: 480px) {}
@media only screen and (min-width: 481px) and (max-width: 768px) {}
@media only screen and (min-width: 769px) and (max-width: 1024px) {}
@media only screen and (min-width: 1025px) and (max-width: 1200px) {}
@media only screen and (min-width: 1201px) and (max-width: 1440px) {}
@media only screen and (min-width: 1441px) {}

/* =========================================
   TYPOGRAPHY TOKENS
   ========================================= */

:root {
  /* Viewport-Bereiche */
  --typo-vw-mobile-min: 480;
  --typo-vw-mobile-max: 768;
  --typo-vw-tablet-min: 768;
  --typo-vw-tablet-max: 1024;
  --typo-vw-desktop-min: 1025;
  --typo-vw-desktop-max: 1825;
  /* globale Faktoren */
  --scalefactor-font-size: 1;
  --scalefactor-line-height: 1.25; /* Headings */
  --scalefactor-line-height-big: 1.5; /* Body */
  /* p */
  --p-min-desktop: 12;
  --p-max-desktop: 20;
  --p-min-tablet: 12;
  --p-max-tablet: 16;
  --p-mobile: 16;
  --p-large: 20;
  /* H1 */
  --h1-min-desktop: 30;
  --h1-max-desktop: 40;
  --h1-min-tablet: 30;
  --h1-max-tablet: 34;
  --h1-mobile: 30;
  --h1-large: 40;
  /* H2 */
  --h2-min-desktop: 25;
  --h2-max-desktop: 36;
  --h2-min-tablet: 25;
  --h2-max-tablet: 32;
  --h2-mobile: 25;
  --h2-large: 36;
  /* H3 */
  --h3-min-desktop: 22;
  --h3-max-desktop: 32;
  --h3-min-tablet: 22;
  --h3-max-tablet: 24;
  --h3-mobile: 22;
  --h3-large: 32;
  /* H4–H6 (Desktop-Spanne + fixe Mobile-Werte) */
  --h4-min-desktop: 20;
  --h4-max-desktop: 30;
  --h4-mobile: 20;
  --h4-large: 30;
  --h5-min-desktop: 19;
  --h5-max-desktop: 28;
  --h5-mobile: 19;
  --h5-large: 28;
  --h6-min-desktop: 18;
  --h6-max-desktop: 26;
  --h6-mobile: 18;
  --h6-large: 26;
}

/* Helper: Line-Heights immer relativ zur Schriftgröße */
#technikpr p {
  line-height: calc(var(--scalefactor-line-height-big) * 1em);
  letter-spacing: 0;
}
#technikpr h1, #technikpr h2, #technikpr h3, #technikpr h4, #technikpr h5, #technikpr h6 {
  line-height: calc(var(--scalefactor-line-height) * 1em);
  letter-spacing: 0;
}

/* =========================================
   DESKTOP FLUID 1025–1825px
   ========================================= */
#technikpr  {
  font-size: calc((var(--p-min-desktop) * 1px + (var(--p-max-desktop) - var(--p-min-desktop)) * ((100vw - var(--typo-vw-desktop-min) * 1px) / (var(--typo-vw-desktop-max) - var(--typo-vw-desktop-min)))) * var(--scalefactor-font-size));
}
#technikpr h1 {
  font-size: calc((var(--h1-min-desktop) * 1px + (var(--h1-max-desktop) - var(--h1-min-desktop)) * ((100vw - var(--typo-vw-desktop-min) * 1px) / (var(--typo-vw-desktop-max) - var(--typo-vw-desktop-min)))) * var(--scalefactor-font-size));
}
#technikpr h2 {
  font-size: calc((var(--h2-min-desktop) * 1px + (var(--h2-max-desktop) - var(--h2-min-desktop)) * ((100vw - var(--typo-vw-desktop-min) * 1px) / (var(--typo-vw-desktop-max) - var(--typo-vw-desktop-min)))) * var(--scalefactor-font-size));
}
#technikpr h3 {
  font-size: calc((var(--h3-min-desktop) * 1px + (var(--h3-max-desktop) - var(--h3-min-desktop)) * ((100vw - var(--typo-vw-desktop-min) * 1px) / (var(--typo-vw-desktop-max) - var(--typo-vw-desktop-min)))) * var(--scalefactor-font-size));
}
#technikpr h4 {
  font-size: calc((var(--h4-min-desktop) * 1px + (var(--h4-max-desktop) - var(--h4-min-desktop)) * ((100vw - var(--typo-vw-desktop-min) * 1px) / (var(--typo-vw-desktop-max) - var(--typo-vw-desktop-min)))) * var(--scalefactor-font-size));
}
#technikpr h5 {
  font-size: calc((var(--h5-min-desktop) * 1px + (var(--h5-max-desktop) - var(--h5-min-desktop)) * ((100vw - var(--typo-vw-desktop-min) * 1px) / (var(--typo-vw-desktop-max) - var(--typo-vw-desktop-min)))) * var(--scalefactor-font-size));
}
#technikpr h6 {
  font-size: calc((var(--h6-min-desktop) * 1px + (var(--h6-max-desktop) - var(--h6-min-desktop)) * ((100vw - var(--typo-vw-desktop-min) * 1px) / (var(--typo-vw-desktop-max) - var(--typo-vw-desktop-min)))) * var(--scalefactor-font-size));
}

/* =========================================
   TABLET 768–1024px
   ========================================= */
@media (max-width: 1024px) and (min-width: 768px) {
  #technikpr  {
    font-size: calc((var(--p-min-tablet) * 1px + (var(--p-max-tablet) - var(--p-min-tablet)) * ((100vw - var(--typo-vw-tablet-min) * 1px) / (var(--typo-vw-tablet-max) - var(--typo-vw-tablet-min)))) * var(--scalefactor-font-size));
  }
  #technikpr h1 {
    font-size: calc((var(--h1-min-tablet) * 1px + (var(--h1-max-tablet) - var(--h1-min-tablet)) * ((100vw - var(--typo-vw-tablet-min) * 1px) / (var(--typo-vw-tablet-max) - var(--typo-vw-tablet-min)))) * var(--scalefactor-font-size));
  }
  #technikpr h2 {
    font-size: calc((var(--h2-min-tablet) * 1px + (var(--h2-max-tablet) - var(--h2-min-tablet)) * ((100vw - var(--typo-vw-tablet-min) * 1px) / (var(--typo-vw-tablet-max) - var(--typo-vw-tablet-min)))) * var(--scalefactor-font-size));
  }
  #technikpr h3 {
    font-size: calc((var(--h3-min-tablet) * 1px + (var(--h3-max-tablet) - var(--h3-min-tablet)) * ((100vw - var(--typo-vw-tablet-min) * 1px) / (var(--typo-vw-tablet-max) - var(--typo-vw-tablet-min)))) * var(--scalefactor-font-size));
  }
  #technikpr h4 {
    font-size: calc(var(--h4-mobile) * 1px * var(--scalefactor-font-size));
  }
  #technikpr h5 {
    font-size: calc(var(--h5-mobile) * 1px * var(--scalefactor-font-size));
  }
  #technikpr h6 {
    font-size: calc(var(--h6-mobile) * 1px * var(--scalefactor-font-size));
  }
}

/* =========================================
   MOBILE 480–768px
   ========================================= */
@media (max-width: 768px) and (min-width: 480px) {
  #technikpr {
    font-size: calc(var(--p-mobile) * 1px * var(--scalefactor-font-size));
  }
  #technikpr h1 {
    font-size: calc((var(--h1-mobile) * 1px + (var(--h1-max-tablet) - var(--h1-mobile)) * ((100vw - var(--typo-vw-mobile-min) * 1px) / (var(--typo-vw-mobile-max) - var(--typo-vw-mobile-min)))) * var(--scalefactor-font-size));
  }
  #technikpr h2 {
    font-size: calc((var(--h2-mobile) * 1px + (var(--h2-max-tablet) - var(--h2-mobile)) * ((100vw - var(--typo-vw-mobile-min) * 1px) / (var(--typo-vw-mobile-max) - var(--typo-vw-mobile-min)))) * var(--scalefactor-font-size));
  }
  #technikpr h3 {
    font-size: calc((var(--h3-mobile) * 1px + (var(--h3-max-tablet) - var(--h3-mobile)) * ((100vw - var(--typo-vw-mobile-min) * 1px) / (var(--typo-vw-mobile-max) - var(--typo-vw-mobile-min)))) * var(--scalefactor-font-size));
  }
  #technikpr h4 {
    font-size: calc(var(--h4-mobile) * 1px * var(--scalefactor-font-size));
  }
  #technikpr h5 {
    font-size: calc(var(--h5-mobile) * 1px * var(--scalefactor-font-size));
  }
  #technikpr h6 {
    font-size: calc(var(--h6-mobile) * 1px * var(--scalefactor-font-size));
  }
}

/* =========================================
   SMALL MOBILE ≤480px
   ========================================= */
@media (max-width: 480px) {
  #technikpr {
    font-size: calc(var(--p-mobile) * 1px * var(--scalefactor-font-size));
  }
  #technikpr h1 {
    font-size: calc(var(--h1-mobile) * 1px * var(--scalefactor-font-size));
  }
  #technikpr h2 {
    font-size: calc(var(--h2-mobile) * 1px * var(--scalefactor-font-size));
  }
  #technikpr h3 {
    font-size: calc(var(--h3-mobile) * 1px * var(--scalefactor-font-size));
  }
  #technikpr h4 {
    font-size: calc(var(--h4-mobile) * 1px * var(--scalefactor-font-size));
  }
  #technikpr h5 {
    font-size: calc(var(--h5-mobile) * 1px * var(--scalefactor-font-size));
  }
  #technikpr h6 {
    font-size: calc(var(--h6-mobile) * 1px * var(--scalefactor-font-size));
  }
}

/* =========================================
   LARGE DESKTOP ≥1826px
   ========================================= */
@media (min-width: 1826px) {
  #technikpr {
    font-size: calc(var(--p-large) * 1px * var(--scalefactor-font-size));
  }
  #technikpr h1 {
    font-size: calc(var(--h1-large) * 1px * var(--scalefactor-font-size));
  }
  #technikpr h2 {
    font-size: calc(var(--h2-large) * 1px * var(--scalefactor-font-size));
  }
  #technikpr h3 {
    font-size: calc(var(--h3-large) * 1px * var(--scalefactor-font-size));
  }
  #technikpr h4 {
    font-size: calc(var(--h4-large) * 1px * var(--scalefactor-font-size));
  }
  #technikpr h5 {
    font-size: calc(var(--h5-large) * 1px * var(--scalefactor-font-size));
  }
  #technikpr h6 {
    font-size: calc(var(--h6-large) * 1px * var(--scalefactor-font-size));
  }
}

/* =========================================
   COLOR TOKENS
   ========================================= */

:root {
  /* Primary */
  --technikpr-green: #8ebf1d;
  --technikpr-black: #000;
  --technikpr-white: #fff;
  /* Secondary */
  --grey-10: #e5e5e5;
  --grey-20: #cccccc;
  --grey-30: #b3b3b3;
  --grey-40: #999999;
  --grey-50: #808080;
  --grey-60: #666666;
  --grey-70: #4d4d4d;
  --grey-80: #333333;
  --grey-90: #1a1a1a;
  /* Standard */
  --white: #fff;
  --black: #000;
}