/* Berufsdeutsch-Übung, Spielansichten: Aufgaben, Rückmeldung, Wortkarten, Szenen-Chat, Lernnachweis, Druck. */
.bd-kopfzeile { display: flex; align-items: center; gap: .7rem; }
.bd-kopfzeile .bd-klein { flex: none; font-weight: 600; }
.bd-schliessen { flex: none; width: 44px; padding: 0; background: none; border: 0; color: var(--grau); font-size: 1.3rem; }
.bd-schliessen:hover { color: var(--tinte); }
.bd-fortschritt { flex: 1; height: .9rem; }

/* Aufgaben */
.bd-aufgabe { padding: 1.2rem; background: var(--karte); border: 1px solid var(--linie); border-radius: 20px; box-shadow: var(--bd-schatten); }
.bd-aufgabe > p:first-child { margin-top: 0; }
.bd-frage { font-size: 1.2rem; font-weight: 650; line-height: 1.4; }
.bd-marke { display: inline-block; margin: 0 0 .5rem; padding: .15rem .7rem; border-radius: 2rem;
  font-size: .85rem; font-weight: 700; background: var(--gelb-blass); color: var(--tinte); }
.bd-luecke { display: inline-block; min-width: 4.5rem; border-bottom: 3px solid var(--bd-flamme); color: var(--blau); text-align: center; }
.bd-optionen { display: grid; gap: .55rem; }
.bd-option { width: 100%; text-align: left; padding: .75rem 1rem; background: var(--bg); color: var(--tinte);
  border: 2px solid var(--linie); border-bottom-width: 4px; font-size: 1.02rem; }
.bd-option:not(:disabled):hover { border-color: var(--blau); }
.bd-option.bd-aktiv { border-color: var(--blau); background: var(--blau-bg); }
.bd-ok { border-color: var(--gruen) !important; background: var(--gruen-bg) !important; color: var(--tinte) !important; }
.bd-falsch { border-color: var(--rot) !important; background: var(--rot-bg) !important; color: var(--tinte) !important; }
.bd-falsch:disabled { opacity: .8; text-decoration: line-through; }
.bd-satz, .bd-vorrat { display: flex; flex-wrap: wrap; gap: .45rem; min-height: 3.4rem; padding: .5rem;
  border: 2px dashed var(--linie); border-radius: 14px; margin: .6rem 0; }
.bd-vorrat { border-style: solid; border-color: transparent; background: var(--bg); }
.bd-chip { padding: .35rem .9rem; background: var(--karte); color: var(--tinte); border: 2px solid var(--linie);
  border-bottom-width: 4px; font-weight: 600; }
