/* =====================================================================
   EuerHaus — styles.css (shared across all pages)
   Based on design-system.md tokens.
   ===================================================================== */

/* ---------- Tokens :root ---------- */
:root {
  /* Color */
  --color-primary: #4E5936;
  --color-primaryHover: #5B6640;
  --color-primaryActive: #3F492B;
  --color-accent: #5E9447;
  --color-sage: #8FA860;
  --color-sageHover: #9DB672;
  --color-white: #FFFFFF;
  --color-neutral-50: #FBFBF9;
  --color-neutral-100: #F4F4F1;
  --color-neutral-200: #EAEAE4;
  --color-neutral-300: #D6D6CE;
  --color-neutral-500: #8A8A82;
  --color-neutral-700: #555550;
  --color-neutral-900: #333333;
  --color-success: #5E9447;
  --color-warning: #C9871F;
  --color-error: #C0392B;
  --color-onDarkDivider: rgba(255,255,255,0.18);

  /* Typography */
  --font-display: "Poppins", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-xs: 12px;
  --font-sm: 13px;
  --font-base: 15px;
  --font-md: 16px;
  --font-lg: 18px;
  --font-xl: 22px;
  --font-2xl: 28px;
  --font-3xl: 32px;
  --font-4xl: 40px;
  --font-5xl: 56px;
  --font-hero: 64px;
  --lh-display: 1.1;
  --lh-heading: 1.2;
  --lh-body: 1.6;
  --tracking-tight: -0.01em;
  --tracking-eyebrow: 0.12em;
  --tracking-button: 0.04em;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* Container */
  --container-maxWidth: 1200px;
  --container-gutterMobile: 24px;
  --container-gutterDesktop: 40px;

  /* Shadow */
  --shadow-card: 0 2px 8px rgba(51,51,51,0.05);
  --shadow-cardHover: 0 8px 24px rgba(51,51,51,0.10);
  --shadow-nav: 0 2px 12px rgba(51,51,51,0.08);

  /* Breakpoints */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* Motion */
  --motion-easeReveal: cubic-bezier(0.22,1,0.36,1);
  --motion-easeUI: cubic-bezier(0.4,0,0.2,1);
  --motion-durMicro: 180ms;
  --motion-durReveal: 600ms;
  --motion-revealRise: 16px;
  --motion-staggerStep: 80ms;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--font-base);
  line-height: var(--lh-body);
  color: var(--color-neutral-900);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--color-primary); text-decoration: none; transition: color var(--motion-durMicro) var(--motion-easeUI); }
a:hover { color: var(--color-accent); }
button { font-family: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: var(--lh-heading); margin: 0; }
p { margin: 0; }
figure { margin: 0; } /* kill UA default 15px 40px — caused 500px-viewport horizontal scroll on gallery tiles */

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container-maxWidth);
  margin-inline: auto;
  padding-inline: var(--container-gutterMobile);
}
@media (min-width: 1024px) {
  .container { padding-inline: var(--container-gutterDesktop); }
}
section[id], [id].section-target { scroll-margin-top: 88px; }
.section { padding-block: var(--space-12); }
@media (min-width: 768px) {
  .section { padding-block: var(--space-16); }
}
.section--gray { background: var(--color-neutral-100); }
.section--light { background: var(--color-neutral-50); }
.section--white { background: var(--color-white); }

/* ---------- Eyebrow / heading pattern ---------- */
.eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--font-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-primary);
  margin: 0 0 var(--space-3);
}
.eyebrow--sage { color: var(--color-sage); }
.eyebrow::after,
.eyebrow--sage::after {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  background: var(--color-sage);
  margin-top: var(--space-3);
}
.eyebrow--centered { text-align: center; }
.eyebrow--centered::after { margin-inline: auto; }

.section-banner {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--font-3xl);
  text-transform: uppercase;
  color: var(--color-primary);
  text-align: center;
  margin: 0 0 var(--space-8);
}
@media (min-width: 768px) {
  .section-banner { font-size: var(--font-4xl); }
}

/* ---------- Page title (h1 on subpages) ---------- */
.page-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--font-3xl);
  color: var(--color-primary);
  line-height: var(--lh-heading);
  margin: 0 0 var(--space-4);
}
@media (min-width: 768px) {
  .page-title { font-size: var(--font-4xl); }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--font-base);
  text-transform: uppercase;
  letter-spacing: var(--tracking-button);
  padding: 14px 28px;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  transition: background-color var(--motion-durMicro) var(--motion-easeUI),
              transform var(--motion-durMicro) var(--motion-easeUI),
              color var(--motion-durMicro) var(--motion-easeUI);
  min-height: 44px;
  text-decoration: none;
  line-height: 1;
}
.btn:hover { text-decoration: none; }
.btn--primary {
  background: var(--color-primary);
  color: var(--color-white);
}
.btn--primary:hover { background: var(--color-primaryHover); color: var(--color-white); transform: translateY(-1px); }
.btn--primary:active { background: var(--color-primaryActive); }
.btn--secondary {
  background: var(--color-sage);
  color: var(--color-primary);
}
.btn--secondary:hover { background: var(--color-sageHover); color: var(--color-primary); transform: translateY(-1px); }
.btn--ghost {
  background: transparent;
  color: var(--color-neutral-900);
}
.btn--ghost:hover { color: var(--color-accent); }
.btn--full { width: 100%; justify-content: center; }
.btn:focus-visible {
  outline: 3px solid var(--color-sage);
  outline-offset: 2px;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn .btn__arrow { transition: transform var(--motion-durMicro) var(--motion-easeUI); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-white);
  height: 60px;
  display: flex;
  align-items: center;
  transition: box-shadow var(--motion-durMicro) var(--motion-easeUI);
}
@media (min-width: 768px) {
  .site-header { height: 72px; }
}
.site-header.is-scrolled { box-shadow: var(--shadow-nav); }
.site-header__inner {
  width: 100%;
  max-width: var(--container-maxWidth);
  margin-inline: auto;
  padding-inline: var(--container-gutterMobile);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}
@media (min-width: 1024px) {
  .site-header__inner { padding-inline: var(--container-gutterDesktop); }
}
.brand { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand img { height: 36px; width: auto; }
@media (min-width: 768px) {
  .brand img { height: 44px; }
}

.nav { display: none; }
@media (min-width: 768px) {
  .nav { display: flex; align-items: center; gap: var(--space-6); }
}
.nav__link {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--font-base);
  color: var(--color-neutral-900);
  text-decoration: none;
  padding: var(--space-2) 0;
  position: relative;
  transition: color var(--motion-durMicro) var(--motion-easeUI);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--motion-durMicro) var(--motion-easeUI);
}
.nav__link:hover { color: var(--color-accent); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--color-accent); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.hamburger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-sm);
  padding: 10px;
}
@media (min-width: 768px) { .hamburger { display: none; } }
.hamburger span {
  display: block;
  height: 2px;
  background: var(--color-neutral-900);
  transition: transform var(--motion-durMicro) var(--motion-easeUI),
              opacity var(--motion-durMicro) var(--motion-easeUI);
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  display: none;
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: var(--color-white);
  box-shadow: var(--shadow-nav);
  padding: var(--space-4) var(--container-gutterMobile);
  flex-direction: column;
  gap: var(--space-1);
}
.mobile-nav.is-open { display: flex; }
.mobile-nav__link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  color: var(--color-neutral-900);
  font-weight: 500;
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.mobile-nav__link:hover, .mobile-nav__link[aria-current="page"] { color: var(--color-accent); background: var(--color-neutral-50); }
@media (min-width: 768px) { .mobile-nav { display: none !important; } }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
@media (min-width: 768px) {
  .hero { min-height: 620px; }
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(30,34,20,0.72) 0%, rgba(30,34,20,0.35) 45%, rgba(30,34,20,0) 75%);
  pointer-events: none;
}
.hero--mobile-scrim::before {
  background: linear-gradient(180deg, rgba(30,34,20,0.35) 0%, rgba(30,34,20,0.6) 100%);
}
@media (min-width: 768px) {
  .hero--mobile-scrim::before {
    background: linear-gradient(90deg, rgba(30,34,20,0.72) 0%, rgba(30,34,20,0.35) 45%, rgba(30,34,20,0) 75%);
  }
}
.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container-maxWidth);
  margin-inline: auto;
  padding-inline: var(--container-gutterMobile);
}
@media (min-width: 1024px) {
  .hero__inner { padding-inline: var(--container-gutterDesktop); }
}
.hero__content { max-width: 560px; }
.hero__content--wide { max-width: 640px; }
.hero__eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--font-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-sage);
  margin-bottom: var(--space-3);
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-white);
  font-size: var(--font-4xl);
  line-height: var(--lh-display);
  margin-bottom: var(--space-4);
}
.hero__title .hero__title-accent { color: var(--color-sage); }
@media (min-width: 768px) {
  .hero__title { font-size: var(--font-5xl); }
}
.hero__sub {
  color: var(--color-white);
  font-size: var(--font-lg);
  line-height: var(--lh-body);
  margin-bottom: var(--space-6);
  max-width: 56ch;
}

/* ---------- Pricing ---------- */
.pricing {
  display: grid;
  /* V-001 (mobile review it.3): explicit single track — without it the auto
     track sizes to max-content and the nowrap heading inflates the panel
     past the viewport. Desktop 1024px+ rule below still overrides. */
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--space-8);
  column-gap: 0;
  background: var(--color-white);
  border-radius: 2px;
  padding: 0;
}
@media (min-width: 1024px) {
  .pricing { grid-template-columns: 30fr 70fr; align-items: stretch; }
}
@media (max-width: 1023px) {
  .pricing { padding: var(--space-6); }
  .pricing__right { padding: 0; }
}
.pricing__panel {
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: 2px;
  padding: 28px 28px var(--space-2);
  display: flex;
  flex-direction: column;
}
.pricing__eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--font-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-sage);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-onDarkDivider);
}
.pricing__from { font-size: var(--font-lg); opacity: 0.9; }
.pricing__figure {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--font-5xl);
  line-height: 1.1;
  margin: 0 0 var(--space-3);
}
.pricing__tagline { color: rgba(255,255,255,0.85); margin-bottom: var(--space-2); }
.pricing__divider { height: 1px; background: var(--color-onDarkDivider); margin-top: auto; margin-bottom: var(--space-2); }
.pricing__sqm-label { font-size: var(--font-sm); color: rgba(255,255,255,0.7); display: block; margin-bottom: var(--space-2); }
.pricing__sqm-figure { font-family: var(--font-display); font-weight: 700; font-size: var(--font-2xl); color: var(--color-white); }
.pricing__sqm-suffix { font-size: var(--font-sm); color: rgba(255,255,255,0.7); margin-left: var(--space-2); }

.pricing__right { padding: var(--space-6); }
.pricing__heading {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-primary);
  font-size: var(--font-3xl);
  margin-bottom: var(--space-6);
  line-height: var(--lh-heading);
}
@media (min-width: 768px) {
  .pricing__heading { font-size: var(--font-4xl); }
}
.pricing__grid {
  display: grid;
  row-gap: var(--space-6);
  column-gap: 0;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .pricing__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  /* problems round 1: minmax(0,1fr) — nowrap pricing labels must not expand tracks past panel edge */
  .pricing__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.pricing__item {
  border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 25%, white);
  padding-bottom: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: flex-start;
}
.pricing__item-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
}
.pricing__item-icon {
  color: var(--color-primary);
  flex: none;
  display: inline-flex;
  align-items: center;
}
.pricing__item-icon svg { width: 48px; height: 48px; }
.pricing__item-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--font-base);
  text-transform: uppercase;
  color: var(--color-neutral-900);
}
.pricing__item-inclusive {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--font-sm);
  color: var(--color-neutral-500);
}
.pricing__item-desc {
  font-size: var(--font-md);
  color: var(--color-neutral-700);
}

/* ---------- Two-column feature / floor plan ---------- */
.split-2 {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 768px) {
  .split-2 { grid-template-columns: 1fr 1fr; gap: var(--space-12); }
}
.split-2__media img { border-radius: var(--radius-md); width: 100%; object-fit: cover; }
.split-2__floorplan {
  background: var(--color-neutral-100);
  padding: var(--space-6);
  border-radius: var(--radius-md);
}
.split-2__floorplan img { width: 100%; object-fit: contain; }
.split-2__heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--font-3xl);
  color: var(--color-primary);
  margin-bottom: var(--space-3);
  line-height: var(--lh-heading);
}
@media (min-width: 768px) {
  .split-2__heading { font-size: var(--font-4xl); }
}
.split-2__body { color: var(--color-neutral-700); font-size: var(--font-md); line-height: var(--lh-body); }
.split-2__body p + p { margin-top: var(--space-3); }

/* ---------- Gallery ---------- */
.gallery {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .gallery--4 { grid-template-columns: repeat(4, 1fr); }
  .gallery--6 { grid-template-columns: repeat(3, 1fr); }
  .gallery--2x2 { grid-template-columns: repeat(2, 1fr); }
}
.gallery__tile {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.gallery__media {
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: var(--radius-md);
}
.gallery__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms var(--motion-easeUI);
}
.gallery__tile:hover .gallery__media img { transform: scale(1.05); }
.gallery__caption {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--font-base);
  color: var(--color-neutral-900);
  text-align: center;
  margin-top: var(--space-3);
}
.gallery--spitzdach .gallery__media { aspect-ratio: 4/3; }
@media (min-width: 768px) {
  .gallery--spitzdach .gallery__media { aspect-ratio: 16/9; }
}

/* ---------- Warum section ---------- */
.warum-card {
  background: var(--color-neutral-50);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-lg);
  padding: var(--space-10);
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .warum-card { grid-template-columns: 40fr 60fr; gap: var(--space-10); align-items: center; }
}
.warum-card__body p { color: var(--color-neutral-700); }
.warum-benefits {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .warum-benefits { grid-template-columns: repeat(3, 1fr); }
}
.warum-benefit { text-align: center; }
.warum-benefit__icon {
  color: var(--color-primary);
  margin-bottom: var(--space-3);
  display: flex;
  justify-content: center;
}
.warum-benefit__icon svg { width: 48px; height: 48px; }
.warum-benefit__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--font-sm);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-neutral-900);
  margin-bottom: var(--space-2);
}
.warum-benefit__sub { font-size: var(--font-sm); color: var(--color-neutral-700); }

/* ---------- Process steps ---------- */
.process {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  position: relative;
}
@media (min-width: 768px) {
  .process { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .process { grid-template-columns: repeat(5, 1fr); }
}
.process__step { text-align: center; position: relative; padding: 0 var(--space-2); }
@media (min-width: 1024px) {
  .process__step::before {
    content: "";
    position: absolute;
    top: 36px;
    left: -50%;
    right: 50%;
    height: 1px;
    background: var(--color-neutral-300);
    z-index: 0;
  }
  .process__step:first-child::before { display: none; }
}
.process__badge {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-neutral-300);
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-3);
  position: relative;
  z-index: 1;
}
.process__badge svg { width: 28px; height: 28px; color: var(--color-primary); }
.process__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--font-xs);
  color: var(--color-primary);
  margin-top: 2px;
}
.process__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--font-sm);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-neutral-900);
  margin-bottom: var(--space-1);
}
.process__desc { font-size: var(--font-xs); color: var(--color-neutral-700); }

/* ---------- CTA + contact panel ---------- */
.cta-section { background: var(--color-neutral-100); }
.cta-section__intro { text-align: center; margin-bottom: var(--space-10); }
.cta-section__intro p {
  font-size: var(--font-lg);
  color: var(--color-neutral-700);
  max-width: 60ch;
  margin-inline: auto;
}
.cta-section__intro p + p { margin-top: var(--space-3); }
.cta-panel {
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-10);
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .cta-panel { grid-template-columns: 1fr 1fr; gap: var(--space-12); }
}
.cta-panel__left {}
.cta-panel__left, .cta-panel__right { min-width: 0; } /* allow collapsed 1fr panel tracks to shrink below content min-content on narrow screens */
.cta-panel__logo { margin-bottom: var(--space-6); max-width: 200px; }
.cta-panel__logo img { width: 100%; height: auto; }
.cta-panel__echo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--font-2xl);
  text-transform: uppercase;
  color: var(--color-white);
  margin-bottom: var(--space-6);
  line-height: var(--lh-heading);
}
.phone-cta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background: rgba(255,255,255,0.06);
  border-radius: var(--radius-md);
}
.phone-cta__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--color-sage);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.phone-cta__icon svg { width: 24px; height: 24px; color: var(--color-primary); }
.phone-cta__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--font-sm);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-sage);
}
.phone-cta__number {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--font-lg);
  color: var(--color-white);
  text-decoration: none;
  /* The number itself must never break between "+49 178" and the digits.
     The ≤1023px .phone-cta override sets white-space:normal on the
     container (V-002 overflow fix); a direct declaration here beats any
     inherited value, so the container still wraps/shrinks while the
     number stays on one line. */
  white-space: nowrap;
}
.phone-cta__number:hover { color: var(--color-white); text-decoration: underline; }
.phone-cta__sub { font-size: var(--font-sm); color: rgba(255,255,255,0.7); }

.cta-panel__right {}
.cta-panel__form-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--font-xl);
  color: var(--color-white);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

/* ---------- Form ---------- */
.form { display: flex; flex-direction: column; gap: var(--space-4); }
.form__row {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr); /* minmax(0,…) so wide <select>/<input> min-content can't force track past viewport */
}
@media (min-width: 640px) {
  .form__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.form__field { display: flex; flex-direction: column; min-width: 0; }
.form__label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--font-sm);
  color: var(--color-neutral-700);
  margin-bottom: var(--space-1);
}
.form__input,
.form__select,
.form__textarea {
  background: var(--color-white);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--font-base);
  color: var(--color-neutral-900);
  min-height: 48px;
  max-width: 100%; /* never wider than its column — prevents horizontal scroll on narrow viewports */
  transition: border-color var(--motion-durMicro) var(--motion-easeUI),
              box-shadow var(--motion-durMicro) var(--motion-easeUI);
}
.form__input::placeholder,
.form__textarea::placeholder { color: var(--color-neutral-500); }
.form__input:focus,
.form__select:focus,
.form__textarea:focus {
  outline: none;
  border-color: var(--color-sage);
  box-shadow: 0 0 0 3px rgba(143,168,96,0.35);
}
.form__textarea { resize: vertical; min-height: 140px; }
.form__input--error,
.form__input[aria-invalid="true"],
.form__select[aria-invalid="true"],
.form__textarea[aria-invalid="true"] {
  border-color: var(--color-error);
}
.form__input[aria-invalid="true"]:focus,
.form__select[aria-invalid="true"]:focus,
.form__textarea[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(192,57,43,0.25);
}
.form__error {
  display: block;
  font-size: var(--font-sm);
  color: var(--color-error);
  margin-top: var(--space-1);
  min-height: 0;
}
.form__error:empty { display: none; }
.form__submit { margin-top: var(--space-2); }

/* --- form hardening additions (v=seo1): honeypot, consent, alert --- */
/* Honeypot: visually removed but NOT display:none so naive bots still fill it */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0;
  pointer-events: none;
}
/* GDPR consent row */
.form__consent {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  margin-top: var(--space-2);
}
.form__checkbox {
  appearance: auto;
  width: 18px;
  min-height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}
.form__checkbox[aria-invalid="true"] {
  outline: 1px solid var(--color-error);
}
.form__consent-label {
  font-family: var(--font-body);
  font-size: var(--font-sm);
  line-height: 1.5;
  color: var(--color-neutral-700);
}
.form__consent-label a {
  color: var(--color-primary);
  text-decoration: underline;
}
/* Field error inside the consent row wraps to its own full-width line below
   checkbox + label instead of being a cramped third flex child */
.form__consent .form__error {
  flex-basis: 100%;
  margin-left: 28px; /* align with label text (18px checkbox + 10px gap) */
}
/* Server/submit error alert shown above the form */
.form__alert {
  background: color-mix(in srgb, var(--color-error) 8%, transparent);
  border: 1px solid var(--color-error);
  border-radius: var(--radius-sm);
  color: var(--color-error);
  font-size: var(--font-sm);
  padding: 12px 14px;
  margin-bottom: var(--space-2);
}

/* kontakt page: white card variant */
.contact-cards {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .contact-cards { grid-template-columns: 1fr 1fr; gap: var(--space-12); }
}
.contact-card {
  background: var(--color-white);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  padding: var(--space-10);
  box-shadow: var(--shadow-card);
}
.contact-card__eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--font-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}
.contact-card__company {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--font-xl);
  color: var(--color-neutral-900);
  margin-bottom: var(--space-1);
}
.contact-card__tagline { color: var(--color-neutral-500); font-size: var(--font-base); }
.contact-card__divider {
  height: 1px;
  background: var(--color-neutral-200);
  margin: var(--space-6) 0;
}
.contact-info__label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--font-sm);
  color: var(--color-neutral-500);
  margin-bottom: var(--space-1);
}
.contact-info__value {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--font-md);
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}
.contact-info__value a { color: var(--color-primary); }
.contact-info__value a:hover { text-decoration: underline; }
.contact-card__form-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--font-2xl);
  color: var(--color-neutral-900);
  margin-bottom: var(--space-2);
}
.contact-card__form-sub { color: var(--color-neutral-500); margin-bottom: var(--space-6); }
.form-success {
  background: var(--color-neutral-50);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  padding: var(--space-10);
  text-align: center;
}
.form-success__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--font-2xl);
  color: var(--color-success);
  margin-bottom: var(--space-2);
}
.form-success__text { color: var(--color-neutral-700); }

/* ---------- Spec page (Baubeschreibung) ---------- */
.spec-section { display: grid; gap: var(--space-8); grid-template-columns: 1fr; }
@media (min-width: 1024px) {
  .spec-section--split { grid-template-columns: 35fr 65fr; align-items: start; gap: var(--space-12); }
}
.spec-section__heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--font-2xl);
  color: var(--color-primary);
  margin-bottom: var(--space-3);
  line-height: var(--lh-heading);
}
@media (min-width: 768px) {
  .spec-section__heading { font-size: var(--font-3xl); }
}
.spec-section__intro { color: var(--color-neutral-700); }
.spec-list { display: flex; flex-direction: column; }
.spec-item {
  border-bottom: 1px solid var(--color-neutral-200);
  padding: var(--space-4) 0;
}
.spec-key {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--font-md);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-primary);
  margin-bottom: var(--space-1);
}
.spec-value {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--font-base);
  color: var(--color-neutral-700);
  line-height: var(--lh-body);
}
.spec-grid-cards {
  display: grid;
  gap: var(--space-6);
  /* minmax(0,1fr): plain 1fr = minmax(auto,1fr) lets long German compound
     words in .spec-value inflate the track past the viewport on mobile
     (baubeschreibung spec cards right=369 at 360px). Desktop ≥768px rule
     below is untouched. */
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) {
  .spec-grid-cards { grid-template-columns: repeat(2, 1fr); }
}
.spec-card {
  background: var(--color-white);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  box-shadow: var(--shadow-card);
}
.spec-card .spec-key { margin-bottom: var(--space-2); }

.callout-banner {
  background: var(--color-neutral-100);
  border-left: 4px solid var(--color-sage);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-8);
  margin-top: var(--space-10);
}
.callout-banner--alt { background: var(--color-neutral-50); }
.callout-banner h2,
.callout-banner h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--font-md);
  color: var(--color-neutral-900);
  line-height: var(--lh-heading);
}
.callout-banner--centered { text-align: center; }

/* ---------- SpitzDachHaus features ---------- */
.features-grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
}
.feature-card {
  background: var(--color-neutral-50);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-lg);
  padding: var(--space-10);
}
.feature-card__icon { color: var(--color-primary); margin-bottom: var(--space-4); }
.feature-card__icon svg { width: 48px; height: 48px; }
.feature-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--font-2xl);
  color: var(--color-neutral-900);
  margin-bottom: var(--space-3);
  line-height: var(--lh-heading);
}
.feature-card__body { color: var(--color-neutral-700); line-height: var(--lh-body); }

/* ---------- Floor plan section (SpitzDach) ---------- */
.floorplan-grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .floorplan-grid { grid-template-columns: 1fr 1fr; gap: var(--space-10); }
}
.floorplan-grid__item {
  background: var(--color-neutral-100);
  padding: var(--space-6);
  border-radius: var(--radius-md);
  text-align: center;
}
.floorplan-grid__item img { width: 100%; object-fit: contain; margin-bottom: var(--space-3); }
.floorplan-grid__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--font-xl);
  color: var(--color-neutral-900);
}

/* ---------- Ferienparks inset ---------- */
.inset-card {
  background: var(--color-neutral-50);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-lg);
  padding: var(--space-10);
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
  margin-top: var(--space-8);
}
@media (min-width: 768px) {
  .inset-card { grid-template-columns: 1fr 1fr; gap: var(--space-10); }
}
.inset-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--font-xl);
  color: var(--color-neutral-900);
  margin-bottom: var(--space-3);
  line-height: var(--lh-heading);
}
.inset-card__body { color: var(--color-neutral-700); line-height: var(--lh-body); }
.centered-body {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
  color: var(--color-neutral-700);
  margin-bottom: var(--space-8);
}
.bullet-list {
  list-style: none;
  max-width: 520px;
  margin-inline: auto;
  padding: 0;
  margin-bottom: var(--space-10);
  text-align: center;
}
.bullet-list li { padding: var(--space-2) 0; color: var(--color-neutral-700); }

/* ---------- Vorteile checklist ---------- */
.vorteile-list {
  list-style: none;
  max-width: 640px;
  margin-inline: auto;
  padding: 0;
}
.vorteile-list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-neutral-200);
  color: var(--color-neutral-700);
}
.vorteile-list li:last-child { border-bottom: none; }
.vorteile-list svg { width: 20px; height: 20px; color: var(--color-accent); flex-shrink: 0; }
.vorteile__closing {
  text-align: center;
  color: var(--color-neutral-700);
  margin-top: var(--space-8);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-primary);
  color: var(--color-white);
  padding-block: var(--space-14);
}
@media (min-width: 768px) {
  .site-footer { padding-block: var(--space-14); }
}
.site-footer__inner {
  width: 100%;
  max-width: var(--container-maxWidth);
  margin-inline: auto;
  padding-inline: var(--container-gutterMobile);
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .site-footer__inner { grid-template-columns: 2fr 1fr 1fr; padding-inline: var(--container-gutterDesktop); }
}
.site-footer__brand img { height: 44px; width: auto; margin-bottom: var(--space-3); }
.site-footer__tagline { color: rgba(255,255,255,0.85); max-width: 38ch; }
.site-footer__heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--font-sm);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-sage);
  margin-bottom: var(--space-3);
}
.site-footer a { color: var(--color-white); }
.site-footer a:hover { text-decoration: underline; }
.site-footer__contact { display: flex; flex-direction: column; gap: var(--space-2); }
.site-footer__divider {
  height: 1px;
  background: var(--color-onDarkDivider);
  margin-block: var(--space-6);
}
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  align-items: center;
  max-width: var(--container-maxWidth);
  margin-inline: auto;
  padding-inline: var(--container-gutterMobile);
  color: rgba(255,255,255,0.85);
  font-size: var(--font-sm);
}
@media (min-width: 1024px) {
  .site-footer__bottom { padding-inline: var(--container-gutterDesktop); }
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* ---------- Cookie banner ---------- */
.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 100;
  background: var(--color-primary);
  color: var(--color-white);
  padding: var(--space-4) var(--container-gutterMobile);
  transform: translateY(100%);
  transition: transform 400ms var(--motion-easeUI);
}
.cookie-banner.is-open { transform: translateY(0); }
.cookie-banner__inner {
  max-width: var(--container-maxWidth);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
}
.cookie-banner__text { max-width: 70ch; font-size: var(--font-sm); }
.cookie-banner__actions { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
/* Lighthouse contrast: the default .btn--secondary combo (dark green #495226
   text on sage #808f5c) is ~2.39:1 — below 4.5:1. On the dark green banner a
   white surface with dark green text is brand-consistent and ~8.35:1. */
.cookie-banner .btn--secondary {
  background: var(--color-white);
  color: var(--color-primary);
}
.cookie-banner .btn--secondary:hover {
  background: var(--color-white);
  color: var(--color-primaryActive);
  transform: translateY(-1px);
}

/* ---------- Back-to-top ---------- */
.back-to-top {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 40;
  box-shadow: var(--shadow-cardHover);
}
.back-to-top.is-visible { display: flex; }
.back-to-top:hover { background: var(--color-primaryHover); }
.back-to-top svg { width: 20px; height: 20px; }
.back-to-top:focus-visible { outline: 3px solid var(--color-sage); outline-offset: 2px; }

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(var(--motion-revealRise));
  transition: opacity var(--motion-durReveal) var(--motion-easeReveal),
              transform var(--motion-durReveal) var(--motion-easeReveal);
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .cookie-banner { transform: none; transition: none; }
  .gallery__media img { transition: none; }
  .nav__link::after { transition: none; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ---------- Utilities ---------- */
.text-center { text-align: center; }
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.no-bg { background: transparent; }
.mt-0 { margin-top: 0; }

/* ---------- Leistungen page ---------- */
.leistungs-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .leistungs-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .leistungs-grid { grid-template-columns: repeat(3, 1fr); }
}
.leistungs-card {
  background: var(--color-neutral-50);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}
.leistungs-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--font-lg);
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}
.leistungs-card__body {
  font-family: var(--font-body);
  font-size: var(--font-base);
  color: var(--color-neutral-700);
  line-height: 1.6;
}
.optional-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .optional-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .optional-grid { grid-template-columns: repeat(4, 1fr); }
}
.optional-item {
  background: var(--color-neutral-100);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  text-align: center;
}
.optional-item h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--font-xl);
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}
.optional-item p {
  font-family: var(--font-body);
  font-size: var(--font-base);
  color: var(--color-neutral-700);
  line-height: 1.6;
}

