/* === Globale Basis-Stile === */
:root {
    /* Helles Theme (Standard) */
    --bg-color: #f4f4f4;
    --text-color: #333;
    --container-bg-color: #fff; 
    --container-bg-color-secondary: #e9ecef; /* Für empfangene Chat-Nachrichten, falls wieder verwendet */
    --border-color: #ddd;
    --link-color: #007bff;
    --link-hover-color: #0056b3;
    --text-color-muted: #6c757d; 
    --text-color-secondary: #555; 

    --header-bg: #333;
    --header-text: #fff;
    --header-accent: #007bff; 

    --button-bg: #007bff;
    --button-text: #fff;
    --button-hover-bg: #0056b3;
    --button-secondary-bg: #6c757d; 
    --button-secondary-hover-bg: #5a6268;

    --table-header-bg: #f2f2f2;
    --table-border-color: #ddd;

    --message-success-bg: #d4edda;
    --message-success-text: #155724;
    --message-success-border: #c3e6cb;
    --message-error-bg: #f8d7da;
    --message-error-text: #721c24;
    --message-error-border: #f5c6cb;
    --message-info-bg: #d1ecf1;
    --message-info-text: #0c5460;
    --message-info-border: #bee5eb;

    --admin-link-color: #28a745;
    --admin-link-hover-color: #218838;
    --admin-header-accent: #28a745;
    --admin-button-bg: #28a745;
    --admin-button-hover-bg: #218838;
}

body.dark-mode {
    /* Dunkles Theme */
    --bg-color: #22272e; 
    --text-color: #c9d1d9; 
    --container-bg-color: #2d333b; 
    --container-bg-color-secondary: #3a3f44; 
    --border-color: #444c56;
    --link-color: #58a6ff; 
    --link-hover-color: #79c0ff;
    --text-color-muted: #8b949e; 
    --text-color-secondary: #b1bac4;

    --header-bg: #1c2128; 
    --header-text: #c9d1d9;

    --button-bg: #238636; 
    --button-text: #fff;
    --button-hover-bg: #2ea043;
    --button-secondary-bg: #484f58;
    --button-secondary-hover-bg: #6e7681;

    --table-header-bg: #373e47;
    --table-border-color: #444c56;

    --message-success-bg: #238636; 
    --message-success-text: #f0f6fc;
    --message-success-border: #2ea043;
    --message-error-bg: #da3633;
    --message-error-text: #f0f6fc;
    --message-error-border: #f85149;
    --message-info-bg: #316dca;
    --message-info-text: #f0f6fc;
    --message-info-border: #409eff;

    --admin-link-color: #3fb950;
    --admin-link-hover-color: #48c75a;
    --admin-header-accent: #3fb950;
    --admin-button-bg: #3fb950;
    --admin-button-hover-bg: #48c75a;
}

body.admin-page { 
    --link-color: var(--admin-link-color);
    --link-hover-color: var(--admin-link-hover-color);
    --header-accent: var(--admin-header-accent);
    --button-bg: var(--admin-button-bg); 
    --button-hover-bg: var(--admin-button-hover-bg);
}
body.admin-page .main-navigation li button#theme-toggle {
    background-color: var(--button-secondary-bg); 
    border-color: var(--button-secondary-bg);
}
body.admin-page .main-navigation li button#theme-toggle:hover {
    background-color: var(--button-secondary-hover-bg);
    border-color: var(--button-secondary-hover-bg);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: var(--bg-color); 
    color: var(--text-color);          
    transition: background-color 0.2s, color 0.2s; 
}

.container {
    width: 90%; 
    max-width: 1100px; 
    margin: 0 auto;   
    padding: 0 15px;  
    box-sizing: border-box;
}

a {
    color: var(--link-color);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
    color: var(--link-hover-color);
}

img {
    max-width: 100%; 
    height: auto;
    display: block; 
}

/* === Header-Styling === */
.site-header {
    background-color: var(--header-bg);
    color: var(--header-text);
    padding: 10px 0;       
    border-bottom: 3px solid var(--header-accent); 
}
.site-header .logo h1 {
    margin: 0;
    font-size: 1.8em;
}
.site-header .logo a {
    color: var(--header-text);
    text-decoration: none;
}
.site-header .header-container {
    display: flex;
    justify-content: space-between; 
    align-items: center;
}

