/* Andorfer: Responsive Regeln und Druckansicht ausserhalb der Hauptnavigation. */

/* =========================================================
   MAX-WIDTH: 980px
   ========================================================= */

@media (max-width: 980px) {
  .personen {
    grid-template-columns: repeat(2, 1fr);
  }

  #c1100 .tx_cn-columns,
  #c1111 .tx_cn-columns,
  #c1112 .tx_cn-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================================================
   MAX-WIDTH: 900px
   ========================================================= */

@media (max-width: 900px) {

  .gruppen,
  .gruppen--zwei,
  .gruppen--drei {
    grid-template-columns: 1fr;
  }

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

  .zweispalt {
    grid-template-columns: 1fr;
    gap: var(--raum-4);
  }

  .kontaktraster {
    grid-template-columns: 1fr;
    gap: var(--raum-4);
  }

  #kontakt .tx_cn-columns>.row {
    grid-template-columns: 1fr;
    gap: var(--raum-4);
  }

  .frame-textbild .ce-textpic {
    grid-template-columns: 1fr;
    gap: var(--raum-4);
  }

  .frame-textbild .zweispalt {
    grid-template-columns: 1fr;
    gap: var(--raum-4);
  }

  .frame-wertstoffgruppen .tx_cn-columns .row {
    grid-template-columns: 1fr;
  }

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

/* =========================================================
   MAX-WIDTH: 880px
   ========================================================= */

@media (max-width: 880px) {
  .spalten {
    column-count: 1;
  }

  .postfachhinweis ul {
    grid-template-columns: 1fr;
    gap: var(--raum-2);
  }

  .frame-textspalten .ce-bodytext {
    column-count: 1;
  }
}

/* =========================================================
   MAX-WIDTH: 860px
   ========================================================= */

@media (max-width: 860px) {
  .werke {
    grid-template-columns: 1fr;
  }

  .fuss .inhalt {
    grid-template-columns: 1fr;
    gap: var(--raum-3);
  }

  .footer-inhalte .frame-footer-spalten .tx_cn-columns>.row {
    grid-template-columns: 1fr;
    gap: var(--raum-3);
  }

  #c1200 .tx_cn-columns>.row.equalize {
    grid-template-columns: 1fr;
  }

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

  #c1200 .col-33 .ce-gallery img {
    aspect-ratio: 16/10;
  }
}

/* =========================================================
   MAX-WIDTH: 820px
   ========================================================= */

@media (max-width: 820px) {
  .koernungen {
    grid-template-columns: 1fr 1fr;
  }
}

/* =========================================================
   MAX-WIDTH: 760px
   ========================================================= */

@media (max-width: 760px) {
  .band .inhalt {
    grid-template-columns: 1fr;
  }

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

  .band div {
    padding: var(--raum-3) var(--raum-2);
  }

  .zahlenzeile {
    grid-template-columns: 1fr;
  }

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

  .vorteile {
    grid-template-columns: 1fr;
  }

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

  .frame-kennzahlen .ce-bodytext {
    grid-template-columns: 1fr;
  }

  .frame-kennzahlen .ce-bodytext p:first-child {
    grid-column: auto;
  }

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

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

  .fuss .tx_cn-columns .row .col-33,
  .fuss .tx_cn-columns .row .col-33>div {
    width: 100%;
    margin: 10px 0 !important;
    padding: 0;
  }

  body {
    hyphens: auto;
    -webkit-hyphens: auto;
    -webkit-hyphenate-limit-before: 4;
    -webkit-hyphenate-limit-after: 5;
  }

  @supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
    body {
      /* Safari-spezifische Regeln */
      hyphens: auto;
      -webkit-hyphens: auto;
      -webkit-hyphenate-limit-before: 4;
      -webkit-hyphenate-limit-after: 5;
    }
  }

  @media not all and (min-resolution: 0.001dpcm) {
    body {
      hyphens: auto;
      -webkit-hyphens: auto;
      -webkit-hyphenate-limit-before: 4;
      -webkit-hyphenate-limit-after: 5;
    }
  }

}

/* =========================================================
   MAX-WIDTH: 700px
   ========================================================= */

