/* ==========================================================================
   sections.css — alles ab Sektion 04 (Leistungen) bis Footer.
   Bewusst getrennt von style.css (Hero-Choreografie bleibt unangetastet).
   Reused Tokens: --ink, --muted, --lila, --blau, --font aus style.css.
   ========================================================================== */

/* Cross-Document View Transitions: eine Zeile deckt alle 8 Seiten ab, weil sections.css
   ueberall geladen wird. Chrome 126+/Safari 18+ -> weicher Seitenuebergang statt hartem
   Reload; ueberall sonst stiller No-Op, kein Fallback noetig. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  /* @view-transition selbst kennt kein prefers-reduced-motion -- der Default-Crossfade
     laeuft sonst trotz reduzierter Bewegung weiter. */
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ---------- Seiten-Content-Block: schiebt sich ueber Video + Overlays ---------- */
.page-content {
  position: relative;
  z-index: 30;
  background: var(--bg);
}
.hero-sentinel { position: absolute; top: 0; height: 1px; width: 1px; }

.section {
  padding: clamp(72px, 12vw, 140px) clamp(20px, 6vw, 60px);
  max-width: 1180px;
  margin: 0 auto;
}
.section--surface { background: var(--surface); }
.section-head { max-width: 640px; margin-bottom: clamp(40px, 6vw, 64px); }
.section-head .label { display: block; margin-bottom: 14px; }
.section-head .headline { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; }
.section-intro { margin-top: 16px; font-size: .98rem; line-height: 1.6; color: var(--muted); max-width: 58ch; }
.section-intro a { color: var(--blau); font-weight: 600; }

/* Header-Pill (.nav-pill, .nav-cta, .nav-overlay, past-hero/nav-collapsed-States) lebt in style.css */

/* ---------- "Mehr erfahren"-Link: Section auf index.html -> passende Tiefenseite ---------- */
.section-more {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 28px;
  font-weight: 600; font-size: .95rem; color: var(--blau); text-decoration: none;
}
.section-more svg { width: 16px; height: 16px; transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
@media (hover: hover) {
  .section-more:hover svg { transform: translateX(4px); }
}

/* ---------- Scroll-Reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .75s cubic-bezier(.16, 1, .3, 1), transform .75s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--i, 0) * 95ms);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* .section-head selbst animiert nicht mehr (sonst Doppelanimation mit seinen Kindern) --
   dient nur noch als IO-Trigger. Hoehere Spezifitaet als .reveal ueberschreibt es. */
.page-content .section-head.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

/* ---------- Sektions-Kopf: Label -> Headline-Teil 1 -> Headline-Teil 2 -> Intro ---------- */
.section-head .label,
.section-head .section-intro,
.section-head .contact-badge {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1);
}
.section-head .contact-badge { transition-delay: 0ms; }
.section-head .label { transition-delay: 0ms; }
.section-head .section-intro { transition-delay: 330ms; }

.section-head.is-visible .label,
.section-head.is-visible .section-intro,
.section-head.is-visible .contact-badge {
  opacity: 1;
  transform: translateY(0);
}

.contact-badge {
  display: inline-block;
  margin-bottom: 14px;
  padding: 6px 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(155, 130, 255, .14), rgba(42, 63, 184, .14));
  border: 1px solid var(--line);
  color: var(--blau);
  font-size: .78rem; font-weight: 600; letter-spacing: .4px; text-transform: uppercase;
}

/* Maskierter Zeilen-Reveal: Transform sitzt auf .rv-line > span, nie auf .grad selbst --
   .grad nutzt background-clip:text, ein transform auf einem Nachfahren wuerde die
   geclippte Hintergrundmalerei ausloesen und den Text unsichtbar machen.
   Generisch auf .rv-line (nicht mehr auf .section-head beschraenkt) -- ausgerollt auf
   .service-detail h3, .step-detail h3, .cta-band h2 (alle bereits in einem .reveal-Wrapper)
   und .subpage-hero-text .headline (troggert stattdessen ueber body.hero-revealed, siehe unten). */
.rv-line {
  display: inline-block;
  overflow: hidden;
  padding: .15em 0;
  margin: -.15em 0;
  vertical-align: top;
}
.rv-line > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform .75s cubic-bezier(.16, 1, .3, 1);
}
.rv-line:nth-of-type(1) > span { transition-delay: 90ms; }
.rv-line:nth-of-type(2) > span { transition-delay: 210ms; }

