/* ==========================================================================
   Die Bajasse – Custom Styles
   Nur Ueberschreibungen und Ergaenzungen. style.css niemals direkt bearbeiten.
   ========================================================================== */

/* ------------------------------------------------------------------
   Navbar – Glassmorphism auf dunklem Hintergrund
   backdrop-filter muss direkt auf #header-wrap, nicht per CSS-Variable.
   Opacity auf 0.75 reduziert damit der Blur-Effekt sichtbar wird.
   ------------------------------------------------------------------ */
.is-expanded-menu #header.transparent-header.semi-transparent {
  --cnvs-header-bg: rgba(var(--cnvs-invert-contrast-rgb), .75);
}
.is-expanded-menu .sticky-header.semi-transparent {
  --cnvs-header-sticky-bg: rgba(var(--cnvs-invert-contrast-rgb), .82);
}

/* Blur auf das eigentliche Wrapper-Element */
.is-expanded-menu #header.transparent-header.semi-transparent #header-wrap,
.is-expanded-menu .sticky-header.semi-transparent #header-wrap {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ------------------------------------------------------------------
   Sub-Navbar (#page-menu) – Glassmorphism auf Bajasse-Blau
   Frosted-Glass Effekt: semi-transparentes Markenblau + Backdrop-Blur
   Explizite Höhe damit Hero-Berechnung (var(--bajasse-subnav-height)) stimmt.
   ------------------------------------------------------------------ */
#page-menu-wrap {
  background-color: rgba(41, 106, 160, 0.75) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  min-height: var(--bajasse-subnav-height);
  display: flex;
  align-items: center;
}
/* Sticky-Zustand: etwas mehr Deckkraft damit der Schatten stimmig bleibt */
#page-menu.sticky-page-menu #page-menu-wrap {
  background-color: rgba(41, 106, 160, 0.88) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ------------------------------------------------------------------
   Content-Sections – einheitliche Abstände nach Canvas-Schema
   Alle Sections nutzen .page-section (120px oben/unten, one-page/onepage.css).
   Keine min-height pro Section: die frühere 100vh-Regel erzeugte je nach
   Inhaltshöhe ungleiche Leerräume unten und wurde deshalb entfernt.
   ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
   Zebra-Hintergründe für die One-Page-Sections
   Jede gerade Section setzt sich vom Body ab, damit die Seite nicht wie
   eine durchgehende Fläche wirkt. Light Mode: kräftiges Hellgrau
   (#e9ecef, Canvas' Standard #f8f9fa war zu dezent). Dark Mode: Canvas-
   Token --cnvs-section-bg (#343a40, etwas heller als der dunkle Body),
   der Moduswechsel passiert automatisch über die body.dark-Umdefinition.
   nth-of-type zählt neue Sections von selbst mit - keine Extra-Klassen
   im HTML nötig.
   ------------------------------------------------------------------ */
:root {
  --bajasse-section-alt: #dee2e6;
}
body.dark {
  --bajasse-section-alt: var(--cnvs-section-bg);
}
#content > .content-wrap > section.page-section:nth-of-type(even) {
  background-color: var(--bajasse-section-alt);
}

:root {
  /* Markenfarben */
  --bajasse-blue:   #296aa0;
  --bajasse-yellow: #ffd507;
  --bajasse-black:  #000000;
  --bajasse-white:  #ffffff;

  /* Canvas Theme-Variablen ueberschreiben */
  --cnvs-themecolor:     #296aa0;
  --cnvs-themecolor-rgb: 41, 106, 160;
  --cnvs-heading-color:  #111111;
  --cnvs-body-color:     #555555;
  --cnvs-link-color:     #296aa0;

  /* Schriften */
  --cnvs-body-font:    'Inter', sans-serif;
  --cnvs-heading-font: 'Poppins', sans-serif;
  --cnvs-primary-font: 'Poppins', sans-serif;

  /* Layout-Ankerpunkte */
  --bajasse-subnav-height:   48px;  /* Höhe #page-menu-wrap (Link 28px + Margin 20px) */
  --bajasse-sticky-nav:      60px;  /* --cnvs-header-height-shrink (sticky Hauptnavbar) */
  --bajasse-sticky-total:   108px;  /* subnav + sticky-nav kombiniert */
}

.bg-bajasse-blue {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bajasse-blue), var(--bs-bg-opacity)) !important;
}
.bg-bajasse-yellow {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bajasse-yellow), var(--bs-bg-opacity)) !important;
}

