/* variants-software.css — 6 structurally distinct software sites */

:root { --sidenav-w: 240px; }

/* ═══ 01 · AUERLIA IT — Utility ticker bar above nav ═══ */
[data-variant="auerlia-it"] .nav { border-bottom: 0; }
[data-variant="auerlia-it"] .nav::before {
  content: "B2B · IT-DISTRIBUTOREN · SYSTEMHÄUSER · RESELLER · AUDIT-SICHER · 24 H ANGEBOT";
  display: block;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  background: #0F172A;
  color: #94A3B8;
  padding: 8px 16px;
  overflow: hidden; white-space: nowrap;
}
[data-variant="auerlia-it"] .nav-inner { border-bottom: 1px solid var(--border); }
[data-variant="auerlia-it"] .hero {
  background:
    radial-gradient(80% 60% at 20% 0%, rgba(37, 99, 235, 0.08), transparent 70%),
    linear-gradient(rgba(15, 23, 42, 0.04) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(15, 23, 42, 0.04) 1px, transparent 1px) 0 0 / 48px 48px;
}
[data-variant="auerlia-it"] .value-item .num {
  font-family: var(--font-mono);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  letter-spacing: -0.04em;
}
[data-variant="auerlia-it"] .tile { border-radius: 4px; }
[data-variant="auerlia-it"] .tile-icon { border-radius: 4px; background: var(--primary); color: var(--on-primary); }

