@charset "UTF-8";
/*****************************************************************************
    #FONTS
 *****************************************************************************/
/* poppins-100 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 100;
  src: url("fonts/Poppins/poppins-v20-latin-100.eot");
  /* IE9 Compat Modes */
  src: url("fonts/Poppins/poppins-v20-latin-100.eot?#iefix") format("embedded-opentype"), url("fonts/Poppins/poppins-v20-latin-100.woff2") format("woff2"), url("fonts/Poppins/poppins-v20-latin-100.woff") format("woff"), url("fonts/Poppins/poppins-v20-latin-100.ttf") format("truetype"), url("fonts/Poppins/poppins-v20-latin-100.svg#Poppins") format("svg");
  /* Legacy iOS */ }
/* poppins-100italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 100;
  src: url("fonts/Poppins/poppins-v20-latin-100italic.eot");
  /* IE9 Compat Modes */
  src: url("fonts/Poppins/poppins-v20-latin-100italic.eot?#iefix") format("embedded-opentype"), url("fonts/Poppins/poppins-v20-latin-100italic.woff2") format("woff2"), url("fonts/Poppins/poppins-v20-latin-100italic.woff") format("woff"), url("fonts/Poppins/poppins-v20-latin-100italic.ttf") format("truetype"), url("fonts/Poppins/poppins-v20-latin-100italic.svg#Poppins") format("svg");
  /* Legacy iOS */ }
/* poppins-200 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 200;
  src: url("fonts/Poppins/poppins-v20-latin-200.eot");
  /* IE9 Compat Modes */
  src: url("fonts/Poppins/poppins-v20-latin-200.eot?#iefix") format("embedded-opentype"), url("fonts/Poppins/poppins-v20-latin-200.woff2") format("woff2"), url("fonts/Poppins/poppins-v20-latin-200.woff") format("woff"), url("fonts/Poppins/poppins-v20-latin-200.ttf") format("truetype"), url("fonts/Poppins/poppins-v20-latin-200.svg#Poppins") format("svg");
  /* Legacy iOS */ }
/* poppins-200italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 200;
  src: url("fonts/Poppins/poppins-v20-latin-200italic.eot");
  /* IE9 Compat Modes */
  src: url("fonts/Poppins/poppins-v20-latin-200italic.eot?#iefix") format("embedded-opentype"), url("fonts/Poppins/poppins-v20-latin-200italic.woff2") format("woff2"), url("fonts/Poppins/poppins-v20-latin-200italic.woff") format("woff"), url("fonts/Poppins/poppins-v20-latin-200italic.ttf") format("truetype"), url("fonts/Poppins/poppins-v20-latin-200italic.svg#Poppins") format("svg");
  /* Legacy iOS */ }
/* poppins-300 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  src: url("fonts/Poppins/poppins-v20-latin-300.eot");
  /* IE9 Compat Modes */
  src: url("fonts/Poppins/poppins-v20-latin-300.eot?#iefix") format("embedded-opentype"), url("fonts/Poppins/poppins-v20-latin-300.woff2") format("woff2"), url("fonts/Poppins/poppins-v20-latin-300.woff") format("woff"), url("fonts/Poppins/poppins-v20-latin-300.ttf") format("truetype"), url("fonts/Poppins/poppins-v20-latin-300.svg#Poppins") format("svg");
  /* Legacy iOS */ }
/* poppins-300italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 300;
  src: url("fonts/Poppins/poppins-v20-latin-300italic.eot");
  /* IE9 Compat Modes */
  src: url("fonts/Poppins/poppins-v20-latin-300italic.eot?#iefix") format("embedded-opentype"), url("fonts/Poppins/poppins-v20-latin-300italic.woff2") format("woff2"), url("fonts/Poppins/poppins-v20-latin-300italic.woff") format("woff"), url("fonts/Poppins/poppins-v20-latin-300italic.ttf") format("truetype"), url("fonts/Poppins/poppins-v20-latin-300italic.svg#Poppins") format("svg");
  /* Legacy iOS */ }
/* poppins-regular - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url("fonts/Poppins/poppins-v20-latin-regular.eot");
  /* IE9 Compat Modes */
  src: url("fonts/Poppins/poppins-v20-latin-regular.eot?#iefix") format("embedded-opentype"), url("fonts/Poppins/poppins-v20-latin-regular.woff2") format("woff2"), url("fonts/Poppins/poppins-v20-latin-regular.woff") format("woff"), url("fonts/Poppins/poppins-v20-latin-regular.ttf") format("truetype"), url("fonts/Poppins/poppins-v20-latin-regular.svg#Poppins") format("svg");
  /* Legacy iOS */ }
/* poppins-italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  src: url("fonts/Poppins/poppins-v20-latin-italic.eot");
  /* IE9 Compat Modes */
  src: url("fonts/Poppins/poppins-v20-latin-italic.eot?#iefix") format("embedded-opentype"), url("fonts/Poppins/poppins-v20-latin-italic.woff2") format("woff2"), url("fonts/Poppins/poppins-v20-latin-italic.woff") format("woff"), url("fonts/Poppins/poppins-v20-latin-italic.ttf") format("truetype"), url("fonts/Poppins/poppins-v20-latin-italic.svg#Poppins") format("svg");
  /* Legacy iOS */ }
/* poppins-500 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  src: url("fonts/Poppins/poppins-v20-latin-500.eot");
  /* IE9 Compat Modes */
  src: url("fonts/Poppins/poppins-v20-latin-500.eot?#iefix") format("embedded-opentype"), url("fonts/Poppins/poppins-v20-latin-500.woff2") format("woff2"), url("fonts/Poppins/poppins-v20-latin-500.woff") format("woff"), url("fonts/Poppins/poppins-v20-latin-500.ttf") format("truetype"), url("fonts/Poppins/poppins-v20-latin-500.svg#Poppins") format("svg");
  /* Legacy iOS */ }
/* poppins-500italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 500;
  src: url("fonts/Poppins/poppins-v20-latin-500italic.eot");
  /* IE9 Compat Modes */
  src: url("fonts/Poppins/poppins-v20-latin-500italic.eot?#iefix") format("embedded-opentype"), url("fonts/Poppins/poppins-v20-latin-500italic.woff2") format("woff2"), url("fonts/Poppins/poppins-v20-latin-500italic.woff") format("woff"), url("fonts/Poppins/poppins-v20-latin-500italic.ttf") format("truetype"), url("fonts/Poppins/poppins-v20-latin-500italic.svg#Poppins") format("svg");
  /* Legacy iOS */ }
/* poppins-600 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  src: url("fonts/Poppins/poppins-v20-latin-600.eot");
  /* IE9 Compat Modes */
  src: url("fonts/Poppins/poppins-v20-latin-600.eot?#iefix") format("embedded-opentype"), url("fonts/Poppins/poppins-v20-latin-600.woff2") format("woff2"), url("fonts/Poppins/poppins-v20-latin-600.woff") format("woff"), url("fonts/Poppins/poppins-v20-latin-600.ttf") format("truetype"), url("fonts/Poppins/poppins-v20-latin-600.svg#Poppins") format("svg");
  /* Legacy iOS */ }
/* poppins-600italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 600;
  src: url("fonts/Poppins/poppins-v20-latin-600italic.eot");
  /* IE9 Compat Modes */
  src: url("fonts/Poppins/poppins-v20-latin-600italic.eot?#iefix") format("embedded-opentype"), url("fonts/Poppins/poppins-v20-latin-600italic.woff2") format("woff2"), url("fonts/Poppins/poppins-v20-latin-600italic.woff") format("woff"), url("fonts/Poppins/poppins-v20-latin-600italic.ttf") format("truetype"), url("fonts/Poppins/poppins-v20-latin-600italic.svg#Poppins") format("svg");
  /* Legacy iOS */ }
/* poppins-700 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: url("fonts/Poppins/poppins-v20-latin-700.eot");
  /* IE9 Compat Modes */
  src: url("fonts/Poppins/poppins-v20-latin-700.eot?#iefix") format("embedded-opentype"), url("fonts/Poppins/poppins-v20-latin-700.woff2") format("woff2"), url("fonts/Poppins/poppins-v20-latin-700.woff") format("woff"), url("fonts/Poppins/poppins-v20-latin-700.ttf") format("truetype"), url("fonts/Poppins/poppins-v20-latin-700.svg#Poppins") format("svg");
  /* Legacy iOS */ }
/* poppins-700italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 700;
  src: url("fonts/Poppins/poppins-v20-latin-700italic.eot");
  /* IE9 Compat Modes */
  src: url("fonts/Poppins/poppins-v20-latin-700italic.eot?#iefix") format("embedded-opentype"), url("fonts/Poppins/poppins-v20-latin-700italic.woff2") format("woff2"), url("fonts/Poppins/poppins-v20-latin-700italic.woff") format("woff"), url("fonts/Poppins/poppins-v20-latin-700italic.ttf") format("truetype"), url("fonts/Poppins/poppins-v20-latin-700italic.svg#Poppins") format("svg");
  /* Legacy iOS */ }
/* poppins-800 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  src: url("fonts/Poppins/poppins-v20-latin-800.eot");
  /* IE9 Compat Modes */
  src: url("fonts/Poppins/poppins-v20-latin-800.eot?#iefix") format("embedded-opentype"), url("fonts/Poppins/poppins-v20-latin-800.woff2") format("woff2"), url("fonts/Poppins/poppins-v20-latin-800.woff") format("woff"), url("fonts/Poppins/poppins-v20-latin-800.ttf") format("truetype"), url("fonts/Poppins/poppins-v20-latin-800.svg#Poppins") format("svg");
  /* Legacy iOS */ }
/* poppins-800italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 800;
  src: url("fonts/Poppins/poppins-v20-latin-800italic.eot");
  /* IE9 Compat Modes */
  src: url("fonts/Poppins/poppins-v20-latin-800italic.eot?#iefix") format("embedded-opentype"), url("fonts/Poppins/poppins-v20-latin-800italic.woff2") format("woff2"), url("fonts/Poppins/poppins-v20-latin-800italic.woff") format("woff"), url("fonts/Poppins/poppins-v20-latin-800italic.ttf") format("truetype"), url("fonts/Poppins/poppins-v20-latin-800italic.svg#Poppins") format("svg");
  /* Legacy iOS */ }
/* poppins-900 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 900;
  src: url("fonts/Poppins/poppins-v20-latin-900.eot");
  /* IE9 Compat Modes */
  src: url("fonts/Poppins/poppins-v20-latin-900.eot?#iefix") format("embedded-opentype"), url("fonts/Poppins/poppins-v20-latin-900.woff2") format("woff2"), url("fonts/Poppins/poppins-v20-latin-900.woff") format("woff"), url("fonts/Poppins/poppins-v20-latin-900.ttf") format("truetype"), url("fonts/Poppins/poppins-v20-latin-900.svg#Poppins") format("svg");
  /* Legacy iOS */ }
/* poppins-900italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 900;
  src: url("fonts/Poppins/poppins-v20-latin-900italic.eot");
  /* IE9 Compat Modes */
  src: url("fonts/Poppins/poppins-v20-latin-900italic.eot?#iefix") format("embedded-opentype"), url("fonts/Poppins/poppins-v20-latin-900italic.woff2") format("woff2"), url("fonts/Poppins/poppins-v20-latin-900italic.woff") format("woff"), url("fonts/Poppins/poppins-v20-latin-900italic.ttf") format("truetype"), url("fonts/Poppins/poppins-v20-latin-900italic.svg#Poppins") format("svg");
  /* Legacy iOS */ }
/* source-sans-pro-200 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 200;
  src: url("fonts/SourceSansPro/source-sans-pro-v21-latin-200.eot");
  /* IE9 Compat Modes */
  src: url("fonts/SourceSansPro/source-sans-pro-v21-latin-200.eot?#iefix") format("embedded-opentype"), url("fonts/SourceSansPro/source-sans-pro-v21-latin-200.woff2") format("woff2"), url("fonts/SourceSansPro/source-sans-pro-v21-latin-200.woff") format("woff"), url("fonts/SourceSansPro/source-sans-pro-v21-latin-200.ttf") format("truetype"), url("fonts/SourceSansPro/source-sans-pro-v21-latin-200.svg#SourceSansPro") format("svg");
  /* Legacy iOS */ }
/* source-sans-pro-200italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 200;
  src: url("fonts/SourceSansPro/source-sans-pro-v21-latin-200italic.eot");
  /* IE9 Compat Modes */
  src: url("fonts/SourceSansPro/source-sans-pro-v21-latin-200italic.eot?#iefix") format("embedded-opentype"), url("fonts/SourceSansPro/source-sans-pro-v21-latin-200italic.woff2") format("woff2"), url("fonts/SourceSansPro/source-sans-pro-v21-latin-200italic.woff") format("woff"), url("fonts/SourceSansPro/source-sans-pro-v21-latin-200italic.ttf") format("truetype"), url("fonts/SourceSansPro/source-sans-pro-v21-latin-200italic.svg#SourceSansPro") format("svg");
  /* Legacy iOS */ }
/* source-sans-pro-300 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  src: url("fonts/SourceSansPro/source-sans-pro-v21-latin-300.eot");
  /* IE9 Compat Modes */
  src: url("fonts/SourceSansPro/source-sans-pro-v21-latin-300.eot?#iefix") format("embedded-opentype"), url("fonts/SourceSansPro/source-sans-pro-v21-latin-300.woff2") format("woff2"), url("fonts/SourceSansPro/source-sans-pro-v21-latin-300.woff") format("woff"), url("fonts/SourceSansPro/source-sans-pro-v21-latin-300.ttf") format("truetype"), url("fonts/SourceSansPro/source-sans-pro-v21-latin-300.svg#SourceSansPro") format("svg");
  /* Legacy iOS */ }
/* source-sans-pro-300italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 300;
  src: url("fonts/SourceSansPro/source-sans-pro-v21-latin-300italic.eot");
  /* IE9 Compat Modes */
  src: url("fonts/SourceSansPro/source-sans-pro-v21-latin-300italic.eot?#iefix") format("embedded-opentype"), url("fonts/SourceSansPro/source-sans-pro-v21-latin-300italic.woff2") format("woff2"), url("fonts/SourceSansPro/source-sans-pro-v21-latin-300italic.woff") format("woff"), url("fonts/SourceSansPro/source-sans-pro-v21-latin-300italic.ttf") format("truetype"), url("fonts/SourceSansPro/source-sans-pro-v21-latin-300italic.svg#SourceSansPro") format("svg");
  /* Legacy iOS */ }
/* source-sans-pro-regular - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: url("fonts/SourceSansPro/source-sans-pro-v21-latin-regular.eot");
  /* IE9 Compat Modes */
  src: url("fonts/SourceSansPro/source-sans-pro-v21-latin-regular.eot?#iefix") format("embedded-opentype"), url("fonts/SourceSansPro/source-sans-pro-v21-latin-regular.woff2") format("woff2"), url("fonts/SourceSansPro/source-sans-pro-v21-latin-regular.woff") format("woff"), url("fonts/SourceSansPro/source-sans-pro-v21-latin-regular.ttf") format("truetype"), url("fonts/SourceSansPro/source-sans-pro-v21-latin-regular.svg#SourceSansPro") format("svg");
  /* Legacy iOS */ }
/* source-sans-pro-italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 400;
  src: url("fonts/SourceSansPro/source-sans-pro-v21-latin-italic.eot");
  /* IE9 Compat Modes */
  src: url("fonts/SourceSansPro/source-sans-pro-v21-latin-italic.eot?#iefix") format("embedded-opentype"), url("fonts/SourceSansPro/source-sans-pro-v21-latin-italic.woff2") format("woff2"), url("fonts/SourceSansPro/source-sans-pro-v21-latin-italic.woff") format("woff"), url("fonts/SourceSansPro/source-sans-pro-v21-latin-italic.ttf") format("truetype"), url("fonts/SourceSansPro/source-sans-pro-v21-latin-italic.svg#SourceSansPro") format("svg");
  /* Legacy iOS */ }
