:root {

  --farbe-blau:            #094E97;
  --farbe-blau-dunkel:     #264080;

  --farbe-blau-hell:       #A9CDEB;
  --farbe-blau-zart:       #E0E9FF;

  --farbe-gruen:           #3A9818;
  --farbe-rot:             #B20E0C;

  --farbe-weiss:           #FFFFFF;
  --farbe-schwarz:         #000000;

  --farbe-link:            #0174DF;

  --farbe-text:            #555555;
  --farbe-text-hell:       #666666;
  --farbe-text-zart:       #777777;
  --farbe-text-schwach:    #888888;

  --farbe-linie:           #999999;
  --farbe-flaeche:         #BBBBBB;
  --farbe-flaeche-hell:    #CCCCCC;
  --farbe-rand:            #DDDDDD;
  --farbe-seite:           #EEEEEE;

  --farbe-fehler-text:     #B94A48;
  --farbe-fehler-flaeche:  #F2DEDE;
  --farbe-fehler-rand:     #EED3D7;

  --farbe-schalter:        #F5F5F5;
  --farbe-schalter-ende:   #E6E6E6;

  --farbe-slide-flaeche:   rgba(255, 255, 255, 0.85);
  --farbe-startbox-titel:  rgba(0, 0, 0, 0.5);
  --farbe-kopf-schatten:   rgba(0, 0, 0, 0.1);

  --schrift-buch:    eausans_book,  Helvetica, Arial, sans-serif;
  --schrift-fett:    eausans_bold,  Helvetica, Arial, sans-serif;
  --schrift-schwarz: eausans_black, Helvetica, Arial, sans-serif;

  --groesse-basis:        12px;
  --groesse-text:         13px;
  --groesse-klein:        11px;
  --groesse-h3:           14px;
  --groesse-menue:        15px;
  --groesse-serienkopf:   16px;
  --groesse-h1:           25px;
  --groesse-h2:           18px;
  --groesse-startbox:     18px;
  --groesse-titel:        19px;
  --groesse-slide-titel:  22px;
  --groesse-item-titel:   28px;

  --zeile-text:      1.7em;
  --zeile-eng:       1.25em;
  --abstand-titel:   12px;
  --zeile-titel:     2em;
  --zeile-bereich:   1.4em;
  --zeile-menue:     1.4em;
  --zeile-kontakt:   1.8em;

  --zeile-sitemap:          15px;
  --zeile-sitemap-eintrag:  16.25px;

  --raster-spalten:      24;
  --raster-spalte:        9px;
  --raster-rinne:         4px;
  --raster-reihe:        15px;
  --raster-reihe-schritt:19px;
  --raster-modul:        13px;
  --raster-versatz:      19px;
  --container-breite:   312px;
  --container-polster:    2px;

  --hoehe-menuepunkt:    49px;

  --zeile-menueeintrag-mobil: 3.5em;
  --hoehe-slide:        360px;
  --breite-slide:       944px;
  --abstand-slide-text:  42px;
  --schatten-kopf:      0 5px 5px var(--farbe-kopf-schatten);

  --kopf-reihe-eins:      67px;
  --kopf-logo-oben:       37px;
  --kopf-besagroup-oben:  31px;
  --kopf-besagroup-links: 17px;
  --kopf-sprachen-oben:   16px;

  --breite-suchfeld:     167px;
  --hoehe-suchfeld:       31px;
  --breite-schaltflaeche: 208px;
  --breite-suchknopf:     64px;
  --hoehe-suchknopf:      26px;

  --zeile-formularfeld:   16px;
}

@media (min-width: 462px) {
  :root {
    --raster-spalte:        13px;
    --raster-rinne:          6px;
    --raster-reihe-schritt: 21px;
    --raster-modul:         19px;
    --raster-versatz:       21px;
    --container-breite:    456px;
    --container-polster:     3px;
  }
}

@media (min-width: 756px) {
  :root {
    --raster-spalte:        19px;
    --raster-rinne:         12px;
    --raster-reihe-schritt: 27px;
    --raster-modul:         31px;
    --raster-versatz:       27px;
    --container-breite:    744px;
    --container-polster:     6px;
  }
}

