/* ============================================================
   DER LADEN
   ============================================================

   Neu aufgebaut, nachdem der erste Entwurf zu viel Beiwerk hatte:
   Kartenrahmen, dunkles Panel, Beschreibungsabsatz, Farbtupfer und eine
   „Ansehen"-Zeile — fünf Dinge um ein Foto herum. Die Läden, die
   funktionieren, zeigen Foto, Name, Preis und sonst nichts.

   **Das Raster** folgt Cosmos und Oyster: nackte Kacheln ohne Rahmen,
   die Aufnahme auf ihrem eigenen hellen Feld, der Preis als kleine
   Mono-Pille darauf. Der dunkle Grund der Seite trägt sie, ohne dass es
   einen Kasten dafür braucht.

   **Das Fenster** folgt Superpower: Das Produkt steht in der Mitte, die
   Angaben liegen als eigene Notizkarten daneben und sind mit einer
   Haarlinie samt Punkt daran angeschlossen. Dieselbe Bildsprache benutzt
   die Explosionszeichnung auf der Startseite — der Laden spricht damit
   dieselbe Sprache wie der Rest.
   ============================================================ */

.ist-shop { padding-top: 92px; }


/* ============ KOPF ============ */

.laden__kopf { padding: clamp(30px, 7vh, 84px) 0 clamp(24px, 4vh, 46px); }

.laden__titel {
  font-family: var(--font-display);
  font-size: clamp(40px, 6.2vw, 104px);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.042em;
  margin-top: 14px;
}

.laden__lead {
  margin-top: clamp(16px, 2.2vh, 28px);
  max-width: 46ch;
  font-size: clamp(15px, 1.05vw, 19px);
  line-height: 1.65;
  color: var(--ink-dim);
}


/* ============ DIE LEISTE ============ */

.laden__leiste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hairline);
}
.laden__zahl { color: var(--ink-dim); }

.sortier { display: flex; align-items: center; gap: 12px; }
.sortier__label { color: var(--ink-faint); }
.sortier__feld {
  padding: 8px 30px 8px 12px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 14px center, right 9px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  transition: border-color 0.25s var(--ease-out);
}
.sortier__feld:hover { border-color: rgba(0, 194, 176, 0.5); }
.sortier__feld option { background: var(--surface-2); color: var(--ink); }

.laden__notiz {
  margin-top: 14px;
  font-size: 13px;
  color: var(--ink-dim);
}


/* ============ DAS RASTER ============

   Kein Rahmen, kein Grund, keine Kachel. Die Aufnahmen sind freigestellt
   und liegen unmittelbar auf der Seite — mitsamt ihrem eigenen Schatten,
   der sie auf dem hellen Grund auch aufliegen lässt. Darunter steht in
   einer Zeile, was das Modell ist und was es kostet. */

.raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(18px, 2.4vw, 40px);
  margin-top: clamp(24px, 4vh, 46px);
  padding-bottom: clamp(60px, 12vh, 140px);
  list-style: none;
}

.kachel { display: grid; gap: 16px; }

.kachel__flaeche {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: transform 0.4s var(--ease-out);
}
.kachel__flaeche:focus-visible { outline: 2px solid var(--petrol); outline-offset: 4px; }

.kachel__foto { position: absolute; inset: 0; display: block; }
.kachel__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* **Beim Zeigen die zweite Ansicht.**

   Von vorn ist Pin ein Würfel — man sieht nicht, wie er ins
   Steckgewicht kommt. Beim Zeigen blendet deshalb die Seitenansicht auf,
   auf der der Stift zu sehen ist. Beide Aufnahmen liegen dafür
   übereinander (`.kachel__foto` ist ohnehin absolut gesetzt).

   **Die Klassen stehen nur da, wo es eine zweite Ansicht gibt.** Eine
   Kachel mit nur einer Aufnahme bekommt kein `--erst` und blendet
   deshalb beim Zeigen auch nichts aus.

   Umgeblendet wird auch bei `:focus-within` — wer sich mit der Tastatur
   durch den Laden bewegt, soll dieselbe Ansicht bekommen wie mit der
   Maus.

   **Der Auslöser ist der Bildrahmen, nicht das ganze Kärtchen.** Vorher
   stand hier `.kachel:hover`, und damit wechselte die Ansicht auch, wenn
   man nur über den Namen, den Kurztext oder die Farbtupfer fuhr — also
   an Stellen, die mit dem Bild nichts zu tun haben. Beim Suchen der
   richtigen Farbe sprang das Bild dann bei jedem Tupfer hin und her.

   `.kachel__flaeche` umschliesst genau die Aufnahmen und das Preisschild;
   Name, Kurztext, Knopf und Tupfer liegen ausserhalb davon. Der Rahmen
   ist selbst der Verweis, `:focus-within` an ihm greift also auch für die
   Tastatur — aber eben nur für ihn und nicht mehr für jeden Knopf im
   Kärtchen. */
