/* ==========================================================================
   ZQUAD – Design System
   Kein Framework, keine jQuery. Reines CSS, ca. 20 KB gzip.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Schrift
   -------------------------------------------------------------------------- */

/* Schriften des ZQUAD-Designsystems (wie ZQUADMIN): Inter für Text,
   Bricolage Grotesque für Überschriften, JetBrains Mono für Kicker und
   Beschriftungen. Alle drei als variable Dateien im Latin-Bereich. */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../fonts/bricolage-grotesque-latin-variable.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/jetbrains-mono-latin-variable.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Farben – Designsystem wie ZQUADMIN */
  --zq-ink:        #0a0a0a;
  --zq-ink-2:      #1a1a1a;
  --zq-body:       #4a4a4a;
  --zq-muted:      #6b6b6b;
  --zq-bg:         #fafaf7;   /* paper */
  --zq-soft:       #f2efe8;   /* cream */
  --zq-line:       #e3e0d9;
  --zq-red:        #e63946;
  --zq-red-dark:   #c42836;
  --zq-on-dark:    #b3b3b0;
  --zq-gray:       #a8a8a5;   /* grey-soft */
  --zq-field:      rgba(10, 10, 10, 0.18);   /* Formular- und Rahmenlinien */

  /* Rundungen */
  --zq-radius:     0.5rem;
  --zq-radius-sm:  calc(var(--zq-radius) * 0.6);
  --zq-radius-lg:  calc(var(--zq-radius) * 1.5);
  --zq-radius-xl:  calc(var(--zq-radius) * 2.5);

  /* Typografie – das Original skaliert Überschriften NICHT herunter.
     Die Zielgrößen stehen daher spätestens ab 992 px Viewport. */
  --zq-font:         'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --zq-font-heading: 'Bricolage Grotesque', var(--zq-font);
  --zq-font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --zq-t-body:     1.125rem;                                     /* 18 fix */
  --zq-t-small:    1rem;                                         /* 16 fix */
  --zq-t-h6:       1.125rem;                                     /* 18 fix */
  --zq-t-h5:       clamp(1.25rem, 1rem + 0.9vw, 1.5rem);         /* 20 → 24 */
  --zq-t-h4:       clamp(1.375rem, 1.05rem + 1.1vw, 1.625rem);   /* 22 → 26 */
  --zq-t-h3:       clamp(1.625rem, 1.05rem + 1.9vw, 2rem);       /* 26 → 32 */
  --zq-t-h2:       clamp(2.125rem, 1.15rem + 3.2vw, 2.875rem);   /* 34 → 46 */
  --zq-t-h1:       clamp(2.875rem, 1.2rem + 5.6vw, 4.375rem);    /* 46 → 70 */
  --zq-t-display:  clamp(4.375rem, 0.4rem + 11vw, 8.125rem);     /* 70 → 130 */

  --zq-kicker:     0.8125rem;

  /* Raster – Bootstrap-Stufen des Originals */
  --zq-container:  1140px;
  --zq-container-wide: 1440px;
  --zq-gutter:     15px;

  /* Abstände – die Stufen, die das Original tatsächlich verwendet */
  --zq-s-1:  0.625rem;                          /* 10 */
  --zq-s-2:  1.25rem;                           /* 20 */
  --zq-s-3:  1.875rem;                          /* 30 – zweithäufigster Wert */
  --zq-s-4:  2.5rem;                            /* 40 */
  --zq-s-5:  3.75rem;                           /* 60 */
  --zq-s-6:  clamp(3.75rem, 7vw, 5rem);          /* 60 → 80 */
  --zq-s-7:  clamp(5rem, 10.5vw, 7.5rem);       /* 80 → 120, erreicht 120 ab 1143px */
  --zq-s-8:  clamp(6.25rem, 13.2vw, 9.375rem);  /* 100 → 150 */

  /* Sonstiges */
  --zq-nav-h:      90px;
  --zq-ease:       cubic-bezier(0.22, 0.61, 0.36, 1);
  --zq-fast:       200ms var(--zq-ease);
  --zq-slow:       420ms var(--zq-ease);
}

/* --------------------------------------------------------------------------
   3. Reset
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--zq-nav-h) + 1rem);
}

body {
  margin: 0;
  min-width: 320px;
  font-family: var(--zq-font);
  font-size: var(--zq-t-body);
  line-height: 1.5;
  color: var(--zq-body);
  background: var(--zq-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--zq-ink);
  font-family: var(--zq-font-heading);
  font-weight: 700;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 { font-size: var(--zq-t-h1); line-height: 1.08; font-weight: 800; }
h2 { font-size: var(--zq-t-h2); line-height: 1.15; }
h3 { font-size: var(--zq-t-h3); line-height: 1.25; }
h4 { font-size: var(--zq-t-h4); line-height: 1.3; }
h5 { font-size: var(--zq-t-h5); line-height: 1.4; }
h6 { font-size: var(--zq-t-h6); line-height: 1.5; }

p { margin: 0 0 30px; text-wrap: pretty; }
p:last-of-type { margin-bottom: 0; }
p:empty { display: none; }

a { color: inherit; text-decoration: none; transition: all 300ms; }
a:hover { color: var(--zq-red); }
p a, .zq-prose a { color: var(--zq-red); }

strong { font-weight: 700; color: var(--zq-ink); }
mark { background: var(--zq-red); }

blockquote {
  margin: 0;
  padding: 25px 30px;
  border-radius: var(--zq-radius-lg);
  background: var(--zq-soft);
  font-size: 18px;
  font-weight: 700;
  color: var(--zq-ink);
}

ul, ol { margin: 0 0 1.5rem; padding-left: 1.35rem; }
li + li { margin-top: 0.4rem; }

hr { border: 0; border-top: 1px solid var(--zq-line); margin: var(--zq-s-5) 0; }

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

/* Fokus nur bei Tastaturbedienung, aber dann deutlich */
:focus-visible {
  outline: 3px solid var(--zq-red);
  outline-offset: 3px;
  border-radius: var(--zq-radius-sm);
}

/* --------------------------------------------------------------------------
   4. Hilfsklassen
   -------------------------------------------------------------------------- */

.zq-container {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--zq-gutter);
}
@media (min-width: 576px)  { .zq-container { max-width: 540px; } }
@media (min-width: 768px)  { .zq-container { max-width: 720px; } }
@media (min-width: 992px)  { .zq-container { max-width: 960px; } }
@media (min-width: 1200px) { .zq-container { max-width: var(--zq-container); } }

.zq-container--wide { max-width: var(--zq-container-wide); }
@media (min-width: 1200px) { .zq-container--wide { max-width: var(--zq-container-wide); } }
.zq-container--narrow { max-width: 860px; }

.zq-section { padding-block: var(--zq-s-7); }
.zq-section--tight { padding-block: var(--zq-s-6); }
.zq-section--soft { background: var(--zq-soft); }
.zq-section--dark { background: var(--zq-ink); color: var(--zq-on-dark); }
.zq-section--dark h1,
.zq-section--dark h2,
.zq-section--dark h3,
.zq-section--dark h4,
.zq-section--dark h5,
.zq-section--dark h6 { color: #fff; }

.zq-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.zq-skip-link {
  position: absolute;
  top: 0; left: 0;
  z-index: 999;
  padding: 1rem 1.5rem;
  background: var(--zq-ink);
  color: #fff;
  transform: translateY(-120%);
  transition: transform var(--zq-fast);
}
.zq-skip-link:focus { transform: translateY(0); }

.zq-center { text-align: center; }

/* --------------------------------------------------------------------------
   5. Typografische Bausteine
   -------------------------------------------------------------------------- */

/* Roter Kicker über Überschriften */
.zq-kicker {
  display: block;
  margin-bottom: 30px;
  color: var(--zq-red);
  font-family: var(--zq-font-mono);
  font-size: var(--zq-kicker);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.zq-section--dark .zq-kicker { color: var(--zq-red); }

/* Große Konturschrift */
.zq-stroke {
  margin: 0;
  font-family: var(--zq-font-heading);
  font-weight: 800;
  line-height: 1.05;
  font-size: var(--zq-t-display);
  color: var(--zq-line);
  -webkit-text-stroke: 1px currentColor;
  -webkit-text-fill-color: transparent;
  user-select: none;
}

/* Konturschrift als Hintergrundwort neben Seitentiteln */
.zq-phantom {
  position: absolute;
  top: -0.35em;
  right: 0;
  z-index: 0;
  margin: 0;
  font-family: var(--zq-font-heading);
  font-size: var(--zq-t-display);
  font-weight: 800;
  line-height: 0.9;
  white-space: nowrap;
  pointer-events: none;
  color: var(--zq-line);
  -webkit-text-stroke: 1px currentColor;
  -webkit-text-fill-color: transparent;
}
@media (max-width: 991px) { .zq-phantom { display: none; } }

.zq-section-title { max-width: 46ch; }
.zq-section-title--center { margin-inline: auto; text-align: center; }
.zq-section-title__text { margin-top: 35px; font-size: 1.25rem; }

.zq-prose > :last-child { margin-bottom: 0; }
.zq-prose--2col { columns: 2; column-gap: var(--zq-s-5); }
@media (max-width: 767px) { .zq-prose--2col { columns: 1; } }

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

.zq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 20px 60px;
  border: 0;
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--zq-radius);
  transition: color var(--zq-fast), background-color var(--zq-fast);
}

/* Der Füll-Effekt beim Hover */
.zq-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translateY(101%);
  transition: transform var(--zq-slow);
}
.zq-btn:hover::after,
.zq-btn:focus-visible::after { transform: translateY(0); }