@media (max-width: 700px) {

  /* Variablen */

  :root {
    --abschnitt: 56px;
    --raum-5: 52px;
    --raum-4: 34px;
  }

  /* Allgemein */

  body {
    font-size: 16px;
    line-height: 1.65;
  }

  .inhalt {
    padding: 0 20px;
  }

  .titel {
    margin-bottom: var(--raum-4);
  }

  .onepage-section {
    padding: var(--abschnitt) 0;
  }

  .frame-abschnittstitel {
    margin-bottom: var(--raum-4);
  }

  .frame-abschnitt>.rahmen {
    padding-right: 20px;
    padding-left: 20px;
  }

  .onepage-section>.frame:not(.frame-vollbreit)>.rahmen {
    padding-right: 20px;
    padding-left: 20px;
  }

  /* Slider */

  #c1001>.rahmen {
    height: 380px;
  }

  #c1001 .owl-nav {
    display: none;
  }

  #c1001 .owl-item .folie>header {
    top: auto;
    bottom: 130px;
    left: 20px;
    width: calc(100% - 40px);
    max-width: none;
    padding: 16px 20px 0;
  }

  #c1001 .owl-item .ce-bodytext {
    top: auto;
    bottom: 58px;
    left: 20px;
    width: calc(100% - 40px);
    max-width: none;
    padding: 7px 20px 13px;
  }

  #c1001 .owl-dots {
    bottom: 12px;
  }

  #c1001 .owl-item .folie>header h2,
  #c1001 .owl-item .folie>header h3 {
    font-size: 32px;
  }

  #c1001 .owl-item .ce-bodytext p {
    font-size: 12px;
    letter-spacing: .1em;
  }

  #c1001 .owl-item .ce-bodytext strong {
    font-size: 18px;
  }

  #c1001 .owl-item .ce-bodytext span {
    font-size: 12px;
    letter-spacing: .1em;
    margin-top: 8px;
  }

  #c1001 .owl-item .folie header {
    top: auto;
    bottom: 130px;
    left: 20px;
    width: calc(100% - 40px);
    max-width: none;
    padding: 16px 20px 0;
  }

  #c1001 .owl-item .folie header h2,
  #c1001 .owl-item .folie header h3 {
    font-size: 32px;
  }

  /* Streifen und Band */

  .streifen img {
    height: 120px;
  }

  .band div {
    padding: 17px var(--raum-2);
  }

  .band b {
    font-size: 24px;
  }

  .band span {
    font-size: 12px;
    letter-spacing: .1em;
    margin-top: 3px;
  }

  #willkommen .streifen {
    margin-top: 0;
  }

  #wertstoffe .streifen {
    margin-top: 48px;
  }

  /* Körnungen */

  .koernung {
    padding: var(--raum-2) 10px;
  }

  .koernung img {
    max-width: 92px;
    margin-bottom: 10px;
  }

  .koernung b {
    font-size: 17px;
  }

  .koernungen {
    gap: 12px;
  }

  /* Bilder, Werke und Galerie */

  .karte {
    aspect-ratio: 1/1;
  }

  .werk img {
    aspect-ratio: 16/10;
  }

  .frame-bildgalerie .karussell {
    padding: 0 42px;
  }

  .frame-bildgalerie .owl-nav button.owl-prev,
  .frame-bildgalerie .owl-nav button.owl-next {
    width: 36px;
    height: 42px;
  }

  /* Abschnitte und Content-Elemente */

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

  #team {
    padding-bottom: 42px;
  }

  #c1100 .tx_cn-columns,
  #c1111 .tx_cn-columns {
    row-gap: 28px;
  }

  #c1112 .tx_cn-columns {
    row-gap: 25px;
  }

  #c1100,
  #c1111,
  #c1112 {
    padding-right: 20px;
    padding-left: 20px;
  }

  #c1204 {
    margin-top: 79px;
    padding-bottom: 36px;
  }

  #c1314 {
    margin-top: 56px;
  }

  #c1200,
  #c1204,
  #c1312,
  #c1313 {
    padding-right: 20px;
    padding-left: 20px;
  }

  /* Personen */

  #c1312 .personengruppe,
  #c1313 .personengruppe {
    padding-right: 20px;
    padding-left: 20px;
  }

  /* Kontakt */

  #kontakt>.frame>.rahmen {
    padding-right: 20px;
    padding-left: 20px;
  }

  /* Footer */

  .footer-inhalte>.frame-footerabschluss>.rahmen {
    padding-right: 20px;
    padding-left: 20px;
  }

  /* Nach oben */

  .hoch {
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
    width: 44px;
    height: 44px;
    font-size: 18px;
  }
}

/* =========================================================
   MAX-WIDTH: 620px
   ========================================================= */

@media (max-width: 620px) {
  .lupe .vor {
    left: 6px;
  }

  .lupe .weiter {
    right: 6px;
  }
}

/* =========================================================
   MAX-WIDTH: 560px
   ========================================================= */

@media (max-width: 560px) {
  .personen {
    grid-template-columns: 1fr;
  }

  #c1100 .tx_cn-columns,
  #c1111 .tx_cn-columns,
  #c1112 .tx_cn-columns {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   TOUCH-GERÄTE UND RESPONSIVE ANIMATIONEN
   ========================================================= */

@media (hover: none),
(max-width: 860px) {
  .auf {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================================
   REDUZIERTE ANIMATIONEN
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }

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

/* =========================================================
   DRUCKANSICHT
   ========================================================= */

@media print {

  .kopfleiste,
  .hoch,
  .streifen,
  .karussell,
  .karte {
    display: none;
  }

  body {
    font-size: 11pt;
    color: #000;
  }

  .band,
  .fuss,
  .seitentitel,
  .postfachhinweis {
    background: #fff;
    color: #000;
  }
}