/* rocketone.io — Design-System gemäss DESIGN.md (2026-07-05) */

/* ---------- Fonts (selbst gehostet, OFL) ---------- */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/poppins-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/poppins-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/inter-var.woff2') format('woff2');
}

/* ---------- Tokens ---------- */
:root {
  --navy: #113577;
  --navy-deep: #0C2A61;
  --periwinkle: #5D71FB;
  --periwinkle-dark: #4353D9;
  --blue: #578FF8;
  --cyan: #3CAAFE;
  --cyan-light: #67C6F7;
  --pink: #E05DC6;
  --pink-bright: #F160BB;
  --slate: #607190;
  --bg: #FFFFFF;
  --bg-soft: #F7F9FF;
  --border: #E4E9F5;
  --on-navy-muted: #B9C6E8;
  --error: #C13515;
  --gradient: linear-gradient(135deg, #3CAAFE 0%, #5D71FB 55%, #E05DC6 100%);
  --radius-card: 24px;
  --radius-field: 12px;
  --shadow-carousel: 0 8px 24px rgb(17 53 119 / 0.08);
  --container: 1152px;
  --font-head: 'Poppins', 'Avenir Next', 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif;
}

/* ---------- Reset / Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%; /* iOS: keine Auto-Vergrösserung im Querformat */
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--navy);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--navy); }
p a { text-decoration: underline; text-underline-offset: 2px; }