/* === Hauptnavigation === */
.main-navigation ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row; 
    align-items: center;
}
.main-navigation li {
    margin-left: 8px; 
}
.main-navigation li:first-child { 
    margin-left: 0;
}
.main-navigation li a,
.main-navigation li button#theme-toggle {
    display: inline-block;   
    padding: 8px 12px;       
    text-align: center;      
    text-decoration: none;   
    color: var(--button-text);                    
    background-color: var(--button-bg);      
    border: 1px solid var(--button-bg);      
    border-radius: 4px;             
    cursor: pointer;                
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    font-size: 0.9em;               
    white-space: nowrap;            
}
.main-navigation li a:hover,
.main-navigation li button#theme-toggle:hover {
    background-color: var(--button-hover-bg);
    border-color: var(--button-hover-bg);
}
.main-navigation li button#theme-toggle {
    background-color: var(--button-secondary-bg); 
    border-color: var(--button-secondary-bg);
}
.main-navigation li button#theme-toggle:hover {
    background-color: var(--button-secondary-hover-bg);
    border-color: var(--button-secondary-hover-bg);
}

/* === Hauptinhaltsbereich === */
.site-content {
    padding: 20px 0; 
}

/* === Styling für Statusnachrichten === */
.dashboard-message, 
.message-success,
.message-error,
.message-info {
    padding: 10px 15px;
    margin-bottom: 20px;
    border-radius: 4px;
    text-align: center;
    border: 1px solid transparent;
}
.message-success {
    color: var(--message-success-text);
    background-color: var(--message-success-bg);
    border-color: var(--message-success-border);
}
.message-error {
    color: var(--message-error-text);
    background-color: var(--message-error-bg);
    border-color: var(--message-error-border);
}
.message-info {
    color: var(--message-info-text);
    background-color: var(--message-info-bg);
    border-color: var(--message-info-border);
}

/* === Styling für Tabellen === */
table.admin-table, table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    background-color: var(--container-bg-color);
}
table.admin-table th, table.admin-table td, table th, table td {
    border: 1px solid var(--table-border-color);
    padding: 8px;
    text-align: left;
}
table.admin-table th, table th {
    background-color: var(--table-header-bg);
}
.report-new td {
    background-color: var(--message-info-bg) !important; 
    color: var(--message-info-text) !important;
}
body.dark-mode .report-new td { 
    background-color: var(--message-info-bg) !important; 
    color: var(--message-info-text) !important;
}

/* === Styling für Buttons (allgemein und spezifisch) === */
.button, button, input[type="submit"] {
    display: inline-block;
    background-color: var(--button-bg);
    color: var(--button-text);
    padding: 10px 15px;
    text-decoration: none;
    border: none; 
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.2s ease;
    text-align: center; 
    line-height: normal; 
}
.button:hover, button:hover, input[type="submit"]:hover {
    background-color: var(--button-hover-bg);
}
.button-secondary, .button-neutral { 
    background-color: var(--button-secondary-bg);
}
.button-secondary:hover, .button-neutral:hover {
    background-color: var(--button-secondary-hover-bg);
}
.button-delete {
    background-color: #dc3545; 
    color: white; 
}
.button-delete:hover {
    background-color: #c82333;
}
.button-yes {
    background-color: #28a745; 
}
.button-yes:hover {
    background-color: #218838;
}

