/*
@font-face {
  font-family: innogyWEB-Light;
  font-weight: 400;
  font-style: normal;
  src: url(../fonts/innogy-web-light.woff2) format("woff2"),
    url(../fonts/innogy-web/innogy-web-light.woff) format("woff"),
    url(../fonts/innogy-web/innogy-web-light.ttf) format("truetype");
  font-display: swap;
}
@font-face {
  font-family: innogyWEB-Medium;
  font-weight: 400;
  font-style: normal;
  src: url(../fonts/innogy-web-medium.woff2) format("woff2"),
    url(../fonts/innogy-web-medium.woff) format("woff"),
    url(../fonts/innogy-web-medium.ttf) format("truetype");
  font-display: swap;
}
*/

@font-face {
  font-family: enviaM-Gruppe;
  font-weight: 300;
  font-style: normal;
  src: url(../fonts/enviam-gruppe-light-300.woff2) format("woff2"),
    url(../fonts/enviam-gruppe-light-300.woff) format("woff"),
    url(../fonts/enviam-gruppe-light-300.ttf) format("truetype");
  font-display: swap;
}
@font-face {
  font-family: enviaM-Gruppe;
  font-weight: 400;
  font-style: normal;
  src: url(../fonts/enviam-gruppe-400.woff2) format("woff2"),
    url(../fonts/enviam-gruppe-400.woff) format("woff"),
    url(../fonts/enviam-gruppe-400.ttf) format("truetype");
  font-display: swap;
}
@font-face {
  font-family: enviaM-Gruppe;
  font-weight: 700;
  font-style: normal;
  src: url(../fonts/enviam-gruppe-700.woff2) format("woff2"),
    url(../fonts/enviam-gruppe-700.woff) format("woff"),
    url(../fonts/enviam-gruppe-700.ttf) format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "enviaM-Gruppe";
  font-weight: 800;
  font-style: normal;
  src: url("../fonts/enviam-gruppe-ext-800.woff2") format("woff2"),
       url("../fonts/enviam-gruppe-ext-800.woff") format("woff"),
       url("../fonts/enviam-gruppe-ext-800.ttf") format("truetype");
  font-display: swap;
}


/* ==========================================================================
   TYPOGRAPHY SYSTEM
   Basis: Mobile klein (320–440px)
   Desktop Override: ab 1048px
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------------
     Font family
     -------------------------------------------------------------------------- */
  --font-family-base: "enviaM-Gruppe", Arial, Helvetica, sans-serif;

  /* --------------------------------------------------------------------------
     Font weights
     -------------------------------------------------------------------------- */
  --font-weight-regular: 400;
  --font-weight-bold: 700;
  --font-weight-extra-bold: 800;

  /* --------------------------------------------------------------------------
     Letter spacing
     -------------------------------------------------------------------------- */
  --tracking-default: 0;
  --tracking-wcag: 0.12em;

  /* --------------------------------------------------------------------------
     Paragraph spacing
     -------------------------------------------------------------------------- */
  --paragraph-spacing-headline-default: 0.75em;
  --paragraph-spacing-headline-wcag: 2em;

  --paragraph-spacing-body-default: 1.44em;
  --paragraph-spacing-body-wcag: 2em;

  /* --------------------------------------------------------------------------
     Mobile typography values (320–440px)
     -------------------------------------------------------------------------- */

  /* Headlines */
  --font-size-h1: 32px;
  --line-height-h1: 48px;

  --font-size-h2: 24px;
  --line-height-h2: 36px;

  --font-size-h3: 20px;
  --line-height-h3: 30px;

  --font-size-h4: 18px;
  --line-height-h4: 28px;

  --font-size-h5: 16px;
  --line-height-h5: 24px;

  --font-size-h6: 14px;
  --line-height-h6: 22px;

  /* Body */
  --font-size-body-l: 16px;
  --line-height-body-l: 28px;

  --font-size-body-m: 14px;
  --line-height-body-m: 24px;

  --font-size-body-s: 12px;
  --line-height-body-s: 20px;

  /* UI */
  --font-size-footer-menu-points: 14px;
  --line-height-footer-menu-points: 20px;

  --font-size-button-text: 14px;
  --line-height-button-text: 20px;

  --font-size-link-text: 14px;
  --line-height-link-text: 20px;

  --font-size-caption: 12px;
  --line-height-caption: 20px;
}

