/* custom web.css */
@import url('../fonts/fonts.css');

/* =========================================================
   CSS-Variablen – Farbwelt "Emergetik"
   ========================================================= */
/* =========================================================
   CSS-Variablen – Farbwelt "Emergetik" (Entwurf 02)
   Primaer = Coral · Sekundaer = Petrol · Akzent = Red
   ========================================================= */
:root{
  /* ---- Palette der Resonanz-Ringe (feste Reihenfolge, NICHT aendern) ----
     beige, neopink, red, brown, blue, orange, green, petrol, coral, azur */
  --ek-beige:         #C3BA9D;
  --ek-neopink:       #993EBD;
  --ek-red:           #EC5C27;   /* akzent */
  --ek-brown:         #AF9259;
  --ek-blue:          #4B87C3;
  --ek-blue-dark:     #3A6FA5;
  --ek-orange:        #F5A50C;
  --ek-green:         #86BC2F;
  --ek-petrol:        #14A0A5;   /* sekundaer */
  --ek-coral:         #CC637B;   /* primaer */
  --ek-azur:          #799BAC;

  /* ---- Primaerfarbe: Coral (Buttons, Links, Navigation, CTA-Flaechen) ---- */
  --ek-coral-light:   #DB8C9E;   /* heller */
  --ek-coral-dark:    #A8485E;   /* Hover */

  /* ---- Sekundaerfarbe: Petrol (Eyebrows, Icons, Akzentflaechen) ---- */
  --ek-petrol-light:  #2BC2C7;
  --ek-petrol-dark:   #0E777A;

  /* ---- Akzentfarbe: Red ---- */
  --ek-red-dark:      #C44D1F;   /* Hover */

  /* ---- Neutrale & Hintergruende ---- */
  --ek-dark-nav:      #2b3238;
  --ek-dark-hero:     #3D474F;   /* Hero-/Footer-Hintergrund */
  --ek-dark-light:    #646b70;   /* Light-Text auf dunklem Hintergrund */
  --ek-white:         #FFFFFF;
  --ek-light-bg:      #F7FAFC;
  --ek-subtle-bg:     #EDF2F7;

  /* ---- Fliesstext ---- */
  --ek-charcoal:      #2B2B28;

  --ek-font-base:     'Montserrat', sans-serif;
  --ek-radius: .35rem;
  --ek-shadow: 0 .5rem 1.5rem rgba(31,58,61,.12);
}

html{ scroll-behavior:smooth; }

body{
  background-color: var(--ek-light-bg);
  color: var(--ek-charcoal);
  font-family: var(--ek-font-base);
  font-size:1.05rem;
  line-height:1.7;
}

h1,h2,h3,h4{
  color: var(--ek-dark-nav);
  font-family: var(--ek-font-base);
  font-weight:700;
  letter-spacing:-.01em;
}
h1{
  line-height: 3rem;
  margin-bottom: 1.5rem; 
}
h2 a, h3 a, h4 a, h5 a, h6 a{ text-decoration:none; }

/* In hellen Sections sollen Überschriften den Dark-Nav-Ton haben – */
/* in dunklen Sections (Hero, Footer, Quote) wird lokal überschrieben. */
.hero h1,.hero h2,.hero h3,.hero h4{ color:var(--ek-white); }
.quote-block h2,.quote-block h3{ color:var(--ek-white); }

.web a{ color: var(--ek-coral); }
.web a:hover{ color: var(--ek-coral-dark); }
.web a.section-marker{ position:relative; margin-top:-96px; height:0; }

.btn-ek{
  background-color: var(--ek-coral);
  border-color: var(--ek-coral);
  color: var(--ek-white)!important;
  border-radius: var(--ek-radius);
  padding:.65rem 1.6rem;
  font-weight:600;
  letter-spacing:.02em;
  transition:.2s ease;
}
.btn-ek:hover{
  background-color: var(--ek-coral-dark);
  border-color: var(--ek-coral-dark);
  color:var(--ek-white);
}

