@font-face {
  font-family: "Source Sans 3";
  src:
    local("Source Sans 3"),
    url("/includes/fonts/Source_Sans_3/SourceSans3-VariableFont_wght.ttf") format("truetype")
}

:root {
  /* Schriftart Preset */
  --cpd-font-family: "Source Sans 3", sans-serif;
  


  /* Hauptfarben */
  --cpd-col-primary: #00FF8C; /* Light Green ~ CD */
  --cpd-col-secondary: #0E0363; /* Dark Blue ~ CD*/

  /* Alt */
  --cpd-col-secondary90: red;
  --cpd-col-secondary80: red;
  --cpd-col-secondary70: red;
  --cpd-col-secondary60: red;
  --cpd-col-secondary50: red;
  --cpd-col-secondary40: red;
  --cpd-col-secondary30: red;
  --cpd-col-secondary20: red;
  --cpd-col-secondary10: red;


  /* Basis */
  --cpd-col-basis-headline: #062438;

  --cpd-col-basis100: #093D5D; /* Deine beibehaltene Grundfarbe */
  --cpd-col-basis90: #1B4A6C;
  --cpd-col-basis80: #2E587B;
  --cpd-col-basis70: #41668A;
  --cpd-col-basis60: #547499;
  --cpd-col-basis50: #6783A8;
  --cpd-col-basis40: #7A91B7;
  --cpd-col-basis30: #8DA0C6; /* Angepasst, um den Übergang zu glätten */
  --cpd-col-basis20: #ADC3E6; /* Wieder etwas dunkler als zuvor, mit mehr Blauanteil */
  --cpd-col-basis10: #CCD7F0; /* Beibehalten oder leicht angepasst für bessere Harmonie */


  /* Blau */
  --cpd-col-blau-dark: #341bca;
  --cpd-col-blau-normal: #8573f1;
  --cpd-col-blau-light: #d4cdff;

  /* Grün */
  --cpd-col-gruen-dark: #0a4b39;
  --cpd-col-gruen-normal: #46ab8f;
  --cpd-col-gruen-light: #caefe5;

  /* Rot */
  --cpd-col-rot-dark: #620032;
  --cpd-col-rot-normal: #c40b69;
  --cpd-col-rot-light: #ffa2d2;

  /* Schrift */
  --cpd-col-schrift-dark: #111430;
  --cpd-col-schrift-normal: #707499;
  --cpd-col-schrift-light: #f4f5ff;




  /* Schwarz */
  --cpd-col-black100: #000000;
  --cpd-col-black90: #1a1a1a;
  --cpd-col-black80: #333333;
  --cpd-col-black70: #4d4d4d;
  --cpd-col-black60: #666666;
  --cpd-col-black50: #808080;
  --cpd-col-black40: #999999;
  --cpd-col-black30: #b3b3b3;
  --cpd-col-black20: #cccccc;
  --cpd-col-black10: #e6e6e6;


  /* Weiß */
  --cpd-col-background-light: #f9f9f9; /* White ~ CD */
  --cpd-col-background: #ededed; /* White ~ CD */
  --cpd-col-background-hover: #d7d7d7; /* White ~ CD */
  --cpd-col-white: #ffffff;


  /* Akzentfarben */
  --cpd-col-accent-1: #3CB8FF; /* Blue ~ Piction Blue */
  --cpd-col-accent-2: #4B5F2A; /* Green ~ Dark Olive */
  --cpd-col-accent-3: #A2B55B; /* Yellow ~ Olive */
  --cpd-col-accent-4: #E0521A; /* Orange ~ Flame */
  --cpd-col-accent-5: #73153B; /* Red ~ Tyrian Purple */


  /* Infofarben */
  --cpd-col-info: #00A3FF; /* Info ~ CD */
  --cpd-col-success: #00FF8C; /* Success ~ CD */
  --cpd-col-warning: #FFB800; /* Warning ~ CD */
  --cpd-col-error: #FF4C4C; /* Error ~ CD */
  --cpd-col-grey: #9E9E9E; /* Grey ~ CD */



  /* Box-Shadow */
  --cpd-box-shadow-light: 0 0 8px rgba(0, 0, 0, 0.08);
  --cpd-box-shadow-light-hover: 0 0 16px rgba(0, 0, 0, 0.16);

  --cpd-box-shadow: 0 1px 12px rgba(0, 0, 0, 0.08);
  --cpd-box-shadow-hover: 0 2px 20px rgba(0, 0, 0, 0.16);

  --cpd-box-shadow-extra: 0 2px 16px rgba(0, 0, 0, 0.08);
  --cpd-box-shadow-extra-hover: 0 4px 24px rgba(0, 0, 0, 0.16);

  --cpd-box-shadow-zentral: 0px 6px 12px -6px rgba(0, 0, 0, 0.5), 0px 8px 16px -12px rgba(0, 0, 0, 0.5);
  --cpd-box-shadow-zentral-hover: 0px 6px 12px -6px rgba(0, 0, 0, 0.5), 0px 8px 16px -12px rgba(0, 0, 0, 0.5);



  /* Seitenbreite */
  --seitenbreite: 1304px; /* max-width */
  --seitenbreite-simple: 1200px; /* min-width */

  /* Spacing */
  --section-padding: 32px 48px; /* padding */
  --spacing-seiten-min: 50px; /* min margin - default Wert */
  --spacing-seiten: minmax(var(--spacing-seiten-min), calc((100vw - var(--seitenbreite)) / 2)); /* margin */
  
  --spacing-inner-padding-width: 52px;
  --spacing-inner-padding-height: 40px;
  /* Kombiniert Höhe und Breite zu Padding-Variable */
  --spacing-inner-padding: var(--spacing-inner-padding-height) var(--spacing-inner-padding-width);

  --spacing-header-top: 46px;
  --spacing-header-bottom: 90px;
  --spacing-header-all: 136px;
  --spacing-header-top-sticky: -46px;
}

/* Responsive Anpassungen */
@media screen and (max-width: 1224px) {
  :root {
    --spacing-seiten-min: 40px;
    --spacing-inner-padding-height: 36px;
    --spacing-inner-padding-width: 44px;
    --spacing-inner-padding: var(--spacing-inner-padding-height) var(--spacing-inner-padding-width);
  }
}

@media screen and (max-width: 768px) {
  :root {
    --spacing-seiten-min: 28px;
    --spacing-inner-padding-height: 28px;
    --spacing-inner-padding-width: 36px;
    --spacing-inner-padding: var(--spacing-inner-padding-height) var(--spacing-inner-padding-width);
  }
}

@media screen and (max-width: 480px) {
  :root {
    --spacing-seiten-min: 16px;
    --spacing-inner-padding-height: 20px;
    --spacing-inner-padding-width: 24px;
    --spacing-inner-padding: var(--spacing-inner-padding-height) var(--spacing-inner-padding-width);
  }
}

@media screen and (max-width: 320px) {
  :root {
    --spacing-seiten-min: 8px;
    --spacing-inner-padding-height: 20px;
    --spacing-inner-padding-width: 16px;
    --spacing-inner-padding: var(--spacing-inner-padding-height) var(--spacing-inner-padding-width);
  }
}