/* Übersichtsseite Empfehlungen */
.uebersichtempfehlungen {
    margin: 0 auto 50px;
}

.cardempfehlungen {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #e0f0e0;
    border-radius: 36px;
    padding: 40px 24px;
    height: 100%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    font-size: 14px;
}

.cardempfehlungen:nth-child(2) {
    background-color: #c8e6c8;
}

.cardempfehlungen p {
    padding-bottom: 20px;
}

.iconempfehlungen {
    display: inline-block;
    width: 100px;
}

/* Button steht unabhängig von der Textlänge am Kartenende */
.cardempfehlungen .buttondark {
    margin-top: auto;
}

/* Best Practice */
.containerall {
    margin: 0 auto 50px;
}

/* Hinweis-Box rechts neben der Überschrift */
.header-row {
    display: flex; /* Elemente nebeneinander darstellen */
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px; /* Abstand zwischen Titel und Box */
    margin-bottom: 30px;
}

.hinweis-box {
    background-color: #FFFFFF;
    border-left: 2px solid #667A66;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    max-width: 450px;
    line-height: 1.4;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); /* Schatten-Eigenschaft */
}

.hinweis-boxen {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
}

.hinweis-boxen .hinweis-box {
    max-width: 260px;
}

.containerall h1 {
    font-size: 24px;
}

.containerall p {
    font-size: 14px;
}

/* Segmentkreis + Artikel-Popup: ab Laptop nebeneinander (als Paar
   zentriert), auf Tablet/Handy untereinander (siehe Media Queries). */
.content-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 48px;
    margin: 80px 0;
}

/* overflow: hidden schneidet die unsichtbaren Ecken des um 45° gedrehten
   #small-circle ab (sonst wird die Seite auf dem Handy seitlich
   scrollbar); das Padding lässt Platz für den Hover-Effekt der Segmente. */
.circle-container {
    flex: 0 0 auto;
    padding: 12px;
    overflow: hidden;
}

/* Die Kreisgröße wird nur hier gesetzt, alles darin skaliert prozentual */
.circle-wrapper {
    position: relative;
    width: clamp(400px, 36vw, 520px);
    aspect-ratio: 1;
}

.topic-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-align: center;
}

/* Kleiner Kreis */
#small-circle {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(45deg);
    z-index: 3;
}

.segment {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    color: #353535;
    display: flex;
    justify-content: end;
    align-items: center;
    font-size: 16px;
}

#segment1 {
    transform: rotate(0deg);
    background-color: #C6D5C8;
    clip-path: polygon(50% 50%, 100% 0%, 100% 100%, 50% 50%);
}

#segment2 {
    transform: rotate(90deg);
    background-color: #C0C5DC;
    clip-path: polygon(50% 50%, 100% 0%, 100% 100%, 50% 50%);
}

#segment3 {
    transform: rotate(180deg);
    background-color: #FBE599;
    clip-path: polygon(50% 50%, 100% 0%, 100% 100%, 50% 50%);
}

#segment4 {
    transform: rotate(270deg);
    background-color: #C4C0C0;
    clip-path: polygon(50% 50%, 100% 0%, 100% 100%, 50% 50%);
}

#segment1:hover, #segment2:hover, #segment3:hover, #segment4:hover {
    width: 102%;
    height: 102%;
    cursor: pointer;
}

#segment3 h4, #segment4 h4 {
    transform: rotate(90deg);
}

#segment2 h4, #segment1 h4 {
    transform: rotate(-90deg);
}

/* aktive Segmente hervorheben */
#segment1.active {
    border: #709775 6px solid;
}

#segment2.active {
    border: #626FA7 6px solid;
}

#segment3.active {
    border: #E4B50A 6px solid;
}

#segment4.active {
    border: #696363 6px solid;
}

/* Mini Kreis */
#mini-circle {
    width: 27.3%; /* entspricht den ursprünglichen 150px von 550px */
    height: 27.3%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* genau zentriert im kleinen Kreis */
    z-index: 4;
    background-color: #667A66;
    border-radius: 100%;
}

#mini-circle h2 {
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 400;
}

/* Füllt den Platz neben dem Kreis, aber nur bis zu einer gut lesbaren
   Zeilenlänge */
#popup {
    flex: 1 1 0;
    min-width: 0;
    max-width: 600px;
    padding: 20px 28px;
    border-radius: 34px;
    display: none;
    background-color: #ffffff;
    text-align: left;
    box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.2); /* Schatten-Eigenschaft */
}

