/* Eigene Shop-Seite (18.10.2026, Michas „Kaufbereich besser abgetrennt von der One Page“).
   /shop ist dieselbe index.html ohne die Abschnitte der Startseite (server.mjs alsShopSeite), erkennbar an
   html[data-seite="shop"]. Auf der Startseite steht bei „NEUE FUNDE“ nur der Eingang „SHOP ANSEHEN“, der Weg dorthin ist
   animiert (shop-eingang.js). Nach suche.css geladen. */

/* 1. Startseite: nur der Eingang (Runde 2, Michas „NEUE FUNDE und SHOP ANSEHEN zusammen machen keinen Sinn“). Kopfzeile,
      Überschrift, Karten und Filter sind weg, das Band ist der ganze Abschnitt, „NEUE FUNDE“ steht klein in seiner Zeile.
      Die Überschrift bleibt für Screenreader (sie benennt den Abschnitt), die Karten bleiben unsichtbar im Dokument,
      Suche, Tasche und Merkliste brauchen sie. */
html:not([data-seite="shop"]) .shop-section :is(.section-topline, .category-row, .shop-toolbar, .results-line, .photo-note, .product-grid, .empty-results, .shop-bottom) { display: none !important; }
html:not([data-seite="shop"]) .shop-section .shop-heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
/* Runde 4 (Michas „SHOP ANSEHEN zu wenig abgetrennt von DER ERSTE FUND FINDET DICH“): der Eingang ist eine Karte mit
   Luft ringsum, darunter trennt die Linie des Abschnitts vom nächsten. */
html:not([data-seite="shop"]) .shop-section { position: relative; padding-top: clamp(34px, 4.6vw, 66px); padding-bottom: clamp(40px, 5.4vw, 78px); border-bottom: 1px solid var(--line); }
html[data-seite="shop"] .shop-eingang { display: none; }

/* Die Karte: eigener Rahmen und eine Spur hellere Fläche als die Seite (über Tokens, im hellen Modus eine Spur dunkler),
   oben ein feiner Glanz wie bei Kopfleiste und Sprachschalter. Rechts in der Zeile stehen die Kategorien (nicht noch
   einmal „Handverlesen“, das steht im Streifen darüber). Die Schrift ist kleiner als die Überschriften der Abschnitte
   und steht am Laptop in einer Zeile, damit sie nicht wie die nächste Überschrift wirkt. */
.shop-eingang {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: clamp(18px, 3vw, 44px);
  row-gap: clamp(18px, 2.6vw, 34px);
  padding: clamp(22px, 3.2vw, 46px) clamp(20px, 3.4vw, 52px) clamp(26px, 3.6vw, 52px);
  overflow: hidden;
  border: 1px solid var(--line);
  color: var(--paper);
  background-color: color-mix(in srgb, var(--paper) 3%, var(--black));
  box-shadow: inset 0 1px 0 var(--glass-glint);
  text-decoration: none;
}
.shop-eingang-zeile { display: flex; grid-column: 1 / -1; justify-content: space-between; gap: 18px; color: var(--muted); font: 9px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; transition: opacity .5s ease .2s, translate .5s var(--ease) .2s; }
.shop-eingang-zahl:not(:empty)::before { margin: 0 .9em; content: "/"; }
.shop-eingang-titel { display: block; font: 800 clamp(40px, 7.2vw, 118px)/.86 var(--display); letter-spacing: -.06em; transition: translate .7s cubic-bezier(.2, .8, .2, 1), opacity .5s ease; }
.shop-eingang-symbol { display: grid; width: clamp(54px, 6.6vw, 100px); aspect-ratio: 1; place-items: center; border: 1px solid currentColor; border-radius: 50%; transition: color .35s ease, background-color .35s ease, border-color .35s ease, scale .7s cubic-bezier(.3, 1.4, .5, 1) .25s, rotate .7s cubic-bezier(.3, 1.4, .5, 1) .25s, opacity .4s ease .25s; }
.shop-eingang-symbol svg { width: 44%; height: 44%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transform-origin: 50% 14%; }