/* source-sans-pro-600 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
  src: url("fonts/SourceSansPro/source-sans-pro-v21-latin-600.eot");
  /* IE9 Compat Modes */
  src: url("fonts/SourceSansPro/source-sans-pro-v21-latin-600.eot?#iefix") format("embedded-opentype"), url("fonts/SourceSansPro/source-sans-pro-v21-latin-600.woff2") format("woff2"), url("fonts/SourceSansPro/source-sans-pro-v21-latin-600.woff") format("woff"), url("fonts/SourceSansPro/source-sans-pro-v21-latin-600.ttf") format("truetype"), url("fonts/SourceSansPro/source-sans-pro-v21-latin-600.svg#SourceSansPro") format("svg");
  /* Legacy iOS */ }
/* source-sans-pro-600italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 600;
  src: url("fonts/SourceSansPro/source-sans-pro-v21-latin-600italic.eot");
  /* IE9 Compat Modes */
  src: url("fonts/SourceSansPro/source-sans-pro-v21-latin-600italic.eot?#iefix") format("embedded-opentype"), url("fonts/SourceSansPro/source-sans-pro-v21-latin-600italic.woff2") format("woff2"), url("fonts/SourceSansPro/source-sans-pro-v21-latin-600italic.woff") format("woff"), url("fonts/SourceSansPro/source-sans-pro-v21-latin-600italic.ttf") format("truetype"), url("fonts/SourceSansPro/source-sans-pro-v21-latin-600italic.svg#SourceSansPro") format("svg");
  /* Legacy iOS */ }
/* source-sans-pro-700 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 700;
  src: url("fonts/SourceSansPro/source-sans-pro-v21-latin-700.eot");
  /* IE9 Compat Modes */
  src: url("fonts/SourceSansPro/source-sans-pro-v21-latin-700.eot?#iefix") format("embedded-opentype"), url("fonts/SourceSansPro/source-sans-pro-v21-latin-700.woff2") format("woff2"), url("fonts/SourceSansPro/source-sans-pro-v21-latin-700.woff") format("woff"), url("fonts/SourceSansPro/source-sans-pro-v21-latin-700.ttf") format("truetype"), url("fonts/SourceSansPro/source-sans-pro-v21-latin-700.svg#SourceSansPro") format("svg");
  /* Legacy iOS */ }
/* source-sans-pro-700italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 700;
  src: url("fonts/SourceSansPro/source-sans-pro-v21-latin-700italic.eot");
  /* IE9 Compat Modes */
  src: url("fonts/SourceSansPro/source-sans-pro-v21-latin-700italic.eot?#iefix") format("embedded-opentype"), url("fonts/SourceSansPro/source-sans-pro-v21-latin-700italic.woff2") format("woff2"), url("fonts/SourceSansPro/source-sans-pro-v21-latin-700italic.woff") format("woff"), url("fonts/SourceSansPro/source-sans-pro-v21-latin-700italic.ttf") format("truetype"), url("fonts/SourceSansPro/source-sans-pro-v21-latin-700italic.svg#SourceSansPro") format("svg");
  /* Legacy iOS */ }
/* source-sans-pro-900 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 900;
  src: url("fonts/SourceSansPro/source-sans-pro-v21-latin-900.eot");
  /* IE9 Compat Modes */
  src: url("fonts/SourceSansPro/source-sans-pro-v21-latin-900.eot?#iefix") format("embedded-opentype"), url("fonts/SourceSansPro/source-sans-pro-v21-latin-900.woff2") format("woff2"), url("fonts/SourceSansPro/source-sans-pro-v21-latin-900.woff") format("woff"), url("fonts/SourceSansPro/source-sans-pro-v21-latin-900.ttf") format("truetype"), url("fonts/SourceSansPro/source-sans-pro-v21-latin-900.svg#SourceSansPro") format("svg");
  /* Legacy iOS */ }
/* source-sans-pro-900italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 900;
  src: url("fonts/SourceSansPro/source-sans-pro-v21-latin-900italic.eot");
  /* IE9 Compat Modes */
  src: url("fonts/SourceSansPro/source-sans-pro-v21-latin-900italic.eot?#iefix") format("embedded-opentype"), url("fonts/SourceSansPro/source-sans-pro-v21-latin-900italic.woff2") format("woff2"), url("fonts/SourceSansPro/source-sans-pro-v21-latin-900italic.woff") format("woff"), url("fonts/SourceSansPro/source-sans-pro-v21-latin-900italic.ttf") format("truetype"), url("fonts/SourceSansPro/source-sans-pro-v21-latin-900italic.svg#SourceSansPro") format("svg");
  /* Legacy iOS */ }
.screen-reader-text {
  position: absolute;
  top: -9999px;
  left: -9999px; }

.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis; }

.word-wrap {
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto; }

/*****************************************************************************
    VARIABLEN
 *****************************************************************************/
/* SCSS Variablen. */
/* Werden für die media queries benötigt. Nur mit costum properties geht es offenbar nicht :-( */
/*.blue {
    --font-color: var(--fg_dunkel);
    --background-color: var(--bg_normalblau);
}
.white {
    --font-color: var(--fg_normalblau);
    --background-color: transparent;
}*/
/* Custom properties */
/* manche browser unterstützen das nicht .*/
:root {
  /* Standardfarben */
  --linienfarbe: #99d8f0;
  --bg_hell: #ffffff;
  --fg_hell: #4b4b4b;
  --bg_normalblau: #0082ba;
  --fg_normalblau: #0082ba;
  --bg_hellblau: #e9f2fa;
  --bg_dunkel: #2d4d6b;
  --fg_dunkel: #ffffff;
  --hauptnavigation_bg_unselected: #0b4c6d;
  --hauptnavigation_bg_selected: #ff8700;
  --subnav_selected:#ff8700;
  --subnav_unselected:#0082ba;
  --button_text: #ffffff;
  --button_text_hover: #ff8700;
  --bg_forms: #e9f2fa;
  --zitatgeber: #7f7f7f;
  --zitatgeber_blue: #c7c3c3;
  --white: #ffffff;
  --grau: #7f7f7f;
  --hellgrau: #ecf5fd;
  --headline: #0b4c6d;
  --subheadline: #0082ba;
  --font-color: var(--fg_normalblau);
  --background-color: transparent;
  /*px-Größen*/
  --abstand_klein: 1px;
  /* Für Rahmenlinien u.a.*/
  /*rem-Größen. Warum rem und nicht em? Es gibt manche Boxen, wo Elemente verschiedener Schriftgröße
  (also Überschriften und Absätze) das gleiche Padding haben sollten.
  (Alternative wäre, dass man wieder eine Box drumrumbaut und das Padding für diese Box definiert wird.)
  Diskutabel. Vielleicht ist mal das eine, mal das andere sinnvoll.*/
  --border: 0.1rem;
  --gap: 1rem;
  --min_spaltenbreite: 16rem;
  --min_doppelspaltenbreite: calc(2 * var(--min_spaltenbreite));
  --max_spaltenbreite: 18rem;
  --width_one_col: calc(var(--max_spaltenbreite) + 2*var(--border));
  --width_two_col: calc(2*var(--max_spaltenbreite) + 4*var(--border) + var(--gap));
  --width_three_col: calc(3*var(--max_spaltenbreite) + 6*var(--border) + 2*var(--gap));
  --width_four_col: calc(4*var(--max_spaltenbreite) + 8*var(--border) + 3*var(--gap));
  --max_one_col: calc( var(--max_spaltenbreite) + 2*var(--border));
  --max_two_col: calc(2*var(--max_spaltenbreite) + 4*var(--border) + var(--gap));
  --max_three_col: calc(3*var(--max_spaltenbreite) + 6*var(--border) + 2*var(--gap));
  --max_four_col: calc(4*var(--max_spaltenbreite) + 8*var(--border) + 3*var(--gap));
  --max_width: min(95vw, var(--max_four_col));
  --header-height: 7rem;
  --padding: 0.5rem;
  --buttons_padding_v: 0.8em;
  --buttons_padding_h: 2em;
  --buttons_padding: var(--buttons_padding_v) var(--buttons_padding_h);
  --box_padding: 1rem;
  --buttons_indent: 1em;
  --level1_buttons_padding_h: calc(var(--buttons_padding_h) - var(--buttons_indent));
  --level3_buttons_padding_h: calc(var(--buttons_padding_h) + var(--buttons_indent));
  --titel_hoehe: 2em;
  /*Wird vom Browser erkannt.*/
  /*Für das Karussell (Größen aus blubbsoft-functions.php importiert)*/
  --praxisbeispiele_anzahl: 3;
  /*Anzahl der Praxisbeispiele, die nebeneinander ZU SEHEN sind.*/
  --praxisbeispiele_anzahl_virtuell: 4;
  /*Muss auch in blubbsoft-functions geändert werden, wenn es geändert wird!!*/
  /*Im folgenden alles relative Angaben*/
  --praxisbeispiel_margin: 5;
  /*Abstand zwischen 2 Praxisbeispielen;*/
  --praxisbeispiel_width: calc(100 - var(--praxisbeispiel_margin));
  /*Breite eines Praxisbeispiels*/
  /*Breiten auf die Bezug genommen wird*/
  /*Schema: | m pb m pb ... m pb m |*/
  --visible_width: calc(var(--praxisbeispiele_anzahl) * 100 + var(--praxisbeispiel_margin));
  --visible_width_dreispalter: calc(300 + var(--praxisbeispiel_margin));
  --visible_width_zweispalter: calc(200 + var(--praxisbeispiel_margin));
  --visible_width_einspalter: calc(100 + var(--praxisbeispiel_margin));
  --virtual_width: calc(var(--praxisbeispiele_anzahl_virtuell) * 100 + var(--praxisbeispiel_margin));
  /*Breite in Prozent, um wieviel der Praxisbeispiele-Div über die sichtbare Breite überragt */
  --praxisbeispiele_prozent: calc(var(--virtual_width) / var(--visible_width) * 100%);
  --praxisbeispiele_dreispalter_prozent: calc(var(--virtual_width) / var(--visible_width_dreispalter) * 100%);
  --praxisbeispiele_zweispalter_prozent: calc(var(--virtual_width) / var(--visible_width_zweispalter) * 100%);
  --praxisbeispiele_einspalter_prozent: calc(var(--virtual_width) / var(--visible_width_einspalter) * 100%);
  /*Left-Margins, wenn nach rechts karuselliert wird*/
  --buffer_width_prozent: calc((var(--praxisbeispiel_width)) / var(--visible_width) * -100%);
  --buffer_width_dreispalter_prozent: calc((var(--praxisbeispiel_width)) / var(--visible_width_dreispalter) * -100%);
  --buffer_width_zweispalter_prozent: calc((var(--praxisbeispiel_width)) / var(--visible_width_zweispalter) * -100%);
  --buffer_width_einspalter_prozent: calc((var(--praxisbeispiel_width)) / var(--visible_width_einspalter) * -100%);
  /*Left-Margins, wenn nach rechts karuselliert wrid*/
  --pb_margin_dreispalter_prozent: calc((var(--praxisbeispiel_margin)) / var(--visible_width_dreispalter) * 100%);
  --pb_margin_zweispalter_prozent: calc((var(--praxisbeispiel_margin)) / var(--visible_width_zweispalter) * 100%);
  --pb_margin_einspalter_prozent: calc((var(--praxisbeispiel_margin)) / var(--visible_width_einspalter) * 100%);
  /*Breiten in Prozent der Elemente innerhalb des Praxisbeispiele-Div*/
  --praxisbeispiel_margin_prozent: calc(var(--praxisbeispiel_margin) / var(--virtual_width) * 100%);
  --praxisbeispiel_width_prozent: calc(var(--praxisbeispiel_width) / var(--virtual_width) * 100%);
  /*  Funktionsweise Karussel
  - bei Klick nach rechts verändert sich MarginLeft von 0 auf ---width---margin. Alles links von 0 ist hidden.
  - bei Klick nach links verändert sich MarginLeft von - var(--width)-var(--margin) auf 0.*/ }

/*****************************************************************************
    Base
 *****************************************************************************/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: inherit; }

body {
  font-family: "Source Sans Pro", sans-serif;
  color: black;
  display: flex;
  flex-flow: column nowrap;
  min-height: 100vh; }

p {
  margin-top: 0.5em;
  margin-bottom: 0.5em; }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Poppins", sans-serif;
  color: var(--fg_normalblau);
  text-align: left;
  margin-bottom: 0.5rem;
  margin-top: 0.5rem; }

h1 {
  font-size: 1.75em; }

h2 {
  font-size: 1.25em; }

h3 {
  font-size: 1em; }

h4,
h5,
h6 {
  font-size: 1em;
  font-weight: bold; }

nav {
  font-family: "Source Sans Pro", sans-serif; }

/* Links */
a {
  font-size: 1em;
  font-family: "Source Sans Pro", sans-serif;
  text-decoration: none; }

a {
  color: var(--bg_normalblau); }

a:hover {
  opacity: 0.8; }

a:active {
  opacity: 0.7; }

ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px; }

input {
  outline: none; }

img {
  max-width: 100%; }

figure {
  /*display: inline-block;*/ }

figcaption {
  margin-top: 0.25em;
  font-weight: normal; }

map area:hover {
  cursor: pointer; }

/*****************************************************************************
    PRAXISBEISPIELE
 *****************************************************************************/
/**************************************
    PRAXISBEISPIELE-BOX 
 **************************************/
#praxisbeispielebox {
  box-sizing: inherit;
  display: flex;
  flex-direction: column;
  flex: 3 3 100%;
  padding-top: var(--box_padding);
  row-gap: var(--padding);
  column-gap: inherit;
  padding-bottom: var(--padding);
  position: relative;
  overflow-x: hidden;
  /*Damit die virtuellen praxisbeispiele über die Box nach links oder rechts hinausragen.*/
  background-color: var(--bg_normalblau);
  color: var(--fg_hell);
  min-width: 20rem; }

#praxis {
  position: absolute;
  width: 0;
  top: calc(-1 * var(--header-height)); }

#praxisbeispielebox > :not(#praxisbeispiele):not(.vorheriges):not(.naechstes) {
  padding-left: var(--box_padding);
  padding-right: var(--box_padding); }

#praxisbeispielebox h4 {
  margin: 0; }

/* Next & previous buttons */
/* Wenn nur 1 Praxisbeispiel, nichts zu karussellieren.*/
.a1 .naechstes,
.a1 .vorheriges,
.pb_grossansicht .naechstes,
.pb_grossansicht .vorheriges {
  display: none; }

.a2.pb_grossansicht .naechstes,
.a2.pb_grossansicht .vorheriges {
  display: block; }

/* Wenn nur 3 Praxisbeispiele, nichts zu karussellieren.*/
.a3 .naechstes,
.a3 .vorheriges {
  display: none; }

.vorheriges,
.naechstes {
  display: block;
  position: absolute;
  top: 45%;
  z-index: 1;
  width: auto;
  padding: 0 0.2em;
  color: var(--hauptnavigation_bg_selected);
  font-weight: bold;
  font-size: 3.5rem;
  opacity: 0.8;
  transition: 0.6s ease;
  user-select: none;
  cursor: pointer; }

.vorheriges {
  left: 2.5%;
  border-radius: 5px 0 0 5px; }

.naechstes {
  right: 2.5%;
  border-radius: 0 5px 5px 0; }

.vorheriges:hover,
.naechstes:hover {
  background-color: rgba(0, 0, 0, 0.7); }

.vorheriges:active,
.naechstes:active {
  background-color: rgba(0, 0, 0, 0.6); }

