:root {
  --ink: #071221;
  --ink-2: #0b192b;
  --ink-3: #10263d;
  --ink-4: #15334f;
  --surface: #f4f7f9;
  --surface-2: #e9f0f4;
  --text: #f7fbff;
  --text-dark: #101c29;
  --muted: rgba(226, 238, 248, 0.76);
  --muted-dark: #536372;
  --line: rgba(158, 205, 234, 0.2);
  --line-soft: rgba(255, 255, 255, 0.07);
  /* Flaechentoene der Referenzabschnitte - vorher als Literale verstreut. */
  --ink-5: #081525;
  --ink-6: #0d2034;
  --ink-deep: #020914;
  --ink-deeper: #061421;
  /* Kanalwerte fuer Alphavarianten: rgb(var(--ink-rgb) / 0.7) statt rgba(7, 18, 33, 0.7). */
  --ink-rgb: 7 18 33;
  --cyan-rgb: 86 199 238;
  --text-rgb: 247 251 255;
  --orange-rgb: 240 131 58;
  --line-dark: rgba(16, 28, 41, 0.14);
  --cyan: #56c7ee;
  --cyan-dark: #117ca7;
  --orange: #f0833a;
  --orange-light: #ffc09a;
  --success: #86b379;
  --radius: 8px;
  --container: min(1160px, calc(100vw - 32px));
  --shadow: 0 24px 60px rgba(2, 8, 17, 0.28);
  --transition: 180ms ease;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 86px;
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  background: var(--ink);
  font-family: "Segoe UI", Arial, sans-serif;
  line-height: 1.55;
  overflow-x: hidden;
}

body,
button,
input,
select,
textarea {
  letter-spacing: 0;
}

img,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a,
summary,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 3px solid rgba(86, 199, 238, 0.56);
  outline-offset: 3px;
}

[id] {
  scroll-margin-top: 86px;
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  width: min(1240px, calc(100vw - 32px));
  min-height: 74px;
  margin: 0 auto;
  padding: 12px 0;
}

.site-header::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  z-index: -1;
  height: 76px;
  border-bottom: 1px solid rgba(158, 205, 234, 0.08);
  background: rgba(7, 18, 33, 0.9);
  backdrop-filter: blur(12px);
  pointer-events: none;
}

.brand-link {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.brand-link img {
  width: 218px;
  height: auto;
}

.nav-links {
  display: flex;
  justify-content: center;
  gap: 16px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 21px;
  height: 2px;
  margin: 4px auto;
  background: currentColor;
  transition: transform var(--transition), opacity var(--transition);
}

.site-header.nav-open .nav-toggle span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.site-header.nav-open .nav-toggle span:nth-child(2) {
  opacity: 0;
}

.site-header.nav-open .nav-toggle span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.nav-links a {
  padding: 8px 0;
  transition: color var(--transition);
}

.nav-links a:hover,
.nav-links a:focus-visible {
  color: var(--text);
}

.header-cta,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 17px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-weight: 900;
  text-align: center;
  transition: transform var(--transition), border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

.header-cta,
.btn-secondary {
  color: var(--text);
  background: rgba(255, 255, 255, 0.075);
  border-color: var(--line);
}

.btn-primary {
  color: var(--ink-deeper);
  background: var(--cyan);
  box-shadow: 0 14px 30px rgba(86, 199, 238, 0.2);
}

.header-cta:hover,
.header-cta:focus-visible,
.btn:hover,
.btn:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(158, 205, 234, 0.4);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: #78d7f5;
}

.hero-sticky {
  --hero-scale: 1;
  --hero-x: 0px;
  --hero-y: 0px;
  --copy-opacity: 1;
  --copy-y: 0px;
  --caption-opacity: 0;
  --caption-y: 18px;
  --video-opacity: 0;
  --video-scale: 0.96;
  --photo-opacity: 1;
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 700px;
  overflow: hidden;
  isolation: isolate;
  background: var(--ink);
}

.hero-media,
.hero-shade {
  position: absolute;
  inset: 0;
}

.hero-media {
  z-index: 0;
  opacity: var(--photo-opacity);
  will-change: opacity;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 56% 55%;
  transform: translate3d(var(--hero-x), var(--hero-y), 0) scale(var(--hero-scale));
  transform-origin: 66% 73%;
  will-change: transform;
}

.hero-video-frame {
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  transform: scale(1.16);
}

.hero-shade {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(7, 18, 33, 0.94) 0%, rgba(7, 18, 33, 0.8) 35%, rgba(7, 18, 33, 0.3) 68%, rgba(7, 18, 33, 0.14) 100%),
    linear-gradient(180deg, rgba(7, 18, 33, 0.72) 0%, rgba(7, 18, 33, 0.08) 48%, rgba(7, 18, 33, 0.82) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: var(--container);
  min-height: 100%;
  margin: 0 auto;
  padding: 92px 0 54px;
  opacity: var(--copy-opacity);
  transform: translate3d(0, var(--copy-y), 0);
  will-change: opacity, transform;
}

.hero-content > * {
  max-width: 680px;
}

.eyebrow,
.section-kicker {
  margin: 0;
  color: var(--cyan);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.eyebrow {
  margin-bottom: 10px;
}

.hero-content h1 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  line-height: 1;
}

.hero-lead {
  margin: 15px 0 0;
  color: rgba(247, 251, 255, 0.82);
  font-size: 1.02rem;
  line-height: 1.5;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin-top: 17px;
}

.section {
  padding: 86px 0;
  border-top: 1px solid rgba(158, 205, 234, 0.09);
  background: var(--ink-2);
}

.section:nth-of-type(4n + 1),
.section:nth-of-type(4n + 2) {
  background: var(--ink-5);
}

.value-section {
  color: var(--text-dark);
  border-top-color: var(--line-dark);
  background: var(--surface);
}

.section-inner,
.footer-inner {
  width: var(--container);
  margin: 0 auto;
}

.section-heading {
  max-width: 760px;
  margin-bottom: 38px;
}

.section-heading h2 {
  margin: 8px 0 0;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: 1.08;
  font-weight: 900;
}

.section-heading > p:last-child {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 1.03rem;
}

.value-section .section-heading > p:last-child {
  color: var(--muted-dark);
}

.value-section .section-kicker {
  color: var(--cyan-dark);
}

.service-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.service-list li {
  position: relative;
  padding: 13px 16px 13px 28px;
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
  font-weight: 750;
}

.service-list {
  margin-top: 0;
  border-top: 1px solid var(--line);
}

.service-list li::before {
  content: "+";
  position: absolute;
  left: 3px;
  color: var(--orange-light);
  font-weight: 900;
}

.trust-section {
  background: var(--ink-6);
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 32px;
  border: 1px solid var(--line);
  background: var(--line);
}

.stats-row article {
  min-width: 0;
  padding: 22px;
  background: #10263d;
}

.stats-row strong,
.stats-row span {
  display: block;
}

.stats-row strong {
  color: var(--cyan);
  font-size: 1.45rem;
  line-height: 1.1;
}

.stats-row span {
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.82rem;
}

.lead-form {
  padding: 28px;
  border: 1px solid rgba(158, 205, 234, 0.26);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.055);
}

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

