/* Schriften werden DSGVO-konform lokal eingebunden
   (siehe assets/css/fonts.css) — kein Google-Fonts-Request. */

/* ── DESIGN TOKENS ─────────────────────────────────────────── */
:root {
  --pad-x: 4rem;
  --max-w: min(1240px, 92vw);
  --dyn-acc: 76,75,158;
  /* Akzentfarbe als Text- oder Umrissfarbe (links, fokusringe, .ch). --dyn-acc
     bleibt ausschliesslich die Flaechenfarbe hinter weissem Text (buttons). */
  --acc-txt: rgb(76,75,158);
  --r: 10px;
  --r-sm: 6px;

  --bg: #F5F6FA;
  --txt: #2C2D34;
  --txt-sub: #52546A;
  --txt-dim: #9799B0;
  --card-bg: rgba(255,255,255,0.97);
  --card-bg-h: #FFF;
  --card-bd: rgba(24,25,32,.07);
  --card-bd-h: rgba(24,25,32,.14);
  --card-sh: 0 2px 18px rgba(24,25,32,.055), 0 1px 4px rgba(24,25,32,.06);
  --card-sh-h: 0 10px 36px rgba(24,25,32,.10), 0 2px 8px rgba(24,25,32,.07);
  --line: rgba(24,25,32,.08);
  --input-bg: rgba(24,25,32,.035);
  --input-bd: rgba(24,25,32,.13);
  --nav-link: rgba(24,25,32,.48);
  --sn-c: #2C2D34;
  --pip-bd: rgba(24,25,32,.30);
  --form-bg: #FFF;
  --form-bd: rgba(24,25,32,.08);
  --foot-c: rgba(24,25,32,.35);
  --foot-bd: rgba(24,25,32,.08);
}

body.dark {
  /* aufgehellte variante von --acc-txt: --dyn-acc erreicht als text/umriss im
     dunkelmodus nur 2,33:1 bis 2,59:1 auf den kartenflaechen - diese variante
     erreicht 7,61:1 auf --card-bg (nachgerechnet nach der wcag-luminanzformel,
     rgba(255,255,255,.052) auf --bg #0D0D10 kompositiert). */
  --acc-txt: rgb(165,164,240);
  --bg: #0D0D10;
  --txt: #EEEEF5;
  --txt-sub: rgba(238,238,245,.56);
  --txt-dim: rgba(238,238,245,.32);
  --card-bg: rgba(255,255,255,.052);
  --card-bg-h: rgba(255,255,255,.088);
  --card-bd: rgba(255,255,255,.08);
  --card-bd-h: rgba(255,255,255,.15);
  --card-sh: 0 1px 0 rgba(255,255,255,.04);
  --card-sh-h: 0 2px 0 rgba(255,255,255,.06);
  --line: rgba(255,255,255,.07);
  --input-bg: rgba(255,255,255,.046);
  --input-bd: rgba(255,255,255,.14);
  --nav-link: rgba(238,238,245,.44);
  --sn-c: #EEEEF5;
  --pip-bd: rgba(255,255,255,.30);
  --form-bg: rgba(255,255,255,.038);
  --form-bd: rgba(255,255,255,.07);
  --foot-c: rgba(238,238,245,.28);
  --foot-bd: rgba(255,255,255,.07);
}

/* ── DARK MODE TRANSITION ──────────────────────────────────── */
body.switching * {
  transition:
    color .72s cubic-bezier(.4,0,.2,1),
    background-color .68s cubic-bezier(.4,0,.2,1),
    border-color .72s,
    box-shadow .68s ease,
    opacity .62s ease !important;
}
body.switching canvas,
body.switching #cur,
body.switching #sw,
body.switching .li,
body.switching .r { transition: none !important; }

/* ── RESET ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif;
  cursor: none;
  background: var(--bg);
  color: var(--txt);
}
p, .h-sub, .h-fine, .pain-txt, .pain-sol, .fc-b, .proc-b,
.ct-sub, .sv-desc, .s5-bq-text, .pkg-usp-b, .pkg-cta-sub {
  text-wrap: pretty;
  overflow-wrap: break-word;
}

/* ── CANVAS (point cloud background) ──────────────────────── */
#canvas {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  z-index: 0;
  pointer-events: none;
}