a.zq-btn:hover, a.zq-btn:focus-visible, .zq-btn:hover, .zq-btn:focus-visible { color: #fff; }
.zq-btn--red    { background: var(--zq-red); color: #fff; }
.zq-btn--red::after    { background: var(--zq-ink); }

.zq-btn--dark   { background: var(--zq-ink); color: #fff; }
.zq-btn--dark::after   { background: var(--zq-red); }

.zq-btn--light  { background: #fff; color: var(--zq-ink); }
.zq-btn--light::after  { background: var(--zq-red); }
.zq-btn--light:hover   { color: #fff; }

.zq-btn--ghost  { background: transparent; color: currentColor; box-shadow: inset 0 0 0 2px currentColor; }
.zq-btn--ghost::after   { background: var(--zq-red); }
.zq-btn--ghost:hover    { color: #fff; box-shadow: inset 0 0 0 2px var(--zq-red); }
.zq-form .zq-btn--ghost { color: var(--zq-ink); box-shadow: inset 0 0 0 2px var(--zq-ink); }
.zq-form .zq-btn--ghost:hover { color: #fff; box-shadow: inset 0 0 0 2px var(--zq-red); }

.zq-btn--md { padding: 20px 60px; }
.zq-btn--sm { padding: 13px 27px; font-size: 14px; }
.zq-btn--xs { padding: 8px 20px; font-size: 14px; }
.zq-btn--lg { padding: 20px 70px; }
.zq-btn--block { width: 100%; }
.zq-btn:disabled, .zq-btn.disabled { cursor: not-allowed; pointer-events: none; opacity: 0.6; }
@media (max-width: 575px) {
  .zq-btn { padding: 18px 34px; font-size: 16px; }
  .zq-btn--lg { padding: 18px 40px; }
}

/* Textlink mit Pfeil */
.zq-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  color: var(--zq-ink);
}
.zq-link svg { transition: transform var(--zq-fast); }
.zq-link:hover { color: var(--zq-red); }
.zq-link:hover svg { transform: translate(3px, -3px); }
.zq-section--dark .zq-link { color: #fff; }

/* --------------------------------------------------------------------------
   7. Kopfbereich / Navigation
   -------------------------------------------------------------------------- */

.zq-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--zq-bg);
  border-bottom: 1px solid transparent;
  transition: border-color var(--zq-fast), box-shadow var(--zq-fast);
}
.zq-header[data-scrolled='true'] {
  border-bottom-color: var(--zq-line);
  box-shadow: 0 2px 20px rgb(0 0 0 / 0.05);
}
/* Kein backdrop-filter auf dem Header: er würde zum Bezugsrahmen für das
   fixed positionierte Mobile-Menü und das Menü bliebe 100 px hoch. */

.zq-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--zq-s-3);
  min-height: var(--zq-nav-h);
}

.zq-logo { display: flex; align-items: center; flex-shrink: 0; }
.zq-logo img, .zq-logo svg { height: 36px; width: auto; display: block; }
@media (max-width: 480px) { .zq-logo img, .zq-logo svg { height: 30px; } }

.zq-nav { display: flex; }
.zq-nav > ul {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.zq-nav > ul > li {
  display: inline-flex;
  align-items: center;
  min-height: var(--zq-nav-h);
  margin: 0;
  padding: 0 17px;
  position: relative;
}

.zq-nav > ul > li > a {
  display: inline-flex;
  align-items: center;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  color: var(--zq-ink);
  opacity: 0.85;
  transition: color var(--zq-fast), opacity var(--zq-fast);
}
.zq-nav > ul > li > a:hover { opacity: 1; }

/* Roter Unterstrich, der beim Hover einläuft */
.zq-nav > ul > li > a > span { position: relative; padding: 0 8px; }
.zq-nav > ul > li > a > span::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--zq-red);
  transform: scaleX(0);
  transition: transform var(--zq-fast);
}
.zq-nav > ul > li > a:hover > span::after { transform: scaleX(1); }

/* Aktiver Menüpunkt: rot plus dauerhafter Unterstrich */
.zq-nav > ul > li.is-current > a { color: var(--zq-red); opacity: 1; }
.zq-nav > ul > li.is-current > a > span::after { transform: scaleX(1); }
.zq-nav__home.is-current > a { color: var(--zq-red); }
.zq-nav__home svg { display: block; }

/* Schaltfläche rechts: der Durchstarten-Button (eigener Abschnitt 29) */
.zq-nav > ul > li.zq-nav__cta { padding-right: 0; }
.zq-nav > ul > li.zq-nav__cta > a > span::after { display: none; }

/* Untermenü */
.zq-nav__sub {
  position: absolute;
  top: 100%;
  left: 4px;
  min-width: 280px;
  margin: 0;
  padding: 0.75rem 0;
  list-style: none;
  background: #fff;
  border-radius: var(--zq-radius);
  box-shadow: 0 16px 40px rgb(0 0 0 / 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--zq-fast), transform var(--zq-fast), visibility var(--zq-fast);
}
.zq-nav > ul > li:hover > .zq-nav__sub,
.zq-nav > ul > li:focus-within > .zq-nav__sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.zq-nav__sub li { margin: 0; width: 100%; }
.zq-nav__sub a {
  display: block;
  padding: 0.65rem 1.5rem;
  font-size: 17px;
  font-weight: 400;
  color: var(--zq-ink);
  white-space: nowrap;
}
.zq-nav__sub a:hover { color: var(--zq-red); background: var(--zq-soft); }
.zq-nav__sub li:first-child a { border-radius: var(--zq-radius) var(--zq-radius) 0 0; }
.zq-nav__sub li:last-child a { border-radius: 0 0 var(--zq-radius) var(--zq-radius); }
.zq-nav__sub li.is-current > a { color: var(--zq-red); font-weight: 700; }

/* Burger */
.zq-burger {
  display: none;
  width: 44px; height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
}
.zq-burger span {
  position: absolute;
  left: 10px;
  width: 24px; height: 2px;
  background: var(--zq-ink);
  transition: transform var(--zq-fast), opacity var(--zq-fast);
}
.zq-burger span:nth-child(1) { top: 17px; }
.zq-burger span:nth-child(2) { top: 25px; }
.zq-burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.zq-burger[aria-expanded='true'] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* Mobile Navigation */
@media (max-width: 991px) {
  .zq-burger { display: block; }

  .zq-nav {
    position: fixed;
    inset: var(--zq-nav-h) 0 0;
    display: block;
    padding: var(--zq-s-4) var(--zq-gutter) var(--zq-s-6);
    background: var(--zq-bg);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--zq-fast), transform var(--zq-fast), visibility var(--zq-fast);
  }
  .zq-nav[data-open='true'] { opacity: 1; visibility: visible; transform: none; }

  .zq-nav > ul { display: block; }
  .zq-nav > ul > li {
    display: block;
    min-height: 0;
    padding: 0;
    border-bottom: 1px solid var(--zq-line);
  }
  .zq-nav > ul > li > a { display: block; padding: 1.1rem 0; font-size: 26px; }
  .zq-nav > ul > li > a > span { padding: 0; }
  .zq-nav > ul > li > a > span::after { display: none; }

  .zq-nav__sub {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    padding: 0 0 0.75rem 1rem;
  }
  .zq-nav__sub a { padding: 0.5rem 0; font-size: 19px; }

  .zq-nav > ul > li.zq-nav__cta { border: 0; margin-top: var(--zq-s-3); }
  .zq-nav > ul > li.zq-nav__cta > a.zq-launch {
    display: inline-flex;
    padding: 0.6rem 1.5rem 0.6rem 0.65rem;
    font-size: 20px;
  }
}

/* --------------------------------------------------------------------------
   8. Bühne (Startseite)
   -------------------------------------------------------------------------- */

.zq-hero {
  background: var(--zq-ink);
  color: var(--zq-on-dark);
  overflow: hidden;
}

.zq-hero__grid {
  display: grid;
  /* Spaltenteilung wie im Original: col-lg-5 / col-lg-7 */
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: stretch;
}
@media (max-width: 991px) { .zq-hero__grid { grid-template-columns: 1fr; } }

.zq-hero__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--zq-s-7) var(--zq-gutter) var(--zq-s-7)
           max(var(--zq-gutter), calc((100vw - var(--zq-container)) / 2 + var(--zq-gutter)));
}
@media (max-width: 991px) { .zq-hero__text { padding-inline: var(--zq-gutter); } }

.zq-hero__stroke {
  position: relative;
  z-index: 0;
  left: -15px;
  color: #2f2f2f;
}

/* Die Überschrift rückt um 1,5em nach oben und überlagert die Konturschrift */
.zq-hero h1 {
  position: relative;
  z-index: 1;
  margin-top: -1.5em;
  color: #fff;
  font-size: clamp(2.5rem, 1.2rem + 4vw, 3.75rem);   /* 40 → 60 */
  line-height: 1.12;
}
@media (max-width: 767px) { .zq-hero h1 { margin-top: -1.2em; } }
.zq-hero h1 strong,
.zq-hero h1 em { color: var(--zq-red); font-style: normal; }

.zq-hero__kicker {
  margin-top: 40px;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}

.zq-hero__lead { margin-top: 20px; max-width: 320px; }

.zq-hero__cta { margin-top: 30px; align-self: flex-start; }

.zq-hero__media { position: relative; display: flex; align-items: flex-end; }
.zq-hero__media video,
.zq-hero__media img {
  width: 100%;
  height: 100%;
  min-height: 550px;
  object-fit: cover;
}
@media (max-width: 767px) { .zq-hero__media video, .zq-hero__media img { min-height: 320px; } }

.zq-hero__social {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 20px;
  padding: 28px 65px;
  background: #fff;
  border-top-left-radius: var(--zq-radius-lg);
}
@media (max-width: 575px) { .zq-hero__social { padding: 18px 26px; } }
.zq-hero__social a {
  color: var(--zq-ink);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
}
.zq-hero__social a:hover { color: var(--zq-red); }

/* --------------------------------------------------------------------------
   9. Seitentitel (Unterseiten)
   -------------------------------------------------------------------------- */

.zq-pagehead {
  position: relative;
  padding-block: var(--zq-s-7) var(--zq-s-6);
  /* Das Phantomwort ragt bewusst über den Rand hinaus */
  overflow: visible;
}
.zq-pagehead__inner { position: relative; z-index: 1; max-width: 58%; }
@media (max-width: 991px) { .zq-pagehead__inner { max-width: 100%; } }

/* Der Seitentitel ist 70px – nur das Hintergrundwort ist 130px */
.zq-pagehead h1 { font-size: var(--zq-t-h1); line-height: 1.15; }
.zq-pagehead__lead { margin-top: var(--zq-s-3); max-width: 52ch; }
.zq-pagehead__cta { margin-top: var(--zq-s-4); }

/* --------------------------------------------------------------------------
   10. Leistungs-Kacheln
   -------------------------------------------------------------------------- */

.zq-services-band { position: relative; z-index: 1; }
/* Die obere Kachelhälfte liegt noch auf der grauen Fläche darüber */
.zq-services-band::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0 0 50% 0;
  background: var(--zq-soft);
}

.zq-services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 30px;
}

.zq-service {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  min-height: 280px;
  padding: var(--zq-s-5) var(--zq-s-3);
  text-align: center;
  background: #fff;
  border: 0;
  border-radius: var(--zq-radius-lg);
  box-shadow: 0 14px 34px rgb(10 10 10 / 0.07), 0 2px 6px rgb(10 10 10 / 0.04);
  color: var(--zq-ink);
  overflow: hidden;
  transition: transform var(--zq-slow), border-color var(--zq-slow), box-shadow var(--zq-slow);
}
.zq-service:hover, .zq-service:focus-within {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px rgb(230 57 70 / 0.22), 0 4px 10px rgb(10 10 10 / 0.06);
}
.zq-service__more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: -10px;
  font-family: var(--zq-font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--zq-red);
  transition: color var(--zq-fast), transform var(--zq-fast);
}
.zq-service__more svg { width: 14px; height: 14px; }
.zq-service:hover .zq-service__more { color: #fff; transform: translateX(4px); }
.zq-service::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--zq-red);
  transform: translateY(101%);
  transition: transform var(--zq-slow);
}
.zq-service:hover::before,
.zq-service:focus-within::before { transform: translateY(0); }
.zq-service > * { position: relative; z-index: 1; }
.zq-service:hover, .zq-service:focus-within { color: #fff; }
.zq-service:hover h3, .zq-service:focus-within h3 { color: #fff; }

.zq-service__icon {
  width: 110px;
  height: 110px;
  object-fit: contain;
  transition: transform var(--zq-slow), filter var(--zq-slow);
}
.zq-service:hover .zq-service__icon { transform: translateY(-4px); filter: brightness(0) invert(1); }

.zq-service h3 { font-size: var(--zq-t-h5); transition: color var(--zq-fast); }
.zq-service__link { position: absolute; inset: 0; z-index: 2; }
.zq-service__text { font-size: var(--zq-t-small); max-width: 30ch; }

/* --------------------------------------------------------------------------
   11. Referenz-Kacheln
   -------------------------------------------------------------------------- */

.zq-works {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 70px;
}
@media (max-width: 767px) { .zq-works { gap: 40px; } }

.zq-work { position: relative; }

/* Hochformat wie im Original (780 × 930), Bild abgedunkelt */
.zq-work__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 780 / 930;
  border-radius: var(--zq-radius-lg);
  background: #101010;
}
.zq-work__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
  transition: transform 1s var(--zq-ease), opacity 1s var(--zq-ease);
}
.zq-work:hover .zq-work__media img { transform: scale(1.1); opacity: 0.5; }

