.some-class {
    property: value !important;
}

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: var(--color-base);
    color: var(--color-text);
    margin: 5px; /* Entfernt Standard-Margin des Browsers */
    padding: 0;
    display: flex; /* Flexbox für zentrierte Ausrichtung */
    justify-content: center; /* Zentriert horizontal */
    align-items: center; /* Zentriert vertikal */
    min-height: 100vh; /* Mindestens die Höhe des Bildschirms */
}
.container {
    width: 100%;
    max-width: 1000px;
    background: var(--color-accent-2);
    padding: 20px;
    box-shadow: 0 4px 8px var(--color-shadow);
    border-radius: 15px;

}

/* Header Styling */
header {
    border-radius: 15px;
    background-color: var(--color-accent-3);
    color: var(--color-text2);
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-container {
    display: flex;
    align-items: center;
    gap: 15px;
    max-width: 1200px;
    width: 100%;
    padding: 0 20px;
}

.profile-photo {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    object-fit: cover;
}

.header-content {
	color: var(--color-text2);
    flex-grow: 1;
}
/* Navigation Links mit Hover und Transition */
nav ul li a {
    color: var(--color-text2);
    text-decoration: none;
    font-weight: bold;
    position: relative;
    padding: 5px 10px;
    transition: color 0.3s ease, background-color 0.3s ease;
}

nav ul li a:hover {
    color: var(--color-text2);
    background-color: var(--base-color);
    border-radius: 5px;
}

/* Unterstreichen beim Hover */
nav ul li a::after {
    text-align: center;
    content: '';
    display: block;
    height: 2px;
    background: var(--color-text2);
    width: 0;
    transition: width 0.3s ease;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

nav ul li a:hover::after {
    width: 80%;
}

/* Aktiver Link (für die aktuelle Seite) */
nav ul li a:active {
    color: var(--color-text2); /* Oder eine andere Farbe, die du bevorzugst */
    background-color: var(--color-bg2); /* Oder eine andere Farbe für die Aktive-Seite-Hervorhebung */
    border-radius: 5px;
    font-weight: bold; /* Oder andere Styles, die du benötigst */
}

/* Entfernt die Punkte vor den Navigationselementen */
nav ul {
    list-style: none; /* Entfernt Standard-Aufzählungszeichen */
    display: flex;
    gap: 2px; /* Abstand zwischen den Links */
    padding: 0;
    margin: 0;
}

/* Main Sections */
main {
    padding: 20px;
}

section {
    margin-bottom: 20px;
}

h1 {
	font-size: 24px;
    margin-bottom: 10px;
    color: var(--color-text2);
	text-align: left;
}

h2 {
	font-size: 24px;
    margin-bottom: 10px;
    color: var(--color-text);
	text-align: center;
}

/* Form */
form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

button {
    background-color: var(--color-button-bg2);
    color: var(--color-button-text2);
    border: none;
    cursor: pointer;
	width: 50%
}

button:hover {
    background-color: var(--color-button-bg); 
}

/* Footer */
footer {
    background-color: var(--color-accent-3);
    color: var(--color-text2);
    text-align: center;
    padding: 10px 0;
    margin-top: 20px;
	border-radius: 15px;
}

.container-form {
	text-align: left;
    width: 100%;
    max-width: 100%;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}
input, textarea {
	background-color: var(--color-button-bg);
    border: 1px solid var(--color-border);
	
}
input, textarea, button {
    width: 90%;
    padding: 10px;
    font-size: 1rem;
    margin-bottom: 15px;
    border-radius: 15px;
    font-size: 16px;
}

.g-recaptcha {
    display: inline-block; /* Sichtbar machen des Captchas */
    margin-bottom: 15px;
}

.thankYouPopup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px; /* Breite anpassen, je nach Bedarf */
    background-color: var(--color-accent-9);
    border: 1px solid var(--color-shadow);
    padding: 20px;
    box-shadow: 0 0 10px var(--color-shadow);
    z-index: 1000;
    display: none; /* initially hidden */
    text-align: center; /* Text zentrieren */
}

#thankYouPopup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px; /* Breite anpassen, je nach Bedarf */
    background-color: var(--color-accent-9);
    border: 1px solid var(--color-shadow);
    padding: 20px;
    box-shadow: 0 0 10px var(--color-shadow);
    z-index: 1000;
    display: none; /* initially hidden */
    text-align: center; /* Text zentrieren */
}

