/* web custom styles */
/* @import url("../fonts/sourcesans3/source-sans-3.css"); */
/* ========================================
   VARIABLES
   ======================================== */
:root {
	--bedra_blue:#132a3e;
	--bedra_red:#be0032;
  --bedra_font_white:#ffffff;
  --bedra_font_dark:#262626;
}

/* Basis-Layout (falls noch nicht drin) */
html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;         /* scrollt nur #main */
}
body { 
  /* background-image: url('../zms_theme_solutions/common/img/wgu_bg.jpg'); */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
	color: white !important;
  font-family: 'Interstate Light', sans-serif;
  display: flex; 
  flex-direction: column; 
}

#header { position: sticky; top: 0;    z-index: 100; flex: 0 0 auto; }
#footer { position: sticky; bottom: 0; z-index: 100; flex: 0 0 auto; }
#main {
  position: relative;       /* Bezugsrahmen für absolute Kindelemente */
  flex: 1 1 auto;
  overflow: auto;           /* nur hier scrollen */
}

#header {
  min-height: 100px;
  padding: 15px;
}

h1, h2, h3, h4 {
  font-family: 'Interstate Light', sans-serif;
  font-weight: normal;
	text-transform: uppercase;
  color: white!important;
}

#header h1 {
  display: inline-block;
  position: relative;
  font-size: 1.1rem;
  margin:0!important;
}

#header h1::after,
.cloud-menu > h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -0.2em;
  width: 50%;
  height: 2px;
  background-color: #BE0032;
}

.lvl0 h1, .lvl1 h1 {
  display:none!important;
}

a {
  text-decoration:none;
  color:gray;
  font-family: 'Interstate Light', sans-serif;
  display:block;
}

.description {
	color: darkgray !important;
  background-color: white;
  font-size:0.9rem;
  padding:0.5rem;
  margin-bottom:1rem;
}
.description b {
  color: #BE0032;
  font-weight:900;
}

.content {
  width:100%;
  padding: 0 1rem;
}



.btn-main {
  display:inline-block;
  border: 1px solid #BE0032;
  border-radius:0;
  color:#e2e6ea;
  
}
.lvl1 .btn-main { 
  min-width:420px;
}
.btn-main span.title {
  font-size:1.5rem;
  display:block;
}
.btn-main span.subtitle {
  font-size:small;
  display:block;
}

#main img { max-width:100% }

.img-responsive { width:100%; }
.fancybox-active {
  height:inherit!important;
}
.fancybox-content .graphic { 
  width:100%!important; 
  }
.fancybox-content {
  background-color: #123148;
  min-width: 30%;
  min-height: 45%;
  max-width: 75%;
  max-height: 90%;
}
.popover {
  min-width:480px;
}
.popover-header {
  background-color: #123148;
}

.nav-main {
  width:100%;
}
a.btn-main img {
  max-width:240px!important;
}

/* Zentrum (h2) exakt in die Mitte von #main */
.circle-menu > h2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  max-width: min-content;
}
.nav-circle {
  max-width: 220px;
  position: absolute;
}

.nav-circle a {
  font-size: 1.5rem;
  line-height: 2rem;
  color:#e2e6ea;
  display:inline-block;
  border: 1px solid #BE0032;
  border-radius:0;
}
a.btn-circle img {
  max-width:120px!important;
}

.fancyglossary {
  width:100%;
  text-align:center;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 1.3rem;
  line-height: 1.5rem;
  color:#e2e6ea;
  display:inline-block;
  border: 1px solid #BE0032;
  border-radius:0;
}

/* Wolken-Bühne: Flex neutralisieren, Positionierungsbasis schaffen */
.cloud-menu {
  position: fixed;
  left: 0; right: 0;
  top: 8px; bottom: 48px;     /* oben 8px, unten 48px frei lassen */
  display: block !important;  /* überschreibt Bootstrap .d-flex */
  width: auto;
  height: auto;
  isolation: isolate;         /* eigener Stacking-Context */
  pointer-events: none;       /* klicks nicht blockieren */
}

/* Zentrum bleibt absolut zentriert, aber ohne min-content-Quirks */
.cloud-menu > h2 {
  text-transform: none!important;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  max-width: 100%;             /* statt min-content */
  z-index: 10;
  text-align: center;
  pointer-events: auto;
}

