/* ==========================================================================
   link-ed.it – Website
   Klar, ruhig, viel Weißraum. Navy trägt die Marke, Cyan setzt Akzente.
   ========================================================================== */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --white: #ffffff;
  --mist: #f3f5f8;
  --mist-2: #e8edf2;
  --navy: #003866;
  --navy-deep: #002a4e;
  --cyan: #009fe3;
  --cyan-soft: #7fd0f3;
  --link: #0070b0;
  --text: #22303e;
  --muted: #5d6b79;
  --faint: #737f8c;
  --cyan-text: #0284c7;
  --line: #dce3ea;
  --danger: #b42318;
  --success: #067647;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --gutter: clamp(20px, 4vw, 40px);
  --max: 1200px;
  --narrow: 720px;
  --header-h: 64px;

  --r-lg: 28px;
  --r-md: 20px;
  --r-sm: 12px;

  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ------------------------------------------------------------------ Basis */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
address { font-style: normal; }
strong, b { font-weight: 600; }

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

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 8px; left: 8px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--navy);
  color: var(--white);
  font-size: .9375rem;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.icon { width: 1.25em; height: 1.25em; flex: none; }
.icon--xs { width: 14px; height: 14px; }

/* ------------------------------------------------------------------ Typografie */

.h1, .h2, .h3, .h4, .display {
  color: var(--navy);
  font-weight: 700;
  text-wrap: balance;
}

.h1 {
  font-size: clamp(2.5rem, 6.2vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: -.035em;
}
.page-hero .h1 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }

.h2 {
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -.03em;
}

.h3 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  font-weight: 650;
}

.h4 {
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: -.012em;
  font-weight: 650;
}

.lead {
  color: var(--muted);
  font-size: clamp(1.1875rem, 1.7vw, 1.4375rem);
  line-height: 1.42;
  letter-spacing: -.01em;
  text-wrap: pretty;
}

.text-link {
  color: var(--link);
  font-weight: 500;
  white-space: nowrap;
}
.text-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.muted { color: var(--muted); }

/* ------------------------------------------------------------------ Layout */

.container {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(var(--narrow) + 2 * var(--gutter)); }
.container--wide { max-width: calc(1400px + 2 * var(--gutter)); }

.section { padding-block: clamp(80px, 11vw, 150px); }
.section--tight { padding-block: clamp(56px, 7vw, 96px); }
.section--mist { background: var(--mist); }
.section--navy { background: var(--navy); color: rgba(255, 255, 255, .78); }
.section--navy .h2, .section--navy .h3, .section--navy .h4 { color: var(--white); }
.section--navy .lead { color: rgba(255, 255, 255, .72); }
/* Zwei weiße Abschnitte hintereinander teilen sich den Abstand */
.section:not(.section--mist):not(.section--navy) + .section:not(.section--mist):not(.section--navy) { padding-top: 0; }

.section-head {
  display: grid;
  gap: 20px;
  max-width: 820px;
  margin-bottom: clamp(40px, 6vw, 72px);
}
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--split {
  max-width: none;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: 24px 64px;
}
.section-head--split .lead { max-width: 30em; }

@media (max-width: 860px) {
  .section-head--split { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ Buttons */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--navy);
  color: var(--white);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.button:hover { background: var(--navy-deep); }
.button .icon { width: 18px; height: 18px; }

.button--secondary {
  background: transparent;
  border-color: var(--line);
  color: var(--navy);
}
.button--secondary:hover { background: var(--mist); border-color: var(--mist-2); }

.button--light { background: var(--white); color: var(--navy); }
.button--light:hover { background: var(--mist-2); }

.button--small { min-height: 36px; padding: 7px 16px; font-size: .9375rem; }

/* ------------------------------------------------------------------ Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
}

.site-header__bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 32px;
  height: var(--header-h);
  padding-inline: var(--gutter);
  max-width: calc(1400px + 2 * var(--gutter));
  margin-inline: auto;
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: var(--header-h);
  z-index: 1;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
.site-header.is-scrolled::before { border-bottom-color: rgba(0, 40, 80, .08); }
.site-header.is-open::before { background: var(--white); }

.brand { flex: none; display: block; }
.brand img { height: 42px; width: auto; }
.brand picture { display: block; }

.primary-nav { flex: 1; }
.primary-nav__list { display: flex; align-items: center; gap: 4px; }
.primary-nav__item { position: relative; display: flex; align-items: center; }

.primary-nav__link {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding-inline: 12px;
  border-radius: 999px;
  color: var(--text);
  font-size: .9375rem;
  font-weight: 450;
  letter-spacing: -.005em;
  transition: color .2s, background-color .2s;
}
.primary-nav__link:hover { color: var(--navy); background: var(--mist); }
.primary-nav__link[aria-current="page"] { color: var(--navy); font-weight: 600; }
.primary-nav__link--quiet { color: var(--muted); }

.flyout-toggle {
  display: inline-grid;
  place-items: center;
  width: 24px; height: 24px;
  margin-left: -8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.flyout-toggle .icon { transition: transform .25s var(--ease); }
.has-flyout.is-open .flyout-toggle .icon { transform: rotate(180deg); }

.site-header__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* Flyout „Leistungen“ */
.flyout {
  position: fixed;
  top: var(--header-h);
  left: 0; right: 0;
  z-index: 1;
  background: rgba(255, 255, 255, .97);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0, 40, 80, .08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .2s, transform .3s var(--ease), visibility 0s .3s;
}
.has-flyout.is-open .flyout {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .2s, transform .3s var(--ease), visibility 0s;
}

.flyout__inner {
  max-width: calc(1400px + 2 * var(--gutter));
  margin-inline: auto;
  padding: 28px var(--gutter) 40px;
}

.flyout__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px 16px;
}

.flyout__link {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  transition: background-color .15s;
}
.flyout__link:hover { background: var(--mist); }
.flyout__link strong { color: var(--navy); font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; }
.flyout__link span { color: var(--muted); font-size: .875rem; line-height: 1.4; }
.flyout__link--all strong { color: var(--link); }

.flyout-backdrop {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 0;
  background: rgba(0, 25, 50, .18);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s, visibility 0s .25s;
}
.site-header.has-flyout-open .flyout-backdrop {
  opacity: 1;
  visibility: visible;
  transition: opacity .25s, visibility 0s;
}

/* Mobile-Menü */
.menu-toggle {
  display: none;
  position: relative;
  width: 44px; height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.menu-toggle__bars,
.menu-toggle__bars::before {
  position: absolute;
  left: 13px;
  width: 18px; height: 1.5px;
  border-radius: 2px;
  background: var(--navy);
  transition: transform .3s var(--ease), top .3s var(--ease);
}
.menu-toggle__bars { top: 18px; }
.menu-toggle__bars::before { content: ""; left: 0; top: 7px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars { top: 21.5px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { top: 0; transform: rotate(-90deg); }

.mobile-menu {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--white);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu__inner { padding: 12px var(--gutter) 48px; }

.mobile-menu__main a {
  display: block;
  padding: 10px 0;
  color: var(--navy);
  font-size: 1.75rem;
  font-weight: 650;
  letter-spacing: -.025em;
}
.mobile-menu__sub {
  display: grid;
  gap: 2px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.mobile-menu__sub a { display: block; padding: 7px 0; color: var(--muted); font-size: 1.0625rem; }
.mobile-menu__contact { display: grid; gap: 10px; margin-top: 32px; }

.site-header.is-open .mobile-menu__main li,
.site-header.is-open .mobile-menu__sub,
.site-header.is-open .mobile-menu__contact {
  animation: menu-in .45s var(--ease) both;
}
.site-header.is-open .mobile-menu__main li:nth-child(2) { animation-delay: .03s; }
.site-header.is-open .mobile-menu__main li:nth-child(3) { animation-delay: .06s; }
.site-header.is-open .mobile-menu__main li:nth-child(4) { animation-delay: .09s; }
.site-header.is-open .mobile-menu__main li:nth-child(5) { animation-delay: .12s; }
.site-header.is-open .mobile-menu__sub { animation-delay: .15s; }
.site-header.is-open .mobile-menu__contact { animation-delay: .18s; }

@keyframes menu-in {
  from { opacity: 0; transform: translateY(-6px); }
}

@media (max-width: 960px) {
  .primary-nav,
  .primary-nav__link--quiet { display: none; }
  .menu-toggle { display: block; }
  .brand img { height: 38px; }
}
@media (min-width: 961px) {
  .mobile-menu { display: none !important; }
}
@media (max-width: 1180px) {
  .flyout__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------ Hero (Startseite) */

.hero {
  padding-top: clamp(40px, 6vw, 84px);
  text-align: center;
  overflow: hidden;
}

.hero__title {
  color: var(--navy);
  font-size: clamp(3.25rem, 10vw, 8rem);
  font-weight: 750;
  line-height: .96;
  letter-spacing: -.05em;
  text-wrap: balance;
}

.hero__lead {
  max-width: 34em;
  font-weight: 400;
  margin: clamp(20px, 2.5vw, 32px) auto 0;
  color: var(--muted);
  font-size: clamp(1.1875rem, 1.9vw, 1.5rem);
  line-height: 1.4;
  letter-spacing: -.012em;
  text-wrap: balance;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}

.hero__media {
  max-width: 1200px;
  margin: clamp(20px, 3vw, 36px) auto 0;
  padding-inline: var(--gutter);
}
.hero__media img { width: 100%; }

/* Weiche Ränder für freigestellte Fotos auf Weiß (Personen reichen bis an den Bildrand) */
.fade-edges img {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(to bottom, #000 74%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(to bottom, #000 74%, transparent 100%);
  mask-composite: intersect;
}
.page-media.fade-edges { border-radius: 0; }
.page-media.fade-edges img { aspect-ratio: 1435 / 1020; object-fit: contain; }

@media (max-width: 700px) {
  .hero__media { padding-inline: 0; overflow: hidden; }
  .hero__media img { width: 120%; max-width: none; margin-left: -10%; }
  .hero__actions .button { flex: 1 1 100%; }
}

/* Ein einziger, abgestimmter Auftritt beim Laden */
@media (prefers-reduced-motion: no-preference) {
  .hero__title, .hero__lead, .hero__actions {
    animation: rise .7s var(--ease) both;
  }
  .hero__lead { animation-delay: .06s; }
  .hero__actions { animation-delay: .12s; }
  .hero__media img {
    animation: hero-photo 1s var(--ease) .1s both;
  }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
}
@keyframes hero-photo {
  from { opacity: 0; transform: translateY(40px) scale(1.03); }
}

/* ------------------------------------------------------------------ Statement */

.statement-section { padding-block: clamp(80px, 10vw, 140px); }

.statement {
  max-width: 22em;
  color: var(--faint);
  font-size: clamp(1.875rem, 4.2vw, 3.25rem);
  font-weight: 650;
  line-height: 1.12;
  letter-spacing: -.03em;
  text-wrap: pretty;
}
.statement__strong { color: var(--navy); }

.statement__body {
  max-width: 34em;
  margin-top: clamp(32px, 4vw, 56px);
  margin-left: auto;
  color: var(--muted);
  font-size: 1.125rem;
}

/* ------------------------------------------------------------------ Bento (Leistungen) */

.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 340px;
  padding: clamp(28px, 3vw, 40px);
  border-radius: var(--r-lg);
  background: var(--mist);
  overflow: hidden;
  transition: background-color .25s;
}
.tile:hover { background: var(--mist-2); }
.tile--w4 { grid-column: span 4; }
.tile--w5 { grid-column: span 5; }
.tile--w7 { grid-column: span 7; }
.tile--w12 { grid-column: span 12; min-height: 0; }

.tile--wide { flex-direction: row; align-items: center; gap: 32px; }
.tile--wide .tile__text { flex: 1 1 50%; }
.tile__chips {
  display: flex;
  flex: 1 1 40%;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding-right: 56px;
}
.tile__chips li {
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--navy);
  font-size: .9375rem;
  font-weight: 500;
}

.tile__text { display: grid; gap: 10px; max-width: 30em; }
.tile__title {
  color: var(--navy);
  font-size: clamp(1.5rem, 2.2vw, 1.875rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.025em;
}
.tile p { color: var(--muted); }
.tile__more {
  position: absolute;
  right: 22px; bottom: 22px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  transition: transform .4s var(--ease), background-color .25s;
}
.tile__more .icon { width: 18px; height: 18px; stroke-width: 2; }
.tile:hover .tile__more { transform: translateX(3px); }
.tile { padding-bottom: clamp(72px, 7vw, 88px); }
.tile--photo { padding-bottom: 0; }
.tile--compact { padding-bottom: clamp(28px, 3vw, 40px); }
.tile--compact .tile__more {
  position: static;
  width: auto; height: auto;
  margin-top: 12px;
  border-radius: 0;
  background: none;
  color: var(--link);
  font-weight: 500;
}
.tile--compact:hover .tile__more { transform: none; text-decoration: underline; text-underline-offset: 3px; }

.tile--navy { background: var(--navy); }
.tile--navy:hover { background: var(--navy-deep); }
.tile--navy .tile__title { color: var(--white); font-size: clamp(1.875rem, 3.2vw, 2.75rem); }
.tile--navy p { color: rgba(255, 255, 255, .75); font-size: 1.1875rem; line-height: 1.45; }
.tile--navy .tile__more { background: var(--white); color: var(--navy); }

.tile__levels {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-right: 56px;
}
.tile__levels li {
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  color: var(--white);
  font-size: .9375rem;
  font-weight: 500;
}
.tile__levels li:last-child { border-color: var(--cyan); color: var(--cyan-soft); }

.tile--photo { padding: 0; gap: 0; }
.tile--photo .tile__text { padding: clamp(28px, 3vw, 40px) clamp(28px, 3vw, 40px) 24px; }
.tile__media { flex: 1; min-height: 180px; margin-top: auto; }
.tile__media picture, .tile__media img { width: 100%; height: 100%; }
.tile__media img { object-fit: cover; }

.tile--photo-side { flex-direction: row; }
.tile--photo-side .tile__text { flex: 1 1 50%; align-content: start; padding-bottom: clamp(28px, 3vw, 40px); }
.tile--photo-side .tile__media { flex: 1 1 50%; margin: 0; }

.tile--badge .tile__badge {
  position: absolute;
  left: clamp(28px, 3vw, 40px); bottom: 22px;
  width: 56px; height: 56px;
}

@media (max-width: 1024px) {
  .tile--w4 { grid-column: span 6; }
  .tile--w4:last-of-type { grid-column: span 12; }
  .tile--w5, .tile--w7 { grid-column: span 12; }
  .tile--wide { flex-direction: column; align-items: stretch; }
  .tile__chips { justify-content: flex-start; }
  .tile--photo .tile__media { max-height: 360px; }
}
@media (max-width: 680px) {
  .tile, .tile--w4 { grid-column: span 12; min-height: 0; }
  .tile--photo-side { flex-direction: column; }
  .tile--photo-side .tile__text { padding-bottom: 24px; }
  .tile__media { min-height: 220px; }
  .tile--badge .tile__badge { width: 48px; height: 48px; }
}

/* ------------------------------------------------------------------ Support-Stufen */

.levels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 32px;
  counter-reset: level;
}

.levels__item {
  position: relative;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, .18);
}
/* Die Linie zeigt, wie tief eine Anfrage eskaliert: 1/3, 2/3, ganz */
.levels__item::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 33.33%;
  height: 3px;
  border-radius: 2px;
  background: var(--cyan);
}
.levels__item:nth-child(2)::before { width: 66.66%; }
.levels__item:nth-child(3)::before { width: 100%; }

.levels__title {
  margin-bottom: 12px;
  color: var(--white);
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.035em;
}
.levels__item p { max-width: 24em; font-size: 1.0625rem; }

.levels__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  margin-top: clamp(48px, 6vw, 80px);
  padding: 24px 28px 24px 32px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .07);
}
.levels__footer p { color: var(--white); font-size: 1.1875rem; font-weight: 500; letter-spacing: -.01em; }

