/* ---------------------------------------------------------------------------
   Detailseite eines Materials - zweiter Entwurf (exp_neu2.php)

   Tritt an die Stelle von assets/css/material.css; beide werden nie zusammen
   geladen. Die Klassennamen, an denen JavaScript haengt, bleiben erhalten:

     .material-abbildungen button[data-gross]   assets/js/bildbetrachter.js
     .sprungmarken a[href^="#"]                 assets/js/sprungmarken.js
     #bildbetrachter                            assets/js/bildbetrachter.js
     table.gefahrstoffe                         inc/gefahrentabelle.php

   Farben, Radien und Schatten kommen aus assets/css/modern.css (:root).
   Groessen wieder in px - Bootstrap setzt html{font-size:10px}.
   --------------------------------------------------------------------------- */

.material {
    color: var(--um-text);
    font-size: 17px;
    line-height: 1.7;
    margin-bottom: 72px;
}

.material-wrap {
    max-width: var(--um-breite);
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Kopfbereich --------------------------------------------------------- */

.material-hero {
    padding: 34px 0 32px;
    margin-bottom: 44px;
    border-bottom: 1px solid var(--um-linie);
    background:
        radial-gradient(820px 360px at 8% -30%, #e7f1fd 0%, rgba(231, 241, 253, 0) 72%),
        radial-gradient(680px 320px at 95% -10%, #e6f6f1 0%, rgba(230, 246, 241, 0) 72%);
}

.material-pfad {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    font-size: 15px;
    color: var(--um-text-leise);
}

.material-pfad li::after {
    content: "›";
    margin-left: 8px;
    color: var(--um-linie-kraeftig);
}

.material-pfad li:last-child::after {
    content: none;
}

.material-pfad a {
    color: var(--um-text-leise);
    text-decoration: none;
}

.material-pfad a:hover,
.material-pfad a:focus {
    color: var(--um-akzent);
    text-decoration: underline;
}

.material-kopf h1 {
    font-size: clamp(28px, 3.6vw, 42px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 10px;
    max-width: 22ch;
}

.material-autor {
    color: var(--um-text-leise);
    font-size: 16px;
    margin: 0 0 20px;
}

.material-autor strong {
    color: var(--um-text);
    font-weight: 600;
}

/* Metadaten als Chips */

.material-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.material-meta > li {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    font-size: 16px;
    max-width: 100%;
}

.material-meta .bezeichner {
    color: var(--um-text-leise);
    font-size: 14px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.chip {
    display: inline-block;
    padding: 6px 15px;
    border: 1px solid var(--um-linie-kraeftig);
    border-radius: 999px;
    background: var(--um-weiss);
    color: var(--um-text);
    text-decoration: none;
    font-size: 16px;
    white-space: nowrap;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

a.chip:hover,
a.chip:focus-visible {
    border-color: var(--um-akzent-hell);
    background: var(--um-akzent-blass);
    color: var(--um-akzent-dunkel);
    text-decoration: none;
}

/* Herunterladen direkt im Kopf - der haeufigste Grund, diese Seite zu oeffnen */

.material-aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

.material-aktionen .format {
    font-size: 14px;
    font-weight: 400;
    opacity: 0.85;
}

.material-aktionen .format::before {
    content: "·";
    margin-right: 7px;
}

.material-aktionen .fehlt {
    color: var(--um-text-leise);
    font-size: 15px;
    margin: 0;
}

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

.material-raster {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
    align-items: start;
}

@media (min-width: 960px) {
    .material-raster {
        grid-template-columns: minmax(0, 1fr) 310px;
        gap: 56px;
    }
}

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

.material-inhalt {
    max-width: 76ch;
    counter-reset: abschnitt;   /* siehe Nummerierung der Ueberschriften */
}

.material-ziel {
    background: var(--um-weiss);
    border: 1px solid var(--um-linie);
    border-left: 4px solid var(--um-akzent);
    border-radius: 0 var(--um-r) var(--um-r) 0;
    box-shadow: var(--um-schatten);
    padding: 20px 24px;
    margin: 0 0 40px;
    font-size: 18px;
}

.material-ziel strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--um-akzent);
    margin-bottom: 4px;
}

.material-abschnitt {
    margin-bottom: 44px;
    scroll-margin-top: 72px;   /* die Reiterleiste klebt oben */
}

.material-abschnitt > h2 {
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 14px;
    color: var(--um-text);
}

/* Fortlaufende Nummer vor jeder Ueberschrift, per CSS gezaehlt - so bleibt
   sie richtig, wenn ein Abschnitt mangels Inhalt entfaellt. */
.material-abschnitt > h2::before {
    counter-increment: abschnitt;
    content: counter(abschnitt);
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--um-akzent-blass);
    color: var(--um-akzent);
    font-size: 14px;
    font-weight: 700;
    display: inline-grid;
    place-items: center;
    align-self: center;
}

.material-abschnitt p {
    margin: 0 0 14px;
}

.material-abschnitt :last-child {
    margin-bottom: 0;
}

/* Die Fliesstexte stammen aus dem Word-Import und enthalten teils breite
   Tabellen mit fest eingetragenen Spaltenbreiten. Ohne diesen Rahmen
   sprengen sie auf dem Telefon das Layout. */
.material-text {
    overflow-x: auto;
}

.material-text table {
    border-collapse: collapse;
    font-size: 15px;
    margin-bottom: 14px;
    border-radius: var(--um-r-s);
    overflow: hidden;
}

.material-text table td,
.material-text table th {
    border: 1px solid var(--um-linie);
    padding: 8px 11px;
    text-align: left;
    vertical-align: top;
}

.material-text table th {
    background: var(--um-flaeche);
}

.material-text img {
    max-width: 100%;
    height: auto;
    border-radius: var(--um-r-s);
}

.material-text ul,
.material-text ol {
    padding-left: 22px;
}

/* Anmerkungen & Unterrichtsanschluesse */

.material-hinweis {
    background: var(--um-akzent-blass);
    border: 1px solid #cfe4fa;
    border-radius: var(--um-r);
    padding: 22px 26px;
    margin-bottom: 44px;
    scroll-margin-top: 72px;
}

.material-hinweis > h2 {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 12px;
    color: var(--um-akzent-dunkel);
}

.material-hinweis > h2::before {
    content: "💡";
    font-size: 22px;
    line-height: 1;
}

.material-hinweis p {
    margin: 0 0 12px;
    font-size: 17px;
}

.material-hinweis :last-child {
    margin-bottom: 0;
}

/* --- Abbildungen --------------------------------------------------------- */

.material-abbildungen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.material-abbildungen figure {
    margin: 0;
}

.material-abbildungen button {
    display: block;
    width: 100%;
    padding: 0;
    border: 1px solid var(--um-linie);
    border-radius: var(--um-r);
    background: var(--um-weiss);
    cursor: zoom-in;
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.material-abbildungen button:hover {
    border-color: var(--um-akzent-hell);
    box-shadow: var(--um-schatten-hoch);
    transform: translateY(-2px);
}

/* Feste Kachelhoehe, damit die Abbildungen trotz sehr unterschiedlicher
   Seitenverhaeltnisse eine ruhige Reihe ergeben. object-fit: contain -
   es wird nichts abgeschnitten. */
.material-abbildungen img {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: contain;
    background: #fff;
}

.material-abbildungen figcaption {
    margin-top: 9px;
    font-size: 14px;
    color: var(--um-text-leise);
    line-height: 1.5;
}

/* --- Gefahrstofftabelle -------------------------------------------------- */

.material-abschnitt#gefahrstoffe > h2::after {
    content: "Sicherheit beachten";
    margin-left: auto;
    padding: 3px 12px;
    border-radius: 999px;
    background: #fdf3d8;
    color: #8a5a00;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.gefahrstoffe {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--um-linie);
    border-radius: var(--um-r);
    overflow: hidden;
    font-size: 15px;
    background: var(--um-weiss);
}

.gefahrstoffe th,
.gefahrstoffe td {
    padding: 12px 14px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--um-linie);
}

.gefahrstoffe thead th {
    background: var(--um-flaeche);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--um-text-leise);
}

.gefahrstoffe tbody tr:last-child th,
.gefahrstoffe tbody tr:last-child td {
    border-bottom: 0;
}

.gefahrstoffe tbody tr:hover {
    background: #fbfcfe;
}

.gefahrstoffe .stoff {
    font-weight: 600;
    white-space: normal;
}

.gefahrstoffe .piktogramme {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.gefahrstoffe .piktogramme img {
    width: 40px;
    height: 40px;
}

.gefahrstoffe .fehlt {
    color: var(--um-text-leise);
    font-style: italic;
}

/* Auf schmalen Displays wird jede Zeile zu einer Karte - eine vierspaltige
   Tabelle mit H- und P-Saetzen ist auf dem Telefon sonst nicht lesbar. */
@media (max-width: 680px) {
    .gefahrstoffe thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .gefahrstoffe,
    .gefahrstoffe tbody,
    .gefahrstoffe tr,
    .gefahrstoffe td {
        display: block;
        width: 100%;
    }

    .gefahrstoffe tr {
        border-bottom: 1px solid var(--um-linie);
        padding: 12px 0;
    }

    .gefahrstoffe td {
        border: 0;
        padding: 3px 14px;
    }

    .gefahrstoffe td[data-spalte]:not(:empty)::before {
        content: attr(data-spalte) ": ";
        color: var(--um-text-leise);
        font-size: 13px;
    }

    .gefahrstoffe .stoff {
        font-size: 17px;
        padding-bottom: 6px;
        border-bottom: 0;
    }

    .material-abschnitt#gefahrstoffe > h2::after {
        display: none;
    }
}

/* --- Seitenspalte -------------------------------------------------------- */

.material-spalte {
    display: grid;
    gap: 14px;
}

@media (min-width: 960px) {
    .material-spalte {
        position: sticky;
        top: 76px;          /* Reiterleiste */
    }
}

.material-spalte > nav {
    background: var(--um-weiss);
    border: 1px solid var(--um-linie);
    border-radius: var(--um-r);
    padding: 18px 20px;
}

.material-spalte h2 {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--um-text-leise);
    margin: 0 0 14px;
}

