/* ============================================================
   EULANDA Software GmbH - www.eulanda.eu
   Statische Website. Keine Fremd-Ressourcen, keine Cookies,
   kein Tracking. Alles liegt neben dieser Datei.
   ============================================================ */

/* ---------- 1. Grundwerte ---------- */

:root {
  /* Flaechen */
  --bg:          #0a0c10;
  --bg-deep:     #06080b;
  --bg-2:        #0f1218;
  --surface:     #141922;
  --surface-2:   #1a212c;
  --surface-3:   #212a37;
  --line:        #242e3c;
  --line-soft:   #1a222d;

  /* Schrift */
  --ink:         #e9eef6;
  --ink-2:       #a8b6c9;
  --ink-3:       #6d7c91;
  --ink-4:       #4a5768;

  /* Marke */
  --brand:       #4d94ec;
  --brand-lift:  #85b8f7;
  --brand-deep:  #1c5aa8;
  --brand-ghost: rgba(77, 148, 236, .12);
  --accent:      #45d3bf;
  --accent-deep: #188f80;
  --gold:        #e8b055;

  /* Klassik-Welt (hell, bewusst anders) */
  --paper:       #f4f2ed;
  --paper-2:     #e7e4dc;
  --paper-line:  #cfcabd;
  --paper-ink:   #21262e;
  --paper-ink-2: #55605170;

  /* Masse */
  --wrap:        1180px;
  --wrap-wide:   1400px;
  --wrap-text:   680px;
  --r-s:         8px;
  --r-m:         14px;
  --r-l:         22px;
  --r-xl:        32px;

  /* Bewegung */
  --ease:        cubic-bezier(.22, .61, .36, 1);
  --ease-out:    cubic-bezier(.16, 1, .3, 1);

  --shadow-s:    0 2px 8px rgba(0,0,0,.35);
  --shadow-m:    0 18px 40px -18px rgba(0,0,0,.7);
  --shadow-l:    0 50px 100px -40px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.045);

  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
          "Helvetica Neue", Arial, sans-serif;
  --font-tight: "Segoe UI Variable Display", "Segoe UI", system-ui,
          -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", "Consolas", "SF Mono", ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 104px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.62;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; display: block; }
img { height: auto; }

a { color: var(--brand-lift); text-decoration: none; }
a:hover { color: #a9cffb; }

h1, h2, h3, h4 {
  font-family: var(--font-tight);
  line-height: 1.1;
  letter-spacing: -.022em;
  margin: 0 0 .55em;
  font-weight: 700;
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 1.3rem + 4.4vw, 4.6rem); font-weight: 800; letter-spacing: -.035em; }
h2 { font-size: clamp(1.85rem, 1.15rem + 2.6vw, 3.05rem); font-weight: 750; letter-spacing: -.028em; }
h3 { font-size: clamp(1.22rem, 1.05rem + .7vw, 1.55rem); }
h4 { font-size: 1.05rem; letter-spacing: -.01em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--brand); color: #fff; }

:focus-visible {
  outline: 2px solid var(--brand-lift);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- 2. Layout-Bausteine ---------- */

.wrap  { width: min(100% - 2.8rem, var(--wrap));      margin-inline: auto; }
.wrap-wide { width: min(100% - 2.8rem, var(--wrap-wide)); margin-inline: auto; }
.wrap-text { width: min(100% - 2.8rem, var(--wrap-text)); margin-inline: auto; }

@media (max-width: 560px) {
  .wrap, .wrap-wide, .wrap-text { width: calc(100% - 2rem); }
}

section { position: relative; }
.band     { padding: clamp(4.5rem, 9vw, 8.5rem) 0; }
.band-sm  { padding: clamp(3rem, 6vw, 5rem) 0; }
.band-tint   { background: var(--bg-2); }
.band-deep   { background: var(--bg-deep); }

.band-tint::before, .band-deep::before {
  content: "";
  position: absolute; inset-inline: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 25%, var(--line) 75%, transparent);
}

.lede {
  font-size: clamp(1.08rem, 1rem + .45vw, 1.32rem);
  line-height: 1.58;
  color: var(--ink-2);
  max-width: 62ch;
}

.center { text-align: center; }
.center .lede { margin-inline: auto; }

/* Kleines Etikett ueber Ueberschriften */
.eyebrow {
  display: inline-flex; align-items: center; gap: .6em;
  /* Nicht unter 12px fallen lassen - darunter wird es auf dem Telefon
     muehsam und Suchmaschinen bemaengeln es. */
  font-size: clamp(.76rem, .72rem + .12vw, .8rem); font-weight: 650;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand-lift);
  margin-bottom: 1.1rem;
}
.eyebrow::before {
  content: ""; width: 26px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand));
}
.center .eyebrow::after {
  content: ""; width: 26px; height: 1px;
  background: linear-gradient(90deg, var(--brand), transparent);
}

.section-head { max-width: 760px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.center .section-head { margin-inline: auto; }

/* ---------- 3. Knoepfe ---------- */

/* Flache Kachelform statt Pille - dieselbe Sprache wie die Anwendung.
   Der Farbverlauf ist absichtlich sehr flach; die Tiefe kommt aus einer
   feinen Lichtkante oben und einem knappen Schatten, nicht aus Buntheit. */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: .6em;
  padding: .78em 1.45em;
  border-radius: 7px;
  border: 1px solid transparent;
  font-family: var(--font);
  font-size: .95rem; font-weight: 600;
  letter-spacing: -.005em;
  cursor: pointer;
  transition: transform .22s var(--ease), background .22s, border-color .22s, box-shadow .22s, color .22s;
  white-space: nowrap;
}
.btn > * { position: relative; z-index: 1; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Ein einmaliger Lichtstreifen beim Ueberfahren */
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(115deg, transparent 34%, rgba(255,255,255,.16) 48%, transparent 62%);
  transform: translateX(-115%);
  transition: transform .75s var(--ease-out);
  pointer-events: none;
}
.btn:hover::after { transform: translateX(115%); }

