/* ═══════════════════════════════════════════════════════
   COMPONENTS — vollständig, konsistent mit dem HTML
   ═══════════════════════════════════════════════════════ */

/* ─── HERO ─────────────────────────────────────────────── */
.hero {
  background:
    linear-gradient(180deg, rgba(14,1,36,.75) 0%, rgba(37,10,94,.80) 45%, rgba(50,20,140,.88) 75%, rgba(30,10,80,.95) 100%),
    url('https://images.unsplash.com/photo-1448375240586-882707db888b?w=1920&q=80&auto=format&fit=crop') center/cover no-repeat;
  padding: 6rem 2rem 5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 70% at 20% 60%, rgba(103,61,230,.3) 0%, transparent 100%),
    radial-gradient(ellipse 45% 55% at 85% 15%, rgba(180,130,255,.1) 0%, transparent 100%);
  pointer-events: none;
}
/* Fade to page background — only in dark mode; in light mode the hard edge is fine */
.hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 120px;
  background: transparent;
  pointer-events: none;
}

/* Orb decorations */
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  opacity: .35;
  pointer-events: none;
  animation: orbFloat 9s ease-in-out infinite;
}
.hero-orb-1 { width: 320px; height: 320px; background: #673DE6; top: -80px; left: -80px; }
.hero-orb-2 { width: 200px; height: 200px; background: #a78bfa; bottom: -40px; right: 8%; animation-delay: -4s; animation-duration: 12s; }
@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0); }
  33%       { transform: translate(28px, -18px); }
  66%       { transform: translate(-18px, 14px); }
}

/* Badge above headline */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.9);
  padding: .38rem 1rem;
  border-radius: 9999px;
  font-size: .78rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
  position: relative;
  letter-spacing: .01em;
}
.badge-pulse {
  width: 7px;
  height: 7px;
  background: #4ade80;
  border-radius: 50%;
  flex-shrink: 0;
  animation: blink 2s infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.25} }

.hero h1 {
  color: white;
  max-width: 800px;
  margin: 0 auto 1.25rem;
  position: relative;
}
.hero h1 em { font-style: normal; color: #c4a8ff; }

/* Direct <p> child of hero */
.hero > p {
  color: rgba(255,255,255,.68);
  font-size: 1.08rem;
  max-width: 520px;
  margin: 0 auto 2.5rem;
  position: relative;
}
/* Or if using .hero-sub class */
.hero-sub {
  color: rgba(255,255,255,.68);
  font-size: 1.08rem;
  max-width: 520px;
  margin: 0 auto 2.5rem;
  position: relative;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
}
.hero-stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 4rem;
  position: relative;
}
.hstat {
  text-align: center;
  color: white;
  padding: 0 2.5rem;
  border-right: 1px solid rgba(255,255,255,.1);
}
.hstat:last-child { border-right: none; }
.hstat-num   { font-size: 1.9rem; font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.hstat-label { font-size: .74rem; color: rgba(255,255,255,.45); margin-top: .3rem; }

/* ─── TRUST BAR ─────────────────────────────────────────── */
.trust-bar {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 1rem 2rem;
}
.trust-bar .container {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}
.trust-label  { font-size: .7rem; font-weight: 700; color: var(--gray-400); text-transform: uppercase; letter-spacing: .1em; white-space: nowrap; }
.trust-logos  { display: flex; gap: 2rem; align-items: center; flex-wrap: wrap; justify-content: center; }
.trust-logo   { font-size: .8rem; font-weight: 700; color: var(--gray-300); transition: color .2s; }
.trust-logo:hover { color: var(--gray-500); }

/* ─── PLAN CARDS ────────────────────────────────────────── */
.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.25rem;
}
.plan-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: 1.75rem;
  position: relative;
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.plan-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.plan-card.featured {
  border-color: var(--brand);
  border-width: 2px;
  background: linear-gradient(180deg, rgba(103,61,230,.025) 0%, var(--white) 40%);
}

