/*Root: Auftrag, Feld, Bildauswahl, Übernehmen*/
.lncu-lernstrasse-eintrag-block {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--bricks-color-blue-500);

    --lncu-lernstrasse-eintrag-rahmen: 3px;
    --lncu-lernstrasse-eintrag-bild-breite: 14rem;
}

/*Außerhalb einer Station: im Builder nur der Placeholder (nur dort vorhanden), im Frontend gar nichts*/
.lncu-lernstrasse-eintrag-block > .lncu-lernstrasse-platzhalter {
    display: none;
}

.lncu-lernstrasse-eintrag-block:not(.lncu-lernstrasse-station-block *) > :not(.lncu-lernstrasse-platzhalter) {
    display: none !important;
}

.lncu-lernstrasse-eintrag-block:not(.lncu-lernstrasse-station-block *) > .lncu-lernstrasse-platzhalter {
    display: block;
}

.lncu-lernstrasse-eintrag-block:not(.lncu-lernstrasse-station-block *):not(:has(> .lncu-lernstrasse-platzhalter)) {
    display: none !important;
}

/*Grundgröße der Icons; :where hält die Spezifität bei einer Klasse, damit eigene Regeln (z. B. Aufgaben-Symbol) vorgehen*/
.lncu-lernstrasse-eintrag-block :where(.lncu-lernstrasse-icon) {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
}

/*Auftrag: Aussehen aus dem Aufgaben-Element (lernstrasse-aufgabe-element.css); Feld wie Antworten im Quiz: weiß, Rahmen Stufe 400, Rundung 1rem*/

/*Fester Vorsatz (Vermutung, Vorlage): nicht editierbar, als helle Fläche vom Feld abgesetzt*/
.lncu-lernstrasse-eintrag-vorsatz {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.8rem 1.2rem;
    border-radius: 1rem;
    background-color: var(--bricks-color-blue-600);
    color: var(--bricks-color-blue-100);
    line-height: 1.5;
}

.lncu-lernstrasse-eintrag-vorsatz[hidden] {
    display: none;
}

.lncu-lernstrasse-eintrag-vorsatz-zeile {
    margin: 0;
    white-space: pre-line;
}

.lncu-lernstrasse-eintrag-textfeld {
    width: 100%;
    min-height: 10rem;
    box-sizing: border-box;
    padding: 0.8rem 1.2rem;
    font: inherit;
    line-height: 1.5;
    border: var(--lncu-lernstrasse-eintrag-rahmen) solid var(--bricks-color-blue-400);
    border-radius: 1rem;
    background-color: var(--bricks-color-white);
    color: var(--bricks-color-blue-100);
    resize: vertical;
}

.lncu-lernstrasse-eintrag-textfeld:focus {
    border-color: var(--bricks-color-blue-100);
    outline: none;
}

.lncu-lernstrasse-eintrag-textfeld:focus-visible {
    outline: 3px solid var(--bricks-color-blue-200);
    outline-offset: 2px;
}

.lncu-lernstrasse-eintrag-textfeld[readonly] {
    background-color: var(--bricks-color-blue-600);
}

/*Bildauswahl: Kacheln wie Antworten, gewählt getönt mit dunklem Rahmen und Häkchen*/
.lncu-lernstrasse-eintrag-bildauswahl {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.lncu-lernstrasse-eintrag-bildfrage {
    margin: 0;
    font-weight: 700;
}

.lncu-lernstrasse-eintrag-bildhinweis {
    margin: 0;
    font-size: 1.4rem;
}

.lncu-lernstrasse-eintrag-bilder {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--lncu-lernstrasse-eintrag-bild-breite)), 1fr));
    gap: 1rem;
}

.lncu-lernstrasse-eintrag-bild {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.6rem;
    font: inherit;
    font-size: 1.4rem;
    line-height: 1.3;
    text-align: center;
    border: var(--lncu-lernstrasse-eintrag-rahmen) solid var(--bricks-color-blue-400);
    border-radius: 1rem;
    background-color: var(--bricks-color-white);
    color: var(--bricks-color-blue-100);
    cursor: pointer;
}

.lncu-lernstrasse-eintrag-bild:hover {
    filter: none;
}

/*Überfahren: Kontur und blasse Fläche wie bei den Antworten im Quiz (Skill 1.6)*/
.lncu-lernstrasse-eintrag-bild:hover:not(:disabled):not(.is-selected) {
    border-color: var(--bricks-color-blue-200);
    background-color: var(--bricks-color-blue-600);
}

.lncu-lernstrasse-eintrag-bild:focus-visible {
    outline: 3px solid var(--bricks-color-blue-200);
    outline-offset: 2px;
}

.lncu-lernstrasse-eintrag-bild.is-selected {
    border-color: var(--bricks-color-blue-100);
    background-color: var(--bricks-color-blue-600);
}

.lncu-lernstrasse-eintrag-bild:disabled {
    cursor: default;
}

.lncu-lernstrasse-eintrag-bilddatei {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0.6rem;
}

.lncu-lernstrasse-eintrag-bildhaken {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    display: none;
    padding: 0.2rem;
    border-radius: 50%;
    background-color: var(--bricks-color-blue-100);
    color: var(--bricks-color-white);
}

.lncu-lernstrasse-eintrag-bild.is-selected .lncu-lernstrasse-eintrag-bildhaken {
    display: block;
}

.lncu-lernstrasse-eintrag-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/*Aktionen: Übernehmen (Hauptknopf), Versiegeln (Funktionsknopf), Status*/
.lncu-lernstrasse-eintrag-aktionen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.lncu-lernstrasse-eintrag-uebernehmen,
.lncu-lernstrasse-eintrag-versiegeln {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 4rem;
    padding: 1rem 1.4rem;
    font: inherit;
    line-height: 1.2;
    border: none;
    border-radius: 1rem;
}

.lncu-lernstrasse-eintrag-uebernehmen {
    background-color: var(--bricks-color-blue-100);
    color: var(--bricks-color-white);
}

.lncu-lernstrasse-eintrag-versiegeln {
    background-color: var(--bricks-color-blue-500);
    color: var(--bricks-color-blue-100);
}

.lncu-lernstrasse-eintrag-versiegeln.is-confirming {
    background-color: var(--bricks-color-red-100);
    color: var(--bricks-color-white);
}

.lncu-lernstrasse-eintrag-uebernehmen:focus-visible,
.lncu-lernstrasse-eintrag-versiegeln:focus-visible {
    outline: 3px solid var(--bricks-color-blue-200);
    outline-offset: 2px;
}

.lncu-lernstrasse-eintrag-uebernehmen[hidden],
.lncu-lernstrasse-eintrag-versiegeln[hidden] {
    display: none;
}

.lncu-lernstrasse-eintrag-status {
    margin: 0;
    font-size: 1.4rem;
}

/*Nach dem Übernehmen: Kinder des Eintrags*/
.lncu-lernstrasse-eintrag-danach {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.lncu-lernstrasse-eintrag-danach[hidden],
.lncu-lernstrasse-eintrag-danach:empty {
    display: none;
}

.is-builder .lncu-lernstrasse-eintrag-danach::before {
    content: "Erscheint nach dem Übernehmen:";
    font-size: 1.3rem;
    font-style: italic;
}

@media print {
    .lncu-lernstrasse-eintrag-aktionen {
        display: none;
    }
}