/*Boxüberschift*/
.praxisbeispiele_boxtitel,
.praxisbeispiele_boxtitel_unterschrift {
  margin-bottom: 0px;
  flex: 1 1 100%;
  color: #ffffff; }

.praxisbeispiele_boxtitel_unterschrift {
  margin-top: 0px; }

/* Container für Praxisbeispiele, ragt über */
#praxisbeispiele {
  width: var(--praxisbeispiele_dreispalter_prozent);
  left: var(--pb_margin_dreispalter_prozent);
  /*für Animation*/
  box-sizing: inherit;
  background-color: var(--bg_normalblau);
  color: var(--fg_hell);
  display: flex;
  flex-wrap: nowrap;
  position: relative;
  /*für Animation*/ }

#praxisbeispiele.a1,
#praxisbeispiele.a2,
#praxisbeispiele.pb_grossansicht {
  width: var(--praxisbeispiele_einspalter_prozent);
  left: var(--pb_margin_einspalter_prozent);
  /*für Animation*/ }

#praxisbeispiele.left.a1,
#praxisbeispiele.left.pb_grossansicht {
  left: var(--pb_margin_einspalter_prozent); }

#praxisbeispiele.left.a2 {
  left: var(--buffer_width_einspalter_prozent);
  /*für Animation*/ }

#praxisbeispiele.left {
  left: var(--buffer_width_dreispalter_prozent);
  /*für Animation*/ }

#praxisbeispiele.left:not(.pb_grossansicht).a3 {
  left: var(--pb_margin_dreispalter_prozent); }

#praxisbeispiele.move {
  -webkit-transition: left 1s ease;
  -moz-transition: left 1s ease;
  -ms-transition: left 1s ease;
  -o-transition: left 1s ease;
  transition: left 1s ease; }

/*************************************
    Einzelnes Praxisbeispiel
 *************************************/
.praxisbeispiel {
  box-sizing: inherit;
  width: var(--praxisbeispiel_width_prozent);
  margin-right: var(--praxisbeispiel_margin_prozent);
  /*Hier nicht flexen, denn das führt nur dazu, dass man im js auch noch den marginRight animieren muss. Auch, wenn die width der Praxisbeispiele vorgegeben ist?*/
  float: left;
  background-color: var(--bg_hell);
  color: var(--fg_hell);
  border: var(--border) solid var(--bg_hell);
  display: flex;
  flex-direction: column;
  align-content: start;
  position: relative;
  /*Für das Schließen-Kreuz*/
  gap: 1em; }

.praxisbeispiel:not(.gross):not(.a2) {
  height: clamp(25em, 100vh, 35em); }

/*Man soll wenigstens das ganze Karussel ohne Scrollen sehen können.*/
.praxisbeispiel > * {
  margin: 0em; }

.praxisbeispiel__heading {
  flex: 1 1 4.5em;
  background-color: var(--bg_hell);
  color: var(--fg_hell);
  padding: var(--box_padding) var(--box_padding) 0 var(--box_padding); }

.praxisbeispiel_kunde {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  overflow-wrap: anywhere; }

.praxisbeispiel_titel {
  margin-top: 1em; }

.praxisbeispiel_logo {
  flex: 0 0 20%;
  max-height: 5em;
  padding: 0 var(--box_padding);
  display: block;
  pointer-events: none; }

.ref_img {
  margin: 0 auto;
  display: block;
  max-width: 100%;
  max-height: 71px;
  object-fit: contain; }

.praxisbeispiel_elements {
  position: relative; }

.praxisbeispiel:not(.gross):not(.a2) .praxisbeispiel_elements {
  height: 100%;
  font-size: smaller;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding: 0 var(--box_padding); }

/*Ich hätte gerne, dass jede section höchstens so lang ist wie ihr content und andererseits auch unter ihre Contentgröße schrumpfen kann.
Ich hätte eigentlich gerne flex: 1 1 content, und verstehe nicht, warum das die Spalte zerschießt, denn mit min-height:0 sollten die Sections eigentlich beliebig schrumpfen können.
Irgendwie tun weder max-height noch min-height, was sie sollen.*/
.praxisbeispiel_elements section {
  flex: 1 1 0;
  /*max-height:min-content;min-height:0;*/ }

.praxisbeispiel:not(.gross):not(.a2) .praxisbeispiel_elements section {
  overflow-y: hidden;
  margin: 0em;
  position: relative; }

.praxisbeispiel__abschnittsueberschrift {
  margin: 1em 0 0.125em 0; }

.praxisbeispiel__abschnittsueberschrift:first-child {
  margin-top: 0; }

/*.kurzversion,
.langversion {
    display: inline;
}
.praxisbeispiel:not(.gross):not(.a2) .langversion {
    display: none;
}*/
.praxisbeispiel:not(.gross):not(.a2) .praxisbeispiel_elements p {
  margin: 0; }

.fade-out {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 5em;
  margin: 0;
  padding: 0;
  background-image: -webkit-gradient(linear, top, bottom, from(transparent), to(white));
  background-image: -webkit-linear-gradient(to bottom, transparent, white);
  background-image: -moz-linear-gradient(to bottom, transparent, white);
  background-image: -o-linear-gradient(to bottom, transparent, white);
  background-image: linear-gradient(to bottom, transparent, white); }

.gross .fade-out,
.a2 .fade-out {
  display: none; }

.mehrLesenBtn {
  display: block;
  font-size: 1em;
  cursor: pointer;
  border-radius: 0em;
  border: none;
  margin-top: 0.5em;
  margin-bottom: 0.75em;
  margin-left: auto;
  margin-right: auto;
  padding: 1em 10%;
  width: 80%; }

.zurueck {
  display: block;
  font-size: 1em;
  cursor: pointer;
  border-radius: 0em;
  border: none;
  margin-top: 0.5em;
  margin-bottom: 0.75em;
  margin-left: auto;
  margin-right: auto;
  padding: 1em 10%; }

.praxisbeispiel:not(.verkleinerbar) .closeZurueckBtn {
  display: none; }

/**************************************
    GROSS-ANSICHT
 **************************************/
/*Es gibt virtuell 3 gleichbreite Spalten, von denen die ersten beiden zusammengefasst sind. Nur beim "zurueck"-Button spielt es eine Rolle.
Vertikal unterteilt sich der Inhalt auf viele (derzeit 6) unterschiedlich hohe virtuelle Zeilen.*/
.praxisbeispiel.a2,
.praxisbeispiel.gross {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: repeat(5, auto);
  align-items: start;
  /*Das macht vertikale Paddings weg.*/
  /*padding-right: var(--gap);*/
  column-gap: var(--gap);
  background: var(--bg_hellblau); }

/*Kunde nimmt die ganze erste Zeile ein. In der Einzelansicht gönnen wir uns ein bisschen mehr Padding.*/
.praxisbeispiel.gross .praxisbeispiel__heading,
.a2 .praxisbeispiel__heading {
  grid-column: 1/3;
  background-color: var(--bg_hell);
  /*padding: var(--box_padding);*/
  margin: var(--box_padding) var(--box_padding) 0 var(--box_padding); }

/*titel und elements sind beide links.*/
.gross .praxisbeispiel_elements,
.a2 .praxisbeispiel_elements {
  grid-column: 1/3;
  background-color: var(--bg_hell);
  margin: 0 var(--box_padding);
  padding: var(--box_padding); }

/*elements erstreckt sich vertikal über 3 Zeilen, damit es sich sowohl mit dem Bild als auch mit dem Formular und dem pdf-Icon überlappen kann.*/
.gross .praxisbeispiel_elements,
.a2 .praxisbeispiel_elements {
  grid-row-end: span 3; }

.gross .praxisbeispiel_elements section,
.a2 .praxisbeispiel_elements section {
  flex: 0 1 content; }

/*Das Formular soll nur zu sehen sein, wenn das PB aufgeklappt ist.*/
.referenzPerMail {
  display: none; }

.gross .referenzPerMail,
.a2 .referenzPerMail {
  display: flex;
  flex-direction: column;
  padding-right: var(--box_padding); }

/*Bild und Formular sind rechts*/
.gross .praxisbeispiel_logo,
.a2 .praxisbeispiel_logo,
.gross .referenzPerMail,
.a2 .referenzPerMail {
  grid-column: 3;
  /*Das Element bekommt automatisch diesen Platz.*/ }

.send_pdf {
  margin-left: 0.5em; }

.gross .send_pdf,
.a2 .send_pdf {
  height: 2em;
  justify-self: center; }

/*Das Bild erstreckt sich vertikal über 2 Zeilen, damit es sich sowohl mit titel als auch mit elements überlappen kann.*/
.gross .praxisbeispiel_logo,
.a2 .praxisbeispiel_logo {
  grid-row: 1 / span 2;
  margin-top: var(--box_padding);
  display: block;
  /*background-color: var(--bg_hell);*/
  background-image: url(/images/retina/kundenlogos_staffelei.svg);
  background-origin: content-box;
  /*size relative to content-box*/
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  margin-right: var(--box_padding);
  min-height: 250px;
  position: relative;
  pointer-events: auto; }

.praxisbeispiel.a2 .ref_img,
.praxisbeispiel.gross .ref_img {
  position: absolute;
  top: 12%;
  left: 50%;
  height: 71px;
  width: 133px;
  margin-left: calc(-133px / 2);
  object-fit: contain; }

.gross img,
.a2 img {
  margin-top: 0em; }

/*fancy_input*/
.fancy-input {
  margin: 0.5em 0 0em 0;
  position: relative; }

.fancy-input label {
  /*Das ist das label, was oben auf der Kante sitzt.*/
  color: black;
  background-color: rgba(0, 0, 0, 0);
  padding: 0 0.2em;
  font-size: 0.8em;
  position: absolute;
  top: -1.4em;
  left: 0em;
  transition: all 0.3s ease;
  opacity: 0; }

.fancy-input label.like-placeholder {
  color: black;
  background-color: rgba(0, 0, 0, 0);
  font-size: 1em;
  top: 0.8em;
  left: 0.5em;
  padding: 0;
  opacity: 0.3; }

.fancy-input input {
  border-radius: 0em;
  outline: none; }

.fancy-input > * {
  padding: 1em; }

/*Formular zum Anfordern des pdf*/
.referenzPerMail__heading {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-end;
  justify-content: space-between;
  overflow-wrap: anywhere;
  /*padding: var(--box_padding) var(--box_padding) 0 var(--box_padding);*/
  text-align: start; }

.referenzPerMail__form {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center; }

.referenzPerMail__form > * {
  flex: 1 1 2em;
  font-size: 1rem; }

.referenzPerMail__input {
  border: var(--border) solid var(--bg_dunkel);
  text-indent: 0.5em;
  outline: none;
  margin-top: 0.5em;
  line-height: 1.5; }

.referenzPerMail__input::placeholder {
  opacity: 0.3; }

.referenzPerMail__button {
  background-color: var(--bg_dunkel);
  color: white;
  width: 100%;
  margin-top: 0.5em; }

.praxisbeispiel .datenschutzerklaerung {
  display: flex;
  align-self: center;
  color: black;
  font-size: 0.8rem;
  margin-top: 0.5em; }

.praxisbeispiel.verkleinerbar .zurueck {
  grid-row: -1;
  grid-column: 2; }

.praxisbeispiel.a2 .mehrLesenBtn,
.praxisbeispiel.gross .mehrLesenBtn {
  display: none; }

.praxisbeispiel.verkleinerbar .close {
  position: absolute;
  right: 1em;
  /*var(--padding)*/
  /*wird mit padding gemacht*/
  top: 1em;
  color: orange;
  width: 2rem;
  cursor: pointer; }

.praxisbeispiel__kundenzitat {
  font-style: italic; }

/* Modal Trigger */
.modal__trigger {
  cursor: pointer;
  transition: opacity 200ms linear; }

.modal__trigger:hover {
  opacity: 0.8;
  transition: opacity 200ms linear; }

.modal__trigger:active {
  opacity: 0.7;
  transition: opacity 200ms linear; }

/* The Modal (background) */
.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 100;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: scroll;
  /* Enable scroll if needed */
  background-color: black;
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.5);
  /* Black w/ opacity */ }

/* Modal Content */
.modal__contentBox {
  position: relative;
  margin: auto;
  margin-bottom: 2em;
  width: 95%;
  padding: 48px 2px 2px 2px;
  max-height: 95vmin;
  max-width: 95vmin;
  background-color: var(--bg_dunkel);
  display: flex;
  justify-content: center;
  flex-flow: row wrap; }

#modal__imgBox {
  flex: 100%; }

#modal__img {
  width: 100%; }

/* Modal Caption */
#modal__caption {
  margin: auto;
  display: block;
  width: 100%;
  text-align: center;
  color: white;
  min-height: 38px; }

/* Modal Zoom Animation */
.modal__contentBox,
#modal__caption {
  animation-name: zoom;
  animation-duration: 0.6s; }

@keyframes zoom {
  from {
    transform: scale(0); }
  to {
    transform: scale(1); } }
/* The Close Button */
.modal__close {
  position: absolute;
  top: 0px;
  right: 0px;
  color: #f1f1f1;
  font-size: 40px;
  width: 40px;
  font-weight: bold;
  transition: 0.3s; }

.modal__close:hover,
.modal__close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer; }

.modal__close:active {
  color: rgba(187, 187, 187, 0.741); }

/*****************************************************************************
    #HEADER DESKTOP 
 *****************************************************************************/
/* Links */
/*a*/
.toc,
.stoc {
  display: inline-block;
  padding: 1em 1em; }

/*a*/
.toc {
  color: white; }

/*a*/
.toc:hover,
.stoc {
  color: var(--button_text_hover);
  background: white; }

.stoc:hover {
  opacity: 1;
  /* überschreibe Base-Styles*/ }

/* Unterstreichung */
/*a*/
.toc:hover,
.stoc,
.scroll_container .sel.level1:not(.ausklappbar),
.scroll_container .sel.level1:not(.ausklappbar) a,
.scroll_container .sel.level2:not(.ausklappbar),
.scroll_container .sel.level2:not(.ausklappbar) a,
.scroll_container .sel.level3,
.scroll_container .sel.level3 a,
.scroll_container .level1:hover,
.scroll_container .level2:hover,
.scroll_container .level2 a:hover,
.scroll_container .level3 a:hover {
  -webkit-text-decoration-line: underline;
  -webkit-text-decoration-color: var(--hauptnavigation_bg_selected);
  -webkit-text-decoration-style: solid;
  -webkit-text-decoration-thickness: 0.2em;
  text-decoration-line: underline;
  text-decoration-color: var(--hauptnavigation_bg_selected);
  text-decoration-style: solid;
  text-decoration-thickness: 0.2em;
  text-underline-offset: 0.3em;
  line-height: 1.5;
  transition: color 100ms linear, text-decoration-color 100ms linear; }

.scroll_container a,
.scroll_container li {
  text-decoration-thickness: 0.2em;
  text-underline-offset: 0.3em;
  line-height: 1.5; }

.kopf {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  margin-bottom: 1em;
  background-color: var(--bg_dunkel); }

.kopf::after {
  content: "";
  /*display: block;
  height: 1em;
  min-height: 1em;
  width: 100%;
  background: white;
  opacity: 0.6;
  position: absolute;
  top: 100%;*/ }

.kopf_ohne_rand {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--gap);
  height: var(--header-height);
  position: relative; }

.logo_desktop {
  flex: 0 1 25%; }

.logo_desktop__img {
  width: 100%;
  max-width: 275px;
  padding: 0.75em 0.5em; }

.login_und_suche {
  flex: 0 1 6em;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--gap);
  padding-bottom: 1em; }

.login {
  display: flex;
  gap: calc(0.5*var(--gap));
  align-items: center;
  color: var(--fg_dunkel);
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.3em; }

.login:hover {
  color: var(--fg_dunkel);
  -webkit-text-decoration-line: underline;
  -webkit-text-decoration-color: var(--hauptnavigation_bg_selected);
  -webkit-text-decoration-style: solid;
  -webkit-text-decoration-thickness: 0.1em;
  text-decoration-line: underline;
  text-decoration-color: var(--hauptnavigation_bg_selected);
  text-decoration-style: solid;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.3em; }

.login img {
  width: 25px;
  height: 25px;
  display: flex; }

