/* atlas-brand.css — Design-Tokens + Brand-Lockup fuer alle Atlas-Seiten
 * Wird vor atlas-workspace.css und atlas-legal.css geladen, damit Tokens verfuegbar sind.
 *
 * Primary: Atlas-Blau #9fc8ff (konsistent mit Map-Branding, dark-theme-tauglich)
 */

/* ===== Inter (self-hosted, DSGVO — kein externes Font-CDN) =====
 * Variable Font (wght 100-900), latin + latin-ext (deutsche Umlaute ä/ö/ü/ß im latin-Bereich).
 * Stack-Reihenfolge (User-Entscheidung 2026-07-08): System-Font zuerst (Apple = SF Pro, nativer Look),
 * Inter nur fuer Nicht-Apple-OS (Windows/Linux) als konsistenter self-hosted Fallback statt Segoe/Roboto.
 * font-display:swap → kein unsichtbarer Text. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/vendor/fonts/inter-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/vendor/fonts/inter-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Surfaces */
  --atl-bg:           #0b1220;
  --atl-bg-soft:      #0f1729;
  --atl-surface:      #141d33;
  --atl-surface-2:    rgba(20,28,42,.94);
  --atl-surface-3:    rgba(15,23,42,.98);

  /* Text */
  --atl-text:         #cdd9ec;
  --atl-text-strong:  #ffffff;
  --atl-text-soft:    #9fb3d1;
  --atl-text-mute:    #7d8aa2;
  /* dim war #5b6b85 = 3,47:1 auf --atl-bg (WCAG-AA-Fail). Angehoben auf 4,91:1;
     bleibt bewusst dunkler als --atl-text-mute (5,38:1), Hierarchie soft>mute>dim erhalten. */
  --atl-text-dim:     #77839c;

  /* Brand — Akzent-Rollen (Styleguide 2026-07-10): primary = Interaktion ·
     accent = Premium/Highlight · tertiary = Live-Daten/Bewegung (Slider, HUD, Entdecken-Tour) */
  --atl-primary:      #9fc8ff;
  --atl-primary-hover:#b9d8ff;
  --atl-primary-mid:  #4a90e2;
  --atl-primary-deep: #2d6cb8;
  --atl-primary-soft: rgba(74,144,226,.18);
  --atl-primary-glow: rgba(159,200,255,.25);
  --atl-tertiary:     #22d3ee;
  --atl-tertiary-soft:rgba(34,211,238,.16);

  /* Accents (sparingly) */
  --atl-accent:       #ffdc50;
  --atl-success:      #7fdb9c;
  --atl-warn:         #ffc080;
  --atl-error:        #ff9c9c;

  /* Surfaces — semantische Ergänzung (Styleguide 2026-07-10) */
  --atl-surface-low:  #151b2a;
  --atl-surface-bright:#323949;
  --atl-glass:        rgba(12,19,33,.85);

  /* Borders — bewusst leiser: Hierarchie über Elevation statt Linien (Styleguide 2026-07-10) */
  --atl-border:       rgba(159,200,255,.10);
  --atl-border-mid:   rgba(159,200,255,.28);
  --atl-border-bright:rgba(159,200,255,.55);

  /* Shape */
  --atl-radius-sm:    4px;
  --atl-radius:       6px;
  --atl-radius-lg:    10px;
  --atl-radius-xl:    14px;

  /* Shadow */
  --atl-shadow:       0 4px 16px rgba(0,0,0,.4);
  --atl-shadow-lg:    0 8px 32px rgba(0,0,0,.55);
  --atl-shadow-xl:    0 16px 48px rgba(0,0,0,.6);

  /* Icon-System: Lucide-Sprite /atlas-icons.svg (self-hosted, ISC) — Styleguide 2026-07-10 */
  --atl-icon-size:    16px;

  /* Typography (Inter-Stack fuer Container-Seiten, system-stack fuer Tools) */
  --atl-font:         -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
  --atl-font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;

  /* Spacing-Skala */
  --atl-sp-1: 4px;
  --atl-sp-2: 8px;
  --atl-sp-3: 12px;
  --atl-sp-4: 16px;
  --atl-sp-5: 20px;
  --atl-sp-6: 24px;
  --atl-sp-8: 32px;
  --atl-sp-10: 40px;
  --atl-sp-12: 48px;
  --atl-sp-16: 64px;
  --atl-sp-20: 80px;
}