/* Drüberfahren (Runde 3, Michas „die weiße Fläche und der Pfeil sind verwirrend, nicht clean, nicht gut abgeschnitten,
   mit einem Symbol kannst du arbeiten“): ruhig und ohne Anschnitt. Die Karte hellt sich kaum merklich auf, die Schrift
   rückt ein Stück nach rechts, der Kreis füllt sich hell und der Kleiderbügel darin schwingt einmal am Haken.
   Tastatur: :focus-visible wie Drüberfahren. */
.shop-eingang { transition: background-color .45s ease; }
.shop-eingang:is(:hover, :focus-visible) { background-color: color-mix(in srgb, var(--paper) 6.5%, var(--black)); }
.shop-eingang:is(:hover, :focus-visible) .shop-eingang-titel { translate: clamp(8px, 1vw, 16px) 0; }
.shop-eingang:is(:hover, :focus-visible) .shop-eingang-symbol { border-color: var(--paper); color: var(--black); background: var(--paper); }
.shop-eingang:is(:hover, :focus-visible) .shop-eingang-symbol svg { animation: buegel-schwingt 1.1s cubic-bezier(.3, .7, .4, 1); }
@keyframes buegel-schwingt { 0%, 100% { rotate: 0deg; } 18% { rotate: -11deg; } 40% { rotate: 7deg; } 62% { rotate: -3.5deg; } 82% { rotate: 1.2deg; } }
.shop-eingang:focus-visible { outline: 1px solid var(--paper); outline-offset: 4px; }
/* Auftritt, sobald das Band ins Bild kommt (shop-eingang.js): die Schrift steigt aus der unteren Kante. */
.shop-eingang.is-wartend:not(.is-da) .shop-eingang-titel { opacity: 0; translate: 0 110%; }
.shop-eingang.is-wartend:not(.is-da) .shop-eingang-symbol { opacity: 0; rotate: -90deg; scale: .4; }
.shop-eingang.is-wartend:not(.is-da) .shop-eingang-zeile { opacity: 0; translate: 0 8px; }

/* Runde 5 (19.10.2026, Micha: „bei SHOP ANSEHEN noch eine Kleinigkeit mit dem Hintergrund und den Rand ein bisschen
   markant, damit man direkt sieht, dass es nicht untergeht“): heller Rand mit Eckwinkeln wie bei einem Sucher, ein weicher
   Lichtschein von rechts und dahinter ganz blass die „27“ als Wasserzeichen (kein zweiter Bügel, Micha: „zweimal ein
   Kleiderbügel darf nicht sein“). Ruhig, nichts bewegt sich;
   beim Drüberfahren wird der Rand noch heller. Farben über Tokens, im hellen Modus dunkel statt hell. */
.shop-eingang {
  border-color: color-mix(in srgb, var(--paper) 34%, transparent);
  background-image: radial-gradient(75% 140% at 92% 50%, color-mix(in srgb, var(--paper) 10%, transparent), transparent 70%);
  box-shadow: inset 0 1px 0 var(--glass-glint), 0 18px 50px rgba(0, 0, 0, .28);
  transition: background-color .45s ease, border-color .35s ease;
}
:root[data-theme="light"] .shop-eingang { box-shadow: inset 0 1px 0 var(--glass-glint), 0 14px 36px rgba(var(--ink-rgb), .1); }
.shop-eingang > * { position: relative; z-index: 1; }
.shop-eingang::before {
  --ecke: clamp(16px, 2vw, 26px);
  position: absolute;
  z-index: 2;
  inset: 0;
  background:
    linear-gradient(var(--paper) 0 0) left top / var(--ecke) 2px,
    linear-gradient(var(--paper) 0 0) left top / 2px var(--ecke),
    linear-gradient(var(--paper) 0 0) right top / var(--ecke) 2px,
    linear-gradient(var(--paper) 0 0) right top / 2px var(--ecke),
    linear-gradient(var(--paper) 0 0) left bottom / var(--ecke) 2px,
    linear-gradient(var(--paper) 0 0) left bottom / 2px var(--ecke),
    linear-gradient(var(--paper) 0 0) right bottom / var(--ecke) 2px,
    linear-gradient(var(--paper) 0 0) right bottom / 2px var(--ecke);
  background-repeat: no-repeat;
  content: "";
  pointer-events: none;
}
.shop-eingang::after {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: clamp(-10px, 4vw, 90px);
  width: clamp(190px, 26vw, 380px);
  aspect-ratio: 1;
  background: var(--paper);
  content: "";
  opacity: .055;
  pointer-events: none;
  translate: 0 -50%;
  -webkit-mask: url("assets/27-zeichen.svg") center / contain no-repeat;
  mask: url("assets/27-zeichen.svg") center / contain no-repeat;
}
.shop-eingang:is(:hover, :focus-visible) { border-color: color-mix(in srgb, var(--paper) 62%, transparent); }

