/*
 * stil.css - Gestaltung der oeffentlichen Seite.
 *
 * Mobil zuerst, nur Systemschriften, keine fremden Quellen.
 * Grundgedanke: grosse Bilder, wenig Text, viel Weissraum.
 *
 * Farben liegen als Variablen in :root (hell). Das dunkle Design
 * greift bei Systemeinstellung "dunkel" oder nach Klick auf den
 * Thema-Knopf (html[data-thema="dunkel"]).
 */


/* ------------------------------------------------------------------ */
/* Farben und Grundwerte                                              */
/* ------------------------------------------------------------------ */

:root {
    --farbe-hintergrund: #ffffff;
    --farbe-flaeche:     #f5f3ef;
    --farbe-text:        #1c1c1c;
    --farbe-gedaempft:   #55524d;
    --farbe-rand:        #ddd8d0;
    --farbe-akzent:      #274060;
    --farbe-akzent-text: #ffffff;
    /* Zweite Farbe (warmer Akzent) fuer moderne Flaechen und Knopf-Verlaeufe. */
    --farbe-akzent-2:      #c96a4b;
    --farbe-akzent-2-weich: #f6e7e0;
    --schatten:          0 1px 4px rgba(0, 0, 0, 0.08);
    /* Kraeftigerer Schatten fuer hervorgehobene Karten. */
    --schatten-gross:    0 14px 40px rgba(39, 64, 96, 0.16);
    --rundung:           10px;
}

/* Dunkles Design nach Klick auf den Thema-Knopf. */
html[data-thema="dunkel"] {
    --farbe-hintergrund: #191a1c;
    --farbe-flaeche:     #232527;
    --farbe-text:        #ececec;
    --farbe-gedaempft:   #b3b0ab;
    --farbe-rand:        #3c3e41;
    --farbe-akzent:      #9fc2e8;
    --farbe-akzent-text: #10233a;
    --farbe-akzent-2:      #e8a48c;
    --farbe-akzent-2-weich: #33291f;
    --schatten:          0 1px 4px rgba(0, 0, 0, 0.5);
    --schatten-gross:    0 14px 40px rgba(0, 0, 0, 0.6);
}

/* Dunkles Design nach Systemeinstellung (gleiche Werte wie oben). */
@media (prefers-color-scheme: dark) {
    html:not([data-thema="hell"]) {
        --farbe-hintergrund: #191a1c;
        --farbe-flaeche:     #232527;
        --farbe-text:        #ececec;
        --farbe-gedaempft:   #b3b0ab;
        --farbe-rand:        #3c3e41;
        --farbe-akzent:      #9fc2e8;
        --farbe-akzent-text: #10233a;
        --farbe-akzent-2:      #e8a48c;
        --farbe-akzent-2-weich: #33291f;
        --schatten:          0 1px 4px rgba(0, 0, 0, 0.5);
        --schatten-gross:    0 14px 40px rgba(0, 0, 0, 0.6);
    }
}


/* ------------------------------------------------------------------ */
/* Grundgeruest                                                       */
/* ------------------------------------------------------------------ */

* {
    box-sizing: border-box;
}

/* Das hidden-Attribut gewinnt immer, auch gegen display: flex/grid. */
[hidden] {
    display: none !important;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--farbe-text);
    background: var(--farbe-hintergrund);
}

main {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 1rem 4rem;
}

.abschnitt {
    margin: 4rem 0;
}

h2 {
    font-size: 1.7rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    margin: 0 0 1.5rem;
}

img {
    max-width: 100%;
}

a {
    color: var(--farbe-akzent);
}

/* Nur fuer Vorleseprogramme, unsichtbar auf dem Bildschirm. */
.nur-vorlese {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Der Druckbereich ist am Bildschirm unsichtbar (siehe druck.css). */
.nur-druck {
    display: none;
}

/* Sprunglink: erscheint nur, wenn er per Tastatur angesteuert wird. */
.sprung-link {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 20;
    padding: 0.6rem 1rem;
    background: var(--farbe-akzent);
    color: var(--farbe-akzent-text);
    border-radius: var(--rundung);
    transition: top 0.2s;
}

.sprung-link:focus {
    top: 1rem;
}

:focus-visible {
    outline: 3px solid var(--farbe-akzent);
    outline-offset: 2px;
}


/* ------------------------------------------------------------------ */
/* Kopfzeile                                                          */
/* ------------------------------------------------------------------ */

.kopfzeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Die obere Leiste ist bewusst in Pixeln bemessen: der a/A-Schalter
       veraendert die Grundschrift (rem), die Leiste selbst darf sich
       dabei nicht verschieben - sonst wandern die Knoepfe unter dem
       Mauszeiger weg. */
    gap: 16px;
    max-width: 1152px;
    margin: 0 auto;
    padding: 16px;
}

.seiten-name {
    margin: 0;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Der Seitenname ist ein Link zur Startseite, sieht aber wie Text aus. */
.seiten-name a {
    color: inherit;
    text-decoration: none;
}

.seiten-name a:hover,
.seiten-name a:focus-visible {
    text-decoration: underline;
}

.kopf-navigation {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
}

/* Knoepfe und Reiter in der oberen Leiste ebenfalls in Pixeln. */
.kopf-navigation .knopf {
    font-size: 15px;
    padding: 7px 16px;
}

.kopf-navigation .intern-reiter {
    font-size: 16px;
    padding: 6px 11px;
}

.sprach-schalter {
    display: flex;
    border: 1px solid var(--farbe-rand);
    border-radius: 999px;
    overflow: hidden;
}

.sprach-knopf {
    border: 0;
    background: transparent;
    color: var(--farbe-text);
    font: inherit;
    font-size: 14px;
    padding: 6px 11px;
    cursor: pointer;
}

.sprach-knopf[aria-pressed="true"] {
    background: var(--farbe-akzent);
    color: var(--farbe-akzent-text);
}

/* Schriftgroessen-Schalter (a/A), gleiches Design wie der Sprachschalter.
   "a" verkleinert, "A" vergroessert die Grundschrift in Stufen
   (skripte/leiste.js setzt die Schriftgroesse am html-Element). */
.schrift-schalter {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--farbe-rand);
    border-radius: 999px;
    overflow: hidden;
}

/* Jeder Knopf fuellt seine Haelfte der Pille vollstaendig aus. */
.schrift-knopf {
    display: flex;
    align-items: center;
    border: 0;
    background: transparent;
    color: var(--farbe-text);
    font: inherit;
    font-size: 13px;
    line-height: 1;
    padding: 7px 11px;
    cursor: pointer;
}

.schrift-knopf.schrift-gross {
    font-size: 17px;
}

.schrift-knopf:hover:not(:disabled),
.schrift-knopf:focus-visible:not(:disabled) {
    background: var(--farbe-akzent);
    color: var(--farbe-akzent-text);
}

/* Am Anschlag (kleinste bzw. groesste Stufe erreicht). */
.schrift-knopf:disabled {
    opacity: 0.4;
    cursor: default;
}

.rund-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--farbe-rand);
    border-radius: 50%;
    background: transparent;
    color: var(--farbe-text);
    cursor: pointer;
}

/* Der Thema-Knopf zeigt im hellen Design den Mond, im dunklen die Sonne. */
.zeichen-sonne { display: none; }
.zeichen-mond  { display: block; }

html[data-thema="dunkel"] .zeichen-sonne { display: block; }
html[data-thema="dunkel"] .zeichen-mond  { display: none; }

@media (prefers-color-scheme: dark) {
    html:not([data-thema="hell"]) .zeichen-sonne { display: block; }
    html:not([data-thema="hell"]) .zeichen-mond  { display: none; }
}


/* ------------------------------------------------------------------ */
/* Knoepfe                                                            */
/* ------------------------------------------------------------------ */

.knopf {
    display: inline-block;
    padding: 0.45rem 1rem;
    border: 1px solid var(--farbe-akzent);
    border-radius: 999px;
    background: transparent;
    color: var(--farbe-akzent);
    font: inherit;
    font-size: 0.95rem;
    text-decoration: none;
    cursor: pointer;
}

.knopf:hover,
.knopf[aria-pressed="true"] {
    background: var(--farbe-akzent);
    color: var(--farbe-akzent-text);
}

.knopf.gross {
    padding: 0.9rem 2.2rem;
    font-size: 1.15rem;
    background: var(--farbe-akzent);
    color: var(--farbe-akzent-text);
}

.knopf.gross.nebenrolle {
    background: transparent;
    color: var(--farbe-akzent);
}

