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

   Zeigt konkrete Funktion statt sie zu beschreiben. Nur Geometrie; Farben setzt
   jede Version über die Variablen unten, damit das Gerät sich in ihr Design fügt.

   Grundgerüst:
     <div class="cp-phone">
       <div class="cp-phone__frame">
         <div class="cp-phone__notch"></div>
         <div class="cp-phone__screen">
           <div class="cp-screen is-on">
             <p class="cp-screen__head">…</p>
             …Bausteine…
           </div>
         </div>
       </div>
       <p class="cp-phone__cap">…</p>
     </div>

   Bausteine: .cp-bubble(.--me) · .cp-row(.--ok|.--gap) · .cp-note(.--learn|.--sell)
              .cp-opts > .cp-opt · .cp-aisle > .cp-aisle__row
   ========================================================================== */

.cp-phone{
  --cp-phone-frame:#101a33;
  --cp-phone-screen:#ffffff;
  --cp-phone-ink:#1a1f2b;
  --cp-phone-muted:#5a6377;
  --cp-phone-line:#dfe3ec;
  --cp-phone-soft:#f4f5f8;
  --cp-phone-accent:#f5c518;
  --cp-phone-ok:#0e6b53;
  --cp-phone-gap:#a33517;
  --cp-phone-radius:30px;
  --cp-phone-shadow:0 30px 60px -30px rgba(16,26,51,.6);

  margin:0;max-width:20rem;
}

.cp-phone__frame{
  position:relative;background:var(--cp-phone-frame);
  border-radius:var(--cp-phone-radius);padding:12px;
  box-shadow:var(--cp-phone-shadow);
}
.cp-phone__notch{
  position:absolute;top:12px;left:50%;transform:translateX(-50%);
  width:38%;height:18px;background:var(--cp-phone-frame);
  border-radius:0 0 12px 12px;z-index:2;
}
.cp-phone__screen{
  position:relative;background:var(--cp-phone-screen);color:var(--cp-phone-ink);
  border-radius:calc(var(--cp-phone-radius) - 10px);overflow:hidden;display:grid;
  font:400 13px/1.45 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
.cp-phone__cap{
  margin:.85rem 0 0;text-align:center;
  font:400 .6875rem/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--cp-phone-muted);
}

/* Bildschirme liegen übereinander; nur .is-on wird gezeigt. Eine einzelne
   Version ohne Umschaltung setzt einfach .is-on auf ihren einen Bildschirm. */
.cp-screen{grid-area:1/1;padding:2.1rem 1.1rem 1.2rem;display:none}
.cp-screen.is-on{display:block}

.cp-screen__head{
  margin:0 0 1rem;
  font:700 .6875rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.14em;text-transform:uppercase;color:var(--cp-phone-muted);
  padding-bottom:.7rem;border-bottom:1px solid var(--cp-phone-line);
}

.cp-bubble{
  font-size:.8125rem;line-height:1.45;padding:.6rem .75rem;border-radius:10px;
  background:var(--cp-phone-soft);margin:0 0 .5rem;
}
.cp-bubble--me{background:var(--cp-phone-frame);color:#fff;margin-left:2rem}

.cp-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:.75rem;
  padding:.6rem 0;border-bottom:1px solid var(--cp-phone-line);font-size:.8125rem;
}
.cp-row em{
  font-style:normal;flex:none;
  font:600 .6875rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.05em;color:var(--cp-phone-muted);
}
.cp-row--ok em{color:var(--cp-phone-ok)}
.cp-row--gap em{color:var(--cp-phone-gap)}