/* Verlauf sorgt für Lesbarkeit der weißen Schrift */
.zq-work__media::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 250px;
  background: linear-gradient(rgb(0 0 0 / 0), rgb(0 0 0 / 0.46));
  pointer-events: none;
}

/* --- Ausprägung "grid" (Referenz-Übersicht): Meta liegt IM Bild --------- */
.zq-work--grid .zq-work__meta {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: clamp(1.5rem, 3vw, 50px) clamp(1.5rem, 3.5vw, 60px);
  color: #fff;
  pointer-events: none;
}
.zq-work--grid .zq-work__client {
  display: block;
  margin-bottom: 8px;
  font-size: 16px;
  line-height: 1.2;
  color: #fff;
}
.zq-work--grid .zq-work__title {
  font-size: var(--zq-t-h5);
  color: #fff;
}

/* --- Ausprägung "teaser" (Startseite): Meta steht zentriert darunter ---- */
.zq-work--teaser .zq-work__media { background: transparent; }
.zq-work--teaser .zq-work__media img { opacity: 1; }
.zq-work--teaser .zq-work__media::after { display: none; }
.zq-work--teaser:hover .zq-work__media img { opacity: 1; }

.zq-work--teaser .zq-work__meta {
  margin-top: 30px;
  text-align: center;
}
.zq-work--teaser .zq-work__title {
  font-size: var(--zq-t-h5);
  color: var(--zq-ink);
  transition: color var(--zq-fast);
}
.zq-work--teaser:hover .zq-work__title { color: var(--zq-red); }
.zq-work--teaser .zq-work__client {
  display: block;
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.2;
  color: var(--zq-muted);
}

.zq-work__link { position: absolute; inset: 0; z-index: 2; }

/* Kategoriefilter */
.zq-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 0 90px;
  padding: 0;
  list-style: none;
}
.zq-filters li { margin: 0; }
.zq-filters button {
  padding: 10px 21px;
  border: 0;
  border-radius: var(--zq-radius);
  background: none;
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--zq-ink);
  cursor: pointer;
  transition: color var(--zq-fast);
}
.zq-filters button::after {
  content: '';
  display: block;
  height: 2px;
  margin-top: 5px;
  background: currentColor;
  transform: scaleX(0);
  transition: transform var(--zq-fast);
}
.zq-filters button:hover { color: var(--zq-red); }
.zq-filters button:hover::after { transform: scaleX(1); }
.zq-filters button[aria-pressed='true'] { color: var(--zq-red); }
.zq-filters button[aria-pressed='true']::after { transform: scaleX(1); }

.zq-work[hidden] { display: none; }

/* --------------------------------------------------------------------------
   12. Steckbrief (Referenz-Detailseite)
   -------------------------------------------------------------------------- */

.zq-factsheet {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 1rem;
  padding-block: 40px;
  margin: 0;
}
.zq-factsheet > div {
  padding: 1.25rem 1.4rem 1.35rem;
  border-radius: var(--zq-radius-lg);
  background: #fff;
  border: 1px solid var(--zq-line);
}
.zq-factsheet dt {
  margin-bottom: 0.5rem;
  font-family: var(--zq-font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--zq-red);
}
.zq-factsheet dd { margin: 0; font-size: 1.0625rem; font-weight: 600; line-height: 1.4; color: var(--zq-ink); }
.zq-factsheet dd a { display: inline-flex; align-items: center; gap: 0.4rem; }
.zq-factsheet a:hover { color: var(--zq-red); }
.zq-factsheet__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.zq-factsheet__tags span {
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--zq-soft);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--zq-ink);
}

/* Titelbild über die volle Breite, mit weißem Vorlauf wie im Original */
.zq-cover {
  position: relative;
  min-height: clamp(320px, 40vw, 510px);
  margin-top: 100px;
  border-radius: var(--zq-radius-lg);
  overflow: hidden;
  background: rgb(25 25 25);
}
.zq-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 767px) { .zq-cover { margin-top: 50px; } }

/* --------------------------------------------------------------------------
   13. Blöcke
   -------------------------------------------------------------------------- */

.zq-block { margin-block: var(--zq-s-7); }
.zq-block:first-child { margin-top: 0; }
.zq-block--flush { margin-block: 0; }

.zq-block--soft,
.zq-block--dark {
  padding-block: var(--zq-s-7);
  margin-block: var(--zq-s-6);
}
.zq-block--soft { background: var(--zq-soft); }
.zq-block--dark { background: var(--zq-ink); color: var(--zq-on-dark); }
.zq-block--dark h2, .zq-block--dark h3, .zq-block--dark h4 { color: #fff; }

/* Text + Bild */
.zq-textmedia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.zq-textmedia--left .zq-textmedia__media { order: -1; }
.zq-textmedia__media img { border-radius: var(--zq-radius-lg); }
@media (max-width: 767px) { .zq-textmedia--left .zq-textmedia__media { order: 0; } }

/* Galerie */
.zq-gallery { display: grid; gap: clamp(0.75rem, 2vw, 1.5rem); }
.zq-gallery[data-cols='2'] { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.zq-gallery[data-cols='3'] { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.zq-gallery[data-cols='4'] { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.zq-gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--zq-radius-lg); }
.zq-gallery a { display: block; overflow: hidden; border-radius: var(--zq-radius-lg); }
.zq-gallery a img { transition: transform var(--zq-slow); }
.zq-gallery a:hover img { transform: scale(1.04); }

/* Slider – reines CSS Scroll-Snapping, kein JavaScript nötig */
.zq-slider { position: relative; }
.zq-slider__track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.zq-slider__track::-webkit-scrollbar { display: none; }
@media (hover: hover) and (pointer: fine) {
  .zq-slider__track { cursor: grab; }
  .zq-slider__track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
  .zq-slider__track.is-dragging img { pointer-events: none; }
  .zq-slider__track img, .zq-slider__track a { -webkit-user-drag: none; user-select: none; }
}
.zq-slider__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
}
.zq-slider__slide img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--zq-radius-lg); }
.zq-slider__track { border-radius: var(--zq-radius-lg); }

.zq-slider__controls {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 20px;
  height: 60px;
  padding: 0 30px;
  background: #fff;
  border-top-left-radius: var(--zq-radius-lg);
  color: var(--zq-ink);
}
.zq-slider__controls button {
  display: grid;
  place-items: center;
  width: auto; height: auto;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  transition: color var(--zq-fast), transform var(--zq-fast);
}
.zq-slider__controls button:hover { color: var(--zq-red); transform: scale(1.15); }
.zq-slider__count {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--zq-ink);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 575px) {
  .zq-slider__controls { height: 48px; padding: 0 18px; gap: 14px; }
}

/* Video-Player im ZQUAD-Erscheinungsbild
   Abspielfläche wie im Original: 70px-Ring mit 2px Rand in Rot,
   Beschriftung rechts daneben. Danach eigene Steuerleiste statt
   der Browser-Bedienelemente. */

.zq-player { position: relative; }

.zq-player__stage {
  position: relative;
  aspect-ratio: 16 / 9;   /* wird per style-Attribut überschrieben */
  overflow: hidden;
  border-radius: var(--zq-radius-lg);
  background: var(--zq-ink);
}

.zq-player__poster,
.zq-player__video,
.zq-player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  display: block;
}
.zq-player__video { object-fit: contain; background: var(--zq-ink); }

/* Das Video steht im Markup nach dem Standbild und würde es mit seinem
   dunklen Hintergrund verdecken. Bis zum Klick liegt das Standbild oben;
   beim Abspielen wird es per JavaScript entfernt. */
.zq-player__poster { z-index: 2; }

/* ---- Abspielfläche ---- */
.zq-player__start {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 27px;
  width: 100%;
  padding: 0;
  border: 0;
  /* Nur so viel Abdunklung, dass der rote Ring trägt – vorher wirkten
     die Standbilder flau. */
  background: rgb(16 16 16 / 0.06);
  color: var(--zq-red);
  font-family: inherit;
  cursor: pointer;
  transition: background var(--zq-fast);
}
.zq-player__start:hover { background: rgb(16 16 16 / 0.22); }

.zq-player__ring {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 70px;
  height: 70px;
  padding-left: 4px;
  color: var(--zq-red);
}
.zq-player__ring::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid currentColor;
  border-radius: 50%;
  transition: transform var(--zq-slow);
}
.zq-player__start:hover .zq-player__ring::after { transform: scale(1.12); }

.zq-player__startlabel {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 1px 12px rgb(0 0 0 / 0.5);
}
@media (max-width: 480px) {
  .zq-player__start { flex-direction: column; gap: 1rem; }
  .zq-player__ring { width: 56px; height: 56px; }
  .zq-player__startlabel { font-size: 15px; }
}

/* ---- Steuerleiste ---- */
.zq-player__controls {
  position: absolute;
  z-index: 4;
  right: 0; bottom: 0; left: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 2.5rem 1.25rem 1rem;
  background: linear-gradient(rgb(0 0 0 / 0), rgb(0 0 0 / 0.75));
  color: #fff;
  opacity: 1;
  transition: opacity var(--zq-fast);
}
.zq-player.is-idle .zq-player__controls { opacity: 0; pointer-events: none; }
.zq-player__controls[hidden] { display: none; }

.zq-player__btn {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 36px; height: 36px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
  transition: color var(--zq-fast), transform var(--zq-fast);
}
.zq-player__btn:hover { color: var(--zq-red); transform: scale(1.08); }
.zq-player__btn svg { display: block; }
/* Ohne diese Zeile gewinnt die Regel darüber gegen das hidden-Attribut
   und Play- und Pause-Symbol werden übereinander gezeichnet. */
.zq-player__btn svg[hidden] { display: none; }

.zq-player__time {
  flex-shrink: 0;
  min-width: 3.25rem;
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: rgb(255 255 255 / 0.85);
}

.zq-player__track {
  position: relative;
  flex: 1;
  height: 4px;
  background: rgb(255 255 255 / 0.25);
  cursor: pointer;
}
.zq-player__track::before {
  /* größere Trefferfläche, ohne die Leiste optisch zu verdicken */
  content: '';
  position: absolute;
  inset: -10px 0;
}
.zq-player__buffer {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: rgb(255 255 255 / 0.3);
}
.zq-player__progress {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--zq-red);
}
.zq-player__knob {
  position: absolute;
  top: 50%;
  right: 0;
  width: 12px; height: 12px;
  transform: translate(50%, -50%) scale(0);
  border-radius: 50%;
  background: var(--zq-red);
  transition: transform var(--zq-fast);
}
.zq-player__track:hover .zq-player__knob,
.zq-player__track:focus-visible .zq-player__knob { transform: translate(50%, -50%) scale(1); }

.zq-player__note {
  padding: 0.65rem 0 0;
  font-size: 0.8125rem;
  color: var(--zq-muted);
}