.login p {
  display: none;
  margin: 0; }

/* Suche */
.suche__trigger {
  visibility: hidden;
  position: absolute;
  top: -10em;
  left: 0; }

.suche__label {
  display: block;
  height: 2em;
  width: 2em;
  cursor: pointer;
  background-image: url("/images/icons/search/search1.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain; }

.suche__label:hover {
  opacity: 0.8; }

.suche__label:active {
  opacity: 0.75; }

.suche__box {
  position: absolute;
  top: 0%;
  left: 50%;
  right: 0%;
  z-index: 200;
  /*width: 80%;*/
  height: auto;
  background-color: #e9f2fa;
  box-shadow: 0 0 6px #888;
  padding: 12px;
  transition: transform .6s ease-in, opacity .6s linear;
  -webkit-transition: transform .6s ease-in, opacity .6s linear;
  transform: translateY(-6em);
  -webkit-transform: translateY(-6em);
  opacity: 0; }

.suche__trigger:checked ~ .suche__box {
  transform: translateY(8em);
  -webkit-transform: translateY(8em);
  opacity: 1;
  transition: transform .6s ease-out, opacity .6s;
  -webkit-transition: transform .6s ease-out, opacity .6s; }

/*input*/
.suchfeld {
  width: 98%;
  margin: 0 auto;
  background-color: #fff;
  border: 1px solid #0099cc;
  font-size: 1rem;
  line-height: 1.5;
  text-indent: 0.5em;
  opacity: 1; }

.suchfeld:hover {
  border-color: #ff8700; }

/* Horizontale Haupt-Navigation*/
.horizontale_hauptnavi {
  flex: 1 1 auto;
  background-color: var(--bg_dunkel); }

.hauptnavi {
  display: flex;
  flex-direction: row;
  justify-content: center;
  column-gap: var(--abstand_klein); }

.hauptnavi__nav-item {
  text-align: center;
  background-color: var(--bg_dunkel);
  cursor: pointer;
  line-height: 1.5; }

/*li*/
#hamburger_embedded {
  display: none;
  margin-bottom: 0px; }

/*****************************************************************************
    #HEADER MOBILE 
 *****************************************************************************/
.logo_mobile__img {
  display: block;
  width: 100%;
  max-width: 250px;
  max-height: var(--header-height);
  padding: 0.5em; }

/* Hamburger-Hauptnavigation*/
.topnavi_und_hamburgernavi {
  display: none;
  margin-bottom: 1em;
  background-color: var(--bg_dunkel);
  position: fixed;
  height: var(--header-height);
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: auto; }

.hamburger-wrapper {
  height: auto; }

.hamburger_hauptnavi {
  display: none;
  align-items: center;
  margin-bottom: 0;
  justify-content: space-between;
  height: 5em;
  gap: 1em; }

.hamburger_hauptnavi > * {
  flex: auto;
  display: flex;
  justify-content: center;
  border: 0;
  background-color: inherit;
  padding: 0; }

.logo_mobile {
  justify-content: flex-start; }

.login_und_suche_mobil {
  flex: 1 0 8em;
  gap: 2em;
  justify-content: flex-end;
  padding-right: 0.5em; }

/* Dropdown Button */
/* Quelle: https://sharkcoder.com/blocks/hamburger */
#dropDownBtn {
  display: none; }

.dropDown__trigger {
  --top-position: 38%;
  flex: 0 0 4.5em;
  align-self: stretch;
  position: relative;
  display: inline-block;
  cursor: pointer;
  transition: transform 500ms linear, top 500ms linear;
  min-height: 3em;
  min-width: 4.5em; }

.dropDown__trigger span {
  background: var(--fg_dunkel);
  position: absolute;
  left: 20%;
  height: 0.25em;
  width: 60%;
  border-radius: 4px;
  transition: all .5s; }

.dropDown__trigger span:first-child {
  top: var(--top-position); }

.dropDown__trigger span:nth-child(2) {
  top: calc(var(--top-position) + 0.4em); }

.dropDown__trigger span:nth-child(3) {
  top: calc(var(--top-position) + 0.85em); }

/* Hamburger Animation*/
#dropDownBtn + label span:first-child {
  transition: top .15s .15s, transform .15s; }

#dropDownBtn + label span:nth-child(2),
#dropDownBtn + label span:nth-child(3) {
  transition: top .15s .15s, transform .15s; }

#dropDownBtn:checked + label span:first-child {
  top: calc(var(--top-position) + 0.4em);
  transform: rotate(45deg);
  transition: top .15s, transform .15s .15s; }

#dropDownBtn:checked + label span:nth-child(2),
#dropDownBtn:checked + label span:nth-child(3) {
  top: calc(var(--top-position) + 0.4em);
  transform: rotate(-45deg);
  transition: top .15s, transform .15s .15s; }

/* Dropdown Content */
.dropdown {
  /* The container <div> - needed to position the dropdown content */
  position: relative;
  display: inline-block; }

.drop-content {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--bg_dunkel);
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 100;
  transition: max-height 200ms ease-out;
  max-height: 0;
  overflow-y: hidden; }

#dropDownBtn:checked ~ .drop-content {
  transition: max-height 400ms ease-in;
  max-height: calc(100vh - var(--header-height));
  overflow-y: scroll; }

.ausklapp-content {
  transition: max-height 500ms ease-out;
  max-height: 0;
  overflow: hidden; }

.ausgeklappt {
  transition: max-height 1000ms ease-in;
  max-height: 200vh; }

/*nav*/
.scroll_container {
  flex: 1 1 25%;
  font-size: 1.2rem;
  color: var(--fg_normalblau);
  line-height: 1.5;
  width: 100%; }

.scroll_container,
.scroll_container a {
  color: white; }

.scroll_container ul {
  display: flex;
  flex-direction: column; }

.scroll_container li.level1,
.scroll_container li.level2,
.scroll_container li.level3 {
  text-align: left;
  padding: var(--buttons_padding); }

.scroll_container li.level1 {
  padding-left: var(--level1_buttons_padding_h); }

.scroll_container li.level3 {
  padding-left: var(--level3_buttons_padding_h); }

.scroll_container ul ul {
  border: 0;
  gap: 0 0; }

.level1 {
  font-weight: bold; }

.drop {
  float: none;
  /*padding:var(--buttons_padding);*/
  /*font-size:1.2em;*/ }

/* Mobile Suche */
.search__form {
  display: none;
  position: relative; }

.search__trigger {
  visibility: hidden;
  position: absolute;
  top: -10em;
  left: 0; }

.search__label {
  display: none;
  height: 2em;
  width: 2em;
  cursor: pointer;
  background-image: url("/images/icons/search/search1.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain; }

.search__label:hover {
  opacity: 0.8; }

.search__label:active {
  opacity: 0.75; }

.search__box {
  position: fixed;
  top: 0%;
  left: 20%;
  right: 20%;
  z-index: 200;
  /*width: 80%;*/
  height: auto;
  background-color: #e9f2fa;
  box-shadow: 0 0 6px #888;
  padding: 12px;
  transition: transform .6s ease-in, opacity .6s linear;
  -webkit-transition: transform .6s ease-in, opacity .6s linear;
  transform: translateY(-6em);
  -webkit-transform: translateY(-6em);
  opacity: 0; }

.search__trigger:checked ~ .search__box {
  transform: translateY(6em);
  -webkit-transform: translateY(6em);
  opacity: 1;
  transition: transform .6s ease-out, opacity .6s;
  -webkit-transition: transform .6s ease-out, opacity .6s; }

.search__item {
  list-style-type: none;
  margin-top: -15px; }

/*****************************************************************************
    #MAIN
 *****************************************************************************/
/* Seitenelemente */
/*gap ersetzt (fast?) alle margins
box-sizing:border-box heißt, dass die Größe einer Box definiert wird als Größe bis zum Rand der Box, nicht Breite des Inhalts.
Das passt nicht mit den errechneten Werten oben zusammen!!!*/
/* Platz für Header */
body::before {
  content: "";
  display: block;
  margin-top: calc(var(--header-height) + 1.5em); }

.seitennavi_und_main {
  width: var(--width_four_col);
  align-self: center;
  display: flex;
  flex-direction: row;
  gap: var(--gap) var(--gap);
  box-sizing: border-box;
  margin-top: 1em;
  flex-grow: 1; }

main {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: stretch;
  box-sizing: inherit;
  gap: var(--gap) var(--gap);
  flex: 1 1 75%;
  min-width: 0; }

main p {
  line-height: 1.4; }

/* Seitenelemente im content.htm*/
.box {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: flex-start;
  padding: var(--box_padding);
  box-sizing: inherit;
  min-width: var(--min_spaltenbreite);
  max-width: var(--max_width); }

.box-25 {
  flex: 1 0 24%; }

.box-33, .newsletterBox {
  flex: 1 0 32%; }

.box-50 {
  flex: 1 0 49%; }

.box-66, .aufmacher, .startseite__aufmacher, .page-newsletter__aufmacher, .page-ablaeufe_veraendern__aufmacher, .page-zensus__aufmacher {
  flex: 1 0 66%;
  /*min-width: var(--min_doppelspaltenbreite);*/ }

.box-75 {
  flex: 1 0 74%;
  /*min-width: var(--min_doppelspaltenbreite);*/ }

.box-100 {
  flex: 1 0 100%;
  /*min-width: var(--min_doppelspaltenbreite);*/ }

/*Centered Box*/
.box--centered {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: flex-start;
  padding: var(--box_padding);
  box-sizing: inherit;
  min-width: var(--min_spaltenbreite);
  max-width: var(--max_width);
  min-width: 0;
  max-width: var(--max_width);
  display: flex;
  justify-content: center;
  flex-flow: row wrap; }

.box--centered > * {
  flex: 0 1 80%;
  margin-left: auto;
  margin-right: auto; }

.whiteBox, .aufmacher, .startseite__aufmacher, .page-newsletter__aufmacher, .page-ablaeufe_veraendern__aufmacher, .page-zensus__aufmacher, .page-firma__box, .page-karriere__aufmacher, .newsletterBox {
  color: var(--fg_hell);
  background-color: var(--bg_hell);
  border: var(--abstand_klein) solid var(--fg_normalblau); }

.blueBox, .augenfang, .startseite__kleineBox {
  color: var(--fg_dunkel);
  background-color: var(--bg_normalblau);
  border: none; }

.blueBox > *, .augenfang > *, .startseite__kleineBox > * {
  color: inherit; }

.blueBox h1, .augenfang h1, .startseite__kleineBox h1,
.blueBox h2,
.augenfang h2,
.startseite__kleineBox h2,
.blueBox h3,
.augenfang h3,
.startseite__kleineBox h3,
.blueBox h4,
.augenfang h4,
.startseite__kleineBox h4,
.blueBox h5,
.augenfang h5,
.startseite__kleineBox h5,
.blueBox h6,
.augenfang h6,
.startseite__kleineBox h6,
.blueBox p,
.augenfang p,
.startseite__kleineBox p {
  color: var(--fg_dunkel); }

.blueBox a, .augenfang a, .startseite__kleineBox a {
  color: var(--fg_dunkel);
  font-weight: bold; }

.blueBox .bulleted > li::before, .augenfang .bulleted > li::before, .startseite__kleineBox .bulleted > li::before {
  color: var(--fg_dunkel); }

.blueBox .default li::before, .augenfang .default li::before, .startseite__kleineBox .default li::before {
  color: var(--fg_dunkel); }

.aufmacher, .startseite__aufmacher, .page-newsletter__aufmacher, .page-ablaeufe_veraendern__aufmacher, .page-zensus__aufmacher {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: flex-start;
  padding: var(--box_padding);
  box-sizing: inherit;
  min-width: var(--min_spaltenbreite);
  max-width: var(--max_width); }

.aufmacher li, .startseite__aufmacher li, .page-newsletter__aufmacher li, .page-ablaeufe_veraendern__aufmacher li, .page-zensus__aufmacher li {
  margin-top: 0.5em; }

.augenfang {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: flex-start;
  padding: var(--box_padding);
  box-sizing: inherit;
  min-width: var(--min_spaltenbreite);
  max-width: var(--max_width);
  flex: 1 0 32%;
  color: var(--fg_dunkel);
  justify-content: space-between; }

.augenfang img {
  max-width: 100%; }

.kontakt__symbole {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-content: space-evenly;
  align-items: center;
  line-height: 3em;
  gap: 1em; }

.kontakt__symbole img {
  height: 2em;
  width: 2em; }

.kontakt__item {
  color: var(--bg_normalblau);
  flex: 1 1 20%;
  margin-left: 3%;
  min-width: 0; }

.kontakt__link {
  display: flex;
  align-items: center;
  gap: 0.4em; }

.bestell-paragraph {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1em; }

.bestell-link {
  display: flex;
  align-items: center;
  gap: 0.5em; }

.bestell-link img {
  height: 2.5em; }

.videoBox {
  display: flex;
  flex-direction: column;
  justify-content: start;
  padding: var(--box_padding);
  min-width: var(--min_doppelspaltenbreite);
  flex: 1 0 100%;
  color: var(--bg_dunkel);
  background-color: var(--bg_hell);
  box-sizing: inherit; }

.videoText {
  display: flex;
  flex-direction: column;
  justify-content: start;
  padding: var(--box_padding);
  flex: 2 2 66%;
  color: var(--fg_hell);
  background-color: var(--white);
  box-sizing: inherit;
  border: var(--abstand_klein) solid var(--fg_normalblau); }

.video {
  display: flex;
  flex-direction: column;
  justify-content: start;
  padding: var(--box_padding);
  flex: 2 2 33%;
  color: var(--fg_hell);
  background-color: var(--white);
  box-sizing: inherit;
  border: var(--abstand_klein) solid var(--fg_normalblau); }

.kurzueberblick {
  display: flex;
  flex-direction: column;
  justify-content: start;
  box-sizing: inherit;
  padding: var(--padding);
  flex: 2 2 33%;
  color: var(--fg_hell);
  background-color: var(--white);
  border: var(--abstand_klein) solid var(--fg_normalblau);
  padding: var(--box_padding); }

.steckbrief_box {
  flex: 1 0 32%;
  height: auto;
  box-sizing: border-box;
  color: var(--fg_dunkel);
  display: flex;
  flex-flow: column nowrap; }

.steckbrief_box a {
  color: var(--fg_dunkel);
  font-weight: bold; }

.steckbrief_top {
  padding: var(--box_padding);
  height: fit-content;
  font-weight: bold;
  color: var(--fg_dunkel);
  background-color: var(--bg_normalblau); }

.steckbrief_logo {
  height: 70px;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: var(--white);
  margin: 0.25em auto;
  width: 100%; }

.steckbrief_img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  margin: 0.25em auto;
  height: 100%; }

.steckbrief_content {
  margin: 0;
  padding: var(--box_padding);
  background-color: var(--bg_normalblau);
  flex: 1; }

.steckbrief_content ul {
  padding-left: 12px; }

.steckbrief_content li {
  list-style-type: square;
  padding-bottom: 0.5em;
  margin-left: 0.25em; }

.einspalter {
  flex: 1 0 100%;
  padding: var(--padding);
  display: block; }

.main_ul {
  display: block; }

.main_il {
  margin-bottom: var(--padding); }

.main_il:last-child {
  margin-bottom: 0; }

/* Logo mit Streifen */
.streifen {
  flex: 1 0 32%;
  height: auto;
  box-sizing: border-box;
  color: var(--fg_dunkel);
  display: flex;
  flex-flow: column nowrap; }

.streifen__top {
  padding: var(--box_padding);
  height: fit-content;
  font-weight: bold;
  color: var(--fg_dunkel);
  background-color: var(--bg_normalblau);
  flex: 0 1 1em; }

.streifen__logo {
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: var(--white);
  margin: 0.25em auto;
  text-align: center;
  flex: 0 1 100px;
  max-height: 150px; }

.streifen__body {
  margin: 0;
  padding: var(--box_padding);
  background-color: var(--bg_normalblau);
  flex: 1; }

/*****************************************************************************
    VERTICAL NAVI 
 *****************************************************************************/
/*Die Rahmenlinien der Seitennavi sind keine borders der einzelnen <li>, sondern border und gap der <ul>.*/
/*nav*/
.seitennavi {
  flex: 1 1 25%;
  color: var(--fg_normalblau);
  line-height: 1.5;
  position: static;
  top: 8em;
  left: 0;
  align-self: flex-start; }

.seitennavi ul {
  display: flex;
  flex-direction: column;
  border: var(--abstand_klein) solid var(--fg_normalblau);
  line-height: 1.5; }

.seitennavi a {
  color: var(--bg_normalblau); }

/*.seitennavi li {
    text-align: left;
    padding: var(--buttons_padding);
}*/
.seitennavi li.level2,
.seitennavi li.level3 {
  text-align: left;
  padding: var(--buttons_padding); }

.seitennavi li.level1 {
  padding-left: var(--level1_buttons_padding_h); }

.seitennavi li.level3 {
  padding-left: var(--level3_buttons_padding_h); }

.seitennavi ul ul {
  border: 0;
  gap: 0 0; }

.seitennavi .sel:not(.level3),
.seitennavi .sel:not(.level3) a {
  color: white;
  background-color: var(--fg_normalblau); }

.topBorder {
  border-top: 1px solid var(--fg_normalblau); }

.singlesub {
  display: none; }

/* Unterstreichung */
.seitennavi .sel.level3 a,
.seitennavi .level2 a:hover,
.seitennavi .level3 a:hover {
  -webkit-text-decoration-line: underline;
  -webkit-text-decoration-color: var(--hauptnavigation_bg_selected);
  -webkit-text-decoration-style: solid;
  -webkit-text-decoration-thickness: 0.2em;
  text-decoration-line: underline;
  text-decoration-color: var(--hauptnavigation_bg_selected);
  text-decoration-style: solid;
  text-decoration-thickness: 0.2em;
  text-underline-offset: 0.3em;
  line-height: 1.5;
  transition: color 100ms linear, text-decoration-color 100ms linear; }

.seitennavi a {
  text-underline-offset: 0.3em;
  line-height: 1.5; }

/*****************************************************************************
    FOOTER
 *****************************************************************************/
.footer {
  color: var(--fg_dunkel);
  background-color: var(--bg_dunkel);
  display: flex;
  flex-flow: column nowrap;
  margin-top: 2em; }

/*.footer p,
.footer li a {
    font-size: medium;
}*/
.footer a {
  color: inherit; }

.contact_us {
  color: var(--fg_normalblau);
  background-color: var(--bg_hellblau);
  padding-bottom: var(--padding); }

.contact_us__wrapper {
  display: flex;
  flex-flow: column nowrap;
  align-content: center;
  align-items: center;
  padding: 1em 0; }

.contact_us__heading {
  padding: 0.4em;
  margin-top: 0em;
  margin-bottom: 0em; }

.contact_us__icon {
  max-width: 30px;
  max-height: 30px;
  padding-right: var(--padding);
  color: var(--fg_normalblau);
  /*Die Farbe der icons geht erst, wenn es svgs sind.*/
  display: inline-block; }

.contact_us__row {
  /*width: var(--max_width);*/
  align-self: stretch;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
  gap: 2em;
  padding-top: 1em; }

.contact_us__column {
  flex: 1 1 0;
  display: flex;
  align-items: center; }

.contact_us__tel_buerozeit {
  font-size: small;
  font-style: italic;
  color: var(--fg_normalblau);
  margin: 0; }

.contact_us__link {
  font-weight: bold;
  color: var(--fg_normalblau);
  display: flex;
  align-items: center;
  flex: 1; }

.footernavi {
  align-self: center;
  display: flex;
  flex-flow: row wrap;
  width: var(--max_width);
  text-align: left;
  gap: 2em;
  padding-top: 2em; }

.footernavi__heading {
  display: inline-block;
  color: var(--fg_dunkel);
  font-weight: bold;
  font-size: 1.25em;
  margin-top: 0.5em;
  margin-bottom: 0.5em; }

.footernavi__column {
  flex: 1 1 0em;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; }

.footernavi__column:only-child {
  align-items: center; }

.footernavi__column > * {
  max-width: 100%; }

.footernavi__list {
  flex: 1 1 0em;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; }

.footernavi__form {
  display: flex;
  flex-flow: row wrap;
  align-items: stretch; }

.footernavi__form > * {
  margin-bottom: 0.5em; }

.footernavi__button {
  border: var(--border) solid white;
  background: var(--bg_dunkel);
  color: white;
  cursor: pointer;
  padding: 0.75em 1em; }

.footernavi__p {
  font-size: 0.8em; }

.footernavi__inputUndButton {
  display: flex;
  width: 100%; }

.footernavi__specialInput {
  position: absolute;
  top: -500%; }

.footernavi__input {
  border: var(--border) solid white;
  text-indent: 0.5em;
  outline: none;
  flex: 1 1 auto;
  min-width: 9em; }

.footernavi__input::placeholder {
  opacity: 0.3; }

.sicherheitspruefung {
  display: flex;
  flex-flow: row wrap;
  font-size: 0.8em; }

.sicherheitspruefung > * {
  margin: 0; }

.sicherheitspruefung__titel {
  margin-right: 0.5em; }

.sicherheitspruefung__input {
  background-color: var(--bg_forms);
  border: none;
  outline: none;
  text-indent: 0.25em;
  line-height: 1.5; }

.sicherheitspruefung__hinweis {
  word-wrap: break-word; }

#footerslogan {
  margin: 3em;
  align-self: center; }

