/* ============================================================
   RMJ — عالم الإنارة الحديثة
   Gestaltung: „Licht im Dunkeln“

   Die Buehne ist schwarz, das Licht ist das Gestaltungsmittel.
   Orange erscheint nur dort, wo etwas leuchtet oder handelt:
   Rahmen, Knoepfe, Ziffern, aktive Zustaende. Nie als Flaeche.
   ============================================================ */

/* --- Schrift, lokal eingebunden ---------------------------
   Tajawal in vier Schnitten. Arabisch und Latein liegen
   getrennt vor, der Browser laedt nur den benoetigten Satz.
   ---------------------------------------------------------- */

@font-face{font-family:Tajawal;src:url(../assets/fonts/tajawal-latin-400-normal.woff2)format('woff2');font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212}
@font-face{font-family:Tajawal;src:url(../assets/fonts/tajawal-arabic-400-normal.woff2)format('woff2');font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:Tajawal;src:url(../assets/fonts/tajawal-latin-500-normal.woff2)format('woff2');font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20AC}
@font-face{font-family:Tajawal;src:url(../assets/fonts/tajawal-arabic-500-normal.woff2)format('woff2');font-weight:500;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:Tajawal;src:url(../assets/fonts/tajawal-latin-700-normal.woff2)format('woff2');font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20AC}
@font-face{font-family:Tajawal;src:url(../assets/fonts/tajawal-arabic-700-normal.woff2)format('woff2');font-weight:700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:Tajawal;src:url(../assets/fonts/tajawal-latin-800-normal.woff2)format('woff2');font-weight:800;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20AC}
@font-face{font-family:Tajawal;src:url(../assets/fonts/tajawal-arabic-800-normal.woff2)format('woff2');font-weight:800;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}


/* --- Werte ------------------------------------------------ */

:root{
  /* Buehne: drei Schwarzstufen, damit Flaechen sich abheben,
     ohne dass Grau ins Bild kommt. */
  --bg:      #000;
  --bg-2:    #0A0A0A;
  --surface: #121212;
  --line:    #1F1F1F;
  --line-2:  #2C2A28;

  /* Licht. Orange ist Akzent, nie Flaeche. */
  --amber:      #FF6A1A;
  --amber-deep: #C2410C;
  --amber-ink:  #1A0A02;    /* Schrift auf orangefarbenem Grund */

  --text:  #F5F3F0;
  --muted: #9A9490;
  --faint: #5E5955;

  /* Flaeche hinter Produktfotos. Die Aufnahmen haben hellen
     Hintergrund, deshalb hell — sie setzt das Bild fort. */
  --tile: #F2EEE7;

  --font: Tajawal, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Schriftgroessen wachsen mit der Breite, bleiben aber
     innerhalb fester Grenzen lesbar. */
  --fs-hero: clamp(2.5rem, 1.1rem + 6.2vw, 6rem);
  --fs-h2:   clamp(1.7rem, 1.1rem + 2.6vw, 3.1rem);
  --fs-h3:   clamp(1.12rem, 1rem + 0.5vw, 1.35rem);
  --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  --fs-sm:   0.9rem;
  --fs-xs:   0.76rem;

  /* Arabischer Satz braucht mehr Durchschuss als lateinischer. */
  --lh:       1.95;
  --lh-tight: 1.28;

  --wrap: 1320px;
  --pad:  clamp(1.15rem, 0.6rem + 2.6vw, 3.5rem);
  --sec:  clamp(4.5rem, 2.5rem + 8vw, 10rem);
  --gap:  clamp(0.8rem, 0.5rem + 1.2vw, 1.5rem);

  --r:    14px;
  --r-lg: 22px;
  --r-pill: 999px;

  --ease: cubic-bezier(.16,1,.3,1);
  --t:    .45s var(--ease);
  --t-fast: .22s var(--ease);

  color-scheme: dark;
}

