/* ===========================================================================
   startseite.css — Ergänzungen für index.php

   Zwei Aufgaben:
   1. Die drei Suchwerkzeuge tragen mehr als die Vorlage: Autovervollständigung,
      eine Statuszeile und zwei Schalter. Das wird hier gestaltet.
   2. Die Auswertungen aus der Datenbank (renderIndexBoxesCached) als
      Tabellen im Stil der Fassung - siehe Abschnitt am Ende der Datei.
   =========================================================================== */

/* ---------- Werkzeuge ---------- */
.tool-options {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  margin-top: .7rem;
}
.tool-options label {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .88rem;
  color: var(--muted);
  cursor: pointer;
  font-weight: 500;
}
.tool-options input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--blue);
  cursor: pointer;
}
.tool-options input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

.tool-form button[disabled] { opacity: .55; cursor: not-allowed; }
.form-hint.ok { color: #0b7a54; font-weight: 600; }
.form-hint.error { color: #b3261e; font-weight: 600; }

/* Sichtbarer Fokus auf allen Bedienelementen der Werkzeuge */
.tool-form input:focus-visible,
.tool-form button:focus-visible,
.tool-tabs button:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

/* Autovervollständigung von jQuery UI an das Design angleichen */
.ui-autocomplete {
  /* z-index und max-height stammen aus einem <style>-Block, der faelschlich in
     startseite.js stand und dort einen SyntaxError ausgeloest hat. Beides ist
     funktional: die Liste muss ueber den Nachbarfeldern liegen und bei vielen
     Treffern scrollen koennen. */
  z-index: 9999;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: .4rem;
  background: #fff;
  box-shadow: 0 12px 30px rgba(7, 29, 54, .18);
  padding: .3rem;
}
.ui-autocomplete .ui-menu-item-wrapper {
  padding: .5rem .65rem;
  border-radius: .25rem;
  font-size: .92rem;
}
.ui-autocomplete .ui-menu-item-wrapper.ui-state-active {
  background: var(--soft);
  border: 0;
  color: var(--navy);
}

/* ===== Kein seitliches Scrollen auf schmalen Bildschirmen =====
   Gemeldet wurde, dass einzelne Elemente wenige Pixel ueber den Viewport
   hinausragen und je nach Browser einen horizontalen Scrollbalken erzeugen.
   Welches Element es genau ist, laesst sich ohne Browser nicht ausmessen -
   Kandidaten sind der versetzte Schatten der Vertrauensleiste
   (box-shadow: 18px 18px 0) und das absolut gesetzte .badge.
   clip statt hidden: es unterbindet nur das seitliche Scrollen und laesst
   position:sticky im Kopf unangetastet. */
@media (max-width: 700px) {
  html, body { overflow-x: clip; max-width: 100%; }
  .trust-strip { box-shadow: none; }
  .hero, .section, .cta, .tool-search { max-width: 100vw; }
}

/* ===========================================================================
   Auswertungen aus der Datenbank

   Vorher standen hier fünf Bootstrap-Karten mit list-group und row-cols-2.
   Seit die Startseite kein Bootstrap mehr lädt, fiel dieses Raster in sich
   zusammen - die 20 Städte und 20 Keywords standen zusammengeschoben
   untereinander. Jetzt sind es echte Tabellen, gestaltet wie die übrigen
   Datenansichten der Seite: Kopfzeile in Versalien, Zebrastreifen, Zahlen
   rechtsbündig mit gleicher Ziffernbreite.
   =========================================================================== */
.db-tables {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px)  { .db-tables { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .db-tables { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Die beiden langen Listen dürfen über die volle Breite laufen und teilen
   sich dort zwei Spalten. */
@media (min-width: 1080px) { .db-table.db-weit { grid-column: span 3; } }
.db-table.db-weit table { columns: 2; column-gap: 2.5rem; }
@media (max-width: 719px) { .db-table.db-weit table { columns: 1; } }

.db-table {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: .5rem;
  padding: 1.15rem 1.25rem 1.25rem;
  min-width: 0;
}
.db-table h3 {
  margin: 0 0 .15rem;
  font-size: 1rem;
  letter-spacing: -.015em;
}
.db-hint {
  margin: 0 0 .8rem;
  font-size: .84rem;
  color: var(--muted);
}

.db-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}
.db-table thead th {
  text-align: left;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  padding: .3rem .5rem;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.db-table tbody td {
  padding: .32rem .5rem;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.db-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--soft) 60%, transparent); }
.db-table tbody tr:hover { background: var(--soft); }
.db-table tbody tr:last-child td { border-bottom: 0; }

.db-table th.db-n,
.db-table td.db-n {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.db-table td.db-mut { color: var(--muted); width: 1%; }
.db-table td.db-art {
  color: var(--muted);
  font-size: .78rem;
  white-space: nowrap;
  width: 1%;
}
.db-table td a { color: var(--navy); text-decoration: none; overflow-wrap: anywhere; }
.db-table td a:hover { color: #1d6af4; text-decoration: underline; }
.db-table td a:focus-visible { outline: 2px solid #1d6af4; outline-offset: 2px; }

.db-mehr { margin: .85rem 0 0; font-size: .86rem; }
.db-mehr a { color: #1d6af4; font-weight: 600; text-decoration: none; }
.db-mehr a:hover { text-decoration: underline; }

/* Einstufung der Keywords - Farbrollen der Fassung, keine Bootstrap-Ampel.
   Navy auf Mint 11,16:1, Navy auf Gelb 12,60:1. */
.db-stufe {
  display: inline-block;
  padding: .1rem .5rem;
  border-radius: 100px;
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
}
.db-top10  { background: var(--cyan);   color: var(--navy); }
.db-top50  { background: var(--yellow); color: var(--navy); }
.db-top100,
.db-top500 { background: var(--soft);   color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.db-rest   { background: transparent;   color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }