/* Eigene Styles des Portals. */

/* ---- Kopfleiste oben rechts im Inhalt: "Geprüft am" und "Seite kopieren",
        siehe overrides/partials/actions.html ---- */

.ospo-kopfleiste {
    float: right;
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin: 0.3rem 0 0.4rem 0.8rem;
    font-size: 0.7rem;
    line-height: 1.3;
}

.ospo-seitenaktionen {
    position: relative;
}

.ospo-seitenaktionen__gruppe {
    display: inline-flex;
    border: 0.05rem solid var(--md-default-fg-color--lighter);
    border-radius: 0.2rem;
    overflow: hidden;
}

.ospo-seitenaktionen button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    border: 0;
    background: var(--md-default-bg-color);
    color: var(--md-default-fg-color);
    font: inherit;
    cursor: pointer;
}

.ospo-seitenaktionen button:hover {
    background: var(--md-default-fg-color--lightest);
}

.ospo-seitenaktionen button:focus-visible {
    outline: 0.1rem solid var(--md-accent-fg-color);
    outline-offset: -0.1rem;
}

.ospo-seitenaktionen__haupt {
    padding: 0.3rem 0.6rem;
}

.ospo-seitenaktionen__pfeil {
    padding: 0.3rem 0.35rem;
    border-left: 0.05rem solid var(--md-default-fg-color--lighter) !important;
}

