/* ==========================================================================
   CraftPartner — Laptop-Mockup, gemeinsam genutzt.

   Gegenstück zu shared/phone.css: zeigt die Fach-Sichten (Baumarktleiter,
   Hersteller), für die ein Telefon zu klein wäre. Der Deckel klappt auf und zu,
   damit eine Scroll-Sequenz von einem Gerät zum nächsten übergeben kann.

   Grundgerüst:
     <div class="cp-laptop">
       <div class="cp-laptop__lid">
         <div class="cp-laptop__screen">
           <div class="cp-dash"> … Kacheln … </div>
         </div>
       </div>
       <div class="cp-laptop__base"></div>
       <p class="cp-laptop__cap">…</p>
     </div>

   Zustände: .is-open  Deckel offen (sonst zugeklappt)
   Farben über --cp-laptop-* und --cp-dash-*; jede Version setzt sie selbst.
   ========================================================================== */

.cp-laptop{
  --cp-laptop-frame:#2b2b2b;
  --cp-laptop-base:#3a3a3a;
  --cp-laptop-screen:#ffffff;
  --cp-laptop-ink:#1a1f2b;
  --cp-laptop-muted:#5a6377;
  --cp-laptop-line:#e2e5ec;
  --cp-laptop-soft:#f5f6f9;
  --cp-laptop-accent:#2f4a3c;

  margin:0;width:100%;max-width:34rem;perspective:1400px;
}

.cp-laptop__lid{
  position:relative;transform-origin:bottom center;
  background:var(--cp-laptop-frame);
  border-radius:10px 10px 2px 2px;
  padding:10px 10px 12px;
  box-shadow:0 26px 50px -34px rgba(0,0,0,.7);
  transform:rotateX(-88deg);
  transition:transform .7s cubic-bezier(.22,.9,.3,1);
}
.cp-laptop.is-open .cp-laptop__lid{transform:rotateX(0deg)}

/* Kamerapunkt im Rahmen — winzig, aber ohne ihn liest sich das Gerät nicht. */
.cp-laptop__lid::before{
  content:"";position:absolute;top:4px;left:50%;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:#6b6b6b;
}

.cp-laptop__screen{
  background:var(--cp-laptop-screen);color:var(--cp-laptop-ink);
  border-radius:3px;overflow:hidden;
  aspect-ratio:16/10;
  font:400 13px/1.45 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  display:flex;flex-direction:column;
}

/* Sockel: die Kante, auf der der Deckel sitzt. */
.cp-laptop__base{
  height:11px;border-radius:0 0 12px 12px;
  background:linear-gradient(var(--cp-laptop-base),var(--cp-laptop-frame));
  margin-inline:-14px;position:relative;
}
.cp-laptop__base::after{
  content:"";position:absolute;top:3px;left:50%;transform:translateX(-50%);
  width:16%;height:3px;border-radius:0 0 4px 4px;background:rgba(0,0,0,.35);
}

.cp-laptop__cap{
  margin:.9rem 0 0;text-align:center;
  font:400 .6875rem/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--cp-laptop-muted);
}

/* ── Zwei unterscheidbare Geräte ─────────────────────────────────────
   Wenn nacheinander zwei Laptops auffahren, müssen sie sich auf den ersten
   Blick unterscheiden — sonst wirkt es wie derselbe Rechner mit anderem Inhalt.
   Unterschieden werden Gehäusefarbe, Silhouette und die Kopfleiste im Bild. */

