/* Client feedback 2026-09-09 */

/* Keep long German words intact instead of splitting them mid-word. */
h1,h2,h3,
.visual-mosaic__copy h2,
.visual-mosaic__copy h2.long-claim{
  overflow-wrap:normal!important;
  word-break:normal!important;
  hyphens:none!important;
}

/* Home: company/contact block with transparent monochrome team portraits. */
.company-contact-section{padding-block:clamp(78px,7.7vw,124px)!important}
.company-contact-showcase{position:relative;min-height:620px;overflow:hidden;background:#e9e1d8;border:1px solid rgba(16,25,27,.14)}
.company-portraits{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);pointer-events:none}
.company-portraits figure{margin:0;min-width:0;overflow:hidden;position:relative}
.company-portraits figure+figure{border-left:1px solid rgba(16,25,27,.08)}
.company-portraits img{width:100%;height:100%;object-fit:cover;object-position:center 16%;filter:grayscale(1) contrast(1.04);opacity:.46}
.company-portraits figure:nth-child(1) img{object-position:center 12%}
.company-portraits figure:nth-child(2) img{object-position:center 17%;opacity:.52}
.company-portraits figure:nth-child(3) img{object-position:center 17%}
@media (min-width:621px){
  .company-portraits img{transform:scale(1.06)!important;transform-origin:center center!important}
  .company-portraits figure:nth-child(1) img{transform:scale(1.06) translateY(8px)!important}
  .company-portraits figure:nth-child(2) img{transform:scale(1.04) translateY(-5px)!important}
  .company-portraits figure:nth-child(3) img{transform:scale(1.06) translateY(-17px)!important}
}
.company-contact-showcase:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(240,235,227,.70) 0%,rgba(240,235,227,.46) 26%,rgba(240,235,227,.44) 74%,rgba(240,235,227,.70) 100%);pointer-events:none}
.company-contact-overlay{position:relative;z-index:2;min-height:620px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:clamp(46px,7vw,100px) clamp(22px,8vw,130px)}
.company-contact-overlay .eyebrow{margin-bottom:18px}
.company-contact-overlay h2{margin:0;font-size:clamp(3rem,6vw,6.8rem)!important;line-height:.9!important;letter-spacing:-.06em!important;font-weight:500!important}
.company-contact-overlay>p{max-width:760px;margin:26px auto 0;color:#384345;line-height:1.75;text-shadow:0 1px 12px rgba(244,241,236,.72)}
.company-contact-grid{width:min(900px,100%);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:34px;border-top:1px solid rgba(16,25,27,.18);border-bottom:1px solid rgba(16,25,27,.18);background:rgba(244,241,236,.12);backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px)}
.company-contact-grid a,.company-contact-grid span{display:flex;align-items:center;justify-content:center;min-height:58px;padding:12px 16px;font-size:.76rem;letter-spacing:.025em;border-right:1px solid rgba(16,25,27,.12)}
.company-contact-grid>*:nth-child(3n){border-right:0}
.company-contact-grid>*:nth-child(n+4){border-top:1px solid rgba(16,25,27,.12)}
.company-contact-grid a:hover{background:rgba(255,255,255,.4)}
.company-contact-overlay .hero-actions{justify-content:center;margin-top:30px!important}

