/* Erzeugt von tools/rtl_css.py aus assets/css/konjugation.css — nicht von Hand aendern.
   Die Spiegelung fuer Seiten mit dir="rtl"; LTR-Seiten laden die Quelle. */
/* ==========================================================================
   Konjugationsseiten (tools/seiten_konjugation.py) — Praefix .kj-

   Eigenes Bauteil mit eigener Datei, eingebunden nur auf diesen Seiten.
   Es benutzt ausschliesslich die Token aus stil.css; neue Farben gibt es
   nicht. Sobald die Formtafeln der Grammatik ihr neues Design haben, soll
   die Tafel hier es uebernehmen — bis dahin bleibt sie bei den Token.
   ========================================================================== */

/* --- Kopf und Steckbrief ------------------------------------------------- */

.kj-kopf h1 .ziel { color: var(--marke-ink); }
.kj-steckbrief {
  list-style: none; margin: .9rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem .6rem;
}
.kj-steckbrief li {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: .35rem;
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--rund-s); padding: .4rem .7rem; line-height: 1.4;
}
.kj-steck-titel { color: var(--ink-2); font-size: .88em; }
.kj-steckbrief a { color: var(--marke-ink); display: inline-flex;
  align-items: center; min-height: 2rem; }

.kj-besonderheiten ul { margin: .4rem 0 0; padding-right: 1.2rem; }
.kj-besonderheiten li { margin: .35rem 0; }
.kj-bes-link { white-space: nowrap; }

/* --- Sprungleiste und Legende -------------------------------------------- */

.kj-sprung {
  display: block;
  margin: 1.6rem 0 .4rem; padding: .9rem 1rem 1rem;
  border: 1px solid var(--linie); border-radius: var(--rund);
  background: var(--karte);
}
/* Zwei Gruppen mit Kopf (seiten_konjugation._sprung_gruppen): erst die
   Formen, dann alles andere auf der Seite. */
.kj-sprung-gruppe + .kj-sprung-gruppe {
  margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--linie);
}
.kj-sprung-kopf {
  margin: 0 0 .45rem; font-size: .8rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
}
/* Ein Raster gleich breiter Felder statt Flattersatz: Auf dem Telefon zwei
   Spalten, die man von oben nach unten liest; breiter so viele, wie
   passen. Jedes Feld zeigt mit ↓, dass es auf dieser Seite weitergeht. */
.kj-sprung-liste {
  display: grid; gap: .4rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr));
}
.kj-sprung a {
  display: flex; align-items: center; justify-content: space-between; gap: .4rem;
  min-height: 44px; padding: .45rem .7rem;
  border: 1px solid var(--linie); border-radius: var(--rund-s, 10px);
  background: var(--grund, transparent); color: var(--marke-ink);
  text-decoration: none; font-weight: 600; font-size: .95rem; line-height: 1.25;
  -webkit-hyphens: manual; hyphens: manual; overflow-wrap: normal;
}
.kj-sprung a::after { content: "\2193"; color: var(--ink-3); font-weight: 400; }
.kj-sprung a:hover, .kj-sprung a:focus-visible { background: var(--marke-weich); }
/* Die zweite Gruppe hat lange Namen („Was Deutschsprachige hier oft
   falsch machen"): breitere Felder, auf dem Telefon eine Spalte — eine
   Zeile je Verweis liest sich schneller als drei Zeilen in einem halben
   Feld. */
