@font-face {
  font-display: swap;
  font-family: "Lato_v1";
  font-style: normal;
  font-weight: 400;
  src: url('fonts/lato/lato_v1.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: "Lato_v2";
  font-style: normal;
  /* font-weight: 400; */
  src: url('fonts/lato/lato_v2.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: "Lato_v3";
  font-style: normal;
  font-weight: 400;
  src: url('fonts/lato/lato_v3.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: "Dosis";
  font-style: normal;
  font-weight: 600;
  src: url('fonts/dosis/dosis.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  src: url('fonts/roboto/roboto.woff2') format('woff2');
}

html, body {
	font-family: "Roboto", sans-serif;
}

/*
html {
  animation: fadeIn 0.8s ease-in-out forwards;
  background-color: rgba(120, 120, 120, 0.7);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    
  }
  to {
    opacity: 1;
  }
}
*/


.form-control:focus {
	box-shadow: none;
}

.fw-light {
	font-size: 15px !important;
}

/* TopBar */
/* ------------------------------------------------------------ */
#top_bar_wrapper {
	background-color: #004979;
	z-index: 100;
}

.icon {
	color: #FFFFE0;
	font-size: 20px;
}

.custom_icons {
	color: #fff;
	font-size: 45px;
	line-height: 79px !important;
}

.info_box_icon {
	background-color: #004979;
    border-style: solid;
    border-width: 9px 9px 9px 9px;
    border-color: #fff;
    height: 99px;
    margin-bottom: 13px;
    width: 99px;
    box-shadow: 0px 0px 2px 0px #273171;
    display: inline-block;
    transition: box-shadow .2s ease-in-out;
}

.card {
	border-radius: 0 !important;
	border: none;
	line-height: 25px;
	font-size: 15px;
}

.card_shadow {
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
    transition: box-shadow .2s ease-in-out;
}

.card_shadow:hover {
    .info_box_icon {
        box-shadow: 0px 0px 5px 0px #273171;
        transition: box-shadow .2s ease-in-out;
    }

    cursor: pointer;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.8);
    transition: box-shadow .2s ease-in-out;
}

.card-title {
	line-height: 25px;
	font-size: 26px;
	font-family: "Dosis", sans-serif !important;
}

.row_cards {
	margin-top: -250px !important;
}

.nav-link, .custom_text_color {
    color: #FFFFE0;
}

.nav-link:hover, .nav-link:focus {
	color: #FFFFE0;
}

.top_bar_text {
	font-weight: 100 !important;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, Arial, sans-serif;
}

@media only screen and (max-width: 767px) {
	.top_bar_mobil_li {
		justify-content: center !important;
	}
}

/* Header */
/* ------------------------------------------------------------ */
header {
	/* box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5); */
	z-index: 99;
}

#header_wrapper {
	position: absolute;
	background-color: #FFFCFCBB;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
}

.custom_header {
	background-color: rgba(255, 252, 252, 0.95) !important;
	-moz-transition: background-color .4s ease-in-out;
    -webkit-transition: background-color .4s ease-in-out;
    -o-transition: background-color .4s ease-in-out;
    transition: background-color .4s ease-in-out;
}

.navbar {
	padding-top: 0;
	padding-bottom: 0;
}

.navbar-nav li a:hover {
	color: #FFA500 !important;
}

.active {
	color: #DD8F00 !important;
}

.navbar-toggler {
    border: none !important;
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 0;
}

.custom_nav li a {
    text-align: center;
    font-weight: 400;
    font-size: 16px;
    /*color: rgba(0, 0, 0, 0.7) !important;*/
    padding: 0px 15px 0px 15px;
}

.custom_nav li {
    padding: 0px 15px 0px 15px;
}

#custom_logo {
    height: 70px;
    width: auto;
    -moz-transition: height .4s ease-in-out;
    -webkit-transition: height .4s ease-in-out;
    -o-transition: height .4s ease-in-out;
    transition: height .4s ease-in-out;
}

.small_logo {
    height: 50px !important;
    width: auto;
    -moz-transition: height .4s ease-in-out;
    -webkit-transition: height .4s ease-in-out;
    -o-transition: height .4s ease-in-out;
    transition: height .4s ease-in-out;
}