/* === Login & Formularseiten-Styling === */
.login-container,
.admin-login-container,
.registration-form,
.password-reset-container,
.email-verification-container,
.edit-profile-container {
    max-width: 450px; 
    margin: 50px auto; 
    padding: 30px 40px; 
    background-color: var(--container-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
body.dark-mode .login-container,
body.dark-mode .admin-login-container,
body.dark-mode .registration-form,
body.dark-mode .password-reset-container,
body.dark-mode .email-verification-container,
body.dark-mode .edit-profile-container {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.login-container h2,
.admin-login-container h2,
.registration-form h2,
.password-reset-container h2,
.email-verification-container h2,
.edit-profile-container h2 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 25px;
    font-size: 1.8em;
}

.login-container p,
.admin-login-container p,
.registration-form p,
.password-reset-container p {
    text-align: center;
    color: var(--text-color-secondary);
    margin-top: 20px;
    font-size: 0.9em;
}

.login-container form,
.admin-login-container form,
.registration-form form,
.password-reset-container form,
.edit-profile-container form {
    display: flex;
    flex-direction: column;
}

.login-container form div,
.admin-login-container form div,
.registration-form form div,
.password-reset-container form div,
.edit-profile-container form div {
    margin-bottom: 20px;
}

.login-container form label,
.admin-login-container form label,
.registration-form form label,
.password-reset-container form label,
.edit-profile-container form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 0.9em;
    color: var(--text-color-secondary);
}

.login-container form input,
.admin-login-container form input,
.registration-form form input,
.password-reset-container form input,
.edit-profile-container form input,
.login-container form textarea,
.admin-login-container form textarea,
.registration-form form textarea,
.password-reset-container form textarea,
.edit-profile-container form textarea,
.login-container form select,
.admin-login-container form select,
.registration-form form select,
.password-reset-container form select,
.edit-profile-container form select {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-sizing: border-box; 
    background-color: var(--bg-color); 
    color: var(--text-color);                   
    font-size: 1em; 
    transition: border-color 0.2s, box-shadow 0.2s;
}

.login-container form input:focus,
.admin-login-container form input:focus,
.registration-form form input:focus,
.password-reset-container form input:focus,
.edit-profile-container form input:focus,
.login-container form textarea:focus,
.admin-login-container form textarea:focus,
.registration-form form textarea:focus,
.password-reset-container form textarea:focus,
.edit-profile-container form textarea:focus,
.login-container form select:focus,
.admin-login-container form select:focus,
.registration-form form select:focus,
.password-reset-container form select:focus,
.edit-profile-container form select:focus {
    outline: none; 
    border-color: var(--link-color); 
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2); 
}
body.dark-mode .login-container form input:focus,
body.dark-mode .admin-login-container form input:focus,
body.dark-mode .registration-form form input:focus,
body.dark-mode .password-reset-container form input:focus,
body.dark-mode .edit-profile-container form input:focus,
body.dark-mode .login-container form textarea:focus,
body.dark-mode .admin-login-container form textarea:focus,
body.dark-mode .registration-form form textarea:focus,
body.dark-mode .password-reset-container form textarea:focus,
body.dark-mode .edit-profile-container form textarea:focus,
body.dark-mode .login-container form select:focus,
body.dark-mode .admin-login-container form select:focus,
body.dark-mode .registration-form form select:focus,
body.dark-mode .password-reset-container form select:focus,
body.dark-mode .edit-profile-container form select:focus {
    border-color: var(--link-color);
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.25);
}

.login-container form button[type="submit"],
.admin-login-container form button[type="submit"],
.registration-form form button[type="submit"],
.password-reset-container form button[type="submit"] {
    width: 100%;
    padding: 12px;
    font-size: 1.1em;
    font-weight: bold;
    border: none;
    cursor: pointer;
}

.error-text { 
    color: red; 
    font-size: 0.9em;
    display: block;
    margin-top: 4px;
}

/* === Spezifische Layouts für Seiten === */
.homepage-layout {
    display: flex;
    flex-wrap: wrap; 
    gap: 20px; 
}
.image-to-rate-section {
    flex: 3; 
    box-sizing: border-box;
    min-width: 0; 
}
.sidebar {
    flex: 1; 
    box-sizing: border-box;
    display: flex; 
    flex-direction: column; 
    gap: 20px; 
    min-width: 0; 
}
.sidebar > section {
    width: 100%; 
    box-sizing: border-box; 
}

/* === Unschärfe-Effekt für Gäste === */
.image-blurry-container {
    position: relative; 
    border-radius: 8px; 
    overflow: hidden;   
    background-color: var(--bg-color); 
}
.image-blurry-container img {
    filter: blur(25px) brightness(0.8); 
    transform: scale(1.15); 
    -webkit-filter: blur(25px) brightness(0.8); 
}
.image-blurry-container .blur-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    padding: 20px;
    box-sizing: border-box;
    backdrop-filter: blur(2px); 
    -webkit-backdrop-filter: blur(2px);
}
.image-blurry-container .blur-overlay h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.8em;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}
.image-blurry-container .blur-overlay p {
    margin-bottom: 20px;
    font-size: 1em;
    max-width: 400px;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    color: white; /* Sicherstellen, dass Text weiß ist */
}
.image-blurry-container .blur-overlay .blur-overlay-buttons {
    display: flex;
    gap: 15px;
}
.image-blurry-container .blur-overlay .button {
    margin: 0; 
}

