/*
 Theme Name: HNGE Bootstrap Theme
 Author: Strickling
 Description: HNGe
 Version: 09.11.25
 Text Domain: hnge
*/

/* ========================
   1) Fonts
======================== */
@font-face {
  font-family: 'Nunito';
  src: url('assets/fonts/Nunito-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('assets/fonts/Nunito-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('assets/fonts/Poppins-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('assets/fonts/Poppins-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('assets/fonts/Poppins-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Rubik';
  src: url('assets/fonts/Rubik-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ========================
   2) CSS Custom Properties
======================== */
:root{
  --tuerkis:       #6EC6CA;
  --tuerkisBG:     #f0fbfb; /* sehr helles Türkisgrau für Seitenränder */
  --hnge-headline: #4D5779;
  --hnge-line:     #6ec6c5;  /* türkis */
  --hnge-line2:    #a8e0de;  /* helleres türkis */
	
  --dunkelblau: #003366;
  --rot: #e94e77;
  --gelb: #f6e04f;
  --gruen: #9ed36a;
  --hellblau: #6ab7d6;
  --hellgrau: #e5e7eb;
}

/* ========================
   3) Base / Resets / Utilities
======================== */
body { overflow-x: hidden; } /* Absicherung: nie breiter als Viewport */
body {
  font-family: "Nunito", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background-color: var(--hellgrau);
}
img, svg, video { max-width: 100%; height: auto; } /* generelle Medienabsicherung */

/* Logo & Brand */
.custom-logo { max-height: 60px; height: auto; width: auto; }
.navbar-brand img { max-height: 48px; height: auto; }

/* ========================
   4) Hero & Titel (statischer Video-Banner)
======================== */
.hnge-hero {
  position: relative;
  height: clamp(36vh, 40vh, 44vh);  /* etwas höhere Bannerhöhe */
  min-height: 260px;
  overflow: hidden;                  /* Video bleibt im Hero */
  display: grid;
  place-items: center;
}

/* altes ::before-Overlay deaktivieren – wir nutzen eigenes Overlay-Element */
.hnge-hero::before { content: none !important; }

/* Video füllt den Hero exakt aus (wie background-size: cover) */
.hnge-video-wrap {
  position: absolute;
  inset: 0;          /* volle Fläche des Heros */
  z-index: 0;
  transform: none !important;  /* falls vorher Parallax-Drift aktiv war */
}
.hnge-video {
  width: 100%;
  height: 100%;
  max-width: none !important;   /* kontert globale video{max-width:100%} */
  object-fit: cover;            /* wie background-size: cover */
  object-position: center;      /* wie background-position: center */
  display: block;
  transform: translateZ(0);     /* Safari-Grafik-Bug vermeiden */
}

/* Abdunkelung für Lesbarkeit */
.hnge-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.25));
  z-index: 1;
}

/* Inhaltsebene über Video/Overlay */
.hnge-hero__inner { position: relative; z-index: 2; }

/* Titeltypografie (wie gehabt) */
.hnge-title {
  font-family: "Poppins", "Rubik", sans-serif;
  font-weight: 900;
  font-size: clamp(2.5rem, 5vw, 4rem);
  color: #ffffff;
  text-shadow: 0 3px 6px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.3);
  line-height: 1.1;
  letter-spacing: .5px;
  white-space: nowrap;
  text-align: center;
}
.hnge-title-part1, .hnge-title-part2 { display: inline; }
@media (max-width:1399.98px) { .hnge-title-part2 { display: block; } }
@media (min-width:1400px)   { .hnge-title-part2 { display: inline; } }

@media (max-width:575.98px) {
  .hnge-title { font-size: clamp(1.6rem, 8vw, 2.6rem); }
}
.hnge-title .hnge-subtitle {
  display: block;
  font-size: 0.4em;
  font-weight: 400;
  margin: 1rem 0;
  line-height: 1.4;
  opacity: 0.9;
}

