/* =========================================================================
   Qudits Redesign — Stylesheet
   Design-Tokens aus Figma "Qudits Redesign" (qudits.ch · Prototyp)
   ========================================================================= */

/* Hind — self-hosted (DSGVO-konform, kein Google Fonts CDN) */
@font-face { font-family: 'Hind'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/hind-300-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hind'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/hind-300-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Hind'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/hind-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hind'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/hind-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Hind'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/hind-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hind'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/hind-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Hind'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/hind-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hind'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/hind-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Hind'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/hind-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hind'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/hind-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* Farben */
  --bg:            #1a1f2b;   /* Haupt-Hintergrund (dunkel) */
  --bg-navy:       #1a2947;   /* Navy (helle Seite / CTA) */
  --orange:        #da5b29;   /* Akzent */
  --orange-hover:  #e8682f;
  --blue:          #47759e;   /* Glow / Akzent kühl */
  --border:        rgba(73, 104, 129, 0.30);

  --text:          rgba(255, 255, 255, 0.92);
  --text-dim:      rgba(255, 255, 255, 0.82);
  --text-dimmer:   rgba(255, 255, 255, 0.80);
  --text-faint:    rgba(255, 255, 255, 0.80);
  --card-bg:       rgba(255, 255, 255, 0.05);

  /* Typografie */
  --font: 'Hind', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Maße */
  --maxw: 1320px;
  --radius: 14px;
  --radius-btn: 10px;
}

/* ---- Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--font);
  font-weight: 300;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }

/* =========================================================================
   Hintergrund-Effekte (Glow + Wellen)
   ========================================================================= */
.bg-fx { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(20px);
}
.glow--wide {
  width: 135vw; height: 120vh;
  left: 50%; top: 38%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side,
              rgba(71, 117, 158, 0.22), rgba(71, 117, 158, 0.05) 60%, transparent 72%);
}
.glow--core {
  width: 90vw; height: 80vh;
  left: 50%; top: 46%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side,
              rgba(99, 150, 196, 0.16), transparent 70%);
}
.glow--top {
  width: 120vw; height: 460px;
  left: 50%; top: -40px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, rgba(71,117,158,0.14), transparent);
  border-radius: 0;
  filter: blur(30px);
}

/* Wellen am unteren Rand */
.waves {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  width: 100%; height: 90px;
  z-index: 1;
  pointer-events: none;
}
.waves svg { width: 100%; height: 100%; }
.waves path { fill: none; stroke: rgba(120, 160, 200, 0.18); stroke-width: 1.5; }

/* =========================================================================
   Layout-Grundgerüst
   ========================================================================= */
.page { position: relative; z-index: 2; min-height: 100vh; display: flex; flex-direction: column; }

/* ---- Header / Navigation ---------------------------------------------- */
.site-header {
  position: relative; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: 38px clamp(24px, 6vw, 96px) 0;
}
.brand { display: flex; align-items: center; }
.brand img { height: 38px; width: auto; }
.brand--small img { height: 30px; }

.nav { display: flex; gap: 38px; }
.nav a {
  font-weight: 500; font-size: 17px; letter-spacing: 0.3px;
  color: var(--text-dimmer);
  transition: color .25s ease;
}
.nav a:hover, .nav a.is-active { color: #fff; }

.nav-toggle { display: none; }

/* =========================================================================
   Startseite — Orbit-Hero
   ========================================================================= */
.hero {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 24px 120px;
}

.orbit {
  position: relative;
  width: min(1100px, 92vw);
  aspect-ratio: 1100 / 640;
}

.orbit__ring {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
}
.orbit__ring ellipse {
  fill: none;
  stroke: rgba(150, 180, 210, 0.28);
  stroke-width: 1.2;
  stroke-dasharray: 1 7;
  stroke-linecap: round;
}

/* Logo im Zentrum */
.orbit__logo {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(200px, 26vw, 300px);
}

/* Service-Knoten */
.node {
  position: absolute;
  display: flex; align-items: center; gap: 14px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  white-space: nowrap;
}
.node__label {
  font-weight: 500; font-size: clamp(15px, 1.5vw, 21px);
  letter-spacing: 0.3px; color: var(--text);
  transition: color .25s ease;
}
.node__dot {
  position: relative;
  width: 13px; height: 13px; border-radius: 50%;
  background: #fff;
  flex: none;
  box-shadow: 0 0 0 0 rgba(255,255,255,0.35);
}
.node__dot::after {
  content: ""; position: absolute; inset: -10px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,0.22), transparent 70%);
  transition: transform .3s ease, opacity .3s ease;
}
.node:hover .node__dot {
  background: var(--orange);
  box-shadow: 0 0 18px 2px rgba(218, 91, 41, 0.55);
}
.node:hover .node__dot::after { transform: scale(1.5); }
.node:hover .node__label { color: #fff; }

/* Position der 4 Knoten auf der Ellipse (N / O / S / W) */
.node--top    { left: 50%;  top: 0;    flex-direction: row-reverse; }
.node--right  { left: 100%; top: 50%; }
.node--bottom { left: 50%;  top: 100%; flex-direction: row-reverse; }
.node--left   { left: 0;    top: 50%;  flex-direction: row-reverse; }
.node--top    { flex-direction: column-reverse; gap: 10px; }
.node--bottom { flex-direction: column; gap: 10px; }
.node--right  .node__label { order: 2; }
.node--left   { flex-direction: row-reverse; }
.node--left   .node__label { order: 0; }

/* Optionaler Hero-Text (Variante B) */
.hero-copy {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  text-align: center; width: min(900px, 86vw);
  z-index: 3;
}
.hero-copy h1 {
  font-weight: 600; font-size: clamp(34px, 5.2vw, 64px);
  line-height: 1.06; margin: 0 0 18px; color: #fff;
}
.hero-copy p { font-size: clamp(17px, 2vw, 21px); color: var(--text-dim); margin: 0 0 32px; }

/* =========================================================================
   Buttons
   ========================================================================= */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font); font-weight: 500; font-size: 18px;
  letter-spacing: 0.3px;
  padding: 17px 34px; border-radius: var(--radius-btn);
  border: none; cursor: pointer;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.btn--primary { background: var(--orange); color: #fff; box-shadow: 0 8px 24px rgba(218,91,41,0.28); }
.btn--primary:hover { background: var(--orange-hover); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(218,91,41,0.38); }
.btn--navy { background: var(--bg-navy); color: #fff; }
.btn--navy:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(26,41,71,0.35); }
.btn .arrow { transition: transform .2s ease; }
.btn:hover .arrow { transform: translateX(4px); }

/* =========================================================================
   Unterseite (dunkel) — Hero + Karten
   ========================================================================= */
.subpage { padding: clamp(40px, 7vw, 90px) clamp(24px, 6vw, 120px) 140px; }
.subpage__inner { max-width: var(--maxw); margin: 0 auto; }
/* Abstand zwischen Header und erster Überschrift (Eyebrow/H1) auf allen Unterseiten */
.subpage__inner > :first-child { margin-top: clamp(44px, 5vw, 80px); }

.eyebrow {
  font-weight: 600; font-size: 16px; letter-spacing: 3px;
  color: var(--orange); text-transform: uppercase; margin: 0 0 18px;
}
.subpage h1 {
  font-weight: 600; font-size: clamp(38px, 5.4vw, 62px);
  line-height: 1.08; color: #fff; margin: 0 0 18px; max-width: 16ch;
}
.lead {
  font-weight: 300; font-size: clamp(18px, 2vw, 23px); line-height: 1.45;
  color: var(--text-dim); max-width: 58ch; margin: 0 0 56px;
}

.cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 30px; margin: 0 0 56px;
}
.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 28px;
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.card:hover { transform: translateY(-4px); border-color: rgba(218,91,41,0.5); background: rgba(255,255,255,0.07); }
.card__num { font-weight: 600; font-size: 15px; letter-spacing: 1px; color: var(--orange); margin: 0 0 14px; }
.card__title { font-weight: 500; font-size: 22px; color: #fff; margin: 0 0 10px; }
.card__text { font-weight: 300; font-size: 16px; line-height: 1.5; color: var(--text-faint); margin: 0; }

/* Service-overview cards (leistungen.html): title block + sub-links */
.card--svc { padding: 0; cursor: default; display: flex; flex-direction: column; }
.card--svc:hover { transform: none; border-color: var(--border); background: var(--card-bg); }
.svc-card__head {
  display: block; text-decoration: none; color: inherit;
  padding: 26px 24px 18px; flex: 1;
  transition: background .2s;
  border-radius: var(--radius) var(--radius) 0 0;
}
.svc-card__head:hover { background: rgba(255,255,255,0.05); }
.svc-card__divider { border: none; border-top: 1px solid var(--border); margin: 0; }
.svc-card__links {
  padding: 12px 16px 16px;
  display: flex; flex-direction: column; gap: 0;
}
.svc-card__links a {
  color: rgba(255,255,255,0.55); text-decoration: none; font-size: 13.5px;
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 8px; border-radius: 7px;
  transition: color .18s, background .18s;
}
.svc-card__links a:hover { color: var(--orange); background: rgba(218,91,41,0.07); }
.svc-card__links a::after { content: '→'; color: var(--orange); font-size: 11px; opacity: .6; }

/* =========================================================================
   Helle Seite (Über uns / Matterhorn)
   ========================================================================= */
body.light { background: var(--bg-navy); }
.light-card {
  position: relative; z-index: 2;
  background: #fff; color: var(--bg-navy);
  margin: 50px clamp(16px, 4vw, 50px);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.35);
  overflow: hidden;
  min-height: 80vh;
  display: flex; flex-direction: column;
}
.light-card .site-header { padding-top: 52px; }
.light-card .nav a { color: rgba(26,41,71,0.55); }
.light-card .nav a:hover, .light-card .nav a.is-active { color: var(--bg-navy); }

.matterhorn {
  position: absolute; right: 0; bottom: 0;
  width: min(1100px, 90%); height: auto;
  z-index: 0; pointer-events: none;
}
.matterhorn svg { width: 100%; height: auto; display: block; }

.light-hero {
  position: relative; z-index: 2;
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding: 0 clamp(24px, 6vw, 90px) 60px;
  max-width: 900px;
}
.light-hero .eyebrow { color: var(--orange); }
.light-hero h1 {
  font-weight: 600; font-size: clamp(38px, 5.2vw, 60px); line-height: 1.08;
  color: var(--bg-navy); margin: 0 0 18px; max-width: 16ch;
}
.light-hero .lead { color: rgba(26,41,71,0.7); max-width: 52ch; margin: 0 0 36px; }

/* =========================================================================
   Footer
   ========================================================================= */
.site-footer {
  position: relative; z-index: 2;
  padding: 40px clamp(24px, 6vw, 96px);
  display: flex; flex-wrap: wrap; gap: 16px;
  align-items: center; justify-content: space-between;
  color: var(--text-dimmer); font-size: 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
body.light .site-footer { color: rgba(26,41,71,0.6); border-top: none; }
.site-footer .nav { gap: 24px; }
.site-footer .nav a { font-size: 14px; }

/* =========================================================================
   Intro-Animation (nur Startseite)
   ========================================================================= */
[data-anim] { opacity: 0; }
.anim-ready .orbit__logo { animation: fadeUp .9s ease forwards; animation-delay: .2s; }
.anim-ready .orbit__ring { animation: drawRing 1.1s ease forwards; animation-delay: 1.0s; }
.anim-ready .node      { animation: fadeUp .7s ease forwards; }
.anim-ready .node--top    { animation-delay: 1.5s; }
.anim-ready .node--right  { animation-delay: 1.7s; }
.anim-ready .node--bottom { animation-delay: 1.9s; }
.anim-ready .node--left   { animation-delay: 2.1s; }
.anim-ready .hero-copy { animation: fadeUp .9s ease forwards; animation-delay: 1.3s; }
.anim-ready .site-header,
.anim-ready .waves    { animation: fade 1s ease forwards; animation-delay: .1s; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes drawRing { from { opacity: 0; } to { opacity: 1; } }

/* Knoten behalten ihre Positions-Transformation */
.anim-ready .node { animation-name: nodeIn; }
@keyframes nodeIn { from { opacity: 0; } to { opacity: 1; } }

/* Subpages: sanftes Einblenden */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-anim] { opacity: 1 !important; }
  .anim-ready * { animation: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 860px) {
  .nav { display: none; position: absolute; top: 78px; right: clamp(24px,6vw,96px);
         flex-direction: column; gap: 18px; background: rgba(26,31,43,0.97);
         padding: 22px 26px; border: 1px solid var(--border); border-radius: 14px; }
  .nav.is-open { display: flex; }
  body.light .nav.is-open { background: #fff; }
  .nav-toggle {
    display: inline-flex; flex-direction: column; gap: 5px;
    background: none; border: none; cursor: pointer; padding: 6px;
  }
  .nav-toggle span { width: 26px; height: 2px; background: currentColor; color: var(--text); }
  body.light .nav-toggle span { background: var(--bg-navy); }

  /* Orbit → vertikale Liste */
  .orbit { aspect-ratio: auto; width: 100%; display: flex; flex-direction: column;
           align-items: center; gap: 0; }
  .orbit__ring { display: none; }
  .orbit__logo { position: static; transform: none; margin: 0 auto 40px; width: 220px; }
  .node { position: static !important; transform: none !important;
          flex-direction: row !important; gap: 12px; width: 100%;
          justify-content: center; padding: 18px 0;
          border-top: 1px solid rgba(255,255,255,0.07); }
  .node--top { border-top: none; }
  .node__label { font-size: 18px; }

  .cards { grid-template-columns: 1fr; }
  .hero-copy h1 { font-size: 30px; }
  .matterhorn { width: 130%; opacity: 0.5; }
}

/* ---- Zahlen-Band (Unser Erfolgsgeheimnis) ---- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 28px; margin-top: 44px; padding-top: 36px; border-top: 2px solid var(--orange); }
.stat__num { font-size: 48px; font-weight: 600; color: var(--orange); line-height: 1; }
.stat__label { color: rgba(255,255,255,0.7); margin-top: 8px; font-size: 15px; }

/* ---- Branchen-Landingpages: Pills, Bento-Insights, Referenz-Zeilen ---- */
.pills { display: flex; flex-wrap: wrap; gap: 12px; }
.pill { border: 1px solid var(--border); border-radius: 99px; padding: 12px 22px; color: #fff; text-decoration: none; font-size: 15px; background: rgba(255,255,255,0.04); transition: all .2s; }
.pill b { color: var(--orange); font-weight: 600; margin-right: 6px; }
.pill:hover { border-color: var(--orange); background: rgba(218,91,41,0.12); transform: translateY(-2px); }
.bento { display: grid; grid-template-columns: 1.6fr 1fr; grid-template-rows: auto auto; gap: 20px; }
.bento__featured { grid-row: 1 / 3; }
.bento__featured img { width: 100%; height: 280px; object-fit: cover; border-radius: 8px; margin-bottom: 20px; }
.bento__featured .card__title { font-size: 25px; }
.bento__stat { font-size: 54px; color: var(--orange); font-weight: 700; line-height: 1; margin: 6px 0 12px; }
.bento__small { display: flex; gap: 16px; align-items: flex-start; }
.bento__small img { width: 100px; height: 100px; object-fit: cover; border-radius: 8px; flex: none; }
.bento__small .card__title { font-size: 16px; }
.bento__small .card__text { font-size: 13.5px; }
.refrow { display: grid; grid-template-columns: 90px 1.2fr 2fr auto; gap: 24px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; transition: background .2s; }
.refrow:hover { background: rgba(255,255,255,0.03); }
.refrow__num { font-size: 48px; font-weight: 700; color: transparent; -webkit-text-stroke: 1.2px rgba(218,91,41,0.6); line-height: 1; }
.refrow:hover .refrow__num { color: rgba(218,91,41,0.22); }
.refrow__title { color: #fff; font-size: 18px; font-weight: 600; }
.refrow__arrow { color: var(--orange); font-size: 22px; }
@media (max-width: 800px) {
  .bento { grid-template-columns: 1fr; }
  .bento__featured { grid-row: auto; }
  .refrow { grid-template-columns: 60px 1fr; }
  .refrow .card__text, .refrow__arrow { display: none; }
}