/* =====================================================================
   DOMAINE DE BOURIGEOLS · SITE (TECHNIK)
   Aufbau aller Seiten: Grundregeln, Kopfzeile mit Menü und Sprachwahl,
   Fußzeile, Raster der Inhalte (Section > Spalte > Element) und die
   Bausteine (Bild, Karussell, Galerie, Knopf, Trennlinie, Social Icons,
   Lightbox). Farben, Schriften und Größen kommen aus tokens.css.

   Nachgebaut aus den Regeln, die auf der WordPress Seite tatsächlich
   griffen (OceanWP 3.4.7, Elementor 4.3.5, Stand 26.10.2026).
   Umbruchpunkte: Tablet bis 1024 px, Mobil bis 767 px, Mobilmenü bis 959 px.
   ===================================================================== */

/* ---------- 1. Grundlagen ---------- */
:where(html,body,div,span,h1,h2,h3,h4,h5,h6,p,a,img,strong,b,i,ul,ol,li,form,label,footer,header,nav,section,figure,main){margin:0;padding:0;border:0;outline:0;vertical-align:baseline;font-style:inherit;font-weight:inherit;font-family:inherit;font-size:100%;line-height:inherit}
*,*::before,*::after{box-sizing:border-box}
html{font-size:62.5%;overflow-y:scroll;overflow-x:hidden;-webkit-text-size-adjust:100%}
body{margin:0;background-color:var(--c-header-bg);overflow-wrap:break-word;-webkit-font-smoothing:auto}
header,footer,main,nav,section,figure{display:block}
img{max-width:100%;height:auto;border:0;vertical-align:middle}
a{color:var(--c-heading);background-color:transparent;text-decoration:none;transition:.3s}
a:hover{color:var(--c-black)}
a:focus{outline:solid 1px!important}
a:hover,a:active{outline:0}
b,strong{font-weight:600}
i{font-style:italic}
p{margin:0 0 20px}
:where(ul){margin:15px 0 15px 20px}
:where(li ul){margin:0 0 0 25px}
button{font:inherit;color:inherit;margin:0;overflow:visible;text-transform:none;cursor:pointer}
.screen-reader-text,.sr{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;width:1px;position:absolute!important;overflow-wrap:normal!important;font-size:14px!important}
.skip-link:focus{background-color:#f1f1f1;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;clip-path:none;color:#21759b;display:block;font-size:.875rem!important;font-weight:700;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;top:5px;width:auto;z-index:100000}
.clr::after{content:"";display:block;visibility:hidden;clear:both;height:0}
.container{width:var(--header-max);max-width:90%;margin:0 auto}
#wrap,#main{position:relative}
@media (max-width:767px){#wrap{width:100%!important}}

/* ---------- 2. Kopfzeile (OceanWP "Minimal") ---------- */
#site-header{position:relative;width:100%;background-color:var(--c-header-bg);border-bottom:1px solid var(--c-line);z-index:100}
#site-header-inner{position:relative;height:100%}
#site-logo{float:left;height:100%;display:table}
#site-logo #site-logo-inner{display:table-cell;vertical-align:middle;height:var(--header-h)}
#site-logo a.site-logo-text{font-size:var(--fs-logo);margin:0;color:var(--c-heading)}
#site-logo a.site-logo-text:hover{color:var(--c-black)}
@media (max-width:767px){#site-logo{margin-top:0!important;margin-bottom:0!important}}
#site-navigation-wrap{float:right;position:relative;right:-15px}
#site-navigation-wrap .dropdown-menu{list-style:none;margin:0;padding:0}
#site-navigation-wrap .dropdown-menu>li{float:left;position:relative}
#site-navigation-wrap .dropdown-menu>li>a{display:block;font-size:var(--fs-menu);line-height:var(--header-h);color:var(--c-menu);padding:0 15px;letter-spacing:.6px}
#site-navigation-wrap .dropdown-menu>li>a:hover{color:var(--c-text)}
#site-navigation-wrap .dropdown-menu>li>a .nav-arrow{padding-left:6px;line-height:1;width:calc(.6em + 6px);height:1em;vertical-align:-.125em;fill:currentColor;box-sizing:content-box}
.sf-menu,.sf-menu *{margin:0;padding:0;list-style:none}
.sf-menu li.menu-item{position:relative;white-space:normal}
.sf-menu>li{float:left}
.sf-menu a.menu-link{display:block;position:relative}
.dropdown-menu .sub-menu{display:none;position:absolute;top:100%;left:0;background-color:var(--c-header-bg);border-top:3px solid var(--c-text);min-width:180px;line-height:1;text-align:left;z-index:999;box-shadow:0 2px 6px rgba(0,0,0,.1)}
.dropdown-menu li:hover>.sub-menu,.dropdown-menu li:focus-within>.sub-menu{display:block}
.dropdown-menu li .sub-menu li.menu-item{display:block;float:none}
.dropdown-menu ul li.menu-item{display:block;border-bottom:1px solid var(--c-line)}
.dropdown-menu ul li.menu-item:last-child{border-bottom:0}
.dropdown-menu ul li a.menu-link{display:block;position:relative;float:none;font-size:var(--fs-submenu);font-weight:400;line-height:1.2em;letter-spacing:.6px;padding:12px 15px;text-transform:capitalize;color:var(--c-menu)}
.dropdown-menu ul li a.menu-link:hover{background-color:#f8f8f8;color:var(--c-menu)}
/* Sprachwahl mit Flaggen (Polylang) */
.pll-flag{display:inline-block;flex-shrink:0;width:18px;overflow:hidden;aspect-ratio:3/2;vertical-align:middle}
.pll-flag img{display:block;object-fit:cover;width:100%;height:100%}
/* Mobilmenü (bis 959 px) */
.oceanwp-mobile-menu-icon{display:none;position:relative}
.oceanwp-mobile-menu-icon.mobile-right{float:right}
.oceanwp-mobile-menu-icon a{font-size:var(--fs-menu);line-height:var(--header-h);color:var(--c-menu);padding-left:15px;letter-spacing:.6px;cursor:pointer}
.oceanwp-mobile-menu-icon a:first-child{padding-left:0}
.oceanwp-mobile-menu-icon a:hover{color:var(--c-text)}
.oceanwp-mobile-menu-icon a:focus{outline:1px dashed #e3e3e3}
.oceanwp-mobile-menu-icon .fa-bars{width:.875em;height:1em;vertical-align:-.125em;fill:currentColor}
.oceanwp-mobile-menu-icon a.mobile-menu .oceanwp-text,.oceanwp-mobile-menu-icon a.mobile-menu .oceanwp-close-text{padding-left:6px}
.oceanwp-mobile-menu-icon a.mobile-menu .oceanwp-close-text,.oceanwp-mobile-menu-icon a.mobile-menu.opened .oceanwp-text{display:none}
.oceanwp-mobile-menu-icon a.mobile-menu.opened .oceanwp-close-text{display:inline-block}
#mobile-dropdown{display:none;position:absolute;top:100%;left:0;width:100%;background-color:var(--c-header-bg);max-height:400px;overflow-y:auto;box-shadow:0 2px 6px rgba(0,0,0,.1)}
#mobile-dropdown.is-open{display:block}
#mobile-dropdown ul{margin:0;list-style:none}
#mobile-dropdown ul li{border-bottom:1px solid rgba(0,0,0,.035)}
#mobile-dropdown ul li a{display:block;position:relative;padding:12px 40px;text-align:left;color:var(--c-heading)}
#mobile-dropdown ul li a:focus{outline:1px dashed #e3e3e3}
#mobile-dropdown ul li a .dropdown-toggle{position:absolute;right:0;top:0;height:100%;width:60px;cursor:pointer;color:var(--c-menu);padding-right:40px;text-align:center;transition:.3s}
#mobile-dropdown ul li a .dropdown-toggle::before{content:"+";font-size:20px;position:absolute;top:50%;left:50%;line-height:30px;margin-top:-15px;margin-left:-15px}
#mobile-dropdown ul li.is-open>a .dropdown-toggle::before{content:"-"}
#mobile-dropdown ul li ul{display:none;border-top:1px solid rgba(0,0,0,.035);margin-left:0;background-color:rgba(0,0,0,.02)}
#mobile-dropdown ul li.is-open>ul{display:block}
@media (max-width:959px){#site-navigation-wrap{display:none}.oceanwp-mobile-menu-icon{display:inline-flex}}

/* ---------- 3. Fußzeile ---------- */
.site-footer{position:relative}
.oceanwp-row{margin:0 -.625rem}
.oceanwp-row .col{float:left;margin:0 0 1.25rem;padding:0 .625rem}
.oceanwp-row .span_1_of_4{width:25%}
.col-1{clear:both;margin-left:0}
#footer-widgets{background-color:var(--c-footer);padding:30px 0;margin:0}
#footer-widgets .footer-box{padding:0 15px;margin:0}
#footer-bottom{background-color:var(--c-footer-bottom);padding:15px 0;font-size:var(--fs-footer);line-height:1;color:var(--c-white)}
#footer-bottom a{color:var(--c-white)}
#footer-bottom a:hover{color:var(--c-line)}
#footer-bottom #copyright{float:none;width:100%;text-align:center;padding:0}
@media (min-width:768px) and (max-width:959px){.oceanwp-row .span_1_of_4.col-3{margin-left:0;clear:both}.oceanwp-row .span_1_of_4.col{width:50%}}
@media (max-width:959px){#footer-widgets .col{margin-bottom:30px}}
@media (max-width:767px){.col{width:100%!important;margin-bottom:25px}}
@media (max-width:480px){.col{width:100%;margin-left:0;margin-right:0;margin-bottom:30px}}
/* Nach oben */
#scroll-top{display:none;opacity:0;position:fixed;right:20px;bottom:20px;width:40px;height:40px;line-height:40px;background-color:rgba(0,0,0,.4);color:#fff;font-size:18px;cursor:pointer;border-radius:2px;text-align:center;z-index:100;box-sizing:content-box;transition:opacity .3s}
#scroll-top.is-shown{display:block;opacity:1}
#scroll-top:hover{background-color:rgba(0,0,0,.8)}
#scroll-top svg{width:.65em;height:1em;fill:currentColor;vertical-align:-.15em}
@media (max-width:480px){#scroll-top{right:10px;bottom:10px;width:26px;height:26px;line-height:24px;font-size:14px}}

/* ---------- 4. Raster der Inhalte: Section > Container > Spalte > Element ---------- */
.es{position:relative}
.es>.ect{display:flex;margin-left:auto;margin-right:auto;position:relative}
.es-boxed>.ect{max-width:var(--content-max)}
.es-items-middle>.ect{align-items:center}
.es-items-top>.ect{align-items:flex-start}
.es-items-bottom>.ect{align-items:flex-end}
.es-ov{position:absolute;inset:0;pointer-events:none}
.ec{position:relative;display:flex;min-height:1px;width:100%}
.ewr{position:relative;display:flex;flex-wrap:wrap;align-content:flex-start;width:100%}
.ewr-p{padding:10px}
.wd{position:relative;width:100%}
.wd:not(:last-child){margin-bottom:var(--widget-gap)}
.wd.wd-auto,.wd.wd-init{margin-bottom:0}
.wd.wd-auto{width:auto;max-width:none}
.ewr>.es-inner{width:100%}
@media (max-width:1024px){.es-boxed>.ect{max-width:1024px}}
@media (max-width:767px){.es>.ect{flex-wrap:wrap}.es-boxed>.ect{max-width:767px}.ec{width:100%}}
@media (min-width:1025px){.hide-d{display:none!important}}
@media (min-width:768px) and (max-width:1024px){.hide-t{display:none!important}}
@media (max-width:767px){.hide-m{display:none!important}}

/* ---------- 5. Bausteine ---------- */
/* Überschrift und Text: Schrift und Farbe in tokens.css */
.ht a{color:inherit;font-size:inherit;line-height:inherit;font-family:inherit;font-weight:inherit}
/* Bild */
.w-image{text-align:center}
.w-image img{display:inline-block}
/* Abstandhalter */
.spi{height:var(--sp,50px)}
/* Trennlinie */
.w-divider{--dv-color:#000;--dv-w:1px;--dv-style:solid}
.dv{display:flex;padding-block:15px}
.dvs{display:flex;width:100%;margin:0;border-top:var(--dv-w) var(--dv-style) var(--dv-color)}
/* Knopf (Farben und Schrift in tokens.css) */
.bw{text-align:left}
.btn{display:inline-block;padding:12px 24px;border-radius:3px;text-align:center;transition:all .3s;border:0;cursor:pointer;fill:currentColor}
/* Größen wie Elementor (Schriftgröße steht in tokens.css) */
.btn-xs{padding:10px 20px;border-radius:2px}.btn-sm{padding:12px 24px;border-radius:3px}.btn-md{padding:15px 30px;border-radius:4px}.btn-lg{padding:20px 40px;border-radius:5px}.btn-xl{padding:25px 50px;border-radius:6px}
/* Social Icons */
.w-social-icons{--so-size:25px;--so-pad:.5em;--so-gap:5px;--so-c:#fff;text-align:center}
.sow{display:inline-flex;flex-wrap:wrap;gap:var(--so-gap)}
.so{display:inline-flex;align-items:center;justify-content:center;width:calc(var(--so-size) + 2*var(--so-pad));height:calc(var(--so-size) + 2*var(--so-pad));font-size:var(--so-size);padding:var(--so-pad);border-radius:10%;background:#69727d;transition:background-color .3s,opacity .3s}
.so svg{width:1em;height:1em;fill:var(--so-c);transition:fill .3s}
.so:hover{opacity:.9}
/* Bilder-Karussell (wie Elementor: ein Bild je Ansicht, Pfeile oder Punkte, läuft automatisch) */
.car{position:relative;overflow:hidden}
.car-trk{display:flex;transition:transform .5s ease}
.car-i{flex:0 0 calc(100%/var(--per,1));display:flex;align-items:center;justify-content:center;text-align:center;line-height:0}
.car-i img{max-width:100%;height:auto}
.car-b{position:absolute;top:50%;transform:translateY(-50%);z-index:1;display:inline-flex;padding:0;border:0;background:none;font-size:25px;color:hsla(0,0%,93%,.9);cursor:pointer}
.car-b svg{width:1em;height:1em;fill:hsla(0,0%,93%,.9)}
.car-prev{left:10px}.car-next{right:10px}
.car-dots{position:absolute;left:0;right:0;bottom:5px;display:flex;justify-content:center;gap:12px;line-height:0}
.car-dots button{width:6px;height:6px;padding:0;border:0;border-radius:50%;background:#000;opacity:.2}
.car-dots button.is-active{opacity:1}
.car.has-dots{padding-bottom:0}
/* Galerie (Elementor Pro Galerie: Raster 3:2, Klick öffnet Lightbox) */
.gal{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);gap:var(--gap,10px)}
.gal .gi{display:block;overflow:hidden;position:relative}
.gal .gi img{display:block;width:100%;height:100%;object-fit:cover}
.gal-grid .gi{aspect-ratio:var(--ar,3/2)}
/* Aufklappbare Details (früher Plugin BBSpoiler) */
.spoiler{margin:0 0 20px;border:1px solid #ddd}
.spoiler summary{cursor:pointer;padding:6px 10px;background:#f5f5f5;font-weight:600}
.spoiler>div{padding:10px}
/* Lightbox */
.lb{position:fixed;inset:0;z-index:4000;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center}
.lb img{max-width:92vw;max-height:88vh;width:auto;height:auto;object-fit:contain}
.lb button{position:absolute;border:0;background:none;color:#fff;cursor:pointer;width:56px;height:56px;font-size:34px;line-height:1;opacity:.8}
.lb button:hover{opacity:1}
.lb-x{top:10px;right:10px}.lb-p{left:10px;top:50%;margin-top:-28px}.lb-n{right:10px;top:50%;margin-top:-28px}
.lb-c{position:absolute;bottom:14px;left:0;right:0;text-align:center;color:#ccc;font-size:13px}

/* ---------- 6. Landing Page (ohne Kopf- und Fußzeile) ---------- */
body.canvas{background:#000}
/* Hintergrundbild der Landing Page als feste Ebene über den ganzen Bildschirm, auch hinter den
   Leisten des Handy-Browsers (Bild und Abdunklung: --canvas-bg im Seiten CSS) */
body.canvas::before{content:"";position:fixed;inset:0;z-index:-1;background-color:#000;background-image:var(--canvas-bg,none);background-position:center center;background-size:cover;background-repeat:no-repeat}
/* Inhalt der Landing Page mittig auf mindestens einer Bildschirmhöhe */
body.canvas main>.es{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;justify-content:center}
body.canvas main>.es>.ect{width:100%}