/* Caritas-Designsystem: Design-Token als CSS-Variablen.
   Generierte Datei, nicht von Hand ändern. */

/* 1. TYPOGRAFIE */

:root {

  --font-size-base:        112.5%;

  --font-weight-light:     300;
  --font-weight-regular:   400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;

  --line-height-ratio-tight:     1.15;
  --line-height-ratio-heading:   1.2;
  --line-height-ratio-body:      1.6;
  --line-height-ratio-loose:     1.75;

  --letter-spacing-tight:  -0.01em;
  --letter-spacing-normal:  0;
  --letter-spacing-wide:    0.04em;
  --letter-spacing-wider:   0.08em;

}

html {
  font-size: var(--font-size-base);
}

/* 1b. TYPOGRAFIE UND LAYOUT – RESPONSIV */

:root {
  --font-size-display:                3.5rem;
  --line-height-display:              3.83333rem;
  --letter-spacing-display:           -0.035rem;
  --font-size-h1:                     3rem;
  --line-height-h1:                   3.61111rem;
  --letter-spacing-h1:                -0.03rem;
  --font-size-h2:                     2.5rem;
  --line-height-h2:                   3rem;
  --letter-spacing-h2:                -0.025rem;
  --font-size-h3:                     2rem;
  --line-height-h3:                   2.38889rem;
  --letter-spacing-h3:                -0.02rem;
  --font-size-slider-text:            2rem;
  --line-height-slider-text:          2.38889rem;
  --letter-spacing-slider-text:       -0.02rem;
  --font-size-h4:                     1.77778rem;
  --line-height-h4:                   2.22222rem;
  --letter-spacing-h4:                -0.00889rem;
  --font-size-h5:                     1.5rem;
  --line-height-h5:                   1.88889rem;
  --letter-spacing-h5:                -0.00778rem;
  --font-size-h6:                     1.22222rem;
  --line-height-h6:                   1.55556rem;
  --letter-spacing-h6:                -0.00611rem;
  --font-size-upperline:              0.88889rem;
  --line-height-upperline:            1.11111rem;
  --letter-spacing-upperline:         0.00167rem;
  --font-size-bereich:                1.33333rem;
  --line-height-bereich:              2rem;
  --letter-spacing-bereich:           0.00167rem;
  --font-size-lead:                   1.22222rem;
  --line-height-lead:                 1.83333rem;
  --letter-spacing-lead:              0;

  --font-size-body:                   1rem;
  --line-height-body:                 1.55556rem;
  --letter-spacing-body:              0;
  --font-size-blockquote:             1.77778rem;
  --line-height-blockquote:           2.22222rem;
  --letter-spacing-blockquote:        -0.00889rem;
  --font-size-anfuehrungszeichen:     6.66667rem;
  --line-height-anfuehrungszeichen:   4.88889rem;
  --font-size-anfuehrungszeichen-vorne: 8.88889rem;
  --line-height-anfuehrungszeichen-vorne: 6.5rem;
  --font-size-caption:                0.77778rem;
  --line-height-caption:              1.11111rem;
  --letter-spacing-caption:           0;
  --font-size-label:                  0.77778rem;
  --line-height-label:                1.11111rem;
  --letter-spacing-label:             0.03889rem;
  --font-size-button:                 0.88889rem;
  --line-height-button:               1.11111rem;
  --letter-spacing-button:            0.01778rem;
  --font-size-nav:                    1.11111rem;
  --line-height-nav:                  1.33333rem;
  --letter-spacing-nav:               0;
  --font-size-nav-kompakt:            1rem;
  --line-height-nav-kompakt:          1.22222rem;
  --letter-spacing-nav-kompakt:       0;
  --font-size-ansprechperson:         0.77778rem;
  --line-height-ansprechperson:       1.11111rem;
  --letter-spacing-ansprechperson:    0.01556rem;
  --font-size-kontakt-info:           0.88889rem;
  --line-height-kontakt-info:         1.11111rem;
  --letter-spacing-kontakt-info:      0;
  --font-size-body-bold:              1rem;
  --line-height-body-bold:            1.55556rem;
  --letter-spacing-body-bold:         0;
  --font-size-formular:               0.88889rem;
  --line-height-formular:             1.33333rem;
  --letter-spacing-formular:          0;
  --font-size-formular-label:         0.88889rem;
  --line-height-formular-label:       1.11111rem;
  --letter-spacing-formular-label:    0;
  --font-size-fussnote:               0.77778rem;
  --line-height-fussnote:             1.11111rem;
  --letter-spacing-fussnote:          0;
  --font-size-footer-headline:        1rem;
  --line-height-footer-headline:      1.55556rem;
  --letter-spacing-footer-headline:   0;
  --font-size-footer-text:            0.88889rem;
  --line-height-footer-text:          1.33333rem;
  --letter-spacing-footer-text:       0;
  --font-size-direktlink:             0.88889rem;
  --line-height-direktlink:           1.11111rem;
  --letter-spacing-direktlink:        0.01778rem;
  --font-size-kalender-tag:           0.88889rem;
  --line-height-kalender-tag:         1.11111rem;
  --letter-spacing-kalender-tag:      0;
  --font-size-kalender-tag-aktiv:     0.88889rem;
  --line-height-kalender-tag-aktiv:   1.11111rem;
  --letter-spacing-kalender-tag-aktiv: 0;
  --font-size-event-meta:             0.88889rem;
  --line-height-event-meta:           1.33333rem;
  --letter-spacing-event-meta:        0;

  --layout-frame: 1440px;
  --layout-container: 1280px;
  --layout-direktlink-abstand: 16px;
  --layout-zitat-zeichenabstand: 32px;
  --layout-zitat-textbreite: 800px;
  --layout-zitat-zeichenhoehe: 37px;
  --layout-zitat-zeichenhuelle-anfang: 110px;
  --layout-zitat-zeichenhuelle-ende: 42px;
  --layout-zitat-zeichenhoehe-vorne: 49px;
  --layout-zitat-zeichenhuelle-vorne: 146px;
  --layout-zitat-textbreite-vorne: 800px;
  --layout-zitat-textbreite-vorne-bild: 669px;
  --layout-bild-mindesthoehe: 0px;
  --layout-formular-breite: 845px;
  --layout-text-breite: 845px;
  --layout-accordion-breite: 954px;
  --layout-lead-einrueckung: 108.6667px;
  --layout-mum-filter: 411px;
  --layout-mum-bild: 322px;
  --layout-mum-detail-bild: 480px;
  --layout-margin: 80px;
  --layout-gutter: 24px;
  --layout-section-abstand: 80px;
  --layout-block-abstand: 40px;
  --layout-teil-abstand: 48px;
  --layout-h3-abstand: 24px;

  --layout-karte-min-2sp: 420px;
  --layout-karte-min-3sp: 310px;
  --layout-karte-min-4sp: 250px;

  --layout-karte-max-3sp: 410.67px;
  --layout-karte-max-2sp: 628px;
  --layout-karte-max-4sp: 302px;

  --layout-kontakt-karte-min: var(--layout-karte-min-3sp);
  --layout-kontakt-karte-max: var(--layout-karte-max-3sp);

  --layout-header-mindesthoehe: 540px;
  --layout-header-textspalte: 576px;
  --layout-header-innenabstand: 48px;
  --layout-header-hoehe-2-3: 576px;
  --layout-header-hoehe-1-1: 480px;
  --layout-slider-hoehe:     554px;
  --layout-slider-bildhoehe:     554px;
  --layout-cta-textspalte:   860px;
  --layout-termin-textspalte-min: 420px;
  --layout-termin-karte-max:      360px;

  --layout-bildstreifen-bild-breite: 291.69px;
  --layout-bildstreifen-bild-hoehe: 194.46px;
  --layout-bildreihe-bild-breite: 302px;
  --layout-bildreihe-bild-hoehe: 201.33px;
  --layout-slider-innenabstand: 40px;
}