/* Leistungs card image - placed at top of card, full width, aspect ratio 4:3 */
.leistungs-card__img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

/* Optional item image - placed at top, full width, aspect ratio 3:2 */
.optional-item__img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}

/* ---------- Service cards: vertical stack, image left / text right ---------- */
.leistungs-grid { grid-template-columns: 1fr !important; gap: var(--space-4); }
.leistungs-card {
  display: flex;
  flex-direction: row;
  gap: var(--space-6);
  align-items: flex-start;
  padding: var(--space-5);
  border-radius: var(--radius-md);
}
.leistungs-card__img { width: 38%; margin-bottom: 0; aspect-ratio: 4/3; }
.leistungs-card__body { flex: 1; }
.leistungs-card__body .leistungs-card__title { margin-bottom: var(--space-2); }
@media (max-width: 639px) {
  .leistungs-card { flex-direction: column; }
  .leistungs-card__img { width: 100%; }
}

/* ---------- Optional cards: vertical stack, image left / text right ---------- */
.optional-grid { grid-template-columns: 1fr !important; gap: var(--space-4); }
.optional-item {
  display: flex;
  flex-direction: row;
  gap: var(--space-6);
  align-items: flex-start;
  text-align: left;
  padding: var(--space-5);
  border-radius: var(--radius-md);
}
.optional-item__img { width: 38%; margin-bottom: 0; aspect-ratio: 3/2; }
.optional-item__body { flex: 1; }
.optional-item__body h3 { text-align: left; }
@media (max-width: 639px) {
  .optional-item { flex-direction: column; }
  .optional-item__img { width: 100%; }
}

/* ---------- Spec bulleted lists (Baubeschreibung) ---------- */
.spec-bullets {
  list-style: disc;
  padding-left: var(--space-6);
  max-width: 820px;
  margin-inline: auto;
}
.spec-bullets li {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-neutral-200);
  color: var(--color-neutral-700);
  line-height: var(--lh-body);
}
.spec-bullets li:last-child { border-bottom: none; }
.spec-bullets li strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--font-base);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-primary);
  margin-bottom: var(--space-1);
}

/* ---------- SpitzDachHaus variant cards ---------- */
.variant-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .variant-grid { grid-template-columns: repeat(3, 1fr); }
}
.variant-card {
  background: var(--color-neutral-50);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;
}
.variant-card__icon { width: 72px; height: 72px; }
.variant-card__icon img { width: 100%; height: 100%; object-fit: contain; }
.variant-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--font-base);
  text-transform: uppercase;
  color: var(--color-neutral-900);
  letter-spacing: 0.03em;
}
.variant-card__price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--font-2xl);
  color: var(--color-primary);
}

/* ---------- Referenzen 2x2 placeholder grid ---------- */
.gallery--refs .gallery__media { aspect-ratio: 4/3; background: var(--color-neutral-200); }

/* === Fix-Plan-2: CTA echo + intro heading === */
.cta-panel__echo {
  color: var(--color-sage);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--font-xl);
}
.cta-panel__echo::before,
.cta-panel__echo::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-onDarkDivider);
}
/* === Fix-Plan-2: pricing panel === */
.pricing__panel-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-white);
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-onDarkDivider);
  white-space: nowrap;
}
.pricing__baseline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}
.pricing__baseline .pricing__from { margin: 0; font-size: var(--font-xl); }
.pricing__baseline .pricing__figure {
  font-size: 46px;
  margin: 0;
  line-height: 1;
}
.pricing__sqm {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}
.pricing__sqm-label { color: rgba(255,255,255,0.85); margin-bottom: 0; }
.pricing__sqm-suffix { color: rgba(255,255,255,0.8); font-size: 14px; font-weight: 400; margin-left: 0; line-height: 1; align-self: baseline; }
.pricing__sqm-figure { color: var(--color-white); font-weight: 700; line-height: 1; }
.pricing__sqm-line {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: var(--space-2);
  white-space: nowrap;
}
/* === Fix-Plan-2: pricing grid vertical dividers + item indent === */
@media (min-width: 640px) and (max-width: 1023px) {
  .pricing__item:not(:nth-child(2n+1)) {
    border-left: 1px solid color-mix(in srgb, var(--color-accent) 25%, white);
    padding-left: var(--space-6);
  }
  .pricing__item-inclusive,
  .pricing__item-desc { padding-left: 60px; }
}
@media (min-width: 1024px) {
  .pricing__item:not(:nth-child(3n+1)) {
    border-left: 1px solid color-mix(in srgb, var(--color-accent) 25%, white);
    padding-left: 16px; /* problems round 1: 32px pushed divider-column content flush/past edges */
  }
  .pricing__item-inclusive,
  .pricing__item-desc { padding-left: 60px; }
}

/* === Fix-Plan-2: Warum section === */
.warum-benefit__icon svg { width: 64px; height: 64px; }
.warum-benefit__title { font-size: var(--font-base); }
.warum-benefit__sub { font-size: var(--font-base); }

/* === Fix-Plan-2: callout banner dark-green border + clickable === */
.callout-banner { border-left-color: var(--color-primary); }
.callout-banner__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--font-base);
  color: var(--color-primary);
  text-decoration: underline;
}
.callout-banner__link:hover { color: var(--color-accent); }

/* === Fix-Plan-2: spec tiles === */
.spec-card .spec-key {
  font-size: var(--font-md);
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}
.spec-card .spec-value { font-size: var(--font-base); }
.spec-tiles-intro { color: var(--color-neutral-700); max-width: 60ch; margin-bottom: var(--space-8); }

/* === Fix-Plan-2: Spitzdach Festpreis banner === */
.spitz-banner {
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-12);
  display: grid;
  gap: var(--space-8);
}
@media (min-width: 768px) {
  .spitz-banner { grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: center; }
}
.spitz-banner__head { text-align: center; }
.spitz-banner__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--font-3xl);
  text-transform: uppercase;
  line-height: var(--lh-heading);
  margin-bottom: var(--space-3);
}
@media (min-width: 768px) { .spitz-banner__title { font-size: var(--font-4xl); } }
.spitz-banner__sub { color: rgba(255,255,255,0.85); font-size: var(--font-lg); }
.spitz-banner__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  color: var(--color-white);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--font-xl);
  text-decoration: none;
}
.spitz-banner__phone:hover { color: var(--color-white); text-decoration: underline; }
.spitz-banner__columns { display: grid; gap: var(--space-5); }
@media (min-width: 480px) { .spitz-banner__columns { grid-template-columns: 1fr 1fr; } }
.spitz-banner__col {
  background: rgba(255,255,255,0.06);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}
.spitz-banner__col-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--font-base);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: var(--space-3);
  color: var(--color-sage);
}
.spitz-banner__col ul { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.spitz-banner__col li { padding: var(--space-1) 0; color: rgba(255,255,255,0.9); }
.spitz-banner__price-net { font-size: var(--font-sm); color: rgba(255,255,255,0.7); }
.spitz-banner__price-gross {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--font-3xl);
  color: var(--color-white);
}
.spitz-banner__price-note { font-size: var(--font-sm); color: var(--color-sage); text-transform: uppercase; letter-spacing: 0.03em; }
/* Spitzdachhaus page typography bump */
.spitzdachhaus .feature-card__title,
#features .feature-card__title { font-size: var(--font-2xl); }
@media (min-width: 768px) {
  #features .feature-card__title { font-size: var(--font-3xl); }
}

/* =====================================================================
   Startseite (index) — reference-matched composition (review iter 01)
   ALL overrides scoped to body.home — other 8 pages unaffected.
   ===================================================================== */

/* --- V-003: designed content boundary 1154px (x=143..1297 @1440) --- */
@media (min-width: 1024px) {
  body.home .container { max-width: 1202px; padding-inline: 24px; }
}

/* --- V-001: search affordance REMOVED (user: no search at all) --- */

/* --- V-001: 56px full-width header + light-fade hero (desktop) --- */
@media (min-width: 768px) {
  body.home .site-header { height: 56px; }
  body.home .site-header__inner { max-width: none; padding-inline: 16px; }

  /* header 56 + hero 464 = reference hero band 0..520 */
  body.home .hero,
  body.home .hero--mobile-scrim { min-height: 464px; }
  body.home .hero__inner { max-width: none; padding-left: 82px; padding-right: 36px; }
  body.home .hero::before,
  body.home .hero--mobile-scrim::before {
    background: linear-gradient(90deg,
      rgba(255,255,255,0.95) 0%,
      rgba(255,255,255,0.82) 26%,
      rgba(255,255,255,0.35) 46%,
      rgba(255,255,255,0) 62%);
  }
  body.home .hero__title {
    font-family: "Lato", Arial, sans-serif;
    color: #111111;
  }
  body.home .hero__title .hero__title-accent { color: #085E10; }
  body.home .hero__sub {
    font-family: "Lato", Arial, sans-serif;
    color: #333333;
  }
}

/* --- V-002: reference 66px spacer bands --- */
.home-spacer { height: 32px; }
@media (min-width: 768px) {
  .home-spacer { height: 66px; }
}

/* --- V-002/V-003: section band geometry (homepage only) --- */
@media (min-width: 1024px) {
  body.home .section { padding-block: 24px; }
  body.home .home-process { padding-block: 88px; }

  /* V-004: pricing block 1154x459. Track partition is owned by the later
     V-021 rule (single source of truth — no duplicate grid-template-columns
     here). Item scaffold: cells top-aligned, row divider above cells 4-6. */
  body.home .pricing { min-height: 459px; }
  body.home .pricing__grid { height: 100%; grid-template-rows: 1fr 1fr; align-content: stretch; }
  body.home .pricing__item {
    border-bottom: none;
    justify-content: flex-start;
    padding-block: 8px;
    padding-top: 20px;
    gap: 6px;
  }
  body.home .pricing__item:nth-child(n+4) {
    border-top: 1px solid color-mix(in srgb, var(--color-accent) 25%, white);
  }

  /* V-010: reference band heights — gallery 367 (ends y≈2442), WARUM 416
     (2508–2924), handwerker 470 (2990–3460); CTA then starts y≈3783 */
  body.home .gallery-section { min-height: 367px; }
  body.home .section--gray { min-height: 416px; }
  body.home #baubeschreibung { min-height: 470px; }

  /* V-009/V-014/V-018: family split — text inset to x≈229, photograph begins
     x≈607. Media fills a fixed 453px box (cover) so family.png's 16:9
     intrinsic ratio no longer drives layout; wrapper ≈501px incl. 24px
     vertical padding. Downstream sections shift naturally. Heading box
     255px at the compact 33px scale (45px-era 347px × 33/45) so it wraps
     per reference (Jedes Zuhause / so individuell wie / die Menschen, /
     die darin leben.) — line breaks scale linearly with font size. */
  body.home .split-2--family { grid-template-columns: 442fr 690fr; gap: 22px; padding-block: 24px; }
  /* V-014: reference family SECTION band is 501px total — the 24px vertical
     padding lives inside the wrapper, so suppress the shared section padding */
  body.home #dein-haus { padding-block: 0; }
  body.home .split-2--family .split-2__body { padding-left: 86px; }
  body.home .split-2--family .split-2__heading { max-width: 255px; }
  body.home .split-2--family .split-2__media { height: 453px; }
  body.home .split-2--family .split-2__media img { width: 100%; height: 100%; object-fit: cover; }

  /* V-015: floor plan — body top-aligned with ~14px top padding, gap reduced
     so text begins x≈841; image keeps 661x367 at x=143 */
  body.home .split-2--floorplan { grid-template-columns: 661fr 445fr; align-items: start; gap: 37px; }
  body.home .split-2--floorplan .split-2__body { padding-top: 14px; }
  body.home .split-2__floorplan { background: transparent; padding: 0; border-radius: 0; }
  body.home .split-2__media img { border-radius: 0; }
  body.home .gallery--4 { gap: 30px; }
  body.home .gallery--4 .gallery__media { aspect-ratio: 1/1; border-radius: 0; }
  body.home .gallery__tile { margin: 0; }
}

/* --- V-006/V-011: CTA heading / intro / panel bands (reference: heading
   3783–3901 = 118px, intro 3901–4092 = 191px, panel band 4092–4611 = 519px
   with 24px breathing above/below the 1154x471 dark panel) --- */
@media (min-width: 768px) {
  body.home .cta-section { background: var(--color-white); padding-block: 0; }
  body.home .cta-heading {
    min-height: 118px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: 0;
    text-align: center;
  }
  body.home .cta-heading .section-banner { margin-bottom: 0; }
  body.home .cta-intro {
    max-width: 760px;
    margin-inline: auto;
    min-height: 191px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 0;
    text-align: center;
  }
  body.home .cta-intro p { max-width: none; }
  /* V-016/V-017: dark panel 1154x471 border-box (24px vertical padding so
     intrinsic grid content fits), 24px outer margins; grid ratio puts the
     SCHNELLKONTAKT column at x≈710-720 */
  body.home .cta-panel {
    border-radius: 0;
    padding: 24px 56px;
    min-height: 471px;
    margin-block: 24px;
    grid-template-rows: 1fr auto;
    grid-template-columns: 47fr 53fr;
    gap: var(--space-4) var(--space-12);
  }
}
body.home .cta-intro p { font-size: var(--font-lg); color: var(--color-neutral-700); }
body.home .cta-intro p + p { margin-top: var(--space-3); }
/* compact quick-contact form so panel fits the 471px dark panel */
body.home .form { gap: 7px; }
body.home .cta-panel__form-heading { margin-bottom: var(--space-3); }
body.home .form__input,
body.home .form__select { min-height: 44px; padding: 10px 12px; }
body.home .form__textarea { height: 80px; min-height: 0; }

/* branded lockup (index-only markup) */
body.home .cta-lockup { margin-bottom: var(--space-8); }
body.home .cta-lockup__top,
body.home .cta-lockup__sub {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--font-md);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-white);
}
body.home .cta-lockup__top::before,
body.home .cta-lockup__top::after,
body.home .cta-lockup__sub::before,
body.home .cta-lockup__sub::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-onDarkDivider);
}
body.home .cta-lockup__main {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 72px;
  text-transform: uppercase;
  color: var(--color-white);
  line-height: 1.1;
  text-align: center;
  margin: var(--space-2) 0;
}
/* CTA-contact-block unification: these were body.home-only, which made
   leistungen/dein-haus/baubeschreibung/referenzen/spitzdachhaus fall back to
   their page-scoped desktop rules on mobile (indented 3-line description,
   border-left divider, stacked email/phone). Promoted to shared base so every
   page's mobile contact block matches index (startseite) exactly; the
   page-scoped L-028/L-030 desktop rules below re-apply at >=1024px. */
.cta-panel__contact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  margin-top: var(--space-8);
}
.cta-panel__brand { flex: none; }
.cta-panel__brand img { height: 44px; width: auto; }

/* panel bottom meta strip (index-only markup) */
.cta-panel__meta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--color-onDarkDivider);
  padding-top: var(--space-4);
  font-size: var(--font-sm);
  color: rgba(255,255,255,0.85);
}
.cta-panel__meta a { color: var(--color-white); }
.cta-panel__meta a:hover { color: var(--color-white); text-decoration: underline; }
.cta-panel__meta-item { display: inline-flex; align-items: center; gap: var(--space-2); }
.cta-panel__meta svg { width: 16px; height: 16px; flex: none; }

/* --- V-007/V-012: compact homepage footer (~78px, white surface,
   centered dark legal row with pipe separators) --- */
@media (min-width: 768px) {
  body.home .site-footer { background: var(--color-white); padding-block: 0; }
  body.home .site-footer__inner,
  body.home .site-footer__divider { display: none; }
  body.home .site-footer__bottom {
    min-height: 78px;
    padding-block: var(--space-4);
    justify-content: center;
    color: var(--color-neutral-900);
  }
  body.home .site-footer__legal { gap: var(--space-3); }
  body.home .site-footer__legal a { color: var(--color-neutral-900); }
  body.home .site-footer__legal a::before { content: "|"; margin-right: var(--space-3); }
  body.home .site-footer__legal a:hover { color: var(--color-primary); text-decoration: underline; }
}

/* --- V-013: reference heading + text tokens (homepage only).
   Reference uses Lato-like bold headings: floor-plan + CTA headings
   saturated forest green rgb(8,94,16); family heading black. Shared
   tokens untouched — scoped under body.home to avoid cross-page drift. --- */
body.home .split-2--floorplan .split-2__heading,
body.home .cta-heading .section-banner,
body.home .split-2--family .split-2__heading {
  font-family: "Lato", Arial, sans-serif;
}
@media (min-width: 768px) {
  body.home .split-2--floorplan .split-2__heading,
  body.home .cta-heading .section-banner {
    font-size: 45px;
    color: #085E10;
  }
  body.home .split-2--family .split-2__heading {
    font-size: 33px;
    line-height: 1.2;
    color: #111111;
  }
}
/* --- V-020..V-024: iteration-04 fixes (homepage-scoped only) --- */
@media (min-width: 768px) {
  /* V-020: hero — top-anchor content so the three-line subtitle + compact
     CTA flow naturally (reference: title glyphs y≈142, CTA y≈465..512,
     x=82 origin kept from hero__inner padding) */
  body.home .hero { align-items: flex-start; }
  body.home .hero__content { padding-top: 73px; }
  body.home .hero__sub {
    max-width: 170px; /* wraps: Natürlich wohnen. / Modern leben. / Bezahlbar bauen. */
    margin-bottom: 48px;
  }
  body.home .hero .btn--primary {
    width: 307px;
    justify-content: center;
    font-size: 13px;
    letter-spacing: 0.03em;
    padding: 14px 10px;
    white-space: nowrap;
  }
}