/* About: equal portrait crops and consistent head line. */
body[data-page="ueber-uns"] .team-card .team-photo{height:clamp(320px,31vw,430px)!important;min-height:0!important;overflow:hidden!important;margin:0 0 24px!important}
body[data-page="ueber-uns"] .team-card .team-photo img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center 16%!important}
body[data-page="ueber-uns"] .team-card:nth-child(1) .team-photo img{object-position:center 12%!important}
body[data-page="ueber-uns"] .team-card:nth-child(2) .team-photo img{object-position:center 17%!important}
body[data-page="ueber-uns"] .team-card:nth-child(3) .team-photo img{object-position:center 17%!important}
@media (min-width:901px){
  body[data-page="ueber-uns"] .team-card .team-photo img{position:relative!important;transform:scale(1.08)!important;transform-origin:center center!important}
  body[data-page="ueber-uns"] .team-card:nth-child(1) .team-photo img{top:14px!important}
  body[data-page="ueber-uns"] .team-card:nth-child(2) .team-photo img{top:-12px!important}
  body[data-page="ueber-uns"] .team-card:nth-child(3) .team-photo img{top:0!important}
}
@media (max-width:900px){
  .company-contact-showcase,.company-contact-overlay{min-height:720px}
  .company-portraits{grid-template-columns:.9fr 1.2fr .9fr}
  .company-portraits figure{position:relative;inset:auto;border:0!important}
  .company-portraits figure:nth-child(1),.company-portraits figure:nth-child(3){display:block}
  .company-portraits img{opacity:.48}
  .company-portraits figure:nth-child(2) img{opacity:.60}
  .company-contact-showcase:after{background:linear-gradient(90deg,rgba(240,235,227,.58),rgba(240,235,227,.43) 30%,rgba(240,235,227,.40) 70%,rgba(240,235,227,.58))}
  .company-contact-grid{grid-template-columns:1fr 1fr;background:rgba(244,241,236,.18)}
  .company-contact-grid>*{border-right:1px solid rgba(16,25,27,.12)!important;border-top:1px solid rgba(16,25,27,.12)!important}
  .company-contact-grid>*:nth-child(odd){border-left:0!important}
  .company-contact-grid>*:nth-child(even){border-right:0!important}
  .company-contact-grid>*:nth-child(-n+2){border-top:0!important}
}
@media (max-width:620px){
  .company-contact-showcase,.company-contact-overlay{min-height:auto}
  .company-contact-overlay{padding:58px 18px}
  .company-contact-overlay h2{font-size:clamp(2.8rem,14vw,4.4rem)!important;text-shadow:0 1px 18px rgba(244,241,236,.5)}
  .company-contact-grid{grid-template-columns:1fr;background:rgba(244,241,236,.24);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
  .company-contact-grid>*{border-right:0!important;border-top:1px solid rgba(16,25,27,.12)!important}
  .company-contact-grid>*:first-child{border-top:0!important}
  body[data-page="ueber-uns"] .team-card .team-photo{height:min(118vw,470px)!important}

  /* Give the centre portrait more room on phones so Niku remains clearly visible. */
  .company-portraits{grid-template-columns:26% 48% 26%!important}
  .company-portraits img{transform:none!important;object-fit:cover!important;opacity:.52!important;filter:grayscale(1) contrast(1.02)!important}
  .company-portraits figure:nth-child(1) img{transform:none!important;object-position:52% 12%!important;opacity:.44!important}
  .company-portraits figure:nth-child(2) img{transform:none!important;object-position:50% 14%!important;opacity:.68!important}
  .company-portraits figure:nth-child(3) img{transform:none!important;object-position:48% 15%!important;opacity:.46!important}
  .company-contact-showcase:after{background:linear-gradient(180deg,rgba(240,235,227,.48) 0%,rgba(240,235,227,.38) 28%,rgba(240,235,227,.42) 72%,rgba(240,235,227,.52) 100%)!important}
}

/* 2026-09-10: site.js injects a cinematic hero layer on every page. On About it was covering
   the authored ueber-uns-new.png panel with the old /ueber-uns.png image. Keep the authored panel only. */
body[data-page="ueber-uns"] .page-hero .hero-aside > .cinematic-media{display:none!important}
body[data-page="ueber-uns"] .page-hero .hero-aside > .about-photo-panel{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;display:block!important;overflow:hidden!important}
body[data-page="ueber-uns"] .page-hero .hero-aside > .about-photo-panel:before,
body[data-page="ueber-uns"] .page-hero .hero-aside > .about-photo-panel:after{display:none!important}
body[data-page="ueber-uns"] .page-hero .hero-aside > .about-photo-panel > .about-work-photo{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover!important;object-position:50% 0%!important;transform:none!important}