/* Banner „Ganze Sammlung anbieten“ (public/_sammlung_banner.html) – K1 Kawaii × Manga als Zwei-Panel-Streifen:
   links ein Butter-Panel (Butter = „schau hier“) mit Rasterpunkten, Konzentrationslinien, Gans mit Karton voller Karten,
   Sprechblase まるごと買取！ und Geräuschwort ドサッ (alles Deko, aria-hidden); rechts ein weißes Panel mit Text und Knöpfen.
   Manga-Panels sind spitzwinklig mit schräger Kante und Tusche-Rahmen (Form-Regel aus DESIGN.md), Knöpfe bleiben Pillen.
   Breite über Container-Abfragen (Treffer-Spalte, Liste, Handy): ≥ 700 px nebeneinander, darunter schmaler,
   unter 540 px steckt das Bild-Panel als Einschub oben links im Text-Panel (Text fließt darum).
   Ausblenden: html[data-cc-x~="std|many"] (theme-boot.js + sammlung-banner.js). „Nichts gefunden“: .is-noresult (app.js).
   Nacht: p-night.css (Abschnitt „Banner Ganze Sammlung“). */

.ccta{container:ccta/inline-size;position:relative;margin:4px 0 26px;color:var(--ink)}
.ccta.at-none{display:none;margin:4px 0 12px}
.ccta.at-list{margin:0 0 22px}
.checkout+.ccta.at-list{margin:30px 0 0}
/* Zustände: weggeklickt (je Sitzung), „Nichts gefunden“ zeigt die eigene Variante statt der oberen */
:root[data-cc-x~="std"] .ccta.is-std,:root[data-cc-x~="many"] .ccta.is-many{display:none}
.is-noresult>.ccta.at-none{display:block}
.is-noresult>.ccta.at-top{display:none}
.cc-after:focus{outline:0}

.cc-in{--cut:22px;display:grid;grid-template-columns:188px minmax(0,1fr);column-gap:10px;min-height:150px}

/* -- Panel 1: Bild */
.cc-art{--poly:polygon(0 0,100% 0,calc(100% - var(--cut)) 100%,0 100%);position:relative;isolation:isolate;min-height:150px}
.cc-art::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);clip-path:var(--poly)}
.cc-pane{position:absolute;inset:3px 3.5px 3.5px 3px;overflow:hidden;clip-path:var(--poly);
  background:radial-gradient(circle,var(--butter-2) 1.7px,transparent 2.1px) 0 0/10px 10px,var(--butter)}