@media (min-width: 1024px) {
  /* V-021: pricing — neutral gray band, canonical 391px price panel +
     763px feature area within the 1154px boundary. minmax(0, …) lets both
     tracks shrink below their min-content, so the nowrap panel heading can
     never defeat the 391/763 ratio; min-width:0 on the panel keeps the grid
     item at the track width. Darker designed green scoped here (global
     --color-primary untouched). Panel padding consolidated here (was split
     across V-004 and ITER06 blocks). */
  body.home #leistungen { background: #EDEDED; }
  body.home .pricing { grid-template-columns: minmax(0, 391fr) minmax(0, 763fr); }
  body.home .pricing__panel {
    min-width: 0;
    background: linear-gradient(180deg, #3D5128 0%, #384A24 100%);
    padding: 24px 26px 28px 36px;
  }

  /* V-022: floor plan — explicit allocation resolving to 661px media +
     37px gap + 456px text (text origin x≈841); overrides 661fr/445fr.
     661/1117 of the post-gap space resolves the media column to 661px. */
  body.home .split-2--floorplan { grid-template-columns: 661fr 456fr; }

  /* V-022: process band 324px → ~323px (removes final 1px page drift) */
  body.home .home-process { padding-block: 88px 87px; }
}

/* V-023: CTA — gray outer band + darker designed panel surface
   (scoped; the white background rule above is superseded) */
body.home .cta-section { background: #EDEDED; }
body.home .cta-panel {
  background: linear-gradient(180deg, #3C4229 0%, #373D25 100%);
}

/* V-024: CTA intro — broad reference measure + Lato body typography
   (homepage-scoped; wraps after "Bei uns" at 1440px) */
@media (min-width: 768px) {
  body.home .cta-intro { max-width: none; }
  body.home .cta-intro p {
    font-family: "Lato", Arial, sans-serif;
    font-size: 24px;
    line-height: 1.6;
    color: var(--color-neutral-700);
  }
}

body.home .pricing__item-label,
body.home .pricing__item-desc,
body.home .pricing__item-inclusive {
  font-family: "Lato", Arial, sans-serif;
}

/* --- V-025..V-029: iteration-05 fixes (homepage-scoped only) --- */
@media (min-width: 768px) {
  /* V-025: header — Lato 16px nav, lighter inactive links,
     active "Startseite" dark bold WITHOUT persistent green underline */
  body.home .nav__link {
    font-family: "Lato", Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: var(--color-neutral-700);
  }
  body.home .nav__link:hover { color: var(--color-accent); }
  body.home .nav__link[aria-current="page"] {
    color: var(--color-neutral-900);
    font-weight: 700;
  }
  body.home .nav__link[aria-current="page"]::after { transform: scaleX(0); }
}

@media (min-width: 1024px) {
  /* V-026: pricing internals — dominant left heading (23px: the largest
     size that keeps "FESTPREIS. ALLES INKLUSIVE." on ONE line inside the
     391px panel's 329px inner width — must never drive the track),
      divider follows tagline (sqm block pushed to panel bottom instead),
     larger line icons, feature text shifted right. Partition/surfaces kept. */
  body.home .pricing__panel-heading {
    font-family: "Lato", Arial, sans-serif;
    font-size: 23px;
    letter-spacing: 0;
  }
  body.home .pricing__baseline .pricing__figure { font-size: 64px; }
  body.home .pricing__tagline { margin-top: 56px; }
  body.home .pricing__divider { margin-top: 29px; }
  body.home .pricing__sqm { margin-top: auto; }
  body.home .pricing__sqm-figure { font-size: 42px; line-height: 1; }
  body.home .pricing__item-icon svg { width: 56px; height: 56px; }
  body.home .pricing__item-inclusive,
  body.home .pricing__item-desc { padding-left: 68px; }

  /* V-027: CTA panel internals — vertical divider at x≈678 (panel-relative
     535px from panel left edge x=143), form column starts x≈719, placeholder
     only (labels visually hidden but kept for a11y), taller fields, lower
     lockup start, plain white circular phone icon, larger brand logo */
  body.home .cta-panel {
    position: relative;
    grid-template-columns: 472fr 522fr;
  }
  body.home .cta-panel::before {
    content: "";
    position: absolute;
    left: 535px;
    top: 24px;
    bottom: 102px;
    width: 1px;
    background: var(--color-onDarkDivider);
  }
  body.home .cta-panel__left { padding-top: 40px; }
  body.home .form__label {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }
  body.home .form__input,
  body.home .form__select { min-height: 55px; }
  body.home .form__textarea { height: 112px; }
  body.home .form__submit { min-height: 56px; }
  body.home .phone-cta { background: transparent; padding: 0; }
  body.home .phone-cta__icon { background: var(--color-white); }
  body.home .cta-panel__brand img { height: 56px; }

  /* V-029: CTA intro line-height ~1.4 (band min-height keeps geometry) */
  body.home .cta-intro p { line-height: 1.4; }
}

/* V-028: gray CTA band must extend beneath the 24px bottom breathing space —
   move the spacing inside the section (padding) instead of a collapsing
   child margin. Total document height unchanged: the panel's bottom margin
   edge previously collapsed out of .cta-section; the padding now occupies
   exactly that space. */
@media (min-width: 768px) {
  body.home .cta-section { padding-bottom: 24px; }
  body.home .cta-panel { margin-bottom: 0; }
}

/* --- ITER06-V-001..V-007: iteration-06 fixes (homepage-scoped only) --- */

@media (min-width: 768px) {
  /* V-001: hero title line hierarchy — WIR BAUEN 48 / EUER HAUS 74 (dominant)
     / ZUM FESTPREIS. 48 accent green. Group height 48*1.08 + 74*1.08 + 48*1.08
     ≈ 184px ≈ previous 3×56px×1.1 = 185px, so subtitle (3 lines) and CTA
     (x=82, y≈464) positions are preserved. */
  body.home .hero__title { line-height: 1.08; }
  body.home .hero__title-line { display: block; font-size: 48px; }
  body.home .hero__title-line--main { font-size: 74px; }
}

@media (min-width: 1024px) {
  /* V-002: pricing panel internals — feature cells top-aligned (content
     starts higher in each row); Lato label/body metrics; FENSTER & HAUSTÜR
     stays on one line. Panel padding/heading size live in the V-021/V-026
     blocks (consolidated — no conflicting later overrides). */
  body.home .pricing__grid { padding-top: 6px; }
  body.home .pricing__item-label { font-size: 14.5px; white-space: nowrap; }
  body.home .pricing__item-inclusive { font-size: 13px; }
  body.home .pricing__item-desc { font-size: 15px; color: #333333; }

  /* V-003: floor-plan body copy — Lato ~19px, 1.55 leading, darker gray,
     larger heading→paragraph gap; x≈841 origin, 661px media, downstream
     band geometry untouched (6-line wrap at reference width). */
  body.home .split-2--floorplan .split-2__body {
    font-family: "Lato", Arial, sans-serif;
    font-size: 19px;
    line-height: 1.55;
    color: #333333;
  }
  body.home .split-2--floorplan .split-2__heading { margin-bottom: 22px; }

  /* V-004: family photo — 12px top breathing space inside the fixed 453px
     media box (border-box keeps section 501px); cover crop fills 441px. */
  body.home .split-2--family .split-2__media { padding-top: 12px; }

  /* V-005: CTA panel internals — lockup recentered (margin shifts its center
     from x≈435 to x≈411) and starts 18px higher; larger lockup text + brand
     logo; form column 12px wider (padding-right 56→44 → right edge x≈1253);
     bottom meta divider breaks out to FULL panel width x=143..1297 with the
     baseline 6px higher (1fr row absorbs the shift — panel stays 471px). */
  body.home .cta-panel { padding-right: 44px; }
  body.home .cta-panel__left { padding-top: 22px; }
  body.home .cta-lockup { margin-right: 48px; }
  body.home .cta-lockup__top,
  body.home .cta-lockup__sub { font-size: 18px; }
  body.home .cta-lockup__main { font-size: 76px; white-space: nowrap; }
  body.home .cta-panel__brand img { height: 64px; }
  body.home .cta-panel__meta {
    margin-left: -56px;
    margin-right: -44px;
    margin-bottom: 6px;
    padding-inline: 56px;
  }
}

/* V-006: CTA intro phone number dark gray like paragraph text
   (homepage-scoped anchor override; link semantics + hover kept) */
body.home .cta-intro a { color: var(--color-neutral-700); }
body.home .cta-intro a:hover { color: var(--color-neutral-900); text-decoration: underline; }

/* =====================================================================
   Leistungen — reference-matched composition (review iter 01)
   ALL overrides scoped to body.leistungen — other 8 pages unaffected
   (Startseite passes under body.home; shared base rules untouched).
   ===================================================================== */

/* --- L-003: designed content boundary 1154px (x=143..1297 @1440),
     same container treatment as the passed homepage --- */
@media (min-width: 1024px) {
  body.leistungen .container { max-width: 1202px; padding-inline: 24px; }
}

/* --- L-011/L-018: white 56px header in normal flow (dark logo + dark nav),
      464px hero band below (y=56..520); intro heading begins y≈618.
      L-018 header internals: static (not sticky), 128x40 logo at x=24 y=8,
      Lato 16px nav in reference order, search affordance far right */
@media (min-width: 768px) {
  body.leistungen .site-header {
    position: static;
    height: 56px;
    background: var(--color-white);
  }
  body.leistungen .site-header__inner { max-width: none; padding: 0 16px; }
  body.leistungen .nav { gap: 22.95px; }
  body.leistungen .nav__link {
    font-family: "Lato", Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: var(--color-neutral-700);
  }
  body.leistungen .nav__link:hover { color: var(--color-accent); }
  body.leistungen .nav__link[aria-current="page"] {
    color: var(--color-neutral-900);
    font-weight: 700;
  }
  body.leistungen .nav__link[aria-current="page"]::after { transform: scaleX(0); }
}
body.leistungen .le-hero {
  position: relative;
  min-height: 320px;
  background-size: cover;
  /* Wide source 2048x971 (interior render, kitchen island + window view);
     50% 50% centers the composition inside the 464px band without cutting
     the island or window. */
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
  body.leistungen .le-hero { min-height: 464px; }
}
body.leistungen .le-spacer { height: 32px; }
@media (min-width: 768px) {
  body.leistungen .le-spacer { height: 66px; }
}

/* --- L-004/L-008: intro band (586..910 = 324px), Lato typography --- */
body.leistungen .le-intro {
  min-height: 324px;
  padding-block: 32px 48px;
  text-align: center;
}
body.leistungen .le-intro__title {
  font-family: "Lato", Arial, sans-serif;
  font-weight: 700;
  font-size: 45px;
  line-height: 1.2;
  color: #085E10;
  margin-bottom: 22px;
}
body.leistungen .le-intro__copy {
  font-family: "Lato", Arial, sans-serif;
  font-size: 19px;
  line-height: 1.55;
  color: #212121;
  max-width: 940px;
  margin-inline: auto;
}
body.leistungen .le-intro__copy strong { color: #085E10; }

/* --- L-002: full-width service rows at the 1154px boundary.
      Image 464px at x=143, text column x=644 (37px gap). L-012: nonuniform
      surface sequence, gray = #EDEDED. L-013: top-aligned columns with 14px
      top breathing; L-014: mixed description typography variants. --- */
body.leistungen .le-row,
body.leistungen .le-opt { padding-block: 24px; }
body.leistungen .le-row--gray { background: #EDEDED; }
body.leistungen .le-opt--gray { background: var(--color-neutral-100); }
body.leistungen .le-row__grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  align-items: center;
}
body.leistungen .le-row .le-row__grid { align-items: start; }
body.leistungen .le-row__media img { width: 100%; height: auto; }
/* L-033 (V-001): Planung row — image renders at natural 464x261 (16:9); a
   278px min media footprint on the FIRST row only keeps the row band at
   ~326px (910..1236) so CTA/footer boundaries stay at reference positions */
@media (min-width: 1024px) {
  body.leistungen #leistungen .le-row:first-child .le-row__media { min-height: 278px; }
}
/* L-020/L-025: reference titles render bold, green #085E10; lead rows get a
   tighter title→body distance than non-lead rows (raster L-025) */
body.leistungen .le-row__title {
  font-family: "Lato", Arial, sans-serif;
  font-weight: 700;
  font-size: 45.33px;
  line-height: 54.4px;
  color: #085E10;
  margin-bottom: 22px;
}
/* L-031: lead rows need a wider title→copy gap (≈42px total) than the
   raster L-025 distance; non-lead rows keep 16px */
body.leistungen .le-row__body--lead .le-row__title { margin-bottom: 42px; }
/* V-006: non-lead rows get ≈5px more title→copy distance than the raster
   L-025 gap (22px → 27px); lead rows stay on the L-031 42px gap */
body.leistungen .le-row__body:not(.le-row__body--lead) .le-row__title { margin-bottom: 27px; }
body.leistungen .le-row__body { padding-top: 14px; padding-right: 8px; }
/* L-025/V-006: non-lead body 24px/40px Lato, left-aligned — 24px matches the
   reference wrap points (Fenster 'verbinden' and Badezimmer 'komfortablen'
   open line 1, Terrasse closes at 4 lines) */
body.leistungen .le-row__body p {
  font-family: "Lato", Arial, sans-serif;
  font-size: 24px;
  line-height: 40px;
  color: #212121;
  text-align: left;
}
/* L-025: lead variant (Planung, Bodenplatte, Aussenwände, Wärmepumpe) —
   24px/35px centered; V-002: Planung copy is neutral #434343, the other
   three lead rows keep muted olive #495226 (L-032) */
body.leistungen .le-row__body--lead p {
  font-size: 24px;
  line-height: 35px;
  color: #495226;
  text-align: center;
}
body.leistungen .le-row__body--lead.le-row__body--neutral p { color: #434343; }
@media (min-width: 1024px) {
  body.leistungen .le-row__grid { grid-template-columns: 464px minmax(0, 1fr); gap: 37px; }
}
@media (max-width: 639px) {
  body.leistungen .le-row__title { font-size: 32px; line-height: 1.2; }
}

/* --- L-005: completion callout — full-width centered section (~375px),
     both reference paragraphs --- */
/* V-008: floating back-to-top control suppressed on Leistungen only —
   the reference page shows no such control; all other pages unchanged */
body.leistungen .back-to-top,
body.leistungen .back-to-top.is-visible { display: none; }

/* B-013: no floating back-to-top control on Baubeschreibung (page-scoped) */
body.baubeschreibung .back-to-top,
body.baubeschreibung .back-to-top.is-visible { display: none; }
body.leistungen .le-callout {
  min-height: 399px;
  display: flex;
  align-items: center;
  /* L-027/V-009: asymmetric padding lifts the centered group so visible
     text starts at y≈4835 inside the 399px band (band height unchanged) */
  padding-block: 15px 40px;
  text-align: center;
}
/* L-021/V-009: reference callout body ≈25px/35px; first paragraph ~5 lines,
   second ~2 lines; measure tightened 1140→1120 so 'dabei' opens line 4 of
   paragraph 1 (reference wrap point); flex centering keeps content at y≈4835 */
body.leistungen .le-callout p {
  font-family: "Lato", Arial, sans-serif;
  font-size: 25px;
  line-height: 35px;
  color: #000000;
  max-width: 1120px;
  margin-inline: auto;
}
body.leistungen .le-callout p + p { margin-top: 22px; }
/* V-004: reference callout strong is black, bold weight only (no green) */
body.leistungen .le-callout strong { color: #000000; }

/* --- L-008: optional rows — same band geometry, left-aligned copy --- */
body.leistungen .le-optional { padding-block: 0; }
body.leistungen .le-optional__heading {
  font-family: "Lato", Arial, sans-serif;
  font-weight: 700;
  font-size: 40px;
  color: #085E10;
  text-align: center;
  margin: 0;
  padding-block: 44px 44px;
}
body.leistungen .le-opt__title {
  font-family: "Lato", Arial, sans-serif;
  font-weight: 600;
  font-size: 40px;
  color: rgb(73,82,38);
  margin-bottom: 20px;
}
body.leistungen .le-opt__body p {
  font-family: "Lato", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: #212121;
  text-align: left;
}
@media (max-width: 639px) {
  body.leistungen .le-opt__title { font-size: 28px; }
}

/* --- L-006/L-016: CTA variant mirroring the passed Startseite composition
      (title band 118px / intro 190px / 1154x489 dark panel), scoped.
      L-016: section surface #EDEDED; single 24px gap below the panel
      (panel margin-bottom only — section padding-bottom removed). --- */
@media (min-width: 768px) {
  body.leistungen .cta-section {
    background: #EDEDED;
    padding-block: 0 24px;
  }
  body.leistungen .cta-heading {
    min-height: 118px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: 0;
    text-align: center;
  }
  body.leistungen .cta-heading .section-banner {
    font-family: "Lato", Arial, sans-serif;
    /* V-007: 46px renders the heading at ≈744px width, matching the
       reference raster x=347..1093 (≈746px); 45px left it at 727.86px */
    font-size: 46px;
    color: #085E10;
    margin-bottom: 0;
  }
  body.leistungen .cta-intro {
    max-width: none;
    min-height: 190px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
  body.leistungen .cta-intro p {
    font-family: "Lato", Arial, sans-serif;
    font-size: 24px;
    line-height: 1.4;
    color: var(--color-neutral-700);
    max-width: none;
  }
  body.leistungen .cta-intro p + p { margin-top: var(--space-3); }
  body.leistungen .cta-intro a { color: rgb(67,67,67); } /* ctafix: ref phone ink rgb(67,67,67) */
  body.leistungen .cta-intro a:hover { color: var(--color-neutral-900); text-decoration: underline; }
  body.leistungen .cta-panel {
    border-radius: 0;
    background: linear-gradient(180deg, rgb(57,64,39) 0%, rgb(56,64,38) 100%);
    padding: 24px 44px 24px 56px;
    min-height: 489px;
    margin-block: 24px 0;
    grid-template-rows: 1fr auto;
    grid-template-columns: 47fr 53fr;
    gap: var(--space-4) var(--space-12);
  }
}
@media (min-width: 1024px) {
  body.leistungen .cta-panel { grid-template-columns: 467fr 527fr; }
  /* L-028: divider inset slightly deeper per reference raster */
  body.leistungen .cta-panel::before {
    content: "";
    position: absolute;
    left: 535px;
    top: 30px;
    bottom: 112px;
    width: 1px;
    background: var(--color-onDarkDivider);
  }
}
body.leistungen .cta-panel { position: relative; }
/* L-017: metadata separator y≈7295.5 within the 489px panel
   L-022: negative-margin breakout past the panel's 56px/44px internal
   padding so the border-top spans the full panel width (x=143..1297),
   content re-inset via padding-inline (first item ≈x=199) */
/* L-017: metadata separator y≈7295.5 within the 489px panel
   L-022: negative-margin breakout past the panel's 56px/44px internal
   padding so the border-top spans the full panel width (x=143..1297),
   content re-inset via padding-inline (first item ≈x=199)
   L-030: explicit grouping — tagline left (x≈199), email centered near
   x≈844, vertical divider, phone group at x≈1080 (no space-between) */
/* Desktop-only positioning: below 1024px the shared base .cta-panel__meta
   applies so mobile matches index (startseite) — full-width description,
   side-by-side email/phone, no border-left/indent. */
@media (min-width: 1024px) {
body.leistungen .cta-panel__meta {
  margin-left: -56px;
  margin-right: -44px;
  padding-inline: 56px;
  padding-top: 31px;
  justify-content: flex-start;
  gap: 0;
}
body.leistungen .cta-panel__meta-item:first-child { margin-right: auto; }
/* L-030: vertical divider between the email and phone groups */
body.leistungen .cta-panel__meta a + a {
  border-left: 1px solid var(--color-onDarkDivider);
  /* L-030: wide margin pushes the email group left so its center lands
     at x≈844 while the phone group stays anchored at x≈1080 */
  margin-left: 167px;
  padding-left: 32px;
}
}
/* ctafix + mobile-unification: desktop-only padding (lockup sat ~13px high
   vs ref ink panel+59); below 1024px the shared base (index) applies */
@media (min-width: 1024px) {
  body.leistungen .cta-panel__left { padding-top: 35px; }
} /* ctafix */
body.leistungen .cta-lockup { margin-bottom: 17px; margin-right: 48px; }
body.leistungen .cta-lockup__top,
body.leistungen .cta-lockup__sub {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-display);
  font-weight: 600;
  /* L-R2-01/L-R2-02: 24px lockup lines (ref ~24px ink w148/w240)
     line-height 21.6px = old 18px normal line box so CTA panel
     geometry (min-height 489px) and body height 7475px stay frozen */
  font-size: 24px;
  line-height: 21.6px;
  text-transform: uppercase;
  /* WIR BAUEN: glyphs 100.7px @24px + 8 gaps × 1.68px ≈ ink 148px */
  letter-spacing: 0.07em;
  color: var(--color-white);
}
body.leistungen .cta-lockup__sub {
  /* L-R2-02: ZUM FESTPREIS glyphs 178.8px @24px + 12 gaps × 5.04px ≈ ink 239px */
  letter-spacing: 0.21em;
  color: rgb(134, 148, 99);
}
body.leistungen .cta-lockup__top::before,
body.leistungen .cta-lockup__top::after,
body.leistungen .cta-lockup__sub::before,
body.leistungen .cta-lockup__sub::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-onDarkDivider);
}
body.leistungen .cta-lockup__main {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 76px;
  text-transform: uppercase;
  color: var(--color-white);
  line-height: 1.1;
  text-align: center;
  margin: var(--space-2) 0;
  white-space: nowrap;
}
/* Desktop-only L-028 positioning (12px gap, row 64px down, 64px logo);
   below 1024px the shared base .cta-panel__contact-row / .cta-panel__brand
   rules apply so mobile matches index (startseite). */
@media (min-width: 1024px) {
body.leistungen .cta-panel__contact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* L-028: 12px gap so brand+phone fit and the phone icon lands at x≈411 */
  gap: 12px;
  /* L-028: row sits ~30px lower than before (target contact row y≈7150) */
  margin-top: 64px;
}
body.leistungen .cta-panel__brand { flex: none; }
body.leistungen .cta-panel__brand img { height: 64px; width: auto; }
}
/* Phone-cta parity with index (body.home): transparent/nowrap/icon-white are
   desktop-only positioning (L-028). Below 1024px the base glassy-box style
   (bg, 16px padding, sage icon) applies — same as index mobile. */
@media (min-width: 1024px) {
  body.leistungen .phone-cta { background: transparent; padding: 0; }
  /* L-028: phone icon lands near x≈411 (was x≈451) */
  /* L-028: phone group kept on one line (nowrap) so the contact row stays
     99px tall and the panel keeps its 489px min-height */
  body.leistungen .phone-cta { white-space: nowrap; margin-right: 40px; }
  body.leistungen .phone-cta__icon { background: var(--color-white); }
}
/* L-029: plain white Betreff field — hide the native select arrow,
   combobox semantics preserved (real <select> element) */
body.leistungen .form__select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
/* compact placeholder-style form (labels sr-only, kept for a11y)
   L-017: row gaps 12px; first controls 69px below panel top */
body.leistungen .form { gap: 12px; }
/* L-028: form heading lighter/smaller per reference raster (Lato regular) */
body.leistungen .cta-panel__form-heading {
  font-family: "Lato", Arial, sans-serif;
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.04em;
  margin-bottom: 19px;
}
@media (min-width: 640px) {
  /* L-023: 12px column gap (right field starts x≈997.6, width ≈255.4px) */
  body.leistungen .form__row {
    grid-template-columns: 266px minmax(0, 1fr);
    column-gap: 12px;
  }
}
@media (min-width: 1024px) {
  body.leistungen .form__label {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }
  body.leistungen .form__input,
  body.leistungen .form__select { min-height: 55px; padding: 10px 12px; }
  body.leistungen .form__textarea { height: 112px; min-height: 0; }
  /* L-029: submit label white; no extra top margin → textarea→submit = 12px */
  body.leistungen .form__submit {
    min-height: 56px;
    margin-top: 0;
    color: var(--color-white);
  }
  body.leistungen .form__submit:hover { color: var(--color-white); }
}
@media (max-width: 1023px) {
  body.leistungen .cta-panel { grid-template-columns: 1fr; }
}

/* --- L-007: compact white footer (~78px, centered legal row with pipes),
     Leistungen-scoped mirror of the passed homepage footer --- */
@media (min-width: 768px) {
  body.leistungen .site-footer { background: var(--color-white); padding-block: 0; }
  body.leistungen .site-footer__inner,
  body.leistungen .site-footer__divider { display: none; }
  body.leistungen .site-footer__bottom {
    min-height: 78px;
    padding-block: var(--space-4);
    justify-content: center;
    color: var(--color-neutral-900);
  }
  body.leistungen .site-footer__legal { gap: var(--space-3); }
  body.leistungen .site-footer__legal a { color: var(--color-neutral-900); }
  body.leistungen .site-footer__legal a::before { content: "|"; margin-right: var(--space-3); }
  body.leistungen .site-footer__legal a:hover { color: var(--color-primary); text-decoration: underline; }
}

/* =====================================================================
   Dein Haus — reference-matched composition (review iter 01, D-001..D-007)
   ALL overrides scoped to body.dein-haus — index/leistungen untouched
   (Startseite passes under body.home, Leistungen under body.leistungen).
   ===================================================================== */

/* --- D-003: designed content boundary 1154px (x=143..1297 @1440),
      same container treatment as the passed homepage/leistungen --- */
@media (min-width: 1024px) {
  body.dein-haus .container { max-width: 1202px; padding-inline: 24px; }
}

/* --- D-004: 56px static white header, logo 141x56 at x=16, Lato 16px nav,
      reference order (SpitzDachHaus before Referenzen), search far right --- */
@media (min-width: 768px) {
  body.dein-haus .site-header {
    position: static;
    height: 56px;
    background: var(--color-white);
  }
  body.dein-haus .site-header__inner { max-width: none; padding: 0 16px; }
  body.dein-haus .nav { gap: 21.1px; }
  body.dein-haus .nav__link {
    font-family: "Lato", Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: var(--color-neutral-700);
  }
  body.dein-haus .nav__link:hover { color: var(--color-accent); }
  body.dein-haus .nav__link[aria-current="page"] {
    color: var(--color-neutral-900);
    font-weight: 700;
  }
  body.dein-haus .nav__link[aria-current="page"]::after { transform: scaleX(0); }
}

/* --- D-002: image-only 464px hero band below the 56px header (y=56..520) --- */
body.dein-haus .dh-hero {
  position: relative;
  min-height: 320px;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
  body.dein-haus .dh-hero { min-height: 464px; }
}

/* --- D-002: white intro block — title y=618 (98px below hero), 45.33px
      Lato rgb(73,82,38); body begins y≈748 (76px title→copy gap), ~25.33px
      Lato / 35px line-height; gray band starts y≈936 (48px below body) --- */
body.dein-haus .dh-intro { padding-block: 32px 48px; }
body.dein-haus .dh-intro__title {
  font-family: "Lato", Arial, sans-serif;
  font-weight: 700;
  font-size: 45.33px;
  line-height: 54.4px;
  color: rgb(73,82,38);
  margin: 0;
}
body.dein-haus .dh-intro__copy {
  font-family: "Lato", Arial, sans-serif;
  font-size: 25.33px;
  line-height: 35px;
  color: #212121;
  margin-top: 22px;
}
@media (min-width: 768px) {
  body.dein-haus .dh-intro { padding-top: 98px; padding-bottom: 48px; }
  body.dein-haus .dh-intro__copy { margin-top: 76px; }
}

/* --- D-001/D-002: one gray band (y≈936..4247) holding the floor plan and
      the four elevations at the 1154px boundary with 48px gaps; visible
      section headings removed per reference (sr-only kept in markup) --- */
body.dein-haus .dh-plans { padding-block: 24px 60px; }
body.dein-haus .dh-plans .container > .dh-plan + .placeholder,
body.dein-haus .dh-plans .container > .placeholder + .placeholder { margin-top: 48px; }
body.dein-haus .dh-plan img { width: 100%; height: auto; display: block; }
/* D-001: placeholder boxes for genuinely missing elevation assets — gray
   surface, filename as centered text, exact reference dimensions */
body.dein-haus .placeholder {
  background: #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Lato", Arial, sans-serif;
  font-size: 18px;
  color: #666666;
}
@media (min-width: 1024px) {
  /* reference raster: plan 1154x649 at y≈960; elevations 1154x589/559/616/622
     at 48px gaps; asset ratio 1280:711 ≈ 1.80 vs reference 1.777 — fill keeps
     the box geometry exact (sub-1% distortion on a line drawing) */
  body.dein-haus .dh-plan img { height: 649px; object-fit: fill; }
  body.dein-haus .placeholder[data-asset="ansicht-1.webp"] { height: 589px; }
  body.dein-haus .placeholder[data-asset="ansicht-2.webp"] { height: 559px; }
  body.dein-haus .placeholder[data-asset="ansicht-3.webp"] { height: 616px; }
  body.dein-haus .placeholder[data-asset="ansicht-4.webp"] { height: 622px; }
}
@media (max-width: 1023px) {
  body.dein-haus .placeholder { min-height: 240px; }
}

/* --- D-005: pricing — Startseite treatment: gray band 30px below the plans
      band (band y≈4278..4794), content 1154x468, minmax(0,Nfr) 391/763
      partition, darker designed green panel, 6 icon cells --- */
@media (min-width: 768px) {
  body.dein-haus .dh-pricing { background: #EDEDED; padding-block: 24px; margin-top: 30px; }
}
@media (min-width: 1024px) {
  body.dein-haus .pricing { min-height: 468px; grid-template-columns: minmax(0, 391fr) minmax(0, 763fr); }
  body.dein-haus .pricing__right { display: flex; flex-direction: column; }
  body.dein-haus .pricing__right .pricing__grid { flex: 1; }
  body.dein-haus .pricing__panel {
    min-width: 0;
    background: linear-gradient(180deg, #3D5128 0%, #384A24 100%);
    padding: 24px 26px 28px 36px;
  }
  body.dein-haus .pricing__grid { height: 100%; grid-template-rows: 1fr 1fr; align-content: stretch; padding-top: 6px; }
  body.dein-haus .pricing__item {
    border-bottom: none;
    justify-content: flex-start;
    padding-block: 8px;
    padding-top: 20px;
    gap: 6px;
  }
  body.dein-haus .pricing__item:nth-child(n+4) {
    border-top: 1px solid color-mix(in srgb, var(--color-accent) 25%, white);
  }
  body.dein-haus .pricing__panel-heading {
    font-family: "Lato", Arial, sans-serif;
    font-size: 23px;
    letter-spacing: 0;
  }
  body.dein-haus .pricing__baseline .pricing__figure { font-size: 64px; }
  body.dein-haus .pricing__tagline { margin-top: 56px; }
  body.dein-haus .pricing__divider { margin-top: 29px; }
  body.dein-haus .pricing__sqm { margin-top: auto; }
  body.dein-haus .pricing__sqm-figure { font-size: 42px; line-height: 1; }
  body.dein-haus .pricing__item-icon svg { width: 56px; height: 56px; }
  body.dein-haus .pricing__item-label { font-size: 14.5px; white-space: nowrap; }
  body.dein-haus .pricing__item-inclusive { font-size: 13px; }
  body.dein-haus .pricing__item-desc { font-size: 15px; color: #333333; }
  body.dein-haus .pricing__item-inclusive,
  body.dein-haus .pricing__item-desc { padding-left: 68px; }
}
body.dein-haus .pricing__item-label,
body.dein-haus .pricing__item-desc,
body.dein-haus .pricing__item-inclusive {
  font-family: "Lato", Arial, sans-serif;
}

/* --- vision section: classification = mockup/intent-only; band fills the
      reference gap between pricing (ends y≈4794) and the CTA heading band
      (starts y≈5241) ≈ 448px, content vertically centered --- */
@media (min-width: 768px) {
  body.dein-haus .dh-vision { padding-block: 0; min-height: 448px; display: flex; align-items: center; }
  body.dein-haus .dh-vision .container { width: 100%; }
}

/* --- D-006: CTA — heading band y≈5241 (118px), intro (2 paragraphs,
      flex-centered in ~190px), 1154x489 dark panel; mirrors the proven
      Leistungen composition (467fr/527fr split, sage submit w/ white label) --- */
@media (min-width: 768px) {
  body.dein-haus .cta-section {
    background: #EDEDED;
    padding-block: 0 24px;
  }
  body.dein-haus .cta-heading {
    min-height: 118px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: 0;
    text-align: center;
  }
  body.dein-haus .cta-heading .section-banner {
    font-family: "Lato", Arial, sans-serif;
    font-size: 45.33px;
    color: rgb(8,94,16); /* ctafix: ref intro heading green rgb(8,94,16), was olive */
    margin-bottom: 0;
  }
  body.dein-haus .cta-intro {
    max-width: none;
    min-height: 190px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
  body.dein-haus .cta-intro p {
    font-family: "Lato", Arial, sans-serif;
    font-size: 25.33px;
    line-height: 35px;
    color: rgb(67,67,67); /* ctafix: ref intro copy rgb(67,67,67), was neutral-700 */
    max-width: none;
  }
  body.dein-haus .cta-intro p + p { margin-top: 20px; }
  body.dein-haus .cta-intro a { color: rgb(67,67,67); } /* ctafix: ref phone rgb(67,67,67) */
  body.dein-haus .cta-intro a:hover { color: var(--color-neutral-900); text-decoration: underline; }
  body.dein-haus .cta-panel {
    border-radius: 0;
    background: linear-gradient(180deg, rgb(57,64,39) 0%, rgb(56,64,38) 100%);
    padding: 24px 44px 24px 56px;
    min-height: 489px;
    margin-block: 24px 0;
    grid-template-rows: 1fr auto;
    grid-template-columns: 47fr 53fr;
    gap: var(--space-4) var(--space-12);
  }
}
@media (min-width: 1024px) {
  body.dein-haus .cta-panel { position: relative; grid-template-columns: 467fr 527fr; }
  body.dein-haus .cta-panel::before {
    content: "";
    position: absolute;
    left: 535px;
    top: 30px;
    bottom: 112px;
    width: 1px;
    background: var(--color-onDarkDivider);
  }
  body.dein-haus .form__label {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }
  body.dein-haus .form__input,
  body.dein-haus .form__select { min-height: 55px; padding: 10px 12px; }
  body.dein-haus .form__textarea { height: 112px; min-height: 0; }
  body.dein-haus .form__submit {
    min-height: 56px;
    margin-top: 0;
    color: var(--color-white);
  }
  body.dein-haus .form__submit:hover { color: var(--color-white); }
}
@media (max-width: 1023px) {
  body.dein-haus .cta-panel { grid-template-columns: 1fr; }
}
body.dein-haus .cta-panel { position: relative; }
/* Desktop-only L-030 positioning; <1024px uses shared base (index look) */
@media (min-width: 1024px) {
body.dein-haus .cta-panel__meta {
  margin-left: -56px;
  margin-right: -44px;
  padding-inline: 56px;
  padding-top: 31px;
  justify-content: flex-start;
  gap: 0;
}
body.dein-haus .cta-panel__meta-item:first-child { margin-right: auto; }
body.dein-haus .cta-panel__meta a + a {
  border-left: 1px solid var(--color-onDarkDivider);
  margin-left: 167px;
  padding-left: 32px;
}
}
/* ctafix + mobile-unification: desktop-only padding; <1024px shared base */
@media (min-width: 1024px) {
  body.dein-haus .cta-panel__left { padding-top: 35px; }
} /* ctafix: lockup sat ~11px high vs ref ink panel+59 */
body.dein-haus .cta-lockup { margin-bottom: 17px; margin-right: 48px; }
body.dein-haus .cta-lockup__top,
body.dein-haus .cta-lockup__sub {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-display);
  font-weight: 600;
  /* ctafix: match leistungen L-R2 values + ref ink (top h20 w~138-149 white, sub h22 sage) */
  font-size: 24px;
  line-height: 21.6px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-white);
}
body.dein-haus .cta-lockup__sub {
  letter-spacing: 0.21em;
  color: rgb(134, 148, 99);
}
body.dein-haus .cta-lockup__top::before,
body.dein-haus .cta-lockup__top::after,
body.dein-haus .cta-lockup__sub::before,
body.dein-haus .cta-lockup__sub::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-onDarkDivider);
}
body.dein-haus .cta-lockup__main {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 76px;
  text-transform: uppercase;
  color: var(--color-white);
  line-height: 1.1;
  text-align: center;
  margin: var(--space-2) 0;
  white-space: nowrap;
}
/* Desktop-only L-028 positioning; <1024px uses shared base (index look) */
@media (min-width: 1024px) {
body.dein-haus .cta-panel__contact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 64px;
}
body.dein-haus .cta-panel__brand { flex: none; }
body.dein-haus .cta-panel__brand img { height: 64px; width: auto; }
}
/* Phone-cta parity with index (body.home): desktop-only positioning below;
   below 1024px the base glassy-box style applies (see leistungen note). */
@media (min-width: 1024px) {
  body.dein-haus .phone-cta { background: transparent; padding: 0; white-space: nowrap; margin-right: 40px; }
  body.dein-haus .phone-cta__icon { background: var(--color-white); }
}
body.dein-haus .form__select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
body.dein-haus .form { gap: 12px; }
body.dein-haus .cta-panel__form-heading {
  font-family: "Lato", Arial, sans-serif;
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.04em;
  margin-bottom: 19px;
}
@media (min-width: 640px) {
  body.dein-haus .form__row {
    grid-template-columns: 266px minmax(0, 1fr);
    column-gap: 12px;
  }
}

/* --- D-007: compact white footer (~78px, centered legal row with pipes) --- */
@media (min-width: 768px) {
  body.dein-haus .site-footer { background: var(--color-white); padding-block: 0; }
  body.dein-haus .site-footer__inner,
  body.dein-haus .site-footer__divider { display: none; }
  body.dein-haus .site-footer__bottom {
    min-height: 78px;
    padding-block: var(--space-4);
    justify-content: center;
    color: var(--color-neutral-900);
  }
  body.dein-haus .site-footer__legal { gap: var(--space-3); }
  body.dein-haus .site-footer__legal a { color: var(--color-neutral-900); }
  body.dein-haus .site-footer__legal a::before { content: "|"; margin-right: var(--space-3); }
  body.dein-haus .site-footer__legal a:hover { color: var(--color-primary); text-decoration: underline; }
}

/* =====================================================================
   Baubeschreibung — reference-matched composition (review iter 01, B-001..B-007)
   ALL overrides scoped to body.baubeschreibung — passed pages untouched
   (Startseite passes under body.home, Leistungen under body.leistungen,
   Dein Haus under body.dein-haus).
   ===================================================================== */

/* --- B-001 (shared with all passed pages): designed content boundary
      1154px (x=143..1297 @1440) --- */
@media (min-width: 1024px) {
  body.baubeschreibung .container { max-width: 1202px; padding-inline: 24px; }
}

/* --- B-001: 56px static white header, logo 141x56 at x=16, Lato 16px nav,
      reference order (SpitzDachHaus before Referenzen), search far right --- */
@media (min-width: 768px) {
  body.baubeschreibung .site-header {
    position: static;
    height: 56px;
    background: var(--color-white);
  }
  body.baubeschreibung .site-header__inner { max-width: none; padding: 0 16px; }
  body.baubeschreibung .nav { gap: 21.1px; }
  body.baubeschreibung .nav__link {
    font-family: "Lato", Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: var(--color-neutral-700);
  }
  body.baubeschreibung .nav__link:hover { color: var(--color-accent); }
  body.baubeschreibung .nav__link[aria-current="page"] {
    color: var(--color-neutral-900);
    font-weight: 700;
  }
  body.baubeschreibung .nav__link[aria-current="page"]::after { transform: scaleX(0); }
}

/* --- B-002: image-only 464px hero band below the 56px header (y=56..520).
      USER ASSET: construction-stage photo from the reference does not exist
      locally; closest semantic match (timber facade) is used. --- */
body.baubeschreibung .bb-hero {
  position: relative;
  min-height: 320px;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
  body.baubeschreibung .bb-hero { min-height: 464px; }
}

/* --- B-003 (mockup sections — design intent, structure/wording preserved):
      reference hierarchy — bold key labels + substantial 24px Lato body,
      green ~40px Lato section headings --- */
body.baubeschreibung .spec-key {
  font-family: "Lato", Arial, sans-serif;
  font-size: 32px; /* B-014: reference hierarchy ~32px bold; 32px line box keeps card geometry stable */
  line-height: 32px;
  font-weight: 700;
  margin-bottom: 5px;
  text-transform: none;
  letter-spacing: 0;
}
body.baubeschreibung .spec-value {
  font-family: "Lato", Arial, sans-serif;
  font-size: 24px;
  line-height: 32px;
  color: #333333;
}
body.baubeschreibung .spec-tiles-intro {
  font-family: "Lato", Arial, sans-serif;
  font-size: 24px;
  line-height: 32px;
}
/* geometry tuning: spec region must end so pricing panel lands at y=3459 */
body.baubeschreibung #allgemein,
body.baubeschreibung #heizung-sanitaer,
body.baubeschreibung #elektro { padding-top: 40px; padding-bottom: 40px; }
/* spacing normalization round 1: title→sub and sub→cards gaps unified to 15px
   (+24px per mid-page section, was 0px / 6px). edits3: padding-bottom:0 overrides
   REMOVED — both mid sections restored to shared 40px pb so the callout banners
   no longer touch the next section; delta funded by intro gap normalization
   (title→sub 83.5→15, sub→cards 80.8→15 = −134.3px vs +80px pb). */
body.baubeschreibung .spec-card { padding: 17px 32px; }
body.baubeschreibung .spec-grid-cards { gap: 13px; }
body.baubeschreibung .callout-banner { margin-top: 14px; padding-top: 22px; padding-bottom: 22px; }
@media (min-width: 768px) {
  body.baubeschreibung #allgemein .spec-section__heading,
  body.baubeschreibung #heizung-sanitaer .section-banner,
  body.baubeschreibung #elektro .section-banner {
    font-family: "Lato", Arial, sans-serif;
    font-size: 40px;
    color: rgb(73,82,38);
    margin-bottom: 24px;
  }
}

/* --- B-008: CTA scaffold anchors — CTA band starts y=4000 (pricing
      section padding-bottom 64 -> 90.3), heading glyphs y=4043 (118px
      centered band), panel y=4333..4813, 23.3px gap before footer 4836 --- */
@media (min-width: 768px) {
  body.baubeschreibung #leistungen { padding-bottom: 90.3px; }
}

/* --- B-004: pricing — 1154x451 strip (y≈3459..3910), minmax(0,Nfr)
      391/763 partition, darker designed green panel, 6 icon cells --- */
@media (min-width: 1024px) {
  body.baubeschreibung .pricing { min-height: 451px; grid-template-columns: minmax(0, 391fr) minmax(0, 763fr); }
  body.baubeschreibung .pricing__right { display: flex; flex-direction: column; }
  body.baubeschreibung .pricing__right .pricing__grid { flex: 1; }
  body.baubeschreibung .pricing__panel {
    min-width: 0;
    background: linear-gradient(180deg, #3D5128 0%, #384A24 100%);
    padding: 24px 26px 28px 36px;
  }
  body.baubeschreibung .pricing__grid { height: 100%; grid-template-rows: 1fr 1fr; align-content: stretch; padding-top: 6px; }
  body.baubeschreibung .pricing__item {
    border-bottom: none;
    justify-content: flex-start;
    padding-block: 8px;
    padding-top: 20px;
    gap: 6px;
  }
  body.baubeschreibung .pricing__item:nth-child(n+4) {
    border-top: 1px solid color-mix(in srgb, var(--color-accent) 25%, white);
  }
  body.baubeschreibung .pricing__panel-heading {
    font-family: "Lato", Arial, sans-serif;
    font-size: 23px;
    letter-spacing: 0;
  }
  body.baubeschreibung .pricing__baseline .pricing__figure { font-size: 64px; }
  body.baubeschreibung .pricing__tagline { margin-top: 56px; }
  body.baubeschreibung .pricing__divider { margin-top: 29px; }
  body.baubeschreibung .pricing__sqm { margin-top: auto; }
  body.baubeschreibung .pricing__sqm-figure { font-size: 42px; line-height: 1; }
  body.baubeschreibung .pricing__item-icon svg { width: 56px; height: 56px; }
  body.baubeschreibung .pricing__item-label { font-size: 14.5px; white-space: nowrap; }
  body.baubeschreibung .pricing__item-inclusive { font-size: 13px; }
  body.baubeschreibung .pricing__item-desc { font-size: 15px; color: #333333; }
  body.baubeschreibung .pricing__item-inclusive,
  body.baubeschreibung .pricing__item-desc { padding-left: 68px; }
}
body.baubeschreibung .pricing__item-label,
body.baubeschreibung .pricing__item-desc,
body.baubeschreibung .pricing__item-inclusive {
  font-family: "Lato", Arial, sans-serif;
}

/* --- B-005/B-006: CTA — heading band, 24px/33.6px Lato intro, 1154x480
      dark panel; mirrors the proven Dein Haus composition (467fr/527fr
      split, divider, placeholder-style form, sage submit, meta strip) --- */
@media (min-width: 768px) {
  body.baubeschreibung .cta-section {
    background: #EDEDED;
    padding-block: 0 23.3px;
  }
  body.baubeschreibung .cta-heading {
    min-height: 118px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: 0;
    text-align: center;
  }
  body.baubeschreibung .cta-heading .section-banner {
    font-family: "Lato", Arial, sans-serif;
    font-size: 45.33px;
    color: rgb(8,94,16); /* B-009: reference grass green */
    letter-spacing: 0.5px; /* B-009: reach ~741px reference measure */
    margin-bottom: 0;
  }
  body.baubeschreibung .cta-intro {
    max-width: none;
    min-height: 190px;
    margin-top: 12.6px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
  body.baubeschreibung .cta-intro p {
    font-family: "Lato", Arial, sans-serif;
    font-size: 24px;
    line-height: 33.6px;
    color: rgb(67,67,67); /* ctafix: ref intro copy rgb(67,67,67), was neutral-700 */
    max-width: none;
  }
  body.baubeschreibung .cta-intro p + p { margin-top: 24px; }
  body.baubeschreibung .cta-intro a { color: rgb(67,67,67); } /* ctafix: ref phone rgb(67,67,67) */
  body.baubeschreibung .cta-intro a:hover { color: var(--color-neutral-900); text-decoration: underline; }
  body.baubeschreibung .cta-panel {
    border-radius: 0;
    background: linear-gradient(180deg, rgb(57,64,39) 0%, rgb(56,64,38) 100%);
    padding: 24px 44px 24px 56px;
    min-height: 480px;
    margin-top: 12.4px;
    margin-bottom: 0;
    grid-template-rows: 1fr auto;
    grid-template-columns: 47fr 53fr;
    gap: var(--space-4) var(--space-12);
  }
}
@media (min-width: 1024px) {
  body.baubeschreibung .cta-panel { position: relative; grid-template-columns: 467fr 527fr; }
  body.baubeschreibung .cta-panel::before {
    content: "";
    position: absolute;
    left: 535px;
    top: 30px;
    bottom: 112px;
    width: 1px;
    background: var(--color-onDarkDivider);
  }
  body.baubeschreibung .form__label {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }
  body.baubeschreibung .form__input,
  body.baubeschreibung .form__select { min-height: 55px; padding: 10px 12px; }
  body.baubeschreibung .form__textarea { height: 112px; min-height: 0; }
  body.baubeschreibung .form__submit {
    min-height: 56px;
    margin-top: 0;
    color: var(--color-white);
  }
  body.baubeschreibung .form__submit:hover { color: var(--color-white); }
}
@media (max-width: 1023px) {
  body.baubeschreibung .cta-panel { grid-template-columns: 1fr; }
}
body.baubeschreibung .cta-panel { position: relative; }
/* Desktop-only L-030 positioning; <1024px uses shared base (index look) */
@media (min-width: 1024px) {
body.baubeschreibung .cta-panel__meta {
  margin-left: -56px;
  margin-right: -44px;
  padding-inline: 56px;
  padding-top: 31px;
  justify-content: flex-start;
  gap: 0;
}
body.baubeschreibung .cta-panel__meta-item:first-child { margin-right: auto; }
body.baubeschreibung .cta-panel__meta a + a {
  border-left: 1px solid var(--color-onDarkDivider);
  margin-left: 167px;
  padding-left: 32px;
}
}
/* ctafix + mobile-unification: desktop-only padding; <1024px shared base */
@media (min-width: 1024px) {
  body.baubeschreibung .cta-panel__left { padding-top: 22px; }
}
body.baubeschreibung .cta-lockup { margin-bottom: 17px; margin-right: 48px; }
body.baubeschreibung .cta-lockup__top,
body.baubeschreibung .cta-lockup__sub {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px; /* B-011: reference small-label metrics (~148px glyph run) */
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-white);
}
body.baubeschreibung .cta-lockup__sub {
  /* ctafix: ref ZUM FESTPREIS ink w243 sage rgb(134,148,99); was #8FA860 + 0.12em (w204) */
  letter-spacing: 0.21em;
  color: rgb(134, 148, 99);
} /* B-011: muted sage subtitle */
body.baubeschreibung .cta-lockup__top::before,
body.baubeschreibung .cta-lockup__top::after,
body.baubeschreibung .cta-lockup__sub::before,
body.baubeschreibung .cta-lockup__sub::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-onDarkDivider);
}
body.baubeschreibung .cta-lockup__main {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 76px;
  text-transform: uppercase;
  color: var(--color-white);
  line-height: 1.1;
  text-align: center;
  margin: 2px 0; /* B-011: reference main-title ink y=4434 */
  letter-spacing: 1px; /* B-011: reference ~413px glyph run */
  white-space: nowrap;
}
/* Desktop-only L-028 positioning; <1024px uses shared base (index look) */
@media (min-width: 1024px) {
body.baubeschreibung .cta-panel__contact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 64px;
}
body.baubeschreibung .cta-panel__brand { flex: none; }
body.baubeschreibung .cta-panel__brand img { height: 64px; width: auto; }
}
/* Phone-cta parity with index (body.home): desktop-only positioning below;
   below 1024px the base glassy-box style applies (see leistungen note). */
@media (min-width: 1024px) {
  body.baubeschreibung .phone-cta { background: transparent; padding: 0; white-space: nowrap; margin-right: 40px; }
  body.baubeschreibung .phone-cta__icon { background: var(--color-white); }
}
body.baubeschreibung .form__select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
body.baubeschreibung .form { gap: 12px; }
body.baubeschreibung .cta-panel__form-heading {
  font-family: "Lato", Arial, sans-serif;
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.04em;
  margin-bottom: 19px;
}
@media (min-width: 640px) {
  body.baubeschreibung .form__row {
    grid-template-columns: 266px minmax(0, 1fr);
    column-gap: 12px;
  }
}

/* --- B-007: compact white footer (~78px, centered legal row with pipes) --- */
@media (min-width: 768px) {
  body.baubeschreibung .site-footer { background: var(--color-white); padding-block: 0; }
  body.baubeschreibung .site-footer__inner,
  body.baubeschreibung .site-footer__divider { display: none; }
  body.baubeschreibung .site-footer__bottom {
    min-height: 78px;
    padding-block: var(--space-4);
    justify-content: center;
    color: var(--color-neutral-900);
    font-size: 10px; /* B-012: reference legal-row metrics (~343px run) */
  }
  body.baubeschreibung .site-footer__legal { gap: 9px; }
  body.baubeschreibung .site-footer__legal a { color: var(--color-neutral-900); }
  body.baubeschreibung .site-footer__legal a::before { content: "|"; margin-right: 9px; }
  body.baubeschreibung .site-footer__legal a:hover { color: var(--color-primary); text-decoration: underline; }
}










/* ===== referenzen page-scoped block (round 1 merged + round 2 re-merge) ===== */
/* =====================================================================
   Referenzen — reference-matched composition (review RF-001..RF-006)
   ALL rules scoped to body.referenzen — passed pages untouched
   (Startseite=body.home, Leistungen=body.leistungen, Dein Haus=body.dein-haus,
   Baubeschreibung=body.baubeschreibung). Values copied from the proven
   baubeschreibung/dein-haus blocks in styles.css.
   Reference anchors (1440px): header 56; title glyphs y=99..132;
   gallery rows y=298..613 / 669..985; gray band y=1131..1966;
   panel y=1464 h=478; footer y=1966..2044 (78px); body 2044.
   ===================================================================== */

/* --- RF-003: content boundary 1154px (x=143..1297 @1440) --- */
@media (min-width: 1024px) {
  body.referenzen .container { max-width: 1202px; padding-inline: 24px; }
}

/* --- RF-002: 56px static white header, logo 141x56 at x=16, Lato 16px nav,
      reference order, search far right --- */
@media (min-width: 768px) {
  body.referenzen .site-header {
    position: static;
    height: 56px;
    background: var(--color-white);
  }
  body.referenzen .site-header__inner { max-width: none; padding: 0 16px; }
  body.referenzen .nav { gap: 21.1px; }
  body.referenzen .nav__link {
    font-family: "Lato", Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: var(--color-neutral-700);
  }
  body.referenzen .nav__link:hover { color: var(--color-accent); }
  body.referenzen .nav__link[aria-current="page"] {
    color: var(--color-neutral-900);
    font-weight: 700;
  }
  body.referenzen .nav__link[aria-current="page"]::after { transform: scaleX(0); }
}

/* --- RF-005: no floating back-to-top control on Referenzen (page-scoped) --- */
body.referenzen .back-to-top,
body.referenzen .back-to-top.is-visible { display: none; }

/* --- RF-001/RF-006: opening region — title glyphs y≈99..132 (232x33),
      vivid green; intro is mockup (design intent) --- */
@media (min-width: 768px) {
  body.referenzen #top {
    padding-top: 32.3px;
    padding-bottom: 0;
  }
  body.referenzen .page-title {
    font-family: "Lato", Arial, sans-serif;
    font-size: 46px;
    line-height: 54.4px;
    font-weight: 700; /* RF-010: ink 233x34 at y≈98 (canvas-verified 46px/700/0.2ls) */
    letter-spacing: 0.2px;
    color: rgb(8,94,16); /* RF-006: vivid reference green */
  }
  body.referenzen .referenzen-intro {
    font-family: "Lato", Arial, sans-serif;
    font-size: 20px;
    line-height: 28px;
    color: var(--color-neutral-700);
    margin-top: 16px;
  }
}

