/* ==========================================================================
   Spenst Industrieservice — Design System
   Stahl- und Metallbau, Euskirchen
   ========================================================================== */

:root {
  --schwarz: #131316;
  --schwarz-2: #1e1e22;
  --rot: #c21415;
  --rot-dunkel: #9c1622;
  --rot-hell: #c21415;
  --weiss: #ffffff;
  --offwhite: #f5f4f2;
  --grau-hell: #eceae7;
  --grau-mittel: #d8d5d1;
  --grau-text: #5a5b60;
  --grau-text-hell: #8c8d92;
  --schatten: 0 24px 60px rgba(19, 19, 22, .16);
  --schatten-klein: 0 10px 28px rgba(19, 19, 22, .10);
  --wrap: 1240px;
  --spalt: 22px;
  --lueck-gross: clamp(2.6rem, 5vw, 4.4rem);
  --lueck: clamp(1.6rem, 3vw, 2.6rem);
  /* Typografie: eine Textgröße, sechs Überschriftengrößen */
  --text: 1.0625rem;
  --h1: clamp(2.4rem, 5.2vw, 4rem);
  --h2: clamp(1.9rem, 3.6vw, 2.8rem);
  --h3: clamp(1.4rem, 2.2vw, 1.75rem);
  --h4: 1.125rem;
  --h5: 1.125rem;
  --h6: 1.125rem;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--schwarz);
  background: var(--weiss);
  font-size: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; width: 100%; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--spalt); }

h1, h2, h3, h4, h5, h6 {
  font-family: "Oswald", "Barlow Condensed", -apple-system, sans-serif;
  font-weight: 600;
  line-height: 1.12;
  text-transform: uppercase;
  letter-spacing: .01em;
  margin: 0 0 .5em;
  overflow-wrap: break-word;
}
h1 { font-size: var(--h1); font-weight: 700; }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
h4 { font-size: var(--h4); text-transform: none; }
h5 { font-size: var(--h5); text-transform: none; }
h6 { font-size: var(--h6); letter-spacing: .08em; }
p { margin: 0 0 1em; color: var(--grau-text); }
p:last-child { margin-bottom: 0; }

.rot { color: var(--rot); font-weight: 700; }
.section--dunkel .rot, .hero .rot { color: var(--rot-hell); }

.lead { color: var(--grau-text); max-width: 40rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: "Oswald", sans-serif;
  font-size: .86rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  padding: 1rem 1.9rem;
  border: 1px solid transparent;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn[hidden] { display: none; }
.btn-primary { background: var(--rot); color: var(--weiss); }
.btn-primary:hover { background: var(--rot-dunkel); }
.btn-dark { background: var(--schwarz); color: var(--weiss); }
.btn-dark:hover { background: #000; }
.btn-outline { background: transparent; color: var(--weiss); border-color: rgba(255,255,255,.45); }
.btn-outline:hover { border-color: var(--weiss); background: rgba(255,255,255,.08); }
.btn-outline-dark { background: transparent; color: var(--schwarz); border-color: var(--grau-mittel); }
.btn-outline-dark:hover { border-color: var(--schwarz); }
.btn-lg { padding: 1.15rem 2.2rem; font-size: .92rem; }
.btn svg { width: 1rem; height: 1rem; }

/* ---------- Top-Leiste ---------- */
.topbar {
  background: var(--schwarz); color: rgba(255,255,255,.75); padding: .55rem 0;
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.topbar a { color: rgba(255,255,255,.85); transition: color .18s ease; }
.topbar a:hover { color: var(--rot-hell); }
.topbar-links { display: flex; gap: 1.6rem; flex-wrap: wrap; }
.topbar-links span { display: inline-flex; align-items: center; gap: .5rem; }
.topbar-links svg { width: .95rem; height: .95rem; color: var(--rot-hell); }
.topbar-note { letter-spacing: .04em; }

/* ---------- Header ---------- */
.kopf {
  background: var(--weiss); position: sticky; top: 0; z-index: 200;
  box-shadow: 0 8px 20px rgba(19, 19, 22, .10);
}
.kopf .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: .7rem; }
.kopf__logo img { height: 48px; width: auto; }
.kopf__nav { display: flex; align-items: center; gap: 2.1rem; }
.kopf__nav a {
  font-family: "Oswald", sans-serif; font-size: .86rem; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase; color: var(--schwarz);
  position: relative; padding-bottom: 4px;
}
.kopf__nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--rot);
  transition: right .22s ease;
}
.kopf__nav a:hover::after, .kopf__nav a.aktiv::after { right: 0; }
.kopf__nav a.aktiv { color: var(--rot); }

