/* Andorfer: Grundlayout und Komponenten. Navigation: navi.css; Breakpoints: responsive.css. */

/* Andorfer - Stylesheet, ersetzt site.css. Hausfarbe #002e60 aus dem Logo. */
/* ===========================================================================
   Andorfer Sebastian GmbH & Co. KG
   Hausfarbe #002e60 - aus dem Firmenlogo entnommen.
   Farbe aendern: nur --navy und --navy-hell anpassen.
   =========================================================================== */

:root {
  /* Farben */
  --navy: #002e60;
  --navy-tief: #001b3b;
  --navy-hell: #1d5391;
  --navy-blass: #e8edf4;
  --text: #333a44;
  --text-hell: #5d6673;
  --linie: #dde2e8;
  --linie-zart: #eef1f5;
  --flaeche: #f5f7f9;
  --weiss: #fff;

  /* Abstaende - ein durchgehendes Raster fuer die ganze Seite */
  --raum-1: 8px;
  --raum-2: 16px;
  --raum-3: 26px;
  --raum-4: 44px;
  --raum-5: 72px;
  --abschnitt: clamp(64px, 8vw, 104px);

  --breite: 1240px;
  --kopfhoehe: 86px;
  --schrift: "Helvetica Neue", Helvetica, Arial, system-ui, -apple-system, "Segoe UI", sans-serif;
  --weich: cubic-bezier(.4, 0, .2, 1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopfhoehe) + 12px)
}

body {
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.7;
  color: var(--text);
  background: var(--weiss);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden
}

img {
  max-width: 100%;
  display: block
}

a {
  color: inherit
}

:focus-visible {
  outline: 2px solid var(--navy-hell);
  outline-offset: 3px
}

::selection {
  background: var(--navy);
  color: #fff
}

.inhalt {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 36px
}

/* ---------- Typografie ---------- */
h1,
h2,
h3,
h4 {
  color: var(--navy);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -.005em
}

.titel {
  text-align: center;
  margin-bottom: var(--raum-5);
  max-width: 820px;
  margin-left: auto;
  margin-right: auto
}

.titel h2 {
  font-size: clamp(29px, 3.8vw, 44px);
  text-transform: uppercase;
  letter-spacing: .015em
}

.titel .unter {
  display: block;
  margin-top: var(--raum-1);
  font-size: clamp(15px, 1.6vw, 19px);
  font-weight: 400;
  color: var(--navy-hell);
  text-transform: uppercase;
  letter-spacing: .07em;
  line-height: 1.4
}

.titel .strich {
  display: block;
  width: 60px;
  height: 3px;
  background: var(--navy);
  margin: var(--raum-3) auto 0
}

p {
  margin-bottom: var(--raum-2)
}

p:last-child {
  margin-bottom: 0
}

.spalten {
  column-count: 2;
  column-gap: var(--raum-5)
}

.spalten p,
.spalten ul {
  break-inside: avoid
}

.spalten p:last-child {
  margin-bottom: var(--raum-2)
}

.liste {
  list-style: none;
  margin: 0 0 var(--raum-2)
}

.liste li {
  position: relative;
  padding: 5px 0 5px 22px
}

.liste li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 15px;
  border: 5px solid transparent;
  border-left-color: var(--navy)
}

/* ---------- Kennzahlenband ---------- */
.band {
  background: var(--navy);
  color: var(--weiss)
}

.band .inhalt {
  display: grid;
  grid-template-columns: repeat(3, 1fr)
}

.band div {
  padding: var(--raum-4) var(--raum-3);
  text-align: center
}

.band div+div {
  border-left: 1px solid rgba(255, 255, 255, .2)
}

.band b {
  display: block;
  font-size: clamp(25px, 2.9vw, 34px);
  line-height: 1.15
}

.band span {
  display: block;
  font-size: 13.5px;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: rgba(255, 255, 255, .75);
  margin-top: 6px;
  line-height: 1.5
}

/* ---------- Postfachhinweis ---------- */
.postfachhinweis {
  background: var(--navy-blass);
  border-bottom: 1px solid var(--linie)
}

.postfachhinweis .inhalt {
  padding-top: var(--raum-3);
  padding-bottom: var(--raum-3)
}

.postfachhinweis p {
  margin: 0 0 var(--raum-2);
  font-weight: 700;
  color: var(--navy)
}

.postfachhinweis ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--raum-2) var(--raum-4)
}

.postfachhinweis li {
  font-size: 16px;
  line-height: 1.5
}

.postfachhinweis span {
  display: block;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--text-hell);
  margin-bottom: 3px
}

.postfachhinweis a {
  color: var(--navy);
  font-weight: 700;
  text-decoration: none;
  word-break: break-word
}

.postfachhinweis a:hover {
  text-decoration: underline
}

/* ---------- Abschnitte ---------- */
.abschnitt {
  padding: var(--abschnitt) 0
}

.abschnitt--flaeche {
  background: var(--flaeche)
}

/* ---------- Bildstreifen: volle Breite, feste Hoehe, keine Bewegung ---------- */
.streifen {
  display: block;
  width: 100%;
  background: var(--navy-tief);
  line-height: 0
}

.streifen img {
  width: 100%;
  height: clamp(150px, 17vw, 300px);
  object-fit: cover;
  object-position: center
}

/* ---------- Werke ---------- */
.werke {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--raum-3);
  margin-top: var(--raum-5)
}

.werk {
  overflow: hidden
}

.werk img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: transform .6s var(--weich)
}

.werk:hover img {
  transform: scale(1.03)
}

.werk figcaption {
  padding-top: var(--raum-2)
}

.werk .marke {
  display: inline-block;
  background: var(--navy);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: 4px 10px;
  margin-bottom: var(--raum-1)
}

.werk b {
  display: block;
  color: var(--navy);
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px
}

.werk span {
  font-size: 15.5px;
  color: var(--text-hell);
  line-height: 1.55
}

.struktur {
  margin-top: var(--raum-5);
  padding-top: var(--raum-4);
  border-top: 1px solid var(--linie);
  text-align: center
}

.struktur img {
  margin: var(--raum-3) auto 0;
  max-width: 880px
}

/* ---------- Wertstoffgruppen ---------- */
.gruppen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--linie);
  background: var(--weiss)
}

.gruppe {
  padding: var(--raum-4) var(--raum-3)
}

.gruppe+.gruppe {
  border-left: 1px solid var(--linie)
}

