/* ===========================================================================
   chevalier.css - laguiole-chevalier.de
   Galerie der Eigenmarke Chevalier Laguiole. Kein Shop, kein Warenkorb.
   Grundlage: Entwurf 4 "Bühne mit Noir".
   Aufbau: 1 Grundlagen, 2 Kopf, 3 Auftakt, 4 Textbloecke, 5 Szenen,
           6 Schiene, 7 Raster, 8 Kino, 9 Abgang, 10 Fuss, 11 Bewegung
   =========================================================================== */

/* ── 1 Grundlagen ────────────────────────────────────────────────────────── */
:root{
  --nacht:#0a0a0c; --wolke:#111116; --tiefer:#08080a;
  --text:#f0eee9; --leise:#b8b4ac; --grau:#8d8981;
  --akzent:#c8a45c; --goldhell:#e6cf9a; --ak:#c8a45c;
  --linie:rgba(240,238,233,.14);
  --display:'Bodoni Moda',Didot,'Playfair Display',Georgia,serif;
  --sans:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,sans-serif;
  --breit:1500px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--nacht);color:var(--text);font-family:var(--sans);font-weight:300;
     font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--goldhell);outline-offset:3px}
.nur-vorleser{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--breit);margin:0 auto;padding:0 20px}
@media(min-width:960px){.wrap{padding:0 44px}}