.section-head.is-visible .rv-line > span,
.reveal.is-visible .rv-line > span,
body.hero-revealed .subpage-hero-text .rv-line > span {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal { transition-duration: 0s; transition-delay: 0s; opacity: 1; transform: none; }
  .rv-line > span,
  .section-head .label,
  .section-head .section-intro,
  .section-head .contact-badge {
    transition-duration: 0s;
    transition-delay: 0s;
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   04 — Leistungen: sieben bildgestuetzte Leistungen im Sticky-Scroll-Layout
   ========================================================================== */

/* Fallback fuer die Leistungen-/Team-/Projekte-Dropdown-Anker, falls Lenis/anchorScrolling nicht laedt */
#l-website, #l-app, #l-ki, #l-marketing, #l-branding, #l-recruiting, #l-wartung, #team, #projekte { scroll-margin-top: 110px; }

.services-sticky {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-top: 8px;
}
.services-sticky-visual {
  position: sticky;
  top: 120px;
  align-self: start;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
}
.services-sticky-image {
  position: absolute; inset: 0;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity .6s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1);
}
.services-sticky-image.is-active { opacity: 1; transform: scale(1); }
.services-sticky-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (prefers-reduced-motion: reduce) {
  .services-sticky-image { transition-duration: 0s; }
}

.services-sticky-list { display: flex; flex-direction: column; gap: 64px; padding: 8px 0; }
/* min-height statt nur Text-/Bildhoehe: der Sticky-Bild-Stack braucht genug Scrollstrecke pro
   Block, sonst passt die ganze Liste in einen Viewport und der IntersectionObserver-Wechsel
   (rootMargin -45%/-45%, siehe stickyShowcase() in sections.js) ueberspringt Bloecke bei
   normaler Scrollgeschwindigkeit, statt sauber durch alle sieben durchzublenden. 40vh statt
   60vh, weil sieben Bloecke sonst ~420vh Scrollstrecke direkt nach dem 300vh-Hero ergeben
   wuerden; der Observer-Erkennungsstreifen ist mit ~10vh (rootMargin -45%/-45%) deutlich
   schmaler als 40vh und kreuzt jeden Block sauber. */
.service-block {
  min-height: 40vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.service-block-img { display: none; }
.service-block-num {
  display: block;
  margin-bottom: 10px;
  font-size: .85rem; font-weight: 700; letter-spacing: .5px;
  color: var(--blau);
}
.service-block h3 { font-size: 1.35rem; margin-bottom: 12px; font-weight: 600; }
.service-block p { font-size: 1rem; line-height: 1.6; color: var(--muted); max-width: 46ch; }

.service-card {
  padding: 28px 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.service-card h3 {
  font-size: 1.15rem;
  margin-bottom: 10px;
  font-weight: 600;
}
.service-card p {
  font-size: .95rem;
  line-height: 1.55;
  color: var(--muted);
}

.services-addons-head {
  margin: 30px 0 8px;
  font-size: .8rem; font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
  color: var(--muted);
}
.services-addons-note {
  margin: 0 0 18px;
  font-size: .88rem; line-height: 1.55; color: var(--muted); max-width: 58ch;
}
.services-addons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.service-card--addon { padding: 18px 20px; }
.service-card--addon h3 { font-size: .98rem; margin-bottom: 4px; }
.service-card--addon p { font-size: .85rem; line-height: 1.45; }
.services-note {
  margin-top: 28px;
  padding: 22px 26px;
  border-radius: var(--radius);
  background: linear-gradient(90deg, rgba(155, 130, 255, .1), rgba(42, 63, 184, .1));
  border: 1px solid var(--line);
  font-size: .95rem;
  color: var(--ink);
}
.services-note strong { font-weight: 600; }
.services-note a { color: var(--blau); font-weight: 600; }

/* ==========================================================================
   06 — Projekte (uebernimmt das Google-Review-Widget aus der frueheren Sektion "Referenzen & Stimmen")
   ========================================================================== */
.showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 44px;
}
.showcase-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s cubic-bezier(.16, 1, .3, 1);
}
.showcase-card::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--lila), var(--blau));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}
@media (hover: hover) {
  .showcase-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
  .showcase-card:hover::after { transform: scaleX(1); }
}
.showcase-shot {
  aspect-ratio: 16 / 10;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; text-align: center;
  background: linear-gradient(135deg, rgba(155, 130, 255, .16), rgba(42, 63, 184, .16));
  color: var(--muted); font-size: .85rem; line-height: 1.5;
}
.showcase-shot--img { padding: 0; background: none; }
.showcase-shot--img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.showcase-body { padding: 20px 22px 24px; }
.showcase-badge {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(42, 63, 184, .08);
  color: var(--blau);
  font-size: .72rem; font-weight: 600; letter-spacing: .4px; text-transform: uppercase;
}
.showcase-card h3 { font-size: 1.05rem; margin-bottom: 6px; font-weight: 600; }
.showcase-card p { font-size: .9rem; line-height: 1.5; color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
  .showcase-card, .showcase-card::after { transition-duration: 0s; }
}

