/* Farb‑ und Layouttuning  ———————————————— */
:root {
  --MeineFarbe: #456789;
  --spot: #B00D17;
  --spot-btn: #ff0000;
  --spot-btn-hover: #B00D17;
  --module: #203864;
  --module-btn: #4e6eab;
  --module-btn-hover: #203864;
  --object: #7F6000;
  --object-btn: #BF9000;
  --object-btn-hover: #7F6000;
  --addon: #003232;
  --addon-btn: #007F7F;
  --addon-btn-hover: #003232;
  --interface: #375623;
  --interface-btn: #80ae61;
  --interface-btn-hover: #375623;
}

/* Layout für Texte ___________________*/

h1 {
    font-size: 40px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: clamp(1.2rem, 2vw + 0.5rem, 3rem);
}


h3 {
  text-transform: uppercase;
  font-size: 2.7em;
  font-weight: normal;
}


/*Überschrift Website*/
.ueberschrift h4{
  margin: 10px;
}

/*Überschrift hinter den Buttons*/
.thumbnails-preview h4 {
  text-transform: uppercase;
}

p /*Alles im Blocksatz*/
{
  text-align: justify;
}

.preview-text{
  margin: 10px;
}

.preview-text p {
  margin: 10px;
}
/*Text für bilder ohne Zoom funktion*/
.no-click p{
  display: none;
}
/*Mauszeiger bleibt gleich ohne Zoom*/
.plus-link p:hover{
  color: inherit;
  cursor: default;
}


/*Single Point of Truth Registerkarte*/
.btn-spot .nav-link {
  border:none;
  color:white;
  background-color: var(--spot);
}
/*Single Point of Truth Registerkarte Aktiv*/
.btn-spot .nav-link.active {
  background-color: var(--spot);
  box-shadow: 0 0 10px var(--spot-btn);  
}

/*Module Registerkarte*/
.btn-module .nav-link{
  border: none;
  color:white;
  background-color: var(--module);
}
/*Module Registerkarte Aktiv*/
.btn-module .nav-link.active {
  background-color: var(--module);
  box-shadow: 0 0 10px var(--module-btn);  
}

/*Objekte Registerkarte*/
.btn-obj .nav-link {
  border: none;
  color:white;
  background-color: var(--object);
}
/*Objekte Registerkarte Aktiv*/
.btn-obj .nav-link.active {
  background-color: var(--object);
  box-shadow: 0 0 10px var(--object-btn);
}

/*Addons Registerkarte*/
.btn-fet .nav-link{
  border: none;
  color:white;
  background-color: var(--addon);
}
/*Addons Registerkarte Aktiv*/
.btn-fet .nav-link.active {
  background-color: var(--addon);
  box-shadow: 0 0 10px var(--addon-btn);
}

/*Schnittstellen Registerkarte*/
.btn-inf .nav-link{
  border: none;
  color:white;
  background-color: var(--interface);
}

/*Schnittstellen Registerkarte Aktiv*/
.btn-inf .nav-link.active{
  background-color: var(--interface);
  box-shadow: 0 0 10px var(--interface-btn);
}


/*Alter Code ------Muss Kontrolliert werden-----*/
.nav-tabs .nav-link.active {
  color:white;
  transition: transform .2s ease, box-shadow .2s ease;
  transition: background-color .2s ease-in-out; /* vendorless fallback */
  -o-transition: background-color .2s ease-in-out; /* opera */
  -ms-transition: background-color .2s ease-in-out; /* IE 10 */
  -moz-transition: background-color .2s ease-in-out; /* Firefox */
  -webkit-transition: background-color .2s ease-in-out; /*safari and chrome */
  transform: translateY(-1px) translateX(-1px);
}

/*Tableiste Farbig machen*/
.tab-indicator {
  height: 5px;
  width: 100%;
  background-color: transparent;
  border-radius: 5px;
  transition: background-color 0.5s ease-in-out;
}

/*Button Layout innerhalb der Registerkarten____________________________________*/

/*Modul farbe*/
.tab-module button {
  background-color: var(--module-btn);
}
.tab-module button:hover {
  background-color: var(--module-btn-hover);
}

/*Objekt farbe*/
.tab-obj button {
  background-color: var(--object-btn);
}
.tab-obj button:hover {
  background-color: var(--object-btn-hover);
}

/*Addons farbe*/
.tab-fet button {
  background-color: var(--addon-btn);
}
.tab-fet button:hover {
  background-color: var(--addon-btn-hover);
}

/*Schnittstellen farbe*/
.tab-inf button {
  background-color: var(--interface-btn);
}
.tab-inf button:hover {
  background-color: var(--interface-btn-hover);
}


