/* ==========================================================================
   shop.flx-development.com — Design-System (dunkel, shadcn/ui-inspiriert)
   ========================================================================== */

/* ---------- Schriften (lokal, kein CDN) ---------- */
@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design-Tokens ---------- */
:root {
  --bg:            #0A0A0A;
  --surface:       #111113;
  --surface-2:     #17171A;
  --text-strong:   #FAFAFA;
  --text:          #D4D4D8;
  --muted:         #A1A1AA;
  --border:        #27272A;
  --border-strong: #3F3F46;
  --accent:        #3E43F0;
  --accent-hover:  #565CFF;
  --link:          #8B93FF;
  --danger:        #F87171;
  --ok:            #4ADE80;

  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Consolas,
               "Liberation Mono", monospace;

  --container: 1120px;
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* Sticky Footer: Seite füllt mindestens den Viewport, Footer klebt unten */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

main { flex: 1 0 auto; }
.site-footer { flex-shrink: 0; margin-top: auto; }

h1, h2, h3, h4 {
  color: var(--text-strong);
  line-height: 1.2;
  margin: 0 0 0.5em;
  font-weight: 600;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2rem, 4.5vw, 3.25rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.125rem; }

p { margin: 0 0 1em; }

a {
  color: var(--link);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

code, kbd {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.4em;
}

::selection { background: rgba(62, 67, 240, 0.4); color: var(--text-strong); }

:focus-visible {
  outline: 2px solid var(--accent-hover);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}
.container-narrow { max-width: 780px; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 16px; top: -48px;
  z-index: 100;
  background: var(--accent);
  color: var(--text-strong);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  transition: top 0.15s ease;
}
.skip-link:focus { top: 12px; text-decoration: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-weight: 500;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  padding: 10px 20px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }

.btn-primary {
  background: var(--accent);
  color: var(--text-strong);
}
.btn-primary:hover { background: var(--accent-hover); }

.btn-secondary {
  background: transparent;
  color: var(--text-strong);
  border-color: var(--border-strong);
}
.btn-secondary:hover { border-color: var(--muted); background: var(--surface-2); }

.btn-sm { padding: 7px 14px; font-size: 0.9rem; }
.btn-lg { padding: 13px 26px; font-size: 1.05rem; border-radius: var(--radius-lg); }

/* ---------- Header / Navigation ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 64px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-strong);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}
.brand:hover { text-decoration: none; }
.brand-mark { flex: none; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 26px;
}
.site-nav > a:not(.btn) {
  color: var(--muted);
  font-size: 0.95rem;
  transition: color 0.15s ease;
}
.site-nav > a:not(.btn):hover { color: var(--text-strong); text-decoration: none; }

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-strong);
  padding: 7px 9px;
  cursor: pointer;
}
.nav-toggle .icon-close { display: none; }
.nav-open .nav-toggle .icon-menu { display: none; }
.nav-open .nav-toggle .icon-close { display: block; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 96px 0 80px;
  border-bottom: 1px solid var(--border);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 45% 45% at 78% 18%, rgba(62, 67, 240, 0.22), transparent 70%);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: 56px;
}
.hero-copy { max-width: 560px; }
.hero-copy .hero-text { max-width: 46ch; margin-inline: 0; }
.hero-copy .hero-actions { justify-content: flex-start; }

.badge {
  display: inline-block;
  font-size: 0.85rem;
  color: var(--link);
  background: rgba(62, 67, 240, 0.12);
  border: 1px solid rgba(62, 67, 240, 0.4);
  border-radius: 999px;
  padding: 4px 14px;
  margin: 0 0 20px;
}

.hero-text {
  font-size: 1.15rem;
  color: var(--text);
  max-width: 640px;
  margin: 0 auto 28px;
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.hero-note {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0;
}

/* ---------- Hero: Betriebs-Panel (rechts, illustrativ) ---------- */
.hero-panel {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 6px;
  box-shadow: 0 24px 64px -24px rgba(0, 0, 0, 0.8);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  overflow: hidden;
}
.hero-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 14px;
}
.hero-panel-title {
  color: var(--muted);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.75rem;
}
.hero-panel-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ok);
}
.hero-panel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.5);
  animation: heroPulse 2.6s ease-out infinite;
}
@keyframes heroPulse {
  0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.5); }
  70%  { box-shadow: 0 0 0 9px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}
.hero-panel-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.hero-panel-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px;
}
.hero-panel-list li + li { border-top: 1px solid var(--border); }
.hpl-key { color: var(--text); }
.hpl-val {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}
.hpl-val.is-ok { color: var(--ok); }
.hpl-val.is-ok::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
}
.hero-panel-foot {
  padding: 13px 16px 11px;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 0.8rem;
}
@media (prefers-reduced-motion: reduce) {
  .hero-panel-dot { animation: none; }
}
@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; gap: 36px; }
  .hero-copy { max-width: none; }
  .hero-panel { max-width: 440px; }
}

/* ---------- Sektionen ---------- */
.section { padding: 80px 0; }
.section + .section { border-top: 1px solid var(--border); }

.section-head {
  max-width: 640px;
  margin: 0 auto 48px;
  text-align: center;
}
.section-head p { color: var(--muted); margin: 0; }

/* ---------- Feature-Grid ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.feature-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
  transition: border-color 0.15s ease;
}
.feature-card:hover { border-color: var(--border-strong); }

.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  background: rgba(62, 67, 240, 0.14);
  border: 1px solid rgba(62, 67, 240, 0.35);
  color: var(--link);
  margin-bottom: 14px;
}
.feature-card h3 { margin-bottom: 6px; }
.feature-card p { color: var(--muted); font-size: 0.95rem; margin: 0; }

/* ---------- Screenshots ---------- */
.shot-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.shot-grid figure { margin: 0; }
.shot-grid img {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.shot-grid figcaption {
  color: var(--muted);
  font-size: 0.9rem;
  margin-top: 10px;
  text-align: center;
}

/* ---------- Produktkarten (Shop-Übersicht) ---------- */
/*
 * Wächst mit der Produktzahl: ein Produkt steht mittig statt mit einer leeren
 * Rasterspalte daneben, zwei stehen nebeneinander, ab drei wird umgebrochen.
 * Für ein neues Produkt ist hier nichts zu ändern.
 */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 460px));
  justify-content: center;
  gap: 20px;
}

