.form-container {
    max-width: 600px; /* Begrenzt die Breite des Formulars */
    margin: 0 auto; /* Zentriert das Formular */
    text-align: center; /* Zentriert den Text */
    font-family: 'PlayfairDisplay', serif; /* Moderne Schriftart */
}

.logo-container {
    margin-bottom: 20px; /* Abstand unter dem Logo */
    text-align: center;
}

.logo {
    max-width: 150px; /* Begrenzt die Größe des Logos */
    height: auto;
  
}

.progress-bar-container {
    background-color: #ddd; /* Hintergrund der Fortschrittsleiste */
    border-radius: 10px;
    padding: 2px; /* Kleiner Abstand für einen "inneren Rand" Effekt */
    margin-bottom: 20px; /* Abstand unter der Fortschrittsleiste */
}

.progress-bar {
    height: 20px;
    width: 0%; /* Initialwert */
    background-color: #4caf50; /* Farbe der Fortschrittsleiste */
    border-radius: 8px; /* Abgerundete Ecken */
}

.packages {
    display: flex;            /* Aktiviert Flexbox */
    justify-content: center;  /* Zentriert die Elemente horizontal */
    flex-wrap: wrap;          /* Erlaubt Elementen, in eine neue Zeile umzubrechen */
    gap: 20px;                /* Definiert den Abstand zwischen den Paketen */
}

.package {
    background-color: #f5f5f5;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 20px;
    border-radius: 5px;
    display: inline-block; 
    flex: 1; /* Jedes Paket nimmt gleichen Platz ein */
    min-width: 5px; /* Minimalbreite für jedes Paket */
    /* Weitere Stile für die Pakete... */
    max-width: 200px; /* Maximale Breite eines Elements */
    text-align: center; /* oder center, je nach Bedarf */
    width: 48%; /* Oder eine beliebige Breite, die für Ihr Design geeignet ist */
    float: left; /* Sorgt dafür, dass die Pakete nebeneinander angezeigt werden */
    margin: 1%; 
}

.package:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.step-title {
    font-family: 'Playfair Display', serif;
    margin-bottom: 15px; /* Abstand unter der Überschrift */
}

.options {
    display: flex;
    justify-content: center; /* Zentriert die Buttons horizontal */
}

.button {
    display: inline-block;
    padding: 10px 20px;
    background: #ffffff;
    color: #6c4f70;
    text-decoration: none;
    border: 3px solid #6c4f70;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s, color 0.3s;
}

.button:hover {
    background-color: #6c4f70;
    color: #ffffff;
}

.button-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around; /* Zentriert die Buttons und verteilt den verfügbaren Platz */
    gap: 10px; /* Fügt einen Abstand zwischen den Buttons hinzu */
}
.button-container .button {
    flex: 1 1 150px; /* Erlaubt den Buttons zu wachsen und schrumpfen, startet bei 150px */
    text-align: center;
    padding: 10px 20px;
    /* Weitere Styles für die Buttons... */
}

.back-button-center {
    display: block; /* Sorgt dafür, dass der Button als Block-Element behandelt wird */
    margin: 20px auto; /* Fügt oben und unten 20px Abstand hinzu und zentriert den Button horizontal */
    text-align: center; /* Zentriert den Text im Button */
}