/* --- RF-003: gallery — 1154px boundary, 562px cols, 30px col gap,
      56px row gap, ~16:9 media, figure margins reset ---
      row1 y=298: #galerie padding-top = 298 - (56+32.3+54.4+16+28) = 111.3;
      gray band starts y=1131: padding-bottom = 1131 - 986.2 = 144.8 --- */
@media (min-width: 768px) {
  body.referenzen #galerie {
    padding-top: 111.3px;
    padding-bottom: 144.8px;
  }
  body.referenzen .gallery--refs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 30px;
    row-gap: 56px;
  }
  body.referenzen .gallery__tile { margin: 0; }
  body.referenzen .gallery--refs .gallery__media {
    aspect-ratio: 16 / 9;
    background: var(--color-neutral-200);
    border-radius: 0; /* RF-009: reference slots are square-cornered */
  }
}

/* --- RF-001/RF-004/RF-006: gray CTA band AFTER the gallery (y=1131..1966):
      118px heading band + 190px intro + 12.4 gap + 478 panel + 24 bottom --- */
@media (min-width: 768px) {
  body.referenzen .cta-section {
    background: #EDEDED;
    padding-top: 0;
    padding-bottom: 24px; /* RF-007: bottom breathing painted as gray section surface (margin collapsed through before) */
  }
  body.referenzen .cta-heading {
    min-height: 118px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: 0;
    text-align: center;
  }
  body.referenzen .cta-heading .section-banner {
    font-family: "Lato", Arial, sans-serif;
    font-size: 45.33px;
    line-height: 1.2;
    text-transform: uppercase;
    color: rgb(8,94,16); /* RF-006: vivid reference green */
    letter-spacing: 0.5px;
    margin-bottom: 0;
  }
  body.referenzen .cta-intro {
    max-width: none;
    min-height: 190px;
    margin-top: 12.6px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
  body.referenzen .cta-intro p {
    font-family: "Lato", Arial, sans-serif;
    font-size: 24px;
    line-height: 33.6px;
    color: var(--color-neutral-700);
    max-width: none;
  }
  body.referenzen .cta-intro p + p { margin-top: 24px; }
  body.referenzen .cta-intro a { color: var(--color-neutral-700); }
  body.referenzen .cta-intro a:hover { color: var(--color-neutral-900); text-decoration: underline; }

  /* RF-004: 1154x478 dark olive panel, square corners */
  body.referenzen .cta-panel {
    border-radius: 0;
    background: linear-gradient(180deg, rgb(57,64,39) 0%, rgb(56,64,38) 100%);
    padding: 24px 44px 24px 56px;
    padding-bottom: 18.2px; /* RF-011: meta text ink y≈1905 (meta is bottom-anchored, padding-bottom sets its distance) */
    min-height: 478px;
    margin-top: 12.4px;
    margin-bottom: 0; /* RF-007: spacing moved into section padding-bottom */
    grid-template-rows: 1fr auto;
    grid-template-columns: 47fr 53fr;
    gap: var(--space-4) var(--space-12);
  }
}
@media (min-width: 1024px) {
  /* RF-011: minmax(0,…) — nowrap lockup min-content inflated the fr track;
     explicit 472px left track puts right column at x=719 and divider gap per ref */
  body.referenzen .cta-panel { position: relative; grid-template-columns: minmax(0, 472px) minmax(0, 1fr); }
  body.referenzen .cta-panel::before {
    content: "";
    position: absolute;
    left: 535px;
    top: 30px;
    bottom: 70px; /* RF-011: divider bottom endpoint y=1872 (ref raster-verified) */
    width: 1px;
    background: var(--color-onDarkDivider);
  }
  /* sr-only form labels */
  body.referenzen .form__label {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }
  body.referenzen .form__input,
  body.referenzen .form__select { min-height: 55px; padding: 10px 12px; }
  body.referenzen .form__textarea { height: 112px; min-height: 0; }
  body.referenzen .form__submit {
    min-height: 55px; /* RF-018: ref ends y=1840, -1px */
    margin-top: 0;
    color: var(--color-white);
    background: rgb(130, 146, 94); /* RF-018: muted sage, ref ≈rgb(128-134,142-150,91-97) */
  }
  body.referenzen .form__submit:hover { color: var(--color-white); }
}
@media (max-width: 1023px) {
  body.referenzen .cta-panel { grid-template-columns: 1fr; }
}
body.referenzen .cta-panel { position: relative; }
/* Desktop-only L-030 positioning; <1024px uses shared base (index look) */
@media (min-width: 1024px) {
body.referenzen .cta-panel__meta {
  margin-left: -56px;
  margin-right: -44px;
  padding-inline: 56px;
  padding-top: 37px; /* RF-011: meta text ink y≈1905 (ref 1905..1919) */
  justify-content: flex-start;
  gap: 0;
}
body.referenzen .cta-panel__meta-item:first-child { margin-right: auto; }
body.referenzen .cta-panel__meta a + a {
  border-left: 1px solid var(--color-onDarkDivider);
  margin-left: 167px;
  padding-left: 32px;
}
}
/* ctafix + mobile-unification: desktop-only padding; <1024px shared base */
@media (min-width: 1024px) {
  body.referenzen .cta-panel__left { padding-top: 22px; }
}
body.referenzen .cta-lockup { margin-bottom: 17px; margin-right: 65px; } /* RF-011: top line ink center x≈401 (track 472) */
body.referenzen .cta-lockup__top,
body.referenzen .cta-lockup__sub {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-white);
}
body.referenzen .cta-lockup__sub { color: var(--color-sage); }
body.referenzen .cta-lockup__top::before,
body.referenzen .cta-lockup__top::after,
body.referenzen .cta-lockup__sub::before,
body.referenzen .cta-lockup__sub::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-onDarkDivider);
}
body.referenzen .cta-lockup__main {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 76px;
  text-transform: uppercase;
  color: var(--color-white);
  line-height: 1.1;
  text-align: center;
  margin: 2px 0;
  letter-spacing: 1px;
  white-space: nowrap;
  text-indent: 2px; /* RF-011: overflowing nowrap line is start-aligned in Chrome → indent sets ink start x≈201 */
}
/* Desktop-only L-028 positioning; <1024px uses shared base (index look) */
@media (min-width: 1024px) {
body.referenzen .cta-panel__contact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 64px;
}
body.referenzen .cta-panel__brand { flex: none; }
body.referenzen .cta-panel__brand img { height: 64px; width: auto; }
}
/* Phone-cta parity with index (body.home): desktop-only positioning below;
   below 1024px the base glassy-box style applies (see leistungen note). */
@media (min-width: 1024px) {
  body.referenzen .phone-cta { background: transparent; padding: 0; white-space: nowrap; margin-right: 40px; }
  body.referenzen .phone-cta__icon { background: var(--color-white); }
}
body.referenzen .form__select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
body.referenzen .form { gap: 12px; }
body.referenzen .cta-panel__form-heading {
  font-family: "Lato", Arial, sans-serif;
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.04em;
  margin-bottom: 16px; /* RF-011: form element tops 1528/1595, submit 1786 (ref-exact) */
}
@media (min-width: 640px) {
  body.referenzen .form__row {
    grid-template-columns: 266px minmax(0, 1fr);
    column-gap: 12px;
  }
}

/* --- RF-005: compact white footer (~78px, centered legal row with pipes) --- */
@media (min-width: 768px) {
  body.referenzen .site-footer { background: var(--color-white); padding-block: 0; }
  body.referenzen .site-footer__inner,
  body.referenzen .site-footer__divider { display: none; }
  body.referenzen .site-footer__bottom {
    min-height: 78px;
    padding-block: var(--space-4);
    justify-content: center;
    color: var(--color-neutral-900);
    font-size: 10px;
  }
  body.referenzen .site-footer__legal { gap: 9px; }
  body.referenzen .site-footer__legal a { color: var(--color-neutral-900); }
  body.referenzen .site-footer__legal a::before { content: "|"; margin-right: 9px; }
  body.referenzen .site-footer__legal a:hover { color: var(--color-primary); text-decoration: underline; }
}

/* ===== kontakt page-scoped block (round 1 merged + round 2 re-merge) ===== */
/* =====================================================================
   Kontakt — page-scoped fixes (KT-001..KT-005)
   All rules scoped to body.kontakt / kt-* classes used only by this page.
   Passed pages (body.home / body.leistungen / body.dein-haus /
   body.baubeschreibung) untouched.
   ===================================================================== */

/* --- KT-004: designed content boundary 1154px (x=143..1297 @1440),
      same container treatment as the passed pages --- */
@media (min-width: 1024px) {
  body.kontakt .container { max-width: 1202px; padding-inline: 24px; }
}

/* --- KT-001: 56px static white header, logo ink x=36..147/y=16..42 (KT-007),
      Lato 16px nav, reference order (SpitzDachHaus before Referenzen),
      search far right, dark bold active state without green underline --- */