/* Outline-Variante (emButton, btn_style = outline) */
.btn-outline-ek{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background:transparent;
  color:var(--ek-coral);
  border:2px solid var(--ek-coral);
  border-radius:var(--ek-radius);
  padding:.55rem 1.4rem;
  font-weight:600;
  text-decoration:none;
  transition:.2s ease;
}
.btn-outline-ek:hover{ background:var(--ek-coral); color:var(--ek-white)!important; }

.web .eyebrow{
  text-transform:uppercase;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.14em;
  color: var(--ek-petrol);
}

.page-meta {
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.06em;
  color: var(--ek-dark-light);
  margin-bottom:3px;
}
.page-meta i {
  color: var(--ek-petrol);
}
.page-meta span + span::before{
  content:"|";
  margin:0 .85em;
  color: var(--ek-dark-light);
  font-weight:400;
  letter-spacing:0;
}

.toc-item .page-meta{
  letter-spacing:.06em;
}
.toc-item h3{ 
  margin-bottom:.3em; 
  font-size:1.3rem; 
}
.toc-item p{ 
  margin-bottom:.5rem; 
  line-height:1.4rem;
}
.toc-table .toc-image{
  display:block;
  margin-bottom:.85rem;
  overflow:hidden;
  border-radius:var(--ek-radius);
}
.toc-table .toc-image img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16 / 9;
  object-fit:cover;
  transition:opacity .2s ease, transform .25s ease;
}
.toc-table .toc-image:hover img{
  opacity:.92;
  transform:scale(1.02);
}

/* ---------------------------------------------------------
   Resonanz-Signatur: gewellte Trennlinie zwischen Sections
   --------------------------------------------------------- */
.wave-divider{
  width:100%;
  height:48px;
  display:block;
}
.wave-divider svg{ width:100%; height:100%; display:block; }
/* Wave am Section-Anfang: ragt nach oben in die Vorgänger-Section */
.wave-divider.wave-before-section{
  background-color: transparent;
  margin-top:-48px;
  position:relative;
  z-index:1;
  pointer-events:none;
}
.wave-fill-light    path{ fill:var(--ek-light-bg); }
.wave-fill-subtle   path{ fill:var(--ek-subtle-bg); }
.wave-fill-primary   path{ fill:var(--ek-petrol); }
.wave-fill-dark     path{ fill:var(--ek-dark-nav); }
.wave-fill-darkhero path{ fill:var(--ek-dark-hero); }

/* ---------------------------------------------------------
   Header / Navigation  –  Hintergrund #2b3238
   --------------------------------------------------------- */
.navbar-ek{
  background-color: var(--ek-dark-nav);
  border-bottom:1px solid rgba(0,0,0,.2);
  padding-top:.85rem;
  padding-bottom:.85rem;
}

/* Logo-Bild + Schriftzug im Header */
.navbar-brand-ek{
  display:flex;
  align-items:center;
  gap:.6rem;
  text-decoration:none;
}
.navbar-brand-ek img{
  height:48px;
  width:auto;
  flex-shrink:0;
}
.navbar-brand-ek .brand-name{
  font-family: var(--ek-font-base);
  font-weight:800;
  font-size:1.6rem;
  letter-spacing:-.02em;
  color: var(--ek-white);
  line-height:1;
}

/* Toggler-Icon auf dunklem Grund sichtbar machen */
.navbar-ek .navbar-toggler{
  border-color: rgba(247,250,252,.4);
}
.navbar-ek .navbar-toggler-icon{
  filter: invert(1);
}

/* Navigationslinks: hell auf dunkel */
.navbar-ek .nav-link{
  color: rgba(247,250,252,.88) !important;
  font-weight:600;
  padding:.5rem .95rem !important;
}
.navbar-ek .nav-link:hover,
.navbar-ek .nav-link.active{
  color: var(--ek-coral) !important;
}

