.list-hero-cta{
    display: flex;
    margin: 0 auto;
  }
  h3 {
	font-size: 2rem !important;
}
  .btn-primary{
    margin: 0 auto;
  }
  .sw-search-wrap{
    position: sticky; top: 0; z-index: 1030; background: #fff; padding: 12px 0; border-bottom: 1px solid #eee;
  }
  .sw-search{ max-width: 980px; margin: 0 auto; padding: 0 16px; }
  .sw-searchbar{
    display: flex; align-items: center; gap: 10px; background: #f6f7fb; border: 1px solid #e6e7ee;
    border-radius: 14px; padding: 10px 14px; box-shadow: 0 2px 10px rgba(0,0,0,.04) inset;
  }
  .sw-searchbar input{
    border: none; outline: none; background: transparent; width: 100%;
    font-size: 16px; line-height: 22px;
  }

  .sw-filters{ display:flex; gap:10px; align-items:center; margin-top:10px; flex-wrap:wrap; }
  .sw-filters input[type="number"]{ width:160px; padding:10px 12px; border:1px solid #e6e7ee; border-radius:12px; }
  .sw-btn{ display:inline-block; padding:10px 16px; border-radius:12px; border:1px solid #dfe3ea; background:#fff; cursor:pointer; }

  .sw-results{ max-width: 1200px; margin: 16px auto; padding: 0 16px; }
  .sw-section-title{ margin:18px 0 10px; font-weight:600; color:#202736; }

  .sw-grid{
    display:grid; gap:16px;
    grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
  }

  /* Karten */
/* Karten ohne Border, nur leichter Shadow */
.sw-card,
.sw-list-card {
  border: none !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  transition: box-shadow 0.2s ease-in-out;
}

.sw-card:hover,
.sw-list-card:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}
  .sw-card:link, .sw-card:visited, .sw-card:hover, .sw-card:active { text-decoration: none; }

  .sw-thumb{
    height:180px; background:#fff; display:flex; align-items:center; justify-content:center;
    border-bottom:1px solid #f1f1f1;
  }
  .sw-thumb img{ max-width:100%; max-height:100%; object-fit:contain; }

  .sw-body{ padding:12px 14px; display:flex; flex-direction:column; gap:8px; }
  .sw-title{ font-size:14px; line-height:1.35; color:#1d2330; min-height:38px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .sw-price{ font-size:14px; font-weight:600; color:#005edf; }
  .sw-meta{ font-size:12px; color:#6b7280;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

  /* Listenkarte */
  .sw-list-card .sw-thumb{ height:140px; background:#fafafa; }

  .sw-empty, .sw-loading{ color:#6b7280; font-size:14px; padding:12px 0; }
  .sw-loading .spinner{ width:16px;height:16px;border:2px solid #ccc;border-top-color:#005edf;border-radius:50%;display:inline-block;animation:spin .8s linear infinite; vertical-align:middle; }
  @keyframes spin{to{transform:rotate(360deg)}}

  .sw-loadmore{ margin:16px 0 8px; text-align:center; }

              /* Container mit relativer Position */
             
 @media (min-width: 1024px) {
                .price{font-size:10pt; font-weight: bold; margin-top: 10px; }

                .coverimg img {
                    height: 550px !important; /* Hier die gewünschte kleinere Höhe */
                    object-fit: cover; /* Optional: Zuschneiden, falls das Bild nicht passt */
                    scale: 1.2;
                }
                .coverimg {
                    height: 550px !important; /* Hier die gewünschte kleinere Höhe */
                }
            }

        .profile-pic {
            width: 190px;
            height: 190px;
            border-radius: 50%;
            object-fit: cover;
            border: 5px solid white;
            position: sticky;
            bottom: -75px;
            left: 50%;
            transform: translateX(-50%);
            background-color: white;
            margin-top: -265px;
            z-index: 2;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* weicher, dezenter Schatten */
            border-radius: 50%; /* falls das Bild rund sein soll */
            transition: box-shadow 0.3s ease; /* optional: für smooth hover-effekt */
        }
        .description-section {
            text-align: center;
            padding-top: 100px;
            padding-bottom: 20px;
        }

        @media screen and (max-width: 768px) {
            .cover-container {
                margin-top:-35px;
            }
            .profile-pic {
                width: 160px;
                height: 160px;
                margin-top: -194px;
            }
            .headercontainer{
                margin-top: -60px;
            }
            .coverimg{
                height: 325px;
            }

            .card-text{
               font-size: 9pt;
            }
            }

            /* Mobile: immer 2 Kacheln nebeneinander */
@media (max-width: 768px) {
  .sw-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px; /* etwas kompakter auf Mobile */
  }
  .sw-thumb { 
    height: 150px; /* etwas kleiner für mobile Karten */
  }
  .sw-list-card .sw-thumb {
    height: 130px;
  }
  .sw-body {
    padding: 10px 12px;
    gap: 6px;
  }
  .sw-title {
    -webkit-line-clamp: 2; /* max 2 Zeilen Titel */
  }
  .sw-meta {
    -webkit-line-clamp: 2; /* max 2 Zeilen Beschreibung */
  }
}

/* ===== Modern Hero (Blur + Sharp Foreground) ===== */
/* ===== Hero: dynamische Höhe, kein Abschneiden ===== */
.list-hero{
  position: relative;
  width: 100%;
  /* statt fixer Höhe -> min-height + auto */
  min-height: 420px;
  height: auto;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
  margin: 32px 0 28px;
  background: #000;
}

.list-hero-blur{
  position: absolute; inset: 0;
  background-image: var(--bg);
  background-size: cover; background-position: center;
  filter: blur(22px);
  transform: scale(1.18);           /* etwas größer, damit Blur-Ränder nicht sichtbar sind */
  z-index: 1;
}

.list-hero-gradient{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.25) 35%, rgba(0,0,0,.40) 100%);
  z-index: 2;
}

.list-hero-content{
  position: relative; z-index: 3;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: 28px;
  padding: 28px 32px;
}

/* Reihenfolge drehen bei ungeraden */
.list-hero-content.row-reverse{ direction: rtl; }
.list-hero-content.row-reverse > *{ direction: ltr; }

/* Text */
.list-hero-text{ color:#fff; max-width: 720px; }
.list-hero-title{
  margin: 0 0 12px;
  font-weight: 800; letter-spacing: -0.01em; color:#fff;
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.1;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.list-hero-teaser{
  margin: 0 0 16px;
  color: rgba(255,255,255,.92);
  font-size: clamp(14px, 1.4vw, 16px);
  line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* Bild – statt max-height: Aspect-Ratio benutzen */
.list-hero-visual{
  display: flex; align-items: center; justify-content: center;
}
.list-hero-img{
  width: 96%;
  /* Bild bekommt feste Seitenverhältnisse und bestimmt seine eigene Höhe */
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 32px rgba(0,0,0,.22);
}

/* Tablet */
@media (max-width: 992px){
  .list-hero{ min-height: 380px; border-radius: 14px; }
  .list-hero-content{ grid-template-columns: 1fr 1fr; gap: 20px; padding: 22px; }
  .list-hero-img{ width: 94%; aspect-ratio: 16/10; }
}

/* Mobile */
@media (max-width: 768px){
  .list-hero{ min-height: 360px; margin: 24px 0 18px; border-radius: 12px; }
  .list-hero-content{
    grid-template-columns: 1fr;
    grid-auto-rows: auto;           /* Inhalt bestimmt Höhe */
    gap: 14px; padding: 18px 16px;
  }
  .list-hero-visual{ order: -1; }   /* Bild oben */
  .list-hero-img{
    width: 92%;
    aspect-ratio: 16/10;            /* etwas höher, wirkt auf Mobile besser */
    border-radius: 12px;
  }
  .list-hero-title{ -webkit-line-clamp: 2; }
  .list-hero-teaser{ -webkit-line-clamp: 3; }
}

/* Full-bleed innerhalb .container: zieht den Block bis an den Rand */
.full-bleed {

  border-radius: 0;       /* Kachel bündig ohne Rundung – falls du Rundung willst, lösch die Zeile */
}

/* Beispielprodukte-Wrapper bündig mit Content (nicht full-bleed) */
.eg-wrap {
  max-width: 1200px;
  margin: 12px auto 28px;
  padding: 0 16px;
}

/* Produktgrid unter den Listen: 3 Spalten Desktop, 2 auf Mobile */
.eg-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}

/* Kartenoptik wie bei Suche – ohne Border, leichter Shadow */
.eg-card{
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  background: #fff;
  border: none;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
  overflow: hidden;
  transition: box-shadow .15s ease, transform .15s ease;
}
.eg-card:hover{ box-shadow: 0 4px 10px rgba(0,0,0,.08); transform: translateY(-1px); }

.eg-thumb{ height: 160px; background:#fff; display:flex; align-items:center; justify-content:center; }
.eg-thumb img{ max-width: 100%; max-height: 100%; object-fit: contain; }

.eg-body{ padding: 10px 12px; display:flex; flex-direction:column; gap:6px; }
.eg-title{
  font-size: 13.5px; color:#1d2330;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.eg-price{ font-size: 13.5px; font-weight:600; color:#005edf; }
.eg-desc{
  font-size: 12px; color:#6b7280;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* Mobile: 2 Spalten, etwas kleinere Thumbs */
@media (max-width: 768px){
  .eg-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
  .eg-thumb{ height: 140px; }
}