/* Lokal mitgelieferte Raleway, variable Gewichte 100–900. Lizenz: assets/fonts/OFL.txt. */
/* latin-ext */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/raleway-latin-ext-variable.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/raleway-latin-variable.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Zentrale Gestaltung: Farben, Abstände und Breite hier ändern. Keine externen Abhängigkeiten. */
:root{--font-body:1rem;--font-small:.875rem;--font-subheading:clamp(1.25rem,1.6vw,1.4rem);--font-project:clamp(1.6rem,2.7vw,2.6rem);--heading-gap:1.25rem;--content-gap:clamp(2.25rem,4vw,3.5rem);--copy-width:65ch;--text-on-dark:#c4c8bf;--tracking-body:.025em;--tracking-heading:-.01em;--tracking-intro:.01em;--tracking-label:.1em;--ink:#171817;--muted:#595c58;--paper:#fff;--tint:#f4f4f2;--line:#d6d8d2;--dark-line:#484b45;--max:1280px;--radius:8px;--section:clamp(4rem,7.5vw,7.5rem);--gutter:clamp(1.25rem,4.5vw,4rem)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-height,7rem) + 1rem)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Raleway",Arial,Helvetica,sans-serif;font-size:var(--font-body);line-height:1.65;letter-spacing:var(--tracking-body);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-underline-offset:.25em}
button{font:inherit;letter-spacing:inherit}
button,a,summary{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #356ac3;outline-offset:6px}
::selection{background:#dce7d2;color:#171817}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3{text-transform:uppercase;overflow-wrap:anywhere;hyphens:manual;font-weight:700;line-height:1.09;letter-spacing:var(--tracking-heading);text-wrap:balance}
.heading-mixed{font-weight:400}
.heading-mixed strong{font-weight:700}
h1{font-size:clamp(2.35rem,4.1vw,4rem);max-width:14ch}
h2{font-size:clamp(1.9rem,3vw,3rem)}
h3{font-size:var(--font-subheading);line-height:1.3;letter-spacing:var(--tracking-heading)}
p{text-wrap:pretty}
.container{width:min(var(--max),calc(100% - var(--gutter) * 2));margin-inline:auto}
.section{padding-block:var(--section)}
.section-tint{background:var(--tint)}
.eyebrow{font-size:var(--font-small);letter-spacing:var(--tracking-label);text-transform:uppercase;font-weight:700;line-height:1.5}
.skip-link{position:absolute;top:1rem;left:1rem;transform:translateY(-200%);z-index:20;background:var(--ink);color:#fff;padding:.75rem 1rem;border-radius:var(--radius)}
.skip-link:focus{transform:none}
.site-header{position:sticky;top:0;z-index:10;background:var(--paper);max-height:100dvh;overflow-y:auto;padding-block:1.65rem;border-bottom:1px solid #eeefeb}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.brand{display:block;flex-shrink:0;width:clamp(300px,30vw,450px);max-width:100%}
.brand picture{display:block}.brand img{width:100%}
.navigation{position:relative;isolation:isolate;display:flex;align-items:center;gap:clamp(1rem,1.7vw,1.8rem)}
.navigation a{font-size:var(--font-small);font-weight:700;text-transform:uppercase;letter-spacing:.055em;text-decoration:none;white-space:nowrap;padding:.6rem 0}
.navigation a{position:relative;z-index:1}
/* Eine gemeinsame Fläche gleitet und verändert ihre Größe unabhängig vom Text. */
.navigation-highlight{position:absolute;left:0;top:0;z-index:0;pointer-events:none;border-radius:var(--radius);background:var(--tint);opacity:0}
.navigation.has-active-link .navigation-highlight{opacity:1}
.navigation.highlight-ready .navigation-highlight{transition:transform .32s cubic-bezier(.22,.68,.25,1),width .32s cubic-bezier(.22,.68,.25,1),height .32s cubic-bezier(.22,.68,.25,1)}
.navigation a::before{content:"";position:absolute;inset:.15rem -.5rem;z-index:-1;pointer-events:none;border-radius:var(--radius);background:rgba(23,24,23,.045);opacity:0;transition:opacity .15s}
@media(hover:hover){.navigation a:hover{color:var(--ink)}.navigation a:hover:not([aria-current="location"])::before{opacity:1}}
.navigation .nav-contact{font-weight:700}
.menu-toggle{display:none;align-items:center;gap:.7rem;background:none;border:1px solid var(--line);border-radius:var(--radius);padding:.55rem .85rem;min-height:44px;cursor:pointer}
.menu-mark{width:17px;height:9px;border-block:1px solid currentColor}
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);align-items:center;gap:clamp(2rem,4.5vw,4rem);padding-block:4rem 4.5rem}

.hero-description{max-width:47ch;color:var(--muted);margin-top:var(--heading-gap);font-size:var(--font-body)}
.actions{display:flex;align-items:center;flex-wrap:wrap;gap:1.25rem 1.5rem;margin-top:2rem}
.button{display:inline-flex;max-width:100%;text-align:center;text-transform:uppercase;letter-spacing:.055em;justify-content:center;align-items:center;gap:1.3rem;min-height:50px;padding:.85rem 1.2rem;border:1px solid var(--ink);background:var(--ink);color:#fff;text-decoration:none;border-radius:var(--radius);font-size:var(--font-small);line-height:1.4;font-weight:700;transition:background .2s}
.button:hover{background:#3c403a}
.text-link{font-size:.9375rem;font-weight:600;display:inline-flex;gap:.7rem;align-items:center;min-height:44px;text-decoration:none}
.text-link:hover{color:var(--muted)}
.hero-media{min-width:0}

.section-heading{margin-bottom:var(--content-gap)}
/* Abschnittstitel und Einleitung stehen immer untereinander. */
.section-heading>div{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--heading-gap)}
.feature-grid,.process-grid,.workshop-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem)}
.section-heading .section-intro{margin-top:0}
.section-heading>.eyebrow{margin-bottom:var(--heading-gap);color:var(--muted)}
.services-section{border-top:1px solid var(--line)}
.section-intro{max-width:var(--copy-width);color:var(--muted);font-size:var(--font-body);margin-top:1.35rem}
.service-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem}
/* Gemeinsame Titel-, Beschreibungs- und Anwendungszeilen richten alle Trennlinien aus. */
.service{border-top:1px solid var(--ink);padding-top:1.5rem;display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;min-width:0}
.service-heading{padding-bottom:var(--heading-gap)}
.service-icon{display:block;width:56px;height:56px;margin-bottom:1.25rem}
.service h3{margin-bottom:0}
.service>p{color:var(--muted)}
.service>p:not(.application){padding-bottom:1.5rem}
.service .application{border-top:1px solid var(--line);margin:0;padding-top:1.25rem;font-size:var(--font-small)}
.application strong{display:block;font-weight:600;color:var(--ink);margin-bottom:.5rem}
.feature-grid{align-items:start}
.project+.project{margin-top:clamp(3rem,6vw,6rem);padding-top:clamp(3rem,6vw,6rem);border-top:1px solid var(--line)}
.project .object-details{margin-bottom:0}
/* Gemeinsames Spaltenraster; jede zweite Projektzeile spiegelt Bild und Text. */
@media(min-width:640px){
  .project:nth-of-type(even)>.media{grid-column:2;grid-row:1}
  .project:nth-of-type(even)>.feature-copy{grid-column:1;grid-row:1}
}

.media{min-width:0}
.media img{width:100%;border-radius:var(--radius)}
.feature-copy .eyebrow{color:var(--muted);margin-bottom:var(--heading-gap)}
.feature-copy h3{font-size:clamp(1.4rem,2.3vw,2.2rem);font-weight:400;margin-bottom:var(--heading-gap)}
.feature-copy>p:not(.eyebrow){color:var(--muted)}
.object-details{margin:1.5rem 0}
.object-details div{border-top:1px solid var(--line);padding:.7rem 0;font-size:var(--font-small);display:grid;grid-template-columns:5.6rem 1fr;gap:.8rem}
.object-details dt{font-weight:600}
.object-details dd{margin:0;color:var(--muted)}
.process-grid{align-items:start}
.sketch figcaption{color:var(--muted);font-size:var(--font-small);margin-top:.75rem;max-width:var(--copy-width)}
.steps{list-style:none;margin:0;padding:0;counter-reset:step}
.steps li{position:relative;counter-increment:step;display:flex;gap:1.5rem;border-top:1px solid var(--line);padding:1.4rem 0}
.steps li:first-child{padding-top:0;border-top:0}
/* Schrittnummern stehen im Spaltenabstand, damit der Text an der gemeinsamen Fluchtlinie beginnt. */
.steps li::before{width:1.25rem;flex-shrink:0;font-variant-numeric:tabular-nums;position:absolute;right:calc(100% + .75rem);content:"0" counter(step);font-size:var(--font-small);color:var(--muted);padding-top:.25rem}
.steps h3{margin-bottom:.75rem}
.steps p{color:var(--muted);max-width:var(--copy-width)}
.section-dark{background:var(--ink);color:#fff}
.section-dark .section-intro,.section-dark .section-heading>.eyebrow{color:var(--text-on-dark)}
.workshop-grid{align-items:start}
.workshop-copy h3{margin-bottom:var(--heading-gap)}
.workshop-copy p{color:var(--text-on-dark)}
.workshop-copy p+p{margin-top:1.25rem}
.capabilities{list-style:none;display:flex;gap:.5rem;flex-wrap:wrap;padding:0;margin:1.75rem 0 0}
.caps{font-weight:700}
.capabilities li{font-size:var(--font-small);border:1px solid var(--dark-line);border-radius:var(--radius);padding:.3rem .65rem;color:#e1e4dc}
.about-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-template-areas:"heading portrait" "copy portrait";grid-template-rows:auto 1fr;align-items:start;column-gap:clamp(2rem,5vw,5rem);row-gap:1.25rem}
.about-grid>.section-heading{grid-area:heading;margin-bottom:0}
.about-portrait{grid-area:portrait;width:100%;max-width:440px;justify-self:end}
.about-copy{grid-area:copy;max-width:var(--copy-width)}
.about-copy p{color:var(--muted)}
.about-copy p+p{margin-top:1.25rem}

.faq-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:start;gap:clamp(2rem,5vw,5rem)}
.faq-list{max-width:var(--copy-width);border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{font-weight:600;cursor:pointer;position:relative;list-style:none;font-size:var(--font-body);line-height:1.5;padding:1.3rem 2.25rem 1.3rem 0}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:0;top:1.3rem;font-size:1.25rem;line-height:1.3}
details[open] summary::after{content:"−"}
details p{color:var(--muted);padding:0 2.25rem 1.5rem 0}
.contact{text-align:left}
.contact-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:start;gap:clamp(2rem,5vw,5rem)}
.contact .section-heading{margin-bottom:0}
.contact .button{margin-top:1rem}
.contact-email{display:table;margin:2rem 0 0;overflow-wrap:anywhere}
.contact-phone{display:table;margin:.5rem 0 0;overflow-wrap:anywhere}
.contact .contact-note{max-width:var(--copy-width);font-size:var(--font-small);margin-top:1.5rem;color:var(--muted)}
.site-footer{border-top:1px solid var(--line);padding-block:3rem 1.5rem}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:2rem}
.footer-inner>p{font-size:var(--font-small);color:var(--muted)}
.footer-inner nav{display:flex;gap:1.5rem;flex-wrap:wrap}
.footer-inner nav a{font-size:var(--font-small);text-decoration:none;padding-block:.5rem}
.footer-inner nav a:hover{color:var(--muted)}
.footer-bottom{display:flex;justify-content:space-between;gap:1rem;border-top:1px solid var(--line);margin-top:2.75rem;padding-top:1.25rem;font-size:.8125rem;color:var(--muted)}
.footer-bottom a{text-decoration:none}
.legal{max-width:800px;min-height:65vh}
.legal h1{font-size:clamp(2.5rem,5vw,3.5rem);max-width:none;overflow-wrap:anywhere;margin-bottom:2rem}
.legal h2{font-size:1.5rem;margin-block:2rem 1rem;letter-spacing:var(--tracking-heading)}
.legal p,.legal ul{margin-bottom:1.2rem}
.privacy h3{margin-block:1.8rem 1rem;font-size:1.125rem;line-height:1.4;text-wrap:initial}
.privacy h4{margin:1.25rem 0 .75rem;font-size:1rem;line-height:1.5;font-weight:700}
.privacy li+li{margin-top:.6rem}
.privacy p,.privacy li{overflow-wrap:anywhere}
.legal-address{font-style:normal;line-height:inherit}
.legal a{overflow-wrap:anywhere}
.notice{border-left:3px solid var(--ink);background:var(--tint);padding:1.25rem 1.5rem;margin-bottom:2rem}
[hidden]{display:none!important}