.gruppe h3 {
  font-size: 19px;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: var(--raum-2);
  padding-bottom: var(--raum-1);
  border-bottom: 3px solid var(--navy)
}

.gruppe li {
  font-size: 16px
}

.logistik {
  margin-top: var(--raum-4);
  text-align: center;
  color: var(--text-hell);
  max-width: 78ch;
  margin-left: auto;
  margin-right: auto
}

/* ---------- Karussell ---------- */
.karussell {
  position: relative;
  margin-top: var(--raum-5)
}

.karussell .spur {
  list-style: none;
  margin: 0;
  padding: 0
}

/* ---------- Grossansicht ---------- */
.lupe {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 12, 26, .97);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0
}

.lupe.offen {
  display: flex;
  animation: einblenden .25s var(--weich)
}

@keyframes einblenden {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

.lupe img {
  width: 94vw;
  height: 88vh;
  object-fit: none
}

.lupe button {
  position: absolute;
  background: rgba(255, 255, 255, .14);
  border: 0;
  color: #fff;
  width: 48px;
  height: 48px;
  font-size: 24px;
  cursor: pointer;
  transition: background .2s var(--weich)
}

.lupe button:hover {
  background: rgba(255, 255, 255, .3)
}

.lupe .zu {
  top: 20px;
  right: 20px
}

.lupe .vor {
  left: 20px;
  top: 50%
}

.lupe .weiter {
  right: 20px;
  top: 50%
}

/* ---------- Alugranulate ---------- */
.zahlenzeile {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--linie);
  margin-bottom: var(--raum-5);
  background: var(--weiss)
}

.zahlenzeile div {
  padding: var(--raum-3);
  text-align: center
}

.zahlenzeile div+div {
  border-left: 1px solid var(--linie)
}

.zahlenzeile b {
  display: block;
  color: var(--navy);
  font-size: 29px;
  line-height: 1.15
}

.zahlenzeile span {
  font-size: 15px;
  color: var(--text-hell)
}

.koernungen {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--raum-3);
  margin: 0 0 var(--raum-5)
}

.koernung {
  text-align: center;
  padding: var(--raum-3) var(--raum-2);
  background: var(--weiss);
  border: 1px solid var(--linie);
  transition: border-color .25s var(--weich)
}

.koernung:hover {
  border-color: var(--navy-hell)
}

.koernung img {
  width: 100%;
  max-width: 140px;
  margin: 0 auto var(--raum-2);
  aspect-ratio: 1;
  object-fit: contain
}

.koernung b {
  display: block;
  color: var(--navy);
  font-size: 19px
}

.koernung span {
  display: block;
  font-size: 13px;
  color: var(--text-hell);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-top: 2px
}

.vorteile {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--linie);
  background: var(--weiss)
}

.vorteile div {
  padding: var(--raum-3);
  text-align: center
}

.vorteile div+div {
  border-left: 1px solid var(--linie)
}

.vorteile b {
  display: block;
  color: var(--navy);
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: .05em
}

.zweispalt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--raum-5);
  align-items: center
}

.zweispalt img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover
}

.zertifikate {
  margin-top: var(--raum-3);
  border-top: 1px solid var(--linie)
}

.zertifikat {
  display: flex;
  align-items: baseline;
  gap: var(--raum-2);
  padding: var(--raum-2) 0;
  border-bottom: 1px solid var(--linie);
  text-decoration: none;
  transition: padding-left .25s var(--weich)
}

.zertifikat:hover {
  padding-left: 6px
}

.zertifikat:hover b {
  color: var(--navy-hell)
}

.zertifikat b {
  display: block;
  color: var(--navy);
  font-size: 16.5px
}

.zertifikat em {
  font-style: normal;
  display: block;
  font-size: 14.5px;
  color: var(--text-hell);
  margin-top: 2px
}

.zertifikat .pdf {
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--navy-hell);
  white-space: nowrap
}

/* ---------- Ansprechpartner ---------- */
.gruppenzeile {
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--navy-hell);
  margin: 0 0 var(--raum-3)
}

.personen {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--raum-4) var(--raum-3)
}

/* Jede Personengruppe bekommt denselben Abstand nach oben, ob mit oder ohne Titel */
.personengruppe+.personengruppe {
  margin-top: var(--raum-5);
  padding-top: var(--raum-4);
  border-top: 1px solid var(--linie-zart)
}

#c1312 .personengruppe,
#c1313 .personengruppe {
  max-width: var(--breite);
  margin: 0 auto;
  padding: var(--raum-4) 36px 0;
  border-top: 1px solid var(--linie-zart)
}

#c1312+#c1111,
#c1313+#c1112 {
  margin-top: var(--raum-2)
}

.person {
  padding-bottom: var(--raum-2);
  border-bottom: 1px solid var(--linie)
}

.person b {
  display: block;
  color: var(--navy);
  font-size: 16.5px;
  text-transform: uppercase;
  letter-spacing: .03em
}

.person .rolle {
  display: block;
  font-size: 14.5px;
  color: var(--text-hell);
  margin-bottom: 6px
}

.person a {
  font-size: 14.5px;
  color: var(--navy-hell);
  text-decoration: none;
  word-break: break-word
}

.person a:hover {
  text-decoration: underline
}

/* ---------- Kontakt ---------- */
.kontaktraster {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: var(--raum-5);
  align-items: start
}

.kontaktraster address {
  font-style: normal;
  line-height: 1.85
}

.kontaktraster address strong {
  display: block;
  color: var(--navy);
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  margin-bottom: 6px
}

.kontaktraster a {
  color: var(--navy-hell);
  text-decoration: none
}

.kontaktraster a:hover {
  text-decoration: underline
}

.kontaktspalte {
  text-align: center
}

.kontaktspalte h3 {
  font-size: clamp(19px, 2vw, 23px);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: var(--raum-3);
  padding-bottom: var(--raum-2);
  border-bottom: 2px solid var(--navy);
  display: inline-block
}

.kontaktspalte address {
  margin-bottom: var(--raum-3)
}

.kontaktspalte address:last-child {
  margin-bottom: 0
}

.karte {
  aspect-ratio: 4/3;
  background: var(--linie)
}

.karte iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block
}

#kontakt {
  padding: var(--abschnitt) 0;
  background: var(--flaeche)
}

#kontakt>.frame {
  width: 100%;
  max-width: none;
  float: none;
  clear: both
}

#kontakt>.frame>.rahmen {
  width: 100%;
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 36px
}

