/* Generiert mit PHP - 19.01.2026 03:02 */

/* ========== Modul: base ========== */
/* Stile für body */
body {
  font-family: Arial, sans-serif; /* Eigenschaft: font-family */
  margin: 0; /* Eigenschaft: margin */
  padding: 0; /* Eigenschaft: padding */
  background-color: #f4f4f4; /* Eigenschaft: background-color */
  color: #212121; /* Eigenschaft: color */
  display: flex; /* Eigenschaft: display */
  flex-direction: column; /* Eigenschaft: flex-direction */
  height: 100vh; /* Eigenschaft: height */
  flex-wrap: nowrap; /* Eigenschaft: flex-wrap */
}

/* Stile für a */
a {
  color: #4CAF50; /* Eigenschaft: color */
  text-decoration: none; /* Eigenschaft: text-decoration */
}

/* Stile für .img */
.img {
  display: flex; /* Eigenschaft: display */
  align-items: center; /* Eigenschaft: align-items */
  justify-content: center; /* Eigenschaft: justify-content */
}

/* Stile für .error-message */
.error-message {
  display: block; /* Eigenschaft: display */
  color: #D32F2F; /* Eigenschaft: color */
  font-size: 0.9em; /* Eigenschaft: font-size */
  margin-bottom: 10px; /* Eigenschaft: margin-bottom */
}

/* ========== Modul: header ========== */
/* Stile für header */
header {
  background-color: #4CAF50; /* Eigenschaft: background-color */
  color: #FFFFFF; /* Eigenschaft: color */
  font-size: 1.2em; /* Eigenschaft: font-size */
}

/* Stile für header .header-container */
header .header-container {
  max-width: 800px; /* Eigenschaft: max-width */
  margin: auto; /* Eigenschaft: margin */
  padding: 20px 5%; /* Eigenschaft: padding */
  display: flex; /* Eigenschaft: display */
  gap: 10px; /* Eigenschaft: gap */
  justify-content: space-between; /* Eigenschaft: justify-content */
}

/* Stile für header .menu-container */
header .menu-container {
  display: flex; /* Eigenschaft: display */
  align-items: center; /* Eigenschaft: align-items */
  gap: 10px; /* Eigenschaft: gap */
}

/* Stile für header .title-container */
header .title-container {
  display: flex; /* Eigenschaft: display */
  align-items: center; /* Eigenschaft: align-items */
}

/* Stile für header a */
header a {
  display: flex; /* Eigenschaft: display */
  align-items: center; /* Eigenschaft: align-items */
}

/* Stile für header a button */
header a button {
  background-color: #f4f4f4; /* Eigenschaft: background-color */
  color: #087F23; /* Eigenschaft: color */
  border: none; /* Eigenschaft: border */
  padding: 10px 20px; /* Eigenschaft: padding */
  font-size: 1em; /* Eigenschaft: font-size */
  cursor: pointer; /* Eigenschaft: cursor */
  border-radius: 5px; /* Eigenschaft: border-radius */
  transition: background-color 0.3s, color 0.3s; /* Eigenschaft: transition */
  margin: 0; /* Eigenschaft: margin */
}

/* Stile für header a button:hover */
header a button:hover {
  background-color: #45a049; /* Eigenschaft: background-color */
  color: #FFFFFF; /* Eigenschaft: color */
}

/* Stile für header a button:hover a */
header a button:hover a {
  color: #FFFFFF; /* Eigenschaft: color */
}

/* Stile für .parent-language-menu */
.parent-language-menu {
  position: relative; /* Eigenschaft: position */
  width: 3em; /* Eigenschaft: width */
  height: 2em; /* Eigenschaft: height */
  margin: 0; /* Eigenschaft: margin */
  padding: 0; /* Eigenschaft: padding */
  min-width: 3.2em; /* Eigenschaft: min-width */
}

/* Stile für .language-menu */
.language-menu {
  width: 3.2em; /* Eigenschaft: width */
  height: 2em; /* Eigenschaft: height */
  position: absolute; /* Eigenschaft: position */
  top: 50%; /* Eigenschaft: top */
  left: 50%; /* Eigenschaft: left */
  transform: translate(-50%, -50%); /* Eigenschaft: transform */
  z-index: 0; /* Eigenschaft: z-index */
}