/* Konzentrationslinien auf die Gans (statischer Verlauf, keine Schleife) */
.cc-lines{position:absolute;inset:-30%;background:repeating-conic-gradient(from 3deg at 50% 64%,rgba(30,27,57,.2) 0 1.4deg,transparent 1.4deg 7.5deg);
  -webkit-mask:radial-gradient(circle at 50% 64%,transparent 24%,#000 62%);mask:radial-gradient(circle at 50% 64%,transparent 24%,#000 62%)}
.cc-goose{position:absolute;left:50%;bottom:-13px;width:120px;height:auto;translate:-46% 0;filter:drop-shadow(0 10px 12px rgba(30,27,57,.18))}
.cc-goose .gb-c{transition:transform .32s var(--ease-out)}
.cc-goose .gb-c2{transition-delay:.04s}
.cc-goose .gb-c3{transition-delay:.08s}
/* Geräuschwort: rund, Ichigo mit Tusche-Kontur */
.cc-sfx{position:absolute;left:7px;bottom:13px;z-index:1;color:var(--ichigo);font:900 18px/1 var(--round);letter-spacing:-.04em;white-space:nowrap;
  -webkit-text-stroke:4.5px #1E1B39;paint-order:stroke fill;rotate:-13deg;pointer-events:none}
/* Sprechblase: Papier mit Tusche-Rand und Schwanz zur Gans (Papier-Insel, nachts bleibt sie hell) */
.cc-ball{position:absolute;left:12px;top:12px;z-index:2;padding:7px 11px 8px;border-radius:999px;background:#fff;box-shadow:0 0 0 2px #1E1B39,0 8px 14px -8px rgba(30,27,57,.45);
  color:#1E1B39;font:800 12.5px/1 var(--round);letter-spacing:.03em;white-space:nowrap;rotate:-4deg}
.cc-ball::after{content:"";position:absolute;left:64%;bottom:-5px;width:10px;height:10px;background:inherit;box-shadow:inset -2px -2px 0 #1E1B39;border-bottom-right-radius:2px;transform:skewX(-14deg) rotate(45deg)}

/* -- Panel 2: Text, Knöpfe */
.cc-body{--poly:polygon(var(--cut) 0,100% 0,100% 100%,0 100%);position:relative;isolation:isolate;margin-left:calc(var(--cut) * -1);
  padding:22px 30px 22px calc(var(--cut) + 26px);min-width:0}
.cc-body::before,.cc-body::after{content:"";position:absolute;clip-path:var(--poly);pointer-events:none}
.cc-body::before{inset:0;z-index:-2;background:var(--ink)}
.cc-body::after{inset:3px 3px 3.5px 3.5px;z-index:-1;background:#fff}
.cc-h{margin:0 0 6px;padding-right:40px;font:800 21px/1.22 var(--round);letter-spacing:-.012em;text-wrap:balance}
.cc-p{max-width:66ch;margin:0;color:var(--ink-2);font-size:14.5px;line-height:1.52;text-wrap:pretty}
.cc-act{display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px;margin-top:14px}
.cc-go{flex:none}
.cc-alt{display:inline-flex;align-items:center;gap:5px;min-height:44px;color:var(--ink-2);font-size:14.5px;font-weight:600;text-decoration:none;transition:transform .16s var(--ease-out)}
.cc-alt b{color:var(--ink);font-weight:750;text-decoration:underline;text-decoration-color:var(--ichigo);text-decoration-thickness:2px;text-underline-offset:4px}
.cc-alt:active{transform:scale(.98)}
.cc-x{position:absolute;top:8px;right:8px;color:var(--ink-2)}

/* Wegklicken: kurz zurücktreten, dann weg (sammlung-banner.js) */
.ccta.is-leaving{opacity:0;transform:translateY(-6px) scale(.985);transition:opacity .16s ease,transform .16s var(--ease-out)}

/* -- mittlere Breite (Tablet, schmale Treffer-Spalte) */
@container ccta (max-width:699px){
  .cc-in{grid-template-columns:150px minmax(0,1fr)}
  .cc-body{padding:18px 20px 18px calc(var(--cut) + 20px)}
  .cc-h{font-size:19px}
  .cc-p{font-size:14px}
  .cc-goose{width:106px;bottom:-11px}
  .cc-sfx{left:4px;font-size:16px}
  .cc-ball{left:8px}
}
/* -- Handy: Bild-Panel als Einschub oben links im Text-Panel, Text fließt darum, Knöpfe volle Breite darunter */
@container ccta (max-width:539px){
  .cc-in{display:flow-root;min-height:0}
  .cc-art{--cut:10px;float:left;z-index:1;width:112px;height:124px;min-height:0;margin:12px 14px 6px 12px}
  .cc-pane{inset:2.5px 3px 3px 2.5px}
  .cc-goose{width:88px;bottom:-9px}
  .cc-sfx{left:2px;bottom:6px;font-size:13px;-webkit-text-stroke-width:3.5px}
  .cc-ball{left:3px;top:4px;padding:6px 9px 7px;font-size:12px;letter-spacing:.01em}
  .cc-body{--poly:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 26px) 100%,0 100%);margin:0;padding:14px 16px 16px 16px}
  .cc-h{padding-top:2px;font-size:18px;line-height:1.24}
  .cc-p{font-size:14px;line-height:1.5}
  .cc-act{clear:both;gap:2px 16px;margin-top:12px}
  .cc-go{width:100%}
  .cc-x{top:4px;right:4px}
}

/* -- Maus: die Karten im Karton heben sich kurz an, der Pfeil im Knopf rutscht (wie überall) */
@media (hover:hover) and (pointer:fine){
  .ccta:hover .gb-c1{transform:translate(-2px,-6px)}
  .ccta:hover .gb-c2{transform:translateY(-9px)}
  .ccta:hover .gb-c3{transform:translate(2px,-6px)}
  .cc-go:hover svg{transform:translateX(3px)}
  .cc-alt:hover,.cc-alt:hover b{color:var(--ichigo-hover)}
}