#kontakt .cn_multicontent_teaser {
  max-width: 820px;
  margin: 0 auto var(--raum-5)
}

#kontakt .tx_cn-columns {
  width: 100%;
  float: none
}

#kontakt .tx_cn-columns>.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--raum-5);
  width: 100%;
  float: none;
  clear: both
}

#kontakt .tx_cn-columns>.row>.col-50 {
  width: auto;
  min-width: 0;
  float: none
}

#kontakt .col-50>.frame {
  width: 100%;
  margin: 0;
  float: none
}

#kontakt .col-50>.frame>.rahmen {
  width: 100%;
  max-width: none
}

#kontakt .kontaktspalte address {
  font-style: normal;
  line-height: 1.85
}

#kontakt .kontaktspalte address strong {
  display: block;
  color: var(--navy);
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  margin-bottom: 6px
}

#kontakt .kontaktspalte address {
  margin-bottom: var(--raum-3)
}

#kontakt .kontaktspalte address:last-child {
  margin-bottom: 0
}

#kontakt .kontaktspalte a {
  color: var(--navy-hell);
  text-decoration: none
}

#kontakt .kontaktspalte a:hover {
  text-decoration: underline
}

#kontakt .kontaktspalte>p:empty {
  display: none
}

#kontakt .frame-type-html .mediaconsent {
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 4/3;
  background: var(--linie)
}

#kontakt .frame-type-html .blockedcontentbox {
  height: 100% !important
}

/* ---------- Fussbereich ---------- */
.fuss {
  background: var(--navy);
  color: rgba(255, 255, 255, .85);
  padding: var(--raum-4) 0 0;
  font-size: 15px
}

.fuss h4 {
  color: #fff;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .15em;
  margin-bottom: 10px;
  font-weight: 700
}

.fuss address {
  font-style: normal;
  line-height: 1.6
}

.fuss address .luecke {
  display: block;
  height: 10px
}

.fuss a {
  color: rgba(255, 255, 255, .85);
  text-decoration: none;
  transition: color .2s var(--weich)
}

.fuss a:hover {
  color: #fff;
  text-decoration: underline
}

.fuss ul {
  list-style: none
}

.fuss ul li {
  padding: 2px 0
}

/* Klasse fuer den cookieman-Aufruf im Fussbereich */
.fuss .alsLink {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: rgba(255, 255, 255, .85);
  cursor: pointer
}

.fuss .alsLink:hover {
  color: #fff;
  text-decoration: underline
}

.fussende {
  margin-top: var(--raum-3);
  border-top: 1px solid rgba(255, 255, 255, .2);
  padding: 14px 0 18px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, .65)
}

.fussende .inhalt {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-1) var(--raum-4);
  justify-content: space-between;
  align-items: center
}

/* Normale TYPO3-Inhalte aus der Footer-Spalte der Startseite. */
.footer-inhalte{
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.footer-inhalte>.frame {
  min-width: 0;
  width: 100%;
  float: none;
  clear: none;
  margin: 0;
  display: block;
}

.footer-inhalte>.frame>.rahmen {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0
}

.footer-inhalte .frame-footer-spalten .tx_cn-columns {
  width: 100%;
  float: none;
  clear: none
}

.footer-inhalte .frame-footer-spalten .tx_cn-columns>.row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr));
  gap: var(--raum-4);
  width: 100%;
  float: none;
  clear: none;
  margin: 0
}

.footer-inhalte .frame-footer-spalten .tx_cn-columns>.row>[class^="col-"] {
  width: auto;
  min-width: 0;
  float: none
}

.footer-inhalte .frame-footer-spalten .tx_cn-columns>.row>[class^="col-"]>.frame {
  width: 100%;
  float: none;
  clear: none;
  margin: 0
}

.footer-inhalte .frame-footer-spalten .tx_cn-columns>.row>[class^="col-"]>.frame>.rahmen {
  width: 100%;
  max-width: none;
  float: none;
  clear: none;
  margin: 0;
  padding: 0
}

.footer-inhalte header {
  margin: 0
}

.footer-inhalte .ce-textpic,
.footer-inhalte .ce-bodytext {
  float: none;
  margin: 0;
  padding: 0;
  line-height: 1.6
}

.footer-inhalte .ce-bodytext p {
  margin: 0;
  font-size: inherit;
  line-height: inherit
}

.footer-inhalte .ce-bodytext p+p {
  margin-top: 10px
}

.footer-inhalte>.frame-footerabschluss {
  padding: 14px 0 18px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, .65)
}

.footer-inhalte>.frame-footerabschluss::before{
  border-top: 1px solid rgba(255, 255, 255, .2);
  content: '';
  position: absolute;
  width: 100vw;
  left: 0;
}

.footer-inhalte>.frame-footerabschluss>.rahmen {
  /* max-width: var(--breite); */
  margin: 0 auto;
  padding: 15px 0;
  /* padding: 0 36px */
}

.frame-footerabschluss .ce-bodytext {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-1) var(--raum-4);
  justify-content: space-between;
  align-items: center
}

.frame-footerabschluss .ce-bodytext p+p {
  margin: 0
}

/* ---------- Unterseiten ---------- */
.seitentitel {
  background: var(--navy);
  color: #fff;
  padding: var(--raum-5) 0
}

.seitentitel h1 {
  color: #fff;
  font-size: clamp(27px, 3.8vw, 42px);
  text-transform: uppercase;
  letter-spacing: .015em
}

.rechtstext {
  padding: var(--abschnitt) 0
}

.rechtstext .inhalt {
  max-width: 880px
}

.rechtstext h2 {
  font-size: clamp(20px, 2.3vw, 25px);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin: var(--raum-5) 0 var(--raum-2);
  padding-bottom: var(--raum-1);
  border-bottom: 1px solid var(--linie)
}

.rechtstext h2:first-of-type {
  margin-top: 0
}

.rechtstext h3 {
  font-size: 18px;
  margin: var(--raum-3) 0 var(--raum-1)
}

.rechtstext dl {
  margin-bottom: var(--raum-2)
}

.rechtstext dt {
  font-weight: 700;
  color: var(--navy);
  padding-top: var(--raum-2)
}

.rechtstext dd {
  padding-bottom: var(--raum-2);
  border-bottom: 1px solid var(--linie-zart);
  margin: 0
}

.rechtstext a {
  color: var(--navy-hell)
}

.rechtstext ol {
  margin: 0 0 var(--raum-2) 22px
}

