/* Bibliothek, Set, Editor, Import, Teilen, Klassen. Nur Tokens aus app.css. */
.klein { font-size: 0.8125rem; }
.zurueck { align-self: flex-start; display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 8px 0 4px; font-weight: 600; text-decoration: none; color: var(--blau-text); }
.zurueck span { font-size: 1.5rem; line-height: 1; margin-top: -2px; }
.kopf-zeile { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
.knopf-klein { min-height: 40px; padding: 0 16px; font-size: 0.9375rem; }
.abschnitt { display: flex; flex-direction: column; gap: 10px; }
.abschnitt > h2 { padding: 0 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip-akzent { color: var(--text); background: color-mix(in srgb, var(--tuerkis) 26%, var(--flaeche-fest)); }
.chip-warnung { color: var(--text); background: color-mix(in srgb, var(--warnung) 30%, var(--flaeche-fest)); }
.chip-ki { color: var(--text); background: color-mix(in srgb, var(--tuerkis) 26%, var(--flaeche-fest)); }
.chip-abstand { margin-left: 8px; }
.listenpunkt-text { display: flex; flex-direction: column; min-width: 0; }
.listenpunkt-text .listenpunkt-titel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gruppen-titel { font-size: 0.875rem; font-weight: 600; }
.feld-mehrzeilig { min-height: 96px; padding-top: 12px; padding-bottom: 12px; resize: vertical; line-height: 1.4; }
.feld-klein { min-height: 44px; width: auto; }
.meldung-hinweis { background: color-mix(in srgb, var(--warnung) 18%, var(--flaeche-fest)); border-left-color: var(--warnung); }
.knopf-gefahr-voll { background: var(--fehler); color: var(--auf-blau); box-shadow: none; }
@media (prefers-color-scheme: dark) { .knopf-gefahr-voll { color: var(--bg); } }

/* Set-Seite */
.fortschritt { display: flex; flex-direction: column; gap: 12px; }
.fortschritt-zahl { font-size: 1.125rem; }
.fortschritt-zahl strong { font-size: 2rem; letter-spacing: -0.02em; margin-right: 4px; font-variant-numeric: tabular-nums; }
.balken { height: 10px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--blau-hell) 20%, transparent); }
.balken-fuellung { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--tuerkis), var(--blau-hell)); transition: width 500ms var(--ease-aus); }
.lern-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.lern-knopf { flex-direction: column; gap: 0; min-height: 56px; }
.lern-knopf small { font-size: 0.75rem; font-weight: 500; color: var(--text-leise); }
.karten-liste { gap: 8px; }
.karten-zeile { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 56px; padding: 6px 8px 6px 16px; background: var(--flaeche); border: 1px solid var(--flaeche-rand); border-radius: var(--radius-knopf); box-shadow: var(--schatten-klein); }
.karten-zeile.offen { display: block; padding: 0; background: none; border: 0; box-shadow: none; }
.karten-text { display: flex; flex-direction: column; min-width: 0; flex: 1; text-align: left; }
.karten-knopf { background: none; border: 0; padding: 6px 0; cursor: pointer; }
.karten-vorn { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.karten-rest { font-size: 0.875rem; color: var(--text-leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stern { width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; background: none; font-size: 1.5rem; line-height: 1; color: var(--text-leise); opacity: 0.45; cursor: pointer; transition: transform var(--dauer-druck) var(--ease-aus), opacity var(--dauer-druck); }
.stern:active { transform: scale(0.85); }
.stern[aria-pressed="true"] { color: var(--warnung); opacity: 1; }

/* Blatt */
dialog.blatt { position: fixed; inset: auto 0 0 0; margin: 0 auto; width: min(100%, var(--inhalt-max)); max-width: none; max-height: 88dvh; padding: 0; border: 0; border-radius: 28px 28px 0 0; color: var(--text); background: var(--flaeche-fest); box-shadow: var(--schatten); display: flex; flex-direction: column; overflow: hidden; transform: translateY(100%); transition: transform 300ms var(--ease-aus); }
dialog.blatt:not([open]) { display: none; }
dialog.blatt.offen { transform: none; }
dialog.blatt.zieht { transition: none; }
dialog.blatt::backdrop { background: color-mix(in srgb, var(--text) 38%, transparent); }
.blatt-kopf { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 12px 8px 20px; touch-action: none; cursor: grab; }
.blatt-griff { position: absolute; top: 8px; left: 50%; width: 40px; height: 5px; margin-left: -20px; border-radius: 999px; background: var(--linie); }
.blatt-inhalt { overflow-y: auto; overscroll-behavior: contain; padding: 8px 20px calc(20px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 20px; }
.blatt-abschnitt { display: flex; flex-direction: column; gap: 10px; }
.blatt-abschnitt h3 { font-size: 1.0625rem; }
.auswahl { display: flex; flex-direction: column; }
.auswahl-zeile { display: flex; align-items: center; gap: 12px; min-height: 48px; font-weight: 500; }
.auswahl-zeile input { width: 22px; height: 22px; accent-color: var(--blau-dunkel); }

/* Segment und Schalter */
.segment { display: flex; padding: 3px; gap: 2px; border-radius: var(--radius-knopf); background: color-mix(in srgb, var(--blau-hell) 16%, transparent); }
.segment-knopf { flex: 1; min-height: 44px; padding: 0 10px; border: 0; border-radius: 13px; background: none; font-weight: 600; font-size: 0.9375rem; color: var(--text-leise); cursor: pointer; transition: background var(--dauer-druck), color var(--dauer-druck); }
.segment-knopf[aria-checked="true"], .segment-knopf[aria-selected="true"] { color: var(--blau-text); background: var(--flaeche-fest); box-shadow: var(--schatten-klein); }
.schalter { display: flex; align-items: center; gap: 12px; min-height: 48px; cursor: pointer; }
.schalter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.schalter-spur { flex: none; position: relative; width: 50px; height: 30px; border-radius: 999px; background: var(--linie); transition: background 200ms var(--ease-aus); }
.schalter-spur::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--flaeche-fest); box-shadow: var(--schatten-klein); transition: transform 240ms var(--ease-aus); }
.schalter input:checked + .schalter-spur { background: var(--blau-hell); }
.schalter input:checked + .schalter-spur::after { transform: translateX(20px); }
.schalter input:focus-visible + .schalter-spur { outline: 3px solid var(--tuerkis); outline-offset: 2px; }
.schalter input:disabled + .schalter-spur { opacity: 0.4; }
.schalter-text { display: flex; flex-direction: column; font-weight: 500; }
.schalter-text small { font-weight: 400; font-size: 0.8125rem; color: var(--text-leise); }

/* Editor */
.felder-details > summary { min-height: 44px; display: flex; align-items: center; font-weight: 600; color: var(--blau-text); cursor: pointer; }
.felder-editor { display: flex; flex-direction: column; gap: 20px; padding-top: 8px; }
.wortart { display: flex; flex-direction: column; gap: 10px; }
.feld-karte { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--linie); border-radius: var(--radius-knopf); background: color-mix(in srgb, var(--flaeche-fest) 60%, transparent); }
.feld-kopf { display: flex; align-items: center; gap: 8px; }
.feld-neu { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.feld-neu .feld:first-child { grid-column: 1 / -1; }
.karten-formular { gap: 12px; }

/* Import */
.miniaturen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.miniaturen li { position: relative; aspect-ratio: 1; border-radius: var(--radius-klein); overflow: hidden; border: 1px solid var(--flaeche-rand); }
.miniaturen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini-weg { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; border: 0; border-radius: 50%; font-size: 1.25rem; line-height: 1; color: var(--auf-blau); background: color-mix(in srgb, var(--text) 62%, transparent); cursor: pointer; }
.lesen { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.dreh { width: 36px; height: 36px; border-radius: 50%; border: 4px solid color-mix(in srgb, var(--blau-hell) 25%, transparent); border-top-color: var(--blau-hell); animation: dreh 900ms linear infinite; }
@keyframes dreh { to { transform: rotate(360deg); } }
.import-liste { gap: 12px; }
.import-karte { display: flex; flex-direction: column; gap: 12px; }
.import-kopf, .label-zeile { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.marken { display: inline-flex; gap: 6px; }
.gruppe.unsicher .feld { background: color-mix(in srgb, var(--warnung) 20%, var(--flaeche-fest)); border-color: var(--warnung); }
.gruppe.ki .feld { border-color: var(--tuerkis); }
.aktionsleiste { position: sticky; bottom: calc(var(--nav-hoehe) + 12px + env(safe-area-inset-bottom, 0px)); display: flex; z-index: 5; }
.aktionsleiste .knopf { flex: 1; box-shadow: var(--schatten); }
.ohne-navigation .aktionsleiste { bottom: 12px; }
@media (min-width: 900px) { .aktionsleiste { bottom: 16px; } }

/* Klassen */
.klasse { display: flex; flex-direction: column; gap: 12px; }
.mitglieder .zeile { padding: 8px 0; margin: 0; border-top: 1px solid var(--linie); }

/* Karteikarten */
.kk-modus #seite { overflow-x: clip; } /* weggeworfene Karten erzeugen keinen Querlauf */
.kk { display: flex; flex-direction: column; gap: 12px; min-height: calc(100dvh - var(--abstand) * 2 - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
.kk-kopf { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; }
.kk-titel { font-size: 1.0625rem; letter-spacing: -0.01em; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kk-rund { width: 44px; height: 44px; flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--flaeche-rand); border-radius: 50%; color: var(--blau-text); background: var(--flaeche); -webkit-backdrop-filter: var(--unschaerfe); backdrop-filter: var(--unschaerfe); box-shadow: var(--schatten-klein); cursor: pointer; transition: transform var(--dauer-druck) var(--ease-aus), opacity var(--dauer-druck); }
.kk-rund:active { transform: scale(0.92); }
.kk-rund[disabled] { opacity: 0.4; pointer-events: none; }
.kk-rund svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kk-leiste { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; min-height: 32px; font-size: 0.875rem; font-weight: 600; }
.kk-mitte { color: var(--text-leise); font-variant-numeric: tabular-nums; text-align: center; }
.kk-zaehler { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-variant-numeric: tabular-nums; color: var(--text); background: color-mix(in srgb, var(--warnung) 24%, var(--flaeche-fest)); }
.kk-zaehler-rechts { justify-self: end; background: color-mix(in srgb, var(--erfolg) 24%, var(--flaeche-fest)); }
.kk-zaehler strong { font-size: 1rem; }
.kk-zaehler.kk-aus { visibility: hidden; }

.kk-buehne { position: relative; flex: 1; min-height: 340px; max-height: 560px; }
.kk-karte { position: absolute; inset: 0 0 18px; perspective: 1400px; touch-action: none; cursor: grab; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; will-change: transform; }
.kk-karte.gegriffen { cursor: grabbing; }
.kk-karte.kk-dahinter { pointer-events: none; }
.kk-karte.kk-neu { animation: kk-auf 240ms var(--ease-aus); }
@keyframes kk-auf { from { opacity: 0; } }
.kk-innen { position: absolute; inset: 0; transform-style: preserve-3d; }
.kk-seite { position: absolute; inset: 0; display: flex; flex-direction: column; border-radius: var(--radius-karte); -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden; }
.kk-vorn { align-items: center; justify-content: center; gap: 12px; padding: 56px 24px 44px; text-align: center; color: var(--auf-blau); background: var(--blau-verlauf); box-shadow: var(--schatten-knopf), var(--schatten); }
.kk-hinten { transform: rotateY(180deg); padding: 56px 0 0; color: var(--text); background: var(--flaeche-fest); border: 1px solid var(--flaeche-rand); box-shadow: var(--schatten); }
.kk-wortart { position: absolute; top: 18px; left: 20px; padding: 3px 12px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; background: color-mix(in srgb, var(--auf-blau) 20%, transparent); }
.kk-text { font-size: 2.5rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.025em; overflow-wrap: anywhere; }
.kk-text.lang { font-size: 1.75rem; letter-spacing: -0.015em; }
.kk-text.sehr-lang { font-size: 1.25rem; line-height: 1.3; letter-spacing: 0; }
.kk-tipp { position: absolute; bottom: 16px; left: 0; right: 0; font-size: 0.8125rem; font-weight: 500; opacity: 0.7; }
.kk-felder { flex: 1; min-height: 0; margin: 0; padding: 0 24px 24px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; overscroll-behavior: contain; }
.kk-karte.hinten { touch-action: pan-y; } /* umgedreht: senkrecht scrollt die Rückseite, waagerecht wischt die Geste */
.kk-mehr { position: absolute; left: 0; right: 0; bottom: 0; height: 56px; border-radius: 0 0 var(--radius-karte) var(--radius-karte); background: linear-gradient(to bottom, color-mix(in srgb, var(--flaeche-fest) 0%, transparent), var(--flaeche-fest)); opacity: 0; pointer-events: none; transition: opacity 160ms ease; }
.kk-hinten.mehr .kk-mehr { opacity: 1; }
.kk-feld dt { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; font-weight: 600; color: var(--text-leise); }
.kk-feld dd { margin: 2px 0 0; font-size: 1.25rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.kk-feld:first-child dd { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; }
.kk-ki { font-size: 0.6875rem; }

.kk-farbe { position: absolute; inset: 0; display: flex; align-items: flex-start; padding: 20px; border-radius: var(--radius-karte); opacity: 0; pointer-events: none; }
.kk-farbe span { padding: 6px 14px; border: 2px solid var(--auf-blau); border-radius: var(--radius-klein); color: var(--auf-blau); font-size: 1.125rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; }
.kk-farbe-rechts { justify-content: flex-start; background: color-mix(in srgb, var(--erfolg) 78%, transparent); }
.kk-farbe-links { justify-content: flex-end; background: color-mix(in srgb, var(--warnung) 80%, transparent); }
.kk-werkzeug { position: absolute; top: 8px; right: 8px; display: flex; gap: 2px; }
.kk-werkzeug-knopf { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: none; font-size: 1.375rem; line-height: 1; color: color-mix(in srgb, var(--auf-blau) 70%, transparent); cursor: pointer; transition: transform var(--dauer-druck) var(--ease-aus), color 200ms; }
.kk-werkzeug-knopf:active { transform: scale(0.85); }
.kk-werkzeug-knopf svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kk-karte.hinten .kk-werkzeug-knopf { color: var(--text-leise); }
.kk-stern[aria-pressed="true"], .kk-karte.hinten .kk-stern[aria-pressed="true"] { color: var(--warnung); }
.kk-karte.fliegt .kk-werkzeug { visibility: hidden; }

/* Bewegung reduziert: Überblenden statt Drehen und Fliegen */
.kk-karte.blende .kk-seite { transition: opacity 180ms ease; }
.kk-karte.blende .kk-hinten { transform: none; opacity: 0; }
.kk-karte.blende.hinten .kk-hinten { opacity: 1; }
.kk-karte.blende.hinten .kk-vorn { opacity: 0; }
.kk-karte.weg-blende { opacity: 0; transition: opacity 160ms ease; }
.kk-karte.ein-blende { animation: kk-auf 180ms ease; }

.kk-steuerung { display: flex; flex-direction: column; gap: 10px; min-height: 56px; }
.kk-reihe { display: flex; align-items: center; justify-content: center; gap: 10px; }
.kk-reihe .knopf { flex: 1; }
.kk-reihe .kk-rund { width: 52px; height: 52px; }
.kk-links { background: var(--warnung); box-shadow: var(--schatten-klein); }
.kk-rechts { background: var(--erfolg); box-shadow: var(--schatten-klein); }
@media (prefers-color-scheme: dark) { .kk-links, .kk-rechts { color: var(--bg); } }
.kk-bewertung { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.kk-bew { padding: 0 6px; font-size: 0.9375rem; border-bottom: 3px solid var(--linie); }
.kk-bew-nochmal { border-bottom-color: var(--fehler); }
.kk-bew-schwer { border-bottom-color: var(--warnung); }
.kk-bew-gut { border-bottom-color: var(--erfolg); }
.kk-bew-leicht { border-bottom-color: var(--blau-hell); }
.kk-ende { position: absolute; inset: 0 0 18px; display: flex; flex-direction: column; justify-content: center; gap: 14px; text-align: center; }
.kk-ende .knopf-reihe { flex-direction: column; }
.kk-ergebnis { font-size: 1.125rem; }
.kk-ergebnis strong { font-size: 1.75rem; font-variant-numeric: tabular-nums; }
.kk-tasten { display: none; text-align: center; }
@media (hover: hover) and (pointer: fine) {
  .kk-tasten { display: block; }
  .kk-rund:hover { box-shadow: var(--schatten); }
}

@media (hover: hover) and (pointer: fine) {
  .segment-knopf:hover { color: var(--blau-text); }
  .stern:hover { opacity: 0.8; }
}
@media (prefers-reduced-motion: reduce) {
  dialog.blatt { transition: opacity 150ms; transform: none; opacity: 0; }
  dialog.blatt.offen { opacity: 1; }
  .dreh { animation-duration: 3s !important; }
  .kk-karte.blende .kk-seite, .kk-karte.weg-blende { transition-duration: 180ms !important; }
  .kk-karte.ein-blende, .kk-karte.kk-neu { animation-duration: 180ms !important; }
}