.donate {
    text-align: center;
    margin: 20px 0;
}

section {
    margin-bottom: 20px;
    margin-top: 40px;
	background-color: var(--color-accent-6);
    padding: 20px;
    border: 1px solid var(--color-border); /* Leichte Umrandung hinzufügen */
    box-shadow: 0 4px 8px var(--color-shadow); /* Schatten hinzufügen */
    border-radius: 5px; /* Abgerundete Ecken */
}

.donate-img {
    width: 150px;
    height: auto;
    margin: 10px;
    transition: transform 0.3s ease-in-out;
    border: 1px solid var(--color-border);
    box-shadow: 0 6px 10px var(--color-shadow);
	padding: 10px;
	border-radius:15px;
	
}

.donate-img:hover {
    transform: scale(1.1);
}

.referenzen {
    display: flex;
    flex-wrap: wrap; /* Bilder nebeneinander anordnen */
    justify-content: center; /* Zentriert die Bilder */
}

.referenzen a img {
    width: 120px; /* Breite auf 120 Pixel anpassen */
    height: 120px; /* Höhe auf 120 Pixel anpassen */
    object-fit: cover; /* Verhindert, dass das Bild verzerrt wird */
    margin: 5px; /* Abstand zwischen den Bildern */
    display: inline-block; /* Bilder nebeneinander anordnen */
    text-align: center;
	border-radius: 15px;
}

.referenzen a {
    margin: 5px;
    display: inline-block;
    text-align: center;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.referenzen a:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px var(--color-shadow);
}


.plugintheme {
    display: flex;
    flex-wrap: wrap; /* Bilder nebeneinander anordnen */
    justify-content: center; /* Zentriert die Bilder */
}

.plugintheme a img {
    width: 120px; /* Breite auf 120 Pixel anpassen */
    height: 120px; /* Höhe auf 120 Pixel anpassen */
    object-fit: cover; /* Verhindert, dass das Bild verzerrt wird */
    margin: 5px; /* Abstand zwischen den Bildern */
    display: inline-block; /* Bilder nebeneinander anordnen */
    text-align: center;
	border-radius: 15px;
}

.plugintheme a {
    margin: 5px;
    display: inline-block;
    text-align: center;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.plugintheme a:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px var(--color-shadow);
}


ul {
    list-style-position: inside; /* Punkte innerhalb der Liste platzieren */
    padding-left: 20px; /* Abstand links anpassen */
    margin-left: auto;
    margin-right: auto;
    max-width: 600px; /* Breite der Liste begrenzen */
    text-align: left; /* Text linksbündig lassen */
}

.social-media-buttons {
    display: flex;
    flex-wrap: wrap; /* Flexbox für mobile Ansicht nutzen */
    gap: 5px;         /* Abstand zwischen den Buttons */
    justify-content: center; /* Zentriert die Buttons horizontal */
    align-items: center;   /* Zentriert die Buttons vertikal */
}

.social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 41px;     /* Kleinere Größe */
    height: 41px;    /* Kleinere Größe */
    border-radius: 50%;
    font-size: 20px; /* Kleinere Icon-Größe */
    color: var(--color-text2);
    background-color: var(--color-button-bg2); /* Hauptfarbe */
    transition: background-color 0.3s ease, transform 0.2s ease;
    text-decoration: none;
	
    /* Hintergrund-Schatten für Tiefe */
    box-shadow: 0 6px 4px var(--color-shadow), 0 3px 2px var(--color-shadow);
	
}

.social-btn:hover {
    transform: scale(1.1);
    background-color: var(--color-button-bg); /* Dunklere Farbe beim Hover */
    
    /* Schatten beim Hover */
    box-shadow: 0 6px 10px var(--color-shadow), 0 2px 5px var(--color-shadow);
}

