/* ============================================================
   LOKALE SCHRIFTEN (DSGVO: kein Google-Fonts-CDN mehr)
   Dateien liegen unter /assets/fonts/ — siehe download_fonts.ps1.
   font-display: swap = Text sofort sichtbar, Schrift tauscht nach.
============================================================ */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/fonts/manrope-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/manrope-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/manrope-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/manrope-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/manrope-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/manrope-800.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-500.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-700.woff2') format('woff2');
}

/* ============================================================
   DESIGN TOKENS
   Gemischtes System: portalexporte.de + ean-shopping.de
============================================================ */
:root {
  /* Primary palette */
  --orange:        #e8872a;          /* ean-shopping Leitfarbe */
  --orange-dark:   #c46b15;
  --orange-light:  #fbb775;
  --orange-soft:   #fdf3e7;

  /* Secondary — limegreen aus portalexporte */
  --lime:          #a4c82f;
  --lime-dark:     #87a823;
  --lime-soft:     #f1f7dd;

  /* Tile-Farben aus portalexporte */
  --tile-teal:     #5fa9a6;
  --tile-orange:   #ed9645;
  --tile-green:    #a4c82f;

  /* Neutral */
  --ink:           #1a2332;
  --ink-soft:      #3a4456;
  --ink-mid:       #6b7280;
  --gray-700:      #5a6577;
  --gray-500:      #8590a3;
  --gray-300:      #c8cfdb;
  --gray-200:      #dfe3eb;
  --gray-100:      #eef1f6;
  --bg:            #ffffff;
  --bg-soft:       #fafbfd;
  --bg-warm:       #fdf9f3;

  /* Status */
  --ok:            #2d8f4e;
  --warn:          #c98a1f;
  --bad:           #c83838;

  /* Type
     Emoji-Fallback am Ende des Stacks: lokale Manrope/JetBrains enthalten
     keine Emoji-Glyphen — System-Emoji-Fonts springen automatisch ein. */
  --font-sans:     'Manrope', system-ui, -apple-system, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Twemoji Mozilla', 'EmojiOne Color';
  --font-display:  'Manrope', system-ui, -apple-system, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Twemoji Mozilla', 'EmojiOne Color';
  --font-mono:     'JetBrains Mono', ui-monospace, monospace, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji';

  /* Layout */
  --max-w:         1280px;
  --gut:           clamp(1.25rem, 4vw, 2.5rem);
  --r:             14px;
  --r-lg:          22px;

  /* Shadows */
  --shadow-sm:     0 1px 3px rgba(26, 35, 50, 0.06);
  --shadow-md:     0 8px 24px -8px rgba(26, 35, 50, 0.12);
  --shadow-lg:     0 24px 48px -16px rgba(26, 35, 50, 0.16);
  --shadow-xl:     0 40px 80px -20px rgba(232, 135, 42, 0.18);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

/* ============================================================
   ACCESSIBILITY
============================================================ */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--ink);
  color: var(--orange);
  padding: 0.6rem 1.2rem;
  z-index: 1000;
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  top: 0;
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  overflow-x: hidden;
}

::selection { background: var(--orange); color: #fff; }
a { color: inherit; text-decoration: none; }

/* ============================================================
   AMBIENT CANVAS — slow movement
============================================================ */
.canvas-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ============================================================
   NAV — angelehnt an portalexporte (kompakt, oben)
============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--gray-200);
}
.nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0.85rem var(--gut);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-weight: 800;
  font-size: 1.18rem;
  letter-spacing: -0.04em;
  text-decoration: none;
}
.brand svg.brand-mark {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: block;
}
.brand-text {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-display);
  line-height: 1;
}
.brand-text .ae-audit { color: var(--ink); }
.brand-text .ae-dot {
  color: var(--ink-mid);
  font-weight: 300;
  margin: 0 0.08em;
}
.brand-text .ae-engine { color: var(--orange); }

.nav-links {
  display: flex;
  gap: 2.2rem;
  list-style: none;
  font-size: 0.93rem;
  font-weight: 500;
}
.nav-links a {
  color: var(--ink-soft);
  transition: color 0.2s;
  position: relative;
}
.nav-links a:hover { color: var(--orange); }
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 100%;
  bottom: -6px;
  height: 2px;
  background: var(--orange);
  transition: right 0.3s ease;
}
.nav-links a:hover::after { right: 0; }

.nav-cta {
  background: var(--ink);
  color: #fff;
  padding: 0.65rem 1.3rem 0.65rem 1.1rem;
  font-size: 0.9rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  /* Pfeil-Form aus portalexporte */
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
  padding-right: 1.8rem;
  transition: background 0.25s;
}
.nav-cta:hover { background: var(--orange); }

@media (max-width: 860px) {
  .nav-links { display: none; }
}

/* ============================================================
   HERO
============================================================ */
.hero {
  position: relative;
  padding: 9rem var(--gut) 5rem;
  overflow: hidden;
  background:
    radial-gradient(ellipse at top right, var(--orange-soft) 0%, transparent 60%),
    radial-gradient(ellipse at bottom left, var(--lime-soft) 0%, transparent 50%),
    var(--bg);
}
.hero-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 4rem;
  align-items: center;
}
@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; gap: 3rem; }
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: #fff;
  border: 1px solid var(--gray-200);
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink-soft);
  margin-bottom: 1.8rem;
  box-shadow: var(--shadow-sm);
}
.hero-tag .dot {
  width: 8px; height: 8px;
  background: var(--lime);
  border-radius: 50%;
  animation: pulse 2.5s ease-in-out infinite;
  box-shadow: 0 0 0 0 var(--lime);
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(164, 200, 47, 0.5); }
  50%      { box-shadow: 0 0 0 8px rgba(164, 200, 47, 0); }
}

.hero h1 {
  font-size: clamp(2.4rem, 5.5vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin-bottom: 1.5rem;
}
.hero h1 .ink-orange { color: var(--orange); }
.hero h1 .ink-lime  { color: var(--lime-dark); }
.hero h1 .underline {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.hero h1 .underline::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: 0.05em;
  height: 0.3em;
  background: var(--orange-light);
  z-index: -1;
  opacity: 0.55;
}

.hero p.lede {
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 56ch;
  margin-bottom: 2.2rem;
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: center;
  margin-bottom: 3rem;
}

/* Pfeil-Buttons im portalexporte-Stil */
.btn-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  padding: 1rem 2rem 1rem 1.4rem;
  font-size: 0.97rem;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%);
  transition: all 0.25s;
  cursor: pointer;
  border: none;
  font-family: inherit;
}
.btn-arrow:hover {
  background: var(--orange);
  transform: translateX(2px);
}
.btn-arrow .small {
  font-style: italic;
  font-weight: 400;
  opacity: 0.85;
  font-size: 0.78rem;
  margin-right: 0.3rem;
}
.btn-arrow.orange { background: var(--orange); }
.btn-arrow.orange:hover { background: var(--orange-dark); }
.btn-arrow.lime { background: var(--lime); color: #fff; }
.btn-arrow.lime:hover { background: var(--lime-dark); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink);
  font-weight: 600;
  padding: 1rem 1.4rem;
  font-size: 0.97rem;
  background: transparent;
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  transition: all 0.2s;
}
.btn-secondary:hover {
  border-color: var(--ink);
  background: var(--bg-soft);
}

/* Trust-Bar */
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  font-size: 0.85rem;
  color: var(--gray-700);
  align-items: center;
}
.hero-trust strong { color: var(--ink); font-weight: 700; }
.hero-trust .check {
  color: var(--lime-dark);
  font-weight: 700;
  margin-right: 0.3rem;
}

/* Hero-Visual rechts */
.hero-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  max-width: 440px;
  margin-left: auto;
  width: 100%;
}
.hv-card {
  position: relative;
  background: #fff;
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  padding: 1.2rem 1.4rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  border: 1px solid var(--gray-200);
  width: 100%;
  /* Subtle sanfte Float-Animation, jede Karte mit anderem Delay */
  animation: floatGentle 6s ease-in-out infinite;
}
.hv-card-1 {
  align-self: flex-start;
  width: 90%;
  animation-delay: 0s;
  transform-origin: center;
}
.hv-card-2 {
  align-self: flex-end;
  width: 95%;
  animation-delay: 1.5s;
}
.hv-card-3 {
  align-self: flex-start;
  width: 92%;
  margin-left: 5%;
  animation-delay: 3s;
}

