/* ==========================================================================
   Websulting – Startseite
   Aufbau dieser Datei:
     1. Basis und Typografie
     2. Bausteine (Container, Buttons, Links, Icons, Browser-Rahmen …)
     3. Header, Navigation, Mega-Menü, Menü-Dialog
     4. Sektionen in Seitenreihenfolge
     5. Einblend-Animationen und reduzierte Bewegung
   Alle Werte stammen aus variables.css. Mobile Anpassungen: responsive.css.
   ========================================================================== */

/* ==========================================================================
   1. BASIS
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--anchor-offset);
  scrollbar-color: var(--c-ink-3) var(--c-paper);
  interpolate-size: allow-keywords;
}

body {
  margin: 0;
  /* Papiergrund mit Farbwolken in den Logofarben über die ganze Seitenhöhe */
  background-color: var(--c-paper);
  background-image: var(--page-clouds);
  background-size: 100% var(--clouds-tile);
  background-repeat: repeat-y;
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  caret-color: var(--c-orange-strong);
  overflow-x: clip;
}

::selection { background: var(--c-selection); color: var(--c-ink); }

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

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 650;
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
}

h2 { font-size: var(--fs-h2); line-height: 1.04; letter-spacing: -0.016em; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); line-height: 1.3; }

p { margin: 0; text-wrap: pretty; }
p + p { margin-top: 1em; }

ul, ol { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }
button { font: inherit; color: inherit; }

a {
  color: inherit;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
}

:focus-visible {
  outline: 3px solid var(--c-orange);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 12px 20px;
  border-radius: var(--r-pill);
  background: var(--c-ink);
  color: var(--c-white);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ==========================================================================
   2. BAUSTEINE
   ========================================================================== */
.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.section {
  position: relative;
  padding-block: var(--section-y);
}

.section-head {
  max-width: 62rem;
  margin-bottom: clamp(2.5rem, 1.5rem + 4vw, 5rem);
}
.section-head .lead { margin-top: 1.25rem; max-width: var(--measure); }
.section-head--wide { max-width: none; }
.section-head--wide .lead { max-width: var(--measure); }
.section-head--split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  max-width: none;
}
.section-head--split > div { max-width: 52rem; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--c-ink-2);
}

.accent { color: var(--c-orange-text); }

/* ---------- Icons ---------- */
.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 50px;
  padding: 0.8em 1.6em;
  border: 1.5px solid transparent;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--dur-2) ease,
    color var(--dur-2) ease,
    border-color var(--dur-2) ease,
    transform var(--dur-1) var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn .icon { transition: transform var(--dur-2) var(--ease-out); }

.btn--primary { background: var(--c-orange-strong); color: var(--c-white); }
.btn--light { background: var(--c-white); color: var(--c-ink); }
.btn--ghost { border-color: var(--c-line-strong); color: var(--c-ink); }

.btn--sm { min-height: 46px; padding: 0.7em 1.35em; font-size: 0.9375rem; }
.btn--header { min-height: 56px; padding: 0.85em 1.6em; font-size: 1.0938rem; }
.btn--lg { min-height: 58px; padding: 1em 1.9em; font-size: 1.0625rem; }

/* ---------- Textlink mit Pfeil ---------- */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding-block: 0.35em;
  font-weight: 600;
  color: var(--c-ink);
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat;
  transition: color var(--dur-2) ease;
}
.link-arrow .icon { transition: transform var(--dur-2) var(--ease-out); }
.link-arrow--on-dark { color: var(--c-white); }

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--c-orange-hover); }
  .btn--light:hover { background: var(--c-ink); color: var(--c-white); }
  .btn--ghost:hover { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-white); }
  .btn:hover .icon:last-child { transform: translateX(3px); }
  .link-arrow:hover { color: var(--c-orange-hover); }
  .link-arrow--on-dark:hover { color: var(--c-green-bright); }
  .link-arrow:hover .icon:last-child { transform: translateX(4px); }
}

/* ---------- Schlagworte ---------- */
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags li {
  padding: 0.25em 0.8em;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-pill);
  font-size: var(--fs-meta);
  font-weight: 500;
  color: var(--c-ink-2);
}

/* ---------- Haken-Liste ---------- */
.ticks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 2rem;
  margin-top: 2.5rem;
}
.ticks li { display: flex; gap: 0.75rem; font-size: var(--fs-small); color: var(--c-ink-2); line-height: 1.5; }
.ticks .icon { margin-top: 0.15em; color: var(--c-orange-strong); stroke-width: 2.25; }
.ticks strong { display: block; color: var(--c-ink); font-size: 1rem; }

/* ---------- Browser-Rahmen für Projektbilder ---------- */
.browser {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(30, 26, 34, 0.08);
  border-radius: var(--r-frame);
  background: var(--c-white);
  box-shadow: var(--sh-3);
}
.browser__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--c-browser-bar);
}
.browser__bar span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c-browser-dot);
}
.browser__bar em {
  margin-left: 10px;
  padding: 2px 12px;
  border-radius: var(--r-pill);
  background: var(--c-white);
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--c-ink-3);
}
.browser img { width: 100%; }
.browser--mini { border-radius: var(--r-sm); }
.browser--mini .browser__bar { padding: 7px 9px; gap: 4px; }
.browser--mini .browser__bar span { width: 6px; height: 6px; }

/* ---------- CTA-Zeile ---------- */
.cta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-top: clamp(3rem, 2rem + 4vw, 5.5rem);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem) clamp(1.5rem, 1rem + 2.5vw, 3rem);
  border-radius: var(--r-lg);
  background: var(--c-white);
  box-shadow: var(--sh-1);
}
.cta-row__text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: 1.3;
  letter-spacing: -0.015em;
}
.cta-row__text span {
  display: block;
  margin-top: 0.3em;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0;
  color: var(--c-ink-2);
}
.cta-row__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; flex: none; }
.cta-row--plain {
  padding-inline: 0;
  border-top: 1px solid var(--c-line);
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* ==========================================================================
   3. HEADER UND NAVIGATION
   ========================================================================== */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-progress);
  height: 3px;
  pointer-events: none;
}
.scroll-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--c-purple), var(--c-orange) 55%, var(--c-green));
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  height: var(--header-h);
}
/* Beim Scrollen: milchiges Glas, das nach unten weich ausläuft. So entsteht keine
   Kante, und die Farbwolken der Seite laufen sichtbar weiter. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 -26px 0;
  z-index: -1;
  background: linear-gradient(rgba(246, 244, 241, 0.92) 0%, rgba(246, 244, 241, 0.86) 78%, rgba(246, 244, 241, 0) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-mask-image: linear-gradient(#000 0%, #000 78%, transparent 100%);
  mask-image: linear-gradient(#000 0%, #000 78%, transparent 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-3) ease;
}
.site-header[data-scrolled]::before { opacity: 1; }

.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-5);
  width: min(100% - 2 * var(--gutter), var(--container));
  height: 100%;
  margin-inline: auto;
}
.site-header__start { display: flex; align-items: center; gap: 1.1rem; }
.site-header__end { display: flex; align-items: center; justify-content: flex-end; gap: 1.75rem; }

.logo { display: block; flex: none; border-radius: var(--r-sm); }
.logo img { width: auto; height: 78px; }

/* Runder Menü-Knopf: auf dem Desktop ausgeblendet, unter 900px sichtbar (responsive.css) */
.menu-toggle {
  display: none;
  place-items: center;
  width: 54px;
  height: 54px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: rgba(30, 26, 34, 0.06);
  cursor: pointer;
  transition: background-color var(--dur-2) ease, transform var(--dur-1) var(--ease-out);
}
.menu-toggle:active { transform: scale(0.94); }
.menu-toggle__lines { position: relative; width: 22px; height: 9px; }
.menu-toggle__lines::before,
.menu-toggle__lines::after {
  content: "";
  position: absolute;
  left: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--c-ink);
  transition: width var(--dur-2) var(--ease-out);
}
.menu-toggle__lines::before { top: 0; width: 22px; }
.menu-toggle__lines::after { bottom: 0; width: 14px; }

