/* ═══════════════════════════════════════════════════════════════════════════
   vc-startkarte.css — Startseite: Suchkarte + Suchkopf der Such-Ansicht
   BETREIBER-AUFTRAG 17.09.2026 (zwei Bilder). NUR Optik — kein Feld, keine
   Verdrahtung, keine Suche geändert. Zurück: <link> in index.html entfernen.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Kategorien erst zeigen, wenn der AKTUELLE Stand gebaut ist ──────────
   „nicht nach der Reihe beim Laden anzeigen, sondern alles sofort — nichts
    von der Vergangenheit; wird eine Kategorie entfernt, sofort weg, kommt eine
    dazu, sofort da."
   GEMESSEN vorher (kopfloses Chrome): Reiter erst 9 (inkl. einer längst
   entfernten Kategorie aus dem alten Zwischenspeicher vc_dyncats_v1), nach
   ~300–550 ms 21; Kacheln 8 → 20 und dabei umsortiert.
   JETZT: index.html baut Reiter + Kacheln EINMAL aus der frischen Abfrage und
   setzt dann html.vcstk-bereit. Bis dahin ist der Platz reserviert (2 Reihen,
   kein Springen) und unsichtbar. Notausgang: fällt das Skript aus, erscheint
   alles nach 3,5 s trotzdem (Animation auf visibility). */
html:not(.vcstk-bereit) #scTabs,
html:not(.vcstk-bereit) #catGrid{
  visibility:hidden;
  animation:vcstkZeigen 0s linear 3.5s forwards;
}
html:not(.vcstk-bereit) #scTabs{min-height:79px}
@keyframes vcstkZeigen{to{visibility:visible}}

/* ── 2. Reiter: höchstens ZWEI Reihen, danach „…" (wie Fahrzeuge) ────────── */
#scTabs>.sc-tab[data-vcstk-weg]{display:none!important}
#scTabs>.vcstk-mehr{color:var(--blue);font-weight:800}
#scTabs>.vcstk-mehr:hover{color:var(--blue)}
/* die Punkte größer, ohne die Reihe höher zu machen (Zeilenhöhe 0) */
#scTabs>.vcstk-mehr .vcstk-punkte{display:inline-block;font-size:1.3rem;line-height:0;letter-spacing:2px;transform:translateY(-.12em)}
/* gewählte Kategorie aus dem Raster: sieht aus wie ein aktiver Reiter */
#scTabs>.vcstk-mehr.vcstk-gewaehlt{font-weight:600;border-bottom-color:var(--blue)}

/* ── 3. Auswahl-Liste statt Suchleiste ─────────────────────────────────────
   Runde 2 (17.09.2026): „in der gleichen Größe wie bei der Suchleiste die Wörter,
   in einer Linie, nicht rasterförmig — einfach länglich aufgezählt."
   Die Einträge SIND .sc-tab (Schrift/Farbe/Abstand/Unterstreichung wie die Reiter)
   und fließen in Zeilen wie die Reiterleiste; zuletzt „Zurück" in grauer Schrift.
   Der Kasten behält Breite UND Höhe: der normale Inhalt bleibt unsichtbar im Fluss,
   die Liste liegt deckungsgleich darüber.
   ⚠️ Nicht display:none — .hero ist eine zentrierende Flex-Spalte, der Kasten
      wäre sonst geschrumpft (gemessen 882 statt 1060 px). Braucht die Liste mehr
      Höhe (schmale Fenster), gibt vc-startkarte.js dem Kasten eine Mindesthöhe. */
.searchcard>.vcstk-raster{display:none}
.searchcard.vcstk-offen>:not(.vcstk-raster),
.searchcard.vcstk-offen>:not(.vcstk-raster) *{visibility:hidden!important}
.searchcard.vcstk-offen>.vcstk-raster{
  display:flex;flex-wrap:wrap;align-content:flex-start;gap:.1rem;
  position:absolute;top:0;right:0;bottom:0;left:0;padding:inherit;box-sizing:border-box;z-index:2;
}
.vcstk-raster>.vcstk-wort{margin-bottom:0}
.vcstk-raster>.vcstk-zurueck{color:var(--tmut)}
.vcstk-raster>.vcstk-zurueck:hover{color:var(--text)}
.vcstk-raster>.vcstk-zurueck svg{width:15px;height:15px;flex:none}
.vcstk-raster>.vcstk-wort:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}

/* ── 4. Such-Ansicht: Kopf wie auf den Kategorieseiten (Bild 2) ────────────
   „so wie im Bild 2 mit der Perlenform, und nicht so ein blasses Schwarz"
   GEMESSEN vorher: Kopf var(--card) = dunkel #1B1B20 / hell #FFF + Linie,
   Suchleiste Rundung 11 px, 760 px. Kategorieseiten (vc-suchkopf.js, 10./16.09.):
   Kopf in Seitenfarbe ohne Linie, Leiste Perlenform mittig, 920 px.
   Das Logo bleibt stehen — es ist auf der Startseite der Weg zurück aus der
   Suche (Zuhörer in index.html); es rückt nur an den Rand, damit die Leiste
   genau mittig sitzt. */
html body #vcFsHeader{background-color:inherit!important;background-image:none!important;border-bottom-color:transparent!important;box-shadow:none!important}
#vcFsHeader .fs-in{position:relative;justify-content:center;padding-left:calc(1.75rem + 120px);padding-right:calc(1.75rem + 120px)}
#vcFsHeader .fs-logo{position:absolute;left:1.75rem;top:50%;transform:translateY(-50%)}
#vcFsHeader .fs-searchwrap{flex:1 1 auto;max-width:920px;margin:0 auto}
#vcFsHeader .fs-searchbar{border-radius:999px!important;padding:.28rem .9rem .28rem 1.15rem!important;background:var(--off)!important;border:1px solid var(--bord)!important}
html[data-theme="dark"] body #vcFsHeader .fs-searchbar{background:#0f0f12!important;border-color:#28282e!important}
@media(max-width:640px){
  #vcFsHeader .fs-in{padding-left:calc(1rem + 96px);padding-right:1rem}
  #vcFsHeader .fs-logo{left:1rem}
  #vcFsHeader .fs-searchwrap{max-width:none}
}