/* =========================================================
   leo ströbel / photo series
   Eine Schrift (IBM Plex Mono), ein Grund, ein Akzent.
   ========================================================= */

:root{
  --canvas:#0B0B0D;
  --panel:#17181B;
  --chrome:#232428;
  --line:#2B2D32;
  --accent:#F04A3C;
  --accent-hover:#FF6152;
  --accent-muted:#4A2622;
  --folder:#3E93DA;
  --folder-lit:#4FA9EE;
  --text-secondary:#8A8D95;
  --text-primary:#EDEDEE;
  --aurora-cool:#1E4F4C;
  --aurora-warm:#6E3327;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --bar-h:56px;

  /* Die Breite des weissen Rands um jedes Bild. Eine Stelle, ueberall gleich:
     Startseite, Serien, DUMP und About tragen denselben Rand. */
  --frame:5px;
}

*,*::before,*::after{box-sizing:border-box}

html,body{
  overflow-x:hidden;      /* Rueckfall zuerst */
  overflow-x:clip;
  margin:0;padding:0;
  height:100%;
}

body{
  background:var(--canvas);
  color:var(--text-primary);
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight:400;
  font-size:15px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,p,ul,figure{margin:0;padding:0}
ul{list-style:none}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

.skip{
  position:fixed;top:8px;left:8px;z-index:200;
  padding:10px 14px;background:var(--accent);color:#0B0B0D;
  font-weight:500;letter-spacing:.08em;font-size:12px;
  transform:translateY(-160%);transition:transform .2s var(--ease);
}
.skip:focus{transform:translateY(0)}

/* ============ Umgebungsebene ============ */

.env{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}

.aurora{
  position:absolute;
  width:78vmax;height:78vmax;
  border-radius:50%;
  filter:blur(90px);
  opacity:.5;
  will-change:transform;
}
.aurora-cool{
  background:radial-gradient(circle at 50% 50%,var(--aurora-cool) 0%,rgba(30,79,76,0) 66%);
  top:-34vmax;left:-26vmax;
  animation:driftA 96s var(--ease-soft) infinite alternate -22s;
}
.aurora-warm{
  background:radial-gradient(circle at 50% 50%,var(--aurora-warm) 0%,rgba(110,51,39,0) 66%);
  top:-16vmax;right:-34vmax;
  animation:driftB 112s var(--ease-soft) infinite alternate -40s;
}
@keyframes driftA{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(9vmax,7vmax,0) scale(1.16)}
}
@keyframes driftB{
  from{transform:translate3d(0,0,0) scale(1.1)}
  to{transform:translate3d(-8vmax,10vmax,0) scale(.94)}
}

.grain{
  position:absolute;inset:-120px;
  opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 7s steps(6) infinite;
  will-change:transform;
}
@keyframes grainShift{
  0%{transform:translate3d(0,0,0)}
  20%{transform:translate3d(-14px,8px,0)}
  40%{transform:translate3d(10px,-12px,0)}
  60%{transform:translate3d(-8px,-6px,0)}
  80%{transform:translate3d(12px,10px,0)}
  100%{transform:translate3d(0,0,0)}
}

/* ============ Kopfzeile ============ */

