/* ============================================================
   PUPPE — Modelpuppe im Schrank (Runde 2, Punkt 13)
   Gehoert zum Strang PUPPE. app.css ist ein anderer Strang: alles hier ist unter
   .doll bzw. .schrank-* verankert und greift nirgends in fremde Komponenten.
   ============================================================ */

/* Eigene Tonleiter, damit die Figur in HELL und DUNKEL gleich beleuchtet ist:
   p1 ist immer der hellste Ton (Mitte = Licht), p3 der dunkelste (Rand = Volumen).
   Die Werte sind aus --surface-2 / --line-2 abgeleitet, nur ohne die Umkehrung. */
.doll{
  --p1:#F1ECE3; --p2:#E2DBCA; --p3:#C0B6A0;
  --p-line:#A79E8A; --p-seam:#A79E8A;
  --p-ao:rgba(120,108,86,.20);
  --p-shadow:rgba(26,26,24,.16);
  --p-base:#BDB4A0; --p-base-w:#A79E8A;
  --p-lift:drop-shadow(0 6px 9px rgba(26,26,24,.18));
  --fig-h:180px;
}
[data-theme="dark"] .doll{
  --p1:#4E4A41; --p2:#3E3A33; --p3:#2C2A25;
  --p-line:#7C7565; --p-seam:#635E52;
  --p-ao:rgba(0,0,0,.40);
  --p-shadow:rgba(0,0,0,.55);
  --p-base:#332F29; --p-base-w:#26241F;
  --p-lift:drop-shadow(0 8px 12px rgba(0,0,0,.55));
}

/* ---------- Figur ---------- */
.doll__stage{position:relative;display:flex;flex:none;min-width:0}
.doll__fig{position:relative;height:var(--fig-h);aspect-ratio:300/720;flex:none;margin:0 auto}
.doll__body{display:block;width:100%;height:100%;overflow:visible}
.doll__body .p-s1{stop-color:var(--p1)}
.doll__body .p-s2{stop-color:var(--p2)}
.doll__body .p-s3{stop-color:var(--p3)}
.doll__body .p-sh0{stop-color:var(--p-shadow)}
.doll__body .p-sh1{stop-color:var(--p-shadow);stop-opacity:0}
.doll__body .p-ao0{stop-color:var(--p-ao)}
.doll__body .p-ao1{stop-color:var(--p-ao);stop-opacity:0}
/* Kontur: kein skalierender Strich — bei 75 px Puppenbreite waere 1 Einheit unsichtbar.
   Der Strich bleibt auch im Dunkelmodus die einzige verlaessliche Trennung zum Panel
   (dort ist --sh-1 aus und ein Schlagschatten traegt nichts). */
.doll__body .p-fig path{stroke:var(--p-line);stroke-width:1;stroke-opacity:.44;
  stroke-linejoin:round;vector-effect:non-scaling-stroke}
.doll__body .p-base ellipse,.doll__body .p-base path{stroke:var(--p-line);stroke-width:1;
  stroke-opacity:.42;vector-effect:non-scaling-stroke}
.doll__body .p-base-t{fill:var(--p-base)}
.doll__body .p-base-w{fill:var(--p-base-w)}
/* Naehte einer Schneiderpuppe — sichtbar nur, solange nichts drueber haengt */
.doll__body .p-seam{stroke:var(--p-seam);stroke-opacity:.26;stroke-width:1.1;
  stroke-linecap:round;vector-effect:non-scaling-stroke}

/* ---------- Kleidungsebenen ---------- */
.doll__layers{position:absolute;inset:0;pointer-events:none}
.doll__l{position:absolute;opacity:0;transition:opacity .32s var(--ease-out,ease)}
.doll__l.on{opacity:1}
.doll__l img,.doll__l svg{display:block;width:100%;height:100%;object-fit:contain;filter:var(--p-lift)}
/* Das Ghost-Model bringt einen eigenen Bodenschatten mit (erste Ellipse). Auf der Puppe
   schwebt der mitten im Bein — die Puppe hat ihren eigenen Schatten am Sockel. */
.doll__l>svg>ellipse:first-of-type{display:none}
/* Tasche haengt an der Hand und liegt vor der Huefte */
.doll__l--bag{transform:rotate(2deg)}

