/* October 2026: original team photographs + colours from the supplied print PDF. */
:root{--ink:#001c2b;--orange:#f57f2c;--green:#84cba0;--purple:#b5a2ce;--yellow:#fdb72b;--pink:#ef5289;--lemon:#f6e02f}
body[data-category="orange"]{--theme:var(--orange)}body[data-category="green"]{--theme:var(--green)}body[data-category="purple"]{--theme:var(--purple)}body[data-category="yellow"]{--theme:var(--yellow)}body[data-category="pink"]{--theme:var(--pink)}body[data-category="lemon"]{--theme:var(--lemon)}
.layout-system .orange{background-color:var(--orange)}.layout-system .green{background-color:var(--green)}.layout-system .purple{background-color:var(--purple)}.layout-system .yellow{background-color:var(--yellow)}.layout-system .pink{background-color:var(--pink)}.layout-system .lemon{background-color:var(--lemon)}
.layout-system .category-hero{background:var(--category-color)!important}
.layout-system .hero-live .button.ink,.layout-system .editorial-copy .button{background:var(--pink)}
/* The collage is made from real transparent photographs, not generated faces. */
.team-collage{position:relative;isolation:isolate;overflow:hidden;background:var(--collage-color);width:100%;aspect-ratio:4/3;margin:0;min-width:0}
.team-collage .collage-disc{position:absolute;width:65%;aspect-ratio:1;border-radius:50%;background:#f8f6ee;right:8%;top:8%;z-index:0}
.team-collage .collage-stripe{position:absolute;width:75%;height:15%;background:var(--ink);left:-15%;bottom:13%;transform:rotate(-13deg);z-index:0;opacity:.12}
.layout-system main .team-collage img.real-person{position:absolute!important;bottom:0;top:auto;left:32%;width:65%;height:94%;max-width:none;max-height:none;object-fit:contain!important;object-position:center bottom;filter:none!important;mix-blend-mode:normal!important;background:transparent!important;mask-image:none!important;-webkit-mask-image:none!important;border-radius:0;aspect-ratio:auto;margin:0;z-index:3}
.layout-system main .team-collage img.person-1{left:-8%;width:65%;height:79%;z-index:2}
.layout-system main .team-collage img.person-2{left:64%;width:48%;height:72%;z-index:1}
.layout-system main .team-collage.people-3 img.person-0{left:18%;width:64%;height:96%}
.layout-system main .team-collage.people-3 img.person-1{left:-14%;width:61%;height:78%}
.layout-system main .team-collage.people-1 img.person-0{left:14%;width:80%;height:96%}
.collage-symbol{position:absolute;left:5%;top:7%;width:clamp(48px,8vw,96px);aspect-ratio:1;display:grid;place-items:center;background:var(--collage-color);color:var(--ink);border:2px solid var(--ink);border-radius:18px;transform:rotate(-8deg);z-index:4}
.collage-symbol svg{width:60%;height:60%}
/* Edge-to-edge headers, exact solid colour behind the transparent portraits. */
.layout-system :is(#inhalt,main) :is(.detail-hero,.collage-hero):has(>.team-collage){position:relative;isolation:isolate;overflow:hidden;display:block;padding:40px var(--page-edge) 48px;min-height:500px}
.layout-system :is(#inhalt,main) :is(.detail-hero,.collage-hero)>.team-collage{position:absolute;right:0;top:0;bottom:0;width:50%;height:100%;aspect-ratio:auto;z-index:0}
.layout-system :is(#inhalt,main) :is(.detail-hero,.collage-hero):has(>.team-collage)>:not(.team-collage){position:relative;z-index:1;max-width:48%}
.layout-system :is(#inhalt,main) :is(.detail-hero,.collage-hero):has(>.team-collage) h1{font-size:clamp(44px,4.5vw,64px);max-width:20ch}
.layout-system :is(#inhalt,main) :is(.detail-hero,.collage-hero):has(>.team-collage) p{font-size:19px;line-height:1.55}
.layout-system .detail-hero>.breadcrumb{margin-bottom:24px}
/* Overview cards keep their agreed 40/60 ratio. */
.layout-system main .solution-card figure .team-collage{height:100%;aspect-ratio:auto}
.layout-system main .solution-card .team-collage img.person-0{width:140%;left:-20%;height:98%;object-fit:contain!important}
.layout-system main .solution-card .collage-symbol{width:40px;left:8%;top:5%;border-width:1.5px;border-radius:10px}
.layout-system main .solution-card .collage-disc{width:110%;right:-20%;top:12%}
.layout-system :is(#inhalt,main) .solution-row.with-collage{grid-template-columns:180px minmax(0,1fr) 32px;column-gap:32px}
.layout-system :is(#inhalt,main) .solution-row>.team-collage{grid-row:1/3;grid-column:1;width:180px;aspect-ratio:1}
.layout-system :is(#inhalt,main) .solution-row.with-collage h2,.layout-system :is(#inhalt,main) .solution-row.with-collage p{grid-column:2}
.layout-system :is(#inhalt,main) .solution-row.with-collage>svg{grid-column:3;grid-row:1}
.layout-system :is(#inhalt,main) .solution-row .collage-symbol{width:42px;border-radius:10px}
.layout-system main .guide-hero>.team-collage{height:clamp(300px,34vw,480px);aspect-ratio:auto;max-width:none}
.layout-system main .guide-hero .team-collage img.person-0{left:42%;width:40%}
.layout-system main .guide-hero .team-collage img.person-1{left:15%;width:40%}
.layout-system main .guide-hero .collage-disc{width:35%;top:5%;right:15%}
.layout-system main .guide-hero .collage-symbol{left:15%;top:18%;width:100px}
.layout-system main .guide-preview .team-collage{height:260px;aspect-ratio:auto}
.layout-system main .check-art{margin-top:-40px;margin-right:calc(-1 * var(--page-edge));height:auto;align-self:stretch;display:flex}
.layout-system main .check-art .team-collage{height:100%;min-height:400px;aspect-ratio:auto}
/* Real photographs stay in colour; actual cutouts stay as delivered in black and white. */
.layout-system main .real-work-photo{margin:0;min-width:0;width:100%;overflow:hidden}
.layout-system main .real-work-photo>img,.layout-system main .location-photo>img{display:block;filter:none!important;mix-blend-mode:normal!important;width:100%;height:auto;max-height:580px;object-fit:cover;background:transparent;border-radius:0}
.layout-system main .real-work-photo figcaption,.layout-system main .location-photo figcaption{font-size:15px;line-height:1.5;padding:16px 0;color:var(--ink)}
.layout-system main .collage-hero:has(>.agency-real-hero){display:grid;grid-template-columns:1fr 1fr;gap:40px;padding-top:40px;padding-bottom:40px}
.layout-system main .agency-real-hero{align-self:stretch;margin-block:-40px;margin-right:calc(-1 * var(--page-edge));width:calc(100% + var(--page-edge));display:flex}
.layout-system main .agency-real-hero img{height:100%;max-height:none;object-position:45% center}
.layout-system main .home-work-photo{max-width:none;margin:0}
.layout-system main .home-work-photo img{max-height:520px;object-position:center 40%}
.layout-system main .real-work-section{padding-top:0}
.layout-system main .location-interior{margin-top:24px;max-width:900px}
.layout-system main .team-portrait{aspect-ratio:4/5;background:var(--purple);overflow:hidden;position:relative}
.layout-system main .team-portrait img{width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:none!important;background:transparent}
.layout-system main .team-member:nth-child(2) .team-portrait{background:var(--green)}
.layout-system main .team-member:nth-child(3) .team-portrait{background:var(--yellow)}
.layout-system main .team-member:nth-child(5) .team-portrait{background:var(--green)}
.layout-system main .team-member:nth-child(6) .team-portrait,.layout-system main .team-member:nth-child(7) .team-portrait{background:var(--orange)}
.layout-system main .actual-portrait{background:var(--green);padding:0;overflow:hidden;display:block}
.layout-system main .actual-portrait img{width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:none!important;background:transparent}
/* Balanced navigation, with only coloured text and a line on hover. */
.layout-system .activity-nav li:nth-child(1){--nav-accent:var(--yellow)}
.layout-system .activity-nav li:nth-child(2){--nav-accent:var(--green)}
.layout-system .activity-nav li:nth-child(3){--nav-accent:var(--seo-blue)}
.layout-system .activity-nav li:nth-child(4){--nav-accent:var(--pink)}
.layout-system .activity-nav li:nth-child(5){--nav-accent:var(--orange)}
.layout-system .activity-nav li:nth-child(6){--nav-accent:var(--purple)}
.layout-system .activity-nav li:nth-child(7){--nav-accent:var(--lemon)}
.layout-system .activity-nav a,.layout-system .activity-nav li:first-child a,.layout-system .activity-nav li:last-child a{justify-content:center;text-align:center;padding-inline:16px}
.layout-system .activity-nav a:hover,.layout-system .activity-nav a[aria-current="page"]{background:transparent;color:var(--nav-accent);border-bottom-color:var(--nav-accent)}
@media(max-width:760px){
 .layout-system :is(#inhalt,main) :is(.detail-hero,.collage-hero):has(>.team-collage){padding:28px 24px 0;min-height:0}
 .layout-system :is(#inhalt,main) :is(.detail-hero,.collage-hero):has(>.team-collage)>:not(.team-collage){max-width:100%}
 .layout-system :is(#inhalt,main) :is(.detail-hero,.collage-hero)>.team-collage{position:relative;inset:auto;width:calc(100% + 48px);height:350px;margin:24px -24px 0}
 .layout-system :is(#inhalt,main) .solution-row.with-collage{grid-template-columns:100px minmax(0,1fr) 24px;gap:16px;padding:24px}
 .layout-system :is(#inhalt,main) .solution-row>.team-collage{width:100px}
 .layout-system :is(#inhalt,main) .solution-row.with-collage p{grid-column:1/-1}
 .layout-system :is(#inhalt,main) .solution-row .collage-symbol{width:28px;left:4%;top:5%;border-radius:7px}
 .layout-system main .guide-hero>.team-collage{height:300px}
 .layout-system main .guide-hero .team-collage img.person-0{left:28%;width:65%}
 .layout-system main .guide-hero .team-collage img.person-1{left:-5%;width:60%}
 .layout-system main .guide-hero .collage-symbol{left:8%;width:64px;top:8%}
 .layout-system main .guide-hero .collage-disc{width:65%;right:5%}
 .layout-system main .check-art{height:320px;margin:0 -24px}
 .layout-system main .check-art .team-collage{min-height:0}
 .layout-system main .collage-hero:has(>.agency-real-hero){display:block;padding-bottom:0}
 .layout-system main .agency-real-hero{margin:28px calc(-1 * var(--page-edge)) 0;width:calc(100% + 2 * var(--page-edge));height:320px}
 .layout-system main .agency-real-hero img{height:320px}
 .layout-system .activity-nav a,.layout-system .activity-nav li:first-child a,.layout-system .activity-nav li:last-child a{padding-inline:8px}
}
.layout-system main .team-collage.people-3 img.person-2{left:58%;width:40%;height:72%}
.layout-system main .team-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 24px}
.layout-system main .team-member .portrait-placeholder{aspect-ratio:4/5;height:auto;min-height:0;border-radius:0}
.layout-system main .team-member h3{margin-top:16px}
@media(max-width:1000px){.layout-system main .team-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.layout-system main .team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.layout-system :is(#inhalt,main) .solution-row.with-collage h2{grid-row:1;min-width:0;overflow-wrap:anywhere;hyphens:auto}
.layout-system :is(#inhalt,main) .solution-row.with-collage p{grid-row:2;min-width:0}
@media(max-width:760px){.layout-system :is(#inhalt,main) .solution-row>.team-collage{grid-row:1}.layout-system :is(#inhalt,main) .solution-row.with-collage h2{font-size:30px}}
/* Full faces at every card height; legacy photo minimums must not crop cutouts. */
.layout-system main .team-collage img.real-person{min-height:0;min-width:0;transform:none!important}
.layout-system main .solution-card .team-collage img.person-0{left:3%;width:94%;height:94%;object-position:center bottom}
.layout-system main .team-collage.people-2 img.person-0{left:40%;width:58%;height:94%}
.layout-system main .team-collage.people-2 img.person-1{left:0;width:58%;height:88%}
.mobile-services{display:none}
@media(max-width:980px){
 .js .layout-system .activity-nav{display:none}
 .layout-system .navigation .mobile-services{display:block;width:100%}
 .layout-system .mobile-services summary{font-size:24px;font-weight:600;min-height:48px;cursor:pointer;display:flex;align-items:center;justify-content:space-between}
 .layout-system .mobile-services summary::after{content:'+';font-size:26px}
 .layout-system .mobile-services[open] summary::after{content:'−'}
 .layout-system .mobile-services ul{list-style:none;padding:12px 0 18px;margin:0;display:grid;grid-template-columns:1fr;gap:0}
 .layout-system .mobile-services li a{display:block;width:100%;font-size:18px;line-height:1.4;padding:12px 0;border-bottom:1px solid currentColor;text-decoration:none}
 .layout-system .mobile-services li a[aria-current="page"]{font-weight:700;text-decoration:underline;text-underline-offset:5px}
}
/* Team portraits share Julia's top margin; wide cutouts fill the same portrait frame. */
.layout-system main .team-portrait img{position:absolute;left:0;top:3%;width:100%;height:97%;max-width:none;object-fit:cover;object-position:center top}
.layout-system main .team-member:nth-child(4) .team-portrait img{top:-3%;height:103%}
.layout-system main .team-member:nth-child(6) .team-portrait img{top:5%;height:95%}
/* Topic-led editorial collages: individual photographic framing, no generic badges. */
.layout-system main .editorial-collage>.collage-scene{position:absolute;inset:0;width:100%;height:100%;min-height:0;max-height:none;object-fit:cover;object-position:center;filter:none;transform:none!important;opacity:.9;z-index:0}
.layout-system main .editorial-collage img.real-person{top:9%;bottom:auto;height:110%;object-fit:cover!important;object-position:center top;width:63%;left:33%}
.layout-system main .editorial-collage.people-1 img.person-0{left:16%;width:80%;height:110%;top:10%}
.layout-system main .editorial-collage.people-2 img.person-0{left:43%;width:56%;height:105%;top:10%}
.layout-system main .editorial-collage.people-2 img.person-1{left:1%;width:56%;height:100%;top:13%}
.layout-system main .editorial-collage.people-3 img.person-0{left:25%;width:50%;height:105%;top:10%}
.layout-system main .editorial-collage.people-3 img.person-1{left:0;width:44%;height:95%;top:16%}
.layout-system main .editorial-collage.people-3 img.person-2{left:61%;width:39%;height:94%;top:16%}
.layout-system main .solution-card .editorial-collage img.person-0{left:0;width:100%;height:101%;top:10%;object-position:center top}
.layout-system main .solution-card .editorial-collage.people-2 img.person-0{left:28%;width:80%;height:94%;top:16%}
.layout-system main .solution-card .editorial-collage.people-2 img.person-1{left:-13%;width:76%;height:87%;top:10%}
.layout-system main .editorial-collage img[data-person="svenja-camera"]{object-position:72% top}
.layout-system main .editorial-collage img[data-person="kati2"]{object-position:55% top;top:5%}
.layout-system main .guide-hero .editorial-collage img.real-person{object-fit:contain!important}
.layout-system main .solution-card .editorial-collage img.real-person{object-fit:cover!important}
.layout-system main .solution-card .editorial-collage.people-2 img.person-0{left:35%;width:65%;height:100%;top:15%}
.layout-system main .solution-card .editorial-collage.people-2 img.person-1{left:0;width:65%;height:95%;top:10%}
.layout-system main .solution-card .editorial-collage img[data-person="svenja-camera"]{object-position:right top}
@media(max-width:980px){
 .mobile-services li:nth-child(1){--link-tone:var(--yellow)}
 .mobile-services li:nth-child(2){--link-tone:var(--green)}
 .mobile-services li:nth-child(3){--link-tone:var(--seo-blue)}
 .mobile-services li:nth-child(4){--link-tone:var(--pink)}
 .mobile-services li:nth-child(5){--link-tone:var(--orange)}
 .mobile-services li:nth-child(6){--link-tone:var(--purple)}
 .mobile-services li:nth-child(7){--link-tone:var(--lemon)}
 .layout-system .mobile-services li a{position:relative;isolation:isolate;overflow:hidden;padding:14px 16px;transition:color .2s ease;border-bottom-color:color-mix(in srgb,currentColor 32%,transparent)}
 .layout-system .mobile-services li a::before{content:'';position:absolute;inset:0;background:var(--link-tone);z-index:-1;clip-path:inset(0 100% 0 0);transition:clip-path .55s cubic-bezier(.22,.61,.36,1)}
 .layout-system .mobile-services li a:is(:hover,:focus-visible,:active){color:var(--ink);text-decoration:none}
 .layout-system .mobile-services li a:is(:hover,:focus-visible,:active)::before{clip-path:inset(0)}
 .layout-system .mobile-services li a:focus-visible{outline:2px solid var(--link-tone);outline-offset:2px}
}
@media(prefers-reduced-motion:reduce){.layout-system .mobile-services li a,.layout-system .mobile-services li a::before{transition:none}}
/* Give the homepage artwork room at the right edge without changing its scroll motion. */
@media(min-width:981px){.layout-system :is(#inhalt,main) .hero-live .editorial-hero-image{right:clamp(36px,4vw,72px)}}
/* A consistent, clearly separated contact section across all topics. */
.layout-system :is(#inhalt,main) .personal-contact{background:var(--ink);color:#fff;border-top:0}
.layout-system :is(#inhalt,main) .personal-contact :is(h2,p,.eyebrow,.contact-person-role){color:#fff}
.layout-system :is(#inhalt,main) .personal-contact .button{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.layout-system :is(#inhalt,main) .personal-contact .text-link{background:transparent;color:#fff;border-color:#fff}
.layout-system :is(#inhalt,main) .personal-contact a:focus-visible{outline:3px solid #fff;outline-offset:5px}
.layout-system :is(#inhalt,main) .personal-contact .button:hover{background:#fff;border-color:#fff}
.layout-system :is(#inhalt,main) .personal-contact .text-link:hover{background:#fff;color:var(--ink)}
/* Solutions: six direct choices, echoing the homepage category palette. */
.header #mega-loesungen.solutions-panel{display:block;background:#fff;color:var(--ink);padding:24px;border-radius:0 0 18px 18px;max-width:1200px;margin-inline:auto}
.solutions-menu-head{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:18px}
.solutions-menu-head p{margin:0;font:600 17px/1.4 var(--body)}
.header .solutions-menu-head .solutions-overview{width:auto;padding:6px 0;font:500 15px/1.4 var(--body);border:0;border-radius:0;color:var(--ink);text-decoration:underline;text-underline-offset:5px;background:transparent}
.solutions-menu-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.header .solutions-menu-grid a.solution-menu-tile{display:grid;grid-template-columns:32px minmax(0,1fr) 22px;align-items:center;gap:14px;min-height:112px;width:100%;margin:0;padding:24px 20px;border:0;border-radius:12px;background:var(--tile-color);color:var(--ink);text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}
.solution-menu-tile strong{font:700 26px/1.15 var(--display);display:block}
.solution-menu-tile .service-icon{width:30px;height:30px;color:inherit;margin:0}
.solution-menu-tile .tile-arrow{width:21px;height:21px;transition:transform .2s ease}
.header .solutions-menu-grid a.solution-menu-tile:hover{transform:translateY(-2px);box-shadow:0 4px 0 var(--ink)}
.solution-menu-tile:hover .tile-arrow{transform:translate(2px,-2px)}
.header .solutions-menu-grid a.solution-menu-tile:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
@media(max-width:980px){
 .header #mega-loesungen.solutions-panel{padding:8px 0 20px;margin:0;background:transparent;box-shadow:none;border-radius:0;color:inherit;max-width:none}
 .solutions-menu-head{margin-bottom:14px;gap:12px}
 .solutions-menu-head p{display:none}
 .header .solutions-menu-head .solutions-overview{color:inherit;font-size:15px}
 .solutions-menu-grid{grid-template-columns:1fr;gap:10px}
 .header .solutions-menu-grid a.solution-menu-tile{min-height:76px;padding:18px 20px;grid-template-columns:28px minmax(0,1fr) 20px}
 .solution-menu-tile strong{font-size:25px}
 .solution-menu-tile .service-icon{width:27px;height:27px}
}
@media(prefers-reduced-motion:reduce){.header .solutions-menu-grid a.solution-menu-tile,.solution-menu-tile .tile-arrow{transition:none}}
/* One dark header on every route, including sticky and expanded mobile states. */
body.layout-system .header{background:var(--ink);color:#fff;border-bottom-color:transparent}
body.layout-system .header .brand{filter:brightness(0) invert(1)}
body.layout-system .header .navigation{color:#fff}
body.layout-system .header .navigation>a,body.layout-system .header .nav-disclosure>summary{color:#fff}
body.layout-system .header .menu-button{color:#fff;border-color:#fff;background:transparent}
body.layout-system .header .navigation>.nav-contact{border-color:rgba(255,255,255,.65)}
body.layout-system .header .navigation.is-open{border-top-color:rgba(255,255,255,.25)}
body.layout-system .header #mega-loesungen.solutions-panel{background:var(--ink);color:#fff}
body.layout-system .header .solutions-menu-head .solutions-overview{color:#fff}
body.layout-system .header a:focus-visible,body.layout-system .header summary:focus-visible,body.layout-system .header button:focus-visible{outline-color:var(--yellow)}
/* The category colour fills exactly one navigation segment, left to right. */
.layout-system .activity-nav a{position:relative;isolation:isolate;overflow:hidden;transition:color .18s ease}
.layout-system .activity-nav a::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--nav-accent);clip-path:inset(0 100% 0 0);transition:clip-path .45s cubic-bezier(.22,.61,.36,1)}
.layout-system .activity-nav a:is(:hover,:focus-visible,:active){color:var(--ink);background:transparent;border-bottom-color:var(--nav-accent);text-decoration:none}
.layout-system .activity-nav a:is(:hover,:focus-visible,:active)::before{clip-path:inset(0)}
.layout-system .activity-nav a:focus-visible{outline:2px solid var(--ink);outline-offset:-5px}
@media(prefers-reduced-motion:reduce){.layout-system .activity-nav a,.layout-system .activity-nav a::before{transition:none}}
.layout-system main .agency-intro-gallery h2{max-width:28ch}
.layout-system main .agency-intro-copy{max-width:80ch;margin-block:24px 16px}
.agency-location-line{font-weight:600;margin-bottom:32px}
.agency-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start}
.agency-gallery figure{margin:0;min-width:0}
.agency-gallery .gallery-open{display:block;position:relative;background:#f4f4ef;border-radius:8px;overflow:hidden}
.agency-gallery img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain}
.agency-gallery figcaption{padding-top:12px;font-size:16px;line-height:1.5}
.gallery-zoom{position:absolute;bottom:12px;right:12px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--ink);color:#fff;font-size:24px}
.gallery-open:focus-visible{outline:3px solid var(--ink);outline-offset:5px}
.gallery-is-open{overflow:hidden}
.agency-lightbox{position:fixed;inset:0;margin:auto;width:min(1200px,96vw);max-width:96vw;max-height:96dvh;padding:20px;border:0;background:var(--ink);color:#fff;border-radius:12px}
.agency-lightbox::backdrop{background:rgba(0,15,25,.88)}
.agency-lightbox figure{margin:16px 0;text-align:center}
.agency-lightbox img{display:block;width:100%;height:auto;max-height:70dvh;object-fit:contain}
.agency-lightbox figcaption{padding-top:12px}
.agency-lightbox button{background:transparent;color:#fff;border:1px solid #fff;border-radius:24px;min-height:44px;padding:8px 18px;cursor:pointer}
.agency-lightbox button:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.lightbox-close{display:block;margin-left:auto}
.lightbox-controls{display:flex;justify-content:center;align-items:center;gap:24px}
@media(max-width:760px){.agency-gallery{grid-template-columns:1fr;gap:24px}.agency-lightbox{padding:16px}.agency-lightbox img{max-height:65dvh}}
.layout-system main .home-journal{background:color-mix(in srgb,var(--yellow) 14%,white)}
.journal-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:32px}
.journal-heading .text-link{flex:none}
.home-journal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.home-journal-grid .guide-preview{min-width:0;background:#fff;padding:0 0 24px;overflow:hidden;border-radius:12px}
.home-journal-grid .guide-preview h3,.home-journal-grid .guide-preview>p{margin:20px 24px 0}
.layout-system main .home-journal-grid .guide-preview h3{font-size:30px;line-height:1.15}
.home-journal-grid .guide-preview>p{font-size:17px;line-height:1.5}
.home-journal-grid .guide-preview-image{display:block;margin:0}
@media(max-width:760px){.journal-heading{display:block}.journal-heading .text-link{display:inline-block;margin-top:20px}.home-journal-grid{grid-template-columns:1fr}}
.customer-logo-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;align-items:stretch}
.customer-wordmark{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:140px;padding:20px;text-align:center;border:1px solid #d8dfe0;border-radius:8px;color:var(--ink);background:#fff}
.customer-wordmark strong{font:600 21px/1.2 var(--body)}
.customer-wordmark small{font-size:12px;line-height:1.3;color:#52626a}
.customer-wordmark:hover{border-color:var(--ink);background:#f5f5f0}
.customer-intro{background:var(--purple)}
.layout-system main .customer-intro h1{max-width:20ch}
.customer-intro>p:last-child{max-width:65ch}
.customer-feature{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
.customer-media-placeholder{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:36px;min-height:340px;background:var(--pink);border-radius:12px;color:var(--ink)}
.customer-media-placeholder>span{font-size:13px;padding:7px 10px;background:#fff;border-radius:4px}
.customer-media-placeholder strong{font:700 48px/1.1 var(--display);margin:28px 0 12px}
.customer-media-placeholder p{max-width:30ch;font-size:17px}
.group-placeholder{background:var(--purple)}
.customer-editor-note{font-size:15px;color:#52626a}
.customer-more-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.customer-small-placeholder{padding:40px 24px;margin-block:20px;background:#f3f3ed;border:1px dashed #819095;color:#52626a;text-align:center}
@media(max-width:1100px){.customer-logo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.customer-logo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.customer-feature,.customer-more-grid{grid-template-columns:1fr}.customer-media-placeholder{min-height:260px;padding:24px}.customer-wordmark{padding:14px;min-height:120px}.customer-wordmark strong{font-size:18px}.customer-logo-grid>.customer-wordmark:last-child{grid-column:1/-1}}
/* Keep text clear of card edges; the image remains full bleed. */
.home-journal-grid .guide-preview{padding-bottom:0}
.home-journal-grid .guide-preview-copy{padding:24px 24px 30px}
.layout-system #inhalt .home-journal-grid .guide-preview-copy h3,.layout-system #inhalt .home-journal-grid .guide-preview-copy p{margin:0 0 20px}
.layout-system #inhalt .home-journal-grid .guide-preview-copy p:last-child{margin-bottom:0}
.customer-wordmark .customer-logo{display:block;width:100%;height:72px;object-fit:contain;max-width:210px}
.customer-feature-copy>.customer-logo{display:block;width:180px;height:65px;object-fit:contain;object-position:left center;margin-bottom:24px}
.customer-project-image{margin:0;min-width:0}
.customer-project-image>img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:12px}
.layout-system #inhalt .customer-project-image figcaption{font-size:12px;color:#52626a;padding-top:10px}
.customer-team-hero{display:grid;grid-template-columns:1fr 1.15fr;align-items:center;gap:24px;overflow:hidden}
.customer-team-collage{position:relative;height:460px;isolation:isolate;background:linear-gradient(150deg,transparent 0 16%,#f5f1e8 16% 54%,transparent 54%),linear-gradient(25deg,transparent 0 55%,#001c2b 55% 66%,transparent 66%)}
.customer-team-collage .customer-person{position:absolute;width:34%;height:69%;object-fit:cover;object-position:center top;top:2%;left:0;filter:grayscale(1)}
.customer-team-collage .person-1{left:32%;top:0}
.customer-team-collage .person-2{left:65%;top:5%}
.customer-team-collage .person-3{left:5%;top:39%;z-index:2}
.customer-team-collage .person-4{left:36%;top:41%;z-index:3}
.customer-team-collage .person-5{left:67%;top:40%;z-index:2}
@media(max-width:980px){.customer-team-hero{grid-template-columns:1fr}.customer-team-collage{width:min(100%,650px);height:440px;margin:0 auto}}
@media(max-width:480px){.customer-team-collage{height:310px}.home-journal-grid .guide-preview-copy{padding:22px 22px 28px}}
:root{--seo-blue:#89c7e8}
body[data-category="blue"]{--theme:var(--seo-blue)}
.layout-system .activity-nav li:nth-child(3){--nav-accent:var(--seo-blue)}
.mobile-services li:nth-child(3){--link-tone:var(--seo-blue)}
.customer-services{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:24px 0 0}
.customer-services li{font-size:14px;line-height:1.35;padding:8px 13px;border-radius:20px;background:#f0f3f3;color:var(--ink)}
/* Preserve original brand colours and photographic customer concepts. */
.layout-system #inhalt img.customer-logo,.layout-system #inhalt .customer-project-image img{filter:none!important;mix-blend-mode:normal!important;opacity:1}
/* SEO owns blue, including inherited theme surfaces and image treatment. */
.layout-system.service-search{--theme:var(--seo-blue);--photo-filter:none}
.layout-system.service-search main .collage-scene{filter:none!important}
/* Agency photography is shown as photographed; team cards share a quiet base. */
.layout-system .agency-gallery img,.agency-lightbox img{filter:none!important;mix-blend-mode:normal!important;opacity:1}
.layout-system.agency-page #team .team-portrait,.layout-system.agency-page .actual-portrait{background:#eef0ef!important}
.layout-system.agency-page #zusammenarbeit{background:#f3f4f3;color:var(--ink)}
.layout-system.agency-page #team .portrait-placeholder,.layout-system.service-search .actual-portrait{background:#eef0ef;color:var(--ink)}
/* One shared contact section, including a deliberate two-column mobile layout. */
.layout-system #inhalt .personal-contact .actual-portrait{background:#eef0ef!important;aspect-ratio:4/5;width:100%;align-self:start}
.layout-system #inhalt .personal-contact .actual-portrait img{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom}
@media(max-width:760px){
 .layout-system #inhalt .personal-contact{display:grid;grid-template-columns:clamp(88px,27vw,160px) minmax(0,1fr);gap:12px 18px;align-items:start}
 .personal-contact-copy{display:contents}
 .layout-system #inhalt .personal-contact .contact-portrait{grid-column:1;grid-row:1/5;margin:0}
 .layout-system #inhalt .personal-contact-copy>p,.layout-system #inhalt .personal-contact-copy>h2{grid-column:2;margin:0;max-width:none}
 .layout-system #inhalt .personal-contact-copy>.eyebrow{font-size:12px;line-height:1.35}
 .layout-system #inhalt .personal-contact-copy>h2{font-size:36px;line-height:1.1}
 .layout-system #inhalt .personal-contact-copy>.contact-person-role{font-size:14px;line-height:1.4}
 .layout-system #inhalt .personal-contact-copy>p:not(.eyebrow):not(.contact-person-role){font-size:16px;line-height:1.5}
 .personal-contact-actions{grid-column:1/-1;display:flex;flex-direction:row;align-items:center;gap:12px;margin-top:12px}
 .layout-system #inhalt .personal-contact-actions a{justify-content:center;min-height:46px}
}
@media(max-width:480px){.footer-bottom,.footer-bottom>span{min-width:0;max-width:100%;flex-wrap:wrap}.footer-bottom a{white-space:normal;overflow-wrap:anywhere}}
/* Consistent content edges, neutral footer and paired editorial photography. */
.layout-system #inhalt p,.layout-system #inhalt .split-heading,.layout-system #inhalt .section-top{max-width:none}
.layout-system #inhalt .personal-contact{grid-template-columns:minmax(180px,280px) minmax(0,1fr)}
.layout-system #inhalt .personal-contact-copy{min-width:0;width:100%}
.layout-system #inhalt .personal-contact-copy>p{max-width:none}
.layout-system #inhalt .image-text-panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;overflow:hidden;border-radius:12px;background:#f2f4f3;align-items:stretch}
.layout-system #inhalt .image-text-copy{padding:clamp(24px,3.2vw,48px);min-width:0;align-self:center}
.layout-system #inhalt .image-text-copy .split-heading{margin-bottom:0}
.layout-system #inhalt .image-text-copy h2{max-width:none}
.layout-system #inhalt .image-text-panel .real-work-photo{position:relative;min-height:360px;height:100%;overflow:hidden;border-radius:0;margin:0}
.layout-system #inhalt .image-text-panel .real-work-photo img{width:100%;height:100%;max-height:none;object-fit:cover;position:absolute;inset:0;filter:none!important;border-radius:0}
.layout-system #inhalt .image-text-panel figcaption{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,28,43,.88));color:white;padding:36px 24px 20px;font-size:14px}
.layout-system #inhalt .service-intro-panel{margin-bottom:32px}
.layout-system #inhalt .actual-portrait,.layout-system #inhalt .team-portrait,.layout-system #inhalt .portrait-placeholder,.layout-system #inhalt .real-work-photo,.layout-system #inhalt .location-photo,.layout-system #inhalt .agency-real-hero{border-radius:12px;overflow:hidden}
.layout-system .footer{background:#f5f6f5;color:var(--ink);margin-top:0}
.layout-system .footer .brand img{filter:none!important}
.layout-system .footer-top,.layout-system .footer-bottom{color:var(--ink);border-color:#d1d8d9}
.layout-system .footer-top{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;width:100%}
.layout-system .footer-top>div{align-items:flex-end;text-align:right;min-width:0}
.layout-system .footer-top>div a{max-width:100%;overflow-wrap:anywhere}
@media(max-width:760px){
 .layout-system #inhalt .personal-contact{grid-template-columns:clamp(88px,27vw,160px) minmax(0,1fr)}
 .layout-system #inhalt .personal-contact-copy{width:auto}
 .layout-system #inhalt .image-text-panel{grid-template-columns:1fr}
 .layout-system #inhalt .image-text-panel .real-work-photo{min-height:0;aspect-ratio:4/3}
 .layout-system .footer-top{grid-template-columns:1fr;gap:24px}
 .layout-system .footer-top>div{align-items:flex-start;text-align:left}
}
.layout-system #inhalt .acq-heading,.layout-system #inhalt .service-lead{max-width:none}

/* Customer directory and agency accent, October 2026. */
.layout-system .customer-logo-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.layout-system .customer-wordmark{min-height:160px;padding:26px;display:flex;align-items:center;justify-content:center}
.layout-system .customer-wordmark .customer-logo{width:100%;max-width:250px;height:100px;object-fit:contain}
.customer-wordmark:focus-visible,.customer-back:focus-visible{outline:3px solid #00202b;outline-offset:5px}
#kunden-uebersicht,.customer-feature{scroll-margin-top:120px}
.customer-back{display:inline-block;margin-top:24px;text-underline-offset:5px;font-weight:600}
.layout-system .customer-team-hero{position:relative;display:flex;align-items:center;min-height:580px;overflow:hidden}
.layout-system .customer-hero-copy{position:relative;z-index:2;width:46%;padding:24px 0}
.layout-system .customer-team-collage{position:absolute;inset:0 0 0 auto;width:50%;height:100%;margin:0;border-radius:0}
.layout-system.agency-page{--agency-lime:#d9ed60}
.layout-system.agency-page #team .team-portrait,
.layout-system.agency-page #team .actual-portrait,
.layout-system.agency-page #team .portrait-placeholder,
.layout-system.agency-page #zusammenarbeit{background:var(--agency-lime)!important;color:var(--ink)}
.layout-system.agency-page .category-hero>.breadcrumb{padding:0;margin:0 0 28px;background:transparent}
@media(max-width:980px){
 .layout-system .customer-team-hero{display:block;padding-bottom:0}
 .layout-system .customer-hero-copy{width:100%;max-width:none;padding:0 0 32px}
 .layout-system .customer-team-collage{position:relative;inset:auto;width:calc(100% + 2 * var(--page-edge));max-width:none;height:480px;margin:0 calc(-1 * var(--page-edge))}
 .layout-system .customer-logo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:480px){
 .layout-system .customer-team-collage{height:340px}
 .layout-system .customer-logo-grid{gap:12px}
 .layout-system .customer-wordmark{min-height:120px;padding:18px}
 .layout-system .customer-wordmark .customer-logo{height:78px}
}
.layout-system .customer-logo-grid>.customer-wordmark:last-child{grid-column:auto}

/* The blog directory shares the homepage journal card system. */
.layout-system.blog-index-page #inhalt>.blog-index-heading,
.layout-system.blog-index-page #inhalt>.blog-card-grid{background:color-mix(in srgb,var(--yellow) 14%,white)}
.layout-system.blog-index-page #inhalt>.blog-index-heading{padding-bottom:32px}
.layout-system.blog-index-page #inhalt>.blog-card-grid{padding-top:0;gap:24px}
.layout-system.blog-index-page #inhalt>.blog-index-heading h1{font-size:var(--type-h2);line-height:1.12;max-width:none}
.layout-system #inhalt .blog-card-grid .guide-preview-copy h2{font-size:30px;line-height:1.15;margin:0 0 20px}
.home-journal-grid .guide-preview-copy{display:flex;flex-direction:column;flex:1;width:100%;box-sizing:border-box}
.layout-system #inhalt .home-journal-grid .guide-preview-copy p:last-child{margin-top:auto}
.layout-system.guide-page #inhalt .guide-hero h1{font-size:var(--type-h1);line-height:1.04}
.layout-system.guide-page #inhalt .legal-content{font-size:18px;line-height:1.65}
.layout-system.guide-page #inhalt .legal-content :is(p,li,dt,dd){font-size:18px;line-height:1.65}
.layout-system.guide-page #inhalt .legal-content :is(h1,h2,h3,h4,h5,h6){font-family:var(--display);font-weight:700;line-height:1.12;letter-spacing:-.015em}
.layout-system.guide-page #inhalt .legal-content h1{font-size:var(--type-h1)}
.layout-system.guide-page #inhalt .legal-content h2{font-size:var(--type-h2)}
.layout-system.guide-page #inhalt .legal-content h3{font-size:var(--type-h3)}
.layout-system.guide-page #inhalt .legal-content h4{font-size:var(--type-h4)}
.layout-system.guide-page #inhalt .legal-content h5{font-size:var(--type-h5)}
.layout-system.guide-page #inhalt .legal-content h6{font-size:var(--type-h6)}

/* Breadcrumbs belong to their hero rather than a separate strip. */
.layout-system #inhalt :is(.category-hero,.text-hero)>.breadcrumb,
.layout-system #inhalt .guide-hero-copy>.breadcrumb{padding:0;margin:0 0 28px;background:transparent;grid-column:1/-1;font-size:14px}
.layout-system #inhalt .collage-hero-copy h1{max-width:20ch}

/* Final shared rhythm: align editorial pages to the same outer grid. */
.layout-system #inhalt .guide-hero{margin:0;width:100%;max-width:none}
.layout-system #inhalt .guide-hero-copy{max-width:none;width:100%;padding:var(--space-section) var(--page-edge)}
.layout-system #inhalt .legal-content{max-width:none;width:100%;padding:var(--space-section) var(--page-edge)}
.layout-system #inhalt>.layout-section>h2,
.layout-system #inhalt .guide-hero h1{max-width:none}
.layout-system #inhalt .layout-section>:last-child{margin-bottom:0}
.layout-system .footer .brand{filter:brightness(0)!important}
.layout-system .footer{padding-inline:var(--page-edge)}
.layout-system #inhalt .solution-card{transform:none!important}
.layout-system #inhalt :is(.guide-hero,.text-hero):not(.collage-hero){row-gap:24px}
.layout-system #inhalt .guide-hero-copy>.breadcrumb{overflow-wrap:anywhere}
.layout-system :is(input,textarea){caret-color:var(--ink)}
.layout-system ::selection{background:#d9ed60;color:#00202b}
.layout-system :is(a,button,input,textarea,select,summary):focus-visible{outline:2px solid currentColor;outline-offset:5px}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 .layout-system :is(.button,.text-link) svg{transition:transform 180ms cubic-bezier(.16,1,.3,1)}
 .layout-system :is(.button,.text-link):hover svg{transform:translate(2px,-2px)}
 .layout-system .customer-wordmark{transition:background-color 180ms ease,border-color 180ms ease}
 .layout-system .customer-wordmark:hover{background:#f4f6f5;border-color:var(--ink)}
 .layout-system .guide-preview h2 a,.layout-system .guide-preview h3 a{text-decoration-thickness:1px;text-underline-offset:5px}
 .layout-system .guide-preview h2 a:hover,.layout-system .guide-preview h3 a:hover{text-decoration:underline}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto!important}
 .layout-system :is(.button,.text-link,.customer-wordmark){transition:none!important}
}

@media(min-width:761px) and (max-width:1000px){.layout-system #inhalt .home-journal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Gallery images are buttons, never direct download links. */
button.gallery-open{display:block;width:100%;padding:0;border:0;background:transparent;color:inherit;font:inherit;cursor:zoom-in;text-align:inherit}

/* Clear homepage headline and outlined jump link. */
.layout-system #inhalt .editorial-copy h1 span{display:block;max-width:none;width:auto;white-space:nowrap}
.layout-system #inhalt .hero-services.hero-outline{display:inline-flex;width:fit-content;max-width:100%;align-items:center;gap:16px;border:1px solid #fff;border-radius:999px;padding:14px 22px;color:#fff;background:transparent;font-size:18px;font-weight:600;line-height:1.4;text-decoration:none;min-height:52px}
.layout-system #inhalt .hero-services.hero-outline svg{width:22px;height:22px;flex:none}
.layout-system #inhalt .hero-services.hero-outline:hover{background:#fff;color:var(--ink)}
@media(max-width:480px){.layout-system #inhalt .editorial-copy h1{font-size:clamp(34px,9.4vw,44px)}}

/* Mobile hero: copy first, megaphone grounded at the section edge. */
@media(max-width:760px){
 .layout-system #inhalt .hero-live{display:flex;flex-direction:column;gap:28px;padding:32px var(--page-edge) 0;overflow:hidden}
 .layout-system #inhalt .hero-live .editorial-copy{order:0;width:100%;max-width:none}
 .layout-system #inhalt .hero-live .editorial-hero-image{order:1;position:relative;inset:auto;flex:none;width:calc(100% + 2 * var(--page-edge));height:clamp(280px,62vw,440px);min-height:0;margin:0 calc(-1 * var(--page-edge));overflow:hidden}
 .layout-system #inhalt .hero-live .hero-arm{left:0;right:auto;bottom:-2px;width:62%;height:100%;object-fit:contain;object-position:left bottom;transform:none;animation:none}
 .layout-system #inhalt .hero-live .hero-words{left:auto;right:var(--page-edge);top:20%;gap:7px;justify-items:end;translate:none}
 .layout-system #inhalt .hero-live .hero-words span{font-size:clamp(20px,4.1vw,30px);padding:7px 10px;margin:0}
}

/* Original customer photography in the established rounded editorial frame. */
.customer-project-photo{position:relative;isolation:isolate;border-radius:12px;overflow:hidden}
.customer-project-photo::after{content:"";position:absolute;pointer-events:none;top:0;left:0;width:30%;height:17%;background:#fff5df;border-bottom-right-radius:100% 100%;opacity:.92}

/* Seven-person customer hero: four behind, three aligned with the lower edge. */
.customer-team-collage .customer-person.person-0{left:-2%;width:29%;height:66%;top:0}
.customer-team-collage .customer-person.person-6{left:22%;width:31%;height:72%;top:-3%;z-index:1}
.customer-team-collage .customer-person.person-1{left:47%;width:29%;height:66%;top:0}
.customer-team-collage .customer-person.person-2{left:72%;width:29%;height:66%;top:4%}
.customer-team-collage .customer-person.person-3{left:0;width:39%;height:75%;top:auto;bottom:-4%;object-position:center top;z-index:3}
.customer-team-collage .customer-person.person-4{left:34%;width:36%;height:66%;top:auto;bottom:-2%;z-index:4}
.customer-team-collage .customer-person.person-5{left:66%;width:36%;height:67%;top:auto;bottom:-2%;z-index:3}
.layout-system main #team .christian-team-portrait img{left:-10%;top:-6%;width:120%;height:120%;object-fit:cover;object-position:center top}

/* Keep portrait silhouettes intact in the narrow solution-card artwork. */
.layout-system main .solution-card .editorial-collage img.real-person{object-fit:contain!important;object-position:center bottom;top:auto;bottom:-2%;height:auto;width:100%;left:0;max-height:94%}
.layout-system main .solution-card .editorial-collage.people-2 img.person-0{left:0;width:72%;height:auto;top:auto;bottom:-2%;z-index:4}
.layout-system main .solution-card .editorial-collage.people-2 img.person-1{left:28%;width:72%;height:auto;top:auto;bottom:-2%;z-index:3}
.layout-system main .solution-card .editorial-collage.people-3 img.person-0{left:18%;width:64%;height:auto;top:auto;bottom:-2%;z-index:5}
.layout-system main .solution-card .editorial-collage.people-3 img.person-1{left:0;width:64%;height:auto;top:auto;bottom:17%;z-index:3}
.layout-system main .solution-card .editorial-collage.people-3 img.person-2{left:36%;width:64%;height:auto;top:auto;bottom:9%;z-index:4}