.bar{
  position:fixed;top:0;left:0;right:0;height:var(--bar-h);z-index:60;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:0 clamp(14px,3vw,30px);
  opacity:0;transform:translateY(-8px);pointer-events:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
body.chrome-on .bar{opacity:1;transform:none;pointer-events:auto}

.bar-left,.bar-right{
  font-size:10px;font-weight:500;letter-spacing:.22em;
  color:var(--text-secondary);
  transition:color .22s var(--ease);
}
/* Feste Spalten. Ohne sie rutscht der Name nach links, sobald der linke
   Text auf schmalen Schirmen ausgeblendet wird. */
.bar-left{grid-column:1;justify-self:start}
.bar-mid{grid-column:2}
.bar-right{grid-column:3;justify-self:end;color:var(--accent)}
.bar-left:hover{color:var(--text-primary)}
.bar-right:hover{color:var(--accent-hover)}
.bar-mid{
  font-size:15px;font-weight:500;letter-spacing:.02em;color:var(--text-primary);
  justify-self:center;
}

/* ============ Ansichten ============ */

main{position:relative;z-index:1;min-height:100%}

/* Die ausblendende Ansicht liegt nur noch obenauf und traegt keine Hoehe
   mehr bei. Sonst ist das Dokument waehrend der Ueberblendung doppelt so
   hoch und man kann in leeren Raum scrollen. */
.view.leaving{
  position:absolute;top:0;left:0;right:0;
  /* Auf eine Bildschirmhoehe begrenzt und abgeschnitten. Absolut positioniert
     allein reicht nicht: das Element bleibt sonst scrollbare Flaeche, und eine
     lange Ansicht wie der DUMP haengt beim Wechseln 2000 Pixel nach. */
  height:100svh;overflow:hidden;
  pointer-events:none;
}

.view{
  position:relative;
  min-height:100svh;
  padding:calc(var(--bar-h) + 20px) clamp(16px,4vw,40px) 84px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  opacity:0;
  /* Nur Skalieren, kein Verschieben nach unten. Eine Verschiebung wuerde die
     Ansicht waehrend der Einblendung ueber die Seitenkante hinausschieben,
     und genau dann kann man ein paar Pixel in leeren Raum scrollen. */
  transform:scale(.988);
  transition:opacity .42s var(--ease),transform .42s var(--ease);
}
.view[hidden]{display:none}
.view.on{opacity:1;transform:none}

/* ============ SPLASH ============ */

.view-splash{gap:0;padding-top:0;padding-bottom:0}

.splash-name{
  font-size:clamp(22px,4.4vw,42px);
  font-weight:500;
  letter-spacing:.02em;
  display:flex;align-items:center;justify-content:center;
  min-height:1.4em;
}
.scramble{white-space:pre}
/* Genau eine Zeichenzelle breit (0.6em bei dieser Mono-Schrift) und so hoch
   wie die Oberlaenge des l (0.74em). vertical-align:baseline setzt die
   Unterkante auf die Grundlinie, damit steht der Block exakt auf der Schrift. */
.caret{
  display:inline-block;width:.6em;height:.74em;margin-left:.06em;
  vertical-align:baseline;
  background:var(--accent);
  animation:blink 1.05s steps(1) infinite;
}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
body.splash-done .caret{animation-duration:1.5s;opacity:.85}

.splash-skip{
  position:absolute;bottom:clamp(30px,7vh,64px);left:50%;transform:translateX(-50%);
  font-size:10px;font-weight:500;letter-spacing:.28em;color:var(--text-secondary);
  padding:12px 20px;
  opacity:0;transition:opacity .5s var(--ease) .1s,color .2s var(--ease);
}
.splash-skip:hover{color:var(--text-primary)}
body.splash-done .splash-skip{opacity:1}

/* ============ LANDING: der Stapel ============ */

.view-home{justify-content:center}

.pile-wrap{
  position:relative;
  width:min(96vw,1180px);
  height:min(60svh,520px);
  display:flex;align-items:center;justify-content:center;
  touch-action:pan-y;
}
.pile{
  --sp:0;
  position:relative;width:100%;height:100%;
  cursor:grab;
}
.pile.dragging{cursor:grabbing}

/* Beim Ziehen darf der Browser weder Text markieren noch sein eigenes
   Bild-Ziehen starten. Beides wuerde den Zug abbrechen. */
.pile,.print,.flow,.card{
  user-select:none;-webkit-user-select:none;
}
/* Aufgefaechert fuehrt jeder Abzug an seinen Platz, das darf man sehen. */
body.pile-open .print{cursor:pointer}
.print img,.card img,.dump-grid img{-webkit-user-drag:none}

.print{
  position:absolute;top:50%;left:50%;
  width:clamp(116px,14vw,205px);
  margin:0;
  padding:var(--frame);
  background:#F2F0EC;
  box-shadow:0 18px 40px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.4);
  transform-origin:50% 50%;
  transform:
    translate(-50%,-50%)
    translate(
      calc((var(--rx) + (var(--sx) - var(--rx)) * var(--sp)) * 1px),
      calc((var(--ry) + (var(--sy) - var(--ry)) * var(--sp)) * 1px))
    rotate(calc((var(--rr) + (var(--sr) - var(--rr)) * var(--sp)) * 1deg))
    scale(var(--sc,1));
  will-change:transform;
}
.print img{width:100%;height:auto;aspect-ratio:auto 3 / 2;background:#20222A}
.print figcaption{
  position:absolute;left:10px;right:10px;bottom:8px;
  font-size:9px;font-weight:500;letter-spacing:.16em;
  color:#3A3B3E;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.home-text{
  position:absolute;
  top:calc(var(--bar-h) + 6vh);left:clamp(16px,4vw,54px);
  width:min(38ch,34vw);
  font-size:13px;color:var(--text-secondary);
  opacity:0;transform:translateX(-14px);
  transition:opacity .55s var(--ease),transform .55s var(--ease);
  pointer-events:none;
}
.home-text p+p{margin-top:1em}
.home-text p:last-child{color:var(--text-primary)}
body.pile-open .home-text{opacity:1;transform:none}

.hint{
  font-size:10px;font-weight:500;letter-spacing:.26em;
  color:var(--text-secondary);
  margin-top:26px;
  transition:opacity .4s var(--ease);
}
body.pile-open #pileHint{opacity:0}

/* ============ MENU ============ */

.win{
  width:min(92vw,520px);
  background:color-mix(in srgb,var(--panel) 88%,transparent);
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  backdrop-filter:blur(18px);
  box-shadow:0 34px 90px rgba(0,0,0,.62);
}
.win-bar{
  display:flex;align-items:center;gap:12px;
  height:38px;padding:0 12px;
  background:var(--chrome);
  border-bottom:1px solid var(--line);
}
.lights{display:flex;gap:7px}
.lights i{width:11px;height:11px;border-radius:50%;background:#3A3C42}
.lights i:first-child{background:#E0533F}
.lights i:nth-child(2){background:#D9A32C}
.lights i:nth-child(3){background:#48A64C}
.win-title{
  font-size:11px;font-weight:500;letter-spacing:.1em;color:var(--text-secondary);
}

.win-body{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:14px;padding:32px 26px 36px;
}
.folder{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:14px 6px;border-radius:8px;
  transition:background .2s var(--ease),transform .28s var(--ease);
}
.folder svg{width:clamp(46px,9vw,64px);height:auto;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.5));
  transition:transform .28s var(--ease);
}
.folder span{
  font-size:10px;font-weight:500;letter-spacing:.16em;color:var(--text-secondary);
  transition:color .2s var(--ease);
}
.folder:hover{background:rgba(255,255,255,.045)}
.folder:hover svg{transform:translateY(-4px)}
.folder:hover span{color:var(--text-primary)}

/* ============ WORK ============ */

.view-work{justify-content:center;gap:clamp(16px,3vh,32px)}

.series-nav{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:2px clamp(10px,1.7vw,24px);
  max-width:min(100%,1100px);
}
.series-btn{
  position:relative;padding:5px 2px 11px;
  font-size:10px;font-weight:500;letter-spacing:.17em;
  color:var(--text-secondary);
  transition:color .22s var(--ease);
}
.series-btn::after{
  content:"";position:absolute;left:50%;bottom:2px;
  width:4px;height:4px;border-radius:50%;background:var(--accent);
  transform:translateX(-50%) scale(0);
  transition:transform .3s var(--ease);
}
.series-btn:hover{color:var(--text-primary)}
.series-btn[aria-current="true"]{color:var(--accent)}
.series-btn[aria-current="true"]::after{transform:translateX(-50%) scale(1)}

.flow{
  position:relative;
  width:min(100vw,1300px);
  height:min(60svh,520px);
  cursor:grab;
  touch-action:pan-y;
}
.flow.dragging{cursor:grabbing}

/* Der Fokusrahmen war ein grosser Kasten im Akzentton um die ganze Reihe.
   Weg damit. Dass die Tastatur greift, zeigt jetzt der Hinweis darunter,
   der aufhellt. Der Fokus bleibt damit sichtbar, ohne laut zu sein. */
.flow:focus-visible{outline:none}
.flow:focus-visible + .flow-foot .hint{color:var(--text-primary)}

/* Feste Hoehe, freie Breite: Hoch- und Querformate liegen wie ein Filmstreifen
   nebeneinander, statt dass ein Hochformat die ganze Reihe ueberragt. */
.card{
  position:absolute;top:50%;left:50%;
  padding:var(--frame);
  background:#F2F0EC;
  box-shadow:0 22px 48px rgba(0,0,0,.6);
  transform-origin:50% 50%;
  will-change:transform,opacity;
}
/* Die entfernten Karten werden abgedunkelt statt durchsichtig gemacht.
   Durchsichtige Abzuege sehen aus wie Geister, dunkle sehen aus wie Tiefe. */
.card::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:#07080A;opacity:var(--dim,0);
}
/* Querformate bekommen weniger Hoehe als Hochformate. Bei gleicher Hoehe
   werden sie anderthalb mal so breit und passen dann nicht mehr aufs Bild. */
.card.wide img{height:clamp(128px,26vh,238px)}
.card img{
  height:clamp(160px,36vh,330px);
  width:auto;max-width:none;
  /* "auto 3/2" heisst: echtes Seitenverhaeltnis, sobald das Bild da ist,
     sonst ein 3:2-Kasten. Ohne das faellt ein fehlendes Bild auf null zusammen. */
  aspect-ratio:auto 3 / 2;
  background:#20222A;
}

.flow-foot{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.flow-note{
  font-size:13px;color:var(--text-secondary);max-width:52ch;min-height:1.6em;
  transition:opacity .28s var(--ease);
}
.flow-note[hidden]{display:none}
.flow-foot .hint{margin-top:0}

/* ============ 404 / GEAR ============ */

.view-404{gap:0;text-align:center}
.ghost{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-size:clamp(180px,34vw,420px);font-weight:600;
  color:#fff;opacity:.038;letter-spacing:-.03em;
  pointer-events:none;user-select:none;
}
.warn{width:clamp(64px,11vw,104px);height:auto;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.55));
  animation:warnPulse 5.5s var(--ease-soft) infinite -1.4s;
}
@keyframes warnPulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

.view-404 h2{
  margin-top:26px;
  font-size:clamp(15px,2.6vw,22px);font-weight:600;letter-spacing:.14em;
}
.view-404 p{margin-top:12px;color:var(--text-secondary);font-size:13px}

.btn{
  margin-top:34px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:13px 24px;
  border:1px solid var(--line);
  font-size:10px;font-weight:500;letter-spacing:.24em;
  color:var(--text-primary);
  transition:border-color .24s var(--ease),background .24s var(--ease),color .24s var(--ease);
}
.btn:hover{border-color:var(--accent);color:var(--accent)}

/* ============ ABOUT ============ */

.about{
  display:grid;
  grid-template-columns:minmax(200px,300px) minmax(0,1fr);
  gap:clamp(28px,5vw,64px);
  align-items:center;
  width:min(100%,880px);
}
.about-shot{margin:0;padding:var(--frame);background:#F2F0EC;box-shadow:0 22px 48px rgba(0,0,0,.55)}
.about-shot img{width:100%;height:auto;aspect-ratio:auto 4 / 5;background:#20222A;display:block}

.about-kicker{
  font-size:9px;font-weight:500;letter-spacing:.24em;color:var(--accent);
}
.about-text h2{
  margin-top:10px;
  font-size:clamp(19px,3.2vw,30px);font-weight:600;letter-spacing:.02em;
}
.about-text #aboutLines{margin-top:22px}
.about-text #aboutLines p{
  font-size:13.5px;line-height:1.75;color:var(--text-secondary);max-width:52ch;
}
.about-text #aboutLines p+p{margin-top:1em}
.about-text #aboutLines p:last-child{color:var(--text-primary)}
.about-where{
  margin-top:22px;
  font-size:9px;font-weight:500;letter-spacing:.22em;color:var(--text-secondary);
}
.about-where[hidden]{display:none}
.about-text .btn{margin-top:28px}

/* ============ CONTACT ============ */

.view-contact{gap:0;text-align:center}
.view-contact h2{
  font-size:clamp(17px,3.2vw,28px);font-weight:600;letter-spacing:.16em;
}
.icons{
  display:flex;gap:clamp(18px,4vw,44px);
  margin:clamp(34px,6vh,60px) 0;
}
.tile{
  display:flex;flex-direction:column;align-items:center;gap:18px;
}
/* Schatten und Kachel sind zwei getrennte Ebenen. Liegt der Schatten auf
   demselben Element wie die Bewegung, hebt er beim Schweben mit ab und
   wandert mit nach oben. Ein abgehobenes Ding wirft seinen Schatten aber
   unten und weicher. Deshalb: die Kachel steigt, der Schatten bleibt liegen
   und wird groesser und weicher. */
.tile-art{position:relative;display:block;line-height:0}
.tile-art svg{
  position:relative;z-index:1;
  width:clamp(54px,9vw,74px);height:auto;display:block;
  transition:transform .3s var(--ease);
}
.tile-art::after{
  content:"";position:absolute;z-index:0;
  left:9%;right:9%;bottom:-7px;height:15px;
  border-radius:50%;
  background:rgba(0,0,0,.62);
  filter:blur(8px);
  transition:transform .3s var(--ease),opacity .3s var(--ease);
}
.tile-label{
  display:block;
  font-size:9px;font-weight:500;letter-spacing:.2em;color:var(--text-secondary);
  transition:color .2s var(--ease);
}
.tile:hover .tile-art svg{transform:translateY(-8px)}
.tile:hover .tile-art::after{transform:scale(1.16);opacity:.55}
.tile:hover .tile-label{color:var(--text-primary)}

.shout{
  font-size:clamp(12px,2vw,15px);font-weight:500;letter-spacing:.2em;
  color:var(--accent);
}

/* ============ DUMP ============ */

/* ============ Seitenkopf (GEAR und DUMP) ============ */

.page-head{text-align:center}
.page-head h2{font-size:clamp(17px,3vw,26px);font-weight:600;letter-spacing:.18em}
.page-head p{margin-top:10px;color:var(--text-secondary);font-size:13px}

/* ============ Schlagwortfilter ============ */

.tags{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:8px;max-width:min(100%,860px);
}
.tag{
  padding:8px 13px;
  border:1px solid var(--line);
  font-size:9.5px;font-weight:500;letter-spacing:.16em;
  color:var(--text-secondary);
  transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease);
}
.tag:hover{color:var(--text-primary);border-color:#3B3E45}
.tag[aria-pressed="true"]{
  color:var(--canvas);background:var(--accent);border-color:var(--accent);
}
.tag-clear{border-style:dashed;opacity:.75}
.tag-clear:hover{opacity:1;color:var(--accent);border-color:var(--accent)}

.dump-count{
  font-size:9.5px;font-weight:500;letter-spacing:.2em;
  color:var(--text-secondary);
}

/* ============ DUMP ============ */

.view-dump{justify-content:flex-start;gap:clamp(20px,3.4vh,34px)}

/* Feste Bildhoehe, freie Breite, umbrechende Reihen. Beim Filtern rutschen
   die Reihen nur neu um. Ein Spaltenlayout wuerde bei jedem Klick und bei
   jedem nachgeladenen Bild die Bilder zwischen den Spalten springen lassen. */
.dump-grid{
  width:min(100%,1240px);
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(14px,2.2vw,30px);
}
.dump-grid figure{
  margin:0;padding:var(--frame);
  background:#F2F0EC;
  box-shadow:0 14px 32px rgba(0,0,0,.5);
  transform:rotate(var(--tilt,0deg));
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.dump-grid figure[hidden]{display:none}
/* Kurz aufleuchten, wenn man von der Startseite hierher gesprungen ist. */
.dump-grid figure.flash{
  outline:2px solid var(--accent);outline-offset:5px;
  animation:flashFade 1.8s var(--ease) forwards;
}
@keyframes flashFade{0%,55%{outline-color:var(--accent)}100%{outline-color:transparent}}
.dump-grid figure:hover{
  transform:rotate(0deg) translateY(-6px);
  box-shadow:0 24px 50px rgba(0,0,0,.6);
}
.dump-grid img{
  height:clamp(112px,18vh,182px);
  width:auto;max-width:none;
  aspect-ratio:auto 3 / 2;
  background:#20222A;
}

/* ============ GEAR ============ */

.view-gear{justify-content:flex-start;gap:clamp(24px,4.4vh,44px)}

.gear-grid{
  width:min(100%,1180px);
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(224px,1fr));
  gap:clamp(18px,2.4vw,34px);
}
/* Beim Schweben bewegt sich NUR das Bild, nicht die ganze Karte. Eine Karte,
   die sich anhebt, sieht aus als koennte man sie anklicken. Kann man nicht. */
.gear-card{
  background:var(--panel);
  border:1px solid var(--line);
  padding:12px 12px 20px;
  transition:border-color .3s var(--ease);
}
.gear-card:hover{border-color:#2F343A}
.gear-shot img{transition:transform .35s var(--ease)}
.gear-card:hover .gear-shot img{transform:scale(1.05)}
/* Freigestellte Produktfotos, also quadratisch und vollstaendig sichtbar
   statt beschnitten. Ein weicher Schein darunter setzt das Ding auf eine
   Flaeche, damit es nicht im Nichts schwebt. */
.gear-shot{
  margin-bottom:16px;
  display:flex;align-items:center;justify-content:center;
  padding:6px;overflow:hidden;
  background:
    radial-gradient(ellipse 62% 44% at 50% 76%,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 70%),
    radial-gradient(ellipse 78% 70% at 50% 42%,#1B1F24 0%,#0E1013 78%);
}
.gear-shot img{
  width:100%;height:auto;
  aspect-ratio:1 / 1;
  object-fit:contain;
  background:transparent;
}
.gear-kind{
  font-size:9px;font-weight:500;letter-spacing:.22em;color:var(--accent);
}
.gear-name{
  margin-top:7px;
  font-size:13px;font-weight:600;letter-spacing:.09em;color:var(--text-primary);
}
.gear-note{
  margin-top:10px;
  font-size:12px;line-height:1.6;color:var(--text-secondary);
}

/* ============ Grossansicht ============ */

body.lb-on{overflow:hidden}

.lb{
  position:fixed;inset:0;z-index:120;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(14px,4vw,56px);
  /* Dunkel genug, dass nur noch das Bild zaehlt, aber nicht ganz schwarz:
     die Seite dahinter bleibt als weiche Ahnung stehen. */
  background:rgba(5,5,8,.84);
  backdrop-filter:blur(20px);
  opacity:0;
  transition:opacity .26s var(--ease);
}
.lb[hidden]{display:none}
.lb.on{opacity:1}

.lb-stage{
  margin:0;max-width:100%;max-height:100%;
  display:flex;align-items:center;justify-content:center;
  transform:scale(.965);
  transition:transform .3s var(--ease);
}
.lb.on .lb-stage{transform:none}
.lb-stage img{
  max-width:min(100%,1600px);
  max-height:calc(100svh - clamp(96px,15vh,160px));
  width:auto;height:auto;
  padding:var(--frame);
  background:#F2F0EC;
  box-shadow:0 40px 96px rgba(0,0,0,.72);
  cursor:zoom-out;
}

.lb-close{
  position:absolute;top:clamp(10px,2.4vw,26px);right:clamp(10px,2.4vw,26px);
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  color:var(--text-secondary);
  transition:color .2s var(--ease);
}
.lb-close:hover{color:var(--text-primary)}
.lb-close svg{width:22px;height:22px}

.lb-arrow{
  position:absolute;top:50%;
  width:50px;height:50px;
  display:flex;align-items:center;justify-content:center;
  color:var(--text-secondary);
  transform:translateY(-50%);
  transition:color .2s var(--ease),transform .2s var(--ease);
}
.lb-arrow[hidden]{display:none}
.lb-arrow svg{width:25px;height:25px}
.lb-prev{left:clamp(2px,1.4vw,22px)}
.lb-next{right:clamp(2px,1.4vw,22px)}
.lb-arrow:hover{color:var(--text-primary)}
.lb-prev:hover{transform:translateY(-50%) translateX(-3px)}
.lb-next:hover{transform:translateY(-50%) translateX(3px)}

.lb-count{
  position:absolute;bottom:clamp(12px,3vh,30px);left:50%;transform:translateX(-50%);
  font-size:9.5px;font-weight:500;letter-spacing:.22em;color:var(--text-secondary);
}

@media (max-width:640px){
  .lb-stage img{max-width:calc(100vw - 116px)}
}

/* Die Bilder sagen von selbst, dass man sie anklicken kann. */
.card,.dump-grid figure{cursor:zoom-in}
.flow.dragging .card{cursor:grabbing}

/* ============ Fusszeile ============ */

/* Ein weicher Verlauf hinter der Fusszeile: gescrollte Inhalte laufen darunter
   aus, statt hinter dem Text durchzuschneiden. */
.foot::before{
  content:"";position:absolute;left:0;right:0;bottom:0;top:-46px;z-index:-1;
  background:linear-gradient(to top,var(--canvas) 46%,rgba(11,11,13,0));
}
.foot{
  position:fixed;left:0;right:0;bottom:0;z-index:55;
  display:flex;align-items:center;justify-content:center;gap:10px;
  height:44px;
  font-size:9px;font-weight:500;letter-spacing:.16em;
  color:var(--text-secondary);
  opacity:0;transition:opacity .5s var(--ease);
  pointer-events:none;
}
body.chrome-on .foot{opacity:.72}
.foot-dot{opacity:.5}

/* ============ Schmale Schirme ============ */

@media (max-width:860px){
  /* Auf schmalen Schirmen steht der Text sofort da, nicht erst nach dem
     Auffaechern. Sonst bleibt die obere Haelfte leer. */
  .home-text{
    position:static;width:min(46ch,88vw);margin-bottom:18px;
    opacity:1;transform:none;text-align:center;
  }
  #pileHint{display:none}
  .win-body{grid-template-columns:repeat(2,1fr);gap:16px;padding:28px 22px 32px}
  .about{grid-template-columns:1fr;justify-items:center;text-align:center;gap:28px}
  .about-shot{width:min(72vw,260px)}
  .about-text #aboutLines p{margin-left:auto;margin-right:auto}
  .pile-wrap{height:min(52svh,420px)}
  .print{width:clamp(102px,27vw,150px)}
  .flow{height:min(44svh,360px)}
  /* Auf schmalen Schirmen liegen vier Abzuege im Quadrat statt sechs in einer
     Reihe. Sechs in einer Reihe laufen aus dem Bild. */
  .print:nth-child(n+5){display:none}
}

@media (max-width:520px){
  .bar-left{display:none}
  .bar{grid-template-columns:1fr auto 1fr}
  .icons{gap:22px}
  .dump-grid{columns:2 130px}
}

/* Flache Fenster: die kleinen Hinweise haben keinen Platz */
@media (max-height:560px){
  .hint,.splash-skip{display:none}
  .view{padding-top:calc(var(--bar-h) + 10px);padding-bottom:56px}
}

/* Beruehrbare Ziele. Die Kopfzeilen-Links bekommen Polsterung statt eines neuen
   display-Werts: ein display hier wuerde das display:none der schmalen
   Schirme weiter unten ueberstimmen und den linken Text wieder einblenden. */
@media (pointer:coarse){
  .btn,.folder,.tile,.series-btn{
    min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  }
  .folder,.tile{flex-direction:column}
  .series-btn{padding-left:10px;padding-right:10px}
  .bar-left,.bar-right,.bar-mid{padding-top:14px;padding-bottom:14px}
}

/* ============ Pause, wenn der Tab versteckt ist ============ */

body.paused *,body.paused *::before,body.paused *::after{
  animation-play-state:paused !important;
}

/* ============ Reduzierte Bewegung ============ */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0ms !important;
  }
  .caret{opacity:1}
  .view{opacity:1;transform:none}
  .home-text{opacity:1;transform:none}
  .grain{animation:none}
  .aurora{animation:none}
}