/* ===== Globale Fokus-Ringe (A11y 2.4.7 / 2.4.11) =====
 * Sichtbarer Keyboard-Fokus fuer ALLE interaktiven Elemente (Nav, Buttons, Toolbar,
 * Picker, Sidebar, Links, Form-Controls). :focus-visible zeigt den Ring nur bei
 * Tastatur-Fokus, nicht bei Maus-Klick. Gilt geteilt fuer alle ~418 Seiten. */
:focus-visible {
  outline: 2px solid var(--atl-primary);
  outline-offset: 2px;
  border-radius: 3px;
}
/* Alte UA-Regel unterdruecken, falls ein Element noch :focus statt :focus-visible matcht. */
:focus:not(:focus-visible) { outline: none; }

/* ===== Brand-Lockup ===== */
.atl-brand { display:inline-flex; align-items:center;
  text-decoration:none; cursor:pointer; transition: opacity .12s; }
.atl-brand:hover { opacity:.85; text-decoration:none; }

/* SVG-Wordmark "ATLAS / KaaTai" Stacked — portable, System-Stack, kein Webfont-Load */
.atl-logo { display:block; height:32px; width:auto; user-select:none; }
.atl-brand.atl-brand-sm .atl-logo { height:28px; }
.atl-brand.atl-brand-lg .atl-logo { height:42px; }

/* ===== Buttons (Atlas-Design-System) ===== */
.atl-btn { display:inline-flex; align-items:center; gap:7px;
  padding:10px 18px; font-family:inherit; font-size:14px; font-weight:600;
  border-radius:var(--atl-radius); cursor:pointer;
  border:1px solid transparent; text-decoration:none;
  transition: background .12s, color .12s, border-color .12s, transform .08s;
  line-height:1; }
.atl-btn:active { transform: translateY(1px); }
.atl-btn[hidden] { display:none; }

.atl-btn-primary { background:var(--atl-primary); color:#0b1220;
  border-color:var(--atl-primary); font-weight:700;
  box-shadow: 0 2px 8px rgba(159,200,255,.18); }
.atl-btn-primary:hover { background:#bedaff; color:#0b1220;
  box-shadow: 0 4px 16px rgba(159,200,255,.32); text-decoration:none; }

.atl-btn-secondary { background:transparent; color:var(--atl-primary);
  border-color:var(--atl-border-bright); }
.atl-btn-secondary:hover { background:var(--atl-primary-soft); color:var(--atl-text-strong);
  border-color:var(--atl-primary); text-decoration:none; }

.atl-btn-ghost { background:transparent; color:var(--atl-text-soft); border-color:var(--atl-border); }
.atl-btn-ghost:hover { color:var(--atl-text-strong); border-color:var(--atl-border-mid);
  background:rgba(255,255,255,.03); text-decoration:none; }

.atl-btn-sm { padding:12px; font-size:12px; }
.atl-btn-lg { padding:14px 26px; font-size:16px; }

/* ===== Pricing-Karten (geteilte Klasse, in preise.html + Startseite) ===== */
.atl-tier { background:var(--atl-surface); border:1px solid var(--atl-border);
  border-radius:var(--atl-radius-lg); padding:24px 22px;
  display:flex; flex-direction:column; gap:14px; position:relative;
  transition: border-color .15s, transform .15s; }
.atl-tier:hover { transform:translateY(-2px); }
.atl-tier.atl-tier-featured { box-shadow: 0 0 32px var(--atl-primary-glow); }
/* Glow-Border und Hover-Border-Color sollen koexistieren — Glow-Border bleibt transparent damit conic-gradient sichtbar bleibt */
.atl-glow:hover { border-color: transparent; }
.atl-tier-badge { position:absolute; top:-10px; left:50%; transform:translateX(-50%);
  background:var(--atl-primary); color:#0b1220; font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.5px; padding:3px 10px;
  border-radius:10px; white-space:nowrap; }
.atl-tier-name { font-size:13px; color:var(--atl-text-soft); font-weight:600;
  text-transform:uppercase; letter-spacing:0.5px; }
.atl-tier-price { font-size:28px; color:var(--atl-text-strong); font-weight:700;
  line-height:1.1; }