/* ── CUSTOM CURSOR ─────────────────────────────────────────── */
#cur {
  position: fixed;
  width: 8px; height: 8px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  background: rgb(var(--dyn-acc));
  box-shadow: 0 0 12px rgba(var(--dyn-acc), .55);
  transition: width .18s, height .18s, background-color .5s, box-shadow .5s;
}
#cur.link  { width: 18px; height: 18px; opacity: .50; }
#cur.hidden { opacity: 0; }

/* ── PROGRESS BAR ──────────────────────────────────────────── */
#prog {
  position: fixed; top: 0; left: 0;
  height: 2px; width: 0%;
  z-index: 9990;
  background: linear-gradient(90deg, rgb(var(--dyn-acc)), rgba(var(--dyn-acc), .20));
  transition: width .1s linear;
}

/* ── PAGE / SCROLL WRAPPER ─────────────────────────────────── */
#page { position: fixed; inset: 0; overflow: hidden; z-index: 1; }
#sw   { position: absolute; top: 0; left: 0; width: 100%; will-change: transform; }

/* ── SECTION BASE ──────────────────────────────────────────── */
.s {
  position: relative;
  width: 100vw; height: 100dvh;
  display: flex; flex-direction: column; justify-content: flex-start;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 5rem var(--pad-x) 2.5rem;
}
.s::-webkit-scrollbar { width: 0; height: 0; }
.wrap {
  position: relative; z-index: 2;
  max-width: var(--max-w);
  width: 100%; margin-block: auto; margin-inline: auto;
}

/* ── NAV ───────────────────────────────────────────────────── */
#nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 500;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.3rem var(--pad-x);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border-bottom: 1px solid var(--line);
}
.nav-logo { display: flex; align-items: center; cursor: none; text-decoration: none; }
.nav-logo img { display: none !important; }
/* Logo nimmt die Sektionsfarbe an (Maske), im Dark-Mode immer weiß */
.nav-logo::before {
  content: ""; display: block; height: 48px; aspect-ratio: 3837 / 2767;
  -webkit-mask: url(../brand/logo-light.svg) no-repeat center / contain;
  mask: url(../brand/logo-light.svg) no-repeat center / contain;
  background-color: rgb(var(--dyn-acc)); transition: background-color .5s;
}
body.dark .nav-logo::before { background-color: #fff; }
.logo-d { display: none; }
body.dark .logo-l { display: none; }
body.dark .logo-d { display: block; }

#nl { display: flex; gap: 2rem; align-items: center; }
#nl a {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .82rem; font-weight: 700;
  letter-spacing: .16em; text-transform: lowercase;
  text-decoration: none;
  color: var(--nav-link);
  cursor: none;
  transition: color .25s;
}
#nl a:hover { color: rgb(var(--dyn-acc)); }

.nc {
  padding: .5rem 1.4rem !important;
  background: rgb(var(--dyn-acc)) !important;
  color: #fff !important;
  opacity: 1 !important;
  border-radius: var(--r-sm);
  transition: background .5s, opacity .2s !important;
}
.nc:hover { opacity: .80 !important; }

#modeBtn {
  background: none;
  border: 1.5px solid rgba(var(--dyn-acc), .45);
  color: rgb(var(--dyn-acc));
  cursor: none;
  width: 38px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  margin-left: .3rem;
  transition: border-color .5s, color .5s, background .25s;
}
#modeBtn:hover { border-color: rgb(var(--dyn-acc)); background: rgba(var(--dyn-acc), .10); }
.mb-l { display: block; }
.mb-d { display: none; }
body.dark .mb-l { display: none; }
body.dark .mb-d { display: block; }

