/* Homepage cinematic gateway — intentionally isolated from editorial page styles. */
.mosaic-page{overflow-x:clip;background:#000;color:#fff}

.mosaic-home{min-height:100svh;min-inline-size:0;padding:clamp(10px,1.15vw,18px);overflow:clip;background:#000;isolation:isolate}
.cinema-window{position:relative;z-index:0;display:flex;flex-direction:column;min-height:calc(100svh - clamp(20px,2.3vw,36px));overflow:hidden;border:1px solid rgba(255,255,255,.1);padding:clamp(34px,5.5vh,66px) clamp(24px,6.2vw,96px) 18px;background:url("/assets/img/home-bg.png?v=1791214139") center/cover no-repeat #000;box-shadow:inset 0 0 130px #000,inset 0 0 0 8px rgba(0,0,0,.22),0 0 50px rgba(0,0,0,.8)}
.cinema-window:before{content:"";position:absolute;inset:8px;z-index:4;pointer-events:none;border:1px solid rgba(231,211,191,.045);clip-path:polygon(0 0,100% 0,100% calc(100% - 42px),calc(100% - 42px) 100%,0 100%)}
.cinema-window:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px);background-size:80px 80px;mask-image:linear-gradient(to bottom,#000,transparent 85%)}
.window-index{position:absolute;inset-block-start:24px;inset-inline-start:27px;display:flex;align-items:center;gap:9px;color:rgba(255,255,255,.34);font:600 9px/1 Arial,sans-serif;letter-spacing:.16em;direction:ltr}.window-index span{color:#50e3df}.window-index i{display:block;width:34px;height:1px;background:currentColor}.window-index bdi{font-weight:500}
.cinema-grain{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.22;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E");mix-blend-mode:soft-light}

.gateway-grid{inline-size:min(850px,74vw);max-inline-size:100%;min-inline-size:0;margin:auto;contain:inline-size;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(270px,.88fr);grid-template-rows:minmax(210px,1.08fr) minmax(150px,.76fr) minmax(150px,.76fr);grid-template-areas:"main main" "jera oud" "far oud";gap:clamp(16px,1.8vw,26px);direction:ltr}
.gateway-card{--edge:#fff;position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;min-width:0;padding:clamp(26px,2.7vw,40px);direction:rtl;color:#fff;border:1px solid var(--edge);border-radius:16px 4px;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));box-shadow:inset 0 0 46px rgba(0,0,0,.28),0 0 22px color-mix(in srgb,var(--edge) 32%,transparent);transition:transform .32s ease,filter .32s ease}
.gateway-card:before{content:"";position:absolute;inset:1px;z-index:-1;clip-path:inherit;background:linear-gradient(135deg,rgba(255,255,255,.15),transparent 42%)}
.gateway-card:after{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(circle at 50% 120%,rgba(255,255,255,.12),transparent 45%)}
.gateway-card:hover{transform:translateY(-5px);filter:brightness(1.14)}.gateway-card:focus-visible{outline:3px solid #fff;outline-offset:4px}.gateway-card:hover .enter-mark,.gateway-card:focus-visible .enter-mark{opacity:1;transform:translateX(-3px)}
.gateway-main{grid-area:main;--edge:#e05568;background:radial-gradient(circle at 13% 62%,rgba(214,72,90,.42) 0 16%,transparent 52%),linear-gradient(118deg,#a3202f 0%,#6f1826 44%,#340e15 80%,#180a0d 100%)}
.gateway-oud{grid-area:oud;--edge:#ed2873;background:#ed2873;color:#fff}
.gateway-jera{grid-area:jera;--edge:#50e3df;background:radial-gradient(circle at 22% 38%,rgba(238,40,115,.26) 0 8%,transparent 55%),linear-gradient(140deg,#50e3df 0%,#2bbdb8 55%,#0f807a 100%);color:#00201f}
.gateway-far{grid-area:far;--edge:#820766;background:radial-gradient(circle at 20% 40%,rgba(0,0,0,.42) 0 8%,transparent 58%),linear-gradient(140deg,#820766 0%,#5a0447 55%,#1a0114 100%)}
.frame-label{position:absolute;z-index:3;top:clamp(15px,1.7vw,24px);right:clamp(18px,2vw,32px);color:rgba(255,255,255,.5);font:600 clamp(.62rem,.9vw,.78rem)/1 Arial,sans-serif;letter-spacing:.22em;direction:ltr}
.card-copy{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;max-width:100%}
.brand-title{font-size:clamp(1.65rem,3vw,2.75rem);font-weight:900;line-height:1.25;letter-spacing:normal;white-space:nowrap}.gateway-main .brand-title{font-size:clamp(2.9rem,5.3vw,4.6rem)}.gateway-main .brand-title span{color:#ff9c9f}
.card-copy>b{font:500 clamp(.72rem,1.1vw,.9rem)/1.4 Arial,sans-serif;letter-spacing:.14em;opacity:.68;margin-block:6px 13px;white-space:nowrap}.card-copy strong{font-size:clamp(.95rem,1.45vw,1.25rem);font-weight:700;line-height:1.45;white-space:nowrap}.card-copy small{max-width:42ch;margin-block-start:5px;overflow-wrap:anywhere;font-size:clamp(.72rem,1.1vw,.88rem);line-height:1.65;opacity:.76}
.enter-mark{position:absolute;inset-inline-start:0;inset-block-end:0;display:flex;align-items:center;gap:7px;opacity:.48;font-size:.7rem;font-weight:700;transition:opacity .25s ease,transform .25s ease}.enter-mark i{font:400 1rem/1 Arial,sans-serif}.gateway-main .enter-mark{inset-inline-start:auto;inset-inline-end:calc(100% + 18px)}
.gateway-footer{width:min(850px,74vw);margin:clamp(14px,2.5vh,26px) auto 0;display:flex;flex-direction:column-reverse;align-items:center;text-align:center;gap:7px;direction:rtl;color:rgba(255,255,255,.6);font-size:.74rem}.gateway-footer p{margin:0}.gateway-footer nav{display:flex;gap:10px;direction:ltr}.gateway-footer a{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;color:#fff;transition:.2s}.gateway-footer a:hover{background:#fff;color:#111;transform:translateY(-2px)}.gateway-footer svg{width:19px;height:19px}

@media(max-width:768px){
 .mosaic-page{overflow-y:auto}.mosaic-home{min-height:100svh;height:auto;padding:0;overflow:visible}.cinema-window{min-height:100svh;height:auto;overflow:visible;border:0;padding:0 14px max(18px,env(safe-area-inset-bottom));background-attachment:scroll}
 .gateway-grid{inline-size:100%;max-inline-size:100%;margin:0;padding-block-start:max(20px,env(safe-area-inset-top));grid-template-columns:minmax(0,1fr);grid-template-rows:auto;grid-template-areas:"main" "oud" "jera" "far";gap:12px}
 .gateway-card{width:100%;max-width:100%;min-width:0;min-height:168px;scroll-margin-top:82px;padding:22px 17px;border-radius:10px 2px;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))}
 .gateway-main{min-height:220px}.gateway-oud{min-height:196px}.gateway-jera,.gateway-far{min-height:168px}.frame-label{top:13px;right:15px;font-size:.66rem}
 .gateway-main .brand-title{font-size:3.1rem}.brand-title{font-size:1.8rem}.card-copy{max-width:100%}.card-copy>b{font-size:.72rem;margin-block:3px 7px}.card-copy strong{font-size:.94rem}.card-copy small{font-size:.8rem;line-height:1.55}
 .gateway-footer{width:100%;margin-block-start:14px}.gateway-footer p{font-size:.68rem}
 .window-index{display:none}.enter-mark{display:none}
}
@media(max-width:540px){
 .cinema-window{padding-inline:10px}.gateway-grid{gap:10px}.gateway-card{padding:19px 13px;min-height:164px}.gateway-main{min-height:214px}.gateway-oud{min-height:190px}.gateway-jera,.gateway-far{min-height:164px}
 .gateway-main .brand-title{font-size:2.7rem}.brand-title{font-size:1.6rem}.card-copy strong{font-size:.88rem}.card-copy small{max-width:31ch;font-size:.74rem;line-height:1.5}.frame-label{font-size:.62rem;letter-spacing:.16em}.gateway-footer{margin-block-start:12px}
}
@media(max-width:390px){
 .cinema-window{padding-inline:8px}.gateway-grid{gap:9px}.gateway-card{padding:17px 11px;min-height:158px}.gateway-main{min-height:206px}.gateway-oud{min-height:184px}.gateway-jera,.gateway-far{min-height:158px}
 .gateway-main .brand-title{font-size:2.45rem}.brand-title{font-size:1.5rem}.card-copy>b{font-size:.68rem}.card-copy strong{font-size:.84rem}.card-copy small{font-size:.72rem}.frame-label{top:11px;right:12px}.gateway-footer{margin-block-start:9px;gap:2px}.gateway-footer p{font-size:.62rem}
}
@media(prefers-reduced-motion:reduce){.gateway-card{transition:none}.gateway-card:hover{transform:none}}
.card-sub2{margin-block-start:2px;opacity:.6}

/* --- Ticket #428 (2026-09-07): Markenlogo als dezentes ECK-Wasserzeichen.
   Der Kunde hat die frueher hier stehende Variante mit schwarzem Kasten
   ausdruecklich abgelehnt ("با پس زمینه ... خیلی بد کار شده بود"), deshalb
   KEIN background/padding mehr. Monochrom, damit es die typografische
   Mosaik-Identitaet nicht stoert und auf den dunklen Kacheln ebenso lesbar
   ist wie auf der hellen tuerkisen. Ecke oben-LINKS: der clip-path schneidet
   oben-rechts 18px diagonal weg, dort wuerde das Logo angeschnitten. --- */
.gateway-card .tile-mark{
  position:absolute;z-index:2;pointer-events:none;
  inset-block-start:clamp(13px,1.7vw,24px);left:clamp(15px,2vw,30px);
  width:auto;height:auto;max-width:min(34%,150px);max-height:clamp(22px,3.4vw,46px);
  object-fit:contain;background:none;padding:0;border-radius:0;
  opacity:.55;filter:brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0,0,0,.45));
  transition:opacity .32s ease,transform .32s ease;
}
.gateway-main .tile-mark{max-width:min(38%,240px);max-height:clamp(38px,5.6vw,82px);opacity:.82;filter:brightness(0) invert(1) drop-shadow(0 2px 5px rgba(0,0,0,.6))}
/* tkt453: .gateway-jera .tile-mark entfernt -- die Kachel hat kein Wasserzeichen
   mehr, ihr Schriftzug ist der Titel. Die Tinten-Regel lebt als
   .gateway-jera .brand-logotype weiter. */
.gateway-card:hover .tile-mark,.gateway-card:focus-visible .tile-mark{opacity:.85;transform:translateY(-2px)}

/* ── tkt453: der Markenname als Schriftzug statt als getippter Text ───────────
   Farbig eingesetzt verschwinden diese PNGs auf ihrer eigenen Kachel
   (farhonar 131,31,109 auf #820766), genau wie beim frueheren
   Eck-Wasserzeichen. Deshalb dieselbe Monochromisierung: weiss auf den
   dunklen Kacheln, dunkle Tinte auf der hellen tuerkisen (nur noch jera;
   oud ist seit der Kundenanfrage 2026-10-10 massiv #ed2873 mit weissem Text).
   Die Hoehe folgt der Zeilenhoehe des alten .brand-title, damit sich das
   Kachelraster nicht verschiebt. */
.card-copy .brand-logotype{display:block;width:min(64%,300px);height:auto;
  max-height:clamp(3.2rem,6.6vw,5.6rem);object-fit:contain;object-position:center;
  filter:brightness(0) invert(1) drop-shadow(0 1px 3px rgba(0,0,0,.45))}
.gateway-jera .card-copy .brand-logotype{filter:brightness(0) drop-shadow(0 1px 2px rgba(255,255,255,.45))}
.card-copy .tile-slogan{display:block;margin-block-start:4px;font-weight:700;
  font-size:clamp(.86rem,1.35vw,1.12rem);line-height:1.5;opacity:.94;max-width:34ch}
.gateway-main .card-copy .tile-slogan{font-size:clamp(1rem,1.7vw,1.35rem)}

@media(max-width:768px){
  .gateway-card .tile-mark{inset-block-start:12px;left:13px;max-width:32%;max-height:30px;opacity:.5}
  .gateway-main .tile-mark{max-height:36px}
  .card-copy .brand-logotype{width:min(70%,240px);max-height:3.4rem}
  .card-copy .tile-slogan{font-size:.88rem}.gateway-main .card-copy .tile-slogan{font-size:1rem}
}
@media(max-width:390px){
  .gateway-card .tile-mark{max-height:26px}.gateway-main .tile-mark{max-height:31px}
  .card-copy .brand-logotype{width:min(74%,210px);max-height:3rem}
  .card-copy .tile-slogan{font-size:.8rem}.gateway-main .card-copy .tile-slogan{font-size:.92rem}
}
@media(prefers-reduced-motion:reduce){
  .gateway-card .tile-mark{transition:none}.gateway-card:hover .tile-mark{transform:none}
}


/* ===== cr1156 §1 — kurzer, ruhiger Auftritt des Portals =====
   Erst Raum + Kinolicht, dann die vier Medienboxen mit Fade/Scale.
   Bewusst unter 1 s gesamt, nur opacity/transform (kein Layout-Shift).
   WICHTIG: fill-mode BACKWARDS, nicht both/forwards — sonst wuerde der
   Endzustand der Animation den bestehenden :hover-transform der Kacheln
   ueberschreiben, und genau der soll laut Anforderung erhalten bleiben. */
@keyframes cjPortalRoom{from{opacity:0;transform:scale(1.012)}to{opacity:1;transform:none}}
@keyframes cjPortalLight{from{opacity:0}to{opacity:1}}
@keyframes cjPortalCard{from{opacity:0;transform:translateY(14px) scale(.972)}to{opacity:1;transform:none}}
.mosaic-home .cinema-window{animation:cjPortalRoom .42s cubic-bezier(.22,.61,.36,1) backwards}
.mosaic-home .cinema-grain,
.mosaic-home .window-index{animation:cjPortalLight .50s ease-out .14s backwards}
.mosaic-home .gateway-card{animation:cjPortalCard .40s cubic-bezier(.22,.61,.36,1) backwards}
.mosaic-home .gateway-main{animation-delay:.30s}
.mosaic-home .gateway-oud{animation-delay:.35s}
.mosaic-home .gateway-jera{animation-delay:.40s}
.mosaic-home .gateway-far{animation-delay:.45s}
.mosaic-home .gateway-footer{animation:cjPortalLight .45s ease-out .52s backwards}
@media (prefers-reduced-motion:reduce){
  .mosaic-home .cinema-window,
  .mosaic-home .cinema-grain,
  .mosaic-home .window-index,
  .mosaic-home .gateway-card,
  .mosaic-home .gateway-footer{animation:none}
}

/* ===== cr1256 (09.09.2026) — zwei Wuensche aus der Aenderungsanfrage =====
   1) Der Schriftzug von سینماجرا trug eine EINGEBACKENE Unterzeile mit demselben
      Wortlaut wie der Slogan darunter — die Zeile stand also doppelt auf der
      Kachel. Entfernt wurde sie IM BILD (neue Datei ...-plain.png, das Original
      bleibt unangetastet); .tile-slogan bleibt wie gewuenscht stehen.
   2) Auf der doppelt hohen Kachel سینماعود stand der Titelblock unten, weil
      .gateway-card mit align-items:flex-end arbeitet — gemessen 83px unter der
      Kachelmitte. Er sitzt jetzt mittig. Damit die Hintergrund-Elemente der
      neuen Titelposition nicht in die Quere kommen (ausdruecklich mitbestellt),
      wandert der weisse Lichtfleck aus der oberen Haelfte (34%) nach unten
      (76%) und das Motiv rueckt kleiner in die freie Ecke.
   Bewusst NUR .gateway-oud: die drei anderen Kacheln sind flach, dort ist
   flex-end optisch bereits mittig. ===== */
.gateway-oud{align-items:center;--edge:#ed2873;
  background:#ed2873;color:#fff}
/* ===== /cr1256 ===== */

/* ===== Kundenwunsch 2026-10-11 — die gedaempften Eck-Schaubilder («شکلک») je
   Kachel wiederhergestellt (waren zwischenzeitlich entfernt). Je Kachel ein
   eigenes Motiv: سینماجهت = نوار نگاتیو + دوربین + بوم صدا · سینماعود = ذره‌بین روی
   فریم فیلم · سینماجرا = بلندگوی کارگردانی · فَرهُنر = نقاب‌های تئاتر. Reines
   Wasserzeichen hinter dem Text (z-index:0, pointer-events:none). ===== */
.mosaic-page .gateway-card .brand-icon{
  position:absolute;z-index:0;pointer-events:none;top:auto;right:auto;height:auto;
  fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
}
.mosaic-page .gateway-main .brand-icon-main{left:clamp(18px,3.4vw,54px);bottom:clamp(16px,2.4vw,34px);width:clamp(140px,18vw,238px);color:rgba(255,196,206,.20);stroke-width:3.4}
.mosaic-page .gateway-oud .brand-icon-oud{left:clamp(12px,1.6vw,26px);bottom:clamp(12px,1.6vw,24px);width:clamp(96px,11vw,150px);color:rgba(255,255,255,.21);transform:rotate(-7deg)}
.mosaic-page .gateway-jera .brand-icon-jera{left:clamp(12px,1.6vw,26px);bottom:clamp(12px,1.6vw,24px);width:clamp(86px,10vw,132px);color:rgba(0,32,31,.24)}
.mosaic-page .gateway-far .brand-icon-far{left:clamp(12px,1.6vw,26px);bottom:clamp(12px,1.6vw,24px);width:clamp(92px,10.5vw,142px);color:rgba(255,255,255,.18)}
@media(max-width:768px){
  .mosaic-page .gateway-main .brand-icon-main{width:min(56%,168px);left:12px;bottom:12px}
  .mosaic-page .gateway-oud .brand-icon-oud,
  .mosaic-page .gateway-jera .brand-icon-jera,
  .mosaic-page .gateway-far .brand-icon-far{width:min(36%,110px);left:11px;bottom:11px}
}