/*
 * Karteikarten-Selbstabfrage (B4, Basic-Funktion).
 * Baut auf style.css + konto.css (Tokens, Buttons, Header) auf. Warmes
 * Papier, ein Sienna-Akzent für die jeweils gewünschte Handlung. Eine
 * einzelne, fokussierte Lernkarte — kein Karten-Raster. Rot bleibt echten
 * Fehlern vorbehalten; „nicht gewusst" ist eine neutrale Selbsteinschätzung.
 */

/* Breite und Innenabstand kommen aus .container (style.css) — dieselbe EINE
   Regel wie auf jeder anderen Unterseite. Das HTML trägt beide Klassen
   (`class="container kk-wrap …"`). Hier steht deshalb KEINE max-width und kein
   waagerechter Innenabstand mehr: eine zweite Breitenangabe war der Grund,
   weshalb diese Seite über Monate hinweg schmaler lief als die übrigen. Wer
   sie wieder einführt, bricht die Angleichung erneut. */
.kk-wrap { padding-top: var(--abstand-seitenkopf); padding-bottom: 4rem; }
/* Die Abfrage-Seite gehört der Lernkarte: der Wrapper füllt das Fenster, die
   Bühne dehnt sich, und die Karte nimmt, was übrig bleibt. Ihre min-height
   bleibt der Boden — auf niedrigen Fenstern wird sie also nicht kleiner,
   sondern die Seite scrollt ein Stück. Unter der Karte reicht wenig Luft. */
.kk-wrap-abfrage {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 5rem);
  padding-bottom: 2rem;
}
.kk-buehne-fuell { display: flex; flex-direction: column; flex: 1 1 auto; }
.kk-buehne-fuell .kk-karte { flex: 1 1 auto; }
.kk-zurueck { font-size: .9rem; margin: 0 0 1.25rem; }
.kk-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem 1.5rem;
}
.kk-kopf h1 { margin: 0; }
/* Der Vorspann lief auf 56ch (rund 560px) um und ließ die Seite neben den
   übrigen Unterseiten schmal wirken, obwohl der Container identisch ist. Er
   nutzt jetzt dieselbe Zeilenbreite wie die Vorspänne der anderen Seiten. */
.kk-intro { color: var(--tinte-blass); margin: .5rem 0 1.25rem; max-width: 78ch; }

/* --- Deck-Auswahl: eingerückter Gebietsbaum ------------------------- */
/* Ein eingerückter Baum der Rechtsgebiete. Jeder Ast mit
   Unterdecks klappt auf/zu; der Name lernt das Gebiet samt allem darunter.
   Keine Kästen — der Akzent (Sienna) markiert nur die aktive Zeile und den
   überfahrenen Namen.

   Gebaut aus <details>/<summary>: Kopfzeile und jeder Ast sind native
   Aufklapp-Elemente. Das ist hier keine Spielerei, sondern der Grund, weshalb
   das Menü hält — es klappt ohne dieses Stylesheet und ohne JavaScript. Die
   vorige Bauweise (ein <button> plus Skript) sah ohne ihr Stylesheet aus wie
   ein grauer Kasten mit 2px-Rahmen, weil das die Standardanzeige eines
   Browsers für <button> ist. Genau dieser Kasten war monatelang zu sehen,
   solange ein Browser noch ein altes CSS im Speicher hatte.

   Deshalb gilt für alles unten: KEINE Regel darf die Sichtbarkeit von
   .kk-deck-kinder oder .kk-decks bestimmen. Das macht allein <details>. */
.kk-deck-zeile {
  margin-bottom: 1.5rem;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}
/* Kopfzeile = <summary>. Das Standard-Dreieck weicht dem Haarlinien-Winkel
   rechts; ohne list-style/marker-Ausblendung stünde beides da. */