/* Sanfte Float-Animation - keine Überlappung mehr durch Translate */
@keyframes floatGentle {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* User reduziert Motion → Animation aus */
@media (prefers-reduced-motion: reduce) {
  .hv-card { animation: none; }
}

.hv-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.7rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed var(--gray-200);
}
.hv-card-title {
  font-weight: 700;
  color: var(--ink);
  font-size: 0.78rem;
}
.hv-pill {
  background: var(--orange-soft);
  color: var(--orange-dark);
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.hv-pill.lime { background: var(--lime-soft); color: var(--lime-dark); }
.hv-pill.bad { background: #fde7e7; color: var(--bad); }
.hv-row {
  display: flex;
  justify-content: space-between;
  padding: 0.25rem 0;
  color: var(--gray-700);
}
.hv-row strong { color: var(--ink); }
.hv-bar {
  height: 6px;
  background: var(--gray-100);
  border-radius: 3px;
  margin: 0.4rem 0;
  overflow: hidden;
}
.hv-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--orange), var(--orange-light));
  border-radius: 3px;
  width: 0;
  animation: fillBar 4s ease-out forwards;
}
.hv-bar-fill.lime { background: linear-gradient(90deg, var(--lime), var(--lime-dark)); }
@keyframes fillBar {
  to { width: var(--w, 70%); }
}
.hv-score {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  margin: 0.3rem 0 0.5rem;
}
.hv-score .max {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--gray-500);
}
.hv-score .badge {
  margin-left: auto;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
}
.hv-score .badge.warn { background: #fff5e0; color: var(--warn); }

@media (max-width: 960px) {
  .hero-visual { max-width: 100%; margin: 0 auto; }
  .hv-card-1, .hv-card-2, .hv-card-3 {
    align-self: stretch;
    width: 100%;
    margin-left: 0;
  }
}

/* ============================================================
   STATS BAR — angelehnt an ean-shopping
============================================================ */
.stats {
  position: relative;
  padding: 4rem var(--gut);
  background: var(--ink);
  color: #fff;
  overflow: hidden;
}
.stats::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 50%, rgba(232, 135, 42, 0.18), transparent 40%),
    radial-gradient(circle at 80% 50%, rgba(164, 200, 47, 0.12), transparent 40%);
}
.stats-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
@media (max-width: 760px) {
  .stats-inner { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; }
}
.stat {
  text-align: left;
}
.stat-num {
  font-size: clamp(2.5rem, 5vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 0.4rem;
  background: linear-gradient(135deg, var(--orange-light), var(--orange));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat:nth-child(2) .stat-num {
  background: linear-gradient(135deg, #c8e455, var(--lime));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat:nth-child(3) .stat-num {
  background: linear-gradient(135deg, var(--orange-light), var(--orange));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat:nth-child(4) .stat-num {
  background: linear-gradient(135deg, #c8e455, var(--lime));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat-label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.65);
}

/* ============================================================
   AUDITS — zwei Hauptprodukte
============================================================ */
.audits {
  padding: 6rem var(--gut);
  position: relative;
  overflow: hidden;
}
.audits-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.section-head {
  text-align: center;
  margin-bottom: 4rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.section-eyebrow {
  display: inline-block;
  background: var(--orange-soft);
  color: var(--orange-dark);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  margin-bottom: 1.2rem;
}
.section-eyebrow.lime { background: var(--lime-soft); color: var(--lime-dark); }
.section-title {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: 1rem;
}
.section-title .orange { color: var(--orange); }
.section-title .lime  { color: var(--lime-dark); }
.section-lede {
  font-size: 1.1rem;
  color: var(--ink-soft);
  max-width: 60ch;
  margin: 0 auto;
}

.audit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
@media (max-width: 900px) {
  .audit-grid { grid-template-columns: 1fr; }
}

.audit-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--r-lg);
  padding: 2.5rem;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.2, 0, 0, 1);
  box-shadow: var(--shadow-sm);
  /* Flex-Spalte: alle Cards füllen die Grid-Höhe komplett, Footer wird unten gepint */
  display: flex;
  flex-direction: column;
  height: 100%;
}
.audit-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
  border-color: transparent;
}
.audit-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: var(--orange);
}
.audit-card.lime::before { background: var(--lime); }

.audit-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.audit-icon {
  width: 56px;
  height: 56px;
  background: var(--orange-soft);
  color: var(--orange);
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}
.audit-card.lime .audit-icon {
  background: var(--lime-soft);
  color: var(--lime-dark);
}
.audit-tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background: var(--ink);
  color: #fff;
  padding: 0.35rem 0.7rem;
  border-radius: 4px;
  font-weight: 600;
}

.audit-card h3 {
  font-size: clamp(1.5rem, 2.5vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: 0.7rem;
}
.audit-card .desc {
  font-size: 1rem;
  color: var(--ink-soft);
  margin-bottom: 1.8rem;
  line-height: 1.55;
}

.audit-features {
  list-style: none;
  margin-bottom: 1.8rem;
  border-top: 1px solid var(--gray-200);
  /* Wichtig: füllt verbleibenden Raum, drückt Footer ans Ende */
  flex: 1 1 auto;
}
.audit-features li {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--gray-200);
  font-size: 0.93rem;
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 0.8rem;
  align-items: start;
}
.audit-features li::before {
  content: '✓';
  color: var(--orange);
  font-weight: 700;
  font-family: var(--font-mono);
  font-size: 1rem;
}
.audit-card.lime .audit-features li::before { color: var(--lime-dark); }
.audit-features li strong { font-weight: 700; color: var(--ink); }
.audit-features li span { color: var(--gray-700); display: block; font-size: 0.85rem; margin-top: 0.15rem; }

.audit-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--gray-200);
  flex-wrap: wrap;
  /* Footer wird durch flex:1 in audit-features ans untere Ende gedrückt
     → Preise stehen dadurch in beiden Cards auf exakt gleicher Höhe */
  margin-top: auto;
  /* Fixe Höhe, damit Preisrow IMMER gleich hoch ist, egal wie lang der Button-Text */
  min-height: 4.5rem;
}
.audit-price {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  font-family: var(--font-sans);
  line-height: 1;
  /* Der Preis-Container selbst hat eine fixe Höhe für identische Baseline */
  height: 2.4rem;
}
.audit-price .from {
  font-size: 0.78rem;
  color: var(--gray-500);
  font-weight: 500;
  text-transform: lowercase;
  letter-spacing: 0.02em;
  align-self: flex-end;
  padding-bottom: 0.3rem;
}
.audit-price .audit-price-num {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1;
}
.audit-price .audit-price-currency {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--orange);
  letter-spacing: -0.02em;
  margin-left: 0.2rem;
  line-height: 1;
}
.audit-card.lime .audit-price .audit-price-currency { color: var(--lime-dark); }

/* ============================================================
   PROCESS — angelehnt an ean-shopping "So funktioniert"
============================================================ */
.process {
  background: var(--bg-warm);
  padding: 6rem var(--gut);
  position: relative;
  overflow: hidden;
}
.process-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}
@media (max-width: 900px) {
  .process-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px) {
  .process-grid { grid-template-columns: 1fr; }
}
.process-step {
  background: #fff;
  border-radius: var(--r-lg);
  padding: 2rem 1.7rem;
  position: relative;
  border: 1px solid var(--gray-200);
  transition: all 0.3s;
}
.process-step:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.process-step .step-num {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--orange);
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}
.process-step:nth-child(2) .step-num { color: var(--tile-teal); }
.process-step:nth-child(3) .step-num { color: var(--lime-dark); }
.process-step:nth-child(4) .step-num { color: var(--ink); }

.process-step .step-emoji {
  font-size: 2.3rem;
  margin-bottom: 1rem;
  display: block;
  line-height: 1;
}
.process-step h4 {
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 0.6rem;
  letter-spacing: -0.015em;
}
.process-step p {
  font-size: 0.92rem;
  color: var(--gray-700);
  line-height: 1.55;
}

/* Verbindungs-Linien zwischen Schritten (nur Desktop) */
@media (min-width: 901px) {
  .process-step:not(:last-child)::after {
    content: '→';
    position: absolute;
    top: 50%;
    right: -1.2rem;
    transform: translateY(-50%);
    font-size: 1.5rem;
    color: var(--orange);
    z-index: 3;
    background: var(--bg-warm);
    width: 2.4rem;
    text-align: center;
    font-weight: 700;
  }
}

/* ============================================================
   COLOR-TILES — wie portalexporte (Mit nur EINEM FEED ...)
============================================================ */
.tiles {
  padding: 0;
  background: var(--bg);
}
.tiles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  max-width: var(--max-w);
  margin: 0 auto;
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 6rem;
  margin-left: auto;
  margin-right: auto;
  margin-top: -2rem;
  position: relative;
  z-index: 4;
  box-shadow: var(--shadow-xl);
}
@media (max-width: 760px) {
  .tiles-grid { grid-template-columns: 1fr; margin: -2rem 1.25rem 4rem; }
}
.tile {
  padding: 2.5rem 2rem;
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.tile-1 { background: var(--tile-teal); }
.tile-2 { background: var(--tile-orange); }
.tile-3 { background: var(--lime); }
.tile-pre {
  font-size: 0.85rem;
  opacity: 0.85;
  margin-bottom: 0.5rem;
  font-weight: 500;
}
.tile-big {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 0.6rem;
}
.tile-post {
  font-size: 0.92rem;
  opacity: 0.92;
  font-weight: 500;
  line-height: 1.4;
}
.tile-icon {
  position: absolute;
  top: 1.25rem; right: 1.25rem;
  font-size: 1.4rem;
  opacity: 0.55;
  line-height: 1;
  z-index: 2;
  pointer-events: none;
}

/* ============================================================
   COVERAGE — was wird geprüft? Detailliert
============================================================ */
.coverage {
  padding: 6rem var(--gut);
  background: var(--bg-soft);
  position: relative;
  overflow: hidden;
}
.coverage-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.coverage-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
  justify-content: center;
  flex-wrap: wrap;
}
.tab-btn {
  background: #fff;
  border: 1px solid var(--gray-200);
  padding: 0.7rem 1.4rem;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 999px;
  color: var(--ink-soft);
  transition: all 0.2s;
}
.tab-btn:hover { border-color: var(--orange); color: var(--orange); }
.tab-btn.active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