@media (max-width: 760px) {
  .levels { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ Versprechen */

.promises {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px clamp(40px, 7vw, 120px);
  align-items: start;
}
.promises__head { position: sticky; top: calc(var(--header-h) + 40px); display: grid; gap: 20px; }

.promises__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 56px) clamp(24px, 4vw, 48px);
}
.promise { display: grid; gap: 8px; align-content: start; }
.promise p { color: var(--muted); }

@media (max-width: 900px) {
  .promises { grid-template-columns: 1fr; }
  .promises__head { position: static; }
}
@media (max-width: 560px) {
  .promises__grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ Team */

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 40px) 16px;
}

.person picture { margin-bottom: 16px; }
.person__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-md);
  background: var(--white);
}
.person__name {
  color: var(--navy);
  font-size: 1.1875rem;
  font-weight: 650;
  letter-spacing: -.015em;
}
.person__role { margin-top: 2px; color: var(--muted); font-size: .9375rem; line-height: 1.4; }

@media (max-width: 960px) {
  .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .person__name { font-size: 1.0625rem; }
  .person__role { font-size: .875rem; }
}

/* ------------------------------------------------------------------ Kontakt-CTA */

.contact-cta { text-align: center; }
.contact-cta__inner { display: grid; justify-items: center; gap: 20px; max-width: 860px; }
.contact-cta .lead { max-width: 32em; }

.contact-cta__phone {
  margin-top: 12px;
  color: var(--navy);
  font-size: clamp(2.25rem, 5.5vw, 4rem);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.contact-cta__phone:hover { color: var(--link); }
.contact-cta__meta { color: var(--muted); font-size: .9375rem; }
.contact-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 16px; }

/* ------------------------------------------------------------------ Footer */

.site-footer {
  padding: 64px 0 32px;
  background: var(--mist);
  color: var(--muted);
  font-size: .875rem;
  line-height: 1.5;
}

.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
}
.brand--footer img { height: 52px; }
.site-footer__claim { color: var(--navy); font-size: 1.375rem; font-weight: 650; letter-spacing: -.02em; }

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  padding: 40px 0;
}
.site-footer__heading {
  margin: 0 0 12px;
  color: var(--text);
  font-size: .875rem;
  font-weight: 600;
}
.site-footer__heading:not(:first-child) { margin-top: 28px; }
.site-footer__list { display: grid; gap: 8px; }
.site-footer__list a:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.site-footer__address + .site-footer__address { margin-top: 12px; }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: .8125rem;
}
.site-footer__legal { display: flex; gap: 20px; }
.site-footer__legal a:hover { color: var(--navy); }
.site-footer__social { display: flex; gap: 6px; margin-left: auto; }
.site-footer__social a {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  color: var(--muted);
  transition: background-color .2s, color .2s;
}
.site-footer__social a:hover { background: var(--white); color: var(--navy); }
.site-footer__social .icon { width: 20px; height: 20px; }

@media (max-width: 860px) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .site-footer__grid { gap: 28px 16px; }
}

/* ------------------------------------------------------------------ Unterseiten: Kopf */

.page-hero {
  padding-top: clamp(64px, 9vw, 128px);
  padding-bottom: clamp(48px, 6vw, 88px);
  text-align: center;
}
.page-hero__inner { display: grid; justify-items: center; gap: 24px; max-width: 900px; }
.page-hero .lead { max-width: 34em; text-wrap: balance; }
.page-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
.page-hero__badge { width: 88px; height: 88px; }
.page-hero--left { text-align: left; }
.page-hero--left .page-hero__inner { justify-items: start; margin-inline: 0; }

.page-media {
  border-radius: var(--r-lg);
  overflow: hidden;
}
.page-media img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }
.page-media--tall img { aspect-ratio: 16 / 10; }


/* ------------------------------------------------------------------ Bausteine für Unterseiten */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.split--top { align-items: start; }
.split__text { display: grid; gap: 20px; align-content: start; }
.split__text p { color: var(--muted); }
.split__media { border-radius: var(--r-lg); overflow: hidden; }
.split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.split--reverse .split__media { order: -1; }
.split__media--portrait { max-width: 440px; background: var(--white); }
.split__media--portrait img { aspect-ratio: 4 / 5; object-position: 50% 0; }

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 56px) clamp(24px, 3vw, 40px);
}
.feature-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feature { display: grid; gap: 10px; align-content: start; padding-top: 20px; border-top: 1px solid var(--line); }
.feature p { color: var(--muted); }
.section--navy .feature { border-top-color: rgba(255, 255, 255, .18); }
.section--navy .feature p { color: rgba(255, 255, 255, .72); }
.section--navy .text-link { color: var(--cyan-soft); }

/* ------------------------------------------------------------------ Softwareentwicklung: Grafiken */

.feature__icon {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  margin-bottom: 6px;
  border-radius: 12px;
  background: var(--white);
  box-shadow: 0 0 0 1px var(--line);
  color: var(--navy);
}
.feature__icon .icon { width: 22px; height: 22px; }
.section--navy .feature__icon { background: rgba(255, 255, 255, .08); box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); color: var(--cyan-soft); }

.window-dots { display: inline-flex; gap: 6px; }
.window-dots i { width: 10px; height: 10px; border-radius: 50%; background: #dfe4ea; }

/* App-Mockup */
.app-stage {
  position: relative;
  padding: clamp(28px, 6vw, 80px) clamp(16px, 6vw, 80px) 0;
  border-radius: var(--r-lg);
  background: radial-gradient(110% 80% at 50% 0%, #def2fb 0%, var(--mist) 60%);
  overflow: hidden;
}
.app-mock {
  max-width: 980px;
  margin: 0 auto;
  border-radius: 16px 16px 0 0;
  background: var(--white);
  box-shadow: 0 40px 90px -40px rgba(0, 56, 102, .45), 0 0 0 1px rgba(0, 56, 102, .08);
  color: var(--text);
  font-size: 13px;
  line-height: 1.4;
  overflow: hidden;
}
.app-mock__bar {
  display: flex;
  align-items: center;
  height: 42px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: #fafbfc;
}
.app-mock__url {
  min-width: 40%;
  margin: 0 auto;
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--mist);
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  transform: translateX(-21px);
}
.app-mock__body { display: grid; grid-template-columns: 184px minmax(0, 1fr); }
.app-mock__side {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 18px 12px;
  border-right: 1px solid var(--line);
}
.app-mock__logo {
  width: 28px; height: 28px;
  margin: 0 0 16px 10px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--navy), var(--cyan));
}
.app-mock__side span:not(.app-mock__logo) {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--muted);
  font-weight: 500;
}
.app-mock__side .icon { width: 16px; height: 16px; }
.app-mock__side .is-active { background: var(--mist); color: var(--navy) !important; }
.app-mock__main { display: grid; gap: 16px; padding: 22px 24px 32px; }
.app-mock__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.app-mock small { display: block; color: var(--muted); font-size: 12px; }
.app-mock__head strong { color: var(--navy); font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.app-mock__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  background: #e7f6ee;
  color: var(--success);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.app-mock__pill i, .app-mock__feed i {
  flex: none;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.app-mock__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.app-mock__kpi, .app-mock__panel { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; }
.app-mock__kpi strong {
  display: block;
  margin: 4px 0 2px;
  color: var(--navy);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.app-mock__kpi em { color: var(--success); font-size: 12px; font-style: normal; font-weight: 500; }
.app-mock__panels { display: grid; grid-template-columns: 1.35fr 1fr; gap: 12px; }
.app-mock__chart { display: flex; align-items: flex-end; gap: 6px; height: 128px; margin-top: 14px; }
.app-mock__chart span {
  flex: 1;
  height: var(--h);
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(to top, var(--navy), #2a6fa3);
  transform-origin: bottom;
}
.app-mock__chart span:last-child { background: linear-gradient(to top, #0284c7, var(--cyan)); }
.app-mock__feed small { margin-bottom: 6px; }
.app-mock__feed span { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 12.5px; }
.app-mock__feed span:first-of-type { border-top: 0; }
.app-mock__feed i { color: var(--success); }
.app-mock__feed i.is-running { color: var(--cyan); }
.app-mock__feed em { margin-left: auto; color: var(--faint); font-size: 12px; font-style: normal; white-space: nowrap; }

.app-toast {
  position: absolute;
  right: clamp(16px, 7vw, 110px);
  bottom: clamp(20px, 4vw, 52px);
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 320px;
  padding: 14px 18px 14px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  box-shadow: 0 24px 50px -20px rgba(0, 56, 102, .45), 0 0 0 1px rgba(0, 56, 102, .07);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}
.app-toast strong { display: block; color: var(--navy); font-weight: 600; }
.app-toast__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--success);
  color: var(--white);
}
.app-toast__icon .icon { width: 18px; height: 18px; stroke-width: 2.2; }

@media (max-width: 760px) {
  .app-mock__body { grid-template-columns: 1fr; }
  .app-mock__side { display: none; }
  .app-mock__main { padding: 16px 14px 24px; }
  .app-mock__url { min-width: 0; flex: 1; margin-left: 14px; transform: none; }
  .app-mock__kpis { gap: 8px; }
  .app-mock__kpi { padding: 10px; }
  .app-mock__kpi strong { font-size: 18px; }
  .app-mock__kpi small, .app-mock__kpi em { font-size: 10.5px; }
  .app-mock__panels { grid-template-columns: 1fr; }
  .app-mock__feed { display: none; }
  .app-mock__pill { display: none; }
  .app-toast { left: 16px; right: 16px; max-width: none; }
}

/* Schnittstellen-Grafik */
.integration {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 230px) minmax(0, 1fr);
  align-items: center;
  gap: 0 clamp(40px, 9vw, 130px);
  max-width: 1040px;
  margin: 0 auto;
}
.integration__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.integration__line, .integration__flow { fill: none; vector-effect: non-scaling-stroke; }
.integration__line { stroke: var(--line); stroke-width: 1.5; }
.integration__flow { stroke: var(--cyan); stroke-width: 2.5; stroke-linecap: round; opacity: 0; }
.integration__col { position: relative; display: grid; gap: clamp(20px, 3vw, 36px); }
.integration__node {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 2px 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 12px 30px -20px rgba(0, 56, 102, .35);
}
.integration__node > span {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--mist);
  color: var(--navy);
}
.integration__node .icon { width: 20px; height: 20px; }
.integration__node strong { color: var(--navy); font-weight: 600; line-height: 1.2; }
.integration__node small { color: var(--muted); font-size: .8125rem; line-height: 1.2; }
.integration__hub {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  aspect-ratio: 1;
  padding: 24px;
  border-radius: 36px;
  background: var(--navy);
  box-shadow: 0 36px 70px -30px rgba(0, 56, 102, .7);
  color: rgba(255, 255, 255, .6);
  text-align: center;
}
.integration__hub-icon {
  display: grid;
  place-items: center;
  width: 60px; height: 60px;
  margin-bottom: 10px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .1);
  color: var(--cyan-soft);
}
.integration__hub-icon .icon { width: 30px; height: 30px; }
.integration__hub strong { color: var(--white); font-size: 1.1875rem; font-weight: 700; letter-spacing: -.01em; }
.integration__hub small { font-size: .875rem; }
.integration__pulse { position: absolute; inset: 0; border: 2px solid var(--cyan); border-radius: inherit; opacity: 0; }

@media (max-width: 760px) {
  .integration { grid-template-columns: 1fr 1fr; gap: 12px; }
  .integration__lines { display: none; }
  .integration__hub { order: -1; grid-column: 1 / -1; width: 200px; margin: 0 auto 16px; }
  .integration__col { display: contents; }
  .integration__node { grid-template-columns: 1fr; padding: 14px; }
  .integration__node > span { grid-row: auto; width: 36px; height: 36px; margin-bottom: 8px; }
}

/* Code-Karte */
.code-card {
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-md);
  background: var(--navy-deep);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .55);
  overflow: hidden;
}
.code-card__bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .5);
  font: 500 12px/1 var(--mono);
}
.code-card .window-dots i { background: rgba(255, 255, 255, .18); }
.code-card__code {
  padding: clamp(20px, 3vw, 32px);
  color: rgba(255, 255, 255, .9);
  font: 500 clamp(.8125rem, 1.4vw, .9375rem)/1.8 var(--mono);
  overflow-x: auto;
}
.code-card__line { display: block; min-height: 1.8em; white-space: pre; }
.code-card__line:last-child::after {
  content: "";
  display: inline-block;
  width: .55em; height: 1.15em;
  margin-left: 3px;
  background: var(--cyan-soft);
  vertical-align: -.2em;
}
.code-card__c { color: rgba(255, 255, 255, .45); }
.code-card__k { color: var(--cyan-soft); }
.code-card__s { color: #b8e6c9; }

/* Reihenfolge und Höhen (statt Inline-Styles, damit die CSP ohne 'unsafe-inline' auskommt) */
.app-mock__chart .h-38 { --h: 38%; } .app-mock__chart .h-52 { --h: 52%; } .app-mock__chart .h-45 { --h: 45%; } .app-mock__chart .h-61 { --h: 61%; } .app-mock__chart .h-57 { --h: 57%; } .app-mock__chart .h-70 { --h: 70%; } .app-mock__chart .h-66 { --h: 66%; } .app-mock__chart .h-78 { --h: 78%; } .app-mock__chart .h-74 { --h: 74%; } .app-mock__chart .h-85 { --h: 85%; } .app-mock__chart .h-81 { --h: 81%; } .app-mock__chart .h-94 { --h: 94%; }
.app-mock__chart span:nth-child(1) { --i: 0; } .app-mock__chart span:nth-child(2) { --i: 1; } .app-mock__chart span:nth-child(3) { --i: 2; } .app-mock__chart span:nth-child(4) { --i: 3; } .app-mock__chart span:nth-child(5) { --i: 4; } .app-mock__chart span:nth-child(6) { --i: 5; } .app-mock__chart span:nth-child(7) { --i: 6; } .app-mock__chart span:nth-child(8) { --i: 7; } .app-mock__chart span:nth-child(9) { --i: 8; } .app-mock__chart span:nth-child(10) { --i: 9; } .app-mock__chart span:nth-child(11) { --i: 10; } .app-mock__chart span:nth-child(12) { --i: 11; }
.app-mock__feed span:nth-of-type(1) { --i: 0; } .app-mock__feed span:nth-of-type(2) { --i: 1; } .app-mock__feed span:nth-of-type(3) { --i: 2; } .app-mock__feed span:nth-of-type(4) { --i: 3; }
.integration__flow:nth-of-type(1) { --i: 0; } .integration__flow:nth-of-type(2) { --i: 1; } .integration__flow:nth-of-type(3) { --i: 2; } .integration__flow:nth-of-type(4) { --i: 3; } .integration__flow:nth-of-type(5) { --i: 4; } .integration__flow:nth-of-type(6) { --i: 5; }
.code-card__line:nth-child(1) { --i: 0; } .code-card__line:nth-child(2) { --i: 1; } .code-card__line:nth-child(3) { --i: 2; } .code-card__line:nth-child(4) { --i: 3; } .code-card__line:nth-child(5) { --i: 4; } .code-card__line:nth-child(6) { --i: 5; } .code-card__line:nth-child(7) { --i: 6; } .code-card__line:nth-child(8) { --i: 7; } .code-card__line:nth-child(9) { --i: 8; } .code-card__line:nth-child(10) { --i: 9; }

/* Bewegung: startet, sobald die Grafik sichtbar wird (data-live → .is-live) */
@media (prefers-reduced-motion: no-preference) {
  .app-mock { transition: opacity .9s var(--ease), transform 1.2s var(--ease); }
  .app-mock__chart span { transition: transform 1s var(--ease) calc(.35s + var(--i) * 55ms); }
  .app-mock__feed span { transition: opacity .6s var(--ease) calc(.9s + var(--i) * 140ms), transform .6s var(--ease) calc(.9s + var(--i) * 140ms); }
  .app-toast { transition: opacity .7s var(--ease) 1.8s, transform .9s var(--ease) 1.8s; }
  .live-ready .app-stage:not(.is-live) .app-mock { opacity: 0; transform: translateY(48px); }
  .live-ready .app-stage:not(.is-live) .app-mock__chart span { transform: scaleY(0); }
  .live-ready .app-stage:not(.is-live) .app-mock__feed span { opacity: 0; transform: translateY(6px); }
  .live-ready .app-stage:not(.is-live) .app-toast { opacity: 0; transform: translateY(20px) scale(.96); }

  .app-mock__pill i, .app-mock__feed i.is-running { animation: live-dot 1.8s ease-in-out infinite; }

  .integration__node, .integration__hub { transition: opacity .7s var(--ease), transform .8s var(--ease); }
  .integration__col:first-of-type .integration__node:nth-child(2), .integration__col:last-of-type .integration__node:nth-child(2) { transition-delay: .1s; }
  .integration__col .integration__node:nth-child(3) { transition-delay: .2s; }
  .live-ready .integration:not(.is-live) .integration__node { opacity: 0; transform: translateY(14px); }
  .live-ready .integration:not(.is-live) .integration__hub { opacity: 0; transform: scale(.92); }
  .integration__line { transition: opacity 1s ease .4s; }
  .live-ready .integration:not(.is-live) .integration__line { opacity: 0; }
  .integration.is-live .integration__flow {
    opacity: 1;
    stroke-dasharray: 6 94;
    animation: data-flow 2.8s linear calc(1s + var(--i) * .45s) infinite both;
  }
  .integration.is-live .integration__flow:nth-of-type(even) { animation-direction: reverse; }
  .integration.is-live .integration__pulse { animation: hub-pulse 2.8s ease-out 1s infinite; }

  .code-card__line { transition: opacity .35s ease calc(.25s + var(--i) * 110ms), transform .45s var(--ease) calc(.25s + var(--i) * 110ms); }
  .live-ready .code-card:not(.is-live) .code-card__line { opacity: 0; transform: translateX(-8px); }
  .code-card__line:last-child::after { animation: caret 1.1s steps(1) infinite; }
}
@keyframes live-dot { 50% { opacity: .35; } }
@keyframes data-flow { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes hub-pulse { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(1.28); } }
@keyframes caret { 50% { opacity: 0; } }

@media (max-width: 900px) {
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .feature-grid, .feature-grid--2 { grid-template-columns: 1fr; }
}

.checklist { display: grid; gap: 14px; }
.checklist li { display: flex; gap: 14px; align-items: flex-start; }
.checklist .icon { width: 22px; height: 22px; margin-top: 1px; color: var(--cyan); stroke-width: 2; }
.checklist--columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 40px; }
@media (max-width: 700px) { .checklist--columns { grid-template-columns: 1fr; } }

