body {
    font-family: 'Poppins', sans-serif;
    background-image: url('media/background_main.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: scroll;
    color: #333;
    margin: 0;
    padding: 0;
    margin-bottom: 300px;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px;
    text-align: center;
}

h1 {
    font-size: 36px;
    font-weight: 600;
    margin-bottom: 20px;
    color: beige;
    color: #fff;
    background: rgba(0, 0, 0, .6);
    border-radius: 4px;
    width: 100%;
    padding: 10px;
}

#preview-area h1, #modalText h1 {
    background: none;
    color: #000;
}

.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

label {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
}

.form-control {
    font-size: 14px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 100%;
}

select.form-control {
    appearance: none;
    background-color: #fff;
    padding: 10px;
    width: 100%;
}

.submit-btn,
.download-btn {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background-color: #4a90e2;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    cursor: pointer;
    margin-top: 20px; /* Added margin-top to .submit-btn for consistency */
}

.submit-btn:hover,
.download-btn:hover {
    background-color: #3b7ac9;
}

.preview-area,
#story-output {
    margin-top: 20px;
    text-align: left;
    font-size: 16px;
    line-height: 1.6;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 20px;
    border-radius: 10px;
}

.preview-area img,
.generated-image {
    max-width: 100%;
    border-radius: 10px;
}

footer {
    background-color: #f9f9f9;
    padding: 10px 0;
    position: relative;
    bottom: 0;
    width: 100%;
    text-align: center;
    height: 100px;
}

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

footer li {
    display: inline-block;
    margin: 0 10px;
}

footer a {
    text-decoration: none;
    color: #333;
}

.counter {
    position: fixed;
    top: 10px;
    left: 10px;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 10px;
    border-radius: 5px;
    z-index: 1000;
}

[data-tooltip]:before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background-color: #555;
    color: #fff;
    padding: 5px;
    border-radius: 4px;
    font-size: 0.875em;
    display: none;
    z-index: 10;
}

[data-tooltip]:hover:before {
    display: block;
}

.btn {
    margin: 5px;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    background-color: #007bff;
    color: white;
    cursor: pointer;
}

.btn:hover {
    background-color: #0056b3;
}

.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

.active, .accordion:hover {
    background-color: #ccc;
}

.panel {
    /*padding: 0 18px;*/
    /*background: rgba(51, 170, 51, 0.3);*/
    /*color: #fff;*/
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    color: #000;
    background: rgba(255, 255, 255, .8);
    border-radius: 4px;
    padding: 5px 10px;
}

/* Responsive adjustments */
@media screen and (max-width: 1200px) {
    .container,
    h1,
    label,
    .submit-btn,
    .download-btn {
        padding: 35px;
        font-size: calc(1em + 1vw);
        position: relative;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }
}


/*.error {*/
/*    background: red;*/
/*    padding: 20px;*/
/*    margin: auto;*/
/*    color: #ffffff;*/
/*    text-align: center;*/
/*    font-size: 20px;*/
/*    font-weight: bold;*/
/*    position: fixed;*/
/*    width: 100%;*/
/*}*/

/*#counter {*/
/*    display: none*/
/*}*/