.product-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 28px;
  transition: border-color 0.15s ease;
}
.product-card:hover { border-color: var(--border-strong); }
.product-card h3 { font-size: 1.25rem; margin-bottom: 8px; }

.product-card.is-soon {
  border-style: dashed;
  background: transparent;
}
.product-card.is-soon h3 { color: var(--muted); }

.product-short {
  color: var(--muted);
  font-size: 0.95rem;
  margin-bottom: 16px;
}

.product-price {
  color: var(--text);
  margin-bottom: 20px;
}
.product-price strong {
  color: var(--text-strong);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.product-price-note { color: var(--muted); font-size: 0.9rem; }

.card-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: auto;
}
.product-demo-link { font-size: 0.95rem; }
.product-soon-note {
  color: var(--muted);
  font-size: 0.9rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 14px;
}

/* ---------- Ablauf (3 Schritte) ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  counter-reset: step;
}
.step {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--text-strong);
  font-family: var(--font-mono);
  font-weight: 600;
  margin-bottom: 14px;
}
.step h3 { margin-bottom: 6px; }
.step p { color: var(--muted); font-size: 0.95rem; margin: 0; }

/* ---------- Preise ---------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 420px));
  justify-content: center;
  gap: 20px;
}

.plan-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 28px;
}
.plan-card.is-highlight {
  border-color: var(--accent);
  background:
    linear-gradient(180deg, rgba(62, 67, 240, 0.08), transparent 40%),
    var(--surface);
}

.plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.plan-label { font-size: 1.15rem; margin: 0; }
.plan-flag {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--link);
  background: rgba(62, 67, 240, 0.14);
  border: 1px solid rgba(62, 67, 240, 0.4);
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
}

.plan-price {
  margin: 14px 0 4px;
  color: var(--text-strong);
}
.plan-price .amount {
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.plan-price .period { color: var(--muted); font-size: 1rem; }

.plan-tagline { color: var(--muted); font-size: 0.95rem; margin-bottom: 18px; }

.plan-features {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  gap: 10px;
  flex: 1;
}
.plan-features li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.95rem;
}
.plan-features svg {
  flex: none;
  margin-top: 4px;
  color: var(--ok);
}

.pricing-note {
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
  margin: 28px auto 0;
  max-width: 560px;
}

/* ---------- FAQ ---------- */
.faq-list {
  max-width: 780px;
  margin-inline: auto;
  display: grid;
  gap: 12px;
}

.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  color: var(--text-strong);
  font-weight: 500;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 1.2rem;
  color: var(--muted);
  transition: transform 0.15s ease;
  flex: none;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-body {
  padding: 0 20px 18px;
  color: var(--muted);
}
.faq-item .faq-body p:last-child { margin-bottom: 0; }

/* ---------- Abschluss-CTA ---------- */
.cta-final { text-align: center; }
.cta-final .btn { margin-top: 8px; }
.cta-final p { color: var(--muted); }

/* ---------- Formulare ----------
   Breite: siehe .form-wrap weiter unten im Checkout-Abschnitt. Sie steht dort
   und nicht hier, weil sie zum zweispaltigen Bestellweg gehört. */
.form-wrap { margin-inline: auto; }

.form-grid { display: grid; gap: 22px; }