/* Bewegungsarmes System → Video optional ausblenden (wenn gewünscht) */
@media (prefers-reduced-motion: reduce) {
  .hnge-video-wrap { display: none; }
}

/* NEU */
/* Feinsteuerung per Variablen (optional) */
:root{
  --hnge-video-darkness: 0.85; /* 1.0 = original, kleiner = dunkler (0.6–0.75 gut) */
  --hnge-video-blur: 2px;      /* 0–3px: dezent halten, sonst Performance */
  --hnge-video-scale: 1.03;    /* leicht zoomen, um Blur-Ränder zu verstecken */
}

/* Video dunkler + leicht verschwommen, nur das Video (nicht der Text) */
.hnge-video{
  filter: brightness(var(--hnge-video-darkness)) saturate(1.05) blur(var(--hnge-video-blur));
  transform: translateZ(0) scale(var(--hnge-video-scale));
  will-change: filter, transform;
}

/* Overlay etwas kräftiger (optional, falls noch mehr Kontrast gewünscht) */

.hnge-hero__overlay{
  background: linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.35)); /* vorher .25 */
}



/* ========================
   5) Ribbon (kann für andere Seiten weiter genutzt werden)
======================== */
.hnge-ribbon {
  background: rgba(45, 62, 68, 0.719);
  border-radius: 0.75rem;
  box-shadow: 0 3px 8px rgba(0,0,0,0.08);
  display: inline-block;     /* passt sich dem Inhalt an */
  max-width: none;
  padding: 0.75rem 1rem;
}
.hnge-ribbon .row.g-3 {
  --bs-gutter-x: 1rem;
  --bs-gutter-y: 1rem;
}
.hnge-ribbon .item {
  display: grid;
  justify-items: center;
  gap: .5rem;
  min-width: unset !important;
  margin: 0 0.75rem;
}
.hnge-ribbon .hnge-icon svg {
  width: 40px;
  height: auto;
  opacity: 0.7;
  transition: opacity .2s ease;
}
.hnge-ribbon .hnge-icon svg:hover { opacity: 0.9; }

/* ========================
   6) Navbar & Dropdowns
======================== */
.navbar .nav-link {
  font-family: "Poppins", sans-serif;
  font-size: 1.0rem;
  font-weight: 300;
  letter-spacing: 1.0px;
  margin: 0 0.5rem;
  padding: 0.75rem 1.2rem; /* Desktop bleibt unverändert (ohne Rahmen) */
}

