/* 3D-Kartenansicht (js/card3d.js) – Dialog mit Bühne, die Karte als dünner Körper (Vorder-/Rückseite, Kanten,
   Zwischenlagen = ~0,3 mm Dicke), Licht + Holo-Simulation; Auslöser auf Tausch-Kacheln (.tf-3d) und für
   Bestandsseiten (.c3d-open, Vorlage public/_card3d.html). Bewegt werden nur transform und opacity.
   Nachtmodus am Dateiende: jede Regel mit :where([data-theme="night"]) in @media screen (siehe DESIGN.md). */

html.c3d-lock{overflow:hidden}
.c3d [hidden]{display:none!important}

/* ------------------------------------------------ Dialog */
.c3d{--edge:#E9E3D7;--edge-2:#D5CEC1;
  position:fixed;inset:0;margin:auto;padding:0;border:0;
  width:min(980px,calc(100vw - 48px));height:min(780px,calc(100vh - 48px));height:min(780px,calc(100dvh - 48px));max-width:none;max-height:none;
  overflow:hidden;overscroll-behavior:contain;border-radius:30px;background:var(--surface);color:var(--ink);box-shadow:var(--sh-3)}
.c3d[open]{display:grid;grid-template-rows:auto minmax(0,1fr)}
.c3d::backdrop{background:rgba(30,27,57,.46)}
@media (prefers-reduced-motion:no-preference){
  .c3d[open]{animation:c3d-in .22s var(--ease-out)}
  .c3d[open]::backdrop{animation:c3d-fade .28s ease}
  .c3d.out{animation:c3d-out .15s ease forwards}
  .c3d.out::backdrop{animation:c3d-fade-out .15s ease forwards}
}
@keyframes c3d-in{from{opacity:0;transform:scale(.97)}}
@keyframes c3d-out{to{opacity:0;transform:scale(.98)}}
@keyframes c3d-fade{from{opacity:0}}
@keyframes c3d-fade-out{to{opacity:0}}

.c3d-head{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:14px;padding:16px 16px 14px 26px}
.c3d-ttl{min-width:0}
.c3d-ttl h2{margin:0;overflow:hidden;font:800 clamp(19px,2vw,23px)/1.2 var(--round);letter-spacing:-.01em;white-space:nowrap;text-overflow:ellipsis}
.c3d-sub{margin:3px 0 0;overflow:hidden;color:var(--ink-2);font-size:13.5px;font-weight:560;line-height:1.3;white-space:nowrap;text-overflow:ellipsis}
.c3d-tabs{flex-wrap:nowrap}
.c3d-tabs button svg{flex:none}
.c3d-tabs button:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.c3d-x{flex:none}
.c3d-x:focus-visible{outline:3px solid var(--ink);outline-offset:2px}