.auth-form {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.auth-form .form-group + .form-group {
    margin-top: 15px;
}

.auth-form .submit-btn {
    margin-top: 20px;
    width: 100%;
    box-sizing: border-box; /* Ensures padding doesn't affect width */
}

.auth-form .form-control {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    width: 100%;
}

.auth-form label {
    display: block;
    margin-bottom: 5px;
}

/* You might want to adjust the padding on smaller screens */
@media screen and (max-width: 768px) {
    .auth-form {
        padding: 15px;
    }
}

.form-section {
    margin-bottom: 20px;
    padding: 20px;
    background-color: #f3f3f3; /* Leichter Grauton als Hintergrund */
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Schatten für Tiefe */
}

.form-section h2 {
    margin-bottom: 15px;
    color: #333; /* Dunkle Schrift für den Titel */
}

/* Spezifische Styles für Login */
.login-section {
    background-color: #e3e3ff; /* Leichtes Blau für den Login-Bereich */
}

/* Spezifische Styles für Registrierung */
.registration-section {
    background-color: #ffe3e3; /* Leichtes Rot für den Registrierungsbereich */
}

hr {
    margin-top: 30px;
    margin-bottom: 30px;
    border: none;
    height: 2px;
    background-color: #ccc; /* Trennlinie zwischen Formularen */
}

.account-button {
    background-color: green; /* A color that stands out, matching the close button */
    color: white;
    padding: 10px 20px;
    border-radius: 25px; /* Keeping the consistency with button styles */
    border: none;
    font-size: 16px;
    font-family: 'Arial', sans-serif; /* Consistent font */
    text-align: center;
    position: fixed; /* Fixed position */
    top: 20px; /* Distance from the top */
    right: 20px; /* Distance from the right */
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Consistent shadow */
    transition: background-color 0.3s ease; /* Smooth transition for hover effects */
}

.account-button:hover {
    background-color: lightgreen; /* A darker shade for the hover state */
    color: #000;
}

.registration-benefits {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 20px;
}

.registration-benefits h2 {
    color: #333;
    margin-bottom: 10px;
}

.registration-benefits p {
    color: #555;
}

.registration-benefits ul {
    list-style: inside square;
}

.registration-benefits li {
    margin-bottom: 5px;
    color: #555;
}

.error-message {
    background-color: #f44336;
    color: white;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 4px;
}

.text-muted {
    color: #000;
    background: rgba(255, 255, 255, .8);
    border-radius: 4px;
    width: 100%;
    padding: 5px 10px;
}

/* Du kannst die Farben und das Styling ändern, um sie an dein Design anzupassen */

.startpage-button {
    background-color: green; /* A color that stands out, matching the close button */
    color: white;
    padding: 10px 20px;
    border-radius: 25px; /* Keeping the consistency with button styles */
    border: none;
    font-size: 16px;
    font-family: 'Arial', sans-serif; /* Consistent font */
    text-align: center;
    position: fixed; /* Fixed position */
    top: 20px; /* Distance from the top */
    left: 20px; /* Distance from the right */
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Consistent shadow */
    transition: background-color 0.3s ease; /* Smooth transition for hover effects */
}

.startpage-button:hover {
    background-color: lightgreen; /* A darker shade for the hover state */
    color: #000;
}


@media screen and (max-width: 768px) {
    .container,
    .form-group,
    .preview-area,
    footer {
        width: 100%;
        padding: 0 15px; /* Add padding if needed */
    }

    h1,
    .submit-btn,
    .download-btn {
        font-size: calc(1em + 1vw);
    }

    .form-control,
    .submit-btn,
    .download-btn {
        padding: 10px;
    }

    /* Adjust image styles if necessary */
    .preview-area img,
    .generated-image {
        max-width: 100%;
        height: auto;
    }

    /* Any other styles that need to be adjusted */
}

body {
    font-family: 'Poppins', sans-serif;
    background-image: url('media/background_main.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    color: #333;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box; /* Include padding and border in the element's width */
    text-align: center;
    width: 100%; /* Ensure it doesn't exceed the viewport width */
}

h1 {
    font-size: 2em; /* Use em instead of px for scalability */
    font-weight: 600;
    margin-bottom: 20px;
    color: #fff;
    background: rgba(0, 0, 0, .6);
    border-radius: 4px;
    padding: 10px;
    width: auto; /* Allow h1 to scale with its content */
}

/* ... (rest of the unchanged CSS) ... */

/* Responsive adjustments for all devices */
@media screen and (max-width: 1200px) {
    .container,
    h1,
    label,
    .submit-btn,
    .download-btn {
        padding: 15px;
        font-size: calc(1em + 1vw); /* Adjust font size for smaller devices */
    }

    .form-control,
    .submit-btn,
    .download-btn,
    .btn {
        padding: 10px;
    }
}

@media screen and (max-width: 768px) {
    .container,
    .form-group,
    .preview-area,
    footer,
    .panel,
    .accordion,
    .auth-form,
    .form-section,
    .registration-benefits,
    .error-message,
    .text-muted,
    .startpage-button,
    .account-button {
        padding: 10px; /* Reduce padding on smaller screens */
        width: 100%; /* Maximize width for small screens */
    }

    h1,
    .submit-btn,
    .download-btn,
    .btn,
    .accordion,
    .panel,
    .auth-form label,
    .form-section h2,
    .registration-benefits h2,
    .error-message {
        font-size: 4vw; /* Make font size responsive */
    }

    .form-control,
    .submit-btn,
    .download-btn,
    .btn,
    .auth-form .submit-btn,
    .startpage-button,
    .account-button {
        padding: 8px; /* Adjust padding for form elements */
    }

    footer ul,
    footer li,
    .counter,
    [data-tooltip]:before,
    .error-message,
    .text-muted {
        display: block; /* Ensure elements don't overflow */
        text-align: center;
    }

    footer a,
    footer p,
    .counter {
        margin: 0 auto; /* Center content */
    }

    .preview-area img,
    .generated-image {
        max-width: 100%; /* Ensure images are responsive */
        height: auto;
    }
}

html,
body {
    max-width: 100%;
    overflow-x: hidden; /* Prevents horizontal scrolling */
    font-size: 16px; /* Base font size */
}

/* Responsive font sizing using viewport width (vw) */
html {
    font-size: calc(1em + 0.5vw);
}

/* Ensures elements are not larger than the viewport */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

h1 {
    font-size: 2em; /* Scales with base font size */
    padding: 10px;
    /* Other styles... */
}

.instruction-panel {
    background: rgba(255, 255, 255, 0.95); /* Leicht transparent für bessere Lesbarkeit */
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 30px; /* Mehr Platz nach unten */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Leichter Schatten für Tiefe */
}

.instruction-heading {
    font-weight: bold;
    color: #333;
    margin-bottom: 15px; /* Platz vor der Liste */
}

.instruction-list {
    list-style-position: inside; /* Punkte innerhalb des Blocks */
    text-align: left; /* Text linksbündig */
    padding-left: 0; /* Entferne Padding links */
}

.instruction-list li {
    margin-bottom: 10px; /* Platz zwischen den Listenelementen */
    line-height: 1.4; /* Bessere Zeilenhöhe für die Lesbarkeit */
    text-align: justify; /* Blocksatz für gleichmäßige Ausrichtung */
}

.panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    background: rgba(255, 255, 255, .8);
    border-radius: 4px;
    padding: 0 10px; /* Set padding to 0 when collapsed */
}

/* Style für den Button */
.accordion {
    background-color: #4CAF50; /* Grüner Hintergrund */
    color: white; /* Weiße Schriftfarbe für Kontrast */
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: center; /* Zentriert den Text im Button */
    outline: none;
    font-size: 18px; /* Größere Schrift für bessere Lesbarkeit */
    transition: 0.4s;
    border-radius: 4px; /* Leichte Rundung der Ecken */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Schatten für mehr Tiefe */
    margin-bottom: 10px; /* Etwas Abstand nach unten */
    border: 1px solid transparent; /* Transparente Grenze für einen gleichmäßigen Übergang */
}

.accordion:hover, .accordion:focus {
    background-color: #45a049; /* Dunklerer Grüntön bei Hover oder Focus */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Größerer Schatten bei Hover */
}

/* Zusätzliche Klasse für den Button, der aktiv ist, um das Aussehen zu ändern */
.accordion.active {
    background-color: #367B35; /* Noch dunklerer Grünton für aktiven Button */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Beibehaltung des Schattens für aktiven Button */
}

/* Stil für den Fokus-Zustand, um die Zugänglichkeit zu verbessern */
.accordion:focus {
    border-color: #fff; /* Weiße Grenze beim Fokussieren für Sichtbarkeit */
    outline: none; /* Entfernt den Standard-Fokus-Umriss */
}

/* Transition für das Ein- und Ausklappen */
.panel {
    transition: max-height 0.2s ease-out;
}

/* Style für das Select-Feld */
select {
    -webkit-appearance: none; /* Entfernt die standardmäßige Darstellung auf WebKit-Browsern */
    -moz-appearance: none; /* Entfernt die standardmäßige Darstellung auf Firefox-Browsern */
    appearance: none; /* Standard-Darstellung entfernen */
    background-color: #f8f8f8; /* Hintergrundfarbe */
    border: 1px solid #ddd; /* Rahmenfarbe */
    padding: 10px; /* Innenabstand */
    border-radius: 4px; /* Rundung der Ecken */
    background-image: url('data:image/svg+xml;utf8,<svg fill="black" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>'); /* Pfeil nach unten als Hintergrundbild */
    background-repeat: no-repeat; /* Das Hintergrundbild nicht wiederholen */
    background-position: right 10px center; /* Position des Hintergrundbildes */
    background-size: 12px; /* Größe des Hintergrundbildes */
    display: block; /* Als Block-Element anzeigen, damit es die volle Breite des Containers einnimmt */
    width: 100%; /* Volle Breite */
    color: #333; /* Farbe des Texts */
    font-size: 16px; /* Schriftgröße */
    line-height: 1.5; /* Zeilenhöhe */
    margin: 0; /* Kein Außenabstand */
    cursor: pointer;
}

/* Stil für das Select-Feld beim Fokussieren */
select:focus {
    border-color: #a4d7f5; /* Rahmenfarbe beim Fokussieren */
    outline: none; /* Standardumriss entfernen, um einen blauen Schatten zu vermeiden */
    box-shadow: 0 0 0 2px rgba(164, 215, 245, 0.5); /* Weicher Schatten für bessere Sichtbarkeit beim Fokussieren */
    cursor: pointer;
}


/* ... (rest of the unchanged CSS) ... */

@media screen and (max-width: 768px) {
    /* Adjusts base font size for small screens */
    html {
        font-size: calc(1em + 1vw);
    }

    /* Adjusts styles for mobile devices */
    .container,
    .form-group,
    .preview-area,
    footer {
        padding: 10px;
    }

    h1,
    label,
    .submit-btn,
    .download-btn,
    .btn {
        font-size: 1.5em; /* Scales with base font size */
    }

    .form-control,
    .submit-btn,
    .download-btn,
    .btn {
        padding: 8px;
    }

    .login_page_form {
        position: fixed;
        bottom: 10px;
        z-index: 5;
        width: 100%;
    }

    .account-button {
        position: relative;
        width: 100%;
        top: 0;
        left: 0;
    }

    .modal-content {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }

    .generate_stories_form {
        position: fixed;
        bottom: 10px;
        z-index: 5;
        width: 100%;
    }

    .startpage-button {
        position: relative;
        width: 100%;
        top: 0;
        left: 0;
    }

    /* ... (additional mobile responsive styles) ... */
    /* Responsive Anpassungen für kleinere Geräte */
    .instruction-panel {
        padding: 0px; /* Weniger Polsterung auf kleinen Bildschirmen */
    }

    .instruction-heading {
        font-size: 1.2em; /* Kleinere Schriftgröße für Überschriften */
    }

    .instruction-list {
        font-size: 1em; /* Kleinere Schriftgröße für die Liste */
    }
}

/* Style the tab */
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
    border-right: 1px solid #ccc; /* Add border between buttons */
}