/* Stile für Smartphones und kleinere Bildschirme */
@media screen and (max-width: 768px) {
    .button-container {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        
    }
    .button-container .button {
        flex-basis: 100%; /* Lässt die Buttons die volle Breite des Containers einnehmen */
    }

    .additional-hours .button {
        display: block; /* Stellt sicher, dass Buttons als Block (untereinander) angezeigt werden */
        width: 80%; /* Setzt eine relative Breite für größere Buttons */
        margin: 10px auto; /* Fügt oberen und unteren Abstand hinzu und zentriert den Button horizontal */
        padding: 15px; /* Erhöht das Padding für größere Touch-Bereiche */
        /* Weitere Styles für die Buttons... */
    }
    .additional-options .button {
        display: block; /* Stellt sicher, dass Buttons als Block (untereinander) angezeigt werden */
        width: 80%; /* Setzt eine relative Breite für größere Buttons */
        margin: 10px auto; /* Fügt oberen und unteren Abstand hinzu und zentriert den Button horizontal */
        padding: 15px; /* Erhöht das Padding für größere Touch-Bereiche */
        /* Weitere Styles für die Buttons... */
    }

    .post-processing .button {
        display: block; /* Stellt sicher, dass Buttons als Block (untereinander) angezeigt werden */
        width: 80%; /* Setzt eine relative Breite für größere Buttons */
        margin: 10px auto; /* Fügt oberen und unteren Abstand hinzu und zentriert den Button horizontal */
        padding: 15px; /* Erhöht das Padding für größere Touch-Bereiche */
        /* Weitere Styles für die Buttons... */
    }

    .image-delivery .button {
        display: block; /* Stellt sicher, dass Buttons als Block (untereinander) angezeigt werden */
        width: 80%; /* Setzt eine relative Breite für größere Buttons */
        margin: 10px auto; /* Fügt oberen und unteren Abstand hinzu und zentriert den Button horizontal */
        padding: 15px; /* Erhöht das Padding für größere Touch-Bereiche */
        /* Weitere Styles für die Buttons... */
    }
    .package {
        width: 100%; /* Nimmt die volle Breite des Bildschirms ein */
        float: none; /* Deaktiviert das Float, sodass die Pakete untereinander angezeigt werden */
        margin: 0 0 20px 0; /* Fügt einen Abstand am unteren Rand jedes Pakets hinzu */
        flex: none;
        /* Weitere Stile für kleinere Bildschirme... */
    }

    .main, .footer {
        padding: 10px;
    }
}

.main-container {
    max-width: 1000px; /* Passen Sie diese Breite nach Bedarf an */
    margin: auto; /* Zentriert den Container horizontal */
    padding: 20px; /* Optional, für etwas Innenabstand */
    text-align: center; /* Zentriert den Text und ggf. Inline-Elemente */
    
}

.summary {
    /* Stile für die Zusammenfassungsbox */
    padding: 20px;
    background-color: #f5f5f5;
    border-radius: 10px;
    margin-top: 20px;
    text-align: left; /* Stellt die linksbündige Ausrichtung des Textes sicher */
}

.summary h2 {
    /* Stil für die Überschrift */
    color: #6c4f70;
}

.summary ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.summary ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ddd;
    padding: 5px;
    margin-bottom: 10px;
}

.summary ul li span {
    display: inline-block;
}
.summary ul li span.description {
    text-align: left;
    flex-grow: 1; /* Nimmt verfügbaren Raum für die Beschreibung ein */
}
.summary ul li span.amount {
    text-align: right;
    width: 100px; /* Feste Breite für Geldbeträge */
    font-weight: bold;
    color: #6b82a8;
}

.total-cost {
    text-align: right;
    margin-top: 20px;
    font-weight: bold;
    color: #6c4f70;
}

.total-cost span {
    color: #6c4f70;
}
.summary .button-container {
    display: flex;
    justify-content: space-between; /* Positioniert die Elemente an den gegenüberliegenden Enden */
    gap: 10px; /* Abstand zwischen den Buttons */
}
.summary button {
    /* Stil für Buttons */
    background-color: #6c4f70;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.summary button:hover {
    /* Hover-Effekt für Buttons */
    background-color: #6b82a8;
}

.test1 {
    text-align: right;
    margin-top: 20px;
    font-weight: bold;
    color: #6c4f70;
}
.footer-note {
    text-align: center;
    font-size: 0.9em; /* Kleine Schriftgröße */
    margin-top: 50px; /* Abstand nach oben */
    margin-bottom: 20px; /* Abstand nach unten */
}

@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.blinking {
    animation: blink 1s linear 2; /* Blinkt für 2 Sekunden */
}

.anfahrtskosten-hinweis {
    color: #6c4f70; /* Dunkelroter Text für Aufmerksamkeit */
    font-size: 14px;
    margin-top: 10px;
}

.original-price {
    text-decoration: line-through;
    color: #777; /* Optional: change color to indicate it's not the current price */
}

.new-price {
    font-weight: bold;
}