/* Nummerierte Abläufe – nur für echte Reihenfolgen */
.steps { display: grid; gap: 0; counter-reset: step; }
.step {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 8px 32px;
  padding: 36px 0;
  border-top: 1px solid var(--line);
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step::before {
  counter-increment: step;
  content: counter(step);
  grid-row: span 2;
  color: var(--cyan-text);
  font-size: 3.5rem;
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.step p { max-width: 40em; color: var(--muted); }
@media (max-width: 640px) {
  .step { grid-template-columns: 56px minmax(0, 1fr); gap: 6px 16px; padding: 28px 0; }
  .step::before { font-size: 2.5rem; }
}

/* Vergleich Cloud / lokal */
.compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.compare__col {
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--r-lg);
  background: var(--mist);
}
.compare__col--good { background: var(--navy); color: rgba(255, 255, 255, .8); }
.compare__col--good .h3 { color: var(--white); }
.compare__col .h3 { margin-bottom: 24px; }
.compare__list { display: grid; gap: 14px; }
.compare__list li { display: flex; gap: 12px; }
.compare__list .icon { width: 22px; height: 22px; margin-top: 1px; stroke-width: 2; }
.compare__col--good .icon { color: var(--cyan-soft); }
.compare__col:not(.compare__col--good) .icon { color: var(--faint); }
@media (max-width: 760px) { .compare { grid-template-columns: 1fr; } }

/* Logos von Herstellern und Partnern */
.logo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px 56px;
}
.logo-row img { height: 44px; width: auto; max-width: 180px; object-fit: contain; }
.logo-row--tall img { height: 64px; }

/* Ansprechpartner */
.contact-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 24px 32px;
  align-items: center;
  padding: clamp(24px, 3vw, 40px);
  border-radius: var(--r-lg);
  background: var(--mist);
}
.contact-card__photo { width: 128px; height: 128px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; background: var(--white); }
.contact-card__body { display: grid; gap: 6px; }
.contact-card__name { color: var(--navy); font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }
.contact-card__role { color: var(--muted); }
.contact-card__links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 10px; }
.contact-card__links a { display: inline-flex; align-items: center; gap: 8px; color: var(--link); font-weight: 500; }
.contact-card__links a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 560px) {
  .contact-card { grid-template-columns: 1fr; }
  .contact-card__photo { width: 96px; height: 96px; }
}

/* Leistungsübersicht */
.service-list { display: grid; }
.service-row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) auto;
  gap: 12px 48px;
  align-items: center;
  padding: 32px 0;
  border-top: 1px solid var(--line);
}
.service-row:last-child { border-bottom: 1px solid var(--line); }
.service-row__title {
  color: var(--navy);
  font-size: clamp(1.625rem, 3vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.1;
}
.service-row p { color: var(--muted); }
.service-row .icon { width: 28px; height: 28px; color: var(--faint); transition: transform .25s var(--ease), color .2s; }
.service-row:hover .icon { color: var(--navy); transform: translateX(4px); }
.service-row:hover .service-row__title { color: var(--navy-deep); }
@media (max-width: 760px) {
  .service-row { grid-template-columns: minmax(0, 1fr) auto; }
  .service-row p { grid-column: 1; grid-row: 2; }
  .service-row .icon { grid-row: 1 / span 2; grid-column: 2; }
}

/* Aufklappbare Abschnitte */
.disclosure {
  border-top: 1px solid var(--line);
}
.disclosure:last-of-type { border-bottom: 1px solid var(--line); }
.disclosure summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  color: var(--navy);
  font-size: 1.25rem;
  font-weight: 650;
  letter-spacing: -.015em;
  cursor: pointer;
  list-style: none;
}
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure summary .icon { width: 22px; height: 22px; color: var(--muted); transition: transform .3s var(--ease); }
.disclosure[open] summary .icon { transform: rotate(180deg); }
.disclosure__body { display: grid; gap: 20px; padding: 0 0 32px; color: var(--muted); }
.disclosure__body ul { display: grid; gap: 10px; padding-left: 1.2em; }

/* Zitate aus dem Team */
.voices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.voice {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  background: var(--mist);
  overflow: hidden;
}
.voice img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; object-position: 50% 15%; background: var(--white); }
.voice__body { display: grid; gap: 16px; padding: 28px; }
.voice blockquote { color: var(--text); font-size: 1.125rem; line-height: 1.5; letter-spacing: -.01em; }
.voice figcaption { color: var(--muted); font-size: .9375rem; }
.voice figcaption strong { display: block; color: var(--navy); font-size: 1rem; }
.voices--two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; margin-inline: auto; }
@media (max-width: 900px) { .voices { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }

/* Kacheln für Fernwartung etc. */
.action-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.action {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(28px, 3vw, 40px);
  border-radius: var(--r-lg);
  background: var(--mist);
}
.action--primary { background: var(--navy); color: rgba(255, 255, 255, .78); }
.action--primary .h3 { color: var(--white); }
.action__icon {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--white);
  color: var(--navy);
}
.action--primary .action__icon { background: rgba(255, 255, 255, .12); color: var(--white); }
.action__icon .icon { width: 26px; height: 26px; }
.action p { color: inherit; }
.action:not(.action--primary) p { color: var(--muted); }
.action .button { margin-top: auto; align-self: flex-start; }
.action__spacer { flex: 1; }
@media (max-width: 900px) { .action-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ Kontakt */

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.contact-aside { display: grid; gap: 32px; }
.contact-aside__block { display: grid; gap: 6px; }
.contact-aside__block h2 { color: var(--text); font-size: .9375rem; font-weight: 600; }
.contact-aside__block p, .contact-aside__block address { color: var(--muted); }
.contact-aside__big { color: var(--navy) !important; font-size: 1.625rem; font-weight: 700; letter-spacing: -.025em; }
.contact-aside__big:hover { color: var(--link) !important; }
.contact-aside a:not(.contact-aside__big) { color: var(--link); }
.contact-aside a:not(.contact-aside__big):hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ Formulare */

.form { display: grid; gap: 20px; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 600px) { .form__row { grid-template-columns: 1fr; } }

.field { display: grid; gap: 8px; }
.field label { color: var(--text); font-size: .9375rem; font-weight: 550; }
.field label .optional { color: var(--muted); font-weight: 400; }

.input {
  width: 100%;
  min-height: 52px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  color: var(--text);
  font-size: 1.0625rem;
  transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none;
  appearance: none;
}
.input:hover { border-color: #c5d0db; }
.input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(0, 159, 227, .18); }
textarea.input { min-height: 180px; resize: vertical; line-height: 1.5; }
select.input {
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d6b79' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
}
.input[aria-invalid="true"] { border-color: var(--danger); }
.field__error { color: var(--danger); font-size: .875rem; }

.form__hint { color: var(--muted); font-size: .875rem; }
.form__hint a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }

.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.notice {
  display: flex;
  gap: 14px;
  padding: 20px 24px;
  border-radius: var(--r-md);
  background: var(--mist);
}
.notice--success { background: #e7f6ee; color: #0b4a2c; }
.notice--error { background: #fdecea; color: #7a1c13; }
.notice .icon { width: 24px; height: 24px; margin-top: 1px; }
.notice strong { display: block; margin-bottom: 2px; }

/* ------------------------------------------------------------------ Fließtext (Recht, Blog) */

.prose {
  color: var(--text);
  font-size: 1.0625rem;
  line-height: 1.65;
}
.prose > * + * { margin-top: 1.1em; }
.prose h2 {
  margin-top: 2.2em;
  color: var(--navy);
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
}
.prose h3 {
  margin-top: 1.8em;
  color: var(--navy);
  font-size: 1.25rem;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -.012em;
}
.prose h2 + *, .prose h3 + * { margin-top: .6em; }
.prose a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.prose a:hover { text-decoration-thickness: 2px; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .4em; }
.prose li::marker { color: var(--faint); }
.prose code {
  padding: .12em .38em;
  border-radius: 6px;
  background: var(--mist);
  font-family: var(--mono);
  font-size: .88em;
}
.prose hr, .b-divider {
  height: 1px;
  margin-block: 3em;
  border: 0;
  background: var(--line);
}

/* Blog-Blöcke */
.article-body { font-size: 1.1875rem; line-height: 1.62; }
.article-body p, .article-body li { letter-spacing: -.003em; }

.b-image, .b-gallery { margin-block: 2.4em; }
.b-image img { width: 100%; border-radius: var(--r-md); }
.b-image--wide { margin-inline: calc(-1 * min(140px, (100vw - var(--narrow)) / 2 - var(--gutter))); }
.b-image--full {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.b-image--full img { border-radius: 0; max-height: 80vh; object-fit: cover; }
.b-image figcaption, .b-gallery figcaption {
  margin-top: 12px;
  color: var(--muted);
  font-size: .9375rem;
  line-height: 1.45;
  text-align: center;
}
.b-image--full figcaption { padding-inline: var(--gutter); }

.b-gallery__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.b-gallery[data-count="3"] .b-gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.b-gallery[data-count="4"] .b-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.b-gallery__item { display: block; border-radius: var(--r-sm); overflow: hidden; background: var(--mist); }
.b-gallery__item img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: opacity .2s; }
.b-gallery__item:hover img { opacity: .9; }

.b-quote {
  margin-block: 2.2em;
  padding-left: 28px;
  border-left: 3px solid var(--cyan);
}
.b-quote p {
  color: var(--navy);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.018em;
}
.b-quote footer { margin-top: 12px; color: var(--muted); font-size: 1rem; }

.b-callout {
  padding: 22px 26px;
  border-radius: var(--r-md);
  background: var(--mist);
}
.b-callout p { font-size: 1.0625rem; }

.b-code {
  overflow-x: auto;
  padding: 22px 24px;
  border-radius: var(--r-md);
  background: #0c2238;
  color: #e3edf7;
  font-family: var(--mono);
  font-size: .9rem;
  line-height: 1.6;
  tab-size: 4;
}
.b-code code { padding: 0; background: none; font-size: inherit; }

.b-button { margin-block: 2em; }
.prose .b-button a { color: var(--white); text-decoration: none; }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 18, 36, .92);
  cursor: zoom-out;
  animation: fade .2s ease both;
}
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; }
@keyframes fade { from { opacity: 0; } }

/* ------------------------------------------------------------------ Blog */

.blog-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--mist);
  color: var(--text);
  font-size: .9375rem;
  font-weight: 500;
  transition: background-color .2s, color .2s;
}
.chip:hover { background: var(--mist-2); }
.chip[aria-current="page"] { background: var(--navy); color: var(--white); }

.post-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 48px) 24px;
}
.post-grid--blog { margin-top: clamp(40px, 5vw, 64px); }
.post-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 960px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .post-grid { grid-template-columns: 1fr; } }