/* Stile für .button-language-menu .icon */
.button-language-menu .icon {
  position: absolute; /* Eigenschaft: position */
  width: 84%; /* Eigenschaft: width */
  height: 84%; /* Eigenschaft: height */
  top: 6%; /* Eigenschaft: top */
  left: 8%; /* Eigenschaft: left */
  z-index: 1; /* Eigenschaft: z-index */
}

/* Stile für .button-language-menu */
.button-language-menu {
  position: absolute; /* Eigenschaft: position */
  width: 90%; /* Eigenschaft: width */
  height: 90%; /* Eigenschaft: height */
  top: 5%; /* Eigenschaft: top */
  left: 5%; /* Eigenschaft: left */
}

/* Stile für .button-language-menu .flag-german */
.button-language-menu .flag-german {
  display: block; /* Eigenschaft: display */
}

/* Stile für .button-language-menu .flag-uk */
.button-language-menu .flag-uk {
  display: block; /* Eigenschaft: display */
}

/* Stile für .button-language-menu .flag-france */
.button-language-menu .flag-france {
  display: block; /* Eigenschaft: display */
}

/* Stile für .button-language-menu .flag-japan */
.button-language-menu .flag-japan {
  display: block; /* Eigenschaft: display */
}

/* Stile für .scroll-language-menu */
.scroll-language-menu {
  display: none; /* Eigenschaft: display */
}

/* Stile für .scroll-language-menu .flag-german */
.scroll-language-menu .flag-german {
  display: none; /* Eigenschaft: display */
}

/* Stile für .scroll-language-menu .flag-uk */
.scroll-language-menu .flag-uk {
  display: none; /* Eigenschaft: display */
}

/* Stile für .scroll-language-menu .flag-france */
.scroll-language-menu .flag-france {
  display: none; /* Eigenschaft: display */
}

/* Stile für .scroll-language-menu .flag-japan */
.scroll-language-menu .flag-japan {
  display: none; /* Eigenschaft: display */
}

/* Stile für .language-menu:hover .scroll-language-menu */
.language-menu:hover .scroll-language-menu {
  display: block; /* Eigenschaft: display */
  position: absolute; /* Eigenschaft: position */
  width: 100%; /* Eigenschaft: width */
  height: 300%; /* Eigenschaft: height */
  top: 100%; /* Eigenschaft: top */
  left: 0; /* Eigenschaft: left */
}

/* Stile für .language-menu:hover .flag */
.language-menu:hover .flag {
  position: relative; /* Eigenschaft: position */
  display: inline-block; /* Eigenschaft: display */
  width: 90%; /* Eigenschaft: width */
  height: 30%; /* Eigenschaft: height */
  top: 5%; /* Eigenschaft: top */
  left: 5%; /* Eigenschaft: left */
  margin: 0; /* Eigenschaft: margin */
  padding: 0; /* Eigenschaft: padding */
}

/* Stile für .language-menu:hover .flag-german */
.language-menu:hover .flag-german {
  position: relative; /* Eigenschaft: position */
  display: block; /* Eigenschaft: display */
}

/* Stile für .language-menu:hover .flag-uk */
.language-menu:hover .flag-uk {
  position: relative; /* Eigenschaft: position */
  display: block; /* Eigenschaft: display */
}

/* Stile für .language-menu:hover .flag-france */
.language-menu:hover .flag-france {
  position: relative; /* Eigenschaft: position */
  display: block; /* Eigenschaft: display */
}

/* Stile für .language-menu:hover .flag-japan */
.language-menu:hover .flag-japan {
  position: relative; /* Eigenschaft: position */
  display: block; /* Eigenschaft: display */
}

/* ========== Modul: main ========== */
/* Stile für main */
main {
  flex-grow: 1; /* Eigenschaft: flex-grow */
  overflow: auto; /* Eigenschaft: overflow */
}

/* Stile für main .main-limit */
main .main-limit {
  padding: 3% 5%; /* Eigenschaft: padding */
  max-width: 800px; /* Eigenschaft: max-width */
  margin: auto; /* Eigenschaft: margin */
}

/* Stile für main .cont img */
main .cont img {
  width: 100%; /* Eigenschaft: width */
  margin-bottom: 15px; /* Eigenschaft: margin-bottom */
}

/* Stile für main .bt, main a */
main .bt, main a {
  display: block; /* Eigenschaft: display */
  text-decoration: none; /* Eigenschaft: text-decoration */
  color: #4CAF50; /* Eigenschaft: color */
  background-color: white; /* Eigenschaft: background-color */
  border: 1px solid #ddd; /* Eigenschaft: border */
  border-radius: 5px; /* Eigenschaft: border-radius */
  font-size: 1em; /* Eigenschaft: font-size */
  padding: 10px 20px; /* Eigenschaft: padding */
  transition: background-color 0.3s, color 0.3s, transform 0.2s; /* Eigenschaft: transition */
}