.ospo-seitenaktionen__pfeil[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.ospo-seitenaktionen__icon {
    display: inline-flex;
    flex-shrink: 0;
}

.ospo-seitenaktionen svg {
    width: 0.9rem;
    height: 0.9rem;
    fill: currentColor;
}

.ospo-seitenaktionen__menue {
    position: absolute;
    top: calc(100% + 0.3rem);
    right: 0;
    min-width: 13rem;
    padding: 0.2rem;
    border: 0.05rem solid var(--md-default-fg-color--lighter);
    border-radius: 0.2rem;
    background: var(--md-default-bg-color);
    box-shadow: var(--md-shadow-z2);
}

.ospo-seitenaktionen__menue:not([hidden]) {
    display: flex;
    flex-direction: column;
}

.ospo-seitenaktionen__menue button {
    align-items: flex-start;
    width: 100%;
    padding: 0.45rem 0.5rem;
    border-radius: 0.1rem;
    text-align: left;
}

.ospo-seitenaktionen__menue .ospo-seitenaktionen__icon {
    margin-top: 0.05rem;
}

.ospo-seitenaktionen__titel {
    display: block;
    font-weight: 700;
}

.ospo-seitenaktionen__zusatz {
    display: block;
    color: var(--md-default-fg-color--light);
    font-size: 0.6rem;
}

/* Schmale Bildschirme: eigene Zeile über dem Titel. Neben dem Titel
   schwebend nähme der Knopf so viel Breite weg, dass lange Titel mitten
   im Wort umbrechen. */
@media screen and (max-width: 37.5em) {
    .ospo-kopfleiste {
        float: none;
        margin: 0 0 0.4rem;
    }
}

@media print {
    .ospo-kopfleiste {
        display: none;
    }
}

/* ---- "Geprüft am" mit Tooltip, siehe javascripts/geprueft.js ---- */

/* Bewusst ohne position: Der Tooltip richtet sich an der Kopfleiste aus,
   nicht am Knopf. So bleibt er auch auf schmalen Bildschirmen im Bild, wo
   der Knopf weit links neben "Seite kopieren" steht. */
.ospo-geprueft__knopf {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0;
    padding: 0.3rem 0.5rem;
    border: 0.05rem solid var(--md-default-fg-color--lighter);
    border-radius: 0.2rem;
    background: var(--md-default-bg-color);
    color: var(--md-default-fg-color--light);
    font: inherit;
    cursor: help;
}

.ospo-geprueft__knopf:hover {
    background: var(--md-default-fg-color--lightest);
}

.ospo-geprueft__knopf:focus-visible {
    outline: 0.1rem solid var(--md-accent-fg-color);
    outline-offset: 0.1rem;
}

.ospo-geprueft__icon {
    display: inline-flex;
    flex-shrink: 0;
}

.ospo-geprueft__icon svg {
    width: 0.9rem;
    height: 0.9rem;
    fill: currentColor;
}

.ospo-geprueft__tipp {
    display: none;
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    width: max-content;
    max-width: min(18rem, calc(100vw - 2rem));
    padding: 0.4rem 0.6rem;
    border-radius: 0.2rem;
    background: var(--md-default-fg-color);
    color: var(--md-default-bg-color);
    box-shadow: var(--md-shadow-z2);
    font-size: 0.65rem;
}

/* Überbrückt den Abstand zum Knopf, damit der Tooltip beim Hinüberfahren
   mit der Maus nicht verschwindet (WCAG 1.4.13, "hoverable"). */
.ospo-geprueft__tipp::before {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    bottom: 100%;
    height: 0.6rem;
}

.ospo-geprueft:hover .ospo-geprueft__tipp,
.ospo-geprueft:focus-within .ospo-geprueft__tipp,
.ospo-geprueft.ist-offen .ospo-geprueft__tipp {
    display: block;
}

/* Nach Escape, gewinnt durch die spätere Stelle bei gleicher Spezifität */
.ospo-geprueft.ist-zu .ospo-geprueft__tipp {
    display: none;
}

/* ---- Link an Überschriften ---- */

/*
 * Statt des Absatzzeichens "¶" ein Link-Symbol. Der Text des Links
 * (permalink in mkdocs.yml) bleibt für Screenreader erhalten und wird nur
 * optisch durch das Symbol ersetzt. Ein- und Ausblenden sowie die Farben
 * kommen weiter von Material: unsichtbar, bis die Überschrift überfahren
 * oder per Tastatur fokussiert wird.
 */
.md-typeset .headerlink {
    font-size: 0;
    vertical-align: middle;
}

.md-typeset .headerlink::before {
    content: "";
    display: inline-block;
    width: 0.9rem;
    height: 0.9rem;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10.59 13.41c.41.39.41 1.03 0 1.42-.39.39-1.03.39-1.42 0a5.003 5.003 0 0 1 0-7.07l3.54-3.54a5.003 5.003 0 0 1 7.07 0 5.003 5.003 0 0 1 0 7.07l-1.49 1.49c.01-.82-.12-1.64-.4-2.42l.47-.48a2.98 2.98 0 0 0 0-4.24 2.98 2.98 0 0 0-4.24 0l-3.53 3.53a2.98 2.98 0 0 0 0 4.24m2.82-4.24c.39-.39 1.03-.39 1.42 0a5.003 5.003 0 0 1 0 7.07l-3.54 3.54a5.003 5.003 0 0 1-7.07 0 5.003 5.003 0 0 1 0-7.07l1.49-1.49c-.01.82.12 1.64.4 2.43l-.47.47a2.98 2.98 0 0 0 0 4.24 2.98 2.98 0 0 0 4.24 0l3.53-3.53a2.98 2.98 0 0 0 0-4.24.973.973 0 0 1 0-1.42'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10.59 13.41c.41.39.41 1.03 0 1.42-.39.39-1.03.39-1.42 0a5.003 5.003 0 0 1 0-7.07l3.54-3.54a5.003 5.003 0 0 1 7.07 0 5.003 5.003 0 0 1 0 7.07l-1.49 1.49c.01-.82-.12-1.64-.4-2.42l.47-.48a2.98 2.98 0 0 0 0-4.24 2.98 2.98 0 0 0-4.24 0l-3.53 3.53a2.98 2.98 0 0 0 0 4.24m2.82-4.24c.39-.39 1.03-.39 1.42 0a5.003 5.003 0 0 1 0 7.07l-3.54 3.54a5.003 5.003 0 0 1-7.07 0 5.003 5.003 0 0 1 0-7.07l1.49-1.49c-.01.82.12 1.64.4 2.43l-.47.47a2.98 2.98 0 0 0 0 4.24 2.98 2.98 0 0 0 4.24 0l3.53-3.53a2.98 2.98 0 0 0 0-4.24.973.973 0 0 1 0-1.42'/></svg>") center / contain no-repeat;
}

/* ---- Nur für Screenreader ---- */

.ospo-unsichtbar {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---- Farbschema-Menü in der Kopfzeile, siehe overrides/partials/palette.html ---- */

/* Materials eigener Umschalter bleibt im Dokument, damit Material weiter
   umschaltet und sich die Wahl merkt, ist aber nicht sichtbar. */
.md-header__option[data-md-component="palette"] {
    display: none;
}

.ospo-schema {
    position: relative;
}

.ospo-schema__menue {
    position: absolute;
    top: calc(100% + 0.2rem);
    right: 0;
    z-index: 5;
    min-width: 9rem;
    padding: 0.2rem;
    border: 0.05rem solid var(--md-default-fg-color--lighter);
    border-radius: var(--hub-radius-sm, 0.2rem);
    background: var(--md-default-bg-color);
    color: var(--md-default-fg-color);
    box-shadow: var(--md-shadow-z2);
    font-size: 0.7rem;
}

.ospo-schema__menue:not([hidden]) {
    display: flex;
    flex-direction: column;
}

.ospo-schema__menue button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    margin: 0;
    padding: 0.4rem 0.5rem;
    border: 0;
    border-radius: 0.1rem;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.ospo-schema__menue button:hover {
    background: var(--md-default-fg-color--lightest);
}

.ospo-schema__menue button:focus-visible {
    outline: 0.1rem solid var(--md-accent-fg-color);
    outline-offset: -0.1rem;
}

.ospo-schema__menue svg {
    width: 0.9rem;
    height: 0.9rem;
    fill: currentColor;
}

.ospo-schema__icon,
.ospo-schema__haken {
    display: inline-flex;
    flex-shrink: 0;
}

.ospo-schema__name {
    flex: 1;
}

.ospo-schema__haken {
    visibility: hidden;
    color: var(--md-typeset-a-color);
}

.ospo-schema__menue [aria-pressed="true"] .ospo-schema__haken {
    visibility: visible;
}

/* ---- Mitwirken am Seitenende, siehe overrides/partials/mitwirken.html ---- */

.md-typeset .ospo-mitwirken {
    margin-top: 3rem;
    padding-top: 1.2rem;
    border-top: 0.05rem solid var(--md-default-fg-color--lighter);
}

.md-typeset .ospo-mitwirken__titel {
    margin: 0 0 0.8rem;
    font-size: 1rem;
}

.md-typeset .ospo-mitwirken__titel--zweit {
    margin-top: 1.8rem;
}

.ospo-mitwirken__wege {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.md-typeset .ospo-mitwirken__wege .md-button {
    margin: 0;
    font-size: 0.7rem;
}

/* Materials Knöpfe nehmen die Primärfarbe, bei uns das Hub-Navy. Auf dem
   dunklen Schema verschwinden sie damit. Die Linkfarbe hat in beiden
   Schemata genug Kontrast, als Fläche mit der Hintergrundfarbe als Schrift. */
.md-typeset .ospo-mitwirken .md-button {
    border-color: var(--md-typeset-a-color);
    background: transparent;
    color: var(--md-typeset-a-color);
}

.md-typeset .ospo-mitwirken .md-button--primary {
    background: var(--md-typeset-a-color);
    color: var(--md-default-bg-color);
}

.md-typeset .ospo-mitwirken .md-button:hover {
    border-color: var(--hub-link-hover, var(--md-typeset-a-color));
    background: var(--md-accent-fg-color--transparent);
    color: var(--hub-link-hover, var(--md-typeset-a-color));
}

.md-typeset .ospo-mitwirken .md-button--primary:hover {
    background: var(--hub-link-hover, var(--md-typeset-a-color));
    color: var(--md-default-bg-color);
}

.md-typeset .ospo-mitwirken .md-button:focus-visible {
    outline: 0.1rem solid var(--md-accent-fg-color);
    outline-offset: 0.1rem;
}

.md-typeset .ospo-mitwirken .md-button:disabled {
    opacity: 0.6;
    cursor: wait;
}

.md-typeset .ospo-mitwirken__hinweis {
    margin: 0.6rem 0 0;
    color: var(--md-default-fg-color--light);
    font-size: 0.65rem;
}

.ospo-feedback {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    max-width: 34rem;
    margin-top: 1.2rem;
    padding: 1rem;
    border: 0.05rem solid var(--md-default-fg-color--lighter);
    border-radius: 0.2rem;
}

.ospo-feedback[hidden] {
    display: none;
}

.ospo-feedback__feld {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.ospo-feedback label {
    font-weight: 700;
    font-size: 0.7rem;
}

.ospo-feedback__freiwillig,
.ospo-feedback__hilfe {
    color: var(--md-default-fg-color--light);
    font-weight: 400;
    font-size: 0.65rem;
}

.ospo-feedback textarea,
.ospo-feedback input {
    width: 100%;
    padding: 0.4rem 0.5rem;
    border: 0.05rem solid var(--md-default-fg-color--light);
    border-radius: 0.2rem;
    background: var(--md-default-bg-color);
    color: var(--md-default-fg-color);
    font: inherit;
    font-size: 0.75rem;
}

.ospo-feedback textarea {
    resize: vertical;
}

/* Das Feld steht im Label (partials/mitwirken-kontakt.html) und erbte sonst
   dessen fette Schrift. */
.ospo-feedback label > input {
    display: block;
    margin-top: 0.3rem;
    font-weight: 400;
}

.ospo-feedback .ospo-feedback__auswahl {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 400;
}

.ospo-feedback .ospo-feedback__auswahl input {
    width: auto;
    margin: 0;
    accent-color: var(--md-typeset-a-color);
}

.ospo-feedback textarea:focus-visible,
.ospo-feedback input:focus-visible {
    outline: 0.1rem solid var(--md-accent-fg-color);
    outline-offset: 0.05rem;
}

.ospo-feedback [aria-invalid="true"] {
    border-color: var(--hub-gefahr, #b53030);
}

/* Unsichtbar, aber nicht display:none: Manche Bots überspringen Felder,
   die so ausgeblendet sind. */
.ospo-feedback__koeder {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.md-typeset .ospo-feedback__datenschutz {
    margin: 0;
    color: var(--md-default-fg-color--light);
    font-size: 0.65rem;
}

.ospo-feedback__aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.md-typeset .ospo-feedback__aktionen .md-button {
    margin: 0;
    font-size: 0.7rem;
}

.md-typeset .ospo-feedback__meldung {
    margin: 0;
    font-size: 0.7rem;
}

.md-typeset .ospo-feedback__meldung:empty {
    display: none;
}

.ospo-feedback__meldung[data-art="erfolg"] {
    color: var(--hub-tipp, #2f6a2a);
    font-weight: 700;
}

.ospo-feedback__meldung[data-art="fehler"] {
    color: var(--hub-gefahr, #b53030);
    font-weight: 700;
}

@media print {
    .ospo-mitwirken {
        display: none;
    }
}

/* ---- "Zuletzt geändert am" unter dem Titel, siehe hooks/geaendert.py ---- */

.md-typeset .ospo-geaendert {
    margin: -0.6rem 0 1.4rem;
    font-size: 0.7rem;
    color: var(--md-default-fg-color--light);
}