/* NOCH:NICHT 2027 – Konzeptseite
   Gestaltung nach dem Konzept-PDF (InDesign, Schrift Pragmatica).
   Pragmatica gibts nicht frei fürs Web: Fliesstext in Helvetica wie der Rest
   der KUBO-Seite, Titel in Archivo Black (kommt der Pragmatica Black am nächsten).
   Archivo Black liegt im ordner schriften/ (SIL Open Font License, siehe OFL.txt). */

@font-face {
    font-family: "Archivo Black";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("schriften/archivo-black-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Archivo Black";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("schriften/archivo-black-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --papier: #fff;
    --tinte: #000;
    --pink: #e83366;                 /* kontur NOCH:NICHT auf dem cover */

    --schwer: "Archivo Black", "Arial Black", "Helvetica Neue", Helvetica, sans-serif;
    --text: "Helvetica Neue", Helvetica, Arial, sans-serif;

    --rand: 56px;                    /* seitenrand */
    --navi: 300px;                   /* breite inhaltsverzeichnis */
    --nr: 104px;                     /* spalte für 1.1, 1.2 … (im pdf 36pt -> 108pt) */
    --e1: 104px;                     /* einzug stufe 1 */
    --e2: 52px;                      /* einzug stufe 2 */
}

html {
    box-sizing: border-box;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

*, *::before, *::after {
    box-sizing: inherit;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    margin: 0;
    background: var(--papier);
    color: var(--tinte);
    font-family: var(--text);
    font-size: 17px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: var(--pink);
    color: #000;
}

a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-underline-offset: .15em;
}

/* wie auf der KUBO-Seite: links werden beim drüberfahren kursiv */
a:hover {
    font-style: italic;
}

p {
    margin: 0 0 1em;
    hyphens: auto;
    -webkit-hyphens: auto;
    hyphenate-limit-chars: 7 3 3;
}

/* lange adressen umbrechen statt seitlich scrollen */
.tabelle dd a {
    overflow-wrap: anywhere;
    white-space: normal;
}

/* lange wörter wie «unterstützungsmöglichkeiten» auf sehr schmalen handys trennen */
@media (max-width: 400px) {
    h2, h3, h4 {
        overflow-wrap: break-word;
        hyphens: auto;
    }
}

p a {
    hyphens: manual;
    -webkit-hyphens: manual;
}

strong, .fett {
    font-weight: bold;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}


/* *** cover *** */

.cover {
    position: relative;
    /* etwas kürzer als der bildschirm: unten blitzt schon die seite hervor,
       damit klar ist, dass es weitergeht */
    min-height: calc(100vh - 92px);
    min-height: calc(100svh - 92px);
    padding: 20px var(--rand) 30px;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto 1fr auto auto;
    grid-template-areas:
        "zurueck anmelden"
        ".       termine"
        ".       ."
        "titel   titel"
        "runter  runter";
    gap: 0 40px;
    background: #d9b21a url("bilder/nochnicht/cover.jpg") 50% 62% / cover no-repeat;
    color: #000;
}

.zurueck {
    grid-area: zurueck;
    display: inline-flex;
    align-items: center;
    align-self: start;
    justify-self: start;
    margin-left: -12px;
    font-size: 22px;
    font-weight: bold;
    text-decoration: none;
}

.zurueck .x {
    width: 40px;
}

/* open call: schwarzer kasten wie das kubo-quadrat */
.anmelden {
    display: block;
    padding: 15px 22px 17px;
    background: #000;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.3;
    text-decoration: none;
}

.cover .anmelden {
    grid-area: anmelden;
    margin-top: 14px;
}

.anmelden-titel {
    display: block;
    margin-bottom: 6px;
    font-family: var(--schwer);
    font-weight: 400;
    font-size: 30px;
    line-height: 1;
    letter-spacing: -.035em;
}

.anmelden-los {
    display: block;
    margin-top: 10px;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
}

/* beim drüberfahren nur titel und "zum anmeldeformular" kursiv:
   die mittlere zeile wird kursiv breiter und würde die daten darunter verschieben */
.anmelden:hover {
    font-style: normal;
}

.anmelden:hover .anmelden-titel,
.anmelden:hover .anmelden-los {
    font-style: italic;
}

.anmelden:focus-visible,
.runter:focus-visible {
    outline: 3px solid var(--pink);
    outline-offset: 3px;
}

.cover-termine {
    grid-area: termine;
    margin: 18px 0 0;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.35;
}

/* ohne hervorgehobenen kasten: die termine rücken nach oben an seine stelle (schmaler: dort ist der sprachwechsel, auf dem handy stehen sie unter dem titel) */
@media (min-width: 800px) {
    .cover:not(:has(.anmelden)) .cover-termine {
        grid-area: anmelden;
        margin-top: 19px; /* erste zeile auf einer linie mit «zurück» */
    }
}

.cover-termine div {
    display: grid;
    grid-template-columns: 8.4em auto;
}

.cover-termine dd {
    margin: 0;
}

.cover-titel {
    grid-area: titel;
    align-self: end;
    font-size: clamp(36px, 12.4vw, 205px);
    margin-left: -.04em;
}

.logo {
    margin: 0;
    font-family: var(--schwer);
    font-weight: 400;
    font-size: 1em;
    line-height: .8;
    letter-spacing: -.045em;
    /* dünne pinke kontur wie im pdf */
    text-shadow:
        .012em 0 var(--pink), -.012em 0 var(--pink),
        0 .012em var(--pink), 0 -.012em var(--pink),
        .009em .009em var(--pink), -.009em -.009em var(--pink),
        .009em -.009em var(--pink), -.009em .009em var(--pink);
}

.logo-jahr {
    margin: .06em 0 0 .02em;
    font-size: .667em;
    line-height: .9;
    letter-spacing: -.03em;
}

/* kleine zeile in klammern unter dem titel, bündig mit dessen letztem buchstaben (z.b. «(NOT:YET)» auf englisch) */
.logo-rahmen {
    position: relative;
    width: fit-content;
}

.logo-zusatz {
    position: absolute;
    /* oberkante auf der höhe der oberkante der jahreszahl (grösse und abstand wachsen mit dem titel) */
    top: 108.75%;
    right: 0;
    margin: 0;
    padding: 0;
    /* wie der grosse titel, nur klein und schräg */
    font-family: var(--schwer);
    font-size: max(13px, .141em);
    font-weight: 400;
    font-style: italic;
    line-height: 1;
    letter-spacing: -.02em;
    white-space: nowrap;
    text-shadow:
        .03em 0 var(--pink), -.03em 0 var(--pink),
        0 .03em var(--pink), 0 -.03em var(--pink);
}

/* "runterscrollen": pfeil + unterstrichener text + linie bis zum rand,
   wie die titel im pdf. der pfeil stupst nach zwei sekunden ruhig an. */
.runter {
    grid-area: runter;
    display: flex;
    align-items: baseline;
    align-items: last baseline;
    margin-top: 34px;
    color: #000;
    font-family: var(--schwer);
    font-size: 22px;
    letter-spacing: -.015em;
    text-decoration: none;
}

.runter-text {
    white-space: nowrap;
    text-decoration: underline;
    text-decoration-thickness: .08em;
    text-underline-offset: .13em;
    text-decoration-skip-ink: none;
}

.runter::after {
    content: "";
    flex: 1 0 1em;
    border-bottom: 2px solid currentColor;
    transform: translateY(.21em);
}

.runter svg {
    flex-shrink: 0;
    align-self: center;
    width: 26px;
    margin-right: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 5.5;
    animation: stupsen 3s ease-in-out 2s infinite;
}

.runter:hover svg {
    animation-play-state: paused;
}

@keyframes stupsen {
    0%, 36%, 100% { transform: translateY(0); }
    16% { transform: translateY(10px); }
    26% { transform: translateY(2px); }
}

@media (prefers-reduced-motion: reduce) {
    .runter svg { animation: none; }
}


/* *** platzierung *** */

.seite {
    display: grid;
    grid-template-columns: var(--navi) minmax(0, 1fr);
    align-items: start;
}

.inhalt {
    width: 100%;
    max-width: calc(760px + 2 * var(--rand));
    padding: 0 var(--rand);
    margin-left: clamp(0px, 4vw - 24px, 80px);
}


/* *** inhaltsverzeichnis / navigation *** */

.navi {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    padding: 30px 20px 26px 40px;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    line-height: 1.3;
}

.navi a {
    text-decoration: none;
}

.navi-kopf {
    margin-bottom: 30px;
}

.navi-logo {
    display: block;
    font-family: var(--schwer);
    font-size: 25px;
    line-height: .85;
    letter-spacing: -.04em;
}

.navi-logo span {
    display: block;
    margin-top: 3px;
    font-family: var(--text);
    font-size: 19px;
    letter-spacing: -.02em;
}

.navi-logo:hover {
    font-style: normal;
}

.navi-knopf,
.navi-aktuell {
    display: none;
}

.navi-titel {
    display: flex;
    align-items: last baseline;
    margin: 0 0 6px;
    font-family: var(--schwer);
    font-size: 17px;
    letter-spacing: -.01em;
}

.navi-titel span {
    text-decoration: underline;
    text-decoration-thickness: .08em;
    text-underline-offset: .13em;
}

.navi-titel::after {
    content: "";
    flex: 1 0 1em;
    border-bottom: 1px solid var(--tinte);
    transform: translateY(.21em);
}

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

.navi li a {
    position: relative;
    display: grid;
    grid-template-columns: 2.3em minmax(0, 1fr);
    padding: 3px 0;
}

.navi .navi-vorwort > a {
    display: block;
    margin-top: 10px;
    font-weight: bold;
}

.navi .kap {
    margin-top: 16px;
}

.navi .kap > a {
    grid-template-columns: 1.65em minmax(0, 1fr);
    font-family: var(--schwer);
    font-size: 17px;
    letter-spacing: -.01em;
}

.navi .kap li a {
    font-weight: bold;
}

/* dritte ebene: zwischentitel (in der verwaltung wählbar) */
.navi .kap li li a {
    font-weight: normal;
    font-size: .92em;
}

/* aktueller abschnitt: kleines schwarzes quadrat */
.navi a.aktiv::before {
    content: "";
    position: absolute;
    left: -17px;
    top: calc(3px + .32em);
    width: .6em;
    height: .6em;
    background: var(--tinte);
}

.navi .kap > a.aktiv::before {
    top: calc(3px + .3em);
    width: .5em;
    height: .5em;
}

.navi-fuss {
    margin-top: auto;
    padding-top: 30px;
    font-weight: bold;
}

.navi-fuss a {
    display: block;
}

.navi-fuss .navi-anmelden {
    margin-bottom: 10px;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
}

.anmelden--text {
    display: inline-block;
    margin: 8px 0 12px;
}


/* *** vorwort *** */

.vorwort {
    padding-top: 28px;
}

.stimmen {
    max-width: 32em;
    margin: 64px auto 0;
    font-size: 19px;
    line-height: 1.38;
    text-align: center;
}

.stimmen blockquote {
    margin: 0 0 1.8em;
}

.stimmen p {
    margin: 0;
    hyphens: manual;
}


/* *** titel *** */

.kapitel {
    padding-top: 150px;
}

.kapitel-titel {
    display: grid;
    grid-template-columns: var(--nr) minmax(0, 1fr);
    margin: 0 0 6px;
    font-weight: 400;
    font-size: clamp(46px, 5vw, 74px);
    line-height: 1;
    letter-spacing: -.045em;
}

.abschnitt {
    padding-top: 110px;
}

.kapitel-titel + .abschnitt {
    padding-top: 0;
}

/* schwerer titel, unterstrichen, mit dünner linie bis zum rand */
.linie {
    display: grid;
    grid-template-columns: var(--nr) minmax(0, 1fr);
    align-items: baseline;
    margin: 0;
    font-family: var(--schwer);
    font-weight: 400;
    font-size: clamp(24px, 1.2vw + 14px, 31px);
    line-height: 1.14;
    letter-spacing: -.025em;
}

.linie--ohne-nr {
    display: block;
}

.linie .titel {
    position: relative;
    display: block;
}

.linie .titel > span {
    text-decoration: underline;
    text-decoration-thickness: .075em;
    text-underline-offset: .13em;
    text-decoration-skip-ink: none;
}

/* die dünne linie liegt genau auf der unterkante der unterstreichung
   (grundlinie + .205em; zeilenunterkante = grundlinie + .244em bei archivo black) */
.linie .titel::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: .039em;
    border-bottom: 1px solid var(--tinte);
}

.abschnitt .linie {
    margin-bottom: 40px;
}

.linie + .unterzeile {
    margin-top: -32px;
}

.unterzeile {
    margin: 8px 0 44px var(--nr);
    font-size: 20px;
    line-height: 1.25;
    letter-spacing: -.01em;
    hyphens: manual;
}

.jahr {
    margin: 0 0 14px;
    font-family: var(--schwer);
    font-weight: 400;
    font-size: 25px;
    line-height: 1;
}

.zwischentitel {
    margin: 2.4em 0 .5em;
    font-family: var(--schwer);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -.01em;
}

.zwischentitel + .ort {
    margin-top: -.5em;
}

.ort {
    margin-bottom: 1.2em;
}

.jahr + .zwischentitel {
    margin-top: 0;
}

.klein-titel {
    margin: 1.6em 0 .1em;
    font-size: 1em;
    font-weight: bold;
}

.klein-titel--linie + .einzug-2 > .klein-titel:first-child {
    margin-top: .3em;
}

.klein-titel--linie {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
}


/* *** bilder *** */

figure {
    margin: 0;
}

.bild img {
    width: 100%;
}

.bild figcaption {
    margin-top: 6px;
    font-size: 14px;
    font-style: italic;
    line-height: 1.3;
    text-align: right;
}

.bild--mitte {
    width: 72%;
    margin: 40px auto;
}

.bild--breit {
    width: 86%;
    margin: 40px auto;
}

/* kleines bild, mittig (aus der verwaltung) */
.bild--klein {
    width: 46%;
    margin: 32px auto;
}

/* versetzt, für die konzertbilder */
.bild--links {
    width: 80%;
    margin: 40px auto 28px 0;
}

.bild--rechts {
    width: 80%;
    margin: 0 0 40px auto;
}

/* bild + text nebeneinander */
.reihe {
    display: grid;
    grid-template-columns: 1.12fr 1fr;
    gap: 30px;
    align-items: start;
    margin: 0 0 36px;
}

.reihe--rechts {
    grid-template-columns: 1fr 1.12fr;
}

.reihe .bild {
    margin: 0;
}

/* zwei bilder nebeneinander, spalten im seitenverhältnis -> gleiche höhe */
.paar {
    display: grid;
    grid-template-columns: var(--a, 1fr) var(--b, 1fr);
    gap: 20px;
    align-items: start;
    margin: 40px 0;
}

.paar img {
    aspect-ratio: var(--v, auto);
    object-fit: cover;
}


/* *** text-elemente *** */

.dialog {
    margin: 22px 0 0;
    text-align: center;
}

.dialog p {
    margin-bottom: .9em;
    hyphens: manual;
}

.motto {
    margin: 1.2em 0;
    font-weight: bold;
    text-align: center;
    hyphens: manual;
}

.punkte {
    list-style: none;
    margin: 0 0 1.2em;
    padding: 0 0 0 var(--e2);
}

.punkte li {
    position: relative;
    padding-left: 1em;
    margin-bottom: .3em;
}

.punkte li::before,
.werte li::before {
    content: "•";
    position: absolute;
    left: 0;
    font-family: var(--schwer);
}

.einzug {
    padding-left: var(--e1);
}

.einzug-2 {
    padding-left: var(--e2);
}

.fragen {
    padding-left: var(--e1);
    margin: 0 0 1.2em;
}

.fragen p {
    margin: 0;
}

/* 2.1 weil… */
.weil-auftakt {
    margin: 26px 0 16px var(--e2);
    font-size: 25px;
}

.weil {
    list-style: none;
    margin: 0 0 40px;
    padding: 0 0 0 var(--e2);
    font-weight: bold;
}

.weil li {
    padding-left: 1em;
    text-indent: -1em;
    margin-bottom: .95em;
}

/* 3.1 werte */
.werte {
    list-style: none;
    margin: 30px 0 0;
    padding: 0 0 0 var(--e2);
}

.werte li {
    position: relative;
    padding-left: 1em;
    margin-bottom: 1.05em;
}

.werte strong {
    display: block;
}

/* daten, ablauf usw. */
.tabelle {
    display: grid;
    grid-template-columns: 8.2em minmax(0, 1fr);
    margin: 0 0 1.3em;
}

.tabelle dt {
    font-variant-numeric: tabular-nums;
}

.tabelle dd {
    margin: 0;
}

.tabelle--ablauf {
    grid-template-columns: 11em minmax(0, 1fr);
    row-gap: .55em;
}

.tabelle--ablauf dt {
    font-weight: bold;
}

.tabelle--ablauf dt::before {
    content: "•";
    font-family: var(--schwer);
    margin-right: .45em;
}

.tabelle--kurz {
    grid-template-columns: 5.2em minmax(0, 1fr);
}

.tabelle--kurz dt {
    font-weight: bold;
}

.tabelle--daten {
    grid-template-columns: 11em minmax(0, 1fr);
}

.ort-block .fett {
    margin: 0;
}

.liste-wir {
    list-style: none;
    margin: 0 0 1em;
    padding: 0 0 0 var(--e2);
}

.liste-wir li {
    padding-left: .9em;
    text-indent: -.9em;
    margin-bottom: .75em;
}


/* *** 3.5 menschen *** */

.person {
    display: grid;
    grid-template-columns: 33% minmax(0, 1fr);
    gap: 32px;
    align-items: start;
    margin: 0 0 64px;
}

.person--rechts {
    grid-template-columns: minmax(0, 1fr) 33%;
}

.person h4 {
    margin: 0 0 .75em;
    font-family: var(--schwer);
    font-weight: 400;
    font-size: 20px;
    letter-spacing: -.01em;
}

.person p {
    margin: 0;
}

.person img {
    width: 100%;
}

/* englische seite: kleiner hinweis, dass der text übersetzt ist */
.person .uebersetzt {
    margin-top: .8em;
    font-size: 14px;
    font-style: italic;
}

.schluss {
    margin: 30px 0 0;
    font-family: var(--schwer);
    font-weight: 400;
    font-size: clamp(28px, 2.7vw, 38px);
    line-height: 1.05;
    letter-spacing: -.035em;
}


/* *** kontakt (wie im pdf, mit dem kubo-quadrat) *** */

.fuss {
    padding: 150px 0 70px;
}

.kontakt {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    max-width: 470px;
    margin-left: auto;
    border-top: 1.5px solid var(--tinte);
    font-size: 17px;
    line-height: 1.3;
}

.quadrat {
    width: 96px;
    height: 96px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--tinte);
    cursor: pointer;
}

