/******************* 01. Font Implementation *******************/
/* #### Generated By: http://font.download #### */
@font-face {
	font-family: 'Antropos Freefont';
	font-style: normal;
	font-weight: normal;
	src: local('Antropos Freefont'), url('../../Fonts/Antropos/antrf___.woff') format('woff');
}


/* #### Google Source Sans 3 #### */
/* source-sans-3-200 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200;
  src: url('../../Fonts/SourceSans3/source-sans-3-v19-latin-200.woff2') format('woff2'),
       url('../../Fonts/SourceSans3/source-sans-3-v19-latin-200.ttf') format('truetype');
}

/* source-sans-3-200italic - latin */
@font-face {
  font-display: swap; 
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 200;
  src: url('../../Fonts/SourceSans3/source-sans-3-v19-latin-200italic.woff2') format('woff2'), 
       url('../../Fonts/SourceSans3/source-sans-3-v19-latin-200italic.ttf') format('truetype'); 
}
/* source-sans-3-300 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 300;
  src: url('../../Fonts/SourceSans3/source-sans-3-v19-latin-300.woff2') format('woff2'), 
       url('../../Fonts/SourceSans3/source-sans-3-v19-latin-300.ttf') format('truetype'); 
}
/* source-sans-3-300italic - latin */
@font-face {
  font-display: swap; 
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 300;
  src: url('../../Fonts/SourceSans3/source-sans-3-v19-latin-300italic.woff2') format('woff2'), 
       url('../../Fonts/SourceSans3/source-sans-3-v19-latin-300italic.ttf') format('truetype'); 
}
/* source-sans-3-regular - latin */
@font-face {
  font-display: swap; 
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  src: url('../../Fonts/SourceSans3/source-sans-3-v19-latin-regular.woff2') format('woff2'), 
       url('../../Fonts/SourceSans3/source-sans-3-v19-latin-regular.ttf') format('truetype'); 
}
/* source-sans-3-italic - latin */
@font-face {
  font-display: swap; 
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 400;
  src: url('../../Fonts/SourceSans3/source-sans-3-v19-latin-italic.woff2') format('woff2'), 
       url('../../Fonts/SourceSans3/source-sans-3-v19-latin-italic.ttf') format('truetype'); 
}
/* source-sans-3-500 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 500;
  src: url('../../Fonts/SourceSans3/source-sans-3-v19-latin-500.woff2') format('woff2'), 
       url('../../Fonts/SourceSans3/source-sans-3-v19-latin-500.ttf') format('truetype'); 
}
/* source-sans-3-500italic - latin */
@font-face {
  font-display: swap; 
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 500;
  src: url('../../Fonts/SourceSans3/source-sans-3-v19-latin-500italic.woff2') format('woff2'), 
       url('../../Fonts/SourceSans3/source-sans-3-v19-latin-500italic.ttf') format('truetype'); 
}
/* source-sans-3-600 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  src: url('../../Fonts/SourceSans3/source-sans-3-v19-latin-600.woff2') format('woff2'), 
       url('../../Fonts/SourceSans3/source-sans-3-v19-latin-600.ttf') format('truetype'); 
}
/* source-sans-3-600italic - latin */
@font-face {
  font-display: swap; 
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 600;
  src: url('../../Fonts/SourceSans3/source-sans-3-v19-latin-600italic.woff2') format('woff2'), 
       url('../../Fonts/SourceSans3/source-sans-3-v19-latin-600italic.ttf') format('truetype'); 
}
/* source-sans-3-700 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  src: url('../../Fonts/SourceSans3/source-sans-3-v19-latin-700.woff2') format('woff2'), 
       url('../../Fonts/SourceSans3/source-sans-3-v19-latin-700.ttf') format('truetype'); 
}
/* source-sans-3-700italic - latin */
@font-face {
  font-display: swap; 
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 700;
  src: url('../../Fonts/SourceSans3/source-sans-3-v19-latin-700italic.woff2') format('woff2'), 
       url('../../Fonts/SourceSans3/source-sans-3-v19-latin-700italic.ttf') format('truetype'); 
}
/* source-sans-3-800 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 800;
  src: url('../../Fonts/SourceSans3/source-sans-3-v19-latin-800.woff2') format('woff2'), 
       url('../../Fonts/SourceSans3/source-sans-3-v19-latin-800.ttf') format('truetype'); 
}
/* source-sans-3-800italic - latin */
@font-face {
  font-display: swap; 
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 800;
  src: url('../../Fonts/SourceSans3/source-sans-3-v19-latin-800italic.woff2') format('woff2'), 
       url('../../Fonts/SourceSans3/source-sans-3-v19-latin-800italic.ttf') format('truetype'); 
}
/* source-sans-3-900 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 900;
  src: url('../../Fonts/SourceSans3/source-sans-3-v19-latin-900.woff2') format('woff2'), 
       url('../../Fonts/SourceSans3/source-sans-3-v19-latin-900.ttf') format('truetype'); 
}
/* source-sans-3-900italic - latin */
@font-face {
  font-display: swap; 
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 900;
  src: url('../../Fonts/SourceSans3/source-sans-3-v19-latin-900italic.woff2') format('woff2'), 
       url('../../Fonts/SourceSans3/source-sans-3-v19-latin-900italic.ttf') format('truetype'); 
}