/* ── 2 Kopf ──────────────────────────────────────────────────────────────── */
.faden{position:fixed;top:0;left:0;height:2px;width:0;z-index:99;
      background:linear-gradient(90deg,var(--akzent),#fff);transition:width .12s linear}
.kopf{position:fixed;top:0;left:0;right:0;z-index:90;display:flex;align-items:center;
      justify-content:space-between;padding:18px 20px;transition:background .4s,padding .4s}
/* Ueber einem Bild braucht die Kopfleiste einen eigenen Grund. Frueher stand
   hier mix-blend-mode:difference. Das funktionierte fuer gesetzte Schrift, das
   Logo als Bild wurde darunter aber unleserlich. Ein weicher Verlauf traegt
   beides und sieht ruhiger aus. */
.kopf.hell{background:linear-gradient(to bottom,rgba(10,10,12,.86),rgba(10,10,12,.5) 58%,transparent);
      text-shadow:0 1px 14px rgba(10,10,12,.75)}
.kopf.hell .marke img{filter:drop-shadow(0 1px 10px rgba(10,10,12,.8))}
.kopf.fest{background:rgba(10,10,12,.94);backdrop-filter:blur(14px);
      border-bottom:1px solid var(--linie);padding:12px 20px;text-shadow:none}
.kopf.fest .marke img{filter:none}
.marke{font-family:var(--display);font-size:15px;letter-spacing:.2em;text-transform:uppercase;
      white-space:nowrap}
.nav{display:none;gap:24px;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.nav a{opacity:.74;transition:opacity .3s;padding:4px 0}
.nav a:hover,.nav a[aria-current]{opacity:1}
.nav a[aria-current]{box-shadow:inset 0 -1px 0 var(--akzent)}
.nav .zuol{color:var(--goldhell);opacity:1}
.brenner{display:flex;flex-direction:column;gap:6px;padding:8px;margin:-8px}
.brenner i{display:block;width:26px;height:1.5px;background:currentColor;transition:.3s}
.brenner[aria-expanded="true"] i:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.brenner[aria-expanded="true"] i:nth-child(2){opacity:0}
.brenner[aria-expanded="true"] i:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
@media(min-width:960px){.nav{display:flex}.brenner{display:none}.kopf{padding:24px 44px}.kopf.fest{padding:14px 44px}}

.klappe{position:fixed;inset:0;z-index:89;background:rgba(8,8,10,.985);
      display:flex;flex-direction:column;justify-content:center;gap:4px;padding:16vh 26px 8vh;
      overflow-y:auto;-webkit-overflow-scrolling:touch;
      transform:translateY(-100%);transition:transform .5s cubic-bezier(.3,.8,.3,1);visibility:hidden}
.klappe.auf{transform:none;visibility:visible}
.klappe a{font-family:var(--display);font-size:clamp(1.45rem,6.6vw,2.2rem);font-weight:400;
      padding:12px 0;border-bottom:1px solid var(--linie);flex:0 0 auto}
.klappe a:last-child{color:var(--goldhell)}

/* ── 3 Auftakt ───────────────────────────────────────────────────────────── */
.auftakt{position:relative;height:100svh;min-height:560px;display:grid;place-items:center;overflow:hidden}
.auftakt .grund{position:absolute;inset:0}
.auftakt .grund img{width:100%;height:100%;object-fit:cover;opacity:.55;transform:scale(1.1);will-change:transform}
.auftakt::after{content:'';position:absolute;inset:0;
      background:radial-gradient(ellipse at 50% 40%,transparent 10%,rgba(10,10,12,.86) 78%)}
.auftakt-text{position:relative;z-index:3;text-align:center;padding:0 20px;width:100%}
.riesig{font-family:var(--display);font-weight:400;font-size:clamp(3.2rem,16vw,14rem);
      line-height:.82;letter-spacing:-.03em;text-transform:uppercase}
.riesig span{display:block}
.riesig .zwei{font-style:italic;letter-spacing:0;
      background:linear-gradient(92deg,var(--akzent),#f3e6c6 55%,var(--akzent));
      -webkit-background-clip:text;background-clip:text;color:transparent}
.unterzeile{margin-top:32px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;
      font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--grau)}
.tickerbahn{position:absolute;bottom:0;left:0;right:0;z-index:4;overflow:hidden;
      border-top:1px solid rgba(255,255,255,.1);padding:14px 0}
.ticker{display:flex;gap:56px;white-space:nowrap;animation:laufen 38s linear infinite;
      font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--grau)}
@keyframes laufen{to{transform:translateX(-50%)}}
.ticker b{color:var(--akzent);font-weight:400}

/* Kleiner Auftakt fuer Unterseiten */
.kopfband{position:relative;min-height:66svh;display:flex;align-items:flex-end;overflow:hidden;
      padding:16vh 0 7vh}
.kopfband .grund{position:absolute;inset:0}
.kopfband .grund img{width:100%;height:100%;object-fit:cover;opacity:.42}
.kopfband::after{content:'';position:absolute;inset:0;
      background:linear-gradient(to bottom,rgba(10,10,12,.72),rgba(10,10,12,.22) 46%,rgba(10,10,12,.97))}
.kopfband .wrap{position:relative;z-index:3}
.krume{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--grau);margin-bottom:20px}
.krume a:hover{color:var(--goldhell)}
.kopfband h1{font-family:var(--display);font-weight:400;font-size:clamp(2.3rem,8vw,6rem);
      line-height:.98;letter-spacing:-.02em;text-transform:uppercase}
.kopfband h1 i{font-style:italic;text-transform:none;color:var(--ak)}
.kopfband .anriss{margin-top:26px;max-width:56ch;font-size:15.5px;line-height:1.95;color:var(--leise)}

/* ── 4 Textbloecke ───────────────────────────────────────────────────────── */
.manifest{padding:16vh 22px;max-width:900px;margin:0 auto;text-align:center;position:relative}
.manifest::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
      width:1px;height:8vh;background:linear-gradient(var(--akzent),transparent);opacity:.55}
.manifest p{font-family:var(--display);font-size:clamp(1.2rem,3.3vw,2.15rem);line-height:1.66;
      font-weight:400;color:#e2dfd8}
.manifest p+p{margin-top:1.05em}
.manifest .gold{color:var(--goldhell);font-style:italic}
.strich{width:52px;height:1px;background:var(--akzent);margin:46px auto;opacity:.6}

.fliess{max-width:74ch;margin:0 auto;padding:2vh 0 4vh}
.fliess h2{font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,4vw,2.4rem);
      line-height:1.16;margin:9vh 0 .7em;letter-spacing:-.01em}
.fliess h2:first-child{margin-top:0}
.fliess h3{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--akzent);
      margin:5vh 0 1em;font-weight:500}
