/*
 * dd_events - Termine
 *
 * Bewusst klein: Hero, Karten, Kacheln und Galerie nutzen die Komponenten des
 * Cube-Themes (cover, card, card-hover-gradient, equal-1-1, figure.background).
 * Hier steht nur, was das Theme nicht mitbringt.
 */

/*
 * Hero mit Plakat
 * ---------------
 * Die Termin-Bilder sind meist DIN-A4-Plakate mit eigenem Text. Formatfuellend
 * als Hintergrund werden sie unleserlich und kollidieren mit der Ueberschrift.
 * Loesung: das Plakat steht vollstaendig sichtbar neben dem Text, der
 * Hintergrund ist nur eine unscharfe, abgedunkelte Kopie davon.
 */
.dde-hero__backdrop {
    filter: blur(2.5rem) saturate(0.7);
    transform: scale(1.15);
    opacity: .3;
}

.dde-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(105deg,
        rgba(0, 0, 0, .82) 0%,
        rgba(0, 0, 0, .55) 55%,
        rgba(0, 0, 0, .3) 100%);
}

.dde-hero .foreground {
    position: relative;
    z-index: 1;
}

.dde-hero__eyebrow {
    letter-spacing: .14em;
    opacity: .85;
}

.dde-hero__poster {
    display: block;
    width: 100%;
    height: auto;
    max-height: 70vh;
    object-fit: contain;
    border-radius: .5rem;
    box-shadow: 0 2rem 4rem -1rem rgba(0, 0, 0, .65);
}

/*
 * Bildkacheln lesbar halten
 * -------------------------
 * Angehaengt an .card-arrow statt an einen Vorfahren: die Kachel wird auch
 * in der Detailansicht und in den news-Listen gerendert, wo es keinen
 * .dde-events-Rahmen gibt.
 *
 * card-hover-gradient blendet den Verlauf erst beim Ueberfahren ein. Auf hellen
 * Plakaten ist der Titel davor unlesbar, also liegt hier dauerhaft ein Verlauf
 * unter dem Text - beim Hover wird er nur kraeftiger.
 */
.card-arrow .card-wrap::after,
.dde-gallery-item .card-wrap::after {
    content: "";
    position: absolute;
    inset: 40% 0 0 0;
    z-index: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .55) 45%, transparent 100%);
    transition: opacity .25s ease;
    pointer-events: none;
}

.card-arrow .card-wrap > *,
.dde-gallery-item .card-wrap > * {
    position: relative;
    z-index: 1;
}

.card-arrow .card-footer h3,
.card-arrow .card-footer h5,
.card-arrow .card-footer .text-muted {
    text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}

.card-arrow .card-footer .text-muted {
    color: rgba(255, 255, 255, .78) !important;
}

/* Die Beschriftungskachel traegt die Buendnisfarbe. */
.dde-label-card .card-footer h2 {
    font-size: clamp(1.5rem, 2.4vw, 2.25rem);
    line-height: 1.1;
}

/* Vergangene Termine treten optisch zurück. */
.card-arrow.is-past figure.background {
    filter: saturate(.7) brightness(.85);
}

/*
 * Kachelbeschriftung
 * ------------------
 * Die Schrift war zu klein, um ueber einem Plakat noch gelesen zu werden -
 * und das Datum stand unten im unruhigsten Teil des Bildes. Es sitzt jetzt
 * oben als eigene Plakette mit eigenem Untergrund, der Titel darunter ist
 * deutlich groesser.
 */
.card-arrow .card-title {
    font-size: clamp(1.35rem, 1.7vw, 1.75rem);
    line-height: 1.25;
    font-weight: 600;
    margin-bottom: 0;
    text-wrap: balance;
}

.dde-card__date {
    align-self: flex-start;
    display: inline-flex;
    flex-direction: column;
    gap: .1rem;
    /* Buendig mit dem Titel darunter: .card-footer hat 2.5rem Innenabstand,
       .card-wrap selbst keinen. */
    margin: 1.25rem 0 1rem 1.25rem;
    padding: .5rem .85rem;
    border-radius: .5rem;
    background: rgba(0, 0, 0, .72);
    /* Der Verlauf unter dem Text reicht nur bis zur Kachelmitte - hier oben
       muss die Plakette ihren Untergrund selbst mitbringen. */
    backdrop-filter: blur(4px);
    color: #fff;
    line-height: 1.2;
}