.knopf.gross.nebenrolle:hover {
    background: var(--farbe-akzent);
    color: var(--farbe-akzent-text);
}


/* ------------------------------------------------------------------ */
/* Termine                                                            */
/* ------------------------------------------------------------------ */

.ansicht-schalter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-bottom: 1.5rem;
}

/* Liste und Kalender gehoeren zusammen; "Zu Profilen" steht daneben. */
.ansicht-gruppe {
    display: flex;
    gap: 0.5rem;
}

.termin {
    background: var(--farbe-flaeche);
}



.termin-text h3 {
    margin: 0 0 0.3rem;
    font-size: 1.25rem;
}

.termin-zeit {
    margin: 0 0 0.3rem;
    font-weight: 600;
}

.termin-ort {
    margin: 0 0 0.5rem;
    color: var(--farbe-gedaempft);
}

.termin-beschreibung {
    color: var(--farbe-gedaempft);
}

.termin .qr-code {
    background: #ffffff;
    border-radius: 4px;
}

.stiller-hinweis {
    color: var(--farbe-gedaempft);
}

.rss-verweis {
    margin-top: 1rem;
}

/* Kalenderansicht */

.kalender-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.kalender-monat {
    margin: 0;
    font-size: 1.2rem;
}

.kalender-tabelle {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.kalender-tabelle th {
    padding: 0.4rem 0.2rem;
    font-size: 0.85rem;
    color: var(--farbe-gedaempft);
    font-weight: 600;
}

.kalender-tabelle td {
    vertical-align: top;
    height: 4.5rem;
    padding: 0.25rem;
    border: 1px solid var(--farbe-rand);
}

.kalender-tabelle td.heute {
    background: var(--farbe-flaeche);
}

.tag-zahl {
    display: block;
    font-size: 0.85rem;
    color: var(--farbe-gedaempft);
}

td.heute .tag-zahl {
    font-weight: 700;
    color: var(--farbe-akzent);
}

/* Im Kalender steht je Veranstaltung nur ein Punkt. Ein Klick oeffnet das
   Pop-up des Termins; vergangene Termine sind blass und nicht anklickbar. */
.kalender-punkte {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.1rem;
    margin-top: 0.2rem;
}

.kalender-punkt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.kalender-punkt::before {
    content: "";
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: var(--farbe-akzent);
}

.kalender-punkt:hover::before {
    transform: scale(1.2);
}

.kalender-punkt:focus-visible {
    outline: 2px solid var(--farbe-akzent);
    outline-offset: -2px;
}

.kalender-punkt.vergangen {
    cursor: default;
}

.kalender-punkt.vergangen::before {
    background: var(--farbe-rand);
}


/* ------------------------------------------------------------------ */
/* Aufruf (Dabei sein / Kontakt)                                      */
/* ------------------------------------------------------------------ */

.aufruf {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    padding: 3rem 1rem;
    text-align: center;
    background: var(--farbe-flaeche);
    border-radius: var(--rundung);
}


/* ------------------------------------------------------------------ */
/* Werk des Monats                                                    */
/* ------------------------------------------------------------------ */

.werk-figur {
    margin: 0;
}

.werk-figur img {
    display: block;
    width: 100%;
    max-width: 30rem;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: var(--rundung);
    box-shadow: var(--schatten);
}

.werk-figur figcaption {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 1.2rem;
    margin-top: 0.8rem;
}

.werk-name {
    font-weight: 700;
}

.werk-technik {
    color: var(--farbe-gedaempft);
}


/* ------------------------------------------------------------------ */
/* Filter und Suche                                                   */
/* ------------------------------------------------------------------ */

.filter-bereich {
    margin-bottom: 2rem;
}

.suchfeld-name {
    display: block;
    margin-bottom: 0.4rem;
    color: var(--farbe-gedaempft);
    font-size: 0.95rem;
}

#suchfeld {
    width: 100%;
    max-width: 26rem;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--farbe-rand);
    border-radius: var(--rundung);
    background: var(--farbe-hintergrund);
    color: var(--farbe-text);
    font: inherit;
}

.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.9rem;
}

.filter-chip {
    padding: 0.3rem 0.9rem;
    border: 1px solid var(--farbe-rand);
    border-radius: 999px;
    background: transparent;
    color: var(--farbe-text);
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}

.filter-chip[aria-pressed="true"] {
    border-color: var(--farbe-akzent);
    background: var(--farbe-akzent);
    color: var(--farbe-akzent-text);
}


/* ------------------------------------------------------------------ */
/* Steckbriefe                                                        */
/* ------------------------------------------------------------------ */

.steckbrief-gitter {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
}

@media (min-width: 40rem) {
    .steckbrief-gitter {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 64rem) {
    .steckbrief-gitter {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.steckbrief {
    display: flex;
    flex-direction: column;
    background: var(--farbe-flaeche);
    border-radius: var(--rundung);
    box-shadow: var(--schatten);
    overflow: hidden;
    cursor: pointer;
}

.steckbrief-inhalt {
    padding: 1.2rem 1.4rem 1.6rem;
}

.steckbrief-name {
    margin: 0 0 0.2rem;
    font-size: 1.3rem;
}

.steckbrief-person {
    margin: 0 0 0.35rem;
    color: var(--farbe-akzent-2);
    font-weight: 600;
}

.steckbrief-technik {
    margin: 0 0 0.8rem;
    color: var(--farbe-gedaempft);
}

.steckbrief-kurztext {
    margin: 0 0 1rem;
}

.angaben {
    list-style: none;
    margin: 0 0 1.2rem;
    padding: 0;
    font-size: 0.95rem;
}

.angaben li {
    margin-bottom: 0.25rem;
    overflow-wrap: anywhere;
}

.angabe-name {
    color: var(--farbe-gedaempft);
}

.karten-aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}


/* ------------------------------------------------------------------ */
/* Foto-Slider (Hochformat 3:4 wird erzwungen)                        */
/* ------------------------------------------------------------------ */

.foto-slider {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--farbe-rand);
}

.slider-spur {
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
}

.slider-bild {
    position: absolute;
    inset: 0;
    opacity: 0;
    /* Weiche Ueberblendung beim Fotowechsel: 1 Sekunde. */
    transition: opacity 1s;
}

.slider-bild.aktiv {
    opacity: 1;
}

.slider-bild img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Dezente Bedienpunkte UNTER dem Slider (ein Punkt je Foto).
   Die Leiste baut skripte/verhalten.js clientseitig auf. */
.slider-punkte {
    display: flex;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.5rem 0 0.15rem;
}

.slider-punkt {
    width: 0.55rem;
    height: 0.55rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--farbe-text);
    opacity: 0.25;
    cursor: pointer;
}

.slider-punkt.aktiv {
    opacity: 0.8;
}

.slider-punkt:focus-visible {
    outline: 2px solid var(--farbe-akzent);
    outline-offset: 2px;
}

.foto-platzhalter {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    margin: 0;
    padding: 1rem;
    color: var(--farbe-gedaempft);
    text-align: center;
}


/* ------------------------------------------------------------------ */
/* Pop-up (Dialog) - Kuenstler-Profil und Termin                       */
/*                                                                    */
/* Aufbau: fester Kopf (Titel, Untertitel, Schliessen-Kreuz), rollender  */
/* Inhalt, fester Fuss (QR-Code, Kontakt). Auf dem Schreibtisch ein     */
/* mittiges Fenster mit weichem Einblenden, auf dem Handy ein Blatt,   */
/* das von unten hochfaehrt und die ganze Breite nutzt.               */
/* ------------------------------------------------------------------ */

.langtext-dialog {
    max-width: 46rem;
    width: calc(100% - 2rem);
    border: 0;
    border-radius: 14px;
    padding: 0;
    background: var(--farbe-hintergrund);
    color: var(--farbe-text);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
    cursor: auto;
}

/* Geoeffnet: Kopf oben und Fuss unten stehen fest, nur der Inhalt
   dazwischen rollt. Das Fenster ist nie hoeher als der Bildschirm. */
.langtext-dialog[open] {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 3rem);
    max-height: calc(100dvh - 3rem);
    overflow: hidden;
    animation: dialog-auf 0.22s ease-out;
}

