/* style.css */

/* --- General Body and Container Styles --- */
body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: #333;
    line-height: 1.6;
    background-color: #0b0b0b; /* Dark background for overall index.html page */
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* --- Hero Section Styles (Primarily for index.html) --- */
.hero-section {
    /* Default hero-section styles for index.html */
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../pix/star_.png') no-repeat center center/cover;
    color: #fff; /* White text for content directly in hero section */
    text-align: center;
    position: relative;
    min-height: 600px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically center content */
    align-items: center; /* Horizontally center content */
    padding: 20px; /* Add padding to ensure content isn't flush */
    box-sizing: border-box; /* Include padding in min-height */
}

.hero-section h2 {
    font-size: 3em;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.hero-section p {
    font-size: 1.2em;
    margin-bottom: 30px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}

#welcomeMessage {
    font-weight: bold;
    font-size: 1.3em;
}

/* Updated selector for main action button */
.button-primary { /* Class added to #mainActionButton */
    background-color: #007bff;
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 5px;
    font-size: 1.1em;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 20px;
    display: block; /* To allow auto margins for centering */
    margin-left: auto;
    margin-right: auto;
}

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

/* --- Hero Navigation Styles (Used by index.html) --- */
.hero-nav {
    position: absolute;
    top: 20px;
    width: 100%;
    left: 0;
    text-align: center;
    padding: 0 20px;
    box-sizing: border-box;
    z-index: 10; /* Ensure nav is above other content in hero */
}

.hero-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    padding: 10px 20px;
}

.hero-nav li {
    margin: 0 15px;
    color: #fff;
    font-size: 1.1em;
}

.hero-nav a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

.hero-nav a:hover {
    color: #ffd700;
}

/* --- Protected Content (for logged-in users, on index.html) --- */
#protectedContent {
    /* This section is designed to appear *within* the hero section background */
    padding: 0;
    margin-top: 40px; /* Space from other hero content */
    width: 100%;
    max-width: 900px; /* Limit its max width */
    box-sizing: border-box;
    align-self: center; /* Aligns this specific item to the center of the cross-axis in flex container */
    text-align: center; /* Ensure its own headings/paragraphs are centered */
}


#protectedContent h3,
#protectedContent p {
    color: #fff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); /* Add shadow for readability on dark background */
}

#protectedContent h3 {
    margin-bottom: 15px;
}

/* --- Image Grid Styles (within Protected Content on index.html) --- */
.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Back to 3 columns potential */
    gap: 30px;
    width: 100%;
    margin-top: 20px;
    padding: 0;
}

.image-grid-item {
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    position: relative;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 200px;
}

.image-grid-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.image-grid-item .content-overlay {
    background-color: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.2);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 15px;
    box-sizing: border-box;
    pointer-events: auto;
}

.image-grid-item .title {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 5px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.image-grid-item .description {
    font-size: 14px;
    color: #e0e0e0;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* --- Footer Styles (General) --- */
footer {
    background-color: #0b0b0b; /* Dark footer consistent across pages */
    color: #fff;
    text-align: center;
    padding: 20px;
    margin-top: 50px; /* Space above footer */
}

/* --- Modal Styles (for login/register pop-ups) --- */
.modal {
    display: none; /* Hidden by default, JS will change this */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.6);
    align-items: center;
    justify-content: center;
}

.modal-content {
    background-color: #fefefe; /* White background for modal content */
    padding: 20px;
    border: 1px solid #888;
    width: 90%;
    max-width: 500px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    position: relative;
    color: #333; /* Ensure text inside modals is dark */
}

.close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    top: 10px;
    right: 15px;
}

.close-button:hover,
.close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* --- Form Toggle Buttons (for login/register switch) --- */
.form-toggle {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.form-toggle button {
    background-color: transparent;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 1em;
    color: #555;
    border-bottom: 2px solid transparent;
    transition: color 0.3s ease, border-bottom-color 0.3s ease;
}

.form-toggle button.active {
    color: #007bff;
    border-bottom-color: #007bff;
    font-weight: bold;
}

.form-toggle button:hover:not(.active) {
    color: #007bff;
}

/* --- General Form Group Styles (applies to modals) --- */
.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    /* margin-bottom: 5px; */
    font-weight: bold;
    color: #333; /* Ensure labels are dark on modal background */
}

.form-group input[type="text"],
.form-group input[type="password"],
.form-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
    color: #333; /* Ensure input text is dark */
}

.form-group #author,
.form-group #tor-site{
    margin-top: 10px; /* Fügt einen Abstand über dem Input-Feld ein */
}

/* Styles for buttons within forms (e.g., login/register submit) */
.form-group button[type="submit"] {
    background-color: #007bff;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease;
    width: 100%;
}

.form-group button[type="submit"]:hover {
    background-color: #0056b3;
}

/* --- General Message Styles (for form feedback) --- */
.message {
    margin-top: 15px;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
}

