/* ==========================================================================
   Webelux IT Solutions — Design System
   ========================================================================== */

/* ---------- Fonts: Xenon Nue ---------- */
@font-face {
  font-family: 'Xenon Nue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/xenon-nue-regular.woff2?v=aa54a8cc') format('woff2');
}
@font-face {
  font-family: 'Xenon Nue';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/xenon-nue-medium.woff2?v=2f8eb6d8') format('woff2');
}
@font-face {
  font-family: 'Xenon Nue';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/xenon-nue-semibold.woff2?v=291e4c9d') format('woff2');
}
@font-face {
  font-family: 'Xenon Nue';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/xenon-nue-bold.woff2?v=f5150866') format('woff2');
}
@font-face {
  font-family: 'Xenon Nue';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/xenon-nue-extrabold.woff2?v=f7154751') format('woff2');
}

/* ---------- Tokens ---------- */
:root {
  --bg: #070a10;
  --bg-2: #0b1017;
  --bg-3: #10161f;
  --surface: rgba(255, 255, 255, .035);
  --surface-2: rgba(255, 255, 255, .06);
  --line: rgba(255, 255, 255, .09);
  --line-2: rgba(255, 255, 255, .16);

  --text: #eef2f7;
  --text-2: #a7b2c2;
  --text-3: #6f7b8c;

  --accent: #3b82f6;
  --accent-2: #60a5fa;
  --accent-3: #1d4ed8;
  --accent-soft: rgba(59, 130, 246, .13);
  --accent-glow: rgba(59, 130, 246, .35);

  --radius-s: 10px;
  --radius: 16px;
  --radius-l: 24px;
  --radius-xl: 32px;

  --shell: 1200px;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --section: clamp(4.5rem, 10vw, 8rem);

  --ease: cubic-bezier(.22, 1, .36, 1);
  --shadow: 0 24px 60px -24px rgba(0, 0, 0, .8);
  --shadow-accent: 0 18px 46px -16px rgba(59, 130, 246, .55);

  /* Glaskanten nach Vorbild der Vorlage: heller Lichtsaum oben, Tiefe unten */
  --glass: linear-gradient(180deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .02) 100%);
  --glass-edge:
    inset 0 1px 0 rgba(255, 255, 255, .09),
    inset 0 -1px 0 rgba(0, 0, 0, .35),
    0 10px 30px -18px rgba(0, 0, 0, .9);

  --font: 'Xenon Nue', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

body {
  font-family: var(--font);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

img, svg, video, picture { display: block; max-width: 100%; }
img, video { height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 3px;
  border-radius: 6px;
}

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

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  line-height: 1.1;
  letter-spacing: -.025em;
  font-weight: 700;
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 1.5rem + 4.2vw, 4.6rem); font-weight: 800; letter-spacing: -.04em; }
h2 { font-size: clamp(1.85rem, 1.25rem + 2.6vw, 3.1rem); letter-spacing: -.035em; }
h3 { font-size: clamp(1.2rem, 1.05rem + .7vw, 1.5rem); }
p { text-wrap: pretty; }

.lead {
  font-size: clamp(1.06rem, .99rem + .38vw, 1.28rem);
  color: var(--text-2);
  line-height: 1.65;
  max-width: 60ch;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 1.15rem;
}
.eyebrow::before {
  content: '';
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent));
}

.grad {
  background: linear-gradient(105deg, #fff 20%, var(--accent-2) 62%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Layout ---------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: clamp(3rem, 6vw, 4.5rem); }
/* Video schliesst unmittelbar an den Seiten-Hero an */
.section--hero-video { padding-top: 0; padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow::before { display: none; }
.section-head p { margin-top: 1.15rem; }

.divider { height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); }

/* ---------- Skip link ---------- */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: .8rem 1.2rem;
  background: var(--accent);
  color: #fff;
  border-radius: 0 0 var(--radius-s) 0;
  font-weight: 600;
}
.skip:focus { left: 0; }

/* ---------- Header ---------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s;
  border-bottom: 1px solid transparent;
}
.header.is-stuck {
  background: rgba(7, 10, 16, .82);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom-color: var(--line);
}
.header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 88px;
}

.brand { display: inline-flex; align-items: center; gap: .85rem; flex-shrink: 0; }
.brand picture { display: flex; flex-shrink: 0; }
.brand__mark { width: 56px; height: auto; transition: transform .3s var(--ease); }
.brand:hover .brand__mark { transform: scale(1.04); }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name { font-size: 1.32rem; font-weight: 700; letter-spacing: -.03em; }
/* "lux" in Markenblau – wie in der Wortmarke des Logos */
.brand__lux { color: var(--accent-2); }
.brand__sub {
  font-size: .6rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: .34rem;
}

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: .1rem; }
.nav__cta { display: none; }
.nav__link {
  position: relative;
  display: block;
  padding: .55rem .78rem;
  font-size: .92rem;
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
  border-radius: var(--radius-s);
  transition: color .22s, background .22s;
}
.nav__link:hover { color: var(--text); background: var(--surface); }
.nav__link[aria-current='page'] { color: var(--text); }
.nav__link[aria-current='page']::after {
  content: '';
  position: absolute;
  left: .78rem;
  right: .78rem;
  bottom: .28rem;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}