#burger {
  display: none;
  flex-direction: column; justify-content: center;
  gap: 5px;
  background: none; border: none; cursor: none;
  padding: 4px; margin-left: .5rem;
}
.bur-line {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--txt);
  border-radius: 2px;
  transition: transform .35s cubic-bezier(.2,.85,.3,1), opacity .25s;
}
#burger.open .bur-line:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
#burger.open .bur-line:nth-child(2) { opacity: 0; }
#burger.open .bur-line:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── MOBILE NAV ────────────────────────────────────────────── */
#nl-mob {
  display: none;
  position: fixed; inset: 0; z-index: 490;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 1.8rem;
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  background: rgba(245,246,250,.95);
  opacity: 0; pointer-events: none;
  transition: opacity .35s;
}
body.dark #nl-mob { background: rgba(13,13,16,.95); }
#nl-mob.open { opacity: 1; pointer-events: all; }
#nl-mob a {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 1.3rem; font-weight: 700;
  letter-spacing: .08em; text-transform: lowercase;
  text-decoration: none; color: var(--txt);
  cursor: none; transition: color .22s;
}
#nl-mob a:hover { color: rgb(var(--dyn-acc)); }
#nl-mob .mob-mode {
  margin-top: .5rem;
  font-family: 'Josefin Sans', sans-serif;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .18em; text-transform: lowercase;
  color: rgb(var(--dyn-acc));
  cursor: none;
  border: 1.5px solid rgba(var(--dyn-acc), .40);
  padding: .5rem 1.3rem;
  border-radius: var(--r-sm);
}

/* ── SIDE NAV ──────────────────────────────────────────────── */
#sn {
  position: fixed; right: 2.5rem; top: 50%;
  transform: translateY(-50%);
  z-index: 500;
  display: flex; flex-direction: column; gap: 1.2rem;
}
.sd { display: flex; align-items: center; gap: 1rem; cursor: none; opacity: .22; transition: opacity .35s; }
.sd:hover { opacity: .68; }
.sd.on  { opacity: 1; }
.sd-lbl {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .90rem; font-weight: 700;
  letter-spacing: .10em; white-space: nowrap;
  text-transform: lowercase;
  color: var(--sn-c);
}
.sd-pip {
  width: 12px; height: 12px;
  border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--pip-bd);
  background: transparent;
  transition: all .35s;
}
.sd.on .sd-pip {
  background: rgb(var(--dyn-acc));
  border-color: rgb(var(--dyn-acc));
  transform: scale(1.6);
}

/* ── TYPOGRAPHY ────────────────────────────────────────────── */
.ch {
  display: inline-flex; align-items: center; gap: .9rem;
  font-family: 'Josefin Sans', sans-serif;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .20em; text-transform: lowercase;
  color: var(--acc-txt);
  margin-bottom: 1.4rem;
  transition: color .5s;
}
.ch::before {
  content: ''; display: block;
  width: 28px; height: 1.5px;
  background: rgb(var(--dyn-acc));
  flex-shrink: 0;
  transition: background .5s;
}

.ht {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 700; line-height: .93;
  letter-spacing: -.03em; text-transform: lowercase;
  /* Marke statt Ink: die Hauptueberschrift traegt das dpi-Blau, nicht das
     Textschwarz. Kontrast 6,94:1 hell / 8,47:1 dunkel (wcag aa erfuellt). */
  color: var(--acc-txt);
  transition: color .5s;
}
.ht-line       { display: block; font-size: clamp(2.8rem, 9vw, 8rem); white-space: nowrap; }
.ht-line.long  { font-size: clamp(2.3rem, 7.5vw, 7rem); }
.acc           { color: rgb(var(--dyn-acc)); transition: color .5s; }

/* ── REVEAL ANIMATIONS ─────────────────────────────────────── */
/* top padding + negative margin: Josefin Sans ascenders/umlauts overshoot
   the .93 line-height box — extend clip area upward without layout shift */
.lr { overflow: hidden; display: block; padding: clamp(.35rem, 1.2vw, 1rem) 3px 0; margin: calc(clamp(.35rem, 1.2vw, 1rem) * -1) -3px 0; }
.li { display: block; transform: translateY(110%); transition: transform 1s cubic-bezier(.2,.85,.3,1); }
.li.in { transform: translateY(0); }
.li.d1 { transition-delay: .08s; }
.li.d2 { transition-delay: .18s; }
.li.d3 { transition-delay: .30s; }
.li.d4 { transition-delay: .42s; }