.field label,
fieldset legend {
  display: block;
  color: var(--text-strong);
  font-weight: 500;
  font-size: 0.95rem;
  margin-bottom: 8px;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field textarea {
  width: 100%;
  font: inherit;
  color: var(--text-strong);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 11px 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field textarea { resize: vertical; min-height: 120px; }

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(62, 67, 240, 0.25);
}

.field .hint {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 6px 0 0;
}

.field.has-error input,
.field.has-error textarea { border-color: var(--danger); }

.error-text {
  color: var(--danger);
  font-size: 0.85rem;
  margin: 6px 0 0;
}

.error-summary {
  background: rgba(248, 113, 113, 0.08);
  border: 1px solid rgba(248, 113, 113, 0.45);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  color: var(--text);
}
.error-summary p { margin: 0; color: var(--danger); font-weight: 500; }

/* Wunsch-Adresse mit festem Suffix */
.domain-field {
  display: flex;
  align-items: stretch;
}
.domain-field input {
  border-radius: var(--radius-md) 0 0 var(--radius-md) !important;
  border-right: none !important;
  font-family: var(--font-mono);
  min-width: 0;
}
.domain-suffix {
  display: flex;
  align-items: center;
  padding: 0 14px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  white-space: nowrap;
}

/* Plan-Auswahl */
fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}
.plan-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.plan-option { position: relative; }
.plan-option input {
  position: absolute;
  opacity: 0;
  inset: 0;
}
.plan-option label {
  display: block;
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  cursor: pointer;
  margin: 0;
  font-weight: 400;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.plan-option label strong { display: block; color: var(--text-strong); }
.plan-option label span { color: var(--muted); font-size: 0.9rem; }
.plan-option input:checked + label {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(62, 67, 240, 0.25);
}
.plan-option input:focus-visible + label { outline: 2px solid var(--accent-hover); outline-offset: 2px; }

/* Checkboxen */
.check-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.check-row input[type="checkbox"] {
  flex: none;
  width: 18px; height: 18px;
  margin-top: 4px;
  accent-color: var(--accent);
}
.check-row label {
  font-weight: 400;
  color: var(--text);
  font-size: 0.95rem;
  margin: 0;
}
.check-row.has-error label { color: var(--danger); }

/* Honeypot — für Menschen unsichtbar */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Produkt-Zeile über dem Bestellformular */
.order-product {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin-bottom: 24px;
}
.order-product p { margin: 0; color: var(--text-strong); }
.order-product .muted { color: var(--muted); font-size: 0.9rem; margin-top: 4px; }
.order-product-switch {
  margin-left: 10px;
  font-size: 0.9rem;
}

/* Bestellübersicht */
/*
 * Bestellzusammenfassung nach § 312j Abs. 2 BGB.
 * „In hervorgehobener Weise" ist eine Rechtsanforderung, keine Geschmacksfrage:
 * kräftigerer Rahmen als die übrigen Felder und eine Akzentkante links.
 */
.order-summary {
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
}
.order-summary p { margin: 0; }
.order-summary .muted { color: var(--muted); font-size: 0.9rem; }

.order-summary-head {
  font-size: 1.05rem;
  margin: 0 0 12px;
  color: var(--text-strong);
}
.order-summary-product {
  font-size: 1.1rem;
  margin-bottom: 16px !important;
}
.order-summary-product strong { color: var(--text-strong); }

.order-summary-list {
  display: grid;
  grid-template-columns: minmax(120px, auto) 1fr;
  gap: 10px 20px;
  margin: 0 0 16px;
  font-size: 0.95rem;
}
.order-summary-list dt {
  color: var(--muted);
  font-size: 0.85rem;
  padding-top: 2px;
}
.order-summary-list dd {
  margin: 0;
  color: var(--text);
}
.order-summary-list dd strong { color: var(--text-strong); }
.order-summary-list ul {
  margin: 8px 0 0;
  padding-left: 1.1em;
  color: var(--muted);
  font-size: 0.9rem;
}
.order-summary-list li { margin-bottom: 4px; }

.order-summary-note {
  color: var(--muted);
  font-size: 0.9rem;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

/* Pflichtangaben nach Art. 246c EGBGB, aufklappbar unter dem Formular */
.order-legal { margin-top: 32px; }

/* Transparenzhinweis auf der Bezahlseite, vor dem Laden des Stripe-Skripts */
.pay-privacy-note {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}
.pay-privacy-note strong { color: var(--text-strong); }
.pay-privacy-note a { color: var(--link); text-decoration: underline; }

@media (max-width: 640px) {
  .order-summary-list { grid-template-columns: 1fr; gap: 4px 0; }
  .order-summary-list dd { margin-bottom: 10px; }
}

.form-actions { display: grid; gap: 12px; }
.form-actions .after-note { color: var(--muted); font-size: 0.9rem; margin: 0; }

/* ---------- Inhalts-/Rechtsseiten ---------- */
.page-head {
  padding: 64px 0 40px;
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 80% at 50% -30%, rgba(62, 67, 240, 0.16), transparent 70%);
  pointer-events: none;
}
.page-head .container { position: relative; }
.page-head h1 { margin: 0; }
.page-head .lead { color: var(--muted); margin: 10px 0 0; max-width: 640px; }

.legal { padding: 48px 0 80px; }
.legal h2 { font-size: 1.35rem; margin-top: 2em; }
.legal h2:first-child { margin-top: 0; }
.legal h3 { font-size: 1.05rem; margin-top: 1.6em; }
.legal ul { padding-left: 1.2em; }
.legal li { margin-bottom: 0.4em; }

.platzhalter {
  background: rgba(62, 67, 240, 0.07);
  border: 1px dashed rgba(139, 147, 255, 0.55);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin: 16px 0;
  color: var(--muted);
}
.platzhalter-label {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--link);
  letter-spacing: 0.04em;
  margin: 0 0 6px;
}
.platzhalter p:last-child { margin-bottom: 0; }

.address-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  margin: 16px 0;
}
.address-block p { margin: 0; }

/* Ausfülllinie im Muster-Widerrufsformular */
.widerruf-line {
  border-bottom: 1px solid var(--border-strong);
  margin: 4px 0 14px !important;
}

/* ---------------------------------------------------------------------------
 * Startseite: Produktkarte, Plan-Kurzvergleich, Vertrauensblock
 * ------------------------------------------------------------------------- */
.hero-audience {
  color: var(--muted);
  font-size: 1rem;
}

/* Für wen das Produkt ist — steht bewusst über der Funktionsbeschreibung. */
.product-audience {
  color: var(--text-strong);
  font-size: 0.95rem;
  font-weight: 500;
  margin-bottom: 10px;
}

.product-highlights {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 8px;
}
.product-highlights li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--text);
  font-size: 0.95rem;
}
.product-highlights svg {
  flex: 0 0 auto;
  margin-top: 3px;
  color: var(--accent-hover);
}

/* Zwei Pläne nebeneinander: Der Unterschied muss ohne Klick sichtbar sein. */
.plan-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
.plan-compare-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  background: var(--surface-2);
}
.plan-compare-label {
  display: block;
  color: var(--muted);
  font-size: 0.85rem;
  margin-bottom: 2px;
}
.plan-compare-price {
  color: var(--text-strong);
  font-size: 1.3rem;
  font-weight: 600;
}
.plan-compare-price span {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 400;
}
.plan-compare-note {
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 20px;
}

/*
 * Ausblick-Karte im Produktraster.
 *
 * Kein gestrichelter Rahmen — der liest sich wie „unfertig". Stattdessen
 * dieselbe Form wie eine Produktkarte, nur ohne Fläche, mit einem leisen
 * Akzentschimmer und angedeuteten Platzhalterzeilen. Sie soll nach freiem
 * Platz aussehen, der gefüllt wird, nicht nach einer Lücke.
 */