/* Kapsel-Navigation */
.nav-pill__list {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px;
  border-radius: var(--r-pill);
  background: rgba(30, 26, 34, 0.06);
}
.nav-pill__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.66em 1.1em;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  font-size: clamp(1rem, 0.42rem + 0.86vw, 1.2rem);
  font-weight: 500;
  line-height: 1.3;
  color: var(--c-ink);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-2) ease, color var(--dur-2) ease;
}
.nav-pill__link[aria-current="page"],
.nav-pill__link[aria-expanded="true"] {
  background: var(--c-white);
  box-shadow: 0 1px 2px rgba(31, 24, 35, 0.08);
}
.icon--caret { width: 1em; height: 1em; opacity: 0.6; transition: transform var(--dur-2) var(--ease-out); }
[aria-expanded="true"] > .icon--caret { transform: rotate(180deg); }

/* LinkedIn-Knopf im Header */
.header-social {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 50%;
  background: rgba(30, 26, 34, 0.06);
  color: var(--c-ink);
  transition: background-color var(--dur-2) ease, color var(--dur-2) ease, transform var(--dur-1) var(--ease-out);
}
.header-social .icon { width: 22px; height: 22px; }
.header-social:active { transform: scale(0.94); }

.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 1.1875rem;
  font-weight: 600;
  color: var(--c-orange-strong);
  text-decoration: none;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .menu-toggle:hover { background: rgba(30, 26, 34, 0.12); }
  .menu-toggle:hover .menu-toggle__lines::after { width: 22px; }
  .nav-pill__link:hover { background: rgba(255, 255, 255, 0.75); }
  .header-phone:hover { text-decoration: underline; }
  .header-social:hover { background: var(--c-ink); color: var(--c-white); }
}

/* ---------- Mega-Menü ---------- */
.mega {
  position: absolute;
  top: calc(100% - 4px);
  left: 0;
  right: 0;
  width: min(100% - 2 * var(--gutter), 1240px);
  margin-inline: auto;
  padding: 10px;
  border-radius: var(--r-lg);
  background: var(--c-white);
  box-shadow: var(--sh-3);
  transform-origin: 50% 0;
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.mega[hidden] { display: none; }
@starting-style {
  .mega { opacity: 0; transform: translateY(-8px) scale(0.985); }
}
.mega__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.15fr);
  gap: 6px;
}
.mega__col { padding: 1.25rem 1.25rem 1.5rem; }
.mega__title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 1.0625rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.mega__title .icon {
  box-sizing: content-box;
  padding: 9px;
  border-radius: var(--r-sm);
  background: var(--c-orange-tint);
  color: var(--c-orange-hover);
}
.mega__col p { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.5; color: var(--c-ink-2); }
.mega__col ul { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--c-line); }
.mega__col li a {
  display: block;
  padding: 0.35rem 0;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}
.mega__aside {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.5rem;
  border-radius: var(--r-md);
  background: var(--glow-night), var(--c-night);
  color: var(--c-on-night-2);
  font-size: 0.9375rem;
  line-height: 1.5;
  text-decoration: none;
}
.mega__aside-title {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 1.375rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--c-white);
}
.mega__aside-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: auto;
  padding-top: 1rem;
  font-weight: 600;
  color: var(--c-white);
}
@media (hover: hover) and (pointer: fine) {
  .mega__title:hover,
  .mega__col li a:hover { color: var(--c-orange-hover); }
  .mega__aside:hover .mega__aside-cta { color: var(--c-green-bright); }
}

/* ---------- Menü-Dialog ---------- */
.menu {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--c-on-night);
  opacity: 0;
  transition:
    opacity var(--dur-2) ease,
    display var(--dur-3) allow-discrete,
    overlay var(--dur-3) allow-discrete;
}
.menu[open] { opacity: 1; }
.menu::backdrop {
  background: rgba(31, 24, 35, 0);
  transition: background-color var(--dur-3) ease, display var(--dur-3) allow-discrete, overlay var(--dur-3) allow-discrete;
}
.menu[open]::backdrop { background: rgba(31, 24, 35, 0.55); }

.menu__panel {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  width: min(100%, 600px);
  height: 100%;
  padding: 1.25rem clamp(1.25rem, 4vw, 3rem) 2rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--glow-night), var(--c-night);
  transform: translateX(-100%);
  transition: transform var(--dur-3) cubic-bezier(0.32, 0.72, 0, 1);
}
.menu[open] .menu__panel { transform: none; }
@starting-style {
  .menu[open] { opacity: 0; }
  .menu[open]::backdrop { background: rgba(31, 24, 35, 0); }
  .menu[open] .menu__panel { transform: translateX(-100%); }
}

.menu__top { display: flex; align-items: center; justify-content: space-between; }
.menu__top img { width: auto; height: 54px; }
.menu__close {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--c-white);
  cursor: pointer;
  transition: background-color var(--dur-2) ease, transform var(--dur-1) var(--ease-out);
}
.menu__close:active { transform: scale(0.94); }
.menu__close .icon { width: 22px; height: 22px; }

.menu__main a {
  display: block;
  padding: 0.3rem 0;
  font-family: var(--font-display);
  font-weight: 650;
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--c-white);
  text-decoration: none;
}
.menu__groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--c-line-night);
}
.menu__groups h2 {
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-on-night-2);
}
.menu__groups ul { margin-top: 0.75rem; }
.menu__groups a { display: block; padding: 0.3rem 0; font-size: 0.9375rem; color: var(--c-on-night); text-decoration: none; }
.menu__contact { display: grid; gap: 0.75rem; margin-top: auto; }
.menu__contact > a:not(.btn) { display: inline-flex; align-items: center; gap: 0.75rem; font-weight: 600; text-decoration: none; }
.menu__contact .btn { margin-top: 0.75rem; }
.menu :focus-visible { outline-color: var(--c-green-bright); }

@media (hover: hover) and (pointer: fine) {
  .menu__close:hover { background: rgba(255, 255, 255, 0.2); }
  .menu__main a:hover,
  .menu__groups a:hover,
  .menu__contact > a:not(.btn):hover { color: var(--c-orange-glow); }
}

