/* Die laufende Kartenwand — Hintergrund der oeffentlichen Startseite und der
   Anmeldeseiten.

   Aus `landing.css` herausgeloest, als Leon sie auch hinter der Anmeldung
   haben wollte: „Die Passwortseite sollte genau wie der Header das selbe
   Hintergrund Bild haben." Zwei Kopien derselben Wand waeren zwei Orte, an
   denen man eine Aenderung vergessen kann.

   Die Tonwerte stehen hier und nicht in `app.css` oder `landing.css`, weil sie
   nur die Wand betreffen und beide Seiten dieselben brauchen. Der Schleier
   darueber deckt zu 93 % — deshalb traegt die Wand auch dann, wenn noch keine
   Kartenbilder auf der Platte liegen. */

:root{
  --wall-base:#efe0c8;
  --wall-s1:rgba(250,242,229,.93);--wall-s2:rgba(250,242,229,.84);
  --wall-s3:rgba(250,242,229,.56);--wall-s4:rgba(250,242,229,.38);
  --wall-glow:rgba(226,96,15,.34);
  --wall-mask:linear-gradient(180deg,#000 0%,#000 52%,rgba(0,0,0,.45) 84%,rgba(0,0,0,0) 100%);
  --rowH:max(152px, calc((110svh + 17vw - 48px) / 5));
}
:root[data-theme="dark"]{
  --wall-base:#121316;
  --wall-s1:rgba(18,19,22,.94);--wall-s2:rgba(18,19,22,.86);
  --wall-s3:rgba(18,19,22,.6);--wall-s4:rgba(18,19,22,.42);
  --wall-glow:rgba(166,177,188,.3);
}
@media (min-width:900px){:root{--rowH:max(262px, calc((110svh + 17vw - 48px) / 5));}}

.wall{position:absolute;inset:0;overflow:hidden;-webkit-mask-image:var(--wall-mask);mask-image:var(--wall-mask)}
.wall-base{position:absolute;inset:0;background:var(--wall-base)}
.wall-rows{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-9deg);width:max-content;display:flex;flex-direction:column;gap:12px}
.cw-row{height:var(--rowH);display:flex;gap:12px;width:max-content}
/* Die Karten sind Hintergrund, nicht Inhalt — leicht zurueckgenommen, damit
   der Titel darueber steht und nicht dagegen. Kartenrueckseiten tragen das
   von sich aus besser als Vorderseiten: ein Ruecken ist ein Muster, eine
   Vorderseite ein Bild mit eigenem Blickfang. Deshalb nur wenig. */
.cw-row img{height:100%;width:auto;aspect-ratio:63/88;object-fit:cover;
  border-radius:4.5%/3.4%;display:block;
  filter:saturate(.88) brightness(1.03) contrast(.96)}
/* Eine Wandkarte ohne Bild dahinter. Kein Fehlerzustand: unter dem Schleier
   tragen Form und Schatten sie allein. */
.cw-row img:not([src]){
  width:calc(var(--rowH) * 63 / 88);
  background:var(--surface-2, #f1e3ce);
  border:1px solid var(--border, #e3cfaf);
  box-shadow:0 6px 18px rgba(42,16,11,.10)}
.wall-veil{position:absolute;inset:0;background:radial-gradient(ellipse 62% 58% at 50% 48%,var(--wall-s1) 0%,var(--wall-s2) 42%,var(--wall-s3) 72%,var(--wall-s4) 100%)}
.wall-glow{position:absolute;inset:0;background:radial-gradient(ellipse 46% 40% at 50% 96%,var(--wall-glow) 0%,rgba(0,0,0,0) 70%);opacity:.5}

@keyframes cwRowL{from{transform:translateX(0)}to{transform:translateX(-33.3333%)}}
@keyframes cwRowR{from{transform:translateX(-33.3333%)}to{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){.cw-row{animation:none !important}}

/* Die Anmeldeseiten: dieselbe Wand, aber hinter einem Kasten statt hinter
   einem Titel. Sie fuellt das Fenster, der Inhalt liegt darueber. */
.wall-page{position:fixed;inset:0;z-index:0;pointer-events:none}
.wall-page + .scroll, body:has(.wall-page) .scroll{position:relative;z-index:1}