.bd-satz .bd-chip { background: var(--blau-bg); border-color: var(--blau); }
.bd-paare { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.bd-spalte { display: grid; gap: .55rem; align-content: start; }
.bd-paare .bd-option { font-size: .95rem; }
.bd-loesung { font-weight: 650; color: var(--gruen); }
.bd-gross { display: block; width: 100%; margin: .9rem 0 0; padding: .8rem 1rem; font-weight: 700; font-size: 1.05rem;
  background: var(--blau); color: var(--auf-akzent); border: 0; border-bottom: 4px solid rgba(0, 0, 0, .25); }
.bd-gross:disabled { opacity: .45; }

/* Rückmeldung */
.bd-rm { margin-top: 1rem; padding: 1rem 1.1rem; border-radius: 16px; animation: bd-rein .3s both; }
.bd-rm p { margin: .35rem 0 0; }
.bd-rm-titel { font-size: 1.1rem; }
.bd-gut { background: var(--gruen-bg); border: 2px solid var(--gruen); }
.bd-gut .bd-rm-titel { color: var(--gruen); }
.bd-schlecht { background: var(--rot-bg); border: 2px solid var(--rot); }
.bd-schlecht .bd-rm-titel { color: var(--rot); }
.bd-gut .bd-cta { background: var(--gruen); color: #fff; }

/* Wortkarten */
.bd-chips { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .3rem; scrollbar-width: thin; }
.bd-filter { flex: none; padding: .3rem .9rem; background: var(--karte); color: var(--tinte); border: 1px solid var(--linie); font-size: .9rem; }
#bd-spiel .bd-filter { border-radius: 2rem; min-height: 38px; }
.bd-filter-an { background: var(--blau); color: var(--auf-akzent); border-color: var(--blau); font-weight: 700; }
.bd-kartenbox { display: grid; gap: .8rem; perspective: 1200px; }
.bd-karte { position: relative; min-height: 17rem; cursor: pointer; transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.3, .9, .3, 1); border-radius: 22px; }
.bd-umgedreht { transform: rotateY(180deg); cursor: default; }
.bd-seite { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: .5rem;
  padding: 1.4rem; text-align: center; border-radius: 22px; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border: 1px solid var(--linie); box-shadow: var(--bd-schatten); }
.bd-seite p { margin: 0; }
.bd-vorne { background: var(--karte); border-top: 6px solid var(--bd-flamme); }
.bd-hinten { background: var(--blau-bg); transform: rotateY(180deg); border-top: 6px solid var(--gruen); }
.bd-wort { font-family: var(--serif); font-size: 2rem; font-weight: 700; line-height: 1.2; color: var(--tinte); }
.bd-plural { color: var(--grau); }
.bd-tipp-umdrehen { margin-top: 1rem !important; }
.bd-wort-klein { font-weight: 700; color: var(--blau); }
.bd-erklaerung { font-size: 1.15rem; line-height: 1.45; }
.bd-beispiel { font-style: italic; color: var(--tinte-weich); }
.bd-bewerten { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; visibility: hidden; opacity: 0; transition: opacity .3s; }
.bd-bewerten.bd-sichtbar { visibility: visible; opacity: 1; }
.bd-bewerten button { padding: .75rem; font-weight: 700; font-size: 1.05rem; border: 2px solid; border-bottom-width: 4px; }
.bd-bewerten-nein { background: var(--rot-bg); color: var(--rot); border-color: var(--rot); }
.bd-bewerten-ja { background: var(--gruen-bg); color: var(--gruen); border-color: var(--gruen); }
.bd-sprech { display: inline-grid; place-items: center; vertical-align: middle; margin-left: .4rem; width: 44px; padding: 0;
  background: var(--blau-bg); border: 0; font-size: 1.1rem; font-style: normal; }
#bd-spiel .bd-sprech { border-radius: 50%; }

/* Lesetext über einer Wahl-Frage (optional) */
.bd-lesetext { white-space: pre-line; margin-bottom: .8rem; padding: .8rem 1rem; border-radius: 12px; background: var(--blau-bg); border: 1px dashed var(--linie); line-height: 1.45; }

/* Szenen */
.bd-lage { padding: 1rem 1.1rem; border-radius: 16px; background: var(--gelb-blass); border-left: 6px solid var(--bd-flamme); }
.bd-lage p { margin: .35rem 0 0; }
.bd-chat { display: grid; gap: .6rem; }
.bd-blase { max-width: 85%; justify-self: start; padding: .6rem .9rem; background: var(--karte); border: 1px solid var(--linie);
  border-radius: 4px 18px 18px 18px; box-shadow: var(--schatten); animation: bd-rein .3s both; }
.bd-blase p { margin: .15rem 0 0; }
.bd-ich { justify-self: end; background: var(--blau); color: var(--auf-akzent); border-color: var(--blau); border-radius: 18px 4px 18px 18px; }
.bd-wer { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; opacity: .75; }
.bd-ich .bd-sprech { background: rgba(255, 255, 255, .2); }

/* Lernnachweis */
.bd-formzeile { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.bd-eingabe { flex: 1 1 12rem; min-height: 44px; padding: .5rem .8rem; font: inherit; color: var(--tinte);
  background: var(--karte); border: 2px solid var(--linie); border-radius: 12px; }
.bd-eingabe:focus { outline: none; border-color: var(--blau); }
.bd-zeit { flex: 0 1 9rem; }
.bd-urkunde { position: relative; padding: 2rem 1.6rem; text-align: center; background: var(--karte); color: var(--tinte);
  border: 3px double var(--bd-gold); border-radius: 8px; box-shadow: var(--bd-schatten), inset 0 0 0 8px var(--karte), inset 0 0 0 9px var(--linie); }
.bd-urkunde h2 { font-family: var(--serif); font-size: 2rem; margin: .2rem 0; }
.bd-urkunde-ueber { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bd-gold); font-weight: 700; }
.bd-urkunde-beruf { font-size: 1.1rem; color: var(--blau); font-weight: 600; }
.bd-urkunde-name { min-height: 2.2rem; margin: 1.2rem auto .4rem; max-width: 22rem; font-family: var(--serif);
  font-size: 1.6rem; border-bottom: 1px solid var(--tinte-weich); }
.bd-urkunde-liste { list-style: none; padding: 0; margin: 1rem auto; max-width: 26rem; text-align: left; display: grid; gap: .3rem; }
.bd-urkunde-liste li { color: var(--grau); }
.bd-urkunde-liste .bd-ja { color: var(--tinte); font-weight: 600; }
.bd-urkunde-fuss { font-weight: 600; }

@media (max-width: 30rem) {
  .bd-paare .bd-option { font-size: .85rem; padding: .55rem; }
  .bd-wort { font-size: 1.6rem; }
  .bd-karte { min-height: 15rem; }
  .bd-urkunde { padding: 1.4rem 1rem; }
}
@media print {
  body * { visibility: hidden !important; }
  .bd-urkunde, .bd-urkunde * { visibility: visible !important; }
  .bd-urkunde { position: absolute; left: 0; right: 0; top: 0; margin: 0 auto; max-width: 40rem; box-shadow: none;
    color: #000; background: #fff; border-color: #a07a1f; }
  .bd-urkunde-liste li, .bd-urkunde .bd-klein { color: #333 !important; }
}