/* ===== Responsive Design =====
   Einheitliche Breakpoints in allen CSS-Dateien:
     - Handy:      bis 599px            @media (max-width: 599px)
     - Tablet:     600px – 1023px       @media (max-width: 1023px)
     - Laptop:     1024px – 1599px      (Grundregeln ohne Media Query)
     - Bildschirm: ab 1600px            @media (min-width: 1600px)
   (Full-HD-Laptops mit 125 % Windows-Skalierung sind 1536px breit und
   sollen noch das Laptop-Layout bekommen.)
   Einzige Ausnahme: die Navigation klappt schon unter 1200px auf das
   Hamburger-Menü um, weil Logo + Menüpunkte + Login ca. 1000px brauchen.

   --rand ist der seitliche Abstand des Inhalts zum Fensterrand. Er wächst
   mit der Fensterbreite (--seitenrand) und hält den Inhalt auf sehr breiten
   Monitoren zusätzlich auf --inhalt-max begrenzt. Navbar, Inhalt, Footer und
   die vollbreiten Abschnitte der Startseite nutzen alle --rand und stehen
   dadurch auf jeder Bildschirmgröße bündig untereinander. (Das 100% bezieht
   sich jeweils auf die Breite des umgebenden Elements.) */
:root {
    --inhalt-max: 1800px;
    --seitenrand: clamp(40px, 10vw, 140px);
    --rand: calc(max(0px, (100% - var(--inhalt-max)) / 2) + var(--seitenrand));
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* Sticky Footer: body ist eine Flex-Spalte über die volle Fensterhöhe, der
   Footer wird per margin-top: auto an den unteren Rand geschoben. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background-color: #f2f2f2;
    font-family: Montserrat, Arial, sans-serif;
    color: #353535;
    line-height: 30px;
    overflow-x: hidden;
}

/* Abstand des Seiteninhalts zum Rand */
.content, .titel {
    padding-left: var(--rand);
    padding-right: var(--rand);
}

/* Luft zwischen Navigationsleiste und Seiteninhalt (Bildschirm: 32px,
   Tablet/Handy: 24px, siehe Media Queries). Die Seiten selbst haben oben
   keinen zusätzlichen Rand, damit der Abstand überall gleich ist. */
.content {
    padding-top: 16px;
}

a {
    padding: 10px;
    text-decoration: none;
    color: #353535;
    font-size: 14px;
}

/* Header und Navigationsleiste */
.header-gradient {
    position: absolute;
    width: 100%;
    height: 120px;
    background: linear-gradient(to right, #c0e8c0, #ffe8c0, #c0e8c0);
    z-index: -1;
}

/* Navbar in drei Zonen: Logo – Menüpunkte (mittig) – Login/Profil */
.navbar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    height: 120px;
    padding: 0 var(--rand);
    text-align: center;
}

.nav-menu {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-width: 0;
}