/* ==========================================================================
   Desktop Override
   ========================================================================== */

@media (min-width: 1048px) {
  :root {
    /* Headlines */
    --font-size-h1: 48px;
    --line-height-h1: 72px;

    --font-size-h2: 32px;
    --line-height-h2: 48px;

    --font-size-h3: 24px;
    --line-height-h3: 36px;

    --font-size-h4: 20px;
    --line-height-h4: 32px;

    --font-size-h5: 18px;
    --line-height-h5: 28px;

    --font-size-h6: 16px;
    --line-height-h6: 24px;

    /* Body */
    --font-size-body-l: 18px;
    --line-height-body-l: 32px;

    --font-size-body-m: 16px;
    --line-height-body-m: 28px;

    --font-size-body-s: 14px;
    --line-height-body-s: 24px;

    /* UI */
    --font-size-footer-menu-points: 16px;
    --line-height-footer-menu-points: 24px;

    --font-size-button-text: 16px;
    --line-height-button-text: 24px;

    --font-size-link-text: 16px;
    --line-height-link-text: 24px;

    --font-size-caption: 12px;
    --line-height-caption: 18px;
  }
}

/* ==========================================================================
   Global base typography
   ========================================================================== */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--tracking-default);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
a,
button,
input,
textarea,
select,
label,
li {
  font-family: var(--font-family-base);
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin-top: 0;
}

/* ==========================================================================
   Headlines
   ========================================================================== */

h1 {
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  font-weight: var(--font-weight-extra-bold);
  letter-spacing: var(--tracking-default);
  margin-bottom: var(--paragraph-spacing-headline-default);
}

h2 {
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  font-weight: var(--font-weight-extra-bold);
  letter-spacing: var(--tracking-default);
  margin-bottom: var(--paragraph-spacing-headline-default);
}

h3 {
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  font-weight: var(--font-weight-extra-bold);
  letter-spacing: var(--tracking-default);
  margin-bottom: var(--paragraph-spacing-headline-default);
}

h4 {
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
  font-weight: var(--font-weight-extra-bold);
  letter-spacing: var(--tracking-default);
  margin-bottom: var(--paragraph-spacing-headline-default);
}

h5 {
  font-size: var(--font-size-h5);
  line-height: var(--line-height-h5);
  font-weight: var(--font-weight-extra-bold);
  letter-spacing: var(--tracking-default);
  margin-bottom: var(--paragraph-spacing-headline-default);
}

h6 {
  font-size: var(--font-size-h6);
  line-height: var(--line-height-h6);
  font-weight: var(--font-weight-extra-bold);
  letter-spacing: var(--tracking-default);
  margin-bottom: var(--paragraph-spacing-headline-default);
}

/* ==========================================================================
   Body text
   ========================================================================== */

.body-l-strong {
  font-size: var(--font-size-body-l);
  line-height: var(--line-height-body-l);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-default);
  margin-bottom: var(--paragraph-spacing-body-default);
}

.body-l-regular {
  font-size: var(--font-size-body-l);
  line-height: var(--line-height-body-l);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--tracking-default);
  margin-bottom: var(--paragraph-spacing-body-default);
}

.body-m-strong {
  font-size: var(--font-size-body-m);
  line-height: var(--line-height-body-m);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-default);
  margin-bottom: var(--paragraph-spacing-body-default);
}

.body-m-regular {
  font-size: var(--font-size-body-m);
  line-height: var(--line-height-body-m);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--tracking-default);
  margin-bottom: var(--paragraph-spacing-body-default);
}

.body-s-strong {
  font-size: var(--font-size-body-s);
  line-height: var(--line-height-body-s);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-default);
  margin-bottom: var(--paragraph-spacing-body-default);
}

.body-s-regular {
  font-size: var(--font-size-body-s);
  line-height: var(--line-height-body-s);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--tracking-default);
  margin-bottom: var(--paragraph-spacing-body-default);
}

/* ==========================================================================
   UI text styles
   ========================================================================== */

.footer-menu-points {
  font-size: var(--font-size-footer-menu-points);
  line-height: var(--line-height-footer-menu-points);
  font-weight: var(--font-weight-extra-bold);
  letter-spacing: var(--tracking-default);
  margin-bottom: var(--paragraph-spacing-body-default);
}

.button-text {
  font-size: var(--font-size-button-text);
  line-height: var(--line-height-button-text);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-default);
}

