/* ==========================================================
   FLAT FALLBACK: Grid-Spans & Zustände (ohne Native Nesting)
   Aus style.css entnommen und entnestet
   ========================================================== */

/* --- Grid defaults in sections/footer --- */
section .col,
section .col-lg-6,
footer .col {
  min-width: 0;
  grid-column: 1 / -1;
}

/* =========================
   GRID-SPANS: general use
   ========================= */
@media (min-width: 768px) {
    section .col-lg-6  { grid-column:col-start 1 / span 2; }
    section .col-lg-6 + .col-lg-6 { grid-column:col-start 3 / span 2; }
}

@media (min-width: 1600px) {
    section .col-lg-6  { grid-column:col-start 1 / span 6; }
    section .col-lg-6 + .col-lg-6 { grid-column:col-start 7 / span 6; }
}

/* =========================
   GRID-SPANS: #claim
   ========================= */
@media (min-width: 1600px) {
  section#claim .col {
    grid-column: col-start 2 / span 10;
  }
}

/* =========================
   GRID-SPANS: #intro
   ========================= */
@media (min-width: 768px) {
  section#intro .col { grid-column: col-start 1 / span 2; }
  section#intro .col-image { grid-column: col-start 3 / span 2; }
}

@media (min-width: 1600px) {
  section#intro .col { grid-column: col-start 1 / span 5; }
  section#intro .col-image { grid-column: col-start 7 / span 5; }
}

/* =========================
   GRID-SPANS: #services
   ========================= */
@media (min-width: 768px) {
  section#services .col-products { grid-column: col-start 1 / span 2; }
  section#services .col-cleaning { grid-column: col-start 3 / span 2; }
}

@media (min-width: 1600px) {
  section#services .col { grid-column: col-start 2 / span 10; }
  section#services .col-products { grid-column: col-start 2 / span 5; }
  section#services .col-cleaning { grid-column: col-start 8 / span 4; }
  section#services .col-claim { grid-column: col-start 2 / span 5; }
  section#services .col-contact { grid-column: col-start 8 / span 4; }
}

/* =========================
   GRID-SPANS: #about
   ========================= */
@media (min-width: 768px) {
  section#about .col { grid-column: col-start 3 / span 2; order: 2; }
  section#about .col-vita { grid-column: col-start 1 / span 2; order: 1; }
}

@media (min-width: 1600px) {
  section#about .col { grid-column: col-start 8 / span 5; order: 2; }
  section#about .col-vita { grid-column: col-start 2 / span 4; order: 1; }
}

/* =========================
   GRID-SPANS: #kontakt
   ========================= */
@media (min-width: 768px) {
  section#kontakt .col { grid-column: col-start 2 / span 2; }
}

@media (min-width: 1600px) {
  section#kontakt .col { grid-column: col-start 2 / span 5; }
  section#kontakt .col-signe { grid-column: col-start 8 / span 1; }
  section#kontakt .col-address { grid-column: col-start 9 / span 4; }
}

/* =========================
   GRID-SPANS: Imprint
   ========================= */
@media (min-width: 1600px) {
    body.p4 section .col-lg-6  { grid-column:col-start 1 / span 3; }
    body.p4 section .col-lg-6 + .col-lg-6 { grid-column:col-start 5 / span 8; }
}

/* =========================
   GRID-SPANS: footer
   ========================= */
@media (min-width: 768px) {
  footer .col { grid-column: col-start 1 / span 2; }
  footer .col-legal { grid-column: col-start 3 / span 2; }
}

@media (min-width: 1600px) {
  footer .col { grid-column: col-start 1 / span 6; }
  footer .col-legal { grid-column: col-start 7 / span 6; }
}

/* ==========================================================
   ZUSTÄNDE / STATES (entnestet)
   ========================================================== */

/* Skip link focus */
.skip-link:focus {
  transform: translateY(0);
}

/* data-more show toggle */
div.data-more.show {
  position: static;
  width: auto;
  height: auto;
  overflow: initial;
  white-space: normal;
  clip-path: none;
}

/* btn-primary data-more label + hover */
.btn-primary.data-more::before {
  content: attr(data-content);
}
.btn-primary:hover {
  color: var(--color-primary);
  background: transparent;
}

/* Accordion open state */
section#services .accordion-item.is-open svg {
  display: none;
}
section#services .accordion-item.is-open .accordion-content {
  display: block;
}

/* "Back to top" show/hide */
.toTop.down {
  display: block;
}

/* Animate: isVisible toggles */
.move.left.isVisible,
.move.right.isVisible,
.move.up.isVisible,
.move.down.isVisible {
  transform: translate(0, 0);
}

/* ==========================================================
   BUGFIX: li::before ist absolute -> li braucht positioning
   ========================================================== */
section#services li {
  position: relative;
}