/* ============================================================
 * FLUID MOBILE OPTIMIZATIONS (< 360px)
 * Hinzugefügt zum Test der fluid-Lösung mit clamp()
 * Datei laden/entfernen über functions.php
 * ============================================================ */

/* --- 1) GLOBALE TYPOGRAFIE (< 360px fluid) --- */
@media (max-width: 359.98px) {

  /* Allgemeine Headings via Elementor-Widget */
  .elementor-widget-heading h1.elementor-heading-title {
    font-size: clamp(1.4rem, 6.8vw, 2.2rem);
    line-height: 1.15;
  }
  .elementor-widget-heading h2.elementor-heading-title {
    font-size: clamp(1.2rem, 5.8vw, 1.9rem);
    line-height: 1.2;
  }
  .elementor-widget-heading h3.elementor-heading-title,
  .elementor-widget-heading h4.elementor-heading-title {
    font-size: clamp(1.05rem, 5vw, 1.5rem);
    line-height: 1.25;
  }

  /* Text-Widgets */
  .elementor-widget-text-editor,
  .elementor-widget-text-editor p {
    font-size: clamp(.88rem, 4vw, 1rem);
    line-height: 1.45;
  }

  /* Buttons */
  .elementor-widget-button .elementor-button {
    font-size: clamp(.78rem, 3.6vw, 1rem);
    padding: clamp(.45em, 2.2vw, .9em) clamp(.8em, 3.5vw, 1.4em);
  }
}

