/* ═══════════════════════════════════════════════════════════════════════════
   AI-Mediabox — Modernist
   Ergänzt /css/style.css (Tokens, Nav, Buttons, Sektionen, Footer). Hier steht
   nur, was diese Seite zusätzlich braucht: Hero mit Video, Preisraster,
   Vergleich, FAQ, Formate, Portal-Dialog.

   Die Klassen- und data-Namen sind ein Vertrag mit js/app.js — Namen ändern
   heißt Checkout kaputtmachen.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Hero ──────────────────────────────────────────────────────────────── */

.hero-mb {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 64px var(--gutter) 72px;
  border-bottom: 2px solid var(--line);
}

.hero-mb-content { display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }

.hero-mb h1 {
  font-size: clamp(44px, 5.6vw, 82px);
  line-height: .92;
  letter-spacing: -.04em;
  text-transform: uppercase;
}
.hero-mb h1 .accent { color: var(--accent); }

.hero-mb-lead { font-size: 18px; line-height: 1.45; max-width: 46ch; color: var(--text-2); }

.hero-mb-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Bewegtbild läuft im System in reinem Schwarzweiß. */
.hero-mb-media { border: 2px solid var(--line); }
.hero-mb-media video {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08);
}

/* Vier Spalten für die acht Feature-Zellen — zwei volle Reihen statt einer
   angebrochenen. Ergänzt .cells / .cells-2 aus der Basis-CSS. */
.cells-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cells-4 .cell { border-right: 2px solid var(--line); border-bottom: 2px solid var(--line); padding: 28px; }
.cells-4 .cell:nth-child(4n + 1) { padding-left: 0; }
.cells-4 .cell:nth-child(4n) { padding-right: 0; border-right: 0; }
.cells-4 .cell:nth-last-child(-n + 4) { border-bottom: 0; }
.cells-4 .cell h3 { font-size: 20px; }

@media (max-width: 1100px) {
  .cells-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cells-4 .cell:nth-child(4n + 1),
  .cells-4 .cell:nth-child(4n) { padding: 28px; border-right: 2px solid var(--line); }
  .cells-4 .cell:nth-child(2n + 1) { padding-left: 0; }
  .cells-4 .cell:nth-child(2n) { padding-right: 0; border-right: 0; }
  .cells-4 .cell:nth-last-child(-n + 2) { border-bottom: 0; }
}

@media (max-width: 900px) {
  .cells-4 { grid-template-columns: 1fr; }
  .cells-4 .cell,
  .cells-4 .cell:nth-child(2n + 1),
  .cells-4 .cell:nth-child(4n + 1),
  .cells-4 .cell:nth-child(2n),
  .cells-4 .cell:nth-child(4n) { padding: 24px 0; border-right: 0; border-bottom: 2px solid var(--line); }
  .cells-4 .cell:last-child { border-bottom: 0; }
}

/* ── Preise ────────────────────────────────────────────────────────────── */

.duration-toggle { display: flex; flex-wrap: wrap; margin: 32px 0 0; }

.duration-btn {
  font: 800 14px/1.2 var(--font);
  color: var(--text-muted);
  background: none;
  border: 2px solid var(--line);
  border-right-width: 0;
  padding: 12px 20px;
  cursor: pointer;
}
.duration-btn:last-child { border-right-width: 2px; }
.duration-btn:hover { color: var(--ink); background: rgba(32, 30, 29, .05); }
.duration-btn.active { background: var(--ink); border-color: var(--ink); color: var(--bg); }

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 40px;
  border-top: 2px solid var(--line);
}

.pricing-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
  border-right: 2px solid var(--line);
}
.pricing-card:first-child { padding-left: 0; }
.pricing-card:last-child { padding-right: 0; border-right: 0; }

/* Das meistgewählte Paket bekommt die Ink-Fläche — Rot bleibt dem
   White-Label-Banner vorbehalten. */
.pricing-card.popular {
  background: var(--ink);
  color: var(--bg);
  padding-left: 32px;
  padding-right: 32px;
  border-right-color: var(--ink);
}
.pricing-card.popular .pricing-tier { color: var(--bg); }
.pricing-card.popular .pricing-desc,
.pricing-card.popular .pricing-billing,
.pricing-card.popular .pricing-setup { color: rgba(243, 242, 242, .72); }
.pricing-card.popular .pricing-features li { color: rgba(243, 242, 242, .88); }
.pricing-card.popular .pricing-features li::before { color: var(--bg); }
.pricing-card.popular .pricing-setup strong { color: var(--bg); }

.pricing-tier {
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--accent);
}