.rechtstext ol li {
  margin-bottom: var(--raum-1)
}

.quelle {
  margin-top: var(--raum-4);
  font-size: 14.5px;
  color: var(--text-hell)
}

.merke {
  border-left: 4px solid var(--navy);
  background: var(--flaeche);
  padding: var(--raum-3);
  margin: var(--raum-3) 0
}

.merke b {
  display: block;
  color: var(--navy);
  margin-bottom: var(--raum-1);
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: 13.5px
}

.merke p {
  margin: 0;
  font-size: 16px;
  color: var(--text-hell)
}

.merke p+p {
  margin-top: var(--raum-2)
}

.schritte {
  list-style: none;
  counter-reset: schritt;
  margin: var(--raum-2) 0 var(--raum-3)
}

.schritte li {
  counter-increment: schritt;
  position: relative;
  padding: 0 0 var(--raum-3) 52px
}

.schritte li b {
  display: block;
  color: var(--navy);
  font-size: 17.5px;
  margin-bottom: 6px
}

.schritte li p {
  margin-bottom: 8px
}

.schritte li p:last-child {
  margin-bottom: 0
}

.schritte li::before {
  content: counter(schritt);
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  display: grid;
  place-items: center;
  font-size: 16px
}

.schritte li:last-child {
  padding-bottom: 0
}

/* ---------- Fehlerseite ---------- */
.fehler {
  padding: clamp(72px, 12vw, 140px) 0;
  text-align: center
}

.fehler .nummer {
  display: block;
  font-size: clamp(72px, 14vw, 150px);
  font-weight: 700;
  color: var(--navy-blass);
  line-height: 1;
  margin-bottom: var(--raum-2)
}

.fehler h1 {
  font-size: clamp(26px, 3.6vw, 40px);
  text-transform: uppercase;
  letter-spacing: .015em;
  margin-bottom: var(--raum-2)
}

.fehler p {
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
  color: var(--text-hell)
}

.fehler .wege {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-2);
  justify-content: center;
  margin-top: var(--raum-4)
}

.knopf {
  display: inline-block;
  padding: 14px 28px;
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .06em;
  text-decoration: none;
  border: 2px solid var(--navy);
  transition: .2s var(--weich)
}

.knopf--voll {
  background: var(--navy);
  color: #fff
}

.knopf--voll:hover {
  background: var(--navy-tief);
  border-color: var(--navy-tief)
}

.knopf--linie {
  color: var(--navy)
}

.knopf--linie:hover {
  background: var(--navy);
  color: #fff
}

/* ---------- Nach oben ---------- */
.hoch {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 50;
  width: 46px;
  height: 46px;
  border: 0;
  background: var(--navy);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .3s var(--weich), transform .3s var(--weich)
}

.hoch.da {
  opacity: .92;
  pointer-events: auto;
  transform: none
}

.hoch:hover {
  opacity: 1
}

/* ---------- Einblenden ---------- */
.auf {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--weich), transform .6s var(--weich)
}

.auf.sichtbar {
  opacity: 1;
  transform: none
}

/* ===========================================================================
   Inhalte aus dem TYPO3-Redaktionssystem
   Die folgenden Regeln formatieren HTML, das aus dem Rich-Text-Editor kommt.
   =========================================================================== */

/* Fliesstext aus dem Editor */
.ce-bodytext p:empty {
  display: none
}

.fliesstext p {
  margin-bottom: var(--raum-2)
}

.fliesstext p:last-child {
  margin-bottom: 0
}

.fliesstext ul {
  list-style: none;
  margin: 0 0 var(--raum-2)
}

.fliesstext ul li {
  position: relative;
  padding: 5px 0 5px 22px
}

.fliesstext ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 15px;
  border: 5px solid transparent;
  border-left-color: var(--navy)
}

.fliesstext ol {
  margin: 0 0 var(--raum-2) 22px
}

.fliesstext ol li {
  margin-bottom: 6px
}

.fliesstext a {
  color: var(--navy-hell)
}

.fliesstext strong {
  color: var(--navy)
}

.fliesstext h2,
.fliesstext h3,
.fliesstext h4 {
  margin: var(--raum-3) 0 var(--raum-1)
}

.fliesstext h3 {
  font-size: 19px
}

.fliesstext table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--raum-2)
}

.fliesstext td,
.fliesstext th {
  padding: 8px 12px 8px 0;
  border-bottom: 1px solid var(--linie-zart);
  text-align: left;
  vertical-align: top
}

/* Wertstoffgruppen: zwei oder drei Spalten, je nachdem wie viele Listenfelder
   gefuellt sind. Die Ueberschrift der Gruppe kommt als <strong> aus dem Editor. */
.gruppen--zwei {
  grid-template-columns: repeat(2, 1fr)
}

.gruppen--drei {
  grid-template-columns: repeat(3, 1fr)
}

.gruppe p {
  margin-bottom: var(--raum-1)
}

.gruppe p strong {
  display: block;
  color: var(--navy);
  font-size: 19px;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding-bottom: var(--raum-1);
  margin-bottom: var(--raum-2);
  border-bottom: 3px solid var(--navy)
}

.gruppe p+ul {
  margin-top: 0
}

.gruppe ul {
  list-style: none;
  margin: 0 0 var(--raum-3)
}

.gruppe ul:last-child {
  margin-bottom: 0
}

.gruppe li {
  position: relative;
  padding: 5px 0 5px 22px;
  font-size: 16px
}

.gruppe li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 15px;
  border: 5px solid transparent;
  border-left-color: var(--navy)
}

/* Postfachhinweis: Inhalt kommt als Absaetze aus dem Editor */
.postfachhinweis p {
  margin: 0 0 var(--raum-1);
  text-align: left;
  color: var(--text-hell);
  font-size: 15.5px;
  line-height: 1.5
}

.postfachhinweis p:first-child {
  color: var(--navy);
  font-size: 16.5px;
  margin-bottom: var(--raum-2)
}

.postfachhinweis p:last-child {
  margin-bottom: 0
}

.postfachhinweis strong {
  color: var(--navy)
}

.postfachhinweis a {
  color: var(--navy);
  font-weight: 700;
  text-decoration: none;
  word-break: break-word
}

.postfachhinweis a:hover {
  text-decoration: underline
}

/* Zertifikate im Fussbereich als kleine Vorschaubilder */
.fuss .zertifikate {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: var(--raum-3);
  border: 0
}