h1, h2, h3 { font-family: var(--font-head); margin: 0 0 0.5em; }
.display {
  /* Cap 62 statt 64: nowrap-Hero-Zeile passt sicher in --container (1152),
     alle Seiteninhalte teilen dieselbe linke Layout-Achse (D-029) */
  font-size: clamp(38px, 5vw, 62px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
h2, .h2 {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
h3, .h3 { font-size: clamp(20px, 2.2vw, 24px); font-weight: 600; line-height: 1.3; }
.lead { font-size: clamp(18px, 2vw, 20px); color: var(--slate); max-width: 34em; }
.small { font-size: 14px; line-height: 1.5; }
.muted { color: var(--slate); }
p { max-width: 68ch; }

/* Verlaufs-Akzentwort (D-009) */
.accent {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Rotierendes Hero-Wort (D-018/D-020/D-021)
   Wörter im Grid übereinander gestapelt: Box-Breite = längstes Wort, dadurch
   nie ein Reflow beim Wechsel. .hero-line hält «Deine IT läuft» + Wort als
   unzertrennliche nowrap-Einheit. Schrift bleibt gross: breiter Hero-Container
   + 5vw-Skala sorgen dafür, dass die Zeile ab ~760 px immer passt; darunter
   bekommt das Wort bewusst eine eigene Zeile (Block-Layout). */
.hero-line { white-space: nowrap; }
.rotator {
  display: inline-grid;
  vertical-align: baseline;
  text-align: left;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .rotator { display: grid; }        /* Wort auf eigener grosser Zeile */
  .hero .display br { display: none; } /* Block bricht selbst — kein Doppelumbruch */
}
.rotator__word {
  grid-area: 1 / 1;
  justify-self: start;
  /* Grid-Items sind blockifiziert: Box = 1.05em Zeilenhöhe. background-clip:text
     malt nur innerhalb der Box — Unterlängen (g, j, p) blieben leer. Padding
     erweitert die Paint-Box, Negativ-Margin hält das Layout exakt gleich. */
  padding: 0.1em 0 0.18em;
  margin: -0.1em 0 -0.18em;
  opacity: 0;
  transform: translateY(0.4em);
  transition: opacity 0.4s ease, transform 0.4s ease;
  will-change: opacity, transform;
  pointer-events: none;
}
.rotator__word.is-active {
  opacity: 1;
  transform: none;
}
.rotator__word.is-leaving {
  opacity: 0;
  transform: translateY(-0.4em);
}
@media (prefers-reduced-motion: reduce) {
  .rotator__word {
    transition: none;
    transform: none;
  }
  .rotator__word.is-leaving { transform: none; }
}

/* ---------- Layout ---------- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: 24px;
}
@media (min-width: 900px) { .container { padding-inline: 48px; } }

.section { padding-block: 64px; }
@media (min-width: 900px) { .section { padding-block: 112px; } }
.section--soft { background: var(--bg-soft); }
.section-head { max-width: 42em; margin-bottom: 48px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  padding: 16px 32px;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--periwinkle); color: #fff; }
.btn--primary:hover { background: var(--periwinkle-dark); color: #fff; }
.btn--secondary {
  background: transparent;
  color: var(--navy);
  box-shadow: inset 0 0 0 1.5px var(--navy);
}
.btn--on-navy { background: #fff; color: var(--navy); }
.btn--on-navy:hover { background: var(--bg-soft); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(255 255 255 / 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.site-header.is-scrolled { border-bottom-color: var(--border); }
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 72px;
}
.site-header__logo img { height: 32px; width: auto; }
.site-header__nav {
  display: none;
  align-items: center;
  gap: 28px;
  margin-left: auto;
}
.site-header__nav a {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}
.site-header__nav a:hover { color: var(--periwinkle-dark); }
.site-header__nav a[aria-current="page"] {
  color: var(--periwinkle-dark);
}
.site-header__nav .btn { padding: 12px 24px; }
.site-header__nav .btn:hover { color: #fff; }

.lang-switch { font-size: 15px; white-space: nowrap; }
.lang-switch a, .lang-switch span { text-decoration: none; color: var(--slate); }
.lang-switch .is-active { color: var(--navy); font-weight: 600; }
.lang-switch .sep { margin-inline: 4px; color: var(--border); }

.burger {
  margin-left: auto;
  width: 44px; height: 44px;
  border: none; background: none; cursor: pointer;
  display: grid; place-items: center; gap: 0;
}
.burger span {
  display: block; width: 22px; height: 2px;
  background: var(--navy); margin: 2.5px 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  display: none;
  position: fixed;
  inset: 72px 0 0 0;
  background: #fff;
  z-index: 40;
  padding: 32px 24px;
  flex-direction: column;
  gap: 8px;
}
.mobile-nav.is-open { display: flex; }
.mobile-nav a {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 22px;
  text-decoration: none;
  padding: 12px 0;
}
.mobile-nav .btn { margin-top: auto; text-align: center; }
.mobile-nav .lang-switch { padding: 12px 0; font-size: 18px; }

@media (min-width: 900px) {
  .site-header__nav { display: flex; }
  .burger, .mobile-nav { display: none !important; }
}

/* ---------- Hero ---------- */
.hero { padding-block: 80px 64px; }
@media (min-width: 900px) { .hero { padding-block: 128px 112px; } }
.hero__inner { max-width: 46em; }
.hero .lead { margin-top: 24px; }
.hero .btn { margin-top: 40px; }
.hero__micro { margin-top: 16px; font-size: 14px; color: var(--slate); }

/* ---------- Karten-Grid (3er) ---------- */
.card-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }
.card {
  background: var(--bg-soft);
  border-radius: var(--radius-card);
  padding: 32px;
}
.section--soft .card { background: #fff; border: 1px solid var(--border); }
.card__icon {
  width: 48px; height: 48px;
  margin-bottom: 20px;
  color: var(--periwinkle);
}
.card h3 { margin-bottom: 8px; }
.card p { color: var(--slate); margin: 0; }

/* ---------- Feature-Reihen (D-010) ---------- */
.feature-row {
  display: grid;
  gap: 40px;
  align-items: center;
  grid-template-columns: 1fr;
  padding-block: 40px;
}
@media (min-width: 900px) {
  .feature-row { grid-template-columns: 1fr 1fr; gap: 80px; }
  .feature-row--flip .feature-row__visual { order: -1; }
}
.feature-row__visual {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  min-height: 280px;
  display: grid;
  place-items: center;
  color: var(--periwinkle);
}
.feature-row__visual--plain {
  background: none;
  border: none;
}

/* ---------- Paket-Karten (D-011) ---------- */
.pricing {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  align-items: stretch;
}
@media (min-width: 800px) { .pricing { grid-template-columns: 1fr 1fr; } }
.plan {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.plan--featured {
  border: 2px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--gradient) border-box;
}
.plan__badge {
  position: absolute;
  top: -14px; right: 24px;
  background: var(--gradient);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13px;
  padding: 5px 14px;
  border-radius: 9999px;
}
.plan__claim { color: var(--slate); font-style: italic; margin-top: -4px; }
.plan__list { list-style: none; padding: 0; margin: 24px 0 32px; }
.plan__list li {
  padding-left: 32px;
  position: relative;
  margin-bottom: 16px;
}
.plan__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 4px;
  width: 20px; height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%235D71FB'/%3E%3Cpath d='M18 8.5L10.5 16 6 11.5' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.plan__list li strong { display: block; }
.plan__list li span { color: var(--slate); font-size: 15px; }
.plan__price {
  font-family: var(--font-head);
  font-weight: 600;
  margin-bottom: 24px;
}
.plan .btn { margin-top: auto; text-align: center; }

/* ---------- DynamicMspVisual (D-026) ----------
   Liquid Glass, präzise geclippt: Aurora liegt PRO SZENE innerhalb der
   Stage — overflow:hidden + Radius clippen, die Blobs laufen radial weich
   aus (transparent ab 72%), driften nur minimal → nie sichtbare Kanten.
   Farbwechsel entsteht ausschliesslich übers Szenen-Crossfade. */
.msp-visual {
  position: relative;
  width: 100%;
  max-width: 540px;
}

/* Kategorie-Logik: Signalfarbe (Text, kontrastgeprüft) + zwei Aurora-Töne */
.msp-scene[data-scene="monitoring"] { --sig: #0F766E; --a1: #2DD4BF; --a2: #34D399; }
.msp-scene[data-scene="backup"]     { --sig: #4353D9; --a1: #60A5FA; --a2: #5D71FB; }
.msp-scene[data-scene="security"]   { --sig: #B45309; --a1: #FBBF24; --a2: #FB923C; }
.msp-scene[data-scene="cloud"]      { --sig: #6D28D9; --a1: #818CF8; --a2: #A78BFA; }
.msp-scene[data-scene="support"]    { --sig: #0369A1; --a1: #38BDF8; --a2: #7DD3FC; }

/* Haupt-Card: helle Fläche, feines Grafana-Punktraster, Specular-Kante */
.msp-visual__stage {
  position: relative;
  aspect-ratio: 5 / 4;
  border-radius: 28px;
  overflow: hidden;
  background-image:
    radial-gradient(rgb(17 53 119 / 0.05) 1px, transparent 1px),
    linear-gradient(rgb(255 255 255 / 0.9), rgb(247 249 255 / 0.9));
  background-size: 22px 22px, 100% 100%;
  border: 1px solid var(--border);
  box-shadow:
    0 1px 2px rgb(17 53 119 / 0.05),
    0 10px 28px rgb(17 53 119 / 0.08),
    inset 0 1px 0 rgb(255 255 255 / 0.9);
}
.msp-visual__stage::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 36%;
  background: linear-gradient(rgb(255 255 255 / 0.5), transparent);
  pointer-events: none;
  z-index: 1;
}

/* Exit-before-enter: alter State blendet zuerst aus (0.25 s), neuer
   erscheint verzögert (ab 0.28 s) — nie zwei lesbare Texte übereinander. */
.msp-scene {
  position: absolute;
  inset: 0;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.msp-scene.is-active {
  opacity: 1;
  transition: opacity 0.4s ease 0.28s;
}

/* Aurora: innerhalb der Szene (und damit der Stage) — sauber geclippt */
.msp-scene__aurora { position: absolute; inset: 0; z-index: 0; }
.msp-scene__aurora i {
  position: absolute;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--a1), transparent 72%);
  opacity: 0.26;
  filter: blur(30px) saturate(0.85);
  animation: msp-drift 26s ease-in-out infinite alternate;
  will-change: transform;
}
.msp-scene__aurora i:nth-child(1) { top: -30%; left: -20%; }
.msp-scene__aurora i:nth-child(2) {
  bottom: -34%; right: -18%;
  width: 88%;
  background: radial-gradient(closest-side, var(--a2), transparent 72%);
  animation-delay: -13s;
  opacity: 0.2;
}
@keyframes msp-drift {
  to { transform: translate(4%, 3%) scale(1.07); }
}

/* Panel: klares Dashboard-Raster — Header / Metrik+Modul / Event-Liste */
.msp-panel {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  color: var(--sig);
}
.msp-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgb(17 53 119 / 0.08);
}
.msp-panel__cat {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--navy);
}
.msp-panel__status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 500;
  color: var(--slate);
}
.msp-panel__status i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sig);
  flex: none;
  animation: msp-breathe 3.5s ease-in-out infinite;
}
.msp-panel__main {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  align-items: center;
  gap: 20px;
  padding-block: 16px;
  min-height: 0;
}
.msp-metric { display: flex; flex-direction: column; gap: 4px; }
.msp-metric__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate);
}
.msp-metric__value {
  font-family: var(--font-head);
  font-size: clamp(26px, 2.6vw, 32px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--navy);
}
.msp-metric__sub { font-size: 12px; color: var(--slate); }
.msp-module {
  background: rgb(255 255 255 / 0.66);
  border: 1px solid rgb(255 255 255 / 0.9);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 1px 2px rgb(17 53 119 / 0.05);
}
.msp-module svg { display: block; width: 100%; height: auto; }
.msp-module text { font-family: var(--font-body); font-size: 9px; fill: var(--slate); }
.m-grid  { stroke: rgb(17 53 119 / 0.10); stroke-width: 1.5; }
.m-track { stroke: rgb(17 53 119 / 0.10); stroke-width: 4; }
.m-layer { stroke: rgb(17 53 119 / 0.25); stroke-width: 1.5; fill: rgb(255 255 255 / 0.7); }
.m-node  { stroke: rgb(17 53 119 / 0.25); stroke-width: 1.5; fill: rgb(255 255 255 / 0.8); }

