/* Präzise Nacharbeit nach den sieben Screenshot-Korrekturen.
   Alle Änderungen bleiben auf die bestehende Einzelseite begrenzt. */
:root {
  --sans: "Segoe UI", Inter, "Helvetica Neue", Arial, sans-serif;
  --serif: "Segoe UI", Inter, "Helvetica Neue", Arial, sans-serif;
}
body { text-rendering: optimizeLegibility; }
.eyebrow {
  font-family: var(--sans);
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.display-title, .service-card h3, .contact-primary,
.team-header .display-title { letter-spacing: -.034em; }

/* Zentrierung des kompletten Teams entlang der horizontalen Achse. */
.hero-team-photo {
  right: 50%;
  transform: translateX(50%);
  object-position: center bottom;
}

/* Links wirken ohne die kleinen, wiederholten Pfeil-Piktogramme ruhiger. */
.intro-content .text-link {
  display: inline-flex;
  margin-top: 23px;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 52px;
  padding: 15px 24px;
  background: #008bb5;
  color: #fff;
  border: 2px solid #008bb5;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease;
}
.intro-content .text-link:hover { background: #006d94; border-color: #006d94; }
.hero-strip .text-link { gap: 0; }
.service-arrow { display: none; }

/* Einfache graue Kästen -> materialbezogene Einblicke, Architekturdetails,
   kontrastierende Originalaufnahmen und ein fein aufgebauter Bodenquerschnitt. */
.services { background: #f5f7f8; }
.service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  border: 0;
}
.service-card {
  position: relative;
  display: block;
  min-height: 310px;
  overflow: hidden;
  padding: 36px 34px;
  isolation: isolate;
  border: 1px solid #cfdbdf;
  background: #fff;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.service-card:hover {
  background: #fff;
  border-color: #90becb;
  box-shadow: 0 20px 35px rgba(13, 41, 50, .09);
}
.service-content { position: relative; z-index: 2; width: min(65%, 310px); }
.service-line { display: block; width: 46px; height: 4px; background: var(--cyan); margin-bottom: 25px; }
.service-card h3 { font-size: clamp(24px, 2.25vw, 34px); line-height: 1.1; }
.service-card p { max-width: 260px; font-size: 15px; line-height: 1.55; color: #415057; }
.service-visual {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  width: 52%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 29%);
  mask-image: linear-gradient(to right, transparent, #000 29%);
  filter: saturate(.75) contrast(1.05);
  transition: transform .5s cubic-bezier(.2,.65,.3,1),filter .3s ease;
}
.service-card:hover .service-visual { transform: scale(1.035); filter: saturate(1) contrast(1.04); }
.service-card-roof .service-visual { object-position: 48% 37%; }
.service-card-wall .service-visual { object-position: 57% 39%; }
.service-card-floor {
  background: linear-gradient(110deg, #fff 0%,#fff 53%, #edf1f2 100%);
}
.service-floor-plan { position: absolute; right: -45px; top: 25px; height: 255px; width: 47%; transform: perspective(480px) rotateX(30deg) rotateZ(-27deg); }
.service-floor-plan span {
  position: absolute;
  display: block;
  left: 4%;
  right: 4%;
  height: 70px;
  border: 2px solid #a6b4b9;
  background:
    linear-gradient(100deg, transparent 0 18%, #bdc9cc 18.2% 18.5%, transparent 18.7%),
    linear-gradient(90deg, #eee 0%,#e0e5e6 32%,#f7f7f4 60%,#d0d9da 100%);
  box-shadow: 13px 14px 0 #9eaeb3, 15px 16px 1px #627781, 20px 22px 20px #25434c30;
}
.service-floor-plan span:nth-child(1) { top: 14px; }
.service-floor-plan span:nth-child(2) { top: 102px; left: 9%; right: 0; }
.service-floor-plan span:nth-child(3) { top: 190px; left: 0; right: 9%; }

/* Referenzen: mehr Baustellenbilder, keine doppelte Gruppenaufnahme oder
   kleinen 'Bild ansehen'-Aktionen. Nur die Bilder selbst öffnen die Vorschau. */
.projects { position: relative; isolation: isolate; }
.projects::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 27% -4vw 7%;
  opacity: .45;
  background-image:
    linear-gradient(120deg, transparent 30%, #d8e4e7 30.1%, transparent 30.25%),
    linear-gradient(30deg, transparent 50%, #d8e4e7 50.1%, transparent 50.25%);
  pointer-events: none;
}
.gallery-controls { margin-bottom: 34px; border-bottom: 0; }
.gallery-jump { padding: 13px 22px; font-size: 15px; font-weight: 700; line-height: 1.3; }
.gallery-jump span { display: none; }
.project-grid { grid-template-columns: 1.05fr 1fr; gap: 24px; min-height: 0; }
.project-card .project-frame,
.project-card:not(.project-card-large) .project-frame { aspect-ratio: 1.45; background: #e9eff0; }
.project-card-large { grid-row: span 2; }
.project-card-large .project-frame { aspect-ratio: auto; height: 100%; min-height: 600px; }
.project-card img {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
  background: #e9eff0;
  transition: transform .32s ease;
}
.project-card:hover img { transform: scale(1.009); }
.project-meta {
  min-height: 48px;
  padding: 16px 2px 22px;
  color: #253a42;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .065em;
}

/* Recruiting-Poster vollständig aus editierbaren Layout-/Vektorbausteinen.
   Das originale Firmenlogo und der originale T/V-Rundstempel werden genutzt. */
.recruitment-poster {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  margin: 0;
  padding: clamp(20px,2.8vw,32px);
  color: #12252c;
  border: 3px solid #0e3342;
  background:
    radial-gradient(ellipse at 85% 5%, #caf2fa 0%, transparent 48%),
    linear-gradient(30deg, transparent 47%,#cfdee230 47.3%,transparent 47.6%),
    #f9fbfa;
  box-shadow: 16px 16px 0 #c9e0e6;
  min-height: 790px;
}
.poster-masthead { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.career-poster .poster-company-logo {
  width: 91px;
  height: auto;
  border: 0;
  object-fit: contain;
}
.poster-original-seal {
  width: 106px;
  height: 106px;
  border-radius: 50%;
  flex-shrink: 0;
  background-image: url("assets/karriere-original.jpg");
  background-size: 600px 750px;
  background-position: -470px -35px;
  box-shadow: 0 0 0 3px #b9ced5;
  filter: contrast(1.12);
}
.poster-recruit-label {
  margin: 24px 0 8px;
  padding: 9px 12px;
  display: inline-block;
  align-self: flex-start;
  color: #fff;
  background: #162c35;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .07em;
}
.poster-lead { line-height: .85; margin-top: 15px; }
.poster-countdown {
  display: block;
  color: #0b536a;
  font: 900 clamp(45px, 5.2vw, 74px)/1 var(--sans);
  letter-spacing: -.045em;
}
.poster-lead strong {
  display: block;
  color: #00a9d7;
  font: 900 clamp(68px, 7.2vw, 105px)/.9 var(--sans);
  letter-spacing: -.073em;
  margin-top: 4px;
  text-shadow: 2px 3px 0 #0c3642;
}
.poster-ebay { margin: 23px 0 8px; font: 900 clamp(19px, 2.15vw, 30px)/1.13 var(--sans); letter-spacing: -.018em; }
.poster-tool { display: block; width: 100%; height: auto; margin: 5px 0 10px; max-height: 172px; }
.poster-benefits { margin: auto 0 20px; padding-top: 12px; color: #086b8c; font: 800 clamp(15px, 1.7vw, 21px)/1.3 var(--sans); }
.poster-apply {
  display: block;
  width: 100%;
  padding: 17px 14px;
  text-align: center;
  background: #00a9db;
  color: #092d3a;
  border: 2px solid #0a536a;
  text-decoration: none;
  font: 900 clamp(15px, 1.55vw, 20px)/1.2 var(--sans);
  letter-spacing: .045em;
  transition: background .18s;
}
.poster-apply:hover { background: #8ee7fc; }
.poster-email { margin: 11px 0 0; text-align: center; font: 700 clamp(12px, 1.3vw, 16px)/1.25 var(--sans); overflow-wrap: anywhere; }
.poster-postscript {
  margin: 17px -32px -32px;
  padding: 13px 18px;
  text-align: center;
  background: #172b34;
  color: #e6f6f9;
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 1050px) {
  .service-content { width: 69%; }
  .service-visual { width: 49%; }
  .service-card { padding: 28px 25px; min-height: 292px; }
  .service-card h3 { font-size: clamp(22px,2.7vw,30px); }
}
@media (max-width: 760px) {
  .hero-team-photo { right: 50%; left: auto; transform: translateX(50%); }
  .eyebrow { font-size: 13px; }
  .service-grid { grid-template-columns: 1fr; gap: 13px; }
  .service-card { min-height: 245px; padding: 28px; }
  .service-content { width: min(72%,340px); }
  .service-visual { width: 51%; }
  .service-floor-plan { width: 40%; }
  .project-grid { grid-template-columns: 1fr; gap: 16px; }
  .project-card-large { grid-row: auto; }
  .project-card-large .project-frame { height: auto; min-height: 0; aspect-ratio: 1.05; }
  .project-card:not(.project-card-large) .project-frame { aspect-ratio: 1.16; }
  .gallery-jump { font-size: 13px; padding: 11px 13px; }
  .recruitment-poster { min-height: 0; padding: 25px; max-width: 500px; }
  .poster-lead strong { font-size: clamp(66px, 12vw, 100px); }
  .poster-countdown { font-size: clamp(49px, 10vw, 76px); }
  .poster-postscript { margin: 17px -25px -25px; }
}
@media (max-width: 440px) {
  .service-card { min-height: 270px; padding: 23px 20px; }
  .service-content { width: 73%; }
  .service-card h3 { font-size: 23px; }
  .service-card p { font-size: 14px; }
  .service-visual { width: 46%; }
  .service-floor-plan { width: 38%; right: -45px; }
  .recruitment-poster { padding: 19px; }
  .poster-company-logo { max-width: 84px; }
  .poster-original-seal { transform: scale(.8); transform-origin: top right; }
  .poster-lead strong { font-size: clamp(55px,15vw,74px); }
  .poster-countdown { font-size: 52px; }
  .poster-postscript { margin: 17px -19px -19px; }
}
@media (prefers-reduced-motion: reduce) {
  .service-visual,.service-card { transition: none; }
}