/* Zitat */
.zq-quote {
  max-width: 60ch;
  margin-inline: auto;
  text-align: center;
}
.zq-quote__text {
  font-size: var(--zq-t-h4);
  font-weight: 700;
  line-height: 1.45;
  color: var(--zq-ink);
}
.zq-block--dark .zq-quote__text { color: #fff; }
.zq-block--dark blockquote, .zq-section--dark blockquote { background: rgb(255 255 255 / 0.07); }
.zq-quote__stars { display: flex; justify-content: center; gap: 0.25rem; margin-bottom: 1.5rem; color: var(--zq-red); }
.zq-quote__author { margin-top: 1.5rem; font-weight: 700; color: var(--zq-ink); }
.zq-block--dark .zq-quote__author { color: #fff; }
.zq-quote__role { font-size: var(--zq-t-small); color: var(--zq-muted); }
.zq-quote__avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; margin: 0 auto 1.25rem; }

/* Zahlen */
.zq-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: var(--zq-s-4);
  text-align: center;
}
.zq-fact__value {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 700;
  line-height: 1;
  color: var(--zq-ink);
}
.zq-block--dark .zq-fact__value { color: #fff; }
.zq-fact__value span { color: var(--zq-red); }
.zq-fact__label {
  margin-top: 0.75rem;
  font-family: var(--zq-font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--zq-muted);
}

/* Listen, Ablauf und Karten – die drei Formen der alten Website */
.zq-steps {
  display: grid;
  gap: var(--zq-s-4) clamp(2rem, 5vw, 4.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: zqstep;
}
.zq-steps[data-cols='2'] { grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); }
.zq-steps[data-cols='3'] { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.zq-steps[data-cols='auto'] { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }

.zq-step { margin: 0; }
.zq-step h3 { font-size: var(--zq-t-h5); margin-bottom: 12px; }
.zq-step p { margin: 0; }
.zq-block--dark .zq-step p { color: var(--zq-on-dark); }

/* --- Ablauf: rote Kreise mit Nummer -------------------------------------- */
.zq-steps--process .zq-step::before {
  counter-increment: zqstep;
  content: counter(zqstep, decimal-leading-zero);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  margin-bottom: 35px;
  border-radius: 50%;
  background: var(--zq-red);
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
}
.zq-steps--process { gap: var(--zq-s-5) clamp(2rem, 4vw, 3.5rem); }

/* Bei fünf Schritten auf drei Spalten bleibt die zweite Zeile halb leer.
   Flexbox statt Raster, damit eine unvollständige Zeile mittig sitzt. */
.zq-steps--zentriert {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.zq-steps--zentriert > .zq-step {
  flex: 0 1 clamp(240px, calc((100% - 2 * clamp(2rem, 4vw, 3.5rem)) / 3), 380px);
}
@media (max-width: 767px) {
  .zq-steps--zentriert > .zq-step { flex-basis: 100%; }
}

/* --- Konturziffern: die Überschrift rutscht in die Zahl hinein ------------ */
.zq-steps--stroke { gap: var(--zq-s-5) clamp(2rem, 6vw, 5rem); }
.zq-steps--stroke .zq-step { position: relative; }

.zq-step__stroke {
  display: block;
  font-size: var(--zq-t-display);
  font-weight: 700;
  line-height: 1.15;
  color: var(--zq-line);
  opacity: 0.16;
  -webkit-text-stroke: 1px currentColor;
  -webkit-text-fill-color: transparent;
  user-select: none;
}
.zq-block--dark .zq-step__stroke { color: var(--zq-line); }

/* -3.2em bezogen auf die Überschriftgröße, wie im Original */
.zq-steps--stroke .zq-step h3 {
  position: relative;
  margin-top: -3.2em;
  margin-bottom: 40px;
  font-size: var(--zq-t-h5);
}
@media (max-width: 767px) {
  .zq-steps--stroke .zq-step h3 { margin-top: -2.4em; }
}
.zq-steps--stroke .zq-step p { max-width: 90%; }

/* --- Liste: Symbol links, Text rechts ------------------------------------ */
.zq-steps--list .zq-step { display: flex; align-items: flex-start; }
.zq-step__media {
  flex: 0 0 80px;
  min-width: 80px;
  margin-right: 35px;
  color: var(--zq-red);
}
.zq-block--dark .zq-step__media { color: #fff; }
.zq-step__media svg { width: 56px; height: 56px; }
.zq-steps--list { gap: var(--zq-s-5) clamp(2rem, 5vw, 4.5rem); }

/* --- Karten: gerahmt ------------------------------------------------------ */
.zq-steps--cards .zq-step {
  padding: 40px 30px;
  border-radius: var(--zq-radius-lg);
  box-shadow: inset 0 0 0 1px var(--zq-line);
  transition: box-shadow var(--zq-fast);
}
.zq-steps--cards .zq-step:hover { box-shadow: inset 0 0 0 1px var(--zq-ink); }
.zq-block--dark .zq-steps--cards .zq-step { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18); }
.zq-block--dark .zq-steps--cards .zq-step:hover { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.5); }
.zq-steps--cards { gap: 30px; }

/* Vorher / Nachher */
.zq-compare {
  position: relative;
  overflow: hidden;
  border-radius: var(--zq-radius-lg);
  aspect-ratio: 16 / 9;
  cursor: ew-resize;
  user-select: none;
  touch-action: none;
}
.zq-compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.zq-compare__after { clip-path: inset(0 0 0 var(--pos, 50%)); }
.zq-compare__handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos, 50%);
  width: 2px;
  background: #fff;
  pointer-events: none;
}
.zq-compare__handle::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
  border: 2px solid #fff;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.25);
  backdrop-filter: blur(4px);
}
.zq-compare__label {
  position: absolute;
  top: 1rem;
  padding: 0.35rem 0.85rem;
  background: rgb(0 0 0 / 0.6);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
}
.zq-compare__label--before { left: 1rem; }
.zq-compare__label--after { right: 1rem; }
.zq-compare input[type='range'] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
  margin: 0;
}