.kopf__mega { position: relative; }
.kopf__mega-trigger {
  display: inline-flex !important; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer; padding: 0 0 4px;
}
.kopf__mega-trigger .chevron { width: 10px; height: 10px; transition: transform .18s ease; }
.kopf__mega-trigger[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.kopf__mega-panel {
  position: absolute; top: 100%; left: 50%; margin-top: 16px;
  min-width: 300px; background: var(--weiss); padding: 10px; box-shadow: var(--schatten);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  opacity: 0; visibility: hidden; transform: translate(-50%, -8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 210;
}
.kopf__mega-panel.ist-offen { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.kopf__mega-panel a {
  display: flex; align-items: center; gap: 13px; padding: 13px 16px;
  font-family: "Oswald", sans-serif; font-size: .85rem; font-weight: 500; letter-spacing: .02em; text-transform: uppercase;
  color: var(--schwarz); white-space: nowrap;
}
.kopf__mega-panel a:hover { background: var(--offwhite); color: var(--rot); }
.kopf__mega-panel svg { width: 21px; height: 21px; color: var(--rot); flex-shrink: 0; }

.kopf__rechts { display: flex; align-items: center; gap: 1.4rem; }
.kopf__telefon { display: flex; align-items: center; gap: .55rem; font-weight: 600; }
.kopf__telefon svg { width: 1.1rem; height: 1.1rem; color: var(--rot); }
.burger {
  display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px;
}
.burger span { width: 24px; height: 2px; background: var(--schwarz); }

.mobil-nav { display: none; }

/* ---------- Hero ---------- */
.hero { position: relative; padding-top: clamp(5rem, 12vw, 8.5rem); padding-bottom: clamp(3.5rem, 8vw, 6rem); color: var(--weiss); overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-bg img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.8s ease;
}
.hero-bg img.is-active { opacity: 1; }
.hero-bg img:nth-of-type(1).is-active { animation: heroKenBurns1 8s ease-out forwards; }
.hero-bg img:nth-of-type(2).is-active { animation: heroKenBurns2 8s ease-out forwards; }
.hero-bg img:nth-of-type(3).is-active { animation: heroKenBurns3 8s ease-out forwards; }
.hero-bg img:nth-of-type(4).is-active { animation: heroKenBurns4 8s ease-out forwards; }
.hero-bg img:nth-of-type(5).is-active { animation: heroKenBurns5 8s ease-out forwards; }
@keyframes heroKenBurns1 { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.12) translate(-2%, -1%); } }
@keyframes heroKenBurns2 { from { transform: scale(1.1) translate(1%, 1%); } to { transform: scale(1) translate(-1%, 0); } }
@keyframes heroKenBurns3 { from { transform: scale(1) translate(1%, -1%); } to { transform: scale(1.12) translate(0, 1%); } }
@keyframes heroKenBurns4 { from { transform: scale(1.08) translate(-1%, 1%); } to { transform: scale(1) translate(1%, -1%); } }
@keyframes heroKenBurns5 { from { transform: scale(1) translate(-1%, -1%); } to { transform: scale(1.1) translate(1%, 0); } }
@media (prefers-reduced-motion: reduce) {
  .hero-bg img { transition: none; animation: none !important; }
}
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,15,18,.72) 0%, rgba(15,15,18,.55) 45%, rgba(15,15,18,.92) 100%);
}
.hero .wrap { position: relative; z-index: 1; text-align: center; }
.hero__inner { max-width: 46rem; margin-inline: auto; }
.hero h1 { color: var(--weiss); margin-top: 1.1rem; }
.hero .lead { color: rgba(255,255,255,.82); margin-inline: auto; margin-top: 1.1rem; }
.hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem; margin-top: 2.2rem; }
.hero-cta--kontakt { gap: .7rem; }
.hero-cta--kontakt .btn { padding-inline: 1.3rem; }
@media (min-width: 621px) { .hero-cta--kontakt { flex-wrap: nowrap; } }

.hero-note {
  margin: 2.2rem 0 0; font-family: "Oswald", sans-serif; font-size: .85rem; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.75);
}

/* ---------- Trust-Leiste ---------- */
.trust-bar { background: var(--offwhite); border-bottom: 1px solid var(--grau-hell); }
.trust-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.4rem 3rem; padding-block: 1.6rem; }
.trust-item { display: flex; align-items: center; gap: .65rem; font-family: "Oswald", sans-serif; font-size: .84rem; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; color: var(--schwarz); }
.trust-item svg { width: 1.2rem; height: 1.2rem; color: var(--rot); flex-shrink: 0; }