.fliess p{font-size:16px;line-height:2;color:var(--leise);margin-bottom:1.3em}
.fliess p strong{color:var(--text);font-weight:400}
.fliess a:not(.knopf){color:var(--goldhell);box-shadow:inset 0 -1px 0 rgba(200,164,92,.4)}
.fliess a:not(.knopf):hover{box-shadow:inset 0 -1px 0 var(--akzent)}
.fliess ul{margin:0 0 1.6em 1.1em;color:var(--leise)}
.fliess li{margin-bottom:.7em;line-height:1.9}
.fliess li::marker{color:var(--akzent)}
.merksatz{border-left:1px solid var(--akzent);padding:6px 0 6px 26px;margin:5vh 0;
      font-family:var(--display);font-size:clamp(1.15rem,2.8vw,1.6rem);line-height:1.55;color:#e2dfd8}

/* ── 5 Szenen ────────────────────────────────────────────────────────────── */
.szene{position:relative;min-height:100svh;display:flex;align-items:center;
      padding:14vh 20px 12vh;overflow:hidden}
.szene .gross{position:absolute;inset:0}
.szene .gross img{width:100%;height:100%;object-fit:cover;opacity:.4}
.szene::after{content:'';position:absolute;inset:0;
      background:linear-gradient(105deg,rgba(10,10,12,.94) 0%,rgba(10,10,12,.62) 52%,rgba(10,10,12,.9) 100%)}
.szene-innen{position:relative;z-index:3;width:100%;max-width:var(--breit);margin:0 auto;display:grid;gap:34px}
@media(min-width:1000px){.szene-innen{grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}}
.nummer{font-family:var(--display);font-size:clamp(3.6rem,12vw,10rem);line-height:.8;
      color:transparent;-webkit-text-stroke:1px rgba(240,238,233,.22);display:block}
.szene h2{font-family:var(--display);font-weight:400;font-size:clamp(2.1rem,7vw,5rem);
      line-height:.98;letter-spacing:-.02em;margin:.1em 0 .34em;text-transform:uppercase}
.szene h2 i{font-style:italic;text-transform:none;color:var(--ak)}
.szene p{font-size:15px;line-height:1.95;color:var(--leise);max-width:46ch}
.merkmale{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px}
.merkmale span,.merkmale a{border:1px solid rgba(240,238,233,.2);padding:8px 15px;font-size:10px;
      letter-spacing:.18em;text-transform:uppercase;color:#a5a099;transition:.3s}
.merkmale a:hover{border-color:var(--ak);color:var(--text)}
.mehr{display:inline-flex;align-items:center;gap:14px;margin-top:34px;font-size:11px;
      letter-spacing:.26em;text-transform:uppercase;color:var(--ak);transition:gap .35s}
.mehr:hover{gap:24px}
.stapel{position:relative;padding-bottom:16%}
.stapel .a{width:88%;border:1px solid rgba(255,255,255,.12);box-shadow:0 40px 90px rgba(0,0,0,.65)}
.stapel .b{position:absolute;right:0;bottom:0;width:52%;border:1px solid rgba(255,255,255,.18);
      box-shadow:0 30px 70px rgba(0,0,0,.75)}
.stapel img{width:100%;aspect-ratio:16/9;object-fit:cover}

/* ── 6 Schiene ───────────────────────────────────────────────────────────── */
.schiene{padding:13vh 0 11vh;background:var(--wolke)}
.kap-links{max-width:var(--breit);margin:0 auto 44px;padding:0 20px;display:flex;
      justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap}
@media(min-width:960px){.kap-links{padding:0 44px}}
.kap-links h2{font-family:var(--display);font-weight:400;font-size:clamp(1.7rem,4.6vw,3rem);
      text-transform:uppercase;letter-spacing:-.01em}
.hinweis{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--grau)}
.bahn{display:flex;gap:18px;overflow-x:auto;padding:0 20px 22px;scroll-snap-type:x mandatory;
      scrollbar-width:none;cursor:grab;-webkit-overflow-scrolling:touch}
@media(min-width:960px){.bahn{padding:0 44px 22px}}
.bahn::-webkit-scrollbar{display:none}
.bahn.zieht{cursor:grabbing}
.bahn.zieht *{pointer-events:none}
.karte{flex:0 0 78%;max-width:520px;scroll-snap-align:center}
@media(min-width:760px){.karte{flex:0 0 40%}}
@media(min-width:1200px){.karte{flex:0 0 28%}}
.karte .rahmen{overflow:hidden}
.karte img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .7s}
.karte:hover img{transform:scale(1.04)}
.karte h3{font-family:var(--display);font-size:1.3rem;font-weight:400;margin-top:15px;line-height:1.25}
.karte small{display:block;margin-top:7px;font-size:10px;letter-spacing:.22em;
      text-transform:uppercase;color:var(--grau)}