.cp-note{
  margin:.9rem 0 0;padding:.7rem .8rem;border-radius:8px;
  background:var(--cp-phone-soft);font-size:.75rem;line-height:1.45;color:var(--cp-phone-muted);
}
.cp-note--learn{background:#e7f3ee;color:#0b4d3c}
.cp-note--sell{background:#fdf3d0;color:#5c4700}

.cp-opts{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:.9rem}
.cp-opt{border:1px solid var(--cp-phone-line);border-radius:8px;padding:.65rem .7rem}
.cp-opt b{display:block;font-size:.75rem;color:var(--cp-phone-ink);margin-bottom:.15rem}
.cp-opt span{
  font:600 .75rem/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--cp-phone-muted);
}

/* Einkaufsliste: Position, Menge, Preis — plus Summenzeile. */
.cp-list{display:grid;gap:0;margin:0}
.cp-line{
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:.5rem;
  align-items:baseline;padding:.5rem 0;border-bottom:1px solid var(--cp-phone-line);
  font-size:.8125rem;
}
.cp-line__qty{
  font:600 .6875rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--cp-phone-muted);font-variant-numeric:tabular-nums;
}
.cp-line__price{
  font:600 .75rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--cp-phone-ink);font-variant-numeric:tabular-nums;min-width:4.2rem;text-align:right;
}
.cp-total{
  display:flex;justify-content:space-between;align-items:baseline;gap:.75rem;
  padding:.65rem 0 0;margin-top:.15rem;border-top:2px solid var(--cp-phone-ink);
  font-size:.8125rem;font-weight:700;
}
.cp-total span:last-child{
  font:700 .95rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-variant-numeric:tabular-nums;
}

/* Nachbarschaft: wer in der Nähe helfen kann, mit Fertigkeiten und Werkzeug. */
.cp-people{display:grid;gap:.5rem}
.cp-person{
  border:1px solid var(--cp-phone-line);border-radius:8px;padding:.6rem .7rem;
}
.cp-person__top{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem}
.cp-person__name{font-size:.8125rem;font-weight:700}
.cp-person__far{
  font:600 .6875rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--cp-phone-muted);flex:none;
}
.cp-person__meta{margin:.15rem 0 .45rem;font-size:.6875rem;color:var(--cp-phone-muted)}
.cp-tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem}
.cp-tags li{
  font:600 .625rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  padding:.28rem .4rem;border-radius:3px;
  background:var(--cp-phone-soft);color:var(--cp-phone-muted);
}
.cp-tags li.is-skill{background:#e7f3ee;color:#0b4d3c}
.cp-tags li.is-tool{background:var(--cp-phone-soft);color:var(--cp-phone-ink)}
.cp-person__ask{
  display:block;margin-top:.5rem;text-align:center;border-radius:6px;padding:.4rem;
  background:var(--cp-phone-frame);color:#fff;
  font:700 .6875rem/1 ui-sans-serif,system-ui,sans-serif;
}

.cp-aisle{display:grid;gap:.4rem}
.cp-aisle__row{
  display:flex;gap:.6rem;align-items:baseline;padding:.55rem .65rem;
  background:var(--cp-phone-soft);border-radius:8px;
}
.cp-aisle__row b{
  flex:none;min-width:4.2rem;
  font:700 .6875rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--cp-phone-ink);
}
.cp-aisle__row span{font-size:.75rem;color:var(--cp-phone-muted)}

/* Statische Variante: alle Bildschirme untereinander statt übereinander.
   Wird genutzt, wo kein Scrollmechanismus dahintersteht. */
.cp-phone--stack .cp-phone__screen{display:block}
.cp-phone--stack .cp-screen{display:block;border-bottom:1px solid var(--cp-phone-line)}
.cp-phone--stack .cp-screen:first-child{padding-top:2.1rem}
.cp-phone--stack .cp-screen + .cp-screen{padding-top:1.2rem}
.cp-phone--stack .cp-screen:last-child{border-bottom:0}

@media (prefers-reduced-motion:reduce){
  .cp-phone__frame{transition:none}
}

/* Winzige Legende über der Personenliste: welches Etikett meint Können,
   welches Besitz. Ohne sie sind die beiden Sorten nicht auseinanderzuhalten. */
.cp-tags--key{margin:-.35rem 0 .7rem;gap:.35rem}
.cp-tags--key li{opacity:.9}
.cp-tags--key li::before{content:"";display:inline-block;width:0}