
/* custom CSS */
/* ============================================
   Deutsches Rotes Kreuz – Overlay variant
   Same fonts and type scale as deutsches-rotes-kreuz.css
   For portals with text on image via black tone plate.

   Headings stay white (no DRK-Rot). Hover uses DRK-Rot so
   it remains visible on the dark plate (black would disappear).
   ============================================ */

:root {
  --drk-font-body: "Helvetica Neue LT", "Open Sans", Arial, Helvetica,
    sans-serif;
  --drk-font-heading: "Merriweather", Georgia, "Times New Roman", serif;

  --drk-color-on-plate: #fff;
  --drk-color-on-plate-hover: rgb(230, 0, 5);

  /* Type scale from 17px body, golden ratio φ = 1.618
     h1 = 17 × φ² = 45px
     h2 = 17 × φ  = 28px
     h3 = 17 × √φ = 22px
     h4 / body    = 17px / 25px */
  --drk-body-size: 17px;
  --drk-body-line: 25px;
  --drk-h1-size: 45px;
  --drk-h1-line: 54px;
  --drk-h2-size: 28px;
  --drk-h2-line: 35px;
  --drk-h3-size: 22px;
  --drk-h3-line: 29px;
  --drk-h4-size: 17px;
  --drk-h4-line: 25px;
}

@media (max-width: 768px) {
  :root {
    --drk-h1-size: 28px;
    --drk-h1-line: 35px;
    --drk-h2-size: 22px;
    --drk-h2-line: 29px;
    --drk-h3-size: 17px;
    --drk-h3-line: 25px;
  }
}

/* --- Helvetica Neue LT – Light (body / Regular mapping) --- */