.plan-top-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand);
  color: white;
  padding: .22rem .9rem;
  border-radius: 9999px;
  font-size: .7rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Monochrome icon */
.plan-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--icon-bg);
  color: var(--icon-color);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.plan-icon svg { width: 21px; height: 21px; stroke-width: 1.8; }

.plan-name { font-size: 1.05rem; font-weight: 800; margin-bottom: .2rem; }
.plan-desc { font-size: .8rem; color: var(--text-muted); margin-bottom: 1.1rem; }

.plan-price { margin-bottom: 1.4rem; line-height: 1; }
.price-cur    { font-size: 1.1rem; font-weight: 700; color: var(--brand); vertical-align: super; }
.price-amount { font-size: 2.4rem; font-weight: 800; color: var(--brand); letter-spacing: -.05em; }
.price-per    { font-size: .78rem; color: var(--text-muted); }
.price-orig   { font-size: .78rem; color: var(--gray-300); text-decoration: line-through; margin-top: .25rem; display: block; }

.plan-features { margin-bottom: 1.5rem; }
.plan-features li {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-size: .84rem;
  padding: .3rem 0;
  color: var(--gray-700);
}
.plan-features li::before {
  content: '';
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--icon-bg)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8l3.5 3.5L13 5' stroke='%23673DE6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat center / 10px;
  flex-shrink: 0;
}
.plan-card .btn { width: 100%; }

/* ─── FEATURE CARDS ─────────────────────────────────────── */
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 2rem; }
.feature-card  { display: flex; gap: 1rem; }
.feature-icon  {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--icon-bg);
  color: var(--icon-color);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.feature-icon svg { width: 20px; height: 20px; stroke-width: 1.8; }
.section-dark .feature-icon { background: rgba(255,255,255,.08); color: rgba(255,255,255,.85); }
.feature-card h3 { margin-bottom: .35rem; font-size: 1rem; }
.feature-card p  { font-size: .86rem; line-height: 1.65; }

/* ─── DOMAIN SEARCH ─────────────────────────────────────── */
.domain-search-box {
  display: flex;
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  max-width: 680px;
  margin: 0 auto;
  transition: border-color .2s, box-shadow .2s;
}
.domain-search-box:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(103,61,230,.09);
}
.domain-search-box input {
  flex: 1;
  border: none;
  outline: none;
  padding: .95rem 1.25rem;
  font-size: .975rem;
  color: var(--text);
  background: transparent;
}
.domain-search-box input::placeholder { color: var(--text-soft); }
.domain-search-box button {
  background: var(--brand);
  color: white;
  border: none;
  padding: 0 1.6rem;
  font-weight: 700;
  font-size: .88rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
  transition: background .2s;
}
.domain-search-box button:hover { background: var(--brand-dark); }
.domain-search-box button svg { width: 15px; height: 15px; }

.tld-pills-row { display: flex; gap: .4rem; justify-content: center; margin-top: .875rem; margin-bottom: .5rem; flex-wrap: wrap; }
.tld-pill-sm {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 9999px;
  padding: .25rem .75rem;
  font-size: .76rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s;
}
.tld-pill-sm:hover { border-color: var(--brand); }
.tld-pill-sm strong { color: var(--brand); font-weight: 700; }

