/* Schriftzuweisungen für die öffentliche Website aus dem erlaubten Schriftkatalog.
 * Die data-font-Attribute am body steuern Überschriften und Fließtext unabhängig voneinander.
 */
body[data-font-h1='arial'] .website h1 {
    font-family: Arial, sans-serif;
}
body[data-font-h2='arial'] .website h2 {
    font-family: Arial, sans-serif;
}
body[data-font-h3='arial'] .website h3 {
    font-family: Arial, sans-serif;
}
body[data-font-text='arial'] .website,
body[data-font-text='arial'] .website .brand span,
body[data-font-text='arial'] .website .brand small,
body[data-font-text='arial'] .website .signature,
body[data-font-text='arial'] .website .steps > div > span,
body[data-font-text='arial'] .website .imagebadge em {
    font-family: Arial, sans-serif;
}
body[data-font-h1='georgia'] .website h1 {
    font-family: Georgia, serif;
}
body[data-font-h2='georgia'] .website h2 {
    font-family: Georgia, serif;
}
body[data-font-h3='georgia'] .website h3 {
    font-family: Georgia, serif;
}
body[data-font-text='georgia'] .website,
body[data-font-text='georgia'] .website .brand span,
body[data-font-text='georgia'] .website .brand small,
body[data-font-text='georgia'] .website .signature,
body[data-font-text='georgia'] .website .steps > div > span,
body[data-font-text='georgia'] .website .imagebadge em {
    font-family: Georgia, serif;
}
body[data-font-h1='verdana'] .website h1 {
    font-family: Verdana, sans-serif;
}
body[data-font-h2='verdana'] .website h2 {
    font-family: Verdana, sans-serif;
}
body[data-font-h3='verdana'] .website h3 {
    font-family: Verdana, sans-serif;
}
body[data-font-text='verdana'] .website,
body[data-font-text='verdana'] .website .brand span,
body[data-font-text='verdana'] .website .brand small,
body[data-font-text='verdana'] .website .signature,
body[data-font-text='verdana'] .website .steps > div > span,
body[data-font-text='verdana'] .website .imagebadge em {
    font-family: Verdana, sans-serif;
}
body[data-font-h1='trebuchet'] .website h1 {
    font-family: 'Trebuchet MS', sans-serif;
}
body[data-font-h2='trebuchet'] .website h2 {
    font-family: 'Trebuchet MS', sans-serif;
}
body[data-font-h3='trebuchet'] .website h3 {
    font-family: 'Trebuchet MS', sans-serif;
}
body[data-font-text='trebuchet'] .website,
body[data-font-text='trebuchet'] .website .brand span,
body[data-font-text='trebuchet'] .website .brand small,
body[data-font-text='trebuchet'] .website .signature,
body[data-font-text='trebuchet'] .website .steps > div > span,
body[data-font-text='trebuchet'] .website .imagebadge em {
    font-family: 'Trebuchet MS', sans-serif;
}
body[data-font-h1='system'] .website h1 {
    font-family: system-ui, sans-serif;
}
body[data-font-h2='system'] .website h2 {
    font-family: system-ui, sans-serif;
}
body[data-font-h3='system'] .website h3 {
    font-family: system-ui, sans-serif;
}
body[data-font-text='system'] .website,
body[data-font-text='system'] .website .brand span,
body[data-font-text='system'] .website .brand small,
body[data-font-text='system'] .website .signature,
body[data-font-text='system'] .website .steps > div > span,
body[data-font-text='system'] .website .imagebadge em {
    font-family: system-ui, sans-serif;
}
body[data-font-h1='dm-sans'] .website h1 {
    font-family: 'DM Sans', Arial, sans-serif;
}
body[data-font-h2='dm-sans'] .website h2 {
    font-family: 'DM Sans', Arial, sans-serif;
}
body[data-font-h3='dm-sans'] .website h3 {
    font-family: 'DM Sans', Arial, sans-serif;
}
body[data-font-text='dm-sans'] .website,
body[data-font-text='dm-sans'] .website .brand span,
body[data-font-text='dm-sans'] .website .brand small,
body[data-font-text='dm-sans'] .website .signature,
body[data-font-text='dm-sans'] .website .steps > div > span,
body[data-font-text='dm-sans'] .website .imagebadge em {
    font-family: 'DM Sans', Arial, sans-serif;
}
body[data-font-h1='manrope'] .website h1 {
    font-family: 'Manrope', Arial, sans-serif;
}
body[data-font-h2='manrope'] .website h2 {
    font-family: 'Manrope', Arial, sans-serif;
}
body[data-font-h3='manrope'] .website h3 {
    font-family: 'Manrope', Arial, sans-serif;
}
body[data-font-text='manrope'] .website,
body[data-font-text='manrope'] .website .brand span,
body[data-font-text='manrope'] .website .brand small,
body[data-font-text='manrope'] .website .signature,
body[data-font-text='manrope'] .website .steps > div > span,
body[data-font-text='manrope'] .website .imagebadge em {
    font-family: 'Manrope', Arial, sans-serif;
}
body[data-font-h1='inter'] .website h1 {
    font-family: 'Inter', Arial, sans-serif;
}
body[data-font-h2='inter'] .website h2 {
    font-family: 'Inter', Arial, sans-serif;
}
body[data-font-h3='inter'] .website h3 {
    font-family: 'Inter', Arial, sans-serif;
}
body[data-font-text='inter'] .website,
body[data-font-text='inter'] .website .brand span,
body[data-font-text='inter'] .website .brand small,
body[data-font-text='inter'] .website .signature,
body[data-font-text='inter'] .website .steps > div > span,
body[data-font-text='inter'] .website .imagebadge em {
    font-family: 'Inter', Arial, sans-serif;
}
body[data-font-h1='lato'] .website h1 {
    font-family: 'Lato', Arial, sans-serif;
}
body[data-font-h2='lato'] .website h2 {
    font-family: 'Lato', Arial, sans-serif;
}
body[data-font-h3='lato'] .website h3 {
    font-family: 'Lato', Arial, sans-serif;
}
body[data-font-text='lato'] .website,
body[data-font-text='lato'] .website .brand span,
body[data-font-text='lato'] .website .brand small,
body[data-font-text='lato'] .website .signature,
body[data-font-text='lato'] .website .steps > div > span,
body[data-font-text='lato'] .website .imagebadge em {
    font-family: 'Lato', Arial, sans-serif;
}
body[data-font-h1='montserrat'] .website h1 {
    font-family: 'Montserrat', Arial, sans-serif;
}
body[data-font-h2='montserrat'] .website h2 {
    font-family: 'Montserrat', Arial, sans-serif;
}
body[data-font-h3='montserrat'] .website h3 {
    font-family: 'Montserrat', Arial, sans-serif;
}
body[data-font-text='montserrat'] .website,
body[data-font-text='montserrat'] .website .brand span,
body[data-font-text='montserrat'] .website .brand small,
body[data-font-text='montserrat'] .website .signature,
body[data-font-text='montserrat'] .website .steps > div > span,
body[data-font-text='montserrat'] .website .imagebadge em {
    font-family: 'Montserrat', Arial, sans-serif;
}
body[data-font-h1='open-sans'] .website h1 {
    font-family: 'Open Sans', Arial, sans-serif;
}
body[data-font-h2='open-sans'] .website h2 {
    font-family: 'Open Sans', Arial, sans-serif;
}
body[data-font-h3='open-sans'] .website h3 {
    font-family: 'Open Sans', Arial, sans-serif;
}
body[data-font-text='open-sans'] .website,
body[data-font-text='open-sans'] .website .brand span,
body[data-font-text='open-sans'] .website .brand small,
body[data-font-text='open-sans'] .website .signature,
body[data-font-text='open-sans'] .website .steps > div > span,
body[data-font-text='open-sans'] .website .imagebadge em {
    font-family: 'Open Sans', Arial, sans-serif;
}
body[data-font-h1='playfair-display'] .website h1 {
    font-family: 'Playfair Display', Georgia, serif;
}
body[data-font-h2='playfair-display'] .website h2 {
    font-family: 'Playfair Display', Georgia, serif;
}
body[data-font-h3='playfair-display'] .website h3 {
    font-family: 'Playfair Display', Georgia, serif;
}
body[data-font-text='playfair-display'] .website,
body[data-font-text='playfair-display'] .website .brand span,
body[data-font-text='playfair-display'] .website .brand small,
body[data-font-text='playfair-display'] .website .signature,
body[data-font-text='playfair-display'] .website .steps > div > span,
body[data-font-text='playfair-display'] .website .imagebadge em {
    font-family: 'Playfair Display', Georgia, serif;
}
body[data-font-h1='lora'] .website h1 {
    font-family: 'Lora', Georgia, serif;
}
body[data-font-h2='lora'] .website h2 {
    font-family: 'Lora', Georgia, serif;
}
body[data-font-h3='lora'] .website h3 {
    font-family: 'Lora', Georgia, serif;
}
body[data-font-text='lora'] .website,
body[data-font-text='lora'] .website .brand span,
body[data-font-text='lora'] .website .brand small,
body[data-font-text='lora'] .website .signature,
body[data-font-text='lora'] .website .steps > div > span,
body[data-font-text='lora'] .website .imagebadge em {
    font-family: 'Lora', Georgia, serif;
}
body[data-font-h1='merriweather'] .website h1 {
    font-family: 'Merriweather', Georgia, serif;
}
body[data-font-h2='merriweather'] .website h2 {
    font-family: 'Merriweather', Georgia, serif;
}
body[data-font-h3='merriweather'] .website h3 {
    font-family: 'Merriweather', Georgia, serif;
}
body[data-font-text='merriweather'] .website,
body[data-font-text='merriweather'] .website .brand span,
body[data-font-text='merriweather'] .website .brand small,
body[data-font-text='merriweather'] .website .signature,
body[data-font-text='merriweather'] .website .steps > div > span,
body[data-font-text='merriweather'] .website .imagebadge em {
    font-family: 'Merriweather', Georgia, serif;
}
body[data-font-h1='cormorant-garamond'] .website h1 {
    font-family: 'Cormorant Garamond', Georgia, serif;
}
body[data-font-h2='cormorant-garamond'] .website h2 {
    font-family: 'Cormorant Garamond', Georgia, serif;
}
body[data-font-h3='cormorant-garamond'] .website h3 {
    font-family: 'Cormorant Garamond', Georgia, serif;
}
body[data-font-text='cormorant-garamond'] .website,
body[data-font-text='cormorant-garamond'] .website .brand span,
body[data-font-text='cormorant-garamond'] .website .brand small,
body[data-font-text='cormorant-garamond'] .website .signature,
body[data-font-text='cormorant-garamond'] .website .steps > div > span,
body[data-font-text='cormorant-garamond'] .website .imagebadge em {
    font-family: 'Cormorant Garamond', Georgia, serif;
}
body[data-font-h1='tenor-sans'] .website h1 {
    font-family: 'Tenor Sans', Arial, sans-serif;
}
body[data-font-h2='tenor-sans'] .website h2 {
    font-family: 'Tenor Sans', Arial, sans-serif;
}
body[data-font-h3='tenor-sans'] .website h3 {
    font-family: 'Tenor Sans', Arial, sans-serif;
}
body[data-font-text='tenor-sans'] .website,
body[data-font-text='tenor-sans'] .website .brand span,
body[data-font-text='tenor-sans'] .website .brand small,
body[data-font-text='tenor-sans'] .website .signature,
body[data-font-text='tenor-sans'] .website .steps > div > span,
body[data-font-text='tenor-sans'] .website .imagebadge em {
    font-family: 'Tenor Sans', Arial, sans-serif;
}
body[data-font-h1='red-hat-display'] .website h1 {
    font-family: 'Red Hat Display', Arial, sans-serif;
}
body[data-font-h2='red-hat-display'] .website h2 {
    font-family: 'Red Hat Display', Arial, sans-serif;
}
body[data-font-h3='red-hat-display'] .website h3 {
    font-family: 'Red Hat Display', Arial, sans-serif;
}
body[data-font-text='red-hat-display'] .website,
body[data-font-text='red-hat-display'] .website .brand span,
body[data-font-text='red-hat-display'] .website .brand small,
body[data-font-text='red-hat-display'] .website .signature,
body[data-font-text='red-hat-display'] .website .steps > div > span,
body[data-font-text='red-hat-display'] .website .imagebadge em {
    font-family: 'Red Hat Display', Arial, sans-serif;
}