/* Event-/Detail-Liste: technisch, ruhig */
.msp-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgb(17 53 119 / 0.08);
}
.msp-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 8px;
  font-size: 12.5px;
  color: var(--navy);
}
.msp-list li + li { border-top: 1px solid rgb(17 53 119 / 0.05); }
.msp-list li > span:first-child { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msp-list__meta { color: var(--slate); font-size: 12px; font-variant-numeric: tabular-nums; }
.msp-list__state {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sig);
  min-width: 56px;
  text-align: right;
}

/* Dezente Instrument-Motion (Dashboard-Feel, ruhig) */
.art-breathe { animation: msp-breathe 3.5s ease-in-out infinite; }
@keyframes msp-breathe { 50% { opacity: 0.45; } }
.art-sync {
  transform-box: fill-box;
  transform-origin: center;
  animation: msp-sync 30s linear infinite;
}
@keyframes msp-sync {
  from { transform: rotate(-90deg); }
  to   { transform: rotate(270deg); }
}
.art-radar {
  stroke: rgb(17 53 119 / 0.12);
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
  animation: msp-sync 46s linear infinite;
}
.art-stream {
  stroke: currentColor;
  stroke-opacity: 0.4;
  stroke-width: 1.5;
  stroke-dasharray: 2 6;
  animation: msp-flow 3.6s linear infinite;
}
@keyframes msp-flow { to { stroke-dashoffset: -16; } }

