/*
Theme Name: Alpine Retreat
Theme URI: https://alpine-retreat.at
Description: Modernes Child-Theme für Astra – warmes, naturnahes Alpen-Design im Apple-Stil: frosted Header, weiche Übergänge, ruhiges Raster, edle Typografie. Stylt Spectra-(UAGB) und Astra-Elemente, ohne Inhalte zu verändern.
Author: alpine-retreat.at
Template: astra
Version: 2.7.0
Text Domain: alpine-retreat-child
*/

/* =================================================================
   DESIGN-TOKENS
   ================================================================= */
:root{
  --sand:#f3ede3;
  --cream:#faf7f1;
  --paper:#fffdf9;
  --bark:#2b2620;
  --stone:#6f665b;
  --stone-soft:#8a8073;
  --moss:#5a6650;
  --moss-dark:#3f4a38;
  --clay:#a8754f;
  --clay-deep:#8c5d3c;
  --line:rgba(43,38,32,.10);
  --line-soft:rgba(43,38,32,.06);

  --r-sm:12px;
  --r-md:18px;
  --r-lg:26px;
  --r-xl:34px;

  --shadow-sm:0 2px 10px -4px rgba(43,38,32,.18);
  --shadow-md:0 18px 40px -22px rgba(43,38,32,.30);
  --shadow-lg:0 40px 80px -32px rgba(43,38,32,.34);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.34,1.56,.64,1);

  --nav-h:78px;
}

/* =================================================================
   BASIS
   ================================================================= */
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--bark);
  background:var(--cream);
  line-height:1.72;
  font-weight:300;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
::selection{ background:var(--moss); color:#fff; }
img{ max-width:100%; height:auto; }

/* =================================================================
   TYPOGRAFIE
   ================================================================= */
h1,h2,h3,h4,h5,
.uagb-ifb-title,
.wp-block-uagb-advanced-heading .uagb-heading-text,
.entry-title,.ast-archive-title,.site-title,
.elementor-heading-title{
  font-family:'Cormorant Garamond',Georgia,serif !important;
  font-weight:600 !important;
  line-height:1.1 !important;
  letter-spacing:0 !important;
  color:var(--bark);
}
h1,.entry-title{ font-size:clamp(42px,6.5vw,82px) !important; line-height:1.04 !important; }
h2{ font-size:clamp(32px,4.6vw,58px) !important; }
h3,.uagb-ifb-title{ font-size:clamp(22px,2.4vw,30px) !important; }
p{ font-weight:300; }
.entry-content p{ color:var(--stone); }
strong,b{ font-weight:500; color:var(--bark); }

/* feine Eyebrow-Label-Optik */
.ar-eyebrow,.wp-block-uagb-advanced-heading .uagb-desc-text{
  font-family:'Outfit',sans-serif;
}
.ar-eyebrow{
  color:var(--clay);
  font-size:13px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;
}

/* =================================================================
   LINKS  – mit weichem Übergang
   ================================================================= */
a{ color:var(--clay); text-decoration:none; transition:color .35s var(--ease); }
a:hover{ color:var(--clay-deep); }
.entry-content a:not(.wp-block-button__link):not(.uagb-infobox-cta-link):not(.menu-link){
  background-image:linear-gradient(var(--clay),var(--clay));
  background-size:0% 1.5px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .4s var(--ease-out),color .35s var(--ease);
}
.entry-content a:not(.wp-block-button__link):not(.uagb-infobox-cta-link):not(.menu-link):hover{
  background-size:100% 1.5px;
}

/* =================================================================
   HEADER  –  Apple-like frosted, IMMER lesbar
   (überschreibt Astras transparenten Header mit weißer Schrift)
   ================================================================= */
#masthead,
.site-header,
.ast-theme-transparent-header #masthead{
  position:sticky !important;
  top:0; left:0; right:0;
  z-index:999;
}
.main-header-bar,
.ast-primary-header-bar,
.ast-theme-transparent-header .main-header-bar,
.ast-theme-transparent-header .ast-primary-header-bar,
.site-header .ast-above-header,
.site-header .ast-below-header{
  background:rgba(250,247,241,.72) !important;
  background-image:none !important;
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line-soft) !important;
  box-shadow:none !important;
  transition:padding .4s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease);
}
/* dezenter Schatten + kompakter, sobald gescrollt wird */
body.ar-scrolled .main-header-bar,
body.ar-scrolled .ast-primary-header-bar{
  background:rgba(250,247,241,.86) !important;
  box-shadow:0 8px 30px -18px rgba(43,38,32,.4) !important;
}

