@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900; /* Variable font weight range */
}

@font-face {
    font-family: 'Montserrat Italic';
    src: url('fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900; /* Variable font weight range */
    font-style: italic; /* Italic font style */
}

body {
    background-color: #f8f9fa; /* Heller Hintergrund */
    font-family: 'Montserrat', sans-serif; /* Globale Schriftart */
    color: #2c3e50; /* Dunkelgraue Textfarbe */
	text-align: left;
}

a { 
    color: #A63A50;
}

h1, h2, h3, h4, h5, h6 {
	text-align: center;
}

.loader {
    width: 1rem;
    height: 1rem;
    border: 0.15em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border .75s linear infinite;
}

@keyframes spinner-border {
    100% {
        transform: rotate(360deg);
    }
}

.checkmark {
    color: green;
}

.crossmark {
    color: red;
}

.result-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    opacity: 1; /* Header immer sichtbar */
    transition: opacity 0.5s ease; /* Weiche Transition für Anzeige */
    background-color: #e9ecef; /* Hellgrauer Hintergrund für Header */
    padding: 10px;
    border-radius: 5px;
}

.result-header span {
    font-weight: bold;
    text-align: left; /* Linksbündige Header */
}

.result-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* Erlaubt Zeilenumbruch */
    margin-bottom: 10px;
    opacity: 0; /* Anfangs unsichtbar */
    transition: opacity 0.5s ease; /* Weiche Transition für Anzeige */
    background-color: #ffffff; /* Weißer Hintergrund für Ergebniselemente */
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.1); /* Weicher Schatten */
    cursor: pointer; /* Zeiger auf klickbare Elemente */
}

.result-item > * {
    flex: 0 0 auto; /* Standard Flex-Eigenschaften, damit Elemente ihre Größe behalten */
}

.result-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px; /* Feste Breite für Icons */
    margin-right: 10px;
}

.result-points {
    font-weight: bold;
    width: 95px; /* Minimale Breite für Punkte */
    text-align: left; /* Linksbündige Punkt-Header */
}

.result-points-value {
    opacity: 0; /* Anfangs unsichtbar, aber Platz reserviert */
    transition: opacity 0.5s ease; /* Weiche Transition für Anzeige */
}

.result-text {
    flex-grow: 1;
    width: 150px; /* Feste Breite für Text */
    text-align: left; /* Linksbündiger Kriterium-Header */
}

.result-status {
    width: 165px; /* Minimale Breite für Status */
    text-align: left; /* Linksbündiger Ergebnis-Header */
    font-weight: bold;
}

.expand-icon {
    width: 20px; /* Feste Breite für das Ausklapp-Icon */
    text-align: center;
    cursor: pointer; /* Zeiger auf klickbare Elemente */
}

.feedback {
    text-align: center;
    margin-top: 105px; /* Hinzugefügter Abstand zum oberen Rand */
    opacity: 0; /* Anfangs unsichtbar */
    display: none; /* Unsichtbar machen */
    transition: opacity 0.5s ease; /* Weiche Transition für Anzeige */
    background: #fff;
    padding: 50px 70px 50px 70px;
    border-radius: 5px;
    box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.1);
}

.feedback p:first-of-type {
    border-top: 1px solid #e9ecef; /* Oberer Rand zur Abgrenzung */
    padding-top: 15px;
    margin-top: 40px;
}

.emoji {
    font-size: 3rem;
}

.loading-animation {
    font-weight: bold;
}

.disabled-button {
    pointer-events: none; /* Klickereignisse deaktivieren */
    opacity: 0.6; /* Button abdunkeln */
    background-color: grey !important; /* Hintergrundfarbe zu grau ändern */
    color: white !important; /* Textfarbe zu weiß ändern */
    border-color: grey !important; /* Randfarbe zu grau ändern */
}

.jumbotron {
    background-color: #ffffff; /* Primärfarbe für Jumbotron */
    color: #272B3E; /* Blau-Schwarze Textfarbe */
}

.lead {
    margin-top: 30px;
    font-weight: 400 !important;
    color: grey;
	text-align: left;
}

.form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: #a63a50;
    outline: 0;
    box-shadow: 0 0 0 .2rem rgb(166 58 80 / 15%);
}

.btn-check {
    font-family: "Montserrat", Sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
    background-color: #A63A50;
    border-style: solid;
    border-width: 2px 2px 2px 2px;
    border-radius: 3rem 3rem 3rem 3rem;
    border-color: #A63A50;
    padding: 0.85rem 1.85rem 0.85rem 1.85rem;
    transition: .1s;
}