.header__cta { margin-left: .6rem; }

.burger {
  display: none;
  width: 44px;
  height: 44px;
  margin-left: auto;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius-s);
  cursor: pointer;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.burger span {
  display: block;
  width: 18px;
  height: 1.6px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s;
}
.burger span + span { margin-top: 4.5px; }
.burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(6.1px) rotate(45deg); }
.burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6.1px) rotate(-45deg); }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .85rem 1.5rem;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
    background .25s, border-color .25s, color .25s;
  box-shadow: var(--shadow-accent);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 22px 54px -14px rgba(59, 130, 246, .7); }
.btn:active { transform: translateY(0); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  border-color: var(--line-2);
  box-shadow: none;
  backdrop-filter: blur(8px);
}
.btn--ghost:hover {
  background: var(--surface-2);
  border-color: var(--accent);
  box-shadow: none;
}
.btn--sm { padding: .6rem 1.15rem; font-size: .88rem; }
.btn--lg { padding: 1rem 1.9rem; font-size: 1.02rem; }

/* WhatsApp: Markenfarbe statt Akzentblau, damit der Kanal sofort erkennbar ist */
.btn--wa {
  --btn-bg: #25d366;
  --btn-fg: #04220f;
  box-shadow: 0 18px 42px -20px rgba(37, 211, 102, .85);
}
.btn--wa:hover {
  --btn-bg: #1fbe5b;
  box-shadow: 0 22px 54px -16px rgba(37, 211, 102, .6);
}
.btn--wa svg { width: 18px; height: 18px; }
/* Volle Breite ist auf schmalen Displays gutes Tap-Target-Design,
   auf dem Desktop wirkt ein 830px breiter Knopf dagegen unruhig. */
.btn--block { width: 100%; }
@media (min-width: 700px) {
  .btn--block { width: auto; }
}
.btn svg { width: 17px; height: 17px; flex-shrink: 0; }

/* Im Kopf nur das Symbol: mit Beschriftung wird die Leiste zwischen
   960 und 1200 px zu eng. Muss nach .btn--sm stehen, sonst gewinnt
   dessen padding. */
.header__wa {
  width: 42px;
  height: 42px;
  padding: 0;
  margin-left: .6rem;
  flex-shrink: 0;
}
.header__wa svg { width: 21px; height: 21px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(94svh, 940px);
  padding-top: 7.5rem;
  padding-bottom: clamp(6.75rem, 8vw, 8.5rem);
  overflow: hidden;
  isolation: isolate;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: #05070b;
}
.hero__media img, .hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
.hero__media video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.1s var(--ease);
}
/* Erst einblenden, wenn wirklich Bilder laufen - sonst kurzer Schwarzblitz */
.hero__media.is-playing video { opacity: 1; }
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(125% 95% at 20% 14%, rgba(7, 10, 16, .30) 0%, rgba(7, 10, 16, .74) 58%, rgba(7, 10, 16, .95) 100%),
    linear-gradient(180deg, rgba(7, 10, 16, .62) 0%, rgba(7, 10, 16, .22) 32%, rgba(7, 10, 16, .78) 80%, var(--bg) 100%);
}
.hero__inner { position: relative; width: 100%; }
.hero__content { max-width: 52rem; }
.hero h1 { margin-bottom: 1.35rem; max-width: 20ch; }
.hero .lead { max-width: 40rem; }

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .42rem 1rem .42rem .55rem;
  margin-bottom: 1.6rem;
  font-size: .8rem;
  font-weight: 500;
  color: var(--text-2);
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line);
  border-radius: 999px;
  backdrop-filter: blur(10px);
}
.hero__badge b { color: var(--text); font-weight: 600; }
.dot {
  width: 7px; height: 7px;
  margin-left: .35rem;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, .18);
}

/* Hero-Leistungen — bewusst ohne Kacheln:
   keine Flaeche, kein Rahmen, kein Schatten pro Eintrag,
   nur Icon, Titel, Kurztext und feine Trennlinien dazwischen. */
.hero__actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(2.25rem, 5vw, 3rem);
  max-width: 62rem;
}
.hero__mail { margin-top: 2rem; }

.svclink {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .55rem;
  padding: .15rem 1.4rem;
  min-width: 0;
  color: inherit;
}
.svclink:first-child { padding-left: 0; }
.svclink:last-child { padding-right: 0; }

/* senkrechte Haarlinie als Trenner statt Kachelkante */
.svclink::before {
  content: '';
  position: absolute;
  left: 0;
  top: .1rem;
  bottom: .1rem;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--line) 18%, var(--line) 82%, transparent);
}
.svclink:first-child::before { content: none; }

.svclink__icon {
  color: var(--accent-2);
  transition: transform .35s var(--ease);
}
.svclink__icon svg { display: block; width: 24px; height: 24px; }

.svclink__title {
  position: relative;
  display: inline-block;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -.02em;
  transition: color .3s;
}
.svclink__title::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -.28rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease);
}
.svclink__desc {
  font-size: .86rem;
  line-height: 1.5;
  color: var(--text-3);
}
/* Nur fuer die Handyansicht gedacht: dort ersetzt der Hinweis den
   ausgeblendeten Beschreibungstext und macht sichtbar, dass die Zeile
   auf die Leistungsseite fuehrt. Am Desktop uebernimmt das die
   Unterstreichung beim Ueberfahren, deshalb hier ausgeblendet. */