.tab-pane { display: none; }
.tab-pane.active { display: block; animation: fadeIn 0.4s ease; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.checks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}
@media (max-width: 900px) {
  .checks-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px) {
  .checks-grid { grid-template-columns: 1fr; }
}

.check-card {
  background: #fff;
  border-radius: var(--r);
  padding: 1.5rem 1.4rem;
  border: 1px solid var(--gray-200);
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}
.check-card:hover {
  transform: translateY(-3px);
  border-color: var(--orange);
  box-shadow: var(--shadow-md);
}
.check-card .ch-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--orange);
  letter-spacing: 0.1em;
  font-weight: 700;
  margin-bottom: 0.7rem;
}
.check-card.lime .ch-num { color: var(--lime-dark); }
.check-card h4 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.check-card p {
  font-size: 0.88rem;
  color: var(--gray-700);
  line-height: 1.5;
}
.check-card .pts {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  background: var(--orange-soft);
  color: var(--orange-dark);
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
}
.check-card.lime .pts { background: var(--lime-soft); color: var(--lime-dark); }

/* ============================================================
   PRICING
============================================================ */
.pricing {
  padding: 6rem var(--gut);
  background: var(--bg);
  position: relative;
  overflow: hidden;
}
.pricing-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.tiers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-top: 3rem;
}
@media (max-width: 1100px) {
  .tiers { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}
@media (max-width: 600px) {
  .tiers { grid-template-columns: 1fr; }
}

.tier {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--r-lg);
  padding: 2.2rem 1.8rem;
  position: relative;
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
}
.tier:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.tier.featured {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  transform: scale(1.03);
  box-shadow: var(--shadow-xl);
}
.tier.tier-lime {
  border-color: var(--lime);
  border-width: 2px;
}
.tier.tier-lime:hover {
  border-color: var(--lime-dark);
}
@media (max-width: 1100px) {
  .tier.featured { transform: scale(1); }
}
@media (max-width: 900px) {
  .tier.featured { transform: scale(1); }
}
.tier-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--orange);
  color: #fff;
  padding: 0.4rem 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
  white-space: nowrap;
}
.tier-name {
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: 0.4rem;
  letter-spacing: -0.02em;
}
.tier-tagline {
  font-size: 0.88rem;
  color: var(--gray-500);
  /* Fixe Höhe für Konsistenz: alle Taglines belegen 2 Zeilen */
  height: 2.6rem;
  line-height: 1.3;
  margin-bottom: 1.2rem;
  display: flex;
  align-items: flex-start;
}
.tier.featured .tier-tagline { color: rgba(255, 255, 255, 0.65); }

/* === Preisblock — fixe Höhe für vertikale Ausrichtung === */
.tier-price-block {
  /* Zwingt alle Preisblöcke auf identische Höhe */
  min-height: 5.2rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--gray-200);
}
.tier.featured .tier-price-block { border-color: rgba(255, 255, 255, 0.15); }

.tier-price {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  margin-bottom: 0.4rem;
  /* Eindeutige Baseline für Preise: alle Karten haben Preise auf gleicher Höhe */
}
.tier-price-num {
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}
.tier-price-currency {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--orange);
  letter-spacing: -0.02em;
  margin-left: 0.2rem;
}
.tier.featured .tier-price-currency { color: var(--orange-light); }
.tier-price-unit {
  font-size: 0.85rem;
  color: var(--gray-500);
}
.tier.featured .tier-price-unit { color: rgba(255, 255, 255, 0.65); }
.tier-mwst {
  font-size: 0.78rem;
  color: var(--gray-500);
  margin: 0;
}
.tier.featured .tier-mwst { color: rgba(255, 255, 255, 0.55); }

.tier-features {
  list-style: none;
  margin-bottom: 1.8rem;
  flex: 1;
}
.tier-features li {
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--gray-200);
  font-size: 0.9rem;
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  line-height: 1.4;
}
.tier.featured .tier-features li { border-color: rgba(255, 255, 255, 0.15); }
.tier-features li::before {
  content: '+';
  color: var(--orange);
  font-weight: 800;
  font-family: var(--font-mono);
  flex-shrink: 0;
}
.tier.featured .tier-features li::before { color: var(--orange-light); }

.tier-cta {
  width: 100%;
  text-align: center;
  justify-content: center;
}
.tier-cta.disabled {
  background: var(--gray-300);
  color: var(--gray-700);
  cursor: not-allowed;
}

/* ============================================================
   FAQ
============================================================ */
.faq {
  background: var(--bg-soft);
  padding: 6rem var(--gut);
}
.faq-inner {
  max-width: 880px;
  margin: 0 auto;
}
.faq-list {
  margin-top: 3rem;
}
.faq-item {
  background: #fff;
  border-radius: var(--r);
  margin-bottom: 0.8rem;
  border: 1px solid var(--gray-200);
  overflow: hidden;
  transition: border-color 0.2s;
}
.faq-item:hover { border-color: var(--orange); }

.faq-q {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  padding: 1.4rem 1.6rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  color: var(--ink);
}
.faq-q:hover { color: var(--orange); }
.faq-q .plus {
  width: 28px;
  height: 28px;
  background: var(--gray-100);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  font-weight: 300;
  flex-shrink: 0;
  transition: all 0.3s;
}
.faq-item.open .faq-q .plus {
  background: var(--orange);
  color: #fff;
  transform: rotate(45deg);
}
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
  padding: 0 1.6rem;
  font-size: 0.95rem;
  color: var(--gray-700);
  line-height: 1.65;
}
.faq-item.open .faq-a {
  max-height: 500px;
  padding: 0 1.6rem 1.5rem;
}

/* ============================================================
   CTA-Final
============================================================ */
.cta-final {
  background: linear-gradient(135deg, var(--ink) 0%, #2a3550 100%);
  color: #fff;
  padding: 6rem var(--gut);
  position: relative;
  overflow: hidden;
}
.cta-final-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  position: relative;
  z-index: 2;
  text-align: center;
}
.cta-final h2 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: 1.2rem;
  max-width: 18ch;
  margin-left: auto;
  margin-right: auto;
}
.cta-final h2 .orange { color: var(--orange); }
.cta-final h2 .lime  { color: var(--lime); }
.cta-final p {
  font-size: 1.1rem;
  max-width: 50ch;
  margin: 0 auto 2.5rem;
  color: rgba(255, 255, 255, 0.78);
}
.cta-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.cta-final .btn-arrow {
  font-size: 1.05rem;
  padding: 1.15rem 2.4rem 1.15rem 1.6rem;
}

/* ============================================================
   FOOTER
============================================================ */
.site-footer {
  background: var(--ink);
  color: #fff;
  padding: 4rem var(--gut) 2rem;
  border-top: 1px solid #2a3550;
}

/* Oben: 4 gleichbreite Spalten mit Links */
.footer-cols {
  max-width: var(--max-w);
  margin: 0 auto 3rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem;
}
@media (max-width: 760px) {
  .footer-cols { grid-template-columns: repeat(2, 1fr); gap: 1.8rem; }
}
@media (max-width: 480px) {
  .footer-cols { grid-template-columns: 1fr; }
}
.footer-col h5 {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--orange);
  margin-bottom: 1rem;
  font-weight: 700;
}
.footer-col a {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.93rem;
  display: block;
  padding: 0.3rem 0;
  transition: color 0.2s;
  text-decoration: none;
}
.footer-col a:hover { color: var(--orange); }

/* Mitte: Brand-Block mittig zentriert */
.footer-brand-center {
  max-width: 720px;
  margin: 0 auto 2.5rem;
  text-align: center;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1rem;
}
.footer-brand .brand-mark { width: 38px; height: 38px; }
.footer-brand .brand-text {
  font-size: 1.2rem;
  letter-spacing: -0.5px;
  font-weight: 900;
}
.footer-brand-text {
  font-size: 0.92rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

/* Unten: Copyright-Zeile */
.footer-bottom {
  max-width: var(--max-w);
  margin: 0 auto;
  padding-top: 2rem;
  border-top: 1px solid #2a3550;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
}
.footer-bottom a { color: rgba(255, 255, 255, 0.7); text-decoration: none; }
.footer-bottom a:hover { color: var(--orange); }
@media (max-width: 600px) {
  .footer-bottom { flex-direction: column; align-items: center; text-align: center; }
}

/* Alte selektoren kompatibel halten */
footer { /* nur für absolute Notfälle */ }
.footer-inner { /* leer, alte Klasse */ }

/* ============================================================
   REVEAL
============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   AUTH & SHOPANMELDUNG — kompakte zentrierte Karten
   helles Theme, gleich für Login + Bestellseite + Success
============================================================ */

/* Schlanker Page-Wrapper für Auth/Anmeldung */
/* Sub-Page Container — kompensieren den fixed `.nav` (~62 px) */
.page-wrap {
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rem 1.25rem 2.5rem;
  background: var(--bg-soft);
}

.page-wrap--top {
  align-items: flex-start;
  padding-top: 6.5rem;
}

/* Kompakte zentrierte Auth-Karte (Login, Success, Status) */
.auth-wrap {
  max-width: 460px;
  width: 100%;
  margin: 0 auto;
}

.auth-card {
  background: #ffffff;
  border: 1px solid var(--gray-200);
  border-radius: var(--r-lg);
  padding: 2.4rem 2rem;
  box-shadow: var(--shadow-md);
}

.auth-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(232, 135, 42, 0.12);
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.2rem;
}
.auth-icon svg { width: 28px; height: 28px; }
.auth-icon--lime { background: rgba(164, 200, 47, 0.15); color: var(--lime-dark); }

