/*
 * druck.css - Gestaltung fuer den Ausdruck.
 *
 * Wird nur beim Drucken geladen (media="print" in index.php).
 *
 * Zwei Faelle:
 *   1. Normaler Druck der ganzen Seite: Bedienelemente verschwinden.
 *   2. Einzeldruck eines Steckbriefs (Knopf "Drucken" auf der Karte):
 *      das JS setzt html.einzel-druck und markiert die Karte mit
 *      .druck-ziel; nur diese Karte kommt aufs Papier.
 */


/* ------------------------------------------------------------------ */
/* Grundlagen                                                         */
/* ------------------------------------------------------------------ */

body {
    background: #ffffff;
    color: #000000;
}

/* Bedienelemente und rein interaktive Bereiche ausblenden. */
.sprung-link,
.kopf-navigation,
.ansicht-schalter,
.kalender-eintrag-knopf,
#termin-kalender,
.rss-verweis,
.aufruf,
.filter-bereich,
.karten-aktionen,
.slider-punkte,
dialog {
    display: none !important;
}

/* Der Druckbereich (Langtext und grosser QR-Code) wird sichtbar. */
.nur-druck {
    display: block !important;
    padding: 0 1.4rem 1.4rem;
}

/* Karten und Termine nicht mitten auf dem Seitenumbruch trennen.
   Und immer dunkle Schrift auf hellem Grund, auch bei dunklem Design. */
.steckbrief,
.termin,
.kopfzeile,
.fusszeile {
    background: #ffffff;
    color: #000000;
    break-inside: avoid;
    box-shadow: none;
}


/* ------------------------------------------------------------------ */
/* Foto-Slider im Druck: alle Fotos nebeneinander                     */
/* ------------------------------------------------------------------ */

.foto-slider {
    aspect-ratio: auto;
    overflow: visible;
    background: none;
}

.slider-spur {
    display: flex;
    gap: 4mm;
}

.slider-bild {
    position: static;
    opacity: 1 !important;
    flex: 1 1 0;
}

.slider-bild img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}


/* ------------------------------------------------------------------ */
/* Einzeldruck eines Steckbriefs                                      */
/* ------------------------------------------------------------------ */

html.einzel-druck body * {
    visibility: hidden;
}

html.einzel-druck .druck-ziel,
html.einzel-druck .druck-ziel * {
    visibility: visible;
}

/* Ausgeblendete Sprachen und Knoepfe bleiben auch hier verborgen. */
html.einzel-druck .druck-ziel [hidden],
html.einzel-druck .druck-ziel .karten-aktionen,
html.einzel-druck .druck-ziel .slider-punkte {
    visibility: hidden;
    display: none !important;
}

html.einzel-druck .druck-ziel {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background: #ffffff;
}