/*
Theme Name: Hazel Child
Template:   hazel
*/



/* =========================================================
   Hover-Rotate – Original-Verhalten, aber ohne abgeschnittene Bilder
   Optimiert für Hazel 5 + WPBakery
   ========================================================= */

/* Optional: Element über Nachbarn heben */
.elevate-on-hover:hover { position: relative; z-index: 1000; }

/* ===== 1) Container – wie dein Original, plus Anti-Clipping ===== */
.hover-rotate {
  rotate: 5deg;
  transform: scale(1.3);
  overflow: visible !important;
  margin: 0;
  position: relative;
  z-index: 1;
}
.hover-rotate1 {
  rotate: -3deg;
  transform: scale(1.3);
  overflow: visible !important;
  margin: 0;
  position: relative;
  z-index: 1;
}
.hover-rotate2 {
  rotate: -5deg;
  transform: scale(1.3);
  overflow: visible !important;
  margin: 0;
  position: relative;
  z-index: 1;
}
.hover-rotate-img {
  rotate: 0deg;
  overflow: visible !important;
  margin: 0;
  position: relative;
  z-index: 1;
}

/* ===== 2) Typische WPBakery/Hazel-Wrapper „entclippen“ =====
   (verhindert, dass die Eltern das vergrößerte Bild abschneiden) */
.hover-rotate .wpb_single_image,
.hover-rotate .vc_single_image-wrapper,
.hover-rotate figure,
.hover-rotate .wpb_wrapper,
.hover-rotate .vc_column-inner,
.hover-rotate1 .wpb_single_image,
.hover-rotate1 .vc_single_image-wrapper,
.hover-rotate1 figure,
.hover-rotate1 .wpb_wrapper,
.hover-rotate1 .vc_column-inner,
.hover-rotate2 .wpb_single_image,
.hover-rotate2 .vc_single_image-wrapper,
.hover-rotate2 figure,
.hover-rotate2 .wpb_wrapper,
.hover-rotate2 .vc_column-inner,
.hover-rotate-img .wpb_single_image,
.hover-rotate-img .vc_single_image-wrapper,
.hover-rotate-img figure,
.hover-rotate-img .wpb_wrapper,
.hover-rotate-img .vc_column-inner,
.vc_row, .vc_column_container {
  overflow: visible !important;
}

/* Falls das Bild verlinkt ist: der Link darf nicht clippen */
.hover-rotate a,
.hover-rotate1 a,
.hover-rotate2 a,
.hover-rotate-img a {
  display: inline-block;
  overflow: visible !important;
  position: relative;
  z-index: 1;
}

/* ===== 3) Das Bild selbst – Basis =====
   (deckt ,  und WPBakerys .vc_single_image-img ab) */
.hover-rotate img,
.hover-rotate1 img,
.hover-rotate2 img,
.hover-rotate-img img,
.hover-rotate .vc_single_image-img,
.hover-rotate1 .vc_single_image-img,
.hover-rotate2 .vc_single_image-img,
.hover-rotate-img .vc_single_image-img,
.hover-rotate picture img,
.hover-rotate1 picture img,
.hover-rotate2 picture img,
.hover-rotate-img picture img {
  display: block;
  box-sizing: border-box;
  max-width: 100%;
  position: relative;           /* z-index wirksam */
  z-index: 1;
  transform-origin: 50% 50%;
  transition: transform 0.3s ease, opacity 0.3s ease;
  will-change: transform;
  backface-visibility: hidden;  /* Glitches vermeiden */
}

/* ===== 4) HOVER-EFFEKTE – exakt wie dein Original ===== */
/* Nur wenn verlinkt (a:hover img) */
.hover-rotate a:hover img,
.hover-rotate a:hover .vc_single_image-img,
.hover-rotate a:hover picture img {
  transform: scale(1.3) rotate(-5deg);
  overflow: visible;
  z-index: 1000;
  opacity: 1;
}

.hover-rotate1 a:hover img,
.hover-rotate1 a:hover .vc_single_image-img,
.hover-rotate1 a:hover picture img {
  transform: scale(1.3) rotate(363deg); /* entspricht „volle Drehung“ in deinem Code */
  overflow: visible;
  z-index: 1000;
  opacity: 1;
}

.hover-rotate2 a:hover img,
.hover-rotate2 a:hover .vc_single_image-img,
.hover-rotate2 a:hover picture img {
  transform: scale(1.3) rotate(5deg);
  overflow: visible;
  z-index: 1000;
  opacity: 1;
}

/* Diese Variante reagiert (wie bei dir) auch ohne Link */
.hover-rotate-img:hover img,
.hover-rotate-img:hover .vc_single_image-img,
.hover-rotate-img:hover picture img {
  transform: scale(1.2) rotate(-5deg);
  overflow: visible;
  z-index: 1000;
}

/* Bei Hover den Wrapper über Nachbarn legen */
.hover-rotate:hover,
.hover-rotate1:hover,
.hover-rotate2:hover,
.hover-rotate-img:hover {
  z-index: 10;
}


/* =========================================================
   LINK-UNTERSTREICHUNG – konsistent für Hazel + WPBakery
   ========================================================= */

/* 0) Minimal-Reset: NICHT alle Links killen, nur typische Nicht-Text-Links */
a.button, .button a, .btn, button a,
.hz-menu a, .main-navigation a, .menu a, .nav a,
.wpb_single_image a, figure a,
.social a, .social-icons a {
  text-decoration: none !important;
}

/* 1) Fließtext: Unterstreichung erzwingen (inkl. Zustände) */
.entry-content a,
.post-content a,
.wpb_text_column a,
.vc_column_text a,
.tt_text a,
.article-content a {
  text-decoration: underline !important;
  text-underline-offset: 0.12em;
  text-decoration-thickness: 0.1em;
}
.entry-content a:hover, .entry-content a:focus, .entry-content a:active,
.post-content a:hover, .post-content a:focus, .post-content a:active,
.wpb_text_column a:hover, .wpb_text_column a:focus, .wpb_text_column a:active,
.vc_column_text a:hover, .vc_column_text a:focus, .vc_column_text a:active,
.tt_text a:hover, .tt_text a:focus, .tt_text a:active,
.article-content a:hover, .article-content a:focus, .article-content a:active {
  text-decoration: underline !important;
  /* Optional: Hover-Farbe im Fließtext aktivieren */
  /* color: #06294a !important; */
}

/* 1a) Ausnahmen im Fließtext: Buttons/Bild-Links NICHT unterstreichen */
.entry-content a.button,
.post-content a.button,
.wpb_text_column a.button,
.vc_column_text a.button,
.entry-content .wpb_single_image a,
.post-content  .wpb_single_image a,
.entry-content figure a,
.post-content  figure a {
  text-decoration: none !important;
}

/* 2) Header/Primärmenüs: grundsätzlich ohne Linie */
#header a,
.site-header a,
.main-navigation a,
.menu a,
.nav a,
.hz-menu a {
  text-decoration: none !important;
}

/* 3) FOOTER: Text-Links unterstrichen + Zeilenhöhe */
#footer a,
.site-footer a,
.footer a,
.widget_text a,
.site-info a,
.footer-widgets a {
  text-decoration: underline !important;
  text-underline-offset: 0.12em;
  text-decoration-thickness: 0.1em;
  line-height: 1.4em !important;
}

/* 3a) …aber Footer-Menüs/Buttons/Social-Links NICHT */
#footer .menu a,
.site-footer .menu a,
.footer .menu a,
.widget_nav_menu a,
#footer a.button,
.site-footer a.button,
.footer a.button,
#footer .button a,
.site-footer .button a,
.footer .button a,
#footer .btn a,
.site-footer .btn a,
.footer .btn a,
#footer .social a,
.site-footer .social a,
.footer .social a,
#footer .social-icons a,
.site-footer .social-icons a,
.footer .social-icons a {
  text-decoration: none !important;
  line-height: normal !important;
}

/* 3b) Speziell: Footer-Headings lassen Unterstreichung zu */
.container.no-fcontainer .footer_sidebar h6.wp-block-heading {
  line-height: 1.4em !important;
  text-decoration: inherit !important;
}
.container.no-fcontainer .footer_sidebar h6.wp-block-heading a,
.container.no-fcontainer .footer_sidebar h6.wp-block-heading strong a {
  text-decoration: underline !important;
  text-underline-offset: 0.12em !important;
  text-decoration-thickness: 0.1em !important;
  line-height: 1.4em !important;
}
/* Sonderfall Klassen-Match "p:link" */
.container.no-fcontainer .footer_sidebar h6.wp-block-heading[class*="p:link"] a,
.container.no-fcontainer .footer_sidebar h6.wp-block-heading[class*="p:link"] strong a {
  text-decoration: underline !important;
  text-underline-offset: 0.12em !important;
  text-decoration-thickness: 0.1em !important;
  line-height: 1.4em !important;
}