@media (min-width: 768px) {
  body.kontakt .site-header {
    position: static;
    height: 56px;
    background: var(--color-white);
  }
  body.kontakt .site-header__inner { max-width: none; padding: 0 16px; }
  /* KT-017: label starts ref 651/744/845/942/1086/1218/1323 — flex-row starts
     shift linearly with gap; +1.17px per gap pulls Kontakt +7px right while
     Startseite (first label) stays anchored; search keeps margin-left:auto */
  body.kontakt .nav { gap: 24.1px; }
  /* KT-017: whole-nav shift sits 8.5px left of ref anchors; transform the
     right-edge anchor x≈1423) */
  body.kontakt .nav__link { transform: translateX(8.5px); }
  body.kontakt .nav__link {
    font-family: "Lato", Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: var(--color-neutral-700);
  }
  body.kontakt .nav__link:hover { color: var(--color-accent); }
  body.kontakt .nav__link[aria-current="page"] {
    color: var(--color-neutral-900);
    font-weight: 700;
  }
  body.kontakt .nav__link[aria-current="page"]::after { transform: scaleX(0); }
}

/* --- KT-002: hero band, 284px below the 56px header
      (reference y=56..340), single centered thin white title.
      Now uses the real hero photo (house by lake at sunset, 1584x672)
      with a subtle dark scrim so the white 89px title stays readable. --- */
body.kontakt .kt-hero {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #3E4340;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.32)),
    url('media/hero/hero-kontakt.png');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
body.kontakt .kt-hero__title {
  /* KT-006/KT-015: ref glyph bounds x≈577..867 (ink ≈291 wide), y≈167..230.
     89px Lato 300 + 0.2px tracking widens ink 280→~291; -1px lift puts ink
     top at ≈167 (flex-centered in the 284px band). */
  font-family: "Lato", Arial, sans-serif;
  font-weight: 300;
  font-size: 89px;
  letter-spacing: 0.2px;
  line-height: 1.1;
  color: var(--color-white);
  margin: 0;
  transform: translateY(-1px);
}
@media (min-width: 768px) {
  body.kontakt .kt-hero { min-height: 284px; }
}

/* --- KT-005: established CTA-form conventions (placeholder-led, sr-only
      labels, 55px inputs/select, 112px textarea, 56px white-label submit) --- */
body.kontakt .form { gap: 12px; }
body.kontakt .form__select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
@media (min-width: 640px) {
  body.kontakt .form__input,
  body.kontakt .form__select { min-height: 55px; padding: 10px 12px; }
  body.kontakt .form__textarea { height: 112px; min-height: 0; }
  body.kontakt .form__submit {
    min-height: 56px;
    margin-top: 0;
    color: var(--color-white);
  }
  body.kontakt .form__submit:hover { color: var(--color-white); }
}

/* --- KT-003: compact white footer (~78px, centered legal row with pipes),
      Kontakt-scoped mirror of the passed pages' footer --- */
@media (min-width: 768px) {
  body.kontakt .site-footer { background: var(--color-white); padding-block: 0; }
  body.kontakt .site-footer__inner,
  body.kontakt .site-footer__divider { display: none; }
  body.kontakt .site-footer__bottom {
    min-height: 78px;
    padding-block: var(--space-4);
    justify-content: center;
    color: var(--color-neutral-900);
    font-size: 10px; /* KT-009: reference legal-row metrics, ~344px run (x≈548..892) */
  }
  body.kontakt .site-footer__legal { gap: 9px; }
  body.kontakt .site-footer__legal a { color: var(--color-neutral-900); }
  body.kontakt .site-footer__legal a::before { content: "|"; margin-right: 9px; }
  body.kontakt .site-footer__legal a:hover { color: var(--color-primary); text-decoration: underline; }
}

/* --- KT-003: hide floating back-to-top control on this page --- */
body.kontakt .back-to-top,
body.kontakt .back-to-top.is-visible { display: none; }

/* ===== impressum page-scoped block (round 1 merged + round 2 re-merge) ===== */
/* =====================================================================
   Impressum — reference-matched composition (review, IMP-001..IMP-005)
   ALL overrides scoped to body.impressum — passed pages untouched
   (Startseite body.home, Leistungen body.leistungen, Dein Haus
   body.dein-haus, Baubeschreibung body.baubeschreibung).
   NEW-FILE CHUNK: orchestrator appends serially to styles.css.
   ===================================================================== */

/* --- IMP-003: designed content boundary (IMP-012: reference impressum
      content edge x≈150..151 → container 1188px + 24px padding = 1140px
      content at x=150..1290 @1440) --- */
@media (min-width: 1024px) {
  body.impressum .container { max-width: 1188px; padding-inline: 24px; }
}

/* --- IMP-001: 56px static white header, logo/nav per body.leistungen
      treatment (IMP-009: logo ink ~36..147 x 16..42, search right edge ~1423).
      IMP-009: exact values replicated from the passed body.leistungen block
      (styles.css): inner padding 0 6.5px 0 33px, logo 134x51.6 object-fit:fill
      + top 7.1px, nav gap 22.95px, search svg 20px. --- */
@media (min-width: 768px) {
  body.impressum .site-header {
    position: static;
    height: 56px;
    background: var(--color-white);
  }
  /* IMP-013: reference nav geometry (first link x≈655, gaps ≈28-29, search
     ink right edge ≈1423) implies ~15px Lato links; padding-right 7 puts
     search ink at 1423 */
  body.impressum .site-header__inner { max-width: none; padding: 0 16px; }
  body.impressum .nav { gap: 27.65px; }
  body.impressum .nav__link {
    font-family: "Lato", Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: var(--color-neutral-700);
  }
  body.impressum .nav__link:hover { color: var(--color-accent); }
}

/* --- IMP-002: dark angular legal hero (y=56..340, 284px), large thin white
      centered title, no eyebrow/underline. Now uses the real hero photo
      (same asset/treatment as the kontakt .kt-hero band) with a dark scrim
      so the white title stays readable. --- */
body.impressum .imp-hero {
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 24px;
  background-color: #3E4340;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.32)),
    url('media/hero/hero-kontakt.png');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
body.impressum .imp-hero__title {
  font-family: "Lato", Arial, sans-serif;
  font-weight: 300;
  /* IMP-007/IMP-010: reference ink ~404x76 — 85px rendered ~385x60,
     89px scales to ~403x80 while staying centered (width ratio 404/385 = 1.049) */
  font-size: 89px;
  line-height: 1.1;
  color: var(--color-white);
  text-align: center;
  margin: 0;
}
@media (min-width: 768px) {
  body.impressum .imp-hero { min-height: 284px; }
}

/* IMP-008/IMP-015/IMP-016: top anchors 430 (heading ink) / 509 (first
   subheading ink): 340 + 82 + heading ink offset ~8.2 (34px, lh 1.2) =
   430.2; heading box bottom 462.6 + margin 41 + sub ink offset ~5.3
   (20px, lh 1.25) = 509. Body heading 34px Lato 700 renders ~163px ink
   (33px measured 158px). IMP-016: subheading scale down 22->20, paragraph
   leading 26->25, section/note gaps 16->15 toward reference density. --- */
body.impressum .imp-doc { padding-block: 81px 61px; }
body.impressum .imp-doc__heading {
  font-family: "Lato", Arial, sans-serif;
  font-weight: 700;
  font-size: 34px;
  line-height: 1.2;
  color: #000000;
  margin: 0 0 42px;
}
body.impressum .imp-doc__subheading {
  font-family: "Lato", Arial, sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.25;
  color: #111111;
  margin: 0 0 12px;
}
body.impressum .imp-doc__section + .imp-doc__section { margin-top: 15px; }
/* IMP-014: multi-paragraph groups (USt-ID merged into Kontakt) keep the
   same 15px rhythm as section gaps */
body.impressum .imp-doc__section p + p { margin-top: 15px; }
body.impressum .imp-doc p {
  font-family: "Lato", Arial, sans-serif;
  font-size: 16px;
  line-height: 25px;
  color: #333333;
  margin: 0;
}
body.impressum .imp-doc p a { color: #333333; text-decoration: underline; }
body.impressum .imp-doc p a:hover { color: var(--color-primary); }
body.impressum .imp-doc__note {
  margin-top: 16px;
  font-size: 14px;
  line-height: 22px;
  color: #666666;
}

/* --- IMP-005: compact white footer (~78px, centered legal row with pipes)
      + page-scoped back-to-top suppression (same values as passed pages) --- */
@media (min-width: 768px) {
  body.impressum .site-footer { background: var(--color-white); padding-block: 0; }
  body.impressum .site-footer__inner,
  body.impressum .site-footer__divider { display: none; }
  body.impressum .site-footer__bottom {
    min-height: 78px;
    padding-block: var(--space-4);
    justify-content: center;
    color: var(--color-neutral-900);
    font-size: 10px;
  }
  body.impressum .site-footer__legal { gap: 9px; }
  body.impressum .site-footer__legal a { color: var(--color-neutral-900); }
  body.impressum .site-footer__legal a::before { content: "|"; margin-right: 9px; }
  body.impressum .site-footer__legal a:hover { color: var(--color-primary); text-decoration: underline; }
}
body.impressum .back-to-top,
body.impressum .back-to-top.is-visible { display: none; }

/* ===== datenschutz page-scoped block (round 1 merged + round 2 re-merge) ===== */
/* =====================================================================
   Datenschutz — reference-matched rebuild (DS-001..DS-006).
   ALL overrides scoped to body.datenschutz / ds-* classes used only
   on this page — passed pages (home/leistungen/dein-haus/baubeschreibung)
   are untouched. Approved by orchestrator: chunk appended serially.
   ===================================================================== */

/* DS-006: no floating back-to-top control on Datenschutz (page-scoped) */
body.datenschutz .back-to-top,
body.datenschutz .back-to-top.is-visible { display: none; }

/* DS-005: designed content boundary 1154px (x=143..1297 @1440),
   same container treatment as the passed baubeschreibung/dein-haus pages */
@media (min-width: 1024px) {
  body.datenschutz .container { max-width: 1202px; padding-inline: 24px; }
}

/* DS-002: 56px static white header, logo 141x56 at x=16, Lato 16px nav,
   reference order (SpitzDachHaus before Referenzen), search far right */
@media (min-width: 768px) {
  body.datenschutz .site-header {
    position: static;
    height: 56px;
    background: var(--color-white);
  }
  /* DS-015: proven impressum/leistungen header treatment — logo ink
     target 36..147 x 16..42, search ink right edge ~1423 */
  body.datenschutz .site-header__inner { max-width: none; padding: 0 16px; }
  /* DS-018: 16px Lato links. Reference is self-consistent at 16px with
     gap ≈24; narrow the search affordance 36→28px + left-align the icon
     (svg right stays 1425 → ink ≈1423) so gap 23.6px hits BOTH anchors:
     first link ink ≈x=655 AND search ink right ≈1423. */
  body.datenschutz .nav { gap: 23.6px; }
  body.datenschutz .nav__link {
    font-family: "Lato", Arial, sans-serif;
    font-size: 16px; /* DS-018: reference link scale (was 15px) */
    font-weight: 400;
    color: var(--color-neutral-700);
  }
  body.datenschutz .nav__link:hover { color: var(--color-accent); }
  body.datenschutz .nav__link[aria-current="page"] {
    color: var(--color-neutral-900);
    font-weight: 700;
  }
  body.datenschutz .nav__link[aria-current="page"]::after { transform: scaleX(0); }
}

/* DS-003/DS-007: dark legal hero band below the 56px header (~284px),
   thin white centered title, no eyebrow/underline treatment.
   DS-007: now uses the real hero photo (same asset/treatment as the
   kontakt .kt-hero band) with a dark scrim so the white title stays
   readable. */
body.datenschutz .ds-hero {
  position: relative;
  min-height: 284px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #3E4340;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.32)),
    url('media/hero/hero-kontakt.png');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
body.datenschutz .ds-hero__title {
  position: relative;
  font-family: "Lato", Arial, sans-serif;
  font-weight: 300;
  font-size: 88px; /* DS-008: reference ink ~472px wide / 64px high */
  line-height: 1.1;
  color: var(--color-white);
  text-align: center;
  margin: 0;
}

/* DS-004: compact black legal page heading, left-aligned to the 1154px
   boundary shortly below the hero (document scale, not marketing scale).
   DS-009: reference page heading ink ≈11px → compact 16px scale.
   DS-012: intro paragraph comes BEFORE the title.
   DS-019: opening top padding 34→31px shifts intro/title/first-heading
   inks up 3px to ref anchors 376/434/473; bottom 150 keeps body height
   ~3293 (within ±2% of ref 3348). */
body.datenschutz .ds-doc { padding-block: 31px 150px; }
body.datenschutz .ds-doc__lead {
  font-family: "Lato", Arial, sans-serif;
  font-size: 15px;
  line-height: 21px;
  color: #333333;
  margin: 0;
}
/* DS-014: reference title ink ≈152x14 @ x=152 → 15.2px scale (was 16px/160px
   ink), margin-top 13 (ink y 439→434), margin-bottom 7 (title→h3 gap
   40→25, first heading ink ≈y=474).
   DS-019: margin-left 9→7px moves title ink x=153→151 (ref 151/152). */
body.datenschutz .ds-doc__title {
  font-family: "Lato", Arial, sans-serif;
  font-weight: 700;
  font-size: 15.2px;
  line-height: 22px;
  color: #000000;
  margin: 16px 0 7px 7px;
}

/* DS-001/DS-005: dense longform legal document — headings + paragraphs.
   DS-009: reference line rhythm ≈20px; tighten heading scale + margins. */
body.datenschutz .ds-doc__body {
  font-family: "Lato", Arial, sans-serif;
  font-size: 15px;
  line-height: 21px;
  color: #333333;
}
body.datenschutz .ds-doc__body h3 {
  font-size: 15px;
  line-height: 21px;
  font-weight: 700;
  color: #111111;
  margin: 34px 0 12px;
}
/* DS-016: first numbered heading only — margin 19/8 hits ref anchors
   (ink ≈y=473, 'Allgemeine Hinweise' ≈y=511) without shifting the
   document-wide h3 rhythm. */
body.datenschutz .ds-doc__body h3:first-child {
  margin: 19px 0 4px;
}
/* DS-016: sibling margin collapse means the h3 bottom margin is absorbed
   by the following h4's 22px top margin — pin the first h4 top to 18px
   so 'Allgemeine Hinweise' ink lands ≈y=511. */
body.datenschutz .ds-doc__body h4:first-of-type {
  margin-top: 18px;
}
body.datenschutz .ds-doc__body h4 {
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  color: #111111;
  margin: 22px 0 8px;
}
body.datenschutz .ds-doc__body p { margin: 0 0 14px; }
body.datenschutz .ds-doc__body ul { margin: 0 0 12px; padding-left: 22px; }
body.datenschutz .ds-doc__body li { margin-bottom: 4px; }
body.datenschutz .ds-doc__body a { color: var(--color-primary); text-decoration: underline; }

/* DS-006: compact white footer (~78px, centered legal row with pipes) */
@media (min-width: 768px) {
  body.datenschutz .site-footer { background: var(--color-white); padding-block: 0; }
  body.datenschutz .site-footer__inner,
  body.datenschutz .site-footer__divider { display: none; }
  body.datenschutz .site-footer__bottom {
    min-height: 78px;
    padding-block: var(--space-4);
    justify-content: center;
    color: var(--color-neutral-900);
    font-size: 10px;
  }
  body.datenschutz .site-footer__legal { gap: 9px; }
  body.datenschutz .site-footer__legal a { color: var(--color-neutral-900); }
  body.datenschutz .site-footer__legal a::before { content: "|"; margin-right: 9px; }
  body.datenschutz .site-footer__legal a:hover { color: var(--color-primary); text-decoration: underline; }
}

/* ===== spitzdachhaus page-scoped block (round 1 merged + round 2 re-merge) ===== */
/* =====================================================================
   SpitzDachHaus — reference-matched composition (SP-001..SP-007)
   ALL rules scoped to body.spitzdachhaus or sp-* classes used only by
   spitzdachhaus.html. Passed pages (home/leistungen/dein-haus/
   baubeschreibung) untouched.
   Reference targets: header 56px; hero image 562x704 at x=143, y=80;
   pricing band #EDEDED y=826..1451 (panel 456px + 2 option cards +
   126px meta strip); Ansichten 3 square tiles 365px @30px gaps;
   Zeichnung EG 550px / DG 282px bottom-aligned, labels on top;
   CTA 1154x489 panel in #EDEDED band; compact white 78px footer.
   ===================================================================== */

/* --- SP-007a: hide floating back-to-top on this page (baubeschreibung
       pattern) --- */
body.spitzdachhaus .back-to-top,
body.spitzdachhaus .back-to-top.is-visible { display: none; }

/* --- SP-004: designed content boundary 1154px (x=143..1297 @1440) --- */
@media (min-width: 1024px) {
  body.spitzdachhaus .container { max-width: 1202px; padding-inline: 24px; }
}

/* --- SP-004: 56px static white header, logo 141x56 at x=16, Lato 16px nav,
       reference order (SpitzDachHaus before Referenzen), search far right --- */
@media (min-width: 768px) {
  body.spitzdachhaus .site-header {
    position: static;
    height: 56px;
    background: var(--color-white);
  }
  body.spitzdachhaus .site-header__inner { max-width: none; padding: 0 16px; }
  body.spitzdachhaus .nav { gap: 21.1px; }
  body.spitzdachhaus .nav__link {
    font-family: "Lato", Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: var(--color-neutral-700);
  }
  body.spitzdachhaus .nav__link:hover { color: var(--color-accent); }
  body.spitzdachhaus .nav__link[aria-current="page"] {
    color: var(--color-neutral-900);
    font-weight: 700;
  }
  body.spitzdachhaus .nav__link[aria-current="page"]::after { transform: scaleX(0); }
}

/* --- section headings: title-case Lato green (reference "Ansichten",
       "Zeichnung", ...); CTA heading re-asserts uppercase below --- */
body.spitzdachhaus .section-banner {
  font-family: "Lato", Arial, sans-serif;
  text-transform: none;
  font-size: 40px;
  color: var(--color-primary);
}

/* --- SP-002: hero — image 562x704 left, full reference copy right.
       Band y=56..826: 24px above image, 44px below. --- */
body.spitzdachhaus .sp-hero { padding-block: 24px 44px; }
body.spitzdachhaus .sp-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
body.spitzdachhaus .sp-hero__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
}
body.spitzdachhaus .sp-hero__title {
  font-family: "Lato", Arial, sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 1.1;
  color: var(--color-primary);
  margin: 12px 0 0;
}
body.spitzdachhaus .sp-hero__sub {
  font-family: "Lato", Arial, sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  color: #212121;
  margin: 36px 0 0;
}
body.spitzdachhaus .sp-hero__copy {
  font-family: "Lato", Arial, sans-serif;
  font-size: 25px;
  line-height: 35px;
  color: #333333;
  margin: 22px 0 0;
}
body.spitzdachhaus .sp-hero__copy + .sp-hero__copy { margin-top: 20px; }
@media (min-width: 1024px) {
  body.spitzdachhaus .sp-hero__grid {
    grid-template-columns: 562px minmax(0, 1fr);
    gap: 41px;
  }
  body.spitzdachhaus .sp-hero__media img {
    width: 562px;
    height: 704px;
    object-fit: cover;
  }
  body.spitzdachhaus .sp-hero__body { padding-top: 0; }
}

/* --- SP-001 + SP-003: ONE pricing band — dark Festpreis panel (456px) +
       two white option cards + full-width meta strip. Band y=826..1451
       (50px above, 25px below the 550px component). --- */
@media (min-width: 768px) {
  body.spitzdachhaus #festpreis { background: #EDEDED; padding-block: 50px 25px; }
}
body.spitzdachhaus .sp-pricing {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
body.spitzdachhaus .sp-pricing__panel {
  background: linear-gradient(180deg, #3D5128 0%, #384A24 100%);
  color: var(--color-white);
  padding: 40px 36px 36px;
  display: flex;
  flex-direction: column;
}
body.spitzdachhaus .sp-panel-tag,
body.spitzdachhaus .sp-panel-tagline-top {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-white);
}
body.spitzdachhaus .sp-panel-tag {
  justify-content: center;
  font-size: 18px;
  letter-spacing: 0.12em;
}
body.spitzdachhaus .sp-panel-tag::before,
body.spitzdachhaus .sp-panel-tag::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.35);
}
body.spitzdachhaus .sp-panel-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 44px;
  line-height: 1.1;
  text-align: center;
  margin: 10px 0;
}
body.spitzdachhaus .sp-panel-tagline-top {
  justify-content: center;
  font-size: 20px;
  letter-spacing: 0.1em;
  color: var(--color-sage);
}
body.spitzdachhaus .sp-panel-tagline-top::before,
body.spitzdachhaus .sp-panel-tagline-top::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.35);
}
body.spitzdachhaus .sp-panel-tagline {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 40px;
}
body.spitzdachhaus .sp-panel-tagline svg { flex: none; }
body.spitzdachhaus .sp-panel-tagline p {
  font-family: "Lato", Arial, sans-serif;
  font-size: 17px;
  line-height: 24px;
  margin: 0;
}
body.spitzdachhaus .sp-panel-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
  margin: 28px 0;
}
body.spitzdachhaus .sp-panel-phone {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: auto;
}
body.spitzdachhaus .sp-panel-phone__icon {
  flex: none;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--color-white);
  color: #3D5128;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.spitzdachhaus .sp-panel-phone__label {
  font-family: "Lato", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-sage);
  margin: 0;
}
body.spitzdachhaus .sp-panel-phone__number {
  font-family: "Lato", Arial, sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--color-white);
  text-decoration: none;
  margin: 2px 0;
  display: inline-block;
}
body.spitzdachhaus .sp-panel-phone__sub {
  font-family: "Lato", Arial, sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

body.spitzdachhaus .sp-pricing__options {
  background: var(--color-white);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
body.spitzdachhaus .sp-option {
  padding: 26px 32px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
@media (min-width: 640px) {
  body.spitzdachhaus .sp-pricing__options { grid-template-columns: 1fr 1fr; }
  body.spitzdachhaus .sp-option + .sp-option { border-left: 1px solid #D9D9D9; }
}
body.spitzdachhaus .sp-option__icon { color: #3D5128; display: block; }
body.spitzdachhaus .sp-option__icon svg { display: block; }
body.spitzdachhaus .sp-option__title {
  font-family: "Lato", Arial, sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #212121;
  margin: 18px 0 0;
}
body.spitzdachhaus .sp-option__sub {
  font-family: "Lato", Arial, sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 6px 0 0;
  max-width: 250px;
}
body.spitzdachhaus .sp-option__divider {
  width: 150px;
  height: 1px;
  background: #C9C9C4;
  margin: 16px auto 0;
}
body.spitzdachhaus .sp-option__list {
  list-style: none;
  margin: 18px 0 24px;
  padding: 0;
  text-align: left;
}
body.spitzdachhaus .sp-option__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Lato", Arial, sans-serif;
  font-size: 15px;
  line-height: 26px;
  color: #333333;
}
body.spitzdachhaus .sp-option__list svg { flex: none; color: #3D5128; }
body.spitzdachhaus .sp-option__price {
  margin-top: auto;
  width: 100%;
  max-width: 260px;
  background: #E0E0E0;
  padding: 16px 16px 14px;
}
body.spitzdachhaus .sp-option__price-net {
  font-family: "Lato", Arial, sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: #333333;
  margin: 0;
}
body.spitzdachhaus .sp-option__price-mwst {
  font-family: "Lato", Arial, sans-serif;
  font-size: 14px;
  color: #555550;
  margin: 2px 0 0;
}
body.spitzdachhaus .sp-option__price-divider {
  height: 1px;
  background: #B9B9B4;
  margin: 10px auto;
  width: 70%;
}
body.spitzdachhaus .sp-option__price-gross {
  font-family: "Lato", Arial, sans-serif;
  font-size: 34px;
  font-weight: 700;
  color: #333333;
  margin: 0;
}
body.spitzdachhaus .sp-option__price-note {
  font-family: "Lato", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #333333;
  margin: 4px 0 0;
}

body.spitzdachhaus .sp-pricing__meta {
  grid-column: 1 / -1;
  background: linear-gradient(180deg, #3D5128 0%, #384A24 100%);
  color: var(--color-white);
  min-height: 126px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap; /* wrap onto stacked rows when the meta strip is narrower than left+right groups */
  row-gap: 12px;
  gap: 24px;
  padding: 16px 28px;
}
body.spitzdachhaus .sp-pricing__meta-left,
body.spitzdachhaus .sp-pricing__meta-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
body.spitzdachhaus .sp-pricing__meta-left p {
  font-family: "Lato", Arial, sans-serif;
  font-size: 16px;
  margin: 0;
}
body.spitzdachhaus .sp-pricing__meta-right a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Lato", Arial, sans-serif;
  font-size: 16px;
  color: var(--color-white);
  text-decoration: none;
}
body.spitzdachhaus .sp-pricing__meta-right a:hover { text-decoration: underline; }
body.spitzdachhaus .sp-pricing__meta-sep {
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, 0.35);
  margin: 0 24px;
}
@media (min-width: 1024px) {
  body.spitzdachhaus .sp-pricing { grid-template-columns: 456px minmax(0, 1fr); }
  body.spitzdachhaus .sp-pricing__options { min-height: 424px; }
}

/* --- SP-005: Ansichten — left-aligned heading, left intro, ONE row of
       three square tiles (ref tiles 365px wide, 30px gaps, y=1722..2084) --- */
@media (min-width: 768px) {
  body.spitzdachhaus #ansichten { padding-block: 40px 0; }
}
body.spitzdachhaus #ansichten .section-banner { margin: 0 0 80px; }
body.spitzdachhaus .sp-intro {
  font-family: "Lato", Arial, sans-serif;
  font-size: 21px;
  line-height: 30px;
  color: #333333;
  max-width: none;
  margin: 0 0 62px;
}
body.spitzdachhaus .sp-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 30px;
}
body.spitzdachhaus .sp-gallery .gallery__tile { margin: 0; }
body.spitzdachhaus .sp-gallery .gallery__media {
  aspect-ratio: 1 / 1;
  border-radius: 0;
  overflow: hidden;
}
body.spitzdachhaus .sp-gallery .gallery__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (min-width: 768px) {
  body.spitzdachhaus .sp-gallery { grid-template-columns: repeat(3, 1fr); }
}

/* --- SP-006: Zeichnung — title-case heading, left intro, EG 550px /
       DG 282px bottom-aligned drawings with top-aligned centered labels;
       no gray card chrome --- */
body.spitzdachhaus .sp-zeich__intro {
  font-family: "Lato", Arial, sans-serif;
  font-size: 21px;
  line-height: 30px;
  color: #333333;
  max-width: none;
  margin: 56px 0 0;
}
body.spitzdachhaus .sp-zeich__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 20px;
  margin-top: 64px;
}
body.spitzdachhaus .sp-zeich__label {
  grid-row: 1;
  font-family: "Lato", Arial, sans-serif;
  font-size: 24px;
  color: var(--color-primary);
  text-align: center;
  margin: 0;
}
body.spitzdachhaus .sp-zeich__img {
  grid-row: 2;
  width: 100%;
  height: auto;
  display: block;
  align-self: end;
}
@media (min-width: 1024px) {
  body.spitzdachhaus .sp-zeich__grid {
    grid-template-columns: 550px 282px;
    justify-content: space-between;
    align-items: end;
  }
}

/* --- SP-007: CTA — #EDEDED band, uppercase green heading band (118px),
       centered intro (190px), 1154x489 dark panel (lockup + form + meta
       strip); mirrors the proven Dein Haus composition --- */
@media (min-width: 768px) {
  body.spitzdachhaus .cta-section { background: #EDEDED; padding-block: 0; }
  body.spitzdachhaus .cta-heading {
    min-height: 118px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: 0;
    text-align: center;
  }
  body.spitzdachhaus .cta-heading .section-banner {
    font-family: "Lato", Arial, sans-serif;
    font-size: 45.33px;
    text-transform: uppercase;
    color: rgb(73, 82, 38);
    margin-bottom: 0;
  }
  body.spitzdachhaus .cta-intro {
    max-width: none;
    min-height: 190px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
  body.spitzdachhaus .cta-intro p {
    font-family: "Lato", Arial, sans-serif;
    font-size: 25.33px;
    line-height: 35px;
    color: var(--color-neutral-700);
    max-width: none;
  }
  body.spitzdachhaus .cta-intro p + p { margin-top: 20px; }
  body.spitzdachhaus .cta-intro a { color: var(--color-neutral-700); }
  body.spitzdachhaus .cta-intro a:hover { color: var(--color-neutral-900); text-decoration: underline; }
  body.spitzdachhaus .cta-panel {
    border-radius: 0;
    background: linear-gradient(180deg, rgb(57,64,39) 0%, rgb(56,64,38) 100%);
    padding: 24px 44px 24px 56px;
    min-height: 489px;
    margin-block: 24px;
    grid-template-rows: 1fr auto;
    grid-template-columns: 47fr 53fr;
    gap: var(--space-4) var(--space-12);
  }
}
@media (min-width: 1024px) {
  body.spitzdachhaus .cta-panel { position: relative; grid-template-columns: 467fr 527fr; }
  body.spitzdachhaus .cta-panel::before {
    content: "";
    position: absolute;
    left: 535px;
    top: 30px;
    bottom: 112px;
    width: 1px;
    background: var(--color-onDarkDivider);
  }
  body.spitzdachhaus .form__label {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }
  body.spitzdachhaus .form__input,
  body.spitzdachhaus .form__select { min-height: 55px; padding: 10px 12px; }
  body.spitzdachhaus .form__textarea { height: 112px; min-height: 0; }
  body.spitzdachhaus .form__submit {
    min-height: 56px;
    margin-top: 0;
    color: var(--color-white);
  }
  body.spitzdachhaus .form__submit:hover { color: var(--color-white); }
}
@media (max-width: 1023px) {
  body.spitzdachhaus .cta-panel { grid-template-columns: 1fr; }
}
body.spitzdachhaus .cta-panel { position: relative; }
/* Desktop-only L-030 positioning; <1024px uses shared base (index look) */
@media (min-width: 1024px) {
body.spitzdachhaus .cta-panel__meta {
  margin-left: -56px;
  margin-right: -44px;
  padding-inline: 56px;
  padding-top: 31px;
  justify-content: flex-start;
  gap: 0;
}
body.spitzdachhaus .cta-panel__meta-item:first-child { margin-right: auto; }
body.spitzdachhaus .cta-panel__meta a + a {
  border-left: 1px solid var(--color-onDarkDivider);
  margin-left: 167px;
  padding-left: 32px;
}
}
/* ctafix + mobile-unification: desktop-only padding; <1024px shared base */
@media (min-width: 1024px) {
  body.spitzdachhaus .cta-panel__left { padding-top: 22px; }
}
body.spitzdachhaus .cta-lockup { margin-bottom: 17px; margin-right: 48px; }
body.spitzdachhaus .cta-lockup__top,
body.spitzdachhaus .cta-lockup__sub {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-white);
}
body.spitzdachhaus .cta-lockup__top::before,
body.spitzdachhaus .cta-lockup__top::after,
body.spitzdachhaus .cta-lockup__sub::before,
body.spitzdachhaus .cta-lockup__sub::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-onDarkDivider);
}
body.spitzdachhaus .cta-lockup__main {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 76px;
  text-transform: uppercase;
  color: var(--color-white);
  line-height: 1.1;
  text-align: center;
  margin: var(--space-2) 0;
  white-space: nowrap;
}
/* Desktop-only L-028 positioning; <1024px uses shared base (index look) */
@media (min-width: 1024px) {
body.spitzdachhaus .cta-panel__contact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 64px;
}
body.spitzdachhaus .cta-panel__brand { flex: none; }
body.spitzdachhaus .cta-panel__brand img { height: 64px; width: auto; }
}
/* Phone-cta parity with index (body.home): desktop-only positioning below;
   below 1024px the base glassy-box style applies (see leistungen note). */