.kachel__foto--zweit { opacity: 0; }
.kachel__foto--erst,
.kachel__foto--zweit { transition: opacity 0.36s var(--ease-out); }

.kachel__flaeche:hover .kachel__foto--zweit,
.kachel__flaeche:focus-within .kachel__foto--zweit { opacity: 1; }
.kachel__flaeche:hover .kachel__foto--erst,
.kachel__flaeche:focus-within .kachel__foto--erst { opacity: 0; }

/* Ohne Aufnahme bleibt der Umriss — NeoTrack Pin hat noch keine. */
.kachel__ersatz {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0.45;
}
.kachel__ersatz svg { width: 30%; height: auto; }

/* Der Preis liegt auf der Aufnahme, nicht darunter. Damit bleibt die
   Bildunterschrift eine einzige Zeile. */
/* Der Preis steht jetzt nicht mehr auf einer Kachel, sondern frei über
   dem Bild — er braucht deshalb seinen eigenen Grund, damit er auf
   hellem wie dunklem Gerät lesbar bleibt. */
.kachel__preis {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--bg) 76%, transparent);
  color: var(--ink);
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.02em;
  backdrop-filter: blur(10px);
}

.kachel__zeile {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}
.kachel__name {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.3vw, 22px);
  font-weight: 400;
  letter-spacing: -0.02em;
}
.kachel__kurz { color: var(--ink-faint); }

/* Die Tupfer sind Knöpfe: Man kann die Farbe schon hier wählen, ohne
   das Modell zu öffnen. Deshalb sind sie deutlich grösser als eine blosse
   Anzeige — sie müssen sich treffen lassen. Das Wachsen beim Zeigen
   steuert Motion in shop.js. */
.kachel__farben { display: flex; gap: 9px; padding-top: 2px; }
/* Doppelt benannt, damit die Regel unabhängig von der Reihenfolge
   greift: Die Grundregel für .farbtupfer steht weiter unten in dieser
   Datei und gewönne sonst mit gleicher Spezifität. */
.farbtupfer.farbtupfer--klein { width: 26px; height: 26px; }
.farbtupfer.farbtupfer--klein .farbtupfer__kern { width: 15px; height: 15px; }


/* ============ DIE PRODUKTSEITE ============

   Aufbau nach Superpower: Das Produkt steht in der Mitte, die Angaben
   liegen als eigene Notizkarten daneben und sind mit einer Haarlinie
   samt Punkt daran angeschlossen.

   Dieselbe Bildsprache benutzt die Explosionszeichnung auf der
   Startseite — der Laden spricht damit dieselbe Sprache wie der Rest. */

.ist-modell main { padding-bottom: clamp(60px, 12vh, 130px); }
.modell[hidden] { display: none; }

.modell__kopf {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-top: clamp(24px, 5vh, 60px);
  padding-bottom: clamp(18px, 3vh, 34px);
  color: var(--ink-faint);
}
.modell__zurueck {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-dim);
  transition: color 0.25s var(--ease-out);
}
.modell__zurueck:hover { color: var(--petrol-text); }
.modell__kurz { margin-left: auto; }

/* Die Bühne: links zwei Notizkarten, in der Mitte das Produkt, rechts
   zwei weitere. Die Spalten sind schmal gehalten — eine Notiz ist eine
   Notiz und kein Fliesstext. */
.modell__buehne {
  display: grid;
  grid-template-columns: minmax(200px, 300px) minmax(0, 1fr) minmax(200px, 300px);
  grid-template-rows: auto auto;
  gap: clamp(16px, 2.6vw, 40px) clamp(22px, 4vw, 76px);
  align-items: start;
}

/* Auch hier kein Kasten: Das freigestellte Gerät liegt auf der Seite. */
.modell__bild {
  position: relative;
  grid-column: 2;
  grid-row: 1 / 3;
  aspect-ratio: 1 / 1;
}
.modell__foto { position: absolute; inset: 0; display: block; }
.modell__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.modell__ersatz {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0.45;
}
.modell__ersatz svg { width: 28%; height: auto; }


/* ---- Die Notizkarten ----

   **Der Faden zum Produkt ist der Kern der Sache.** Ohne ihn sind es
   vier Kästen neben einem Bild; mit ihm zeigt jede Karte auf das, was
   sie beschreibt. Gezeichnet wird er als Rand am `::after` — eine
   waagerechte Haarlinie aus der inneren Kante heraus — und der Punkt am
   Ende sitzt im `::before`. Beides braucht kein zusätzliches Element und
   verrutscht bei keiner Fenstergrösse. */
