@font-face {
  font-family: 'Poppins';
  src: url('../assets/fonts/poppins-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../assets/fonts/poppins-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
button { font: inherit; cursor: pointer; }

:root {
  --c-ink: #33312F;
  --c-ink-soft: #756F68;
  --c-gold: #D4A017;
  --c-gold-dark: #B8890F;
  --c-gold-tint: #FBEFD2;
  --c-bordeaux: #6E2A3A;
  --c-bg: #FAF9F7;
  --c-bg-alt: #F2EFE9;
  --c-white: #FFFFFF;
  --font-head: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --radius: 2px;
  --radius-lg: 2px;
  --shadow: 0 16px 34px rgba(20, 18, 16, 0.14);
  --container: 1180px;
}

body {
  font-family: var(--font-body);
  color: var(--c-ink);
  background: var(--c-bg);
  line-height: 1.65;
}

/* Ohne diese Regel gewinnt jede Author-Klasse mit eigenem "display" (z.B.
   .contact__form { display:flex }) automatisch gegen das Browser-Default
   fuer [hidden], weil Author-Styles immer vor User-Agent-Styles stehen,
   unabhaengig von Spezifitaet. Betrifft u.a. #kurzformularSuccess (Klassen
   "contact__form wizard-success" + hidden-Attribut), das dadurch parallel
   zum Formular sichtbar war. */
[hidden] { display: none !important; }

h1, h2, h3 { font-family: var(--font-head); font-weight: 700; color: var(--c-ink); margin: 0 0 0.5em; line-height: 1.22; }

.container { max-width: var(--container); width: 100%; margin: 0 auto; padding: 0 24px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 30px;
  border-radius: var(--radius);
  border: none;
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.btn--primary { background: var(--c-gold); color: var(--c-ink); }
.btn--primary:hover { background: var(--c-gold-dark); }
.btn--dark { background: var(--c-ink); color: var(--c-white); }
.btn--dark:hover { background: #1f1e1c; }
.btn--outline { background: transparent; border: 2px solid var(--c-ink); color: var(--c-ink); }
.btn--outline:hover { background: var(--c-ink); color: var(--c-white); }

.icon { width: 26px; height: 26px; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--c-white);
  box-shadow: 0 2px 12px rgba(20, 18, 16, 0.08);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
}
.nav__list { display: flex; align-items: center; gap: 28px; }
.nav__toggle { display: none; background: none; border: none; padding: 6px; }

.nav__item { position: relative; }
.nav__link { display: inline-flex; align-items: center; gap: 5px; }
.nav__link .icon { width: 15px; height: 15px; }
.nav__link.is-active { background: rgba(212,160,23,.5); padding: 6px 10px; margin: -6px -10px; border-radius: var(--radius); }
.nav__mega-item.is-active { background: rgba(212,160,23,.5); }
/* Mega-Menue fuer "Leistungen": 2-spaltig mit Icon je Leistung, ersetzt
   das fruehere einfache 1-spaltige .nav__dropdown. */
.nav__mega {
  display: none;
  position: absolute; top: 100%; left: 0;
  background: var(--c-white);
  border: 1px solid #ECE6DA;
  box-shadow: var(--shadow);
  min-width: 520px;
  padding: 14px;
  grid-template-columns: 1fr 1fr;
  gap: 2px 8px;
  z-index: 60;
}
.nav__item:hover .nav__mega,
.nav__item:focus-within .nav__mega { display: grid; }
.nav__mega-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; font-size: 0.92rem; color: var(--c-ink); }
.nav__mega-item:hover { background: var(--c-bg-alt); color: var(--c-gold-dark); }
.nav__mega-icon {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: var(--c-bg-alt);
  color: var(--c-gold-dark);
}
.nav__mega-item:hover .nav__mega-icon { background: var(--c-gold); color: var(--c-ink); }
.nav__mega-icon .icon { width: 19px; height: 19px; }
.nav__phone { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--c-ink); }
.nav__phone .icon { width: 16px; height: 16px; color: var(--c-gold-dark); }
.nav__phone:hover { color: var(--c-gold-dark); }

/* Schwelle bewusst deutlich hoeher als die anderen Tablet-Breakpoints in
   dieser Datei (860px): Logo, Leistungen-Dropdown, Referenzen, Ueber uns,
   Telefonnummer und der "Projekt planen"-Button muessen alle in einer
   Zeile Platz haben, bevor auf das Burger-Menue umgeschaltet wird - sonst
   brechen einzelne Woerter haesslich um, statt sauber ins Menue zu wandern. */
@media (max-width: 1150px) {
  .nav__toggle { display: block; }
  .nav__list {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--c-white);
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 24px;
    gap: 16px;
    display: none;
  }
  .nav__list.is-open { display: flex; }
  .nav__item { width: 100%; }
  .nav__mega {
    display: grid;
    grid-template-columns: 1fr;
    position: static;
    border: none;
    box-shadow: none;
    padding: 6px 0 0 8px;
    min-width: 0;
    gap: 0;
  }
  .nav__mega-item { padding: 8px 4px; color: var(--c-ink-soft); }
  .nav__mega-icon { width: 30px; height: 30px; }
  .nav__mega-icon .icon { width: 16px; height: 16px; }
}

/* Hero (full-bleed background image) */
.hero { position: relative; overflow: hidden; min-height: 560px; display: flex; align-items: center; color: var(--c-white); background: var(--c-ink); }
.hero__media { position: absolute; inset: 0; overflow: hidden; }
.hero__slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
}
.hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(20,18,16,0.92) 0%, rgba(20,18,16,0.72) 46%, rgba(20,18,16,0.32) 72%, rgba(20,18,16,0.18) 100%);
}
.hero__content { position: relative; padding: 100px 0 76px; max-width: 640px; margin: 0; }
.hero__eyebrow { color: var(--c-gold); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.82rem; margin-bottom: 12px; display: block; }
.hero h1, .hero .hero-headline { color: var(--c-white); font-size: clamp(2rem, 4vw, 3rem); line-height: 1.18; }
.hero__sub { font-size: 1.05rem; color: rgba(255,255,255,0.82); max-width: 540px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin: 26px 0 30px; }
.hero .btn--outline { border-color: rgba(255,255,255,0.55); color: var(--c-white); }
.hero .btn--outline:hover { background: var(--c-white); color: var(--c-ink); }
/* Dieselbe Weiss-Variante wie oben fuer .hero (Startseite), jetzt auch
   fuer .page-hero (alle Unterseiten): ohne diese Regel faellt der
   Button dort auf den dunklen Standard-Umriss zurueck (border/Text in
   var(--c-ink), also fast schwarz), der vor einem dunklen Hero-Foto
   kaum lesbar ist - genau das gemeldete "sehr graue" Aussehen. */
.page-hero .btn--outline { border-color: rgba(255,255,255,0.55); color: var(--c-white); }
.page-hero .btn--outline:hover { background: var(--c-white); color: var(--c-ink); }
.hero__badge { display: flex; align-items: center; gap: 10px; }
.hero__badge .icon { width: 20px; height: 20px; color: var(--c-white); flex-shrink: 0; }
.hero__rating { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hero__stars { position: relative; font-size: 1rem; letter-spacing: 2px; line-height: 1; white-space: nowrap; }
.hero__stars-outline { color: rgba(255,255,255,0.3); }
.hero__stars-fill { position: absolute; inset: 0; overflow: hidden; color: var(--c-gold); }
.hero__rating span { font-size: 0.88rem; color: rgba(255,255,255,0.9); }
.hero__rating strong { color: var(--c-white); font-weight: 700; }

/* Brand trust bar */
.brands { padding: 32px 0; background: var(--c-white); border-bottom: 1px solid #E4DED3; }
.brands__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.brands__label { font-size: 0.85rem; color: var(--c-ink-soft); margin: 0; flex-shrink: 0; }
.brands__row { display: flex; align-items: center; gap: 48px; flex-wrap: wrap; }
.brands__logo {
  height: 44px; width: auto; max-width: 170px; object-fit: contain;
  filter: grayscale(1); opacity: 0.55;
  transition: filter 0.2s ease, opacity 0.2s ease;
}
.brands__logo:hover { filter: grayscale(0); opacity: 1; }
@media (max-width: 700px) {
  .brands__inner { justify-content: center; text-align: center; }
  .brands__row { gap: 28px; justify-content: center; }
  .brands__logo { height: 34px; }
}

/* Intro (stats + checklist) */
.intro { padding: 84px 0; background: var(--c-white); }
.intro__head { margin-bottom: 48px; }
.intro__head h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 16px; }
.intro__head p { color: var(--c-ink-soft); margin: 0; }
.intro__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: stretch; }

.stat-stack { display: flex; flex-direction: column; gap: 28px; height: 100%; }
.stat-card { overflow: hidden; box-shadow: var(--shadow); flex: 1; min-height: 320px; }
.stat-card img { width: 100%; height: 100%; object-fit: cover; }