@media (max-width: 89.9375em) {
  :root {
    --font-size-display:                3.11111rem;
    --line-height-display:              3.44444rem;
    --letter-spacing-display:           -0.03111rem;
    --font-size-h1:                     2.66667rem;
    --line-height-h1:                   3.22222rem;
    --letter-spacing-h1:                -0.02667rem;
    --font-size-h2:                     2.22222rem;
    --line-height-h2:                   2.66667rem;
    --letter-spacing-h2:                -0.02222rem;
    --font-size-h3:                     1.77778rem;
    --line-height-h3:                   2.11111rem;
    --letter-spacing-h3:                -0.01778rem;
    --font-size-slider-text:            1.77778rem;
    --line-height-slider-text:          2.11111rem;
    --letter-spacing-slider-text:       -0.01778rem;
    --font-size-h4:                     1.55556rem;
    --line-height-h4:                   1.94444rem;
    --letter-spacing-h4:                -0.00778rem;
    --font-size-h5:                     1.38889rem;
    --line-height-h5:                   1.72222rem;
    --letter-spacing-h5:                -0.00722rem;
    --font-size-h6:                     1.16667rem;
    --line-height-h6:                   1.44444rem;
    --letter-spacing-h6:                -0.00611rem;
    --font-size-upperline:              0.88889rem;
    --line-height-upperline:            1.11111rem;
    --letter-spacing-upperline:         0.00167rem;
    --font-size-bereich:                1.27778rem;
    --line-height-bereich:              1.88889rem;
    --letter-spacing-bereich:           0.00167rem;
    --font-size-lead:                   1.16667rem;
    --line-height-lead:                 1.77778rem;
    --letter-spacing-lead:              0;
    --font-size-body:                   1rem;
    --line-height-body:                 1.55556rem;
    --letter-spacing-body:              0;
    --font-size-blockquote:             1.55556rem;
    --line-height-blockquote:           1.94444rem;
    --letter-spacing-blockquote:        -0.00778rem;
    --font-size-anfuehrungszeichen:     5.77778rem;
    --line-height-anfuehrungszeichen:   4.22222rem;
    --font-size-anfuehrungszeichen-vorne: 7.77778rem;
    --line-height-anfuehrungszeichen-vorne: 5.72222rem;
    --font-size-caption:                0.77778rem;
    --line-height-caption:              1.11111rem;
    --letter-spacing-caption:           0;
    --font-size-label:                  0.77778rem;
    --line-height-label:                1.11111rem;
    --letter-spacing-label:             0.03889rem;
    --font-size-button:                 0.88889rem;
    --line-height-button:               1.11111rem;
    --letter-spacing-button:            0.01778rem;
    --font-size-nav:                    1.05556rem;
    --line-height-nav:                  1.33333rem;
    --letter-spacing-nav:               0;
    --font-size-nav-kompakt:            1rem;
    --line-height-nav-kompakt:          1.22222rem;
    --letter-spacing-nav-kompakt:       0;
    --font-size-ansprechperson:         0.77778rem;
    --line-height-ansprechperson:       1.11111rem;
    --letter-spacing-ansprechperson:    0.01556rem;
    --font-size-kontakt-info:           0.88889rem;
    --line-height-kontakt-info:         1.11111rem;
    --letter-spacing-kontakt-info:      0;
    --font-size-body-bold:              1rem;
    --line-height-body-bold:            1.55556rem;
    --letter-spacing-body-bold:         0;
    --font-size-formular:               0.88889rem;
    --line-height-formular:             1.33333rem;
    --letter-spacing-formular:          0;
    --font-size-formular-label:         0.88889rem;
    --line-height-formular-label:       1.11111rem;
    --letter-spacing-formular-label:    0;
    --font-size-fussnote:               0.77778rem;
    --line-height-fussnote:             1.11111rem;
    --letter-spacing-fussnote:          0;
    --font-size-footer-headline:        1rem;
    --line-height-footer-headline:      1.55556rem;
    --letter-spacing-footer-headline:   0;
    --font-size-footer-text:            0.88889rem;
    --line-height-footer-text:          1.33333rem;
    --letter-spacing-footer-text:       0;
    --font-size-direktlink:             0.88889rem;
    --line-height-direktlink:           1.11111rem;
    --letter-spacing-direktlink:        0.01778rem;
    --font-size-kalender-tag:           0.88889rem;
    --line-height-kalender-tag:         1.11111rem;
    --letter-spacing-kalender-tag:      0;
    --font-size-kalender-tag-aktiv:     0.88889rem;
    --line-height-kalender-tag-aktiv:   1.11111rem;
    --letter-spacing-kalender-tag-aktiv: 0;
    --font-size-event-meta:             0.88889rem;
    --line-height-event-meta:           1.33333rem;
    --letter-spacing-event-meta:        0;

    --layout-frame: 1280px;
    --layout-container: 1152px;
    --layout-direktlink-abstand: 16px;
    --layout-zitat-zeichenabstand: 32px;
    --layout-zitat-textbreite: 700px;
    --layout-zitat-zeichenhoehe: 32px;
    --layout-zitat-zeichenhuelle-anfang: 94px;
    --layout-zitat-zeichenhuelle-ende: 36px;
    --layout-zitat-zeichenhoehe-vorne: 43px;
    --layout-zitat-zeichenhuelle-vorne: 128px;
    --layout-zitat-textbreite-vorne: 700px;
    --layout-zitat-textbreite-vorne-bild: 591px;
    --layout-bild-mindesthoehe: 0px;
    --layout-formular-breite: 760px;
    --layout-text-breite: 760px;
    --layout-accordion-breite: 858px;
    --layout-lead-einrueckung: 98px;
    --layout-mum-filter: 368px;
    --layout-mum-bild: 288px;
    --layout-mum-detail-bild: 432px;
    --layout-margin: 64px;
    --layout-gutter: 24px;
    --layout-section-abstand: 72px;
    --layout-block-abstand: 40px;
    --layout-teil-abstand: 48px;
    --layout-h3-abstand: 24px;

    --layout-karte-min-2sp: 420px;
    --layout-karte-min-3sp: 310px;
    --layout-karte-min-4sp: 250px;
    --layout-karte-max-3sp: 368px;
    --layout-karte-max-2sp: 564px;
    --layout-karte-max-4sp: 270px;
    --layout-kontakt-karte-min: var(--layout-karte-min-3sp);
    --layout-kontakt-karte-max: var(--layout-karte-max-3sp);

    --layout-header-mindesthoehe: 500px;
    --layout-header-textspalte: 512px;
    --layout-header-innenabstand: 40px;
    --layout-header-hoehe-2-3: 512px;
    --layout-header-hoehe-1-1: 427px;
    --layout-slider-hoehe:     492px;
    --layout-slider-bildhoehe:     492px;
    --layout-cta-textspalte:   772px;
    --layout-termin-textspalte-min: 420px;
    --layout-termin-karte-max:      360px;
    --layout-bildstreifen-bild-breite: 258.46px;
    --layout-bildstreifen-bild-hoehe: 172.31px;
    --layout-bildreihe-bild-breite: 270px;
    --layout-bildreihe-bild-hoehe: 180px;
    --layout-slider-innenabstand: 40px;
  }
}

@media (max-width: 79.9375em) {
  :root {
    --font-size-display:                2.77778rem;
    --line-height-display:              3.05556rem;
    --letter-spacing-display:           -0.02778rem;
    --font-size-h1:                     2.38889rem;
    --line-height-h1:                   2.88889rem;
    --letter-spacing-h1:                -0.02389rem;
    --font-size-h2:                     2rem;
    --line-height-h2:                   2.38889rem;
    --letter-spacing-h2:                -0.02rem;
    --font-size-h3:                     1.61111rem;
    --line-height-h3:                   1.94444rem;
    --letter-spacing-h3:                -0.01611rem;
    --font-size-slider-text:            1.61111rem;
    --line-height-slider-text:          1.94444rem;
    --letter-spacing-slider-text:       -0.01611rem;
    --font-size-h4:                     1.38889rem;
    --line-height-h4:                   1.72222rem;
    --letter-spacing-h4:                -0.00722rem;
    --font-size-h5:                     1.22222rem;
    --line-height-h5:                   1.55556rem;
    --letter-spacing-h5:                -0.00611rem;
    --font-size-h6:                     1.11111rem;
    --line-height-h6:                   1.38889rem;
    --letter-spacing-h6:                -0.00556rem;
    --font-size-upperline:              0.88889rem;
    --line-height-upperline:            1.11111rem;
    --letter-spacing-upperline:         0.00167rem;
    --font-size-bereich:                1.16667rem;
    --line-height-bereich:              1.77778rem;
    --letter-spacing-bereich:           0.00167rem;
    --font-size-lead:                   1.11111rem;
    --line-height-lead:                 1.66667rem;
    --letter-spacing-lead:              0;
    --font-size-body:                   1rem;
    --line-height-body:                 1.55556rem;
    --letter-spacing-body:              0;
    --font-size-blockquote:             1.38889rem;
    --line-height-blockquote:           1.72222rem;
    --letter-spacing-blockquote:        -0.00722rem;
    --font-size-anfuehrungszeichen:     5.33333rem;
    --line-height-anfuehrungszeichen:   3.88889rem;
    --font-size-anfuehrungszeichen-vorne: 7.11111rem;
    --line-height-anfuehrungszeichen-vorne: 5.22222rem;
    --font-size-caption:                0.77778rem;
    --line-height-caption:              1.11111rem;
    --letter-spacing-caption:           0;
    --font-size-label:                  0.77778rem;
    --line-height-label:                1.11111rem;
    --letter-spacing-label:             0.03889rem;
    --font-size-button:                 0.88889rem;
    --line-height-button:               1.11111rem;
    --letter-spacing-button:            0.01778rem;
    --font-size-nav:                    1rem;
    --line-height-nav:                  1.33333rem;
    --letter-spacing-nav:               0;
    --font-size-nav-kompakt:            1rem;
    --line-height-nav-kompakt:          1.22222rem;
    --letter-spacing-nav-kompakt:       0;
    --font-size-ansprechperson:         0.77778rem;
    --line-height-ansprechperson:       1.11111rem;
    --letter-spacing-ansprechperson:    0.01556rem;
    --font-size-kontakt-info:           0.88889rem;
    --line-height-kontakt-info:         1.11111rem;
    --letter-spacing-kontakt-info:      0;
    --font-size-body-bold:              1rem;
    --line-height-body-bold:            1.55556rem;
    --letter-spacing-body-bold:         0;
    --font-size-formular:               0.88889rem;
    --line-height-formular:             1.33333rem;
    --letter-spacing-formular:          0;
    --font-size-formular-label:         0.88889rem;
    --line-height-formular-label:       1.11111rem;
    --letter-spacing-formular-label:    0;
    --font-size-fussnote:               0.77778rem;
    --line-height-fussnote:             1.11111rem;
    --letter-spacing-fussnote:          0;
    --font-size-footer-headline:        1rem;
    --line-height-footer-headline:      1.55556rem;
    --letter-spacing-footer-headline:   0;
    --font-size-footer-text:            0.88889rem;
    --line-height-footer-text:          1.33333rem;
    --letter-spacing-footer-text:       0;
    --font-size-direktlink:             0.88889rem;
    --line-height-direktlink:           1.11111rem;
    --letter-spacing-direktlink:        0.01778rem;
    --font-size-kalender-tag:           0.88889rem;
    --line-height-kalender-tag:         1.11111rem;
    --letter-spacing-kalender-tag:      0;
    --font-size-kalender-tag-aktiv:     0.88889rem;
    --line-height-kalender-tag-aktiv:   1.11111rem;
    --letter-spacing-kalender-tag-aktiv: 0;
    --font-size-event-meta:             0.88889rem;
    --line-height-event-meta:           1.33333rem;
    --letter-spacing-event-meta:        0;

    --layout-frame: 1024px;
    --layout-container: 928px;
    --layout-direktlink-abstand: 12px;
    --layout-zitat-zeichenabstand: 32px;
    --layout-zitat-textbreite: 625px;
    --layout-zitat-zeichenhoehe: 29px;
    --layout-zitat-zeichenhuelle-anfang: 87px;
    --layout-zitat-zeichenhuelle-ende: 33px;
    --layout-zitat-zeichenhoehe-vorne: 39px;
    --layout-zitat-zeichenhuelle-vorne: 117px;
    --layout-zitat-textbreite-vorne: 625px;
    --layout-zitat-textbreite-vorne-bild: 457px;
    --layout-bild-mindesthoehe: 0px;
    --layout-formular-breite: 612px;
    --layout-text-breite: 612px;
    --layout-accordion-breite: 691px;
    --layout-lead-einrueckung: 79px;
    --layout-mum-filter: 296px;
    --layout-mum-bild: 232px;
    --layout-mum-detail-bild: 346px;
    --layout-margin: 48px;
    --layout-gutter: 20px;
    --layout-section-abstand: 64px;
    --layout-block-abstand: 32px;
    --layout-teil-abstand: 40px;
    --layout-h3-abstand: 16px;

    --layout-karte-min-2sp: 420px;
    --layout-karte-min-3sp: 280px;
    --layout-karte-min-4sp: 280px;
    --layout-karte-max-3sp: 296px;
    --layout-karte-max-2sp: 454px;
    --layout-karte-max-4sp: 296px;
    --layout-kontakt-karte-min: var(--layout-karte-min-2sp);
    --layout-kontakt-karte-max: var(--layout-karte-max-2sp);

    --layout-header-mindesthoehe: 440px;
    --layout-header-textspalte: 410px;
    --layout-header-innenabstand: 32px;
    --layout-header-hoehe-2-3: 409px;
    --layout-header-hoehe-1-1: 341px;
    --layout-slider-hoehe:     394px;
    --layout-slider-bildhoehe:     394px;
    --layout-cta-textspalte:   616px;
    --layout-termin-textspalte-min: 420px;
    --layout-termin-karte-max:      360px;
    --layout-bildstreifen-bild-breite: 206.77px;
    --layout-bildstreifen-bild-hoehe: 137.85px;
    --layout-bildreihe-bild-breite: 217px;
    --layout-bildreihe-bild-hoehe: 144.67px;
    --layout-slider-innenabstand: 32px;
  }
}