/* ==========================================================================
   4. SEKTIONEN
   ========================================================================== */

/* ---------- 4.1 Hero ---------- */
.hero {
  padding: 0.5rem var(--gutter) 0;
  perspective: 1100px;
  perspective-origin: 50% 0;
}
.hero__card {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(2.5rem, 5.5vh, 3.75rem) clamp(1.25rem, 3vw, 3rem) clamp(1.5rem, 3vh, 2rem);
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--mesh-brand);
  background-color: var(--c-brand-base);
  color: var(--c-white);
  box-shadow: 0 40px 80px -46px rgba(75, 28, 82, 0.7);
  transform-origin: 50% 0;
}

.hero__content {
  position: relative;
  z-index: 2;
  align-self: center;
  max-width: 72rem;
  margin-inline: auto;
  text-align: center;
}
.hero__title {
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: var(--tracking-display);
}
.hero__line { display: block; }
.hero__underlined { position: relative; display: inline-block; }
.hero__stroke {
  position: absolute;
  left: -6%;
  bottom: -0.16em;
  width: 112%;
  height: 0.24em;
  overflow: visible;
}
.hero__stroke path {
  fill: none;
  stroke: var(--c-green-bright);
  stroke-width: 5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.hero__lead {
  max-width: 64ch;
  margin: clamp(1rem, 2.4vh, 1.4rem) auto 0;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.94);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 2rem;
  margin-top: clamp(1.25rem, 3vh, 1.75rem);
}
.hero :focus-visible { outline-color: var(--c-white); }

/* Themen laufen bei einer Person zusammen */
.funnel {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  width: min(100%, 80rem);
  margin: clamp(1.5rem, 3.6vh, 2.25rem) auto 0;
}
.funnel__topics {
  display: grid;
  /* acht gleiche Spalten, die neunte (längster Begriff) 1,55-fach breit; die SVG-Linien sind darauf abgestimmt */
  grid-template-columns: repeat(8, minmax(0, 1fr)) minmax(0, 1.55fr);
  gap: 8px;
  width: 100%;
}
.funnel__topics li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  padding: 0.55em 0.5em;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--r-pill);
  background: var(--c-veil);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}
.funnel__topics .icon { width: 1.1em; height: 1.1em; opacity: 0.9; }
.funnel__lines { width: 100%; height: clamp(40px, 6vh, 60px); overflow: visible; }
.funnel__lines path { fill: none; vector-effect: non-scaling-stroke; }
.funnel__lines--compact { display: none; }
.funnel__base path { stroke: rgba(255, 255, 255, 0.38); stroke-width: 1.25; }
.funnel__flow path {
  stroke: var(--c-white);
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-dasharray: 0.01 50;
  animation: funnel-flow 3.2s linear infinite;
}
.funnel__flow path:nth-child(2n) { animation-delay: -1.1s; }
.funnel__flow path:nth-child(3n) { animation-delay: -2.1s; }
@keyframes funnel-flow {
  from { stroke-dashoffset: 50; }
  to { stroke-dashoffset: 0; }
}

.funnel__person {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: -1px;
  padding: 7px 1.5rem 7px 7px;
  border-radius: var(--r-pill);
  background: var(--c-white);
  color: var(--c-ink);
  text-align: left;
  text-decoration: none;
  box-shadow: 0 18px 40px -14px rgba(31, 12, 36, 0.6);
  transition: transform var(--dur-2) var(--ease-out);
}
.funnel__person img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }
.funnel__person strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 1.0625rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.funnel__person span span { display: block; font-size: 0.8438rem; line-height: 1.3; color: var(--c-ink-2); }
.funnel__person:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) {
  .funnel__person:hover { transform: translateY(-3px); }
}

/* Auftritt des Hero: einmal, beim Laden */
@media (prefers-reduced-motion: no-preference) {
  .hero__line,
  .hero__lead,
  .hero__actions,
  .funnel__topics li,
  .funnel__person {
    animation: hero-rise 900ms var(--ease-out) both;
  }
  .hero__line:nth-child(2) { animation-delay: 90ms; }
  .hero__lead { animation-delay: 200ms; }
  .hero__actions { animation-delay: 290ms; }
  .funnel__topics li { animation-delay: calc(380ms + var(--n, 0) * 45ms); }
  .funnel__topics li:nth-child(2) { --n: 1; }
  .funnel__topics li:nth-child(3) { --n: 2; }
  .funnel__topics li:nth-child(4) { --n: 3; }
  .funnel__topics li:nth-child(5) { --n: 4; }
  .funnel__topics li:nth-child(6) { --n: 5; }
  .funnel__topics li:nth-child(7) { --n: 6; }
  .funnel__topics li:nth-child(8) { --n: 7; }
  .funnel__person { animation-name: hero-settle; animation-delay: 700ms; }
  .hero__stroke path { animation: hero-stroke 800ms var(--ease-in-out) 650ms both; }
  .funnel__base { animation: hero-fade 900ms ease 700ms both; }
  .funnel__flow { animation: hero-fade 900ms ease 1100ms both; }
}
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(0.6em); filter: blur(8px); }
  to { opacity: 1; transform: none; filter: none; }
}
/* Kontaktkarte bleibt deckend (Lesbarkeit), sie rückt nur an ihren Platz */
@keyframes hero-settle {
  from { transform: translateY(16px) scale(0.96); }
  to { transform: none; }
}
@keyframes hero-stroke {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
@keyframes hero-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------- 4.2 Sektionsleiste ---------- */
/* Schwebende Glaskapsel statt durchgehender Leiste: Der Seitenhintergrund läuft
   links und rechts ungebrochen weiter. */
.section-nav {
  position: sticky;
  top: calc(var(--header-h) + 4px);
  z-index: var(--z-subnav);
  margin-top: 1.5rem;
  pointer-events: none;
}
.section-nav ul {
  display: flex;
  align-items: center;
  gap: 2px;
  width: fit-content;
  max-width: calc(100% - 2 * var(--gutter));
  margin-inline: auto;
  padding: 5px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 10px 30px -14px rgba(31, 24, 35, 0.28);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  backdrop-filter: blur(22px) saturate(1.6);
  pointer-events: auto;
}
.section-nav a {
  display: block;
  padding: 0.6em 1.25em;
  border-radius: var(--r-pill);
  font-size: 0.9688rem;
  font-weight: 500;
  color: var(--c-ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-2) ease, color var(--dur-2) ease;
}
.section-nav a[aria-current="true"] { background: var(--c-ink); color: var(--c-white); }
@media (hover: hover) and (pointer: fine) {
  .section-nav a:not([aria-current="true"]):hover { background: rgba(255, 255, 255, 0.85); color: var(--c-ink); }
}

/* ---------- 4.3 Alles aus einer Hand ---------- */
.one-hand__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2.5rem, 6vw, 7rem);
  align-items: center;
}
.one-hand__text h2 { max-width: 13em; }
.one-hand__text .lead { margin-top: 1.5rem; max-width: 36rem; }
.one-hand__text > p:not(.lead) { margin-top: 1rem; max-width: 36rem; color: var(--c-ink-2); }

