main {
  width: 100%;
  max-width: var(--content-max);

  margin: 0 auto;

  padding-left: var(--page-padding);
  padding-right: var(--page-padding);
}

.hero{padding:34px 0 10px}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--green);margin-bottom:10px}
.hero h1 {
  font-family: 'Bricolage Grotesque';
  font-weight: 800;
  font-size: clamp(28px, 5vw, 40px);
  letter-spacing: -.025em;
  line-height: 1.08;
  margin: 22px 0 10px;
  max-width: 20ch;
}

@media (min-width: 600px) {
  .hero h1 {
    max-width: 24ch;
  }
}

@media (min-width: 900px) {
  .hero h1 {
    max-width: 28ch;
  }
}

.hero p.sub {
  display: block;
  width: 100%;
  max-width: none;
  white-space: normal;
}

.search{margin-top:22px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px;display:flex;flex-direction:column;gap:14px}

.search-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.search-row > .btn {
  width: 100%;
  justify-content: center;
}

.field {
  width: 100%;
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 10px;

  background: #FAF8F2;

  border: 1px solid var(--line);
  border-radius: 11px;

  padding: 0 14px;
}

@media (min-width: 700px) {
  .search-row {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .field {
    flex: 1;
    width: auto;
    min-width: 220px;
  }

  .search-row > .btn {
    width: auto;
  }
}

.field svg{flex:none;color:var(--muted)}
.field input{border:0;background:transparent;font-family:inherit;font-size:15px;color:var(--ink);width:100%;padding:13px 0;outline:none}
.btn{font-family:inherit;font-weight:600;font-size:14px;border:0;border-radius:11px;cursor:pointer;padding:0 18px;display:inline-flex;align-items:center;gap:8px;transition:.15s;white-space:nowrap}
.btn-primary{background:var(--green);color:#fff;padding:12px 20px}
.btn-primary:hover{background:var(--green-dark)}
.btn-loc{background:var(--card);border:1px solid var(--line);color:var(--ink);padding:13px 16px}
.btn-loc:hover{border-color:var(--green);color:var(--green)}

/* Raster statt Flex: sieben exakt gleich breite Spalten */
.days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;padding-bottom:2px}
.day{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:1px solid var(--line);background:#FAF8F2;border-radius:10px;padding:7px 1px;cursor:pointer;transition:.15s;font-family:inherit;overflow:hidden}
.day>div{max-width:100%}
.day .wd{font-size:11px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;line-height:1.25}
.day.now .wd{font-size:10px;letter-spacing:-.03em}
.day .dt{font-family:'Inter',sans-serif;font-size:9px;font-weight:500;color:var(--muted);white-space:nowrap;line-height:1.25;letter-spacing:-.02em;margin-top:1px}
@media(max-width:420px){.days{gap:3px}.day{padding:6px 1px;border-radius:9px}}
.day.on{background:var(--green);border-color:var(--green);color:#fff}
.day.on .dt{color:rgba(255,255,255,.75)}
.day:hover:not(.on){border-color:var(--green)}

.controls {
  display: flex;
  flex-direction: column;
  align-items: stretch;

  gap: 12px;

  border-top:
    1px dashed
    var(--line);

  padding-top: 14px;
}

.radius {
  display: flex;
  align-items: center;

  width: 100%;
  min-width: 0;

  gap: 10px;
}

.radius label{font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap}
.radius output{font-family:'Space Mono';font-weight:700;font-size:13px;color:var(--green);min-width:56px;text-align:right}
.pricefilter {
  display: flex;
  align-items: center;

  width: 100%;

  gap: 9px;
}

.pricefilter label{font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap}
.pricefilter select {
  min-width: 0;
  max-width: 100%;

  font-family: inherit;
  font-size: 13px;
  font-weight: 600;

  color: var(--ink);

  border: 1px solid var(--line);
  border-radius: 9px;

  background: var(--card);

  padding: 8px 10px;

  cursor: pointer;
}
.pricefilter select.on{background:var(--green-soft);border-color:var(--green);color:var(--green-dark)}

@media (min-width: 700px) {
  .controls {
    flex-direction: row;
    align-items: center;

    gap: 20px;

    flex-wrap: wrap;
  }

  .radius {
    flex: 1;
    min-width: 240px;
  }

  .pricefilter {
    width: auto;
  }

  .chips {
    width: auto;
  }
}


.pcust{display:none;width:78px;font-family:'Space Mono';font-weight:700;font-size:13px;text-align:right;border:1px solid var(--green);background:#fff;border-radius:9px;padding:8px 9px;outline:none}
.pcust.show{display:block}
input[type=range]{-webkit-appearance:none;appearance:none;height:5px;border-radius:5px;background:var(--line);flex:1;outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--green);cursor:pointer;border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.2)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--green);cursor:pointer;border:3px solid #fff}

.chips {
  display: flex;
  flex-wrap: wrap;

  width: 100%;

  gap: 6px;

  overflow: visible;
}

.chip{font-family:inherit;font-size:13px;font-weight:500;color:var(--muted);background:#FAF8F2;border:1px solid var(--line);border-radius:99px;padding:8px 14px;cursor:pointer;white-space:nowrap;transition:.15s}
.chip:hover:not(:disabled){border-color:var(--green)}
.chip.on{background:var(--green-soft);border-color:var(--green);color:var(--green-dark);font-weight:600}
.chip:disabled{opacity:.4;cursor:not-allowed}

/* =========================================================
   Ergebnisse + Karte
   Mobile First
   ========================================================= */

.layout {
  margin-bottom: 64px;
}

.cards {
  width: 100%;
  min-width: 0;

  order: 1;

  display: grid;
  gap: 20px;
}

.layout aside {
  width: 100%;
  min-width: 0;

  order: 2;
}

.mappanel {
  width: 100%;
  min-width: 0;

  min-height: 340px;

  overflow: hidden;

  border-radius: 18px;
}

#lokal-map {
  width: 100%;

  height: 42vh;
  min-height: 340px;
  max-height: 480px;

  z-index: 1;
}


/* =========================================================
   Desktop
   Ergebnisse links, Karte rechts
   ========================================================= */

@media (min-width: 901px) {

  .layout {
    display: grid;

    grid-template-columns:
      minmax(0, 1fr)
      360px;

    gap: 24px;

    align-items: start;
  }

  .cards {
    order: initial;
  }

  .layout aside {
    order: initial;

    width: 100%;

    position: sticky;
    top: 24px;
  }

  .mappanel {
    width: 100%;

    min-height: 420px;
  }

  #lokal-map {
    width: 100%;

    height: 520px;
    min-height: 420px;
    max-height: none;
  }
}

/* CSS für Kartenmarker */
.lokal-marker-wrapper {
  background: transparent;
  border: 0;
}

.lokal-marker {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 3px solid #fff;
  border-radius: 50% 50% 50% 8px;
  background: #e4972b;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transform: rotate(-45deg);
  transition:
    transform 0.18s ease,
    width 0.18s ease,
    height 0.18s ease;
}

.lokal-marker span {
  transform: rotate(45deg);
}

.lokal-marker.is-highlighted {
  width: 46px;
  height: 46px;
  background: #2f6b4f;
  transform: rotate(-45deg) scale(1.08);
}

.rcard.is-highlighted {
  outline: 2px solid #e4972b;
  outline-offset: 2px;
}

.map-popup {
  display: grid;
  gap: 5px;
  min-width: 180px;
  line-height: 1.35;
}

.map-popup-button {
  margin-top: 5px;
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  background: #2f6b4f;
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.menu-empty {
  color: #94a3b8;
  font-style: italic;
}

.menu-description {
  display: block;
  margin-top: 2px;
  color: #64748b;
  font-size: 0.85em;
}

.rcard-top {
  padding-bottom: 14px;
  margin-bottom: 0;
}

.menu {
  padding: 10px 18px 12px;
}

/*.menu > .mrow:last-of-type {
  border-bottom: 0;
}

.menu:has(.search-combos) > .mrow:last-of-type {
  border-bottom: 0;
}*/

.mrow {
  display: flex;
  align-items: baseline;

  gap: 10px;

  padding: 9px 0;

  border-bottom: 1px solid var(--line2);
}

.menu > .mrow:last-child {
  border-bottom: 0;
}

.search-combos {
  margin: 0;

  padding: 12px 18px;

  border-top: 1px solid var(--line);
}

.search-combo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;

  padding: 6px 0;
}

.search-combo-row + .search-combo-row {
  border-top: 1px solid var(--line2);
}

.search-combo-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 7px;

  min-width: 0;
}

