/* custom CSS */
/* ============================================
   Deutsches Rotes Kreuz – Portal fonts
   Brand: https://styleguide.drk.de/deutsches-rotes-kreuz/basiselemente/schrift
   Digital: https://styleguide.drk.de/deutsches-rotes-kreuz/digital/webseite

   Hausschriften
   - Merriweather (serif)  – headlines and subheadings
   - Helvetica Neue LT     – body, UI, emphasis

   Uploaded cuts
   - HelveticaNeueLT-Light  (300) – Fließtext
   - HelveticaNeueLT-Medium (500) – Hervorhebungen (web-cut; no Bold on CDN)
   - Merriweather Light     (300)
   - Merriweather Bold      (700)

   Fallbacks follow the web styleguide: Open Sans → Arial → Helvetica
   ============================================ */

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

  --drk-color-heading: rgb(230, 0, 5);
  --drk-color-heading-hover: #000;

  /* 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
   ============================================ */

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;
  color: var(--drk-color-heading) !important;
}

h1:hover,
h2:hover,
h3:hover,
h4:hover,
h5:hover,
h6:hover,
h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
a:hover h1,
a:hover h2,
a:hover h3,
a:hover h4,
a:hover h5,
a:hover h6,
.title-container:hover,
.title-container .title:hover {
  color: var(--drk-color-heading-hover) !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 links – DRK-Rot, black on hover */

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

.startview a:hover,
.startview a:focus {
  color: var(--drk-color-heading-hover) !important;
}

/* 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: 'OpenSans','Open Sans',Arial,Helvetica,Sans-Serif}/*end-mf-auto-generated*/