.kk-deck-aufklapp {
  display: flex;
  align-items: center;
  gap: .35rem .9rem;
  padding: .8rem .5rem;
  text-align: left;
  cursor: pointer;
  list-style: none;
  transition: background-color .16s;
}
.kk-deck-aufklapp::-webkit-details-marker { display: none; }
.kk-deck-aufklapp::marker { content: ""; }
.kk-deck-aufklapp:hover { background: color-mix(in srgb, var(--terra) 6%, transparent); }
.kk-deck-aufklapp:hover .kk-deck-label,
.kk-deck-aufklapp:hover .kk-deck-aktuell { color: var(--terra-tief); }
.kk-deck-label {
  font-family: var(--schrift-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--tinte-blass);
  text-transform: uppercase;
  letter-spacing: .14em;
  transition: color .16s;
}
.kk-deck-aktuell {
  margin-left: auto;
  font-family: var(--schrift-sans);
  font-size: .95rem;
  font-weight: 600;
  color: var(--tinte);
  transition: color .16s;
}
/* Winkel aus zwei Haarlinien (wie im FAQ): zu = nach unten, offen = nach oben. */
.kk-deck-pfeil {
  flex: 0 0 auto;
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--tinte-leise);
  border-bottom: 1.5px solid var(--tinte-leise);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .22s cubic-bezier(.2,.7,.3,1);
}
.kk-deck-zeile[open] > .kk-deck-aufklapp .kk-deck-pfeil { transform: rotate(-135deg); }
.kk-deck-aufklapp:hover .kk-deck-pfeil {
  border-right-color: var(--terra-tief);
  border-bottom-color: var(--terra-tief);
}
/* Kein eigener Scrollbalken: der Baum ist so hoch, wie er ist, und die Seite
   scrollt als Ganzes. Ein Kasten mit eigener Bildlaufleiste im
   Fließtext ist ein zweiter Scroll-Bereich, den man mit dem Rad nie trifft.
   Wer die Fläche für die Lernkarte braucht, klappt das Menü über die
   Kopfzeile ganz zu. */
.kk-decks {
  display: block;
  border-top: 1px solid var(--linie-zart);
}
/* Ein Ast ist ein <details>, seine Zeile das <summary>, seine Unteräste das
   Fach darunter. Ob das Fach sichtbar ist, entscheidet allein das
   open-Attribut — hier steht bewusst KEINE display-Regel dafür. */
.kk-deck-ast { display: block; }
.kk-deck-kinder { display: block; }
/* Die Zeile: bei Ästen ein <summary>, bei Blättern ein <div>. Beide sehen und
   verhalten sich gleich; nur das <summary> klappt zusätzlich — das
   Standard-Dreieck des Browsers weicht dem eigenen Dreieck links.
   Maße und Auszeichnung wie in der früheren Fassung: baseline-Ausrichtung,
   1,4rem Dreiecksspalte, getönte Fläche für die aktive Zeile — kein Hover-Ton
   auf der ganzen Zeile, kein inset-Lineal. */
.kk-deck-knoten {
  display: flex;
  align-items: baseline;
  gap: .15rem;
  /* Einrückung nach Baumtiefe: „Alle Gebiete" (Ebene 0) steht bündig, die
     Rechtsgebiete eine Stufe ein, ihre Unterdecks zwei. */
  padding-left: calc(var(--kk-tiefe, 0) * 1.25rem);
  border-bottom: 1px solid var(--linie-zart);
  list-style: none;
}
summary.kk-deck-knoten { cursor: pointer; }
.kk-deck-knoten::-webkit-details-marker { display: none; }
.kk-deck-knoten::marker { content: ""; }
.kk-deck-knoten.is-aktiv {
  background: color-mix(in srgb, var(--terra) 9%, transparent);
}

/* Dreiecksspalte links: bei Ästen ▸/▾, bei Blättern ein gleich breiter
   Platzhalter — sonst verspringt die Einrückung. Sie ist reine Anzeige;
   geklappt wird über das <summary> der ganzen Zeile, das Ziel ist damit so
   groß wie die Zeile selbst. */
.kk-deck-toggle {
  flex: 0 0 auto;
  width: 1.4rem;
  font-family: var(--schrift-sans);
  font-size: .72rem;
  line-height: 1;
  text-align: center;
  padding: .45rem 0;
  /* Interaktiver Kleintext — --tinte-zart ist rein dekorativ, daher -leise. */
  color: var(--tinte-leise);
  transition: color .16s;
}
summary.kk-deck-knoten:hover .kk-deck-toggle { color: var(--terra-tief); }
/* Das Dreieck selbst: zu = ▸, offen = ▾. Als Zeichen, nicht als CSS-Winkel —
   so steht es auch da, wenn dieses Blatt fehlt. */