/* ═══ 02 · CIPHER TRADE — Left side-nav (desktop) ═══ */
@media (min-width: 1000px) {
  [data-variant="cipher-trade"] { padding-left: var(--sidenav-w); }
  [data-variant="cipher-trade"] .nav {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: var(--sidenav-w);
    border-right: 1px solid var(--border);
    border-bottom: 0;
    background: #FFFFFF;
    z-index: 60;
  }
  [data-variant="cipher-trade"] .nav-inner {
    flex-direction: column;
    align-items: stretch; justify-content: flex-start;
    padding: 32px 28px; height: 100%; gap: 36px;
    max-width: none; min-height: 0;
  }
  [data-variant="cipher-trade"] .nav-links {
    flex-direction: column; align-items: flex-start;
    gap: 14px; font-size: 15px; width: 100%;
  }
  [data-variant="cipher-trade"] .nav-links a[aria-current="page"]::after {
    bottom: auto; top: 0; left: -28px;
    height: 100%; width: 3px; border-radius: 0;
  }
  [data-variant="cipher-trade"] .nav-aside {
    flex-direction: column; align-items: flex-start;
    gap: 12px; margin-top: auto;
  }
  [data-variant="cipher-trade"] .nav-toggle { display: none; }
}
[data-variant="cipher-trade"] .hero {
  background:
    repeating-linear-gradient(135deg, transparent 0 22px, rgba(37, 99, 235, 0.04) 22px 23px),
    radial-gradient(60% 50% at 85% 0%, rgba(37, 99, 235, 0.06), transparent 70%);
}
[data-variant="cipher-trade"] .hero h1 em {
  background: linear-gradient(90deg, #2563EB 0%, #0EA5E9 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
[data-variant="cipher-trade"] .tile-icon {
  background: transparent;
  border: 1.5px solid var(--primary);
  color: var(--primary);
  border-radius: 4px;
}

/* ═══ 03 · FERRUM LOGIC — Brutalist, dark nav, oversized type ═══ */
[data-variant="ferrum-logic"] {
  --btn-radius: 0px; --card-radius: 0px; --input-radius: 0px;
}
[data-variant="ferrum-logic"] .nav {
  background: #0F172A; border-bottom: 0;
  --nav-bg: #0F172A; --nav-blur: none;
  backdrop-filter: none;
}
[data-variant="ferrum-logic"] .nav .brand,
[data-variant="ferrum-logic"] .nav .nav-links a,
[data-variant="ferrum-logic"] .nav .lang-switch a { color: #F8FAFC; }
[data-variant="ferrum-logic"] .nav .nav-links a:hover { color: #60A5FA; }
[data-variant="ferrum-logic"] .lang-switch { border-color: rgba(255,255,255,0.2); }
[data-variant="ferrum-logic"] .lang-switch a[aria-current="true"] { background: #2563EB; color: #FFFFFF; }
[data-variant="ferrum-logic"] .hero {
  background: #F1F5F9;
  border-bottom: 4px solid #0F172A;
}
[data-variant="ferrum-logic"] .hero h1 {
  font-size: clamp(2.6rem, 8vw, 6rem);
  letter-spacing: -0.045em; line-height: 0.98; font-weight: 700;
}
[data-variant="ferrum-logic"] .hero-eyebrow,
[data-variant="ferrum-logic"] .eyebrow {
  display: inline-block;
  background: #0F172A; color: #FFFFFF;
  padding: 5px 12px; letter-spacing: 0.16em;
}
[data-variant="ferrum-logic"] .value-item .num {
  font-size: clamp(3.2rem, 5.5vw, 4.5rem); font-weight: 700;
}
[data-variant="ferrum-logic"] .tile {
  border: 2px solid #0F172A; background: #FFFFFF;
}
[data-variant="ferrum-logic"] .tile:hover { background: #0F172A; color: #FFFFFF; }
[data-variant="ferrum-logic"] .tile:hover h3,
[data-variant="ferrum-logic"] .tile:hover p { color: #FFFFFF; }
[data-variant="ferrum-logic"] .tile-icon { background: #0F172A; color: var(--primary); border-radius: 0; }
[data-variant="ferrum-logic"] .btn-primary { border-radius: 0; }

/* ═══ 04 · HANSEATIC PIXEL — Floating pill nav ═══ */
[data-variant="hanseatic-pixel"] {
  --hero-size: 5rem;
  --hero-track: -0.035em;
}
[data-variant="hanseatic-pixel"] .nav {
  position: sticky; top: 16px;
  background: transparent;
  border-bottom: 0;
  padding: 0 20px;
  backdrop-filter: none;
}
[data-variant="hanseatic-pixel"] .nav-inner {
  max-width: 980px; margin: 0 auto;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 24px;
  min-height: 56px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 12px 32px -16px rgba(15, 23, 42, 0.16);
}
[data-variant="hanseatic-pixel"] .hero { padding-block: clamp(120px, 16vw, 200px); }
[data-variant="hanseatic-pixel"] .hero-eyebrow {
  font-style: italic; letter-spacing: 0.12em;
  text-transform: none;
  font-family: var(--font-display);
  color: var(--fg-muted); font-size: 14px;
}
[data-variant="hanseatic-pixel"] .hero h1 em { font-style: italic; color: var(--primary); }
[data-variant="hanseatic-pixel"] .tile {
  background: transparent; border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  padding: 32px 0 24px 0;
}
[data-variant="hanseatic-pixel"] .tile-icon {
  background: transparent; color: var(--primary);
  margin-bottom: 24px;
}

/* ═══ 05 · LUMEON CODE — Centered hero, gradient H1 ═══ */
[data-variant="lumeon-code"] .nav { backdrop-filter: none; background: rgba(255,255,255,0.96); }
[data-variant="lumeon-code"] .hero {
  text-align: center;
  background:
    radial-gradient(50% 70% at 50% 30%, rgba(37, 99, 235, 0.12), transparent 60%),
    radial-gradient(40% 60% at 80% 80%, rgba(14, 165, 233, 0.07), transparent 60%);
}
[data-variant="lumeon-code"] .hero .container > * { margin-left: auto; margin-right: auto; }
[data-variant="lumeon-code"] .hero .hero-cta-row { justify-content: center; }
[data-variant="lumeon-code"] .hero h1 {
  max-width: 24ch;
  background: linear-gradient(180deg, var(--fg) 0%, color-mix(in oklab, var(--fg) 60%, var(--primary)) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
[data-variant="lumeon-code"] .hero-sub { max-width: 56ch; }
[data-variant="lumeon-code"] .tile { transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease; }
[data-variant="lumeon-code"] .tile:hover {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08), 0 24px 48px -24px rgba(37, 99, 235, 0.35);
  transform: translateY(-3px);
}
[data-variant="lumeon-code"] .tile-icon {
  background: radial-gradient(circle at 30% 30%, rgba(37, 99, 235, 0.20), rgba(37, 99, 235, 0.08));
  color: var(--primary);
}

/* ═══ 06 · POLARIS BYTES — Terminal/console motif ═══ */
[data-variant="polaris-bytes"] .nav .brand::before {
  content: "[ "; color: var(--primary); font-family: var(--font-mono); margin-right: 2px;
}
[data-variant="polaris-bytes"] .nav .brand::after {
  content: " ]"; color: var(--primary); font-family: var(--font-mono); margin-left: 2px;
}
[data-variant="polaris-bytes"] .nav-links a { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em; }
[data-variant="polaris-bytes"] .hero { background: radial-gradient(60% 60% at 100% 0%, rgba(37, 99, 235, 0.06), transparent 70%); }
[data-variant="polaris-bytes"] .hero-eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
}
[data-variant="polaris-bytes"] .hero-eyebrow::before {
  content: "$ "; color: var(--primary); margin-right: 2px;
}
[data-variant="polaris-bytes"] .value-item .num {
  font-family: var(--font-mono); font-weight: 500; letter-spacing: 0;
}
[data-variant="polaris-bytes"] .tile {
  background: #FFFFFF;
  border-left: 3px solid var(--primary);
  border-radius: 0 12px 12px 0;
}
[data-variant="polaris-bytes"] .tile h3 {
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: -0.005em;
}
[data-variant="polaris-bytes"] .section-tinted {
  background: #0F172A; color: #F8FAFC;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 32px 32px;
}
[data-variant="polaris-bytes"] .section-tinted .section-head h2,
[data-variant="polaris-bytes"] .section-tinted .value-item h3,
[data-variant="polaris-bytes"] .section-tinted .tile h3,
[data-variant="polaris-bytes"] .section-tinted .tile p { color: #F8FAFC; }
[data-variant="polaris-bytes"] .section-tinted .value-item p,
[data-variant="polaris-bytes"] .section-tinted .section-head p { color: #CBD5E1; }
[data-variant="polaris-bytes"] .section-tinted .eyebrow { color: #60A5FA; }
[data-variant="polaris-bytes"] .section-tinted .tile { background: #1E293B; border-color: #334155; border-left-color: var(--primary); }

/* Polaris Bytes — make about-section on dark tint legible (text + ghost button) */
[data-variant="polaris-bytes"] .section-tinted.about-section .about-text p.lede { color: #F8FAFC; }
[data-variant="polaris-bytes"] .section-tinted.about-section .about-text p { color: #CBD5E1; }
[data-variant="polaris-bytes"] .section-tinted.about-section .about-meta { border-left-color: #334155; }
[data-variant="polaris-bytes"] .section-tinted.about-section .about-meta h3 { color: #94A3B8; }
[data-variant="polaris-bytes"] .section-tinted.about-section .about-meta p { color: #F8FAFC; }
[data-variant="polaris-bytes"] .section-tinted .btn-ghost {
  color: #F8FAFC; border-color: rgba(248, 250, 252, 0.32);
}
[data-variant="polaris-bytes"] .section-tinted .btn-ghost:hover { border-color: #F8FAFC; background: rgba(255,255,255,0.04); }
[data-variant="polaris-bytes"] .section-tinted .legal-timeline li::before { color: #64748B; }
[data-variant="polaris-bytes"] .section-tinted .legal-timeline li { background: #1E293B; border-color: #334155; }
[data-variant="polaris-bytes"] .section-tinted .legal-timeline h3 { color: #F8FAFC; }
[data-variant="polaris-bytes"] .section-tinted .legal-timeline p { color: #CBD5E1; }
[data-variant="polaris-bytes"] .section-tinted .legal-timeline .legal-court { color: #94A3B8; }

/* ═══════════════════════════════════════════════════════════════
   LANG-SWITCH — visually distinct DE/EN treatment per IT variant
   ═══════════════════════════════════════════════════════════════ */

/* 01 · AUERLIA — square-bracket tab style */
[data-variant="auerlia-it"] .lang-switch {
  border: 0; border-radius: 0; gap: 2px; overflow: visible;
}
[data-variant="auerlia-it"] .lang-switch a {
  padding: 5px 4px; color: var(--fg-subtle);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
}
[data-variant="auerlia-it"] .lang-switch a::before { content: "["; color: var(--border-strong); margin-right: 2px; }
[data-variant="auerlia-it"] .lang-switch a::after  { content: "]"; color: var(--border-strong); margin-left: 2px; }
[data-variant="auerlia-it"] .lang-switch a[aria-current="true"] {
  background: transparent; color: var(--primary);
}
[data-variant="auerlia-it"] .lang-switch a[aria-current="true"]::before,
[data-variant="auerlia-it"] .lang-switch a[aria-current="true"]::after { color: var(--primary); }

/* 02 · CIPHER — minimal underline tabs (matches side-nav rail) */
[data-variant="cipher-trade"] .lang-switch {
  border: 0; border-radius: 0; background: transparent; gap: 14px; padding: 0;
}
[data-variant="cipher-trade"] .lang-switch a {
  padding: 4px 0; border-radius: 0;
  color: var(--fg-subtle); border-bottom: 1.5px solid transparent;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em;
}
[data-variant="cipher-trade"] .lang-switch a[aria-current="true"] {
  background: transparent; color: var(--fg); border-bottom-color: var(--primary);
}

/* 03 · FERRUM — brutalist hard square, white on black */
[data-variant="ferrum-logic"] .lang-switch {
  border: 1.5px solid #FFFFFF; border-radius: 0; gap: 0;
}
[data-variant="ferrum-logic"] .lang-switch a {
  border-radius: 0; padding: 5px 11px;
  font-family: var(--font-mono); font-size: 12px;
  font-weight: 600; letter-spacing: 0.1em;
}
[data-variant="ferrum-logic"] .lang-switch a[aria-current="true"] {
  background: #FFFFFF; color: #0F172A;
}

/* 04 · HANSEATIC — italic display text with slash divider */
[data-variant="hanseatic-pixel"] .lang-switch {
  border: 0; border-radius: 0; background: transparent; gap: 0;
  font-family: var(--font-display); font-style: italic;
  font-size: 14px; letter-spacing: -0.005em;
}
[data-variant="hanseatic-pixel"] .lang-switch a {
  padding: 4px 8px; border-radius: 0; color: var(--fg-subtle);
}
[data-variant="hanseatic-pixel"] .lang-switch a + a {
  border-left: 1px solid var(--border);
}
[data-variant="hanseatic-pixel"] .lang-switch a[aria-current="true"] {
  background: transparent; color: var(--fg);
}

/* 05 · LUMEON — soft chip with dark active pill */
[data-variant="lumeon-code"] .lang-switch {
  border-radius: 999px; border: 1px solid var(--border);
  padding: 3px; background: #FFFFFF;
}
[data-variant="lumeon-code"] .lang-switch a {
  padding: 5px 12px; border-radius: 999px;
  font-family: var(--font-body); font-size: 12px;
  font-weight: 500; letter-spacing: 0.02em;
  color: var(--fg-muted);
}
[data-variant="lumeon-code"] .lang-switch a[aria-current="true"] {
  background: var(--fg); color: #FFFFFF;
}

/* 06 · POLARIS — terminal-prompt monospace, no chrome */
[data-variant="polaris-bytes"] .lang-switch {
  border: 0; border-radius: 0; background: transparent; gap: 0;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0;
}
[data-variant="polaris-bytes"] .lang-switch a {
  padding: 4px 6px; color: var(--fg-subtle);
}
[data-variant="polaris-bytes"] .lang-switch a + a::before {
  content: "/"; color: var(--border-strong); margin: 0 4px 0 0;
}
[data-variant="polaris-bytes"] .lang-switch a[aria-current="true"] {
  background: transparent; color: var(--primary); font-weight: 500;
}
[data-variant="polaris-bytes"] .lang-switch a[aria-current="true"]::after {
  content: "_"; color: var(--primary); margin-left: 1px;
  animation: caret 1.1s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }


/* Ferrum Logic mobile menu — keep dark nav scheme on small screens */
@media (max-width: 760px) {
  [data-variant="ferrum-logic"] .nav-links {
    background-color: #0F172A;
    background: #0F172A;
  }
  [data-variant="ferrum-logic"] .nav-links a {
    color: #F8FAFC;
    border-bottom-color: rgba(255, 255, 255, 0.12);
  }
  [data-variant="ferrum-logic"] .nav:has(.nav-links.is-open) {
    background: #0F172A !important;
  }
}