/* ── 7 Raster ────────────────────────────────────────────────────────────── */
.kap{text-align:center;margin-bottom:7vh}
.kap span{font-size:10px;letter-spacing:.5em;text-transform:uppercase;color:var(--akzent)}
.kap h2{font-family:var(--display);font-weight:400;font-size:clamp(1.9rem,5.6vw,3.6rem);
      margin-top:15px;text-transform:uppercase;letter-spacing:-.015em}
.kap p{max-width:60ch;margin:22px auto 0;color:var(--leise);font-size:15px;line-height:1.95}

/* Werkwand: grosse und kleine Kacheln im Wechsel */
.wand{padding:13vh 0}
.mosaik{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media(min-width:820px){.mosaik{grid-template-columns:repeat(6,1fr);gap:16px}}
.kachel{position:relative;overflow:hidden;background:var(--wolke);display:block}
.kachel img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/9;
      transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.kachel:hover img{transform:scale(1.06)}
.kachel figcaption{position:absolute;inset:auto 0 0 0;padding:16px;
      background:linear-gradient(transparent,rgba(10,10,12,.94));font-size:11px;
      letter-spacing:.12em;text-transform:uppercase;opacity:0;transform:translateY(10px);transition:.45s}
.kachel figcaption b{display:block;color:var(--goldhell);font-weight:400;margin-bottom:4px;
      text-transform:none;letter-spacing:.02em;font-size:13px}
.kachel:hover figcaption,.kachel:focus-visible figcaption{opacity:1;transform:none}
@media(min-width:820px){
  .k-gross{grid-column:span 4;grid-row:span 2}
  .k-gross img{height:100%}
  .k-halb{grid-column:span 2}
  .k-breit{grid-column:span 3}
}

/* Werkraster einer Edition: gleichmaessig, damit die Messer zaehlen */
.werke{display:grid;gap:26px 20px;grid-template-columns:1fr;padding:2vh 0 4vh}
@media(min-width:640px){.werke{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.werke{grid-template-columns:repeat(3,1fr);gap:44px 26px}}
.werk{display:block}
.werk .rahmen{overflow:hidden;background:var(--wolke)}
.werk img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .8s}
.werk:hover img{transform:scale(1.04)}
.werk h3{font-family:var(--display);font-weight:400;font-size:1.12rem;line-height:1.4;margin-top:16px}
.werk .zeile{margin-top:9px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--grau)}
.werk p{margin-top:10px;font-size:13.5px;line-height:1.8;color:var(--grau)}
.werk .rahmen{position:relative}
.unikat{position:absolute;top:12px;left:12px;font-size:9px;letter-spacing:.26em;text-transform:uppercase;
      padding:6px 11px;background:rgba(10,10,12,.72);border:1px solid rgba(200,164,92,.55);
      color:var(--goldhell);backdrop-filter:blur(4px)}

