/* RED Film Studio, Design-Ebene seit 18.09.2026: Markenrot, Glas, Licht. Gilt fuer alle Seiten. */
:root{--rf-rot:#E31E24}
@property --rf-winkel{syntax:'<angle>';inherits:false;initial-value:0deg}
html,body{overflow-x:clip}

/* Rot als Akzent */
.subheading{color:var(--rf-rot)}
.link{box-shadow:inset 0 -1px 0 0 var(--rf-rot)}
.link:hover{box-shadow:inset 0 -24px 0 0 var(--rf-rot);color:#fff}
.button:hover{box-shadow:inset 0 0 0 30px var(--rf-rot);color:#fff}

/* Licht hinter grossen Ueberschriften und dem Abschluss-Aufruf */
.section-top,.section-contact{position:relative;isolation:isolate}
.section-top::before,.section-contact::before{content:"";position:absolute;left:50%;top:55%;width:min(900px,90vw);height:min(520px,60vw);transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(227,30,36,.34),rgba(227,30,36,.10) 55%,transparent 100%);filter:blur(10px);z-index:-1;pointer-events:none;animation:rf-atmen 7s ease-in-out infinite}
.section-contact::before{opacity:.8}
@keyframes rf-atmen{0%,100%{opacity:.75;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}}

/* Menue unten als Glas */
.nav{background:linear-gradient(140deg,rgba(255,255,255,.13),rgba(255,255,255,.04));-webkit-backdrop-filter:blur(28px) saturate(170%);backdrop-filter:blur(28px) saturate(170%);
  border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 18px 50px rgba(0,0,0,.45)}
.nav-link:hover{background-color:rgba(227,30,36,.20)}
.nav-link.w--current{opacity:1;color:var(--rf-rot)}
.menu-button{background-color:rgba(255,255,255,.10)}
.menu-button:hover{box-shadow:inset 0 0 0 1px var(--rf-rot)}

/* Glas-Zonen: unscharfes Filmstill hinter Kartengruppen, weich ins Schwarz auslaufend */
section:has(.rf-glaszone){overflow-x:clip}
.rf-glaszone{position:relative;isolation:isolate}
.rf-glaszone::before{content:"";position:absolute;inset:-7rem -4vw;z-index:-1;pointer-events:none;background-size:cover;background-position:center;opacity:.95;
  -webkit-mask-image:radial-gradient(ellipse 70% 65% at 50% 50%,#000 35%,transparent 78%);mask-image:radial-gradient(ellipse 70% 65% at 50% 50%,#000 35%,transparent 78%)}
.rf-bg1::before{background-image:url(https://cdn.redfilmstudio.at/_assets/eigene/rf-glas-hintergrund-1.jpg)}
.rf-bg2::before{background-image:url(https://cdn.redfilmstudio.at/_assets/eigene/rf-glas-hintergrund-2.jpg)}
.rf-bg3::before{background-image:url(https://cdn.redfilmstudio.at/_assets/eigene/rf-glas-hintergrund-3.jpg)}
.rf-bg4::before{background-image:url(https://cdn.redfilmstudio.at/_assets/eigene/rf-glas-hintergrund-4.jpg)}

/* Glas-Karten */
.rf-karte{position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(140deg,rgba(255,255,255,.10),rgba(255,255,255,.035) 45%,rgba(255,255,255,.02))!important;
  -webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);
  border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 24px 60px rgba(0,0,0,.35);
  transition:transform .5s cubic-bezier(.19,1,.22,1),border-color .4s,background .4s}
.rf-karte:hover{background:linear-gradient(140deg,rgba(255,255,255,.14),rgba(255,255,255,.05) 45%,rgba(255,255,255,.03))!important;border-color:rgba(227,30,36,.45);transform:translateY(-4px)}
.rf-karte .image-overlay{background:transparent}
.rf-karte>*{position:relative;z-index:2}

/* Licht folgt der Maus */
.rf-karte::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .4s;
  background:radial-gradient(420px circle at var(--rf-mx,50%) var(--rf-my,50%),rgba(227,30,36,.20),rgba(255,255,255,.05) 35%,transparent 60%)}
.rf-karte:hover::after{opacity:1}

/* Lichtkante beim Darueberfahren */
.rf-karte::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;padding:1px;opacity:0;transition:opacity .4s;
  background:conic-gradient(from var(--rf-winkel),transparent 0 62%,rgba(227,30,36,.95) 74%,rgba(255,255,255,.9) 80%,transparent 88%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.rf-karte:hover::before{opacity:1;animation:rf-kante 2.6s linear infinite}
@keyframes rf-kante{to{--rf-winkel:360deg}}

@media (hover:none){.rf-karte::after,.rf-karte::before{display:none}.rf-karte:hover{transform:none}}
@media (prefers-reduced-motion:reduce){.section-top::before,.section-contact::before,.rf-karte:hover::before{animation:none}.rf-karte:hover{transform:none}}
@media (max-width:767px){.rf-glaszone::before{inset:-4rem -6vw}}

/* Projektkacheln: Glasrand mit Lichtkante (NICHT im Kopf der Startseite, dort ruckelte es, Wunsch Yildirim 18.09.) */
.work-link{isolation:isolate}
.work-link::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;padding:3px;
  background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,.14) 28%,rgba(255,255,255,.08) 72%,rgba(255,255,255,.38));
  -webkit-backdrop-filter:blur(6px) saturate(115%);backdrop-filter:blur(6px) saturate(115%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.85}
.work-link::before{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;padding:2px;opacity:0;transition:opacity .4s;
  background:conic-gradient(from var(--rf-winkel),transparent 0 62%,rgba(227,30,36,.95) 74%,rgba(255,255,255,.9) 80%,transparent 88%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.work-link:hover::before{opacity:1;animation:rf-kante 2.6s linear infinite}
.work-link{transition:box-shadow .5s}
.work-link:hover{box-shadow:0 0 0 1px rgba(227,30,36,.35),0 18px 60px rgba(227,30,36,.18)}

/* Beschriftung auf den Projektkacheln als Glas */
.filling-project{background:linear-gradient(140deg,rgba(255,255,255,.14),rgba(255,255,255,.04))!important;border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
@media (hover:none){.work-link::before{display:none}}
@media (prefers-reduced-motion:reduce){.work-link:hover::before{animation:none}}

/* Kopfzeile: Text links und "Kontakt" rechts blenden beim Scrollen aus, das Logo bleibt */
.navbar-top .block-top{transition:opacity .45s ease,transform .45s ease}
.rf-gescrollt .navbar-top .block-top{opacity:0;transform:translateY(-8px);pointer-events:none}

/* Selbst gehostetes Projektvideo (z. B. OH Cola) */
.rf-projektvideo{display:block;width:100%;aspect-ratio:16/9;height:auto;border-radius:var(--border-radius);background:#000;object-fit:contain}

/* KI-Projekte: einzelne Kachel ueber die volle Breite, solange es nur eine ist */
.rf-ki-liste .collection-item:only-child{grid-column:1/-1}
.rf-ki-liste .collection-item:only-child .work-link{height:44vw;max-height:720px}
@media (max-width:767px){.rf-ki-liste .collection-item:only-child .work-link{height:62vw}}

/* Logo oben groesser (Wunsch 18.09.): vorher 3em x 4.5em */
.navbar-top .logo{width:4.6em;height:6.9em}
@media (max-width:767px){.navbar-top .logo{width:3.8em;height:5.7em}}