/* 3c) Footer-Hoverfarbe nur für Text-Links (nicht Menüs/Buttons/Social) */
body #footer .footer_sidebar h6.wp-block-heading a:hover,
body #footer .footer_sidebar h6.wp-block-heading strong a:hover,
body .site-footer .footer_sidebar h6.wp-block-heading a:hover,
body .site-footer .footer_sidebar h6.wp-block-heading strong a:hover,
body footer .footer_sidebar h6.wp-block-heading a:hover,
body footer .footer_sidebar h6.wp-block-heading strong a:hover,
body #footer .widget_text a:hover,
body .site-footer .widget_text a:hover,
body .footer .widget_text a:hover {
  color: #86BD40 !important;
}

/* 4) Blog-Listen: Titel/Meta/Read-More ohne, Excerpt-Links mit Linie */
.blog .entry-title a,
.blog .entry-meta a,
.blog .read-more a,
.archive .entry-title a,
.archive .entry-meta a,
.archive .read-more a {
  text-decoration: none !important;
}
.blog .entry-summary p a,
.archive .entry-summary p a {
  text-decoration: underline !important;
  text-underline-offset: 0.12em;
  text-decoration-thickness: 0.1em;
}

/* 5) Sicherheit: Buttons überall ohne Linie */
a.button, .btn, .button, button a {
  text-decoration: none !important;
}
/* ===============================
   Fließtext-Links – Hover-Farbe
   (überstimmt Hazel/WPBakery)
   =============================== */

/* Basis: normale Linkfarbe im Fließtext (falls gewünscht) */
.entry-content a,
.post-content a,
.wpb_text_column a,
.vc_column_text a,
.tt_text a,
.article-content a {
  color: #0b5cab !important; /* deine normale Linkfarbe */
}

/* Hover: kräftiger/dunkler */
.entry-content a:hover,
.entry-content a:focus,
.entry-content a:active,
.post-content a:hover,
.post-content a:focus,
.post-content a:active,
.wpb_text_column a:hover,
.wpb_text_column a:focus,
.wpb_text_column a:active,
.vc_column_text a:hover,
.vc_column_text a:focus,
.vc_column_text a:active,
.tt_text a:hover,
.tt_text a:focus,
.tt_text a:active,
.article-content a:hover,
.article-content a:focus,
.article-content a:active {
  color: #06294a !important;              /* Hover-Farbe */
  text-decoration: underline !important;  /* Linie bleibt sicher bestehen */
  text-underline-offset: 0.12em;
  text-decoration-thickness: 0.1em;
  transition: color .15s ease;
}

/* Ausnahmen: Buttons/Bild-Links im Fließtext weiterhin ohne Linie/Farbwechsel */
.entry-content a.button,
.post-content a.button,
.wpb_text_column a.button,
.vc_column_text a.button,
.entry-content .wpb_single_image a,
.post-content  .wpb_single_image a,
.entry-content figure a,
.post-content  figure a {
  color: inherit !important;
  text-decoration: none !important;
}




/* =========================================================
   THINK SWEEP – multiline-sicher & weißer Sweep (ohne blend)
   ========================================================= */

:root{
  --think-duration: 900ms;   /* minimal schneller */
  --think-strength: 0.42;    /* vorher 0.28 → deutlicher */
  --think-top: .08em;        /* etwas mehr Fläche */
  --think-bot: .04em;        /* etwas mehr Fläche */
}

/* Link als zusammenhängender Kasten (funktioniert bei Zeilenumbruch) */
.entry-content a,
.post-content a,
.wpb_text_column a,
.vc_column_text a,
.tt_text a,
.article-content a {
  position: relative;
  display: inline-block;     /* <— wichtig für mehrzeilige Links */
  isolation: isolate;
  line-height: inherit;
  padding-top: .02em;        /* kleine Luft für den Sweep */
  padding-bottom: .02em;
  z-index: 0;
}

/* Glanz-Overlay – weißer Sweep, immer sichtbar (ohne mix-blend-mode) */
.entry-content a::before,
.post-content a::before,
.wpb_text_column a::before,
.vc_column_text a::before,
.tt_text a::before,
.article-content a::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: var(--think-top);
  bottom: var(--think-bot);
  pointer-events: none;
  opacity: 0;                /* erscheint erst bei Hover */
  z-index: 1;

  /* flacher, breiter Sweep in Weiß */