/* Sekundaerfarbe Gelb als Akzent-Helfer */
.text-yellow { color: var(--bajasse-yellow) !important; }
.bg-yellow   { background-color: var(--bajasse-yellow) !important; }
.bg-blue     { background-color: var(--bajasse-blue) !important; }

/* Gelbe Button-Variante */
.btn-yellow {
  background-color: var(--bajasse-yellow);
  border-color: var(--bajasse-yellow);
  color: #1a1a1a;
}
.btn-yellow:hover,
.btn-yellow:focus {
  background-color: #ffe066;
  border-color: #ffe066;
  color: #1a1a1a;
}

/* Text-Logo */
#logo a { display: inline-flex !important; align-items: center; height: 100%; }
#logo .logo-text {
  display: inline-block !important;
  font-family: var(--cnvs-heading-font);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.5px;
  line-height: 1;
  white-space: nowrap;
  color: #1a1a1a;
}
#logo .logo-text .dot { color: var(--bajasse-yellow); }
/* Heller Logo-Text auf transparentem (dunklem) Header und im Dark Mode */
#header.transparent-header:not(.sticky-header) #logo .logo-text { color: #fff; }
body.dark #logo .logo-text { color: #fff; }

/* Text-Logo: Basis */
#logo a span {
  font-family: 'Abril Fatface', serif;   /* deine Font */
  font-size:   1.6rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  display: inline-block;
}

/* Heller Header → dunkler Text */
#logo a .logo-default {
  color: #333;
}

/* Dunkler Header (.dark) → heller Text */
#logo a .logo-dark {
  color: #fff;
}

