/* Uebungsbloecke im KI-Fuehrerschein.
   Muster uebernommen aus prozess-fuehrerschein/_module.css (Uebung B):
   Eingabefeld, eingeklappte Musterloesung, Box "Haeufige Verwechslungen".

   Rein clientseitig. Kein Endpunkt, keine Speicherung, keine Uebertragung.

   Farben ausschliesslich ueber Tokens aus _base.css (GL-003). Bedienelemente
   (Textarea, summary) tragen --border-control statt --border: --border erreicht
   1,16:1 auf --bg2 und erfuellt WCAG 1.4.11 nicht, --border-control mit 3,06:1
   schon. --border bleibt fuer rein dekorative Trennung. */

.uebung {
  border: 1px solid var(--border);
  border-left: 4px solid var(--dark);
  border-radius: 8px;
  padding: 24px;
  margin: 24px 0;
  background: var(--surface);
}
.uebung-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--dark);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
/* --text2 statt --text3: 6,81:1 auf --bg2, bei 0,66rem die sicherere Wahl */
.uebung-label .tag {
  background: var(--bg2);
  color: var(--text2);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .66rem;
  letter-spacing: .06em;
  font-weight: 600;
}
.uebung h3 {
  font-family: 'DM Serif Display', serif;
  font-size: 1.25rem;
  margin: 0 0 12px;
  color: var(--text);
  line-height: 1.25;
}
.uebung h4 {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text);
  margin: 20px 0 8px;
}
.uebung > p,
.uebung-frage p {
  color: var(--text2);
  line-height: 1.7;
  font-size: .92rem;
  margin: 0 0 12px;
}
.uebung ol {
  color: var(--text2);
  line-height: 1.7;
  font-size: .92rem;
  margin: 0 0 12px;
  padding-left: 22px;
}
.uebung ol li { margin-bottom: 8px; }

.uebung pre,
.loesung-body pre {
  margin: 10px 0 14px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 14px 16px;
  font-family: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .8rem;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
  overflow-x: auto;
}

/* Eingabefelder */
.felder-grid { display: grid; gap: 14px; margin: 8px 0 12px; }
.feld-row label {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 5px;
}
.feld-row textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  border: 1px solid var(--border-control);
  border-radius: 7px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
}
.feld-row textarea::placeholder { color: var(--text3); }

.uebung-hinweis {
  color: var(--text3);
  font-size: .78rem;
  line-height: 1.55;
  margin: 0 0 16px;
}

/* Eingeklappte Musterloesung */
.loesung { margin-top: 4px; }
.loesung > summary {
  cursor: pointer;
  font-weight: 700;
  font-size: .85rem;
  color: var(--dark);
  padding: 12px 16px;
  background: var(--bg2);
  border: 1px solid var(--border-control);
  border-radius: 7px;
  list-style: none;
  user-select: none;
}
.loesung > summary::-webkit-details-marker { display: none; }
.loesung > summary::before { content: '\25B8\00A0'; }
.loesung[open] > summary::before { content: '\25BE\00A0'; }
.loesung[open] > summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.loesung-body {
  border: 1px solid var(--border-control);
  border-top: none;
  border-radius: 0 0 7px 7px;
  padding: 18px 20px;
}
.loesung-body p {
  color: var(--text2);
  font-size: .92rem;
  line-height: 1.7;
  margin: 0 0 12px;
}
.loesung-body p:last-child { margin-bottom: 0; }
.loesung-body h4 {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text);
  margin: 20px 0 8px;
}
.loesung-body h4:first-child { margin-top: 0; }
.loesung-body ul {
  margin: 0 0 12px;
  padding-left: 22px;
  color: var(--text2);
  font-size: .92rem;
  line-height: 1.7;
}
.loesung-body li { margin-bottom: 8px; }

/* Box "Haeufige Verwechslungen" erbt .alert-box aus dem Modul-Stylesheet */
.uebung .alert-box { margin: 20px 0 0; }
.uebung .alert-box p + p { margin-top: 10px; }

@media (max-width: 768px) {
  .uebung { padding: 18px; }
  .loesung-body { padding: 14px 16px; }
  .uebung pre,
  .loesung-body pre { font-size: .74rem; padding: 12px; }
}