/* CTA */
.zq-cta { text-align: center; padding-block: var(--zq-s-7); }
.zq-block .zq-cta { border-radius: var(--zq-radius-xl); }
.zq-cta--dark { background: var(--zq-ink); color: var(--zq-on-dark); }
.zq-cta--dark h2 { color: #fff; }
.zq-cta--red { background: var(--zq-red); color: rgb(255 255 255 / 0.85); }
.zq-cta--red h2 { color: #fff; }
.zq-cta--soft { background: var(--zq-soft); }
.zq-cta__text { max-width: 52ch; margin: 1.5rem auto 0; }
.zq-cta .zq-btn { margin-top: var(--zq-s-4); }

/* Abstand */
.zq-spacer--sm { height: var(--zq-s-4); }
.zq-spacer--md { height: var(--zq-s-6); }
.zq-spacer--lg { height: var(--zq-s-8); }
.zq-spacer hr { margin: 0; height: 100%; border: 0; border-top: 1px solid var(--zq-line); }

/* Bildunterschrift */
.zq-caption {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: var(--zq-muted);
}

/* --------------------------------------------------------------------------
   14. FAQ
   -------------------------------------------------------------------------- */

.zq-faq { max-width: 800px; margin-inline: auto; }
.zq-faq details {
  border-bottom: 1px solid var(--zq-line);
}
.zq-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 0;
  font-size: var(--zq-t-h5);
  font-weight: 700;
  color: var(--zq-ink);
  cursor: pointer;
  list-style: none;
}
.zq-faq summary::-webkit-details-marker { display: none; }
.zq-faq summary::after {
  content: '';
  flex-shrink: 0;
  width: 14px; height: 14px;
  border-right: 2px solid var(--zq-red);
  border-bottom: 2px solid var(--zq-red);
  transform: rotate(45deg) translateY(-25%);
  transition: transform var(--zq-fast);
}
.zq-faq details[open] summary::after { transform: rotate(-135deg) translateY(-25%); }
.zq-faq__answer { padding-bottom: 1.5rem; }

/* --------------------------------------------------------------------------
   15. Formulare
   Aufbau wie im Original: kein Feldrahmen, nur ein Unterstrich, und die
   Beschriftung schwebt beim Ausfüllen nach oben.
   -------------------------------------------------------------------------- */

.zq-form { padding: 70px 8.3333% 90px; background: var(--zq-soft); border-radius: var(--zq-radius-xl); }
@media (max-width: 767px) { .zq-form { padding: 40px 24px 50px; } }
.zq-form--plain { padding: 0; background: none; }

.zq-form__row {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 767px) {
  .zq-form__row { grid-gap: 0; grid-template-columns: 1fr; }
}

.zq-field { position: relative; display: block; margin-bottom: 30px; }

.zq-field input,
.zq-field textarea,
.zq-field select {
  display: block;
  width: 100%;
  margin: 0;
  padding: 10px 0;
  font-family: inherit;
  font-size: 16px;
  color: var(--zq-ink);
  border: none;
  border-bottom: 1px solid var(--zq-field);
  outline: none;
  background-color: transparent;
  appearance: none;
  transition: all 300ms;
}
.zq-field textarea { max-width: 100%; min-height: 120px; resize: vertical; }

/* Eigener Pfeil für Auswahlfelder */
.zq-field select {
  background-image: url("data:image/svg+xml;utf8,<svg fill='%23D6D6D6' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0 bottom 50%;
  background-size: 18px 18px;
  padding-right: 24px;
}

.zq-field input:focus,
.zq-field textarea:focus,
.zq-field select:focus { border-bottom-color: var(--zq-ink); }

/* Schwebende Beschriftung – steht im Markup NACH dem Feld */
.zq-field label {
  position: absolute;
  top: 10px;
  left: 0;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--zq-ink);
  pointer-events: none;
  user-select: none;
  transition: all 300ms;
}
.zq-field input:focus ~ label,
.zq-field input:not(:placeholder-shown) ~ label,
.zq-field textarea:focus ~ label,
.zq-field textarea:not(:placeholder-shown) ~ label,
.zq-field select:focus ~ label,
.zq-field select:valid ~ label { top: -20px; opacity: 0.4; }

.zq-field label .req { color: var(--zq-red); }

.zq-field[data-error='true'] input,
.zq-field[data-error='true'] textarea,
.zq-field[data-error='true'] select { border-bottom-color: #dc3545; }
.zq-field[data-error='true'] label { color: #dc3545; }

.zq-field__error {
  position: absolute;
  right: 0;
  top: -20px;
  margin: 0;
  font-size: 13px;
  color: #dc3545;
}

::placeholder { color: var(--zq-ink); opacity: 1; }
:focus::placeholder { opacity: 0; }

/* Einwilligung */
.zq-check { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 30px; }
.zq-check input { width: 18px; height: 18px; margin-top: 4px; flex-shrink: 0; accent-color: var(--zq-red); border-radius: var(--zq-radius-sm); }
.zq-check label { font-size: 16px; font-weight: 400; color: var(--zq-body); margin: 0; }
.zq-check[data-error='true'] label { color: #dc3545; }

/* Honigtopf – für Menschen unsichtbar, für automatische Einsendungen verlockend */
.zq-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Rückmeldungen */
.zq-notice {
  padding: 18px 22px;
  margin-bottom: 30px;
  border-radius: var(--zq-radius-lg);
  font-size: 16px;
  font-weight: 500;
}
.zq-notice--ok    { background: #e6f4ea; color: #14612f; }
.zq-notice--error { background: #fdecec; color: #9c1f22; }

/* Mehrstufige Anfrage */
.zq-steps-form__nav {
  display: flex;
  gap: 10px;
  margin: 0 0 40px;
  padding: 0;
  list-style: none;
}
.zq-steps-form__nav li {
  flex: 1;
  margin: 0;
  padding-top: 12px;
  border-top: 3px solid var(--zq-field);
  font-family: var(--zq-font-mono);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--zq-muted);
  transition: border-color var(--zq-fast), color var(--zq-fast);
}
.zq-steps-form__nav li[data-state='active'],
.zq-steps-form__nav li[data-state='done'] {
  border-top-color: var(--zq-red);
  color: var(--zq-ink);
}

.zq-steps-form__panel[hidden] { display: none; }

.zq-steps-form__actions {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 40px;
}

/* Auswahlkacheln */
.zq-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 15px;
  margin-bottom: 30px;
}
.zq-choice { position: relative; }
.zq-choice input {
  position: absolute;
  opacity: 0;
  width: 100%; height: 100%;
  margin: 0;
  cursor: pointer;
}
.zq-choice span {
  display: block;
  padding: 20px 15px;
  border-radius: var(--zq-radius);
  box-shadow: inset 0 0 0 1px var(--zq-field);
  background: #fff;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--zq-ink);
  transition: all 300ms;
}
.zq-choice input:hover + span { box-shadow: inset 0 0 0 1px var(--zq-ink); }
.zq-choice input:checked + span { box-shadow: inset 0 0 0 1px var(--zq-red); background: var(--zq-red); color: #fff; }
.zq-choice input:focus-visible + span { outline: 3px solid var(--zq-red); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   16. Team
   Aufbau wie im Original: Bild, darunter zentrierter Name, und eine rote
   Leiste mit den Profilen, die beim Überfahren von unten einfährt.
   -------------------------------------------------------------------------- */

.zq-team {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
  max-width: 900px;
  margin-inline: auto;
}

.zq-member__photo {
  position: relative;
  overflow: hidden;
  border-radius: var(--zq-radius-lg);
  aspect-ratio: 6 / 7;
  background: var(--zq-soft);
}
.zq-member__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--zq-slow);
}
.zq-member:hover .zq-member__photo img { transform: scale(1.05); }

.zq-member__socials {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 16px 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  text-align: center;
  color: #fff;
  background: var(--zq-red);
  transform: translateY(100%);
  transition: transform 300ms var(--zq-ease);
}
.zq-member:hover .zq-member__socials,
.zq-member:focus-within .zq-member__socials { transform: translateY(0); }

.zq-member__socials a { display: inline-flex; color: #fff; }
.zq-member__socials a:hover { transform: scale(1.15); color: #fff; }

/* Auf Touchgeräten gibt es kein Überfahren – die Leiste bleibt sichtbar */
@media (hover: none) {
  .zq-member__socials { transform: translateY(0); }
}

.zq-member__content { padding: 25px 15px 0; text-align: center; }
.zq-member__name { font-size: 20px; }
.zq-member__role {
  margin: 8px 0 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  color: var(--zq-muted);
}
.zq-member__bio { margin-top: 12px; font-size: 16px; }


/* --------------------------------------------------------------------------
   17. Seitenwechsel (vorherige/nächste Referenz)
   -------------------------------------------------------------------------- */

.zq-pagenav {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--zq-s-3);
  padding-block: var(--zq-s-5);
  border-top: 1px solid #d6d6d6;
  overflow: hidden;
}
.zq-pagenav__prev { text-align: right; padding-right: clamp(1rem, 6vw, 100px); }
.zq-pagenav__label {
  display: block;
  font-family: var(--zq-font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--zq-muted);
  margin-bottom: 0.35rem;
}
.zq-pagenav__title { font-size: var(--zq-t-h5); }
.zq-pagenav a:hover .zq-pagenav__title { color: var(--zq-red); }
.zq-pagenav__next { text-align: left; padding-left: clamp(1rem, 6vw, 100px); }
.zq-pagenav__all {
  position: relative;
  display: grid;
  place-items: center;
  width: 60px; height: 60px;
  border: 1px solid #d6d6d6;
  border-radius: 50%;
  background: #fff;
  transition: background var(--zq-fast), border-color var(--zq-fast), color var(--zq-fast);
}
/* Senkrechte Trennlinie, die durch den Kreis läuft */
.zq-pagenav__all::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -100%;
  left: 50%;
  height: 999em;
  border-left: 1px solid #d6d6d6;
}
.zq-pagenav__all:hover { background: var(--zq-ink); border-color: var(--zq-ink); color: #fff; }
@media (max-width: 640px) {
  .zq-pagenav { grid-template-columns: 1fr; text-align: center; }
  .zq-pagenav__prev, .zq-pagenav__next { text-align: center; padding: 0; }
  .zq-pagenav__all { margin-inline: auto; }
  .zq-pagenav__all::before { display: none; }
}

/* --------------------------------------------------------------------------
   18. Fußbereich
   -------------------------------------------------------------------------- */

.zq-footer {
  padding-block: 95px;
  background: var(--zq-ink);
  color: var(--zq-on-dark);
  font-size: 16px;
}
@media (max-width: 767px) { .zq-footer { padding-block: 60px; } }
.zq-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: var(--zq-s-4);
}
.zq-footer__label {
  margin-bottom: 1.6rem;
  color: #fff;
  font-size: 18px;
}
.zq-footer__label strong { color: #fff; }
.zq-footer a { display: inline-flex; align-items: center; gap: 0.5rem; color: #fff; }
.zq-footer a:hover { color: #fff; }
.zq-footer ul { list-style: none; margin: 0; padding: 0; }
.zq-footer li + li { margin-top: 0.6rem; }
.zq-footer__logo img { height: 40px; width: auto; }
.zq-footer__claim { margin-top: 0.5rem; color: var(--zq-muted); }
.zq-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-top: var(--zq-s-5);
  padding-top: var(--zq-s-3);
  border-top: 1px solid rgb(255 255 255 / 0.1);
  color: var(--zq-muted);
  font-size: 0.8125rem;
}

/* --------------------------------------------------------------------------
   19. Einblend-Animationen
   -------------------------------------------------------------------------- */

/* Inhalte werden NUR versteckt, wenn JavaScript sie auch wieder einblenden kann.
   Ohne JS (oder bei einem Skriptfehler) bleibt alles sichtbar. */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 700ms var(--zq-ease), transform 700ms var(--zq-ease);
    transition-delay: var(--reveal-delay, 0ms);
  }
  html.js [data-reveal].is-visible { opacity: 1; transform: none; }
}

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

/* --------------------------------------------------------------------------
   20. Druck
   -------------------------------------------------------------------------- */

@media print {
  .zq-header, .zq-footer, .zq-video__play, .zq-form { display: none !important; }
  body { color: #000; font-size: 11pt; }
  a::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
}

/* --------------------------------------------------------------------------
   21. Großansicht
   -------------------------------------------------------------------------- */

.zq-lightbox {
  max-width: min(92vw, 1400px);
  max-height: 92vh;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.zq-lightbox::backdrop { background: rgb(0 0 0 / 0.9); }
.zq-lightbox img { max-width: 100%; max-height: 92vh; width: auto; object-fit: contain; border-radius: var(--zq-radius-lg); }
.zq-lightbox__close {
  position: absolute;
  top: -3rem;
  right: 0;
  width: 44px; height: 44px;
  border: 0;
  background: none;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}
.zq-lightbox__close:hover { color: var(--zq-red); }

/* --------------------------------------------------------------------------
   22. Mustergrafiken (Plus-Raster)
   Im Original als "vlt-particle" über Bild- und Videoblöcke gelegt.
   -------------------------------------------------------------------------- */

.zq-particle {
  position: absolute;
  z-index: 0;
  max-width: 232px;
  width: 30vw;
  pointer-events: none;
  user-select: none;
}
.zq-particle--tr { top: -114px; right: -114px; }
.zq-particle--br { right: -120px; bottom: -80px; }
@media (max-width: 991px) { .zq-particle { display: none; } }

.zq-has-particle { position: relative; }
.zq-has-particle > *:not(.zq-particle) { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   23. Aufzählungen im Fließtext – roter Strich statt Aufzählungspunkt
   -------------------------------------------------------------------------- */

.zq-prose ul { list-style: none; padding-left: 0; }
.zq-prose ul li { display: flex; align-items: flex-start; }
.zq-prose ul li::before {
  content: '';
  flex: 0 0 10px;
  height: 1px;
  margin-top: 0.75em;
  margin-right: 20px;
  background: var(--zq-red);
}
.zq-prose ul li + li { margin-top: 25px; }
.zq-prose ul ul { margin-top: 12px; }

/* --------------------------------------------------------------------------
   24. Roter Abschnitt (Anfrage am Ende der Leistungsseiten)
   -------------------------------------------------------------------------- */

.zq-section--red { background: var(--zq-red); color: rgb(255 255 255 / 0.9); }
.zq-section--red h1,
.zq-section--red h2,
.zq-section--red h3 { color: #fff; }
.zq-section--red .zq-kicker { color: #fff; }
.zq-section--red .zq-form { background: var(--zq-soft); }
.zq-section--red .zq-check label { color: var(--zq-body); }

/* --------------------------------------------------------------------------
   25. Startseite: Über uns, Kunden, Projektkopf
   -------------------------------------------------------------------------- */

/* Der Leistungs-Kopf steht im Original asymmetrisch: 150 oben, 60 unten */
.zq-services-head { padding-block: 150px 60px; }
@media (max-width: 767px) { .zq-services-head { padding-block: 80px 40px; } }

/* --- Über uns ------------------------------------------------------------ */
.zq-about { position: relative; overflow: hidden; }
.zq-about .zq-section-title { max-width: none; }
.zq-about .zq-section-title h2 { line-height: 1.25; }
/* Die Textblöcke als Reihen: Titel links, Text rechts, Linie dazwischen */
.zq-about__grid { display: grid; grid-template-columns: 1fr; }
.zq-about__grid > div {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 1rem clamp(2rem, 6vw, 5rem);
  align-items: start;
  padding-block: var(--zq-s-3);
  border-top: 1px solid var(--zq-line);
}
.zq-about__grid > div:last-child { border-bottom: 1px solid var(--zq-line); }
.zq-about__grid h3 { font-size: var(--zq-t-h4); margin: 0; }
.zq-about__grid p { max-width: 62ch; }
@media (max-width: 767px) { .zq-about__grid > div { grid-template-columns: 1fr; gap: 0.5rem; } }

/* --- Kundenlogos --------------------------------------------------------- */
.zq-clients-section { position: relative; overflow: hidden; }
.zq-clients {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--zq-s-5) var(--zq-s-4);
  align-items: center;
}
@media (max-width: 767px) { .zq-clients { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .zq-clients { grid-template-columns: repeat(2, 1fr); } }
.zq-clients img {
  width: 100%;
  max-width: 360px;
  height: 170px;
  margin-inline: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}
@media (max-width: 767px) { .zq-clients img { height: 110px; } }
.zq-section--dark .zq-clients img { mix-blend-mode: normal; }

/* --- Projektkopf: Überschrift links, Textlink rechts --------------------- */
.zq-works-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--zq-s-3);
  flex-wrap: wrap;
}
.zq-works-head .zq-section-title { max-width: none; }
.zq-works-head__link { margin-left: auto; }
@media (max-width: 767px) {
  .zq-works-head { flex-direction: column; align-items: flex-start; }
  .zq-works-head__link { margin-left: 0; }
}

.zq-link { font-size: 18px; line-height: 1.1; }

/* Die Startseite zeigt drei Projekte nebeneinander */
.zq-works--teaser { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 30px 30px; }

/* --- Mustergrafik im Hero ------------------------------------------------ */
.zq-hero { position: relative; }
.zq-hero__particle {
  top: 10px;
  right: auto;
  left: calc(41.6667% - 57px);
  z-index: 2;
  max-width: 320px;
  width: 22vw;
}
.zq-particle--tr0 { top: 0; right: 0; }
@media (max-width: 991px) { .zq-hero__particle { display: none; } }

/* --------------------------------------------------------------------------
   26. Eigener Mauszeiger
   Nur auf Geräten mit präzisem Zeigegerät; Tastatur und Touch bleiben unberührt.
   -------------------------------------------------------------------------- */

.zq-cursor { display: none; }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .zq-cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 110;
    display: block;
    pointer-events: none;
    opacity: 0;
    transition: opacity 300ms;
  }
  .zq-cursor.is-active { opacity: 1; }

  .zq-cursor__ring,
  .zq-cursor__dot {
    position: fixed;
    top: 0;
    left: 0;
    border-radius: 50%;
    will-change: transform;
  }
  .zq-cursor__ring {
    width: 40px; height: 40px;
    margin: -20px 0 0 -20px;
    box-shadow: inset 0 0 0 2px var(--zq-ink);
    transition: width 300ms, height 300ms, margin 300ms, box-shadow 300ms, background-color 300ms;
  }
  .zq-cursor__dot {
    width: 6px; height: 6px;
    margin: -3px 0 0 -3px;
    background: var(--zq-red);
    transition: opacity 300ms, transform 300ms;
  }

  /* Über anklickbaren Flächen wächst der Ring und der Punkt verschwindet */
  .zq-cursor.is-hovering .zq-cursor__ring {
    width: 72px; height: 72px;
    margin: -36px 0 0 -36px;
    box-shadow: inset 0 0 0 2px var(--zq-red);
    background: rgb(230 57 70 / 0.1);
  }
  .zq-cursor.is-hovering .zq-cursor__dot { opacity: 0; }

  /* Auf dunklen Flächen invertiert der Ring */
  .zq-cursor.is-on-dark .zq-cursor__ring { box-shadow: inset 0 0 0 2px #fff; }
}

/* --------------------------------------------------------------------------
   27. Videos nebeneinander (Reels)
   -------------------------------------------------------------------------- */

.zq-videogroup {
  display: grid;
  gap: 30px;
  align-items: start;
}
.zq-videogroup[data-count='1'] { grid-template-columns: minmax(0, 1fr); max-width: 480px; margin-inline: auto; }
.zq-videogroup[data-count='2'] { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; margin-inline: auto; }
.zq-videogroup[data-count='3'] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 767px) {
  .zq-videogroup[data-count='2'],
  .zq-videogroup[data-count='3'] { grid-template-columns: minmax(0, 1fr); max-width: 420px; }
}
.zq-videogroup__item { margin: 0; }

/* Auf schmalen Kacheln bleibt nur der Ring, ohne Beschriftung */
.zq-player__start--compact { gap: 0; }
.zq-player__start--compact .zq-player__startlabel { display: none; }
.zq-videogroup .zq-player__ring { width: 60px; height: 60px; }
.zq-videogroup .zq-player__controls { padding: 2rem 0.75rem 0.75rem; gap: 0.5rem; }
.zq-videogroup .zq-player__time { min-width: 2.75rem; font-size: 0.75rem; }
.zq-videogroup .zq-player__btn { width: 30px; height: 30px; }
/* Bei drei nebeneinander wird es eng – Zeitanzeige ausblenden */
.zq-videogroup[data-count='3'] .zq-player__time { display: none; }

/* --------------------------------------------------------------------------
   28. Leistungsübersicht: Wechselraster
   -------------------------------------------------------------------------- */

.zq-servicerow {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.zq-servicerow--flip .zq-servicerow__media { order: 2; }
@media (max-width: 767px) {
  .zq-servicerow { grid-template-columns: 1fr; }
  .zq-servicerow--flip .zq-servicerow__media { order: 0; }
}

.zq-servicerow__media { overflow: hidden; border-radius: var(--zq-radius-lg); }
.zq-servicerow__media img {
  width: 100%;
  aspect-ratio: 9 / 11;
  object-fit: cover;
  transition: transform 1s var(--zq-ease);
}
.zq-servicerow__media a:hover img { transform: scale(1.05); }

.zq-servicerow__body h2 { margin-bottom: 20px; }
.zq-servicerow__body h2 a:hover { color: var(--zq-red); }
/* p:last-of-type setzt den Absatzabstand auf 0 – daher der Abstand auf der Liste */
.zq-servicerow .zq-styled-list { margin-top: 28px; }
.zq-servicerow .zq-btn { margin-top: 36px; }

/* Stichpunktliste mit rotem Strich, zweispaltig */
.zq-styled-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.zq-styled-list li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.55rem 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--zq-line);
  background: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--zq-ink);
}
.zq-section--soft .zq-styled-list li { border-color: transparent; }
.zq-styled-list li::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--zq-red);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   22. Pitch-Seiten (geschützt)
   -------------------------------------------------------------------------- */

/* ---- Zugangsabfrage ---- */
.zq-sperre-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--zq-ink);
  padding: var(--zq-gutter);
}
.zq-sperre { width: 100%; }
.zq-sperre__box {
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
  padding: clamp(2rem, 6vw, 3.5rem);
  background: #fff;
  border-radius: var(--zq-radius-xl);
  text-align: center;
}
.zq-sperre__logo { display: inline-block; margin-bottom: var(--zq-s-4); }
.zq-sperre__titel { font-size: var(--zq-t-h4); }
.zq-sperre__text { margin-top: 0.75rem; font-size: var(--zq-t-small); }
.zq-sperre__form { margin-top: var(--zq-s-4); }
.zq-sperre__form .zq-field { text-align: left; }
.zq-sperre__form input {
  text-align: center;
  font-size: var(--zq-t-h5);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.zq-sperre__form .zq-btn { width: 100%; justify-content: center; margin-top: 0.5rem; }
.zq-sperre__hilfe {
  margin-top: var(--zq-s-3);
  font-size: 0.8125rem;
  color: var(--zq-muted);
}

/* Feld mit fest stehender Beschriftung – für einzelne, groß gesetzte Eingaben,
   bei denen die schwebende Beschriftung der übrigen Formulare stören würde. */
.zq-field--fest { position: static; }
.zq-field--fest label {
  position: static;
  display: block;
  margin-bottom: 0.5rem;
  opacity: 1;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--zq-muted);
}