.auth-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 0.4rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.auth-sub {
  font-size: 0.92rem;
  color: var(--gray-700);
  text-align: center;
  margin-bottom: 1.6rem;
  line-height: 1.5;
}

/* ── Bestellformular auf Anmeldeseite: 2-Spalten-Layout ─── */
.reg-wrap {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 1.5rem;
  align-items: start;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}
.reg-left {
  background: #ffffff;
  border: 1px solid var(--gray-200);
  border-radius: var(--r-lg);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
}
.reg-right {
  position: sticky;
  top: 100px;
}
.reg-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 0.3rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.reg-sub {
  font-size: 0.92rem;
  color: var(--gray-700);
  margin-bottom: 1.4rem;
}
@media (max-width: 880px) {
  .reg-wrap { grid-template-columns: 1fr; }
  .reg-right { position: static; }
}

/* Bestellzusammenfassung in rechter Spalte */
.order-summary {
  background: var(--bg-warm);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-lg);
  padding: 1.4rem 1.5rem;
  box-shadow: var(--shadow-sm);
}
.order-summary-head { margin-bottom: 1rem; }
.order-summary-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gray-700);
  margin-bottom: 0.35rem;
}
.order-summary-name {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.order-summary-tagline {
  color: var(--gray-700);
  font-size: 0.85rem;
  margin-top: 0.2rem;
}
.order-summary-price-block {
  margin-top: 1rem;
}
.order-summary-netto {
  font-size: 2rem;
  font-weight: 900;
  color: var(--orange);
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.order-summary-netto-label {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--gray-700);
  letter-spacing: 0;
  margin-left: 0.4rem;
  text-transform: lowercase;
}
.order-summary-mwst {
  margin-top: 0.45rem;
  font-size: 0.85rem;
  color: var(--gray-700);
  line-height: 1.4;
}
.order-summary-total-divider {
  height: 1px;
  background: var(--gray-200);
  margin: 0.85rem 0;
}
.order-summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.85rem;
  color: var(--gray-700);
  line-height: 1.4;
}
.order-summary-total-label { font-weight: 500; }
.order-summary-total-value { font-weight: 700; color: var(--ink); }
.order-summary-meta {
  color: var(--gray-700);
  font-size: 0.82rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--gray-200);
  line-height: 1.5;
}
.order-summary-meta strong { color: var(--ink); }

/* ── Form-Elemente ──────────────────────────────────────── */
.auth-form,
.reg-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.form-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.form-req { color: var(--orange); margin-left: 2px; }
.form-opt {
  color: var(--gray-700);
  font-weight: 400;
  font-size: 0.78rem;
}
.form-input {
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: #ffffff;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--r);
  padding: 0.68rem 0.9rem;
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: 0;
  width: 100%;
}
.form-input:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(232, 135, 42, 0.15);
}
.form-input::placeholder { color: var(--gray-500); }
.form-input[readonly] {
  background: var(--gray-100);
  color: var(--gray-700);
  cursor: not-allowed;
}
.form-input[readonly]:focus {
  border-color: var(--gray-200);
  box-shadow: none;
}
.form-hint {
  font-size: 0.78rem;
  color: var(--gray-700);
  line-height: 1.45;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
}
@media (max-width: 540px) {
  .form-row { grid-template-columns: 1fr; }
}

/* Section-Trenner im Formular */
.form-section-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gray-700);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 0.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--gray-200);
}
.form-section-title:first-child { border-top: 0; padding-top: 0; margin-top: 0; }

/* Passwort-Toggle */
.input-pw-wrap { position: relative; }
.input-pw-wrap .form-input { padding-right: 2.4rem; }
.pw-toggle {
  position: absolute;
  right: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gray-500);
  padding: 0.3rem;
  transition: color 0.15s;
  display: flex;
  align-items: center;
}
.pw-toggle:hover { color: var(--orange); }

/* Hauptbutton */
.btn-auth-submit {
  background: var(--orange);
  color: #ffffff;
  padding: 0.85rem 1.2rem;
  border: 0;
  border-radius: var(--r);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  width: 100%;
  font-family: inherit;
}
.btn-auth-submit:hover { background: var(--orange-dark); }
.btn-auth-submit:active { transform: translateY(1px); }
.btn-auth-submit:disabled {
  background: var(--gray-500);
  cursor: not-allowed;
}

/* Sekundärer Button / Alt-Link */
.btn-auth-alt {
  display: block;
  text-align: center;
  background: var(--bg-soft);
  border: 1.5px solid var(--gray-200);
  color: var(--ink-soft);
  padding: 0.72rem 1.1rem;
  border-radius: var(--r);
  font-size: 0.88rem;
  font-weight: 600;
  transition: all 0.15s;
  text-decoration: none;
}
.btn-auth-alt:hover {
  border-color: var(--orange);
  color: var(--orange);
}

/* Trenner "oder" */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 1.2rem 0;
  font-size: 0.78rem;
  color: var(--gray-500);
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gray-200);
}

.auth-back {
  display: block;
  text-align: center;
  margin-top: 1.2rem;
  font-size: 0.82rem;
  color: var(--gray-700);
  transition: color 0.15s;
  text-decoration: none;
}
.auth-back:hover { color: var(--orange); }

/* Error-Box */
.form-error-box {
  background: rgba(200, 56, 56, 0.06);
  border: 1px solid rgba(200, 56, 56, 0.25);
  color: var(--bad);
  border-radius: var(--r);
  padding: 0.7rem 0.95rem;
  font-size: 0.85rem;
  line-height: 1.45;
  margin-bottom: 0.3rem;
}
.form-info-box {
  background: rgba(232, 135, 42, 0.06);
  border: 1px solid rgba(232, 135, 42, 0.25);
  color: var(--orange-dark);
  border-radius: var(--r);
  padding: 0.7rem 0.95rem;
  font-size: 0.85rem;
  line-height: 1.45;
}

/* Stripe-Element-Container (Payment Element) */
.stripe-element-wrap {
  margin-top: 0.4rem;
  padding: 0.4rem 0;
}

/* Success-Check */
.success-check {
  width: 72px;
  height: 72px;
  background: var(--lime);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.4rem;
  box-shadow: 0 0 0 6px rgba(164, 200, 47, 0.15);
}
.success-check svg {
  width: 36px;
  height: 36px;
  stroke: #fff;
  stroke-width: 4;
}

/* AGB / Datenschutz-Hinweis */
.legal-note {
  font-size: 0.78rem;
  color: var(--gray-700);
  text-align: center;
  margin-top: 0.6rem;
  line-height: 1.5;
}
.legal-note a { color: var(--orange); text-decoration: underline; }
.legal-note a:hover { color: var(--orange-dark); }

/* ============================================================
   DASHBOARD — Kundenbereich
============================================================ */
.dash-container {
  max-width: 1200px;
  margin: 0 auto;
  /* Fixed .nav ist ~62px hoch — wir lassen 5rem oben damit "Dashboard"-Heading nicht abgeschnitten wird */
  padding: 5.5rem 1.5rem 4rem;
}
.dash-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.dash-title {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 0.3rem;
  color: var(--ink);
}
.dash-sub {
  color: var(--gray-700);
  font-size: 0.98rem;
}
.dash-user-info {
  color: var(--gray-700);
  font-size: 0.88rem;
  text-align: right;
}
.dash-user-info strong { color: var(--ink); }
.dash-logout {
  display: inline-block;
  margin-top: 0.4rem;
  background: transparent;
  border: 1.5px solid var(--gray-200);
  color: var(--gray-700);
  padding: 0.4rem 0.9rem;
  border-radius: var(--r);
  font-size: 0.85rem;
  text-decoration: none;
  transition: all 0.15s;
}
.dash-logout:hover {
  border-color: var(--orange);
  color: var(--orange);
}

.dash-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 1.5rem;
}
@media (max-width: 600px) {
  .dash-cards { grid-template-columns: 1fr; }
}
.dash-card {
  background: #ffffff;
  border: 1px solid var(--gray-200);
  border-radius: var(--r-lg);
  padding: 1.6rem;
  box-shadow: var(--shadow-sm);
}
.dash-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 1.2rem;
  gap: 1rem;
}
.dash-card-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.dash-card-action {
  font-size: 0.85rem;
  color: var(--orange);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}
