/* Gemeinsame helle Ergaenzungen zu components.css, die sowohl index.php
   als auch preise.php nutzen (beide seit 2026-08-17 auf dem Sand-Theme):
   Screenshots-Grid, Legal-Modal (legal_modal.php) und die Preistabelle.
   Kein Dark-Theme-Rest mehr - der fruehere ".landing"/".l-*"-Block wurde
   entfernt, nachdem preise.php auf components.css migriert wurde. */

/* ---------- Screenshots (index.php, helles Theme) ---------- */
.shot-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--space-5); }
.shot{
  border-radius:var(--radius-xl); overflow:hidden; border:1px solid var(--border-subtle);
  background:var(--surface-card); box-shadow:var(--shadow-image);
  transition:transform var(--duration-slow) var(--ease-out-soft);
}
.shot:hover{ transform:translateY(-4px) scale(1.01); }
.shot img{ display:block; width:100%; height:auto; }
.shot figcaption{ padding:var(--space-3) var(--space-4); font-size:var(--fs-sm); color:var(--text-secondary); }

/* ---------- Legal modal (:target, kein JS) ----------
   Geteilt von index.php UND preise.php (legal_modal.php). */
.legal-modal{
  display:none; position:fixed; inset:0; z-index:50;
  background:rgba(43,40,32,0.55);
  align-items:center; justify-content:center; padding:var(--space-5);
}
.legal-modal:target{ display:flex; }
.legal-modal-box{
  position:relative; max-width:560px; width:100%; max-height:82vh; overflow-y:auto;
  background:var(--surface-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-xl); padding:var(--space-6);
  color:var(--text-primary); font-family:var(--font-body); line-height:var(--lh-normal);
  box-shadow:var(--shadow-lg);
}
.legal-modal-box h2{ color:var(--text-primary); font-family:var(--font-display); margin-top:0; }
.legal-modal-box p{ color:var(--text-secondary); font-size:var(--fs-sm); }
.legal-modal-close{
  position:absolute; top:var(--space-4); right:var(--space-4);
  width:32px; height:32px; border-radius:var(--radius-full);
  display:flex; align-items:center; justify-content:center;
  background:var(--surface-sunken); color:var(--text-primary) !important; font-size:20px; line-height:1;
  text-decoration:none !important;
}
.legal-modal-close:hover{ background:var(--border-subtle); }

/* ---------- Klarstellungs-Box (index.php, #pflicht) ----------
   Native <details>/<summary>, kein JS - CSP auf index.php erlaubt kein
   script-src 'unsafe-inline'. */
.clarify-box{ margin-top:var(--space-5); padding-top:var(--space-5); border-top:1px solid var(--border-subtle); }
.clarify-intro{ font-weight:700; color:var(--text-primary); margin-bottom:var(--space-3); }
.clarify-item{ border-bottom:1px solid var(--border-subtle); }
.clarify-item:last-of-type{ border-bottom:none; }
.clarify-item summary{ cursor:pointer; list-style:none; font-weight:700; color:var(--text-primary); padding:var(--space-3) 0; }
.clarify-item summary::-webkit-details-marker{ display:none; }
.clarify-item summary::before{ content:"+"; display:inline-block; width:1.2em; color:var(--brand-primary); font-weight:800; }
.clarify-item[open] summary::before{ content:"–"; }
.clarify-item p{ color:var(--text-secondary); padding-bottom:var(--space-3); }
.clarify-item-warn summary{ color:var(--color-warning); }
.clarify-cta{ margin-top:var(--space-4); font-weight:600; }
.clarify-cta a{ color:var(--brand-primary); font-weight:700; }

/* ---------- Preisseite (preise.php) ---------- */
.tiers{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--space-5); }
.tier{
  background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg);
  padding:var(--space-5); display:flex; flex-direction:column; gap:var(--space-2);
  box-shadow:var(--shadow-card);
  transition:transform var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
.tier:hover{ transform:translateY(-4px); border-color:var(--brand-primary); box-shadow:var(--shadow-card-hover); }
.tier-name{ font-family:var(--font-display); font-weight:700; font-size:var(--fs-lg); color:var(--text-primary); }
.tier-size{ color:var(--text-secondary); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.06em; }
.tier-price{ font-size:var(--fs-2xl); font-weight:800; color:var(--brand-primary-active); margin-top:var(--space-2); }
.tier-price small{ font-size:var(--fs-sm); font-weight:400; color:var(--text-secondary); }
.tier-per{ color:var(--text-secondary); font-size:var(--fs-xs); }
.tier-enterprise{ border-color:var(--brand-primary); background:var(--surface-brand-tint); }