.link-text {
  font-size: var(--font-size-link-text);
  line-height: var(--line-height-link-text);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-default);
}

.caption {
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--tracking-default);
  margin-bottom: var(--paragraph-spacing-body-default);
}

/* ==========================================================================
   WCAG helper classes
   ========================================================================== */

.tracking-default {
  letter-spacing: var(--tracking-default);
}

.tracking-wcag {
  letter-spacing: var(--tracking-wcag);
}

.mb-headline-default {
  margin-bottom: var(--paragraph-spacing-headline-default);
}

.mb-headline-wcag {
  margin-bottom: var(--paragraph-spacing-headline-wcag);
}

.mb-body-default {
  margin-bottom: var(--paragraph-spacing-body-default);
}

.mb-body-wcag {
  margin-bottom: var(--paragraph-spacing-body-wcag);
}

.mb-0 {
  margin-bottom: 0;
}



/* ==========================================================================
   BUTTON SYSTEM
   Basis:
   - Standardhöhe: 48px
   - Radius: 8px
   - Focus optisch 54px via box-shadow
   - Inverse als Modifier
   ========================================================================== */

:root {
  /* Colors */
  --btn-color-navy: #20365D;                    /* forward blue 900 */
  --btn-color-pressed: #caced3;                 /* forward blue 300 */
  --btn-color-secondary-pressed: #354C73;       /* forward blue 800 */
  --btn-color-white: #ffffff;                   /* white */
  --btn-color-disabled-bg: #caced3;             /* forward blue 300 */
  --btn-color-disabled-border: #caced3;         /* forward blue 300 */
  --btn-color-disabled-text: #ffffff;           /* white */

  --btn-color-disabled-ghost-text: #caced3;     /* forward blue 300 */
  --btn-color-disabled-ghost-border: #caced3;   /* forward blue 300 */

  /* Sizing */
  --btn-height: 48px;
  --btn-radius: 8px;
  --btn-border-width: 2px;
  --btn-focus-ring-width: 3px;

  /* Padding */
  --btn-padding-x: 16px;
  --btn-icon-box-width: 48px;
  --btn-gap: 12px;

  /* Typography - Nutzt bestehende Typography-Definition */
  --btn-font-size: var(--font-size-button-text, 16px);
  --btn-line-height: var(--line-height-button-text, 24px);
  --btn-font-weight: var(--font-weight-bold, 700);
  --btn-letter-spacing: var(--tracking-default, 0);

  /* Transition */
  /*
  --btn-transition:
    background-color 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    opacity 0.18s ease;
  */
  
  /* Transition */
  --btn-transition:
    background-color 150ms ease-in-out,
    color 150ms ease-in-out,
    border-color 150ms ease-in-out,
    box-shadow 150ms ease-in-out,
    opacity 150ms ease-in-out;
}

/* ==========================================================================
   Base
   ========================================================================== */

.btn {
  appearance: none;
  -webkit-appearance: none;
  border: var(--btn-border-width) solid transparent;
  border-radius: var(--btn-radius);
  background: transparent;
  color: var(--btn-color-navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  min-height: var(--btn-height);
  height: var(--btn-height);
  padding: 0 var(--btn-padding-x);
  margin: 0;
  font-family: var(--font-family-base, Arial, Helvetica, sans-serif);
  font-size: var(--btn-font-size);
  line-height: var(--btn-line-height);
  font-weight: var(--btn-font-weight);
  letter-spacing: var(--btn-letter-spacing);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  position: relative;
  box-sizing: border-box;
  transition: var(--btn-transition);
}

a.btn {
  text-decoration: none;
}

a.btn:hover,
a.btn:focus,
a.btn:focus-visible,
a.btn:active {
  text-decoration: none;
}

.btn:hover {
  text-decoration: none;
}

.btn:focus {
  outline: none;
}

.btn:focus-visible {
  outline: none;
}

/* Label + Icon */
.btn__label {
  display: inline-flex;
  align-items: center;
}

.btn a.btn__label {
  text-decoration: none;
  color: #ff0;
}

.btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
}

.btn__icon svg {
  display: block;
  width: 24px;
  height: 24px;
  fill: currentColor;
}

/* ==========================================================================
   Optional split style:
   Wenn Textbutton + separates Icon-Segment gebraucht wird
   ========================================================================== */

