/* TESSAR — Animated Site v2.1
 * Print-v2-Komponenten als Bühne für die animierte Vollversion.
 * Quelle: TESSAR Print v2.1 (Inhalt frozen) + neue Reveal-Klassen.
 *
 * Reihenfolge der Sektionen (alle 14, gefroren):
 * 01 Hero · 02 Vorleistung · 03 Vergütungsversprechen · 04 Branchen ·
 * 05 Leistungen · 06 Sourcing · 07 Finanzielles Modell · 08 Ohne Risiko ·
 * 09 Prozess · 10 Inhaber · 11 Sourcing-Netzwerk · 12 FAQ ·
 * 13 Kontakt · 14 Footer
 */


/* ════════════════════════════════════════════════════════════════
   Hero-Bullets (Bullet-Linie unter Hero-CTA-Row)
   ════════════════════════════════════════════════════════════════ */
.hero-bullets {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(31, 30, 28, 0.08);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  align-items: center;
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--grau-700);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 800ms cubic-bezier(.22,.61,.36,1) 1.5s,
              transform 800ms cubic-bezier(.22,.61,.36,1) 1.5s;
}
.hero-h1.in ~ .hero-bullets { opacity: 1; transform: none; }
.hero-bullets .b {
  display: inline-flex; align-items: center; gap: 10px;
}
.hero-bullets .b::before {
  content: ""; width: 6px; height: 6px;
  background: var(--brand-accent);
  display: inline-block;
  flex: 0 0 6px;
}
.hero-sub em {
  font-style: normal;
  font-family: inherit;
  color: var(--brand-accent);
}


/* ════════════════════════════════════════════════════════════════
   Generic 3-card grid (.cards-3)
   Verguetung · Sourcing · Risiko
   ════════════════════════════════════════════════════════════════ */
.cards-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) { .cards-3 { grid-template-columns: 1fr; } }

/* Sourcing: Auszubildende = Hauptprodukt — mittlere Spalte breiter, im
   Vordergrund (Schatten + z-index). Nummer 01 bleibt am Hauptprodukt. */
.cards-3.sourcing-cards { grid-template-columns: 1fr 1.16fr 1fr; }
.cards-3.sourcing-cards .card-base.featured {
  z-index: 2;
  box-shadow: 0 30px 70px rgba(15, 14, 12, 0.30);
}
@media (max-width: 900px) {
  .cards-3.sourcing-cards { grid-template-columns: 1fr; }
  .cards-3.sourcing-cards .card-base.featured { box-shadow: 0 18px 44px rgba(15, 14, 12, 0.26); }
}

.card-base {
  position: relative;
  padding: 36px 32px;
  background: var(--brand-paper);
  border: 1px solid rgba(31, 30, 28, 0.12);
  display: flex;
  flex-direction: column;
  gap: 18px;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms cubic-bezier(.22,.61,.36,1),
              transform 700ms cubic-bezier(.22,.61,.36,1),
              background 280ms ease-out, border-color 280ms ease-out,
              box-shadow 280ms ease-out;
  transition-delay: calc(var(--i, 0) * 120ms);
}
.cards-3[data-visible="true"] .card-base { opacity: 1; transform: none; }
.card-base:hover {
  transform: translateY(-6px);
  border-color: rgba(31, 30, 28, 0.32);
}
.cards-3[data-visible="true"] .card-base:hover { transform: translateY(-6px); }

.card-base.island {
  background: var(--brand-anthrazit);
  border-color: var(--brand-anthrazit);
  color: var(--brand-paper);
}
.card-base.island::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 25%;
  height: 2px;
  background: var(--brand-anchor);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1.2s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--i, 0) * 120ms + 400ms);
}
.cards-3[data-visible="true"] .card-base.island::before { transform: scaleX(1); }

/* C3: Index-Ziffern neutral (Bordeaux nur noch auf Selling-Point-Wörtern). */
.card-n {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--grau-500);
}
.card-base.island .card-n { color: rgba(246, 244, 238, 0.5); }