/* Scroll-Reveal (Wow beim Reinscrollen) */
.msp-visual.is-offstage {
  opacity: 0;
  transform: translateY(40px) scale(0.95);
}
.msp-visual.is-inview {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.msp-visual.is-offstage .msp-module { opacity: 0; transform: translateY(12px); }
.msp-visual.is-inview  .msp-module {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s ease 0.25s, transform 0.7s ease 0.25s;
}

/* Pills */
.msp-visual__pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}
.msp-pill {
  font-family: var(--font-head);
  font-size: 12.5px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--slate);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.msp-pill:hover { border-color: rgb(17 53 119 / 0.25); color: var(--navy); }
.msp-pill:focus-visible { outline: 2px solid var(--periwinkle); outline-offset: 2px; }
/* aktive Pill: subtiler Kategorie-Akzent statt satter Füllung */
.msp-pill[data-scene-target="monitoring"] { --pill: #0F766E; }
.msp-pill[data-scene-target="backup"]     { --pill: #4353D9; }
.msp-pill[data-scene-target="security"]   { --pill: #B45309; }
.msp-pill[data-scene-target="cloud"]      { --pill: #6D28D9; }
.msp-pill[data-scene-target="support"]    { --pill: #0369A1; }
.msp-pill.is-active {
  font-weight: 600;
  color: var(--pill, var(--navy));
  border-color: color-mix(in srgb, var(--pill, var(--navy)) 35%, #fff);
  background: color-mix(in srgb, var(--pill, var(--navy)) 8%, #fff);
}

@media (max-width: 640px) {
  .msp-visual__stage { aspect-ratio: 4 / 4.4; }
  .msp-scene { padding: 16px; }
  .msp-panel__main { grid-template-columns: 1fr 1fr; gap: 12px; }
  .msp-metric__value { font-size: 24px; }
  .msp-list li { font-size: 12px; }
}
@media (max-width: 380px) {
  .msp-visual__stage { aspect-ratio: 4 / 4.8; }
  .msp-metric__value { font-size: 22px; }
  .msp-list li { font-size: 11.5px; }
  .msp-panel__status { font-size: 11px; }
}
/* Touch-Geräte: grössere Ziele, keine Hover-Abhängigkeit */
@media (pointer: coarse) {
  .msp-pill { padding: 10px 18px; }
  .carousel__dots button { width: 10px; height: 10px; }
  .lang-switch a { padding: 8px 4px; display: inline-block; }
}

@media (prefers-reduced-motion: reduce) {
  /* Bewegung aus, Optik bleibt: Aurora statisch, Module stehen */
  .msp-scene { transition: opacity 0.15s ease; }
  .msp-scene.is-active { transition: opacity 0.15s ease 0.16s; }
  .msp-scene__aurora i,
  .msp-panel__status i,
  .art-breathe,
  .art-sync,
  .art-radar,
  .art-stream { animation: none; }
  .msp-visual.is-offstage,
  .msp-visual.is-offstage .msp-module { opacity: 1; transform: none; }
  .msp-visual.is-inview,
  .msp-visual.is-inview .msp-module { transition: none; }
}

/* ---------- Glas-Panel (wiederverwendbar, D-029) ----------
   Dezentes Liquid-Glass: sehr helle Transparenz, feine Border,
   mehrschichtiger leiser Schatten. Kein Glow, keine Animation. */
.glass-panel {
  background: linear-gradient(rgb(255 255 255 / 0.72), rgb(247 249 255 / 0.72));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: 28px;
  box-shadow:
    0 1px 2px rgb(17 53 119 / 0.04),
    0 12px 32px rgb(17 53 119 / 0.07),
    inset 0 1px 0 rgb(255 255 255 / 0.9);
  padding: 40px 24px;
}
@media (min-width: 760px) { .glass-panel { padding: 56px 64px; } }

/* ---------- LogoCloud: Technologien (D-022) ---------- */
.logo-cloud { padding-block: 48px 64px; }
.logo-cloud__title {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
  text-align: center;
  margin-bottom: 32px;
}
.logo-cloud__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px 32px;
  align-items: center;
  justify-items: center;
  max-width: 880px;
  margin-inline: auto;
}
@media (min-width: 760px) {
  /* 5 Spalten → 9 Logos ergeben ein ruhiges zweizeiliges Raster (5 + 4) */
  .logo-cloud__grid { grid-template-columns: repeat(5, 1fr); }
}
.logo-cloud__item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  width: 100%;
}
/* Einheitliche Logo-Grösse: feste Höhe, Breite gedeckelt, Proportion bleibt */
.logo-cloud__item img {
  height: 32px;
  width: auto;
  max-width: 128px;
  object-fit: contain;
}
@media (max-width: 759px) {
  .logo-cloud__item { height: 48px; }
  .logo-cloud__item img { height: 26px; max-width: 104px; }
}
/* Fallback, solange eine Logo-Datei fehlt: Name als ruhiger Text-Chip */
.logo-cloud__name {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15px;
  color: var(--slate);
  white-space: nowrap;
}

/* ---------- Karussell (D-012) ---------- */
.carousel { position: relative; }
.carousel__track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 8px 4px 24px;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__card {
  flex: 0 0 min(360px, 82vw);
  scroll-snap-align: start;
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-carousel);
  border: 1px solid var(--border);
  padding: 32px;
}
.carousel__eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 12px;
}
.carousel__card p { margin: 0; }
.carousel__controls {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}
.carousel__btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--navy);
  background: #fff;
  color: var(--navy);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: background-color 0.15s ease;
}
.carousel__btn:hover { background: var(--bg-soft); }
.carousel__dots { display: flex; gap: 8px; }
.carousel__dots button {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--border);
  cursor: pointer;
}
.carousel__dots button.is-active { background: var(--periwinkle); }