.langtext-dialog::backdrop {
    background: rgba(12, 20, 30, 0.55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    animation: dialog-schleier 0.22s ease-out;
}

@keyframes dialog-auf {
    from { opacity: 0; transform: translateY(14px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

@keyframes dialog-schleier {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .langtext-dialog[open],
    .langtext-dialog::backdrop {
        animation: none;
    }
}

/* Kopf ------------------------------------------------------------- */

.dialog-kopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex: 0 0 auto;
    /* Rechts bleibt Platz fuer das Schliessen-Kreuz. */
    padding: 1.4rem 3.6rem 1rem 1.6rem;
    border-bottom: 1px solid var(--farbe-rand);
}

/* Die Leiste mit dem Schliessen-Kreuz. Am Schreibtisch liegt sie oben
   rechts ueber dem Kopf, auf dem Handy wird sie zur festen Zeile.
   Bezugspunkt ist das Fenster selbst: ein geoeffnetes modales Fenster ist
   vom Browser aus fest gestellt. Es darf hier KEIN eigenes "position"
   bekommen, sonst rutscht es aus der Bildschirmmitte. */
.dialog-leiste-oben {
    position: absolute;
    top: 0.9rem;
    right: 1rem;
    z-index: 2;
}

.dialog-leiste-oben .dialog-x {
    margin: 0;
}

/* Die Leiste mit dem Schliessen-Knopf braucht nur das Handy. */
.dialog-leiste-unten {
    display: none;
}

.dialog-kopf-text {
    min-width: 0;
}

.langtext-dialog h3 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: 0.005em;
}

.langtext-dialog h3:focus {
    outline: none;
}

.dialog-untertitel {
    margin: 0.35rem 0 0;
    font-size: 0.92rem;
    color: var(--farbe-gedaempft);
}

.dialog-trenner {
    margin: 0 0.4rem;
}

/* Schliessen-Kreuz oben rechts: 44px Tastflaeche, rund, dezent. */
.dialog-x {
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    margin: -0.5rem -0.6rem 0 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--farbe-gedaempft);
    font: inherit;
    font-size: 1.9rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.dialog-x:hover,
.dialog-x:focus-visible {
    background: var(--farbe-flaeche);
    color: var(--farbe-text);
    outline: none;
}

.dialog-x:focus-visible {
    box-shadow: 0 0 0 2px var(--farbe-akzent);
}

/* Inhalt ----------------------------------------------------------- */

.dialog-inhalt {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1.2rem 1.6rem;
    scrollbar-width: thin;
}

.profil-dialog .langtext {
    font-size: 1.02rem;
    line-height: 1.65;
}

/* Fotos unter dem Text: alle gleich gross nebeneinander (3:4). */
.dialog-fotos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
}

.profil-dialog .langtext + .dialog-fotos {
    margin-top: 1.4rem;
}

.dialog-foto {
    margin: 0;
}

.dialog-foto img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    background: var(--farbe-rand);
    border-radius: 8px;
    box-shadow: var(--schatten);
}

.dialog-foto figcaption {
    padding-top: 0.4rem;
    font-size: 0.82rem;
    color: var(--farbe-gedaempft);
}

/* Fuss ------------------------------------------------------------- */

.dialog-fuss {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex: 0 0 auto;
    padding: 0.9rem 1.6rem 1.1rem;
    border-top: 1px solid var(--farbe-rand);
    background: var(--farbe-flaeche);
}

.dialog-fuss .qr-code {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    border-radius: 6px;
}

/* "Link kopieren" und "Teilen" neben dem QR-Code. Darunter eine Zeile
   fuer die Rueckmeldung des Browsers (z. B. "Link kopiert"). */
.dialog-teilen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.teilen-vermerk {
    flex-basis: 100%;
    margin: 0;
    font-size: 0.8rem;
    color: var(--farbe-gedaempft);
}

.teilen-vermerk:empty {
    display: none;
}

/* Auf dem Schreibtisch reicht das Kreuz oben; der Knopf unten dient
   dem Daumen auf dem Handy. */
.dialog-schliessen-unten {
    display: none;
}

/* Sehr schmale Bildschirme: zwei Fotos oben, das dritte darunter. */
@media (max-width: 24rem) {
    .dialog-fotos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Handy: Blatt von unten, volle Breite, oben abgerundet, Griff. */
@media (max-width: 40rem) {
    .langtext-dialog {
        width: 100%;
        max-width: 100%;
        margin: auto 0 0;
        border-radius: 18px 18px 0 0;
    }

    .langtext-dialog[open] {
        max-height: 92vh;
        max-height: 92dvh;
        animation: dialog-hoch 0.28s ease-out;
    }

    @keyframes dialog-hoch {
        from { transform: translateY(40px); opacity: 0; }
        to   { transform: none; opacity: 1; }
    }

    .dialog-kopf {
        padding-left: 1.1rem;
        padding-right: 1.1rem;
    }

    .dialog-inhalt {
        padding: 1rem 1.1rem;
    }

    .dialog-fotos {
        gap: 0.5rem;
    }

    .dialog-foto figcaption {
        font-size: 0.72rem;
    }

    .dialog-fuss {
        flex-wrap: wrap;
        padding: 0.8rem 1.1rem 0.9rem;
    }

    .dialog-fuss .qr-code {
        width: 56px;
        height: 56px;
    }

    .dialog-schliessen-unten {
        display: inline-block;
        width: 100%;
        text-align: center;
    }
}

/* ------------------------------------------------------------------ */
/* Handy und kleines Tablet: das ganze Fenster rollt.                  */
/*                                                                    */
/* Fest stehen bleiben nur zwei Dinge: das Schliessen-Kreuz in der     */
/* oberen Leiste und der Knopf "Schliessen" in der unteren Leiste.     */
/* Alles dazwischen - Titel, Datum, Ort, Foto, Text, QR-Code, Kontakt  */
/* und die Teilen-Knoepfe - rollt mit, damit auf kleinen Bildschirmen  */
/* nicht fast die ganze Flaeche von festen Bereichen belegt ist.       */
/* ------------------------------------------------------------------ */

@media (max-width: 46rem) {
    .langtext-dialog[open] {
        display: block;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* Der Inhalt rollt nicht mehr fuer sich, sondern mit dem Fenster. */
    .dialog-inhalt {
        overflow: visible;
    }

    .dialog-leiste-oben {
        position: sticky;
        top: 0;
        right: auto;
        z-index: 2;
        display: flex;
        justify-content: flex-end;
        padding: 0.9rem 1rem 0.3rem;
        background: var(--farbe-hintergrund);
    }

    /* Griff oben in der Mitte der festen Leiste. */
    .dialog-leiste-oben::before {
        content: "";
        position: absolute;
        top: 0.55rem;
        left: 50%;
        width: 2.6rem;
        height: 0.28rem;
        margin-left: -1.3rem;
        border-radius: 999px;
        background: var(--farbe-rand);
    }

    .dialog-kopf,
    .termin-dialog-kopf {
        padding-top: 0.3rem;
        padding-right: 1.1rem;
    }

    .dialog-leiste-unten {
        position: sticky;
        bottom: 0;
        z-index: 2;
        display: block;
        padding: 0.7rem 1.1rem calc(0.9rem + env(safe-area-inset-bottom));
        border-top: 1px solid var(--farbe-rand);
        background: var(--farbe-flaeche);
    }

    .dialog-schliessen-unten {
        display: block;
        width: 100%;
        text-align: center;
    }
}

/* Kontaktdaten neben dem QR-Code: klein, gedaempft, nimmt den
   freien Platz zwischen QR-Code und Schliessen-Knopf ein. */
.dialog-kontakt {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--farbe-gedaempft);
    overflow-wrap: anywhere;
}

.dialog-kontakt a {
    color: var(--farbe-akzent);
    text-decoration: none;
}

.dialog-kontakt a:hover,
.dialog-kontakt a:focus-visible {
    text-decoration: underline;
}

.dialog-kontakt a,
.dialog-kontakt span {
    display: block;
}

.qr-code {
    background: #ffffff;
    border-radius: 6px;
}


/* ------------------------------------------------------------------ */
/* Fusszeile                                                          */
/* ------------------------------------------------------------------ */

.fusszeile {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--farbe-gedaempft);
    border-top: 1px solid var(--farbe-rand);
}


/* ------------------------------------------------------------------ */
/* Weniger Bewegung, wenn das System es wuenscht                      */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    .slider-bild {
        transition: none;
    }
    .sprung-link {
        transition: none;
    }
}


/* ------------------------------------------------------------------ */
/* Interner Bereich (Anmeldung und eingeloggte Seiten)                */
/* Mobil zuerst: schmale Spalte, grosse Eingabefelder.                */
/* ------------------------------------------------------------------ */