/* ---------- Sektionen ---------- */
.section { padding-block: clamp(3.6rem, 8vw, 6.4rem); }
.section--offwhite { background: var(--offwhite); }
.section--dunkel { background: var(--schwarz); color: var(--weiss); }
.section--dunkel .eyebrow { color: var(--rot-hell); }
.section--dunkel p { color: rgba(255,255,255,.72); }
.section--dunkel h2 { color: var(--weiss); }
.section--foto-bg { position: relative; isolation: isolate; }
.section--foto-bg::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(120deg, rgba(19,19,22,.95), rgba(19,19,22,.86)),
    url("../img/leistung-industrie-real.jpg") center/cover no-repeat;
}
.section-head { max-width: 40rem; margin-bottom: var(--lueck); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head h2 { margin-top: .5rem; }

/* Schraege Kante am oberen Sektionsrand, fuer sanfte Uebergaenge statt
   harter Farbkante. Klemmt einen Keil aus der Sektion, der Hintergrund
   der vorherigen Sektion schimmert dort durch (deshalb negativer
   margin-top als Ueberlappung). Zusaetzliches padding-top haelt den
   Inhalt unterhalb des Keils. Richtung passt zum Eck-Cut der Buttons. */
.kante-schraeg {
  position: relative;
  margin-top: -40px;
  padding-top: calc(clamp(3.6rem, 8vw, 6.4rem) + 40px);
  clip-path: polygon(0 40px, 100% 0, 100% 100%, 0 100%);
}
@media (max-width: 620px) {
  .kante-schraeg { margin-top: -22px; padding-top: calc(clamp(3.6rem, 8vw, 6.4rem) + 22px); clip-path: polygon(0 22px, 100% 0, 100% 100%, 0 100%); }
}

/* ---------- Split (Intro) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.4rem, 5vw, 5rem); align-items: center; }
.split__bild { position: relative; }
.split__bild-haupt {
  clip-path: polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px);
  box-shadow: var(--schatten); overflow: hidden;
}
.split__bild-haupt img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }
.split__bild-klein {
  position: absolute; bottom: -8%; right: -12%; width: 46%;
  border: 6px solid var(--weiss); box-shadow: var(--schatten);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  overflow: hidden;
}
.split__bild-klein img { aspect-ratio: 1/1; object-fit: cover; }
.split__bild::after {
  content: "";
  position: absolute;
  left: 0;
  right: 34%;
  bottom: -15px;
  height: 15px;
  background: var(--rot);
}
.split__usps { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin: 1.8rem 0 2rem; }
.split__usp { background: var(--offwhite); padding: 1.3rem 1.4rem; border-bottom: 3px solid var(--rot); }
.split__usp svg { width: 1.6rem; height: 1.6rem; color: var(--rot); margin-bottom: .7rem; }
.split__usp h4 { margin-bottom: .3rem; text-transform: none; }
.split__usp p { margin: 0; }

/* ---------- Leistungen-Grid ---------- */
.leistungen-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--grau-mittel); }
.leistung-karte { background: var(--weiss); position: relative; overflow: hidden; }
.leistung-karte__bild { position: relative; aspect-ratio: 5/4; overflow: hidden; }
.leistung-karte__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.leistung-karte:hover .leistung-karte__bild img { transform: scale(1.07); }
.leistung-karte__nr {
  position: absolute; top: 12px; left: 12px; background: var(--rot); color: var(--weiss);
  font-family: "Oswald", sans-serif; font-weight: 600; font-size: .8rem; padding: 5px 10px;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.leistung-karte__inhalt { padding: 1.6rem 1.5rem 1.8rem; }
.leistung-karte h3 { margin-bottom: .55rem; text-transform: none; }
.leistung-karte p { margin: 0; }
.leistung-karte__link {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: 1rem;
  font-family: "Oswald", sans-serif; font-size: .78rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--rot);
}
.leistung-karte__link svg { width: .95rem; height: .95rem; transition: transform .2s ease; }
.leistung-karte:hover .leistung-karte__link svg { transform: translateX(4px); }
.leistung-block .leistung-karte__link { margin-top: 1.3rem; }
.leistung-block .leistung-karte__link svg { width: .95rem; height: .95rem; transition: transform .2s ease; }
.leistung-block:hover .leistung-karte__link svg { transform: translateX(4px); }

/* ---------- Leistungen-Blöcke (drei Hauptbereiche) ---------- */
.leistungen-block-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; align-items: stretch; }
.leistung-block {
  background: var(--weiss); border: 1px solid var(--grau-mittel); display: flex; flex-direction: column;
  clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
  overflow: hidden; transition: box-shadow .25s ease, transform .25s ease;
}
.leistung-block:hover { box-shadow: var(--schatten); transform: translateY(-3px); }
.leistung-block__bild { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.leistung-block__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.leistung-block:hover .leistung-block__bild img { transform: scale(1.06); }
.leistung-block__badge {
  position: absolute; top: 12px; left: 12px; background: var(--rot); color: var(--weiss);
  font-family: "Oswald", sans-serif; font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: 6px 10px;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.leistung-block__inhalt { padding: 1.8rem 1.6rem 2rem; display: flex; flex-direction: column; flex: 1; }
.leistung-block__icon { width: 2.3rem; height: 2.3rem; color: var(--rot); margin-bottom: 1rem; }
.leistung-block h3 { text-transform: none; margin-bottom: .4rem; }
.leistung-block__tagline { font-style: italic; color: var(--rot); font-weight: 500; margin-bottom: .8rem; }
.leistung-block__text { margin-bottom: 1.3rem; }
.leistung-block__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; }
.leistung-block__chip {
  background: var(--offwhite); border: 1px solid var(--grau-mittel); color: var(--schwarz);
  font-family: "Oswald", sans-serif; font-size: .74rem; font-weight: 500; letter-spacing: .02em; text-transform: uppercase;
  padding: .4rem .75rem;
}
.leistung-block__versprechen {
  font-family: "Oswald", sans-serif; font-weight: 600; font-size: .88rem; letter-spacing: .01em;
  color: var(--schwarz); margin: 1.1rem 0 0;
}

/* ---------- Projekte ---------- */
.projekte-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.projekt-karte { position: relative; overflow: hidden; clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); }
.projekt-karte img { aspect-ratio: 4/3.2; object-fit: cover; transition: transform .5s ease; width: 100%; }
.projekt-karte:hover img { transform: scale(1.08); }
.projekt-karte__overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.6rem;
  background: linear-gradient(180deg, transparent 40%, rgba(15,15,18,.9) 100%);
}
.projekt-karte__tag { display: inline-block; align-self: flex-start; font-family: "Oswald", sans-serif; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--weiss); background: var(--rot); padding: .28rem .6rem; line-height: 1.3; margin-bottom: .5rem; }
.projekt-karte__titel { color: var(--weiss); font-family: "Oswald", sans-serif; font-size: 1.15rem; font-weight: 600; text-transform: uppercase; }

/* ---------- CTA-Band ---------- */
.cta-band {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
  background: var(--schwarz); color: var(--weiss);
  padding: clamp(2.2rem, 5vw, 3.2rem); position: relative; overflow: hidden;
  clip-path: polygon(28px 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%, 0 28px);
}
.cta-band::before {
  content: ""; position: absolute; top: -40%; right: -8%; width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, var(--rot) 0%, transparent 70%); opacity: .35;
}
.cta-band__text { position: relative; max-width: 34rem; }
.cta-band h2 { color: var(--weiss); margin-bottom: .5rem; }
.cta-band p { color: rgba(255,255,255,.72); margin: 0; }
.cta-band__aktionen { position: relative; display: flex; gap: .9rem; flex-wrap: wrap; }

