/*
 * 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);
}

/*
 * Drei Karten nebeneinander, in jedem Bereich gleich.
 *
 * Vorher stand hier auto-fill: So viele, wie hineinpassen. Das ergab je
 * Bildschirmbreite eine andere Zahl und je Bereich eine andere Optik,
 * weil nicht jeder Bereich gleich viele Karten hat. Drei feste Spalten
 * geben dem Dashboard eine Zeile, die man wiedererkennt.
 *
 * Darunter zwei, auf dem Telefon eine. Die Grenzen liegen dort, wo eine
 * Karte sonst schmaler als etwa 16rem wuerde.
 */
.dash-raster {
    list-style: none;
    margin: 0 0 2.5rem;
    padding: 0;
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 62rem) {
    .dash-raster {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 40rem) {
    .dash-raster {
        grid-template-columns: 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; }
}

/*
 * Das Menü am Fuss einer Anleitungsreihe.
 *
 * Wer am Ende einer Seite ankommt, will wissen, was als Naechstes
 * kommt. Eine Liste von Links reicht dafuer; sie darf nur nicht
 * aussehen wie das Menue am Kopf der Seite, sonst sucht man dort
 * die Abmeldung.
 */
.reihenmenu {
    list-style: none;
    margin: .5rem 0 2rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
}

.reihenmenu li {
    margin: 0;
}

.reihenmenu a {
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

@media print {
    .reihenmenu {
        display: none;
    }
}

/*
 * Der Kasten "So spielst du es ein".
 *
 * Er steht am Ende einer Produktseite und ist der Punkt, an dem aus
 * Lesen Handeln wird. Darum hebt er sich ab, ohne zu schreien.
 */
.einspielen {
    margin: 1rem 0 2rem;
    padding: 1rem 1.25rem;
    border-left: 3px solid var(--color-border-strong, rgba(128, 128, 128, .5));
    background: rgba(128, 128, 128, .06);
}

.einspielen-stand {
    margin-top: 0;
}

.einspielen-schritte {
    margin: .75rem 0;
    padding-left: 1.25rem;
}

.einspielen-schritte li {
    margin-bottom: .4rem;
}

.einspielen-wege {
    margin-bottom: 0;
    font-size: .95em;
}

/*
 * .setup-hinweis und .updatefenster standen bis zum 08.10.2026 hier.
 * Sie sind nach setup.css umgezogen, und zwar aus einem Grund, der
 * nichts mit Ordnung zu tun hat: Beide gehoeren zum Kern und damit in
 * die Website-Vorlage, die ein Kunde bekommt. dashboard.css gibt es
 * dort nicht, setup.css schon.
 */