.kk-deck-winkel::before { content: "\25B8"; }
.kk-deck-ast[open] > .kk-deck-knoten .kk-deck-winkel::before { content: "\25BE"; }
/* Der Deck-Name: lernt dieses Gebiet samt Unterdecks. */
.kk-deck-name {
  flex: 1 1 auto;
  display: flex;
  align-items: baseline;
  gap: .6rem;
  text-align: left;
  font-family: var(--schrift-sans);
  font-size: .98rem;
  font-weight: 500;
  background: none;
  border: 0;
  border-radius: 0;
  padding: .45rem .2rem;
  color: var(--tinte-blass);
  cursor: pointer;
  transition: color .16s;
}
.kk-deck-name:hover { color: var(--terra-tief); }
.kk-deck-knoten.is-aktiv .kk-deck-name { color: var(--tinte); font-weight: 600; }
.kk-deck-anzahl {
  margin-left: auto;
  font-family: var(--schrift-mono);
  font-size: .78rem;
  font-weight: 500;
  color: var(--tinte-leise);
  font-variant-numeric: tabular-nums;
}
.kk-deck-knoten.is-aktiv .kk-deck-anzahl { color: var(--terra-tief); }

/* --- Probe-Modus-Banner (free) — Randbemerkung statt gefülltem Kasten --- */
.kk-probe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
  border-left: 3px solid var(--bernstein);
  padding: .15rem 0 .15rem .9rem;
  margin-bottom: 1.5rem;
  font-size: .92rem;
  color: var(--bernstein-tief);
}
.kk-probe a { margin-left: auto; font-weight: 600; }

/* --- Die Lernkarte: die große, fokussierte Fläche der Seite -----------
   Sie ist das Blatt, auf dem gearbeitet wird, und bekommt deshalb den Löwen-
   anteil des Fensters: mindestens gut die Hälfte der Fensterhöhe.
   Die Innenpolsterung war seitlich so groß (bis 3.25rem), dass der Kartentext
   gut 100px schmaler stand als der Text jeder anderen Unterseite — daher der
   Eindruck, die Seite sei schmaler. Senkrecht bleibt die Luft, waagerecht
   rückt der Text an die Textspalte der Seite heran. */
.kk-karte {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--karte);
  box-shadow: var(--schatten);
  padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.1rem, 2vw, 1.5rem);
  /* Boden, kein Sollmaß: gewachsen wird über flex (s. .kk-buehne-fuell). Der
     Boden greift nur auf niedrigen Fenstern und ist bewusst so gewählt, dass
     die Bewertungsknöpfe dort noch über der Falz stehen. */
  min-height: clamp(22rem, 58vh, 44rem);
  display: flex;
  flex-direction: column;
}
.kk-karte-meta {
  font-family: var(--schrift-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--tinte-blass);
  margin-bottom: 1.25rem;
}

/* --- Ausrichtung des Karteninhalts ------------------------------------
   Waagerecht mittig, senkrecht oben: der Inhalt beginnt am oberen Rand und
   wächst nach unten, statt in der Höhe zentriert zu werden. Auf einer
   Abfragekarte ist das die ruhigere Lösung — der Text steht beim Aufdecken
   still, anstatt nach oben zu rutschen, sobald die Rückseite dazukommt.
   Aufzählungen und Code-Blöcke bleiben linksbündig: zentrierte Listen sind
   nicht lesbar. */