/* ---------- FAQ ---------- */
/* Zwei feste Spalten (statt CSS-columns): Öffnen einer Antwort verschiebt keine Fragen in die andere Spalte */
.faq-liste { max-width: none; display: grid; grid-template-columns: 1fr 1fr; column-gap: 3.5rem; align-items: start; }
.faq-spalte { min-width: 0; }
.faq-item { border-bottom: 1px solid var(--grau-mittel); break-inside: avoid; }
.faq-item__frage {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: none; border: none; text-align: left; cursor: pointer;
  padding: 1.35rem 0; font-family: "Oswald", sans-serif; font-size: 1rem; font-weight: 500; color: var(--schwarz);
}
.faq-item__icon { position: relative; width: 20px; height: 20px; flex-shrink: 0; }
.faq-item__icon::before, .faq-item__icon::after {
  content: ""; position: absolute; background: var(--rot); top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.faq-item__icon::before { width: 14px; height: 2px; }
.faq-item__icon::after { width: 2px; height: 14px; transition: transform .2s ease; }
.faq-item__frage[aria-expanded="true"] .faq-item__icon::after { transform: translate(-50%, -50%) rotate(90deg) scaleY(0); }
.faq-item__antwort { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-item__antwort p { padding-bottom: 1.4rem; padding-right: 2rem; }

/* ---------- Referenzen / Testimonials ---------- */
/* .stimmen-grid bleibt nur fuer die statische <noscript>-Variante
   erhalten. Die eigentliche Slideshow nutzt .stimmen-marquee /
   .stimmen-track weiter unten. */
.stimmen-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; }
.stimme { background: var(--weiss); padding: 2rem; border-bottom: 3px solid var(--rot); display: flex; flex-direction: column; box-shadow: 0 16px 36px rgba(19, 19, 22, .16); }
.stimme__zitat { flex: 1; color: var(--schwarz); margin-bottom: 1.3rem; }
.stimme__kopf { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.stimme__autor { font-family: "Oswald", sans-serif; font-weight: 600; font-size: .92rem; margin: 0; }
.stimme__sterne { color: var(--rot); font-size: .85rem; letter-spacing: .12em; white-space: nowrap; }
.stimme__projekt { color: var(--grau-text-hell); margin: .35rem 0 0; }

.stimmen-marquee {
  margin: 2.6rem 0 -1rem;
  padding-block: 1rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}
.stimmen-track { display: flex; gap: 1.6rem; width: max-content; padding-inline: var(--spalt); animation: stimmenLauf 46s linear infinite; }
.stimmen-marquee:hover .stimmen-track { animation-play-state: paused; }
.stimmen-track .stimme { width: min(360px, 82vw); flex-shrink: 0; }
@keyframes stimmenLauf {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .stimmen-track { animation: none; }
}

/* ---------- Footer ---------- */
.fuss-ticker {
  background: var(--rot); color: var(--weiss); padding: .8rem 0; overflow: hidden;
}
.fuss-ticker__track { display: flex; width: max-content; animation: fussTickerLauf var(--tick-dauer, 26s) linear infinite; will-change: transform; }
.fuss-ticker__group { display: flex; flex-wrap: nowrap; }
.fuss-ticker span {
  font-family: "Oswald", sans-serif; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  padding-inline: 1.1rem; border-right: 1px solid rgba(255,255,255,.35); white-space: nowrap;
}
/* läuft genau eine Gruppenbreite weiter, dann nahtlos von vorn (Breite setzt main.js) */
@keyframes fussTickerLauf { to { transform: translateX(calc(-1 * var(--tick-breite, 50%))); } }
@media (prefers-reduced-motion: reduce) { .fuss-ticker__track { animation: none; } }

.fuss { background: var(--schwarz); color: rgba(255,255,255,.65); padding-block: clamp(3rem, 6vw, 4.5rem) 1.6rem; }
.fuss__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 3rem; margin-bottom: 2.6rem; }
.fuss__logo-karte {
  display: inline-block; background: var(--weiss); padding: .7rem 1.1rem; margin-bottom: 1.3rem;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.fuss__logo { height: 40px; width: auto; display: block; }
.fuss__marke p { color: rgba(255,255,255,.6); max-width: 26rem; }
.fuss h6 { color: var(--weiss); letter-spacing: .1em; margin-bottom: 1.1rem; }
.fuss ul li { margin-bottom: .65rem; }
.fuss a:hover { color: var(--rot-hell); }
.fuss__unten {
  border-top: 1px solid rgba(255,255,255,.12); padding-top: 1.6rem;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
}
.fuss__unten a:hover { color: var(--rot-hell); }

/* ---------- Rechtstexte (Impressum, Datenschutz) ---------- */
.wrap--schmal { max-width: 46rem; }
.rechtstext { padding-block: clamp(3rem, 6vw, 4.5rem) clamp(4rem, 8vw, 6rem); }
.rechtstext h1 { margin-bottom: 1.6rem; }
.rechtstext h3 { margin-top: 2.2rem; }
.rechtstext h4 { margin-top: 1.6rem; }
.rechtstext p, .rechtstext li { color: var(--grau-text); }
.rechtstext a { color: var(--rot); font-weight: 600; }

/* ---------- Kontaktformular ---------- */
.kontakt-split { align-items: start; }
.kontakt-formular {
  background: var(--weiss); color: var(--schwarz); padding: clamp(1.8rem, 3vw, 2.4rem);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
}
.kontakt-formular h3 { font-family: "Oswald", sans-serif; margin: 0 0 1.4rem; }
.form-row { margin-bottom: 1rem; }
.form-grid2 { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 560px) { .form-grid2 { grid-template-columns: 1fr 1fr; } }
.fl { display: block; font-family: "Oswald", sans-serif; font-weight: 600; font-size: .8rem; letter-spacing: .03em; margin-bottom: .4rem; }
.req { color: var(--rot); }
.kontakt-formular input, .kontakt-formular textarea, .kontakt-formular select {
  width: 100%; padding: .8rem .9rem; border: 1px solid var(--grau-mittel); font: inherit; font-size: var(--text);
  background: var(--weiss); color: var(--schwarz);
}
.kontakt-formular textarea { min-height: 130px; resize: vertical; }
.kontakt-formular input:focus, .kontakt-formular textarea:focus, .kontakt-formular select:focus {
  outline: 2px solid var(--rot); outline-offset: 1px;
}
.hp { position: absolute; left: -9999px; }
.consent { display: flex; gap: .6rem; align-items: flex-start; color: var(--grau-text); margin: 1.1rem 0 1.4rem; }
.consent input { width: auto; margin-top: .2rem; }
.consent a { color: var(--rot); font-weight: 600; }
.alert { padding: .9rem 1.1rem; border-radius: 3px; margin-bottom: 1.2rem; font-weight: 600; }
.alert-ok { background: #e7f7ee; color: #146c3a; border: 1px solid #b8e6cb; }
.alert-err { background: #fdeceb; color: #9c2b22; border: 1px solid #f3c3bd; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-sichtbar { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* Gestaffeltes Einblenden: Karten/Items einer Gruppe folgen kurz nacheinander statt alle gleichzeitig. */
.leistung-block:nth-child(2) { transition-delay: .12s; }
.leistung-block:nth-child(3) { transition-delay: .24s; }
.projekt-karte:nth-child(2) { transition-delay: .12s; }
.projekt-karte:nth-child(3) { transition-delay: .24s; }
.split__usp:nth-child(2) { transition-delay: .12s; }
.trust-item:nth-child(2) { transition-delay: .1s; }
.trust-item:nth-child(3) { transition-delay: .2s; }
.trust-item:nth-child(4) { transition-delay: .3s; }
.faq-item:nth-child(2) { transition-delay: .08s; }
.faq-item:nth-child(3) { transition-delay: .16s; }
.faq-item:nth-child(4) { transition-delay: .24s; }
.faq-item:nth-child(5) { transition-delay: .32s; }

/* Icons ploppen kurz nach ihrer Karte leicht nach, statt starr mit einzublenden. */
.leistung-block__icon, .split__usp > svg, .trust-item svg {
  transition: transform .5s ease .18s, opacity .5s ease .18s;
  transform: scale(.55);
  opacity: 0;
}
.leistung-block.is-sichtbar .leistung-block__icon,
.split__usp.is-sichtbar > svg,
.trust-item.is-sichtbar svg {
  transform: scale(1);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .leistung-block__icon, .split__usp > svg, .trust-item svg { transform: none; opacity: 1; }
}

/* ---------- Hero-Eintrittsanimation ---------- */
@keyframes heroFadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
.hero h1 { animation: heroFadeUp .8s ease both; }
.hero .lead { animation: heroFadeUp .8s ease .15s both; }
.hero-cta { animation: heroFadeUp .8s ease .3s both; }
.hero-note { animation: heroFadeUp .8s ease .45s both; }
@media (prefers-reduced-motion: reduce) {
  .hero h1, .hero .lead, .hero-cta, .hero-note { animation: none; }
}

/* ---------- Prozess-Schritte (Unterseiten) ---------- */
.schritte-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.schritt { background: var(--offwhite); padding: 1.8rem 1.6rem; border-bottom: 3px solid var(--rot); }
.schritt__nr { font-family: "Oswald", sans-serif; font-weight: 700; font-size: 1.7rem; color: var(--rot); margin-bottom: .5rem; }
.schritt h3 { margin-bottom: .4rem; text-transform: none; }
.schritt p { margin: 0; }
.schritt:nth-child(2) { transition-delay: .12s; }
.schritt:nth-child(3) { transition-delay: .24s; }

/* ---------- Konfigurator (Wizard) ---------- */
.wizard {
  background: var(--weiss); color: var(--schwarz); box-shadow: var(--schatten); max-width: none; margin-inline: 0;
  padding: clamp(1.8rem, 4vw, 2.8rem);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%);
}
.wizard h3 { color: var(--schwarz); }
.wizard p { color: var(--grau-text); }
.wizard-fortschritt { height: 4px; background: var(--grau-hell); margin-bottom: .7rem; }
.wizard-fortschritt__fuellung { height: 100%; width: 20%; background: var(--rot); transition: width .3s ease; }
.wizard-zaehler {
  font-family: "Oswald", sans-serif; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--grau-text-hell); margin: 0 0 1.8rem;
}
.wizard-schritt h3 { margin-bottom: .35rem; }
.wizard-schritt > p.lead { margin-bottom: 1.6rem; }
.wizard-schritt .klein { color: var(--grau-text-hell); margin-top: 1rem; }

.wahl-karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.wahl-karten--breit { grid-template-columns: repeat(2, 1fr); }
.wahl-karte { display: block; cursor: pointer; position: relative; }
.wahl-karte input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wahl-karte__inner {
  display: block; height: 100%; background: var(--offwhite); border: 1px solid var(--grau-mittel);
  padding: 1.2rem 1.3rem; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.wahl-karte input:checked + .wahl-karte__inner { border-color: var(--rot); background: var(--weiss); box-shadow: 0 0 0 2px var(--rot) inset; }
.wahl-karte input:focus-visible + .wahl-karte__inner { outline: 2px solid var(--rot); outline-offset: 2px; }
.wahl-karte__inner strong {
  display: block; font-family: "Oswald", sans-serif; font-size: .95rem; font-weight: 600;
  letter-spacing: .02em; text-transform: uppercase; margin-bottom: .35rem; color: var(--schwarz);
}
.wahl-karte__inner small { display: block; color: var(--grau-text); line-height: 1.5; }

.wizard-uebersicht { background: var(--offwhite); border-left: 3px solid var(--rot); padding: 1.2rem 1.4rem; margin-bottom: 1.8rem; }
.wizard-uebersicht li { color: var(--grau-text); margin-bottom: .4rem; }
.wizard-uebersicht li:last-child { margin-bottom: 0; }
.wizard-uebersicht strong { color: var(--schwarz); }

.wizard-nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 2.2rem; }
.wizard-nav .btn { min-width: 9.5rem; }

.wizard-feldgruppe { background: var(--offwhite); border: 1px solid var(--grau-mittel); padding: 1.5rem 1.6rem; }
.wizard-feldgruppe .form-grid2 { margin-bottom: 0; }
.wizard-hinweis {
  display: flex; align-items: flex-start; gap: .7rem; margin-top: 1.3rem; line-height: 1.5; color: var(--grau-text);
}
.wizard-hinweis svg { width: 1.15rem; height: 1.15rem; color: var(--rot); flex-shrink: 0; margin-top: .15rem; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .kopf__nav, .kopf__telefon { display: none; }
  .burger { display: flex; }
  .mobil-nav.ist-offen {
    display: flex; flex-direction: column; gap: 0; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--weiss); box-shadow: var(--schatten-klein); padding: .6rem var(--spalt) 1.4rem; z-index: 199;
  }
  .mobil-nav a {
    padding: .85rem 0; border-bottom: 1px solid var(--grau-hell);
    font-family: "Oswald", sans-serif; font-size: .95rem; text-transform: uppercase; letter-spacing: .03em;
  }
  .mobil-nav .btn { margin-top: 1rem; }

  .mobil-nav-gruppe { border-bottom: 1px solid var(--grau-hell); }
  .mobil-nav-gruppe a { border-bottom: none; }
  .mobil-nav-toggle {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: none; border: none; cursor: pointer; padding: .85rem 0;
    font-family: "Oswald", sans-serif; font-size: .95rem; text-transform: uppercase; letter-spacing: .03em; color: var(--schwarz);
  }
  .mobil-nav-toggle.aktiv { color: var(--rot); }
  .mobil-nav-toggle .chevron { width: 11px; height: 11px; transition: transform .2s ease; }
  .mobil-nav-toggle[aria-expanded="true"] .chevron { transform: rotate(180deg); }
  .mobil-nav-unterliste {
    display: flex; flex-direction: column; gap: 0; margin: 0 0 .6rem; padding-left: 14px; border-left: 2px solid var(--rot);
  }
  .mobil-nav-unterliste a {
    display: flex; align-items: center; gap: 10px; padding: .7rem 0; border-bottom: none;
    font-size: .84rem; font-weight: 400; color: var(--grau-text);
  }
  .mobil-nav-unterliste svg { width: 18px; height: 18px; color: var(--rot); flex-shrink: 0; }

  .split { grid-template-columns: 1fr; }
  .split__bild-klein { display: none; }
  .split__usps { grid-template-columns: 1fr; }

  .leistungen-grid { grid-template-columns: repeat(2, 1fr); }
  .leistungen-block-grid { grid-template-columns: 1fr; max-width: 32rem; margin-inline: auto; }
  .projekte-grid { grid-template-columns: 1fr; }
  .stimmen-grid { grid-template-columns: 1fr; }
  .faq-liste { grid-template-columns: 1fr; }
  .fuss__grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .cta-band { flex-direction: column; align-items: flex-start; }
  .topbar-note { display: none; }
  .schritte-grid { grid-template-columns: 1fr; }
  .wahl-karten { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .leistungen-grid { grid-template-columns: 1fr; }
  .hero-cta .btn { width: 100%; }
  .wahl-karten, .wahl-karten--breit { grid-template-columns: 1fr; }
  .wizard-nav { flex-wrap: wrap; }
  .wizard-nav .btn { flex: 1; min-width: 0; }
}

/* ==========================================================================
   Hintergrundgrafiken — dezente technische/regionale Motive je Section.
   Reine Dekoration: pointer-events:none, kein Einfluss auf Layout/Kontrast.
   Ausgangswerte der SVGs liegen bereits bei opacity .11–.14, die hier
   gesetzte opacity multipliziert nochmal, sichtbare Staerke landet also
   bewusst im Bereich ~.05–.09.
   ========================================================================== */
.bg-karte-region, .bg-stahlbau, .bg-terrassendach, .bg-industrieservice, .bg-raster, .bg-kontakt-region {
  position: relative;
}
.bg-karte-region::after, .bg-stahlbau::after, .bg-terrassendach::after,
.bg-industrieservice::after, .bg-raster::after, .bg-kontakt-region::after {
  content: ""; position: absolute; pointer-events: none; z-index: 0;
}
.bg-karte-region > *, .bg-stahlbau > *, .bg-terrassendach > *,
.bg-industrieservice > *, .bg-raster > *, .bg-kontakt-region > * {
  position: relative; z-index: 1;
}

.bg-karte-region { overflow: hidden; }
.bg-karte-region::after {
  inset: 0;
  background: url("../img/backgrounds/euskirchen-karte.webp") right center / 60% auto no-repeat;
  opacity: .22;
  filter: contrast(1.35) brightness(.92);
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1), rgba(0,0,0,.7) 55%, transparent 100%);
  mask-image: linear-gradient(to left, rgba(0,0,0,1), rgba(0,0,0,.7) 55%, transparent 100%);
}