.r { opacity: 0; transform: translateY(14px); transition: opacity .84s cubic-bezier(.22,1,.36,1), transform .84s cubic-bezier(.22,1,.36,1); }
.r.in { opacity: 1; transform: translateY(0); }
.r.d1 { transition-delay: .10s; }
.r.d2 { transition-delay: .24s; }
.r.d3 { transition-delay: .38s; }
.r.d4 { transition-delay: .52s; }
.r.d5 { transition-delay: .66s; }

/* ── BUTTONS ───────────────────────────────────────────────── */
.btn {
  display: inline-block;
  font-family: 'Josefin Sans', sans-serif;
  font-size: .80rem; font-weight: 700;
  letter-spacing: .17em; text-transform: lowercase;
  text-decoration: none;
  padding: .92rem 2.2rem;
  cursor: none;
  border-radius: var(--r-sm);
  transition: opacity .22s, transform .22s, box-shadow .22s, background .5s;
}
.btn:hover { transform: translateY(-1px); }
.bm { background: rgb(var(--dyn-acc)); color: #fff; }
.bm:hover { opacity: .85; box-shadow: 0 8px 26px rgba(var(--dyn-acc), .30); }
.bg { border: 1.5px solid rgba(var(--dyn-acc), .35); color: var(--txt-sub); margin-left: .8rem; }
.bg:hover { border-color: rgb(var(--dyn-acc)); color: rgb(var(--dyn-acc)); opacity: 1; }

/* ── SCROLL INDICATOR ──────────────────────────────────────── */
#scrollInd {
  position: fixed; bottom: 2rem; right: var(--pad-x);
  z-index: 50;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  opacity: .28; transition: opacity .45s;
}
#scrollInd.fade { opacity: 0; pointer-events: none; }
.si-txt {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .70rem; letter-spacing: .24em;
  writing-mode: vertical-rl; text-transform: lowercase;
  color: var(--txt-dim);
}
.si-line {
  width: 1px; height: 48px;
  background: linear-gradient(to bottom, rgb(var(--dyn-acc)), transparent);
  animation: siP 2.4s ease-in-out infinite;
}
@keyframes siP {
  0%, 100% { transform: scaleY(.4); opacity: .25; }
  50%       { transform: scaleY(1);  opacity: 1;   }
}


/* ── MARKENSCHICHT dpi ───────────────────────────────────────
   Feste Markenfarben aus dem CI-Handbuch. Arbeitsteilung:
   --dyn-acc  = Flaechenfarbe hinter weissem Text (buttons, chips).
                Bleibt immer dpi-Blau; Mint erreicht mit Weiss nur
                2,05:1 und darf nie Buttonflaeche werden.
   Mint       = Grafikfarbe: linien, raender, punktwolke, marker,
                und Textfarbe ausschliesslich auf dunklem Grund
                (6,68:1 auf --band-bg). Nie kleiner Text auf hell. */
:root {
  --dpi-dark: #2C2D34;
  --dpi-mid:  #2B335C;
  --dpi-blue: #4C4B9E;
  --dpi-mint: #69C5B2;

  --mint: 105,197,178;
  --blue: 76,75,158;

  /* dunkles Markenband (ablauf-sektion) */
  --band-bg:   #23242B;
  --band-bg-2: #2B335C;
  --band-txt:  #EDEEF5;
  --band-sub:  rgba(237,238,245,.64);
  --band-bd:   rgba(255,255,255,.10);
  --band-card: rgba(255,255,255,.045);
}
body.dark {
  --band-bg:   #15161C;
  --band-bg-2: #1E2440;
  --band-card: rgba(255,255,255,.05);
  --foot-c:    rgba(238,238,245,.56);
}

/* Die Rechtszeile im Footer traegt Impressum und Datenschutz — Pflichtlinks,
   die lesbar sein muessen. Der bisherige Wert erreichte nur 2,59:1 hell /
   2,27:1 dunkel; diese Werte erreichen 6,87:1 hell / 5,72:1 dunkel. */
:root { --foot-c: #52546A; }

/* Fokus durchgaengig sichtbar und in Markenfarbe */
:where(a, button, input, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--acc-txt);
  outline-offset: 3px;
  border-radius: 3px;
}