.btn-dlg-back {
  position: absolute;
  top: 1vh;   /* Abstand vom unteren Rand */
  right: 5vh;    /* Abstand vom rechten Rand */
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  z-index: 1000; /* Sicherstellen, dass er über anderen Elementen liegt */
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: background-color 0.3s ease;
}



/*Zurück button bei den Bildern*/
.btn-dlg-back {
  background-color: var(--module-btn)
}
.btn-dlg-back:hover {
  background-color: var(--module-btn-hover);
}


.btn {
    color: white;
    transition: transform .8s ease, box-shadow .8s ease;
    transition: background-color .8s ease-in-out; /* vendorless fallback */
    -o-transition: background-color .8s ease-in-out; /* opera */
    -ms-transition: background-color .8s ease-in-out; /* IE 10 */
    -moz-transition: background-color .8s ease-in-out; /* Firefox */
    -webkit-transition: background-color .8s ease-in-out; /*safari and chrome */
    box-shadow: 5px 5px 7px rgba(0,0,0,0.5);
}

.btn:hover {
  color: white;
  transition: transform .2s ease, box-shadow .2s ease;
  transition: background-color .2s ease-in-out; /* vendorless fallback */
  -o-transition: background-color .2s ease-in-out; /* opera */
  -ms-transition: background-color .2s ease-in-out; /* IE 10 */
  -moz-transition: background-color .2s ease-in-out; /* Firefox */
  -webkit-transition: background-color .2s ease-in-out; /*safari and chrome */
  transform: translateY(-2px);
  box-shadow: 5px 5px 7px rgba(0,0,0,1);
}

/*Layout für Bilder ____________________*/

.techdois_logo {
  height: 50px; 
  margin-right: 15px;
}


/* Modal sanfter Slide‑In (ergänzt Bootstrap‑fade) */
.modal.fade .modal-dialog {
  transition: transform .3s ease-out;
  transform: translateY(-25%);
}
.modal.show .modal-dialog {
  transform: translateY(0);
}

.modal-dialog {
    max-height: 100vh;
    margin: 1.75rem auto;
    max-width: min(1200px, clamp(60%, 1200px, 95%)); /* Erlaubt mehr Platz */
    width: 100%;
}

.modal-content {
    max-height: 100vh;
    overflow-y: auto;
}


/* Fester Header */
.site-header {
  height: 90px;
  background: #343a40;
  color: white;
  padding: 1rem;
  top: 0;
  z-index: 9999;
}


/* Fester Footer */
footer{
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  background-attachment: fixed;
  height: 143px; /*Feste größe für unterschiedliche bildschirme*/
  bottom: 0px;
  left: 0px;
  right: 0px;
  margin-bottom: 0px;
  background-color: #333;
  position: static;
}

footer a{
  color: #ddd;
  text-decoration: none;
}

footer a:hover{
  color: #fff;
}


body{
  display: flex;
  min-height: 100vh;
  margin: 0;
  flex-direction: column;
  background-color: #fffcf621;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings:
    "width" 100;
}


button{
  margin-bottom: 20px;
  margin-right: 5px;
  color:white;
}

.btn-header {
  width: 100%;
--bs-btn-padding-x: 0.75rem;
--bs-btn-padding-y: 0.375rem;
--bs-btn-font-family: ;
--bs-btn-font-size: 1rem;
--bs-btn-font-weight: 400;
--bs-btn-line-height: 1.5;
--bs-btn-color: var(--bs-body-color);
--bs-btn-bg: transparent;
--bs-btn-border-width: var(--bs-border-width);
--bs-btn-border-color: transparent;
--bs-btn-border-radius: var(--bs-border-radius);
--bs-btn-hover-border-color: transparent;
--bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
--bs-btn-disabled-opacity: 0.65;
--bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
display: inline-block;
padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
font-family: var(--bs-btn-font-family);
font-size: var(--bs-btn-font-size);
font-weight: var(--bs-btn-font-weight);
line-height: var(--bs-btn-line-height);
color: white;
text-align: center;
text-decoration: none;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
border-radius: var(--bs-btn-border-radius);
background-color: var(--bs-btn-bg);
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}



/* Image lupe */

.img-zoom-wrapper {
position: relative;
display: inline-block;
overflow: hidden;
cursor: pointer;
margin-left: 20px;
width: 500px;
}

.img-zoom-wrapper img {
display: block;
width: 100%;
height: auto;
}

.img-zoom-wrapper .zoom-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 48px;
color: white;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}

.img-zoom-wrapper:hover .zoom-icon {
opacity: 1;
}

.img-zoom-wrapper::before {
content: '';
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.4);
opacity: 0;
transition: opacity 0.3s ease;
}

.img-zoom-wrapper:hover::before {
opacity: 1;
}