/* Style the active tab button */
.tab button.active {
    background-color: #fff; /* Make the active tab more prominent */
    border-bottom: none; /* Ensure the active tab does not have a bottom border */
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
    background-color: #fff;
}

/* Clear floats after the tab buttons */
.tab:after {
    content: "";
    display: table;
    clear: both;
}

/* ... (rest of the unchanged CSS) ... */

.spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* ... (rest of the unchanged CSS) ... */


#cookieBanner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 10px;
    text-align: center;
    z-index: 1000;
}

#cookieBanner button {
    color: #fff;
    background-color: #f8b400;
    border: none;
    padding: 5px 10px;
    margin-left: 10px;
    border-radius: 5px;
    cursor: pointer;
}

#donate-banner {
    background-color: #f8f8f8; /* Hintergrundfarbe des Banners */
    padding: 10px; /* Innenabstand */
    text-align: center; /* Zentriert den Text und den Button */
    /*position: fixed; !* Fixiert das Banner am oberen Bildschirmrand *!*/
    /*top: 0; !* Positionierung ganz oben *!*/
    /*width: 100%; !* Volle Breite *!*/
    z-index: 1001; /* Stellt sicher, dass das Banner über anderen Elementen liegt */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); /* Leichter Schatten für bessere Abhebung */
    position: fixed;
    left: -100%; /* Startposition außerhalb des Bildschirms */
    top: 0;
    width: 300px; /* Breite des ausgeklappten Banners */
    transition: left 0.3s; /* Animation für das Ausklappen */
}

