/* Karte in der Abfrage, gemeinsam für Web-App und Mac-App (KarteWeb.swift bettet diese Datei ein).
   Die Abfrage ist in beiden immer schwarz, daher nur ein Farbsatz. Größen hängen per em an --kt-schrift. */

.kt {
  --kt-text: #F5F5F7;
  --kt-text-2: rgba(235, 235, 245, .6);
  --kt-linie: rgba(255, 255, 255, .14);
  --kt-akzent: #A5A3FF;
  --kt-akzent-weich: rgba(142, 140, 248, .2);
  --kt-knopf: rgba(255, 255, 255, .1);
  --kt-ease: cubic-bezier(.16, 1, .3, 1);
  max-width: 760px; margin: 0 auto;
  color: var(--kt-text);
  font-size: var(--kt-schrift, 20px); line-height: 1.5; hyphens: auto;
}
.kt .kicker { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(235, 235, 245, .55); margin: 0 0 18px; }
.kt .rubrik { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--kt-text-2); margin: 0 0 4px; }

.kt-frage { font-size: 1.12em; font-weight: 500; }
.kt-text { font-size: 1.06em; }
.kt-trenner { border: 0; border-top: 1px solid var(--kt-linie); margin: 28px 0; }
.kt-block { margin-top: 18px; }
.kt-kontext { color: var(--kt-text-2); margin-top: 14px; }
.kt-aufforderung { color: var(--kt-akzent); font-weight: 600; margin-top: 16px; }
.kt-paar { margin-bottom: 10px; } .kt-paar-frage { font-weight: 600; }
.kt-ansicht { margin-top: 14px; } .kt-argumente { color: var(--kt-text-2); margin-top: 4px; }
.kt-objekte li.aktiv { color: var(--kt-akzent); font-weight: 600; }
.kt-titelzeile { font-weight: 600; }
.kt details { margin-top: 18px; color: var(--kt-text-2); } .kt summary { cursor: pointer; font-size: 14px; }
/* „Im Fall angewendet“: je Fall der Titel, darunter Grad und Lerntag, dann der Hinweis in Lesegröße */
.kt-anw { margin-top: 14px; color: var(--kt-text); font-size: .86em; }
.kt-anw-titel { margin: 0; font-weight: 600; }
.kt-anw-meta { margin: 0 0 4px; font-size: 12px; color: var(--kt-text-2); }
.kt a { color: var(--kt-akzent); text-decoration: none; }
.kt img { max-width: 100%; border-radius: 8px; }
/* Tabellen immer volle Breite mit gleich breiten Spalten: Die Breite hinge sonst am gerade sichtbaren Inhalt,
   eine Spalte mit eingeklappten Abschnitten schrumpfte auf ein Wort, und jedes „+“ ließe die Tabelle springen. */
.kt table { border-collapse: collapse; margin: 10px 0; font-size: .9em; width: 100%; table-layout: fixed; }
.kt td, .kt th { border: 1px solid var(--kt-linie); padding: 8px 12px; vertical-align: top; text-align: left; overflow-wrap: break-word; }
.kt ul, .kt ol { padding-left: 1.3em; }
/* Die Jura-Vorlagen setzen Beispiele und Anmerkungen als <sup>: kleiner und leiser, aber auf der Zeile,
   sonst reißt jede hochgestellte Zeile den Zeilenabstand auf. */
.kt sup { vertical-align: baseline; font-size: .86em; line-height: 1.45; color: var(--kt-text-2); }

/* Lücke: zu eine ruhige Kapsel fester Breite (verrät die Länge nicht), auf der Antworttext an derselben Stelle. */
.kt-luecke {
  display: inline-block; min-width: 3.2em; padding: 0 .5em; border-radius: .4em;
  background: var(--kt-akzent-weich); color: var(--kt-akzent); font-weight: 600;
  text-align: center; line-height: 1.35; text-indent: 0;
}
.kt-luecke-auf {
  display: inline; min-width: 0; padding: .04em .2em; border-radius: .3em; text-align: inherit;
  line-height: inherit; font-weight: 600;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* Beim Aufdecken: Antwort schärft sich aus der Kapsel heraus, Zusätze darunter blenden nach. */
.kt-aufdecken .kt-luecke-auf { animation: kt-auf 280ms var(--kt-ease) both; }
.kt-aufdecken > .kt-trenner, .kt-aufdecken > .kt-hinten { animation: kt-ein 320ms var(--kt-ease) 60ms both; }
.kt-eingeblendet.kt-neu { animation: kt-auf 240ms var(--kt-ease) both; }
@keyframes kt-auf { from { opacity: 0; filter: blur(6px); } }
@keyframes kt-ein { from { opacity: 0; transform: translateY(6px); } }

/* Eingeklappte Abschnitte ([[…]] ohne die gefragte Lücke) und Folgetext (>>>): kleine graue Kapsel. */
.kt-mehr {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: .08em;
  height: 1.3em; min-width: 1.6em; padding: 0 .5em; margin: 0 .15em;
  border: 0; border-radius: 999px; background: var(--kt-knopf); color: var(--kt-text-2);
  font-family: inherit; font-size: .72em; font-weight: 600; line-height: 1; letter-spacing: .02em; cursor: pointer;
  transition: background 150ms var(--kt-ease), color 150ms var(--kt-ease);
}
.kt-mehr.kt-plus { font-size: .85em; padding: 0; width: 1.5em; min-width: 0; }
/* Mit Stichwort: „+ Anwendbarkeit“, damit klar ist, was dahinter steht. */
.kt-mehr.kt-stichwort { gap: .35em; padding: 0 .7em 0 .55em; font-size: .78em; font-weight: 500; letter-spacing: 0; height: 1.55em; }
.kt-mehr.kt-stichwort > span { font-weight: 600; opacity: .7; }
.kt-mehr:hover { background: rgba(255, 255, 255, .16); color: var(--kt-text); }
.kt-mehr:focus-visible { outline: 2px solid var(--kt-akzent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .kt-aufdecken .kt-luecke-auf, .kt-aufdecken > .kt-trenner, .kt-aufdecken > .kt-hinten, .kt-eingeblendet.kt-neu { animation: none; }
}

/* Normstand: Gesetzesänderung seit der Karte (normstand.js über normstandSetzen in karte-render.js). */
.kt-normstand { margin-top: 14px; padding: 10px 14px; border-radius: var(--r-kachel, 14px); background: rgba(88, 86, 214, .12); font-size: .82em; line-height: 1.45; }
.kt-normstand b { margin-right: 6px; }