.btn-primary {
  background: linear-gradient(180deg, #5a9dee, var(--brand) 62%, #3f83d8);
  color: #fff;
  border-color: rgba(160, 200, 250, .22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    0 1px 2px rgba(0,0,0,.3),
    0 6px 16px -10px rgba(77,148,236,.75);
}
.btn-primary:hover {
  color: #fff;
  background: linear-gradient(180deg, #6aa8f2, #5099ef 62%, #4189e0);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    0 2px 4px rgba(0,0,0,.32),
    0 10px 24px -12px rgba(77,148,236,.85);
}

.btn-ghost {
  background: rgba(255,255,255,.04);
  border-color: var(--line);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}
.btn-ghost:hover {
  background: rgba(255,255,255,.075);
  border-color: #384657; color: var(--ink);
}

.btn-quiet {
  background: transparent; color: var(--ink-2);
  padding-inline: .5em; border-radius: 6px;
}
.btn-quiet::after { display: none; }
.btn-quiet:hover { color: var(--ink); background: rgba(255,255,255,.045); }

.btn-sm { padding: .58em 1.1em; font-size: .87rem; border-radius: 6px; }

.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; }
.center .btn-row { justify-content: center; }

/* Textlink mit wanderndem Pfeil */
.link-go {
  display: inline-flex; align-items: center; gap: .45em;
  font-weight: 620; font-size: .96rem;
  color: var(--brand-lift);
}
.link-go svg { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.link-go:hover svg { transform: translateX(4px); }

/* ---------- 4. Kopfzeile ---------- */

.site-head {
  position: fixed; inset-inline: 0; top: 0; z-index: 90;
  transition: background .35s, border-color .35s, backdrop-filter .35s;
  border-bottom: 1px solid transparent;
}
.site-head.is-stuck {
  background: rgba(10, 12, 16, .82);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom-color: var(--line-soft);
}

.head-inner {
  display: flex; align-items: center; gap: 1.6rem;
  height: 86px;
}

/* Wortmarke. Der Untertitel steckt bewusst NICHT im Bild, sondern steht als
   Text daneben - dadurch ist er frei skalierbar und fuer Suchmaschinen
   lesbar. Die Bilddatei endet unterhalb des Schriftzugs. */
.brand { display: flex; align-items: center; gap: .8rem; color: var(--ink); flex-shrink: 0; }
.brand:hover { color: var(--ink); }
.brand-word { height: 40px; width: auto; display: block; }
.brand-sub {
  font-size: .74rem; font-weight: 600;
  letter-spacing: .085em;
  color: var(--ink-3);
  padding-left: .9rem;
  border-left: 1px solid var(--line);
  line-height: 1.28;
  max-width: 10rem;
}
@media (max-width: 860px) { .brand-sub { display: none; } }
@media (max-width: 480px) { .brand-word { height: 32px; } }

/* In der Fusszeile steht die Marke gross, Untertitel darunter */
.foot-about .brand { flex-direction: column; align-items: flex-start; gap: .7rem; }
.foot-about .brand-word { height: 54px; }
.foot-about .brand-sub {
  display: block;
  padding-left: 0; border-left: 0; max-width: none;
  font-size: .8rem; letter-spacing: .2em;
  color: var(--ink-2);
}

.nav { display: flex; align-items: center; gap: .15rem; margin-left: auto; }
.nav a {
  padding: .5em .82em;
  border-radius: 8px;
  font-size: .93rem; font-weight: 550;
  color: var(--ink-2);
  transition: color .2s, background .2s;
}
.nav a:hover { color: var(--ink); background: rgba(255,255,255,.05); }
.nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"]::after {
  content: ""; display: block; height: 2px; margin-top: .3em;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--brand), var(--accent));
}

.head-actions { display: flex; align-items: center; gap: .55rem; flex-shrink: 0; }

/* Der Knopf steckt zweimal im Markup: in der Leiste fuer grosse Schirme und
   im ausklappbaren Menue. Auf breiten Schirmen zeigt nur die Leiste ihn. */
@media (min-width: 1021px) {
  .nav > .btn { display: none; }
}

.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 10px;
  background: rgba(255,255,255,.04);
  color: var(--ink); cursor: pointer;
}
.nav-toggle span {
  display: block; width: 17px; height: 1.5px; background: currentColor;
  position: relative; border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s;
}
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 17px; height: 1.5px;
  background: currentColor; border-radius: 2px;
  transition: transform .3s var(--ease);
}
.nav-toggle span::before { top: -5.5px; }
.nav-toggle span::after  { top:  5.5px; }
.nav-toggle[aria-expanded="true"] span { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(5.5px) rotate(-90deg); }
.nav-toggle[aria-expanded="true"] span::after  { opacity: 0; }

@media (max-width: 1020px) {
  .nav-toggle { display: inline-flex; margin-left: auto; }
  .head-actions .btn { display: none; }
  .nav {
    position: fixed; inset: 86px 0 auto;
    flex-direction: column; align-items: stretch; gap: 0;
    margin: 0; padding: 1rem 1.4rem 2rem;
    background: rgba(10,12,16,.97);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line);
    max-height: calc(100dvh - 86px); overflow-y: auto;
    clip-path: inset(0 0 100% 0);
    transition: clip-path .42s var(--ease-out);
  }
  .nav.is-open { clip-path: inset(0 0 0 0); }
  .nav a { padding: .85em .6em; font-size: 1.05rem; border-bottom: 1px solid var(--line-soft); border-radius: 0; }
  .nav a[aria-current="page"]::after { display: none; }
  .nav a[aria-current="page"] { color: var(--brand-lift); }
  .nav .btn { margin-top: 1.1rem; justify-content: center; }
}

/* Lesefortschritt */
.progress {
  position: fixed; inset-inline: 0; top: 0; height: 2px; z-index: 95;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  transform-origin: 0 50%; transform: scaleX(0);
  pointer-events: none;
}

/* ---------- 5. Buehne ---------- */

.hero {
  position: relative;
  padding: clamp(9rem, 15vw, 13rem) 0 clamp(3rem, 6vw, 5rem);
  overflow: hidden;
  isolation: isolate;
}

/* Rasterfeld + zwei weiche Lichtquellen, rein aus CSS */
.hero-bg {
  position: absolute; inset: -20% -10% 0; z-index: -2;
  pointer-events: none;
}
.hero-bg::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(120% 75% at 50% 22%, #000 20%, transparent 72%);
  -webkit-mask-image: radial-gradient(120% 75% at 50% 22%, #000 20%, transparent 72%);
}
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(46% 42% at 22% 12%, rgba(77,148,236,.28), transparent 62%),
    radial-gradient(40% 40% at 82% 6%,  rgba(69,211,191,.14), transparent 60%);
  filter: blur(10px);
  animation: drift 26s var(--ease) infinite alternate;
}
@keyframes drift {
  from { transform: translate3d(-2%, 0, 0) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.09); }
}

