/* sealed.css – Sortiment. Ergänzt styles.css. */

/* Drop-Kopf */

.sealed-hero{
  position:relative;
  padding:clamp(32px,5vh,72px) 0 clamp(20px,3vh,40px);
  border-bottom:1px solid var(--line);
  overflow:hidden}

/* Ohne Video */
.sealed-hero.ohne-video{background:var(--ink-2)}

/* Video */

.hero-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;pointer-events:none}

/* Abdunkelung für lesbaren Text */
.hero-video-overlay{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,
      rgba(7,11,22,.74) 0%,
      rgba(7,11,22,.6) 40%,
      rgba(7,11,22,.66) 75%,
      rgba(7,11,22,.9) 100%)}

.sealed-hero-inner{
  position:relative;z-index:2;
  max-width:var(--breite);margin:0 auto;padding:0 var(--rand);
  text-align:center}

.sealed-hero h1{
  font-size:clamp(24px,4vw,38px);margin:0 0 10px}

.sealed-hero .lede{
  max-width:520px;margin:0 auto clamp(24px,3vw,36px)}


/* Produktreihe */

/* safe center: bei Überlauf links bündig. Die Zeile davor ist der Fallback. */
.hero-produkte{
  display:flex;gap:clamp(20px,3vw,36px);
  justify-content:flex-start;
  justify-content:safe center;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  scroll-padding-inline:var(--rand);
  padding-bottom:4px}

.hero-produkt{
  flex:0 0 clamp(90px,12vw,140px);text-align:center;color:inherit;
  scroll-snap-align:center;
  display:flex;flex-direction:column}

.hero-produkt-bild{
  aspect-ratio:3/4;flex-shrink:0;
  background:var(--ink-3);border:1px solid var(--line);
  border-radius:10px;overflow:hidden;margin-bottom:10px;
  transition:border-color .25s ease}

.hero-produkt:hover .hero-produkt-bild{
  border-color:var(--line-2)}

.hero-produkt-bild img{
  width:100%;height:100%;object-fit:contain;padding:8px}

.hero-produkt-name{
  display:block;font-family:var(--body);
  font-size:clamp(12px,.82vw,14px);font-weight:400;color:var(--muted)}

/* Preis unten: in der Reihe auf einer Linie */
.hero-produkt-preis{
  display:block;font-family:var(--display);
  font-size:clamp(13px,.88vw,15px);font-weight:600;
  color:var(--cyan);margin-top:auto;padding-top:2px}


/* Filter */

.sealed-katalog{
  max-width:var(--breite);margin:0 auto;
  padding:0 var(--rand) clamp(48px,6vw,80px)}

.filter-leiste{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:clamp(20px,3vw,28px) 0 clamp(16px,2vw,20px);
  border-bottom:1px solid var(--line)}

.filter-gruppe{display:flex;gap:6px;align-items:center;
  flex-wrap:wrap}

#kategorieFilter{overflow-x:auto;flex-wrap:nowrap;
  -webkit-overflow-scrolling:touch}

.filter-trenner{
  width:1px;height:20px;background:var(--line-2);margin:0 8px}

.filter-pill{
  font-family:var(--body);
  font-size:clamp(12px,.82vw,14px);font-weight:400;
  padding:clamp(6px,.5vw,8px) clamp(14px,1vw,18px);
  border-radius:var(--r-pille);border:1px solid var(--line-2);
  background:transparent;color:var(--muted);cursor:pointer;
  transition:border-color .2s ease,color .2s ease,background .2s ease;white-space:nowrap;
  -webkit-tap-highlight-color:transparent}

.filter-pill:hover{
  border-color:rgba(199,212,236,.25);color:var(--paper)}

.filter-pill.aktiv{
  background:rgba(34,224,242,.06);
  border-color:rgba(34,224,242,.25);
  color:var(--cyan);font-weight:500}

/* Solange der Satzspiegel 1180 px breit ist, wachsen die Pillen nicht mit */
@media (max-width:1599px){
  .filter-pill{font-size:12px;padding-inline:14px}
}

/* Sprache der Ausgabe: eigene Zeile unter den Kategorien */
.sprach-zeile{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:clamp(12px,1.2vw,16px) 0;border-bottom:1px solid var(--line)}
.sprach-label{font-family:var(--mono);font-size:clamp(10px,.68vw,12px);
  color:rgba(199,212,236,.6);letter-spacing:.04em;margin-right:4px}
html:not(.js) .sprach-zeile{display:none}

