/* ==========================================================================
   Artikelliste - Vorschau für eine Angebotskategorie
   --------------------------------------------------------------------------
   Raster aus Produktkarten: Bild, Farben, Name, Preis, Veredelung.
   Gedacht als Angebotsseite fuer Werbeartikel, die aus einem
   Lieferantenkatalog gespeist wird.

   Die Preise stehen als "ab"-Preis, weil der Einzelstueckpreis beim
   Lieferanten die teuerste Staffel ist - damit saehe das Angebot teurer
   aus, als es ist. Mehrwertsteuer und die einmaligen Einrichtungskosten
   stehen getrennt darunter, nicht eingerechnet: Die Einrichtung faellt je
   Auftrag an, nicht je Stueck, und liesse sich in einem Stueckpreis gar
   nicht ehrlich abbilden.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Die Buehne
   Das Bild bringt seinen eigenen dunklen Hintergrund mit. Die Flaeche
   dahinter traegt genau denselben Ton (aus der Bildecke gemessen), damit
   auf breiten Bildschirmen keine Kante entsteht, wo das Bild aufhoert.
   -------------------------------------------------------------------------- */
.werbe-buehne {
  position: relative;
  background: #090B0C;
  overflow: hidden;
}
.werbe-buehne__bild {
  display: block; width: 100%; height: auto;
  /* Auf sehr breiten Schirmen wuerde das Bild sonst ins Riesenhafte
     wachsen und die Produkte am oberen Rand abschneiden. */
  max-height: 72vh; object-fit: cover; object-position: center right;
}

/* Die Aufhellung des Kopfbereichs steht in hell.css und gilt dort fuer
   alle dunklen Flaechen - die Buehne traegt die Klasse .werbe-buehne,
   die main.js mitbeobachtet. Hier stand das einmal doppelt. */

/* Am Handy steht der Text ueber dem Bild, nicht darin: Ueber den Produkten
   waere er nicht zu lesen. */
.werbe-buehne__text {
  padding: clamp(2.2rem, 7vw, 3rem) var(--gutter) clamp(1.6rem, 5vw, 2.4rem);
}
.werbe-buehne__rubrik {
  margin: 0 0 clamp(10px, 1.4vw, 16px);
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255, 255, 255, .56);
}
.werbe-buehne__titel {
  margin: 0; color: #FFFFFF;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2rem, 1rem + 2.9vw, 3.4rem); line-height: 1.04;
  letter-spacing: -.035em;
}
.werbe-buehne__zeile {
  margin: clamp(14px, 1.8vw, 20px) 0 0; max-width: 46ch;
  font-size: clamp(14px, .95vw, 16.5px); line-height: 1.62;
  color: rgba(255, 255, 255, .72);
}

/* Ab Tabletbreite liegt der Text IM Bild, in der dunklen Flaeche links.
   Die ist bis etwa 32 % der Breite frei - gemessen, nicht geschaetzt -
   deshalb endet die Textspalte vorher. */
@media (min-width: 860px) {
  .werbe-buehne__text {
    position: absolute; inset: 0 auto 0 0;
    display: grid; align-content: center;
    width: min(38%, 520px);
    padding: 0 0 0 max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
    box-sizing: content-box;
  }
}

/* Die Seite beginnt jetzt mit der Buehne, nicht mehr mit einer Ueberschrift
   auf weissem Grund. Die alten Kopfregeln bleiben fuer den Fall, dass die
   Buehne einmal entfaellt. */