/* ---------- 06 — Projekte: "Live ansehen"-Link (Arteon) & CTA-Karte (freier Platz) ---------- */
.showcase-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px;
  font-weight: 600; font-size: .88rem; color: var(--blau); text-decoration: none;
}
.showcase-link svg { width: 14px; height: 14px; transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
@media (hover: hover) {
  .showcase-link:hover svg { transform: translateX(4px); }
}
.showcase-link-hint { display: block; margin-top: 4px; font-size: .76rem; color: var(--muted); }

/* ---------- 06 — Projekte: Release-Countdown (WLVFX-Karte, siehe sections.js releaseCountdown) ---------- */
.showcase-countdown {
  margin-top: 12px;
  font-size: .88rem;
  color: var(--muted);
  line-height: 1.5;
}
.showcase-countdown time { color: var(--ink); font-weight: 600; }
.showcase-badge--soon { background: rgba(217, 154, 30, .14); color: #a3720f; }
.showcase-badge--own { background: rgba(91, 98, 112, .12); color: var(--muted); }
.showcase-badge + .showcase-badge { margin-left: 8px; }

.showcase-card--cta {
  border-style: dashed;
  border-color: var(--line);
  background: var(--bg);
}
.showcase-card--cta::after { display: none; }
.showcase-shot--mark {
  background: linear-gradient(135deg, rgba(155, 130, 255, .08), rgba(42, 63, 184, .08));
  padding: 32px;
}
.showcase-shot--mark img { width: 56px; height: 56px; object-fit: contain; opacity: .5; }
.showcase-cta-btn { margin-top: 14px; padding: 10px 20px; font-size: .88rem; }

/* ==========================================================================
   05 — Team (ersetzt die frühere Sektion "Über mich")
   ========================================================================== */
.about-photo {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  background: var(--bg);
  border: 1px dashed var(--line);
  display: flex; align-items: center; justify-content: center;
  padding: 14px; text-align: center;
  color: var(--muted); font-size: .78rem; line-height: 1.4;
  overflow: hidden;
  margin-bottom: 18px;
}
.about-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }
.about-name { font-size: 1.15rem; font-weight: 700; margin-bottom: 6px; }

.why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 48px;
  margin-bottom: clamp(40px, 6vw, 56px);
}
.why-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.why-check {
  flex: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(90deg, var(--lila), var(--blau));
  display: flex; align-items: center; justify-content: center;
}
.why-check svg { width: 14px; height: 14px; }
.why-item p { font-size: .98rem; line-height: 1.55; color: var(--ink); }
.why-item strong { display: block; margin-bottom: 4px; font-weight: 600; }

.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: clamp(40px, 6vw, 56px);
}
.team-grid--solo {
  grid-template-columns: 1fr;
  max-width: none;
  margin-inline: 0;
}
.team-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
}
.team-role { display: block; margin-bottom: 10px; font-size: .85rem; font-weight: 600; color: var(--blau); }
.team-card p:not(.about-name) { color: var(--muted); font-size: .92rem; line-height: 1.55; }

.team-fields-head {
  margin-bottom: 14px;
  font-size: .8rem; font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
  color: var(--muted);
}
.team-fields { display: flex; flex-wrap: wrap; gap: 10px; }

.team-card--feature {
  display: grid;
  grid-template-columns: minmax(300px, 420px) 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  padding: clamp(28px, 4vw, 48px);
}
.team-card--feature .about-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
  margin-bottom: 0;
  padding: 0;
  border: 0;
  box-shadow: var(--shadow);
}
.team-card--feature .about-photo img {
  object-position: 50% 42%;
  transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}
.team-card--feature .about-name { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-bottom: 8px; }
.team-card--feature .team-role { font-size: .95rem; margin-bottom: 16px; }
.team-card--feature .team-fields { margin-top: 22px; }

@media (hover: hover) {
  .team-card--feature .about-photo:hover img { transform: scale(1.04); }
}

.photo-bubble {
  position: absolute; top: 0; left: 0;
  pointer-events: none;
  will-change: transform;
}
.photo-bubble-in {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px 9px 11px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-family: var(--font);
  font-size: .85rem; font-weight: 600; white-space: nowrap;
  box-shadow: 0 6px 20px rgba(20, 22, 28, .28);
  opacity: 0;
  transform: scale(.82);
  transition: opacity .3s cubic-bezier(.16, 1, .3, 1), transform .3s cubic-bezier(.16, 1, .3, 1);
}
.photo-bubble-dot {
  flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: linear-gradient(90deg, var(--lila), var(--blau));
}
.about-photo:hover .photo-bubble-in,
.about-photo.is-bubble-on .photo-bubble-in { opacity: 1; transform: scale(1); }

@media (hover: none), (prefers-reduced-motion: reduce) {
  .photo-bubble {
    top: auto; right: auto; bottom: 14px; left: 14px;
    transform: none;
  }
  .photo-bubble-in { transform: translateY(10px); }
  .team-card.is-visible .photo-bubble-in { opacity: 1; transform: translateY(0); transition-delay: .35s; }
}

.marquee {
  margin-top: 36px;
  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-track {
  display: flex;
  width: max-content;
  gap: 18px;
  animation: marquee-scroll 60s linear infinite;
  will-change: transform;
}
.marquee-track span {
  font-size: clamp(1.1rem, 3vw, 1.6rem);
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* ==========================================================================
   08 — Fragen (FAQ-Accordion)
   ========================================================================== */
.faq-list { display: flex; flex-direction: column; }
.faq-item { position: relative; border-bottom: 1px solid var(--line); }
.faq-item:first-child { border-top: 1px solid var(--line); }
.faq-item::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--lila), var(--blau));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}
.faq-item.is-open::after { transform: scaleX(1); }
@media (hover: hover) {
  .faq-item:hover::after { transform: scaleX(1); }
}
.faq-h { margin: 0; }
.faq-q {
  width: 100%;
  min-height: 48px;
  padding: 24px 4px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: none; border: none; text-align: left; cursor: pointer;
  font-family: var(--font);
  font-size: clamp(1.02rem, 1.5vw, 1.18rem); font-weight: 600; color: var(--ink);
  transition: color .35s cubic-bezier(.16, 1, .3, 1);
}
.faq-item.is-open .faq-q { color: var(--blau); }
@media (hover: hover) {
  .faq-q:hover span { color: var(--blau); }
}
.faq-q:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
.faq-icon {
  flex: none; width: 20px; height: 20px; color: var(--blau);
  transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}