/* Kategorien in eigener Zeile; ab 601 px umbrechen statt seitlich scrollen */
@media (max-width:1999px){
  .filter-trenner{width:100%;height:1px;margin:4px 0}
}
@media (min-width:601px) and (max-width:1999px){
  #kategorieFilter{flex-wrap:wrap;overflow-x:visible}
}


/* Ergebnis-Kopf */

.ergebnis-kopf{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"suche rechts" "links links";
  align-items:center;
  column-gap:clamp(12px,1.5vw,24px);row-gap:clamp(10px,1vw,14px);
  padding:clamp(16px,2vw,20px) 0 clamp(12px,1.5vw,16px)}

.ergebnis-links{grid-area:links;display:flex;flex-direction:column;gap:2px;min-width:0}

.ergebnis-anzahl{
  font-family:var(--mono);font-size:clamp(12px,.75vw,13px);
  color:var(--muted);letter-spacing:.5px}

.ergebnis-stand{
  font-family:var(--mono);font-size:clamp(12px,.7vw,13px);
  color:rgba(199,212,236,.6)}
.ergebnis-stand:empty{display:none}

.ergebnis-rechts{
  grid-area:rechts;
  display:flex;align-items:center;gap:clamp(8px,.8vw,12px)}


/* Suche */

.produkt-suche{
  grid-area:suche;position:relative;
  width:100%;max-width:clamp(300px,34vw,560px)}
html:not(.js) .produkt-suche{display:none}

.suche-lupe{
  position:absolute;left:clamp(10px,.8vw,14px);top:50%;
  width:clamp(15px,1vw,18px);height:auto;aspect-ratio:1;
  transform:translateY(-50%);color:var(--muted);pointer-events:none}

.suche-eingabe{
  width:100%;margin:0;
  font-family:var(--body);font-size:clamp(13px,.86vw,15px);
  color:var(--paper);background:rgba(199,212,236,.03);
  border:1px solid var(--line-2);border-radius:8px;
  padding:clamp(8px,.6vw,11px) clamp(38px,2.8vw,46px);
  -webkit-appearance:none;appearance:none;
  transition:border-color .2s ease,background-color .2s ease}
.suche-eingabe::placeholder{color:rgba(199,212,236,.6);opacity:1}
.suche-eingabe::-webkit-search-cancel-button,
.suche-eingabe::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
@media (hover:hover) and (pointer:fine){
  .suche-eingabe:hover{border-color:rgba(199,212,236,.25)}
}
.suche-eingabe:focus{outline:none;border-color:rgba(34,224,242,.5);background:rgba(199,212,236,.05)}
/* Ab 16 px zoomt iOS beim Tippen nicht */
@media (pointer:coarse){
  .suche-eingabe{font-size:clamp(16px,1.1vw,18px)}
}

