/* hoods.css — die Suche nach dem eigenen Ort.

   Liegt ueber dem Menue und nicht darin: das Menue ist schon lang genug, und
   die Hood-Suche ist ein eigener Vorgang mit eigenem Warten. */

.hood-auf {
  display:block; width:100%; margin-top:10px;
  font-family:inherit; font-size:13px; font-weight:700; cursor:pointer;
  background:rgba(255,138,30,.12); color:#ff8a1e;
  border:1px solid rgba(255,138,30,.45); border-radius:9px; padding:11px 14px;
}
.hood-auf:hover { background:rgba(255,138,30,.2); }

.hood {
  position:fixed; inset:0; z-index:60;
  display:flex; align-items:flex-start; justify-content:center;
  background:rgba(4,8,14,.82); backdrop-filter:blur(3px);
  overflow:auto; padding:24px 14px;
}
.hood[hidden] { display:none; }

/* flex-start plus margin:auto, NICHT align-items:center: zentriert schneidet
   bei Ueberlaenge oben ab, und der abgeschnittene Teil ist nicht scrollbar. */
.hood-tafel {
  margin:auto; width:min(560px, 100%);
  background:#141a22; border:1px solid #2a3542; border-radius:14px;
  box-shadow:0 24px 70px rgba(0,0,0,.6);
  padding:16px 18px 20px; color:#e6ecf5;
}
.hood-tafel header { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.hood-tafel header b { font-size:15px; flex:1 1 auto; }
.hood-zu {
  background:none; border:0; color:#8a97a8; font-size:16px; cursor:pointer;
  font-family:inherit; padding:2px 6px;
}
.hood-zu:hover { color:#fff; }

.hood-vor { margin:0 0 12px; font-size:12.5px; line-height:1.65; color:#b6c2d2; }
.hood-klein { margin:8px 0 0; font-size:11px; line-height:1.6; color:#8a97a8; }
.hood-fehler { margin:8px 0 0; font-size:12.5px; line-height:1.6; color:#ff9aa2; }
.hood-gut { margin:8px 0 0; font-size:12.5px; line-height:1.6; color:#7ee08a; }
.hood-leer, .hood-laedt { margin:12px 0; font-size:12.5px; color:#8a97a8; }

.hood-suche { display:flex; gap:8px; }
.hood-feld {
  flex:1 1 auto; min-width:0; font-family:inherit; font-size:14px;
  background:#0d1219; color:#e6ecf5; border:1px solid #2a3542;
  border-radius:9px; padding:11px 13px;
}
.hood-feld:focus { outline:none; border-color:#ff8a1e; }
.hood-los {
  font-family:inherit; font-size:13px; font-weight:800; cursor:pointer;
  background:#ff8a1e; color:#1a1005; border:0; border-radius:9px; padding:11px 18px;
}
.hood-los.gross { width:100%; margin-top:10px; padding:13px; font-size:14px; }

.hood-inhalt h3 {
  margin:16px 0 8px; font-size:10px; letter-spacing:2px; text-transform:uppercase; color:#5fb0ff;
}
.hood-inhalt h3 span { color:#8a97a8; }

.hood-liste { display:flex; flex-direction:column; gap:6px; }
.hood-karte {
  display:flex; flex-direction:column; gap:2px; text-align:left; cursor:pointer;
  font-family:inherit; background:#0d1219; color:#e6ecf5;
  border:1px solid #2a3542; border-radius:10px; padding:10px 12px;
}
.hood-karte:hover { border-color:#ff8a1e; background:#131a24; }
.hood-karte b { font-size:13.5px; }
.hood-karte i { font-style:normal; font-size:11px; color:#8a97a8;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hood-karte u { text-decoration:none; font-size:10.5px; color:#6f7d8f; }
.hood-karte u.da { color:#7ee08a; }

.hood-warte, .hood-da { margin-top:14px; }
.hood-balken { height:4px; border-radius:2px; background:#22303d; overflow:hidden; margin:10px 0 8px; }
.hood-balken i {
  display:block; height:100%; width:36%; border-radius:2px; background:#ff8a1e;
  animation:hoodlauf 1.5s ease-in-out infinite;
}
@keyframes hoodlauf { 0%{margin-left:-36%} 100%{margin-left:100%} }
.hood-eta { margin:0; font-size:12.5px; line-height:1.6; color:#b6c2d2; }
.hood-eta b { color:#fff; }
.hood-melden {
  margin-top:12px; width:100%; font-family:inherit; font-size:12.5px; font-weight:700;
  cursor:pointer; background:rgba(95,176,255,.14); color:#5fb0ff;
  border:1px solid rgba(95,176,255,.45); border-radius:9px; padding:10px;
}
.hood-melden:hover { background:rgba(95,176,255,.24); }

@media (prefers-reduced-motion: reduce) { .hood-balken i { animation:none; width:100%; } }