:root {
  --bg: #f5f7fa;
  --text: #213042;
  --muted: #5a6878;
  --line: rgba(217, 225, 234, 0.9);
  --primary: #1e3a5f;
  --max: 1320px;
  --header-h: 86px;
  --footer-h: 78px;
  --hero-image-inset: 3%;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, Roboto, Arial, Helvetica, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

.container {
  width: min(calc(100% - 3rem), var(--max));
  margin: 0 auto;
}

.site-header {
  background: rgba(245, 247, 250, 0.92);
  border-bottom: 1px solid rgba(217, 225, 234, 0.88);
  min-height: var(--header-h);
  display: flex;
  align-items: center;
}

.header-inner,
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
}

.header-inner { padding: 1.15rem var(--hero-image-inset); }
.footer-inner { padding: 1.1rem var(--hero-image-inset); }

.brand {
  display: inline-flex;
  flex-direction: column;
  gap: 0.18rem;
}

.brand-name {
  font-size: 1.22rem;
  font-weight: 700;
  color: var(--primary);
}

.brand-subtitle {
  font-size: 0.92rem;
  color: var(--muted);
}

.main-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.main-nav a,
.site-footer a {
  font-weight: 600;
  font-size: 1rem;
}

main {
  flex: 1 0 auto;
}

.hero-stage {
  position: relative;
  min-height: calc(100svh - var(--header-h) - var(--footer-h));
  overflow: hidden;
}

.hero-media,
.hero-overlay {
  position: absolute;
  inset: 0;
}

.hero-media {
  display: grid;
  place-items: center;
  padding: 1.4rem 0 0.8rem;
}

.hero-media img {
  width: calc(100% - (var(--hero-image-inset) * 2));
  max-width: 1600px;
  margin: 0 auto;
  height: 92%;
  object-fit: contain;
  object-position: center center;
  filter: saturate(0.88) brightness(1.04);
}

.hero-overlay {
  background:
    linear-gradient(to right,
      rgba(245,247,250,0.985) 0%,
      rgba(245,247,250,0.955) 17%,
      rgba(245,247,250,0.84) 31%,
      rgba(245,247,250,0.55) 45%,
      rgba(245,247,250,0.22) 59%,
      rgba(245,247,250,0.06) 74%,
      rgba(245,247,250,0.00) 100%),
    linear-gradient(to top,
      rgba(245,247,250,0.90) 0%,
      rgba(245,247,250,0.34) 18%,
      rgba(245,247,250,0.08) 36%,
      rgba(245,247,250,0.00) 100%);
}

.hero-layout {
  position: relative;
  z-index: 2;
  min-height: calc(100svh - var(--header-h) - var(--footer-h));
  padding: 3.7rem 0 2.2rem;
  max-width: 1600px;
  margin: 0 auto;
}

.hero-copy-plain,
.overlay-block {
  position: absolute;
  text-shadow: 0 1px 0 rgba(255,255,255,0.45);
}

.hero-copy-plain {
  top: 4.2rem;
  left: calc(var(--hero-image-inset) - 2.2cm);
  width: min(41%, 31rem);
}

