:root {
  --deal-gruen: #23d5ab;
  --deal-gold: #ffc94d;
  --deal-code-bg: rgba(35, 213, 171, .10);
}

.sparen-hero {
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0)),
    linear-gradient(135deg, #0b2f6f, #071a33);
  box-shadow: var(--shadow);
  padding: 22px 20px;
  margin-top: 18px;
}
.sparen-hero h1 { margin: 0 0 .4rem; font-size: clamp(1.5rem, 4.5vw, 2.1rem); line-height: 1.15; }
.sparen-hero p { margin: 0; color: var(--muted); max-width: 62ch; }
.sparen-zahlen { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 14px; }
.sparen-zahl { display: flex; flex-direction: column; }
.sparen-zahl b { font-size: 1.35rem; line-height: 1.1; }
.sparen-zahl span { font-size: .8rem; color: var(--muted2); }

.filter-leiste {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 16px 0 4px; padding: 0; list-style: none;
}
.filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: .45rem .85rem;
  border-radius:var(--rund-pille); border: 1px solid var(--stroke);
  background: var(--card); color: var(--text);
  text-decoration: none; font-weight: 700; font-size: .87rem;
  white-space: nowrap;
}
.filter-chip:hover { background: rgba(255, 255, 255, .11); }

.filter-chip[aria-current="true"] {
  background: var(--btnHover); border-color: rgba(255, 255, 255, .34);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .25);
}
.filter-chip .anzahl { font-weight: 600; color: var(--muted2); font-size: .8rem; }
.filter-chip[aria-current="true"] .anzahl { color: #fff; }

.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.karten-raster {
  display: grid; gap: 14px; margin-top: 16px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.karten-raster.eng { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

.karten-raster { grid-auto-rows: 1fr; align-items: stretch; }
.karten-raster > * { height: 100%; }

.gutschein-titel,
.gutschein-text,
.gutschein-bedingung {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gutschein-titel { -webkit-line-clamp: 3; }
.gutschein-text { -webkit-line-clamp: 3; }
.gutschein-bedingung { -webkit-line-clamp: 2; }

.gutschein-karte > .cta-btn,
.deal-karte > .cta-btn { margin-top: auto; }

@supports not (-webkit-line-clamp: 3) {
  .gutschein-titel { max-height: 3.96em; }
  .gutschein-text { max-height: 4.35em; }
  .gutschein-bedingung { max-height: 2.9em; }
}

.karten-raster--kompakt .gutschein-titel { -webkit-line-clamp: 1; }
.karten-raster--kompakt .gutschein-shop { font-size: 1rem; }
.karten-raster--kompakt .gutschein-text,
.karten-raster--kompakt .gutschein-bedingung { display: none; }
@supports not (-webkit-line-clamp: 1) {
  .karten-raster--kompakt .gutschein-titel { max-height: 1.32em; }
}

.gutschein-karte {
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px; border-radius: var(--radius);
  border: 1px solid var(--stroke); background: var(--card);
  box-shadow: var(--shadow); position: relative;
}
.gutschein-kopf { display: flex; align-items: center; gap: 11px; }
.shop-logo {
  width: 46px; height: 46px; flex: 0 0 46px;
  border-radius:var(--rund-mittel); display: grid; place-items: center;
  font-weight: 900; font-size: .82rem; letter-spacing: .01em;
  color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
  border: 1px solid rgba(255, 255, 255, .22); overflow: hidden;
}
.shop-logo.gross { width: 62px; height: 62px; flex-basis: 62px; font-size: 1rem; }
.gutschein-shop { font-weight: 800; font-size: .95rem; }
.gutschein-shop a { text-decoration: none; }
.gutschein-shop a:hover { text-decoration: underline; }
.gutschein-kat { font-size: .78rem; color: var(--muted2); }
.gutschein-titel { margin: 0; font-size: 1.02rem; line-height: 1.32; font-weight: 800; }
.gutschein-text { margin: 0; font-size: .88rem; color: var(--muted); line-height: 1.45; }
.gutschein-bedingung { font-size: .8rem; color: var(--muted2); }

.rabatt-plakette {
  position: absolute; top: 14px; right: 14px;
  background: var(--deal-gruen); color: #04241d;
  font-weight: 900; font-size: .82rem; line-height: 1;
  padding: .4rem .55rem; border-radius:var(--rund-mittel);
  max-width: 45%;
}

.rabatt-plakette + .gutschein-titel,
.rabatt-plakette + .gutschein-kopf { padding-right: 5rem; }

.wert-schild {
  position: absolute; top: 14px; right: 14px;
  background: var(--karte2, #1d2733); color: var(--fg, #e8eef5);
  border: 1px solid var(--rand, rgba(255,255,255,.16));
  font-weight: 800; font-size: .82rem; line-height: 1;
  padding: .4rem .55rem; border-radius: var(--rund-mittel);
  max-width: 45%;
}
.wert-schild + .gutschein-titel,
.wert-schild + .gutschein-kopf { padding-right: 5rem; }

.marken-band { display: flex; flex-wrap: wrap; gap: 6px; }
.marke {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .74rem; font-weight: 800; line-height: 1;
  padding: .32rem .5rem; border-radius:var(--rund-pille);
  border: 1px solid var(--stroke); background: var(--card);
  color: var(--muted);
}
.marke.exklusiv { background: rgba(255, 201, 77, .16); border-color: rgba(255, 201, 77, .45); color: #ffe1a3; }
.marke.geprueft { background: rgba(35, 213, 171, .14); border-color: rgba(35, 213, 171, .40); color: #a9f0dd; }
.marke.laeuft-ab { background: rgba(214, 58, 47, .18); border-color: rgba(214, 58, 47, .45); color: #ffc4bf; }
.marke.beispiel { background: rgba(255, 255, 255, .09); border-style: dashed; color: var(--muted2); }

.code-box { margin-top: auto; }
.code-box > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .6rem .9rem;
  border-radius:var(--rund-mittel); font-weight: 800; font-size: .95rem;
  background: var(--btn); color: #fff;
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .22);
}
.code-box > summary::-webkit-details-marker { display: none; }
.code-box > summary:hover { background: var(--btnHover); }
.code-box[open] > summary { display: none; }
.code-anzeige {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 48px; padding: .5rem .5rem .5rem .85rem;
  border-radius:var(--rund-mittel); border: 1px dashed rgba(35, 213, 171, .60);
  background: var(--deal-code-bg);
}
.code-wert {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.02rem; font-weight: 800; letter-spacing: .07em;
  word-break: break-all;
}
.code-kopieren {

  flex: 0 0 auto; min-height: 44px; padding: .4rem .7rem;
  border-radius:var(--rund-klein); border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, .08); color: #fff;
  font-weight: 800; font-size: .82rem; cursor: pointer;
}
.code-kopieren:hover { background: rgba(255, 255, 255, .14); }

.code-status {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.kein-code {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; border-radius:var(--rund-mittel);
  border: 1px dashed var(--stroke); background: rgba(255, 255, 255, .04);
  font-size: .88rem; color: var(--muted); text-align: center; padding: .5rem;
}

.deal-karte {
  display: flex; flex-direction: column; gap: 9px;
  padding: 16px; border-radius: var(--radius);
  border: 1px solid var(--stroke); background: var(--card);
  box-shadow: var(--shadow); position: relative;
}
.deal-preis { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.deal-preis .jetzt { font-size: 1.45rem; font-weight: 900; line-height: 1; }
.deal-preis .statt { font-size: .95rem; color: var(--muted2); text-decoration: line-through; }
.deal-versand { font-size: .8rem; color: var(--muted2); }

.shop-kachel {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 16px 12px; border-radius: var(--radius);
  border: 1px solid var(--stroke); background: var(--card);
  text-decoration: none; color: var(--text); text-align: center;
  min-height: 148px; justify-content: center;
}
.shop-kachel:hover { background: rgba(255, 255, 255, .11); }
.shop-kachel:focus-visible { outline: none; box-shadow: var(--focus); }
.shop-kachel b { font-size: .95rem; line-height: 1.25; }
.shop-kachel span { font-size: .78rem; color: var(--muted2); }

.hinweis {
  margin-top: 16px; padding: 12px 14px;
  border-radius:var(--rund-mittel); border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, .04);
  font-size: .86rem; color: var(--muted); line-height: 1.55;
}
.hinweis b { color: var(--text); }
.hinweis a { color: #fff; }
.hinweis.warnung { border-color: rgba(255, 201, 77, .45); background: rgba(255, 201, 77, .09); }

.leer-hinweis {
  padding: 26px 18px; border-radius: var(--radius);
  border: 1px dashed var(--stroke); background: rgba(255, 255, 255, .03);
  text-align: center; color: var(--muted);
}

.quer-band {
  display: grid; gap: 12px; margin-top: 18px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.quer-karte {
  display: block; padding: 16px; border-radius: var(--radius);
  border: 1px solid var(--stroke); background: var(--card);
  text-decoration: none; color: var(--text);
}
.quer-karte:hover { background: rgba(255, 255, 255, .11); }
.quer-karte b { display: block; font-size: 1.02rem; margin-bottom: .25rem; }
.quer-karte span { font-size: .86rem; color: var(--muted); line-height: 1.45; }

.status-tabelle { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: .87rem; }
.status-tabelle th, .status-tabelle td {
  text-align: left; padding: .55rem .6rem;
  border-bottom: 1px solid rgba(255, 255, 255, .10); vertical-align: top;
}
.status-tabelle th { color: var(--muted2); font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }
.status-tabelle code { font-size: .82rem; word-break: break-all; color: #ffe1a3; }
.tabelle-huelle { overflow-x: auto; }

@media (max-width: 560px) {
  .karten-raster { grid-template-columns: 1fr; }
  .karten-raster.eng { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .sparen-hero { padding: 18px 15px; }
}

.melde-leiste{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:10px;
  padding-top:9px;border-top:1px solid rgba(255,255,255,.10);font-size:.8rem;color:var(--muted2)}
.melde-frage{font-weight:700}
.melde-knoepfe{display:flex;gap:6px}

.melde-knopf{min-height:44px;padding:.25rem .6rem;border-radius:var(--rund-klein);cursor:pointer;
  border:1px solid var(--stroke);background:rgba(255,255,255,.08);color:var(--text);
  font-weight:800;font-size:.78rem}
.melde-knopf:hover{background:rgba(255,255,255,.14)}
.melde-knopf:focus-visible{outline:none;box-shadow:var(--focus)}
.melde-quote{flex-basis:100%;color:var(--deal-gruen);font-weight:700}

.sortier-leiste{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.sortier-leiste > span{font-size:.84rem;color:var(--muted2);font-weight:700}

.deal-motiv{margin:-16px -16px 2px;border-radius:var(--radius) var(--radius) 0 0;overflow:hidden;line-height:0;

  height:64px}
.deal-motiv svg{width:100%;height:100%;display:block;object-fit:cover}

.deal-bild{margin:-16px -16px 10px;border-radius:var(--radius) var(--radius) 0 0;
  overflow:hidden;line-height:0;height:180px}

.gh-produktzeichen{display:inline-block;vertical-align:-.16em;
  width:1.15em;height:1.15em;margin-right:.34em;color:inherit;flex:0 0 auto}
.gh-produktzeichen svg{width:100%;height:100%;display:block}

.shop-logo--echt{background:#fff;padding:3px}
.shop-logo--echt img{width:100%;height:100%;display:block;object-fit:contain}

.deal-karte .rabatt-plakette{box-shadow:0 4px 12px rgba(0,0,0,.45)}

.deal-bild,.deal-motiv,.produkt-bild{position:relative}
.deal-bild > .rabatt-plakette,
.deal-motiv > .rabatt-plakette,
.produkt-bild > .rabatt-plakette{
  position:absolute;top:10px;right:10px;left:auto;bottom:auto;z-index:2;
  max-width:calc(100% - 20px);
  padding:.42rem .6rem;border-radius:var(--rund-mittel);
  font-size:.95rem;font-weight:900;line-height:1;letter-spacing:.01em;
  white-space:nowrap;
  color:#04241d;
  background:linear-gradient(135deg,var(--deal-gruen-hell,#29e0b4),var(--deal-gruen-tief,#1cb890));
  border:1px solid rgba(4,36,29,.30);
  box-shadow:0 4px 14px rgba(0,0,0,.30),0 0 0 1px rgba(4,36,29,.14);
}

@media (max-width:560px){
  .deal-bild > .rabatt-plakette,
  .deal-motiv > .rabatt-plakette,
  .produkt-bild > .rabatt-plakette{
    top:8px;right:8px;font-size:13px;padding:.34rem .5rem;white-space:normal;
  }
}

.werbe-marke{display:inline-block;margin-top:6px;font-size:.75rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.werbe-marke::before{content:"";display:inline-block;width:5px;height:5px;
  border-radius:50%;background:currentColor;margin-right:5px;vertical-align:middle}
.gutschein-karte .werbe-marke,.deal-karte .werbe-marke{align-self:flex-start}
.melde-basis{font-weight:600;color:var(--muted2)}

.blaetterleiste{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:20px;justify-content:center}
.blaetterleiste .filter-chip{min-width:44px;justify-content:center}
.blaetter-luecke{color:var(--muted2);padding:0 2px}