/* Page-specific additions only. Colors, fonts, h1, h2, blockquote, list dots and links
       come from style.css; everything here is scoped to .forschung. */
.forschung {
    padding-top: 48px;
    padding-bottom: 80px;
}

.forschung .lead {
    color: var(--color-muted);
}

/* Table of contents. Deliberately a div, not a nav: style.css styles every <nav> as the site header menu. */
.forschung .toc {
    margin: 32px 0 8px;
    padding: 20px 24px;
    background: var(--color-bg-alt);
    border-left: 3px solid var(--color-accent);
    box-shadow: var(--cover-shadow);
}

.forschung .toc h2 {
    font-size: 1.2rem;
    margin-bottom: 12px;
}

.forschung .toc ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

.forschung .toc li {
    margin: 0 0 4px 0;
    padding-left: 32px;
}

.forschung .toc li::before {
    content: attr(data-nr);
    position: absolute;
    left: 0;
    top: 0;
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    transform: none;
    color: var(--color-muted);
}

.forschung .toc a {
    color: var(--color-text);
    text-decoration: none;
}

.forschung .toc a:hover {
    color: var(--color-accent);
}

/* Research areas */
.forschung section {
    padding: 40px 0 24px;
    border-bottom: 1px solid var(--color-border);
    scroll-margin-top: 16px;
}

.forschung section:last-of-type {
    border-bottom: none;
}

.forschung h2.area {
    display: grid;
    grid-template-columns: 2.6rem 1fr;
    align-items: baseline;
}

.forschung h2.area .nr {
    color: var(--color-accent);
}

/* Numbered list (area 3): numbers instead of the site's round dots */
.forschung ol.plain {
    list-style: none;
    margin: 0 0 16px 0;
    padding: 0;
    counter-reset: punkt;
}

.forschung ol.plain li {
    counter-increment: punkt;
}

.forschung ol.plain li::before {
    content: counter(punkt) ".";
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    transform: none;
    top: 0;
    left: 0;
    color: var(--color-accent);
    font-weight: 600;
}

/* Closing sentence of an area: "no result yet" */
.forschung .status {
    color: var(--color-muted);
    font-style: italic;
}

/* Overall research status, styled like .institut-hinweis */
.forschung .forschungsstand {
    margin: 40px 0 0;
    padding: 20px 24px 8px;
    background: var(--color-bg-alt);
    border-left: 4px solid var(--color-accent);
}

.forschung .forschungsstand h3 {
    margin-bottom: 12px;
}

@media (max-width: 700px) {
    .forschung {
        padding-top: 32px;
    }

    .forschung h2.area {
        font-size: 1.5rem;
        grid-template-columns: 2.2rem 1fr;
    }
}