/* Split-Dropdown: Titel anklickbar, Caret öffnet Untermenü */
.navbar-ek .nav-item-split{
  display:flex;
  align-items:center;
}
.navbar-ek .nav-item-split > .nav-link:not(.dropdown-toggle){
  padding-right:.2rem !important;
}
.navbar-ek .nav-item-split > .dropdown-toggle-split{
  padding-left:.2rem !important;
  padding-right:.7rem !important;
}
.navbar-ek .nav-item-split > .dropdown-toggle-split::after{
  margin-left:0;
}

.navbar-ek .dropdown-menu{
  border:none;
  background-color: var(--ek-white);
  box-shadow: var(--ek-shadow);
  border-radius: var(--ek-radius);
  padding:.5rem 0;
}
.navbar-ek .dropdown-item{
  font-weight:500;
  padding:.5rem 1.25rem;
  color: var(--ek-charcoal);
}
.navbar-ek .dropdown-item:hover,
.navbar-ek .dropdown-item:focus{
  background-color: var(--ek-subtle-bg);
  color: var(--ek-coral-dark);
}
.navbar-ek .dropdown-item.active{
  background-color: rgba(20,160,165,.14);
  color: var(--ek-petrol-dark);
  font-weight:600;
}
.navbar-ek .dropdown-item:active{
  background-color: var(--ek-subtle-bg);
  color: var(--ek-coral-dark);
}

/* Untermenü zweiter Ebene */
.dropdown-submenu{ position:relative; }
.dropdown-submenu > .dropdown-item::after{
  content:"\f105";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  float:right;
  margin-left:.5rem;
  font-size:.75rem;
  opacity:.6;
}
.dropdown-submenu > .dropdown-menu{
  top:0;
  left:100%;
  margin-top:-.5rem;
  display:none;
}
.dropdown-submenu.show > .dropdown-menu{ display:block; }

@media (max-width: 991.98px){
  .dropdown-submenu > .dropdown-menu{
    position:static;
    left:auto; top:auto;
    margin-left:.75rem;
    border-left:2px solid var(--ek-subtle-bg);
    box-shadow:none;
  }
  .navbar-ek .dropdown-menu{ box-shadow:none; }
}

/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */
.hero{
  background-color: var(--ek-dark-hero);
  background-image:
    radial-gradient(circle at 85% 20%, rgba(121,155,172,.40) 0%, rgba(121,155,172,0) 45%),
    radial-gradient(circle at 10% 90%, rgba(44,79,82,.60) 0%, rgba(44,79,82,0) 50%);
  color: var(--ek-light-bg);
  padding:5.5rem 0 6.5rem;
  position:relative;
  overflow:hidden;
}
.hero h1{ color:var(--ek-white); font-size:2.6rem; }
.hero p.lead{ color:rgba(247,250,252,.85); font-size:1.2rem; }
.hero .page-meta{
  color:rgba(247,250,252,.75);
  margin-bottom:.75rem;
}
.hero .page-meta i,
.hero .page-meta span + span::before{
  color:var(--ek-petrol-light);
}

/* ---------------------------------------------------------
   Fade-in beim Scrollen (nur bei aktivem JS, sonst sichtbar)
   --------------------------------------------------------- */
.js .reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s ease, transform .7s ease;
  will-change:opacity, transform;
}
.js .reveal.is-visible{
  opacity:1;
  transform:none;
}
/* Sanfter Versatz zwischen nebeneinanderliegenden Spalten einer Zeile */
.js .row > .reveal:nth-child(2){ transition-delay:.12s; }
.js .row > .reveal:nth-child(3){ transition-delay:.24s; }
.js .row > .reveal:nth-child(4){ transition-delay:.36s; }
@media (prefers-reduced-motion: reduce){
  .js .reveal{ opacity:1; transform:none; transition:none; }
}

/* ---------------------------------------------------------
   Sections
   --------------------------------------------------------- */