/* Domain results */
.domain-results { margin-top: 2rem; display: flex; flex-direction: column; gap: .75rem; }
.domain-result-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  margin-bottom: .5rem;
  transition: border-color .2s, box-shadow .2s;
  animation: fadeUp .4s both;
}
.domain-result-row.available { border-color: var(--success-border); background: var(--success-light); }
.domain-result-row.taken     { background: var(--gray-50); }
.domain-result-row:hover { box-shadow: var(--shadow-md); }
.dr-name   { font-size: .975rem; font-weight: 700; }
.dr-status { font-size: .77rem; font-weight: 600; display: flex; align-items: center; gap: .4rem; margin-top: .2rem; }
.dr-status.ok { color: var(--success); }
.dr-status.no { color: var(--gray-400); }
.dr-right  { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
.dr-price  { font-weight: 800; font-size: .95rem; color: var(--brand); }
.domain-results-loading { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 3rem; color: var(--text-muted); font-size: .88rem; }

/* ─── TESTIMONIALS ──────────────────────────────────────── */
.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 1.25rem; }
.testimonial-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.6rem;
  transition: transform .3s, box-shadow .3s;
}
.testimonial-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stars { color: #f59e0b; font-size: .88rem; margin-bottom: .75rem; letter-spacing: 2px; }
.testimonial-card p { font-size: .86rem; line-height: 1.7; margin-bottom: 1.1rem; }
.t-author { display: flex; align-items: center; gap: .75rem; }
.t-avatar  { width: 36px; height: 36px; border-radius: 50%; background: var(--brand); color: white; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .74rem; flex-shrink: 0; }
.t-name    { font-weight: 700; font-size: .84rem; }
.t-role    { font-size: .75rem; color: var(--text-muted); }

/* ─── CTA ───────────────────────────────────────────────── */
.cta-section {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deeper) 100%);
  padding: 5rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute;
  top: -120px; right: -120px;
  width: 460px; height: 460px;
  background: rgba(255,255,255,.03);
  border-radius: 50%;
  pointer-events: none;
}
.cta-section h2   { color: white; position: relative; margin-bottom: 1rem; }
.cta-section p,
.cta-sub          { color: rgba(255,255,255,.7); font-size: 1.05rem; margin-bottom: 2rem; position: relative; }
.cta-actions      { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; position: relative; }