.dash-card-action:hover { color: var(--orange-dark); }

.dash-empty {
  text-align: center;
  padding: 1.5rem 1rem;
  color: var(--gray-700);
}
.dash-empty-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  opacity: 0.5;
}
.dash-empty p {
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.dash-item {
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--gray-100);
  display: flex;
  align-items: center;
  gap: 1rem;
}
.dash-item:first-child { padding-top: 0; }
.dash-item:last-child  { border-bottom: 0; padding-bottom: 0; }
.dash-item-info { flex: 1; min-width: 0; }
.dash-item-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.1rem;
}
.dash-item-sub {
  font-size: 0.8rem;
  color: var(--gray-700);
  margin-bottom: 0.3rem;
}
.dash-item-meta {
  font-size: 0.75rem;
  color: var(--gray-500);
}
.dash-item-amount {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--ink);
}
.dash-item-id {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--gray-700);
}
.dash-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.22rem 0.6rem;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.dash-badge--warn  { color: #7c4a0a; background: #fef0d4; }
.dash-badge--ok    { color: #155724; background: #d4edda; }
.dash-badge--info  { color: #0c5460; background: #d1ecf1; }
.dash-badge--bad   { color: #721c24; background: #f8d7da; }
.dash-badge--neutral { color: var(--gray-700); background: var(--gray-100); }

.btn-mini-secondary {
  background: transparent;
  border: 1.5px solid var(--gray-200);
  color: var(--ink-soft);
  padding: 0.45rem 0.9rem;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  transition: all 0.15s;
  white-space: nowrap;
}
.btn-mini-secondary:hover {
  border-color: var(--orange);
  color: var(--orange);
}

.dash-abo-headline {
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: 0.3rem;
  color: var(--ink);
}
.dash-abo-meta {
  color: var(--gray-700);
  font-size: 0.88rem;
  margin-bottom: 0.6rem;
}
.dash-abo-none {
  padding: 1.2rem;
  background: var(--gray-100);
  border-radius: var(--r);
}
.dash-abo-none p {
  color: var(--gray-700);
  margin-bottom: 0.6rem;
  font-size: 0.88rem;
}
.dash-abo-none p:last-child { margin-bottom: 0; }

.dash-cta-banner {
  background: linear-gradient(135deg, var(--bg-warm) 0%, #ffffff 100%);
  border: 1.5px solid var(--orange);
  border-radius: var(--r-lg);
  padding: 1.6rem 1.8rem;
  margin-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.dash-cta-text h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 0.3rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.dash-cta-text p {
  color: var(--gray-700);
  font-size: 0.92rem;
  max-width: 560px;
  margin: 0;
}
.btn-primary-pill {
  background: var(--orange);
  color: #ffffff;
  text-decoration: none;
  padding: 0.7rem 1.2rem;
  border-radius: var(--r);
  font-weight: 700;
  font-size: 0.92rem;
  display: inline-block;
  transition: background 0.15s;
  white-space: nowrap;
}
.btn-primary-pill:hover { background: var(--orange-dark); }

/* ============================================================
   STRIPE-ELEMENT — Platzhalter solange Pflichtfelder leer sind
============================================================ */
.stripe-placeholder {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 1rem 1.1rem;
  margin-bottom: 0.5rem;
  background: var(--bg-soft);
  border: 1.5px dashed var(--gray-200);
  border-radius: var(--r);
  color: var(--gray-700);
  font-size: 0.88rem;
  line-height: 1.5;
}
.stripe-placeholder svg {
  flex-shrink: 0;
  color: var(--orange);
  margin-top: 1px;
}

/* Modul-Liste in der Order-Summary */
.order-summary-modules {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--gray-200);
}
.order-summary-modules-title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gray-700);
  margin-bottom: 0.6rem;
}
.order-summary-modules-list {
  list-style: none;
  margin: 0; padding: 0;
}
.order-summary-modules-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--ink);
  padding: 0.28rem 0;
  line-height: 1.4;
}
.order-summary-modules-list li svg {
  color: var(--lime-dark);
  flex-shrink: 0;
  margin-top: 2px;
}

/* ============================================================
   IMPERSONATION-BANNER im Kunden-Dashboard
============================================================ */
.impersonation-banner {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 1.5px solid #f59e0b;
  border-radius: var(--r);
  padding: 0.9rem 1.2rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: #7c2d12;
  font-size: 0.92rem;
  line-height: 1.4;
}
.impersonation-banner svg { color: #d97706; flex-shrink: 0; }
.impersonation-banner span { flex: 1; }
.impersonation-banner strong { font-weight: 700; }
.impersonation-end {
  background: #fff;
  border: 1.5px solid #d97706;
  color: #b45309;
  padding: 0.45rem 0.9rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.15s;
}
.impersonation-end:hover { background: #d97706; color: #fff; }

/* ============================================================
   ADMIN-LAYOUT — eigene Sub-Nav + Tabellen
   (orientiert sich an admin.css, aber als CSS-Var-Layer)
============================================================ */
body.is-admin { background: #f8f9fb; }
.admin-header { background: var(--ink); color: #fff; padding: 0; }
.admin-nav-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0.85rem var(--gut);
  display: flex;
  align-items: center;
  gap: 2rem;
}
.admin-brand {
  display: flex; align-items: center; gap: 0.6rem;
  color: #fff; text-decoration: none;
}
.admin-brand .brand-mark { width: 34px; height: 34px; color: #fff; }
.admin-brand .brand-text { font-size: 1.05rem; font-weight: 900; letter-spacing: -0.5px; }
.admin-brand .brand-sub  { font-size: 0.7rem; color: rgba(255,255,255,0.55); margin-top: 1px; }
.admin-nav-links {
  list-style: none; display: flex; gap: 0.4rem; flex: 1;
  margin: 0; padding: 0;
}
.admin-nav-links a {
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.15s;
}
.admin-nav-links a:hover { background: rgba(255,255,255,0.06); color: #fff; }
.admin-nav-links a.active {
  background: var(--orange);
  color: #fff;
}
.admin-nav-meta {
  display: flex; align-items: center; gap: 1.2rem;
}
.admin-nav-meta .meta-item {
  display: flex; flex-direction: column; align-items: center;
}
.admin-nav-meta .meta-value {
  font-family: var(--font-mono);
  font-size: 1rem; font-weight: 700; color: var(--orange);
}
.admin-nav-meta .meta-label {
  font-size: 0.65rem; color: rgba(255,255,255,0.5);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.admin-user {
  display: flex; align-items: center; gap: 0.5rem;
  color: rgba(255,255,255,0.85); font-size: 0.85rem;
  padding: 0.4rem 0.75rem;
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
}
.admin-user-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--orange); color: #fff;
  font-weight: 700; font-size: 0.85rem;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Admin-Body */
.admin-body {
  max-width: 1400px;
  margin: 2rem auto 4rem;
  padding: 0 var(--gut);
}
.admin-body .page-title {
  font-family: var(--font-display);
  font-size: 1.7rem; font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 0.3rem;
}
.admin-body .page-subtitle {
  color: var(--gray-700); font-size: 0.95rem;
  margin-bottom: 1.8rem;
}

/* Filterleiste */
.admin-filterbar {
  display: flex; gap: 0.6rem; flex-wrap: wrap;
  margin-bottom: 1.2rem;
  align-items: center;
}
.admin-search, .admin-select {
  background: #fff;
  border: 1.5px solid var(--gray-200);
  border-radius: 8px;
  padding: 0.55rem 0.85rem;
  font-size: 0.92rem;
  font-family: inherit;
  color: var(--ink);
}
.admin-search { min-width: 280px; flex: 1; }
.admin-search:focus, .admin-select:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(232,135,42,0.15);
}
.admin-btn {
  padding: 0.55rem 1rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  border: 1.5px solid transparent;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;
  transition: all 0.15s;
}
.admin-btn-primary {
  background: var(--orange); color: #fff; border-color: var(--orange);
}
.admin-btn-primary:hover { background: var(--orange-dark); border-color: var(--orange-dark); }
.admin-btn-ghost {
  background: transparent;
  color: var(--gray-700);
  border-color: var(--gray-200);
}
.admin-btn-ghost:hover { border-color: var(--orange); color: var(--orange); }
.admin-btn-sm { padding: 0.4rem 0.8rem; font-size: 0.82rem; }

/* Card-Wrap für Tabelle */
.admin-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.admin-empty {
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--gray-700);
}

/* Tabelle */
.admin-table-wrap { overflow-x: auto; }
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.admin-table thead {
  background: var(--bg-soft);
  border-bottom: 1.5px solid var(--gray-200);
}
.admin-table th {
  text-align: left;
  padding: 0.75rem 1rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-700);
}
.admin-table th.right { text-align: right; }
.admin-table td {
  padding: 1rem;
  border-bottom: 1px solid var(--gray-100);
  vertical-align: top;
}
.admin-table td.right { text-align: right; }
.admin-table tbody tr:hover { background: var(--bg-soft); }
.admin-table tbody tr:last-child td { border-bottom: 0; }

.kunde-name  { font-weight: 700; font-size: 0.95rem; }
.kunde-firma { color: var(--gray-700); font-size: 0.85rem; }
.kunde-email { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-soft); margin-top: 2px; }
.kunde-lead  { font-size: 0.72rem; color: var(--gray-500); margin-top: 2px; }

.audit-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0;
  font-size: 0.85rem;
}
.audit-row + .audit-row { border-top: 1px dashed var(--gray-100); }
.audit-paket  { font-weight: 700; }
.audit-domain { color: var(--gray-700); font-family: var(--font-mono); font-size: 0.8rem; }
.admin-link-mini {
  font-size: 0.78rem;
  color: var(--orange);
  text-decoration: none;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  background: rgba(232,135,42,0.08);
  white-space: nowrap;
}
.admin-link-mini:hover { background: rgba(232,135,42,0.2); }
.admin-amount {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--ink);
}