.message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.message.info {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

---

/* --- Questionnaire Page Specific Styles (Applied to body#questionnairePage) --- */
body#questionnairePage {
    background-color: #f4f7f6; /* Lighter background for the questionnaire page */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    color: #333; /* Ensure default text is dark */
}

body#questionnairePage header {
    /* This header on questionnaire.html uses the hero-nav styling */
    background-color: rgba(0, 0, 0, 0.3); /* Semi-transparent like hero-nav */
    color: white; /* Text color in header */
    padding: 1rem 0;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

body#questionnairePage header h1 {
    margin: 0;
    font-size: 2.5rem;
    color: #fff; /* Ensure H1 is white on dark header */
}

body#questionnairePage header nav {
    margin-top: 10px;
}

body#questionnairePage header nav a {
    color: white;
    text-decoration: none;
    margin: 0 15px;
    font-weight: bold;
    transition: color 0.3s ease;
}

body#questionnairePage header nav a:hover {
    color: #ffd700; /* Gold-like color on hover, consistent with hero-nav */
}

body#questionnairePage main {
    flex: 1; /* Allows main content to grow */
    padding: 20px;
    max-width: 800px;
    margin: 20px auto; /* Centers the main content block */
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    color: #333; /* Ensure text within main is dark */
}

body#questionnairePage main h2 {
    color: #007bff; /* Primary blue for main headings on questionnaire page, consistent with main button */
    text-align: center;
    margin-bottom: 20px;
}

body#questionnairePage main p {
    text-align: center;
    margin-bottom: 30px;
    line-height: 1.6;
}

/* Styling for the questionnaire form itself */
#questionnaireForm {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Space between form groups */
    width: 100%;
    max-width: 600px; /* Max width for the form for readability */
    margin: 20px auto 0; /* Centers the form within its parent main */
}

.checkbox-option {
    display: flex;
    align-items: center; /* Zentriert die Checkbox und den Text vertikal */
    gap: 5px; /* Fügt einen kleinen Abstand zwischen Checkbox und Text hinzu */
    margin-right: 15px; /* Fügt einen Abstand zwischen den einzelnen Optionen hinzu */
}

#questionsContainer {
    min-height: 100px;
/*     display: flex; */
    justify-content: center;
    align-items: center;
    font-style: italic;
    color: #777;
    border: 1px dashed #ccc;
    padding: 20px;
    border-radius: 5px;
}

/* Overrides for form group elements within questionnaire form */
#questionnaireForm .form-group label {
    color: #333; /* Ensure labels are dark on white background */
    font-weight: bold;
}

#questionnaireForm .form-group input[type="radio"] + label,
#questionnaireForm .form-group input[type="checkbox"] + label {
    color: #333; /* Ensure radio/checkbox labels are dark */
    font-weight: normal;
	line-height: 20px;
	padding: 10px;
}

/* Specific button for questionnaire form, now targets the .button class directly */
#questionnaireForm .button {
    background-color: #007bff; /* Primary blue for questionnaire submit button, consistent */
    width: auto;
    align-self: center;
    margin-top: 10px;
}

.radio-option {
    display: flex;
    align-items: center;
    gap: 5px; /* Optional: fügt einen kleinen Abstand hinzu */
    margin-right: 15px; /* Optional: Abstand zwischen den Optionen */
}

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

/* Message styles specific to the questionnaire form */
#message {
    margin-top: 20px;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
}

#message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

#message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6fb;
}

body#questionnairePage footer {
    background-color: #333; /* Dark footer like the main site */
    color: white;
    text-align: center;
    padding: 1rem 0;
    margin-top: auto;
}

---

/* --- Admin Page Specific Styles (for body#adminPage) --- */
body#adminPage {
    background-color: #f4f7f6; /* Light, clean background for admin page */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    color: #333; /* Default text color for admin page content */
}

body#adminPage main {
    flex: 1; /* Allow main content to grow */
    display: flex; /* Make main a flex container to manage its children */
    flex-direction: column;
    align-items: center; /* Center main content horizontally */
    padding-bottom: 20px; /* Add some space above footer */
}

/* Styles for the .hero-section used on admin.html */
body#adminPage .hero-section {
    background: #2c3e50; /* A solid, dark color for the admin header area */
    color: #fff;
    padding: 15px 20px; /* Less padding than index.html hero */
    min-height: auto; /* Remove minimum height constraint */
    display: flex;
    flex-direction: column; /* Ensure content stacks */
    width: 100%; /* Take full width */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    margin-bottom: 20px; /* Space below the header */
    justify-content: flex-start; /* Align content to the start */
    align-items: center; /* Center children horizontally */
}

body#adminPage .hero-section .container {
    width: 100%;
    max-width: 1200px;
    padding: 0; /* Remove container padding inside admin hero-section */
    display: flex;
    flex-direction: column; /* Stack nav and content-section */
    align-items: center;
}