.dde-card__day {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .01em;
}

.dde-card__time {
    font-size: .85rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .82);
}

@media (min-width: 768px) {
    .dde-card__date {
        margin: 2.5rem 0 1rem 2.5rem;
    }
}

.dde-card__meta {
    font-size: 1rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, .85);
    text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}

.dde-events .eyebrow {
    letter-spacing: .1em;
    text-transform: uppercase;
    font-size: .8rem;
    font-weight: 700;
}

.card-arrow .card-header .badge {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .25);
    letter-spacing: .02em;
}

/* Galerie: Zoom beim Überfahren, Lupe als Cursor. */
.dde-gallery-item {
    cursor: zoom-in;
}

.dde-gallery-item figure.background {
    transition: transform .4s ease;
}

.dde-gallery-item:hover figure.background,
.dde-gallery-item:focus-visible figure.background {
    transform: scale(1.06);
}

/* Der Hero einer Terminliste steht direkt über dem Kachelraster - dort stört
   die Scroll-Andeutung des Themes, wenn schon Inhalt folgt. */
.dde-events .cover + section .row.g-0 {
    margin-top: 0;
}

/* Formular */
.dde-form fieldset {
    margin: 0 0 2.5rem;
    padding: 0;
    border: 0;
}

.dde-form legend {
    margin-bottom: 1.25rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--bs-primary, #eb3e4a);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Honeypot: für Menschen unsichtbar, für Bots ein offenes Feld. */
.dde-form__honeypot {
    position: absolute !important;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.dde-form__hint {
    display: block;
    margin-top: .25rem;
    font-size: .875rem;
    opacity: .7;
}

.dde-form .is-invalid-label {
    color: var(--bs-danger, #dc3545);
}

@media (prefers-reduced-motion: reduce) {
    .dde-gallery-item figure.background {
        transition: none;
    }
}

/*
 * Formular-Beschriftungen
 * -----------------------
 * Das Cube-Theme setzt $form-label-color auf einen hellen Grauton - die
 * Grauskala ist dort fuer dunkle Flaechen ausgelegt. Auf der weissen
 * Formularseite waren die Labels dadurch unlesbar.
 */
.dde-form .form-label,
.dde-form .form-check-label,
.dde-form legend {
    color: inherit;
}

.dde-form .form-label {
    font-weight: 600;
}

.dde-form .dde-form__hint {
    color: inherit;
    opacity: .65;
}

/*
 * Listenbilder
 * ------------
 * Ohne height:auto setzt der Browser die Hoehe aus dem height-Attribut des
 * Originals - die Bilder waren dadurch extrem in die Laenge gezogen.
 * Ein festes Seitenverhaeltnis haelt das Raster ruhig; der Bildausschnitt
 * beginnt oben, damit bei Plakaten die Ueberschrift sichtbar bleibt.
 */
.dde-article .card-img-top {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center top;
    border-radius: .5rem;
    background: rgba(0, 0, 0, .04);
}

.dde-article .card-body {
    padding-top: .75rem;
}

/* Datum in der Archiv-Liste: vorher klein und grau, in einer langen Liste
   ("alles was mal war") kaum zu erfassen. Jetzt fett, farbig und vor dem
   Titel - so laesst sich die Liste am Datum entlang ueberfliegen. */
.dde-article__date {
    font-size: .95rem;
    font-weight: 700;
    color: var(--bs-primary, #eb3e4a);
    margin-bottom: .25rem;
}

.dde-article__date i {
    margin-right: .35rem;
}

/*
 * Abstand zwischen den Abschnitten einer Einzelansicht
 * ----------------------------------------------------
 * Die Einzelansicht setzt sich aus Abschnitten (je 8rem Innenabstand) und
 * Inhaltselementen (je 7rem Aussenabstand) zusammen. Wo zwei davon
 * aufeinanderstossen, addieren sie sich auf ueber 270px Leere - zwischen
 * Dingen, die zusammengehoeren: Text, Bildnachweis, Galerie.
 *
 * Deshalb hier ein eigener, ruhigerer Rhythmus fuer alles innerhalb eines
 * Artikels. Das Cover ist ausgenommen, es lebt von seiner Groesse.
 */
/* !important, weil die Abstaende aus Bootstrap-Utilities kommen
   (py-15/py-xl-20) - und die tragen es selbst. */
.news-single .article > section:not(.cover) {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
}

.news-single .article > .dde-frame,
.news-single .article > .frame {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 1200px) {
    .news-single .article > section:not(.cover) {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }

    .news-single .article > .dde-frame,
    .news-single .article > .frame {
        margin-top: 2rem;
        margin-bottom: 2rem;
    }
}

/* Die Galerie-Ueberschrift steht schon im Zusammenhang - sie braucht
   darunter keinen zusaetzlichen Block Luft. */
.news-single .article > section.overflow-hidden .row.mb-5 {
    margin-bottom: 2rem !important;
}

/*
 * Rueckweg im Cover
 * -----------------
 * Steht unten links statt oben: die Navigation liegt fixiert ueber dem
 * Cover, oben ueberschnitt sich der Knopf mit dem Logo. Die Scroll-
 * Andeutung sitzt mittig, daneben bleibt links genug Platz.
 */
.dde-hero__back {
    align-self: flex-start;
    margin-top: 2rem;
}

/*
 * Der Knopf lag als reiner Umriss auf einem unscharfen Plakat - je nach Bild
 * war er kaum zu erkennen. Er bringt seinen Untergrund jetzt selbst mit,
 * dasselbe Muster wie die Datums-Plakette auf den Kacheln.
 */
.dde-hero__back .btn {
    background: rgba(0, 0, 0, .72);
    border-color: rgba(255, 255, 255, .45);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: .9375rem;
    padding: .55rem 1.1rem;
}

.dde-hero__back .btn:hover,
.dde-hero__back .btn:focus-visible {
    background: #fff;
    border-color: #fff;
    color: #000;
}

/*
 * Abstand um die Terminlisten
 * ---------------------------
 * Die Abschnitte erben 8rem Innenabstand aus dem Theme. Unter einer
 * Seiteneinleitung, die selbst schon 7rem Aussenabstand mitbringt, standen
 * damit 270px zwischen Text und erster Kachel. Derselbe ruhigere Rhythmus
 * wie in der Einzelansicht - das Cover bleibt ausgenommen.
 *
 * !important, weil die Werte aus Bootstrap-Utilities kommen (py-15/py-xl-20).
 */
.dde-events > section:not(.cover) {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
}

@media (min-width: 1200px) {
    .dde-events > section:not(.cover) {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }
}

/* Vorschau der Bilder, die schon am Nachbericht haengen. */
.dde-report-image img {
    width: 100%;
    height: auto;
    display: block;
}

.dde-report-image figcaption {
    margin-top: .5rem;
}

/* Das eingereichte Plakat in der Kuratierung - hoch, aber nicht endlos. */
.dde-curation-poster {
    width: 100%;
    height: auto;
    max-height: 18rem;
    object-fit: contain;
    object-position: top;
    background: rgba(0, 0, 0, .04);
}

/* Merken und weitersagen - unter den Eckdaten in der Randspalte.
   Deutlicher Abstand nach oben: sonst kleben die Knoepfe an Datum, Ort und
   Link darueber und sehen aus, als gehoerten sie zu dieser Liste. */
.dde-share {
    margin-top: 2.75rem;
}

.dde-share .btn {
    white-space: nowrap;
}

/* Der Erklaerkasten zu Kalender und RSS. */
.dde-feeds__hint {
    font-size: .875rem;
    line-height: 1.6;
    color: rgba(0, 0, 0, .55);
}

.dde-feeds__hint code {
    font-size: .875em;
    word-break: break-all;
}

/*
 * Textwerkstatt
 * -------------
 * Sichtbar nur fuer Angemeldete und deshalb bewusst anders als der Rest der
 * Seite: gestrichelter Rahmen, gedaempfter Grund. Wer sie sieht, soll auf den
 * ersten Blick erkennen, dass dieser Kasten zum Arbeiten da ist und nicht zum
 * Lesen - und dass die Besucherinnen der Seite ihn nicht sehen.
 */
.dde-ai {
    margin-top: 1.5rem;
    padding: 1rem;
    border: 1px dashed rgba(0, 0, 0, .2);
    border-radius: .75rem;
    background: rgba(0, 0, 0, .025);
}

.dde-ai__title {
    font-size: 1.125rem;
    margin: .25rem 0 .5rem;
}

.dde-ai__lead {
    font-size: .875rem;
    line-height: 1.6;
    color: rgba(0, 0, 0, .6);
    margin-bottom: 1rem;
}

.dde-ai__tasks {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.dde-ai__task {
    white-space: nowrap;
}

/* Waehrend gewartet wird: das Zeichen dreht sich, der Knopf bleibt ruhig. */
.dde-ai__task--busy .bi::before {
    display: inline-block;
    content: "\f130";
    animation: dde-ai-spin 1s linear infinite;
}

@keyframes dde-ai-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .dde-ai__task--busy .bi::before {
        animation: none;
    }
}

.dde-ai__extra {
    margin-top: .75rem;
    font-size: .875rem;
}

.dde-ai__extra summary {
    cursor: pointer;
    color: rgba(0, 0, 0, .6);
}

.dde-ai__extra .form-label {
    margin-top: .5rem;
}

.dde-ai__result {
    margin-top: 1rem;
}

.dde-ai__meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: .35rem;
}

.dde-ai__count {
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
}

/* Ueber der Zeichengrenze - bei Mastodon waere der Beitrag sonst abgeschnitten. */
.dde-ai__count--over {
    color: #b3261e;
    font-weight: 600;
}

/*
 * Der Kasten steht in der schmalen Randspalte neben den Eckdaten. Das Textfeld
 * bekommt deshalb eine feste Mindesthoehe und waechst per Skript mit - eine
 * feste Zeilenzahl waere dort entweder zu hoch oder zu niedrig.
 */
.dde-ai__text {
    font-family: var(--bs-font-monospace, monospace);
    font-size: .8125rem;
    line-height: 1.6;
    white-space: pre-wrap;
    min-height: 11rem;
}

.dde-ai__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .75rem;
}

.dde-ai__note,
.dde-ai__status {
    font-size: .8125rem;
    color: rgba(0, 0, 0, .55);
    margin: .75rem 0 0;
}

.dde-ai__status--error {
    color: #b3261e;
}

/* Der Mandatstext: rechtlich verbindlich, also gut lesbar und abgesetzt. */
.dde-mandate {
    border-left: 3px solid rgba(0, 0, 0, .15);
    padding: 1rem 0 1rem 1.25rem;
    margin-bottom: 1.5rem;
    font-size: .9375rem;
    line-height: 1.7;
    background: rgba(0, 0, 0, .02);
}

/*
 * Gruppenkacheln
 * --------------
 * Eigenes Markup statt der Theme-Karte: eine Gruppe hat oft nur ein Logo auf
 * hellem Grund. Als formatfuellender Hintergrund waere es beschnitten, hier
 * steht es vollstaendig auf einem Feld in der Gruppenfarbe.
 */
.dde-group {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: .75rem;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .08);
    transition: transform .25s ease, box-shadow .25s ease;
}

.dde-group:hover,
.dde-group:focus-within {
    transform: translateY(-.35rem);
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .18);
}