.admin-badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.18rem 0.5rem;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.admin-badge--ok      { background: #d1fae5; color: #065f46; }
.admin-badge--warn    { background: #fef3c7; color: #92400e; }
.admin-badge--info    { background: #dbeafe; color: #1e40af; }
.admin-badge--bad     { background: #fee2e2; color: #991b1b; }
.admin-badge--neutral { background: var(--gray-100); color: var(--gray-700); }

.muted { color: var(--gray-500); }
.small { font-size: 0.82rem; }

/* ============================================================
   LEGAL-SEITEN — Impressum, Datenschutz, AGB
============================================================ */
.legal-page {
  background: var(--bg-soft);
  /* Top-Padding kompensiert den fixed .nav (~62 px) */
  padding: 6rem 1.25rem 4rem;
  min-height: 60vh;
}
.legal-container {
  max-width: 820px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--r-lg);
  padding: 2.5rem 2.2rem;
  box-shadow: var(--shadow-sm);
}
.legal-container h1 {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-bottom: 0.4rem;
  color: var(--ink);
}
.legal-lead {
  color: var(--gray-700);
  font-size: 0.95rem;
  line-height: 1.55;
  margin-bottom: 2rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--gray-200);
}
.legal-section { margin-bottom: 2rem; }
.legal-section h2 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 0.8rem;
  color: var(--ink);
}
.legal-section h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 1rem 0 0.5rem;
  color: var(--ink);
}
.legal-section p {
  color: var(--ink-soft);
  font-size: 0.94rem;
  line-height: 1.6;
  margin-bottom: 0.8rem;
}
.legal-section ul {
  margin: 0.6rem 0 0.8rem 1.4rem;
  padding: 0;
}
.legal-section li {
  color: var(--ink-soft);
  font-size: 0.94rem;
  line-height: 1.6;
  margin-bottom: 0.4rem;
}
.legal-section a { color: var(--orange); }
.legal-section a:hover { color: var(--orange-dark); text-decoration: underline; }

/* Fakten-Liste */
.fakten-liste { margin: 0.4rem 0 0.6rem; }
.fakten-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 1rem;
  padding: 0.65rem 0;
  border-bottom: 1px dashed var(--gray-100);
  font-size: 0.92rem;
}
.fakten-row:last-child { border-bottom: 0; }
.fakten-row dt {
  font-weight: 700;
  color: var(--ink-soft);
}
.fakten-row dt small {
  display: block;
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--gray-500);
}
.fakten-row dd {
  margin: 0;
  color: var(--ink);
}
@media (max-width: 560px) {
  .fakten-row { grid-template-columns: 1fr; gap: 0.2rem; }
}

.legal-footer-note {
  margin-top: 2.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--gray-200);
  text-align: center;
  font-size: 0.85rem;
  color: var(--gray-500);
}

/* ============================================================
   DASHBOARD V2 — Audit-Karten, Zugänge, Abos
============================================================ */

/* Sektion */
.dash-section { margin-bottom: 3rem; }
.dash-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 1.2rem; gap: 1rem; flex-wrap: wrap;
}
.dash-section-title {
  font-family: var(--font-display);
  font-size: 1.4rem; font-weight: 800;
  letter-spacing: -0.02em; color: var(--ink);
  margin: 0;
}
.dash-section-cta {
  font-size: 0.9rem; font-weight: 600;
  color: var(--orange);
  text-decoration: none;
}
.dash-section-cta:hover { color: var(--orange-dark); text-decoration: underline; }

/* Audit-Karte */
.dash-audit-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--r-lg);
  padding: 1.5rem 1.6rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-sm);
}
.dash-audit-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; flex-wrap: wrap;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--gray-100);
  margin-bottom: 0.9rem;
}
.dash-audit-paket   { font-size: 1.1rem; font-weight: 800; color: var(--ink); }
.dash-audit-domain  { font-family: var(--font-mono); font-size: 0.85rem; color: var(--gray-700); margin-top: 2px; }
.dash-audit-head-right { display: flex; align-items: center; gap: 0.6rem; }
.dash-audit-meta    { font-size: 0.88rem; color: var(--gray-700); margin-bottom: 1rem; }

/* Zugänge */
.dash-zugaenge { background: var(--bg-soft); border-radius: var(--r); padding: 1rem 1.1rem; margin: 0.5rem 0 1rem; }
.dash-zugaenge-title { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray-700); margin-bottom: 0.8rem; }
.dash-zugaenge-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
@media (max-width: 760px) { .dash-zugaenge-grid { grid-template-columns: 1fr; } }
.dash-zugang { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--r); padding: 0.8rem 0.9rem; display: flex; align-items: flex-start; gap: 0.7rem; }
.dash-zugang-icon { font-size: 1.4rem; line-height: 1; padding-top: 2px; }
.dash-zugang-body { flex: 1; min-width: 0; }
.dash-zugang-name { font-weight: 700; font-size: 0.92rem; }
.dash-zugang-desc { font-size: 0.78rem; color: var(--gray-700); margin: 2px 0 4px; }
.dash-zugang-status .dash-badge { font-size: 0.7rem; }
.dash-zugang-action { align-self: center; }

