/* Shared visual system: tighter rhythm, consistent surfaces and clearer footer. */
:root {
  --kl-radius-card: 18px;
  --kl-radius-dialog: 22px;
  --kl-radius-inner: 12px;
  --kl-shadow-card: 0 14px 34px rgba(22, 52, 26, 0.10);
  --kl-shadow-dialog: 0 28px 72px rgba(9, 27, 12, 0.38);
  --kl-section-space: clamp(3.25rem, 4.8vw, 4.5rem);
  --kl-section-space-small: clamp(2.5rem, 3.8vw, 3.5rem);
}

/* Product, portfolio and process cards use one radius and one shadow. */
#root .services-grid > div,
#root .home-portfolio-card,
.portfolio-page .card,
.product-type-image,
.product-project,
.shading-card,
.process-step,
.process-project,
.process-prepare__card,
.process-prepare__aside,
.comparison-card,
.ueber-team-photo-wrap,
.ueber-team-card,
.contact-form-card {
  border-radius: var(--kl-radius-card) !important;
  box-shadow: var(--kl-shadow-card) !important;
}

#root .services-grid > div,
#root .home-portfolio-card,
.portfolio-page .card,
.product-type-image,
.product-project,
.shading-card,
.process-project,
.ueber-team-photo-wrap {
  overflow: hidden !important;
}

/* Dialogs and popups share the same, slightly larger surface treatment. */
.portfolio-page .dialog,
.comparison-dialog,
.consent-banner,
.home-portfolio-dialog,
.easter-egg-frame img {
  border-radius: var(--kl-radius-dialog) !important;
  box-shadow: var(--kl-shadow-dialog) !important;
}

.portfolio-page .fact,
.comparison-dialog__note,
.gallery button[data-src],
.gallery button[data-src] img,
.process-visualization__free {
  border-radius: var(--kl-radius-inner) !important;
}

/* Homepage: shorten pauses between headings, cards and follow-up content. */
#root .services-section > div > div:first-child {
  margin-bottom: 2.4rem !important;
}

#root .services-grid {
  gap: 1.15rem !important;
}

#root .home-portfolio-grid {
  gap: 1.15rem !important;
}

#root .home-portfolio-cta-wrap {
  margin-top: 1.75rem !important;
}

#root .home-portfolio-inner > div:first-child {
  margin-bottom: 2.15rem !important;
}

#root .individuell-section div:has(> div > .individuell-intro) {
  margin-bottom: 2.5rem !important;
}

#contact > div > div:first-child {
  margin-bottom: 2.5rem !important;
}