@media (max-width: 63.9375em) {
  :root {
    --font-size-display:                2.33333rem;
    --line-height-display:              2.55556rem;
    --letter-spacing-display:           -0.02333rem;
    --font-size-h1:                     2rem;
    --line-height-h1:                   2.38889rem;
    --letter-spacing-h1:                -0.02rem;
    --font-size-h2:                     1.66667rem;
    --line-height-h2:                   2rem;
    --letter-spacing-h2:                -0.01667rem;
    --font-size-h3:                     1.38889rem;
    --line-height-h3:                   1.66667rem;
    --letter-spacing-h3:                -0.01389rem;
    --font-size-slider-text:            1.38889rem;
    --line-height-slider-text:          1.66667rem;
    --letter-spacing-slider-text:       -0.01389rem;
    --font-size-h4:                     1.27778rem;
    --line-height-h4:                   1.61111rem;
    --letter-spacing-h4:                -0.00667rem;
    --font-size-h5:                     1.16667rem;
    --line-height-h5:                   1.44444rem;
    --letter-spacing-h5:                -0.00611rem;
    --font-size-h6:                     1.05556rem;
    --line-height-h6:                   1.33333rem;
    --letter-spacing-h6:                -0.00556rem;
    --font-size-upperline:              0.88889rem;
    --line-height-upperline:            1.11111rem;
    --letter-spacing-upperline:         0.00167rem;
    --font-size-bereich:                1.11111rem;
    --line-height-bereich:              1.66667rem;
    --letter-spacing-bereich:           0.00167rem;
    --font-size-lead:                   1.11111rem;
    --line-height-lead:                 1.66667rem;
    --letter-spacing-lead:              0;
    --font-size-body:                   0.88889rem;
    --line-height-body:                 1.55556rem;
    --letter-spacing-body:              0;
    --font-size-blockquote:             1.27778rem;
    --line-height-blockquote:           1.61111rem;
    --letter-spacing-blockquote:        -0.00667rem;
    --font-size-anfuehrungszeichen:     4.44444rem;
    --line-height-anfuehrungszeichen:   3.22222rem;
    --font-size-anfuehrungszeichen-vorne: 6rem;
    --line-height-anfuehrungszeichen-vorne: 4.38889rem;
    --font-size-caption:                0.77778rem;
    --line-height-caption:              1.11111rem;
    --letter-spacing-caption:           0;
    --font-size-label:                  0.77778rem;
    --line-height-label:                1.11111rem;
    --letter-spacing-label:             0.03889rem;
    --font-size-button:                 0.88889rem;
    --line-height-button:               1.11111rem;
    --letter-spacing-button:            0.01778rem;
    --font-size-nav:                    0.94444rem;
    --line-height-nav:                  1.33333rem;
    --letter-spacing-nav:               0;
    --font-size-nav-kompakt:            1rem;
    --line-height-nav-kompakt:          1.22222rem;
    --letter-spacing-nav-kompakt:       0;
    --font-size-ansprechperson:         0.77778rem;
    --line-height-ansprechperson:       1.11111rem;
    --letter-spacing-ansprechperson:    0.01556rem;
    --font-size-kontakt-info:           0.88889rem;
    --line-height-kontakt-info:         1.11111rem;
    --letter-spacing-kontakt-info:      0;
    --font-size-body-bold:              0.88889rem;
    --line-height-body-bold:            1.55556rem;
    --letter-spacing-body-bold:         0;
    --font-size-formular:               0.88889rem;
    --line-height-formular:             1.33333rem;
    --letter-spacing-formular:          0;
    --font-size-formular-label:         0.88889rem;
    --line-height-formular-label:       1.11111rem;
    --letter-spacing-formular-label:    0;
    --font-size-fussnote:               0.77778rem;
    --line-height-fussnote:             1.11111rem;
    --letter-spacing-fussnote:          0;
    --font-size-footer-headline:        1rem;
    --line-height-footer-headline:      1.55556rem;
    --letter-spacing-footer-headline:   0;
    --font-size-footer-text:            0.88889rem;
    --line-height-footer-text:          1.33333rem;
    --letter-spacing-footer-text:       0;
    --font-size-direktlink:             0.88889rem;
    --line-height-direktlink:           1.11111rem;
    --letter-spacing-direktlink:        0.01778rem;
    --font-size-kalender-tag:           0.88889rem;
    --line-height-kalender-tag:         1.11111rem;
    --letter-spacing-kalender-tag:      0;
    --font-size-kalender-tag-aktiv:     0.88889rem;
    --line-height-kalender-tag-aktiv:   1.11111rem;
    --letter-spacing-kalender-tag-aktiv: 0;
    --font-size-event-meta:             0.88889rem;
    --line-height-event-meta:           1.33333rem;
    --letter-spacing-event-meta:        0;

    --layout-frame: 768px;
    --layout-container: 704px;
    --layout-direktlink-abstand: 12px;
    --layout-zitat-zeichenabstand: 32px;
    --layout-zitat-textbreite: 496px;
    --layout-zitat-zeichenhoehe: 24px;
    --layout-zitat-zeichenhuelle-anfang: 72px;
    --layout-zitat-zeichenhuelle-ende: 27px;
    --layout-zitat-zeichenhoehe-vorne: 33px;
    --layout-zitat-zeichenhuelle-vorne: 98px;
    --layout-zitat-textbreite-vorne: 555px;
    --layout-zitat-textbreite-vorne-bild: 555px;
    --layout-bild-mindesthoehe: 469px;
    --layout-formular-breite: 704px;
    --layout-text-breite: 704px;
    --layout-accordion-breite: 704px;
    --layout-lead-einrueckung: 0px;
    --layout-mum-filter: 704px;
    --layout-mum-bild: 269px;
    --layout-mum-detail-bild: 704px;
    --layout-margin: 32px;
    --layout-gutter: 20px;
    --layout-section-abstand: 56px;
    --layout-block-abstand: 32px;
    --layout-teil-abstand: 40px;
    --layout-h3-abstand: 16px;

    --layout-karte-min-2sp: 342px;
    --layout-karte-min-3sp: 342px;
    --layout-karte-min-4sp: 342px;
    --layout-karte-max-3sp: 342px;
    --layout-karte-max-2sp: 342px;
    --layout-karte-max-4sp: 342px;
    --layout-kontakt-karte-min: var(--layout-karte-min-2sp);
    --layout-kontakt-karte-max: var(--layout-karte-max-2sp);

    --layout-header-mindesthoehe: 380px;
    --layout-header-textspalte: 307px;
    --layout-header-innenabstand: 24px;
    --layout-header-hoehe-2-3: 307px;
    --layout-header-hoehe-1-1: 256px;
    --layout-slider-hoehe:     295px;
    --layout-slider-bildhoehe:     295px;
    --layout-cta-textspalte:   704px;
    --layout-termin-textspalte-min: 420px;
    --layout-termin-karte-max:      704px;
    --layout-bildstreifen-bild-breite: 202.8px;
    --layout-bildstreifen-bild-hoehe: 135.2px;
    --layout-bildreihe-bild-breite: 161px;
    --layout-bildreihe-bild-hoehe: 107.33px;
    --layout-slider-innenabstand: 24px;
  }
}

@media (max-width: 47.9375em) {
  :root {
    --font-size-display:                2rem;
    --line-height-display:              2.22222rem;
    --letter-spacing-display:           -0.02rem;
    --font-size-h1:                     1.77778rem;
    --line-height-h1:                   2.11111rem;
    --letter-spacing-h1:                -0.01778rem;
    --font-size-h2:                     1.5rem;
    --line-height-h2:                   1.77778rem;
    --letter-spacing-h2:                -0.015rem;
    --font-size-h3:                     1.27778rem;
    --line-height-h3:                   1.55556rem;
    --letter-spacing-h3:                -0.01278rem;
    --font-size-slider-text:            1.27778rem;
    --line-height-slider-text:          1.55556rem;
    --letter-spacing-slider-text:       -0.01278rem;
    --font-size-h4:                     1.11111rem;
    --line-height-h4:                   1.38889rem;
    --letter-spacing-h4:                -0.00556rem;
    --font-size-h5:                     1.05556rem;
    --line-height-h5:                   1.33333rem;
    --letter-spacing-h5:                -0.00556rem;
    --font-size-h6:                     1rem;
    --line-height-h6:                   1.27778rem;
    --letter-spacing-h6:                0;
    --font-size-upperline:              0.88889rem;
    --line-height-upperline:            1.11111rem;
    --letter-spacing-upperline:         0.00167rem;
    --font-size-bereich:                1.05556rem;
    --line-height-bereich:              1.55556rem;
    --letter-spacing-bereich:           0.00167rem;
    --font-size-lead:                   1rem;
    --line-height-lead:                 1.5rem;
    --letter-spacing-lead:              0;
    --font-size-body:                   0.88889rem;
    --line-height-body:                 1.55556rem;
    --letter-spacing-body:              0;
    --font-size-blockquote:             1.11111rem;
    --line-height-blockquote:           1.38889rem;
    --letter-spacing-blockquote:        -0.00556rem;
    --font-size-anfuehrungszeichen:     3.55556rem;
    --line-height-anfuehrungszeichen:   2.55556rem;
    --font-size-anfuehrungszeichen-vorne: 4.66667rem;
    --line-height-anfuehrungszeichen-vorne: 3.44444rem;
    --font-size-caption:                0.77778rem;
    --line-height-caption:              1.11111rem;
    --letter-spacing-caption:           0;
    --font-size-label:                  0.77778rem;
    --line-height-label:                1.11111rem;
    --letter-spacing-label:             0.03889rem;
    --font-size-button:                 0.88889rem;
    --line-height-button:               1.11111rem;
    --letter-spacing-button:            0.01778rem;
    --font-size-nav:                    0.88889rem;
    --line-height-nav:                  1.33333rem;
    --letter-spacing-nav:               0;
    --font-size-nav-kompakt:            1rem;
    --line-height-nav-kompakt:          1.22222rem;
    --letter-spacing-nav-kompakt:       0;
    --font-size-ansprechperson:         0.77778rem;
    --line-height-ansprechperson:       1.11111rem;
    --letter-spacing-ansprechperson:    0.01556rem;
    --font-size-kontakt-info:           0.88889rem;
    --line-height-kontakt-info:         1.11111rem;
    --letter-spacing-kontakt-info:      0;
    --font-size-body-bold:              0.88889rem;
    --line-height-body-bold:            1.55556rem;
    --letter-spacing-body-bold:         0;
    --font-size-formular:               0.88889rem;
    --line-height-formular:             1.33333rem;
    --letter-spacing-formular:          0;
    --font-size-formular-label:         0.88889rem;
    --line-height-formular-label:       1.11111rem;
    --letter-spacing-formular-label:    0;
    --font-size-fussnote:               0.77778rem;
    --line-height-fussnote:             1.11111rem;
    --letter-spacing-fussnote:          0;
    --font-size-footer-headline:        1rem;
    --line-height-footer-headline:      1.55556rem;
    --letter-spacing-footer-headline:   0;
    --font-size-footer-text:            0.88889rem;
    --line-height-footer-text:          1.33333rem;
    --letter-spacing-footer-text:       0;
    --font-size-direktlink:             0.88889rem;
    --line-height-direktlink:           1.11111rem;
    --letter-spacing-direktlink:        0.01778rem;
    --font-size-kalender-tag:           0.88889rem;
    --line-height-kalender-tag:         1.11111rem;
    --letter-spacing-kalender-tag:      0;
    --font-size-kalender-tag-aktiv:     0.88889rem;
    --line-height-kalender-tag-aktiv:   1.11111rem;
    --letter-spacing-kalender-tag-aktiv: 0;
    --font-size-event-meta:             0.88889rem;
    --line-height-event-meta:           1.33333rem;
    --letter-spacing-event-meta:        0;

    --layout-frame: 390px;
    --layout-container: 358px;
    --layout-direktlink-abstand: 8px;
    --layout-zitat-zeichenabstand: 16px;
    --layout-zitat-textbreite: 214px;
    --layout-zitat-zeichenhoehe: 20px;
    --layout-zitat-zeichenhuelle-anfang: 58px;
    --layout-zitat-zeichenhuelle-ende: 22px;
    --layout-zitat-zeichenhoehe-vorne: 26px;
    --layout-zitat-zeichenhuelle-vorne: 77px;
    --layout-zitat-textbreite-vorne: 252px;
    --layout-zitat-textbreite-vorne-bild: 252px;
    --layout-bild-mindesthoehe: 239px;
    --layout-formular-breite: 358px;
    --layout-text-breite: 358px;
    --layout-accordion-breite: 358px;
    --layout-lead-einrueckung: 0px;
    --layout-mum-filter: 358px;
    --layout-mum-bild: 358px;
    --layout-mum-detail-bild: 358px;
    --layout-margin: 16px;
    --layout-gutter: 16px;
    --layout-section-abstand: 48px;
    --layout-block-abstand: 24px;
    --layout-teil-abstand: 32px;
    --layout-h3-abstand: 8px;

    --layout-karte-min-2sp: 280px;
    --layout-karte-min-3sp: 280px;
    --layout-karte-min-4sp: 280px;
    --layout-karte-max-3sp: 358px;
    --layout-karte-max-2sp: 358px;
    --layout-karte-max-4sp: 358px;
    --layout-kontakt-karte-min: var(--layout-karte-min-3sp);
    --layout-kontakt-karte-max: var(--layout-karte-max-3sp);

    --layout-header-mindesthoehe: 320px;
    --layout-header-textspalte: 390px;
    --layout-header-innenabstand: 16px;
    --layout-header-hoehe-2-3: 307px;
    --layout-header-hoehe-1-1: 256px;
    --layout-slider-hoehe:     260px;
    --layout-slider-bildhoehe:     150px;
    --layout-cta-textspalte:   358px;
    --layout-termin-textspalte-min: 280px;
    --layout-termin-karte-max:      358px;
    --layout-bildstreifen-bild-breite: 146.57px;
    --layout-bildstreifen-bild-hoehe: 97.71px;
    --layout-bildreihe-bild-breite: 146.57px;
    --layout-bildreihe-bild-hoehe: 97.71px;
    --layout-slider-innenabstand: 16px;
  }
}

