/* menzel.works — Entwurf „Laden"
 *
 * Im Aufbau eines App Stores: oben „Entdecken" mit großen Karten, die
 * seitwärts laufen, darunter je Gruppe eine Zeile aus Icon, Name und
 * Knopf. Ein Klick öffnet die Produktseite.
 *
 * Das seitliche Laufen macht der Browser selbst (overflow-x mit
 * scroll-snap) — kein Skript, kein Nachschwingen, auf dem Trackpad und
 * am Touchscreen von Haus aus richtig.
 */

*{box-sizing:border-box}

/* Angemeldet, damit der Farbwechsel beim Öffnen einer Arbeit weich
   läuft: Eine gewöhnliche CSS-Variable springt, eine angemeldete
   kennt ihren Typ und kann überblendet werden. */
@property --ton{syntax:'<color>';inherits:true;initial-value:#0071E3}
html{--ton:#0071E3;transition:--ton 1.1s ease}

html{--grund:#F5F5F7;--flaeche:#fff;--tinte:#1D1D1F;--leise:#6E6E73;
  --linie:rgba(0,0,0,.08);--blau:#0071E3;--rand:clamp(18px,4vw,44px);
  --takt:cubic-bezier(.32,.72,0,1);
  color-scheme:light}
html,body{margin:0;background:var(--grund);color:var(--tinte)}
body{font-family:Geist,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight:420;-webkit-font-smoothing:antialiased;
  padding-bottom:clamp(40px,8vh,80px)}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:left}
ul{list-style:none;margin:0;padding:0}
a{color:inherit}

/* ---------- Kopf ---------- */
.kopf{padding:clamp(22px,3.4vh,34px) var(--rand,clamp(18px,4vw,44px)) clamp(10px,1.6vh,18px)}
.tag{margin:0;font-size:.82rem;font-weight:560;letter-spacing:.02em;text-transform:uppercase;
  color:var(--leise)}
.kopf-zeile{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:2px}
.kopf h1{margin:0;font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:620;letter-spacing:-.03em}
.ich{display:grid;place-items:center;height:38px;padding:0 15px;border-radius:99px;
  background:var(--flaeche);box-shadow:0 0 0 1px var(--linie);
  font-size:.86rem;font-weight:520;text-decoration:none;transition:box-shadow .3s}
.ich:hover{box-shadow:0 0 0 1px rgba(0,0,0,.2)}

/* ---------- Die Wellen (Abschnitte) ---------- */
/* minmax(0,1fr) statt 1fr: Ein Grid-Feld hat von Haus aus min-width:auto
   und wächst mit seinem Inhalt. Die Spuren darin wären dadurch so breit
   wie alle Karten zusammen und würden nie scrollen — stattdessen zöge
   sich die ganze Seite in die Breite. */
.laden{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(26px,4vh,46px)}
.welle{min-width:0}
.welle-kopf{display:flex;align-items:baseline;gap:9px;margin:0 0 clamp(9px,1.4vh,14px);
  padding:0 var(--rand,clamp(18px,4vw,44px));
  font-size:clamp(1.2rem,2vw,1.52rem);font-weight:600;letter-spacing:-.022em}
.welle-kopf span{font-size:.8rem;font-weight:500;color:var(--leise);font-variant-numeric:tabular-nums}

/* Die Spur läuft seitwärts. Den Weg macht der Browser; das Skript legt
   nur die Griffe dazu — Rad, Ziehen und zwei Knöpfe. */
.spur-rahmen{position:relative;min-width:0}
.spur{display:flex;gap:clamp(10px,1.2vw,16px);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-left:var(--rand,clamp(18px,4vw,44px));
  padding:2px var(--rand,clamp(18px,4vw,44px)) 14px;
  scrollbar-width:none}
.spur::-webkit-scrollbar{display:none}
.spur > *{scroll-snap-align:start;flex:none}

/* Während des Ziehens: kein Textmarkieren, keine Zeigehand. */
.spur-rahmen.zieht .spur{cursor:grabbing;user-select:none}
.spur-rahmen.zieht .spur *{cursor:grabbing !important;pointer-events:none}

/* Die Knöpfe zum Blättern. Sie liegen halb über dem Rand und tauchen
   erst auf, wenn der Zeiger die Spur berührt — und nur dort, wo es
   überhaupt etwas zu blättern gibt. */
.blaettern{position:absolute;top:calc(50% - 6px);transform:translateY(-50%);z-index:5;
  display:none;place-items:center;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:0 0 0 1px var(--linie),0 8px 22px -12px rgba(0,0,0,.5);
  color:var(--tinte);opacity:0;
  transition:opacity .25s var(--takt),background .25s,transform .25s var(--takt)}
.spur-rahmen.laeuft .blaettern{display:grid}
.spur-rahmen.laeuft:hover .blaettern,.blaettern:focus-visible{opacity:1}
.blaettern:hover{background:#fff}
.blaettern:active{transform:translateY(-50%) scale(.94)}
.blaettern:focus-visible{outline:3px solid var(--blau);outline-offset:2px}
.blaettern[disabled]{opacity:0;pointer-events:none}
.blaettern.links{left:calc(var(--spurrand,var(--rand)) - 19px)}
.blaettern.rechts{right:calc(var(--spurrand,var(--rand)) - 19px)}

/* Am Touchscreen wischt man ohnehin — da braucht es keine Knöpfe. */
@media (hover:none){.blaettern{display:none !important}}

/* ---------- Entdecken: die großen Karten ---------- */
.gross-spur{scroll-padding-left:var(--rand,clamp(18px,4vw,44px))}
.tafel{width:min(84vw,560px)}
.tafel-flaeche{display:grid;width:100%;border-radius:18px;overflow:hidden;background:var(--flaeche);
  box-shadow:0 0 0 1px var(--linie),0 10px 30px -18px rgba(0,0,0,.3);
  transition:transform .4s var(--takt),box-shadow .4s var(--takt)}
.tafel-flaeche:hover{transform:scale(.993)}
.tafel-flaeche:focus-visible{outline:3px solid var(--blau);outline-offset:3px}
.tafel-bild{display:block;background:#fff}
.tafel-bild img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top center}
.tafel-text{display:grid;gap:3px;padding:clamp(14px,2vw,20px)}
.tafel-marke{font-size:.72rem;font-weight:620;letter-spacing:.09em;text-transform:uppercase;
  color:var(--akzent)}
.tafel-titel{font-size:clamp(1.15rem,1.8vw,1.46rem);font-weight:600;letter-spacing:-.022em;line-height:1.15}
.tafel-zeile{font-size:.92rem;line-height:1.4;color:var(--leise);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- Die Zeilen mit Icon ---------- */
/* Die Gruppen stehen im Raster, nicht in einer Spur: bei fünf Apps
   gäbe eine Spur zwei schmale Säulen und rechts daneben eine große
   leere Fläche. Im Raster nehmen die Säulen je einen Anteil und
   füllen die Breite — und auf schmalen Schirmen rutschen sie
   von selbst untereinander. */
.gitter{display:grid;gap:clamp(10px,1.2vw,16px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));
  padding:0 var(--rand)}

.saeule{display:grid;gap:0;align-content:start;min-width:0;
  border-radius:16px;background:var(--flaeche);box-shadow:0 0 0 1px var(--linie);overflow:hidden}
.reihe + .reihe .reihe-flaeche::before{content:"";position:absolute;left:clamp(66px,8vw,78px);right:0;top:0;
  height:1px;background:var(--linie)}
.reihe-flaeche{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:clamp(10px,1.4vw,14px);width:100%;
  padding:clamp(10px,1.4vh,13px) clamp(12px,1.6vw,16px);
  transition:background .25s}
.reihe-flaeche:hover{background:rgba(0,0,0,.03)}
.reihe-flaeche:focus-visible{outline:3px solid var(--blau);outline-offset:-3px}

.icon{display:block;width:clamp(44px,5.4vw,56px);height:clamp(44px,5.4vw,56px);
  border-radius:23%;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.icon img{width:100%;height:100%;object-fit:cover}
.icon-ersatz{display:grid;place-items:center;width:100%;height:100%;
  background:var(--akzent);color:#fff;font-size:1.3rem;font-weight:620}
.icon.gross{width:clamp(76px,10vw,104px);height:clamp(76px,10vw,104px);border-radius:23%}

.reihe-text{display:grid;gap:1px;min-width:0}
.reihe-titel{font-size:.98rem;font-weight:520;letter-spacing:-.014em;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reihe-art{font-size:.8rem;color:var(--leise);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Der Knopf — rund, kräftig, wie im Laden. */
.knopf{display:inline-grid;place-items:center;min-width:76px;height:31px;padding:0 15px;
  border-radius:99px;background:rgba(0,0,0,.06);color:var(--blau);
  font-size:.84rem;font-weight:620;letter-spacing:-.005em;text-decoration:none;
  transition:background .25s}
.reihe-flaeche:hover .knopf{background:rgba(0,0,0,.1)}
.knopf-laden{background:var(--blau);color:#fff}
.reihe-flaeche:hover .knopf-laden{background:#0063c9}

/* ---------- Die Produktseiten ---------- */
.seiten{padding:0 var(--rand,clamp(18px,4vw,44px))}
.seite{position:relative;max-width:1000px;margin:0 auto clamp(30px,5vh,50px);
  padding:clamp(20px,3vw,34px);border-radius:18px;background:var(--flaeche);
  box-shadow:0 0 0 1px var(--linie)}
.seite[hidden]{display:none}
.seite-titel{margin:0;font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:620;letter-spacing:-.028em;line-height:1.1}
.seite-art{margin:3px 0 0;font-size:.88rem;color:var(--leise)}
.seite-wege{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.seite-wege .knopf{height:34px;min-width:92px;font-size:.88rem}
.seite-zeile{margin:clamp(16px,2.4vh,22px) 0 0;font-size:clamp(1.05rem,1.5vw,1.3rem);
  font-weight:450;letter-spacing:-.018em;line-height:1.3}
.seite-text{margin:0;max-width:68ch;font-size:1rem;line-height:1.6;color:var(--leise)}
.echt{position:relative;overflow:hidden;border-radius:12px;background:#fff;
  padding:clamp(16px,2.4vw,30px);box-shadow:0 0 0 1px var(--linie)}
.echt > *{max-width:100%}
.seite-zu{display:none}

/* =================================================================
 * Die Produktseite kommt von rechts.
 *
 * Wie im Laden: ein Klick schiebt eine eigene Ansicht über die
 * Übersicht, die Übersicht bleibt dahinter stehen. Zurück geht es über
 * den Knopf oben links, mit Escape — und mit dem Zurück des Browsers,
 * denn für den Betrachter war das ein Seitenwechsel.
 * ================================================================= */

.zeigt .seiten{position:fixed;z-index:70;inset:0;
  display:grid;grid-template-rows:auto minmax(0,1fr);
  background:var(--grund);
  transform:translateX(100%);visibility:hidden;
  transition:transform .42s var(--takt),visibility 0s linear .42s}
.zeigt .seiten.auf{transform:none;visibility:visible;transition-delay:0s}

/* Die Übersicht rückt beim Öffnen ein Stück weg — gerade so viel,
   dass die neue Ansicht wirklich davorliegt. */
.zeigt .kopf,.zeigt .laden{transition:transform .42s var(--takt),opacity .42s var(--takt)}
.zeigt.seite-auf .kopf,.zeigt.seite-auf .laden{transform:translateX(-5%);opacity:.5}
.zeigt.seite-auf,.zeigt.seite-auf body{height:100%;overflow:hidden}

.seiten-leiste{display:flex;align-items:center;
  padding:clamp(10px,1.6vh,16px) var(--rand);
  background:color-mix(in srgb,var(--grund) 86%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--linie)}
.zurueck{display:inline-flex;align-items:center;gap:7px;
  height:34px;padding:0 14px 0 10px;border-radius:99px;
  background:var(--flaeche);box-shadow:0 0 0 1px var(--linie);
  font-size:.9rem;font-weight:520;color:var(--blau);
  transition:box-shadow .25s,background .25s}
.zurueck:hover{background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.18)}
.zurueck:focus-visible{outline:3px solid var(--blau);outline-offset:2px}

.seiten-lauf{overflow-y:auto;overscroll-behavior:contain;
  padding:clamp(18px,3vh,34px) var(--rand) clamp(50px,9vh,100px)}
.zeigt .seite{max-width:1000px;margin:0 auto;padding:0;border-radius:0;
  background:none;box-shadow:none}
.zeigt .seite-zu{display:none}

/* ---------- Der Aufbau einer Produktseite ---------- */
.seite-kopf{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(14px,2.4vw,26px);align-items:center;border:0;padding:0}
.seite-kopftext{min-width:0}
.seite-block{margin:clamp(26px,4.2vh,44px) 0 0;
  padding:clamp(22px,3.4vh,34px) 0 0;border-top:1px solid var(--linie)}
.block-kopf{margin:0 0 clamp(12px,1.8vh,18px);
  font-size:clamp(1.05rem,1.5vw,1.26rem);font-weight:600;letter-spacing:-.02em}

/* Die Bildschirmfotos laufen seitwärts, wie im Laden — und sie laufen
   bis an den Rand der Ansicht, statt an der Textbreite hart abzubrechen.
   Dafür hebt der negative Außenabstand den Innenabstand des Laufs auf. */
.schau.spur{gap:clamp(10px,1.2vw,16px);
  margin-inline:calc(var(--rand) * -1);
  padding:2px var(--rand) 14px;scroll-padding-left:var(--rand)}
.schau-bild{margin:0;flex:none}
.schau.spur .schau-bild img{width:auto;height:min(46svh,440px);
  border-radius:12px;background:#fff;box-shadow:0 0 0 1px var(--linie)}
.schau.einzeln .schau-bild img{width:100%;height:auto;max-height:min(54svh,540px);
  object-fit:contain;border-radius:12px;background:#fff;box-shadow:0 0 0 1px var(--linie)}

.angaben{display:grid;gap:0 clamp(22px,3.4vw,52px);margin:0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.angaben > div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:11px 0;border-bottom:1px solid var(--linie)}
.angaben dt{font-size:.92rem;color:var(--leise)}
.angaben dd{margin:0;font-size:.92rem;font-weight:500;text-align:right}

/* Die offene Zeile bleibt markiert, bis man zurückkommt. */
[aria-expanded="true"].reihe-flaeche{background:rgba(0,0,0,.045)}

/* ---------- Schmale Schirme ---------- */
@media (max-width:620px){
  .tafel{width:84vw}
  .seite-kopf{grid-template-columns:auto minmax(0,1fr)}
  .zeigt.seite-auf .kopf,.zeigt.seite-auf .laden{transform:none}
  .schau.spur .schau-bild img{height:min(52svh,420px)}
}

@media (prefers-reduced-motion:reduce){
  .tafel-flaeche,.zeigt .seiten,.zeigt .seite{transition-duration:.01ms}
  .spur{scroll-behavior:auto}
  .blaettern{transition-duration:.01ms}
}


/* =================================================================
 * Dunkel — wenn das Gerät es so will.
 *
 * Nicht einfach umgedrehte Graustufen: Der Grund geht auf Schwarz,
 * die Flächen darüber auf ein helles Anthrazit. Dadurch stehen die
 * Karten im Dunkeln genauso frei wie im Hellen auf Papiergrau.
 * ================================================================= */

@media (prefers-color-scheme:dark){
  html:not([data-thema="hell"]){--grund:#000;--flaeche:#1C1C1E;--tinte:#F5F5F7;--leise:#98989D;
    --linie:rgba(255,255,255,.14);--blau:#0A84FF;
    color-scheme:dark}
  html:not([data-thema="hell"]) .ich:hover{box-shadow:0 0 0 1px rgba(255,255,255,.3)}
  html:not([data-thema="hell"]) .tafel-flaeche{box-shadow:0 0 0 1px var(--linie),0 12px 34px -20px #000}
  html:not([data-thema="hell"]) .icon{box-shadow:0 0 0 1px rgba(255,255,255,.1)}
  html:not([data-thema="hell"]) .reihe-flaeche:hover{background:rgba(255,255,255,.055)}
  html:not([data-thema="hell"]) [aria-expanded="true"].reihe-flaeche{background:rgba(255,255,255,.07)}
  html:not([data-thema="hell"]) .knopf{background:rgba(255,255,255,.13)}
  html:not([data-thema="hell"]) .reihe-flaeche:hover .knopf{background:rgba(255,255,255,.22)}
  html:not([data-thema="hell"]) .knopf-laden{background:var(--blau)}
  html:not([data-thema="hell"]) .reihe-flaeche:hover .knopf-laden{background:#3395ff}
  html:not([data-thema="hell"]) .blaettern{background:rgba(44,44,46,.82);
    box-shadow:0 0 0 1px var(--linie),0 8px 22px -12px #000}
  html:not([data-thema="hell"]) .blaettern:hover{background:#2C2C2E}
  html:not([data-thema="hell"]) .zurueck:hover{background:#2C2C2E;box-shadow:0 0 0 1px rgba(255,255,255,.22)}
  html:not([data-thema="hell"]) /* Screenshots und vorgeführte Plugins bringen helle Stile mit —
     die bekommen ihren weißen Grund und eine Kante,html:not([data-thema="hell"]) damit sie nicht
     als leuchtender Block im Dunkeln stehen. */
  .schau-bild img,html:not([data-thema="hell"]) .echt{background:#fff;
    box-shadow:0 0 0 1px rgba(255,255,255,.12),0 16px 40px -24px #000}
  html:not([data-thema="hell"]) .echt{color-scheme:light;color:#1D1D1F}
  html:not([data-thema="hell"]) .tafel-bild{background:#fff}
}

/* Dieselben Werte, wenn der Besucher „dunkel“ gewählt hat. */
html[data-thema="dunkel"]{--grund:#000;--flaeche:#1C1C1E;--tinte:#F5F5F7;--leise:#98989D;
    --linie:rgba(255,255,255,.14);--blau:#0A84FF;
    color-scheme:dark}
  html[data-thema="dunkel"] .ich:hover{box-shadow:0 0 0 1px rgba(255,255,255,.3)}
  html[data-thema="dunkel"] .tafel-flaeche{box-shadow:0 0 0 1px var(--linie),0 12px 34px -20px #000}
  html[data-thema="dunkel"] .icon{box-shadow:0 0 0 1px rgba(255,255,255,.1)}
  html[data-thema="dunkel"] .reihe-flaeche:hover{background:rgba(255,255,255,.055)}
  html[data-thema="dunkel"] [aria-expanded="true"].reihe-flaeche{background:rgba(255,255,255,.07)}
  html[data-thema="dunkel"] .knopf{background:rgba(255,255,255,.13)}
  html[data-thema="dunkel"] .reihe-flaeche:hover .knopf{background:rgba(255,255,255,.22)}
  html[data-thema="dunkel"] .knopf-laden{background:var(--blau)}
  html[data-thema="dunkel"] .reihe-flaeche:hover .knopf-laden{background:#3395ff}
  html[data-thema="dunkel"] .blaettern{background:rgba(44,44,46,.82);
    box-shadow:0 0 0 1px var(--linie),0 8px 22px -12px #000}
  html[data-thema="dunkel"] .blaettern:hover{background:#2C2C2E}
  html[data-thema="dunkel"] .zurueck:hover{background:#2C2C2E;box-shadow:0 0 0 1px rgba(255,255,255,.22)}
  html[data-thema="dunkel"] /* Screenshots und vorgeführte Plugins bringen helle Stile mit —
     die bekommen ihren weißen Grund und eine Kante,html[data-thema="dunkel"] damit sie nicht
     als leuchtender Block im Dunkeln stehen. */
  .schau-bild img,html[data-thema="dunkel"] .echt{background:#fff;
    box-shadow:0 0 0 1px rgba(255,255,255,.12),0 16px 40px -24px #000}
  html[data-thema="dunkel"] .echt{color-scheme:light;color:#1D1D1F}
  html[data-thema="dunkel"] .tafel-bild{background:#fff}


/* =================================================================
 * Die geteilte Ansicht.
 *
 * Links eine stehende Bühne mit dem grossen Bild, der Überschrift und
 * der Karte zur Arbeit; rechts läuft der Text. Die Bühne bleibt beim
 * Scrollen stehen — sie ist das Titelbild der Geschichte, nicht ihr
 * erster Absatz.
 * ================================================================= */

.seite.geteilt{max-width:1480px}
/* :not([hidden]) ist hier Pflicht, nicht Schmuck. „.seite[hidden]“ und
   „.seite.geteilt“ wiegen gleich schwer — die spätere Regel gewinnt,
   und das display:grid von hier hob das display:none von dort auf.
   Folge: Die einzige geteilte Arbeit stand über jeder anderen. */
.seite.geteilt:not([hidden]){display:grid;gap:clamp(18px,2.6vw,42px);
  grid-template-columns:minmax(0,.78fr) minmax(0,1fr);align-items:start}

/* Bild, Verlauf, Kopf und Karte liegen alle im selben Rasterfeld
   übereinander. Das ist stabiler als absolute Positionierung mit
   negativem z-index: Der lag hinter dem eigenen Hintergrund der
   Bühne — das Bild war da, aber unsichtbar. */
.buehne{position:sticky;top:0;
  display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:minmax(0,1fr);
  aspect-ratio:3/4;max-height:calc(100svh - var(--kopfhoehe,56px) - clamp(40px,8vh,90px));
  border-radius:clamp(16px,1.6vw,22px);overflow:hidden;
  --luft:clamp(18px,2.4vw,30px);
  background:var(--flaeche);color:#fff;
  box-shadow:0 0 0 1px var(--linie),0 24px 60px -34px rgba(0,0,0,.6)}
.buehne-bild{grid-area:1/1/4/2;width:100%;height:100%;min-height:0;
  object-fit:cover;max-width:none;z-index:0}
/* Ein Verlauf oben und unten, damit Schrift und Karte auf jedem Bild
   lesbar bleiben — auch auf den hellen Bildschirmfotos. */
.buehne::before{content:"";grid-area:1/1/4/2;z-index:1;
  background:linear-gradient(to bottom,rgba(0,0,0,.52) 0%,rgba(0,0,0,.12) 34%,
    rgba(0,0,0,.08) 54%,rgba(0,0,0,.66) 100%)}
.buehne-kopf{grid-row:1;grid-column:1;z-index:2;padding:var(--luft)}
.buehne-marke{margin:0 0 6px;font-size:.74rem;font-weight:620;letter-spacing:.1em;
  text-transform:uppercase;opacity:.9}
.buehne-story{margin:0;font-size:clamp(1.6rem,2.9vw,2.6rem);font-weight:620;
  letter-spacing:-.03em;line-height:1.04;text-wrap:balance}

.buehne-karte{grid-row:3;grid-column:1;z-index:2;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:clamp(10px,1.2vw,14px);padding:clamp(10px,1.2vw,14px);
  margin:var(--luft);border-radius:16px;background:rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.buehne-karte .reihe-titel,.buehne-karte .reihe-art{color:#fff}
.buehne-karte .reihe-art{opacity:.78}
.buehne-karte .knopf{background:rgba(255,255,255,.92);color:#0b0b0c}
.buehne-karte .knopf-laden{background:#fff;color:#0b0b0c}
.buehne-karte .knopf:hover{background:#fff}

.seite.geteilt .erzaehlung{min-width:0}
.seite.geteilt .seite-block:first-child{margin-top:0;padding-top:0;border-top:0}
.seite.geteilt .seite-zeile{margin-top:0}

/* Der erzählte Text: Absätze mit hervorgehobenem Stichwort. */
.erzaehlt p{margin:0 0 clamp(14px,2vh,20px);max-width:64ch;
  font-size:clamp(1.02rem,1.25vw,1.12rem);line-height:1.62;color:var(--leise)}
.erzaehlt p:last-child{margin-bottom:0}
.erzaehlt strong{color:var(--tinte);font-weight:600}

/* =================================================================
 * Ein Bild gross ansehen.
 * ================================================================= */

.gross-zeigen{display:block;width:100%;cursor:zoom-in}
.lichtkasten{position:fixed;z-index:90;inset:0;display:grid;place-items:center;
  padding:clamp(16px,4vh,50px);background:rgba(0,0,0,.82);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  opacity:0;pointer-events:none;transition:opacity .28s var(--takt);cursor:zoom-out}
.lichtkasten.auf{opacity:1;pointer-events:auto}
.lichtkasten img{max-width:100%;max-height:100%;width:auto;height:auto;
  border-radius:10px;background:#fff;box-shadow:0 30px 80px -30px #000;
  transform:scale(.97);transition:transform .28s var(--takt)}
.lichtkasten.auf img{transform:none}

/* =================================================================
 * Der Schimmer unter der Maus.
 *
 * Zwei weiche Farbfelder, die dem Zeiger nachlaufen — träge genug,
 * dass man die Bewegung nicht als Effekt wahrnimmt, nur als Tiefe.
 * Sie nehmen die Farbe der Arbeit an, die gerade offen ist.
 * ================================================================= */

.schimmer{position:fixed;z-index:0;inset:0;pointer-events:none;
  opacity:0;transition:opacity 1.2s ease}
.js .schimmer{opacity:1}
/* Dieselben Felder liegen auch unter der Produktansicht — die hat
   einen deckenden Grund und würde den Schimmer darunter sonst
   verschlucken. */
.schimmer::before,.schimmer::after,
.zeigt .seiten::before,.zeigt .seiten::after{
  content:"";position:absolute;inset:-30%;pointer-events:none;z-index:0}
.schimmer::before,.zeigt .seiten::before{
  background:radial-gradient(38vmax 38vmax at var(--mx,50%) var(--my,26%),
    color-mix(in oklab,var(--ton,#0071E3) 100%,transparent) 0%,transparent 60%);
  opacity:.13}
.schimmer::after,.zeigt .seiten::after{
  background:radial-gradient(30vmax 30vmax at calc(100% - var(--mx,50%)) calc(100% - var(--my,26%)),
    color-mix(in oklab,var(--ton,#0071E3) 70%,#8A6CFF) 0%,transparent 62%);
  opacity:.09}

.kopf,.laden,.seiten{position:relative;z-index:1}
.zeigt .seiten > *{position:relative;z-index:1}

@media (prefers-color-scheme:dark){
  html:not([data-thema="hell"]) .schimmer::before,html:not([data-thema="hell"]) .zeigt .seiten::before{opacity:.22}
  html:not([data-thema="hell"]) .schimmer::after,html:not([data-thema="hell"]) .zeigt .seiten::after{opacity:.16}
  html:not([data-thema="hell"]) .erzaehlt strong{color:#fff}
  html:not([data-thema="hell"]) .buehne{background:#111113}
}

/* Dieselben Werte, wenn der Besucher „dunkel“ gewählt hat. */
html[data-thema="dunkel"] .schimmer::before,html[data-thema="dunkel"] .zeigt .seiten::before{opacity:.22}
  html[data-thema="dunkel"] .schimmer::after,html[data-thema="dunkel"] .zeigt .seiten::after{opacity:.16}
  html[data-thema="dunkel"] .erzaehlt strong{color:#fff}
  html[data-thema="dunkel"] .buehne{background:#111113}


@media (prefers-reduced-motion:reduce){
  .schimmer,.zeigt .seiten::before,.zeigt .seiten::after{display:none}
  .lichtkasten,.lichtkasten img{transition-duration:.01ms}
}

/* ---------- Geteilt auf schmalen Schirmen ---------- */
@media (max-width:900px){
  .seite.geteilt{grid-template-columns:minmax(0,1fr)}
  .buehne{position:static;aspect-ratio:4/5;max-height:72svh}
  .seite.geteilt .erzaehlung > :first-child{margin-top:clamp(22px,3.6vh,34px)}
}

/* =================================================================
 * Kopfleiste: Umschalter und Infofeld.
 * ================================================================= */

.kopf-rechts{display:flex;align-items:center;gap:8px}

.thema{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:var(--flaeche);box-shadow:0 0 0 1px var(--linie);color:var(--tinte);
  transition:box-shadow .25s,background .25s}
.thema:hover{box-shadow:0 0 0 1px rgba(0,0,0,.2)}
.thema:focus-visible{outline:3px solid var(--blau);outline-offset:2px}
.thema svg{display:block}
/* Sonne bei Dunkel, Mond bei Hell — gezeigt wird, wohin es geht. */
.thema .mond{display:block}
.thema .sonne{display:none}
html[data-thema="dunkel"] .thema .mond,
html:not([data-thema="hell"]) .thema .mond{display:block}
@media (prefers-color-scheme:dark){
  html:not([data-thema="hell"]) .thema .mond{display:none}
  html:not([data-thema="hell"]) .thema .sonne{display:block}
}
html[data-thema="dunkel"] .thema .mond{display:none}
html[data-thema="dunkel"] .thema .sonne{display:block}
html[data-thema="hell"] .thema .mond{display:block}
html[data-thema="hell"] .thema .sonne{display:none}

/* ---------- Das Infofeld hinter dem Namen ---------- */
.ich[aria-expanded="true"]{box-shadow:0 0 0 1px rgba(0,0,0,.22)}

.infofeld{position:fixed;z-index:80;inset:0;display:grid;
  place-items:start end;padding:clamp(12px,2vh,20px) var(--rand);
  opacity:0;pointer-events:none;transition:opacity .26s var(--takt)}
.infofeld.auf{opacity:1;pointer-events:auto}
.infofeld-grund{position:absolute;inset:0;background:rgba(0,0,0,.28);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.infokarte{position:relative;width:min(100%,420px);
  margin-top:calc(var(--kopfhoehe,96px) - clamp(12px,2vh,20px));
  padding:clamp(20px,2.6vw,28px);border-radius:20px;
  background:var(--flaeche);color:var(--tinte);
  box-shadow:0 0 0 1px var(--linie),0 30px 70px -34px rgba(0,0,0,.65);
  transform:translateY(-10px) scale(.98);transition:transform .3s var(--takt)}
.infofeld.auf .infokarte{transform:none}

.infokarte-kopf{display:grid;grid-template-columns:auto minmax(0,1fr);
  align-items:center;gap:14px}
.infokarte-bild{width:64px;height:64px;border-radius:50%;object-fit:cover;
  background:var(--grund);box-shadow:0 0 0 1px var(--linie)}
.infokarte h2{margin:0;font-size:1.22rem;font-weight:620;letter-spacing:-.022em}
.infokarte-rolle{margin:2px 0 0;font-size:.9rem;color:var(--leise)}
.infokarte-text{margin:clamp(14px,2vh,18px) 0 0;font-size:.98rem;line-height:1.56;
  color:var(--leise)}
.infokarte-text p{margin:0 0 .7em}
.infokarte-text p:last-child{margin:0}

.wege{display:flex;flex-wrap:wrap;gap:8px;margin:clamp(16px,2.2vh,20px) 0 0;
  padding:clamp(16px,2.2vh,20px) 0 0;border-top:1px solid var(--linie)}
.weg{display:inline-grid;place-items:center;height:34px;padding:0 15px;
  border-radius:99px;background:rgba(0,0,0,.06);color:var(--blau);
  font-size:.88rem;font-weight:560;text-decoration:none;transition:background .22s}
.weg:hover{background:rgba(0,0,0,.11)}
.weg:focus-visible{outline:3px solid var(--blau);outline-offset:2px}

.info-zu{position:absolute;top:14px;right:14px;display:grid;place-items:center;
  width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.05);
  color:var(--leise);font-size:1.1rem;line-height:1;transition:background .22s}
.info-zu:hover{background:rgba(0,0,0,.1);color:var(--tinte)}

@media (max-width:620px){
  .infofeld{place-items:end center;padding:0}
  .infokarte{width:100%;margin:0;border-radius:22px 22px 0 0;
    transform:translateY(16px);padding-bottom:calc(clamp(20px,2.6vw,28px) + env(safe-area-inset-bottom))}
}

@media (prefers-color-scheme:dark){
  html:not([data-thema="hell"]) .thema:hover{box-shadow:0 0 0 1px rgba(255,255,255,.3)}
  html:not([data-thema="hell"]) .weg{background:rgba(255,255,255,.13)}
  html:not([data-thema="hell"]) .weg:hover{background:rgba(255,255,255,.22)}
  html:not([data-thema="hell"]) .info-zu{background:rgba(255,255,255,.1)}
  html:not([data-thema="hell"]) .info-zu:hover{background:rgba(255,255,255,.2)}
  html:not([data-thema="hell"]) .ich[aria-expanded="true"]{box-shadow:0 0 0 1px rgba(255,255,255,.3)}
}
html[data-thema="dunkel"] .thema:hover{box-shadow:0 0 0 1px rgba(255,255,255,.3)}
html[data-thema="dunkel"] .weg{background:rgba(255,255,255,.13)}
html[data-thema="dunkel"] .weg:hover{background:rgba(255,255,255,.22)}
html[data-thema="dunkel"] .info-zu{background:rgba(255,255,255,.1)}
html[data-thema="dunkel"] .info-zu:hover{background:rgba(255,255,255,.2)}
html[data-thema="dunkel"] .ich[aria-expanded="true"]{box-shadow:0 0 0 1px rgba(255,255,255,.3)}

@media (prefers-reduced-motion:reduce){
  .infofeld,.infokarte{transition-duration:.01ms}
}