.img-thumb {
  border: 3px solid rgb(95, 95, 95);
  border-style: none none solid none;
  border-radius: 8px;
  padding: 3px;
  box-shadow: 0.4rem 0.4rem 0.3rem #dbd7cee1;

  max-width:25%;
  height:auto;
  margin-left:1rem;
  margin-bottom: 10px;
  margin-right: 10px;  
}

.img-thumb img {
  cursor:zoom-in;
}

.img-thumb p {
  display: block;
  margin-bottom: 0px;
  cursor: pointer;  
  text-align: center;
  font-size: 1.3vh;
  margin-top: 4px;
  color: #555;
}

.img-thumb p:hover {
  color: blue;
}

.spot-img{
  border: 3px solid rgb(95, 95, 95);
  border-style: none none solid none;
  border-radius: 8px;
  padding: 3px;
  box-shadow: 0.4rem 0.4rem 0.3rem #dbd7cee1;
}

.spot-img p{
  text-align: center;
  padding-top: 1rem;
  font-size: 1.6vh;
}
.spot-img a {
  color: inherit;
}

.sop-section h2 {
  color: #203864;
  font-weight: 700;
}

.sop-section p {
  font-size: 1.05rem;
  line-height: 1.6;
  color: #333;
}

.sop-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}

.sop-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: wrap;
}

.sop-text {
  flex: 1;
  min-width: 300px;
}

.sop-image-wrapper {
  flex: 0 0 auto;
}

.sop-image {
  width: 300px; /* oder 20% je nach Wunsch */
  height: auto;
  border-radius: 8px;
}



/*Carousel Pfeile ändern gegen eigene*/
.carousel-control-next-icon {
  background-image: url('../img/helper/arrow_right.png');
}

.carousel-control-prev-icon {
  background-image: url('../img/helper/arrow_left.png');
}


/* Carousel Item*/
.xcarousel-item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  overflow: hidden;
}

.carousel-inner {
  margin-bottom: 3px;
}

.carousel-indicators [data-bs-target] {
    background-color: #888; /* Farbe für NICHT-aktive Punkte */
    opacity: 0.5; /* Standard ist oft 0.5 oder weniger */
    transition: background-color 0.3s ease, opacity 0.3s ease;
    border: 1px solid #000;
}
.carousel-indicators .active{
    background-color: rgb(56, 56, 56);
    transition: background-color 0.3s ease;
}

.carousel-item img {
  display: block;
  max-width: 100%;
  max-height: 70vh; /* nie höher als 90% der Viewport-Höhe */
  width: auto;
  height: auto;
  aspect-ratio: 16 / 9; /* optional: erzwingt 16:9-Verhältnis */
  object-fit: contain; /* sorgt für saubere Einpassung */
}

/*das gleiche für handys*/




.modal-body {
  padding: 5px;
}

.no-click img{
  cursor: default;
}
.plus-link img{
  cursor: default;
}

.system-overview {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 90px - 143px);
}


@media (max-width: 1199px) {
  .btn {
    font-size: 0.8rem;
  }
  footer {
    position: static !important; /* oder relative */
  }
}

@media ((max-width: 991px) and (min-width: 768px)) {
  .row>* .btn {
    font-size: 0.6rem;
  }
  footer {
    position: static !important; /* oder relative */
  }
}

@media (max-width: 768px) {
  .sop-image {
    width: 100%;
  }
  .carousel-item img {
    max-width: 100%;
    max-height: 60vh; /* kleinere Höhe auf kleinen Geräten */
  }
  .btn {
    font-size: 1rem;
  }
  .nav-item button {
    margin-top: 5px;
    min-width: 200px;
  }
  footer {
    position: static !important; /* oder relative */
  }
}

/*Alles in spalten anzeigen lassen*/

/* Wrapper: ganze .row */
.button-grid {
  display: flex;
  transition: all 1.5s ease-in-out;
  height: 100%;
}

/*BS5 Unterstrich verschwinden lassen*/
.nav-tabs{
  border: none;
}

/* Anfangszustand: Höhe 0, übergangsbereit */
.collapse-content {
  overflow: hidden;
  height: 0;
  opacity: 0;
  transition: height 0.5s ease, opacity 0.5s ease;
}

/* Sichtbar-Zustand */
.collapse-content.show {
  opacity: 1;
}

#tab-content-area {
  overflow: hidden;
  height: 0;
  opacity: 0;
  transition: height 0.7s ease, opacity 0.7s ease;
}

#tab-content-area.show {
  opacity: 1;
}

.btn-back {
  float: right;
  bottom: 100px;
  background-image: url('../img/back.png');
  background-repeat: none;
  height: 32px;
  width: 32px;
}