/* Kacheln: immer absolut, Flex & Gaps aus dem Spiel nehmen */
.cloud-menu .nav-cloud {  
  max-width: 220px; /* needed? */
  position: absolute !important;
  left: 0; top: 0;             /* Startwert – JS setzt Zielkoordinaten */
  display: inline-block;
  margin: 0;                   /* Gap von .d-flex trifft nicht mehr, aber sicherheitshalber */
  z-index: 1;
  /* optional hübsch:
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  */
  pointer-events: auto;
}

.btn-cloud {
  font-size: 1.1rem;
  line-height: 1.1rem;
  color:#e2e6ea;
  display:inline-block;
}
.btn-cloud.c0 { color:#e2e6ea!important; }
.btn-cloud.c1 { color:#66F!important; }
.btn-cloud.c2 { color:#88F!important; }
.btn-cloud.s0 { font-size: 1.1rem; }
.btn-cloud.s1 { font-size: 0.9rem; }
.btn-cloud.s2 { font-size: 1.0rem; }
.btn-cloud.s3 { font-size: 1.2rem; }

.btn-main:hover, .btn-main:active,
.nav-circle a:hover, .nav-circle a:active,
.btn-cloud:hover, .btn-cloud:active,
.fancyglossary:hover, .fancyglossary:active {
  color:white!important;
  transform: scale(1.05);
	transition: all 0.3s ease-in-out;
  border-color:#BE0032;
}


.bi[data-flaglang] {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;    /* füllt das ganze <i> */
  border-radius: 4px;        /* abgerundete Ecken, z. B. 4px oder 50% für Kreis */
  
  display: inline-block;     /* wichtig, damit width/height wirken */
  width: 1em;                /* gleiche Größe wie Font, bei Bedarf anpassen */
  height: 1em;

  color: transparent;        /* macht das Icon-SVG unsichtbar */
  font-size: inherit;        /* Größe am Text orientieren */
  line-height: 1;            /* vermeidet extra Abstand */
}
.bi[data-flaglang=ger] {
  background-image: url('../img/square-flag-ger@2x.png');
}
.bi[data-flaglang=eng] {
  background-image: url('../img/square-flag-eng@2x.png');
}


.bottom-icon-menu {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1030;
  display: flex;
  gap: 1rem;
}

.bottom-icon-menu a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: black;
  opacity:0.5;
  border: 1px solid #ddd;
  text-decoration: none;
  color: white;
  font-size: 1.5rem;
}

.bottom-icon-menu a:hover {
	color: #666;
  background-color: #e2e6ea;
  opacity:1;
	transform: scale(1.1);
	transition: all 0.3s ease-in-out;
}

/* ========================================
   Hamburger Button (dl-trigger)
   ======================================== */

button.dl-trigger {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 1501;
  display: block;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background-color: transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

button.dl-trigger:hover {
  background-color: var(--bedra_blue);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

button.dl-trigger:focus {
  outline: none;
}

button.dl-trigger .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  margin: 5px auto;
  background-color: #fff;
  transition: all 0.3s ease;
  border-radius: 1px;
}

/* Animation when menu is open */
button.dl-trigger.dl-active .icon-bar:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}

button.dl-trigger.dl-active .icon-bar:nth-child(2) {
  opacity: 0;
}

button.dl-trigger.dl-active .icon-bar:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* ========================================
   Menu Container (dl-menu)
   ======================================== */

ul.dl-menu {
  font-family: 'Source Sans 3', sans-serif;
  position: fixed;
  top: 0;
  left: -300px;
  width: 300px;
  height: 100vh;
  margin: 0;
  padding: 80px 0 0 0;
  list-style: none;
  background-color: var(--bedra_blue);
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  z-index: 1500;
  transition: transform 0.3s ease;
}

ul.dl-menu.dl-menuopen {
  transform: translateX(300px);
}

ul.dl-menu > li {
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Blende alle Geschwister-LIs aus wenn eins ein Submenu öffnet */
ul.dl-menu.has-subview > li:not(.dl-subviewopen) {
  display: none;
}

ul.dl-menu > li.dl-subviewopen > a {
  display: none;
}

ul.dl-menu li a {
  display: block;
  padding: 15px 20px;
  color: var(--bedra_font_white);
  text-decoration: none;
  font-size: 16px;
  transition: background-color 0.2s ease;
}

ul.dl-menu li a:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

ul.dl-menu li:has(ul) > a:after {
  content: '';
  position: absolute;
  right: 20px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(255, 255, 255, 0.7);
  border-bottom: 2px solid rgba(255, 255, 255, 0.7);
  transform: translateY(-50%) rotate(-45deg);
}

/* ========================================
   Submenu Styles (dl-submenu)
   ======================================== */

ul.dl-submenu {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: var(--bedra_blue);
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transform: translateX(100%);
  transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s 0.3s;
}

ul.dl-submenu.dl-subview {
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
  transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s 0s;
}

ul.dl-submenu li {
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Blende alle Geschwister-LIs aus wenn eins ein Submenu öffnet */
ul.dl-submenu.has-subview > li:not(.dl-subviewopen) {
  display: none;
}

ul.dl-submenu li.dl-subviewopen > a {
  display: none;
}

/* ========================================
   Back Button (dl-back)
   ======================================== */

li.dl-back {
  background-color: rgba(0, 0, 0, 0.2);
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

li.dl-back a {
  font-weight: bold;
  color: var(--bedra_font_white);
  padding-left: 40px!important;
  position: relative;
}

li.dl-back a:before {
  content: '';
  position: absolute;
  left: 20px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-left: 2px solid var(--bedra_font_white);
  border-bottom: 2px solid var(--bedra_font_white);
  transform: translateY(-50%) rotate(45deg);
}

li.dl-back a:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* ========================================
   Mobile Overlay
   ======================================== */

.dl-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  z-index: 10;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.dl-overlay.dl-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Prevent body scroll when menu is open */
body.dl-menu-open {
  overflow: hidden;
}

/* ========================================
   Header Icon Navigation
   ======================================== */

.header-icon-nav {
  position: fixed;
  top: 20px;
  left: 75px;
  z-index: 1502;
  display: flex;
  gap: 15px;
  align-items: center;
}

.header-icon-nav .icon-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--bedra_font_white);
  text-decoration: none;
  background-color: transparent;
  border-radius: 4px;
  transition: background-color 0.3s ease, opacity 0.3s ease 0.1s, visibility 0.3s ease 0.1s, transform 0.3s ease 0.1s;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-20px);
}

/* Menü geöffnet: alle Icons sichtbar */
.header-icon-nav.dl-active .icon-link {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* Back-Button immer sichtbar (auch wenn Menü geschlossen) */
.header-icon-nav #btn-back {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.header-icon-nav .icon-link:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

.header-icon-nav .icon-link i {
  font-size: 20px;
}

.header-icon-nav .icon-link > .bi {
  width: auto; 
  height: auto;
}

/* Flaggen-Icons */
.bi[data-flaglang="ger"]::before,
.bi[data-flaglang="eng"]::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 16px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bi[data-flaglang="ger"]::before {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5 3"%3E%3Cpath d="M0 0h5v1H0z"/%3E%3Cpath fill="%23D00" d="M0 1h5v1H0z"/%3E%3Cpath fill="%23FFCE00" d="M0 2h5v1H0z"/%3E%3C/svg%3E');
}

.bi[data-flaglang="eng"]::before {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 30"%3E%3Cpath fill="%23012169" d="M0 0h60v30H0z"/%3E%3Cpath stroke="%23FFF" stroke-width="6" d="M0 0l60 30m0-30L0 30"/%3E%3Cpath stroke="%23C8102E" stroke-width="4" d="M0 0l60 30m0-30L0 30" clip-path="url(%23a)"/%3E%3Cdefs%3E%3CclipPath id="a"%3E%3Cpath d="M30 15h30v15zv15H0zH0V0zV0h30z"/%3E%3C/clipPath%3E%3C/defs%3E%3Cpath stroke="%23FFF" stroke-width="10" d="M30 0v30M0 15h60"/%3E%3Cpath stroke="%23C8102E" stroke-width="6" d="M30 0v30M0 15h60"/%3E%3C/svg%3E');
}

/* ========================================
   Desktop Navigation (>=1200px)
   ======================================== */

nav.desktop-nav ul.main-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

nav.desktop-nav ul.main-menu > li {
  position: relative;
  margin: 0;
  padding: 0;
}

/* Icon Navigation Items */
nav.desktop-nav ul.main-menu > li.nav-icon {
  margin-right: 8px;
}

nav.desktop-nav ul.main-menu > li.nav-icon > a {
  padding: 8px 10px;
  font-size: 18px;
}

nav.desktop-nav ul.main-menu > li.nav-icon > a::before {
  display: none;
}

nav.desktop-nav ul.main-menu > li.nav-icon > a:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

nav.desktop-nav ul.main-menu > li.nav-icon:last-of-type {
  margin-right: 20px;
  padding-right: 20px;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}

/* Hauptmenü-Links mit roter Hover-Linie */
nav.desktop-nav ul.main-menu > li > a {
  position: relative;
  display: block;
  padding: 12px 18px;
  color: var(--bedra_font_white);
  text-decoration: none;
  font-size: 15px;
  font-family: 'Interstate Light', sans-serif;
  letter-spacing: 0.5px;
  white-space: nowrap;
  background-color: transparent;
  transition: color 0.3s ease;
}

/* Rote Linie unter dem Link (von der Mitte sich aufmalend) - jetzt in ::before */
nav.desktop-nav ul.main-menu > li > a::before {
  content: '';
  position: absolute;
  bottom: 8px;
  left: 50%;
  width: 0;
  height: 2px;
  background-color: var(--bedra_red);
  transform: translateX(-50%);
  transition: width 0.3s ease;
  z-index: 1;
}

nav.desktop-nav ul.main-menu > li > a:hover::before,
nav.desktop-nav ul.main-menu > li.active > a::before {
  width: 80%;
}

nav.desktop-nav ul.main-menu > li > a:hover {
  color: var(--bedra_font_white);
}

/* Dropdown-Indikator für Items mit Untermenü - jetzt in ::after */
nav.desktop-nav a.has-dropdown::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  margin: 0 3px;
  vertical-align: middle;
  border-top: 4px solid currentColor;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

/* Dropdown-Menü (Level 1) */
nav.desktop-nav ul.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  margin: 0;
  padding: 12px 0;
  list-style: none;
  background-color: rgba(19, 42, 62, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  display: none;
  z-index: 1000;
}

nav.desktop-nav ul.main-menu > li:hover > ul.dropdown-menu {
  display: block;
}

nav.desktop-nav ul.dropdown-menu > li {
  position: relative;
  margin: 0;
  padding: 0;
}

nav.desktop-nav ul.dropdown-menu > li > a {
  position: relative;
  display: block;
  padding: 10px 20px;
  color: var(--bedra_font_white);
  text-decoration: none;
  font-size: 13px;
  font-family: 'Interstate Light', sans-serif;
  white-space: nowrap;
  background-color: transparent;
  transition: color 0.2s ease;
}

nav.desktop-nav ul.dropdown-menu > li > a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 0;
  height: 1px;
  background-color: var(--bedra_red);
  transform: translateX(-50%);
  transition: width 0.3s ease;
}

nav.desktop-nav ul.dropdown-menu > li > a:hover::after,
nav.desktop-nav ul.dropdown-menu > li.active > a::after {
  width: 70%;
}

nav.desktop-nav ul.dropdown-menu > li > a:hover {
  color: var(--bedra_font_white);
}

/* Sub-Dropdown (Level 2) - erscheint rechts */
nav.desktop-nav ul.dropdown-submenu {
  position: absolute;
  top: 0;
  left: 100%;
  min-width: 200px;
  margin: 0 0 0 2px;
  padding: 12px 0;
  list-style: none;
  background-color: rgba(19, 42, 62, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  display: none;
  z-index: 1001;
}

nav.desktop-nav ul.dropdown-menu > li:hover > ul.dropdown-submenu {
  display: block;
}

nav.desktop-nav ul.dropdown-submenu > li > a {
  position: relative;
  display: block;
  padding: 8px 20px;
  color: var(--bedra_font_white);
  text-decoration: none;
  font-size: 12px;
  font-family: 'Interstate Light', sans-serif;
  white-space: nowrap;
  background-color: transparent;
  transition: color 0.2s ease;
}

nav.desktop-nav ul.dropdown-submenu > li > a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 0;
  height: 1px;
  background-color: var(--bedra_red);
  transform: translateX(-50%);
  transition: width 0.3s ease;
}

nav.desktop-nav ul.dropdown-submenu > li > a:hover::after,
nav.desktop-nav ul.dropdown-submenu > li.active > a::after {
  width: 60%;
}

nav.desktop-nav ul.dropdown-submenu > li > a:hover {
  color: var(--bedra_font_white);
}

/* Submenu-Indikator (Pfeil nach rechts) */
nav.desktop-nav ul.dropdown-menu li.has-dropdown > a::before {
  content: '';
  float: right;
  margin-left: 16px;
  margin-top: 6px;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 4px solid currentColor;
}