body, html {
    font-family: 'Anta', sans-serif;
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;

}
p {
    word-wrap: break-word; /* Ältere Browser */
    overflow-wrap: break-word; /* Standardkonforme Eigenschaft */
    font-family: 'Anta', sans-serif;
}
.logo-container {
    margin-bottom: 20px;
}

.logo-alt {
    max-width: 50px; /* Maximale Breite des Logos */
    height: auto; /* Erhält das Seitenverhältnis des Logos */
    transition: transform 0.3s ease;
}

.container-alt {
   font-family: 'Anta', sans-serif;
    border-radius: 25px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    text-align: center;
    padding: 30px;
    border: 1px solid #ccc;
    background: url('pattern.png'); /* Optional */
    margin-bottom: 30px; /* Abstand zwischen den Containern */
}

.robot-text-alt {
   font-family: 'Anta', sans-serif;
    font-size: 1.3em;
    color: #333;
}

/* Grundstil für den Button */
.modern-btn {
   font-family: 'Anta', sans-serif;
    padding: 10px 20px;
    background-color: #007BFF; /* Hauptfarbe des Buttons */
    color: white;
    border: none;
    border-radius: 5px;
    font-family: Arial, sans-serif;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s, box-shadow 0.3s, transform 0.3s;
    text-align: center;
    text-decoration: none; /* Für den Fall, dass es ein <a>-Tag ist */
    display: inline-block;
}

/* Hover-Effekt für den Button */
.modern-btn:hover {
    background-color: #0056b3; /* Dunklere Schattierung beim Überfahren */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px); /* Leichtes Hochheben des Buttons */
}

/* Aktiver Effekt für den Button (wenn gedrückt) */
.modern-btn:active {
    background-color: #004080; /* Noch dunklere Schattierung beim Klicken */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transform: translateY(1px); /* Leichtes Absenken des Buttons */
}

.timify-button.modern-btn {
   font-family: 'Anta', sans-serif;
    display: block; /* oder 'inline-block', je nach Bedarf */
    width: auto; /* Stellen Sie dies nach Bedarf ein */
    /* Überschreiben Sie weitere spezifische Stile von Timify, falls nötig, mit !important */
    background-color: #007BFF !important; /* Beispiel für das Überschreiben eines Stils */
}

.timify-button.modern-btn:hover {
    /* Ihre Hover-Stile, ggf. mit !important */
}

.timify-button.modern-btn:active {
    /* Ihre Aktive-Stile, ggf. mit !important */
}

td {

    border-radius: 22px;
}

.price-list-container {
font-family: 'Anta', sans-serif;
    max-width: 800px;
    margin: 0 auto;
    padding: 7px;
    text-align: center;
     border-radius: 22px;
}

.alt {
    width: 100%;
<!-- border-collapse: collapse;   hinzufügen falls probleme-->
   margin: 20px 0;
    font-size: 1em;
    border-radius: 22px;
   background-color: rgba(255, 255, 255, 0.23);
   box-shadow: 0 0px 10px rgba(43, 147, 217, 1);
}




.alt th, .alt td {
    padding: 12px 15px;

    text-align: left;
}



.alt tbody tr:hover {
    background-color: #e2e2e2;
}

.alt tbody h2 {
    text-align: left;
    margin-top: 20px;
    margin-bottom: 10px;
}

.alt tbody td {
    vertical-align: top; /* Aligns content at the top of the cell */
}

.alt tbody i {
    font-style: italic;
}

.alt tbody font {
    font-size: 0.9em; /* Adjust font size for <font> elements */
}

.close-button {
font-family: 'Anta', sans-serif;
    position: fixed; /* Fixed position to keep it at the same place */
    top: 20px; /* Distance from the top of the page */
    right: 20px; /* Distance from the right of the page */
    padding: 10px 15px; /* Padding around the X */
    background-color: #888888; /* Modern blue background color */
    color: white; /* White color for the X */
    font-size: 24px; /* Size of the X */
    font-weight: bold; /* Make the X bold */
    text-decoration: none; /* No underline for the link */
    border-radius: 50%; /* Circular shape */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Shadow for depth */
    cursor: pointer; /* Cursor changes to pointer to indicate clickable */
    display: flex; /* Using Flexbox for centering */
    justify-content: center; /* Center X horizontally */
    align-items: center; /* Center X vertically */
    width: 10px; /* Width of the button */
    height: 10px; /* Height of the button */
    transition: background-color 0.3s, transform 0.3s; /* Smooth transition for hover effects */
}

.close-button:hover {
    background-color: #999999; /* Darker shade of blue on hover */
    transform: scale(1.1); /* Slightly increase the size on hover */
}


.buttons-container {
    display: flex; /* Aligns buttons side by side */
    justify-content: center; /* Centers the buttons in the container */
    gap: 10px; /* Space between the buttons */
}

.gray-button {
    padding: 10px 20px; /* Padding around the button text */
    background-color: rgba(128, 128, 128, 0.7); /* Gray color with transparency */
    color: white; /* White text color */
    border: none; /* No border */
    border-radius: 5px; /* Rounded corners */
    font-size: 16px; /* Font size of the button text */
    cursor: pointer; /* Changes cursor to a pointer on hover */
    transition: background-color 0.3s, transform 0.3s; /* Smooth transition for hover effects */
}

.gray-button:hover {
    background-color: rgba(105, 105, 105, 0.7); /* Slightly darker gray on hover */
    transform: translateY(-2px); /* Subtle lift effect on hover */
}




@media (max-width: 600px) {
    .container-alt {
        width: 95%;
    }
}