.lead-form label {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.lead-form label > span {
  color: rgba(247, 251, 255, 0.86);
  font-size: 0.84rem;
  font-weight: 800;
}

.field-full {
  grid-column: 1 / -1;
}

.lead-form input,
.lead-form select,
.lead-form textarea {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 11px 12px;
  border: 1px solid rgba(158, 205, 234, 0.24);
  border-radius: 6px;
  color: var(--text);
  background: rgba(3, 12, 22, 0.54);
}

.lead-form select {
  appearance: none;
  padding-right: 40px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--cyan) 50%),
    linear-gradient(135deg, var(--cyan) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 20px,
    calc(100% - 13px) 20px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.lead-form select option {
  color: var(--text-dark);
  background: var(--surface);
}

.lead-form textarea {
  min-height: 126px;
  resize: vertical;
}

.lead-form input::placeholder,
.lead-form textarea::placeholder {
  color: rgba(226, 238, 248, 0.48);
}

.lead-form input:focus,
.lead-form select:focus,
.lead-form textarea:focus {
  border-color: var(--cyan);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(86, 199, 238, 0.12);
}

.lead-form .is-invalid {
  border-color: var(--orange);
}

.consent-field {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 10px;
  margin-top: 18px;
}

.consent-field input {
  width: 18px;
  min-height: 18px;
  margin: 3px 0 0;
  accent-color: var(--cyan);
}

.consent-field a {
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.form-submit {
  width: 100%;
  margin-top: 18px;
}

.form-status {
  min-height: 24px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.site-footer {
  padding: 46px 0;
  border-top: 1px solid var(--line);
  background: #050d17;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 38px;
  align-items: end;
}

.footer-brand img {
  width: 210px;
  height: auto;
}

.footer-brand p,
.footer-brand span {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.footer-brand span {
  display: block;
  margin-top: 2px;
  color: rgba(226, 238, 248, 0.52);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px 20px;
  max-width: 620px;
  color: var(--muted);
  font-size: 0.86rem;
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--text);
}

.mobile-sticky {
  position: fixed;
  right: 12px;
  bottom: 12px;
  left: 12px;
  z-index: 45;
  display: none;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 8px;
  width: min(360px, calc(100vw - 24px));
  margin: 0 auto;
  padding: 7px;
  border: 1px solid rgba(158, 205, 234, 0.24);
  border-radius: var(--radius);
  background: rgba(7, 18, 33, 0.94);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
  transform: translateY(calc(100% + 24px));
  opacity: 0;
  pointer-events: none;
  transition: transform 220ms ease, opacity 220ms ease;
}

.mobile-sticky a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 8px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.86rem;
  font-weight: 900;
  text-align: center;
}

.mobile-sticky a:first-child {
  color: var(--ink-deeper);
  background: var(--cyan);
}

body.mobile-contact-visible:not(.footer-near) .mobile-sticky {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 440ms ease, transform 440ms ease;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

.thanks-hero {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 42px;
  min-height: 72svh;
  padding: 120px 16px 70px;
  background: var(--ink-2);
}

.thanks-copy {
  width: min(720px, 100%);
  text-align: center;
}

.thanks-copy h1 {
  margin: 10px 0 0;
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.08;
}

.thanks-copy > p {
  color: var(--muted);
}

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

.next-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  width: min(960px, 100%);
  border: 1px solid var(--line);
  background: var(--line);
}

.next-steps article {
  min-width: 0;
  padding: 24px;
  background: var(--ink-3);
}

.next-steps span {
  color: var(--orange-light);
  font-size: 0.78rem;
  font-weight: 900;
}

.next-steps h2 {
  margin: 18px 0 0;
  font-size: 1.08rem;
}

.next-steps p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

@media (max-width: 1080px) {
.site-header {
    gap: 16px;
  }

.brand-link img {
    width: 190px;
  }

.nav-links {
    gap: 11px;
    font-size: 0.8rem;
  }

.header-cta {
    padding-inline: 13px;
    font-size: 0.8rem;
  }

.hero-content > * {
    max-width: 640px;
  }
}

@media (max-width: 900px) {
.site-header {
    grid-template-columns: auto auto;
    justify-content: space-between;
  }

.nav-links {
    position: absolute;
    top: 64px;
    right: 0;
    left: 0;
    display: grid;
    gap: 0;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(7, 18, 33, 0.98);
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  }

.nav-links a {
    padding: 11px 12px;
    border-bottom: 1px solid rgba(158, 205, 234, 0.1);
  }

.nav-links a:last-child {
    border-bottom: 0;
    color: var(--cyan);
  }

.site-header.nav-open .nav-links {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

.nav-toggle {
    display: block;
  }

.header-cta {
    display: none;
  }

.brand-link img {
    width: 188px;
  }

.hero-sticky {
    min-height: 700px;
  }

.hero-media img {
    object-position: 60% 55%;
    transform-origin: 68% 72%;
  }

.stats-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
html {
    scroll-padding-top: 72px;
  }

[id] {
    scroll-margin-top: 72px;
  }

.site-header {
    grid-template-columns: auto auto;
    width: min(calc(100vw - 20px), 640px);
    min-height: 58px;
    padding: 9px 0;
  }

.site-header::before {
    height: 60px;
  }

.brand-link img {
    width: 158px;
  }

.hero-sticky {
    min-height: 690px;
  }

.hero-media img {
    object-position: 64% 52%;
    transform-origin: 70% 70%;
  }

.hero-shade {
    background:
      linear-gradient(90deg, rgba(7, 18, 33, 0.94), rgba(7, 18, 33, 0.52)),
      linear-gradient(180deg, rgba(7, 18, 33, 0.66), rgba(7, 18, 33, 0.2) 42%, rgba(7, 18, 33, 0.92));
  }

.hero-content {
    justify-content: flex-start;
    width: min(390px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    margin: 0 12px;
    padding: 80px 0 82px;
  }

.eyebrow {
    margin-bottom: 7px;
    font-size: 0.69rem;
  }

.hero-lead {
    margin-top: 11px;
    font-size: 0.9rem;
    line-height: 1.4;
  }

.hero-actions {
    display: grid;
    gap: 8px;
    margin-top: 12px;
  }

.hero-actions .btn {
    width: 100%;
    min-height: 43px;
    padding-inline: 10px;
    font-size: 0.84rem;
  }

.section {
    padding: 60px 0;
  }

.section-inner,
  .footer-inner {
    width: min(calc(100vw - 24px), 640px);
    max-width: calc(100vw - 24px);
  }

.section-heading {
    margin-bottom: 26px;
  }

.section-heading h2 {
    font-size: clamp(1.9rem, 8.5vw, 2.45rem);
  }

.section-heading > p:last-child {
    font-size: 0.94rem;
  }

.form-grid,
  .service-list {
    grid-template-columns: 1fr;
  }

.stats-row {
    grid-template-columns: 1fr 1fr;
  }

.lead-form {
    padding: 18px;
  }

.field-full {
    grid-column: auto;
  }

.footer-inner {
    grid-template-columns: 1fr;
    align-items: start;
  }

.next-steps {
    grid-template-columns: 1fr;
  }

.footer-links {
    justify-content: flex-start;
  }

.site-footer {
    padding-bottom: 40px;
  }

.mobile-sticky {
    display: grid;
  }
}

@media (max-width: 390px) {
.hero-content {
    padding-top: 72px;
  }

.mobile-sticky a {
    font-size: 0.8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
html {
    scroll-behavior: auto;
  }

*,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

.hero-sticky {
    position: relative;
    height: auto;
    min-height: 100svh;
  }

.hero-media img {
    transform: none;
  }

.hero-content {
    opacity: 1;
    transform: none;
  }

[data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* Referenz-Mittelteil aus dem freigegebenen Stand vor V2. */
.reference-v1 {
  color: var(--text);
  border-top-color: var(--line);
  background: var(--ink-5);
}

.reference-v1.offer-v1,
.reference-v1.trust-v1 {
  background: var(--ink-6);
}

.reference-v1 .section-kicker,
.reference-v1.value-section .section-kicker {
  color: var(--cyan);
}

.reference-v1 .section-heading > p:last-child,
.reference-v1.value-section .section-heading > p:last-child {
  color: var(--muted);
}

.reference-v1 .stats-row,
.reference-v1 .trust-content {
  display: grid;
  gap: 16px;
}

.reference-v1 .stats-row article,
.reference-v1 .review-stack article {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.055);
  box-shadow: 0 18px 36px rgba(2, 8, 17, 0.18);
}

.reference-v1 .review-stack span {
  margin: 10px 0 0;
  color: var(--muted);
}

.reference-v1 .review-stack p {
  margin: 0;
  color: var(--text);
}

.reference-v1 .trust-layout-v1 {
  display: grid;
  gap: 18px;
}

.reference-v1 .stats-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 0;
}

.reference-v1 .stats-row article {
  padding: 18px;
  background: rgba(255, 255, 255, 0.055);
}

.reference-v1 .stats-row strong {
  color: var(--text);
  font-size: 1.34rem;
}

.reference-v1 .stats-row span {
  color: var(--muted);
}

.reference-v1 .trust-content {
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr);
  align-items: stretch;
}

.reference-v1 .review-stack {
  display: grid;
  gap: 10px;
}

.reference-v1 .review-stack article {
  padding: 18px;
}

.reference-v1 .review-stack p {
  font-weight: 900;
  line-height: 1.45;
}

.reference-v1 .review-stack span {
  display: block;
  font-size: 0.88rem;
}

@media (max-width: 1080px) {
.reference-v1 .stats-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

.reference-v1 .trust-content {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {

.reference-v1 .stats-row {
    grid-template-columns: 1fr;
  }
}

/* V5: reduzierter Hero, begrenzte Video-Bühne und gemeinsamer Conversionbereich. */
.hero-sticky {
  --stage-opacity: 0;
  --stage-y: 24px;
  --stage-media-scale: 0.97;
  --photo-opacity: 1;
}

.hero-media {
  opacity: var(--photo-opacity);
}

.hero-media img {
  object-position: 60% 54%;
  transform-origin: 67% 70%;
}

.hero-shade {
  transition: background 240ms ease;
}

.hero-content {
  padding-top: 96px;
}

.hero-content > * {
  max-width: 610px;
}

.hero-content h1 {
  margin: 0;
  color: var(--text);
  font-size: clamp(4.2rem, 8vw, 7.1rem);
  font-weight: 950;
  line-height: 0.94;
}

.hero-content .hero-lead {
  max-width: 580px;
  margin: 22px 0 0;
  color: rgba(247, 251, 255, 0.9);
  font-size: clamp(1.12rem, 1.7vw, 1.42rem);
  font-weight: 750;
  line-height: 1.4;
}

.hero-actions {
  align-items: center;
  margin-top: 22px;
}

.hero-text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 7px;
  color: rgba(247, 251, 255, 0.72);
  font-size: 0.92rem;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: rgba(86, 199, 238, 0.45);
  text-underline-offset: 5px;
}

.hero-text-link:hover,
.hero-text-link:focus-visible {
  color: var(--text);
  text-decoration-color: var(--cyan);
}

.conversion-section {
  background: var(--ink-6);
}

.conversion-offer {
  min-width: 0;
}

.conversion-offer {
  display: grid;
  gap: 18px;
  scroll-margin-top: 90px;
}

.conversion-offer h2 {
  margin: 0;
  color: var(--text);
}

.conversion-offer h2 {
  font-size: clamp(2.35rem, 4.3vw, 3.8rem);
  line-height: 1.04;
}

.service-card {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.055);
}

.service-card.included-service {
  border-color: rgba(86, 199, 238, 0.38);
  box-shadow: inset 3px 0 0 var(--cyan);
}

.service-card.optional-service {
  border-color: rgba(240, 131, 58, 0.36);
  background: rgba(240, 131, 58, 0.055);
  box-shadow: inset 3px 0 0 var(--orange);
}

.service-card-label {
  margin: 0;
  color: var(--cyan);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.optional-service .service-card-label {
  color: var(--orange-light);
}

.service-card h3 {
  margin: 6px 0 0;
  color: var(--text);
  font-size: 1.2rem;
}

.service-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 20px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.service-list li {
  position: relative;
  min-width: 0;
  padding-left: 20px;
  color: var(--muted);
  font-size: 0.91rem;
}

.service-list li::before {
  content: "✓";
  position: absolute;
  top: 0;
  left: 0;
  color: var(--cyan);
  font-weight: 950;
}

.optional-service .service-list li::before {
  content: "+";
  color: var(--orange-light);
}

.trust-content .reviews-column {
  display: grid;
  gap: 14px;
  align-content: start;
}

.review-stars {
  margin-bottom: 8px;
  color: #f4c54b;
  font-size: 1rem;
  line-height: 1;
}

.review-stars span {
  color: inherit !important;
  font-size: inherit !important;
}

.google-reviews-link {
  justify-self: center;
  width: min(100%, 300px);
}

[hidden] {
  display: none !important;
}

@media (max-width: 680px) {

.hero-sticky {
    min-height: 100svh;
  }

.hero-media img {
    object-position: 67% 52%;
    transform-origin: 71% 68%;
  }

.hero-content {
    justify-content: center;
    width: min(390px, calc(100vw - 24px));
    margin: 0 12px;
    padding: 74px 0 92px;
  }

.hero-content h1 {
    font-size: clamp(3.2rem, 16vw, 4.5rem);
  }

.hero-content .hero-lead {
    max-width: 360px;
    margin-top: 16px;
    font-size: 1rem;
    line-height: 1.42;
  }

.hero-actions {
    display: block;
    margin-top: 18px;
  }

.hero-actions .btn {
    width: 100%;
    min-height: 48px;
    font-size: 0.88rem;
  }

.hero-text-link {
    display: none;
  }

.conversion-offer h2 {
    font-size: clamp(1.9rem, 8.5vw, 2.45rem);
  }

.service-card {
    padding: 18px;
  }

.service-list {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {

.hero-sticky {
    display: grid;
    height: auto;
    min-height: 100svh;
    overflow: visible;
  }

.hero-content {
    min-height: 100svh;
  }
}

/* V6: breiter Desktop, eigenständige Hauptabschnitte und kompakte Viewport-Höhen. */
:root {
  --container: min(1400px, 92vw);
}

.site-header {
  width: var(--container);
}

.hero-section {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: var(--ink);
}

.hero-section .hero-media,
.hero-section .hero-shade {
  position: absolute;
  inset: 0;
}

.hero-section .hero-media {
  z-index: 0;
  opacity: 1;
}

.hero-section .hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 63% 54%;
  transform: none;
}

.hero-section .hero-shade {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(7, 18, 33, 0.97) 0%, rgba(7, 18, 33, 0.88) 32%, rgba(7, 18, 33, 0.46) 52%, rgba(7, 18, 33, 0.08) 76%),
    linear-gradient(180deg, rgba(7, 18, 33, 0.68), rgba(7, 18, 33, 0.05) 48%, rgba(7, 18, 33, 0.68));
}

.hero-section .hero-content {
  position: relative;
  z-index: 2;
  justify-content: center;
  width: var(--container);
  min-height: 100svh;
  margin: 0 auto;
  padding: 100px 0 62px;
  opacity: 1;
  transform: none;
}

.hero-section .hero-content > * {
  width: min(42%, 590px);
  max-width: none;
}

.hero-section .hero-content h1 {
  font-size: clamp(4.6rem, 7vw, 7.5rem);
}

.hero-section .hero-content .hero-lead {
  max-width: none;
  font-size: clamp(1.08rem, 1.35vw, 1.34rem);
}

.hero-trustline {
  margin: 20px 0 0;
  color: rgba(226, 238, 248, 0.72);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.45;
}

.value-section {
  display: flex;
  align-items: center;
  min-height: 80svh;
  padding: 68px 0;
}

.value-section .section-heading {
  max-width: 980px;
  margin-bottom: 30px;
}

.conversion-section,
.contact-section,
.trust-section {
  display: flex;
  align-items: center;
  min-height: calc(100svh - 74px);
}

.conversion-section {
  padding: 58px 0;
}

.conversion-offer {
  gap: 22px;
}

.conversion-heading {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
  gap: 8px 52px;
  align-items: end;
}

.conversion-heading .section-kicker,
.conversion-heading h2 {
  grid-column: 1;
}

.conversion-heading h2 {
  font-size: clamp(2.6rem, 3.4vw, 3.55rem);
  white-space: nowrap;
}

.service-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.service-card {
  padding: 20px 22px;
}

.service-card h3 {
  font-size: 1.12rem;
}

.service-list {
  gap: 0 18px;
  margin-top: 13px;
}

.service-list li {
  padding: 7px 8px 7px 19px;
  border-top: 1px solid rgba(158, 205, 234, 0.1);
  font-size: 0.86rem;
  line-height: 1.35;
}

.service-list li::before {
  top: 7px;
}

.conversion-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 2px;
}

.conversion-cta p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.conversion-cta .btn {
  flex: 0 0 auto;
}

.contact-section {
  padding: 58px 0;
  background: var(--ink-5);
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.78fr) minmax(600px, 1.22fr);
  gap: clamp(44px, 6vw, 92px);
  align-items: center;
}

.contact-copy {
  display: grid;
  gap: 16px;
  align-content: center;
}

.contact-copy h2,
.contact-copy p {
  margin: 0;
}

.contact-copy h2 {
  font-size: clamp(2.65rem, 4.5vw, 4.5rem);
  line-height: 1.03;
}

.contact-copy > p:not(.section-kicker) {
  max-width: 520px;
  color: var(--muted);
  font-size: 1.04rem;
}

.contact-phone {
  justify-self: start;
  color: var(--cyan);
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  font-weight: 950;
}

.availability {
  display: grid;
  gap: 3px;
  margin-top: 6px;
  padding: 18px 0 0 20px;
  border-left: 3px solid var(--orange);
}

.availability strong {
  margin-bottom: 4px;
  color: var(--text);
}

.availability span {
  color: var(--muted);
  font-size: 0.9rem;
}

.availability small {
  margin-top: 10px;
  color: var(--orange-light);
  font-weight: 850;
}

.contact-form-panel {
  min-width: 0;
}

.contact-form-panel .lead-form {
  padding: 24px;
  background: rgba(255, 255, 255, 0.05);
}

.contact-form-panel .form-grid {
  gap: 13px 16px;
}

.contact-form-panel .lead-form textarea {
  min-height: 110px;
}

.contact-form-panel .consent-field {
  margin-top: 14px;
}

.contact-form-panel .form-submit {
  margin-top: 14px;
}

.trust-section {
  padding: 54px 0;
}

.reference-v1 .trust-layout-v1 {
  gap: 14px;
}

.trust-section .section-heading {
  max-width: 900px;
  margin-bottom: 4px;
}

.reference-v1 .stats-row {
  gap: 12px;
}

.reference-v1 .stats-row article {
  padding: 14px 16px;
}

.reference-v1 .trust-content {
  grid-template-columns: minmax(0, 1.18fr) minmax(420px, 0.82fr);
  gap: 14px;
}

.reference-v1 .review-stack {
  gap: 8px;
}

.reference-v1 .review-stack article {
  padding: 14px 16px;
}

.reference-v1 .review-stack p {
  font-size: 0.92rem;
}

.review-stars {
  margin-bottom: 6px;
}

.google-reviews-link {
  min-height: 42px;
}

@media (max-width: 1180px) {
:root {
    --container: min(1080px, calc(100vw - 40px));
  }

.conversion-heading {
    grid-template-columns: 1fr;
  }

.conversion-heading h2 {
    white-space: normal;
  }

.contact-layout {
    grid-template-columns: minmax(280px, 0.72fr) minmax(540px, 1.28fr);
    gap: 40px;
  }
}

@media (max-width: 900px) {
:root {
    --container: min(calc(100% - 32px), 820px);
  }

.hero-section .hero-content > * {
    width: min(56%, 520px);
  }

.value-section,
  .conversion-section,
  .contact-section,
  .trust-section {
    min-height: auto;
  }

.contact-layout {
    grid-template-columns: 1fr;
  }

.service-cards {
    grid-template-columns: 1fr;
  }

.conversion-cta {
    align-items: flex-start;
    flex-direction: column;
  }

.contact-copy h2 {
    max-width: 680px;
  }

.reference-v1 .trust-content {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
:root {
    --container: min(calc(100vw - 24px), 640px);
  }

.hero-section {
    min-height: 100svh;
  }

.hero-section .hero-media img {
    object-position: 66% 52%;
  }

.hero-section .hero-shade {
    background:
      linear-gradient(90deg, rgba(7, 18, 33, 0.95), rgba(7, 18, 33, 0.5)),
      linear-gradient(180deg, rgba(7, 18, 33, 0.68), rgba(7, 18, 33, 0.12) 45%, rgba(7, 18, 33, 0.88));
  }

.hero-section .hero-content {
    width: var(--container);
    margin: 0 auto;
    padding: 78px 0 72px;
  }

.hero-section .hero-content > * {
    width: 100%;
  }

.hero-section .hero-content h1 {
    font-size: clamp(3.15rem, 15.5vw, 4.4rem);
  }

.hero-section .hero-text-link {
    display: inline-flex;
    margin-top: 8px;
  }

.hero-trustline {
    font-size: 0.72rem;
  }

.value-section,
  .conversion-section,
  .contact-section,
  .trust-section {
    padding: 56px 0;
  }

.conversion-heading {
    display: block;
  }

.conversion-heading h2 {
    margin-top: 6px;
    font-size: clamp(2rem, 9vw, 2.6rem);
  }

.service-card {
    padding: 18px;
  }

.service-list {
    grid-template-columns: 1fr;
  }

.conversion-cta .btn {
    width: 100%;
  }

.contact-layout {
    gap: 30px;
  }

.contact-copy h2 {
    font-size: clamp(2rem, 9vw, 2.65rem);
  }

.contact-form-panel .lead-form {
    padding: 18px;
  }

.contact-form-panel .form-grid {
    grid-template-columns: 1fr;
  }

.contact-form-panel .field-full {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
.hero-section .hero-media img {
    transform: none;
  }
}

/* V7: scroll-gesteuerter Hero-Zoom ohne zusätzliche Scrollstrecke. */
.hero-section {
  --hero-scroll-scale: 1;
  --hero-scroll-x: 0px;
  --hero-scroll-y: 0px;
  --hero-copy-opacity: 1;
  --hero-copy-y: 0px;
  --hero-scroll-overlay: 0;
  min-height: 150svh;
  overflow: visible;
}

.hero-section .hero-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  background: var(--ink);
}

.hero-section .hero-sticky::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--ink-deep);
  opacity: var(--hero-scroll-overlay);
  pointer-events: none;
  will-change: opacity;
}

.hero-section .hero-media img {
  transform: translate3d(var(--hero-scroll-x), var(--hero-scroll-y), 0) scale(var(--hero-scroll-scale));
  transform-origin: 68% 72%;
  will-change: transform;
}

.hero-section .hero-content {
  opacity: var(--hero-copy-opacity);
  transform: translate3d(0, var(--hero-copy-y), 0);
  will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
.hero-section {
    min-height: 100svh;
    --hero-scroll-scale: 1 !important;
    --hero-scroll-x: 0px !important;
    --hero-scroll-y: 0px !important;
    --hero-copy-opacity: 1 !important;
    --hero-copy-y: 0px !important;
    --hero-scroll-overlay: 0 !important;
  }

.hero-section .hero-sticky {
    position: relative;
  }
}

@media (max-width: 680px) and (prefers-reduced-motion: no-preference) {
.hero-section {
    min-height: 140svh;
  }
}

/* V8: ruhiger Hero-Ausschnitt und vollständig entkoppelter Videoübergang. */
.hero-section {
  --hero-scroll-scale: 0.98;
  --hero-media-opacity: 1;
  min-height: 160svh;
}

.hero-section .hero-sticky::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  height: 110px;
  background: linear-gradient(180deg, rgba(13, 32, 52, 0), rgba(13, 32, 52, 0.78));
  pointer-events: none;
}

.hero-section .hero-media {
  opacity: var(--hero-media-opacity);
  will-change: opacity;
}

.hero-section .hero-media img {
  object-position: 66% 54%;
  transform-origin: 66% 62%;
}

@media (min-width: 1700px) {
.hero-section .hero-media img {
    object-position: 64% 54%;
    transform-origin: 64% 62%;
  }
}

@media (max-width: 1440px) {
.hero-section .hero-media img {
    object-position: 66% 53%;
    transform-origin: 66% 61%;
  }
}

@media (max-width: 1100px) {
.hero-section {
    min-height: 145svh;
  }

.hero-section .hero-media img {
    object-position: 67% 52%;
    transform-origin: 67% 60%;
  }
}

@media (max-width: 680px) {
.hero-section {
    min-height: 115svh;
  }

.hero-section .hero-media img {
    object-position: 65% 48%;
    transform-origin: 65% 58%;
  }
}

@media (prefers-reduced-motion: reduce) {
.hero-section {
    min-height: 100svh;
    --hero-scroll-scale: 0.98 !important;
    --hero-media-opacity: 1 !important;
  }
}

/* V10: V5-Scrollchoreografie mit dem aktuellen Hero-Ausgangsframe. */
.hero-section {
  min-height: 285svh;
}

.hero-section .hero-sticky {
  --stage-opacity: 0;
  --stage-y: 24px;
  --stage-media-scale: 0.97;
  --video-opacity: 0;
}

@media (max-width: 820px) {
.hero-section {
    min-height: 260svh;
  }
}

@media (max-width: 680px) {
.hero-section {
    min-height: 230svh;
  }
}

@media (prefers-reduced-motion: reduce) {
.hero-section {
    min-height: auto;
  }

.hero-section .hero-sticky {
    display: grid;
    height: auto;
    min-height: 100svh;
    overflow: visible;
  }

.hero-section .hero-content {
    min-height: 100svh;
  }
}

/* V9: vollständigerer Ausgangsframe und lückenloser Wechsel zum Videobereich. */
.hero-section {
  --hero-scroll-scale: 0.97;
  min-height: 145svh;
}

.hero-section .hero-sticky::before {
  display: none;
}

.hero-section .hero-media {
  box-sizing: border-box;
  padding-top: 28px;
  background: var(--ink);
}

.hero-section .hero-media img {
  object-fit: contain;
  object-position: 64% 58%;
  transform-origin: 64% 58%;
}

@media (min-width: 1700px) {
.hero-section .hero-media img {
    object-position: 63% 58%;
    transform-origin: 63% 58%;
  }
}

@media (max-width: 1100px) {
.hero-section {
    min-height: 135svh;
  }

.hero-section .hero-media {
    padding-top: 22px;
  }

.hero-section .hero-media img {
    object-position: 65% 57%;
    transform-origin: 65% 57%;
  }
}

@media (max-width: 680px) {
.hero-section {
    min-height: 110svh;
  }

.hero-section .hero-media {
    padding-top: 0;
  }

.hero-section .hero-media img {
    object-fit: cover;
    object-position: 65% 48%;
    transform-origin: 65% 58%;
  }
}

@media (prefers-reduced-motion: reduce) {
.hero-section {
    min-height: 100svh;
    --hero-scroll-scale: 0.97 !important;
  }
}

/* V10 final: V5-Scrollstrecken müssen nach den V9-Frame-Regeln gewinnen. */
.hero-section {
  min-height: 285svh;
}

@media (max-width: 820px) {
.hero-section {
    min-height: 260svh;
  }
}

@media (max-width: 680px) {
.hero-section {
    min-height: 230svh;
  }
}

@media (prefers-reduced-motion: reduce) {
.hero-section {
    min-height: auto;
  }
}

/* V13 final: Zielhöhen nach allen historischen Hero-Regeln. */
.hero-section {
  min-height: 230svh;
}

@media (max-width: 1100px) {
.hero-section {
    min-height: 185svh;
  }
}

@media (max-width: 680px) {
.hero-section {
    min-height: 130svh;
  }
}

@media (prefers-reduced-motion: reduce) {
.hero-section {
    min-height: 100svh;
  }
}

/* V13: lange, kontrollierte Hero-Fahrt mit rechtsbündigem Full-Bleed-Medium. */
.hero-section {
  min-height: 230svh;
}

.hero-section .hero-media {
  inset: 0;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  clip-path: inset(0 0 0 42%);
}

.hero-section .hero-media img {
  width: calc(100% + clamp(48px, 3vw, 64px));
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: 64% 54%;
  transform-origin: 67% 64%;
}

@media (max-width: 1100px) {
.hero-section {
    min-height: 185svh;
  }

.hero-section .hero-media {
    clip-path: inset(0 0 0 38%);
  }

.hero-section .hero-media img {
    object-position: 66% 54%;
    transform-origin: 68% 64%;
  }
}

@media (max-width: 680px) {
.hero-section {
    min-height: 130svh;
  }

.hero-section .hero-media {
    clip-path: none;
  }

.hero-section .hero-media img {
    width: 100%;
    object-position: 65% 48%;
    transform-origin: 65% 58%;
  }
}

@media (prefers-reduced-motion: reduce) {
.hero-section {
    min-height: 100svh;
  }
}

/* V12: längere Zoomstrecke und randloser Bildabschluss rechts. */
.hero-section {
  min-height: 320svh;
}

@media (min-width: 681px) {
.hero-section .hero-media img {
    width: calc(100% + clamp(48px, 3vw, 64px));
    max-width: none;
  }
}

@media (max-width: 820px) {
.hero-section {
    min-height: 290svh;
  }
}

@media (max-width: 680px) {
.hero-section {
    min-height: 240svh;
  }

.hero-section .hero-media img {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
.hero-section {
    min-height: auto;
  }
}

/* V13 effective: finale Scrollhöhen. */
.hero-section {
  min-height: 230svh;
}

@media (max-width: 1100px) {
.hero-section {
    min-height: 185svh;
  }
}

@media (max-width: 680px) {
.hero-section {
    min-height: 130svh;
  }
}

@media (prefers-reduced-motion: reduce) {
.hero-section {
    min-height: 100svh;
  }
}

/* V14: vollflächiger Hero mit langer Fokusfahrt zur Fräsmaschine. */
.hero-section {
  --hero-scroll-scale: 1;
  --hero-focus-x: 62%;
  --hero-focus-y: 50%;
  width: 100%;
  min-height: 360svh;
}

.hero-section .hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  clip-path: none;
}

.hero-section .hero-media img {
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-focus-x) var(--hero-focus-y);
  transform-origin: var(--hero-focus-x) var(--hero-focus-y);
}