.checklist { display: flex; flex-direction: column; margin-bottom: 28px; }
.checklist__item { display: flex; gap: 16px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid #E4DED3; }
.checklist__item:first-child { padding-top: 0; }
.checklist__item:last-child { border-bottom: none; padding-bottom: 0; }
.checklist__icon {
  width: 26px; height: 26px; flex-shrink: 0; margin-top: 2px;
  color: var(--c-gold-dark);
  display: flex; align-items: center; justify-content: center;
}
.checklist__icon .icon { width: 24px; height: 24px; }
.checklist__item h3 { font-size: 1.02rem; margin: 0 0 4px; }
.checklist__item p { margin: 0; font-size: 0.88rem; color: var(--c-ink-soft); }
.intro__cta { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.intro__phone { display: flex; align-items: center; gap: 12px; }
.intro__phone-icon { width: 26px; height: 26px; color: var(--c-gold-dark); display: flex; align-items: center; justify-content: center; }
.intro__phone-icon .icon {
  width: 22px; height: 22px;
  transform-origin: 50% 20%;
  animation: phoneRing 3.4s ease-in-out infinite;
}
@keyframes phoneRing {
  0%, 14%, 100% { transform: rotate(0deg); }
  2% { transform: rotate(-16deg); }
  4% { transform: rotate(14deg); }
  6% { transform: rotate(-11deg); }
  8% { transform: rotate(8deg); }
  10% { transform: rotate(-5deg); }
  12% { transform: rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .intro__phone-icon .icon { animation: none; }
}
.intro__phone-text span { display: block; font-size: 0.78rem; color: var(--c-ink-soft); }
.intro__phone-text strong { font-family: var(--font-head); font-size: 1.05rem; }
@media (max-width: 900px) {
  .intro__grid { grid-template-columns: 1fr; }
  .stat-stack { height: auto; }
  .stat-card { min-height: 0; }
  .stat-card img { height: 280px; }
}

/* Services */
.services { padding: 90px 0 80px; background: var(--c-gold); }
.services__head { margin-bottom: 44px; }
.services__head h2 { color: var(--c-ink); font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 16px; }
.services__head p { color: rgba(51,49,47,0.75); margin: 0; }
.services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.services__item { position: relative; display: flex; flex-direction: column; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.services__item:hover { transform: translateY(-6px); box-shadow: 0 8px 16px rgba(20,18,16,0.22); }
.services__photo { position: relative; overflow: hidden; aspect-ratio: 4 / 3; flex-shrink: 0; box-shadow: 0 14px 30px rgba(20,18,16,0.18); }
.services__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.services__item:hover .services__photo img { transform: scale(1.06); }
.services__arrow {
  position: absolute; top: 0; right: 0; z-index: 2;
  width: 40px; height: 40px;
  background: var(--c-white); color: var(--c-ink);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
}
.services__arrow .icon { width: 18px; height: 18px; }
.services__item:hover .services__arrow { background: var(--c-ink); color: var(--c-gold); }
.services__stock-note {
  position: absolute; bottom: 0; left: 0; z-index: 2;
  background: rgba(20,18,16,0.72); color: var(--c-white);
  font-size: 0.7rem; font-weight: 600; padding: 4px 10px;
}
.services__body { background: var(--c-ink); padding: 20px; flex: 1; display: flex; flex-direction: column; }
.services__eyebrow { display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.55); margin-bottom: 6px; }
.services__body h3 { font-size: 1.08rem; margin: 0 0 6px; color: var(--c-gold); }
.services__body p { margin: 0; font-size: 0.9rem; color: rgba(255,255,255,0.78); }
.services__link { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 14px; color: var(--c-gold); font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; }
.services__link .icon { width: 15px; height: 15px; transition: transform 0.2s ease; }
.services__item:hover .services__link .icon { transform: translateX(4px); }
.services__actions { text-align: center; margin-top: 48px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* Erdarbeiten-Karte bewusst zurückhaltender: rundet die Kernpositionierung ab, statt sie zu verwässern */
.services__item--minor { opacity: 0.82; }
.services__item--minor .services__body h3 { font-size: 0.98rem; color: rgba(255,255,255,0.85); }

@media (max-width: 900px) { .services__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  .services__grid { grid-template-columns: 1fr; }
  .services__body h3 { font-size: 1.18rem; }
  .services__body p { font-size: 0.98rem; }
}

/* Terrassendach & Sommergarten: eigene Unterseite (terrassendach.html),
   von der Leistungen-Kachel und dem Nav-Dropdown verlinkt. Fuehrt von
   "was gibt es" zu "was passt zu mir" und dann weiter zu Galerie/FAQ/
   Konfigurator (auf der Startseite). */
.page-hero { position: relative; padding: 76px 0 90px; color: #fff; background-size: cover; background-position: center; overflow: hidden; }
.page-hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,18,16,.6), rgba(20,18,16,.82)); }
.page-hero .container { position: relative; z-index: 1; }
.page-hero__crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 22px; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.68); }
.page-hero__crumb a { color: rgba(255,255,255,.85); }
.page-hero__crumb a:hover { color: var(--c-gold); }
.page-hero__crumb span:not(:last-child) { color: rgba(255,255,255,.4); }
.page-hero h1 { color: #fff; font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.08; letter-spacing: -.03em; max-width: 820px; margin-bottom: 18px; }
.page-hero h1 em { color: var(--c-gold); font-style: italic; }
.page-hero p { max-width: 620px; color: rgba(255,255,255,.82); font-size: 1.05rem; line-height: 1.7; }
.page-hero p a { color: var(--c-gold); text-decoration: underline; text-underline-offset: 2px; }
.page-hero p a:hover { color: #fff; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 28px; }

.nav__dropdown a.is-active { color: var(--c-gold-dark); }

/* Live-Ergaenzung: die Original-Demo nutzte .leistung-detail nur einmal
   (Terrassendach-Seite), deshalb hatte die Sektion selbst nie einen eigenen
   Innenabstand, nur die Kind-Elemente. Auf den 17 neuen Unterseiten wird die
   Klasse dutzendfach fuer aufeinanderfolgende Textabschnitte wiederverwendet,
   ohne eigenen Abstand wirkten die Seiten dadurch zusammengequetscht. */
.leistung-detail { padding: 44px 0; }
.leistung-detail__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; margin-bottom: 52px; }
.leistung-detail__photo { overflow: hidden; box-shadow: var(--shadow); margin-bottom: 22px; }
.leistung-detail__photo img { display: block; width: 100%; height: 260px; object-fit: cover; }
.leistung-detail__col h3 { font-size: 1.3rem; margin-bottom: 10px; }
.leistung-detail__col p { color: var(--c-ink-soft); line-height: 1.75; }

.leistung-detail__actions { display: flex; gap: 16px; flex-wrap: wrap; }

@media (max-width: 860px) {
  .leistung-detail__grid { grid-template-columns: 1fr; gap: 36px; }
}

/* About */
.about { padding: 80px 0; background: var(--c-white); }
.about__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center; }
.about__media { position: relative; }
.about__media img { box-shadow: var(--shadow); }
.about__media::after {
  content: "";
  position: absolute; top: 16px; left: 16px; right: -16px; bottom: -16px;
  border: 3px solid var(--c-gold);
  z-index: -1;
}
.about__text p { color: var(--c-ink); }
.about__quote {
  margin: 20px 0; padding: 4px 0 4px 20px;
  border-left: 3px solid var(--c-gold);
  font-family: var(--font-head); font-weight: 700;
  font-size: 1.2rem; line-height: 1.4; color: var(--c-ink);
}
@media (max-width: 860px) { .about__grid { grid-template-columns: 1fr; } .about__media::after { display: none; } }

/* Gallery */
.gallery { padding: 80px 0; background: var(--c-bg-alt); }
.gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.gallery__item { margin: 0; overflow: hidden; box-shadow: var(--shadow); background: var(--c-white); }
.gallery__item img { width: 100%; height: 260px; object-fit: cover; }
.gallery__item figcaption { padding: 14px 16px; color: var(--c-ink-soft); font-size: 0.85rem; }
.gallery__meta { display: block; font-weight: 700; color: var(--c-ink); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
@media (max-width: 860px) { .gallery__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .gallery__grid { grid-template-columns: 1fr; } }
.gallery__loadmore { text-align: center; margin: 40px 0 0; }
.gallery__loadmore [hidden] { display: none; }

/* Testimonials */
.testimonials { padding: 80px 0; background: var(--c-white); }
.testimonials__rating { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; font-weight: 700; color: var(--c-ink); }
.testimonials__stars { position: relative; font-size: 1.1rem; letter-spacing: 2px; line-height: 1; }
.testimonials__stars-outline { color: #E4DED3; }
.testimonials__stars-fill { position: absolute; inset: 0; overflow: hidden; color: var(--c-gold); white-space: nowrap; }
.testimonials__rating > span:last-child { color: var(--c-ink-soft); font-weight: 400; }

.testimonials__scroll {
  margin-top: 40px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, black 60px, black calc(100% - 60px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, black 60px, black calc(100% - 60px), transparent 100%);
}
.testimonials__track {
  display: flex; gap: 20px; width: max-content;
  animation: testimonialScroll 70s linear infinite;
}
.testimonials__scroll:hover .testimonials__track { animation-play-state: paused; }
@keyframes testimonialScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .testimonials__track { animation: none; }
  .testimonials__scroll { overflow-x: auto; }
}
.testimonial-card {
  flex: 0 0 340px;
  background: var(--c-bg-alt);
  padding: 24px; display: flex; flex-direction: column;
}
.testimonial-card__head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; gap: 10px; }
.testimonial-card__who { display: flex; flex-direction: column; gap: 4px; }
.testimonial-card__name { font-family: var(--font-head); font-weight: 700; font-size: 0.98rem; }
.testimonial-card__guide { display: block; font-size: 0.75rem; color: var(--c-ink-soft); font-weight: 400; }
.testimonial-card__rating { color: var(--c-gold); font-size: 0.75rem; letter-spacing: 2px; }
.testimonial-card__google { width: 22px; height: 22px; color: var(--c-gold-dark); flex-shrink: 0; }
.testimonial-card p { font-size: 0.9rem; color: var(--c-ink); margin: 0; line-height: 1.6; }
.testimonials__cta { text-align: center; margin-top: 36px; }
.testimonials__link { display: inline-block; font-size: 0.9rem; font-weight: 700; color: var(--c-gold-dark); }
.testimonials__link:hover { text-decoration: underline; }
@media (max-width: 560px) { .testimonial-card { flex-basis: 84vw; } }

/* Contact */
.contact { padding: 80px 0; background: var(--c-bg); }
.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.contact__info { margin: 24px 0; display: flex; flex-direction: column; gap: 12px; }
.contact__info li { display: flex; align-items: center; gap: 10px; color: var(--c-ink-soft); }
.contact__social { display: flex; gap: 12px; }
.contact__social a { width: 38px; height: 38px; background: var(--c-ink); color: var(--c-white); display: flex; align-items: center; justify-content: center; }
.contact__social .icon { width: 20px; height: 20px; }
.contact__van { margin-top: 28px; }
.contact__van img { width: 100%; height: auto; box-shadow: var(--shadow); }
.contact__form { background: var(--c-white); padding: 32px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 16px; }
.contact__form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 0.9rem; color: var(--c-ink); }
.contact__form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 480px) { .contact__form-row { grid-template-columns: 1fr; } }
.contact__form input, .contact__form textarea, .contact__form select {
  font: inherit; padding: 12px 14px; border-radius: var(--radius); border: 1px solid #E4DED3; background: var(--c-bg);
}
.contact__form .consent { margin: 4px 0; }
.contact__note { font-size: 0.8rem; color: var(--c-ink-soft); margin: 0; }
@media (max-width: 860px) { .contact__grid { grid-template-columns: 1fr; } }