.product-card-next {
  position: relative;
  overflow: hidden;
  background: transparent;
  border-color: var(--border);
}
.product-card-next::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 85% 0%, rgba(62, 67, 240, 0.16), transparent 70%),
    radial-gradient(circle at 1px 1px, rgba(250, 250, 250, 0.05) 1px, transparent 0) 0 0 / 22px 22px;
  pointer-events: none;
}
.product-card-next > * { position: relative; }
.product-card-next:hover { border-color: var(--border-strong); }
.product-card-next .product-short a { color: var(--link); text-decoration: underline; }

/* Statuszeile oben in der Karte */
.next-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-bottom: 18px;
  padding: 5px 12px 5px 10px;
  border: 1px solid rgba(139, 147, 255, 0.35);
  border-radius: 999px;
  background: rgba(62, 67, 240, 0.10);
  color: var(--link);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}
.next-badge-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--link);
  box-shadow: 0 0 0 3px rgba(139, 147, 255, 0.18);
}

/* Angedeutete künftige Produktkarten */
.next-slots {
  list-style: none;
  margin: 4px 0 24px;
  padding: 0;
  display: grid;
  gap: 12px;
}
.next-slots li {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: rgba(250, 250, 250, 0.02);
}
.next-slots span {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(250, 250, 250, 0.10), rgba(250, 250, 250, 0.04));
}
.next-slots span:first-child { width: 55%; }
.next-slots span:last-child  { width: 80%; height: 6px; }
.next-slots li:last-child { opacity: 0.55; }

/* Textlink mit Pfeil — bewegt sich beim Überfahren leicht mit */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--link);
  font-weight: 500;
}
.link-arrow svg { transition: transform 0.15s ease; }
.link-arrow:hover { color: var(--text-strong); }
.link-arrow:hover svg { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .link-arrow svg { transition: none; }
  .link-arrow:hover svg { transform: none; }
}

/* Referenzen, sobald references() gefüllt ist */
.ref-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.ref-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.ref-card blockquote {
  margin: 0 0 14px;
  color: var(--text);
  font-size: 1.02rem;
  line-height: 1.6;
}
.ref-meta { margin: 0; color: var(--muted); font-size: 0.9rem; }
.ref-meta a { color: var(--link); text-decoration: underline; }

/* Technische Voraussetzungen */
.req-list {
  margin: 0 0 24px;
  padding-left: 1.2em;
  color: var(--text);
}
.req-list li { margin-bottom: 10px; }
.req-note {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  margin: 0;
  color: var(--text);
}
.req-note strong { color: var(--text-strong); }

/* Fassung und Stand am Fuß eines Rechtstexts */
.legal-stand {
  margin-top: 3em;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.9rem;
}

/* ---------- Status-Seiten (Danke / 404) ---------- */
.status-page {
  min-height: 55vh;
  display: flex;
  align-items: center;
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
.status-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 60% at 50% -10%, rgba(62, 67, 240, 0.2), transparent 70%);
  pointer-events: none;
}
.status-card {
  position: relative;
  max-width: 560px;
  margin-inline: auto;
  text-align: center;
}
.status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px; height: 60px;
  border-radius: 999px;
  background: rgba(62, 67, 240, 0.14);
  border: 1px solid rgba(62, 67, 240, 0.4);
  color: var(--link);
  margin-bottom: 22px;
}
.status-code {
  font-family: var(--font-mono);
  color: var(--link);
  font-size: 0.95rem;
  margin-bottom: 10px;
}
.status-card .actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 26px;
}

/* ---------- Bezahlseite (eingebetteter Stripe-Checkout) ---------- */
.pay-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 32px;
  align-items: start;
}
.pay-main { min-width: 0; }

/* Das Bezahlformular gehört zur Seite — von Stripe kommen nur die Felder
   innerhalb von .pay-fields. */
.pay-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px 28px 28px;
}
.pay-form-title {
  font-size: 1.1rem;
  margin: 0 0 4px;
}
.pay-form-hint { margin: 0 0 22px; }

/* Mindesthöhe verhindert den Sprung, während Stripe die Zahlarten lädt. */
.pay-fields { min-height: 260px; }
.pay-loading {
  color: var(--muted);
  font-size: 0.9rem;
  padding: 24px 0;
}
.pay-fields.is-ready .pay-loading { display: none; }

.pay-error { margin-top: 20px; }

.pay-actions { margin-top: 26px; }
.pay-actions .btn { width: 100%; justify-content: center; }
.pay-actions .btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.pay-actions .after-note { margin-top: 14px; }

.pay-aside { position: sticky; top: 96px; }
.pay-summary {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
}
.pay-summary-head {
  font-weight: 600;
  color: var(--text-strong);
  margin: 0 0 16px;
}
.pay-summary .kv { margin: 0 0 16px; }
.pay-summary-total {
  border-top: 1px solid var(--border);
  padding-top: 14px;
  margin: 0 0 14px;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-strong);
}
.pay-summary .hint { margin-top: 10px; }

@media (max-width: 860px) {
  .pay-layout { grid-template-columns: 1fr; }
  .pay-aside { position: static; order: -1; }
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
  margin-top: 0;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  padding: 48px 24px 32px;
  flex-wrap: wrap;
}
.footer-brand {
  color: var(--text-strong);
  font-weight: 600;
  margin-bottom: 10px;
}
.footer-note {
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 10px;
  max-width: 420px;
}
.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-head {
  color: var(--text-strong);
  font-weight: 600;
  font-size: 0.9rem;
  margin: 0 0 4px;
}
.footer-nav a { color: var(--muted); font-size: 0.9rem; }
.footer-nav a:hover { color: var(--text-strong); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
  padding-top: 20px;
  padding-bottom: 28px;
  color: var(--muted);
  font-size: 0.85rem;
}
.footer-bottom p { margin: 0; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .shot-grid { grid-template-columns: repeat(2, 1fr); }
  .shot-grid figure:last-child { grid-column: 1 / -1; max-width: 560px; margin-inline: auto; }
}

