/* ============================================================
   Seitenkopf
   ============================================================ */


/* ------------------------------------------------------------
   Grundstruktur
   ------------------------------------------------------------ */

.seitenkopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: var(--abstand-5);

    margin-bottom: var(--abstand-6);
}


/* ------------------------------------------------------------
   Titelbereich
   ------------------------------------------------------------ */

.seitenkopf-inhalt {
    min-width: 0;
}


.seitenkopf-titel {
    margin-bottom: var(--abstand-2);

    color: var(--farbe-text);

    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
}


.seitenkopf-beschreibung {
    max-width: 750px;

    margin: 0;

    color: var(--farbe-text-sekundaer);

    font-size: 1rem;
    line-height: 1.6;
}


/* ------------------------------------------------------------
   Aktionen
   ------------------------------------------------------------ */

.seitenkopf-aktionen {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: var(--abstand-2);

    flex-shrink: 0;
}


/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 700px) {

    .seitenkopf {
        flex-direction: column;

        gap: var(--abstand-4);
    }


    .seitenkopf-titel {
        font-size: 1.75rem;
    }


    .seitenkopf-aktionen {
        width: 100%;
    }

}

/* ============================================================
   Inhaltsbereiche
   ============================================================ */


/* ------------------------------------------------------------
   Standardbereich
   ------------------------------------------------------------ */

.inhaltsbereich {
    background-color: var(--farbe-oberflaeche);

    border: 1px solid var(--farbe-rahmen);

    border-radius: var(--radius-gross);
}


/* ------------------------------------------------------------
   Standard-Padding
   ------------------------------------------------------------ */

.inhaltsbereich-inhalt {
    padding: var(--abstand-5);
}


/* ------------------------------------------------------------
   Bereichskopf
   ------------------------------------------------------------ */

.inhaltsbereich-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--abstand-4);

    padding: var(--abstand-4) var(--abstand-5);

    border-bottom: 1px solid var(--farbe-rahmen);
}


.inhaltsbereich-titel {
    margin: 0;

    font-size: 1.125rem;
    font-weight: 650;
}


/* ------------------------------------------------------------
   Bereichsbeschreibung
   ------------------------------------------------------------ */

.inhaltsbereich-beschreibung {
    margin: var(--abstand-1) 0 0;

    color: var(--farbe-text-sekundaer);

    font-size: 0.875rem;
}

@media (max-width: 600px) {

    .inhaltsbereich-inhalt {
        padding: var(--abstand-4);
    }


    .inhaltsbereich-kopf {
        align-items: flex-start;
        flex-direction: column;

        padding: var(--abstand-4);
    }

}