#close-popup {
    cursor: pointer;
    display: flex;
    justify-content: end;
    font-size: x-large;
}

#popup-kategorie {
    font-size: 12px;
    margin-bottom: 0;
    margin-top: 20px;
}

#popup-title {
    font-size: 16px;
}

#popup-grafik-wrapper {
    margin: 10px 0;
    display: flex;
    align-items: flex-start; /* Bild und Text oben ausrichten */
    gap: 1rem; /* Abstand zwischen Bild und Text */
}

#popup-grafik {
    display: none;
    flex: 0 0 auto;
    width: 40%;
    max-width: 300px;
    height: auto;
    object-fit: contain;
}

#popup-grafik-einschaetzung {
    flex: 1; /* Text nimmt restlichen Platz ein */
}

#popup-content, #popup-grafik-einschaetzung, #popup-kennzahlen {
    font-size: 12px;
    margin: 5px auto;
    line-height: 25px;
    text-align: justify;
    hyphens: auto;
}

#kennzahlen h5 {
    margin: 0;
}

.popup-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
    gap: 20px;
}

.popup-nav button {
    margin: auto 5px;
}

.popup-nav button img {
    color: #353535;
    width: 15px;
    height: 20px;
    display: flex;
    justify-items: center;
    align-items: center;
    padding: 5px;
}

#page-indicator {
    font-size: 13px;
    color: #353535;
    font-weight: 500;
    min-width: 90px; /* verhindert springende Breite bei ein-/zweistelligen Zahlen */
    text-align: center;
}

#prev-article,
#next-article {
    background-color: #E7F1E5;
    color: #353535;
    border: none;
    cursor: pointer;
    border-radius: 20px;
}

#prev-article:hover, #next-article:hover {
    background-color: #fcd28d;
}

/* ===== Maßnahmenkatalog Akkordeon ===== */

.katalog-container {
    margin: 0 auto 50px;
}

.katalog-container .header-row {
    margin-bottom: 40px;
}

/* Säulen-Ebene */
.acc-saeule {
    margin-bottom: 16px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.15);
}

/* Allgemeine Akkordeon-Kopfzeile */
.acc-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: Montserrat, Arial, sans-serif;
    transition: filter 0.15s ease;
}

.acc-header:hover {
    filter: brightness(0.95);
}

.acc-label {
    font-weight: 700;
}

.acc-icon {
    transition: transform 0.3s ease;
    font-size: 0.8em;
    flex-shrink: 0;
    margin-left: 12px;
}

.acc-header[aria-expanded="true"] .acc-icon {
    transform: rotate(-180deg);
}

/* Akkordeon-Body – gemeinsame Transition */
.acc-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

/* Säulen-Kopfzeile – Farben je Reihenfolge */
.acc-saeule-header {
    padding: 18px 24px;
    font-size: 17px;
    color: #353535;
    border-radius: 14px;
}

/* Bei geöffnetem Akkordeon unten eckig, damit die Kopfzeile nahtlos in den
   weißen Body darunter übergeht (sonst blieben die unteren Ecken der
   Kopfzeile abgerundet, während der Body direkt darunter eckig ist). */
.acc-saeule-header[aria-expanded="true"] {
    border-radius: 14px 14px 0 0;
}

.acc-saeule-body {
    padding: 0 20px;
    background-color: #fff;
}

.acc-saeule-body > .acc-kategorie:last-child {
    margin-bottom: 16px;
}

