/* Headerbild */
.header {
  background: url('../images/header.JPG') center top/cover no-repeat;
  height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  color: white;
}
.header::before {
  content: '';
  position: absolute;
  top:0; left:0;
  width:100%; height:100%;
  background: #010e1bd6;
}
.header-content { position: relative; }
.header-buttons .btn { margin: 0 10px; }



.section { padding: 60px 0; }



/*Download-Buttons*/
.download-btn {
  border-width: 2px;
  transition: all 0.3s;
}

.download-btn:hover {
  color: #006FB7;        /* Textfarbe auf Blau */
  border-color: #006FB7; /* Rahmenfarbe auf Blau */
  background-color: #ffffff; /* Hintergrund bleibt weiß */
  text-decoration: none;
}



/* Fokus für Barrierefreiheit */
a:focus { outline: 3px solid #000; outline-offset: 3px; }



/* Skip-Link sichtbar beim Fokussieren */
.visually-hidden-focusable {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.visually-hidden-focusable:focus {
  left: 10px;
  top: 10px;
  width: auto;
  height: auto;
  background: #000;
  color: #fff;
  padding: 5px 10px;
  z-index: 1000;
}


/*CSS Anpassungen abseits Bootstrap---------------*/


/*  Trenner über volle Breite */
.section-divider {
  height: 0.5px; /* Linienhöhe */
  box-shadow: 0 4px 10px rgba(0, 111, 183, 0.4); /* Schatten */
  border: none; /* kein Rahmen */
}



/* Hover-Effekt für Navigation */
.nav-hover {
  position: relative;
  transition: color 0.3s;
}

.nav-hover::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px; /* Abstand unter Text */
  width: 0;
  height: 2px;
  background-color: #006FB7; /* gleiche Farbe wie Button Hover */
  transition: width 0.3s;
}

.nav-hover:hover {
  color: #006FB7; /* Textfarbe beim Hover */
}

.nav-hover:hover::after {
  width: 100%; /* Unterstreichung von links nach rechts */
}

/* Header-Download-Button Hover auf Orange */
.header-buttons .btn-download-orange:hover {
  background-color: #EC6608; /* Orange */
  color: #ffffff;            /* Text weiß */
  border-color: #EC6608;     /* Rahmen optional */
  transition: all 0.3s;
}

/*Footer*/

footer a:hover {
  color: #006FB7; /* entspricht .text-cblue2 */
  transition: color 0.3s;
}

/*Farben*/

.bg-cblue2 {
  background-color:#006FB7;
}
.bg-cblue1grad {
  background-color:#010e1b;
  background-image: var(--bs-gradient);
}
.bg-cblue1 {
  background-color:#010e1b;
}
.bg-cwhite {
  background-color: #F5F5F5;
}
.bg-corange {
  background-color:#EC6608;
}


.text-cblue2 {
  color: #006FB7;
}
.text-cblue1 {
  color: #012e58;
}
.text-cwhite {
  color: #F5F5F5;
}
.text-corange {
  color: #EC6608;
}

/*Buttonform eckig*/
:root {
  --bs-border-radius: 0rem;
  --bs-border-radius-sm: 0rem;
  --bs-border-radius-lg: 0rem;

}


/*Section-Größe*/
.min-vh-50{
  min-height: 50vh;
}

.min-vh-70{
  min-height: 70vh;
}


html {
  scroll-behavior: smooth;
}


















































/*Easteregg*/

.footer-text {
  position: relative;
  display: inline-block;
  cursor: default;
}

.footer-text::after {
  content: "Coded with ❤️ by OliFee";
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  background: #000;
  color: #fff;
  padding: 3px 6px;
  border-radius: 4px;
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease 2s; /* 2s Verzögerung */
  z-index: 10;
}

.footer-text:hover::after {
  opacity: 1;
}