/* Eigene Korrekturen am Plattform-Export.
   Quelle: templates/site-fixes.css → wird nach output/assets/css/ kopiert,
   eingebunden von inject-site-fixes.js. Hier landet NUR, was gegen die
   Live-Seite gemessen wurde — kein pauschales Override-Paket. */

/* ── 1. Foto-Collage „Warum wir?" vertikal ausrichten ─────────────────────
   Im Export klebt die Collage direkt unter dem Chevron der Hero-Sektion:
   12 px Luft darüber, 276 px Weißraum darunter (gemessen bei 1440 px).

   Warum eine Formel und kein fester Wert: Die Sektion ist 780 px hoch und das
   weiße Band zwischen oberem und unterem Chevron misst bei JEDER Breite
   229–705 px. Die Collage ist aber ein cover-Bild — sie skaliert mit der
   Viewport-Breite, die Kacheln werden also breiter UND höher (298 px bei
   1440, 531 px bei 2560). Der Versatz, der die Kacheln im Band zentriert,
   fällt deshalb linear mit der Breite: +105 px bei 1440, +80 bei 1600,
   +31 bei 1920, −67 bei 2560. Genau das leistet 326px − 15,354vw.
   (object-position wäre kein Ersatz: bei 1440 px beträgt der cover-Überstand
   nur 28 px — so viel Spielraum gibt es dort gar nicht.)

   Unter ~1387 px skaliert cover nicht mehr über die Breite, sondern über die
   Höhe (die Kacheln werden dann seitlich beschnitten). Der Maßstab ist dort
   konstant, also auch der nötige Versatz: 113 px.

   Die .con-kit-fade-box hat overflow:hidden — was unten übersteht (dort ist
   die Grafik ohnehin leer), wird sauber abgeschnitten. */
@media (min-width: 993px) {
  section[data-id="b9a1cdf6-1076-467a-b8f8-19855de2b0cc"] .con-kit-fade-box > img {
    transform: translateY(113px);
  }
}

@media (min-width: 1387px) {
  section[data-id="b9a1cdf6-1076-467a-b8f8-19855de2b0cc"] .con-kit-fade-box > img {
    transform: translateY(calc(326px - 15.354vw));
  }
}

/* ── 2. Cookie-Banner auf schmalen Schirmen ───────────────────────────────
   Der Export stellt Text und Buttons auch auf dem Handy nebeneinander: Der
   Text quetscht sich in 187 px Breite und wird dadurch 382 px hoch, der
   Banner insgesamt 515 px bei 664 px Viewport. Da er fixed am unteren Rand
   klebt, verdeckt er den kompletten Footer, bis jemand zustimmt.
   Deshalb: untereinander stapeln, Buttons in eine Reihe, den langen
   Rechtstext in der Höhe begrenzen und scrollbar machen (gekürzt werden darf
   er nicht — er muss vollständig lesbar bleiben).

   Die Selektoren wiederholen bewusst die Banner-Klasse: Der Export stapelt die
   Buttons mit `.con-kit-component-cookie-banner .…__button-group` (zwei
   Klassen) — eine einklassige Regel verliert dagegen. */
@media (max-width: 992px) {
  .con-kit-component-cookie-banner .con-kit-component-cookie-banner__section {
    flex-direction: column;
  }

  .con-kit-component-cookie-banner .con-kit-component-cookie-banner__section-content {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    padding: 16px 16px 8px;
    /* Der Rechtstext darf nicht gekürzt werden, aber auch nicht den halben
       Bildschirm füllen: begrenzen und scrollen — mit dem Verlauf am unteren
       Rand, den die Plattform für genau diesen Fall selbst mitbringt
       (.…__section-content--scroll). Hart abzuschneiden sähe nach Fehler aus. */
    max-height: 22vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-mask-image: linear-gradient(0deg, transparent, #000 18%, #000);
    mask-image: linear-gradient(0deg, transparent, #000 18%, #000);
  }

  /* Ohne das Zurücksetzen kollabiert die Button-Spalte in der Column-Achse
     (der Export setzt flex: 0, das wirkt hier auf die Höhe). */
  .con-kit-component-cookie-banner .con-kit-component-cookie-banner__section-left {
    flex: 0 0 auto;
    width: 100%;
    padding: 0 16px 16px;
  }

  .con-kit-component-cookie-banner .con-kit-component-cookie-banner__button-group {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }

  .con-kit-component-cookie-banner__button-group .con-kit-component-button {
    flex: 1 1 30%;
  }
}

/* ── 3. Trefferflächen der Social-Icons im Footer ─────────────────────────
   Facebook und Instagram sind dort nur 34×23 px groß — als freistehende
   Icon-Links auf dem Handy zu klein zum Treffen. Nur die Fläche wächst, das
   Icon selbst bleibt unverändert. Die übrigen kleinen Links („made by …",
   „Datenschutzerklärung") sind Fließtext-Links; die dürfen so bleiben. */
@media (max-width: 992px) {
  section[class*="fußzeile"] a.con-kit-component-button--type-transparent {
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }
}