/* ---- Bühne: Bild links, Text rechts ---- */
.zq-pitch-hero { position: relative; padding-block: var(--zq-s-7); overflow: hidden; }

.zq-pitch-hero__phantom {
  top: 0.15em;
  right: auto;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
}

.zq-pitch-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.zq-pitch-hero--mitbild .zq-pitch-hero__grid {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}
@media (max-width: 899px) {
  .zq-pitch-hero--mitbild .zq-pitch-hero__grid { grid-template-columns: minmax(0, 1fr); }
}

.zq-pitch-hero h1 {
  font-size: clamp(2.25rem, 1.1rem + 4.6vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.zq-pitch-hero__lead { margin-top: var(--zq-s-3); max-width: 46ch; }
.zq-pitch-hero__cta { margin-top: var(--zq-s-4); }

.zq-pitch-hero__media { position: relative; }
/* Nur das Foto ansprechen – das Muster liegt im selben Container und
   würde von einer Regel auf „img“ mit erfasst. */
.zq-pitch-hero__foto {
  position: relative;
  z-index: 1;          /* liegt über dem Muster */
  width: 100%;
  height: auto;
  display: block;
}

/* Das Rautenmuster ragt unten links hinter dem Bild hervor */
.zq-particle--hero {
  position: absolute;
  z-index: 0;
  bottom: -44px;
  left: -48px;
  width: clamp(120px, 15vw, 200px);
  height: auto;
  opacity: 0.9;
  pointer-events: none;
}
@media (max-width: 899px) {
  .zq-pitch-hero__media { max-width: 420px; margin-inline: auto; }
  /* Die allgemeine Regel blendet Muster unter 991px aus – in der Bühne
     ist es gestalterisch gewollt und bleibt sichtbar. */
  .zq-particle--hero { display: block; bottom: -26px; left: -22px; width: 104px; }
}
@media (max-width: 480px) {
  .zq-particle--hero { display: none; }
}

/* ---- Content-Bausteine ---- */
.zq-bausteine {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 2px;
}
.zq-baustein {
  padding: var(--zq-s-4);
  background: #fff;
  transition: background var(--zq-fast), color var(--zq-fast);
}
.zq-baustein h3 {
  font-size: var(--zq-t-h5);
  margin-bottom: 0.75rem;
  transition: color var(--zq-fast);
}
.zq-baustein p { margin: 0; font-size: var(--zq-t-small); }
.zq-baustein:hover { background: var(--zq-ink); color: var(--zq-on-dark); }
.zq-baustein:hover h3 { color: var(--zq-red); }

/* ---- Beispiele ---- */
.zq-beispiele {
  display: grid;
  gap: var(--zq-s-7);
  max-width: 900px;
  margin-inline: auto;
}
/* Grid-Kinder dürfen nicht breiter werden als ihre Spalte. Ohne diese Zeile
   sprengt die waagerecht scrollbare Bilderreihe (min-width: auto) den
   Artikel auf Inhaltsbreite – und da eine Spalte so breit wird wie ihr
   breitestes Kind, reisst sie alle Beispiele mit. */
.zq-beispiele > * { min-width: 0; }

.zq-beispiel__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--zq-s-3);
  padding-bottom: var(--zq-s-3);
  margin-bottom: var(--zq-s-4);
  border-bottom: 1px solid rgb(255 255 255 / 0.15);
}
.zq-beispiel__messe {
  font-size: var(--zq-t-h3);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem;
}
.zq-beispiel__ort {
  font-size: var(--zq-t-small);
  font-weight: 400;
  color: var(--zq-muted);
}
.zq-beispiel__kunde {
  margin: 0.4rem 0 0;
  font-size: var(--zq-t-small);
  color: var(--zq-red);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.zq-beispiel__leistung {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.zq-beispiel__leistung li {
  margin: 0;
  padding: 0.35rem 0.85rem;
  border: 1px solid rgb(255 255 255 / 0.25);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.zq-beispiel__text { margin-top: var(--zq-s-3); max-width: 70ch; }

/* Bilderreihe: eine Zeile zum Durchblättern statt eines hohen Rasters */
/* Die geteilte Bedienleiste ist absolut positioniert; ohne eigenen
   Positionierungskontext würde sie aus der Reihe an den Seitenanfang
   rutschen. Hier soll sie schlicht darunter stehen. */
.zq-bilderreihe { position: relative; margin-top: var(--zq-s-4); }
/* Rote Pfeile mittig an den Rändern der Bilderreihe */
.zq-bilderreihe__pfeil {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--zq-red);
  color: #fff;
  cursor: pointer;
  transition: background var(--zq-fast), transform var(--zq-fast), opacity var(--zq-fast);
}
.zq-bilderreihe__pfeil:hover {
  background: var(--zq-red-dark);
  transform: translateY(-50%) scale(1.08);
}
.zq-bilderreihe__pfeil--zurueck { left: -24px; }
.zq-bilderreihe__pfeil--weiter  { right: -24px; }

/* Am Anfang bzw. Ende der Reihe ausgrauen statt verschwinden lassen –
   so springt das Layout nicht. */
.zq-bilderreihe__pfeil[disabled] {
  opacity: 0.25;
  cursor: default;
  pointer-events: none;
}

/* Auf schmalen Schirmen ist links und rechts kein Platz ausserhalb */
@media (max-width: 767px) {
  .zq-bilderreihe__pfeil--zurueck { left: 6px; }
  .zq-bilderreihe__pfeil--weiter  { right: 6px; }
  .zq-bilderreihe__pfeil { width: 40px; height: 40px; box-shadow: 0 2px 12px rgb(0 0 0 / 0.35); }
}
.zq-bilderreihe__spur {
  min-width: 0;
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.zq-bilderreihe__spur::-webkit-scrollbar { display: none; }
.zq-bilderreihe__bild {
  flex: 0 0 280px;
  scroll-snap-align: start;
  display: block;
  overflow: hidden;
}
.zq-bilderreihe__bild img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform var(--zq-slow);
}
.zq-bilderreihe__bild:hover img { transform: scale(1.05); }
@media (max-width: 600px) { .zq-bilderreihe__bild { flex-basis: 78%; } }

.zq-beispiel__bilder {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(160px, 45%), 1fr));
  gap: 0.75rem;
  margin-top: var(--zq-s-3);
}
.zq-beispiel__bilder a { display: block; overflow: hidden; }
.zq-beispiel__bilder img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: transform var(--zq-slow);
}
.zq-beispiel__bilder a:hover img { transform: scale(1.05); }