.thread { margin: 0; }
.thread__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: clamp(1.25rem, 2.5vw, 2.25rem);
  border-radius: var(--r-lg);
  background: var(--c-white);
  box-shadow: var(--sh-2);
}
.bubble {
  max-width: 86%;
  padding: 0.85rem 1.15rem 0.95rem;
  border-radius: var(--r-md);
  line-height: 1.45;
}
.bubble__who {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.2rem;
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--c-ink-3);
}
.bubble__who img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.bubble--you {
  align-self: flex-end;
  border-bottom-right-radius: 6px;
  background: var(--c-night);
  color: var(--c-on-night);
  transform-origin: 100% 100%;
}
.bubble--you .bubble__who { color: var(--c-on-night-2); }
.bubble--them {
  align-self: flex-start;
  border-bottom-left-radius: 6px;
  background: var(--c-paper-2);
  transform-origin: 0 100%;
}
.bubble--ws {
  align-self: stretch;
  max-width: none;
  margin-top: 0.75rem;
  padding: 1.1rem 1.25rem 1.2rem;
  border: 1.5px solid rgba(201, 65, 10, 0.35);
  background: var(--c-orange-tint);
  font-weight: 500;
  transform-origin: 0 100%;
}
.bubble--ws .bubble__who { color: var(--c-orange-hover); font-size: var(--fs-small); margin-bottom: 0.4rem; }
.thread figcaption { margin-top: 1.25rem; padding-inline: 0.5rem; font-size: var(--fs-small); color: var(--c-ink-2); }
.thread figcaption strong { color: var(--c-ink); }

/* ---------- 4.4 Leistungen ---------- */
/* Zwei feste Zeilen: die Aufzählung und darunter allein „Aus einer Hand." */
.services__line { display: block; }
@media (min-width: 1100px) {
  .services__title { font-size: clamp(1.75rem, 2.72vw, 3.25rem); line-height: 1.12; }
  .services__title .services__line:first-child { white-space: nowrap; }
}
.services { padding-top: 0; }
.services__stack { display: grid; gap: 1.5rem; }

.service {
  --service-accent: var(--c-orange-strong);
  --service-line: var(--c-line);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(2rem, 5vw, 6rem);
  align-items: center;
  min-height: 35rem;
  padding: clamp(1.75rem, 1rem + 3.5vw, 4.5rem);
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--c-white);
}
.service h3 { letter-spacing: -0.016em; }
.service__claim {
  margin-top: 0.6rem;
  font-family: var(--font-display);
  font-weight: 550;
  font-size: var(--fs-h4);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--service-accent);
}
.service__text > p:not(.service__claim) { margin-top: 1.25rem; max-width: 56ch; }
.service__topics {
  columns: 2;
  column-gap: 2rem;
  margin-top: 1.75rem;
  border-top: 1px solid var(--service-line);
}
.service__topics li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--service-line);
  font-size: var(--fs-small);
  font-weight: 500;
  break-inside: avoid;
}
.service .link-arrow { margin-top: 1.75rem; }
.service__visual { position: relative; min-width: 0; }

/* Farbwelten der vier Bereiche */
.service--it {
  --service-accent: var(--c-orange-glow);
  --service-line: var(--c-line-night);
  background: var(--glow-night), var(--c-night);
  color: var(--c-on-night);
}
.service--it .link-arrow { color: var(--c-white); }
.service--it :focus-visible { outline-color: var(--c-white); }

.service--cloud {
  --service-accent: var(--c-purple);
  background:
    radial-gradient(42% 60% at 100% 0%, rgba(243, 210, 244, 0.9) 0%, rgba(243, 210, 244, 0) 70%),
    var(--c-white);
  box-shadow: inset 0 0 0 1px var(--c-line);
}

.service--web {
  --service-accent: var(--c-orange-hover);
  --service-line: rgba(173, 55, 7, 0.22);
  background: var(--c-orange-tint);
}

.service--seo {
  --service-accent: var(--c-green-deep);
  --service-line: rgba(76, 102, 8, 0.22);
  background: var(--c-green-tint);
}

@media (hover: hover) and (pointer: fine) {
  .service--it .link-arrow:hover { color: var(--c-green-bright); }
}

/* Netzwerk-Schema */
.netviz { width: 100%; height: auto; overflow: visible; }
.netviz__lines path { fill: none; stroke: rgba(246, 241, 247, 0.3); stroke-width: 1.5; }
.netviz__pulse path {
  fill: none;
  stroke: var(--c-signal);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 0.01 25;
  animation: net-pulse 5s linear infinite;
}
@keyframes net-pulse {
  from { stroke-dashoffset: 25; }
  to { stroke-dashoffset: 0; }
}
.netviz__node rect { fill: var(--c-night-3); stroke: rgba(246, 241, 247, 0.2); }
.netviz__node--accent rect { fill: var(--c-orange-strong); stroke: none; }
.netviz__node use {
  fill: none;
  stroke: var(--c-white);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.netviz text {
  fill: var(--c-on-night-2);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  text-anchor: middle;
}
.netviz .netviz__side { fill: var(--c-on-night); font-size: 14px; font-weight: 600; text-anchor: start; }
.netviz .netviz__side--left { text-anchor: end; }
.netviz .netviz__side--muted { fill: var(--c-on-night-2); font-weight: 500; }

/* Cloud-Schema */
.cloudviz { display: grid; max-width: 31rem; margin-left: auto; }
.cloudviz__apps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.cloudviz__apps li {
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  padding: 1.1rem 0.4rem 1rem;
  border-radius: var(--r-md);
  background: var(--c-purple-tint);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}
.cloudviz__apps .icon { width: 26px; height: 26px; color: var(--c-purple); }
.cloudviz__lines { width: 100%; height: 58px; }
.cloudviz__lines path { fill: none; stroke: rgba(138, 56, 141, 0.45); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.cloudviz__lock {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  justify-self: center;
  padding: 0.7rem 1.4rem;
  border-radius: var(--r-pill);
  background: var(--c-purple);
  color: var(--c-white);
  font-size: var(--fs-small);
  font-weight: 600;
}
.cloudviz__places { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cloudviz__places li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 0.5rem;
  border: 1.5px solid rgba(138, 56, 141, 0.3);
  border-radius: var(--r-pill);
  background: var(--c-white);
  font-size: 0.875rem;
  font-weight: 600;
}
.cloudviz__places .icon { color: var(--c-purple); }

/* Website-Panel: zwei echte Projekte, gerade und gestaffelt */
.webviz {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  max-width: 40rem;
  margin-left: auto;
  padding-bottom: 1.25rem;
}
.webviz .browser { grid-row: 1; margin: 0; box-shadow: 0 2px 6px rgba(120, 44, 6, 0.08), 0 34px 60px -28px rgba(120, 44, 6, 0.5); }
.webviz__back { grid-column: 4 / -1; align-self: start; }
.webviz__front { grid-column: 1 / 10; align-self: end; margin-top: 31%; }
.webviz__chip {
  position: absolute;
  right: 0;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  margin: 0;
  padding: 0.6em 1.1em 0.6em 0.9em;
  border-radius: var(--r-pill);
  background: var(--c-ink);
  color: var(--c-white);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  box-shadow: var(--sh-2);
}
.webviz__chip .icon { color: var(--c-orange-glow); }

/* Schema einer lokalen Suche */
.serpviz {
  display: grid;
  gap: 10px;
  max-width: 30rem;
  margin-left: auto;
  padding: clamp(1rem, 2vw, 1.5rem);
  border-radius: var(--r-lg);
  background: var(--c-white);
  box-shadow: var(--sh-2);
}
.serpviz__query {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 4px;
  padding: 0.8rem 1.15rem;
  border: 1.5px solid var(--c-line-strong);
  border-radius: var(--r-pill);
  font-weight: 500;
}
.serpviz__query .icon { color: var(--c-ink-3); }
.serpviz__query span::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1.1em;
  margin-left: 3px;
  vertical-align: text-bottom;
  background: var(--c-green-deep);
  animation: caret 1.1s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }
.serpviz__result {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem;
  border-radius: var(--r-md);
}
.serpviz__result > div:last-child { flex: 1; min-width: 0; }
.serpviz__result--top { background: var(--c-green-tint); box-shadow: inset 0 0 0 1.5px rgba(76, 102, 8, 0.28); }
.serpviz__result strong { display: block; font-family: var(--font-display); font-size: 1.125rem; line-height: 1.25; }
.serpviz__result strong + span { display: block; font-size: 0.8438rem; color: var(--c-ink-2); }
.serpviz__pin {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: var(--c-paper-2);
  color: var(--c-ink-3);
}
.serpviz__result--top .serpviz__pin { background: var(--c-green-deep); color: var(--c-white); }
.serpviz__chips { display: flex; gap: 6px; margin-top: 0.6rem; }
.serpviz__chips span {
  padding: 0.2em 0.8em;
  border: 1px solid rgba(76, 102, 8, 0.4);
  border-radius: var(--r-pill);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--c-green-deep);
}
.serpviz__result i { display: block; height: 9px; border-radius: 5px; background: var(--c-paper-2); }
.serpviz__result i:first-child { width: 62%; }
.serpviz__result i + i { width: 40%; margin-top: 8px; }
.serpviz__note { margin-top: 4px; font-size: 0.75rem; color: var(--c-ink-3); text-align: center; }