/* === Footer-Styling === */
.site-footer {
    background-color: var(--header-bg); 
    color: var(--header-text);
    padding: 20px 0;
    margin-top: 30px; 
    border-top: 3px solid var(--header-accent);
}
.site-footer .container.footer-content-wrapper {
    display: flex;                
    align-items: center;           
    flex-wrap: wrap;               
    gap: 20px;                     
}
.site-footer .footer-menu {
    /* flex-grow: 1; */
}
.site-footer .footer-menu p {
    margin: 0; 
    font-size: 0.9em;
}
.site-footer .footer-menu a {
    color: var(--header-text); 
    margin: 0 5px; 
}
.site-footer .footer-menu a:hover {
    color: var(--link-hover-color); 
    text-decoration: underline; 
}
.site-footer .footer-banner-slot {
    width: 468px;  
    height: 60px; 
    margin-left: auto; 
    flex-shrink: 0; 
    display: flex;
    align-items: center;       
    justify-content: center; 
}
.site-footer .footer-banner-slot img,
.site-footer .footer-banner-slot a { 
    max-width: 100%; 
    max-height: 100%; 
    display: block; 
}

/* === Jonny der Woche Section === */
.jonny-of-the-week-section {
    text-align: center; 
    background-color: var(--container-bg-color); 
    padding: 15px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
}
.jonny-of-the-week-section h3 {
    margin-top: 0;
    margin-bottom: 10px;
}
.jonny-of-the-week-section p {
    margin-top: 5px;
}

/* === AGE-GATE STYLES === */
#age-gate-overlay {
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85); 
    z-index: 2000; 
    display: none; 
    display: flex;
    align-items: center;
    justify-content: center;
}
.age-gate-modal {
    background-color: var(--container-bg-color, #fff);
    color: var(--text-color, #333);
    padding: 30px 40px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    text-align: center;
    max-width: 500px;
    width: 90%;
}
.age-gate-modal h2 { margin-top: 0; color: var(--text-color); }
.age-gate-modal p { margin-bottom: 20px; line-height: 1.5; }
.age-gate-buttons { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; }
.age-gate-buttons #age-gate-accept { background-color: var(--button-bg); color: var(--button-text); }
.age-gate-buttons #age-gate-accept:hover { background-color: var(--button-hover-bg); }
.age-gate-buttons #age-gate-leave { background-color: var(--button-secondary-bg); }
.age-gate-buttons #age-gate-leave:hover { background-color: var(--button-secondary-hover-bg); }

/* === COOKIE-BANNER STYLES === */
#cookie-consent-banner {
    position: fixed; 
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--container-bg-color, #fff);
    color: var(--text-color, #333);
    padding: 15px 20px;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.15);
    z-index: 1000; 
    display: none; 
    align-items: center;
    justify-content: center;
    flex-wrap: wrap; 
    gap: 20px;
}
body.dark-mode #cookie-consent-banner { box-shadow: 0 -2px 10px rgba(0,0,0,0.4); }
.cookie-banner-content { display: flex; align-items: center; justify-content: center; flex-wrap: inherit; gap: inherit; width: 100%; max-width: var(--max-width, 1100px); }
#cookie-consent-banner p { margin: 0; flex-grow: 1; text-align: center; }
#cookie-consent-banner p a { color: var(--link-color); text-decoration: underline; }
.cookie-banner-buttons { display: flex; gap: 10px; flex-shrink: 0; }


/* === Responsive Anpassungen === */
@media (max-width: 992px) { 
    .site-footer .container.footer-content-wrapper { flex-direction: column; text-align: center; }
    .site-footer .footer-menu { margin-bottom: 15px; text-align: center; }
    .site-footer .footer-banner-slot { margin-left: auto; margin-right: auto; justify-content: center; }
}
@media (max-width: 768px) {
    .site-header .header-container { flex-direction: column; align-items: flex-start; }
    .main-navigation { margin-top: 10px; width: 100%; }
    .main-navigation ul { flex-direction: column; align-items: stretch; }
    .main-navigation li { margin-left: 0; margin-bottom: 8px; }
    .main-navigation li:first-child { margin-left: 0; }
    .homepage-layout { flex-direction: column; }
    .image-to-rate-section { padding-right: 0; }
    .cookie-banner-content { flex-direction: column; text-align: center; }
    #cookie-consent-banner p { margin-bottom: 15px; }
}