.hero-section .hero-shade {
  background:
    linear-gradient(
      90deg,
      rgba(7, 18, 33, 0.97) 0%,
      rgba(7, 18, 33, 0.9) 24%,
      rgba(7, 18, 33, 0.62) 45%,
      rgba(7, 18, 33, 0.18) 60%,
      rgba(7, 18, 33, 0) 72%
    ),
    linear-gradient(180deg, rgba(7, 18, 33, 0.58), rgba(7, 18, 33, 0.04) 50%, rgba(7, 18, 33, 0.56));
}

@media (max-width: 1100px) {
.hero-section {
    --hero-focus-x: 63%;
    --hero-focus-y: 50%;
    min-height: 260svh;
  }
}

@media (max-width: 680px) {
.hero-section {
    --hero-focus-x: 65%;
    --hero-focus-y: 48%;
    min-height: 165svh;
  }

.hero-section .hero-shade {
    background:
      linear-gradient(90deg, rgba(7, 18, 33, 0.93), rgba(7, 18, 33, 0.42)),
      linear-gradient(180deg, rgba(7, 18, 33, 0.62), rgba(7, 18, 33, 0.08) 45%, rgba(7, 18, 33, 0.82));
  }
}

@media (prefers-reduced-motion: reduce) {
.hero-section {
    min-height: 100svh;
    --hero-scroll-scale: 1 !important;
  }
}