/* Weitere Kompetenzen */
.more {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  gap: var(--sp-6);
  align-items: baseline;
  margin-top: clamp(3rem, 2rem + 4vw, 5.5rem);
}
.more__title { font-size: var(--fs-h4); font-weight: 600; color: var(--c-ink-2); letter-spacing: -0.01em; }
.more__list { display: flex; flex-wrap: wrap; gap: 0.5rem 0; }
.more__list li {
  font-family: var(--font-display);
  font-weight: 550;
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.875rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.more__list li:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 0.3em;
  height: 0.3em;
  margin: 0 0.6em 0.12em;
  border-radius: 50%;
  background: var(--c-orange);
  vertical-align: middle;
}
.more__list a { text-decoration-color: var(--c-orange); }

/* ---------- 4.5 Der entscheidende Unterschied ---------- */
.difference {
  background: var(--glow-night), var(--c-night);
  color: var(--c-on-night);
}
.difference :focus-visible { outline-color: var(--c-green-bright); }
.difference__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 7rem);
  align-items: center;
}
.difference h2 { color: var(--c-white); }
.difference .lead { margin-top: 1.5rem; color: var(--c-on-night-2); max-width: 38rem; }

.scenarios { margin-top: 2.75rem; }
.scenarios__label { font-size: var(--fs-small); font-weight: 600; color: var(--c-on-night-2); }
.scenarios__buttons { display: grid; gap: 8px; margin-top: 0.9rem; }
.scenario-btn {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  min-height: 54px;
  padding: 0.8rem 1.25rem;
  border: 1.5px solid var(--c-line-night);
  border-radius: var(--r-md);
  background: none;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  color: var(--c-on-night);
  cursor: pointer;
  transition: background-color var(--dur-2) ease, border-color var(--dur-2) ease, color var(--dur-2) ease, transform var(--dur-1) var(--ease-out);
}
.scenario-btn::before {
  content: "";
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px currentColor;
  opacity: 0.6;
}
.scenario-btn:active { transform: scale(0.985); }
.scenario-btn[aria-pressed="true"] { border-color: transparent; background: var(--c-on-night); color: var(--c-ink); font-weight: 600; }
.scenario-btn[aria-pressed="true"]::before { background: var(--c-orange); box-shadow: none; opacity: 1; }

.scenarios__panels { margin-top: 1.5rem; }
.scenario-panel h3 { font-size: var(--fs-h4); color: var(--c-white); }
.scenario-panel p { margin-top: 0.5rem; font-size: var(--fs-lead); line-height: 1.5; color: var(--c-on-night); max-width: 36rem; }
.scenario-panel + .scenario-panel { margin-top: 1.5rem; }
.js .scenario-panel h3 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.js .scenario-panel p { margin-top: 0; }
.scenario-panel[hidden] { display: none; }

/* Systemdiagramm */
.system {
  position: relative;
  width: min(100%, 42rem);
  aspect-ratio: 1;
  margin: 0 auto;
}
.system__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.system__ring { fill: none; stroke: var(--c-line-night); stroke-width: 1; stroke-dasharray: 2 7; }
.system__ring--inner { stroke-dasharray: none; stroke: rgba(246, 241, 247, 0.07); }
.system__lines line {
  stroke: rgba(246, 241, 247, 0.24);
  stroke-width: 1.5;
  transition: stroke var(--dur-3) ease, stroke-width var(--dur-3) ease, opacity var(--dur-3) ease;
}
.system__lines line.is-active { stroke: var(--c-signal); stroke-width: 3; }
.system__lines line.is-dim { opacity: 0.4; }

.system__hub {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 29%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c-white);
  box-shadow: 0 0 0 12px rgba(255, 255, 255, 0.06), 0 30px 60px -20px rgba(0, 0, 0, 0.6);
  translate: -50% -50%;
}
.system__hub img { width: 66%; }

.system__nodes li {
  position: absolute;
  top: var(--y);
  left: var(--x);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.05rem;
  border: 1.5px solid var(--c-line-night);
  border-radius: var(--r-pill);
  background: var(--c-night-3);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  translate: -50% -50%;
  transition:
    background-color var(--dur-3) ease,
    border-color var(--dur-3) ease,
    opacity var(--dur-3) ease,
    scale var(--dur-3) var(--ease-out);
}
.system__nodes li.is-active { border-color: transparent; background: var(--c-orange-strong); color: var(--c-white); scale: 1.07; }
.system__nodes li.is-dim { opacity: 0.5; }