.svclink__more { display: none; }
.svclink:hover .svclink__title,
.svclink:focus-visible .svclink__title { color: var(--accent-2); }
.svclink:hover .svclink__title::after,
.svclink:focus-visible .svclink__title::after { transform: scaleX(1); }
.svclink:hover .svclink__icon { transform: translateY(-3px); }

.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 1.9rem;
  transform: translateX(-50%);
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
}
.scroll-hint i {
  width: 1px; height: 34px;
  background: linear-gradient(var(--accent), transparent);
  animation: drop 2.2s var(--ease) infinite;
}
@media (max-height: 780px) { .scroll-hint { display: none; } }
@keyframes drop {
  0%, 100% { transform: scaleY(.35); transform-origin: top; opacity: .3; }
  50% { transform: scaleY(1); transform-origin: top; opacity: 1; }
}

/* ---------- Page hero (sub pages) ---------- */
.phero {
  position: relative;
  padding-top: clamp(8rem, 14vw, 11rem);
  padding-bottom: clamp(3rem, 7vw, 5rem);
  overflow: hidden;
  isolation: isolate;
}
.phero::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -30%; left: 50%;
  width: min(1100px, 130vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 62%);
  opacity: .5;
  filter: blur(30px);
}
.phero__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
/* Seiten ohne Hero-Bild: zentrierter, einspaltiger Textblock */
.phero__grid--text-only {
  grid-template-columns: 1fr;
  max-width: 54rem;
  text-align: center;
}
.phero__grid--text-only .eyebrow::before { display: none; }
.phero__grid--text-only .lead { margin-inline: auto; }
.phero__grid--text-only .cta__actions { justify-content: center; }
.phero__visual {
  position: relative;
  border-radius: var(--radius-l);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: var(--bg-2);
}
.phero__visual img { width: 100%; }

/* ---------- Cards / grids ---------- */
.grid { display: grid; gap: clamp(1rem, 2vw, 1.4rem); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.6vw, 2rem);
  background: var(--surface);
  background-image: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--glass-edge);
  transition: transform .35s var(--ease), border-color .3s, background .3s, box-shadow .35s var(--ease);
  overflow: hidden;
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--line-2);
  background: var(--surface-2);
  box-shadow: var(--glass-edge), 0 26px 50px -28px rgba(0, 0, 0, .95);
}
.card h3 { margin-bottom: .6rem; }
.card p { color: var(--text-2); font-size: .95rem; }
.card p a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; }
.card p a:hover { color: var(--text); }
.card__icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 13px;
  background: var(--accent-soft);
  color: var(--accent-2);
  margin-bottom: 1.25rem;
}
.card__icon svg { width: 22px; height: 22px; }
.card--link { cursor: pointer; }
.card--link .card__more {
  margin-top: 1.35rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--accent-2);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  transition: gap .25s var(--ease);
}
.card--link:hover .card__more { gap: .68rem; }

/* Sanfter Akzentverlauf statt eigener Kachelfarbe - liegt in der CSS-Datei
   und nicht im style-Attribut, damit die Handy-Ansicht ihn abschalten kann. */
.card--accent { background-image: linear-gradient(160deg, rgba(59, 130, 246, .16), transparent 65%); }

.card--feature { padding: 0; }
.card--feature .card__body { padding: clamp(1.5rem, 2.6vw, 2rem); }
.card--feature figure { background: var(--bg-3); border-bottom: 1px solid var(--line); }

/* Bullet list */
.checks { display: grid; gap: .85rem; }
.checks li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: .8rem;
  align-items: start;
  color: var(--text-2);
  font-size: .97rem;
}
.checks svg { width: 22px; height: 22px; color: var(--accent); margin-top: .18rem; }
.checks b { color: var(--text); font-weight: 600; }

/* Steps */
.steps { counter-reset: s; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden; }
.steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.step { counter-increment: s; padding: clamp(1.5rem, 2.6vw, 2rem); background: var(--bg-2); transition: background .3s; }
.step:hover { background: var(--bg-3); }
.step::before {
  content: counter(s, decimal-leading-zero);
  display: block;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--accent);
  margin-bottom: .9rem;
}
.step h3 { font-size: 1.08rem; margin-bottom: .5rem; }
.step p { font-size: .92rem; color: var(--text-3); }

/* ---------- Maskottchen (Sprite-Lauf ueber die Ablauf-Sektion) ----------
   Sprite-Sheet: assets/img/mascot-walk-18.webp - 18 Frames nebeneinander,
   je 252x258 px (Motiv 248x254 aus dem Originalraster, plus 2 px
   transparenter Rand gegen Farbbluten beim Skalieren).
   Reihenfolge im Streifen:
     0        Stand im Profil
     1 - 5    Kopf dreht sich zum Betrachter (5 = Blick nach vorn)
     6 - 17   zwoelf Laufbilder
   Ablauf, Bildwechsel und Reise steuert main.js per requestAnimationFrame,
   weil die Folge Laufen -> Stehen -> Blick -> Laufen mit CSS-Keyframes
   nicht abbildbar ist.
   .mascot liegt NICHT in .steps (dort wuerde overflow:hidden abschneiden),
   sondern als Overlay-Geschwister in der Sektion. Die Oberkante von
   .steps--4 wird per JS gemessen und als --mascot-top gesetzt. */
