/**
 * Platzhalter fuer gesperrte Fremdeinbettungen (siehe ExternalContentBlocker.php).
 *
 * Bewusst eigenstaendig gehalten: die Datei wird auf allen Sites der Installation
 * ausgeliefert, die das statische Template einbinden. Sie darf deshalb keine
 * Variablen, Mixins oder Klassen eines einzelnen Site-Themes voraussetzen.
 *
 * Masse in rem (Basis 16px).
 */

/* Der gesperrte Rahmen selbst nimmt keinen Platz ein - sichtbar ist der Kasten
   davor. Ueber das Datenattribut, nicht ueber eine Klasse: so kann keine fremde
   Regel und kein Redakteur die Sperre versehentlich aufheben. */
iframe[data-md-src] {
    display: none !important;
}

/* ⚠️ Der Kasten und seine Zeilen sind <span>, nicht <div>/<p> - warum, steht in
   platzhalter() in ExternalContentBlocker.php: als Blockelement bricht der
   Platzhalter den umgebenden RTE-Absatz auf. Das Aussehen macht deshalb hier
   das display, nicht die Auszeichnung. display:flex blockifiziert den span
   ohnehin; die Zeilen bekommen display:block trotzdem ausdruecklich, damit sie
   auch dann untereinander stehen, wenn eine Site-Regel das flex ueberschreibt. */
.md-sperre {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 1.25rem;
    border: 0.0625rem solid #c6c6c6;
    border-radius: 0.25rem;
    background: #f4f4f4;
    color: #1a1a1a;
    font-size: 1rem;
    line-height: 1.45;
}

.md-sperre > span {
    display: block;
    margin: 0;
}

.md-sperre__titel {
    font-weight: 700;
}

.md-sperre__host {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.875rem;
    /* Lange Hostnamen duerfen den Kasten nicht sprengen. */
    overflow-wrap: anywhere;
}

.md-sperre__hinweis {
    font-size: 0.875rem;
}

.md-sperre__knopf {
    margin-top: 0.25rem;
    padding: 0.5rem 1.125rem;
    border: 0.0625rem solid #1271ee;
    border-radius: 0.1875rem;
    background: #1271ee;
    color: #fff;
    font: inherit;
    font-size: 1rem;
    line-height: 1.2;
    cursor: pointer;
}

.md-sperre__knopf:hover {
    background: #0d5bc4;
    border-color: #0d5bc4;
    color: #fff;
}

/* Sichtbarer Fokusring, der auch auf dem gefuellten Knopf noch Kontrast hat:
   aussen liegend, damit ihn der Knopfhintergrund nicht schluckt. */
.md-sperre__knopf:focus-visible {
    outline: 0.1875rem solid #1a1a1a;
    outline-offset: 0.125rem;
}

/* Rueckfall fuer Browser ohne :focus-visible - dort lieber ein Ring zu viel
   als keiner. */
.md-sperre__knopf:focus {
    outline: 0.1875rem solid #1a1a1a;
    outline-offset: 0.125rem;
}

.md-sperre__knopf:focus:not(:focus-visible) {
    outline: none;
}

@media (prefers-contrast: more) {
    .md-sperre {
        border-color: #1a1a1a;
        background: #fff;
    }
}