/* ---- Video mit Platzhalter ---- */
.zq-pitchvideo { position: relative; background: #000; }
.zq-pitchvideo .zq-video__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.zq-pitchvideo--hoch { max-width: 420px; margin-inline: auto; }
.zq-pitchvideo--hoch .zq-video__frame { aspect-ratio: 9 / 16; }

.zq-pitchvideo .zq-video__frame img,
.zq-pitchvideo .zq-video__frame video,
.zq-pitchvideo .zq-video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

/* Einzelnes Video auf der Pitch-Seite: volle Spaltenbreite im Querformat,
   im Hochformat auf Reel-Breite begrenzt. */
.zq-pitchvideo--einzeln { max-width: 900px; margin-inline: auto; }
.zq-pitchvideo--einzeln.zq-pitchvideo--hoch { max-width: 480px; margin-inline: auto; }
.zq-pitchvideo__item { margin: 0; }

/* Platzhalter, solange das Video fehlt.
   Bewusst flacher als ein echtes Video – ein leerer 16:9-Block würde die
   Seite dominieren und wie ein Ladefehler wirken. */
.zq-pitchvideo--leer .zq-video__frame {
  aspect-ratio: auto;
  min-height: 220px;
  border: 1px solid rgb(255 255 255 / 0.12);
  background:
    repeating-linear-gradient(
      45deg,
      #1a1a1a, #1a1a1a 12px,
      #151515 12px, #151515 24px
    );
}
.zq-pitchvideo--leer.zq-pitchvideo--hoch .zq-video__frame { min-height: 320px; }
.zq-pitchvideo__hinweis {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  margin: 0;
  pointer-events: none;
}
.zq-pitchvideo--wartet .zq-pitchvideo__hinweis { background: rgb(0 0 0 / 0.55); }
.zq-pitchvideo__hinweis span {
  padding: 0.7rem 1.5rem;
  border: 1px solid rgb(255 255 255 / 0.4);
  color: #fff;
  font-size: var(--zq-t-small);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---- Warum wir ---- */
.zq-warum__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 899px) {
  .zq-warum__grid { grid-template-columns: minmax(0, 1fr); }
}
.zq-warum__text { max-width: 62ch; }
.zq-warum__cta { margin-top: var(--zq-s-4); }

.zq-warum__personen { display: grid; gap: var(--zq-s-3); }
@media (max-width: 899px) {
  .zq-warum__personen { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 460px; }
}
.zq-warum__person { margin: 0; width: 220px; }
@media (max-width: 899px) { .zq-warum__person { width: 100%; } }
.zq-warum__person img { width: 100%; height: auto; display: block; }
.zq-warum__person figcaption {
  margin-top: 0.6rem;
  font-size: var(--zq-t-small);
  font-weight: 700;
  color: #fff;
  text-align: center;
}

/* ---- Leistungsstufen ---- */
.zq-pakete {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--zq-s-3);
  align-items: start;
  max-width: 1100px;
  margin-inline: auto;
}
@media (min-width: 900px) {
  .zq-pakete { grid-template-columns: repeat(3, 1fr); }
}
.zq-paket {
  padding: var(--zq-s-4);
  border-radius: var(--zq-radius-lg);
  border: 1px solid var(--zq-line);
  background: #fff;
  height: 100%;
}
.zq-paket--betont {
  border-color: var(--zq-ink);
  background: var(--zq-ink);
  color: var(--zq-on-dark);
}
.zq-paket--betont .zq-paket__name { color: #fff; }
.zq-paket--betont .zq-paket__label { color: var(--zq-red); }
.zq-paket--betont .zq-paket__output li::before { background: var(--zq-red); }

.zq-paket__name { font-size: var(--zq-t-h5); }
.zq-paket__fuer {
  margin: 0.5rem 0 0;
  font-size: var(--zq-t-small);
  color: var(--zq-muted);
}
.zq-paket__umfang {
  margin: var(--zq-s-3) 0 0;
  padding-top: var(--zq-s-3);
  border-top: 1px solid var(--zq-line);
  font-size: var(--zq-t-small);
}
.zq-paket--betont .zq-paket__umfang { border-top-color: rgb(255 255 255 / 0.15); }

.zq-paket__label {
  margin: var(--zq-s-3) 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--zq-red);
}
.zq-paket__output { list-style: none; margin: 0; padding: 0; }
.zq-paket__output li {
  position: relative;
  margin: 0 0 0.6rem;
  padding-left: 1.4rem;
  font-size: var(--zq-t-small);
}
.zq-paket__output li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 2px;
  background: var(--zq-red);
}

/* --------------------------------------------------------------------------
   29. Durchstarten-Button
   Ersetzt den Menüpunkt „Kontakt“. Das Symbol wechselt bei jedem Aufruf
   (siehe header.php), der Button glänzt leicht und das Symbol bewegt sich.
   Alles läuft über transform/opacity – kein Layout-Reflow.
   -------------------------------------------------------------------------- */

.zq-nav > ul > li.zq-nav__cta > a.zq-launch {
  --launch-bg: var(--zq-ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 1.1rem 0.45rem 0.5rem;
  border-radius: 999px;
  background: var(--launch-bg);
  color: #fff;
  opacity: 1;
  font-family: var(--zq-font-heading);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.01em;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 6px 18px rgb(10 10 10 / 0.18), 0 0 0 0 rgb(230 57 70 / 0.45);
  transition: background var(--zq-fast), transform var(--zq-fast), box-shadow var(--zq-slow);
}
.zq-nav > ul > li.zq-nav__cta > a.zq-launch:hover,
.zq-nav > ul > li.zq-nav__cta > a.zq-launch:focus-visible {
  --launch-bg: var(--zq-red);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgb(230 57 70 / 0.35), 0 0 0 6px rgb(230 57 70 / 0.12);
}
.zq-nav > ul > li.zq-nav__cta > a.zq-launch:active { transform: translateY(0) scale(0.98); }
.zq-nav > ul > li.zq-nav__cta.is-current > a.zq-launch { --launch-bg: var(--zq-red); }

.zq-launch__label { position: relative; z-index: 2; }

/* Symbolfläche: alle Symbole liegen übereinander, nur eines ist sichtbar */
.zq-launch__icon {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.1);
  transition: background var(--zq-fast), transform var(--zq-fast);
}
.zq-launch:hover .zq-launch__icon { background: rgb(255 255 255 / 0.18); }
.zq-launch__svg { grid-area: 1 / 1; display: none; width: 26px; height: 26px; }
.zq-launch__svg.is-on { display: block; }