/* Schwebender Knopf (shop-eingang.js): erscheint, wenn man am Eingang vorbeigescrollt ist, ohne zu klicken. Glas wie
   Kopfleiste und Sprachschalter, der Kreis mit dem Bügel wie im Eingang. Beim Erscheinen schwingt der Bügel einmal. */
.shop-schwebe {
  position: fixed;
  z-index: 45;
  right: var(--gutter);
  bottom: max(20px, env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 8px 6px 6px;
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  color: var(--paper);
  background: color-mix(in srgb, var(--black) 80%, transparent);
  box-shadow: inset 0 1px 0 var(--glass-glint), 0 14px 34px rgba(0, 0, 0, .38);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  font: 10px/1 var(--mono);
  letter-spacing: .16em;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  translate: 0 12px;
  scale: .94;
  /* Ausblenden weich (19.10.2026, Micha: „nicht so radikal ausblenden, wenn ich bei der Galerie ankomme“). */
  transition: opacity .65s ease, translate .7s cubic-bezier(.4, 0, .2, 1), scale .7s cubic-bezier(.4, 0, .2, 1), visibility 0s .7s, border-color .25s;
}
.shop-schwebe.is-sichtbar { opacity: 1; visibility: visible; translate: 0 0; scale: 1; transition: opacity .45s ease, translate .6s cubic-bezier(.2, .8, .2, 1), scale .6s cubic-bezier(.2, .8, .2, 1), visibility 0s, border-color .25s; }
.shop-schwebe-symbol { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: var(--black); background: var(--paper); }
.shop-schwebe-symbol svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transform-origin: 50% 14%; }
.shop-schwebe-zahl { display: grid; min-width: 24px; height: 24px; place-items: center; padding: 0 6px; border: 1px solid var(--line); border-radius: 999px; font-size: 9px; letter-spacing: .06em; }
.shop-schwebe-zahl:empty { display: none; }
.shop-schwebe.is-sichtbar .shop-schwebe-symbol svg { animation: buegel-schwingt 1.1s cubic-bezier(.3, .7, .4, 1) .35s; }
.shop-schwebe:is(:hover, :focus-visible) { border-color: var(--paper); }
.shop-schwebe:is(:hover, :focus-visible) .shop-schwebe-symbol svg { animation: buegel-schwingt 1.1s cubic-bezier(.3, .7, .4, 1); }
.shop-schwebe:focus-visible { outline: 1px solid var(--paper); outline-offset: 3px; }
@media (max-width: 680px) {
  .shop-schwebe { right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); gap: 10px; font-size: 9px; }
  .shop-schwebe-symbol { width: 32px; height: 32px; }
}

/* 2. Der Übergang. Startseite (.is-zu): ein Kreis geht aus dem Klickpunkt auf (transform statt clip-path, läuft auf dem
      Grafikchip), „SHOP“ steigt Buchstabe für Buchstabe aus dem Schlitz, der Balken läuft bis zum Seitenwechsel.
      Shop-Seite (html.shop-ankunft): dieselbe Fläche steht schon beim ersten Bild und fährt nach oben weg. */