.post-card__link { display: grid; gap: 18px; }
.post-card__media {
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--mist);
}
.post-card__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .6s var(--ease); }
.post-card__link:hover .post-card__media img { transform: scale(1.02); }
.post-card__placeholder { display: grid; place-items: center; aspect-ratio: 16 / 10; }
.post-card__placeholder img { width: 30%; aspect-ratio: auto; opacity: .35; filter: grayscale(1); transform: none !important; }
.post-card__body { display: grid; gap: 8px; }
.post-card__category { color: var(--link); font-size: .875rem; font-weight: 600; }
.post-card__title {
  color: var(--navy);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.post-card__link:hover .post-card__title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.post-card__excerpt { color: var(--muted); font-size: 1rem; line-height: 1.5; }
.post-card__meta { color: var(--muted); font-size: .875rem; }

.post-card--feature .post-card__link {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.post-card--feature .post-card__media { border-radius: var(--r-lg); }
.post-card--feature .post-card__title { font-size: clamp(1.75rem, 3.4vw, 2.75rem); letter-spacing: -.03em; line-height: 1.08; }
.post-card--feature .post-card__excerpt { font-size: 1.1875rem; }
@media (max-width: 760px) {
  .post-card--feature .post-card__link { grid-template-columns: 1fr; }
}

.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 64px; }

.empty-state {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 72px 24px;
  border-radius: var(--r-lg);
  background: var(--mist);
  text-align: center;
}
.empty-state p { max-width: 30em; color: var(--muted); }

/* Beitrag */
.article-header { padding-top: clamp(56px, 8vw, 112px); }
.article-header__inner { display: grid; gap: 20px; }
.article-header__category { color: var(--link); font-size: .9375rem; font-weight: 600; }
.article-header__category:hover { text-decoration: underline; text-underline-offset: 3px; }
.article-header .h1 { font-size: clamp(2.25rem, 5.4vw, 3.75rem); }
.article-header .lead { font-size: clamp(1.1875rem, 2vw, 1.375rem); }

.byline { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.byline img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--mist); }
.byline__mark {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--mist);
}
.byline__mark img { width: 30px; height: auto; border-radius: 0; background: none; }
.byline__name { color: var(--text); font-weight: 600; font-size: 1rem; }
.byline__meta { color: var(--muted); font-size: .9375rem; }

.article-cover { margin-top: clamp(40px, 5vw, 64px); }
.article-cover img { width: 100%; max-height: 720px; object-fit: cover; border-radius: var(--r-lg); }

.article-body { padding-block: clamp(48px, 6vw, 80px) clamp(64px, 8vw, 112px); }

.preview-bar {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  padding: 10px var(--gutter);
  background: #fff4d6;
  color: #6b4b00;
  font-size: .9375rem;
  text-align: center;
}
.preview-bar a { font-weight: 600; text-decoration: underline; }

/* ------------------------------------------------------------------ Fehlerseite */

.error-page { padding-block: clamp(96px, 14vw, 180px); text-align: center; }
.error-page .container { display: grid; justify-items: center; gap: 20px; }
.error-page__code { color: var(--link); font-size: 1rem; font-weight: 600; }

/* ------------------------------------------------------------------ Bewegung reduzieren */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------------ Ergänzungen */

.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.actions--center { justify-content: center; }

.button--ghost-light { background: transparent; border-color: rgba(255, 255, 255, .35); color: var(--white); }
.button--ghost-light:hover { background: rgba(255, 255, 255, .1); }

.bni-mark {
  display: grid;
  place-items: center;
  min-height: 220px;
  padding: 40px;
  border-radius: var(--r-lg);
  background: #cf2030;
}
.bni-mark img { width: min(260px, 70%); }

.related-list .service-row { padding: 22px 0; }
.related-list .service-row__title { font-size: clamp(1.25rem, 2vw, 1.5rem); }
.section--mist .service-row, .section--mist .disclosure { border-color: var(--mist-2); }
.related-list { margin-top: 24px; }

.logo-row__nuki { height: 72px !important; }

/* ------------------------------------------------------------------ SEO-Bausteine: FAQ, Breadcrumbs, Regionen, Fakten */

.faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px clamp(40px, 7vw, 120px); align-items: start; }
.faq__head { display: grid; gap: 20px; position: sticky; top: calc(var(--header-h) + 40px); }
.faq__list .disclosure summary { font-size: 1.125rem; }
.faq__list .disclosure__body p { max-width: 40em; }
.section--mist .faq__list .disclosure { border-color: var(--mist-2); }
@media (max-width: 900px) {
  .faq { grid-template-columns: 1fr; }
  .faq__head { position: static; }
}

.breadcrumbs { padding-bottom: 24px; margin-bottom: 32px; border-bottom: 1px solid var(--line); font-size: .8125rem; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.breadcrumbs li { display: inline-flex; align-items: center; gap: 6px; }
.breadcrumbs a { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.breadcrumbs a:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumbs img { width: 16px; height: 16px; border-radius: 4px; }
.breadcrumbs .icon { color: var(--faint); }
.breadcrumbs [aria-current] { color: var(--text); }
.site-footer__address a:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }

.region-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.region-links--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tile--compact { min-height: 0; gap: 8px; }
.tile--compact .tile__more { margin-top: 12px; }
.tile__text-small { color: var(--muted); font-size: .9375rem; }
.region-note { margin-top: 24px; color: var(--muted); }
@media (max-width: 760px) { .region-links, .region-links--three { grid-template-columns: 1fr; } }

.place-list { display: flex; flex-wrap: wrap; gap: 8px; }
.place-list li { padding: 6px 14px; border-radius: 999px; background: var(--mist); color: var(--text); font-size: .9375rem; font-weight: 500; }

.office-card { display: grid; gap: 10px; padding: clamp(28px, 3vw, 40px); border-radius: var(--r-lg); background: var(--mist); }
.office-card address, .office-card > p { color: var(--muted); }
.office-card__links { display: grid; gap: 8px; margin-top: 8px; }
.office-card__links a { display: inline-flex; align-items: center; gap: 10px; color: var(--link); font-weight: 500; }
.office-card__links a:hover { text-decoration: underline; text-underline-offset: 3px; }

.facts {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 32px 0;
  border-block: 1px solid var(--line);
}
.facts dt { color: var(--muted); font-size: .875rem; }
.facts dd { margin: 4px 0 0; color: var(--navy); font-size: 1.25rem; font-weight: 650; letter-spacing: -.015em; }
@media (max-width: 900px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ------------------------------------------------------------------ Startseite: Kennzahlen */

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin: clamp(56px, 7vw, 96px) 0 0;
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--line);
}
.stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 8px; }
.stat dd {
  margin: 0;
  color: var(--navy);
  font-size: clamp(2.5rem, 5.5vw, 4.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
}
.stat dt { color: var(--muted); font-size: 1rem; }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; } }

/* ------------------------------------------------------------------ Startseite: Problem-Finder */

.finder { max-width: 1080px; margin: 0 auto; }
.finder__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: clamp(28px, 4vw, 44px);
}
.finder__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px 10px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--text);
  font: inherit;
  font-size: .9375rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s, transform .2s var(--ease);
}
.finder__chip .icon { width: 18px; height: 18px; color: var(--cyan-text); transition: color .2s; }
.finder__chip:hover { border-color: #b9c6d3; transform: translateY(-1px); }
.finder__chip:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.finder__chip[aria-selected="true"] { border-color: var(--navy); background: var(--navy); color: var(--white); }
.finder__chip[aria-selected="true"] .icon { color: var(--cyan-soft); }

.finder__panels { display: grid; gap: 16px; }
.finder__panel {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: 0 30px 80px -45px rgba(0, 56, 102, .4), 0 0 0 1px rgba(0, 56, 102, .05);
  overflow: hidden;
}
.finder__panel[hidden] { display: none; }
.finder__visual {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  min-height: 340px;
  padding: clamp(28px, 4vw, 48px);
  background:
    radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1.5px) 0 0 / 22px 22px,
    radial-gradient(120% 100% at 0% 0%, #0b5c99 0%, var(--navy) 55%, var(--navy-deep) 100%);
  color: var(--white);
}
.finder__icon {
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .1);
  color: var(--cyan-soft);
}
.finder__icon .icon { width: 32px; height: 32px; }
.finder__quote {
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.finder__body { display: grid; gap: 16px; align-content: center; padding: clamp(28px, 4vw, 48px); }
.finder__service { color: var(--cyan-text); font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.finder__body > p:not(.finder__service) { color: var(--muted); }
.finder__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }

@media (max-width: 760px) {
  .finder__chips {
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin-inline: calc(var(--gutter) * -1);
    padding: 4px var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .finder__chips::-webkit-scrollbar { display: none; }
  .finder__chip { scroll-snap-align: center; }
  .finder__panel { grid-template-columns: 1fr; }
  .finder__visual { flex-direction: row; align-items: center; gap: 18px; min-height: 0; }
  .finder__icon { flex: none; width: 52px; height: 52px; border-radius: 15px; }
  .finder__icon .icon { width: 26px; height: 26px; }
  .finder__quote { font-size: 1.25rem; }
  .finder__actions .button { flex: 1 1 100%; }
}

/* Lichtschein auf den Leistungs-Kacheln (Position kommt aus site.js) */
@media (hover: hover) {
  .bento .tile:hover { background-image: radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), rgba(0, 159, 227, .13), transparent 62%); }
  .bento .tile--navy:hover { background-image: radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), rgba(127, 208, 243, .18), transparent 62%); }
}

.hero__media img { transform-origin: 50% 100%; }

@media (prefers-reduced-motion: no-preference) {
  .finder.is-ready .finder__panel.is-active { animation: finder-in .55s var(--ease) both; }
  .finder.is-ready .finder__panel.is-active .finder__icon { animation: finder-pop .6s var(--ease) .1s both; }
}
@keyframes finder-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes finder-pop { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   Bewegung
   Alles hier greift nur, wenn „Bewegung reduzieren“ aus ist. Ohne JavaScript
   bleibt jeder Inhalt sichtbar – versteckt wird erst, wenn site.js läuft.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* Inhalte gleiten beim Scrollen herein (gesteuert von site.js) */
  .reveal-ready .reveal:not(.is-visible) { opacity: 0; }
  .reveal-ready .reveal.is-visible {
    animation: reveal-in .9s var(--ease) var(--d, 0ms) both;
  }

  /* Support-Stufen: die Linie wächst bis zur Eskalationstiefe */
  .reveal-ready .levels__item.reveal:not(.is-visible)::before { transform: scaleX(0); }
  .levels__item::before { transform-origin: left center; }
  .reveal-ready .levels__item.is-visible::before {
    animation: bar-grow 1.2s var(--ease) calc(var(--d, 0ms) + 250ms) both;
  }

  /* Unterseiten: Kopfbereich baut sich beim Laden auf */
  .page-hero__inner > * { animation: rise .9s var(--ease) both; }
  .page-hero__inner > :nth-child(2) { animation-delay: .07s; }
  .page-hero__inner > :nth-child(3) { animation-delay: .14s; }
  .page-hero__inner > :nth-child(4) { animation-delay: .21s; }

  /* Fotos reagieren dezent auf den Mauszeiger */
  .tile__media img,
  .person__photo,
  .split__media img,
  .voice img { transition: transform 1s var(--ease); }
  .tile:hover .tile__media img { transform: scale(1.04); }
  @media (max-width: 760px) { .team-grid.is-filtered .person:not(.is-dimmed) { order: -1; } }
.person picture { display: block; overflow: hidden; border-radius: var(--r-md); }
  .person:hover .person__photo { transform: scale(1.03); }

  .button { transition: background-color .2s, color .2s, border-color .2s, transform .15s var(--ease); }
  .button:active { transform: scale(.97); }

  /* Startseite: Text tritt beim Scrollen zurück, das Teamfoto kommt näher */
  @supports (animation-timeline: scroll()) {
    .hero > .container {
      animation: hero-out linear both;
      animation-timeline: scroll(root);
      animation-range: 0 70vh;
    }
    .hero__media {
      animation: hero-in linear both;
      animation-timeline: scroll(root);
      animation-range: 0 80vh;
    }
  }

  /* Weiche Übergänge zwischen den Seiten */
  @view-transition { navigation: auto; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: .28s; }
  .site-header { view-transition-name: site-header; }

  /* FAQ und Stellen klappen weich auf */
  @supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }
    .disclosure::details-content {
      block-size: 0;
      overflow: clip;
      transition: block-size .45s var(--ease), content-visibility .45s allow-discrete;
    }
    .disclosure[open]::details-content { block-size: auto; }
  }
}

/* Statement: Wörter färben sich beim Scrollen ein */
.statement--scroll .statement__strong { color: inherit; }
.statement--scroll .w { color: var(--faint); transition: color .35s ease; }
.statement--scroll .w.is-lit { color: var(--navy); }

@keyframes reveal-in {
  from { opacity: 0; transform: translateY(32px); }
  to { opacity: 1; transform: none; }
}
@keyframes bar-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes hero-out {
  to { opacity: 0; transform: translateY(-48px) scale(.97); }
}
@keyframes hero-in {
  from { transform: scale(.94); }
  to { transform: scale(1); }
}

/* ------------------------------------------------------------------ Icons an Kacheln, Listen und Vergleich */

.tile__icon {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  margin-bottom: 8px;
  border-radius: 14px;
  background: var(--white);
  box-shadow: 0 0 0 1px var(--line);
  color: var(--navy);
  transition: transform .4s var(--ease);
}
.tile__icon .icon { width: 24px; height: 24px; }
.tile--navy .tile__icon { background: rgba(255, 255, 255, .1); box-shadow: 0 0 0 1px rgba(255, 255, 255, .16); color: var(--cyan-soft); }
.tile:hover .tile__icon { transform: translateY(-2px) rotate(-4deg); }

.service-row { grid-template-columns: auto minmax(0, 5fr) minmax(0, 6fr) auto; column-gap: clamp(20px, 3vw, 48px); }
.service-row__icon {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 15px;
  background: var(--mist);
  color: var(--navy);
  transition: background-color .25s, color .25s;
}
.service-row .service-row__icon .icon { width: 24px; height: 24px; color: inherit; transform: none; }
.service-row:hover .service-row__icon { background: var(--navy); color: var(--white); }
.service-row__arrow { display: grid; }
@media (max-width: 760px) {
  .service-row { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 16px; }
  .service-row__icon { grid-row: 1 / span 2; align-self: start; width: 44px; height: 44px; border-radius: 13px; }
  .service-row .service-row__title { grid-column: 2; }
  .service-row p { grid-column: 2; grid-row: 2; }
  .service-row .service-row__arrow { grid-row: 1 / span 2; grid-column: 3; }
  .service-row .service-row__arrow .icon { grid-row: auto; grid-column: auto; }
}

.compare__head { display: flex; align-items: center; gap: 14px; }
.compare__head .feature__icon { margin: 0; }
.compare__col .compare__head .icon { width: 22px; height: 22px; margin: 0; color: var(--navy); stroke-width: 1.75; }
.compare__col--good .compare__head .feature__icon { background: rgba(255, 255, 255, .1); box-shadow: 0 0 0 1px rgba(255, 255, 255, .16); }
.compare__col--good .compare__head .icon { color: var(--cyan-soft); }

/* ------------------------------------------------------------------ Entwicklerteam */