.section{ padding:4.5rem 0; }
.section-title{ padding:2.5rem 0;}
/* Wave davor (48px) ausgleichen, damit Inhalte wieder visuell zentriert wirken */
.wave-before-section + .section{
  padding-top:calc(4.5rem - 48px);
}
.section-light  { background-color: var(--ek-light-bg); }
.section-subtle { background-color: var(--ek-subtle-bg); }

/* Content-Bilder: leicht runde Ecken (wie Personenkarte) */
.section img,
.hero img{
  border-radius:var(--ek-radius);
}

.quote-block{
  background-color: var(--ek-dark-hero);
  color: var(--ek-light-bg);
  border-radius: var(--ek-radius);
  padding:3rem;
  position:relative;
}
.quote-block i.fa-quote-left{
  color: var(--ek-petrol);
  font-size:1.8rem;
  margin-bottom:1rem;
}
.quote-block p{
  font-size:1.4rem;
  font-weight:600;
  line-height:1.5;
  margin-bottom:0;
}
.quote-block .quote-author{
  display:block;
  margin-top:1.25rem;
  font-size:.95rem;
  font-weight:500;
  font-style:normal;
  opacity:.85;
}
.quote-block .quote-author::before{
  content:"— ";
}

.quicklink-card{
  background-color: var(--ek-white);
  border-radius: var(--ek-radius);
  padding:1.75rem 1.25rem;
  text-align:center;
  box-shadow: var(--ek-shadow);
  height:100%;
  transition:.2s ease;
  display:block;
  text-decoration:none;
  color: var(--ek-dark-nav);
}
.quicklink-card:hover{
  transform:translateY(-4px);
  color: var(--ek-coral-dark);
}
.quicklink-card i{
  font-size:1.6rem;
  color: var(--ek-petrol);
  margin-bottom:.6rem;
  display:block;
}

/* ---------------------------------------------------------
   Personen-Vorstellung
   --------------------------------------------------------- */
.em-person-card .person-photo-wrap img{
  width:100%;
  max-width:420px;
  aspect-ratio:4 / 5;
  object-fit:cover;
  object-position:center top;
  border-radius:var(--ek-radius);
  box-shadow:var(--ek-shadow);
  display:block;
  margin-inline:auto;
}
.person-role{
  color:var(--ek-petrol);
  font-weight:600;
  font-size:1.05rem;
  margin-bottom:1.1rem;
}

/* ---------------------------------------------------------
   Footer (2-stufig)
   --------------------------------------------------------- */
.footer-top{
  background-color: var(--ek-dark-hero);
  color: rgba(247,250,252,.85);
  padding:3.5rem 0 2.5rem;
}
.footer-top h6{
  color: var(--ek-white);
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:.8rem;
  font-weight:700;
  margin-bottom:1.1rem;
}
.footer-top a{
  color: rgba(247,250,252,.85);
  text-decoration:none;
}
.footer-top a:hover{ color: var(--ek-coral); }
.footer-top ul{ list-style:none; padding:0; margin:0; }
.footer-top ul li{ margin-bottom:.55rem; line-height:1.5rem; }

/* Logo im Footer */
.footer-logo{
  height:52px;
  width:auto;
  margin-bottom:1rem;
  display:block;
}
.footer-intro{ line-height:1.5rem; }
.footer-social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px;
  border-radius:50%;
  background: rgba(247,250,252,.08);
  margin-right:.5rem;
  color: var(--ek-light-bg);
}
.footer-social a:hover{
  background: var(--ek-coral);
  color: var(--ek-white);
}

/* Footer-Bottom: #2b3238 */
.footer-bottom{
  background-color: var(--ek-dark-nav);
  color: rgba(247,250,252,.6);
  font-size:.9rem;
  padding:1rem 0;
}
.footer-bottom a{
  color: rgba(247,250,252,.75);
  text-decoration:none;
  margin-left:1.25rem;
}
.footer-bottom a:hover{ color: var(--ek-coral); }

