/* ══════════════════════════════════════════════════════════════
   swiss-hosted.css — Swiss Hosting / Datensouveränität / DSGVO
   Prefix: SW-  · nutzt Tokens aus base.css (nie hardcoden wo Token existiert)
   ══════════════════════════════════════════════════════════════ */

/* Shared glass-card mixin values reused below:
   bg rgba(255,255,255,.55) · blur(14px) · border rgba(12,11,8,.08) · radius 16px */

/* ────────── Section shell ────────── */
.SW-SEC {
  position: relative;
  padding: 120px 44px;
  background: transparent;
}
.SW-IN {
  max-width: 1340px;
  margin: 0 auto;
}

/* ══════════ PAGE HERO ══════════ */
#SW-HERO {
  position: relative;
  padding: 160px 44px 90px;
  overflow: hidden;
}
.SW-HERO-IN {
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}
/* dezentes Schweizer-Kreuz-Motiv im Hintergrund */
.SW-HERO-CROSS {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(560px, 86vw);
  height: min(560px, 86vw);
  transform: translate(-50%, -54%);
  opacity: .05;
  z-index: 1;
  pointer-events: none;
}
.SW-HERO-CROSS svg { width: 100%; height: 100%; display: block; }

.SW-HERO-BADGE {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px 7px 12px;
  border-radius: 100px;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(12,11,8,.08);
  box-shadow: var(--gl-shd-l);
  font-family: var(--M);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--k2);
  margin-bottom: 26px;
}
.SW-HERO-BADGE svg { width: 16px; height: 16px; display: block; border-radius: 3px; }

.SW-HERO-TI {
  font-family: var(--S);
  font-weight: 700;
  font-size: clamp(42px, 6vw, 80px);
  line-height: .98;
  letter-spacing: -.03em;
  color: var(--k);
  margin: 0 0 24px;
}
.SW-HERO-ACC {
  font-family: var(--R);
  font-style: italic;
  font-weight: 600;
  color: #A78BFA;
  letter-spacing: -.012em;
}
.SW-HERO-LEAD {
  font-family: var(--S);
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.62;
  color: rgba(12,11,8,.72);
  max-width: 680px;
  margin: 0 auto 34px;
}
.SW-HERO-LEAD strong { color: var(--k); font-weight: 600 }