@media(max-width:1150px){.header-inner{flex-wrap:wrap;gap:1rem}.navigation{flex:1;justify-content:flex-end;gap:1rem}.brand{width:300px}.actions{align-items:flex-start;flex-direction:column;gap:.65rem}.service-grid{gap:1.5rem}}
@media(max-width:959px){
  .header-inner{position:relative}.brand{width:350px}.menu-toggle:not([hidden]){display:flex;margin-left:auto}
  .navigation{flex-basis:100%;flex-wrap:wrap;justify-content:flex-start;padding-top:.5rem}
  .menu-ready .navigation{display:none}.menu-ready .navigation.is-open{display:flex}.menu-ready .navigation a{flex-basis:100%;padding:.65rem 0;font-size:1rem}.menu-ready .navigation{gap:0}
  .hero{grid-template-columns:1fr;padding-top:3rem;gap:2.25rem}.hero-copy{max-width:650px}h1{font-size:clamp(2.35rem,7.5vw,4rem);max-width:14ch}.hero-description{max-width:57ch}
  .actions{flex-direction:row;align-items:center;gap:1rem 1.5rem}
  
  .service-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem}
  .feature-grid,.process-grid,.workshop-grid{gap:2rem}.object-details div{grid-template-columns:1fr;gap:.2rem}
  .footer-inner{flex-wrap:wrap}.footer-inner nav{flex-basis:100%}
}
@media(max-width:639px){
  .site-header{padding-block:1.1rem}.brand{width:260px}.site-header .brand{max-width:calc(100% - 124px)}.header-inner{gap:.7rem}
  .hero{padding-block:2.5rem 2rem}
  .about-grid{grid-template-columns:1fr;grid-template-areas:"heading" "portrait" "copy";grid-template-rows:auto;gap:2rem}.about-portrait{justify-self:start}
  .actions{align-items:flex-start;flex-direction:column;gap:.6rem}  .service-grid,.feature-grid,.process-grid,.workshop-grid,.faq-grid,.contact-grid{grid-template-columns:1fr}
  .service-grid{gap:2.5rem}.service h3 br{display:none}.service .application{margin-top:0}
  .feature-grid,.workshop-grid,.process-grid{gap:2rem}.object-details div{grid-template-columns:6rem 1fr;gap:.75rem}
  .steps li{gap:1rem}.steps li::before{position:static}
  .footer-inner{flex-direction:column;align-items:flex-start;gap:1.5rem}.footer-inner nav{gap:1.1rem}.footer-bottom{font-size:.8125rem}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}