@media (max-width: 24.3125em) {
  :root {
    --font-size-display:                1.77778rem;
    --line-height-display:              1.94444rem;
    --letter-spacing-display:           -0.01778rem;
    --font-size-h1:                     1.61111rem;
    --line-height-h1:                   1.94444rem;
    --letter-spacing-h1:                -0.01611rem;
    --font-size-h2:                     1.38889rem;
    --line-height-h2:                   1.66667rem;
    --letter-spacing-h2:                -0.01389rem;
    --font-size-h3:                     1.16667rem;
    --line-height-h3:                   1.38889rem;
    --letter-spacing-h3:                -0.01167rem;
    --font-size-slider-text:            1.16667rem;
    --line-height-slider-text:          1.38889rem;
    --letter-spacing-slider-text:       -0.01167rem;
    --font-size-h4:                     1.05556rem;
    --line-height-h4:                   1.33333rem;
    --letter-spacing-h4:                -0.00556rem;
    --font-size-h5:                     1rem;
    --line-height-h5:                   1.27778rem;
    --letter-spacing-h5:                0;
    --font-size-h6:                     1rem;
    --line-height-h6:                   1.27778rem;
    --letter-spacing-h6:                0;
    --font-size-upperline:              0.88889rem;
    --line-height-upperline:            1.11111rem;
    --letter-spacing-upperline:         0.00167rem;
    --font-size-bereich:                1rem;
    --line-height-bereich:              1.5rem;
    --letter-spacing-bereich:           0.00167rem;
    --font-size-lead:                   1rem;
    --line-height-lead:                 1.5rem;
    --letter-spacing-lead:              0;
    --font-size-body:                   0.88889rem;
    --line-height-body:                 1.55556rem;
    --letter-spacing-body:              0;
    --font-size-blockquote:             1.05556rem;
    --line-height-blockquote:           1.33333rem;
    --letter-spacing-blockquote:        -0.00556rem;
    --font-size-anfuehrungszeichen:     3.11111rem;
    --line-height-anfuehrungszeichen:   2.22222rem;
    --font-size-anfuehrungszeichen-vorne: 4.22222rem;
    --line-height-anfuehrungszeichen-vorne: 3.11111rem;
    --font-size-caption:                0.77778rem;
    --line-height-caption:              1.11111rem;
    --letter-spacing-caption:           0;
    --font-size-label:                  0.77778rem;
    --line-height-label:                1.11111rem;
    --letter-spacing-label:             0.03889rem;
    --font-size-button:                 0.88889rem;
    --line-height-button:               1.11111rem;
    --letter-spacing-button:            0.01778rem;
    --font-size-nav:                    0.88889rem;
    --line-height-nav:                  1.33333rem;
    --letter-spacing-nav:               0;
    --font-size-nav-kompakt:            1rem;
    --line-height-nav-kompakt:          1.22222rem;
    --letter-spacing-nav-kompakt:       0;
    --font-size-ansprechperson:         0.77778rem;
    --line-height-ansprechperson:       1.11111rem;
    --letter-spacing-ansprechperson:    0.01556rem;
    --font-size-kontakt-info:           0.88889rem;
    --line-height-kontakt-info:         1.11111rem;
    --letter-spacing-kontakt-info:      0;
    --font-size-body-bold:              0.88889rem;
    --line-height-body-bold:            1.55556rem;
    --letter-spacing-body-bold:         0;
    --font-size-formular:               0.88889rem;
    --line-height-formular:             1.33333rem;
    --letter-spacing-formular:          0;
    --font-size-formular-label:         0.88889rem;
    --line-height-formular-label:       1.11111rem;
    --letter-spacing-formular-label:    0;
    --font-size-fussnote:               0.77778rem;
    --line-height-fussnote:             1.11111rem;
    --letter-spacing-fussnote:          0;
    --font-size-footer-headline:        1rem;
    --line-height-footer-headline:      1.55556rem;
    --letter-spacing-footer-headline:   0;
    --font-size-footer-text:            0.88889rem;
    --line-height-footer-text:          1.33333rem;
    --letter-spacing-footer-text:       0;
    --font-size-direktlink:             0.88889rem;
    --line-height-direktlink:           1.11111rem;
    --letter-spacing-direktlink:        0.01778rem;
    --font-size-kalender-tag:           0.88889rem;
    --line-height-kalender-tag:         1.11111rem;
    --letter-spacing-kalender-tag:      0;
    --font-size-kalender-tag-aktiv:     0.88889rem;
    --line-height-kalender-tag-aktiv:   1.11111rem;
    --letter-spacing-kalender-tag-aktiv: 0;
    --font-size-event-meta:             0.88889rem;
    --line-height-event-meta:           1.33333rem;
    --letter-spacing-event-meta:        0;

    --layout-frame: 320px;
    --layout-container: 296px;
    --layout-direktlink-abstand: 8px;
    --layout-zitat-zeichenabstand: 16px;
    --layout-zitat-textbreite: 160px;
    --layout-zitat-zeichenhoehe: 17px;
    --layout-zitat-zeichenhuelle-anfang: 51px;
    --layout-zitat-zeichenhuelle-ende: 19px;
    --layout-zitat-zeichenhoehe-vorne: 23px;
    --layout-zitat-zeichenhuelle-vorne: 69px;
    --layout-zitat-textbreite-vorne: 194px;
    --layout-zitat-textbreite-vorne-bild: 194px;
    --layout-bild-mindesthoehe: 197px;
    --layout-formular-breite: 296px;
    --layout-text-breite: 296px;
    --layout-accordion-breite: 296px;
    --layout-lead-einrueckung: 0px;
    --layout-mum-filter: 296px;
    --layout-mum-bild: 296px;
    --layout-mum-detail-bild: 296px;
    --layout-margin: 12px;
    --layout-gutter: 12px;
    --layout-section-abstand: 40px;
    --layout-block-abstand: 24px;
    --layout-teil-abstand: 32px;
    --layout-h3-abstand: 8px;

    --layout-karte-min-2sp: 280px;
    --layout-karte-min-3sp: 280px;
    --layout-karte-min-4sp: 280px;
    --layout-karte-max-3sp: 296px;
    --layout-karte-max-2sp: 296px;
    --layout-karte-max-4sp: 296px;
    --layout-kontakt-karte-min: var(--layout-karte-min-3sp);
    --layout-kontakt-karte-max: var(--layout-karte-max-3sp);

    --layout-header-mindesthoehe: 280px;
    --layout-header-textspalte: 320px;
    --layout-header-innenabstand: 12px;
    --layout-header-hoehe-2-3: 307px;
    --layout-header-hoehe-1-1: 256px;
    --layout-slider-hoehe:     213px;
    --layout-slider-bildhoehe:     123px;
    --layout-cta-textspalte:   296px;
    --layout-termin-textspalte-min: 280px;
    --layout-termin-karte-max:      296px;
    --layout-bildstreifen-bild-breite: 121.71px;
    --layout-bildstreifen-bild-hoehe: 81.14px;
    --layout-bildreihe-bild-breite: 121.71px;
    --layout-bildreihe-bild-hoehe: 81.14px;
    --layout-slider-innenabstand: 12px;
  }
}

/* 2. FARBEN – PRIMITIVES */

:root {

  --car-caritas-rot-100: #CC1E1C;
  --car-caritas-rot-90: #d13533;
  --car-caritas-rot-80: #d64b49;
  --car-caritas-rot-70: #db6260;
  --car-caritas-rot-60: #e07877;
  --car-caritas-rot-50: #e58e8d;
  --car-caritas-rot-40: #eba5a4;
  --car-caritas-rot-30: #f0bbbb;
  --car-caritas-rot-20: #f5d2d2;
  --car-caritas-rot-10: #fae8e8;
  --car-caritas-rot-5: #fcf4f4;

  --car-bordeaux-100: #8d152e;
  --car-bordeaux-90:  #982c43;
  --car-bordeaux-80:  #a44458;
  --car-bordeaux-70:  #af5b6d;
  --car-bordeaux-60:  #bb7382;
  --car-bordeaux-50:  #c68a96;
  --car-bordeaux-40:  #d1a1ab;
  --car-bordeaux-30:  #ddb9c0;
  --car-bordeaux-20:  #e8d0d5;
  --car-bordeaux-10:  #f4e8ea;
  --car-bordeaux-5:   #f9f3f5;

  --car-honig-100:    #f9b34e;
  --car-honig-90:     #fabb60;
  --car-honig-80:     #fac271;
  --car-honig-70:     #fbca83;
  --car-honig-60:     #fbd195;
  --car-honig-50:     #fcd9a6;
  --car-honig-40:     #fde1b8;
  --car-honig-30:     #fde8ca;
  --car-honig-20:     #fef0dc;
  --car-honig-10:     #fef7ed;
  --car-honig-5:      #fffbf6;

  --car-rose-100:     #f9c5b8;
  --car-rose-90:      #facbbf;
  --car-rose-80:      #fad1c6;
  --car-rose-70:      #fbd6cd;
  --car-rose-60:      #fbdcd4;
  --car-rose-50:      #fce2db;
  --car-rose-40:      #fde8e3;
  --car-rose-30:      #fdeeea;
  --car-rose-20:      #fef3f1;
  --car-rose-10:      #fef9f8;
  --car-rose-5:       #fffcfb;

  --car-enzian-100:   #1f397a;
  --car-enzian-90:    #354d87;
  --car-enzian-80:    #4c6195;
  --car-enzian-70:    #6274a2;
  --car-enzian-60:    #7988af;
  --car-enzian-50:    #8f9cbc;
  --car-enzian-40:    #a5b0ca;
  --car-enzian-30:    #bcc4d7;
  --car-enzian-20:    #d2d7e4;
  --car-enzian-10:    #e9ebf2;
  --car-enzian-5:     #f4f5f8;

  --car-himmel-100:   #94c7ed;
  --car-himmel-90:    #9fcdef;
  --car-himmel-80:    #a9d2f1;
  --car-himmel-70:    #b4d8f2;
  --car-himmel-60:    #bfddf4;
  --car-himmel-50:    #c9e3f6;
  --car-himmel-40:    #d4e9f8;
  --car-himmel-30:    #dfeefa;
  --car-himmel-20:    #eaf4fb;
  --car-himmel-10:    #f4f9fd;
  --car-himmel-5:     #fafcfe;

  --car-pflaume-100:  #670d5f;
  --car-pflaume-90:   #76256f;
  --car-pflaume-80:   #853d7f;
  --car-pflaume-70:   #95568f;
  --car-pflaume-60:   #a46e9f;
  --car-pflaume-50:   #b386af;
  --car-pflaume-40:   #c29ebf;
  --car-pflaume-30:   #d1b6cf;
  --car-pflaume-20:   #e1cfdf;
  --car-pflaume-10:   #f0e7ef;
  --car-pflaume-5:    #f7f3f7;

  --car-flieder-100:  #c7bcde;
  --car-flieder-90:   #cdc3e1;
  --car-flieder-80:   #d2c9e5;
  --car-flieder-70:   #d8d0e8;
  --car-flieder-60:   #ddd7eb;
  --car-flieder-50:   #e3ddee;
  --car-flieder-40:   #e9e4f2;
  --car-flieder-30:   #eeebf5;
  --car-flieder-20:   #f4f2f8;
  --car-flieder-10:   #f9f8fc;
  --car-flieder-5:    #fcfcfd;

  --car-smaragd-100:  #00874d;
  --car-smaragd-90:   #1a935f;
  --car-smaragd-80:   #339f71;
  --car-smaragd-70:   #4dab82;
  --car-smaragd-60:   #66b794;
  --car-smaragd-50:   #80c3a6;
  --car-smaragd-40:   #99cfb8;
  --car-smaragd-30:   #b2dbca;
  --car-smaragd-20:   #cce7db;
  --car-smaragd-10:   #e5f3ed;
  --car-smaragd-5:    #f2f9f6;

  --car-mint-100:     #90ccb7;
  --car-mint-90:      #9bd1be;
  --car-mint-80:      #a6d6c5;
  --car-mint-70:      #b1dbcd;
  --car-mint-60:      #bce0d4;
  --car-mint-50:      #c7e5db;
  --car-mint-40:      #d3ebe2;
  --car-mint-30:      #def0e9;
  --car-mint-20:      #e9f5f1;
  --car-mint-10:      #f4faf8;
  --car-mint-5:       #f9fcfb;

  --car-fuchsia-100:  #b70e77;
  --car-fuchsia-90:   #be2685;
  --car-fuchsia-80:   #c53e92;
  --car-fuchsia-70:   #cd56a0;
  --car-fuchsia-60:   #d46ead;
  --car-fuchsia-50:   #db86bb;
  --car-fuchsia-40:   #e29fc9;
  --car-fuchsia-30:   #e9b7d6;
  --car-fuchsia-20:   #f1cfe4;
  --car-fuchsia-10:   #f8e7f1;
  --car-fuchsia-5:    #fbf3f8;

  --car-stein-100:    #cdc1bb;
  --car-stein-90:     #d2c7c2;
  --car-stein-80:     #d7cdc9;
  --car-stein-70:     #dcd4cf;
  --car-stein-60:     #e1dad6;
  --car-stein-50:     #e6e0dd;
  --car-stein-40:     #ebe6e4;
  --car-stein-30:     #f0eceb;
  --car-stein-20:     #f5f3f1;
  --car-stein-10:     #faf9f8;
  --car-stein-5:      #fcfcfc;

  --car-ozean-100:    #087d84;
  --car-ozean-90:     #218a90;
  --car-ozean-80:     #39979d;
  --car-ozean-70:     #52a4a9;
  --car-ozean-60:     #6bb1b5;
  --car-ozean-50:     #83bec1;
  --car-ozean-40:     #9ccbce;
  --car-ozean-30:     #b5d8da;
  --car-ozean-20:     #cee5e6;
  --car-ozean-10:     #e6f2f3;
  --car-ozean-5:      #f3f8f9;

  --car-schwarz-100:  #000000;
  --car-schwarz-90:   #191919;
  --car-schwarz-80:   #333333;
  --car-schwarz-70:   #4d4d4d;
  --car-schwarz-60:   #666666;
  --car-schwarz-50:   #808080;
  --car-schwarz-40:   #999999;
  --car-schwarz-30:   #b2b2b2;
  --car-schwarz-20:   #cccccc;
  --car-schwarz-10:   #e6e6e6;
  --car-schwarz-5:    #f2f2f2;

  --car-weiss:             #ffffff;

  --car-caritas-rot-hover:  #ad1a18;
  --car-caritas-rot-active: #8f1514;
  --car-bordeaux-hover:     #781227;
  --car-bordeaux-active:    #630f20;
  --car-honig-hover:        #d49842;
  --car-honig-active:       #ae7d37;
  --car-rose-hover:         #d4a79c;
  --car-rose-active:        #ae8a81;
  --car-enzian-hover:       #1a3068;
  --car-enzian-active:      #162855;
  --car-himmel-hover:       #7ea9c9;
  --car-himmel-active:      #688ba6;
  --car-smaragd-hover:      #007341;
  --car-smaragd-active:     #005f36;
  --car-mint-hover:         #7aad9c;
  --car-mint-active:        #658f80;
  --car-pflaume-hover:      #580b51;
  --car-pflaume-active:     #480943;
  --car-flieder-hover:      #a9a0bd;
  --car-flieder-active:     #8b849b;
  --car-fuchsia-hover:      #9c0c65;
  --car-fuchsia-active:     #800a53;
  --car-stein-hover:        #aea49f;
  --car-stein-active:       #8f8783;
  --car-ozean-hover:        #076a70;
  --car-ozean-active:       #06585c;

}