.pricing-storage { font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.pricing-storage span { font-size: 20px; }

.pricing-desc { font-size: 14px; color: var(--text-muted); margin-top: -8px; }

.pricing-price { display: flex; align-items: baseline; gap: 2px; font-weight: 800; letter-spacing: -.02em; }
.pricing-price .currency { font-size: 20px; }
.pricing-value { font-size: 34px; }
.pricing-price .period { font-size: 14px; font-weight: 600; }

.pricing-billing { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

.pricing-setup { font-size: 13px; color: var(--text-2); padding-top: 12px; border-top: 1px solid var(--line); }
.pricing-setup strong { font-weight: 800; color: var(--ink); }

.pricing-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pricing-features li { font-size: 14px; line-height: 1.4; color: var(--text-2); padding-left: 18px; position: relative; }
.pricing-features li::before { content: "—"; position: absolute; left: 0; color: var(--accent); font-weight: 800; }

.pricing-cta { margin-top: auto; justify-content: flex-start; }
.pricing-card.popular .pricing-cta { background: var(--bg); color: var(--ink); }
.pricing-card.popular .pricing-cta:hover { background: #fff; }

/* White-Label: die eine rote Fläche dieser Seite. */
.pricing-card-wide {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  background: var(--accent);
  color: var(--bg);
  padding: 40px;
  margin-top: 0;
  border-top: 2px solid var(--line);
}
.pricing-card-wide .pricing-tier { color: var(--bg); opacity: .8; }
.pricing-card-wide h3 { font-size: 28px; letter-spacing: -.02em; margin: 12px 0 8px; }
.pricing-card-wide p { font-size: 15px; line-height: 1.5; max-width: 60ch; }

.promo-input-wrapper { display: flex; align-items: center; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.promo-input-wrapper label { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; color: var(--text-muted); }

.promo-input {
  font: 600 14px/1.2 var(--font);
  color: var(--ink);
  background: none;
  border: 1px solid var(--line);
  padding: 10px 12px;
  min-width: 200px;
}
.promo-input::placeholder { color: var(--text-muted); }

.pricing-note { font-size: 13px; color: var(--text-muted); margin-top: 24px; max-width: 70ch; }

/* ── Vergleich ─────────────────────────────────────────────────────────── */

.compare-tabs { display: flex; flex-wrap: wrap; margin-top: 32px; }

.compare-tab {
  font: 800 14px/1.2 var(--font);
  color: var(--text-muted);
  background: none;
  border: 2px solid var(--line);
  border-right-width: 0;
  padding: 12px 20px;
  cursor: pointer;
}
.compare-tab:last-child { border-right-width: 2px; }
.compare-tab:hover { color: var(--ink); background: rgba(32, 30, 29, .05); }
.compare-tab.active { background: var(--ink); border-color: var(--ink); color: var(--bg); }

.compare-panel { display: none; }
.compare-panel.active { display: block; }

.comparison-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 32px;
  border-top: 2px solid var(--line);
}

.comparison-card { padding: 32px 32px 32px 0; border-right: 2px solid var(--line); }
.comparison-card:last-child { padding: 32px 0 32px 32px; border-right: 0; }
.comparison-card h3 { font-size: 24px; letter-spacing: -.02em; margin-bottom: 20px; }
.comparison-card.highlight h3 { color: var(--accent); }

.comparison-cons,
.comparison-pros { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.comparison-cons li,
.comparison-pros li { font-size: 15px; line-height: 1.45; color: var(--text-2); padding-left: 22px; position: relative; }
.comparison-cons li::before,
.comparison-pros li::before { position: absolute; left: 0; font-weight: 800; }
.comparison-cons li::before { content: "\00d7"; color: var(--text-muted); }
.comparison-pros li::before { content: "+"; color: var(--accent); }

/* ── Formate ───────────────────────────────────────────────────────────── */

.formats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }

.format-group { padding: 32px 32px 32px 0; border-right: 2px solid var(--line); }
.format-group:last-child { padding: 32px 0 32px 32px; border-right: 0; }

.format-group h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
}

.format-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.format-tag {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  padding: 6px 10px;
  border: 1px solid var(--line);
  color: var(--text-2);
}

/* ── FAQ ───────────────────────────────────────────────────────────────── */

.faq-list { border-top: 2px solid var(--line); }
.faq-item { border-bottom: 2px solid var(--line); }

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  width: 100%;
  text-align: left;
  font: 800 18px/1.3 var(--font);
  letter-spacing: -.01em;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 24px 0;
  cursor: pointer;
}
.faq-question:hover { color: var(--accent); }

.faq-icon { font-size: 24px; font-weight: 400; color: var(--accent); flex: none; line-height: 1; }
.faq-item.open .faq-icon { transform: rotate(45deg); }

.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }
.faq-item.open .faq-answer { grid-template-rows: 1fr; }
.faq-answer-inner { overflow: hidden; font-size: 15px; line-height: 1.6; color: var(--text-2); max-width: 80ch; }
.faq-item.open .faq-answer-inner { padding-bottom: 24px; }

