/* ==========================================================
   VIORA — Unterseiten: dieselbe leichte Veredelung wie die Startseite
   Ergänzt home-fx.css (Reveal, Buttons, Hover, Schatten) um
   Banner-Licht, Akkordeon, Menükarte und Kontakt. Keine Layout-,
   Text- oder Farbänderungen. Palette: Braun · Creme · Terrakotta.
   ========================================================== */

@media (prefers-reduced-motion:no-preference){

  /* Banner: Text gleitet ruhig ein */
  .page-hero-inner{animation:fx-rise 1.1s var(--fx-ease) .15s backwards;}

  /* Speisekarte: Gerichte reagieren leicht auf Hover */
  .menu-item{transition:transform .45s var(--fx-ease-soft);}
  .menu-item-head .name{transition:color .4s ease;}
  .menu-item-head .dots{transition:border-color .4s ease;}
  @media (hover:hover){
    .menu-item:hover{transform:translateX(5px);}
    .menu-item:hover .menu-item-head .name{color:var(--terracotta-deep);}
    .menu-item:hover .menu-item-head .dots{border-bottom-color:rgba(167,95,64,.6);}
  }

  /* Akkordeon (Mittagstisch / Impressum): weiches Aufklappen + Hover */
  .accordion-item summary{transition:color .4s ease, padding-left .4s var(--fx-ease-soft);}
  @media (hover:hover){
    .accordion-item summary:hover{color:var(--terracotta-deep);padding-left:10px;}
  }
  .accordion-item{transition:background-color .5s ease;}
  .accordion-item[open]{background:linear-gradient(180deg, rgba(198,122,86,.05), rgba(198,122,86,0) 70%);}
  .lunch-price-badge{box-shadow:0 14px 30px -14px rgba(32,20,13,.45);}

  /* Kontakt */
  .contact-map{transition:box-shadow .6s ease;}
  @media (hover:hover){
    .contact-map:hover{box-shadow:0 30px 60px rgba(32,20,13,.22);}
  }
  .contact-info-card a:not(.btn):not(.text-link){
    background-image:linear-gradient(var(--terracotta-deep),var(--terracotta-deep));
    background-repeat:no-repeat;background-position:left bottom;background-size:0% 1px;
    transition:background-size .4s ease, color .3s ease;
  }
  @media (hover:hover){
    .contact-info-card a:not(.btn):not(.text-link):hover{background-size:100% 1px;color:var(--terracotta-deep);}
  }
  .form-field input,.form-field textarea{transition:border-color .3s ease, box-shadow .3s ease, transform .3s ease;}
  @media (hover:hover){
    .form-field input:hover,.form-field textarea:hover{border-color:rgba(167,95,64,.45);}
  }
  .contact-form-section{box-shadow:inset 0 30px 50px -36px rgba(32,20,13,.18);}
}

/* Banner-Bild: sehr leichte Tiefe beim Wegscrollen (kein JS) */
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .page-hero-bg{
      scale:1.08;
      animation:fx-banner-par linear both;
      animation-timeline:scroll(root);
      animation-range:0 70vh;
    }
    @keyframes fx-banner-par{
      from{translate:0 0;}
      to{translate:0 3.5%;}
    }
  }
}

/* Banner-Licht: dasselbe weiche V wie im Hero der Startseite */
@media (prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){
  html.fx-on .page-hero-overlay::before{
    content:'';
    position:absolute;
    inset:-12%;
    pointer-events:none;
    background:
      conic-gradient(from 0deg at 50% 130.6%, transparent 0deg, rgba(247,240,229,0) 21deg, rgba(247,240,229,0.024) 23.25deg, rgba(247,240,229,0.077) 25.5deg, rgba(247,240,229,0.136) 27.75deg, rgba(247,240,229,0.17) 30deg, rgba(247,240,229,0.136) 32.25deg, rgba(247,240,229,0.077) 34.5deg, rgba(247,240,229,0.024) 36.75deg, rgba(247,240,229,0) 39deg, rgba(247,240,229,0) 321deg, rgba(247,240,229,0.024) 323.25deg, rgba(247,240,229,0.077) 325.5deg, rgba(247,240,229,0.136) 327.75deg, rgba(247,240,229,0.17) 330deg, rgba(247,240,229,0.136) 332.25deg, rgba(247,240,229,0.077) 334.5deg, rgba(247,240,229,0.024) 336.75deg, rgba(247,240,229,0) 339deg, transparent 360deg),
      conic-gradient(from 0deg at 50% 130.6%, transparent 0deg, rgba(226,166,136,0) 10deg, rgba(226,166,136,0.042) 15deg, rgba(226,166,136,0.135) 20deg, rgba(226,166,136,0.24) 25deg, rgba(226,166,136,0.3) 30deg, rgba(226,166,136,0.24) 35deg, rgba(226,166,136,0.135) 40deg, rgba(226,166,136,0.042) 45deg, rgba(226,166,136,0) 50deg, rgba(226,166,136,0) 310deg, rgba(226,166,136,0.042) 315deg, rgba(226,166,136,0.135) 320deg, rgba(226,166,136,0.24) 325deg, rgba(226,166,136,0.3) 330deg, rgba(226,166,136,0.24) 335deg, rgba(226,166,136,0.135) 340deg, rgba(226,166,136,0.042) 345deg, rgba(226,166,136,0) 350deg, transparent 360deg),
      radial-gradient(ellipse 50% 60% at 50% 130.6%, rgba(198,122,86,.12), rgba(198,122,86,0) 100%);
    -webkit-mask-image:radial-gradient(ellipse 100% 140% at 50% 130.6%, #000 0, rgba(0,0,0,.95) 30%, rgba(0,0,0,.7) 55%, rgba(0,0,0,.3) 80%, transparent 100%);
            mask-image:radial-gradient(ellipse 100% 140% at 50% 130.6%, #000 0, rgba(0,0,0,.95) 30%, rgba(0,0,0,.7) 55%, rgba(0,0,0,.3) 80%, transparent 100%);
    transform-origin:50% 130.6%;
    transform:translate3d(calc(var(--nx,0) * 2.2vw), calc(var(--ny,0) * 3%), 0) rotate(calc(var(--nx,0) * 2.5deg));
    opacity:.75;
    transition:opacity 1.6s ease;
    animation:fx-v-breathe 18s ease-in-out infinite alternate;
    will-change:transform,opacity;
  }
  html.fx-on .page-hero.fx-active .page-hero-overlay::before{opacity:1;}
}