/* Raumliste: alle Editionen als Kacheln */
.raeume{display:grid;gap:18px;grid-template-columns:1fr;padding:2vh 0}
@media(min-width:620px){.raeume{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.raeume{grid-template-columns:repeat(3,1fr);gap:26px}}
.raum{position:relative;display:block;overflow:hidden;background:var(--wolke);
      border:1px solid transparent;transition:border-color .4s}
.raum:hover{border-color:var(--rf,var(--akzent))}
.raum img{width:100%;aspect-ratio:16/9;object-fit:cover;opacity:.62;transition:.7s}
.raum:hover img{opacity:.9;transform:scale(1.03)}
.raum .txt{position:absolute;inset:auto 0 0 0;padding:24px 22px;
      background:linear-gradient(transparent,rgba(10,10,12,.92))}
.raum h3{font-family:var(--display);font-weight:400;font-size:1.5rem;line-height:1.2}
.raum small{display:block;margin-top:8px;font-size:10px;letter-spacing:.24em;
      text-transform:uppercase;color:var(--rf,var(--akzent))}

/* ── 8 Kino ──────────────────────────────────────────────────────────────── */
.kino{padding:13vh 0;background:var(--wolke)}
.filme{display:grid;gap:22px;grid-template-columns:1fr}
@media(min-width:700px){.filme{grid-template-columns:repeat(2,1fr);gap:28px}}
@media(min-width:1080px){.filme{grid-template-columns:repeat(3,1fr);gap:30px}}
.film{display:block}
.film .rahmen{position:relative;overflow:hidden}
.film img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:filter .5s,transform .7s;
      filter:grayscale(.42) brightness(.74) contrast(1.04)}
@media(hover:hover){.film:hover img{filter:none;transform:scale(1.03)}}
.film .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;
      border:1px solid rgba(240,238,233,.6);border-radius:50%;display:grid;place-items:center;transition:.4s}
.film:hover .play{border-color:var(--akzent);background:rgba(200,164,92,.16)}
.film .play::after{content:'';border-left:11px solid var(--text);border-top:7px solid transparent;
      border-bottom:7px solid transparent;margin-left:3px}
.film h3{font-family:var(--display);font-size:1.18rem;font-weight:400;margin-top:17px;line-height:1.35}
.film small{display:block;margin-top:8px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:#6f6c65}
.alleFilme{display:block;text-align:center;margin-top:7vh;font-size:11px;letter-spacing:.26em;
      text-transform:uppercase;color:var(--goldhell)}
.alleFilme span{border-bottom:1px solid rgba(200,164,92,.45);padding-bottom:7px;transition:.35s}
.alleFilme:hover span{border-color:var(--akzent)}

/* Der Vorhang: das eingebettete Video, erst auf Klick geladen */
.vorhang{position:relative;aspect-ratio:16/9;background:var(--tiefer);overflow:hidden;cursor:pointer}
.vorhang img{width:100%;height:100%;object-fit:cover;transition:.5s;filter:saturate(.9) brightness(.9)}
.vorhang:hover img{filter:none}
.vorhang:hover img{transform:scale(1.02)}
.vorhang .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
      width:84px;height:84px;border:1px solid rgba(240,238,233,.7);border-radius:50%;
      display:grid;place-items:center;transition:.4s;background:rgba(10,10,12,.32)}
.vorhang:hover .play{border-color:var(--akzent);background:rgba(200,164,92,.2)}
.vorhang .play::after{content:'';border-left:17px solid var(--text);border-top:11px solid transparent;
      border-bottom:11px solid transparent;margin-left:5px}
.vorhang iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ── 9 Gemeinschaft und Abgang ───────────────────────────────────────────── */
.schritte{display:grid;gap:1px;margin-top:9vh;background:var(--linie);border:1px solid var(--linie)}
@media(min-width:800px){.schritte{grid-template-columns:repeat(4,1fr)}}
.schritt{background:var(--nacht);padding:36px 26px}
.schritt b{font-family:var(--display);font-size:2.1rem;font-weight:400;color:var(--akzent);display:block;line-height:1}
.schritt h4{font-size:12px;letter-spacing:.2em;text-transform:uppercase;margin:16px 0 10px;font-weight:500}
.schritt p{font-size:13.5px;line-height:1.8;color:var(--grau)}

.zahlen{display:flex;justify-content:center;flex-wrap:wrap;gap:40px 66px;margin-top:8vh}
.zahl b{display:block;font-family:var(--display);font-size:clamp(2.2rem,6.4vw,3.6rem);
      font-weight:400;color:var(--goldhell);line-height:1}