/* Logo nicht mehr weiß einfärben (Transparent-Header-Filter entfernen) */
.ast-theme-transparent-header .site-logo-img img,
.site-logo-img img,.custom-logo{ filter:none !important; transition:opacity .35s var(--ease); }

/* Menü-Text IMMER dunkel & lesbar – überschreibt das Weiß des transparenten Headers */
.main-header-menu .menu-link,
.ast-builder-menu .main-header-menu .menu-link,
.ast-theme-transparent-header .ast-builder-menu .main-header-menu .menu-link,
.ast-theme-transparent-header .ast-builder-menu .main-header-menu .menu-item > .menu-link,
.ast-theme-transparent-header .main-header-menu a,
.site-title a,
.ast-theme-transparent-header .site-title a,
.ast-header-navigation-arrow,
.ast-theme-transparent-header .ast-header-navigation-arrow{
  color:var(--bark) !important;
  font-family:'Outfit',sans-serif;
  font-weight:400;
  font-size:15px;
  letter-spacing:.012em;
  transition:color .3s var(--ease),opacity .3s var(--ease);
}
.main-header-menu .menu-item > .menu-link{ padding-left:18px !important; padding-right:18px !important; }
.main-header-menu .menu-item:hover > .menu-link,
.ast-theme-transparent-header .ast-builder-menu .main-header-menu .menu-item:hover > .menu-link{
  color:var(--clay) !important;
}
.site-title a{ font-weight:600 !important; font-size:24px !important; }

/* ---- DROPDOWN / Untermenü – frosted Apple-Karte ---- */
.main-header-menu .sub-menu,
.ast-desktop .main-header-menu .sub-menu,
.ast-theme-transparent-header .main-header-menu .sub-menu{
  background:rgba(255,253,249,.92) !important;
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  backdrop-filter:saturate(180%) blur(22px);
  border:1px solid var(--line-soft) !important;
  border-radius:16px !important;
  box-shadow:var(--shadow-md) !important;
  padding:9px !important;
  margin-top:10px !important;
  min-width:220px;
}
.main-header-menu .sub-menu .menu-item .menu-link,
.ast-theme-transparent-header .main-header-menu .sub-menu .menu-link{
  color:var(--bark) !important;
  border-radius:10px;
  padding:11px 16px !important;
  font-size:14.5px !important;
  transition:background .3s var(--ease),color .3s var(--ease),padding-left .3s var(--ease);
}
.main-header-menu .sub-menu .menu-item .menu-link:hover{
  background:var(--sand) !important;
  color:var(--moss-dark) !important;
  padding-left:20px !important;
}
/* externe Links im Dropdown mit ↗ */
.main-header-menu .sub-menu a[href^="http"]:not([href*="alpine-retreat.at"]) .menu-link,
.main-header-menu .sub-menu a[href^="http"]:not([href*="alpine-retreat.at"]){ }
.main-header-menu .sub-menu .menu-link[href^="http"]:not([href*="alpine-retreat.at"])::after{
  content:" ↗"; opacity:.5; font-size:.85em;
}

/* ---- KONTAKT als hervorgehobener Pill-Button (bleibt weiß) ---- */
.ast-builder-menu .main-header-menu > .menu-item > a[href*="contact"],
.ast-builder-menu .main-header-menu > .menu-item > a[href*="kontakt"],
.main-header-menu > .menu-item > a[href*="contact"],
.ast-theme-transparent-header .ast-builder-menu .main-header-menu > .menu-item > a[href*="contact"]{
  color:#fff !important;
  background:var(--moss);
  border-radius:100px;
  padding:10px 24px !important;
  margin-left:10px;
  box-shadow:0 6px 18px -10px rgba(90,102,80,.7);
  transition:background .35s var(--ease),transform .35s var(--spring),box-shadow .35s var(--ease);
}
.ast-builder-menu .main-header-menu > .menu-item > a[href*="contact"]:hover,
.main-header-menu > .menu-item > a[href*="contact"]:hover{
  background:var(--clay) !important;color:#fff !important;
  transform:translateY(-2px);
  box-shadow:0 12px 26px -10px rgba(168,117,79,.7);
}