@media (min-width: 1024px) {
  body.spitzdachhaus .phone-cta { background: transparent; padding: 0; white-space: nowrap; margin-right: 40px; }
  body.spitzdachhaus .phone-cta__icon { background: var(--color-white); }
}
body.spitzdachhaus .form__select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
body.spitzdachhaus .form { gap: 12px; }
body.spitzdachhaus .cta-panel__form-heading {
  font-family: "Lato", Arial, sans-serif;
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.04em;
  margin-bottom: 19px;
}
@media (min-width: 640px) {
  body.spitzdachhaus .form__row {
    grid-template-columns: 266px minmax(0, 1fr);
    column-gap: 12px;
  }
}

/* --- SP-007b: compact white footer (~78px, centered legal row) --- */
@media (min-width: 768px) {
  body.spitzdachhaus .site-footer { background: var(--color-white); padding-block: 0; }
  body.spitzdachhaus .site-footer__inner,
  body.spitzdachhaus .site-footer__divider { display: none; }
  body.spitzdachhaus .site-footer__bottom {
    min-height: 78px;
    padding-block: var(--space-4);
    justify-content: center;
    color: var(--color-neutral-900);
  }
  body.spitzdachhaus .site-footer__legal { gap: var(--space-3); }
  body.spitzdachhaus .site-footer__legal a { color: var(--color-neutral-900); }
  body.spitzdachhaus .site-footer__legal a::before { content: "|"; margin-right: var(--space-3); }
  body.spitzdachhaus .site-footer__legal a:hover { color: var(--color-primary); text-decoration: underline; }
}

/* =====================================================================
   SP-008..SP-015 round-2 fixes (appended; higher source order wins)
   Forest green #085E10 headings + hero title; pricing band geometry +
   internals; Ansichten order/captions; Zeichnung DG centering; CTA
   copy/wrap; compact 78px footer.
   ===================================================================== */

/* --- SP-008 + SP-011: forest green hero title + section banners --- */
body.spitzdachhaus .sp-hero__title { color: #085E10; }
body.spitzdachhaus .section-banner {
  color: #085E10;
  font-family: "Lato", Arial, sans-serif;
  font-size: 46px;
  font-weight: 700;
  line-height: 1.1;
}
body.spitzdachhaus #ansichten .section-banner,
body.spitzdachhaus #zeichnung .section-banner {
  text-align: left;
  margin-left: 0;
}
@media (min-width: 768px) {
  body.spitzdachhaus .cta-heading .section-banner {
    font-family: "Lato", Arial, sans-serif;
    font-size: 46px;
    font-weight: 700;
    text-transform: uppercase;
    color: #085E10;
    max-width: 741px;
    margin: 0 auto;
  }
}

/* --- SP-009: pricing band geometry — meta strip 126 → 77, tighter option
        row. Band target end y≈1451 (was 1556). --- */
body.spitzdachhaus .sp-pricing__meta {
  min-height: 77px;
  padding: 18px 28px;
}
body.spitzdachhaus .sp-pricing__meta-left,
body.spitzdachhaus .sp-pricing__meta-right { gap: 14px; }
body.spitzdachhaus .sp-pricing__meta-left svg,
body.spitzdachhaus .sp-pricing__meta-right svg { flex: none; }
body.spitzdachhaus .sp-pricing__meta-left p {
  font-size: 15px;
  line-height: 20px;
}
body.spitzdachhaus .sp-pricing__meta-right a {
  font-size: 15px;
  line-height: 20px;
  gap: 10px;
}
body.spitzdachhaus .sp-pricing__meta-sep { height: 18px; margin: 0 14px; }

/* tighter option card to hit ~501px option row */
body.spitzdachhaus .sp-option { padding: 20px 28px 22px; }
body.spitzdachhaus .sp-option__icon svg { width: 42px; height: 42px; }
body.spitzdachhaus .sp-option__title { margin: 12px 0 0; }
body.spitzdachhaus .sp-option__sub { margin: 4px 0 0; }
body.spitzdachhaus .sp-option__divider { margin: 12px auto 0; }
body.spitzdachhaus .sp-option__list { margin: 14px 0 18px; }
body.spitzdachhaus .sp-option__list li { line-height: 24px; font-size: 14.5px; }
/* SP-031: price tiles — pale sage surfaces, content-natural asymmetric
   widths (ref: 263px / 241px), tile height ≈156px (ref y1176..1331) */
body.spitzdachhaus .sp-option__price {
  padding: 9px 20px 4px;
  max-width: none;
  background: #E6E8DE;
}
body.spitzdachhaus .sp-option:first-child .sp-option__price { width: 263px; }
body.spitzdachhaus .sp-option:last-child .sp-option__price { width: 241px; }
body.spitzdachhaus .sp-option__price-net { font-size: 20px; }
body.spitzdachhaus .sp-option__price-mwst { font-size: 13px; margin-top: 0; }
body.spitzdachhaus .sp-option__price-divider { margin: 8px auto; }
body.spitzdachhaus .sp-option__price-gross { font-size: 30px; }

/* --- SP-010: pricing internals — uppercase SPITZDACHHAUS prefix, large
        card name, gross price green, larger panel type, larger icons --- */