/* Schrift-Schatten pro Textgruppe. Attributwerte halten die Darstellung auch ohne JavaScript verfügbar. */
body[data-shadow-h1='0'] {
    --font-shadow-h1: none;
}
body[data-shadow-h1='1'] {
    --font-shadow-h1: 0 1px 1px rgb(0 0 0 / 16%), 0 1px 2px rgb(0 0 0 / 16%);
}
body[data-shadow-h1='2'] {
    --font-shadow-h1: 0 1px 1px rgb(0 0 0 / 22%), 0 1px 4px rgb(0 0 0 / 22%);
}
body[data-shadow-h1='3'] {
    --font-shadow-h1: 0 1px 1px rgb(0 0 0 / 28%), 0 1px 6px rgb(0 0 0 / 28%);
}
body[data-shadow-h1='4'] {
    --font-shadow-h1: 0 1px 1px rgb(0 0 0 / 34%), 0 1px 8px rgb(0 0 0 / 34%);
}
body[data-shadow-h1='5'] {
    --font-shadow-h1: 0 2px 1px rgb(0 0 0 / 40%), 0 2px 10px rgb(0 0 0 / 40%);
}
body[data-shadow-h1='6'] {
    --font-shadow-h1: 0 2px 2px rgb(0 0 0 / 46%), 0 2px 12px rgb(0 0 0 / 46%);
}
body[data-shadow-h1='7'] {
    --font-shadow-h1: 0 2px 2px rgb(0 0 0 / 52%), 0 2px 14px rgb(0 0 0 / 52%);
}
body[data-shadow-h1='8'] {
    --font-shadow-h1: 0 3px 2px rgb(0 0 0 / 58%), 0 3px 16px rgb(0 0 0 / 58%);
}
body[data-shadow-h1='9'] {
    --font-shadow-h1: 0 3px 2px rgb(0 0 0 / 64%), 0 3px 18px rgb(0 0 0 / 64%);
}
body[data-shadow-h1='10'] {
    --font-shadow-h1: 0 3px 3px rgb(0 0 0 / 70%), 0 3px 20px rgb(0 0 0 / 70%);
}
body[data-shadow-h2='0'] {
    --font-shadow-h2: none;
}
body[data-shadow-h2='1'] {
    --font-shadow-h2: 0 1px 1px rgb(0 0 0 / 16%), 0 1px 2px rgb(0 0 0 / 16%);
}
body[data-shadow-h2='2'] {
    --font-shadow-h2: 0 1px 1px rgb(0 0 0 / 22%), 0 1px 4px rgb(0 0 0 / 22%);
}
body[data-shadow-h2='3'] {
    --font-shadow-h2: 0 1px 1px rgb(0 0 0 / 28%), 0 1px 6px rgb(0 0 0 / 28%);
}
body[data-shadow-h2='4'] {
    --font-shadow-h2: 0 1px 1px rgb(0 0 0 / 34%), 0 1px 8px rgb(0 0 0 / 34%);
}
body[data-shadow-h2='5'] {
    --font-shadow-h2: 0 2px 1px rgb(0 0 0 / 40%), 0 2px 10px rgb(0 0 0 / 40%);
}
body[data-shadow-h2='6'] {
    --font-shadow-h2: 0 2px 2px rgb(0 0 0 / 46%), 0 2px 12px rgb(0 0 0 / 46%);
}
body[data-shadow-h2='7'] {
    --font-shadow-h2: 0 2px 2px rgb(0 0 0 / 52%), 0 2px 14px rgb(0 0 0 / 52%);
}
body[data-shadow-h2='8'] {
    --font-shadow-h2: 0 3px 2px rgb(0 0 0 / 58%), 0 3px 16px rgb(0 0 0 / 58%);
}
body[data-shadow-h2='9'] {
    --font-shadow-h2: 0 3px 2px rgb(0 0 0 / 64%), 0 3px 18px rgb(0 0 0 / 64%);
}
body[data-shadow-h2='10'] {
    --font-shadow-h2: 0 3px 3px rgb(0 0 0 / 70%), 0 3px 20px rgb(0 0 0 / 70%);
}
body[data-shadow-h3='0'] {
    --font-shadow-h3: none;
}
body[data-shadow-h3='1'] {
    --font-shadow-h3: 0 1px 1px rgb(0 0 0 / 16%), 0 1px 2px rgb(0 0 0 / 16%);
}
body[data-shadow-h3='2'] {
    --font-shadow-h3: 0 1px 1px rgb(0 0 0 / 22%), 0 1px 4px rgb(0 0 0 / 22%);
}
body[data-shadow-h3='3'] {
    --font-shadow-h3: 0 1px 1px rgb(0 0 0 / 28%), 0 1px 6px rgb(0 0 0 / 28%);
}
body[data-shadow-h3='4'] {
    --font-shadow-h3: 0 1px 1px rgb(0 0 0 / 34%), 0 1px 8px rgb(0 0 0 / 34%);
}
body[data-shadow-h3='5'] {
    --font-shadow-h3: 0 2px 1px rgb(0 0 0 / 40%), 0 2px 10px rgb(0 0 0 / 40%);
}
body[data-shadow-h3='6'] {
    --font-shadow-h3: 0 2px 2px rgb(0 0 0 / 46%), 0 2px 12px rgb(0 0 0 / 46%);
}
body[data-shadow-h3='7'] {
    --font-shadow-h3: 0 2px 2px rgb(0 0 0 / 52%), 0 2px 14px rgb(0 0 0 / 52%);
}
body[data-shadow-h3='8'] {
    --font-shadow-h3: 0 3px 2px rgb(0 0 0 / 58%), 0 3px 16px rgb(0 0 0 / 58%);
}
body[data-shadow-h3='9'] {
    --font-shadow-h3: 0 3px 2px rgb(0 0 0 / 64%), 0 3px 18px rgb(0 0 0 / 64%);
}
body[data-shadow-h3='10'] {
    --font-shadow-h3: 0 3px 3px rgb(0 0 0 / 70%), 0 3px 20px rgb(0 0 0 / 70%);
}
body[data-shadow-text='0'] {
    --font-shadow-text: none;
}
body[data-shadow-text='1'] {
    --font-shadow-text: 0 1px 1px rgb(0 0 0 / 16%), 0 1px 2px rgb(0 0 0 / 16%);
}
body[data-shadow-text='2'] {
    --font-shadow-text: 0 1px 1px rgb(0 0 0 / 22%), 0 1px 4px rgb(0 0 0 / 22%);
}
body[data-shadow-text='3'] {
    --font-shadow-text: 0 1px 1px rgb(0 0 0 / 28%), 0 1px 6px rgb(0 0 0 / 28%);
}
body[data-shadow-text='4'] {
    --font-shadow-text: 0 1px 1px rgb(0 0 0 / 34%), 0 1px 8px rgb(0 0 0 / 34%);
}
body[data-shadow-text='5'] {
    --font-shadow-text: 0 2px 1px rgb(0 0 0 / 40%), 0 2px 10px rgb(0 0 0 / 40%);
}
body[data-shadow-text='6'] {
    --font-shadow-text: 0 2px 2px rgb(0 0 0 / 46%), 0 2px 12px rgb(0 0 0 / 46%);
}
body[data-shadow-text='7'] {
    --font-shadow-text: 0 2px 2px rgb(0 0 0 / 52%), 0 2px 14px rgb(0 0 0 / 52%);
}
body[data-shadow-text='8'] {
    --font-shadow-text: 0 3px 2px rgb(0 0 0 / 58%), 0 3px 16px rgb(0 0 0 / 58%);
}
body[data-shadow-text='9'] {
    --font-shadow-text: 0 3px 2px rgb(0 0 0 / 64%), 0 3px 18px rgb(0 0 0 / 64%);
}
body[data-shadow-text='10'] {
    --font-shadow-text: 0 3px 3px rgb(0 0 0 / 70%), 0 3px 20px rgb(0 0 0 / 70%);
}
body[data-shadow-text] .website,
body[data-shadow-text] .website .hero .heroslide > p {
    text-shadow: var(--font-shadow-text, none);
}
body[data-shadow-h1] .website h1 {
    text-shadow: var(--font-shadow-h1, none);
}
body[data-shadow-h2] .website h2 {
    text-shadow: var(--font-shadow-h2, none);
}
body[data-shadow-h3] .website h3 {
    text-shadow: var(--font-shadow-h3, none);
}