/* Auf breiten Schirmen steht neben der Ansage gleich das Produkt */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 1120px) {
  .hero-grid { grid-template-columns: minmax(0, .97fr) minmax(0, 1.03fr); }
  /* Die Ansage teilt sich den Platz - deshalb hier eine ruhigere Staffelung,
     damit die Zeilen nicht nach zwei Woertern umbrechen. */
  .hero-grid h1 { font-size: clamp(2.2rem, .55rem + 2.2vw, 3.15rem); }
  .hero-grid .lede { font-size: clamp(1.02rem, .95rem + .28vw, 1.17rem); }
}
@media (min-width: 1560px) {
  .hero-grid { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
  .hero-grid h1 { font-size: 3.5rem; }
}

.hero-inner { max-width: 900px; }

/* Bildschirm und Telefon versetzt uebereinander */
.hero-art { position: relative; }
.hero-art .frame { margin-right: clamp(0px, 4vw, 62px); }
.hero-art .phone {
  position: absolute;
  right: -8px; bottom: -34px;
  width: clamp(120px, 13vw, 172px);
  z-index: 3;
}
.hero-art .phone .phone-screen { border-radius: 19px; }

/* Beide Geraete schweben in DIESELBE Richtung, das Telefon mit leichtem
   Nachlauf. Liefen sie gegeneinander, wuerde die Anordnung auseinander-
   gerissen wirken - das Telefon haengt am Container, nicht am Bildschirm.
   Der Ausschlag ist bewusst klein: lebendig, nicht wackelig. */
.hero-art .frame,
.hero-art .phone {
  animation: schweben 10s ease-in-out infinite;
}
.hero-art .phone {
  /* Negativer Vorlauf = das Telefon hinkt der Bewegung sanft hinterher */
  animation-delay: -.9s;
}

@keyframes schweben {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

/* Ein Lichtstreifen wandert gelegentlich ueber den Bildschirm, so wie
   Licht ueber ein echtes Display streicht. */
.hero-art .frame::after {
  content: "";
  position: absolute; inset: 10px 10px 0;
  border-radius: 6px;
  background: linear-gradient(102deg,
              transparent 38%, rgba(160, 205, 255, .13) 47%,
              rgba(210, 232, 255, .2) 50%, rgba(160, 205, 255, .13) 53%,
              transparent 62%);
  transform: translateX(-130%);
  animation: glanz 9s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}
@keyframes glanz {
  0%, 62%   { transform: translateX(-130%); }
  86%, 100% { transform: translateX(130%); }
}

/* Der Draht zwischen beiden Geraeten: dieselbe Datenbank, zwei Schirme */
.hero-wire {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%;
  pointer-events: none; overflow: visible;
}
.hero-wire .hw-bahn {
  fill: none; stroke: rgba(133, 184, 247, .3);
  stroke-width: 1.4; stroke-dasharray: 3 6; stroke-linecap: round;
}
.hero-wire .hw-fluss {
  fill: none; stroke: #6fb0f5; stroke-width: 2.6; stroke-linecap: round;
  stroke-dasharray: 3 190;
  animation: hw-lauf 4.2s linear infinite;
  filter: drop-shadow(0 0 4px rgba(111,176,245,.7));
}
.hero-wire .hw-fluss-b {
  stroke: #45d3bf; animation-duration: 5.6s; animation-delay: 1.8s;
  filter: drop-shadow(0 0 4px rgba(69,211,191,.65));
}
@keyframes hw-lauf { to { stroke-dashoffset: -193; } }

/* Punkt am Bildschirmrand, der die Verbindung markiert */
.hero-wire .hw-knoten { fill: #6fb0f5; }
.hero-wire .hw-ring {
  fill: none; stroke: #6fb0f5; stroke-width: 1.4;
  transform-origin: center;
  animation: hw-puls 3s ease-out infinite;
}
@keyframes hw-puls {
  0%   { r: 4; opacity: .9; }
  70%  { r: 13; opacity: 0; }
  100% { r: 13; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-art .frame, .hero-art .phone { animation: none; }
  .hero-art .frame::after { animation: none; opacity: 0; }
  .hero-wire .hw-fluss, .hero-wire .hw-ring { animation: none; }
  .hero-wire .hw-fluss { opacity: .55; stroke-dasharray: none; }
}

@media (max-width: 620px) {
  .hero-wire { display: none; }
}
@media (max-width: 1119px) {
  .hero-art { max-width: 760px; }
  .hero-art .phone { bottom: -22px; }
}
@media (max-width: 620px) {
  .hero-art .phone { display: none; }
  .hero-art .frame { margin-right: 0; }
}

.hero h1 { margin-bottom: .45em; }

/* Wer gemeint ist - steht bewusst vor der Erklaerung, damit niemand erst
   drei Absaetze lesen muss, um sich wiederzuerkennen. */
.hero-who {
  font-size: clamp(1rem, .95rem + .3vw, 1.14rem);
  color: var(--ink-2);
  margin-bottom: 1.1em;
  padding-left: 1rem;
  border-left: 2px solid var(--brand);
  max-width: 54ch;
}
.hero-who strong { color: var(--ink); font-weight: 640; }
.hero h1 .grad {
  background: linear-gradient(105deg, var(--brand-lift) 8%, var(--accent) 92%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.hero .lede { font-size: clamp(1.12rem, 1rem + .6vw, 1.42rem); max-width: 60ch; }
/* Zweiter Absatz der Bühne: sagt in zwei Sätzen, was der Bestandskunde und
   was der Neukunde bekommt. Bewusst eine Spur kleiner und ruhiger als der
   Vorspann darüber - zwei gleich grosse Absätze nehmen der Überschrift die
   Wirkung. */
.hero .hero-wege {
  font-size: clamp(1rem, .95rem + .3vw, 1.14rem);
  max-width: 58ch;
  margin-top: .9em;
}
.hero .btn-row { margin-top: 2.2rem; }

/* Kleine Faktenzeile unter der Buehne */
.hero-facts {
  display: flex; flex-wrap: wrap; gap: 0;
  margin-top: 3.4rem;
  border-top: 1px solid var(--line-soft);
}
.hero-facts div {
  flex: 1 1 190px;
  padding: 1.15rem 1.4rem 1.15rem 0;
  border-right: 1px solid var(--line-soft);
}
.hero-facts div:last-child { border-right: 0; }
.hero-facts dt {
  font-size: .72rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 620; margin-bottom: .3em;
}
.hero-facts dd {
  margin: 0; font-family: var(--font-tight);
  font-size: 1.02rem; font-weight: 620; color: var(--ink); letter-spacing: -.015em;
}

/* ---------- 6. Der Schieber: Klassik / EulandaX ---------- */

.shift { position: relative; }

.shift-stage {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-l);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-l);
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
  --split: 50%;
}
@media (max-width: 700px) { .shift-stage { aspect-ratio: 4 / 3; } }

.shift-layer { position: absolute; inset: 0; }
.shift-layer img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }

/* Die Klassik-Ebene wird links freigelegt */
.shift-layer-a { clip-path: inset(0 calc(100% - var(--split)) 0 0); z-index: 2; }
.shift-layer-a img { filter: saturate(.85) contrast(1.02); }

.shift-tag {
  position: absolute; top: 1.1rem; z-index: 4;
  display: inline-flex; align-items: center; gap: .5em;
  padding: .42em .95em;
  border-radius: 6px;
  font-size: .76rem; font-weight: 640; letter-spacing: .05em;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
}
.shift-tag-a {
  left: 1.1rem;
  background: rgba(244,242,237,.9); color: #1d2733;
  border: 1px solid rgba(0,0,0,.12);
}
.shift-tag-b {
  right: 1.1rem;
  background: rgba(10,12,16,.72); color: var(--ink);
  border: 1px solid rgba(255,255,255,.14);
}

.shift-handle {
  position: absolute; top: 0; bottom: 0; z-index: 5;
  left: var(--split);
  width: 2px; margin-left: -1px;
  background: linear-gradient(180deg, transparent, #fff 12%, #fff 88%, transparent);
  box-shadow: 0 0 22px rgba(255,255,255,.4);
  pointer-events: none;
}
.shift-knob {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(14,18,24,.86);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255,255,255,.55);
  box-shadow: 0 8px 30px rgba(0,0,0,.6);
  display: grid; place-items: center;
  color: #fff;
}
.shift-knob svg { width: 22px; height: 22px; }
.shift-stage:hover .shift-knob { animation: nudge 1.6s var(--ease) infinite; }
@keyframes nudge {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.09); }
}

.shift-hint {
  position: absolute; bottom: 1.1rem; left: 50%; transform: translateX(-50%);
  z-index: 4;
  font-size: .78rem; color: rgba(255,255,255,.72);
  background: rgba(10,12,16,.6);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: .38em .95em; border-radius: 6px;
  border: 1px solid rgba(255,255,255,.1);
  pointer-events: none;
  transition: opacity .4s;
}
.shift-stage.is-touched .shift-hint { opacity: 0; }

.shift-caption {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;
  margin-top: 1.8rem;
}
@media (max-width: 700px) { .shift-caption { grid-template-columns: 1fr; gap: 1.2rem; } }
.shift-caption h3 { margin-bottom: .3em; font-size: 1.06rem; }
.shift-caption p { font-size: .95rem; color: var(--ink-2); margin: 0; }

/* ---------- 7. Karten und Raster ---------- */

.grid { display: grid; gap: 1.15rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.card {
  position: relative;
  padding: 1.85rem;
  border-radius: var(--r-m);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  transition: border-color .35s, background .35s, transform .35s var(--ease);
  overflow: hidden;
}
.card:hover { border-color: var(--line); background: var(--surface-2); }

.card h3 { font-size: 1.14rem; margin-bottom: .45em; }
.card p  { font-size: .95rem; color: var(--ink-2); margin: 0; }
.card p + p { margin-top: .8em; }

.card-icon {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--brand-ghost);
  border: 1px solid rgba(77,148,236,.22);
  color: var(--brand-lift);
  margin-bottom: 1.15rem;
}
.card-icon svg { width: 21px; height: 21px; }

.card-num {
  font-family: var(--mono);
  font-size: .76rem; letter-spacing: .1em;
  color: var(--ink-4);
  margin-bottom: .9rem;
}

.card-link { display: block; color: inherit; }
.card-link:hover { color: inherit; }
.card-link::after {
  content: "";
  position: absolute; inset-inline: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .45s var(--ease-out);
}
.card-link:hover::after { transform: scaleX(1); }

/* Bento: unterschiedlich grosse Kacheln */
.bento { display: grid; gap: 1.15rem; grid-template-columns: repeat(6, 1fr); }
.bento > * { grid-column: span 2; }
.bento .span-3 { grid-column: span 3; }
.bento .span-4 { grid-column: span 4; }
.bento .span-6 { grid-column: span 6; }
@media (max-width: 980px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento > *, .bento .span-3, .bento .span-4, .bento .span-6 { grid-column: span 2; }
}

/* Kachel mit Bildinhalt */
.tile-shot {
  padding: 0;
  display: flex; flex-direction: column;
  background: var(--surface);
}
.tile-shot .tile-body { padding: 1.6rem 1.75rem 1.75rem; }
.tile-shot .tile-body h3 { font-size: 1.1rem; }
/* Wie bei den Branchenbildern: tiefes Schwarz als Grund und eine eigene
   Ebene, damit waehrend der Bewegung nichts an den Kanten durchblitzt. */
.tile-shot figure {
  margin: 0;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transform: translateZ(0);
  border-bottom: 1px solid var(--line-soft);
  background: #000;
}
.tile-shot figure img {
  display: block;
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top left;
  transform: scale(1.012);
  transition: transform 1.1s var(--ease-out), opacity .5s;
  opacity: .92;
  will-change: transform;
  backface-visibility: hidden;
}
.tile-shot:hover figure img { transform: scale(1.05); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .tile-shot:hover figure img { transform: scale(1.012); }
}

/* ---------- 7b. Leistungsumfang auf einen Blick ---------- */

/* Zehn Bereiche, jeder eine Zeile Stichworte. Wer die Seite oeffnet, soll
   ohne Lesen erkennen, was das System abdeckt. */
.scope {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-m);
  overflow: hidden;
}
.scope-item {
  background: var(--bg);
  padding: 1.35rem 1.5rem;
  transition: background .3s;
}
.scope-item:hover { background: var(--surface); }
.scope-head {
  display: flex; align-items: center; gap: .62rem;
  margin-bottom: .5rem;
}
.scope-head svg {
  width: 17px; height: 17px; flex-shrink: 0;
  color: var(--brand-lift);
}
.scope-head h3 {
  margin: 0; font-size: .97rem; font-weight: 660;
  letter-spacing: -.01em; color: var(--ink);
}
.scope-item p {
  margin: 0; font-size: .89rem; line-height: 1.55;
  color: var(--ink-3);
}
.scope-item b { color: var(--ink-2); font-weight: 550; }

