/* Modul-Spezialoptik 470_suche_in_deinen_texten — alles Uebrige deckt assets/css/style.css ab.
   Geprueft am 2026-09-03 gegen assets/css/style.css: .datenschutz-box, .dropzone, .spinner,
   .fortschritt, .chip, .duell-*, .treffer-* existieren global NICHT und werden daher hier definiert.
   Global vorhanden und deshalb NICHT wiederholt: .info-box/.warn-box/.erfolg-box/.fehler-box,
   .card, .interactive-box, .btn/.btn-secondary, .code-block, .output, .quiz*, .tabelle-scroll,
   .tensor-shape, .input-group, .value-display. */

/* ---------- [hidden] zuverlaessig ausblenden ----------
   Noetig, weil eigene display-Regeln (flex/grid) die Browser-Vorgabe [hidden]{display:none}
   ueberschreiben wuerden — betrifft Lade-Zeile, Fortschritt und den Duell-Bereich.
   Bewusst auf den Kapitelbereich dieser Seite begrenzt. */
.kapitel-inhalt [hidden]{display:none!important}

/* ---------- Datenschutz-Box: bewusst auffaelliger als .erfolg-box (Kernversprechen der Kategorie) ---------- */
.datenschutz-box{background:#fff;border:2px solid var(--hk-gruen);border-left:8px solid var(--hk-gruen);
  border-radius:var(--hk-radius);padding:1.1rem 1.2rem;margin:1.2rem 0;box-shadow:var(--hk-schatten)}
.datenschutz-box h2{color:var(--hk-gruen-dunkel);font-size:1.25rem}

/* ---------- Eingabe: Knopfzeile, Textfeld, Dropzone ---------- */
.knopf-zeile{display:flex;flex-wrap:wrap;gap:.6rem}
.knopf-zeile .btn{margin:0}
.mini-hinweis{font-size:.88rem;color:var(--hk-text-soft);line-height:1.7;margin:0}

#eigenerText{width:100%;box-sizing:border-box;min-height:110px;padding:.6rem .7rem;
  border:1px solid var(--hk-rahmen);border-radius:8px;font-family:'Courier New',monospace;
  font-size:.9rem;line-height:1.6;resize:vertical;background:#fff;color:var(--hk-text)}
#eigenerText:focus{border-color:var(--hk-blau);outline:none;
  box-shadow:0 0 0 .2rem rgba(0,71,171,.15)}

/* Dropzone (Pflicht der Kategorie "Interaktiv") */
.dropzone{border:3px dashed var(--hk-blau);background:var(--hk-blau-hell);border-radius:var(--hk-radius);
  padding:1.4rem 1rem;margin:.8rem 0 0;text-align:center;cursor:pointer;color:var(--hk-blau);
  min-height:44px;transition:background .15s,border-color .15s,transform .08s}