.btn--with-icon-box {
  padding-right: 0;
}

.btn--with-icon-box .btn__label {
  padding-right: 16px;
}

.btn--with-icon-box .btn__icon-box {
  width: var(--btn-icon-box-width);
  min-width: var(--btn-icon-box-width);
  height: calc(var(--btn-height) - (var(--btn-border-width) * 2));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-left: var(--btn-border-width) solid currentColor;
  box-sizing: border-box;
}

.btn--with-icon-box .btn__icon-box svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

/* ==========================================================================
   Icon-only button
   ========================================================================== */

.btn--icon-only {
  width: var(--btn-height);
  min-width: var(--btn-height);
  padding: 0;
  gap: 0;
}

.btn--icon-only .btn__label {
  display: none;
}

/* ==========================================================================
   Focus ring
   Idee:
   - Button bleibt physisch 48px hoch
   - Fokus erscheint optisch größer durch box-shadow
   - kein Layout-Shift
   ========================================================================== */

/* Standard-Focus für helle Umgebung */
.btn:focus-visible {
  border: 2px solid #ffffff;
  box-shadow: 0px 0px 0px 3px var(--btn-color-navy),inset 0px 0px 0px 0px #fff;
}

/* Wenn inverse aktiv ist, bleibt der gleiche Ring gut nutzbar */
.btn.btn--inverse:focus-visible {
  box-shadow:
    0 0 0 var(--btn-border-width) #ffffff,
    0 0 0 calc(var(--btn-border-width) + var(--btn-focus-ring-width)) var(--btn-color-navy);
}

/* ==========================================================================
   Primary
   ========================================================================== */

.btn--primary {
  background-color: var(--btn-color-navy);
  border-color: var(--btn-color-navy);
  color: var(--btn-color-white);
}

.btn--primary:hover {
  background-color: var(--btn-color-white);
  border-color: var(--btn-color-navy);
  color: var(--btn-color-navy);
  box-shadow: none;
}

.btn--primary:active,
.btn--primary.is-pressed {
  background-color: var(--btn-color-pressed);
  border-color: var(--btn-color-navy);
  color: var(--btn-color-navy);
  box-shadow: none;
}

/* Focus laut Vorgabe: normaler Border wird weiß */
/*
.btn--primary:focus-visible {
  border-color: #ffffff;
  color: var(--btn-color-white);
}
*/

