/* ProtoPanda Design Tokens, abgeleitet aus Figma "protoPanda-pitch" */
/* Lokal eingebundene Google Fonts (Latin-Subset, deckt Umlaute/ß ab) */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-700.woff2") format("woff2");
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-800.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/montserrat-400.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/montserrat-600.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/montserrat-700.woff2") format("woff2");
}

:root {
  /* Farben aus Figma */
  --pp-purple: #6740D4;        /* Akzent, Highlight-Chip, Zahlen, Labels */
  --pp-purple-dark: #5530BD;   /* Hover für Buttons */
  --pp-dark-blue: #0E254E;     /* Headlines, Fließtext */
  --pp-light-purple: #B796FF;  /* Chip-Hintergrund mit 30 % Deckkraft */
  --pp-green: #E1F1E3;
  --pp-green-dark: #A4CFA9;    /* Bambus, Rollen-Label */
  --pp-blue: #AAC4FF;
  --pp-blue-soft: #DDE6FA;
  --pp-blue-bright: #F2F6FF;   /* Handy-Screen in der Problem-Illustration */
  --pp-grey: #9AA3B5;          /* Illustrations-Bildunterschrift */
  --pp-white: #FFFFFF;
  --pp-ink: #0B0B0D;           /* nur Fußnoten */

  --pp-purple-30: rgba(183, 150, 255, 0.30);
  --pp-purple-45: rgba(183, 150, 255, 0.45);
  --pp-gradient-facts: linear-gradient(90deg, rgba(183,150,255,.15) 0%, rgba(221,230,250,.5) 50%, rgba(225,241,227,.5) 100%);
  --pp-gradient-line: linear-gradient(90deg, rgba(183,150,255,.3) 0%, #DDE6FA 49%, #E1F1E3 96%);

  /* Schriften */
  --pp-font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --pp-font-body: "Montserrat", system-ui, sans-serif;
  --pp-font-label: "Montserrat", system-ui, sans-serif;

  /* Typo-Skala: Slide-Werte (1920 px) auf Web übertragen */
  --pp-h-xl: clamp(3rem, 2rem + 5.5vw, 8.75rem);         /* Slide 140/150, ExtraBold 800 */
  --pp-h-m: clamp(2.5rem, 2rem + 2.5vw, 4.5rem);         /* Slide 72/80, ExtraBold 800 */
  --pp-h-s: clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem);     /* Slide 44/50, Bold 700 */
  --pp-body-l: clamp(1.25rem, 1.1rem + .6vw, 1.875rem);  /* 30/40 */
  --pp-body-m: clamp(1.0625rem, 1rem + .3vw, 1.5rem);    /* 24/28 */
  --pp-kicker: clamp(1.125rem, 1rem + .45vw, 1.625rem);  /* Montserrat Bold 26, tracking .04em */
  --pp-footnote-m: clamp(1rem, .95rem + .25vw, 1.375rem);    /* 22/24 */
  --pp-footnote-s: clamp(1rem, .95rem + .15vw, 1.25rem);     /* 20/20 SemiBold */
  --pp-label: clamp(1rem, .9rem + .3vw, 1.375rem);           /* Montserrat Bold 22, tracking .02em */

  /* Raster und Abstände */
  --pp-max: 1680px;                            /* Inhaltsbreite der Slides */
  --pp-pad: clamp(1rem, .5rem + 2.4vw, 3rem);  /* Innenabstand der Dashboard-Seiten */
  --pp-sidebar-w: 268px;
  --pp-topbar-h: 68px;
  --pp-border: #E4EBF8;
  --pp-shadow-card: 0 1px 2px rgba(9, 20, 50, .04), 0 14px 34px rgba(9, 20, 50, .04);
  --pp-gutter: clamp(1rem, 6.25vw, 7.5rem);    /* Slide-Rand 120 px */
  --pp-col-gap: clamp(2.5rem, 5.2vw, 100px);   /* Abstand linke/rechte Spalte */
  --pp-section-pad: clamp(4rem, 3rem + 5vw, 7rem);
  --pp-header-h: 76px;
  --pp-radius-chip: 100px;
  --pp-radius-highlight: 32px;
  --pp-radius-card: 16px;
  --pp-radius-box: 12px;
  --pp-shadow-phone: 16px 10px 80px rgba(9, 20, 50, .10);
  --pp-ease: cubic-bezier(.2, .7, .2, 1);
}