.intern-rahmen {
    max-width: 44rem;
    margin: 1.5rem auto 4rem;
    padding: 1.5rem;
    background: var(--farbe-flaeche);
    border-radius: var(--rundung);
    box-shadow: var(--schatten);
}

.intern-rahmen.schmal {
    max-width: 26rem;
}

.intern-rahmen h1 {
    margin-top: 0;
    font-size: 1.4rem;
}

.intern-rahmen label {
    display: block;
    margin: 1rem 0 0.3rem;
    font-weight: 600;
}

.intern-rahmen input,
.intern-rahmen textarea {
    width: 100%;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--farbe-rand);
    border-radius: var(--rundung);
    background: var(--farbe-hintergrund);
    color: var(--farbe-text);
    font: inherit;
    box-sizing: border-box;
}

.intern-rahmen textarea {
    resize: vertical;
}

.intern-rahmen fieldset {
    margin: 1.5rem 0 0;
    padding: 1rem 1.2rem 1.2rem;
    border: 1px solid var(--farbe-rand);
    border-radius: var(--rundung);
}

.intern-rahmen legend {
    padding: 0 0.4rem;
    font-weight: 700;
}

.intern-rahmen .knopf {
    margin-top: 1.5rem;
}

/* Hinweisbox (gruen-neutral "gut", auffaellig "warnung"). */
.intern-hinweis {
    padding: 0.8rem 1rem;
    border-radius: var(--rundung);
}

.intern-hinweis.gut {
    background: var(--farbe-akzent);
    color: var(--farbe-akzent-text);
}

.intern-hinweis.warnung {
    background: transparent;
    border: 2px solid var(--farbe-akzent);
    color: var(--farbe-text);
    font-weight: 600;
}

/* Kleiner erklaerender Text unter einer Feldgruppe. */
.intern-feldhinweis {
    margin: 0.2rem 0 0.5rem;
    font-size: 0.9rem;
    color: var(--farbe-gedaempft);
}

/* Kopfzeile des internen Bereichs: Reiter umbrechen auf kleinen Schirmen. */
.intern-kopf {
    flex-wrap: wrap;
}

.intern-navigation {
    flex-wrap: wrap;
}

.intern-reiter {
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    color: var(--farbe-text);
    text-decoration: none;
}

.intern-reiter:hover {
    background: var(--farbe-flaeche);
}

.intern-reiter.aktiv {
    background: var(--farbe-akzent);
    color: var(--farbe-akzent-text);
}

/* Zeile "Angemeldet als ..." unter der Kopfzeile. */
.intern-angemeldet {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 1rem;
    font-size: 0.9rem;
    color: var(--farbe-gedaempft);
}


/* ------------------------------------------------------------------ */
/* Fotogalerie (eingeloggter Bereich, fotogalerie.php)                */
/* Mobil zuerst: eine Spalte, ab breiteren Schirmen ein Raster.       */
/* ------------------------------------------------------------------ */

.intern-rahmen section {
    margin-top: 2.5rem;
}

.intern-rahmen h2 {
    font-size: 1.15rem;
    margin: 0 0 0.5rem;
}

/* Raster der eigenen Fotos. */
.galerie-liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 1rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.galerie-karte {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.6rem;
    border: 1px solid var(--farbe-rand);
    border-radius: var(--rundung);
    background: var(--farbe-hintergrund);
}

/* Alle Fotos liegen im festen 3:4-Hochformat vor. */
.galerie-bild {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: var(--rundung);
    display: block;
}

.galerie-abzeichen {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--farbe-akzent-text);
    background: var(--farbe-akzent);
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    align-self: flex-start;
}

.galerie-loeschen {
    width: 100%;
    font-size: 0.9rem;
}

/* Buehne des Ausschnittwaehlers: Bild mit verschiebbarem 3:4-Rahmen. */
.ausschnitt-bereich {
    margin-top: 1rem;
}

.ausschnitt-buehne {
    position: relative;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    border-radius: var(--rundung);
    /* Beim Ziehen soll die Seite nicht mitrollen. */
    touch-action: none;
}

.ausschnitt-bild {
    display: block;
    max-width: 100%;
    max-height: 70vh;
    user-select: none;
    -webkit-user-drag: none;
}

.ausschnitt-rahmen {
    position: absolute;
    border: 3px solid var(--farbe-akzent);
    border-radius: 4px;
    cursor: move;
    touch-action: none;
    /* Dunkelt alles ausserhalb des Rahmens ab. */
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
}

/* Slider-Auswahl: je Platz eine kleine Vorschau neben den Feldern. */
.slider-platz {
    margin-top: 1rem;
}

.slider-zeile {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.slider-vorschau {
    width: 5.5rem;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: var(--rundung);
    border: 1px solid var(--farbe-rand);
    background: var(--farbe-hintergrund);
    flex-shrink: 0;
}

.slider-felder {
    flex-grow: 1;
    min-width: 0;
}

.slider-felder select {
    width: 100%;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--farbe-rand);
    border-radius: var(--rundung);
    background: var(--farbe-hintergrund);
    color: var(--farbe-text);
    font: inherit;
    box-sizing: border-box;
}

/* ------------------------------------------------------------------ */
/* Termine eintragen (Ausbaustufe 1.4)                                 */
/* ------------------------------------------------------------------ */

/* Auswahlfelder sehen aus wie die uebrigen Eingabefelder. */
.intern-rahmen select {
    width: 100%;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--farbe-rand);
    border-radius: var(--rundung);
    background: var(--farbe-hintergrund);
    color: var(--farbe-text);
    font: inherit;
    box-sizing: border-box;
}

/* Liste der eigenen Termine: eine Karte je Termin. */
.termin-eintrag-liste {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
}

.termin-eintrag-karte {
    margin: 0 0 1rem;
    padding: 1rem 1.2rem;
    border: 1px solid var(--farbe-rand);
    border-radius: var(--rundung);
    background: var(--farbe-flaeche);
}

.termin-eintrag-kopf {
    margin: 0;
    font-weight: 700;
}

.termin-eintrag-zeit {
    margin: 0.3rem 0 0;
    color: var(--farbe-gedaempft);
}

/* Bearbeiten und Loeschen nebeneinander, auf schmalen Handys umbrechend. */
.termin-eintrag-aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.8rem;
}

.termin-eintrag-aktionen form {
    margin: 0;
}

.termin-eintrag-aktionen .knopf {
    margin-top: 0;
}


/* ------------------------------------------------------------------ */
/* Schaltraum (Admin-Bereich, Ausbaustufe 1.5)                        */
/* Mobil zuerst: eine Kachel je Zeile, ab mittlerer Breite ein Raster.*/
/* ------------------------------------------------------------------ */

.schaltraum-kacheln {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.8rem;
}

@media (min-width: 40rem) {
    .schaltraum-kacheln {
        grid-template-columns: 1fr 1fr;
    }
}

.schaltraum-kachel {
    display: block;
    height: 100%;
    padding: 1rem 1.2rem;
    border: 1px solid var(--farbe-rand);
    border-radius: var(--rundung);
    background: var(--farbe-hintergrund);
    color: var(--farbe-text);
    text-decoration: none;
    box-sizing: border-box;
}

.schaltraum-kachel:hover,
.schaltraum-kachel:focus-visible {
    border-color: var(--farbe-akzent);
}

.schaltraum-kachel-titel {
    display: block;
    font-weight: 700;
}

.schaltraum-kachel-zeile {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.9rem;
    color: var(--farbe-gedaempft);
}

/* Datensicherung: Liste der Datensaetze mit Ankreuzfeld, Titel, Zahl
   und einer Erklaerungszeile. */
.datensatz-liste {
    list-style: none;
    margin: 0.8rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.4rem;
}

@media (min-width: 52rem) {
    .datensatz-liste {
        grid-template-columns: 1fr 1fr;
    }
}

.datensatz-liste li {
    margin: 0;
}

.intern-rahmen .datensatz-liste label {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 0.6rem;
    align-items: start;
    margin: 0;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--farbe-rand);
    border-radius: var(--rundung);
    background: var(--farbe-hintergrund);
    font-weight: 400;
    cursor: pointer;
}

.intern-rahmen .datensatz-liste input[type="checkbox"] {
    width: auto;
    margin: 0.2rem 0 0;
}

.datensatz-titel {
    font-weight: 600;
}

.datensatz-anzahl {
    font-weight: 400;
    color: var(--farbe-gedaempft);
}

.datensatz-zeile {
    grid-column: 2;
    font-size: 0.85rem;
    color: var(--farbe-gedaempft);
}