/**************************************
    SEITENSPEZIFISCH
 *************************************/
/****************************
  /Start
 ****************************/
/*Aufmacher*/
.startseite__box-1 {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: flex-start;
  padding: var(--box_padding);
  box-sizing: inherit;
  min-width: var(--min_spaltenbreite);
  max-width: var(--max_width);
  flex: 1 0 24%; }

.startseite__box-2 {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: flex-start;
  padding: var(--box_padding);
  box-sizing: inherit;
  min-width: var(--min_spaltenbreite);
  max-width: var(--max_width);
  flex: 1 0 49%; }

.startseite__box-3 {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: flex-start;
  padding: var(--box_padding);
  box-sizing: inherit;
  min-width: var(--min_spaltenbreite);
  max-width: var(--max_width);
  flex: 1 0 74%; }

.startseite__box-4 {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: flex-start;
  padding: var(--box_padding);
  box-sizing: inherit;
  min-width: var(--min_spaltenbreite);
  max-width: var(--max_width);
  flex: 1 0 100%; }

.startseite__aufmacher {
  flex: 1 0 74%;
  flex-direction: column;
  justify-content: center;
  padding: 1.5rem;
  gap: 1.5em; }

.startseite__aufmacher_text {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1em; }

.startseite__trick {
  font-size: 1em;
  cursor: pointer;
  border-radius: 0em;
  border: none;
  background-color: var(--fg_normalblau);
  color: white;
  padding: 0.5em;
  width: fit-content;
  transition: opacity 200ms linear, transform 200ms linear;
  box-shadow: 1px 2px 5px 0px #828282;
  padding: 0.75em 1.5em;
  white-space: nowrap; }

.startseite_augenfang {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: flex-start;
  padding: var(--box_padding);
  box-sizing: inherit;
  min-width: var(--min_spaltenbreite);
  max-width: var(--max_width);
  flex: 1 0 24%;
  padding: 0; }

.wortwolke_motto {
  min-height: 5rem;
  max-width: 80%; }

/*Kleine Box*/
.startseite__breit {
  width: fit-content;
  font-size: 2rem;
  font-weight: bold;
  font-family: "Poppins"; }

.startseite__kleineBox {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: flex-start;
  padding: var(--box_padding);
  box-sizing: inherit;
  min-width: var(--min_spaltenbreite);
  max-width: var(--max_width);
  flex: 1 0 24%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center; }

.startseite__kleineBox__p {
  text-align: center; }

/*Referenzen-Box*/
.slideshow {
  flex: 1 0 74%;
  padding: var(--box_padding) 0;
  color: var(--fg_hell);
  background-color: var(--bg_hell);
  border: var(--abstand_klein) solid var(--fg_normalblau);
  overflow: hidden; }

.slideshow__heading {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  padding: 0 var(--box_padding); }

.slideshow__heading > * {
  margin: 0; }

.slideshow-wrapper {
  width: 200%;
  /* space for 2 images */
  margin-top: 1em;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: flex-start;
  transform: translateX(0%); }

.slide {
  flex: 1 1 100%;
  display: grid;
  /*grid-template-columns: repeat(6, 1fr) ;
  grid-template-rows: repeat(2, 1fr);*/
  grid-template-columns: repeat(auto-fit, minmax(133px, 1fr));
  grid-template-rows: repeat(auto-fit, minmax(71px, 1fr));
  justify-content: center;
  justify-items: center;
  align-content: center;
  gap: 8px;
  margin: 0 var(--box_padding); }

.slide__img {
  width: 133px;
  height: 71px;
  filter: grayscale(1);
  opacity: 0.75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block; }

.move_right {
  transform: translateX(-50%); }

.slideshow .move {
  -webkit-transition: transform 1000ms ease;
  -moz-transition: transform 1000ms ease;
  -ms-transition: transform 1000ms ease;
  -o-transition: transform 1000ms ease;
  transition: transform 1000ms ease; }

/*Breitkopf-Boxen*/
.breitKopfBox, #startseite_nachrichten, #onlinetreffen {
  padding: 0;
  border-width: 1px;
  border-style: solid;
  border-color: var(--subnav_unselected);
  flex: 1 0 49%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: stretch;
  min-width: 0; }

/*div*/
.breitKopfBox__mainHeader, .nachrichten__mainheader, .onlinetreffen__mainheader {
  color: #FFFFFF;
  background-color: var(--subnav_unselected);
  font-family: "Poppins";
  font-weight: bold;
  font-size: 1.25em;
  display: flex;
  padding: var(--padding) var(--box_padding); }

/*div*/
.breitKopfBox__body, .nachrichten__body {
  display: flex;
  padding: var(--box_padding); }

/*Nachrichten-Box*/
/*div*/
/*div*/
.nachrichten__body {
  flex-direction: column;
  justify-content: space-between;
  flex: 1; }

/*div*/
.nachricht__titelzeile {
  display: flex; }

/*div*/
.nachricht__termin {
  flex: 1 1 3em;
  margin: 0 0.5em 0 0; }

.nachricht__titelzeile:not(:first-child) {
  margin-top: 1.2em; }

/*a*/
.nachricht__link {
  flex: 1 1 100%;
  font-size: 1em;
  font-weight: bold;
  /*margin-bottom: var(--padding);*/ }

.nachrichten__footerzeile {
  text-align: end;
  margin-top: 1em;
  font-size: 0.9em; }

/*span*/
.nachricht__gt {
  color: var(--hauptnavigation_bg_selected); }

/*Onlinetreffen-Box*/
/*div*/
/*div*/
.onlinetreffen__mainbody {
  flex: 1;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  padding: var(--box_padding); }

/*div*/
.onlinetreffen__iconzeile {
  display: flex;
  font-size: 1rem;
  font-weight: normal;
  margin-top: 0.5em; }

/*img*/
.onlinetreffen__icon {
  height: 18px;
  margin-right: 5px; }

/*img*/
.onlinetreffen__icon_praesentation {
  height: 15px;
  margin-right: 5px; }

/*div*/
.onlinetreffen_box_duration {
  width: 100px;
  font-weight: bold; }

/*div*/
.onlinetreffen__icon-element {
  flex: 0 1 5em;
  margin-right: 1em;
  display: flex;
  align-items: center; }

/*div*/
.onlinetreffen_next_time {
  font-size: 12px; }

/*div*/
.onlinetreffen__content {
  display: flex;
  flex-flow: column nowrap;
  gap: calc(2 * var(--gap)); }

/*div*/
.onlinetreffen__element {
  flex: 1;
  display: block;
  	/*flex-direction: row;
     flex-wrap: nowrap;
     justify-content: flex-start;
     align-items: flex-start;
     gap: 6px;*/ }

/*div*/
.onlinetreffen_box_title {
  font-size: 14px;
  font-weight: bold;
  width: 130px; }

/*div*/
.onlinetreffen_titelzeile {
  font-size: 1.1rem;
  font-weight: bold;
  display: block; }

/*span*/
.onlinetreffen_subtitle {
  overflow: hidden;
  overflow-wrap: anywhere;
  text-overflow: ellipsis; }

/*div*/
.onlinetreffen__bottomzeile {
  margin-top: 1em;
  font-size: 0.9em;
  text-align: end;
  display: flex;
  justify-content: flex-end;
  align-content: flex-end;
  align-items: flex-start;
  gap: 1em; }

/*Links*/
/*a*/
.event,
.nachricht {
  display: block;
  color: #000; }

/*a*/
.event:hover,
.nachricht:hover {
  display: block;
  color: #000;
  color: var(--button_text_hover); }

/*a*/
.nachricht__link {
  color: var(--fg_normalblau); }

/*a*/
.nachricht__link:hover {
  color: var(--button_text_hover); }

/*a*/
.onlinetreffen_more {
  color: var(--subnav_unselected); }

/*a*/
.onlinetreffen_more:hover {
  color: var(--hauptnavigation_bg_selected); }

/*a*/
.participate-link {
  font-size: 1em;
  cursor: pointer;
  border-radius: 0em;
  border: none;
  background-color: var(--fg_normalblau);
  color: white;
  padding: 0.5em;
  width: fit-content;
  transition: opacity 200ms linear, transform 200ms linear;
  box-shadow: 1px 2px 5px 0px #828282;
  display: block;
  margin-top: 1em;
  width: 100%;
  text-align: center; }

/****************************
  /Unternehmen/Team
*****************************/
.page-team {
  flex: 1 1 100%;
  padding: var(--box_padding); }

.team {
  flex: 1 1 74%;
  display: block;
  margin-top: 1em; }

.abteilung {
  display: flex;
  justify-content: start;
  gap: var(--box_padding);
  margin-bottom: 4em; }

.abteilung__icon {
  flex: 1 1 32%;
  display: flex;
  justify-content: center;
  height: auto; }

.mitarbeiter__box {
  flex: 2 1 66%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(48%, 1fr));
  gap: 1em;
  justify-content: start;
  justify-items: start;
  align-content: center; }

.mitarbeiter {
  display: block;
  height: auto; }

.mitarbeiter__bild-box {
  position: relative;
  display: block;
  width: 240px;
  height: 230px;
  overflow: hidden; }

.mitarbeiter__bild {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  visibility: visible;
  width: 240px;
  height: 230px;
  margin: 0; }

.mitarbeiter__bild--focus {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: opacity ease-out 300ms;
  display: block;
  opacity: 0;
  width: 240px;
  height: 230px;
  margin: 0; }

.mitarbeiter__bild-box:hover > .mitarbeiter__bild--focus {
  opacity: 1;
  transition: opacity ease 300ms; }

.mitarbeiter__fach {
  margin-left: 1em; }

/****************************
  /Unternehmen/Firma
*****************************/
.page-firma__box {
  flex: 1 0 100%;
  display: flex;
  flex-flow: row nowrap;
  display: flex;
  padding: var(--box_padding);
  min-width: var(--min_spaltenbreite);
  gap: 3rem; }

.page-firma__mainbox {
  flex: 1 1 65%; }

.page-firma__sidebox {
  flex: 1 1 32%; }

.zitat {
  font-weight: bold;
  font-size: 1em;
  color: var(--bg_normalblau);
  text-align: end; }

.zitatgeber {
  padding-left: 0px;
  font-size: 0.9em;
  font-style: italic;
  color: var(--zitatgeber);
  text-align: end; }

#dirkbox {
  margin: 1em;
  display: flex;
  gap: 1em; }