.fuss .zertifikat-bild {
  display: block;
  background: #fff;
  padding: 6px
}

.fuss .zertifikat-bild img {
  height: 62px;
  width: auto
}

/* Rechtstexte auf den Unterseiten */
.rechtstext .abschnitt {
  padding: var(--abschnitt) 0
}

.rechtstext .abschnitt .inhalt {
  max-width: 880px
}

.rechtstext .titel {
  text-align: left;
  margin-left: 0
}

.rechtstext .titel .strich {
  margin-left: 0
}

/* Die drei Werke bleiben redaktionell pflegbare Text-&-Medien-Kinder im
   Multicontent. Die Ausgabe folgt hier der Bildreihe der Live-Seite. */
#c1200 {
  display: flow-root;
  width: 100%;
  max-width: var(--breite);
  margin: var(--raum-5) auto 0;
  padding: 0 36px;
  float: none;
  clear: both;
  box-sizing: border-box
}

#c1200 .col-33>.frame {
  width: 100%;
  float: none
}

#c1200>.rahmen {
  width: 100%;
  max-width: none
}

#c1200>.rahmen>header {
  display: none
}

#c1200 .tx_cn-columns {
  width: 100%;
  float: none
}

#c1200 .tx_cn-columns>.row.equalize {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--raum-3);
  width: 100%;
  padding-top: 18px;
  float: none;
  clear: both
}

#c1200 .tx_cn-columns>.row.equalize>.col-33 {
  float: none;
  width: auto;
  min-width: 0;
  min-height: 399px;
  display: flex;
  flex-direction: column
}

#c1200 .col-33>.frame,
#c1200 .col-33>.frame>.rahmen {
  display: contents
}

#c1200 .col-33>.frame>.rahmen>.ce-textpic {
  display: contents;
  float: none
}

#c1200 .col-33 .ce-gallery {
  order: 1;
  width: 100%;
  float: none;
  margin: 0
}

#c1200 .ce-outer,
#c1200 .ce-inner,
#c1200 .ce-column {
  float: none
}

#c1200 .col-33 .ce-column,
#c1200 .col-33 figure.image {
  width: 100%;
  float: none;
  margin: 0
}

#c1200 .col-33 .ce-gallery img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover
}

#c1200 .col-33 header {
  order: 2;
  margin: var(--raum-2) 0 4px
}

#c1200 .col-33 header h3 {
  margin: 0 0 4px;
  color: var(--navy);
  font-size: 20px;
  line-height: 1.7;
  text-transform: uppercase;
  letter-spacing: .04em
}

#c1200 .col-33 .ce-bodytext {
  order: 3;
  padding: 0;
  color: var(--text-hell);
  font-size: 15.5px;
  line-height: 1.55
}

#c1204 {
  display: block;
  clear: both;
  width: 100%;
  max-width: calc(var(--breite) - 72px);
  margin: var(--raum-5) auto 0;
  padding: var(--raum-4) 0 0;
  float: none;
  box-sizing: border-box;
  border-top: 1px solid var(--linie);
  text-align: center
}

#c1204>.rahmen {
  width: 100%;
  max-width: none
}

#c1204 header h3 {
  margin: 0;
  color: var(--navy-hell);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .2em;
  line-height: 1.7;
  text-transform: uppercase
}

#c1204 .ce-textpic {
  width: 100%;
  margin: var(--raum-3) auto 0;
  padding: 0;
  float: none;
  clear: both;
  box-sizing: border-box;
  text-align: center
}

#c1204 .ce-gallery,
#c1204 .ce-outer,
#c1204 .ce-inner,
#c1204 .ce-row,
#c1204 .ce-column,
#c1204 figure {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  float: none
}

#c1204 .ce-gallery img {
  display: block;
  width: 100%;
  max-width: 880px;
  height: auto;
  margin: 0 auto
}

#c1310 .abschnitt {
  padding-bottom: 0
}

#c1314 {
  margin-top: 90px
}

#c1314>.rahmen {
  width: 100%;
  max-width: none
}

.frame-vollbreit .streifen {
  position: relative;
  left: auto;
  width: 100%;
  margin-left: 0
}

.onepage-section>.frame:not(.frame-vollbreit) {
  width: 100%;
  max-width: var(--breite);
  margin-right: auto;
  margin-left: auto;
  float: none;
  clear: both
}

.onepage-section>.frame:not(.frame-vollbreit)>.rahmen {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 36px
}

/* Team: die vier redaktionellen Kontakte pro Gruppe laufen im selben Raster
   wie die Live-Seite. Gruppenüberschriften bleiben eigene Inhaltselemente. */
#c1100,
#c1111,
#c1112 {
  width: 100%;
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 36px;
  float: none;
  clear: both;
  box-sizing: border-box
}

#c1100 .tx_cn-columns,
#c1111 .tx_cn-columns,
#c1112 .tx_cn-columns {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--raum-4) var(--raum-3);
  width: 100%;
  float: none;
  clear: both
}

#c1100 .tx_cn-columns>.row.equalize,
#c1111 .tx_cn-columns>.row.equalize,
#c1112 .tx_cn-columns>.row.equalize {
  display: contents
}

#c1100 .col-33,
#c1111 .col-33,
#c1112 .col-33 {
  float: none;
  width: auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding-bottom: var(--raum-2);
  border-bottom: 1px solid var(--linie)
}

#c1100 .col-33>.frame,
#c1111 .col-33>.frame,
#c1112 .col-33>.frame,
#c1100 .col-33>.frame>.rahmen,
#c1111 .col-33>.frame>.rahmen,
#c1112 .col-33>.frame>.rahmen {
  display: contents
}

#c1100 .col-33>.frame,
#c1111 .col-33>.frame,
#c1112 .col-33>.frame {
  float: none
}

#c1100 .col-33>.ce-textpic,
#c1111 .col-33>.ce-textpic,
#c1112 .col-33>.ce-textpic {
  display: contents
}

#c1100 .col-33 header,
#c1111 .col-33 header,
#c1112 .col-33 header {
  order: 1;
  margin: 0 0 4px
}

#c1100 .col-33>header h3,
#c1111 .col-33>header h3,
#c1112 .col-33>header h3 {
  margin: 0;
  color: var(--navy);
  font-size: 16.5px;
  text-transform: uppercase;
  letter-spacing: .03em
}