/* Farben der vier Säulen */
.saeule-1 > .acc-saeule-header { background-color: #C0C5DC; }
.saeule-2 > .acc-saeule-header { background-color: #C6D5C8; }
.saeule-3 > .acc-saeule-header { background-color: #FBE599; }
.saeule-4 > .acc-saeule-header { background-color: #C4C0C0; }

.saeule-1[aria-expanded="true"] > .acc-saeule-header,
.saeule-1 > .acc-saeule-header[aria-expanded="true"] { border-bottom: 3px solid #626FA7; }
.saeule-2[aria-expanded="true"] > .acc-saeule-header,
.saeule-2 > .acc-saeule-header[aria-expanded="true"] { border-bottom: 3px solid #709775; }
.saeule-3[aria-expanded="true"] > .acc-saeule-header,
.saeule-3 > .acc-saeule-header[aria-expanded="true"] { border-bottom: 3px solid #E4B50A; }
.saeule-4[aria-expanded="true"] > .acc-saeule-header,
.saeule-4 > .acc-saeule-header[aria-expanded="true"] { border-bottom: 3px solid #696363; }

/* Kategorie-Ebene */
.acc-kategorie {
    margin-top: 14px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e0e0e0;
}

.acc-kategorie-header {
    padding: 13px 20px;
    font-size: 15px;
    background-color: #f0f4f0;
    color: #353535;
    border-radius: 10px;
}

.acc-kategorie-header[aria-expanded="true"] {
    border-radius: 10px 10px 0 0;
    border-bottom: 2px solid #667A66;
}

.acc-kategorie-body {
    padding: 0 16px;
    background-color: #fafafa;
}

.acc-kategorie-body > .acc-gruppe:last-child {
    margin-bottom: 14px;
}

/* Gruppe-Ebene */
.acc-gruppe {
    margin-top: 12px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #dde8dd;
}

.acc-gruppe-header {
    padding: 10px 16px;
    font-size: 13px;
    background-color: #E7F1E5;
    color: #353535;
    border-radius: 8px;
}

.acc-gruppe-header[aria-expanded="true"] {
    border-radius: 8px 8px 0 0;
    border-bottom: 2px solid #667A66;
}

.acc-gruppe-body {
    padding: 0 14px;
    background-color: #fff;
}

/* Einzelne Katalogeinträge */
.katalog-eintrag {
    padding: 16px 0;
    border-bottom: 1px solid #ebebeb;
}

.katalog-eintrag:last-child {
    border-bottom: none;
}

/* Maßnahmen-Nummer (z. B. E1-M03) — optisch analog zu .frage-nummer
   in der Evaluation, damit die Systematik wiedererkennbar ist. */
.eintrag-nummer {
    display: inline-block;
    margin-bottom: 6px;
    padding: 2px 10px;
    border-radius: 12px;
    background-color: #e0f0e0;
    color: #4c5c4c;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.03em;
}

.eintrag-titel {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 6px 0;
    color: #353535;
}

.eintrag-beschreibung {
    font-size: 13px;
    line-height: 22px;
    margin: 0;
    color: #555;
    text-align: justify;
    hyphens: auto;
}

/* Leerzustand */
.katalog-leer {
    text-align: center;
    padding: 60px 0;
    color: #888;
    font-size: 15px;
}

/* Anleitung Popup */
#anleitung-popup {
    position: fixed; /* fixiert am Bildschirm */
    top: 50%; /* vertikal zentriert */
    left: 50%; /* horizontal zentriert */
    transform: translate(-50%, -50%); /* exakte Zentrierung */
    background: #FFFFFF;
    padding: 50px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    max-width: 600px; /* Begrenzte Breite */
    width: 80%; /* auf kleineren Screens flexibel */
    text-align: left; /* Inhalt zentrieren */
}

/* Suche im Massnahmenkatalog */
.katalog-suche-zeile {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}

.katalog-suche {
    flex: 1;
    max-width: 420px;
    padding: 10px 14px;
    border: 1px solid #c7cec7;
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
    background: #FFFFFF;
}

.katalog-suche:focus {
    outline: none;
    border-color: #667A66;
    box-shadow: 0 0 0 2px rgba(102, 122, 102, 0.25);
}

.katalog-suche-treffer {
    font-size: 14px;
    color: #666;
    white-space: nowrap;
}

.katalog-toggle-alle {
    padding: 10px 16px;
    border: 1px solid #667A66;
    border-radius: 8px;
    background-color: #E7F1E5;
    color: #353535;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}

.katalog-toggle-alle:hover {
    background-color: #d7e7d5;
}

/* Bei aktiver Suche: Zweige ohne Treffer ausblenden, Rest aufklappen
   (ueberstimmt die Inline-max-height der Akkordeon-Animation) */
.katalog-ohne-treffer {
    display: none !important;
}

.katalog-suche-aktiv .acc-body {
    max-height: none !important;
}

/* ===== "Maßnahme einreichen"-Formular ===== */

.einreichen-button-row {
    display: flex;
    justify-content: flex-end;
    margin: 20px 0;
}

.einreichen-hinweis {
    font-size: 14px;
}

.einreichen-box {
    max-width: 520px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    text-align: left;
    position: relative;
    margin: 0 auto;
}

.popup-close {
    position: absolute;
    top: 16px;
    right: 20px;
    cursor: pointer;
    font-size: x-large;
    line-height: 1;
}

.einreichen-intro {
    font-size: 14px;
    color: #555;
    margin-bottom: 15px;
}

.einreichen-form {
    display: grid;
    gap: 6px;
}

.einreichen-form label {
    font-size: 14px;
    font-weight: 600;
    margin-top: 8px;
}

.einreichen-form input,
.einreichen-form textarea,
.einreichen-form select {
    box-sizing: border-box;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #C0C5DC;
    border-radius: 10px;
    font-size: 15px;
    font-family: Montserrat, sans-serif;
}

/* Ohne appearance:none rendert der native Dropdown-Pfeil des <select> in
   manchen Browsern eckig, dann wirken nur zwei der vier Ecken abgerundet -
   deshalb eigener Pfeil per Hintergrundgrafik. */
.einreichen-form select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 36px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667A66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
}

.einreichen-skala-hinweis {
    box-sizing: border-box;
    width: 100%;
    font-size: 13px;
    color: #555;
    background-color: #E7F1E5;
    border-radius: 8px;
    padding: 8px 12px;
    margin-top: 10px;
}

.einreichen-bewertung-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}

.einreichen-bewertung-grid label {
    font-size: 14px;
    margin-top: 8px;
}

.einreichen-form button[type="submit"] {
    justify-self: center;
    margin-top: 22px;
    margin-bottom: 10px;
    padding: 10px 40px;
}

/* ===== Bildschirm (ab 1600px) ===== */
@media (min-width: 1600px) {
    .cardempfehlungen {
        padding: 50px 30px;
    }

    .iconempfehlungen {
        width: 140px;
    }

    .hinweis-box, .hinweis-boxen .hinweis-box {
        max-width: 420px;
        font-size: 13px;
        padding: 12px 16px;
    }

    .content-container {
        gap: 64px;
    }

    .circle-wrapper {
        width: clamp(520px, 27vw, 580px);
    }

    .segment {
        font-size: 22px;
    }

    #mini-circle h2 {
        font-size: 18px;
    }

    #popup {
        max-width: 760px;
        padding: 24px 36px;
    }

    #popup-content, #popup-grafik-einschaetzung, #popup-kennzahlen {
        font-size: 14px;
        line-height: 26px;
    }

    #popup-title {
        font-size: 18px;
    }
}

/* ===== Tablet (bis 1023px) =====
   Kreis und Popup untereinander, damit beide groß genug zum Lesen bleiben */
@media (max-width: 1023px) {
    .iconempfehlungen {
        width: 100px;
    }

    /* Die beiden Hinweise bleiben in einer Reihe am rechten Rand, die
       Überschrift links darf dafür umbrechen */
    .hinweis-boxen {
        flex-wrap: nowrap;
    }

    .hinweis-boxen .hinweis-box {
        flex: 0 1 260px;
    }

    .content-container {
        flex-direction: column;
        gap: 40px;
        margin: 40px 0;
    }

    .circle-wrapper {
        width: clamp(300px, 50vw, 420px);
    }

    #popup {
        flex: 0 0 auto;
        width: 100%;
        max-width: 680px;
        scroll-margin-top: 20px; /* Abstand beim automatischen Hinscrollen */
    }

    .katalog-suche-zeile {
        flex-wrap: wrap;
    }
}

/* ===== Handy (bis 599px) ===== */
@media (max-width: 599px) {
    .einreichen-button-row {
        justify-content: stretch;
    }

    .einreichen-button-row .buttondark {
        width: 100%;
    }

    .header-row {
        flex-direction: column;
        gap: 0;
    }

    .hinweis-boxen .hinweis-box {
        max-width: 100%;
    }

    .circle-wrapper {
        width: min(85vw, 340px);
    }

    .segment {
        font-size: 14px;
    }

    #mini-circle h2 {
        font-size: 12px;
    }

    #popup {
        padding: 16px 18px;
        border-radius: 24px;
    }

    /* Grafik über statt neben der Einschätzung */
    #popup-grafik-wrapper {
        flex-direction: column;
    }

    #popup-grafik {
        width: 100%;
    }

    #popup-content, #popup-grafik-einschaetzung, #popup-kennzahlen {
        text-align: left;
    }

    .popup-nav {
        gap: 8px;
    }

    .acc-saeule-header {
        padding: 14px 16px;
        font-size: 15px;
    }

    .acc-saeule-body, .acc-kategorie-body, .acc-gruppe-body {
        padding: 0 10px;
    }

    .katalog-suche {
        max-width: none;
    }

    #anleitung-popup {
        width: 90%;
        padding: 25px;
    }
}