/* Prompts zum Kopieren (prompts.html, 22.10.2026): the example chat in the hero, the prompt cards with a copy button.
   Builds on home.css + ratgeber.css: same tokens, same sections. */

/* ---------- hero object: the example chat (light, like a phone chat) ---------- */
.pchat { position: relative; width: min(460px, 100%); padding: 22px; border-radius: 30px; background: #f6f6f4; color: #111;
  box-shadow: 0 46px 90px rgba(0, 0, 0, .55), 0 8px 18px rgba(0, 0, 0, .3); transform: rotate(-2.5deg); }
.pchat-head { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 14px; border-bottom: 1px solid #e6e6e3;
  font: 600 14px/1 var(--font); color: #222; }
.pchat-head span { font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #8b8b90; }
.pchat .q { margin: 16px 0 0 auto; width: fit-content; max-width: 86%; padding: 12px 16px; border-radius: 20px 20px 6px 20px; background: #e9e9e6;
  font: 450 15px/1.4 var(--font); }
.pchat .tag { display: inline-block; margin-top: 14px; padding: 6px 11px; border-radius: 999px; background: #e2f2e6; color: #1f6a3c;
  font: 600 11px/1 var(--mono); letter-spacing: .06em; }   /* green: answered, not an error (his note 22.10) */
.pchat .a { margin: 10px 0 0; font: 450 15px/1.5 var(--font); color: #222; }
.pchat .a b { font-weight: 650; }
.pchat-foot { margin: 14px 4px 0; font: 400 10.5px/1.5 var(--mono); color: #8b8b90; }

/* ---------- the prompt cards ---------- */
.pr-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); align-items: start; counter-reset: pr; }
.pr { position: relative; padding: clamp(22px, 2.2vw, 30px); border-radius: 22px; border: 1px solid rgba(255, 255, 255, .09);
  background: linear-gradient(160deg, #161618, #0f0f11); }
.pr-k { display: flex; justify-content: space-between; gap: 12px; font: 500 var(--t-label)/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--terra-lit); }
.pr-k span:last-child { color: var(--dim); letter-spacing: .08em; text-transform: none; }
.pr h3 { margin: 16px 0 0; font: 500 clamp(20px, 1.9vw, 24px)/1.2 var(--font); letter-spacing: -.012em; }
.pr-use { margin: 8px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.pr-text { margin: 18px 0 0; padding: 18px 20px; border-radius: 14px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .06);
  font: 400 15px/1.62 var(--font); color: #dcdcd8; white-space: pre-wrap; overflow-wrap: anywhere; }
.pr-text mark { background: rgba(210, 102, 74, .13); color: var(--terra-lit); border-radius: 4px; padding: 0 2px; }
.pr-copy { margin-top: 14px; display: inline-flex; align-items: center; gap: 10px; }
.pr-copy svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pr-copy.ok { border-color: var(--terra-lit); color: var(--terra-lit); }

/* ---------- the bridge to the AI test ---------- */
.pr-bridge { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 28px clamp(24px, 5vw, 96px); align-items: center;
  padding: clamp(28px, 4vw, 52px); border-radius: 26px; border: 1px solid rgba(210, 102, 74, .28);
  background: radial-gradient(70% 120% at 0% 0%, rgba(210, 102, 74, .12), transparent 70%), #111113; }
.pr-bridge .h2 { margin: 0; }
.pr-bridge p { margin: 0; font-size: var(--t-lead); line-height: 1.6; color: var(--muted); }
.pr-bridge .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

@media (max-width: 1100px) {
  .pr-list { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
}
@media (max-width: 900px) {
  .pchat { transform: rotate(-1.5deg); }
  .pr-bridge { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .pr-text { padding: 15px 16px; font-size: 14.5px; }
  .pr-copy { width: 100%; justify-content: center; }
}

/* ---------- three tips ---------- */
.pr-tips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); }
@media (max-width: 900px) { .pr-tips { grid-template-columns: minmax(0, 1fr); } }