/* ------------------------------------------------ 3D-Reiter: Bühne links, Bedienung rechts */
.c3d-p{min-height:0}
.c3d-p3{display:grid;grid-template-columns:minmax(0,1fr) 268px;gap:18px;padding:0 20px 20px}
.c3d-view{position:relative;display:grid;min-width:0;min-height:0}
.c3d-stage{position:relative;display:grid;place-items:center;min-width:0;min-height:0;overflow:hidden;border-radius:22px;
  background:radial-gradient(rgba(30,27,57,.09) 1.1px,transparent 1.5px) 0 0/20px 20px,var(--bg);
  perspective:1600px;touch-action:none;cursor:grab;outline:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.c3d-stage.grab{cursor:grabbing}
.c3d-stage:focus-visible{box-shadow:inset 0 0 0 3px var(--ink)}

/* Die Karte: Seiten mit backface-visibility, Dicke aus Kanten-Streifen (gerade Kanten) + Zwischenlagen (runde Ecken) */
.c3d-pan{position:relative;transform-style:preserve-3d}
.c3d-card{--cw:300px;--t:2px;--cr:calc(var(--cw) * .046);position:relative;width:var(--cw);aspect-ratio:63/88;transform-style:preserve-3d}
.c3d-face{position:absolute;inset:0;overflow:hidden;border-radius:var(--cr);background:var(--edge);-webkit-backface-visibility:hidden;backface-visibility:hidden}
.c3d-front{transform:translateZ(calc(var(--t) / 2))}
.c3d-back{transform:rotateY(180deg) translateZ(calc(var(--t) / 2))}
/* Fotos liegen mit 3,5 % neutralem Rand vor (stockphotos.compose) – fast ganz wegschneiden, damit die Kante die Karte ist */
.c3d-face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.07);pointer-events:none;-webkit-user-drag:none}
.c3d-face::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),inset 0 0 0 1.5px rgba(30,27,57,.1)}
.c3d-noback{position:absolute;inset:0;display:grid;place-items:center;padding:24px;background:repeating-linear-gradient(135deg,var(--edge) 0 10px,var(--edge-2) 10px 11px);color:#56546C;font:700 14px/1.4 var(--sans);text-align:center}
.c3d-edge{position:absolute;background:linear-gradient(90deg,var(--edge-2),var(--edge) 35%,var(--edge) 65%,var(--edge-2))}
.c3d-el,.c3d-er{top:var(--cr);width:var(--t);height:calc(100% - 2 * var(--cr));transform:rotateY(90deg)}
.c3d-el{left:calc(var(--t) / -2)}
.c3d-er{left:calc(100% - var(--t) / 2)}
.c3d-et,.c3d-eb{left:var(--cr);width:calc(100% - 2 * var(--cr));height:var(--t);transform:rotateX(90deg);background:linear-gradient(180deg,var(--edge-2),var(--edge) 35%,var(--edge) 65%,var(--edge-2))}
.c3d-et{top:calc(var(--t) / -2)}
.c3d-eb{top:calc(100% - var(--t) / 2)}
.c3d-ly{position:absolute;inset:0;border-radius:var(--cr);background:var(--edge-2);transform:translateZ(calc(var(--t) * var(--k)))}

/* Licht: ein breites Glanzband (dreifach groß), card3d.js schiebt es per transform und regelt die Deckkraft */
.c3d-spec,.c3d-holo{position:absolute;inset:0;z-index:2;overflow:hidden;border-radius:inherit;pointer-events:none}
.c3d-spec i,.c3d-holo i{position:absolute;left:-100%;top:-100%;width:300%;height:300%}
.c3d-spec{mix-blend-mode:screen}
.c3d-spec i{opacity:.2;background:linear-gradient(118deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.5) 47.5%,rgba(255,255,255,.16) 52%,rgba(255,255,255,0) 58%)}
/* Holo-Simulation (nur holo/reverse/foil/alt/parallel): schräge Regenbogen-Bänder, die mit dem Winkel wandern –
   „overlay“ färbt, ohne das Foto zu vernebeln; Deckkraft höchstens 0,3 (card3d.js), „Effekt aus“ = 0 */
.c3d-holo{opacity:0;mix-blend-mode:overlay}
.c3d-holo i{background:repeating-linear-gradient(112deg,rgba(255,60,150,0) 0,rgba(255,60,150,.95) 2%,rgba(255,214,60,.95) 4%,rgba(60,235,160,.95) 6%,rgba(60,160,255,.95) 8%,rgba(170,100,255,.95) 10%,rgba(170,100,255,0) 12%,rgba(0,0,0,0) 16%)}
.c3d-stage[data-finish=reverse] .c3d-holo i{background:repeating-linear-gradient(64deg,rgba(255,60,150,0) 0,rgba(255,60,150,.9) 1.5%,rgba(255,214,60,.9) 3%,rgba(60,235,160,.9) 4.5%,rgba(60,160,255,.9) 6%,rgba(170,100,255,.9) 7.5%,rgba(170,100,255,0) 9%,rgba(0,0,0,0) 12%)}
.c3d-stage.fx-off .c3d-holo{opacity:0!important}