.search-combo-tag {
  flex: none;

  padding: 3px 7px;

  border-radius: 6px;

  background: var(--green-soft);

  color: var(--green-dark);

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.search-combo-text {
  min-width: 0;

  color: var(--muted);

  font-size: 12.5px;
}

.search-combo-price {
  flex: none;

  color: var(--ink);

  font-family:
    "Space Mono",
    monospace;

  font-size: 12.5px;
  font-weight: 700;

  white-space: nowrap;
}

.search-combo-price.is-saving {
  color: var(--green);
}

.search-weekly-offer {
  position: relative;

  margin:
    0
    18px
    14px;

  padding:
    12px
    0
    0;

  border-top:
    1px solid
    var(--line);
}

.search-weekly-offer-label {
  margin-bottom: 4px;

  color: var(--green);

  font-size: 10.5px;
  font-weight: 700;

  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.search-weekly-offer-text {
  display: -webkit-box;

  overflow: hidden;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

  line-clamp: 2;

  color: var(--muted);

  font-size: 12.5px;
  line-height: 1.5;

  white-space: pre-line;
}


@media (max-width: 520px) {
  .search-combo-row {
    align-items: flex-start;
  }

  .search-combo-main {
    flex: 1;
  }

  .search-combo-text {
    font-size: 12px;
  }

  .search-combo-price {
    font-size: 12px;
  }
}

@media (max-width: 900px) {
  .layout aside {
    margin-top: 18px;
  }
}

.search-weekly-offer-preview::after {
  content: "";

  position: absolute;

  /* Fade beginnt vor "Mehr anzeigen" */
  left: 42%;
  bottom: 0;

  width: 18%;
  height: 1.45em;

  pointer-events: none;
  z-index: 1;

  background: linear-gradient(
    to right,
    transparent 0%,
    var(--card, #fff) 100%
  );
}




.search-weekly-offer-preview {
  position: relative;

  line-height: 1.45;
  max-height: calc(1.45em * 2);

  overflow: hidden;

  transition:
    max-height 0.25s ease;
}

.search-weekly-offer-text {
  line-height: 1.45;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

  overflow: hidden;
}

.search-weekly-offer-preview.is-expanded {
  max-height: 500px;
}

.search-weekly-offer-preview.is-expanded
.search-weekly-offer-text {
  display: block;

  -webkit-line-clamp: unset;
  overflow: visible;
}

.search-weekly-offer-preview::after {
  content: "";

  position: absolute;

  left: 42%;
  bottom: 0;

  width: 18%;
  height: 1.45em;

  pointer-events: none;
  z-index: 1;

  background: linear-gradient(
    to right,
    transparent 0%,
    var(--card, #fff) 100%
  );
}

.search-weekly-offer-more {
  position: absolute;

  left: 58%;
  right: 0;
  bottom: 0;

  z-index: 2;

  padding: 0 0 0 8px;

  border: 0;

  background: var(--card, #fff);

  color: var(--green);

  font: inherit;
  font-weight: 700;

  text-align: left;

  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

.search-weekly-offer-preview.is-expanded::after {
  display: none;
}

.search-weekly-offer-preview.is-expanded
.search-weekly-offer-more {
  position: static;

  display: inline-block;

  margin-top: 6px;
  padding-left: 0;

  background: transparent;
}

.location-suggestion {
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
}

.location-suggestion button {
  padding: 0;
  border: 0;
  background: transparent;

  color: var(--green);
  font: inherit;
  font-weight: 700;

  cursor: pointer;
}

.location-suggestion button:hover {
  text-decoration: underline;
}

.rcard.is-promoted {
  position: relative;
}

.rcard.promotion-highlight {
  border: 1px solid rgba(228, 151, 43, 0.55);
  box-shadow:
    0 1px 2px rgba(25, 28, 24, .04),
    0 10px 28px -12px rgba(228, 151, 43, 0.28);
}

.rcard.promotion-featured {
  border: 2px solid var(--amber);
  box-shadow:
    0 2px 4px rgba(25, 28, 24, .05),
    0 14px 34px -14px rgba(228, 151, 43, 0.38);
}

.rcard.promotion-boost {
  border: 1px solid var(--line);
}

.promotion-badge {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;

  padding: 4px 8px;

  border-radius: 999px;

  background: var(--amber-soft);
  color: #8a5a16;

  font-size: 11px;
  font-weight: 800;
  line-height: 1;

  letter-spacing: 0.02em;
}

.promotion-name-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}


.search-ad-card {
  overflow: hidden;
}

.search-ad-head {
  display: flex;
  align-items: center;
  gap: 8px;

  margin-bottom: 10px;
}

.search-ad-label {
  display: inline-flex;
  align-items: center;

  padding: 3px 7px;

  border-radius: 999px;

  background: var(--amber-soft);
  color: #8a5a16;

  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.search-ad-advertiser {
  color: var(--muted);

  font-size: 12px;
}

.search-ad-media {
  width: 100%;
  aspect-ratio: 4 / 1;

  overflow: hidden;

  border-radius: 10px;
  background: #f3f3f3;
}

.search-ad-link {
  display: block;

  color: inherit;
  text-decoration: none;
}

.search-ad-image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}

.search-ad-foot {
  display: flex;
  justify-content: flex-end;

  margin-top: 10px;
}

.search-ad-foot a {
  color: var(--green);

  font-size: 13px;
  font-weight: 700;

  text-decoration: none;
}

.search-ad-foot a:hover {
  text-decoration: underline;
}