#donate-banner p {
    margin: 0; /* Entfernt Standard-Außenabstände */
    font-size: 16px; /* Schriftgröße für den Erklärungstext */
}

#donate-button-container {
    margin-top: 10px; /* Abstand zwischen Text und Button */
}

body {
    padding-top: 60px; /* Fügt einen oberen Abstand hinzu, damit der Inhalt unter dem Banner beginnt */
}


#donate-icon {
    position: fixed;
    left: 10px; /* Anpassung für die Positionierung */
    top: 50%;
    transform: translateY(-50%);
    z-index: 1002;
    cursor: pointer;
    font-size: 80px; /* Größere Schriftgröße für das Icon */
    background-color: yellow; /* Hintergrundfarbe des Icons */
    border-radius: 50%; /* Kreisförmiges Icon */
    padding: 10px; /* Innenabstand um das Icon */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); /* Schatten für das Icon */
}


#donate-banner.expanded {
    left: 0; /* Position, wenn das Banner ausgeklappt ist */
}

/* Platzierung und Styling für den Token-Bereich */
.token-display {
    position: fixed;
    top: 20px;
    right: 150px; /* Anpassen, um genügend Abstand zu 'Mein Bereich' zu gewährleisten */
    background-color: #f8f8f8;
    padding: 7px 20px;
    border-radius: 25px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 1001; /* Stellen Sie sicher, dass es über anderen Elementen ist */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
}