/* Sliderüberschriften erhalten die gewählte Schattenstärke auch gegenüber eigenen Hero-Regeln. */
body[data-shadow-h1] .website .hero .herotext h1 {
    text-shadow: var(--font-shadow-h1, none);
}
body[data-shadow-h2] .website .hero .herotext h2 {
    text-shadow: var(--font-shadow-h2, none);
}

/* Größe 0 überlässt die Darstellung den bisherigen Komponentenregeln. */
body[data-size-h1]:not([data-size-h1='0']) .website h1,
body[data-size-h1]:not([data-size-h1='0']) .website .hero .herotext h1 {
    font-size: var(--font-size-h1);
}
body[data-size-h2]:not([data-size-h2='0']) .website h2 {
    font-size: var(--font-size-h2);
}
body[data-size-h3]:not([data-size-h3='0']) .website h3 {
    font-size: var(--font-size-h3);
}
body[data-size-text]:not([data-size-text='0']) .website,
body[data-size-text]:not([data-size-text='0']) .website :is(p, li, small, label, input, textarea, select, button, a, .eyebrow, .heronote) {
    font-size: var(--font-size-text);
}
@media (max-width: 700px) {
    body[data-size-h1]:not([data-size-h1='0']) .website h1,
    body[data-size-h1]:not([data-size-h1='0']) .website .hero .herotext h1 {
        font-size: min(var(--font-size-h1), clamp(28px, 10vw, 64px));
    }
    body[data-size-h2]:not([data-size-h2='0']) .website h2 {
        font-size: min(var(--font-size-h2), clamp(24px, 8vw, 48px));
    }
    body[data-size-h3]:not([data-size-h3='0']) .website h3 {
        font-size: min(var(--font-size-h3), clamp(20px, 6vw, 36px));
    }
}