/* 2c. FARBEN – PRIMITIVES „LEGACY" (komplett altes CD) */

:root {

  --car-legacy-red-500:        #e80c0c;
  --car-legacy-red-600:        #c40a0a;
  --car-legacy-red-700:        #9e0808;

  --car-legacy-gelb-500:       #ffd301;
  --car-legacy-gelb-700:       #b59601;

  --car-legacy-blau-500:       #4794ba;
  --car-legacy-blau-700:       #326984;

  --car-legacy-gruen-500:      #b9d065;
  --car-legacy-gruen-700:      #839448;

  --car-legacy-orange-500:     #ff9b00;
  --car-legacy-orange-700:     #b56e00;

  --car-legacy-dunkelgrau-500: #333333;
  --car-legacy-mittelgrau-500: #666666;
  --car-legacy-hellgrau-50:    #f6f7f8;
  --car-legacy-hellgrau-100:   #e8eaed;

}

/* 3. FARBEN – SEMANTICS (umschaltbarer Farbskalen-Modus) */

:root,
html[data-farbskala="toenung"] {
  --color-brand:           var(--car-caritas-rot-100);
  --color-brand-secondary: var(--car-bordeaux-100);
  --color-brand-light:     var(--car-caritas-rot-20);

  --color-area-bup-primary:       var(--car-honig-100);
  --color-area-bup-secondary:     var(--car-rose-100);
  --color-area-bup-primary-light: var(--car-honig-20);

  --color-area-buh-primary:       var(--car-enzian-100);
  --color-area-buh-secondary:     var(--car-himmel-100);
  --color-area-buh-primary-light: var(--car-enzian-20);

  --color-area-kjf-primary:       var(--car-pflaume-100);
  --color-area-kjf-secondary:     var(--car-flieder-100);
  --color-area-kjf-primary-light: var(--car-pflaume-20);

  --color-area-mia-primary:       var(--car-smaragd-100);
  --color-area-mia-secondary:     var(--car-mint-100);
  --color-area-mia-primary-light: var(--car-smaragd-20);

  --color-accent:          var(--car-fuchsia-100);
  --color-neutral-stein:   var(--car-stein-100);
  --color-neutral-ozean:   var(--car-ozean-100);

  --color-text:            var(--car-schwarz-80);
  --color-text-muted:      var(--car-schwarz-60);
  --color-text-disabled:   var(--car-schwarz-30);
  --color-bg:              var(--car-schwarz-5);
  --color-bg-subtle:       var(--car-schwarz-10);

  --color-border:          var(--car-schwarz-20);
  --color-border-strong:   var(--car-schwarz-50);

  --font-family-base:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

html[data-farbskala="alt"] {
  --color-brand:           var(--car-legacy-red-500);
  --color-brand-secondary: var(--car-legacy-red-700);
  --color-brand-light:     var(--car-legacy-red-500);

  --color-area-bup-primary:       var(--car-legacy-gelb-500);
  --color-area-bup-secondary:     var(--car-legacy-gelb-700);
  --color-area-bup-primary-light: var(--car-legacy-gelb-500);

  --color-area-buh-primary:       var(--car-legacy-blau-500);
  --color-area-buh-secondary:     var(--car-legacy-blau-700);
  --color-area-buh-primary-light: var(--car-legacy-blau-500);

  --color-area-kjf-primary:       var(--car-legacy-orange-500);
  --color-area-kjf-secondary:     var(--car-legacy-orange-700);
  --color-area-kjf-primary-light: var(--car-legacy-orange-500);

  --color-area-mia-primary:       var(--car-legacy-gruen-500);
  --color-area-mia-secondary:     var(--car-legacy-gruen-700);
  --color-area-mia-primary-light: var(--car-legacy-gruen-500);

  --color-accent:          var(--car-legacy-red-500);
  --color-neutral-stein:   var(--car-legacy-hellgrau-100);
  --color-neutral-ozean:   var(--car-legacy-mittelgrau-500);

  --color-text:            var(--car-legacy-dunkelgrau-500);
  --color-text-muted:      var(--car-legacy-mittelgrau-500);
  --color-text-disabled:   var(--car-legacy-mittelgrau-500);
  --color-bg:              var(--car-legacy-hellgrau-50);
  --color-bg-subtle:       var(--car-legacy-hellgrau-100);
  --color-border:          var(--car-legacy-hellgrau-100);
  --color-border-strong:   var(--car-legacy-mittelgrau-500);

  --font-family-base:      'Helvetica Neue', Helvetica, Arial, sans-serif;
}

:root {
  --color-text-inverse:    #ffffff;

  --color-text-on-default: var(--car-weiss);
  --color-bg-card:         #ffffff;
  --color-bg-overlay:      rgba(0, 0, 0, 0.5);

  --color-heading:         var(--color-brand);

  --color-button-secondary-outline:        var(--car-bordeaux-100);
  --color-button-secondary-outline-hover:  var(--car-bordeaux-hover);
  --color-button-secondary-outline-active: var(--car-bordeaux-active);

  --color-bg-stein:        var(--car-stein-20);

  --color-border-nur-dunkel: transparent;

  --color-logo-caritasverband: #dc0812;
  --color-logo-ortsname:   #1d1d1b;

  --color-text-link:        var(--color-text);
  --color-text-link-hover:  var(--car-caritas-rot-100);
  --color-text-link-active: var(--car-caritas-rot-active);
  --link-underline-dicke:        1px;
  --link-underline-dicke-hover:  3px;
  --link-underline-abstand:      0.15em;
  --color-brand-hover:     color-mix(in srgb, var(--color-brand) 85%, black);
  --color-brand-active:    color-mix(in srgb, var(--color-brand) 70%, black);

  --focus-ring:            var(--car-bordeaux-100);
  --focus-ring-innen:      #ffffff;
  --color-border-focus:    var(--focus-ring);

  --color-success:         var(--car-ozean-100);
  --color-success-text:    var(--car-ozean-hover);
  --color-success-light:   color-mix(in srgb, var(--car-ozean-100) 10%, white);

  --color-warning:         var(--car-honig-100);
  --color-warning-text:    var(--car-schwarz-100);
  --color-warning-light:   color-mix(in srgb, var(--car-honig-100) 10%, white);

  --color-on-warning-light: var(--color-text);

  --color-error:           var(--car-fuchsia-100);
  --color-error-text:      var(--car-fuchsia-100);
  --color-error-light:     color-mix(in srgb, var(--car-fuchsia-100) 10%, white);

  --color-info:            var(--car-enzian-100);
  --color-info-light:      color-mix(in srgb, var(--car-enzian-100) 10%, white);
}

:where(p, li, dd, blockquote, figcaption, td, h6) a {
  color: var(--color-text-link);
  text-decoration: underline;
  text-decoration-thickness: var(--link-underline-dicke);
  text-underline-offset: var(--link-underline-abstand);
}
:where(p, li, dd, blockquote, figcaption, td, h6) a:hover {
  color: var(--color-text-link-hover);
  text-decoration-thickness: var(--link-underline-dicke-hover);
}
:where(p, li, dd, blockquote, figcaption, td, h6) a:active {
  color: var(--color-text-link-active);
}

:where([data-bereich]) :where(p, li, dd, blockquote, figcaption, td, h6) a,
:where([data-bereich]) :where(p, li, dd, blockquote, figcaption, td, h6) a:hover,
:where([data-bereich]) :where(p, li, dd, blockquote, figcaption, td, h6) a:active {
  color: inherit;
}
:where([data-bereich]) :where(p, li, dd, blockquote, figcaption, td, h6) a:hover {
  text-decoration-thickness: var(--link-underline-dicke-hover);
}

:where(h6) a,
:where(h6) a:hover,
:where(h6) a:active {
  color: inherit;
}

/* 3a. DUNKELMODUS „Schwarz/Weiß mit Rot 50" */

html[data-theme="dunkel"] {
  color-scheme: dark;
  --color-text:             var(--car-weiss);
  --color-text-muted:       var(--car-weiss);
  --color-text-on-default:  var(--car-schwarz-100);
  --color-bg:               var(--car-schwarz-100);
  --color-bg-subtle:        var(--car-schwarz-100);
  --color-bg-card:          var(--car-schwarz-100);
  --color-border:           var(--car-weiss);
  --color-border-strong:    var(--car-weiss);
  --color-heading:          var(--car-caritas-rot-50);
  --color-text-link-hover:  var(--car-caritas-rot-50);
  --color-text-link-active: var(--car-caritas-rot-50);

  --color-button-secondary-outline:        var(--car-bordeaux-50);
  --color-button-secondary-outline-hover:  var(--car-bordeaux-30);
  --color-button-secondary-outline-active: var(--car-bordeaux-30);
  --focus-ring:             var(--car-bordeaux-40);
  --focus-ring-innen:       var(--car-schwarz-100);
  --shadow-karte:           none;
  --shadow-karte-hover:     none;
  --shadow-klein:           none;
  --shadow-cta:             none;
  --color-text-disabled:    var(--car-schwarz-30);
  --color-bg-stein:         var(--car-schwarz-100);
  --color-border-nur-dunkel: var(--car-weiss);
  --color-logo-caritasverband: var(--car-weiss);
  --color-logo-ortsname:    var(--car-weiss);

  --color-success-text:     var(--car-ozean-50);
  --color-error-text:       var(--car-fuchsia-50);
  --color-warning-text:     var(--car-schwarz-100);
  --color-success-light:    var(--car-schwarz-100);
  --color-warning-light:    var(--car-schwarz-100);
  --color-error-light:      var(--car-schwarz-100);
  --color-on-warning-light: var(--car-honig-100);
}

html[data-theme="dunkel"],
html[data-theme="dunkel"] [data-bereich] {
  --color-area-primary-light:    var(--car-schwarz-100);
  --color-area-secondary-10:     var(--car-schwarz-100);
  --color-area-secondary-30:     var(--car-schwarz-100);
  --color-area-cta-feld:         var(--car-schwarz-100);
  --color-area-on-primary:       var(--car-weiss);
  --color-area-on-primary-light: var(--car-weiss);

  --color-area-on-cta-feld:      var(--car-weiss);

  --color-area-icon:             var(--car-weiss);

  --color-area-streifen:         var(--color-area-secondary);
}

html[data-theme="dunkel"],
html[data-theme="dunkel"] [data-bereich="verband"] {
  --color-area-streifen:         var(--car-caritas-rot-60);
}

html[data-theme="dunkel"] :where([data-bereich]) :where(p, li, dd, blockquote, figcaption, td, h6) a:hover,
html[data-theme="dunkel"] :where([data-bereich]) :where(p, li, dd, blockquote, figcaption, td, h6) a:active {
  color: var(--color-text-link-hover);
}

html[data-theme="dunkel"] .card--farbig .card__titel {
  color: var(--color-heading);
}
html[data-theme="dunkel"] .cta__textteil {
  background: var(--color-bg);
  color: var(--color-text);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="hell"]) {
    color-scheme: dark;
    --color-text:             var(--car-weiss);
    --color-text-muted:       var(--car-weiss);
    --color-text-on-default:  var(--car-schwarz-100);
    --color-bg:               var(--car-schwarz-100);
    --color-bg-subtle:        var(--car-schwarz-100);
    --color-bg-card:          var(--car-schwarz-100);
    --color-border:           var(--car-weiss);
    --color-border-strong:    var(--car-weiss);
    --color-heading:          var(--car-caritas-rot-50);
    --color-text-link-hover:  var(--car-caritas-rot-50);
    --color-text-link-active: var(--car-caritas-rot-50);
    --color-button-secondary-outline:        var(--car-bordeaux-50);
    --color-button-secondary-outline-hover:  var(--car-bordeaux-30);
    --color-button-secondary-outline-active: var(--car-bordeaux-30);
    --focus-ring:             var(--car-bordeaux-40);
    --focus-ring-innen:       var(--car-schwarz-100);
    --shadow-karte:           none;
    --shadow-karte-hover:     none;
    --shadow-klein:           none;
    --shadow-cta:             none;
    --color-text-disabled:    var(--car-schwarz-30);
    --color-bg-stein:         var(--car-schwarz-100);
    --color-border-nur-dunkel: var(--car-weiss);
    --color-logo-caritasverband: var(--car-weiss);
    --color-logo-ortsname:    var(--car-weiss);
    --color-success-text:     var(--car-ozean-50);
    --color-error-text:       var(--car-fuchsia-50);
    --color-warning-text:     var(--car-schwarz-100);
    --color-success-light:    var(--car-schwarz-100);
    --color-warning-light:    var(--car-schwarz-100);
    --color-error-light:      var(--car-schwarz-100);
    --color-on-warning-light: var(--car-honig-100);
  }
  html:not([data-theme="hell"]),
  html:not([data-theme="hell"]) [data-bereich] {
    --color-area-primary-light:    var(--car-schwarz-100);
    --color-area-secondary-10:     var(--car-schwarz-100);
    --color-area-secondary-30:     var(--car-schwarz-100);
    --color-area-cta-feld:         var(--car-schwarz-100);
    --color-area-on-primary:       var(--car-weiss);
    --color-area-on-primary-light: var(--car-weiss);
    --color-area-on-cta-feld:      var(--car-weiss);
    --color-area-icon:             var(--car-weiss);
    --color-area-streifen:         var(--color-area-secondary);
  }
  html:not([data-theme="hell"]),
  html:not([data-theme="hell"]) [data-bereich="verband"] {
    --color-area-streifen:         var(--car-caritas-rot-60);
  }
  html:not([data-theme="hell"]) :where([data-bereich]) :where(p, li, dd, blockquote, figcaption, td, h6) a:hover,
  html:not([data-theme="hell"]) :where([data-bereich]) :where(p, li, dd, blockquote, figcaption, td, h6) a:active {
    color: var(--color-text-link-hover);
  }
  html:not([data-theme="hell"]) .card--farbig .card__titel {
    color: var(--color-heading);
  }
  html:not([data-theme="hell"]) .cta__textteil {
    background: var(--color-bg);
    color: var(--color-text);
  }
}