/* V14 final: Videobereich ohne geometrischen Abstand direkt am Hero. */

/* V15: geglättete Hero-Fokusfahrt mit vollflächigem Video-Crossfade. */
.hero-section {
  --hero-video-opacity: 0;
}

.hero-section .hero-media {
  z-index: 0;
}

.hero-section .hero-video-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  opacity: var(--hero-video-opacity);
  background: var(--ink-deep);
  pointer-events: none;
  will-change: opacity;
}

.hero-section .hero-video-layer .hero-video-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100vw, 177.78vh);
  height: max(100vh, 56.25vw);
  min-width: 100%;
  min-height: 100%;
  border: 0;
  transform: translate3d(-50%, -50%, 0) scale(1.025);
  pointer-events: none;
}

.hero-section .hero-video-layer video.hero-video-frame {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: cover;
  object-position: 50% 50%;
  transform: scale(1.025);
}

.hero-section .hero-shade {
  z-index: 1;
}

.hero-section .hero-content {
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
.hero-section {
    --hero-media-opacity: 1 !important;
    --hero-video-opacity: 0 !important;
  }

.hero-section .hero-video-layer {
    display: none;
  }
}

/* V16: finale Synthese aus langer Vollbildfahrt, spätem Crossfade und Fach-Caption.
   V18: Strecke gestrafft; Zoom scrollgesteuert bis ~80 %, danach spielt das
   1080p-Video selbstständig als Loop - Zuschauen ohne Weiterscrollen. */
.hero-section {
  --hero-caption-opacity: 0;
  --hero-caption-y: 12px;
  min-height: 240svh;
}

.hero-process-caption {
  position: absolute;
  left: clamp(28px, 5vw, 92px);
  bottom: clamp(40px, 8vh, 84px);
  z-index: 2;
  display: grid;
  width: min(620px, calc(100% - 56px));
  gap: 8px;
  opacity: var(--hero-caption-opacity);
  transform: translate3d(0, var(--hero-caption-y), 0);
  color: #fff;
  text-align: left;
  pointer-events: none;
  will-change: opacity, transform;
}

.hero-process-caption span {
  color: var(--cyan);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.hero-process-caption strong {
  font-size: 2.4rem;
  line-height: 1.06;
}

.hero-section + .value-section {
  align-items: flex-start;
  padding-top: clamp(64px, 8vh, 88px);
}

@media (max-width: 1100px) {
.hero-section {
    min-height: 220svh;
  }

.hero-process-caption {
    left: 32px;
    bottom: 52px;
    width: min(540px, calc(100% - 64px));
  }

.hero-process-caption strong {
    font-size: 2rem;
  }
}

@media (max-width: 680px) {
.hero-section {
    min-height: 175svh;
  }

.hero-process-caption {
    left: 20px;
    bottom: 34px;
    width: calc(100% - 40px);
  }

.hero-process-caption span {
    font-size: 0.7rem;
  }

.hero-process-caption strong {
    font-size: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
.hero-section {
    min-height: 100svh;
    --hero-caption-opacity: 0 !important;
  }
}

/* ============================================================
   V19 — GEO-Runde 2026-07-27: Footer-Aktualisierungsdatum
   ============================================================ */

.footer-updated {
  margin: 6px 0 0;
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.45);
}

/* ============================================================
   V20 — Ads-/GEO-Runde 2026-07-27: H1 mit Keyword-Subline,
   qualitative Vergleichstabelle in der Vorteile-Sektion
   ============================================================ */

/* V29 - 2026-08-20: Die H1 ist wieder allein das Wort "Fraessystem". Die
   Keyword-Zeile aus V20 steht jetzt als eigener Absatz direkt darunter - sie
   bleibt damit auf der Seite, teilt aber die Ueberschrift nicht mehr.
   Schriftgroesse wie vorher, naemlich 0,255 der H1-Groesse; weil em sich in
   einem eigenen Element nicht mehr auf die H1 bezieht, ist der Faktor je
   Haltepunkt ausgerechnet. */
.hero-claim {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: clamp(1.17rem, 1.79vw, 1.91rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.005em;
  text-wrap: balance;
}

@media (max-width: 680px) {
.hero-claim {
    font-size: clamp(0.8rem, 3.95vw, 1.12rem);
  }
}

/* ============================================================
   V21 — Korrekturrunde 27.07.: Überschrift-Überlappung,
   Scroll-Performance (Blur/Compositing)
   ============================================================ */

/* Die Leistungs-Überschrift stand auf "nowrap" - mit dem längeren Text lief
   sie in die Nebenspalte hinein. Jetzt umbricht sie sauber in ihrer Spalte. */
.conversion-heading h2 {
  font-size: clamp(2.05rem, 2.6vw, 2.85rem);
  white-space: normal;
  text-wrap: balance;
}

/* Der fixierte Kopfbereich lag mit backdrop-filter über dem scrollenden
   Inhalt - das kostet in jedem Bild eine Weichzeichnung der gesamten
   Kopfzeilenfläche. Der Hintergrund ist ohnehin fast deckend, deshalb
   deckend ohne Weichzeichner: optisch praktisch gleich, spürbar flüssiger. */
.site-header::before {
  background: rgba(7, 18, 33, 0.96);
  backdrop-filter: none;
}

/* clip statt hidden: verhindert, dass der Body zu einem eigenen
   Scroll-Container wird (blockiert sonst Browser-Optimierungen). */
body {
  overflow-x: clip;
}

/* Begrenzt die Neuzeichnung auf die Bühne selbst. */
.hero-sticky {
  contain: layout paint;
}

/* ============================================================
   V22 — Bildqualität 27.07.: AVIF-Auslieferung, sparsamer
   Hintergrund im Video-Rahmen
   ============================================================ */

/* Der Video-Rahmen lud als Hintergrund das große Hero-Bild (131 KB), obwohl
   darüber bereits das passend dimensionierte Bild liegt. Jetzt dieselbe
   kleine Datei - spart rund 90 KB pro Seitenaufruf. */

/* ============================================================
   V23 — Hero-Feinschliff 27.07.: Halt liegt auf dem laufenden
   Video, Abdunkelung über dem Video zurückgenommen
   ============================================================ */

/* Der Abdunkler wird vom Skript gesteuert: volle Stärke über dem Standbild
   (dort steht der Hero-Text darauf), zurückgenommen sobald das Video läuft. */
.hero-section .hero-shade {
  opacity: var(--hero-shade-opacity, 1);
}

/* Die Bildunterschrift hatte keinen eigenen Hintergrund und lebte von der
   Abdunkelung. Da diese über dem Video schwächer ist, bekommt sie eigene
   Lesbarkeit - ohne das Video zusätzlich abzudunkeln. */
.hero-process-caption span,
.hero-process-caption strong {
  text-shadow: 0 2px 20px rgba(2, 8, 17, 0.9), 0 1px 4px rgba(2, 8, 17, 0.75);
}

/* Kürzere Strecke: Die Zoomfahrt ist früher fertig, dafür bleibt die Bühne
   mit laufendem Video länger stehen. */
.hero-section {
  min-height: 200svh;
}

@media (max-width: 1100px) {
.hero-section {
    min-height: 185svh;
  }
}

@media (max-width: 680px) {
.hero-section {
    min-height: 165svh;
  }
}

@media (prefers-reduced-motion: reduce) {
.hero-section {
    min-height: 100svh;
    --hero-shade-opacity: 1 !important;
  }
}

/* ============================================================
   V24 — Streckenlänge 27.07.: Zoomfahrt wieder in voller Länge
   ============================================================ */

/* V23 hatte die Strecke gekürzt UND die Zoomfahrt früher enden lassen -
   dadurch halbierte sich der Zoomweg. Jetzt längere Strecke: die Zoomfahrt
   bekommt wieder rund 83 vh, danach hält die Bühne rund 54 vh mit dem
   laufenden Video. */
.hero-section {
  min-height: 260svh;
}

@media (max-width: 1100px) {
.hero-section {
    min-height: 235svh;
  }
}

@media (max-width: 680px) {
.hero-section {
    min-height: 200svh;
  }
}

@media (prefers-reduced-motion: reduce) {
.hero-section {
    min-height: 100svh;
    --hero-shade-opacity: 1 !important;
  }
}

/* V19: Scrollgesteuerte Bildstrecke im Hero.
   Der Canvas ersetzt das selbstlaufende Video als Bewegungsebene. Er fuellt die
   Buehne exakt aus; der Cover-Zuschnitt passiert beim Zeichnen (devicePixelRatio-
   genau), nicht ueber CSS-Groessen. Deshalb werden die auf <video> gemuenzten
   Ueberstands-Regeln hier zurueckgenommen. */
.hero-section .hero-video-layer canvas.hero-frame-canvas {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  transform: none;
  will-change: contents;
}

@media (prefers-reduced-motion: reduce) {
.hero-section .hero-video-layer canvas.hero-frame-canvas {
    display: none;
  }
}

/* V19: Einblendkurve und Staffelung.
   Die Kurve cubic-bezier(0.25, 0, 0, 1) startet schnell und laeuft weich aus -
   das wirkt bei scrollgetriggerten Einblendungen deutlich ruhiger als das
   symmetrische "ease". Der Versatz kommt aus script.js und ist bei Einzel-
   elementen 0. */
[data-reveal] {
  --reveal-delay: 0ms;
  transform: translateY(24px);
  transition:
    opacity 620ms cubic-bezier(0.25, 0, 0, 1) var(--reveal-delay),
    transform 620ms cubic-bezier(0.25, 0, 0, 1) var(--reveal-delay);
}

/* V19: Technische Eckdaten als Bezeichnung-Wert-Liste.
   Bewusst ein <dl> statt einer Tabelle: Es sind Paare, keine Matrix - und
   Vorleseprogramme wie auch Sprachmodelle lesen dt/dd verlaesslich als
   zusammengehoerig. */
.spec-table {
  margin: 0;
  border-top: 1px solid var(--line-soft);
}

.spec-row {
  display: grid;
  grid-template-columns: minmax(200px, 0.42fr) minmax(0, 1fr);
  gap: 4px 32px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-soft);
}

.spec-row dt {
  color: var(--cyan);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.spec-row dd {
  margin: 0;
  color: var(--text);
  font-size: 1.02rem;
  line-height: 1.55;
}

.spec-note {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.55;
}

@media (max-width: 680px) {
.spec-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 14px 0;
  }

.spec-row dd {
    font-size: 0.98rem;
  }
}

/* V20: Gekuerzte Seite — drei grosse Kernaussagen statt Karten-Raster.
   Wenige, dafuer grosse Argumente: Die Nummer traegt den Blick, die Zeile
   darunter das Argument. Bewusst untereinander statt nebeneinander — ein
   Argument nach dem anderen liest sich schneller als vier gleichzeitig. */
.statement-list {
  display: grid;
  gap: clamp(24px, 3vw, 40px);
  margin: 0 0 clamp(36px, 4.4vw, 60px);
  padding: 0;
  list-style: none;
}

.statement-list > li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 36px);
  align-items: start;
  padding-top: clamp(20px, 2.4vw, 30px);
  border-top: 1px solid var(--line-soft);
}

