/*! Design-Token */

/*
 * Every colour, size and width the theme reaches for lives here, and only here.
 * The file is loaded on the frontend and handed to every block editor screen, so a rule in the editor can use the same token as the rule it mirrors in the frontend.
 */

:root {
  --global-hoou-font-family: "Poppins", "Verdana", sans-serif;

  /*Breite der Inhaltsspalte auf Detailseiten, im Frontend und im Editor-Canvas*/
  --hoou-content-max-width: 850px;

  --hoou-weiss: #ffffff;
  
  --hoou-beige-100: #f5f5f5;
  --hoou-hellbeige: #f0f0f2;
  
  --hoou-grau-50: #f9fafb;
  --hoou-grau-100: #eceff1;
  --hoou-grau-200: #e3e8ea;
  --hoou-grau-300: #d7dde1;
  --hoou-hellgrau: #e8ebef;
  --hoou-grau: #c3ccd2;
  --hoou-grau-600: #b1babf;
  --hoou-grau-700: #8a9195;
  --hoou-grau-800: #6b7074;
  --hoou-grau-900: #525658;
  
  --hoou-hellblau: #eef4fc;
  --hoou-mittelblau: #9eb7d2;
  --hoou-extrablau: #7a91c1;
  --hoou-extrablau-600: #6f84b0;
  --hoou-extrablau-700: #576789;
  --hoou-extrablau-800: #43506a;
  --hoou-blau: #1e1c39;
  --light-grayish-blue: #e6eaf7; /* Fliederfarbe für Hintergründe im Menü */
  
  --hoou-extragruen: #88c8b4;
  --hoou-extragruen-300: #afdacd;
  --hoou-lila: #C1C9E7;
  --hoou-helllila: #e3e6f5;
	
	--hoou-rot-600: #d73350;

  /* Keine Einheit, da später in Pixel umgewandelt */
  --min-page-width: 375; 
  --max-page-width: 1440;
  --min-zeplin-page-width: 375; /*used in several classes, please check bevore adjustment or deletion*/
  --max-zeplin-page-width: 1440; /*used in several classes, please check bevore adjustment or deletion*/

  --min-content-width: 335;
  --max-content-width: 1290;

  --min-padding-bottom: 40;
  --max-padding-bottom: 60;
  --min-padding-top: 60; 
  --max-padding-top: 80;

  --min-backtotop-height: 48;
  --min-backtotop-width: 60;
  --min-backtotop-right: 18;
  --max-backtotop-height: 60;
  --max-backtotop-width: 80;
  --max-backtotop-right: 75;

  --min-videoblockheadline-margin-bottom: 10;
  --max-videoblockheadline-margin-bottom: 15;
  --videoblocksubheadline-margin-bottom: 30.85;
  --max-videoblock-width: 1068;

  --min-podcastblock-margin-bottom: 0;
  --max-podcastblock-margin-bottom: 10;

  --min-eventblockheadline-margin-bottom: 10;
  --min-eventblocksubheadline-margin-bottom: 20;
  --max-eventblockheadline-margin-bottom: 15;
  --max-eventblocksubheadline-margin-bottom: 40;
  --max-event-width: 1069;

  --min-faqheadline-margin-bottom: 8;
  --min-faqsubheadline-margin-bottom: 30;
  --max-faqheadline-margin-bottom: 15;
  --max-faqsubheadline-margin-bottom: 36;
  --max-faqblock-width: 831;

  --min-portfolio-header-margin-bottom: 38;
  --max-portfolio-header-margin-bottom: 50; 

  --min-newsletter-padding-top: 20;
  --min-newsletter-padding-bottom: 30;
  --min-newsletter-width: 272;
  --max-newsletter-padding-top: 56;
  --max-newsletter-padding-bottom: 60;
  --max-newsletter-width: 885;

  --max-top-nav-page-width: 2560;
  --max-top-nav-width: calc(1290 / 1440 * 2560);

  --max-cover-page-width: 2560;
  --max-cover-width: calc(1290 / 1440 * 2560);

  --max-footer-width: 1288;

  --min-podcastplayerheadline-padding-top: 50;
  --max-podcastplayerheadline-padding-top: 109;

  --min-episode-detail-episode-wrapper-margin-bottom: 80;
  --max-episode-detail-episode-wrapper-margin-bottom: 92;

  --max-events-calendar-headline-wrapper-width: 820;

  --testimonial-card-width: 260;

  /* Variables for podcast-cards and course-cards */
  --card-title-line-height: 22px; 
  --card-max-title-lines: 3;
  --card-summary-line-height: 20px;
  --card-max-summary-lines: 5;
  --min-single-podcast-page-more-episodes-last-div-margin-bottom: 60;
  --max-single-podcast-page-more-episodes-last-div-margin-bottom: 120;

  /*font-belongin-variables*/
  --global-hoou-font-color: var(--hoou-blau);
  --global-hoou-h1-font-color: var(--hoou-blau);
  --global-hoou-h1-font-weight: 700;
  --global-hoou-h1-font-size: 40px;
  --global-hoou-h1-font-style: normal;
  --global-hoou-h1-line-height: 58px;
  --zeplin-fontsize-desktop-h1: 40;
  --zeplin-fontsize-mobile-h1: 30;
  --zeplin-fontsize-h1-clamped: clamp(
    calc(var(--zeplin-fontsize-mobile-h1) * 1px),
    calc(var(--zeplin-fontsize-mobile-h1) * 1px) + ((var(--zeplin-fontsize-desktop-h1) - var(--zeplin-fontsize-mobile-h1)) * (100vw - var(--min-page-width) * 1px) / (var(--max-page-width)  - var(--min-page-width))),
    calc(var(--zeplin-fontsize-desktop-h1) * 1px)
  );
  --zeplin-fontsize-h1-clamped-opened-sidemenu: clamp(
    calc(var(--zeplin-fontsize-mobile-h1) * 1px),
    calc(var(--zeplin-fontsize-mobile-h1) * 1px) + ((var(--zeplin-fontsize-desktop-h1) - var(--zeplin-fontsize-mobile-h1)) * (100vw - var(--min-page-width) * 1px - var(--sidebar-desktop-width)) / (var(--max-page-width)  - var(--min-page-width))),
    calc(var(--zeplin-fontsize-desktop-h1) * 1px)
  );
  --zeplin-fontsize-desktop-h2: 32;
  --zeplin-fontsize-mobile-h2: 26;
  --zeplin-fontsize-h2-clamped: clamp(
    calc(var(--zeplin-fontsize-mobile-h2) * 1px),
    calc(var(--zeplin-fontsize-mobile-h2) * 1px) + ((var(--zeplin-fontsize-desktop-h2) - var(--zeplin-fontsize-mobile-h2)) * (100vw - var(--min-page-width) * 1px) / (var(--max-page-width)  - var(--min-page-width))),
    calc(var(--zeplin-fontsize-desktop-h2) * 1px)
  );
  --zeplin-fontsize-h2-clamped-opened-sidemenu: clamp(
    calc(var(--zeplin-fontsize-mobile-h2) * 1px),
    calc(var(--zeplin-fontsize-mobile-h2) * 1px) + ((var(--zeplin-fontsize-desktop-h2) - var(--zeplin-fontsize-mobile-h2)) * (100vw - var(--min-page-width) * 1px - var(--sidebar-desktop-width)) / (var(--max-page-width)  - var(--min-page-width))),
    calc(var(--zeplin-fontsize-desktop-h2) * 1px)
  );

  /*header variables*/
  --header-and-logo-area-height: 59px;
  --padding-top-for-site-branding-distance: 80.5;

  /*sidebar variables*/
  --sidebar-desktop-width: 285px;
  --sidebar-mobile-width: 100%;
  --sidebar-background-color: var(--hoou-beige-100);

  /*breadcrumb-variable*/
  --breadcrumb-color: var(--hoou-grau-800);
}