/* 3b. BEREICHSFARBEN – umschaltbar per data-bereich */

:root,
[data-bereich="verband"] {
  --color-area-primary:            var(--car-caritas-rot-100);
  --color-area-primary-light:      var(--car-caritas-rot-20);
  --color-area-secondary:          var(--car-bordeaux-100);
  --color-area-secondary-30:       var(--car-bordeaux-30);
  --color-area-secondary-10:       var(--car-bordeaux-10);
  --color-area-cta-feld:           var(--car-bordeaux-100);
  --color-area-on-primary:         var(--car-weiss);
  --color-area-on-primary-light:   var(--car-schwarz-100);
  --color-area-on-secondary:       var(--car-weiss);
  --color-area-on-cta-feld:        var(--car-weiss);
  --color-area-icon:               var(--color-area-primary);
  --color-area-streifen:           var(--color-area-primary);
}

[data-bereich="bup"] {
  --color-area-primary:            var(--car-honig-100);
  --color-area-primary-light:      var(--car-honig-20);
  --color-area-secondary:          var(--car-rose-100);
  --color-area-secondary-30:       var(--car-rose-30);
  --color-area-secondary-10:       var(--car-rose-10);
  --color-area-cta-feld:           var(--car-honig-50);
  --color-area-on-primary:         var(--car-schwarz-100);
  --color-area-on-primary-light:   var(--car-schwarz-100);
  --color-area-on-secondary:       var(--car-schwarz-100);
  --color-area-on-cta-feld:        var(--car-schwarz-100);
  --color-area-icon:               var(--color-area-primary);
  --color-area-streifen:           var(--color-area-primary);
}

[data-bereich="buh"] {
  --color-area-primary:            var(--car-enzian-100);
  --color-area-primary-light:      var(--car-enzian-20);
  --color-area-secondary:          var(--car-himmel-100);
  --color-area-secondary-30:       var(--car-himmel-30);
  --color-area-secondary-10:       var(--car-himmel-10);
  --color-area-cta-feld:           var(--car-himmel-100);
  --color-area-on-primary:         var(--car-weiss);
  --color-area-on-primary-light:   var(--car-schwarz-100);
  --color-area-on-secondary:       var(--car-schwarz-100);
  --color-area-on-cta-feld:        var(--car-schwarz-100);
  --color-area-icon:               var(--color-area-primary);
  --color-area-streifen:           var(--color-area-primary);
}