.devs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dev {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  border-radius: var(--r-lg);
  background: var(--mist);
  overflow: hidden;
}
.dev__photo { position: relative; min-height: 340px; background: var(--white); }
.dev__photo picture, .dev__photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.dev__photo img { object-fit: cover; object-position: 50% 12%; }
.dev__task {
  position: absolute;
  left: 12px; bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px 7px 9px;
  border-radius: 999px;
  background: rgba(0, 56, 102, .86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--white);
  font-size: .8125rem;
  font-weight: 600;
}
.dev__task .icon { width: 16px; height: 16px; color: var(--cyan-soft); stroke-width: 2; }
.dev__body { display: flex; flex-direction: column; gap: 16px; padding: clamp(24px, 2.6vw, 36px); }
.dev__mark { color: var(--cyan); }
.dev__mark .icon { width: 30px; height: 30px; fill: currentColor; stroke: none; }
.dev blockquote { color: var(--text); font-size: 1.0625rem; line-height: 1.55; letter-spacing: -.01em; }
.dev figcaption { color: var(--muted); font-size: .875rem; }
.dev figcaption strong { display: block; color: var(--navy); font-size: 1rem; }
.dev__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.dev__chips li {
  padding: 4px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--navy);
  font-size: .8125rem;
  font-weight: 500;
}
@media (max-width: 1100px) {
  .devs { grid-template-columns: 1fr; max-width: 760px; }
}
@media (max-width: 560px) {
  .dev { grid-template-columns: 1fr; }
  .dev__photo { min-height: 0; aspect-ratio: 4 / 3.2; }
}

/* ------------------------------------------------------------------ Handy-Mockup */

.phone-stage { position: relative; display: grid; justify-items: center; padding: 8px 0 40px; }
.phone {
  width: min(300px, 100%);
  padding: 10px;
  border-radius: 46px;
  background: #0d1b2a;
  box-shadow: 0 50px 90px -40px rgba(0, 20, 40, .7), inset 0 0 0 1.5px rgba(255, 255, 255, .14);
}
.phone__screen {
  display: flex;
  flex-direction: column;
  padding: 14px 16px 22px;
  border-radius: 37px;
  background: linear-gradient(180deg, #f6f8fb, #e9eef4);
  color: var(--navy);
  font-size: 13px;
}
.phone__status { display: flex; align-items: center; justify-content: space-between; padding: 0 10px 18px; font-size: 12px; font-weight: 600; }
.phone__status .icon { width: 15px; height: 15px; stroke-width: 2.2; }
.phone__island { width: 86px; height: 24px; border-radius: 999px; background: #0d1b2a; }
.phone__hello { color: var(--muted); font-size: 12px; }
.phone__title { margin: 2px 0 16px; font-size: 26px; font-weight: 700; letter-spacing: -.03em; }
.phone__scenes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.phone__scenes span {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 12px 4px 10px;
  border-radius: 16px;
  background: var(--white);
  font-size: 11.5px;
  font-weight: 600;
}
.phone__scenes .icon { width: 20px; height: 20px; }
.phone__scenes .is-active { background: var(--navy); color: var(--white); }
.phone__scenes .is-active .icon { color: #ffd166; }
.phone__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.phone__tile {
  display: grid;
  gap: 2px;
  padding: 14px;
  border-radius: 18px;
  background: var(--white);
}
.phone__tile .icon { width: 22px; height: 22px; margin-bottom: 14px; color: var(--faint); }
.phone__tile.is-on .icon { color: var(--cyan); }
.phone__tile b { font-size: 15px; letter-spacing: -.01em; }
.phone__tile em { color: var(--muted); font-size: 11px; font-style: normal; }
.phone-toast { right: auto; left: 50%; bottom: 0; width: max-content; max-width: min(320px, 92%); transform: translateX(-12%); }
.phone-stage--left .phone-toast { transform: translateX(-88%); }

/* Anruf-Bildschirm */
.phone__screen--call { min-height: 560px; align-items: center; text-align: center; background: linear-gradient(180deg, #0f3a63 0%, #002a4e 100%); color: var(--white); }
.phone__screen--call .phone__status { align-self: stretch; }
.phone__screen--call .phone__island { background: #000; }
.phone__screen--call .phone__hello, .phone__screen--call .phone__sub { color: rgba(255, 255, 255, .65); }
.phone__screen--call .phone__hello { margin-top: 18px; }
.phone__avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 92px; height: 92px;
  margin: 26px 0 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: var(--cyan-soft);
}
.phone__avatar .icon { width: 40px; height: 40px; }
.phone__avatar i { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(127, 208, 243, .6); }
.phone__screen--call .phone__title { margin: 0 0 4px; }
.phone__ringing { display: grid; gap: 8px; align-self: stretch; margin: 28px 0; }
.phone__ringing span {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .08);
  font-weight: 500;
}
.phone__ringing span::after { content: "klingelt"; margin-left: auto; color: var(--cyan-soft); font-size: 11px; }
.phone__ringing .icon { width: 18px; height: 18px; color: var(--cyan-soft); }
.phone__actions { display: flex; justify-content: space-around; align-self: stretch; margin-top: auto; }
.phone__btn { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; color: var(--white); }
.phone__btn .icon { width: 26px; height: 26px; stroke-width: 2; }
.phone__btn--decline { background: #e5484d; }
.phone__btn--accept { background: #30a46c; }

@media (max-width: 900px) {
  .phone-stage--left { order: 2; }
}
@media (max-width: 480px) {
  .phone-toast, .phone-stage--left .phone-toast { left: 8px; right: 8px; width: auto; max-width: none; transform: none; }
}

.phone__tile:nth-child(1), .phone__ringing span:nth-child(1) { --i: 0; }
.phone__tile:nth-child(2), .phone__ringing span:nth-child(2) { --i: 1; }
.phone__tile:nth-child(3), .phone__ringing span:nth-child(3) { --i: 2; }
.phone__tile:nth-child(4) { --i: 3; }

@media (prefers-reduced-motion: no-preference) {
  .phone { transition: opacity .9s var(--ease), transform 1.2s var(--ease); }
  .phone__tile, .phone__ringing span { transition: opacity .5s var(--ease) calc(.6s + var(--i) * 120ms), transform .6s var(--ease) calc(.6s + var(--i) * 120ms); }
  .phone-stage .phone-toast { transition: opacity .7s var(--ease) 1.8s, translate .9s var(--ease) 1.8s, scale .9s var(--ease) 1.8s; }
  .live-ready .phone-stage:not(.is-live) .phone { opacity: 0; transform: translateY(48px); }
  .live-ready .phone-stage:not(.is-live) .phone__tile,
  .live-ready .phone-stage:not(.is-live) .phone__ringing span { opacity: 0; transform: translateY(10px); }
  .live-ready .phone-stage:not(.is-live) .phone-toast { opacity: 0; translate: 0 20px; scale: .96; }
  .phone-stage.is-live .phone__avatar i { animation: hub-pulse 2.2s ease-out 1s infinite; }
  .phone-stage.is-live .phone__btn--accept { animation: ring 2.2s ease-in-out 1.2s infinite; }
}
@keyframes ring {
  0%, 60%, 100% { transform: none; }
  65% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } 85% { transform: rotate(-8deg); }
}

/* ------------------------------------------------------------------ Über uns */

.stats--flush { margin-top: 0; padding-block: clamp(28px, 3vw, 40px); border-bottom: 1px solid var(--line); }

.founder { position: relative; }
.founder__badge {
  position: absolute;
  left: 16px; bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 12px;
  border-radius: 999px;
  background: rgba(0, 56, 102, .86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--white);
  font-size: .875rem;
  font-weight: 600;
}
.founder__badge .icon { width: 18px; height: 18px; color: var(--cyan-soft); }

/* Zeitleiste */
.timeline[class] { position: relative; display: grid; gap: clamp(28px, 4vw, 48px); max-width: 980px; margin-inline: auto; padding-block: 8px; }
.timeline::before, .timeline::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .14);
}
.timeline::after { background: linear-gradient(var(--cyan-soft), var(--cyan)); transform-origin: top; }
.progress-ready .timeline::after { transform: scaleY(var(--p, 0)); }
.timeline__item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); gap: 0 clamp(20px, 3vw, 40px); align-items: start; }
.timeline__dot {
  grid-column: 2;
  grid-row: 1;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 6px var(--navy);
  color: var(--navy);
  transition: background-color .4s, color .4s, transform .5s var(--ease);
}
.timeline__dot .icon { width: 24px; height: 24px; }
.progress-ready .timeline__item:not(.is-passed) .timeline__dot { background: var(--navy-deep); color: rgba(255, 255, 255, .5); box-shadow: 0 0 0 6px var(--navy), inset 0 0 0 1.5px rgba(255, 255, 255, .18); transform: scale(.86); }
.timeline__body { grid-row: 1; display: grid; gap: 8px; padding-top: 6px; }
.timeline__item:nth-child(odd) .timeline__body { grid-column: 1; text-align: right; }
.timeline__item:nth-child(even) .timeline__body { grid-column: 3; }
.timeline__when { color: var(--cyan-soft); font-size: .875rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.timeline__body p:last-child { color: rgba(255, 255, 255, .72); }
.timeline__item:nth-child(odd) .timeline__body p:last-child { margin-left: auto; }
.timeline__body p:last-child { max-width: 26em; }
@media (max-width: 760px) {
  .timeline::before, .timeline::after { left: 24px; }
  .timeline__item { grid-template-columns: 48px minmax(0, 1fr); gap: 0 18px; }
  .timeline__dot { grid-column: 1; width: 48px; height: 48px; }
  .timeline__item:nth-child(n) .timeline__body { grid-column: 2; text-align: left; padding-top: 2px; }
  .timeline__item:nth-child(odd) .timeline__body p:last-child { margin-left: 0; }
}

/* Name */
.name-play { display: grid; gap: clamp(32px, 5vw, 56px); }
.name-play__word {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(3.5rem, 13vw, 10rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.055em;
}
.name-play__part { transition: color .35s, opacity .35s; }
.name-play__part--a { color: var(--navy); }
.name-play__part--b { color: var(--cyan); }
.name-play__link { position: relative; width: .55em; height: .06em; margin: 0 .08em; border-radius: 99px; background: var(--line); transition: background-color .35s, opacity .35s; }
.name-play__link i { position: absolute; top: 50%; left: 0; width: .14em; height: .14em; margin-top: -.07em; border-radius: 50%; background: var(--cyan); }
.name-play__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.name-card {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: clamp(24px, 2.6vw, 32px);
  border-radius: var(--r-lg);
  background: var(--mist);
  transition: background-color .3s, transform .4s var(--ease);
}
.name-card p { color: var(--muted); }
.name-card:hover, .name-card:focus-visible { background: var(--mist-2); transform: translateY(-3px); }
.name-card:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.name-play:has(.name-card:hover, .name-card:focus-visible) .name-play__part,
.name-play:has(.name-card:hover, .name-card:focus-visible) .name-play__link { opacity: .18; }
.name-play:has(.name-card--a:hover, .name-card--a:focus-visible) .name-play__part--a,
.name-play:has(.name-card--b:hover, .name-card--b:focus-visible) .name-play__part--b,
.name-play:has(.name-card--link:hover, .name-card--link:focus-visible) .name-play__link { opacity: 1; }
.name-play:has(.name-card--link:hover, .name-card--link:focus-visible) .name-play__link { background: var(--navy); }
@media (max-width: 860px) { .name-play__cards { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }

/* Werte */
.values__title { margin: clamp(56px, 7vw, 88px) 0 clamp(24px, 3vw, 36px); color: var(--navy); font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 700; letter-spacing: -.025em; }
.values { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.section--mist .feature { border-top-color: var(--mist-2); }
@media (max-width: 960px) { .values { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .values { grid-template-columns: 1fr; } }

/* Team-Filter */
.team-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 clamp(28px, 3.5vw, 40px); }
.team-filter[hidden] { display: none; }
.team-filter__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px 9px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--text);
  font: inherit;
  font-size: .9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s, transform .2s var(--ease);
}
.team-filter__chip span { min-width: 22px; padding: 1px 7px; border-radius: 99px; background: var(--mist); color: var(--muted); font-size: .8125rem; text-align: center; }
.team-filter__chip:hover { border-color: #b9c6d3; transform: translateY(-1px); }
.team-filter__chip:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.team-filter__chip[aria-pressed="true"] { border-color: var(--navy); background: var(--navy); color: var(--white); }
.team-filter__chip[aria-pressed="true"] span { background: rgba(255, 255, 255, .16); color: var(--white); }

.person > * { transition: opacity .45s var(--ease), filter .45s var(--ease); }
.person.is-dimmed > * { opacity: .25; filter: grayscale(1); }
@media (max-width: 760px) { .team-grid.is-filtered .person:not(.is-dimmed) { order: -1; } }
.person picture { display: block; overflow: hidden; border-radius: var(--r-md); }
.person__photo { transition: transform .6s var(--ease); }
@media (hover: hover) { .person:not(.is-dimmed):hover .person__photo { transform: scale(1.035); } }
@media (prefers-reduced-motion: reduce) { .person > *, .person__photo, .timeline__dot { transition: none; } }

@media (prefers-reduced-motion: no-preference) {
  .name-play__link i { animation: name-travel 2.6s cubic-bezier(.65, 0, .35, 1) infinite alternate; }
}
@keyframes name-travel { to { left: calc(100% - .14em); } }

/* ------------------------------------------------------------------ Handy-Feinschliff */

.related-list .service-row__icon { width: 44px; height: 44px; border-radius: 13px; background: var(--white); }
@media (max-width: 760px) {
  .related-list .service-row__icon { width: 40px; height: 40px; border-radius: 12px; }
}

@media (max-width: 640px) {
  /* Touch-Flächen */
  .contact-card__links { flex-direction: column; gap: 0; }
  .contact-card__links a { min-height: 44px; }
  .site-footer__list { gap: 0; }
  .site-footer__list a, .site-footer__address a { display: inline-block; padding-block: 6px; }
  .site-footer__legal a { display: inline-block; padding-block: 10px; }
  .site-footer__social a { width: 44px; height: 44px; }

}

/* ------------------------------------------------------------------ IT-Service: Ticket */

.levels__icon {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  margin-bottom: 20px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14);
  color: var(--cyan-soft);
}
.levels__icon .icon { width: 22px; height: 22px; }

.ticket-stage { position: relative; padding-bottom: 44px; }
.ticket {
  max-width: 460px;
  margin-inline: auto;
  border-radius: 24px;
  background: var(--white);
  box-shadow: 0 40px 80px -40px rgba(0, 56, 102, .45), 0 0 0 1px rgba(0, 56, 102, .06);
  overflow: hidden;
}
.ticket__head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--line);
}
.ticket__id { color: var(--faint); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.ticket__state {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: #e7f6ee;
  color: var(--success);
  font-size: 12px;
  font-weight: 600;
}
.ticket__state i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ticket__head strong { color: var(--navy); font-size: 1.125rem; letter-spacing: -.015em; }
.ticket__head small { grid-column: 1 / -1; color: var(--muted); font-size: 13px; }
.ticket .ticket__log { position: relative; display: grid; gap: 18px; padding: 22px 24px; }
.ticket__log::before { content: ""; position: absolute; top: 34px; bottom: 34px; left: 41px; width: 2px; background: var(--line); }
.ticket__log li { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.ticket__ic { z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--mist); box-shadow: 0 0 0 4px var(--white); color: var(--navy); }
.ticket__ic .icon { width: 17px; height: 17px; stroke-width: 2; }
.ticket__log li.is-done .ticket__ic { background: var(--success); color: var(--white); }
.ticket__log b { display: block; color: var(--navy); font-size: 14px; font-weight: 600; }
.ticket__log small { color: var(--muted); font-size: 12.5px; }
.ticket__log time { color: var(--faint); font-size: 12px; font-variant-numeric: tabular-nums; }
.ticket__foot { display: flex; align-items: center; gap: 8px; padding: 14px 24px; background: var(--mist); color: var(--muted); font-size: 13px; }
.ticket__foot .icon { width: 16px; height: 16px; color: var(--cyan); }
.ticket__foot b { color: var(--navy); }
.ticket-toast { right: 0; bottom: 0; }
@media (max-width: 480px) { .ticket-stage { padding-bottom: 72px; } .ticket-toast { left: 0; right: 0; } }

/* ------------------------------------------------------------------ IT-Beratung: Fahrplan */

.roadmap {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 3fr);
  border-radius: var(--r-lg);
  background: var(--mist);
  overflow: hidden;
}
.roadmap__score {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 18px;
  padding: clamp(28px, 3vw, 40px);
  background: var(--navy);
  color: rgba(255, 255, 255, .72);
  text-align: center;
  font-size: .9375rem;
}
.roadmap__score b { display: block; color: var(--white); font-size: 1rem; }
.roadmap__score em { color: var(--cyan-soft); font-style: normal; font-weight: 600; }
.roadmap__ring { position: relative; width: 150px; height: 150px; }
.roadmap__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.roadmap__track, .roadmap__arc { fill: none; stroke-width: 10; }
.roadmap__track { stroke: rgba(255, 255, 255, .12); }
.roadmap__arc { stroke: var(--cyan); stroke-linecap: round; stroke-dasharray: 72 100; }
.roadmap__ring strong { position: absolute; inset: 0; display: grid; place-content: center; color: var(--white); font-size: 2.75rem; font-weight: 700; line-height: 1; letter-spacing: -.04em; }
.roadmap__ring small { display: block; margin-top: 4px; color: rgba(255, 255, 255, .6); font-size: 12px; font-weight: 500; letter-spacing: 0; }
.roadmap__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: clamp(20px, 2.4vw, 32px); }
.roadmap__col { display: grid; align-content: start; gap: 10px; }
.roadmap__label { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; color: var(--navy); font-size: .9375rem; font-weight: 600; }
.roadmap__label i { width: 10px; height: 10px; border-radius: 50%; background: #e5484d; }
.roadmap__col--soon .roadmap__label i { background: #f5a524; }
.roadmap__col--later .roadmap__label i { background: var(--success); }
.roadmap__card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  background: var(--white);
  box-shadow: 0 1px 0 rgba(0, 56, 102, .05), 0 0 0 1px var(--line);
  color: var(--text);
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.35;
}
.roadmap__card .icon { flex: none; width: 20px; height: 20px; color: var(--navy); }
.roadmap__col--now .roadmap__card { box-shadow: inset 3px 0 0 #e5484d, 0 0 0 1px var(--line); }
.roadmap__col--soon .roadmap__card { box-shadow: inset 3px 0 0 #f5a524, 0 0 0 1px var(--line); }
.roadmap__col--later .roadmap__card { box-shadow: inset 3px 0 0 var(--success), 0 0 0 1px var(--line); }
.roadmap__card:nth-of-type(1) { --i: 0; } .roadmap__card:nth-of-type(2) { --i: 1; } .roadmap__card:nth-of-type(3) { --i: 2; }
.roadmap__col:nth-child(2) { --c: 1; } .roadmap__col:nth-child(3) { --c: 2; }
@media (max-width: 960px) {
  .roadmap { grid-template-columns: 1fr; }
  .roadmap__score { grid-template-columns: auto 1fr; justify-items: start; text-align: left; }
  .roadmap__ring { width: 120px; height: 120px; }
  .roadmap__ring strong { font-size: 2.25rem; }
}
@media (max-width: 700px) {
  .roadmap__cols { grid-template-columns: 1fr; gap: 22px; }
}

/* ------------------------------------------------------------------ IT-Infrastruktur: Netzwerk */

.net { position: relative; display: grid; justify-items: center; padding-bottom: 104px; }
.net__node {
  position: relative;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 0 12px;
  padding: 12px 20px 12px 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  color: var(--white);
}
.net__node b { font-size: 15px; font-weight: 600; }
.net__node small { grid-column: 2; color: rgba(255, 255, 255, .6); font-size: 12px; }
.net__node .net__ic { grid-row: 1 / span 2; }
.net__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, .1); color: var(--cyan-soft); }
.net__ic .icon { width: 20px; height: 20px; }
.net__node--fw { padding: 16px 24px 16px 16px; background: var(--white); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); color: var(--navy); }
.net__node--fw small { color: var(--muted); }
.net__node--fw .net__ic { width: 48px; height: 48px; background: var(--navy); color: var(--cyan-soft); }
.net__pulse { position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 2px var(--cyan); opacity: 0; pointer-events: none; }
.net__link { position: relative; width: 2px; height: 56px; background: rgba(255, 255, 255, .2); }
.net__link i { position: absolute; left: -3px; top: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan-soft); box-shadow: 0 0 12px var(--cyan); opacity: 0; }
.net__link i.net__threat { background: #ff6b6b; box-shadow: 0 0 12px #e5484d; }
.net__fan { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 520px; margin-top: 28px; }
.net__fan::before { content: ""; position: absolute; top: -28px; left: 50%; width: 2px; height: 14px; background: rgba(255, 255, 255, .2); }
.net__fan::after { content: ""; position: absolute; top: -14px; left: 12.5%; right: 12.5%; height: 2px; background: rgba(255, 255, 255, .2); }
.net__leaf { position: relative; display: grid; justify-items: center; gap: 8px; padding: 14px 6px; border-radius: 16px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); color: var(--white); text-align: center; }
.net__leaf::before { content: ""; position: absolute; top: -14px; left: 50%; width: 2px; height: 14px; background: rgba(255, 255, 255, .2); }
.net__leaf b { font-size: 12.5px; font-weight: 600; }
.net__leaf:nth-child(2) { --i: 1; } .net__leaf:nth-child(3) { --i: 2; } .net__leaf:nth-child(4) { --i: 3; }
.net-toast { right: 0; bottom: 0; }
@media (max-width: 480px) {
  .net__fan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .net__fan::after { left: 25%; right: 25%; }
  .net__leaf:nth-child(n+3)::before { display: none; }
  .net-toast { left: 0; right: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .ticket { transition: opacity .9s var(--ease), transform 1.1s var(--ease); }
  .ticket__log li { transition: opacity .5s var(--ease), transform .6s var(--ease); }
  .ticket__log li:nth-child(1) { transition-delay: .4s; } .ticket__log li:nth-child(2) { transition-delay: .75s; }
  .ticket__log li:nth-child(3) { transition-delay: 1.1s; } .ticket__log li:nth-child(4) { transition-delay: 1.45s; }
  .ticket__state { transition: opacity .5s ease 1.8s, transform .5s var(--ease) 1.8s; }
  .ticket-stage .ticket-toast, .net .net-toast { transition: opacity .7s var(--ease) 2.2s, transform .9s var(--ease) 2.2s; }
  .live-ready .ticket-stage:not(.is-live) .ticket { opacity: 0; transform: translateY(40px); }
  .live-ready .ticket-stage:not(.is-live) .ticket__log li { opacity: 0; transform: translateX(-10px); }
  .live-ready .ticket-stage:not(.is-live) .ticket__state { opacity: 0; transform: scale(.8); }
  .live-ready .ticket-stage:not(.is-live) .ticket-toast,
  .live-ready .net:not(.is-live) .net-toast { opacity: 0; transform: translateY(20px) scale(.96); }

  .roadmap__arc { transition: stroke-dasharray 1.6s var(--ease) .3s; }
  .roadmap__card { transition: opacity .5s var(--ease), transform .6s var(--ease); transition-delay: calc(.5s + var(--c, 0) * .3s + var(--i) * 90ms); }
  .live-ready .roadmap:not(.is-live) .roadmap__arc { stroke-dasharray: 0 100; }
  .live-ready .roadmap:not(.is-live) .roadmap__card { opacity: 0; transform: translateY(12px); }

  .net__node, .net__leaf { transition: opacity .6s var(--ease), transform .7s var(--ease); }
  .net__leaf { transition-delay: calc(.6s + var(--i, 0) * 90ms); }
  .live-ready .net:not(.is-live) .net__node,
  .live-ready .net:not(.is-live) .net__leaf { opacity: 0; transform: translateY(12px); }
  .net.is-live .net__link i { animation: net-packet 1.8s linear 1s infinite; }
  .net.is-live .net__link--in i:first-child { animation-delay: 1.9s; }
  .net.is-live .net__link i.net__threat { animation: net-threat 3.6s ease-in 1s infinite; }
  .net.is-live .net__pulse { animation: net-block 3.6s ease-out 1s infinite; }
}
@keyframes net-packet { 0% { top: 0; opacity: 0; } 15%, 85% { opacity: 1; } 100% { top: calc(100% - 8px); opacity: 0; } }
@keyframes net-threat { 0% { top: 0; opacity: 0; } 8% { opacity: 1; } 40% { top: calc(100% - 8px); opacity: 1; } 46%, 100% { top: calc(100% - 8px); opacity: 0; } }
@keyframes net-block { 0%, 38% { opacity: 0; box-shadow: 0 0 0 2px #e5484d; } 44% { opacity: 1; } 70%, 100% { opacity: 0; box-shadow: 0 0 0 10px rgba(229, 72, 77, 0); } }

/* ------------------------------------------------------------------ Startseite: vor Ort & remote */

.reach { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.reach__card { display: grid; align-content: start; justify-items: start; gap: 14px; padding: clamp(28px, 3.4vw, 44px); border-radius: var(--r-lg); background: var(--mist); }
.reach__card p { color: var(--muted); max-width: 34em; }
.reach__card .button { margin-top: 8px; }
.reach__card--remote { background: var(--navy); color: rgba(255, 255, 255, .78); }
.reach__card--remote .h3 { color: var(--white); }
.reach__card--remote p { color: rgba(255, 255, 255, .72); }
.reach__card--remote .feature__icon { background: rgba(255, 255, 255, .1); box-shadow: 0 0 0 1px rgba(255, 255, 255, .16); color: var(--cyan-soft); }
.reach__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.reach__links a { display: inline-block; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--navy); font-size: .9375rem; font-weight: 500; transition: border-color .2s, background-color .2s; }
.reach__links a:hover { border-color: var(--navy); }
@media (max-width: 760px) { .reach { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ IT-Lösungen: Icons & Teamstimmen */

.icon-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 28px; }
.icon-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--navy); font-size: .9375rem; font-weight: 500; }
.icon-chips .icon { width: 18px; height: 18px; color: var(--cyan-text); }

.step__title { display: flex; align-items: center; gap: 12px; }
.step__icon { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; background: var(--white); box-shadow: 0 0 0 1px var(--line); color: var(--navy); }
.step__icon .icon { width: 19px; height: 19px; }

.mini-quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mini-quote { display: flex; flex-direction: column; gap: 18px; padding: clamp(26px, 3vw, 38px); border-radius: var(--r-lg); background: var(--mist); }
.mini-quote__mark { color: var(--cyan); }
.mini-quote__mark .icon { width: 30px; height: 30px; fill: currentColor; stroke: none; }
.mini-quote blockquote { color: var(--text); font-size: 1.125rem; line-height: 1.55; letter-spacing: -.01em; }
.mini-quote figcaption { display: flex; align-items: center; gap: 14px; margin-top: auto; color: var(--muted); font-size: .875rem; }
.mini-quote figcaption strong { display: block; color: var(--navy); font-size: 1rem; }
.mini-quote picture { flex: none; }
.mini-quote__photo { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; background: var(--white); }
@media (max-width: 760px) { .mini-quotes { grid-template-columns: 1fr; } }

.icon-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 8px 0 4px; }
.icon-facts li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-md); background: var(--mist); color: var(--muted); font-size: .875rem; }
.icon-facts li > .icon { flex: none; width: 22px; height: 22px; color: var(--cyan-text); }
.icon-facts strong { display: block; color: var(--navy); font-size: 1rem; }
@media (max-width: 420px) { .icon-facts { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ Teamzitat & Kontakt-Icons */

.mini-quote--solo { max-width: 820px; margin-inline: auto; }
.contact-aside__block h2 { display: flex; align-items: center; gap: 10px; }
.contact-aside__icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--mist); color: var(--navy); }
.contact-aside__icon .icon { width: 18px; height: 18px; }
.section--mist .service-row__icon { background: var(--white); }