#c1100 .col-33 .ce-bodytext,
#c1111 .col-33 .ce-bodytext,
#c1112 .col-33 .ce-bodytext {
  order: 2;
  padding: 0;
  color: var(--text-hell);
  font-size: 14.5px;
  line-height: 1.55
}

#c1100 .col-33 .ce-bodytext p,
#c1111 .col-33 .ce-bodytext p,
#c1112 .col-33 .ce-bodytext p {
  margin: 0
}

#c1100 .col-33 .ce-bodytext a,
#c1111 .col-33 .ce-bodytext a,
#c1112 .col-33 .ce-bodytext a {
  color: var(--navy-hell);
  text-decoration: none;
  word-break: break-word
}

#c1100 .col-33 .ce-bodytext a:hover,
#c1111 .col-33 .ce-bodytext a:hover,
#c1112 .col-33 .ce-bodytext a:hover {
  text-decoration: underline
}

#c1312,
#c1313 {
  width: 100%;
  max-width: var(--breite);
  margin: var(--raum-5) auto 0;
  padding: var(--raum-4) 36px 0;
  float: none;
  clear: both;
  box-sizing: border-box;
  border-top: 1px solid var(--linie-zart)
}

#c1312>.rahmen,
#c1313>.rahmen {
  width: 100%;
  max-width: none
}

#c1312 .personengruppe,
#c1313 .personengruppe {
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0
}

#c1005 .titel>p:first-child,
#c1005 .titel>p:last-child {
  display: none
}

#c1005 .titel>p:has(>.unter),
#c1005 .titel>p:has(>.strich) {
  margin: 0
}

#c1005 .abschnitt {
  padding-bottom: 14px
}

#willkommen .streifen {
  margin-top: 0
}

#wertstoffe .streifen {
  margin-top: 16px
}

#alugranulate .abschnitt {
  padding-bottom: calc(var(--abschnitt) - 16px)
}

#team {
  padding-bottom: 90px
}

#c1100 .col-33,
#c1111 .col-33,
#c1112 .col-33 {
  min-height: 105px
}

#c1312+#c1111,
#c1313+#c1112 {
  margin-top: 26px
}

/* Die Willkommensbilder laufen als redaktionell pflegbarer cn_multicontent-
   Slider. Navigation und Punkte werden von Owl erzeugt, nicht im RTE gepflegt. */
#c1001 {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  float: none;
  clear: both
}

#c1001>.rahmen {
  width: 100%;
  max-width: none;
  height: clamp(420px, 62vh, 660px);
  margin: 0
}

#c1001 .owl-carousel {
  height: 100%;
  overflow: hidden
}

#c1001 .owl-stage-outer,
#c1001 .owl-stage,
#c1001 .owl-item {
  height: 100%
}

#c1001 .owl-item {
  position: relative;
  background: var(--navy-tief)
}

#c1001 .owl-item .folie {
  position: absolute;
  inset: 0;
  height: 100%
}

#c1001 .owl-item .ce-textpic {
  position: absolute;
  inset: 0;
  height: 100%;
  margin: 0
}

#c1001 .owl-item .ce-gallery,
#c1001 .owl-item .ce-outer,
#c1001 .owl-item .ce-inner,
#c1001 .owl-item .ce-row,
#c1001 .owl-item .ce-column,
#c1001 .owl-item figure.image {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0
}

#c1001 .owl-item .ce-gallery {
  position: absolute;
  inset: 0
}

#c1001 .owl-item .ce-gallery img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center
}

#c1001 .owl-item .folie>header {
  position: absolute;
  z-index: 3;
  top: calc(50% - 102px);
  left: max(24px, calc((100vw - var(--breite))/2 + 36px));
  width: 303px;
  max-width: calc(100% - 48px);
  margin: 0;
  padding: 32px 30px 0;
  background: rgba(247, 249, 251, .66);
  text-align: center
}

#c1001 .owl-item .folie>header h2,
#c1001 .owl-item .folie>header h3 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1;
  letter-spacing: -.015em
}

#c1001 .owl-item .ce-bodytext {
  position: absolute;
  z-index: 3;
  top: calc(50% - 14px);
  left: max(24px, calc((100vw - var(--breite))/2 + 36px));
  width: 303px;
  max-width: calc(100% - 48px);
  margin: 0;
  padding: 6px 30px 35px;
  background: rgba(247, 249, 251, .66);
  color: var(--navy);
  text-align: center
}

#c1001 .owl-item .ce-bodytext p {
  margin: 0;
  color: var(--navy);
  font-size: 14.5px;
  line-height: 1.55;
  text-transform: uppercase;
  letter-spacing: .14em
}

#c1001 .owl-item .ce-bodytext strong {
  display: block;
  margin-top: 6px;
  color: var(--navy);
  font-size: clamp(19px, 2.2vw, 28px);
  line-height: 1.2
}

#c1001 .owl-item .ce-bodytext span {
  display: block;
  margin-top: 15px;
  color: var(--text-hell);
  font-size: 14.5px;
  line-height: 1.55;
  letter-spacing: .14em
}

@supports (backdrop-filter:blur(3px)) {

  #c1001 .owl-item .folie>header,
  #c1001 .owl-item .ce-bodytext {
    background: rgba(247, 249, 251, .52);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px)
  }
}

#c1001 .owl-nav {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0 18px;
  transform: translateY(-50%);
  pointer-events: none
}

#c1001 .owl-nav button.owl-prev,
#c1001 .owl-nav button.owl-next {
  width: 48px;
  height: 48px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: rgba(0, 27, 59, .48);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  pointer-events: auto;
  transition: background .25s var(--weich)
}

#c1001 .owl-nav button.owl-prev:hover,
#c1001 .owl-nav button.owl-next:hover {
  background: rgba(0, 27, 59, .82)
}

#c1001 .owl-dots {
  position: absolute;
  right: 0;
  bottom: 22px;
  left: 0;
  margin: 0;
  line-height: 0;
  text-align: center
}

#c1001 .owl-dots .owl-dot span {
  width: 10px;
  height: 10px;
  margin: 6px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: transparent;
  opacity: .9
}

#c1001 .owl-dots .owl-dot.active span {
  background: #fff;
  transform: scale(1.2)
}

#c1001 .owl-nav button:focus-visible,
#c1001 .owl-dots .owl-dot:focus-visible span {
  outline: 2px solid #fff;
  outline-offset: 3px
}

/* Werte wie auf neu.andorfer.de; die darunter liegenden T14-Regeln ergänzen
   ausschließlich die TYPO3-Redaktionsinhalte und Cookieman-Integration. */