.navliste {
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
    align-items: center;
    gap: clamp(20px, 3vw, 50px);
    height: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

/* Menüpunkte halbfett (Wunsch StMGP nach mehr Gewicht, 01.10.2026) */
.navliste a {
    font-weight: 600;
}

.navliste a:hover {
    color: #667A66;
}

.navbar a {
    font-size: 16px;
    padding-bottom: 0;
}

/* Linie sitzt am unteren Rand der Navbar: Als inline-block ist die Textzeile
   des Links genau 30px hoch (line-height) und steht mittig in der 120px hohen
   Navbar, endet also 45px über deren Unterkante. Padding unten + Linie füllen
   diese 45px; die negative margin nimmt davon so viel zurück, dass die Box
   fürs Layout wieder symmetrisch ist (10px oben wie unten) und der Text
   mittig bleibt. (Früher eine feste Zahl am Inline-Link – die hing an den
   Schriftmetriken und ließ 1px Spalt, sichtbar über dem Startseitenbild.) */
.navbar a.active {
    display: inline-block;
    color: #667a66;
    border-bottom: 3px solid #667A66;
    padding: 10px 10px 42px;
    margin-bottom: -35px;
}

/* Logo in der Navbar */
.image2-container {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
}

/* Neues Logo (Oktober 2026) ist breiter als das alte (2,4 : 1 statt 2 : 1)
   - daher breiter angesetzt, damit es in der 120px hohen Leiste gleich
   präsent und lesbar wirkt (200px breit = ca. 84px hoch; auf großen
   Bildschirmen ab 1600px mehr, siehe unten) */
.image2-container img {
    width: 200px;
    height: auto;
}

/* Hamburger-Button – nur unter 1200px sichtbar */
.nav-toggle {
    display: none;
    flex: 0 0 auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 0;
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
}

.nav-toggle span {
    display: block;
    width: 26px;
    height: 3px;
    background-color: #353535;
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Drei Striche werden beim Öffnen zum X */
.nav-toggle.open span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.nav-toggle.open span:nth-child(2) {
    opacity: 0;
}

.nav-toggle.open span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* Auswertung-Icon in der Navbar */
.image-auswertung-container img {
    display: flex;
    width: 50px;
    height: auto;
}

/* An- und Abmelden */
.user-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 30px;
}

/* Benutzername oben rechts: Link zu „Passwort ändern" (padding: 0 hebt das
   allgemeine a-Padding auf, damit die Kopfzeile unverändert bleibt) */
.profile {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 0;
}

.profile:hover span {
    text-decoration: underline;
}

/* Seite „Passwort ändern" */
.passwort-container {
    max-width: 420px;
}

.passwort-feld {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}

.passwort-feld label {
    font-size: 14px;
    font-weight: 700;
}

.passwort-feld input {
    padding: 10px 20px;
    border: none;
    border-radius: 30px;
    background-color: #ffffff;
    font-size: 16px;
    color: #353535;
}

.passwort-fehler {
    margin: 0;
    font-size: 13px;
    color: #a94442;
}

.passwort-hilfe {
    font-size: 12px;
    color: #666;
}

.passwort-hilfe ul {
    margin: 0;
    padding-left: 18px;
}

.passwort-erfolg {
    background-color: #ffffff;
    border-left: 4px solid #667A66;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 14px;
}

.profile img {
    width: 25px;
    height: auto;
}

/* Lange Benutzernamen dürfen die Navbar nicht sprengen */
.profile span {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
}

.logout, .login {
    display: flex;
    align-items: center;
    padding: 0;
}

.logout img, .login img {
    width: 35px;
    height: auto;
}

.login {
    gap: 20px;
}

/* Logout-Sicherheitsabfrage */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.45);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.popup-box {
    width: 90%;
    max-width: 400px;
    padding: 30px 40px;
    background: #FFFFFF;
    border-radius: 14px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.popup-buttons {
    margin-top: 25px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

/* Nach-oben-Button: runder Button in der rechten unteren Fensterecke, der
   Pfeil ist darin exakt mittig (absolut zentriert, weil jQuery beim
   Einblenden die display-Eigenschaft selbst setzt) */
#scroll-to-top-button {
    display: none;
    position: fixed;
    right: 32px;
    bottom: 32px;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    background-color: #fcd28d;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    transition: background-color 0.2s ease;
    z-index: 999;
}

#scroll-to-top-button img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 22px;
    transform: translate(-50%, -50%);
}

#scroll-to-top-button:hover {
    background-color: #bae0ba;
}

/* Footer */
footer {
    margin-top: auto; /* schiebt den Footer an den unteren Rand (siehe body) */
    padding: 20px var(--rand);
    background-color: #353535;
    color: #f2f2f2;
}

footer h3 {
    color: #bae0ba;
}

footer ul {
    margin: 0;
    padding: 0;
}

footer ul li {
    list-style-type: none;
    padding-bottom: 10px;
}

footer ul li a {
    color: #f2f2f2;
    padding: 10px 0;
}

footer p {
    text-align: right;
    font-size: 12px;
    line-height: 20px;
}

footer a:hover {
    color: #bae0ba;
}

/* Tabellen, die auf schmalen Screens breiter sind als der Platz, werden
   horizontal scrollbar statt abgeschnitten */
.tabelle-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* 404-Fehlerseite */
.error_page {
    margin: 50px 0;
}

.error_image img {
    width: 100%;
    max-width: 260px;
}

.error_image, .error_button, .error_page p {
    display: flex;
    justify-content: center;
}

/* Buttons der Webseite */
.buttonlight, .buttondarksmall, .buttondark, button[type="submit"], .btn-cancel, .btn-confirm {
    font-family: Montserrat, sans-serif;
    border: none;
    border-radius: 47px;
    transition: background-color 0.3s ease;
    font-size: 14px;
    cursor: pointer;
}

/* Button hell */
.buttonlight {
    background-color: #E7F1E5;
    padding: 10px 40px;
}

.buttonlight:hover {
    background-color: #fcd28d;
}

/* Button dunkel */
.buttondark {
    background-color: #667A66;
    color: #ffffff;
    padding: 10px 40px;
}

.buttondark:hover {
    background-color: #fcd28d;
    color: #353535;
}