/* Fussnote unter dem Raster */
.scope-note {
  margin-top: 1.2rem;
  font-size: .89rem; color: var(--ink-3);
  display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; align-items: center;
}

/* Hinweisstreifen fuer Themen mit Frist - faellt auf, ohne zu schreien */
.alert {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.4rem; align-items: center;
  padding: 1.5rem 1.7rem;
  border-radius: var(--r-m);
  background:
    linear-gradient(100deg, rgba(232,176,85,.11), rgba(232,176,85,.03) 55%, transparent),
    var(--surface);
  border: 1px solid rgba(232,176,85,.24);
  border-left: 3px solid var(--gold);
}
.alert-icon {
  width: 44px; height: 44px; border-radius: 11px; flex-shrink: 0;
  display: grid; place-items: center;
  background: rgba(232,176,85,.12);
  border: 1px solid rgba(232,176,85,.28);
  color: var(--gold);
}
.alert-icon svg { width: 21px; height: 21px; }
.alert h3 { margin: 0 0 .25em; font-size: 1.08rem; }
.alert p  { margin: 0; font-size: .94rem; color: var(--ink-2); max-width: 76ch; }
.alert p + p { margin-top: .5em; }
.alert .btn { flex-shrink: 0; }
@media (max-width: 820px) {
  .alert { grid-template-columns: auto 1fr; }
  .alert .btn { grid-column: 1 / -1; justify-content: center; margin-top: .3rem; }
}
@media (max-width: 520px) {
  .alert { grid-template-columns: 1fr; gap: 1rem; }
}

