/* Marcus Boldt - expert finish.
   Visual refinements only. The original approved page copy is unchanged.
   Loaded after bioza-premium.css and editorial-eyecatchers.css. */
:root{--gold:#b78a45;--gold-bright:#d2ad73;--body-paper:#101113}

/* A calm editorial typographic system, with less small grey copy. */
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;font-size:16px;line-height:1.7}
.site-header{background:rgba(10,11,12,.975);border-bottom:1px solid rgba(220,206,176,.13)}
.site-header.is-scrolled{box-shadow:0 12px 32px rgba(0,0,0,.22)}
.brand-main{letter-spacing:.105em}
.primary-nav{font-size:12.5px;gap:clamp(12px,1.55vw,24px)}
.primary-nav .nav-cta{padding-inline:18px}
.breadcrumb{color:#b3b3b1}
.body-copy{font-size:16.5px;line-height:1.83;color:#cfcfcd;max-width:70ch}
.body-lead{line-height:1.58;color:#f0eeeb}
.feature p,.article-card p,.list-row p,.process-step p,.editorial-card p{color:#cdcecc}
.feature p,.list-row p,.process-step p{font-size:15.5px;line-height:1.76}
.timeline-item p{font-size:15.5px;color:#d2d2d0;max-width:68ch}
.timeline-item .year{font-size:14px}
.section{padding-block:clamp(84px,7.7vw,115px)}
.section-head h2,.section-title{letter-spacing:-.044em}
.section-head .section-desc{color:#c8c8c6;font-size:16.5px;max-width:390px}
.text-link{font-size:14px;padding:14px 0}
.footer-grid a{font-size:13.5px;color:#c1bfbb}
.footer-bottom{font-size:12px;color:#aeadaa}

/* Protect the portrait from an oversized headline: image and headline now have
   independent visual territory at desktop sizes. Preserve untouched color JPEG. */
@media(min-width:1021px){
  .page-index .hero-home .hero-inner{min-height:clamp(755px,86svh,910px);padding-top:clamp(110px,8.5vw,150px);padding-bottom:90px}
  .page-index .hero-copy{width:min(55%,690px);max-width:690px}
  .page-index .hero h1{font-size:clamp(57px,5.15vw,79px);line-height:1.055;letter-spacing:-.054em;max-width:690px}
  .page-index .hero-lead{max-width:575px;font-size:17px;line-height:1.72}
  .page-index .hero-visual{width:min(60vw,910px)}
  .page-index .portrait-image{object-position:54% 40%}
  .page-index .hero:before{background:linear-gradient(90deg,#090a0b 0%,rgba(9,10,11,.97) 26%,rgba(9,10,11,.70) 47%,rgba(9,10,11,.07) 87%),linear-gradient(0deg,#090a0b 0%,transparent 24%)}
  .page-index .hero-note{margin-top:52px}
}
@media(min-width:1350px){
 .page-index .hero-copy{width:55%}
 .page-index .hero-visual{right:calc(-1 * max(65px, (100vw - 1240px)/2))}
}
/* Softer, more precise reading rhythm along the homepage. */
.page-index .home-intro .split>div:last-child{padding-block:34px}
.page-index .home-intro .body-copy{font-size:17px;color:#d3d2cf}
.page-index .home-intro .body-lead{font-size:clamp(22px,2vw,30px)}
.page-index .home-workfields .section-desc{max-width:410px}
.page-index .home-workfields .editorial-card p{font-size:15.5px;line-height:1.77;color:#d7d7d5}
.page-index .home-workfields .editorial-card .card-bottom{font-size:13px}
.page-index .home-workfields .editorial-card .number{font-size:11px}
.page-index .home-workfields .editorial-card{border-color:rgba(255,255,255,.16)}
.page-index .home-articles .editorial-card.dark p{font-size:16px;color:#d3d3d0}
.page-index .home-articles .editorial-card.dark:first-child p{font-size:17px}
.page-index .home-quote .quote-panel blockquote{color:#f5f1e9}
.page-index .center-cta> .wrap > p:not(.eyebrow){color:#d8d7d4}

/* Distinctive yet restrained expert imagery on the inner pages. These are
   existing, already approved assets, not added copy or fictitious references. */
body:not(.page-index) .page-hero{min-height:355px;background:linear-gradient(100deg,#0e1011 0%,#0d0f10 53%,#161819 100%)}
body:not(.page-index) .page-hero::before{opacity:.55}
body:not(.page-index) .page-hero .wrap{padding-top:clamp(66px,6.3vw,94px);padding-bottom:clamp(86px,7vw,111px)}
body:not(.page-index) .page-hero h1{max-width:850px;font-size:clamp(48px,5.9vw,83px);line-height:1.08}
body:not(.page-index) .page-hero .hero-lead{font-size:clamp(16px,1.4vw,18px);color:#dcdad6;line-height:1.75;max-width:720px}
body:not(.page-index) .page-hero::after{content:"";position:absolute;right:clamp(26px,6vw,100px);top:12%;width:min(36vw,485px);height:76%;background-repeat:no-repeat;background-position:center;background-size:contain;border:0;box-shadow:none;border-radius:0;opacity:.27;pointer-events:none;mask-image:linear-gradient(to right,transparent 0%,#000 31%);-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 31%)}
body.page-arbeitsweise .page-hero::after{background-image:url('../img/diagram-beziehungen.svg')}
body.page-profiling .page-hero::after{background-image:url('../img/motif-profiling.svg')}
body.page-publikationen .page-hero::after{background-image:url('../img/motif-wahrnehmung.svg')}
body.page-arbeitsfelder .page-hero::after{background-image:url('../img/motif-lagebild.svg')}
body.page-boldt-it .page-hero::after{background-image:url('../img/motif-systeme.svg')}
body.page-tangram-tactical .page-hero::after{background-image:url('../img/motif-lagebild.svg')}
body.page-institut .page-hero::after{background-image:url('../img/motif-forschung.svg')}
body.page-zusammenarbeit .page-hero::after{background-image:url('../img/motif-fragen.svg')}
body.page-kontakt .page-hero::after{background-image:url('../img/diagram-beziehungen.svg')}
body.page-ueber-mich .page-hero::after{background-image:url('../img/diagram-beziehungen.svg');width:min(34vw,460px);opacity:.21}

/* Signature pages: turn generic grids into clear, easy-to-read editorial units. */
body.page-ueber-mich .timeline{border-left:2px solid rgba(183,138,69,.50);padding-left:45px}
body.page-ueber-mich .timeline-item{margin-bottom:40px}
body.page-ueber-mich .timeline-item:before{left:-52px;width:12px;height:12px;background:#d2ad73;box-shadow:0 0 0 6px rgba(183,138,69,.07)}
body.page-ueber-mich .timeline-item h3{font-size:clamp(23px,2.4vw,30px)}
body.page-ueber-mich .feature{min-height:260px}
body.page-profiling .feature,body.page-arbeitsweise .process-step{border-top:2px solid rgba(183,138,69,.32);background:linear-gradient(180deg,#1b1c1e,#141618)}
body.page-profiling .feature .icon-num,body.page-arbeitsweise .process-step .count{font-size:17px;font-weight:780;color:#d2ad73;margin-bottom:23px}
body.page-profiling .feature h3{font-size:clamp(23px,2.3vw,30px)}
body.page-publikationen .article-card{border:1px solid rgba(183,138,69,.24);background:linear-gradient(145deg,#1b1d1e,#111315);padding:clamp(27px,3.3vw,44px);min-height:345px}
body.page-publikationen .article-card h3{font-size:clamp(25px,2.45vw,34px)}
body.page-publikationen .article-card .article-foot{color:#bcbab6}
body.page-kontakt .contact-card{border:1px solid rgba(183,138,69,.22);background:#17191a}
body.page-kontakt .contact-card .email{font-size:clamp(18px,1.9vw,25px)}

/* Clear focus and mobile ergonomics without changing navigation wording. */
button,a{touch-action:manipulation}
@media(max-width:1200px){
 .primary-nav{gap:11px;font-size:12px}
 .page-index .home-workfields .editorial-card p{font-size:15px}
}
@media(max-width:1020px){
 .primary-nav{font-size:19px;gap:0}
 .page-index .hero-copy{width:100%}
 .page-index .hero h1{font-size:clamp(48px,7.8vw,67px)}
 body:not(.page-index) .page-hero::after{width:37vw;opacity:.17;right:3vw}
}
@media(max-width:780px){
 .page-index .hero-home .hero-inner{padding-top:67px;padding-bottom:74px;gap:34px}
 .page-index .hero h1{font-size:clamp(44px,7.2vw,61px)}
 .page-index .hero-note{margin-top:29px}
 .page-index .hero-visual{max-width:440px}
 .page-index .home-workfields .editorial-card p{font-size:15.5px}
 body:not(.page-index) .page-hero::after{width:48vw;opacity:.12;right:0;top:7%}
 .section{padding-block:75px}
}
@media(max-width:530px){
 .page-index .hero h1{font-size:clamp(38px,10vw,52px);line-height:1.08}
 .page-index .hero-visual{width:min(86vw,310px)}
 .page-index .hero-lead{font-size:15.5px}
 .page-index .home-workfields .editorial-card p{font-size:15px}
 .page-index .home-workfields .editorial-card .number{font-size:10px}
 .page-index .home-articles .editorial-card.dark p{font-size:15.5px}
 .body-copy{font-size:15.8px}
 .section{padding-block:65px}
 body:not(.page-index) .page-hero::after{display:none}
 body:not(.page-index) .page-hero h1{font-size:clamp(38px,10vw,51px)}
 .timeline-item h3{overflow-wrap:break-word}
}
@media(max-height:520px) and (orientation:landscape) and (max-width:1000px){
 .page-index .hero-home .hero-inner{padding-top:30px;padding-bottom:40px}
 .page-index .hero h1{font-size:clamp(31px,4.8vw,48px)}
 .page-index .hero-lead{font-size:13.5px}
 .page-index .hero-visual{max-width:235px}
 body:not(.page-index) .page-hero::after{display:none}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
/* Keep the natural-color portrait readable above the overall hero gradient,
   while the local image mask preserves the dark typographic area. */
@media(min-width:1021px){
  .page-index .hero-visual{z-index:2}
  .page-index .hero-visual .portrait-outer:before{background:linear-gradient(90deg,rgba(9,10,11,.37),transparent 46%),linear-gradient(0deg,#090a0b 0%,transparent 30%)}
  .page-index .portrait-caption{color:#d7d4cd}
}