/* --- 2) CAROUSEL-FIX: Hyphenation killen + Padding straffen --- */
@media (max-width: 359.98px) {

  /* Hyphenation aus → kein "erhal-ten" mehr */
  .e-n-carousel,
  .e-n-carousel *,
  .elementor-widget-n-carousel,
  .elementor-widget-n-carousel * {
    hyphens: manual !important;
    -webkit-hyphens: manual !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  /* Carousel-Cards (innere Container) */
  .carousel-card {
    padding: clamp(.8rem, 3vw, 1.5rem) !important;
  }

  .carousel-card .elementor-heading-title {
    font-size: clamp(1.05rem, 5vw, 1.6rem) !important;
    line-height: 1.2;
  }

  /* Navigations-Arrows leicht kleiner */
  .e-n-carousel .swiper-button-prev,
  .e-n-carousel .swiper-button-next {
    transform: scale(.75);
  }
}

/* --- 3) HEADER UNTER 360px KOMPAKTER (Top-Bar bleibt sichtbar) ---
 * Top-Bar (#top) mit Suche + Social + Cart bleibt erhalten,
 * Elemente werden nur dichter gepackt und skaliert.
 */
@media (max-width: 359.98px) {

  /* Top-Bar: Padding & Gap reduzieren, damit alles in 1 Row passt */
  .elementor-location-header > .elementor-element[id="top"] > .e-con-inner {
    padding: clamp(.3rem, 1.5vw, .6rem) clamp(.5rem, 2.5vw, 1rem) !important;
    gap: clamp(.3rem, 1.5vw, .6rem) !important;
    flex-wrap: nowrap !important;
  }

  /* Such-Feld: Breite begrenzen, Höhe reduzieren */
  .elementor-location-header .elementor-search-form__container {
    min-height: 32px !important;
    height: 32px !important;
  }
  .elementor-location-header .elementor-widget-search-form {
    flex: 0 1 auto !important;
    width: clamp(100px, 38vw, 160px) !important;
    max-width: 160px !important;
  }
  .elementor-location-header .elementor-search-form__input {
    font-size: .8rem !important;
    padding: .3rem .5rem !important;
  }

  /* Social Icons: kleiner & enger */
  .elementor-location-header .elementor-widget-social-icons {
    flex: 0 0 auto !important;
  }
  .elementor-location-header .elementor-social-icons-wrapper {
    gap: clamp(.2rem, 1vw, .4rem) !important;
  }
  .elementor-location-header .elementor-social-icon {
    width: 28px !important;
    height: 28px !important;
    font-size: .75rem !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .elementor-location-header .elementor-social-icon svg {
    width: 12px !important;
    height: 12px !important;
  }

  /* Cart im Top-Bar: kompakter */
  .elementor-location-header .elementor-menu-cart__toggle .elementor-button {
    padding: .25rem .4rem !important;
    font-size: .78rem !important;
  }

  /* Shop-Button im Main-Header kompakter */
  .elementor-location-header > .elementor-element[id="header"] .elementor-widget-button .elementor-button {
    padding: .4em .8em !important;
    font-size: .8rem !important;
  }

  /* Main-Header padding kompakter */
  .elementor-location-header > .elementor-element[id="header"] > .e-con-inner {
    padding-top: clamp(.5rem, 2vw, 1rem) !important;
    padding-bottom: clamp(.5rem, 2vw, 1rem) !important;
    gap: clamp(.3rem, 2vw, .8rem) !important;
  }
}

/* Unter 340px: Suche raus, Social+Cart bleiben */
@media (max-width: 339.98px) {
  .elementor-location-header .elementor-widget-search-form {
    display: none !important;
  }
}

/* --- 4) ALLGEMEINE WORT-BRUCH-REGEL gegen zerhackte Wörter --- */
@media (max-width: 359.98px) {
  .elementor-element {
    overflow-wrap: anywhere;
    word-break: normal;
  }
}

/* --- 5) GRID-CARDS: forced height KILLEN unter 360px ---
 * Original Regel: .grid-card { height: calc((100vw - 10px) * 0.38) !important }
 * → bei 320px nur ~117px hoch → Text & Buttons überlappen.
 * Fix: Höhe = content, aspect-ratio raus.
 */
@media (max-width: 359.98px) {

  .grid-card,
  .grid-card-large {
    height: auto !important;
    aspect-ratio: auto !important;
    min-height: 0 !important;
    padding: clamp(.8rem, 3.5vw, 1.2rem) !important;
  }

  /* Holder: Karten untereinander statt grid-tetris */
  .grid-card-holder {
    column-gap: 5px !important;
    row-gap: 8px !important;
  }

  /* Card-Buttons: nicht mehr absolut/floatend — natürlich am Boden via flex */
  .grid-card-large .card-button {
    position: static !important;
    transform: none !important;
    bottom: auto !important;
    left: auto !important;
    margin-top: auto !important;
    text-align: center !important;
  }

  /* "+" Buttons rechts aber im Flow */
  .card-button-small {
    margin-top: auto !important;
    position: static !important;
    padding: .25rem 0 .15rem !important;
  }

  /* "+" als runder Button mit Luft drumherum */
  .card-button-small .elementor-button {
    width: clamp(34px, 9vw, 42px) !important;
    height: clamp(34px, 9vw, 42px) !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
  }

  .card-button-small .elementor-button .elementor-button-content-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100%;
    height: 100%;
  }

  .card-button-small .elementor-button-icon svg {
    width: clamp(12px, 3.5vw, 16px) !important;
    height: clamp(12px, 3.5vw, 16px) !important;
  }

  /* Heading in Karten zähmen */
  .grid-card .elementor-heading-title,
  .grid-card-large .elementor-heading-title {
    font-size: clamp(1rem, 4.8vw, 1.4rem) !important;
    line-height: 1.2;
    margin: 0 0 .4em !important;
  }

  /* Text in Karten */
  .grid-card .elementor-widget-text-editor p,
  .grid-card-large .elementor-widget-text-editor p {
    font-size: clamp(.78rem, 3.4vw, .95rem) !important;
    line-height: 1.35;
    margin: 0 0 .5em !important;
  }

  /* Bei sehr schmal: Karten auf volle Breite (1 Spalte) — sicherer Lesefluss */
  @media (max-width: 359.98px) {
    .grid-card-holder .grid-card,
    .grid-card-holder .grid-card-large {
      width: 100% !important;
      flex: 0 0 100% !important;
    }
  }
}

/* Mosaik: Versetzt-Layout (WHOOP-Brick-Style) auf Mobile */
@media (max-width: 767px) {
  .grid-card-holder.e-grid,
  .grid-card-holder.e-con-full {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: none !important;
    grid-auto-rows: auto !important;
    grid-auto-flow: row !important;
    align-items: start !important;
    column-gap: 8px !important;
    row-gap: 8px !important;
  }
  .grid-card-holder.e-grid > *,
  .grid-card-holder.e-con-full > * {
    width: 100% !important;
    grid-area: auto !important;
    margin: 0 !important;
    align-self: start !important;
  }
  .grid-card-holder.e-grid > :nth-child(2n),
  .grid-card-holder.e-con-full > :nth-child(2n) {
    margin-top: 60px !important;
  }
}

@media (max-width: 767px) {
  /* Specificity-Bump via :not() — überschreibt Elementor-Inline-Inline-Stuff */
  .grid-card-holder:not(#x):not(#y) > .grid-card:not(#x):nth-child(2n),
  .grid-card-holder:not(#x):not(#y) > .grid-card-large:not(#x):nth-child(2n) {
    margin-top: 60px !important;
    transform: translateY(0) !important;
  }
}

/* OVERRIDE: Mosaik echtes Masonry via CSS-Multi-Column (statt grid+offset) */
@media (max-width: 767px) {
  .grid-card-holder.e-grid:not(#x):not(#y),
  .grid-card-holder.e-con-full:not(#x):not(#y) {
    display: block !important;
    column-count: 2 !important;
    column-gap: 8px !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
  }
  .grid-card-holder.e-grid:not(#x):not(#y) > *,
  .grid-card-holder.e-con-full:not(#x):not(#y) > * {
    display: block !important;
    width: 100% !important;
    margin: 0 0 8px 0 !important;
    grid-area: auto !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
    -webkit-column-break-inside: avoid !important;
  }
  /* Offset entfernen — Multi-Column macht den Versatz natürlich */
  .grid-card-holder:not(#x):not(#y) > .grid-card:not(#x):nth-child(2n),
  .grid-card-holder:not(#x):not(#y) > .grid-card-large:not(#x):nth-child(2n) {
    margin-top: 0 !important;
    transform: none !important;
  }
}