#backToTop{
  position:fixed;
  right:1.5rem;
  bottom:1.5rem;
  width:46px; height:46px;
  border-radius:50%;
  background-color: var(--ek-coral);
  color: var(--ek-white);
  display:none;
  align-items:center;
  justify-content:center;
  box-shadow: var(--ek-shadow);
  z-index:1040;
  border:none;
}
#backToTop:hover{ background-color: var(--ek-coral-dark); }

/* ---------------------------------------------------------
   Textauszeichnungen (Zitate, Betonung)
   --------------------------------------------------------- */
.article-quote{
  border-left:4px solid var(--ek-coral);
  background:var(--ek-light-bg);
  padding:1.5rem 1.75rem;
  border-radius:var(--ek-radius);
  font-size:1.2rem;
  font-style:italic;
  color:var(--ek-dark-nav);
  margin:2rem 0;
}
.article-quote i.fa-quote-left{
  color:var(--ek-coral);
  margin-right:.5rem;
}
.article-quote .quote-author{
  display:block;
  margin-top:.75rem;
  font-size:.95rem;
  font-weight:500;
  font-style:normal;
  color:var(--ek-dark-nav);
  opacity:.75;
}
.article-quote .quote-author::before{
  content:"— ";
}

/* ZMS-Standardzitat (p.blockquote > q) ≈ emQuote Variante light */
p.blockquote{
  border-left:4px solid var(--ek-coral);
  background:var(--ek-light-bg);
  padding:1.5rem 1.75rem;
  border-radius:var(--ek-radius);
  font-size:1.2rem;
  font-style:italic;
  color:var(--ek-dark-nav);
  margin:2rem 0;
  line-height:1.55;
}
p.blockquote::before{
  content:"\f10d"; /* fa-quote-left */
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  font-style:normal;
  color:var(--ek-coral);
  margin-right:.5rem;
}
p.blockquote > q{
  quotes:none;
  font-style:inherit;
  color:inherit;
}
p.blockquote > q::before,
p.blockquote > q::after{
  content:none;
}

p.emphasis{
  font-size:1.1rem;
  font-weight:600;
  line-height:1.4;
  color:var(--ek-coral);
  margin-bottom:1.25rem;
}
/* ---------------------------------------------------------
   Aus ehemals inline-Styles ausgelagert (zentralisiert)
   --------------------------------------------------------- */
/* Footer-Einleitungstext */
.footer-intro{ max-width:320px; }

/* Hervorgehobene Hero-Lead-Zeile (reines Weiss statt gedaempft) */
.hero .lead.lead-strong{ color:var(--ek-white); }

/* Community-Section auf Petrol-Hintergrund */
.section-primary{
  background-color: var(--ek-petrol);
  color: var(--ek-light-bg);
}
.section-primary .eyebrow{ color: var(--ek-coral-dark); }
.section-primary h2{ color: var(--ek-white); }

/* ---------------------------------------------------------
   Bild-Menü (emImageMenu) – klickbare Link-Zonen über einem Bild
   Zonen-Position/-Breite (left/width) wird dynamisch pro Zone
   inline aus dem Template gerendert.
   --------------------------------------------------------- */
.img-menu{
  position:relative;
  max-width:1000px;
  margin:0 auto;
  border-radius:var(--ek-radius);
  overflow:hidden;
}
.img-menu img{ width:100%; height:auto; display:block; }
.img-menu .img-zone{
  position:absolute;
  top:0;
  height:100%;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  text-decoration:none;
}
/* Hover-Marker: runder Punkt statt Rechteck – trifft das Motiv auch
   bei leicht abweichender Zonenaufteilung. Durchmesser 50% der Zonenbreite,
   skaliert automatisch mit der dynamischen Zonenbreite. */