.section--mascot { --mh: clamp(89px, calc(6.2vw + 65px), 158px); --mw: calc(var(--mh) * .97674); }
.section--mascot .section-head { margin-bottom: calc(var(--mh) + clamp(.75rem, 1.6vw, 1.25rem)); }

.mascot {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  height: var(--mh);
  top: calc(var(--mascot-top, 0px) - var(--mh));
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}
.mascot.is-ready { display: block; }
.mascot__runner { position: absolute; inset: 0; }
.mascot__sprite {
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--mw);
  height: var(--mh);
  transform: translateX(-100%);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: calc(var(--mw) * 18) 100%;
}
.mascot.is-walking .mascot__runner { will-change: transform; }
/* Ohne Bewegung: ruhendes Standbild, Blick zum Betrachter (Frame 5 von 17) */
.mascot.is-static .mascot__runner { transform: translate3d(calc(6% + var(--mw)), 0, 0); }
.mascot.is-static .mascot__sprite { background-position-x: 29.41176%; }

/* ---------- Maskottchen auf dem Knopf „Projekt anfragen“ ----------
   Sprite-Sheet: assets/img/mascot-sleep-24.webp - 24 Frames nebeneinander,
   je 204x140 px (Motiv 200x136 plus 2 px transparenter Rand).
   Frame 0 = schlafend, 8-23 = Aufwachen. Der Luchs liegt auf der
   Oberkante des Knopfes: seine Liegelinie sitzt bei 83 % der Sprite-Hoehe,
   deshalb ragt das Feld um 17 % der Hoehe in den Knopf hinein.
   .sleeper-slot haelt oberhalb des Knopfes genau so viel Platz frei,
   dass der Luchs nie in den darueberliegenden Text ragt.

   Die Groesse haengt bewusst NICHT vom Ansichtsfenster ab: der Knopf
   „Projekt anfragen“ ist von 320 bis 1920 px immer 193x61 px gross.
   Eine vw-Formel liess den Luchs auf dem Handy auf 70 px schrumpfen
   (36 % der Knopfbreite statt 57 % wie am Rechner) - er wirkte dort
   verloren. Feste 76 px halten das Verhaeltnis auf jedem Geraet gleich. */
.sleeper-slot { --sh: 76px; --sw: calc(var(--sh) * 1.45714); }
.sleeper-slot { padding-top: calc(var(--sh) * .83); }
.sleeper {
  position: absolute;
  left: 50%;
  bottom: calc(100% - var(--sh) * .17);
  width: var(--sw);
  height: var(--sh);
  margin-left: calc(var(--sw) / -2);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: calc(var(--sw) * 24) 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s var(--ease);
}
.sleeper.is-ready { opacity: 1; }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.stat {
  text-align: center;
  padding: 1.6rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  background-image: var(--glass);
  box-shadow: var(--glass-edge);
}
.stat b { display: block; font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.5rem); font-weight: 800; letter-spacing: -.04em; color: var(--text); line-height: 1.05; }
.stat span { font-size: .82rem; color: var(--text-3); }

/* Split section */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
/* Abschnitte ohne Bild: eine zentrierte Spalte, Liste zweispaltig */
.split--text-only {
  grid-template-columns: 1fr;
  max-width: 56rem;
  margin-inline: auto;
  text-align: center;
}
.split--text-only .eyebrow::before { display: none; }
.split--text-only .lead { margin-inline: auto; }
.split--text-only .checks {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .95rem clamp(1.5rem, 3vw, 2.5rem);
  max-width: 48rem;
  margin-inline: auto;
  text-align: left;
}
.split--rev .split__media { order: -1; }
.split__media {
  border-radius: var(--radius-l);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: var(--bg-3);
}

/* ---------- Logo-Block mit Stromfluss-Animation ----------
   Aufbau: ein einziges SVG wird dreifach verwendet - einmal als sichtbares
   Bild, zweimal als CSS-Maske fuer die Lichteffekte. Dadurch faellt nur ein
   Download an und die Effekte liegen exakt auf den Linien des Logos.
   Messwerte aus dem SVG: die Bildmarke (Leiterbahnen + Luchs) endet bei
   69,2 % der Hoehe, der Kopfmittelpunkt liegt bei 69 % / 37,5 %.
   Animiert werden ausschliesslich transform und opacity - reine
   Compositor-Arbeit, daher ruckelfrei auch auf schwachen Geraeten.

   Bewusst KEINE Kachel: kein Rahmen, kein Hintergrund, kein Schatten. Wie
   die Videos steht das Logo frei auf der Seitenhintergrundfarbe. Der
   Lichtschein dahinter laeuft vollstaendig nach transparent aus und
   erzeugt daher keine sichtbare Kante. */