.card-h {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--brand-anthrazit);
  margin: 0;
}
.card-base.island .card-h { color: var(--brand-paper); }
.card-h em {
  font-style: normal;
  font-family: inherit;
  color: var(--brand-accent);
  font-weight: 400;
}
.card-base.island .card-h em { color: var(--brand-accent-soft); }

.card-p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--grau-700);
  margin: 0;
}
.card-base.island .card-p { color: rgba(246, 244, 238, 0.82); }

.card-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--grau-700);
}
.card-base.island .card-bullets { color: rgba(246, 244, 238, 0.78); }
.card-bullets li {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 12px;
  align-items: start;
}
.card-bullets li::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--brand-accent);
  margin-top: 7px;
}
.card-base.island .card-bullets li::before { background: var(--brand-accent-soft); }

.card-cta {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(31, 30, 28, 0.12);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--brand-anthrazit);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  transition: gap 240ms cubic-bezier(.22,.61,.36,1);
  cursor: pointer;
}
.card-cta:hover { gap: 20px; }
.card-base.island .card-cta {
  border-top-color: rgba(246, 244, 238, 0.16);
  color: var(--brand-paper);
}
.card-cta .arrow {
  display: inline-block;
  width: 16px; height: 1px;
  background: currentColor;
  position: relative;
}
.card-cta .arrow::after {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  width: 5px; height: 5px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

.card-flag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grau-500);
}
.card-base.island .card-flag { color: rgba(246, 244, 238, 0.55); }
.card-flag .flag {
  font-size: 16px;
  line-height: 1;
  transition: transform 320ms cubic-bezier(.22,.61,.36,1);
}
.card-base:hover .card-flag .flag { transform: translateY(-2px) scale(1.08); }


/* ════════════════════════════════════════════════════════════════
   Generic Pearl section (.section + .section.dark)
   ════════════════════════════════════════════════════════════════ */
.section {
  background: var(--brand-paper);
  color: var(--grau-700);
  padding: 140px 0;
  border-top: 1px solid rgba(31, 30, 28, 0.08);
  position: relative;
}
.section.dark {
  background: var(--brand-anthrazit);
  color: var(--brand-paper);
  border-top: 0;
}
.section.dark::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 25%;
  height: 3px;
  background: var(--brand-anchor);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1.4s cubic-bezier(.22,.61,.36,1) 0.2s;
}
.section.dark[data-visible="true"]::before { transform: scaleX(1); }
.section.dark::after {
  content: "";
  position: absolute;
  top: 3px; left: 0; right: 0;
  height: 1px;
  background: rgba(246, 244, 238, 0.18);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1.6s cubic-bezier(.22,.61,.36,1) 0.4s;
}
.section.dark[data-visible="true"]::after { transform: scaleX(1); }
.section.dark .section-overline { color: rgba(246, 244, 238, 0.55); }
.section.dark .section-overline::before { background: var(--brand-accent-soft); }
.section.dark .section-h2 { color: var(--brand-paper); }
.section.dark .section-h2 em { color: var(--brand-accent-soft); }
.section.dark .section-sub { color: rgba(246, 244, 238, 0.78); }


/* ════════════════════════════════════════════════════════════════
   Section-head reveal (overline + h2 + sub)
   ════════════════════════════════════════════════════════════════ */
.section .section-overline,
.section .section-h2,
.section .section-sub {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 700ms cubic-bezier(.22,.61,.36,1),
              transform 700ms cubic-bezier(.22,.61,.36,1);
}
.section .section-h2 { transition-delay: 80ms; }
.section .section-sub { transition-delay: 200ms; }
.section[data-visible="true"] .section-overline,
.section[data-visible="true"] .section-h2,
.section[data-visible="true"] .section-sub { opacity: 1; transform: none; }


/* ════════════════════════════════════════════════════════════════
   02 · VORLEISTUNG — drei Pearl-Items mit kinetischer Linie
   ════════════════════════════════════════════════════════════════ */