.bg-stahlbau { overflow: hidden; }
.bg-stahlbau::after {
  inset: -4% -6% -4% auto;
  left: 40%;
  background: url("../img/backgrounds/stahlbau-blueprint.svg") right bottom / contain no-repeat;
  opacity: .6;
}

.bg-terrassendach { overflow: hidden; }
.bg-terrassendach::after {
  inset: -4% -6% -4% auto;
  left: 40%;
  background: url("../img/backgrounds/terrassendach-lineart.svg") right bottom / contain no-repeat;
  opacity: .6;
}

.bg-industrieservice { overflow: hidden; }
.bg-industrieservice::after {
  inset: -4% -6% -4% auto;
  left: 40%;
  background: url("../img/backgrounds/industrieservice-blueprint.svg") right bottom / contain no-repeat;
  opacity: .6;
}

.bg-raster { overflow: hidden; }
.bg-raster::after {
  inset: 0;
  background: url("../img/backgrounds/technisches-raster.svg") center / cover no-repeat;
  opacity: .5;
}

/* Sitzt auf .section--dunkel (fast schwarz): die Linien im SVG sind dunkel
   gezeichnet, per invert() werden sie auf dunklem Grund hell und damit
   ueberhaupt erst sichtbar. */
.bg-kontakt-region { overflow: hidden; }
.bg-kontakt-region::after {
  inset: 0;
  background: url("../img/backgrounds/kontakt-region-detail.svg") 78% center / 72% auto no-repeat;
  opacity: .5;
  filter: invert(1);
}