@media (max-width: 560px) {
  .scope-item { padding: 1.15rem 1.2rem; }
}

/* ---------- 8. Bildschirm-Rahmen ---------- */

.frame {
  position: relative;
  border-radius: var(--r-m);
  background: linear-gradient(180deg, #1c232e, #10151c);
  padding: 10px 10px 0;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-l);
}
.frame-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 0 4px 9px;
}
.frame-bar i {
  width: 9px; height: 9px; border-radius: 50%;
  background: #333d4b; display: block;
}
.frame-bar i:nth-child(1) { background: #4a3238; }
.frame-bar i:nth-child(2) { background: #4a4232; }
.frame-bar i:nth-child(3) { background: #32463a; }
.frame-bar span {
  margin-left: auto; margin-right: auto;
  font-family: var(--mono); font-size: .75rem; color: var(--ink-4);
  transform: translateX(-15px);
}
.frame img {
  width: 100%; display: block;
  border-radius: 6px 6px 0 0;
  border: 1px solid var(--line-soft); border-bottom: 0;
}

/* Glanzkante am oberen Rand */
.frame::before {
  content: ""; position: absolute; inset-inline: 18%; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(133,184,247,.65), transparent);
}

/* Handy-Rahmen */
.phone {
  width: 214px; flex-shrink: 0;
  border-radius: 30px;
  background: linear-gradient(180deg, #1c232e, #0d1116);
  border: 1px solid var(--line);
  padding: 9px;
  box-shadow: var(--shadow-l);
}
.phone-screen {
  border-radius: 23px; overflow: hidden;
  background: var(--bg-deep);
  aspect-ratio: 9 / 19;
  position: relative;
}
.phone-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.phone::after {
  content: ""; position: absolute; top: 17px; left: 50%; transform: translateX(-50%);
  width: 58px; height: 5px; border-radius: 3px; background: #0d1116; z-index: 3;
}

/* ---------- 9. Zwei-Spalten mit Bild ---------- */

.split {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.split-tight { grid-template-columns: .9fr 1.1fr; }
.split-wide  { grid-template-columns: 1.15fr .85fr; }

/* Steht ein Bildschirmfoto in der Spalte, bekommt es spuerbar mehr Raum -
   ein Beleg mit zwanzig Zeilen braucht mehr Flaeche als ein Absatz Text. */
.split:has(> .split-media)              { grid-template-columns: 1fr 1.5fr; }
.split:has(> .split-media:first-child)  { grid-template-columns: 1.5fr 1fr; }
.split-tight:has(> .split-media)             { grid-template-columns: .85fr 1.45fr; }
.split-tight:has(> .split-media:first-child) { grid-template-columns: 1.45fr .85fr; }
.split-wide:has(> .split-media)              { grid-template-columns: 1fr 1.3fr; }
.split-wide:has(> .split-media:first-child)  { grid-template-columns: 1.3fr 1fr; }

@media (max-width: 900px) {
  .split, .split-tight, .split-wide,
  .split:has(> .split-media), .split:has(> .split-media:first-child),
  .split-tight:has(> .split-media), .split-tight:has(> .split-media:first-child),
  .split-wide:has(> .split-media), .split-wide:has(> .split-media:first-child) {
    grid-template-columns: 1fr;
  }
  .split .split-media { order: -1; }
}

/* ---------- 10. Liste mit Haken ---------- */

.checks { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .72rem; }
.checks li {
  position: relative; padding-left: 2rem;
  color: var(--ink-2); font-size: .98rem;
}
.checks li::before {
  content: ""; position: absolute; left: 0; top: .46em;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--brand-ghost);
  border: 1px solid rgba(77,148,236,.35);
}
.checks li::after {
  content: ""; position: absolute; left: 5px; top: .78em;
  width: 5px; height: 8px;
  border-right: 1.7px solid var(--brand-lift);
  border-bottom: 1.7px solid var(--brand-lift);
  transform: rotate(42deg);
}
.checks strong { color: var(--ink); font-weight: 620; }

/* Aufzaehlung ohne Haken, mit Trennlinien */
.rows { list-style: none; margin: 0; padding: 0; }
.rows li {
  display: grid; grid-template-columns: 150px 1fr; gap: 1.5rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: .96rem;
}
.rows li:first-child { border-top: 1px solid var(--line-soft); }
.rows dt, .rows b {
  font-weight: 640; color: var(--ink);
  font-family: var(--font-tight); letter-spacing: -.01em;
}
.rows span { color: var(--ink-2); }
@media (max-width: 620px) {
  .rows li { grid-template-columns: 1fr; gap: .3rem; }
}

/* ---------- 11. Zahlen ---------- */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px;
         background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--r-m); overflow: hidden; }
.stat { background: var(--bg); padding: 1.9rem 1.6rem; }
.stat b {
  display: block;
  font-family: var(--font-tight);
  font-size: clamp(2rem, 1.4rem + 2vw, 2.9rem);
  font-weight: 750; letter-spacing: -.04em;
  line-height: 1;
  background: linear-gradient(160deg, var(--ink) 30%, var(--brand-lift));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: .35rem;
}
.stat span { font-size: .87rem; color: var(--ink-3); line-height: 1.4; display: block; }

/* ---------- 12. Laufband ---------- */

.ticker {
  position: relative; overflow: hidden;
  padding: 1.1rem 0;
  border-block: 1px solid var(--line-soft);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker-track {
  display: flex; gap: 2.6rem; width: max-content;
  animation: slide 42s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.ticker span {
  font-size: .9rem; font-weight: 550; color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 2.6rem;
  white-space: nowrap;
}
.ticker span::after { content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--ink-4); }

/* Sprachenliste: jede Sprache in ihrem eigenen Namen, dahinter das Kürzel.
   Bewusst ruhig und stehend - eine Liste, die vorbeizieht, kann man nicht
   lesen und nicht nachzählen. */
.langs {
  list-style: none;
  /* Breite gedeckelt, damit die dreizehn Namen in zwei etwa gleich lange
     Zeilen brechen (sieben und sechs). Über die volle Breite standen elf
     oben und zwei verloren darunter, bei 54rem blieb das Russische allein
     in der dritten Zeile. */
  max-width: 62rem;
  margin-inline: auto;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem .55rem;
}
/* Die Namen sollen etwas hermachen: eigene Fläche, klare Kante, das Kürzel
   als Marke daneben. Als blasse Zeile ging der Abschnitt schlicht unter. */
.langs li {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  padding: .5rem .95rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset;
  transition: border-color .18s ease, transform .18s ease;
}
.langs li:hover {
  border-color: var(--brand);
  transform: translateY(-1px);
}
.langs b {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--brand-lift, var(--brand));
}

/* ---------- 13. Klassik-Register (helle Welt) ---------- */

.paper {
  background: var(--paper);
  color: var(--paper-ink);
  position: relative;
}
.paper::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 120px;
  background: linear-gradient(180deg, var(--bg), transparent);
  pointer-events: none; opacity: .12;
}
.paper h1, .paper h2, .paper h3, .paper h4 { color: #171d25; }
.paper .lede, .paper p { color: #4a5462; }
.paper .eyebrow { color: #8a6a24; }
.paper .eyebrow::before { background: linear-gradient(90deg, transparent, #b08a34); }
.paper .eyebrow::after  { background: linear-gradient(90deg, #b08a34, transparent); }
.paper .card {
  background: #fbfaf7; border-color: var(--paper-line);
  box-shadow: 0 1px 2px rgba(30,25,15,.05);
}
.paper .card:hover { background: #fff; border-color: #b8b2a3; }
.paper .card p { color: #59626f; }
.paper .card-icon { background: rgba(176,138,52,.1); border-color: rgba(176,138,52,.25); color: #8a6a24; }
.paper .checks li { color: #4a5462; }
.paper .checks li::before { background: rgba(176,138,52,.12); border-color: rgba(176,138,52,.32); }
.paper .checks li::after  { border-color: #8a6a24; }
.paper .checks strong { color: #171d25; }
.paper .btn-ghost { background: rgba(0,0,0,.03); border-color: var(--paper-line); color: #2a323c; }
.paper .btn-ghost:hover { background: rgba(0,0,0,.06); border-color: #a9a294; color: #171d25; }
.paper .rows li { border-color: var(--paper-line); }
.paper .rows dt, .paper .rows b { color: #171d25; }
.paper .rows span { color: #59626f; }
.paper a { color: #7a5c1c; }
.paper a:hover { color: #5c4413; }
.paper .link-go { color: #7a5c1c; }
.paper .frame { background: linear-gradient(180deg, #ddd8cc, #cbc5b6); border-color: #b8b2a3; }
.paper .frame-bar span { color: #7d7565; }
.paper .frame img { border-color: #b8b2a3; }

/* ---------- 14. Aufklapper ---------- */

.faq { border-top: 1px solid var(--line-soft); }
.faq details {
  border-bottom: 1px solid var(--line-soft);
}
.faq summary {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.35rem 0;
  cursor: pointer; list-style: none;
  font-family: var(--font-tight);
  font-size: 1.06rem; font-weight: 620; letter-spacing: -.015em;
  color: var(--ink);
  transition: color .25s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--brand-lift); }
.faq summary::after {
  content: ""; flex-shrink: 0; margin-left: auto; margin-top: .42em;
  width: 11px; height: 11px;
  border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg);
  transition: transform .32s var(--ease);
  opacity: .5;
}
.faq details[open] summary::after { transform: rotate(-135deg); opacity: 1; }
.faq .faq-body { padding: 0 0 1.5rem; max-width: 68ch; }
.faq .faq-body p { font-size: .97rem; color: var(--ink-2); }

/* ---------- 15. Zitat ---------- */

.quote {
  position: relative;
  padding: 2.4rem 2.6rem;
  border-radius: var(--r-m);
  background: linear-gradient(150deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line);
}
.quote::before {
  content: "\201E";
  position: absolute; top: -.12em; left: .3em;
  font-size: 6rem; line-height: 1;
  color: var(--brand); opacity: .16;
  font-family: Georgia, serif;
}
.quote p {
  font-family: var(--font-tight);
  font-size: clamp(1.1rem, 1rem + .5vw, 1.34rem);
  line-height: 1.5; letter-spacing: -.018em;
  color: var(--ink);
  position: relative;
}
.quote footer { font-size: .88rem; color: var(--ink-3); margin-top: 1.2rem; }

/* ---------- 16. Aufruf-Block ---------- */

.cta {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl);
  padding: clamp(2.8rem, 6vw, 5rem);
  background:
    radial-gradient(90% 130% at 12% 0%, rgba(77,148,236,.2), transparent 58%),
    radial-gradient(70% 120% at 92% 100%, rgba(69,211,191,.13), transparent 58%),
    var(--surface);
  border: 1px solid var(--line);
}
.cta::after {
  content: ""; position: absolute; inset-inline: 22%; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand-lift), transparent);
}
.cta h2 { max-width: 18ch; }
.cta .lede { max-width: 52ch; }
.cta .btn-row { margin-top: 2rem; }

/* ---------- 17. Fusszeile ---------- */

.site-foot {
  background: var(--bg-deep);
  border-top: 1px solid var(--line-soft);
  padding: clamp(3.2rem, 6vw, 5rem) 0 2rem;
  font-size: .93rem;
}
.foot-grid {
  display: grid; gap: 2.6rem;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  padding-bottom: 3rem;
}
@media (max-width: 880px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 2.2rem; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }

.foot-grid h4 {
  font-size: .74rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 640; margin-bottom: 1.1rem;
}
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.foot-grid a {
  color: var(--ink-2);
  /* Fingerfreundlich: ein Verweis muss auf dem Telefon eine Flaeche haben,
     die man ohne Zielen trifft. Reiner Text ist rund 20 Pixel hoch und liegt
     damit unter dem, was Suchmaschinen und Bediengeraete erwarten. */
  display: inline-block;
  padding: .32rem 0;
  min-height: 24px;
}
.foot-grid a:hover { color: var(--ink); }
.foot-about p { color: var(--ink-3); font-size: .9rem; max-width: 34ch; margin-top: 1rem; }
.foot-about .brand { margin-bottom: 0; }

/* Kein Cookie-Fenster - also darf man auch sagen, warum */
.foot-note {
  padding: 1rem 1.25rem;
  margin-bottom: 1.8rem;
  border-radius: var(--r-s);
  background: rgba(69,211,191,.055);
  border: 1px solid rgba(69,211,191,.18);
  border-left: 3px solid var(--accent);
  font-size: .88rem; color: var(--ink-2);
  max-width: 86ch;
}
.foot-note strong { color: var(--ink); font-weight: 620; }

.foot-bar {
  display: flex; flex-wrap: wrap; gap: 1rem 1.8rem;
  align-items: center;
  padding-top: 1.8rem;
  border-top: 1px solid var(--line-soft);
  color: var(--ink-4); font-size: .85rem;
}
.foot-bar nav { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-left: auto; }
.foot-bar a {
  color: var(--ink-3);
  display: inline-block; padding: .3rem 0; min-height: 24px;
}

/* ---------- 18. Rechtstexte ---------- */

.legal { padding: clamp(8rem, 12vw, 10rem) 0 clamp(4rem, 8vw, 6rem); }
.legal h2 { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.85rem); margin-top: 2.8rem; }
.legal h3 { font-size: 1.12rem; margin-top: 2rem; }
.legal p, .legal li { color: var(--ink-2); font-size: .99rem; }
.legal ul { padding-left: 1.3rem; display: grid; gap: .45rem; }
.legal address { font-style: normal; color: var(--ink-2); }
.legal .box {
  padding: 1.6rem 1.8rem; border-radius: var(--r-m);
  background: var(--surface); border: 1px solid var(--line-soft);
  margin: 1.6rem 0;
}
.legal .box p:last-child { margin-bottom: 0; }

/* ---------- 19. Etiketten ---------- */

.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  display: inline-flex; align-items: center; gap: .45em;
  padding: .35em .85em;
  border-radius: 6px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  font-size: .82rem; color: var(--ink-2);
  transition: border-color .25s, color .25s, background .25s;
}
a.chip:hover { border-color: var(--brand); color: var(--ink); background: var(--brand-ghost); }
.chip-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.chip-soon { color: var(--ink-4); border-style: dashed; }
.paper .chip { background: rgba(0,0,0,.03); border-color: var(--paper-line); color: #59626f; }

.badge {
  display: inline-flex; align-items: center; gap: .45em;
  padding: .3em .75em; border-radius: 6px;
  font-size: .72rem; font-weight: 660; letter-spacing: .05em; text-transform: uppercase;
  background: var(--brand-ghost); color: var(--brand-lift);
  border: 1px solid rgba(77,148,236,.25);
}
.badge-accent { background: rgba(69,211,191,.1); color: var(--accent); border-color: rgba(69,211,191,.25); }
.badge-gold   { background: rgba(232,176,85,.1); color: var(--gold); border-color: rgba(232,176,85,.25); }

/* ---------- 20. Schichtdiagramm (Technik) ---------- */

.stack { display: grid; gap: .55rem; }
.layer {
  position: relative;
  display: grid; grid-template-columns: 190px 1fr; gap: 1.6rem; align-items: center;
  padding: 1.35rem 1.6rem;
  border-radius: var(--r-s);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--layer-color, var(--brand));
  transition: transform .35s var(--ease), border-color .35s, background .35s;
}
.layer:hover { transform: translateX(6px); background: var(--surface-2); }
.layer h3 { margin: 0 0 .2em; font-size: 1.02rem; }
.layer .layer-tag {
  font-family: var(--mono); font-size: .72rem;
  color: var(--layer-color, var(--brand-lift)); letter-spacing: .04em;
}
.layer p { margin: 0; font-size: .93rem; color: var(--ink-2); }
@media (max-width: 700px) {
  .layer { grid-template-columns: 1fr; gap: .5rem; }
}

/* Verbindungs-Pfeil zwischen Schichten */
.stack-arrow {
  display: grid; place-items: center;
  height: 24px; color: var(--ink-4);
}
.stack-arrow svg { width: 14px; height: 14px; }

/* ---------- 20b. Lupe fuer Bildschirmfotos ---------- */

/* Jedes Bild aus assets/img/screens laesst sich vergroessern. Das Skript
   haengt die Klasse an und leitet die grosse Fassung aus dem Dateinamen ab. */
.zoomable { cursor: zoom-in; }

.zoom-wrap { position: relative; }
.zoom-wrap::after {
  content: "";
  position: absolute; right: 14px; bottom: 14px;
  width: 34px; height: 34px;
  border-radius: 8px;
  background: rgba(10,12,16,.72) center / 17px 17px no-repeat;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e9eef6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3M11 8v6M8 11h6'/%3E%3C/svg%3E");
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(4px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  pointer-events: none;
  z-index: 3;
}
.zoom-wrap:hover::after { opacity: 1; transform: none; }

/* Die Lupe: kein randloses Vollbild, sondern ein Fenster, das aus dem
   angeklickten Bild herauswaechst und wieder dorthin zurueckfaellt. */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }

.lightbox-veil {
  position: absolute; inset: 0;
  background: rgba(4, 6, 9, .78);
  backdrop-filter: blur(9px) saturate(120%);
  -webkit-backdrop-filter: blur(9px) saturate(120%);
  opacity: 0;
  transition: opacity .38s var(--ease);
}
.lightbox.is-open .lightbox-veil { opacity: 1; }

.lightbox-panel {
  position: relative;
  display: grid; grid-template-rows: auto 1fr auto;
  width: min(1480px, 100%);
  max-height: min(92vh, 1000px);
  border-radius: var(--r-m);
  background: linear-gradient(180deg, #161d27, #0e1219);
  border: 1px solid #2b3644;
  box-shadow:
    0 60px 130px -40px rgba(0,0,0,.92),
    0 0 0 1px rgba(255,255,255,.04),
    0 1px 0 rgba(255,255,255,.07) inset;
  overflow: hidden;
  transform: scale(.86);
  opacity: 0;
  transition: transform .46s var(--ease-out), opacity .28s var(--ease);
}
.lightbox.is-open .lightbox-panel { transform: scale(1); opacity: 1; }

/* Feine Lichtkante oben, wie an den uebrigen Rahmen */
.lightbox-panel::before {
  content: ""; position: absolute; inset-inline: 22%; top: 0; height: 1px; z-index: 4;
  background: linear-gradient(90deg, transparent, rgba(133,184,247,.6), transparent);
}

.lightbox-bar {
  display: flex; align-items: center; gap: .9rem;
  padding: .72rem .9rem .72rem 1.15rem;
  border-bottom: 1px solid #212a36;
  background: rgba(255,255,255,.018);
}
.lightbox-dots { display: flex; gap: 6px; flex-shrink: 0; }
.lightbox-dots i { width: 9px; height: 9px; border-radius: 50%; display: block; }
.lightbox-dots i:nth-child(1) { background: #4a3238; }
.lightbox-dots i:nth-child(2) { background: #4a4232; }
.lightbox-dots i:nth-child(3) { background: #32463a; }

.lightbox-title {
  font-size: .87rem; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}
.lightbox-tools { display: flex; align-items: center; gap: .35rem; margin-left: auto; flex-shrink: 0; }
.lightbox-btn {
  width: 36px; height: 36px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.045);
  color: var(--ink); cursor: pointer;
  transition: background .2s, border-color .2s, opacity .2s;
}
.lightbox-btn:hover { background: rgba(255,255,255,.11); border-color: #384657; }
.lightbox-btn svg { width: 17px; height: 17px; }
.lightbox-btn[disabled] { opacity: .3; cursor: default; }
.lightbox-btn-close { margin-left: .35rem; }
.lightbox-zoomlevel {
  font-family: var(--mono); font-size: .76rem; color: var(--ink-3);
  min-width: 3.2rem; text-align: center;
}

.lightbox-stage {
  overflow: auto;
  display: grid; place-items: center;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.013) 0 12px, transparent 12px 24px),
    var(--bg-deep);
  overscroll-behavior: contain;
  min-height: 0;
}
.lightbox-stage img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  display: block;
  transition: transform .3s var(--ease);
  transform-origin: center center;
  cursor: zoom-in;
}
.lightbox-stage.is-zoomed { place-items: start; }
.lightbox-stage.is-zoomed img { max-width: none; max-height: none; cursor: grab; }
.lightbox-stage.is-zoomed img.is-dragging { cursor: grabbing; transition: none; }

.lightbox-foot {
  padding: .62rem 1.15rem .68rem;
  border-top: 1px solid #212a36;
  background: rgba(255,255,255,.018);
  font-size: .8rem; color: var(--ink-4);
  display: flex; align-items: center; gap: .8rem;
}
.lightbox-foot .kbd { font-size: .74rem; }
.lightbox-hint-right { margin-left: auto; }

@media (max-width: 700px) {
  .lightbox { padding: .8rem; }
  .lightbox-title, .lightbox-hint-right { display: none; }
  .lightbox-panel { max-height: 94vh; }
}

/* ---------- 21. Enthuellen beim Scrollen ---------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }

[data-reveal-group] > * {
  opacity: 0; transform: translateY(22px);
  transition: opacity .75s var(--ease-out), transform .75s var(--ease-out);
}
[data-reveal-group].is-in > * { opacity: 1; transform: none; }
[data-reveal-group].is-in > *:nth-child(1) { transition-delay: 0s; }
[data-reveal-group].is-in > *:nth-child(2) { transition-delay: .07s; }
[data-reveal-group].is-in > *:nth-child(3) { transition-delay: .14s; }
[data-reveal-group].is-in > *:nth-child(4) { transition-delay: .21s; }
[data-reveal-group].is-in > *:nth-child(5) { transition-delay: .28s; }
[data-reveal-group].is-in > *:nth-child(6) { transition-delay: .35s; }
[data-reveal-group].is-in > *:nth-child(7) { transition-delay: .42s; }
[data-reveal-group].is-in > *:nth-child(8) { transition-delay: .49s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-reveal], [data-reveal-group] > * { opacity: 1 !important; transform: none !important; }
}

/* ---------- 22. Kleinteile ---------- */

.hr {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent);
}

.kbd {
  font-family: var(--mono); font-size: .82em;
  padding: .15em .45em; border-radius: 5px;
  background: rgba(255,255,255,.06); border: 1px solid var(--line);
  color: var(--ink-2);
}

.code {
  font-family: var(--mono); font-size: .86rem; line-height: 1.7;
  background: var(--bg-deep);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-s);
  padding: 1.2rem 1.4rem;
  overflow-x: auto;
  color: var(--ink-2);
  margin: 1.4rem 0;
}
.code .c-key { color: var(--brand-lift); }
.code .c-str { color: var(--accent); }
.code .c-dim { color: var(--ink-4); }

.note {
  padding: 1.15rem 1.4rem;
  border-radius: var(--r-s);
  background: var(--brand-ghost);
  border: 1px solid rgba(77,148,236,.2);
  border-left: 3px solid var(--brand);
  font-size: .93rem; color: var(--ink-2);
}
.note strong { color: var(--ink); }

/* Hinweis vor einem Verweis, der die Seite verlaesst */
.ext-note {
  display: grid; grid-template-columns: auto 1fr; gap: .85rem;
  padding: .95rem 1.15rem;
  border-radius: var(--r-s);
  background: rgba(232,176,85,.07);
  border: 1px solid rgba(232,176,85,.22);
  font-size: .88rem; color: var(--ink-2);
  line-height: 1.5;
}
.ext-note svg { width: 17px; height: 17px; color: var(--gold); margin-top: .15em; }
.ext-note strong { color: var(--ink); font-weight: 620; }

/* Kurze, nummerierte Anleitung */
.steps-mini {
  counter-reset: schritt;
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .6rem;
}
.steps-mini li {
  position: relative; padding-left: 2.1rem;
  font-size: .94rem; color: var(--ink-2);
}
.steps-mini li::before {
  counter-increment: schritt; content: counter(schritt);
  position: absolute; left: 0; top: .1em;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand-ghost);
  border: 1px solid rgba(77,148,236,.28);
  color: var(--brand-lift);
  font-size: .76rem; font-weight: 680;
}
.steps-mini strong { color: var(--ink); font-weight: 620; }

.skip {
  position: absolute; left: -999px; top: 0; z-index: 200;
  padding: .8em 1.4em; background: var(--brand); color: #fff;
  border-radius: 0 0 var(--r-s) 0;
}
.skip:focus { left: 0; color: #fff; }

/* Das X der Produktlinie.
   Zwei Fallen gleichzeitig: Ohne jede Absetzung liest sich "EulandaX" als ein
   Wort, dessen Ende an einen Boersenindex erinnert. Mit Abstand davor steht
   das X dagegen frei - und ein freistehendes X auf dunklem Grund erinnert
   sofort an das Kurznachrichtennetz.
   Deshalb: KEIN zusaetzlicher Abstand, das X bleibt am Wortstamm kleben. Nur
   die Farbe markiert es als Produktkennzeichen, und zwar im gedaempften
   Markenton statt im Signalblau. */
.x {
  color: #6fa6ea;
  font-weight: inherit;
  letter-spacing: inherit;
}
.paper .x { color: #9a7420; }

/* In Flaechen, die selbst schon eingefaerbt sind, bleibt das X ruhig.
   Diese Flaechen sind ausserdem Flex-Behaelter mit Abstand zwischen den
   Elementen - ein eigenes <span> wuerde dort als weiteres Element zaehlen
   und links und rechts eine Luecke aufreissen ("Eulanda  X  -Suite").
   display:contents nimmt die Box aus dem Layout, der Text bleibt Teil des
   umgebenden Flusses. */
.btn .x, .badge .x, .eyebrow .x, .chip .x, .link-go .x,
h1 .grad .x, h2 .grad .x {
  display: contents;
  color: inherit;
}

.muted { color: var(--ink-3); }
.small { font-size: .88rem; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mb-0 { margin-bottom: 0; }