/* Layout-Korrekturen (Nico, 06.11.2026). Wird nach den Komponenten-Styles
   geladen und gilt seitenweit. */

/* 1) Fußzeile: lange Kontext-Links (z. B. "Themen-Hub Kellerabdichtung und
      Bautrocknung") liefen einzeilig in die Nachbarspalte. Jetzt Umbruch. */
@media (min-width: 64rem) {
  footer.fz .fz-spalte.fz-kontext a[data-astro-cid-efzrqevc], footer .fz-spalte.fz-kontext a {
    white-space: normal;
    display: inline-block;
    max-width: 100%;
  }
}

/* 2) Mitlaufende Box "Fachbetrieb finden": nicht oben an der Kopfleiste
      kleben, sondern ruhig in der Bildschirmmitte mitlaufen. */
@media (min-width: 1100px) {
  main .abs-innen.mlc-wrap, body .abs-innen.mlc-wrap {
    grid-template-columns: minmax(0, 1fr) 19rem;
  }
  body aside.mlc {
    top: max(calc(var(--kopf-hoehe, 68px) + 1.5rem), calc(50vh - 10rem));
  }
  body .mlc .mlc-karte {
    text-align: center;
  }
  body .mlc .mlc-haken {
    display: inline-block;
    text-align: left;
  }
}

/* 3) Zweispaltige Abschnitte mit Bild: Das Bild wurde auf die volle Höhe
      des Textes gezogen (endlos langer Streifen) und bekam die breitere
      Spalte. Jetzt: Text bekommt mehr Platz, Bild behält sein Format und
      läuft beim Lesen mit. */
@media (min-width: 52rem) {
  section.abs .abs-innen.abs-zwei {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    align-items: start;
  }
  section.abs .abs-innen.abs-zwei:has(> .abs-bild-zuerst) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
  }
  section.abs .abs-innen.abs-zwei > .abs-bild {
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: var(--abstand-m, 1rem);
    position: sticky;
    top: calc(var(--kopf-hoehe, 68px) + 1.5rem);
  }
  section.abs .abs-innen.abs-zwei > .abs-bild picture,
  section.abs .abs-innen.abs-zwei > .abs-bild .bild,
  section.abs .abs-innen.abs-zwei > .abs-bild .bild-platzhalter {
    height: auto;
    width: 100%;
  }
  section.abs .abs-innen.abs-zwei > .abs-bild .bild {
    border-radius: var(--radius-m, 12px);
  }
}

/* 4) Kontaktformular: kein Foto in der Seitenspalte neben dem Formular. */
.kf-bild {
  display: none;
}

/* 5) Leere Bildspalte (Abschnitt ohne Foto): keine leere rechte Spalte,
      Text nutzt die volle Breite. */
@media (min-width: 52rem) {
  section.abs .abs-innen.abs-zwei:not(:has(> .abs-bild img, > .abs-bild picture, > .abs-bild .bild-platzhalter)) {
    grid-template-columns: minmax(0, 1fr);
  }
  section.abs .abs-innen.abs-zwei > .abs-bild:not(:has(img, picture, .bild-platzhalter)) {
    display: none;
  }
}

/* 6) Abschnitte, deren Text schon ein eigenes Foto enthält: kein zweites
      Foto daneben (Bild neben Bild). Text läuft einspaltig, Foto im Text
      bleibt in ruhigem Querformat. */
@media (min-width: 52rem) {
  section.abs .abs-innen.abs-zwei:has(.abs-text .inhalt-medien) {
    grid-template-columns: minmax(0, 1fr);
  }
  section.abs .abs-innen.abs-zwei:has(.abs-text .inhalt-medien) > .abs-bild {
    display: none;
  }
}
/* Foto im Text rechts neben den Absätzen statt allein links (wirkt sonst
   linksbündig mit leerer rechter Hälfte). */
@media (min-width: 64rem) {
  section.abs .abs-text .inhalt-medien {
    float: right;
    width: 44%;
    margin: 0.3rem 0 1.25rem 2.5rem;
  }
  section.abs .abs-text::after {
    content: "";
    display: block;
    clear: both;
  }
}
section.abs .abs-text .inhalt-medien img {
  max-height: 26rem;
  object-fit: cover;
}