.vor-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  position: relative;
  padding-top: 32px;
  border-top: 1px solid rgba(31, 30, 28, 0.18);
}
@media (max-width: 900px) { .vor-list { grid-template-columns: 1fr; } }
.vor-list::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  height: 1px;
  width: 100%;
  background: var(--brand-accent);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1.6s cubic-bezier(.22,.61,.36,1) 0.3s;
}
.section[data-visible="true"] .vor-list::before { transform: scaleX(0.18); }
.vor-item {
  display: flex;
  flex-direction: column;
  gap: 14px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms cubic-bezier(.22,.61,.36,1),
              transform 700ms cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--i, 0) * 140ms + 300ms);
}
.section[data-visible="true"] .vor-item { opacity: 1; transform: none; }
.vor-n {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--grau-500);
}
.vor-h {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--brand-anthrazit);
  margin: 0;
}
.vor-h em {
  font-style: normal;
  font-family: inherit;
  color: var(--brand-accent);
  font-weight: 400;
}
.vor-p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--grau-700);
  margin: 0;
}


/* ════════════════════════════════════════════════════════════════
   04 · BRANCHEN — endlos-Ticker, zwei Reihen gegenläufig
   ════════════════════════════════════════════════════════════════ */
.branchen-rails {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
  margin-top: 8px;
  /* edge fade masks */
  mask-image: linear-gradient(to right, transparent 0, #000 96px, #000 calc(100% - 96px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 96px, #000 calc(100% - 96px), transparent 100%);
}
.branchen-rail {
  display: flex;
  width: max-content;
  gap: 14px;
}
.branchen-rail.dir-l {
  animation: branchenScrollL 60s linear infinite;
}
.branchen-rail.dir-r {
  animation: branchenScrollR 70s linear infinite;
}
@keyframes branchenScrollL {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes branchenScrollR {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
body.motion-off .branchen-rail { animation: none !important; }
body.no-ticker .branchen-rail { animation-play-state: paused; }

.branchen-tag {
  flex: 0 0 auto;
  padding: 16px 20px;
  border: 1px solid rgba(31, 30, 28, 0.18);
  background: var(--brand-paper);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--brand-anthrazit);
  letter-spacing: -0.005em;
  line-height: 1.3;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  transition: border-color 200ms ease-out, color 200ms ease-out, background 200ms ease-out;
}
.branchen-tag:hover {
  border-color: var(--brand-accent);
  color: var(--brand-accent);
}
.branchen-tag .n {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--grau-500);
}
.branchen-tag.alle {
  border: 1px solid var(--brand-accent);
  color: var(--brand-accent);
  background: rgba(110, 26, 40, 0.04);
  font-style: normal;
  font-family: inherit;
  font-size: 17px;
  padding: 14px 22px;
}
.branchen-tag.alle .n {
  color: var(--brand-accent-soft);
  font-style: normal;
  font-family: var(--font-mono);
}


/* ════════════════════════════════════════════════════════════════
   05 · LEISTUNGEN — drei Cluster mit Bordeaux-Top-Line
   ════════════════════════════════════════════════════════════════ */
.cluster-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
@media (max-width: 900px) { .cluster-grid { grid-template-columns: 1fr; gap: 24px; } }

.cluster {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 28px;
  position: relative;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms cubic-bezier(.22,.61,.36,1),
              transform 700ms cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--i, 0) * 120ms + 200ms);
}
.cluster::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--brand-accent);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1.2s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--i, 0) * 120ms + 500ms);
}
.section[data-visible="true"] .cluster { opacity: 1; transform: none; }
.section[data-visible="true"] .cluster::before { transform: scaleX(1); }