@font-face {
  font-family: "Helvetica Neue LT";
  src: url("https://static.mediaflowpro.com/fonts/customer/deutsches-rotes-kreuz/HelveticaNeueLT-Light.woff2")
    format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica Neue LT";
  src: url("https://static.mediaflowpro.com/fonts/customer/deutsches-rotes-kreuz/HelveticaNeueLT-Light.woff2")
    format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --- Helvetica Neue LT – Medium (emphasis / Bold mapping) --- */

@font-face {
  font-family: "Helvetica Neue LT";
  src: url("https://static.mediaflowpro.com/fonts/customer/deutsches-rotes-kreuz/HelveticaNeueLT-Medium.woff2")
    format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica Neue LT";
  src: url("https://static.mediaflowpro.com/fonts/customer/deutsches-rotes-kreuz/HelveticaNeueLT-Medium.woff2")
    format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica Neue LT";
  src: url("https://static.mediaflowpro.com/fonts/customer/deutsches-rotes-kreuz/HelveticaNeueLT-Medium.woff2")
    format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --- Merriweather – Light --- */

@font-face {
  font-family: "Merriweather";
  src: url("https://static.mediaflowpro.com/fonts/customer/deutsches-rotes-kreuz/merriweather-v30-latin-300.woff2")
    format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Merriweather";
  src: url("https://static.mediaflowpro.com/fonts/customer/deutsches-rotes-kreuz/merriweather-v30-latin-300.woff2")
    format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --- Merriweather – Bold (headlines) --- */

@font-face {
  font-family: "Merriweather";
  src: url("https://static.mediaflowpro.com/fonts/customer/deutsches-rotes-kreuz/merriweather-v30-latin-700.woff2")
    format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ============================================
   Body – Helvetica Neue Light
   ============================================ */

html body,
html body input,
html body select,
html body textarea,
html body button,
html body p,
html body a,
html body div,
html body span,
html body li,
html body td,
html body th,
html body label {
  font-family: var(--drk-font-body) !important;
  font-weight: 300;
}

/* Hervorhebungen – Helvetica Neue Medium (styleguide: Neue Helvetica Bold) */

strong,
b,
html body strong,
html body b {
  font-family: var(--drk-font-body) !important;
  font-weight: 500 !important;
}

/* ============================================
   Headlines – Merriweather Bold, no forced color
   (startview sets white below for the tone plate)
   ============================================ */

h1,
h2,
h3,
h4,
h5,
h6,
.title-container,
.title-container .title,
.topnav .title-container .title,
.dialog .dialog-title {
  font-family: var(--drk-font-heading) !important;
  font-weight: 700 !important;
}

html body h1 span,
html body h2 span,
html body h3 span,
html body h4 span,
html body h5 span,
html body h6 span,
.header-content-header-1-font span,
.header-content-header-2-font span,
.main-content-header-1-font span,
.main-content-header-2-font span,
.teaser-header-1-font span,
.main-teaser-header-1-font span {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}

h1,
h1.main-content-header-1-font,
h1.header-content-header-1-font,
.startview h1 {
  font-size: var(--drk-h1-size) !important;
  line-height: var(--drk-h1-line) !important;
}

h2,
h2.main-content-header-2-font,
h2.header-content-header-2-font,
.startview h2 {
  font-size: var(--drk-h2-size) !important;
  line-height: var(--drk-h2-line) !important;
}

h3,
.startview h3 {
  font-size: var(--drk-h3-size) !important;
  line-height: var(--drk-h3-line) !important;
}

h4,
h5,
h6 {
  font-size: var(--drk-h4-size) !important;
  line-height: var(--drk-h4-line) !important;
}

p,
.startview p,
.startview li {
  font-size: var(--drk-body-size) !important;
  line-height: var(--drk-body-line) !important;
}

/* ============================================
   Start page on black tone plate – white text
   Hover: DRK-Rot (visible on the dark plate)
   ============================================ */

.startview h1,
.startview h2,
.startview h3,
.startview h4,
.startview h5,
.startview h6,
.startview p,
.startview li,
.startview span,
.startview .header-content-header-1-font,
.startview .header-content-header-2-font,
.startview .main-content-header-1-font,
.startview .main-content-header-2-font {
  color: var(--drk-color-on-plate) !important;
}

.startview a,
.startview a:link,
.startview a:visited {
  color: var(--drk-color-on-plate) !important;
}

.startview h1:hover,
.startview h2:hover,
.startview h3:hover,
.startview h4:hover,
.startview a:hover,
.startview a:focus,
.startview a:hover h1,
.startview a:hover h2,
.startview a:hover h3 {
  color: var(--drk-color-on-plate-hover) !important;
}

#startview-4-background #startview-4-foreground > .information {
  margin-bottom: 32px;
}

/* Nav – Medium so Light does not disappear at UI sizes */

.treenav,
.treenav a,
.treenav span,
.treenav li,
.treenav .almtr_box a,
.treenavmobile,
.treenavmobile a,
.treenavmobile li,
.topnav,
.topnav a,
.topnav span {
  font-family: var(--drk-font-body) !important;
  font-weight: 500 !important;
}


/*begin-mf-auto-generated*/.button-1{background-color: #CACACA}/*end-mf-auto-generated*/
/*begin-mf-auto-generated*/.button-1:hover{background-color: #FFFFFF}/*end-mf-auto-generated*/
/*begin-mf-auto-generated*/.button-1{color: #333840}/*end-mf-auto-generated*/
/*begin-mf-auto-generated*/.button-1:hover{color: #000000}/*end-mf-auto-generated*/
/*begin-mf-auto-generated*/.button-1{border-color: #CACACA}/*end-mf-auto-generated*/
/*begin-mf-auto-generated*/.button-1:hover{border-color: #000000}/*end-mf-auto-generated*/
/*begin-mf-auto-generated*/.button-1{stroke: #333840}/*end-mf-auto-generated*/
/*begin-mf-auto-generated*/.button-1:hover{stroke: #000000}/*end-mf-auto-generated*/
/*begin-mf-auto-generated*/.button-2{background-color: #383838}/*end-mf-auto-generated*/
/*begin-mf-auto-generated*/.button-2:hover{background-color: #FFFFFF}/*end-mf-auto-generated*/
/*begin-mf-auto-generated*/.button-2{color: #FFFFFF}/*end-mf-auto-generated*/
/*begin-mf-auto-generated*/.button-2:hover{color: #000000}/*end-mf-auto-generated*/
/*begin-mf-auto-generated*/.button-2{border-color: #383838}/*end-mf-auto-generated*/
/*begin-mf-auto-generated*/.button-2:hover{border-color: #000000}/*end-mf-auto-generated*/
/*begin-mf-auto-generated*/.button-2{stroke: #FFFFFF}/*end-mf-auto-generated*/
/*begin-mf-auto-generated*/.button-2:hover{stroke: #000000}/*end-mf-auto-generated*/
/*begin-mf-auto-generated*/:root{--mf-custom-button-background-color:#383838}/*end-mf-auto-generated*//*begin-mf-auto-generated*/:root{--mf-custom-button-text-color:#FFFFFF}/*end-mf-auto-generated*//*begin-mf-auto-generated*/:root{--mf-custom-button-border-color:#383838}/*end-mf-auto-generated*//*begin-mf-auto-generated*/:root{--mf-custom-button-background-color-hover:#FFFFFF}/*end-mf-auto-generated*//*begin-mf-auto-generated*/:root{--mf-custom-button-text-color-hover:#000000}/*end-mf-auto-generated*//*begin-mf-auto-generated*/:root{--mf-custom-button-border-color-hover:#000000}/*end-mf-auto-generated*//*begin-mf-auto-generated*/.topnav{background-color: #FFFFFF}/*end-mf-auto-generated*/
/*begin-mf-auto-generated*/.topnav{color: #333840}/*end-mf-auto-generated*/
/*begin-mf-auto-generated*/.links a:link,.links a:visited{color: #333840}/*end-mf-auto-generated*/
/*begin-mf-auto-generated*/.topnav .separator{border-color: #eee}/*end-mf-auto-generated*/
/*begin-mf-auto-generated*/.topnav{border-color: #eee}/*end-mf-auto-generated*/
/*begin-mf-auto-generated*/.template-3 .topnav{border-right-color: #eee}/*end-mf-auto-generated*/
/*begin-mf-auto-generated*/.topnav .logo{height:79px}/*end-mf-auto-generated*//*begin-mf-auto-generated*/html,body,input,select{font-family: 'Arial','Open Sans',Arial,Helvetica,Sans-Serif}/*end-mf-auto-generated*/