/* Marken-Buttons: btn-primary auf Markenblau (kontraststark) statt Bootstrap-Blau */
.btn-primary {
  --bs-btn-bg: #3f93c9;
  --bs-btn-border-color: #3f93c9;
  --bs-btn-hover-bg: #357fb0;
  --bs-btn-hover-border-color: #357fb0;
  --bs-btn-active-bg: #2f6f9a;
  --bs-btn-active-border-color: #2f6f9a;
  background-color: #3f93c9;
  border-color: #3f93c9;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: #357fb0;
  border-color: #357fb0;
}
.badge.bg-blue { color: #fff; }

/* Hero mit Marken-Verlauf statt Foto (self-contained, kein fehlendes Bild) */
.bajasse-hero {
  background:
    linear-gradient(135deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 100%),
    linear-gradient(135deg, var(--bajasse-blue) 0%, #3f93c9 55%, var(--bajasse-yellow) 140%);
  background-size: cover;
  background-position: center;
}
.hero-eyebrow {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 50px;
  background: var(--bajasse-yellow);
  color: #1a1a1a;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 0.78rem;
  margin-bottom: 1.25rem;
}

/* Page-Title Verlauf fuer Unterseiten */
.bajasse-pagetitle {
  background:
    linear-gradient(135deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 100%),
    linear-gradient(135deg, var(--bajasse-blue) 0%, #3f93c9 60%, var(--bajasse-yellow) 150%);
  background-size: cover;
}

/* ------------------------------------------------------------------
   Subpage-Hero – halbhohe Hero-Section (50vh) fuer Unterseiten
   include-header zieht die Section hinter die transparente Navbar,
   das padding-top (nur Desktop, .is-expanded-menu) gleicht die
   Header-Hoehe wieder aus.
   ------------------------------------------------------------------ */
.bajasse-subhero {
  display: flex;
  align-items: center;
  min-height: 50vh;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.is-expanded-menu .bajasse-subhero {
  padding-top: calc(var(--cnvs-header-height, 72px) + 2.5rem);
}
/* Canvas setzt .slider-element .container auf height:100% – hier nicht gewollt */
.bajasse-subhero .container { height: auto; }

/* Breadcrumb im Hero: statisch zentriert, helle Links
   (Canvas positioniert Breadcrumbs sonst absolut im Page-Title) */
.bajasse-subhero .breadcrumb {
  position: static;
  justify-content: center;
  margin: 1.25rem 0 0;
  transform: none;
}
.bajasse-subhero .breadcrumb a { color: rgba(255, 255, 255, .75); }
.bajasse-subhero .breadcrumb a:hover { color: #fff; }
.bajasse-subhero .breadcrumb .breadcrumb-item.active { color: var(--bajasse-yellow); }
.bajasse-subhero .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, .5); }

/* Farbige Platzhalter-Kacheln bis echte Fotos da sind */
.bajasse-tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  border-radius: 10px;
  color: #fff;
  font-size: 2.6rem;
  overflow: hidden;
}
.bajasse-tile-1 { background: linear-gradient(135deg, var(--bajasse-blue), #3f93c9); }
.bajasse-tile-2 { background: linear-gradient(135deg, var(--bajasse-yellow), #f0b429); color:#1a1a1a; }
.bajasse-tile-3 { background: linear-gradient(135deg, #2c3e50, #4a6580); }
.bajasse-tile-4 { background: linear-gradient(135deg, #3f93c9, var(--bajasse-yellow)); }

/* gotoTop in Markenfarbe */
#gotoTop {
  background-color: var(--bajasse-blue);
  border-radius: 50%;
}
#gotoTop:hover { background-color: var(--bajasse-yellow); color:#1a1a1a; }

/* Theme-Toggle Button im Header */
#theme-toggle {
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
  font-size: 1.1rem;
  line-height: 1;
}
#theme-toggle .icon-sun  { display: none; }
#theme-toggle .icon-moon { display: inline-block; }
body.dark #theme-toggle .icon-sun  { display: inline-block; }
body.dark #theme-toggle .icon-moon { display: none; }

/* Akzent-Linie unter Heading-Blocks */
.heading-block.bajasse-heading h2::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin-top: 14px;
  border-radius: 4px;
  background: var(--bajasse-yellow);
}
.heading-block.center.bajasse-heading h2::after { margin-left: auto; margin-right: auto; }

/* CTA-Navpunkt "Mitglied werden" */
.is-expanded-menu .menu-item-cta > .menu-link > div {
  background-color: var(--bajasse-yellow);
  color: #1a1a1a;
  padding: 6px 14px;
  border-radius: 4px;
  font-weight: 600;
}
.is-expanded-menu .menu-item-cta > .menu-link:hover > div {
  background-color: #ffe066;
}

/* Erster Swiper-Slide: Abstand für transparenten Header */
#slider .swiper-slide:first-child > .container {
  padding-top: calc(var(--cnvs-header-height, 72px) + 10rem);
}

/* Feature-Boxen mit Kontrast-Hintergrund */
.fbox-contrast {
  background-color: var(--cnvs-contrast-bg);
  border: 1px solid var(--cnvs-border-color);
}

body.dark .fbox-contrast {
  border: 1px solid rgba(255, 255, 255, 0.15);
}


/*##################################
/*
/*  Event-Übersicht (index.html) – Dark Mode
/*
/*##################################*/

/* bg-white der Event-Karten im Dark Mode überschreiben (Bootstrap nutzt !important) */
body.dark .entry.event .grid-inner.bg-white {
  background-color: var(--cnvs-contrast-bg) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* Badge "Online Event": helles Bg + dunkler Text → dezent hell auf dunkel */
body.dark .entry.event .badge.bg-light {
  background-color: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
}


/*##################################
/*
/*  hover-parallax.html
/*
/*##################################*/

.move-bg {
  width: 100%;
  height: 100%;
  background-size: cover;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}


/* img-hover-wraps */
.img-hover-wrap {
  -webkit-transition: transform .3s ease;
  -o-transition: transform .3s ease;
  transition: transform .3s ease;
  -moz-transform-style: flat !important;
  transform-style: flat !important;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.img-hover-wrap:hover {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
  z-index: 99;
}

.img-hover-card:after {
  content: " ";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5));
  transition: all .3s ease;
  opacity: 0;
}

.img-hover-wrap.show-title .img-hover-card:after { opacity: 0.5; }

.img-hover-wrap:hover .img-hover-card:after { opacity: 1 }

.img-hover-card {
  position: relative;
  display: block;
  will-change: transform;
  transition: all .3s ease;
  box-shadow: 0 10px 40px transparent;
}

.img-hover-card img {
  width: 100%;
  max-width: 100%;
  display: block;
}

.img-hover-card.hover-in {
  transition: -webkit-transform .2s ease-out;
  transition: transform .2s ease-out;
  transition: transform .2s ease-out, -webkit-transform .2s ease-out;
}

.img-hover-card.hover-3d { z-index: 99; }

.img-hover-card.hover-out {
  transition: -webkit-transform .2s ease-in;
  transition: transform .2s ease-in;
  transition: transform .2s ease-in, -webkit-transform .2s ease-in;
}

.img-hover-wrap:hover .img-hover-card { box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4); }

.img-hover-wrap.show-title .img-hover-title,
.img-hover-wrap.show-title .img-hover-category {
  -webkit-transform: translateY(0) scale(1);
  -ms-transform: translateY(0) scale(1);
  transform: translateY(0) scale(1);
  opacity: 1;
}

.img-hover-wrap.show-title:hover .img-hover-title,
.img-hover-wrap.show-title:hover .img-hover-category {
  -webkit-transform: scale(1.106);
  -ms-transform: scale(1.106);
  transform: scale(1.106);
}

.img-hover-wrap:hover .img-hover-title,
.img-hover-wrap:hover .img-hover-category {
  -webkit-transform: translateY(0) scale(1);
  -ms-transform: translateY(0) scale(1);
  transform: translateY(0) scale(1);
  opacity: 1;
}

.img-hover-detail {
  position: absolute;
  left: 40px;
  right: 40px;
  top: 40px;
  bottom: 40px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  -webkit-transform: translateZ(40px);
  transform: translateZ(40px);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.img-hover-title {
  margin: 0 0 10px;
  font-size: 24px;
  font-weight: 700;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
  transition: .4s ease;
  opacity: 0;
  -webkit-transform: translateY(40px) scale(0);
  -ms-transform: translateY(40px) scale(0);
  transform: translateY(40px) scale(0);
  will-change: transform;
}

.img-hover-category {
  opacity: 0;
  margin: 0 0 18px;
  font-family: 'Lato';
  transition: .4s ease;
  transition-delay: .1s;
  -webkit-transform: translateY(40px) scale(0);
  -ms-transform: translateY(40px) scale(0);
  transform: translateY(40px) scale(0);
  will-change: transform;
}

.img-hover-detail a { color: #FFF; }


/*##################################
/*
/*  block-portfolio-single.html
/*
/*##################################*/

.block-portfolio-single .portfolio-single-content h2 {
  font-size: 1.75rem;
}

@media (min-width: 992px) {
  .block-portfolio-single .content-wrap { overflow: inherit; }

  .block-portfolio-single .portfolio-single-content.content-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 60px;
    height: 100%;
  }

  .block-portfolio-single .portfolio-meta {
    font-size: .925rem;
  }

  .block-portfolio-single .portfolio-meta li {
    margin-bottom: 14px
  }
}


/* Kontaktformular-Overlay – Panel folgt Canvas Light/Dark */
.contact-form-overlay {
  background-color: var(--cnvs-contrast-bg);
}
body.dark .contact-form-overlay {
  background-color: var(--cnvs-contrast-bg);
}

/*##################################
/*
/*  Beitrags-Karten (mitglied-werden.html)
/*
/*  Design-Mix aus den Canvas-Pricing-Vorlagen "Sonam" (runde Karten,
/*  weicher Schatten, farbiger Preis, gefuellter Button) und "Karma"
/*  (Uppercase-Typografie, umrandeter Preiskasten mit abgetrenntem
/*  Zeitraum, eckige Listenpunkte, Stempel auf dem Favoriten), in den
/*  Bajasse-Markenfarben. Der Karma-Stempel ist ein externes PNG und
/*  wurde als eigenes CSS-Siegel nachgebaut (kein Fremd-Asset).
/*  Akzentfarbe: Blau im Light Mode, Gelb im Dark Mode (Kontrast).
/*
/*##################################*/

.bajasse-price-card {
  --price-accent: var(--bajasse-blue);
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 2rem 1.75rem;
  text-align: center;
  background-color: var(--cnvs-contrast-bg);
  border: 1px solid rgba(128, 128, 128, .25);
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, .05), 0 15px 30px -10px rgba(0, 0, 0, .3);
  transition: transform .3s ease, box-shadow .3s ease;
}

body.dark .bajasse-price-card {
  --price-accent: var(--bajasse-yellow);
}

.bajasse-price-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, .08), 0 20px 40px -10px rgba(0, 0, 0, .4);
}

.bajasse-price-card.favorit {
  border: 2px solid var(--bajasse-yellow);
}

.bajasse-price-card h3 {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 .75rem;
  padding-bottom: .85rem;
  border-bottom: 2px solid var(--price-accent);
  hyphens: manual;
}

.bajasse-price-card .price-sub {
  display: block;
  font-size: .85rem;
  opacity: .65;
}

.bajasse-price-card .price {
  position: relative;
  margin: 1.25rem 0 1.5rem;
  padding: 1.25rem 1rem 0;
  border: 2px solid var(--price-accent);
  border-radius: 5px;
}

.bajasse-price-card .price-value {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  color: var(--price-accent);
}

.bajasse-price-card .price-value sup {
  font-size: 1.1rem;
  font-weight: 600;
  top: -1.4rem;
  margin-right: .2rem;
  opacity: .8;
}

.bajasse-price-card .per {
  display: block;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .7;
  margin-top: 1rem;
  padding: .6rem 0;
  border-top: 2px solid var(--price-accent);
}

/* Stempel "Unser Favorit" (Karma: Stamp auf dem Preiskasten) */
.bajasse-price-card .price-stamp {
  position: absolute;
  top: -1.6rem;
  right: -1.2rem;
  width: 5.25rem;
  height: 5.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bajasse-yellow);
  color: #1a1a1a;
  border-radius: 50%;
  box-shadow: inset 0 0 0 5px var(--bajasse-yellow), inset 0 0 0 7px rgba(26, 26, 26, .85), 0 4px 10px rgba(0, 0, 0, .25);
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: .66rem;
  line-height: 1.25;
  letter-spacing: .1em;
  text-transform: uppercase;
  transform: rotate(12deg);
  pointer-events: none;
}

.bajasse-price-card ul {
  list-style: square;
  text-align: left;
  margin: 0 0 1.75rem;
  padding: 0 0 0 1.3rem;
  flex-grow: 1;
  font-size: .95rem;
}

.bajasse-price-card ul li {
  padding: .4rem 0;
}

.bajasse-price-card ul li::marker {
  color: var(--price-accent);
}

/* Button: Sonam (gefuellt, volle Breite, runde Ecken) + Karma (Uppercase) */
.bajasse-price-card .price-action {
  display: block;
  margin-top: auto;
  padding: .9rem 2rem;
  border-radius: 5px;
  border: 0;
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  background-color: var(--cnvs-heading-color);
  color: var(--cnvs-contrast-bg);
  transition: background-color .3s ease, color .3s ease;
}

.bajasse-price-card .price-action:hover,
.bajasse-price-card .price-action:focus {
  background-color: var(--bajasse-blue);
  color: #fff;
}

.bajasse-price-card.favorit .price-action {
  background-color: var(--bajasse-yellow);
  color: #1a1a1a;
}

.bajasse-price-card.favorit .price-action:hover,
.bajasse-price-card.favorit .price-action:focus {
  background-color: #ffe066;
  color: #1a1a1a;
}

/* Blanko-Antrag-Box (Alternative zum Online-Formular) */
.bajasse-blanko-box {
  padding: 1.75rem;
  text-align: center;
  border: 1px dashed rgba(128, 128, 128, .45);
  border-radius: 10px;
  background-color: var(--cnvs-contrast-bg);
}

/* ---------------------------------------------------------------
   Google-Maps-Zwei-Klick-Lösung (DSGVO)
   Platzhalter bis zur Einwilligung, Logik in js/maps-consent.js.
   Hintergrund über Canvas-Token, folgt automatisch Dark/Light Mode.
----------------------------------------------------------------*/
.bajasse-map-consent {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  background-color: var(--cnvs-section-bg, #f8f9fa);
}

.bajasse-map-consent-box {
  max-width: 420px;
}

/* Nach der Einwilligung füllt der iframe den Platzhalter komplett */
.bajasse-map-consent.bajasse-map-loaded {
  display: block;
  padding: 0;
}

/* Kontakt-Section der Startseite: Das Formular-Overlay spannt sich über die
   ganze Section (z-index 10) und fing bisher ALLE Klicks ab - die Karte bzw.
   der Consent-Button dahinter waren nie bedienbar. Nur die Formular-Karte
   selbst soll Klicks fangen, der Rest ist durchlässig. */
#section-contact .container-fluid {
  pointer-events: none;
}

#section-contact .contact-form-overlay {
  pointer-events: auto;
}