/* Entfernte spezifische Farben für jedes Netzwerk, da jetzt alle gleich sind */
.social-btn.facebook, .social-btn.twitter, .social-btn.instagram, .social-btn.twitch, .social-btn.tiktok, .social-btn.youtube,
.social-btn.steam, .social-btn.discord, .social-btn.guilded, .social-btn.paypal,
.social-btn.email, .social-btn.kofi, .social-btn.patreon, .social-btn.linkedin {
    background-color: var(--color-button-bg2); /* Alle Buttons in der gleichen Farbe */
    text-shadow: 1px 1px 3px var(--color-shadow); /* Schatten für die Icons */
}

.social-btn:hover {
    background-color: var(--color-button-bg); /* Alle Buttons werden beim Hover dunkler */
}

.info {
    display: none; /* Standardmäßig verstecken */
    padding: 10px;
    background-color: var(--color-accent-9);
    border-radius: 15px;
    margin-top: 5px; /* Abstand oben */
	margin-bottom: 5px;
    border: 1px solid var(--color-border);
    box-shadow: 0 4px 8px var(--color-shadow);
    transition: max-height 0.3s ease, opacity 0.3s ease;
    overflow: hidden;
    opacity: 0;
	text-align:left;

}

.info.active {
    display: block;
    max-height: 300px; /* Höhe limitieren */
    opacity: 1;
    transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

.toggle-info {
    margin-left: 10px;
    background-color: var(--color-button-bg2);
    color: var(--color-text2);
    border: 1px solid var(--color-border2);
    box-shadow: 0 4px 8px var(--color-shadow);
    transition: max-height 0.3s ease, opacity 0.3s ease;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 15px;
	width:100%;
    transition: background-color 0.3s ease;
	height: 45px;
}

.toggle-info:hover {
    background-color: var(--color-button-bg);
    border: 1px solid var(--color-border);
    box-shadow: 0 6px 10px var(--color-shadow);
}

/* Stil für den "Zurück nach oben"-Button */
#backToTop {
    display: none; /* Standardmäßig unsichtbar */
    position: fixed; /* Fixierte Position */
    top: 90%; /* Vertikal positioniert */
    left: 90%; /* Horizontal mittig */
    transform: translate(-50%, -50%); /* Exakte Zentrierung */
    background-color: var(--color-button-bg2); /* Fallback-Hintergrundfarbe */
/*    background-image: url('https://www.thodde26.de/images/thodde26.webp'); */ /* Bild einfügen */
/*    background-size: cover; /* Bild vollständig abdecken */
/*    background-position: center; /* Bild zentrieren */
    color: var(--color-icon2); /* Text unsichtbar */
    width: 60px; /* Feste Breite für perfekten Kreis */
    height: 60px; /* Feste Höhe für perfekten Kreis */
    border-radius: 50%; /* Rund */
    border: 3px solid var(--color-button-bg); /* Weiße Umrandung */
    cursor: pointer; /* Hand-Cursor beim Hover */
    z-index: 1000; /* Über anderen Inhalten */
    text-align: center;
    line-height: 100%; /* Zentriert den Button */
    font-size: 24px; /* Icon-Größe */
    justify-content: center; /* Horizontal zentrieren */
    align-items: center; /* Vertikal zentrieren */
    box-shadow: 
        4px 4px 8px var(--color-shadow), /* Dunklerer äußerer Schatten */
        -4px -4px 8px var(--color-text); /* Heller innerer Schatten */
    transition: all 0.3s ease; /* Sanfter Übergang */
}

#backToTop:hover {
    color: var(--color-icon2); /* Text unsichtbar */
    border: 3px solid var(--color-button-bg2); /* Weiße Umrandung */
    background-color: var(--color-button-bg); /* Transparenter dunkler Effekt beim Hover */
    background-blend-mode: darken; /* Bild bleibt sichtbar */
}

/* Pfeil-Symbol hinzufügen */
#backToTop::before {
/*    content: 'fa-chevron-up'; /* Kein Symbol */
}


/* Cookie-Banner-Container */
#cookie-notice {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-accent-4); /* Dunkelgrauer Hintergrund */
    color: var(--color-text2); /* Weiße Schrift */
    padding: 20px;
    border-radius: 10px; /* Abgerundete Ecken */
    box-shadow: 0 4px 6px var(--color-shadow); /* Leichter Schatten */
    text-align: center;
    z-index: 9999;
    max-width: 90%;
    width: 600px;
}