.notiz {
  position: relative;
  display: grid;
  align-content: start;
  gap: 11px;
  padding: clamp(15px, 1.2vw, 22px);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  background: var(--surface-1);
}
.notiz::after,
.notiz::before { content: ''; position: absolute; top: 36px; }
.notiz::after {
  width: clamp(22px, 4vw, 76px);
  border-top: 1px solid var(--hairline-hell, color-mix(in srgb, var(--ink) 20%, transparent));
}
.notiz::before {
  width: 5px;
  height: 5px;
  margin-top: -2px;
  border-radius: 50%;
  background: var(--petrol);
}
.notiz--titel::after, .notiz--farben::after { left: 100%; }
.notiz--titel::before, .notiz--farben::before { left: calc(100% + clamp(22px, 4vw, 76px) - 2px); }
.notiz--daten::after, .notiz--immer::after { right: 100%; }
.notiz--daten::before, .notiz--immer::before { right: calc(100% + clamp(22px, 4vw, 76px) - 2px); }

.notiz--titel { grid-column: 1; grid-row: 1; }
.notiz--farben { grid-column: 1; grid-row: 2; }
.notiz--daten { grid-column: 3; grid-row: 1; }
.notiz--immer { grid-column: 3; grid-row: 2; }

.notiz__label { color: var(--ink-faint); }
.notiz__label b {
  margin-left: 8px;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: 0;
}

.notiz__name {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.1vw, 36px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.03em;
}
.notiz__lead {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-dim);
}

.notiz__kaufen {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 9px;
  margin-top: 6px;
  padding: 14px 14px;
  border-radius: 999px;
  background: var(--petrol);
  color: var(--on-petrol);
  font-family: var(--font-label);
  /* Der Knopf ist schmal — ohne dies bricht er zwischen Zahl und
     Währungszeichen um und steht auf drei Zeilen. */
  white-space: nowrap;
  transition: filter 0.25s var(--ease-out), transform 0.2s var(--ease-out);
}
.notiz__kaufen:hover { filter: brightness(1.08); }
.notiz__kaufen:active { transform: scale(0.985); }
.notiz__kaufen span:first-child { font-size: 14px; letter-spacing: 0; }
.notiz__kaufen-text {
  opacity: 0.72;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---- Farbtupfer ---- */
.tupferreihe { display: flex; flex-wrap: wrap; gap: 8px; }
.farbtupfer {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transition: border-color 0.25s var(--ease-out);
}
.farbtupfer:hover { border-color: color-mix(in srgb, var(--petrol) 55%, transparent); }
.farbtupfer[aria-checked="true"] { border-color: var(--petrol-text); }
.farbtupfer:focus-visible { outline: 2px solid var(--petrol); outline-offset: 3px; }
.farbtupfer__kern {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent);
}

/* ---- Die Datenzeile ---- */
.daten { display: grid; gap: 0; }
.daten div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 13.5px;
}
.daten div:last-child { border-bottom: 0; padding-bottom: 0; }
.daten dt { color: var(--ink-faint); }
.daten dd { color: var(--ink); text-align: right; }

/* ---- Chips ---- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.chips li {
  padding: 5px 10px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-family: var(--font-label);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* ---- Die anderen Modelle ---- */
.modell__weitere {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(26px, 5vh, 56px);
  padding-top: clamp(14px, 2vw, 22px);
  border-top: 1px solid var(--hairline);
}
.wechsel {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 11px 18px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--ink);
  font-size: 14px;
  transition: border-color 0.25s var(--ease-out);
}
.wechsel:hover { border-color: var(--petrol-text); }
.wechsel b {
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 400;
  color: var(--petrol-text, var(--petrol));
}

.modell__fehlt {
  padding: clamp(60px, 14vh, 160px) var(--gutter);
  text-align: center;
  color: var(--ink-dim);
}
.modell__fehlt a { color: var(--petrol-text, var(--petrol)); }


/* ============ SCHMALE SCHIRME ============ */
@media (max-width: 980px) {
  .ist-shop { padding-top: 76px; }
  /* Die Fäden ergeben nur nebeneinander einen Sinn. Untereinander
     zeigten sie ins Leere, deshalb fallen sie hier weg. */
  .modell__buehne { grid-template-columns: minmax(0, 1fr); }
  .modell__bild { grid-column: 1; grid-row: auto; }
  .notiz { grid-column: 1 !important; grid-row: auto !important; }
  .notiz::after, .notiz::before { display: none; }
  .laden__leiste { flex-direction: column; align-items: flex-start; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .kachel__flaeche { transition: none; }
  /* Umgeblendet wird weiterhin — das ist Inhalt, keine Zierde. Nur eben
     ohne Überblendung. */
  .kachel__foto--erst, .kachel__foto--zweit { transition: none; }
}