.zahl span{display:block;margin-top:10px;font-size:10px;letter-spacing:.28em;
      text-transform:uppercase;color:#6f6c65}

.abgang{position:relative;min-height:78svh;display:grid;place-items:center;text-align:center;
      padding:13vh 20px;overflow:hidden}
.abgang>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.32}
.abgang::after{content:'';position:absolute;inset:0;
      background:radial-gradient(ellipse at center,transparent,rgba(10,10,12,.9) 72%)}
.abgang-innen{position:relative;z-index:3}
.abgang h2{font-family:var(--display);font-weight:400;font-size:clamp(1.9rem,6.4vw,4.6rem);
      line-height:1.04;text-transform:uppercase;letter-spacing:-.02em}
.abgang h2 i{font-style:italic;text-transform:none;color:var(--akzent)}
.abgang p{max-width:520px;margin:24px auto 0;color:var(--leise);font-size:15px;line-height:1.95}
.knopf{display:inline-block;margin-top:38px;padding:19px 46px;background:var(--text);color:var(--nacht);
      font-size:11px;letter-spacing:.28em;text-transform:uppercase;font-weight:500;transition:.35s}
.knopf:hover{background:var(--akzent)}
.knopf.leise{background:none;color:var(--goldhell);border:1px solid rgba(200,164,92,.5)}
.knopf.leise:hover{background:var(--akzent);color:var(--nacht);border-color:var(--akzent)}

/* ── 10 Fuss ─────────────────────────────────────────────────────────────── */
.fuss{padding:9vh 0 44px;border-top:1px solid rgba(255,255,255,.08);background:var(--tiefer)}
.fuss-gitter{display:grid;gap:38px;grid-template-columns:1fr}
@media(min-width:760px){.fuss-gitter{grid-template-columns:1.4fr 1fr 1fr}}
.fuss h4{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--akzent);
      margin-bottom:18px;font-weight:500}
.fuss p{font-size:13.5px;line-height:1.95;color:var(--grau);max-width:44ch}
.fuss nav{display:flex;flex-direction:column;gap:11px;font-size:13.5px;color:var(--grau)}
.fuss nav a:hover{color:var(--text)}
.fuss-unten{margin-top:8vh;padding-top:24px;border-top:1px solid rgba(255,255,255,.07);
      display:flex;flex-wrap:wrap;gap:12px 30px;justify-content:space-between;
      font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#5b5854}

/* ── 11 Bewegung ─────────────────────────────────────────────────────────── */
.auf{opacity:0;transform:translateY(38px);
     transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.auf.da{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .auf{opacity:1;transform:none;transition:none}
  .ticker{animation:none}
  .auftakt .grund img{transform:none}
  *{transition-duration:.01ms !important}
}

/* ── 12 Lupe: Bildvergrößerung ───────────────────────────────────────────────
   Eine Galerie lebt davon, dass man nahe herangehen darf. Ein Klick auf ein
   Werk legt es gross auf die Wand, mit Pfeilen weiter durch den ganzen Raum.
   Ohne JavaScript bleibt die Kachel ein Verweis zu original-laguiole.de. */
.lupe{position:fixed;inset:0;z-index:120;display:flex;flex-direction:column;
      background:rgba(6,6,8,.975);backdrop-filter:blur(18px);
      opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s}
.lupe.auf{opacity:1;visibility:visible}
.lupe-kopf{display:flex;align-items:center;justify-content:space-between;gap:16px;
      padding:16px 18px;flex:0 0 auto}
@media(min-width:900px){.lupe-kopf{padding:22px 30px}}
.lupe-zaehler{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--grau)}
.lupe-zu{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--linie);
      border-radius:50%;transition:.3s;flex:0 0 auto}
.lupe-zu:hover{border-color:var(--akzent);color:var(--goldhell)}
.lupe-zu::before,.lupe-zu::after{content:'';position:absolute;width:15px;height:1px;background:currentColor}
.lupe-zu::before{transform:rotate(45deg)}.lupe-zu::after{transform:rotate(-45deg)}
.lupe-zu{position:relative}