.kontakt-titel {
    margin: 2px 0 1px;
    font-family: var(--schwer);
    font-size: 17px;
}

.tabelle--kontakt {
    grid-template-columns: 6.6em minmax(0, 1fr);
    margin: 0;
}

.tabelle--kontakt a {
    text-decoration: none;
}

.stand {
    margin: 50px 0 0;
    font-size: 14px;
    text-align: right;
}


/* *** farbwechsel beim klick aufs quadrat, wie auf der startseite *** */

body.pink {
    --papier: rgb(255, 0, 255);
    --tinte: rgb(0, 255, 0);
}


/* *** tablet *** */

@media (max-width: 1180px) {
    :root {
        --navi: 270px;
        --rand: 40px;
        --nr: 88px;
        --e1: 88px;
        --e2: 44px;
    }

    .navi {
        padding-left: 30px;
    }

    .inhalt {
        margin-left: 0;
    }
}


/* *** handyversion: inhaltsverzeichnis wird zur leiste oben *** */

@media (max-width: 960px) {
    :root {
        --rand: 20px;
        --nr: 58px;
        --e1: 0px;
        --e2: 18px;
    }

    body {
        font-size: 16px;
    }

    .seite {
        display: block;
    }

    .navi {
        position: sticky;
        top: 0;
        z-index: 10;
        height: auto;
        overflow: visible;
        padding: 0;
        background: var(--papier);
        border-bottom: 1px solid var(--tinte);
    }

    .navi-kopf {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        height: 50px;
        margin: 0;
        padding: 0 var(--rand);
    }

    .navi-logo {
        display: none;
    }

    .navi-aktuell {
        display: block;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 15px;
        font-weight: bold;
    }

    .navi-knopf {
        display: block;
        flex-shrink: 0;
        min-height: 44px; /* gut zu treffen mit dem finger */
        padding: 6px 0 6px 10px;
        border: 0;
        background: none;
        color: var(--tinte);
        font-family: var(--schwer);
        font-size: 16px;
        letter-spacing: -.01em;
        cursor: pointer;
    }

    .navi-liste {
        display: none;
        position: fixed;
        top: 51px;
        left: 0;
        right: 0;
        bottom: 0;
        overflow-y: auto;
        padding: 26px var(--rand) 40px 40px;
        background: var(--papier);
        font-size: 18px;
    }

    body.navi-offen {
        overflow: hidden;
    }

    body.navi-offen .navi-liste {
        display: block;
    }

    .navi-titel {
        display: none;
    }

    .navi .kap > a {
        font-size: 24px;
    }

    .navi li a {
        padding: 5px 0;
    }

    .navi a.aktiv::before {
        top: calc(5px + .32em);
    }

    .navi .kap > a.aktiv::before {
        top: calc(5px + .3em);
    }

    .navi-fuss {
        padding-top: 36px;
    }

    [id] {
        scroll-margin-top: 50px;
    }

    .inhalt {
        max-width: none;
    }

    .vorwort {
        padding-top: 70px;
    }

    .kapitel {
        padding-top: 110px;
    }

    .abschnitt {
        padding-top: 80px;
    }

    .unterzeile {
        font-size: 18px;
        margin-bottom: 32px;
    }

    .bild--mitte,
    .bild--breit {
        width: 100%;
    }

    .bild--klein {
        width: 70%;
    }

    .bild--links,
    .bild--rechts {
        width: 88%;
    }

    .cover-termine {
        font-size: 15px;
    }
}