/* Schatten auf dem Grund (2D, unter der Karte) */
.c3d-shadow{--sw:280px;position:absolute;left:50%;top:50%;width:var(--sw);height:34px;margin:-17px 0 0 calc(var(--sw) / -2);border-radius:50%;background:radial-gradient(closest-side,rgba(30,27,57,.4),rgba(30,27,57,.14) 60%,rgba(30,27,57,0));pointer-events:none}

/* Bühnen-Beschriftung: „Echte Fotos“ + Version/Zustand oben links, Zoom-Stand oben rechts, Zoom-Knöpfe unten links */
.c3d-tags{position:absolute;left:12px;top:12px;right:12px;z-index:2;display:flex;flex-wrap:wrap;gap:6px;pointer-events:none}
.c3d-real{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 11px 0 8px;border-radius:999px;background:var(--mint);color:var(--mint-ink);font:700 12.5px/1 var(--sans);white-space:nowrap}
.c3d-chips{display:contents}
.c3d-zoom{position:absolute;left:12px;bottom:12px;z-index:3;display:flex;gap:2px;padding:3px;border-radius:999px;background:var(--surface);box-shadow:0 0 0 1px var(--line-2),0 8px 18px -12px rgba(30,27,57,.45)}
.c3d-zb{display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer;touch-action:manipulation;transition:background-color .16s ease,transform .16s var(--ease-out)}
.c3d-zb:active{transform:scale(.94)}
.c3d-zb:focus-visible{outline:3px solid var(--ink);outline-offset:1px}
@media (hover:hover) and (pointer:fine){.c3d-zb:hover{background:var(--bg-2)}}
.c3d-zl{display:grid;place-items:center;min-width:50px;height:40px;padding:0 2px;color:var(--ink);font:800 13px/1 var(--round);font-variant-numeric:tabular-nums;white-space:nowrap}
.c3d-zl:empty{display:none}
.c3d-sfx{position:absolute;right:16px;bottom:12px;color:var(--ink-3);font-size:13px;opacity:.75;rotate:-8deg;pointer-events:none}
.c3d-err{position:absolute;left:16px;right:16px;bottom:16px;z-index:3;margin:0;padding:10px 14px;border-radius:14px;background:var(--red-50);color:var(--red);font-size:14px;font-weight:650;line-height:1.4;text-align:center}