.faq-item.is-open .faq-icon { transform: rotate(180deg); }
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s cubic-bezier(.16, 1, .3, 1);
}
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a-inner { overflow: hidden; }
.faq-a-inner p { padding: 0 4px 20px; font-size: .95rem; line-height: 1.6; color: var(--muted); }
.faq-note { margin-top: 28px; font-size: .92rem; color: var(--muted); }
.faq-note a { color: var(--blau); font-weight: 600; }

/* ---------- 08 — Fragen: Abschluss-Block ---------- */
.faq-close { margin-top: clamp(40px, 6vw, 64px); }
.faq-nod { font-size: clamp(1.15rem, 2.4vw, 1.6rem); line-height: 1.3; font-weight: 600; color: var(--ink); }
.faq-nod .grad { background: linear-gradient(90deg, var(--lila), var(--blau)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.faq-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 28px; }
.faq-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 26px;
  border-radius: 999px;
  font-family: var(--font);
  font-weight: 600; font-size: .95rem;
  text-decoration: none;
  transition: opacity .35s ease, border-color .35s ease, color .35s ease;
}
.faq-btn--primary {
  background: linear-gradient(90deg, var(--lila), var(--blau));
  color: #fff;
}
.faq-btn--ghost {
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink);
}
@media (hover: hover) {
  .faq-btn--primary:hover { opacity: .92; }
  .faq-btn--ghost:hover { border-color: var(--blau); color: var(--blau); }
}
.faq-close .faq-note { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .faq-icon, .faq-a, .faq-item::after, .faq-q, .faq-btn { transition-duration: 0s; }
}

/* ==========================================================================
   07 — Ablauf: Fortschrittslinie fuellt sich per Scroll UND per Klick (siehe
   stepProgress() in sections.js). max(scrollProgress, clickTarget) sorgt dafuer,
   dass ein Klick die Linie vorwaerts treiben kann, Weiterscrollen sie aber nie
   zurueckspringen laesst -- derselbe Vorzeichen-Fallstrick wie beim mobilen
   Card-Stack (siehe stackCards()), hier bewusst durch max() vermieden.
   ========================================================================== */
.steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0 20px;
  position: relative;
  padding-top: 4px;
}
.steps-track {
  position: absolute;
  top: 26px; left: calc(10% + 22px); right: calc(10% + 22px);
  height: 2px;
  background: var(--line);
}
.steps-fill {
  display: block;
  height: 100%;
  transform: scaleX(var(--steps-progress, 0));
  transform-origin: left;
  background: linear-gradient(90deg, var(--lila), var(--blau));
  transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}
.step {
  position: relative;
  padding: 0 12px 0 0;
}
.step-head {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--font);
}
.step-num {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--blau);
  color: var(--blau);
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  position: relative; z-index: 1;
  transition: background .35s cubic-bezier(.16, 1, .3, 1), color .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s cubic-bezier(.16, 1, .3, 1);
}
.step.is-reached .step-num { background: var(--blau); color: #fff; }
.step.is-active .step-num { box-shadow: 0 0 0 6px rgba(42, 63, 184, .14); }
.step h3 { font-size: 1.05rem; margin-bottom: 8px; font-weight: 600; }
.step-lead { font-size: .92rem; color: var(--muted); line-height: 1.5; }
.step-detail {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.step-detail p { font-size: .88rem; color: var(--muted); line-height: 1.55; }
.step-detail[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .steps-fill { transition-duration: 0s; }
  .step-num { transition-duration: 0s; }
}

/* ==========================================================================
   09 — Kontakt
   ========================================================================== */
.contact-promise {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 40px;
  margin-bottom: clamp(36px, 5vw, 52px);
}
.contact-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 48px;
  align-items: start;
}
.contact-info p { color: var(--muted); line-height: 1.6; margin-bottom: 24px; }
.contact-ways { display: flex; flex-direction: column; gap: 14px; }
.contact-ways a {
  color: var(--ink); text-decoration: none; font-weight: 600;
  display: flex; align-items: center; gap: 10px;
}
.contact-ways a svg { width: 18px; height: 18px; flex: none; color: var(--blau); }
.contact-location { margin-top: 24px; font-size: .9rem; color: var(--muted); }

.contact-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow);
}
.form-row { margin-bottom: 18px; }
.form-row label {
  display: block; font-size: .85rem; font-weight: 600; margin-bottom: 6px; color: var(--ink);
}
.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: var(--font);
  font-size: .95rem;
  background: #fff;
  color: var(--ink);
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: 2px solid var(--blau);
  outline-offset: 1px;
  border-color: var(--blau);
}
.form-row textarea { resize: vertical; min-height: 100px; }