.atl-tier-price .atl-tier-period { font-size:13px; color:var(--atl-text-mute);
  font-weight:400; margin-left:4px; }
.atl-tier-tagline { font-size:13px; color:var(--atl-text-soft); line-height:1.5; }
.atl-tier-features { list-style:none; padding:0; margin:8px 0 0;
  display:flex; flex-direction:column; gap:6px; flex:1; }
.atl-tier-features li { font-size:13px; color:var(--atl-text); line-height:1.5;
  padding-left:18px; position:relative; }
.atl-tier-features li::before { content:'✓'; position:absolute; left:0;
  color:var(--atl-primary); font-weight:700; }
.atl-tier-features li.atl-tier-feature-mute { color:var(--atl-text-mute); }
.atl-tier-features li.atl-tier-feature-mute::before { content:'—'; color:var(--atl-text-dim); }
.atl-tier-cta { margin-top:8px; }

/* ===== Sektion-Pattern fuer Container-Seiten =====
 * Atlas-Container-Standard: 1200px max-width. Ueberall identisch — keine Treppen-Optik.
 * Inner-Wrapper-Pattern: laenger Fliesstext mit .atl-readable einwickeln (720px), Outer bleibt 1200px.
 */
.atl-section { padding: var(--atl-sp-16) var(--atl-sp-6); }
.atl-section-alt { background:var(--atl-bg-soft); }
/* OUTER-Container: Card-Grids + Stat-Stripes + FAQ-Sektionen — alle 1200px breit, Box-Kanten fluchten.
 * FAQs wurden 2026-05-26 von 720 auf 1200 umgestellt (User: Standard-Content-Breite). */
.atl-container,
.atl-pricing-grid,
.atl-tier-detail .atl-container,
.atl-stat-inner,
.atl-tools,
.atl-bl-grid,
.atl-uc-grid,
.atl-trust,
.atl-faq-snippet,
.atl-pricing-faq { max-width:1200px; margin-left:auto; margin-right:auto; }

/* INNER-Reading-Width: Quote-Boxen + explizite Lesetexte — 720px, im 1200px-Outer zentriert. */
.atl-readable,
.atl-quote { max-width:720px; margin-left:auto; margin-right:auto; }

/* Legacy-Alias — bewusst auf gleiches Mass wie .atl-readable. */
.atl-container-narrow { max-width:720px; margin:0 auto; }

/* ===== Glow-Border-Animation (wiederverwendbare Helper-Klasse) =====
 * Conic-gradient als Border, faehrt von 0..360deg via @property-Animation.
 * Cards mit Klasse .atl-glow erben die Mechanik; pro Komponente werden
 *   --atl-glow-accent (Farbe), --atl-glow-delay (Versatz), --atl-glow-cycle (Dauer) ueberschrieben.
 * Konzept iMac Runde 2: Cycle 6s, Peak 60-120deg, Border 1.5px — deutlich sichtbarer als Runde 1.
 */
@property --atl-glow-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* Doubled selector .atl-glow.atl-glow hebt Spezifitaet damit Container-eigene border-Shorthands nicht ueberschreiben. */
.atl-glow.atl-glow {
  position: relative;
  border: 2px solid transparent;
  background:
    linear-gradient(var(--atl-surface), var(--atl-surface)) padding-box,
    conic-gradient(
      from var(--atl-glow-angle),
      transparent 0deg,
      var(--atl-glow-accent, rgba(255,255,255,.6)) 60deg,
      var(--atl-glow-accent, rgba(255,255,255,.6)) 120deg,
      transparent 180deg,
      transparent 360deg
    ) border-box;
  /* Subtiler Box-Shadow als Kontrast-Verstaerker gegen dunklen Background */
  box-shadow: 0 0 0 1px rgba(255,255,255,.04),
              0 8px 24px rgba(0,0,0,.3);
  animation: atl-glow-rotate var(--atl-glow-cycle, 6s) linear infinite;
  animation-delay: var(--atl-glow-delay, 0s);
}

/* Glow-Color-Variants — Atlas-Standard ist Weiss (.atl-glow ohne Modifier).
 * Cyan fuer Atlas-Markierung, Purple/Amber/Red als Marketing-Akzente. */
