/* ----------------------------------------------------------
   Grundeinstellungen
---------------------------------------------------------- */

@font-face {
    font-family: "Information FSL";
    src: url("../fonts/InformationFSL-Regular.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Information FSL";
    src: url("../fonts/InformationFSL-Italic.woff2") format("woff2");
    font-style: italic;
    font-weight: 400;
    font-display: swap;
}

:root {
    --seitenrand: 40px;
    --schriftgroesse: 20px;
    --zeilenhoehe: 1.15;
    --inhalt-max: 740px;
    --grau: rgb(0 0 0 / 55%);
    --animationsgrau: rgb(0 0 0 / 20%);
}

* {
    box-sizing: border-box;
}

html {
    background: #fff;
}

body {
    min-height: 100vh;
    margin: 0;
    color: #000;
    background: #fff;
    font-family: "Information FSL", Arial, Helvetica, sans-serif;
    font-size: var(--schriftgroesse);
    line-height: var(--zeilenhoehe);
    font-weight: 400;
    font-feature-settings: "ss10" 1;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
}

.unterseitenkoerper {
    height: 100vh;
    overflow: hidden;
}

a {
    color: inherit;
}

.mixcase__zeichen--gross {
    text-transform: uppercase;
}

.mixcase__zeichen--klein {
    text-transform: lowercase;
}

a[data-mixcase]:hover .mixcase__zeichen,
a[data-mixcase]:focus .mixcase__zeichen {
    text-transform: none;
}

p,
h1,
h2,
address {
    margin-top: 0;
}

p {
    margin-bottom: 1.5em;
}

address {
    font-style: normal;
}

.skip-link {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    padding: 0.5rem;
    background: #fff;
    transform: translateY(-150%);
}

.skip-link:focus {
    transform: translateY(0);
}

:focus-visible {
    outline: 2px solid #000;
    outline-offset: 4px;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ----------------------------------------------------------
   Startseite
---------------------------------------------------------- */

.startseite {
    position: relative;
    min-height: 100vh;
}

.startseite__wortzeichen {
    position: absolute;
    top: var(--seitenrand);
    left: var(--seitenrand);
    z-index: 2;
    margin: 0;
    white-space: nowrap;
    font-size: inherit;
    font-weight: 400;
}

.startseite__wortzeichen-link {
    color: #000;
    text-decoration: none;
}

.startseite__wortzeichen-link:hover .mixcase__zeichen,
.startseite__wortzeichen-link:focus .mixcase__zeichen {
    text-transform: none;
}

.startseite__navigation {
    display: grid;
    grid-template-columns: repeat(2, 50%);
    grid-template-rows: repeat(3, calc(100vh / 3));
    min-height: 100vh;
}

.startseite__eintrag {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.startseite__eintrag--links {
    grid-column: 1;
}

.startseite__eintrag--rechts {
    grid-column: 2;
}

.startseite__eintrag--oben {
    grid-row: 1;
}

.startseite__eintrag--mitte {
    grid-row: 2;
}

.startseite__eintrag--unten {
    grid-row: 3;
}

.startseite__link {
    color: #000;
    text-decoration: none;
}

.startseite__platzhalter {
    color: #000;
    animation: platzhalter-atmen 4.6s ease-out infinite;
}

.startseite__eintrag--rechts.startseite__eintrag--oben .startseite__platzhalter {
    animation-delay: 0s;
    animation-fill-mode: backwards;
}

.startseite__eintrag--rechts.startseite__eintrag--mitte .startseite__platzhalter {
    animation-delay: 1s;
    animation-fill-mode: backwards;
}

.startseite__eintrag--rechts.startseite__eintrag--unten .startseite__platzhalter {
    animation-delay: 2s;
    animation-fill-mode: backwards;
}

@keyframes platzhalter-atmen {
    0%,
    39.4737% {
        color: #000;
    }

    65.7895%,
    73.6842% {
        color: var(--animationsgrau);
    }

    100% {
        color: #000;
    }
}

@media (prefers-reduced-motion: reduce) {
    .startseite__platzhalter {
        color: var(--grau);
        animation: none;
    }
}

/* ----------------------------------------------------------
   Unterseitenrahmen
---------------------------------------------------------- */

.unterseitenrahmen {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: minmax(0, 1fr);
    height: 100vh;
    overflow: hidden;
}

.unterseitenrahmen__spalte {
    min-width: 0;
    min-height: 0;
    height: auto;
    overflow-y: auto;
}

.seite__scrollbereich:focus-visible,
.detailseite__inhalt:focus-visible {
    outline: 2px solid #000;
    outline-offset: -2px;
}

.seite__scrollbereich,
.detailseite__kontext,
.detailseite__inhaltsspalte {
    display: flex;
    flex-direction: column;
}

.detailseite__inhaltsspalte {
    overflow: hidden;
}

.unterseitenrahmen--links .seite__anker,
.unterseitenrahmen--links .detailseite__inhaltsspalte {
    grid-column: 1;
    grid-row: 1;
}

.unterseitenrahmen--links .seite__scrollbereich,
.unterseitenrahmen--links .detailseite__kontext {
    grid-column: 2;
    grid-row: 1;
}

.unterseitenrahmen--rechts .seite__anker,
.unterseitenrahmen--rechts .detailseite__kontext {
    grid-column: 2;
}

.unterseitenrahmen--rechts .seite__anker {
    grid-row: 1;
}

.unterseitenrahmen--rechts .detailseite__kontext {
    grid-row: 1;
}

.unterseitenrahmen--rechts .seite__scrollbereich,
.unterseitenrahmen--rechts .detailseite__inhaltsspalte {
    grid-column: 1;
}

.unterseitenrahmen--rechts .seite__scrollbereich {
    grid-row: 1;
}

.unterseitenrahmen--rechts .detailseite__inhaltsspalte {
    grid-row: 1;
}

.seite__anker {
    position: relative;
}

.bereichsnavigation {
    position: absolute;
    left: 50%;
    width: min(calc(100% - (2 * var(--seitenrand))), var(--inhalt-max));
    text-align: center;
    transform: translateX(-50%);
}

.bereichsnavigation--oben {
    top: calc(100vh / 6);
}

.bereichsnavigation--mitte {
    top: 50vh;
}

.bereichsnavigation--unten {
    top: calc((100vh / 6) * 5);
}

.bereichsnavigation__titel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    color: #000;
    text-decoration: none;
    transform: translateY(-50%);
}

.submenu {
    position: absolute;
    top: 0.575em;
    left: 0;
    width: 100%;
    line-height: var(--zeilenhoehe);
}

.submenu__link {
    color: var(--grau);
    text-decoration: none;
}

.submenu__link--aktiv {
    color: #000;
}

.submenu__trenner {
    color: var(--grau);
}

.submenu__trenner--aktiv {
    color: #000;
}

.seite__gegenueber {
    display: flex;
    flex: 1 0 auto;
    min-height: 0;
    flex-direction: column;
    padding: var(--seitenrand);
}

.seite__inhalt {
    width: min(100%, var(--inhalt-max));
}

.seite__inhalt--liste {
    width: 100%;
}

.seite__schliessen {
    position: fixed;
    top: 0;
    right: 6px;
    z-index: 10;
    width: 44px;
    height: 44px;
    text-decoration: none;
}

.seite__schliessen[href] {
    color: #000;
}

.seite__schliessen span {
    position: absolute;
    top: 13px;
    right: 11px;
    display: block;
    width: 18px;
    height: 18px;
    overflow: hidden;
    font-size: 0;
}

.seite__schliessen span::before,
.seite__schliessen span::after {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1.5px;
    background: currentColor;
    content: "";
}

.seite__schliessen span::before {
    transform: rotate(45deg);
}

.seite__schliessen span::after {
    transform: rotate(-45deg);
}

.textinhalt a {
    color: var(--grau);
    text-decoration: none;
}

.textinhalt a:hover {
    color: #000;
}

.sprachtext__fassung {
    display: flow-root;
}

.textinhalt + .sprachtext {
    margin-top: 4rem;
}

.textinhalt:has(+ .sprachtext) > :last-child {
    margin-bottom: 0;
}

.sprachtext__fassung + .sprachtext__fassung {
    margin-top: 4rem;
}

.sprachtext__sprache {
    float: left;
    margin: 0 0.7em 0 0;
    font-size: inherit;
    font-weight: 400;
}

.sprachtext__inhalt > :last-child {
    margin-bottom: 0;
}

.kontaktlogo {
    display: block;
    width: min(100%, 90px);
    margin-top: 4rem;
}

.kontaktlogo__bild {
    display: block;
    width: 100%;
    height: auto;
}

/* ----------------------------------------------------------
   Team
---------------------------------------------------------- */

.team__gruppe {
    margin: 0;
    padding-bottom: 1em;
    text-align: center;
    font-size: inherit;
    font-weight: 400;
    border-bottom: 1px solid currentColor;
}

.team + .team {
    margin-top: 2em;
}

.team__person {
    padding: 1em 0;
    border-bottom: 1px solid currentColor;
}

.team__liste {
    margin: 0;
    padding: 0;
    list-style: none;
}

.team__name,
.team__funktion {
    margin: 0;
    font-size: inherit;
    font-weight: 400;
}

.team__email {
    display: block;
    color: var(--grau);
    text-decoration: none;
}

.team__email:hover {
    color: #000;
}

.team__text {
    margin: 0;
    padding: 1em 0;
    border-bottom: 1px solid currentColor;
}

.team__link {
    color: var(--grau);
    text-decoration: none;
}

.team__link:hover {
    color: #000;
}

/* ----------------------------------------------------------
   Listen
---------------------------------------------------------- */

.liste__gruppentitel {
    margin: 0;
    padding-bottom: 1em;
    text-align: center;
    font-size: inherit;
    font-weight: 400;
    border-bottom: 1.5px solid currentColor;
}

.liste__gruppentitel-text,
.liste__zeile,
.liste__meta {
    display: block;
    width: min(100%, var(--inhalt-max));
}

.liste__eintrag {
    display: block;
    padding: 1em 0;
    border-bottom: 1.5px solid currentColor;
    text-decoration: none;
}

.liste__eintraege {
    margin: 0;
    padding: 0;
    list-style: none;
}

.liste__eintrag--aktiv {
    color: #000;
}

.seite__gegenueber .liste__eintrag {
    color: #000;
}

.seite__gegenueber .liste__eintrag[href]:hover {
    color: var(--grau);
}

.liste__meta {
    margin-top: 0.5em;
    font-size: 15px;
}

/* ----------------------------------------------------------
   Detailseite
---------------------------------------------------------- */

.detailseitenkoerper--links,
.detailseitenrahmen--links {
    background: linear-gradient(to right, #f5f5f5 0 50%, #fff 50% 100%);
}

.detailseitenkoerper--rechts,
.detailseitenrahmen--rechts {
    background: linear-gradient(to left, #f5f5f5 0 50%, #fff 50% 100%);
}

.detailseite__inhalt,
.detailseite__liste {
    padding: var(--seitenrand);
}

.detailseite__inhalt {
    flex: 1 1 0;
    width: min(100%, calc(var(--inhalt-max) + (2 * var(--seitenrand))));
    min-height: 0;
    overflow-y: auto;
}

.detailseite__liste {
    flex: 0 0 auto;
    min-height: 0;
}

.detailseite__liste > .liste {
    width: 100%;
}

.liste + .liste .liste__gruppentitel {
    padding-top: 1em;
}

.detailseite__kopf {
    margin-bottom: 2em;
}

.detailseite__titel,
.detailseite__kopfzeile {
    margin: 0;
    font-size: inherit;
    font-weight: 400;
}

.detailseite__meta {
    margin-bottom: 0;
    margin-top: 0.5em;
    font-size: 15px;
}

.detailseite__autor {
    margin-bottom: 1.5em;
}

.detailseite__zurueck {
    display: inline-block;
    margin-top: 4rem;
    color: var(--grau);
    text-decoration: none;
}

.detailseite__zurueck:hover,
.detailseite__zurueck:focus-visible {
    color: #000;
}

.detailseitenrahmen .liste__eintrag:not(.liste__eintrag--aktiv) {
    color: #000;
}

.detailseitenrahmen .liste__eintrag--aktiv {
    color: var(--grau);
}

.detailseitenrahmen .liste__eintrag:not(.liste__eintrag--aktiv)[href]:hover,
.detailseitenrahmen .liste__eintrag:not(.liste__eintrag--aktiv)[href]:focus-visible {
    color: var(--grau);
}

.detailseitenrahmen .liste__eintrag--aktiv[href]:hover,
.detailseitenrahmen .liste__eintrag--aktiv[href]:focus-visible {
    color: #000;
}

/* ----------------------------------------------------------
   Galerie
---------------------------------------------------------- */

.galerie {
    position: relative;
    width: 100%;
    margin-block: 4rem;
    overflow: hidden;
}

.galerie:not(.galerie--bereit) {
    overflow: visible;
}

.galerie:not(.galerie--bereit) .galerie__slides {
    display: block;
}

.galerie:not(.galerie--bereit) .galerie__slide + .galerie__slide {
    margin-top: 2rem;
}

.galerie:not(.galerie--bereit) .galerie__navigation {
    display: none;
}

.galerie:not(.galerie--bereit) > .galerie__info {
    display: none;
}

.galerie__slide {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: auto;
}

.galerie--bereit .galerie__fallback-info {
    display: none;
}

.galerie__fallback-info {
    margin: 0.5rem 0 0;
    font-size: 15px;
    text-align: center;
}

.galerie__bildlink {
    display: flex;
    width: 100%;
    height: 280px;
    justify-content: center;
    align-items: center;
}

.galerie__bild {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    margin-inline: auto;
}

.galerie__navigation {
    position: absolute;
    top: 140px;
    z-index: 2;
    display: grid;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    color: #000;
    background: transparent;
    place-items: center;
    transform: translateY(-50%);
    cursor: pointer;
}

.galerie__navigation span {
    display: block;
    width: 0;
    height: 0;
    overflow: hidden;
    font-size: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}

.galerie__navigation--zurueck {
    left: 0;
}

.galerie__navigation--zurueck span {
    border-right: 8px solid #000;
}

.galerie__navigation--weiter {
    right: 0;
}

.galerie__navigation--weiter span {
    border-left: 8px solid #000;
}

.galerie__info {
    margin: 0.5rem 0 0;
    font-size: 15px;
    text-align: center;
}

.galerie__zaehler + .galerie__caption {
    margin-left: 0.5em;
}

.pswp {
    --pswp-bg: #f5f5f5;
    --pswp-placeholder-bg: #f5f5f5;
    --pswp-icon-color: #000;
    --pswp-icon-color-secondary: #fff;
    --pswp-icon-stroke-color: #000;
    --pswp-error-text-color: #000;
}

.pswp__counter {
    display: none;
}

.pswp .pswp__img,
.pswp .pswp__img:active {
    cursor: default;
}

.pswp__galerie-caption {
    position: absolute;
    right: var(--seitenrand);
    bottom: 0.75rem;
    left: var(--seitenrand);
    z-index: 10;
    font-size: 15px;
    line-height: var(--zeilenhoehe);
    text-align: center;
}

.pswp__button--close {
    margin-right: 0;
}

.pswp__button--close .pswp__icn,
.pswp__button--arrow .pswp__icn {
    display: none;
}

.pswp__button--close::before,
.pswp__button--close::after {
    position: absolute;
    top: 22px;
    right: 17px;
    display: block;
    width: 18px;
    height: 1.5px;
    background: currentColor;
    content: "";
}

.pswp__button--close::before {
    transform: rotate(45deg);
}

.pswp__button--close::after {
    transform: rotate(-45deg);
}

.pswp__button--arrow--prev {
    left: 15px;
}

.pswp__button--arrow--next {
    right: 15px;
}

.pswp__button--arrow::before {
    display: block;
    width: 0;
    height: 0;
    margin-inline: auto;
    content: "";
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
}

.pswp__button--arrow--prev::before {
    border-right: 9px solid #000;
}

.pswp__button--arrow--next::before {
    border-left: 9px solid #000;
}

@media (prefers-reduced-motion: reduce) {
    .galerie .swiper-wrapper,
    .pswp * {
        transition-duration: 0s !important;
        animation-duration: 0s !important;
    }
}

/* ----------------------------------------------------------
   Footer
---------------------------------------------------------- */

.fuss {
    width: min(50%, calc(var(--inhalt-max) + (2 * var(--seitenrand))));
    margin: 0 0 0 50%;
    padding: 5rem var(--seitenrand) var(--seitenrand);
}

.fuss__navigation {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.unterseitenrahmen .fuss {
    flex: 0 0 auto;
    width: min(100%, calc(var(--inhalt-max) + (2 * var(--seitenrand))));
    margin: auto 0 0;
    padding-top: 2rem;
}

.fuss__link {
    color: var(--grau);
    text-decoration: none;
    font-size: 15px;
}

.fuss__link:hover {
    color: #000;
}

/* ----------------------------------------------------------
   404
---------------------------------------------------------- */

.fehlerseite {
    min-height: 100vh;
    padding: var(--seitenrand);
}

.fehlerseite__inhalt {
    width: min(100%, var(--inhalt-max));
}

.fehlerseite h1 {
    font-size: inherit;
    font-weight: 400;
}

/* Breite Screens behalten 40 px; kompakte Fenster verwenden den halben Rand. */
@media (max-width: 1000px), (max-width: 1200px) and (max-height: 800px) {
    :root {
        --seitenrand: 20px;
    }
}

/* Im kompakten Zweispaltenlayout scrollt das × mit der rechten Spalte. */
@media (min-width: 901px) and (max-width: 1000px),
       (min-width: 901px) and (max-width: 1200px) and (max-height: 800px) {
    .unterseitenrahmen__spalte--rechts {
        position: relative;
    }

    .seite__schliessen {
        position: absolute;
    }
}

/* Bei niedrigen Desktopfenstern bleibt das Home-Raster lesbar und scrollt. */
@media (min-width: 901px) and (max-height: 720px) {
    .startseite__navigation {
        grid-template-rows: repeat(3, 280px);
        min-height: 840px;
    }
}

/* ----------------------------------------------------------
   Mobile / lineares Layout
---------------------------------------------------------- */

@media (max-width: 900px) {
    .unterseitenkoerper {
        height: auto;
        overflow: visible;
    }

    .startseite {
        min-height: 100vh;
        padding: var(--seitenrand);
    }

    .startseite__wortzeichen {
        position: static;
        max-width: 18em;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .startseite__navigation {
        display: flex;
        min-height: 0;
        padding: 6rem 0 2rem;
        flex-direction: column;
        gap: 3.5rem;
    }

    .startseite__eintrag {
        display: block;
        text-align: center;
    }

    .unterseitenrahmen {
        display: block;
        height: auto;
        overflow: visible;
    }

    .unterseitenrahmen__spalte {
        height: auto;
        overflow: visible;
    }

    .detailseite__inhalt {
        flex: none;
        height: auto;
        overflow: visible;
    }

    .detailseitenkoerper,
    .detailseitenrahmen {
        background: #fff;
    }

    .seite__schliessen {
        position: absolute;
    }

    .seite__anker {
        padding: 4rem var(--seitenrand) 3rem;
    }

    .bereichsnavigation {
        position: static;
        width: 100%;
        transform: none;
        text-align: center;
    }

    .bereichsnavigation__titel,
    .submenu {
        position: static;
        width: auto;
        transform: none;
    }

    .seite__gegenueber {
        padding: 0 var(--seitenrand) var(--seitenrand);
    }

    .detailseite__inhalt,
    .detailseite__liste {
        padding: var(--seitenrand);
    }

    .detailseite__liste {
        display: none;
    }

    .pswp__button--arrow--prev {
        left: 0;
    }

    .pswp__button--arrow--next {
        right: 0;
    }

    .pswp__button--arrow--prev::before {
        margin-right: auto;
        margin-left: 10px;
    }

    .pswp__button--arrow--next::before {
        margin-right: 10px;
        margin-left: auto;
    }

    .seite__inhalt,
    .detailseite__inhalt,
    .detailseite__liste > * {
        width: 100%;
        max-width: none;
    }

    .liste__eintrag,
    .startseite__platzhalter,
    .fuss__link {
        overflow-wrap: anywhere;
    }

    .fuss {
        width: 100%;
        margin-left: 0;
        padding: 5rem var(--seitenrand) var(--seitenrand);
    }
}