.kj-sprung-gruppe + .kj-sprung-gruppe .kj-sprung-liste {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
@media (max-width: 420px) {
  .kj-sprung-gruppe:first-child .kj-sprung-liste { grid-template-columns: 1fr 1fr; }
}
/* 320 px: Zwei Spalten tragen lange Formnamen („Aussageformen“) nicht —
   das Raster lief 7 px über den Rand. Dort eine Spalte. */
@media (max-width: 359px) {
  .kj-sprung-gruppe:first-child .kj-sprung-liste { grid-template-columns: 1fr; }
}
.kj-legende { margin: .4rem 0 1rem; }

/* --- Die Tafeln ------------------------------------------------------------ */

.kj-gruppe { margin: 2rem 0 0; }
.kj-raster {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
}
.kj-zeit {
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--rund); overflow: hidden;
  box-shadow: var(--schatten-1);
}
.kj-zeit h3 {
  margin: 0; padding: .6rem .9rem; background: var(--bg-tief);
  border-bottom: 1px solid var(--linie); font-size: 1rem; line-height: 1.35;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem;
}
.kj-zeit h3 small { color: var(--ink-2); font-weight: normal; font-size: .82rem; }
.kj-tafel { width: 100%; border-collapse: collapse; table-layout: auto; }
.kj-tafel th, .kj-tafel td {
  padding: .38rem .9rem; text-align: right; vertical-align: top;
  border-top: 1px solid var(--linie);
}
.kj-tafel tr:first-child th, .kj-tafel tr:first-child td { border-top: 0; }
.kj-tafel th {
  color: var(--ink-2); font-weight: normal; width: 1%;
  text-transform: none; letter-spacing: normal; font-size: .9rem;
  min-width: 5.5rem; max-width: 9rem;
}
.kj-tafel td { font-size: 1.04rem; white-space: nowrap; }
/* Die Endung: fett UND unterstrichen, nicht nur farbig. */
.kj-endung {
  color: var(--marke-ink); font-weight: 700;
  text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
/* Die unregelmaessige Form: ein Zeichen plus die Akzenttinte. */
.kj-unreg .ziel { color: var(--akzent-ink); font-weight: 600; }
.kj-zeichen { color: var(--akzent-ink); margin-right: .3rem; font-size: .8em; }
.kj-leer { color: var(--ink-3); }
.kj-mehr {
  margin: 0; padding: .5rem .9rem .7rem; font-size: .9rem;
  border-top: 1px solid var(--linie); color: var(--ink-2);
}

/* Auf schmalen Schirmen: Person und Form untereinander lesbar halten. */
@media (max-width: 420px) {
  .kj-tafel th, .kj-tafel td { padding: .34rem .6rem; }
  .kj-tafel td { white-space: normal; }
}

/* --- Beispiele, Falle, Uebung, Weiter ------------------------------------- */

.kj-beispiele { margin-top: 2.2rem; }
.kj-saetze { list-style: none; margin: .8rem 0 0; padding: 0; }
.kj-saetze li {
  padding: .7rem 0 .6rem; border-top: 1px solid var(--linie);
}
.kj-saetze .satzpaar { margin-bottom: .25rem; }
.kj-treffer {
  background: var(--marke-weich); color: inherit; font-weight: 700;
  border-radius: 3px; padding: 0 .12em;
  text-decoration: underline; text-decoration-color: var(--marke-ink);
  text-underline-offset: 3px;
}
.kj-beleg { margin: 0; font-size: .9rem; }

.kj-falle { margin-top: 2rem; }
/* Falsch und richtig (Falle, typische Fehler): zwei eigene Kaesten
   untereinander statt einer Marke mitten in der Zeile — Etikett oben mit
   ✗ bzw. ✓ (nicht nur Farbe), der Satz darunter in voller Breite. Der
   falsche Satz bleibt lesbar: nur leicht durchgestrichen und gedaempft,
   denn wer den Fehler nicht lesen kann, erkennt ihn spaeter nicht wieder.
   Hintergruende als Mischung mit der Tintenfarbe, damit sie im hellen wie
   im dunklen Modus tragen. */
.kj-falsch, .kj-richtig {
  margin: .5rem 0 0; padding: .55rem .8rem .6rem;
  border-radius: var(--rund-s); border-right: 4px solid;
  line-height: 1.45;
}
.kj-falsch {
  border-right-color: var(--fehler-ink);
  background: color-mix(in srgb, var(--fehler-ink) 8%, transparent);
}
.kj-richtig {
  border-right-color: var(--ok-ink);
  background: color-mix(in srgb, var(--ok-ink) 9%, transparent);
}
.kj-marke {
  display: block; margin: 0 0 .15rem; padding: 0; background: none;
  font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.kj-falsch .kj-marke { color: var(--fehler-ink); background: none; }
.kj-richtig .kj-marke { color: var(--ok-ink); background: none; }
/* Ein Beispielsatz wird nicht getrennt („sis-ter"): Er soll als Ganzes
   gelesen und nachgesprochen werden. */
.kj-falsch .ziel, .kj-richtig .ziel, .kj-wendungen .ziel { -webkit-hyphens: manual; hyphens: manual; }
.kj-falsch .kj-marke::before { content: "\2717\00a0"; }
.kj-richtig .kj-marke::before { content: "\2713\00a0"; }
.kj-falsch .ziel {
  text-decoration: line-through; text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--fehler-ink) 70%, transparent);
  color: var(--ink-2);
}
.kj-richtig .ziel { font-weight: 600; }

/* Was nur dieses Paar sagt (inhalt/<paar>/verben_plus.py): jeder Eintrag
   eine Karte — gleiche Abstaende, ein klarer Rand je Gedanke. */