@media (max-width: 768px) {
  .section { padding: 56px 0; }
  .hero { padding: 64px 0 56px; }

  .feature-grid,
  .shot-grid,
  .steps,
  .pricing-grid,
  .product-grid,
  .plan-options { grid-template-columns: 1fr; }
  .shot-grid figure:last-child { max-width: none; }

  .nav-toggle { display: inline-flex; }

  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 12px 24px 18px;
  }
  .site-nav > a:not(.btn) { padding: 10px 4px; font-size: 1rem; }
  .site-nav .btn { margin-top: 8px; }
  .nav-open .site-nav { display: flex; }

  .footer-inner { flex-direction: column; gap: 28px; }
  .footer-bottom { flex-direction: column; gap: 6px; }
}

/* ==========================================================================
   Kundenbereich (/konto/)
   ========================================================================== */
.auth-wrap { max-width: 480px; margin-inline: auto; }
.auth-title { text-align: center; margin-bottom: 24px; }

.auth-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 28px;
}

.totp-secret {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  color: var(--text-strong);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  overflow-wrap: anywhere;
  user-select: all;
}

.totp-input {
  font-family: var(--font-mono);
  letter-spacing: 0.3em;
  text-align: center;
  font-size: 1.15rem;
}

.success-summary {
  background: rgba(74, 222, 128, 0.08);
  border: 1px solid rgba(74, 222, 128, 0.4);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
}
.success-summary p { margin: 0; color: var(--ok); font-weight: 500; }
.success-summary p + p { color: var(--text); font-weight: 400; margin-top: 6px; }
.success-summary .hint { color: var(--muted); font-size: 0.85rem; }
.invite-link code { display: block; overflow-wrap: anywhere; padding: 8px 12px; }

.account-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.account-head form { margin: 0; }

.empty-box {
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 24px;
  color: var(--muted);
}
.empty-box p:first-child { margin-top: 0; }
.empty-box p:last-child { margin-bottom: 0; }
.empty-box .btn { margin-top: 8px; }

/* Sachlicher Hinweiskasten (z. B. Erklärung zur Buchhaltungs-Übergabe) */
.info-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  color: var(--muted);
  font-size: 0.92rem;
}
.info-box p:first-child { margin-top: 0; color: var(--text-strong); }
.info-box p:last-child { margin-bottom: 0; }

/* Jahresauswahl in der Buchhaltung */
.year-filter {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0;
}
.year-filter select { width: auto; min-width: 100px; }

/* Aktionsspalte in Tabellen: Buttons nebeneinander, nicht untereinander */
.cell-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.cell-actions form { margin: 0; }

.account-product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.account-product {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
}
.account-product-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.account-product-head h3 { margin: 0; }

.kv { margin: 0; display: grid; gap: 6px; }
.kv div { display: flex; gap: 12px; }
.kv dt { color: var(--muted); min-width: 90px; flex: none; }
.kv dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }

.status-badge {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 500;
  border-radius: 999px;
  padding: 2px 10px;
  border: 1px solid var(--border-strong);
  color: var(--muted);
  white-space: nowrap;
}
.status-aktiv      { color: var(--ok); border-color: rgba(74, 222, 128, 0.45); background: rgba(74, 222, 128, 0.08); }
.status-pausiert   { color: #FBBF24; border-color: rgba(251, 191, 36, 0.45); background: rgba(251, 191, 36, 0.08); }
.status-gekuendigt { color: var(--danger); border-color: rgba(248, 113, 113, 0.45); background: rgba(248, 113, 113, 0.08); }
.status-admin      { color: var(--link); border-color: rgba(62, 67, 240, 0.45); background: rgba(62, 67, 240, 0.10); }

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  min-width: 560px;
}
.table th {
  text-align: left;
  color: var(--muted);
  font-weight: 500;
  font-size: 0.85rem;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  white-space: nowrap;
}
.table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: none; }
.table form { margin: 0; display: inline; }

.admin-inline-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
  gap: 16px;
}
.admin-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.admin-actions form { margin: 0; }

.field select {
  width: 100%;
  font: inherit;
  color: var(--text-strong);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 11px 14px;
}
.field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(62, 67, 240, 0.25);
}
.field input[type="file"] {
  width: 100%;
  color: var(--text);
  font-size: 0.95rem;
}

@media (max-width: 768px) {
  .account-product-grid { grid-template-columns: 1fr; }
}

/* ---------- Konto: Tab-Leiste, Panels, Statistiken ---------- */
.account-tabs {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.account-tabs-inner {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
}
.account-tab {
  display: inline-block;
  padding: 14px 14px 12px;
  color: var(--muted);
  font-size: 0.95rem;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.account-tab:hover { color: var(--text-strong); text-decoration: none; }
.account-tab.is-active {
  color: var(--text-strong);
  border-bottom-color: var(--accent);
}
.logout-form { margin: 0 0 0 auto; }
.logout-btn { background: none; border: none; cursor: pointer; font: inherit; }
.logout-btn:hover { color: var(--danger); }

.account-section { padding: 48px 0 80px; }
.account-intro { margin-bottom: 36px; }
.account-intro h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 4px; }
.account-intro .lead { color: var(--muted); margin: 0; }

.account-section-title { font-size: 1.25rem; margin-bottom: 16px; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 48px;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
}
.stat-value {
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text-strong);
  margin: 0 0 2px;
}
.stat-label { color: var(--muted); font-size: 0.9rem; margin: 0 0 6px; }
.stat-card a { font-size: 0.9rem; }

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 26px 28px;
}
.panel + .panel { margin-top: 24px; }
.panel-title { font-size: 1.2rem; margin-bottom: 18px; }
.panel form:last-child { margin-bottom: 0; }
.panel .status-badge { margin-right: 6px; }