/* ---------- 4.6 Persönliche Betreuung ---------- */
.personal { background: var(--c-white-veil); }
.personal__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
}
.personal__photo { position: relative; margin: 0 0 2.5rem; }
.personal__photo img {
  width: 100%;
  aspect-ratio: 1 / 1.08;
  object-fit: cover;
  object-position: 50% 18%;
  border-radius: var(--r-xl);
  background: #000;
}
.personal__blocks {
  position: absolute;
  right: -7%;
  bottom: -2.5rem;
  left: 9%;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  box-shadow: var(--sh-2);
  border-radius: var(--r-md);
  overflow: hidden;
}
.personal__block { display: flex; align-items: center; padding: clamp(1rem, 2vw, 1.6rem); }
.personal__block--accent {
  background: var(--c-orange-tint);
  color: var(--c-ink);
  font-family: var(--font-display);
  font-weight: 650;
  font-size: clamp(1.0625rem, 0.9rem + 0.6vw, 1.375rem);
  line-height: 1.3;
  letter-spacing: -0.015em;
}
.personal__block--plain {
  display: block;
  background: var(--c-white);
  color: var(--c-ink-2);
  font-size: var(--fs-small);
  line-height: 1.5;
}
.personal__block--plain strong { color: var(--c-ink); }

.personal__quote { margin: 2rem 0; }
.personal__quote p {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.1875rem, 1rem + 0.75vw, 1.5625rem);
  line-height: 1.42;
  letter-spacing: -0.012em;
}
.personal__quote footer {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.25rem;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-ink-2);
}
.personal__quote footer::before { content: ""; width: 2.5rem; height: 2px; background: var(--c-orange); }
.personal__text > p { max-width: 38rem; color: var(--c-ink-2); }
.personal__points { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.75rem; }
.personal__points li {
  padding: 0.45em 1.1em;
  border: 1.5px solid var(--c-line-strong);
  border-radius: var(--r-pill);
  font-size: 0.9375rem;
  font-weight: 500;
}
.personal__contact { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 2.25rem; }

/* ---------- 4.7 Referenzen ---------- */
.projects__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(2.5rem, 4vw, 4.5rem) clamp(1.25rem, 2.5vw, 2.5rem);
  align-items: start;
}
.project { position: relative; grid-column: span 6; }
.project--wide { grid-column: span 7; }
.project--narrow { grid-column: span 5; }
.project--narrow:nth-child(2) { margin-top: clamp(2rem, 6vw, 6rem); }

.project__link { position: relative; display: block; text-decoration: none; border-radius: var(--r-lg); }
.project__stage {
  padding: clamp(1.25rem, 3.4vw, 3.25rem);
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--c-paper-2);
}
.project__stage .browser {
  box-shadow: 0 30px 60px -28px rgba(31, 24, 35, 0.55);
  transition: transform var(--dur-4) var(--ease-out);
}
.project--half .browser img { aspect-ratio: 16 / 11; object-fit: cover; object-position: 50% 0; }

.project--tint-peach .project__stage { background: var(--c-stage-peach); }
.project--tint-night .project__stage { background: var(--glow-night), var(--c-night); }
.project--tint-lilac .project__stage { background: var(--c-stage-lilac); }
.project--tint-orange .project__stage { background: var(--c-stage-orange); }
.project--tint-green .project__stage { background: var(--c-stage-green); }
.project--tint-paper .project__stage { background: var(--c-stage-paper); }

.project__meta { display: grid; gap: 0.6rem; padding: 1.4rem 0.25rem 0; }
.project__meta h3 { font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem); line-height: 1.3; }
.project__meta p { max-width: 50ch; color: var(--c-ink-2); }
.project__meta .tags { margin-top: 0.4rem; }

.project__arrow {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--c-white);
  color: var(--c-ink);
  box-shadow: var(--sh-1);
  transition: opacity var(--dur-2) ease, transform var(--dur-2) var(--ease-out), background-color var(--dur-2) ease, color var(--dur-2) ease;
}
@media (hover: hover) and (pointer: fine) {
  .project__arrow { opacity: 0; transform: translate(-8px, 8px) scale(0.92); }
  .project__link:hover .project__arrow,
  .project__link:focus-visible .project__arrow { opacity: 1; transform: none; background: var(--c-orange-strong); color: var(--c-white); }
  .project__link:hover .browser { transform: translateY(-8px) scale(1.018); }
  .project__link:hover h3 { color: var(--c-orange-hover); }
}

/* Kundenlogos */
.clients { margin-top: clamp(4rem, 3rem + 5vw, 8rem); }
.clients__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 3rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
.clients__head h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.clients__head p { color: var(--c-ink-2); }
/* Alle Kunden, farbig. Flex statt Raster, damit die letzte Reihe mittig steht. */
.clients__grid {
  --per-row: 8;
  --gap: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
  margin-bottom: 1.75rem;
}
.clients__grid li {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 calc((100% - (var(--per-row) - 1) * var(--gap)) / var(--per-row));
  padding: 1rem 0.9rem;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--c-white);
  box-shadow: 0 1px 2px rgba(31, 24, 35, 0.05);
  transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) ease;
}
.clients__grid img { width: 100%; max-width: 150px; }
/* Glanz, der beim Überfahren einmal über die Kachel läuft */
.clients__grid li::after {
  content: "";
  position: absolute;
  inset: -20% -60%;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.9) 50%, transparent 58%);
  transform: translateX(-70%);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .clients__grid li:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(31, 24, 35, 0.06), 0 18px 30px -16px rgba(31, 24, 35, 0.35); }
  .clients__grid li:hover::after { transform: translateX(70%); transition: transform 750ms var(--ease-out); }
}

/* ---------- 4.8 Warum Websulting ---------- */
.why { background: var(--c-white-veil); }
.why__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 6vw, 7rem);
  align-items: start;
}
.why__intro { position: sticky; top: calc(var(--anchor-offset) + 1.5rem); }
.why__intro .lead { margin: 1.5rem 0 2.25rem; max-width: 30rem; }
.why__list { margin: 0; }
.why__row {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 1rem 2.5rem;
  padding: clamp(1.4rem, 2.4vw, 2.1rem) 0;
  border-top: 1px solid var(--c-line);
}
.why__row:last-child { border-bottom: 1px solid var(--c-line); }
.why__row dt {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.why__row dd { margin: 0; color: var(--c-ink-2); }

/* ---------- 4.9 Zusammenarbeit ---------- */
.process { padding-block: clamp(1rem, 3vw, 3rem) clamp(2rem, 4vw, 4rem); background: linear-gradient(var(--c-white-veil) 0 38%, transparent 38%); }
.process__panel {
  padding: clamp(2rem, 1rem + 5vw, 5.5rem);
  border-radius: var(--r-xl);
  background:
    radial-gradient(40% 70% at 100% 0%, rgba(255, 199, 154, 0.9) 0%, rgba(255, 199, 154, 0) 70%),
    var(--c-orange-tint);
}
.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
}
.steps::before,
.steps::after {
  content: "";
  position: absolute;
  top: 29px;
  right: calc(25% - 58px);
  left: 29px;
  height: 2px;
  background: rgba(201, 65, 10, 0.22);
}
.steps::after {
  background: var(--c-orange-strong);
  transform-origin: 0 50%;
}
.step { position: relative; z-index: 1; }
.step__num {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border: 2px solid var(--c-orange-strong);
  border-radius: 50%;
  background: var(--c-white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.375rem;
  color: var(--c-orange-strong);
}
.step h3 { margin-top: 1.5rem; font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5625rem); line-height: 1.3; }
.step p { margin-top: 0.6rem; color: var(--c-ink-warm); max-width: 30ch; }
.process__panel .lead { color: var(--c-ink-warm); }