.cluster-n {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--grau-500);
}
.cluster-h {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--brand-anthrazit);
  margin: 0;
}
.cluster-h em {
  font-style: normal;
  font-family: inherit;
  color: var(--brand-accent);
  font-weight: 400;
}
.cluster-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--grau-700);
}
.cluster-list li {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 10px;
  align-items: start;
}
.cluster-list li::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--brand-anthrazit);
  margin-top: 8px;
}
.leistungen-foot {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid rgba(31, 30, 28, 0.18);
  font-size: 13.5px;
  color: var(--grau-500);
  max-width: 720px;
}
.leistungen-foot em {
  font-style: normal;
  font-family: inherit;
  color: var(--brand-accent);
}


/* ════════════════════════════════════════════════════════════════
   07 · FINANZIELLES MODELL — Money-Flow (scroll-getrieben)
   ════════════════════════════════════════════════════════════════ */
.money-flow {
  margin-top: 56px;
  position: relative;
}
.money-flow-line {
  position: absolute;
  left: 5%; right: 5%;
  top: 22px;
  height: 1px;
  background: rgba(31, 30, 28, 0.18);
  z-index: 0;
}
.money-flow-line .draw {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--p, 0%);
  background: var(--brand-anchor);
  transition: width 80ms linear;
}
.money-flow-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  position: relative;
  z-index: 1;
}
@media (max-width: 900px) {
  .money-flow-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .money-flow-line { display: none; }
}
.money-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding: 0 8px;
  opacity: 0.36;
  transition: opacity 480ms cubic-bezier(.22,.61,.36,1);
}
.money-step.is-active { opacity: 1; }
.money-step-marker {
  width: 44px; height: 44px;
  border: 1px solid rgba(31, 30, 28, 0.28);
  background: var(--brand-paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--brand-anthrazit);
  letter-spacing: 0.04em;
  transition: background 320ms ease-out, color 320ms ease-out;
}
.money-step.is-active.final .money-step-marker {
  background: var(--brand-anthrazit);
  color: var(--brand-paper);
  position: relative;
}
.money-step.is-active.final .money-step-marker::before {
  content: "";
  position: absolute;
  inset: -6px;
  border: 1px solid var(--brand-anthrazit);
  animation: pulse 2.4s ease-out infinite;
}
.money-step-amount {
  font-family: var(--font-mono);
  font-size: 22px;
  color: var(--grau-500);
  letter-spacing: -0.01em;
  transition: color 320ms ease-out;
}
.money-step.is-active.final .money-step-amount { color: var(--brand-accent); }
.money-step-h {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.012em;
  line-height: 1.2;
  margin: 0;
  color: var(--brand-anthrazit);
}
.money-step-p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--grau-700);
  margin: 0;
}


/* ════════════════════════════════════════════════════════════════
   09 · PROZESS — 6 Schritte, Step 06 als Anthrazit-Island
   (überschreibt .flow grid auf 6 Spalten + tighter Step-Padding)
   ════════════════════════════════════════════════════════════════ */
.process.process-6 .flow { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1080px) {
  .process.process-6 .flow { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .process.process-6 .flow { grid-template-columns: 1fr; }
}
.process.process-6 .step {
  padding: 20px 18px 26px 18px;
}
.process.process-6 .step-h {
  font-size: 20px;
}
.process.process-6 .step-p {
  font-size: 13.5px;
}


/* ════════════════════════════════════════════════════════════════
   10 · INHABER — Stimme-Sektion bullets (extra below Quote-Meta)
   ════════════════════════════════════════════════════════════════ */
.stimme-bullets {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(246, 244, 238, 0.12);
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(246, 244, 238, 0.78);
}
.stimme-bullets li {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 10px;
  align-items: start;
  list-style: none;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 600ms ease-out, transform 600ms cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--i, 0) * 90ms + 600ms);
}
.stimme-bullets li::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--brand-accent-soft);
  margin-top: 8px;
}
.stimme[data-visible="true"] .stimme-bullets li { opacity: 1; transform: none; }


/* ════════════════════════════════════════════════════════════════
   11 · SOURCING-NETZWERK — 3 Mini-Cards, Bordeaux-Left-Accent
   ════════════════════════════════════════════════════════════════ */
.netz-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) { .netz-grid { grid-template-columns: 1fr; gap: 16px; } }