/* ---------- Seitenspalte: Zaehler, Chips, Knoepfe ---------- */
.doll__side{flex:1;min-width:0;display:flex;flex-direction:column}
.doll__top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.doll__n{font-size:var(--fs-small,13px);color:var(--ink-2,#4A4842);font-weight:600}
.doll__chips{display:flex;flex-wrap:wrap;gap:6px;margin:9px 0 0;min-width:0}
.doll__chip{position:relative;max-width:100%;min-height:32px;gap:5px;cursor:pointer;
  font-weight:600;text-align:left}
.doll__chip:hover{border-color:var(--ink,#1A1A18);color:var(--ink,#1A1A18)}
.doll__chip-n{max-width:12ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doll__x{display:flex;width:12px;height:12px;flex:none;opacity:.6}
.doll__x svg{width:100%;height:100%;fill:none;stroke:currentColor}
/* Trefferflaeche auf Fingergroesse, ohne das Aussehen zu aendern (Prinzip 5) */
.doll__chip::after{content:'';position:absolute;inset:-7px -6px}
.doll__all{background:none;border:0;padding:6px 2px;cursor:pointer;font:600 var(--fs-caption,12px)/1 var(--sans);
  color:var(--ink-3,#6E6A60);text-decoration:underline;text-underline-offset:3px;align-self:center}
.doll__all:hover{color:var(--ink,#1A1A18)}
.doll__hint{margin:3px 0 0;max-width:26ch}
.doll__acts{display:flex;gap:7px;margin-top:auto;padding-top:12px}
.doll__acts .btn{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doll__acts .btn[disabled]{opacity:.4;pointer-events:none}
.doll__occ{display:flex;flex-wrap:wrap;gap:7px}
.doll__occ .pill{height:34px}

/* ---------- Groessen ---------- */
/* mini: Raster auf dem Handy — Puppe links, Bedienung rechts, Figur ~180 px */
.doll--mini{display:flex;gap:15px;align-items:stretch;
  background:var(--surface);border:1px solid var(--line);border-radius:20px;
  padding:13px 14px;box-shadow:var(--sh-1)}
.doll--mini .doll__chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.doll--mini .doll__chips::-webkit-scrollbar{display:none}
.doll--mini .doll__all{align-self:auto;flex:none;white-space:nowrap}
/* Untereinander: nebeneinander bliebe von „Als Outfit sichern" auf 375 px nichts uebrig */
.doll--mini .doll__acts{flex-direction:column;gap:6px;padding-top:10px}
.doll--mini .doll__acts .btn{font-size:12.5px;min-height:42px;padding:0 12px;border-radius:12px;width:100%}
/* Die Chip-Reihe scrollt seitlich: der weiche Rand zeigt, dass rechts noch etwas kommt */
.doll--mini .doll__chips{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent)}
.doll--mini .doll__chip-n{max-width:9ch}
.doll__zoom{position:absolute;inset:0;z-index:2;border:0;background:transparent;cursor:zoom-in;
  border-radius:14px;padding:0}
.doll__zoom:hover{background:var(--accent-wash,rgba(26,26,24,.06))}

/* flow: unter dem Karussell, ganze Breite */
.doll--flow,.doll--panel,.doll--sheet{display:flex;flex-direction:column}
.doll--flow .doll__stage,.doll--panel .doll__stage,.doll--sheet .doll__stage{justify-content:center}
.doll--flow{--fig-h:min(46vh,380px);background:var(--surface);border:1px solid var(--line);
  border-radius:22px;padding:16px 16px 16px;box-shadow:var(--sh-1)}
.doll--flow .doll__side,.doll--panel .doll__side{flex:none}
.doll--flow .doll__top,.doll--panel .doll__top{margin-top:12px;
  padding-top:12px;border-top:1px solid var(--line)}
.doll--flow .doll__acts,.doll--panel .doll__acts{margin-top:0}
.doll--flow .doll__acts .btn,.doll--panel .doll__acts .btn{min-height:44px}

/* panel: Desktop, feste linke Spalte */
.doll--panel{--fig-h:min(46vh,400px);background:var(--surface);border:1px solid var(--line);
  border-radius:22px;padding:18px;box-shadow:var(--sh-1)}

/* sheet: Puppe gross im Dialog */
.doll--sheet{--fig-h:min(46vh,380px)}
.doll--sheet .doll__top{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.doll--sheet .doll__acts{margin-top:0}
.doll--sheet .doll__acts .btn{min-height:46px}

/* ---------- Schrank-Aufbau ---------- */
.schrank-wrap{display:flex;flex-direction:column}
.schrank-main{min-width:0}
.schrank-doll{padding:2px 18px 4px}
/* Karussell: die Puppe steht UNTER dem Band (dort ist Platz) */
.schrank-wrap.is-flow .schrank-doll{order:2;padding:12px 18px 6px}

/* ---------- "+"-Knopf an Kachel und Karte ---------- */
.dollbtn{position:absolute;z-index:6;top:9px;right:9px;width:36px;height:36px;border-radius:50%;
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink-soft);
  display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;
  transition:background var(--t-micro,.16s) var(--ease-out,ease),
             border-color var(--t-micro,.16s) var(--ease-out,ease),color var(--t-micro,.16s) var(--ease-out,ease)}
.dollbtn svg{width:19px;height:19px;fill:none;stroke:currentColor}
.dollbtn::after{content:'';position:absolute;inset:-4px}
.dollbtn:hover{border-color:var(--ink);color:var(--ink)}
.dollbtn[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
[data-theme="dark"] .dollbtn[aria-pressed="true"]{color:#141413}
.dollbtn:active{transform:scale(.94)}
/* Reihenfolge ueberall gleich: Hinweis links, "+" in der Mitte, Herz aussen rechts —
   das Herz bleibt damit da, wo es vor der Puppe schon war. */
.gcard.has-doll .dollbtn{right:52px}
.tile.has-doll .dollbtn{top:6px;right:42px;width:32px;height:32px}
.tile.has-doll .dollbtn svg{width:17px;height:17px}
/* Kachel im Schrank-Raster ist auf dem Handy nur ~100 px breit. Drei Marken in einer Zeile
   gehen nur mit kleineren Knoepfen; die Trefferflaechen bleiben bei ~38x44 px und
   ueberschneiden sich NICHT, weil sie asymmetrisch aufgezogen sind. (Das Outfit-Raster
   .grid.two ist doppelt so breit und behaelt die normale Groesse.) */
.grid:not(.two) .tile.has-doll .dollbtn{top:5px;right:37px;width:28px;height:28px}
.grid:not(.two) .tile.has-doll .dollbtn svg{width:15px;height:15px}
.grid:not(.two) .tile.has-doll .dollbtn::after{inset:-8px 0 -8px -16px}
.grid:not(.two) .tile.has-doll .heart{width:28px;height:28px;top:5px;right:5px}
.grid:not(.two) .tile.has-doll .heart svg{width:14px;height:14px}
.grid:not(.two) .tile.has-doll .heart::before{inset:-8px -11px -8px -5px}
.grid:not(.two) .tile.has-doll .tagpin{top:6px;left:6px;font-size:8px;padding:2px 5px;
  border-radius:6px;letter-spacing:.05em}

/* ---------- Breakpoints ---------- */
@media (max-width:349px){
  /* Ganz schmale Geraete (unter 350 px): der 360°-Hinweis weicht, die Warnung bleibt */
  .grid:not(.two) .tile.has-doll .tagpin:not(.warn){display:none}
}
@media (min-width:640px){
  .doll--mini{--fig-h:200px;padding:15px 16px}
  .doll--mini .doll__acts{flex-direction:row}
  .schrank-doll{padding-inline:18px}
}
@media (min-width:1024px){
  /* zweispaltig: links die Puppe (klebt), rechts Werkzeugzeile und Raster/Karussell */
  .schrank-wrap,.schrank-wrap.is-flow{display:grid;grid-template-columns:300px minmax(0,1fr);
    gap:26px;align-items:start}
  .schrank-wrap.is-flow .schrank-doll{order:0;padding:2px 0 0 18px}
  .schrank-doll{position:sticky;top:0;padding:2px 0 0 18px;z-index:1}
  .schrank-main{grid-column:2}
  /* Auf dem Desktop ist die Kachel breit genug fuer die normalen Knopfgroessen */
  .tile.has-doll .dollbtn{top:8px;right:46px;width:34px;height:34px}
  .tile.has-doll .dollbtn svg{width:18px;height:18px}
  .tile.has-doll .dollbtn::after{inset:-5px}
  .tile.has-doll .heart{width:34px;height:34px;top:8px;right:8px}
  .tile.has-doll .heart svg{width:16px;height:16px}
  .tile.has-doll .heart::before{inset:-5px}
  .tile.has-doll .tagpin{font-size:9px;padding:3px 6px;top:8px;left:8px}
}
@media (min-width:1440px){
  .schrank-wrap,.schrank-wrap.is-flow{grid-template-columns:340px minmax(0,1fr);gap:32px}
  .doll--panel{--fig-h:min(52vh,460px)}
}
@media (prefers-reduced-motion:reduce){
  .doll__l{transition:none}
}

@media (hover:hover) and (pointer:fine){
  /* app.css blendet das Herz an Kachel und Karte erst beim Zeigen ein. Damit die Ecke
     nicht leer wirkt, sitzt dort das "+" (die neue Hauptgeste) und das Herz kommt beim
     Zeigen links daneben. Auf Tippgeraeten bleibt es umgekehrt: Herz aussen wie bisher. */
  .gcard.has-doll .dollbtn{right:9px}
  .gcard.has-doll .heart{right:52px}
  .tile.has-doll .dollbtn{right:6px}
  .tile.has-doll .heart{right:44px}
  .grid:not(.two) .tile.has-doll .dollbtn{right:5px}
  .grid:not(.two) .tile.has-doll .heart{right:37px}
  .grid:not(.two) .tile.has-doll .dollbtn::after{inset:-8px -4px -8px -6px}
  .grid:not(.two) .tile.has-doll .heart::before{inset:-8px -6px -8px -4px}
}
@media (hover:hover) and (pointer:fine) and (min-width:1024px){
  .tile.has-doll .dollbtn{right:8px}
  .tile.has-doll .heart{right:46px}
  .grid:not(.two) .tile.has-doll .dollbtn::after{inset:-5px}
  .grid:not(.two) .tile.has-doll .heart::before{inset:-5px}
}