.artikel-kopf { max-width: var(--container); margin: 0 auto; padding: clamp(3rem, 6vw, 5rem) var(--gutter) 0; }
.artikel-kopf__rubrik {
  margin: 0 0 clamp(12px, 1.6vw, 18px);
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--steel);
}
.artikel-kopf h1 {
  margin: 0; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2rem, 1rem + 2.6vw, 3.2rem); line-height: 1.05;
  letter-spacing: -.035em; color: var(--ink);
}
.artikel-kopf__zeile { margin: clamp(14px, 2vw, 20px) 0 0; max-width: 62ch; font-size: clamp(15px, 1.1vw, 18px); line-height: 1.6; color: #39414C; }

/* Ein deutlicher Hinweis, solange die Daten Platzhalter sind. Er steht
   bewusst oben und nicht im Kleingedruckten - niemand soll die Zahlen
   fuer gerechnet halten. */
.artikel-hinweis {
  max-width: var(--container); margin: clamp(22px, 3vw, 32px) auto 0;
  padding: 14px var(--gutter);
  border-left: 3px solid var(--cyan);
  background: var(--paper-50);
  font-family: var(--font-mono); font-size: 12px; line-height: 1.7;
  letter-spacing: .04em; color: #39414C;
}

/* --------------------------------------------------------------------------
   Das Raster
   Die Karten sind bewusst schmal gehalten: Bei Werbeartikeln zaehlt der
   Ueberblick, nicht das grosse Bild.
   -------------------------------------------------------------------------- */
.artikel-raster {
  max-width: var(--container); margin: 0 auto;
  padding: clamp(2rem, 4vw, 3.4rem) var(--gutter) clamp(4rem, 8vw, 7rem);
  display: grid; gap: clamp(20px, 2.6vw, 34px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
}

/* Am Handy zwei Artikel nebeneinander statt einer je Zeile. Bei einer
   Spalte war pro Bildschirm nur ein Produkt zu sehen - bei 399 Artikeln
   wird das Scrollen endlos. Die 250px-Mindestbreite von oben muss dafuer
   ausser Kraft gesetzt werden, sonst bleibt es bei einer Spalte. */
@media (max-width: 599px) {
  .artikel-raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 14px;
  }
  /* Die Karte selbst steht weiter unten - ganz am Dateiende. Dort muss
     sie stehen, weil die Grundangaben zur Karte erst nach dieser Stelle
     kommen und eine gleich starke Regel sonst gewinnt. */
}

.artikel { display: flex; flex-direction: column; }

/* Bildflaeche. Solange kein Foto da ist, steht hier ein ehrlicher
   Platzhalter statt eines erfundenen Produktbildes. */
/* Bildflaeche.
   QUADRATISCH, weil die Vorlagen des Lieferanten quadratisch sind. Vorher
   stand hier 4:3 - dadurch war der Kasten 313x235, das Bild darin aber
   313x313, und "overflow: hidden" hat Spitze und Druckknopf abgeschnitten.
   Die Hoehe steht deshalb jetzt am Bild selbst und nicht als Prozentwert
   des Kastens: so kann sie gar nicht mehr groesser werden als der Kasten. */
.artikel__bild {
  position: relative; aspect-ratio: 1; overflow: hidden;
  background: var(--paper-100);
  display: grid; place-items: center;
  cursor: zoom-in;
}
.artikel__bild img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1; object-fit: contain;
  transition: transform .18s ease;
}
.artikel__bild:hover img { transform: scale(1.04); }
.artikel__leer {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: #9AA3AE;
}

/* --------------------------------------------------------------------------
   Grossansicht
   Anklicken oeffnet das Bild in voller Groesse - der Lieferant haelt zu
   jedem Foto eine Fassung mit 2000 Pixeln bereit. Die wird erst beim
   Oeffnen geladen, nicht beim Seitenaufbau: 115 Stueck davon waeren rund
   25 MB.
   -------------------------------------------------------------------------- */