/* Dezente Iconlinks */
.hnge-iconlink {
  display: inline-block;
  text-decoration: none;
  color: #fff;
  opacity: 0.9;
}
.hnge-iconlink:hover { color: #f1f1f1; text-decoration: none; opacity: 1; }
.hnge-iconlabel {
  font-size: 0.75rem;
  font-weight: 400;
  opacity: 0.9;
  margin-top: 0.25rem;
}
.hnge-icon svg {
  width: 32px;
  height: auto;
  opacity: 0.7;
  transition: opacity .2s ease;
}

/* ======================================
   MOBILE ONLY (≤ 991px) → nur Striche oben/unten
====================================== */
@media (max-width: 991.98px) {

  /* Optional: Innenabstand des Dropdown-Containers minimal */
  .navbar .dropdown-menu {
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0;
    padding: .25rem 0; /* weniger Padding, damit Linien bündig wirken */
  }
	

  /* Alle Mobile-Menü-Links: nur Top/Bottom-Border, keine Rundung */
  .navbar-nav > .nav-item > .nav-link,
  .navbar .dropdown-menu .dropdown-item,
  .navbar .dropdown-menu .nav-link,
  .navbar-nav .menu-item > a,
  .navbar .dropdown-menu .menu-item > a {
    display: block;
    width: 100%;
    margin: 0;
    padding: .65rem 1rem;

    /* <<< das sind die "Striche" >>> */
    border: none;                         /* alles aus */
    border-top: 1px solid #dcdfe3;        /* dezentes Grau, kein Alpha */
    border-bottom: 1px solid #dcdfe3;     /* dezentes Grau, kein Alpha */
    border-radius: 0;                     /* keine Rundungen */
    background: transparent;
    text-decoration: none;
  }

  /* Doppellinien vermeiden: nur Bottom-Linie bei Items, Top beim ersten */
  .navbar-nav > .nav-item > .nav-link,
  .navbar .dropdown-menu .dropdown-item,
  .navbar .dropdown-menu .nav-link,
  .navbar-nav .menu-item > a,
  .navbar .dropdown-menu .menu-item > a {
    border-top: none;            /* Standard: nur unten */
  }
  /* Erste Zeile bekommt eine obere Linie (Top-Level + Dropdown) */
  .navbar-nav > .nav-item:first-child > .nav-link { border-top: 1px solid #dcdfe3; }
  .navbar .dropdown-menu .menu-item:first-child > a,
  .navbar .dropdown-menu .dropdown-item:first-child,
  .navbar .dropdown-menu .nav-link:first-child {
    border-top: 1px solid #dcdfe3;
  }

  /* -----------------------------------------
     SPEZIFISCH FÜR UNTERPUNKTE: keine Doppelstriche
     → nur der NACHFOLGER im Dropdown bekommt eine top-border
     → bottom-border bei Unterpunkten komplett aus
  ------------------------------------------ */
  .navbar .dropdown-menu .dropdown-item,
  .navbar .dropdown-menu .nav-link,
  .navbar .dropdown-menu .menu-item > a {
    border-bottom: 0 !important;                 /* verhindert doppelte Kante */
  }
  .navbar .dropdown-menu .menu-item + .menu-item > a,
  .navbar .dropdown-menu .dropdown-item + .dropdown-item,
  .navbar .dropdown-menu .nav-link + .nav-link {
    border-top: 1px solid #dcdfe3 !important;    /* genau 1 Linie zwischen Items */
  }
  /* Falls der erste Unterpunkt oben eine Linie bekam → wieder aus */
  .navbar .dropdown-menu .menu-item:first-child > a,
  .navbar .dropdown-menu .dropdown-item:first-child,
  .navbar .dropdown-menu .nav-link:first-child {
    border-top: 0 !important;
  }

  /* Hover/Focus (sehr dezent, ohne Farbenwechsel der Linien) */
  .navbar .nav-link:hover,
  .navbar .nav-link:focus,
  .navbar .dropdown-item:hover,
  .navbar .dropdown-item:focus,
  .navbar .dropdown-menu .nav-link:hover,
  .navbar .dropdown-menu .nav-link:focus,
  .navbar-nav .menu-item > a:hover,
  .navbar-nav .menu-item > a:focus {
    background: rgba(0,0,0,.03);
  }

  /* Aktiver/aktueller Menüpunkt → keine farbige Markierung der Linien */
  .navbar .nav-link.active,
  .navbar .dropdown-item.active,
  .navbar .nav-link[aria-current="page"],
  .navbar .dropdown-menu .nav-link.active,
  .navbar-nav .menu-item > a[aria-current="page"] {
    box-shadow: none !important;
    border-top-color: #dcdfe3 !important;
    border-bottom-color: #dcdfe3 !important;
    background: transparent;
  }


  /* ======================================
     VARIANTE A) UNTERPUNKTE DEZENT EINRÜCKEN + VERTIKALE LINIE
  ====================================== */

  /* Unterpunkte optisch eingerückt + sanft hinterlegt */
  .navbar .dropdown-menu .menu-item > a,
  .navbar .dropdown-menu .dropdown-item,
  .navbar .dropdown-menu .nav-link {
    position: relative;
    padding-left: 1.75rem !important; /* Einrückung */
    background: rgba(0,0,0,0.015);    /* super leichtes Grau, sehr elegant */
    font-weight: 300;
  }

  /* Vertikale Linie links als optischer Hierarchie-Indikator */
  .navbar .dropdown-menu .menu-item > a::before,
  .navbar .dropdown-menu .dropdown-item::before,
  .navbar .dropdown-menu .nav-link::before {
    content: "";
    position: absolute;
    left: 1rem;
    top: 0.6rem;
    bottom: 0.6rem;
    width: 1px;
    background: #dcdfe3;
    opacity: 0.9;
  }

  /* Hover bleibt dezent */
  .navbar .dropdown-menu .menu-item > a:hover,
  .navbar .dropdown-menu .dropdown-item:hover,
  .navbar .dropdown-menu .nav-link:hover {
    background: rgba(0,0,0,0.035);
  }
}


@media (max-width: 991.98px) {
  .navbar .dropdown-menu[data-bs-popper],
  .navbar .dropdown-menu.show[data-bs-popper="static"] {
    margin: 0 !important;
  }
  .navbar .dropdown-menu,
  .navbar .dropdown-menu.show {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }
}






/* ========================
   7) Content (Breite, Typografie, Headings, Links, Medien)
======================== */
.hnge-content { 
  max-width: 1100px; 
  background-color: #ffffff;
  box-shadow: 0 0 12px rgba(0,0,0,0.05);
  border-radius: 0.5rem;
  padding: 2.5rem;
  margin: 0 auto; /* kein Top-Margin → kein türkisfarbener Spalt */
}

/* Headings mit Doppellinie (nur im Content) */
.hnge-content .wp-block-heading,
.hnge-content h1,
.hnge-content h2,
.hnge-content h3,
.hnge-content h4{
  color: var(--dunkelblau);
  position: relative;
  display: inline-block;
  padding-bottom: .55rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
.hnge-content .wp-block-heading::after,
.hnge-content h1::after,
.hnge-content h2::after,
.hnge-content h3::after,
.hnge-content h4::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--hnge-line2);
  border-radius: 2px;
}
.hnge-content .wp-block-heading::before,
.hnge-content h1::before,
.hnge-content h2::before,
.hnge-content h3::before,
.hnge-content h4::before{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 3px;
  background: var(--hnge-line2);
  border-radius: 2px;
}

/* Fließtext */
.hnge-content,
.hnge-content p,
.hnge-content li{
  color: #444;
  line-height: 1.6;
  font-size: 1.05rem;
}

/* Einheitliche Links im Content */
.hnge-content a {
  color: #4D5779;
  text-decoration: none !important;
  font-weight: 600;
}
.hnge-content a:hover { color: #2f3650 !important; }
.hnge-content a::before,
.hnge-content a::after {
  content: none !important;
  display: none !important;
}

/* Medien im Content */
.hnge-content img {
  display: block;
  max-width: 95%;
  height: auto;
  margin: 1.25rem auto;
  border-radius: .25rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* Container: nicht vertikal mittig */
.wp-block-media-text {
  align-items: start; /* Grid-Eigenschaft: oben ausrichten */
  column-gap: 2rem;
}

/* Inhalt: links ausrichten + oben beginnen */
.wp-block-media-text > .wp-block-media-text__content {
  padding: 0;
  text-align: left;
  align-self: start;  /* in der Zelle oben andocken */
  justify-self: start;
}


/* Spalten-Ausrichtung */
.wp-block-columns { align-items: flex-start; }
.wp-block-columns .wp-block-column {
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* oben beginnen */
  text-align: left;            /* links ausrichten */
}



/* WordPress Heading-Alignment reaktivieren */
.wp-block-heading.has-text-align-center,
.wp-block-heading.has-text-align-left,
.wp-block-heading.has-text-align-right {
  display: block;
  width: 100%;
}

/* Beiträge trennen */
.wp-block-latest-posts__list li {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #ddd;
}
.wp-block-latest-posts__list li:last-child { border-bottom: none; }


/* --- 7R) Content & Calendar-Frame: Responsive-Overrides (runde Breakpoints) -- */
/* ≤ 768px: Hauptanpassung für Phones + kleine Tablets */
@media (max-width: 768px) {
  .hnge-content {
    padding: 1.5rem;     /* sanfter als harter Sprung */
    border-radius: .5rem;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }

  /* Calendar-Frame analog zum Content „breiter“ machen */
  .calendar-frame {
    padding: 1.25rem;     /* falls das Element Padding nutzt */
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }

  /* Calendar-Iframe wirklich vollbreit */
  .calendar-frame iframe {
    display: block;
    width: 100% !important;
    height: auto;
    border: 0;
  }

  /* Bilder im Content vollbreit */
  .hnge-content img {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ≤ 576px: Feintuning für sehr schmale Phones */
@media (max-width: 576px) {
  .hnge-content {
    padding: 1rem;
    border-radius: .375rem;
  }
  .calendar-frame {
    padding: 1rem;
  }
}




/* ========================
   8) Grid-Logo-Blöcke
======================== */
.wp-block-group.is-layout-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  justify-items: center;
  max-width: 100%;
  overflow-x: hidden;
}
@media (max-width: 900px) {
  .wp-block-group.is-layout-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .wp-block-group.is-layout-grid { grid-template-columns: repeat(2, 1fr); }
}
.wp-block-group.is-layout-grid img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* ========================
   9) Footer
======================== */
.bg-hnge { background: var(--dunkelblau); }
.site-footer { color:#fff; }
.site-footer a {
  color: #fff !important;
  text-decoration: none;
  font-weight: 500;
}
.site-footer a:hover {
  color: #f1f1f1 !important;
  text-decoration: underline;
}
.border-white-25 { border-color:rgba(255,255,255,.25)!important; }

/* ========================
   10) Accessibility / Focus
======================== */
/* iOS-Tap-Highlight entfernen */
a, button, .btn, .nav-link, .dropdown-item, select, .form-select {
  -webkit-tap-highlight-color: transparent;
}
/* Auf Touch-Geräten: Focus-Ringe weg */
@media (hover: none) and (pointer: coarse) {
  .btn:focus,
  .nav-link:focus,
  .dropdown-item:focus,
  .navbar-toggler:focus,
  select:focus,
  .form-select:focus {
    outline: none !important;
    box-shadow: none !important;
  }
}
/* Tastatur-Fokus sichtbar & konsistent */
/* Fokus-Ring komplett aus für Navbar */
.navbar .nav-link:focus-visible,
.navbar .dropdown-item:focus-visible,
.navbar .navbar-toggler:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Global: kein Fokus-Styling bei Maus/Touch */
:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}


/* Button */
/* HNGE Button-Design – überschreibt auch die Link-Zustände */
a.btn,
a.btn:link,
a.btn:visited,
a.btn:hover,
a.btn:focus,
a.btn:active {
  color: #fff !important;
  text-decoration: none !important; /* falls Unterstreichung auftaucht */
}

/* Grundzustand */
.btn {
  background-color: #6EC6CA; /* Türkis */
  border: none;
  border-radius: 0.5rem;
  padding: 0.4rem 1rem;
  font-weight: 500;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

/* Hover */
.btn:hover,
.btn:focus {
  background-color: #003366; /* Dunkelblau */
  transform: translateY(-1px);
}

/* Klick/Active */
.btn:active,
.btn:focus:active {
  background-color: #e94e77; /* Rot */
  transform: translateY(0);
}

/* Gutenberg-Buttons im HNGE-Design */
.wp-block-button__link,
a.wp-block-button__link,
.wp-element-button {
  background-color: #6EC6CA !important; /* Türkis */
  color: #fff !important;               /* immer weiße Schrift */
  border: none !important;
  border-radius: 0.5rem !important;
  padding: 0.5rem 1rem !important;
  font-weight: 500;
  text-decoration: none !important;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus,
.wp-element-button:hover,
.wp-element-button:focus {
  background-color: #003366 !important; /* Dunkelblau */
  color: #fff !important;
  transform: translateY(-1px);
}

.wp-block-button__link:active,
.wp-element-button:active,
.wp-block-button__link:focus:active {
  background-color: #e94e77 !important; /* Rot */
  color: #fff !important;
  transform: translateY(0);
}

/* Falls jemand „Outline“-Stil gewählt hat → trotzdem gefüllt anzeigen */
.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: #6EC6CA !important;
  color: #fff !important;
  border: none !important;
}

/* Optional: Abstand zwischen mehreren Block-Buttons im gleichen Block */
.wp-block-buttons .wp-block-button {
  margin-right: .5rem;
  margin-bottom: .5rem;
}




/* Schriftfarbe bei Hover erzwingen */
.wp-block-button .wp-block-button__link.wp-element-button:hover,
.wp-block-button .wp-block-button__link.wp-element-button:focus {
  color: #fff !important;   /* immer weiß */
}

/* Gutenberg File-Block Buttons im HNGE-Design */
.wp-block-file .wp-block-file__button {
  background-color: #6EC6CA !important; /* Türkis */
  color: #fff !important;               /* immer weiße Schrift */
  border: none !important;
  border-radius: 0.5rem !important;
  padding: 0.5rem 1rem !important;
  font-weight: 500;
  text-decoration: none !important;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.wp-block-file .wp-block-file__button:hover,
.wp-block-file .wp-block-file__button:focus {
  background-color: #003366 !important; /* Dunkelblau */
  color: #fff !important;
  transform: translateY(-1px);
}

.wp-block-file .wp-block-file__button:active,
.wp-block-file .wp-block-file__button:focus:active {
  background-color: #e94e77 !important; /* Rot */
  color: #fff !important;
  transform: translateY(0);
}









/* ========================
   Smooth Underline Animation (Türkis)
   ersetzt die bisherigen ::before/::after-Linien bei Headings im Content
======================== */

/* Tuning-Variablen */
:root{
  --hnge-underline-h: 3px;        /* Linienstärke */
  --hnge-underline-gap: 6px;      /* Abstand zwischen den zwei Linien */
  --hnge-underline-dur: 640ms;    /* Animationsdauer */
  --hnge-underline-delay2: 120ms; /* Verzögerung Linie 2 */
}

/* Basis: Headings im Content – etwas mehr Bottom-Padding für die zwei Linien */
.hnge-content .wp-block-heading,
.hnge-content h1,
.hnge-content h2,
.hnge-content h3,
.hnge-content h4{
  position: relative;
  display: inline-block;
  padding-bottom: calc(var(--hnge-underline-h) * 2 + var(--hnge-underline-gap));
  color: var(--dunkelblau);
  font-weight: 700;
  margin-bottom: 1rem;
}

/* beide Linien: starten als 0% Breite (per scaleX), wachsen links->rechts */
.hnge-content .wp-block-heading::after,
.hnge-content h1::after,
.hnge-content h2::after,
.hnge-content h3::after,
.hnge-content h4::after,
.hnge-content .wp-block-heading::before,
.hnge-content h1::before,
.hnge-content h2::before,
.hnge-content h3::before,
.hnge-content h4::before{
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: var(--hnge-underline-h);
  background: var(--hnge-line2);      /* helleres Türkis */
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

/* obere der zwei Linien (direkt unterm Text) */
.hnge-content .wp-block-heading::after,
.hnge-content h1::after,
.hnge-content h2::after,
.hnge-content h3::after,
.hnge-content h4::after{
  bottom: 0;
  animation: hnge-underline-grow var(--hnge-underline-dur) ease-out forwards;
}

/* untere Linie – leicht nach unten versetzt, startet kurz später */
.hnge-content .wp-block-heading::before,
.hnge-content h1::before,
.hnge-content h2::before,
.hnge-content h3::before,
.hnge-content h4::before{
  bottom: calc(-1 * var(--hnge-underline-gap));
  background: var(--hnge-line2);
  animation: hnge-underline-grow var(--hnge-underline-dur) ease-out forwards var(--hnge-underline-delay2);
}

/* Keyframes: „wachsen“ von 0% auf 100% (ohne Reflow) */
@keyframes hnge-underline-grow{
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Bewegungsarmes System: keine Animation, direkt vollständig anzeigen */
@media (prefers-reduced-motion: reduce){
  .hnge-content .wp-block-heading::before,
  .hnge-content h1::before,
  .hnge-content h2::before,
  .hnge-content h3::before,
  .hnge-content h4::before,
  .hnge-content .wp-block-heading::after,
  .hnge-content h1::after,
  .hnge-content h2::after,
  .hnge-content h3::after,
  .hnge-content h4::after{
    animation: none !important;
    transform: none !important; /* sofort volle Breite */
  }
}

/* Optional: sanftes Einfaden des Textes selbst (dezentes Extra) */
.hnge-content .wp-block-heading,
.hnge-content h1,
.hnge-content h2,
.hnge-content h3,
.hnge-content h4{
  animation: hnge-heading-fade 300ms ease-out 40ms both;
}
@keyframes hnge-heading-fade{
  from{ opacity: .0; filter: blur(.5px); }
  to  { opacity: 1;  filter: blur(0); }
}





/* Falls Bootstrap sticky-top nicht greift: erzwinge Sticky + Layer */
.sticky-top { position: sticky !important; top: 0; z-index: 1040; }



:root { --tap-flash-color:#003366; }

#tapFlashOverlay{
  position: fixed;
  top:0; left:0;
  width:0; height:0;
  pointer-events: none;
  background: var(--tap-flash-color);
  opacity: 0;
  z-index: 9999;

  /* HIER: sanft abrunden */
  border-radius: .35rem;

  will-change: opacity, transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

#tapFlashOverlay.show{
  animation: tapFlashOpacity 360ms ease-out forwards;
}


@keyframes tapFlashOpacity{
  from { opacity:.85; }
  to   { opacity:0;    }
}




/* Mobile Menü sanft ausblenden, bevor die Seite wechselt */
@media (max-width: 991.98px) {
  .navbar .navbar-collapse.leaving {
    animation: hngeMobileNavFade 200ms ease-out forwards;
    pointer-events: none; /* verhindert Doppeltaps während des Fades */
  }
	@keyframes hngeMobileNavFade {
	  0%   { opacity: 1; }
	  100% { opacity: 0; }
	}
}


.navbar .dropdown-menu {
  min-width: 300px;
  max-width: 90vw;
  white-space: nowrap;
}

/* Entfernt den türkisen Fokus-/Aktiv-Ring im Mobile-Menü */
@media (max-width: 991.98px) {

  .navbar .nav-link.active,
  .navbar .dropdown-item.active,
  .navbar .nav-link[aria-current="page"],
  .navbar .dropdown-menu .nav-link.active,
  .navbar-nav .menu-item > a[aria-current="page"],
  .navbar-nav .menu-item.current-menu-item > a,
  .navbar-nav .menu-item.current_page_item > a,
  .navbar-nav .menu-item.current_page_parent > a {
    border-color: rgba(0,0,0,.10) !important;  /* wieder neutral */
    box-shadow: none !important;
    background: transparent !important;
  }
}

.navbar .navbar-collapse .navbar-nav { margin-bottom: 0 !important; }


/*Flash bei Hamburger*/
@media (max-width: 991.98px) {
  /* Dropdowns im Mobile als echte Liste, nicht Popper-Overlay */
  .navbar .dropdown-menu,
  .navbar .sub-menu {
    display: block !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin: 0 !important;

    /* Slide-Grundlage */
    overflow: hidden;
    height: 0;                      /* zu = eingeklappt */
    transition: height 240ms ease;  /* sanft */
  }

  /* Optional: Caret dreht bei offenem Menü */
  .navbar .dropdown-toggle::after { transition: transform 200ms ease; }
  .navbar .dropdown-toggle[aria-expanded="true"]::after { transform: rotate(90deg); }
}

@media (prefers-reduced-motion: reduce) {
  .navbar .dropdown-menu,
  .navbar .sub-menu { transition: none !important; }
}