.logo-stage {
  display: grid;
  place-items: center;
  position: relative;
  isolation: isolate;
}
.logo-stage::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 46%;
  width: 116%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side,
    rgba(59, 130, 246, .13) 0%,
    rgba(59, 130, 246, .05) 46%,
    rgba(59, 130, 246, 0) 72%);
  pointer-events: none;
}
.logofx {
  position: relative;
  width: min(100%, 25rem);
  aspect-ratio: 2001 / 2168;
}
.logofx__art {
  display: block;
  width: 100%;
  height: auto;
}
.logofx__wire,
.logofx__core {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 69.2%;
  pointer-events: none;
  -webkit-mask-image: url('../img/logo-webelux.svg?v=a70181cf');
          mask-image: url('../img/logo-webelux.svg?v=a70181cf');
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: 0 0;
          mask-position: 0 0;
  -webkit-mask-size: 100% 144.51%;
          mask-size: 100% 144.51%;
}
/* Wanderndes Lichtband: laeuft von links durch die Leiterbahnen zum Luchs */
.logofx__wire { overflow: hidden; }
.logofx__wire > i {
  position: absolute;
  top: -25%;
  bottom: -25%;
  left: 0;
  width: 46%;
  opacity: 0;
  transform: translate3d(-110%, 0, 0);
  background: linear-gradient(100deg,
    rgba(96, 165, 250, 0) 0%,
    rgba(96, 165, 250, .5) 32%,
    rgba(224, 242, 255, 1) 52%,
    rgba(96, 165, 250, .5) 72%,
    rgba(96, 165, 250, 0) 100%);
}
/* Aufleuchten des Luchskopfes, nur auf den Linien des Logos */
.logofx__core {
  opacity: 0;
  background: radial-gradient(36% 30% at 69% 54.2%,
    rgba(233, 245, 255, .95) 0%,
    rgba(137, 196, 255, .55) 46%,
    rgba(59, 130, 246, 0) 78%);
}
/* Weicher Lichthof um den Kopf */
.logofx__halo {
  position: absolute;
  left: 69%;
  top: 37.5%;
  width: 46%;
  aspect-ratio: 1;
  margin: -23% 0 0 -23%;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: scale(.72);
  mix-blend-mode: screen;
  background: radial-gradient(circle,
    rgba(160, 205, 255, .5) 0%,
    rgba(96, 165, 250, .26) 38%,
    rgba(59, 130, 246, 0) 70%);
}

/* Ruhezustand vor dem Start: das Logo wirkt "unbestromt" */
.logofx.is-armed .logofx__art { opacity: .5; }

.logofx.is-on .logofx__art {
  animation: logo-wake 2.2s cubic-bezier(.4, 0, .2, 1) both;
}
.logofx.is-on .logofx__wire > i {
  animation: logo-flow 1.25s linear .15s both;
  will-change: transform, opacity;
}
.logofx.is-on .logofx__core {
  animation: logo-core 1.3s linear .72s both;
  will-change: opacity;
}
.logofx.is-on .logofx__halo {
  animation: logo-halo 1.4s linear .7s both;
  will-change: transform, opacity;
}

@keyframes logo-flow {
  0%   { transform: translate3d(-110%, 0, 0); opacity: 0; }
  10%  { opacity: 1; }
  86%  { opacity: 1; }
  100% { transform: translate3d(230%, 0, 0); opacity: 0; }
}
@keyframes logo-wake {
  0%, 25%   { opacity: .5; }
  55%, 100% { opacity: 1; }
}
@keyframes logo-core {
  0%   { opacity: 0; }
  14%  { opacity: 1; }
  32%  { opacity: .5; }
  100% { opacity: 0; }
}
@keyframes logo-halo {
  0%   { opacity: 0;   transform: scale(.72); }
  16%  { opacity: 1;   transform: scale(1); }
  36%  { opacity: .45; transform: scale(1.06); }
  100% { opacity: 0;   transform: scale(1.14); }
}

/* Accordion / FAQ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.4rem 0;
  font-size: 1.03rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  transition: color .2s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-2); }
.faq summary::after {
  content: '';
  flex-shrink: 0;
  width: 11px; height: 11px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq p { padding-bottom: 1.5rem; color: var(--text-2); max-width: 72ch; font-size: .97rem; }

/* Price cards */
.price { display: flex; flex-direction: column; }
.price__tag { font-size: .82rem; color: var(--text-3); margin-bottom: .35rem; }
.price__amount { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem); font-weight: 800; letter-spacing: -.04em; margin-bottom: 1.2rem; }
.price__amount small { font-size: .95rem; font-weight: 500; color: var(--text-3); letter-spacing: 0; }
.price .btn { margin-top: auto; }
.price ul { margin-bottom: 1.6rem; }

.badge {
  display: inline-block;
  padding: .28rem .7rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent-2);
  background: var(--accent-soft);
  border-radius: 999px;
}