.shop-vorhang { position: fixed; z-index: 2147483000; inset: 0; display: none; place-items: center; color: var(--black); pointer-events: none; }
.shop-vorhang.is-zu, html.shop-ankunft .shop-vorhang { display: grid; pointer-events: auto; }
.shop-vorhang-kreis { position: absolute; top: var(--y, 50%); left: var(--x, 50%); width: var(--d, 300vmax); height: var(--d, 300vmax); margin: calc(var(--d, 300vmax) / -2) 0 0 calc(var(--d, 300vmax) / -2); border-radius: 50%; background: var(--paper); transform: scale(0); }
.shop-vorhang-innen { position: relative; display: grid; width: min(1180px, calc(100% - 2 * var(--gutter))); gap: clamp(14px, 2vw, 26px); }
.shop-vorhang-zeile { display: flex; justify-content: space-between; gap: 16px; margin: 0; font: 9px/1 var(--mono); letter-spacing: .2em; opacity: .72; }
.shop-vorhang-wort { display: flex; justify-content: center; margin: 0; padding: .05em 0; overflow: hidden; font: 800 clamp(96px, 27vw, 380px)/.8 var(--display); letter-spacing: -.07em; }
.shop-vorhang-wort b { display: block; font-weight: inherit; }
.shop-vorhang-balken { display: block; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; }

.shop-vorhang.is-zu .shop-vorhang-kreis { animation: vorhang-auf .62s cubic-bezier(.7, 0, .3, 1) forwards; }
.shop-vorhang.is-zu .shop-vorhang-wort b { animation: vorhang-buchstabe .5s cubic-bezier(.2, .8, .2, 1) calc(.24s + var(--i) * 55ms) backwards; }
.shop-vorhang.is-zu .shop-vorhang-zeile { animation: vorhang-zeile .45s ease .4s backwards; }
.shop-vorhang.is-zu .shop-vorhang-balken { animation: vorhang-balken .55s cubic-bezier(.6, 0, .4, 1) .22s forwards; }
@keyframes vorhang-auf { to { transform: scale(1); } }
@keyframes vorhang-buchstabe { from { transform: translateY(108%); } }
@keyframes vorhang-zeile { from { opacity: 0; transform: translateY(8px); } }
@keyframes vorhang-balken { to { transform: scaleX(.62); } }

html.shop-ankunft .shop-vorhang { background: var(--paper); box-shadow: 0 40px 90px rgba(0, 0, 0, .45); }
html.shop-ankunft .shop-vorhang-kreis { display: none; }
/* Während /shop lädt, läuft der Balken von der Startseite aus weiter, damit das Warten nach Laden aussieht. */
html.shop-ankunft .shop-vorhang-balken { transform: scaleX(.62); animation: vorhang-laden 1.2s cubic-bezier(.2, .6, .3, 1) forwards; }
@keyframes vorhang-laden { to { transform: scaleX(1); } }
html.shop-ankunft-los .shop-vorhang { animation: vorhang-hoch .9s cubic-bezier(.76, 0, .24, 1) .06s forwards; }
html.shop-ankunft-los .shop-vorhang-wort b { animation: vorhang-raus .46s cubic-bezier(.6, 0, .8, .4) calc(var(--i) * 45ms) forwards; }
html.shop-ankunft-los :is(.shop-vorhang-zeile, .shop-vorhang-balken) { animation: vorhang-weg .3s ease forwards; }
html.shop-ankunft-los .shop-vorhang-balken { transform: none; }
html.shop-ankunft-los #inhalt { animation: shop-steigt 1s cubic-bezier(.2, .8, .2, 1) .22s backwards; }
@keyframes vorhang-hoch { to { transform: translateY(-100%); } }
@keyframes vorhang-raus { to { transform: translateY(-112%); } }
@keyframes vorhang-weg { to { opacity: 0; } }
@keyframes shop-steigt { from { opacity: .25; translate: 0 70px; } }
/* Notbremse: Läuft das Skript nicht, verschwindet die Fläche trotzdem. */
html.shop-ankunft:not(.shop-ankunft-los) .shop-vorhang { animation: vorhang-notaus .3s ease 2.5s forwards; }
@keyframes vorhang-notaus { to { opacity: 0; visibility: hidden; } }