/* Mobile-Menü-Trigger */
.ast-mobile-menu-buttons .menu-toggle,
.ast-button-wrap .menu-toggle{ background:var(--moss) !important; border-radius:10px !important; }
.ast-hf-mobile-menu .menu-link{ color:var(--bark) !important; }

/* =================================================================
   BUTTONS  –  Apple-like Pills, weicher Fill-Übergang
   ================================================================= */
.wp-block-button__link,
.uagb-ifb-button-wrapper .uagb-infobox-cta-link,
.wp-block-uagb-buttons-child .uagb-button__link,
.ast-button,.button,
input[type="submit"],
.elementor-button{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--moss) !important;color:#fff !important;
  border:none !important;border-radius:100px !important;
  padding:15px 32px !important;
  font-family:'Outfit',sans-serif !important;
  font-size:15px !important;font-weight:500 !important;letter-spacing:.01em;
  box-shadow:0 10px 26px -14px rgba(90,102,80,.8) !important;
  transition:background .4s var(--ease),transform .4s var(--spring),box-shadow .4s var(--ease) !important;
  cursor:pointer;
}
.wp-block-button__link:hover,
.uagb-ifb-button-wrapper .uagb-infobox-cta-link:hover,
.wp-block-uagb-buttons-child .uagb-button__link:hover,
.ast-button:hover,.button:hover,input[type="submit"]:hover,.elementor-button:hover{
  background:var(--clay) !important;color:#fff !important;
  transform:translateY(-3px);
  box-shadow:0 18px 34px -14px rgba(168,117,79,.75) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link{
  background:transparent !important;color:var(--moss-dark) !important;
  border:1.5px solid var(--moss) !important;box-shadow:none !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover{
  background:var(--moss) !important;color:#fff !important;
}

/* =================================================================
   SPECTRA INFO-BOXEN  =  Apartment-/Feature-Karten
   ================================================================= */
.wp-block-uagb-info-box .uagb-infobox,
.uagb-infobox{
  background:var(--paper);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  padding:0;
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out);
}
.wp-block-uagb-info-box:hover .uagb-infobox,
.uagb-infobox:hover{
  transform:translateY(-10px);
  box-shadow:var(--shadow-lg);
}
/* Bild in der Box randlos oben, mit Zoom */
.uagb-ifb-image-content{ overflow:hidden; margin:0 !important; }
.uagb-ifb-image-content img{
  width:100%;border-radius:0 !important;
  transition:transform 1s var(--ease-out);
}
.uagb-infobox:hover .uagb-ifb-image-content img{ transform:scale(1.05); }
/* Textbereich der Box bekommt Innenabstand */
.uagb-ifb-title-wrap,.uagb-ifb-content{ padding-left:28px;padding-right:28px; }
.uagb-ifb-title-wrap{ padding-top:26px; }
.uagb-ifb-content .uagb-ifb-desc{ padding-bottom:6px; }
.uagb-ifb-button-wrapper{ padding:0 28px 30px !important; }
.uagb-ifb-desc{ color:var(--stone);font-weight:300;line-height:1.7; }
/* CTA = kompakter, einheitlicher Pill-Button (verhindert überdimensionierte Buttons) */
.uagb-ifb-button-wrapper .uagb-infobox-cta-link,
.uagb-infobox-cta-link,
a.uagb-infobox-cta-link{
  display:inline-flex !important;align-items:center;gap:8px;
  width:auto !important;max-width:max-content;min-height:0 !important;
  background:var(--moss) !important;color:#fff !important;
  padding:12px 26px !important;
  font-family:'Outfit',sans-serif !important;
  font-size:14.5px !important;font-weight:500 !important;line-height:1.1 !important;
  letter-spacing:.01em;text-transform:none;
  border-radius:100px !important;
  box-shadow:0 8px 20px -12px rgba(90,102,80,.75) !important;
  transition:background .35s var(--ease),transform .35s var(--spring),gap .3s var(--ease) !important;
}
.uagb-infobox:hover .uagb-infobox-cta-link,
.uagb-ifb-button-wrapper .uagb-infobox-cta-link:hover{
  background:var(--clay) !important;color:#fff !important;
  transform:translateY(-2px);gap:11px;
}

/* =================================================================
   BILDER  –  weiche Ecken + Hover-Zoom
   ================================================================= */
.wp-block-uagb-image,
.wp-block-image{ overflow:hidden;border-radius:var(--r-md); }
.wp-block-uagb-image img,
.wp-block-image img,
.uagb-image__figure img{
  border-radius:var(--r-md);
  transition:transform 1.1s var(--ease-out);
  display:block;width:100%;
}
.wp-block-uagb-image:hover img,
.wp-block-image:hover img{ transform:scale(1.04); }

/* =================================================================
   SEKTIONEN / CONTAINER  –  ruhiger Rhythmus
   ================================================================= */
.wp-block-uagb-container{ scroll-margin-top:calc(var(--nav-h) + 16px); }
.uagb-is-root-container{ padding-top:96px !important; padding-bottom:96px !important; }
/* (Die frühere „abwechselnde Sand-Hintergründe"-Regel wurde entfernt:
   sie hat per background-Kurzschreibweise vorhandene Hintergrundbilder
   überschrieben und Bild-/Weißtext-Sektionen grau gemacht.) */

/* „Abenteuer im Sommer"-Sektion (Startseite) war für ein Bild + weißen Text
   gebaut, hatte aber keins zugewiesen → bekommt das Sonnenaufgangs-Foto. */
.uagb-block-0127aa57{
  background-image:url("https://alpine-retreat.at/wp-content/uploads/2024/06/Sommerbild-800cb898.jpg") !important;
  background-size:cover !important;
  background-position:center 40% !important;
  background-repeat:no-repeat !important;
}
/* Overlay rechts (wo der Text am Desktop sitzt) stärker → Text gut lesbar,
   Wanderer/Bergkamm links bleibt sichtbar */
.uagb-block-0127aa57::before{
  background:linear-gradient(90deg,
              rgba(22,16,11,.30) 0%,
              rgba(22,16,11,.48) 40%,
              rgba(22,16,11,.70) 100%) !important;
}
/* Text in dieser Bild-Sektion durchgehend klar weiß (auch fett) */
.uagb-block-0127aa57 .uagb-heading-text,
.uagb-block-0127aa57 h2,
.uagb-block-0127aa57 .uagb-ifb-desc,
.uagb-block-0127aa57 p,
.uagb-block-0127aa57 strong,
.uagb-block-0127aa57 b{ color:#fff !important; }

/* Bild-Sektionen: flaches Overlay → edler Verlauf (nur Container MIT Overlay
   besitzen ein ::before mit content, daher greift dies nur dort) */
.wp-block-uagb-container::before{
  opacity:1 !important;
  background:linear-gradient(180deg,
              rgba(28,22,16,.18) 0%,
              rgba(28,22,16,.30) 55%,
              rgba(28,22,16,.58) 100%) !important;
}

/* =================================================================
   FOOTER
   ================================================================= */
.site-footer,.ast-small-footer,footer.site-footer,
.footer-adv,.ast-footer-overlay{
  background:var(--bark) !important;color:rgba(255,255,255,.62) !important;
}
.site-footer *,.ast-small-footer *{ color:inherit; }
.site-footer h2,.site-footer h3,.site-footer .widget-title{ color:#fff !important; }
.site-footer a{ color:rgba(255,255,255,.7) !important; }
.site-footer a:hover{ color:#fff !important; }

/* =================================================================
   SCROLL-REVEAL  (per reveal.js)
   ================================================================= */
.ar-reveal{
  opacity:0;transform:translateY(34px);
  transition:opacity 1s var(--ease-out),transform 1.1s var(--ease-out);
  will-change:opacity,transform;
}
.ar-reveal.ar-in{ opacity:1;transform:none; }
/* gestaffelt für Karten-Gruppen */
.ar-reveal.ar-d1{ transition-delay:.08s; }
.ar-reveal.ar-d2{ transition-delay:.16s; }
.ar-reveal.ar-d3{ transition-delay:.24s; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .ar-reveal{ opacity:1 !important;transform:none !important;transition:none; }
  *{ transition:none !important; }
}

/* =================================================================
   FOKUS / ACCESSIBILITY
   ================================================================= */
a:focus-visible,button:focus-visible,.wp-block-button__link:focus-visible{
  outline:2px solid var(--clay);outline-offset:3px;border-radius:4px;
}

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width:921px){
  .uagb-is-root-container{ padding-top:54px !important;padding-bottom:54px !important; }
  h1,.entry-title{ font-size:clamp(34px,9vw,50px) !important; }
  h2{ font-size:clamp(26px,7vw,38px) !important; }

  /* ---- MOBILES MENÜ – sauber & hell statt Astra-Braun ---- */
  .ast-mobile-header-content,
  .ast-mobile-header-content .main-header-menu,
  .main-header-bar-navigation,
  .main-header-bar-navigation .main-header-menu,
  .main-header-menu.ast-nav-menu,
  .ast-mobile-popup-drawer .main-header-menu,
  .ast-mobile-popup-content,
  .ast-builder-menu-mobile .main-header-menu{
    background:var(--cream) !important;
  }
  .main-header-menu .menu-item{
    border-bottom:1px solid var(--line-soft) !important;
    background:transparent !important;
  }
  .main-header-menu .menu-link,
  .ast-hf-mobile-menu .menu-link,
  .main-header-bar-navigation .menu-link,
  .ast-theme-transparent-header .main-header-menu .menu-link{
    color:var(--bark) !important;
    background:transparent !important;
    padding:15px 24px !important;
    font-size:17px !important;font-weight:400 !important;
    justify-content:flex-start !important;
  }
  .main-header-menu .menu-item:hover > .menu-link,
  .main-header-menu .menu-link:hover{ color:var(--clay) !important;background:transparent !important; }
  .ast-header-navigation-arrow,.ast-menu-toggle{ color:var(--bark) !important; }

  /* Untermenü eingerückt & ruhig (keine frosted Karte) – #masthead erzwingt Vorrang */
  #masthead .main-header-menu .sub-menu,
  .main-header-menu .sub-menu{
    background:var(--sand) !important;
    box-shadow:none !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
    border:none !important;border-radius:0 !important;margin:0 !important;padding:0 !important;min-width:0 !important;
  }
  #masthead .main-header-menu .sub-menu .menu-link,
  .main-header-menu .sub-menu .menu-link{
    padding-left:42px !important;font-size:15.5px !important;color:var(--stone) !important;
  }

  /* Kontakt: voll-breiter, zentrierter Button statt floatendem Pill */
  .main-header-menu > .menu-item > a[href*="contact"],
  .ast-builder-menu .main-header-menu > .menu-item > a[href*="contact"],
  .ast-theme-transparent-header .ast-builder-menu .main-header-menu > .menu-item > a[href*="contact"]{
    display:flex !important;justify-content:center !important;
    width:auto !important;margin:16px 24px !important;
    padding:15px 24px !important;border-radius:100px !important;
    background:var(--moss) !important;color:#fff !important;
    box-shadow:0 8px 20px -12px rgba(90,102,80,.8) !important;
  }

  /* Hamburger-Button dezent */
  .ast-mobile-menu-buttons .menu-toggle,
  .ast-button-wrap .menu-toggle{ background:var(--moss) !important;border-radius:12px !important;color:#fff !important; }

  /* CTA-Buttons in Boxen kompakt halten */
  .uagb-ifb-button-wrapper .uagb-infobox-cta-link,
  .wp-block-button__link{ padding:13px 26px !important;font-size:14.5px !important; }

  /* iOS-Safari rendert background-attachment:fixed (Parallax) verwaschen/zoomig
     und springt beim Scrollen → auf Mobile IMMER scroll erzwingen */
  .wp-block-uagb-container,
  .uagb-block-0127aa57{ background-attachment:scroll !important; }

  /* „Abenteuer im Sommer": Text steht mobil über volle Breite → kräftiges,
     gleichmäßiges Overlay (vertikal) statt horizontalem, damit der ganze
     Text klar lesbar ist; Bildausschnitt zeigt Wanderer/Berge statt Himmel */
  .uagb-block-0127aa57{ background-position:38% 42% !important; }
  .uagb-block-0127aa57::before{
    background:linear-gradient(180deg,
                rgba(20,15,10,.50) 0%,
                rgba(20,15,10,.60) 55%,
                rgba(20,15,10,.66) 100%) !important;
  }
}