/* Einzugsgebiet: Ortsliste als ruhige Marken, nach Naehe gruppiert */
.places__title {
  margin: 1.6rem 0 .7rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.places {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.places li {
  padding: .3rem .68rem;
  font-size: .82rem;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
}

/* ---------- CTA band ---------- */
.cta {
  position: relative;
  padding: clamp(3rem, 6vw, 4.75rem) clamp(1.5rem, 4vw, 3.5rem);
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(59, 130, 246, .22) 0%, transparent 58%),
    linear-gradient(160deg, var(--bg-3), var(--bg-2));
  overflow: hidden;
  text-align: center;
}
.cta h2 { margin-bottom: 1rem; }
.cta p { margin-inline: auto; margin-bottom: 2rem; }
.cta__actions { display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center; }

/* ---------- Form ---------- */
.form { display: grid; gap: 1.1rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field { display: grid; gap: .5rem; }
.field label { font-size: .86rem; font-weight: 600; color: var(--text-2); }
.field input, .field textarea, .field select {
  width: 100%;
  padding: .82rem 1rem;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  color: var(--text);
  font-size: .96rem;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.field textarea { min-height: 148px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-3); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255, 255, 255, .06);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field select { appearance: none; cursor: pointer; background-image: none; }
.field select option { background: var(--bg-2); color: var(--text); }
.consent { display: grid; grid-template-columns: 20px 1fr; gap: .75rem; align-items: start; font-size: .86rem; color: var(--text-3); }
.consent input { width: 18px; height: 18px; margin-top: .18rem; accent-color: var(--accent); }
.consent a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; }

.contact-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.contact-list { display: grid; gap: 1.5rem; }
.contact-item { display: grid; grid-template-columns: 44px 1fr; gap: 1rem; align-items: start; }
.contact-item .card__icon { width: 44px; height: 44px; margin: 0; }
.contact-item b { display: block; font-size: .95rem; margin-bottom: .15rem; }
.contact-item span, .contact-item a { color: var(--text-2); font-size: .93rem; }
.contact-item a:hover { color: var(--accent-2); }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); background: var(--bg-2); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: clamp(2rem, 4vw, 3rem); margin-bottom: 3rem; }
.footer__brand p { color: var(--text-3); font-size: .92rem; margin-top: 1.1rem; max-width: 34ch; }
/* Anschrift in der Fusszeile: einheitliche Angabe auf allen Seiten,
   wichtiges Signal fuer die lokale Google-Suche. */
.footer__nap {
  font-style: normal;
  color: var(--text-2);
  font-size: .92rem;
  line-height: 1.75;
  margin-top: 1.1rem;
}
.footer__nap strong { color: var(--text); font-weight: 600; }
.footer__brand .footer__area {
  color: var(--text-3);
  font-size: .84rem;
  line-height: 1.7;
  margin-top: .9rem;
  max-width: 42ch;
}
.footer h4 { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 1.1rem; font-weight: 600; }
.footer li + li { margin-top: .65rem; }
.footer a { color: var(--text-2); font-size: .93rem; transition: color .2s; }
.footer a:hover { color: var(--accent-2); }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.75rem;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  font-size: .85rem;
  color: var(--text-3);
}
.footer__bottom nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }

/* ---------- Video-Showcase ---------- */
/* Bewusst ohne Rahmen, Hintergrund oder Schatten: Die Videos zeigen ein
   freigestelltes Objekt auf nahezu schwarzem Grund.

   mix-blend-mode: lighten laesst diesen Grund vollstaendig verschwinden:
   pro Farbkanal gewinnt der hellere Wert. Der Videogrund (#060a0f) ist in
   jedem Kanal dunkler oder gleich dem Seitenhintergrund (#070a10), also
   bleibt exakt der Seitenhintergrund stehen - samt Lichtschein darueber.
   Das Objekt selbst ist ueberall heller und bleibt unveraendert.
   Ohne das blieb ein sichtbares Rechteck stehen, weil der eingebackene
   Videogrund nie pixelgenau zur Seitenfarbe passen kann (Videokompression
   rundet Farbwerte). Die Farbraum-Angaben in den Dateien (BT.709, tv)
   sorgen zusaetzlich dafuer, dass jedes Geraet gleich dekodiert.

   Der Wechsel Standbild -> Video passiert INNERHALB dieses Elements, damit
   nicht beide gleichzeitig durchscheinen. */
.videoblock {
  position: relative;
  aspect-ratio: 3 / 2;
  width: 100%;
  max-width: var(--vb-w, 54rem);
  margin-inline: auto;
  isolation: isolate;
  mix-blend-mode: lighten;
}
.videoblock > picture,
.videoblock > picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.videoblock video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity .8s var(--ease);
}
.videoblock.is-playing video { opacity: 1; }
/* Wenn der Browser Autostart verweigert (z. B. iOS Stromsparmodus) */
.videoblock.is-blocked::before,
.hero__media.is-blocked::before {
  content: '';
  position: absolute;
  z-index: 2;
  left: 50%; top: 50%;
  width: 64px; height: 64px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(255, 255, 255, .12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/26px no-repeat;
  border: 1px solid rgba(255, 255, 255, .25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
}

.videoblock--wide { grid-column: 1 / -1; }
.video-caption {
  margin-top: 1rem;
  font-size: .87rem;
  color: var(--text-3);
  text-align: center;
}

/* ---------- Reveal animation ---------- */
/* Nur wenn JS aktiv ist ausblenden - ohne JS bleibt alles sichtbar. */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  will-change: opacity, transform;
}
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal[data-d='1'] { transition-delay: .07s; }
.js .reveal[data-d='2'] { transition-delay: .14s; }
.js .reveal[data-d='3'] { transition-delay: .21s; }
.js .reveal[data-d='4'] { transition-delay: .28s; }

/* ---------- Utilities ---------- */
.center { text-align: center; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 1.75rem; }
.mt-3 { margin-top: 2.5rem; }
.mb-0 { margin-bottom: 0; }
.muted { color: var(--text-3); }
.small { font-size: .87rem; }
.glow-bg { position: relative; isolation: isolate; overflow: hidden; }
.glow-bg::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 8%; left: 50%;
  width: min(900px, 120vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(59, 130, 246, .17) 0%, transparent 62%);
  filter: blur(40px);
  pointer-events: none;
}