.token-count {
    font-size: 16px;
    color: #333;
    margin-right: 10px; /* Fügen Sie etwas Abstand zwischen Text und Icon hinzu */
}

/* Stil für das Icon im Token-Bereich */
.token-icon {
    color: #4CAF50; /* Grüne Farbe für das Icon */
    font-size: 24px;
    margin-left: 10px;
}

@media screen and (max-width: 768px) {
    /* Token-Bereich unter 'Mein Bereich' positionieren für mobile Ansicht */
    .token-display {
        display: none;
    }

    /* Füge die Anzeige der Tokens in den 'Mein Bereich'-Button ein */
    .account-button::after {
        content: 'Tokens: 19'; /* Anzahl der Tokens hier einfügen */
        font-size: 0.8em; /* Kleinere Schriftgröße für die Token-Anzeige */
        color: #fff; /* Farbe der Schrift */
        margin-left: 10px; /* Abstand zwischen Text und Token-Anzeige */
    }

    /* Zusätzliche Anpassungen für den 'Mein Bereich'-Button */
    .account-button {
        padding: 10px 20px; /* Etwas mehr Polsterung für den Button */
        font-size: 1em; /* Angepasste Schriftgröße für den Button */
        display: flex; /* Flex-Container, um Icon und Text anzuordnen */
        align-items: center; /* Zentriere die Inhalte vertikal */
        justify-content: center; /* Zentriere die Inhalte horizontal */
    }
}


#notification-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1002; /* Stellen Sie sicher, dass das Overlay über anderen Elementen liegt */
    display: flex;
    justify-content: center;
    align-items: center;
}

#notification-box {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    text-align: center;
    width: 80%;
    max-width: 400px;
}

#buyTokensButton {
    margin-top: 20px;
}


/* Style für aktiven Tab */
.tab button.active {
    background-color: #4CAF50; /* Grüner Hintergrund für aktiven Tab */
    color: #fff; /* Weiße Schrift */
}

@media screen and (max-width: 768px) {
    /* ... */
    .tab button.active {
        background-color: #fff; /* Weiße Hintergrundfarbe für mobile Ansicht */
        color: #4CAF50; /* Grüne Schriftfarbe für aktiven Tab */
    }
}

.maintenanceContainer {
    font-size: 2em;
    font-weight: 600;
    margin-bottom: 20px;
    color: #fff;
    background: rgba(0, 0, 0, .6);
    border-radius: 4px;
    padding: 50px;
    width: auto;
}


#paypal-button-container table {
    margin: 0 auto;
    width: 100%;
}

.StoryTokensHeadline {
    font-size: 2em;

}

#notification-box .btn {
    display: block;
}

.success-icon-pw-reset {
    font-size: 20px;
    color: #4CAF50;
    margin-bottom: 20px;
    background: rgba(0, 0, 0, 0.8);
    padding: 20px;
}

.success-icon-pw-reset a {
    display: block;
}

.alert-success {
    background: #fff;
    text-align: center;
    color: green;
    padding: 30px;
}

.token-display {
    cursor: pointer;
}


.registration-benefits {
    background-color: #f9f9f9; /* Hintergrundfarbe für die Sektion */
    border-radius: 8px; /* Rundung der Ecken */
    padding: 20px; /* Innerer Abstand für die Sektion */
    margin: 20px 0; /* Außenabstand oben und unten */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Leichter Schatten für Tiefe */
}

.registration-benefits h2 {
    color: #333; /* Dunkle Schriftfarbe für den Titel */
    margin-bottom: 10px; /* Abstand nach dem Titel */
}

.registration-benefits p {
    color: #555; /* Dunkle Schriftfarbe für den Text */
    line-height: 1.6; /* Zeilenhöhe für bessere Lesbarkeit */
    margin-bottom: 15px; /* Abstand nach den Paragraphen */
}

.registration-benefits ul {
    list-style: inside disc; /* Stil der Listenpunkte */
    margin-bottom: 15px; /* Abstand nach der Liste */
}

.registration-benefits li {
    margin-bottom: 5px; /* Abstand zwischen den Listenelementen */
    color: #555; /* Dunkle Schriftfarbe für die Listenelemente */
}

/* Optional: Responsive Anpassungen für kleinere Geräte */
@media screen and (max-width: 768px) {
    .registration-benefits {
        padding: 15px; /* Weniger Innenabstand auf kleineren Bildschirmen */
    }

    .registration-benefits h2, .registration-benefits p, .registration-benefits li {
        font-size: calc(1em + 0.5vw); /* Anpassbare Schriftgröße basierend auf Bildschirmbreite */
    }
}