.statement-index {
  color: var(--cyan);
  font-size: clamp(1rem, 1.4vw, 1.28rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.35;
}

.statement-body h3 {
  margin: 0 0 10px;
  font-size: clamp(1.45rem, 2.7vw, 2.3rem);
  line-height: 1.14;
  letter-spacing: -0.01em;
}

.statement-body p {
  max-width: 60ch;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.1vw, 1.1rem);
  line-height: 1.6;
}

/* Faktenblock: das, was von der Technik-Sektion uebrig bleibt. Kompakt, aber
   weiter als dt/dd ausgezeichnet — die Paare bleiben maschinenlesbar. */
.spec-block {
  margin-top: clamp(30px, 3.6vw, 48px);
  padding-top: clamp(22px, 2.6vw, 32px);
  border-top: 1px solid var(--line-soft);
}

.spec-block-title {
  margin: 0 0 14px;
  color: var(--cyan);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.spec-table.spec-compact {
  border-top: 0;
}

.spec-table.spec-compact .spec-row {
  padding: 11px 0;
}

.spec-table.spec-compact .spec-row dt {
  font-size: 0.78rem;
}

.spec-table.spec-compact .spec-row dd {
  font-size: 0.97rem;
}

/* Ohne Videokarte steht in der Vertrauenssektion nur noch die Bewertungsspalte. */
.reference-v1 .trust-content.is-single {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 901px) {
.trust-content.is-single .review-stack {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
  }
}

@media (max-width: 680px) {
.statement-list > li {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

.statement-body h3 {
    font-size: clamp(1.35rem, 6.4vw, 1.7rem);
  }
}

/* V21: Erklärabschnitt direkt unter dem Hero.
   Farblich sauberer Übergang: Der Hero läuft unten exakt in den Farbton des
   folgenden Abschnitts aus (--ink-5), und dieser Abschnitt bekommt keine
   Trennlinie. Dadurch gibt es keine sichtbare Kante zwischen Bühne und Inhalt. */
.hero-section .hero-sticky::before {
  content: "";
  display: block;
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  pointer-events: none;
  height: 180px;
  background: linear-gradient(180deg, rgba(8, 21, 37, 0) 0%, rgba(8, 21, 37, 0.55) 55%, var(--ink-5) 100%);
}

.intro-section {
  border-top: 0;
  background: var(--ink-5);
  color: var(--text);
}

/* Der Erklaertext ist bewusst kurz. Damit die kurze Spalte neben dem Film
   nicht oben klebt, wird sie mittig zum Bild ausgerichtet. */
.intro-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

.intro-copy .section-kicker {
  color: var(--cyan);
}

.intro-copy h2 {
  margin: 10px 0 18px;
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.intro-copy p {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: clamp(1rem, 1.1vw, 1.1rem);
  line-height: 1.65;
}

/* Der Definitionsabsatz steht heller als der Rest - er ist die Antwort, auf die
   die Seite optimiert ist, und soll auch optisch zuerst gelesen werden. */
.intro-copy .intro-lead {
  color: var(--text);
  font-size: clamp(1.06rem, 1.22vw, 1.2rem);
}

@media (max-width: 900px) {
  .intro-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 680px) {
  .film-play {
    padding: 10px 18px 10px 12px;
  }

  .film-play-label strong {
    font-size: 0.88rem;
  }
}

/* V22: Filmkarte ruhiger und hochwertiger.
   Vorher lag ein cyanfarbenes Textfeld mitten im Bild - das erschlug die
   Aufnahme. Jetzt: ein runder Knopf mit Glasoptik, der Titel unten links auf
   einem schmalen Verlauf, sonst bleibt das Bild frei. */
.film-card {
  margin: 0;
}

.film-frame {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: var(--ink-deep);
  aspect-ratio: 16 / 9;
  box-shadow: 0 18px 50px rgba(2, 8, 17, 0.45);
  transition: box-shadow 260ms ease;
}

.film-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(226, 238, 248, 0.14);
  pointer-events: none;
}

.film-frame img,
.film-frame .film-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Nur unten abdunkeln, damit der Titel lesbar bleibt. Das Bild selbst bleibt
   in voller Helligkeit - die vorherige Vollflaechen-Abdunklung machte die
   Aufnahme flau. */
.film-frame::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  height: 45%;
  background: linear-gradient(180deg, rgba(4, 12, 21, 0), rgba(4, 12, 21, 0.72));
  pointer-events: none;
  transition: opacity 260ms ease;
}

.film-frame.is-playing::after,
.film-frame.is-playing::before {
  display: none;
}

.film-play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  padding: 0;
  border: 1px solid rgba(247, 251, 255, 0.9);
  border-radius: 50%;
  background: rgba(247, 251, 255, 0.92);
  color: var(--ink);
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: background 220ms ease, border-color 220ms ease, transform 220ms ease;
  box-shadow: 0 6px 20px rgba(2, 8, 17, 0.35);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
}

.film-play-icon {
  width: 34px;
  height: 34px;
  margin-left: 3px;
}

.film-frame:hover .film-play,
.film-play:focus-visible {
  border-color: rgba(247, 251, 255, 0.95);
  background: var(--cyan);
  color: var(--ink);
  transform: translate(-50%, -50%) scale(1.06);
}

.film-frame:hover {
  box-shadow: 0 22px 60px rgba(2, 8, 17, 0.55);
}

.film-play:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
}

.film-meta {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 15px;
  z-index: 3;
  display: flex;
  gap: 14px;
  align-items: baseline;
  justify-content: space-between;
  color: var(--text);
  pointer-events: none;
}

.film-meta-titel {
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 12px rgba(4, 12, 21, 0.7);
}