.prose h2 { margin-top: 2.75rem; margin-bottom: .9rem; font-size: clamp(1.3rem, 1.1rem + .9vw, 1.65rem); }
.prose h3 { margin-top: 1.9rem; margin-bottom: .6rem; font-size: 1.06rem; }
.prose p, .prose li { color: var(--text-2); font-size: .96rem; }
.prose p + p { margin-top: .9rem; }
.prose ul { margin-top: .8rem; display: grid; gap: .5rem; }
.prose li { padding-left: 1.1rem; position: relative; }
.prose li::before { content: '–'; position: absolute; left: 0; color: var(--accent); }
.prose a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; }
.prose > :first-child { margin-top: 0; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }

  /* Zwischen 960 und 1080 px muessen 6 Links plus zwei Knoepfe in die
     Kopfleiste passen - dort wird enger geschnuert statt umgebrochen. */
  .header__inner { gap: .75rem; }
  .nav__link { padding-inline: .5rem; font-size: .88rem; }
  .nav__link[aria-current='page']::after { left: .5rem; right: .5rem; }
  .header__cta { margin-left: .25rem; padding-inline: .95rem; }
  .header__wa { margin-left: .3rem; width: 38px; height: 38px; }
  .header__wa svg { width: 19px; height: 19px; }

  /* Leistungs-Reihe zweispaltig: Trenner nur dort, wo sie Sinn ergeben */
  .hero__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 40rem; }
  .svclink { padding: 1.15rem 1.4rem; }
  .svclink:nth-child(odd) { padding-left: 0; }
  .svclink:nth-child(even) { padding-right: 0; }
  .svclink:nth-child(odd)::before { content: none; }
  .svclink:nth-child(-n+2) { padding-top: 0; }
  .svclink:nth-child(n+3)::after {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 1px;
    background: var(--line);
  }
}