html,
body {
  overflow-x: clip
}

/* Wiederverwendbare Rahmen fuer die redaktionellen Inhaltselemente. */
.onepage-section {
  padding: var(--abschnitt) 0
}

#inhaltsbereich .onepage-section>.frame+.frame {
  margin-top: var(--raum-4)
}

#inhaltsbereich .onepage-section>.frame-abschnittstitel+.frame {
  margin-top: 0
}

#willkommen {
  padding-bottom: 0
}

#willkommen>#c1314 {
  margin-top: var(--abschnitt)
}

.frame-abschnitt {
  padding: var(--abschnitt) 0
}

.frame-abschnitt>.rahmen {
  width: 100%;
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 36px
}

.frame-abschnittstitel {
  text-align: center;
  margin-bottom: var(--raum-5)
}

.frame-abschnittstitel header {
  margin: 0 auto var(--raum-1)
}

.frame-abschnittstitel header h2,
.frame-kennzahlen header h2 {
  font-size: clamp(29px, 3.8vw, 44px);
  text-transform: uppercase;
  letter-spacing: .015em
}

.frame-abschnittstitel .ce-bodytext {
  max-width: 820px;
  margin: 0 auto;
  color: var(--navy-hell);
  text-transform: uppercase;
  letter-spacing: .07em;
  line-height: 1.4
}

.frame-abschnittstitel .ce-bodytext p {
  margin: 0
}

.frame-abschnittstitel>.rahmen:after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: var(--navy);
  margin: var(--raum-3) auto 0
}

.frame-kennzahlen>.rahmen>header {
  text-align: center;
  margin-bottom: var(--raum-1)
}

.frame-kennzahlen {
  margin-bottom: var(--raum-5)
}

.frame-kennzahlen .ce-bodytext {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--weiss)
}

.frame-kennzahlen .ce-bodytext p {
  padding: var(--raum-3);
  margin: 0;
  text-align: center
}

.frame-kennzahlen .ce-bodytext p:first-child {
  grid-column: 1/-1;
  padding: 0 0 var(--raum-5);
  color: var(--navy-hell);
  text-transform: uppercase;
  letter-spacing: .07em
}

.frame-kennzahlen .ce-bodytext p:first-child:after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: var(--navy);
  margin: var(--raum-3) auto 0
}

.frame-kennzahlen .ce-bodytext p:nth-child(n+2) {
  border: 1px solid var(--linie)
}

.frame-kennzahlen .ce-bodytext p:nth-child(n+3) {
  margin-left: -1px
}

.frame-kennzahlen .ce-bodytext strong {
  display: block;
  color: var(--navy);
  font-size: 29px;
  line-height: 1.15
}

.frame-textbild .ce-textpic {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--raum-5);
  align-items: center
}

.frame-textbild .ce-textpic:not(:has(.ce-gallery)) {
  display: block
}

.frame-textbild .zweispalt>p {
  margin: 0
}

.frame-textbild .ce-gallery,
.frame-textbild .ce-bodytext {
  width: auto;
  min-width: 0;
  float: none;
  margin: 0
}

.frame-textbild .ce-gallery img {
  width: 100%;
  height: auto
}

.frame-textbild .zweispalt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--raum-5);
  align-items: center;
  margin: 0
}

.frame-textbild .zweispalt img {
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover
}

.frame-textbild+.frame-zwischenueberschrift {
  margin-top: var(--raum-5)
}

.frame-textbild+.frame-zertifikate {
  margin-top: var(--raum-3)
}

.frame-zwischenueberschrift {
  text-align: center;
  margin: var(--raum-4) 0 var(--raum-3)
}

.frame-zwischenueberschrift header {
  margin: 0
}

.frame-zwischenueberschrift header h3 {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--navy-hell)
}

.frame-wertstoffgruppen .tx_cn-columns .row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--linie);
  background: var(--weiss)
}

.frame-wertstoffgruppen .tx_cn-columns .row>[class^="col-"] {
  width: auto;
  float: none;
  min-width: 0;
  margin: 0;
  padding: 0
}

.frame-wertstoffgruppen .tx_cn-columns .row>[class^="col-"]+[class^="col-"]>.frame-type-textmedia>.rahmen {
  border-left: 1px solid var(--linie)
}

.frame-wertstoffgruppen .frame-type-textmedia>.rahmen {
  height: 100%;
  padding: var(--raum-4) var(--raum-3)
}

.frame-wertstoffgruppen .frame-type-textmedia header h3 {
  font-size: 19px;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding-bottom: var(--raum-1);
  border-bottom: 3px solid var(--navy)
}

.frame-wertstoffgruppen .frame-type-textmedia .ce-bodytext ul {
  list-style: none;
  margin: 0
}

.frame-wertstoffgruppen .frame-type-textmedia .ce-bodytext li {
  position: relative;
  padding: 5px 0 5px 22px;
  font-size: 16px
}

.frame-wertstoffgruppen .frame-type-textmedia .ce-bodytext li:before {
  content: "";
  position: absolute;
  left: 2px;
  top: 15px;
  border: 5px solid transparent;
  border-left-color: var(--navy)
}

.frame-zertifikate>.rahmen>header {
  margin-bottom: var(--raum-2)
}

.frame-zertifikate .zertifikate {
  margin-top: 0
}

.frame-produktgitter .tx_cn-columns .frame-type-textmedia,
.frame-vorteile .tx_cn-columns .frame-type-textmedia {
  height: 100%;
  padding: var(--raum-3);
  text-align: center;
  border: 1px solid var(--linie);
  background: var(--weiss)
}

.frame-produktgitter .tx_cn-columns .frame-type-textmedia header {
  margin-bottom: var(--raum-2)
}

.frame-produktgitter .tx_cn-columns .frame-type-textmedia .ce-bodytext img {
  width: 100%;
  max-width: 140px;
  height: auto;
  margin: 0 auto
}

.frame-produktgitter .koernungen {
  margin-bottom: 0
}

.frame-produktgitter+.frame-zwischenueberschrift {
  margin-top: var(--raum-5)
}

.frame-vorteile .tx_cn-columns .frame-type-textmedia header {
  margin: 0
}

.frame-vorteile+.frame-bildgalerie {
  margin-top: var(--raum-5)
}

.frame-bildgalerie .karussell {
  position: relative;
  margin-top: 0;
  padding: 0 58px
}