/* Text innerhalb des Cookie-Banners */
#cookie-notice p {
    margin: 0 0 10px 0;
    font-size: 16px;
    line-height: 1.5;
}

/* Buttons im Banner */
#cookie-notice button {
    border: none;
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 15px;
    cursor: pointer;
    margin: 5px;
    transition: all 0.3s ease;
}

/* Akzeptieren-Button */
#cookie-notice .accept-btn {
    background-color: var(--color-button-bg2); /* Dunkelblau */
    color: var(--color-button-text2); /* Weiße Schrift */
}

#cookie-notice .accept-btn:hover {
    background-color: var(--color-button-bg); /* Hellblau */
}

/* Ablehnen-Button */
#cookie-notice .decline-btn {
    background-color: var(--color-button-bg2); /* Hellblau */
    color: var(--color-button-text2); /* Weiße Schrift */
}

#cookie-notice .decline-btn:hover {
    background-color: var(--color-accent-23); /* Beiger Hover-Effekt */
}
		
#cookie-settings-modal {
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--color-accent-4);
	color: #FFF;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 10000;
    border-radius: 15px;
    text-align: center;
    font-size: 14px; /* Größe des Textes */
    max-width: 90%;
    width: 600px;
}
#cookie-settings-modal h2 {
	color: var(--color-button-text2);
    margin-top: 0;
    font-size: 18px;
}
#cookie-settings-modal label {
	color: var(--color-button-text2);
    display: block;
    margin-bottom: 10px;
    font-size: 14px;
}
#cookie-settings-modal button {
    background-color: var(--color-button-bg2); /* Dunkelblau */
    color: var(--color-button-text2); /* Weiße Schrift */
    margin-top: 10px;
    padding: 10px 20px;
    cursor: pointer;
    border: none;
    border-radius: 15px;
}

#cookie-settings-modal button:hover {
    background-color: var(--color-button-bg); /* Helleres Blau */
}

/* Reset-Button */
#cookie-settings-modal .reset-settings-btn {
    background-color: var(--color-button-bg2); /* Hellgrau oder gemäß deinem Farbschema */
    color: var(--color-button-text2); /* Schwarze Schrift oder anderer Kontrast */
    border: 1px solid var(--color-button-border); /* Optionale Umrandung */
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 15px;
    font-size: 16px;
    text-align: center;
}

#cookie-settings-modal .reset-settings-btn:hover {
    background-color: var(--color-accent-23); /* Hintergrundfarbe auf Hover */
    color: var(--color-button-text2); /* Schriftfarbe auf Hover */
}

.cookie-checkbox {
    display: block;
    margin: 10px 0;
    font-size: 14px; /* Größe des Textes */
	color: #000000;
}

.cookie-checkbox input[type="checkbox"] {
    width: 20px; /* Breite der Checkbox */
    height: 20px; /* Höhe der Checkbox */
    margin-right: 10px; /* Abstand zwischen Checkbox und Text */
}
#cookie-alert {
    position: fixed;
    top: 20px;
    left: 20px; /* Platzierung rechts oben */
    background-color: #28a745; /* Grüner Hintergrund für Bestätigung */
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    font-size: 16px;
    font-family: Arial, sans-serif;
    z-index: 1000;
    transition: transform 0.3s ease, opacity 0.3s ease; /* Übergangseffekte */
    transform: translateX(-20px); /* Von der rechten Seite aus */
    opacity: 0; /* Ausgeblendeter Zustand */
}

#cookie-alert.visible {
    transform: translateX(0); /* Schieben ins Sichtbare */
    opacity: 1; /* Sichtbarer Zustand */
}

#cookie-alert.hidden {
    transform: translateX(-20px); /* Schieben aus dem Sichtbaren */
    opacity: 0; /* Ausgeblendeter Zustand */
}

.items {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: fixed;
    left: 30px;
    bottom: 10%; /* Positioniere das Icon 10% über dem unteren Rand */
    z-index: 99999;
}