/* ── Portal-Dialog ─────────────────────────────────────────────────────── */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(32, 30, 29, .6);
}
.modal-overlay.active { display: flex; }

.modal {
  background: var(--bg);
  border: 2px solid var(--ink);
  padding: 32px;
  width: 100%;
  max-width: 480px;
}
.modal h2 { font-size: 28px; letter-spacing: -.02em; margin-bottom: 12px; }
.modal > p { font-size: 15px; line-height: 1.5; color: var(--text-2); margin-bottom: 24px; }

.modal-form { display: flex; flex-direction: column; gap: 16px; }

.modal-input {
  font: 400 15px/1.4 var(--font);
  color: var(--ink);
  background: none;
  border: 1px solid var(--line);
  padding: 12px 14px;
  width: 100%;
}
.modal-input::placeholder { color: var(--text-muted); }

.modal-error { display: none; font-size: 14px; line-height: 1.4; color: var(--accent-deep); }
.modal-error.visible { display: block; }
.modal-error.success { color: var(--ink); }

.modal-actions { display: flex; gap: 12px; justify-content: flex-start; }

/* ── Ladezustand (btn.loading tauscht Label gegen Spinner) ─────────────── */

.btn .spinner { display: none; width: 16px; height: 16px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
.btn.loading .spinner { display: block; }
.btn.loading .btn-text { display: none; }
.btn.loading { pointer-events: none; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Ergebnis-Seiten (success / cancel) ────────────────────────────────── */

/* Abzüglich der klebenden Nav — sonst scrollt die Seite um genau deren Höhe,
   ohne dass darunter etwas käme. */
.result-page {
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100dvh - var(--nav-h));
  display: flex;
  align-items: center;
  padding: 64px var(--gutter);
}

.result-card { max-width: 560px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.result-icon { font-size: 40px; line-height: 1; font-weight: 800; }
.result-icon.success { color: var(--accent); }
.result-icon.cancel { color: var(--text-muted); }
.result-card h1 { font-size: clamp(36px, 6vw, 64px); line-height: .95; letter-spacing: -.035em; text-transform: uppercase; }
.result-card p { font-size: 18px; line-height: 1.5; color: var(--text-2); }
.result-card .btn + .btn { margin-left: 0; }
.result-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pricing-card { padding: 32px; border-bottom: 2px solid var(--line); }
  .pricing-card:nth-child(2n + 1) { padding-left: 0; }
  .pricing-card:nth-child(2n) { padding-right: 0; border-right: 0; }
  .pricing-card:nth-last-child(-n + 2) { border-bottom: 0; }
  .pricing-card.popular { padding-left: 32px; padding-right: 32px; }
}

@media (max-width: 900px) {
  .hero-mb { grid-template-columns: 1fr; gap: 32px; padding: 40px var(--gutter) 48px; }
  .hero-mb-actions { width: 100%; flex-direction: column; align-items: stretch; }
  .hero-mb-actions .btn { justify-content: flex-start; }

  .duration-btn, .compare-tab { flex: 1 1 auto; }

  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-card,
  .pricing-card:nth-child(2n + 1),
  .pricing-card:nth-child(2n) { padding: 28px 0; border-right: 0; border-bottom: 2px solid var(--line); }
  .pricing-card.popular { padding: 28px 24px; }
  .pricing-card:last-child { border-bottom: 0; }

  .pricing-card-wide { grid-template-columns: 1fr; padding: 32px 24px; }
  .pricing-card-wide .btn { justify-content: flex-start; }

  .comparison-grid, .formats-grid { grid-template-columns: 1fr; }
  .comparison-card,
  .comparison-card:last-child,
  .format-group,
  .format-group:last-child { padding: 28px 0; border-right: 0; border-bottom: 2px solid var(--line); }
  .comparison-card:last-child,
  .format-group:last-child { border-bottom: 0; }

  .faq-question { font-size: 16px; gap: 16px; }
  .modal { padding: 24px; }
  .modal-actions { flex-direction: column-reverse; }
  .modal-actions .btn { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-answer { transition: none; }
  .btn .spinner { animation-duration: 2s; }
}