/* ─── PAGE BANNER ───────────────────────────────────────── */
.page-banner {
  background: linear-gradient(145deg, #0e0124 0%, #250a5e 50%, #4a22c8 100%);
  padding: 5rem 2rem 4rem;
  text-align: center;
}
.page-banner h1 { color: white; margin-bottom: 1rem; }
.page-banner > p,
.banner-sub     { color: rgba(255,255,255,.65); max-width: 520px; margin: 0 auto; font-size: 1.05rem; }

/* ─── VPS CARDS ─────────────────────────────────────────── */
.vps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.vps-card {
  border: 1.5px solid var(--border);
  border-radius: 18px;
  padding: 1.5rem;
  background: var(--white);
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.vps-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.vps-card.featured { border-color: var(--brand); border-width: 2px; }
.vps-tier  { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--brand); margin-bottom: .3rem; }
.vps-name  { font-size: 1.15rem; font-weight: 800; margin-bottom: 1rem; }
.vps-price { margin-bottom: 1.25rem; }
.vps-price .amount { font-size: 1.7rem; font-weight: 800; color: var(--brand); letter-spacing: -.04em; }
.vps-specs { border-top: 1px solid var(--border-soft); padding-top: 1rem; margin-bottom: 1.25rem; }
.vps-specs li { display: flex; justify-content: space-between; font-size: .8rem; padding: .26rem 0; color: var(--text-muted); }
.vps-specs li strong { color: var(--text); }

/* ─── BILLING TOGGLE ────────────────────────────────────── */
.billing-toggle { display: flex; align-items: center; gap: 1rem; justify-content: center; margin-bottom: 2.5rem; }
.toggle-pill {
  width: 46px; height: 24px;
  background: var(--gray-200);
  border-radius: 9999px;
  position: relative;
  cursor: pointer;
  transition: background .2s;
}
.toggle-pill.on { background: var(--brand); }
.toggle-pill::after {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  background: white;
  border-radius: 50%;
  top: 4px; left: 4px;
  transition: transform .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.toggle-pill.on::after { transform: translateX(22px); }
.toggle-label       { font-size: .875rem; font-weight: 600; color: var(--text-muted); transition: color .2s; }
.toggle-label.active{ color: var(--text); }
.save-chip {
  background: var(--success-light);
  color: var(--success);
  border: 1px solid var(--success-border);
  padding: .15rem .55rem;
  border-radius: 9999px;
  font-size: .7rem;
  font-weight: 700;
}

/* ─── COMPARE TABLE ─────────────────────────────────────── */
.compare-table { width: 100%; border-collapse: collapse; margin-top: 2rem; font-size: .85rem; }
.compare-table th,
.compare-table td { padding: .78rem 1.1rem; border-bottom: 1px solid var(--border); text-align: left; }
.compare-table th  { background: var(--gray-50); font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.compare-table tr:hover td { background: var(--brand-light); }
.compare-table .col-featured { background: rgba(103,61,230,.025); }
.check-ico { color: var(--brand); font-weight: 700; }
.cross-ico { color: var(--gray-300); }

/* ─── TABS ──────────────────────────────────────────────── */
.tab-nav {
  display: flex;
  gap: .4rem;
  background: var(--gray-100);
  padding: 5px;
  border-radius: 18px;
  max-width: 440px;
  margin: 0 auto 2.5rem;
}
.tab-btn {
  flex: 1;
  padding: .55rem;
  border: none;
  background: none;
  border-radius: 14px;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-muted);
  transition: background .2s, color .2s, box-shadow .2s;
}
.tab-btn.active { background: var(--white); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.08); }

/* ─── AUTH PAGES ────────────────────────────────────────── */
.auth-page {
  min-height: calc(100vh - var(--nav-h));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: var(--gray-50);
}
.auth-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 2.5rem;
  width: 100%;
  max-width: 420px;
  box-shadow: var(--shadow-lg);
}
.auth-logo     { display: flex; justify-content: center; margin-bottom: 1.25rem; }
.auth-title    { font-size: 1.45rem; font-weight: 800; text-align: center; margin-bottom: .35rem; }
.auth-subtitle { text-align: center; font-size: .875rem; margin-bottom: 2rem; color: var(--text-muted); }
.auth-divider  { display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.auth-divider span { font-size: .74rem; color: var(--text-muted); white-space: nowrap; }
.auth-footer { text-align: center; margin-top: 1.5rem; font-size: .84rem; color: var(--text-muted); }
.auth-footer a { color: var(--brand); font-weight: 600; }
.form-password-wrap { position: relative; }
.form-password-wrap input { padding-right: 3rem; }
.toggle-pw {
  position: absolute;
  right: .9rem; top: 50%;
  transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  color: var(--text-soft);
  padding: 0; display: flex;
  transition: color .15s;
}
.toggle-pw:hover { color: var(--brand); }
.toggle-pw svg { width: 17px; height: 17px; }

/* ─── CART ──────────────────────────────────────────────── */
.cart-layout { display: grid; grid-template-columns: 1fr 340px; gap: 2rem; align-items: start; }
.cart-items  { display: flex; flex-direction: column; gap: 1rem; }
.cart-item {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 18px;
  align-items: flex-start;
  animation: fadeUp .35s both;
}
.cart-item-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--icon-bg); color: var(--icon-color); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cart-item-icon svg { width: 20px; height: 20px; stroke-width: 1.8; }
.cart-item-info { flex: 1; }
.cart-item-name   { font-weight: 700; font-size: .92rem; margin-bottom: .2rem; }
.cart-item-desc   { font-size: .78rem; color: var(--text-muted); }
.cart-item-price  { font-size: 1.05rem; font-weight: 800; color: var(--brand); flex-shrink: 0; }
.cart-item-remove { background: none; border: none; cursor: pointer; color: var(--gray-400); padding: .25rem; border-radius: 6px; transition: color .15s, background .15s; display: flex; margin-left: .5rem; }
.cart-item-remove:hover { color: var(--error); background: var(--error-light); }
.cart-item-remove svg { width: 15px; height: 15px; }