body.spitzdachhaus .sp-option__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
body.spitzdachhaus .sp-option__prefix {
  font-family: "Lato", Arial, sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #085E10;
}
body.spitzdachhaus .sp-option__name {
  font-family: "Lato", Arial, sans-serif;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #212121;
  max-width: 280px;
}
body.spitzdachhaus .sp-option__price-gross { color: #085E10; }

/* darker green panel surface + larger type */
body.spitzdachhaus .sp-pricing__panel {
  background: linear-gradient(180deg, #2F4719 0%, #28391A 100%);
}
body.spitzdachhaus .sp-pricing__meta {
  background: linear-gradient(180deg, #2F4719 0%, #28391A 100%);
}
body.spitzdachhaus .sp-panel-tag { font-size: 16px; letter-spacing: 0.14em; }
body.spitzdachhaus .sp-panel-title { font-size: 48px; }
body.spitzdachhaus .sp-panel-tagline-top { font-size: 22px; }
body.spitzdachhaus .sp-panel-tagline svg { width: 30px; height: 30px; }
body.spitzdachhaus .sp-panel-tagline p { font-size: 16px; line-height: 22px; }
body.spitzdachhaus .sp-panel-phone__icon { width: 66px; height: 66px; }
body.spitzdachhaus .sp-panel-phone__icon svg { width: 30px; height: 30px; }
body.spitzdachhaus .sp-panel-phone__number { font-size: 26px; }

/* --- SP-012: Ansichten — intro measure so wrap lands after 'und einer';
        tiles already image-only (captions removed in markup) --- */
body.spitzdachhaus #ansichten .sp-intro {
  max-width: none;
  margin-left: 0;
  margin-right: auto;
  font-size: 19px;
  line-height: 27px;
}

/* --- SP-013: Zeichnung — EG left, DG centered in right half (not flush
        right). EG center ≈ local 282 (abs 425), DG center ≈ local 874
        (abs 1017). --- */
@media (min-width: 1024px) {
  body.spitzdachhaus .sp-zeich__grid {
    grid-template-columns: 550px 282px;
    column-gap: 176px;
    justify-content: start;
    align-items: end;
  }
}

/* --- SP-014: CTA intro — smaller font so p1 wraps after 'Bei uns' --- */
@media (min-width: 768px) {
  body.spitzdachhaus .cta-intro p {
    font-size: 20px;
    line-height: 28px;
    max-width: 970px;
    margin-inline: auto;
  }
  body.spitzdachhaus .cta-intro p + p { margin-top: 16px; }
}

/* --- SP-015: footer — explicit 78px border-box, 11px centered legal --- */
@media (min-width: 768px) {
  body.spitzdachhaus .site-footer {
    height: 78px;
    min-height: 78px;
    padding: 0;
    box-sizing: border-box;
  }
  body.spitzdachhaus .site-footer__bottom {
    height: 78px;
    min-height: 78px;
    padding: 0;
    box-sizing: border-box;
    font-family: "Lato", Arial, sans-serif;
    font-size: 11px;
    line-height: 78px;
    gap: var(--space-3);
  }
  body.spitzdachhaus .site-footer__bottom > span:first-child { line-height: 78px; }
  body.spitzdachhaus .site-footer__legal { gap: var(--space-3); line-height: 78px; }
  body.spitzdachhaus .site-footer__legal a {
    font-size: 11px;
    line-height: 78px;
    color: var(--color-neutral-900);
  }
  body.spitzdachhaus .site-footer__legal a::before { margin-right: var(--space-3); }
}

/* =====================================================================
   SP-016 round-3 fixes (appended; higher source order wins)
   Reference uppercase pricing hierarchy: panel title + option names.
   House artwork refined in spitzdachhaus.html inline SVGs; no geometry
   changes (option cards, prices, meta strip untouched).
   ===================================================================== */
body.spitzdachhaus .sp-panel-title { text-transform: uppercase; }
body.spitzdachhaus .sp-option__name { text-transform: uppercase; }

/* =====================================================================
   SP-019..SP-024 round-4 fixes (appended; higher source order wins)
   ===================================================================== */

/* --- SP-019: option cards extend ~28px ABOVE the dark panel top
        (ref card row ≈501px: top y≈850, bottom stays at meta-strip
        boundary y≈1350). Negative margin is the legitimate layout
        expression here (ref design has cards overhanging the panel). --- */
@media (min-width: 1024px) {
  body.spitzdachhaus .sp-pricing__options {
    min-height: 501px;
    margin-top: -28px;
  }
}

/* --- SP-020: CTA heading single line ≈741px wide (was wrapping at
        max-width 741px because rendered width exceeds the measure) --- */
@media (min-width: 768px) {
  body.spitzdachhaus .cta-heading .section-banner {
    white-space: nowrap;
    max-width: none;
  }
}

/* --- SP-021: Ansichten gallery top y≈1720 (was 1739, −19px total
        heading→intro 80→70, intro→gallery 62→53) --- */
body.spitzdachhaus #ansichten .section-banner { margin: 0 0 70px; }
body.spitzdachhaus #ansichten .sp-intro { margin-bottom: 53px; }

/* --- SP-022: 24px gray #EDEDED breathing below CTA panel before the
        white footer (ref panel ends ≈6716, gray to ≈6740). Section
        padding-bottom instead of panel margin to avoid margin collapse. --- */
@media (min-width: 768px) {
  body.spitzdachhaus .cta-section { padding-block: 0 24px; }
  body.spitzdachhaus .cta-panel { margin-block: 24px 0; }
}

/* --- SP-023: hero title raster → ref ≈398x40 at x=746, y=104
        (was ≈412x42 at x=750, y=101): 46.4px size, 15px top offset,
        −4px left to cancel glyph side bearing --- */
@media (min-width: 1024px) {
  body.spitzdachhaus .sp-hero__title {
    font-size: 46.4px;
    margin: 15px 0 0 -4px;
  }
}

/* --- SP-024: footer legal run ≈344px (was ≈368px): 11→10.3px --- */
@media (min-width: 768px) {
  body.spitzdachhaus .site-footer__bottom,
  body.spitzdachhaus .site-footer__legal a { font-size: 10.3px; }
}

/* =====================================================================
   SP-025..SP-028 round-6 polish (appended; higher source order wins)
   Targets: CTA panel 1154×497, Ansichten/Zeichnung heading inks
   x≈151/152 with gallery top ≈1721, footer legal run ≈345px,
   gallery tiles 365/366/365 @ 29px gaps. Body height stays within
   ±2% of 6818 (panel +8px → ~6731 acceptable).
   ===================================================================== */

/* --- SP-025: CTA panel 489→497px height (ref y=6219..6715). Start
        position unchanged; 24px gray breathing band below kept (SP-022). --- */
@media (min-width: 768px) {
  body.spitzdachhaus .cta-panel { min-height: 497px; }
}

/* --- SP-026: strict heading anchors. Reference inks: Ansichten
        x=151..356, Zeichnung x=152..365 (current 143/144 → +8px left
        inset; padding shifts ink without layout change). Ansichten
        heading ~8px too low: section padding-top 40→32 raises it, and
        banner margin-bottom 70→78 restores the gallery top ≈1721. --- */
@media (min-width: 768px) {
  body.spitzdachhaus #ansichten { padding-top: 32px; }
  body.spitzdachhaus #ansichten .section-banner { margin-bottom: 78px; }
  body.spitzdachhaus #ansichten .section-banner,
  body.spitzdachhaus #zeichnung .section-banner { padding-left: 8px; }
}

/* --- SP-028: gallery gaps 30→29px desktop (ref tiles 365/366/365 @29,
        365+29+366+29+365=1154). Base 30px kept for mobile row spacing. --- */
@media (min-width: 768px) {
  body.spitzdachhaus .sp-gallery { gap: 29px; }
}

/* --- SP-026b: Zeichnung ink one px right of Ansichten (ref x=152 vs 151). --- */
@media (min-width: 768px) {
  body.spitzdachhaus #zeichnung .section-banner { padding-left: 9px; }
}

/* --- SP-027: footer legal run 351→345px (ref x=548..892, centered):
        bottom gap 12→10 (−2) + legal gap 12→10 (−4 over 2 gaps); 78px
        height and pipe separators untouched. --- */
@media (min-width: 768px) {
  body.spitzdachhaus .site-footer__bottom { gap: 10px; }
  body.spitzdachhaus .site-footer__legal { gap: 10px; }
}

/* =====================================================================
   SP-029 round-7 fix (appended; higher source order wins)
   Pricing surfaces too dark/saturated (SP-012 override #2F4719→#28391A
   = rgb(47,71,25)→rgb(40,57,26)). Reference panel surface
   rgb(56-58, 72-73, 38-40) with subtle tonal variation. New lighter
   olive gradient in reference range. CTA panel colors untouched.
   ===================================================================== */
body.spitzdachhaus .sp-pricing__panel {
  background: linear-gradient(180deg, rgb(57, 73, 40) 0%, rgb(56, 72, 39) 100%);
}
body.spitzdachhaus .sp-pricing__meta {
  background: linear-gradient(180deg, rgb(56, 72, 39) 0%, rgb(57, 73, 40) 100%);
}

/* =====================================================================
   SP-032 + SP-033 final polish round (appended; higher source order wins)
   SP-032: option card surfaces near-white rgb(252,253,251); price tile 2
   shifted left ~34px (ref x=969..1209 vs current 1003..1244). Tile 1
   within 2px of ref — untouched. Geometry (501px option row, 77px meta
   strip, tile widths 263/241, #E6E8DE fill, SP-029 surfaces) preserved.
   SP-033: hero copy rhythm — subtitle ink y≈199 (+12), first body line
   y≈249 (−5 via copy margin), line pitch 35→33px, line 7 wraps at
   'gelangt' (letter-spacing tune), paragraph 2 ink y≈562. Hero media
   562×704, title, colors untouched.
   ===================================================================== */

/* --- SP-032: card surface + price tile 2 horizontal placement --- */
body.spitzdachhaus .sp-option { background: rgb(252, 253, 251); }
@media (min-width: 1024px) {
  body.spitzdachhaus .sp-option:last-child .sp-option__price {
    transform: translateX(-34.5px);
  }
}

/* --- SP-033: hero text rhythm --- */
body.spitzdachhaus .sp-hero__sub { margin-top: 48px; }
body.spitzdachhaus .sp-hero__copy {
  margin-top: 17px;
  line-height: 33px;
  letter-spacing: -0.01em;
}
body.spitzdachhaus .sp-hero__copy + .sp-hero__copy { margin-top: 17px; }

/* =====================================================================
   SP-034..SP-036 final polish round (appended; higher source order wins)
   SP-034: header logo + search per PROVEN impressum/datenschutz legal
   header pattern (logo ink 36..146 x 16..42, search ink right 1423):
   inner padding 0 7px 0 33px, logo 137/75.2 fill top 8.8 scaleY(1.35),
   nav 15px Lato gap 27.65px. 56px height, nav order, active state kept.
   SP-035: pricing internals toward reference scale — option icons ~80px
   tall @ y≈890..969, option name/prefix/features + left-panel lockup
   enlarged. PRESERVED: SP-032 tiles (rgb(230,232,222), 263/241px, tile2
   x≈969..1209), card surfaces rgb(252,253,251), option row 501px @y850,
   meta strip 77px @y1351, SP-029 olive surfaces, prices untouched.
   SP-036: hero subtitle/body — darken (sub #111, body #000), subtitle
   ink widened to ≈343px (letter-spacing), right-column text −4px left.
   PRESERVED SP-033 anchors: subtitle y≈199, body line1 y≈249, pitch 33,
   'gelangt' wrap line 7, p2 y≈562 (shift changes x only, width unchanged
   → wrap intact).
   ===================================================================== */

/* --- SP-034: header nav/search per impressum pattern --- */
@media (min-width: 768px) {
  body.spitzdachhaus .site-header__inner { max-width: none; padding: 0 16px; }
  body.spitzdachhaus .nav { gap: 19px; }
  body.spitzdachhaus .nav__link { font-size: 15px; }
}

/* --- SP-035a: option internals toward reference scale --- */
@media (min-width: 1024px) {
  body.spitzdachhaus .sp-option { padding-top: 40px; }
}
body.spitzdachhaus .sp-option__icon svg { width: 80px; height: 80px; }
body.spitzdachhaus .sp-option__title { margin-top: 8px; gap: 4px; }
body.spitzdachhaus .sp-option__prefix { font-size: 14px; }
body.spitzdachhaus .sp-option__name { font-size: 20px; }
body.spitzdachhaus .sp-option__sub { font-size: 17px; margin-top: 2px; }
body.spitzdachhaus .sp-option__list li { font-size: 15.5px; }
body.spitzdachhaus .sp-option__list { margin: 10px 0 8px; }
body.spitzdachhaus .sp-option__divider { margin: 8px auto 0; }

/* --- SP-035b: left panel lockup scale-up --- */
body.spitzdachhaus .sp-panel-tag { font-size: 19px; }
/* V-003 (mobile review it.3): 50px nowrap is a desktop-tuned size — scoped
   to ≥768px so the title wraps at the base 48px size on mobile instead of
   clipping ("ZUM FESTP...") past the viewport edge. */
@media (min-width: 768px) {
  body.spitzdachhaus .sp-panel-title { font-size: 50px; white-space: nowrap; }
}
body.spitzdachhaus .sp-panel-tagline-top { font-size: 24px; }
body.spitzdachhaus .sp-panel-tagline p { font-size: 17px; line-height: 23px; }
body.spitzdachhaus .sp-panel-phone__icon { width: 72px; height: 72px; }
body.spitzdachhaus .sp-panel-phone__icon svg { width: 32px; height: 32px; }
body.spitzdachhaus .sp-panel-phone__number { font-size: 28px; }
body.spitzdachhaus .sp-panel-phone__sub { font-size: 15px; }

/* --- SP-036: hero text — darken + widen subtitle + 4px left shift.
     margin-right compensates the negative left margin so the text box
     keeps its 551px width (wrap points, incl. 'gelangt' line 7, intact). --- */
@media (min-width: 1024px) {
  body.spitzdachhaus .sp-hero__sub {
    margin-left: -4px;
    margin-right: 4px;
    letter-spacing: 0.05em;
  }
  body.spitzdachhaus .sp-hero__copy { margin-left: -4px; margin-right: 4px; }
}
body.spitzdachhaus .sp-hero__sub { color: #111111; }
body.spitzdachhaus .sp-hero__copy { color: #000000; }

/* ===== referenzen page-scoped block (final round 1) ===== */
/* RF-002: intro 25.33px Lato, olive rgb(73,82,38), LEFT-aligned,
   block x≈150.8 w≈921.6, ink y214..236 (ref DOM-verified).
   Container content starts x=143 → margin-left 7.8px.
   Ink offset inside 36px line-box ≈ 12.1px → block top 201.9 →
   margin-top = 201.9 − (56 + 32.3 + 54.4) = 59.2px. */
@media (min-width: 768px) {
  body.referenzen .referenzen-intro {
    text-align: left;
    width: 921.6px;
    max-width: 100%;
    margin-left: 7.8px;
    margin-top: 63.2px;
    font-size: 25.33px;
    line-height: 36px;
    color: rgb(73, 82, 38);
  }
  /* keep gallery row1 at y=298 after intro block grew:
     298 − (56 + 32.3 + 54.4 + 63.2 + 36) = 56.1 */
  body.referenzen #galerie { padding-top: 56.1px; }
  /* RF-003 + V-R2-001: CTA intro block down +10px (para1 ink y≈1290, phone y≈1381).
     Earlier −9.5px hit was contaminated by parallel-agent injections; clean re-measure showed 10px residual. */
  body.referenzen .cta-intro { margin-top: 0.5px; }
  body.referenzen .cta-intro p + p { margin-top: 19px; }
  /* RF-005 + RF-006: CTA paragraphs rgb(67,67,67), ~36px line pitch */
  body.referenzen .cta-intro p {
    color: rgb(67, 67, 67);
    line-height: 36px;
  }
  /* V-R2-002: phone link same gray as sentence text (was var(--color-neutral-700) = rgb(85,85,80)) */
  body.referenzen .cta-intro a { color: rgb(67, 67, 67); }
  /* RF-003/V-R2-001 comp: panel −10px to offset intro +10px → olive band stays y=1464 */
  body.referenzen .cta-panel { margin-top: 24.5px; }
  /* RF-007: nav fs 15px + gap 29.5px → run 651..1378 (ref 655..1378);
     .nav__search removed (no search affordance in reference) — spacing
     values below apply to nav links only */
  body.referenzen .nav { gap: 29.5px; }
  body.referenzen .nav__link { font-size: 15px; }
}

/* ===== startseite page-scoped block (final round 1) ===== */

/* V-F001: hero accent line "ZUM FESTPREIS." — muted olive (ref rgb(70,76,38)),
   not the vivid green used by WARUM/DER WEG headings (tokens were swapped). */
body.home .hero__title .hero__title-accent { color: #464C26; }

/* V-F012: hero subtext near-black per reference ink rgb(10,10,10). */
body.home .hero__sub { color: #0A0A0A; }

@media (min-width: 768px) {
  /* V-F002: WARUM band heading — vivid green rgb(8,94,16), 46px + -0.01em
     tracking hits ref ink 489..949 (460px) with cap ≈32px; +10px top margin
     puts ink rows at ref 2551..2583 (margin-bottom reduced to keep the
     locked 4689px page height). Copy space fix lives in index.html. */
  body.home #warum-heading {
    color: #085E10;
    font-size: 46px;
    letter-spacing: -0.01em;
    margin: 10px 0 22px;
  }

  /* V-F004: Handwerker heading wraps to 2 lines ("Wir sind gute" /
     "Handwerker."). V-R203: heading green rgb(8,94,16) (base token was
     olive #4E5936), line-height 54px — ref ink pitch is 54 (line-1 ink top
     3037, line-2 3091). The heading's margin-top collapses through the
     paddingless body and .split-2 aligns items center (grid margin shift
     is M/2), so +26px is what lands heading ink on ref 3037 now that the
     body grew by the new para margins. */
  body.home #handwerker-heading {
    max-width: 360px;
    margin-top: 26px;
    color: #085E10;
    line-height: 54px;
  }
  /* V-R203: handwerker body — ref para wraps ("Versprechen" / "unserem" /
     "gemeinsam" line-1 tails at 437.5/450.9/473px, next words land at
     508.1/516/506.2) → measure 490px; para1 ink ref y3170; ref para pitch
     69px (2-line para + gap 27) vs impl 63 → p+p margin 18px. */
  body.home #baubeschreibung .split-2__body p { max-width: 490px; }
  body.home #baubeschreibung .split-2__body > p:first-of-type { margin-top: 19px; }
  body.home #baubeschreibung .split-2__body p + p { margin-top: 18px; }

  /* V-R201: round-1 -78px collided the heading with the eyebrow. Body pulled
      up 34px (body column 260px << media 453px, so row height and the locked
      4689px page height are unaffected). Measured run 1: -15px put heading
      ink at 1275 (11px above ref 1286); -4px lands heading ink top 1286 with
      eyebrow ink 1243..1262 (ref end 1262) — clean 24px gap, no overlap.
      max-width 231px is the only window that reproduces the ref
      wraps: "so individuell wie" measures 230.6px vs "Jedes Zuhause so"
      231.7px (Lato 700 30px), so 235px still fit "so" on line 1. */
  body.home .split-2--family .split-2__heading {
    font-size: 30px;
    line-height: 36px;
    margin-top: -4px;
    max-width: 231px;
  }
  body.home .split-2--family .split-2__body { margin-top: -57px; } /* .split-2 aligns items center → grid margin shift is M/2; -57px lands eyebrow ink 1243..1262 (ref end 1262) + heading 1286 after the -4px heading margin (run 2 measured eyebrow 1237.7/heading 1280.5 with -68) */
}

@media (min-width: 1024px) {
  /* V-F006: pricing left panel top block — "ab"/figure ink anchored on ref
     (ab ≈718, figure ink 754..802 vs ref 755..820); tagline ink lands on
     ref y≈855 (margin-top 37px, measured). */
  body.home .pricing__baseline { margin-top: 30px; }
  body.home .pricing__tagline { margin-top: 37px; }

  /* V-F007: pricing tiles — title top-aligned with the icon top (ref title
     ink y≈662), "inklusive" directly under the title inside the icon's
     vertical span, description measure narrowed per reference wrap points
     ("Solide Basis / für Ihr Zuhause.",
     "Komplett installiert und / geprüft.",
     "Hochwertig. Sicher. / Energiesparend."). Icon pulled out of flow so the
     text column (title → inklusive → desc) starts at the tile top; 76px left
     padding aligns text at x≈634 (icon 64 + 12 gap). */
  body.home .pricing__item { padding-top: 17px; }
  body.home .pricing__item-head { display: block; position: relative; }
  body.home .pricing__item-icon { position: absolute; left: 0; top: 0; }
  body.home .pricing__item-label { display: block; padding-left: 68px; line-height: 22px; }
  body.home .pricing__item-inclusive { display: block; padding-left: 68px; margin-top: 4px; }
  body.home .pricing__item-desc { padding-left: 68px; max-width: none; }
  /* V-R202: per-tile description measures. The desc has padding-left 76px
      and border-box sizing, so effective text width = max-width - 76.
      Tile texts: 1 Solide / 2 Effizient / 3 Komfort / 4 Komplett /
      5 Hochwertig — the round-1 overrides sat on 1/4/5, but V-R202 flags
      the wraps of tiles 2 and 3, which had no measure. Ref-exact wraps:
      tile2 needs text width in [106.9, 159.9) ("Zukunft sichern." fits,
      "Effizient heizen. Zukunft" doesn't) → 196px. Tiles 1 and 3 are
      metric-impossible with our Lato (ref break requires a line-2 string
      wider than the line-1 string that must break: "für Ihr Zuhause."
      103.8 vs "Solide Basis für" 99.6; "der inklusive ist." 105.1 vs
      "Komfort, der" 84) — 178/200px keep the 2-line counts with the
      closest achievable breaks. */
  body.home .pricing__item:nth-child(1) .pricing__item-desc { max-width: 170px; }
  body.home .pricing__item:nth-child(2) .pricing__item-desc { max-width: 188px; }
  body.home .pricing__item:nth-child(3) .pricing__item-desc { max-width: 192px; }
  body.home .pricing__item:nth-child(4) .pricing__item-desc { max-width: 237px; }
  body.home .pricing__item:nth-child(5) .pricing__item-desc { max-width: 212px; }

  /* V-F003: process row — icon-left layout per reference: olive-ringed ~60px
     circle left with green glyph, number above label to its right, thin
     vertical divider lines between items. Horizontal connector + in-circle
     number removed; step numbers re-created with a CSS counter. Bottom
     padding raised 87→135px: the icon-left step is ~50px shorter than the
     old stacked layout, and this restores the locked 4689px page height
     (process band content: ring ≈3569..3629, desc bottom ≈3649 vs ref
     rows 3555..3645). */
  body.home .home-process { padding-block: 88px 120px; }
  body.home .process { counter-reset: step; gap: 0; }
  body.home .process__step {
    counter-increment: step;
    text-align: left;
    display: grid;
    grid-template-columns: 60px 1fr;
    column-gap: 14px;
    padding: 14px 18px 0;
    border-left: 1px solid var(--color-neutral-300);
  }
  body.home .process__step:first-child { border-left: none; padding-left: 0; column-gap: 8px; }
  body.home .process__step::before { display: none; }
  body.home .process__badge {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    width: 60px;
    height: 60px;
    border-color: #464C26;
    background: transparent;
    margin: 0;
  }
  body.home .process__badge svg { color: #085E10; width: 36px; height: 36px; }
  body.home .process__num { display: none; }
  body.home .process__title {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
  }
  body.home .process__title::before {
    content: counter(step, decimal-leading-zero);
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--font-xs);
    letter-spacing: 0.03em;
    color: #085E10;
    margin-bottom: 2px;
  }
  body.home .process__desc {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
  }
}


/* ===== leistungen page-scoped block (final round 1) ===== */
/* L-F01: intro copy matches reference raster — 25px/35px, rgb(67,67,67),
   full 1138px measure centered in the 1154px container (x151..1289), 4 lines;
   first ink line ≈y744 (ref 744) — 64px margin-top collapses with the
   title's 22px margin-bottom to a 64px title→copy gap; intro padding-bottom
   48→34 keeps the 324px band so row positions are unchanged */
body.leistungen .le-intro {
  padding-block: 32px 34px;
}
body.leistungen .le-intro__copy {
  font-size: 25px;
  line-height: 35px;
  color: rgb(67,67,67);
  max-width: 1138px;
  margin-top: 64px;
}
/* L-F02: optional-row body copy — same 24px/40px style as non-lead main-row
   bodies; identical copy lengths wrap to 4 lines */
body.leistungen .le-opt__body p {
  font-size: 24px;
  line-height: 40px;
}
/* L-F03: optional-row headings — 45.33px/54.4px like main-row titles;
   olive rgb(73,82,38) already correct */
body.leistungen .le-opt__title {
  font-size: 45.33px;
  line-height: 54.4px;
}
/* L-F04: pull optional rows up (~47px) by dropping the heading's bottom
   padding, and restore the ~318px reference row pitch via row min-height
   (media is ~260px so text stays the taller column after L-F02/L-F03) */
body.leistungen .le-optional__heading { padding-block: 44px 0; }
body.leistungen .le-opt { min-height: 320px; }
/* L-F05: CTA intro paragraphs (incl. "Rufen Sie uns an..." subline) use the
   reference rgb(67,67,67) instead of --color-neutral-700 #555550 */
body.leistungen .cta-intro p { color: rgb(67,67,67); }

/* ===== dein-haus page-scoped block (final round 1) =====
   Fixes DH-F01..DH-F04 from _checks/review/final-review-dein-haus.md
   (2026-09-02). Scope: body.dein-haus only — no shared-rule edits. */

/* --- DH-F02: intro title centered, green rgb(8,94,16)
       (ref ink x230.6 y617 w978.8, centered on 720) --- */
body.dein-haus .dh-intro__title {
  text-align: center;
  color: rgb(8,94,16);
}

/* --- DH-F03: intro paragraph centered, rgb(67,67,67), measure 1128.7
       (ref x155.7 y750.4 w1128.7 ta:center) --- */
body.dein-haus .dh-intro__copy {
  text-align: center;
  color: rgb(67,67,67);
  max-width: 1128.7px;
  margin-left: auto;
  margin-right: auto;
}

/* --- DH-F01/DH-F04: vision = single centered text block, no photo card.
        Band stays 448px (ref pricing-end y≈4794 → CTA y≈5241). Explicit
        padding (not flex-center) top-anchors content: section top 4793.4
        + padding 97 (DH-R2-02 +12px) + Lato cap-top offset ≈ ink 4904.9
        (ref title ink 4904..4936). --- */
@media (min-width: 768px) {
  body.dein-haus .dh-vision {
    display: block;
    min-height: 448px;
    padding-top: 97px;
    padding-bottom: 0;
  }
}
body.dein-haus .dh-vision__body { text-align: center; }
body.dein-haus .dh-vision__heading {
  font-family: "Lato", Arial, sans-serif;
  font-weight: 700;
  font-size: 45.33px;
  line-height: 55px;
  color: rgb(8,94,16);
  text-align: center;
  margin: 0;
}
/* --- DH-R2-01: vision paragraph ~25px/34px near-black wide centered measure
        (ref ink lines y5037/5073/5106, line1 x182..1258; margin-top tuned so
        first ink lands y≈5037: title box bottom 4945.4 + 83 ≈ box 5028.4) --- */
body.dein-haus .dh-vision__copy {
  font-family: "Lato", Arial, sans-serif;
  font-size: 25px;
  line-height: 34px;
  color: rgb(0,0,0);
  margin: 83px auto 0;
  max-width: 1090px;
  text-align: center;
}

/* ===== baubeschreibung page-scoped block (final round 1) ===== */
/* =====================================================================
   Fixes BB-F01..BB-F06 + BB-F08/F09 from final-review-baubeschreibung.md.
   BB-F07 (footer legal underline) is SKIPPED here — owned by the site-wide
   footer.css chunk (KT-F1/RF-008/BB-F07/IMP-F09).

   Geometry locks (B-008/B-014 review anchors): spec cards y=886.8/1875/2728.4,
   pricing y=3459, CTA panel 4334..4814, footer 4836.6, body 4915 — all preserved.
   Ref ink anchors below measured on final-reference-baubeschreibung.png
   (1440x4915) via pixel scan; ref intro subtitle/section-subtitle y-positions
   live inside the approved tile-card elevation flow and are documented inline.
   ===================================================================== */

@media (min-width: 768px) {
  /* --- BB-F03: intro section background white (ref scan: pure white from
         hero end ~y519 through callout; impl was rgb(244,244,241)) --- */
  body.baubeschreibung #allgemein { background: #fff; }

  /* --- BB-F01: restore visible intro heading block.
         Ref anchors: eyebrow ink 554-564, run ~90px, rgb(33,33,33), "Baubeschreibung";
         title ink 640-682 (42px tall → Lato bold ~44px), run 418-1020 (~602px), rgb(8,94,16); DOM-tuned fs 46 (run 573px @44 → ~599 @46);
         subtitle ink 775-803 (~29px → ~30-32px), single line ~806px; DOM-tuned fs 32 (run 760 @30 → ~811 @32), rgb(73,82,38).
         Impl wrapper top = 560 (eyebrow box). margins tuned so eyebrow box 552,
         title box 634.5, sub box 770, sub end 806; wrapper mb 80.8 keeps
         spec cards at y=886.8 (BB-F02 removes the extra paragraph). --- */
  body.baubeschreibung .bb-intro {
    max-width: 1154px;
    margin: -8px auto 15px;
    text-align: center;
  }
  body.baubeschreibung .bb-intro__title {
    font-family: "Lato", Arial, sans-serif;
    font-weight: 700;
    font-size: 46px;
    line-height: 52px;
    color: rgb(8, 94, 16);
    margin: 82.5px 0 0; /* eyebrow removed (edits3); 67.5 + 15px eyebrow compensation keeps title y */
  }
  body.baubeschreibung .bb-intro__sub {
    font-family: "Lato", Arial, sans-serif;
    font-weight: 400;
    font-size: 32px;
    line-height: 36px;
    color: rgb(73, 82, 38);
    margin: 15px 0 0; /* spacing normalization: title→sub 15px matches #heizung-sanitaer/#elektro */
  }

  /* --- BB-F04: section titles sentence-case green.
         Ref inks: "Heizung & Sanitär" 1817-1858, "Elektro" 2670-2704,
         both rgb(8,94,16) centered ~42px tall → fs 44. Impl title boxes
         (1795/2648.4) are ~17px above ref ink tops — pre-existing approved
         offset, boxes kept so downstream cards/pricing stay locked. --- */
  body.baubeschreibung #heizung-sanitaer .section-banner,
  body.baubeschreibung #elektro .section-banner {
    text-transform: none;
    color: rgb(8, 94, 16);
    font-size: 44px;
    line-height: 48px;
    /* spacing normalization: equal gap after every section title */
    margin-bottom: 15px;
  }

  /* --- BB-F05: add section subtitles.
         Ref inks 1936-1958 / 2786-2807 fall INSIDE the impl tile-card flow
         (cards start 1875/2728.4 — approved elevation), so exact ref y is
         unreachable without breaking the locked pricing anchor y=3459.
         Placed compactly between title and cards; heading-wrapper margin
         re-tuned (32 → 6) so cards do NOT move. fs 21 ≈ ref runs
         (heiz sub 536px, elek sub similar), rgb(33,33,33). --- */
  body.baubeschreibung .bb-sec-sub {
    font-family: "Lato", Arial, sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 26px;
    color: rgb(33, 33, 33);
    text-align: center;
    margin: 0;
  }
  body.baubeschreibung .bb-sec-head { text-align: center; margin-bottom: 15px; }

  /* --- BB-F09: CTA panel meta strip (the "footer dark info row" at y≈4757).
         Ref anchors: house icon x=239 (text ends 601), email icon x=844
         (text 880-1019), phone icon x=1079 (text 1111-1244).
         Layout in ref: house left, [email, phone] group right-aligned;
         email→phone separation 60px (impl had 200). House text fs≈13.5,
         link text fs≈17 (ref runs 339/139/133 vs impl 328/109/101 at 13px).
         padL 56→96 pins house at 239; padR 53 pins group right edge 1244;
         sep 167+32→29+30 (+1 border) = 60. Fine-tuned after DOM measure. --- */
  body.baubeschreibung .cta-panel__meta {
    font-size: 13.5px;
    padding-left: 96px;
    padding-right: 57px;
  }
  body.baubeschreibung .cta-panel__meta a { font-size: 17px; }
  body.baubeschreibung .cta-panel__meta a + a {
    margin-left: 29px;
    padding-left: 30px;
  }
}

/* --- BB-F08: CTA brand lockup. Ref wordmark ink 200..376 (176px) uses
       different SVG artwork (EUER|HAUS thin-HAUS + tagline, no caret) than the
       shared media/brand/logo-euerhaus-white.svg (caret above + EUERHAUS bold
       + tagline) — artwork gap is a site-wide asset limitation, not page CSS.
       Accepted precedent on both passed pages referenzen (96%) and
       spitzdachhaus (96%): .cta-panel__brand img { height: 64px; width: auto; }
       with no transform — same values adopted here for cross-page
       consistency. --- */
/* Duplicate of the BB-F08 brand rule above (now desktop-scoped);
   scoped the same way so mobile falls back to the shared 44px base. */
@media (min-width: 1024px) {
body.baubeschreibung .cta-panel__brand img {
  height: 64px;
  width: auto;
}
}

/* =====================================================================
   SDH-F01..F12 final round 1 (appended; higher source order wins)
   Rebuild the three mid-page sections as plain white left-aligned
   Google-Sites text (~24px); pricing heading colors; DG plan geometry.
   SP-037/SP-038 accepted residuals untouched; pricing geometry
   (501px option row, meta strip, tiles, hero, header) preserved.
   ===================================================================== */

/* --- SDH-F06/F12: section headings left-aligned (ink x≈154 via +8px
        padding on x143 box), regular Lato weight per ref stroke --- */
body.spitzdachhaus .section-banner { font-weight: 400; }
body.spitzdachhaus #features .section-banner,
body.spitzdachhaus #ferienparks .section-banner,
body.spitzdachhaus #vorteile .section-banner {
  text-align: left;
  padding-left: 8px;
}

/* --- SDH-F01: "Modernes Ferienhaus" — 4 stacked full-width blocks,
        bold ~24px heading + ~24px paragraph, no cards/icons/sub-para;
        ref heading→first-block gap 2280..2390 --- */
@media (min-width: 768px) {
  body.spitzdachhaus #features .section-banner { margin-bottom: 104px; }
}
body.spitzdachhaus .sp-features h3 {
  font-family: "Lato", Arial, sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 34px;
  color: #333333;
  margin: 34px 0 8px;
}
body.spitzdachhaus .sp-features h3:first-child { margin-top: 0; }
body.spitzdachhaus .sp-features h3.sp-features__accent { color: rgb(8, 94, 16); }
body.spitzdachhaus .sp-features p {
  font-family: "Lato", Arial, sans-serif;
  font-size: 24px;
  line-height: 34px;
  color: #333333;
  margin: 0;
}

/* --- shared square-bullet list (SDH-F02/F03) --- */
body.spitzdachhaus .sp-sq-list {
  list-style: none;
  margin: 24px 0;
  padding: 0;
}
body.spitzdachhaus .sp-sq-list li {
  display: flex;
  align-items: baseline;
  font-family: "Lato", Arial, sans-serif;
  font-size: 24px;
  line-height: 34px;
  color: #333333;
}
body.spitzdachhaus .sp-sq-list li::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  background: #333333;
  margin-right: 16px;
  transform: translateY(-4px);
}

/* --- SDH-F02: "Perfekt für Ferienparks" — white bg, left intro, square
        bullets full-width, stacked subheads+paragraphs --- */
body.spitzdachhaus .sp-ferien__intro {
  font-family: "Lato", Arial, sans-serif;
  font-size: 24px;
  line-height: 34px;
  color: #333333;
  margin: 56px 0 0;
}
body.spitzdachhaus .sp-ferien__intro--after { margin-top: 48px; }
body.spitzdachhaus .sp-ferien__subhead {
  font-family: "Lato", Arial, sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 34px;
  color: #333333;
  margin: 34px 0 8px;
}
body.spitzdachhaus .sp-ferien__body {
  font-family: "Lato", Arial, sans-serif;
  font-size: 24px;
  line-height: 34px;
  color: #333333;
  margin: 0;
}
@media (min-width: 768px) {
  body.spitzdachhaus #ferienparks .section-banner { margin-bottom: 56px; }
}

/* --- SDH-F03/F05: "Die wichtigsten Vorteile" — bold intro line, 9
        square-bullet items left ~24px no separators, closing paragraph.
        Ref heading ink 5060..5160 = 2 lines (widest ≈791px) → measure
        830px; ref items 5395..5740 → 38px pitch. --- */
@media (min-width: 768px) {
  body.spitzdachhaus #vorteile .section-banner { margin-bottom: 56px; max-width: 830px; }
}
body.spitzdachhaus .sp-vorteile__intro {
  font-family: "Lato", Arial, sans-serif;
  font-size: 24px;
  line-height: 34px;
  color: #333333;
  margin: 60px 0 0;
}
body.spitzdachhaus .sp-vorteile__list { margin: 121px 0 46px; }
body.spitzdachhaus .sp-vorteile__list li { padding-bottom: 4px; }
body.spitzdachhaus .sp-vorteile__closing {
  font-family: "Lato", Arial, sans-serif;
  font-size: 24px;
  line-height: 34px;
  color: #333333;
  margin: 34px 0 0;
}
@media (min-width: 768px) {
  body.spitzdachhaus #vorteile .section-banner { margin-bottom: 56px; }
}

/* --- SDH-F07: pricing tile headings — dark SPITZDACHHAUS prefix, dark
        name, NO third green sub line --- */
body.spitzdachhaus .sp-option__prefix { color: #333333; }
body.spitzdachhaus .sp-option__sub { display: none; }

/* --- SDH-F08: price figures dark olive-charcoal --- */
body.spitzdachhaus .sp-option__price-gross { color: rgb(48, 64, 32); }

/* --- SDH-F09: DG floor plan ~350x415 top-aligned under caption
        (ref x≈810..1160 → EG 550 + gap 117 + DG 350, align start) --- */
@media (min-width: 1024px) {
  body.spitzdachhaus .sp-zeich__grid {
    grid-template-columns: 550px 350px;
    column-gap: 117px;
    align-items: start;
    row-gap: 56px;
  }
  body.spitzdachhaus .sp-zeich__img[alt*="Dachgeschoss"] { align-self: start; }
}

/* --- SDH-F10: CTA lockup subtitle sage-green tint --- */
body.spitzdachhaus .cta-lockup__sub { color: var(--color-sage); }

/* --- SDH-F11: left-panel lockup house icon ~70px; text breaks after
        "in" via markup <br> --- */
body.spitzdachhaus .sp-panel-tagline svg { width: 70px; height: 70px; }

/* ===== impressum page-scoped block (final round 1) ===== */
/* IMP-F01..F08 copy replacement removed USt block + note paragraph; restore
   reference section anchors (ref tops: Kontakt 667, Verantwortlich 768,
   Haftung-Inhalte 920, Haftung-Links 1051, Urheberrecht 1183) and body
   height 1419 (was 1340 = -5.6% after copy replacement). */
/* base margin-top on sections 2..6 is 15px; deltas applied on top of it */
body.impressum .imp-doc__section:nth-of-type(2) { margin-top: 1px; }  /* Kontakt: -14 */
body.impressum .imp-doc__section:nth-of-type(3) { margin-top: 14px; } /* Verantwortlich: -1 */
body.impressum .imp-doc__section:nth-of-type(4) { margin-top: 40px; } /* Haftung für Inhalte: +25 */
body.impressum .imp-doc__section:nth-of-type(5) { margin-top: 44px; } /* Haftung für Links: +29 */
body.impressum .imp-doc__section:nth-of-type(6) { margin-top: 45px; } /* Urheberrecht: +30 */

/* ===== datenschutz page-scoped block (final round 1) ===== */
/* DF-001: systematic +8px content-column shift — body text/paragraphs and
   h3/h4 headings move from x≈143 to x≈151 (ref ink x151-155). Applied on
   the inner .ds-doc__lead/.ds-doc__body blocks, NOT on .ds-doc itself: the
   document wrapper is fit-content centered, so padding there widens it and
   recentring absorbs half the shift (verified +4px in DOM). The doc-title
   keeps its own tuned offset (DS-014/DS-019 margin-left 7px → x≈151) and
   is therefore NOT shifted and needs no compensation. */
body.datenschutz .ds-doc__lead,
body.datenschutz .ds-doc__body { padding-left: 8px; }

/* ===== footer site-wide block (final round 1) ===== */
/* =====================================================================
   Site-wide footer legal-row polish (KT-F1 / RF-008 / BB-F07 / IMP-F09).
   Mockup pattern: legal row 12px Lato; links UNDERLINED rgb(58,66,30);
   plain text rgb(33,33,33); pipe gaps ~4px; row centered; 78px footer
   height and copyright run positions preserved.
   This chunk is the ONLY place allowed to style the SHARED footer.
   Selectors exceed page-scoped block specificity
   (body .site-footer div.site-footer__bottom … = 0,2,2 / 0,3,4)
   so they win over body.<slug> overrides wherever merged.
   ===================================================================== */

body .site-footer div.site-footer__bottom {
  justify-content: center;
  gap: 4px; /* ref: uniform pipe-separated run — copyright→first pipe gap ≈4-6px (ref scan 692→697) */
  font-family: "Lato", Arial, sans-serif;
  font-size: 12px;
  color: rgb(33, 33, 33);
}

body .site-footer div.site-footer__bottom > span:first-child {
  color: rgb(33, 33, 33);
}

body .site-footer div.site-footer__bottom span.site-footer__legal {
  gap: 4px;
}

body .site-footer div.site-footer__bottom span.site-footer__legal a {
  font-size: 12px; /* explicit: beats body.spitzdachhaus direct 10.3px/11px link overrides */
  color: rgb(58, 66, 30);
  text-decoration: underline;
  text-underline-offset: 1px;
}

body .site-footer div.site-footer__bottom span.site-footer__legal a::before {
  content: "|";
  margin-right: 4px;
  color: rgb(58, 66, 30);
}

body .site-footer div.site-footer__bottom span.site-footer__legal a:hover {
  color: rgb(58, 66, 30);
  text-decoration: underline;
}
/* ===== spitzdachhaus page-scoped block (final round 2: SDH-R01..R05) ===== */

/* SDH-R01: re-anchor mid-page banners (ref y 2246 / 3136 / 4204, Vorteile 5113).
   Gallery→Modernes whitespace 73px vs ref ~162px → +89 before #features. */
body.spitzdachhaus #features { padding-top: 153px; }   /* 64 + 89 */
body.spitzdachhaus #zeichnung { padding-bottom: 43px; } /* -21 → ferienparks banner y4204 */
body.spitzdachhaus #ferienparks .section-banner { margin-bottom: 30px; }
body.spitzdachhaus .sp-ferien__intro { margin-top: 30px; }
body.spitzdachhaus .sp-ferien__intro--after { margin-top: 24px; }
body.spitzdachhaus #ferienparks .sp-sq-list { margin: 12px 0; }
body.spitzdachhaus .sp-ferien__subhead { margin-top: 20px; }
body.spitzdachhaus #ferienparks { padding-bottom: 34px; } /* final trim → Vorteile banner y5113 */

/* SDH-R02: square-bullet list pitch 34/38 → 49-50px per reference */
body.spitzdachhaus .sp-sq-list li { margin-bottom: 15px; }
body.spitzdachhaus .sp-sq-list li:last-child { margin-bottom: 0; }
body.spitzdachhaus .sp-vorteile__list li { margin-bottom: 11px; }
body.spitzdachhaus .sp-vorteile__list li:last-child { margin-bottom: 0; }

/* SDH-R02 compensation: keep CTA panel at ref y6219 with taller lists */
body.spitzdachhaus #vorteile .section-banner { margin-bottom: 44px; }
body.spitzdachhaus .sp-vorteile__intro { margin-top: 44px; }
body.spitzdachhaus .sp-vorteile__list { margin: 89px 0 10px; }
body.spitzdachhaus .sp-vorteile__closing { margin-top: 6px; }
body.spitzdachhaus #vorteile { padding-bottom: 48px; }

/* SDH-R05: Modernes paragraph measure — line 1 ends at "Hautyp" (max x≈1238) */
body.spitzdachhaus .sp-features p { max-width: 1090px; }

/* SDH-R04: "Jetzt anrufen" icons — solid dark filled circle, white glyph
   (sp-panel-phone only; .phone-cta__icon overrides removed for index parity —
   it now uses the shared base sage icon / white icon at ≥1024px). */
body.spitzdachhaus .sp-panel-phone__icon { background: #3D5128; }
body.spitzdachhaus .sp-panel-phone__icon svg { color: #FFFFFF; }

/* =====================================================================
   Final round 3 (r3 finding V-SDH-R3-01): pricing left panel FLUSH with
   options row top at y850, ~501px tall. Earlier SP-019 "cards overhang
   panel" was based on a cookie-banner-contaminated reference capture —
   clean capture (final-reference-spitzdachhaus.png, x=470 column scan)
   shows ref panel top y850 = options top y850, panel bottom = meta top
   1351 (h≈501), internals ink from panel top: tag +87, title +129,
   taglineTop +188, tagline icon +245, phone row +371 (bottom-anchored).
   Grid lifts 28px (padding 50→22) while the SP-019 options margin-top
   hack is dropped, so options stay @850 and meta stays @1358.4; body
   height 6818, CTA panel y, footer untouched.
   ===================================================================== */
@media (min-width: 1024px) {
  body.spitzdachhaus #festpreis { padding-top: 22px; padding-bottom: 33px; }   /* top 50−28; bottom +8 compensates options row 508.4→501 (grid stretch artifact of the dropped SP-019 margin) so body stays 6818 */
  body.spitzdachhaus .sp-pricing__options { margin-top: 0; }
}
/* V-006 (mobile review it.3): the 501px height lock + 85px padding-top are
   desktop geometry (ref y 850..1351) — scoped to ≥1024px. On mobile the
   panel falls back to the base rule (auto height, padding 40px 36px 36px)
   so the bottom-anchored phone block stays on the green surface. */
@media (min-width: 1024px) {
  body.spitzdachhaus .sp-pricing__panel {
    height: 501px;          /* ref 850..1351 */
    padding-top: 85px;      /* tag ink +87 from panel top */
  }
  body.spitzdachhaus .sp-panel-title { margin: 12px 0 3px; }   /* title ink +129 */
  body.spitzdachhaus .sp-panel-tagline { margin-top: 22px; }   /* icon top +245 */
  body.spitzdachhaus .sp-panel-divider { margin: 28px 0 26px; }/* fits 501 box; phone bottom-anchored via auto margin */
}


/* ===== problems round 1 (P2) — home CTA: breathing room between phone block and divider ===== */
@media (min-width: 1024px) {
  body.home .cta-panel__contact-row { padding-right: 30px; }
}
/* ===== spitzdachhaus page-scoped block (problems round 1) — Zeichnung EG/DG same rendered size ===== */
@media (min-width: 1024px) {
  body.spitzdachhaus .sp-zeich__grid { grid-template-columns: 550px 561px; column-gap: 43px; }
}

/* ===== sitewide title color #085E10 (user decision 2026-09-03) ===== */
/* ALL titles/headings on ALL pages forced to #085E10, incl. dark surfaces
   (hero, CTA lockup top/sub/main, form headings, footer headings).
   No existing rules deleted — this appended block wins via !important. */
/* Bugfix 2026-09-10: .hero__title* removed and h1 narrowed to :not(.hero__title).
   The startpage hero title sits OVER the hero photo (dark #111 ink on the V-001
   white-fade scrim), not on a white page background — it must not take the
   sitewide heading green. */
h1:not(.hero__title), h2, h3, h4, h5, h6,
.section-banner, .page-title,
.cta-lockup__top, .cta-lockup__sub, .cta-lockup__main,
.le-intro__title, .le-row__title, .le-opt__title,
.process__title, .warum-benefit__title, .split-2__heading,
.sp-hero__title, .sp-panel-title, .sp-option__title,
.imp-hero__title, .kt-hero__title, .ds-hero__title, .ds-doc__title,
.cta-panel__form-heading, .site-footer__heading {
  color: #085E10 !important;
}

/* ===== text-on-green revert to white / light sage (user decision 2026-09-03) ===== */
/* Restores pre-unification text colors ONLY for text sitting ON green/dark-green
   surfaces (CTA dark panels, sp pricing panel) and on the dark neutral legal hero
   banners. Titles on light backgrounds and photo heroes stay #085E10.
   Later in file + !important beats the sitewide title-color block above. */
.cta-lockup__top,
.cta-lockup__main,
.cta-panel__form-heading {
  color: var(--color-white) !important;
}
/* lockup sub: home + spitzdachhaus were white; le/dein-haus/baubeschreibung were
   sage rgb(134,148,99) -> light green #808f5c; referenzen was var(--color-sage) */
body.home .cta-lockup__sub { color: var(--color-white) !important; }
body.spitzdachhaus .cta-lockup__sub { color: var(--color-white) !important; }
body.leistungen .cta-lockup__sub,
body.dein-haus .cta-lockup__sub,
body.baubeschreibung .cta-lockup__sub { color: #808f5c !important; }
body.referenzen .cta-lockup__sub { color: var(--color-sage) !important; }

/* SpitzDachHaus dark pricing panel heading */
body.spitzdachhaus .sp-panel-title { color: var(--color-white) !important; }

/* legal dark hero banners (kontakt #3E4340 / impressum #3B3B39 / datenschutz
   #3B3E35-#33362D) — titles were white Lato before the title-color round */
body.kontakt .kt-hero__title,
body.impressum .imp-hero__title,
body.datenschutz .ds-hero__title { color: var(--color-white) !important; }

/* ===== brand green unification round 2: surfaces + tokens #085E10 (user decision 2026-09-03) ===== */
/* User decision: exactly TWO greens. (1) Dark brand green #085E10 — all green SURFACES
   (panel/CTA/pricing backgrounds), buttons, icons, borders/dividers, and all text/accents
   on LIGHT backgrounds; hero titles on photo backgrounds stay #085E10.
   (2) Light green #808f5c — accents that were sage (incl. body.referenzen cta-lockup__sub).
   Text on green surfaces stays WHITE (the 'text-on-green revert' block above keeps winning).
   Neutral grays/whites untouched. rgb(8,94,16) literals == #085E10, left as-is. */

/* --- 1. green custom properties --- */
:root {
  --color-primary: #085E10;      /* was #4E5936 */
  --color-primaryHover: #085E10; /* was #5B6640 */
  --color-primaryActive: #085E10;/* was #3F492B */
  --color-accent: #085E10;       /* was #5E9447 */
  --color-success: #085E10;      /* was #5E9447 */
  --color-sage: #808f5c;         /* was #8FA860 */
  --color-sageHover: #808f5c;    /* was #9DB672 */
}

/* --- 2. green SURFACES -> #085E10 (hardcoded gradients bypass the tokens) --- */
body.home .pricing__panel,
body.dein-haus .pricing__panel,
body.baubeschreibung .pricing__panel { background: #085E10 !important; } /* was #3D5128->#384A24 */

body.spitzdachhaus .sp-pricing__panel,
body.spitzdachhaus .sp-pricing__meta { background: #085E10 !important; } /* was #2F4719->#28391A / rgb(57,73,40)->rgb(56,72,39) */

body.leistungen .cta-panel,
body.dein-haus .cta-panel,
body.baubeschreibung .cta-panel,
body.referenzen .cta-panel,
body.spitzdachhaus .cta-panel { background: #085E10 !important; } /* was rgb(57,64,39)->rgb(56,64,38) */

/* --- 3. green ICONS -> #085E10 --- */
body.spitzdachhaus .sp-option__icon,
body.spitzdachhaus .sp-option__list svg { color: #085E10 !important; } /* was #3D5128 */
body.spitzdachhaus .sp-panel-phone__icon { background: #085E10 !important; } /* was #3D5128; .phone-cta__icon removed for index parity */
body.spitzdachhaus .sp-panel-phone__icon { color: #085E10 !important; } /* glyph on white circle */

/* --- 4. green TEXT/ACCENTS on LIGHT backgrounds -> #085E10 --- */
body.leistungen .le-row__body--lead p { color: #085E10 !important; }         /* was #495226 */
body.leistungen .le-opt__title { color: #085E10 !important; }                 /* was rgb(73,82,38) */
body.dein-haus .dh-intro__title { color: #085E10 !important; }                /* was rgb(73,82,38) */
body.baubeschreibung #allgemein .spec-section__heading { color: #085E10 !important; } /* was rgb(73,82,38) */
body.spitzdachhaus .cta-heading .section-banner { color: #085E10 !important; }/* was rgb(73,82,38) */
body.referenzen .referenzen-intro { color: #085E10 !important; }              /* was rgb(73,82,38) */
body.baubeschreibung .bb-intro__sub { color: #085E10 !important; }            /* was rgb(73,82,38) */
body.spitzdachhaus .sp-option__price-gross { color: #085E10 !important; }     /* was rgb(48,64,32) */
/* hero accent line: no !important override anymore — V-F001/base cascade plus the
   end-of-file bugfix block (2026-09-10) own the startpage hero accent color. */
body.home .process__badge { border-color: #085E10 !important; }               /* was #464C26 */
/* footer legal links/pipes (was rgb(58,66,30), site-wide footer block) */
body.home .cta-panel { background: #085E10 !important; } /* was linear-gradient(#3C4229,#373D25) V-023 panel — missed in round 2 list, caught in verify */

body .site-footer div.site-footer__bottom span.site-footer__legal a,
body .site-footer div.site-footer__bottom span.site-footer__legal a::before,
body .site-footer div.site-footer__bottom span.site-footer__legal a:hover { color: #085E10 !important; }

/* --- 5. green-tint BORDER/DIVIDER mixes -> #085E10 (was color-mix accent 25% white) --- */
.pricing__item { border-bottom-color: #085E10 !important; }
.pricing__item:not(:nth-child(2n+1)) { border-left-color: #085E10 !important; }
.pricing__item:not(:nth-child(3n+1)) { border-left-color: #085E10 !important; }
body.home .pricing__item:nth-child(n+4),
body.dein-haus .pricing__item:nth-child(n+4),
body.baubeschreibung .pricing__item:nth-child(n+4) { border-top-color: #085E10 !important; }

/* --- 6. sage-ACCENT literals -> #808f5c --- */
/* le/dein-haus/baubeschreibung .cta-lockup__sub already forced #808f5c by the
   'text-on-green revert' block; referenzen sub uses var(--color-sage) -> now #808f5c
   via token redefinition. No further overrides needed. */

/* --- 7. borderline left unconverted (documented) --- */
/* #E6E8DE .sp-option__price fill — near-neutral greenish-white (230,232,222), mockup-tuned.
   #F5F3EE / #FBFBF9 warm near-whites. rgb(67,67,67)/rgb(85,85,80) neutral grays. */

/* ===== dark green correction #495226 (user correction 2026-09-03) ===== */
/* User correction: the approved DARK brand green is #495226 / rgb(73,82,38), NOT
   #085E10 / rgb(8,94,16). Light green #808f5c unchanged. Text on green surfaces
   stays WHITE. This block re-declares ONLY the selectors/values set by the three
   2026-09-03 marker blocks above (sitewide title color, text-on-green revert,
   brand green unification round 2); original rules untouched. Later block wins. */

/* --- 1. sitewide title color -> #495226 (hero selectors excluded per the
   2026-09-10 bugfix — startpage hero title keeps its V-001 dark ink) --- */
h1:not(.hero__title), h2, h3, h4, h5, h6,
.section-banner, .page-title,
.cta-lockup__top, .cta-lockup__sub, .cta-lockup__main,
.le-intro__title, .le-row__title, .le-opt__title,
.process__title, .warum-benefit__title, .split-2__heading,
.sp-hero__title, .sp-panel-title, .sp-option__title,
.imp-hero__title, .kt-hero__title, .ds-hero__title, .ds-doc__title,
.cta-panel__form-heading, .site-footer__heading {
  color: #495226 !important;
}

/* --- 2. text-on-green revert RE-asserted after the title list (higher-specificity
   page-scoped selectors keep winning regardless; re-declared for safety) --- */
.cta-lockup__top,
.cta-lockup__main,
.cta-panel__form-heading {
  color: var(--color-white) !important;
}
body.home .cta-lockup__sub { color: var(--color-white) !important; }
body.spitzdachhaus .cta-lockup__sub { color: var(--color-white) !important; }
body.leistungen .cta-lockup__sub,
body.dein-haus .cta-lockup__sub,
body.baubeschreibung .cta-lockup__sub { color: #808f5c !important; }
body.referenzen .cta-lockup__sub { color: var(--color-sage) !important; }
body.spitzdachhaus .sp-panel-title { color: var(--color-white) !important; }
body.kontakt .kt-hero__title,
body.impressum .imp-hero__title,
body.datenschutz .ds-hero__title { color: var(--color-white) !important; }

/* --- 3. tokens --- */
:root {
  --color-primary: #495226;
  --color-primaryHover: #495226;
  --color-primaryActive: #495226;
  --color-accent: #495226;
  --color-success: #495226;
  --color-sage: #808f5c;
  --color-sageHover: #808f5c;
}

/* --- 4. green surfaces -> #495226 --- */
body.home .pricing__panel,
body.dein-haus .pricing__panel,
body.baubeschreibung .pricing__panel { background: #495226 !important; }

body.spitzdachhaus .sp-pricing__panel,
body.spitzdachhaus .sp-pricing__meta { background: #495226 !important; }

body.leistungen .cta-panel,
body.dein-haus .cta-panel,
body.baubeschreibung .cta-panel,
body.referenzen .cta-panel,
body.spitzdachhaus .cta-panel,
body.home .cta-panel { background: #495226 !important; }

/* --- 5. green icons -> #495226 --- */
body.spitzdachhaus .sp-option__icon,
body.spitzdachhaus .sp-option__list svg { color: #495226 !important; }
body.spitzdachhaus .sp-panel-phone__icon { background: #495226 !important; } /* .phone-cta__icon removed for index parity */
body.spitzdachhaus .sp-panel-phone__icon { color: #495226 !important; }

/* --- 6. green text/accents on LIGHT backgrounds -> #495226 --- */
body.leistungen .le-row__body--lead p { color: #495226 !important; }
body.leistungen .le-opt__title { color: #495226 !important; }
body.dein-haus .dh-intro__title { color: #495226 !important; }
body.baubeschreibung #allgemein .spec-section__heading { color: #495226 !important; }
body.spitzdachhaus .cta-heading .section-banner { color: #495226 !important; }
body.referenzen .referenzen-intro { color: #495226 !important; }
body.baubeschreibung .bb-intro__sub { color: #495226 !important; }
body.spitzdachhaus .sp-option__price-gross { color: #495226 !important; }
body.home .process__badge { border-color: #495226 !important; }

/* footer legal links/pipes (correction of the #085E10 override) */
body .site-footer div.site-footer__bottom span.site-footer__legal a,
body .site-footer div.site-footer__bottom span.site-footer__legal a::before,
body .site-footer div.site-footer__bottom span.site-footer__legal a:hover { color: #495226 !important; }

/* --- 7. green-tint border/divider mixes -> #495226 --- */
.pricing__item { border-bottom-color: #495226 !important; }
.pricing__item:not(:nth-child(2n+1)) { border-left-color: #495226 !important; }
.pricing__item:not(:nth-child(3n+1)) { border-left-color: #495226 !important; }
body.home .pricing__item:nth-child(n+4),
body.dein-haus .pricing__item:nth-child(n+4),
body.baubeschreibung .pricing__item:nth-child(n+4) { border-top-color: #495226 !important; }

/* ===== brand green correction: dark green is #495226 (user decision 2026-09-03) ===== */
/* User (authoritative): #495226 = rgb(73,82,38) is the dark green for EVERYTHING
   EXCEPT TITLES — surfaces, buttons, icons, borders/dividers, footer legal links,
   non-heading green text/accents (lead paragraphs, price text, badge borders,
   drop-shadows). ALL titles/headings stay #085E10 — "That's how it should be."
   Light sage #808f5c unchanged; text on green surfaces stays WHITE.
   This block wins over the 'dark green correction' block above, which wrongly
   flipped ALL headings to #495226. */

/* --- A. ALL titles/headings back to #085E10. Page-scoped strays from the
   block above re-asserted explicitly (they out-specificity the generic list). --- */
h1:not(.hero__title), h2, h3, h4, h5, h6,
.section-banner, .page-title,
.cta-lockup__top, .cta-lockup__sub, .cta-lockup__main,
.le-intro__title, .le-row__title, .le-opt__title,
.process__title, .warum-benefit__title, .split-2__heading,
.sp-hero__title, .sp-panel-title, .sp-option__title,
.imp-hero__title, .kt-hero__title, .ds-hero__title, .ds-doc__title,
.cta-panel__form-heading, .site-footer__heading {
  color: #085E10 !important;
}
body.leistungen .le-opt__title { color: #085E10 !important; }
body.dein-haus .dh-intro__title { color: #085E10 !important; }
body.spitzdachhaus .cta-heading .section-banner { color: #085E10 !important; }

/* --- B. text on green surfaces / dark legal heroes stays WHITE (re-asserted
   AFTER the heading list above, which would otherwise flip these to green) --- */
.cta-lockup__top,
.cta-lockup__main,
.cta-panel__form-heading {
  color: var(--color-white) !important;
}
body.home .cta-lockup__sub { color: var(--color-white) !important; }
body.spitzdachhaus .cta-lockup__sub { color: var(--color-white) !important; }
body.leistungen .cta-lockup__sub,
body.dein-haus .cta-lockup__sub,
body.baubeschreibung .cta-lockup__sub { color: #808f5c !important; }
body.referenzen .cta-lockup__sub { color: var(--color-sage) !important; }
body.spitzdachhaus .sp-panel-title { color: var(--color-white) !important; }
body.kontakt .kt-hero__title,
body.impressum .imp-hero__title,
body.datenschutz .ds-hero__title { color: var(--color-white) !important; }

/* --- C. remaining non-title #085E10 literals -> #495226 --- */
body.home .process__badge svg { color: #495226 !important; }
body.home .process__title::before { color: #495226 !important; }
body.leistungen .le-intro__copy strong { color: #495226 !important; }
body.spitzdachhaus .sp-option__prefix { color: #495226 !important; }

/* --- D. pricing dividers -> tint of the corrected dark green. Base rules are
   color-mix(var(--color-accent) 25%, white) and the accent token is now
   #495226, but the solid !important overrides above win — re-set the mix. --- */
.pricing__item { border-bottom-color: color-mix(in srgb, #495226 25%, white) !important; }
.pricing__item:not(:nth-child(2n+1)) { border-left-color: color-mix(in srgb, #495226 25%, white) !important; }
.pricing__item:not(:nth-child(3n+1)) { border-left-color: color-mix(in srgb, #495226 25%, white) !important; }
body.home .pricing__item:nth-child(n+4),
body.dein-haus .pricing__item:nth-child(n+4),
body.baubeschreibung .pricing__item:nth-child(n+4) {
  border-top-color: color-mix(in srgb, #495226 25%, white) !important;
}

/* --- E. pricing panel heading sits ON the green panel — stays WHITE
   (the sitewide heading rules above flip h3.pricing__panel-heading to
   #495226, invisible on the #495226 panel background). Class selector
   (0,1,0) beats the element-only h3 rule (0,0,1), both !important. --- */
.pricing__panel-heading { color: var(--color-white) !important; }

/* --- F. footer headings sit ON the #495226 footer surface — the sitewide
   heading lists above force .site-footer__heading to green (#085E10 /
   #495226), ~1.0:1 on the green footer background. White = ~8.35:1.
   Same specificity as the lists, later in the cascade → wins. --- */
.site-footer__heading { color: var(--color-white) !important; }

/* ===== header logo 250px (user request 2026-09-03) =====
   User: header logo too small / barely readable — make it 250px wide on ALL
   9 pages. Overrides the per-page mockup-tuned logo treatments (141px,
   134x51.6, 137x75.2 + scaleY 0.75/1.22/1.35). Header stays 56px; logo box
   250x56 object-fit:fill; per-page transforms/top/left neutralized so the
   ink sits centered in the bar. Backing tiles (referenzen/kontakt) rescaled
   to the new logo box. Nav/search run untouched. */
@media (min-width: 768px) {
  body.home .site-header .brand img,
  body.leistungen .site-header .brand img,
  body.dein-haus .site-header .brand img,
  body.baubeschreibung .site-header .brand img,
  body.referenzen .site-header .brand img,
  body.kontakt .site-header .brand img,
  body.impressum .site-header .brand img,
  body.datenschutz .site-header .brand img,
  body.spitzdachhaus .site-header .brand img {
    width: 304px; /* ink = 0.824 × element (SVG viewBox whitespace) → ~250px */
    height: 56px;
    object-fit: fill;
    position: static;
    top: auto;
    left: auto;
    /* ink (y8..36) sits 6px high in the 56px bar — drop 6px to center it */
    transform: translateY(6px);
    transform-origin: 50% 50%;
    max-width: none;
  }
}

/* ===== header logo enlarged v2 (user request 2026-09-03; retuned to 250px
   2026-09-04) =====
   User: logo too big at 360px — back to exactly 250px wide, height auto.
    euerhaus-logo.png 1600x511 (3.13:1), ink = 94.6% of width / 72.8% of
   height (wordmark + tagline), top pad 18% / bottom 9.4%. At 250px width the
   element is ratio-true (height auto → 79.8px), so object-fit no longer
   matters and was dropped. Header stays 96px on ALL 9 pages. !important so
   the per-page 56px blocks and the older 250px block above lose. Logo
   element centered by flex. Nav/search stay vertically centered via the
   header/inner flex. */
@media (min-width: 768px) {
  .site-header { height: 96px !important; }
  body.home .site-header .brand img,
  body.leistungen .site-header .brand img,
  body.dein-haus .site-header .brand img,
  body.baubeschreibung .site-header .brand img,
  body.referenzen .site-header .brand img,
  body.kontakt .site-header .brand img,
  body.impressum .site-header .brand img,
  body.datenschutz .site-header .brand img,
  body.spitzdachhaus .site-header .brand img {
    width: 250px;
    height: auto;
    position: static;
    top: auto;
    left: auto;
    max-width: none;
    /* PNG ink center sits (18% − 9.4%)/2 ≈ 4.4% of element height below
       element center → 0.044 × 79.8 ≈ 3.5px below bar center at auto
       height. Nudge up 3.5px so ink centers in the 96px bar (gaps 48/48).
       Also neutralizes the older block's translateY(6px). */
    transform: translateY(-3.5px);
  }
}

/* ===== bugfix 2026-09-10: startpage hero text — ONE color at ALL viewports =====
   Bug: the 2026-09-03 sitewide title-color rounds swept .hero__title /
   .hero__title-line / .hero__title-accent (and the bare h1) into #085E10
   !important lists, painting the startpage hero title green over the hero
   photo at EVERY width (live site included — its CSS has the same chain).
   Hero selectors are now excluded from those lists (see the narrowed rules
   above). This block re-asserts the approved DESKTOP mockup treatment
   (V-001 / V-F001 accent correction / V-F012) UNCONDITIONALLY — no media
   query — so mobile and tablet render exactly like desktop, and extends the
   V-001 white-fade scrim to all widths: the dark hero ink (#111111 / #0A0A0A)
   was tuned against that light scrim, and the old mobile dark scrim
   (hero--mobile-scrim) was designed for white text and would make it
   unreadable. Footer/cookie-banner white-on-green fixes from the previous
   round are untouched (.site-footer__heading white re-assertion above). */
body.home .hero__title { color: #111111; }
body.home .hero__title .hero__title-accent { color: #085E10; }
body.home .hero__sub { color: #0A0A0A; }
body.home .hero::before,
body.home .hero--mobile-scrim::before {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.95) 0%,
    rgba(255,255,255,0.82) 26%,
    rgba(255,255,255,0.35) 46%,
    rgba(255,255,255,0) 62%);
}

/* ===== bugfix 2026-09-10: GDPR consent block readability on dark CTA panels =====
   Bug (user report, live site): the consent label was var(--color-neutral-700)
   (#555550) on the #495226 cta-panel background on the 6 pages whose form lives
   inside .cta-panel (home, baubeschreibung, dein-haus, leistungen, referenzen,
   spitzdachhaus) — ~1.7:1, unreadable. The Datenschutz link inside it used
   var(--color-primary) (#495226) = green-on-green (1:1), the error span used
   #C0392B (~1.9:1 on the panel) and the checkbox accent was #495226, so a
   checked box vanished into the panel.
   Fix: scope white/light overrides to .cta-panel only. kontakt.html keeps its
   standard treatment — its form sits in the white .contact-card where
   #555550 / #495226 / #C0392B are correct and untouched. */
.cta-panel .form__consent-label { color: var(--color-white); }
.cta-panel .form__consent-label a { color: #D6E0BE; } /* light sage tint, ~5.9:1 on #495226 */
.cta-panel .form__consent .form__error { color: #FFB4AB; } /* light error tint, ~4.6:1 on #495226 */
.cta-panel .form__checkbox { accent-color: var(--color-white); }

/* =====================================================================
   Mobile overflow fixes — review iteration 3 (V-001..V-007)
   Systemic cause: desktop-tuned nowrap / fixed-margin geometry left
   unscoped, producing horizontal overflow on every content page at
   393px/360px. Desktop (≥1024px) rendering is untouched: every rule
   below lives behind a max-width media query, except the V-007 label
   color, which only affects labels that are visible (they are sr-only
   ≥1024px on the pages whose form sits in .cta-panel).
   ===================================================================== */

/* V-002: contact row wraps on narrow screens. Neither child (flex:none
   brand lockup, .phone-cta) could shrink, so the phone block overflowed
   the panel/viewport (index right 404, spitzdachhaus right 497). The
   nowrap + 40px right-margin page variants (leistungen, dein-haus,
   baubeschreibung, referenzen, spitzdachhaus) are desktop
   icon-positioning hacks — neutralized below 1024px. Selectors are
   body-scoped to match the page rules' specificity (later source order
   alone would not win against body.X .phone-cta). */
@media (max-width: 1023px) {
  .cta-panel__contact-row { flex-wrap: wrap; }
  body.home .phone-cta,
  body.leistungen .phone-cta,
  body.dein-haus .phone-cta,
  body.baubeschreibung .phone-cta,
  body.referenzen .phone-cta,
  body.spitzdachhaus .phone-cta {
    white-space: normal;
    margin-right: 0;
    min-width: 0;
  }

  /* V-005: desktop negative margins (-56/-44) + 167px link gap inflate the
     single-column grid track past the panel padding — form fields overhang
     the green surface. The same unscoped rule block exists on leistungen,
     dein-haus, baubeschreibung and referenzen, not only spitzdachhaus. */
  body.leistungen .cta-panel__meta,
  body.dein-haus .cta-panel__meta,
  body.baubeschreibung .cta-panel__meta,
  body.referenzen .cta-panel__meta,
  body.spitzdachhaus .cta-panel__meta {
    margin-left: 0;
    margin-right: 0;
    flex-wrap: wrap;
  }
  body.leistungen .cta-panel__meta a + a,
  body.dein-haus .cta-panel__meta a + a,
  body.baubeschreibung .cta-panel__meta a + a,
  body.referenzen .cta-panel__meta a + a,
  body.spitzdachhaus .cta-panel__meta a + a { margin-left: 0; }

  /* V-007: dark labels (rgb(85,85,80)) on the dark green panel ≈1.1:1 —
     light labels for forms inside .cta-panel. kontakt.html's form sits on
     the white .contact-card and is unaffected (not inside .cta-panel). */
  .cta-panel .form__label { color: rgba(255, 255, 255, 0.85); }
}

/* V-004: "EUER HAUS" lockup — 76px nowrap ink ≈380px in a 240px box on
   mobile; wraps like the index lockup already does (its nowrap rule at
   ~2124 was correctly desktop-scoped). The same 76px nowrap exists
   unscoped on leistungen/dein-haus/baubeschreibung/referenzen. */
@media (max-width: 767px) {
  body.leistungen .cta-lockup__main,
  body.dein-haus .cta-lockup__main,
  body.baubeschreibung .cta-lockup__main,
  body.referenzen .cta-lockup__main,
  body.spitzdachhaus .cta-lockup__main { white-space: normal; }

  /* V-001: pricing panel heading needs ~292px but only ~241px inner width
     at 393px — allow it to wrap to two lines (the .pricing track itself
     is now minmax(0,1fr), see base rule at the Pricing section). */
  .pricing__panel-heading { white-space: normal; }

  /* Same systemic class as V-003/V-004 (found during the all-pages sweep,
     not in the review's 3 sampled pages): the desktop-tuned 89px hero
     title ink (~403px) overflows a 393px viewport — scale down on mobile
     only; ≥768px keeps the reference-exact 89px. Same for datenschutz's
     88px title (desktop ink ~472px). */
  body.impressum .imp-hero__title { font-size: 56px; }
  body.datenschutz .ds-hero__title { font-size: 56px; }

  /* Same systemic class: body.spitzdachhaus .section-banner 46px (unscoped,
     ~4622) gives the single word "Feriensiedlungen" ~346px min-content —
     wider than the 360px viewport content box. Smaller size on mobile only;
     ≥768px keeps the reference-exact 46px. */
  body.spitzdachhaus .section-banner { font-size: 34px; }
}