/* ═══════════════════════════════════════════════════════════════════════════
   Unterseiten (danke.html, support.html) — baut auf site.css auf.
   ═══════════════════════════════════════════════════════════════════════════ */

body.page{ background:linear-gradient(180deg,#FBFBFE 0%, var(--bg) 380px); }

.pg-wrap{ padding:8.5rem 0 5rem; min-height:70vh; }
.pg-wrap h1{ font-size:clamp(2rem,4vw,2.9rem); margin-top:.5rem; }
.pg-lede{ color:var(--ink-2); font-size:1.03rem; margin-top:1rem; max-width:62ch; }
.pg-lede strong{ color:var(--ink); font-weight:600; }
.pg-h2{ font-size:1.4rem; margin:2.6rem 0 1rem; }
.pg-state{ padding:2.6rem 0; color:var(--ink-2); }
.pg-state h1{ margin-bottom:.8rem; }
.pg-state .btn{ margin-top:1.4rem; }
.mono{ font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace; }

.pg-tick{ color:#16A34A; margin-bottom:1.2rem; }

/* ── Bestell-Übersicht ────────────────────────────────────────────────── */
.pg-card{ margin-top:2rem; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-l); overflow:hidden; box-shadow:var(--sh-1); }
.pg-row{ display:flex; align-items:center; gap:1rem; padding:.95rem 1.3rem;
  border-bottom:1px solid var(--line); font-size:.94rem; }
.pg-row:last-child{ border-bottom:0; }
.pg-row span{ color:var(--ink-3); min-width:150px; }
.pg-row b{ font-weight:600; }
.pg-row-key{ background:var(--v-soft); flex-wrap:wrap; }
.pg-row .key{ font-size:1.02rem; letter-spacing:.05em; color:var(--v); }
.pg-row .btn{ margin-left:auto; }

.pg-demo{ margin-top:1.1rem; padding:.95rem 1.15rem; font-size:.88rem; color:#92400E;
  background:#FEF6E7; border:1px solid #F5D9A8; border-radius:var(--r); }
.pg-demo b{ color:#7C3200; }
.pg-demo code{ background:#FBEBD0; color:#7C3200; }

.pg-steps{ counter-reset:s; list-style:none; padding:0; margin:0; display:grid; gap:.85rem; }
.pg-steps li{ position:relative; padding-left:2.5rem; color:var(--ink-2); font-size:.96rem; }
.pg-steps li::before{ counter-increment:s; content:counter(s); position:absolute; left:0; top:-.05rem;
  width:26px; height:26px; display:grid; place-items:center; font-family:var(--disp);
  font-size:.78rem; font-weight:600; color:var(--v); background:var(--v-soft); border-radius:8px; }
.pg-steps b{ color:var(--ink); }

.pg-support{ margin-top:2.4rem; padding:1.5rem 1.4rem; background:var(--bg-2);
  border:1px solid var(--line); border-radius:var(--r-l); }
.pg-support h3{ font-size:1.02rem; margin-bottom:.45rem; }
.pg-support p{ color:var(--ink-2); font-size:.93rem; margin-bottom:1rem; }

/* ── Kontingent-Anzeige ───────────────────────────────────────────────── */
.pg-quota{ display:flex; align-items:center; gap:.65rem; margin-top:1.8rem; padding:.85rem 1.1rem;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh-1); font-size:.91rem; color:var(--ink-2); }
.pg-quota-dot{ flex:none; width:9px; height:9px; border-radius:50%; background:var(--ink-3); }
.pg-quota-dot.is-free{ background:#16A34A; box-shadow:0 0 0 4px rgba(22,163,74,.14); }
.pg-quota-dot.is-paid{ background:var(--w); box-shadow:0 0 0 4px rgba(217,119,6,.14); }

/* ── Formular ─────────────────────────────────────────────────────────── */
.pg-form{ margin-top:1.8rem; display:grid; gap:1.3rem; max-width:620px; }
.pg-form label{ display:grid; gap:.4rem; }
.pg-form label > span{ font-size:.89rem; font-weight:600; color:var(--ink); }
.pg-form label > span i{ font-style:normal; color:var(--v); }
.pg-form small{ font-size:.79rem; color:var(--ink-3); }
.pg-form input[type=email], .pg-form input[type=text], .pg-form textarea{
  font:400 1rem/1.5 var(--font); color:var(--ink); background:#fff;
  border:1px solid var(--line-2); border-radius:10px; padding:.8rem 1rem;
  transition:border-color .22s, box-shadow .22s; resize:vertical; }
.pg-form input:focus, .pg-form textarea:focus{ outline:none; border-color:var(--v);
  box-shadow:0 0 0 3px rgba(91,61,245,.14); }
.pg-check{ grid-template-columns:auto 1fr; align-items:start; gap:.7rem !important; }
.pg-check input{ width:18px; height:18px; margin-top:.15rem; accent-color:#5B3DF5; }
.pg-check span{ font-size:.91rem; color:var(--ink-2); font-weight:400 !important; }
.pg-check strong{ color:var(--ink); font-weight:600; }
.pg-err{ padding:.8rem 1.05rem; font-size:.89rem; color:#B91C1C;
  background:#FEF2F2; border:1px solid #FBC5C5; border-radius:var(--r); }
.pg-fine{ font-size:.81rem; color:var(--ink-3); }
.pg-form .btn{ justify-self:start; }

@media (max-width:560px){
  .pg-wrap{ padding-top:7rem; }
  .pg-row{ flex-direction:column; align-items:flex-start; gap:.3rem; }
  .pg-row span{ min-width:0; }
  .pg-row .btn{ margin-left:0; }
}

/* ═════════════════════════════════════════════════ Rechtsseiten ════════ */
.legal h1{ margin-bottom:1.6rem; }
.legal h2{ font-family:var(--disp); font-size:1.12rem; font-weight:600; letter-spacing:-.02em;
  margin:2.2rem 0 .7rem; }
.legal h2.legal-hi{ color:var(--v); }
.legal p{ color:var(--ink-2); font-size:.97rem; line-height:1.68; margin-bottom:.9rem; }
.legal strong{ color:var(--ink); font-weight:600; }
.legal a{ color:var(--v); text-decoration:underline; }
.legal ul{ margin:0 0 1rem; padding-left:1.3rem; color:var(--ink-2); font-size:.97rem;
  line-height:1.68; }
.legal li{ margin-bottom:.4rem; }
.legal code{ font-size:.85em; }

.todo{ background:#FEF3C7; border-bottom:1px dashed #D97706; padding:0 .18em;
  border-radius:3px; color:#78350F; font-weight:500; cursor:help; }

.legal-warn{ padding:1rem 1.2rem; margin-bottom:2rem; font-size:.9rem; color:#92400E;
  background:#FEF6E7; border:1px solid #F5D9A8; border-radius:var(--r); line-height:1.6; }
.legal-warn b{ color:#7C3200; }
.legal-warn .todo{ cursor:default; }

.legal-box{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-l);
  padding:1.3rem 1.4rem; margin:1rem 0; }
.legal-box p{ margin-bottom:.8rem; }
.legal-box p:last-child{ margin-bottom:0; }
.legal-small{ font-size:.83rem !important; color:var(--ink-3) !important; }
.legal-stand{ margin-top:2.4rem; padding-top:1.2rem; border-top:1px solid var(--line);
  font-size:.86rem !important; color:var(--ink-3) !important; }

.legal-table{ width:100%; border-collapse:collapse; margin:.6rem 0 1.4rem; font-size:.94rem; }
.legal-table th{ text-align:left; font-weight:600; color:var(--ink); padding:.7rem 1rem .7rem 0;
  border-bottom:1px solid var(--line); white-space:nowrap; vertical-align:top; width:38%; }
.legal-table td{ color:var(--ink-2); padding:.7rem 0; border-bottom:1px solid var(--line); }
.legal-table tr:last-child th, .legal-table tr:last-child td{ border-bottom:0; }

@media (max-width:560px){
  .legal-table th{ width:auto; white-space:normal; }
}