.lupe-buehne{flex:1 1 auto;display:flex;align-items:center;justify-content:center;
      position:relative;min-height:0;padding:0 12px}
@media(min-width:900px){.lupe-buehne{padding:0 76px}}
.lupe-bild{max-width:100%;max-height:100%;object-fit:contain;
      border:1px solid rgba(255,255,255,.1);box-shadow:0 40px 100px rgba(0,0,0,.7);
      opacity:0;transition:opacity .3s}
.lupe-bild.da{opacity:1}
.lupe-pfeil{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;
      display:none;place-items:center;border:1px solid var(--linie);border-radius:50%;transition:.3s}
.lupe-pfeil:hover{border-color:var(--akzent);color:var(--goldhell);background:rgba(200,164,92,.1)}
.lupe-pfeil.links{left:10px}.lupe-pfeil.rechts{right:10px}
@media(min-width:900px){.lupe-pfeil{display:grid}}
.lupe-pfeil svg{width:17px;height:17px}

.lupe-fuss{flex:0 0 auto;padding:20px 18px 26px;text-align:center}
@media(min-width:900px){.lupe-fuss{padding:22px 30px 32px}}
.lupe-titel{font-family:var(--display);font-weight:400;font-size:clamp(1.1rem,3vw,1.7rem);
      line-height:1.25}
.lupe-marke{display:inline-block;margin-bottom:10px;font-size:9px;letter-spacing:.26em;
      text-transform:uppercase;padding:5px 11px;border:1px solid rgba(200,164,92,.5);color:var(--goldhell)}
/* [hidden] allein genuegt nicht: die display-Angabe oben wuerde gewinnen */
.lupe-marke[hidden]{display:none}
.lupe-spec{margin-top:10px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--grau)}
.lupe-zuol{display:inline-flex;align-items:center;gap:12px;margin-top:20px;font-size:11px;
      letter-spacing:.24em;text-transform:uppercase;color:var(--goldhell);
      border-bottom:1px solid rgba(200,164,92,.45);padding-bottom:6px;transition:gap .3s}
.lupe-zuol:hover{gap:20px}
.lupe-mini{display:flex;justify-content:center;gap:9px;margin-top:20px;flex-wrap:wrap}
.lupe-mini button{width:52px;height:30px;overflow:hidden;border:1px solid rgba(240,238,233,.18);
      background:var(--wolke);opacity:.55;transition:.3s;padding:0}
.lupe-mini button.aktiv,.lupe-mini button:hover{opacity:1;border-color:var(--akzent)}
.lupe-mini img{width:100%;height:100%;object-fit:cover}

/* Der Zeiger verrät, dass man näher herangehen darf */
.werk,.kachel{cursor:zoom-in}
.mehrbilder{position:absolute;bottom:12px;right:12px;font-size:9px;letter-spacing:.22em;
      text-transform:uppercase;padding:6px 10px;background:rgba(10,10,12,.7);
      border:1px solid rgba(240,238,233,.22);color:var(--leise);backdrop-filter:blur(4px)}

/* ── 13 Legenden ─────────────────────────────────────────────────────────────
   Erzaehlkacheln: breiter als die Werkkacheln, damit der Text atmen kann. */
.legenden{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:900px){.legenden{gap:26px}}
.legende-kachel{display:grid;gap:0;background:var(--wolke);border:1px solid transparent;
      transition:border-color .4s,transform .5s}
@media(min-width:760px){.legende-kachel{grid-template-columns:1fr 1fr;align-items:stretch}
  .legende-kachel:nth-child(even) .rahmen{order:2}}
.legende-kachel:hover{border-color:var(--rf,var(--akzent));transform:translateY(-3px)}
.legende-kachel .rahmen{overflow:hidden;background:var(--tiefer)}
.legende-kachel img{width:100%;height:100%;min-height:220px;object-fit:cover;opacity:.72;
      transition:opacity .6s,transform .9s}