.items a {
    background: linear-gradient(to right, var(--color-button-bg), var(--color-button-bg2)); /* Verlauf von dunkelgrau nach blau */
    padding: 10px; /* Abstand innerhalb des Kästchens */
    border-radius: 25px; /* Abgerundete Ecken */
    box-shadow: 0 6px 10px var(--color-shadow); /* Schattierung */
    margin-bottom: 8px; /* Abstand zwischen den Buttons */
    display: flex; /* Flexbox für horizontale Ausrichtung von Icon und Text */
    align-items: center; /* Zentriert Icon und Text vertikal */
    text-decoration: none; /* Entfernt Unterstreichung */
    width: 190px; /* Breite */
    height: 40px; /* Höhe */
    justify-content: flex-start; /* Text neben Icon */
    white-space: nowrap; /* Verhindert Umbruch */
    overflow: hidden; /* Verhindert Überlauf */
    text-overflow: ellipsis; /* Zeigt "..." bei Überlauf */
}

.items a:hover {
    background: linear-gradient(to left, var(--color-button-bg), var(--color-button-bg2)); /* Verlauf von dunkelgrau nach blau */
    transition: background-color 0.3s ease;
}

.items i {
    color:  var(--color-text2); /* Helles Blau für die Icons */
    font-size: 24px; /* Icon-Größe */
  /*  box-shadow: 0 4px 6px var(--color-shadow);*/ /* Schatten für die Icons */
    border-radius: 50%; */ Runde Form */
    padding: 5px; /* Abstand um das Icon */
}

.items a:hover i {
    color: var(--color-text2); /* Dunkleres Blau beim Hover */
}

.text {
    color: var(--color-text2); /* Weißer Text */
    font-size: 14px; /* Textgröße */
    margin-left: 10px; /* Abstand zwischen Icon und Text */
    font-weight: bold; /* Fetter Text */
    white-space: nowrap; /* Verhindert Textumbruch */
    overflow: hidden; /* Verhindert Überlauf */
    text-overflow: ellipsis; /* Zeigt "..." an, falls zu lang */
}
code {
		color: var(--color-text);
}

/* Pop-up Styles */
.popup {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Ermöglicht Scrollen für den gesamten Pop-up-Hintergrund */
    background-color: var(--color-accent-6); /* Halbtransparenter Hintergrund */
	color: var(--color-text);
}

.popup-content {
    position: relative;
    margin: 10% auto;
    padding: 20px;
    width: 60%; /* Breite des Pop-ups */
    max-height: 70vh; /* Maximale Höhe des Pop-ups (70% der Ansichtshöhe) */
    overflow-y: auto; /* Aktiviert vertikales Scrollen, wenn nötig */
    background-color: var(--color-accent-5);
    border-radius: 8px;
    box-shadow: 0 4px 8px var(--color-shadow);
	color: var(--color-text);
}

.close {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-contrast); /* Textfarbe schwarz für den Schließen-Button */
}

.close:hover {
    color: var(--color-accent-11);
}

/* Links in der Pop-up-Inhalte */
.popup-content a {
    color: var(--color-text2); /* Textfarbe schwarz für Links */
    text-decoration: underline; /* Entfernt Unterstreichung der Links */
}

.popup-content a:hover {
    color: var(--color-contrast); /* Farbänderung bei Hover, falls gewünscht */
}

.popup .close-popup {
    position: absolute;
    top: 2px; /* Abstand vom oberen Rand des Popups */
    right: 2px; /* Positioniert den Button rechts im Popup */
    width: 20px; /* Größe des Buttons */
    height: 20px; /* Größe des Buttons */
    background: none; /* Hintergrund entfernen */
    border: none; /* Keine Umrandung */
    cursor: pointer; /* Hand-Symbol anzeigen */
    font-size: 16px; /* Größe des "X" */
    color: var(--color-contrast); /* Standardfarbe des "X" */
    transition: color 0.3s ease; /* Animation für Hover */
}

.popup .close-popup::after {
    content: 'X'; /* Zeigt das "X" an */
}

.popup .close-popup:hover {
    color: var(--color-accent-11); /* Farbe des "X" beim Hover */
}

#faq {
    padding: 20px;
}

.faq-item {
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 20px;
    padding-bottom: 15px;
}

.faq-item h3 {
    font-size: 18px;
    color: var(--color-heading-text);
    cursor: pointer;
    margin-bottom: 10px;
}