.form-audience {
  font-size: .82rem;
  color: var(--muted);
  margin: -4px 0 18px;
}
.form-error {
  display: none;
  color: #d3341f;
  font-size: .8rem;
  margin-top: 6px;
}
.form-row.has-error input,
.form-row.has-error textarea,
.form-row.has-error select { border-color: #d3341f; }
.form-row.has-error .form-error { display: block; }

.form-checkbox {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: .85rem; color: var(--muted); line-height: 1.4;
}
.form-checkbox input { width: auto; margin-top: 2px; }
.form-checkbox a { color: var(--blau); }

.form-honeypot { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

.form-submit {
  width: 100%;
  padding: 14px 20px;
  border: none;
  border-radius: 10px;
  font-family: var(--font);
  font-weight: 600;
  font-size: .98rem;
  color: #fff;
  background: linear-gradient(90deg, var(--lila), var(--blau));
  cursor: pointer;
  transition: opacity .2s ease;
}
@media (hover: hover) {
  .form-submit:hover { opacity: .92; }
}
.form-submit:disabled { opacity: .6; cursor: not-allowed; }

.form-status {
  margin-top: 0;
  font-size: .9rem;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0 14px;
  border-radius: 10px;
  transition: max-height .2s ease, opacity .2s ease, padding .2s ease, margin-top .2s ease;
}
.form-status.is-visible { margin-top: 16px; max-height: 240px; opacity: 1; padding: 12px 14px; }
.form-status--success { background: rgba(34, 197, 94, .12); color: #15803d; }
.form-status--error { background: rgba(211, 52, 31, .1); color: #d3341f; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--ink);
  color: rgba(255, 255, 255, .7);
  padding: 52px calc(clamp(20px, 6vw, 60px) + env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) calc(clamp(20px, 6vw, 60px) + env(safe-area-inset-left));
}
.footer-top {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.footer-brand img { height: 28px; width: auto; margin-bottom: 14px; }
.footer-brand p { font-size: .85rem; max-width: 32ch; line-height: 1.5; }
.footer-nav, .footer-contact { display: flex; flex-direction: column; gap: 10px; font-size: .9rem; }
.footer-nav a, .footer-contact a {
  color: rgba(255, 255, 255, .7); text-decoration: none;
}
@media (hover: hover) {
  .footer-nav a:hover, .footer-contact a:hover { color: #fff; }
}
.footer-col-title { color: #fff; font-weight: 600; font-size: .85rem; letter-spacing: .5px; text-transform: uppercase; margin-bottom: 4px; }
.footer-bottom {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 20px;
  font-size: .8rem;
}
.footer-bottom a { color: rgba(255, 255, 255, .7); }

/* Review-Widget lebt im Hero UND als Content-Block (Sektion 06) -> Styles in style.css, nicht hier */

/* ==========================================================================
   Sticky Mobile-CTA (per JS injiziert, siehe sections.js) -- nur auf Mobile sichtbar,
   faehrt sobald body.past-hero aktiv ist, verschwindet bei offenem Menue.
   ========================================================================== */
.mobile-cta {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  gap: 10px;
  padding: 10px clamp(16px, 5vw, 28px) calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .96);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgba(20, 22, 28, .08);
  transform: translateY(100%);
  transition: transform .4s cubic-bezier(.16, 1, .3, 1);
}
body.past-hero .mobile-cta { transform: translateY(0); }
body.nav-open .mobile-cta { transform: translateY(100%); }
body.consent-open .mobile-cta { transform: translateY(100%); }
.mobile-cta-btn {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  min-height: 44px;
  padding: 13px 16px;
  border-radius: 999px;
  font-family: var(--font);
  font-weight: 600; font-size: .92rem;
  text-decoration: none;
}
.mobile-cta-btn--primary { background: linear-gradient(90deg, var(--lila), var(--blau)); color: #fff; }
.mobile-cta-btn--ghost { background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
@media (hover: none) {
  .mobile-cta-btn { transition: transform .12s cubic-bezier(.16, 1, .3, 1); }
  .mobile-cta-btn:active { transform: scale(.96); }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-cta { transition-duration: 0s; }
  .mobile-cta-btn { transition-duration: 0s; }
}

/* ==========================================================================
   Desktop-Bubble "Lass uns quatschen" (per JS injiziert, siehe sections.js talkBubble()) --
   Gegenstueck zu .mobile-cta auf Desktop, nur auf Mobile per display:none abgeschaltet (dort
   uebernimmt die bestehende .mobile-cta-Leiste, zwei gleichzeitige CTAs waeren zu viel).
   Vorbild: digitalagentur-haelker.de (schwebendes Video-Feld unten rechts).
   ========================================================================== */
.talk-bubble {
  position: fixed; right: 0; bottom: 20px; z-index: 40; /* unter Nav-Overlay (50) und Loader (100) */
  width: 300px;
  aspect-ratio: 300 / 430;
  border-radius: 20px 0 0 20px;
  box-shadow: 0 1px 11px rgba(0, 0, 0, .17);
  overflow: hidden;
  opacity: 0;
  transform: translateX(calc(100% + 24px));
  pointer-events: none;
  transition: opacity .6s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1);
}
body.past-hero .talk-bubble { opacity: 1; transform: none; pointer-events: auto; }
body.nav-open .talk-bubble { transform: translateX(calc(100% + 24px)); }
body.consent-open .talk-bubble { transform: translateX(calc(100% + 24px)); }
.talk-bubble-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  background: var(--surface);
}
.talk-bubble-cta {
  position: absolute; left: 20px; bottom: 22px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px 10px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .84);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 600; font-size: .88rem;
  text-decoration: none;
}
.talk-bubble-icon {
  flex: none; width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(90deg, var(--lila), var(--blau));
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.talk-bubble-icon svg { width: 14px; height: 14px; }
@media (hover: hover) {
  .talk-bubble-cta:hover { opacity: .92; }
}
.talk-bubble-close {
  position: absolute; top: 10px; right: 10px; z-index: 1;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: rgba(20, 22, 28, .45);
  color: #fff;
  font-size: 15px; line-height: 1;
  cursor: pointer;
}
.talk-bubble-close:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .talk-bubble { transition-duration: 0s; }
}

/* ==========================================================================
   Rechtliche Seiten (Impressum, Datenschutz, AGB)
   ========================================================================== */
.legal { max-width: 760px; margin: 0 auto; padding: clamp(120px, 16vw, 180px) clamp(20px, 6vw, 60px) 100px; }
.legal h1 { font-size: clamp(1.8rem, 3.5vw, 2.4rem); margin-bottom: 32px; }
.legal h2 { font-size: 1.2rem; margin: 36px 0 12px; }
.legal h3 { font-size: 1rem; color: var(--ink); margin: 20px 0 8px; }
.legal p, .legal li { color: var(--muted); line-height: 1.65; font-size: .95rem; }
.legal ul { padding-left: 20px; margin-bottom: 12px; }
.legal a { color: var(--blau); }
/* Kanarienvogel fuer kuenftige Platzhalter -- kein Gegenstueck mehr im HTML, die Seiten sind ausformuliert. */
.legal .placeholder { color: #d3341f; font-weight: 600; }
.legal-back { display: inline-block; margin-bottom: 24px; font-size: .9rem; color: var(--blau); text-decoration: none; }
.legal-note {
  margin-top: 36px; padding: 16px 20px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line); font-size: .85rem;
}
.legal-table-wrap { overflow-x: auto; margin: 0 0 16px; }
.legal table { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 480px; }
.legal th, .legal td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--muted); }
.legal th { color: var(--ink); font-weight: 600; }
.legal-inline-btn {
  background: none; border: 1px solid var(--blau); border-radius: 999px;
  padding: 4px 14px; font: inherit; font-size: .85rem; color: var(--blau); cursor: pointer;
}
@media (hover: hover) {
  .legal-inline-btn:hover { background: var(--blau); color: #fff; }
}

/* ==========================================================================
   Press-States (Touch): Gegenstueck zu den @media (hover: hover)-Regeln oben.
   Ein :hover-Zustand bliebe auf iOS nach dem Antippen kleben, bis woanders
   hingetippt wird -- :active mit kurzem Scale-Feedback fuehlt sich stattdessen
   nach nativer App-Interaktion an, ohne diesen Sticky-Hover-Bug.
   ========================================================================== */
@media (hover: none) {
  .faq-btn, .service-card, .showcase-card, .step, .team-card,
  .service-block, .section-more, .review-arrow, .review-dot, .faq-q {
    transition: transform .12s cubic-bezier(.16, 1, .3, 1);
  }
  .faq-btn:active, .service-card:active, .showcase-card:active, .step:active,
  .team-card:active, .service-block:active, .section-more:active,
  .review-arrow:active, .review-dot:active, .faq-q:active {
    transform: scale(.97);
  }
}
@media (prefers-reduced-motion: reduce) {
  .faq-btn, .service-card, .showcase-card, .step, .team-card,
  .service-block, .section-more, .review-arrow, .review-dot, .faq-q {
    transition-duration: 0s;
  }
}

/* ==========================================================================
   Scroll-getriebene CSS-Animationen (Progressive Enhancement): @supports-Aufsatz
   ueber die bestehende IntersectionObserver-Reveal-Logik, ohne zusaetzliches JS/GSAP
   -- laeuft im Compositor-Thread, kein Scroll-Listener. Faellt die Unterstuetzung weg
   (Safari < 26, Firefox), bleibt revealSections() (sections.js) unveraendert aktiv,
   kein Regressionsrisiko. Bidirektional by design (view()-Timeline ist an die
   Scroll-Position gebunden, kein einmaliges "fill-forwards") -- Karten faden beim
   Zurueckscrollen wieder aus, gewollt im Sinne des ruhigen Scroll-Parallax-Looks.
   Bekannter Trade-off: fuer .service-card/.step/.why-item gewinnt waehrend die
   Animation aktiv ist ihr Transform gegenueber der :active-Press-State-Regel oben --
   betrifft nur unterstuetzende Browser, dort ist der Tap-Scale-Effekt fuer diese
   drei Selektoren unwirksam, alle anderen Press-States bleiben unberuehrt. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .service-block-img img, .showcase-card img {
      animation: sv-parallax linear both;
      animation-timeline: view();
    }
    .service-card, .why-item, .step {
      animation: sv-card-in linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 40%;
    }
  }
}
@keyframes sv-parallax {
  0% { transform: scale(1.12) translateY(-6%); }
  100% { transform: scale(1.12) translateY(6%); }
}
@keyframes sv-card-in {
  0% { opacity: 0; transform: scale(.96); }
  100% { opacity: 1; transform: scale(1); }
}

/* Registrierung fuer den mobilen Stack-Shrink (Sektion 04/06, siehe Mobile-Block unten) --
   @property steht unconditional, damit der Browser den Typ kennt, auch wenn die eigentliche
   Nutzung @supports/@media-gated ist. Ohne Typisierung als <number> würde die Custom Property
   nicht animierbar sein (nur diskrete Sprünge statt einer weichen Interpolation). */
@property --stack-shrink {
  syntax: '<number>';
  initial-value: 1;
  inherits: true;
}
@property --stack-dim {
  syntax: '<number>';
  initial-value: 1;
  inherits: true;
}

/* ==========================================================================
   Mobile — bestehender einziger Breakpoint
   ========================================================================== */
@media (max-width: 768px), (orientation: portrait) and (max-width: 1024px) {
  /* Sticky-Card-Stack (04/06): collapsed Pill = 54px Hoehe + 20px Abstand oben + Luft.
     Single Source of Truth analog zu --mobile (siehe env.js), nicht pro Sektion neu schaetzen. */
  :root { --stack-top: 88px; }

  /* Kompakteres Vertikal-Raster: kuerzere Sektionen = weniger Scrollweg */
  .section { padding: clamp(56px, 10vw, 92px) clamp(20px, 6vw, 60px); }
  .section-head { margin-bottom: clamp(26px, 5vw, 40px); }
  .reveal { transition-delay: calc(var(--i, 0) * 55ms); transform: translateY(22px); }   /* statt 95ms/36px */

  /* Kopf-Delays gestaucht auf ~60% */
  .section-head .label { transition-delay: 0ms; }
  .section-head .rv-line:nth-of-type(1) > span { transition-delay: 55ms; }
  .section-head .rv-line:nth-of-type(2) > span { transition-delay: 125ms; }
  .section-head .section-intro { transition-delay: 200ms; }

  /* 04 — Leistungen: Sticky-Bild-Stack aus, stattdessen stapeln sich die vier Karten selbst beim
     Scrollen (Vorbild: digitalagentur-haelker.de/#leistungen) -- position: sticky auf dem
     .stack-item-Wrapper (siehe Regel weiter unten), kein GSAP. gap:0 auf der Liste ist Pflicht:
     der Abstand kommt aus margin-bottom auf .stack-item, sonst reisst der Kaskaden-Versatz
     zwischen den Karten wieder auseinander. */
  .services-sticky { grid-template-columns: 1fr; gap: 0; margin-top: 0; }
  .services-sticky-visual { display: none; }
  .services-sticky-list { gap: 0; padding: 0; }
  .service-block {
    min-height: 0;
    display: block;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    padding: 0 0 18px;
    box-shadow: 0 10px 30px rgba(8, 11, 36, .10);
    transition: opacity .75s cubic-bezier(.16, 1, .3, 1);
  }
  .service-block-img { display: block; aspect-ratio: 16 / 10; }
  .service-block-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .service-block-num, .service-block h3, .service-block p { padding-left: 16px; padding-right: 16px; }
  .service-block-num { margin-top: 16px; }
  .service-block h3 { font-size: 1.1rem; }
  .service-block p { font-size: .9rem; }
  .services-addons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .service-card { padding: 18px 16px; }
  .service-card h3 { font-size: 1rem; margin-bottom: 7px; }
  .service-card p { font-size: .84rem; line-height: 1.45; }
  .services-note { margin-top: 18px; padding: 16px 18px; font-size: .88rem; }
  .services-addons .service-card--addon h3,
  .services-addons .service-card--addon p { hyphens: auto; }

  /* 06 — Projekte: ersetzt das vormalige horizontale Snap-Carousel durch denselben Sticky-Stack
     wie Sektion 04 (bewusster Trade-off -- Swipe-Geste geht verloren, dafuer konsistente Machart
     ueber beide Sektionen). display:flex statt grid + alle Carousel-Reste explizit zurueckgesetzt:
     ein scrollender Vorfahre (overflow-x:auto) macht position:sticky der Kinder sonst wirkungslos. */
  .showcase-grid {
    display: flex;
    flex-direction: column;
    grid-auto-flow: unset;
    grid-auto-columns: unset;
    gap: 0;
    margin: 0 0 28px;
    padding: 0;
    overflow-x: visible;
    scroll-snap-type: none;
    scroll-padding-inline: 0;
  }
  .showcase-card {
    scroll-snap-align: unset;
    /* .showcase-card ist per Default var(--surface), die Projekte-Sektion selbst ist aber
       .section--surface -- im Stapel haetten die Karten sonst keinen Kontrast zum Hintergrund. */
    background: var(--bg);
    box-shadow: 0 10px 30px rgba(8, 11, 36, .10);
    transition: opacity .75s cubic-bezier(.16, 1, .3, 1);
  }

  /* Sticky + Stapel-Optik sitzen auf dem .stack-item-Wrapper, nicht auf der Karte selbst --
     der Wrapper ist direktes Kind des hohen Containers (.services-sticky-list / .showcase-grid),
     die Karte davor sass in einer Box, die exakt so hoch wie sie selbst war (Klebeweg = 0px,
     der Bug, den dieser Umbau behebt). Kaskaden-Versatz: jede folgende Karte klebt 10px tiefer
     als die vorherige, die Kante der darunterliegenden Karte bleibt sichtbar. Verdeckte Karten
     schrumpfen leicht (1 -> .93) und dunkeln ab (1 -> .88) -- Werte kommen deterministisch aus
     sections.js/stackCards(), nicht aus animation-timeline: view() (iOS Safari < 26 unterstuetzt
     das nicht, sticky Elemente verhalten sich mit view()-Timeline zudem unzuverlaessig, weil die
     Karte beim Kleben dauerhaft "in view" bleibt). transform sitzt ausschliesslich hier, nie auf
     .reveal -- getrennte Elemente, kein Spezifitaets-Konflikt mehr. */
  .services-sticky-list > .stack-item,
  .showcase-grid > .stack-item {
    position: sticky;
    margin-bottom: 18px;
    transform: scale(var(--stack-shrink, 1));
    transform-origin: 50% 0;
    filter: brightness(var(--stack-dim, 1));
    will-change: transform;
  }
  .stack-item:nth-child(1) { top: calc(var(--stack-top) + 0 * 10px); }
  .stack-item:nth-child(2) { top: calc(var(--stack-top) + 1 * 10px); }
  .stack-item:nth-child(3) { top: calc(var(--stack-top) + 2 * 10px); }
  .stack-item:nth-child(4) { top: calc(var(--stack-top) + 3 * 10px); }
  .stack-item:nth-child(5) { top: calc(var(--stack-top) + 4 * 10px); }
  .stack-item:nth-child(6) { top: calc(var(--stack-top) + 5 * 10px); }
  .stack-item:nth-child(7) { top: calc(var(--stack-top) + 6 * 10px); }
  .services-sticky-list, .showcase-grid { padding-bottom: 10vh; }

  /* 05 — Team: Porträt ueber dem Text statt daneben, Vorteile & Team-Karten einspaltig
     (gleiche Begruendung wie frueher bei "Warum wir": Texte sind 2-3 Saetze -> lesbarer
     als Icon-neben-Fliesstext in einer ~170px-Spalte). */
  .why-grid { grid-template-columns: 1fr; gap: 18px; margin-bottom: 28px; }
  .why-item { flex-direction: row; gap: 14px; }
  .why-check { width: 24px; height: 24px; }
  .why-item p { font-size: .9rem; }
  .team-grid { grid-template-columns: 1fr; gap: 20px; margin-bottom: 28px; }
  .team-card--feature { grid-template-columns: 1fr; gap: 18px; padding: 18px; }
  .team-card--feature .about-photo { width: 100%; max-width: 340px; margin: 0 auto; }
  .team-card--feature .about-name { font-size: 1.45rem; }
  .team-card--feature .team-fields { margin-top: 16px; }
  .photo-bubble-in { font-size: .8rem; padding: 8px 14px 8px 10px; }
  .marquee-track { animation-duration: 30s; }

  /* 08 — Fragen: volle Breite, einspaltig — bei FAQs keine Spalten */
  .faq-q { font-size: .95rem; padding: 16px 2px; }
  .faq-a-inner p { font-size: .88rem; line-height: 1.55; padding: 0 2px 16px; }
  .faq-nod { font-size: 1.15rem; }
  .faq-actions { flex-direction: column; }
  .faq-btn { width: 100%; justify-content: center; }

  /* 07 — Ablauf: einspaltig, Fortschrittslinie senkrecht links neben den Nummernkreisen
     statt waagerecht -- bisher war hier ueberhaupt keine Linie sichtbar (.step::after war
     display:none), die Fuell-Animation funktioniert mobil dadurch jetzt erstmals ueberhaupt. */
  .steps { grid-template-columns: 1fr; gap: 30px; padding-top: 0; }
  .steps-track {
    top: 22px; bottom: 22px; left: 21px; right: auto;
    width: 2px; height: auto;
  }
  .steps-fill { transform: scaleY(var(--steps-progress, 0)); transform-origin: top; }
  .step { padding: 0; }
  .step-head { display: flex; align-items: center; gap: 14px; }
  .step-num { width: 44px; height: 44px; margin-bottom: 0; flex: none; }
  .step h3 { font-size: .98rem; margin-bottom: 0; }
  .step-lead, .step-detail { margin-left: 58px; }
  .step-lead { font-size: .85rem; margin-top: 8px; }

  /* 09 — Kontakt bleibt einspaltig: Formularfelder brauchen volle Breite */
  .contact-promise { grid-template-columns: 1fr; gap: 20px; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-top { flex-direction: column; gap: 28px; }

  /* Sticky Mobile-CTA: nur hier sichtbar, body-Padding reserviert Platz, damit Footer/CTA-Buttons
     nicht dauerhaft unter der Leiste verschwinden (nicht auf kontakt.html, dort keine Injektion). */
  .mobile-cta { display: flex; }
  body.has-mobile-cta { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }

  /* Desktop-Bubble bleibt Desktop -- Mobil traegt die Sticky-CTA-Leiste dieselbe Funktion,
     zwei gleichzeitige CTAs waeren zu viel. */
  .talk-bubble { display: none; }
}

/* Sehr schmale Screens (iPhone SE, Galaxy S8): selbst minmax(0,1fr) reicht nicht mehr fuer
   lange deutsche Komposita in den Addon-Karten -- einspaltig statt zweispaltig. */
@media (max-width: 380px) {
  .services-addons { grid-template-columns: 1fr; }
}