/* Admin specific navigation styles */
body#adminPage .hero-nav {
    position: static; /* Remove absolute positioning */
    top: auto;
    width: 100%;
    left: auto;
    text-align: center;
    padding: 0;
    margin-bottom: 15px; /* Space between nav and main content */
}

body#adminPage .hero-nav ul {
    background-color: transparent; /* No background on the nav ul */
    border-radius: 0;
    padding: 0;
    flex-wrap: wrap; /* Allow items to wrap */
}

body#adminPage .hero-nav li {
    margin: 0 10px; /* Less margin for compact nav */
    color: #fff;
    font-size: 1em;
}

body#adminPage .hero-nav a {
    color: #fff;
    text-decoration: none;
    font-weight: normal; /* Less bold than main hero nav */
    padding: 5px 0;
    transition: color 0.3s ease;
    display: block; /* Make links block to fill area */
}

body#adminPage .hero-nav a:hover {
    color: #007bff; /* Hover color for admin nav */
}

body#adminPage #logoutNavLink {
    font-size: 0.9em; /* Smaller font for "Angemeldet als" */
    color: #e0e0e0;
}

body#adminPage #logoutNavLink a {
    font-size: 1em; /* Keep logout link size normal */
    font-weight: bold;
    color: #ffd700; /* Distinct color for logout */
}

/* Main content section for Admin Page */
body#adminPage .content-section {
    width: 95%; /* Adjust width to leave some margin */
    max-width: 1000px; /* Max width for content */
    text-align: left;
    color: #333;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 25px;
    margin-top: 0; /* No top margin needed here */
    margin-bottom: 0;
    box-sizing: border-box;
}

body#adminPage .content-section h2 {
    text-align: left;
    margin-top: 0;
    margin-bottom: 20px;
    color: #333;
    text-shadow: none;
}

#resultsTableContainer {
    max-width: none;
    margin: 0;
    padding: 0;
    background-color: transparent;
    box-shadow: none;
}

.user-questionnaire-result {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 25px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.user-questionnaire-result h3 {
    color: #333;
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.question-answer-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.question-answer-list li {
    padding: 8px 0;
    border-bottom: 1px dashed #eee;
    /* --- KEY FIX FOR TEXT WRAPPING --- */
    word-break: break-word; /* Breaks long words to prevent overflow */
    overflow-wrap: break-word; /* Modern, preferred alternative for long words */
}

.question-answer-list li:last-child {
    border-bottom: none;
}

.question-answer-list strong {
    color: #555;
    display: inline-block;
    min-width: 150px;
}

#verticalResultsContainer {
    width: 100%;
}

/* Admin page footer */
body#adminPage footer {
    margin-top: auto; /* Push footer to the bottom */
}


---

/* --- Responsive Adjustments (General) --- */
@media (max-width: 768px) {
    .hero-section {
        padding: 80px 15px;
    }

    .hero-section h2 {
        font-size: 2.5em;
    }

    .hero-section p {
        font-size: 1em;
    }

    .hero-nav ul {
        flex-direction: column;
        padding: 5px 10px;
    }

    .hero-nav li {
        margin: 5px 0;
    }

    .image-grid {
        grid-template-columns: 1fr; /* Single column on small screens */
        padding: 15px;
        gap: 20px;
    }

    /* Responsive adjustments for questionnaire page */
    body#questionnairePage main {
        padding: 15px;
        margin: 10px auto;
        width: 95%;
    }

    #questionnaireForm {
        max-width: 100%;
    }

    #questionnaireForm .form-group label {
        font-size: 0.95rem;
    }

    #questionnaireForm .form-group input[type="text"],
    #questionnaireForm .form-group select,
    #questionnaireForm .button {
        font-size: 0.9rem;
        padding: 10px;
    }

    /* Responsive adjustments for admin page content section */
    body#adminPage .hero-section {
        padding: 15px 10px;
    }
    body#adminPage .content-section {
        padding: 20px;
        width: 98%; /* Slightly more narrow on smaller screens */
        margin-top: 15px;
    }
}

@media (max-width: 480px) {
    /* Responsive adjustments for questionnaire page */
    body#questionnairePage main {
        padding: 10px;
        margin: 5px auto;
        width: 98%;
    }

    #questionnaireForm .form-group {
        margin-bottom: 15px;
    }

    #questionnaireForm .form-group input[type="radio"] + label,
    #questionnaireForm .form-group input[type="checkbox"] + label {
        display: block;
        margin-right: 0;
        margin-bottom: 5px;
    }

    /* Responsive adjustments for admin page content section */
    body#adminPage .hero-section {
        padding: 10px 5px;
    }
    body#adminPage .hero-nav ul {
        flex-direction: column;
    }
    body#adminPage .hero-nav li {
        margin: 5px 0;
    }
    body#adminPage .content-section {
        padding: 15px;
        width: 98%;
        margin-top: 10px;
    }

}