@media (max-width: 768px) {
  .bg-karte-region::after { opacity: .05; background-size: 85% auto; }
  .bg-stahlbau::after, .bg-terrassendach::after, .bg-industrieservice::after { opacity: .35; }
  .bg-raster::after { opacity: .3; }
  .bg-kontakt-region::after { opacity: .3; background-size: 100% auto; }
}

@media (max-width: 480px) {
  .bg-stahlbau::after, .bg-terrassendach::after, .bg-industrieservice::after,
  .bg-karte-region::after, .bg-kontakt-region::after { display: none; }
}


/* ==========================================================================
   Typografie-System (14.10.2026)
   Überschriften h1-h6: Oswald, je eigene Größe (Variablen --h1 bis --h6).
   Fließtext: Barlow, überall dieselbe Größe (--text). Bausteine setzen keine
   eigenen Textgrößen mehr. Ausnahmen nur für Bedienelemente in Oswald
   (Buttons, Menü, kleine Etiketten).
   ========================================================================== */
p, li, dd, dt, td, th, address, label, small, .lead, blockquote { font-size: var(--text); font-family: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }

/* Kein seitliches Scrollen durch überstehende Hero-Bilder/Slider */
html, body { overflow-x: clip; }

/* Icons vor den Kontaktdaten im Footer, gleiche Farbe wie der Text */
.fuss-kontakt { display: flex; align-items: flex-start; gap: .6rem; }
.fuss-ic { flex: none; width: 1.05em; height: 1.05em; margin-top: .3em; color: currentColor; opacity: .85; }
.fuss-kontakt a, .fuss-kontakt span { min-width: 0; overflow-wrap: anywhere; }

