/* ================================================================
   GALAXYWEB AG — main.css
   Homepage Stylesheet
   © 2025 Galaxyweb AG, Hallau SH
================================================================ */

/* ════════════════════════════════════════════════════════════════
   GALAXYWEB AG — Design System v9  (2025) — Farb-Refresh
   Sauberes, konfliktfreies CSS · Ein File · Kein Override-Stack
   CI-Palette aus Logo #3cb1f3 · Navy-harmonisierte Gradienten
════════════════════════════════════════════════════════════════ */

/* ─── CSS Custom Properties (auch für inline-styles) ─── */
:root {
  /* ── Galaxyweb CI-Palette (aus Logo #3cb1f3 abgeleitet) ── */
  --blue-brand: #3cb1f3;           /* Logo-Farbe — Akzente, Branding        */
  --blue:       #0098ef;           /* Funktional — Buttons, CTAs, Links     */
  --blue-d:     #0078c8;           /* Hover-States, mittlere Gradienten     */
  --blue-dd:    #005aa0;           /* Dunkler Gradient-Endpunkt             */
  --sky:        #6ec9f7;           /* Heller Akzent in Dark Sections        */

  /* ── Neutrals ── */
  --white:  #ffffff;
  --bg:     #f5f9ff;
  --dark:   #060f1e;
  --text:   #0d1f3c;
  --text-2: #2d4159;
  --muted:  #5a7290;
  --border: #dce8f2;

  /* ── Semantic ── */
  --green:  #10b981;
  --amber:  #d97706;
  --purple: #7c3aed;

  /* ── Radii ── */
  --r:   12px;
  --rl:  18px;
  --rxl: 24px;

  /* ── Typography ── */
  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* ── Shared Gradients (zentral, einfach änderbar) ── */
  --grad-brand:  linear-gradient(135deg, var(--blue-dd) 0%, var(--blue-d) 40%, var(--blue-brand) 100%);
  --grad-btn:    linear-gradient(135deg, var(--blue-dd) 0%, var(--blue) 100%);
  --grad-dark:   linear-gradient(135deg, #0a2050 0%, var(--blue-dd) 40%, var(--blue-brand) 100%);
  --grad-trust:  linear-gradient(135deg, var(--blue-dd) 0%, var(--blue-d) 40%, var(--blue-brand) 100%);
}

/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; }
body  { font-family: var(--font); background: #fff; color: var(--text); line-height: 1.65; -webkit-font-smoothing: antialiased; }
h1,h2,h3,h4 { line-height: 1.15; font-weight: 800; }
img   { max-width: 100%; display: block; }
a     { text-decoration: none; color: inherit; }
ul    { list-style: none; }

/* ─── Layout ─── */
.container { max-width: 1340px; margin: 0 auto; padding: 0 32px; }

/* ── Nav-Overrides (Korrekturen gegenüber navigation.css) ── */
/* Kein Schlagschatten und keine Trennlinie oben — nur beim Scrollen */
.site-header {
  box-shadow: none !important;
  border-bottom-color: transparent !important;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.site-header.scrolled {
  border-bottom-color: rgba(0,0,0,.08) !important;
  box-shadow: 0 1px 8px rgba(0,0,0,.06) !important;
}
/* Body-Offset damit Inhalt nicht hinter der fixed Navigation verschwindet */
body { padding-top: var(--nav-h, 80px); }
.section   { padding: 100px 0; isolation: isolate; }

/* ── Sicherstellen dass die Navigation immer über Seiteninhalt liegt ── */
.site-header { z-index: 99999 !important; isolation: auto !important; }
.mobile-nav  { z-index: 99998 !important; }

/* ── Dropdown: CSS :hover deaktivieren — wird via JS (.is-open) gesteuert ── */
/* Überschreibt navigation.css falls dort noch :hover steht (Caching-Problem) */
.nav-item:hover > .dropdown {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(6px) !important;
}
.nav-item.is-open > .dropdown,
.nav-item:focus-within > .dropdown {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: all !important;
  transform: translateY(0) !important;
}
.center    { text-align: center; }
.center .gw-sub { margin: 0 auto; }

/* ─── Fade-in ─── */
.fade-up { opacity: 1; transform: none; }
.js-ready .fade-up { opacity: 0; transform: translateY(22px); transition: opacity .55s ease, transform .55s ease; }
.js-ready .fade-up.visible { opacity: 1; transform: none; }

/* ─── Live dot ─── */
.live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #10b981;
  box-shadow: 0 0 0 3px rgba(16,185,129,.22); flex-shrink: 0;
  animation: livePulse 2s ease-in-out infinite;
}
@keyframes livePulse { 0%,100%{box-shadow:0 0 0 3px rgba(16,185,129,.22)} 50%{box-shadow:0 0 0 6px rgba(16,185,129,.08)} }


/* ════════════════════════════════════════════════════════════════
   TOKENS
════════════════════════════════════════════════════════════════ */

/* Labels */
.gw-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--blue-d); background: rgba(60,177,243,.10); border: 1.5px solid rgba(60,177,243,.22);
  padding: 5px 14px; border-radius: 100px; margin-bottom: 16px;
}
.gw-label-white { color: rgba(255,255,255,.72); background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.16); }