/* Landingpage */
/* ------------------------------------------------------------ */
.content{
  width: 100%;
  min-height: 700px;
  background-color: rgba(0,73,121,.7);
  background-image: url("/pics/main_v9_m.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding-top: 100px;
  overflow: hidden;
}


#scroll_pic {
  /* The image used */
  background-image: url("pics/business.webp");

  /* Set a specific height */
  height: 200px; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#scroll_pic_overly {
	background-color: rgba(0, 0, 0, 0.4) !important;
	height: 200px; 
}

.content_overlay {
    /*background-color: rgba(0, 0, 0, 0.3);*/
    background-color: rgba(0, 73, 121, 0.3);
    min-height: 700px;
    margin-top: -100px;
}

.jumbo {
	color: #fff !important;
  /*font-family: "Roboto", sans-serif;*/
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, Arial, sans-serif;
}

/* < 1200px (extrapoliert) */
.display-7 { font-size: calc(1.325rem + 0.9vw); font-weight: 300; line-height: 1.2; }  /* XL → 2rem */
.display-8 { font-size: calc(1.275rem + 0.3vw); font-weight: 300; line-height: 1.2; }  /* XL → 1.5rem */

/* Bei .display-9 würde der VW-Anteil negativ werden.
   Praktischer: ohne VW skalieren */
.display-9 { font-size: 1rem; font-weight: 300; line-height: 1.2; }                    /* XL → 1rem */

/* ≥ 1200px */
@media (min-width: 1200px) {
  .display-7 { font-size: 2rem; }
  .display-8 { font-size: 1.5rem; }
  .display-9 { font-size: 1rem; }
}

.btn {
	color: #000;
}

.btn-primary {
    --bs-btn-color: #DD8F00;
    --bs-btn-bg: #DD8F00;
    --bs-btn-border-color: #DD8F00;
    --bs-btn-hover-color: #DD8F00;
    --bs-btn-hover-bg: #DD8F00;
    --bs-btn-hover-border-color: #DD8F00;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #DD8F00;
    --bs-btn-active-border-color: #DD8F00;
    --bs-btn-disabled-color: #DD8F00;
    --bs-btn-disabled-bg: #DD8F00;
    --bs-btn-disabled-border-color: #DD8F00;
}

.btn:hover {
    background-color: #FFA500;
    border-color: #FFA500;
    color: #000;
}

#ki_icon {
	height: 70px;
	width: 77.66px;
}

#erp_icon {
	height: 53px;
	width: 53px;
}

.bedeutung_it {
    font-family: "Lato_v1", Sans-serif;
    font-style: italic;
}

.die_it {
	font-family: "Lato_v3", Sans-serif;
	font-weight: 200;
    letter-spacing: 0.5px;
    word-spacing: 3px;
}

.mos_title {
	font-family: "Lato_v3", Sans-serif;
    font-weight: 500;
    text-decoration: underline;
    color: #DD8F00;
}

#l_not_found {
	box-shadow: 10px 0px 60px 0px rgba(0, 0, 0, 0.2);
	border-style: solid;
    border-width: 0px 0px 0px 3px;
    border-color: #004979;
}

#termin_n_a {
    color: #FFFFFF;
    font-family: "Lato_v3", Sans-serif;
    font-size: 60px !important;
    font-weight: 500;
}

#lng_h {
    font-family: "Lato_v3", Sans-serif;
    font-size: 36px;
    font-weight: 500;
}

#lng_h_span {
    font-weight: 700;
    color: #DD8F00;
	/* text-shadow:
    /* -1px -1px 0 #004979,  /* Oben links */
    /* 1px -1px 0 #004979,  /* Oben rechts */
    /* -1px 1px 0 #004979,  /* Unten links */
    /* 1px 1px 0 #004979;   /* Unten rechts */
}

#lng_p {
	font-family: "Lato_v3", Sans-serif;
    font-size: 18px;
    letter-spacing: 0.5px;
    word-spacing: 3px;
}

.btn-ja {
	padding: 18px 55px 18px 55px;
    font-family: "Lato_v3", Sans-serif;
    font-size: 17px;
    font-weight: 700;
}

/* Footer */
/* ------------------------------------------------------------ */
.custom_background_color {
	background-color: #003252;
}

.link_u, .oe_font {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, Arial, sans-serif;
}

.datenschutz, .agbs, .impressum {
    margin: 70px 0 70px 0;
    font-family: "Lato_v3", Sans-serif;
}

