/* ===================================================================
   Wissens-Bibliothek.

   Zwanzig Kategorien sind viel. Damit sie trotzdem in einem Blick
   erfassbar bleiben, sind sie in sechs Welten gebuendelt, und jede Welt
   hat ihre eigene Farbe. Man sucht dann nicht unter zwanzig gleichen
   Kacheln, sondern erst die Welt -- und da stehen nur noch drei bis vier.

   Die Farben sind gedeckt und tragen nur den Symbolring, nicht die
   ganze Kachel. Zwanzig farbige Flaechen waeren ein Flickenteppich.
   =================================================================== */

/* ---------- Suche und Filter ---------------------------------------------- */

.suchleiste {
  display: grid; gap: 12px; margin-bottom: 30px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, .028);
  border: 1px solid var(--rand); border-radius: var(--radius);
}
.suchleiste__feld { position: relative; display: flex; align-items: center; }
.suchleiste__lupe {
  position: absolute; left: 13px; width: 17px; height: 17px;
  fill: none; stroke: var(--text-still); stroke-width: 1.8; stroke-linecap: round;
  pointer-events: none;
}
.suchleiste__feld input {
  width: 100%; padding: 11px 14px 11px 40px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  color: var(--text); font: inherit;
}
.suchleiste__feld input:focus {
  outline: none; border-color: rgba(63, 189, 245, .6);
  box-shadow: 0 0 0 3px rgba(63, 189, 245, .14);
}
.suchleiste__feld input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.suchleiste__filter { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.suchleiste__filter .feld-schild { margin: 0; }
.suchleiste__filter select {
  padding: 8px 11px; min-width: 118px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  color: var(--text); font: inherit; font-size: .85rem;
}
.suchleiste__filter select:focus {
  outline: none; border-color: rgba(63, 189, 245, .6);
  box-shadow: 0 0 0 3px rgba(63, 189, 245, .14);
}

/* ---------- Bloecke -------------------------------------------------------- */

.block { margin-bottom: 34px; }
.block__kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
.block__titel {
  margin: 0; font-size: .78rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--akzent);
}
.block__zahl {
  min-width: 22px; padding: 1px 8px; text-align: center;
  font-size: .74rem; font-weight: 700; color: var(--text-still);
  background: rgba(255, 255, 255, .06); border-radius: 999px;
}

/* ---------- Kacheln --------------------------------------------------------- */

.kacheln {
  display: grid; gap: 11px;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
}

.kachel {
  --w: var(--akzent);
  position: relative; display: flex; align-items: flex-start; gap: 14px;
  padding: 15px 16px;
  text-decoration: none; color: var(--text);
  border: 1px solid transparent; border-radius: 13px;
  background:
    linear-gradient(#111825, #0c1320) padding-box,
    linear-gradient(150deg,
      color-mix(in srgb, var(--w) 42%, transparent),
      rgba(255, 255, 255, .06) 55%,
      color-mix(in srgb, var(--w) 16%, transparent)) border-box;
  transition: transform .16s ease, box-shadow .2s ease;
}
.kachel::after {
  content: ""; position: absolute; left: 14px; right: 14px; top: 1px; height: 1px;
  background: linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--w) 45%, transparent), transparent);
}
.kachel:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -12px color-mix(in srgb, var(--w) 85%, transparent);
}
.kachel:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--w) 32%, transparent);
}
.kachel[data-leer="ja"] { opacity: .55; }
.kachel[data-leer="ja"]:hover { opacity: 1; }