/* Download (kompakt in der Spalte) */

.download-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.download-liste a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    border: 1px solid var(--um-linie);
    border-radius: var(--um-r-s);
    background: var(--um-weiss);
    color: var(--um-text);
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease;
}

.download-liste a:hover,
.download-liste a:focus-visible {
    border-color: var(--um-akzent-hell);
    background: var(--um-akzent-blass);
    text-decoration: none;
}

.download-liste img {
    width: 26px;
    height: 26px;
    flex: none;
}

.download-liste .bezeichnung {
    font-weight: 600;
    font-size: 17px;
}

.download-liste .format {
    display: block;
    font-size: 14px;
    color: var(--um-text-leise);
    font-weight: 400;
}

/* Sprungmarken */

.sprungmarken {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 2px solid var(--um-linie);
}

.sprungmarken a {
    display: block;
    padding: 7px 0 7px 14px;
    margin-left: -2px;
    border-left: 2px solid transparent;
    color: var(--um-text-leise);
    font-size: 17px;
    line-height: 1.4;
    text-decoration: none;
    transition: color .15s ease, border-color .15s ease;
}

.sprungmarken a:hover,
.sprungmarken a:focus-visible {
    color: var(--um-akzent);
    text-decoration: none;
}

.sprungmarken a[aria-current="true"] {
    border-left-color: var(--um-akzent);
    color: var(--um-akzent-dunkel);
    font-weight: 600;
}

