/* tb-lernkarten , nutzt die Theme-Design-Tokens (--tb-*). Dark-Mode kommt mit. */

.tblk{ max-width:740px; margin-inline:auto; }

.tblk__head{ text-align:center; margin-bottom:var(--space-5,1.25rem); }
.tblk__eyebrow{ font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--tb-primary-700,#1919C8); }
.tblk__title{ margin:.4rem 0 .6rem; }
.tblk__lead{ color:var(--tb-ink-700,#2A2A4A); max-width:60ch; margin-inline:auto; }

/* ── Steuerleiste (Thema, Gewichtung, Werkzeuge) ── */
.tblk__controls{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:.75rem 1rem; margin-bottom:.9rem; }
.tblk__ctl{ display:flex; flex-direction:column; gap:.25rem; font-size:.8rem; font-weight:600; color:var(--tb-ink-500,#5C5C7A); }
.tblk__ctl select{ font:inherit; font-weight:500; color:var(--tb-ink-900,#0E0E2A); background:var(--tb-bg-card,#fff); border:1px solid var(--tb-line,#E7E7F2); border-radius:var(--radius-md,8px); padding:.5rem .7rem; min-width:12rem; }
.tblk__ctl-actions{ display:flex; align-items:center; gap:.5rem; margin-left:auto; position:relative; }
.tblk__tool{ font:inherit; font-size:.88rem; cursor:pointer; background:transparent; border:1px solid var(--tb-line,#E7E7F2); color:var(--tb-ink-700,#2A2A4A); border-radius:999px; padding:.45rem .85rem; transition:border-color .15s ease,color .15s ease; }
.tblk__tool:hover{ border-color:var(--tb-primary-500,#5A5AD4); color:var(--tb-primary-700,#1919C8); }
.tblk__menu{ position:relative; }
.tblk__menu > summary{ list-style:none; }
.tblk__menu > summary::-webkit-details-marker{ display:none; }
.tblk__menu-pop{ position:absolute; right:0; top:calc(100% + 6px); z-index:5; display:flex; flex-direction:column; gap:.25rem; background:var(--tb-bg-card,#fff); border:1px solid var(--tb-line,#E7E7F2); border-radius:var(--radius-md,8px); box-shadow:var(--shadow-lg,0 12px 28px rgba(25,25,200,.16)); padding:.4rem; min-width:11rem; }
.tblk__menu-pop button{ font:inherit; text-align:left; background:transparent; border:0; border-radius:6px; padding:.5rem .6rem; cursor:pointer; color:var(--tb-ink-700,#2A2A4A); }
.tblk__menu-pop button:hover{ background:var(--tb-bg,#FAFAFE); color:var(--tb-primary-700,#1919C8); }

/* ── Statuszeile ── */
.tblk__bar{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1.1rem; margin-bottom:.9rem; font-size:.9rem; color:var(--tb-ink-500,#5C5C7A); }
.tblk__progress strong, .tblk__score strong{ color:var(--tb-ink-900,#0E0E2A); }
.tblk__overall{ background:color-mix(in srgb,var(--tb-primary-700,#1919C8) 10%,transparent); color:var(--tb-primary-700,#1919C8); border-radius:999px; padding:.2rem .75rem; font-weight:600; }
.tblk__opt{ display:inline-flex; align-items:center; gap:.4rem; cursor:pointer; user-select:none; }
.tblk__opt:first-of-type{ margin-left:auto; }

/* ── Karte ── */
.tblk__card{ background:var(--tb-bg-card,#fff); border:1px solid var(--tb-line,#E7E7F2); border-radius:var(--radius-xl,20px); padding:clamp(1.2rem,3vw,2rem); box-shadow:var(--shadow-lg,0 12px 28px rgba(25,25,200,.16)); }
.tblk__cat{ font-size:.74rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--tb-accent-teal,#14B8A6); margin-bottom:.5rem; }
.tblk__q{ font-size:clamp(1.2rem,2.4vw,1.6rem); font-weight:700; line-height:1.3; color:var(--tb-ink-900,#0E0E2A); }
.tblk__q:empty{ min-height:1.6em; }
.tblk__raw{ margin-top:.4rem; font-size:.82rem; color:var(--tb-ink-500,#5C5C7A); }
.tblk__raw span{ font-weight:700; }

.tblk__speak{ margin-top:.7rem; display:inline-flex; align-items:center; gap:.4rem; background:transparent; border:1px solid var(--tb-line,#E7E7F2); color:var(--tb-ink-700,#2A2A4A); border-radius:999px; padding:.35rem .8rem; font:inherit; font-size:.85rem; cursor:pointer; transition:border-color .15s ease,color .15s ease; }
.tblk__speak:hover{ border-color:var(--tb-primary-500,#5A5AD4); color:var(--tb-primary-700,#1919C8); }

.tblk__answer{ position:relative; margin-top:1.1rem; }
.tblk__answer textarea{ width:100%; font:inherit; color:var(--tb-ink-900,#0E0E2A); background:var(--tb-bg,#FAFAFE); border:1px solid var(--tb-line,#E7E7F2); border-radius:var(--radius-md,8px); padding:.75rem 3.2rem .75rem .85rem; resize:vertical; min-height:3.2rem; }
.tblk__answer textarea:focus{ outline:none; border-color:var(--tb-primary-500,#5A5AD4); box-shadow:0 0 0 3px color-mix(in srgb, var(--tb-primary-500,#5A5AD4) 20%, transparent); }
.tblk__mic{ position:absolute; right:.5rem; bottom:.5rem; width:40px; height:40px; border-radius:999px; border:1px solid var(--tb-line,#E7E7F2); background:var(--tb-bg-card,#fff); cursor:pointer; font-size:1.1rem; line-height:1; display:grid; place-items:center; transition:transform .12s ease,background .15s ease,border-color .15s ease; }
.tblk__mic:hover{ border-color:var(--tb-primary-500,#5A5AD4); }
.tblk__mic.is-live{ background:var(--tb-accent-rose,#F43F5E); border-color:transparent; color:#fff; animation:tblk-pulse 1.1s ease-in-out infinite; }
@keyframes tblk-pulse{ 0%,100%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--tb-accent-rose,#F43F5E) 55%, transparent); } 50%{ box-shadow:0 0 0 8px transparent; } }

.tblk__actions{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem; }

/* ── Ergebnis mit Prozent ── */
.tblk__result{ margin-top:1.1rem; border:1px solid var(--tb-line,#E7E7F2); border-left:4px solid var(--tb-ink-300,#A6A6BD); border-radius:var(--radius-md,8px); padding:.9rem 1.1rem; }
.tblk__result--richtig{ border-left-color:var(--tb-accent-emerald,#10B981); background:color-mix(in srgb,var(--tb-accent-emerald,#10B981) 8%,transparent); }
.tblk__result--fast{ border-left-color:var(--tb-accent-teal,#14B8A6); background:color-mix(in srgb,var(--tb-accent-teal,#14B8A6) 8%,transparent); }
.tblk__result--teilweise{ border-left-color:var(--tb-accent-amber,#F2C94C); background:color-mix(in srgb,var(--tb-accent-amber,#F2C94C) 10%,transparent); }
.tblk__result--falsch{ border-left-color:var(--tb-accent-rose,#F43F5E); background:color-mix(in srgb,var(--tb-accent-rose,#F43F5E) 8%,transparent); }
.tblk__verdict{ display:flex; align-items:center; gap:.6rem; }
.tblk__pct{ font-size:1.5rem; font-weight:800; line-height:1; color:var(--tb-ink-900,#0E0E2A); }
.tblk__verdict strong{ font-size:1.02rem; }
.tblk__verdict--richtig strong{ color:var(--tb-accent-emerald,#10B981); }
.tblk__verdict--fast strong{ color:var(--tb-accent-teal,#14B8A6); }
.tblk__verdict--teilweise strong{ color:var(--tb-accent-amber,#F2C94C); }
.tblk__verdict--falsch strong{ color:var(--tb-accent-rose,#F43F5E); }
.tblk__fb{ margin:.5rem 0 0; color:var(--tb-ink-700,#2A2A4A); }
.tblk__model{ margin:.6rem 0 0; color:var(--tb-ink-700,#2A2A4A); font-size:.96rem; }
.tblk__model span{ font-weight:700; color:var(--tb-ink-900,#0E0E2A); }
.tblk__thinking{ margin:0; color:var(--tb-ink-500,#5C5C7A); }

.tblk__nav{ margin-top:1rem; }
.tblk__note{ margin-top:.8rem; font-size:.85rem; color:var(--tb-ink-500,#5C5C7A); text-align:center; }

/* ── Bearbeiten-Panel ── */
.tblk__edit{ margin-top:1rem; background:var(--tb-bg-card,#fff); border:1px solid var(--tb-line,#E7E7F2); border-radius:var(--radius-xl,20px); padding:clamp(1.1rem,2.5vw,1.6rem); box-shadow:var(--shadow-md,0 4px 12px rgba(25,25,200,.10)); }
.tblk__edit-title{ margin:0 0 .8rem; }
.tblk__edit-field{ display:flex; flex-direction:column; gap:.3rem; margin-bottom:.8rem; font-size:.85rem; font-weight:600; color:var(--tb-ink-700,#2A2A4A); }
.tblk__edit-field textarea, .tblk__edit-field input{ font:inherit; font-weight:400; color:var(--tb-ink-900,#0E0E2A); background:var(--tb-bg,#FAFAFE); border:1px solid var(--tb-line,#E7E7F2); border-radius:var(--radius-md,8px); padding:.6rem .75rem; resize:vertical; }
.tblk__edit-field textarea:focus, .tblk__edit-field input:focus{ outline:none; border-color:var(--tb-primary-500,#5A5AD4); }
.tblk__edit-actions{ display:flex; flex-wrap:wrap; gap:.6rem; }
.tblk__edit-del{ margin-left:auto; color:var(--tb-accent-rose,#F43F5E); }
.tblk__edit-hint{ margin:.7rem 0 0; font-size:.8rem; color:var(--tb-ink-500,#5C5C7A); }

.tblk__done{ text-align:center; padding:1.4rem .5rem; }
.tblk__done-badge{ width:56px; height:56px; margin:0 auto 1rem; border-radius:999px; display:grid; place-items:center; font-size:1.6rem; font-weight:700; color:#fff; background:var(--tb-accent-emerald,#10B981); }
.tblk__done h3{ margin:0 0 .4rem; }
.tblk__done p{ margin:0 0 1.1rem; color:var(--tb-ink-700,#2A2A4A); }

.tblk__meta{ margin-top:.4rem; font-size:.78rem; color:var(--tb-ink-500,#5C5C7A); }
.tblk__info{ margin:.6rem 0 0; font-size:.92rem; color:var(--tb-ink-700,#2A2A4A); background:var(--tb-bg,#FAFAFE); border-radius:var(--radius-md,8px); padding:.55rem .7rem; }
.tblk__info span{ font-weight:700; color:var(--tb-ink-900,#0E0E2A); }
.tblk__import textarea{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.82rem; line-height:1.45; }
.tblk__import-msg{ margin:.5rem 0 0; font-size:.88rem; font-weight:600; }

.tblk__handsfree{ display:flex; flex-wrap:wrap; align-items:center; gap:.55rem .9rem; margin:0 0 1rem; }
.tblk__hf-btn{ font-size:1rem; }
.tblk__hf-btn.is-on{ background:var(--tb-accent-rose,#F43F5E); }
.tblk__hf-status{ display:inline-flex; align-items:center; gap:.5rem; font-weight:600; color:var(--tb-primary-700,#1919C8); }
.tblk__hf-status::before{ content:''; width:9px; height:9px; border-radius:999px; background:var(--tb-accent-rose,#F43F5E); animation:tblk-pulse 1.1s ease-in-out infinite; }
.tblk__hf-hint{ font-size:.82rem; color:var(--tb-ink-500,#5C5C7A); }
.tblk__settings{ flex-basis:100%; margin-top:.2rem; }
.tblk__settings > summary{ list-style:none; display:inline-flex; }
.tblk__settings > summary::-webkit-details-marker{ display:none; }
.tblk__settings-body{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:.6rem .9rem; margin-top:.7rem; }
.tblk__set{ display:flex; flex-direction:column; gap:.25rem; font-size:.8rem; font-weight:600; color:var(--tb-ink-500,#5C5C7A); }
.tblk__set select{ font:inherit; font-weight:500; color:var(--tb-ink-900,#0E0E2A); background:var(--tb-bg-card,#fff); border:1px solid var(--tb-line,#E7E7F2); border-radius:var(--radius-md,8px); padding:.45rem .6rem; }

@media (prefers-reduced-motion: reduce){ .tblk__mic.is-live, .tblk__hf-status::before{ animation:none; } }