/* Die drei Bereiche der Datensicherung: eigener Grund je Bereich, damit
   Export, Import und Sicherungen klar getrennt sind. */
.intern-rahmen .sicherung-block {
    margin: 1.5rem 0 0;
    padding: 1.2rem 1.4rem 1.5rem;
    border: 1px solid var(--farbe-rand);
    border-radius: var(--rundung);
}

.intern-rahmen .sicherung-block h2 {
    margin-top: 0;
}

.sicherung-export {
    background: var(--farbe-hintergrund);
    border-left: 5px solid var(--farbe-akzent);
}

.sicherung-import {
    background: var(--farbe-akzent-2-weich);
    border-left: 5px solid var(--farbe-akzent-2);
}

.sicherung-csv-export {
    background: rgba(70, 150, 100, 0.10);
    border-left: 5px solid #3f8a5c;
}

.sicherung-csv-import {
    background: rgba(128, 0, 128, 0.08);
    border-left: 5px solid #800080;
}

.sicherung-archiv {
    background: var(--farbe-flaeche);
    border-left: 5px solid var(--farbe-gedaempft);
}

.sicherung-csv-import .csv-zeile-fehler td {
    color: var(--farbe-gedaempft);
    text-decoration: line-through;
}

.sicherung-csv-import .csv-zeile-fehler td:last-child {
    text-decoration: none;
}

.sicherung-import .datensatz-liste label,
.sicherung-archiv .datensatz-liste label {
    background: var(--farbe-hintergrund);
}

/* Meldungen mit mehreren Zeilen (Import-Bericht). */
.intern-hinweis.mehrzeilig {
    line-height: 1.5;
}

/* Deutliche Warnflaeche fuer die Rueckfrage vor dem Loeschen. */
.schaltraum-warnflaeche {
    margin: 1rem 0;
    padding: 1rem 1.2rem;
    border: 2px solid var(--farbe-akzent);
    border-radius: var(--rundung);
    background: var(--farbe-hintergrund);
}

/* Anzeige des geheimen Galerie-Links (lange Zeichenkette, umbrechend). */
.schaltraum-geheimlink {
    padding: 0.8rem 1rem;
    border: 1px solid var(--farbe-rand);
    border-radius: var(--rundung);
    background: var(--farbe-hintergrund);
    word-break: break-all;
}

/* Ein Schalter (Ankreuzkaestchen mit Beschriftung) je Zeile. */
.schaltraum-schalter {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 1rem 0 0;
    font-weight: 600;
}

.schaltraum-schalter input[type="checkbox"] {
    width: 1.3rem;
    height: 1.3rem;
    margin: 0;
    flex: none;
}

/* Zeile der Strassenliste: Eingabefeld und Knoepfe. */
.schaltraum-strassen-zeile input[type="text"] {
    margin-top: 0;
}

/* Beschriftung nur fuer Vorleseprogramme, unsichtbar im Bild. */
.schaltraum-unsichtbar {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Protokoll-Anzeige: Rohtext mit Zeilenumbruechen, seitlich rollbar. */
.schaltraum-protokoll {
    padding: 1rem 1.2rem;
    border: 1px solid var(--farbe-rand);
    border-radius: var(--rundung);
    background: var(--farbe-hintergrund);
    overflow-x: auto;
    font-size: 0.9rem;
}

/* Farbwahl im Schaltraum (Gestaltung): Farbfelder als anklickbare Punkte. */
.gestaltung-farbwahl {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.4rem 0 1rem;
}

.gestaltung-farbe {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.7rem 0.3rem 0.4rem;
    border: 1px solid var(--farbe-rand);
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.9rem;
}

.gestaltung-farbe input[type="radio"] {
    margin: 0;
}

/* Das Farbfeld selbst; die Farbe kommt als Inline-Stil aus der Palette. */
.gestaltung-farbfeld {
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    border: 1px solid var(--farbe-rand);
    border-radius: 50%;
}

.gestaltung-art {
    display: flex;
    gap: 1.2rem;
    margin: 0.4rem 0 1rem;
}

.gestaltung-art label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
}

/* Vom Admin hochgeladene Inhalts-Bloecke (inhalte/kopf|mitte|fuss.html). */
.inhalt-block img {
    max-width: 100%;
    height: auto;
}


/* ================================================================== */
/* Moderne Formularkarten (Steckbrief, Anmeldung, Termine)            */
/* ------------------------------------------------------------------ */
/* Eine hervorgehobene Karte mit kraeftigem Schatten, feinem oberen   */
/* Farbstreifen (zweite Akzentfarbe) und luftigen Eingabefeldern.     */

.formkarte {
    background: var(--farbe-hintergrund);
    border: 1px solid var(--farbe-rand);
    border-radius: 16px;
    box-shadow: var(--schatten-gross);
    padding: 1.6rem 1.6rem 1.8rem;
    margin-top: 1.2rem;
    position: relative;
    overflow: hidden;
}

/* Oberer Farbstreifen aus beiden Akzentfarben. */
.formkarte::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    background: linear-gradient(90deg, var(--farbe-akzent), var(--farbe-akzent-2));
}

/* Karte, die auf der Seite mittig steht (Anmeldung). */
.formkarte.mittig {
    max-width: 30rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.formkarte.mittig form {
    text-align: left;
}

/* Gruppen innerhalb einer Formularkarte: als weiche Felder abgesetzt. */
.formkarte fieldset {
    border: 1px solid var(--farbe-rand);
    border-radius: var(--rundung);
    background: var(--farbe-flaeche);
    padding: 1rem 1.1rem 1.15rem;
    margin: 0 0 1.1rem;
    box-shadow: var(--schatten);
}

.formkarte legend {
    padding: 0 0.5rem;
    font-weight: 600;
    color: var(--farbe-akzent);
}

/* Eingabefelder in Formularkarten: groesser, weicher, mit Fokusring. */
.formkarte input[type="text"],
.formkarte input[type="email"],
.formkarte input[type="url"],
.formkarte input[type="tel"],
.formkarte input[type="number"],
.formkarte input[type="date"],
.formkarte input[type="time"],
.formkarte textarea,
.formkarte select {
    width: 100%;
    box-sizing: border-box;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--farbe-rand);
    border-radius: var(--rundung);
    background: var(--farbe-hintergrund);
    color: var(--farbe-text);
    font: inherit;
    margin: 0.15rem 0 0.2rem;
}

.formkarte input:focus,
.formkarte textarea:focus,
.formkarte select:focus {
    outline: none;
    border-color: var(--farbe-akzent-2);
    box-shadow: 0 0 0 3px var(--farbe-akzent-2-weich);
}

.formkarte label {
    display: block;
    margin-top: 0.6rem;
    font-weight: 600;
}

/* Grosser Knopf mit Verlauf aus den beiden Akzentfarben. */
.knopf.gross.bunt {
    background: linear-gradient(90deg, var(--farbe-akzent), var(--farbe-akzent-2));
    color: #ffffff;
    border: 0;
    box-shadow: var(--schatten);
}

.knopf.gross.bunt:hover {
    filter: brightness(1.06);
}

/* Runder Pfeil-Knopf "zurueck" (ersetzt den Text-Link). */
.pfeil-zurueck {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    border: 1px solid var(--farbe-rand);
    background: var(--farbe-hintergrund);
    color: var(--farbe-akzent);
    box-shadow: var(--schatten);
    font-size: 1.3rem;
    line-height: 1;
    text-decoration: none;
}

.pfeil-zurueck:hover {
    border-color: var(--farbe-akzent-2);
    color: var(--farbe-akzent-2);
}

/* Hinweis nach dem Speichern, freundlich hervorgehoben. */
.intern-hinweis.gut.tipp {
    border-left: 4px solid var(--farbe-akzent-2);
}

/* Auswahl "Eintritt": Optionen nebeneinander. */
.eintritt-wahl {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    align-items: center;
    margin-top: 0.3rem;
}

.eintritt-wahl label {
    margin: 0;
    font-weight: 400;
}

.eintritt-betrag {
    max-width: 8rem;
}

/* Liste alter Termine (zum Kopieren) - je Termin eine Zeile. */
.alte-termine {
    list-style: none;
    margin: 0.6rem 0 0;
    padding: 0;
}

.alte-termine li {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--farbe-rand);
    border-radius: var(--rundung);
    background: var(--farbe-flaeche);
    margin-bottom: 0.4rem;
    box-shadow: var(--schatten);
}

.alte-termine .termin-text {
    flex: 1;
    min-width: 0;
}