/* Bedienung */
.c3d-side{display:flex;flex-direction:column;gap:14px;min-width:0;min-height:0;overflow:auto;padding:2px}
.c3d-chip{display:inline-flex;align-items:center;max-width:100%;height:28px;overflow:hidden;padding:0 10px;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink);font:700 12.5px/1 var(--sans);white-space:nowrap;text-overflow:ellipsis}
.c3d-chip.is-v{background:var(--butter);box-shadow:none;color:var(--butter-ink)}
.c3d-acts{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.c3d-acts .btn{justify-content:flex-start;width:100%}
.c3d-b svg{flex:none}
.c3d-more{display:flex;flex-wrap:wrap;gap:8px}
.c3d-more .c3d-b{flex:1 1 auto}
.c3d-more:not(:has(.c3d-b:not([hidden]))){display:none}
.c3d-side .btn:active{transform:scale(.97)}
.c3d-side .btn:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.c3d-note{display:flex;align-items:flex-start;gap:8px;margin:0;padding:10px 12px;border-radius:16px;background:var(--butter-25);box-shadow:inset 0 0 0 1px var(--butter-2);color:var(--ink);font-size:13.5px;font-weight:600;line-height:1.4}
.c3d-note .jp-chip{flex:none;height:22px}
.c3d-note .link-btn{padding:0;border:0;background:none;color:var(--ichigo-hover);font:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.c3d-hint{margin:auto 0 0;color:var(--ink-2);font-size:12.5px;line-height:1.5}
.c3d-hint-t{display:none}
@media (pointer:coarse){.c3d-hint-m{display:none}.c3d-hint-t{display:inline}}

/* ------------------------------------------------ Fotos-Reiter: die unbearbeiteten Fotos, darauf zählt der Zustand */
.c3d-pp{overflow:auto;padding:2px 26px 26px;outline:none}
.c3d-pp:focus-visible{box-shadow:inset 0 0 0 3px var(--ink)}
.c3d-lead{max-width:66ch;margin:0 0 16px;color:var(--ink-2);font-size:14.5px;line-height:1.55}
.c3d-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:20px 18px}
.c3d-fig{display:flex;flex-direction:column;align-items:center;gap:8px;margin:0}
.c3d-fig a{display:block;width:100%;max-width:340px;border-radius:12px}
.c3d-fig a:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.c3d-fig img{display:block;width:100%;height:auto;aspect-ratio:860/1200;border-radius:12px;background:var(--bg);box-shadow:0 0 0 4px #fff,0 20px 28px -14px rgba(30,27,57,.5);object-fit:contain}
.c3d-fig figcaption{font:800 14px/1.2 var(--round)}
.c3d-fig.is-none span{display:grid;place-items:center;width:100%;max-width:340px;aspect-ratio:63/88;padding:16px;border:2px dashed var(--line-2);border-radius:12px;color:var(--ink-2);font-weight:650;text-align:center}

/* ------------------------------------------------ Handy / schmal: Vollbild, Bedienung unter der Bühne */
@media (max-width:899px){
  .c3d{width:100vw;height:100vh;height:100dvh;border-radius:0}
  .c3d-head{grid-template-columns:minmax(0,1fr) auto;gap:8px 10px;padding:10px 8px 10px 16px}
  .c3d-tabs{display:grid;grid-template-columns:1fr 1fr;grid-row:2;grid-column:1/-1}
  .c3d-x{grid-row:1;grid-column:2}
  .c3d-p3{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:12px;padding:0 12px 12px}
  .c3d-side{gap:8px;overflow:visible}
  .c3d-acts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .c3d-acts .btn{justify-content:center;padding:0 10px}
  .c3d-more{flex-wrap:nowrap}
  .c3d-more .c3d-b{flex:1 1 0;min-width:0;padding:0 10px}
  .c3d-note{padding:8px 10px;font-size:13px}
  .c3d-hint{margin:0;font-size:12.5px}
  .c3d-pp{padding:2px 16px 20px}
  .c3d-figs{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
}
@media (max-width:899px) and (min-width:600px){.c3d-acts{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* kleine Handys: der Karte mehr Höhe geben – Gesten-Hinweis weg (bleibt als Beschreibung der Bühne für Screenreader),
   Holo-Hinweis ohne Deko-Chip in einer Zeile */
@media (max-width:899px) and (max-height:760px){.c3d-hint{display:none}}
@media (max-width:420px){.c3d-note .jp-chip{display:none}}
/* Handy quer / niedrige Fenster: Bühne und Bedienung nebeneinander */
@media (max-height:560px) and (min-width:560px){
  .c3d-head{grid-template-columns:minmax(0,1fr) auto auto;padding:8px 8px 8px 16px}
  .c3d-tabs{grid-row:auto;grid-column:auto;display:inline-flex}
  .c3d-x{grid-row:auto;grid-column:auto}
  .c3d-p3{grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:minmax(0,1fr)}
  .c3d-side{overflow:auto}
  .c3d-acts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .c3d-acts .btn,.c3d-more .c3d-b{gap:5px;padding:0 8px;font-size:13px}
  .c3d-more{flex-wrap:wrap}
  .c3d-more .c3d-b{flex:1 1 auto}
  .c3d-hint{display:none}
}

/* ------------------------------------------------ Auslöser: Tausch-Kachel (über „Echtes Foto“, rechts unten) */
.tf-3d{position:absolute;right:0;bottom:31px;z-index:3;display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.tf-3d>span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.95);box-shadow:0 0 0 1px rgba(30,27,57,.12),0 4px 10px -6px rgba(30,27,57,.55);font:800 12px/1 var(--round);letter-spacing:-.02em;transition:background-color .16s ease,color .16s ease,transform .16s var(--ease-out)}
.tf-3d:active>span{transform:scale(.94)}
.tf-3d:focus-visible{outline:none}
.tf-3d:focus-visible>span{outline:3px solid var(--ink);outline-offset:2px}
/* „letztes Stück“ steht auch im Preisschein – auf Kacheln mit 3D-Knopf bleibt das Bild frei */
.tf-img:has(.tf-3d) .tf-last{display:none}
@media (hover:hover) and (pointer:fine){.tf-3d:hover>span{background:var(--ink);color:#fff}}

/* Auslöser für Bestandsseiten (Vorlage public/_card3d.html) */
.c3d-open{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 20px 0 6px;border:0;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink);font:700 15px/1 var(--sans);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;transition:background-color .16s ease,color .16s ease,transform .16s var(--ease-out)}
.c3d-open-badge{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--ink);color:#fff;font:800 13px/1 var(--round);letter-spacing:-.02em;transition:background-color .16s ease,color .16s ease}
.c3d-open:active{transform:scale(.97)}
.c3d-open:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.c3d-open:hover{background:var(--ink);color:#fff}.c3d-open:hover .c3d-open-badge{background:#fff;color:var(--ink)}}

@media (prefers-reduced-motion:reduce){.tf-3d>span,.c3d-open,.c3d-open-badge{transition:none}}
@media print{.c3d{display:none!important}}

/* ------------------------------------------------ Nachtmodus „Tokio bei Nacht“ */
@media screen{
  :where([data-theme="night"]) .c3d{box-shadow:0 30px 60px -24px rgba(4,3,14,.9),0 0 0 1px rgba(213,204,255,.12)}
  :where([data-theme="night"]) .c3d::backdrop{background:rgba(4,3,14,.66)}
  :where([data-theme="night"]) .c3d-stage{background:radial-gradient(rgba(213,204,255,.1) 1.1px,transparent 1.5px) 0 0/20px 20px,var(--deep)}
  :where([data-theme="night"]) .c3d-shadow{background:radial-gradient(closest-side,rgba(0,0,0,.72),rgba(0,0,0,.3) 60%,rgba(0,0,0,0))}
  :where([data-theme="night"]) .c3d-zoom{box-shadow:0 0 0 1px var(--line-2),0 8px 18px -12px rgba(4,3,14,.8)}
  :where([data-theme="night"]) .c3d-note{background:rgba(255,226,122,.08);box-shadow:inset 0 0 0 1px rgba(255,226,122,.3)}
  :where([data-theme="night"]) .c3d-note .link-btn{color:var(--ichigo-hover)}
  :where([data-theme="night"]) .c3d-fig img{box-shadow:0 0 0 4px var(--frame),0 20px 28px -14px rgba(4,3,14,.8)}
  :where([data-theme="night"]) .c3d-open-badge{color:var(--tusche)}
  :where([data-theme="night"]) .c3d-open:hover{color:var(--tusche)}
  :where([data-theme="night"]) .c3d-open:hover .c3d-open-badge{background:var(--tusche);color:var(--ink)}
  /* Pillen auf dem Kartenbild sind Papier-Inseln: hell mit Tusche-Schrift (auch „Echtes Foto“) */
  :where([data-theme="night"]) .tf-3d>span,:where([data-theme="night"]) .tf-real{color:var(--tusche)}
  :where([data-theme="night"]) .tf-tile.show-back .tf-real{background:var(--ink);color:var(--tusche)}
}
@media screen and (hover:hover) and (pointer:fine){
  :where([data-theme="night"]) .tf-3d:hover>span{background:var(--tusche);color:#fff}
}