*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:35px}body{margin:0;color:#232829;background:#fff;font-family:Arial,Helvetica,sans-serif;font-size:16px}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}header{margin:0 5%;padding:30px 0 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #bfc4c5}.logo{width:235px;display:block}nav{display:flex;gap:35px;font-size:15px}nav a:hover,.textlink:hover{color:#6b7578}.intro{padding:70px 5% 65px}.eyebrow{font-size:14px;text-transform:uppercase;letter-spacing:.13em;margin:0 0 28px}h1,h2,h3,p{font-weight:400}h1{font-family:Georgia,serif;font-size:clamp(50px,6.8vw,106px);line-height:1.04;letter-spacing:-.045em;margin:0;max-width:1300px}em{font-weight:400;color:#627073}.mobile-break{display:none}.intro-bottom{display:flex;justify-content:space-between;align-items:end;margin-top:40px}.intro-bottom p{line-height:1.6;margin:0;font-size:19px}.textlink{font-size:15px;border-bottom:1px solid;padding-bottom:8px}.work{padding:0 5% 90px}.section-head{display:flex;justify-content:space-between;align-items:center;padding:20px 0;border-top:1px solid #bfc4c5}.section-head h2,.section-head span{font-size:14px;margin:0}.section-head span{color:#687174}.projects{display:grid;grid-template-columns:1fr 1fr;gap:46px 24px}.project{padding:0;border:0;text-align:left;background:none;cursor:pointer;min-width:0}.picture{overflow:hidden;background:#e5e7e7;aspect-ratio:1.4}.picture img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s}.project:hover img{transform:scale(1.025)}.caption{display:flex;justify-content:space-between;align-items:center;margin-top:14px}.caption h3{font-size:18px;margin:0}.caption span{font-size:13px;color:#626c6e}.p0{grid-column:1/-1}.p0 .picture{aspect-ratio:2.05}.p0 .picture img{object-position:center 48%}.p12{grid-column:1/-1}.p12 .picture{aspect-ratio:2}.approach{padding:75px 5%;background:#26383b;color:#fff;display:grid;grid-template-columns:1fr 1fr;column-gap:10%}.approach .eyebrow{grid-column:1/-1;color:#cad2d3}.approach h2{font-family:Georgia,serif;font-size:clamp(48px,5.5vw,84px);line-height:1.05;letter-spacing:-.04em;margin:0}.approach em{color:#c4d1cd}.approach-copy p{font-size:20px;line-height:1.55;margin:0 0 20px}.approach-copy p+p{font-size:17px;color:#d2d9da}.steps{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:70px}.steps article{border-top:1px solid #79888b;padding-top:20px}.steps span{font-size:14px;color:#c2ccce}.steps h3{font-family:Georgia,serif;font-size:28px;margin:22px 0 12px}.steps p{color:#d2d9da;line-height:1.6;max-width:330px}.formats{padding:85px 5%;display:grid;grid-template-columns:1fr 2fr;gap:50px}.formats h2{font-family:Georgia,serif;font-size:clamp(45px,5vw,74px);letter-spacing:-.03em;margin:0;border-top:1px solid #bfc4c5;padding:15px 0;display:flex;justify-content:space-between;align-items:center}.formats h2 span{font-family:Arial,sans-serif;font-size:14px;letter-spacing:0}.profile{margin:0 5%;padding:70px 0 90px;border-top:1px solid #bfc4c5}.profile h2{font-family:Georgia,serif;font-size:clamp(40px,5vw,74px);line-height:1.1;letter-spacing:-.035em;margin:0 0 35px}.profile>p:last-child{max-width:560px;margin-left:auto;font-size:20px;line-height:1.6}footer{margin:0 5%;padding:26px 0;display:flex;justify-content:space-between;border-top:1px solid #bfc4c5;font-size:14px;color:#626c6e}dialog{border:0;padding:22px;width:min(1050px,94vw);max-height:95vh;background:#fff;color:#232829}dialog::backdrop{background:#172123db}.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:20px}.dialog-head h2{font-size:20px;margin:0 0 20px}.close{align-self:start;border:0;background:none;cursor:pointer}#gallery-image{display:block;width:100%;max-height:70vh;object-fit:contain;background:#eef0ef}.gallery-controls{display:flex;align-items:center;justify-content:space-between;margin-top:18px}.gallery-controls button{padding:10px 20px;background:white;border:1px solid #8f999c;cursor:pointer}a:focus-visible,button:focus-visible{outline:3px solid #ad6037;outline-offset:5px}@media(max-width:700px){header{padding:22px 0}.logo{width:168px}nav{gap:15px;font-size:14px}nav a:last-child{display:none}.intro{padding-top:48px}h1{font-size:clamp(44px,9.4vw,66px)}.mobile-break{display:block}.intro-bottom{align-items:start;gap:30px;flex-direction:column}.intro-bottom p{font-size:17px}.section-head span{display:none}.projects{grid-template-columns:1fr;gap:30px}.p0,.p12{grid-column:auto}.p0 .picture,.p12 .picture,.picture{aspect-ratio:1.35}.caption h3{font-size:17px}.work{padding-bottom:55px}.approach{padding-top:50px;padding-bottom:50px;grid-template-columns:1fr;gap:24px}.approach .eyebrow{margin-bottom:0}.approach-copy{margin-top:12px}.steps{grid-template-columns:1fr;gap:20px;margin-top:10px}.steps h3{margin-top:14px}.steps p{max-width:none}.formats{grid-template-columns:1fr;gap:0;padding-top:55px;padding-bottom:55px}.profile{padding:45px 0}.profile>p:last-child{font-size:18px}footer{gap:20px;flex-wrap:wrap}footer span:nth-child(2){display:none}.dialog-head h2{font-size:17px}.close{white-space:nowrap}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.picture img{transition:none}}
.project-formats{font-size:16px;color:#626c6e;margin:0 0 24px;line-height:1.6}
/* Grauel Publishing – Farbwelt Oktober 2026 */
:root{--ink:#1e2126;--blue:#b8c8dc;--orange:#e85a3d;--sand:#cbb8a0;--paper:#e9e1d5}body{background:var(--paper);color:var(--ink)}header{border-color:#b9b4ac}.logo{mix-blend-mode:multiply}em{color:#566980}a:hover{color:#9e3724}.textlink{border-color:var(--orange)}.section-head{border-color:#b9b4ac}.section-head span,.tags,.caption span{color:#565d66}.filters{display:flex;gap:9px;flex-wrap:wrap;margin:4px 0 28px}.filters button{border:1px solid #a5a6a6;background:transparent;padding:10px 16px;border-radius:2px;cursor:pointer;font-size:14px}.filters button[aria-pressed=true]{background:var(--orange);color:#1e2126;border-color:var(--orange)}.tags{font-size:14px;margin:9px 0 0;line-height:1.5}.project.featured{grid-column:1/-1}.project.featured .picture{aspect-ratio:2.05}.project[hidden]{display:none}.caption{gap:16px;align-items:start}.caption h3{line-height:1.35}.caption span{padding-top:4px}.approach{background:var(--ink)}.approach em{color:var(--blue)}.approach .eyebrow,.steps span{color:var(--sand)}.expertise{padding:80px 5%;display:grid;grid-template-columns:1fr 2fr;gap:50px}.expertise details{border-top:1px solid #a5a6a6;padding:20px 0}.expertise summary{display:flex;justify-content:space-between;gap:20px;cursor:pointer;font-family:Georgia,serif;font-size:clamp(30px,3.8vw,55px);list-style:none}.expertise summary::-webkit-details-marker{display:none}.expertise summary span{font-family:Arial;font-size:28px}.expertise details[open] summary span{transform:rotate(45deg)}.expertise details p{font-size:18px;line-height:1.65;max-width:760px}.profile-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:6%;align-items:start}.profile h2{font-size:clamp(34px,3.7vw,58px)}.profile-grid p{font-size:18px;line-height:1.65;max-width:610px}.profile figure{margin:0}.profile figure img{width:100%;display:block;filter:grayscale(1)}.profile figcaption{font-size:14px;margin-top:12px;color:#565d66}.contact{padding:65px 5% 75px;background:var(--blue);display:grid;grid-template-columns:1fr 1fr;gap:30px}.contact .eyebrow{grid-column:1/-1;margin-bottom:0}.contact h2{font-family:Georgia,serif;font-size:clamp(46px,5.6vw,80px);line-height:1.05;letter-spacing:-.035em;margin:0}.contact em{color:var(--ink)}.contact-details{align-self:end;display:flex;flex-direction:column;align-items:start;gap:14px;font-size:clamp(16px,1.8vw,25px)}.contact-details a:first-child{border-bottom:2px solid var(--orange);padding-bottom:6px}.contact address{font-style:normal;font-size:17px;line-height:1.65;margin-top:20px}footer{border:0}dialog{background:var(--paper);width:min(1160px,96vw);padding:28px;max-height:94vh;overscroll-behavior:contain}body:has(dialog[open]){overflow:hidden}.dialog-head{margin-bottom:20px}.dialog-head .eyebrow{margin:0;font-size:12px}.close{padding:7px}.project-info>h2{font-family:Georgia,serif;font-size:clamp(30px,3.8vw,54px);line-height:1.1;letter-spacing:-.025em;margin:15px 0 25px}.project-copy{display:grid;grid-template-columns:1.65fr 1fr;gap:45px;margin-bottom:30px}#gallery-description p{font-size:17px;line-height:1.6;margin:0 0 15px}#gallery-meta{font-size:14px;line-height:1.55;margin:0}#gallery-meta dt{font-weight:bold;margin-bottom:3px}#gallery-meta dd{margin:0 0 12px}#gallery-media{background:#e1dfdb;min-height:180px}#gallery-media img,#gallery-media video{display:block;width:100%;max-height:65vh;object-fit:contain}#gallery-media video{background:#1e2126}.gallery-controls button{background:transparent}.gallery-controls button:hover{background:var(--blue)}#gallery-thumbs{display:flex;gap:8px;overflow:auto;padding:16px 3px 6px}#gallery-thumbs button{flex:0 0 85px;height:65px;border:2px solid transparent;background:#d8d7d3;padding:0;cursor:pointer;font-size:14px}#gallery-thumbs button[aria-pressed=true]{border-color:#a43720}#gallery-thumbs img{height:100%;width:100%;object-fit:cover}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #94331f;outline-offset:4px}@media(max-width:700px){header{gap:14px;align-items:start;flex-wrap:wrap}nav{gap:16px;flex-wrap:wrap}nav a:last-child{display:block}.project.featured .picture{aspect-ratio:1.35}.expertise{grid-template-columns:1fr;gap:5px;padding:50px 5%}.profile-grid{grid-template-columns:1fr;gap:25px}.profile figure{max-width:500px}.contact{grid-template-columns:1fr;padding:50px 5%;gap:28px}.contact-details{font-size:19px}.project-copy{grid-template-columns:1fr;gap:15px}dialog{padding:18px}.dialog-head{gap:8px}.dialog-head .eyebrow{font-size:12px}#gallery-media img,#gallery-media video{max-height:55vh}.filters{gap:7px}.filters button{padding:9px 12px}.profile h2{font-size:clamp(32px,7.2vw,48px)}}

.legal{max-width:880px;padding:65px 5%;margin:auto}.legal h1{font-size:clamp(36px,6vw,68px);overflow-wrap:anywhere;margin-bottom:35px}.legal h2{font-family:Georgia,serif;font-size:28px;margin:35px 0 15px}.legal p,.legal li{font-size:17px;line-height:1.65}.legal a{text-decoration:underline}.legal-note{border-left:4px solid #e85a3d;padding:14px 20px;background:#eee5d9}@media(max-width:700px){footer span:nth-child(2){display:block}}

/* Farblich getrennte Leistungs- und Profilbereiche */
.expertise{background:var(--orange);color:var(--ink)}.expertise details{border-color:rgba(30,33,38,.45)}.expertise summary:focus-visible{outline-color:var(--ink)}.profile{border-top:0;background:var(--paper)}
/* Kopfzeile bleibt beim Scrollen kompakt erreichbar. */
html{scroll-padding-top:105px}header{position:sticky;top:0;z-index:40;margin:0;padding:30px 5% 24px;background:var(--paper);transition:padding .2s ease,box-shadow .2s ease}header .logo{transition:width .2s ease}header.is-compact{padding-top:12px;padding-bottom:12px;box-shadow:0 3px 14px #1e21260d}header.is-compact .logo{width:160px}header nav a{display:inline-block;padding:8px 0}@media(max-width:700px){html{scroll-padding-top:125px}header{padding:18px 5%;gap:10px;align-items:center}header.is-compact{padding-top:9px;padding-bottom:9px;gap:7px}header.is-compact .logo{width:140px}header nav{gap:16px}header nav a{padding:6px 0}}@media(prefers-reduced-motion:reduce){header,header .logo{transition:none}}

.projects-more{text-align:center;padding:40px 0 10px}.projects-more button{font:inherit;font-size:18px;border:1px solid var(--ink);border-radius:0;background:transparent;color:var(--ink);padding:14px 50px;cursor:pointer}.projects-more button:hover{background:var(--ink);color:var(--paper)}.projects-more p{font-size:13px;color:#565d66;margin:14px 0 0}.projects-more button[hidden],.project[hidden]{display:none!important}

#gallery-thumbs .video-thumb{position:relative}#gallery-thumbs .thumb-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#1e2126cc;color:#fff;font-size:13px;padding-left:2px;pointer-events:none}