.legende-kachel:hover img{opacity:1;transform:scale(1.03)}
.legende-kachel .txt{padding:34px 26px 32px;display:flex;flex-direction:column;justify-content:center}
@media(min-width:900px){.legende-kachel .txt{padding:52px 46px}}
.legende-kachel .kicker{font-size:10px;letter-spacing:.28em;text-transform:uppercase;
      color:var(--rf,var(--akzent))}
.legende-kachel h2{font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,4.4vw,2.6rem);
      line-height:1.1;margin:14px 0 14px;letter-spacing:-.01em}
.legende-kachel p{font-size:14.5px;line-height:1.9;color:var(--leise);max-width:46ch}
.legende-kachel .mehr{margin-top:26px;display:inline-flex;gap:12px;font-size:11px;
      letter-spacing:.26em;text-transform:uppercase;color:var(--rf,var(--akzent));transition:gap .35s}
.legende-kachel:hover .mehr{gap:20px}

/* Hinweis auf die Legende, mitten auf einer Editionsseite */
.legende-band{position:relative;overflow:hidden;margin:11vh 0 0;border-top:1px solid var(--linie);
      border-bottom:1px solid var(--linie)}
.legende-band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.24}
.legende-band::after{content:'';position:absolute;inset:0;
      background:linear-gradient(to right,rgba(10,10,12,.95),rgba(10,10,12,.7))}
.legende-band .innen{position:relative;z-index:3;padding:11vh 20px;max-width:var(--breit);margin:0 auto}
@media(min-width:960px){.legende-band .innen{padding:12vh 44px}}
.legende-band .kicker{font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--ak)}
.legende-band h2{font-family:var(--display);font-weight:400;font-size:clamp(1.8rem,5vw,3.2rem);
      line-height:1.08;margin:16px 0 18px;max-width:16ch}
.legende-band p{font-size:15px;line-height:1.95;color:var(--leise);max-width:52ch}
.lupe-schmiede{margin-top:9px;font-size:11px;letter-spacing:.06em;color:var(--goldhell);opacity:.85}
.lupe-schmiede[hidden]{display:none}

/* ── 14 Markenzeichen ────────────────────────────────────────────────────────
   Das echte Logo statt eines nachgesetzten Schriftzugs. Es liegt hell auf
   durchsichtigem Grund, deshalb funktioniert es auch unter der Blendstufe der
   Kopfleiste ueber hellen Bildern. */
.marke{display:block;line-height:0}
/* Zurueckhaltend: Das Logo ist 4,3 mal so breit wie hoch, deshalb wirkt es
   schon bei geringer Hoehe breit. Es soll die Kopfleiste nicht beherrschen,
   sondern neben dem Menue ruhig stehen. */
.marke img{height:30px;width:auto}
@media(min-width:960px){.marke img{height:36px}}
.kopf.fest .marke img{height:26px}
@media(min-width:960px){.kopf.fest .marke img{height:32px}}

.fuss-logo{height:22px;width:auto;margin-bottom:20px}

/* Der Helm als ruhiges Zeichen ueber dem Textblock */
.manifest .helm{width:30px;height:auto;margin:0 auto 34px;opacity:.9}
@media(min-width:760px){.manifest .helm{width:36px;margin-bottom:42px}}

/* Inhaltsverzeichnis einer langen Legende */
.inhalt{border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);
      padding:26px 0;margin:0 0 7vh}
.inhalt>span{display:block;font-size:10px;letter-spacing:.28em;text-transform:uppercase;
      color:var(--akzent);margin-bottom:16px}
.inhalt ol{list-style:none;margin:0;padding:0;display:grid;gap:9px 30px}
@media(min-width:660px){.inhalt ol{grid-template-columns:1fr 1fr}}
.inhalt li{counter-increment:kap;font-size:14px;line-height:1.5}
.inhalt li::before{content:counter(kap,decimal-leading-zero);margin-right:12px;
      font-size:10px;letter-spacing:.1em;color:var(--grau)}
.inhalt ol{counter-reset:kap}
.inhalt a{color:var(--leise);box-shadow:none}
.inhalt a:hover{color:var(--goldhell)}
.fliess h2[id]{scroll-margin-top:110px}