/* ==== Font-Face (nur .woff2) ==== */
@font-face {
  font-family: 'Gilroy';
  src: url('/wp-content/uploads/static/fonts/gilroy/GilroyRegular/font.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Gilroy';
  src: url('/wp-content/uploads/static/fonts/gilroy/GilroyBold/font.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Gilroy';
  src: url('/wp-content/uploads/static/fonts/gilroy/GilroyRegularItalic/font.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
}

/* ==== Farbpalette ==== */
:root {
  --primary-dark: #162336;
  --primary-mid: #4e818d;
  --white: #ffffff;

  --yellow: #bcb025;
  --purple: #7f3089;
  --blue: #2395d2;
  --orange: #e84e0f;

  --opacity-80: 0.8;
  --opacity-60: 0.6;
  --opacity-40: 0.4;
  --opacity-20: 0.2;
}

/* ==== Grundlayout ==== */
html {
  font-size: 20px!important; /* entspricht 16px meistens */
  background-color: var(--white)!important;
}

body {
  font-family: 'Gilroy', sans-serif;
  font-size: 1em;
  line-height: 1.5; /* calc(1em + 2pt); */
  background-color: var(--white);
  color: var(--primary-dark);
  margin: 0;
  padding: 0;
}

/* ==== Überschriften ==== */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Gilroy', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.5; /* calc(1em + 2pt); */
  color: var(--primary-dark);
}

h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* ==== Fließtext ==== */
p {
  /*font-weight: 400;*/
  line-height: 1.5; /* calc(1em + 2pt); */
}

.vertical-center {
  display: flex;
  align-items: center;    /* vertikal zentriert */
  height: 100%;           /* oder passende feste Höhe */
}

/* ==== Hervorhebungen ==== */
strong, b {
  font-weight: 700;
}

/* ==== Zitate ==== */
blockquote, cite {
  font-style: italic;
  color: var(--primary-mid);
  margin: 1em 0;
  padding-left: 1em;
  border-left: 4px solid var(--primary-mid);
}

/* ==== Links (nur Text, kein Bild) ==== */
a {
  color: var(--orange); /*var(--blue);*/
  text-decoration: none;
}
a:hover,
a:focus {
  color: var(--orange);
  text-decoration: none;
}
p a {
  text-decoration: underline;
}
/*
a:has(img), a img {
  all: unset;
}
*/

/* ==== Fokus sichtbar ==== */
*:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

/* ==== Formulare ==== */
input,
select,
textarea {
  font-family: 'Gilroy', sans-serif;
  font-size: 1em;
  padding: 0.65em 0.9em;
  border: 2px solid var(--primary-mid);
  border-radius: 4px;
  background-color: #fff;
  color: var(--primary-dark);
  line-height: 1.4;
  width: 100%;
  box-sizing: border-box;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--blue);
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
label {
  display: block;
  margin-bottom: 0.4em;
  font-weight: 700;
  font-size: 0.95em;
  color: var(--primary-dark);
}
fieldset {
  border: none;
  padding: 0;
  margin: 0 0 1.5em 0;
}
legend {
  font-weight: 700;
  margin-bottom: 0.5em;
}
.input-error {
  border-color: var(--orange);
  background-color: rgba(232, 78, 15, 0.1);
}
.input-error:focus {
  outline-color: var(--orange);
}
.error-message {
  color: var(--orange);
  font-size: 0.9em;
  margin-top: 0.25em;
}
form button[type="submit"] {
  margin-top: 1em;
}
.form-group {
  margin-bottom: 1.25em;
}

/* ==== Menu ==== */
.no_collapse_menu .et_mobile_nav_menu {  
  display: none!important;
}
.no_collapse_menu .et_pb_menu__menu {
  display: flex!important;
 }

@media (max-width: 980px) {
  .no_collapse_menu .et_pb_menu__wrap {
    justify-content: flex-start!important;
  }
    
  .et_pb_menu .et_mobile_menu li ul,
  .et_mobile_menu .menu-item-has-children > ul {
    display: none!important;
  }
}

.et_pb_sticky--top {
  top:0px!important;
}

.et_pb_menu li li.separator::before {
  content: "";
  display: block;
  height: 2px;
  width: 60%;
  background-color: #ccc; /* Farbe der Linie */
  margin: 8px auto 5px auto;     /* Abstand zur Menübeschriftung */
}

/* Container des Submenüs: zweispaltiges Layout */
.et_pb_menu li.two-column-submenu ul {
  display: grid;
  grid-template-columns: repeat(2, auto);
  column-gap: 30px; /* Abstand zwischen Spalten */
  min-width: 300px;  /* Breite anpassen nach Bedarf */
  padding: 15px 20px;
}

/* Optional: mehr Abstand zwischen den Zeilen */
.et_pb_menu li.two-column-submenu ul li {
  margin-bottom: 10px;
}

/* Menübeschreibungen sichtbar und gestylt machen */
.menu-item-description {
  display: block;
  font-size: 0.8em;
  line-height: 1;
  margin-top: 0px;
  color: var(--primary-mid)
}


/*****************************************/
/*        Menu - Mobile                  */
/*****************************************/
.et_mobile_menu li a {
	font-weight: normal;
	text-decoration: none;
}

.et_mobile_menu .menu-item-has-children > a, .et_mobile_menu .sub-menu .menu-item-has-children > a {
  background-color: transparent;
  position: relative;
  font-weight: normal;
}
.et_mobile_menu .menu-item-has-children > a:after, .et_mobile_menu .sub-menu .menu-item-has-children > a:after {
  font-family: 'ETmodules';
  text-align: center;
  speak: none;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  position: absolute;
}
.et_mobile_menu .menu-item-has-children > a:after, .et_mobile_menu .sub-menu .menu-item-has-children > a:after {
  content: '\4c';
  font-weight: bold;
  top: 13px;
  right: 10px;
}
.et_mobile_menu .menu-item-has-children.visible > a:after, .et_mobile_menu .sub-menu .menu-item-has-children.visible > a:after {
  content: '\4d';
  font-weight: bold;
}
.et_mobile_menu ul.sub-menu {
  display: none !important;
  visibility: hidden !important;
  transition: all 1.5s ease-in-out;
}
.et_mobile_menu .visible > ul.sub-menu {
  display: block !important;
  visibility: visible !important;
}
.et_mobile_menu {
  overflow: scroll !important;
  max-height: 84vh; /*edit this to match your view height*/
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3) /*just some box shadow for nicer menu, you can skip this*/
}

.et_mobile_menu ul li a {
  text-transform: none !important;
  font-size: 1.1em !important;
}

.et_mobile_menu li.separator::before {
  content: "";
  display: block;
  height: 2px;
  width: 60%;
  background-color: #ccc;
  margin: 0 auto 0 auto;
}

/* ==== Breadcrumb ==== */
.rank-math-breadcrumb p {
    font-weight: 700;
    font-style: normal;
    /*text-transform: uppercase;*/
    font-size: 0.8em;
    color: var(--primary-dark)!important;
}
.rank-math-breadcrumb a {
    font-weight: 700;
    text-transform: uppercase;
    font-style: bold;
    font-size: 0.8em;
    color: var(--primary-dark)!important;
}

/* ==== Video ==== */
.video-background {
  position: relative;
  width: 100%;
  height: 55vh; /* nur 66 % der Viewport-Höhe sichtbar */
  overflow: hidden;
}

.video-background video {
  position: relative;
  top: -17vh; /* nach oben verschoben, um mittleren Ausschnitt zu zeigen */
  width: 100%;
  height: auto;
  min-height: 100vh; /* sichergestellt: Video füllt den sichtbaren Bereich */
  object-fit: cover;
  z-index: 2;
}

.video-background .dipl-hero-slide-media-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(22, 35, 54, 0.4); /* macht das Video dunkler */
  pointer-events: none; /* wichtig: Video bleibt klickbar */
  z-index: 2;
}

