/* Seamless Moves — Innenseiten. Gleiches Design wie die Startseite:
   #0A0A0A Grund · #1C1C1E Karten · #111113 innere Kacheln · #2C2C2E Felder
   Akzent #FFD617 mit schwarzer Schrift. */
:root { color-scheme: dark; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: #0A0A0A; color: #FFFFFF;
  font-family: 'Archivo', sans-serif; line-height: 1.6;
}
a { color: #FFD617; text-decoration: none; }
a:hover { color: #FFE45C; }
.acc { color: #FFD617; }

/* ---------- Kopf ---------- */
.p-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 12px clamp(18px, 4vw, 56px);
  background: rgba(10,10,10,0.92);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid #1C1C1E;
}
.p-brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; color: #FFFFFF; font-weight: 800; letter-spacing: 0.5px; }
.p-brand img { width: 36px; height: 36px; }
.p-menu { display: flex; gap: 24px; font-size: 14.5px; font-weight: 500; }
.p-menu a { color: #9A9A9E; }
.p-menu a:hover { color: #FFD617; }
.p-nav-cta { flex-shrink: 0; }
@media (max-width: 860px) { .p-menu { display: none; } }

/* ---------- Buttons ---------- */
.btn-primary, .btn-second {
  display: inline-block; border-radius: 999px; font-weight: 700; font-size: 15px;
  padding: 13px 26px; white-space: nowrap; transition: background 0.2s, color 0.2s;
}
.btn-primary { background: #FFD617; color: #0A0A0A; }
.btn-primary:hover { background: #FFE45C; color: #0A0A0A; }
.btn-second { background: #2C2C2E; color: #FFD617; }
.btn-second:hover { background: #3A3A3C; color: #FFD617; }

/* ---------- Inhalt ---------- */
.p-main { max-width: 860px; margin: 0 auto; padding: clamp(28px, 6vw, 56px) clamp(18px, 4vw, 32px) 72px; }
.p-crumb { font-size: 13px; color: #9A9A9E; margin-bottom: 18px; }
.p-crumb a { color: #9A9A9E; }
.p-crumb a:hover { color: #FFD617; }
.p-crumb span { color: #2C2C2E; }
.p-crumb span:last-child { color: #9A9A9E; }
.p-h1 { font-size: clamp(28px, 5vw, 46px); font-weight: 800; line-height: 1.15; letter-spacing: -0.5px; margin: 0 0 22px; }
.p-h2 { font-size: clamp(18px, 2.4vw, 22px); font-weight: 700; margin: 0 0 14px; }
.p-lead { font-size: clamp(16px, 2vw, 18px); color: #9A9A9E; line-height: 1.7; margin: 0 0 28px; }
.p-p { color: #9A9A9E; margin: 0; }

.p-card { background: #1C1C1E; border-radius: 24px; padding: clamp(20px, 3vw, 30px); margin-bottom: 18px; }
.p-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.p-list li { position: relative; padding-left: 22px; color: #FFFFFF; font-size: 15px; }
.p-list li::before { content: "•"; position: absolute; left: 4px; color: #FFD617; }
.p-list-no li::before { content: "✗"; color: #9A9A9E; font-size: 13px; }

.p-price { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: #111113; border-radius: 24px; padding: 20px clamp(20px, 3vw, 30px); margin-bottom: 18px; }
.p-price-l { font-family: 'Space Grotesk', sans-serif; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #9A9A9E; }
.p-price-v { font-size: clamp(17px, 2.4vw, 21px); font-weight: 800; color: #FFD617; }

.p-notice { background: #111113; border-left: 3px solid #FFD617; border-radius: 12px;
  padding: 18px 20px; margin-bottom: 18px; color: #FFFFFF; font-size: 14.5px; line-height: 1.65; }
.p-todo { background: #111113; border: 1px dashed #2C2C2E; border-radius: 16px;
  padding: 18px 20px; margin-bottom: 18px; color: #9A9A9E; font-size: 13.5px; line-height: 1.6; }

/* ---------- Tabellen ---------- */
.p-tablewrap { overflow-x: auto; }
.p-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.p-table th { text-align: left; font-family: 'Space Grotesk', sans-serif; font-size: 11.5px; letter-spacing: 1.5px;
  text-transform: uppercase; color: #9A9A9E; font-weight: 600; padding: 0 12px 10px 0; border-bottom: 1px solid #2C2C2E; white-space: nowrap; }
.p-table td { padding: 12px 12px 12px 0; border-bottom: 1px solid #2C2C2E; }
.p-table tr:last-child td { border-bottom: none; }
.p-table-plain td:first-child { color: #9A9A9E; width: 38%; }

/* ---------- FAQ ---------- */
.p-faq { margin-bottom: 22px; }
.p-faq details { border-bottom: 1px solid #2C2C2E; }
.p-faq summary { cursor: pointer; list-style: none; padding: 16px 30px 16px 0; font-weight: 600; font-size: 15.5px; position: relative; }
.p-faq summary::-webkit-details-marker { display: none; }
.p-faq summary::after { content: "+"; position: absolute; right: 4px; top: 14px; color: #FFD617; font-size: 20px; }
.p-faq details[open] summary::after { content: "–"; }
.p-faq details p { margin: 0 0 18px; color: #9A9A9E; font-size: 14.5px; line-height: 1.7; }

/* ---------- Stats + CTA ---------- */
.p-stats { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.p-stats div { flex: 1 1 150px; background: #111113; border-radius: 24px; padding: 20px; }
.p-stats b { display: block; color: #FFD617; font-size: 26px; font-weight: 800; }
.p-stats span { color: #9A9A9E; font-size: 13.5px; }
.p-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

/* ---------- Fuss ---------- */
.p-foot { border-top: 1px solid #1C1C1E; padding: 48px clamp(18px, 4vw, 56px) 0; }
.p-foot-grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
@media (max-width: 900px) { .p-foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .p-foot-grid { grid-template-columns: 1fr; } }
.p-foot-h { font-family: 'Space Grotesk', sans-serif; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #9A9A9E; margin-bottom: 12px; }
.p-foot-p { color: #9A9A9E; font-size: 14px; line-height: 1.9; margin: 0 0 14px; }
.p-foot-p a { color: #9A9A9E; }
.p-foot-p a:hover { color: #FFD617; }
.p-foot-bar { max-width: 1240px; margin: 0 auto; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 22px 0; margin-top: 28px; border-top: 1px solid #1C1C1E; color: #9A9A9E; font-size: 13px; }