.dde-group__media {
    display: grid;
    place-items: center;
    min-height: 9rem;
    padding: 1.5rem;
    background-color: var(--dde-group-accent, #2E3A59);
    background-size: cover;
    background-position: center;
}

/* Mit Titelbild liegt das Logo auf dem Foto - dafuer braucht es Kontrast. */
.dde-group__media--image {
    position: relative;
}

.dde-group__media--image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .35);
}

.dde-group__logo {
    position: relative;
    z-index: 1;
    max-height: 5.5rem;
    max-width: 100%;
    width: auto;
    object-fit: contain;
}

.dde-group__body {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1.5rem;
}

.dde-group__eyebrow {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, .55);
}

.dde-group__title {
    font-size: 1.25rem;
    line-height: 1.3;
    margin: 0;
}

/* Der Link liegt am Titel, die Flaeche darueber gehoert der ganzen Kachel. */
.dde-group__link {
    color: inherit;
    text-decoration: none;
}

.dde-group__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.dde-group {
    position: relative;
}

.dde-group__link:hover,
.dde-group__link:focus-visible {
    text-decoration: underline;
}

.dde-group__teaser {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.6;
    color: rgba(0, 0, 0, .7);
}

/* Die Kontaktwege liegen ueber der Kachelflaeche - sonst faengt der
   Titel-Link jeden Klick ab. */