background: linear-gradient(
  90deg,
  rgba(255,255,255,0)   0%,
  rgba(255,255,255,.15) 36%,
  rgba(255,255,255,1)   50%,  /* breiter + heller Kern */
  rgba(255,255,255,.15) 64%,
  rgba(255,255,255,0)  100%
);
  background-size: 200% 100%;
  background-position: -60% 0;
  border-radius: var(--think-soft);
}

/* Animation */
@keyframes think-sweep-flat {
  0%   { background-position: -60% 0; }
  100% { background-position: 160% 0; }
}

/* Hover/Fokus: Sweep sichtbar + Bewegung (hin & zurück) */
.entry-content a:hover::before,
.entry-content a:focus-visible::before,
.post-content a:hover::before,
.post-content a:focus-visible::before,
.wpb_text_column a:hover::before,
.wpb_text_column a:focus-visible::before,
.vc_column_text a:hover::before,
.vc_column_text a:focus-visible::before,
.tt_text a:hover::before,
.tt_text a:focus-visible::before,
.article-content a:hover::before,
.article-content a:focus-visible::before {
  opacity: var(--think-strength);
  animation: think-sweep-flat var(--think-duration) ease-in-out infinite alternate;
}

/* Ausnahmen: Buttons/Bild-Links/Menüs – kein Effekt */
.entry-content a.button::before,
.post-content a.button::before,
.wpb_text_column a.button::before,
.vc_column_text a.button::before,
.entry-content .wpb_single_image a::before,
.post-content  .wpb_single_image a::before,
.entry-content figure a::before,
.post-content  figure a::before,
.main-navigation a::before,
.hz-menu a::before,
.menu a::before { display: none !important; }