[data-bereich="mia"] {
  --color-area-primary:            var(--car-smaragd-100);
  --color-area-primary-light:      var(--car-smaragd-20);
  --color-area-secondary:          var(--car-mint-100);
  --color-area-secondary-30:       var(--car-mint-30);
  --color-area-secondary-10:       var(--car-mint-10);
  --color-area-cta-feld:           var(--car-mint-100);
  --color-area-on-primary:         var(--car-weiss);
  --color-area-on-primary-light:   var(--car-schwarz-100);
  --color-area-on-secondary:       var(--car-schwarz-100);
  --color-area-on-cta-feld:        var(--car-schwarz-100);
  --color-area-icon:               var(--color-area-primary);
  --color-area-streifen:           var(--color-area-primary);
}

[data-bereich="kjf"] {
  --color-area-primary:            var(--car-pflaume-100);
  --color-area-primary-light:      var(--car-pflaume-20);
  --color-area-secondary:          var(--car-flieder-100);
  --color-area-secondary-30:       var(--car-flieder-30);
  --color-area-secondary-10:       var(--car-flieder-10);
  --color-area-cta-feld:           var(--car-flieder-100);
  --color-area-on-primary:         var(--car-weiss);
  --color-area-on-primary-light:   var(--car-schwarz-100);
  --color-area-on-secondary:       var(--car-schwarz-100);
  --color-area-on-cta-feld:        var(--car-schwarz-100);
  --color-area-icon:               var(--color-area-primary);
  --color-area-streifen:           var(--color-area-primary);
}

/* 4. GRID & LAYOUT */

:root {

  --breakpoint-desktop-xl: 1440px;
  --breakpoint-desktop-l:  1280px;
  --breakpoint-laptop:     1024px;
  --breakpoint-tablet:      768px;
  --breakpoint-mobile-l:    390px;
  --breakpoint-mobile-s:    320px;

  --container-max:         1440px;
  --container-xl:          1280px;
  --container-l:           1152px;
  --container-m:            928px;
  --container-s:            704px;
  --container-xs:           358px;
  --container-xxs:          296px;

  --grid-cols:             12;

  --gutter-xl:             24px;
  --gutter-m:              20px;
  --gutter-s:              16px;
  --gutter-xs:             12px;

  --margin-xl:             80px;
  --margin-l:              64px;
  --margin-m:              48px;
  --margin-s:              32px;
  --margin-xs:             16px;
  --margin-xxs:            12px;

  --logo-hoehe:               48px;

}

@media (max-width: 79.9375em) {
  :root {
    --logo-hoehe: 44px;
  }
}

/* 4b. SEITEN-HEADER */

/* 4c. TABELLEN */

:root {

  --tabelle-zelle-padding-y:   0.66667rem;
  --tabelle-zelle-padding-x:   0.88889rem;

  --tabelle-wertspalte:        7.77778rem;
  --tabelle-beschreibung-min: 11.11111rem;

  --tabelle-kopf-luft:         0.88889rem;

  --tabelle-abstand:           1.33333rem;

}

.tabelle-rahmen {
  overflow-x: auto;
  background: var(--color-bg-card);
  border-radius: var(--radius-xl);
}

.tabelle {
  border-collapse: collapse;
  width: 100%;
  min-width: calc(var(--tabelle-beschreibung-min) + 5 * var(--tabelle-wertspalte));
}

.tabelle th,
.tabelle td {
  padding: var(--tabelle-zelle-padding-y) var(--tabelle-zelle-padding-x);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;

  hyphens: auto;
}

.tabelle th:not(:first-child),
.tabelle td:not(:first-child) {
  width: var(--tabelle-wertspalte);
  text-align: right;
  white-space: nowrap;
}

.tabelle--text th:not(:first-child),
.tabelle--text td:not(:first-child) {
  text-align: left;
  white-space: normal;
}

.tabelle thead th {
  padding-top:    calc(var(--tabelle-zelle-padding-y) + var(--tabelle-kopf-luft));
  padding-bottom: calc(var(--tabelle-zelle-padding-y) + var(--tabelle-kopf-luft));
  border-bottom: 5px solid var(--color-area-streifen);
  font-weight: var(--font-weight-bold);
}

.tabelle tbody th {
  font-weight: var(--font-weight-bold);
  min-width: var(--tabelle-beschreibung-min);
  position: sticky;
  left: 0;
  background: inherit;
}

.tabelle tbody tr:nth-child(even) {
  background: var(--color-bg);
}

.tabelle caption {
  text-align: left;
  margin-bottom: var(--tabelle-abstand);
}

.tabelle-hinweis,
.tabelle-fussnote {
  font-size: var(--font-size-fussnote);
  line-height: var(--line-height-fussnote);
  margin-top: var(--tabelle-abstand);
}

.tabelle-rahmen > .tabelle {
  margin: 0;
}

/* 5. ABSTÄNDE (Spacing Scale · 8px-Raster) */

:root {

  --space-1:               0.25rem;
  --space-2:               0.5rem;
  --space-3:               0.75rem;
  --space-4:               1rem;
  --space-5:               1.25rem;
  --space-6:               1.5rem;
  --space-8:               2rem;
  --space-10:              2.5rem;
  --space-12:              3rem;
  --space-16:              4rem;
  --space-20:              5rem;
  --space-24:              6rem;

}

/* 6. SCHATTEN */

:root {

  --shadow-karte:       0 10px 30px rgba(0, 0, 0, 0.10);

  --shadow-karte-hover: 0 14px 40px rgba(0, 0, 0, 0.16);

  --shadow-klein:       0 4px 15px rgba(0, 0, 0, 0.08);

  --shadow-cta:         0 4px 16px -4px rgba(0, 0, 0, 0.25);

}

/* 7. ECKEN & RAHMENRADIEN (Border Radius) */

:root {

  --radius-none:           0;
  --radius-xs:             2px;
  --radius-s:              4px;
  --radius-m:              8px;
  --radius-l:              12px;
  --radius-xl:             16px;
  --radius-full:           9999px;

}

/* 8. ANIMATIONEN & ÜBERGÄNGE */

:root {

  --duration-fast:         100ms;
  --duration-normal:       200ms;
  --duration-slow:         350ms;
  --duration-stagger:      80ms;

  --easing-default:        ease-in-out;
  --easing-enter:          ease-out;
  --easing-exit:           ease-in;

}

/* 9. Z-INDEX (Ebenen-Hierarchie) */

:root {

  --z-below:               -1;
  --z-base:                 0;
  --z-raised:              10;
  --z-dropdown:           100;
  --z-sticky:             200;
  --z-overlay:            300;
  --z-modal:              400;
  --z-toast:              500;
  --z-tooltip:            600;

}

/* 10. BARRIEREFREIHEIT (WCAG 2.1 AA) */

:root {

  --touch-target-min:      44px;

  --focus-outline:         3px solid var(--color-brand);
  --focus-outline-offset:  2px;

  --min-line-height-body:  1.5;

}

/* 11. INHALTSKARTEN (Card / Section Text-Cards) */

.card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  border-radius: var(--radius-xl);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
}

.card--weit {
  gap: 12px;
  padding: 28px;
}

.card--auf-farbe { border: none; }

.card--farbig {
  background: var(--color-area-secondary-30);
  border: 1px solid var(--color-border-nur-dunkel);
}

.card__titel        { color: var(--color-heading); }
.card--farbig .card__titel { color: var(--color-text); }

.card__strich {
  width: 48px;
  height: 4px;
  border-radius: 2px;
  background: var(--color-area-streifen);
}

.karten-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--layout-gutter);
}

.karten-reihe--2sp > .card { flex: 1 1 var(--layout-karte-min-2sp); min-width: var(--layout-karte-min-2sp); max-width: var(--layout-karte-max-2sp); }
.karten-reihe--3sp > .card { flex: 1 1 var(--layout-karte-min-3sp); min-width: var(--layout-karte-min-3sp); max-width: var(--layout-karte-max-3sp); }
.karten-reihe--4sp > .card { flex: 1 1 var(--layout-karte-min-4sp); min-width: var(--layout-karte-min-4sp); max-width: var(--layout-karte-max-4sp); }

.karten-reihe--bereiche > .bereichs-karte {
  flex: 1 1 var(--layout-karte-min-3sp);
  min-width: var(--layout-karte-min-3sp);
  max-width: var(--layout-karte-max-3sp);
}

.bereichs-karte { display: flex; flex-direction: column; }
.bereichs-karte__inhalt { display: flex; flex-direction: column; flex: 1 1 auto; }
.bereichs-karte__inhalt > .pfeil { margin-top: auto; }

.karten-reihe--themen > .themen-karte {
  flex: 1 1 var(--layout-karte-min-3sp);
  min-width: var(--layout-karte-min-3sp);
  max-width: var(--layout-karte-max-3sp);
}

.karten-reihe--kontakt { align-items: flex-start; }
.karten-reihe--kontakt > .kontakt-karte {
  flex: 1 1 var(--layout-kontakt-karte-min);
  min-width: var(--layout-kontakt-karte-min);
  max-width: var(--layout-kontakt-karte-max);
}

/* 4c. HEADER-SLIDER (Startseite) */

/* 12. HANDLUNGSAUFRUF (Section/CTA) */

.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding-block: var(--layout-section-abstand);
  padding-inline: var(--layout-margin);
  align-items: stretch;
}

.cta__textteil {
  flex: 0 0 var(--layout-cta-textspalte);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: var(--layout-block-abstand);
  background: var(--color-area-primary);
  color: var(--color-area-on-primary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-cta);
  border: 1px solid var(--color-border-nur-dunkel);
}

.cta__textteil a:not(.button) { color: inherit; }

.cta__feld {
  flex: 1 1 280px;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: var(--layout-block-abstand);
  background: var(--color-area-cta-feld);
  color: var(--color-area-on-cta-feld);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-cta);
  border: 1px solid var(--color-border-nur-dunkel);
}

.cta__bild {
  flex: 1 1 280px;
  min-width: 280px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-cta);
}

.cta__ziel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  color: inherit;
}

.cta__ziel svg { inline-size: 32px; block-size: 32px; stroke: currentColor; }

.cta__ziel:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--focus-ring-innen),
              0 0 0 5px var(--focus-ring);
}