/* =========================================
   NORMALE INHALTSSEITEN
   MOBILE FIRST
========================================= */

.webseiten-content {
    width: min(calc(100% - 24px), var(--max-width));
    margin: 0 auto;
    padding: 2rem 0;
    color: var(--color-text);
    font-family: var(--font-text);
    text-align: left;
}

/* =========================================
   ÜBERSCHRIFTEN
========================================= */

.webseiten-content h1,
.webseiten-content h2,
.webseiten-content h3,
.webseiten-content h4,
.webseiten-content h5,
.webseiten-content h6 {
    color: var(--color-primary-dark);
    font-family: var(--font-heading);
    font-weight: normal;
    line-height: var(--line-height-heading);
    text-align: left;
}

.webseiten-content h1 {
    margin: 0 0 1.5rem;
    font-size: 2.4rem;
}

.webseiten-content h2 {
    margin: 2rem 0 1rem;
    font-size: 1.8rem;
}

.webseiten-content h3 {
    margin: 1.5rem 0 0.75rem;
    font-size: 1.5rem;
}

.webseiten-content h4 {
    margin: 1.25rem 0 0.5rem;
    font-size: 1.25rem;
}

.webseiten-content h5 {
    margin: 1.25rem 0 0.5rem;
    font-size: 1.1rem;
}

.webseiten-content h6 {
    margin: 1.25rem 0 0.5rem;
    font-size: 1rem;
}

/* =========================================
   FLIESSTEXT
========================================= */

.webseiten-content p {
    margin: 0 0 1rem;
    color: var(--color-text);
    font-family: var(--font-text);
    font-size: 1rem;
    line-height: var(--line-height-base);
    text-align: left;
}

/* =========================================
   LINKS
========================================= */

.webseiten-content a {
    color: var(--color-primary-dark);
    text-decoration: none;
}

.webseiten-content a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

/* =========================================
   LISTEN
========================================= */

.webseiten-content ul,
.webseiten-content ol {
    margin: 0 0 1.5rem 1.5rem;
    padding: 0;
}

.webseiten-content li {
    margin-bottom: 0.4rem;
    color: var(--color-text);
    line-height: var(--line-height-base);
}

/* =========================================
   ZITATE
========================================= */

.webseiten-content blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    color: var(--color-text);
    background-color: var(--color-primary-light);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-small);
}

/* =========================================
   BILDER
========================================= */

.webseiten-content img {
    max-width: 100%;
    height: auto;
}

/* =========================================
   TABELLEN
========================================= */

.webseiten-content table {
    width: 100%;
    border-collapse: collapse;
}

.webseiten-content th,
.webseiten-content td {
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    text-align: left;
}

.webseiten-content th {
    color: var(--color-text);
    background-color: var(--color-primary-light);
    font-weight: 700;
}

/* =========================================
   TRENNLINIE
========================================= */

.webseiten-content hr {
    width: 100%;
    height: 1px;
    margin: 2rem 0;
    background-color: var(--color-border);
    border: 0;
}

/* =========================================
   TABLET / DESKTOP
========================================= */

@media (min-width: 701px) {
    .webseiten-content {
        width: min(calc(100% - 40px), var(--max-width));
        padding: 3rem 0;
    }

    .webseiten-content h1 {
        font-size: 2.8rem;
    }

    .webseiten-content h2 {
        font-size: 2.2rem;
    }

    .webseiten-content h3 {
        font-size: 1.7rem;
    }
}