/* KARTENFENSTER (fenster.js). Grundstil .detail* aus styles.css (das alte
   Detailfenster). Hier nur, was neu ist: die Daten als Kacheln im 2er-Raster
   statt als Liste (Felix, 29.10.2026: "ueberleg dir ein bisschen andere
   Anordnung - dass es voller aussieht und alles drinsteht"). */

.fenster-merkmale {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
  margin: 24px 32px 0;
}
.fenster-merkmal {
  display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg-soft);
}
.fenster-merkmal.breit { grid-column: 1 / -1; }
.fenster-merkmal-name {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.fenster-merkmal-wert {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--navy); overflow-wrap: anywhere;
}
/* Farbpunkt des Zustands (Farben je Stufe in kachel.css), hier etwas groesser;
   den Abstand gibt schon das gap der Zeile. */
.fenster-merkmal-wert .zustand-punkt { width: 10px; height: 10px; margin-right: 0; }

/* MEHR FARBE (Felix, 29.10.2026: "bring in das ganze Verkaufsfenster noch
   ein bisschen mehr Farbe rein. Versuche erstmal blau"). Blau auf der
   rechten Seite - hinter dem Kartenbild bleibt es hell (Navy als Kasten
   hinter Produktbildern hat Felix bei den Highlights abgelehnt): Edition
   und Zeichen im Kauf-Blau (--cta), Datenkacheln zart blau, der Kaufblock
   als Navy-Flaeche mit weissem Preis und goldenem Knopf. */
.detail-gallery { background: radial-gradient(120% 90% at 50% 20%, #ffffff 0%, #eef2f9 58%, #dde5f2 100%); }
.detail-box .detail-eyebrow { color: var(--cta); }
.fenster-merkmal { background: #eef3fb; border-color: #d8e2f3; }
.fenster-merkmal-name { color: #4d6aa3; }
.detail-box .detail-hinweise { background: #f4f7fc; box-shadow: inset 0 0 0 1px #e1e8f5; }
.detail-box .detail-hinweise svg { color: var(--cta); }
.detail-box .detail-kauf {
  border-top: 0; background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
}
.detail-box .detail-price { color: #fff; }
.detail-box .detail-zusatz { color: rgba(255, 255, 255, .72); }
.detail-box .detail-zusatz .knapp { color: var(--gold-hell); }
.detail-box .detail-kauf .add-btn:focus-visible { outline-color: #fff; }

/* LUPE (lupe.js) statt des alten Zooms, bei dem das ganze Bild unter dem
   Zeiger wuchs und mitschwamm (styles.css .detail-main:hover img - hier
   abgeschaltet). Runde Linse mit weissem Rand und Navy-Ring, springt beim
   Betreten weich auf; der Zeiger verschwindet in ihr. Darf ueber den Rand
   des Bildes hinausragen, deshalb kein Abschneiden mehr. */
@media (hover: hover) {
  .detail-main { overflow: visible; cursor: default; }
  .detail-main:hover img { transform: none; }
  .detail-main.lupe-an { cursor: none; }
}
.lupe {
  --lupe: 240px;
  position: absolute; left: 0; top: 0; z-index: 1; box-sizing: border-box;
  width: var(--lupe); height: var(--lupe); border: 3px solid #fff; border-radius: 50%;
  /* Neben der Karte zeigt die Lupe den Grund der Galerie, kein Weiss. */
  background: #e9eef7 no-repeat; pointer-events: none;
  box-shadow: 0 0 0 2px var(--navy), 0 0 0 6px rgba(11, 27, 58, .12), 0 26px 50px -14px rgba(11, 27, 58, .6);
  opacity: 0; scale: .5; transition: opacity .18s ease, scale .3s cubic-bezier(.2, .9, .3, 1.2);
}
.lupe.an { opacity: 1; scale: 1; }
/* Kein Glanz, kein Schatten nach innen: die Lupe zeigt die Karte genau so,
   wie sie ist (Felix, 29.10.2026: "die soll einfach wirklich original nur
   die Karte zeigen"). */
/* Staerke, kurz beim Aendern (Mausrad, Klick). */
.lupe-stufe {
  position: absolute; left: 50%; bottom: 14px; z-index: 1; translate: -50% 0;
  padding: 3px 9px; border-radius: 999px; background: rgba(11, 27, 58, .85);
  font-size: 12px; font-weight: 800; line-height: 1.3; color: #fff; font-variant-numeric: tabular-nums;
  opacity: 0; transition: opacity .2s ease;
}
.lupe.stufe-zeigen .lupe-stufe { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .lupe { transition: opacity .1s linear; scale: 1; } }

@media (max-width: 900px) {
  .fenster-merkmale { margin-left: 24px; margin-right: 24px; }
}
@media (max-width: 640px) {
  .fenster-merkmale { margin: 18px 16px 0; gap: 8px; }
  .fenster-merkmal { padding: 10px 12px; }
  .fenster-merkmal-wert { font-size: 14px; }
}