.frame-bildgalerie .karussell .spur.owl-carousel {
  position: static;
  display: block;
  gap: 0;
  overflow: visible;
  padding: 0;
  scroll-snap-type: none
}

.frame-bildgalerie .karussell .spur.owl-carousel li {
  flex: none;
  scroll-snap-align: none
}

.frame-bildgalerie .owl-item {
  overflow: hidden;
  cursor: zoom-in
}

.frame-bildgalerie .owl-item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: transform .5s var(--weich)
}

.frame-bildgalerie .owl-item:hover img {
  transform: scale(1.05)
}

.frame-bildgalerie .owl-nav {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  margin: 0;
  transform: translateY(-50%);
  pointer-events: none
}

.frame-bildgalerie .owl-nav button.owl-prev,
.frame-bildgalerie .owl-nav button.owl-next {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: rgba(0, 27, 59, .82);
  color: var(--weiss);
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
  opacity: .92;
  pointer-events: auto;
  transition: background .2s var(--weich), opacity .2s var(--weich)
}

.frame-bildgalerie .owl-nav button.owl-prev:hover,
.frame-bildgalerie .owl-nav button.owl-next:hover {
  background: var(--navy);
  opacity: 1
}

.frame-bildgalerie .owl-nav button:focus-visible {
  outline: 2px solid var(--navy-hell);
  outline-offset: 3px
}

.frame-bildgalerie .owl-nav button.disabled {
  opacity: .35;
  cursor: default
}

.frame-vollbreit {
  position: relative;
  left: 50%;
  width: 100vw;
  max-width: none;
  margin-left: -50vw;
  float: none;
  clear: both
}

.frame-vollbreit>.rahmen {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0
}

.frame-vollbreit .streifen {
  width: 100%;
  margin: 0
}

/* Einheitlicher Abschnittsfluss, auch fuer die importierten T14-Inhalte. */
:root {
  --kunde-blue-dark: var(--navy);
  --kunde-text-dark: var(--text)
}

.onepage-section:is(#wertstoffe, #qualitaet, #kontakt) {
  background: var(--flaeche)
}

.onepage-section .tx_cn-columns {
  float: none
}

.frame-wertstoffgruppen {
  display: flow-root
}

.onepage-section>.frame>.rahmen .abschnitt {
  padding: 0
}

.onepage-section>.frame>.rahmen .inhalt {
  max-width: none;
  padding: 0
}

#c1200>.rahmen,
#c1100>.rahmen,
#c1111>.rahmen,
#c1112>.rahmen,
#c1312>.rahmen,
#c1313>.rahmen {
  padding: 0
}

#c1200 .tx_cn-columns>.row.equalize {
  padding-top: 0
}

#c1200 .tx_cn-columns>.row.equalize>.col-33 {
  min-height: 0
}

#c1100 .col-33>.frame>.rahmen>.ce-textpic,
#c1111 .col-33>.frame>.rahmen>.ce-textpic,
#c1112 .col-33>.frame>.rahmen>.ce-textpic {
  display: contents;
  float: none
}

#c1100 .col-33 header h3,
#c1111 .col-33 header h3,
#c1112 .col-33 header h3 {
  margin: 0;
  color: var(--navy);
  font-size: 16.5px;
  text-transform: uppercase;
  letter-spacing: .03em
}

.frame-textspalten .ce-bodytext {
  column-count: 2;
  column-gap: var(--raum-5)
}

.frame-textspalten .ce-bodytext p {
  break-inside: avoid
}

#inhaltsbereich .onepage-section>.frame-kennzahlen+.frame,
#inhaltsbereich .onepage-section>.frame-textbild+.frame-zwischenueberschrift,
#inhaltsbereich .onepage-section>.frame-produktgitter+.frame-zwischenueberschrift,
#inhaltsbereich .onepage-section>.frame.frame-bildgalerie,
#inhaltsbereich .onepage-section>#c1200,
#inhaltsbereich .onepage-section>#c1204,
#inhaltsbereich .onepage-section>#c1312,
#inhaltsbereich .onepage-section>#c1313 {
  margin-top: var(--raum-5)
}

#inhaltsbereich .onepage-section>.frame-zwischenueberschrift+.frame,
#inhaltsbereich .onepage-section>.frame-textbild+.frame-zertifikate,
#inhaltsbereich .onepage-section>#c1312+.frame,
#inhaltsbereich .onepage-section>#c1313+.frame {
  margin-top: var(--raum-3)
}

#inhaltsbereich .onepage-section>#c1005+.frame {
  margin-top: 0
}

.onepage-section:has(>.frame-vollbreit:last-child) {
  padding-bottom: 0
}

#inhaltsbereich .onepage-section>.frame-vollbreit:last-child {
  margin-top: var(--abschnitt)
}

#inhaltsbereich .frame-vollbreit .streifen {
  margin-top: 0
}

#c1001 .owl-item .folie header {
  position: absolute;
  z-index: 3;
  top: calc(50% - 102px);
  left: max(24px, calc((100vw - var(--breite))/2 + 36px));
  width: 303px;
  max-width: calc(100% - 48px);
  margin: 0;
  padding: 32px 30px 0;
  background: rgba(247, 249, 251, .66);
  text-align: center
}

#c1001 .owl-item .folie header h2,
#c1001 .owl-item .folie header h3 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1;
  letter-spacing: -.015em
}

#c1001 .owl-item .ce-bodytext {
  background: rgba(247, 249, 251, .66)
}

@supports (backdrop-filter:blur(3px)) {

  #c1001 .owl-item .folie header,
  #c1001 .owl-item .ce-bodytext {
    background: rgba(247, 249, 251, .52);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px)
  }
}

.frame-wertstoffgruppen .tx_cn-columns .row>[class^="col-"]>.frame {
  height: 100%
}

.frame-wertstoffgruppen .frame-type-textmedia header {
  margin-bottom: var(--raum-2)
}

.frame-bildgalerie .owl-nav button.owl-prev,
.frame-bildgalerie .owl-nav button.owl-next {
  background: var(--navy)
}

#c1200 .col-33 header {
  display: flex;
  flex-direction: column;
  align-items: flex-start
}

#c1200 .col-33 header h4 {
  order: -1;
  background: var(--navy);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: 4px 10px;
  margin: 0 0 var(--raum-1)
}

#c1001 .owl-dots .owl-dot {
  display: inline-block;
  border: 0;
  background: transparent;
  padding: 0
}

#c1001 .owl-dots .owl-dot span {
  display: inline-block
}