/* Konfigurator Schritt 1: Kacheln mit Bild */
.wahl-karten--bild { grid-template-columns: repeat(4, 1fr); }
.wahl-karte--bild .wahl-karte__inner { padding: 0 0 1.1rem; overflow: hidden; }
.wahl-karte--bild img { display: block; width: 100%; height: auto !important; aspect-ratio: 4/3; object-fit: cover; margin-bottom: .9rem; transition: transform .4s ease; }
.wahl-karte--bild:hover img { transform: scale(1.04); }
.wahl-karte--bild strong, .wahl-karte--bild small { padding-inline: 1.1rem; }
@media (max-width: 960px) { .wahl-karten--bild { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .wahl-karte--bild small { display: none; } .wahl-karte--bild strong { font-size: .85rem; } }

/* Konfigurator: Schieberegler für die Maße */
.mass-regler { margin-bottom: 1.6rem; }
.mass-regler .fl { display: inline-block; }
.mass-wert { float: right; font-family: "Oswald", sans-serif; font-weight: 700; font-size: 1.6rem; line-height: 1; color: var(--rot); }
.mass-regler input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; margin: 1rem 0 .4rem; background: var(--grau-mittel); outline: 0; cursor: pointer; }
.mass-regler input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: var(--weiss); border: 4px solid var(--rot); box-shadow: 0 3px 10px rgba(0,0,0,.18); }
.mass-regler input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--weiss); border: 4px solid var(--rot); }
.mass-regler input[type=range]:focus-visible { outline: 2px solid var(--rot); outline-offset: 4px; }
.mass-skala { display: flex; justify-content: space-between; color: var(--grau-text-hell); }