.dirkbox__img {
  flex: 1 1 20%;
  object-fit: contain;
  max-height: 8em;
  align-self: flex-end; }

.dirkbox__text {
  flex: 1 1 auto; }

#lukaszbox {
  margin: 1em;
  display: flex;
  gap: 1em; }

.lukaszbox__img {
  flex: 1 1 20%;
  object-fit: contain;
  max-height: 8em;
  align-self: flex-end; }

.lukaszbox__text {
  flex: 1 1 auto; }

.float_right {
  width: 202px;
  float: right;
  height: auto;
  padding-left: 14px;
  margin-left: 14px;
  border-left: 1px solid #e0e0e0;
  margin-bottom: 0px;
  padding-top: 0px;
  margin-top: 10px; }

.firma_page h1 {
  padding-top: 0px;
  margin-top: 8px;
  font-size: 14px;
  color: #0082ba;
  margin-bottom: 14px; }

.firma_page p {
  margin: 0px;
  padding: 0px;
  margin-bottom: 18px; }

.jahreszahl {
  font-weight: bold;
  color: var(--bg_normalblau); }

.ausgesprochen {
  font-family: sans-serif;
  font-size: 16px; }

/****************************
  /Unternehmen/Datenschutz
*****************************/
.page-datenschutz__img {
  float: right;
  width: 250px;
  margin: 1em; }

/****************************
  /Unternehmen/Karriere
*****************************/
.page-karriere__aufmacher {
  padding: var(--box_padding);
  display: flex;
  gap: 1em; }

.page-karriere__img {
  width: 148px;
  align-self: center; }

/****************************
  /Unternehmen/Nachrichten
*****************************/
.nachricht__container {
  --min_nachricht_breite: var(--min_spaltenbreite);
  flex: 1 1 100%;
  display: grid;
  justify-items: center;
  justify-content: space-evenly;
  grid-template-columns: repeat(auto-fit, minmax(var(--min_nachricht_breite), 1fr));
  gap: 1em; }

.nachricht__wider {
  --min_nachricht_breite: calc(var(--min_spaltenbreite) * 1.25) ; }

.nachricht__box {
  min-width: var(--min_spaltenbreite);
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  align-content: stretch;
  padding: var(--box_padding);
  border: var(--abstand_klein) solid var(--fg_normalblau); }

.nachricht__box > * + * {
  margin-top: 1em; }

.nachricht__titel {
  color: var(--bg_normalblau);
  font-size: 16px;
  font-weight: bold;
  display: block; }

.nachricht__titelzusatz {
  margin-top: 0.5em;
  display: block; }

.nachricht__info {
  font-style: italic;
  text-align: end; }

.nachricht__kursnr {
  color: var(--grau); }

.nachricht__zeile {
  display: flex;
  justify-content: space-between; }

/*hr*/
.news {
  height: 1px;
  color: #038ed3;
  padding: 0px;
  margin-top: 8px;
  margin-bottom: 6px;
  border-style: solid;
  border-width: 0px;
  border-top-width: 1px;
  border-top-color: #5CC7ED;
  width: 100%; }

.event-form__block {
  margin-top: 1em; }

/****************************
  /Unternehmen/Nachrichten/Termine
*****************************/
.termine-uebersicht h4 {
  margin-bottom: 0; }

.termine-uebersicht div + h4 {
  margin-top: 1em; }

.termine-uebersicht--logo {
  display: flex;
  justify-content: center; }

.termine-box {
  min-width: var(--min_spaltenbreite);
  display: flex;
  flex-flow: column nowrap;
  justify-content: start;
  align-content: stretch;
  padding: var(--box_padding);
  border: var(--abstand_klein) solid var(--fg_normalblau); }

.termine-box--header {
  display: flex;
  gap: 0.5em;
  align-items: center;
  min-height: 6em; }

.termine-box--header > img {
  --breite: 3.5em;
  flex: 1 1 auto;
  width: var(--breite);
  max-width: var(--breite); }

.termine-box--header > * {
  margin: 0; }

.termine-box--termine,
.termine-box--beschreibung {
  margin-top: 1em; }

.termine-box--link {
  font-size: smaller; }

.termine-box--link:hover,
.termine-box--link:focus {
  color: var(--button_text_hover); }

.termine-box--link:hover:active {
  opacity: 0.6; }

/****************************
  /Unternehmen/Newsletter
*****************************/
.page-newsletter__aufmacher {
  display: block; }

.page-newsletter__link {
  float: right;
  margin-left: 1em;
  margin-bottom: 1em; }

.page-newsletter__img {
  width: 100%; }

.page-newsletter__caption {
  margin-top: -1em; }

/*ul*/
.newsletter {
  margin-left: 1em;
  list-style: url("/images/icons/listenicon.gif"); }

/*div*/
.newsletterBox {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: flex-start;
  padding: var(--box_padding);
  box-sizing: inherit;
  min-width: var(--min_spaltenbreite);
  max-width: var(--max_width);
  flex: 1 0 32%; }

/****************************
  /Unternehmen/Kundenbereich
*****************************/
/*.page-kundenbereich__aufmacher {
    @include box();
    @extend .box-75;
    @extend .whiteBox;
    display: block;
}*/
.page-kundenbereich__img {
  width: 100%; }

.login__form {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: stretch;
  /*padding: 0 var(--padding);*/ }

.login__label {
  flex: 1 1 80%;
  font-size: 1em; }

.login__input {
  flex: 1 1 80%;
  background-color: var(--bg_forms);
  border: 1px solid var(--fg_normalblau);
  margin-bottom: 0.5em;
  font-size: 1em;
  line-height: 1.5; }

.login__submitBtn {
  flex: 1 1 80%;
  font-size: 1em;
  padding: 6px 8px;
  margin-top: 1em;
  margin-bottom: 0.5em; }

.login__hinweise {
  flex: 1 1 80%;
  padding: 0;
  font-size: 0.8em;
  color: var(--grau);
  line-height: 1; }

/****************************
  /Unternehmen/Impressum
*****************************/
.impressum {
  color: #0b4c6d; }

/****************************
  /Unternehmen/Datenschutzerklärung
*****************************/
#datenschutzerklaerung h2 {
  font-size: 20px;
  font-weight: bold;
  color: #0082ba;
  padding: 0px;
  margin-bottom: 5px;
  margin-top: 1em; }

#datenschutzerklaerung h3 {
  font-size: 16px;
  font-style: italic;
  color: #0082ba;
  font-weight: normal;
  margin-top: 1em;
  margin-bottom: 0px;
  padding-bottom: 0px;
  padding-top: 0px; }

/****************************
  /Evaluation/Wofuer_ist_es_gut_/Lehrevaluation
*****************************/
.logo_zentral {
  background-image: url(/images/retina/logobox_zensus_zentral.png); }

.logo_unizensus {
  background-image: url(/images/retina/Wort-Bild-Marke_Z.svg);
  height: 70px; }

.logo_datendestille {
  background-image: url(/images/retina/extras_daten_destille.png); }

.prozess_bild {
  width: 90%;
  margin: 1em auto; }

/****************************
  /Evaluation/5. Verfahren optimieren/Abläufe verändern
*****************************/
.page-ablaeufe_veraendern__aufmacher {
  display: block; }

.page-ablaeufe_veraendern__img {
  width: 100%; }

/****************************
  /Evaluation/Loesung/Zensus_7
*****************************/
.page-zensus__aufmacher {
  display: block; }

.page-zensus__img {
  float: right;
  width: 250px;
  margin: 0em 0em 0.5em 1em; }

/****************************
  /Evaluation/Loesung/Demoversion
*****************************/
.demo__form {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: stretch;
  /*padding: 0 var(--padding);*/
  gap: 1em; }

.demo__label {
  flex: 1 1 80%;
  font-size: 1em; }

.demo__input {
  flex: 1 1 calc(50% - 1em);
  background-color: var(--bg_forms);
  border: 1px solid var(--fg_normalblau);
  margin-top: 0.5em;
  font-size: 1em;
  text-indent: 0.25em;
  line-height: 1.5; }

.demo__select {
  flex: 1 1 calc(50% - 1em);
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--bg_forms);
  border: 1px solid var(--fg_normalblau);
  background: url(../../images/klausdemocheckbox.png) center right no-repeat var(--bg_forms);
  margin-top: 0.5em; }

.demo__submitBtn {
  flex: 1 1 80%;
  font-size: 1em;
  padding: 6px 8px;
  margin-top: 0.5em;
  margin-bottom: 0.5em; }

.demo__hinweise {
  flex: 1 1 80%;
  padding: 0;
  font-size: 0.8em;
  color: var(--grau);
  line-height: 1; }

/****************************
  /Evaluation/Wofuer_ist_es_gut_/Lehrevaluation
  /Evaluation/Extras/Überblick
*****************************/
.extras_container {
  flex: 1 0 32%;
  width: 100%;
  height: auto;
  background-color: #fff;
  border: 1px solid var(--bg_normalblau);
  padding: var(--box_padding);
  min-width: var(--min_spaltenbreite); }

.extras_kopf {
  width: 100%;
  height: 60px;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #fff; }

.extras_content {
  width: 100%;
  height: 75px;
  text-decoration: none;
  margin: 0.5em 0 0 0;
  padding: 0;
  background-color: #e8f6fb;
  padding-top: 10px; }

.extras_fuss {
  width: 100%;
  height: 11px;
  background-color: #e8f6fb; }

.overview2 {
  font-weight: 700;
  margin: 0 10px;
  font-size: 12px;
  display: block;
  text-decoration: none;
  color: #0b4c6d !important; }

.overview2 a {
  color: #0b4c6d !important; }

.more2 {
  display: block;
  font-size: 12px;
  color: #0099cc;
  margin-top: 4px;
  text-decoration: none;
  margin-left: 10px; }

.logo-destille {
  background-image: url(/images/extras/extras_datendestille.svg); }

.logo-campusnet {
  background-image: url(/images/extras/extras_campusnet.svg); }

.logo-studip {
  background-image: url(../../images/retina/extras_studip.png); }

.logo-lsf {
  background-image: url(../../../images/retina/extras_his-lsf.png); }

.logo-tombola {
  background-image: url(../../../images/retina/extras_tombola.svg);
  width: 100%; }

.logo-dienstleistung {
  background-image: url(/images/extras/extras_einfuehrungsbegleitung.svg); }

.logo-mehrsprachigkeit {
  background-image: url(/images/extras/extras_multilanguage.svg);
  width: 100%; }

.logo-module {
  background-image: url(../../../images/retina/extras_modulevaluation.png);
  width: 100%; }

.logo-moodle {
  background-image: url(../../../images/retina/extras_moodle.svg); }

.logo-academyfive {
  background-image: url(../../../images/retina/extras_academyfive.png);
  width: 100%; }

/****************************
  /Evaluation/4._Daten_auswerten/Interaktive_Statistik
  /Befragungen/5._Ergebnisse_generieren/Zusammenhaenge_erkennen
*****************************/
.pseudotabelle {
  display: flex;
  padding: 10px 0px; }

.destille_extra {
  flex: 0 0 32%;
  display: block;
  min-width: calc(255px + 2 * var(--box_padding));
  height: auto;
  padding: var(--box_padding);
  line-height: 1.5;
  background-color: var(--bg_normalblau);
  color: white; }

.destille_extra a {
  color: var(--fg_dunkel);
  font-weight: bold; }

.destille_ueberschrift {
  font-weight: bold;
  padding-bottom: 5px; }

.destille_bild {
  width: 255px;
  height: 158px;
  display: block;
  margin: 1em auto; }

.nachfolge {
  float: left;
  width: 100%;
  display: block; }

.singleheadline {
  flex: 1 0 32%; }

#filter1 {
  margin: 8px auto;
  display: inline-block;
  /*border-radius: 0px;
  border: 1px solid #4d8ac9;*/
  /*width: 330px;
  height: 147px;*/
  width: 49%;
  height: 147px;
  background-image: url(/images/retina/daten_destille_beispielkaesten.png);
  background-position: bottom left;
  background-size: 200% 200%; }

#filter2 {
  margin: 8px auto;
  display: inline-block;
  /*border-radius: 0px;
  border: 1px solid #4d8ac9;*/
  /*width: 330px;
  height: 147px;*/
  width: 50%;
  height: 147px;
  background-image: url(/images/retina/daten_destille_beispielkaesten.png);
  background-position: bottom right;
  background-size: 200% 200%; }

#korrelationen {
  /*border-radius: 5px;
  border: 1px solid #4d8ac9;*/
  /*width: 218px;
  height: 135px;*/
  background-image: url(/images/retina/daten_destille_beispielkaesten.png);
  background-position: top right;
  background-size: 300% 200%; }

#gruppenvergleich {
  /*border-radius: 5px;
  border: 1px solid #4d8ac9;*/
  /* width: 218px;
   height: 135px;*/
  background-image: url(/images/retina/daten_destille_beispielkaesten.png);
  background-position: top center;
  background-size: 300% 200%; }

#kreuztabellen {
  /*border-radius: 5px;
  border: 1px solid #4d8ac9;*/
  /*width: 218px;
  height: 135px;*/
  background-image: url(/images/retina/daten_destille_beispielkaesten.png);
  background-position: top left;
  background-size: 300% 200%; }

/****************************
  /Prüfungen/Prüfungsprozess
*****************************/
.page-pruefungsprozess__img {
  width: 100%;
  /*max-width:700px;
  height: 170px;
  background-image:url(/images/retina/Bereichshauptseiten_Pruefungen.png);
  background-size:contain;
  background-repeat: no-repeat;*/
  margin: 1em auto 1em auto; }

.logo_klaus-papier {
  background-image: url(/images/K_Wortbild-Marke_Papier.png); }

.logo_klaus-online {
  background-image: url(/images/K_Wortbild-Marke_Online.svg);
  height: 70px;
  margin-top: 5px; }

.logo_fred {
  background-image: url(/images/retina/logobox_fred.png); }

/****************************
  /Befragungen/Einleitung
*****************************/
.logo_questor5 {
  background-image: url(/images/retina/Wort-Bild-Marke_Q.svg); }

/****************************
  /Kontakt/Kontakt
*****************************/
.contact__form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-content: start;
  align-content: start;
  align-items: stretch;
  gap: 1em; }

.contact__label {
  font-size: 1em; }

.contact__input {
  background-color: var(--bg_forms);
  border: 1px solid var(--fg_normalblau);
  margin-top: 0.5em;
  font-size: 1em;
  text-indent: 0.25em;
  line-height: 1.5; }

.contact__textarea {
  grid-column: span 2;
  background-color: var(--bg_forms);
  border: 1px solid var(--fg_normalblau);
  text-indent: 4px;
  font-size: 1em;
  min-height: 1.5em;
  resize: vertical; }

.contact__submitBtn.btn, .contact__submitBtn.referenzPerMail__button {
  grid-column: span 2;
  width: 100%;
  font-size: 1em;
  padding: 6px 8px; }

.contact__hinweise {
  grid-column: span 2;
  padding: 0;
  font-size: 0.8em;
  color: var(--grau);
  line-height: 1; }

/****************************
  /Kontakt/Anfahrt
*****************************/
.page-anfahrt__img {
  height: 475px;
  width: 675px; }

.page-anfahrt__mobilfix {
  width: 100%;
  max-width: 675px;
  height: auto; }

.anfahrt {
  display: block; }

.anfahrt__hr {
  width: 100%;
  color: var(--hellgrau);
  border-width: 1px;
  margin: 3rem 0 2rem 0; }

/****************************
  /Kontakt/Sitemap
*****************************/
.map-item {
  padding-top: 0.5em; }

.level2-map-item {
  padding-top: 0.25em; }

.level3-map-item {
  padding-left: 1em; }

.level2_map_container {
  padding-left: 1em; }

/****************************
  Fehler 404
*****************************/
.page-fehler_404 {
  display: block;
  width: 100%; }

/*****************************************************************************
    Unternehmen/Referenzen/Karte
 *****************************************************************************/