.faq-item p {
    font-size: 16px;
    color: var(--color-text);
    line-height: 1.6;
}

.faq-item p:first-of-type {
    margin-bottom: 0;
}


        .highlight {
            background-color: var(--color-accent-3);
            border-left: 4px solid var(--color-border);
            padding: 10px;
            margin-bottom: 20px;
        }
        .note {
            font-style: italic;
            color: var(--color-text);
        }
		


/* Desktop Menü */
.desktop-menu {
    display: block; /* Menü immer sichtbar auf Desktop */
}

.mobile-menu {
    display: none; /* Mobile-Menü sichtbar */
    position: relative; /* Positionierung relativ zum Button */
}

.mobile-menu-up {
    display: none; /* Mobile-Menü sichtbar */
    position: relative; /* Positionierung relativ zum Button */
}

#mobile-menu {
    display: block; /* Button sichtbar */
    background: none; /* Button ohne Hintergrundfarbe */
    border: none;
    font-size: 24px;
    cursor: pointer;
}

#mobile-menu-up {
    display: block; /* Button sichtbar */
    background: none; /* Button ohne Hintergrundfarbe */
    border: none;
    font-size: 24px;
    cursor: pointer;
}

#mobile-menu-list {
    display: none; /* Mobile Menü ist standardmäßig unsichtbar */
    list-style: none;
    padding: 0;
    background-color: var(--color-button-bg2); /* Hintergrundfarbe des Menüs */
	color: var(--color-text);
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
}

#mobile-menu-list-up {
    display: none; /* Mobile Menü ist standardmäßig unsichtbar */
    list-style: none;
    padding: 0;
    background-color: var(--color-button-bg2); /* Hintergrundfarbe des Menüs */
	color: var(--color-text);
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
}

#mobile-menu-list.open {
    display: block; /* Mobile Menü wird angezeigt */
}

#mobile-menu-list-up.open {
	position: absolute;
    display: block; /* Mobile Menü wird angezeigt */
    top: 100%;
}


.mode-toggle-button {
  position: fixed; /* Fixiert den Button an einer bestimmten Position */
  top: 20px; /* Abstand vom oberen Rand */
  right: 20px; /* Abstand vom rechten Rand */
  width: 50px; /* Breite des Buttons */
  height: 50px; /* Höhe des Buttons */
  border-radius: 50%; /* Rund machen */
  border: none; /* Entfernt den Standardrahmen */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px; /* Größe des Icons */
  background-color: var(--color-accent-9); /* Helle Hintergrundfarbe */
  color: var(--color-text); /* Text-/Iconfarbe */
  box-shadow: 0 4px 6px var(--color-shadow); /* Schatten */
  cursor: pointer; /* Zeigt an, dass es klickbar ist */
  transition: background-color 0.3s ease, color 0.3s ease; /* Sanfte Übergänge */
  z-index: 1000; /* Stellt sicher, dass der Button immer sichtbar ist */
}

.mode-toggle-button:hover {
  background-color: var(--color-accent-5); /* Etwas dunkler bei Hover */
  color: var(--color-text); /* Farbe des Icons ändern */
}

.mode-toggle-button.dark-mode-button {
  background-color: var(--color-accent-3); /* Dunkler Hintergrund für Dark Mode */
  color: var(--color-text); /* Weißes Icon für Dark Mode */
}

.mode-toggle-button.light-mode-button {
  background-color: var(--color-accent-9); /* Heller Hintergrund für Light Mode */
  color: var(--color-text); /* Dunkles Icon für Light Mode */
}
.rotate-icon {
  transition: transform 0.5s ease; /* Sanfte Animation */
}

.rotate-icon.rotated-dark {
  transform: rotate(0deg); /* 180 Grad Rotation */
}

.rotate-icon.rotated-light {
  transform: rotate(180deg); /* Zurück zur Standardposition */
}

.project {
  margin: 20px 0;
  display: flex;
  align-items: center;
  gap: 15px;
}

.project::before {
  content: attr(data-name) ": " attr(data-percent) "%";
  display: block;
  font-size: 16px;
  margin-right: 10px;
  color: var(--color-text);
}