.kachel__ring {
  flex: none; display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 12px;
  background: color-mix(in srgb, var(--w) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--w) 30%, transparent);
}
.kachel__symbol {
  width: 21px; height: 21px;
  fill: none; stroke: var(--w); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.kachel__text { min-width: 0; flex: 1; }
.kachel__name { display: block; font-size: .93rem; font-weight: 650; line-height: 1.3; }
.kachel__beschreibung {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; margin-top: 3px;
  font-size: .78rem; color: var(--text-still); line-height: 1.45;
}
.kachel__zahl {
  flex: none; min-width: 26px; padding: 2px 8px; align-self: flex-start;
  text-align: center; font-size: .75rem; font-weight: 700;
  color: color-mix(in srgb, var(--w) 55%, #ffffff);
  background: color-mix(in srgb, var(--w) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--w) 26%, transparent);
  border-radius: 999px;
}

/* Eine Farbe je Welt -- die Reihenfolge folgt der Gliederung. */
.block[data-welt="tiktok"]  .kachel { --w: #3fbdf5; }
.block[data-welt="aufbau"]  .kachel { --w: #8a76ff; }
.block[data-welt="bildton"] .kachel { --w: #5fc99a; }
.block[data-welt="technik"] .kachel { --w: #e8b877; }
.block[data-welt="inhalt"]  .kachel { --w: #e88fb4; }
.block[data-welt="hilfe"]   .kachel { --w: #8e9cb0; }

/* ---------- Karte einer Anleitung -------------------------------------------- */

.karten { display: grid; gap: 10px; }

.pdf {
  padding: 15px 17px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  transition: border-color .18s ease;
}
.pdf:hover { border-color: rgba(255, 255, 255, .18); }
.pdf[data-wichtig="ja"] {
  border-color: rgba(232, 192, 125, .32);
  background: rgba(232, 192, 125, .045);
}

.pdf__kopf { display: flex; gap: 14px; align-items: flex-start; }
.pdf__ring {
  flex: none; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 11px;
  background: rgba(63, 189, 245, .1);
  border: 1px solid rgba(63, 189, 245, .24);
}
.pdf__symbol {
  width: 19px; height: 19px;
  fill: none; stroke: var(--akzent); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.pdf__mitte { min-width: 0; flex: 1; }
.pdf__titel { margin: 0; font-size: 1rem; font-weight: 650; line-height: 1.35; }
.pdf__text { margin: 4px 0 0; font-size: .86rem; color: var(--text-leise); max-width: 78ch; }
.pdf__fuss { margin: 9px 0 0; font-size: .75rem; color: var(--text-still); }

.pdf__marken { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.marke-stufe, .marke-geraet, .marke-wichtig, .marke-tag {
  padding: 3px 9px; border-radius: 999px;
  font: inherit; font-size: .71rem; font-weight: 600;
  border: 1px solid var(--rand); color: var(--text-still);
  background: transparent;
}
.marke-stufe[data-stufe="einsteiger"] {
  color: #5fc99a; border-color: rgba(95, 201, 154, .38); background: rgba(95, 201, 154, .1);
}
.marke-stufe[data-stufe="fortgeschritten"] {
  color: #e8b877; border-color: rgba(232, 184, 119, .38); background: rgba(232, 184, 119, .1);
}
.marke-stufe[data-stufe="profi"] {
  color: #e88fb4; border-color: rgba(232, 143, 180, .4); background: rgba(232, 143, 180, .1);
}
.marke-geraet { color: var(--text-leise); }
.marke-wichtig {
  color: #e8c07d; border-color: rgba(232, 192, 125, .4); background: rgba(232, 192, 125, .1);
}
.marke-tag { cursor: pointer; transition: color .16s ease, border-color .16s ease; }
.marke-tag:hover { color: var(--akzent); border-color: rgba(63, 189, 245, .42); }

.pdf__knoepfe { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 13px; }

/* ---------- Formular ---------------------------------------------------------- */

.haken { display: flex; align-items: center; gap: 9px; font-size: .87rem; cursor: pointer; }
.haken input { width: 17px; height: 17px; accent-color: var(--akzent); cursor: pointer; }

.tag-vorschlag { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.tag-knopf {
  padding: 4px 10px; cursor: pointer;
  background: transparent; border: 1px dashed var(--rand); border-radius: 999px;
  color: var(--text-still); font: inherit; font-size: .74rem;
  transition: color .16s ease, border-color .16s ease;
}
.tag-knopf:hover { color: var(--akzent); border-color: rgba(63, 189, 245, .45); border-style: solid; }

#n-datei {
  width: 100%; padding: 10px 12px;
  background: rgba(255, 255, 255, .04);
  border: 1px dashed var(--rand); border-radius: var(--radius-klein);
  color: var(--text-leise); font: inherit; font-size: .85rem; cursor: pointer;
}
#n-datei::file-selector-button {
  margin-right: 12px; padding: 6px 13px; cursor: pointer;
  background: rgba(63, 189, 245, .12);
  border: 1px solid rgba(63, 189, 245, .3); border-radius: 8px;
  color: var(--akzent); font: inherit; font-size: .8rem; font-weight: 600;
}

.leer-hinweis {
  display: grid; gap: 12px; justify-items: center;
  padding: 34px 22px; margin-bottom: 26px; text-align: center;
  color: var(--text-still); font-size: .92rem;
  border: 1px dashed var(--rand); border-radius: var(--radius);
}
.leer-hinweis p { margin: 0; max-width: 52ch; }

@media (max-width: 620px) {
  .kacheln { grid-template-columns: 1fr; }
  .suchleiste__filter { display: grid; grid-template-columns: auto 1fr; gap: 8px 10px; }
  .suchleiste__filter .knopf-still { grid-column: 1 / -1; justify-self: start; }
  .pdf__ring { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .kachel, .pdf, .marke-tag, .tag-knopf { transition: none; }
  .kachel:hover { transform: none; }
}