/* ============================================================
   CMS – Besucher-Sicherung (gehoert zum Kern, wird immer geladen)
   Nichts vom Editor darf fuer Besucher sichtbar sein – auch dann nicht,
   wenn ein Editor-Element frueher einmal im Inhalt mitgespeichert wurde.
   ============================================================ */
/* Nur in der Besucheransicht ausblenden – im Bearbeitungsmodus (body.te-editing)
   muessen diese Elemente sichtbar und anklickbar bleiben. */
body:not(.te-editing) .pgal-create,body:not(.te-editing) .pgal-tools,body:not(.te-editing) .pgal-del,
body:not(.te-editing) .te-img-btn,body:not(.te-editing) .te-block-bar,body:not(.te-editing) .te-addrow,
body:not(.te-editing) .te-colel-tools,body:not(.te-editing) .te-colel-add,body:not(.te-editing) .colhead-bar,body:not(.te-editing) .colhead-va,
body:not(.te-editing) .colgrip,body:not(.te-editing) .colrow-addcol,body:not(.te-editing) .bp-grid-add,
body:not(.te-editing) .bp-grid-del,body:not(.te-editing) .rowel-pick,body:not(.te-editing) .img-resize,
body:not(.te-editing) .imgfit-toggle,body:not(.te-editing) .htimg-remove,body:not(.te-editing) .te-tsep-clear,
body:not(.te-editing) .footer-cert-del,body:not(.te-editing) .footer-cert-big--empty,body:not(.te-editing) .bpfb-grip,
body:not(.te-editing) .bpmodal-open,body:not(.te-editing) .te-page-foot,body:not(.te-editing) .colel-hint,
body:not(.te-editing) .colel-space-grip{display:none}
/* Leerer Button: fuer Besucher weg, beim Bearbeiten sichtbar (sonst nicht beschreibbar). */
body:not(.te-editing) a.btn:empty,body:not(.te-editing) button.btn:empty,
body:not(.te-editing) .btn--primary:empty,body:not(.te-editing) .btn--light:empty{display:none}
[contenteditable]{outline:none}

/* Telefon/E-Mail als Bild */
.bp-cimg{display:inline-block;vertical-align:-.18em;max-width:100%;height:auto;user-select:none}

