/* SENSUENA – Phase 184: Kachel „Passermarke“, Welten-Verzeichnis der Startseite, Regal im Shop.
   Grundsatz: kein Kasten, kein Schatten, keine runde Ecke, keine Pille. Das Foto liegt frei wie ein Stück auf dem Lasertisch,
   vier Passermarken fassen es ein. Bewegung gibt es nur als Antwort auf Zeigen oder Fokus. */

/* ---------- Raster ---------- */
.sx-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:64px 44px;grid-auto-flow:dense;padding:13px}
.rg-grid.sx-grid{gap:64px 44px;grid-template-columns:repeat(4,minmax(0,1fr))}

/* ---------- Kachel ---------- */
.sx-card,.sx-card.rg-card{display:flex;flex-direction:column;gap:18px;min-width:0;background:none;border:0;border-radius:0;overflow:visible;color:var(--ink);text-decoration:none;transform:none;transition:none}
.sx-card:hover,.sx-card.rg-card:hover{color:var(--ink);transform:none;border:0}
.sx-card[hidden]{display:none!important}
.sx-card:focus-visible{outline:none}
.sx-ph{position:relative;display:block;aspect-ratio:1;background:#151413}
.sx-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sx-i2{opacity:0;transition:opacity .45s ease}
.sx-none{position:absolute;inset:0;background:repeating-linear-gradient(135deg,#191817 0 10px,#151413 10px 20px)}

/* Passermarken: vier Winkel knapp außerhalb des Fotos */
.sx-ph::before,.sx-frame::before,.hl-im::before{content:"";position:absolute;inset:-9px;z-index:2;pointer-events:none;opacity:.5;--m:var(--brass);--l:15px;
  transition:inset .4s cubic-bezier(.2,.7,.2,1),opacity .3s;
  background:
    linear-gradient(var(--m),var(--m)) left top/var(--l) 1px no-repeat,linear-gradient(var(--m),var(--m)) left top/1px var(--l) no-repeat,
    linear-gradient(var(--m),var(--m)) right top/var(--l) 1px no-repeat,linear-gradient(var(--m),var(--m)) right top/1px var(--l) no-repeat,
    linear-gradient(var(--m),var(--m)) left bottom/var(--l) 1px no-repeat,linear-gradient(var(--m),var(--m)) left bottom/1px var(--l) no-repeat,
    linear-gradient(var(--m),var(--m)) right bottom/var(--l) 1px no-repeat,linear-gradient(var(--m),var(--m)) right bottom/1px var(--l) no-repeat}
/* Laserlinie: fährt beim Zeigen einmal von Marke zu Marke */
.sx-ls{position:absolute;left:-13px;bottom:-13px;z-index:3;height:1px;width:0;background:var(--brass);pointer-events:none;opacity:0}
.sx-ls::after{content:"";position:absolute;right:-3px;top:-3px;width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px var(--laser),0 0 14px 4px var(--laser);opacity:0}
@media (hover:hover){
  .sx-card:hover .sx-ph::before{inset:-13px;opacity:1}
  .sx-card:hover .sx-ls{width:calc(100% + 26px);opacity:1;transition:width .75s cubic-bezier(.3,.1,.2,1)}
  .sx-card:hover .sx-ls::after{animation:sx-dot .95s linear both}
  .sx-card:hover .sx-i2.rdy{opacity:1}
  .sx-card:hover .sx-nm{color:var(--brass)}
}
.sx-card:focus-visible .sx-ph::before{inset:-13px;opacity:1;--m:var(--laser)}
.sx-card:focus-visible .sx-ls{width:calc(100% + 26px);opacity:1;background:var(--laser)}
@keyframes sx-dot{0%{opacity:1}80%{opacity:1}100%{opacity:0}}

.sx-tx{display:flex;flex-direction:column;gap:5px;min-width:0}
.sx-note{color:var(--brass);font-size:13.5px;line-height:1.3}
.sx-nm{margin:0;font:400 25px/1.12 var(--serif);letter-spacing:-.005em;color:var(--ink);text-wrap:balance;transition:color .25s}
.sx-ds{color:var(--muted);font-size:14.5px;line-height:1.45}
.sx-ft{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px;margin-top:8px;font-size:14px;font-variant-numeric:tabular-nums}
.sx-pr{font-size:16px;font-weight:600;color:var(--ink);white-space:nowrap}
.sx-pr small{font-size:13px;font-weight:400;color:var(--muted)}
.sx-st{display:inline-flex;align-items:center;gap:4px;color:var(--muted);font-size:12.5px}
.sx-st .stars{font-size:11px}
.sx-eta{flex-basis:100%;color:var(--muted);font-size:13.5px;white-space:nowrap}

/* große Kachel */
.sx-big{grid-column:span 2;grid-row:span 2}
.sx-big.sx-r{grid-column:3/span 2}
.sx-big .sx-ph{flex:1 1 auto;aspect-ratio:auto;min-height:380px}
.sx-big .sx-nm{font-size:clamp(32px,3.1vw,44px);line-height:1.05}
.sx-big .sx-ds{font-size:16px;max-width:34em}
.sx-big .sx-tx{gap:8px}

/* Holzschild mit dem Namen (name.js) */
.sx-ph .nm-tag{top:14px;left:-4px;z-index:4}
.sx-ph .sx-note~.nm-tag{top:14px}

/* ---------- Überschriften und Links ---------- */
.sx-h{margin:0 0 30px;font:400 clamp(34px,3.6vw,52px)/1.05 var(--serif);letter-spacing:-.015em;color:var(--ink)}
.sx-all{color:var(--ink);font-size:16px;text-decoration:underline;text-decoration-color:var(--brass);text-decoration-thickness:1px;text-underline-offset:6px;white-space:nowrap}
.sx-all:hover{color:var(--brass)}

/* ---------- Startseite: Welten als Verzeichnis ---------- */
.sx-home{padding:104px 0 112px}
.sx-idx{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:88px;align-items:start}
.sx-rows{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line)}
.sx-row{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:28px;align-items:baseline;padding:22px 0 24px;border-top:1px solid var(--line);color:var(--ink);text-decoration:none}
.sx-row:hover{color:var(--ink)}
.sx-row-th{display:none}
.sx-row-n{grid-column:1;font:400 clamp(30px,3.3vw,46px)/1.05 var(--serif);letter-spacing:-.01em;transition:color .25s,transform .35s cubic-bezier(.2,.7,.2,1)}
.sx-row-t{grid-column:1;margin-top:7px;color:var(--muted);font-size:15.5px}
.sx-row-m{grid-column:2;grid-row:1;color:var(--ink-2);font-size:14.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.sx-row.on .sx-row-n,.sx-row:focus-visible .sx-row-n{color:var(--brass);transform:translateX(12px)}
.sx-row:focus-visible{outline:2px solid var(--laser);outline-offset:-2px}
.sx-idx-r{position:sticky;top:112px;padding:13px}
.sx-frame{position:relative;aspect-ratio:4/5;background:#151413}
.sx-frame::before{opacity:.9}
.sx-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease}
.sx-frame img.on{opacity:1}
.sx-picks{margin-top:112px}
.sx-picks-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 32px;margin-bottom:34px}
.sx-picks-h .sx-h{margin:0}

/* ---------- Shop ---------- */
.sx-intro{padding:8px 0 44px;display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.sx-h1{margin:0;max-width:15em;font:400 clamp(40px,5.2vw,72px)/1.02 var(--serif);letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.rg.sx-shop{padding:0 0 40px}
.sx-shop .nm-find{margin:0 0 34px}
.sx-tabs{display:flex;flex-wrap:wrap;gap:6px 34px;align-items:baseline;border-bottom:1px solid var(--line)}
.sx-tab{position:relative;padding:0 0 14px;margin-bottom:-1px;border:0;border-bottom:2px solid transparent;background:none;color:var(--muted);font:400 26px/1.1 var(--serif);cursor:pointer;text-decoration:none;white-space:nowrap;transition:color .2s,border-color .2s}
.sx-tab small{margin-left:6px;font:400 12.5px var(--sans);color:var(--muted);vertical-align:top;font-variant-numeric:tabular-nums}
.sx-tab:hover{color:var(--ink)}
.sx-tab.on{color:var(--ink);border-bottom-color:var(--brass)}
.sx-tab:focus-visible{outline:2px solid var(--laser);outline-offset:4px}
.sx-tab-v{margin-left:auto;font-size:19px}
.sx-shop .rg-bar{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;margin:0 0 36px;padding:14px 0;border-bottom:0;background:rgba(9,9,11,.94)}
.sx-bud{display:contents}
.sx-shop .rg-cnt{margin-left:0;color:var(--muted);font-size:14.5px}
.sx-shop .rg-reset{padding:0}
.sx-sort{margin-left:auto;color:var(--muted);font-size:14.5px}
.sx-shop .rg-sort{height:auto;padding:2px 2px 3px;border:0;border-bottom:1px dashed var(--birch-deep);border-radius:0;background:transparent;color:var(--ink);font:inherit;cursor:pointer}
.sx-shop .rg-sort option{color:#111;background:#fff}
.sx-shop .rg-empty{border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;padding:56px 16px;font:400 24px/1.3 var(--serif);color:var(--ink)}
.sx-ways{margin:88px 0 8px;padding-top:26px;border-top:1px solid var(--line);display:grid;gap:10px}
.sx-ways p{margin:0;display:flex;flex-wrap:wrap;gap:4px 22px;font-size:15px}
.sx-ways span{flex:0 0 150px;color:var(--muted)}
.sx-ways a{color:var(--ink-2);text-decoration:none}
.sx-ways a:hover,.sx-ways a[aria-current]{color:var(--brass)}
.sx-wrap .shop-voices{margin-top:72px}

/* ---------- Highlight und Kundenstimmen: gleiche Sprache, kein Kasten ---------- */
.hl-box{border:0;border-radius:0;background:none;overflow:visible;gap:72px;align-items:center;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.hl-im{min-height:0;aspect-ratio:4/5;margin:13px;background:#151413}
.hl-im::before{opacity:.9}
.hl-tx{padding:0}
.hl-tx li::before{content:"";display:inline-block;width:14px;height:1px;margin-right:12px;background:var(--brass);vertical-align:middle}
.hl-minis{display:block;border-top:1px solid var(--line)}
.hl-minis a{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 16px;padding:14px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;font-size:14.5px;color:var(--ink-2)}
.hl-minis a b{display:inline;font:400 23px/1.1 var(--serif);color:var(--ink);transition:color .25s}
.hl-minis a:hover b{color:var(--brass)}
.shop-voices .rv-item{background:none;border:0;border-top:1px solid var(--line);border-radius:0;padding:20px 0 0}
.shop-voices .rv-item p{font:400 22px/1.3 var(--serif);color:var(--ink)}

/* ---------- kleinere Bildschirme ---------- */
@media (max-width:1100px){
  .sx-grid,.rg-grid.sx-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 36px}
  .sx-big.sx-r{grid-column:2/span 2}
  .sx-idx{gap:48px}
  .sx-tabs{gap:6px 26px}.sx-tab{font-size:23px}
}
@media (max-width:760px){
  .sx-home{padding:64px 0 72px}
  .hl-box{gap:28px;grid-template-columns:minmax(0,1fr)}.hl-im{aspect-ratio:1;margin:9px}
  .sx-idx{grid-template-columns:minmax(0,1fr)}
  .sx-idx-r{display:none}
  .sx-row{grid-template-columns:64px minmax(0,1fr);column-gap:16px;align-items:center;padding:14px 0}
  .sx-row-th{display:block;grid-row:1/span 3;width:64px;height:64px;object-fit:cover}
  .sx-row-n,.sx-row-t,.sx-row-m{grid-column:2}
  .sx-row-v{grid-template-columns:minmax(0,1fr)}.sx-row-v>*{grid-column:1}
  .sx-row-n{font-size:28px}
  .sx-row-t{margin-top:2px;font-size:14.5px}
  .sx-row-m{grid-row:auto;font-size:13.5px;color:var(--muted)}
  .sx-row.on .sx-row-n{color:var(--ink);transform:none}
  .sx-picks{margin-top:64px}
  .sx-grid,.rg-grid.sx-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 22px;padding:9px}
  .sx-big,.sx-big.sx-r{grid-column:1/-1;grid-row:auto}
  .sx-big .sx-ph{aspect-ratio:1;min-height:0;flex:none}
  .sx-ph::before{inset:-7px;--l:11px}
  .sx-card{gap:14px}
  .sx-nm{font-size:20px}
  .sx-big .sx-nm{font-size:30px}
  .sx-ds{display:none}.sx-big .sx-ds{display:block;font-size:14.5px}
  .sx-ft{gap:2px 10px;margin-top:4px}
  .sx-eta{font-size:12.5px}
  .sx-pr{font-size:15px}
  .sx-intro{padding:0 0 30px}
  .sx-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px;gap:0 24px}
  .sx-tabs::-webkit-scrollbar{display:none}
  .sx-tab{font-size:21px}.sx-tab-v{margin-left:0;font-size:21px}
  .sx-shop .rg-bar{flex-wrap:wrap;overflow:visible;margin:0 0 24px;padding:12px 0}
  .sx-shop .rg-cnt{display:inline}
  .sx-ways{margin-top:64px}.sx-ways span{flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){
  .sx-ph::before,.sx-ls,.sx-i2,.sx-row-n,.sx-frame img{transition:none!important}
  .sx-ls::after{animation:none!important;display:none}
}

/* ==========================================================================
   Phase 185: die letzten Kästen. Warenkorb, Seitenleiste, Zahlarten, Set-Tipp im Hero.
   Knöpfe bleiben, wie sie sind. Alles andere verliert Rahmen, Rundung und Fläche.
   ========================================================================== */

/* Set-Tipp im Hero: dunkle Fläche ohne Glas, gefasst von Passermarken */
.hero .rg-set{border:0;border-radius:0;background:rgba(9,9,11,.84);-webkit-backdrop-filter:none;backdrop-filter:none;padding:16px 18px;gap:16px;transition:none}
.hero .rg-set:hover{transform:none;border:0}
.hero .rg-set::before{content:"";position:absolute;inset:-7px;pointer-events:none;opacity:.7;--m:var(--brass);--l:13px;transition:inset .4s cubic-bezier(.2,.7,.2,1),opacity .3s;
  background:
    linear-gradient(var(--m),var(--m)) left top/var(--l) 1px no-repeat,linear-gradient(var(--m),var(--m)) left top/1px var(--l) no-repeat,
    linear-gradient(var(--m),var(--m)) right top/var(--l) 1px no-repeat,linear-gradient(var(--m),var(--m)) right top/1px var(--l) no-repeat,
    linear-gradient(var(--m),var(--m)) left bottom/var(--l) 1px no-repeat,linear-gradient(var(--m),var(--m)) left bottom/1px var(--l) no-repeat,
    linear-gradient(var(--m),var(--m)) right bottom/var(--l) 1px no-repeat,linear-gradient(var(--m),var(--m)) right bottom/1px var(--l) no-repeat}
.hero .rg-set:hover::before{inset:-11px;opacity:1}
.hero .rg-set img{border-radius:0}
.hero .rg-set small{font-size:13px;font-weight:400;letter-spacing:0;text-transform:none}
.hero .rg-set b{font:400 21px/1.15 var(--serif);margin:3px 0 5px}

/* Zahlarten: eine ruhige Zeile statt fünf Pillen */
.pay-logos{gap:4px 16px}
.pay-logos span{padding:0;border:0;border-radius:0;font-size:13px;font-weight:400;color:var(--muted)}

/* Warenkorb-Seite */
.cl-img{border-radius:0}
.cl-own{left:0;bottom:0;border-radius:0;padding:3px 8px;letter-spacing:0;font-weight:400;font-size:11px;background:rgba(9,9,11,.82)}
.qty-step{border-width:1px;border-radius:0}
.cart-sum{padding:0 0 0 44px;border:0;border-left:1px solid var(--line);border-radius:0;background:none;gap:18px}
.cart-sum h2{font-size:32px}
.free-bar{padding:16px 0;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;background:none}
.free-bar>i{height:2px;border-radius:0;overflow:visible}
.free-bar>i b{border-radius:0}

/* Seitenleiste */
.kb-picks img,.kb-th,.kb-th img,.kb-film,.kb-film video,.kb-film img{border-radius:0}
.kb-picks b{font:400 20px/1.15 var(--serif)}
.kb-own{border-radius:0}

@media (max-width:900px){
  .cart-sum{padding:26px 0 0;border-left:0;border-top:1px solid var(--line)}
}

/* ==========================================================================
   Phase 186: Kopfzeile passt auf Laptop-Breiten, leerer Warenkorb und Kasse ohne Kästen
   ========================================================================== */
.head-many .nav-links{gap:clamp(12px,1.9vw - 13px,30px)}
.head-many .nav-links a{font-size:14px;letter-spacing:.01em}
@media (max-width:1500px){.head-many .nav-new{display:none}}
.cart-wrap .empty-box{padding:0;border:0;border-radius:0;background:none}

/* ==========================================================================
   Phase 187: Kein Bild wird mehr beschnitten. Jedes Foto ist ganz zu sehen, auch in der großen Kachel.
   ========================================================================== */
.sx-ph img,.sx-frame img,.hl-im img,.sx-row-th{object-fit:contain}
.sx-frame{aspect-ratio:1}
.sx-big .sx-ph{flex:none;aspect-ratio:1;min-height:0}
.sx-grid{align-items:start}
.hl-im{aspect-ratio:1}

/* ==========================================================================
   Phase 188: Produktvideo in der Kachel und im Welten-Rahmen. Es liegt über dem Foto und erscheint erst, wenn es läuft.
   ========================================================================== */
.sx-vid{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:contain;background:#151413;opacity:0;pointer-events:none;transition:opacity .45s ease}
.sx-vid.on{opacity:1}
/* kleines Zeichen unten rechts: Hier gibt es ein Video. Es verschwindet, solange das Video läuft */
.sx-ph.has-vid::after{content:"";position:absolute;right:12px;bottom:12px;z-index:2;width:0;height:0;border-left:9px solid var(--ink);border-top:6px solid transparent;border-bottom:6px solid transparent;opacity:.85;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6));transition:opacity .3s}
.sx-ph.has-vid.is-play::after{opacity:0}
@media (prefers-reduced-motion:reduce){.sx-vid{transition:none}}