/* Bunte Symbole: Strich in Farbe, Fläche als zarter Farbton */
.zq-launch__svg { stroke: var(--icon, #fff); fill: color-mix(in srgb, var(--icon, #fff) 28%, transparent); }
.zq-launch__svg[data-icon='rocket']    { --icon: #7dd3fc; }
.zq-launch__svg[data-icon='flame']     { --icon: #fb923c; }
.zq-launch__svg[data-icon='handshake'] { --icon: #fde047; }
.zq-launch__svg[data-icon='sparkles']  { --icon: #f9a8d4; }
.zq-launch__svg[data-icon='zap']       { --icon: #facc15; }
.zq-launch__svg[data-icon='party']     { --icon: #c4b5fd; }
.zq-launch:hover .zq-launch__svg { fill: color-mix(in srgb, var(--icon, #fff) 45%, transparent); }

/* Auftritt beim Laden: Button schwingt von rechts ein, Symbol dreht sich
   hinterher hinein, danach läuft einmal sofort der Lichtstreifen. */
.zq-nav > ul > li.zq-nav__cta { animation: zq-launch-in 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.zq-launch .zq-launch__icon { animation: zq-launch-icon-in 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s both; }
.zq-launch__shine { animation-delay: -4.2s; }
@keyframes zq-launch-in {
  0%   { opacity: 0; transform: translateX(40px) scale(0.6) rotate(6deg); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateX(0) scale(1) rotate(0); }
}
@keyframes zq-launch-icon-in {
  0%   { transform: scale(0) rotate(-180deg); }
  100% { transform: scale(1) rotate(0); }
}
/* Der Einflug liegt auf dem li, die Symbol-Animation auf dem svg – Hover
   auf dem Link kann daher keine Animation neu starten. */

/* Lichtstreifen, der in Abständen über den Button läuft */
.zq-launch__shine {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / 0.28) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: zq-shine 5s var(--zq-ease) infinite;
  pointer-events: none;
}
@keyframes zq-shine {
  0%, 60% { transform: translateX(-120%); }
  85%, 100% { transform: translateX(120%); }
}

/* Pulsierender Ring, der Aufmerksamkeit holt – dezent, alle paar Sekunden */
.zq-launch::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgb(230 57 70 / 0.55);
  animation: zq-pulse 4s ease-out infinite;
  pointer-events: none;
}
@keyframes zq-pulse {
  0%   { box-shadow: 0 0 0 0 rgb(230 57 70 / 0.55); }
  30%  { box-shadow: 0 0 0 12px rgb(230 57 70 / 0); }
  100% { box-shadow: 0 0 0 12px rgb(230 57 70 / 0); }
}

/* Je Symbol eine eigene kleine Bewegung – dauerhaft dezent, beim Hover deutlich */
.zq-launch[data-icon='rocket'] .zq-launch__svg.is-on    { animation: zq-rocket 3.2s ease-in-out infinite; }
.zq-launch[data-icon='flame'] .zq-launch__svg.is-on     { animation: zq-flame 1.1s ease-in-out infinite; transform-origin: 50% 90%; }
.zq-launch[data-icon='handshake'] .zq-launch__svg.is-on { animation: zq-shake 3.4s ease-in-out infinite; transform-origin: 50% 60%; }
.zq-launch[data-icon='sparkles'] .zq-launch__svg.is-on  { animation: zq-twinkle 2.2s ease-in-out infinite; }
.zq-launch[data-icon='zap'] .zq-launch__svg.is-on       { animation: zq-jolt 2.6s ease-in-out infinite; }
.zq-launch[data-icon='party'] .zq-launch__svg.is-on     { animation: zq-pop 3s ease-in-out infinite; transform-origin: 20% 80%; }

.zq-launch:hover[data-icon='rocket'] .zq-launch__svg.is-on    { animation: zq-rocket-go 0.9s ease-in-out infinite; }
.zq-launch:hover[data-icon='flame'] .zq-launch__svg.is-on     { animation-duration: 0.45s; }
.zq-launch:hover[data-icon='handshake'] .zq-launch__svg.is-on { animation: zq-shake-fast 0.7s ease-in-out infinite; }
.zq-launch:hover[data-icon='sparkles'] .zq-launch__svg.is-on  { animation-duration: 0.8s; }
.zq-launch:hover[data-icon='zap'] .zq-launch__svg.is-on       { animation: zq-jolt-fast 0.5s ease-in-out infinite; }
.zq-launch:hover[data-icon='party'] .zq-launch__svg.is-on     { animation: zq-pop-fast 0.6s ease-in-out infinite; }

@keyframes zq-rocket {
  0%, 70%, 100% { transform: translate(0, 0) rotate(0); }
  80% { transform: translate(1px, -2px) rotate(-6deg); }
  90% { transform: translate(-1px, 1px) rotate(4deg); }
}
@keyframes zq-rocket-go {
  0%   { transform: translate(0, 0) rotate(0); }
  50%  { transform: translate(3px, -4px) rotate(-10deg) scale(1.1); }
  100% { transform: translate(0, 0) rotate(0); }
}
@keyframes zq-flame {
  0%, 100% { transform: scaleY(1) scaleX(1); }
  35% { transform: scaleY(1.12) scaleX(0.94) translateY(-1px); }
  70% { transform: scaleY(0.94) scaleX(1.06); }
}
@keyframes zq-shake {
  0%, 80%, 100% { transform: rotate(0); }
  85% { transform: rotate(-9deg); }
  90% { transform: rotate(8deg); }
  95% { transform: rotate(-5deg); }
}
@keyframes zq-shake-fast {
  0%, 100% { transform: rotate(0) scale(1.05); }
  25% { transform: rotate(-10deg) scale(1.1); }
  75% { transform: rotate(10deg) scale(1.1); }
}
@keyframes zq-twinkle {
  0%, 100% { transform: scale(1) rotate(0); opacity: 1; }
  50% { transform: scale(1.18) rotate(12deg); opacity: 0.85; }
}
@keyframes zq-jolt {
  0%, 75%, 100% { transform: translate(0, 0); }
  80% { transform: translate(-1px, 1px) scale(1.12); }
  86% { transform: translate(1px, -1px) scale(0.96); }
  92% { transform: translate(-1px, 0) scale(1.08); }
}
@keyframes zq-jolt-fast {
  0%, 100% { transform: translate(0, 0) scale(1.1); }
  30% { transform: translate(-2px, 1px) scale(1.2); }
  60% { transform: translate(2px, -1px) scale(1); }
}
@keyframes zq-pop {
  0%, 78%, 100% { transform: rotate(0) scale(1); }
  86% { transform: rotate(-12deg) scale(1.15); }
  93% { transform: rotate(6deg) scale(1.05); }
}
@keyframes zq-pop-fast {
  0%, 100% { transform: rotate(-8deg) scale(1.1); }
  50% { transform: rotate(10deg) scale(1.2); }
}

@media (prefers-reduced-motion: reduce) {
  .zq-launch__shine, .zq-launch::before, .zq-launch__svg { animation: none !important; }
}

/* --------------------------------------------------------------------------
   30. Durchstarten-Seite: Kontaktdaten als Text
   -------------------------------------------------------------------------- */

.zq-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 899px) { .zq-contact__grid { grid-template-columns: 1fr; } }
.zq-contact__intro p { max-width: 46ch; }

.zq-contact__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 1rem;
}
.zq-contact__card {
  padding: 1.5rem 1.5rem 1.6rem;
  border: 1px solid var(--zq-line);
  border-radius: var(--zq-radius-lg);
  background: #fff;
  font-style: normal;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--zq-body);
}
.zq-contact__card strong { color: var(--zq-ink); }
.zq-contact__card a { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--zq-ink); font-weight: 600; }
.zq-contact__card a:hover { color: var(--zq-red); }
.zq-contact__card a svg { width: 18px; height: 18px; }
.zq-contact__label {
  display: block;
  margin-bottom: 0.6rem;
  font-family: var(--zq-font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--zq-red);
}
.zq-contact__more { margin-top: 0.75rem; font-size: 0.9375rem; }
.zq-contact__hours { display: block; margin-top: 0.75rem; font-size: 0.875rem; color: var(--zq-muted); }
.zq-contact__social { margin-bottom: 0.2rem; }

/* --------------------------------------------------------------------------
   31. Startseite: KI-Badge auf den Leistungs-Kacheln
   -------------------------------------------------------------------------- */

.zq-service__badge {
  position: absolute;
  top: -19px;                 /* halb über den oberen Rand */
  left: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--zq-red);
  color: #fff;
  box-shadow: 0 6px 16px rgb(230 57 70 / 0.35), 0 0 0 4px var(--zq-bg);
  transform: translateX(calc(-50% - 90px));
  transition: background var(--zq-fast), transform var(--zq-fast);
}
.zq-service__badge svg { width: 20px; height: 20px; stroke: #fff; fill: rgb(255 255 255 / 0.4); }
.zq-service:hover .zq-service__badge,
.zq-service:focus-within .zq-service__badge { background: var(--zq-ink); transform: translateX(calc(-50% - 90px)) rotate(15deg) scale(1.1); }



/* --------------------------------------------------------------------------
   32. Startseite: Plattformen & Automationen
   -------------------------------------------------------------------------- */

.zq-platform { position: relative; overflow: hidden; }
.zq-platform__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
@media (max-width: 899px) { .zq-platform__grid { grid-template-columns: 1fr; } }
.zq-platform__lead { margin-top: var(--zq-s-3); max-width: 46ch; }
.zq-platform__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 1.75rem; margin-top: var(--zq-s-4); }

.zq-platform__items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.zq-platform__item {
  position: relative;
  margin: 0;
  padding: 1.6rem 1.5rem 1.7rem;
  border-radius: var(--zq-radius-lg);
  background: rgb(255 255 255 / 0.05);
  border: 1px solid rgb(255 255 255 / 0.1);
  transition: background var(--zq-fast), border-color var(--zq-fast), transform var(--zq-fast);
}
.zq-platform__item:hover { background: rgb(255 255 255 / 0.09); border-color: rgb(230 57 70 / 0.6); transform: translateY(-3px); }
.zq-platform__item h3 { margin-bottom: 0.6rem; font-size: var(--zq-t-h5); color: #fff; }
.zq-platform__item p { margin: 0; font-size: 1rem; color: var(--zq-on-dark); }
.zq-platform__num {
  display: block;
  margin-bottom: 1rem;
  font-family: var(--zq-font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--zq-red);
}

/* --------------------------------------------------------------------------
   33. Sticky Kontakt-Button (unten rechts, erscheint nach dem ersten Scrollen)
   -------------------------------------------------------------------------- */

.zq-sticky {
  position: fixed;
  right: clamp(14px, 2.5vw, 28px);
  bottom: clamp(14px, 2.5vw, 28px);
  z-index: 95;
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 58px;
  padding: 0 0 0 0;
  border-radius: 999px;
  background: var(--zq-red);
  color: #fff;
  font-family: var(--zq-font-heading);
  font-weight: 700;
  font-size: 1rem;
  box-shadow: 0 12px 30px rgb(230 57 70 / 0.4);
  opacity: 0;
  transform: translateY(20px) scale(0.9);
  pointer-events: none;
  transition: opacity var(--zq-slow), transform var(--zq-slow), background var(--zq-fast), gap var(--zq-slow), padding var(--zq-slow);
}
.zq-sticky.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.zq-sticky:hover, .zq-sticky:focus-visible { background: var(--zq-ink); color: #fff; }
.zq-sticky__icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  flex-shrink: 0;
}
.zq-sticky__icon svg { width: 24px; height: 24px; }
.zq-sticky__label {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition: max-width var(--zq-slow), opacity var(--zq-slow), padding var(--zq-slow);
}
.zq-sticky:hover .zq-sticky__label,
.zq-sticky:focus-visible .zq-sticky__label { max-width: 220px; opacity: 1; padding-right: 22px; }
@media (hover: none) { .zq-sticky__label { max-width: 220px; opacity: 1; padding-right: 22px; } }
/* Puls-Ring, dezent */
.zq-sticky::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  animation: zq-pulse 4s ease-out 1s infinite;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .zq-sticky::before { animation: none; } }
@media print { .zq-sticky { display: none; } }

/* --------------------------------------------------------------------------
   34. Seitenköpfe: Auftritt beim Laden
   Kicker, Überschrift, Text und Button steigen nacheinander auf, das
   Phantomwort gleitet von rechts herein. Bühne (Startseite) analog, das
   Showreel wird dazu aufgedeckt. Läuft nur mit JavaScript (html.js), sonst
   steht alles sofort da; reduzierte Bewegung schaltet alles ab.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  html.js .zq-pagehead__inner > *,
  html.js .zq-pagehead .zq-pagehead__lead,
  html.js .zq-hero__text > * {
    opacity: 0;
    transform: translateY(28px);
    animation: zq-rise 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  }
  html.js .zq-pagehead__inner > :nth-child(1), html.js .zq-hero__text > :nth-child(1) { animation-delay: 0.05s; }
  html.js .zq-pagehead__inner > :nth-child(2), html.js .zq-hero__text > :nth-child(2) { animation-delay: 0.18s; }
  html.js .zq-pagehead__inner > :nth-child(3), html.js .zq-hero__text > :nth-child(3) { animation-delay: 0.32s; }
  html.js .zq-pagehead__inner > :nth-child(4), html.js .zq-hero__text > :nth-child(4) { animation-delay: 0.46s; }
  html.js .zq-pagehead__inner > :nth-child(5), html.js .zq-hero__text > :nth-child(5) { animation-delay: 0.60s; }
  html.js .zq-pagehead .zq-pagehead__lead { animation-delay: 0.4s; }

  /* Überschrift: zusätzlich die rote Betonung „einblenden“ */
  html.js .zq-hero h1 strong { display: inline-block; animation: zq-pop-in 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.55s both; }

  html.js .zq-phantom, html.js .zq-hero__stroke {
    opacity: 0;
    animation: zq-drift 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s forwards;
  }

  html.js .zq-hero__media { clip-path: inset(0 0 0 100%); animation: zq-unveil 1.1s cubic-bezier(0.77, 0, 0.18, 1) 0.25s forwards; }
  html.js .zq-hero__social { opacity: 0; animation: zq-rise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 1.1s forwards; }
}
@keyframes zq-rise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes zq-drift {
  from { opacity: 0; transform: translateX(60px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes zq-pop-in {
  from { opacity: 0; transform: scale(0.6) rotate(-4deg); }
  to   { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes zq-unveil {
  from { clip-path: inset(0 0 0 100%); }
  to   { clip-path: inset(0 0 0 0); }
}
/* Der Hero-Stroke sitzt hinter der Überschrift; die Animation darf den
   negativen Versatz der Überschrift nicht stören */
.zq-hero__stroke { will-change: transform; }

/* Karten mit Symbol (Realdreh/Animation u. ä.) */
.zq-steps--cards .zq-step__media { flex: none; min-width: 0; margin: 0 0 1rem; color: var(--zq-red); }
.zq-steps--cards .zq-step__media svg { width: 48px; height: 48px; }