:root{
  --sky:#d9edf5;
  --sky-deep:#c8e3ee;
  --ink:#29424c;
  --white:#fff;
  --glass:rgba(255,255,255,.25);
  --line:rgba(255,255,255,.42);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:linear-gradient(180deg,var(--sky) 0%,#e7f4f8 100%);color:var(--ink);font-family:"Helvetica Neue",Arial,-apple-system,BlinkMacSystemFont,sans-serif}
body{min-height:100vh}
a{color:inherit}

/* Startseite: Aufbau bleibt unverändert. */
.hero{position:fixed;inset:12% 15%;background:url('images/index/hero.jpg') center 26%/cover no-repeat;opacity:1;transform:scale(1);transition:none;box-shadow:0 18px 55px rgba(20,55,75,.10);border:3px solid #e87524;box-sizing:border-box}
.banner{position:fixed;left:50%;right:auto;width:150vw;top:65vh;transform:translate(-50%,-50%);z-index:5;text-align:center;padding:23px 18px 19px;background:var(--glass);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.brand,.site-title{font-size:0;line-height:1;letter-spacing:0}
.brand{margin:0 0 10px;color:#fff;line-height:1;text-shadow:none}
nav{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 27px}
nav a{color:#fff;text-decoration:none;font-weight:300;font-size:12px;letter-spacing:.15em;text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.20);transition:opacity .2s ease}
nav a:hover{opacity:.62}
.home-footer{position:fixed;left:34px;right:34px;bottom:18px;z-index:6;display:flex;align-items:center;justify-content:center;font-size:10px;letter-spacing:.09em}
.home-footer a{margin:0 8px;text-decoration:none;color:rgba(41,66,76,.72)}
.home-footer .copyright{position:absolute;left:0;margin:0;color:rgba(41,66,76,.72)}

/* Unterseiten: derselbe Milchglas-Banner, ca. 5% unter dem oberen Rand. */
.site-header{width:100%;margin-top:5vh;padding:18px 22px 16px;text-align:center;background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 10px 35px rgba(54,94,110,.06)}
.site-title{margin:0 0 8px;color:#e87524;line-height:1;text-shadow:none}
.site-header nav{justify-content:center}
.site-header nav a{color:#000;text-shadow:0 1px 7px rgba(39,72,85,.16)}

.content{max-width:1050px;margin:0 auto;padding:76px 34px 90px}
.content h1,.content h2{font-family:"Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;font-weight:400;letter-spacing:.015em}
.content h1{font-size:clamp(50px,6vw,76px);line-height:1;margin:0 0 40px}
.content h2{font-size:36px;margin-top:0}
.content p,.content li{line-height:1.85;font-weight:300}
.vita-grid{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(300px,1.4fr);gap:60px;align-items:start}
.portrait-placeholder{aspect-ratio:4/5;border:1px solid rgba(41,66,76,.18);display:grid;place-items:center;text-align:center;padding:25px;background:rgba(255,255,255,.20);font-family:"Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;font-size:28px}
.vita-portrait{aspect-ratio:4/5;overflow:hidden;background:rgba(255,255,255,.20)}
.vita-portrait img{width:100%;height:100%;display:block;object-fit:cover;object-position:center 38%}
.section-block{margin-bottom:45px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{min-height:180px;padding:30px;background:rgba(255,255,255,.24);border:1px solid rgba(255,255,255,.48);text-decoration:none;display:flex;align-items:flex-end;font-family:"Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;font-size:32px;transition:background .25s ease,transform .25s ease}
.card:hover{background:rgba(255,255,255,.38);transform:translateY(-2px)}
.site-footer{max-width:1050px;margin:0 auto;padding:22px 34px 32px;border-top:1px solid #e87524;font-size:10px;letter-spacing:.08em;position:relative;text-align:center}
.site-footer a{margin-right:16px;text-decoration:none}
.site-footer .copyright{position:absolute;left:34px}


/* Ruth Artwork masthead: exact lettering taken from the approved business-card front. */
.ruth-logo{display:block;height:auto;margin:0 auto}
.brand .ruth-logo{width:min(760px,68vw);max-width:92vw}
.site-title .ruth-logo{width:min(500px,70vw);max-width:92vw}
@media(max-width:720px){
  .brand .ruth-logo{width:min(620px,82vw)}
  .site-title .ruth-logo{width:min(440px,80vw)}
}
@media(max-width:720px){
  .hero{inset:10%}
  .banner{padding:18px 10px 15px}
  nav{gap:8px 14px}
  nav a{font-size:10px}
  .site-header{margin-top:4vh;padding:16px 12px 14px}
  .content{padding:54px 20px 70px}
  .vita-grid,.cards{grid-template-columns:1fr}
  .site-footer{padding-left:20px}
}

/* Ausstellungen */
.exhibition-list{display:grid;gap:44px}
.exhibition-item{margin:0}
.exhibition-item img{width:100%;height:auto;display:block;box-shadow:0 14px 40px rgba(20,55,75,.10)}
.exhibition-copy{padding-top:22px}
.exhibition-copy h2{margin:0 0 5px}
.exhibition-copy p{margin:0;font-size:15px;letter-spacing:.025em}

/* Galerie – Abstrakte Kunst */
.art-intro{max-width:720px;margin:-18px auto 50px;line-height:1.8;font-weight:300;text-align:center}
.art-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:38px 28px}
.art-work{background:rgba(255,255,255,.24);border:1px solid rgba(255,255,255,.48);padding:16px}
.art-room{aspect-ratio:3/4;display:block;overflow:hidden;background:rgba(255,255,255,.35);text-decoration:none;position:relative}
.art-room img{width:100%;height:100%;display:block;object-fit:cover}
.art-placeholder{width:100%;height:100%;display:grid;place-items:center;text-align:center;padding:30px;background:linear-gradient(135deg,rgba(255,255,255,.52),rgba(255,255,255,.18));font-family:"Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;font-size:27px}
.art-hint{position:absolute;right:12px;bottom:10px;background:rgba(255,255,255,.78);padding:7px 10px;font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.art-copy{padding:18px 8px 8px}
.art-copy h2{font-size:32px;margin:0 0 6px}
.art-meta{font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:.7;margin:0 0 10px}
.art-desc{font-size:14px;line-height:1.75;font-weight:300;margin:0}
.art-lightbox{position:fixed;inset:0;z-index:20;background:rgba(217,237,245,.96);display:none;align-items:center;justify-content:center;padding:3.5vw}
.art-lightbox:target{display:flex}
.art-lightbox-card{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:92vw;max-height:92vh}
.art-lightbox-card>img{display:block;max-width:88vw;max-height:70vh;object-fit:contain;box-shadow:0 15px 70px rgba(0,0,0,.28)}
.art-lightbox-info{width:min(760px,88vw);padding:10px 14px;background:rgba(255,255,255,.58);border:1px solid rgba(255,255,255,.72);display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;font-size:11px;line-height:1.35;letter-spacing:.04em;text-align:center}
.art-lightbox-info span:not(:last-child)::after{content:" · ";opacity:.45;margin-left:12px}
.art-close{position:fixed;top:24px;right:30px;color:var(--ink);text-decoration:none;font-size:34px;font-weight:300}
@media(max-width:640px){.art-lightbox-card>img{max-height:62vh}.art-lightbox-info{font-size:10px;padding:8px 10px;gap:3px 8px}.art-lightbox-info span:not(:last-child)::after{margin-left:7px}}
.demo-art{width:78%;height:68%;background:linear-gradient(125deg,#f5f0e5 0 20%,#597f90 20% 38%,#d8a46b 38% 57%,#263e49 57% 74%,#e7d7c1 74%);box-shadow:0 9px 30px rgba(0,0,0,.18)}
@media(max-width:720px){.art-gallery{grid-template-columns:1fr}.art-intro{margin-top:-8px}}

/* Galerie v11 */
.gallery-tile{display:block;text-decoration:none;color:inherit}
.gallery-tile-image{height:180px;background:rgba(255,255,255,.24);border:1px solid rgba(255,255,255,.48);overflow:hidden;transition:background .25s ease,transform .25s ease}
.gallery-tile-image img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}
.gallery-tile:hover .gallery-tile-image{background:rgba(255,255,255,.38);transform:translateY(-2px)}
.gallery-tile-title{margin-top:11px;text-align:center;font-family:inherit;font-weight:300;font-size:16px;letter-spacing:.15em;text-transform:uppercase}
@media(max-width:720px){.gallery-tile-image{height:180px}.gallery-tile-title{font-size:14px}}

/* V12: Leuchtbilder-Kachel zeigt bewusst die Raumsituation inklusive Sofa. */
.gallery-tile-image--leucht img{object-fit:cover;object-position:center 72%;transform:scale(1.03)}

/* TEST: quadratische Galerie-Kacheln; Bilder vollständig sichtbar */
.gallery-tile-image{height:auto;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.gallery-tile-image img{width:100%;height:100%;object-fit:contain;object-position:center}
.gallery-tile-image--leucht img{object-fit:contain;object-position:center;transform:none}
@media(max-width:720px){.gallery-tile-image{height:auto;aspect-ratio:1/1}}

@media(max-width:700px){.home-footer{left:20px;right:20px}.site-footer .copyright{left:20px}}

/* V25: Gaia-Detailansicht komplett im Viewport, ohne Scrollen/Hintergrunddurchscheinen */
body:has(.art-lightbox:target){overflow:hidden}
.art-lightbox{overflow:hidden;box-sizing:border-box}
.art-lightbox:target{display:flex}
.art-lightbox-card{width:min(92vw,900px);height:min(90vh,820px);max-height:none;justify-content:center;overflow:hidden;box-sizing:border-box}
.art-lightbox-card>img{max-width:86vw;max-height:calc(90vh - 64px);width:auto;height:auto;flex:0 1 auto;object-fit:contain}
.art-lightbox-info{flex:0 0 auto;box-sizing:border-box;margin:0}
@media(max-width:640px){.art-lightbox-card{height:88vh}.art-lightbox-card>img{max-height:calc(88vh - 72px)}}

/* V26: Gaia vollständig im Original-Seitenverhältnis 80:100, unbeschnitten, Werkdaten direkt darunter */
#werk1 .art-lightbox-card{width:min(92vw,820px);height:min(94vh,900px);gap:8px}
#werk1 .art-lightbox-card>img{width:auto;height:auto;max-width:min(82vw,640px);max-height:calc(94vh - 58px);aspect-ratio:auto;object-fit:contain;object-position:center}
#werk1 .art-lightbox-info{width:min(82vw,640px);padding:8px 12px;white-space:normal}
@media(max-width:640px){#werk1 .art-lightbox-card{height:92vh}#werk1 .art-lightbox-card>img{max-width:88vw;max-height:calc(92vh - 72px)}#werk1 .art-lightbox-info{width:88vw}}

/* V27: geschlossene hellblaue Gaia-Detailansicht ohne durchscheinende Homepage */
#werk1.art-lightbox{background:#d9edf5;opacity:1;isolation:isolate}
#werk1.art-lightbox:target{display:flex}
#werk1 .art-lightbox-card{background:transparent}

/* V29 – Leuchtbilder */
.leucht-intro{max-width:760px;margin:-18px 0 48px;padding:22px 24px;background:rgba(255,255,255,.24);border:1px solid rgba(255,255,255,.48)}
.leucht-intro h2{font-size:30px;margin:0 0 8px}
.leucht-intro p{margin:0 0 14px}
.leucht-more{display:inline-block;text-decoration:none;border-bottom:1px solid rgba(41,66,76,.38);padding-bottom:2px;font-size:12px;letter-spacing:.06em}
.leucht-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}
.leucht-info-page{max-width:800px}
.leucht-info-placeholder{margin-top:28px;padding:20px 22px;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.45)}
@media(max-width:900px){.leucht-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.leucht-gallery{grid-template-columns:1fr}.leucht-intro{margin-top:-8px;padding:18px}}

/* V35: Prometheus – Werkformat 80 × 100 cm, Detailansicht analog Gaia */
#werk2.art-lightbox{background:#d9edf5;opacity:1;isolation:isolate}
#werk2 .art-lightbox-card{width:min(92vw,820px);height:min(94vh,900px);gap:8px;background:transparent}
#werk2 .art-lightbox-card>img{width:auto;height:auto;max-width:min(82vw,640px);max-height:calc(94vh - 58px);aspect-ratio:4/5;object-fit:contain;object-position:center}
#werk2 .art-lightbox-info{width:min(82vw,640px);padding:8px 12px;white-space:normal}
@media(max-width:640px){#werk2 .art-lightbox-card{height:92vh}#werk2 .art-lightbox-card>img{max-width:88vw;max-height:calc(92vh - 72px)}#werk2 .art-lightbox-info{width:88vw}}


/* V36: Prometheus-Vorschau (Kachel 2) im Werkformat 80 × 100 cm */

/* V42: Prometheus Detailansicht – randlos, Textleiste unverändert */
#werk2 .art-lightbox-card>img{
  width:min(82vw,640px);
  height:auto;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:center;
}
#werk2 .art-lightbox-info{width:min(82vw,640px)}
@media(max-width:640px){
  #werk2 .art-lightbox-card>img{width:88vw;max-width:88vw;object-fit:cover}
  #werk2 .art-lightbox-info{width:88vw}
}

/* V47: Aurora-Kachel – Kachelgröße unverändert, Motiv leicht nach links verschoben, damit das Werk vollständig sichtbar ist */
.art-room--aurora img{object-position:72% center}

/* V49: Aurora Detailansicht – Werkdatenblock sicher sichtbar wie bei Werk 1 und 2 */
#werk3.art-lightbox{background:#d9edf5;opacity:1;isolation:isolate}
#werk3 .art-lightbox-card{width:min(92vw,900px);height:min(94vh,900px);gap:8px;background:transparent;justify-content:center;overflow:visible}
#werk3 .art-lightbox-card>img{width:auto;height:auto;max-width:min(88vw,760px);max-height:calc(94vh - 92px);object-fit:contain;object-position:center;flex:0 1 auto}
#werk3 .art-lightbox-info{width:min(88vw,760px);padding:8px 12px;white-space:normal;flex:0 0 auto}
@media(max-width:640px){#werk3 .art-lightbox-card{height:92vh}#werk3 .art-lightbox-card>img{max-width:90vw;max-height:calc(92vh - 100px)}#werk3 .art-lightbox-info{width:90vw}}

/* V52: Werk 04 Detailansicht – nur Kunstwerk auf einfarbig hellblauem Hintergrund, 60:80 */
#werk4.art-lightbox{background:#d9edf5;opacity:1;isolation:isolate}
#werk4 .art-lightbox-card{width:min(92vw,760px);height:min(94vh,900px);gap:0;background:transparent;justify-content:center;overflow:visible}
#werk4 .art-lightbox-card>img{display:block;width:auto;height:min(80vh,720px);max-width:86vw;max-height:84vh;aspect-ratio:3/4;object-fit:contain;object-position:center;box-shadow:0 15px 70px rgba(0,0,0,.28)}
#werk4 .art-lightbox-info{display:none}
@media(max-width:640px){#werk4 .art-lightbox-card{height:92vh}#werk4 .art-lightbox-card>img{height:auto;width:min(78vw,450px);max-height:82vh;aspect-ratio:3/4;object-fit:contain}}

/* V53: Selene – Mond, Detailansicht Werk 04 mit Werkdaten */
#werk4 .art-lightbox-card{gap:8px;}
#werk4 .art-lightbox-card>img{height:min(76vh,680px);max-height:calc(94vh - 72px);box-shadow:none;}
#werk4 .art-lightbox-info{display:flex;width:min(82vw,640px);padding:8px 12px;white-space:normal;}
@media(max-width:640px){#werk4 .art-lightbox-card>img{height:auto;width:min(76vw,430px);max-height:calc(92vh - 84px)}#werk4 .art-lightbox-info{width:88vw}}

/* V54: Werk 04 – neues Originalbild; Werkdatenblock exakt auf Bildbreite */
#werk4 .art-lightbox-card>img{width:min(64.5vw,510px);height:auto;max-height:calc(94vh - 72px);aspect-ratio:3/4;object-fit:contain;box-shadow:none}
#werk4 .art-lightbox-info{width:min(64.5vw,510px);box-sizing:border-box}
@media(max-width:640px){#werk4 .art-lightbox-card>img{width:min(76vw,430px);height:auto;max-height:calc(92vh - 84px)}#werk4 .art-lightbox-info{width:min(76vw,430px)}}

/* V60: Galerie mit zwei zentrierten Kacheln */
.cards--gallery-centered{grid-template-columns:repeat(2,minmax(0,1fr));max-width:calc((100% - 40px) * 2 / 3 + 20px);margin-left:auto;margin-right:auto}
@media(max-width:720px){.cards--gallery-centered{grid-template-columns:1fr;max-width:100%}}

/* Ausstellungen: kompakter Banner und ARTBOXY */
.exhibition-item .exhibition-banner{width:100%;height:280px;object-fit:cover;object-position:center;display:block}
.artboxy-item{padding-top:8px}
.artboxy-logo-link{display:block;max-width:560px;margin:0 auto}
.exhibition-item .artboxy-logo{width:100%;height:auto;display:block;box-shadow:none}
.artboxy-item .exhibition-copy{max-width:760px;margin:0 auto;text-align:center}
.artboxy-item .exhibition-copy p{line-height:1.7}
@media (max-width:700px){.exhibition-item .exhibition-banner{height:190px}.artboxy-logo-link{max-width:420px}}

/* V65: Galerie-Kacheln – Höhe wie in V63, Breite passend zum jeweiligen Bildformat. */
.cards--gallery-centered{
  --gallery-tile-height:min(314px,calc((100vw - 108px)/3));
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:20px;
  max-width:none;
}
.cards--gallery-centered .gallery-tile{flex:0 0 auto}
.cards--gallery-centered .gallery-tile:first-child{width:calc(var(--gallery-tile-height) * .77890625)}
.cards--gallery-centered .gallery-tile:nth-child(2){width:calc(var(--gallery-tile-height) * .77890625)}
.cards--gallery-centered .gallery-tile-image{
  width:100%;
  height:var(--gallery-tile-height);
  aspect-ratio:auto;
}
.cards--gallery-centered .gallery-tile-image img{
  width:100%;
  height:100%;
  object-fit:contain;
}
@media(max-width:720px){
  .cards--gallery-centered{
    --gallery-tile-height:calc(100vw - 40px);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:20px;
    max-width:100%;
  }
}

/* V71: Leuchtbilder – Textbereich bündig zur Gesamtbreite der drei Kacheln */
.leucht-intro{max-width:none;width:100%;box-sizing:border-box}

/* V75: Beide Galerie-Kacheln und ihre sichtbaren Bildflächen identisch groß. */
.cards--gallery-centered .gallery-tile:nth-child(2) .gallery-tile-image img{object-fit:cover;object-position:center}


/* V81: Verschmelzung – Detailansicht Werk 05 mit Originalbild und Werksdatenleiste */
#werk5.art-lightbox{background:#d9edf5;opacity:1;isolation:isolate}
#werk5 .art-lightbox-card{width:min(92vw,760px);height:min(94vh,900px);gap:8px;background:transparent;justify-content:center;overflow:visible}
#werk5 .art-lightbox-card>img{display:block;width:min(64.5vw,510px);height:auto;max-height:calc(94vh - 72px);object-fit:contain;object-position:center;box-shadow:none}
#werk5 .art-lightbox-info{display:flex;width:min(64.5vw,510px);box-sizing:border-box;padding:8px 12px;white-space:normal}
@media(max-width:640px){#werk5 .art-lightbox-card{height:92vh}#werk5 .art-lightbox-card>img{width:min(76vw,430px);height:auto;max-height:calc(92vh - 84px)}#werk5 .art-lightbox-info{width:min(76vw,430px)}}

/* Leuchtbilder v85: Angebotsbox oben, Erklärung nach der Galerie */
.leucht-art-link{color:inherit;text-decoration:none;border-bottom:1px solid rgba(41,66,76,.38)}
.leucht-art-link:hover{border-bottom-color:currentColor}
.leucht-explanation{margin:48px 0 0}
.leucht-gallery .art-copy{padding-bottom:0}
.leucht-gallery .art-copy h2{margin-bottom:0}
@media(max-width:640px){.leucht-explanation{margin-top:34px}}

/* V86: Seitentitel auf den Haupt-Unterseiten zentriert */
.page-title-centered{text-align:center}


/* V88: feine orange Trennlinie unter den Seitentiteln – gleiche Breite wie die Footer-Linie */
.page-title-centered{margin-bottom:0!important}
.page-title-line{height:1px;background:#e87524;width:calc(100% + 68px);margin:18px -34px 40px}
@media(max-width:720px){.page-title-line{width:calc(100% + 40px);margin-left:-20px;margin-right:-20px;margin-top:16px;margin-bottom:34px}}

/* V89: moderne Typografie für Inhaltsüberschriften auf den Haupt-Unterseiten */
.modern-headings .content h1,
.modern-headings .content h2{
  font-family:"Helvetica Neue",Arial,-apple-system,BlinkMacSystemFont,sans-serif;
  font-weight:300;
  letter-spacing:.035em;
}
.modern-headings .content h2{letter-spacing:.025em}


/* V98: Leuchtbilder – Kachel 1 mit Aurora-Raumbild. Kachelgröße bleibt unverändert.
   Bild füllt die Kachel in voller Höhe; der horizontale Ausschnitt ist zum Kunstwerk verschoben. */
.leucht-room--aurora img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:72% center;
}
.leucht-work--aurora .art-copy,
.leucht-work--mond .art-copy{padding-top:12px}
.leucht-work--aurora .leucht-caption,
.leucht-work--mond .leucht-caption{
  width:100%;
  margin:0;
  font-size:clamp(15px,1.45vw,20px);
  line-height:1.2;
  text-align:center;
  white-space:nowrap;
}


/* V100: Aurora-Leuchtbild in Kachel 1 – Hover schaltet zwischen AUS und EIN.
   Das EIN-Motiv wurde perspektivisch auf das AUS-Motiv ausgerichtet, damit Rahmen,
   Ausschnitt, Größe und Position beim Umschalten deckungsgleich bleiben. */
.leucht-room--aurora .leucht-aurora-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:72% center;
}
.leucht-room--aurora .leucht-aurora-img--aus{opacity:1}
.leucht-room--aurora .leucht-aurora-img--ein{opacity:0}
.leucht-room--aurora:hover .leucht-aurora-img--aus{opacity:0}
.leucht-room--aurora:hover .leucht-aurora-img--ein{opacity:1}

/* V101: Galerie – neues Leuchtbild-Raumbild in Kachel 2.
   Kachelgröße bleibt unverändert; das 3:4-Raumbild füllt die vorhandene Bildfläche. */
.cards--gallery-centered .gallery-tile:nth-child(2) .gallery-tile-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

/* V102: Leuchtbilder – Kachel 2 mit proportional korrigiertem Mond-Leuchtbild.
   Das 3:4-Raumbild füllt die unveränderte 3:4-Kachel ohne Verzerrung. */
.leucht-room--mond img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}

/* V103: Galerie – Kachel 2 verwendet dasselbe korrigierte Mond-Raumbild wie Leuchtbilder Kachel 2.
   Die Kachelgröße bleibt unverändert; das 3:4-Bild wird proportional skaliert und ohne Verzerrung beschnitten. */
.cards--gallery-centered .gallery-tile:nth-child(2) .gallery-tile-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}


/* V105: Leuchtbilder – Kachel 2 pixelgenau korrigiert.
   Die EIN-Version basiert direkt auf denselben Pixeln wie images/shared/B_Raum_Mond.png; dadurch bleiben
   Rahmen, Ausschnitt, Größe und Position beim Hover exakt deckungsgleich. Leuchtkraft: -5 %. */
.leucht-room--mond .leucht-mond-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}
.leucht-room--mond .leucht-mond-img--aus{opacity:1}
.leucht-room--mond .leucht-mond-img--ein{opacity:0}
.leucht-room--mond:hover .leucht-mond-img--aus{opacity:0}
.leucht-room--mond:hover .leucht-mond-img--ein{opacity:1}

/* V110-W10: Galerie mit dritter Kachel „Portfolio“; alle drei Kacheln identisch groß. */
.cards--gallery-centered .gallery-tile{
  width:calc(var(--gallery-tile-height) * .77890625);
}
.cards--gallery-centered .gallery-tile-image--portfolio img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

/* V110-W10: Grundgerüst der neuen Portfolio-Seite im bestehenden Seitenstil. */
.portfolio-page{min-height:calc(100vh - 330px)}

/* V111: Portfolio – Werkzeilen mit fester Bildhöhe und einheitlich ausgerichteten Datenfeldern.
   Der Beginn des Textfelds liegt bei 2 × Bildhöhe. Dadurch bleibt bei quadratischen
   Platzhaltern zunächst genau eine Bildhöhe Abstand; echte Bilder dürfen später bei
   gleicher Höhe proportional breiter werden, ohne die linke Textkante zu verschieben. */
.portfolio-page{
  --portfolio-art-height:150px;
  --portfolio-info-start:calc(var(--portfolio-art-height) * 2);
  min-height:calc(100vh - 330px);
}
.portfolio-list{display:grid;gap:34px}
.portfolio-work{
  display:grid;
  grid-template-columns:var(--portfolio-info-start) minmax(0,1fr);
  align-items:start;
}
.portfolio-image-slot{
  width:var(--portfolio-art-height);
  height:var(--portfolio-art-height);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.24);
  border:1px solid rgba(255,255,255,.48);
  color:rgba(41,66,76,.55);
  font-size:12px;
  font-weight:300;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.portfolio-image-slot img{
  display:block;
  width:auto;
  height:var(--portfolio-art-height);
  max-width:calc(var(--portfolio-info-start) - 14px);
  object-fit:contain;
  object-position:left center;
}
.portfolio-info{
  min-height:var(--portfolio-art-height);
  padding:20px 24px;
  background:rgba(255,255,255,.24);
  border:1px solid rgba(255,255,255,.48);
}
.portfolio-info dl{margin:0;display:grid;gap:9px}
.portfolio-info dl>div{display:grid;grid-template-columns:90px minmax(0,1fr);gap:18px;align-items:baseline}
.portfolio-info dt{
  margin:0;
  font-size:11px;
  font-weight:400;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.72;
}
.portfolio-info dd{margin:0;font-size:14px;font-weight:300;letter-spacing:.025em}
@media(max-width:720px){
  .portfolio-page{--portfolio-art-height:132px;--portfolio-info-start:calc(var(--portfolio-art-height) * 2)}
  .portfolio-list{gap:28px}
  .portfolio-work{grid-template-columns:1fr;gap:16px}
  .portfolio-image-slot{justify-self:start}
  .portfolio-info{min-height:0;width:100%}
}


/* V112: Erste drei Portfolio-Werke. Die Bildhöhe bleibt fest; die Kachelbreite folgt
   automatisch dem Seitenverhältnis des jeweiligen Kunstwerks. Die Textkante bleibt
   unverändert bei 2 × Bildhöhe ausgerichtet. */
.portfolio-image-slot--artwork{
  width:max-content;
  min-width:0;
  overflow:visible;
}
.portfolio-image-slot--artwork img{
  width:auto;
  height:var(--portfolio-art-height);
  max-width:calc(var(--portfolio-info-start) - 14px);
  object-fit:contain;
  object-position:left center;
}

/* V113: Sieben weitere Werke im Portfolio ergänzt; bestehende V112-Anordnung bleibt unverändert. */

/* V114: Neun weitere Werke im Portfolio ergänzt; Layout und feste Bildhöhe bleiben unverändert. */

/* V120: Portfolio – Hover-Hervorhebung und große Bildansicht als Overlay im hellblauen Seitenhintergrund. */
.portfolio-image-slot--artwork img{
  cursor:zoom-in;
  transition:transform .22s ease, filter .22s ease;
  transform-origin:center center;
}
.portfolio-image-slot--artwork:hover img,
.portfolio-image-slot--artwork img:focus-visible{
  transform:scale(1.045);
  filter:brightness(1.04);
}
.portfolio-image-slot--artwork img:focus-visible{
  outline:2px solid #e87524;
  outline-offset:4px;
}
body.portfolio-lightbox-open{overflow:hidden}
.portfolio-lightbox{
  position:fixed;
  inset:0;
  z-index:1000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:28px;
  box-sizing:border-box;
  background:linear-gradient(180deg,var(--sky) 0%,#e7f4f8 100%);
  cursor:zoom-out;
}
.portfolio-lightbox.is-open{display:flex}
.portfolio-lightbox__image{
  display:block;
  width:auto;
  height:auto;
  max-width:calc(100vw - 56px);
  max-height:calc(100vh - 56px);
  object-fit:contain;
  box-shadow:0 18px 70px rgba(0,0,0,.38);
  cursor:default;
}
.portfolio-lightbox__close{
  position:fixed;
  top:18px;
  right:22px;
  z-index:1001;
  width:44px;
  height:44px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--ink);
  font:300 38px/1 Arial,sans-serif;
  cursor:pointer;
}
@media(max-width:640px){
  .portfolio-lightbox{padding:18px}
  .portfolio-lightbox__image{max-width:calc(100vw - 36px);max-height:calc(100vh - 36px)}
  .portfolio-lightbox__close{top:10px;right:12px}
}

/* V127: Detailansichten Kachel 1 und 2 – Standardbild, Hoverbild nur beim Überfahren des großen Bildes */
#leucht1 .leucht-detail-hover,
#leucht2 .leucht-detail-hover{
  position:relative;
  display:block;
  width:max-content;
  max-width:90vw;
  max-height:calc(90vh - 64px);
  line-height:0;
}
#leucht1 .leucht-detail-img,
#leucht2 .leucht-detail-img{
  display:block;
  width:auto;
  height:auto;
  max-width:90vw;
  max-height:calc(90vh - 64px);
  object-fit:contain;
  box-shadow:0 15px 70px rgba(0,0,0,.28);
}
#leucht1 .leucht-detail-img--hover,
#leucht2 .leucht-detail-img--hover{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  transition:opacity .18s ease;
}
#leucht1 .leucht-detail-hover:hover .leucht-detail-img--hover,
#leucht2 .leucht-detail-hover:hover .leucht-detail-img--hover{opacity:1}
@media(max-width:640px){
  #leucht1 .leucht-detail-hover,
  #leucht2 .leucht-detail-hover,
  #leucht1 .leucht-detail-img,
  #leucht2 .leucht-detail-img{max-width:88vw;max-height:calc(88vh - 72px)}
}

/* V128: Leuchtbilder – Kachel 3 „Genesis“.
   Das neue Raumbild füllt die bestehende 3:4-Kachel ohne Verzerrung; der Ausschnitt bleibt zentriert.
   Die Detailansicht zeigt vorerst ausschließlich das Standardbild. */
.leucht-work--genesis .art-copy{padding-top:12px}
.leucht-work--genesis .leucht-caption{
  width:100%;
  margin:0;
  font-size:clamp(15px,1.45vw,20px);
  line-height:1.2;
  text-align:center;
  white-space:nowrap;
}
.leucht-room--genesis .leucht-genesis-img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}
#leucht3 .art-lightbox-card{line-height:0}
#leucht3 .leucht-detail-img--genesis{
  display:block;
  width:auto;
  height:auto;
  max-width:90vw;
  max-height:calc(90vh - 64px);
  object-fit:contain;
  box-shadow:0 15px 70px rgba(0,0,0,.28);
}
@media(max-width:640px){
  #leucht3 .leucht-detail-img--genesis{max-width:88vw;max-height:calc(88vh - 72px)}
}


/* V129: Leuchtbilder – Kachel 3 „Genesis“ mit pixelgenauem Hover.
   Standard- und Hoverbild haben identische Abmessungen und dieselbe Raumansicht.
   Das Hoverbild basiert ausschließlich auf den Pixeln des Standardbilds; nur das Kunstwerk wird aufgehellt. */
.leucht-room--genesis .leucht-genesis-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}
/* V130: Das Standardbild bleibt beim Hover unverändert stehen.
   Nur die leuchtende Variante wird als deckungsgleiches Overlay eingeblendet.
   Dadurch gibt es während des Übergangs keinen transparenten Zwischenzustand und kein sichtbares „Zappeln“ der gesamten Kachel. */
.leucht-room--genesis .leucht-genesis-img--aus{opacity:1}
.leucht-room--genesis .leucht-genesis-img--ein{opacity:0;transition:opacity .18s ease;pointer-events:none;will-change:opacity}
.leucht-room--genesis:hover .leucht-genesis-img--ein{opacity:1}

#leucht3 .leucht-detail-hover{
  position:relative;
  display:block;
  width:max-content;
  max-width:90vw;
  max-height:calc(90vh - 64px);
  line-height:0;
}
#leucht3 .leucht-detail-img{
  display:block;
  width:auto;
  height:auto;
  max-width:90vw;
  max-height:calc(90vh - 64px);
  object-fit:contain;
  box-shadow:0 15px 70px rgba(0,0,0,.28);
}
#leucht3 .leucht-detail-img--hover{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  transition:opacity .18s ease;
  pointer-events:none;
  will-change:opacity;
}
#leucht3 .leucht-detail-hover:hover .leucht-detail-img--hover{opacity:1}
@media(max-width:640px){
  #leucht3 .leucht-detail-hover,
  #leucht3 .leucht-detail-img{max-width:88vw;max-height:calc(88vh - 72px)}
}

/* V-001 multilingual language selector */
.lang-switch{display:inline-flex;align-items:center;gap:0;margin-left:2px;position:relative}
.lang-switch a{padding:2px 5px!important;font-size:10px!important;letter-spacing:.08em!important;opacity:.72}
.lang-switch a.active{opacity:1;text-decoration:underline;text-underline-offset:3px}
@media(max-width:720px){.lang-switch{width:100%;justify-content:center;margin-top:3px}.lang-switch a{font-size:9px!important}}

/* V-002: language selector only on each language home page */
.lang-dropdown{position:relative;display:inline-flex;align-items:center;margin-left:2px}
.lang-current{appearance:none;border:0;background:transparent;color:inherit;font:inherit;font-weight:300;font-size:12px;letter-spacing:.15em;text-transform:uppercase;cursor:pointer;padding:0;text-shadow:inherit}
.lang-menu{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);min-width:62px;padding:7px 0;background:rgba(255,255,255,.97);box-shadow:0 5px 18px rgba(0,0,0,.14);z-index:1000}
.lang-menu a{display:block!important;color:#111!important;text-shadow:none!important;padding:6px 12px!important;text-align:center;font-size:10px!important;letter-spacing:.1em!important}
.lang-dropdown:hover .lang-menu,.lang-dropdown:focus-within .lang-menu{display:block}
@media(max-width:720px){.lang-current{font-size:10px}.lang-menu{left:auto;right:0;transform:none}}

/* V-003: current language matches white home navigation */
.banner .lang-current{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.20)}

/* V009 – Werk 06: Raumansicht exakt 3:4; Detailansicht nur Kunstwerk */
#werk6 .art-lightbox-card{width:min(94vw,1100px);height:92vh;gap:0}
#werk6 .art-lightbox-card>img{max-width:92vw;max-height:88vh;width:auto;height:auto;object-fit:contain;box-shadow:0 15px 70px rgba(0,0,0,.28)}