/* The portfolio is an editorial route through a few selected websites, then an index. */
.gallery-hero{padding-bottom:85px}
.gallery-hero h1{max-width:1100px}
.gallery-hero>p:last-of-type{font-size:clamp(17px,1.8vw,22px);line-height:1.5;max-width:720px}
.gallery-jump{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.gallery-jump a{display:flex;align-items:center;min-height:45px;padding:10px 17px;border:1px solid #bfc5b8;font-size:13px;transition:background .2s,color .2s}
.gallery-jump a:hover,.gallery-jump a:focus-visible{background:#263122;color:#fff}
.published-work{margin-bottom:118px;scroll-margin-top:35px}
.gallery-section-intro{padding-block:85px 55px;display:grid;grid-template-columns:1fr 1fr;gap:0 45px}
.gallery-section-intro>.eyebrow{grid-column:1/-1;margin-bottom:30px}
.gallery-section-intro h2,.gallery-archive-head h2{font-size:clamp(46px,5.6vw,84px);line-height:1.02;letter-spacing:-.055em;font-weight:450}
.gallery-section-intro h2 em,.gallery-archive-head h2 em{font-family:var(--serif,Georgia,serif);font-weight:400}
.gallery-section-intro>p:last-child{align-self:end;justify-self:end;max-width:430px;font-size:17px;line-height:1.65;color:#4f584d}
.gallery-feature{--feature-bg:#e8e0d3;--feature-ink:#272920;--feature-line:#27292040;background:var(--feature-bg);color:var(--feature-ink);overflow:hidden}
.gallery-feature--kante{background-image:linear-gradient(90deg,transparent calc(50% - .5px),#977f6538 50%,transparent calc(50% + .5px));}
.gallery-feature--waldruehe{--feature-bg:#1e342d;--feature-ink:#f3eee2;--feature-line:#f3eee24a;background-image:radial-gradient(circle at 5% 90%,#71816d35,transparent 45%)}
.gallery-feature--tischundton{--feature-bg:#762b42;--feature-ink:#f9eccc;--feature-line:#f9eccc6b;background-image:radial-gradient(circle at 80% 15%,#e0b67236,transparent 38%)}
.gallery-feature--raum{--feature-bg:#dce9ea;--feature-ink:#284149;--feature-line:#28414955;background-image:radial-gradient(circle at 90% 10%,#ffffffaa,transparent 42%)}
.gallery-feature--halo{--feature-bg:#5c2e3a;--feature-ink:#f9e9de;--feature-line:#f9e9de66;background-image:radial-gradient(circle at 10% 85%,#ba7a7244,transparent 50%)}
.gallery-feature--vecto{--feature-bg:#1a2940;--feature-ink:#edf2f7;--feature-line:#edf2f766;background-image:linear-gradient(120deg,transparent 48%,#94aac01c 48%,#94aac01c 48.1%,transparent 48.1%)}
.gallery-feature-inner{padding-block:29px 74px}
.gallery-feature-top{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid var(--feature-line);padding-bottom:17px;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.gallery-feature-top span:first-child{white-space:nowrap;flex-shrink:0}
.gallery-feature-layout{display:grid;grid-template-columns:minmax(0,.87fr) minmax(0,1.13fr);align-items:center;gap:clamp(45px,7vw,110px);padding-top:55px}
.gallery-feature:nth-of-type(even) .gallery-feature-layout{grid-template-columns:minmax(0,1.13fr) minmax(0,.87fr)}
.gallery-feature:nth-of-type(even) .gallery-feature-screen{order:-1}
.gallery-feature-copy .eyebrow{color:inherit;opacity:.78;font-size:12px;letter-spacing:.11em}
.gallery-feature-copy h3{font-size:clamp(48px,5.7vw,92px);line-height:.99;letter-spacing:-.06em;font-weight:450;max-width:620px;margin:20px 0 22px;text-wrap:balance}
.gallery-feature--tischundton .gallery-feature-copy h3{font-family:var(--serif,Georgia,serif);font-weight:400;font-style:italic;letter-spacing:-.045em}
.gallery-feature--raum .gallery-feature-copy h3{font-family:var(--serif,Georgia,serif);font-weight:400;letter-spacing:-.045em}
.gallery-feature--halo .gallery-feature-copy h3{font-family:var(--serif,Georgia,serif);font-style:italic;font-weight:400;letter-spacing:-.045em}
.gallery-feature--vecto .gallery-feature-copy h3{font-weight:620}
.gallery-feature-name{font-size:14px;letter-spacing:.13em;text-transform:uppercase;margin-bottom:50px}
.gallery-feature-copy dl{border-top:1px solid var(--feature-line);margin:0}
.gallery-feature-copy dl>div{display:grid;grid-template-columns:100px 1fr;gap:20px;border-bottom:1px solid var(--feature-line);padding-block:19px}
.gallery-feature-copy dt{font-size:12px;line-height:1.5;opacity:.7}
.gallery-feature-copy dd{margin:0;font-size:15px;line-height:1.55;max-width:440px}
.gallery-feature-cta{display:flex;align-items:center;justify-content:space-between;gap:25px;width:fit-content;min-width:min(100%,340px);min-height:58px;border:1px solid currentColor;margin-top:36px;padding:13px 18px;font-size:15px;transition:background .2s,color .2s}
.gallery-feature-cta span{font-size:25px;line-height:1}
.gallery-feature-cta:hover,.gallery-feature-cta:focus-visible{background:var(--feature-ink);color:var(--feature-bg)}
.gallery-feature-screen{display:block;background:#f6f4ed;border:1px solid var(--feature-line);box-shadow:0 25px 60px #1114;transform:translateY(12px);transition:transform .35s,box-shadow .35s}
.gallery-feature-screen:hover,.gallery-feature-screen:focus-visible{transform:translateY(0);box-shadow:0 30px 70px #1115}
.gallery-screen-bar,.gallery-screen-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:43px;padding:8px 15px;background:#f5f3ed;color:#263122;font-size:11px}
.gallery-screen-bar{border-bottom:1px solid #d1d0c9}
.gallery-screen-bar .browser-dots{color:#a8a8a1}
.gallery-screen-foot{background:#253222;color:#fff;font-size:13px;min-height:48px}
.gallery-screen-foot span{font-size:23px;line-height:1}
.gallery-feature-screen .website-live-frame{aspect-ratio:1.35;background:#eeeae2}
.gallery-feature-screen .website-live-frame iframe{width:200%;height:200%}
.gallery-archive{padding-block:110px 80px;scroll-margin-top:35px}
.gallery-archive-head{display:flex;align-items:flex-end;justify-content:space-between;gap:45px;margin-bottom:48px}
.gallery-archive-head .eyebrow{margin-bottom:25px}
.gallery-archive-head>p{max-width:390px;font-size:16px;line-height:1.65;color:#535b50}
.gallery-index{border-top:1px solid #aab1a3}
.gallery-index-row{display:grid;grid-template-columns:70px minmax(0,1fr) minmax(150px,.5fr) 36px;gap:18px;align-items:center;min-height:93px;border-bottom:1px solid #bdc3b8;padding:16px 8px;transition:background .2s,padding .2s}
.gallery-index-row:hover,.gallery-index-row:focus-visible{background:#e6e9dd;padding-inline:19px}
.gallery-index-number,.gallery-index-kind{font-size:12px;color:#697267}
.gallery-index-row strong{font-size:clamp(22px,2.8vw,38px);line-height:1.05;letter-spacing:-.035em;font-weight:480}
.gallery-index-action{font-size:27px;line-height:1;text-align:right}
.gallery-archive+.wrap .collection-note{border-top:0;padding-top:0}
@media(max-width:900px){.gallery-feature-layout,.gallery-feature:nth-of-type(even) .gallery-feature-layout{gap:35px}.gallery-feature-copy h3{font-size:clamp(42px,6vw,65px)}.gallery-feature-copy dl>div{grid-template-columns:1fr;gap:7px}.gallery-feature-copy dd{font-size:14px}}
@media(max-width:760px){.gallery-hero{padding-bottom:58px}.published-work{margin-bottom:55px}.gallery-section-intro{grid-template-columns:1fr;padding-block:55px 38px}.gallery-section-intro>.eyebrow{margin-bottom:22px}.gallery-section-intro>p:last-child{justify-self:start;margin-top:25px;font-size:16px}.gallery-feature-inner{padding-block:22px 55px}.gallery-feature-layout,.gallery-feature:nth-of-type(even) .gallery-feature-layout{grid-template-columns:1fr;gap:30px;padding-top:35px}.gallery-feature:nth-of-type(even) .gallery-feature-screen{order:0}.gallery-feature-copy h3{font-size:clamp(47px,10vw,74px);margin-top:17px}.gallery-feature-name{margin-bottom:30px}.gallery-feature-cta{width:100%;min-width:0;margin-top:27px}.gallery-feature-screen{transform:none}.gallery-feature-screen:hover,.gallery-feature-screen:focus-visible{transform:none}.gallery-feature-screen .website-live-frame iframe{width:270%;height:270%;transform:scale(.37037)}.gallery-archive{padding-block:75px 55px}.gallery-archive-head{display:block;margin-bottom:35px}.gallery-archive-head>p{margin-top:25px}.gallery-index-row{grid-template-columns:40px minmax(0,1fr) 30px;gap:12px;min-height:80px}.gallery-index-kind{grid-column:2;grid-row:2;margin-top:-8px}.gallery-index-action{grid-column:3;grid-row:1/3}.gallery-index-row strong{font-size:26px}}
@media(max-width:450px){.gallery-jump{gap:8px}.gallery-jump a{font-size:12px;min-height:42px;padding-inline:12px}.gallery-feature-top{font-size:10px}.gallery-feature-top span:last-child{text-align:right}.gallery-feature-copy h3{font-size:48px}.gallery-feature-copy dl>div{padding-block:16px}.gallery-feature-copy dd{font-size:14px}.gallery-archive-head h2,.gallery-section-intro h2{font-size:48px}.gallery-index-row strong{font-size:23px}}
@media(prefers-reduced-motion:reduce){.gallery-feature-screen,.gallery-jump a,.gallery-index-row,.gallery-feature-cta{transition:none}}

/* The strongest work leads; the published personal site remains clearly identified. */
.gallery-hero{padding-block:48px 48px}
.gallery-hero h1{margin-block:20px 17px}
.gallery-jump{margin-top:25px}
.gallery-section-intro{padding-block:50px 42px}
.gallery-section-intro>.eyebrow{margin-bottom:15px}
.published-work{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(35px,5vw,85px);margin-top:0;margin-bottom:0;padding-block:70px;background:#ebeee9;border-top:0}
.published-work>a{border-color:#b7c1b5;box-shadow:0 20px 45px #21342b1a;transition:transform .3s ease,box-shadow .3s ease}
.published-work>a:hover,.published-work>a:focus-visible{transform:translateY(-5px);box-shadow:0 27px 55px #21342b29}
.published-work h2{font-size:clamp(42px,4.25vw,68px);letter-spacing:-.055em}
.published-work p{max-width:42ch}
.gallery-archive{padding-block:75px 50px}
.gallery-archive-details{border-top:1px solid #aab1a3;border-bottom:1px solid #aab1a3}
.gallery-archive-details summary{display:flex;justify-content:space-between;align-items:center;gap:20px;list-style:none;cursor:pointer;min-height:70px;padding:14px 8px;font-size:17px}
.gallery-archive-details summary::-webkit-details-marker{display:none}
.gallery-archive-details summary span{font-size:29px;line-height:1;font-weight:300;transition:transform .25s}
.gallery-archive-details[open] summary span{transform:rotate(45deg)}
.gallery-archive-details .gallery-index{border-top:1px solid #aab1a3}
.gallery-archive-details .gallery-index-row:last-child{border-bottom:0}
@media(max-width:760px){
  .gallery-hero{padding-block:30px 37px}
  .gallery-hero h1{font-size:clamp(48px,12vw,70px);margin-block:15px}
  .gallery-jump{margin-top:20px}
  .gallery-section-intro{padding-block:35px 30px}
  .gallery-section-intro>.eyebrow{margin-bottom:13px}
  .gallery-section-intro>p:last-child{margin-top:18px}
  .published-work{grid-template-columns:1fr;gap:28px;margin:0;padding-block:48px}
  .gallery-archive{padding-block:55px 35px}
  .gallery-archive-details summary{font-size:15px;min-height:62px}
  .gallery-section-intro{gap:0;padding-block:27px 20px}
  .gallery-section-intro h2{font-size:clamp(40px,10vw,54px)}
  .gallery-section-intro>p:last-child{margin-top:12px}
  .gallery-feature-layout,.gallery-feature:nth-of-type(even) .gallery-feature-layout{padding-top:18px;gap:24px}
  .gallery-feature-screen,.gallery-feature:nth-of-type(even) .gallery-feature-screen{order:-1}
}

.gallery-archive .gallery-index{border-top:1px solid #aab1a3}
.gallery-index-row{grid-template-columns:55px minmax(0,1fr) minmax(125px,.3fr) 36px;min-height:115px}
.gallery-index-text{display:flex;flex-direction:column;gap:6px;min-width:0}
.gallery-index-text>span{color:#566055;font-size:13px;line-height:1.45;max-width:580px}
.gallery-index-kind{text-align:right}
.gallery-archive+.wrap .collection-note{padding-top:25px;border-top:1px solid #aab1a3}
@media(max-width:900px){.gallery-index-row{grid-template-columns:42px minmax(0,1fr) 90px 30px}}
@media(max-width:700px){.gallery-index-row{grid-template-columns:38px minmax(0,1fr) 28px;gap:10px;min-height:110px}.gallery-index-text{grid-column:2;grid-row:1/3}.gallery-index-kind{grid-column:3;grid-row:2;font-size:10px;text-align:right}.gallery-index-action{grid-column:3;grid-row:1}.gallery-index-text>span{font-size:12px}.gallery-index-row strong{font-size:24px}}

/* The mobile hero already explains the collection; lead with the first website. */
@media(max-width:760px){
  .gallery-hero{padding-bottom:23px}
  .gallery-jump{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:17px}
  .gallery-jump a:first-child{display:none}
  .gallery-jump a{justify-content:center;min-height:42px;padding:6px 9px;text-align:center;font-size:11px;line-height:1.2}
  .gallery-section-intro{display:block;padding-block:21px 15px}
  .gallery-section-intro>.eyebrow{margin:0}
  .gallery-section-intro h2,.gallery-section-intro>p:last-child{display:none}
}

/* Every remaining concept gets a visible website entry, not a hidden title row. */
.gallery-archive .gallery-index{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;border:0}
.gallery-archive .gallery-index-row{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;border:1px solid #b7bdb3;background:#f4f4ed;min-height:0;transition:transform .25s,box-shadow .25s}
.gallery-archive .gallery-index-row:hover,.gallery-archive .gallery-index-row:focus-visible{padding:0;transform:translateY(-5px);box-shadow:0 20px 45px #2633221f}
.gallery-index-media{display:block;position:relative;aspect-ratio:1.75;overflow:hidden;background:#cbd3cb}
.gallery-index-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s}
.gallery-index-row:hover img{transform:scale(1.045)}
.gallery-index-media .gallery-index-number{position:absolute;top:14px;left:14px;background:#f8f8f0;padding:8px 10px;font-size:10px;letter-spacing:.09em;color:#22332b}
.gallery-index-text{display:flex;align-items:start;flex-direction:column;gap:0;flex:1;padding:22px 26px 24px}
.gallery-index-text .gallery-index-kind{display:block;grid-column:auto;grid-row:auto;text-align:left;font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 14px}
.gallery-index-text strong{font-size:clamp(27px,3vw,43px);line-height:1.05;margin-bottom:9px}
.gallery-index-text>span:not(.gallery-index-kind):not(.gallery-index-action){font-size:13px;line-height:1.55;max-width:490px;min-height:40px}
.gallery-index-text .gallery-index-action{display:flex;align-items:center;justify-content:space-between;width:100%;font-size:13px;font-weight:600;text-align:left;border-top:1px solid #b7bdb3;padding-top:15px;margin-top:22px}
.gallery-index-text .gallery-index-action span{font-size:21px}
.gallery-index-abstract{position:absolute;inset:0;display:block;overflow:hidden}
.gallery-index-abstract:before,.gallery-index-abstract:after{content:'';position:absolute;display:block}
.gallery-index-row--software .gallery-index-media{background:#c9d8d0}.gallery-index-row--software .gallery-index-abstract:before{width:50%;height:40%;left:23%;top:28%;border:2px solid #285249;box-shadow:24px 22px 0 -2px #97b8ab,24px 22px 0 0 #285249;transform:rotate(-5deg)}.gallery-index-row--software .gallery-index-abstract:after{width:23%;height:3px;background:#285249;left:36%;top:49%;box-shadow:0 18px #285249,0 -18px #285249}
.gallery-index-row--training .gallery-index-media{background:#ebd2b7}.gallery-index-row--training .gallery-index-abstract:before{width:55%;aspect-ratio:1;border:2px solid #ab674d;border-radius:50%;left:22%;top:1%;box-shadow:0 0 0 28px #d8a88b,0 0 0 30px #ab674d}.gallery-index-row--training .gallery-index-abstract:after{width:130%;height:1px;left:-15%;top:65%;background:#ab674d;transform:rotate(-17deg)}
.gallery-index-row--beratung .gallery-index-media{background:#d6d9cb}.gallery-index-row--beratung .gallery-index-abstract:before{width:44%;height:52%;left:17%;top:20%;background:#738b83;transform:rotate(-10deg);box-shadow:100px 25px 0 -10px #324a42}.gallery-index-row--beratung .gallery-index-abstract:after{left:49%;top:15%;height:72%;width:1px;background:#263c35;transform:rotate(28deg)}
.gallery-index-row--klang .gallery-index-media{background:#202936}.gallery-index-row--klang .gallery-index-abstract:before{inset:12%;border:1px solid #88a4b4;border-radius:50%;box-shadow:0 0 0 25px #202936,0 0 0 26px #88a4b4,0 0 0 57px #202936,0 0 0 58px #88a4b4}.gallery-index-row--klang .gallery-index-abstract:after{left:49%;top:48%;width:9px;height:9px;border-radius:50%;background:#d8cbb2;box-shadow:140px -60px 0 #8aa9b6,-160px 55px 0 #8aa9b6}
@media(max-width:700px){.gallery-archive .gallery-index{grid-template-columns:1fr;gap:13px}.gallery-index-media{aspect-ratio:1.8}.gallery-index-text{padding:20px}.gallery-index-text strong{font-size:31px}.gallery-index-text>span:not(.gallery-index-kind):not(.gallery-index-action){min-height:0}}

/* Project explanations stay readable; the website carries the expressive type. */
.gallery-feature-copy h3{font-size:clamp(34px,3.5vw,54px);line-height:1.08;letter-spacing:-.04em;font-style:normal;text-wrap:balance}
.gallery-feature--tischundton .gallery-feature-copy h3,.gallery-feature--halo .gallery-feature-copy h3{font-style:normal}
.gallery-feature-name{margin-bottom:26px}
.gallery-feature-copy dl>div{grid-template-columns:112px minmax(0,1fr);gap:14px;padding-block:15px}
.gallery-feature-copy dt{opacity:1}
.gallery-feature-screen .website-live-frame iframe{width:180%;height:180%;transform:scale(.555556)}
.gallery-feature .gallery-trail-save{color:var(--feature-ink);border-color:var(--feature-ink);min-height:44px;font-size:13px}
.gallery-feature .gallery-trail-save:hover,.gallery-feature .gallery-trail-save:focus-visible,.gallery-feature .gallery-trail-save[aria-pressed="true"]{color:var(--feature-bg);background:var(--feature-ink);border-color:var(--feature-ink)}
.gallery-feature .gallery-trail-save:focus-visible{outline:2px solid var(--feature-ink);outline-offset:4px}
@media(max-width:900px){.gallery-feature-copy dl>div{grid-template-columns:1fr;gap:6px}.gallery-feature-screen .website-live-frame iframe{width:300%;height:300%;transform:scale(.333333)}}
@media(max-width:760px){
 .gallery-feature-copy h3{font-size:clamp(32px,8.5vw,42px);margin-top:15px}
 .gallery-feature-copy dl>div{padding-block:13px}
 .gallery-feature-name{margin-bottom:21px}
 .gallery-feature-screen .website-live-frame iframe{width:350%;height:350%;transform:scale(.285714)}
 .gallery-feature--tischundton .gallery-feature-screen .website-live-frame iframe{width:240%;height:240%;transform:scale(.416667)}
}

.gallery-section-intro h2,.gallery-archive-head h2{font-size:clamp(32px,3.6vw,48px);line-height:1.12;letter-spacing:-.035em}