.alte-termine .knopf.klein {
    padding: 0.25rem 0.7rem;
    font-size: 0.85rem;
    white-space: nowrap;
}

/* Strassenliste im Schaltraum: alphabetische Aufzaehlung. */
.strassen-liste {
    list-style: none;
    margin: 0.6rem 0 0;
    padding: 0;
    columns: 2;
    column-gap: 1.2rem;
}

.strassen-liste li {
    padding: 0.35rem 0.2rem;
    border-bottom: 1px solid var(--farbe-rand);
    break-inside: avoid;
}

@media (max-width: 30rem) {
    .strassen-liste {
        columns: 1;
    }
}

/* Zeile mit dem Pfeil-Zurueck-Knopf ueber einer Formularkarte. */
.zurueck-zeile {
    margin: 0 0 0.2rem;
}

/* Aufklappbare "Alte Veranstaltungen" (natives <details>). */
.alte-termine-block > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--farbe-akzent);
    padding: 0.5rem 0;
}

.alte-termine-block > summary:hover {
    color: var(--farbe-akzent-2);
}

.alte-termine em {
    color: var(--farbe-akzent-2);
    font-style: normal;
}

/* Foto und Eintritt in der oeffentlichen Terminliste. */
.termin-foto {
    display: block;
    max-width: 100%;
    height: auto;
    margin-top: 0.6rem;
    border-radius: var(--rundung);
    box-shadow: var(--schatten);
}


/* Termin-Karte (oeffentlich) etwas moderner: weicher Schatten. */
.termin {
    box-shadow: var(--schatten);
}


/* ==================================================================== */
/* Ergänzungen: Logo, Kartenrahmen, Filterknöpfe                        */
/*                                                                      */
/* Es werden nur Bausteine ergänzt. Die Farbwerte bleiben unangetastet, */
/* damit der im Schaltraum eingestellte Seitenhintergrund weiter wirkt. */
/* ==================================================================== */


/* Das Logo am Anfang der Startseite --------------------------------- */

.logo-start {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 6vh 0 4vh;
}

.bildmass {
    width: 450px;
    max-width: 70vw;
    max-height: 80vh;
    height: auto;
}


/* Steckbrief-Karten: Rahmen, Schatten, runde Ecken ------------------- */

.steckbrief {
    border: 1px solid var(--farbe-rand);
    border-radius: 22px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.26), 0 2px 6px rgba(0, 0, 0, 0.12);
    background: var(--farbe-flaeche);
    overflow: hidden;
}

.steckbrief-name {
    letter-spacing: 0.06em;
}

.steckbrief-technik {
    letter-spacing: 0.12em;
    opacity: 0.8;
}

/* Foto und Inhalt folgen der Rundung der Karte. */
.steckbrief .foto-slider,
.steckbrief .slider-bild img {
    border-radius: 18px 18px 0 0;
}

/* "Mehr lesen" und "Visitenkarte" nebeneinander in einer Zeile. */
.karten-aktionen {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    align-items: center;
}

.karten-aktionen .knopf {
    flex: 1 1 auto;
    text-align: center;
    white-space: nowrap;
}


/* Breite Nutzung grosser Monitore (wie im alten Stylesheet: keine
   feste Spaltenbreite, sondern Raender in Prozent) ------------------- */

/* Der Hauptbereich ist so breit wie das Fenster; die Begrenzung uebernimmt
   .bereich-innen. So koennen die Bereichsfarben bis an den Rand reichen. */
main {
    max-width: none;
    width: 100%;
    padding: 0;
}

.bereich {
    margin: 0;
    padding: 2.5rem 0 3rem;
}

.bereich-innen {
    max-width: 118rem;
    margin: 0 auto;
    padding-left: clamp(1rem, 5vw, 6rem);
    padding-right: clamp(1rem, 5vw, 6rem);
}

.bereich-oben {
    padding-top: 0;
    padding-bottom: 1.5rem;
}

.abschnitt {
    margin: 0;
    padding: 1.5rem 0;
}

.logo-start {
    margin: 0;
}

.abschnitt h2 {
    letter-spacing: 0.1em;
    font-weight: 600;
    opacity: 0.7;
}


/* Knoepfe: eckig, ruhig, gesperrte Schrift ---------------------------- */

/* Knoepfe wie in ruhigen Editorial- und Museumsauftritten: Haarlinie,
   gesperrte Kleinschrift, beim Ueberfahren nur ein Hauch Tonfläche und
   eine feste Linie - keine Balken, kein Leuchten. Fokus bleibt deutlich. */
.knopf {
    border-radius: 2px;
    padding: 0.5rem 1.1rem;
    font-size: clamp(0.82rem, 0.72rem + 0.25vw, 0.95rem);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    background: transparent;
    color: var(--farbe-text);
    border: 1px solid var(--farbe-rand);
    box-shadow: none;
    transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}

.knopf:hover,
.knopf[aria-pressed="true"] {
    background: color-mix(in srgb, currentColor 7%, transparent);
    color: var(--farbe-text);
    border-color: var(--farbe-text);
    box-shadow: none;
}

.knopf:active {
    transform: translateY(1px);
}

.knopf:focus-visible {
    outline: 2px solid var(--farbe-akzent);
    outline-offset: 2px;
    box-shadow: none;
}

.knopf.gross {
    border-radius: 2px;
    padding: 0.8rem 2rem;
    font-size: clamp(0.95rem, 0.85rem + 0.3vw, 1.1rem);
    background: transparent;
    color: var(--farbe-text);
    border: 1px solid var(--farbe-text);
    box-shadow: none;
}

.knopf.gross:hover {
    background: color-mix(in srgb, currentColor 8%, transparent);
    color: var(--farbe-text);
    box-shadow: none;
}

.knopf.nebenrolle {
    border-color: var(--farbe-rand);
    color: var(--farbe-gedaempft);
}

/* Aeltere Browser ohne color-mix: einfache, ruhige Tonflaeche. */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    .knopf:hover,
    .knopf[aria-pressed="true"],
    .knopf.gross:hover {
        background: var(--farbe-flaeche);
    }
}

/* Auch die runden Symbolknoepfe und die Filterknoepfe werden eckig. */
.rund-knopf,
.filter-chip {
    border-radius: 2px;
}

.filter-chip {
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: clamp(0.78rem, 0.7rem + 0.2vw, 0.9rem);
}


/* Knoepfe auf der Karte: bei wenig Platz untereinander und mittig ----- */

.karten-aktionen {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

/* Die Knopfschrift bleibt kleiner als der Text im Steckbrief. */
.steckbrief .karten-aktionen .knopf {
    font-size: clamp(0.7rem, 0.62rem + 0.2vw, 0.82rem);
}

.karten-aktionen .knopf {
    flex: 1 1 9rem;
    min-width: 0;
    text-align: center;
    white-space: nowrap;
    padding-left: 0.7rem;
    padding-right: 0.7rem;
}


/* Bewerbungsformular "Dabei sein" ------------------------------------ */

.bewerbung-rahmen {
    max-width: 56rem;
}

/* Mobil eine Spalte, ab Tablet zwei. Breite Felder gehen ueber beide. */
.bewerbung-raster {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.4rem 1.4rem;
}

@media (min-width: 40rem) {
    .bewerbung-raster {
        grid-template-columns: 1fr 1fr;
    }

    .bewerbung-raster .breit {
        grid-column: 1 / -1;
    }
}

.bewerbung-raster .feld {
    min-width: 0;
}

/* Ankreuzfelder in Reihen, die von selbst umbrechen. */
.wahlfelder {
    margin: 0.6rem 0 0.2rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--farbe-rand);
    border-radius: var(--rundung);
}

.wahlfelder legend {
    padding: 0 0.4rem;
    font-weight: 600;
}

.wahl-reihe {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.2rem;
}

.wahl {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    cursor: pointer;
}

.wahl input {
    width: auto;
    margin: 0;
}


/* Reiter und Flaechen im Schaltraum (Gestaltung) --------------------- */

.reiter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 1.2rem 0 0;
}

.reiter-knopf.aktiv {
    border-color: var(--farbe-text);
    background: color-mix(in srgb, currentColor 9%, transparent);
}

/* Sichtbar ist immer nur das gewaehlte Blatt. Ohne Javascript sorgt ein
   noscript-Block auf der Seite dafuer, dass alle Blaetter erscheinen. */
.reiter-blatt {
    display: none;
    margin: 1rem 0 2rem;
}