.kontakt {
    font-family: "Lato_v3", Sans-serif;
}

/* Basiszustand */
.nav-link,
.nav-link i,
.link_u li a {
  color: #FFFFE0;
  transition: color 0.15s ease-in-out;
}

/* Hover-Zustand */
.nav-link:hover,
.nav-link i:hover,
.link_u li a:hover {
  color: #FFA500;
}

.footer_headline {
	color: #FFA500;
}

.custom_x {
	font-size: 18px;
}

.d_agb {
    color: #000;
}

/* FooterBar */
/* ------------------------------------------------------------ */
.footer_bar {
	background-color: #004979;
}

.nein {
    display: none;
}



/* -------------------------------------------------------------
   Grundfarben / Basis
------------------------------------------------------------- */
.dark  { background: #110f16; }
.light { background: #f3f5f7; }

a, a:hover {
  text-decoration: none;
  transition: color 0.3s ease-in-out;
}

#pageHeaderTitle {
  margin: 2rem 0;
  text-transform: uppercase;
  text-align: center;
  font-size: 2.5rem;
}

/* -------------------------------------------------------------
   Postcard: Grundlayout
------------------------------------------------------------- */
.postcard {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  margin: 0 0 2rem 0;
  overflow: hidden;
  color: #ffffff;
  box-shadow: 0 4px 21px -12px rgba(0, 0, 0, 0.66);
}

/* Varianten hell/dunkel */
.postcard.dark  { background-color: #18151f; }
.postcard.light { background-color: #e1e5ea; }

/* Text dunkel */
.postcard .t-dark { color: #18151f; }

/* Links im Card erben Farbe */
.postcard a { color: inherit; }

/* Überschriften / Größen */
.postcard h1,
.postcard .h1 {
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
}

.postcard .small { font-size: 80%; }
.postcard .postcard__title { font-size: 1.75rem; }

/* Bild */
.postcard .postcard__img {
  width: 100%;
  max-height: 180px;
  object-fit: cover;
  position: relative;
}

/* Bild-Container */
.postcard .postcard__img_link { display: contents; }

/* Bar unter Titel */
.postcard .postcard__bar {
  width: 50px;
  height: 10px;
  margin: 10px 0;
  background-color: rgb(0, 73, 121);
  transition: width 0.2s ease;
}

/* Textbereiche (beide Varianten unterstützen) */
.postcard .postcard__text,
.postcard .postcard__t {
  padding: 1.5rem;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Vorschautext */
.postcard .postcard__preview-txt {
  height: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: justify;
}

/* diagonaler Overlay-Gradient über der Karte */
.postcard::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(-70deg, #424242, transparent 50%);
  opacity: 1;
}

/* Hover: Bar verlängern */
.postcard:hover .postcard__bar { width: 100px; }

.white-text-with-blue-shadow {
  text-shadow:
    1px 1px 2px #004979,
    0 0 1em #004979,
    0 0 0.2em #004979;
  color: white;
}

@media (max-width: 991px) {
  #header_wrapper {
    background-color: #fff !important;
  }

  #niveau_h1 {
    margin-top: 12vh;
  }
}

@media (max-width: 767px) {
  #niveau_h1 {
    margin-top: 15vh;
  }
  
  .navbar-nav {
		--bs-nav-link-padding-y: .2rem !important;
	}
	
  #top_bar_wrapper {
	padding-top: .25rem !important;
	padding-bottom: .25rem !important;
  }
}

@media (min-width: 991px) {
  #niveau_h1 {
    margin-top: 10vh;
  }
}

/* greift erst ab 1400px Breite (Bootstrap 5: xxl) */
@media (min-width: 1400px) {
  #niveau_h1 {
    margin-top: 15vh;
  }
  .row_cards {
    margin-top: -200px !important;
  }
}

/* -------------------------------------------------------------
   Breakpoint >= 769px
------------------------------------------------------------- */
@media screen and (min-width: 769px) {
  .postcard { flex-wrap: inherit; }

  .postcard .postcard__title { font-size: 2rem; }

  .postcard .postcard__img {
    max-width: 300px;
    max-height: 100%;
    transition: transform 0.3s ease;
  }

  .postcard .postcard__text,
  .postcard .postcard__t {
    padding: 3rem;
    width: 100%;
  }

  /* Bild-Zoom auf Hover für skalierende Varianten */
  .postcard_scale:hover .postcard__img { transform: scale(1.1); }
}