.video-background-overlay {
  position: absolute;
  inset: 0;
  background: rgba(22, 35, 54, 0.4); /* dein Overlay */
  z-index: 10;
  pointer-events: none;
}

.video-background .et-pb-controllers {
  visibility: hidden;
}

.video-background .dipl-hero-slide-content-wrap {
  position: absolute;
  display: block;
  width: 80%;
  left: 10%;
  top: 10%;
  z-index: 1000;
}

.video-background .dipl-hero-slide-content-inner {
   background-color: rgba(0, 0, 0, 0)!important;
}

.content-overlay {
  position: relative;
  z-index: 2;
  color: white;
  text-align: center;
  padding: 2em;
}

@media (max-width: 768px) {
  .video-background {
    height: auto;       /* ganze Höhe des Videos sichtbar */
  }

  .video-background video {
    position: relative;
    top: 0;
    height: auto;
    min-height: auto;
  }
}

/* ==== Utility-Farben ==== */
.bg-primary-dark { background-color: var(--primary-dark); color: var(--white); }
.bg-primary-mid  { background-color: var(--primary-mid);  color: var(--white); }

.bg-yellow { background-color: var(--yellow); color: var(--primary-dark); }
.bg-purple { background-color: var(--purple); color: var(--white); }
.bg-blue   { background-color: var(--blue);   color: var(--white); }
.bg-orange { background-color: var(--orange); color: var(--white); }

.bg-primary-dark-80 { background-color: rgba(22, 35, 54, var(--opacity-80)); }
.bg-primary-dark-60 { background-color: rgba(22, 35, 54, var(--opacity-60)); }
.bg-primary-dark-40 { background-color: rgba(22, 35, 54, var(--opacity-40)); }
.bg-primary-dark-20 { background-color: rgba(22, 35, 54, var(--opacity-20)); }

/* ==== Responsive Schriftgrößen ==== */
/* Tablet: 768px bis 1024px */
@media (max-width: 1024px) and (min-width: 769px) {
  body {
    font-size: 18px!important;
  }
    .reverse {
		display: flex;
		flex-direction: column-reverse;
	}
}

/* Kleine Tablets und große Smartphones: 481px bis 768px */
@media (max-width: 768px) and (min-width: 481px) {
  body {
    font-size: 16px!important;
  }
  .reverse {
		display: flex;
		flex-direction: column-reverse;
	}
}

/* Mobile: bis 480px */
@media (max-width: 480px) {
  body {
    font-size: 16px!important;
  }
    .reverse {
		display: flex;
		flex-direction: column-reverse;
	}

}