.eyebrow {
  margin: 0 0 0.8rem;
  color: var(--primary);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.hero h1,
.overlay-block h2,
.legal-page h1,
.legal-container h2 {
  margin: 0;
  color: var(--primary);
}

.hero h1 {
  font-size: clamp(2.6rem, 4.2vw, 4.6rem);
  line-height: 1.04;
  max-width: 11ch;
}




.lead{
  margin-top: 2.2rem;
  max-width: none;
  font-size: clamp(1.05rem, 1.25vw, 1.25rem);
  line-height: 1.45;
  font-weight: 600;
  color: var(--primary);
}




.overlay-services {
  top: 5.55rem;
  right: calc(clamp(-13rem, -8vw, -6rem) + 3.2cm);
  width: 23.5rem;
}

.overlay-contact {
  left: calc(var(--hero-image-inset) - 2.2cm);
  bottom: 1.55rem;
  width: min(26%, 20rem);
}

.overlay-block h2 {
  font-size: 2.05rem;
  margin-bottom: 0.72rem;
}

.service-block {
  padding: 0.08rem 0 0.78rem;
}

.service-block + .service-block {
  padding-top: 0.62rem;
}

.service-block h3 {
  margin: 0 0 0.38rem;
  color: var(--primary);
  font-size: 1.14rem;
}

.service-block ul {
  margin: 0;
  padding-left: 1.1rem;
}

.service-block li {
  margin-bottom: 0.55rem;
  font-size: 0.99rem;
  line-height: 1.56;
}

.service-block li + li {
  margin-top: 0.22rem;
}

.service-block-last {
  padding-bottom: 0;
}

.overlay-contact p {
  margin: 0 0 0.8rem;
  font-size: 1rem;
}

.overlay-contact p:last-child {
  margin-bottom: 0;
}

.phone-placeholder {
  color: #8ea0b2;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.site-footer {
  background: rgba(245, 247, 250, 0.94);
  border-top: 1px solid rgba(217, 225, 234, 0.9);
  min-height: var(--footer-h);
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.site-footer nav {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.site-footer p {
  margin: 0;
  color: var(--muted);
  font-size: 0.98rem;
}

/* Legal pages */
.compact-header {
  position: static;
}

.legal-page {
  padding: 2.8rem 0 4rem;
}

.legal-container {
  padding: 1.9rem 1.7rem;
  background: rgba(255,255,255,0.92);
  border-radius: 24px;
  border: 1px solid rgba(217, 225, 234, 0.9);
}

.legal-container section + section {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.legal-container h2 {
  margin-bottom: 0.6rem;
  font-size: 1.15rem;
}


@media (max-width: 2300px) {
  .hero h1 {
    font-size: clamp(2.8rem, 4.2vw, 4.7rem);
    max-width: 10.8ch;
  }

  


.lead{
  margin-top: 1.1rem;
  max-width: 40rem;
  font-size: clamp(1.05rem, 1.25vw, 1.25rem);
  line-height: 1.45;
  font-weight: 600;
  color: var(--primary);
}




  .overlay-services {
    width: 21.5rem;
    right: calc(clamp(-11rem, -7vw, -4.5rem) + 2.2cm);
  }

  .service-block li {
  margin-bottom: 0.55rem;
    font-size: 0.95rem;
    line-height: 1.46;
  }

  .overlay-contact {
    width: min(24%, 18rem);
  }
}

@media (max-width: 2000px) {
  .hero-layout {
    max-width: 1440px;
  }

  .hero-media img {
    max-width: 1440px;
  }

  .hero-copy-plain {
    top: 3.5rem;
    left: calc(var(--hero-image-inset) - 1.2cm);
    width: min(41%, 26rem);
  }

  .hero h1 {
    font-size: clamp(2.35rem, 3.7vw, 3.9rem);
    line-height: 1.02;
    max-width: 10.4ch;
  }

  


.lead{
  margin-top: 1.1rem;
  max-width: 40rem;
  font-size: clamp(1.05rem, 1.25vw, 1.25rem);
  line-height: 1.45;
  font-weight: 600;
  color: var(--primary);
}




  .overlay-services {
    top: 4.2rem;
    width: 18.2rem;
    right: calc(var(--hero-image-inset) + 1.3rem);
  }

  .overlay-block h2 {
    font-size: 1.72rem;
    margin-bottom: 0.52rem;
  }

  .service-block h3 {
    font-size: 0.98rem;
    margin-bottom: 0.2rem;
  }

  .service-block li {
  margin-bottom: 0.55rem;
    font-size: 0.84rem;
    line-height: 1.28;
  }

  .service-block li + li {
    margin-top: 0.05rem;
  }

  .overlay-contact {
    left: calc(var(--hero-image-inset) - 1.2cm);
    bottom: 0.95rem;
    width: min(22%, 13.2rem);
    font-size: 0.82rem;
  }

  .overlay-contact h2 {
    font-size: 1.42rem;
    margin-bottom: 0.45rem;
  }

  .overlay-contact p {
    margin-bottom: 0.42rem;
    font-size: 0.82rem;
    line-height: 1.34;
  }

  .brand-name {
    font-size: 1.1rem;
  }

  .brand-subtitle,
  .main-nav a,
  .site-footer a,
  .site-footer p {
    font-size: 0.9rem;
  }
}


@media (max-width: 1920px) {
  .hero-layout {
    max-width: 1380px;
  }

  .hero-media img {
    max-width: 1380px;
  }

  .hero-copy-plain {
    top: 2.95rem;
    left: calc(var(--hero-image-inset) - 1.0cm);
    width: min(39%, 24rem);
  }

  .hero h1 {
    font-size: clamp(2.1rem, 3.2vw, 3.2rem);
    line-height: 0.99;
    max-width: 9.9ch;
  }

  


.lead{
  margin-top: 1.1rem;
  max-width: 40rem;
  font-size: clamp(1.05rem, 1.25vw, 1.25rem);
  line-height: 1.45;
  font-weight: 600;
  color: var(--primary);
}




  .overlay-services {
    top: 3.95rem;
    width: 16.2rem;
    right: calc(var(--hero-image-inset) + 2.2rem);
  }

  .overlay-block h2 {
    font-size: 1.62rem;
    margin-bottom: 0.42rem;
  }

  .service-block h3 {
    font-size: 0.92rem;
    margin-bottom: 0.14rem;
  }

  .service-block li {
  margin-bottom: 0.55rem;
    font-size: 0.79rem;
    line-height: 1.22;
  }

  .service-block li + li {
    margin-top: 0.03rem;
  }

  .overlay-contact {
    left: calc(var(--hero-image-inset) - 1.0cm);
    bottom: 1.2rem;
    width: min(19.5%, 11.8rem);
  }

  .overlay-contact h2 {
    font-size: 1.18rem;
    margin-bottom: 0.24rem;
  }

  .overlay-contact p {
    margin-bottom: 0.2rem;
    font-size: 0.7rem;
    line-height: 1.16;
  }
}

@media (max-width: 1700px) {
  .hero-layout {
    max-width: 1340px;
  }

  .hero-media img {
    max-width: 1340px;
  }

  .hero-copy-plain {
    top: 3.8rem;
    width: min(43%, 25rem);
  }

  .hero h1 {
    font-size: clamp(2.2rem, 3.6vw, 3.55rem);
    max-width: 10.5ch;
  }

  


.lead{
  margin-top: 1.1rem;
  max-width: 40rem;
  font-size: clamp(1.05rem, 1.25vw, 1.25rem);
  line-height: 1.45;
  font-weight: 600;
  color: var(--primary);
}




  .overlay-services {
    top: 4.45rem;
    width: 17.2rem;
    right: calc(clamp(-5rem, -3.5vw, -1rem) + 0.4cm);
  }

  .overlay-block h2 {
    font-size: 1.6rem;
    margin-bottom: 0.55rem;
  }

  .service-block h3 {
    font-size: 0.94rem;
    margin-bottom: 0.28rem;
  }

  .service-block li {
  margin-bottom: 0.55rem;
    font-size: 0.82rem;
    line-height: 1.28;
  }

  .service-block li + li {
    margin-top: 0.08rem;
  }

  .overlay-contact {
    bottom: 1.25rem;
    width: min(22%, 14.5rem);
    font-size: 0.86rem;
  }

  .overlay-contact p {
    margin-bottom: 0.58rem;
    font-size: 0.86rem;
  }

  .brand-name {
    font-size: 1.08rem;
  }

  .brand-subtitle,
  .main-nav a,
  .site-footer a,
  .site-footer p {
    font-size: 0.88rem;
  }
}

@media (max-width: 1080px) {
  :root {
    --header-h: 82px;
    --footer-h: 74px;
  }

  .hero-copy-plain {
    width: min(45%, 30rem);
  }

  .overlay-services {
    width: min(33%, 23rem);
  }
}

@media (max-width: 980px) {
  body {
    min-height: auto;
    display: block;
  }

  .site-header,
  .site-footer {
    min-height: auto;
  }

  .hero-stage,
  .hero-layout {
    min-height: auto;
  }

  .hero-media {
    padding: 0;
  }

  .hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .hero-overlay {
    background:
      linear-gradient(to bottom,
        rgba(245,247,250,0.96) 0%,
        rgba(245,247,250,0.88) 16%,
        rgba(245,247,250,0.66) 34%,
        rgba(245,247,250,0.38) 58%,
        rgba(245,247,250,0.22) 80%,
        rgba(245,247,250,0.18) 100%);
  }

  .hero-layout {
    display: grid;
    gap: 2rem;
    padding: 2.4rem 0 2rem;
  }

  .hero-copy-plain,
  .overlay-block {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
  }

  .hero h1 {
    font-size: clamp(2.3rem, 10vw, 3.5rem);
    max-width: 12ch;
  }

  


.lead{
  margin-top: 1.1rem;
  max-width: 40rem;
  font-size: clamp(1.05rem, 1.25vw, 1.25rem);
  line-height: 1.45;
  font-weight: 600;
  color: var(--primary);
}




  .overlay-block h2 {
    font-size: 1.75rem;
  }

  .site-footer nav,
  .header-inner,
  .footer-inner {
    gap: 0.9rem;
  }

  .header-inner,
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* v27b: exact hero title wrapping */
.hero h1{
  max-width:none;
}
.hero h1 .nowrap{
  white-space:nowrap;
}


/* v37 responsive structure
   Design master: QHD / 2560x1440 and above keeps v27b hero layout.
   Smaller desktop screens switch to a simplified hero with jump-links,
   similar to v30-v34, to avoid overlap. */

/* hidden by default on large desktop */
.home-links{
  display:none;
}

/* very large monitors: keep v27b arrangement explicitly */
@media (min-width: 2560px){
  .overlay-services{
    top:5.55rem;
    right:calc(clamp(-13rem,-8vw,-6rem) + 3.2cm);
    width:23.5rem;
  }
  .overlay-contact{
    left:calc(var(--hero-image-inset) - 2.2cm);
    bottom:1.55rem;
    width:min(26%,20rem);
  }
  .hero-copy-plain{
    top:4.2rem;
    left:calc(var(--hero-image-inset) - 2.2cm);
    width:min(41%,31rem);
  }
}

/* medium-large desktop: slightly tighten but keep overlays */
@media (max-width: 2200px){
  .hero-layout{
    max-width: 1460px;
  }
  .hero-media img{
    max-width: 1460px;
  }
  .hero-copy-plain{
    width:min(40%, 28rem);
  }
  .hero h1{
    font-size: clamp(2.45rem, 4vw, 4.1rem);
  }
  


.lead{
  margin-top: 1.1rem;
  max-width: 40rem;
  font-size: clamp(1.05rem, 1.25vw, 1.25rem);
  line-height: 1.45;
  font-weight: 600;
  color: var(--primary);
}



  .overlay-services{
    width:18rem;
    right:calc(var(--hero-image-inset) + 1.4rem);
    top:4.25rem;
  }
  .overlay-block h2{
    font-size:1.72rem;
  }
  .service-block h3{
    font-size:0.97rem;
  }
  .service-block li{
    font-size:0.84rem;
    line-height:1.26;
  }
  .overlay-contact{
    width:min(22%, 13rem);
    bottom:1rem;
  }
  .overlay-contact h2{
    font-size:1.3rem;
  }
  .overlay-contact p{
    font-size:0.8rem;
    line-height:1.26;
    margin-bottom:0.34rem;
  }
}

/* standard desktop / laptop:
   switch to stacked jump-links layout to avoid all overlap issues */
@media (max-width: 1920px){
  .hero-layout{
    min-height: calc(100svh - var(--header-h) - var(--footer-h));
    max-width: 1360px;
  }
  .hero-media img{
    max-width: 1360px;
  }

  .hero-copy-plain{
    top:3rem;
    left:calc(var(--hero-image-inset) - 1.2cm);
    width:min(40%, 25rem);
  }

  .hero h1{
    font-size: clamp(2.35rem, 3.4vw, 3.45rem);
    line-height:1.02;
  }

  


.lead{
  margin-top: 1.1rem;
  max-width: 40rem;
  font-size: clamp(1.05rem, 1.25vw, 1.25rem);
  line-height: 1.45;
  font-weight: 600;
  color: var(--primary);
}




  /* hide overlaid blocks on smaller desktop */
  .overlay-services,
  .overlay-contact{
    display:none;
  }

  /* show jump-links instead */
  .home-links{
    display:flex;
    position:absolute;
    left:calc(var(--hero-image-inset) - 1.2cm);
    bottom:2rem;
    gap:1.4rem;
    flex-wrap:wrap;
  }

  .home-links a{
    font-weight:700;
    font-size:1.02rem;
    color:var(--primary);
    text-decoration:none;
    padding-bottom:0.1rem;
    border-bottom:1px solid rgba(30,58,95,0.25);
  }

  .home-links a:hover{
    border-bottom-color: rgba(30,58,95,0.65);
  }
}

/* tablets and mobile */
@media (max-width: 980px){
  .home-links{
    display:flex;
    position:relative;
    left:auto;
    bottom:auto;
    margin-top:1.2rem;
    gap:0.7rem;
    flex-direction:column;
    align-items:flex-start;
  }

  .home-links a{
    font-size:1rem;
  }
}


/* dedicated pages for smaller variants */
.plain-page-body{
  background:var(--bg);
}
.plain-page{
  padding:2.2rem 0 3rem;
}
.plain-hero{
  padding:0.8rem 0 1.3rem;
}
.plain-hero h1{
  margin:0;
  color:var(--primary);
  font-size:clamp(2.3rem,4vw,4rem);
  line-height:1.05;
}
.plain-lead{
  max-width:42rem;
  margin:1rem 0 0;
  color:var(--muted);
  font-size:1.08rem;
  line-height:1.5;
}
.content-grid{
  display:grid;
  gap:1.4rem;
}
.content-grid.two-cols{
  grid-template-columns:1.25fr 0.75fr;
}
.content-grid.one-col{
  grid-template-columns:1fr;
  max-width:48rem;
}
.content-card{
  background:rgba(255,255,255,0.74);
  border:1px solid rgba(217,225,234,0.9);
  border-radius:24px;
  padding:1.7rem 1.6rem;
}
.content-card h2{
  margin:0 0 1rem;
  color:var(--primary);
  font-size:clamp(1.35rem,2vw,1.95rem);
}
.service-list-large{
  margin:0;
  padding-left:1.2rem;
}
.service-list-large li{
  font-size:clamp(1rem,1.2vw,1.12rem);
  line-height:1.58;
}
.service-list-large li + li{
  margin-top:0.2rem;
}
.contact-card-large p{
  margin:0 0 0.9rem;
  font-size:clamp(1rem,1.2vw,1.1rem);
  line-height:1.56;
}
@media (max-width:980px){
  .plain-page{
    padding:1.4rem 0 2rem;
  }
  .plain-hero{
    padding:0.15rem 0 1rem;
  }
  .plain-hero h1{
    font-size:clamp(2rem,8vw,3rem);
  }
  .plain-lead{
    font-size:1rem;
    line-height:1.45;
  }
  .content-grid.two-cols,
  .content-grid.one-col{
    grid-template-columns:1fr;
  }
  .content-card{
    background:var(--bg);
    border-left:0;
    border-right:0;
    border-bottom:0;
    border-radius:18px;
    padding:1.2rem 0;
  }
}


/* v39: jump-links also on large monitors */
.overlay-jumplink{
  margin: 0.15rem 0 0.55rem;
  font-size: 0.92rem;
  line-height: 1.3;
}
.overlay-jumplink a{
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px solid rgba(30,58,95,0.28);
}
.overlay-jumplink a:hover{
  border-bottom-color: rgba(30,58,95,0.65);
}


/* v40: header navigation used as stack jumps */
#leistungen, #kontakt{
  scroll-margin-top: 120px;
}


/* v46: exact two-line lead */
.lead{
  max-width: none;
}
.lead .lead-line{
  white-space: nowrap;
}


/* v47 overlay heading links */
.overlay-title-link{
  color: inherit;
  text-decoration: none;
}
.overlay-title-link:hover{
  text-decoration: underline;
}

/* v49: highlight technical norms on Leistungen page */
.norm{
  font-weight:500;
  color:#4a6a88;
}


/* --- Leistungen Struktur Verbesserung --- */
.service-list-large > li {
    font-size: 1.02rem;
    font-weight: 500;
    margin-bottom: 8px;
}

.service-list-large ul {
    margin-top: 6px;
    margin-bottom: 12px;
    padding-left: 18px;
}

.service-list-large ul li {
    font-size: 0.95rem;
    color: #4a5a6a;
    margin-bottom: 4px;
}

.service-list-large .norm {
    color: #6b7b8c;
    font-weight: 500;
}


/* v82 Leistungen page simplified themes */
.content-card p{
  margin: 0 0 1.15rem;
  font-size: 1rem;
  line-height: 1.6;
}
.content-card h3{
  margin: 0 0 0.45rem;
  color: var(--primary);
  font-size: 1.28rem;
}
.content-card h3 + p{
  margin-top: 0;
}


/* v84 Leistungen Layout */
.services-three{
  max-width:1100px;
  margin:40px auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
}

.lead-wide{
  max-width:1100px;
  font-size:1.05rem;
  line-height:1.7;
  margin:10px auto 40px auto;
}

@media (max-width:900px){
.services-three{
grid-template-columns:1fr;
}
}



.services-three{
max-width:1100px;
margin:40px auto 80px auto;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:32px;
}

.service-card{
background:#fff;
padding:28px;
border-radius:14px;
box-shadow:0 4px 14px rgba(0,0,0,0.06);
}

.service-card h3{
margin-top:0;
font-size:1.25rem;
}

.service-card p{
font-size:0.98rem;
line-height:1.6;
}

@media (max-width:900px){
.services-three{
grid-template-columns:1fr;
}
}


/* v86 alignment improvements */
.services-three{
max-width:1100px;
margin:40px 0 80px 0;
}

.plain-page .services-three{
padding-left:0;
}



/* v87 alignment fix */
.services-three{
max-width:1100px;
margin:40px auto 80px auto;
padding-left:0;
}



/* v88 layout refinement for large screens */
.services-three{
max-width:1200px;
gap:42px;
margin:60px auto 100px auto;
}

.service-card{
padding:34px;
border-radius:16px;
}

.service-card h3{
font-size:1.32rem;
margin-bottom:12px;
}

.service-card p{
font-size:1.02rem;
line-height:1.65;
}



/* v89 alignment fix with headline */
.plain-hero{
max-width:1100px;
}

.plain-hero .plain-lead{
max-width:900px;
}

.services-three{
max-width:1100px;
margin:40px 0 100px 0;   /* remove auto centering */
}



/* v90 final alignment correction for Leistungen page */
.plain-hero{
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.plain-hero .plain-lead{
  max-width: 900px;
}

.container.services-three{
  width: min(calc(100% - 3rem), 1100px);
  max-width: 1100px;
  margin: 40px auto 100px auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 42px;
}

@media (max-width: 900px){
  .container.services-three{
    width: min(calc(100% - 2rem), 1100px);
    grid-template-columns: 1fr;
    margin: 32px auto 72px auto;
  }
}


/* v92 headline adjustment for Leistungen page */
.plain-hero h1{
  font-size: clamp(2.1rem, 3.2vw, 3.2rem);
  line-height: 1.08;
  max-width: 1100px;
}



/* v95 symmetric service cards on Leistungen page */
.container.services-three{
  align-items: stretch;
}

.service-card{
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 420px;
}

.service-card p{
  flex: 1 1 auto;
}


/* v97 Leistungen cards stacked vertically */
.container.services-three{
  grid-template-columns: 1fr;
  max-width: 1100px;
  gap: 26px;
}

.service-card{
  min-height: auto;
}

.service-card h3{
  max-width: 34rem;
}

.service-card p{
  max-width: 56rem;
}

@media (max-width: 900px){
  .container.services-three{
    grid-template-columns: 1fr;
  }
}


/* v98 align service blocks width with headline/introduction */
.plain-hero{
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.plain-hero .plain-lead{
  max-width: 1100px;
}

.container.services-three{
  width: min(calc(100% - 3rem), 1100px);
  max-width: 1100px;
  margin: 40px auto 100px auto;
}

.service-card h3{
  max-width: none;
}

.service-card p{
  max-width: none;
}


/* v99 spacing refinement for Leistungen page */
.plain-hero{
  padding: 0.8rem 0 0.7rem;
}

.plain-hero h1{
  margin-bottom: 1.1rem;
}

.plain-hero .plain-lead{
  margin-top: 0;
  margin-bottom: 2rem;
  line-height: 1.65;
}

.container.services-three{
  margin: 20px auto 100px auto;
}


/* v105 responsive cleanup for all screen sizes */

/* large desktop */
@media (min-width: 1200px){
  .container.services-three{
    grid-template-columns: repeat(3, 1fr);
  }
}

/* tablet and small laptops */
@media (min-width: 768px) and (max-width: 1199px){
  .container.services-three{
    grid-template-columns: repeat(2, 1fr);
    max-width: 1000px;
    gap: 28px;
  }

  .header-inner,
  .footer-inner{
    flex-wrap: wrap;
  }

  .main-nav{
    gap: 1rem;
  }

  .plain-hero{
    max-width: 1000px;
  }

  .plain-hero .plain-lead{
    max-width: 1000px;
  }
}

/* smartphone */
@media (max-width: 767px){
  .container.services-three{
    grid-template-columns: 1fr;
    max-width: 100%;
    gap: 22px;
  }

  .header-inner,
  .footer-inner{
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
  }

  .main-nav{
    flex-wrap: wrap;
    gap: 0.9rem;
  }

  .plain-hero{
    max-width: 100%;
  }

  .plain-hero .plain-lead{
    max-width: 100%;
  }
}


/* v109 index layout for 1920 and scaled laptop screens:
   keep 2560 desktop unchanged, but ensure service description stays visible */
@media (max-width: 1900px) and (min-width: 981px){
  .hero-layout{
    display:grid;
    grid-template-columns:minmax(0, 1fr) 19rem;
    column-gap:2rem;
    row-gap:1rem;
    align-content:start;
    max-width:1380px;
    padding:3rem 0 2rem;
  }

  .hero-copy-plain,
  .overlay-services,
  .overlay-contact,
  .home-links{
    position:relative;
    top:auto;
    left:auto;
    right:auto;
    bottom:auto;
  }

  .hero-copy-plain{
    grid-column:1;
    grid-row:1;
    width:min(100%, 46rem);
  }

  .overlay-services{
    grid-column:2;
    grid-row:1;
    width:100%;
    margin-top:0.35rem;
  }

  .home-links{
    display:flex;
    grid-column:1 / -1;
    grid-row:2;
    gap:1rem;
    margin-top:0.2rem;
  }

  .overlay-contact{
    grid-column:1;
    grid-row:3;
    width:min(100%, 18rem);
    margin-top:0.2rem;
  }

  .hero h1{
    font-size:clamp(2.25rem, 3.4vw, 3.55rem);
    line-height:1.02;
    max-width:11ch;
  }

  .lead{
    margin-top:1rem;
    max-width:40rem;
    font-size:clamp(1rem, 1.15vw, 1.15rem);
    line-height:1.42;
  }

  .overlay-block h2{
    font-size:1.55rem;
    margin-bottom:0.45rem;
  }

  .service-block li{
    font-size:0.84rem;
    line-height:1.28;
    margin-bottom:0.38rem;
  }

  .overlay-contact p{
    font-size:0.84rem;
    line-height:1.28;
    margin-bottom:0.45rem;
  }
}


/* v110: ensure service description is visible on 1920 desktop and scaled 14" laptops */
@media (max-width: 2200px) and (min-width: 981px){
  .hero-layout{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1rem !important;
    align-content: start !important;
    max-width: 1380px !important;
    padding: 2.6rem 0 1.8rem !important;
  }

  .hero-copy-plain,
  .overlay-services,
  .overlay-contact,
  .home-links{
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
  }

  .hero-copy-plain{
    width: min(100%, 46rem) !important;
  }

  .overlay-services{
    display: block !important;
    width: min(100%, 40rem) !important;
    margin-top: 0.45rem !important;
  }

  .home-links{
    display: flex !important;
    gap: 1rem !important;
    margin-top: 0.1rem !important;
  }

  .overlay-contact{
    width: min(100%, 18rem) !important;
    margin-top: 0.3rem !important;
  }

  .hero h1{
    font-size: clamp(2.2rem, 3.9vw, 3.8rem) !important;
    line-height: 1.02 !important;
    max-width: 10.8ch !important;
  }

  .lead{
    margin-top: 0.95rem !important;
    max-width: 42rem !important;
    font-size: clamp(1rem, 1.15vw, 1.15rem) !important;
    line-height: 1.4 !important;
  }

  .overlay-block h2{
    font-size: 1.5rem !important;
    margin-bottom: 0.32rem !important;
  }

  .service-block ul{
    padding-left: 1rem !important;
  }

  .service-block li{
    font-size: 0.84rem !important;
    line-height: 1.28 !important;
    margin-bottom: 0.25rem !important;
  }

  .overlay-contact p{
    font-size: 0.84rem !important;
    line-height: 1.28 !important;
    margin-bottom: 0.42rem !important;
  }
}


/* v111: prevent overlap on 14" 1920x1080 at 125% scaling */
@media (max-width: 1600px) and (min-width: 981px){
  .hero-layout{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    align-content: start !important;
    max-width: 1280px !important;
    padding: 2.4rem 0 1.8rem !important;
  }

  .hero-copy-plain,
  .overlay-services,
  .overlay-contact,
  .home-links{
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
  }

  .hero-copy-plain{
    width: min(100%, 42rem) !important;
    z-index: 2 !important;
  }

  .overlay-services{
    width: min(100%, 42rem) !important;
    margin-top: 0.35rem !important;
    z-index: 2 !important;
  }

  .home-links{
    display: flex !important;
    gap: 1rem !important;
    margin-top: 0.1rem !important;
  }

  .overlay-contact{
    width: min(100%, 18rem) !important;
    margin-top: 0.25rem !important;
  }

  .hero h1{
    font-size: clamp(2.05rem, 3.2vw, 3.2rem) !important;
    line-height: 1.02 !important;
    max-width: 10.8ch !important;
  }

  .lead{
    margin-top: 0.85rem !important;
    max-width: 38rem !important;
    font-size: 1.02rem !important;
    line-height: 1.38 !important;
  }

  .overlay-block h2{
    font-size: 1.45rem !important;
    margin-bottom: 0.3rem !important;
  }

  .service-block li{
    font-size: 0.82rem !important;
    line-height: 1.26 !important;
    margin-bottom: 0.22rem !important;
  }

  .overlay-contact p{
    font-size: 0.82rem !important;
    line-height: 1.25 !important;
    margin-bottom: 0.4rem !important;
  }
}


/* v112: calmer right-aligned service text for 14" / scaled laptop screens */
@media (max-width: 1600px) and (min-width: 981px){
  .hero-layout{
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) 28rem !important;
    column-gap:1.8rem !important;
    row-gap:0.8rem !important;
    align-content:start !important;
    max-width:1320px !important;
    padding:2.3rem 0 1.8rem !important;
  }

  .hero-copy-plain,
  .overlay-services,
  .overlay-contact,
  .home-links{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
  }

  .hero-copy-plain{
    grid-column:1 !important;
    grid-row:1 !important;
    width:min(100%, 40rem) !important;
    z-index:2 !important;
  }

  .overlay-services{
    grid-column:2 !important;
    grid-row:1 !important;
    width:28rem !important;
    margin-top:0 !important;
    margin-left:auto !important;
    align-self:start !important;
    z-index:2 !important;
  }

  .home-links{
    display:flex !important;
    grid-column:1 !important;
    grid-row:2 !important;
    gap:1rem !important;
    margin-top:0.15rem !important;
  }

  .overlay-contact{
    grid-column:1 !important;
    grid-row:3 !important;
    width:min(100%, 18rem) !important;
    margin-top:0.15rem !important;
  }

  .hero h1{
    font-size:clamp(2.05rem, 3.1vw, 3.15rem) !important;
    line-height:1.01 !important;
    max-width:10.6ch !important;
  }

  .lead{
    margin-top:0.8rem !important;
    max-width:37rem !important;
    font-size:1rem !important;
    line-height:1.36 !important;
  }

  .overlay-block h2{
    font-size:1.42rem !important;
    margin-bottom:0.25rem !important;
  }

  .service-block ul{
    padding-left:0.92rem !important;
  }

  .service-block li{
    font-size:0.8rem !important;
    line-height:1.22 !important;
    margin-bottom:0.16rem !important;
  }

  .overlay-contact p{
    font-size:0.82rem !important;
    line-height:1.24 !important;
    margin-bottom:0.38rem !important;
  }
}


/* v113: lower and enlarge service text block on 14" / scaled laptop screens */
@media (max-width: 1600px) and (min-width: 981px){
  .overlay-services{
    margin-top: 2.6rem !important;
    width: 29rem !important;
  }

  .overlay-block h2{
    font-size: 1.58rem !important;
    margin-bottom: 0.5rem !important;
  }

  .service-block ul{
    padding-left: 1rem !important;
  }

  .service-block li{
    font-size: 0.9rem !important;
    line-height: 1.35 !important;
    margin-bottom: 0.7rem !important;
  }

  .service-block li + li{
    margin-top: 0.7rem !important;
  }
}


/* v114: keep service text inside image area and reduce font-size variety */
@media (max-width: 1600px) and (min-width: 981px){
  .hero-layout{
    grid-template-columns: minmax(0, 1fr) 25.5rem !important;
    max-width: 1240px !important;
    column-gap: 1.6rem !important;
  }

  .overlay-services{
    width: 25.5rem !important;
    max-width: 25.5rem !important;
    margin-top: 2.2rem !important;
  }

  .hero h1{
    font-size: clamp(2.12rem, 3.15vw, 3.1rem) !important;
    line-height: 1.02 !important;
  }

  .lead,
  .overlay-contact p,
  .service-block li{
    font-size: 0.88rem !important;
    line-height: 1.34 !important;
  }

  .overlay-block h2{
    font-size: 1.46rem !important;
  }

  .service-block li{
    margin-bottom: 0.52rem !important;
  }

  .service-block li + li{
    margin-top: 0.42rem !important;
  }
}


/* v115: calmer service text for 27" / 1920x1080 */
@media (max-width: 2200px) and (min-width: 1601px){
  .overlay-services{
    width: 17.2rem !important;
  }

  .overlay-block h2{
    font-size: 1.5rem !important;
    margin-bottom: 0.45rem !important;
  }

  .service-block ul{
    padding-left: 1rem !important;
  }

  .service-block li{
    font-size: 0.8rem !important;
    line-height: 1.28 !important;
    margin-bottom: 0.62rem !important;
  }

  .service-block li + li{
    margin-top: 0.58rem !important;
  }
}


/* v116: 27" / 1920x1080 keep service text right-aligned like 14" layout */
@media (max-width: 2200px) and (min-width: 1601px){
  .hero-layout{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 17.8rem !important;
    column-gap: 2rem !important;
    row-gap: 0.9rem !important;
    align-content: start !important;
    max-width: 1360px !important;
    padding: 2.8rem 0 2rem !important;
  }

  .hero-copy-plain,
  .overlay-services,
  .overlay-contact,
  .home-links{
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
  }

  .hero-copy-plain{
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: min(100%, 40rem) !important;
  }

  .overlay-services{
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 17.8rem !important;
    max-width: 17.8rem !important;
    margin-top: 0.2rem !important;
    margin-left: auto !important;
    align-self: start !important;
  }

  .home-links{
    display: flex !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    gap: 1rem !important;
    margin-top: 0.2rem !important;
  }

  .overlay-contact{
    grid-column: 1 !important;
    grid-row: 3 !important;
    width: min(100%, 18rem) !important;
    margin-top: 0.2rem !important;
  }

  .hero h1{
    font-size: clamp(2.18rem, 3.45vw, 3.45rem) !important;
    line-height: 1.01 !important;
    max-width: 10.6ch !important;
  }

  .lead{
    margin-top: 0.95rem !important;
    max-width: 38rem !important;
    font-size: 0.99rem !important;
    line-height: 1.38 !important;
  }

  .overlay-block h2{
    font-size: 1.48rem !important;
    margin-bottom: 0.4rem !important;
  }

  .service-block ul{
    padding-left: 0.95rem !important;
  }

  .service-block li{
    font-size: 0.8rem !important;
    line-height: 1.26 !important;
    margin-bottom: 0.5rem !important;
  }

  .service-block li + li{
    margin-top: 0.45rem !important;
  }

  .overlay-contact p{
    font-size: 0.84rem !important;
    line-height: 1.26 !important;
    margin-bottom: 0.42rem !important;
  }
}


/* v117: calmer right service block for 27" / 1920x1080 */
@media (max-width: 2200px) and (min-width: 1601px){
  .hero-layout{
    grid-template-columns: minmax(0, 1fr) 16.8rem !important;
    column-gap: 2.1rem !important;
  }

  .overlay-services{
    width: 16.8rem !important;
    max-width: 16.8rem !important;
    margin-top: 2.15rem !important; /* start about at 'Ingenieurbüro für' */
  }

  .overlay-block h2{
    font-size: 1.44rem !important;
    margin-bottom: 0.5rem !important;
  }

  .service-block ul{
    padding-left: 0.95rem !important;
  }

  .service-block li{
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
    margin-bottom: 0.62rem !important;
  }

  .service-block li + li{
    margin-top: 0.72rem !important; /* extra blank-line feel between groups */
  }
}


/* v118: wider right-aligned service block, keep 25px inside hero sketch edge */
@media (max-width: 2200px) and (min-width: 1601px){
  .hero-layout{
    grid-template-columns: minmax(0, 1fr) 21.5rem !important;
    column-gap: 2rem !important;
    max-width: 1360px !important;
  }

  .overlay-services{
    width: 21.5rem !important;
    max-width: 21.5rem !important;
    margin-top: 2.05rem !important;
    margin-left: auto !important;
    justify-self: end !important;
    transform: translateX(-25px) !important;
  }

  .overlay-block h2{
    font-size: 1.46rem !important;
    margin-bottom: 0.42rem !important;
  }

  .service-block ul{
    padding-left: 0.95rem !important;
  }

  .service-block li{
    font-size: 0.8rem !important;
    line-height: 1.34 !important;
    margin-bottom: 0.46rem !important;
  }

  .service-block li + li{
    margin-top: 0.58rem !important;
  }
}


/* v119: move right service block further left, keep about 100px to hero sketch edge */
@media (max-width: 2200px) and (min-width: 1601px){
  .overlay-services{
    transform: translateX(-100px) !important;
  }
}


/* v120: iPhone portrait/landscape fixes based on v119 */
@media (max-width: 767px){
  .header-inner{
    align-items: flex-start !important;
    gap: 0.7rem !important;
  }

  .brand{
    width: 100%;
  }

  .main-nav{
    width: 100%;
    justify-content: flex-start !important;
    gap: 1.4rem !important;
    flex-wrap: wrap !important;
  }

  .hero-layout{
    padding: 1.7rem 0 1.6rem !important;
    gap: 1.2rem !important;
  }

  .hero-copy-plain{
    padding-left: 0.6rem !important;
    padding-right: 0.6rem !important;
  }

  .hero h1{
    font-size: clamp(2.0rem, 10.2vw, 3.25rem) !important;
    line-height: 1.02 !important;
    max-width: 8.6ch !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  .lead{
    margin-top: 0.95rem !important;
    max-width: 100% !important;
    font-size: 1rem !important;
    line-height: 1.34 !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  .lead-line{
    display: block !important;
  }

  .home-links{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.85rem !important;
    padding-left: 0.6rem !important;
  }

  .overlay-contact{
    padding-left: 0.6rem !important;
    width: 100% !important;
    max-width: 18rem !important;
  }

  .footer-inner{
    gap: 0.7rem !important;
  }
}

/* slightly more left margin on iPhone landscape / narrow landscape screens */
@media (max-width: 932px) and (orientation: landscape){
  .hero-copy-plain,
  .home-links,
  .overlay-contact{
    padding-left: 1rem !important;
  }

  .hero h1{
    max-width: 9.2ch !important;
  }

  .lead{
    max-width: 30rem !important;
  }
}


/* v121: iPhone text cleanup - no word splitting, hide lead text on iPhone */
@media (max-width: 767px){
  .hero h1{
    font-size: clamp(1.9rem, 8.8vw, 3rem) !important;
    line-height: 1.04 !important;
    max-width: 10.8ch !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  .hero h1 span{
    white-space: normal !important;
  }

  .lead{
    display: none !important;
  }

  .hero-copy-plain{
    padding-left: 0.9rem !important;
    padding-right: 0.9rem !important;
  }

  .home-links{
    padding-left: 0.9rem !important;
  }

  .overlay-contact{
    padding-left: 0.9rem !important;
  }
}

@media (max-width: 932px) and (orientation: landscape){
  .hero h1{
    font-size: clamp(1.8rem, 7vw, 2.6rem) !important;
    max-width: 12ch !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  .lead{
    display: none !important;
  }

  .hero-copy-plain,
  .home-links,
  .overlay-contact{
    padding-left: 1.1rem !important;
  }
}


/* v122: iPhone landscape - push links below headline cleanly */
@media (max-width: 932px) and (orientation: landscape){
  .hero-layout{
    gap: 1.35rem !important;
    padding: 1.6rem 0 1.5rem !important;
  }

  .hero-copy-plain{
    display: block !important;
    padding-left: 1.1rem !important;
    padding-right: 1.1rem !important;
    margin-bottom: 0.35rem !important;
  }

  .hero h1{
    display: block !important;
    margin-bottom: 0 !important;
    max-width: 12ch !important;
  }

  .home-links{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
    padding-left: 1.1rem !important;
    margin-top: 0.5rem !important;
    clear: both !important;
  }

  .home-links a{
    display: inline-block !important;
  }
}


/* v123: iPhone landscape - place quick links in one row below headline */
@media (max-width: 932px) and (orientation: landscape){
  .hero-layout{
    gap: 1.1rem !important;
  }

  .hero-copy-plain{
    margin-bottom: 0 !important;
  }

  .hero h1{
    margin-bottom: 0.25rem !important;
  }

  .home-links{
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 1.4rem !important;
    padding-left: 1.1rem !important;
    margin-top: 0.9rem !important;
    clear: both !important;
  }

  .home-links a{
    display: inline-block !important;
    line-height: 1.2 !important;
  }
}


/* v124: iPhone landscape final fix - links clearly below heading with larger spacing */
@media (max-width: 932px) and (orientation: landscape){
  .hero-layout{
    display: block !important;
    padding: 1.4rem 0 1.3rem !important;
  }

  .hero-copy-plain{
    display: block !important;
    position: relative !important;
    width: 100% !important;
    max-width: 42rem !important;
    padding-left: 1.1rem !important;
    padding-right: 1.1rem !important;
    margin-bottom: 1.8rem !important;
  }

  .hero h1{
    display: block !important;
    max-width: 12ch !important;
    margin-bottom: 0 !important;
  }

  .home-links{
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    position: relative !important;
    width: 100% !important;
    padding-left: 1.1rem !important;
    padding-right: 1.1rem !important;
    margin-top: 0 !important;
    margin-bottom: 1.2rem !important;
    gap: 1.6rem !important;
    clear: both !important;
  }

  .home-links a{
    display: inline-block !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  .overlay-services{
    display: none !important;
  }

  .overlay-contact{
    display: none !important;
  }
}


/* v125: hard reset for iPhone landscape link position */
@media (max-width: 932px) and (orientation: landscape){
  .hero-layout{
    display: block !important;
    padding: 1.4rem 0 1.3rem !important;
  }

  .hero-copy-plain{
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 42rem !important;
    padding-left: 1.1rem !important;
    padding-right: 1.1rem !important;
    margin: 0 0 0.9rem 0 !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
  }

  .hero h1{
    display: block !important;
    max-width: 12ch !important;
    margin: 0 !important;
  }

  .home-links{
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: auto !important;
    max-width: none !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    clear: both !important;
    padding-left: 1.1rem !important;
    padding-right: 1.1rem !important;
    margin: 1.1rem 0 1.1rem 0 !important;
    gap: 1.5rem !important;
    transform: none !important;
  }

  .home-links a{
    display: inline-block !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  .overlay-services,
  .overlay-contact{
    display: none !important;
  }
}