@media (max-width: 680px) {
  .shop-eingang-titel { font-size: clamp(38px, 11.5vw, 58px); }
  .shop-eingang-zeile { font-size: 9px; letter-spacing: .14em; }
  .shop-eingang-arten { display: none; }
  .shop-vorhang-zeile { font-size: 9px; letter-spacing: .14em; }
  /* Handy (27.10.2026, Micha: „die Schrift schreibt sich von oben runter: oben S, darunter H, dann O, dann P“, dazu „wie
     auf dem Desktop vom Stil her, der weiße Hintergrund“; davor stand „SHOP“ quer und klein, kurz auch als Rolltor mit
     Graffiti). Die helle Fläche ist genau ein Bildschirm groß und fährt von oben herein. Die vier Buchstaben stehen
     untereinander und füllen die Höhe zwischen den Zeilen, jeder schreibt sich von oben nach unten auf (clip-path), einer
     nach dem anderen. Gerechnet wird mit der Höhe: Großbuchstaben sind in jeder Ersatzschrift etwa gleich hoch, auch auf
     dem iPhone, wo Arial Black fehlt. Kein Kreis aus dem Tipp-Punkt (auf dem iPhone fast 1900 px groß, kann ruckeln). Auf
     der Shop-Seite fährt die Fläche mit den Buchstaben oben wieder raus. */
  .shop-vorhang.is-zu { background: var(--paper); animation: vorhang-von-oben .56s cubic-bezier(.7, 0, .25, 1) both; }
  .shop-vorhang .shop-vorhang-kreis { display: none; }
  .shop-vorhang-innen { align-self: stretch; grid-template-rows: auto 1fr auto auto; padding: 20px 0 28px; }
  .shop-vorhang-wort { flex-direction: column; align-items: center; justify-content: center; padding: 0; overflow: visible; font-size: min(calc((100svh - 150px) / 3.3), 62vw); line-height: .8; letter-spacing: 0; }
  .shop-vorhang.is-zu .shop-vorhang-wort b { animation: vorhang-schreibt .26s cubic-bezier(.3, .7, .3, 1) calc(.3s + var(--i) * 70ms) both; }
  html.shop-ankunft-los .shop-vorhang-wort b { animation: none; }
  html.shop-ankunft .shop-vorhang { box-shadow: 0 30px 60px rgba(0, 0, 0, .4); }
}
@keyframes vorhang-von-oben { from { transform: translateY(-100%); } }
@keyframes vorhang-schreibt { from { clip-path: inset(-5% -5% 105% -5%); translate: 0 -.08em; } to { clip-path: inset(-5%); translate: 0 0; } }
/* Antippen auf dem Handy: der Eingang drückt sich sichtbar, der Bügel-Knopf füllt sich (am Laptop macht das Drüberfahren). */
@media (hover: none) {
  .shop-eingang { -webkit-tap-highlight-color: transparent; transition: background-color .2s ease, scale .2s ease; }
  .shop-eingang:active { scale: .985; background-color: color-mix(in srgb, var(--paper) 8%, var(--black)); }
  .shop-eingang:active .shop-eingang-symbol { border-color: var(--paper); color: var(--black); background: var(--paper); transition-delay: 0s; }
}
@media (prefers-reduced-motion: reduce) {
  .shop-vorhang { display: none !important; }
  .shop-eingang, .shop-eingang * { transition: none !important; animation: none !important; }
  .shop-schwebe, .shop-schwebe * { transition: none !important; animation: none !important; }
}

/* 3. Shop-Seite: der Laden beginnt direkt unter dem Streifen „Handverlesen …“ und füllt mindestens das Fenster,
      damit die Fußzeile bei wenigen Stücken nicht nach oben rutscht. */
html[data-seite="shop"] .shop-section { min-height: calc(100svh - 140px); padding-top: clamp(38px, 4.5vw, 60px); border-bottom: 0; }
@media (max-width: 680px) {
  html[data-seite="shop"] .shop-section { min-height: calc(100svh - 120px); padding-top: 30px; }
}