@media (max-width: 768px) {
  .stat-grid { grid-template-columns: 1fr; }
}

/* ---------- Passwortfeld-Komponente ---------- */
.pw-field { position: relative; }
.pw-field input { padding-right: 48px !important; }

.pw-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--muted);
  cursor: pointer;
}
.pw-toggle:hover { color: var(--text-strong); background: var(--surface-2); }
.pw-toggle svg { display: block; }
.pw-toggle .icon-eye-off { display: none; }
.pw-toggle.is-visible .icon-eye { display: none; }
.pw-toggle.is-visible .icon-eye-off { display: block; }

.pw-meter {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 10px;
}
.pw-meter span {
  height: 4px;
  border-radius: 999px;
  background: var(--border-strong);
  transition: background 0.15s ease;
}
.pw-meter[data-level="1"] span:nth-child(1) { background: var(--danger); }
.pw-meter[data-level="2"] span:nth-child(-n+2) { background: #FBBF24; }
.pw-meter[data-level="3"] span:nth-child(-n+3) { background: var(--ok); }
.pw-meter[data-level="4"] span { background: var(--ok); }

.pw-meter-label { min-height: 1.2em; margin-top: 6px !important; }
.pw-match-hint { margin-top: 6px; }

/* ---------- Verwaltung: Bestellungen ---------- */
.status-neu {
  color: var(--link);
  border-color: rgba(62, 67, 240, 0.45);
  background: rgba(62, 67, 240, 0.10);
}

.order-message { margin-top: 6px; }
.order-message summary {
  cursor: pointer;
  color: var(--link);
  font-size: 0.85rem;
  list-style: none;
}
.order-message summary::-webkit-details-marker { display: none; }
.order-message p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  max-width: 320px;
  white-space: normal;
}

.order-actions { min-width: 200px; }
.order-actions form { display: block; margin-bottom: 6px; }
.order-actions form:last-child { margin-bottom: 0; }
.order-actions .btn { width: 100%; }

/* ---------- Verwaltung: Bestellungen als Karten ---------- */
.stat-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.orders-groups { display: grid; gap: 40px; }
.orders-group-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 18px;
}
.orders-group-head h2 { font-size: 1.15rem; margin: 0; }
.orders-group-head .count {
  color: var(--muted);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 1px 9px;
}

.order-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
}
.order-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
}
.order-card.is-paid-open { border-color: rgba(74, 222, 128, 0.45); }

.order-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 2px;
}
.order-card-id {
  color: var(--muted);
  font-size: 0.8rem;
  margin: 0 0 2px;
  font-variant-numeric: tabular-nums;
}
.order-card-title { font-size: 1.05rem; margin: 0; }
.order-card-badges {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex: none;
}
.order-card-date { color: var(--muted); font-size: 0.85rem; margin: 6px 0 16px; }

.order-card .kv { margin: 0; }
.order-card-extra { margin-top: 14px; display: grid; gap: 6px; }

.order-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.order-card-actions form { margin: 0; }

@media (max-width: 900px) { .stat-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .stat-grid.cols-4 { grid-template-columns: 1fr; } }

/* ---------- Konto: Produkt-Aktionen (Abo verwalten / kündigen) ---------- */
.account-product-actions {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.account-product-actions form { margin: 0; }

/* ---------- Brotkrümel-Navigation (macht Produktansicht eindeutig) ---------- */
.breadcrumb {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}
.breadcrumb-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
  padding-bottom: 12px;
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--text-strong); }
.breadcrumb-sep { color: var(--border-strong); }
.breadcrumb-current { color: var(--text-strong); font-weight: 500; }

/* Produkt-Hero: kompakter, da die Brotkrümel-Leiste darüber sitzt */
.hero-product { padding-top: 56px; }

/* ---------------------------------------------------------------------------
 * Absende-Button mit eingebauter Übermittlungsanzeige
 * ---------------------------------------------------------------------------
 * Der Button bleibt in Größe, Farbe und Radius genau der .btn-primary .btn-lg,
 * der er vorher war — die Anzeige läuft in ihm ab, nicht daneben: eine Füllung
 * hinter der Beschriftung, danach der gezeichnete Haken. Keine neuen Farben,
 * nur --accent und --accent-hover sowie Weiß über Transparenz.
 * Gesteuert von assets/js/order-submit.js.
 * ------------------------------------------------------------------------- */
.btn-pay {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn-pay.is-submitting { pointer-events: none; cursor: default; }

/* Füllung: sitzt hinter Beschriftung und Haken, aber über der Buttonfläche. */
.btn-pay-fill {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--accent-hover);
  transform: translateX(-100%);
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
/* Wanderndes Licht, solange die Übermittlung läuft */
.btn-pay-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
              transparent, rgba(250, 250, 250, 0.28), transparent);
  transform: translateX(-100%);
  animation: pay-sheen 1.4s linear infinite;
}
.btn-pay.is-done .btn-pay-fill::after { animation: none; opacity: 0; }

@keyframes pay-sheen { to { transform: translateX(100%); } }

/* Beschriftung und Bestätigung liegen übereinander — der Button springt beim
   Wechsel deshalb nicht in der Breite. */
