/* =====================================================================
   TIEDEMANN GaLaBau – Responsive-Fixes
   Wird NACH dem Webflow-CSS geladen und überschreibt gezielt die
   Regeln, die auf iPhone/Android/iPad/PC zu abgeschnittenen Texten
   und Bildern geführt haben.
   ===================================================================== */

/* ---------------------------------------------------------------
   1) Kein horizontales Scrollen / seitliches Abschneiden mehr
   --------------------------------------------------------------- */
html,
body {
  overflow-x: hidden;
}

/* ---------------------------------------------------------------
   2) Projekt-Karten: Höhe passt sich dem Inhalt an.
      Vorher: fixe Höhen (40vh / 30vh / 20vh / 15vh) mit
      overflow:hidden → Texte und Bilder wurden abgeschnitten.
   --------------------------------------------------------------- */
.card-big {
  height: auto !important;
  min-height: 40vh;
}

@media screen and (max-width: 991px) {
  .card-big {
    min-height: 36vh;
  }
}

@media screen and (max-width: 767px) {
  .card-big {
    min-height: 300px;
  }
}

/* ---------------------------------------------------------------
   3) Text-Kacheln (Einfahrten / Gartenbau / Rund ums Haus):
      Vorher wurden die Texte mit fixen Pixel-Margins (366px, 288px,
      200px …) nach oben aus der Karte geschoben und abgeschnitten.
      Jetzt sitzen sie sauber und auf jedem Gerät vollständig
      sichtbar unten in der Karte.
   --------------------------------------------------------------- */
.max-width-40ch,
.max-width-40ch.einfahrten,
.max-width-40ch.rundumshaus {
  margin-bottom: 28px !important;
  margin-right: 28px;
}

/* Lange Überschriften (z. B. "Rund ums Haus.") niemals abschneiden */
.heading-6,
.heading-6.dark_project {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  max-width: 100%;
}

/* ---------------------------------------------------------------
   4) Lesbarkeit der Beschreibungstexte auf kleinen Handys:
      Vorher wurde bei < 480px der dunkle Glas-Hintergrund entfernt
      und dunkler Text direkt auf das Foto gelegt → unlesbar.
   --------------------------------------------------------------- */
@media screen and (max-width: 479px) {
  .heading-6.kleinerer-text {
    color: #fff;
    background-color: #0000004d;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    text-align: left;
    border-radius: 7px;
    padding: 10px 16px;
  }
}

/* ---------------------------------------------------------------
   5) Karten-Hintergrundbilder: Bild füllt exakt die Karte
      (vorher ragte der Bild-Container 45 % über den unteren
      Kartenrand hinaus → unschöne, zufällige Bildausschnitte).
   --------------------------------------------------------------- */
.card-image {
  inset: 0% !important;
}

.card-image img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}

/* Foto-Kacheln (card-small) auf dem Handy nicht zu hoch */
@media screen and (max-width: 767px) {
  .card-small {
    height: 45vh;
  }
}

/* ---------------------------------------------------------------
   6) Große vw-Überschriften: sinnvolle Unter-/Obergrenzen,
      damit sie auf keinem Gerät zu groß oder zu klein werden.
   --------------------------------------------------------------- */
.heading-vw {
  font-size: clamp(2rem, 4.8vw, 4.5rem);
}

/* ---------------------------------------------------------------
   7) Startseite, Abschnitt "IHR GARTEN / QUALITÄT IM DETAIL":
      Vorher ein zweispaltiges Sticky-/Parallax-Layout mit seitlich
      versetzten Texten und Bildern. Jetzt: alles sauber zentriert
      und der Reihe nach untereinander.
   --------------------------------------------------------------- */
.sticky-wrapper {
  flex-flow: column !important;
  align-items: center;
  margin-top: 6rem;
  width: 100%;
}

/* Linkes Sticky-Bild wird zum normalen, vollbreiten Bild */
.sticky-component {
  position: relative !important;
  top: auto;
  width: 100% !important;
  height: auto !important;
  max-height: 70vh;
}

.sticky-component img {
  width: 100%;
  height: 100%;
  max-height: 70vh;
  object-fit: cover;
}

/* Rechte Spalte wird volle Breite */
.sticky-content {
  width: 100% !important;
  align-items: center !important;
  padding-bottom: 0;
}

/* Reihenfolge: Text zuerst, dann die zugehörigen Bilder */
.sticky-content > :nth-child(1) { order: 2; } /* großes Bild */
.sticky-content > :nth-child(2) { order: 1; } /* Text 1 */
.sticky-content > :nth-child(3) { order: 3; }
.sticky-content > :nth-child(4) { order: 4; }
.sticky-content > :nth-child(5) { order: 5; } /* Text 2 */
.sticky-content > :nth-child(6) { order: 6; }

/* Textblöcke: mittig, angenehme Lesebreite, linksbündiger Satz */
.sticky-text {
  width: min(100% - 3rem, 72ch);
  align-items: flex-start;
  margin: 4rem auto !important;
}

.content,
.content.max-width-34vw {
  max-width: none;
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
}

.sticky-paragraph {
  max-width: 65ch;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
}

/* Bilder: alle gleich behandelt - zentriert, volle Breite,
   feste Ausschnitthöhe, keine seitlichen Versätze mehr */
.sticky-big-image,
.sticky-small-image,
.sticky-small-image.apples,
.sticky-medium-image {
  align-self: center !important;
  width: min(100%, 1100px) !important;
  height: 60vh !important;
  margin: 0 auto 1.5rem !important;
  border-radius: .5rem;
  overflow: hidden;
}

.sticky-big-image img,
.sticky-small-image img,
.sticky-medium-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------------------------------------------------------------
   8) Über-uns-Seite: Karten, die NUR ein Foto enthalten
      (Familienfoto + Projektfoto). Vorher wurde das Foto per
      "cover" in eine fixe Kartenhöhe gequetscht → extremer
      Zoom-Ausschnitt und Überlappungen. Jetzt: Bild wird
      vollständig und in natürlicher Proportion angezeigt.
   --------------------------------------------------------------- */
.card-big.familybild,
.card-big:not(:has(.card-big-content)) {
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  display: block;
}

.card-big.familybild .card-image,
.card-big:not(:has(.card-big-content)) .card-image {
  position: relative !important;
  inset: auto !important;
}

.card-big.familybild .card-image img,
.card-big:not(:has(.card-big-content)) .card-image img {
  width: 100%;
  height: auto;
  max-height: 80vh;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Parallax-Verschiebungen deaktivieren (führten zu Lücken/Versatz) */
.image-parallax {
  transform: none !important;
  height: 100%;
}

@media screen and (max-width: 767px) {
  .sticky-big-image,
  .sticky-small-image,
  .sticky-small-image.apples,
  .sticky-medium-image {
    height: 40vh !important;
  }

  .sticky-text {
    margin: 2.5rem auto !important;
  }
}