.atl-glow-white  { --atl-glow-accent: rgba(255,255,255,.6); }
.atl-glow-cyan   { --atl-glow-accent: #9fc8ff; }
.atl-glow-purple { --atl-glow-accent: #a855f7; }
.atl-glow-amber  { --atl-glow-accent: #f59e0b; }
.atl-glow-red    { --atl-glow-accent: #ef4444; }

@keyframes atl-glow-rotate {
  to { --atl-glow-angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .atl-glow.atl-glow { animation: none;
    background:
      linear-gradient(var(--atl-surface), var(--atl-surface)) padding-box,
      var(--atl-glow-accent, var(--atl-primary)) border-box;
  }
}

/* ===== Hero-Variants (Runde 3) =====
 * Pro Page eine eigene Hero-Visualitaet, alle in Atlas-Brand-Farben.
 * Layer-System: jeweils ein <div class="atl-hero-VARIANT"> als full-bleed-Sibling im .atl-hero / .atl-*-hero.
 * Tempo: 2-6s Pulse-Cycles, ungeraden Delays — keine synchron laufenden Animationen.
 */

/* Hero-Content (Eyebrow/H1/Subline/CTAs) immer ueber Variant-Background.
 * Alle direkten Hero-Kinder die NICHT die Variant-Container sind, bekommen z-index:1. */
.atl-hero > *:not(.atl-hero-grid-spark):not(.atl-hero-aurora),
.atl-pricing-hero > *:not(.atl-hero-constellation),
.atl-glossar-hero > *:not(.atl-hero-cells-3d),
.atl-faq-hero > *:not(.atl-hero-drift) {
  position: relative;
  z-index: 1;
}

/* Inline-Links in Hero-Fliesstext (z.B. mailto im FAQ-Hero): heller + unterstrichen,
   sonst Browser-Standardblau auf dem dunklen Hero-Verlauf = kaum lesbar. */
.atl-hero p a, .atl-pricing-hero p a,
.atl-glossar-hero p a, .atl-glossar-hero .lead a,
.atl-faq-hero p a {
  color: #cfe3ff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.atl-hero p a:hover, .atl-pricing-hero p a:hover,
.atl-glossar-hero p a:hover, .atl-glossar-hero .lead a:hover,
.atl-faq-hero p a:hover {
  color: #ffffff;
}

/* ----- Variant: Starfield (Landing index.html) ----- */
.atl-hero-starfield { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.atl-hero-starfield .atl-star {
  position:absolute;
  border-radius:50%;
  background: var(--atl-star-color, var(--atl-primary));
  color: var(--atl-star-color, var(--atl-primary));
  opacity:0;
  animation: atl-star-twinkle var(--atl-star-cycle, 3s) ease-in-out infinite;
  animation-delay: var(--atl-star-delay, 0s);
  left: var(--atl-x);
  top: var(--atl-y);
  width: var(--atl-size, 3px);
  height: var(--atl-size, 3px);
  box-shadow: 0 0 var(--atl-glow, 6px) currentColor;
}
@keyframes atl-star-twinkle {
  0%, 100% { opacity:0; transform:scale(0.5); }
  50%      { opacity: var(--atl-peak, 0.85); transform:scale(1.4); }
}

/* ----- Variant: Constellation (/preise.html) ----- */
.atl-hero-constellation { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.atl-hero-constellation svg { position:absolute; inset:0; width:100%; height:100%; }
.atl-hero-constellation svg line {
  stroke: var(--atl-line-color, var(--atl-primary));
  stroke-width: 0.6;
  opacity: 0.18;
  animation: atl-line-pulse var(--atl-line-cycle, 4s) ease-in-out infinite;
  animation-delay: var(--atl-line-delay, 0s);
}
.atl-hero-constellation svg circle {
  fill: var(--atl-line-color, var(--atl-primary));
  opacity: 0;
  animation: atl-star-twinkle var(--atl-line-cycle, 4s) ease-in-out infinite;
  animation-delay: var(--atl-line-delay, 0s);
  --atl-peak: 0.9;
}
@keyframes atl-line-pulse {
  0%, 100% { opacity: 0.12; stroke-width: 0.5; }
  50%      { opacity: 0.55; stroke-width: 1.3; }
}

/* ----- Variant: Drift (/faq.html) ----- */
.atl-hero-drift { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.atl-hero-drift .atl-glow-spot {
  position:absolute;
  border-radius:50%;
  background: var(--atl-spot-color, var(--atl-primary));
  opacity: 0.35;
  filter: blur(80px);
  width: var(--atl-spot-size, 300px);
  height: var(--atl-spot-size, 300px);
  left: var(--atl-x);
  top: var(--atl-y);
  animation: atl-drift var(--atl-spot-cycle, 7s) ease-in-out infinite;
  animation-delay: var(--atl-spot-delay, 0s);
  will-change: transform, opacity;
}
@keyframes atl-drift {
  0%, 100% { transform: translate(0, 0) scale(1);     opacity:0.28; }
  50%      { transform: translate(60px, -40px) scale(1.18); opacity:0.55; }
}

/* ----- Variant: Aurora (Landing index.html, Runde 5 — Gradient-Mesh, 2026er) -----
 * Grosse weiche Lichtblobs in Markenfarben driften langsam; mix-blend-mode:screen
 * addiert Ueberlappungen zu einer Aurora. Plus feiner Grain-Layer fuer Premium-Textur.
 * Loest das Karo-Raster (grid-spark) auf der Landing ab. */
.atl-hero-aurora {
  position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;
  background: radial-gradient(130% 90% at 50% -15%, rgba(74,144,226,.12), transparent 60%);
}
.atl-hero-aurora .atl-aurora-blob {
  position:absolute; border-radius:50%;
  width: var(--b-size, 540px); height: var(--b-size, 540px);
  left: var(--b-x); top: var(--b-y);
  background: radial-gradient(circle at 50% 50%, var(--b-color, var(--atl-primary)), transparent 70%);
  filter: blur(70px);
  opacity: .4;
  mix-blend-mode: screen;
  animation: atl-aurora-drift var(--b-cycle, 26s) ease-in-out infinite;
  animation-delay: var(--b-delay, 0s);
  will-change: transform;
}
@keyframes atl-aurora-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(var(--b-dx, 70px), var(--b-dy, -50px)) scale(1.18); }
  66%      { transform: translate(calc(var(--b-dx, 70px) * -0.55), calc(var(--b-dy, -50px) * -0.6)) scale(0.88); }
}
.atl-hero-aurora .atl-aurora-grain {
  position:absolute; inset:0; pointer-events:none; opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:120px 120px;
}
@media (prefers-reduced-motion: reduce) {
  .atl-hero-aurora .atl-aurora-blob { animation:none; opacity:.4; }
}

/* ----- Variant: Grid-Spark (/glossar.html, 2D — unverändert seit 2026-05-26) ----- */
.atl-hero-grid-spark {
  position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(159,200,255,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(159,200,255,0.08) 1px, transparent 1px);
  background-size: 50px 50px;
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at center, black, transparent);
          mask-image: radial-gradient(ellipse 75% 65% at center, black, transparent);
}
.atl-hero-grid-spark .atl-cell-spark {
  position:absolute;
  width:50px; height:50px;
  background: var(--atl-cell-color, var(--atl-primary));
  opacity:0;
  animation: atl-cell-flash 4s ease-in-out infinite;
  animation-delay: var(--atl-cell-delay, 0s);
  left: var(--atl-x);
  top: var(--atl-y);
  filter: blur(8px);
  border-radius: 4px;
}
@keyframes atl-cell-flash {
  0%, 100% { opacity:0; }
  18%      { opacity:0.55; }
  35%      { opacity:0; }
}

/* ----- Variant: Cells-3D (Landing index.html) ===========================
 * 3D-perspective-Plane mit Atlas-Cell-Raster + aufleuchtende Cell-Lights —
 * visuelle Anspielung auf die echten 3D-Karten (de_1km, kreis_3d).
 * Stärke je Cell variiert via CSS-Vars (--atl-cell-color, --atl-cell-peak). */
.atl-hero-cells-3d {
  position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;
  perspective: 1100px;
  perspective-origin: 50% 0%;
}
.atl-hero-cells-3d .atl-cell-plane {
  position:absolute;
  /* Plane ist groesser als Hero (-Raender), damit nach 3D-Rotation noch alles ausgefuellt ist */
  inset: -8% -25% -45% -25%;
  transform: rotateX(48deg);
  transform-origin: center top;
  /* Atlas-Cell-Raster, dichter als 70px — 35px-Karos wirken naeher am echten 1km-Grid (Runde 4: User Faktor 4) */
  background-image:
    linear-gradient(rgba(159,200,255,0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(159,200,255,0.18) 1px, transparent 1px);
  background-size: 35px 35px;
  /* Radial-Mask: in der Mitte voll, an Raendern fade-out */
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at center, black 35%, transparent);
          mask-image: radial-gradient(ellipse 80% 70% at center, black 35%, transparent);
}
.atl-hero-cells-3d .atl-cell-light {
  position:absolute;
  width: 70px; height: 70px;
  left: var(--atl-x); top: var(--atl-y);
  background: var(--atl-cell-color, var(--atl-primary));
  opacity: 0;
  border-radius: 4px;
  filter: blur(10px);
  animation: atl-cell-3d-flash var(--atl-cell-cycle, 4.5s) ease-in-out infinite;
  animation-delay: var(--atl-cell-delay, 0s);
  will-change: opacity, transform;
}
@keyframes atl-cell-3d-flash {
  0%, 100% { opacity:0; transform:scale(0.8); }
  25%      { opacity: var(--atl-cell-peak, 0.55); transform:scale(1.05); }
  60%      { opacity:0; transform:scale(0.85); }
}
@media (prefers-reduced-motion: reduce) {
  .atl-hero-cells-3d .atl-cell-light { animation:none; opacity:0.22; }
}

@media (prefers-reduced-motion: reduce) {
  .atl-hero-starfield .atl-star,
  .atl-hero-constellation svg line,
  .atl-hero-constellation svg circle,
  .atl-hero-drift .atl-glow-spot,
  .atl-hero-grid-spark .atl-cell-spark { animation:none; opacity:0.22; }
}

/* ===== Page-Hero (full viewport) =====
 * Jede Page mit .atl-*-hero faellt automatisch auf 100vh.
 * Subtile radial-gradient-Hintergrund kommt aus Page-Style oder via Override hier setzen.
 */
.atl-hero,
.atl-pricing-hero,
.atl-dashboard-hero,
.atl-glossar-hero,
.atl-faq-hero {
  position:relative; overflow:hidden;
  min-height:100vh;
  display:flex; flex-direction:column;
  justify-content:center; align-items:center;
  text-align:center;
  padding: var(--atl-sp-12) var(--atl-sp-6);
}
@media (max-width: 640px) {
  .atl-hero, .atl-pricing-hero, .atl-dashboard-hero, .atl-glossar-hero, .atl-faq-hero {
    /* Mobile: 100svh statt 100vh — vermeidet Probleme mit iOS-Browserchrome */
    min-height: 100svh;
    padding: var(--atl-sp-10) var(--atl-sp-4);
  }
}

.atl-section-h { text-align:center; margin-bottom:var(--atl-sp-10); }
.atl-section-h .atl-eyebrow { font-size:12px; color:var(--atl-primary);
  text-transform:uppercase; letter-spacing:1px; font-weight:700; margin-bottom:8px; }
.atl-section-h h2 { font-size:32px; color:var(--atl-text-strong); font-weight:700;
  margin:0 0 12px; letter-spacing:-0.02em; line-height:1.15; }
.atl-section-h p { font-size:16px; color:var(--atl-text-soft); max-width:640px;
  margin:0 auto; line-height:1.6; }
@media (max-width: 640px) {
  .atl-section-h h2 { font-size:24px; }
  .atl-section-h p { font-size:14px; }
  .atl-section { padding: var(--atl-sp-10) var(--atl-sp-4); }
}

/* ============ Icon-System (Styleguide 2026-07-10) ============
 * Lucide-Sprite /atlas-icons.svg — self-hosted (ISC-Lizenz, DSGVO-konform).
 * Nutzung: <svg class="atl-ic" aria-hidden="true"><use href="/atlas-icons.svg#ic-NAME"/></svg>
 * Farbe erbt via currentColor vom Button/Container (Normal text-soft, Active primary). */
.atl-ic {
  width: var(--atl-icon-size, 16px);
  height: var(--atl-icon-size, 16px);
  display: inline-block;
  vertical-align: -3px;
  flex: 0 0 auto;
  pointer-events: none;   /* Klicks gehen an den Button, nicht ans SVG */
}