/* =========================================
   PHASE 6.1
   NAVIGATION / KARTEN / FORMULARE
   Stadt-Kritik
========================================= */


/* =========================================
   HAUPTNAVIGATION
========================================= */

#main-navigation {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.navigation-button {
    width: 100%;

    padding: 9px 10px;

    border: 1px solid transparent;
    border-radius: 7px;

    background: transparent;

    color: #26313a;

    text-align: left;

    font-size: 13px;
    line-height: 1.35;

    cursor: pointer;

    transition:
        background 0.15s ease,
        border-color 0.15s ease;
}

.navigation-button:hover {
    background: #eef8f1;
    border-color: #d7eadc;
}

.navigation-button.active {
    background: #e4f3e8;
    border-color: #c8e3cf;

    font-weight: 700;
}


/* =========================================
   UNTERNAVIGATION
========================================= */

#subcategory-navigation {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.sub-navigation-button {
    width: 100%;

    padding: 8px 10px;

    border: 1px solid transparent;
    border-radius: 7px;

    background: transparent;

    color: #36414a;

    text-align: left;

    font-size: 13px;
    line-height: 1.35;

    cursor: pointer;

    transition:
        background 0.15s ease,
        border-color 0.15s ease;
}

.sub-navigation-button:hover {
    background: #eef8f1;
    border-color: #d7eadc;
}

.sub-navigation-button.active {
    background: #e8edf1;
    border-color: #d6dde3;

    font-weight: 700;
}


/* =========================================
   INHALTSKARTEN
========================================= */

.content-card {
    padding: 18px;

    margin-bottom: 14px;

    border: 1px solid #e0e4e8;
    border-radius: 10px;

    background: #ffffff;

    box-shadow:
        0 2px 7px rgba(20, 30, 40, 0.04);
}

.content-card h3 {
    margin-top: 0;
}


/* =========================================
   STARTSEITE
========================================= */

.home-page {
    max-width: 980px;
    margin: 0 auto;
}


/* =========================================
   AKTUELLER BANNER
========================================= */

.home-banner {
    width: 100%;

    box-sizing: border-box;

    padding: 16px 18px;
    margin-bottom: 16px;

    border: 1px solid #e0e5e8;
    border-radius: 10px;

    background: #ffffff;
}

.home-banner-label {
    margin-bottom: 5px;

    color: #5e6972;

    font-size: 13px;
    font-weight: 700;
}

.home-banner h1 {
    margin: 0 0 7px 0;

    font-size: 22px;
}

.home-banner p {
    margin: 0 0 11px 0;

    line-height: 1.45;
}

.home-banner-button {
    padding: 7px 12px;

    border: 1px solid #ccd4da;
    border-radius: 7px;

    background: #f4f6f8;

    cursor: pointer;

    font-size: 13px;
    font-weight: 600;
}

.home-banner-button:hover {
    background: #e8edf1;
}


/* =========================================
   STARTSEITEN-INFORMATION
========================================= */

.home-information {
    padding: 8px 2px;
}

.home-information h2 {
    margin-top: 0;
}


/* =========================================
   ZURÜCK
========================================= */

.back-home-button {
    border: none;

    background: transparent;

    cursor: pointer;

    padding: 4px 0;
    margin-bottom: 10px;

    font-size: 14px;
}


/* =========================================
   ARTIKEL / PROBLEME
========================================= */

.articles-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 14px;

    margin-bottom: 12px;
}

.articles-header h2 {
    margin: 0;
}


/* =========================================
   ARTIKEL-KARTE
========================================= */

.article-card {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 14px;

    padding: 15px;
    margin-bottom: 10px;

    background: #ffffff;

    border: 1px solid #e0e4e8;
    border-radius: 9px;

    cursor: pointer;

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        border-color 0.15s ease;
}

.article-card:hover {
    transform: translateY(-1px);

    border-color: #cfd7dd;

    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.07);
}

.article-card-content {
    min-width: 0;
}

.article-card h3 {
    margin-top: 0;
    margin-bottom: 5px;

    font-size: 16px;
}

.article-card p {
    margin-bottom: 8px;

    line-height: 1.45;
}


/* =========================================
   ARTIKEL INFORMATIONEN
========================================= */

.article-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    color: #68727b;

    font-size: 12px;
}

.article-arrow {
    flex-shrink: 0;

    font-size: 22px;
}


/* =========================================
   BESCHWERDE BUTTON
========================================= */

.complaint-button {
    padding: 7px 11px;

    border: 1px solid #36a94b;
    border-radius: 7px;

    background: #45bd57;
    color: #102915;

    cursor: pointer;

    font-size: 12px;
    font-weight: 700;
}

.complaint-button:hover {
    background: #3caf4f;
}


/* =========================================
   STATISTIK
========================================= */

.complaint-statistic {
    margin: 16px 0;
    padding: 12px 14px;

    border-radius: 8px;

    background: #eef2f5;

    font-size: 15px;
}

.complaint-statistic strong {
    font-size: 19px;
}


/* =========================================
   STATUS
========================================= */

.article-status {
    padding: 9px 11px;

    border-radius: 7px;

    background: #fff4d6;

    font-size: 13px;
}


/* =========================================
   BESCHWERDEFORMULAR
========================================= */

.complaint-form-card {
    max-width: 800px;
}

.form-group {
    margin-bottom: 14px;
}

.form-group label {
    display: block;

    margin-bottom: 5px;

    font-size: 13px;
    font-weight: 700;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;

    box-sizing: border-box;

    padding: 9px 11px;

    border: 1px solid #cbd3da;
    border-radius: 7px;

    background: #ffffff;

    font-family: inherit;
    font-size: 14px;
}

.form-group textarea {
    resize: vertical;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;

    border-color: #71c88d;

    box-shadow:
        0 0 0 3px rgba(113, 200, 141, 0.13);
}

.form-group small {
    display: block;

    margin-top: 5px;

    color: #737d86;

    font-size: 12px;
}


/* =========================================
   HINWEIS
========================================= */

.complaint-notice {
    margin: 14px 0;
    padding: 11px 13px;

    border-radius: 8px;

    background: #eef2f5;

    font-size: 13px;
}

.complaint-notice p {
    margin-bottom: 0;
}


/* =========================================
   ABSENDEN
========================================= */

.complaint-submit-button {
    padding: 9px 14px;

    border: 1px solid #5dbf79;
    border-radius: 7px;

    background: #71d591;

    cursor: pointer;

    font-size: 13px;
    font-weight: 700;
}

.complaint-submit-button:hover {
    background: #63c982;
}


/* =========================================
   ERFOLG
========================================= */

.complaint-success {
    max-width: 800px;
}

.complaint-summary {
    margin: 16px 0;
    padding: 13px;

    border-radius: 8px;

    background: #eef2f5;
}


/* =========================================
   PHASE 6.2 - TABLET / HANDY
========================================= */

@media (max-width: 900px) {
    #main-navigation,
    #subcategory-navigation {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .navigation-button,
    .sub-navigation-button {
        min-height: 42px;
        padding: 9px 10px;
        font-size: 13px;
    }
}


@media (max-width: 650px) {
    .articles-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .article-card {
        padding: 13px;
    }

    .article-arrow {
        font-size: 18px;
    }

    .complaint-button,
    .complaint-submit-button {
        min-height: 34px;
    }
}