.kj-plus { margin-top: 2.2rem; }
.kj-plus-liste, .kj-wendungen { list-style: none; margin: .7rem 0 0; padding: 0; }
.kj-plus-liste { display: grid; gap: .8rem; }
.kj-plus-liste > li, .kj-wendungen > li {
  padding: .85rem 1rem 1rem; border: 1px solid var(--linie);
  border-radius: var(--rund); background: var(--karte);
  box-shadow: var(--schatten-1, none);
}
.kj-plus-warum { margin: .6rem 0 0; }
/* Wendungen und Verwechselbares: Raster, auf dem Telefon eine Spalte. */
.kj-wendungen {
  display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}
.kj-wendungen > li { margin: 0; line-height: 1.45; overflow-wrap: anywhere; }
.kj-wendungen .ziel { font-weight: 700; }
.kj-plus-strich { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.kj-plus-bed { display: block; margin-top: .2rem; color: var(--ink-2); }
.kj-plus-verwandt .kj-plus-bed { color: var(--ink); }
.kj-plus-verwandt a { font-weight: 700; color: var(--marke-ink); }

.kj-ueben { margin-top: 2.2rem; }
.kj-weiter { margin-top: 2.2rem; }
.kj-weiter h3 { font-size: 1rem; margin: 1.1rem 0 .5rem; }
.kj-chips, .kj-links { list-style: none; margin: 0; padding: 0; }
.kj-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.kj-chips a {
  display: inline-block; min-height: 32px; padding: .35rem .75rem;
  border: 1px solid var(--linie); border-radius: 999px; background: var(--karte);
  text-decoration: none;
}
.kj-chips a:hover, .kj-chips a:focus-visible { background: var(--marke-weich); }
.kj-links li { margin: .3rem 0; }

/* --- Die Uebersicht -------------------------------------------------------- */

.kj-filter { display: grid; gap: .8rem; margin: 1.2rem 0; }
.kj-filter label { display: grid; gap: .3rem; }
@media (min-width: 700px) {
  .kj-filter { grid-template-columns: 2fr 1fr; align-items: end; }
  .kj-filter [data-rolle="kj-stand"] { grid-column: 1 / -1; margin: 0; }
}
.kj-az { display: flex; flex-wrap: wrap; gap: .3rem; margin: 1rem 0; }
.kj-az a {
  display: inline-grid; place-items: center; min-width: 32px; min-height: 32px;
  border: 1px solid var(--linie); border-radius: var(--rund-s);
  background: var(--karte); text-decoration: none; font-weight: 600;
}
.kj-az a:hover, .kj-az a:focus-visible { background: var(--marke-weich); }
.kj-buchstabe h2 { margin: 1.6rem 0 .5rem; }
.kj-liste {
  list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem;
  grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
}
.kj-liste li {
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--rund-s); padding: .55rem .8rem;
  display: flex; flex-direction: column; gap: .2rem;
}
.kj-liste a { display: flex; flex-wrap: wrap; gap: .1rem .5rem; text-decoration: none; }
.kj-liste a .ziel { font-weight: 700; color: var(--marke-ink); }
.kj-liste-bed { color: var(--ink); }
.kj-liste-meta { font-size: .85rem; color: var(--ink-2); display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.kj-wie { margin-top: 2.4rem; }

@media print {
  .kj-sprung, .kj-ueben, .kj-filter, .kj-az { display: none; }
  .kj-zeit { break-inside: avoid; box-shadow: none; }
}

/* Auf dem Telefon kompakt und gut zu treffen (Design Easy Wins, November
   2026): Jede Zeile war 82 Pixel hoch, die Übersicht 26 000 Pixel lang,
   und die A–Z-Leiste hatte 32-Pixel-Ziele. Verb und Bedeutung bilden
   jetzt einen 44 Pixel hohen Verweis, die Angaben stehen daneben, sobald
   Platz ist, sonst darunter. */
@media (max-width: 40rem) {
  .kj-az a { min-width: 44px; min-height: 44px; }
  .kj-liste { gap: .35rem; }
  .kj-liste li {
    flex-direction: row; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: 0 .6rem; padding: .2rem .7rem;
  }
  .kj-liste li > a { flex: 1 1 10rem; min-height: 44px; align-items: 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)) {
  .kj-falsch {
    background: transparent;
  }
  .kj-richtig {
    background: transparent;
  }
  .kj-falsch .ziel {
    text-decoration-color: var(--fehler-ink);
  }
}
/* --- Ende des Rueckfalls fuer color-mix() --- */