.dde-group__links {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    list-style: none;
    margin: .25rem 0 0;
    padding: 0;
    font-size: .875rem;
}

.dde-group__links a {
    color: inherit;
    text-decoration: none;
    opacity: .75;
}

.dde-group__links a:hover,
.dde-group__links a:focus-visible {
    opacity: 1;
    text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
    .dde-group {
        transition: none;
    }

    .dde-group:hover,
    .dde-group:focus-within {
        transform: none;
    }
}

/*
 * Anmeldung zur Termin-Benachrichtigung
 * -------------------------------------
 * Stand vorher als sechster Knopf zwischen den Teilen-Knoepfen und ging dort
 * unter. Jetzt eine eigene Karte mit Abstand nach oben - ein eigenes Angebot
 * braucht eine eigene Flaeche.
 */
.dde-subscribe {
    margin-top: 2.5rem;
    padding: 1.5rem;
    border-radius: .75rem;
    background: rgba(0, 0, 0, .04);
    border: 1px solid rgba(0, 0, 0, .08);
}

.dde-subscribe__title {
    font-size: 1.125rem;
    line-height: 1.3;
    margin: 0 0 .5rem;
}

.dde-subscribe__text {
    font-size: .9375rem;
    line-height: 1.6;
    color: rgba(0, 0, 0, .7);
    margin: 0 0 1rem;
}