/* ---- Box Pro: Kachel mit eigener Farbe, Symbol und Button ---- */
.bxp{display:flex;flex-direction:column;height:100%}
.bxp-body{flex:1;display:flex;flex-direction:column;justify-content:center;gap:14px}
.bxp-i{display:block}
.bxp-h{margin:0;color:inherit;font-size:1.35rem;line-height:1.2}
.bxp-t{margin:0;color:inherit;opacity:.92;line-height:1.6}
.bxp-btn{display:inline-block;padding:16px 26px;font-weight:700;text-align:center;background:var(--accent,#111);color:#fff;
  transition:filter .18s,transform .18s;text-decoration:none}
.bxp-btn--full{display:block;width:100%}
.bxp-btn:hover{filter:brightness(1.08);color:inherit}
.bxp--sh{box-shadow:0 18px 44px -20px rgba(0,0,0,.35)}
.bxp--hov{transition:transform .2s}
.bxp--hov:hover{transform:translateY(-4px)}
/* Kacheln ohne Abstand aneinander (randlose Reihe) */
.colrow[style*="gap:0"] .colel,.colrow--full .bxp{height:100%}

/* Parallax-Bild fuellt immer die ganze Breite (frueher blieben links und rechts Raender) */
.fluidrow--parallax{background-size:cover}

/* Stillgelegte Menuepunkte */
.nav-dead{cursor:default;opacity:.75;padding:9px 13px;display:inline-flex;align-items:center;gap:5px;font-weight:600;font-size:.9rem;color:var(--menu-link,#d4d7dd)}
.nav-hidden-item{opacity:.55}
.nav-hidden-item::after{content:'ausgeblendet';font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;opacity:.7;margin-left:6px}
body.bp-nolinks a[href]:not([href^="#"]):not(.bp-keep){cursor:default}

/* Hinweis fuer Angemeldete, wenn Links stillgelegt sind */
.bp-lockbar{position:fixed;right:18px;bottom:76px;z-index:9998;display:flex;align-items:flex-start;gap:10px;
  background:#1c272a;color:#fff;border-radius:12px;padding:10px 12px 10px 14px;
  font:600 12px/1.45 "Inter",system-ui,sans-serif;box-shadow:0 14px 34px -14px rgba(0,0,0,.6);max-width:min(460px,92vw)}
.bp-lockbar-x{flex:0 0 auto;border:0;background:rgba(255,255,255,.12);color:#fff;width:24px;height:24px;border-radius:7px;
  font-size:1.05rem;line-height:1;cursor:pointer}
.bp-lockbar-x:hover{background:rgba(255,255,255,.25)}
@media (max-width:700px){.bp-lockbar{left:12px;right:12px;bottom:88px;max-width:none}}

/* Emoji-Symbole zuverlaessig darstellen */
.usp-icon,.bxp-i,.bpact-i,.colel-card .usp-icon,.tsep-word{
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Twemoji Mozilla",inherit}

/* ---- Galerie-Element: einstellbare Darstellung (Panel: Spalten, Masonry/Quadrate/Kreise,
       Abstand, Ecken, Schatten, Hover). Greift nur mit .pgalw (= Einstellungen gesetzt). ---- */
.colel-galwrap.pgalw .pgal{display:grid;grid-template-columns:repeat(var(--pgal-cols,3),1fr);gap:var(--pgal-gap,14px)}
.colel-galwrap.pgalw .pgal img{width:100%;height:var(--pgal-h,220px);object-fit:cover;border-radius:var(--pgal-radius,12px);box-shadow:none;
  transition:transform .25s ease,box-shadow .25s ease,opacity .25s ease}
.colel-galwrap.pgalw--shadow .pgal img{box-shadow:var(--media-shadow,0 18px 40px -18px rgba(0,0,0,.35))}
.colel-galwrap.pgalw--masonry .pgal{display:block;columns:var(--pgal-cols,3);column-gap:var(--pgal-gap,14px)}
.colel-galwrap.pgalw--masonry .pgal img{height:auto;display:block;margin:0 0 var(--pgal-gap,14px);break-inside:avoid}
.colel-galwrap.pgalw--squares .pgal img{height:auto;aspect-ratio:1/1}
.colel-galwrap.pgalw--circles .pgal img{height:auto;aspect-ratio:1/1;border-radius:50%}
.colel-galwrap.pgalw--hov-zoom .pgal img:hover{transform:scale(1.045)}
.colel-galwrap.pgalw--hov-lift .pgal img:hover{transform:translateY(-5px);box-shadow:0 22px 44px -16px rgba(0,0,0,.4)}
.colel-galwrap.pgalw--hov-fade .pgal img:hover{opacity:.82}
@media (max-width:860px){.colel-galwrap.pgalw .pgal{grid-template-columns:1fr 1fr}.colel-galwrap.pgalw--masonry .pgal{columns:2}}
@media (max-width:520px){.colel-galwrap.pgalw .pgal{grid-template-columns:1fr}.colel-galwrap.pgalw--masonry .pgal{columns:1}}

/* ---- Button-Element: einstellbare Darstellung (Panel: Ausrichtung, volle Breite,
       Farben normal/Hover, Ecken, Schatten). Greift nur mit .btnx (= Einstellungen gesetzt). ---- */
.colel-btnwrap{display:block;width:100%}
.colel-btnwrap.btnx--left{text-align:left}
.colel-btnwrap.btnx--center{text-align:center}
.colel-btnwrap.btnx--right{text-align:right}
.colel-btnwrap .btn.btnx{background:var(--btnx-bg,var(--btn-bg,var(--accent,#111)));color:var(--btnx-fg,var(--btn-text,#fff));
  border-radius:var(--btnx-radius,var(--btn-radius,8px));transition:background .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease}
.colel-btnwrap .btn.btnx:hover{background:var(--btnx-hbg,var(--btn-hover-bg,var(--btn-bg,#000)));color:var(--btnx-hfg,var(--btn-hover-text,#fff))}
.colel-btnwrap.btnx--full .btn.btnx{display:block;width:100%;text-align:center}
.colel-btnwrap.btnx--shadow .btn.btnx{box-shadow:0 14px 30px -12px rgba(0,0,0,.4)}
.colel-btnwrap.btnx--noshadow .btn.btnx{box-shadow:none}

/* Logozeile: nur zeigen, wenn eingeschaltet (Besucheransicht) */
body:not(.te-editing) .tsep:not(.tsep--on){display:none}

/* ---- Zeitstrahl (Element „timeline“) ------------------------------------ */
.colel-timeline{--tl-col:var(--accent,#f28c04);--tl-dsize:14px;--tl-tsize:17px}
.colel-timeline .tl-list{list-style:none;margin:0;padding:0;position:relative}
.colel-timeline .tl-list::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:var(--tl-col);opacity:.35}
.colel-timeline .tl-item{position:relative;padding:0 0 26px 38px}
.colel-timeline .tl-item:last-child{padding-bottom:0}
.colel-timeline .tl-dot{position:absolute;left:2px;top:5px;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--tl-col)}
.colel-timeline .tl-date{display:block;font-size:var(--tl-dsize);font-weight:700;color:var(--tl-col);letter-spacing:.04em;margin-bottom:3px}
.colel-timeline .tl-title{display:block;font-size:var(--tl-tsize);font-weight:600;line-height:1.35}
.colel-timeline .tl-note{display:block;margin-top:4px;font-size:.92em;opacity:.75;line-height:1.5}
/* abwechselnd links/rechts – nur wenn Platz da ist */
@media (min-width:840px){
  .colel-timeline--alt .tl-list::before{left:50%;transform:translateX(-1px)}
  .colel-timeline--alt .tl-item{width:50%;padding:0 42px 30px 0}
  .colel-timeline--alt .tl-item .tl-date,.colel-timeline--alt .tl-item .tl-panel{text-align:right}
  .colel-timeline--alt .tl-dot{left:auto;right:-8px}
  .colel-timeline--alt .tl-item--r{margin-left:50%;padding:0 0 30px 42px}
  .colel-timeline--alt .tl-item--r .tl-date,.colel-timeline--alt .tl-item--r .tl-panel{text-align:left}
  .colel-timeline--alt .tl-item--r .tl-dot{right:auto;left:-8px}
}

/* ---- Galerie-Darstellung „Laufband“ ------------------------------------- */
.colel-galwrap.pgalw--strip .pgal{display:flex;gap:var(--pgal-gap,14px);overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:6px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.colel-galwrap.pgalw--strip .pgal img{flex:0 0 auto;width:auto;height:var(--pgal-h,220px);object-fit:cover;
  border-radius:var(--pgal-radius,12px);scroll-snap-align:start}
.colel-galwrap.pgalw--strip .pgal::-webkit-scrollbar{height:6px}
.colel-galwrap.pgalw--strip .pgal::-webkit-scrollbar-thumb{background:rgba(0,0,0,.2);border-radius:3px}

/* ---- Kontaktformular (Element „contactform“) ---------------------------- */
.colel-cform .cf-form{display:flex;flex-direction:column;gap:14px;max-width:640px}
.colel-cform .cf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){.colel-cform .cf-row{grid-template-columns:1fr}}
.colel-cform .cf-f{display:flex;flex-direction:column;gap:5px;font-size:.9rem}
.colel-cform .cf-f > span{opacity:.75;letter-spacing:.02em}
.colel-cform input[type=text],.colel-cform input[type=email],.colel-cform input[type=tel],.colel-cform textarea{
  width:100%;font:inherit;font-size:1rem;padding:9px 2px;color:inherit;background:transparent;
  border:0;border-bottom:1px solid currentColor;border-radius:0;opacity:1}
.colel-cform input:focus,.colel-cform textarea:focus{outline:none;border-bottom-color:var(--accent,#f28c04)}
.colel-cform textarea{resize:vertical}
.colel-cform .cf-check{display:flex;align-items:flex-start;gap:9px;font-size:.88rem;line-height:1.45}
.colel-cform .cf-check input{margin-top:3px;flex:0 0 auto}
.colel-cform .cf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.colel-cform .cf-ok{padding:16px 18px;border-left:3px solid var(--accent,#f28c04);background:rgba(0,0,0,.04);font-weight:600}
.colel-cform .cf-err{padding:12px 16px;border-left:3px solid #c0392b;background:rgba(192,57,43,.08)}
.colel-cform .btn{align-self:flex-start}

/* ---- Bild über Bild (Element „imgduo") ---------------------------------- */
.colel-imgduo{position:relative;padding-bottom:calc(var(--du-y,34%) * .55)}
.colel-imgduo .du-back{display:block;width:100%;height:auto;border-radius:var(--du-r,0)}
.colel-imgduo .du-front{position:absolute;top:var(--du-y,34%);width:var(--du-w,78%);height:auto;
  border-radius:var(--du-r,0);will-change:transform;z-index:2;pointer-events:none}
.colel-imgduo--left  .du-front{left:var(--du-x,-22%)}
.colel-imgduo--right .du-front{right:var(--du-x,-22%)}
.colel-imgduo--shadow .du-front{box-shadow:4px 5px 18px -2px rgba(0,0,0,.55)}
.colel-imgduo .du-empty{display:flex;align-items:center;justify-content:center;min-height:140px;
  border:1px dashed var(--line,#ddd);background:rgba(0,0,0,.03);cursor:pointer}
.colel-imgduo .du-front.du-empty{position:absolute}
/* Im Bearbeiten-Modus muss das obere Bild anklickbar sein */
body.te-editing .colel-imgduo .du-front{pointer-events:auto}
/* Schmale Bildschirme: nur das grosse Bild, sofern nicht anders gewünscht */
@media (max-width:767px){
  .colel-imgduo{padding-bottom:0}
  .colel-imgduo:not(.colel-imgduo--mob) .du-front{display:none}
  .colel-imgduo--mob .du-front{position:static;width:70%;margin:-12% auto 0;transform:none!important}
}

/* Bild über Bild: jedes der beiden Bilder mit eigener Grösse. Ohne feste Höhe
   ist das ganze Bild zu sehen (Seitenverhältnis bleibt erhalten). */
.colel-imgduo .du-back{width:var(--du-w1,100%);height:var(--du-h1,auto);object-fit:var(--du-f1,contain)}
.colel-imgduo .du-front{height:var(--du-h2,auto);object-fit:var(--du-f2,contain)}

/* ---- Bildbühne (Element „imgstage") ------------------------------------- */
.colel-stage{position:relative;width:100%;height:var(--st-h,460px);overflow:visible}
.colel-stage .st-i{position:absolute;height:auto;border-radius:var(--st-r,0);
  will-change:transform;transition:box-shadow .2s}
.colel-stage--shadow .st-i{box-shadow:0 18px 44px -16px rgba(0,0,0,.5)}
.colel-stage .st-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--line,#ddd);color:var(--muted,#777);font-size:.9rem;text-align:center;padding:20px}
/* Bearbeiten: Bilder lassen sich greifen */
body.te-editing .colel-stage .st-i[data-stdrag]{cursor:grab}
body.te-editing .colel-stage .st-i[data-stdrag].is-drag{cursor:grabbing;outline:2px solid var(--accent,#f28c04);outline-offset:2px}
body.te-editing .colel-stage{outline:1px dashed rgba(0,0,0,.18);outline-offset:4px}
/* Schmale Bildschirme: wahlweise untereinander statt frei angeordnet */
@media (max-width:767px){
  .colel-stage--mob{height:auto;display:flex;flex-direction:column;gap:12px}
  .colel-stage--mob .st-i{position:static;width:100%!important;left:auto!important;top:auto!important;transform:none!important}
}