.elementor-kit-16{--e-global-color-primary:#002986;--e-global-color-secondary:#8A8A8A;--e-global-color-text:#0A0A0A;--e-global-color-accent:#FFFFFF;--e-global-color-0da213b:#F7F1CE;--e-global-color-3536f42:#161616;--e-global-color-414bbe4:#3F8F5F;--e-global-color-f760234:#C0392B;--e-global-color-4e73b7d:#EFEDE6;--e-global-color-c47fd45:#001F66;--e-global-color-5bb3bad:#E7E4DA;--e-global-typography-primary-font-family:"Space Grotesk";--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"IBM Plex Sans";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"IBM Plex Sans";--e-global-typography-text-font-weight:600;--e-global-typography-accent-font-family:"IBM Plex Mono";--e-global-typography-accent-font-weight:500;font-family:"IBM Plex Sans", Sans-serif;font-weight:400;}.elementor-kit-16 button:hover,.elementor-kit-16 button:focus,.elementor-kit-16 input[type="button"]:hover,.elementor-kit-16 input[type="button"]:focus,.elementor-kit-16 input[type="submit"]:hover,.elementor-kit-16 input[type="submit"]:focus,.elementor-kit-16 .elementor-button:hover,.elementor-kit-16 .elementor-button:focus{background-color:#001D61;}.elementor-kit-16 e-page-transition{background-color:#FFBC7D;}.elementor-kit-16 a{font-family:"IBM Plex Sans", Sans-serif;font-weight:400;}.elementor-kit-16 h1{font-family:"Space Grotesk", Sans-serif;}.elementor-kit-16 h2{font-family:"Space Grotesk", Sans-serif;}.elementor-kit-16 h3{font-family:"Space Grotesk", Sans-serif;font-weight:600;}.elementor-kit-16 h4{font-family:"IBM Plex Sans", Sans-serif;font-weight:400;}.elementor-kit-16 h5{font-family:"IBM Plex Sans", Sans-serif;font-weight:400;}.elementor-kit-16 h6{font-family:"IBM Plex Sans", Sans-serif;font-weight:400;}.elementor-kit-16 button,.elementor-kit-16 input[type="button"],.elementor-kit-16 input[type="submit"],.elementor-kit-16 .elementor-button{font-family:"IBM Plex Sans", Sans-serif;font-weight:500;text-transform:uppercase;letter-spacing:0.5px;border-radius:999px 999px 999px 999px;padding:12px 28px 12px 28px;}.elementor-kit-16 img{border-radius:4px 4px 4px 4px;}.elementor-kit-16 label{color:var( --e-global-color-text );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --heading-font:Space Grotesk; --body-font:IBM Plex Sans; --mono-lable:IBM Plex Mono; --text-navy:#002986; --text-white:#FFFFFF; --text-gray:#8A8A8A; --text-black:#0A0A0A; --bg-navy:#002986; --bg-black:#0A0A0A; --bg-concrete:#EFEDE6; --bg-concrete-card:#E7E4DA; --textbeige:#F7F1CE; --card-dark:#161616; --Beige:#F7F1CE; }
/* Start custom CSS *//* Glashaus3D design system — motion rules */
.elementor-button, a.elementor-button {
  transition: background-color 0.2s ease-out;
}
.elementor-widget-image img,
.portfolio-card, .project-card {
  transition: transform 0.3s ease-out;
}
.elementor-widget-image img:hover,
.portfolio-card:hover, .project-card:hover {
  transform: scale(1.05);
}
a.read-more, .read-more-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
a.read-more .arrow, .read-more-link .arrow {
  display: inline-block;
  transition: transform 0.2s ease-out;
}
a.read-more:hover .arrow, .read-more-link:hover .arrow {
  transform: translateX(4px);
}

/* Section textures */
.beton-dark {
  background-color: #0A0A0A;
  background-image:
    radial-gradient(at 20% 30%, rgba(255,255,255,0.04) 0px, transparent 50%),
    radial-gradient(at 80% 70%, rgba(255,255,255,0.03) 0px, transparent 50%),
    radial-gradient(at 50% 50%, rgba(0,41,134,0.15) 0px, transparent 60%);
  color: #F7F1CE;
}
.beton-light {
  background-color: #F7F1CE;
  background-image:
    radial-gradient(at 30% 20%, rgba(0,0,0,0.05) 0px, transparent 50%),
    radial-gradient(at 70% 80%, rgba(0,0,0,0.04) 0px, transparent 50%);
  color: #002986;
}

/* Anchor-link scroll offset — sticky header is ~90px tall, covers section tops without this */
html {
  scroll-padding-top: 100px;
}

/* Responsive fix 2026-09-03: About-section credibility row (text bullets + funding logo)
   was flex-wrap:nowrap and overflowed the viewport horizontally on tablet/mobile. */
@media (max-width: 1024px) {
  .elementor-element-0d385c8 {
    flex-wrap: wrap;
    row-gap: 8px;
  }
}

/* Responsive fix 2026-09-03: About-section credibility-box uses a fixed-px 2-column CSS Grid
   (label column + content column) that doesn't reflow at mobile widths (<768px), overflowing
   its parent horizontally. Stack it to a single column below the mobile breakpoint. */
@media (max-width: 767px) {
  .elementor-element-edad451 {
    grid-template-columns: 1fr !important;
  }
}

/* Fix 2026-09-03: hero stats row — the light gradient overlay behind the "70+" / "0.04mm" /
   "100% Made in Germany" stats fades to fully transparent at 66% of the section width, but the
   third stat ("100% Made in Germany") sits at ~68-86%, landing directly on the raw dark photo
   with no overlay — its black text becomes nearly invisible there. Extend the fade-out stop so
   the overlay still covers that stat. Present at every breakpoint (desktop, tablet, mobile), not
   just narrow viewports, so this is a single global fix rather than a per-breakpoint one. */
.elementor-element-179c84f {
  background-image: linear-gradient(90deg, rgb(239, 237, 230) 0%, rgb(239, 237, 230) 0%, rgba(239, 237, 230, 0) 92%), url("https://new.glashaus3d.de/wp-content/uploads/2026/09/SCAN-REPAIR-ADD-blank-e1788340421744.png") !important;
}

/* 2026-09-03: Portfolio ("Realisierte Projekte") section on mobile — 4 project cards were
   stacking vertically in a single-column grid, making the section very long to scroll through.
   Convert to a horizontal swipe/slide carousel on mobile instead: one row, scroll-snap, each
   card ~78% width so the next card peeks in from the right as a swipe affordance. */
@media (max-width: 767px) {
  .elementor-element-45867bc {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 4px !important;
  }
  .elementor-element-45867bc::-webkit-scrollbar {
    display: none !important;
  }
  .elementor-element-45867bc > div {
    flex: 0 0 78% !important;
    max-width: 78% !important;
    scroll-snap-align: start !important;
  }
}

/* 2026-09-03: "Weitere ansehen" button moved into the Portfolio grid (elementor-element-45867bc)
   as its 5th item, via the Elementor editor (document/elements/move), so it can join the mobile
   swipe carousel as a final slide instead of sitting as a separate full-width block below it.
   - Desktop/tablet (grid still display:grid): span the button across the full grid row so it
     keeps its original look — full-width, centered, below the 4 cards.
   - Mobile (grid becomes the flex carousel): give the button its own slide width instead of the
     78% card sizing, so it appears as a distinct "view more" slide at the end, still snapping. */
.elementor-element-0aa3ac8 {
  grid-column: 1 / -1;
}
@media (max-width: 767px) {
  .elementor-element-45867bc > .elementor-element-0aa3ac8 {
    flex: 0 0 60% !important;
    max-width: 60% !important;
    scroll-snap-align: center !important;
  }
}

/* 2026-09-03: Mobile compactness pass — every section's inner "content wrapper" container
   still used its desktop 40px left/right container-gutter padding at mobile widths (never
   responsively reduced), and each section's own 56px top/bottom padding was also unchanged
   from desktop. Combined, this ate a large chunk of a 375px screen on the sides (up to 120px
   total between the two padding layers) and stacked ~112px of empty space between sections,
   reading as "too much free space" / off-center-looking content. Tighten both for mobile only. */
@media (max-width: 767px) {
  /* Section top/bottom padding: 56px -> 32px */
  #staerken,
  .elementor-element-649875f,
  .elementor-element-c403d00,
  .elementor-element-146d9df,
  #ueber-uns,
  #kontakt {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
  /* Hero's own top/bottom padding: 44px/40px -> 32px, for consistency */
  .elementor-element-179c84f {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
  /* Content-wrapper left/right gutter: 40px -> 16px (this was the main offender) */
  .elementor-element-a9ba83e,
  .elementor-element-ac44b98,
  .elementor-element-22e38db,
  .elementor-element-cd9a785,
  .elementor-element-dc62d95,
  .elementor-element-c9512a5,
  .elementor-element-d8533ae {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* Footer root (elementor_library 330, "Main Footer" — rendered on every page): its padding
     was hand-set as fixed px values with no responsive override at all (56px 48px 20px 48px),
     so mobile got the exact same huge desktop gutter/top-padding. Tighten it too. */
  .elementor-element-b3e0f60 {
    padding: 32px 16px 20px 16px !important;
  }
}/* End custom CSS */