@media (max-width: 640px) {
    .cover {
        min-height: calc(100vh - 56px);
        min-height: calc(100svh - 56px);
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr auto auto auto;
        grid-template-areas:
            "zurueck"
            "anmelden"
            "."
            "titel"
            "termine"
            "runter";
        padding-bottom: 22px;
    }

    .cover .anmelden {
        margin-top: 18px;
        margin-bottom: 28px;
    }

    .anmelden-titel {
        font-size: 26px;
    }

    .cover-termine {
        margin-top: 22px;
    }

    .runter {
        margin-top: 26px;
        font-size: 18px;
    }

    .runter svg {
        width: 22px;
        margin-right: 12px;
    }

    .reihe,
    .reihe--rechts,
    .person,
    .person--rechts {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    /* auf dem handy immer erst bild, dann text */
    .reihe--rechts .bild,
    .person--rechts img {
        order: -1;
    }

    .person img {
        width: 64%;
    }

    .person--rechts img {
        margin-left: auto;
    }

    .paar {
        gap: 12px;
    }

    .paar--stapeln {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .tabelle,
    .tabelle--daten {
        grid-template-columns: 6.8em minmax(0, 1fr);
    }

    .tabelle--ablauf {
        grid-template-columns: 1fr;
        row-gap: 0;
    }

    .tabelle--ablauf dd {
        margin: 0 0 .7em 1em;
    }

    .weil-auftakt {
        font-size: 22px;
    }

    .kontakt {
        margin-left: 0;
        font-size: 15px;
    }

    .kontakt-titel {
        font-size: 15px;
    }

    .tabelle--kontakt {
        grid-template-columns: 5.7em minmax(0, 1fr);
    }

    .tabelle--kontakt dd {
        white-space: nowrap;
    }

    .quadrat {
        width: 64px;
        height: 64px;
    }

    .stand {
        text-align: left;
    }
}

@media (max-width: 420px) {
    .runter-mehr {
        display: none;
    }
}


/* *** deutsch / english: oben in der mitte des titelbilds, auf einer linie mit «zurück» *** */
.cover .sprache {
    position: absolute;
    z-index: 2;
    top: 36px;
    left: 50%;
    translate: -50% 0;
    margin: 0;
    font-size: 18px;
    font-weight: bold;
}

.cover .sprache a {
    color: #000;
}

/* schmaler: termine stehen weiter unten, der sprachwechsel rechts oben */
@media (max-width: 799px) {
    .cover .sprache,
    .cover .sprache-hinweis {
        left: auto;
        right: var(--rand);
        translate: none;
    }
}

.cover .sprache-hinweis {
    position: absolute;
    z-index: 2;
    top: 66px;
    left: 50%;
    translate: -50% 0;
    margin: 0;
    padding: 2px 8px;
    background: rgb(255 255 255 / .8);
    font-size: 14px;
    font-style: italic;
    white-space: nowrap;
}

/* *** link zur verwaltung, klein unten rechts (aus der verwaltung) *** */
.zur-verwaltung {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 2;
    margin: 0;
    font-family: helvetica, arial, sans-serif;
    font-size: 12px;
    font-weight: normal;
    line-height: 1.2;
}

.zur-verwaltung a {
    display: block;
    padding: 6px 10px;
    background: rgba(255, 255, 255, .85);
    color: #555;
    text-decoration: none;
}

.zur-verwaltung a:hover,
.zur-verwaltung a:focus-visible {
    color: black;
    text-decoration: underline;
}

/* erst ganz unten sichtbar (mit javascript); mit der tastatur, sobald er dran ist */
.mit-zur-verwaltung .zur-verwaltung {
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
}

.mit-zur-verwaltung .zur-verwaltung--da,
.mit-zur-verwaltung .zur-verwaltung:focus-within {
    opacity: 1;
    pointer-events: auto;
}

/* platz ganz unten, damit der link nichts verdeckt */
body:has(.zur-verwaltung) {
    padding-bottom: 40px;
}

@media print {
    .zur-verwaltung {
        display: none;
    }
}