.artikel-lupe {
  position: fixed; inset: 0; z-index: 90;
  display: none; place-items: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(247, 248, 250, .97);
  cursor: zoom-out;
}
.artikel-lupe[open] { display: grid; }
.artikel-lupe__buehne {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.artikel-lupe__bild {
  max-width: min(100%, 680px); max-height: 62vh;
  width: auto; height: auto; object-fit: contain;
}

/* Weitere Ansichten des Modells. Was der Lieferant zu einer Farbe nicht
   hat, entfernt das Skript - deshalb darf hier nichts auf eine feste
   Anzahl bauen. */
.artikel-lupe__streifen { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.artikel-lupe__daumen {
  width: 62px; height: 62px; object-fit: contain; cursor: pointer;
  background: #FFFFFF; padding: 4px;
  box-shadow: inset 0 0 0 1px rgba(11,13,16,.12);
  transition: box-shadow .12s ease;
}
.artikel-lupe__daumen:hover { box-shadow: inset 0 0 0 1px rgba(11,13,16,.35); }
.artikel-lupe__daumen.ist-aktiv { box-shadow: inset 0 0 0 2px var(--ink); }
.artikel-lupe__fuss {
  position: absolute; left: 0; right: 0; bottom: clamp(16px, 4vw, 40px);
  text-align: center;
}
.artikel-lupe__name {
  margin: 0; font-family: var(--font-display); font-size: 17px;
  font-weight: 700; color: var(--ink);
}
.artikel-lupe__hinweis {
  margin: 6px 0 0; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; color: #9AA3AE;
}
.artikel-lupe__zu {
  position: absolute; top: clamp(12px, 3vw, 28px); right: clamp(12px, 3vw, 28px);
  width: 40px; height: 40px; padding: 0; cursor: pointer;
  background: none; border: 1px solid var(--line); color: var(--ink);
  font-size: 19px; line-height: 1;
}
.artikel-lupe__zu:hover { border-color: rgba(11,13,16,.35); }

/* Die angebotenen Farben als Punkte - kompakter als Miniaturbilder und
   ausreichend, um die Auswahl zu zeigen. */
.artikel__farben { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; align-items: center; }

/* Die Farbfelder schalten das Bild um, sind also Schaltflaechen.
   Der Rahmen sitzt innen (box-shadow statt border), damit das Feld beim
   Auswaehlen nicht um einen Pixel springt. */
.artikel__farbe {
  width: 16px; height: 16px; padding: 0; border: 0; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(11,13,16,.18);
  transition: box-shadow .12s ease, transform .12s ease;
}
.artikel__farbe:hover { transform: scale(1.12); }
.artikel__farbe.ist-aktiv {
  box-shadow: inset 0 0 0 1px rgba(11,13,16,.18), 0 0 0 2px var(--ink);
}
.artikel__farbe:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.artikel__farbzahl { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; color: #9AA3AE; margin-left: 3px; white-space: nowrap; }

/* Karten ohne Gravurhinweis sollen den Verweis trotzdem auf gleicher
   Hoehe tragen wie die anderen - sonst tanzt die Reihe. */
.artikel__weg { margin-top: auto; }

/* --------------------------------------------------------------------------
   Werkzeugleiste
   Bei 115 Modellen braucht die Seite eine Ordnung - sonst scrollt man
   blind. Bewusst unauffaellig gehalten: Es ist eine Preisliste, keine
   Suchmaske.
   -------------------------------------------------------------------------- */
.artikel-werkzeug {
  max-width: var(--container); margin: 0 auto;
  padding: clamp(2.2rem, 4vw, 3.4rem) var(--gutter) 0;
  display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center;
}
.artikel-werkzeug__satz { display: flex; flex-wrap: wrap; gap: 6px; }
.artikel-knopf {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-muted);
  background: none; border: 1px solid var(--line); padding: 7px 11px;
  cursor: pointer; transition: color .12s ease, border-color .12s ease;
}
.artikel-knopf:hover { color: var(--ink); border-color: rgba(11,13,16,.3); }
.artikel-knopf.ist-aktiv { color: #FFFFFF; background: var(--ink); border-color: var(--ink); }

/* Solange gesucht wird, gilt die Kategorieauswahl nicht - die Knoepfe
   treten deshalb zurueck, statt eine Wirkung vorzutaeuschen. */
.artikel-knopf.ist-ausgesetzt { opacity: .4; }

/* --------------------------------------------------------------------------
   Suchfeld
   Rahmen und Lupe sitzen am Kasten, nicht am Eingabefeld: So bleibt das
   Feld selbst randlos und der ganze Kasten kann auf den Fokus reagieren -
   Lupe inbegriffen.

   WICHTIG: Die Angaben zum Feld muessen zwei Klassen tief stehen. Blocksy
   setzt allen Suchfeldern ueber input:is([type="search"], ...) eigene
   Masse (Inter, 16px, 40px hoch), und das schlaegt eine einzelne Klasse.
   Genau daran ist die erste Fassung gescheitert.
   -------------------------------------------------------------------------- */
.artikel-suche {
  position: relative; display: flex; align-items: center;
  margin-left: auto; width: 208px;
  border: 1px solid var(--line); background: none;
  transition: width .3s cubic-bezier(.2, .7, .25, 1), border-color .16s ease;
}
.artikel-suche:hover { border-color: rgba(11,13,16,.3); }
/* Beim Hineinklicken wird der Kasten breiter: Artikelnamen und Material
   brauchen mehr Platz als das Wort "Suchen". */
.artikel-suche:focus-within { width: min(340px, 40vw); border-color: var(--ink); }
/* Der Strich faehrt von links ein - dieselbe Geste wie unter "Anfragen"
   auf den Karten, damit die Seite eine Sprache spricht. */
.artikel-suche::after {
  content: ""; position: absolute; left: -1px; right: -1px; bottom: -1px;
  height: 2px; background: var(--cyan);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s cubic-bezier(.2, .7, .25, 1);
}
.artikel-suche:focus-within::after { transform: scaleX(1); }

.artikel-suche__lupe {
  flex: none; width: 14px; height: 14px; margin: 0 9px 0 11px;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: square; color: #9AA3AE;
  transition: color .16s ease;
}
.artikel-suche:focus-within .artikel-suche__lupe { color: var(--ink); }

.artikel-suche > .artikel-suche__feld {
  flex: 1 1 auto; min-width: 0; height: 32px;
  margin: 0; padding: 0 30px 0 0;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em;
  color: var(--ink); background: none; border: 0; box-shadow: none;
  -webkit-appearance: none; appearance: none;
}
.artikel-suche > .artikel-suche__feld:focus { outline: none; box-shadow: none; }
.artikel-suche > .artikel-suche__feld::placeholder {
  color: #9AA3AE; opacity: 1;
  text-transform: uppercase; letter-spacing: .14em;
}
/* Die eingebaute Loeschtaste der Browser sieht in jedem anders aus -
   deshalb eine eigene. */
.artikel-suche__feld::-webkit-search-cancel-button { display: none; }
.artikel-suche__weg {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; padding: 0; cursor: pointer;
  background: none; border: 0; color: var(--text-muted);
  font-size: 17px; line-height: 1;
}
.artikel-suche__weg:hover { color: var(--ink); }

/* Trefferzeile unter der Leiste. */
.artikel-treffer {
  max-width: var(--container); margin: 0 auto;
  padding: clamp(14px, 1.6vw, 20px) var(--gutter) 0;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-muted);
}
.artikel-treffer.ist-leer { color: var(--ink); text-transform: none; letter-spacing: .04em; font-size: 12.5px; }

@media (max-width: 859px) {
  /* Am Handy gehoert das Suchfeld nach OBEN: Es ist der schnellere Weg,
     wenn man weiss, was man sucht - und die sieben Kategorieknoepfe
     brauchen dort drei Zeilen. */
  .artikel-werkzeug { flex-direction: column-reverse; align-items: stretch; gap: 14px; }
  /* Am Handy nimmt der Kasten ohnehin die volle Breite - er muss sich
     also nicht aufziehen, wenn man hineintippt. */
  .artikel-suche,
  .artikel-suche:focus-within { margin-left: 0; width: 100%; }
  .artikel-suche > .artikel-suche__feld { height: 42px; font-size: 12px; }
}

.artikel[hidden] { display: none; }

.artikel__name { margin: 12px 0 0; font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--ink); }
.artikel__nr   { margin: 3px 0 0; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; color: #9AA3AE; }

/* Werkstoff, direkt unter der Artikelnummer. Kommt vom Lieferanten; wo er
   nichts hinterlegt hat, entfaellt die Zeile ganz - eine leere Zeile waere
   schlechter als keine. */
.artikel__material,
.artikel__details {
  margin: 2px 0 0;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em;
  color: var(--text-muted);
}
/* Format, Linierung, Speichergroesse - was je Warengruppe anfaellt. Etwas
   blasser als das Material, damit die Zeilen nicht gleich laut sind. */
.artikel__details { color: #9AA3AE; }

.artikel__preis { margin: 10px 0 0; font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--ink); }
.artikel__preis span { font-size: 12px; font-weight: 500; color: #5C6675; }

/* Die Kategorieleiste darf umbrechen - sechs Namen passen am Handy nicht
   nebeneinander. */
.artikel-werkzeug__satz { row-gap: 6px; }

.artikel__weg {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: auto; padding-top: 14px;
  font-family: var(--font-display); font-size: 14px; font-weight: 600;
  color: var(--ink); text-decoration: none;
  align-self: flex-start;
}
.artikel__weg span { border-bottom: 2px solid var(--ink); }
.artikel__weg:hover span { border-bottom-color: var(--cyan); }

/* Das Kleingedruckte unter dem Raster - einmal fuer alle Karten, statt
   es auf jeder zu wiederholen. */
.artikel-fuss {
  max-width: var(--container); margin: 0 auto;
  padding: 0 var(--gutter) clamp(4rem, 8vw, 7rem);
  font-family: var(--font-mono); font-size: 11px; line-height: 1.8;
  letter-spacing: .06em; color: #7A8592;
}

/* --------------------------------------------------------------------------
   Die Karte am Handy
   Steht bewusst GANZ UNTEN: Diese Angaben sind so stark wie die
   Grundangaben zur Karte weiter oben, und bei gleicher Staerke gewinnt
   die spaetere. Weiter oben waren sie wirkungslos.
   -------------------------------------------------------------------------- */
@media (max-width: 599px) {
  /* Auf halber Breite braucht die Schrift etwas weniger Raum, sonst
     brechen Namen und Materialzeile unschoen um. */
  .artikel__name     { font-size: 14px; margin-top: 10px; }
  .artikel__nr,
  .artikel__material,
  .artikel__details  { font-size: 9.5px; letter-spacing: .08em; }
  .artikel__farbe    { width: 13px; height: 13px; }
  .artikel__farben   { gap: 4px; margin-top: 9px; }
  .artikel__weg      { font-size: 13px; padding-top: 10px; }
  /* Auf der halben Karte brach "Kugelschreiber · Art. 1063" um. Die
     Kategorie steht dort ohnehin als aktiver Filter ueber dem Raster -
     auf der Karte ist sie entbehrlich, die Artikelnummer nicht. */
  .artikel__kat      { display: none; }

  /* Mittelachse. Das Produkt steht mittig im Bild, die Angaben darunter
     standen links und endeten alle schon nach zwei Dritteln der Karte -
     dadurch hing jede Karte sichtbar schief. Am Handy sitzt deshalb
     alles auf einer Achse; auf breiten Schirmen bleibt es linksbuendig,
     dort sind die Karten breit genug. */
  .artikel           { text-align: center; }
  .artikel__farben   { justify-content: center; }
  .artikel__weg      { align-self: center; }
}