/* --- Reset ------------------------------------------------ */

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* Die feste Kopfzeile darf Sprungziele nicht verdecken. */
  scroll-padding-top:86px;
}

body{
  font-family:var(--font);
  font-size:var(--fs-body);
  line-height:var(--lh);
  color:var(--text);
  background:var(--bg);
  min-height:100svh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img,svg,canvas{display:block;max-width:100%}
button,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul{list-style:none;padding:0}

h1,h2,h3{line-height:var(--lh-tight);font-weight:700;letter-spacing:-.01em;text-wrap:balance}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
p{text-wrap:pretty}

:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:6px}
:focus:not(:focus-visible){outline:none}

.skip{
  position:absolute;inset-inline-start:var(--pad);top:-100px;z-index:300;
  background:var(--amber);color:var(--amber-ink);
  padding:.7rem 1.25rem;border-radius:var(--r);font-weight:700;
  transition:top var(--t-fast);
}
.skip:focus{top:1rem}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}


/* --- Knoepfe ----------------------------------------------
   Mindestens 46px hoch, damit sie am Handy sicher zu treffen
   sind. Das Leuchten liegt im Schatten, nicht in der Flaeche.
   ---------------------------------------------------------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:48px;padding:.85rem 1.6rem;
  border-radius:var(--r-pill);
  font-size:var(--fs-sm);font-weight:700;line-height:1;
  border:1px solid transparent;
  transition:transform var(--t-fast),box-shadow var(--t-fast),
             background var(--t-fast),border-color var(--t-fast),color var(--t-fast);
}
.btn svg{width:19px;height:19px;fill:currentColor;flex-shrink:0}
.btn:active{transform:scale(.97)}

.btn--main{
  background:var(--amber);color:var(--amber-ink);
  box-shadow:0 0 0 1px rgba(255,106,26,.4),0 10px 34px -8px rgba(255,106,26,.55);
}
.btn--main:hover{box-shadow:0 0 0 1px rgba(255,106,26,.6),0 14px 44px -8px rgba(255,106,26,.75)}

.btn--ghost{border-color:var(--line-2);color:var(--text)}
.btn--ghost:hover{border-color:var(--amber);color:var(--amber);background:rgba(255,106,26,.06)}


/* --- Vorspann ---------------------------------------------
   Bleibt bis Schrift und erste Bilder da sind. Der Balken
   zeigt echten Fortschritt, keine gespielte Animation.
   ---------------------------------------------------------- */

.pre{
  position:fixed;inset:0;z-index:400;
  display:grid;place-items:center;
  background:var(--bg);
}
.pre__in{display:grid;justify-items:center;gap:1.75rem;width:min(260px,60vw)}
.pre__mark{width:100%;opacity:0}
.pre__mark svg{width:100%;height:auto}
.pre__bar{width:100%;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.pre__bar span{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--amber-deep),var(--amber));
  box-shadow:0 0 12px rgba(255,106,26,.8);
}
body.ready .pre{pointer-events:none}


/* --- Kopfzeile -------------------------------------------- */

.head{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:120;
  transition:background var(--t),border-color var(--t),backdrop-filter var(--t);
  border-block-end:1px solid transparent;
}
.head[data-stuck='true']{
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-block-end-color:var(--line);
}
.head__in{display:flex;align-items:center;gap:1rem;min-height:72px}
.head__logo{display:flex;align-items:center;gap:.7rem;flex-shrink:0}
.head__mark{width:66px;color:var(--amber);display:block}
.head__mark svg{width:100%;height:auto}
.head__sub{
  font-size:var(--fs-xs);color:var(--muted);white-space:nowrap;
  border-inline-start:1px solid var(--line-2);padding-inline-start:.7rem;
}
.head__nav{display:flex;gap:.3rem;margin-inline-start:auto}
.head__nav a{
  padding:.6rem .85rem;border-radius:var(--r);
  font-size:var(--fs-sm);font-weight:500;color:var(--muted);
  transition:color var(--t-fast),background var(--t-fast);
}
.head__nav a:hover{color:var(--text);background:rgba(255,255,255,.04)}
.head__lang{
  min-width:48px;min-height:40px;padding-inline:.8rem;
  border:1px solid var(--line-2);border-radius:var(--r-pill);
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;color:var(--muted);
  transition:color var(--t-fast),border-color var(--t-fast);
}
.head__lang:hover{color:var(--amber);border-color:var(--amber)}