.reiter-blatt.aktiv {
    display: block;
}

.gestaltung-flaeche {
    margin: 1rem 0;
    padding: 0.9rem 1rem;
    border: 1px solid var(--farbe-rand);
    border-radius: 2px;
}

.gestaltung-flaeche legend {
    padding: 0 0.4rem;
    font-weight: 600;
}


/* Wiederholungen im Terminformular ----------------------------------- */

.wiederholung {
    margin: 0.4rem 0 1rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--farbe-rand);
    border-radius: 2px;
}

.wiederholung legend {
    padding: 0 0.4rem;
    font-weight: 600;
}

/* Wiederholung eingeklappt (natives <details>), oeffnet sich per Klick. */
.wiederholung-block {
    margin-top: 1.2rem;
}

.wiederholung-block > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--farbe-akzent);
    padding: 0.5rem 0;
}

.wiederholung-block > summary:hover {
    color: var(--farbe-akzent-2);
}


/* Terminformular: Handy einspaltig, ab mittlerer Breite mehrspaltig. */
.intern-rahmen.terminseite {
    max-width: 48rem;
}

.feld-reihe {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 1rem;
}

.feld-reihe .feld {
    min-width: 0;
}

@media (min-width: 40rem) {
    .feld-reihe.zwei {
        grid-template-columns: 1fr 1fr;
    }
    .feld-reihe.drei {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .feld-reihe.adresse {
        grid-template-columns: 2fr 1fr 2fr;
    }
}


/* Datentabellen im Schaltraum ---------------------------------------- */

.intern-rahmen.breit {
    max-width: 118rem;
}

.tabellen-leiste {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem 1.5rem;
    align-items: flex-end;
    justify-content: space-between;
    margin: 1rem 0;
}

.suchzeile {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: flex-end;
    margin: 1rem 0;
}

.suchzeile label {
    margin: 0;
}

.suchzeile input[type="search"] {
    min-width: 14rem;
    margin: 0;
}

/* Breite Tabellen scrollen waagerecht, statt die Seite zu sprengen. */
.tabellen-rahmen {
    overflow-x: auto;
    margin: 0.5rem 0 1.5rem;
    border: 1px solid var(--farbe-rand);
    border-radius: 2px;
}

.datentabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.datentabelle th,
.datentabelle td {
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid var(--farbe-rand);
    text-align: left;
    vertical-align: top;
}

.datentabelle th {
    background: var(--farbe-flaeche);
    font-weight: 600;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.datentabelle th a {
    text-decoration: none;
    color: inherit;
}

.datentabelle tbody tr:hover {
    background: var(--farbe-flaeche);
}

/* Eingabefelder in der Tabelle: kompakt, keine Aussenabstaende. */
.datentabelle.bearbeitbar input,
.datentabelle.bearbeitbar select,
.datentabelle.bearbeitbar textarea {
    width: 100%;
    min-width: 7rem;
    margin: 0;
    padding: 0.3rem 0.4rem;
    font-size: 0.9rem;
}

.datentabelle.bearbeitbar input.schmal {
    min-width: 3.5rem;
    width: 4rem;
}

.datentabelle.bearbeitbar input[type="checkbox"] {
    width: auto;
    min-width: 0;
}

.datentabelle.bearbeitbar textarea {
    min-width: 14rem;
}

.tabellen-aktionen {
    white-space: nowrap;
}

.tabellen-aktionen form {
    display: inline;
}

.tabellen-aktionen .knopf {
    margin: 0.1rem 0.15rem;
    padding: 0.3rem 0.7rem;
    font-size: 0.78rem;
}


/* Vernetzen: leise Gestaltung nach dem alten Formular ---------------- */

.netzseite h1 {
    font-weight: 500;
}

.netzvorspann {
    color: var(--farbe-gedaempft);
}

.netzfrage {
    margin: 1.2rem 0 0;
    font-size: 1.05rem;
}

/* Jede Gruppe: duenner farbiger Rahmen, leise Ueberschrift, Liste
   untereinander (eine Angabe je Zeile). */
.netzgruppe {
    --netzton: var(--farbe-rand);
    margin: 0.6rem 0;
    padding: 0.6rem 0.9rem 0.8rem;
    border: 1px solid var(--netzton);
    border-radius: 2px;
    font-size: 0.92rem;
}

.netzgruppe legend {
    padding: 0 0.4rem;
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    color: var(--netzton);
    opacity: 0.85;
}

.netzgruppe.rollen legend {
    color: var(--farbe-text);
    font-weight: 600;
}

.netzliste {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.netzliste .wahl {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.1rem 0;
    color: var(--farbe-gedaempft);
}

.netzliste .wahl:hover {
    color: var(--farbe-text);
}

.netzliste .wahl input {
    width: auto;
    margin: 0;
}

.andere-feld {
    margin-top: 0.4rem;
}

.andere-feld label {
    font-size: 0.85rem;
    color: var(--farbe-gedaempft);
}

/* Farbtoene der vier Bereiche - dezent, nur als Rahmen und Titel. */
.ton-gruen   .netzgruppe { --netzton: #5f9c5f; }
.ton-blau    .netzgruppe { --netzton: #5d80c9; }
.ton-tuerkis .netzgruppe { --netzton: #4d9a9a; }
.ton-orange  .netzgruppe { --netzton: #d08a5a; }

.netzseite .knopf.gross {
    font-weight: 500;
}


/* Termine verwalten: eine Zeile je Termin ----------------------------- */

.terminzeile-kopf {
    display: grid;
    grid-template-columns: 7rem minmax(10rem, 2fr) minmax(8rem, 1.2fr) 7rem auto;
    gap: 0.6rem 1rem;
    align-items: center;
}

.terminzeile-datum,
.terminzeile-stand {
    color: var(--farbe-gedaempft);
    font-size: 0.9rem;
    line-height: 1.25;
}

.terminzeile-wer {
    color: var(--farbe-gedaempft);
    font-size: 0.95rem;
}

.terminzeile-aktionen {
    justify-content: flex-end;
    white-space: nowrap;
}

.terminzeile-aktionen .knopf {
    padding: 0.3rem 0.7rem;
    font-size: 0.78rem;
}

.terminzeile.offen {
    border-color: var(--farbe-akzent);
}

@media (max-width: 52rem) {
    .terminzeile-kopf {
        grid-template-columns: 1fr 1fr;
    }

    .terminzeile-titel {
        grid-column: 1 / -1;
    }

    .terminzeile-aktionen {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

/* Terminformular des Admins: ab Tablet zwei Spalten, breite Teile ueber
   beide. */
@media (min-width: 52rem) {
    .terminformular {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.2rem 1.6rem;
        align-items: start;
    }

    .terminformular > label {
        margin-top: 0.4rem;
    }

    .terminformular > textarea,
    .terminformular > fieldset,
    .terminformular > .wahl,
    .terminformular > button,
    .terminformular > input[type="hidden"] {
        grid-column: 1 / -1;
    }

    .terminformular > label[for$="_beschreibung"],
    .terminformular > label[for$="_foto"] {
        grid-column: 1 / -1;
    }
}

.termin-veranstalter {
    color: var(--farbe-gedaempft);
    font-size: 0.95em;
}


/* ==================================================================== */
/* Veranstaltungen im Plakatstil                                        */
/*                                                                      */
/* Anleihen bei gedruckten Veranstaltungsplakaten: die Tageszahl gross, */
/* Monat und Wochentag klein und gesperrt darunter, Titel in einer      */
/* Serifenschrift, viel Luft, feine Linien, kraeftiger Schatten.        */
/* ==================================================================== */

#termin-liste {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.6rem;
}

.termin {
    display: grid;
    grid-template-columns: 6.5rem 1fr auto;
    gap: 0 1.6rem;
    align-items: start;
    padding: 1.4rem 1.6rem 1.4rem 1.2rem;
    border: 1px solid var(--farbe-rand);
    border-radius: 6px;
    background: var(--farbe-flaeche);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.termin:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.32), 0 3px 8px rgba(0, 0, 0, 0.14);
}

/* Das Datumsfeld: Tageszahl als Blickfang. */
.termin-datum {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-right: 1.2rem;
    border-right: 1px solid var(--farbe-rand);
    text-align: center;
    line-height: 1;
}

.termin-tag {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 3.2rem;
    font-weight: 400;
    letter-spacing: -0.03em;
}

.termin-monat {
    margin-top: 0.3rem;
    font-size: 0.85rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.termin-wochentag {
    margin-top: 0.4rem;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    color: var(--farbe-gedaempft);
}

.termin-datum.gross .termin-tag {
    font-size: 4.4rem;
}

/* Der Text: Titel in Serifen, Angaben klein und gesperrt. */
.termin-text h3 {
    margin: 0 0 0.5rem;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: 0.01em;
}

.termin-zeit,
.termin-ort,
.termin-veranstalter,
.termin-eintritt {
    margin: 0.15rem 0;
    font-size: 0.86rem;
    letter-spacing: 0.06em;
    color: var(--farbe-gedaempft);
}

.termin-zeit {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--farbe-text);
}

.termin-eintritt {
    font-style: italic;
    letter-spacing: 0.02em;
}

/* Beschreibung in der Karte nur angerissen; alles steht im Fenster. */
.termin-kurz {
    margin: 0.8rem 0 0;
    max-height: 4.8em;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent);
            mask-image: linear-gradient(to bottom, #000 60%, transparent);
}

.termin-mehr {
    margin: 0.6rem 0 0;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--farbe-akzent);
    background: transparent;
    color: var(--farbe-text);
    font: inherit;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
}

/* Rechte Spalte: Foto, QR-Code und ein leiser Kalenderverweis. */
.termin-seite {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

/* Keine Spalte der Terminkarte darf breiter werden als der Platz, den sie
   hat. Ohne diese Angabe waechst eine Gitterspalte bis zur Breite ihres
   laengsten Wortes bzw. Bildes - die Karte wird dann breiter als die
   Steckbriefe darunter und die ganze Seite laesst sich seitlich schieben. */
.termin > * {
    min-width: 0;
}

.termin-text h3,
.termin-text p,
.termin-beschreibung {
    overflow-wrap: anywhere;
}

.termin-seite .termin-foto {
    width: 9rem;
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.termin-seite .qr-code {
    width: 5rem;
    height: 5rem;
    opacity: 0.85;
}

.kalender-eintrag-knopf {
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--farbe-gedaempft);
    text-decoration: none;
    border-bottom: 1px solid var(--farbe-rand);
}

.kalender-eintrag-knopf:hover {
    color: var(--farbe-text);
    border-color: var(--farbe-akzent);
}

@media (max-width: 46rem) {
    .termin {
        grid-template-columns: 4.6rem 1fr;
        padding: 1.1rem 1.1rem 1.1rem 0.9rem;
    }

    .termin-tag {
        font-size: 2.4rem;
    }

    .termin-seite {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        margin-top: 1rem;
        padding-top: 0.8rem;
        border-top: 1px solid var(--farbe-rand);
    }
}

/* Das Fenster zum Termin: gleicher Aufbau, mehr Luft. */
.termin-dialog-kopf {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 1.8rem;
    align-items: start;
    margin: 0;
    padding: 1.4rem 3.6rem 1rem 1.6rem;
    border-bottom: 1px solid var(--farbe-rand);
}

.termin-dialog .dialog-foto {
    margin: 0 0 1.2rem;
}

.termin-dialog-kopf h3 {
    margin: 0 0 0.5rem;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
    font-weight: 400;
    line-height: 1.1;
}

/* Pop-up: Standort-Name fett, Eintritt lila mit Seitenabstand,
   Veranstalter als letzter Punkt mit Abstand nach oben. */
.termin-dialog .termin-standort {
    margin: 0.3rem 0 0.1rem;
    font-weight: 700;
    color: var(--farbe-text);
}

.termin-dialog .termin-eintritt {
    margin: 0.5rem 1rem 0.2rem;
    color: #800080;
}

.termin-dialog .termin-veranstalter {
    margin-top: 0.9rem;
}

.termin-dialog-foto {
    margin: 0 0 1.2rem;
}

.termin-dialog-foto img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    /* Hochformat wird in der Hoehe begrenzt, statt das Fenster zu fuellen. */
    max-height: 45vh;
    margin: 0 auto;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
}

.termin-dialog .termin-dialog-kopf {
    flex: 0 0 auto;
}

.termin-dialog .langtext {
    font-size: 1.02rem;
    line-height: 1.7;
    max-width: 60ch;
}

.termin-dialog .dialog-fuss {
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 0;
}

/* Abschnittstitel: gesperrte Kapitaelchen-Zeile mit feiner Linie. */
.abschnitt > h2 {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 0 1.4rem;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    opacity: 0.9;
}

.abschnitt > h2::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--farbe-rand);
}


/* Datentabellen: Auswahl der Kulturbereiche in drei Zeilen, schmale
   Spalten, gestapelte Knoepfe. */
.artwahl {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(3, auto);
    gap: 0.1rem 0.6rem;
    font-size: 0.68rem;
    white-space: nowrap;
}

/* Kennung: sehr schmal, Umbruch an jeder Stelle erlaubt. */
.datentabelle .spalte-kennung {
    width: 50px;
    max-width: 50px;
    padding-left: 0.3rem;
    padding-right: 0.3rem;
}

.datentabelle .spalte-kennung code {
    font-size: 0.68rem;
    overflow-wrap: anywhere;
    word-break: break-all;
    white-space: normal;
}

.datentabelle th.spalte-kennung {
    white-space: normal;
}

.artwahl label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0;
}

.datentabelle.bearbeitbar .artwahl input[type="checkbox"] {
    width: auto;
    min-width: 0;
    margin: 0;
}

.datentabelle .spalte-schmal {
    width: 7rem;
}

/* Stumm-Auswahl: steht unter den Aktionsknoepfen. */
.datentabelle.bearbeitbar .stummwahl {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0.35rem 0 0;
    font-size: 0.78rem;
}

.tabellen-aktionen.gestapelt {
    width: 6.5rem;
}

/* Aktionen in zwei Spalten nebeneinander; die Stumm-Auswahl darunter
   ueber beide Spalten. */
.tabellen-aktionen.zweispaltig {
    width: 11rem;
    white-space: normal;
}

.tabellen-aktionen.zweispaltig form {
    display: contents;
}

.tabellen-aktionen.zweispaltig .aktionen-raster {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.3rem;
}

.tabellen-aktionen.zweispaltig .knopf {
    margin: 0;
    text-align: center;
    white-space: nowrap;
}

.datentabelle.bearbeitbar .tabellen-aktionen.zweispaltig .stummwahl {
    grid-column: 1 / -1;
    margin-top: 0.2rem;
}

/* Feld mit dem Galerie-Link, wenn Kopieren nicht moeglich ist. */
.tabellen-aktionen.zweispaltig .psst-feld {
    grid-column: 1 / -1;
}

.datentabelle.bearbeitbar .tabellen-aktionen.zweispaltig .psst-feld input {
    min-width: 0;
    font-size: 0.72rem;
}

/* Textfelder (Sonstige Kontakte, Bewerbung, Freier Text) fuellen die
   ganze Zeilenhoehe. Der 1px-Trick auf tr laesst height: 100% in den
   Zellen greifen. */
.datentabelle.bearbeitbar tr {
    height: 1px;
}

.datentabelle.bearbeitbar td.spalte-text {
    height: 100%;
    min-width: 12rem;
}

.datentabelle.bearbeitbar td.spalte-text textarea {
    display: block;
    height: 100%;
    min-height: 5rem;
    box-sizing: border-box;
    resize: vertical;
}

@media (max-width: 40rem) {
    .datentabelle.bearbeitbar tr {
        height: auto;
    }
    .datentabelle.bearbeitbar td.spalte-text {
        height: auto;
    }
    .datentabelle.bearbeitbar td.spalte-text textarea {
        height: auto;
        min-height: 3rem;
        field-sizing: content;
    }
}

.tabellen-aktionen.gestapelt form,
.tabellen-aktionen.gestapelt .knopf {
    display: block;
}

.tabellen-aktionen.gestapelt .knopf {
    width: 100%;
    margin: 0.15rem 0;
    text-align: center;
}


/* Serien: Tagwahl und Hinweise ---------------------------------------- */

.serie-hinweis {
    font-size: 0.85em;
    color: var(--farbe-gedaempft);
    letter-spacing: 0.03em;
}

.serie-tagwahl {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem;
    margin: 0.6rem 0 0.2rem;
}

.serie-tagwahl label {
    margin: 0;
    font-size: 0.9rem;
}

.serie-tagwahl select {
    margin: 0;
    width: auto;
}

/* Vermerk neben dem Speichern-Knopf in den Datentabellen. */
.speichervermerk {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--farbe-gedaempft);
}

.speichervermerk.warnung {
    color: var(--farbe-akzent-2);
}