/* Kopfzeile (Elementor Theme Builder) mitlaufen lassen */
.elementor-location-header{position:sticky;top:0;z-index:40}
body.admin-bar .elementor-location-header{top:var(--wp-admin--admin-bar--height,32px)}
@media (max-width:600px){body.admin-bar .elementor-location-header{top:0}}
/* Button «Kurs buchen» in der Kopfzeile: unter 480 px steht er nur noch im Burger-Menü (wie im Design) */
@media (max-width:480px){.elementor-location-header .e-button-base[href="#buchen"]{display:none}}
::selection{background:#F4C7B5;color:#1F2328}

/* Schwebender Kontakt-Button (Container lässt Klicks durch, nur Button und offene Einträge sind klickbar) */
.cl-fab{position:fixed;right:24px;bottom:24px;z-index:50;display:flex;flex-direction:column;align-items:flex-end;gap:10px;padding-top:8px;pointer-events:none;font-family:Manrope,system-ui,sans-serif}
.cl-fab-item{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 20px 0 16px;border-radius:999px;background:#FFFFFF;color:#1F2328;font-weight:600;font-size:15px;white-space:nowrap;text-decoration:none;box-shadow:0 10px 24px -12px rgba(31,35,40,0.35);opacity:0;transform:translateY(6px) scale(0.95);transform-origin:bottom right;pointer-events:none;transition:opacity 180ms cubic-bezier(0.23,1,0.32,1),transform 180ms cubic-bezier(0.23,1,0.32,1)}
.cl-fab-item:hover{color:#B53A21}
.cl-fab-item::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px}
.cl-fab.is-open .cl-fab-item{opacity:1;transform:none;pointer-events:auto}
.cl-fab.is-open .cl-fab-item-1{transition-delay:80ms}
.cl-fab.is-open .cl-fab-item-3{transition-delay:40ms}
.cl-fab-toggle{pointer-events:auto;width:60px;height:60px;padding:0;border:0;border-radius:999px;background:#C43D22;color:#FFFFFF;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 14px 28px -12px rgba(196,61,34,0.55);transition:transform 160ms cubic-bezier(0.23,1,0.32,1),background-color 200ms ease}
.cl-fab-toggle:hover,.cl-fab-toggle:focus{background:#A83620;color:#FFFFFF}
.cl-fab-toggle:active{transform:scale(0.95)}
.cl-fab-toggle:focus-visible{outline:2px solid #1F2328;outline-offset:3px}
.cl-fab-icon{transition:transform 220ms cubic-bezier(0.23,1,0.32,1)}
.cl-fab.is-open .cl-fab-icon{transform:rotate(90deg)}
.cl-when-open{display:none}
.cl-when-closed{display:inline-flex}
[aria-expanded="true"] > .cl-when-open{display:inline-flex}
[aria-expanded="true"] > .cl-when-closed{display:none}

/* Buchungs-Panel von rechts */
.cl-book{position:fixed;inset:0;z-index:9999;pointer-events:none;visibility:hidden;transition:visibility 0s linear 300ms;font-family:Manrope,system-ui,sans-serif;color:#1F2328}
body.admin-bar .cl-book{top:var(--wp-admin--admin-bar--height,32px)}
.cl-book.is-open{pointer-events:auto;visibility:visible;transition-delay:0s}
.cl-book-backdrop{position:absolute;inset:0;width:100%;border:0;padding:0;margin:0;background:rgba(31,35,40,0.38);opacity:0;cursor:pointer;transition:opacity 240ms ease}
.cl-book-backdrop:hover,.cl-book-backdrop:focus{background:rgba(31,35,40,0.38)}
.cl-book.is-open .cl-book-backdrop{opacity:1;transition-duration:360ms}
.cl-book-panel{position:absolute;top:0;right:0;bottom:0;width:min(620px,100%);background:#FBF8F2;display:flex;flex-direction:column;box-shadow:-24px 0 48px -24px rgba(31,35,40,0.35);transform:translateX(100%);transition:transform 260ms cubic-bezier(0.23,1,0.32,1)}
.cl-book.is-open .cl-book-panel{transform:none;transition:transform 440ms cubic-bezier(0.32,0.72,0,1)}
.cl-book-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;border-bottom:1px solid #E6E0D6}
.cl-book-title{margin:0;font-family:Outfit,sans-serif;font-weight:500;font-size:24px;line-height:1.2;color:#1F2328}
.cl-book-close{width:44px;height:44px;flex:0 0 44px;padding:0;border:0;border-radius:999px;background:#F4EFE6;color:#1F2328;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color 200ms ease,transform 160ms cubic-bezier(0.23,1,0.32,1)}
.cl-book-close:hover,.cl-book-close:focus{background:#EFE7DA;color:#1F2328}
.cl-book-close:active{transform:scale(0.95)}
.cl-book-body{flex:1;min-height:0;padding:20px 24px;display:flex;flex-direction:column}
.cl-book-info{margin:0 0 14px;padding:12px 16px;border-radius:12px;background:#F4EFE6;border-left:3px solid #C43D22;font-size:14px;line-height:1.5;color:#1F2328}
.cl-book-box{flex:1;min-height:360px;border-radius:16px;background:#FFFFFF;border:1px solid #E6E0D6;overflow:hidden;display:flex}
.cl-book-frame{flex:1 1 auto;width:100%;min-height:0;border:0;display:block}
.cl-book-foot{margin:14px 0 0;font-size:13px;line-height:1.5;color:#4F555C}
.cl-book-foot a{color:#1F2328;font-weight:600;text-decoration:underline;text-underline-offset:0.25em}
@media (max-width:767px){.cl-book-panel{width:100%;padding-bottom:env(safe-area-inset-bottom)}.cl-book-head{padding:10px 12px 10px 16px}.cl-book-title{font-size:20px}.cl-book-close{width:40px;height:40px;flex-basis:40px}.cl-book-body{padding:10px 8px 8px}.cl-book-info{margin:0 0 8px;padding:8px 12px;font-size:13px;line-height:1.4}.cl-book-box{min-height:0;border-radius:12px}.cl-book-foot{margin:6px 8px 0;font-size:12px}}

/* Lageplan: Google-Maps-Widget über dem Vorschaubild, lädt erst nach Einwilligung (site.js) */
.e-div-block-base:has(> .elementor-widget-google_maps) > .e-flexbox-base{z-index:2}
.e-div-block-base > .elementor-widget-google_maps{position:absolute;inset:0;z-index:1;margin:0}
.e-div-block-base > .elementor-widget-google_maps :is(.elementor-widget-container,.elementor-custom-embed){height:100%}
.e-div-block-base > .elementor-widget-google_maps iframe{width:100%;height:100%;border:0;display:block}
.elementor-widget-google_maps iframe[data-cl-src]{visibility:hidden}
/* Geladene Karte bringt Googles eigenes «In Maps öffnen» mit, unser Etikett würde es verdecken (im Editor bleibt es) */
body:not(.elementor-editor-active) .e-div-block-base:has(> .elementor-widget-google_maps iframe[src]) > .e-flexbox-base{display:none}
/* Knopf «Karte anzeigen», solange keine Einwilligung für Google Maps besteht */
.cl-map-laden{position:absolute;left:50%;top:50%;z-index:3;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:2px;max-width:calc(100% - 32px);padding:12px 22px;border:1px solid #E6E0D6;border-radius:999px;background:#FFFFFF;color:#1F2328;font:inherit;font-size:15px;line-height:1.3;text-align:center;cursor:pointer;box-shadow:0 8px 24px -12px rgba(31,35,40,.35)}
/* Eingebettete Dienste im HTML-Widget (GlobeSailor auf /toerns/, Lernvideos): vor dem Laden heller Kasten mit Knopf */
.cl-extern{position:relative;min-height:320px;border-radius:20px;background:#F4EFE7;overflow:hidden}
.cl-extern iframe{display:block;width:100%;height:900px;border:0}
.cl-extern iframe[data-cl-src]{visibility:hidden;height:320px}
.cl-extern:has(iframe[src]){min-height:0;border-radius:0;background:transparent}
/* Video (YouTube, youtube-nocookie): 16:9, vorher lokales Vorschaubild als Hintergrund (style am Kasten) */
.cl-extern.cl-video{min-height:0;aspect-ratio:16/9;border-radius:20px;background:#1F2328 center/cover no-repeat}
.cl-extern.cl-video iframe{position:absolute;inset:0;width:100%;height:100%}
.cl-extern.cl-video:has(iframe[src]){border-radius:20px;background:#000}
.cl-kat[data-kat="Lernen"]{background:#EFE7DA;color:#6B5233}
.cl-map-laden span{font-size:12px;color:#4F555C}
.cl-map-laden:hover,.cl-map-laden:focus{background:#FFFFFF;color:#1F2328}
@media (hover:hover) and (pointer:fine){.cl-map-laden:hover{border-color:#1F2328}}

/* Hummer schaut beim Drüberfahren hinter dem Kontakt-Button hervor (wie im Logo über dem Bootsrand) */
.cl-fab-toggle{position:relative;z-index:1}
.cl-fab-peek{position:absolute;right:-2px;bottom:30px;z-index:0;width:64px;height:56px;pointer-events:none;clip-path:inset(-80px -30px 0 -30px)}
.cl-fab-peek svg{display:block;transform:translateY(100%);transition:transform 380ms cubic-bezier(0.34,1.56,0.64,1)}
.cl-fab:not(.is-open):has(.cl-fab-toggle:hover) .cl-fab-peek svg,.cl-fab:not(.is-open):has(.cl-fab-toggle:focus-visible) .cl-fab-peek svg{transform:translateY(-12px)}
.cl-fab-claw{transform-box:fill-box}
.cl-fab-claw-l{transform-origin:90% 90%}.cl-fab-claw-r{transform-origin:10% 90%}
.cl-fab:not(.is-open):has(.cl-fab-toggle:hover) .cl-fab-claw-l{animation:cl-claw-l 700ms ease-in-out 300ms 2}
.cl-fab:not(.is-open):has(.cl-fab-toggle:hover) .cl-fab-claw-r{animation:cl-claw-r 700ms ease-in-out 300ms 2}
@keyframes cl-claw-l{50%{transform:rotate(-14deg)}}
@keyframes cl-claw-r{50%{transform:rotate(14deg)}}
/* einmal pro Besuch (Klasse aus site.js), damit man ihn auch auf dem Handy sieht */
.cl-fab-hallo:not(.is-open) .cl-fab-peek svg{animation:cl-peek 2.4s cubic-bezier(0.34,1.56,0.64,1) 1.2s 1}
@keyframes cl-peek{0%,100%{transform:translateY(100%)}22%,70%{transform:translateY(-12px)}}

@media (prefers-reduced-motion: reduce){
  .cl-fab-item,.cl-fab-toggle,.cl-fab-icon,.cl-book-panel,.cl-book-backdrop,.cl-fab-peek svg{transition:none}
  .cl-fab-peek svg,.cl-fab-claw{animation:none!important}
}

/* Wisch-Karussells auf dem Handy: Kartenreihen stehen nebeneinander statt untereinander, die nächste Karte schaut hinein.
   Welche Reihen: Elementor-IDs in site.js → KARUSSELL (dort bekommen sie die Klasse cl-karussell, Randmass und Punkte). */
@media (max-width:767px){
  .cl-karussell{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:stretch!important;gap:14px!important;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
    box-sizing:border-box!important;width:var(--cl-breite,100vw)!important;max-width:none!important;
    margin-left:calc(-1*var(--cl-rand,24px))!important;margin-right:0!important;
    padding-left:var(--cl-rand,24px)!important;padding-right:var(--cl-rand,24px)!important;scroll-padding-inline:var(--cl-rand,24px)}
  .cl-karussell::-webkit-scrollbar{display:none}
  .cl-karussell>*{box-sizing:border-box!important;flex:0 0 calc(var(--cl-breite,100vw) - 2*var(--cl-rand,24px) - 44px)!important;
    width:auto!important;max-width:none!important;min-width:0;margin:0!important;scroll-snap-align:start}
  .cl-punkte{display:flex;justify-content:center;gap:2px;margin-top:14px}
  .cl-punkte button{all:unset;cursor:pointer;width:24px;height:24px;display:grid;place-items:center}
  .cl-punkte button::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.25;transition:opacity .2s,transform .2s}
  .cl-punkte button[aria-current="true"]::before{opacity:.85;transform:scale(1.25)}
  .cl-punkte button:focus-visible{outline:2px solid currentColor;outline-offset:-2px;border-radius:50%}
}
@media (min-width:768px){.cl-punkte{display:none}}
/* Handy kompakter: Bildkästen (Hero, Logbuch, Yacht usw.) flacher. Die Abschnittsabstände kappt site.js auf 40 px. */
@media (max-width:767px){
  [data-elementor-type="wp-page"] :is(.e-con,.e-div-block-base):has(> img.e-image-base){aspect-ratio:16/10!important;height:auto!important;min-height:0!important}
}
/* Logbuch-Raster (Elementor-Loop): 10 px Innenabstand bei content-box machte es breiter als die Seite */
[data-elementor-type="wp-page"] :is(.e-collection-loop-layout-base,.e-collection-loop-layout-base > *){box-sizing:border-box}