/* Ankaufsliste (Schublade, Seitenleiste, Listen-Seite) + Karten-Dialog – E5-Fassung.
   Schublade und Dialog gibt es auf jeder Seite: app.js hängt diese Datei nach, wo sie nicht verlinkt ist
   (Katalogseiten verlinken sie direkt im Kopf). Nur Klassen aus den von app.js erzeugten Bausteinen. */

/* == Listenzeile: Name + Preis oben, Auswahlfelder darunter über die volle Breite */
.line{grid-template-columns:56px minmax(0,1fr) auto}
.l-top{display:flex;align-items:flex-start;gap:12px}
.l-id{flex:1;min-width:0}
.l-top .l-price{flex:none;padding-top:1px}
.line .l-opts{gap:6px 8px}
.line .l-opts+.l-opts{margin-top:10px}
.line .l-opts select{height:36px;font-size:13px}
.l-rm{display:inline-flex;align-items:center;gap:5px;min-height:36px;padding:0 12px;border:0;border-radius:999px;background:transparent;color:var(--ink-2);font:650 13px/1 var(--sans);cursor:pointer;transition:background-color .16s ease,color .16s ease,transform .16s var(--ease-out)}
.l-rm:active{transform:scale(.96)}
.l-rm svg{opacity:.8}
.drawer-body .line:first-child{padding-top:18px}

