@charset "UTF-8";
/* Basis */
html {
  font-size: clamp(14px, calc(1vw + 1rem), 18px);
  scroll-padding-top: 10vh;
  font-family: "DIN Pro"; }

/* Nur zur Sicherheit, dass nirgendwo was anderes gestzt wird */
/*body {
    font-size: 1rem;
}*/
a {
  text-decoration: none;
  color: #1d1762; }

/* Mobile Skala: Faktor ~1.125 */
h6 {
  font-size: 1.125rem; }

h5 {
  font-size: 1.266rem; }

h4 {
  font-size: 1.424rem; }

h3 {
  font-size: 1.602rem; }

h2 {
  font-size: 1.802rem; }

h1 {
  font-size: 2.027rem; }

/* Desktop Skala: Faktor ~1.25 */
@media (min-width: 768px) {
  h6 {
    font-size: 1.25rem; }
  h5 {
    font-size: 1.563rem; }
  h4 {
    font-size: 1.953rem; }
  h3 {
    font-size: 2.441rem; }
  h2 {
    font-size: 3.052rem; }
  h1 {
    font-size: 3.815rem; } }

/* Setzt für jedes Element einzeln die border-box */
* {
  box-sizing: border-box; }

input {
  background: #584982;
  color: white; }

textarea {
  background: #584982;
  color: white; }

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active {
  -webkit-text-fill-color: white !important;
  caret-color: white;
  transition: background-color 9999s ease-out 0s; }

ul,
li {
  line-height: 2.0;
  margin: 0; }

.hyphen {
  hyphens: auto;
  /* Standard */
  -webkit-hyphens: auto;
  /* Safari/iOS */
  -ms-hyphens: auto;
  /* alter IE/Edge */ }

.input-danger {
  border: 2px solid red; }

.home-h1 {
  font-size: 2rem;
  line-height: 1.1; }

.home-h2 {
  font-size: 1.6rem;
  line-height: 1.2; }

.sb {
  background-color: #060F2535; }

.home-h-wrapper {
  max-width: 50vw;
  display: inline-block;
  text-align: right; }

.nav-changes {
  color: #1d1762 !important; }

.home-button-shadow {
  font-weight: 300;
  padding: 0.25em 1em;
  border: none;
  box-shadow: 0 0.2rem 0 rgba(0, 0, 0, 0.25); }
  .home-button-shadow:hover {
    background-color: #1d1762 !important;
    color: white !important;
    box-shadow: none; }

.article-shadow {
  box-shadow: 0.25rem 0.25rem 0 rgba(0, 0, 0, 0.25); }
  .article-shadow:hover {
    box-shadow: none; }

.intro {
  max-width: 60vw; }

.image-container {
  position: relative;
  width: 100%;
  height: 52px;
  overflow: hidden;
  white-space: nowrap;
  background-color: white; }

.carousel-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right, white 0%, transparent 20%, transparent 80%, white 100%);
  z-index: 2; }

.image-carousel {
  position: absolute;
  left: 0%;
  animation: scrollImage 20s linear 1s infinite;
  display: inline-block; }
  .image-carousel img {
    margin-right: 0px;
    width: 150px;
    border-top: 1px solid #c2c2c2;
    border-bottom: 1px solid #c2c2c2;
    border-left: 1px solid #c2c2c2;
    margin-bottom: 2px; }

@keyframes scrollImage {
  100% {
    left: -1950px; } }

.contact-background {
  position: fixed;
  inset: 0;
  /* shorthand für top:0; right:0; bottom:0; left:0 */
  background: black;
  opacity: 0;
  transition: opacity 0.5s ease;
  /* sanftes Überblenden */
  pointer-events: none;
  /* blockiert nichts, solange unsichtbar */ }

.contact-wrapper {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  max-width: 90%;
  max-height: 90%;
  padding: 1rem;
  background: #1d1762;
  color: white;
  border: 2px solid #e2afd2;
  border-radius: 0.5rem;
  opacity: 0;
  transition: opacity 0.5s ease;
  /* sanftes Überblenden */
  pointer-events: none;
  /* blockiert nichts, solange unsichtbar */
  overflow-y: auto; }

.contact-background.visible {
  opacity: 0.2;
  /* Zielzustand */
  pointer-events: auto;
  /* klickbar */ }

.contact-wrapper.visible {
  opacity: 1;
  /* Zielzustand */
  pointer-events: auto;
  /* klickbar */ }

.article-frame-wrapper {
  position: fixed;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 80%;
  display: flex;
  flex-direction: column;
  background: #1d1762;
  border: 2px solid #e2afd2;
  border-radius: 0.5rem;
  opacity: 0;
  transition: opacity 0.5s ease;
  /* sanftes Überblenden */
  pointer-events: none;
  /* blockiert nichts, solange unsichtbar */
  z-index: 1000; }

.article-frame-wrapper.visible {
  opacity: 1;
  /* Zielzustand */
  pointer-events: auto;
  /* klickbar */ }

@keyframes fade-in {
  100% {
    opacity: 0.2; } }

.close {
  animation: fade-out 0.5s; }

@keyframes fade-out {
  100% {
    opacity: 0; } }

.circle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.2rem;
  height: 1.2rem;
  background-color: #9c80ac;
  color: white;
  border-radius: 50%;
  margin-top: -0.6rem; }

.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%231d1762' viewBox='0 0 16 16'%3e%3cpath d='M11 1L3 8l8 7'/%3e%3c/svg%3e"); }

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%231d1762' viewBox='0 0 16 16'%3e%3cpath d='M5 1l8 7-8 7'/%3e%3c/svg%3e"); }

.carousel-indicators [data-bs-target] {
  background-color: #584982;
  /* lila für alle */ }

.carousel-indicators .active {
  background-color: #1d1762;
  /* dunkleres Blau für den aktiven Punkt */ }

.columns-2 {
  column-count: 2;
  column-gap: 2rem; }

.cursor-pointer {
  cursor: pointer; }

.bg-hellrosa {
  background-color: #faeff6; }

.text-hellrosa {
  color: #faeff6; }

.bg-altrosa {
  background-color: #e2afd2; }

.text-altrosa {
  color: #e2afd2; }

.bg-flieder {
  background-color: #B291b9; }

.text-flieder {
  color: #B291b9; }

.bg-lila {
  background-color: #9c80ac; }

.text-lila {
  color: #9c80ac; }

.bg-dunkellila {
  background-color: #584982; }

.text-dunkellila {
  color: #584982; }

.bg-imperial {
  background-color: #1d1762; }

.text-imperial {
  color: #1d1762; }

.bg-red100 {
  background-color: #f36870; }

.text-red100 {
  color: #f36870; }

.bg-red80 {
  background-color: #f7868d; }

.text-red80 {
  color: #f7868d; }

.bg-red60 {
  background-color: #f9a5aa; }

.text-red60 {
  color: #f9a5aa; }

.bg-red40 {
  background-color: #fbc3c6; }

.text-red40 {
  color: #fbc3c6; }

.bg-red20 {
  background-color: #fde1e3; }

.text-red20 {
  color: #fde1e3; }

.bg-special {
  background-color: #AD6D8B; }

.text-special {
  color: #AD6D8B; }

@media (max-width: 767px) {
  .mobile-text {
    font-size: var(--bs-font-size-sm) !important; }
  .mobile-width {
    width: 100% !important; }
  .mobile-logo {
    width: 75vw !important; }
  .input-size {
    width: 90vw;
    font-size: 16px; } }