.btn-check:hover {
    background-color: #fff !important;
    color: #A63A50 !important;
    border-color: #A63A50 !important;
    /*transform: scale(1.05);*/
}

.btn.focus, .btn:focus {
    outline: 0;
    box-shadow: 0 0 0 .2rem rgb(166 58 80 / 15%);
}

.expand-content {
    display: none; /* Inhalt zunächst nicht anzeigen */
    padding-top: 10px;
    color: #555; /* Leichte Textfarbe */
    width: 100%; /* Nimmt die gesamte Zeilenbreite ein */
    margin-top: 10px; /* Abstand oberhalb */
    border-top: 1px solid #e9ecef; /* Oberer Rand zur Abgrenzung */
    transition: max-height 0.3s ease; /* Smooth transition */
    overflow: hidden; /* Verhindert Überlauf, wenn ausgeklappt */
    text-align: justify;
}


.footer {
    background-color: #f8f9fa; /* Heller Hintergrund wie im Body */
    padding: 20px 0; /* Abstand oben und unten */
    text-align: center; /* Zentrierter Text */
    color: #2c3e50; /* Dunkelgraue Textfarbe */
    border-top: 1px solid #e9ecef; /* Leichte Trennlinie oben */
    margin-top: 200px;
}

.footer a {
    color: #A63A50; /* Blaue Linkfarbe */
    text-decoration: none; /* Entfernt die Unterstreichung */
    margin: 0 10px; /* Abstand zwischen den Links */
}

.footer a:hover {
    text-decoration: underline; /* Unterstreichung bei Hover */
}

/* Navigationsleiste */
.navbar {
    background-color: #fff; /* Weißer Hintergrund */
    padding: 20px 20px; /* Abstand oben und unten, sowie links und rechts */
    border-bottom: 1px solid #e9ecef; /* Untere Umrandung */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Weicher Schatten */
    position: sticky; /* Fixiert die Navbar oben */
    top: 0; /* Positioniert die Navbar oben auf der Seite */
    z-index: 1000; /* Überlagert andere Elemente */
    display: flex; /* Flexbox verwenden für zentrierte Ausrichtung */
    justify-content: center; /* Zentriere den Inhalt horizontal */
}

.navbar .container {
    display: flex;
    align-items: center;
    justify-content: center; /* Zentriere den Inhalt innerhalb des Containers */
}


#svginlinelogo {
    transition: .1s;
    margin-right: 20px; /* Abstand rechts neben dem Logo */
}

#svginlinelogo:active {
  transform: scale(0.95);
}

#svginlinelogo svg:not(:root) {
    overflow: visible;
}

#svginlinelogo svg {
    color: #272B3E;
    filter: drop-shadow(0px 2px 2px rgb(0 0 0 / 0.2));
}

#svginlinelogo.white svg {
    color: #fff;
}

#svginlinelogo svg g#zwo {
    color: #A63A50;
}

#svginlinelogo:hover svg g#zwo {
    color: #A63A50 !important;
    transition: all 200ms ease-in-out;
}

#svginlinelogo:hover svg g#subline g#bewegt {
    animation: shake2 0.4s;
    animation-fill-mode: forwards; 
}

.beta-tag {
    background-color: #A63A50;  /* Roter Hintergrund */
    color: white;  /* Weiße Schrift */
    font-weight: 500;
    font-size: 16px;  /* Kleinere Schriftgröße */
    padding: 2px 5px;  /* Innenabstand für das Tag */
    position: absolute;  /* Absolute Positionierung */
    top: 0;  /* Oben am übergeordneten Element */
    left: 0;  /* Links am übergeordneten Element */
    transform: translate(-50%, -50%); /* Verschiebung um zentriert oben links zu sein */
    border-radius: 5px;  /* Abgerundete Ecken */
}

/* Ergänze die Positionierung des h1 Elements relativ */
.jumbotron h1 {
    position: relative; /* Damit das Beta-Tag relativ zu diesem h1 positioniert wird */
    display: inline-block; /* Für genauere Positionierung */
    font-size: 2.5rem;
}

.contactbtns {
    display: none; /* Unsichtbar machen */
    opacity: 0; /* Unsichtbar */
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    .feedback {
        padding: 30px 15px 30px 15px;
    }
    .contactbtns .row {
        gap: 10px;
    }
    .lead {
        text-align: justify;
    }
    .jumbotron {
        padding: 0;
        padding-top: 50px;
        padding-bottom: 30px;
    }
    .result-status {
        display: none;
    }
    .result-points {
        width: 65px;
    }
    .beta-tag {
        transform: translate(0, -75%);
    }
  }