/* ---------- CTA-Band ---------- */
.cta-band {
  background: var(--navy);
  color: #fff;
  padding-block: 80px;
  position: relative;
  overflow: hidden;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: var(--on-navy-muted); }
.cta-band .btn { margin-top: 32px; }
.cta-band__rocket {
  position: absolute;
  right: -40px; bottom: -60px;
  width: 280px;
  opacity: 0.14;
  transform: rotate(-8deg);
  pointer-events: none;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy-deep);
  color: var(--on-navy-muted);
  padding-block: 56px 40px;
  font-size: 15px;
}
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: var(--cyan-light); }
.site-footer__cols {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
  margin-bottom: 40px;
}
@media (min-width: 700px) { .site-footer__cols { grid-template-columns: 2fr 1fr 1fr; } }
.site-footer__brand strong { color: #fff; font-family: var(--font-head); font-size: 17px; }
.site-footer__cols ul { list-style: none; padding: 0; margin: 12px 0 0; }
.site-footer__cols li { margin-bottom: 10px; }
.site-footer__head {
  color: #fff;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.site-footer__bottom {
  border-top: 1px solid rgb(255 255 255 / 0.12);
  padding-top: 24px;
  font-size: 14px;
}

/* ---------- Formular ---------- */
.form { max-width: 560px; }
.form__field { margin-bottom: 24px; }
.form label {
  display: block;
  font-weight: 500;
  margin-bottom: 8px;
}
.form input, .form textarea {
  width: 100%;
  font: inherit;
  color: var(--navy);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-field);
  padding: 14px 16px;
}
.form input::placeholder, .form textarea::placeholder { color: var(--slate); opacity: 0.7; }
.form input:focus, .form textarea:focus {
  outline: 2px solid var(--periwinkle);
  outline-offset: 0;
  border-color: transparent;
}
.form textarea { min-height: 160px; resize: vertical; }
.form__error { color: var(--error); font-size: 14px; margin-top: 6px; display: none; }
.form__field.has-error input,
.form__field.has-error textarea { border-color: var(--error); }
.form__field.has-error .form__error { display: block; }
.form__note { font-size: 14px; color: var(--slate); margin-top: 16px; }
.form__success {
  display: none;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 32px;
}
@media (max-width: 640px) { .form .btn { width: 100%; text-align: center; } }

/* ---------- Rechtsseiten / Prosa ---------- */
.prose h2 { font-size: 24px; margin-top: 48px; }
.prose h1 { margin-bottom: 24px; }
.prose { max-width: 72ch; }
.legal-note {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-field);
  padding: 16px 20px;
  font-size: 15px;
  color: var(--slate);
}

/* ---------- Utilities ---------- */
.eyebrow {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--periwinkle-dark);
  margin-bottom: 16px;
}
.center { text-align: center; }
.center .lead, .center p { margin-inline: auto; }
.skip-link {
  position: absolute;
  left: -9999px;
  background: #fff;
  padding: 12px 20px;
  z-index: 100;
}
.skip-link:focus { left: 12px; top: 12px; }