/* ── Self-hosted fonts – keine Verbindung zu Google-Servern ── · Lizenz: SIL Open Font License 1.1, Texte in fonts/OFL-*.txt */
@font-face { font-family:'Cormorant Garamond'; font-style:italic; font-weight:300; font-display:swap;
  src:url('fonts/CormorantGaramond-italic-latin-ext.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; }
@font-face { font-family:'Cormorant Garamond'; font-style:italic; font-weight:300; font-display:swap;
  src:url('fonts/CormorantGaramond-italic-latin.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; }
@font-face { font-family:'Cormorant Garamond'; font-style:italic; font-weight:400; font-display:swap;
  src:url('fonts/CormorantGaramond-italic-latin-ext.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; }
@font-face { font-family:'Cormorant Garamond'; font-style:italic; font-weight:400; font-display:swap;
  src:url('fonts/CormorantGaramond-italic-latin.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; }
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:300; font-display:swap;
  src:url('fonts/CormorantGaramond-normal-latin-ext.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; }
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:300; font-display:swap;
  src:url('fonts/CormorantGaramond-normal-latin.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; }
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/CormorantGaramond-normal-latin-ext.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; }
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/CormorantGaramond-normal-latin.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; }
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/CormorantGaramond-normal-latin-ext.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; }
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/CormorantGaramond-normal-latin.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; }
@font-face { font-family:'Great Vibes'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/GreatVibes-latin-ext.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; }
@font-face { font-family:'Great Vibes'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/GreatVibes-latin.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; }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:200; font-display:swap;
  src:url('fonts/Montserrat-latin-ext.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; }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:200; font-display:swap;
  src:url('fonts/Montserrat-latin.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; }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:300; font-display:swap;
  src:url('fonts/Montserrat-latin-ext.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; }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:300; font-display:swap;
  src:url('fonts/Montserrat-latin.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; }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/Montserrat-latin-ext.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; }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/Montserrat-latin.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; }
  * { margin: 0; padding: 0; box-sizing: border-box; }

  :root {
    --gold: #C9A84C;
    --gold-light: #E8D5A3;
    --gold-dim: #8B6E2E;
    --black: #0A0A0A;
    --white: #FAFAF8;
    --off-white: #F5F4F0;
    --gray-light: #E8E7E3;
    --gray-mid: #999890;
    --text-dark: #1A1A1A;
    --cream: #F2ECDE;
  }

  /* Grundschrift wächst auf großen Bildschirmen mit (ab ca. 1500 px Breite, gebremst durch die Höhe):
     die Seite sieht auf Full-HD-, 27″- und 4K-Monitoren so aus wie auf dem MacBook (1440 px), wo sie
     unverändert bei der Standardschrift (16 px) bleibt. Maße der Seite sind in rem angegeben und
     wachsen dadurch mit. Grenzen in rem: eine im Browser größer eingestellte Schrift gilt weiter.
     (Gleiche Regel steht für den Ladeschirm auch inline in index.html.) */
  html { scroll-behavior: auto; font-size: clamp(1rem, min(1.0667vw, 2vh), 1.875rem); }
  /* Mindestgröße für sehr kleine Beschriftungen: auf Bildschirmen ohne Retina (Windows-Laptops,
     Monitore bei 100–125 %) wären sie sonst nur 7–9 Pixel groß und kaum lesbar. Retina (Mac, Handy)
     bleibt unverändert, dort gilt 0. Verwendet als font-size: max(…, var(--label-min)). */
  :root { --label-min: 0px; }
  @media (max-resolution: 1.49dppx), (-webkit-max-device-pixel-ratio: 1.49) { :root { --label-min: 0.58rem; } }

  body {
    font-family: 'Montserrat', sans-serif;
    background: var(--white);
    color: var(--text-dark);
    overflow-x: hidden;
  }

  /* ── NAVIGATION – zentriert ── */
  nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.4rem 3rem 1rem;
    background: rgba(250,250,248,0.96);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-bottom: 0.5px solid var(--gray-light);
    transform: translateY(-100%);
    transition: transform 0.5s ease;
  }

  nav.visible {
    transform: translateY(0);
  }

  .nav-logo {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.05rem;
    letter-spacing: 0.38em;
    color: var(--text-dark);
    text-transform: uppercase;
    font-weight: 300;
    margin-bottom: 0.65rem;
  }

  .nav-logo span { color: var(--gold); }

  .nav-divider {
    width: 1.875rem;
    height: 0.5px;
    background: var(--gold);
    margin-bottom: 0.65rem;
    opacity: 0.6;
  }

  .nav-links {
    display: flex;
    gap: 3rem;
    list-style: none;
    align-items: center;
  }

  .nav-links a {
    text-decoration: none;
    font-size: 0.58rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gray-mid);
    font-weight: 300;
    transition: color 0.3s;
    position: relative;
    line-height: 1;
    vertical-align: middle;
    white-space: nowrap;
  }

  /* Schmalere Bildschirme mit Desktop-Navigation (u. a. Handy quer): enger setzen, damit alle Punkte einzeilig in eine Reihe passen */
  @media (min-width: 769px) and (max-width: 1100px) {
    .nav-links { gap: 1.6rem; }
    .nav-links a { letter-spacing: 0.22em; }
  }
  /* Handy quer mit Desktop-Navigation: Navigation flacher, damit sie die Einleitung nicht verdeckt */
  @media (min-width: 769px) and (max-height: 500px) and (orientation: landscape) {
    nav { padding: 0.8rem 3rem 0.7rem; }
    .nav-logo { margin-bottom: 0.4rem; }
    .nav-divider { margin-bottom: 0.45rem; }
  }

  .nav-links a::after {
    content: '';
    position: absolute;
    bottom: -0.25rem; left: 0; right: 0;
    height: 0.5px;
    background: var(--gold);
    transform: scaleX(0);
    transition: transform 0.3s;
    transform-origin: center;
  }

  .nav-links a:hover { color: var(--gold); }
  .nav-links a:hover::after { transform: scaleX(1); }
  .nav-links a.active { color: var(--gold); }
  .nav-links a.active::after { transform: scaleX(1); }

  /* ── HERO – „Werk im Licht" ── */
  #hero {
    height: 100vh;
    height: 100svh;
    width: 100%;
    background: #0b0a09;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
  }

  /* Nach „Galerie betreten" ausgeblendet – Hochscrollen endet am Galerie-Anfang (siehe _syncHero) */
  html.gallery-entered #hero { display: none; }

  /* Dunkle, leicht strukturierte Galeriewand */
  .hero-wall {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(180deg, #13110f 0%, #0e0d0b 62%, #0a0a0a 100%);
  }
  .hero-wall::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.07;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  .hero-floor {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 18%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to top, #070707 0%, transparent 100%);
  }

  .hero-stage {
    position: relative;
    z-index: 2;
    width: min(77.5rem, 88vw);
    height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: center;
    gap: 4vw;
  }

  /* ── Textspalte ── */
  .hero-title {
    text-align: left;
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  #hero.hero-ready .hero-title { animation: fadeUp 1.4s ease forwards 1.1s; }

  .hero-label {
    font-size: 0.62rem;
    letter-spacing: 0.75em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 1.6rem;
    font-weight: 400;
  }

  .hero-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(3.2rem, 6.6vw, 6.2rem);
    font-weight: 300;
    letter-spacing: 0.04em;
    line-height: 1.02;
    color: #f3efe6;
  }

  .hero-name-line {
    display: block;
    width: 4.5rem;
    height: 1px;
    margin: 2rem 0 1.3rem;
    background: linear-gradient(to right, var(--gold), rgba(201,168,76,0));
  }

  .hero-dates {
    font-size: 0.72rem;
    letter-spacing: 0.45em;
    color: var(--gold-light);
    font-weight: 300;
  }

  .hero-ctas {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 2.2rem;
    margin-top: 3.2rem;
    flex-wrap: wrap;
  }

  .hero-enter {
    display: inline-block;
    font-size: 0.62rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--gold);
    text-decoration: none;
    border: 1px solid rgba(201,168,76,0.8);
    padding: 1.1rem 2.8rem;
    transition: all 0.4s ease;
    cursor: pointer;
  }
  .hero-enter:hover {
    background: var(--gold);
    color: var(--black);
    border-color: var(--gold);
    box-shadow: 0 0 40px rgba(201,168,76,0.3);
  }

  .hero-enter-ghost {
    font-size: 0.58rem;
    letter-spacing: 0.38em;
    text-transform: uppercase;
    color: rgba(232,213,163,0.78);
    transition: color 0.3s ease;
    cursor: pointer;
    font-weight: 400;
    background: none;
    border: none;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
  }
  .hero-enter-ghost:hover { color: var(--gold); }

  /* ── Werk im Licht ── */
  .hero-art {
    margin: 0;
    padding-top: 7vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
  }
  #hero.hero-ready .hero-art { animation: heroArtIn 1.8s ease forwards 0.2s; }
  @keyframes heroArtIn {
    from { opacity: 0; transform: translateY(0.625rem); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .hero-art-frame {
    position: relative;
    display: block;
    padding: 0;
    border: none;
    background: #0f0e0c;
    cursor: pointer;
    /* schmaler dunkler Rahmen mit feiner Goldkante + Schatten auf der Wand */
    box-shadow:
      0 0 0 9px #16130e,
      0 0 0 10px rgba(201,168,76,0.28),
      0 28px 50px rgba(0,0,0,0.6),
      0 60px 120px rgba(0,0,0,0.55);
    transition: transform 0.5s ease;
  }
  .hero-art-frame:hover { transform: translateY(-3px); }
  .hero-art-frame:focus-visible { outline: 1px solid var(--gold); outline-offset: 16px; }

  /* Lichtfleck der Leuchte auf der Wand hinter dem Werk */
  .hero-art-frame::before {
    content: '';
    position: absolute;
    left: -50%; right: -50%;
    top: -55%;
    height: 170%;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(closest-side at 50% 38%, rgba(255,214,140,0.21) 0%, rgba(255,214,140,0.07) 45%, transparent 100%);
    opacity: 0;
  }

  .hero-art-frame img {
    display: block;
    width: auto;
    height: auto;
    max-height: 62vh;
    max-width: min(40vw, 35rem);
    filter: brightness(0.3);
    transition: opacity 0.9s ease;
  }
  .hero-art-frame.is-changing img { opacity: 0; }

  /* Lichtkegel der Leuchte auf dem Werk */
  .hero-art-glow {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(ellipse 75% 60% at 50% -4%, rgba(255,228,170,0.26) 0%, rgba(255,228,170,0.07) 45%, transparent 78%);
    mix-blend-mode: screen;
    opacity: 0;
  }

  /* Messing-Bilderleuchte über dem Rahmen */
  .hero-lamp {
    position: absolute;
    left: 50%;
    top: -3.25rem;
    width: 46%;
    height: 2.625rem;
    transform: translateX(-50%);
    z-index: 3;
    pointer-events: none;
  }
  .hero-lamp-arm {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 3px;
    height: 2rem;
    transform: translateX(-50%);
    border-radius: 2px;
    background: linear-gradient(90deg, #5b461b, #d9b868 50%, #6b5322);
  }
  .hero-lamp-arm::after {   /* Befestigung am Rahmen */
    content: '';
    position: absolute;
    left: 50%; bottom: -3px;
    width: 0.875rem; height: 0.25rem;
    transform: translateX(-50%);
    border-radius: 2px;
    background: linear-gradient(180deg, #caa65a, #6b5322);
  }
  .hero-lamp-tube {
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 0.5rem;
    border-radius: 4px;
    background: linear-gradient(180deg, #f3dd9b 0%, #c49b46 45%, #6f521d 100%);
    box-shadow: 0 3px 6px rgba(0,0,0,0.6);
  }
  .hero-lamp-tube::after {  /* warme Lichtkante an der Unterseite */
    content: '';
    position: absolute;
    left: 6%; right: 6%; bottom: -2px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255,232,170,0.9);
    filter: blur(2px);
    opacity: 0;
  }

  /* Licht einschalten, sobald der Ladebildschirm weg ist */
  #hero.hero-ready .hero-art-glow,
  #hero.hero-ready .hero-art-frame::before,
  #hero.hero-ready .hero-lamp-tube::after { animation: heroLampOn 1.6s ease forwards 0.7s; }
  #hero.hero-ready .hero-art-frame img { animation: heroArtLit 1.6s ease forwards 0.7s; }
  @keyframes heroLampOn {
    0%   { opacity: 0; }
    12%  { opacity: 0.7; }
    20%  { opacity: 0.15; }
    34%  { opacity: 0.85; }
    100% { opacity: 1; }
  }
  @keyframes heroArtLit {
    0%   { filter: brightness(0.3); }
    12%  { filter: brightness(0.8); }
    20%  { filter: brightness(0.4); }
    34%  { filter: brightness(0.9); }
    100% { filter: brightness(1); }
  }

  /* Museumsschild */
  .hero-art-label {
    margin-top: 2.4rem;
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    transition: opacity 0.9s ease;
  }
  .hero-art-label.is-changing { opacity: 0; }
  .hero-art-title {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.15rem;
    color: #e9e3d6;
  }
  .hero-art-year {
    font-size: 0.64rem;
    letter-spacing: 0.3em;
    color: var(--gold-light);
  }

  @media (prefers-reduced-motion: reduce) {
    #hero.hero-ready .hero-art-glow,
    #hero.hero-ready .hero-art-frame::before,
    #hero.hero-ready .hero-lamp-tube::after,
    #hero.hero-ready .hero-art-frame img,
    #hero.hero-ready .hero-art,
    #hero.hero-ready .hero-title { animation-duration: 0.01s; animation-delay: 0s; }
  }

  .scroll-line {
    width: 0.5px;
    height: 2rem;
    background: linear-gradient(to bottom, transparent, var(--gold-dim));
    animation: scrollPulse 2s ease-in-out infinite;
  }

  .scroll-text {
    font-size: max(0.48rem, var(--label-min));
    letter-spacing: 0.3em;
    color: var(--gold-dim);
    text-transform: uppercase;
  }

  /* ── INTRO ── */
  #intro {
    padding: 7rem 3rem;
    max-width: 50rem;
    margin: 0 auto;
    text-align: center;
  }

  .section-label {
    font-size: 0.58rem;
    letter-spacing: 0.5em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 2rem;
    font-weight: 300;
  }

  .gold-divider {
    width: 0;
    height: 0.5px;
    background: var(--gold);
    margin: 3rem auto;
    transition: width 1.4s cubic-bezier(0.4,0,0.2,1);
  }
  .gold-divider.visible { width: 3.75rem; }

  /* Zitat-Rahmen */
  .intro-frame {
    position: relative;
    border: 0.5px solid rgba(201,168,76,0.45);
    padding: 2.8rem 3.5rem;
    max-width: 42.5rem;
    margin: 0 auto;
  }
  .intro-frame .section-label {
    position: absolute;
    top: -0.75em;
    left: 50%;
    transform: translateX(-50%);
    background: var(--white);
    padding: 0 1.2rem;
    margin: 0;
    white-space: nowrap;
  }
  /* Willkommen mit Foto: Horst Schwab, sein Schatten und sein Gedicht (Collage 3700 × 2580).
     Breite so, dass Rahmen + Foto + Hinweis unter der Navigation in die Bildschirmhöhe passen. */
  .intro-frame--foto { max-width: none; width: max-content; padding: 2.1rem 2.1rem 1.3rem; }
  .intro-foto { margin: 0; width: min-content; }   /* so breit wie das Foto; die Unterschrift bricht darin um */
  .intro-foto-bild {
    position: relative;
    width: min(64rem, calc(100vw - 10rem), calc((100svh - 19.5rem) * 1.4341));
    aspect-ratio: 3700 / 2580;
    /* Schatten folgt der gestuften Form (Filter wirkt nach dem Zuschnitt des Kindelements) */
    filter: drop-shadow(0 0.7rem 1.1rem rgba(0,0,0,0.17)) drop-shadow(0 0.1rem 0.2rem rgba(0,0,0,0.12));
  }
  /* Zuschnitt wie in der Präsentation: Umriss aus den Scan-Stücken (Maße im 3700 × 2580-Bild) –
     rechts oben offen (dort fehlt der Abzug), links ab 24 % die Schulterpartie, unten rechts das Gedicht-Stück tiefer */
  .intro-collage {
    position: absolute; inset: 0;
    background: #6b6b6b;
    clip-path: polygon(3.62% 0, 84% 0, 84% 19.92%, 100% 19.92%, 100% 100%, 55.73% 100%, 55.73% 98.53%, 0 98.53%, 0 24.34%, 3.62% 24.34%);
  }
  .intro-collage-foto { display: block; width: 100%; height: 100%; }
  /* winziger Platzhalter bis zum Laden: weichgezeichnet statt pixelig (Rand schneidet der clip-path ab) */
  .intro-collage-foto[src^="data:"] { filter: blur(14px); transform: scale(1.04); }
  /* goldene Umzeichnung der Buchstaben: eigene Ebene, deckungsgleich über dem Gedicht */
  .intro-gold {
    position: absolute;
    left: 61.027%; top: 55.426%; width: 37.405%; height: 44.574%;
    pointer-events: none;
  }
  .intro-foto figcaption {
    margin-top: 0.85rem;
    font-size: max(0.54rem, var(--label-min));
    letter-spacing: 0.12em;
    color: #6E6D66;
  }
  .intro-scroll-hint {
    margin-top: 2.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--gold);
    font-size: max(0.54rem, var(--label-min));
    letter-spacing: 0.45em;
    text-transform: uppercase;
  }
  .intro-scroll-arrow {
    font-size: 1rem;
    animation: introArrowBounce 2s ease-in-out infinite, introHintPulse 2.8s ease-in-out infinite;   /* Puls nur am Pfeil: Text bleibt kontraststark */
    display: block;
  }
  @keyframes introArrowBounce {
    0%, 100% { transform: translateY(-3px); }
    50%       { transform: translateY(0.25rem);  }
  }
  @keyframes introHintPulse {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 1;    }
  }

  /* ── SCENE: intro → galerie → bio (320 vh) ── */
  #intro-scene { position: relative; height: 320vh; }
  .intro-scene-pin {
    position: sticky; top: 0;
    height: 100vh; overflow: hidden;
    background: var(--white);
    display: flex; align-items: center; justify-content: center;
    z-index: 2;                          /* stacks above #ueber-uns */
  }
  .intro-scene-pin::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 6.75rem;
    background: var(--white);
    z-index: 5;
    pointer-events: none;
  }
  .intro-scene-pin #intro {
    position: absolute; top: calc(50% + 3.2rem); left: 50%;   /* Mitte des Bereichs unter der Navigation (6,75rem) */
    transform: translate(-50%, -50%);
    width: 100%; max-width: none; padding: 0 3rem; margin: 0;   /* max-width aufheben: Foto-Rahmen ist breiter als 50rem */
  }
  .intro-scene-pin #galerie {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 1rem 3rem; background: transparent;
  }
  .intro-scene-pin .gallery-header { opacity: 0; }

  /* ── GALLERY ── */
  #galerie {
    padding: 6rem 3rem 8rem;
    background: var(--white);
  }

  .gallery-header {
    text-align: center;
    margin-bottom: 3rem;
  }

  .gallery-header h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.5rem;
    font-weight: 300;
    color: var(--text-dark);
    letter-spacing: 0.05em;
  }

  .gallery-frame {
    max-width: 61.25rem;
    width: 100%;
    margin: 0 auto;
    padding: 1rem;
  }

  .gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    max-width: 75rem;
    margin: 0 auto;
  }

  .artwork-card {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    background: var(--gray-light);
    aspect-ratio: 3/4;
  }

  .artwork-card.large {
    grid-column: span 2;
    aspect-ratio: auto;
    min-height: 31.25rem;
  }

  .artwork-placeholder {
    width: 100%;
    height: 100%;
    min-height: 21.875rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
  }

  .artwork-placeholder svg { opacity: 0.2; }

  .artwork-placeholder-text {
    font-size: max(0.55rem, var(--label-min));
    letter-spacing: 0.3em;
    color: var(--gray-mid);
    text-transform: uppercase;
  }

  .artwork-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10,10,10,0);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2rem;
    transition: background 0.5s;
  }

  .artwork-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--gold), transparent);
    transform: scaleX(0);
    transition: transform 0.45s ease;
    z-index: 2;
  }
  .artwork-card:hover::after { transform: scaleX(1); }
  .artwork-card:hover .artwork-overlay { background: rgba(10,10,10,0.78); }

  .artwork-info {
    transform: translateY(1.375rem);
    opacity: 0;
    transition: transform 0.42s cubic-bezier(0.25,0.46,0.45,0.94), opacity 0.42s ease;
  }

  .artwork-card:hover .artwork-info {
    transform: translateY(0);
    opacity: 1;
  }

  .artwork-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.3rem;
    color: var(--white);
    font-weight: 300;
    margin-bottom: 0.25rem;
  }

  .artwork-meta {
    font-size: max(0.55rem, var(--label-min));
    letter-spacing: 0.2em;
    color: var(--gold-light);
    text-transform: uppercase;
  }

  .artwork-btn {
    margin-top: 1rem;
    display: inline-block;
    font-size: max(0.55rem, var(--label-min));
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold);
    border: 0.5px solid var(--gold-dim);
    padding: 0.6rem 1.5rem;
    cursor: pointer;
    background: none;
    font-family: 'Montserrat', sans-serif;
    transition: all 0.3s;
  }

  .artwork-btn:hover {
    background: var(--gold);
    color: var(--black);
  }

  /* ── CATEGORY TILES ── */
  .cat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  .cat-tile {
    background: #0e0d0b;
    border: 1px solid rgba(201,168,76,0.12);
    padding: 3.5rem 2rem;
    text-align: center;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    position: relative;
    overflow: hidden;
    min-height: 18.75rem;
    opacity: 0;
    will-change: transform, opacity;
  }
  /* Niedrige Laptop-Bildschirme (1366 × 768, 1920 × 1080 bei 150 %): Kachelhöhe aus der Fensterhöhe,
     damit Überschrift und beide Reihen unter die Navigation passen. Ab 760 px Höhe (MacBook) und bei
     mitwachsender Grundschrift (Fenster dann mindestens 50rem hoch) bleibt es beim festen Maß. */
  @media (min-width: 769px) and (max-height: 760px) {
    .intro-scene-pin #galerie { padding: 6.75rem 3rem 1rem; }
    .cat-tile { min-height: 0; height: clamp(8rem, calc((100vh - 17.5rem) / 2), 18.75rem); }
  }
  .cat-grid.tiles-settled .cat-tile {
    opacity: 1 !important;
    transform: none !important;
    transition: border-color 0.45s ease, box-shadow 0.45s ease !important;
  }
  .cat-grid.tiles-settled .cat-tile:hover {
    transform: translateY(-0.25rem) !important;
    transition: border-color 0.45s ease, transform 0.45s ease, box-shadow 0.45s ease !important;
    border-color: rgba(201,168,76,0.6);
    box-shadow: 0 14px 45px rgba(0,0,0,0.55), 0 0 0 1px rgba(201,168,76,0.2);
  }
  .cat-tile-bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    opacity: 0.28;
    transition: opacity 0.55s ease, transform 0.55s ease;
    transform: scale(1);
    z-index: 0;
  }
  /* Gradient overlay — immer sichtbar, Text bleibt lesbar */
  .cat-tile::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(6,5,4,0.82) 0%, rgba(6,5,4,0.18) 55%, transparent 100%);
    z-index: 1;
    pointer-events: none;
  }
  .cat-tile > *:not(.cat-tile-bg) { position: relative; z-index: 2; }
  .cat-tile:hover .cat-tile-bg { opacity: 0.52; transform: scale(1.07); }
  .cat-tile:hover {
    border-color: rgba(201,168,76,0.6);
    transform: translateY(-0.25rem);
    box-shadow: 0 14px 45px rgba(0,0,0,0.55), 0 0 0 1px rgba(201,168,76,0.2);
  }
  .cat-tile-rule {
    width: 2.5rem; height: 1px;
    background: linear-gradient(to right, transparent, rgba(201,168,76,0.55), transparent);
  }
  .cat-tile-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2rem; font-weight: 300;
    letter-spacing: 0.18em;
    color: var(--cream);
  }
  .cat-tile-count {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.58rem; letter-spacing: 0.28em;
    color: rgba(201,168,76,0.65);
    text-transform: uppercase;
  }
  .cat-tile-arrow {
    font-size: 0.7rem; color: rgba(201,168,76,0.75);
    letter-spacing: 0.15em; font-family: 'Montserrat', sans-serif;
    transition: color 0.35s, transform 0.35s;
    display: inline-block;
  }
  .cat-tile:hover .cat-tile-arrow { color: var(--gold); transform: translateX(0.3125rem); }

  /* ── COLLECTION OVERLAY ── */
  .coll-overlay {
    visibility: hidden;
    opacity: 0;
    transform: translateY(1.75rem);
    position: fixed;
    inset: 0;
    background: #0a0908;
    z-index: 950;
    overflow-y: auto;
    pointer-events: none;
    transition: opacity 0.38s ease, transform 0.38s ease, visibility 0.38s;
  }
  .coll-overlay.active {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .coll-inner { max-width: 68.75rem; margin: 0 auto; padding: 3rem 4rem 5rem; }
  .coll-header {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    margin-bottom: 3rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(201,168,76,0.14);
  }
  .coll-back-btn {
    background: transparent;
    border: 1px solid rgba(201,168,76,0.25);
    color: rgba(201,168,76,0.6);
    padding: 0.55rem 1.4rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.58rem; letter-spacing: 0.28em;
    cursor: pointer; text-transform: uppercase;
    transition: all 0.25s;
    flex-shrink: 0;
  }
  .coll-back-btn:hover { color: var(--gold); border-color: var(--gold); }
  .coll-heading {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.6rem, 3.5vw, 2.8rem);
    font-weight: 300;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--cream);
    min-width: 0;
  }
  /* Schmale Handys: Überschrift unter den Zurück-Knopf, damit lange Wörter („ZEICHNUNGEN“) ganz in die Zeile passen */
  @media (max-width: 480px) {
    .coll-header { flex-wrap: wrap; gap: 1.2rem; }
    .coll-heading { flex-basis: 100%; letter-spacing: 0.16em; overflow-wrap: break-word; }
  }
  .wip-banner {
    border: 1px solid var(--gold);
    padding: 2.5rem 3rem;
    margin-bottom: 3rem;
    text-align: center;
    position: relative;
  }
  .wip-banner::before {
    content: '';
    position: absolute;
    inset: 0.3125rem;
    border: 0.5px solid rgba(201,168,76,0.25);
    pointer-events: none;
  }
  .wip-banner-eyebrow {
    font-size: max(0.52rem, var(--label-min));
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1.2rem;
  }
  .wip-banner-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 300;
    color: var(--cream);
    margin-bottom: 0.8rem;
    line-height: 1.3;
  }
  .wip-banner-sub {
    font-size: 0.68rem;
    color: var(--gray-mid);
    letter-spacing: 0.06em;
    line-height: 1.7;
    max-width: 30rem;
    margin: 0 auto 2rem;
  }
  .wip-banner-divider {
    width: 2.5rem;
    height: 0.5px;
    background: var(--gold);
    margin: 1.5rem auto;
    opacity: 0.5;
  }

  .coll-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
  }
  .coll-card {
    background: #0e0d0b;
    border: 1px solid rgba(201,168,76,0.08);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.3s ease;
    position: relative;
  }
  .coll-card:hover { border-color: rgba(201,168,76,0.38); }
  .coll-card-img {
    width: 100%;
    height: 23.75rem;
    background: #1a1a18;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    padding: 0.8rem; box-sizing: border-box;
  }
  .coll-card-img svg { opacity: 0.18; }
  .coll-card-meta:empty { display: none; }   /* Platzhalter-Werke ohne Werkangaben */
  /* Mini-Vorschau, bis das Vorschaubild geladen ist: füllt die Bildfläche im richtigen Seitenverhältnis, weich gezeichnet */
  .coll-card-img img.lqip { filter: blur(0.7rem); }
  .coll-card-img:not(.coll-card-views) img.lqip { width: 100%; height: 100%; object-fit: contain; }
  .coll-card-img img { transition: filter 0.45s ease; }
  .coll-card-img img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
  }
  /* Querformat wird durch die max-/auto-Regel oben automatisch korrekt skaliert;
     Modifier bleibt für Abwärtskompatibilität bestehen. */
  .coll-card-img--landscape img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
  .coll-card-img canvas {
    max-width: 100%; height: auto; display: block;
  }

  /* ── Mehrere Ansichten (Plastiken): Slider ── */
  .coll-card-views { position: relative; }
  .coll-card-views img {
    position: absolute; inset: 0.8rem;
    width: calc(100% - 1.6rem); height: calc(100% - 1.6rem);
    max-width: none; max-height: none;
    object-fit: contain;
    opacity: 0; transition: opacity 0.45s ease, filter 0.45s ease;
  }
  .coll-card-views img.active { opacity: 1; }
  .views-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 2.4rem; height: 2.4rem;
    display: flex; align-items: center; justify-content: center;
    background: rgba(8,7,6,0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    border: 1px solid rgba(201,168,76,0.35); border-radius: 50%;
    color: var(--gold); font-size: 1.4rem; line-height: 1; padding: 0 0 0.15rem;
    cursor: pointer; z-index: 2;
    opacity: 0.75; transition: opacity 0.25s, background 0.25s, border-color 0.25s;
  }
  .views-arrow:hover { opacity: 1; background: rgba(201,168,76,0.18); border-color: var(--gold); }
  .views-prev { left: 0.8rem; }
  .views-next { right: 0.8rem; }
  .coll-card-views .views-arrow { opacity: 0; }
  .coll-card:hover .coll-card-views .views-arrow { opacity: 0.85; }
  @media (hover: none) { .coll-card-views .views-arrow { opacity: 0.75; } }
  /* Mausrad-Hinweis der Werkansicht gibt es auf Touch-Geräten nicht */
  /* Hinweise je nach Eingabegerät: Maus/Trackpad oder Touch */
  .hinweis-touch { display: none; }
  @media (hover: none) { .hinweis-maus { display: none; } .hinweis-touch { display: inline; } }
  .views-dots {
    display: flex; gap: 0.45rem; justify-content: center; align-items: center;
  }
  .coll-card-views .views-dots {
    position: absolute; bottom: 0.9rem; left: 0; right: 0; z-index: 2;
  }
  .views-dot {
    width: 0.4375rem; height: 0.4375rem; padding: 0; border-radius: 50%;
    border: 1px solid rgba(201,168,76,0.7); background: transparent;
    cursor: pointer; transition: background 0.25s;
  }
  .views-dot.active { background: var(--gold); }

  /* Detailansicht */
  #ad-views-nav .views-bar {
    position: absolute; top: 1.2rem; left: 50%; transform: translateX(-50%);
    display: flex; align-items: center; gap: 0.9rem; z-index: 3;
    padding: 0.45rem 0.9rem;
    background: rgba(8,7,6,0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    border: 1px solid rgba(201,168,76,0.2);
  }
  #ad-views-nav .views-count {
    font-family: 'Montserrat', sans-serif; font-size: max(0.5rem, var(--label-min));
    letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold);
    white-space: nowrap;
  }
  #ad-views-nav .views-bar,
  #ad-views-nav .views-arrow {
    background: rgba(255,255,255,0.7);
    border-color: rgba(139,110,46,0.45);
  }
  #ad-views-nav .views-arrow { z-index: 3; color: var(--gold-dim); opacity: 1; }
  #ad-views-nav .views-arrow:hover { background: #fff; border-color: var(--gold-dim); }
  #ad-views-nav .views-dot { border-color: var(--gold-dim); }
  #ad-views-nav .views-dot.active { background: var(--gold-dim); }
  #ad-views-nav .views-count { color: var(--gold-dim); }
  #ad-views-nav .views-prev { left: 1.2rem; }
  #ad-views-nav .views-next { right: 1.2rem; }
  .coll-card-body { padding: 1.4rem 1.6rem 1.8rem; }
  .coll-card-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.35rem; font-weight: 300;
    color: var(--cream); margin-bottom: 0.35rem;
  }
  .coll-card-meta {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.58rem; letter-spacing: 0.18em;
    color: rgba(242,236,222,0.42); margin-bottom: 0.7rem;
  }

  .coll-card-soon {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.05rem;
    font-style: italic;
    letter-spacing: 0.14em;
    color: rgba(201,168,76,0.75);
    text-transform: uppercase;
    margin-bottom: 1.1rem;
  }
  .coll-offer-btn {
    display: inline-block;
    padding: 0.52rem 1.3rem;
    border: 1px solid rgba(201,168,76,0.28);
    color: rgba(201,168,76,0.70);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.58rem; letter-spacing: 0.22em;
    cursor: pointer; background: transparent;
    text-transform: uppercase; transition: all 0.25s;
  }
  a.coll-offer-btn { text-decoration: none; }
  .coll-offer-btn:hover { background: rgba(201,168,76,0.10); color: var(--gold); border-color: var(--gold); }

  /* ── FAVORITES ── */
  .fav-btn {
    position: absolute; top: 0.55rem; right: 0.55rem;
    background: none; border: none; cursor: pointer;
    color: rgba(201,168,76,0.35); font-size: 1.25rem;
    line-height: 1; padding: 0.25rem 0.4rem;
    transition: color 0.2s; z-index: 2;
  }
  .fav-btn:hover { color: var(--gold); }
  .fav-btn.fav-active { color: var(--gold); }
  .fav-count-badge {
    display: inline-block; background: var(--gold); color: var(--black);
    font-size: max(0.38rem, var(--label-min)); font-family: 'Montserrat', sans-serif;
    min-width: 1.5em; height: 1.5em; line-height: 1.5em;
    text-align: center; border-radius: 50%;
    margin-left: 0.35em; vertical-align: middle; letter-spacing: 0;
  }
  .ad-fav-btn {
    background: none; border: 1px solid rgba(201,168,76,0.28);
    cursor: pointer; color: #806530;   /* Bedienelement: mind. 3 : 1 auf hellem Grund */
    font-size: 1.05rem; line-height: 1;
    padding: 0.3rem 0.7rem; transition: all 0.22s;
  }
  .ad-fav-btn:hover, .ad-fav-btn.fav-active { color: #6b5427; border-color: var(--gold); }
  #fav-empty-msg {
    text-align: center; padding: 5rem 2rem;
    color: var(--gray-mid); font-family: 'Cormorant Garamond', serif;
    font-size: 1.3rem; font-weight: 300; grid-column: 1 / -1;
  }

  /* ── LANGUAGE TOGGLE ── */
  #lang-switcher {
    position: fixed;
    top: 1.4rem;
    right: 2.5rem;
    z-index: 200;
    background: rgba(250,250,248,0.92);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    padding: 0.45rem 1rem;
    border: 1px solid rgba(201,168,76,0.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
  }
  #lang-switcher.visible {
    opacity: 1;
    pointer-events: auto;
  }
  .lang-toggle-btn {
    background: none; border: none; cursor: pointer;
    font-family: 'Montserrat', sans-serif; font-size: max(0.50rem, var(--label-min));
    letter-spacing: 0.22em; color: var(--gray-mid);
    padding: 0; display: flex; gap: 0.3em; align-items: center;
    transition: color 0.2s;
  }
  .lang-toggle-btn .l-sep { opacity: 0.35; }
  .lang-toggle-btn .l-active { color: var(--gold); }

  /* ── ARTWORK DETAIL OVERLAY ── */
  #artwork-detail {
    visibility: hidden;
    pointer-events: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 975;
    background: #F5F4F0;
  }
  #artwork-detail.active {
    visibility: visible;
    pointer-events: auto;
  }

  /* Topbar — fixed strip at the top */
  .ad-topbar {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 3rem;
    border-bottom: 1px solid rgba(201,168,76,0.18);
    background: var(--off-white);
    z-index: 2;
  }
  .ad-back-btn {
    background: transparent;
    border: 1px solid rgba(26,26,26,0.20);
    color: rgba(26,26,26,0.52);
    padding: 0.48rem 1.4rem;
    font-family: 'Montserrat', sans-serif;
    font-size: max(0.56rem, var(--label-min)); letter-spacing: 0.26em;
    cursor: pointer; text-transform: uppercase;
    transition: all 0.25s;
  }
  .ad-back-btn:hover { color: var(--gold-dim); border-color: var(--gold); }
  .ad-topbar-title {
    font-family: 'Montserrat', sans-serif;
    font-size: max(0.55rem, var(--label-min)); font-weight: 300;
    letter-spacing: 0.38em;
    color: rgba(26,26,26,0.35);
    text-transform: uppercase;
  }

  /* Body — fills the space below the topbar */
  .ad-body {
    position: absolute;
    top: 4rem; left: 0; right: 0; bottom: 0;
    height: calc(100vh - 4rem);
    display: flex;
    overflow: hidden;
  }

  /* ── LEFT: image panel ── */
  .ad-img-panel {
    width: 60%;
    min-height: 0;
    align-self: stretch;
    background:
      radial-gradient(ellipse 70% 45% at 50% 0%, rgba(255,252,240,0.55) 0%, transparent 70%),
      radial-gradient(ellipse 100% 60% at 50% 100%, rgba(160,155,145,0.18) 0%, transparent 70%),
      #efefec;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    user-select: none;
    flex-shrink: 0;
  }
  .ad-img-inner {
    width: 100%;
    height: 100%;
    flex: 1;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    cursor: zoom-in;
    padding: 3rem;
    box-sizing: border-box;
  }
  .ad-img-inner.zoomed { cursor: grab; }
  .ad-img-inner.zoomed.dragging { cursor: grabbing; }
  /* Placeholder frame */
  .ad-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(21.25rem, 55vw);
    aspect-ratio: 4/5;
    overflow: hidden;
    pointer-events: none;
    box-shadow: 0 8px 40px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.2);
  }
  .ad-placeholder-frame {
    border: 1px solid rgba(201,168,76,0.30);
    width: min(21.25rem, 55vw);
    aspect-ratio: 4/5;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: rgba(201,168,76,0.03);
  }
  .ad-placeholder-frame::before {
    content: '';
    position: absolute;
    inset: 0.625rem;
    border: 1px solid rgba(201,168,76,0.12);
  }
  .ad-placeholder-svg {
    opacity: 0.55;
  }
  .ad-placeholder-svg svg { width: 5rem; height: 5rem; }
  .ad-placeholder-caption {
    text-align: center;
  }
  .ad-placeholder-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.15rem; font-weight: 300;
    color: rgba(201,168,76,0.70);
    letter-spacing: 0.08em;
    display: block;
    margin-bottom: 0.4rem;
  }
  .ad-placeholder-sub {
    font-family: 'Montserrat', sans-serif;
    font-size: max(0.48rem, var(--label-min)); letter-spacing: 0.28em;
    color: rgba(201,168,76,0.30);
    text-transform: uppercase;
  }
  /* Zoom wrapper (placeholder or real image inside) */
  #ad-img-el {
    transform-origin: center center;
    transition: transform 0.08s ease;
    pointer-events: none;
    display: flex; align-items: center; justify-content: center;
  }
  /* Real image once added */
  #ad-img-el img, .ad-placeholder-canvas {
    max-width: 48vw;
    max-height: 72vh;
    width: auto; height: auto;
    object-fit: contain; display: block;
    box-shadow:
      0 2px 6px rgba(0,0,0,0.10),
      0 8px 24px rgba(0,0,0,0.14),
      0 28px 60px rgba(0,0,0,0.12);
  }
  .ad-zoom-hint {
    position: absolute;
    bottom: 1.4rem; left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: 'Montserrat', sans-serif;
    font-size: max(0.48rem, var(--label-min)); letter-spacing: 0.24em;
    color: rgba(201,168,76,0.25);
    pointer-events: none;
  }

  /* ── RIGHT: info panel ── */
  .ad-info-panel {
    flex: 1;
    min-height: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    background: var(--off-white);
    border-left: 1px solid rgba(201,168,76,0.14);
  }
  .ad-eyebrow {
    font-family: 'Montserrat', sans-serif;
    font-size: max(0.50rem, var(--label-min)); letter-spacing: 0.44em;
    color: var(--gold-dim);
    text-transform: uppercase;
    margin-bottom: 1rem;
  }
  .ad-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.9rem, 3vw, 2.8rem);
    font-weight: 300;
    color: var(--text-dark);
    margin-bottom: 0.45rem;
    line-height: 1.1;
  }
  .ad-meta-line {
    font-family: 'Montserrat', sans-serif;
    font-size: max(0.56rem, var(--label-min)); letter-spacing: 0.18em;
    color: var(--gray-mid);
    text-transform: uppercase;
    margin-bottom: 1.4rem;
  }

  .ad-divider {
    width: 3rem; height: 1px;
    background: linear-gradient(to right, var(--gold-dim), transparent);
    margin-bottom: 1.8rem;
  }
  .ad-story-head {
    font-family: 'Montserrat', sans-serif;
    font-size: max(0.52rem, var(--label-min)); letter-spacing: 0.32em;
    color: var(--gold-dim);
    text-transform: uppercase;
    margin-bottom: 0.9rem;
  }
  .ad-story {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.05rem; font-weight: 300;
    line-height: 1.95;
    color: rgba(26,26,26,0.70);
    margin-bottom: 2.5rem;
  }
  .ad-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.5rem;
    margin-bottom: 2.5rem;
    padding-top: 1.8rem;
    border-top: 1px solid var(--gray-light);
  }
  .ad-detail-item { display: flex; flex-direction: column; gap: 0.3rem; }
  .ad-detail-label {
    font-family: 'Montserrat', sans-serif;
    font-size: max(0.48rem, var(--label-min)); letter-spacing: 0.30em;
    color: var(--gray-mid); text-transform: uppercase;
  }
  .ad-detail-value {
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.95rem; color: var(--text-dark);
  }
  .ad-offer-btn {
    align-self: flex-start;
    padding: 0.85rem 2.6rem;
    border: 1px solid var(--gold-dim);
    color: var(--gold-dim);
    font-family: 'Montserrat', sans-serif;
    font-size: max(0.56rem, var(--label-min)); letter-spacing: 0.30em;
    text-transform: uppercase;
    background: transparent; cursor: pointer;
    transition: all 0.28s;
  }
  a.ad-offer-btn { text-decoration: none; display: inline-block; }
  .ad-offer-btn:hover { background: var(--gold-dim); color: var(--off-white); }
  #ad-rundgang-btn {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.75rem 2rem;
    border: 1px solid rgba(201,168,76,0.6);
    color: var(--gold);
    font-family: 'Montserrat', sans-serif;
    font-size: max(0.52rem, var(--label-min)); letter-spacing: 0.25em;
    text-transform: uppercase;
    background: rgba(8,7,6,0.72);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.25s;
    z-index: 3;
  }
  #ad-rundgang-btn:hover { background: rgba(201,168,76,0.15); border-color: var(--gold); }

  .submit-btn {
    background: var(--black);
    color: var(--white);
    border: none;
    padding: 1rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.6rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.3s;
    margin-top: 0.5rem;
    width: 100%;
  }

  .submit-btn:hover { background: var(--gold); }
  a.submit-btn { display: block; text-align: center; text-decoration: none; box-sizing: border-box; }

  /* ── ABOUT ── */
  #ueber-uns {
    padding: 3rem 3rem 8rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    max-width: 68.75rem;
    margin: -100vh auto 0;
    align-items: center;
    position: relative; z-index: 1;
    background: var(--white);
  }

  .about-text h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.2rem;
    font-weight: 300;
    color: var(--text-dark);
    margin-bottom: 1.5rem;
    line-height: 1.3;
  }

  .about-text p {
    font-size: 0.75rem;
    line-height: 2;
    color: var(--gray-mid);
    margin-bottom: 1rem;
  }

  .about-visual {
    aspect-ratio: 3/4;
    background: linear-gradient(145deg, #0a0908 0%, #111008 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }
  .about-visual::before {
    content: '';
    position: absolute;
    inset: 1.8rem;
    border: 1px solid rgba(201,168,76,0.13);
    pointer-events: none;
  }
  .about-visual::after {
    content: '';
    position: absolute;
    inset: 2.4rem;
    border: 0.5px solid rgba(201,168,76,0.06);
    pointer-events: none;
  }
  .bio-slide {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center top;
    opacity: 0;
    transition: opacity 0.55s ease;
    display: block;
  }
  .bio-slide.active { opacity: 1; }
  .bio-nav {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    background: rgba(10,9,8,0.55);
    border: 0.5px solid rgba(201,168,76,0.35);
    color: var(--gold);
    width: 2.125rem; height: 2.125rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 6;
    font-size: 0.75rem;
    opacity: 0;
    transition: opacity 0.25s;
    padding: 0;
  }
  .bio-nav-prev { left: 0.9rem; }
  .bio-nav-next { right: 0.9rem; }
  .about-visual:hover .bio-nav { opacity: 1; }
  .bio-nav:hover { background: rgba(201,168,76,0.18); }
  .bio-dots {
    position: absolute;
    bottom: 0.9rem; left: 50%;
    transform: translateX(-50%);
    display: flex; gap: 0.375rem;
    z-index: 6;
  }
  .bio-dot {
    width: 0.3125rem; height: 0.3125rem;
    border-radius: 50%;
    background: rgba(201,168,76,0.25);
    cursor: pointer;
    transition: background 0.3s;
  }
  .bio-dot.active { background: var(--gold); }
  /* Untertitel mit Fotonachweis: dunkler Verlauf am unteren Bildrand, damit der Goldtext auch über hellen
     Bildstellen (Noten, Gemälde) AA-Kontrast hat; liegt unter Punkten und Pfeilen (z-index 5 < 6) */
  .bio-caption {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 2.8rem 1rem 2rem;
    background: linear-gradient(to top, rgba(10,9,8,0.86) 0%, rgba(10,9,8,0.82) 62%, rgba(10,9,8,0) 100%);
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: max(0.48rem, var(--label-min));
    letter-spacing: 0.3em;
    color: var(--gold);
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
    text-transform: uppercase;
    white-space: pre-line;
    line-height: 1.9;
    z-index: 5;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
  }
  .about-visual:hover .bio-caption { opacity: 1; }
  .about-monogram {
    font-family: 'Cormorant Garamond', serif;
    font-size: 7.5rem;
    color: var(--gold-dim);
    font-weight: 300;
    opacity: 0.28;
    letter-spacing: 0.22em;
    text-align: center;
    line-height: 1;
  }


  /* ── BIOGRAPHY QUOTE ── */
  .bio-quote {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.1rem;
    font-weight: 300;
    color: #45443f;   /* entspricht dem früheren Grau bei 0,82 Deckkraft, ohne die Quelle mit abzuschwächen */
    line-height: 1.9;
    margin: 1.8rem 0 1.4rem;
    padding: 1rem 1.4rem;
    border-left: 2px solid var(--gold-dim);
  }
  .bio-quote-mark {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.2rem;
    color: var(--gold-dim);
    line-height: 0;
    vertical-align: -0.45em;
    margin: 0 0.12em;
    font-style: normal;
  }



  /* ── VIRTUAL GALLERY ── */
  #gallery-vr {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 960;
    background: #000000;
  }
  #gallery-canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    background: #000000;
  }
  @keyframes vr-border-travel {
    0%   { stroke-dashoffset: 105; opacity: 0; }
    10%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { stroke-dashoffset: -32; opacity: 0; }
  }
  @keyframes vr-text-brighten {
    0%, 8%, 90%, 100% { color: rgba(201,168,76,0.6); }
    48%               { color: rgba(255,228,120,1);  }
  }
  .vr-btn-border {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none; overflow: visible;
  }
  .vr-btn-line {
    fill: none;
    stroke: rgba(255,225,120,1);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 32 75;
    stroke-linecap: round;
    opacity: 0;
    animation: vr-border-travel 3.2s ease-in-out infinite;
    filter: drop-shadow(0 0 3px rgba(201,168,76,0.85));
  }
  #gallery-vr-close .vr-btn-line { animation-delay: 4s; }
  #vr-skip .vr-btn-line          { animation-delay: 5.5s; }
  #gallery-vr-close { animation: vr-text-brighten 3.2s ease-in-out 4s infinite; }
  #vr-skip          { animation: vr-text-brighten 3.2s ease-in-out 5.5s infinite; }
  #gallery-vr-close {
    position: absolute;
    top: 1.8rem;
    right: 2rem;
    background: transparent;
    color: rgba(201,168,76,0.6);
    border: 1px solid rgba(201,168,76,0.22);
    padding: 0.55rem 1.5rem;
    font-size: max(0.55rem, var(--label-min));
    letter-spacing: 0.32em;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    transition: color 0.25s ease, border-color 0.25s ease;
    z-index: 961;
  }
  #gallery-vr-close:hover {
    color: var(--gold);
    border-color: rgba(201,168,76,0.55);
  }

  /* ── VR Info Button & Panel ── */
  #vr-info-btn {
    position: absolute; bottom: 2rem; left: 2rem;
    background: transparent;
    color: rgba(201,168,76,0.55);
    border: 1px solid rgba(201,168,76,0.2);
    width: 2.4rem; height: 2.4rem;
    font-size: 0.85rem; font-family: 'Cormorant Garamond', serif;
    cursor: pointer; z-index: 961;
    transition: color 0.25s, border-color 0.25s;
    display: flex; align-items: center; justify-content: center;
  }
  #vr-info-btn:hover { color: var(--gold); border-color: rgba(201,168,76,0.5); }

  #vr-info-panel {
    position: absolute; inset: 0;
    background: rgba(6,5,4,0.82);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    z-index: 970;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity 0.5s ease;
  }
  #vr-info-panel.visible { opacity: 1; pointer-events: all; }
  #vr-info-panel.visible .vr-info-box {
    transform: translateY(0); opacity: 1;
  }

  .vr-info-box {
    border: 1px solid rgba(201,168,76,0.28);
    padding: 3.8rem 4rem;
    max-width: 26.25rem; width: 88%;
    text-align: center; position: relative;
    transform: translateY(1.125rem); opacity: 0;
    transition: transform 0.55s ease 0.15s, opacity 0.55s ease 0.15s;
  }
  /* Niedrige Laptop-Fenster: Kasten kompakter, damit er ganz auf den Bildschirm passt */
  @media (max-height: 700px) { .vr-info-box { padding: 2.2rem 3rem; } }
  .vr-info-box::before {
    content: ''; position: absolute;
    top: -1px; left: 20%; right: 20%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201,168,76,0.55), transparent);
  }
  .vr-info-box::after {
    content: ''; position: absolute;
    bottom: -1px; left: 20%; right: 20%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201,168,76,0.55), transparent);
  }

  .vr-info-label {
    font-size: max(0.44rem, var(--label-min)); letter-spacing: 0.58em; text-transform: uppercase;
    color: rgba(201,168,76,0.55); margin-bottom: 1.2rem;
    font-family: 'Montserrat', sans-serif; font-weight: 300;
  }
  .vr-info-title {
    font-family: 'Cormorant Garamond', serif; font-style: italic;
    font-size: 2.1rem; font-weight: 300;
    color: var(--gold-light); letter-spacing: 0.1em;
    margin-bottom: 0.9rem; line-height: 1.2;
  }
  .vr-info-ornament {
    color: rgba(201,168,76,0.45); font-size: max(0.5rem, var(--label-min));
    margin-bottom: 1.6rem; letter-spacing: 0.15em;
  }
  .vr-info-text {
    font-family: 'Cormorant Garamond', serif; font-style: italic;
    font-size: 1rem; color: rgba(255,255,255,0.72);
    line-height: 1.85; letter-spacing: 0.04em;
    margin-bottom: 1.6rem;
  }
  .vr-info-steps {
    display: flex; flex-direction: column; gap: 0.9rem;
    margin-bottom: 2.4rem;
    border-top: 1px solid rgba(201,168,76,0.18);
    padding-top: 1.5rem; margin-top: 0.4rem;
    text-align: left;
  }
  .vr-info-step { display: flex; align-items: flex-start; gap: 1rem; }
  .vr-info-step-icon {
    color: rgba(201,168,76,0.8); font-size: 0.62rem;
    flex-shrink: 0; padding-top: 0.1rem; min-width: 1.1rem; text-align: center;
    font-family: 'Montserrat', sans-serif;
  }
  .vr-info-step-text {
    font-size: max(0.43rem, var(--label-min)); letter-spacing: 0.2em; text-transform: uppercase;
    color: rgba(255,255,255,0.62); font-family: 'Montserrat', sans-serif; line-height: 1.7;
  }
  .vr-info-step-text em { color: rgba(201,168,76,0.9); font-style: normal; }
  .vr-info-close {
    font-size: max(0.54rem, var(--label-min)); letter-spacing: 0.42em; text-transform: uppercase;
    color: var(--gold); background: transparent;
    border: 1px solid rgba(201,168,76,0.55);
    padding: 0.9rem 2.6rem; cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    transition: all 0.35s ease;
    box-shadow: 0 0 22px rgba(201,168,76,0.07), inset 0 0 14px rgba(201,168,76,0.04);
    text-shadow: 0 0 10px rgba(201,168,76,0.35);
  }
  /* „Ohne 3D“-Weg zur Werkübersicht im Hilfefenster und Hinweis ohne WebGL */
  .vr-info-alt {
    display: inline-block; margin-top: 1.1rem;
    font-size: max(0.55rem, var(--label-min)); letter-spacing: 0.18em;
    color: var(--gold); text-decoration: underline; text-underline-offset: 0.25em;
  }
  #vr-nowebgl {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    z-index: 20; max-width: min(28rem, 90vw); text-align: center;
    opacity: 1; background: #0b0a09;   /* sofort sichtbar, ohne die Einblendung des Hilfefensters */
  }
  #vr-nowebgl .vr-info-close { display: inline-block; text-decoration: none; margin-top: 1.4rem; }
  .vr-info-close:hover {
    background: var(--gold); color: #0A0A0A;
    box-shadow: 0 0 40px rgba(201,168,76,0.3); text-shadow: none;
  }

  #vr-skip {
    position: absolute;
    bottom: 2rem;
    right: 2rem;
    background: transparent;
    color: rgba(201,168,76,0.55);
    border: 1px solid rgba(201,168,76,0.2);
    padding: 0.5rem 1.3rem;
    font-size: max(0.52rem, var(--label-min));
    letter-spacing: 0.32em;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    transition: color 0.25s ease, border-color 0.25s ease;
    z-index: 961;
    text-transform: uppercase;
  }
  #vr-skip:hover { color: var(--gold); border-color: rgba(201,168,76,0.5); }
  /* Zurück: gleiche Optik wie Weiter, links daneben */
  #vr-back {
    position: absolute;
    bottom: 2rem;
    right: calc(2rem + 9.2rem);
    background: transparent;
    color: rgba(201,168,76,0.55);
    border: 1px solid rgba(201,168,76,0.2);
    padding: 0.5rem 1.3rem;
    font-size: max(0.52rem, var(--label-min));
    letter-spacing: 0.32em;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    transition: color 0.25s ease, border-color 0.25s ease;
    z-index: 961;
    text-transform: uppercase;
  }
  #vr-back:hover { color: var(--gold); border-color: rgba(201,168,76,0.5); }
  /* Schmale Bildschirme: Weiter/Zurück unten rechts und links, Frei erkunden darüber */
  @media (max-width: 760px) {
    #gallery-vr #vr-back     { right: auto; left: calc(1rem + 2.4rem + 0.6rem); bottom: 1.2rem; padding: 0.5rem 0.9rem; letter-spacing: 0.22em; }
    #gallery-vr #vr-skip     { right: 1rem; bottom: 1.2rem; padding: 0.5rem 0.9rem; letter-spacing: 0.22em; }
    #gallery-vr #vr-info-btn { left: 1rem; bottom: 1.2rem; }
    #gallery-vr #vr-free-btn { bottom: 4.4rem; }
    #gallery-vr #vr-back, #gallery-vr #vr-skip, #gallery-vr #gallery-vr-close, #gallery-vr #vr-info-btn {
      background: rgba(8,7,6,0.66); color: rgba(201,168,76,0.9); border-color: rgba(201,168,76,0.4);
    }
    #gallery-vr #gallery-vr-close { top: 1rem; right: 1rem; padding: 0.55rem 1rem; }
  }
  #vr-free-btn {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(8,7,6,0.72);
    border: 1px solid rgba(201,168,76,0.28);
    color: rgba(201,168,76,0.65);
    font-family: 'Montserrat', sans-serif;
    font-size: max(0.52rem, var(--label-min));
    letter-spacing: 0.28em;
    padding: 0.5rem 1.4rem;
    cursor: pointer;
    transition: color 0.25s, border-color 0.25s, background 0.25s;
    z-index: 961;
    text-transform: uppercase;
  }
  #vr-free-btn:hover { color: var(--gold); border-color: rgba(201,168,76,0.6); }
  #vr-free-btn.active { color: var(--gold); border-color: rgba(201,168,76,0.7); background: rgba(201,168,76,0.08); }
  #gallery-tooltip {
    position: absolute;
    display: none;
    pointer-events: none;
    background: rgba(8,7,6,0.88);
    color: #e8d5b0;
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.85rem;
    font-weight: 300;
    letter-spacing: 0.10em;
    padding: 0.45rem 0.85rem;
    border: 1px solid rgba(201,168,76,0.28);
    white-space: nowrap;
    z-index: 962;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  }

  /* ── GALLERY LOADER ── */
  #gallery-loader {
    position: absolute;
    inset: 0;
    background: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 962;
    transition: opacity 1.0s ease;
  }
  #gallery-loader.fade-out {
    opacity: 0;
    pointer-events: none;
  }
  .gl-inner {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  .gl-script {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.4rem, 5.5vw, 4rem);
    font-weight: 300;
    letter-spacing: 0.18em;
    color: rgba(201,168,76,0.90);
    line-height: 1;
    margin-bottom: 0.5rem;
  }
  .gl-rule {
    width: 8.75rem;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(201,168,76,0.55), transparent);
    margin: 0.55rem 0;
  }
  .gl-label {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(0.55rem, 1.2vw, 0.75rem);
    font-weight: 300;
    letter-spacing: 0.38em;
    color: rgba(242,236,222,0.55);
    margin-bottom: 2.8rem;
  }
  .gl-dots {
    display: flex;
    gap: 0.625rem;
  }
  .gl-dots span {
    width: 0.3125rem;
    height: 0.3125rem;
    border-radius: 50%;
    background: rgba(201,168,76,0.50);
    animation: gl-pulse 1.4s ease-in-out infinite;
  }
  .gl-dots span:nth-child(2) { animation-delay: 0.22s; }
  .gl-dots span:nth-child(3) { animation-delay: 0.44s; }
  @keyframes gl-pulse {
    0%, 80%, 100% { opacity: 0.2; transform: scale(0.85); }
    40%            { opacity: 1;   transform: scale(1.15); }
  }

  /* ── TOOLTIP ── */
  .tooltip-wrap {
    position: relative;
    display: inline;
    cursor: pointer;
  }

  .tooltip-wrap strong {
    border-bottom: 1px solid var(--gold-dim);
    padding-bottom: 1px;
  }

  .tooltip-popup {
    position: absolute;
    bottom: calc(100% + 0.75rem);
    left: 50%;
    transform: translateX(-50%);
    width: 17.5rem;
    background: #111;
    border: 1px solid var(--gold-dim);
    box-shadow: 0 8px 32px rgba(0,0,0,0.7);
    z-index: 200;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
  }

  .tooltip-popup img {
    width: 100%;
    display: block;
  }

  .tooltip-caption {
    display: block;
    padding: 0.5rem 0.75rem;
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    color: var(--gold);   /* Bildnachweis: ausreichend Kontrast auf dem dunklen Popup */
    text-align: center;
    font-family: 'Montserrat', sans-serif;
  }

  .tooltip-wrap:hover .tooltip-popup,
  .tooltip-wrap:focus-visible .tooltip-popup {   /* auch per Tastatur (Tab) erreichbar */
    opacity: 1;
    visibility: visible;
  }

  /* ── STARTSEITE: Hinweis auf die Dauerausstellung ── */
  .hero-dauer {
    display: inline-block;
    margin-top: 1.8rem;
    padding-bottom: 0.3rem;
    font-size: max(0.52rem, var(--label-min));
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(201,168,76,0.75);
    text-decoration: none;
    border-bottom: 1px solid rgba(201,168,76,0.3);
    transition: color 0.3s ease, border-color 0.3s ease;
  }
  .hero-dauer:hover { color: var(--gold); border-color: var(--gold); }
  /* Startseite: Hinweis auf die Dauerausstellung und „Film ansehen“ nebeneinander */
  .hero-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 2rem; margin-top: 1.8rem; }
  .hero-links .hero-dauer { margin-top: 0; }
  .hero-film {
    display: inline-flex; align-items: center; gap: 0.55rem;
    background: none; border: none; border-bottom: 1px solid rgba(201,168,76,0.3); padding: 0 0 0.3rem; cursor: pointer;
    font-family: 'Montserrat', sans-serif; font-size: max(0.52rem, var(--label-min)); letter-spacing: 0.3em; text-transform: uppercase;
    color: rgba(201,168,76,0.75); transition: color 0.3s ease, border-color 0.3s ease;
  }
  .hero-film:hover { color: var(--gold); border-color: var(--gold); }

  /* Merkliste in der Navigation als Herz */
  .nav-fav-icon { font-size: 0.95rem; line-height: 1; letter-spacing: 0; vertical-align: -0.08em; }
  #btn-favs { display: inline-block; padding: 0.4rem 0.6rem; margin: -0.4rem -0.6rem; }

  /* ══ KATALOG-ABSCHNITTE: Leben · Das Werk · Ausstellungen ══
     Wie ein Ausstellungskatalog: Kapitelkopf mit römischer Ziffer und Goldlinie, Initiale am
     Textanfang, viel Weißraum. */
  .kat-head {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-end;
    gap: 1.6rem;
    margin-bottom: 3.4rem;
    text-align: left;
  }
  .kat-num {
    font-family: 'Cormorant Garamond', serif;
    font-size: 4.4rem;
    font-weight: 300;
    line-height: 0.78;
    color: var(--gold);
    opacity: 0.6;
  }
  .kat-titles { flex: 1; padding-bottom: 1rem; border-bottom: 1px solid rgba(139,110,46,0.35); }
  .kat-titles .section-label { margin-bottom: 0.7rem; color: var(--gold-dim); }
  .kat-titles h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.7rem;
    font-weight: 300;
    line-height: 1.15;
    color: var(--text-dark);
    margin: 0;
  }
  .kat-dates { font-size: 0.55em; letter-spacing: 0.08em; color: var(--gold-dim); white-space: nowrap; margin-left: 0.35em; }
  .kat-text p { font-size: 0.78rem; line-height: 2.05; color: #6f6d66; margin-bottom: 1.1rem; }
  /* Initiale am Anfang des ersten Absatzes */
  .kat-text .lang-de > p:first-child::first-letter,
  .kat-text .lang-en > p:first-child::first-letter {
    float: left;
    font-family: 'Cormorant Garamond', serif;
    font-size: 3.6em;
    line-height: 0.82;
    padding: 0.06em 0.12em 0 0;
    color: var(--gold-dim);
  }
  .kat-roles { font-size: max(0.6rem, var(--label-min)); letter-spacing: 0.2em; color: var(--gold); }
  /* Wo die Berufe nicht in eine Zeile passen: zwei Zeilen zu je zwei Begriffen statt hängendem Trennstrich */
  @media (max-width: 1200px) {
    .kat-roles .kat-sep { display: none; }
    .kat-roles .nw { display: block; }
  }
  .nw { white-space: nowrap; }
  .werk-figure img:focus-visible { outline: 1px solid var(--gold); outline-offset: 0.4rem; }
  .kat-subhead {
    font-size: max(0.52rem, var(--label-min));
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--gold-dim);
    text-align: center;
    margin-bottom: 2.2rem;
  }

  /* ── LEBEN: Zeitleiste entlang einer Mittellinie, Stationen wechselnd links und rechts ── */
  .life-wrap { grid-column: 1 / -1; margin-top: 3rem; padding-top: 3.6rem; border-top: 1px solid var(--gray-light); }
  .life-timeline { list-style: none; position: relative; max-width: 54rem; margin: 0 auto; padding: 0; }
  .life-timeline::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 50%;
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(139,110,46,0.5) 5%, rgba(139,110,46,0.5) 95%, transparent);
  }
  .life-item { display: grid; grid-template-columns: 1fr 3.2rem 1fr; align-items: center; padding: 0.75rem 0; }
  .life-item > * { grid-row: 1; }
  .life-year {
    grid-column: 1;
    text-align: right;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.55rem;
    font-weight: 300;
    color: var(--gold-dim);
  }
  .life-dot {
    grid-column: 2;
    justify-self: center;
    width: 0.55rem; height: 0.55rem;
    border-radius: 50%;
    background: var(--white);
    border: 1px solid var(--gold-dim);
    box-shadow: 0 0 0 0.25rem var(--white);
    position: relative; z-index: 1;
  }
  .life-text { grid-column: 3; text-align: left; font-size: 0.74rem; line-height: 1.75; letter-spacing: 0.02em; color: #6f6d66; }
  .life-item:nth-child(even) .life-year { grid-column: 3; text-align: left; }
  .life-item:nth-child(even) .life-text { grid-column: 1; text-align: right; }

  /* ── DAS WERK und AUSSTELLUNGEN: volle Breite, Inhalt mittig ── */
  #das-werk, #ausstellungen {
    position: relative; z-index: 1;
    padding: 7.5rem max(3rem, calc((100% - 66rem) / 2));
  }
  #das-werk { background: var(--white); }
  /* Übergang zum dunklen Socials-Bereich: klarer Schnitt statt Verlauf – der helle Teil endet mit einem
     Goldornament (Linie · Raute · Linie), der dunkle beginnt mit einer feinen Goldkante */
  #ausstellungen { padding-bottom: 9rem; background: var(--off-white); }
  #ausstellungen::after {
    content: '';
    position: absolute;
    left: 50%; bottom: 3.6rem;
    width: 11rem; height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(to right, transparent, var(--gold) 38%, transparent 45%, transparent 55%, var(--gold) 62%, transparent);
  }
  #ausstellungen::before {
    content: '';
    position: absolute;
    left: 50%; bottom: calc(3.6rem - 0.17rem);
    width: 0.38rem; height: 0.38rem;
    transform: translateX(-50%) rotate(45deg);
    background: var(--gold);
  }

  .werk-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 4.5rem;
    align-items: start;
    margin-bottom: 4.5rem;
  }
  .werk-figure { margin: 0; }
  .werk-figure img {
    width: 100%;
    display: block;
    cursor: zoom-in;
    box-shadow: 0 1.25rem 2.8rem rgba(0,0,0,0.16), 0 0.2rem 0.6rem rgba(0,0,0,0.08);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
  }
  .werk-figure img:hover { transform: translateY(-0.2rem); box-shadow: 0 1.6rem 3.2rem rgba(0,0,0,0.2), 0 0.2rem 0.6rem rgba(0,0,0,0.08); }
  .werk-figure figcaption {
    margin-top: 1rem;
    font-size: max(0.56rem, var(--label-min));
    letter-spacing: 0.12em;
    color: var(--gray-mid);
  }
  .werk-figure figcaption em {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.05rem;
    letter-spacing: 0;
    color: var(--text-dark);
    margin-right: 0.35em;
  }
  .werk-body .bio-quote { margin-top: 2rem; }
  .werk-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; }
  .werk-col { border-top: 1px solid rgba(139,110,46,0.35); padding-top: 1.3rem; }
  .werk-col-head {
    font-size: max(0.5rem, var(--label-min));
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--gold-dim);
    margin-bottom: 1rem;
  }
  .werk-col ul { list-style: none; padding: 0; margin: 0; }
  .werk-col li {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.05rem;
    line-height: 1.45;
    color: var(--text-dark);
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--gray-light);
  }
  .werk-col li:last-child { border-bottom: none; }
  .werk-col .tooltip-wrap { border-bottom: 1px dotted var(--gold-dim); }
  .werk-year { font-family: 'Cormorant Garamond', serif; color: var(--gold-dim); margin-right: 0.45rem; }

  /* Aktuell & demnächst: zwei helle Karten mit Passepartout-Linie */
  .ausst-cards-head { text-align: center; }
  .ausst-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.4rem;
    max-width: 56rem;
    margin: 0 auto 5.5rem;
  }
  .ausst-card {
    padding: 3.2rem 2.6rem 3rem;
    background: #FFFEFB;
    text-align: center;
    border: 1px solid rgba(139,110,46,0.16);
    outline: 1px solid rgba(201,168,76,0.4);
    outline-offset: -0.7rem;
    box-shadow: 0 1.2rem 2.8rem rgba(60,48,20,0.07);
  }
  .ausst-card-eyebrow {
    font-size: max(0.52rem, var(--label-min));
    letter-spacing: 0.45em;
    text-transform: uppercase;
    color: var(--gold-dim);
    margin-bottom: 1.1rem;
  }
  .ausst-card .when-now, .ausst-card.is-open .when-soon { display: none; }
  .ausst-card.is-open .when-now { display: inline; }
  .ausst-card-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.3rem;
    font-weight: 300;
    color: var(--text-dark);
    line-height: 1.1;
    margin-bottom: 0.6rem;
  }
  .ausst-card-date { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.15rem; color: var(--gold-dim); }
  /* Kommende Ausstellung: Datum groß wie auf einem Plakat */
  .ausst-card[data-start] .ausst-card-date { font-size: 1.75rem; line-height: 1.2; }
  .ausst-card-rule { display: block; width: 3.5rem; height: 1px; margin: 1.4rem auto; background: linear-gradient(to right, transparent, var(--gold), transparent); }
  .ausst-card-text { max-width: 22rem; margin: 0 auto; font-size: 0.74rem; line-height: 1.95; color: #6f6d66; }

  /* Einzelausstellungen als Jahres-Tafel: Jahr in eigener Spalte, umbrechende Zeilen bleiben eingerückt */
  .ausst-block { max-width: 56rem; margin: 0 auto; }
  .ausst-table { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 4rem; }
  .ausst-table li {
    break-inside: avoid;
    display: grid;
    grid-template-columns: 3.4rem 1fr;
    gap: 0.8rem;
    align-items: baseline;
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(139,110,46,0.16);
  }
  .ausst-year { font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; color: var(--gold-dim); }
  .ausst-place { font-size: 0.72rem; line-height: 1.65; color: #6f6d66; }
  .ausst-gruppe-box {
    max-width: 50rem;
    margin: 4rem auto 0;
    padding: 2.4rem 2.6rem 2.2rem;
    background: var(--white);
    border: 1px solid rgba(139,110,46,0.22);
  }
  .ausst-gruppe { font-size: 0.76rem; line-height: 2.05; color: #6f6d66; text-align: center; }

  /* ── SOCIALS ── */
  #socials {
    background: var(--black);
    padding: 7rem 3rem;
    text-align: center;
  }

  #socials .section-label { color: var(--gold-dim); }

  #socials h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.5rem;
    font-weight: 300;
    color: var(--white);
    margin-bottom: 1rem;
  }

  #socials > p {
    font-size: 0.7rem;
    color: var(--gray-mid);
    letter-spacing: 0.1em;
    margin-bottom: 4rem;
  }

  .socials-grid {
    display: flex;
    justify-content: center;
    gap: 4rem;
    flex-wrap: wrap;
  }

  .social-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    color: var(--white);
    transition: transform 0.3s ease, color 0.3s ease;
  }
  /* hidden-Attribut muss display:flex überschreiben (sonst bleibt die Kachel sichtbar) */
  .social-item[hidden] { display: none !important; }

  .social-item:hover {
    transform: translateY(-0.375rem);
    color: var(--gold);
  }

  .social-icon {
    width: 4rem;
    height: 4rem;
    border: 1px solid var(--gold-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.3s ease, background 0.3s ease;
  }

  .social-item:hover .social-icon {
    border-color: var(--gold);
    background: rgba(201,168,76,0.06);
  }

  .social-icon svg {
    width: 1.625rem;
    height: 1.625rem;
    color: inherit;
  }

  .social-name {
    font-size: 0.6rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0;
  }

  .social-handle {
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.95rem;
    color: var(--gray-mid);
    margin: 0;
    font-style: italic;
  }

  /* ── KALENDER OVERLAY ── */
  /* Zentriert über margin:auto der Box – ist sie höher als das Fenster (niedrige Laptops mit offener
     Zeitwalze), beginnt sie oben und das Overlay lässt sich scrollen statt oben abzuschneiden */
  #cal-overlay {
    position: fixed; inset: 0; z-index: 990;   /* über Kollektion und Werkansicht, aus denen er geöffnet wird */
    background: rgba(5,4,3,0.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    display: flex; overflow-y: auto; padding: 1rem 0;
    opacity: 0; pointer-events: none; visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s;
  }
  #cal-overlay.active { opacity: 1; pointer-events: auto; visibility: visible; }
  .cal-box {
    background: #100f0d; border: 1px solid rgba(201,168,76,0.22);
    padding: 2.5rem 2rem 2rem; width: min(26.25rem, 92vw);
    position: relative; margin: auto;
  }
  .cal-close {
    position: absolute; top: 1rem; right: 1.2rem;
    background: none; border: none; color: rgba(201,168,76,0.5);
    font-size: 1rem; cursor: pointer; transition: color 0.2s;
  }
  .cal-close:hover { color: var(--gold); }
  .cal-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 1.8rem;
  }
  .cal-nav {
    background: none; border: none;
    color: rgba(201,168,76,0.5); font-size: 1.1rem;
    cursor: pointer; padding: 0.2rem 0.6rem; transition: color 0.2s;
  }
  .cal-nav:hover { color: var(--gold); }
  .cal-month-label {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.15rem; font-weight: 300;
    letter-spacing: 0.15em; color: var(--gold);
  }
  .cal-weekdays {
    display: grid; grid-template-columns: repeat(7, 1fr);
    margin-bottom: 0.5rem;
  }
  .cal-weekdays span {
    text-align: center; font-size: max(0.42rem, var(--label-min));
    letter-spacing: 0.2em; color: rgba(201,168,76,0.4);
    text-transform: uppercase; padding-bottom: 0.6rem;
  }
  .cal-days {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.25rem;
  }
  .cal-day {
    aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
    font-family: 'Montserrat', sans-serif; font-size: 0.62rem;
    color: rgba(250,250,248,0.7); cursor: pointer; border-radius: 2px;
    transition: background 0.2s, color 0.2s; border: 1px solid transparent;
    background: transparent; padding: 0; width: 100%;   /* Tage sind echte Buttons */
  }
  .cal-day:disabled { cursor: default; }
  .cal-day:hover:not(.cal-empty):not(.cal-past) {
    background: rgba(201,168,76,0.1); border-color: rgba(201,168,76,0.3); color: var(--gold);
  }
  .cal-day.cal-today { border-color: rgba(201,168,76,0.4); color: var(--gold); }
  .cal-day.cal-selected { background: rgba(201,168,76,0.18); border-color: var(--gold); color: var(--gold); }
  .cal-day.cal-past { color: rgba(250,250,248,0.2); cursor: default; }
  .cal-day.cal-empty { cursor: default; }
  .cal-confirm {
    margin-top: 1.6rem; text-align: center;
    font-size: max(0.55rem, var(--label-min)); letter-spacing: 0.18em;
    color: rgba(201,168,76,0.4); text-transform: uppercase;
    min-height: 1.4rem;
  }
  .cal-confirm.has-date { color: var(--gold); }
  .cal-book-btn {
    display: block; width: 100%; margin-top: 1.2rem;
    background: transparent; border: 1px solid rgba(201,168,76,0.35);
    color: var(--gold); font-family: 'Montserrat', sans-serif;
    font-size: max(0.55rem, var(--label-min)); letter-spacing: 0.3em; text-transform: uppercase;
    padding: 0.85rem; cursor: pointer;
    transition: background 0.25s, border-color 0.25s;
    opacity: 0; pointer-events: none; transition: opacity 0.3s, background 0.25s;
  }
  .cal-book-btn.visible { opacity: 1; pointer-events: auto; }
  .cal-book-btn:hover { background: rgba(201,168,76,0.1); border-color: rgba(201,168,76,0.7); }

  /* Zeitwähler Roller */
  .cal-time-wrap {
    overflow: hidden; max-height: 0; opacity: 0;
    transition: max-height 0.42s ease, opacity 0.32s ease;
    margin-top: 0.6rem;
  }
  .cal-time-wrap.open { max-height: 11.25rem; opacity: 1; }
  .cal-time-label {
    text-align: center; font-size: max(0.42rem, var(--label-min)); letter-spacing: 0.32em;
    color: rgba(201,168,76,0.38); text-transform: uppercase; margin-bottom: 0.7rem;
  }
  .cal-rollers { display: flex; align-items: center; justify-content: center; }
  .cal-roller-wrap { position: relative; width: 72px; height: 132px; overflow: hidden; }
  .cal-roller-highlight {
    position: absolute; left: 8px; right: 8px; top: 44px; height: 44px;
    border-top: 1px solid rgba(201,168,76,0.38);
    border-bottom: 1px solid rgba(201,168,76,0.38);
    background: rgba(201,168,76,0.05); pointer-events: none; z-index: 2;
  }
  .cal-roller-fade {
    position: absolute; left: 0; right: 0; height: 48px; z-index: 3; pointer-events: none;
  }
  .cal-roller-fade.top { top: 0; background: linear-gradient(to bottom, #100f0d 30%, transparent); }
  .cal-roller-fade.bot { bottom: 0; background: linear-gradient(to top, #100f0d 30%, transparent); }
  .cal-roller {
    height: 132px; overflow-y: scroll; scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .cal-roller::-webkit-scrollbar { display: none; }
  .cal-roller-item {
    height: 44px; display: flex; align-items: center; justify-content: center;
    scroll-snap-align: center; font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem; color: rgba(250,250,248,0.22); user-select: none;
    transition: color 0.15s, font-size 0.15s;
  }
  .cal-roller-item.r-active { color: var(--gold); font-size: 1rem; }
  .cal-roller-sep {
    font-size: 1.4rem; color: rgba(201,168,76,0.45);
    padding: 0 2px; line-height: 132px;
  }

  .cal-success {
    text-align: center; padding: 1rem 0;
    display: none; flex-direction: column; align-items: center; gap: 0.8rem;
  }
  .cal-success.show { display: flex; }
  .cal-success-icon {
    width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid rgba(201,168,76,0.5);
    display: flex; align-items: center; justify-content: center;
    color: var(--gold); font-size: 1.2rem;
  }
  .cal-success p { font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; color: var(--gold); font-style: italic; }
  .cal-success .sub { font-family: 'Montserrat', sans-serif; font-size: max(0.62rem, var(--label-min)); letter-spacing: 0.04em; line-height: 1.7; color: var(--gray-mid); font-style: normal; text-align: center; max-width: 18rem; }

  /* ── CONTACT ── */
  #kontakt {
    background: var(--black);
    padding: 7rem 3rem;
    text-align: center;
  }

  #kontakt .section-label { color: var(--gold-dim); }

  #kontakt h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.5rem;
    font-weight: 300;
    color: var(--white);
    margin-bottom: 1rem;
  }

  #kontakt > p {
    font-size: 0.7rem;
    color: var(--gray-mid);
    letter-spacing: 0.1em;
    margin-bottom: 3rem;
  }

  .contact-grid {
    display: flex;
    justify-content: center;
    gap: 5rem;
    flex-wrap: wrap;
  }

  .contact-item .label {
    font-size: max(0.55rem, var(--label-min));
    letter-spacing: 0.4em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
  }

  .contact-item .value a { color: inherit; text-decoration: none; transition: color 0.25s; }
  .contact-item .value a:hover { color: var(--gold); }
  .contact-item .value {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
    color: var(--white);
    font-weight: 300;
    font-style: italic;
  }

  /* ── KONTAKTFORMULAR ── */
  .contact-form-divider {
    width: 3.75rem; height: 0.5px;
    background: linear-gradient(to right, transparent, rgba(201,168,76,0.4), transparent);
    margin: 3.5rem auto 3rem;
  }
  .contact-form-wrap {
    max-width: 32.5rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }
  .contact-form-wrap .submit-btn {
    margin-top: 1.2rem;
    border: 1.5px solid rgba(201,168,76,0.7);
    background: transparent;
    color: var(--gold);
    font-weight: 500;
    letter-spacing: 0.22em;
    transition: background 0.3s, border-color 0.3s, color 0.3s;
  }
  .contact-form-wrap .submit-btn:hover {
    background: rgba(201,168,76,0.12);
    border-color: var(--gold);
    color: var(--gold);
  }

  /* ── FOOTER ── */
  footer {
    background: var(--black);
    border-top: 1px solid rgba(201,168,76,0.22);
    padding: 2.5rem 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
  }

  .footer-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
    color: var(--gold);
    letter-spacing: 0.28em;
    font-weight: 300;
  }

  .footer-links {
    display: flex;
    gap: 2.5rem;
    list-style: none;
  }

  .footer-links a {
    font-size: max(0.52rem, var(--label-min));
    letter-spacing: 0.22em;
    color: rgba(201,168,76,0.32);
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.3s;
    position: relative;
  }
  .footer-links a::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0; right: 0;
    height: 0.5px;
    background: var(--gold-dim);
    transform: scaleX(0);
    transition: transform 0.3s;
    transform-origin: center;
  }
  .footer-links a:hover { color: var(--gold-dim); }
  .footer-links a:hover::after { transform: scaleX(1); }

  .footer-copy {
    font-size: max(0.5rem, var(--label-min));
    letter-spacing: 0.2em;
    color: rgba(201,168,76,0.18);
    text-transform: uppercase;
  }

  /* ── LEGAL OVERLAYS (Impressum / Datenschutz) ─────────────── */
  .legal-overlay {
    position: fixed;
    inset: 0;
    background: var(--black);
    z-index: 995;   /* über Kollektion, Werkansicht und Termin-Dialog (990), aus denen sie geöffnet werden kann */
    overflow-y: auto;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;   /* geschlossen: nicht per Tab erreichbar */
    transition: opacity 0.45s ease, visibility 0s linear 0.45s;
    -webkit-overflow-scrolling: touch;
  }
  .legal-overlay.active {
    visibility: visible; transition: opacity 0.45s ease, visibility 0s;
    opacity: 1;
    pointer-events: all;
  }
  .legal-inner {
    max-width: 47.5rem;
    margin: 0 auto;
    padding: 7rem 3rem 6rem;
  }
  .legal-close-btn {
    position: fixed;
    top: 2rem;
    left: 2.5rem;
    background: none;
    border: 1px solid #222;
    color: var(--gray-mid);
    font-family: 'Montserrat', sans-serif;
    font-size: max(0.5rem, var(--label-min));
    letter-spacing: 0.35em;
    text-transform: uppercase;
    padding: 0.55rem 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    transition: color 0.3s, border-color 0.3s;
    z-index: 10;
  }
  .legal-close-btn:hover { color: var(--gold); border-color: var(--gold-dim); }
  .legal-eyebrow {
    font-size: max(0.55rem, var(--label-min));
    letter-spacing: 0.45em;
    color: var(--gold-dim);
    text-transform: uppercase;
    margin-bottom: 1.5rem;
  }
  .legal-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.8rem;
    font-weight: 300;
    color: var(--white);
    margin-bottom: 3.5rem;
    line-height: 1.15;
  }
  .legal-divider {
    border: none;
    border-top: 0.5px solid #1e1e1e;
    margin: 2.8rem 0;
  }
  .legal-section-head {
    font-size: max(0.55rem, var(--label-min));
    letter-spacing: 0.4em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 1.1rem;
    margin-top: 0;
  }
  .legal-body {
    font-size: 0.72rem;
    line-height: 1.9;
    color: var(--gray-mid);
    letter-spacing: 0.02em;
  }
  .legal-body p { margin: 0 0 0.9rem; }
  .legal-body p:last-child { margin-bottom: 0; }
  .legal-body a {
    color: var(--gold-dim);
    text-decoration: none;
    border-bottom: 0.5px solid var(--gold-dim);
    transition: color 0.3s;
  }
  .legal-body a:hover { color: var(--gold); }
  .legal-ph {
    color: var(--gold);
    font-style: italic;
    background: rgba(201,168,76,0.07);
    padding: 0 0.3em;
    border-radius: 2px;
  }
  .legal-note {
    font-size: 0.6rem;
    color: #3a3a3a;
    border-left: 2px solid #1e1e1e;
    padding-left: 1rem;
    margin: 1rem 0;
    font-style: italic;
    line-height: 1.7;
  }
  .legal-block {
    margin-bottom: 2.8rem;
  }
  .legal-block:last-child { margin-bottom: 0; }

  /* ── ANIMATIONS ── */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(1.5rem); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 0.8; }
  }

  @keyframes scrollPulse {
    0%, 100% { opacity: 0.3; }
    50%       { opacity: 1; }
  }

  /* ── Raumübergang ── */
  .fade-in-section {
    opacity: 0;
    transform: translateY(1.375rem);
    transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .fade-in-section.visible {
    opacity: 1;
    transform: none;
  }

  #room-overlay {
    position: fixed;
    inset: 0;
    background: var(--black);
    z-index: 500;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
  }

  #room-overlay.entering { opacity: 1; }
  #room-overlay.leaving  { opacity: 0; }

  /* ── ZOOM-OVERLAY: Hintergrundbild bleibt über neuer Seite ── */
  #zoom-hero-overlay {
    position: fixed;
    inset: 0;
    z-index: 490;
    pointer-events: none;
    opacity: 0;
    display: none;
  }

  #zoom-hero-overlay img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    filter: brightness(0.45) grayscale(0.15);
    transform-origin: 48% 64%;
    transition: transform 4.2s cubic-bezier(0.1, 0, 0.25, 1),
                filter 4.2s ease;
  }

  #zoom-hero-overlay.active {
    display: block;
    opacity: 1;
  }

  #zoom-hero-overlay.zooming img {
    transform: scale(18);
    filter: brightness(3);
  }

  /* Während des Flugs ins Werk: Navigation ohne Einfahr-Animation und Weichzeichner */
  body.hero-zooming nav,
  body.hero-zooming #lang-switcher {
    transition: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }

  /* ── NEUE SEITE WÄCHST AUS DEM RAHMEN ── */
  #next-page-reveal {
    position: fixed;
    /* Startposition: genau der Bilderrahmen im gezoomten Bild (48% x, 64% y) */
    left: 48%;
    top:  64%;
    width: 0%;
    height: 0%;
    transform: translate(-50%, -50%);
    z-index: 489;
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
  }

  #next-page-reveal.growing {
    left: 50%;
    top:  50%;
    width: 100vw;
    height: 100vh;
    opacity: 1;
    transition:
      left    1s cubic-bezier(0.1, 0, 0.25, 1),
      top     1s cubic-bezier(0.1, 0, 0.25, 1),
      width   1s cubic-bezier(0.1, 0, 0.25, 1),
      height  1s cubic-bezier(0.1, 0, 0.25, 1),
      opacity 0.3s ease;
  }

  #next-page-reveal iframe {
    width: 100vw;
    height: 100vh;
    border: none;
    display: block;
    pointer-events: none;
  }

  #hero.zooming .hero-title {
    opacity: 0;
    transform: translateY(-1.25rem) scale(0.95);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  #hero.zooming .hero-floor {
    opacity: 0;
    transition: opacity 0.25s ease;
  }

  /* ── SEITEN-ÜBERGANG nach Zoom ── */
  body.zoom-transitioning #intro,
  body.zoom-transitioning #galerie,
  body.zoom-transitioning #ueber-uns,
  body.zoom-transitioning #socials,
  body.zoom-transitioning #kontakt,
  body.zoom-transitioning footer,
  body.zoom-transitioning nav {
    opacity: 0;
  }

  body.zoom-revealing #intro,
  body.zoom-revealing #galerie,
  body.zoom-revealing #ueber-uns,
  body.zoom-revealing #kontakt,
  body.zoom-revealing footer,
  body.zoom-revealing nav {
    opacity: 1;
    transition: opacity 0.9s ease;
  }
  @media (max-width: 768px) {
    /* ── Nav: horizontal scrollbar statt Überlauf ── */
    nav { padding: 0.9rem 0 0.7rem; align-items: flex-start; }
    .nav-logo { padding: 0 1.5rem; }
    .nav-divider { display: none; }
    .nav-links {
      gap: 0;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      width: 100%;
      box-sizing: border-box;   /* Innenabstand nicht zur Breite addieren – sonst ist die Seite breiter als das Handy */
      padding: 0.5rem 1.5rem 0.3rem;
      justify-content: flex-start;
    }
    .nav-links::-webkit-scrollbar { display: none; }
    .nav-links li { flex-shrink: 0; padding: 0 1rem; }
    .nav-links a { font-size: max(0.54rem, var(--label-min)); white-space: nowrap; }

    /* ── Sprachumschalter ── */
    #lang-switcher { top: 0.8rem; right: 1rem; padding: 0.35rem 0.7rem; }

    /* ── Bild-Vorschau im Biografie-Text (Koblenz): verborgen ohne Platzbedarf,
          angetippt mittig auf dem Bildschirm – sonst ragt sie über den rechten Rand
          und macht die ganze Seite breiter als das Handy ── */
    .tooltip-popup { display: none; }
    .tooltip-wrap:hover .tooltip-popup {
      display: block;
      position: fixed;
      left: 50%; top: 50%; bottom: auto;
      transform: translate(-50%, -50%);
      width: min(280px, calc(100vw - 48px));
    }

    /* ── Hero ── */
    .hero-stage {
      width: 100%;
      padding: 0 16px;
      box-sizing: border-box;
      grid-template-columns: 1fr;
      grid-template-rows: auto auto;
      align-content: center;
      gap: 2.2rem;
    }
    .hero-art { order: -1; padding-top: 4.5rem; }
    .hero-art-frame img { max-height: 40svh; max-width: 74vw; }
    .hero-art-label { margin-top: 1.6rem; }
    .hero-title { text-align: center; }
    .hero-name br { display: none; }
    .hero-name-line { margin: 1.2rem auto 1rem; }
    .hero-label { margin-bottom: 0.9rem; }
    .hero-enter   { padding: 1rem 2rem; }
    .hero-ctas    { gap: 1.3rem; flex-direction: column; align-items: center; margin-top: 1.8rem; }

    /* ── Galerie ── */
    .gallery-grid { grid-template-columns: 1fr 1fr; }
    .artwork-card.large { grid-column: span 2; }
    /* Inhalt zwischen Navigation (oben) und dem sicher sichtbaren Bereich zentrieren
       (100svh = Höhe bei ausgeklappter iPhone-Adressleiste) */
    .intro-scene-pin #galerie { padding: 96px 12px calc(12px + 100vh - 100svh); }
    .intro-scene-pin .gallery-header { margin-bottom: 1.1rem; }
    .gallery-header h2 { font-size: 1.7rem; }
    .gallery-frame { padding: 4px; }

    /* ── Kategorien ── */
    /* alle vier Kacheln auf einen Blick (2 × 2), auch auf kleinen iPhones */
    .cat-grid { grid-template-columns: 1fr 1fr; gap: 4px; }
    .cat-tile { min-height: 0; height: clamp(130px, calc((100svh - 210px) / 2), 210px); padding: 1rem 0.6rem; gap: 0.55rem; }
    .cat-tile-name { font-size: 1.2rem; letter-spacing: 0.1em; line-height: 1.2; }
    .cat-tile-count { font-size: max(0.44rem, var(--label-min)); letter-spacing: 0.2em; }
    .cat-tile.settled:hover { transform: none; box-shadow: none; }

    /* ── Collection Overlay ── */
    .coll-inner { padding: 2rem 1.5rem 3rem; }
    .coll-grid { grid-template-columns: 1fr; gap: 1.5rem; }

    /* ── Artwork Detail: gestapeltes Layout ── */
    #ad-img-panel {
      width: 100% !important;
      height: 42vh !important;
      bottom: auto !important;
      top: 56px !important;
    }
    #ad-info-panel {
      left: 0 !important;
      top: calc(56px + 42vh) !important;
      border-left: none !important;
      border-top: 1px solid rgba(201,168,76,0.14) !important;
    }
    #ad-info-scroll { padding: 1.5rem 1.5rem 1rem !important; }
    /* Kopfzeile: Zurück einzeilig */
    .ad-back-btn { white-space: nowrap; padding: 0.5rem 0.9rem; }
    /* Bild passt ins Bildfeld (42vh) – Platz oben und unten für den Rundgang-Knopf */
    #ad-img-inner { padding: 1rem 1rem 3.4rem !important; }
    #ad-img-el img, .ad-placeholder-canvas { max-width: 86vw; max-height: calc(42vh - 4.4rem); }
    #ad-rundgang-btn { bottom: 0.8rem; padding: 0.55rem 1.2rem; font-size: max(0.48rem, var(--label-min)); letter-spacing: 0.2em; }
    #ad-info-footer { padding: 1rem 1.5rem 1.5rem !important; }
    #artwork-detail > div:first-child {
      height: 56px !important;
      padding: 0 1.2rem !important;
    }

    /* ── Biographie ── */
    #ueber-uns { grid-template-columns: 1fr; gap: 3rem; padding: 5rem 1.5rem; }
    .about-visual { aspect-ratio: 4/3; }
    /* flacher Rahmen: Untertitel-Verlauf niedriger halten, damit er nicht das halbe Bild verdeckt */
    .bio-caption { padding: 1.5rem 0.8rem 1.55rem; line-height: 1.7;
                   background: linear-gradient(to top, rgba(10,9,8,0.86) 0%, rgba(10,9,8,0.8) 70%, rgba(10,9,8,0) 100%); }

    /* Foto im Willkommen-Rahmen: schmale Ränder, damit das Foto möglichst breit wird */
    .intro-scene-pin #intro { padding: 0 1rem; top: calc(50% + 2.6rem); }
    .intro-frame--foto { padding: 1.7rem 0.6rem 0.9rem; }
    .intro-foto-bild { width: min(calc(100vw - 3.3rem), calc((100svh - 17rem) * 1.4341)); }
    .intro-foto figcaption { margin-top: 0.7rem; line-height: 1.6; }

    /* ── Leben, Das Werk, Ausstellungen: einspaltig ── */
    .kat-head { gap: 1rem; margin-bottom: 2.4rem; }
    .kat-num { font-size: 3rem; }
    .kat-titles h2 { font-size: 1.9rem; }
    .kat-dates { display: block; margin: 0.3rem 0 0; font-size: 0.6em; }
    .life-timeline::before { left: 0.27rem; }
    .life-item { grid-template-columns: 0.55rem 1fr; column-gap: 1.1rem; padding: 0.55rem 0; }
    .life-item > * { grid-row: auto; }
    .life-dot { grid-column: 1; grid-row: 1 / 3; align-self: start; margin-top: 0.45rem; }
    .life-year, .life-item:nth-child(even) .life-year { grid-column: 2; grid-row: 1; text-align: left; font-size: 1.2rem; }
    .life-text, .life-item:nth-child(even) .life-text { grid-column: 2; grid-row: 2; text-align: left; }
    #das-werk, #ausstellungen { padding: 5rem 1.5rem; }
    #ausstellungen { padding-bottom: 6.5rem; }
    #ausstellungen::after { bottom: 2.6rem; width: 9rem; }
    #ausstellungen::before { bottom: calc(2.6rem - 0.17rem); }
    .werk-grid { grid-template-columns: 1fr; gap: 2.4rem; margin-bottom: 3rem; }
    .werk-facts { grid-template-columns: 1fr; gap: 2rem; }
    .ausst-cards { grid-template-columns: 1fr; gap: 1.6rem; margin-bottom: 3.5rem; }
    .ausst-card { padding: 2.6rem 1.6rem 2.4rem; }
    .ausst-card-title { font-size: 2rem; }
    .ausst-table { columns: 1; }
    .ausst-gruppe-box { padding: 1.8rem 1.3rem; margin-top: 3rem; }
    .ausst-gruppe { text-align: left; }

    /* ── Socials / Kontakt ── */
    #socials { padding: 5rem 1.5rem; }
    .socials-grid { gap: 2.5rem; }
    #kontakt { padding: 5rem 1.5rem; }
    .contact-grid { gap: 2rem; }

    /* ── Footer ── */
    footer { flex-direction: column; align-items: flex-start; padding: 1.5rem 1.5rem 5.5rem; }
    /* ── WIP Banner ── */
    .wip-banner { padding: 2rem 1.5rem; }

    /* ── Legal Overlays ── */
    .legal-inner { padding: 5rem 1.5rem 4rem; }
    .legal-title { font-size: 2.1rem; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
    .legal-close-btn { left: 1rem; top: 1rem; }

    /* ── Footer Links ── */
    .footer-links { flex-wrap: wrap; gap: 1rem 1.8rem; }

    /* ── iOS: verhindert Auto-Zoom beim Antippen von Eingabefeldern ── */
    input, select, textarea { font-size: 16px !important; }
  }

  @media (max-width: 480px) {
    .gallery-grid { grid-template-columns: 1fr; }
    .artwork-card.large { grid-column: span 1; min-height: 300px; }
    .coll-grid { grid-template-columns: 1fr; }
    .nav-links li { padding: 0 0.7rem; }
    .nav-links a { font-size: max(0.5rem, var(--label-min)); }
    #ad-img-panel { height: 38vh !important; top: 52px !important; }
    #ad-img-el img, .ad-placeholder-canvas { max-height: calc(38vh - 4.4rem); }
    /* Titelzeile entfällt (steht direkt darunter noch einmal) */
    .ad-topbar-title { display: none; }
    #ad-info-panel { top: calc(52px + 38vh) !important; }
    .hero-name { font-size: clamp(2.2rem, 10vw, 2.9rem); }
    .hero-label { font-size: max(0.56rem, var(--label-min)); letter-spacing: 0.55em; }
  }

  /* Sehr schmale Handys (320 px): Logo kleiner, sonst liegt der Sprachumschalter darauf */
  @media (max-width: 360px) {
    .nav-logo { font-size: 0.92rem; letter-spacing: 0.24em; padding: 0 1rem; }
  }

  /* Startseite auf niedrigen Handy-Bildschirmen (iPhone SE u. ä.): Bild, Name und Knöpfe enger,
     damit alles einschließlich „Rundgang starten“ und Dauerausstellungs-Hinweis sichtbar bleibt */
  @media (max-width: 768px) and (max-height: 700px) and (orientation: portrait) {
    .hero-stage { gap: 1.1rem; }
    .hero-art { padding-top: 3.6rem; }
    .hero-art-frame img { max-height: max(22svh, calc(100svh - 25rem)); }
    .hero-art-label { margin-top: 0.9rem; }
    .hero-name-line { margin: 0.7rem auto 0.6rem; }
    .hero-label { margin-bottom: 0.6rem; }
    .hero-ctas { margin-top: 1.1rem; gap: 0.9rem; }
    .hero-enter { padding: 0.8rem 1.6rem; }
    .hero-dauer { margin-top: 0.9rem; }
  }
  /* Handy quer: Bild und Text nebeneinander wie am Computer */
  @media (max-height: 500px) and (orientation: landscape) {
    .hero-stage { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-rows: auto; gap: 2rem; padding: 3.2rem 1.5rem 0; }
    .hero-art { order: 0; padding-top: 0; }
    .hero-art-frame img { max-height: calc(100svh - 9rem); max-width: 40vw; }
    .hero-art-label { margin-top: 0.7rem; }
    .hero-title { text-align: left; }
    .hero-name { font-size: 2.2rem; }
    .hero-name-line { margin: 0.6rem 0 0.5rem; }
    .hero-label { margin-bottom: 0.5rem; letter-spacing: 0.3em; }
    .hero-ctas { flex-direction: row; align-items: center; gap: 1.2rem; margin-top: 1rem; }
    .hero-enter { padding: 0.7rem 1.4rem; }
    .hero-dauer { margin-top: 0.8rem; }
  }

  /* Handy quer: Kacheln in einer Reihe, damit alle vier unter die Navigation passen */
  @media (max-height: 500px) and (orientation: landscape) and (max-width: 768px) {
    .intro-scene-pin::before { height: 5.7rem; }
  }
  @media (max-height: 500px) and (orientation: landscape) {
    /* Willkommen-Foto: nach der Höhe richten, Hinweis enger */
    .intro-scene-pin #intro { top: calc(50% + 2.9rem); }
    .intro-frame--foto { padding: 1.3rem 0.6rem 0.7rem; }
    .intro-foto-bild { width: min(calc(100vw - 3.3rem), calc((100svh - 13.6rem) * 1.4341)); }
    .intro-foto { width: auto; }                      /* seitlich ist Platz: Unterschrift einzeilig */
    .intro-foto-bild { margin: 0 auto; }
    .intro-foto figcaption { margin-top: 0.45rem; }
    .intro-scroll-hint { margin-top: 0.9rem; gap: 0.2rem; }
    .intro-scene-pin #galerie { padding: 104px 16px calc(8px + 100vh - 100svh); }
    .intro-scene-pin .gallery-header { margin-bottom: 0.6rem; }
    .gallery-header h2 { font-size: 1.4rem; }
    .cat-grid { grid-template-columns: repeat(4, 1fr); gap: 4px; }
    .cat-tile { min-height: 0; height: clamp(110px, calc(100svh - 200px), 220px); padding: 0.8rem 0.5rem; gap: 0.5rem; }
    .cat-tile-name { font-size: 1.05rem; letter-spacing: 0.08em; line-height: 1.2; }
    .cat-tile-count { font-size: max(0.42rem, var(--label-min)); letter-spacing: 0.16em; }
  }
  /* Handy quer mit Desktop-Aufteilung der Werkansicht: Bild über dem Rundgang-Knopf halten */
  @media (max-height: 500px) and (orientation: landscape) and (min-width: 769px) {
    #ad-img-el img, .ad-placeholder-canvas { max-height: calc(100svh - 64px - 9.5rem); }
  }

  /* ── 3D TILT ARTWORK CARDS ── */
  .gallery-grid { perspective: 1400px; }
  .artwork-card { transform-style: preserve-3d; will-change: transform; transition: transform 0.08s ease, box-shadow 0.3s; }
  .artwork-card:hover { box-shadow: 0 20px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(201,168,76,0.18); }

  /* ── RUNDGANG-HINWEIS-POPUP ── */
  #rundgang-hint {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 400;
    background: rgba(8,7,6,0.96);
    border: 1px solid rgba(201,168,76,0.35);
    padding: 1.6rem 1.8rem 1.4rem;
    max-width: 300px;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 8px 40px rgba(0,0,0,0.55);
    transform: translateY(20px);
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
  }
  #rundgang-hint.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  #rundgang-hint .rh-icon {
    font-size: 1.6rem;
    margin-bottom: 0.6rem;
    display: block;
  }
  #rundgang-hint .rh-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.05rem;
    font-weight: 400;
    color: var(--gold);
    letter-spacing: 0.06em;
    display: block;
    margin-bottom: 0.45rem;
  }
  #rundgang-hint .rh-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.58rem;
    font-weight: 300;
    color: rgba(232,213,176,0.72);
    letter-spacing: 0.05em;
    line-height: 1.7;
    display: block;
    margin-bottom: 1rem;
  }
  #rundgang-hint .rh-btn {
    display: block;
    width: 100%;
    background: transparent;
    border: 1.5px solid rgba(201,168,76,0.75);
    color: var(--gold);
    font-family: 'Montserrat', sans-serif;
    font-size: max(0.52rem, var(--label-min));
    font-weight: 500;
    letter-spacing: 0.28em;
    padding: 0.65rem 0;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    text-align: center;
  }
  #rundgang-hint .rh-btn:hover {
    background: rgba(201,168,76,0.15);
    border-color: var(--gold);
  }
  #rundgang-hint .rh-close {
    position: absolute;
    top: 0.6rem;
    right: 0.8rem;
    background: none;
    border: none;
    color: rgba(201,168,76,0.75);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
  }
  #rundgang-hint .rh-close:hover { color: var(--gold); }
  @media (max-width: 480px), (max-height: 500px) and (orientation: landscape) {
    /* Handy (auch quer): eine schmale Zeile statt Karte – verdeckt sonst die Kacheln */
    #rundgang-hint { right: 0.75rem; left: 0.75rem; max-width: none; bottom: 0.75rem; padding: 0.55rem 2.2rem 0.55rem 0.9rem;
                     display: flex; align-items: center; gap: 0.8rem; }
    #rundgang-hint .rh-icon, #rundgang-hint .rh-text { display: none; }
    #rundgang-hint .rh-title { font-size: 0.92rem; margin: 0; flex: 1; min-width: 0; line-height: 1.2; }
    #rundgang-hint .rh-btn { width: auto; padding: 0.5rem 0.8rem; letter-spacing: 0.18em; white-space: nowrap; }
    #rundgang-hint .rh-close { top: 50%; transform: translateY(-50%); }
    /* solange die Kategorie-Kacheln zu sehen sind, nichts darüberlegen */
    body.scene-tiles #rundgang-hint { opacity: 0; pointer-events: none; }
  }

  /* ── NAV SWEEP TRANSITION ── */
  #nav-sweep {
    position: fixed; inset: 0;
    background: #0A0A0A;
    z-index: 800; pointer-events: none; opacity: 0;
    overflow: hidden; transition: opacity 0.22s ease;
  }
  #nav-sweep.active { opacity: 1; pointer-events: all; }
  #nav-sweep.out    { opacity: 0; transition: opacity 0.45s ease; }

  .sw { fill: none; stroke-linecap: round; stroke-dasharray: 340 3000; }
  .sw-bright { stroke: rgba(240,210,100,0.92); stroke-width: 0.85; }
  .sw-core   { stroke: rgba(201,168,76,0.78);  stroke-width: 0.72; }
  .sw-mid    { stroke: rgba(201,168,76,0.42);  stroke-width: 0.58; }
  .sw-outer  { stroke: rgba(201,168,76,0.16);  stroke-width: 0.42; }

  #nav-sweep.active .sw {
    animation: sw-fly 0.84s cubic-bezier(0.15,0,0.58,1) forwards;
  }
  #nav-sweep.active .sw:nth-child(odd)  { animation-duration: 0.82s; }
  #nav-sweep.active .sw:nth-child(4n)   { animation-delay: 0.012s; }
  #nav-sweep.active .sw:nth-child(4n+3) { animation-delay: 0.008s; }

  @keyframes sw-fly {
    from { stroke-dashoffset: 1600; opacity: 0; }
    7%   { opacity: 1; }
    87%  { opacity: 1; }
    to   { stroke-dashoffset: -380; opacity: 0; }
  }

  /* ══ Barrierefreiheit: Bewegung reduzieren ══
     Respektiert die System-Einstellung „Bewegung reduzieren" und schaltet
     Animationen/Übergänge weitgehend ab (für bewegungsempfindliche Nutzer). */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

  /* Handy quer mit Desktop-Navigation: Sprachumschalter auf Höhe des Namens, frei vom Merklisten-Herz */
  @media (min-width: 769px) and (max-height: 500px) and (orientation: landscape) {
    #lang-switcher { top: 0.55rem; padding-top: 0.3rem; padding-bottom: 0.3rem; }
    .intro-scene-pin::before { height: 5rem; }   /* weiße Abdeckung unter der Navigation nur so hoch wie die Navigation */
  }

  /* ── Tastatur-Fokus: sichtbarer Goldrahmen (dunkler auf hellem, heller auf dunklem Grund) ── */
  :focus-visible { outline: 2px solid var(--gold-dim); outline-offset: 3px; }
  #hero :focus-visible, .coll-overlay :focus-visible, #socials :focus-visible, #kontakt :focus-visible,
  footer :focus-visible, .legal-overlay :focus-visible, #cal-overlay :focus-visible, #gallery-vr :focus-visible,
  .ausst-card :focus-visible { outline-color: var(--gold); }
  /* Ebenen selbst bekommen beim Öffnen den Fokus (für Screenreader), ohne Rahmen um den ganzen Bildschirm */
  [role="dialog"]:focus, [role="dialog"]:focus-visible { outline: none; }
  .coll-card-title[role="button"] { cursor: pointer; }
  .cal-roller:focus-visible { outline-offset: -2px; }

  /* ── Kontraste nach WCAG AA (mind. 4,5 : 1 für kleine Schrift): Farbtöne nur so weit angepasst wie nötig ── */
  /* helle Flächen: etwas dunkleres Grau bzw. Gold */
  .nav-links a { color: #6E6D66; }
  .nav-links a:hover, .nav-links a.active { color: #806530; }
  .lang-toggle-btn .l-active { color: #806530; }
  #intro .section-label, #galerie .gallery-header .section-label, #ueber-uns .section-label,
  #das-werk .section-label, #ausstellungen .section-label { color: #806530; }
  .ad-meta-line, .ad-detail-label { color: #6E6D66; }
  .ad-story-head { color: #806530; }
  .ad-offer-btn { color: #806530; border-color: #806530; }
  .ad-topbar-title { color: rgba(26,26,26,0.62); }
  .ad-back-btn { color: rgba(26,26,26,0.65); }
  .intro-scroll-hint { color: #806530; }
  .werk-figure figcaption { color: #6E6D66; }
  .lang-toggle-btn { color: #6E6D66; }
  .ad-eyebrow { color: #806530; }
  .kat-subhead, .ausst-year { color: #806530; }
  #kontakt .section-label { color: #9A7B35; }
  /* dunkle Flächen: Gold etwas heller bzw. deckender */
  #socials .section-label, .legal-eyebrow, .legal-body a { color: #9A7B35; }
  .footer-links a { color: rgba(201,168,76,0.7); }
  .footer-copy { color: rgba(201,168,76,0.7); }
  .legal-note { color: rgba(232,224,210,0.6); }
  .coll-card-meta { color: rgba(242,236,222,0.55); }
  .coll-back-btn { color: rgba(201,168,76,0.75); }
  #vr-free-btn { color: rgba(201,168,76,0.75); }
  .cat-tile-count { color: rgba(201,168,76,0.75); }
  .cal-weekdays span { color: rgba(201,168,76,0.75); }
  .cal-confirm { color: rgba(201,168,76,0.75); }
  #ad-rundgang-btn { background: rgba(8,7,6,0.85); }

  /* Kalender: Uhrzeit und Anfrage-Knopf erst nach der Datumswahl bedienbar (vorher unsichtbar, also nicht per Tab) */
  .cal-time-wrap:not(.open), .cal-book-btn:not(.visible) { visibility: hidden; }
  .cal-time-label { color: rgba(201,168,76,0.75); }
  /* Bio-Karussell: Pfeile auch bei Tastaturfokus sichtbar */
  .about-visual:focus-within .bio-nav, .bio-nav:focus-visible { opacity: 1; }

  /* ── BESICHTIGUNG ANFRAGEN: Kopf, Wunschtermine, Angaben ── */
  .cal-box { width: min(28rem, 92vw); }
  .cal-eyebrow { text-align: center; font-size: max(0.5rem, var(--label-min)); letter-spacing: 0.4em; text-transform: uppercase; color: rgba(201,168,76,0.75); margin-bottom: 0.5rem; }
  .cal-title { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: 1.7rem; text-align: center; color: var(--cream); margin: 0 0 0.4rem; }
  .cal-works { text-align: center; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1rem; color: var(--gold-light); margin: 0 0 0.6rem; }
  .cal-steps { display: flex; justify-content: center; gap: 1.6rem; list-style: none; padding: 0; margin: 0.8rem 0 1.4rem; counter-reset: calstep; }
  .cal-steps li { counter-increment: calstep; font-size: max(0.5rem, var(--label-min)); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(250,250,248,0.55); }
  .cal-steps li::before { content: counter(calstep) ' · '; }
  .cal-steps li.on { color: var(--gold); }
  .cal-hint { text-align: center; font-size: max(0.6rem, var(--label-min)); line-height: 1.7; color: rgba(250,250,248,0.72); margin: 0 0 1.1rem; }
  .cal-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin-bottom: 1.4rem; }
  .cal-slot {
    background: transparent; border: 1px solid rgba(201,168,76,0.3); padding: 0.55rem 0.3rem;
    display: flex; flex-direction: column; align-items: center; gap: 0.3rem; cursor: pointer;
    font-family: 'Montserrat', sans-serif; transition: border-color 0.2s, background 0.2s;
  }
  .cal-slot-n { font-size: max(0.56rem, var(--label-min)); letter-spacing: 0.2em; text-transform: uppercase; color: rgba(201,168,76,0.8); }
  .cal-slot-v { font-size: max(0.6rem, var(--label-min)); color: rgba(250,250,248,0.6); text-align: center; line-height: 1.35; }   /* darf umbrechen: passt auch bei 320 px */
  .cal-slot.filled .cal-slot-v { color: var(--cream); }
  .cal-slot.active { border-color: var(--gold); background: rgba(201,168,76,0.12); }
  .cal-slot.active .cal-slot-n { color: var(--gold); }
  /* gewählte Tage tragen ihre Rangziffer */
  .cal-day { position: relative; }
  .cal-day.cal-chosen { border-color: rgba(201,168,76,0.55); color: var(--gold); }
  .cal-day.cal-chosen::after {
    content: attr(data-rank); position: absolute; top: 0.12rem; right: 0.22rem;
    font-size: 0.5rem; line-height: 1; color: var(--gold);
  }
  .cal-nav:disabled { opacity: 0.25; cursor: default; }
  .cal-slot-clear {
    display: block; margin: 0.4rem auto 0; background: none; border: none; cursor: pointer;
    font-family: 'Montserrat', sans-serif; font-size: max(0.52rem, var(--label-min)); letter-spacing: 0.14em;
    color: rgba(250,250,248,0.65); text-decoration: underline; text-underline-offset: 0.25em;
  }
  .cal-slot-clear:not(.visible) { display: none; }
  .cal-summary { list-style: none; padding: 0; margin: 0 0 1.6rem; border-top: 1px solid rgba(201,168,76,0.18); }
  .cal-summary li { padding: 0.65rem 0; border-bottom: 1px solid rgba(201,168,76,0.18); font-family: 'Cormorant Garamond', serif; font-size: 1.02rem; color: var(--cream); }
  .cal-summary-rank { display: block; margin-bottom: 0.2rem; font-family: 'Montserrat', sans-serif; font-size: max(0.5rem, var(--label-min)); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
  .cal-field { margin-bottom: 1rem; }
  .cal-field label { display: block; margin-bottom: 0.4rem; font-size: max(0.55rem, var(--label-min)); letter-spacing: 0.14em; color: rgba(201,168,76,0.85); }
  .cal-field input, .cal-field textarea {
    width: 100%; box-sizing: border-box; padding: 0.65rem 0.75rem;
    background: rgba(250,250,248,0.04); border: 1px solid rgba(201,168,76,0.35); border-radius: 0;
    color: var(--cream); font-family: 'Montserrat', sans-serif; font-size: 16px;   /* 16 px: iPhone zoomt beim Tippen nicht hinein */
  }
  .cal-field textarea { resize: vertical; min-height: 4.5rem; }
  .cal-field input:focus, .cal-field textarea:focus { border-color: var(--gold); }
  .cal-field input[aria-invalid="true"] { border-color: #E07A6A; }
  .cal-error { min-height: 1.1rem; margin: 0 0 0.4rem; font-size: max(0.6rem, var(--label-min)); color: #F0A090; }
  .cal-note { font-size: max(0.56rem, var(--label-min)); line-height: 1.7; color: rgba(250,250,248,0.65); margin: 0 0 0.6rem; }
  .cal-actions { display: flex; gap: 0.8rem; align-items: stretch; }
  .cal-actions .cal-book-btn { margin-top: 0; flex: 1; }
  .cal-back-btn {
    background: transparent; border: 1px solid rgba(250,250,248,0.25); color: rgba(250,250,248,0.75);
    font-family: 'Montserrat', sans-serif; font-size: max(0.55rem, var(--label-min)); letter-spacing: 0.22em;
    text-transform: uppercase; padding: 0.85rem 1.1rem; cursor: pointer;
  }
  /* Merkliste: alle gemerkten Werke auf einmal anfragen */
  .fav-request-wrap { text-align: center; margin-top: 2.5rem; }
  .fav-request-btn {
    background: transparent; border: 1px solid rgba(201,168,76,0.6); color: var(--gold);
    font-family: 'Montserrat', sans-serif; font-size: max(0.58rem, var(--label-min)); letter-spacing: 0.24em;
    text-transform: uppercase; padding: 0.95rem 1.8rem; cursor: pointer; transition: background 0.25s;
  }
  .fav-request-btn:hover { background: rgba(201,168,76,0.12); }
  .fav-request-btn[hidden] { display: none; }

  /* ── BESUCHER-ASSISTENT (keine KI) ── */
  #assist-toggle {
    position: fixed; z-index: 410;
    right: calc(1.4rem + env(safe-area-inset-right, 0px));
    bottom: calc(1.4rem + env(safe-area-inset-bottom, 0px) + var(--assist-lift, 0px));
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.7rem 1.05rem; background: rgba(12,11,9,0.94); color: var(--gold);
    border: 1px solid rgba(201,168,76,0.55); cursor: pointer;
    font-family: 'Montserrat', sans-serif; font-size: max(0.56rem, var(--label-min)); letter-spacing: 0.22em; text-transform: uppercase;
    box-shadow: 0 0.6rem 1.6rem rgba(0,0,0,0.25);
    transition: bottom 0.3s ease, background 0.25s, border-color 0.25s;
  }
  #assist-toggle:hover { background: #1a1813; border-color: var(--gold); }
  #assist-toggle[aria-expanded="true"] { border-color: var(--gold); }
  /* Ebenen (Kollektion, Werkansicht, Rundgang, Kalender, Rechtstexte) nicht verdecken */
  /* offene Ebene (Kollektion, Werk, Termin, Rechtstexte, Rundgang, Film, Großansicht): Klasse setzt app.js (BARRIEREFREIHEIT),
     statt :has() – funktioniert so auch in älteren Browsern */
  html.ebene-offen #assist-toggle, html.ebene-offen #assist-panel { display: none; }

  #assist-panel {
    position: fixed; z-index: 420;
    right: calc(1.4rem + env(safe-area-inset-right, 0px));
    bottom: calc(4.9rem + env(safe-area-inset-bottom, 0px) + var(--assist-lift, 0px));
    width: min(23.5rem, calc(100vw - 2rem)); max-height: min(38rem, calc(100svh - 8rem));
    display: flex; flex-direction: column;
    background: #100f0d; border: 1px solid rgba(201,168,76,0.4); color: var(--cream);
    box-shadow: 0 1.2rem 3rem rgba(0,0,0,0.45);
    font-family: 'Montserrat', sans-serif;
  }
  #assist-panel[hidden] { display: none; }
  .as-head { display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 1.1rem; border-bottom: 1px solid rgba(201,168,76,0.22); }
  .as-title { margin: 0; font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; color: var(--gold-light); }
  .as-close { background: none; border: none; color: rgba(201,168,76,0.8); font-size: 1rem; cursor: pointer; padding: 0.3rem 0.4rem; }
  .as-close:hover { color: var(--gold); }
  .as-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0.9rem 1.1rem 0.4rem; }
  .as-note { margin: 0 0 0.9rem; padding: 0.55rem 0.7rem; border: 1px solid rgba(201,168,76,0.25);
    font-size: max(0.62rem, var(--label-min)); line-height: 1.6; color: rgba(242,236,222,0.78); }
  .as-msg { margin: 0 0 0.75rem; font-size: max(0.66rem, var(--label-min)); line-height: 1.7; }
  .as-msg p { margin: 0 0 0.45rem; }
  .as-msg p:last-child { margin-bottom: 0; }
  .as-bot { color: rgba(242,236,222,0.92); }
  .as-user { margin-left: 2.2rem; padding: 0.5rem 0.75rem; background: rgba(201,168,76,0.12); border: 1px solid rgba(201,168,76,0.25);
    color: var(--cream); white-space: pre-wrap; overflow-wrap: anywhere; }
  .as-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.9rem; }
  .as-btn {
    display: inline-block; text-align: left; padding: 0.48rem 0.7rem; cursor: pointer; text-decoration: none;
    background: transparent; border: 1px solid rgba(201,168,76,0.45); color: var(--gold-light);
    font-family: 'Montserrat', sans-serif; font-size: max(0.6rem, var(--label-min)); line-height: 1.4;
  }
  .as-btn:hover { background: rgba(201,168,76,0.12); border-color: var(--gold); }
  .as-btn.as-act, .as-btn.as-mail { border-color: var(--gold); color: var(--gold); }
  .as-btn.as-nav { border-color: rgba(242,236,222,0.3); color: rgba(242,236,222,0.8); }
  .as-input { display: flex; gap: 0.4rem; padding: 0.7rem 1.1rem 0.9rem; border-top: 1px solid rgba(201,168,76,0.22); }
  .as-input[hidden] { display: none; }
  .as-input input {
    flex: 1; min-width: 0; padding: 0.55rem 0.65rem; background: rgba(250,250,248,0.04);
    border: 1px solid rgba(201,168,76,0.35); color: var(--cream); font-family: 'Montserrat', sans-serif; font-size: 16px;
  }
  .as-input input::placeholder { color: rgba(242,236,222,0.55); }
  .as-send { padding: 0 0.9rem; background: transparent; border: 1px solid var(--gold); color: var(--gold); cursor: pointer;
    font-family: 'Montserrat', sans-serif; font-size: max(0.56rem, var(--label-min)); letter-spacing: 0.16em; text-transform: uppercase; }
  .as-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  #assist-panel :focus-visible, #assist-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  @media (max-width: 600px) {
    #assist-toggle { padding: 0.65rem 0.75rem; }
    .assist-toggle-text { display: none; }
    #assist-panel { left: calc(0.6rem + env(safe-area-inset-left, 0px)); right: calc(0.6rem + env(safe-area-inset-right, 0px)); width: auto;
      bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px)); max-height: 80svh; }
    body.assist-open #assist-toggle { display: none; }
    /* solange die Kategorie-Kacheln zu sehen sind, nichts darüberlegen */
    body.scene-tiles #assist-toggle { opacity: 0; pointer-events: none; }
    .as-note { font-size: 0.7rem; }
    footer { padding-bottom: calc(2.5rem + 4.2rem + env(safe-area-inset-bottom, 0px)); }   /* Seitenende lässt sich über den Knopf hinaus scrollen */
  }
  #assist-toggle.is-loading { cursor: progress; animation: assistPulse 1s ease-in-out infinite; }
  @keyframes assistPulse { 50% { opacity: 0.55; } }
  @media (prefers-reduced-motion: reduce) { #assist-toggle { transition: none; } }

  /* ── FILM: Trailer der Galerie (lädt erst beim Abspielen) ── */
  .film-band {
    background: var(--black); text-align: center;
    padding: 6.5rem max(3rem, calc((100% - 62rem) / 2)) 1.5rem;
    border-top: 1px solid rgba(201,168,76,0.45);   /* feine Goldkante am Übergang von hell zu dunkel */
  }
  .film-band .section-label { color: #9A7B35; }
  .film-band h2 { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: 2.4rem; color: var(--white); margin: 0 0 2.6rem; }
  .film-frame { margin: 0; }
  .film-stage { position: relative; aspect-ratio: 16 / 9; background: #000; border: 1px solid rgba(201,168,76,0.45); box-shadow: 0 1.4rem 3rem rgba(0,0,0,0.35); }
  .film-stage video, .film-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
  .film-poster { position: absolute; inset: 0; padding: 0; border: 0; background: #000; cursor: pointer; }
  .film-play-icon {
    position: absolute; left: 1.6rem; bottom: 1.6rem; width: 4.6rem; height: 4.6rem; box-sizing: border-box; padding-left: 0.25rem;
    display: flex; align-items: center; justify-content: center; border-radius: 50%;
    border: 1px solid var(--gold); background: rgba(10,9,8,0.55); color: var(--gold); transition: background 0.25s ease;
  }
  .film-poster:hover .film-play-icon, .film-poster:focus-visible .film-play-icon { background: rgba(201,168,76,0.2); }
  .film-cap { display: flex; justify-content: space-between; margin-top: 0.9rem; font-size: max(0.56rem, var(--label-min)); letter-spacing: 0.3em; text-transform: uppercase; color: rgba(201,168,76,0.85); }
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  #film-overlay {
    position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
    background: rgba(5,4,3,0.94); opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.35s ease, visibility 0s linear 0.35s;
  }
  #film-overlay.active { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.35s ease, visibility 0s; }
  .film-overlay-stage { position: relative; width: min(92vw, calc(82vh * 16 / 9)); aspect-ratio: 16 / 9; }
  .film-overlay-stage video { width: 100%; height: 100%; display: block; background: #000; }
  .film-close {
    position: absolute; top: calc(1.2rem + env(safe-area-inset-top, 0px)); right: calc(1.4rem + env(safe-area-inset-right, 0px));
    background: none; border: 1px solid rgba(201,168,76,0.45); color: var(--gold); cursor: pointer; padding: 0.6rem 1rem;
    font-family: 'Montserrat', sans-serif; font-size: max(0.56rem, var(--label-min)); letter-spacing: 0.25em; text-transform: uppercase;
  }
  .film-close:hover { border-color: var(--gold); }
  @media (max-width: 768px) {
    .hero-links { justify-content: center; margin-top: 0.9rem; gap: 0.7rem 1.4rem; }
    .film-band { padding: 4.5rem 1.5rem 1rem; }
    .film-band h2 { font-size: 1.8rem; margin-bottom: 2rem; }
    .film-play-icon { width: 3.6rem; height: 3.6rem; left: 1rem; bottom: 1rem; }
  }
  @media (max-height: 500px) and (orientation: landscape) { .hero-links { justify-content: flex-start; margin-top: 0.8rem; } }
  @media (prefers-reduced-motion: reduce) { #film-overlay { transition: none; } }

  /* ── GROSSANSICHT: Willkommen-Foto und Werke bildschirmfüllend, mit Zoom ── */
  .intro-foto-bild { cursor: zoom-in; }
  /* kleiner Hinweis in der offenen Stufe rechts oben (16 % × 20 % der Bildfläche) */
  .intro-lupe {
    position: absolute; right: 0; top: 0; width: 16%; height: 19.92%;
    display: flex; align-items: center; justify-content: center; gap: 0.45rem;
    color: #806530; font-size: max(0.5rem, var(--label-min)); letter-spacing: 0.22em; text-transform: uppercase;
    transition: color 0.25s;
    background: none; border: none; padding: 0; margin: 0; font-family: inherit; cursor: zoom-in;   /* Knopf ohne Browser-Optik */
  }
  .intro-foto-bild:hover .intro-lupe, .intro-lupe:focus-visible { color: #6b5427; }   /* dunkler statt heller: 6,6 : 1 */
  .intro-lupe:focus-visible { outline: 1px solid #806530; outline-offset: -0.4rem; }
  .intro-lupe svg { flex: none; }   /* Symbol nicht vom Text zusammendrücken lassen */
  /* Die Stufe wächst mit Fensterbreite UND -höhe – Symbol über dem Text, Schrift folgt der Knopfbreite (cqw),
     zu schmal für lesbare Schrift: nur das Symbol. Ohne Container-Abfragen (ältere Browser) bleibt 1em. */
  .intro-lupe { flex-direction: column; gap: 0.35rem; letter-spacing: 0.16em; container-type: size; }
  .intro-lupe-text { font-size: min(1em, 8.8cqw); white-space: nowrap; }
  @container (max-width: 100px) { .intro-lupe-text { display: none; } }
  @media (max-width: 900px) { .intro-lupe-text { display: none; } }
  #bild-gross .film-close, .bild-gross-leiste { z-index: 2; }   /* über der Bühne, sonst fängt sie die Klicks ab */
  #bild-gross .film-close { background: rgba(10,9,8,0.85); }   /* auch über Weiß ≥ 4,5 : 1 */
  #bild-gross {
    position: fixed; inset: 0; z-index: 1100;
    background: #070605;   /* deckend: darunterliegende Seite soll nicht durchschimmern */ opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  }
  #bild-gross.active { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.3s ease, visibility 0s; }
  .bild-gross-buehne {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    overflow: hidden; touch-action: none; cursor: zoom-in;
  }
  #bild-gross.gezoomt .bild-gross-buehne { cursor: grab; }
  #bild-gross.ziehen .bild-gross-buehne { cursor: grabbing; }
  .bild-gross-inhalt { position: relative; transform-origin: center center; will-change: transform; }
  .bild-gross-inhalt > img { display: block; max-width: 94vw; max-height: calc(100svh - 9rem); user-select: none; -webkit-user-drag: none; }
  .bild-gross-inhalt.ist-collage { width: min(94vw, calc((100svh - 9rem) * 1.4341)); aspect-ratio: 3700 / 2580; }
  .bild-gross-inhalt .intro-collage img { user-select: none; -webkit-user-drag: none; }
  .bild-gross-leiste {
    position: absolute; left: 1rem; right: 1rem; bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px));
    display: flex; align-items: center; justify-content: center; gap: 0.8rem; pointer-events: none;
  }
  .bild-gross-leiste > * { pointer-events: auto; }
  .bild-gross-zoom {
    width: 2.4rem; height: 2.4rem; flex: none; border-radius: 50%; cursor: pointer;
    border: 1px solid rgba(201,168,76,0.75); background: rgba(10,9,8,0.6); color: var(--gold); font-size: 1.1rem; line-height: 1;
  }
  .bild-gross-zoom:hover, .bild-gross-zoom:focus-visible { border-color: var(--gold); background: rgba(201,168,76,0.15); }
  .bild-gross-hinweis {
    font-size: max(0.5rem, var(--label-min)); letter-spacing: 0.18em; color: rgba(201,168,76,0.9); text-align: center;
    background: rgba(10,9,8,0.7); padding: 0.45rem 0.9rem; border-radius: 1.2rem;
  }
  @media (prefers-reduced-motion: reduce) { #bild-gross { transition: none; } }

  /* Startseite: nur „Werke entdecken“ und „Film ansehen“ – der Assistent erscheint erst nach dem Betreten der Galerie */
  html:not(.gallery-entered) #assist-toggle, html:not(.gallery-entered) #assist-panel { display: none; }

  /* ── Sprunglink „Zum Inhalt springen“: nur bei Tastaturfokus sichtbar ── */
  .skip-link {
    position: fixed; left: 1rem; top: 1rem; z-index: 10000;
    padding: 0.8rem 1.2rem; background: #0a0908; color: var(--gold); border: 1px solid var(--gold);
    font-size: max(0.62rem, var(--label-min)); letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none;
    transform: translateY(-200%); transition: transform 0.2s;
  }
  .skip-link:focus { transform: none; }
  main:focus { outline: none; }

  /* ── Leben-Karussell: Pause-Knopf (Tipp-Fläche 44 px, sichtbarer Kreis kleiner) ── */
  .bio-pause {
    position: absolute; left: 0.5rem; bottom: 0.35rem; z-index: 7;
    width: 2.75rem; height: 2.75rem; padding: 0; border: none; background: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
  }
  .bio-pause-icon {
    width: 1.75rem; height: 1.75rem; border-radius: 50%; position: relative;
    background: rgba(10,9,8,0.6); border: 1px solid rgba(201,168,76,0.6);
  }
  .bio-pause-icon::before, .bio-pause-icon::after {   /* zwei Balken = Pause */
    content: ''; position: absolute; top: 50%; width: 2px; height: 0.6rem; background: var(--gold); transform: translateY(-50%);
  }
  .bio-pause-icon::before { left: calc(50% - 4px); }
  .bio-pause-icon::after  { left: calc(50% + 2px); }
  .bio-pause.is-paused .bio-pause-icon::before {      /* Dreieck = Abspielen */
    left: calc(50% - 2px); width: 0; height: 0; background: none;
    border-left: 0.5rem solid var(--gold); border-top: 0.3rem solid transparent; border-bottom: 0.3rem solid transparent;
  }
  .bio-pause.is-paused .bio-pause-icon::after { display: none; }
  .bio-pause:hover .bio-pause-icon, .bio-pause:focus-visible .bio-pause-icon { background: rgba(201,168,76,0.25); border-color: var(--gold); }

  /* ── Touch: Tipp-Flächen mindestens 44 × 44 px, ohne die Optik zu ändern (unsichtbares ::before) ── */
  @media (pointer: coarse) {
    .nav-links a, .footer-links a, .lang-toggle-btn, .hero-film, #rundgang-hint .rh-btn, .bio-dot { position: relative; }
    .nav-links a::before, .footer-links a::before, .lang-toggle-btn::before, .hero-film::before,
    #rundgang-hint .rh-btn::before, #rundgang-hint .rh-close::before, .tooltip-wrap::before {
      content: ''; position: absolute; left: 50%; top: 50%;
      width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%);
    }
    /* Karussell-Punkte: Abstand größer, Trefferfläche 24 px, damit benachbarte Punkte nicht überlappen */
    .bio-dots { gap: 1.1rem; }
    .bio-dot::before { content: ''; position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; transform: translate(-50%, -50%); }
    #assist-toggle { min-height: 44px; }
    .bild-gross-zoom { width: 2.75rem; height: 2.75rem; min-width: 44px; min-height: 44px; }
  }
  /* Handy: die Navigation scrollt waagerecht und schneidet dabei auch senkrecht ab – Innenabstand größer,
     per negativem Außenabstand ausgeglichen, damit die Trefferflächen der Links Platz haben (Optik unverändert) */
  @media (pointer: coarse) and (max-width: 768px) {
    .nav-links { padding-top: 1.2rem; padding-bottom: 1.2rem; margin-top: -0.7rem; margin-bottom: -0.9rem; }
  }

  .cal-note-ds { margin-top: 0.3rem; }
  .cal-note-ds a { color: var(--gold); text-decoration: underline; text-underline-offset: 0.2em; }   /* Dialog ist dunkel (#100f0d) */

  /* Werkansicht ohne Foto (Platzhalter): keine Großansicht – Hinweis und Lupen-Zeiger weg */
  #artwork-detail.ohne-bild #ad-zoom-hint { display: none; }
  #artwork-detail.ohne-bild #ad-img-inner { cursor: default !important; }
  #ad-img-inner:focus-visible { outline: 1px solid var(--gold); outline-offset: -0.6rem; }
  @media (max-width: 768px) {
    #ad-zoom-hint { bottom: 3.4rem !important; }        /* über dem Knopf „Im Rundgang entdecken“ statt darunter */
    #ad-img-inner { padding-bottom: 5rem !important; }
  }