/* -------------------------------------------------------------
   Breakpoint >= 1024px – Steg (schmaler Balken) je Theme
   (global aktiv – wird im #erpnext-Block weiter unten deaktiviert)
------------------------------------------------------------- */
@media screen and (min-width: 1024px) {
  .postcard .postcard__text::before,
  .postcard .postcard__t::before {
    content: "";
    position: absolute;
    display: block;
    top: -20%;
    height: 130%;
    width: 55px;
  }

  .postcard.dark  .postcard__text::before,
  .postcard.dark  .postcard__t::before { background: #18151f; }

  .postcard.light .postcard__text::before,
  .postcard.light .postcard__t::before { background: #e1e5ea; }
}

/* -------------------------------------------------------------
   Farben (blue-Theme)
------------------------------------------------------------- */
.blue .postcard__title:hover { color: #0076bd !default; }
.blue .postcard__bar        { background-color: #0076bd !default; }

/* Basis-Gradient für .blue */
.blue::before {
  background-image: linear-gradient(-30deg, rgba(0, 118, 189, 0.1), transparent 50%);
}

/* -------------------------------------------------------------
   Alternierung: Fall A) mit Link-Wrapper
   Markup:
   <a class="postcard_link_wrap">
     <article class="postcard"> … </article>
   </a>
------------------------------------------------------------- */
.postcard_link_wrap { display: block; }

@media screen and (min-width: 769px) {
  /* Bild links/rechts wechseln */
  .postcard_link_wrap:nth-child(odd)  .postcard { flex-direction: row; }
  .postcard_link_wrap:nth-child(even) .postcard { flex-direction: row-reverse; }

  /* Steg links/rechts anpassen (für .postcard__text & .postcard__t) */
  .postcard_link_wrap:nth-child(odd)  .postcard .postcard__text::before,
  .postcard_link_wrap:nth-child(odd)  .postcard .postcard__t::before {
    left: -16px !important;
    transform: rotate(4deg);
  }
  .postcard_link_wrap:nth-child(even) .postcard .postcard__text::before,
  .postcard_link_wrap:nth-child(even) .postcard .postcard__t::before {
    right: -16px !important;
    transform: rotate(-4deg);
  }
}

/* .blue-Gradient an Alternierung koppeln (mit Wrapper) */
.postcard_link_wrap:nth-child(even) .blue::before {
  background-image: linear-gradient(30deg, rgba(0, 118, 189, 0.1), transparent 50%);
}

@media screen and (min-width: 769px) {
  .blue::before {
    background-image: linear-gradient(-80deg, rgba(0, 118, 189, 0.1), transparent 50%);
  }
  .postcard_link_wrap:nth-child(even) .blue::before {
    background-image: linear-gradient(80deg, rgba(0, 118, 189, 0.1), transparent 50%);
  }
}

/* -------------------------------------------------------------
   Alternierung: Fall B) ohne Link-Wrapper – #erpnext
   -> Alternierung ja, aber KEIN Steg und Padding .postcard__t = 2rem
------------------------------------------------------------- */
@media screen and (min-width: 769px) {
  /* Bild links/rechts wechseln */
  #erpnext > article.postcard:nth-child(odd)  { flex-direction: row; }
  #erpnext > article.postcard:nth-child(even) { flex-direction: row-reverse; }

  /* Padding-Anpassung nur hier: .postcard__t = 2rem */
  #erpnext > article.postcard .postcard__t { padding: 2rem; }
}

/* Steg im #erpnext-Block vollständig deaktivieren */
#erpnext > article.postcard .postcard__t::before { content: none !important; }

/* .blue-Gradient-Alternierung (ohne Steg bleibt nur der Hintergrundwechsel) */
#erpnext > article.postcard.blue:nth-child(even)::before {
  background-image: linear-gradient(30deg, rgba(0, 118, 189, 0.1), transparent 50%);
}

@media screen and (min-width: 769px) {
  #erpnext > article.postcard.blue::before {
    background-image: linear-gradient(-80deg, rgba(0, 118, 189, 0.1), transparent 50%);
  }
  #erpnext > article.postcard.blue:nth-child(even)::before {
    background-image: linear-gradient(80deg, rgba(0, 118, 189, 0.1), transparent 50%);
  }
}