.cart-summary {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 18px;
  padding: 1.5rem;
  position: sticky;
  top: calc(var(--nav-h) + 1.5rem);
}
.cart-summary h3 { margin-bottom: 1.25rem; font-size: 1rem; }
.summary-row { display: flex; justify-content: space-between; font-size: .86rem; padding: .7rem 0; border-bottom: 1px solid var(--border-soft); color: var(--text-muted); }
.summary-row span:last-child { color: var(--text); font-weight: 500; }
.summary-row:last-of-type { border-bottom: none; }
.summary-total { display: flex; justify-content: space-between; font-size: 1rem; font-weight: 800; padding-top: 1rem; margin-top: .5rem; border-top: 2px solid var(--border); }
.summary-total span:last-child { color: var(--brand); }

/* ─── CHECKOUT ──────────────────────────────────────────── */
.checkout-layout { display: grid; grid-template-columns: 1fr 340px; gap: 2rem; align-items: start; }
.checkout-form-section { background: var(--white); border: 1.5px solid var(--border); border-radius: 18px; padding: 1.5rem; margin-bottom: 1rem; }
.checkout-section-title { font-size: .95rem; font-weight: 800; margin-bottom: 1.25rem; display: flex; align-items: center; gap: .75rem; }
.checkout-section-num { width: 24px; height: 24px; background: var(--brand); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 800; flex-shrink: 0; }
.payment-methods { display: flex; gap: .75rem; margin-bottom: 1.25rem; }
.payment-method { flex: 1; padding: 1rem; border: 1.5px solid var(--border); border-radius: 12px; cursor: pointer; text-align: center; font-size: .8rem; font-weight: 600; transition: border-color .2s, background .2s, color .2s; color: var(--text-muted); }
.payment-method.selected { border-color: var(--brand); background: var(--brand-light); color: var(--brand); }
.payment-method svg { width: 20px; height: 20px; margin: 0 auto .5rem; }
.card-brands { display: flex; gap: .4rem; margin-top: .75rem; }
.card-brand  { height: 20px; background: var(--gray-100); border: 1px solid var(--border); border-radius: 4px; padding: 0 .5rem; display: flex; align-items: center; font-size: .68rem; font-weight: 700; color: var(--gray-500); }

/* ─── ORDER SUCCESS ─────────────────────────────────────── */
.success-page { min-height: calc(100vh - var(--nav-h)); display: flex; align-items: center; justify-content: center; padding: 2rem; }
.success-card { max-width: 500px; width: 100%; text-align: center; }
.success-icon { width: 72px; height: 72px; background: var(--success-light); border: 2px solid var(--success-border); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; }
.success-icon svg { width: 36px; height: 36px; color: var(--success); }
.order-details { background: var(--gray-50); border: 1px solid var(--border); border-radius: 16px; padding: 1.25rem; margin: 2rem 0; text-align: left; }
.order-detail-row { display: flex; justify-content: space-between; font-size: .86rem; padding: .5rem 0; color: var(--text-muted); }
.order-detail-row strong { color: var(--text); }

/* ─── ACCOUNT ───────────────────────────────────────────── */
.account-layout { display: grid; grid-template-columns: 220px 1fr; gap: 2rem; align-items: start; }
.account-nav { background: var(--white); border: 1.5px solid var(--border); border-radius: 18px; padding: .75rem; position: sticky; top: calc(var(--nav-h) + 1.5rem); }
.account-nav-item { display: flex; align-items: center; gap: .75rem; padding: .7rem 1rem; border-radius: 12px; font-size: .85rem; font-weight: 500; color: var(--gray-600); transition: background .15s, color .15s; cursor: pointer; border: none; background: none; width: 100%; text-align: left; }
.account-nav-item:hover, .account-nav-item.active { background: var(--brand-light); color: var(--brand); }
.account-nav-item svg { width: 15px; height: 15px; flex-shrink: 0; }
.account-panel { display: none; }
.account-panel.active { display: block; }
.account-section { background: var(--white); border: 1.5px solid var(--border); border-radius: 18px; padding: 1.5rem; margin-bottom: 1rem; }
.account-section-title { font-size: .95rem; font-weight: 800; margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }

/* ─── SUPPORT ───────────────────────────────────────────── */
.support-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; }
.support-card { background: var(--white); border: 1.5px solid var(--border); border-radius: 18px; padding: 1.5rem; text-align: center; transition: transform .3s, box-shadow .3s, border-color .3s; cursor: pointer; }
.support-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--brand); }
.support-icon { width: 52px; height: 52px; background: var(--icon-bg); color: var(--icon-color); border-radius: 16px; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; transition: background .2s, color .2s; }
.support-icon svg { width: 24px; height: 24px; stroke-width: 1.8; }
.support-card:hover .support-icon { background: var(--brand); color: white; }
.support-card h3 { margin-bottom: .5rem; font-size: .95rem; }
.support-card p  { font-size: .83rem; }

/* ─── FAQ ACCORDION ─────────────────────────────────────── */
.faq-list { max-width: 720px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q {
  width: 100%; text-align: left;
  padding: 1.25rem 0;
  background: none; border: none; cursor: pointer;
  font-size: .95rem; font-weight: 600;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  color: var(--text); transition: color .15s;
}
.faq-q:hover { color: var(--brand); }
.faq-q svg { flex-shrink: 0; transition: transform .35s; color: var(--text-soft); }
.faq-item.open .faq-q svg { transform: rotate(180deg); color: var(--brand); }
.faq-a { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .4s, opacity .3s; }
.faq-a p { padding-bottom: 1.25rem; font-size: .9rem; line-height: 1.7; color: var(--text-muted); }

/* ─── SCROLL REVEAL ─────────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s, transform .6s;
}
[data-reveal].revealed { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: .1s; }
[data-reveal-delay="2"] { transition-delay: .2s; }
[data-reveal-delay="3"] { transition-delay: .3s; }
[data-reveal-delay="4"] { transition-delay: .4s; }

/* ─── ANIMATIONS ────────────────────────────────────────── */
@keyframes fadeUp   { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }
@keyframes fadeIn   { from{opacity:0} to{opacity:1} }

/* ─── RESPONSIVE ────────────────────────────────────────── */
@media (max-width: 900px) {
  .cart-layout, .checkout-layout, .account-layout { grid-template-columns: 1fr; }
  .account-nav { position: static; }
  .payment-methods { flex-wrap: wrap; }
}
@media (max-width: 768px) {
  .hero { padding: 4.5rem 1.25rem 3.5rem; }
  .hstat { padding: 0 1.5rem; }
  .form-row { grid-template-columns: 1fr; }
}

/* ── Datacenter Map ── */
.dc-map-wrap {
  background: #070d1a;
  border-radius: 20px;
  overflow: hidden;
  border: 1.5px solid rgba(177,70,248,.2);
}
.dc-map-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .875rem 1.25rem;
  font-size: .78rem;
  font-weight: 700;
  color: rgba(255,255,255,.5);
  text-transform: uppercase;
  letter-spacing: .08em;
  border-bottom: 1px solid rgba(177,70,248,.12);
}
.dc-map {
  width: 100%;
  height: 420px;
  position: relative;
}
.dc-map svg {
  width: 100%;
  height: 100%;
  display: block;
}
.dc-map-legend {
  display: flex;
  gap: 1.5rem;
  padding: .75rem 1.25rem;
  border-top: 1px solid rgba(177,70,248,.12);
}
.dc-legend-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .75rem;
  color: rgba(255,255,255,.4);
}
.dc-legend-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(177,70,248,.3);
  border: 1px solid rgba(177,70,248,.4);
}
.dc-legend-dot--active {
  background: #b146f8;
  box-shadow: 0 0 6px #b146f8;
}

/* ── Features Grid v2 ── */
.features-section { background: var(--bg); }
.features-grid-v2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
@media (max-width: 900px) { .features-grid-v2 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .features-grid-v2 { grid-template-columns: 1fr; } }