.img-menu .img-zone::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:50%;
  aspect-ratio:1/1;
  transform:translate(-50%,-50%) scale(.85);
  border-radius:50%;
  background-color:rgba(204,99,123,.35);
  opacity:0;
  transition:opacity .2s ease, transform .2s ease;
  pointer-events:none;
}
.img-menu .img-zone:hover::before{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.img-menu .img-zone .zone-label{
  opacity:0;
  transform:translateY(8px);
  transition:.2s ease;
  margin-bottom:6%;
  background:var(--ek-dark-nav);
  color:var(--ek-white);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.03em;
  padding:.3rem .6rem;
  border-radius:1rem;
  max-width:calc(100% - .5rem);
  text-align:center;
  line-height:1.3;
  pointer-events:none;
}
.img-menu .img-zone:hover .zone-label{ opacity:1; transform:translateY(0); }
.img-menu-hint{
  text-align:center;
  font-size:.9rem;
  color:rgba(43,43,40,.6);
  margin-top:1rem;
}

/* ---------------------------------------------------------
   Referenzen-Wolke (emReferences)
   --------------------------------------------------------- */
.ref-cloud{ display:flex; flex-wrap:wrap; gap:.5rem; }
.ref-cloud span{
  display:inline-flex; align-items:center;
  background:var(--ek-white);
  border:1px solid rgba(31,58,61,.12);
  border-radius:2rem; padding:.35rem .9rem;
  font-size:.85rem; color:var(--ek-charcoal);
}
.ref-cloud .ref-logo{
  display:block; height:1.25rem; width:auto; max-width:7rem;
  object-fit:contain;
}

/* ZMSGraphic: Fancybox-Zoom-Hinweis */
.ZMSGraphic .graphic a.fancybox{
  position:relative;
  cursor:zoom-in;
  display:inline-block;
  max-width:100%;
}
.ZMSGraphic .graphic a.fancybox img{
  transition:opacity .2s ease;
}
.ZMSGraphic .graphic a.fancybox:hover img{
  opacity:.92;
}
.ZMSGraphic .graphic a.fancybox::after{
  content:"\f00e"; /* fa-magnifying-glass-plus */
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  position:absolute;
  right:.55rem;
  bottom:.55rem;
  width:1.75rem;
  height:1.75rem;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.75rem;
  line-height:1;
  color:var(--ek-white);
  background:rgba(45,52,54,.72);
  border-radius:.35rem;
  pointer-events:none;
  opacity:.85;
  transition:opacity .2s ease, background .2s ease;
}
.ZMSGraphic .graphic a.fancybox:hover::after{
  opacity:1;
  background:rgba(45,52,54,.88);
}

/* ---------------------------------------------------------
   glossary
   --------------------------------------------------------- */
.po, .popover, [data-toggle="popover"] { 
  cursor:help; 
}

/* Glossar-Popover: etwas breiter als Bootstrap-Default (276px) */
.popover {
  --bs-popover-max-width: 22rem;
  max-width: 22rem;
}
.popover .popover-body .g_teaser {
  font-style: italic;
  margin-bottom: .65em;
}
.popover .popover-body .g_description {
  font-size: .95em;
  line-height: 1.35;
}

.fancyglossary {
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-color: var(--ek-coral-light, #DB8C9E);
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
    }
.glossary a.fancyglossary {
    display: block;
}

/* ---------------------------------------------------------
   btCarousel (Bootstrap 5 Karussell)
   --------------------------------------------------------- */
.bt-carousel-media{
  position:relative;
}
.bt-carousel{
  margin:0 auto;
}
.bt-carousel .carousel-content{
  min-height:12rem;
}
.bt-carousel .carousel-content .ZMSGraphic,
.bt-carousel .carousel-content .ZMSGraphic .graphic,
.bt-carousel .carousel-content .ZMSGraphic .graphic img{
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
}
.bt-carousel .carousel-content .ZMSGraphic .graphic{
  text-align:center !important;
}
.bt-carousel[data-captions="1"] .carousel-content .ZMSGraphic .text{
  display:none;
}
.bt-carousel .carousel-caption{
  background:rgba(45,52,54,.45);
  border-radius:var(--ek-radius);
  padding:1rem 1.25rem;
}
.bt-carousel .carousel-item .article-quote,
.bt-carousel .carousel-item .quote-block,
.bt-carousel .carousel-item .section{
  margin:0;
}
.bt-carousel .carousel-control-prev,
.bt-carousel .carousel-control-next{
  width:8%;
}
.bt-carousel-zoom{
  position:absolute;
  right:.55rem;
  bottom:.55rem;
  z-index:5;
  width:1.75rem;
  height:1.75rem;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:none;
  border-radius:.35rem;
  background:rgba(45,52,54,.72);
  color:var(--ek-white);
  font-size:.75rem;
  line-height:1;
  cursor:zoom-in;
  opacity:.85;
  transition:opacity .2s ease, background .2s ease;
}
.bt-carousel-zoom:hover,
.bt-carousel-zoom:focus{
  opacity:1;
  background:rgba(45,52,54,.88);
  color:var(--ek-white);
  outline:none;
}
.fancybox-bt-carousel .fancybox-content{
  background:transparent;
  padding:0;
  max-width:min(1100px, 96vw);
}
.fancybox-bt-carousel .bt-carousel-fancybox-inner{
  width:min(1100px, 96vw);
  max-width:100%;
}
.fancybox-bt-carousel .bt-carousel{
  background:var(--ek-dark-hero);
  border-radius:var(--ek-radius);
  overflow:hidden;
}
.fancybox-bt-carousel .bt-carousel-zoom{
  display:none;
}

/* Events-Tabelle (eventOverview) */
.events-table{ border-collapse:separate; border-spacing:0; width:100%; }
.events-table thead th{
  color:var(--ek-coral); font-weight:700;
  font-size:.82rem; text-transform:uppercase; letter-spacing:.05em;
  border-top:none; border-bottom:2px solid var(--ek-coral);
  padding:.75rem .75rem;
}
.events-table tbody td{
  vertical-align:top; padding:.9rem .75rem;
  border-bottom:1px solid var(--ek-subtle-bg);
  color:var(--ek-charcoal); font-size:.95rem; line-height:1.25;
}
.events-table tbody tr:hover td{ background:var(--ek-subtle-bg); }
.events-date{ white-space:nowrap; font-weight:600; color:var(--ek-petrol-dark); }
.events-table th.events-price,
.events-table td.events-price{
  width:20%;
  max-width:20%;
}

/* Actions unter dem Veranstaltungstitel */
.events-table .events-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
  margin-top:.45rem;
}
.events-table .events-booking-details{
  margin-top:.45rem;
  font-size:.9rem;
  line-height:1.45;
}
.events-table .events-booking-details p:last-child{
  margin-bottom:0;
}

/* Links in der Events-Tabelle wie kleine Buttons (btn-ek / btn-sm) */
.events-table a.events-detail-link,
.events-table a.events-booking-btn,
.events-table .events-actions a{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  background-color:var(--ek-coral);
  border:1px solid var(--ek-coral);
  color:var(--ek-white)!important;
  border-radius:var(--ek-radius);
  padding:.25rem .65rem;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.02em;
  line-height:1.3;
  text-decoration:none;
  transition:.2s ease;
  white-space:nowrap;
  margin:0;
}
.events-table a.events-detail-link:hover,
.events-table a.events-booking-btn:hover,
.events-table .events-actions a:hover{
  background-color:var(--ek-coral-dark);
  border-color:var(--ek-coral-dark);
  color:var(--ek-white)!important;
}

/* Fancybox-Inhalt fuer Event-Details */
.fancybox-event-detail .fancybox-content{
  background:var(--ek-white);
  color:var(--ek-charcoal);
  border-radius:var(--ek-radius);
  padding:1.5rem 1.75rem;
  max-width:min(860px, 94vw);
  width:860px;
}
.fancybox-event-detail .events-detail-title{
  color:var(--ek-dark-nav);
  font-size:1.25rem;
  margin:0 0 1rem;
}
.fancybox-event-detail .events-detail-label{
  font-size:.75rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--ek-coral);
  margin:0 0 .35rem;
}
.fancybox-event-detail .events-detail-trainers,
.fancybox-event-detail .events-detail-place,
.fancybox-event-detail .events-detail-price,
.fancybox-event-detail .events-detail-date,
.fancybox-event-detail .events-detail-booking{
  margin:0 0 1rem;
  line-height:1.45;
}
.fancybox-event-detail .events-booking-btn{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  background-color:var(--ek-coral);
  border:1px solid var(--ek-coral);
  color:var(--ek-white)!important;
  border-radius:var(--ek-radius);
  padding:.25rem .65rem;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.02em;
  line-height:1.3;
  text-decoration:none;
  transition:.2s ease;
  white-space:nowrap;
}
.fancybox-event-detail .events-booking-btn:hover{
  background-color:var(--ek-coral-dark);
  border-color:var(--ek-coral-dark);
  color:var(--ek-white)!important;
}
.fancybox-event-detail .events-booking-details{
  margin-top:.45rem;
}
.events-table .events-price p:last-child{
  margin-bottom:0;
}
.fancybox-event-detail .events-trainer{
  display:block;
  margin-top:.15rem;
}
.fancybox-event-detail .events-trainer:first-of-type{ margin-top:0; }
.fancybox-event-detail .events-detail-body{
  line-height:1.55;
}
.fancybox-event-detail .events-detail-body p:last-child{
  margin-bottom:0;
}

