/*
Theme Name: Sweet Leaf
Theme URI: https://www.sweet-leaf.de
Description: Child-Theme für Sweet Leaf. Inhalte, Header, Footer, Farben und Schriften werden in Elementor gepflegt; hier stehen nur Effekte, die Elementor Free nicht als Einstellung anbietet.
Author: Sweet Leaf
Template: hello-elementor
Version: 2.6.2
Text Domain: sweet-leaf
*/

html,
body {
  background: #000;
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--e-global-color-primary, #ffc000);
  color: #000;
}

/* Header bleibt beim Scrollen oben */
body.ehf-header #masthead {
  position: sticky;
  top: 0;
  z-index: 999;
}
body.ehf-header.admin-bar #masthead { top: 32px; }
.sl-header .sl-menu { --sl-pad: 12px; }
@media (min-width: 1025px) {
  .sl-header .sl-menu nav.hfe-nav-menu__layout-horizontal:not(.hfe-dropdown) > ul.hfe-nav-menu { flex-wrap: nowrap; }
  /* Tastatur und Touch (ohne Hover): Untermenü öffnet sich per Fokus bzw. erstem Tippen */
  .sl-header .sl-menu nav:not(.hfe-dropdown) li.menu-item-has-children:focus-within > .sub-menu,
  .sl-header .sl-menu nav:not(.hfe-dropdown) li.sl-touch-open > .sub-menu {
    visibility: visible;
    opacity: 1;
    height: auto;
  }
}
@media (min-width: 1025px) and (max-width: 1199px) {
  .sl-header .sl-menu { --sl-pad: 8px; }
  .sl-header .sl-menu .hfe-nav-menu > li > a.hfe-menu-item { padding-left: 8px; padding-right: 8px; }
}

/* Lange Wörter (E-Mail, Komposita) brechen um statt die Seite zu verbreitern */
h1, h2, h3, h4, .elementor-heading-title, .elementor-icon-box-content, .sl-legal, .elementor-widget-text-editor {
  overflow-wrap: break-word;
  hyphens: auto;
}
.elementor-icon-box-description a[href^="mailto:"] { overflow-wrap: anywhere; }

/* Eingeklappte Desktop-Untermenüs dürfen die Seite nicht verbreitern.
   Auf Handy/Tablet bleibt der Header offen, sonst schneidet er das aufgeklappte Menü ab. */