/* Rechnung */
.dash-audit-rechnung { display: flex; justify-content: space-between; align-items: center; padding: 0.7rem 0.9rem; background: #fafbfc; border-radius: var(--r); margin: 0.5rem 0; font-size: 0.88rem; }
.dash-audit-fertig { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; padding: 0.7rem 0.9rem; background: #f0faf4; border: 1px solid #c8ebd5; border-radius: var(--r); margin: 0.5rem 0; font-size: 0.88rem; flex-wrap: wrap; }
.dash-audit-fertig > span { color: #1a7a44; }
.dash-audit-fertig strong { color: #14633a; }

/* Abo-CTA */
.dash-abo-cta { margin-top: 1rem; padding: 1rem 1.2rem; background: linear-gradient(135deg, rgba(164,200,47,0.10) 0%, rgba(164,200,47,0.04) 100%); border: 1px solid rgba(164,200,47,0.4); border-radius: var(--r); display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.dash-abo-cta-body { flex: 1; min-width: 250px; }
.dash-abo-cta-title { font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.dash-abo-cta-desc { font-size: 0.88rem; color: var(--gray-700); line-height: 1.5; }

/* Aktives Abo */
.dash-abo-aktiv { margin-top: 1rem; padding: 0.85rem 1.1rem; background: rgba(34,197,94,0.06); border: 1px solid rgba(34,197,94,0.3); border-radius: var(--r); display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.dash-abo-aktiv-label { font-weight: 700; color: #166534; }
.dash-abo-aktiv-meta  { font-size: 0.85rem; color: var(--gray-700); margin-top: 2px; }

/* Upgrade-Card */
.dash-upgrade-card { background: linear-gradient(135deg, var(--ink) 0%, #2a3a55 100%); color: #fff; border-radius: var(--r-lg); padding: 2rem; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.dash-upgrade-icon { color: var(--orange); flex-shrink: 0; }
.dash-upgrade-body { flex: 1; min-width: 280px; }
.dash-upgrade-title { font-size: 1.25rem; font-weight: 800; margin: 0 0 0.4rem; }
.dash-upgrade-desc { font-size: 0.93rem; line-height: 1.55; color: rgba(255,255,255,0.85); margin: 0; }

/* Rechnungs-Liste */
.dash-rechnungen-list { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--r-lg); overflow: hidden; }
.dash-rechnung-row { display: grid; grid-template-columns: 1fr auto auto; gap: 1rem; align-items: center; padding: 0.9rem 1.2rem; border-bottom: 1px solid var(--gray-100); }
.dash-rechnung-row:last-child { border-bottom: 0; }
.dash-rechnung-nr { font-family: var(--font-mono); font-weight: 700; font-size: 0.93rem; }
.dash-rechnung-meta { font-size: 0.82rem; color: var(--gray-700); margin-top: 2px; }
.dash-rechnung-amount { font-family: var(--font-mono); font-weight: 700; color: var(--ink); }
.abo-tag { display: inline-block; background: var(--lime); color: var(--ink); font-weight: 700; font-size: 0.7rem; padding: 0.1rem 0.4rem; border-radius: 4px; }

/* Meine Daten (Stammdaten-Abschnitt) */
.dash-stammdaten { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--r-lg); padding: 1.4rem 1.6rem; }
.dash-stammdaten-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.3rem; margin-bottom: 1.6rem; padding-bottom: 1.6rem; border-bottom: 1px solid var(--gray-100); }
.dash-stammdaten-item { display: flex; flex-direction: column; gap: 0.3rem; }
.dash-stammdaten-adresse { margin-bottom: 1.6rem; padding-bottom: 1.6rem; border-bottom: 1px solid var(--gray-100); }
.dash-stammdaten-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gray-700); }
.dash-stammdaten-value { font-size: 0.95rem; color: var(--ink); line-height: 1.6; margin-top: 0.4rem; }
.dash-stammdaten-item .dash-stammdaten-value { font-family: var(--font-mono); font-weight: 700; }
.dash-stammdaten-leer { font-size: 0.86rem; color: var(--gray-700); font-family: inherit; font-weight: 400; }
.dash-stammdaten-hinweis { font-size: 0.8rem; color: var(--gray-700); margin: 0; }
.dash-stammdaten-hinweis a, .dash-stammdaten-leer a { color: var(--orange); }


/* Badge */
.dash-badge { display: inline-block; font-size: 0.7rem; font-weight: 700; padding: 0.18rem 0.5rem; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.dash-badge--ok      { background: #d1fae5; color: #065f46; }
.dash-badge--warn    { background: #fef3c7; color: #92400e; }
.dash-badge--info    { background: #dbeafe; color: #1e40af; }
.dash-badge--bad     { background: #fee2e2; color: #991b1b; }
.dash-badge--neutral { background: var(--gray-100); color: var(--gray-700); }

/* btn-mini-pill */
.btn-mini-pill { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.32rem 0.7rem; background: var(--bg-soft); color: var(--ink); border: 1px solid var(--gray-200); border-radius: 999px; font-size: 0.82rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: all 0.15s; }
.btn-mini-pill:hover { background: #fff; border-color: var(--orange); color: var(--orange); }
.btn-mini-pill.ghost { background: transparent; }

/* Empty State */
.dash-empty { background: #fff; border: 1px dashed var(--gray-200); border-radius: var(--r); padding: 2.5rem 1.5rem; text-align: center; color: var(--gray-700); }

/* ─── MODAL ─── */
.dash-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.dash-modal[hidden] { display: none; }
.dash-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); cursor: pointer; }
.dash-modal-content { position: relative; background: #fff; border-radius: var(--r-lg); max-width: 640px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 2rem; box-shadow: var(--shadow-xl); }
.dash-modal-close { position: absolute; top: 0.8rem; right: 1rem; width: 32px; height: 32px; border: 0; background: transparent; font-size: 1.6rem; cursor: pointer; color: var(--gray-700); }
.dash-modal-close:hover { color: var(--ink); }
.dash-modal-title { font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; margin: 0 0 1rem; padding-right: 2rem; }
.dash-modal-tabs { display: flex; gap: 0.3rem; margin-bottom: 1.2rem; border-bottom: 1px solid var(--gray-200); }
.dash-modal-tab { background: transparent; border: 0; padding: 0.6rem 1rem; font-size: 0.9rem; font-weight: 600; color: var(--gray-700); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.dash-modal-tab.active { color: var(--orange); border-bottom-color: var(--orange); }
.dash-modal-intro { font-size: 0.92rem; color: var(--gray-700); line-height: 1.55; margin-bottom: 1.2rem; }
.dash-modal-sa-email { background: var(--bg-soft); border-radius: var(--r); padding: 0.9rem 1rem; margin-bottom: 1.2rem; }
.dash-modal-sa-email label { display: block; font-size: 0.78rem; font-weight: 700; color: var(--gray-700); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.4rem; }
.dash-modal-copy-row { display: flex; gap: 0.5rem; align-items: center; }
.dash-modal-copy-row code { flex: 1; padding: 0.5rem 0.7rem; background: #fff; border: 1px solid var(--gray-200); border-radius: 6px; font-family: var(--font-mono); font-size: 0.82rem; word-break: break-all; }
.dash-modal-steps ol { padding-left: 1.4rem; margin: 0 0 1.5rem; }
.dash-modal-steps li { font-size: 0.92rem; color: var(--ink); line-height: 1.6; margin-bottom: 0.5rem; }
.dash-modal-steps li strong { background: rgba(232,135,42,0.15); padding: 1px 4px; border-radius: 3px; }
.dash-modal-steps li code { background: var(--bg-soft); padding: 1px 5px; border-radius: 3px; font-size: 0.82rem; }
.dash-modal-input-row { margin-bottom: 1rem; }
.dash-modal-input-row label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.3rem; color: var(--ink); }
.dash-modal-input-row input { width: 100%; padding: 0.6rem 0.85rem; border: 1.5px solid var(--gray-200); border-radius: 8px; font-family: var(--font-mono); font-size: 0.9rem; }
.dash-modal-input-row input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(232,135,42,0.15); }
.dash-modal-actions { margin-top: 1rem; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.dash-modal-result { margin-top: 1rem; padding: 0.85rem 1rem; border-radius: var(--r); font-size: 0.9rem; }
.dash-modal-result-ok  { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.dash-modal-result-err { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.dash-modal-oauth-note { background: #fef3c7; border: 1px solid #fde68a; border-radius: var(--r); padding: 0.85rem 1rem; margin-bottom: 1rem; font-size: 0.88rem; color: #78350f; }

/* ─── ABO-AKTIVIEREN-SEITE ─── */
.dash-abo-aktivieren-card { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--r-lg); padding: 2rem; max-width: 720px; }
.dash-abo-aktivieren-tarif { font-family: var(--font-display); font-size: 1.7rem; font-weight: 800; margin: 0 0 0.3rem; }
.dash-abo-aktivieren-domain { color: var(--gray-700); margin-bottom: 1.5rem; }
.dash-abo-summary { margin: 0 0 1.5rem; }
.dash-abo-summary > div { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--gray-100); font-size: 0.92rem; }
.dash-abo-summary > div:last-child { border-bottom: 0; }
.dash-abo-summary dt { color: var(--gray-700); margin: 0; }
.dash-abo-summary dd { margin: 0; color: var(--ink); }
.dash-abo-summary small { display: block; color: var(--gray-500); margin-top: 2px; }
.dash-abo-stub-notice { background: rgba(59,130,246,0.06); border: 1px solid rgba(59,130,246,0.3); border-radius: var(--r); padding: 0.9rem 1.1rem; margin: 1.5rem 0; font-size: 0.9rem; color: #1e3a8a; }
.dash-abo-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 1.5rem; }
.dash-abo-legal { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--gray-200); font-size: 0.82rem; color: var(--gray-500); }

/* ─── ABO STRIPE-ELEMENT WRAP ─────────────────────────────── */
.dash-abo-stripe-wrap {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--gray-200);
}
.dash-abo-stripe-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 1rem;
  color: var(--ink);
}
.dash-abo-loader {
  padding: 2rem;
  text-align: center;
  color: var(--gray-700);
  background: var(--bg-soft);
  border-radius: var(--r);
  font-size: 0.9rem;
}

/* ─── ABO SUCCESS PAGE ────────────────────────────────────── */
.dash-abo-success-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--r-lg);
  padding: 3rem 2rem;
  max-width: 640px;
  margin: 2rem auto;
  text-align: center;
}
.dash-abo-success-icon {
  font-size: 4rem;
  width: 100px;
  height: 100px;
  margin: 0 auto 1.5rem;
  background: #d1fae5;
  color: #16a34a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dash-abo-icon-processing { background: #dbeafe; color: #1e40af; }
.dash-abo-icon-failed     { background: #fee2e2; color: #991b1b; }
.dash-abo-icon-pending    { background: #fef3c7; color: #92400e; }
.dash-abo-success-title {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 800;
  margin: 0 0 1rem;
  color: var(--ink);
}
.dash-abo-success-text {
  font-size: 1rem;
  color: var(--gray-700);
  line-height: 1.6;
  margin: 0 0 1rem;
}
.dash-abo-success-actions {
  margin-top: 2rem;
}

/* ─── DASHBOARD AUDIT-RUN STATUS ──────────────────────────── */
.dash-zugaenge-hint {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.85rem;
  color: var(--gray-700);
  font-weight: 400;
}
.dash-pflicht-marker {
  display: inline-block;
  color: #dc2626;
  font-weight: 700;
  margin-left: 0.3rem;
}
.dash-optional-marker {
  display: inline-block;
  background: var(--gray-100);
  color: var(--gray-700);
  font-size: 0.7rem;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 500;
  margin-left: 0.3rem;
  vertical-align: middle;
}
.dash-zugang--pflicht {
  border-left: 3px solid #dc2626;
}

.dash-audit-run {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px dashed var(--gray-200);
}
.dash-audit-run-status {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: var(--r);
  background: var(--bg-soft);
  border: 1px solid var(--gray-200);
}
.dash-audit-run-status--ready {
  background: #f0fdf4;
  border-color: #86efac;
}
.dash-audit-run-status--running {
  background: #eff6ff;
  border-color: #93c5fd;
}
.dash-audit-run-status--error {
  background: #fef2f2;
  border-color: #fca5a5;
}
.dash-audit-run-status--success {
  background: #f0fdf4;
  border-color: #86efac;
}
.dash-audit-run-text {
  flex: 1;
}
.dash-audit-run-text strong {
  display: block;
  font-size: 1rem;
  margin-bottom: 0.3rem;
  color: var(--ink);
}
.dash-audit-run-text small {
  display: block;
  font-size: 0.85rem;
  color: var(--gray-700);
  line-height: 1.5;
  margin-top: 0.2rem;
}
.dash-audit-run-status--error .dash-audit-run-text strong { color: #991b1b; }
.dash-audit-run-status--success .dash-audit-run-text strong { color: #166534; }
.dash-audit-run-status--running .dash-audit-run-text strong { color: #1e40af; }

.dash-audit-run-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #dbeafe;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: dash-spin 0.9s linear infinite;
  flex-shrink: 0;
}
@keyframes dash-spin {
  to { transform: rotate(360deg); }
}

.btn-arrow.lime[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--gray-300) !important;
}

/* ═══════════════════════════════════════════════════════════════
   AUDIT BUCHEN — schlanker Upgrade-/Nachbuchungs-Flow (Bestandskunden)
═══════════════════════════════════════════════════════════════ */
.dash-buchen-card { max-width: 760px; background: #fff; border: 1px solid var(--line, #e6e9ef); border-radius: var(--r); padding: 1.6rem 1.8rem; }
.dash-buchen-step { padding: 1.1rem 0; border-bottom: 1px solid var(--line, #eef0f4); }
.dash-buchen-step:last-child { border-bottom: 0; }
.dash-buchen-step-title { font-size: 1.05rem; font-weight: 700; color: #1a2540; margin: 0 0 0.6rem; }
.dash-buchen-hint { font-size: 0.9rem; color: #5a6577; margin: 0 0 0.8rem; line-height: 1.5; }
.dash-buchen-label { display: block; font-size: 0.82rem; font-weight: 600; color: #3a4459; margin: 0.6rem 0 0.3rem; }
.dash-buchen-select, .dash-buchen-input { width: 100%; max-width: 420px; padding: 0.65rem 0.8rem; border: 1px solid #cfd5e0; border-radius: 8px; font-size: 0.95rem; color: #1a2540; background: #fff; }
.dash-buchen-select:focus, .dash-buchen-input:focus { outline: 2px solid var(--orange); border-color: var(--orange); }
.dash-buchen-neu-wrap { margin-top: 0.4rem; }

.dash-buchen-paket-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.8rem; }
.dash-buchen-paket { position: relative; display: flex; flex-direction: column; gap: 0.35rem; text-align: left; padding: 1rem 1.1rem; background: #fff; border: 2px solid #e6e9ef; border-radius: 12px; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .1s; }
.dash-buchen-paket:hover { border-color: var(--orange-light); box-shadow: 0 4px 14px rgba(232,135,42,.1); }
.dash-buchen-paket.is-selected { border-color: var(--orange); box-shadow: 0 4px 16px rgba(232,135,42,.18); }
.dash-buchen-paket.is-beliebt { border-color: var(--lime); }
.dash-buchen-paket-badge { position: absolute; top: -10px; right: 12px; background: var(--lime); color: #1a2540; font-size: 0.68rem; font-weight: 700; padding: 0.15rem 0.55rem; border-radius: 999px; }
.dash-buchen-paket-name { font-size: 1rem; font-weight: 700; color: #1a2540; }
.dash-buchen-paket-tagline { font-size: 0.8rem; color: #6a7488; line-height: 1.4; flex-grow: 1; }
.dash-buchen-paket-preis { margin-top: 0.6rem; font-size: 1.15rem; font-weight: 800; color: var(--orange-dark); }
.dash-buchen-paket-preis small { font-size: 0.7rem; font-weight: 500; color: #8a93a6; }

.dash-buchen-summary { background: var(--orange-soft); border-radius: 10px; padding: 0.8rem 1rem; font-size: 0.95rem; color: #1a2540; margin-bottom: 1rem; }
.dash-buchen-success { text-align: center; max-width: 620px; margin: 0 auto; }
.dash-success-icon { width: 64px; height: 64px; line-height: 64px; margin: 0 auto 1rem; border-radius: 50%; background: var(--lime-soft); color: #1a7a44; font-size: 2rem; font-weight: 700; }
.dash-success-icon--err { background: #fbe9e9; color: #c0392b; }

/* Audit buchen — Preis-Aufschlüsselung (wie normaler Bestellprozess) */
.dash-buchen-paket-brutto { font-size: 0.74rem; color: #8a93a6; margin-top: -0.15rem; }
.dash-buchen-sum-name { font-size: 0.95rem; color: #1a2540; margin-bottom: 0.5rem; }
.dash-buchen-sum-netto { font-size: 1.6rem; font-weight: 800; color: var(--orange-dark); line-height: 1.1; }
.dash-buchen-sum-netto span { font-size: 0.85rem; font-weight: 600; color: #8a93a6; }
.dash-buchen-sum-mwst { font-size: 0.82rem; color: #6a7488; margin-top: 0.15rem; }
.dash-buchen-sum-divider { height: 1px; background: #e6e9ef; margin: 0.6rem 0; }
.dash-buchen-sum-total { font-size: 0.95rem; font-weight: 700; color: #1a2540; }

/* Audit buchen — Zahlungsart-Umschalter + IBAN-Anzeige */
.dash-buchen-zahlart { display: flex; gap: 0.6rem; margin: 0.4rem 0 1.1rem; flex-wrap: wrap; }
.dash-buchen-zahlart-btn { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 0.15rem; padding: 0.7rem 1rem; background: #fff; border: 2px solid #e6e9ef; border-radius: 10px; cursor: pointer; font-size: 0.95rem; font-weight: 700; color: #1a2540; text-align: left; transition: border-color .15s, background .15s; }
.dash-buchen-zahlart-btn small { font-size: 0.75rem; font-weight: 500; color: #8a93a6; }
.dash-buchen-zahlart-btn:hover { border-color: var(--orange-light); }
.dash-buchen-zahlart-btn.is-active { border-color: var(--orange); background: var(--orange-soft); }
.dash-buchen-bank { background: #fafbfc; border: 1px solid #e6e9ef; border-radius: 10px; padding: 1.1rem 1.2rem; margin-bottom: 1rem; }
.dash-buchen-iban { width: 100%; border-collapse: collapse; margin: 0.6rem 0; font-size: 0.92rem; }
.dash-buchen-iban th { text-align: left; padding: 0.4rem 0.8rem 0.4rem 0; color: #6a7488; font-weight: 600; white-space: nowrap; vertical-align: top; }
.dash-buchen-iban td { padding: 0.4rem 0; color: #1a2540; }

/* Gekündigtes (noch laufendes) Abo — gedämpft statt grün */
.dash-abo-gekuendigt { background: #fdf6ec !important; border-color: #e8b56a !important; }
.dash-abo-gekuendigt .dash-abo-aktiv-label { color: #9a6212 !important; }

/* ============================================================
   RESELLER-PORTAL — nutzt dash-* Klassen + globalen Header/Footer.
   Die Hauptnav-Links werden ausgeblendet (das Logo bleibt), und die
   .btn-Klassen werden hier definiert (im öffentlichen CSS fehlen sie).
============================================================ */
body.is-reseller { background: #f8f9fb; }
body.is-reseller .dash-container { padding-top: 5.5rem; }
body.is-reseller .dash-user-info { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }

/* Im Portal die Hauptnav-Links + CTA ausblenden, Logo/Brand behalten */
body.is-reseller .nav-links,
body.is-reseller .nav-cta,
body.is-reseller .nav-toggle { display: none !important; }

/* Kennzeichnung "Reseller-Bereich" rechts im Header */
.nav-reseller-badge {
  display: inline-flex; align-items: center;
  margin-left: auto;
  padding: 0.4rem 0.9rem;
  background: var(--orange);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 999px;
  white-space: nowrap;
}

/* Button-Klassen fürs Portal (analog zu den Login-Buttons) */
body.is-reseller .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 0.72rem 1.1rem; border-radius: var(--r);
  font-size: 0.92rem; font-weight: 600; font-family: inherit;
  text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
  transition: all 0.15s; line-height: 1;
}
body.is-reseller .btn-small { padding: 0.5rem 0.85rem; font-size: 0.85rem; }
body.is-reseller .btn-primary { background: var(--orange); color: #fff; border-color: var(--orange); }
body.is-reseller .btn-primary:hover { background: var(--orange-dark); border-color: var(--orange-dark); }
body.is-reseller .btn-secondary { background: var(--bg-soft); color: var(--ink-soft); border-color: var(--gray-200); }
body.is-reseller .btn-secondary:hover { border-color: var(--orange); color: var(--orange); background: #fff; }
body.is-reseller .btn:disabled { background: var(--gray-500); border-color: var(--gray-500); color:#fff; cursor: not-allowed; }
body.is-reseller .dash-logout { cursor: pointer; }