/* emGroup: Buttons darin immer zentrieren */
.emGroup .emButton,
.emGroup .ZMSFile{
  text-align:center;
}

/* emButton size: small */
.btn-ek.btn-ek-sm{
  padding:.35rem .95rem;
  font-size:.875rem;
  letter-spacing:.01em;
}
.btn-outline-ek.btn-ek-sm{
  padding:.3rem .85rem;
  font-size:.875rem;
  gap:.35rem;
  border-width:1.5px;
}

/* ZMSFile wie emButton (btn-ek); Dateigröße im Button hinter dem Namen */
.web .ZMSFile,
.web div.ZMSFile{
  border:0;
  background:transparent;
  margin:0;
  padding:0;
  display:inline-block;
  border-radius:0;
}
.web .ZMSFile .title{
  position:relative;
  display:inline-flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.35rem;
  margin:0;
  line-height:1.2;
  white-space:nowrap;
  background-color:var(--ek-coral);
  border:1px solid var(--ek-coral);
  border-radius:var(--ek-radius);
  padding:.65rem 1.6rem;
  font-weight:600;
  font-size:1rem;
  letter-spacing:.02em;
  color:var(--ek-white);
  transition:.2s ease;
}
.web .ZMSFile .title:hover{
  background-color:var(--ek-coral-dark);
  border-color:var(--ek-coral-dark);
  color:var(--ek-white);
}
.web .ZMSFile .title img{
  display:none;
  float:none;
  margin:0;
}
.web .ZMSFile .title a,
.web .ZMSFile .title a:link,
.web .ZMSFile .title a:visited{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background:transparent;
  border:0;
  color:var(--ek-white)!important;
  border-radius:0;
  padding:0;
  font-weight:600;
  font-size:inherit;
  letter-spacing:inherit;
  text-decoration:none;
  margin:0;
  white-space:normal;
}
.web .ZMSFile .title a:hover{
  color:var(--ek-white)!important;
}
/* gesamter Button klickbar */
.web .ZMSFile .title a::after{
  content:"";
  position:absolute;
  inset:0;
}
.web .ZMSFile .title a::before{
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  content:"\f019"; /* fa-download */
  position:relative;
  z-index:1;
}
.web .ZMSFile .title span{
  white-space:nowrap;
  font-weight:600;
  font-size:.9em;
  opacity:.9;
  pointer-events:none;
}
.web .ZMSFile .text,
.web .ZMSFile .description{
  display:none;
}