.film-meta-dauer {
  flex: none;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(4, 12, 21, 0.55);
  font-size: 0.76rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.film-frame.is-playing .film-meta {
  display: none;
}

@media (max-width: 680px) {
  .film-play {
    width: 62px;
    height: 62px;
  }

  .film-play-icon {
    width: 28px;
    height: 28px;
  }

  .film-meta-titel {
    font-size: 0.82rem;
  }
}

/* V23: Der Hero ist durchgehend die Zufahrt-Aufnahme.
   Das Startbild ist Bild 1 der Bildstrecke, der Canvas zeichnet dasselbe Motiv.
   Damit der Wechsel unsichtbar bleibt, muss das Standbild exakt so sitzen wie
   der Canvas zeichnet: mittig, ohne Zoom, ohne verschobenen Bildmittelpunkt.
   Die aus frueheren Fassungen stammenden Fokuswerte werden hier zurueckgesetzt. */
.hero-section {
  --hero-scroll-scale: 1;
  --hero-scroll-x: 0px;
  --hero-scroll-y: 0px;
  --hero-focus-x: 50%;
  --hero-focus-y: 50%;
  --hero-media-opacity: 1;
}

.hero-section .hero-media img {
  object-position: 50% 50%;
  transform: none;
  transform-origin: 50% 50%;
  will-change: auto;
}

/* Die Bewegungsebene schaltet sich hart ein, sobald genug Bilder da sind. Weil
   sie dasselbe Motiv zeigt, faellt das nicht auf - der kurze Uebergang faengt
   nur den Fall ab, dass beim Umschalten schon gescrollt wurde. */
.hero-section .hero-video-layer {
  transition: opacity 260ms ease;
}

@media (max-width: 680px) {
  .hero-section .hero-media img {
    object-position: 50% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-section {
    --hero-scroll-scale: 1 !important;
    --hero-media-opacity: 1 !important;
  }
}

/* ============================================================
   V24 — Hero: Maschine im Mittelpunkt (19.08.)
   Die Aufnahme ist neu gefuehrt und heller gestuft als vorher. Der
   Abdunkler stammt noch aus der Zeit, als der Hero ein dunkles Standbild
   war - er deckte bis 60 % der Breite ab und lag damit genau ueber der
   Maschine, die jetzt mittig steht. Er wird auf die Textspalte begrenzt.
   ============================================================ */

.hero-section .hero-shade {
  background:
    linear-gradient(
      90deg,
      rgba(7, 18, 33, 0.95) 0%,
      rgba(7, 18, 33, 0.87) 27%,
      rgba(7, 18, 33, 0.48) 43%,
      rgba(7, 18, 33, 0.12) 56%,
      rgba(7, 18, 33, 0) 66%
    ),
    linear-gradient(180deg, rgba(7, 18, 33, 0.5), rgba(7, 18, 33, 0.03) 48%, rgba(7, 18, 33, 0.46));
}

@media (max-width: 1100px) {
  .hero-section .hero-shade {
    background:
      linear-gradient(90deg, rgba(7, 18, 33, 0.93) 0%, rgba(7, 18, 33, 0.72) 40%, rgba(7, 18, 33, 0.34) 75%),
      linear-gradient(180deg, rgba(7, 18, 33, 0.58), rgba(7, 18, 33, 0.06) 45%, rgba(7, 18, 33, 0.72));
  }
}

/* Auf dem Handy steht der Text ueber der ganzen Breite - ein seitlicher
   Verlauf haette dort keinen Sinn. Stattdessen liegt die Abdunkelung als Band
   genau dort, wo der Text steht (30-74 % der Hoehe). Oben bleibt sie schwach,
   damit die Maschine gleich im ersten Bild zu erkennen ist. */
@media (max-width: 680px) {
  .hero-section .hero-shade {
    background: linear-gradient(
      180deg,
      rgba(7, 18, 33, 0.2) 0%,
      rgba(7, 18, 33, 0.36) 16%,
      rgba(7, 18, 33, 0.58) 30%,
      rgba(7, 18, 33, 0.6) 74%,
      rgba(7, 18, 33, 0.42) 100%
    );
  }
}

/* Der Auslauf in den Erklaerabschnitt wird laenger: Die neue Aufnahme ist
   heller als die alte, dadurch waere der Sprung auf --ink-5 auf 180 px zu
   kurz und als Kante sichtbar. */
.hero-section .hero-sticky::before {
  height: 260px;
  background: linear-gradient(
    180deg,
    rgba(8, 21, 37, 0) 0%,
    rgba(8, 21, 37, 0.32) 38%,
    rgba(8, 21, 37, 0.72) 70%,
    var(--ink-5) 100%
  );
}

/* Auf dem Handy ist der Auslauf ein Drittel des Bildschirms, wenn er 260 px
   hoch bleibt. Dort reichen 200 px - gemessen ist der Uebergang damit noch
   kantenfrei, das Bild bekommt aber sichtbar mehr Flaeche. */
@media (max-width: 680px) {
  .hero-section .hero-sticky::before {
    height: 200px;
  }
}

/* ============================================================
   V29 — 2026-08-20: Ablauf als Kartendeck
   Fuenf Standbilder aus dem Firmenfilm, ein Arbeitsschritt je Karte.
   Grundlage ist eine native Scroll-Snap-Leiste: wischen, Tastatur und
   Scrollrad funktionieren ohne eine Zeile JavaScript. Die Pfeile und Punkte
   sind reine Zugabe und werden von script.js sichtbar gemacht.
   ============================================================ */
.ablauf-section {
  color: var(--text);
  border-top-color: var(--line);
  background: var(--ink-6);
}

.ablauf-section .section-kicker {
  color: var(--cyan);
}

.ablauf-section .section-heading > p:last-child {
  color: var(--muted);
}

.ablauf-deck {
  margin-top: 30px;
}

/* Die Kartenbreite steht hier einmal und wird zweimal gebraucht: fuer die
   Karte selbst und fuer den Auslauf am Ende der Spur. Ohne diesen Auslauf
   kann die letzte Karte nicht an den linken Rand schnappen.
   Wichtig: die Breite in vw, nicht in Prozent. Prozent bezoege sich auf den
   Inhaltsbereich der Spur - und der haengt am Auslauf, der wiederum an der
   Kartenbreite haengt. Diese Schleife loeste der Browser mit einer zu
   schmalen Karte auf, wodurch die letzte Karte 89 px zu weit rechts stand. */
.ablauf-spur {
  --karte-breite: min(560px, 84vw);
  display: flex;
  gap: 18px;
  margin: 0;
  padding: 4px 0 6px;
  padding-inline-end: calc(100% - var(--karte-breite));
  overflow-x: auto;
  list-style: none;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.ablauf-spur::-webkit-scrollbar {
  display: none;
}

.ablauf-spur:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 6px;
  border-radius: 16px;
}

.ablauf-karte {
  flex: 0 0 var(--karte-breite);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.055);
  box-shadow: 0 18px 44px rgba(2, 8, 17, 0.34);
  scroll-snap-align: start;
  transition: opacity 260ms ease, border-color 260ms ease, box-shadow 260ms ease;
}

/* Abblenden nur, wenn die Steuerung laeuft - ohne JavaScript waeren sonst
   vier von fuenf Karten dauerhaft flau. */
.ablauf-deck.hat-steuerung .ablauf-karte {
  opacity: 0.48;
}

.ablauf-deck.hat-steuerung .ablauf-karte.ist-aktiv {
  opacity: 1;
  border-color: rgba(158, 205, 234, 0.42);
  box-shadow: 0 22px 54px rgba(2, 8, 17, 0.48);
}

.ablauf-bild {
  margin: 0;
  background: var(--ink-deep);
  aspect-ratio: 16 / 9;
}

.ablauf-bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ablauf-inhalt {
  padding: 20px 24px 24px;
}

.ablauf-zaehler {
  margin: 0;
  color: var(--cyan);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ablauf-inhalt h3 {
  margin: 8px 0 0;
  font-size: 1.42rem;
  font-weight: 900;
  line-height: 1.12;
}

.ablauf-inhalt p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.52;
}

.ablauf-steuerung {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 22px;
}

.ablauf-steuerung[hidden] {
  display: none;
}

.ablauf-pfeil {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.ablauf-pfeil svg {
  width: 20px;
  height: 20px;
}

.ablauf-pfeil:hover:not(:disabled) {
  border-color: var(--cyan);
  background: rgba(86, 199, 238, 0.14);
  color: var(--cyan);
}

.ablauf-pfeil:disabled {
  opacity: 0.32;
  cursor: default;
}

.ablauf-punkte {
  display: flex;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ablauf-punkte button {
  display: block;
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(226, 238, 248, 0.28);
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}

.ablauf-punkte button:hover {
  background: rgba(226, 238, 248, 0.55);
}

/* Die Punkte sind 9 px klein - ohne Abstand klebte der Fokusrahmen am Punkt
   und waere kaum zu sehen. */
.ablauf-punkte button:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
}

.ablauf-punkte button[aria-current="true"] {
  background: var(--cyan);
  transform: scale(1.35);
}

@media (max-width: 900px) {
.ablauf-spur {
    --karte-breite: min(460px, 82vw);
    gap: 14px;
  }

.ablauf-inhalt {
    padding: 18px 20px 20px;
  }

.ablauf-inhalt h3 {
    font-size: 1.26rem;
  }
}

@media (max-width: 680px) {
.ablauf-spur {
    --karte-breite: 80vw;
  }

.ablauf-deck {
    margin-top: 22px;
  }

.ablauf-inhalt p {
    font-size: 0.9rem;
  }

.ablauf-steuerung {
    gap: 12px;
  }
}

/* Bei reduzierter Bewegung darf die Spur nicht animiert springen - der Sprung
   passiert dann sofort. */
@media (prefers-reduced-motion: reduce) {
.ablauf-spur {
    scroll-behavior: auto;
  }

.ablauf-karte {
    transition: none;
  }
}

/* ============================================================
   V30 — 2026-08-20: Standbild, Zoom auf die Fräse, Film über die Bühne
   Die scrollgesteuerte Bildstrecke ist raus. Der Hero ist wieder ein
   Standbild, das beim Scrollen auf die Maschine zufährt; am Ende der Fahrt
   legt sich der Firmenfilm darüber. Die Bildstrecken-Regeln weiter oben
   greifen ins Leere, weil es das Element [data-hero-video] nicht mehr gibt.
   ============================================================ */

/* Ausgangswerte. Ohne sie stünde die Bühne bei abgeschaltetem JavaScript
   und bei reduzierter Bewegung auf undefinierten Variablen - dann bliebe
   der Hero-Text unsichtbar, weil das Skript ihn nie einblendet. */
.hero-section {
  --hero-zoom: 1;
  --hero-fokus-x: 50%;
  --hero-fokus-y: 50%;
  --hero-film-opacity: 0;
  --hero-copy-opacity: 1;
  --hero-shade-opacity: 1;
  min-height: 200svh;
}

@media (max-width: 1100px) {
.hero-section {
    min-height: 190svh;
  }
}

@media (max-width: 680px) {
.hero-section {
    min-height: 175svh;
  }
}

/* Gezoomt wird das Bild, nicht der Rahmen: .hero-media trägt overflow: hidden
   und schneidet die Bühne zu. Würde der Rahmen selbst skaliert, wüchse der
   Beschnitt mit und das Bild liefe über die Bühne hinaus. */
.hero-section .hero-media img {
  transform: scale(var(--hero-zoom));
  transform-origin: var(--hero-fokus-x) var(--hero-fokus-y);
  will-change: transform;
}

/* ─── Der Film über der Bühne ─────────────────────────────────────────── */
.hero-section .hero-film {
  /* Oben bleibt die Kopfzeile frei: Der Player blendet seinen eigenen Titel
     in die obere Kante ein, und der lag sonst genau unter der Navigation.
     Unten bleibt Platz für die Bildunterschrift, die am Ende der Fahrt stehen
     bleibt und dann unter dem Film steht. */
  --film-luft-oben: 92px;
  --film-luft-unten: 200px;
  --film-hoehe: calc(100svh - var(--film-luft-oben) - var(--film-luft-unten));
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  padding: var(--film-luft-oben) 0 var(--film-luft-unten);
  opacity: var(--hero-film-opacity);
  /* Solange der Film nur durchscheint, darf er keine Klicks abfangen - sonst
     wäre der Hero-Text darunter nicht mehr bedienbar. */
  pointer-events: none;
  will-change: opacity;
}

/* Eigener Vorhang statt eines stärkeren Abdunklers: Der Verlauf über dem
   Standbild ist für die Lesbarkeit des Hero-Textes gebaut und dunkelt links
   viel stärker ab als rechts. Hinter einem mittig stehenden Film sähe das
   schief aus - hier deckt eine gleichmäßige Fläche ab. Sie liegt in
   .hero-film und blendet deshalb mit demselben Wert ein. */
.hero-section .hero-film::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(2, 8, 17, 0.86);
}

.hero-section .hero-film.ist-da {
  pointer-events: auto;
}

/* Die Bildunterschrift muss ueber den Vorhang. Sie blendet nicht mehr aus,
   sondern steht am Ende der Fahrt unter dem Film - laege sie darunter, waere
   sie ab dem Filmuebergang weg. */
.hero-section .hero-process-caption {
  z-index: 4;
}

/* So groß wie möglich, ohne etwas abzuschneiden: Auf einem 16:9-Fenster füllt
   der Rahmen die Bühne fast aus, auf flacheren begrenzt ihn die Breite, auf
   hohen die Höhe. Beschneiden käme nicht in Frage - beim Film ginge dabei das
   halbe Bild verloren, und die Bedienleiste läge außerhalb. */
.hero-film-rahmen {
  position: relative;
  z-index: 1;
  width: min(100%, calc(var(--film-hoehe) * 16 / 9));
  max-height: var(--film-hoehe);
  overflow: hidden;
  background: #000;
  aspect-ratio: 16 / 9;
  /* Zieht beim Einblenden von 0,92 auf 1 auf - dadurch poppt der Film auf,
     statt nur durchzuscheinen. */
  transform: scale(var(--hero-film-scale, 1));
  box-shadow: 0 40px 120px rgba(2, 8, 17, 0.72);
}

.hero-film-player {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 680px) {
.hero-section .hero-film {
    --film-luft-oben: 76px;
    --film-luft-unten: 142px;
  }

.hero-film-rahmen {
    width: calc(100% - 24px);
    border-radius: 14px;
  }
}

/* Ohne Bewegung läuft die Bühne nicht ab: kein Zoom, kein Film, keine
   Haltephase. Der Firmenfilm steht weiterhin im Erklärabschnitt darunter,
   es geht also kein Inhalt verloren. */
@media (prefers-reduced-motion: reduce) {
.hero-section {
    --hero-zoom: 1 !important;
    --hero-film-opacity: 0 !important;
    min-height: 100svh;
  }

.hero-section .hero-media img {
    transform: none;
  }

.hero-section .hero-film {
    display: none;
  }
}

/* ============================================================
   V31 — 2026-08-20: Hero-Abstand, Kanalfoto, Ablauf auf einen Bildschirm
   ============================================================ */

/* Die Keyword-Zeile klebte an der Überschrift. */
.hero-claim {
  margin-top: 20px;
}

@media (max-width: 680px) {
.hero-claim {
    margin-top: 12px;
  }
}

/* ─── Foto im Erklärabschnitt ────────────────────────────────────────────
   Steht dort, wo bis zum 20.08.2026 der Firmenfilm lag. Der läuft jetzt im
   Hero - ihn zwanzig Zeilen tiefer noch einmal anzubieten, brachte nichts. */
.kanal-karte {
  margin: 0;
}

.kanal-rahmen {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: var(--ink-deep);
  aspect-ratio: 16 / 9;
  box-shadow: 0 18px 50px rgba(2, 8, 17, 0.45);
}

.kanal-rahmen::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(226, 238, 248, 0.14);
  pointer-events: none;
}