.home-free-3d-callout {
  margin-top: 2.25rem !important;
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

/* Wintergarten product page: tighter editorial sections without crowding copy. */
.product-hero .hero-inner {
  padding-top: 6.25rem !important;
  padding-bottom: 3.75rem !important;
}

.product-anchor-nav a {
  min-height: 54px !important;
}

.product-type-section {
  padding-top: var(--kl-section-space) !important;
  padding-bottom: var(--kl-section-space) !important;
}

.product-type-intro {
  gap: clamp(2rem, 3.6vw, 3.4rem) !important;
}

.product-feature-list {
  margin-top: 1rem !important;
}

.product-project-wrap {
  margin-top: 2.1rem !important;
}

.product-project-content {
  padding: clamp(1.45rem, 2.5vw, 2.25rem) !important;
}

.product-cta {
  padding-top: 3.75rem !important;
  padding-bottom: 3.75rem !important;
}

.product-cta__inner {
  gap: 3rem !important;
}

/* Shading product page follows the same vertical rhythm. */
.shading-hero__content {
  padding-top: 5.75rem !important;
  padding-bottom: 3.75rem !important;
}

.shading-index a {
  min-height: 52px !important;
}

.shading-intro,
.shading-catalog,
.shading-control,
.shading-choice {
  padding-top: var(--kl-section-space) !important;
  padding-bottom: var(--kl-section-space) !important;
}

.shading-intro__grid,
.shading-control__grid {
  gap: clamp(2.5rem, 5vw, 4.5rem) !important;
}

.shading-use-grid {
  margin-top: 2.75rem !important;
}

.shading-section-head {
  margin-bottom: 1.9rem !important;
}

.shading-card-grid {
  gap: 1.15rem !important;
}

.shading-card {
  min-height: 390px !important;
}

.shading-card__body {
  padding: 1.75rem !important;
}

.shading-cta {
  padding-top: 3.75rem !important;
  padding-bottom: 3.75rem !important;
}

/* Process, about and legal pages now use the same compact section rhythm. */
.process-intro,
.process-visualization,
.process-steps,
.process-prepare,
.process-projects,
.process-faq {
  padding-top: var(--kl-section-space) !important;
  padding-bottom: var(--kl-section-space) !important;
}

.process-intro__grid,
.process-prepare__grid,
.process-faq__grid {
  gap: clamp(2.25rem, 4.5vw, 4.5rem) !important;
}

.process-visualization__grid {
  gap: clamp(2rem, 3.7vw, 3.75rem) !important;
}

.process-visualization__figure picture {
  border-radius: var(--kl-radius-card) !important;
  box-shadow: var(--kl-shadow-card) !important;
}

.process-heading {
  margin-bottom: 1.75rem !important;
}

.process-step {
  padding: 1.55rem !important;
}

.process-prepare__card,
.process-prepare__aside {
  padding: clamp(1.65rem, 3vw, 2.35rem) !important;
}

.ueber-team-main {
  padding-top: 3rem !important;
  padding-bottom: 4rem !important;
}

.ueber-team-heading {
  margin-bottom: 1.35rem !important;
}

.ueber-team-stage {
  margin-top: 1rem !important;
}

.ueber-team-text {
  margin-top: 2.5rem !important;
}

.legal-main,
.standalone-legal {
  padding-top: 3.5rem !important;
  padding-bottom: 4.5rem !important;
}

.legal-main section {
  margin-bottom: 1.8rem !important;
}

.legal-main .separator {
  margin-top: 1.8rem !important;
  margin-bottom: 1.8rem !important;
}

/* Portfolio listing and detail popup: less empty space, same surface system. */
.portfolio-page .filters {
  padding-top: 1.7rem !important;
}

.portfolio-page .grid,
.portfolio-page .portfolio-grid {
  gap: 1.15rem !important;
  padding-top: 1.7rem !important;
  padding-bottom: 3.5rem !important;
}

.portfolio-page .detail-content {
  padding: 1.8rem !important;
}

.portfolio-page .facts {
  gap: 0.65rem !important;
  margin-top: 1rem !important;
}

/* Comparison and consent popups are compact, but remain touch friendly. */
.comparison-dialog__surface {
  padding: 2rem !important;
}

.comparison-dialog__intro {
  margin-bottom: 1.4rem !important;
}

.comparison-card {
  padding: 1.2rem !important;
}

.consent-banner__inner {
  gap: 1.1rem !important;
  padding: 1.05rem 1.2rem !important;
}

/* Clearer footer links with reduced dead space. */
.main-footer .footer-inner {
  padding-top: 3.1rem !important;
  padding-bottom: 1.6rem !important;
}

.main-footer .footer-grid {
  gap: 2.25rem !important;
  margin-bottom: 2.2rem !important;
}

.main-footer .footer-title {
  margin-bottom: 0.9rem !important;
}

.main-footer .footer-links a,
.main-footer .footer-contact-item,
.main-footer .footer-contact-item span {
  color: rgba(255, 255, 255, 0.78) !important;
}

.main-footer .footer-bottom p {
  color: rgba(255, 255, 255, 0.58) !important;
}

/* Tablet typography: smaller display titles and wider readable measures. */
@media (min-width: 701px) and (max-width: 1100px) {
  .hero-start h1,
  .product-hero h1,
  .shading-hero h1 {
    max-width: 760px !important;
    font-size: clamp(2.55rem, 6.3vw, 4.25rem) !important;
    line-height: 1.05 !important;
    text-wrap: balance;
  }

  .product-type-title {
    max-width: 100% !important;
    font-size: clamp(1.9rem, 4.8vw, 2.75rem) !important;
    line-height: 1.08 !important;
    overflow-wrap: normal;
    hyphens: none;
  }

  .product-display-title,
  .process-page main h2,
  .shading-intro h2,
  .shading-section-head h2,
  .shading-control h2,
  .shading-cta h2,
  .ueber-team-heading,
  .comparison-dialog__intro h2 {
    font-size: clamp(2rem, 4.8vw, 3.15rem) !important;
    line-height: 1.1 !important;
    text-wrap: balance;
  }

  #root .services-section h2,
  #root .individuell-section h2,
  #root .home-portfolio h2,
  #root #contact h2 {
    font-size: clamp(2rem, 4.5vw, 2.7rem) !important;
    line-height: 1.1 !important;
    text-wrap: balance;
  }

  .product-shell,
  .shading-shell,
  .process-shell {
    width: calc(100% - 3rem) !important;
  }

  .product-type-section,
  .shading-intro,
  .shading-catalog,
  .shading-control,
  .shading-choice,
  .process-intro,
  .process-visualization,
  .process-steps,
  .process-prepare,
  .process-projects,
  .process-faq {
    padding-top: 3.25rem !important;
    padding-bottom: 3.25rem !important;
  }
}