.status-bar {
  flex: 1;
  height: 30px;
  background-color: var(--color-button-bg);
  border: 1px solid var(--color-border);
  border-radius: 15px;
  overflow: hidden;
  position: relative;
}

.status {
  height: 100%;
  background: linear-gradient(to right, red, yellow, green);
  transition: width 0.3s ease;
}

.fa-circle {
  font-size: 24px;
  transition: color 0.3s ease;
}
.status-list {
	list-style: none;
};

.alertbox {
	text-align: center;
	justify-content: center;
	vertical-align: center;
}

#alertbox {
	background-color: var(--color-accent-11); 
	color: var(--color-text2);
	height: 30px;
	margin-bottom: 10px;
	margin-top: 10px;
	font-size: 18px; /* Größe des Icons */
	border-radius: 15px;
}

        .coin {
            width: 135px;
            height: 135px;
            border-radius: 50%; /* Runde Form */
            background-image: url('https://via.placeholder.com/200'); /* Ersetze mit deinem Bild */
            background-size: cover;
            background-position: center;
            box-shadow: 
                0 4px 6px rgba(0, 0, 0, 0.2), /* Weicher Schatten */
                inset 0 2px 4px rgba(255, 255, 255, 0.3), /* Innenlichteffekt */
                inset 0 -2px 4px rgba(0, 0, 0, 0.4); /* Innenschatten für Tiefe */
            border: 3px solid #d4af37; /* Goldener Rand */
            transform: perspective(1000px) rotateX(15deg); /* 3D-Perspektive */
        }

        .coin:hover {
            transform: perspective(1000px) rotateX(15deg) rotateY(15deg); /* Interaktive Bewegung */
        }

  #addLink {
    display: inline-block;
    margin-top: 1em;
    cursor: pointer;
    color: blue;
    text-decoration: underline;
  }
  /* Popup-Styles */
  #popup {
    display: none;
    position: fixed;
    top: 0; left: 0; right:0; bottom:0;
    background: rgba(0,0,0,0.5);
    align-items: center;
    justify-content: center;
  }
  #popupContent {
    background: white;
    padding: 1em;
    border-radius: 5px;
    max-width: 400px;
    width: 90%;
  }
  #popupContent label {
    display: block;
    margin-top: 0.5em;
  }
  #popupContent input, #popupContent textarea {
    width: 100%;
    padding: 0.3em;
  }
  #popupContent button {
    margin-top: 1em;
  }
  
  table { width: 100%; border-collapse: collapse; margin-top: 1em; }
  th, td { border: 1px solid #ccc; padding: 0.4em; text-align: left; }
  th { background: #eee; }

.button-group {
  display: flex;
  gap: 5px; /* Abstand zwischen den Buttons */
  align-items: center;
}

.deleteBtn, .editBtn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1em;
  color: #cc0000;
  transition: color 0.2s ease, transform 0.2s ease;
}

.deleteBtn:hover, .editBtn:hover {
  color: #ff0000;
  transform: scale(1.2);
}


#loginBox {
  margin-bottom: 10px;
}
#loginPassword {
  padding: 5px;
}
#loginBtn {
  padding: 5px 10px;
  margin-left: 5px;
}

.button-group {
  display: flex;
  gap: 5px; /* Abstand zwischen den Buttons */
  align-items: center;
}

#about, #socialmedia, #contact, #streams,
#project, #referenzen, #plugintheme, #kalender,
#homepages,#projects, #buymeacoffee {
  position: relative;
  overflow: visible; /* wichtig, damit das Icon über den Rand hinausragen darf */
}

.corner-fixed-image {
  position: absolute;
  top: -30px;
  left: -30px;
  right: 0px;
  width: 80px;
  height: auto;
  pointer-events: auto; /* Klicks nicht blockieren */
  opacity: 1.0; /* Optionaler Transparenz-Effekt */
  border-radius: 50%;
  object-fit: cover;
  background-color: #ffffff;
  border: 4px solid #031a20;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}		

.corner-fixed-image {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.corner-fixed-image:hover {
  transform: scale(1.1) rotate(-5deg);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
  pointer-events: auto; /* Nur nötig, wenn Hover oder Klick funktionieren soll */
}