.SW-HERO-CTAS {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ══════════ WHY CARDS ══════════ */
.SW-WHY-GRID {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 56px;
}
.SW-CARD {
  position: relative;
  padding: 30px 26px;
  border-radius: 16px;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(12,11,8,.08);
  box-shadow: var(--gl-shd);
  transition: var(--trans);
}
.SW-CARD:hover {
  transform: translateY(-3px);
  border-color: rgba(155,139,247,.45);
  box-shadow: 0 18px 46px -18px var(--purple-glow), var(--gl-shd);
}
.SW-CARD-ICO {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(155,139,247,.12);
  border: 1px solid rgba(155,139,247,.24);
  color: var(--p3);
  margin-bottom: 20px;
}
.SW-CARD-ICO svg { width: 22px; height: 22px; display: block }
.SW-CARD-TI {
  font-family: var(--S);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -.015em;
  color: var(--k);
  margin: 0 0 10px;
}
.SW-CARD-D {
  font-family: var(--S);
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(12,11,8,.66);
  margin: 0;
}

/* ══════════ SERVER OPTIONS ══════════ */
.SW-SRV-GRID {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 56px;
}
.SW-SRV {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 34px 30px;
  border-radius: 16px;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(12,11,8,.08);
  box-shadow: var(--gl-shd);
  transition: var(--trans);
  overflow: hidden;
}
.SW-SRV:hover {
  transform: translateY(-4px);
  border-color: rgba(155,139,247,.45);
  box-shadow: 0 22px 54px -20px var(--purple-glow), var(--gl-shd);
}
/* Featured (Enterprise) */
.SW-SRV-FEAT {
  border-color: rgba(155,139,247,.4);
  background: linear-gradient(180deg, rgba(155,139,247,.08), rgba(255,255,255,.55) 42%);
}
.SW-SRV-FEAT::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(155,139,247,.55), transparent 55%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.SW-SRV-TAG {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  font-family: var(--M);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--p3);
  padding: 5px 11px;
  border-radius: 100px;
  background: rgba(155,139,247,.12);
  border: 1px solid rgba(155,139,247,.24);
  margin-bottom: 20px;
}
.SW-DOT {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--p3);
  box-shadow: 0 0 0 3px rgba(155,139,247,.18);
}
.SW-SRV-ICO {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(155,139,247,.1);
  border: 1px solid rgba(155,139,247,.2);
  color: var(--p3);
  margin-bottom: 18px;
}
.SW-SRV-ICO svg { width: 26px; height: 26px; display: block }
.SW-SRV-N {
  font-family: var(--S);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -.02em;
  color: var(--k);
  margin: 0 0 8px;
}
.SW-SRV-D {
  font-family: var(--S);
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(12,11,8,.68);
  margin: 0 0 20px;
}
.SW-SRV-FEATS {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.SW-SRV-F {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-family: var(--S);
  font-size: 14px;
  line-height: 1.5;
  color: rgba(12,11,8,.78);
}
.SW-SRV-CHK {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(62,122,80,.14);
  color: var(--ok);
  font-size: 11px;
  font-weight: 700;
}
.SW-SRV-CTA {
  margin-top: auto;
}

/* ══════════ TRUST BAR ══════════ */
#SW-TRUST {
  padding: 70px 44px;
  position: relative;
}
.SW-TB {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 14px;
}
.SW-TB-I {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 24px;
  border-radius: 14px;
  background: rgba(255,255,255,.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(12,11,8,.07);
  box-shadow: var(--gl-shd-l);
  transition: var(--trans);
}
.SW-TB-I:hover { border-color: rgba(155,139,247,.4); transform: translateY(-2px) }
.SW-TB-ICO {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--p3);
}
.SW-TB-ICO svg { width: 22px; height: 22px; display: block; border-radius: 3px }
.SW-TB-TX { display: flex; flex-direction: column; line-height: 1.2 }
.SW-TB-K {
  font-family: var(--S);
  font-weight: 600;
  font-size: 15px;
  color: var(--k);
}
.SW-TB-S {
  font-family: var(--M);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-ink);
  margin-top: 3px;
}

/* ══════════ CLOSING CTA ══════════ */
#SW-CTA { padding: 40px 44px 130px }
.SW-CTA-CARD {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  padding: 64px 48px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(155,139,247,.1), rgba(255,255,255,.55) 60%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(155,139,247,.3);
  box-shadow: var(--gl-shd);
  overflow: hidden;
}
.SW-CTA-CROSS {
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 240px;
  height: 240px;
  opacity: .06;
  pointer-events: none;
}
.SW-CTA-CROSS svg { width: 100%; height: 100% }
.SW-CTA-EY {
  font-family: var(--M);
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 18px;
  position: relative;
}
.SW-CTA-TI {
  font-family: var(--S);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: -.025em;
  color: var(--k);
  margin: 0 0 18px;
  position: relative;
}
.SW-CTA-TI-G {
  font-family: var(--R);
  font-style: italic;
  font-weight: 600;
  color: #A78BFA;
}
.SW-CTA-LEAD {
  font-family: var(--S);
  font-size: 16px;
  line-height: 1.6;
  color: rgba(12,11,8,.72);
  max-width: 560px;
  margin: 0 auto 30px;
  position: relative;
}
.SW-CTA-BTNS {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
}

/* ══════════════════════════ RESPONSIVE ══════════════════════════ */
@media (max-width: 1024px) {
  .SW-WHY-GRID { grid-template-columns: repeat(2, 1fr) }
  .SW-SRV-GRID { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto }
}
@media (max-width: 768px) {
  .SW-SEC { padding: 80px 20px }
  #SW-HERO { padding: 120px 20px 64px }
  #SW-TRUST { padding: 48px 20px }
  #SW-CTA { padding: 24px 20px 90px }
  .SW-WHY-GRID { grid-template-columns: 1fr; margin-top: 40px }
  .SW-SRV-GRID { margin-top: 40px }
  .SW-CTA-CARD { padding: 46px 26px }
  .SW-HERO-CTAS { flex-direction: column; align-items: stretch }
  .SW-HERO-CTAS .BF, .SW-HERO-CTAS .BG { width: 100% }
  .SW-TB-I { flex: 1 1 100%; justify-content: center }
}