.dropzone:hover,.dropzone:focus{background:#dfe9ff;outline:none}
.dropzone:focus-visible{outline:3px solid var(--hk-rot);outline-offset:2px}
.dropzone.dragover{background:#fff;border-color:var(--hk-gruen);color:var(--hk-gruen-dunkel);transform:scale(1.01)}
.dropzone-symbol{font-size:2.2rem;line-height:1.2}
.dropzone-hinweis{font-size:.85rem;color:var(--hk-text-soft);margin-top:.3rem}

/* ---------- Eintragsliste: die "Wissensdatenbank" vor dem Vektorisieren ---------- */
.zahl-pille{display:inline-block;background:var(--hk-blau);color:#fff;border-radius:999px;
  padding:.05rem .6rem;font-size:.85rem;font-family:'Courier New',monospace;vertical-align:middle}
.eintrag-liste{max-height:260px;overflow-y:auto;border:1px solid var(--hk-rahmen);border-radius:8px;
  background:#fff;-webkit-overflow-scrolling:touch}
.eintrag{display:flex;gap:.6rem;align-items:flex-start;padding:.4rem .6rem;font-size:.9rem;
  line-height:1.55;border-bottom:1px solid var(--hk-grau-hell);overflow-wrap:anywhere}
.eintrag:last-child{border-bottom:none}
.eintrag-nr{flex:0 0 auto;min-width:2ch;text-align:right;color:var(--hk-text-soft);
  font-family:'Courier New',monospace;font-size:.82rem}
.eintrag.mehr{color:var(--hk-text-soft);font-style:italic;justify-content:center}

/* ---------- Modell laden ---------- */
.lade-zeile{display:flex;align-items:center;justify-content:center;gap:.7rem;margin:.8rem 0;
  color:var(--hk-blau);font-weight:600;text-align:center}
.spinner{flex:0 0 auto;width:22px;height:22px;border:3px solid var(--hk-blau-hell);
  border-top-color:var(--hk-blau);border-radius:50%;animation:hk-dreh .8s linear infinite}
@keyframes hk-dreh{to{transform:rotate(360deg)}}
/* Nutzer mit reduzierter Bewegung: Spinner steht still, Text bleibt aussagekraeftig */
@media (prefers-reduced-motion:reduce){.spinner{animation:none}}

.trenner{border:none;border-top:1px solid var(--hk-rahmen);margin:1.2rem 0}

/* ---------- Fortschritt beim Vektorisieren ---------- */
.fortschritt{height:22px;background:var(--hk-grau-hell);border:1px solid var(--hk-rahmen);
  border-radius:999px;overflow:hidden;margin:.8rem 0 .3rem}
.fortschritt-balken{height:100%;width:0;background:linear-gradient(90deg,var(--hk-blau),var(--hk-blau-dunkel));
  transition:width .12s linear}
.fortschritt-text{font-size:.85rem;color:var(--hk-text-soft);font-family:'Courier New',monospace;
  text-align:center;margin-bottom:.5rem;overflow-wrap:anywhere}

/* ---------- Beispiel-Anfragen als Chips (Touchziel >= 44px) ---------- */
.chip-zeile{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:.4rem 0 0}
.chip-hinweis{flex:1 1 100%;font-size:.85rem;color:var(--hk-text-soft);line-height:1.6}
.chip{min-height:44px;padding:.45rem .9rem;border:1px solid var(--hk-blau);border-radius:999px;
  background:#fff;color:var(--hk-blau);font-family:inherit;font-size:.88rem;cursor:pointer;
  line-height:1.4;transition:background .12s,color .12s}
.chip:hover,.chip:focus{background:var(--hk-blau);color:#fff;outline:none}
.chip:focus-visible{outline:3px solid var(--hk-rot);outline-offset:2px}

#suchFeld{min-height:44px}

/* ---------- Das Duell: zwei Spalten, auf dem Handy untereinander ----------
   minmax(0,1fr) statt 1fr: sonst sprengt langer Text ohne Leerzeichen das Raster. */
.duell-gitter{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));
  gap:1rem;margin:1.2rem 0 0}
.duell-spalte{min-width:0;background:#fff;border:1px solid var(--hk-rahmen);
  border-radius:var(--hk-radius);padding:.9rem 1rem;box-shadow:var(--hk-schatten)}
.duell-spalte.betont{border:2px solid var(--hk-blau)}
.duell-spalte h3{margin:0 0 .2rem;color:var(--hk-blau);font-size:1.05rem}
.spalten-sub{font-size:.83rem;color:var(--hk-text-soft);margin:0 0 .8rem;line-height:1.5}

/* ---------- Ein einzelner Treffer ---------- */
.treffer{border-top:1px solid var(--hk-grau-hell);padding:.55rem 0}
.treffer:first-of-type{border-top:none}
.treffer-kopf{display:flex;align-items:center;gap:.5rem;margin-bottom:.25rem}
.rang{flex:0 0 auto;display:inline-flex;width:22px;height:22px;border-radius:50%;
  background:var(--hk-blau);color:#fff;font-size:.78rem;font-weight:700;
  align-items:center;justify-content:center}
.score{font-family:'Courier New',monospace;font-size:.82rem;color:var(--hk-text-soft);font-weight:700}
.balken{height:8px;background:var(--hk-grau-hell);border-radius:999px;overflow:hidden;margin-bottom:.35rem}
.balken-fuell{height:100%;background:linear-gradient(90deg,var(--hk-blau),var(--hk-blau-dunkel));
  border-radius:999px;transition:width .25s ease}
.treffer-text{font-size:.9rem;line-height:1.6;overflow-wrap:anywhere}
.treffer-text mark{background:var(--hk-gelb-hell);color:var(--hk-text);
  border-bottom:2px solid #f0c040;padding:0 .1rem;border-radius:2px}

.such-begriffe{font-size:.83rem;color:var(--hk-text-soft);margin:0 0 .6rem;line-height:1.9}
.such-begriffe code{font-size:.82rem}
.abstand-hinweis{font-size:.82rem;color:var(--hk-text-soft);margin:.7rem 0 0;line-height:1.55}
.leer{font-size:.9rem;color:var(--hk-text-soft);font-style:italic;margin:.3rem 0}

/* Der didaktische Knalleffekt: die Stichwortsuche findet NICHTS */
.null-treffer{background:var(--hk-rot-hell);border:1px solid var(--hk-rot);border-radius:8px;
  padding:.7rem .8rem;font-size:.9rem;line-height:1.6;color:var(--hk-rot-dunkel)}

@media (max-width:600px){
  .dropzone{padding:1.1rem .7rem}
  .eintrag-liste{max-height:200px}
  .knopf-zeile .btn{width:100%}
}