.kk-inhalt {
  flex: 1 1 auto;
  text-align: center;
}
.kk-inhalt ul, .kk-inhalt ol { text-align: start; display: inline-block; }
.kk-inhalt pre { text-align: left; }
.kk-feld {
  font-family: var(--schrift-sans);
  font-size: clamp(1.25rem, 2vw, 1.45rem);
  line-height: 1.5;
  color: var(--tinte);
  /* Lange juristische Komposita (z. B. „Fortsetzungsfeststellungsklage") sonst
     über den Kartenrand auf sehr schmalen Viewports. */
  overflow-wrap: break-word;
  hyphens: auto;
}
.kk-feld b { font-weight: 700; }
.kk-feld u { text-decoration: underline; text-underline-offset: 2px; }
.kk-feld i { font-style: italic; color: var(--tinte-blass); }
.kk-vorderseite { display: block; }
/* Der Operator (Notiztyp-Label) steht als unterstrichenes Wort direkt vor dem
   Begriff IN der Vorderseite — eine Zeile, keine Überschrift, kein
   Badge, keine Farbe. Er erbt damit Größe/Stil des Felds; nur der Unterstrich
   hebt ihn ab. */

/* Die Trennlinie zwischen Vorder- und Rückseite: eine 1px-Haarlinie mit
   einer Zeile Luft darüber und darunter, in der Papierfarbe dieser Seite. */
.kk-antwort-linie {
  margin: 1em 0;
  border: none;
  height: 1px;
  background-color: var(--linie);
}
/* Aufgedeckt bleibt die Vorderseite oben stehen, darunter die Linie, darunter
   die Rückseite. Keine Überschrift „Rückseite" — die Linie ist die ganze
   Ansage, und die Vorderseite muss beim Bewerten mitlesbar bleiben. */
.kk-rueckseite { animation: kk-auf .28s cubic-bezier(.2,.7,.3,1); }
@keyframes kk-auf { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* --- Steuerleiste ---------------------------------------------------- */
.kk-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.75rem;
  align-items: center;
}
/* Nur eine Handlung im zugedeckten Zustand — „Antwort zeigen" steht allein und
   mittig unter der Karte. Seit die Taste im Knopf steht, gibt es daneben nichts
   mehr, was die Mitte verziehen könnte: ein zentriertes Flex genügt, das Raster
   mit Ausgleichsspalten ist entfallen. */
.kk-aktionen-mitte { justify-content: center; }

/* „Nicht gewusst" und „Gewusst" sind gleichwertige Selbsteinschätzungen und
   deshalb exakt gleich groß: gleiche Breite (flex-basis 0 + gleicher Anteil),
   gleiche Höhe. Ein größerer Knopf würde eine der beiden Antworten nahelegen.
   Zusammen füllen sie die volle Kartenbreite (flex-basis 100 %): die Bewertung
   ist der Zweck dieses Zustands, und breite Ziele trifft man schneller. */
.kk-bewerten {
  display: flex;
  flex: 1 1 100%;
  gap: .75rem;
}
.kk-bewerten .btn {
  /* relative: Anker für die Tastenziffer, die rechts im Knopf sitzt.
     padding-inline hält beidseitig so viel Raum frei, dass die Beschriftung
     auch beim engsten Knopf nicht unter die Ziffer läuft. */
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 3.25rem;
  padding-inline: 2.2rem;
  font-size: 1rem;
}
/* Die Tastenangabe („1", „2", „Leertaste") beschriftet die Taste, nicht den
   Knopf: leise, mono, normalgewichtig — überall gleich, damit man sie auf allen
   drei Knöpfen als dieselbe Sache liest. Nur die Platzierung unterscheidet sich,
   siehe die beiden Regeln darunter. */
.kk-btn-taste {
  font-family: var(--schrift-mono);
  font-size: .8rem;
  font-weight: 400;
  opacity: .6;
  pointer-events: none;
}
/* „Antwort zeigen": Der Knopf ist so breit wie sein Inhalt, also läuft die
   Tastenangabe im Fluss mit und der Knopf wächst um sie (Abstand aus dem
   gap: .4rem von .btn). Beschriftung und Taste sitzen zusammen mittig. */
.kk-aktionen-mitte .kk-btn-taste { margin-left: .1rem; }
/* Bewertungsknöpfe: Die beiden sind vollbreit; hier steht die Ziffer absolut am
   rechten Rand, damit die Beschriftung in der Knopfmitte bleibt und nicht durch
   die Ziffer nach links versetzt wird. */
.kk-bewerten .kk-btn-taste {
  position: absolute;
  right: .9rem;
  top: 50%;
  transform: translateY(-50%);
}