/* Footer */
.site-footer { background: var(--c-ink); color: rgba(255,255,255,0.85); padding: 64px 0 24px; }
.footer__logo { background: var(--c-white); display: inline-block; padding: 8px 14px; margin-bottom: 12px; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.footer__grid h3 { color: var(--c-white); font-size: 1rem; margin-bottom: 12px; }
.footer__grid ul { display: flex; flex-direction: column; gap: 8px; }
.footer__grid a:hover { color: var(--c-gold); }
.footer__contact { margin-top: 14px; color: rgba(255,255,255,.68); line-height: 1.6; }
.footer__bottom { margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.12); font-size: 0.85rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; }
.footer__bottom p { margin: 0; }
.footer__legal { display: flex; gap: 20px; }
.footer__legal a:hover { color: var(--c-gold); }
@media (max-width: 640px) { .footer__bottom { flex-direction: column; align-items: flex-start; } }
@media (max-width: 860px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }

/* Konfigurator */
.konfigurator { padding: 84px 0; background: var(--c-bg-alt); }
.konfigurator__head { text-align: center; max-width: 640px; margin: 0 auto 48px; }
.konfigurator__head p { color: var(--c-ink-soft); }
.wizard { max-width: 680px; margin: 0 auto; background: var(--c-white); box-shadow: var(--shadow); padding: 40px; }
.wizard-progress { display: flex; gap: 6px; margin-bottom: 32px; }
.wizard-progress span { flex: 1; height: 4px; background: var(--c-bg-alt); }
.wizard-progress span.is-done, .wizard-progress span.is-active { background: var(--c-gold); }
.wizard-selection-hint { font-size: 0.85rem; font-weight: 700; color: var(--c-gold-dark); margin: -8px 0 20px; text-align: center; }
.wizard-step { display: none; }
.wizard-step.is-active { display: block; }
.wizard-step h2 { text-align: center; font-size: 1.3rem; }