.suche-leeren{
  position:absolute;right:clamp(4px,.4vw,6px);top:50%;transform:translateY(-50%);
  width:clamp(30px,2.2vw,36px);height:clamp(30px,2.2vw,36px);
  display:flex;align-items:center;justify-content:center;
  border:0;border-radius:6px;background:transparent;color:var(--muted);cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.suche-leeren[hidden]{display:none}
.suche-leeren svg{width:clamp(14px,.9vw,16px);height:auto;aspect-ratio:1}
.suche-leeren:hover{color:var(--paper);background:rgba(199,212,236,.06)}
@media (pointer:coarse){
  .suche-leeren{width:2.5rem;height:2.5rem}
}


.ergebnis-sort{
  font-family:var(--body);font-size:clamp(12px,.78vw,13px);
  color:var(--muted);background:transparent;
  border:1px solid var(--line);
  padding:clamp(5px,.4vw,7px) clamp(10px,.8vw,14px);
  border-radius:8px;cursor:pointer;transition:border-color .2s}


.ergebnis-sort:hover{border-color:var(--line-2)}
.ergebnis-sort option{background:var(--ink);color:var(--paper)}


/* Produktraster */

/* Nur sichtbare Inhalte rendern */
/* Zeilen oben: bei gehaltener Höhe strecken sich die Karten nicht */
.produkt-grid{
  content-visibility:auto;contain-intrinsic-size:auto 900px;
  position:relative;
  display:grid;align-content:start;
  transition:min-height .3s var(--ease-out);
  grid-template-columns:repeat(auto-fill,minmax(clamp(170px,14vw,220px),1fr));
  gap:clamp(12px,1.5vw,16px)}

/* Produktkarte */

/* Spalte: Preis und Status sitzen unten, in der Reihe auf einer Linie */
.produkt-karte{
  display:flex;flex-direction:column;
  background:rgba(199,212,236,.025);
  border:1px solid var(--line);border-radius:10px;
  padding:clamp(10px,1vw,14px);position:relative;
  transition:border-color .25s ease,transform .25s var(--ease-out),opacity .22s ease-out}

/* Suche: gehende Karten verlassen den Fluss und blenden aus, neue blenden ein */
.produkt-karte.pk-weg{
  position:absolute;margin:0;pointer-events:none;
  opacity:0;transform:scale(.96);
  transition:opacity .18s ease-out,transform .18s ease-out}
.produkt-karte.pk-neu{opacity:0;transform:scale(.96)}

@media (hover:hover) and (pointer:fine){
  .produkt-karte:hover{border-color:var(--line-2)}
}
.produkt-karte:active{transform:scale(.99)}

/* Bild */

.pk-bild{
  aspect-ratio:4/3.5;flex-shrink:0;background:rgba(199,212,236,.015);
  border-radius:8px;overflow:hidden;margin-bottom:10px;
  position:relative;display:flex;align-items:center;justify-content:center}

/* Foto einpassen */
.pk-bild img{width:90%;height:90%;object-fit:contain}

.pk-bild-platzhalter{
  font-family:var(--body);font-size:clamp(11px,.72vw,13px);
  color:rgba(199,212,236,.6);text-align:center;line-height:1.4}

/* Sprache der Ausgabe oben links */
.pk-sprache{
  position:absolute;top:6px;left:6px;z-index:2;
  font-family:var(--mono);font-size:clamp(9px,.62vw,11px);
  font-weight:600;letter-spacing:.06em;line-height:1;
  color:var(--paper);background:rgba(7,11,22,.84);
  border:1px solid var(--line-2);
  padding:4px 6px;border-radius:3px;pointer-events:none}

.pk-set-badge{
  position:absolute;bottom:6px;left:6px;
  font-family:var(--mono);font-size:clamp(10px,.6vw,11px);
  font-weight:500;letter-spacing:.02em;
  color:var(--muted);background:rgba(7,11,22,.84);
  padding:2px 7px;border-radius:3px}

/* Text */

.pk-name{
  font-family:var(--body);font-size:clamp(12px,.82vw,14px);
  font-weight:400;color:var(--muted);margin-bottom:3px}

.pk-preis{
  font-family:var(--display);font-size:clamp(14px,.94vw,16px);
  font-weight:600;color:var(--cyan);margin-top:auto}

.pk-status{font-family:var(--mono);font-size:clamp(10px,.66vw,11px);margin-top:4px}
/* Eine Spalte: Platz für 12 px */
@media (max-width:400px){.pk-status{font-size:12px}}
.pk-status.vorratig{color:rgba(100,195,100,.7)}
.pk-status.niedrig{color:rgba(230,190,50,.75)}
.pk-status.mittel{color:rgba(170,200,75,.75)}
.pk-status.ausverkauft{color:rgb(220,90,90)}
.pk-status.demnaechst{color:var(--muted)}


/* Keine Treffer */

.keine-treffer{
  grid-column:1/-1;text-align:center;
  padding:clamp(40px,5vw,60px) 20px}

.keine-treffer p{color:var(--muted);font-size:clamp(13px,.82vw,15px)}
.keine-treffer .filter-pill{margin-top:clamp(12px,1vw,16px)}


/* Responsive */

@media (max-height:900px){
  .sealed-hero{padding:clamp(16px,2.5vh,32px) 0 clamp(10px,1.5vh,20px)}
  .sealed-hero h1{font-size:clamp(20px,3vw,28px);margin:0 0 6px}
  .sealed-hero .lede{margin:0 auto clamp(10px,1.5vh,16px)}
  .hero-produkt{flex:0 0 clamp(80px,10vw,110px)}
}

@media (max-width:768px){
  .sealed-hero{padding:clamp(24px,4vh,40px) 0 clamp(16px,2vh,24px)}
  /* Streifen bis zum Rand */
  .hero-produkte{gap:12px;
    margin-inline:calc(var(--rand) * -1);
    padding-inline:var(--rand)}
  .hero-produkt{flex:0 0 clamp(88px,25vw,116px)}
  .hero-produkt-bild{margin-bottom:8px}
  .hero-produkt-bild img{padding:6px}
  .filter-leiste{padding:20px 0 16px}
  .produkt-grid{grid-template-columns:repeat(2,1fr);gap:10px}
}

@media (max-width:600px){
  /* Suche, Schalter und Anzahl untereinander */
  .ergebnis-kopf{grid-template-columns:minmax(0,1fr);grid-template-areas:"suche" "rechts" "links"}
  .produkt-suche{max-width:none}
}

@media (max-width:400px){
  .produkt-grid{grid-template-columns:1fr}
}


/* Produktfenster */

.qv-overlay{position:fixed;inset:0;z-index:9000;
  background:rgba(4,5,10,.88);
  display:none;align-items:center;justify-content:center}
.qv-overlay.offen{display:flex;
  animation:qv-ein .25s ease both}

.qv-modal{background:var(--ink-3);border:1px solid var(--line-2);border-radius:14px;
  padding:clamp(16px,1.6vw,24px);width:min(420px,90vw);max-height:88vh;overflow-y:auto}

.qv-kopf{display:flex;justify-content:space-between;align-items:flex-start;
  margin-bottom:clamp(10px,1vw,16px)}

.qv-set{font-family:var(--mono);font-size:clamp(12px,.76vw,14px);color:var(--muted)}
.qv-name{font-family:var(--display);font-size:clamp(16px,1.2vw,22px);
  font-weight:600;color:var(--paper);margin-top:2px}

.qv-x{width:32px;height:32px;border-radius:50%;border:1px solid var(--line-2);
  background:transparent;color:var(--muted);cursor:pointer;display:flex;
  align-items:center;justify-content:center;flex-shrink:0;
  transition:border-color .2s,color .2s}
.qv-x svg{width:16px;height:16px}
.qv-x:hover{border-color:var(--paper);color:var(--paper)}

.qv-bild{background:rgba(199,212,236,.02);border:1px solid var(--line);
  border-radius:10px;aspect-ratio:4/3;max-height:32vh;display:flex;align-items:center;
  justify-content:center;overflow:hidden;margin-bottom:clamp(10px,1vw,16px)}
/* Begrenzte Bildhöhe */
.qv-bild img{max-width:85%;max-height:85%;object-fit:contain}
.qv-bild-leer{color:rgba(199,212,236,.6);font-size:clamp(12px,.78vw,14px);text-align:center}

/* Vermerk zum Zustand */
.qv-vermerk{border-top:1px solid var(--line);padding-top:clamp(10px,.8vw,14px);
  margin-bottom:clamp(10px,.8vw,14px);
  font-size:clamp(12px,.78vw,13px);color:rgba(230,190,50,.85)}

.qv-inhalt{border-top:1px solid var(--line);padding-top:clamp(10px,.8vw,14px);
  margin-bottom:clamp(10px,.8vw,14px)}
.qv-inhalt-titel{font-family:var(--display);font-size:clamp(13px,.88vw,15px);
  font-weight:600;color:var(--paper);margin-bottom:8px}
.qv-inhalt-liste{display:flex;flex-direction:column;gap:4px}
.qv-inhalt-zeile{display:flex;justify-content:space-between;
  font-size:clamp(12px,.78vw,13px)}
.qv-inhalt-zeile dt{color:var(--muted)}
.qv-inhalt-zeile dd{color:var(--paper);font-family:var(--mono)}

.qv-fuss{border-top:1px solid var(--line);padding-top:clamp(10px,.8vw,14px);
  display:flex;justify-content:space-between;align-items:center}
.qv-preis-label{font-size:clamp(11px,.7vw,12px);color:var(--muted);display:block}
.qv-preis{font-family:var(--display);font-size:clamp(18px,1.3vw,24px);
  font-weight:600;color:var(--cyan)}
.qv-status{font-family:var(--mono);font-size:clamp(11px,.72vw,13px)}
.qv-status.vorratig{color:rgba(100,195,100,.7)}
.qv-status.niedrig{color:rgba(230,190,50,.75)}
.qv-status.mittel{color:rgba(170,200,75,.75)}
.qv-status.ausverkauft{color:rgb(220,90,90)}
.qv-status.demnaechst{color:var(--muted)}

.qv-hinweis{font-size:clamp(11px,.7vw,12px);color:var(--muted);line-height:1.4;
  border-top:1px solid var(--line);padding-top:clamp(8px,.6vw,12px);
  margin-top:clamp(10px,.8vw,14px)}

.produkt-karte{cursor:pointer}


/* Animationen */

@keyframes qv-ein{from{opacity:0}to{opacity:1}}
@keyframes qv-modal-ein{from{opacity:0;transform:translateY(16px) scale(.97)}
  to{opacity:1;transform:none}}
.qv-overlay.offen .qv-modal{animation:qv-modal-ein .3s cubic-bezier(.23,1,.32,1) both}

@media (prefers-reduced-motion:reduce){
  .produkt-grid{transition:none}
}

@media (prefers-reduced-motion:no-preference){
  .produkt-karte{animation:pk-einblenden .4s ease both}
  @keyframes pk-einblenden{
    from{opacity:0;transform:translateY(12px)}
    to{opacity:1;transform:translateY(0)}}
}