.kanal-rahmen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kanal-karte figcaption {
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
}

/* ─── Ablauf: alles auf einmal sichtbar ──────────────────────────────────
   Vorher war der Abschnitt 981 px hoch. Auf einem 900-px-Bildschirm blieben
   unter der Kopfleiste 824 px - man sah die Überschrift und eine halbe Karte.
   Jetzt passt Überschrift, Karte und Steuerung zusammen auf einen Bildschirm.
   Am Handy gilt das nicht: Dort ist die Karte hochkant und höher als das
   Display; eine erzwungene Bildschirmhöhe würde den Text abschneiden. */
@media (min-width: 901px) {
.ablauf-section {
    display: flex;
    align-items: center;
    min-height: 100svh;
    padding: 104px 0 44px;
  }
}

.ablauf-section .section-heading h2 {
  font-size: clamp(1.9rem, 3vw, 2.6rem);
}

.ablauf-section .section-heading > p:last-child {
  margin-top: 8px;
  font-size: 0.95rem;
}

.ablauf-deck {
  margin-top: 20px;
}

/* Kein Auslauf mehr am Ende der Spur. Vorher konnte die letzte Karte an den
   linken Rand schnappen - rechts stand dann eine leere Fläche von fast einer
   Kartenbreite. Jetzt endet die Spur bündig mit der letzten Karte.
   Dazu gehört das scroll-snap-align: end weiter unten: Ohne einen Fangpunkt
   an dieser Stelle käme die Spur bei mandatory-Snapping nicht bis ans Ende. */
.ablauf-spur {
  --karte-breite: min(520px, 80vw);
  padding-inline-end: 0;
}

.ablauf-karte:last-child {
  scroll-snap-align: end;
}

.ablauf-inhalt {
  padding: 16px 20px 18px;
}

.ablauf-inhalt h3 {
  font-size: 1.3rem;
}

.ablauf-inhalt p {
  margin-top: 8px;
  font-size: 0.92rem;
  line-height: 1.48;
}

.ablauf-steuerung {
  margin-top: 16px;
}

@media (max-width: 900px) {
.ablauf-spur {
    --karte-breite: min(440px, 80vw);
  }
}

@media (max-width: 680px) {
.ablauf-spur {
    --karte-breite: 80vw;
  }
}

/* ─── Ablauf am Rechner: eine Karte auf voller Breite ────────────────────
   Grund ist nicht die Optik, sondern die Rechnung. Ohne Auslauf am Spurende
   gibt es weniger erreichbare Scrollstellen als Karten: Bei 520 px breiten
   Karten in einer 1325 px breiten Spur teilen sich die letzten drei eine
   Endposition, und die Punkte übersprangen dadurch einen Schritt. Ist die
   Karte genau so breit wie die Spur, hat jeder Schritt seine eigene Stelle
   und die letzte Karte endet exakt am Anschlag - gemessen 6715 = 6715.
   Nebeneffekt: Bild links, Text rechts ist flacher als Bild über Text, der
   ganze Abschnitt passt damit bequem auf einen Bildschirm. */
@media (min-width: 901px) {
.ablauf-spur {
    --karte-breite: 100%;
  }

.ablauf-karte {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
  }

.ablauf-bild {
    max-height: 42svh;
  }

.ablauf-inhalt {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 28px clamp(24px, 3vw, 40px);
  }

.ablauf-inhalt h3 {
    margin-top: 10px;
    font-size: clamp(1.4rem, 2vw, 1.8rem);
  }

.ablauf-inhalt p {
    margin-top: 12px;
    font-size: clamp(0.95rem, 1.1vw, 1.06rem);
    line-height: 1.55;
  }
}

/* ============================================================
   V32 — 2026-08-20: „Warum das Frässystem" auf einen Bildschirm
   Der Abschnitt war 854 px hoch, unter der Kopfleiste stehen auf einem
   900-px-Bildschirm 826 px zur Verfügung - die dritte Kernaussage stand also
   immer angeschnitten da. Gekürzt wird an drei Stellen: Überschrift kleiner,
   Abstände zwischen den Aussagen enger, und der Nachlauf unter der Liste raus
   (der stammt aus der Zeit, als darunter noch die Vergleichstabelle stand).
   Am Handy bleibt alles wie es war - dort scrollt man ohnehin.
   ============================================================ */
@media (min-width: 901px) {
.value-section {
    min-height: 100svh;
    padding: 96px 0 44px;
  }

.value-section .section-heading h2 {
    font-size: clamp(1.9rem, 3vw, 2.6rem);
  }

.value-section .statement-list {
    gap: clamp(14px, 1.7vw, 22px);
    margin-bottom: 0;
  }

.value-section .statement-list > li {
    padding-top: clamp(13px, 1.5vw, 19px);
  }

.value-section .statement-body h3 {
    margin-bottom: 6px;
    font-size: clamp(1.28rem, 1.95vw, 1.66rem);
  }

.value-section .statement-body p {
    font-size: clamp(0.94rem, 1.02vw, 1.02rem);
    line-height: 1.55;
  }
}

/* ============================================================
   V33 — 2026-08-20: Textaufbau der Ablauf-Karten
   Die Textspalte war zu breit und die Schrift zu klein: In einem 643 px
   breiten, 380 px hohen Feld standen drei kurze Zeilen mittig, oben und
   unten blieb Luft. Drei Änderungen: Spalte schmaler, Schrift größer, und
   eine große Schrittziffer als Anker. Die Texte sind zugleich um je einen
   Satz länger, damit der Block das Feld ausfüllt.
   ============================================================ */
.ablauf-zaehler {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0;
}

.ablauf-nummer {
  color: var(--cyan);
  font-size: clamp(2.1rem, 3vw, 2.9rem);
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -0.03em;
}

.ablauf-marke {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

@media (min-width: 901px) {
  /* Mehr Bild, weniger Textfeld: vorher 1,06 zu 1 (682 zu 643 px),
     jetzt 1,4 zu 1 (773 zu 552 px). */
.ablauf-karte {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  }

.ablauf-inhalt {
    padding: 30px clamp(26px, 2.6vw, 36px);
  }

.ablauf-inhalt h3 {
    margin-top: 16px;
    font-size: clamp(1.5rem, 2.3vw, 2rem);
    line-height: 1.12;
  }

.ablauf-text {
    margin-top: 14px;
    font-size: clamp(1rem, 1.18vw, 1.12rem);
    line-height: 1.62;
  }
}

@media (max-width: 900px) {
.ablauf-nummer {
    font-size: 1.9rem;
  }

.ablauf-inhalt h3 {
    margin-top: 12px;
  }

.ablauf-text {
    margin-top: 10px;
    font-size: 0.96rem;
    line-height: 1.55;
  }
}

/* ── Kartenhöhe und Bildfüllung ──────────────────────────────────────────
   Zwei Sachen waren falsch. Erstens klaffte zwischen Bild und Text ein
   Streifen von 100 px: .ablauf-bild trug aspect-ratio 16/9 UND max-height,
   und bei dieser Kombination schrumpft der Browser die Breite mit, statt die
   Spalte zu füllen (gemessen 672 px in einer 772 px breiten Spalte).
   Zweitens war die Karte mit 380 px zu hoch für drei Zeilen Text - oben und
   unten blieben je rund 100 px leer. Jetzt füllt das Bild seine Spalte und
   schneidet über object-fit zu, und die Karte ist flacher.
   object-position sitzt bei 38 % statt mittig, damit beim Zuschnitt oben
   nichts abgeschnitten wird - auf Karte 1 steht der Kopf des Monteurs bei
   15 % der Bildhöhe. */
@media (min-width: 901px) {
  /* Feste Hoehe statt height: 100%. In einem Raster ist 100 % einer
     automatisch bemessenen Zeile zirkulaer - der Browser faellt dann auf die
     Eigenhoehe des Bildes zurueck, und die Karte wurde 436 px statt 340 px. */
.ablauf-bild {
    max-height: none;
    height: min(340px, 40svh);
    aspect-ratio: auto;
  }

.ablauf-bild img {
    object-position: 50% 38%;
  }
}

/* ============================================================
   V32 — 2026-08-21: YouTube erst auf Klick
   ============================================================ */

/* ─── Die Fläche vor dem Klick ────────────────────────────────────────────
   Hier steht bewusst kein YouTube-Vorschaubild: Auch das käme von einem
   Google-Server und wäre bereits die Übermittlung, die der Klick erst
   erlauben soll. Deshalb eine eigene dunkle Fläche im schwarzen Rahmen -
   sie kostet keine einzige zusätzliche Anfrage. */
.hero-film-consent {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 18px;
  padding: clamp(20px, 4vw, 40px);
  text-align: center;
  /* Ein weicher Lichtkegel hinter der Taste statt einer gleichmäßigen Fläche:
     Ein 16:9-Rechteck in einer Volltonfarbe liest sich sonst wie ein Loch in
     der Bühne. Der Kegel sitzt auf Höhe der Taste und führt das Auge dorthin. */
  background: radial-gradient(115% 85% at 50% 46%, rgba(21, 51, 79, 0.92), rgba(2, 9, 20, 0.98) 68%);
}

/* Ohne diese Zeile bliebe die Fläche hinter dem laufenden Film stehen: Das
   hidden-Attribut setzt display: none nur über das Browser-Standardblatt, und
   die Klassenregel darüber gewinnt. */
.hero-film-consent[hidden] {
  display: none;
}

.hero-film-start {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 28px 12px 14px;
  border: 1px solid rgba(var(--text-rgb) / 0.24);
  border-radius: 999px;
  background: rgba(var(--text-rgb) / 0.07);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition), transform var(--transition);
}

.hero-film-start:hover,
.hero-film-start:focus-visible {
  border-color: rgba(var(--cyan-rgb) / 0.6);
  background: rgba(var(--text-rgb) / 0.13);
  transform: translateY(-1px);
}

/* Der Kreis um das Dreieck ist die Abspieltaste, wie man sie erwartet. Das
   Dreieck sitzt optisch mittig, wenn es einen Hauch nach rechts rückt - die
   Grundlinie links wiegt schwerer als die Spitze rechts. */