/******************* 02. Variable Declarations *******************/
:root {

  /*** Fonts,see also Font Implementation at to top of this file ***/
  --font-family-normal: 'Source Sans 3', verdana, arial, helvetica, sans-serif;
  --font-weight-normal: 400;
  --font-variation-settings: 'wdth' 120, 'wght' 400;

  --font-family-bold: 'Antropos Freefont', verdana, arial, helvetica, sans-serif;
  --font-weight-bold: 600;
  --font-variation-settings-bold: 'wdth' 120, 'wght' 550;

  /*** Colors begin ***/

  /* Links/Menus */
  --color0: #0a2d32;
  --color1: #f5c896;
  --color2: #000F42;

  /* Decoration*/
  --color3: #fa693c;
  --color4: #9a031e;

   /* Hintergrund */
  --hg1: #fafaed;
  /* --hg2: #f4f4f6;
	
   /* Akzentfarben */
  --az1: #fac3b9;
  --az2: #f5e6d7;
  --az2t: #aa4b5a;
  --az3: #f5c896;
  --az3t: #fac3b9;
  --az4: #e9cabd;
  --az4t: #a06e2d;
  --az5: #bdc6ce;
  --az5t: #fa693c;
  --az6: #dee3e8;
  --az7: #f0af50;
  --az8: #f8d7a8;
	
   /* Gray Scale */
  --black: #000;
  --gray1: #222;
  --gray2: #666;
  --gray3: #999;
  --gray4: #ccc;
  --gray5: #eee;
  --white: #fff;
  --white-opacity: rgba(255, 255, 255, 0.9);

  /* Message Colors */
  --error: #ba0202;
  --error-light: #fff2f2;
  --valid: #5abc55;
  --valid-light: #e8f6e7;
  --warning: #ffc800;
  --warning-light: #fffae8;
  --information: #0080ff;
  --information-light: #ecf5fe;

  /*** Colors end ***/

  /*** Basic Sizes ***/

  /* Basic horizontal spaces */
  --base-html-size: 16px;
  --body-font-size: 1rem; /* 16px*/

  --base-size: 1.5rem;
  --base-size-double: 3rem;
  --base-size-triple: 4.5rem;
  --base-size-half: 0.75rem;
  --base-size-quarter: 0.375rem;
  --base-size-eighth: 0.1875rem;

  /* Basic vertical spaces */
  --gutter: 1.5rem;
  --gutter-double: 3rem;
  --gutter-triple: 4.5rem;
  --gutter-half: 0.75rem;
  --gutter-quarter: 0.375rem;
  --gutter-eighth: 0.1875rem;

  /* Borders */
  --border-width: 1px;
  --border-radius: 0px;

  --transition: .3s ease-in-out;
	

  /* Abstände */
  --s-0: 0;
  --s-1: 0.25rem;  /* 4px */
  --s-2: 0.5rem;   /* 8px */
  --s-3: 0.75rem;  /* 12px */
  --s-4: 1rem;     /* 16px */
  --s-5: 1.5rem;   /* 24px */
  --s-6: 2rem;     /* 32px */
  --s-7: 3rem;     /* 48px */
  --s-8: 4rem;     /* 64px */
  --s-9: 6rem;     /* 96px */
  --s-10: 8rem;    /* 128px */


  /******************* 03. Property Declarations, Individual Layout *******************/

  /* Max. Height of Logo in Header (--logo-height) on Website
  Rendered File height is defined in TypoScript Constants on Root Page. Adjust value if necessary
  Example: --logo-height: 150px;
  */
  --logo-height: calc(var(--base-size, 16px) * 3);

  /* Body */
  --font-color: var(--color0);
  --font-color-light: var(--gray2);
  --body-bg-color: var(--white);

  /* Body links */
  --body-link-color: var(--font-color);
  --body-link-hover-color: var(--font-color);
  --body-link-invers-color: var(--gray4);
  --body-link-invers-hover-color: var(--white);
  --body-link-text-decoration: underline;
  --body-link-text-decoration-color: var(--color1);
  --body-link-text-decoration-thickness: 1px;
  --body-link-text-decoration-thickness-hover: 2px;
  --body-link-underline-offset: 3px;

  /* Page Header */
  --header-bg-color: var(--white);
  --header-bg-overlay: var(--white-opacity);
  --header-color: var(--font-color);
  --header-link-color: var(--body-link-color);
  --header-link-hover-color: var(--body-link-hover-color);
  --header-service-height: var(--logo-height, calc(var(--base-size, 16px) * 3));
  --mobile-logo-height: calc(var(--base-size, 16px) * 3);
  --nav-header-height: calc(var(--base-size, 16px) * 2);
  --header-height: calc(var(--header-service-height) + var(--nav-header-height));
  --header-height-fixed: calc(var(--base-size, 16px) * 2);

  --header-button-color: var(--white);
  --header-button-hover-color: var(--white);
  --header-button-bg: var(--body-link-color);
  --header-button-hover-bg: var(--body-link-hover-color);
  --header-button-border: var(--body-link-color);
  --header-button-hover-border: var(--body-link-hover-color);

  /* Page Footers */
  --footer-bg: var(--gray2);
  --footer-color: var(--white);
  --footer-link-color: var(--gray5);
  --footer-link-hover-color: var(--body-link-invers-hover-color);

  --footer2-bg: var(--gray1);
  --footer2-color: var(--white);
  --footer2-link-color: var(--body-link-invers-color);
  --footer2-link-hover-color: var(--body-link-invers-hover-color);

  /* Fonts sizes depending on display size */
  --base-html-size-small: var(--base-html-size);
  --base-html-size-medium: calc(var(--base-html-size) * 1.125);
  --base-html-size-large: calc(var(--base-html-size) * 1.1875);

  /* Font sizes - https://type-scale.com/ Perfect Fourth, 1.333 */
  --font-size1: 1.5rem; /* h1 */
  --line-height1: 1.2;
  --letterspacing1: 0.1rem;
  --font-size2: 1.625rem; /* h2 */
  --line-height2: 1.3;
  --letterspacing2: 0.1rem;
  --font-size3: 1.333rem; /* h3 */
  --line-height3: calc(var(--base-size) * 1.25);
  --letterspacing3: 0.1rem;
  --font-size4: 1.125rem; /* h4 */
  --font-size5: var(--body-font-size); /* h5 */
  --font-size-small: calc(var(--body-font-size) * 0.8);
  --line-height-small: calc(var(--body-font-size) * 0.8);

  /* Headers h1-h5 */
  --header-font-size: 1rem;
  --header-font-family: var(--font-family-bold);
  --header-font-weight: var(--font-weight-bold);
  --header-font-color: var(--font-color);
  --header-font-variation-settings: var(--font-variation-settings-bold);
	
  /* Blockquote */
  --blockquote-font-family: var(--font-family-bold);
  --blockquote-font-size: 2rem;
  --blockquote-font-color: var(--font-color);
  --blockquote-letter-spacing: 0.04rem;
  --blockquote-line-height: 1.4;

  /* Buttons primary */
  --button-color: var(--white);
  --button-hover-color: var(--white);
  --button-bg: var(--color0);
  --button-hover-bg: var(--color3);
  --button-border: var(--color0);
  --button-hover-border: var(--color3);

  /* Buttons secondary */
  --button2-color: var(--az5t);
  --button2-hover-color: var(--color1);
  --button2-bg: var(--white);
  --button2-hover-bg: var(--white);
  --button2-border: var(--az5t);
  --button2-hover-border: var(--color1);

  /* Tables: border color and cell borders.*/
  --table-border-color: var(--gray3);
  --table-hover-color: var(--font-color);
  --table-hover-bg: var(--gray5);
  --table-header-bg: var(--gray5);
  --table-header-color: var(--font-color);
  --stripedblock-bg: var(--gray5);

  /* Default Border */
  --border-color: var(--gray3);

  /* Image Border Option for Editors*/
  --image-border-color: var(--border-color);
  --image-border-width: var(--border-width);

  /* Layout Option for Editors*/
  --layout-100-bg: var(--gray5);

  /* Toggle Content Header Frame Option */
  --toggle-bg: var(--gray5);

  /* Paddíng for all boxes with background */
  --padding-boxes: var(--base-size) var(--gutter);

  --box-shadow: rgba(0, 0, 0, 0.2);


  /***** Content Element: Hero Text over image options *****/
  --hero-text-light: var(--white);
  --hero-text-dark: var(--black);
  --hero-text-bg-light: rgba(255, 255, 255, 0.9);
  --hero-text-bg-dark: rgba(0, 0, 0, 0.9);
  --hero-text-shadow-dark: 1px 1px 1px var(--black);
  --hero-text-shadow-light: 1px 1px 1px var(--white);

  /***** Navigation smartmenu *****/

  /* Navigation background over whole browser width */
  --menu-bg-100vw: var(--gray5, #eee);

  --menu-font-family: var(--font-family-normal);

  /*Mobile Items separators*/
  --collapsible-separators-color: rgba(0, 0, 0, 0.2);
  /*Toggle button (sub menu indicators)*/
  --collapsible-toggle-bg: var(--hg1);
  --collapsible-submenu-bg: rgba(var(--gray4), 0.1);

  /* 1.level menu */
  --menu-link-color: var(--body-link-color);
  --menu-link-hover-color: var(--font-color);
  --menu-bg: var(--white);
  --menu-hover-bg: var(--az2);
  --menu-active-bg: var(--az2);
  --menu-current-bg: var(--az1);
  --menu-arrow-color: var(--menu-link-color);

  /* 2.level menu */
  --submenu-link-color: var(--body-link-color);
  --submenu-link-hover-color: var(--font-color);
  --submenu-current-color: var(--font-color);
  --submenu-bg: var(--az1);
  --submenu-hover-bg: var(--az2);
  --submenu-active-bg: var(--az2);
  --submenu-current-bg: var(--az1);
  --submenu-arrow-color: var(--body-link-color);
  --desktop-submenu-border-color: var(--border-color);

  /* hamburger icon for mobile menu */
  --menu-icon-button: var(--body-link-color);

}