.page-references-container {
  flex: 1 1 100%;
  display: block;
  max-width: 100%; }

/* Deutschlandkarte ist eingeblendet */
.kartenmaterial {
  display: block;
  width: 700px; }

/*img*/
#karte_dach {
  display: block; }

.land_gross {
  z-index: -2;
  width: 470px;
  height: 500px;
  background-size: contain;
  background-repeat: no-repeat;
  position: relative;
  top: 0px;
  left: 0px;
  display: none; }

#Baden-Wuerttemberg_gross {
  background-image: url(/images/referenzkarte/Baden-Wuerttemberg_Map_2017_2.png); }

#Bayern_gross {
  background-image: url(/images/referenzkarte/Bayern_Map_2017.png); }

#Berlin_gross {
  background-image: url(/images/referenzkarte/Berlin_Map_2017.png); }

#Brandenburg_gross {
  background-image: url(/images/referenzkarte/Brandenburg_Map_2017.png); }

#Bremen_gross {
  background-image: url(/images/referenzkarte/Bremen_Map_2017.png); }

#Hamburg_gross {
  background-image: url(/images/referenzkarte/Hamburg_Map_2017.png); }

#Hessen_gross {
  background-image: url(/images/referenzkarte/Hessen_Map_2017.png); }

#Mecklenburg-Vorpommern_gross {
  background-image: url(/images/referenzkarte/Mecklenburg-Vorpommern_Map_2017.png); }

#Niedersachsen_gross {
  background-image: url(/images/referenzkarte/Niedersachsen_Map_2017.png); }

#Nordrhein-Westfalen_gross {
  background-image: url(/images/referenzkarte/Nordrhein-Westfalen_Map_2017.png); }

#Rheinland-Pfalz_gross {
  background-image: url(/images/referenzkarte/Rheinland-Pfalz_Map_2017.png); }

#Saarland_gross {
  background-image: url(/images/referenzkarte/Saarland_Map_2017.png); }

#Sachsen_gross {
  background-image: url(/images/referenzkarte/Sachsen_Map_2017.png); }

#Sachsen-Anhalt_gross {
  background-image: url(/images/referenzkarte/Sachsen-Anhalt_Map_2017.png); }

#Schleswig-Holstein_gross {
  background-image: url(/images/referenzkarte/Schleswig-Holstein_Map_2017.png); }

#Thueringen_gross {
  background-image: url(/images/referenzkarte/Thueringen_Map_2017.png); }

#Oesterreich_gross {
  background-image: url(/images/referenzkarte/Oesterreich_Map_2017.png); }

#Schweiz_gross {
  background-image: url(/images/referenzkarte/Schweiz_Map_2017.png); }

/* Box-Styling fürs Beispiel */
.standort2 {
  width: 16px;
  height: 16px;
  display: block;
  z-index: 14;
  overflow: hidden; }

.neukunde2 {
  background-image: url(/images/referenzkarte/map_marker_welcome.png);
  background-size: contain; }

.stammkunde2 {
  background-image: url(/images/referenzkarte/map_marker_example.png);
  background-size: contain; }

.referenzkunde2 {
  background-image: url(/images/referenzkarte/map_marker_reference.png);
  background-size: contain; }

/*Zahlenkästen*/
.land_zahl {
  width: 30px;
  height: 28px;
  display: block;
  z-index: 9;
  background-size: contain;
  background-image: url(/images/referenzkarte/Map_Marker.png);
  color: #0d4b6d;
  font-weight: bold;
  font-size: 14px;
  padding-top: 2px;
  text-align: center;
  position: absolute; }

.land_zahl:hover {
  color: #ff6700 !important;
  cursor: pointer; }

/*Länderkoordinaten Zahlenkästen */
#zahl_baden-wuerttemberg {
  top: 370px;
  left: 170px; }

#zahl_bayern {
  top: 378px;
  left: 270px; }

#zahl_berlin {
  top: 136px;
  left: 322px; }

#zahl_brandenburg {
  top: 135px;
  left: 290px; }

#zahl_bremen {
  top: 102px;
  left: 141px; }

#zahl_hamburg {
  top: 73px;
  left: 186px; }

#zahl_hessen {
  top: 263px;
  left: 143px; }

#zahl_mecklenburg-vorpommern {
  top: 70px;
  left: 300px; }

#zahl_niedersachsen {
  top: 126px;
  left: 190px; }

#zahl_nordrhein-westfalen {
  top: 218px;
  left: 102px; }

#zahl_rheinland-pfalz {
  top: 292px;
  left: 70px; }

#zahl_saarland {
  top: 334px;
  left: 58px; }

#zahl_sachsen {
  top: 219px;
  left: 374px; }

#zahl_sachsen-anhalt {
  top: 153px;
  left: 238px; }

#zahl_schleswig-holstein {
  top: 28px;
  left: 174px; }

#zahl_thueringen {
  top: 220px;
  left: 212px; }

#zahl_oesterreich {
  top: 420px;
  left: 440px; }

#zahl_schweiz {
  top: 551px;
  left: 113px; }

/*-- Legende --*/
#legende {
  position: absolute;
  top: 42px;
  left: 483px;
  width: 220px;
  height: 90px;
  color: var(--subheadline);
  font-weight: bold;
  font-size: 14px;
  font-size: 12px;
  z-index: 8855999999; }

#legende_neu {
  background-image: url(../../images/referenzkarte/map_marker_welcome.png);
  background-size: contain; }

#legende_praxisbeispiel {
  background-image: url(../../images/referenzkarte/map_marker_example.png);
  background-size: contain; }

#legende_referenz {
  background-image: url(../../images/referenzkarte/map_marker_reference.png);
  background-size: contain; }

.legende_eintrag {
  display: block;
  font-weight: normal;
  color: #0082ba;
  padding-left: 20px;
  background-position: left center;
  background-repeat: no-repeat;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 20px;
  text-indent: 4px; }

/*-- Allgemeine Funktionalität --*/
#gewicht {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 0px;
  width: 0px; }

#count {
  width: 200px;
  height: 40px;
  display: inline-block;
  font-size: 14px; }

.details {
  display: none;
  position: fixed;
  left: 0px;
  top: 0px; }

#info_referenz {
  position: absolute;
  top: 40px;
  left: 470px;
  width: 250px;
  height: 160px;
  display: block;
  z-index: 111;
  background-color: white; }

.inline {
  display: inline;
  padding-left: 0.5em; }

#backbutton {
  width: 50px;
  height: 37px;
  display: block;
  background-image: url(/images/referenzkarte/back_button.png);
  margin-left: 5px;
  cursor: pointer; }

#backbutton:hover {
  background-image: url(/images/referenzkarte/back_button_hover.png); }

.brumm {
  z-index: 14; }

.brumm:last-of-type {
  border-bottom: none; }

#kartencontainer {
  display: block;
  height: auto; }

#mapviewbutton, #listviewbutton, #overviewbutton {
  color: #0082ba; }

[data-show] {
  display: none; }

[data-show="yes"] {
  display: none; }

[data-show="no"] {
  display: none; }

[data-type="content"] {
  display: none; }

/*****************************************************************************
    Unternehmen/Referenzen/Ueberblick
 *****************************************************************************/
.referenzen_uebersicht__container {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: auto !important;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  gap: 1em; }

.referenzen_uebersicht__imgBox {
  width: 175px;
  height: 150px;
  float: left;
  margin: 0px;
  padding: 0px;
  margin-top: 10px; }

.referenzen_uebersicht_logo_rahmen {
  width: 133px;
  height: 71px;
  border: 1px solid #4FC1E7;
  padding: 5px;
  box-sizing: content-box; }

.referenzen_uebersicht_name {
  font-size: 9px;
  line-height: 13px;
  color: var(--grau);
  padding: 3px;
  width: 140px; }

/*****************************************************************************
    Unternehmen/Referenzen/Liste
 *****************************************************************************/
/* projekte_tab */
#projectstab {
  margin-top: 1em; }

.kunde,
.ref_sub_text {
  width: 140px;
  margin-top: .4em;
  font-size: 9px;
  line-height: 13px;
  color: var(--grau); }

.praxis_titel a {
  font-weight: bold;
  color: var(--subheadline); }

.praxis_more {
  margin: 0;
  padding: 0; }

.kname {
  margin: 0;
  padding: 0; }

#projektlisttext {
  float: left;
  width: 35em; }

/* filter */
#filter {
  clear: both;
  border: solid 1px;
  color: var(--fg_normalblau);
  background: #E8F5FA;
  padding: 1em .5em 1em .5em;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em; }

#filter > * {
  flex: 1; }

#filter div {
  margin: 0; }

#filter #filtertext,
#filter #lkdiv {
  margin-top: .6ex;
  padding-left: .5em; }

#filter #lkdiv {
  text-align: right;
  margin-right: 0;
  padding-right: .2em; }

#filter #filtertext {
  margin-right: .3em;
  margin-top: .5em; }

#filter #filtertext label {
  display: inline-block;
  width: 50%;
  text-align: left; }

#filter input#lkcounter {
  border: none;
  background: #E8F5FA;
  width: 7em;
  text-align: right; }

#filter input[type=checkbox] {
  color: var(--fg_normalblau); }

#filter input[type=text] {
  width: 9em;
  border: solid 1px #4FC1E7;
  color: var(--fg_normalblau);
  font-size: 12px;
  text-indent: 0.5em; }

#filter input[value=Stichwort] {
  color: #aaa; }

#filter select {
  width: 9em;
  border: solid 1px #4FC1E7;
  background: #fff;
  color: var(--fg_normalblau);
  padding-top: .1em;
  padding-bottom: .1em;
  font-size: 12px; }

#filter optgroup {
  font-style: normal;
  font-size: 12px; }

#filter option {
  background: #fff;
  font-size: 12px; }

.filterend {
  clear: both;
  color: #0b4c6d;
  height: 0; }

.referenzen__imgbox {
  border: solid 1px #4FC1E7;
  padding: 5px;
  width: 133px;
  box-sizing: content-box; }

.referenzen__logo {
  float: left;
  margin: 17px 0 17px 38px; }

.referenzen__blicknl {
  clear: left;
  margin-left: 0; }

.referenzen__img {
  width: 133px;
  height: 71px;
  padding: 0;
  margin: 0;
  display: inline-block; }

.referenzen__small_ref_sub_text {
  font-size: 9px;
  line-height: 13px;
  color: var(--grau);
  width: 140px;
  height: 5ex;
  margin-top: 3px;
  margin-left: 3px; }

.referenzen__praxis_kunde {
  margin-bottom: 5px;
  font-weight: normal;
  font-size: 12px;
  line-height: 13px;
  font-style: normal;
  color: var(--grau);
  margin-top: 3px;
  text-align: center;
  width: 12em; }

#referenzen__views {
  display: flex;
  justify-content: flex-end; }

#referenzen__views ul {
  list-style-type: none; }

#referenzen__views ul li {
  cursor: pointer;
  float: left;
  border-left: solid 1px #0082ba;
  display: inline-block;
  text-align: center;
  padding: 0 .3em 0 .3em;
  margin-top: .3em; }

#referenzen__views ul li a {
  display: inline-block; }

#referenzen__views ul li:first-child {
  border-left: none; }

/*****************************************************************************
    #UTILITIES
 *****************************************************************************/
/*spezielle Styles*/
.none {
  display: none !important; }

.error {
  color: #FF0000; }

.block {
  display: block !important; }

.desktop {
  display: block; }

.desktop--inline {
  display: inline; }

.mobile {
  visibility: hidden; }

.mobile--block {
  display: none; }

.mobile--inline {
  display: none; }

.float-left {
  float: left; }

.float-right {
  float: right; }

.clearfix::after {
  content: "";
  clear: both;
  display: table; }

.container {
  max-width: var(--max_width);
  margin-left: auto;
  margin-right: auto; }

.more {
  display: block;
  text-align: end;
  margin-top: auto; }

.border-right {
  position: relative;
  margin-right: 3rem; }

.border-right::after {
  position: absolute;
  border-right: 1px solid var(--bg_normalblau);
  top: 3%;
  bottom: 3%;
  right: -1.5rem;
  content: ""; }

.mt-1 {
  margin-top: 1em; }

.mb-1 {
  margin-bottom: 1em; }

/*ul*/
.bulleted {
  padding-left: 1em; }

.bulleted > li::before {
  content: "\2022";
  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: var(--bg_normalblau);
  /* Change the color */
  font-weight: bold;
  /* If you want it to be bold */
  display: inline-block;
  /* Needed to add space between the bullet and the text */
  width: 0.75em;
  /* Also needed for space (tweak if needed) */
  margin-left: -0.75em;
  /* Also needed for space (tweak if needed) */ }

.bulleted li + li {
  margin-top: 0.25em; }

/*ul*/
.default {
  padding-left: 1em; }

.default li::before {
  content: "\2022";
  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: var(--bg_normalblau);
  /* Change the color */
  font-weight: bold;
  /* If you want it to be bold */
  display: inline-block;
  /* Needed to add space between the bullet and the text */
  width: 0.75em;
  /* Also needed for space (tweak if needed) */
  margin-left: -0.75em;
  /* Also needed for space (tweak if needed) */ }

.default li + li {
  margin-top: 0.25em; }

.sticky {
  position: sticky; }

.icon {
  width: 1em;
  height: 1em;
  margin: 0 0.25em 0 0;
  display: inline; }

/*collapsible*/
.collapsible {
  display: flex;
  flex-wrap: wrap; }

.collapsible-opener {
  flex-basis: 100%;
  margin-top: 0.125em;
  padding: 0;
  cursor: pointer;
  border: none;
  outline: none;
  background-color: transparent;
  color: var(--fg_normalblau);
  text-align: start; }

.collapsible-content {
  order: -1;
  overflow: hidden;
  height: auto;
  max-height: 0;
  transition: max-height linear 100ms; }

.collapsible-open {
  max-height: 20em;
  transition: max-height linear 400ms; }

/*Buttons*/
.btn, .referenzPerMail__button {
  font-size: 1em;
  cursor: pointer;
  border-radius: 0em;
  border: none;
  background-color: var(--fg_normalblau);
  color: white;
  padding: 0.5em;
  width: fit-content;
  transition: opacity 200ms linear, transform 200ms linear;
  box-shadow: 1px 2px 5px 0px #828282; }

.btn:hover, .referenzPerMail__button:hover {
  opacity: 0.85;
  transition: opacity 200ms linear, transform 200ms linear; }

.btn:active, .referenzPerMail__button:active {
  opacity: 0.75;
  transform: scaleX(0.99);
  transition: opacity 200ms linear, transform 200ms linear; }

/*Klickbare Bilder*/
.imageBtn {
  flex: 1 0 32%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--fg_dunkel);
  background-color: var(--bg_normalblau);
  border: none;
  box-shadow: 1px 2px 5px 0px #828282;
  opacity: 1;
  transition: opacity 200ms linear, transform 200ms linear; }

.imageBtn figure {
  width: 100%; }

.imageBtn img {
  width: 100%; }

.imageBtn:hover {
  opacity: 0.85;
  transition: opacity 200ms linear, transform 200ms linear; }

.imageBtn:active {
  opacity: 0.80;
  transform: scale(0.99);
  transition: opacity 200ms linear, transform 200ms linear; }

/*Zoom-Lupe*/
.zoom-lupe {
  position: relative; }

.zoom-lupe::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url("/images/icons/lupe.svg");
  background-size: 80px 80px;
  background-repeat: no-repeat;
  background-position: right bottom;
  opacity: 0.8; }

.clickable {
  position: relative; }

.clickable:after {
  content: '';
  position: absolute;
  top: 0;
  right: 4%;
  bottom: 4%;
  left: 0;
  background-image: url("/images/icons/indicator_clickable.svg");
  background-size: 40px 40px;
  background-repeat: no-repeat;
  background-position: right bottom;
  opacity: 1; }

/*Screenshot*/
.screenshot {
  width: 100%; }