/* Bewegungspräferenz respektieren */
@media (prefers-reduced-motion: reduce) {
  .entry-content a::before,
  .post-content a::before,
  .wpb_text_column a::before,
  .vc_column_text a::before,
  .tt_text a::before,
  .article-content a::before {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* Optionaler Notfall-Fix für einzelne zickige Links:
   dem Link zusätzlich class="think-fix" geben */
.think-fix {
  display: inline-block !important;
  position: relative !important;
  isolation: isolate !important;
}





/* ===========================================
   HERO – Wabbern + Kontrast/Shadow-Atmung
   Klasse im Single Image: hero-banner
   =========================================== */

/* Robust für WPBakery-Wrapper */
.hero-banner,
.wpb_single_image.hero-banner,
.hero-banner .wpb_single_image,
.hero-banner .vc_single_image-wrapper,
img.hero-banner {
  position: relative;
  overflow: visible;                 /* kein Clipping */
}

/* Bild: sanftes Wabbern (Transform) + Filter-Atmung */
.hero-banner img,
.wpb_single_image.hero-banner img,
.hero-banner .wpb_single_image img,
.hero-banner .vc_single_image-wrapper img,
img.hero-banner {
  display: block;
  width: 100%;
  height: auto;
  will-change: transform, filter;
  transform-origin: 50% 55%;
  /* zwei getrennte, unsynchrone Animationen → natürlicher Look */
  animation:
    heroWobble 7.2s ease-in-out infinite alternate,
    heroFilter 6.1s ease-in-out infinite alternate;
}

/* „Wabbern“: minimaler Scale/Rotate + Y-Drift */
@keyframes heroWobble {
  0%   { transform: scale(1.000) rotate(-0.08deg) translateY(-0.3%); }
  50%  { transform: scale(1.012) rotate( 0.10deg) translateY( 0.2%); }
  100% { transform: scale(1.006) rotate(-0.05deg) translateY(-0.1%); }
}

/* Filter-Atmung: Helligkeit/Kontrast + Drop-Shadow
   → wirkt auch bei hellem/transparentem PNG */
@keyframes heroFilter {
  0%   { filter: brightness(1.00) contrast(1.00) drop-shadow(0 2px 0 rgba(0,0,0,0.00)); }
  40%  { filter: brightness(0.98) contrast(1.06) drop-shadow(0 2px 4px rgba(0,0,0,0.10)); }
  60%  { filter: brightness(0.99) contrast(1.04) drop-shadow(0 3px 6px rgba(0,0,0,0.12)); }
  100% { filter: brightness(1.00) contrast(1.00) drop-shadow(0 2px 0 rgba(0,0,0,0.00)); }
}

/* Intensivere Variante: einfach zusätzlich die Klasse .hero-strong vergeben */
.hero-strong img {
  animation:
    heroWobbleStrong 6.2s ease-in-out infinite alternate,
    heroFilterStrong 5.4s ease-in-out infinite alternate;
}
@keyframes heroWobbleStrong {
  0%   { transform: scale(1.000) rotate(-0.12deg) translateY(-0.5%); }
  50%  { transform: scale(1.018) rotate( 0.16deg) translateY( 0.4%); }
  100% { transform: scale(1.008) rotate(-0.08deg) translateY(-0.2%); }
}
@keyframes heroFilterStrong {
  0%   { filter: brightness(1.00) contrast(1.00) drop-shadow(0 2px 0 rgba(0,0,0,0.00)); }
  45%  { filter: brightness(0.98) contrast(1.08) drop-shadow(0 3px 8px rgba(0,0,0,0.16)); }
  100% { filter: brightness(1.00) contrast(1.00) drop-shadow(0 2px 0 rgba(0,0,0,0.00)); }
}

/* Bewegungspräferenz respektieren */
@media (prefers-reduced-motion: reduce) {
  .hero-banner img,
  .hero-strong img {
    animation: none !important;
    filter: none !important;
    transform: none !important;
  }
}


/* ===========================================
   HERO: No-Clip für WPBakery/Hazel Wrapper
   =========================================== */

/* 1) Rund ums Bild alles offen lassen */
.hero-banner,
.hero-banner .vc_single_image-wrapper,
.hero-banner .wpb_single_image,
.hero-banner .wpb_wrapper,
.hero-banner .vc_column-inner {
  overflow: visible !important;
  position: relative;            /* für z-index wirksam */
}

/* 2) Falls der Vorfahr (Column/Row) clippt → Klasse hero-noclip setzen */
.hero-noclip,
.hero-noclip > .vc_column-inner,
.hero-noclip .wpb_wrapper,
.hero-noclip .vc_single_image-wrapper {
  overflow: visible !important;
  position: relative;
}

/* 3) Beim Hover über alles drüber legen (falls Nachbarn überlappen) */
.hero-banner:hover,
.hero-noclip:hover {
  z-index: 10;
}

/* 4) Sicherheitsnetz: Bild soll sich über Nachbarn legen dürfen */
.hero-banner img {
  position: relative;
  z-index: 1;
  transform-origin: 50% 55%;
}

/* Global – greift, wenn UABB an der Stelle kein !important nutzt */
[id^="ult-ih-list-item-"] .ult-ih-description,
[id^="ult-ih-list-item-"] .ult-ih-description * {
  font-size: 20px !important;
  line-height: 26px !important;
  color: #d6d6d6 !important;
  -webkit-text-fill-color: #d6d6d6 !important;
  text-shadow: none !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}




/* ===== Globale Overrides für alle Team-Kacheln (Startseite + Teamseite) =====
   Trick: :not(#hs-1) und :not(#hs-2) erhöhen die Spezifität um +2 IDs,
   sodass diese Regeln UABB-ID-CSS sicher überstimmen – auch mit !important.
*/

/* Basis: Beschreibung selbst */
.ult-ih-description:not(#hs-1):not(#hs-2),
.ult-ih-content .ult-ih-description:not(#hs-1):not(#hs-2),
.ult-new-ih-content .ult-ih-description:not(#hs-1):not(#hs-2) {
  font-size: 20px !important;
  line-height: 26px !important;
  color: #d6d6d6 !important;
  -webkit-text-fill-color: #d6d6d6 !important;
}

/* Kinder (p, span, br etc.) sollen erben und NICHT zurückfärben */
.ult-ih-description:not(#hs-1):not(#hs-2) *,
.ult-ih-content .ult-ih-description:not(#hs-1):not(#hs-2) *,
.ult-new-ih-content .ult-ih-description:not(#hs-1):not(#hs-2) * {
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  text-shadow: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* Manche UABB-Layouts zielen explizit auf ".ult-ih-description p".
   Wir fangen das separat ab – auch hier mit Spezifizitäts-Boost. */
.ult-ih-description:not(#hs-1):not(#hs-2) p,
.ult-ih-content .ult-ih-description:not(#hs-1):not(#hs-2) p,
.ult-new-ih-content .ult-ih-description:not(#hs-1):not(#hs-2) p {
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}

/* Falls UABB Inline-Styles schwarz setzen (wie <span style="color:#000">…):
   Nimm denen die Macht – aber nur innerhalb der Description. */
.ult-ih-description:not(#hs-1):not(#hs-2) [style*="color"],
.ult-ih-content .ult-ih-description:not(#hs-1):not(#hs-2) [style*="color"],
.ult-new-ih-content .ult-ih-description:not(#hs-1):not(#hs-2) [style*="color"] {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}