/* ---------- 4.10 Branchen ---------- */
.industries__list { border-top: 1px solid var(--c-line-strong); }
.industry {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(0, 0.9fr);
  gap: 0.75rem clamp(1.5rem, 4vw, 4rem);
  align-items: baseline;
  padding: clamp(1.25rem, 2vw, 1.75rem) 0;
  border-bottom: 1px solid var(--c-line);
}
.industry h3 {
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  line-height: 1.3;
  transition: color var(--dur-2) ease, translate var(--dur-3) var(--ease-out);
}
.industry p { margin: 0; color: var(--c-ink-2); }
.industry .industry__clients { font-size: var(--fs-small); color: var(--c-ink-3); text-align: right; }
@media (hover: hover) and (pointer: fine) {
  .industry:hover h3 { color: var(--c-orange-hover); translate: 8px 0; }
}

/* ---------- 4.11 Region und Einblicke ---------- */
.region { background: var(--c-white-veil); }
.region__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2.5rem, 6vw, 7rem);
  align-items: center;
}
.region__text .lead { margin-top: 1.5rem; max-width: 36rem; }
.region__text > p:not(.lead) { margin-top: 1rem; max-width: 36rem; color: var(--c-ink-2); }
.region__address {
  display: flex;
  gap: 0.9rem;
  margin-top: 2rem;
  font-weight: 500;
  line-height: 1.5;
}
.region__address .icon { width: 1.5rem; height: 1.5rem; margin-top: 0.1em; color: var(--c-orange-strong); }

.map { margin: 0; overflow: hidden; border-radius: var(--r-xl); background: var(--c-paper); }
.map svg { width: 100%; height: auto; }
.map__rings circle { fill: none; stroke: var(--c-line-strong); stroke-width: 1; stroke-dasharray: 2 7; }
.map__routes path { fill: none; stroke: var(--c-orange); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1 7; }
.map__city circle { fill: var(--c-ink); }
.map__city text { fill: var(--c-ink); font-family: var(--font-display); font-size: 20px; font-weight: 650; letter-spacing: -0.01em; }
.map__city--minor circle { fill: var(--c-ink-3); }
.map__city--minor text { fill: var(--c-ink-3); font-family: var(--font-body); font-size: 14px; font-weight: 500; letter-spacing: 0; }
.map__home circle { fill: var(--c-orange); }
.map__home .map__pulse { opacity: 0.25; transform-box: fill-box; transform-origin: center; animation: map-pulse 2.8s var(--ease-out) infinite; }
.map__home text { fill: var(--c-orange-strong); font-family: var(--font-display); font-size: 24px; font-weight: 700; text-anchor: middle; letter-spacing: -0.02em; }
@keyframes map-pulse {
  from { transform: scale(0.8); opacity: 0.4; }
  to { transform: scale(2.6); opacity: 0; }
}

.news { margin-top: clamp(4rem, 3rem + 5vw, 8rem); }
.news__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; margin-bottom: 2rem; }
.news__head h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.news__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: clamp(1.5rem, 3vw, 3rem) clamp(1.5rem, 4vw, 4.5rem);
  align-items: start;
}
.post a { display: block; text-decoration: none; border-radius: var(--r-lg); }
.post__img { overflow: hidden; border-radius: var(--r-lg); background: var(--c-paper-2); }
.post__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform var(--dur-4) var(--ease-out); }
.post__img--stage { display: flex; align-items: flex-end; padding: 9% 9% 0; background: var(--c-stage-peach); }
.post__img--stage .browser { width: 100%; border-radius: var(--r-sm) var(--r-sm) 0 0; box-shadow: 0 14px 30px -14px rgba(31, 24, 35, 0.5); }
.post__img--stage img { aspect-ratio: 4 / 2.6; object-position: 0 0; }
.post h4 { transition: color var(--dur-2) ease; }
.post__meta { display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; margin-top: 0.5rem; font-size: var(--fs-meta); font-weight: 600; }
.post__meta span { color: var(--c-orange-hover); }
.post__meta time { color: var(--c-ink-3); font-weight: 500; }
.post__body > p:last-child { margin-top: 0.6rem; font-size: var(--fs-small); color: var(--c-ink-2); max-width: 46ch; }

/* großer Beitrag links, zwei Zeilen rechts */
.post--lead { grid-row: span 2; }
.post--lead .post__img img { aspect-ratio: 16 / 10.5; }
.post--lead .post__body { padding-top: 1.4rem; }
.post--lead h4 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.post--row a { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(1rem, 2vw, 1.75rem); align-items: center; }
.post--row + .post--row { padding-top: clamp(1.5rem, 3vw, 3rem); border-top: 1px solid var(--c-line); }
@media (hover: hover) and (pointer: fine) {
  .post a:hover .post__img > img { transform: scale(1.045); }
  .post a:hover h4 { color: var(--c-orange-hover); }
}

/* ---------- 4.12 FAQ ---------- */
.faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(2.5rem, 6vw, 7rem);
  align-items: start;
}
.faq__intro { position: sticky; top: calc(var(--anchor-offset) + 1.5rem); }
.faq__intro .lead { margin: 1.25rem 0 1.5rem; max-width: 24rem; }
.faq__list { border-bottom: 1px solid var(--c-line-strong); }
.faq__list details { border-top: 1px solid var(--c-line-strong); }
.faq__list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.4rem 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: 1.3;
  letter-spacing: -0.015em;
  list-style: none;
  cursor: pointer;
}
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary span { min-width: 0; hyphens: manual; overflow-wrap: break-word; text-wrap: pretty; }
.faq__list summary .icon {
  box-sizing: content-box;
  width: 20px;
  height: 20px;
  padding: 11px;
  border-radius: 50%;
  background: var(--c-paper-2);
  transition: rotate var(--dur-3) var(--ease-out), background-color var(--dur-2) ease, color var(--dur-2) ease;
}
.faq__list details[open] summary .icon { rotate: 45deg; background: var(--c-orange-strong); color: var(--c-white); }
.faq__answer { padding: 0 4.5rem 1.75rem 0; color: var(--c-ink-2); max-width: 46rem; }
.faq__list details::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size var(--dur-3) var(--ease-out), content-visibility var(--dur-3) allow-discrete;
}
.faq__list details[open]::details-content { block-size: auto; }
@media (hover: hover) and (pointer: fine) {
  .faq__list summary:hover { color: var(--c-orange-hover); }
}