/* ------------------------------------------------------------------ Deutschlandkarte */

.de-map { position: relative; display: grid; place-items: center; padding: clamp(24px, 4vw, 48px); border-radius: var(--r-lg); background: radial-gradient(120% 90% at 20% 45%, #0b4a80 0%, var(--navy) 55%, var(--navy-deep) 100%); overflow: hidden; }
.de-map svg { width: 100%; max-width: 440px; height: auto; overflow: visible; }
.de-map__dots { fill: none; stroke: rgba(255, 255, 255, .2); stroke-width: 5.2; stroke-linecap: round; }
.de-map__arcs path { fill: none; stroke: rgba(127, 208, 243, .35); stroke-width: 1.6; }
.de-map__flows path { fill: none; stroke: var(--cyan-soft); stroke-width: 3; stroke-linecap: round; opacity: 0; }
.de-map__cities circle { fill: var(--cyan); stroke: rgba(255, 255, 255, .85); stroke-width: 2; }
.de-map__hq { fill: var(--white); stroke: var(--cyan); stroke-width: 5; }
.de-map__pulse { fill: none; stroke: var(--cyan-soft); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.de-map__label { fill: var(--white); font: 600 17px var(--font); letter-spacing: -.01em; paint-order: stroke; stroke: var(--navy); stroke-width: 6px; stroke-linejoin: round; }
.de-map__arcs path:nth-child(1), .de-map__flows path:nth-child(1), .de-map__cities circle:nth-child(1) { --i: 0; }
.de-map__arcs path:nth-child(2), .de-map__flows path:nth-child(2), .de-map__cities circle:nth-child(2) { --i: 1; }
.de-map__arcs path:nth-child(3), .de-map__flows path:nth-child(3), .de-map__cities circle:nth-child(3) { --i: 2; }
.de-map__arcs path:nth-child(4), .de-map__flows path:nth-child(4), .de-map__cities circle:nth-child(4) { --i: 3; }
.de-map__arcs path:nth-child(5), .de-map__flows path:nth-child(5), .de-map__cities circle:nth-child(5) { --i: 4; }
.de-map__arcs path:nth-child(6), .de-map__flows path:nth-child(6), .de-map__cities circle:nth-child(6) { --i: 5; }
.de-map__arcs path:nth-child(7), .de-map__flows path:nth-child(7), .de-map__cities circle:nth-child(7) { --i: 6; }
.de-map__arcs path:nth-child(8), .de-map__flows path:nth-child(8), .de-map__cities circle:nth-child(8) { --i: 7; }
.de-map__cities circle { transform-box: fill-box; transform-origin: center; }

@media (prefers-reduced-motion: no-preference) {
  .de-map__dots { transition: opacity 1.2s ease; }
  .de-map__arcs path { stroke-dasharray: 100; transition: stroke-dashoffset 1.1s var(--ease) calc(.5s + var(--i) * 110ms); }
  .de-map__cities circle { transition: transform .5s var(--ease) calc(1.1s + var(--i) * 110ms), opacity .3s ease calc(1.1s + var(--i) * 110ms); }
  .live-ready .de-map:not(.is-live) .de-map__dots { opacity: 0; }
  .live-ready .de-map:not(.is-live) .de-map__arcs path { stroke-dashoffset: 100; }
  .live-ready .de-map:not(.is-live) .de-map__cities circle { opacity: 0; transform: scale(0); }
  .de-map.is-live .de-map__flows path { opacity: 1; stroke-dasharray: 5 95; animation: data-flow 3.2s linear calc(2s + var(--i) * .4s) infinite both; }
  .de-map.is-live .de-map__pulse { animation: map-pulse 2.4s ease-out 1s infinite; }
}
@keyframes map-pulse { 0% { opacity: .9; transform: scale(.8); } 100% { opacity: 0; transform: scale(3.2); } }

/* Startseite: Karte + Karten */
.reach--map { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: stretch; }
.reach__stack { display: grid; gap: 16px; }
@media (max-width: 860px) { .reach--map { grid-template-columns: 1fr; } }

/* Hinweis über dem Slogan */
.hero__badge { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; padding: 7px 16px 7px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--navy); font-size: .9375rem; font-weight: 600; }
.hero__badge .icon { width: 18px; height: 18px; color: var(--cyan-text); }
.hero__badge span { color: var(--muted); font-weight: 500; }
.flyout__link--de strong { display: inline-flex; align-items: center; gap: 6px; color: var(--cyan-text); }
.flyout__link--de .icon { width: 16px; height: 16px; }
.split__text .de-map { margin-top: 28px; }
.flyout__list > li:has(.flyout__link--de) { grid-column: 1 / -1; }
.hero__badge { white-space: nowrap; }
@media (max-width: 560px) { .hero__badge span { display: none; } }

/* Handy: Kopfleiste fast deckend – nicht jeder Browser zeichnet den Unschärfe-Effekt */
@media (max-width: 760px) {
  .site-header::before { background: var(--white); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header::before { background: var(--white); }
}
@media (max-width: 640px) {
  .steps .step { grid-template-columns: 34px minmax(0, 1fr); gap: 6px 12px; }
  .steps .step::before { font-size: 2rem; }
  .step__title { gap: 10px; }
  .step__icon { width: 32px; height: 32px; border-radius: 9px; }
  .step__icon .icon { width: 17px; height: 17px; }
}
@media (max-width: 640px) {
  .office-card__links { gap: 0; }
  .office-card__links a { min-height: 44px; }
}

/* ------------------------------------------------------------------ entrykey & Marken */

.ek-logo { width: 190px; height: auto; margin-bottom: 8px; }
.ek-chips { justify-content: flex-start; padding-right: 0; margin: 4px 0 8px; }
.ek-flow[class] { position: relative; display: grid; gap: 14px; align-self: center; padding: 0; }
.ek-flow::before { content: ""; position: absolute; left: 27px; top: 30px; bottom: 30px; width: 2px; background: linear-gradient(var(--line), var(--cyan)); }
.ek-flow li { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px 18px 16px 0; }
.ek-flow li > span:last-child { padding: 16px 18px; border-radius: var(--r-md); background: var(--white); box-shadow: 0 20px 40px -30px rgba(0, 56, 102, .35), 0 0 0 1px rgba(0, 56, 102, .05); color: var(--muted); font-size: .9375rem; line-height: 1.45; }
.ek-flow b { display: block; margin-bottom: 2px; color: var(--navy); font-size: 1rem; }
.ek-flow__ic { z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 6px var(--mist), 0 0 0 7px var(--line); color: var(--navy); }
.ek-flow__ic .icon { width: 24px; height: 24px; }
.ek-flow__ic--key { background: var(--cyan); color: var(--white); box-shadow: 0 0 0 6px var(--mist), 0 10px 24px -8px rgba(0, 159, 227, .6); }
.ek-flow__ic--ok { background: var(--success); color: var(--white); box-shadow: 0 0 0 6px var(--mist); }
.ek-flow li { padding: 0; }
.ek-flow li:nth-child(2) { --i: 1; } .ek-flow li:nth-child(3) { --i: 2; } .ek-flow li:nth-child(4) { --i: 3; }
@media (prefers-reduced-motion: no-preference) {
  .ek-flow li { transition: opacity .5s var(--ease) calc(.2s + var(--i, 0) * .25s), transform .6s var(--ease) calc(.2s + var(--i, 0) * .25s); }
  .live-ready .ek-flow:not(.is-live) li { opacity: 0; transform: translateX(16px); }
}

.brand-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 clamp(28px, 4vw, 40px); }
.brand-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px 10px 14px; border-radius: 999px; background: var(--white); box-shadow: 0 0 0 1px var(--line); color: var(--muted); font-size: .9375rem; }
.brand-chips strong { color: var(--navy); font-weight: 700; }
.brand-chips .icon { width: 18px; height: 18px; color: var(--cyan-text); }

/* ------------------------------------------------------------------ Captcha (Proof of Work) */

.captcha {
  display: flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
  max-width: 100%;
  padding: 12px 20px 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
}
.captcha.is-invalid { border-color: var(--danger); }
.captcha__check {
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1.5px solid #b8c4d0;
  border-radius: 8px;
  background: var(--white);
  color: var(--white);
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.captcha__check:hover { border-color: var(--cyan); }
.captcha__check .icon { width: 18px; height: 18px; opacity: 0; transform: scale(.6); transition: opacity .2s, transform .25s cubic-bezier(.2, .9, .3, 1.4); stroke-width: 2.4; }
.captcha__spinner {
  position: absolute;
  inset: 3px;
  border: 2px solid var(--mist-2);
  border-top-color: var(--cyan);
  border-radius: 50%;
  opacity: 0;
}
.captcha[data-state="working"] .captcha__check { border-color: transparent; cursor: progress; }
.captcha[data-state="working"] .captcha__spinner { opacity: 1; animation: captcha-spin .8s linear infinite; }
.captcha[data-state="done"] .captcha__check { border-color: var(--navy); background: var(--navy); cursor: default; }
.captcha[data-state="done"] .captcha__check .icon { opacity: 1; transform: none; }
.captcha__text { display: grid; gap: 1px; line-height: 1.3; }
.captcha__text span { color: var(--text); font-size: .9375rem; font-weight: 550; }
.captcha__text small { color: var(--muted); font-size: .8125rem; }
@keyframes captcha-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .captcha[data-state="working"] .captcha__spinner { animation-duration: 2s; } }

/* ------------------------------------------------------------------ Beitrag teilen */

.share {
  display: grid;
  gap: 14px;
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.share__label { color: var(--navy); font-size: 1.0625rem; font-weight: 650; }
.share__list { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.share__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px 0 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--text);
  font: inherit;
  font-size: .9375rem;
  font-weight: 550;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.share__btn .icon { width: 20px; height: 20px; }
.share__btn:hover { border-color: var(--mist-2); background: var(--mist); color: var(--navy); }
.share__btn--linkedin:hover { color: #0a66c2; }
.share__btn--xing:hover { color: #026466; }
.share__btn--whatsapp:hover { color: #128c4b; }
.share__btn--facebook:hover { color: #1877f2; }
.share__btn--instagram:hover { color: #c13584; }
.share__status { min-height: 1.5em; color: var(--muted); font-size: .875rem; }
.share__status:empty { display: none; }
@media (max-width: 520px) {
  .share__btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .share__btn { width: 48px; height: 48px; justify-content: center; padding: 0; }
}

/* ------------------------------------------------------------------ Technik & Hersteller */

.tech--unifi { --brand: #0559c9; }
.tech--proxmox { --brand: #e57000; }
.tech--3cx { --brand: #0096d6; }
.tech--teamviewer { --brand: #0e8ee9; }
.tech--shelly { --brand: #4495d1; }
.tech--ajax { --brand: #22303e; }
.tech--knx { --brand: #6aab2e; }
.tech--homematic { --brand: #0094d9; }
.tech--iobroker { --brand: #3399cc; }
.tech--nuki { --brand: #f28c00; }
.tech--entrykey { --brand: var(--cyan); }
.tech--php { --brand: #777bb4; }
.tech--javascript { --brand: #c9a800; }
.tech--python { --brand: #3776ab; }
.tech--powershell { --brand: #2671be; }

.tech-mark { width: 22px; height: 22px; flex: none; color: var(--brand, var(--navy)); }
.tech-mark--icon { stroke-width: 1.8; }

.tech-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tech-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px 6px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--text);
  font-size: .875rem;
  font-weight: 550;
  line-height: 1.2;
}
.tech-chip .tech-mark { width: 18px; height: 18px; }
.tile .tech-chips { margin-top: auto; }
.tile--navy .tech-chip { border-color: rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .08); color: var(--white); }
.section--navy .tech-chip { border-color: rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .08); color: var(--white); }
.section--navy .tech-chip .tech-mark { color: var(--white); }

.tech-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tech-card {
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 22px 20px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
  transition: border-color .25s, transform .25s var(--ease, ease), box-shadow .25s;
}
.tech-card .tech-mark { width: 30px; height: 30px; margin-bottom: 10px; color: var(--brand, var(--navy)); }
.tech-card:hover { border-color: var(--mist-2); box-shadow: 0 10px 30px rgba(0, 30, 60, .07); transform: translateY(-2px); }
.tech-card__name { color: var(--navy); font-weight: 650; letter-spacing: -.01em; }
.tech-card__purpose { color: var(--muted); font-size: .875rem; }
.section--mist .tech-card { border-color: transparent; }
@media (prefers-reduced-motion: reduce) { .tech-card:hover { transform: none; } }
.feature__icon--brand .tech-mark { width: 24px; height: 24px; }
.action__icon .tech-mark { width: 26px; height: 26px; }
.tech-chips--spaced { margin-top: 24px; }
.brand-note {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  max-width: 360px;
  margin-top: 28px;
  padding: 18px 20px;
  border-radius: var(--r-md);
  background: var(--mist);
}
.brand-note .tech-mark { width: 28px; height: 28px; margin-top: 2px; }
.brand-note p { color: var(--muted); font-size: .9375rem; line-height: 1.5; }
.brand-note strong { display: block; color: var(--navy); font-weight: 650; }
.action--primary .action__icon .tech-mark { color: var(--white); }

/* Logowand auf dem Smartphone kompakt: Logo und Name nebeneinander */
@media (max-width: 600px) {
  .tech-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tech-card { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r-sm); }
  .tech-card .tech-mark { width: 22px; height: 22px; margin: 0; color: var(--brand, var(--navy)); }
  .tech-card__name { font-size: .9375rem; line-height: 1.2; }
  .tech-card__purpose { display: none; }
}

/* ================================================================== Farbe & Bewegung */

/* Akzentfarbe je Leistung */
a[href$="/it-service"]          { --accent: #0ea5e9; }
a[href$="/it-beratung"]         { --accent: #7c5cff; }
a[href$="/it-infrastruktur"]    { --accent: #0891b2; }
a[href$="/softwareentwicklung"] { --accent: #4f46e5; }
a[href$="/cloud-computing"]     { --accent: #2f7cf6; }
a[href$="/cloud-telefonie"]     { --accent: #0d9488; }
a[href$="/gebaeudeautomation"]  { --accent: #16a34a; }
a[href$="/schliessanlagen"]     { --accent: #d97706; }
.tile:not(.tile--navy) .tile__icon,
.service-row__icon {
  color: var(--accent, var(--navy));
  background: color-mix(in srgb, var(--accent, var(--navy)) 11%, var(--white));
  box-shadow: none;
}
.bento .tile:not(.tile--navy):hover { background-image: radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent, var(--cyan)) 16%, transparent), transparent 62%); }
.service-row:hover .service-row__icon { background: var(--accent, var(--navy)); color: var(--white); }
.service-row__icon { transition: background-color .3s, color .3s, transform .4s var(--ease); }
.service-row:hover .service-row__icon { transform: rotate(-6deg) scale(1.05); }

/* Hero: sanfter Farbschimmer und ".IT" im Verlauf wie im Logo */
.hero { position: relative; isolation: isolate; }
.hero::before {
  content: "";
  position: absolute;
  top: -120px;
  left: 50%;
  z-index: -1;
  width: min(1200px, 140vw);
  height: 720px;
  background:
    radial-gradient(closest-side at 32% 42%, rgba(0, 159, 227, .20), transparent),
    radial-gradient(closest-side at 70% 50%, rgba(124, 92, 255, .12), transparent),
    radial-gradient(closest-side at 50% 75%, rgba(127, 208, 243, .18), transparent);
  filter: blur(30px);
  transform: translateX(-50%);
  pointer-events: none;
}
.hero__accent {
  background: linear-gradient(100deg, var(--cyan) 0%, #5cc8f5 35%, #0070b0 65%, var(--cyan) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Punkt am Ende von Überschriften in Cyan (wie im Logo) */
.dot-accent { color: var(--cyan); }
.section--navy .dot-accent { color: var(--cyan-soft); }

/* Kennzahlen im Verlauf */
.stat dd {
  background: linear-gradient(120deg, var(--navy) 35%, var(--cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Dunkelblaue Bereiche mit leichtem Leuchten */
.section--navy { position: relative; overflow: clip; isolation: isolate; }
.section--navy::before {
  content: "";
  position: absolute;
  inset: -25%;
  z-index: -1;
  background:
    radial-gradient(38% 34% at 18% 22%, rgba(0, 159, 227, .30), transparent 70%),
    radial-gradient(32% 30% at 86% 78%, rgba(124, 92, 255, .16), transparent 70%);
  pointer-events: none;
}

/* Buttons: Glanz und leichtes Anheben */
.button { position: relative; overflow: hidden; transition: background-color .2s, color .2s, border-color .2s, transform .25s var(--ease), box-shadow .25s; }
.button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%);
  transform: translateX(-120%);
  pointer-events: none;
}
.button:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0, 56, 102, .22); }
.button--secondary:hover, .button--light:hover { box-shadow: 0 8px 22px rgba(0, 56, 102, .10); }

/* Fortschrittsbalken beim Scrollen */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--navy), var(--cyan), #7c5cff);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}

/* Laufendes Logo-Band (Startseite) */
.tech-marquee .section-head { margin-bottom: clamp(28px, 4vw, 48px); }
.marquee {
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee + .marquee { margin-top: 14px; }
.marquee__track { display: flex; gap: 14px; width: max-content; margin: 0; padding: 4px 0; list-style: none; }
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px 14px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--navy);
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: -.01em;
  white-space: nowrap;
  transition: border-color .25s, box-shadow .25s;
}
.marquee__item .tech-mark { width: 26px; height: 26px; }
.marquee__item:hover { border-color: color-mix(in srgb, var(--brand, var(--navy)) 45%, var(--white)); box-shadow: 0 8px 24px color-mix(in srgb, var(--brand, var(--navy)) 18%, transparent); }

@media (prefers-reduced-motion: no-preference) {
  .hero::before { animation: aurora 18s ease-in-out infinite alternate; }
  .hero__accent { animation: shimmer 7s ease-in-out infinite; }
  .section--navy::before { animation: glow-drift 24s ease-in-out infinite alternate; }
  .button:not(.button--secondary):not(.button--light):hover::after { transform: translateX(120%); transition: transform .8s var(--ease); }
  .marquee__track { animation: marquee 120s linear infinite; }
  .marquee--reverse .marquee__track { animation-direction: reverse; animation-duration: 140s; }
  .marquee:hover .marquee__track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee__track { flex-wrap: wrap; justify-content: center; width: auto; padding-inline: var(--gutter); }
  .marquee__item[aria-hidden="true"] { display: none; }
}
@keyframes aurora {
  0%   { transform: translateX(-50%) translate3d(-4%, 0, 0) scale(1); }
  50%  { transform: translateX(-50%) translate3d(3%, 4%, 0) scale(1.08); }
  100% { transform: translateX(-50%) translate3d(5%, -3%, 0) scale(.96); }
}
@keyframes shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes glow-drift {
  from { transform: translate3d(-4%, -3%, 0) rotate(0deg); }
  to   { transform: translate3d(4%, 3%, 0) rotate(8deg); }
}
@keyframes marquee { to { transform: translateX(calc(-50% - 7px)); } }

/* ================================================================== Feature-Karten: Farbe, Tiefe, Bewegung */

.feature-grid { gap: clamp(16px, 2vw, 24px); }
.feature-grid > .feature {
  --fa: var(--cyan);
  position: relative;
  gap: 12px;
  padding: clamp(24px, 2.6vw, 32px);
  border: 0;
  border-radius: var(--r-md);
  background: var(--mist);
  overflow: hidden;
  isolation: isolate;
  transition: translate .45s var(--ease), box-shadow .45s var(--ease), background-color .3s;
}
.section--mist .feature-grid > .feature { background: var(--white); box-shadow: 0 1px 2px rgba(0, 40, 80, .04); }
.feature-grid > .feature:nth-child(6n+1) { --fa: #0ea5e9; }
.feature-grid > .feature:nth-child(6n+2) { --fa: #4f46e5; }
.feature-grid > .feature:nth-child(6n+3) { --fa: #0d9488; }
.feature-grid > .feature:nth-child(6n+4) { --fa: #7c5cff; }
.feature-grid > .feature:nth-child(6n+5) { --fa: #2f7cf6; }
.feature-grid > .feature:nth-child(6n+6) { --fa: #d97706; }

/* Farbiger Streifen oben, der beim Hover einläuft */
.feature-grid > .feature::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--fa), color-mix(in srgb, var(--fa) 30%, var(--cyan-soft)));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .6s var(--ease);
}
/* Lichtschein folgt dem Mauszeiger */
.feature-grid > .feature::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--fa) 14%, transparent), transparent 65%);
  opacity: 0;
  transition: opacity .4s;
}
.feature-grid > .feature:hover {
  translate: 0 -4px;
  box-shadow: 0 28px 56px -28px color-mix(in srgb, var(--fa) 55%, transparent), 0 0 0 1px color-mix(in srgb, var(--fa) 22%, transparent);
}
.feature-grid > .feature:hover::before { transform: scaleX(1); }
.feature-grid > .feature:hover::after { opacity: 1; }

.feature-grid > .feature .feature__icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--fa) 13%, var(--white));
  box-shadow: none;
  color: var(--fa);
  transition: background-color .35s, color .35s, transform .5s var(--ease);
}
.feature-grid > .feature:hover .feature__icon { background: var(--fa); color: var(--white); transform: rotate(-6deg) scale(1.06); }
.feature-grid > .feature .feature__icon--brand { color: var(--brand, var(--fa)); }
.feature-grid > .feature:hover .feature__icon--brand { background: color-mix(in srgb, var(--fa) 13%, var(--white)); color: var(--brand, var(--fa)); }

/* Auf Navy: Glas-Karten */
.section--navy .feature-grid > .feature { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.section--navy .feature-grid > .feature:hover { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fa) 45%, transparent), 0 28px 56px -28px rgba(0, 0, 0, .5); }
.section--navy .feature-grid > .feature .feature__icon { background: color-mix(in srgb, var(--fa) 24%, transparent); color: color-mix(in srgb, var(--fa) 45%, var(--white)); }
.section--navy .feature-grid > .feature:hover .feature__icon { background: var(--fa); color: var(--white); }
.section--navy .feature-grid > .feature::after { background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--fa) 22%, transparent), transparent 65%); }

@media (prefers-reduced-motion: reduce) {
  .feature-grid > .feature:hover { translate: none; }
  .feature-grid > .feature:hover .feature__icon { transform: none; }
}

/* ================================================================== Vorher / Nachher */

.before-after { display: grid; gap: 12px; margin-top: clamp(16px, 2vw, 28px); }
.before-after__card {
  display: grid;
  gap: 12px;
  padding: 22px 24px;
  border-radius: var(--r-md);
  background: var(--mist);
}
.before-after__card--after {
  background: linear-gradient(135deg, var(--navy) 0%, #0a4f8a 60%, #1167b1 100%);
  color: var(--white);
  box-shadow: 0 30px 60px -30px rgba(0, 56, 102, .6);
}
.before-after__label { color: var(--faint); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.before-after__card--after .before-after__label { color: var(--cyan-soft); }
.before-after ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.before-after li { display: flex; align-items: center; gap: 10px; font-size: .9375rem; }
.before-after li .icon { flex: none; width: 18px; height: 18px; }
.before-after__card--before li { color: var(--muted); }
.before-after__card--before li span { text-decoration: line-through; text-decoration-color: rgba(180, 35, 24, .45); text-decoration-thickness: 1.5px; }
.before-after__card--before li .icon { color: var(--danger); opacity: .7; }
.before-after__card--after li .icon { color: #3fd18b; }
.before-after__arrow {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  margin: -24px auto;
  position: relative;
  z-index: 1;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 6px 18px rgba(0, 40, 80, .15);
  color: var(--cyan);
}
.before-after__arrow .icon { width: 18px; height: 18px; transform: rotate(90deg); }
@media (prefers-reduced-motion: no-preference) {
  .before-after__arrow .icon { animation: ba-nudge 2.4s var(--ease) infinite; }
}
@keyframes ba-nudge { 0%, 100% { translate: 0 -2px; } 50% { translate: 0 3px; } }

/* Integration und Ablauf: Symbole in den Leistungsfarben */
.integration__node:nth-child(1) { --fa: #0ea5e9; }
.integration__node:nth-child(2) { --fa: #4f46e5; }
.integration__node:nth-child(3) { --fa: #0d9488; }
.integration__col + .integration__hub + .integration__col .integration__node:nth-child(1) { --fa: #7c5cff; }
.integration__col + .integration__hub + .integration__col .integration__node:nth-child(2) { --fa: #2f7cf6; }
.integration__col + .integration__hub + .integration__col .integration__node:nth-child(3) { --fa: #d97706; }
.integration__node > span { background: color-mix(in srgb, var(--fa, var(--navy)) 13%, var(--white)); color: var(--fa, var(--navy)); box-shadow: none; }
.integration__node { transition: opacity .7s var(--ease), transform .8s var(--ease), translate .4s var(--ease), box-shadow .4s, border-color .3s; }
.integration__node:hover { translate: 0 -3px; border-color: color-mix(in srgb, var(--fa) 35%, var(--line)); box-shadow: 0 20px 40px -24px color-mix(in srgb, var(--fa) 60%, transparent); }
.step:nth-child(5n+1) { --fa: #0ea5e9; }
.step:nth-child(5n+2) { --fa: #4f46e5; }
.step:nth-child(5n+3) { --fa: #0d9488; }
.step:nth-child(5n+4) { --fa: #7c5cff; }
.step:nth-child(5n+5) { --fa: #2f7cf6; }
.step__icon { background: color-mix(in srgb, var(--fa, var(--navy)) 13%, var(--white)); color: var(--fa, var(--navy)); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .integration__node:hover { translate: none; } }
.step::before {
  background: linear-gradient(160deg, var(--fa, var(--cyan-text)) 20%, color-mix(in srgb, var(--fa, var(--cyan)) 45%, var(--cyan-soft)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ================================================================== Hintergrund-Deko (nur Desktop)
   Weiße Bereiche bekommen abwechselnd links/rechts einen Farbschimmer, einen feinen Ring
   und ein auslaufendes Punktraster. Rein dekorativ, hinter dem Inhalt. */

@media (min-width: 1100px) {
  .page-hero,
  main > .section:not(.section--mist):not(.section--navy):not(.tech-marquee),
  main > .section--mist {
    --deco-a: rgba(0, 159, 227, .14);
    --deco-b: rgba(124, 92, 255, .10);
    --deco-ring: rgba(0, 159, 227, .16);
    --deco-dot: rgba(0, 56, 102, .16);
    position: relative;
    isolation: isolate;
    overflow: clip;
  }
  main > .section:nth-child(3n+1) { --deco-a: rgba(79, 70, 229, .11); --deco-b: rgba(0, 159, 227, .10); --deco-ring: rgba(79, 70, 229, .14); }
  main > .section:nth-child(3n+2) { --deco-a: rgba(13, 148, 136, .11); --deco-b: rgba(47, 124, 246, .09); --deco-ring: rgba(13, 148, 136, .15); }

  .page-hero::before,
  main > .section:not(.section--mist):not(.section--navy):not(.tech-marquee)::before,
  .page-hero::after,
  main > .section:not(.section--mist):not(.section--navy):not(.tech-marquee)::after,
  main > .section--mist::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
  }

  /* Farbschimmer + Ring */
  main > .section:not(.section--mist):not(.section--navy):not(.tech-marquee)::before {
    top: 8%;
    right: -220px;
    width: 640px;
    height: 640px;
    background:
      radial-gradient(circle, transparent 54.6%, var(--deco-ring) 55%, var(--deco-ring) 55.3%, transparent 55.7%),
      radial-gradient(circle, transparent 69.6%, color-mix(in srgb, var(--deco-ring) 50%, transparent) 70%, transparent 70.4%),
      radial-gradient(closest-side at 45% 45%, var(--deco-a), transparent),
      radial-gradient(closest-side at 62% 64%, var(--deco-b), transparent 80%);
  }
  /* Punktraster, weich auslaufend */
  main > .section:not(.section--mist):not(.section--navy):not(.tech-marquee)::after {
    bottom: 6%;
    left: -40px;
    width: 360px;
    height: 300px;
    background-image: radial-gradient(circle, var(--deco-dot) 1.3px, transparent 1.8px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent);
    mask-image: radial-gradient(closest-side, #000 20%, transparent);
  }
  /* Jeder zweite Bereich gespiegelt */
  main > .section:nth-child(even):not(.section--mist):not(.section--navy):not(.tech-marquee)::before { right: auto; left: -220px; top: auto; bottom: 4%; }
  main > .section:nth-child(even):not(.section--mist):not(.section--navy):not(.tech-marquee)::after { left: auto; right: -40px; bottom: auto; top: 8%; }

  /* Graue Bereiche: nur ein feines Punktraster in der Ecke */
  main > .section--mist::after {
    top: 0;
    right: 0;
    width: 420px;
    height: 340px;
    background-image: radial-gradient(circle, rgba(0, 56, 102, .13) 1.3px, transparent 1.8px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(farthest-side at 100% 0%, #000 10%, transparent);
    mask-image: radial-gradient(farthest-side at 100% 0%, #000 10%, transparent);
  }
  main > .section--mist:nth-child(even)::after {
    right: auto;
    left: 0;
    -webkit-mask-image: radial-gradient(farthest-side at 0% 0%, #000 10%, transparent);
    mask-image: radial-gradient(farthest-side at 0% 0%, #000 10%, transparent);
  }

  /* Seitenkopf: Farbwolke und Punktraster wie auf der Startseite */
  .page-hero::before {
    top: -160px;
    left: 50%;
    width: min(1300px, 100vw);
    height: 760px;
    background:
      radial-gradient(closest-side at 28% 40%, rgba(0, 159, 227, .18), transparent),
      radial-gradient(closest-side at 74% 46%, rgba(124, 92, 255, .12), transparent),
      radial-gradient(closest-side at 52% 78%, rgba(127, 208, 243, .16), transparent);
    filter: blur(24px);
    transform: translateX(-50%);
  }
  .page-hero::after {
    inset: 0;
    background:
      radial-gradient(circle at 8% 30%, transparent 159px, rgba(0, 159, 227, .14) 160px, rgba(0, 159, 227, .14) 161px, transparent 162px),
      radial-gradient(circle at 93% 72%, transparent 119px, rgba(124, 92, 255, .14) 120px, rgba(124, 92, 255, .14) 121px, transparent 122px),
      radial-gradient(circle, rgba(0, 56, 102, .12) 1.3px, transparent 1.8px) 0 0 / 24px 24px;
    -webkit-mask-image: radial-gradient(70% 90% at 50% 40%, transparent 35%, #000 75%);
    mask-image: radial-gradient(70% 90% at 50% 40%, transparent 35%, #000 75%);
  }
}

@media (min-width: 1100px) and (prefers-reduced-motion: no-preference) {
  main > .section:not(.section--mist):not(.section--navy):not(.tech-marquee)::before { animation: deco-float 22s ease-in-out infinite alternate; }
  main > .section:nth-child(even):not(.section--mist):not(.section--navy):not(.tech-marquee)::before { animation-duration: 26s; animation-direction: alternate-reverse; }
  .page-hero::before { animation: deco-drift 18s ease-in-out infinite alternate; }
}
@keyframes deco-float {
  0%   { translate: 0 0; rotate: 0deg; }
  100% { translate: -30px 40px; rotate: 25deg; }
}
@keyframes deco-drift {
  0%   { translate: -2% 0; }
  100% { translate: 2% 30px; }
}

/* ================================================================== Handy-Feinschliff */
@media (max-width: 680px) {
  /* 3CX-Partnerlogo: im Textfluss statt absolut über dem Text */
  .tile--badge { padding-bottom: 22px; }
  .tile--badge .tile__badge { position: static; width: 44px; height: 44px; margin-top: 4px; }
}
@media (max-width: 480px) {
  /* Lange Wörter wie „Softwareentwicklung“ passen ohne Trennstrich in eine Zeile */
  .page-hero .h1 { font-size: min(2.5rem, 8vw); }
  .site-footer__bottom { justify-content: space-between; }
  .site-footer__bottom > p { flex-basis: 100%; }
  .site-footer__social { gap: 0; margin-right: -10px; }
}