@media (max-width: 700px) {
  :root {
    --kl-radius-card: 16px;
    --kl-radius-dialog: 18px;
  }

  #services,
  .individuell-section,
  .home-portfolio,
  #contact {
    padding-top: 2.6rem !important;
    padding-bottom: 2.6rem !important;
  }

  #root .services-section > div > div:first-child {
    margin-bottom: 1.8rem !important;
  }

  #root .home-portfolio-inner > div:first-child,
  #root .individuell-section div:has(> div > .individuell-intro),
  #contact > div > div:first-child {
    margin-bottom: 1.8rem !important;
  }

  .product-hero .hero-inner,
  .shading-hero__content {
    padding-top: 5.35rem !important;
    padding-bottom: 3rem !important;
  }

  .product-type-section,
  .shading-intro,
  .shading-catalog,
  .shading-control,
  .shading-choice,
  .process-intro,
  .process-visualization,
  .process-steps,
  .process-prepare,
  .process-projects,
  .process-faq {
    padding-top: 2.8rem !important;
    padding-bottom: 2.8rem !important;
  }

  .product-project-wrap {
    margin-top: 1.6rem !important;
  }

  .shading-card__body,
  .portfolio-page .detail-content,
  .comparison-dialog__surface {
    padding: 1.35rem !important;
  }

  .ueber-team-main {
    padding-top: 2.5rem !important;
    padding-bottom: 3rem !important;
  }

  .legal-main,
  .standalone-legal {
    padding-top: 2.8rem !important;
    padding-bottom: 3.5rem !important;
  }

  .main-footer .footer-inner {
    padding: 2.45rem 1.25rem 1.45rem !important;
  }

  .main-footer .footer-grid {
    gap: 1.75rem !important;
    margin-bottom: 1.7rem !important;
  }
}

/* Product heroes use the exact shared site language: same carousel, scale and CTA. */
.product-hero,
.shading-hero {
  min-height: 50vh !important;
  align-items: center !important;
  background: var(--green) !important;
}

.product-hero > img,
.shading-hero > img {
  object-position: center 20% !important;
  opacity: .75 !important;
}

.product-hero::after,
.shading-hero::after,
.product-hero .hero-rotator::after,
.shading-hero .hero-rotator::after {
  background: linear-gradient(135deg, rgba(29, 61, 32, .48) 25%, rgba(29, 61, 32, .12) 100%) !important;
}

.product-hero .hero-inner,
.shading-hero .hero-inner {
  width: 100% !important;
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 7rem 2rem 4rem !important;
}

.product-hero .hero-content,
.shading-hero .hero-content {
  max-width: 760px !important;
}

.product-hero .kicker,
.shading-hero .kicker {
  margin: 0 0 .85rem !important;
  color: #cbe9cb !important;
  font-size: .9rem !important;
  font-weight: 800 !important;
  letter-spacing: .2em !important;
  line-height: 1.4 !important;
}

.product-hero h1,
.shading-hero h1 {
  max-width: none !important;
  margin: 0 0 1.15rem !important;
  color: #fff !important;
  font-size: clamp(2rem, 4.5vw, 3.4rem) !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  line-height: 1.15 !important;
  text-wrap: balance;
}

.product-hero .hero-content > p:last-of-type,
.shading-hero .hero-content > p:last-of-type {
  max-width: 740px !important;
  margin: 0 !important;
  color: rgba(255, 255, 255, .82) !important;
  font-size: 1.18rem !important;
  line-height: 1.7 !important;
}