/* Handel: helles Gehäuse, breit und flach, warme Kopfleiste. */
.cp-laptop--retail{
  --cp-laptop-frame:#b9b4ab;
  --cp-laptop-base:#d3cec6;
  --cp-laptop-accent:#b45309;
}
.cp-laptop--retail .cp-laptop__lid{
  border-radius:6px 6px 2px 2px;padding:8px 8px 10px;
  box-shadow:0 22px 44px -30px rgba(0,0,0,.55);
}
.cp-laptop--retail .cp-laptop__lid::before{background:#8d8880}
.cp-laptop--retail .cp-laptop__base{height:9px;border-radius:0 0 8px 8px;margin-inline:-12px}
.cp-laptop--retail .cp-dash__bar{
  background:#fdf3e6;border-bottom:2px solid #b45309;
}
.cp-laptop--retail .cp-dash__who{color:#7a3c05}

/* Hersteller: dunkles Gehäuse, kräftigerer Rahmen, kühle Kopfleiste. */
.cp-laptop--maker{
  --cp-laptop-frame:#1b1f26;
  --cp-laptop-base:#2c323c;
  --cp-laptop-accent:#0d9488;
}
.cp-laptop--maker .cp-laptop__lid{
  border-radius:14px 14px 3px 3px;padding:13px 13px 16px;
  box-shadow:0 30px 56px -32px rgba(0,0,0,.8);
}
.cp-laptop--maker .cp-laptop__lid::before{background:#5d6470}
.cp-laptop--maker .cp-laptop__base{height:13px;border-radius:0 0 14px 14px;margin-inline:-16px}
.cp-laptop--maker .cp-dash__bar{
  background:#eef6f4;border-bottom:2px solid #0d9488;
}
.cp-laptop--maker .cp-dash__who{color:#0b5f57}

/* ── Innenleben: ein kleines Dashboard ──────────────────────────────── */

.cp-dash{display:flex;flex-direction:column;height:100%}

.cp-dash__bar{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  padding:.6rem .85rem;border-bottom:1px solid var(--cp-laptop-line);
  background:var(--cp-laptop-soft);
}
.cp-dash__who{
  font:700 .6875rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.1em;text-transform:uppercase;color:var(--cp-laptop-ink);
}
.cp-dash__where{font-size:.6875rem;color:var(--cp-laptop-muted)}
/* Kennzeichnung als Beispieldaten — steht bewusst im Gerät, nicht daneben. */
.cp-dash__sample{
  margin-left:auto;font:700 .5625rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.09em;text-transform:uppercase;
  background:#fde68a;color:#5c4700;padding:.28rem .45rem;border-radius:3px;
}

.cp-dash__body{padding:.85rem;display:grid;gap:.7rem;flex:1;align-content:start}
.cp-dash__row{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}

.cp-card{
  border:1px solid var(--cp-laptop-line);border-radius:6px;padding:.6rem .7rem;
  min-width:0;
}
.cp-card__h{
  margin:0 0 .5rem;font:600 .5625rem/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.1em;text-transform:uppercase;color:var(--cp-laptop-muted);
}
.cp-card__big{
  margin:0;font:700 1.5rem/1 inherit;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;color:var(--cp-laptop-ink);
}
.cp-card__sub{margin:.25rem 0 0;font-size:.625rem;color:var(--cp-laptop-muted)}

/* Waagerechte Balken, direkt beschriftet — keine Achse, kein Gitter.
   Name links neben der Spur, nicht darin: sonst verdeckt die Füllung ihn. */
.cp-bars{display:grid;gap:.4rem;margin:0;padding:0;list-style:none}
.cp-bars li{display:grid;grid-template-columns:minmax(0,7.5rem) minmax(0,1fr) auto;
  gap:.5rem;align-items:center;font-size:.625rem;color:var(--cp-laptop-ink)}
.cp-bars__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-bars__track{height:12px;border-radius:3px;background:var(--cp-laptop-soft);overflow:hidden}
.cp-bars__fill{display:block;height:100%;border-radius:3px;width:calc(var(--v) * 1%)}
.cp-bars__val{font-variant-numeric:tabular-nums;color:var(--cp-laptop-muted);font-size:.625rem}

/* Anteil zweier Größen in einem Balken, beide Seiten beschriftet. */
.cp-split{display:flex;height:16px;border-radius:3px;overflow:hidden;gap:2px}
.cp-split span{display:flex;align-items:center;justify-content:center;
  font:700 .5625rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#fff}

.cp-legend{list-style:none;margin:.45rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem .8rem}
.cp-legend li{display:flex;align-items:center;gap:.3rem;font-size:.5625rem;color:var(--cp-laptop-muted)}
.cp-legend i{width:8px;height:8px;border-radius:2px;flex:none}

/* Abgeleitete Empfehlung — der Punkt, an dem aus Daten eine Handlung wird. */
.cp-advice{
  border-left:3px solid var(--cp-laptop-accent);background:var(--cp-laptop-soft);
  padding:.55rem .7rem;border-radius:0 4px 4px 0;font-size:.6875rem;
  color:var(--cp-laptop-ink);
}
.cp-advice b{display:block;margin-bottom:.15rem;font-size:.625rem}

@media (prefers-reduced-motion:reduce){
  .cp-laptop__lid{transition:none;transform:rotateX(0deg)}
}

@media (max-width:64rem){
  /* Im Fluss steht das Gerät immer offen — es gibt keine Sequenz mehr. */
  .cp-laptop__lid{transform:rotateX(0deg)}
  .cp-laptop{max-width:100%}
}

@media (max-width:34rem){
  .cp-dash__row{grid-template-columns:minmax(0,1fr)}
  .cp-laptop__screen{aspect-ratio:auto}
}