/* Stile für main .bt:hover, main a:hover */
main .bt:hover, main a:hover {
  background-color: #45a049; /* Eigenschaft: background-color */
  color: white; /* Eigenschaft: color */
}

/* Stile für main .nav */
main .nav {
  display: flex; /* Eigenschaft: display */
  gap: 10px; /* Eigenschaft: gap */
}

/* Stile für main .disabled-link, main .disabled-link:hover */
main .disabled-link, main .disabled-link:hover {
  color: #a0a0a0 !important; /* Eigenschaft: color */
  background-color: #f5f5f5; /* Eigenschaft: background-color */
  border-color: #e0e0e0; /* Eigenschaft: border-color */
  pointer-events: none; /* Eigenschaft: pointer-events */
  cursor: default; /* Eigenschaft: cursor */
  box-shadow: none; /* Eigenschaft: box-shadow */
  transition: none; /* Eigenschaft: transition */
}

/* Stile für main */
main {
  --tab-unit: 1rem; /* Eigenschaft: --tab-unit */
}

/* Stile für .bold */
.bold {
  font-weight: bold; /* Eigenschaft: font-weight */
}

/* Stile für .margtopnon */
.margtopnon {
  margin-top: 0; /* Eigenschaft: margin-top */
}

/* Stile für .margbotnon */
.margbotnon {
  margin-bottom: 0; /* Eigenschaft: margin-bottom */
}

/* Stile für .addmargtop */
.addmargtop {
  margin-top: 1em; /* Eigenschaft: margin-top */
}

/* Stile für .addmargbot */
.addmargbot {
  margin-bottom: 1em; /* Eigenschaft: margin-bottom */
}

/* Stile für main .mini-info */
main .mini-info {
  font-size: 0.8em; /* Eigenschaft: font-size */
}

/* Stile für main .italic */
main .italic {
  font-style: italic; /* Eigenschaft: font-style */
}

/* Stile für main .tab1 */
main .tab1 {
  margin-left: calc(var(--tab-unit) * 1); /* Eigenschaft: margin-left */
}

/* Stile für main .tab2 */
main .tab2 {
  margin-left: calc(var(--tab-unit) * 2); /* Eigenschaft: margin-left */
}

/* Stile für main .tab3 */
main .tab3 {
  margin-left: calc(var(--tab-unit) * 3); /* Eigenschaft: margin-left */
}

/* Stile für main .tab4 */
main .tab4 {
  margin-left: calc(var(--tab-unit) * 4); /* Eigenschaft: margin-left */
}

/* Stile für .two-columns, .spe-two-columns */
.two-columns, .spe-two-columns {
  column-count: 2; /* Eigenschaft: column-count */
  column-gap: 12%; /* Eigenschaft: column-gap */
}

/* Stile für main .Pipeline */
main .Pipeline {
  display: flex; /* Eigenschaft: display */
  flex-direction: column; /* Eigenschaft: flex-direction */
  gap: 0.8em; /* Eigenschaft: gap */
}

/* ========== Modul: footer ========== */
/* Stile für footer */
footer {
  background-color: #333; /* Eigenschaft: background-color */
  color: #FFFFFF; /* Eigenschaft: color */
  text-align: center; /* Eigenschaft: text-align */
  padding: 10px; /* Eigenschaft: padding */
  bottom: 0; /* Eigenschaft: bottom */
}

/* ========== Modul: base ========== */
@media screen and (max-width: 550px) {
  header h1 {
    font-size: 1.5em; /* Eigenschaft: font-size */
  }
  main {
    --tab-unit: 0.6rem; /* Eigenschaft: --tab-unit */
  }
  header a button {
    font-size: 0.8em; /* Eigenschaft: font-size */
  }
}

@media screen and (max-width: 420px) {
  header h1 {
    font-size: 1.2em; /* Eigenschaft: font-size */
  }
  header a button {
    font-size: 0.6em; /* Eigenschaft: font-size */
  }
}

@media screen and (max-width: 370px) {
  header .menu-container {
    flex-direction: column; /* Eigenschaft: flex-direction */
  }
}

/* ========== ENDE CSS-GENERIERUNG ========== */