/* Headings */
.gw-h2 { font-size: clamp(26px, 3.8vw, 44px); font-weight: 800; letter-spacing: -.028em; color: var(--text); margin-bottom: 12px; line-height: 1.13; }
.gw-h2 em { font-style: normal; color: var(--blue); }
.gw-h2-white { color: #fff; }
.gw-h2-white em { color: var(--blue-brand); }
.gw-sub { font-size: 15.5px; color: var(--muted); max-width: 560px; line-height: 1.72; }
.gw-sub-white { color: rgba(255,255,255,.45); }
.section-header { margin-bottom: 56px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px; border-radius: 12px; font-size: 14px; font-weight: 700;
  font-family: var(--font); cursor: pointer; border: none;
  transition: box-shadow .22s ease, background .18s ease, border-color .18s ease, filter .18s ease;
  white-space: nowrap; text-decoration: none;
}
.btn-primary { background: var(--grad-btn); color: #fff; box-shadow: 0 6px 20px rgba(0,120,200,.28); }
.btn-primary:hover { filter: brightness(1.08); box-shadow: 0 12px 32px rgba(0,120,200,.38); }
.btn-outline { background: transparent; color: var(--blue); border: 1.5px solid #c0d8f0; }
.btn-outline:hover { background: #eef6ff; border-color: var(--blue); }
.btn-ghost-white { background: rgba(255,255,255,.09); color: #fff; border: 1.5px solid rgba(255,255,255,.22); }
.btn-ghost-white:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.42); }
.btn-glow { background: var(--grad-btn); color: #fff; box-shadow: 0 8px 28px rgba(0,120,200,.32); }
.btn-glow:hover { filter: brightness(1.08); box-shadow: 0 16px 40px rgba(0,120,200,.42); }
.btn-lg  { padding: 15px 32px; font-size: 15px; border-radius: 14px; }
.btn-xl  { padding: 17px 38px; font-size: 16px; border-radius: 14px; }


/* Icon Badges */
.gw-badge { width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.gw-badge svg { width: 20px; height: 20px; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.gb-blue   { background: #dbeafe; } .gb-blue   svg { stroke: #1d4ed8; }
.gb-sky    { background: #e0f4ff; } .gb-sky    svg { stroke: var(--blue-d); }
.gb-green  { background: #d1fae5; } .gb-green  svg { stroke: #047857; }
.gb-amber  { background: #fef3c7; } .gb-amber  svg { stroke: #b45309; }
.gb-purple { background: #ede9fe; } .gb-purple svg { stroke: #6d28d9; }
.gb-red    { background: #fee2e2; } .gb-red    svg { stroke: #b91c1c; }
.gb-teal   { background: #ccfbf1; } .gb-teal   svg { stroke: #0f766e; }


/* Navigation: siehe navigation.css */

/* Hero Card (Floating product card in hero) */
.hero-card {
  background: #fff; border-radius: 20px;
  border: 1.5px solid var(--border);
  box-shadow: 0 24px 64px rgba(0,60,140,.13), 0 6px 20px rgba(0,100,200,.08);
  overflow: hidden;
  /*animation: heroFloat 4s ease-in-out infinite;*/
}
@keyframes heroFloat {
  0%, 100% { transform: translateY(0px);   box-shadow: 0 24px 64px rgba(0,60,140,.13), 0 6px 20px rgba(0,100,200,.08); }
  50%       { transform: translateY(-8px);  box-shadow: 0 32px 72px rgba(0,60,140,.17), 0 8px 24px rgba(0,100,200,.11); }
}
/* Pfeil-Toggle wird nie angezeigt */
.hc-toggle { display: none !important; }
.hc-head {
  background: var(--grad-btn);
  padding: 16px 20px; display: flex; align-items: center; gap: 10px;
  cursor: pointer;
}
.hc-brand { font-size: 13px; font-weight: 700; color: #fff; flex: 1; letter-spacing: -.01em; }
.hc-live  {
  display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  background: rgba(16,185,129,.18); border: 1px solid rgba(16,185,129,.35);
  padding: 3px 9px 3px 7px; border-radius: 100px; color: #6ee7b7;
}
.hc-live .live-dot { width: 7px; height: 7px; background: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.25); }
.hc-toggle { font-size: 20px; color: rgba(255,255,255,.7); transition: transform .25s; display: none; }
.hc-toggle.open { transform: rotate(180deg); }
.hc-body { display: block; }
.hc-row {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 18px; border-bottom: 1px solid #f0f5fa;
  transition: background .15s;
}
.hc-row:hover { background: #f8fbff; }
.hc-icon {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.hc-icon svg { width: 16px; height: 16px; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.hci-blue   { background: #e0f0ff; } .hci-blue   svg { stroke: var(--blue); }
.hci-purple { background: #eef2ff; } .hci-purple svg { stroke: #4f46e5; }
.hci-teal   { background: #ccfbf1; } .hci-teal   svg { stroke: #0d9488; }
.hci-amber  { background: #fff7e6; } .hci-amber  svg { stroke: #d97706; }
.hci-red    { background: #ffeaea; } .hci-red    svg { stroke: #dc2626; }
.hc-name  { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.2; }
.hc-sub   { font-size: 11px; color: var(--muted); }
.hc-price { font-size: 12px; font-weight: 800; color: var(--blue-d); margin-left: auto; white-space: nowrap; }


/* ════════════════════════════════════════════════════════════════
   HERO
════════════════════════════════════════════════════════════════ */
.hero { background: #fff; padding: 40px 0 96px; overflow: hidden; position: relative; isolation: isolate; }
#galaxyCanvas {
  position: absolute;
  top: 0; right: 0;
  width: 65%; height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: .82;
}
.hero .container { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1fr 440px; gap: 60px; align-items: center; }
.hero-text { }
.hero-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 700; color: var(--blue-d);
  background: rgba(60,177,243,.08); border: 1.5px solid rgba(60,177,243,.18);
  padding: 7px 16px; border-radius: 100px; margin-bottom: 24px;
}
.hero-h1 { font-size: clamp(34px, 4.8vw, 56px); font-weight: 900; letter-spacing: -.032em; color: var(--text); margin-bottom: 18px; }
.hero-h1 em { font-style: normal; color: var(--blue); }
.hero-sub  { font-size: 16px; color: var(--muted); line-height: 1.76; max-width: 480px; margin-bottom: 36px; }
.hero-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 44px; }

/* Hero stats row */
.hero-stats {
  display: flex; gap: 0; border-top: 1px solid var(--border);
  padding-top: 28px; flex-wrap: wrap;
}
.hero-stat {
  padding: 0 28px 0 0; margin-right: 28px;
  border-right: 1px solid var(--border);
}
.hero-stat:last-child { border: none; margin: 0; padding: 0; }
.hs-val {
  font-size: 26px; font-weight: 900; letter-spacing: -.02em;
  color: var(--text); line-height: 1; margin-bottom: 4px;
  display: flex; align-items: baseline; gap: 2px;
}
.hs-val span { font-size: 28px; }
.hs-lbl { font-size: 11.5px; color: var(--muted); font-weight: 600; }


/* ════════════════════════════════════════════════════════════════
   TRUST BAR
════════════════════════════════════════════════════════════════ */
.trust-bar {
  background: var(--grad-trust);
  padding: 20px 0;
}
.trust-inner { max-width: 1340px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.trust-grid  { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.trust-item  {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; border-radius: 12px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18);
  transition: background .2s, transform .2s;
}
.trust-item:hover { background: rgba(255,255,255,.2); transform: translateY(-2px); }
.trust-ti {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  background: rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center;
}
.trust-ti svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.trust-text { display: flex; flex-direction: column; gap: 2px; }
.trust-label { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: rgba(255,255,255,.52); }
.trust-val   { font-size: 13.5px; font-weight: 800; color: #fff; line-height: 1.2; }


/* ════════════════════════════════════════════════════════════════
   PROBLEME
════════════════════════════════════════════════════════════════ */
#probleme { background: #f8fbff; }
.prob-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.prob-card {
  background: #fff; border-radius: 18px;
  border: 1.5px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,30,80,.05), 0 6px 20px rgba(0,30,80,.05);
  overflow: hidden; display: flex; flex-direction: column; position: relative;
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
/* Farbige linke Border je Karte */
.prob-card::before {
  content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 4px;
  border-radius: 18px 0 0 18px;
}
.pc1::before { background: linear-gradient(180deg, var(--blue), var(--blue-brand)); }
.pc2::before { background: linear-gradient(180deg, #f59e0b, #fcd34d); }
.pc3::before { background: linear-gradient(180deg, #ef4444, #fca5a5); }
.pc4::before { background: linear-gradient(180deg, #10b981, #6ee7b7); }
/* Subtile farbige Tint in der Karten-Ecke oben rechts */
.prob-card::after {
  content: ''; position: absolute; width: 120px; height: 120px; border-radius: 50%;
  top: -40px; right: -30px; pointer-events: none; opacity: .45;
}
.pc1::after { background: radial-gradient(circle, rgba(0,120,200,.18) 0%, transparent 70%); }
.pc2::after { background: radial-gradient(circle, rgba(245,158,11,.18) 0%, transparent 70%); }
.pc3::after { background: radial-gradient(circle, rgba(239,68,68,.18) 0%, transparent 70%); }
.pc4::after { background: radial-gradient(circle, rgba(16,185,129,.18) 0%, transparent 70%); }
.prob-card:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(0,30,80,.1); }
.pc1:hover { border-color: #93c5fd; }
.pc2:hover { border-color: #fcd34d; }
.pc3:hover { border-color: #fca5a5; }
.pc4:hover { border-color: #6ee7b7; }
.prob-body  { padding: 28px 24px 24px 28px; display: flex; flex-direction: column; flex: 1; }
.prob-top   { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.prob-cat   {
  font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 100px;
}
.pc1 .prob-cat { color: var(--blue); background: #e0f0ff; }
.pc2 .prob-cat { color: #d97706; background: #fef3c7; }
.pc3 .prob-cat { color: #dc2626; background: #fee2e2; }
.pc4 .prob-cat { color: #059669; background: #d1fae5; }
.prob-q     { font-size: 16px; font-weight: 800; color: var(--text); margin-bottom: 10px; line-height: 1.3; }
.prob-a     { font-size: 13px; color: var(--muted); line-height: 1.65; margin-bottom: 16px; flex: 1; }
.prob-tag   { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 8px; background: #f8fbff; border: 1px solid #e2edf8; margin-bottom: 16px; }
.prob-dot   { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); flex-shrink: 0; }
.prob-tag-txt { font-size: 12px; font-weight: 700; color: var(--text-2); }
.prob-link  { font-size: 13px; font-weight: 700; color: var(--blue); display: inline-flex; align-items: center; gap: 5px; transition: gap .18s; margin-top: auto; }
.prob-link:hover { gap: 9px; }
.prob-card .gw-badge { width: 38px; height: 38px; border-radius: 10px; }
.pc1 .prob-top .gw-badge { background: #e0f0ff; }
.pc1 .prob-top .gw-badge svg { stroke: var(--blue); }
.pc2 .prob-top .gw-badge { background: #fef3c7; }
.pc2 .prob-top .gw-badge svg { stroke: #d97706; }
.pc3 .prob-top .gw-badge { background: #fee2e2; }
.pc3 .prob-top .gw-badge svg { stroke: #dc2626; }
.pc4 .prob-top .gw-badge { background: #d1fae5; }
.pc4 .prob-top .gw-badge svg { stroke: #059669; }


/* ════════════════════════════════════════════════════════════════
   PRODUKTE
════════════════════════════════════════════════════════════════ */
#produkte { background: #fff; }
.products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.prod-card {
  background: #fff; border-radius: 16px; border: 1.5px solid var(--border);
  box-shadow: 0 1px 3px rgba(0,30,80,.04), 0 4px 14px rgba(0,30,80,.04);
  overflow: hidden; display: flex; flex-direction: column;
  text-decoration: none; color: inherit; position: relative;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.prod-card:hover { transform: translateY(-4px); box-shadow: 0 14px 40px rgba(0,60,140,.11); border-color: #b3cfe8; }
.prod-sec { grid-column: span 2; }

.prod-hdr {
  height: 100px; display: flex; align-items: center; gap: 16px; padding: 0 24px;
  position: relative; overflow: hidden; flex-shrink: 0;
}
.prod-hdr::after { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(160deg, rgba(255,255,255,.08) 0%, rgba(0,0,0,.12) 100%); }
.ph-hosting { background: var(--grad-btn); }
.ph-mail    { background: linear-gradient(135deg, var(--blue-dd) 0%, var(--blue-d) 100%); }
.ph-cloud   { background: linear-gradient(135deg, var(--blue-dd) 0%, var(--blue) 100%); }
.ph-archive { background: linear-gradient(135deg, var(--blue-dd) 0%, var(--blue-d) 100%); }
.ph-sec     { background: linear-gradient(135deg, #0a2050 0%, var(--blue-dd) 100%); }

.prod-badge {
  position: relative; z-index: 2; width: 52px; height: 52px; border-radius: 15px;
  background: rgba(255,255,255,.22); border: 1.5px solid rgba(255,255,255,.38);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(8px); box-shadow: 0 4px 16px rgba(0,0,0,.18);
  flex-shrink: 0; transition: transform .25s ease; z-index: 3;
}
.prod-card:hover .prod-badge { transform: scale(1.06) translateY(-2px); }
.prod-badge svg { width: 23px; height: 23px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.prod-hdr-text { position: relative; z-index: 3; }
.prod-hdr-name { display: block; font-size: 13.5px; font-weight: 800; color: #fff; margin-bottom: 3px; }
.prod-hdr-sub  { display: block; font-size: 11px; color: rgba(255,255,255,.65); }

.prod-body  { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.prod-name  { font-size: 15.5px; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.prod-line  { font-size: 13px; color: #94aec8; margin-bottom: 14px; line-height: 1.6; }
.prod-feats { margin-bottom: 16px; flex: 1; }
.prod-feats li { font-size: 13px; color: var(--muted); padding: 6px 0; border-bottom: 1px solid #edf3fa; display: flex; align-items: center; gap: 8px; }
.prod-feats li:last-child { border: none; }
.prod-feats li::before { content: '✓'; color: #0d9488; font-weight: 900; font-size: 11px; flex-shrink: 0; }
.prod-price { margin-bottom: 16px; }
.prod-price sup    { font-size: 12px; font-weight: 700; color: var(--blue-d); vertical-align: super; line-height: 1; margin-right: 1px; }
.prod-price strong { font-size: 28px; font-weight: 900; color: var(--blue-d); letter-spacing: -.02em; }
.prod-price em     { font-style: normal; font-size: 13px; color: #94aec8; }
.prod-cta {
  display: block; text-align: center; padding: 11px 18px; border-radius: 10px;
  font-size: 13.5px; font-weight: 700; color: var(--blue-d);
  border: 1.5px solid rgba(0,120,200,.20); background: rgba(0,120,200,.04);
  transition: all .2s; margin-top: auto;
}
.prod-card:hover .prod-cta { background: rgba(0,120,200,.08); border-color: var(--blue-d); }


/* ════════════════════════════════════════════════════════════════
   AURORA — Shared dark-section layer
════════════════════════════════════════════════════════════════ */
.aurora {
  background:
    radial-gradient(ellipse 80% 60% at 15% 40%, rgba(20,110,220,.45) 0%, transparent 50%),
    radial-gradient(ellipse 60% 50% at 85% 60%, rgba(15,90,200,.35) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 50%  5%, rgba(30,130,230,.18) 0%, transparent 50%),
    #010918;
  position: relative; overflow: hidden; isolation: isolate;
}
.aurora-grid {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,.1) 1px, transparent 1px), radial-gradient(circle, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 40px 40px, 80px 80px; background-position: 0 0, 20px 20px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 20%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 20%, transparent 90%);
  animation: gridBreath 14s ease-in-out infinite;
}
@keyframes gridBreath { 0%,100%{opacity:.55} 50%{opacity:.9} }
.aurora-glow {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 35% at 20% 35%, rgba(30,140,235,.12) 0%, transparent 70%),
    radial-gradient(ellipse 40% 30% at 80% 65%, rgba(25,110,210,.07) 0%, transparent 70%);
  animation: glowPulse 18s ease-in-out infinite;
}
@keyframes glowPulse { 0%,100%{opacity:.8} 50%{opacity:1; transform:translateY(-6px)} }
.aurora-sheen {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(108deg, transparent 35%, rgba(255,255,255,.018) 50%, transparent 65%);
  animation: sheenSlide 26s ease-in-out infinite;
}
@keyframes sheenSlide { 0%,100%{transform:translateX(-8%)} 50%{transform:translateX(8%)} }
.aurora-noise {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 200px 200px; animation: grainShift .8s steps(1) infinite;
}
@keyframes grainShift { 0%{background-position:0 0} 25%{background-position:-53px 27px} 50%{background-position:33px -41px} 75%{background-position:-19px 60px} }
.aurora-content { position: relative; z-index: 4; }

/* Glass card */
.gw-glass {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,.3);
  overflow: hidden; position: relative;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.gw-glass:hover { transform: translateY(-5px); border-color: rgba(255,255,255,.24); box-shadow: 0 20px 50px rgba(0,0,0,.4); }
.gw-glass::before { content:''; position:absolute; top:0; left:0; right:0; height:50%; background: linear-gradient(180deg, rgba(255,255,255,.055) 0%, transparent 100%); border-radius:20px 20px 0 0; pointer-events:none; }


/* ════════════════════════════════════════════════════════════════
   AURORA STATS
════════════════════════════════════════════════════════════════ */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: start; }
.stat-card { }
.gw-glass-inner { padding: 26px 24px; position: relative; z-index: 5; display: flex; flex-direction: column; gap: 16px; }
/* Stat-cards: .stat-card hat eigenes Padding (main_extensions.css) → Inner-Padding entfernen, äusseres gleich machen */
.stat-card .gw-glass-inner { padding: 0 0 28px 0; }
.stat-card { padding: 24px !important; }

.stat-icon { width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.stat-icon svg { width: 18px; height: 18px; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.stat-val {
  font-size: 52px; font-weight: 900; line-height: 1; letter-spacing: -.03em;
  display: block; margin-bottom: 5px; color: #fff;
}
.stat-lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.65); display: block; margin-bottom: 8px; }
.stat-tag { display: inline-flex; padding: 3px 9px; border-radius: 100px; font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.stat-s1 { border-color: rgba(0,120,200,.35); }
.stat-s1::after { content:''; position:absolute; inset:0; background: radial-gradient(ellipse 90% 70% at 100% 0%, rgba(0,120,200,.18) 0%, transparent 65%); pointer-events:none; }
.stat-s1 .stat-val { color: var(--sky); }
.stat-s1 .stat-icon { background: rgba(0,120,200,.2); border: 1px solid rgba(0,120,200,.3); }
.stat-s1 .stat-icon svg { stroke: var(--sky); }
.stat-s1 .stat-tag { background: rgba(0,120,200,.2); color: var(--sky); border: 1px solid rgba(0,120,200,.3); }
.stat-s1:hover { border-color: rgba(0,120,200,.55) !important; box-shadow: 0 20px 50px rgba(0,120,200,.20) !important; }

.stat-s2 { border-color: rgba(16,185,129,.38); }
.stat-s2::after { content:''; position:absolute; inset:0; background: radial-gradient(ellipse 90% 70% at 100% 0%, rgba(16,185,129,.18) 0%, transparent 65%); pointer-events:none; }
.stat-s2 .stat-val { color: #a7f3d0; }
.stat-s2 .stat-icon { background: rgba(16,185,129,.2); border: 1px solid rgba(16,185,129,.3); }
.stat-s2 .stat-icon svg { stroke: #6ee7b7; }
.stat-s2 .stat-tag { background: rgba(16,185,129,.2); color: #6ee7b7; border: 1px solid rgba(16,185,129,.3); }
.stat-s2:hover { border-color: rgba(16,185,129,.58) !important; box-shadow: 0 20px 50px rgba(16,185,129,.2) !important; }

.stat-s3 { border-color: rgba(245,158,11,.38); }
.stat-s3::after { content:''; position:absolute; inset:0; background: radial-gradient(ellipse 90% 70% at 100% 0%, rgba(245,158,11,.15) 0%, transparent 65%); pointer-events:none; }
.stat-s3 .stat-val { color: #fde68a; }
.stat-s3 .stat-icon { background: rgba(245,158,11,.2); border: 1px solid rgba(245,158,11,.3); }
.stat-s3 .stat-icon svg { stroke: #fcd34d; }
.stat-s3 .stat-tag { background: rgba(245,158,11,.2); color: #fcd34d; border: 1px solid rgba(245,158,11,.3); }
.stat-s3:hover { border-color: rgba(245,158,11,.58) !important; box-shadow: 0 20px 50px rgba(245,158,11,.18) !important; }

.stat-s4 { border-color: rgba(139,92,246,.38); }
.stat-s4::after { content:''; position:absolute; inset:0; background: radial-gradient(ellipse 90% 70% at 100% 0%, rgba(139,92,246,.18) 0%, transparent 65%); pointer-events:none; }
.stat-s4 .stat-val { color: #ddd6fe; }
.stat-s4 .stat-icon { background: rgba(139,92,246,.2); border: 1px solid rgba(139,92,246,.3); }
.stat-s4 .stat-icon svg { stroke: #c4b5fd; }
.stat-s4 .stat-tag { background: rgba(139,92,246,.2); color: #c4b5fd; border: 1px solid rgba(139,92,246,.3); }
.stat-s4:hover { border-color: rgba(139,92,246,.58) !important; box-shadow: 0 20px 50px rgba(139,92,246,.2) !important; }

/* Aurora CTA */
.aurora-cta { text-align: center; margin-top: 72px; padding-top: 60px; border-top: 1px solid rgba(255,255,255,.07); position: relative; }
.aurora-cta::before { content:''; position:absolute; top:-1px; left:50%; transform:translateX(-50%); width:240px; height:1px; background: linear-gradient(90deg, transparent, rgba(0,120,200,.6), transparent); }
.aurora-cta h2 { font-size: clamp(28px, 4.5vw, 50px); font-weight: 900; color: #fff; letter-spacing: -.03em; margin-bottom: 14px; }
.aurora-cta h2 em { font-style: normal; color: var(--blue-brand); }
.aurora-cta p  { font-size: 15px; color: rgba(255,255,255,.45); margin-bottom: 34px; }
.aurora-cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }


/* ════════════════════════════════════════════════════════════════
   BENTO GRID — Warum Galaxyweb (dunkel)
════════════════════════════════════════════════════════════════ */
#warum-galaxyweb {
  background: #060f1e; padding: 100px 0;
}
#warum-galaxyweb .gw-label { color: rgba(255,255,255,.72); background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.15); }
#warum-galaxyweb .gw-h2 { color: #fff; }
#warum-galaxyweb .gw-h2 em { color: var(--blue-brand); }
#warum-galaxyweb .gw-sub { color: rgba(255,255,255,.44); }

.bento-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: auto; gap: 16px; }
.bc {
  border-radius: 20px; padding: 26px; position: relative; overflow: hidden;
  min-height: 185px; display: block; text-decoration: none; color: inherit;
  border: 1.5px solid transparent;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.bc:hover { transform: translateY(-4px); }
.bc-wide  { grid-column: span 2; }
.bc-swiss { grid-column: span 2; grid-row: span 1; }
.gw-card  { }  /* no extra light-card styles — bento is always dark */

/* Backgrounds */
.bc-swiss        { background: radial-gradient(ellipse 85% 70% at 10% 20%, rgba(0,100,220,.70) 0%, transparent 55%), radial-gradient(ellipse 70% 65% at 90% 85%, rgba(0,60,190,.55) 0%, transparent 55%), #040e20; border-color: rgba(0,120,200,.38); }
.bc-uptime-card  { background: radial-gradient(ellipse 80% 70% at 50% 100%, rgba(16,185,129,.55) 0%, transparent 55%), radial-gradient(ellipse 60% 50% at 10% 10%, rgba(52,211,153,.28) 0%, transparent 55%), #051810; border-color: rgba(52,211,153,.4); }
.bc-support-card { background: radial-gradient(ellipse 80% 70% at 10% 80%, rgba(0,120,200,.6) 0%, transparent 55%), radial-gradient(ellipse 60% 50% at 90% 20%, rgba(60,177,243,.30) 0%, transparent 55%), #040e20; border-color: rgba(0,120,200,.38); }
.bc-money-card   { background: radial-gradient(ellipse 80% 70% at 50% 100%, rgba(245,158,11,.55) 0%, transparent 55%), radial-gradient(ellipse 60% 50% at 90% 10%, rgba(251,191,36,.3) 0%, transparent 55%), #160d02; border-color: rgba(251,191,36,.4); }
.bc-green-card   { background: radial-gradient(ellipse 80% 70% at 90% 20%, rgba(16,185,129,.5) 0%, transparent 55%), radial-gradient(ellipse 60% 50% at 10% 80%, rgba(5,150,105,.4) 0%, transparent 55%), #031208; border-color: rgba(74,222,128,.38); }
.bc-years-card   { background: radial-gradient(ellipse 80% 70% at 50% 100%, rgba(139,92,246,.6) 0%, transparent 55%), radial-gradient(ellipse 60% 50% at 90% 10%, rgba(167,139,250,.3) 0%, transparent 55%), #0d0818; border-color: rgba(167,139,250,.42); }
.bc-bgp-card     { background: radial-gradient(ellipse 80% 70% at 10% 50%, rgba(239,68,68,.55) 0%, transparent 55%), radial-gradient(ellipse 60% 50% at 90% 20%, rgba(251,113,133,.32) 0%, transparent 55%), #130408; border-color: rgba(248,113,113,.4); }

/* Textures */
.bc-swiss::after        { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:32px 32px; pointer-events:none; }
.bc-support-card::after { content:''; position:absolute; inset:0; background-image:radial-gradient(circle,rgba(255,255,255,.08) 1px,transparent 1px); background-size:18px 18px; pointer-events:none; }
.bc-bgp-card::after     { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:20px 20px; pointer-events:none; }

/* Hover glows */
/* Bento hover: identisch mit Stat-Cards — ::before Linie + Glow */
/* Basis: ::before für Leuchtlinie unten (opacity 0→1 bei hover) */
.bc::before {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  opacity: 0; transition: opacity .28s ease; z-index: 6; border-radius: 0 0 20px 20px;
}
/* Farben der Leuchtlinie je Karte */
.bc-swiss::before        { background: linear-gradient(90deg, transparent, var(--sky), transparent); }
.bc-uptime-card::before  { background: linear-gradient(90deg, transparent, #6ee7b7, transparent); }
.bc-support-card::before { background: linear-gradient(90deg, transparent, var(--sky), transparent); }
.bc-money-card::before   { background: linear-gradient(90deg, transparent, #fcd34d, transparent); }
.bc-green-card::before   { background: linear-gradient(90deg, transparent, #6ee7b7, transparent); }
.bc-years-card::before   { background: linear-gradient(90deg, transparent, #c4b5fd, transparent); }
.bc-bgp-card::before     { background: linear-gradient(90deg, transparent, #fca5a5, transparent); }
/* Hover: Linie einblenden + Glow-Shadow */
.bc-swiss:hover        { box-shadow: 0 20px 56px rgba(0,120,200,.30); }
.bc-uptime-card:hover  { box-shadow: 0 20px 56px rgba(16,185,129,.28); }
.bc-support-card:hover { box-shadow: 0 20px 56px rgba(0,120,200,.22); }
.bc-money-card:hover   { box-shadow: 0 20px 56px rgba(245,158,11,.24); }
.bc-green-card:hover   { box-shadow: 0 20px 56px rgba(16,185,129,.24); }
.bc-years-card:hover   { box-shadow: 0 20px 56px rgba(139,92,246,.28); }
.bc-bgp-card:hover     { box-shadow: 0 20px 56px rgba(239,68,68,.24); }
.bc:hover::before      { opacity: 1; }

/* Bento typography */
.bc-val         { font-size: 36px; font-weight: 900; line-height: 1.1; letter-spacing: -.02em; }
.bc-val-white   { color: #fff; }
.bc-val-blue    { color: var(--sky); }
.bc-val-green   { color: #6ee7b7; }
.bc-val-amber   { color: #fcd34d; }
.bc-val-purple  { color: #c4b5fd; }
.bc-val-red     { color: #fca5a5; }
.bc-title, .bc-title-dark, .bc-title-white { font-size: 14px; font-weight: 700; color: rgba(255,255,255,.9); margin-bottom: 6px; margin-top: 6px; display: block; }
.bc-text, .bc-text-muted, .bc-text-white   { font-size: 12.5px; color: rgba(255,255,255,.44); line-height: 1.58; }
.bc-flag { font-size: 28px; display: block; margin-top: 16px; }

/* Swiss card overrides */
.bc-swiss .bc-val   { font-size: 40px; color: #fff; -webkit-text-fill-color: #fff; }
.bc-swiss .bc-title { color: #fff; font-size: 14px; font-weight: 700; }
.bc-swiss p         { color: rgba(255,255,255,.52); font-size: 12px; line-height: 1.6; }
.bc-swiss .gw-badge { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.24); margin-bottom: 14px; width: 34px; height: 34px; }
.bc-swiss .gw-badge svg { width: 15px; height: 15px; }
/* Schweizer Flagge: klein und inline, kein grosser Klotz */
.bc-ch-cross { margin-top: 14px; display: flex; align-items: center; gap: 8px; }
.bc-ch-cross svg { width: 20px; height: 20px; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,.3); flex-shrink: 0; }
.bc-ch-cross-label { font-size: 11px; font-weight: 700; color: rgba(255,255,255,.5); letter-spacing: .05em; text-transform: uppercase; }

/* Dark badge overrides in bento */
.bc .gw-badge                                 { background: rgba(255,255,255,.1); }
.bc .gw-badge.gb-green svg                    { stroke: #6ee7b7; } .bc .gw-badge.gb-green  { background: rgba(16,185,129,.18); }
.bc .gw-badge.gb-sky svg, .bc .gw-badge.gb-blue svg { stroke: var(--sky); } .bc .gw-badge.gb-sky, .bc .gw-badge.gb-blue { background: rgba(0,120,200,.18); }
.bc .gw-badge.gb-amber svg                    { stroke: #fcd34d; } .bc .gw-badge.gb-amber  { background: rgba(245,158,11,.18); }
.bc .gw-badge.gb-purple svg                   { stroke: #c4b5fd; } .bc .gw-badge.gb-purple { background: rgba(139,92,246,.18); }
.bc .gw-badge.gb-red svg                      { stroke: #fca5a5; } .bc .gw-badge.gb-red    { background: rgba(239,68,68,.18); }

/* Support speed bar */
.speed-track { width: 100%; height: 5px; background: rgba(255,255,255,.1); border-radius: 3px; margin: 14px 0 10px; overflow: hidden; }
.speed-fill  { height: 100%; width: 0; background: linear-gradient(90deg, var(--blue-d), var(--blue-brand)); border-radius: 3px; animation: speedFill 2.5s ease forwards .5s; }
@keyframes speedFill { to { width: 92%; } }

/* Uptime bars */
.ub-bars { display: flex; align-items: flex-end; gap: 3px; height: 36px; margin: 12px 0 8px; }
.ub { width: 8px; border-radius: 3px; background: rgba(52,211,153,.5); animation: ubPulse 2s ease-in-out infinite; animation-delay: calc(var(--i,0) * .12s); }
@keyframes ubPulse { 0%,100%{opacity:.6} 50%{opacity:1} }
.ub:nth-child(1){height:60%} .ub:nth-child(2){height:80%} .ub:nth-child(3){height:100%}
.ub:nth-child(4){height:90%} .ub:nth-child(5){height:75%} .ub:nth-child(6){height:100%}
.ub:nth-child(7){height:85%} .ub.down{background:rgba(239,68,68,.65);height:28%!important;animation:none}
.ub:nth-child(9){height:70%} .ub:nth-child(10){height:100%} .ub:nth-child(11){height:88%}

/* Year timeline */
.yr-bar     { margin-bottom: 14px; }
.yr-track   { width: 100%; height: 4px; background: rgba(255,255,255,.1); border-radius: 2px; margin-bottom: 8px; overflow: hidden; }
.yr-fill    { height: 100%; width: 0; background: linear-gradient(90deg, rgba(139,92,246,.6), rgba(167,139,250,.9)); border-radius: 2px; animation: speedFill 2s ease forwards .3s; }
.yr-milestones { display: flex; justify-content: space-between; }
.yr-chip    { font-size: 10px; font-weight: 700; color: rgba(255,255,255,.65); letter-spacing: .04em; }
.yr-chip.dim{ color: rgba(255,255,255,.28); }

/* BGP wavelines */
.wl-wrap { margin-bottom: 12px; }
.wl { height: 3px; background: linear-gradient(90deg, rgba(248,113,133,.7), transparent); border-radius: 2px; margin-bottom: 6px; }


/* ════════════════════════════════════════════════════════════════
   VERGLEICH
════════════════════════════════════════════════════════════════ */
#vergleich { background: #f5f9ff; }
.cmp-wrap { border-radius: 18px; overflow: hidden; box-shadow: 0 4px 40px rgba(0,50,140,.1), 0 1px 4px rgba(0,0,0,.04); border: 1.5px solid var(--border); }
.cmp-head { display: grid; grid-template-columns: 1.4fr 1.1fr 1.1fr 1.3fr; background: #fff; }
.cmp-hcell { padding: 18px 22px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #94aec8; border-bottom: 2px solid #edf3fa; }
.cmp-hcell.hl { background: var(--grad-btn); color: #fff; border-bottom: 2px solid rgba(255,255,255,.2); font-size: 12px; }
.cmp-row { display: grid; grid-template-columns: 1.4fr 1.1fr 1.1fr 1.3fr; border-top: 1px solid #edf3fa; }
.cmp-row:nth-child(even) { background: #fafcff; }
/* cmp-vals-wrap ist nur für Mobile — auf Desktop unsichtbar im Grid */
.cmp-vals-wrap { display: contents; }
.cmp-cell { padding: 13px 22px; font-size: 13px; color: #4a6180; display: flex; align-items: center; gap: 8px; }
.cmp-cell.feat { font-weight: 700; color: var(--text); font-size: 13.5px; }
.cmp-cell.hl { background: rgba(0,120,200,.04); font-weight: 700; color: var(--text); border-left: 2px solid rgba(0,120,200,.15); }
.ok { color: #0d9488; font-weight: 900; font-size: 14px; }
.no { color: #c8d8e8; font-weight: 900; }
.so { color: #d97706; font-weight: 900; }


/* ════════════════════════════════════════════════════════════════
   TESTIMONIALS
════════════════════════════════════════════════════════════════ */
#referenzen { background: #fff; }

.logo-row {
  display: flex; align-items: center; justify-content: center;
  gap: 40px; flex-wrap: wrap; margin-bottom: 52px;
  padding: 26px 0; border-top: 1px solid #edf3fa; border-bottom: 1px solid #edf3fa;
}
.logo-row img { height: 22px; opacity: .28; filter: grayscale(1); transition: opacity .2s, filter .2s; }
.logo-row img:hover { opacity: .65; filter: grayscale(0); }

.testimonials {
  display: grid; grid-template-columns: 1.65fr 1fr; grid-template-rows: auto auto;
  gap: 20px; margin-bottom: 48px;
}
.tcard { position: relative; overflow: hidden; border-radius: 18px; transition: transform .22s ease, box-shadow .22s ease; }
.tcard-body { height: 100%; }
.tcard:hover { transform: translateY(-4px); }

/* Featured */
.testimonials .tcard:nth-child(1) {
  grid-row: span 2;
  background: linear-gradient(155deg, #0a2050 0%, var(--blue-dd) 50%, var(--blue-d) 100%);
  border: 1.5px solid rgba(0,120,200,.20);
}
.testimonials .tcard:nth-child(1) .tcard-body { padding: 48px 44px; }
.testimonials .tcard:nth-child(1)::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:110px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C200,120 400,0 600,60 C800,120 1000,0 1200,60 L1200,120 L0,120 Z' fill='rgba(255,255,255,0.12)'/%3E%3Cpath d='M0,80 C200,140 400,20 600,80 C800,140 1000,20 1200,80 L1200,120 L0,120 Z' fill='rgba(255,255,255,0.06)'/%3E%3C/svg%3E") no-repeat bottom;
  background-size: cover; pointer-events: none;
}
.testimonials .tcard:nth-child(1) .tcard-quote { font-size: 80px; color: rgba(255,255,255,.12); line-height: .8; margin-bottom: 26px; font-family: Georgia, serif; display: block; }
.testimonials .tcard:nth-child(1) .tcard-stars { color: #fbbf24; font-size: 15px; letter-spacing: 3px; margin-bottom: 20px; display: block; }
.testimonials .tcard:nth-child(1) p { font-size: 18px; color: rgba(255,255,255,.92); line-height: 1.78; font-style: italic; margin-bottom: 36px; font-weight: 400; position: relative; z-index: 1; }
.testimonials .tcard:nth-child(1) .tcard-author { font-size: 11.5px; color: rgba(255,255,255,.68); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; position: relative; z-index: 1; display: block; }
.testimonials .tcard:nth-child(1):hover { box-shadow: 0 24px 64px rgba(0,120,200,.25); }

/* Compact cards */
.testimonials .tcard:nth-child(2),
.testimonials .tcard:nth-child(3) { background: #fff; border: 1.5px solid var(--border); }
.testimonials .tcard:nth-child(2) .tcard-body,
.testimonials .tcard:nth-child(3) .tcard-body { padding: 30px 28px; }
.testimonials .tcard:nth-child(2)::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background: linear-gradient(90deg, #0d9488, transparent); }
.testimonials .tcard:nth-child(3)::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background: linear-gradient(90deg, #1e40af, transparent); }
.testimonials .tcard:nth-child(2) .tcard-quote,
.testimonials .tcard:nth-child(3) .tcard-quote { font-size: 44px; color: #e2ecf7; line-height: .85; margin-bottom: 14px; font-family: Georgia, serif; display: block; }
.testimonials .tcard:nth-child(2) .tcard-stars,
.testimonials .tcard:nth-child(3) .tcard-stars { color: #f59e0b; font-size: 12px; letter-spacing: 2px; margin-bottom: 12px; display: block; }
.testimonials .tcard:nth-child(2) p,
.testimonials .tcard:nth-child(3) p { font-size: 14px; color: #3d5a78; line-height: 1.7; font-style: italic; margin-bottom: 16px; }
.testimonials .tcard:nth-child(2) .tcard-author,
.testimonials .tcard:nth-child(3) .tcard-author { font-size: 11px; font-weight: 700; color: #94aec8; letter-spacing: .04em; display: block; }
.testimonials .tcard:nth-child(2):hover { box-shadow: 0 12px 32px rgba(13,148,136,.1); border-color: #9dd8d2; }
.testimonials .tcard:nth-child(3):hover { box-shadow: 0 12px 32px rgba(30,64,175,.1); border-color: #a5b4fc; }


/* ════════════════════════════════════════════════════════════════
   BLOG (dunkel)
════════════════════════════════════════════════════════════════ */
#blog { background: #060f1e; padding: 100px 0; }
#blog .gw-h2  { color: #fff; }
#blog .gw-sub { color: rgba(255,255,255,.44); }
#blog .gw-label { color: rgba(255,255,255,.72); background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.15); }

.blog-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr; gap: 20px; align-items: stretch; }
.blog-card {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px; overflow: hidden; display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.blog-card:hover { transform: translateY(-5px); border-color: rgba(255,255,255,.2); box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.blog-img { overflow: hidden; position: relative; flex-shrink: 0; height: 160px; display: flex; align-items: center; justify-content: center; }
.blog-grid .blog-card:nth-child(1) .blog-img { height: 210px; }
.blog-img > div { position: absolute; inset: 0; z-index: 0; pointer-events:none; }
.blog-img svg { position: relative; z-index: 2; display: block; }
.blog-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.blog-tag {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 100px; margin-bottom: 12px;
}
.blog-grid .blog-card:nth-child(1) .blog-tag { background: rgba(0,120,200,.2); color: var(--sky); border: 1px solid rgba(0,120,200,.3); }
.blog-grid .blog-card:nth-child(2) .blog-tag { background: rgba(245,158,11,.2); color: #fcd34d; border: 1px solid rgba(245,158,11,.3); }
.blog-grid .blog-card:nth-child(3) .blog-tag { background: rgba(139,92,246,.22); color: #c4b5fd; border: 1px solid rgba(139,92,246,.3); }
.blog-title { font-size: 14px; font-weight: 700; color: rgba(255,255,255,.9); line-height: 1.5; margin-bottom: 12px; flex: 1; }
.blog-grid .blog-card:nth-child(1) .blog-title { font-size: 17px; line-height: 1.4; }
.blog-date  { font-size: 11.5px; color: rgba(255,255,255,.3); font-weight: 600; }
#blog .btn-outline { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: rgba(255,255,255,.8); border-radius: 12px; }
#blog .btn-outline:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.35); color: #fff; }


/* ════════════════════════════════════════════════════════════════
   COMPLIANCE / SECURITY (aurora dunkel)
════════════════════════════════════════════════════════════════ */
.compliance-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.cc-card {
  border-radius: 20px; padding: 32px 18px 28px; text-align: center;
  position: relative; overflow: hidden;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(12px);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  text-decoration: none; display: flex; flex-direction: column; align-items: center;
}
.cc-card:hover { transform: translateY(-7px); background: rgba(255,255,255,.08); }
.cc-ring { display: none; } /* clean up unused ring element */
/* cc-card::before: farbige Topline */
.cc-card::before { content:''; position:absolute; top:0; left:24px; right:24px; height:1.5px; border-radius:0 0 2px 2px; pointer-events:none; }

.cc-gdpr  { border-color: rgba(0,120,200,.20);   } .cc-gdpr::before  { background: linear-gradient(90deg, transparent, rgba(0,120,200,.7), transparent); }   .cc-gdpr:hover  { border-color: rgba(0,120,200,.42);   box-shadow: 0 16px 48px rgba(0,120,200,.20); }
.cc-pci   { border-color: rgba(16,185,129,.22);  } .cc-pci::before   { background: linear-gradient(90deg, transparent, rgba(16,185,129,.7), transparent); }  .cc-pci:hover   { border-color: rgba(16,185,129,.45);  box-shadow: 0 16px 48px rgba(16,185,129,.2); }
.cc-hipaa { border-color: rgba(245,158,11,.22);  } .cc-hipaa::before { background: linear-gradient(90deg, transparent, rgba(245,158,11,.7), transparent); }  .cc-hipaa:hover { border-color: rgba(245,158,11,.45);  box-shadow: 0 16px 48px rgba(245,158,11,.2); }
.cc-nist  { border-color: rgba(139,92,246,.22);  } .cc-nist::before  { background: linear-gradient(90deg, transparent, rgba(139,92,246,.7), transparent); }  .cc-nist:hover  { border-color: rgba(139,92,246,.45);  box-shadow: 0 16px 48px rgba(139,92,246,.22); }
.cc-gebv  { border-color: rgba(244,63,94,.22);   } .cc-gebv::before  { background: linear-gradient(90deg, transparent, rgba(244,63,94,.7), transparent); }   .cc-gebv:hover  { border-color: rgba(244,63,94,.45);   box-shadow: 0 16px 48px rgba(244,63,94,.2); }

.cc-icon { width: 58px; height: 58px; border-radius: 18px; margin: 0 auto 18px; display: flex; align-items: center; justify-content: center; }
.cc-icon svg { width: 24px; height: 24px; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cc-gdpr  .cc-icon { background: rgba(0,120,200,.2);   border: 1px solid rgba(0,120,200,.3);   } .cc-gdpr  .cc-icon svg { stroke: #60c8f5; }
.cc-pci   .cc-icon { background: rgba(16,185,129,.2);  border: 1px solid rgba(16,185,129,.3);  } .cc-pci   .cc-icon svg { stroke: #6ee7b7; }
.cc-hipaa .cc-icon { background: rgba(245,158,11,.2);  border: 1px solid rgba(245,158,11,.3);  } .cc-hipaa .cc-icon svg { stroke: #fcd34d; }
.cc-nist  .cc-icon { background: rgba(139,92,246,.2);  border: 1px solid rgba(139,92,246,.3);  } .cc-nist  .cc-icon svg { stroke: #c4b5fd; }
.cc-gebv  .cc-icon { background: rgba(244,63,94,.2);   border: 1px solid rgba(244,63,94,.3);   } .cc-gebv  .cc-icon svg { stroke: #fda4af; }

.cc-name { font-size: 20px; font-weight: 900; color: #fff; margin-bottom: 10px; letter-spacing: -.01em; }
.cc-text { font-size: 12px; color: rgba(255,255,255,.44); line-height: 1.6; margin-bottom: 18px; flex: 1; }
.cc-cert {
  display: inline-flex; align-items: center;
  font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 100px; margin-top: auto;
}
.cc-gdpr  .cc-cert { background: rgba(0,120,200,.15);   color: var(--sky); border: 1px solid rgba(0,120,200,.28); }
.cc-pci   .cc-cert { background: rgba(16,185,129,.15);  color: #6ee7b7; border: 1px solid rgba(16,185,129,.28); }
.cc-hipaa .cc-cert { background: rgba(245,158,11,.15);  color: #fcd34d; border: 1px solid rgba(245,158,11,.28); }
.cc-nist  .cc-cert { background: rgba(139,92,246,.15);  color: #c4b5fd; border: 1px solid rgba(139,92,246,.28); }
.cc-gebv  .cc-cert { background: rgba(244,63,94,.15);   color: #fda4af; border: 1px solid rgba(244,63,94,.28); }

/* Tech Chips */
.stack-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 48px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: 100px; font-size: 12.5px; font-weight: 600;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.7); transition: all .2s; text-decoration: none;
}
.chip:hover { background: rgba(0,120,200,.15); border-color: rgba(0,120,200,.35); color: var(--sky); transform: translateY(-2px); }


/* ════════════════════════════════════════════════════════════════
   KONTAKT
════════════════════════════════════════════════════════════════ */
#kontakt, .contact-section { background: #f0f6ff; padding: 100px 0; }
.contact-wrap {
  display: grid; grid-template-columns: 5fr 7fr;
  border-radius: 22px; overflow: hidden;
  box-shadow: 0 8px 60px rgba(0,40,120,.14), 0 2px 8px rgba(0,0,0,.06);
  border: 1.5px solid var(--border);
}
.contact-info {
  background: linear-gradient(160deg, #0a2050 0%, var(--blue-dd) 45%, var(--blue-d) 100%);
  padding: 52px 44px; color: #fff; position: relative; overflow: hidden;
}
.contact-info::before { content:''; position:absolute; width:280px; height:280px; border-radius:50%; background:rgba(255,255,255,.05); top:-120px; right:-90px; pointer-events:none; }
.contact-info::after  { content:''; position:absolute; bottom:0; left:0; right:0; height:120px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C200,120 400,0 600,60 C800,120 1000,0 1200,60 L1200,120 L0,120 Z' fill='rgba(255,255,255,0.12)'/%3E%3Cpath d='M0,80 C200,140 400,20 600,80 C800,140 1000,20 1200,80 L1200,120 L0,120 Z' fill='rgba(255,255,255,0.06)'/%3E%3C/svg%3E") no-repeat bottom; background-size: cover; pointer-events: none; }
.contact-info-inner   { position: relative; z-index: 1; }
.contact-info .gw-label { color: rgba(255,255,255,.75); background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.18); }
.contact-info h2 { font-size: 24px; font-weight: 800; color: #fff; margin-bottom: 12px; line-height: 1.22; }
.contact-info p  { font-size: 13.5px; color: rgba(255,255,255,.55); line-height: 1.75; margin-bottom: 32px; }
.contact-list    { margin-bottom: 30px; }
.contact-list li { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.ci-icon { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; }
.ci-icon svg { width: 16px; height: 16px; fill: none; stroke: rgba(255,255,255,.85); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ci-label { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 2px; display: block; }
.ci-val   { font-size: 14px; font-weight: 600; color: #fff; display: block; }
.contact-trust { display: flex; flex-wrap: wrap; gap: 8px; }
.ct-badge { font-size: 11px; font-weight: 600; padding: 5px 11px; border-radius: 100px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.75); }

.contact-form { background: #fff; padding: 52px 48px; }
.contact-form-title { font-size: 21px; font-weight: 800; color: var(--text); margin-bottom: 5px; }
.contact-form-sub   { font-size: 13px; color: var(--muted); margin-bottom: 28px; }
.form-row   { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 12px; font-weight: 700; color: #1e3a5f; margin-bottom: 6px; letter-spacing: .03em; }
.form-group input,
.form-group textarea { width: 100%; padding: 11px 14px; border: 1.5px solid var(--border); border-radius: 10px; font-size: 13.5px; font-family: var(--font); color: var(--text); background: #fafcff; outline: none; transition: border-color .2s, box-shadow .2s; box-sizing: border-box; -webkit-appearance: none; appearance: none; }
/* iOS date/time: gleiche Grösse wie alle anderen Felder */
.form-group input[type="date"],
.form-group input[type="time"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; min-width: 0; box-sizing: border-box;
  min-height: 46px; line-height: 1.4;
  display: flex; align-items: center;
}
.form-group input:focus,
.form-group textarea:focus { border-color: var(--blue); background: #fff; box-shadow: 0 0 0 3px rgba(0,120,200,.1); }
.form-group textarea { min-height: 96px; resize: vertical; }
.form-msg { margin-bottom: 12px; font-size: 13px; padding: 10px 14px; border-radius: 8px; display: none; }
.form-msg.ok  { background: #e6faf5; color: #065f46; border: 1px solid #a7f3d0; display: block; }
.form-msg.err { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; display: block; }


/* ════════════════════════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════════════════════════ */
footer { background: #020c1a; padding: 80px 0 0; position: relative; }
footer::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(0,120,200,.45) 30%, rgba(60,177,243,.22) 60%, transparent 100%);
}
.footer-grid {
  display: grid; grid-template-columns: 2.2fr 1fr 1fr 1.2fr;
  gap: 48px; padding-bottom: 64px; border-bottom: 1px solid rgba(255,255,255,.06);
}
.fc:first-child img { height: 26px; opacity: .6; display: block; margin-bottom: 16px; filter: brightness(0) invert(1); }
.fbtext  { font-size: 13.5px; color: rgba(255,255,255,.62); line-height: 1.8; max-width: 260px; margin-bottom: 22px; }
.fbadges { display: flex; flex-wrap: wrap; gap: 8px; }
.fbadge  { font-size: 11px; font-weight: 600; padding: 5px 12px; border-radius: 100px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.62); }
.fc h4, .fc h5 { font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.42); margin-bottom: 20px; }
.fc ul li { margin-bottom: 12px; }
.fc ul li a { font-size: 13.5px; color: rgba(255,255,255,.62); transition: color .18s; }
.fc ul li a:hover { color: #fff; }
.fbot      { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; }
.fbot p, .fbot-copy { font-size: 12px; color: rgba(255,255,255,.45); }
.fsoc, .fbot-links  { display: flex; gap: 24px; }
.fsoc a, .fbot-links a { font-size: 12px; color: rgba(255,255,255,.48); transition: color .18s; }
.fsoc a:hover, .fbot-links a:hover { color: rgba(255,255,255,.65); }


/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .hero-grid     { grid-template-columns: 1fr 360px; gap: 36px; }
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .prod-sec      { grid-column: 1 / -1; }
  .footer-grid   { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 28px; }
  .trust-grid    { grid-template-columns: repeat(3, 1fr); }
  .trust-inner   { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .section { padding: 72px 0; }
  #warum-galaxyweb, #blog, #kontakt, .contact-section { padding: 72px 0; }
  .hero-grid     { grid-template-columns: 1fr; }
  /* Hero-Card auf Mobile unter dem Text, Animation pausieren */
  .hero-card     { display: block; margin-top: 32px; max-width: 480px; animation: none; }
  .hc-body       { display: block !important; }
  .stat-grid     { grid-template-columns: repeat(2, 1fr); }
  .stat-val      { font-size: clamp(32px, 8vw, 52px); }
  .bento-grid    { grid-template-columns: repeat(2, 1fr); }
  .bc-swiss      { grid-column: span 2; grid-row: span 1; }
  .prob-grid     { grid-template-columns: repeat(2, 1fr); }
  .testimonials  { grid-template-columns: 1fr; }
  .testimonials .tcard:nth-child(1) { grid-row: span 1; }
  .blog-grid     { grid-template-columns: 1fr; }
  .compliance-grid { grid-template-columns: repeat(3, 1fr); }
  .contact-wrap  { grid-template-columns: 1fr; }
  .footer-grid   { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 640px) {
  .section { padding: 56px 0; }
  #warum-galaxyweb, #blog, #kontakt, .contact-section { padding: 56px 0; }
  .hero h1, .hero-h1 { font-size: 30px; }
  .bento-grid    { grid-template-columns: 1fr; }
  .bc-swiss, .bc-wide, .bc-years-card { grid-column: span 1; }
  .stat-grid     { grid-template-columns: 1fr 1fr; }
  .stat-val      { font-size: clamp(28px, 9vw, 44px); }
  .products-grid { grid-template-columns: 1fr; }
  .compliance-grid { grid-template-columns: 1fr 1fr; }
  .prob-grid     { grid-template-columns: 1fr; }
  /* Trust-Bar: 2 Spalten auf kleinen Screens */
  .trust-grid    { grid-template-columns: repeat(2, 1fr); }
  .trust-inner   { grid-template-columns: repeat(2, 1fr); }
  .footer-grid   { grid-template-columns: 1fr; }
  /* Kontaktformular: Datum + Uhrzeit untereinander */
  .contact-form  { padding: 32px 24px; }
  .contact-info  { padding: 36px 28px; }
  .form-row      { grid-template-columns: 1fr; }
  .hero-stats    { gap: 16px; flex-wrap: wrap; }

  /* Vergleichstabelle → Card-Layout auf Mobile */
  .cmp-wrap      { overflow: visible; box-shadow: none; border: none; background: transparent; border-radius: 0; }
  .cmp-head      { display: none; }
  .cmp-row {
    display: block;
    background: #fff;
    border-radius: 14px;
    margin-bottom: 10px;
    border: 1.5px solid #dce8f2;
    overflow: hidden;
  }
  .cmp-cell.feat {
    display: block;
    background: #eef5fb;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 800;
    color: var(--text);
    border-bottom: 1px solid #dce8f2;
    width: 100%;
    box-sizing: border-box;
  }
  /* Die 3 Werte-Zellen als Grid-Row */
  .cmp-row::after {
    content: '';
    display: block;
    clear: both;
  }
  .cmp-row .cmp-vals-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
  .cmp-row .cmp-cell:not(.feat) {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px 8px 14px;
    font-size: 12px;
    box-sizing: border-box;
    gap: 4px;
    border-right: 1px solid #edf3fa;
    min-width: 0;
  }
  .cmp-row .cmp-cell:last-child { border-right: none; }
  .cmp-cell-label {
    font-size: 9px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: #94aec8;
    display: block; margin-bottom: 3px;
  }
  .cmp-cell-label.gw { color: var(--blue); }
  .cmp-row .cmp-cell.hl {
    background: rgba(0,120,200,.05);
    border-left: none;
    font-weight: 700;
  }
}


/* ─── Trust-Bar item-spezifische Klassen (Aliase) ─── */
.parallax-section { }   /* kein Extra-Stil nötig */
/* .ti-* sind reine Modifier auf .trust-ti – kein Stil nötig */
.ti-ch, .ti-up, .ti-dsgvo, .ti-sup, .ti-exp, .ti-iso { }
.ti-item-ch, .ti-item-up, .ti-item-dsgvo,
.ti-item-sup, .ti-item-exp, .ti-item-iso { }
/* Cloudflare email obfuscation */
.__cf_email__ { color: inherit; }

/* Swiss Cross */
.bc-ch-cross { margin-top: 20px; }
.bc-ch-cross svg { width: 38px; height: 38px; border-radius: 7px; box-shadow: 0 4px 16px rgba(0,0,0,.35); }


/* CC Card wave bottom */
.cc-card::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 52px;
  background-size: cover; pointer-events: none; border-radius: 0 0 20px 20px;
  opacity: 0.55;
}
.cc-gdpr::after  { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 80' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C133,80 267,0 400,40 C533,80 667,0 800,40 L800,80 L0,80 Z' fill='rgba(0,120,200,0.22)'/%3E%3Cpath d='M0,55 C133,95 267,15 400,55 C533,95 667,15 800,55 L800,80 L0,80 Z' fill='rgba(0,120,200,0.14)'/%3E%3C/svg%3E") no-repeat bottom; background-size: cover; }
.cc-pci::after   { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 80' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C133,80 267,0 400,40 C533,80 667,0 800,40 L800,80 L0,80 Z' fill='rgba(16,185,129,0.22)'/%3E%3Cpath d='M0,55 C133,95 267,15 400,55 C533,95 667,15 800,55 L800,80 L0,80 Z' fill='rgba(16,185,129,0.14)'/%3E%3C/svg%3E") no-repeat bottom; background-size: cover; }
.cc-hipaa::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 80' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C133,80 267,0 400,40 C533,80 667,0 800,40 L800,80 L0,80 Z' fill='rgba(245,158,11,0.22)'/%3E%3Cpath d='M0,55 C133,95 267,15 400,55 C533,95 667,15 800,55 L800,80 L0,80 Z' fill='rgba(245,158,11,0.14)'/%3E%3C/svg%3E") no-repeat bottom; background-size: cover; }
.cc-nist::after  { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 80' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C133,80 267,0 400,40 C533,80 667,0 800,40 L800,80 L0,80 Z' fill='rgba(139,92,246,0.22)'/%3E%3Cpath d='M0,55 C133,95 267,15 400,55 C533,95 667,15 800,55 L800,80 L0,80 Z' fill='rgba(139,92,246,0.14)'/%3E%3C/svg%3E") no-repeat bottom; background-size: cover; }
.cc-gebv::after  { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 80' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C133,80 267,0 400,40 C533,80 667,0 800,40 L800,80 L0,80 Z' fill='rgba(244,63,94,0.22)'/%3E%3Cpath d='M0,55 C133,95 267,15 400,55 C533,95 667,15 800,55 L800,80 L0,80 Z' fill='rgba(244,63,94,0.14)'/%3E%3C/svg%3E") no-repeat bottom; background-size: cover; }

/* Badge z-index damit Welle dahinter liegt */
.cc-cert { position: relative; z-index: 3; }
.cc-icon { position: relative; z-index: 3; }
.cc-name { position: relative; z-index: 3; }
.cc-text { position: relative; z-index: 3; }

/* Mehr padding unten für Welle */
.cc-card { padding-bottom: 36px; }


/* Security card: 2-Spalten-Layout im Body */
.prod-body-sec { flex-direction: row; flex-wrap: wrap; gap: 0 28px; }
.prod-body-sec > div { flex: 1; min-width: 180px; }
.prod-body-sec .prod-feats { flex: 1; min-width: 200px; }

/* Vergleich: Labels nur auf Desktop verstecken */
@media (min-width: 641px) {
  .cmp-cell-label { display: none; }
}


/* Stat cards als Links */
a.stat-card { text-decoration: none; cursor: pointer; }
/* Stat card hover: Bottom-Glow-Line + Card leuchtet auf */
a.stat-card { text-decoration: none; cursor: pointer; }
a.stat-card::before {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  opacity: 0; transition: opacity .28s ease; z-index: 6;
}
.stat-s1.stat-card::before { background: linear-gradient(90deg, transparent, var(--sky), transparent); }
.stat-s2.stat-card::before { background: linear-gradient(90deg, transparent, #6ee7b7, transparent); }
.stat-s3.stat-card::before { background: linear-gradient(90deg, transparent, #fde68a, transparent); }
.stat-s4.stat-card::before { background: linear-gradient(90deg, transparent, #ddd6fe, transparent); }
a.stat-card:hover::before { opacity: 1; }
a.stat-card:hover { border-color: rgba(255,255,255,.26); }
/* "→" als echtes Element über gw-glass-inner */
.stat-card .gw-glass-inner::after {
  content: 'Mehr erfahren →'; position: absolute; bottom: 0; right: 0;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  opacity: 0; transform: translateY(4px);
  transition: opacity .25s ease, transform .25s ease; z-index: 6;
}
.stat-s1 .gw-glass-inner::after { color: var(--sky); }
.stat-s2 .gw-glass-inner::after { color: #6ee7b7; }
.stat-s3 .gw-glass-inner::after { color: #fde68a; }
.stat-s4 .gw-glass-inner::after { color: #ddd6fe; }
a.stat-card:hover .gw-glass-inner::after { opacity: 1; transform: translateY(0); }

/* Blog card enhancements */
.blog-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.blog-meta  { margin-top: auto; padding-top: 12px; }
.blog-topics { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.btopic {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 100px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.5);
}
.blog-read  { display: flex; align-items: center; justify-content: space-between; }
.blog-cta   {
  font-size: 12px; font-weight: 700; color: rgba(255,255,255,.5);
  transition: color .2s, gap .2s; display: inline-flex; align-items: center; gap: 4px;
}
.blog-card:hover .blog-cta { color: rgba(255,255,255,.9); }
.blog-grid .blog-card:nth-child(1) .blog-cta { color: var(--sky); }
.blog-grid .blog-card:nth-child(1):hover .blog-cta { color: #bae6fd; }
.blog-grid .blog-card:nth-child(2) .blog-cta { color: #fcd34d; }
.blog-grid .blog-card:nth-child(2):hover .blog-cta { color: #fde68a; }
.blog-grid .blog-card:nth-child(3) .blog-cta { color: #c4b5fd; }
.blog-grid .blog-card:nth-child(3):hover .blog-cta { color: #ddd6fe; }
/* Override old blog-date positioning now it's inside blog-read */
.blog-read .blog-date { font-size: 11px; color: rgba(255,255,255,.28); font-weight: 600; }


/* CC card: subtile farbige Tint nur im oberen Bereich (kein harter Kreis) */
.cc-gdpr  { background: linear-gradient(180deg, rgba(0,120,200,.07) 0%, rgba(255,255,255,.04) 45%); }
.cc-pci   { background: linear-gradient(180deg, rgba(16,185,129,.07) 0%, rgba(255,255,255,.04) 45%); }
.cc-hipaa { background: linear-gradient(180deg, rgba(245,158,11,.07) 0%, rgba(255,255,255,.04) 45%); }
.cc-nist  { background: linear-gradient(180deg, rgba(139,92,246,.07) 0%, rgba(255,255,255,.04) 45%); }
.cc-gebv  { background: linear-gradient(180deg, rgba(244,63,94,.07) 0%, rgba(255,255,255,.04) 45%); }
/* Hover: stärkere Tint + glow */
.cc-gdpr:hover  { background: linear-gradient(180deg, rgba(0,120,200,.12) 0%, rgba(255,255,255,.06) 55%); box-shadow: 0 20px 48px rgba(0,120,200,.16); }
.cc-pci:hover   { background: linear-gradient(180deg, rgba(16,185,129,.12) 0%, rgba(255,255,255,.06) 55%); box-shadow: 0 20px 48px rgba(16,185,129,.16); }
.cc-hipaa:hover { background: linear-gradient(180deg, rgba(245,158,11,.12) 0%, rgba(255,255,255,.06) 55%); box-shadow: 0 20px 48px rgba(245,158,11,.16); }
.cc-nist:hover  { background: linear-gradient(180deg, rgba(139,92,246,.12) 0%, rgba(255,255,255,.06) 55%); box-shadow: 0 20px 48px rgba(139,92,246,.18); }

/* ── 404 Page ─────────────────────────────────────────────── */
.error-page {
  min-height: 60vh;
  display: flex; align-items: center; justify-content: center;
  padding: 80px 24px; position: relative; overflow: hidden;
}
.error-page::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 30% 20%, rgba(0,152,239,.06) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 70%, rgba(60,177,243,.05) 0%, transparent 70%);
}
.error-content { text-align: center; max-width: 560px; position: relative; z-index: 1; }
.error-content .hero-label { margin-left: auto; margin-right: auto; }
.error-content .hero-sub { margin-left: auto; margin-right: auto; }
.error-btns { justify-content: center; }
.error-code {
  font-size: clamp(100px, 18vw, 180px); font-weight: 900; line-height: 1;
  letter-spacing: -0.04em; margin: 0 0 8px; user-select: none;
  background: var(--grad-brand);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.error-links { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--border); }
.error-links-title {
  font-size: 12px; font-weight: 700; color: #8fa4b8;
  text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 14px;
}
.error-links-grid { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.error-links-grid a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 8px; background: var(--bg);
  color: var(--text); font-size: 13px; font-weight: 600;
  text-decoration: none; transition: all .15s ease;
}
.error-links-grid a:hover { background: #e0f4ff; color: var(--blue-d); }
.error-links-grid a svg { width: 16px; height: 16px; color: #8fa4b8; flex-shrink: 0; }
.error-links-grid a:hover svg { color: var(--blue); }
@media (max-width: 640px) {
  .error-page { padding: 60px 20px; min-height: 50vh; }
  .error-btns { flex-direction: column; align-items: center; }
  .error-btns .btn { width: 100%; max-width: 280px; }
  .error-links-grid { flex-direction: column; align-items: center; }
}
.hc-row:last-child { border-bottom: none; }

/* ── Product Hero (alternative to homepage floating card) ── */
.hero-product { padding: 100px 0 60px; }
.hero-product .hero-text { max-width: 680px; }

.hero-metrics {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 16px; margin-top: 48px;
}
.hero-metric {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px; padding: 20px; text-align: center;
  transition: all .2s ease; backdrop-filter: blur(8px);
}
.hero-metric:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); transform: translateY(-2px); }
.hero-metric-val {
  font-size: clamp(28px, 3vw, 36px); font-weight: 900; color: #fff;
  letter-spacing: -.02em; line-height: 1.1;
}
.hero-metric-val span { color: var(--blue-brand); }
.hero-metric-label { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.45); margin-top: 4px; letter-spacing: .02em; }

.hero-domains {
  display: flex; gap: 8px; margin-top: 20px; flex-wrap: wrap;
}
.hero-domain-pill {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(60,177,243,.12); border: 1px solid rgba(60,177,243,.25);
  border-radius: 8px; padding: 6px 12px;
  font-size: 13px; font-weight: 700; color: var(--blue-brand);
}
.hero-domain-pill svg { width: 14px; height: 14px; }

@media (max-width: 768px) {
  .hero-metrics { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .hero-product { padding: 80px 0 40px; }
}