/* --- Fortschritt ----------------------------------------------------- */
.kk-fortschritt { margin-top: 1.75rem; }
.kk-balken {
  height: 5px;
  border-radius: 999px;
  background: var(--papier-tief);
  overflow: hidden;
}
/* Lernfortschritt ist Struktur, keine Handlung: Tanne füllt, Papier trägt. */
.kk-balken-fuell {
  height: 100%;
  background: var(--tanne);
  width: 0;
  transition: width .35s cubic-bezier(.2,.7,.3,1);
}
.kk-stat {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.5rem;
  margin-top: .6rem;
  font-family: var(--schrift-mono);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--tinte-blass);
}
.kk-stat b { color: var(--tinte); font-weight: 600; }
/* Nur sichtbar, solange der Server den Stand nicht bestätigt hat — ein leiser
   Vermerk in derselben Zeile, kein Warnkasten: die Abfrage läuft ja weiter. */
.kk-stat-hinweis { color: var(--tinte-blass); opacity: .75; }

/* --- Rundenabschluss: hairline-gegliedert — das eine Blatt der Seite
   bleibt die Lernkarte, der Abschluss ist kein zweites. --- */
.kk-abschluss {
  border: 0;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  background: transparent;
  padding: clamp(1.75rem, 5vw, 2.5rem) 0;
  text-align: center;
}
.kk-abschluss h2 { margin: 0 0 .75rem; }
.kk-abschluss p { color: var(--tinte-blass); margin: 0 0 1.5rem; }

/* Ladefehler = Randbemerkung: 3px-Rot-Lineal, -tief-Text, kein Kasten */
.kk-lade-fehler {
  border-left: 3px solid var(--rot);
  padding: .35rem 0 .35rem .9rem;
  color: var(--rot-tief);
  font-size: .95rem;
}

/* Mobil steht mehr Seitenkopf über der Karte (Titel und Vorspann brechen um).
   Der Boden sinkt entsprechend, damit „Nicht gewusst"/„Gewusst" auch dort ohne
   Scrollen erreichbar bleiben; gewachsen wird weiterhin über flex. */
@media (max-width: 820px) {
  .kk-karte { min-height: clamp(16rem, 40vh, 30rem); }
}

/* Auf schmalen Geräten gibt es keine Leertaste und keine 1/2 zu drücken, und
   der Platz in den vollbreiten Bewertungsknöpfen wird knapp: Tastenangabe weg,
   reservierter Raum weg, die Beschriftungen bleiben einzeilig. Die
   Tastensteuerung selbst bleibt aktiv — sie ist nur nicht mehr angeschrieben. */
