/* Yoga & Therapie Salzburg – Stylesheet
   Nachgebaut aus dem bisherigen Joomla-Template (Helix3 + SP Page Builder), ohne Joomla-Abhängigkeiten. */

:root{
  --blue:#0075a4;
  --blue-dark:#005c82;
  --green:#3f7340;
  --link:#1061cc;
  --link-hover:#0c4b9d;
  --text:#212529;
  --header-h:90px;
}

/* ---------- Schrift (lokal vom eigenen Server, kein Google/Drittanbieter) ---------- */
@font-face{font-family:"Open Sans";font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/open-sans-v40-latin-300.woff2) format("woff2")}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/open-sans-v40-latin-regular.woff2) format("woff2")}
@font-face{font-family:"Open Sans";font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/open-sans-v40-latin-italic.woff2) format("woff2")}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/open-sans-v40-latin-600.woff2) format("woff2")}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/open-sans-v40-latin-700.woff2) format("woff2")}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/open-sans-v40-latin-800.woff2) format("woff2")}

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:"Open Sans","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:300;font-size:14px;line-height:24px;color:var(--text);background:#fff;overflow-x:hidden}
h1,h2,h3,h4,h5,h6{font-family:"Open Sans","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;margin:0 0 .5rem;line-height:1.2;color:inherit}
h1{font-size:2.5rem;font-weight:800}
h2{font-size:2rem;font-weight:600}
h3{font-size:1.75rem;font-weight:normal}
h4{font-size:1.5rem;font-weight:normal}
@media (max-width:1199px){h1{font-size:calc(1.375rem + 1.5vw)}h2{font-size:calc(1.325rem + .9vw)}h3{font-size:calc(1.3rem + .6vw)}}
p{margin:0 0 1rem}
ul,ol{margin:0 0 1rem;padding-left:2rem}
strong,b{font-weight:bolder}
a{color:var(--link);text-decoration:none;transition:color .4s,background-color .4s}
a:hover,a:focus{color:var(--link-hover)}
img{display:block;max-width:100%;height:auto;border:0}
blockquote{margin:0 0 1rem;padding:10px 20px;border-left:5px solid var(--link);font-size:inherit}
blockquote p:last-child{margin-bottom:0}
iframe{border:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

.fs12{font-size:12pt;line-height:1.5}
.fs14{font-size:14pt;line-height:1.5}
.fs16{font-size:18pt;line-height:1.3}
.green{color:var(--green)}

/* ---------- Header ---------- */
#sp-header{position:relative;top:0;left:0;width:100%;height:var(--header-h);background:#fff;box-shadow:0 3px 3px rgba(0,0,0,.05);z-index:999}
#sp-header.menu-fixed{position:fixed;animation:spFadeInDown .4s}
.nav-placeholder{height:var(--header-h);display:none}
.nav-placeholder.on{display:block}
#sp-header .container{display:flex;align-items:center;justify-content:space-between;height:100%}
#sp-header .logo{display:flex;align-items:center;height:var(--header-h)}
#sp-header .logo img{width:51px;height:auto}

.container,.sppb-row-container{width:100%;margin:0 auto;padding:0 15px}
@media (min-width:768px){.container,.sppb-row-container{max-width:750px}}
@media (min-width:992px){.container,.sppb-row-container{max-width:970px}}
@media (min-width:1200px){.container,.sppb-row-container{max-width:1170px}}

/* Hauptmenü */
.sp-megamenu-parent{list-style:none;padding:0;margin:0;display:flex}
.sp-megamenu-parent>li{position:relative}
.sp-megamenu-parent>li>a{display:inline-block;padding:0 15px;line-height:var(--header-h);font-size:16px;font-weight:bolder;text-transform:uppercase;letter-spacing:1px;color:var(--green)}
.sp-megamenu-parent>li.active>a,.sp-megamenu-parent>li:hover>a,.sp-megamenu-parent>li>a:focus{color:var(--blue)}
.sp-megamenu-parent>li.sp-has-child>a::after{content:"";display:inline-block;width:6px;height:6px;margin:0 0 3px 7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
.sp-dropdown{position:absolute;top:100%;left:0;width:240px;display:none;z-index:10}
.sp-has-child:hover>.sp-dropdown,.sp-has-child:focus-within>.sp-dropdown{display:block;animation:spMenuFadeIn .4s}
.sp-dropdown-inner{background:#fff;box-shadow:0 3px 5px 0 rgba(0,0,0,.2);padding:20px}
.sp-dropdown ul{list-style:none;padding:0;margin:0}
.sp-dropdown li a{display:block;padding:10px;color:var(--green);font-size:14px;font-weight:400}
.sp-dropdown li a:hover,.sp-dropdown li a:focus{background:var(--blue);color:#fff}
.sp-dropdown li.active>a{color:var(--blue)}
.sp-dropdown li.active>a:hover{color:#fff}

#offcanvas-toggler{display:none;font-size:20px;line-height:var(--header-h);color:#000;background:none;border:0;padding:0 0 0 15px;cursor:pointer}
#offcanvas-toggler:hover{color:var(--blue)}

@keyframes spMenuFadeIn{from{opacity:0}to{opacity:1}}
@keyframes spFadeInDown{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:none}}

/* Off-Canvas-Menü (mobil) */
.offcanvas-overlay{position:fixed;inset:0;background:rgba(0,0,0,.2);opacity:0;visibility:hidden;transition:.5s;z-index:9998}
.offcanvas-menu{position:fixed;top:0;right:0;width:320px;max-width:85vw;height:100%;background:var(--blue);color:#fff;transform:translateX(100%);visibility:hidden;transition:.5s;z-index:9999;overflow-y:auto}
body.offcanvas .offcanvas-menu{transform:none;visibility:visible}
body.offcanvas .offcanvas-overlay{opacity:1;visibility:visible}
.close-offcanvas{position:absolute;top:15px;right:15px;width:28px;height:28px;border-radius:50%;border:1px solid #fff;color:#fff;background:none;font-size:16px;line-height:1;cursor:pointer}
.offcanvas-inner{padding:60px 0 30px}
.offcanvas-inner ul{list-style:none;margin:0;padding:0}
.offcanvas-inner li{border-bottom:1px solid rgba(0,0,0,.1)}
.offcanvas-inner a,.offcanvas-inner .grp{display:block;padding:10px 20px;font-size:14px;text-transform:uppercase;color:#fff;font-weight:500;line-height:28px}
.offcanvas-inner a:hover,.offcanvas-inner li.active>a{background:rgba(0,0,0,.15)}
.offcanvas-inner ul ul{background:rgba(0,0,0,.02)}
.offcanvas-inner ul ul li{border:0}
.offcanvas-inner ul ul a{padding-left:35px;text-transform:none}

@media (max-width:991px){
  .sp-megamenu-parent{display:none}
  #offcanvas-toggler{display:block}
}

/* ---------- Page-Builder-Raster ---------- */
.sppb-section{position:relative;z-index:1}
.sppb-row{display:flex;flex-wrap:wrap;margin-left:-15px;margin-right:-15px}
[class*="sppb-col-"]{position:relative;width:100%;min-height:1px;padding-left:15px;padding-right:15px}
@media (max-width:767px){.sppb-col-xs-2{flex:0 0 16.6667%;max-width:16.6667%}.sppb-col-xs-10{flex:0 0 83.3333%;max-width:83.3333%}}
@media (min-width:768px){.sppb-col-sm-2{flex:0 0 16.6667%;max-width:16.6667%}.sppb-col-sm-10{flex:0 0 83.3333%;max-width:83.3333%}.sppb-col-sm-12{flex:0 0 100%;max-width:100%}}
@media (min-width:992px){
  .sppb-col-md-1{flex:0 0 8.3333%;max-width:8.3333%}.sppb-col-md-2{flex:0 0 16.6667%;max-width:16.6667%}.sppb-col-md-3{flex:0 0 25%;max-width:25%}
  .sppb-col-md-4{flex:0 0 33.3333%;max-width:33.3333%}.sppb-col-md-5{flex:0 0 41.6667%;max-width:41.6667%}.sppb-col-md-6{flex:0 0 50%;max-width:50%}
  .sppb-col-md-7{flex:0 0 58.3333%;max-width:58.3333%}.sppb-col-md-8{flex:0 0 66.6667%;max-width:66.6667%}.sppb-col-md-9{flex:0 0 75%;max-width:75%}
  .sppb-col-md-12{flex:0 0 100%;max-width:100%}
}
.sppb-column{width:100%;height:100%}
.sppb-row-overlay{position:absolute;inset:0;z-index:0}
.sppb-section>.sppb-row-container{position:relative;z-index:1}
.sppb-text-left{text-align:left}.sppb-text-right{text-align:right}.sppb-text-center{text-align:center}
.sppb-text-center .sppb-img-responsive{display:inline-block}
.sppb-addon-title{margin:0 0 15px}
.sppb-empty-space{height:20px}
.sppb-embed-responsive{position:relative;display:block;height:0;overflow:hidden;margin-bottom:30px}
.sppb-embed-responsive-16by9{padding-bottom:56.25%}
.sppb-embed-responsive-item{position:absolute;inset:0;width:100%;height:100%;border:0}

@media (max-width:767px){.sppb-hidden-xs{display:none!important}}
@media (min-width:768px) and (max-width:991px){.sppb-hidden-sm{display:none!important}}
@media (min-width:992px) and (max-width:1199px){.sppb-hidden-md{display:none!important}}
@media (min-width:1200px){.sppb-hidden-lg{display:none!important}}

/* Bilder in Spalten am Handy untereinander mit Abstand */
@media (max-width:991px){[class*="sppb-col-md-"]>.sppb-img-responsive{margin-bottom:30px}}

/* Buttons & Formular */
.sppb-btn{display:inline-block;font-weight:400;text-align:center;vertical-align:middle;user-select:none;border:1px solid transparent;padding:8px 18px;font-size:16px;line-height:1.25;border-radius:4px;transition:.15s ease-in-out;cursor:pointer;font-family:inherit}
.sppb-btn-rounded{border-radius:100px}
.sppb-btn-default{color:#010101;background:#eff1f4;border-color:#eff1f4}
.sppb-btn-default:hover{color:#010101;background:#d7dadd;border-color:#d7dadd}
.sppb-btn-primary{color:#fff;background:var(--blue);border-color:var(--blue)}
.sppb-btn-primary:hover{color:#fff;background:var(--blue-dark);border-color:var(--blue-dark)}
.sppb-form-group{margin-bottom:20px}
.sppb-form-control{display:block;width:100%;padding:8px 12px;font-size:16px;line-height:1.25;color:#495057;background:#fff;border:1px solid rgba(0,0,0,.15);border-radius:4px;font-family:inherit;transition:border-color .15s}
.sppb-form-control:focus{border-color:#80bdff;outline:0}
.sppb-form-control.invalid{border-color:#dc3545}
.sppb-icon-inner{display:inline-block;text-align:center;transition:.4s}
.sppb-icon-hover-effect-zoom-in .sppb-icon-inner:hover{transform:scale(1.2)}

/* Einblende-Animation */
.js .sppb-wow{opacity:0;transition:opacity 1s ease}
.js .sppb-wow.visible{opacity:1}
@media (prefers-reduced-motion:reduce){.sppb-wow{opacity:1;transition:none}}

/* ---------- Unterseiten: Kopfbild + Inhalt ---------- */
.page-hero{position:relative}
.page-hero .sppb-addon-title{color:#fff;font-size:72px;line-height:72px;margin:0 0 30px}
@media (max-width:991px){.page-hero .sppb-addon-title{font-size:48px;line-height:1.2}}
.page-body{padding:50px 0}
.page-body .green{margin:0 0 30px}

/* fixe Hintergründe funktionieren auf iOS nicht – dort normal scrollen */
@media (hover:none),(max-width:991px){section[id]{background-attachment:scroll!important}}

/* ---------- Slider ---------- */
.yt-slider{position:relative;width:100%;height:600px;max-height:600px;overflow:hidden;background:#e9e9e9}
.yt-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .5s linear,visibility .5s}
.yt-slide.active{opacity:1;visibility:visible;z-index:2}
.yt-slide .bg{position:absolute;inset:0;background-size:cover;background-repeat:no-repeat}
.yt-slide.kb .bg{animation:none}
.yt-slide.active.kb-in .bg{animation:ytKenIn 7s linear forwards}
.yt-slide.active.kb-out .bg{animation:ytKenOut 5s linear forwards}
@keyframes ytKenIn{from{transform:scale(1)}to{transform:scale(1.1)}}
@keyframes ytKenOut{from{transform:scale(1.2)}to{transform:scale(1)}}
.yt-stage{position:absolute;top:0;left:50%;width:1170px;height:600px;transform-origin:top center;transform:translateX(-50%) scale(var(--s,1))}
.yt-cap{position:absolute;opacity:0}
.yt-slide.active .yt-cap{animation-fill-mode:forwards;animation-timing-function:ease-in-out}
.yt-slide.active .cap-fade{animation-name:ytFade;animation-duration:.8s}
.yt-slide.active .cap-top{animation-name:ytFromTop;animation-duration:.5s}
.yt-slide.active .cap-left{animation-name:ytFromLeft;animation-duration:.3s}
.yt-slide.active .cap-short-top{animation-name:ytShortTop;animation-duration:.5s}
@keyframes ytFade{from{opacity:0}to{opacity:1}}
@keyframes ytFromTop{from{opacity:0;transform:translateY(-300px)}to{opacity:1;transform:none}}
@keyframes ytFromLeft{from{opacity:0;transform:translateX(-600px)}to{opacity:1;transform:none}}
@keyframes ytShortTop{from{opacity:0;transform:translateY(-50px)}to{opacity:1;transform:none}}
.yt-dots{position:absolute;bottom:15px;left:0;right:0;text-align:center;z-index:5}
.yt-dots button{width:12px;height:12px;border-radius:50%;border:2px solid #fff;background:transparent;margin:0 4px;padding:0;cursor:pointer}
.yt-dots button.on{background:#fff}
@media (prefers-reduced-motion:reduce){.yt-slide .bg,.yt-cap{animation:none!important;opacity:1}}

/* ---------- Adressblock Startseite ---------- */
#home-address{padding:100px 0}
#home-address .info{padding-top:20px}
#home-address h3{margin-bottom:20px}
#home-address img{margin:0 auto}

/* ---------- Footer ---------- */
#sp-footer{background:var(--blue);color:#fff;text-align:center;padding:20px 0}
#sp-footer p{margin:0}
#sp-footer a{color:rgba(255,255,255,.9)}
#sp-footer a:hover{color:#fff}
#sp-footer .sp-copyright{display:block;margin-top:4px}

/* ---------- Icons (SVG statt Font Awesome) ---------- */
.ico{width:1em;height:1em;fill:currentColor;display:inline-block;vertical-align:-.125em}
#offcanvas-toggler .ico{width:22px;height:22px;vertical-align:middle}
.close-offcanvas .ico{width:16px;height:16px;vertical-align:middle}
.sppb-icon-inner .ico{width:36px;height:96px;vertical-align:top}
.sppb-btn .ico{margin-right:4px}

/* ---------- Externe Inhalte erst nach Klick (Karte, YouTube) ---------- */
.embed-consent{display:flex;align-items:center;justify-content:center;text-align:center;background:#e4ebe4;color:#333;padding:20px}
.embed-consent .ec-inner{max-width:360px}
.embed-consent .ec-inner>.ico{width:40px;height:40px;color:var(--blue);margin-bottom:8px}
.embed-consent .ec-note{font-size:12px;line-height:1.5;margin:8px 0 0}
.embed-consent p{margin:0 0 8px}
.ec-play{background:none;border:0;padding:0;cursor:pointer;width:68px;height:48px}
.ec-play svg{width:68px;height:48px;display:block}
.ec-play:focus-visible,.ec-load:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.sppb-embed-responsive .embed-consent{padding:10px}