/* == Stufen: Mindestwert → Porto-Erstattung → versicherter Versand (ehrlich, aus den Einstellungen) */
.lvl{--lvl-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%235E4A00' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  display:grid;gap:10px;margin:4px 0 2px;padding:14px 0 4px;border-top:1.5px dashed var(--line-2)}
.lvl-now{display:flex;align-items:flex-start;gap:8px;color:var(--ink);font-size:13.5px;font-weight:650;line-height:1.4}
.lvl.is-warn .lvl-now{padding:8px 12px;border-radius:14px;background:var(--butter);box-shadow:inset 0 0 0 1.5px var(--butter-2);color:var(--butter-ink)}
.lvl-now svg{flex:none;margin-top:1px;color:var(--money)}
.lvl-now.is-open svg{color:var(--ink-3)}
.lvl.is-warn .lvl-now svg{color:var(--butter-ink)}
.lvl-bar{position:relative;height:10px;margin:2px 7px;border-radius:999px;background:var(--bg-2);box-shadow:inset 0 1px 1px rgba(30,27,57,.06)}
.lvl-fill{position:absolute;inset:0;border-radius:999px;background:linear-gradient(90deg,var(--mint-2),var(--money) 70%);transform-origin:left center}
.lvl-tick{position:absolute;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px var(--line-2)}
.lvl-tick.on{background:var(--money) var(--i-check) center/9px no-repeat;box-shadow:0 0 0 2.5px #fff}
.lvl-tick.is-warn.on{background:var(--butter-2) var(--lvl-check) center/9px no-repeat;box-shadow:0 0 0 2.5px #fff,inset 0 0 0 1.5px var(--butter-ink)}
/* Beschriftung unter den Punkten: jede Stufe hat ein gleich langes Stück, ihr Punkt sitzt am rechten Ende */
.lvl-marks{display:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);margin:-2px 0 0;padding:0;list-style:none;color:var(--ink-2);font-size:12px;font-weight:650;line-height:1.2}
.lvl-marks li{overflow:hidden;text-align:right;white-space:nowrap;text-overflow:ellipsis;transition:color .2s ease}
.lvl-marks li.on{color:var(--money)}
.lvl-marks li.on.is-warn{color:var(--butter-ink)}
/* Frisch erreicht: Punkt stempelt, Beschriftung und Satz leuchten kurz in Minze auf */
@media (prefers-reduced-motion:no-preference){
  .lvl-marks li.just{animation:lvlmark .9s cubic-bezier(.23,1,.32,1) both}
  .lvl-now.just{animation:lvlnow 1.1s cubic-bezier(.23,1,.32,1) both}
}
@keyframes lvlmark{from{color:var(--ink);scale:1.12}}
@keyframes lvlnow{from{background:var(--mint);box-shadow:0 0 0 6px var(--mint)}to{background:transparent;box-shadow:0 0 0 6px transparent}}
.lvl-now{border-radius:10px}
.lvl-steps{display:grid;gap:5px;margin:0;padding:0;list-style:none}
.lvl-steps li{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:9px;min-height:22px;color:var(--ink-2);font-size:13px;line-height:1.3}
.lvl-dot{display:block;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.lvl-at{color:var(--ink-2);font:800 13px/1 var(--round);white-space:nowrap;font-variant-numeric:tabular-nums}
.lvl-steps li.next{color:var(--ink);font-weight:650}
.lvl-steps li.next .lvl-dot{box-shadow:inset 0 0 0 2px var(--money),0 0 0 3px var(--mint)}
.lvl-steps li.done{color:var(--ink)}
.lvl-steps li.done .lvl-dot{background:var(--money) var(--i-check) center/11px no-repeat;box-shadow:none}
.lvl-steps li.done .lvl-at{color:var(--money)}
.lvl-steps li.is-warn.done .lvl-dot{background:var(--butter-2) var(--lvl-check) center/11px no-repeat}
.lvl-steps li.is-warn.done .lvl-at{color:var(--butter-ink)}
/* Kompakt in der Seitenleiste: Satz + Balken, die Stufen im Einzelnen stehen in der Schublade und auf der Listen-Seite */
.cp-foot .lvl{gap:8px;padding-top:12px}
.cp-foot .lvl-steps{display:none}
.cp-foot .lvl-marks{display:grid}
.cp-foot .lvl-now{font-size:13px}
.cp-foot .price-note{display:none}

/* Summen: Beschriftung bleibt einzeilig, die Zahl ist der Held */
.totals .t-row>span:first-child{white-space:nowrap}
.totals .t-row{flex-wrap:wrap}
.totals .t-row>:last-child{margin-left:auto}
.totals .t-big{font-size:30px}
.cp-foot .totals .t-big{font-size:24px}
.drawer-foot .price-note,.cp-foot .price-note{text-align:center}
.cp-head h2{margin:0;font-size:17px;letter-spacing:-.01em}
.empty .empty-h{margin-bottom:6px;font-size:21px}

/* == Karten-Dialog: Preis als Ticket (Sakura = wir zahlen, Minze = Guthaben), Perforation mit Lochung */
.cm-price{position:relative;gap:0;isolation:isolate}
.cm-price>div{position:relative;padding:15px 20px 17px;border-radius:0;box-shadow:none}
.cm-price>div:first-child{border-radius:var(--r-m) 0 0 var(--r-m)}
.cm-price>div:last-child{border-radius:0 var(--r-m) var(--r-m) 0}
.cm-price>div+div::before{content:"";position:absolute;left:-1px;top:12px;bottom:12px;border-left:2px dashed rgba(255,255,255,.95)}
.cm-price::before,.cm-price::after{content:"";position:absolute;left:50%;z-index:1;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:var(--punch,#fff)}
.cm-price::before{top:-9px}.cm-price::after{bottom:-9px}
.cm-price .val{font-size:34px}
.cm-body>details>summary{padding:9px 0}
.cm-opt .label{color:var(--ink);font-size:14px;font-weight:720}
@media (max-width:420px){.cm-price>div{padding:13px 14px 15px}.cm-price .val{font-size:clamp(23px,6.6vw,28px);letter-spacing:-.03em}}
@media (max-width:640px){
  /* Bottom-Sheet: Menge + Hinzufügen bleiben am Daumen */
  .modal .cm-foot{position:sticky;bottom:0;z-index:2;margin:0 -20px;padding:12px 20px calc(12px + env(safe-area-inset-bottom));background:#fff;box-shadow:0 -1.5px 0 var(--line)}
  .modal .cm-foot .btn{min-width:0}
  .modal .cm-body{padding-bottom:12px}
  /* Preis gleich unter den Namen: Bild klein daneben, Auswahl darunter ändert den Preis live */
  .modal .cm-img{flex-direction:row;justify-content:flex-start;gap:14px;padding:18px 64px 14px 20px}
  .modal .cm-img img{width:84px;max-width:84px;border-radius:8px;box-shadow:0 0 0 3px #fff,0 12px 20px -12px rgba(30,27,57,.55)}
  .modal .cm-body>*{order:3}
  .modal .cm-body>:first-child{order:0}
  .modal .cm-body>.cm-price,.modal .cm-body>.notice{order:1}
  .modal .cm-body>.vhint{order:2}
  .modal .cm-body>.cm-foot{order:9}
  .modal .cm-body>.tiny{order:10}
  /* Im Sheet ist der Preis die größte Schrift, der Name tritt einen Schritt zurück */
  .modal .cm-body h2{font-size:clamp(19px,5.4vw,22px);line-height:1.2}
  /* Schublade: Stufen im Einzelnen nur auf der Listen-Seite, damit die Karten Platz haben – hier Balken + Beschriftung */
  .drawer-foot .lvl-steps{display:none}
  .drawer-foot .lvl-marks{display:grid}
  .drawer-foot{padding-top:14px}
  .drawer-foot .price-note{margin-top:4px}
  body:has(.drawer.open) .toasts{top:72px;bottom:auto}
}
/* Schmal: Auswahlfelder laufen unter dem Bild durch (l-main löst sich ins Zeilenraster auf) */
@media (max-width:520px){
  .line:has(>.l-main){grid-template-columns:48px minmax(0,1fr);gap:10px 12px}
  .line>.l-main{display:contents}
  .line:has(>.l-main)>img,.line:has(>.l-main)>.bulk-ico{grid-row:1;width:48px;height:67px}
  .line>.l-main>.l-top{grid-column:2;grid-row:1}
  .line>.l-main>.l-opts,.line>.l-main>.l-warn{grid-column:1/-1}
  .line .l-opts+.l-opts{margin-top:0}
  .line>.l-main>.l-opts{margin-top:0}
}
@media (hover:hover) and (pointer:fine){
  .l-rm:hover{background:var(--red-50);color:var(--red)}
}
/* Touch + Handy: Felder in 16px (kein iOS-Zoom), alles Tippbare mindestens 40px hoch */
@media (max-width:760px),(pointer:coarse){
  .line .l-opts select{height:40px;font-size:16px}
  .line .stepper.sm{height:40px}
  .line .stepper.sm button{width:40px}
  .line .stepper.sm input{width:38px;font-size:16px}
  .l-rm{min-height:40px}
}