.btn-pay-label {
  transition: opacity 0.2s ease,
              transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-pay.is-done .btn-pay-label {
  opacity: 0;
  transform: scale(0.94);
}

.btn-pay-done {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.2s ease,
              transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-pay.is-done .btn-pay-done { opacity: 1; transform: scale(1); }

.btn-pay-icon {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}
/* Der Haken wird gezeichnet, nicht eingeblendet. */
.btn-pay-mark { stroke-dasharray: 26; stroke-dashoffset: 26; }
.btn-pay.is-done .btn-pay-mark {
  animation: pay-draw 0.34s cubic-bezier(0.65, 0, 0.35, 1) 0.1s forwards;
}

@keyframes pay-draw { to { stroke-dashoffset: 0; } }

/* Auslaufender Ring als Bestätigungsmoment */
.btn-pay-icon::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid rgba(250, 250, 250, 0.9);
  opacity: 0;
}
.btn-pay.is-done .btn-pay-icon::after {
  animation: pay-ping 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}

@keyframes pay-ping {
  from { opacity: 0.55; transform: scale(1); }
  to   { opacity: 0;    transform: scale(1.9); }
}

@media (prefers-reduced-motion: reduce) {
  .btn-pay-fill,
  .btn-pay-label,
  .btn-pay-done { transition: none; }
  .btn-pay-fill::after,
  .btn-pay.is-done .btn-pay-icon::after { animation: none; }
  .btn-pay.is-done .btn-pay-mark {
    animation: none;
    stroke-dashoffset: 0;
  }
}

/* ---------- Bestellweg: Fortschrittsleiste ---------- */
/* Fünf Stationen auf drei Seiten. Produkt und Zahlung sind eigene Seiten,
   Plan/Angaben/Prüfen schaltet order-steps.js auf der Bestellseite um. */
.order-steps { padding: 30px 0 0; }
.order-steps + .section { padding-top: 44px; }

.order-steps-list {
  display: flex;
  align-items: flex-start;
  list-style: none;
  margin: 0;
  padding: 0;
}

.order-step {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

/* Verbindungslinie zur vorherigen Station. Sie liegt hinter den Kreisen,
   deshalb bekommt die Ziffer weiter unten einen z-index. */
.order-step + .order-step::before {
  content: "";
  position: absolute;
  top: 15px;
  right: 50%;
  left: -50%;
  height: 2px;
  background: var(--border);
}
.order-step.is-done::before,
.order-step.is-current::before { background: var(--accent); }

.order-step-num {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.order-step.is-done .order-step-num {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.order-step.is-current .order-step-num {
  border-color: var(--accent);
  color: var(--text-strong);
  box-shadow: 0 0 0 4px rgb(62 67 240 / 0.18);
}

.order-step-label { font-size: 0.82rem; color: var(--muted); }
.order-step.is-current .order-step-label {
  color: var(--text-strong);
  font-weight: 500;
}

@media (max-width: 560px) {
  .order-step-num { width: 26px; height: 26px; font-size: 0.78rem; }
  .order-step + .order-step::before { top: 13px; }
  .order-step-label { font-size: 0.7rem; }
}

/* ---------- Bestellweg: Abschnitte des Formulars ---------- */
/* [hidden] muss NACH display:grid stehen — sonst gewinnt das Raster und der
   ausgeblendete Abschnitt bleibt sichtbar. */
.step-panel { display: grid; gap: 22px; }
.step-panel[hidden] { display: none; }

/* tabindex="-1" dient nur dem Fokuswechsel beim Blättern; ein Mausklick soll
   deshalb keinen Rahmen zeichnen, Tastaturbedienung dagegen schon. */
.step-panel:focus { outline: none; }
.step-panel:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 8px; }

.step-head {
  margin: 0;
  font-size: 1.15rem;
  color: var(--text-strong);
}

.step-nav { display: flex; flex-wrap: wrap; gap: 12px; }
.step-nav[hidden] { display: none; }
.step-nav .btn { flex: 1 1 auto; }
.step-nav-top .btn { flex: 0 0 auto; }

@media (prefers-reduced-motion: reduce) {
  .order-step-num { transition: none; }
}

/* ---------- Bestellweg: zweispaltige Feldpaare ---------- */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
/* PLZ braucht wenig, der Ort viel Platz. */
.field-row-zip { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }

@media (max-width: 560px) {
  .field-row,
  .field-row-zip { grid-template-columns: 1fr; }
}

/* ---------- Bestellweg: Rückschau im letzten Abschnitt ---------- */
.review {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
}
.review[hidden] { display: none; }

.review-head {
  margin: 0 0 14px;
  font-size: 0.95rem;
  color: var(--muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.review-list { display: grid; gap: 10px; margin: 0; }
.review-list > div {
  display: grid;
  grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
/* Anschrift und Nachricht bekommen die volle Kartenbreite und die
   Beschriftung darüber statt daneben. Mit 180 px Beschriftung daneben blieb
   für eine mehrzeilige Anschrift so wenig Platz, dass praktisch jede Zeile
   noch einmal umbrach — aus vier Adresszeilen wurden zehn. */
.review-list > .review-wide {
  grid-template-columns: 1fr;
  gap: 3px;
}
.review-list > div[hidden] { display: none; }
.review-list dt { color: var(--muted); font-size: 0.9rem; }
.review-list dd {
  margin: 0;
  color: var(--text-strong);
  /* Die Anschrift kommt als mehrzeiliger Text aus dem Skript. */
  white-space: pre-line;
  overflow-wrap: anywhere;
}

@media (max-width: 560px) {
  .review-list > div { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- Bestellweg, Abschnitt 4: Höhe zusammenziehen ----------
   Der Abschnitt „Prüfen und bestellen" war eine einzige lange Spalte:
   Rückschau, drei einzeln stehende Häkchen, ein freier Hinweis und darunter
   noch eine zweite Liste mit teils denselben Angaben. Auf einem normalen
   Bildschirm passte davon nicht einmal die Hälfte ins Bild — ausgerechnet an
   der Stelle, an der jemand mit dem Finger über dem Kaufknopf steht.

   Nichts davon verschiebt die gesetzlich vorgegebene Reihenfolge: Rückschau,
   Häkchen, Bestellzusammenfassung, Schaltfläche. Zusammengezogen wird nur
   quer, nie längs. */

/* EINE Fluchtlinie für die ganze Bestellseite.
 *
 * Vorher waren es drei: Der Produkt-Kasten und der Aufklapper am Seitenende
 * standen auf 680 px zentriert, die Abschnittsüberschrift begann am linken
 * Rand von 1040 px, und die beiden Spalten liefen über die vollen 1040 px.
 * Kein Element fluchtete mit dem darüber — das ist der Grund, warum die
 * Seite unruhig wirkte, noch bevor man einen einzigen Satz gelesen hatte.
 *
 * Jetzt hat alles dieselben Außenkanten. Damit dabei keine 1040 px breiten
 * Eingabezeilen entstehen — die sind schwer zu treffen und schwer zu lesen —
 * bleiben die Inhalte der Abschnitte 2 und 3 auf Formularbreite, linksbündig
 * an derselben Kante. */
.form-wrap { max-width: 1120px; }

/* ---------- Checkout: Formular links, Bestellübersicht rechts ----------
   Der Aufbau, den man aus jedem größeren Shop kennt. Vorher lief der ganze
   Bestellweg in einer einzigen schmalen Spalte, und die Übersicht tauchte
   erst im letzten Abschnitt auf — wer im Schritt „Angaben" tippte, sah nicht
   mehr, was er eigentlich kauft. */
.checkout-layout { display: grid; gap: 24px; }
.checkout-main { display: grid; gap: 22px; }
.checkout-aside-inner { display: grid; gap: 16px; }

@media (min-width: 900px) {
  .checkout-layout {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
    gap: 32px;
    align-items: start;
  }
  /* Die Übersicht bleibt beim Scrollen stehen. Damit ist der Gesamtpreis
     durchgehend im Bild — und die Pflichtangabe nach § 312j Abs. 2 BGB
     ebenfalls, statt nur einmal ganz unten. */
  .checkout-aside-inner {
    position: sticky;
    top: 24px;
  }
}

/* Rückschau zweispaltig, sobald genug Platz da ist. Anschrift und Nachricht
   behalten die volle Breite, weil beide mehrzeilig sind. */
@media (min-width: 760px) {
  .review-list {
    grid-template-columns: 1fr 1fr;
    gap: 14px 32px;
  }
  .review-list > .review-wide { grid-column: 1 / -1; }
}

/* Die drei Pflichthäkchen als ein Kasten statt als drei lose Zeilen. */
.consent-box {
  display: grid;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
}
/* Reihenfolge zählt: .consent-box und .form-actions sind display:grid, und
   das schlägt das eingebaute [hidden] des Browsers. Ohne diese beiden Zeilen
   blendet order-steps.js sie zwar aus, sichtbar bleiben sie trotzdem —
   derselbe Stolperstein wie bei .step-panel[hidden]. */
.consent-box[hidden],
.form-actions[hidden] { display: none; }

.consent-box .error-text { margin: -6px 0 0; }
.consent-box .consent-note {
  margin: 4px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.875rem;
}

/* Produkt/Plan links, Preis rechts — der Preis muss nach § 312j Abs. 2 BGB
   hervorgehoben sein und war vorher die vierte Zeile einer grauen Liste. */
.order-summary-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 20px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.order-summary-top .order-summary-product { margin: 0 !important; }
.order-summary-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}
.order-summary-price strong {
  font-size: 1.6rem;
  line-height: 1.1;
  color: var(--text-strong);
}
.order-summary-price span { color: var(--muted); font-size: 0.9rem; }

/* Aufklappbare Einzelposten in der Bestellzusammenfassung.
   Die Kurzbeschreibung bleibt immer sichtbar — Begründung steht ausführlich
   an der Fundstelle in bestellen.php. */
.summary-features > summary {
  display: grid;
  gap: 5px;
  cursor: pointer;
  list-style: none;
}
/* Das Standard-Dreieck verschwindet, wir setzen ein eigenes Zeichen. */
.summary-features > summary::-webkit-details-marker { display: none; }
.summary-features > summary::marker { content: ""; }
.summary-features > summary:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 3px;
  border-radius: var(--radius-sm, 6px);
}

.summary-features-text { color: var(--text); }

.summary-features-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--link);
  font-size: 0.85rem;
}
.summary-features-more::before { content: attr(data-closed); }
.summary-features-more::after {
  content: "+";
  font-size: 0.95rem;
  line-height: 1;
}
.summary-features[open] .summary-features-more::before { content: attr(data-open); }
.summary-features[open] .summary-features-more::after { content: "−"; }

.summary-features ul {
  margin: 10px 0 0;
  padding-left: 1.1em;
  color: var(--muted);
  font-size: 0.9rem;
}
.summary-features li { margin-bottom: 4px; }

/* Leistung und Vertragsbedingungen untereinander.
   Sie waren kurzzeitig nebeneinander — das war eine Spaltenteilung zu viel:
   Seit die Zusammenfassung selbst schon die rechte Hälfte des Abschnitts
   belegt, wären daraus zwei Spalten von je gut 200 px geworden. */
.order-summary-cols { display: grid; gap: 4px; }
.order-summary-cols .order-summary-list { margin-bottom: 0; }

/* In der Seitenspalte steht die Beschriftung ÜBER dem Text, nicht daneben.
   Rechnung dahinter: 380 px Spalte minus Rahmen und Innenabstand ergibt
   329 px. Davon gingen 120 px an die Beschriftung — für den Kündigungssatz
   blieben gut 190 px, also rund zehn Zeilen für einen Satz. Untereinander
   nutzt derselbe Satz die volle Breite und braucht die Hälfte. */
.checkout-aside .order-summary-list {
  grid-template-columns: 1fr;
  gap: 2px;
}
.checkout-aside .order-summary-list dt {
  margin-top: 12px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.checkout-aside .order-summary-list dt:first-child { margin-top: 0; }