/* Konfigurator Abschluss: Felder links, Auswahl rechts, große Eingabefelder */
.wizard-abschluss { display: grid; grid-template-columns: 1.5fr 1fr; gap: 2rem; align-items: start; margin-bottom: 1.2rem; }
.wizard-felder .form-grid2 { display: block; }
.wizard-felder .form-row { margin-bottom: 1.1rem; }
.wizard-abschluss input[type=text], .wizard-abschluss input[type=tel], .wizard-abschluss input[type=email], .wizard-abschluss textarea {
  display: block; width: 100%; padding: .95rem 1rem; font: inherit; font-size: var(--text); color: var(--schwarz);
  background: var(--weiss); border: 1px solid var(--grau-mittel); border-radius: 0; transition: border-color .18s ease, box-shadow .18s ease; }
.wizard-abschluss textarea { min-height: 7.5rem; resize: vertical; }
.wizard-abschluss input:focus, .wizard-abschluss textarea:focus { outline: 0; border-color: var(--rot); box-shadow: 0 0 0 3px rgba(194,20,21,.12); }
.wizard-auswahl { position: sticky; top: 100px; background: var(--offwhite); border-top: 3px solid var(--rot); padding: 1.4rem 1.5rem; }
.wizard-auswahl h4 { margin-bottom: .8rem; }
.wizard-auswahl .wizard-uebersicht { background: none; border: 0; padding: 0; margin: 0; }
@media (max-width: 860px) { .wizard-abschluss { grid-template-columns: 1fr; } .wizard-auswahl { position: static; order: -1; } }
.wizard-abschluss { margin-top: 1rem; }
.wizard-nav #wizardWeiter, .wizard-nav #wizardAbsenden { margin-left: auto; }

/* ==========================================================================
   Etiketten in Oswald (14.10.2026): einheitlich und größer
   --label: Leisten, Links, Hinweise, Formular-Labels
   --label-klein: Plaketten und Kategorien auf Bildern
   ========================================================================== */
:root { --label: 14px; --label-klein: 12px; }
.trust-item, .hero-note, .leistung-karte__link, .leistung-block__versprechen, .leistung-block__chip,
.fuss-ticker span, .fl, .wizard-zaehler, .kopf__mega-panel a { font-size: var(--label); }
.leistung-block__badge, .projekt-karte__tag, .leistung-karte__nr { font-size: var(--label-klein); }
.trust-item svg { width: 1.2em; height: 1.2em; }
/* FAQ-Fragen etwas größer als der Antworttext (Oswald läuft schmal) */
.faq-item__frage { font-size: 1.25rem; line-height: 1.3; }
.faq-item__frage:focus { outline: 0; }
.faq-item__frage:focus-visible { outline: 2px solid var(--rot); outline-offset: 4px; }
/* Vorteils-Leiste unter dem Hero: so groß wie die FAQ-Fragen */
.trust-item { font-size: 1.25rem; }

/* ==========================================================================
   Schrift-Konsolidierung (14.10.2026): genau 2 Schriften, feste Stufen
   Barlow  = jeder Fließtext, eine Größe: --text (17px)
   Oswald  = Überschriften und alles in Oswald nur in den h-Stufen:
             --h1 64 · --h2 45 · --h3 28 · --h4 21 · --h5 18 · --h6 16 (px, Desktop)
   Zuordnung: Buttons/Menü/Labels/Plaketten = h6, Projekttitel = h5,
   FAQ-Fragen/Vorteilsleiste = h4, große Zahlen = h3.
   ========================================================================== */
.stimme__sterne { font-size: var(--text); }
.btn, .btn-lg, .kopf__nav a, .kopf__mega-panel a, .mobil-nav a.btn, .hero-note, .leistung-block__chip, .leistung-block__versprechen,
.leistung-karte__link, .leistung-block__badge, .projekt-karte__tag, .leistung-karte__nr, .fl, .wizard-zaehler, .fuss-ticker span,
.stimme__autor, .wahl-karte__inner strong { font-size: var(--h6); }
.projekt-karte__titel { font-size: var(--h5); }
.trust-item, .faq-item__frage { font-size: var(--h4); }
.mass-wert, .schritt__nr { font-size: var(--h3); }
.kopf__nav a, .kopf__telefon { white-space: nowrap; }
@media (min-width: 981px) and (max-width: 1240px) { .kopf__nav { gap: 1.3rem; } .kopf__telefon { display: none; } }
@media (max-width: 980px) { .mobil-nav a, .mobil-nav-toggle { font-size: var(--h5); } .mobil-nav a.btn { font-size: var(--h6); } .mobil-nav-unterliste a { font-size: var(--h6); } }

/* CTA-Bereich: bewegtes Hintergrundbild (Ken Burns) nur im hellen Bereich um die dunkle Box, stark transparent */
.cta-sektion { position: relative; overflow: hidden; isolation: isolate; }
.cta-sektion__bg { position: absolute; inset: -6%; z-index: -1; background: url("../img/hero-schweisser.jpg") center/cover no-repeat;
  opacity: .16; filter: grayscale(.35); animation: ctaKenBurns 22s ease-in-out infinite alternate; will-change: transform; }
.cta-sektion::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(245,244,242,0) 40%, rgba(245,244,242,.65) 100%); }
@keyframes ctaKenBurns { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.18) translate(-3%, -2%); } }
@media (prefers-reduced-motion: reduce) { .cta-sektion__bg { animation: none; } }