/* Die Seiten der Aufgabenformen (docs/plan-aufgabenformen-seiten.md).
 *
 * Eigene Datei und nicht in oeffentlich.css: Es sind wenige Regeln, sie
 * gehoeren zu einem klar abgegrenzten Seitenzweig, und an oeffentlich.css
 * arbeiten regelmaessig mehrere gleichzeitig.
 *
 * Alles andere auf diesen Seiten kommt aus oeffentlich.css - oe-held,
 * oe-bereich, oe-raster, oe-punkt und die Knoepfe. Hier steht nur, was es
 * dort noch nicht gibt.
 */

/* Eine Kachel, die ganz ein Verweis ist.
 *
 * oe-punkt ist auf Textbloecke ausgelegt. Als Verweis braucht sie zwei
 * Dinge zusaetzlich: kein Unterstrich auf der ganzen Flaeche, und eine
 * sichtbare Reaktion beim Ueberfahren - sonst sieht ein klickbarer Block
 * aus wie ein unklickbarer.
 */
.oe-formkachel {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}

.oe-formkachel:hover,
.oe-formkachel:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1.25rem rgba(15, 37, 64, .12);
    color: inherit;
}

/* Der Fokusrahmen bleibt sichtbar - die Kachel ist ein Bedienelement, und
   wer mit der Tastatur navigiert, muss sehen, wo er steht. */
.oe-formkachel:focus-visible {
    outline: 3px solid var(--oe-petrol, #0a5bd6);
    outline-offset: 3px;
}

.oe-formkachel h3 {
    margin-top: .75rem;
}

/* Die Sinnbilder bringen ihre eigene helle Flaeche mit (erzeugte Bilder,
   nicht freigestellt - die Begruendung steht in libs/aufgabenformen.php).
   Die Rundung kommt deshalb von hier und nicht aus dem Bild: So laesst sie
   sich aendern, ohne fuenfzehn Dateien neu zu erzeugen. */
.oe-formicon {
    border-radius: .75rem;
    display: block;
    height: auto;
    max-width: 100%;
}

.oe-formicon-gross {
    border-radius: 1.25rem;
    margin-inline: auto;
}

/* Der Screenshot einer Aufgabe.
 *
 * Er zeigt die Quizkarte, und die hat ihre eigene, immer dunkle Farbwelt -
 * unabhaengig vom Farbmodus der Seite. Ohne Rahmen saehe das auf der hellen
 * Seite aus wie ein Fehler, deshalb bekommt das Bild eine eigene Fassung. */
.oe-formbild {
    margin: 0;
}

.oe-formbild img {
    border: 1px solid var(--oe-linie, #d8e2ef);
    border-radius: 1rem;
    display: block;
    height: auto;
    max-width: 100%;
}

.oe-formbild figcaption {
    color: var(--oe-grau, #52627a);
    font-size: .9rem;
    margin-top: .75rem;
}

/* Auf schmalen Schirmen steht das grosse Sinnbild ueber dem Text statt
   daneben, sonst bleibt fuer die Ueberschrift kaum Platz. */
@media (max-width: 767.98px) {
    .oe-formicon-gross {
        width: 96px;
    }
}

/* Die Beispielaufgabe.
 *
 * KEIN ABBILD DER QUIZKARTE. Die Karte ist immer dunkel und hat ihre eigene
 * Farbwelt; sie hier nachzubauen hiesse, zwei Stellen gleich halten zu
 * muessen. Der Screenshot darunter zeigt das echte Bild. Dieser Block ist
 * nur Text - er soll sich vom umgebenden Fliesstext abheben und mehr nicht.
 */
.oe-formbeispiel {
    background: var(--oe-weiss, #fff);
    border: 1px solid var(--oe-linie, #d8e2ef);
    border-left: 4px solid var(--oe-petrol, #0a5bd6);
    border-radius: .75rem;
    margin-block: 1.25rem;
    padding: 1.25rem 1.5rem;
}

.oe-formbeispiel-frage {
    font-weight: 600;
    margin-bottom: .75rem;
}

/* Die Antwortzeilen sind keine Aufzaehlung im Sinn von "auch noch", sondern
   die Auswahl selbst. Punkte davor wuerden eine Reihenfolge nahelegen, die
   es nicht gibt. */
.oe-formbeispiel-zeilen {
    list-style: none;
    margin: 0;
    padding: 0;
}

.oe-formbeispiel-zeilen li {
    border-top: 1px solid var(--oe-linie, #d8e2ef);
    padding: .5rem 0;
}

.oe-formbeispiel-zeilen li:first-child {
    border-top: 0;
    padding-top: 0;
}

/* Formen mit zwei Seiten (Zuordnen, Verbinden) zeigen beide Spalten. Auf
   dem Telefon stehen sie untereinander - nebeneinander waeren es zwei
   Spalten von je zwei Woertern Breite. */
.oe-formbeispiel-spalten {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr 1fr;
}

.oe-formbeispiel-spaltentitel {
    color: var(--oe-grau, #52627a);
    font-size: .8rem;
    letter-spacing: .04em;
    margin-bottom: .4rem;
    text-transform: uppercase;
}

@media (max-width: 575.98px) {
    .oe-formbeispiel-spalten {
        grid-template-columns: 1fr;
    }
}