@media (max-width:720px){
  .head__sub{display:none}
  .head__nav{gap:0}
  .head__nav a{padding-inline:.55rem;font-size:var(--fs-xs)}
}


/* --- Buehne -----------------------------------------------
   Die Lichtskulptur laeuft im Canvas dahinter. Der Schleier
   darueber haelt den Text unter allen Umstaenden lesbar.
   ---------------------------------------------------------- */

.hero{
  position:relative;
  min-height:100svh;
  display:grid;align-items:center;
  isolation:isolate;
  overflow:hidden;
}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}

/* Drei Lagen, die zusammen den Text tragen:
   1. ein Rand, der die Buehne nach aussen ins Schwarz fuehrt,
   2. ein Verlauf von der Textseite her, damit die Schrift nie
      auf den hellsten Partikeln liegt,
   3. ein Fuss, der weich in den naechsten Abschnitt uebergeht. */
.hero__veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to var(--veil-dir,left),rgba(0,0,0,.88) 0%,rgba(0,0,0,.62) 34%,transparent 68%),
    radial-gradient(125% 85% at 50% 42%,transparent 26%,rgba(0,0,0,.5) 76%,#000 100%),
    linear-gradient(to top,#000 2%,transparent 44%);
}
[dir='ltr'] .hero__veil{--veil-dir:right}

.hero__in{position:relative;z-index:2;padding-block:8rem 6rem;display:grid;justify-items:start;gap:1.6rem}

.hero__badge{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.5rem 1.05rem .5rem .85rem;
  border:1px solid rgba(255,106,26,.32);
  border-radius:var(--r-pill);
  background:rgba(255,106,26,.07);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:#FFB784;font-size:var(--fs-sm);font-weight:500;line-height:1.5;
  max-width:100%;
}
.hero__badge svg{width:19px;height:19px;flex-shrink:0;fill:none;stroke:var(--amber);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* Jede Zeile der Ueberschrift sitzt in einem Fenster und faehrt
   von unten herein. Deshalb overflow:hidden auf .ln. */
.hero__title{font-size:var(--fs-hero);font-weight:800;letter-spacing:-.02em;text-shadow:0 2px 30px rgba(0,0,0,.6)}
.hero__title .ln{display:block;overflow:hidden;padding-block:.06em}
.hero__title b{display:block;font-weight:800}
.hero__title .ln:last-child b{
  background:linear-gradient(100deg,var(--amber) 8%,#FFD2A8 52%,var(--amber-deep) 96%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

.hero__text{color:#B9B3AE;max-width:46ch;font-size:clamp(1rem,.95rem+.35vw,1.18rem);text-shadow:0 1px 18px rgba(0,0,0,.85)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-block-start:.6rem}

.hero__scroll{
  position:absolute;z-index:2;inset-block-end:1.9rem;inset-inline-start:50%;
  transform:translateX(50%);
  width:26px;height:42px;border:1px solid var(--line-2);border-radius:var(--r-pill);
  display:grid;justify-items:center;padding-block-start:8px;
}
[dir='ltr'] .hero__scroll{transform:translateX(-50%)}
.hero__scroll span{width:3px;height:7px;border-radius:2px;background:var(--amber);animation:wheel 1.9s var(--ease) infinite}
@keyframes wheel{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}

@media (max-width:720px){
  .hero__in{padding-block:7rem 5.5rem;gap:1.25rem}
  .hero__cta{width:100%}
  .hero__cta .btn{flex:1 1 100%}
}


/* --- Abschnittskoepfe ------------------------------------- */

.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.04em;
  color:var(--amber);margin-block-end:.9rem;
}
.eyebrow::before{content:'';width:26px;height:1px;background:currentColor;opacity:.55}

.sec-head{margin-block-end:clamp(2rem,1.2rem+2.6vw,3.5rem);max-width:52ch}
.sec-head p{color:var(--muted);margin-block-start:.9rem}


/* --- Drei Aussagen ---------------------------------------- */

.marks{padding-block:var(--sec);border-block-end:1px solid var(--line)}
.marks__grid{display:grid;gap:clamp(1.75rem,1rem+3vw,3.5rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.mark__n{
  display:block;font-size:var(--fs-xs);font-weight:700;letter-spacing:.18em;
  color:var(--amber);margin-block-end:.85rem;
}
.mark h2{font-size:var(--fs-h3);margin-block-end:.55rem}
.mark p{color:var(--muted);font-size:var(--fs-sm);line-height:1.85}


/* --- Katalog ---------------------------------------------- */

.cat{padding-block:var(--sec)}

/* Filterleiste. Waagerecht scrollbar, ohne Balken. */
.filters{
  display:flex;gap:.5rem;
  margin-block-end:clamp(1.5rem,1rem+1.6vw,2.5rem);
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  padding-block-end:.35rem;
  /* Am Rand ausblenden statt hart abschneiden. */
  mask-image:linear-gradient(to left,transparent,#000 22px,#000 calc(100% - 22px),transparent);
}
.filters::-webkit-scrollbar{display:none}
.pill{
  flex:0 0 auto;min-height:42px;padding:.55rem 1.05rem;
  border:1px solid var(--line-2);border-radius:var(--r-pill);
  font-size:var(--fs-sm);font-weight:500;color:var(--muted);white-space:nowrap;
  transition:color var(--t-fast),border-color var(--t-fast),background var(--t-fast);
}
.pill:hover{color:var(--text);border-color:var(--faint)}
.pill[aria-selected='true']{
  color:var(--amber);border-color:var(--amber);
  background:rgba(255,106,26,.09);
  box-shadow:0 0 22px -6px rgba(255,106,26,.5);
}
.pill__n{font-size:.72em;opacity:.65;margin-inline-start:.4rem}

/* Raster: zwei Spalten am Handy, mehr auf breiten Schirmen. */
.grid{display:grid;gap:var(--gap);grid-template-columns:repeat(2,1fr)}
@media (min-width:700px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1080px){.grid{grid-template-columns:repeat(4,1fr)}}

/* Produktkachel: nur Bild und Artikelnummer, kein Text darunter. */
.card{
  position:relative;display:block;
  aspect-ratio:1/1;
  border-radius:var(--r);
  overflow:hidden;
  background:var(--tile);
  border:1px solid var(--line);
  transition:border-color var(--t),box-shadow var(--t),transform var(--t);
  -webkit-tap-highlight-color:transparent;
  /* Kacheln ausserhalb des Bildes ueberspringt der Browser beim
     Zeichnen. Die angegebene Ersatzgroesse haelt die Bildlaufleiste
     dabei stabil. Bei ueber hundert Kacheln ist das der groesste
     Einzelgewinn fuers Tempo. */
  content-visibility:auto;
  contain-intrinsic-size:auto 260px;
}
.card img{
  width:100%;height:100%;
  object-fit:contain;
  transition:transform .7s var(--ease);
}
.card::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,106,26,0);
  transition:box-shadow var(--t);
}
.card:hover,.card:focus-visible{
  border-color:rgba(255,106,26,.55);
  box-shadow:0 14px 44px -14px rgba(255,106,26,.55);
  transform:translateY(-3px);
}
.card:hover img,.card:focus-visible img{transform:scale(1.06)}
.card:hover::after,.card:focus-visible::after{box-shadow:inset 0 0 0 1px rgba(255,106,26,.35)}
.card:active{transform:scale(.985)}

/* Artikelnummer als ruhiger Aufkleber oben. */
.code{
  position:absolute;inset-block-start:.55rem;inset-inline-start:.55rem;z-index:2;
  padding:.28rem .6rem;
  border-radius:var(--r-pill);
  background:rgba(0,0,0,.62);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,106,26,.4);
  color:#FFC49B;
  font-size:.66rem;font-weight:700;letter-spacing:.1em;line-height:1.5;
  direction:ltr;
  pointer-events:none;
}

.more{display:grid;justify-items:center;margin-block-start:clamp(2rem,1.4rem+2vw,3.25rem)}
.more[hidden]{display:none}


/* --- Ueber uns -------------------------------------------- */

.about{padding-block:var(--sec);border-block-start:1px solid var(--line)}
.about__in{display:grid;gap:clamp(2.25rem,1.5rem+4vw,5rem);align-items:center}
@media (min-width:900px){.about__in{grid-template-columns:1.35fr 1fr}}
.about__text p{color:var(--muted);margin-block-start:1.1rem}
.about__text .btn{margin-block-start:1.9rem}

.facts{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.facts li{background:var(--bg-2);padding:1.6rem 1.5rem;display:grid;gap:.15rem}
.facts strong{
  font-size:clamp(1.9rem,1.3rem+2vw,2.9rem);font-weight:800;line-height:1;
  color:var(--amber);letter-spacing:-.02em;
}
.facts span{color:var(--muted);font-size:var(--fs-sm)}


/* --- Kontakt ---------------------------------------------- */

.contact{padding-block:var(--sec);border-block-start:1px solid var(--line)}
.contact__grid{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}

.ccard{
  display:flex;align-items:flex-start;gap:1rem;
  padding:1.5rem;min-height:120px;
  background:var(--bg-2);
  border:1px solid var(--line);border-radius:var(--r-lg);
  transition:border-color var(--t),background var(--t),transform var(--t);
}
a.ccard:hover{border-color:rgba(255,106,26,.5);background:#0F0D0B;transform:translateY(-2px)}
.ccard__ico{
  flex-shrink:0;width:44px;height:44px;display:grid;place-items:center;
  border:1px solid rgba(255,106,26,.3);border-radius:var(--r);
  color:var(--amber);
}
.ccard__ico svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ccard__ico svg.solid{fill:currentColor;stroke:none}
.ccard__t{display:block;font-size:var(--fs-xs);color:var(--faint);letter-spacing:.05em;margin-block-end:.2rem}
.ccard__v{display:block;font-weight:700;line-height:1.6;word-break:break-word}
.ccard--wide{grid-column:1/-1}


/* --- Fusszeile -------------------------------------------- */

.foot{border-block-start:1px solid var(--line);padding-block:3rem 2.25rem;background:var(--bg-2)}
.foot__in{display:grid;justify-items:center;gap:1rem;text-align:center}
.foot__mark{width:74px;color:var(--faint);display:block}
.foot__mark svg{width:100%;height:auto}
.foot__note{color:var(--faint);font-size:var(--fs-xs);max-width:44ch}
.foot__rights{color:var(--faint);font-size:var(--fs-xs)}


/* --- Dauerhafter WhatsApp-Knopf ---------------------------
   Sitzt oberhalb der Fusszeile des Geraets, damit er auf dem
   iPhone nicht unter der Systemleiste verschwindet.
   ---------------------------------------------------------- */

.fab{
  position:fixed;z-index:130;
  inset-block-end:calc(1.1rem + env(safe-area-inset-bottom));
  inset-inline-end:1.1rem;
  width:56px;height:56px;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--amber);color:var(--amber-ink);
  box-shadow:0 0 0 1px rgba(255,106,26,.45),0 12px 34px -8px rgba(255,106,26,.7);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.9);
  transition:opacity var(--t),transform var(--t),visibility var(--t);
}
.fab svg{width:29px;height:29px;fill:currentColor}
.fab[data-show='true']{opacity:1;visibility:visible;transform:none}
.fab:active{transform:scale(.94)}


/* --- Vollbildansicht -------------------------------------- */

.lb{
  position:fixed;inset:0;z-index:200;
  display:grid;place-items:center;
  background:rgba(0,0,0,.97);
  opacity:0;visibility:hidden;
  transition:opacity var(--t),visibility var(--t);
  padding:clamp(1rem,3vw,2.5rem);
  touch-action:pan-y;
}
.lb[data-open='true']{opacity:1;visibility:visible}

.lb__stage{
  display:grid;gap:1.1rem;justify-items:center;
  width:min(980px,100%);max-height:100%;
}
.lb__code{
  padding:.34rem .85rem;border-radius:var(--r-pill);
  border:1px solid rgba(255,106,26,.45);background:rgba(255,106,26,.08);
  color:#FFC49B;font-size:var(--fs-xs);font-weight:700;letter-spacing:.14em;direction:ltr;
}
.lb__wrap{
  width:100%;
  /* Bildhoehe so begrenzen, dass Nummer und Knopf immer sichtbar
     bleiben, auch auf niedrigen Handy-Bildschirmen. */
  height:min(62svh,640px);
  display:grid;place-items:center;
  background:var(--tile);border-radius:var(--r-lg);overflow:hidden;
}
.lb__wrap img{width:100%;height:100%;object-fit:contain}
.lb__foot{display:grid;justify-items:center;gap:.75rem}
.lb__count{color:var(--faint);font-size:var(--fs-xs);letter-spacing:.1em;direction:ltr}
/* Preis erscheint nur, wenn er gepflegt und freigeschaltet ist. */
.lb__price{color:var(--amber);font-weight:700;font-size:1.15rem}
.lb__price[hidden]{display:none}

.lb__x{
  position:absolute;inset-block-start:calc(.9rem + env(safe-area-inset-top));
  inset-inline-end:.9rem;
  width:46px;height:46px;display:grid;place-items:center;
  border:1px solid var(--line-2);border-radius:50%;color:var(--muted);
  background:rgba(0,0,0,.5);
  transition:color var(--t-fast),border-color var(--t-fast);
}
.lb__x:hover{color:var(--amber);border-color:var(--amber)}
.lb__x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}

.lb__nav{
  position:absolute;inset-block-start:50%;transform:translateY(-50%);
  width:52px;height:52px;display:grid;place-items:center;
  border:1px solid var(--line-2);border-radius:50%;
  color:var(--muted);background:rgba(0,0,0,.5);
  transition:color var(--t-fast),border-color var(--t-fast);
}
.lb__nav:hover{color:var(--amber);border-color:var(--amber)}
.lb__nav svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* Die Pfeile stehen logisch, nicht raeumlich: im arabischen
   Satz zeigt „weiter“ nach links. */
.lb__nav--p{inset-inline-start:.75rem}
.lb__nav--n{inset-inline-end:.75rem}
[dir='rtl'] .lb__nav svg{transform:scaleX(-1)}

@media (max-width:640px){
  /* Auf dem Handy wird gewischt statt geklickt. */
  .lb__nav{display:none}
  .lb__wrap{height:min(58svh,520px)}
}


/* --- Bewegung --------------------------------------------- */

/* Ausgangszustand fuer alles, was beim Blaettern erscheint.
   GSAP hebt ihn auf. Ohne JavaScript bleibt der Inhalt sichtbar,
   deshalb setzt js/app.js diese Klasse erst selbst. */
.js .reveal,.js .card{opacity:0}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .js .reveal,.js .card{opacity:1}
  .hero__scroll span{animation:none}
}