/* ===================
   Base & Reset
   =================== */
html {
  overflow-y: scroll; /* verhindert Layout-Shift beim Seitenwechsel */
  font-size: 14px;
}

/* Fuer alle natuerlichen Form-Controls */
input,
select,
textarea {
  font-size: 14px !important;
}

/* Fuer Bootstrap-Klassen */
.form-control,
.form-select {
  font-size: 14px !important;
}


label {
  font-weight: bold !important;
  font-size: 14px !important;
}


/* ===================
   Layout
   =================== */
#top-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 25px;
  background: #ffffff;
  z-index: 299;
}
/* Default (16:9 & kleiner): full-width minus 50px pro Seite */
.custom-container {
  width: 100%;
  max-width: calc(100% - 100px);
  margin: 0 auto;
}

/* bis 1280px: Rand je 10px (20px total) */
@media (max-width: 1280px) {
  .custom-container {
    max-width: calc(100% - 20px);
  }
}

/* bis 1024px: Rand je 2px (4px total) */
@media (max-width: 1024px) {
  .custom-container {
    max-width: calc(100% - 4px);
  }
}

/* Ultrawide (>21:9): cap auf 1600px */
@media (min-aspect-ratio: 21/9) {
  .custom-container {
    max-width: 1600px;
  }
}
/* default: kein min-width */
.min300,
.min400,
.min500 {
  min-width: auto;
}

/* ab md (≥768px) gelten deine Werte */
@media (min-width: 768px) {
  .min300 { min-width: 300px; }
  .min400 { min-width: 400px; }
  .min500 { min-width: 500px; }
}

.minW200{
	min-width:200px;
}


.minW250{
	min-width:250px;
}

.minW270{
	min-width:250px;
}


.minW300{
	min-width:300px;
}

.minH100{
  min-height: 100px;
}
.minH150{
  min-height: 150px;
}
.minH200{
  min-height: 200px;
}
.minH250{
  min-height: 250px;
}
.minH300{
  min-height: 300px;
}
.minH350{
  min-height: 350px;
}
.minH400{
  min-height: 400px;
}

@media (min-aspect-ratio: 21/9) {
  .custom-container {
    max-width: 1600px;
  }
}


:root {
  /* macht alle .form-control hellgrau */
  --bs-form-control-bg: #f8f9fa;
}


/* falls Chrome (oder WebKit) Autofill reinfunkt: */
input.form-control:-webkit-autofill,
textarea.form-control:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #f8f9fa inset !important;
  box-shadow:        0 0 0px 1000px #f8f9fa inset !important;
}


/* ========== Nav-Tabs Override ========== */
#tabMainNav,
#tabOneContainer,
#tabTwoContainer,
[id^="tabThreeContainer"] {
  --bs-nav-link-padding-x: 12px;
  --bs-nav-link-padding-y: 4px;
  --bs-nav-link-margin-x: 0;
}

#tabMainNav.nav-tabs,
#tabOneContainer.nav-tabs,
#tabTwoContainer.nav-tabs,
[id^="tabThreeContainer"].nav-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0 !important;
  padding-left: 0 !important;
  margin-bottom: 0 !important;
  border-bottom: 1px solid #dee2e6;
}

#tabMainNav .nav-item,
#tabOneContainer .nav-item,
#tabTwoContainer .nav-item,
[id^="tabThreeContainer"] .nav-item {
  margin: 0 !important;
}

#tabMainNav .nav-item + .nav-item,
#tabOneContainer .nav-item + .nav-item,
#tabTwoContainer .nav-item + .nav-item,
[id^="tabThreeContainer"] .nav-item + .nav-item {
  margin-left: -12px !important;
}

#tabMainNav .nav-link,
#tabOneContainer .nav-link,
#tabTwoContainer .nav-link,
[id^="tabThreeContainer"] .nav-link {
  border: none !important;
  border-radius: 0 !important;
  color: #6c757d !important;
  background-color: transparent !important;
  font-size: 14px !important;
  cursor: pointer !important;
}

#tabMainNav .nav-link:hover:not(.active),
#tabOneContainer .nav-link:hover:not(.active),
#tabTwoContainer .nav-link:hover:not(.active),
[id^="tabThreeContainer"] .nav-link:hover:not(.active) {
  color: #dc0000 !important;
  background-color: #e9ecef !important;
}

#tabMainNav .nav-link.active,
#tabOneContainer .nav-link.active,
#tabTwoContainer .nav-link.active,
[id^="tabThreeContainer"] .nav-link.active {
  color: #dc0000 !important;
  background-color: #fff !important;
  border-top:    1px solid #dee2e6 !important;
  border-left:   1px solid #dee2e6 !important;
  border-right:  1px solid #dee2e6 !important;
  border-bottom: none !important;
  border-top-left-radius:  .25rem !important;
  border-top-right-radius: .25rem !important;
}



/* ===================
   Typography
   =================== */