.fcard {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 18px;
  padding: 1.5rem 1.375rem;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.fcard:hover {
  border-color: var(--brand);
  box-shadow: 0 8px 32px rgba(103,61,230,.1);
  transform: translateY(-2px);
}
.fcard-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  flex-shrink: 0;
}
.fcard-icon--yellow { background: rgba(234,179,8,.12);  color: #ca8a04; }
.fcard-icon--green  { background: rgba(21,128,61,.12);  color: #15803d; }
.fcard-icon--blue   { background: rgba(37,99,235,.12);  color: #2563eb; }
.fcard-icon--red    { background: rgba(220,38,38,.1);   color: #dc2626; }
.fcard-icon--purple { background: rgba(124,58,237,.12); color: #7c3aed; }
.fcard-icon--teal   { background: rgba(13,148,136,.12); color: #0d9488; }
.fcard-title { font-size: 1rem; font-weight: 700; margin-bottom: .375rem; color: var(--text); }
.fcard-desc  { font-size: .85rem; line-height: 1.65; color: var(--text-muted); margin: 0; }

/* ── Domain Inklusive Grid ── */
.domain-incl-section { background: var(--bg); }
.domain-incl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 900px) { .domain-incl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .domain-incl-grid { grid-template-columns: 1fr; } }

.domain-incl-card {
  display: flex;
  gap: .875rem;
  align-items: flex-start;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 1.25rem;
  transition: border-color .2s, box-shadow .2s;
}
.domain-incl-card:hover {
  border-color: var(--brand);
  box-shadow: 0 4px 20px rgba(103,61,230,.1);
}
.dic-icon {
  width: 46px; height: 46px; flex-shrink: 0;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}
.dic-icon--purple { background: rgba(124,58,237,.12); color: #7c3aed; }
.dic-icon--blue   { background: rgba(37,99,235,.12);  color: #2563eb; }
.dic-icon--green  { background: rgba(21,128,61,.12);  color: #15803d; }
.dic-icon--teal   { background: rgba(13,148,136,.12); color: #0d9488; }
.dic-icon--orange { background: rgba(234,88,12,.12);  color: #ea580c; }
.dic-icon--red    { background: rgba(220,38,38,.1);   color: #dc2626; }
.dic-title { font-weight: 700; font-size: .95rem; color: var(--text); margin-bottom: .15rem; }
.dic-check { font-size: .72rem; font-weight: 700; color: #15803d; margin-bottom: .35rem; }
.dic-desc  { font-size: .82rem; line-height: 1.6; color: var(--text-muted); margin: 0; }

/* Dark mode badge fixes */
[data-theme=dark] .badge-brand{background:rgba(177,70,248,.18);color:#c4a8ff}
[data-theme=dark] .badge-success{background:rgba(74,222,128,.12);color:#4ade80;border-color:rgba(74,222,128,.25)}
[data-theme=dark] .badge-error{background:rgba(239,68,68,.12);color:#f87171;border-color:rgba(239,68,68,.25)}

/* ─── WTS UNIFIED TAB DESIGN ─────────────────────────────────────
   Nutzung:
   <div class="wts-tabs">
     <button class="wts-tab active">Tab 1</button>
     <button class="wts-tab">Tab 2</button>
   </div>
   ─────────────────────────────────────────────────────────────── */
.wts-tabs {
  display: flex;
  gap: .25rem;
  margin-bottom: 1.25rem;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: .3rem;
  flex-wrap: wrap;
}
.wts-tab {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .875rem;
  border: none;
  background: none;
  border-radius: 10px;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-muted);
  transition: background .15s, color .15s, box-shadow .15s;
  white-space: nowrap;
}
.wts-tab:hover { color: var(--text); background: var(--bg); }
.wts-tab.active {
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 1px 4px rgba(0,0,0,.10);
}
.wts-tab svg { flex-shrink: 0; }