@media (max-width: 960px) {
  html { scroll-padding-top: 88px; }
  .header__inner { min-height: 76px; }
  .burger { display: flex; }
  .header__cta { display: none; }
  .brand__mark { width: 48px; }
  .brand__name { font-size: 1.2rem; }

  .nav {
    position: fixed;
    inset: 76px 0 auto 0;
    margin: 0;
    padding: 1rem var(--gutter) 1.75rem;
    background: rgba(7, 10, 16, .97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
    max-height: calc(100svh - 76px);
    overflow-y: auto;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav__list { flex-direction: column; align-items: stretch; gap: .15rem; }
  .nav__link { padding: .85rem .75rem; font-size: 1rem; border-radius: var(--radius-s); }
  .nav__link[aria-current='page']::after { display: none; }
  .nav__link[aria-current='page'] { background: var(--accent-soft); color: var(--accent-2); }
  .nav__cta { display: block; margin-top: .85rem; }
  .nav__cta .btn { width: 100%; }
  .nav__cta--wa { margin-top: .5rem; }
  .header__wa { display: none; }

  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split, .phero__grid { grid-template-columns: 1fr; }
  .split--rev .split__media { order: 0; }
  .contact-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero { min-height: auto; padding-top: 7.5rem; }
}

@media (max-width: 720px) {
  /* Leistungen einspaltig: kompakte Zeilen mit waagerechten Trennlinien */
  .hero__actions { grid-template-columns: 1fr; max-width: 30rem; }
  .hero__actions .svclink {
    flex-direction: row;
    align-items: center;
    gap: .95rem;
    padding: .95rem 0;
  }
  .svclink::before { content: none; }
  .svclink:nth-child(n+2)::after {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 1px;
    background: var(--line);
  }
  .hero__actions .svclink:first-child { padding-top: 0; }
  .svclink__desc { display: none; }
  .svclink__icon svg { width: 22px; height: 22px; }

  /* „Mehr erfahren" rechts in der Zeile. Es liegt innerhalb desselben
     <a>, ist also mit angetippt - kein zweites Ziel, das den Finger
     teilt. Der Titel schiebt es per margin-left:auto nach rechts,
     statt selbst zu wachsen; sonst zoege die Unterstreichung aus
     .svclink__title::after ueber die ganze Zeilenbreite. */
  .hero__actions .svclink__title { margin-right: auto; }
  .hero__actions .svclink__more {
    display: inline-flex;
    align-items: center;
    gap: .34rem;
    flex: 0 0 auto;
    font-size: .84rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--accent-2);
    white-space: nowrap;
  }
  .hero__actions .svclink__more::after {
    content: '';
    width: 6px;
    height: 6px;
    border-top: 1.7px solid currentColor;
    border-right: 1.7px solid currentColor;
    transform: rotate(45deg);
    transition: transform .3s var(--ease);
  }
  .hero__actions .svclink:active .svclink__more::after { transform: rotate(45deg) translate(2px, -2px); }

  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }

  /* Leistungen auf dem Handy: zwei je Reihe, ohne Kacheloptik.
     Statt fuenf hohen Karten untereinander (2000 px Scrollweg) ein
     kompaktes Raster aus Symbol und Bezeichnung - auf einen Blick
     erfassbar. Das Symbol traegt hier die Bedeutung, deshalb ist es
     groesser als am Rechner; die Beschreibungstexte stehen weiterhin
     im Quelltext und auf der jeweiligen Leistungsseite. */
  .svcgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--line);
  }
  .svcgrid .card {
    padding: 1.4rem .7rem 1.3rem;
    align-items: center;
    text-align: center;
    background: none;
    background-image: none;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
  }
  .svcgrid .card:nth-child(odd) { border-right: 1px solid var(--line); }
  .svcgrid .card:hover,
  .svcgrid .card:active {
    transform: none;
    background: none;
    box-shadow: none;
    border-color: var(--line);
  }
  .svcgrid .card__icon {
    width: 56px; height: 56px;
    border-radius: 17px;
    margin-bottom: .85rem;
  }
  .svcgrid .card__icon svg { width: 28px; height: 28px; }
  .svcgrid .card h3 { margin: 0; font-size: 1rem; line-height: 1.25; }
  .svcgrid .card p,
  .svcgrid .card__more { display: none; }
  .split--text-only .checks { grid-template-columns: 1fr; }
  /* Einzugsgebiet auf kleinen Displays kompakter, damit die Liste
     trotz der vielen Orte auf einen Blick erfassbar bleibt */
  .places { gap: .38rem; }
  .places li { padding: .26rem .58rem; font-size: .76rem; }
  .places__title { margin: 1.3rem 0 .55rem; }
  .steps--4 { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }

  /* Fusszeile kompakt: die drei Linkspalten stehen nebeneinander statt
     als ein langer Stapel. „Leistungen“ hat fuenf Eintraege und laeuft
     deshalb ueber beide Zeilen, rechts daneben „Unternehmen“ und
     darunter „Direkt“ - kein leeres Feld, kein unnoetiger Scrollweg.
     Aufbau damit so nah wie moeglich an der Rechner-Ansicht. */
  .footer { padding-block: 2.8rem 1.5rem; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 1.9rem 1.2rem; margin-bottom: 1.9rem; }
  .footer__col--svc { grid-column: 1; grid-row: 2 / span 2; }
  .footer__col--co { grid-column: 2; grid-row: 2; }
  .footer__col--dir { grid-column: 2; grid-row: 3; }
  .footer__brand p { margin-top: .85rem; }
  .footer__nap { margin-top: .9rem; line-height: 1.65; }
  .footer__brand .footer__area { margin-top: .75rem; line-height: 1.6; }
  .footer h4 { margin-bottom: .75rem; }
  .footer li + li { margin-top: .5rem; }
  .footer__bottom { padding-top: 1.4rem; }

  .scroll-hint { display: none; }
  .cta__actions .btn { width: 100%; }

  /* Der Knopf, auf dem der Luchs liegt, behaelt seine Inhaltsbreite -
     auf den Leistungsseiten waere er sonst bildschirmbreit und der
     Luchs sichtlich verloren. So ist das Groessenverhaeltnis von
     Luchs zu Knopf auf jeder Seite und jedem Geraet dasselbe. */
  .sleeper-slot .btn { width: auto; }
}

@media (max-width: 460px) {
  .stats { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .brand__sub { display: none; }
}

/* ---------- Motion / contrast preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }

  /* Maskottchen: kein Lauf, stattdessen ein ruhendes Standbild */
  .mascot__runner {
    animation: none !important;
    transform: translate3d(calc(6% + var(--mw)), 0, 0) !important;
  }
  .mascot__sprite { animation: none !important; background-position-x: 29.41176% !important; }
  /* Luchs auf dem Knopf bleibt liegen und schlaeft */
  .sleeper { background-position-x: 0 !important; }
}

/* ==========================================================================
   Performance auf Handy und Tablet
   backdrop-filter ueber laufendem Video kostet auf mobilen GPUs sehr viel
   Rechenzeit und laesst das Video ruckeln. Deshalb dort deckende Flaechen.
   ========================================================================== */
@media (max-width: 1024px) {
  .tile,
  .hero__badge,
  .btn--ghost,
  .videoblock.is-blocked::before,
  .hero__media.is-blocked::before {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .tile { background: rgba(20, 27, 38, .92); }
  .hero__badge { background: rgba(20, 27, 38, .92); }
  .btn--ghost { background: rgba(20, 27, 38, .55); }

  /* Blur-Flaechen im Hintergrund sind auf Mobilgeraeten teuer */
  .glow-bg::before,
  .phero::before { filter: none; }
}

/* Video niemals Scrollen blockieren lassen */
.hero__media video,
.videoblock video { pointer-events: none; }

/* Offenes Menue: Hintergrund nicht mitscrollen */
body.nav-open { overflow: hidden; }

@media print {
  .header, .footer, .hero__media, .scroll-hint, .btn, .videoblock { display: none !important; }
  body { background: #fff; color: #000; }
}