@font-face {
  font-family: "AvenirNext";
  src: url("AvenirNextLTW05-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "AvenirNext";
  src: url("AvenirNextLTW05-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "AvenirNext";
  src: url("AvenirNextLTW05-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

body {
  padding-top: 110px;
  color: #3D3935;
  font-family: "AvenirNextLTW05-Regular", Avenir, sans-serif;
}

a {
  color: #DA291C;
  text-decoration: none;
}
a:hover {
  color: #DA291C;
}

h1 {font-size:23px; font-family: "AvenirNextLTW05-Bold", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;}
h2 {font-size:18px; font-family: "AvenirNextLTW05-Bold", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;}
h3 {font-size:16px; font-family: "AvenirNextLTW05-Bold", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;}
h4 {font-size:14px; font-family: "AvenirNextLTW05-Bold", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;}
h5 {font-size:100%;}
h6 {font-size:95%;}


.text-sm { font-size: .75rem; }


/* ===================
   Navbar
   =================== */
.navbar-brand {
  color: #DA291C;
}
.nav-item {
  padding-right: 15px;
}
.navbar .navbar-nav .nav-link {
  color: #3D3935;
  font-size: 1.1em;
}
.navbar .navbar-nav .nav-link:hover,
.active,
.link-hover-color {
  color: #DA291C !important;
}

@media (min-width: 992px) {
  .navbar .nav-item .dropdown-menu {
    display: none;
    margin-top: 0; /* Dropdown direkt unter Link */
  }
  .navbar .nav-item:hover .dropdown-menu {
    display: block;
  }
  .breadcrumb .breadcrumb-item:hover .dropdown-menu {
    display: block;
  }
}

.bg-login-diagonal {
  background: linear-gradient(
    135deg,
    #505050 0%,
    #707070 50%,
    #909090 100%
  );
}

.banner-split-grey {
  width: 100%;
  height: 75px;
  background: linear-gradient(
    195deg,
    /* linke Seite: dezenter Grau-Verlauf */
    #f5f5f5 0%,
    #e0e0e0 38.2%,
    /* goldener Schnitt – scharfe Trennlinie */
    #f1f1f1 38.2%,
    /* rechte Seite: dezenter Grau-Verlauf */
    #e3e3e3 100%
  );
}


.banner-split-blue {
  width: 100%;
  height: 75px;
  background: linear-gradient(
    195deg,
    /* linke Seite: dezenter Grau-Verlauf */
    #8BC2EB 0%,
    #81BCE8 38.2%,
    /* goldener Schnitt – scharfe Trennlinie */
    #A7DAF7 38.2%,
    /* rechte Seite: dezenter Grau-Verlauf */
    #ADDDF3 100%
  );
}




.footer-gradient {
  position: relative;      /* für das ::before */
  padding-top: 20px;       /* Platz für den Balken */
  min-height: 110px;       /* bleibt wie gehabt */
  background: linear-gradient(
    to right,
    #d7d7d7 0%,
    #e8e8e8 50%,
    #f1f1f1 100%
  );
  overflow: hidden;
}

.footer-gradient::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 20px;
  background: linear-gradient(
    to right,
    #808080 0%,
    #bbbbbb 100%
  );
}



/* ===================
   Buttons (btnFAHover)
   =================== */


.btnFAHover,a.btnFAHover, a.btnFAHover:link, a.btnFAHover:visited
{
	color:#ff6600;	
}
.btnFAHover:hover,a.btnFAHover:hover
{
	color: #8AC007;	
	text-decoration:none;
}


.btnFAHoverGrey,a.btnFAHoverGrey, a.btnFAHoverGrey:link, a.btnFAHoverGrey:visited
{
	color:#555555;	
}
.btnFAHoverGrey:hover,a.btnFAHoverGrey:hover
{
	color: #dc0000;	
	text-decoration:none;
}


.btnFAHoverGreyDis,a.btnFAHoverGreyDis, a.btnFAHoverGreyDis:link, a.btnFAHoverGreyDis:visited
{
	color:#aaaaaa;	
}
.btnFAHoverGreyDis:hover,a.btnFAHoverGreyDis:hover
{
	color: #aaaaaa;	
	text-decoration:none;
}


.btnFAHoverGreen,a.btnFAHoverGreen, a.btnFAHoverGreen:link, a.btnFAHoverGreen:visited
{
	color:#8AC007;	
}
.btnFAHoverGreen:hover,a.btnFAHoverGreen:hover
{
	color: #ff6600;	
	text-decoration:none;
}


.btnFAHoverBlue,a.btnFAHoverBlue, a.btnFAHoverBlue:link, a.btnFAHoverBlue:visited
{
	color: #0097F7;	
}
.btnFAHoverBlue:hover,a.btnFAHoverBlue:hover
{
	color: #ff6600;	
	text-decoration:none;
}

.btnFAHoverGreyBlue,a.btnFAHoverGreyBlue, a.btnFAHoverGreyBlue:link, a.btnFAHoverGreyBlue:visited
{
	color: #555555;	
}

.btnFAHoverGreyBlue:hover,a.btnFAHoverGreyBlue:hover
{
	color: #0097F7;	
	text-decoration:none;
}


.btnFAHoverRed,a.btnFAHoverRed, a.btnFAHoverRed:link, a.btnFAHoverRed:visited
{
	color: #dc0000;	
}
.btnFAHoverRed:hover,a.btnFAHoverRed:hover
{
	color: #ff6600;	
	text-decoration:none;
}

.btnFAHoverWhite,a.btnFAHoverWhite, a.btnFAHoverWhite:link, a.btnFAHoverWhite:visited
{
	color: #ffffff;	
}

.btnFAHoverWhite:hover,a.btnFAHoverWhite:hover
{
	color: #dc0000;	
	text-decoration:none;
}


.btnFAHoverWhiteOrange,a.btnFAHoverWhiteOrange, a.btnFAHoverWhiteOrange:link, a.btnFAHoverWhiteOrange:visited
{
	color: #ffffff;	
}

.btnFAHoverWhiteOrange:hover,a.btnFAHoverWhiteOrange:hover
{
	color: #FF9933;	
	text-decoration:none;
}


.btnFAHoverGreyBright,a.btnFAHoverGreyBright, a.btnFAHoverGreyBright:link, a.btnFAHoverGreyBright:visited
{
	color:#808080;	
}

.btnFAHoverGreyBright:hover,a.btnFAHoverGreyBright:hover
{
	color: #dc0000;	
	text-decoration:none;
}

.btnFAHoverPurple,a.btnFAHoverPurple, a.btnFAHoverPurple:link, a.btnFAHoverPurple:visited
{
	color:  #951B81;	
}

.btnFAHoverPurple:hover,a.btnFAHoverPurple:hover
{
	color:  #CC0099;	
	text-decoration:none;
}

.btnFAHoverYellow,a.btnFAHoverYellow, a.btnFAHoverYellow:link, a.btnFAHoverYellow:visited
{
	color:  #FFCC00;	
}

.btnFAHoverYellow:hover,a.btnFAHoverYellow:hover
{
	color:  #dc0000;	
	text-decoration:none;
}

.btnFAHoverDark,a.btnFAHoverDark, a.btnFAHoverDark:link, a.btnFAHoverDark:visited
{
	color:  #000000;	
}

.btnFAHoverDark:hover,a.btnFAHoverDark:hover
{
	color:   #f1f1f1;	
	text-decoration:none;
}




/* ===================
   Buttons (FANext)
   =================== */
.btnFANextOrange,
.btnFANextGrey,
.btnFANextGreyMid,
.btnFANextRed,
.btnFANextGreen {
  display: inline-block;
  color: #fff;
  font-size: 15px;
  text-align: center;
  padding: 3px 16px;
  margin-bottom: 5px;
  text-decoration: none;
  border: 1px solid;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12),
              0 1px 2px rgba(0,0,0,0.24);
  transition: background .3s ease-in-out;
  cursor: pointer;
}
.btnFANextGrey {
  background: #505050;
  border-color: #707070;
}
.btnFANextGrey:hover {
  background: #fff;
  color: #505050;
}
.btnFANextGreyMid {
  background: #707070;
  border-color: #707070;
}
.btnFANextGreyMid:hover {
  background: #fff;
  color: #606060;
}
.btnFANextRed {
  background: #DA291C;
  border-color: #DA291C;
}
.btnFANextRed:hover {
  background: #fff;
  color: #DA291C;
}
.btnFANextGreen {
  background: #8AC007;
  border-color: #8AC007;
}
.btnFANextGreen:hover {
  background: #fff;
  color: #8AC007;
}

.btnFANextOrange{
  background:  #FF9933;
  border-color:  #FF9900;
}
.btnFANextOrange:hover {
  background: #fff;
  color: #FF9933;
}


.btnFANextClearBlue,a.btnFANextClearBlue, a.btnFANextClearBlue:link, a.btnFANextClearBlue:visited {
    font-family:Arial, Helvetica, sans-serif;
    display:inline-block;
    color:#0097F7;
    background-color:  #ffffff;
    font-size:15px;
    text-align:center;
    padding-left:10px;
    padding-right:10px;
    padding-top:2px;
    padding-bottom:2px;
    text-decoration:none;
    margin-left:0;
    margin-top:0px;
    margin-bottom:5px;
    border:1px solid #0097F7;
    white-space:nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: background .3s ease-in-out;
    cursor:pointer;

}

.btnFANextClearBlue:hover,a.btnFANextClearBlue:hover {
    background-color:#ffffff;
    color:#f76000;

}


.btnFANextBlue,a.btnFANextBlue, a.btnFANextBlue:link, a.btnFANextBlue:visited {
    font-family:Arial, Helvetica, sans-serif;
    display:inline-block;
    color:#FFFFFF;
    background-color:  #0097F7;
    font-size:15px;
    text-align:center;
    padding-left:10px;
    padding-right:10px;
    padding-top:2px;
    padding-bottom:2px;
    text-decoration:none;
    margin-left:0;
    margin-top:0px;
    margin-bottom:5px;
    border:1px solid #00A8D9;
    white-space:nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: background .3s ease-in-out;
    cursor:pointer;

}

.btnFANextBlue:hover,a.btnFANextBlue:hover {
    background-color:#ffffff;
    color:#ff8800;

}



.btnFANextPurple,a.btnFANextPurple, a.btnFANextPurple:link, a.btnFANextPurple:visited {
    font-family:Arial, Helvetica, sans-serif;
    display:inline-block;
    color:#FFFFFF;
    background-color: #951B81;
    font-size:15px;
    text-align:center;
    padding-left:10px;
    padding-right:10px;
    padding-top:2px;
    padding-bottom:2px;
    text-decoration:none;
    margin-left:0;
    margin-top:0px;
    margin-bottom:5px;
    border:1px solid #951B81;
    white-space:nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: background .3s ease-in-out;
    cursor:pointer;

}

.btnFANextPurple:hover,a.btnFANextPurple:hover {
    background-color:#ffffff;
    color:#951B81;

}




	
.btnGoToGrey,a.btnGoToGrey, a.btnGoToGrey:link, a.btnGoToGrey:visited {
    font-family:Arial, Helvetica, sans-serif;
    display:inline-block;
    color:#FFFFFF;
    background-color:  #404040;
    font-size:15px;
    text-align:center;
    padding:3px 16px;
    text-decoration:none;
    margin-left:0;
    margin-top:0px;
    margin-bottom:5px;
    border:1px solid #404040;
    white-space:nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: background .3s ease-in-out;
    cursor:pointer;

}

.btnGoToGrey:hover,a.btnGoToGrey:hover {
    background-color:#ffffff;
    color:#606060;
 

}
	

.btnGoToGreyMid,a.btnGoToGreyMid, a.btnGoToGreyMid:link, a.btnGoToGrey:visited {
    font-family:Arial, Helvetica, sans-serif;
    display:inline-block;
    color:#FFFFFF;
    background-color:  #707070;
    font-size:15px;
    text-align:center;
    padding:3px 16px;
    text-decoration:none;
    margin-left:0;
    margin-top:0px;
    margin-bottom:5px;
    border:1px solid #707070;
    white-space:nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: background .3s ease-in-out;
    cursor:pointer;

}

.btnGoToGreyMid:hover,a.btnGoToGreyMid:hover {
    background-color:#ffffff;
    color:#606060;
 

}



.btnInfoBlue{
	background-repeat:no-repeat;
    font-family:Arial, Helvetica, sans-serif;
    display:inline-block;
    color:#FFFFFF;
    background-color: #32ABF9;
    font-size:14px;
    text-align:center;
    padding-left:5px;
    padding-right:5px;
    padding-top:2px;
    padding-bottom:2px;
    text-decoration:none;
    margin-left:0;
    margin-top:0px;
    margin-bottom:2px;
    border:0px solid #cccccc;
    white-space:nowrap;
}


.btnGoToDis,a.btnGoToDis, a.btnGoToDis:link, a.btnGoToDis:visited {

background-repeat:no-repeat;
    font-family:Arial, Helvetica, sans-serif;
    display:inline-block;
    color:#505050;
    background-color: #cccccc;
    font-size:15px;
    text-align:center;
    padding-left:5px;
    padding-right:10px;
    padding-top:5px;
    padding-bottom:5px;
    text-decoration:none;
    margin-left:0;
    margin-top:0px;
    margin-bottom:5px;
    border:1px solid #808080;
    white-space:nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
     transition: background .3s ease-in-out;
     cursor:pointer;
     cursor:text

}

.btnGoToDis:hover,a.btnGoToDis:hover {
 



}

.btnGoTo,a.btnGoTo, a.btnGoTo:link, a.btnGoTo:visited {
background-repeat:no-repeat;
    font-family:Arial, Helvetica, sans-serif;
    display:inline-block;
    color:#FFFFFF;
    background-color: #8AC007;
    font-size:15px;
    text-align:center;
    padding-left:5px;
    padding-right:10px;
    padding-top:5px;
    padding-bottom:5px;
    text-decoration:none;
    margin-left:0;
    margin-top:0px;
    margin-bottom:5px;
    border:1px solid #8AC007;
    white-space:nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
     transition: background .3s ease-in-out;
     cursor:pointer;

}



.btnGoToMail,a.btnGoToMail, a.btnGoToMail:link, a.btnGoToMail:visited {
	background-repeat:no-repeat;
    font-family:Arial, Helvetica, sans-serif;
    display:inline-block;
    color:#FFFFFF;
    background-color: #32ABF9;
    font-size:12px;
    text-align:center;
    padding-left:3px;
    padding-right:3px;
    padding-top:2px;
    padding-bottom:2px;
    text-decoration:none;
    margin-left:0;
    margin-top:0px;
    margin-bottom:2px;
    border:0px solid #cccccc;
    white-space:nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: background .3s ease-in-out;
    cursor:pointer;
}
.btnGoToMail:hover,a.btnGoToMail:hover {
    background-color:#ffffff;
    color: #32ABF9;
	background-repeat:no-repeat;
}



.btnGoToMailCC,a.btnGoToMailCC, a.btnGoToMailCC:link, a.btnGoToMailCC:visited {
	background-repeat:no-repeat;
    font-family:Arial, Helvetica, sans-serif;
    display:inline-block;
    color:#FFFFFF;
    background-color: #C04583;
    font-size:12px;
    text-align:center;
    padding-left:3px;
    padding-right:3px;
    padding-top:2px;
    padding-bottom:2px;
    text-decoration:none;
    margin-left:0;
    margin-top:0px;
    margin-bottom:2px;
    border:0px solid #cccccc;
    white-space:nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: background .3s ease-in-out;
    cursor:pointer;
}
.btnGoToMailCC:hover,a.btnGoToMailCC:hover {
    background-color:#ffffff;
    color: #C04583;
	background-repeat:no-repeat;
}





/* ===================
   Kategorie-Buttons (Kat)
   =================== */
.btnKatGreen,
.btnKatGreyGreen,
.btnKatTaupe,
.btnKatBlue,
.btnKatPink {
  float: left;
  margin-right: 10px;
  font-size: 14px;
  color: #fff;
  padding: 1px 5px;
  text-decoration: none;
  border: 1px solid;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12),
              0 1px 2px rgba(0,0,0,0.24);
  transition: background .3s ease-in-out;
  cursor: pointer;
}
.btnKatGreen { background: #99b2a7; border-color: #719585; }
.btnKatGreyGreen { background: #AAA; border-color: #999; }
.btnKatTaupe { background: #c48d8a; border-color: #c48d8a; }
.btnKatBlue { background: #5e94cf; border-color: #5e94cf; }
.btnKatPink { background: #de849e; border-color: #de849e; }
.btnKatGreen:hover { background: #fff; color: #719585; }
.btnKatGreyGreen:hover { background: #719585; color: #fff; }
.btnKatTaupe:hover { background: #fff; color: #c48d8a; }
.btnKatBlue:hover { background: #fff; color: #5e94cf; }
.btnKatPink:hover { background: #fff; color: #de849e; }

/* ===================
   Utility & Components
   =================== */
.iconSize { font-size: 18px; width: 25px; }
.FormErr { background-color: #dc0000; color: #fff; padding: 5px; }


.divInfoGreen,
.divInfoOrange,
.divInfoRed,
.divInfoGrey,
.divInfoGreyF5,
.divInfoGreyDark,
.divInfoBlue,
.divInfoWhite,
.divInfoPurple {
  padding: 10px;        /* oben/unten 8px, links/rechts 16px */
  margin-bottom: 15px;       /* Abstand nach unten */
}

/* Info-Boxes */
.divInfoGreen   { background: #99CC00; color: #fff; }
.divInfoOrange  { background: #FF9900; color: #fff; }
.divInfoRed     { background: #dc0000; color: #fff; }
.divInfoGrey    { background: #f1f1f1; }
.divInfoGreyF5  { background: #f5f5f5; }
.divInfoGreyDark{ background: #707070; color: #fff; }
.divInfoBlue    { background: #32ABF9; color: #fff; }
.divInfoWhite   { background: #fff; color: #505050; }
.divInfoPurple  { background: #951B81; color: #fff; }



/* Backgrounds */


.bgGreen{
	 background-color:#99CC00;
}

.bgOrange{
	 background-color:#FF9900;
}

.bgGrey{
	 background-color: #c1c1c1;
}




/* Tabellen-Styling */
.FRTableGrauWeissBG tbody tr:nth-child(2n) { background: #f9f9f9; }
.FRTableDashedBorder th, .FRTableDashedBorder td { border-style: dashed; }
.FRTableNoneBorder th, .FRTableNoneBorder td { border-style: none; }
.FRTablePadding { border-spacing: 5px; border-collapse: separate; }
.FRTablePadding th, .FRTablePadding td { padding: 5px; }

/* ===================
   Divider & Lists
   =================== */
.LBlue         { height: 1px; background: #007DC9; margin-bottom: 5px; }
.LGrey         { height: 1px; background: #555; margin-bottom: 5px; }
.LGreyBright   { height: 1px; background: #ccc; margin-bottom: 5px; }
.Ldot          { height: 1px; background-image: url('../images/dots_x.gif'); }

/* ===================
   Border-radius Helpers
   =================== */
/* Alle Eckenrundungen via border-radius; Vendor-Prefixes nicht mehr nötig */
.eckenrundungTopLeft     { border-radius: 5px 0 0 0; }
.eckenrundungTopRight    { border-radius: 0 5px 0 0; }
.eckenrundungBottomLeft  { border-radius: 0 0 0 5px; }
.eckenrundungBottomRight { border-radius: 0 0 5px 0; }
.eckenrundungTop         { border-radius: 5px 5px 0 0; }
.eckenrundungBottom      { border-radius: 0 0 5px 5px; }
.eckenrundungBottomAndRight { border-radius: 0 5px 5px 5px; }
.eckenrundungDiagonal    { border-radius: 5px 0 5px 0; }
.eckenrundung            { border-radius: 5px; }
.eckenrundungLeft        { border-radius: 5px 0 0 5px; }
.eckenrundungRight       { border-radius: 0 5px 5px 0; }

/* ===================
   Back-to-Top Button & Focus
   =================== */
a.totop {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 999;
  font-size: 34px;
  background: #DA291C;
  color: #fff;
  padding: 5px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
a.totop:hover {
  background: #e2271e;
}

a:focus {
  outline: none;
}

/* ===================
   für Download DE FR etc. Kategorien
   =================== */

.btnKatBlue,a.btnKatBlue, a.btnKatBlue:link, a.btnKatBlue:visited {
	float:left;
	margin-right:10px;
	font-size:14px;
	color:#ffffff;
	background-color: #32ABF9;
	padding-left:5px;
	padding-right:5px;
	padding-top:1px;
	padding-bottom:1px;
    display:inline-block;
    text-align:center;
    text-decoration:none;
    border:1px solid #32ABF9;
    white-space:nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: background .3s ease-in-out;
    cursor:pointer;
}

.btnKatBlue:hover,a.btnKatBlue:hover {
    background-color:#ffffff;
    color:#5e94cf;

}


.btnKatGreyBlue,a.btnKatGreyBlue, a.btnKatGreyBlue:link, a.btnKatGreyBlue:visited {
	float:left;
	margin-right:10px;
	font-size:14px;
	color:#ffffff;
	background-color: #AAAAAA;
	padding-left:5px;
	padding-right:5px;
	padding-top:1px;
	padding-bottom:1px;
    display:inline-block;
    text-align:center;
    text-decoration:none;
    border:1px solid #a1a1a;
    white-space:nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: background .3s ease-in-out;
    cursor:pointer;
}

.btnKatGreyBlue:hover,a.btnKatGreyBlue:hover {
    background-color:#32ABF9;
    color:#ffffff;

}

.btnKatTabBlue {
	font-weight:bold;
	color:#32ABF9;
}

.btnKatTabGrey {
	font-weight:normal;
	color:#555555;
}

:root {
  /* Dein kräftiges Grün */
  --brand-green-start:  #8AC007;
  --brand-green-end:    #6E9906;
  /* Dein kräftiges Orange */
  --brand-orange-start: #FF9933;
  --brand-orange-end:   #E68C2B;
  /* Dunkleres Grau für Uebermittlung, wenn nicht bereit */
  --grey-dark-start:    #6c757d;
  --grey-dark-end:      #5a6268;
}

/* ========================
   STATUS-BOXEN (Boot-5)
   ======================== */
.status-box {
  display: flex;
  background-image: linear-gradient(to bottom, #f9f9f9, #ececec);
  border-radius: .5rem;
  overflow: hidden;
  height: 65px;
  margin-bottom: 1rem;
}
.status-indicator {
  flex: 0 0 clamp(250px, 50%, 300px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  padding: 0 1rem;
}
.status-ok {
  background-image: linear-gradient(
    to bottom,
    var(--brand-green-start),
    var(--brand-green-end)
  );
}
.status-open {
  background-image: linear-gradient(
    to bottom,
    var(--brand-orange-start),
    var(--brand-orange-end)
  );
}
.status-greydark {
  background-image: linear-gradient(
    to bottom,
    var(--grey-dark-start),
    var(--grey-dark-end)
  );
}
.status-action {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 1rem;
}
.status-action .btn {
  font-size: .875rem;
}

/* ========================
   DOKUMENT-BOX (Erstbefragung etc.)
   ======================== */
.doc-box {
  display: flex;
  background-image: linear-gradient(to bottom, #f9f9f9, #ececec);
  border-radius: .5rem;
  overflow: hidden;
  margin-bottom: 1rem;
}
.doc-header {
  flex: 0 0 clamp(250px, 50%, 300px);
  display: flex;
  align-items: center;
  padding: .75rem 1rem;

}



/* =============================
   Header-Hintergrund + Overlay
   ============================= */
.lt-header-bg{
    width:100%;
    height:120px;
    position:relative;
    overflow:hidden;

    /* Grundverlauf von links hell nach rechts dunkler */
    background:linear-gradient(
        90deg,
        #c7e7ff 0%,
        #9fd4ff 45%,
        #7bbde9 80%,
        #64a5d5 100%
    );
}

/* Schraeg verlaufende Overlay-Flaechen */
.lt-header-bg::before,
.lt-header-bg::after{
    content:"";
    position:absolute;
    top:0;
    left:-25%;   /* extra breit, damit nichts gekappt wird */
    width:150%;
    height:100%;
    pointer-events:none;
}

.lt-header-bg::before{
    background:linear-gradient(
        120deg,
        rgba(255,255,255,.12) 0 30%,
        transparent 30%
    );
    transform:skewX(-8deg);
}

.lt-header-bg::after{
    background:linear-gradient(
        -60deg,
        rgba(255,255,255,.15) 0 25%,
        transparent 25%
    );
    transform:skewX(8deg);
}

/* Titel – 100 px vom linken Rand, drop-in von oben */
.lt-header-title{
    position:absolute;
    top:35%;                    /* leicht höher als Mitte */
    left:100px;                 /* Abstand vom linken Rand */
    transform:translateY(-40px);/* Start 40 px höher       */
    opacity:0;

    font-size:clamp(2rem,4vw,3rem);
    font-weight:700;
    color:#fff;
    white-space:nowrap;
    transition:opacity .8s ease-out,
               transform .8s ease-out;
}

/* sichtbarer Endzustand */
.lt-header-title.show{
    transform:translateY(0);    /* gleitet nach unten */
    opacity:1;
}

/* =========================================
   Onboarding-Hints (Variante 1 – ohne Zipfel)
   ========================================= */
.help-hint{
    position:absolute;          /* im .lt-header-bg verankert            */
    background:#ffffff;         /* weisse Bubble                         */
    color:#333333;              /* dunkler Text                          */
    font-size:0.85rem;          /* leicht kleiner als Grundschrift       */
    padding:6px 12px;           /* Luft rundum                           */
    border-radius:8px;          /* runde Ecken                           */
    box-shadow:0 2px 6px rgba(0,0,0,.15);  /* dezenter Schatten         */
    pointer-events:none;        /* kein Klick-Ereignis                   */

    /* Animation: Start unsichtbar, leicht verschoben */
    opacity:0;
    transform:translateY(8px);
    transition:opacity .6s ease, transform .6s ease;
}

/* Sichtbar-Zustand wird via JS (addClass 'show') aktiv */
.help-hint.show{
    opacity:1;
    transform:translateY(0);
}

/* -----------------------------------------
   Positions-Presets – nach Bedarf anpassen
   ----------------------------------------- */
#helpMain{  /* oben rechts – Hauptnavigation */
    top:12px;
    right:100px;
}
#helpSub{   /* unten links – Subnavigation   */
    bottom:12px;
    left:100px;
}



/* =============================
   Header-Hintergrund + Overlay in Oliv‑Zitrone
   ============================= */
.lt-header-bg-lime {
    width: 100%;
    height: 120px;
    position: relative;   /* ganz wichtig für das absolute Title-Positioning */
    overflow: hidden;

    background: linear-gradient(
        90deg,
        #9dbf51 0%,
        #b0d37a 45%,
        #c3d973 100%
    );
}

.lt-header-bg-lime::before,
.lt-header-bg-lime::after {
    content: "";
    position: absolute;
    top: 0;
    left: -25%;
    width: 150%;
    height: 100%;
    pointer-events: none;
}

.lt-header-bg-lime::before {
    background: linear-gradient(
        120deg,
        rgba(255,255,255,.12) 0 30%,
        transparent 30%
    );
    transform: skewX(-8deg);
}

.lt-header-bg-lime::after {
    background: linear-gradient(
        -60deg,
        rgba(255,255,255,.15) 0 25%,
        transparent 25%
    );
    transform: skewX(8deg);
}

/* Titel – exakt wie bei der Ursprung‑Version */
.lt-header-bg-lime .lt-header-title {
    position: absolute;
    top: 35%;
    left: 100px;
    transform: translateY(-40px);
    opacity: 0;

    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    transition: opacity .8s ease-out,
                transform .8s ease-out;
}

.lt-header-bg-lime .lt-header-title.show {
    transform: translateY(0);
    opacity: 1;
}









/* =============================
   Header-Hintergrund in Soft‑Purple + Overlay
   ============================= */
.lt-header-bg-purple-soft {
    width: 100%;
    height: 120px;
    position: relative;
    overflow: hidden;

    /* Verlauf von mittlerem Lila zu hellem Flieder, sanftere Abstufung */
    background: linear-gradient(
        90deg,
        #8a44e0 0%,    /* mittleres Purpur */
        #a67fe0 45%,   /* soften Lavendelton */
        #c3afff 80%,   /* zartes Flieder */
        #e9e0ff 100%   /* sehr helles Flieder */
    );
}

.lt-header-bg-purple-soft::before,
.lt-header-bg-purple-soft::after {
    content: "";
    position: absolute;
    top: 0;
    left: -25%;
    width: 150%;
    height: 100%;
    pointer-events: none;
}

.lt-header-bg-purple-soft::before {
    background: linear-gradient(
        120deg,
        rgba(255,255,255,.08) 0 30%,  /* dezenteres Overlay */
        transparent 30%
    );
    transform: skewX(-8deg);
}

.lt-header-bg-purple-soft::after {
    background: linear-gradient(
        -60deg,
        rgba(255,255,255,.10) 0 25%,  /* leichtes Highlight */
        transparent 25%
    );
    transform: skewX(8deg);
}

/* Titel – unveraendert */
.lt-header-bg-purple-soft .lt-header-title {
    position: absolute;
    top: 35%;
    left: 100px;
    transform: translateY(-40px);
    opacity: 0;

    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    transition: opacity .8s ease-out,
                transform .8s ease-out;
}

.lt-header-bg-purple-soft .lt-header-title.show {
    transform: translateY(0);
    opacity: 1;
}


/* =============================
   Header-Hintergrund in Soft‑Mocha + Overlay
   ============================= */
.lt-header-bg-mocha-soft {
    width: 100%;
    height: 120px;
    position: relative;
    overflow: hidden;

    /* Verlauf von etwas hellerer Mokka‑Basis zu zartem Cappuccino */
    background: linear-gradient(
        90deg,
        #6b4a3b 0%,    /* mittleres Mokka‑Braun */
        #8b6f5a 45%,   /* weiches Braun */
        #b3a08a 80%,   /* sanfter Cappuccino */
        #d3c0a3 100%   /* heller Milchschaum */
    );
}

.lt-header-bg-mocha-soft::before,
.lt-header-bg-mocha-soft::after {
    content: "";
    position: absolute;
    top: 0;
    left: -25%;
    width: 150%;
    height: 100%;
    pointer-events: none;
}

.lt-header-bg-mocha-soft::before {
    background: linear-gradient(
        120deg,
        rgba(255,255,255,.08) 0 30%,  /* weniger starkes Overlay */
        transparent 30%
    );
    transform: skewX(-8deg);
}

.lt-header-bg-mocha-soft::after {
    background: linear-gradient(
        -60deg,
        rgba(255,255,255,.10) 0 25%,  /* dezenteres Overlay */
        transparent 25%
    );
    transform: skewX(8deg);
}

/* Titel – wie gewohnt */
.lt-header-bg-mocha-soft .lt-header-title {
    position: absolute;
    top: 35%;
    left: 100px;
    transform: translateY(-40px);
    opacity: 0;

    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    transition: opacity .8s ease-out,
                transform .8s ease-out;
}

.lt-header-bg-mocha-soft .lt-header-title.show {
    transform: translateY(0);
    opacity: 1;
}





/* =============================
   Header-Hintergrund: Dunkel-vorne → Hell-hinten
   ============================= */
.lt-header-bg-gray-contrast {
    width: 100%;
    height: 120px;
    position: relative;
    overflow: hidden;

    /* Verlauf: links dunkel, rechts hell */
    background: linear-gradient(
        90deg,
        #555555 0%,    /* dunkles Graphit */
        #aaaaaa 50%,   /* mittleres Grau */
        #eeeeee 100%   /* sehr helles Silbergrau */
    );
}

.lt-header-bg-gray-contrast::before,
.lt-header-bg-gray-contrast::after {
    content: "";
    position: absolute;
    top: 0;
    left: -25%;
    width: 150%;
    height: 100%;
    pointer-events: none;
}

.lt-header-bg-gray-contrast::before {
    background: linear-gradient(
        120deg,
        rgba(255,255,255,.12) 0 30%,
        transparent 30%
    );
    transform: skewX(-8deg);
}

.lt-header-bg-gray-contrast::after {
    background: linear-gradient(
        -60deg,
        rgba(255,255,255,.15) 0 25%,
        transparent 25%
    );
    transform: skewX(8deg);
}

/* Titel – wie gewohnt */
.lt-header-bg-gray-contrast .lt-header-title {
    position: absolute;
    top: 35%;
    left: 100px;
    transform: translateY(-40px);
    opacity: 0;

    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    transition: opacity .8s ease-out,
                transform .8s ease-out;
}

.lt-header-bg-gray-contrast .lt-header-title.show {
    transform: translateY(0);
    opacity: 1;
}




#jpopOverlay {
    position:fixed;
    display:none; 
	background-color: rgba(0, 0, 0, .6);
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 9999;
}

#jpopDiv {
    position: fixed;
    top: 50%;
    left: 50%;
  /*  width: 400px; 
    margin-left: -200px; 
    height: 300px;
    margin-top: -150px; */
    background: white;
    border-radius: 8px;
    padding: 10px;
    font-family: Arial, Helvetica, sans-serif;
}	


#jpopCloseButton:hover,
#jpopCloseButton:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}


#jpopOverlayTask {
    position: fixed;
    display: none;
    background-color: rgba(0, 0, 0, .6);
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 9999;
}

#jpopDivTask {
    position: fixed;
    /* 
    top: 2.5%;
    left: 2.5%;
	*/
    top: 50%;
    left: 50%;
	transform: translate(-50%, -50%); 

    width: 95%;
    height: 95%;
    background: white;
    border-radius: 8px;
    font-family: Arial, Helvetica, sans-serif;
    display:none;
    overflow: scroll;
}

#jpopContentTask {
    padding: 10px;
}

#jpopCloseButtonTask {
    font-size: 30px;
    text-align: right;
    cursor: pointer;
}

#jpopCloseButtonTask:hover,
#jpopCloseButtonTask:focus {
    color: black;
    text-decoration: none;
}















/* =============================
   Header: Geschnittene Verläufe in Blau + Overlay (150px hoch)
   ============================= */
.header-supplier-blue-skew {
  width: 100%;
  height: 120px;           /* runter auf 150px */
  position: relative;
  overflow: hidden;

  /* sanfter Blauton‑Verlauf */
  background: linear-gradient(
    90deg,
    #c7e7ff 0%,
    #9fd4ff 45%,
    #64a5fa 100%
  );
}

/* Schraeg geschnittene Overlay‑Flaechen */
.header-supplier-blue-skew::before,
.header-supplier-blue-skew::after {
  content: "";
  position: absolute;
  top: 0;
  left: -25%;
  width: 150%;
  height: 100%;
  pointer-events: none;
}

.header-supplier-blue-skew::before {
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0.18) 0% 30%,
    transparent 30%
  );
  transform: skewX(-10deg);
}

.header-supplier-blue-skew::after {
  background: linear-gradient(
    -60deg,
    rgba(255,255,255,0.22) 0% 25%,
    transparent 25%
  );
  transform: skewX(10deg);
}

/* Titel – drop‑in von oben, an neue Höhe angepasst */
.header-supplier-blue-skew .lt-header-title {
  position: absolute;
  top: 60px;               /* statt 40px */
  left: 80px;
  transform: translateY(-20px); /* etwas weniger Versatz */
  opacity: 0;

  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  transition: opacity .8s ease-out,
              transform .8s ease-out;
}

.header-supplier-blue-skew .lt-header-title.show {
  transform: translateY(0);
  opacity: 1;
}







/* =============================
   Basis‑Banner mit Variablen
   ============================= */
.lt-icon-banner {
  /* Default‑Werte, falls nix überschrieben wird */
  --banner-start:   #c7e7ff;
  --banner-mid:     #9fd4ff;
  --banner-end:     #64a5fa;
  --icon-opacity:   0.3;

  width: 100%;
  height: 120px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    90deg,
    var(--banner-start) 0%,
    var(--banner-mid)   45%,
    var(--banner-end)   100%
  );
}

.lt-icon-banner::before,
.lt-icon-banner::after {
  content: "";
  position: absolute;
  top: 0; left: -25%;
  width: 150%; height: 100%;
  pointer-events: none;
}
.lt-icon-banner::before {
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0.12) 0 30%,
    transparent 30%
  );
  transform: skewX(-8deg);
}
.lt-icon-banner::after {
  background: linear-gradient(
    -60deg,
    rgba(255,255,255,0.15) 0 25%,
    transparent 25%
  );
  transform: skewX(8deg);
}

/* Icon als Designelement */
.lt-icon-banner .banner-icon {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%) rotate(-15deg);
  font-size: 6rem;
  color: rgba(255,255,255, var(--icon-opacity));
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

/* Titel – drop‑in Animation */
.lt-icon-banner .lt-header-title {
  position: absolute;
  top: 35%;
  left: 80px;
  transform: translateY(-40px);
  opacity: 0;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  transition: opacity .8s ease-out, transform .8s ease-out;
  z-index: 2;
}
.lt-icon-banner .lt-header-title.show {
  transform: translateY(0);
  opacity: 1;
}

/* =============================
   Modifier: IceBlue
   ============================= */
.lt-icon-banner--iceblue {
  --banner-start: #c7e7ff;
  --banner-mid:   #9fd4ff;
  --banner-end:   #64a5d5;
  --icon-opacity: 0.4; 
   /* nach Bedarf anpassen */
}
/* Modifier für Lime */
.lt-icon-banner--lime {
  --banner-start: #9dbf51;  /* Sample links */
  --banner-mid:   #b0d37a;  /* Zwischenstopp */
  --banner-end:   #c3d973;  /* Sample rechts */
  --icon-opacity: 0.4;     /* gerne anpassen */
}
/* Modifier für Grau */
.lt-icon-banner--gray {
  --banner-start: #555555;  /* dunkles Graphit */
  --banner-mid:   #aaaaaa;  /* mittleres Grau */
  --banner-end:   #dddddd;  /* helles Silbergrau */
  --icon-opacity: 0.5;      /* nach Geschmack anpassen */
}

/* Verbessertes Candy‑Rose‑Schema */
.lt-icon-banner--candyrose {
  --banner-start: #e8c9f7;  /* zartes Flieder-Rosa */
  --banner-mid:   #d99bef;  /* mittleres Candy-Lila */
  --banner-end:   #c96dff;  /* sattes Magenta-Rosa */
  --icon-opacity: 0.5;      /* behält den klaren Kontrast */
}

/* Modifier für Rot‑Style (dc0000) */
.lt-icon-banner--red {
  --banner-start: #ff6666;  /* aufgehellt für sanften Einstieg */
  --banner-mid:   #dc0000;  /* dein Haupt‑Rot */
  --banner-end:   #990000;  /* dunkler Abschluss */
  --icon-opacity: 0.6;      /* Icon‑Deckkraft */
}


/* Modifier für feurigen Verlauf */
.lt-icon-banner--feuer {
  --banner-start: #ffae42;  /* helles Flammen‑Gelb‑Orange */
  --banner-mid:   #ff4500;  /* kräftiges Orange‑Rot */
  --banner-end:   #a80000;  /* tiefes Feuer‑Dunkelrot */
  --icon-opacity: 0.6;      /* Icon‑Deckkraft */
}

/* Modifier für frisches Citrus‑Gelbgrün */
.lt-icon-banner--citrus {
  --banner-start: #f3ffbd;  /* zartes Lemon */  
  --banner-mid:   #c1ff6a;  /* knalliges Yellow‑Green */  
  --banner-end:   #8bee00;  /* sattes Lime‑Grün */  
  --icon-opacity: 0.25;     /* Icon‑Deckkraft */  
}
/* Frischer‑Cremiges Mocha‑Schema */
.lt-icon-banner--mocha {
  --banner-start: #8b6f5a;  /* sanftes Mokka‑Braun */
  --banner-mid:   #b79b82;  /* helles Café‑Beige */
  --banner-end:   #e3d3bf;  /* cremiger Cappuccino */
  --icon-opacity: 0.7;      /* dezente Icon‑Deckkraft */
}
/* Modifier für Purple */
.lt-icon-banner--purple {
  --banner-start: #8a44e0;  /* mittleres Purpur */
  --banner-mid:   #a67fe0;  /* soften Lavendelton */
  --banner-end:   #e9e0ff;  /* sehr helles Flieder */
  --icon-opacity: 0.6;     /* Icon‑Deckkraft */
}

.lt-icon-banner--iceblue-multi {
  --banner-start: #c7e7ff;
  --banner-mid:   #9fd4ff;
  --banner-end:   #64a5d5;
  --icon-opacity: 0.4;
  position: relative;
}

.lt-icon-banner--iceblue-multi .banner-icons {
  display: flex;
  gap: 30px;
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

.lt-icon-banner--iceblue-multi .banner-icons i {
  font-size: 2.8rem;
  color: rgba(255,255,255,var(--icon-opacity));
  opacity: 0;
  transform: translateX(50px);
  animation: flyIn 0.8s ease-out forwards;
}

.lt-icon-banner--iceblue-multi .banner-icons i:nth-child(1) { animation-delay: 0.2s; }
.lt-icon-banner--iceblue-multi .banner-icons i:nth-child(2) { animation-delay: 0.4s; }
.lt-icon-banner--iceblue-multi .banner-icons i:nth-child(3) { animation-delay: 0.6s; }
.lt-icon-banner--iceblue-multi .banner-icons i:nth-child(4) { animation-delay: 0.8s; }
.lt-icon-banner--iceblue-multi .banner-icons i:nth-child(5) { animation-delay: 1.0s; }
.lt-icon-banner--iceblue-multi .banner-icons i:nth-child(6) { animation-delay: 1.2s; }
.lt-icon-banner--iceblue-multi .banner-icons i:nth-child(7) { animation-delay: 1.4s; }

@keyframes flyIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}


/* Post-it Basis */
.postit {
  position: relative;
  display: block;
  padding: 18px 16px 16px 16px;
  background: #fff8c6;                   /* Papierfarbe */
  color: #333;
  border-radius: 6px;
  box-shadow:
    0 8px 18px rgba(0,0,0,.10),          /* weicher Schatten */
    0 2px 4px rgba(0,0,0,.06);
  transform: rotate(-0.6deg);            /* leichter „krummer“ Look */
  border: 1px solid rgba(0,0,0,.06);
}

/* gefaltete Ecke */
.postit::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 32px; height: 32px;
  background: linear-gradient(135deg, rgba(0,0,0,.06), rgba(0,0,0,0));
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  border-top-right-radius: 6px;
}

/* Klebepunkt / Pin */
.postit-pin {
  position: absolute;
  top: -10px; 
  left: 18px;
  font-size: 20px;
  color: #74B2E0; /* dein Wunschblau */
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.25));
  transform: rotate(10deg);
}

/* Titel */
.postit-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 6px 0;
  display: flex; align-items: center; gap: .5rem;
}

/* Link-Stil passend zum Papier */
.postit-link {
  display: inline-flex; align-items: center; gap: .5rem;
  text-decoration: none;
  font-weight: 600;
  color: #2b6cb0;
  border-bottom: 1px dashed rgba(43,108,176,.5);
}
.postit-link:hover { color: #1e4e85; border-bottom-color: currentColor; }

/* sanfter Hover (optional) */
.postit:hover {
  transform: rotate(-0.4deg) translateY(-2px);
  box-shadow:
    0 12px 24px rgba(0,0,0,.12),
    0 3px 6px rgba(0,0,0,.08);
}

/* Farbvarianten */
.postit--yellow { background: #fff8c6; }
.postit--blue   { background: #e6f3ff; }
.postit--green  { background: #eaffd3; }
.postit--rose   { background: #ffeaf5; }

/* Darkmode-Feinschliff (optional*