.product-hero .hero-rotation-controls,
.shading-hero .hero-rotation-controls {
  right: clamp(1.25rem, 4vw, 5rem) !important;
  bottom: 1.35rem !important;
  gap: .4rem !important;
}

.product-hero .hero-rotation-dot,
.shading-hero .hero-rotation-dot {
  width: 30px !important;
  height: 30px !important;
  border-color: rgba(255, 255, 255, .72) !important;
  background: rgba(14, 32, 16, .18) !important;
  box-shadow: 0 4px 13px rgba(0, 0, 0, .16) !important;
}

.product-hero .hero-rotation-dot::after,
.shading-hero .hero-rotation-dot::after {
  width: 6px !important;
  height: 6px !important;
}

.product-hero .hero-rotation-dot.is-active,
.shading-hero .hero-rotation-dot.is-active {
  background: rgba(255, 255, 255, .9) !important;
}

.site-hero-primary {
  min-height: auto !important;
  padding: .75rem 1.75rem !important;
  border: 1px solid #3563d6 !important;
  border-radius: 12px !important;
  background: #3563d6 !important;
  box-shadow: 0 4px 16px rgba(53, 99, 214, .28) !important;
  color: #fff !important;
  font-size: .92rem !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  line-height: 1.45 !important;
  text-transform: none !important;
}

.site-hero-primary:hover,
.site-hero-primary:focus-visible {
  border-color: #2449b0 !important;
  background: #2449b0 !important;
  color: #fff !important;
  transform: translateY(-1px);
}

/* Compact product reading experience on phones. */
@media (max-width: 700px) {
  .product-hero,
  .shading-hero {
    min-height: max(50vh, 500px) !important;
  }

  .product-hero .hero-inner,
  .shading-hero .hero-inner {
    padding: 5.5rem 1.25rem 3.25rem !important;
  }

  .product-hero h1,
  .shading-hero h1 {
    font-size: clamp(2rem, 9.5vw, 2.75rem) !important;
    line-height: 1.12 !important;
  }

  .product-hero .hero-content > p:last-of-type,
  .shading-hero .hero-content > p:last-of-type {
    font-size: 1rem !important;
    line-height: 1.55 !important;
  }

  .product-hero-actions,
  .shading-actions {
    gap: .65rem !important;
    margin-top: 1.35rem !important;
  }

  .product-anchor-nav a,
  .shading-index a {
    min-height: 46px !important;
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }

  .product-type-section {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  .product-type-intro {
    gap: 1.45rem !important;
  }

  .product-type-title {
    font-size: clamp(2rem, 9vw, 2.65rem) !important;
    line-height: 1.08 !important;
  }

  .product-type-lead {
    margin-top: .8rem !important;
    font-size: 1.05rem !important;
    line-height: 1.45 !important;
  }

  .product-type-copy > p:not(.product-type-lead) {
    margin-top: .8rem !important;
    font-size: .9rem !important;
    line-height: 1.65 !important;
  }

  .product-type-image,
  .product-project-media,
  .product-project-media img {
    min-height: 0 !important;
    aspect-ratio: 16 / 10 !important;
  }

  .product-project-wrap {
    margin-top: 1.45rem !important;
    padding-top: 1rem !important;
  }

  .product-project-label {
    margin-bottom: .8rem !important;
  }

  .product-project-content {
    padding: 1.25rem !important;
  }

  .product-project-title {
    font-size: clamp(1.55rem, 7vw, 2rem) !important;
  }

  .product-project-description {
    margin: .7rem 0 1rem !important;
    font-size: .86rem !important;
    line-height: 1.6 !important;
  }

  .product-feature-list li {
    padding-top: .55rem !important;
    padding-bottom: .55rem !important;
    font-size: .82rem !important;
  }

  .shading-card,
  .shading-card__body {
    min-height: 0 !important;
  }
}

@media (max-width: 430px) {
  .product-hero-actions,
  .shading-actions {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .product-hero-actions a,
  .shading-actions a {
    width: 100% !important;
    justify-content: center !important;
  }

  .product-hero .hero-rotation-controls,
  .shading-hero .hero-rotation-controls {
    right: .8rem !important;
    bottom: .8rem !important;
  }

  .product-hero .hero-rotation-dot,
  .shading-hero .hero-rotation-dot {
    width: 28px !important;
    height: 28px !important;
  }
}