/* ---------- 4.13 Kontakt ---------- */
.contact { padding-top: 0; }
.contact__card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 6rem);
  align-items: start;
  padding: clamp(1.5rem, 1rem + 4.5vw, 5.5rem);
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--mesh-brand);
  background-color: var(--c-brand-base);
  color: var(--c-white);
}
.contact__text { position: relative; z-index: 1; }
.contact__text .lead { margin-top: 1.5rem; max-width: 34rem; color: rgba(255, 255, 255, 0.94); }
.contact__text :focus-visible { outline-color: var(--c-white); }
.contact__details { display: grid; gap: 1.25rem; margin: 2.5rem 0; }
.contact__details li { display: flex; gap: 1rem; align-items: flex-start; line-height: 1.45; }
.contact__details .icon {
  box-sizing: content-box;
  width: 20px;
  height: 20px;
  padding: 12px;
  border-radius: 50%;
  background: var(--c-veil);
}
.contact__label { display: block; font-size: var(--fs-meta); font-weight: 600; opacity: 0.88; }
.contact__details a { font-size: 1.1875rem; font-weight: 600; text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .contact__details a:hover { text-decoration: underline; }
}

/* Formular */
.form {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1.1rem;
  padding: clamp(1.25rem, 1rem + 2vw, 2.75rem);
  border-radius: var(--r-lg);
  background: var(--c-white);
  color: var(--c-ink);
  box-shadow: var(--sh-3);
}
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; align-items: start; }
.field { display: grid; gap: 0.4rem; align-content: start; }
.field label { font-size: var(--fs-small); font-weight: 600; }
.field label span { color: var(--c-orange-strong); }
.field input:not([type="checkbox"]),
.field textarea,
.field select {
  width: 100%;
  min-height: 50px;
  padding: 0.75rem 0.95rem;
  border: 1.5px solid var(--c-line-strong);
  border-radius: var(--r-sm);
  background: var(--c-field);
  font: inherit;
  font-size: 1rem;
  color: var(--c-ink);
  transition: border-color var(--dur-2) ease, box-shadow var(--dur-2) ease, background-color var(--dur-2) ease;
}
.field textarea { min-height: 7.5rem; resize: vertical; line-height: 1.5; }
.field input:not([type="checkbox"]):focus-visible,
.field textarea:focus-visible,
.field select:focus-visible {
  outline: none;
  border-color: var(--c-orange-strong);
  background: var(--c-white);
  box-shadow: 0 0 0 4px rgba(233, 84, 13, 0.2);
}
.field input[aria-invalid="true"]:not([type="checkbox"]),
.field textarea[aria-invalid="true"],
.field select[aria-invalid="true"] { border-color: var(--c-error); background: var(--c-error-tint); }
.field--check input[aria-invalid="true"] { outline: 2px solid var(--c-error); outline-offset: 2px; }
.field__error { font-size: 0.875rem; font-weight: 500; color: var(--c-error); }
.field__error[hidden] { display: none; }

.select { position: relative; }
.select select { appearance: none; padding-right: 2.75rem; cursor: pointer; }
.select .icon { position: absolute; top: 50%; right: 1rem; translate: 0 -50%; pointer-events: none; color: var(--c-ink-2); }

.field--check { grid-template-columns: auto 1fr; gap: 0.3rem 0.8rem; align-items: start; }
.field--check input { width: 22px; height: 22px; margin: 0.15rem 0 0; accent-color: var(--c-orange-strong); cursor: pointer; }
.field--check label { font-weight: 400; line-height: 1.5; color: var(--c-ink-2); }
.field--check a { color: var(--c-ink); font-weight: 600; }
.field--check .field__error { grid-column: 2; }

.form__submit { width: 100%; margin-top: 0.4rem; }
.form__hint { font-size: var(--fs-meta); line-height: 1.5; color: var(--c-ink-3); }
.form__status:empty { display: none; }
.form__status {
  padding: 0.9rem 1.1rem;
  border-radius: var(--r-sm);
  background: var(--c-green-tint);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--c-green-deep);
}
.form__status[data-state="error"] { background: #fbe9e7; color: #8c1d18; }

/* ---------- 4.14 Footer ---------- */
.site-footer {
  padding: var(--section-y) 0 2rem;
  background: var(--glow-night), var(--c-night);
  color: var(--c-on-night);
}
.site-footer :focus-visible { outline-color: var(--c-green-bright); }
.site-footer__claim {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 1.2rem + 6vw, 6rem);
  line-height: 0.98;
  letter-spacing: var(--tracking-display);
  color: var(--c-white);
}
.site-footer__claim .hero__stroke path { animation: none; }
.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 5rem);
  margin-top: clamp(3rem, 2rem + 5vw, 7rem);
  padding-top: clamp(2.5rem, 4vw, 4rem);
  border-top: 1px solid var(--c-line-night);
}
.site-footer__brand img { width: auto; height: 68px; }
.site-footer__brand p { margin-top: 1.5rem; max-width: 34ch; font-size: var(--fs-small); color: var(--c-on-night-2); }
.site-footer h2 {
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-on-night-2);
}
.site-footer__grid ul:not(.social) { margin-top: 1rem; }
.site-footer__grid li a { display: inline-block; padding: 0.3rem 0; text-decoration: none; }
.site-footer address { margin-top: 1rem; line-height: 1.6; color: var(--c-on-night-2); }
.social { display: flex; gap: 10px; margin-top: 1.75rem; }
.social a {
  display: grid !important;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0 !important;
  border: 1.5px solid var(--c-line-night);
  border-radius: 50%;
  transition: background-color var(--dur-2) ease, color var(--dur-2) ease, border-color var(--dur-2) ease;
}
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: clamp(2.5rem, 4vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--c-line-night);
  font-size: var(--fs-small);
  color: var(--c-on-night-2);
}
.site-footer__bottom ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; }
.site-footer__bottom a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .site-footer__grid li a:hover,
  .site-footer__bottom a:hover { color: var(--c-orange-glow); }
  .social a:hover { background: var(--c-white); border-color: var(--c-white); color: var(--c-ink); }
}

/* ==========================================================================
   5. EINBLENDEN BEIM SCROLLEN
   Standard ist sichtbar. main.js setzt .is-waiting nur auf Elemente, die beim
   Laden noch unterhalb des Bildschirms liegen, und entfernt die Klasse, sobald
   sie ins Bild kommen.
   ========================================================================== */
[data-reveal] {
  transition:
    opacity 700ms ease,
    transform 800ms var(--ease-out);
  transition-delay: calc(var(--reveal-i, 0) * 80ms);
}
[data-reveal].is-waiting { opacity: 0; transform: translateY(26px); }
.bubble[data-reveal].is-waiting { transform: scale(0.92); }
.why__row[data-reveal].is-waiting { transform: translateX(-18px); }

.steps::after { transform: scaleX(1); transition: transform 1600ms var(--ease-in-out); }
.steps.is-waiting::after { transform: scaleX(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  .funnel__flow,
  .netviz__pulse,
  .map__pulse { display: none; }
  [data-reveal].is-waiting { opacity: 1; transform: none; }
  .steps.is-waiting::after { transform: scaleX(1); }
}