.netz-card {
  position: relative;
  padding: 28px 28px 28px 32px;
  background: rgba(31, 30, 28, 0.03);
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms cubic-bezier(.22,.61,.36,1),
              transform 700ms cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--i, 0) * 120ms + 200ms);
}
.netz-card::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 3px;
  background: var(--brand-accent);
  transform-origin: top center;
  transform: scaleY(0);
  transition: transform 900ms cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--i, 0) * 120ms + 500ms);
}
.section[data-visible="true"] .netz-card { opacity: 1; transform: none; }
.section[data-visible="true"] .netz-card::before { transform: scaleY(1); }

.netz-card-n {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--grau-500);
}
.netz-card-h {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.012em;
  margin: 0;
  color: var(--brand-anthrazit);
  line-height: 1.2;
}
.netz-card-p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--grau-700);
  margin: 0;
}
.netz-foot {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(31, 30, 28, 0.12);
  font-size: 13px;
  color: var(--grau-500);
  max-width: 720px;
}


/* ════════════════════════════════════════════════════════════════
   13 · KONTAKT — Formular (auf Anthrazit)
   ════════════════════════════════════════════════════════════════ */
.kontakt-stage {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 900px) {
  .kontakt-stage { grid-template-columns: 1fr; gap: 32px; }
}
.kontakt-form {
  background: rgba(246, 244, 238, 0.04);
  border: 1px solid rgba(246, 244, 238, 0.08);
  padding: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 700px) {
  .kontakt-form { grid-template-columns: 1fr; gap: 16px; padding: 24px; }
}
.kontakt-field { display: flex; flex-direction: column; gap: 8px; }
.kontakt-field.span2 { grid-column: span 2; }
@media (max-width: 700px) { .kontakt-field.span2 { grid-column: span 1; } }
.kontakt-field label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(246, 244, 238, 0.7);
}
.kontakt-field label .req { color: var(--brand-accent-soft); margin-left: 4px; }
.kontakt-field input,
.kontakt-field select,
.kontakt-field textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(246, 244, 238, 0.32);
  color: var(--brand-paper);
  font-family: var(--font-body);
  font-size: 15px;
  padding: 12px 0 10px 0;
  outline: none;
  transition: border-color 200ms ease-out;
}
.kontakt-field input:focus,
.kontakt-field select:focus,
.kontakt-field textarea:focus {
  border-bottom-color: var(--brand-accent-soft);
  border-bottom-width: 2px;
  padding-bottom: 9px;
}
.kontakt-field select option {
  background: var(--brand-anthrazit);
  color: var(--brand-paper);
}
.kontakt-checkbox {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(246, 244, 238, 0.78);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.kontakt-checkbox input { margin-top: 4px; flex: 0 0 auto; accent-color: var(--brand-accent-soft); }
.kontakt-checkbox a { color: var(--brand-accent-soft); border-bottom: 1px solid currentColor; }
.kontakt-rechtshinweis {
  grid-column: span 2;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.55;
  color: rgba(246, 244, 238, 0.5);
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid rgba(246, 244, 238, 0.12);
}
@media (max-width: 700px) { .kontakt-rechtshinweis { grid-column: span 1; } }
.kontakt-submit {
  grid-column: span 2;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 28px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.02em;
  background: var(--brand-accent);
  color: var(--brand-paper);
  border: 0;
  cursor: pointer;
  justify-content: center;
  transition: background 200ms ease-out;
}
.kontakt-submit:hover { background: #5C1620; }
.kontakt-submit .arrow {
  display: inline-block;
  width: 22px; height: 1px;
  background: currentColor;
  position: relative;
  transition: transform 240ms cubic-bezier(.22,.61,.36,1);
}
.kontakt-submit .arrow::after {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  width: 6px; height: 6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.kontakt-submit:hover .arrow { transform: translateX(4px); }
@media (max-width: 700px) { .kontakt-submit { grid-column: span 1; } }

.kontakt-side {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 8px;
}
.kontakt-side-row { display: flex; flex-direction: column; gap: 6px; }
.kontakt-side-row .l {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(246, 244, 238, 0.55);
}
.kontakt-side-row .v {
  font-size: 15px;
  color: var(--brand-paper);
  line-height: 1.5;
}


/* ════════════════════════════════════════════════════════════════
   14 · FOOTER — Wordmark-Reveal "TESSAR" einzeilig (Auto-Fit JS)
   Audit 2026-05-20: "Group" entfernt (Option A juristisch sicher,
   GmbH-Umwandlung ist Phase 2 — nicht erfolgt).
   ════════════════════════════════════════════════════════════════ */
.footer-claim {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: normal;
  font-size: 26px;
  line-height: 1.3;
  color: rgba(246, 244, 238, 0.92);
  max-width: 360px;
  margin: 0 0 14px 0;
}
.footer-claim em {
  color: var(--brand-accent-soft);
  font-style: normal;
}
.footer-mark {
  letter-spacing: 0.04em;
  font-size: 220px;
  line-height: 0.9;
  display: block;
  white-space: nowrap;
}
.footer-mark .row { display: inline-block; white-space: nowrap; }
.footer-mark .lc { text-transform: none; }


/* ════════════════════════════════════════════════════════════════
   Hero — anpassen für Voice-B (zwei Zeilen H1)
   ════════════════════════════════════════════════════════════════ */
.hero-h1 br + .word > span {
  /* second line starts visually together with the first */
}


/* ════════════════════════════════════════════════════════════════
   Section 02 + 04 + 05 + 07 + 08 + 09 + 11 — generic .section padding
   matches existing process/segments rhythm
   ════════════════════════════════════════════════════════════════ */
.section .section-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin-bottom: 72px;
}
.section .section-head .section-sub { max-width: 760px; }
@media (max-width: 900px) {
  .section .section-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 48px; }
}


/* ════════════════════════════════════════════════════════════════
   Tweaks: motion off — disable all section reveals & tickers
   ════════════════════════════════════════════════════════════════ */
body.motion-off [data-visible="false"],
body.motion-off [data-visible="true"] {
  /* Force end-state instantly so no in-flight transforms remain */
}
body.motion-off .section .section-overline,
body.motion-off .section .section-h2,
body.motion-off .section .section-sub,
body.motion-off .vor-item,
body.motion-off .card-base,
body.motion-off .cluster,
body.motion-off .netz-card,
body.motion-off .stimme-bullets li,
body.motion-off .hero-bullets,
body.motion-off .hero-overline,
body.motion-off .hero-sub,
body.motion-off .hero-cta-row,
body.motion-off .hero-right,
body.motion-off .hero-metrics {
  opacity: 1 !important;
  transform: none !important;
}
body.motion-off .hero-h1 .word > span { transform: none !important; opacity: 1 !important; }
body.motion-off .vor-list::before,
body.motion-off .cluster::before,
body.motion-off .netz-card::before,
body.motion-off .card-base.island::before,
body.motion-off .section.dark::before,
body.motion-off .section.dark::after,
body.motion-off .stimme-anchor::before,
body.motion-off .stimme-anchor::after,
body.motion-off .footer-anchor::before,
body.motion-off .footer-anchor::after,
body.motion-off .hero-h1 em::after { transform: scaleX(1) !important; }
body.motion-off .footer-mark span { transform: none !important; }


/* ════════════════════════════════════════════════════════════════
   Hero-Ticker: Voice-B copy update happens in HTML directly
   (no rule changes needed)
   ════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════
   Cards-3 alignment: equal heights via flex
   ════════════════════════════════════════════════════════════════ */
.cards-3 .card-base { height: 100%; }


/* ════════════════════════════════════════════════════════════════
   Hero-h1: zweizeilig (Voice-B). Erste Zeile soll oben atmen.
   ════════════════════════════════════════════════════════════════ */
.hero-h1 .word { line-height: 1.04; }