/* Der Ein/Aus-Schalter der Benachrichtigung im internen Bereich. */
.dde-toggle-state {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.0625rem;
}

/*
 * Sharepic
 * --------
 * Die Zeichenflaeche ist 1080 Pixel breit und wird hier auf die Spaltenbreite
 * heruntergerechnet. Dass sie gross bleibt, ist Absicht: das Bild soll vor dem
 * Speichern so gross zu sehen sein, wie es spaeter im Netz erscheint.
 */
.dde-ai__pic {
    margin-top: 1rem;
}

.dde-ai__pic-preview {
    background: rgba(0, 0, 0, .06);
    border-radius: .5rem;
    overflow: hidden;
}

.dde-ai__canvas {
    display: block;
    width: 100%;
    height: auto;
}

.dde-ai__pic-fields {
    margin-top: .75rem;
}

.dde-ai__pic-fields .form-label {
    margin: .5rem 0 .15rem;
    font-size: .8125rem;
    font-weight: 600;
}

.dde-ai__formats {
    margin-right: .25rem;
}

/*
 * Kopf einer Gruppenseite
 * -----------------------
 * Dieselbe Bildsprache wie die Kachel in der Uebersicht, nur grosszuegiger.
 * Das Logo steht vollstaendig auf der Flaeche, nicht beschnitten dahinter -
 * es ist meist eine Grafik auf hellem Grund und als Hintergrund unbrauchbar.
 */
.dde-group-cover {
    background-color: var(--dde-group-accent, #2E3A59);
    background-size: cover;
    background-position: center;
    color: #fff;
    /* Die Navigation liegt fixiert darueber - der Kopf braucht Platz darunter. */
    padding: 11rem 0 4rem;
    position: relative;
}

@media (min-width: 992px) {
    .dde-group-cover {
        padding: 13rem 0 6rem;
    }
}

/* Mit Titelbild braucht der Text eine dunkle Flaeche darunter. */
.dde-group-cover--image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, .45));
}

.dde-group-cover__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2rem;
}

.dde-group-cover__logo {
    flex: 0 0 auto;
    max-height: 8rem;
    max-width: 14rem;
    width: auto;
    object-fit: contain;
    background: rgba(255, 255, 255, .92);
    border-radius: .75rem;
    padding: 1rem;
}

.dde-group-cover__text {
    flex: 1 1 18rem;
}

.dde-group-cover__eyebrow {
    display: block;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .85;
    margin-bottom: .5rem;
}

.dde-group-cover__title {
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.1;
    margin: 0;
    text-wrap: balance;
}

.dde-group-cover__teaser {
    font-size: 1.125rem;
    line-height: 1.6;
    margin: .75rem 0 0;
    max-width: 60ch;
    opacity: .9;
}

.dde-group-text {
    font-size: 1.0625rem;
    line-height: 1.7;
    max-width: 70ch;
}

.dde-group-contact li {
    padding: .35rem 0;
    line-height: 1.6;
}

