/* Kaanisol – kräftige Gestaltung, Fassung 03 */
:root{--ink:#0b264c;--navy:#061d41;--blue:#07468e;--orange:#ff8a25;--pale:#eef2f6}
.topline{background:#061a39;color:#aabdd6;letter-spacing:.09em}.header-inner{min-height:120px}.brand{flex-basis:282px}.brand img{width:282px}.site-header nav{font-size:12px;text-transform:uppercase;letter-spacing:.055em;gap:26px}.site-header nav .nav-contact{background:var(--navy);padding:20px 24px}.hero-wrap{position:relative;background:#061a36;color:white;overflow:hidden;isolation:isolate}.hero-wrap:before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse at 85% 35%,#16416a 0%,#082341 42%,#041b37 85%)}.hero-wrap:after{content:"";position:absolute;top:-100px;bottom:-90px;right:9%;width:28%;background:linear-gradient(165deg,#1b66a433,#0b43751a);transform:skewX(-18deg);z-index:-1;border-inline:1px solid #8aafd118}.hero{width:calc(100% - 104px);max-width:1380px;grid-template-columns:.9fr 1.15fr;gap:15px;padding-top:80px;padding-bottom:44px;min-height:665px;align-items:center}.hero-copy{position:relative;z-index:2}.hero .eyebrow{font-size:9px;letter-spacing:.15em;color:#b9cadd;white-space:normal}.hero .eyebrow>span:first-child{width:22px;height:2px}.hero h1{font-size:clamp(70px,7.5vw,114px);font-weight:800;line-height:.9;letter-spacing:-.058em;margin:31px 0 27px}.hero h1 em{font-style:normal;font-weight:800;color:#ff8a25}.hero-lead{font-size:24px;line-height:1.35;color:white;letter-spacing:-.025em}.hero-description{font-size:14px;color:#b0c1d7;line-height:1.85;max-width:425px;margin-top:20px}.hero-actions{margin-top:31px;gap:22px}.hero .kaanisol-button.primary{background:white;color:var(--navy);font-size:12px;gap:22px;padding:20px 21px}.hero .kaanisol-button.primary:hover{background:#ff8a25!important;color:var(--navy)}.hero .text-link{font-size:11px;color:white}.hero .hero-note{font-size:10px;color:#a8bad2;margin-top:25px}.hero .small-mark{color:#ff8a25;border-color:#819fc141}.hero-bottom{border-top:1px solid #809db029;display:flex;align-items:center;gap:32px;min-height:66px;font-size:9px;font-weight:600;letter-spacing:.12em;color:#91a9c4}.hero-bottom a{margin-left:auto;display:flex;gap:22px;align-items:center;color:#e4edf8}.hero-bottom a span{color:#ff8a25;font-size:22px}.principles{border:0;background:#edf2f6}.principles-inner{min-height:86px}.principles-inner>span{font-size:12px;letter-spacing:.02em}.principles b{border:0;color:var(--orange);font-weight:700;background:#fff}.section{padding-block:105px}h2{font-size:clamp(31px,3.1vw,46px);font-weight:800;line-height:1.06;letter-spacing:-.045em}h2 em{font-style:normal;color:var(--blue);font-weight:400}.section-intro .eyebrow{font-size:9px;letter-spacing:.18em}.service summary{padding-block:31px}.service-title{font-size:26px;font-weight:600}.service-no{color:var(--orange);font-weight:700}.service-short{font-size:11px;text-transform:uppercase;letter-spacing:.08em}.service[open]{border-top:2px solid var(--navy)}.service-content p{font-size:14px}.work-section{background:#061d41;position:relative;overflow:hidden}.work-section h2 em{color:#7bacd5}.work-section:before{content:"";position:absolute;width:500px;height:500px;right:-250px;top:-100px;transform:rotate(25deg);border:1px solid #688dba30;pointer-events:none}.work-grid{grid-template-columns:1.32fr 1fr 1fr;gap:22px;align-items:start}.work-card:first-child .work-photo{height:410px}.work-card:nth-child(2){padding-top:70px}.work-card:nth-child(3){padding-top:125px}.work-photo{height:320px}.work-caption{padding-top:19px;border-color:#5379a142}.work-caption>span{color:var(--orange)}.work-caption strong{font-size:13px}.team-section{padding-bottom:70px}.team-card{background:#f3f5f8;padding:22px}.team-grid{gap:30px}.portrait{height:340px;background:#dee6ef;border:0}.portrait-martin{background:#e2e7ee}.portrait:before{border-color:#bbcad9}.portrait:after{border-color:#b9cbd6}.monogram{font-size:120px;font-weight:700;color:#bacbdc;transform:rotate(-5deg)}.person-info{padding:29px 10px 0}.person-info h3{font-size:32px;font-weight:700}.person-role{font-size:9px;font-weight:700;letter-spacing:.055em}.person-info>p{font-size:13px}.person-contact{font-size:11px}.process{padding-top:74px;padding-bottom:95px}.steps h3{font-weight:600}.contact-section{background:#061d41}.contact-section:before{border-radius:0;border:0;width:420px;height:900px;left:auto;right:10%;top:-160px;transform:rotate(25deg);background:#14538822}.contact-inner{position:relative;z-index:1;padding-block:100px;grid-template-columns:1.2fr 1fr}.contact-inner h2{font-size:clamp(48px,5.2vw,76px);font-weight:800;letter-spacing:-.05em}.contact-inner h2 em{color:#ff8a25;font-weight:800}.contact-inner .kaanisol-button.white{padding:20px 24px}.contact-block>span{font-size:9px;letter-spacing:.13em;color:#7ca2c9}.site-footer{padding-top:38px}.footer-brand img{width:210px}.site-footer p{font-size:11px}.footer-bottom{font-size:9px}
@media(min-width:1600px){.hero{gap:30px;min-height:730px;padding-top:90px}}
@media(max-width:1150px){.brand{flex-basis:230px}.brand img{width:230px}.header-inner{min-height:108px}.site-header nav{font-size:10px;gap:19px}.site-header nav .nav-contact{padding:17px 19px;gap:20px}.hero{width:calc(100% - 64px);padding-top:65px;padding-bottom:40px;min-height:640px;grid-template-columns:1fr 1fr}.hero h1{font-size:83px}.hero-lead{font-size:22px}.hero-description{font-size:13px;max-width:375px}.hero-actions{gap:20px}.hero .kaanisol-button.primary{padding:18px}.hero-bottom{gap:24px;font-size:8px}.work-card:first-child .work-photo{height:340px}.work-photo{height:270px}.work-card:nth-child(2){padding-top:55px}.work-card:nth-child(3){padding-top:95px}.person-role{font-size:8px}.team-card{padding:17px}.portrait{height:310px}}
@media(max-width:850px){.brand,.brand img{width:192px;flex-basis:192px}.header-inner{min-height:95px}.site-header nav{font-size:9px;gap:15px}.hero{gap:7px;min-height:570px;padding-top:48px}.hero h1{font-size:68px}.hero-lead{font-size:19px}.hero-description{font-size:12px}.hero .eyebrow{font-size:8px}.hero .text-link{font-size:10px}.hero .hero-note{max-width:310px;font-size:9px}.hero-bottom{gap:18px;font-size:7px;min-height:57px}.hero-bottom a{gap:12px}.section{padding-block:78px}.work-grid{grid-template-columns:1.2fr 1fr 1fr;gap:15px}.work-photo{height:230px}.work-card:first-child .work-photo{height:295px}.work-card:nth-child(2){padding-top:45px}.work-card:nth-child(3){padding-top:75px}.work-caption{gap:8px}.work-caption strong{font-size:11px}.team-card{padding:15px}.team-grid{gap:22px}.portrait{height:260px}.person-info{padding-inline:5px}.person-info h3{font-size:27px}.person-info>p{min-height:110px;font-size:12px}.person-role{min-height:32px;line-height:1.5}.contact-inner{padding-block:80px}}
@media(max-width:680px){.topline .shell{min-height:28px}.brand,.brand img{width:205px;flex-basis:205px}.header-inner{min-height:88px}.site-header nav{top:88px;font-size:12px;text-transform:none;letter-spacing:0}.site-header nav>a{padding-block:15px}.hero{width:calc(100% - 40px);grid-template-columns:1fr;padding:39px 0 25px;gap:0;min-height:0}.hero .eyebrow{font-size:8px;letter-spacing:.1em}.hero h1{font-size:clamp(65px,17vw,89px);margin:27px 0 24px}.hero-lead{font-size:21px}.hero-description{font-size:13px;max-width:440px;margin-top:17px}.hero-actions{margin-top:23px;gap:17px}.hero .kaanisol-button.primary{padding:17px 16px;font-size:11px;gap:17px}.hero .text-link{font-size:9px;gap:7px}.hero .hero-note{max-width:none;font-size:9px;margin-top:19px}.hero-bottom{padding-block:20px;min-height:0;gap:14px;flex-wrap:wrap;font-size:7px;letter-spacing:.07em}.hero-bottom a{margin-left:0;width:100%;margin-top:2px;justify-content:flex-end}.hero-bottom a span{font-size:17px}.principles-inner{min-height:0;padding-block:25px;gap:16px}.principles-inner>span{font-size:11px}.section{padding-block:62px}h2{font-size:32px;line-height:1.1}.section-intro{gap:23px;margin-bottom:30px}.section-intro>p{font-size:13px}.service summary{padding-block:25px}.service-title{font-size:20px}.service-content p{font-size:13px}.work-grid{display:flex;gap:30px;flex-direction:column}.work-card:first-child .work-photo,.work-photo{height:315px}.work-card:nth-child(2),.work-card:nth-child(3){padding-top:0}.work-caption strong{font-size:13px}.work-caption{gap:12px}.team-grid{gap:25px}.team-card{padding:17px}.portrait{height:280px}.person-info{padding:24px 5px 0}.person-role{font-size:8px;min-height:0}.person-info h3{font-size:29px;margin-top:9px}.person-info>p{font-size:13px;min-height:0}.person-contact{font-size:11px}.monogram{font-size:105px}.portrait-marker{left:32px;top:33px}.portrait-label{left:32px;bottom:32px;font-size:10px}.process{padding-block:57px 63px}.contact-inner{padding-block:66px}.contact-inner h2{font-size:48px}.contact-inner .kaanisol-button.white{padding:18px 20px;font-size:12px}.footer-brand img{width:185px}}






/* Eigenständige Kaanisol-Gestaltung: heller Auftakt, grosse echte Projektaufnahme. */
.hero-wrap{color:var(--ink);background:#f2f6f9;overflow:hidden}
.hero-wrap:before{background:linear-gradient(105deg,#ffffff 0%,#f2f6f9 66%,#e9f0f6 100%)}
.hero-wrap:after{display:none}
.hero{display:flex;flex-direction:column;gap:36px;align-items:stretch;padding-top:54px;padding-bottom:0;min-height:0;max-width:1380px}
.hero-copy{display:grid;grid-template-columns:1.38fr 1fr;gap:68px;align-items:center}
.hero .eyebrow{color:#325778;font-size:9px;letter-spacing:.13em}
.hero h1{font-size:clamp(60px,6.3vw,94px);color:#092b56;font-weight:700;line-height:1.02;letter-spacing:-.058em;margin:24px 0 0}
.hero h1 em{color:#084b91;font-weight:400}
.hero-lead{color:#102d51;font-size:22px;line-height:1.35}
.hero-description{font-size:13px;line-height:1.8;color:#546a80;margin-top:14px;max-width:400px}
.hero-actions{gap:20px;margin-top:22px}.hero .kaanisol-button.primary{background:#084b91;color:white;padding:17px 20px;gap:30px;font-size:11px}
.hero .text-link{color:#0b3d73;font-size:10px}.hero .hero-note{color:#55728e;font-size:9px;margin-top:16px}.hero .small-mark{color:#ee7c22;border-color:#b8c9d8}
.isolation-hero{height:400px;position:relative;min-width:0;margin:0}
.isolation-frame{position:relative;width:100%;height:100%;overflow:hidden;background:#193d5c;border-radius:3px 70px 0 0}
.isolation-frame>img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.isolation-shade{position:absolute;inset:55% 0 0;background:linear-gradient(transparent,#021a3070)}
.isolation-caption{position:absolute;bottom:0;right:0;display:flex;align-items:center;gap:18px;background:#07468e;color:white;padding:24px 36px 24px 27px;border-left:5px solid #ff8a25;max-width:calc(100% - 20px)}
.isolation-caption .orange-line{display:none}.isolation-caption div{display:grid;gap:9px}.isolation-caption div>span{font-size:8px;font-weight:600;letter-spacing:.16em;color:#bed3e9}
.isolation-caption strong{font-size:20px;letter-spacing:-.02em;font-weight:400}
.isolation-label{position:absolute;left:21px;bottom:19px;color:#fff;letter-spacing:.1em;font-size:8px;text-shadow:0 1px 4px #002b52}
.hero-bottom{border:0;background:#f2f6f9;min-height:69px;color:#496987;max-width:1380px}.hero-bottom a{color:#0a477e}
.principles{background:white;border-bottom:1px solid #e5edf3}.principles b{background:#edf3f8}
h2{font-weight:600;font-size:clamp(34px,3.5vw,48px);line-height:1.14;letter-spacing:-.04em}h2 em{font-weight:400}
.work-grid{grid-template-columns:repeat(3,1fr);gap:24px}.work-card:first-child .work-photo,.work-photo{height:330px}.work-card:nth-child(2),.work-card:nth-child(3){padding-top:0}.work-photo{border-radius:3px 30px 0 0}
.contact-inner h2{font-size:clamp(42px,4.5vw,64px);font-weight:600}.contact-inner h2 em{font-weight:400;color:#9bc6eb}
@media(min-width:1600px){.hero{gap:45px;padding-top:66px}.isolation-hero{height:455px}}
@media(max-width:1150px){.hero{gap:31px;padding-top:45px}.hero-copy{grid-template-columns:1.3fr 1fr;gap:40px}.hero h1{font-size:71px}.hero-lead{font-size:19px}.hero-description{font-size:12px}.hero-actions{gap:15px}.isolation-hero{height:370px}.isolation-caption{padding:23px 29px}.isolation-caption strong{font-size:19px}.work-card:first-child .work-photo,.work-photo{height:290px}}
@media(max-width:850px){.hero-copy{grid-template-columns:1.3fr 1fr;gap:30px}.hero h1{font-size:56px}.hero .eyebrow{font-size:8px}.hero-lead{font-size:17px}.hero-description{font-size:11px}.hero .kaanisol-button.primary{padding:15px;gap:17px;font-size:10px}.hero-actions{gap:16px}.isolation-hero{height:340px}.isolation-label{font-size:7px;left:15px}.isolation-caption{padding:21px}.isolation-caption strong{font-size:16px}.work-card:first-child .work-photo,.work-photo{height:245px}}
@media(max-width:680px){.hero{display:flex;gap:29px;padding-top:31px;padding-bottom:0}.hero-copy{grid-template-columns:1fr;gap:25px}.hero h1{font-size:clamp(48px,13.4vw,76px);margin-top:20px}.hero .eyebrow{font-size:8px}.hero-lead{font-size:19px}.hero-description{font-size:13px;max-width:440px;margin-top:12px}.hero .kaanisol-button.primary{padding:16px 18px;font-size:11px;gap:27px}.hero .text-link{font-size:10px}.hero-actions{margin-top:18px;gap:18px}.hero .hero-note{font-size:9px;margin-top:15px}.isolation-hero{height:325px;width:100%}.isolation-frame{border-radius:3px 40px 0 0}.isolation-frame>img{object-position:51% 45%}.isolation-caption{padding:18px 17px;gap:0;border-left-width:4px;bottom:0;max-width:100%}.isolation-caption div{gap:7px}.isolation-caption strong{font-size:16px}.isolation-caption div>span{font-size:7px}.isolation-label{left:14px;bottom:92px;font-size:6px;letter-spacing:.08em}.hero-bottom{min-height:0;padding-block:21px 18px;gap:14px;color:#4b6c8a}.hero-bottom a{margin-top:5px}.work-card:first-child .work-photo,.work-photo{height:315px}.work-photo{border-radius:3px 30px 0 0}.contact-inner h2{font-size:41px}h2{font-size:32px}}

.site-header nav a.nav-contact:hover{color:#fff}

.work-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 24px}

@media(max-width:680px){.work-card{width:100%;min-width:0}}

.footer-brand img{height:auto}
@media(max-width:680px){.contact-inner{grid-template-columns:minmax(0,1fr);gap:48px}}

/* Hauptbild mit vollständigem Bogen und erkennbarer Leitungsführung. */
.isolation-hero{height:500px}.isolation-frame>img{object-position:center 38%}
@media(min-width:1600px){.isolation-hero{height:590px}}
@media(max-width:1150px){.isolation-hero{height:470px}}
@media(max-width:850px){.isolation-hero{height:420px}}
@media(max-width:680px){.isolation-hero{height:325px}.isolation-frame>img{object-position:center 45%}}

.hero-regions{font-size:12px;line-height:1.65;color:#104d85;margin-top:15px;max-width:440px}
@media(max-width:680px){.hero-regions{font-size:13px;margin-top:13px}}

/* Speichermotiv als Titelbild: Schwerpunkt auf Speichern und Leitungen. */
.isolation-frame>img{object-position:center 56%}
@media(max-width:680px){.isolation-frame>img{object-position:center center}}

.isolation-detail{position:absolute;top:24px;right:24px;width:202px;padding:8px;background:#ffffffd9;border:1px solid #ffffffb0;box-shadow:0 8px 30px #08244722;border-radius:3px 18px 3px 3px;opacity:.86;backdrop-filter:blur(8px)}
.isolation-detail img{width:100%;height:119px;object-fit:cover;object-position:center 40%;border-radius:2px 11px 2px 2px}
.isolation-detail span{display:block;padding:8px 3px 2px;color:#123d68;font-size:8px;font-weight:600;letter-spacing:.11em}
@media(max-width:680px){.isolation-frame>img{object-position:35% center}.isolation-detail{top:14px;right:14px;width:122px;padding:5px;opacity:.87;border-radius:3px 13px 3px 3px}.isolation-detail img{height:74px;border-radius:2px 8px 2px 2px}.isolation-detail span{font-size:6px;padding:6px 2px 1px;letter-spacing:.06em}}

/* Zwei dezente PVC-Rohrformen, ohne Fotokasten und Beschriftung. */
.pipe-watermark{position:absolute;left:-24px;bottom:42px;width:68%;opacity:.22;transform:rotate(-3deg);pointer-events:none;mix-blend-mode:screen}
.pipe-watermark img{display:block;width:100%;height:auto}
@media(max-width:680px){.pipe-watermark{left:-12px;bottom:111px;width:62%;opacity:.18;transform:rotate(-3deg)}}

.pipe-watermark{mix-blend-mode:normal;opacity:.2}
@media(max-width:680px){.pipe-watermark{opacity:.17}}

/* Projekte als ruhige Referenzkarten; eigene Projektfotos können später ergänzt werden. */
.reference-section{background:#f2f6f9;border-bottom:1px solid #e2eaf1}
.reference-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.reference-card{background:#fff;border-top:3px solid #084b91;padding:29px 28px 31px;min-height:230px}
.reference-meta{display:flex;justify-content:space-between;gap:15px;font-size:9px;font-weight:700;letter-spacing:.13em;color:#376181}
.reference-meta span:last-child{color:#ee7c22}
.reference-card h3{font-size:25px;font-weight:600;line-height:1.22;letter-spacing:-.025em;margin-top:27px;min-height:61px}
.reference-card p{font-size:13px;line-height:1.65;color:#647181;margin-top:18px}
@media(min-width:681px) and (max-width:850px){.header-inner{gap:15px}.site-header nav{gap:10px}.site-header nav .nav-contact{padding:13px 10px;gap:9px}.brand{flex-basis:175px}.brand img{width:175px}.reference-card{padding:23px 20px}.reference-card h3{font-size:22px}}
@media(max-width:680px){.reference-grid{grid-template-columns:1fr;gap:18px}.reference-card{min-height:0;padding:25px 24px 27px}.reference-card h3{font-size:25px;min-height:0;margin-top:22px}.reference-card p{font-size:13px;margin-top:15px}}

/* Eigene Projektaufnahmen zur bestätigten Referenz SBB Halle Bern. */
.reference-card h3 a{color:inherit;text-decoration:none}.reference-card h3 a:hover{text-decoration:underline;text-underline-offset:5px}
.reference-project{margin-top:42px;padding:32px;background:#fff;border-top:3px solid #084b91;scroll-margin-top:145px}
.reference-project-heading{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:30px;margin-bottom:25px}
.reference-project-heading h3{font-size:30px;line-height:1.2;letter-spacing:-.025em;margin-top:14px;color:#0b2d4e}
.reference-project-heading p{font-size:14px;line-height:1.7;color:#647181;margin:0}
.reference-photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.reference-photo-item{margin:0;min-width:0}
.reference-photo{position:relative;display:block;width:100%;padding:0;border:0;background:#edf2f5;cursor:zoom-in;overflow:hidden;border-radius:0;line-height:1}
.reference-photo img{display:block;width:100%;height:370px;object-fit:cover;object-position:center 55%;transition:transform .25s ease}
.reference-photo:hover img{transform:scale(1.025)}
.reference-photo:focus-visible{outline:3px solid #ee7c22;outline-offset:4px}
.reference-photo-enlarge{position:absolute;right:14px;bottom:14px;padding:9px 11px;background:#09203b;color:#fff;font-size:11px;line-height:1.3}
.reference-photo-item figcaption{font-size:12px;color:#647181;padding-top:13px;line-height:1.5}
@media(max-width:850px){.reference-project{padding:25px}.reference-photo img{height:300px}.reference-project-heading h3{font-size:27px}}
@media(max-width:680px){.reference-project{padding:23px 20px;margin-top:26px}.reference-project-heading{grid-template-columns:1fr;gap:17px;margin-bottom:23px}.reference-project-heading h3{font-size:27px}.reference-project-heading p{font-size:13px}.reference-photo-grid{grid-template-columns:1fr;gap:24px}.reference-photo img{height:330px}.reference-photo-item figcaption{font-size:12px}}

/* Leistungsbeispiele: Symbolbilder separat von eigenen Projektreferenzen. */
.service-examples{margin-top:42px;margin-bottom:32px}.service-examples>.eyebrow{margin-bottom:23px;scroll-margin-top:155px}
.service-examples-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.service-example{margin:0;background:#f3f5f8;min-width:0}.service-example-photo{display:block;width:100%;padding:0;border:0;background:#dce4eb;position:relative;cursor:zoom-in;overflow:hidden}
.service-example-photo img{width:100%;height:265px;display:block;object-fit:cover;transition:transform .25s ease}.service-example-photo:hover img{transform:scale(1.025)}
.service-example-photo:focus-visible{outline:3px solid #ee7c22;outline-offset:4px}
.service-example-zoom{position:absolute;right:15px;bottom:15px;display:grid;place-items:center;width:32px;height:32px;background:#fff;color:#0b2d4e;border-radius:50%;font-size:20px}
.service-example figcaption{padding:22px}.service-example-source{font-size:10px;color:#63758a;letter-spacing:.035em}.service-example h3{font-size:19px;color:#0b2d4e;line-height:1.3;margin:10px 0}.service-example p{font-size:12px;color:#63758a;line-height:1.6;margin:0}
.portrait.portrait-person{background:#111b24}.portrait-person:before,.portrait-person:after{display:none}.portrait-person img{position:absolute;top:12px;bottom:12px;left:50%;display:block;width:auto;height:calc(100% - 24px);max-width:calc(100% - 24px);padding:0;box-sizing:border-box;object-fit:contain;object-position:center;transform:translateX(-50%);clip-path:inset(0 2px 0 0)}
@media(max-width:850px){.service-examples-grid{gap:16px}.service-example-photo img{height:220px}.service-example figcaption{padding:18px}.service-example h3{font-size:17px}}
@media(max-width:680px){.service-examples-grid{grid-template-columns:1fr;gap:24px}.service-example-photo img{height:250px}.service-example h3{font-size:21px}.service-examples{margin-top:32px}}

/* Brandschutz: Abschottung mittig im Bildfeld */
.service-example-photo img.brandschutz-focus,.work-photo img.brandschutz-focus{object-position:75% top!important;transform:translateY(-28px) scale(1.55)!important;transform-origin:75% top}

.work-photo img.brandschutz-focus{transform:translateY(-28px) scale(1.22)!important}

/* Objektbezogene Referenzen und Brandschutzfuge */
.brandschutz-fugenfoto{grid-column:1 / -1;margin:8px 0 0;max-width:500px}.brandschutz-fugenfoto .reference-photo{background:#e9edf1}.brandschutz-fugenfoto img{display:block;width:100%;height:400px;object-fit:contain}.brandschutz-fugenfoto figcaption{font-size:12px;line-height:1.5;margin-top:10px;color:#566575}.reference-project+.reference-project{margin-top:55px}.reference-photos.reference-photos-single{grid-template-columns:minmax(0,1fr)}.reference-photos-single .reference-photo img{height:440px;object-position:center 55%}@media(max-width:680px){.brandschutz-fugenfoto img{height:360px}.reference-photos-single .reference-photo img{height:360px}}

#muehlematt-oberwil .reference-photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#sekundarschule-oberdorf .reference-photo-grid{grid-template-columns:minmax(0,1fr)}@media(max-width:680px){#muehlematt-oberwil .reference-photo-grid{grid-template-columns:minmax(0,1fr)}}

/* Dezentes, objektbezogenes Gebäudefoto in der Referenzkarte. */
.reference-card-with-building{position:relative;isolation:isolate;overflow:hidden}
.reference-card-with-building>.reference-building-watermark{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:center 34%;opacity:.34;pointer-events:none}
.reference-card-with-building::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(255,255,255,.84),rgba(255,255,255,.42) 62%,rgba(255,255,255,.08));pointer-events:none}
.reference-card-with-building>.reference-meta,.reference-card-with-building>h3,.reference-card-with-building>p{position:relative;z-index:2}
.reference-card-with-building p{color:#34495e}

/* Projektkarte öffnet die zugehörige Fotogalerie. */
.reference-card-gallery{position:relative;padding-bottom:60px}
.reference-gallery-open{position:absolute;inset:0;z-index:3;display:block;width:100%;height:100%;border:0;padding:0;background:transparent;color:#084b91;cursor:pointer;text-align:right}
.reference-gallery-open>span{position:absolute;bottom:18px;right:20px;padding:6px 9px;background:rgba(255,255,255,.92);font-size:11px;line-height:1.3;font-weight:600;border:1px solid #dae4ed}
.reference-gallery-open:hover>span{background:#084b91;color:#fff;border-color:#084b91}
.reference-gallery-open:focus-visible{outline:3px solid #ee7c22;outline-offset:-5px}
#photo-dialog{width:min(92vw,1100px);padding:44px 25px 20px}
.gallery-stage{position:relative;display:flex;justify-content:center;align-items:center;min-height:160px}
.dialog-main-photo{display:block;max-width:100%;height:auto;max-height:62dvh;object-fit:contain;margin:auto}
.gallery-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:1;border:1px solid #ffffff65;background:#09203be8;color:#fff;border-radius:50%;width:46px;height:46px;font-size:28px;line-height:1;cursor:pointer}
.gallery-previous{left:8px}.gallery-next{right:8px}
.gallery-arrow[hidden],.gallery-thumbnails[hidden]{display:none}
.gallery-thumbnails{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:15px}
.gallery-thumbnails button{width:72px;height:54px;padding:2px;border:2px solid transparent;background:transparent;opacity:.6;cursor:pointer}
.gallery-thumbnails button[aria-pressed="true"]{border-color:#ee7c22;opacity:1}
.gallery-thumbnails img{width:100%;height:100%;object-fit:cover}
#photo-caption{line-height:1.5;margin:0;text-align:center}
@media(max-width:680px){#photo-dialog{padding:42px 10px 16px;width:94vw;max-width:94vw}.dialog-main-photo{max-height:59dvh}.gallery-arrow{width:38px;height:38px;font-size:24px}.gallery-previous{left:2px}.gallery-next{right:2px}.reference-gallery-open>span{right:20px;bottom:17px}}

/* Nur kompakte Referenzkarten; alle Objektfotos öffnen in der Galerie. */
.reference-gallery-source[hidden]{display:none!important}.reference-card-gallery{min-height:250px}.reference-card-with-building>.reference-building-watermark{object-position:center 48%}.reference-card-with-building[data-object="bern"]>.reference-building-watermark{object-position:center 34%}

/* Wasserbilder auf Martins Wunsch etwas kräftiger. */
.reference-card-with-building>.reference-building-watermark{opacity:.44}
.reference-card-with-building::after{background:linear-gradient(90deg,rgba(255,255,255,.78),rgba(255,255,255,.36) 62%,rgba(255,255,255,.06))}

/* Grossansicht bleibt unverblasst und verhindert versehentliches Bild-Markieren. */
#photo-dialog .dialog-main-photo{opacity:1;filter:none;mix-blend-mode:normal;user-select:none;-webkit-user-select:none}
#photo-dialog .gallery-thumbnails img{user-select:none;-webkit-user-select:none}

/* Objektadresse ergänzt die kurze Referenzbezeichnung. */
.reference-card-with-building>.reference-address{position:relative;z-index:2;margin-top:10px;color:#29445d;font-size:12px;line-height:1.5;font-weight:500}.reference-card-with-building>.reference-address+p{margin-top:12px}

/* Sechs Referenzen im Einstieg, weitere auf Wunsch einblenden. */
#reference-grid>.reference-card-gallery[hidden],#reference-more-button[hidden]{display:none!important}
.reference-more{display:flex;justify-content:center;margin-top:28px}
.reference-more button{border:1px solid #124f88;background:#fff;color:#124f88;padding:14px 22px;font-size:14px;font-weight:600;line-height:1.4;cursor:pointer}
.reference-more button:hover{background:#124f88;color:#fff}
@media(max-width:680px){.reference-more button{width:100%;padding:15px 18px}}

/* Abschluss: gut lesbare Informationsseiten und ruhige Dialogbedienung. */
.legal-main{max-width:860px;margin:0 auto;padding:64px 24px 80px;}
.legal-main h1{font-size:clamp(2.4rem,6vw,4.5rem);line-height:1.08;margin:24px 0 32px;letter-spacing:-.04em;overflow-wrap:anywhere;}
.legal-main h2{font-size:1.4rem;margin:36px 0 14px;line-height:1.3;}
.legal-main p,.legal-main li{font-size:1.04rem;line-height:1.75;color:#324257;}
.legal-main a{text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere;}
.legal-main .legal-back{display:inline-block;margin-bottom:20px;color:#092c62;font-weight:700;}
.legal-main address{font-style:normal;line-height:1.8;}
.legal-stand{font-size:.9rem!important;color:#5c6876!important;margin-top:44px;}
body.photo-dialog-open{overflow:hidden;}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important;}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}}