/* Aehnliche Materialien */

.aehnliche {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 4px;
}

.aehnliche a {
    display: block;
    padding: 8px 10px;
    margin: 0 -10px;
    border-radius: var(--um-r-s);
    color: var(--um-text);
    font-size: 17px;
    line-height: 1.45;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.aehnliche a:hover,
.aehnliche a:focus-visible {
    background: var(--um-akzent-blass);
    color: var(--um-akzent-dunkel);
    text-decoration: none;
}

/* --- Fussbereich des Materials ------------------------------------------- */

.material-fuss {
    margin-top: 56px;
}

.material-feedback {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 24px 28px;
    border: 1px solid var(--um-linie);
    border-radius: var(--um-r);
    background: var(--um-flaeche);
}

.material-feedback h2 {
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 4px;
}

.material-feedback p {
    margin: 0;
    color: var(--um-text-leise);
    font-size: 16px;
}

.material-rechtliches {
    margin-top: 22px;
    border: 1px solid var(--um-linie);
    border-radius: var(--um-r);
    background: var(--um-weiss);
}

.material-rechtliches > summary {
    cursor: pointer;
    padding: 15px 20px;
    font-size: 17px;
    font-weight: 600;
    color: var(--um-text-leise);
    list-style: none;
}

.material-rechtliches > summary::-webkit-details-marker {
    display: none;
}

.material-rechtliches > summary::before {
    content: "▸";
    display: inline-block;
    margin-right: 9px;
    transition: transform .15s ease;
}

.material-rechtliches[open] > summary::before {
    transform: rotate(90deg);
}

.material-rechtliches .text {
    padding: 0 20px 20px;
    font-size: 15px;
    color: var(--um-text-leise);
    line-height: 1.65;
}

.material-rechtliches .text p {
    margin: 0 0 10px;
}

.material-rechtliches .text p:last-child {
    margin-bottom: 0;
}

/* --- Bildbetrachter ------------------------------------------------------ */

.bildbetrachter {
    max-width: min(94vw, 1200px);
    max-height: 94vh;
    padding: 0;
    border: 0;
    border-radius: var(--um-r);
    background: #fff;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

.bildbetrachter::backdrop {
    background: rgba(10, 16, 22, 0.86);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.bildbetrachter figure {
    margin: 0;
}

.bildbetrachter img {
    display: block;
    max-width: 100%;
    max-height: calc(94vh - 66px);
    margin: 0 auto;
    object-fit: contain;
}

.bildbetrachter figcaption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 18px;
    border-top: 1px solid var(--um-linie);
    font-size: 15px;
    color: var(--um-text-leise);
}

.bildbetrachter .zaehler {
    font-variant-numeric: tabular-nums;
}

.bildbetrachter button {
    flex: none;
    border: 1px solid var(--um-linie-kraeftig);
    border-radius: 999px;
    background: #fff;
    padding: 7px 18px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.bildbetrachter button:hover {
    border-color: var(--um-akzent-hell);
    background: var(--um-akzent-blass);
    color: var(--um-akzent-dunkel);
}

/* --- Tastaturbedienung sichtbar machen ----------------------------------- */

.material :focus-visible,
.bildbetrachter :focus-visible {
    outline: 3px solid var(--um-akzent-hell);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .material *,
    .bildbetrachter * {
        transition: none !important;
    }

    .material-abbildungen button:hover {
        transform: none;
    }
}

/* --- Druck ---------------------------------------------------------------
   Diese Protokolle werden ausgedruckt und mit in den Chemiesaal genommen.
   Navigation, Seitenspalte und Bildbetrachter entfallen.

   Bewusst kompakt gehalten: Lehrkraefte drucken das klassensatzweise, jedes
   eingesparte Blatt zaehlt vielfach. Der Bildschirmentwurf lebt von Luft
   zwischen den Abschnitten - auf Papier ist die verschenkter Platz. Deshalb
   werden hier Schriftgroessen, Zeilenabstand und saemtliche Aussenabstaende
   eigens gesetzt, statt die Bildschirmwerte zu erben.

   Zwei Punkte, die nicht der reinen Verdichtung folgen:
   - Der Haftungsausschluss bleibt im Druck sichtbar (klein, aber lesbar) -
     das ist eine rechtliche Entscheidung, keine gestalterische.
   - Ueberschriften duerfen nicht als letzte Zeile einer Seite stehen, und
     Absaetze reissen nicht nach einer einzelnen Zeile ab (orphans/widows).
   ------------------------------------------------------------------------- */

@page {
    size: A4;
    /* Knapp, aber innerhalb dessen, was jeder Drucker noch abbilden kann */
    margin: 10mm 12mm 12mm;
}

@media print {
    body > header,
    body > footer,
    .nav.categories,
    .um-skip,
    .material-spalte,
    .material-aktionen,
    .material-pfad,
    .material-feedback,
    .bildbetrachter {
        display: none !important;
    }

    .material {
        font-size: 10pt;
        /* 1.7 vom Bildschirm kostet auf Papier rund ein Viertel der Zeilen */
        line-height: 1.35;
        margin: 0;
    }

    .material-wrap {
        max-width: none;
        padding: 0;
    }

    /* --- Kopfbereich --- */

    .material-hero {
        background: none;
        padding: 0 0 4pt;
        margin-bottom: 8pt;
        border-bottom: 1pt solid #999;
    }

    .material-kopf h1 {
        font-size: 15pt;
        line-height: 1.2;
        margin: 0 0 2pt;
    }

    .material-autor {
        font-size: 9pt;
        margin: 0 0 3pt;
    }

    /* Thema, Klasse, Art und Schlagworte in einer Zeile statt als Kaestchen */
    .material-meta {
        gap: 2pt 8pt;
    }

    .material-meta > li {
        font-size: 8.5pt;
        gap: 4pt;
    }

    .material-meta .bezeichner {
        font-size: 7.5pt;
    }

    .material a.chip,
    .material .chip {
        padding: 0;
        border: 0;
        background: none;
        border-radius: 0;
        font-size: 8.5pt;
    }

    /* --- Inhalt --- */

    .material-raster {
        display: block;
    }

    .material-inhalt {
        max-width: none;
    }

    .material-ziel {
        padding: 4pt 7pt;
        margin: 0 0 8pt;
        font-size: 10pt;
        border-radius: 0;
        box-shadow: none;
        break-inside: avoid;
    }

    .material-ziel strong {
        font-size: 8pt;
        margin-bottom: 1pt;
    }

    .material-abschnitt {
        margin-bottom: 8pt;
    }

    /* Frueher stand hier break-inside: avoid fuer den ganzen Abschnitt. Das
       kostete Papier statt es zu sparen: passte ein langer Abschnitt nicht
       mehr aufs Blatt, wanderte er komplett auf das naechste und liess den
       Rest der Seite leer. Jetzt darf innerhalb umbrochen werden - nur nicht
       direkt hinter einer Ueberschrift und nicht nach einer Einzelzeile. */
    .material-abschnitt > h2,
    .material-hinweis > h2 {
        font-size: 11.5pt;
        line-height: 1.25;
        gap: 5pt;
        margin: 0 0 3pt;
        break-after: avoid;
    }

    .material-abschnitt p,
    .material-hinweis p {
        /* Der Hinweiskasten steht am Bildschirm bewusst groesser (17px);
           auf Papier faellt er dadurch aus dem Satzbild. */
        font-size: 10pt;
        margin: 0 0 4pt;
        orphans: 2;
        widows: 2;
    }

    /* Die Nummer als schlichte Ziffer - der Kreis kostet Breite und Toner */
    .material-abschnitt > h2::before {
        content: counter(abschnitt) ".";
        width: auto;
        height: auto;
        background: none;
        border: 0;
        border-radius: 0;
        font-size: 11.5pt;
        color: inherit;
    }

    .material-abschnitt#gefahrstoffe > h2::after {
        display: none;
    }

    .material-text ul,
    .material-text ol {
        padding-left: 13pt;
        margin: 0 0 4pt;
    }

    .material-text li {
        margin-bottom: 1pt;
    }

    /* Bilder aus dem Word-Import; ohne Deckel fuellt eines das halbe Blatt */
    .material-text img {
        max-height: 55mm;
        width: auto;
    }

    .material-text table {
        font-size: 8.5pt;
        margin-bottom: 4pt;
    }

    .material-text table td,
    .material-text table th {
        padding: 1.5pt 3pt;
    }

    .material-hinweis {
        padding: 4pt 7pt;
        margin-bottom: 8pt;
        border-radius: 0;
    }

    /* --- Abbildungen --- */

    .material-abbildungen {
        grid-template-columns: repeat(2, 1fr);
        gap: 5pt 7pt;
    }

    .material-abbildungen button {
        border: 0;
    }

    .material-abbildungen img {
        max-height: 42mm;
    }

    .material-abbildungen figure {
        break-inside: avoid;
    }

    .material-abbildungen figcaption {
        margin-top: 2pt;
        font-size: 8pt;
        line-height: 1.3;
    }

    /* --- Gefahrstofftabelle --- */

    .gefahrstoffe {
        font-size: 8pt;
        border-radius: 0;
    }

    .gefahrstoffe th,
    .gefahrstoffe td {
        padding: 2pt 3pt;
    }

    .gefahrstoffe thead th {
        font-size: 7pt;
    }

    /* Die Piktogramme bestimmen die Zeilenhoehe der ganzen Tabelle */
    .gefahrstoffe .piktogramme img {
        width: 8mm;
        height: 8mm;
    }

    .gefahrstoffe .piktogramme {
        gap: 1pt;
    }

    .gefahrstoffe thead {
        display: table-header-group;
    }

    .gefahrstoffe tr {
        break-inside: avoid;
    }

    /* Der Haftungsausschluss gehoert aufs Papier, auch wenn er am Bildschirm
       eingeklappt ist. Aeltere Browser blenden die Kinder eines
       geschlossenen <details> per display aus, neuere ueber
       ::details-content - deshalb beides. */
    .material-rechtliches .text {
        display: block !important;
        padding: 0;
    }

    .material-rechtliches::details-content {
        content-visibility: visible;
    }

    .material-rechtliches {
        border: 0;
        margin-top: 6pt;
    }

    .material-rechtliches > summary {
        padding: 0;
        font-size: 8.5pt;
    }

    /* Klein, aber lesbar - der Text muss aufs Blatt, braucht dort aber nicht
       dieselbe Groesse wie die Versuchsanleitung selbst. */
    .material-rechtliches .text,
    .material-rechtliches .text p {
        font-size: 7.5pt;
        line-height: 1.25;
        margin: 0 0 2pt;
    }

    .material-fuss {
        margin-top: 6pt;
        padding-top: 0;
    }

    /* Bootstrap haengt im Druck hinter JEDEN Link seine Adresse. Bei den
       vielen internen Links (Schlagworte, Sprungmarken, Downloads) macht das
       ein gedrucktes Protokoll unlesbar. Erst alles abschalten ... */
    .material a[href]::after,
    .material abbr[title]::after {
        content: "";
    }

    /* ... und nur bei externen Zielen die Adresse ausschreiben, weil die auf
       Papier sonst verloren waere (etwa Quellen im Literaturteil). */
    .material a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 8pt;
        font-weight: normal;
        word-break: break-all;
    }

    .material-ziel,
    .material-hinweis {
        border: 1pt solid #999;
        background: none;
        box-shadow: none;
    }
}