.hero-film-start-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 50%;
  background: var(--cyan);
  color: var(--ink);
}

.hero-film-start-icon svg {
  margin-left: 2px;
}

.hero-film-start-text {
  display: grid;
  gap: 2px;
}

.hero-film-start-text strong {
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.2;
}

.hero-film-start-text span {
  font-size: 0.86rem;
  color: var(--muted);
  line-height: 1.3;
}

/* Der Hinweis muss vor dem Klick lesbar dastehen - er ist die Grundlage der
   Einwilligung, nicht bloß Kleingedrucktes. Deshalb heller als üblicher
   Fließtext dieser Größe und in der Breite begrenzt, damit er in zwei bis
   drei Zeilen bricht statt quer durch den ganzen Rahmen zu laufen. */
.hero-film-hinweis {
  margin: 0;
  max-width: 52ch;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--muted);
}

.hero-film-hinweis a {
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 680px) {
  .hero-film-consent {
    gap: 14px;
  }

  /* Auf schmalen Displays bricht die Taste sonst über die Rahmenbreite. */
  .hero-film-start {
    padding: 10px 20px 10px 12px;
    gap: 11px;
  }

  .hero-film-start-icon {
    width: 38px;
    height: 38px;
  }

  .hero-film-start-text strong {
    font-size: 0.95rem;
  }

  .hero-film-start-text span {
    font-size: 0.8rem;
  }

  .hero-film-hinweis {
    font-size: 0.75rem;
  }
}

/* ============================================================
   V33 — 2026-08-21: Umzug auf Cloudflare (Turnstile, Fehlermeldung)
   ============================================================ */

/* Seit dem 27.08.2026 laeuft Turnstile im Modus "Unsichtbar" - es gibt keinen
   Rahmen mehr, der Platz braeuchte.

   Die frueheren 65 Pixel Mindesthoehe sind deshalb weg. Sie stuenden sonst als
   Luecke zwischen Datenschutz-Haken und Absendetaste, ohne dass irgendetwas
   darin waere: Turnstile legt im unsichtbaren Modus zwar ein Element an, aber
   keines mit Hoehe - die Regel .form-turnstile:empty haette also nicht mehr
   gegriffen und die Luecke waere geblieben.

   Das Element selbst bleibt im Markup stehen, es traegt das verborgene Feld
   mit dem Token. */
.form-turnstile {
  min-height: 0;
}

/* Die Statuszeile trug bisher nur neutrale Hinweise. Kommt der Besucher nach
   einem abgelehnten Absenden zurück, muss die Meldung als Fehler erkennbar
   sein - sonst liest sie sich wie eine Bestätigung. */
.form-status.ist-fehler {
  padding: 12px 14px;
  border-left: 3px solid var(--orange);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: rgba(var(--orange-rgb) / 0.12);
  color: var(--orange-light);
}

/* ============================================================
   V54 — 2026-08-27: Einwilligung fuer GA4 und Tag Manager
   ============================================================

   Eine Leiste am unteren Rand, keine bildschirmfuellende Sperre. Die Seite
   bleibt lesbar, waehrend die Frage offen ist - das ist zulaessig, solange
   ohne Zustimmung nichts geladen wird, und genau so ist es umgesetzt
   (consent.js).

   Beide Tasten sind gleich gross und gleich gut sichtbar. Eine grelle
   Zustimmen-Taste neben einem blassen Textlink waere eine Gestaltung, die
   die Wahl nur vorgibt - und damit keine wirksame Einwilligung. */
.einwilligung {
  position: fixed;
  z-index: 60;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 16px;
  /* Ohne Zustimmung bleibt die Leiste stehen. Sie faehrt nur ein, damit sie
     nicht ins Bild springt. */
  transform: translateY(110%);
  transition: transform 220ms ease;
}

.einwilligung.ist-sichtbar {
  transform: translateY(0);
}

.einwilligung-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 28px;
  width: var(--container);
  margin-inline: auto;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgb(var(--ink-rgb) / 0.97);
  box-shadow: var(--shadow);
  color: var(--text);
}

.einwilligung-text {
  flex: 1 1 380px;
}

.einwilligung-titel {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.3;
}

.einwilligung-text p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

.einwilligung-text a {
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.einwilligung-tasten {
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
}

/* Beide Tasten tragen dasselbe Gewicht - siehe Anmerkung oben. */
.einwilligung-tasten .btn {
  flex: 1 1 auto;
  min-width: 160px;
}

/* Auf dem Handy untereinander, sonst wird der Text auf zwei Zeichen je Zeile
   gequetscht. Ablehnen steht oben: Es ist die Voreinstellung, und der Daumen
   liegt naeher an der unteren Taste. */
@media (max-width: 620px) {
  .einwilligung {
    padding: 10px;
  }

  .einwilligung-inner {
    padding: 16px;
    gap: 14px;
  }

  .einwilligung-tasten {
    flex: 1 1 100%;
    flex-direction: column-reverse;
  }

  .einwilligung-tasten .btn {
    width: 100%;
  }
}

/* Wer "reduzierte Bewegung" eingestellt hat, bekommt die Leiste ohne Fahrt.
   Dieselbe Ruecksicht nimmt schon der Hero. */
@media (prefers-reduced-motion: reduce) {
  .einwilligung {
    transition: none;
  }
}

/* Der Widerrufslink im Fussbereich ist eine Taste, weil er etwas ausloest und
   nicht irgendwohin fuehrt. Aussehen muss er trotzdem wie seine Nachbarn. */
.footer-einwilligung {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.footer-einwilligung:hover,
.footer-einwilligung:focus-visible {
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Der folgende Abschnitt stammt aus dem Entwurf "Danke-Seite_2026-08-21".
   Er wurde ANGEHAENGT und hat die Datei nicht ersetzt: Der Entwurf baute auf
   einem Stand von vor dem 21.08.2026 auf und kannte weder die Gestaltung der
   YouTube-Einwilligung im Hero (.hero-film-*) noch die des Einwilligungs-
   Banners (.einwilligung*), die Fehlerzeile im Formular
   (.form-status.ist-fehler) oder den unsichtbaren Turnstile (.form-turnstile).
   Ein Ueberschreiben haette alle vier stillschweigend entfernt. */

/* ================================================================
   V34 — Danke-Seite: alles auf eine Bildschirmhoehe
   ----------------------------------------------------------------
   Zwischen Kopf- und Fusszeile soll ohne Scrollen alles sichtbar sein:
   Dank, Handlungsaufrufe, die drei naechsten Schritte und die
   Social-Media-Knoepfe.

   Deshalb haengen Abstaende und Schriftgrade an der Fensterhoehe (vh)
   statt an festen Pixelwerten. Auf einem grossen Monitor darf es luftig
   sein, auf einem Notebook mit 800 px Hoehe rueckt es zusammen. Der
   Rahmen dafuer ist eine Flex-Spalte ueber die ganze Seite: Der
   Inhaltsbereich nimmt, was zwischen Kopf und Fuss uebrig bleibt, und
   zentriert seine Zeilen darin.

   Alle Regeln sind auf .thanks-page eingegrenzt, damit die Landingpage
   nichts davon abbekommt.
   ================================================================ */

.thanks-page {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

.thanks-page .thanks-main {
  display: flex;
  flex: 1 1 auto;
}

.thanks-page .thanks-hero {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  /* Zeilen mittig im verbleibenden Platz statt gleichmaessig verteilt.
     Vorher rissen genau hier die Luecken auf. */
  align-content: center;
  gap: clamp(14px, 2.3vh, 30px);
  /* oben Platz fuer die feste Kopfzeile (74 px + Luft) */
  padding: clamp(86px, 12vh, 128px) 16px clamp(14px, 2.4vh, 40px);
}

.thanks-page .thanks-copy h1 {
  margin: 6px 0 0;
  font-size: clamp(1.85rem, 2.1vw + 1.05rem, 3rem);
}

.thanks-page .thanks-copy > p {
  margin: 10px 0 0;
  font-size: clamp(0.94rem, 0.35vw + 0.85rem, 1.05rem);
}

.thanks-page .thanks-actions {
  margin-top: clamp(13px, 2vh, 22px);
}

.thanks-page .next-steps article {
  padding: clamp(11px, 1.8vh, 22px);
}

.thanks-page .next-steps h2 {
  margin: clamp(7px, 1.2vh, 14px) 0 0;
  font-size: clamp(0.96rem, 0.25vw + 0.9rem, 1.08rem);
}

.thanks-page .next-steps p {
  margin: 6px 0 0;
  font-size: clamp(0.82rem, 0.2vw + 0.78rem, 0.9rem);
  line-height: 1.45;
}

.thanks-page .site-footer {
  padding: clamp(13px, 2.2vh, 34px) 0;
}

/* ---- Kanalleiste ------------------------------------------------ */

.social-block {
  width: min(960px, 100%);
  text-align: center;
}

.social-block > p {
  margin: 0 0 clamp(8px, 1.4vh, 14px);
  color: var(--muted);
  font-size: clamp(0.84rem, 0.2vw + 0.8rem, 0.92rem);
}

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

.social-knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: clamp(9px, 1.5vh, 14px) 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--ink-3);
  color: var(--text);
  font-size: clamp(0.86rem, 0.2vw + 0.82rem, 0.95rem);
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}

.social-knopf:hover,
.social-knopf:focus-visible {
  border-color: var(--cyan);
  background: var(--ink-4);
  transform: translateY(-2px);
}

.social-knopf svg {
  width: 20px;
  height: 20px;
  flex: none;
}

@media (prefers-reduced-motion: reduce) {
  .social-knopf:hover,
  .social-knopf:focus-visible { transform: none; }
}

/* Auf dem Handy passt nicht alles in einen Bildschirm — dort ist eine
   kurze Wischbewegung ehrlicher als geschrumpfte Schrift. */
@media (max-width: 720px) {
  .social-leiste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .thanks-page .thanks-hero { align-content: start; }
}

/* Auf dem Handy passt der Inhalt nicht in einen Bildschirm — dafuer
   muesste Text weg. Also so eng wie vertretbar, damit die Kanalleiste
   nach einer kurzen Wischbewegung dasteht und nicht nach dreien. */
@media (max-width: 720px) {
  .thanks-page .thanks-hero {
    padding: 76px 16px 18px;
    gap: 16px;
  }

  .thanks-page .thanks-copy h1 { font-size: 1.72rem; }
  .thanks-page .thanks-copy > p { margin-top: 8px; font-size: 0.92rem; }
  .thanks-page .thanks-actions { margin-top: 14px; }

  .thanks-page .next-steps article { padding: 12px 14px; }
  .thanks-page .next-steps h2 { margin-top: 4px; font-size: 0.95rem; }
  .thanks-page .next-steps p { margin-top: 4px; font-size: 0.82rem; }

  .thanks-page .site-footer { padding: 18px 0; }
}

/* Telefon-Button zeigt die Nummer selbst. .btn bringt inline-flex,
   Zentrierung und den Abstand schon mit — hier fehlt nur die Symbolgroesse
   und die Ziffernbreite, damit die Nummer nicht flattert. */
.thanks-page .btn-tel {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.thanks-page .btn-tel svg {
  width: 18px;
  height: 18px;
  flex: none;
}

/* Ohne den Anrufen-Knopf hat die Kopfzeile nur noch zwei Kinder. Mit
   1fr auto 1fr landet die Navigation in der Mitte und steht wirklich
   mittig auf der Seite statt mittig im Restplatz neben dem Logo. */
.thanks-page .site-header {
  grid-template-columns: 1fr auto 1fr;
}

/* Die drei Schritte waren der einzige linksbuendige Block auf einer
   sonst mittig gesetzten Seite. */
.thanks-page .next-steps article {
  text-align: center;
}