.option-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 20px 0; }
@media (min-width: 560px) { .option-grid { grid-template-columns: 1fr 1fr; } }
.option-grid--3col { grid-template-columns: 1fr; }
@media (min-width: 560px) { .option-grid--3col { grid-template-columns: repeat(3, 1fr); } }
.option-card {
  border: 2px solid #E4DED3; background: var(--c-white);
  padding: 16px; text-align: center; font-weight: 700; font-family: var(--font-body);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.option-card:hover { border-color: var(--c-gold); }
.option-card.is-selected { border-color: var(--c-gold); background: var(--c-gold-tint); }
.option-card--media { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.option-card__media { display: block; aspect-ratio: 4/3; overflow: hidden; background: var(--c-bg-alt); }
.option-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.option-card__media--placeholder { display: flex; align-items: center; justify-content: center; color: var(--c-gold-dark); }
.option-card__media--placeholder svg { width: 34px; height: 34px; }
.option-card__label { display: block; padding: 12px 14px; }

.check-grid { display: flex; flex-direction: column; gap: 10px; margin: 20px 0; }
.check-item { display: flex; gap: 12px; align-items: center; border: 1px solid #E4DED3; padding: 12px 14px; font-size: 0.95rem; transition: border-color 0.15s ease; cursor: pointer; }
.check-item:has(input:checked) { border-color: var(--c-gold); }
.check-item input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 22px; height: 22px; flex-shrink: 0;
  border: 2px solid #D8D1C4; border-radius: 50%;
  background: var(--c-white);
  position: relative; margin: 0; cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.check-item input[type="checkbox"]:checked {
  background: var(--c-gold); border-color: var(--c-gold);
}
.check-item input[type="checkbox"]:checked::after {
  content: "";
  position: absolute; left: 6px; top: 2px;
  width: 6px; height: 11px;
  border: solid var(--c-ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.mass-modus-toggle { display: flex; gap: 10px; margin-bottom: 20px; }
.mass-modus-btn { flex: 1; border: 2px solid #E4DED3; background: var(--c-white); padding: 12px; font-weight: 700; font-family: inherit; cursor: pointer; }
.mass-modus-btn.is-active { border-color: var(--c-gold); background: var(--c-gold-tint); }

/* Referenzen-Filterleiste hat 8 statt 2 Buttons (siehe referenzen/index.php)
   - flex:1 aus .mass-modus-btn (fuer den 2er-Toggle im Konfigurator
   gedacht) wuerde hier 8 gleich breite, sehr schmale Buttons in einer
   Zeile erzwingen. Eigene Modifier-Klasse statt die Basisklasse
   global zu aendern. */
.referenzen-filter { flex-wrap: wrap; justify-content: center; max-width: 920px; margin: 0 auto 40px; }
.referenzen-filter .mass-modus-btn { flex: 0 1 auto; padding: 10px 18px; }

.wizard-actions { display: flex; justify-content: space-between; gap: 16px; margin-top: 28px; }
.wizard-error { color: #B3261E; font-size: 0.88rem; margin-top: 10px; min-height: 1.2em; text-align: center; }
.wizard-trust-note { font-size: 0.8rem; color: var(--c-ink-soft); margin-top: 14px; }

.wizard-success { text-align: center; padding: 20px 0; }
.wizard-success__icon { width: 52px; height: 52px; background: var(--c-gold); color: var(--c-ink); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
.wizard-success h2 { font-size: 1.4rem; }
.wizard-success p { color: var(--c-ink-soft); max-width: 440px; margin: 0 auto; }

.form-row { margin-bottom: 16px; }
.form-row .fl { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 6px; }
.form-row .req { color: var(--c-bordeaux); }
.form-row input { width: 100%; font: inherit; padding: 12px 14px; border-radius: var(--radius); border: 1px solid #E4DED3; background: var(--c-bg); }
.form-grid2 { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 560px) { .form-grid2 { grid-template-columns: 1fr 1fr; } }

.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 0.85rem; color: var(--c-ink-soft); margin: 20px 0; }
.consent input { width: auto; margin-top: 3px; }
.consent a { color: var(--c-gold-dark); text-decoration: underline; }
.hp { position: absolute; left: -9999px; }

/* FAQ */
.faq {
  position: relative; padding: 84px 0; color: var(--c-white);
  background: url('../assets/img/kaltwintergarten-hero.jpg') center / cover no-repeat;
}
.faq::before { content: ''; position: absolute; inset: 0; background: rgba(20,18,16,0.82); }
.faq .container { position: relative; z-index: 1; }
.faq h2 { color: var(--c-white); }
.faq__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 32px; margin-top: 40px; }
.faq__item { background: var(--c-white); border: 1px solid var(--c-white); padding: 4px 22px; align-self: start; }
.faq__item__trigger {
  width: 100%; background: none; border: none; cursor: pointer; text-align: left;
  padding: 18px 0; font: inherit; font-family: var(--font-head); font-weight: 700; color: var(--c-ink);
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
}
.faq__item__icon { font-size: 1.4rem; line-height: 1; color: var(--c-gold-dark); flex-shrink: 0; transition: transform 0.3s ease; }
.faq__item.is-open .faq__item__icon { transform: rotate(45deg); }
.faq__item__panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s ease;
}
.faq__item.is-open .faq__item__panel { grid-template-rows: 1fr; }
.faq__item__panel-inner { overflow: hidden; }
.faq__item__panel-inner p { margin: 0; padding-bottom: 18px; color: var(--c-ink-soft); font-size: 0.92rem; }
@media (max-width: 860px) { .faq__grid { grid-template-columns: 1fr; } }

/* Mobile sticky call/WhatsApp bar */
.mobile-bar { display: none; }
@media (max-width: 720px) {
  .mobile-bar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    box-shadow: 0 -6px 18px rgba(20, 18, 16, 0.18);
  }
  .mobile-bar__btn {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding: 9px 0; font-weight: 700; font-size: 0.7rem;
    background: var(--c-ink); color: var(--c-white);
    border-right: 1px solid rgba(255,255,255,0.14);
  }
  .mobile-bar__btn:last-child { border-right: none; }
  .mobile-bar__btn .icon { width: 18px; height: 18px; }
  .mobile-bar__btn--whatsapp,
  .mobile-bar__btn--gold { background: var(--c-gold); color: var(--c-ink); }
  body { padding-bottom: 56px; }
}

/* Accessibility */
/* Live-Ergaenzung: fuer H1/Ueberschriften, die aus SEO-Gruenden den vollen
   Keyword-Text tragen sollen, aber visuell durch eine kuerzere Zeile
   ersetzt werden. Bleibt im Accessibility-Tree (fuer Screenreader UND
   Suchmaschinen-Crawler lesbar), anders als display:none/visibility:hidden. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--c-gold); color: var(--c-ink); padding: 12px 20px; z-index: 100;
}
.skip-link:focus { left: 16px; top: 16px; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--c-gold); outline-offset: 2px;
}

/* Scroll-reveal */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal:nth-child(2) { transition-delay: 0.08s; }
.reveal:nth-child(3) { transition-delay: 0.16s; }
.reveal:nth-child(4) { transition-delay: 0.24s; }
.reveal:nth-child(5) { transition-delay: 0.32s; }
.reveal:nth-child(6) { transition-delay: 0.4s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ================================================================
   GOLDENSTEIN 2026: cinematic conversion layer
   Industrial precision, editorial scale, restrained motion.
   ================================================================ */

html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  overflow-x: hidden;
  background: #f4f0e8;
  font-size: 16px;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}
::selection { background: var(--c-gold); color: #151411; }

.scroll-progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 9999; pointer-events: none; }
.scroll-progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #8b6610, #ffd461); box-shadow: 0 0 18px rgba(212,160,23,.65); }
.cursor-glow { position: fixed; width: 360px; height: 360px; border-radius: 50%; pointer-events: none; z-index: 2; opacity: 0; transform: translate(-50%,-50%); background: radial-gradient(circle, rgba(212,160,23,.085), transparent 67%); transition: opacity .3s ease; }
body.has-cursor .cursor-glow { opacity: 1; }
.demo-notice {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 9997;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  color: #fff;
  background: rgba(24,23,20,.92);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 14px 42px rgba(0,0,0,.24);
  backdrop-filter: blur(14px);
  pointer-events: none;
}
.demo-notice__pulse { width: 8px; height: 8px; flex: 0 0 auto; background: var(--c-gold); box-shadow: 0 0 0 5px rgba(212,160,23,.16); animation: pulseDot 2s ease-in-out infinite; }
.demo-notice strong { display: block; color: var(--c-gold); font: 700 .67rem/1.15 var(--font-head); letter-spacing: .11em; text-transform: uppercase; }
.demo-notice small { display: block; margin-top: 3px; color: rgba(255,255,255,.66); font-size: .62rem; line-height: 1.2; }

.site-header {
  background: rgba(250,249,247,.9);
  border-bottom: 1px solid rgba(51,49,47,.1);
  box-shadow: none;
  backdrop-filter: blur(18px) saturate(140%);
  transition: transform .35s ease, background .35s ease, box-shadow .35s ease;
}
.site-header.is-scrolled { background: rgba(250,249,247,.97); box-shadow: 0 14px 44px rgba(20,18,16,.1); }
.nav { min-height: 76px; }
/* max-width war bisher enger als die Hoehe (230px statt der bei
   height="46" noetigen ~355px, Logo-Seitenverhaeltnis 8.88:1) und hat
   dadurch per object-fit:contain die tatsaechliche Darstellungshoehe
   auf ~19px zusammengestaucht - sichtbar kleiner, als die height-Angabe
   im Markup vermuten liess. height hier zusaetzlich explizit gesetzt,
   damit beide Werte synchron bleiben. */
.nav__logo img { height: 38px; width: auto; max-width: 340px; object-fit: contain; }
.nav__link { font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.nav__phone { font-size: .88rem; }

.btn {
  position: relative;
  min-height: 50px;
  padding: 14px 22px;
  border-radius: 0;
  overflow: hidden;
  letter-spacing: .025em;
  isolation: isolate;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.btn:hover { transform: translateY(-3px); }
.btn--primary { box-shadow: 0 10px 30px rgba(212,160,23,.22); }
.btn--primary:hover { box-shadow: 0 16px 42px rgba(212,160,23,.35); }
.btn--shine::after {
  content: '';
  position: absolute;
  inset: -50% auto -50% -60%;
  width: 35%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.52), transparent);
  animation: buttonShine 5.5s ease-in-out infinite;
  z-index: -1;
}
@keyframes buttonShine { 0%,65% { left: -60%; } 88%,100% { left: 140%; } }

h1 em, h2 em { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; }
.section-head { max-width: 780px; margin-bottom: 54px; }
.section-head h2 { font-size: clamp(2.25rem, 4.8vw, 4.6rem); line-height: 1.02; letter-spacing: -.045em; }
.section-head h2 em { color: var(--c-gold-dark); }
.section-head p { max-width: 600px; color: var(--c-ink-soft); }
.section-head--center { text-align: center; margin-left: auto; margin-right: auto; }
.section-head--center p { margin-left: auto; margin-right: auto; }

/* Hero */
.hero { width: 100%; aspect-ratio: 16 / 9; height: auto; min-height: 480px; max-height: 760px; align-items: center; background: #121210; }
.hero__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13,13,11,.87) 0%, rgba(13,13,11,.57) 46%, rgba(13,13,11,.08) 82%); z-index: 2; }
.hero__slide {
  opacity: 0;
  filter: saturate(.86) contrast(1.06);
  transform-origin: 50% 50%;
  animation-duration: 21s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  backface-visibility: hidden;
  will-change: opacity, transform, filter;
}
/* Start two seconds inside the first image: the hero is already fully visible
   on first paint. Every following image starts seven seconds later. */
.hero__slide:nth-child(1) { animation-name: heroPanLeftRight; animation-delay: -2s; }
.hero__slide:nth-child(2) { animation-name: heroPanRightLeft; animation-delay: 5s; }
.hero__slide:nth-child(3) { animation-name: heroPanLeftRight; animation-delay: 12s; }

/* 0 to 2 s: soft fade in · 2 to 7 s: full image · 7 to 9 s: soft fade out.
   The next image fades in during the same two-second window, creating a
   genuine image-over-image dissolve without a dark frame in between. */
@keyframes heroPanLeftRight {
  0% {
    opacity: 0;
    transform: scale(1.045) translate3d(-1.8%, 0, 0);
    filter: saturate(.78) contrast(1.04) brightness(.88);
  }
  9.52% {
    opacity: 1;
    filter: saturate(.86) contrast(1.06) brightness(1);
  }
  33.33% {
    opacity: 1;
    filter: saturate(.88) contrast(1.06) brightness(1);
  }
  42.86% {
    opacity: 0;
    transform: scale(1.13) translate3d(1.8%, 0, 0);
    filter: saturate(.8) contrast(1.04) brightness(.9);
  }
  100% {
    opacity: 0;
    transform: scale(1.13) translate3d(1.8%, 0, 0);
  }
}
@keyframes heroPanRightLeft {
  0% {
    opacity: 0;
    transform: scale(1.045) translate3d(1.8%, 0, 0);
    filter: saturate(.78) contrast(1.04) brightness(.88);
  }
  9.52% {
    opacity: 1;
    filter: saturate(.86) contrast(1.06) brightness(1);
  }
  33.33% {
    opacity: 1;
    filter: saturate(.88) contrast(1.06) brightness(1);
  }
  42.86% {
    opacity: 0;
    transform: scale(1.13) translate3d(-1.8%, 0, 0);
    filter: saturate(.8) contrast(1.04) brightness(.9);
  }
  100% {
    opacity: 0;
    transform: scale(1.13) translate3d(-1.8%, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__slide:nth-child(n) { animation: none; opacity: 0; transform: none; filter: saturate(.86) contrast(1.06); }
  .hero__slide:first-child { opacity: 1; }
}
.hero__overlay { z-index: 3; background: linear-gradient(180deg, rgba(12,12,10,.12), rgba(12,12,10,.38)); }
.hero__blueprint {
  position: absolute;
  inset: 0;
  z-index: 4;
  opacity: .17;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: linear-gradient(90deg, transparent 5%, #000 42%, transparent 92%);
}
.hero .container { position: relative; z-index: 6; width: 100%; }
.hero__content { padding: 68px 0 116px; max-width: 850px; }
.hero__eyebrow { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 400; color: rgba(255,255,255,.76); font-size: .72rem; letter-spacing: .17em; animation: heroIn .8s .1s both; }
.hero__eyebrow-dot { flex-shrink: 0; display: inline-block; width: 8px; height: 8px; background: var(--c-gold); box-shadow: 0 0 0 6px rgba(212,160,23,.18); animation: pulseDot 2s ease-in-out infinite; }
/* Live-Ergaenzung: die SEO-Pflicht-H1 (siehe docs/seo-struktur.md) ist ein
   ganzer Satz, viel laenger als die kurze Kicker-Phrase, fuer die die
   Eyebrow-Komponente urspruenglich gedacht war. Zwei Zeilen Grossbuchstaben
   wirkten wie eine Textwand. Deshalb einzeilig mit Ellipsis abgeschnitten,
   der volle Text bleibt unveraendert im DOM (fuer Suchmaschinen zaehlt der
   tatsaechliche Inhalt, nicht die CSS-Darstellung). */
.hero__eyebrow-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes pulseDot { 50% { box-shadow: 0 0 0 11px rgba(212,160,23,0); } }
/* .hero-headline: Live-Site tauscht die Demo-H1 semantisch zu einem <p>
   (die eigentliche H1 wird die Eyebrow-Zeile, siehe CLAUDE.md "SEO-Regeln").
   Optisch soll sich nichts aendern, deshalb hier dieselbe Regel auch fuer
   die neue Klasse, statt die Demo-Selektoren zu veraendern. */
.hero h1, .hero .hero-headline { margin: 18px 0 24px; font-size: clamp(3.1rem, 6.2vw, 6.7rem); line-height: .9; letter-spacing: -.065em; max-width: 900px; }
.hero__line { display: block; animation: heroIn .9s .22s both; }
.hero__line--gold { margin-top: .09em; color: var(--c-gold); font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 400; animation-delay: .34s; }
.hero__sub { max-width: 660px; font-size: clamp(1.03rem, 1.45vw, 1.25rem); line-height: 1.65; color: rgba(255,255,255,.74); animation: heroIn .8s .48s both; }
.hero__sub strong { color: #fff; }
.hero__actions { animation: heroIn .8s .58s both; }
.btn--hero { min-height: 58px; padding: 17px 26px; }
.hero__microcopy { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: -14px 0 26px; color: rgba(255,255,255,.59); font-size: .76rem; animation: heroIn .8s .67s both; }
.hero__microcopy span { color: var(--c-gold); }
.hero__badge { animation: heroIn .8s .74s both; }
/* Ausgeblendet: seit der festen 16:9-Heldenhoehe (siehe .hero oben) sitzt
   der zentrierte Inhalt naeher am unteren Rand und ueberlappt mit diesem
   absolut positionierten Scroll-Hinweis (gleiche linke Kante, gleiche Zeile
   wie das Bewertungs-Badge). */
.hero__scroll { display: none; }
.hero__scroll span { width: 28px; height: 1px; background: var(--c-gold); animation: scrollLine 1.6s ease-in-out infinite; transform-origin: left; }
@keyframes scrollLine { 50% { transform: scaleX(.45); opacity: .5; } }
@keyframes heroIn { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }

/* Brand bar */
.brands { position: relative; padding: 0 0 30px; overflow: hidden; background: #fff; }
.brands__inner { padding-top: 30px; }
.brands__logo { height: 44px; max-width: 170px; filter: grayscale(1); opacity: .63; }

/* Value / trust */
.intro { padding: 120px 0; background: #f4f0e8; }
/* grid-template-columns/gap bewusst identisch zu .intro__grid (Zeile ~828)
   gehalten, damit die zweite Spalte (Absatztext hier, Checkliste dort)
   linksbuendig auf derselben Position startet statt "eingerueckt" zu
   wirken (Nutzer-Feedback 2026-09-08). */
.intro__head { display: grid; grid-template-columns: 1.08fr .92fr; gap: 72px; align-items: end; margin-bottom: 70px; }
.intro__head h2 { font-size: clamp(2.5rem, 5vw, 5rem); line-height: .98; letter-spacing: -.055em; }
.intro__head h2 em { color: var(--c-gold-dark); }
.intro__head p { font-size: 1.07rem; line-height: 1.8; }
.intro__grid { grid-template-columns: 1.08fr .92fr; gap: 72px; }
.stat-card { position: relative; min-height: 520px; box-shadow: 28px 28px 0 var(--c-gold); overflow: visible; }
.stat-card img { filter: saturate(.86) contrast(1.04); }
.stat-card__label { position: absolute; right: -28px; bottom: -28px; padding: 17px 22px; background: #24221f; color: #fff; font: 600 .85rem var(--font-head); }
.stat-card__label small { display: block; color: var(--c-gold); font: 700 .61rem var(--font-head); text-transform: uppercase; letter-spacing: .13em; margin-bottom: 4px; }
.checklist__item { position: relative; padding: 18px 0 20px; transition: transform .25s ease; }
.checklist__item:hover { transform: translateX(8px); }
.checklist__icon { border-radius: 50%; background: transparent; border: 1px solid rgba(184,137,15,.4); }
.checklist__item h3 { font-size: 1.08rem; }
.intro__cta { margin-top: 12px; }

/* Services */
.services { position: relative; padding: 120px 0; background: #1b1a18; color: #fff; overflow: hidden; }
.services::before { content: 'GEBAUT'; position: absolute; top: 10px; right: -20px; color: rgba(255,255,255,.025); font: 700 clamp(8rem, 19vw, 18rem)/1 var(--font-head); letter-spacing: -.08em; }
.services__head { display: grid; grid-template-columns: 1.1fr .75fr; gap: 9vw; align-items: end; margin-bottom: 64px; }
.services__head h2 { color: #fff; font-size: clamp(2.5rem, 5vw, 5rem); line-height: .98; letter-spacing: -.055em; }
.services__head h2 em { color: var(--c-gold); }
.services__head p { color: rgba(255,255,255,.64); font-size: 1.03rem; line-height: 1.75; }
.services__grid { grid-template-columns: repeat(12,1fr); gap: 24px; perspective: 1200px; }
.services__item { grid-column: span 4; background: #272521; transform-style: preserve-3d; will-change: transform; transition: transform .22s ease, box-shadow .35s ease; }
/* 7 Kacheln statt 6 (Carports und Zaunbau als eigene Punkte): erste
   Reihe 4 Kacheln zu je 3 Spalten, zweite Reihe 3 Kacheln zu je 4
   Spalten - beide Reihen fuellen die 12 Spalten voll aus, keine Luecke. */
.services__item:nth-child(-n+4) { grid-column: span 3; }
.services__item:hover { transform: translateY(-10px); box-shadow: 0 28px 70px rgba(0,0,0,.35); }
.services__photo { box-shadow: none; aspect-ratio: 1.22 / 1; }
.services__photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(15,14,12,.62)); }
.services__photo img { filter: saturate(.74); }
.services__item:hover .services__photo img { transform: scale(1.07); filter: saturate(1); }
.services__number { position: absolute; left: 16px; top: 14px; z-index: 2; color: #fff; font: 700 .72rem var(--font-head); letter-spacing: .1em; }
.services__arrow { z-index: 2; right: 0; bottom: 0; width: 46px; height: 46px; }
.services__body { min-height: 205px; padding: 24px; background: #272521; }
.services__body h3 { font-size: 1.2rem; }
.services__body p { color: rgba(255,255,255,.64); line-height: 1.6; }
.services__link { color: #e3b83f; }
.services__item--minor { opacity: 1; }
.services__actions .btn--outline { border-color: rgba(255,255,255,.34); color: #fff; }

/* Project gallery */
.gallery { padding: 120px 0; background: #f4f0e8; }
.gallery__grid { grid-template-columns: repeat(12,1fr); gap: 18px; }
.gallery__item { position: relative; grid-column: span 4; min-height: 380px; box-shadow: none; cursor: zoom-in; background: #25231f; }
/* War frueher fest "nth-child(1),(4)=span7 / (2),(3)=span5" - eine
   Notloesung aus der urspruenglichen 4-Bilder-Demo. Funktionierte bei
   genau 4 Bildern (2 saubere Zeilen), erzeugte aber bei mehr Bildern
   (referenzen/index.php: 18+, terrassendaecher-sommergaerten: 7) einen
   Bruch nach den ersten vier Kacheln (die naechsten fallen auf das
   normale span:4 zurueck, dadurch krumme, hohe/breite Ausreisser mitten
   in der sonst gleichmaessigen Kachelreihe). Neue Regel wirkt gezielt
   nur, wenn eine Galerie exakt 2 Bilder hat (":first-child:nth-last-
   child(2)" ist nur wahr, wenn das erste Kind auch das vorletzte ist,
   also insgesamt 2 Kinder existieren) - genau die Faelle wie Carports,
   Tore oder Schiebeelemente, wo 2 gleich breite Kacheln nebeneinander
   gewuenscht sind. Ab 3+ Bildern bleibt es beim gleichmaessigen span:4
   (3 pro Zeile), unabhaengig von der Gesamtzahl. */
.gallery__item:first-child:nth-last-child(2),
.gallery__item:first-child:nth-last-child(2) ~ .gallery__item {
  grid-column: span 6;
}
.gallery__item img { height: 100%; min-height: 380px; transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .5s ease; filter: saturate(.78); }
.gallery__item::after { content: '+'; position: absolute; right: 18px; top: 18px; display: grid; place-items: center; width: 44px; height: 44px; color: #171613; background: var(--c-gold); font-size: 1.5rem; transform: scale(.8) rotate(-20deg); opacity: 0; transition: .35s ease; }
.gallery__item:hover img { transform: scale(1.045); filter: saturate(1); }
.gallery__item:hover::after { opacity: 1; transform: none; }
.gallery__item figcaption { position: absolute; inset: auto 0 0; padding: 70px 22px 20px; color: rgba(255,255,255,.82); background: linear-gradient(transparent, rgba(14,13,11,.92)); }
.gallery__meta { display: block; width: fit-content; margin-bottom: 10px; padding: 7px 10px 6px; color: #171613; background: var(--c-gold); font-size: .7rem; line-height: 1; box-shadow: 8px 8px 0 rgba(0,0,0,.18); }

/* Bento-Variante fuer Galerien mit genau 9 Bildern (siehe
   terrassendaecher-sommergaerten): eigene Modifier-Klasse statt die
   Basis .gallery__grid/.gallery__item global zu veraendern, damit die
   Galerien auf den anderen Leistungsseiten (1-2 Bilder, anderes
   Spalten-Layout) unangetastet bleiben. Zwei grosse Feature-Kacheln,
   eine Hochkant-Kachel, sechs quadratische - ergibt ein luecken- und
   ueberlappungsfreies Rechteck unabhaengig vom Seitenverhaeltnis der
   Originalfotos (object-fit:cover schneidet jedes Foto passend auf
   seine Kachelform zu). */
.gallery__grid--bento {
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 180px;
}
.gallery__grid--bento .gallery__item { min-height: 0; }
.gallery__grid--bento .gallery__item img { min-height: 0; }
/* Gilt fuer jede Bento-Variante (--bento, --bento3, --bento8, ...):
   Attribut-Selektor statt einzelner Klassen, damit eine zukuenftige
   --bentoN-Variante automatisch mit abgedeckt ist. Der Fliesstext
   bleibt dabei im HTML erhalten (nur per CSS versteckt) - die Lightbox
   liest ihn ueber figcaption.textContent aus, zeigt ihn also in der
   Detailansicht trotzdem an, siehe initGalleryLightbox in js/main.js. */
[class*="gallery__grid--bento"] .gallery__item .gallery__desc { display: none; }

.gallery__grid--bento .gallery__item:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; }
.gallery__grid--bento .gallery__item:nth-child(2) { grid-column: 4 / 5; grid-row: 1 / 2; }
.gallery__grid--bento .gallery__item:nth-child(3) { grid-column: 4 / 5; grid-row: 2 / 3; }
.gallery__grid--bento .gallery__item:nth-child(4) { grid-column: 3 / 4; grid-row: 1 / 3; }
.gallery__grid--bento .gallery__item:nth-child(5) { grid-column: 3 / 5; grid-row: 3 / 5; }
.gallery__grid--bento .gallery__item:nth-child(6) { grid-column: 1 / 2; grid-row: 3 / 4; }
.gallery__grid--bento .gallery__item:nth-child(7) { grid-column: 2 / 3; grid-row: 3 / 4; }
.gallery__grid--bento .gallery__item:nth-child(8) { grid-column: 1 / 2; grid-row: 4 / 5; }
.gallery__grid--bento .gallery__item:nth-child(9) { grid-column: 2 / 3; grid-row: 4 / 5; }

@media (max-width: 860px) {
  /* grid-auto-flow:dense noetig, weil eine 2x2-Kachel (Kind 5) nach drei
     1x1-Kacheln nicht mehr luecklos in die laufende Zeile passt - ohne
     dense liesse Grid dann eine Zelle (Zeile 4, Spalte 2) leer stehen,
     statt sie mit der naechsten 1x1-Kachel aufzufuellen. */
  .gallery__grid--bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; grid-auto-flow: dense; }
  .gallery__grid--bento .gallery__item:nth-child(n) { grid-column: auto; grid-row: auto; }
  .gallery__grid--bento .gallery__item:nth-child(1),
  .gallery__grid--bento .gallery__item:nth-child(5) { grid-column: span 2; grid-row: span 2; }
}

@media (max-width: 560px) {
  .gallery__grid--bento { display: grid; grid-template-columns: 1fr; grid-auto-rows: 260px; }
  .gallery__grid--bento .gallery__item:nth-child(n) { grid-column: auto; grid-row: auto; }
}

/* Bento-Variante fuer Galerien mit genau 3 Bildern (siehe zaunbau):
   eine grosse Kachel links, zwei kleine gestapelt rechts, in einer
   Zeile - ergibt ein luecken- und ueberlappungsfreies Rechteck. */
.gallery__grid--bento3 {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 190px;
}
.gallery__grid--bento3 .gallery__item { min-height: 0; }
.gallery__grid--bento3 .gallery__item img { min-height: 0; }
.gallery__grid--bento3 .gallery__item:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; }
.gallery__grid--bento3 .gallery__item:nth-child(2) { grid-column: 3 / 4; grid-row: 1 / 2; }
.gallery__grid--bento3 .gallery__item:nth-child(3) { grid-column: 3 / 4; grid-row: 2 / 3; }

@media (max-width: 860px) {
  .gallery__grid--bento3 { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; }
  .gallery__grid--bento3 .gallery__item:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 2; }
  .gallery__grid--bento3 .gallery__item:nth-child(2) { grid-column: 1 / 2; grid-row: 2 / 3; }
  .gallery__grid--bento3 .gallery__item:nth-child(3) { grid-column: 2 / 3; grid-row: 2 / 3; }
}

@media (max-width: 560px) {
  .gallery__grid--bento3 { display: grid; grid-template-columns: 1fr; grid-auto-rows: 260px; }
  .gallery__grid--bento3 .gallery__item:nth-child(n) { grid-column: auto; grid-row: auto; }
}

/* Bento-Variante fuer Galerien mit genau 8 Bildern (siehe
   bagger-erdarbeiten): eine grosse Feature-Kachel und eine Hochkant-
   Kachel oben, sechs quadratische Kacheln darunter - ergibt ein
   luecken- und ueberlappungsfreies Rechteck. Nur eine der acht Kacheln
   war im Originalfoto tatsaechlich hochkant, deshalb bewusst nur ein
   einziger Hochkant-Slot (nicht zwei wie bei --bento), damit kein
   Querformat-Foto in eine zu schmale Zelle gequetscht werden muss. */
.gallery__grid--bento8 {
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 190px;
}
.gallery__grid--bento8 .gallery__item { min-height: 0; }
.gallery__grid--bento8 .gallery__item img { min-height: 0; }
.gallery__grid--bento8 .gallery__item:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; }
.gallery__grid--bento8 .gallery__item:nth-child(2) { grid-column: 3 / 4; grid-row: 1 / 3; }
.gallery__grid--bento8 .gallery__item:nth-child(3) { grid-column: 4 / 5; grid-row: 1 / 2; }
.gallery__grid--bento8 .gallery__item:nth-child(4) { grid-column: 4 / 5; grid-row: 2 / 3; }
.gallery__grid--bento8 .gallery__item:nth-child(5) { grid-column: 1 / 2; grid-row: 3 / 4; }
.gallery__grid--bento8 .gallery__item:nth-child(6) { grid-column: 2 / 3; grid-row: 3 / 4; }
.gallery__grid--bento8 .gallery__item:nth-child(7) { grid-column: 3 / 4; grid-row: 3 / 4; }
.gallery__grid--bento8 .gallery__item:nth-child(8) { grid-column: 4 / 5; grid-row: 3 / 4; }

@media (max-width: 860px) {
  /* grid-auto-flow:dense aus demselben Grund wie bei --bento oben:
     ohne dense wuerde die grosse Kachel (Kind 1) nach dem Umbruch auf
     2 Spalten eine Luecke hinterlassen, statt von spaeteren 1x1-
     Kacheln aufgefuellt zu werden. */
  .gallery__grid--bento8 { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; grid-auto-flow: dense; }
  .gallery__grid--bento8 .gallery__item:nth-child(n) { grid-column: auto; grid-row: auto; }
  .gallery__grid--bento8 .gallery__item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
}

@media (max-width: 560px) {
  .gallery__grid--bento8 { display: grid; grid-template-columns: 1fr; grid-auto-rows: 260px; }
  .gallery__grid--bento8 .gallery__item:nth-child(n) { grid-column: auto; grid-row: auto; }
}
.lightbox { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: clamp(16px,4vw,52px); overflow-y: auto; background: rgba(12,11,10,.94); backdrop-filter: blur(14px); opacity: 0; visibility: hidden; transition: .35s ease; }
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__dialog { position: relative; width: min(1120px,94vw); max-height: calc(100vh - 32px); overflow-y: auto; background: #f4f0e8; box-shadow: 0 30px 100px rgba(0,0,0,.55); transform: translateY(24px) scale(.96); transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.lightbox.is-open .lightbox__dialog { transform: none; }
.lightbox__media { display: grid; place-items: center; min-height: 240px; background: #171613; }
.lightbox__media img { display: block; width: 100%; max-height: min(66vh,720px); object-fit: contain; }
.lightbox__details { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 32px; padding: 26px 30px 30px; }
.lightbox__meta { display: block; width: fit-content; margin-bottom: 10px; padding: 7px 10px 6px; color: #171613; background: var(--c-gold); font: 700 .68rem/1 var(--font-head); letter-spacing: .08em; text-transform: uppercase; }
.lightbox__description { margin: 0; color: var(--c-ink-soft); font-size: 1rem; line-height: 1.65; }
.lightbox__cta { flex-shrink: 0; white-space: nowrap; }
.lightbox__close { position: absolute; top: 16px; right: 16px; z-index: 2; display: grid; place-items: center; width: 46px; height: 46px; border: 0; color: #171613; background: var(--c-gold); font: 400 2rem/1 var(--font-body); cursor: pointer; box-shadow: 8px 8px 0 rgba(0,0,0,.28); transition: transform .2s ease, background .2s ease; }
.lightbox__close:hover { transform: translateY(-2px); background: #f0c84b; }

/* Vor/Zurueck ausserhalb des Dialogs (direkte Kinder von .lightbox,
   nicht von .lightbox__dialog), damit sie links/rechts am Rand des
   gesamten Overlays sitzen statt am Bildrahmen. */
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; display: grid; place-items: center; width: 52px; height: 52px; border: 0; color: #171613; background: var(--c-gold); font: 400 2rem/1 var(--font-body); cursor: pointer; box-shadow: 8px 8px 0 rgba(0,0,0,.28); transition: transform .2s ease, background .2s ease; }
.lightbox__nav:hover { background: #f0c84b; }
.lightbox__nav[hidden] { display: none; }
.lightbox__prev { left: clamp(8px, 3vw, 32px); transition: transform .2s ease, background .2s ease; }
.lightbox__prev:hover { transform: translateY(-50%) translateX(-2px); }
.lightbox__next { right: clamp(8px, 3vw, 32px); }
.lightbox__next:hover { transform: translateY(-50%) translateX(2px); }

@media (max-width: 700px) {
  .lightbox { padding: 10px; }
  .lightbox__dialog { width: 100%; max-height: calc(100vh - 20px); }
  .lightbox__media img { max-height: 54vh; }
  .lightbox__details { grid-template-columns: 1fr; gap: 20px; padding: 22px 18px 20px; }
  .lightbox__cta { width: 100%; justify-content: center; white-space: normal; }
  .lightbox__close { top: 10px; right: 10px; width: 42px; height: 42px; }
  .lightbox__nav { width: 40px; height: 40px; font-size: 1.5rem; }
  .lightbox__prev { left: 4px; }
  .lightbox__next { right: 4px; }
}

/* Founder */
.about { padding: 120px 0; background: var(--c-gold); }
.about__grid { grid-template-columns: 1.05fr .95fr; gap: 8vw; }
.about__media { min-height: 590px; }
.about__media img { width: 100%; height: 100%; min-height: 590px; object-fit: cover; filter: grayscale(.15) contrast(1.05); box-shadow: 24px 24px 0 #24221f; }
.about__media::after { display: none; }
.about__stamp { position: absolute; right: -38px; top: 40px; display: grid; place-content: center; width: 118px; height: 118px; border-radius: 50%; background: #24221f; color: #fff; text-align: center; text-transform: uppercase; font: 700 .66rem/1.15 var(--font-head); letter-spacing: .1em; transform: rotate(8deg); }
.about__stamp b { display: block; color: var(--c-gold); font-size: 1rem; }
.about__text h2 { font-size: clamp(2.4rem,4.4vw,4.4rem); line-height: 1; letter-spacing: -.05em; }
.about__text h2 em { display: block; color: #fff7dd; }
.about__text p { line-height: 1.75; }
.about__quote { border-left-color: #24221f; font-family: Georgia, 'Times New Roman', serif; font-size: 1.25rem; line-height: 1.55; }
.about__signature { margin: 24px 0; }
.about__signature span { display: block; font: italic 1.65rem Georgia, serif; }
.about__signature small { font-size: .68rem; text-transform: uppercase; letter-spacing: .11em; }
.text-link { display: inline-flex; align-items: center; gap: 18px; padding-bottom: 5px; border-bottom: 1px solid #24221f; font-weight: 700; }
.text-link span { transition: transform .2s ease; }
.text-link:hover span { transform: translateX(6px); }

/* Process */
.process-showcase { position: relative; padding: 120px 0; background: #1b1a18; color: #fff; overflow: hidden; }
.process-showcase::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size: 70px 70px; }
.process-showcase .container { position: relative; z-index: 1; }
.process-showcase h2 { color: #fff; }
.process-showcase h2 em { color: var(--c-gold); }
.process-showcase__grid { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid rgba(255,255,255,.16); border-bottom: 1px solid rgba(255,255,255,.16); }
.process-card { position: relative; padding: 42px 38px 48px; border-right: 1px solid rgba(255,255,255,.16); transition: background .3s ease; }
.process-card:last-child { border: 0; }
.process-card:hover { background: rgba(255,255,255,.045); }
.process-card > span { display: block; color: var(--c-gold); font: 700 .72rem var(--font-head); letter-spacing: .12em; margin-bottom: 70px; }
.process-card h3 { color: #fff; font-size: 1.35rem; }
.process-card p { color: rgba(255,255,255,.58); }
.process-showcase__cta { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding-top: 44px; }
.process-showcase__cta p { color: rgba(255,255,255,.64); }
.process-showcase__cta strong { color: #fff; }

/* Testimonials */
.testimonials { padding: 120px 0; background: #fff; }
.testimonials__rating { margin: -28px 0 42px; }
.testimonials__scroll { mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.testimonial-card { min-height: 270px; padding: 28px; border-top: 3px solid var(--c-gold); background: #f4f0e8; box-shadow: none; }
.testimonial-card p { font-family: Georgia, 'Times New Roman', serif; font-size: 1rem; line-height: 1.65; }

/* Configurator */
.konfigurator { position: relative; padding: 120px 0; background: var(--c-gold); overflow: hidden; }
.konfigurator::before { content: '?'; position: absolute; top: -180px; left: -20px; color: rgba(255,255,255,.15); font: 700 38rem/1 var(--font-head); }
.konfigurator__head { position: relative; max-width: 760px; }
.konfigurator__head h2 { font-size: clamp(2.8rem,5.5vw,5.8rem); letter-spacing: -.06em; }
.konfigurator__head p { color: rgba(36,34,31,.78); font-size: 1.06rem; }
.konfigurator__trust { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 24px; margin-top: 24px; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
/* Live-Korrektur: max-width:800px liess die Wizard-Karte innerhalb des
   1180px-Containers schmaler und zentriert wirken als die anderen
   Sektionen (Einsatzgebiet, FAQ, Kontakt), die die volle Container-Breite
   nutzen. Jetzt konsistent auf derselben Breite. */
.wizard { position: relative; max-width: none; padding: 46px; background: #fff; box-shadow: 30px 30px 0 #24221f; }
.wizard-progress span { height: 6px; }
.wizard-progress span.is-done, .wizard-progress span.is-active { background: #24221f; }
.wizard-step__kicker { display: block; text-align: center; color: #9b7211; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .13em; }
.wizard-step h2 { font-size: clamp(1.5rem,3vw,2.2rem); }
.option-card { border: 1px solid #dad3c6; min-height: 56px; transition: transform .2s ease, border .2s ease, box-shadow .2s ease; }
.option-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(20,18,16,.1); }
.option-card.is-selected { border-color: #24221f; box-shadow: inset 0 0 0 1px #24221f; background: #f9edcb; }
.option-card__media { aspect-ratio: 1.25/1; }
.option-card__label { min-height: 60px; display: grid; place-items: center; }
.form-row input { border-radius: 0; min-height: 52px; background: #fbfaf8; }
.wizard-success { max-width: 680px; margin: auto; padding: 60px; background: #fff; box-shadow: 24px 24px 0 #24221f; }

/* FAQ */
.faq { padding: 120px 0; background: linear-gradient(rgba(20,18,16,.9),rgba(20,18,16,.9)), url('../assets/img/01M0WNEG372H8A34HZEKD5VBJQ.png') center/cover fixed; }
.faq .section-head h2 { color: #fff; }
.faq .section-head h2 em { color: var(--c-gold); }
/* Live-Korrektur: die urspruengliche max-width:980px + margin:auto zentrierte
   das FAQ-Grid schmaler als die volle .container-Breite, dadurch wirkte die
   FAQ-Sektion neben den anderen (volle Breite, linksbuendig: Einsatzgebiet,
   Kontakt) inkonsistent schmaler. Jetzt nutzt sie dieselbe volle Breite. */
.faq__item { background: rgba(255,255,255,.96); border: 0; padding: 6px 24px; transition: transform .25s ease, background .25s ease; }
.faq__item:hover { transform: translateY(-3px); background: #fff; }

/* Contact */
.contact { position: relative; padding: 120px 0; background: #24221f; color: #fff; }
.contact__grid { gap: 8vw; align-items: start; }
.contact h2 { color: #fff; font-size: clamp(2.7rem,5vw,5.2rem); line-height: .98; letter-spacing: -.055em; }
.contact h2 em { color: var(--c-gold); }
.contact__intro > p { color: rgba(255,255,255,.64); font-size: 1.04rem; }
.contact__info li { color: rgba(255,255,255,.68); }
.contact__info a:hover { color: var(--c-gold); }
.contact__social a { background: var(--c-gold); color: #24221f; }
.contact__whatsapp { display: grid; grid-template-columns: 1fr auto; gap: 5px 16px; margin-top: 26px; padding: 20px 22px; border: 1px solid rgba(255,255,255,.2); transition: background .25s ease, color .25s ease; }
.contact__whatsapp span { grid-column: 1; color: var(--c-gold); font-size: .68rem; text-transform: uppercase; letter-spacing: .13em; }
.contact__whatsapp strong { grid-column: 1; color: #fff; }
.contact__whatsapp i { grid-column: 2; grid-row: 1/3; align-self: center; color: var(--c-gold); font-style: normal; font-size: 1.5rem; }
.contact__whatsapp:hover { background: rgba(255,255,255,.07); }
.contact__form { padding: 38px; box-shadow: 24px 24px 0 var(--c-gold); }
.contact__form input, .contact__form textarea, .contact__form select { border-radius: 0; min-height: 50px; }
.contact__form textarea { min-height: 118px; }
.contact__form .consent { flex-direction: row; align-items: flex-start; }
.contact__form .consent input { width: auto; min-height: 0; flex: 0 0 auto; }
.contact__form .btn { justify-content: center; }
.site-footer { padding-top: 74px; background: #11100f; }

/* Reveal variants */
.reveal { transform: translateY(45px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.image-reveal { clip-path: none; }
.image-reveal.reveal img { opacity: .2; transform: scale(1.08); transition: opacity .7s ease, transform 1.15s cubic-bezier(.2,.7,.2,1); }
.image-reveal.reveal.is-visible img { opacity: 1; transform: scale(1); }

@media (max-width: 1000px) {
  .hero { height: auto; min-height: 760px; }
  .hero__scroll { display: none; }
  .intro__head, .services__head { gap: 48px; }
  .services__item { grid-column: span 6; }
  .services__item:nth-child(7) { grid-column: span 12; }
  .gallery__item, .gallery__item:nth-child(n) { grid-column: span 6; }
}

@media (max-width: 1150px) {
  .nav__list { max-height: calc(100vh - 76px); overflow-y: auto; box-shadow: 0 24px 40px rgba(20,18,16,.14); }
}

@media (max-width: 860px) {
  .hero__content { padding-top: 78px; }
  .intro__head, .services__head { grid-template-columns: 1fr; }
  .intro__grid, .about__grid, .contact__grid { grid-template-columns: 1fr; }
  .stat-card, .stat-card img { min-height: 420px; }
  .about__media, .about__media img { min-height: 480px; }
  .process-showcase__grid { grid-template-columns: 1fr; }
  .process-card { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.16); }
  .process-card > span { margin-bottom: 25px; }
  .process-showcase__cta { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 620px) {
  body { font-size: 15px; }
  .cursor-glow { display: none; }
  .demo-notice { left: 10px; bottom: 66px; padding: 8px 10px; }
  .demo-notice small { display: none; }
  .nav { min-height: 66px; padding: 9px 18px; }
  .nav__logo img { height: 30px; max-width: 270px; }
  .hero { min-height: 740px; }
  .hero__media::after { background: linear-gradient(90deg,rgba(13,13,11,.88),rgba(13,13,11,.48)),linear-gradient(0deg,rgba(13,13,11,.54),transparent); }
  .hero__content { padding: 48px 0 190px; }
  .hero__eyebrow { font-size: .61rem; }
  .hero h1 { margin: 14px 0 18px; font-size: clamp(2.35rem,12vw,3.35rem); line-height: .92; }
  .hero__sub { font-size: .92rem; line-height: 1.5; }
  .hero__actions { flex-direction: column; align-items: stretch; margin: 18px 0 12px; }
  .hero__actions .btn { justify-content: center; }
  .hero__actions .btn--outline, .hero__microcopy, .hero__badge { display: none; }
  .brands__inner { display: block; text-align: center; }
  .brands__row { justify-content: center; gap: 24px; }
  .intro, .services, .gallery, .about, .process-showcase, .testimonials, .konfigurator, .faq, .contact { padding: 82px 0; }
  .intro__head { margin-bottom: 45px; }
  .intro__head h2, .services__head h2, .section-head h2, .about__text h2, .contact h2 { font-size: clamp(2.25rem,11vw,3.3rem); }
  .intro__grid { gap: 58px; }
  .stat-card, .stat-card img { min-height: 310px; }
  .stat-card { box-shadow: 14px 14px 0 var(--c-gold); }
  .stat-card__label { right: -14px; bottom: -14px; }
  .services__grid { display: block; }
  .services__item { margin-bottom: 18px; }
  .gallery__grid { display: block; }
  .gallery__item { min-height: 330px; margin-bottom: 15px; }
  .gallery__item img { min-height: 330px; }
  .about__media, .about__media img { min-height: 330px; }
  .about__media img { box-shadow: 14px 14px 0 #24221f; }
  .about__stamp { width: 90px; height: 90px; right: -8px; top: 18px; }
  .wizard { padding: 28px 18px; box-shadow: 12px 12px 0 #24221f; }
  .option-grid--3col { grid-template-columns: 1fr 1fr; }
  .contact__form { padding: 26px 20px; box-shadow: 12px 12px 0 var(--c-gold); }
  .faq { background-attachment: scroll; }
  .footer__bottom { padding-bottom: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn--shine::after, .hero__eyebrow > span { animation: none; }
  .tilt-card { transform: none !important; }
  .image-reveal { clip-path: none; }
}

/* Live-Ergaenzung (nicht in der Demo): generischer Abschluss-CTA fuer
   partials/cta.php, verwendet auf allen 17 Seiten am Ende des jeweiligen
   "Angebot anfordern"-Abschnitts. Bewusst neutral gehalten (keine neue
   Farbe), reine Anordnung aus bereits vorhandenen Bausteinen. */
.cta-block { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding: 56px 0; flex-wrap: wrap; }
.cta-block h2 { margin-bottom: 8px; }
.cta-block p { margin: 0; color: var(--c-ink-soft); }
@media (max-width: 700px) { .cta-block { flex-direction: column; align-items: flex-start; } }

/* Live-Ergaenzung: SEO-Pflicht-H2 (Text aus der SEO-Struktur) wird optisch
   zur kleinen Eyebrow-Zeile, die bisherige grosse Kreativ-Headline der Demo
   lebt unveraendert als Sub-Headline weiter (gleiches Prinzip wie die
   H1-Regel aus CLAUDE.md, hier auf Abschnitts-Ebene angewendet, betrifft
   Leistungen-, Ueber-uns- und Kontakt-Abschnitt auf index.php). */
.services__head h2, .about__text h2, .contact__intro h2 {
  color: var(--c-gold-dark);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
  margin: 0 0 10px;
}
.services__subhead, .about__subhead, .contact__subhead {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--c-ink);
  font-size: clamp(2.1rem, 4.2vw, 3.8rem);
  line-height: .98;
  letter-spacing: -.05em;
  margin: 0 0 16px;
}
.services__subhead em, .about__subhead em, .contact__subhead em { display: inline-block; }
.services__subhead em, .about__subhead em, .contact__subhead em { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-style: italic; color: var(--c-gold-dark); }
/* .about hat als einzige der drei einen goldenen Sektionshintergrund
   (siehe ".about { background: var(--c-gold) }" weiter oben), gold-dark
   Text darauf ist praktisch unlesbar (zu wenig Kontrast). Original-Demo
   loeste das fuer denselben Fall (".about__text h2 em") mit einem hellen
   Creme-Ton, hier fuer die neue .about__subhead-Klasse uebernommen. */
.about__subhead em { color: #fff7dd; }
/* Gleiches Kontrastproblem wie bei .about__subhead em: .about__text h2 ist
   die Eyebrow-Zeile ueber der Headline, var(--c-gold-dark) auf dem
   goldenen .about-Sektionshintergrund war praktisch unlesbar. */
.about__text h2 { color: rgba(36,34,31,.62); }
/* Kritischer Fund: ".about__text p { line-height:1.75 }" (Zeile ~874) und
   ".services__head p { line-height:1.75 }" (Zeile ~813) sind generische
   "Elternklasse + <p>"-Regeln (Spezifitaet 0,1,1), sie treffen zufaellig
   auch auf .about__subhead/.services__subhead zu (beides <p>-Tags) und
   schlagen dadurch die eigentlich gewollte "line-height:.85"-Regel oben
   (nur 0,1,0 Spezifitaet), obwohl die spaeter im Stylesheet steht. Exakt
   dasselbe Muster wie der Hero-H1-Bug weiter oben. Fix: gezielt
   hoeher-spezifische Selektoren, die zusaetzlich die eigene Klasse UND den
   Tag verlangen. */
.about__text p.about__subhead, .services__head p.services__subhead { line-height: .85; }
/* Nachtrag: dieselben generischen Regeln (".services__head p" Zeile ~813,
   ".contact__intro > p" Zeile ~947) ueberschreiben zusaetzlich auch
   font-size UND color, nicht nur line-height (bei .about__text p nur
   line-height). Deshalb hier fuer alle drei Subhead-Klassen die komplette
   Deklaration mit ausreichend hoher Spezifitaet (Klasse + Elternklasse)
   erneut gesetzt, statt einzelne Eigenschaften nachzuflicken. */
.about__text p.about__subhead,
.services__head p.services__subhead,
.contact__intro p.contact__subhead {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2.1rem, 4.2vw, 3.8rem);
  line-height: .85;
  letter-spacing: -.05em;
}
.about__text p.about__subhead { color: var(--c-ink); }
/* .services (#1b1a18) und .contact (#24221f) haben beide einen dunklen
   Sektionshintergrund, nur .about hat den hellen/goldenen. var(--c-ink)
   war hier fälschlich wie bei .about gesetzt und dadurch auf dem dunklen
   Hintergrund praktisch unsichtbar (dunkler Text auf fast Schwarz). */
.services__head p.services__subhead, .contact__intro p.contact__subhead { color: #fff; }

/* Live-Ergaenzung: gleiches Prinzip wie oben bei den H2, hier fuer den
   Hero. ".hero h1" (Zeile ~151 und ~749) stylt jedes <h1> im Hero riesig,
   weil in der Demo urspruenglich dort die grosse Kreativ-Headline stand.
   Die SEO-H1 traegt jetzt aber die Klasse .hero__eyebrow und muss klein
   bleiben, hier auf dieselben Werte wie die urspruengliche .hero__eyebrow-
   Regel (Zeile ~742) zurueckgesetzt, gewinnt durch hoehere Spezifitaet
   (2 Klassen) gegen die frueheren ".hero h1"-Regeln (1 Klasse + Element). */
.hero h1.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  max-width: none;
  font-weight: 400;
  color: rgba(255,255,255,.76);
  font-size: .72rem;
  letter-spacing: .17em;
  line-height: normal;
}
@media (max-width: 720px) {
  .hero h1.hero__eyebrow { font-size: .61rem; }
}

/* Live-Ergaenzung: Foto-Hintergrund fuer die Einsatzgebiet-Sektion auf der
   Startseite, gleiches Overlay-Prinzip wie .page-hero (dunkler Verlauf fuer
   Lesbarkeit, Inhalt per z-index darueber). */
.leistung-detail--photo {
  position: relative;
  background-size: cover;
  background-position: center;
  color: #fff;
}
.leistung-detail__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,18,16,.72), rgba(20,18,16,.82));
}
.leistung-detail--photo .container { position: relative; z-index: 1; }
.leistung-detail--photo .section-head h2 { color: #fff; }
.leistung-detail--photo .section-head p { color: rgba(255,255,255,.78); }
.btn--outline-light { background: transparent; border: 2px solid rgba(255,255,255,.7); color: #fff; }
.btn--outline-light:hover { background: #fff; color: var(--c-ink); border-color: #fff; }
.leistung-detail--karte { background-position: right center; }
.leistung-detail .brands__row { margin-top: 28px; }
/* Einsatzgebiet-Sektion: 2-spaltig, links Text, rechts die Ortsseiten-Links
   als kompaktes 2er-Raster statt einer langen Button-Reihe unter dem Text. */
.einsatzgebiet__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.einsatzgebiet__grid .section-head { margin-bottom: 0; }
.leistung-detail__actions--grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.leistung-detail__actions--grid .btn { text-align: center; }
@media (max-width: 780px) {
  .einsatzgebiet__grid { grid-template-columns: 1fr; gap: 28px; }
  .leistung-detail__actions--grid { grid-template-columns: 1fr 1fr; }
}

/* Nutzer-Feedback (2026-09-09): auf den Unterseiten wirkten die vielen
   aufeinanderfolgenden Text-Abschnitte ("Überschrift, paar Sätze,
   Überschrift, ...") zu monoton und die H2 viel zu gross fuer wiederholte
   Abschnitte. Kleinere Ueberschrift fuer alle reinen Text-Abschnitte
   (ohne den 2-spaltigen Foto-Vergleichs-Einstieg, der bleibt gross/
   prominent) plus abwechselnder Hintergrund (per JS vergeben, siehe
   initAlternatingSections() in js/main.js, da CSS :nth-of-type NICHT
   zuverlaessig nur .leistung-detail-Elemente zaehlen kann, wenn dazwischen
   andere <section>-Typen wie .gallery/.faq liegen). */
.leistung-detail:not(.leistung-detail--photo):not(:has(.leistung-detail__grid)) .section-head h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
}
.leistung-detail--alt { background: var(--c-bg-alt); }
.leistung-detail--dark { background: #1b1a18; }
.leistung-detail--dark .section-head h2 { color: #fff; }
.leistung-detail--dark p { color: rgba(255,255,255,.78); }
.leistung-detail--dark .leistung-detail__actions a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.leistung-detail--dark .leistung-detail__actions a:hover { color: var(--c-gold); }

/* Checklist als 2-spaltiges Karten-Raster mit hellem Hintergrund statt
   einspaltiger Liste mit Trennlinien (nur ueber Modifier-Klasse, damit die
   Original-.checklist auf der Startseite unveraendert bleibt). */
.checklist--grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.checklist--grid .checklist__item {
  background: var(--c-bg-alt);
  border-bottom: none;
  padding: 22px;
  align-items: flex-start;
}
.checklist--grid .checklist__item:first-child,
.checklist--grid .checklist__item:last-child { padding: 22px; }
@media (max-width: 640px) {
  .checklist--grid { grid-template-columns: 1fr; }
}

/* 2-spaltige Zeilen fuer die wiederholten Text-Abschnitte (statt eine
   Sektion pro Thema): 2 Themen teilen sich eine Zeile/Sektion, dadurch
   alterniert der Hintergrund (bereits vorhandenes .leistung-detail--alt via
   initAlternatingSections()) automatisch pro Zeile statt pro Einzelthema. */
.leistung-detail__row-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
@media (max-width: 780px) {
  .leistung-detail__row-grid { grid-template-columns: 1fr; gap: 28px; }
}
.leistung-detail__row-grid--karte { align-items: center; }
.einsatzgebiet-karte img { display: block; width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); }

/* Konfigurator-Teaser-Karte: kurze Unterbrechung zwischen den Textzeilen,
   springt zum bereits weiter unten eingebetteten Konfigurator. Nutzt
   dasselbe Foto-Hintergrund-Muster wie .leistung-detail--photo (siehe
   Einsatzgebiet-Sektion auf der Startseite), damit sie wie ein
   Design-Baustein dieser Seite wirkt statt wie eine eigene Farbflaeche.
   Bewusst vom Farbwechsel-Zyklus ausgenommen (initAlternatingSections()). */
.leistung-detail--teaser .cta-block { padding: 40px 0; }
.leistung-detail--teaser .cta-block h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); color: #fff; }
.leistung-detail--teaser .cta-block p { color: rgba(255,255,255,.82); }