/* Disabled */
.btn--primary:disabled,
.btn--primary.is-disabled {
  background-color: var(--btn-color-disabled-bg);
  border-color: var(--btn-color-disabled-border);
  color: var(--btn-color-disabled-text);
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

/* ==========================================================================
   Secondary
   ========================================================================== */

.btn--secondary {
  background-color: var(--btn-color-white);
  border-color: var(--btn-color-navy);
  color: var(--btn-color-navy);
}

/* Focus */
.btn--secondary:focus-visible {
  border: 2px solid #ffffff;
  box-shadow: 0px 0px 0px 3px var(--btn-color-navy),inset 0px 0px 0px 2px var(--btn-color-navy);
}

.btn--secondary:hover {
  background-color: var(--btn-color-navy);
  border-color: var(--btn-color-navy);
  color: var(--btn-color-white);
  box-shadow: none;
}

.btn--secondary:active,
.btn--secondary.is-pressed {
  background-color: var(--btn-color-secondary-pressed);
  border-color: var(--btn-color-navy);
  color: var(--btn-color-white);
  box-shadow: none;
}

/* Disabled */
.btn--secondary:disabled,
.btn--secondary.is-disabled {
  background-color: transparent;
  border-color: var(--btn-color-disabled-ghost-border);
  color: var(--btn-color-disabled-ghost-text);
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

/* ==========================================================================
   Tertiary
   ========================================================================== */

.btn--tertiary {
  background-color: transparent;
  border-color: transparent;
  color: var(--btn-color-navy);
  /* padding-left: 0;
  padding-right: 0; */
}

/* Tertiary Focus mit border */
.btn--tertiary:focus-visible {
  border-color: #ffffff;
  color: var(--btn-color-navy);
  /* padding-left: 14px;
  padding-right: 14px; */
  background-color: transparent;
}

.btn--tertiary:hover {
  background-color: transparent;
  border-color: transparent;
  border-color: var(--btn-color-navy);
  color: var(--btn-color-navy);
  box-shadow: none;
}

.btn--tertiary:active,
.btn--tertiary.is-pressed {
  background-color: var(--btn-color-pressed);
  border-color: var(--btn-color-navy);
  color: var(--btn-color-navy);
  box-shadow: none;
}

/* Disabled */
.btn--tertiary:disabled,
.btn--tertiary.is-disabled {
  color: var(--btn-color-disabled-ghost-text);
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

/* ==========================================================================
   Inverse modifier
   Setzt Farben für dunklen Hintergrund um
   ========================================================================== */

.btn--inverse {
  color: var(--btn-color-white);
}

/* Primary inverse */
.btn--primary.btn--inverse {
  background-color: var(--btn-color-white);
  border-color: var(--btn-color-white);
  color: var(--btn-color-navy);
}

.btn--primary.btn--inverse:hover {
  background-color: transparent;
  border-color: var(--btn-color-white);
  color: var(--btn-color-white);
}

.btn--primary.btn--inverse:active,
.btn--primary.btn--inverse.is-pressed {
  background-color: #7485a4;
  border-color: #7485a4;
  color: var(--btn-color-white);
}

.btn--primary.btn--inverse:focus-visible {
  border-color: #ffffff;
  color: var(--btn-color-navy);
  box-shadow:
    0 0 0 var(--btn-border-width) #20365d,
    0 0 0 calc(var(--btn-border-width) + var(--btn-focus-ring-width)) #ffffff;
}

.btn--primary.btn--inverse:disabled,
.btn--primary.btn--inverse.is-disabled {
  background-color: #7485a4;
  border-color: #7485a4;
  color: #ffffff;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

/* Secondary inverse */
.btn--secondary.btn--inverse {
  background-color: transparent;
  border-color: #ffffff;
  color: #ffffff;
}

.btn--secondary.btn--inverse:hover {
  background-color: #ffffff;
  border-color: #ffffff;
  color: var(--btn-color-navy);
}

.btn--secondary.btn--inverse:active,
.btn--secondary.btn--inverse.is-pressed {
  background-color: var(--btn-color-pressed);
  border-color: var(--btn-color-pressed);
  color: var(--btn-color-navy);
}

.btn--secondary.btn--inverse:focus-visible {
  border-color: #ffffff;
  color: #ffffff;
  box-shadow:
    0 0 0 var(--btn-border-width) #20365d,
    0 0 0 calc(var(--btn-border-width) + var(--btn-focus-ring-width)) #ffffff;
}

.btn--secondary.btn--inverse:disabled,
.btn--secondary.btn--inverse.is-disabled {
  background-color: transparent;
  border-color: #7485a4;
  color: #7485a4;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

/* Tertiary inverse */
.btn--tertiary.btn--inverse {
  background-color: transparent;
  border-color: transparent;
  color: #ffffff;
}

.btn--tertiary.btn--inverse:hover {
  background-color: transparent;
  border-color: transparent;
  color: #ffffff;
}

.btn--tertiary.btn--inverse:active,
.btn--tertiary.btn--inverse.is-pressed {
  background-color: transparent;
  border-color: transparent;
  color: #ffffff;
}

.btn--tertiary.btn--inverse:focus-visible {
  border-color: #ffffff;
  color: #ffffff;
  padding-left: 14px;
  padding-right: 14px;
  box-shadow:
    0 0 0 var(--btn-border-width) #20365d,
    0 0 0 calc(var(--btn-border-width) + var(--btn-focus-ring-width)) #ffffff;
}

.btn--tertiary.btn--inverse:disabled,
.btn--tertiary.btn--inverse.is-disabled {
  color: #7485a4;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}


/* ==========================================================================
   disabled
   Global für alle button und a.btn
   ========================================================================== */
.btn.is-disabled:hover,
.btn.is-disabled:focus,
.btn.is-disabled:focus-visible,
.btn.is-disabled:active {
  box-shadow: none;
  text-decoration: none;
}

.btn.is-disabled {
  pointer-events: none;
}

.btn__label {
  pointer-events: none;
}


/* ==========================================================================
   Small screens
   Schriftgrößen kommen aus deinem Typography-System automatisch
   Falls du bei Mobile paddings noch enger willst, hier:
   ========================================================================== */

@media (max-width: 440px) {
  .btn {
    --btn-padding-x: 14px;
    --btn-gap: 10px;
  }

  .btn--tertiary:focus-visible,
  .btn--tertiary.btn--inverse:focus-visible {
    padding-left: 12px;
    padding-right: 12px;
  }
}





/* ===== GENERAL ===== */
html,
body {
  background: inherit;         /* Hintergrundfarbe der Seite: #fff */
  /* color: inherit !important; */   /* Standard Schrift-Farbe: #333 */
  color: #3c3732 !important;   /* enviaM Standard online-font-color */
  line-height: 1.428571429;    /* enviaM Standard */
  /* font-family: innogyWEB-Light, Arial, "Helvetica Neue", Helvetica, sans-serif; */
  font-family: enviaM-Gruppe, Arial, "Helvetica Neue", Helvetica, sans-serif;
}

strong {
  /* font-family: innogyWEB-Medium, Arial, "Helvetica Neue", Helvetica, sans-serif; */
  font-family: enviaM-Gruppe, Arial, "Helvetica Neue", Helvetica, sans-serif;
}


a:link,
a:visited,
a:active,
a:focus {
  text-decoration: none;
  color: #666;
  color: #EE6715; /* ING-DiBa orange */
  color: #444492; /* SANOFI blue */
  color: #6AA215; /* bioNTech light-green */
  color: #FDD500; /* INTERROLL yellow */
  color: #FFBA2D; /* INTERROLL darker-yellow */
  color: #EF7B00; /* MST orange */
  color: #00875A; /* enviaM Galvanic Green Muted */
  /* text-shadow: 0.05em 0.05em #aaa; */
  /* font-weight: bold; */
  -webkit-tap-highlight-color: transparent;
}
a:hover {
  color: #64b42d;  /* enviaM Galvanic Green Bright */
}




/* ===== NAVIGATION ===== */
nav {
  background-color: inherit; /* Hintergrundfarbe Top-Bar: #fff */
  color: inherit;            /* Standard Schrift-Farbe Top-Bar: #333 */
}

nav a,
nav a:link,
nav a:visited,
nav a:active,
nav a:focus {
  color: #333;  /* Standard Schrift-Farbe Top-Bar: #333 */
  color: #8a8784;  /* enviaM */
}
nav a:hover {
  color: #64b42d;  /* enviaM Galvanic Green Bright */
}




/* ===== FOOTER ===== */
footer {
  background-color: #ddd;   /* Hintergrundfarbe Footer: #ddd */
  color: #212121;           /* Standard Schrift-Farbe Footer: #212121 */
  background-color: #3c3732; /* enviam */
  color: #8a8784; /* enviam */
}

footer a,
footer a:link,
footer a:visited,
footer a:active,
footer a:focus {
  color: #666;    /* Standard Link-Footer = globale Link-Farbe: #666 */
  color: #FFBA2D; /* INTERROLL darker-yellow */
  color: #EF7B00; /* MST orange */
  color: #8a8784; /* enviaM light grey */
}
footer a:active,
footer a:focus,
footer a:hover {
  color: #64b42d;  /* enviaM Galvanic Green Bright */
}




/* ===== ICONS ===== */
/* Fav-Icon:normal */
.icon-star-empty:before {
  /* content: "\f087"; */ /* icon-thumbs-o-up STANDARD */
  /* content: "\e9d7"; */ /* icon-star-empty */
  /* content: "\e96e"; */ /* icon-bubble2 (outline) */
}
/* Fav-Icon:active */
.icon-star-full:before {
  /* content: "\f164"; */ /* icon-thumbs-up STANDARD */
  /* content: "\e9d9"; */ /* icon-star-full */
  /* content: "\e96b"; */ /* icon-bubble-full */
}

/* Fav-Icon:normal */
.icon-big,
.icon-big-normal,
.icon-bigger {
  color: #ccc;
}

/* Monitor-Icon:normal */
.icon-round {
  color: #fff;
  background-color: #ccc;
}

/* Fav-Icon:active */
.icon-star-full,
.icon-bigger.active {
  color: #ffd54f; /* yellow-gold */
  color: #0099FF; /* light-blue */
  color: #FDD500; /* INTERROLL yellow */
  color: #EF7B00; /* MST orange */
  color: #64b42d;  /* enviaM Galvanic Green Bright */
}

.icon-display-active:before {
  content: "\e956"; /* monitor-icon */
}

/* Monitor-Icon:active */
.icon-display-active {
  /* Highlight monitor-icon auf manager- und presenter-Seite */
  background-color: #4569B1; /* URG dark-blue */
  background-color: #EE6715; /* ING-DiBa orange */
  /* background-color: #ACB316; */ /* SANOFI green */
  /* background-color: #1A8259 */ /* bioNTech dark-green */
  background-color: #6AA215; /* bioNTech light-green */
  background-color: #FDD500; /* INTERROLL yellow */
  background-color: #FFBA2D; /* INTERROLL darker-yellow */
  background-color: #3E3E3E; /* INTERROLL dark-grey */
  background-color: #EF7B00; /* MST orange */
  background-color: #64b42d;  /* enviaM Galvanic Green Bright */
}
/* Monitor-Icon:active */
.icon-display-active.icon-round {
  /* Highlight monitor-icon font-color auf manager- und presenter-Seite */
  color: #fff;
}


/* presenter */
#presenter-chat-body .table-row-been-on-monitor td {
  /* Highlight-Text: row die bereits auf monitor war */
  /* color: #aaa !important; */
}
#presenter-chat-body .table-row-been-on-monitor .icon-round {
  /* Highlight-Icon: row die bereits auf monitor war */
  /*
  color: #aaa;
  background-color: #fff;
  border: 1px solid #ddd;
  */
}

/* manager */
#manager-chat-body .table-row-been-on-monitor td {
  /* Highlight-Text: row die bereits auf monitor war */
  color: #aaa !important;
}
#manager-chat-body .table-row-been-on-monitor .icon-round {
  /* Highlight-Icon: row die bereits auf monitor war */
  color: #aaa;
  background-color: #fff;
  border: 1px solid #ddd;
}




/* ===== BUTTON ===== */
.btn,
a.btn,
.btn-flat {
  font-family: innogyWEB-Medium, Arial, "Helvetica Neue", Helvetica, sans-serif;
  box-shadow: none;
  background-color: transparent;
  background-color: #ff6200; /* ING-DiBa - orange */
  /* background-color: #444492; */ /* SANOFI - blue */
  background-color: #6AA215; /* bioNTech light-green */
  background-color: #FDD500; /* INTERROLL yellow */
  background-color: #EF7B00; /* MST orange */
  background-color: #64b42d;  /* enviaM Galvanic Green Bright */
  color: #000;
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  -webkit-transition:0.2s ease-out;
  -moz-transition:0.2s ease-out;
  -o-transition:0.2s ease-out;
  -ms-transition:0.2s ease-out;
  transition:0.2s ease-out;
  
  padding-left: 33px;
  padding-right: 33px;
  border-radius: 17px;
}

/* 'transparente' Buttons in den Modal-Dialogen */
button.btn-flat,
a.btn-flat {
  font-family: innogyWEB-Medium, Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-weight: normal;
  background-color: transparent;
  /* background-color: #000; */
  color: #ff6200; /* ING-DiBa - orange */
  /* color: #444492; */ /* SANOFI - blue */
  color: #6AA215; /* bioNTech light-green */
  color: #FDD500; /* INTERROLL yellow */
  color: #EF7B00; /* MST orange */
  color: #64b42d;  /* enviaM Galvanic Green Bright */
  box-shadow: none;
  
  font-weight: bold;
  background-color: #64b42d;  /* enviaM Galvanic Green Bright */
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  -webkit-transition:0.2s ease-out;
  -moz-transition:0.2s ease-out;
  -o-transition:0.2s ease-out;
  -ms-transition:0.2s ease-out;
  transition:0.2s ease-out;
  
  padding-left: 33px;
  padding-right: 33px;
  border-radius: 17px;
}

.btn:hover,
a.btn:hover,
.btn-flat:hover,
button.btn-flat:hover,
a.btn-flat:hover,
.btn:hover {
  background-color: #ff7200; /* ING-DiBa - orange-lighter */
  /* background-color: #5D65B2; */ /* SANOFI - blue-lighter */
  background-color: #75A922; /* bioNTech light-green-lighter */
  background-color: #FFF20A; /* INTERROLL light-yellow */
  background-color: #FFA13D; /* MST lighter-orange */
  background-color: #00875a;  /* enviaM Galvanic Green Muted */
  box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}



/* ===== MAIN-TABLE ===== */
a.sort-table.active {
  /* clickbare Tabellen Überschriften */
  /* color: #ff6200; */ /* ING-DiBa - orange */
  /* color: #444492; */ /* SANOFI - blue */
  /* color: #6AA215; */ /* bioNTech light-green */
  color: #FDD500; /* INTERROLL yellow */
  color: #FFBA2D; /* INTERROLL darker-yellow */
  color: #EF7B00; /* MST orange */
  color: #64b42d;  /* enviaM Galvanic Green Bright */
  text-decoration: underline;
}


/* LABEL ======================================= */
/* Text-Label von Eingabefeld auf response-Seite */
/* active state */
input:focus ~ label,
input:valid ~ label,
textarea:focus ~ label,
textarea:valid ~ label {
  top: -20px;
  font-size: 14px;
  color: #5264AE;
  color: #EE6715; /* ING-DiBa orange */
  /* color: #444492; */ /* SANOFI - blue */
  color: #6AA215; /* bioNTech light-green */
  color: #FFBA2D; /* INTERROLL darker-yellow */
  color: #EF7B00; /* MST orange */
  color: #64b42d;  /* enviaM Galvanic Green Bright */
}


/* BOTTOM BARS ================================= */
/* Linie unter Eingabefeld auf response-Seite */
.bar:before,
.bar:after {
  background: #5264AE;
  background: #EE6715; /* ING-DiBa orange */
  /* background: #444492; */ /* SANOFI - blue */
  background: #6AA215; /* bioNTech light-green */
  background: #FDD500; /* INTERROLL yellow */
  background: #EF7B00; /* MST orange */
  background: #64b42d;  /* enviaM Galvanic Green Bright */
}



/* MONITOR ================================= */
/* */
main.monitor {
  background: #f2f2f2; /* Standard */
  background: transparent; /* keine Farbe im Hintergrund */
  /* background: #FDD500; */ /* INTERROLL yellow */
}



/* HIGHLIGHTER ================================== */
/* INPUT-ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
	/* from { background: #EE6715; } */ /* ING-DiBa orange */
	/* from { background: #444492; } */ /* SANOFI - blue */
	/* from { background: #6AA215; } */ /* bioNTech light-green */
	/* from { background: #FFF20A; } */ /* INTERROLL light-yellow */
	/* from { background: #EF7B00; } */ /* MST orange */
	from { background: #64b42d; } /* enviaM Galvanic Green Bright */
  to 	 { width: 0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
	/* from { background: #EE6715; } */ /* ING-DiBa orange */
	/* from { background: #444492; } */ /* SANOFI - blue */
	/* from { background: #6AA215; } */ /* bioNTech light-green */
	/* from { background: #FFF20A; } */ /* INTERROLL light-yellow */
	/* from { background: #EF7B00; } */ /* MST orange */
	from { background: #64b42d; } /* enviaM Galvanic Green Bright */
  to 	 { width: 0; background:transparent; }
}
@-ms-keyframes inputHighlighter {
	/* from { background: #EE6715; } */ /* ING-DiBa orange */
	/* from { background: #444492; } */ /* SANOFI - blue */
	/* from { background: #6AA215; } */ /* bioNTech light-green */
	/* from { background: #FFF20A; } */ /* INTERROLL light-yellow */
	/* from { background: #EF7B00; } */ /* MST orange */
	from { background: #64b42d; } /* enviaM Galvanic Green Bright */
  to 	 { width: 0; background:transparent; }
}
@-o-keyframes inputHighlighter {
	/* from { background: #EE6715; } */ /* ING-DiBa orange */
	/* from { background: #444492; } */ /* SANOFI - blue */
	/* from { background: #6AA215; } */ /* bioNTech light-green */
	/* from { background: #FFF20A; } */ /* INTERROLL light-yellow */
	/* from { background: #EF7B00; } */ /* MST orange */
	from { background: #64b42d; } /* enviaM Galvanic Green Bright */
  to 	 { width: 0; background:transparent; }
}
@keyframes inputHighlighter {
	/* from { background: #EE6715; } */ /* ING-DiBa orange */
	/* from { background: #444492; } */ /* SANOFI - blue */
	/* from { background: #6AA215; } */ /* bioNTech light-green */
	/* from { background: #FFF20A; } */ /* INTERROLL light-yellow */
	/* from { background: #EF7B00; } */ /* MST orange */
	from { background: #64b42d; } /* enviaM Galvanic Green Bright */
  to 	 { width: 0; background:transparent; }
}