.dde-group-contact i {
    width: 1.5rem;
    color: var(--dde-group-accent, #2E3A59);
}

/* Was jemand bei der Anmeldung geschrieben hat - zitiert, nicht formuliert. */
.dde-application {
    margin: 0 0 1rem;
    padding: .75rem 1rem;
    border-left: 3px solid var(--bs-primary, #eb3e4a);
    background: rgba(0, 0, 0, .03);
    font-size: .9375rem;
    line-height: 1.6;
}

/* --- Ortsauswahl im Einreichungsformular ---------------------------------
   Die Liste haengt unter dem Feld und ueberdeckt, was darunter steht - sie
   soll das Formular nicht bei jedem Tastendruck springen lassen. */
.dde-citypicker {
    position: relative;
}

.dde-citypicker__list {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    margin: .25rem 0 0;
    padding: .25rem;
    list-style: none;
    max-height: 17rem;
    overflow-y: auto;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: .5rem;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .12);
}

.dde-citypicker__list[hidden] {
    display: none;
}

.dde-citypicker__option {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .45rem .65rem;
    border-radius: .35rem;
    cursor: pointer;
}

.dde-citypicker__option.is-active,
.dde-citypicker__option:hover {
    background: rgba(0, 0, 0, .06);
}

.dde-citypicker__name {
    font-weight: 600;
    line-height: 1.3;
}

.dde-citypicker__meta {
    font-size: .8125rem;
    opacity: .7;
    line-height: 1.3;
}

/* Anzahl der Termine neben dem Stadtnamen in der Filterleiste. */
.dde-filter__count {
    display: inline-block;
    margin-left: .35rem;
    font-size: .75em;
    opacity: .65;
    font-variant-numeric: tabular-nums;
}

/*
 * Bearbeiten im Artikel
 * ---------------------
 * Das Formular steht mitten im Beitrag und muss sich davon absetzen: eigener
 * Hintergrund, eigener Rahmen, eine farbige Kante links. Ohne diese Abhebung
 * las es sich wie eine Fortsetzung des Artikels - und niemand traut sich, in
 * einem Artikel herumzuschreiben.
 */
.dde-edit {
    padding: 2rem;
    border: 1px solid rgba(0, 0, 0, .08);
    border-left: 4px solid var(--bs-primary, #eb3e4a);
    border-radius: 1rem;
    background: rgba(0, 0, 0, .035);
}

@media (min-width: 992px) {
    .dde-edit {
        padding: 3rem;
    }
}

.dde-edit__head {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

/* Die Felder stehen auf grauem Grund - weiss macht sie wieder lesbar. */
.dde-edit .form-control {
    background-color: #fff;
}

/*
 * Kleiner Editor für die Beschreibung
 * ----------------------------------
 * Die Fläche soll aussehen wie das Textfeld, das sie ersetzt - sonst wirkt
 * sie wie ein fremder Block im Formular.
 */
.dde-rte__source {
    display: none;
}

.dde-rte__bar {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    padding: .375rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-bottom: 0;
    border-radius: .375rem .375rem 0 0;
    background: rgba(0, 0, 0, .03);
}

.dde-rte__button {
    padding: .25rem .5rem;
    border: 0;
    border-radius: .25rem;
    background: transparent;
    color: inherit;
    line-height: 1.2;
    cursor: pointer;
}

.dde-rte__button:hover,
.dde-rte__button:focus-visible {
    background: rgba(0, 0, 0, .1);
}

.dde-rte__area {
    min-height: 14rem;
    border-radius: 0 0 .375rem .375rem;
    overflow-y: auto;
}

.dde-rte__area > :first-child {
    margin-top: 0;
}

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

.dde-rte__area blockquote {
    margin: 0 0 1rem;
    padding-left: 1rem;
    border-left: 3px solid var(--bs-primary, #eb3e4a);
}

/*
 * Dateifeld samt Rechteangabe
 * ---------------------------
 * Beides gehört zusammen und wird deshalb auch zusammen gerahmt: ein Foto
 * ohne Urheber dürfen wir nicht veröffentlichen.
 */
.dde-upload__credit {
    margin-top: .75rem;
    padding-left: .75rem;
    border-left: 2px solid var(--bs-primary, #eb3e4a);
}

.dde-upload__required {
    color: var(--bs-primary, #eb3e4a);
}

/* Anhänge ohne Vorschaubild - ein Name und eine Büroklammer müssen reichen. */
.dde-report-image__doc {
    display: block;
    padding: 1.5rem .75rem;
    border: 1px dashed rgba(0, 0, 0, .2);
    border-radius: .375rem;
    text-align: center;
    word-break: break-word;
}

/* Bildnachweis unter einem Bild - leise, aber lesbar. */
.dde-credit {
    margin: .5rem 0 0;
    font-size: .8125rem;
    opacity: .7;
}