/* Button dunkel & klein */
.buttondarksmall {
    background-color: #667A66;
    color: #ffffff;
    padding: 10px 20px;
    margin-top: 20px;
}

.buttondarksmall:hover {
    background-color: #bae0ba;
    color: #353535;
}

/* Button Evaluation */
button[type="submit"] {
    padding: 10px 20px;
    margin-bottom: 100px;
    background-color: #667A66;
    color: #f2f2f2;
}

button[type="submit"]:hover {
    background-color: #bae0ba;
    color: #353535;
}

/* Button ausgegraut */
.disabled-btn {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

/* Buttons Abmelde-Popup */
.btn-cancel, .btn-confirm {
    padding: 10px 28px;
    white-space: nowrap;
}

.btn-cancel {
    background-color: #f2f2f2;
    color: #353535;
}

.btn-cancel:hover {
    background-color: #353535;
    color: #FFFFFF;
}

.btn-confirm {
    background-color: #667A66;
    color: #FFFFFF;
}

.btn-confirm:hover {
    background-color: #fcd28d;
    color: #353535;
}

/* ===== Bildschirm (ab 1600px) ===== */
@media (min-width: 1600px) {
    .content {
        padding-top: 32px;
    }

    .navbar a {
        font-size: 18px;
    }

    .image2-container img {
        width: 240px;
    }

    .image-auswertung-container img {
        width: 60px;
    }

    .error_image img {
        max-width: 380px;
    }

    .popup-box {
        max-width: 460px;
        padding: 36px 48px;
    }

    #scroll-to-top-button {
        right: 40px;
        bottom: 40px;
        width: 52px;
        height: 52px;
    }

    #scroll-to-top-button img {
        width: 26px;
        height: 26px;
    }
}

/* ===== Navigation: Hamburger-Menü (unter 1200px) =====
   Logo bleibt links, Menüpunkte + Login/Profil klappen als Liste unter
   der Navbar auf. */
@media (max-width: 1199px) {
    .nav-toggle {
        display: flex;
    }

    .nav-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
        background-color: #FFFFFF;
        box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
        z-index: 500;
    }

    .nav-menu.open {
        display: flex;
    }

    .navliste {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .navliste li {
        padding: 12px 0;
        border-bottom: 1px solid #ececec;
    }

    .navbar a.active {
        display: inline;
        padding-bottom: 10px;
        margin-bottom: 0;
        border-bottom-width: 2px;
    }

    .image-auswertung-container {
        display: flex;
        justify-content: center;
    }

    .user-actions {
        flex-direction: column;
        gap: 12px;
        padding: 16px 0;
    }
}

/* ===== Tablet (bis 1023px) ===== */
@media (max-width: 1023px) {
    :root {
        --seitenrand: 40px;
    }

    .content {
        padding-top: 24px;
    }

    .error_image img {
        max-width: 220px;
    }
}

/* ===== Handy (bis 599px) ===== */
@media (max-width: 599px) {
    :root {
        --seitenrand: 16px;
    }

    .image2-container img {
        width: 130px;
    }

    /* Auf dem Handy reicht eine niedrigere Leiste für das kleinere Logo */
    .navbar,
    .header-gradient {
        height: 80px;
    }

    footer p {
        text-align: left;
    }

    .error_image img {
        max-width: 160px;
    }

    .popup-box {
        padding: 24px 20px;
    }

    .popup-buttons {
        flex-direction: column;
    }

    button[type="submit"] {
        margin-bottom: 50px;
    }

    #scroll-to-top-button {
        right: 16px;
        bottom: 16px;
    }
}

/* Drucken (PDF-Export der Auswertung über window.print()): Navigation und
   Footer ausblenden. Die Farbregel gilt bewusst universell – Balken, Badges
   und Tabellenzeilen tragen ihre Bedeutung über die Hintergrundfarbe, die
   Browser beim Drucken sonst standardmäßig weglassen. */
@media print {
    header,
    .navbar,
    footer,
    #scroll-to-top-button,
    #cookie-popup {
        display: none !important;
    }

    * {
        print-color-adjust: exact !important;
        -webkit-print-color-adjust: exact !important;
    }

    /* body ist am Bildschirm eine Flexbox (Footer unten halten). Firefox
       ignoriert innerhalb von Flexboxen break-inside: avoid und schneidet
       beim Drucken Zeilen, Karten und KPI-Balken mitten durch - im Druck
       deshalb normaler Block-Fluss (Footer ist dort ohnehin ausgeblendet). */
    body {
        display: block;
    }
}