/*
 * Dashboard des Mitgliederbereichs
 *
 * Ergaenzt style.css, ersetzt sie nicht. Alle Farben kommen aus
 * theme-4diget.css — damit greift ein Themewechsel auch hier.
 *
 * Zwei Zustaende je Karte: dash-offen (gekauft, fuehrt in den Bereich)
 * und dash-zu (noch nicht freigeschaltet, fuehrt auf die Landingpage).
 * Sie sehen bewusst unterschiedlich aus, aber nicht wie Fehler: eine
 * geschlossene Karte ist ein Angebot, keine Sperre.
 */

.dash-begruessung {
    color: var(--color-soft-text);
}

.dash-raster {
    list-style: none;
    margin: 0 0 2.5rem;
    padding: 0;
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}

.dash-karte {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.25rem;
    border: 1px solid var(--color-border-strong);
    border-radius: 0.5rem;
    background-color: var(--color-surface);
}

.dash-karte h3 {
    margin: 0;
    color: var(--color-heading);
    font-size: 1.125rem;
}

.dash-karte p {
    margin: 0;
    color: var(--color-soft-text);
}

/*
 * Der Link sitzt unten, auch wenn die Texte verschieden lang sind.
 *
 * Die Farbe muss hier stehen: .main-link stammt aus dem Kopfmenue und ist
 * dort fast weiss (--color-on-primary), damit sie auf der dunklen Leiste
 * lesbar ist. Auf einer weissen Karte war der Linktext dadurch unsichtbar
 * — die Kachel sah aus, als liesse sie sich nicht anklicken.
 */
.dash-karte a {
    margin-top: auto;
    align-self: flex-start;
}

.dash-karte a.main-link {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: underline;
}

.dash-karte a.main-link:hover,
.dash-karte a.main-link:focus-visible {
    color: var(--color-accent-dark);
}

/*
 * Dasselbe fuer den laufenden Text der Inhaltsseiten.
 *
 * Betrifft die uebernommenen Bereiche: dort tragen Download- und
 * Weiterlesen-Links ebenfalls .main-link. Innerhalb von Kopf- und
 * Fussmenue gewinnt weiterhin ".headermenu a" bzw. ".footermenu a" —
 * die sind spezifischer und lassen die Leisten unveraendert.
 */
main a.main-link {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: underline;
}

main a.main-link:hover,
main a.main-link:focus-visible {
    color: var(--color-accent-dark);
}

.dash-zu {
    background-color: var(--color-surface-alt);
}

.dash-hinweis {
    font-weight: 600;
    color: var(--color-primary);
}

/*
 * Menue innerhalb eines Bereichs
 *
 * Steht ueber dem Inhalt der Bereichsseiten und fuehrt zu dessen
 * Unterseiten. Flach gehalten, damit es nicht mit dem Kopfmenue
 * verwechselt wird.
 */
.bereichsmenu ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin: 0 0 1.5rem;
    padding: 0 0 0.75rem;
    border-bottom: 1px solid var(--color-border-strong);
}

.bereichsmenu a {
    color: var(--color-primary);
    text-decoration: none;
}

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

/*
 * Anleitungen drucken
 *
 * Die Bereichsseiten sind Schritt-für-Schritt-Anleitungen. Wer danach
 * arbeitet, hat das Blatt gern neben der Tastatur — deshalb ein
 * Druckknopf und ein Druckbild, das nur den Inhalt zeigt.
 */
.drucken {
    float: right;
    margin: 0 0 1rem 1rem;
}

@media print {
    /* Alles weg, was auf Papier nichts verloren hat. */
    header,
    footer,
    .drucken,
    #back-to-top,
    #bf,
    .bereichsmenu {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
        font-size: 11pt;
    }

    main {
        max-width: none;
        margin: 0;
        padding: 0;
    }

    /* Eine Überschrift allein am Seitenende hilft niemandem. */
    h1, h2, h3, h4 {
        break-after: avoid;
        page-break-after: avoid;
    }

    figure, img, table, pre {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /*
     * Ziel eines Links ausschreiben — auf Papier ist ein Link sonst nur
     * unterstrichener Text. Interne Verweise bleiben aussen vor, die
     * nuetzen gedruckt niemandem.
     */
    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        word-break: break-all;
    }
}

/*
 * Platz fuer eine Abbildung, die noch fehlt
 *
 * Sichtbar, aber nicht wie ein Fehler: eine gestrichelte Flaeche mit dem
 * Hinweis, was dort hinkommt. So faellt beim Durchgehen der Anleitung auf,
 * wo noch ein Bild gebraucht wird — und ein fehlendes Bild faellt eher auf
 * als ein falsches.
 */
.bildplatz {
    margin: 1.5rem 0;
    padding: 2rem 1rem;
    border: 2px dashed var(--color-border-strong);
    border-radius: 0.5rem;
    background: var(--color-surface-alt);
    text-align: center;
}

.bildplatz figcaption {
    color: var(--color-soft-text);
    font-style: italic;
}

/* Auf Papier hat ein leerer Platz nichts verloren. */
@media print {
    .bildplatz { display: none !important; }
}