/*Fancy-Date*/
.date {
  display: flex;
  width: max-content;
  font-family: "Poppins";
  font-weight: bold;
  background-color: var(--fg_normalblau);
  color: white;
  padding: 16px;
  justify-content: space-around;
  align-items: center;
  min-width: 7.2em;
  margin-right: 0.5em; }

.date__col {
  flex: 1 1 50%; }

.date__col:first-child {
  margin-right: 8px;
  text-align: center; }

.day {
  font-size: 36px;
  font-weight: bold; }

.month {
  font-family: "Source Sans Pro";
  font-weight: normal;
  font-size: 1em; }

.year {
  font-family: "Source Sans Pro";
  font-weight: normal;
  font-size: 1em; }

/*Telefon*/
.telefon {
  color: var(--bg_normalblau);
  font-weight: bold; }

/*Formulare*/
.mail__form {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-content: center;
  align-items: flex-start; }

.mail__form > * {
  max-width: 100%; }

.mail__input,
.mailform_ziab {
  background-color: var(--bg_forms);
  border: 1px solid var(--fg_normalblau);
  text-indent: 4px;
  line-height: 1.5;
  margin-bottom: 1em;
  flex: 1 1 calc(100% - 2em);
  font-size: 1em; }

.mail__asterisk {
  max-width: 2em;
  color: #FF0000;
  margin-left: 0.25em; }

.mail__submit {
  flex: 1 1 calc(100% - 2em);
  margin-bottom: 1em; }

.mail__hinweis_heading {
  flex: 1 1 calc(100% - 2em);
  margin-top: 8px; }

.mail__hinweis {
  flex: 1 1 calc(100% - 2em);
  padding: 0;
  width: 100%;
  font-size: 0.8em;
  color: var(--grau);
  line-height: 1; }

.mail__select {
  flex: 1 1 calc(100% - 2em);
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #e9f2fa;
  border: 1px solid #008FD4;
  background: url(../../images/klausdemocheckbox.png) center right no-repeat #e9f2fa;
  margin-bottom: 1em; }

.mail__textarea {
  flex: 1 1 calc(100% - 2em);
  background-color: var(--bg_forms);
  border: 1px solid var(--fg_normalblau);
  text-indent: 4px;
  margin-bottom: 1em;
  font-size: 1em;
  resize: vertical; }

/*Download*/
.download__hinweis_heading {
  flex: 1 1 calc(100% - 2em);
  margin-top: 8px; }

.download__hinweis {
  flex: 1 1 calc(100% - 2em);
  padding: 0;
  width: 100%;
  font-size: 0.8em;
  color: var(--grau);
  line-height: 1; }

.download__hinweis p {
  margin: 0.5em 0 0 0; }

.download__table {
  margin-top: 0.5em;
  margin-bottom: 1em;
  display: flex;
  flex-flow: row wrap; }

.download__table > * {
  flex: 1 1 50%; }

.download__link {
  display: flex;
  align-items: center;
  gap: 0.2em;
  /*word-wrap: anywhere;*/ }

.download__icon {
  display: inline;
  width: 1em;
  height: 1em;
  margin: 0 0.25em 0 0; }

.pdf__link {
  display: flex;
  align-items: flex-start;
  gap: 0.2em;
  /*word-wrap: anywhere;*/ }

/*Headerbox*/
.headerBox {
  --box_padding--: calc(-1 * var(--box_padding));
  padding: var(--box_padding);
  border: 1px solid var(--subnav_unselected);
  flex: 1 1 100%;
  min-width: 0; }

.headerBox__header {
  color: #FFFFFF;
  background-color: var(--subnav_unselected);
  padding: var(--padding) var(--box_padding);
  margin: var(--box_padding--) var(--box_padding--) var(--box_padding) var(--box_padding--); }

/* Suchergebnisse */
.search > * + * {
  margin-top: 0.25em; }

/*CMSimple Styles*/
.cmsimplecore_warning {
  flex: 1 1 100%;
  display: block;
  padding: var(--box_padding);
  background-color: var(--bg_forms);
  color: var(--fg_normalblau); }

.cmsimplecore_warning:nth-of-type(2) {
  margin-top: -1em;
  padding-top: 0; }

.cmsimplecore_warning > * {
  color: inherit; }

.cmsimplecore_warning h1,
.cmsimplecore_warning h2,
.cmsimplecore_warning h3,
.cmsimplecore_warning h4,
.cmsimplecore_warning h5,
.cmsimplecore_warning h6 {
  color: var(--fg_normalblau); }

.cmsimplecore_warning li {
  list-style-type: square;
  margin-left: 1em; }

@supports not (aspect-ratio: 1/1) {
  .seitennavi_und_main:first-child {
    margin-right: var(--gap); } }
/*****************************************************************************
    RESPONSIVE
 *****************************************************************************/
/*************************************
    3 Spalten: Tablet? Derzeit Handy
 *************************************/
@media (max-width: 80em) {
  :root {
    --header-height: 5rem;
    --max_width: min(95vw, var(--max_three_col)); }

  /* Platz für Header */
  body::before {
    margin-top: calc(var(--header-height) + 1.5em); }

  /*****************************
      HEADER
  ******************************/
  #kopf {
    display: none; }

  .topnavi_und_hamburgernavi {
    display: block; }

  .hamburger_hauptnavi {
    display: flex; }

  #horizontale_hauptnavi {
    display: none; }

  .drop-content {
    display: block; }

  #hamburger_embedded {
    display: block; }

  #login-embedded {
    display: inline; }

  /* Suche */
  .suche__form {
    display: none; }

  .suche__label {
    display: none; }

  /* Mobile Suche */
  .search__form {
    display: flex; }

  .search__label {
    display: block; }

  .search__item a {
    display: block;
    text-align: left;
    margin-bottom: -20px;
    width: 200px;
    height: 60px;
    vertical-align: 25%;
    text-align: justify;
    color: #fff;
    font-size: 1.2em;
    text-decoration: none;
    background-color: #0b4c6d;
    transition: color .2s;
    -webkit-transition: color 0.2s; }

  .search__item a:hover {
    color: #4fc1e6;
    background-color: #333; }

  .search__field {
    width: 98%;
    margin: 0 auto;
    background-color: #fff;
    border: 1px solid #0099cc;
    font-size: 1rem;
    line-height: 1.5;
    text-indent: 0.5em;
    opacity: 1; }

  .search__field:hover {
    border-color: #ff8700; }

  /*****************************
      MAIN
  ******************************/
  .seitennavi_und_main {
    flex-direction: column;
    justify-content: center;
    width: var(--width_three_col); }

  #seitennavi {
    display: none; }

  main {
    width: 100%; }

  .modal__contentBox {
    width: 100%;
    max-height: 100vmin;
    max-width: 100vmin; }

  .streifen {
    display: none; }

  /*****************************
      Footer
  ******************************/
  .footernavi__inputUndButton {
    max-width: 12rem; }

  .footernavi__p {
    max-width: 12rem; }

  /*****************************
      PAGES
  ******************************/
  /* Startseite */
  .onlinetreffen__bottomzeile {
    flex-wrap: wrap;
    gap: 0.25em; }

  .onlinetreffen_more {
    flex-basis: 100%; }

  /* /Unternehmen/Termine */
  .termine-uebersicht--logo {
    display: none; }

  /*****************************
      UTITLITY
  ******************************/
  .desktop {
    display: none; }

  .desktop--inline {
    display: none; }

  .mobile {
    visibility: visible; }

  .mobile--block {
    visibility: visible;
    display: block;
    min-height: 9vh;
    width: 100%; }

  .mobile--inline {
    display: inline; } }
/*************************************
    2 Spalten
 *************************************/
@media (max-width: 59em) {
  :root {
    --max_width: min(95vw, var(--max_two_col)); }

  /*****************************
      MAIN
  ******************************/
  .seitennavi_und_main {
    flex-direction: column;
    width: var(--width_two_col); }

  /*****************************
      FOOTER
  ******************************/
  .contact_us__column {
    flex: 1 0 calc(50% - 1em);
    /*gap=2em*/ }

  .footernavi__column {
    flex: 1 0 calc(50% - 1em);
    /*gap=2em*/ }

  .footernavi__p {
    margin-bottom: 0; }

  /*****************************
      PAGES
  ******************************/
  .startseite__aufmacher_text {
    flex-flow: column nowrap; }

  .page-firma__box {
    display: flex;
    flex-flow: column nowrap; }

  .mitarbeiter {
    flex: 0 1 46%; }

  .destille_extra {
    flex: 0 0 calc(50% - 0.5 * var(--gap)); }

  #filter1,
  #filter2 {
    width: 100%; }

  /* /Unternehmen/Referenzen/...*/
  .page-references-container {
    min-height: 975px; }

  #info_referenz {
    top: 105%;
    left: 5%;
    height: auto;
    z-index: 111; }

  /*****************************
      PRAXISBEISPIELE
  ******************************/
  #praxisbeispiele {
    width: var(--praxisbeispiele_zweispalter_prozent);
    left: var(--pb_margin_zweispalter_prozent);
    /*für Animation*/ }

  .a1 #praxisbeispiele,
  .pb_grossansicht #praxisbeispiele {
    width: var(--praxisbeispiele_einspalter_prozent);
    left: var(--pb_margin_einspalter_prozent);
    /*für Animation*/ }

  #praxisbeispiele.left:not(.pb_grossansicht):not(.a1) {
    left: var(--buffer_width_zweispalter_prozent);
    /*für Animation*/ }

  /*Es gibt 2 gleichbreite Spalten.
  Vertikal unterteilt sich der Inhalt auf viele (derzeit 5) unterschiedlich hohe virtuelle Zeilen.*/
  .praxisbeispiel.a2,
  .praxisbeispiel.gross {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(6, auto);
    align-items: start;
    /*Das macht vertikale Paddings weg.*/
    /*padding-right: var(--gap);*/
    column-gap: var(--gap); }

  :not(.a1):not(.a2):not(.pb_grossansicht) > .naechstes,
  :not(.a1):not(.a2):not(.pb_grossansicht) > .vorheriges {
    display: block; }

  .praxisbeispiel.gross .praxisbeispiel__heading,
  .a2 .praxisbeispiel__heading {
    grid-column: 1/3;
    padding: var(--box_padding) var(--box_padding) 0 var(--box_padding); }

  /*titel und elements sind beide links.*/
  .gross .praxisbeispiel_elements,
  .a2 .praxisbeispiel_elements {
    grid-column: 1/3; }

  /*elements erstreckt sich vertikal über 3 Zeilen, damit es sich sowohl mit dem Bild als auch mit dem Formular und dem PDF-icon überlappen kann.*/
  /*Auskommentiert, weil: das selbe wie oben.*/
  /*Das Formular soll nur zu sehen sein, wenn das PB aufgeklappt ist.*/
  /*Bild, Formular sind rechts*/
  .gross .praxisbeispiel_logo,
  .a2 .praxisbeispiel_logo,
  .gross .referenzPerMail,
  .a2 .referenzPerMail {
    grid-column: 1/3; }

  .gross .praxisbeispiel_logo,
  .a2 .praxisbeispiel_logo {
    grid-row: 2; }

  .gross .referenzPerMail,
  .a2 .referenzPerMail {
    grid-row: -2;
    padding: 0 var(--box_padding) var(--box_padding); }

  /*Das Bild erstreckt sich vertikal über 2 Zeilen, damit es sich sowohl mit titel als auch mit elements überlappen kann.*/
  /*
  .gross .praxisbeispiel_logo,
  .a2 .praxisbeispiel_logo{grid-row-end:praxisbeispiel_elements2;}
  */
  .praxisbeispiel.verkleinerbar .zurueck {
    /*grid-row:6;*/
    grid-column: 1/3; } }
/*************************************
    1 Spalte
 *************************************/
@media (max-width: 37em) {
  :root {
    --max_width: 95vw; }

  video {
    width: 100%; }

  .download__table > * {
    flex: 1 1 100%; }

  /*****************************
      MAIN
  ******************************/
  .seitennavi_und_main {
    min-width: var(--width_one_col); }

  .wortwolke_motto {
    max-width: 100%; }

  .startseite__aufmacher {
    padding: 1rem var(--box_padding); }

  .aufmacher, .startseite__aufmacher, .page-newsletter__aufmacher, .page-ablaeufe_veraendern__aufmacher, .page-zensus__aufmacher,
  .augenfang,
  .news-item,
  .kurzueberblick,
  .steckbrief_box,
  .box-25,
  .box-33,
  .newsletterBox,
  .box-50,
  .box-66,
  .aufmacher,
  .startseite__aufmacher,
  .page-newsletter__aufmacher,
  .page-ablaeufe_veraendern__aufmacher,
  .page-zensus__aufmacher,
  .box-75,
  .box-100 {
    margin: 0;
    flex: 1 1 100%; }

  .logo_mobile {
    display: none; }

  .kontakt__item {
    flex: 1 1 100%;
    margin-left: 15%; }

  .onlinetreffen__element {
    /*flex-direction: column;*/ }

  .onlinetreffen__iconzeile {
    /*flex-direction: column;*/
    width: 100%;
    float: left; }

  /*.onlinetreffen__icon-element {
      flex: 1 1 auto;
  }*/
  /*****************************
      FOOTER
  ******************************/
  .contact_us__column {
    flex: 0 0 12em;
    margin: 0 auto; }

  .footernavi__column {
    flex: 0 0 12em;
    margin: 0 auto;
    max-width: 12em; }

  /*****************************
      PAGES
  ******************************/
  .abteilung {
    flex-flow: row wrap; }

  .abteilung__icon {
    flex: 1 1 100%; }

  .mitarbeiter__box {
    grid-template-columns: 1fr;
    justify-items: center;
    flex: 1 1 100%; }

  .page-datenschutz__img,
  .page-karriere__img,
  .page-newsletter__link,
  .page-ablaeufe_veraendern__img,
  .page-pruefungsprozess__img,
  .page-zensus__img {
    display: none; }

  .destille_extra {
    flex: 0 0 100%; }

  /* /Unternehmen/Referenzen/...*/
  #filter > * {
    flex: 1 1 100%; }

  .page-references-container {
    min-height: 1025px; }

  /* /Kontakt/Kontakt */
  .contact__input {
    grid-column: span 2; }

  /*****************************
      PRAXISBEISPIELE
  ******************************/
  #praxisbeispiele {
    width: var(--praxisbeispiele_einspalter_prozent);
    left: var(--pb_margin_einspalter_prozent);
    /*für Animation*/ }

  #praxisbeispiele.left {
    left: var(--buffer_width_einspalter_prozent);
    /*für Animation*/ }

  #praxisbeispiele.left:not(.pb_grossansicht):not(.a1) {
    /*überschreibt 2-Spalten-Styles*/
    left: var(--buffer_width_einspalter_prozent); }

  :not(.a1):not(.pb_grossansicht) > .naechstes,
  :not(.a1):not(.pb_grossansicht) > .vorheriges {
    display: block; }

  /*Wenn es nur 1 Praxisbeispiele gibt, dann gibt es nichts zu karussellieren.*/
  .a1 .naechstes,
  .a1 .vorheriges {
    display: none; }

  .praxisbeispiel {
    width: var(--praxisbeispiel_width_prozent);
    min-width: calc(var(--min_spaltenbreite) + 2 * var(--gap));
    height: initial; }

  .praxisbeispiel.a2,
  .praxisbeispiel.gross {
    grid-template-columns: 1fr; }

  .praxisbeispiel.gross .praxisbeispiel__heading,
  .a2 .praxisbeispiel__heading,
  .gross .praxisbeispiel_elements,
  .a2 .praxisbeispiel_elements,
  .gross .praxisbeispiel_logo,
  .a2 .praxisbeispiel_logo,
  .gross .referenzPerMail,
  .a2 .referenzPerMail {
    grid-column: 1/2; }

  .praxisbeispiel.verkleinerbar .zurueck {
    /*grid-row:6;*/
    grid-column: 1/2; } }

/*# sourceMappingURL=compiled_stylesheet.css.map */