@media (min-width: 976px) {
  :root {
    --raster-spalte:        24px;
    --raster-rinne:         16px;
    --raster-reihe-schritt: 31px;
    --raster-modul:         40px;
    --raster-versatz:       31px;
    --container-breite:    960px;
    --container-polster:     8px;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1, h2, h3, h4, h5, h6,
p, ul, ol, li, figure, blockquote, dl, dd {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  border: 0;
  vertical-align: middle;
}

@font-face {
  font-family: eausans_book;
  src: url("../uploads/webfonts/eau_sans_book-webfont.woff") format("woff"),
       url("../uploads/webfonts/eau_sans_book-webfont.ttf")  format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: eausans_bold;
  src: url("../uploads/webfonts/eau_sans_bold-webfont.woff") format("woff"),
       url("../uploads/webfonts/eau_sans_bold-webfont.ttf")  format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: eausans_black;
  src: url("../uploads/webfonts/eau_sans_black-webfont.woff") format("woff"),
       url("../uploads/webfonts/eau_sans_black-webfont.ttf")  format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.container {
  width: 100%;
  max-width: var(--container-breite);
  margin-inline: auto;
  padding: var(--container-polster);
}

.raster {
  display: grid;
  grid-template-columns: repeat(var(--raster-spalten), var(--raster-spalte));
  gap: var(--raster-rinne);
  justify-content: center;
}

.inhaltsbuehne {
  width: 100%;
  max-width: calc(var(--container-breite) - 2 * var(--container-polster));
  margin: calc(2 * var(--container-polster)) auto 0;
  background: var(--farbe-weiss);
}

.inhaltsbuehne .container {
  max-width: none;
  padding: 0;
}

.sp-1  { grid-column: span 1;  }
.sp-2  { grid-column: span 2;  }
.sp-3  { grid-column: span 3;  }
.sp-4  { grid-column: span 4;  }
.sp-5  { grid-column: span 5;  }
.sp-6  { grid-column: span 6;  }
.sp-7  { grid-column: span 7;  }
.sp-8  { grid-column: span 8;  }
.sp-9  { grid-column: span 9;  }
.sp-10 { grid-column: span 10; }
.sp-11 { grid-column: span 11; }
.sp-12 { grid-column: span 12; }
.sp-13 { grid-column: span 13; }
.sp-14 { grid-column: span 14; }
.sp-15 { grid-column: span 15; }
.sp-16 { grid-column: span 16; }
.sp-17 { grid-column: span 17; }
.sp-18 { grid-column: span 18; }
.sp-19 { grid-column: span 19; }
.sp-20 { grid-column: span 20; }
.sp-21 { grid-column: span 21; }
.sp-22 { grid-column: span 22; }
.sp-23 { grid-column: span 23; }
.sp-24 { grid-column: span 24; }

@media (min-width: 976px) {
  .titelzeile__bereich  { grid-column: 1 / span 6;  padding-left: var(--raster-modul); }
  .titelzeile__titel    { grid-column: 7 / span 10; padding-left: var(--raster-modul); }
  .titelzeile__suche    { grid-column: 17 / span 8; }
  .inhaltszeile__leiste { grid-column: 1 / span 6; }
  .inhaltszeile__inhalt { grid-column: 7 / span 17; padding-left: var(--raster-modul); }

  .inhaltszeile__inhalt--schmal { grid-column: 7 / span 11; }
  .inhaltszeile__nebenspalte {
    grid-column: 18 / span 7;
    align-self: start;
    padding-top: var(--raster-versatz);
    padding-right: var(--raster-modul);
    padding-bottom: calc(8 * var(--raster-versatz));
  }

  .titelzeile__bereich,
  .titelzeile__titel,
  .titelzeile__suche,
  .inhaltszeile__leiste,
  .inhaltszeile__inhalt {
    align-self: start;
  }
}

@media (max-width: 461px) {
  .raster > *          { grid-column: span var(--raster-spalten); }

  .raster > .r456-voll { grid-column: 2 / span 22; }

  .raster > .r456-halb { grid-column: span 22; }
}

@media (min-width: 462px) and (max-width: 755px) {
  .raster > .r456-voll  { grid-column: span 22; }
  .raster > .r456-halb  { grid-column: span 12; }
}

body {
  background: var(--farbe-seite) url("../uploads/images/layout/bodybg.gif") repeat-x 0 20px;
  color: var(--farbe-schwarz);
  font-family: var(--schrift-buch);
  font-size: var(--groesse-basis);
  line-height: var(--zeile-text);
}

a {
  color: var(--farbe-link);
  text-decoration: none;
}

a:hover,
a:focus-visible {
  color: var(--farbe-blau);
  text-decoration: underline;
}

sup {
  vertical-align: 4px;
  font-size: 85%;
}

.klein {
  font-size: 0.8em;
  opacity: 0.6;
}

.kleinschreibung {
  text-transform: lowercase;
}

.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.kopf {
  width: 100%;
  background: var(--farbe-weiss);
  border-bottom: 1px solid var(--farbe-rand);
  box-shadow: var(--schatten-kopf);
}

.kopf__innen {
  align-items: center;
}

.kopf__logo {
  padding-top: 6px;
}

.kopf__logo {
  display: none;
}

.kopf__logo-mobil {
  padding-top: var(--container-polster);
}

@media (max-width: 461px) {
  .kopf__logo-mobil {
    padding-top: calc(3px + var(--raster-versatz));
    padding-left: calc(2 * var(--raster-modul));
  }

  .kopf__besagroup {
    padding-left: var(--raster-modul);
  }
  .kopf__menue {
    padding-top: calc(var(--raster-versatz) - 3px);
  }

  .titelzeile__titel,
  .titelzeile__suche {
    padding-top: var(--raster-versatz);
  }
}

@media (min-width: 756px) {
  .kopf__logo-mobil { order: 1; }
  .kopf__besagroup  { order: 2; }
  .kopf__sprachen   { order: 3; }
  .kopf__menue      { order: 4; }
}

@media (min-width: 976px) {
  .kopf__logo       { display: block; }
  .kopf__logo-mobil { display: none; }
}

@media (min-width: 976px) {
  .kopf .container {
    padding-block: 0;
  }

  .kopf__innen {
    align-items: start;
    row-gap: 0;
    grid-template-rows: var(--kopf-reihe-eins) auto;
  }

  .kopf__logo {
    grid-column: 1 / span 5;
    grid-row: 1 / span 2;
    padding-top: var(--kopf-logo-oben);
  }

  .kopf__besagroup {
    grid-column: 6 / span 8;
    grid-row: 1;
    justify-self: stretch;
    padding-top: var(--kopf-besagroup-oben);
    padding-left: var(--kopf-besagroup-links);
  }

  .kopf__besagroup img {
    display: block;
  }

  .kopf__sprachen {
    grid-column: 14 / span 11;
    grid-row: 1;
    padding-top: var(--kopf-sprachen-oben);
  }

  .kopf__menue {
    grid-column: 6 / span 19;
    grid-row: 2;
  }
}

.sprachen {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
  gap: var(--raster-rinne);
}

.sprachen__eintrag a {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.sprachen__eintrag--aktiv a {
  font-family: var(--schrift-fett);
}

.sprachen__kurz { display: inline; }
.sprachen__lang { display: none; }

@media (min-width: 756px) {
  .sprachen__kurz { display: none; }
  .sprachen__lang { display: inline; }
}

.hauptmenue {
  display: flex;
  flex-direction: column;
}

.hauptmenue[hidden] {
  display: none;
}

.hauptmenue__eintrag a {
  display: block;
  height: var(--hoehe-menuepunkt);
  padding-top: 0.3em;
  font-size: var(--groesse-menue);
  line-height: var(--zeile-menue);
  text-align: center;
  text-transform: uppercase;
}

.hauptmenue__eintrag a:hover,
.hauptmenue__eintrag a:focus-visible,
.hauptmenue__eintrag--aktiv a {
  background: var(--farbe-gruen);
  color: var(--farbe-weiss);
  font-family: var(--schrift-fett);
  text-decoration: none;
}

@media (min-width: 756px) {
  .hauptmenue {
    flex-direction: row;
    justify-content: flex-end;
  }

  .hauptmenue__eintrag {
    flex: 1;
    border-left: 1px solid var(--farbe-linie);
  }

  .hauptmenue__eintrag:last-child {
    border-right: 1px solid var(--farbe-linie);
  }
}

@media (min-width: 976px) {
  .hauptmenue__eintrag {
    flex: 0 0 auto;

    box-sizing: content-box;
    width: calc(4 * var(--raster-spalte) + 3 * var(--raster-rinne));
  }
}

.menueschalter {
  box-sizing: content-box;
  display: block;
  background: var(--farbe-gruen);
  color: var(--farbe-weiss);
  font-family: inherit;
  font-size: var(--groesse-menue);
  height: 44px;
  line-height: var(--zeile-menue);
  margin-inline: calc(2 * var(--raster-modul));
  padding: 0.3em 0 0;
  text-align: center;
  cursor: pointer;
  border: 0;
  width: calc(100% - 4 * var(--raster-modul));
  text-transform: uppercase;
}

@media (min-width: 462px) {
  .menueschalter {
    margin-inline: calc(4 * var(--raster-modul));
    width: calc(100% - 8 * var(--raster-modul));
  }
}

.menueschalter__symbol {
  margin-right: 0.6em;
  vertical-align: -2px;
}

.menueschalter[hidden] { display: none; }

@media (min-width: 756px) {
  .menueschalter { display: none; }
  .hauptmenue[hidden] { display: flex; }
}

.bereichstitel {
  background: var(--farbe-flaeche);
  color: var(--farbe-weiss);
  font-family: var(--schrift-fett);
  font-size: var(--groesse-titel);
  line-height: var(--zeile-bereich);
  padding-bottom: 0.4em;

  text-align: left;
  text-transform: uppercase;
}

.seitentitel {
  color: var(--farbe-blau);
  font-family: var(--schrift-schwarz);
  font-size: var(--groesse-titel);
  font-weight: normal;
  line-height: var(--zeile-titel);
  text-transform: uppercase;
}

@media (min-width: 976px) {
  .bereichstitel,
  .seitentitel,
  .titelzeile__suche {
    padding-top: var(--raster-versatz);
  }
}

@media (max-width: 975px) {
  .bereichstitel { display: none; }
}

.slideshow {
  position: relative;
  overflow: hidden;
}

.slideshow__bild {
  display: block;
  width: 100%;
  height: auto;
}

.slideshow__folie {
  position: relative;
}

.slideshow--aktiv .slideshow__folie {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.slideshow--aktiv .slideshow__folie--sichtbar {
  position: relative;
  opacity: 1;
  pointer-events: auto;
}

.slideshow__text {
  background: var(--farbe-slide-flaeche);
  font-family: var(--schrift-buch);
  padding: var(--container-polster);
}

.slideshow__titel {
  color: var(--farbe-blau);
  font-family: var(--schrift-schwarz);
  font-size: var(--groesse-slide-titel);
  font-weight: normal;
  line-height: var(--zeile-titel);
  text-transform: uppercase;
}

.slideshow__text p {
  line-height: var(--zeile-eng);
  margin-bottom: var(--abstand-titel);
}

@media (min-width: 756px) {
  .slideshow__text {
    position: absolute;
    left: 0;
    bottom: var(--abstand-slide-text);
    width: calc(11 * var(--raster-spalte) + 10 * var(--raster-rinne));
    padding: var(--raster-versatz) var(--raster-modul);
  }
}

@media (min-width: 976px) {
  .slideshow__text {
    width: calc(9 * var(--raster-spalte) + 8 * var(--raster-rinne)
                + 2 * var(--raster-modul));
  }
}

.slideshow__punkte {
  position: absolute;
  bottom: 0;
  left: var(--raster-rinne);
  z-index: 2;
  display: flex;
  gap: 8px;
  padding: 4px;
}

.slideshow__punkt {
  width: 8px;
  height: 8px;
  padding: 0;
  background: var(--farbe-seite);
  border: 1px solid var(--farbe-linie);
  cursor: pointer;
}

.slideshow__punkt[aria-current="true"] {
  background: var(--farbe-blau);
  border: none;
}

.kopfbild img {
  display: block;
  width: 100%;
  height: auto;
}

.startbox {
  position: relative;
  display: flex;

  align-items: flex-start;
  min-height: calc(var(--raster-reihe) + 6 * var(--raster-reihe-schritt));
  background-color: var(--farbe-flaeche);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.startbox__titel {
  display: block;
  width: 100%;
  background: var(--farbe-startbox-titel);
  color: var(--farbe-weiss);
  font-family: var(--schrift-fett);
  font-size: var(--groesse-startbox);
  line-height: 1;
  padding: 8px 0;
  text-indent: 16px;
  text-transform: uppercase;
}

.startbox:hover .startbox__titel,
.startbox:focus-visible .startbox__titel {
  text-decoration: underline;
}

.seitenleiste {
  display: flex;
  flex-direction: column;
  gap: var(--raster-versatz);
}

.seitenleiste--meldungen {
  padding-top: calc(var(--groesse-basis) + var(--container-polster));
}

.meldung {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--raster-rinne);
  align-items: center;
  border-bottom: 1px dotted var(--farbe-text);
  padding-bottom: var(--raster-rinne);
}

.meldung img {
  width: calc(4 * var(--raster-spalte) + 3 * var(--raster-rinne));
  height: auto;
}

.meldung__titel {
  color: var(--farbe-text-zart);
  font-family: var(--schrift-fett);
  font-size: var(--groesse-h3);
  font-weight: normal;
  line-height: var(--zeile-eng);
}

.meldung__titel a {
  color: inherit;
}

@media (min-width: 976px) {
  .meldung {
    display: block;

    width: calc(5 * var(--raster-spalte) + 4 * var(--raster-rinne));
    margin-left: var(--container-polster);
    padding-left: var(--raster-modul);

    padding-bottom: 0;
  }

  .meldung img {
    margin-block: var(--container-polster);
  }

  .meldung__titel {
    margin-top: var(--container-polster);
    margin-bottom: var(--abstand-titel);
  }

  .seitenleiste {
    gap: calc(2 * var(--container-polster));
  }
}

.bereichsmenue {
  font-size: var(--groesse-text);
  line-height: var(--zeile-eng);
  text-align: right;
  text-transform: uppercase;
}

.bereichsmenue__eintrag {
  border-bottom: 1px solid var(--farbe-blau);
}

@media (max-width: 975px) {
  .bereichsmenue {
    text-align: center;
  }

  .bereichsmenue__eintrag a {
    display: block;
    line-height: var(--zeile-menueeintrag-mobil);
  }
}

.bereichsmenue__eintrag a {
  display: block;
  padding: 0.5em 0;
}

.bereichsmenue__eintrag a:hover,
.bereichsmenue__eintrag a:focus-visible,
.bereichsmenue__eintrag--aktiv a {
  color: var(--farbe-blau);
  font-family: var(--schrift-schwarz);
  letter-spacing: -0.4px;
  text-decoration: none;
}

.inhaltsflaeche {
  background: var(--farbe-weiss);
}

.inhaltszeile__inhalt {
  padding-top: var(--raster-versatz);
  padding-bottom: calc(8 * var(--raster-versatz));
}

.inhaltszeile__nebenspalte {
  padding-bottom: calc(8 * var(--raster-versatz));
}

@media (min-width: 756px) {
  .inhaltszeile__leiste {
    padding-bottom: calc(5 * var(--raster-versatz));
  }
}

.inhalt .inhaltstitel {
  color: var(--farbe-text);
  font-family: var(--schrift-buch);
  font-size: var(--groesse-h1);
  font-weight: normal;
  line-height: var(--zeile-eng);
  margin-bottom: var(--abstand-titel);
}

.inhalt .inhaltstitel--schwarz {
  color: var(--farbe-schwarz);
}

.inhalt figure {
  margin: 1em 0;
}

.bild-vier-spalten  { width: calc(4 * var(--raster-spalte) + 3 * var(--raster-rinne)); }
.bild-fuenf-spalten { width: calc(5 * var(--raster-spalte) + 4 * var(--raster-rinne)); }

.meldungsliste {
  --abstand-meldungen: 16px;

  display: flex;
  flex-direction: column;
  gap: var(--abstand-meldungen);
}

.inhalt .meldungsanriss h2 a,
.inhalt .meldungsanriss h3 a,
.meldungsanriss h2 a,
.meldungsanriss h3 a {
  color: inherit;
  text-decoration: none;
}

.inhalt .meldungsanriss h2 a:hover,
.inhalt .meldungsanriss h2 a:focus-visible,
.inhalt .meldungsanriss h3 a:hover,
.inhalt .meldungsanriss h3 a:focus-visible {
  text-decoration: underline;
}

.meldungsanriss {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--raster-rinne);
  align-items: start;
}

.meldungsanriss img {
  width: calc(4 * var(--raster-spalte) + 3 * var(--raster-rinne));
  height: auto;
}

@media (max-width: 755px) {
  .meldungsanriss img {
    width: calc(6 * var(--raster-spalte) + 5 * var(--raster-rinne));
  }
}

.inhalt .bild-rechts {
  float: right;
  margin: 0 0 1em var(--raster-modul);
  width: calc(5 * var(--raster-spalte) + 4 * var(--raster-rinne));
}

@media (max-width: 755px) {
  .inhalt .bild-rechts {
    width: calc(8 * var(--raster-spalte) + 7 * var(--raster-rinne));
  }
}

@media (max-width: 461px) {
  .inhalt .bild-rechts {
    width: calc(10 * var(--raster-spalte) + 9 * var(--raster-rinne));
  }
}

.inhalt h2 {
  color: var(--farbe-text);
  font-family: var(--schrift-fett);
  font-size: var(--groesse-h2);
  font-weight: normal;
  line-height: var(--zeile-eng);
  margin-bottom: var(--abstand-titel);
}

.inhalt h3 {
  color: var(--farbe-text-zart);
  font-family: var(--schrift-fett);
  font-size: var(--groesse-h3);
  font-weight: normal;
}

.inhalt p {
  font-size: var(--groesse-text);
  line-height: var(--zeile-text);
  margin-bottom: 1em;
}

.inhalt a {
  color: var(--farbe-link);
}

.inhalt hr {
  border: 0;
  border-top: 1px solid var(--farbe-flaeche);
  clear: both;
  margin: 1em 0;
}

.inhalt ul li {
  position: relative;
  color: var(--farbe-text);
  font-size: var(--groesse-text);
  padding: 0.5em 0 0.5em 2em;
}

.inhalt ul li::before {
  content: "";
  position: absolute;
  left: 0.6em;
  top: 1.05em;
  width: 0.7em;
  height: 0.7em;
  background: var(--farbe-blau);
}

.inhalt ol {
  list-style: decimal;
  padding-left: 2em;
}

.inhalt ol li {
  font-size: var(--groesse-text);
  padding: 0.5em 0;
}

.inhalt h2.artikeltitel,
.artikeltitel {
  color: var(--farbe-blau);
  font-family: var(--schrift-schwarz);
  font-size: var(--groesse-item-titel);
  font-weight: normal;
  line-height: 1.25;
  margin-bottom: 0;
  padding-top: var(--raster-versatz);
}

.zurueck {
  font-size: var(--groesse-text);
  margin-bottom: 1em;
}

.fussnote {
  color: var(--farbe-text-hell);
  font-size: var(--groesse-klein);
  margin-bottom: 1em;
}

.produktbilder {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raster-rinne);
  margin: 1em 0;
}

.produktbilder img {
  background: var(--farbe-seite);
  display: block;
  max-width: 100%;
}

@media (min-width: 976px) {
  .produktbilder img {
    width: calc(10 * var(--raster-spalte) + 9 * var(--raster-rinne));
  }
}

.bildstrecke {
  --bildstrecke-schrift:  12px;
  --bildstrecke-zeile:    12px;

  --bildstrecke-spalte: var(--container-polster);

  --bildstrecke-reihe: var(--container-polster);
  --bildstrecke-titel:    11px;
  --bildstrecke-unter:    24px;

  display: grid;
  column-gap: var(--bildstrecke-spalte);
  row-gap: var(--bildstrecke-reihe);
  margin: 1em 0;

  grid-template-columns: repeat(auto-fill,
    calc(8 * var(--raster-spalte) + 7 * var(--raster-rinne)));
}

.inhalt .bildstrecke__eintrag,
.bildstrecke__eintrag {
  margin: 0;
  padding: 0;
  min-height: calc(var(--raster-reihe) + 6 * var(--raster-reihe-schritt));
}

.inhalt a.bildstrecke__verweis,
.bildstrecke__verweis {
  color: var(--farbe-link);
  display: block;
  text-decoration: none;
}

.bildstrecke__titel {
  display: block;
  font-family: var(--schrift-fett);
  font-size: var(--bildstrecke-schrift);
  line-height: var(--bildstrecke-zeile);
  margin-bottom: var(--bildstrecke-titel);
}

.bildstrecke figcaption {
  color: var(--farbe-link);
  font-size: var(--bildstrecke-schrift);
  line-height: var(--bildstrecke-zeile);
  margin-top: var(--bildstrecke-unter);
}

.produktliste-ende {
  border-bottom: 1px solid var(--farbe-flaeche);
  height: 22px;
}

.downloadbereich {
  margin-top: 46px;
}

.downloadeintrag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--raster-rinne);
  border-bottom: 1px dotted var(--farbe-text);
  padding: 0.5em 0;
}

.inhalt a.schaltflaeche,
.schaltflaeche {
  display: block;
  background: var(--farbe-blau);
  color: var(--farbe-weiss);
  line-height: 1;
  padding: 1em;
  text-align: center;
}

@media (max-width: 461px) {
  .downloadeintrag {
    display: block;
  }

  .inhalt a.schaltflaeche,
  .schaltflaeche {
    box-sizing: content-box;
    width: 100%;
  }
}

@media (min-width: 976px) {
  .schaltflaeche {
    width: var(--breite-schaltflaeche);
  }

  .downloadeintrag {
    padding-right: calc(2 * var(--raster-rinne));
  }
}

.inhalt a.schaltflaeche:hover,
.inhalt a.schaltflaeche:focus-visible,
.schaltflaeche:hover,
.schaltflaeche:focus-visible {
  background: var(--farbe-gruen);
  color: var(--farbe-weiss);
  text-decoration: none;
}

.schaltflaeche__symbol {
  margin-right: 0.6em;
  vertical-align: -2px;
}

.inhalt h2.serienkopf,
.serienkopf {
  display: block;
  background: var(--farbe-blau);
  color: var(--farbe-weiss);
  font-family: var(--schrift-buch);
  font-size: var(--groesse-serienkopf);
  font-weight: normal;
  line-height: 1;
  margin: 1px 0;
  padding: 5px 0;
  text-indent: 8px;
}

.inhalt h2.serienkopf--zu,
.serienkopf--zu {
  background: var(--farbe-flaeche-hell);
  color: var(--farbe-text-hell);
}

.serienkopf__schalter {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: block;
  font: inherit;
  padding: 0;
  text-align: left;
  width: 100%;
}

.serienkopf__symbol {
  margin-right: 0.5em;
  transition: transform 0.2s ease;
  vertical-align: -2px;
}

.serienkopf__pfeil {
  stroke: var(--farbe-blau);
}

.serienkopf--zu .serienkopf__pfeil {
  stroke: var(--farbe-flaeche-hell);
}

.serienkopf__schalter[aria-expanded="true"] .serienkopf__symbol {
  transform: rotate(90deg);
}

.serie__liste[hidden] {
  display: none;
}

.produkttabelle {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 1px;
  table-layout: fixed;
}

.produkttabelle thead th {
  border-bottom: 1px solid var(--farbe-flaeche);
  color: var(--farbe-text-hell);
  font-family: var(--schrift-buch);
  font-size: var(--groesse-klein);
  font-weight: normal;
  line-height: 1;
  padding: 5px 0;
  text-align: left;
}

.produkttabelle tbody tr {
  background: var(--farbe-blau-hell);
  color: var(--farbe-text-hell);
}

.produkttabelle tbody tr:hover {
  background: var(--farbe-weiss);
  font-family: var(--schrift-fett);
}

.produkttabelle tbody th,
.produkttabelle td {
  font-size: var(--groesse-basis);
  font-weight: normal;
  line-height: 1;
  padding: 5px 0;
  text-align: left;
}

.produkttabelle tbody th {
  color: var(--farbe-blau);
  text-indent: 8px;
}

.produkttabelle caption {
  caption-side: bottom;
  color: var(--farbe-text-hell);
  font-size: var(--groesse-klein);
  padding-top: 5px;
  text-align: left;
}

.fusszeile {
  width: 100%;
  background: var(--farbe-blau);
  color: var(--farbe-weiss);
  text-transform: uppercase;
}

@media (min-width: 756px) {
  .fusszeile--fest {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1000;
  }
}

.fusszeile a {
  color: var(--farbe-weiss);
}

.fusszeile__innen {
  position: relative;
  align-items: center;
}

.fusszeile__kontakt {
  line-height: var(--zeile-kontakt);

  padding-bottom: var(--raster-versatz);
  text-align: center;
}

@media (min-width: 756px) {
  .fusszeile__kontakt { text-align: right; }
}

.fusszeile__logo {
  position: absolute;
  top: -70px;
}

@media (max-width: 755px) {
  .fusszeile__logo { display: none; }
}

.rechtsmenue {
  position: absolute;
  top: -3.5em;
  left: 1em;
  background: var(--farbe-weiss);
  color: var(--farbe-text);
  font-size: 0.9em;
  padding: 0 0.4em;
}

.rechtsmenue a {
  color: var(--farbe-text-schwach);
}

.sitemap {
  border-top: 1px solid var(--farbe-weiss);
  padding-top: var(--raster-versatz);
}

.sitemap__liste {
  display: flow-root;
  line-height: var(--zeile-sitemap);
  padding-left: var(--raster-modul);
  padding-right: calc(2 * var(--raster-modul));
}

@media (max-width: 461px) {
  .sitemap__liste {
    padding-left: 0;
    padding-right: 0;
  }
}

.sitemap__gruppe {
  float: left;
  box-sizing: border-box;
  width: calc(5 * var(--raster-spalte) + 4 * var(--raster-rinne));
  font-family: var(--schrift-fett);
  font-size: var(--groesse-text);

  margin: 1em calc(var(--raster-rinne) / 2);
  min-width: 0;
  overflow-wrap: break-word;
}

@media (max-width: 461px) {
  .sitemap__gruppe {
    float: none;
    width: auto;
    margin-inline: 0;
  }
}

.sitemap__gruppe > ul {
  line-height: var(--zeile-sitemap-eintrag);
  margin: 0 0 12px;
}

.sitemap__gruppe ul li {
  font-family: var(--schrift-buch);
  font-size: var(--groesse-basis);

  padding: 0.2em 0;
  overflow-wrap: break-word;
}

.sitemapschalter {
  background: none;
  border: 0;
  color: var(--farbe-weiss);
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-transform: uppercase;
}

.sitemapschalter__symbol {
  vertical-align: -2px;
  margin-right: 0.3em;
}

input[type="text"],
input[type="email"],
textarea {
  width: 85%;
  padding: 0.5em;
  border: 1px solid var(--farbe-text-schwach);
  box-shadow: 0 1px 1px var(--farbe-rand) inset;
  font: inherit;
}

input[type="submit"],
button.absenden {
  background-color: var(--farbe-schalter);
  background-image: linear-gradient(to bottom, var(--farbe-weiss), var(--farbe-schalter-ende));
  border: 1px solid var(--farbe-flaeche-hell);
  cursor: pointer;
  font: inherit;
  padding: 4px 18px;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
}

.suche {
  display: flex;
  gap: var(--raster-rinne);
}

.suche input[type="text"] {
  flex: 1;
  width: auto;
}

@media (min-width: 976px) {
  .suche {
    gap: var(--container-polster);
  }

  .suche input[type="text"] {
    flex: 0 0 auto;
    width: var(--breite-suchfeld);
    height: var(--hoehe-suchfeld);
    padding: 0 4px;
  }

  .suche input[type="submit"] {
    width: var(--breite-suchknopf);
    height: var(--hoehe-suchknopf);
    padding: 0;
  }
}

.formular__falle {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formular__feld {
  padding: var(--container-polster);
}

.formular__feld > label {
  display: block;
  margin-bottom: 0.3em;
}

.formular fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

.formular legend {
  padding: 0;
}

.formular__wahl {
  display: inline-block;
  margin-right: var(--raster-modul);
}

.formular__wahl label {
  cursor: pointer;
}

.formular input[type="text"],
.formular input[type="email"],
.formular textarea,
.formular input[type="submit"] {
  box-sizing: content-box;
  line-height: var(--zeile-formularfeld);
}

.formular input[type="text"],
.formular input[type="email"],
.formular input[type="submit"] {
  height: var(--zeile-formularfeld);
}

.fehlermeldung {
  background-color: var(--farbe-fehler-flaeche);
  border: 1px solid var(--farbe-fehler-rand);
  border-radius: 4px;
  color: var(--farbe-fehler-text);
  padding: 8px 35px 8px 14px;
}

@media print {
  .nicht-drucken { display: none; }

  .inhalt { width: 90%; }

  body { background: none; }

  .fusszeile { background: none; color: var(--farbe-schwarz); }
}

.inhalt .suchergebnis,
.suchergebnis {

  --abstand-treffer:   var(--raster-versatz);
  --einzug-ausschnitt: var(--raster-modul);

  margin-top: var(--raster-versatz);
}

.inhalt .suchseite__formular,
.suchseite__formular {
  margin-bottom: 1em;
}

.inhalt .suchergebnis__zahl,
.suchergebnis__zahl {
  color: var(--farbe-text-hell);
  font-size: var(--groesse-klein);
  margin-bottom: var(--abstand-titel);
}

.inhalt .suchhinweis,
.suchhinweis {
  color: var(--farbe-text);
  font-size: var(--groesse-text);
  line-height: var(--zeile-text);
  margin-bottom: 1em;
}

.inhalt ol.suchtreffer,
.suchtreffer {
  list-style: none;
  margin: 0;
  padding: 0;
}

.inhalt .suchtreffer__eintrag,
.suchtreffer__eintrag {
  font-size: var(--groesse-text);
  margin-bottom: var(--abstand-treffer);
  padding: 0;
}

.inhalt .suchtreffer__titel,
.suchtreffer__titel {
  color: var(--farbe-link);
  font-family: var(--schrift-fett);
  font-size: var(--groesse-h3);
  font-weight: normal;
  line-height: var(--zeile-eng);
  margin-bottom: 0;
}

.inhalt .suchtreffer__ausschnitt,
.suchtreffer__ausschnitt {
  color: var(--farbe-text);
  font-size: var(--groesse-text);
  line-height: var(--zeile-text);
  margin-bottom: 0;
  padding-left: var(--einzug-ausschnitt);
}

.inhalt .suchtreffer__ausschnitt mark,
.suchtreffer__ausschnitt mark {
  background-color: var(--farbe-blau-zart);
  color: var(--farbe-blau-dunkel);
}

.karte {

  --hoehe-karte: 400px;

  margin: 0 0 var(--raster-versatz) 0;
}

.karte__platzhalter {
  align-items: center;
  background-color: var(--farbe-seite);
  border: 1px solid var(--farbe-rand);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--hoehe-karte);
  padding: var(--raster-modul);
  text-align: center;
}

.karte__hinweis {
  color: var(--farbe-text);
  font-size: var(--groesse-text);
  line-height: var(--zeile-text);
  margin: 0 0 var(--raster-versatz) 0;
  max-width: 34em;
}

.karte__fussnote {
  color: var(--farbe-text-schwach);
  font-size: var(--groesse-klein);
  line-height: var(--zeile-text);
  margin: var(--raster-versatz) 0 0 0;
  max-width: 34em;
}

.karte__schalter {
  border: 0;
  cursor: pointer;
  font-family: var(--schrift-buch);
  font-size: var(--groesse-text);
  width: var(--breite-schaltflaeche);
}

.karte__schalter[disabled] {
  background: var(--farbe-flaeche);
  cursor: default;
}

.karte__rahmen {
  border: 0;
  display: block;
  height: var(--hoehe-karte);
  width: 100%;
}