@media (max-width: 560px) {
  .kk-btn-taste { display: none; }
  .kk-bewerten .btn { padding-inline: .9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .kk-rueckseite { animation: none; }
}

/* JS blendet Probe-Banner, Deck-Baum und Editor-Link per [hidden] aus;
   !important schlägt die Flex-Displays. Auf den Wrapper begrenzt. */
.kk-wrap [hidden] { display: none !important; }

/* ====================================================================== */
/* Eigener-Karten-Editor (karteikarten-editor.html)                        */
/* Eine Spalte, Inhalt zuerst: erst schreibt man die Karte, dann steht      */
/* darunter das Wenige, was optional ist. Keine zweite Spalte, kein         */
/* Fachvokabular, keine Kästen — Haarlinien gliedern.                       */
/* ====================================================================== */
/* Der Editor nutzt denselben .kk-wrap wie die Abfrage; eine eigene
   Breiten-Klasse gab es einmal, sie setzte zuletzt aber genau dieselbe
   Maximalbreite und ist deshalb aufgelöst. */

/* Abschnittstitel nüchtern (Plex Sans) — Fraunces bleibt dem H1 vorbehalten. */
.kke-abschnitt {
  font-family: var(--schrift-sans);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.25;
  letter-spacing: -.01em;
  margin: 0;
}
.kke-anzahl {
  font-family: var(--schrift-mono);
  font-size: .8rem;
  font-weight: 500;
  color: var(--tinte-leise);
  margin-left: .4rem;
}

/* --- Formular: Vorderseite und Rückseite sind die Hauptsache ---------- */
.kke-form { display: flex; flex-direction: column; gap: 1.15rem; margin-top: 1rem; }
.kke-feld { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.kke-feld > label {
  font-family: var(--schrift-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--tinte-blass);
}
.kke-optional { text-transform: none; letter-spacing: 0; color: var(--tinte-leise); }

.kke-eingabe {
  font-family: var(--schrift-sans);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tinte);
  background: var(--feld-bg);
  border: 1.5px solid var(--linie);
  border-radius: var(--radius-knopf);
  padding: .5rem .7rem;
  height: var(--hoehe-control);
  width: 100%;
}
.kke-eingabe:focus { outline: none; border-color: var(--terra); background: var(--fokus-bg); }

/* Die beiden Schreibfelder: großzügig, wachsen mit dem Text (js). */
.kke-eingabe-gross {
  height: auto;
  min-height: 6rem;
  resize: vertical;
  line-height: 1.6;
  font-size: 1.1rem;
  padding: .75rem .9rem;
  overflow: hidden;
}
.kke-hinweis { margin: -.4rem 0 0; font-size: .85rem; color: var(--tinte-leise); }
.kke-hinweis kbd {
  border: 1px solid var(--linie);
  border-radius: 4px;
  padding: 0 .3rem;
  background: var(--feld-bg);
}

/* Das Optionale steht unter dem Inhalt, nie davor. */
.kke-zusatz {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: .9rem 1.25rem;
  border-top: 1px solid var(--linie-zart);
  padding-top: 1.15rem;
}

.kke-aktionen { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: .25rem; }
.kke-fehler { color: var(--rot); font-size: .9rem; margin: .25rem 0 0; }

/* Liste: eigener Block unter dem Formular. */
#kke-liste-spalte { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--linie); }
.kke-listen-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem 1.5rem;
  margin-bottom: 1rem;
}
.kke-suche { width: min(18rem, 100%); }
.kke-leer { color: var(--tinte-blass); margin: 0; }

/* Live-Vorschau der Karte (Operator + Vorderseite) */
.kke-vorschau { margin: -.25rem 0 .25rem; }
.kke-vorschau-label {
  font-family: var(--schrift-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--tinte-blass);
  margin-bottom: .5rem;
}
/* Vorschau hairline-begrenzt statt als Kasten — das eine Blatt gehört der Abfrage. */
.kke-vorschau-karte {
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  padding: 1rem 0;
  min-height: 5rem;
  gap: .75rem;
}
.kke-vorschau-karte .kk-feld { font-size: 1.05rem; }

/* --- Karten-Liste (Werkverzeichnis-Stil, Haarlinien) ----------------- */
.kke-liste { list-style: none; margin: 0; padding: 0; }
.kke-eintrag {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 0;
  border-bottom: 1px solid var(--linie);
}
.kke-eintrag-meta {
  font-family: var(--schrift-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--tinte-blass);
  margin-bottom: .3rem;
}
.kke-eintrag-front { color: var(--tinte); line-height: 1.45; overflow-wrap: break-word; }
.kke-eintrag-front b { font-weight: 700; }
.kke-eintrag-front u { text-decoration: underline; text-underline-offset: 2px; }
.kke-eintrag-akt { display: flex; flex-direction: column; gap: .4rem; flex-shrink: 0; }

.kke-mini {
  font-family: var(--schrift-mono);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  background: none;
  border: none;
  padding: .15rem 0;
  color: var(--terra-tief);
  cursor: pointer;
  border-bottom: 1.5px solid transparent;
}
.kke-mini:hover { color: var(--terra); border-bottom-color: var(--terra); }
.kke-mini-rot { color: var(--rot); }
.kke-mini-rot:hover { color: var(--rot-tief); border-bottom-color: var(--rot-tief); }

/* Der Link zur Kartenverwaltung: HTML nutzt .kk-editor-link — beide Schreibweisen
   abdecken, damit der Link nicht ungestylt bleibt. */
.kk-editor-link,
.kke-editor-link { margin: -.5rem 0 1rem; font-size: .9rem; }