/* ==========================================================================
   Sprache im Einsatz — die reichen Feldseiten (tools/seiten_anwendung.py).

   Nur auf den Seiten unter „im-einsatz/" geladen. Die Grundformen (Karte,
   Chip, Satz, Register) stehen in stil.css; hier das, was ein reiches Feld
   dazubringt: Kennzahlen, Sprungmarken, Can-do, Kernwortschatz, Dialoge,
   Stufenfilter und Kurzquiz. Alles ueber die Variablen der Seite, also
   hell und dunkel ohne eigene Regeln; der Akzent `--kat` nie pur als
   Schrift.
   ========================================================================== */

.anw-feldkopf { margin-bottom: .6rem; }
.anw-kennzahlen {
  margin: .4rem 0 .2rem; font-size: .92rem; font-weight: 600;
  color: color-mix(in srgb, var(--kat) 55%, var(--ink));
}
.anw-stand { max-width: 28rem; margin: .5rem 0 0; }
.anw-stand .anw-balken { height: .5rem; }
.anw-stand-text { margin: .3rem 0 0; font-size: .88rem; color: var(--ink-2); }

.anw-sprung {
  display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 0;
}
.anw-sprung a {
  padding: .25rem .75rem; border-radius: var(--rund-voll);
  border: 1px solid color-mix(in srgb, var(--kat) 30%, var(--linie));
  background: var(--karte); color: var(--ink); text-decoration: none;
  font-size: .88rem;
}
.anw-sprung a:hover, .anw-sprung a:focus-visible {
  border-color: var(--kat); color: color-mix(in srgb, var(--kat) 55%, var(--ink));
}

.anw-block { margin: 2rem 0 1.4rem; scroll-margin-top: 5rem; }
.anw-block > h2 { margin-bottom: .3rem; }
.anw-block > .zeile-still { margin-top: 0; max-width: var(--lesebreite); }

.anw-stufe {
  display: inline-block; margin-right: .35rem; padding: .02rem .45rem;
  border-radius: 6px; font-size: .74rem; font-weight: 700; letter-spacing: .02em;
  border: 1px solid color-mix(in srgb, var(--kat, var(--marke)) 45%, var(--linie));
  color: color-mix(in srgb, var(--kat, var(--marke)) 55%, var(--ink));
  background: var(--karte); vertical-align: .08em;
}

/* Can-do */
.anw-koennen {
  list-style: none; margin: .8rem 0 0; padding: .4rem 1rem;
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: 14px; box-shadow: var(--schatten-1); max-width: 46rem;
}
.anw-koennen li { padding: .5rem 0; border-bottom: 1px solid var(--linie); }
.anw-koennen li:last-child { border-bottom: 0; }
.anw-koennen label { display: flex; align-items: baseline; gap: .55rem; cursor: pointer; }
.anw-koennen input { accent-color: var(--kat); width: 1.05rem; height: 1.05rem; flex: none; transform: translateY(.15rem); }
.anw-koennen input:disabled { display: none; }
.anw-koennen input:checked ~ .anw-koennen-text { color: var(--ink-2); }

/* Kernwortschatz */
.anw-woerter {
  list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .5rem;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}
.anw-wort {
  display: grid; grid-template-columns: 1fr auto; gap: .1rem .5rem; align-items: start;
  padding: .6rem .75rem; background: var(--karte);
  border: 1px solid var(--linie); border-left: 4px solid var(--linie);
  border-radius: 12px;
}
.anw-wort-ziel { font-weight: 650; grid-column: 1; }
.anw-wort .anw-stufe { grid-column: 2; grid-row: 1; margin: 0; }
.anw-wort-ueb { grid-column: 1 / -1; color: var(--ink-2); font-size: .9rem; line-height: 1.4; }
.anw-wort-gesehen { border-left-color: color-mix(in srgb, var(--kat) 45%, var(--linie)); }
.anw-wort-sicher { border-left-color: var(--kat); }
.anw-knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }

/* Dialoge */
.anw-dialoge { display: grid; gap: 1rem; margin-top: .8rem; }
@media (min-width: 900px) {
  .anw-dialoge { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.anw-dialog {
  padding: .9rem 1rem 1rem; background: var(--karte);
  border: 1px solid var(--linie); border-top: 3px solid var(--kat);
  border-radius: 14px; box-shadow: var(--schatten-1); min-width: 0;
}
.anw-dialog-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.anw-dialog-kopf h3 { margin: 0; font-size: 1.02rem; }
.anw-situation { margin: .35rem 0 .7rem; color: var(--ink-2); font-size: .92rem; }
.anw-zeilen { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.anw-zeile { display: grid; grid-template-columns: minmax(4.5rem, auto) minmax(0, 1fr); gap: .1rem .7rem; }
.anw-rolle {
  font-size: .78rem; font-weight: 700; padding-top: .2rem;
  color: color-mix(in srgb, var(--kat) 55%, var(--ink));
  overflow-wrap: anywhere;
}
.anw-zeile-1 .anw-rolle { color: var(--ink-2); }
.anw-zeile .satzpaar { margin: 0; padding: .35rem .6rem; border-radius: 10px; background: rgba(var(--tint), .045); }
.anw-zeile-0 .satzpaar { background: color-mix(in srgb, var(--kat) 7%, var(--karte)); }
.anw-zeile .satzpaar .ziel { display: block; font-weight: 600; }
.anw-zeile .satzpaar .de { display: block; color: var(--ink-2); font-size: .92rem; }

/* Stufenfilter */
.anw-stufenwahl { display: flex; flex-wrap: wrap; gap: .4rem; margin: .7rem 0 0; }
.anw-stufenwahl[hidden] { display: none; }
.anw-stufenknopf {
  padding: .25rem .8rem; border-radius: var(--rund-voll); font: inherit; font-size: .88rem;
  border: 1px solid var(--linie-kraeftig); background: var(--karte); color: var(--ink-2);
  cursor: pointer;
}
.anw-stufenknopf[aria-pressed="true"] { background: var(--kat); border-color: var(--kat); color: #fff; }
.anw-satz[hidden] { display: none; }

/* Kurzquiz */
.anw-quiz { margin-top: .8rem; padding: 1rem 1.1rem; max-width: 46rem; }
.anw-quiz[hidden] { display: none; }
.anw-quiz-zaehler { margin: 0 0 .3rem; font-size: .84rem; color: var(--ink-3); }
.anw-quiz-frage { margin: 0 0 .7rem; font-size: 1.08rem; font-weight: 650; }
.anw-quiz-optionen { display: grid; gap: .45rem; }
.anw-quiz-option { justify-content: flex-start; text-align: left; white-space: normal; }
.anw-quiz-gut { border-color: var(--ok-ink) !important; box-shadow: inset 0 0 0 1px var(--ok-ink); }
.anw-quiz-schlecht { border-color: var(--fehler-ink) !important; box-shadow: inset 0 0 0 1px var(--fehler-ink); }
.anw-quiz-rueck { min-height: 1.4em; margin: .6rem 0; color: var(--ink-2); }
.anw-quiz-ergebnis { font-size: 1.1rem; font-weight: 650; margin: 0 0 .7rem; }

.anw-wege h3 { font-size: 1rem; margin: .6rem 0 .3rem; }

@media (max-width: 539px) {
  .anw-zeile { grid-template-columns: minmax(0, 1fr); }
  .anw-rolle { padding-top: 0; }
  .anw-woerter { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
  .anw-wort { grid-template-columns: minmax(0, 1fr); padding: .5rem .6rem; }
  .anw-wort .anw-stufe { grid-column: 1; grid-row: auto; justify-self: start; }
  .anw-knoepfe .knopf { width: 100%; justify-content: center; }
}


/* --- Rueckfall fuer color-mix() -------------------------------------------
   Erzeugt von tools/browser_pruefen.py --schreiben. Nicht von Hand aendern:
   Die Pruefgruppe `browser` vergleicht ihn mit den Regeln darueber. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .anw-kennzahlen {
    color: var(--ink);
  }
  .anw-sprung a {
    border: 1px solid var(--kat);
  }
  .anw-sprung a:hover, .anw-sprung a:focus-visible {
    color: var(--ink);
  }
  .anw-stufe {
    border: 1px solid var(--kat, var(--marke));
    color: var(--ink);
  }
  .anw-wort-gesehen {
    border-left-color: var(--kat);
  }
  .anw-rolle {
    color: var(--ink);
  }
  .anw-zeile-0 .satzpaar {
    background: var(--karte);
  }
}
/* --- Ende des Rueckfalls fuer color-mix() --- */