@media print{.site-header{position:static;max-height:none;overflow:visible}.navigation,.menu-toggle,.skip-link,.actions,.contact .button,.footer-bottom a{display:none!important}.site-header,.site-footer{padding:1rem 0}.section{padding-block:2rem}.section-dark{background:#fff;color:#000}.section-dark p,.section-dark .section-intro,.section-dark .section-heading>.eyebrow{color:#333}.hero{padding-block:1rem}.media img{max-height:300px;object-fit:contain}.steps li,article,figure{break-inside:avoid}a{color:#000}}

/* Projektgalerien: ohne JavaScript alle Bilder, mit JavaScript manuell blättern. */
.gallery-slide+.gallery-slide{margin-top:1.5rem}
.gallery-slide figcaption{font-size:var(--font-small);color:var(--muted);margin-top:.75rem}
.section-dark .gallery-slide figcaption{color:var(--text-on-dark)}
.gallery-ready .gallery-slide{margin:0}
.gallery-ready{position:relative}
/* Fester Rahmen nach dem höchsten Bild: Bilder vollständig einpassen, Bedienung bleibt stehen. */
.gallery-ready .gallery-frame{position:relative;width:100%;aspect-ratio:var(--gallery-max-aspect);background:var(--tint);border-radius:var(--radius);overflow:hidden}
.gallery-ready .gallery-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border-radius:0}
.gallery-ready .gallery-slide figcaption{min-height:3.3em}
.gallery-ready .gallery-slides{touch-action:pan-y pinch-zoom}
.project-gallery:focus-visible{outline:3px solid #356ac3;outline-offset:6px;border-radius:var(--radius)}
.gallery-controls{position:absolute;inset:0 0 auto;width:100%;aspect-ratio:var(--gallery-max-aspect);pointer-events:none}
.gallery-controls button{pointer-events:auto;color:var(--ink);cursor:pointer}
.gallery-controls>[data-gallery-prev],.gallery-controls>[data-gallery-next]{position:absolute;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:var(--radius);background:rgba(255,255,255,.45);font-size:1rem;line-height:1;font-weight:400;letter-spacing:0}
/* Raleways Winkelzeichen optisch zur Buttonmitte ausrichten. */
.gallery-chevron{display:block;line-height:1;transform:translateY(-.1em)}
/* Unsichtbare Zusatzfläche hält die kleinen Pfeile gut bedienbar. */
.gallery-controls>[data-gallery-prev]::after,.gallery-controls>[data-gallery-next]::after{content:"";position:absolute;inset:-8px}
.gallery-controls>[data-gallery-prev]{left:.75rem}
.gallery-controls>[data-gallery-next]{right:.75rem}
.gallery-controls>[data-gallery-prev]:hover,.gallery-controls>[data-gallery-next]:hover{background:rgba(255,255,255,.7)}
.gallery-dots{position:absolute;bottom:.65rem;left:50%;transform:translateX(-50%);display:flex;gap:0;padding:0 .15rem;border-radius:var(--radius);background:rgba(255,255,255,.45);pointer-events:auto}
.gallery-dot{display:grid;place-items:center;width:24px;height:28px;padding:0;border:0;background:none;border-radius:var(--radius)}
.gallery-dot::before{content:"";display:block;width:5px;height:5px;border-radius:50%;background:var(--ink)}
.gallery-dot[aria-current="true"]::before{width:7px;height:7px;background:var(--ink)}
.gallery-dot:hover::before{background:var(--ink)}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media print{.section-dark .gallery-slide figcaption{color:#333}.gallery-controls{display:none!important}.project-gallery .gallery-slide[hidden]{display:block!important}.gallery-ready .gallery-frame{position:relative;aspect-ratio:auto;background:none}.gallery-ready .gallery-frame img{position:static;height:auto;object-fit:contain}.gallery-ready .gallery-slide{margin-bottom:1.5rem}}

.gallery-ready .gallery-frame .gallery-transition-image{position:absolute;top:0;left:0;pointer-events:none}
@media print{.gallery-transition-image{display:none!important}}

/* Messefoto: linke 34 % ausschließlich in der Darstellung abschneiden.
   Das Original bleibt unverändert; die Klasse wird beim Überblenden mitkopiert. */
.gallery-frame img.gallery-image--crop-left{width:100%;height:auto;aspect-ratio:22 / 25;object-fit:cover;object-position:right center}
.gallery-ready .gallery-frame img.gallery-image--crop-left{height:auto;top:50%;bottom:auto;transform:translateY(-50%)}
@media print{.gallery-ready .gallery-frame img.gallery-image--crop-left{position:static;transform:none;max-height:none;object-fit:cover}}

/* Hero: ein konstanter, vollständig gefüllter Rahmen für alle Projektbilder. */
.hero-gallery{position:relative;--gallery-max-aspect:1.5}
.hero-gallery .gallery-frame{position:relative;aspect-ratio:3 / 2;overflow:hidden;border-radius:var(--radius)}
.hero-gallery .gallery-frame img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;border-radius:0}
.hero-gallery:not(.gallery-ready) .gallery-slide:not(:first-child){display:none}
.hero-gallery .gallery-slide{margin:0}
.hero-gallery:focus-visible{outline:3px solid #356ac3;outline-offset:6px;border-radius:var(--radius)}
@media print{.hero-gallery .gallery-slide{display:none!important}.hero-gallery .gallery-slide:first-child{display:block!important}.hero-gallery .gallery-frame{aspect-ratio:3 / 2}.hero-gallery .gallery-frame img{position:absolute;height:100%;object-fit:cover}}

/* Vergrößerbare Inhaltsbilder und native modale Bildansicht. */
.lightbox-target{position:relative}
.lightbox-open{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;border:0;border-radius:var(--radius);background:transparent;color:var(--ink);cursor:zoom-in}
.lightbox-open:focus-visible{outline-offset:-5px}
.lightbox{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:clamp(1rem,3vw,2rem);border:0;background:rgba(23,24,23,.97);color:#fff;overflow:hidden}
.lightbox::backdrop{background:rgba(23,24,23,.85)}
.lightbox[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:1rem}
.lightbox-toolbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;font-size:var(--font-small);font-weight:700;letter-spacing:.055em;text-transform:uppercase}
.lightbox button{cursor:pointer}
.lightbox-close,.lightbox-prev,.lightbox-next{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:var(--radius);background:rgba(255,255,255,.75);color:var(--ink);padding:0;line-height:1;font-weight:400}
.lightbox-close svg{display:block;width:20px;height:20px}
.lightbox-prev,.lightbox-next{position:absolute;top:50%;transform:translateY(-50%);font-size:1.2rem}
.lightbox-prev{left:0}.lightbox-next{right:0}
.lightbox-prev span,.lightbox-next span{transform:translateY(-.1em)}
.lightbox button:hover{background:var(--tint)}
.lightbox-stage{position:relative;display:grid;place-items:center;min-height:0;min-width:0}
.lightbox-picture{overflow:hidden;border-radius:var(--radius);touch-action:pan-y pinch-zoom}
.lightbox-picture img{display:block;width:100%;height:100%;object-fit:contain}
.lightbox-picture.is-cropped img{object-fit:cover;object-position:right center}
.lightbox-footer{display:grid;justify-items:center;gap:.65rem;min-width:0}
.lightbox-caption{max-width:80ch;text-align:center;font-size:var(--font-small);color:var(--text-on-dark);max-height:18dvh;overflow:auto}
.lightbox-dots{display:flex;max-width:100%;overflow-x:auto;padding:0 .2rem;border-radius:var(--radius);background:rgba(255,255,255,.75)}
.lightbox .gallery-dot{flex-shrink:0;width:28px;height:32px}
.lightbox [hidden]{display:none!important}
@media print{.lightbox,.lightbox-open{display:none!important}}