@media (min-width: 1025px) {
  #masthead .e-con.sl-header { overflow-x: clip; }
}
@media (max-width: 1024px) {
  #masthead,
  #masthead .e-con.sl-header,
  #masthead .e-con-inner { overflow: visible; }
  .sl-header .hfe-active-menu + nav.hfe-nav-menu__layout-horizontal {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    top: var(--sl-menu-top, 76px);
    z-index: 1000;
    background: #000;
    max-height: calc(100dvh - var(--sl-menu-top, 76px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
  }
}
.sl-header .hfe-nav-menu > li:last-child > .sub-menu { left: auto; right: 0; }
@media (max-width: 782px) { body.ehf-header.admin-bar #masthead { top: 0; } }

/* Hauptmenü: Unterstrich beim aktiven Punkt */
.sl-menu .hfe-nav-menu > li > a.hfe-menu-item {
  position: relative;
}
.sl-menu .hfe-nav-menu > li > a.hfe-menu-item::after {
  content: "";
  position: absolute;
  left: var(--sl-pad, 14px);
  right: var(--sl-pad, 14px);
  bottom: 4px;
  height: 2px;
  background: var(--e-global-color-primary, #ffc000);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.sl-menu .hfe-nav-menu > li:hover > a.hfe-menu-item::after,
.sl-menu .hfe-nav-menu > li.current-menu-item > a.hfe-menu-item::after,
.sl-menu .hfe-nav-menu > li.current-menu-ancestor > a.hfe-menu-item::after {
  transform: scaleX(1);
}
.sl-menu .sub-menu {
  border-top: 2px solid var(--e-global-color-primary, #ffc000);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .6);
}
@media (max-width: 1024px) {
  .sl-header .sl-menu .hfe-nav-menu__toggle { margin-left: auto !important; margin-right: 0 !important; }
  .sl-menu .hfe-nav-menu > li > a.hfe-menu-item::after { display: none; }
  .sl-menu .hfe-nav-menu__layout-horizontal { border-top: 1px solid #222; }
}

/* Logo-JPGs auf Schwarz: im Hero den schwarzen Hintergrund ausblenden */
.sl-blend img { mix-blend-mode: screen; }

/* ---------- Bildpräsentation: Fotos werden nie beschnitten ---------- */

/* Foto mit Tiefe: feine Kante und weicher Schatten */
.sl-photo img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(255, 255, 255, .06);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .9);
}

/* Aufmacherfoto: goldene Abschlusslinie */
.sl-hero-photo img { border-bottom: 3px solid var(--e-global-color-primary, #ffc000); }

/* Mehrzeilige Überschriften gleichmäßig umbrechen statt ein Wort allein in der letzten Zeile */
.elementor-heading-title { text-wrap: balance; }

/* Versetzter Goldrahmen hinter Fotos neben Text */
.sl-frame { position: relative; z-index: 0; align-self: start; padding: 0 18px 18px 0; }
.sl-frame img { width: 100%; }
.sl-frame::before {
  content: "";
  position: absolute;
  inset: 18px 0 0 18px;
  border: 2px solid var(--e-global-color-primary, #ffc000);
  opacity: .8;
  z-index: -1;
  pointer-events: none;
}
@media (max-width: 767px) {
  .sl-frame { padding: 0 12px 12px 0; }
  .sl-frame::before { inset: 12px 0 0 12px; }
}

/* Hochformat bleibt beim Lesen stehen (nur Desktop) */
@media (min-width: 1025px) {
  .sl-frame.sl-sticky { position: sticky; top: 110px; align-self: start; }
  .admin-bar .sl-frame.sl-sticky { top: 142px; }
}

/* Vergrößerbare Fotos: dezentes Lupen-Signal */
.sl-photo a,
.sl-gallery .gallery-icon a { position: relative; display: block; }
.sl-photo a::after,
.sl-gallery .gallery-icon a::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 38px;
  height: 38px;
  background: rgba(0, 0, 0, .7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFC000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E") center / 20px no-repeat;
  border: 1px solid rgba(255, 192, 0, .5);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
}
.sl-photo a:hover::after,
.sl-gallery .gallery-icon a:hover::after { opacity: 1; transform: none; }
.sl-photo a:hover img { filter: brightness(1.08); }
.sl-photo img { transition: filter .3s ease; }

/* Mitgliederkarten */
.sl-card { position: relative; transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.sl-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--e-global-color-primary, #ffc000);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.sl-card:hover { border-color: #3a3a3a !important; transform: translateY(-4px); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .9); }
.sl-card:hover::after { transform: scaleX(1); }
.sl-card img { display: block; width: 100%; height: auto; transition: filter .3s ease; }
.sl-card:hover img { filter: brightness(1.1); }

/* Galerie als Mauerwerk: jedes Foto in seinem Originalformat */
.sl-gallery .gallery { display: block; column-gap: 10px; columns: 4; }
.sl-gallery .gallery-columns-2 { columns: 2; }
.sl-gallery .gallery-columns-3 { columns: 3; }
.sl-gallery .gallery-item {
  display: block;
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  break-inside: avoid;
}
.sl-gallery .gallery-item img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(255, 255, 255, .06);
  transition: filter .3s ease;
}
.sl-gallery .gallery-item:hover img { filter: brightness(1.1); }
.sl-gallery br { display: none; }
@media (max-width: 1024px) { .sl-gallery .gallery-columns-4 { columns: 3; } }
@media (max-width: 767px) { .sl-gallery .gallery { columns: 2; } }

/* Fotos immer vollständig */
.elementor-widget-image img { max-width: 100%; }

/* Lesbare Fließtexte in Rechtstexten */
.sl-legal h2 {
  margin: 1.6em 0 .5em;
  color: var(--e-global-color-primary, #ffc000);
  font-family: var(--e-global-typography-primary-font-family, "Roboto"), sans-serif;
  font-size: 24px;
  font-weight: 400;
}
.sl-legal h2:first-child { margin-top: 0; }
/* Linke Kante wie alle Bereiche, Zeilen aber lesbar kurz */
.sl-legal { max-width: 860px; }
.sl-legal img { display: block; max-width: 260px; height: auto; margin: 10px 0; }
.sl-legal ul { padding-left: 1.2em; }

.elementor-lightbox { --lightbox-ui-color-hover: #ffc000; }