/* ============================================================
   DKSUCHE – Stylesheet
   Alle Klassen tragen den Prefix "dksuche-".
   Passen Sie die CSS-Variablen in .dksuche-wrapper an,
   um das Design auf jede Website anzupassen.
   ============================================================ */

/* ── Design-Variablen ────────────────────────────────────── */
.dksuche-wrapper {
  --dksuche-primary:      #009fe3;   /* Hauptfarbe (Button, Links, Akzente) */
  --dksuche-primary-dk:   #1987cf;   /* Dunklere Hauptfarbe (Hover) */
  --dksuche-dark:         #003366;   /* Dunkle Textfarbe (Titel, Überschriften) */
  --dksuche-accent:       #f09000;   /* Akzentfarbe (Fuzzy-Badge) */
  --dksuche-bg:           #f0f8fd;   /* Seitenhintergrund */
  --dksuche-surface:      #ffffff;   /* Kartenoberfläche */
  --dksuche-border:       #cce5f5;   /* Rahmenfarbe */
  --dksuche-text:         #003366;   /* Standardtext */
  --dksuche-muted:        #5a7a8a;   /* Gedimmter Text */
  --dksuche-light:        #e6f5fc;   /* Heller Hintergrund (Chips etc.) */
  --dksuche-mark-bg:      #009fe3;   /* Highlight-Hintergrund */
  --dksuche-mark-text:    #ffffff;   /* Highlight-Textfarbe */
  --dksuche-badge-pdf:    #e05252;   /* Badge: PDF */
  --dksuche-badge-php:    #1987cf;   /* Badge: PHP */
  --dksuche-badge-htm:    #27a06e;   /* Badge: HTML */
  --dksuche-radius:       10px;
  --dksuche-shadow:       0 4px 24px rgba(0, 82, 122, .10);
  --dksuche-shadow-hov:   0 8px 32px rgba(0, 82, 122, .18);
  --dksuche-font:         "Open Sans", Arial, sans-serif;
  --dksuche-font-title:   "Open Sans", Arial, sans-serif;
}

/* ── Wrapper ─────────────────────────────────────────────── */
.dksuche-wrapper {
  max-width: 860px;
  font-family: var(--dksuche-font);
  color: var(--dksuche-text);
  line-height: 1.65;
  padding: 2rem 0;
}

/* ── Suchheader ──────────────────────────────────────────── */
.dksuche-header {
  margin-bottom: 2rem;
}

.dksuche-title {
  font-family: var(--dksuche-font-title);
  font-size: 1.6rem;
  color: var(--dksuche-dark);
  margin-bottom: 1rem;
  letter-spacing: .01em;
}

/* ── Formular ────────────────────────────────────────────── */
.dksuche-form {
  display: flex;
  gap: 0;
  flex-wrap: nowrap;
  border: 2px solid var(--dksuche-border);
  border-radius: var(--dksuche-radius);
  overflow: hidden;
  background: var(--dksuche-surface);
  box-shadow: var(--dksuche-shadow);
  transition: border-color .2s, box-shadow .2s;
}
.dksuche-form:focus-within {
  border-color: var(--dksuche-primary);
  box-shadow: var(--dksuche-shadow-hov);
}

.dksuche-input {
  flex: 1 1 200px;
  padding: .8rem 1.1rem;
  border: none;
  font-size: 1rem;
  font-family: var(--dksuche-font);
  background: transparent;
  color: var(--dksuche-text);
  outline: none;
  min-width: 0;
}
.dksuche-input::placeholder { color: var(--dksuche-muted); }

.dksuche-btn {
  flex-shrink: 0;
  padding: .8rem 1.6rem;
  background: var(--dksuche-primary);
  color: #fff;
  border: none;
  font-size: .95rem;
  font-family: var(--dksuche-font);
  font-weight: 600;
  cursor: pointer;
  transition: background .2s;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.dksuche-btn:hover   { background: var(--dksuche-primary-dk); }
.dksuche-btn:disabled { opacity: .75; cursor: not-allowed; }
.dksuche-btn::before { content: "🔍"; font-size: .9em; }

/* Honeypot – unsichtbar halten */
.dksuche-hp { display: none !important; }

/* ── Meldungen ───────────────────────────────────────────── */
.dksuche-msg {
  margin-top: 1.2rem;
  padding: .8rem 1.1rem;
  border-radius: var(--dksuche-radius);
  font-size: .9rem;
  border-left: 4px solid transparent;
}
.dksuche-msg--error {
  background: #fdecea;
  color: #b71c1c;
  border-color: #e53935;
}
.dksuche-msg--fuzzy {
  background: #fff8e1;
  color: #7a5000;
  border-color: var(--dksuche-accent);
  margin-bottom: .8rem;
}

/* ── Ladebalken ──────────────────────────────────────────── */
#dksuche-progress {
  margin-top: 1.5rem;
  text-align: center;
}
#dksuche-progress-inner {
  height: 5px;
  background: linear-gradient(
    90deg,
    var(--dksuche-light)      0%,
    var(--dksuche-primary)    40%,
    var(--dksuche-primary-dk) 60%,
    var(--dksuche-light)      100%
  );
  background-size: 200% 100%;
  border-radius: 999px;
  animation: dksuche-slide 1.4s ease-in-out infinite;
}
@keyframes dksuche-slide {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
#dksuche-progress-label {
  margin-top: .75rem;
  font-size: .88rem;
  color: var(--dksuche-muted);
  animation: dksuche-pulse 1.4s ease-in-out infinite;
}
@keyframes dksuche-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .4; }
}

/* ── Meta-Zeile ──────────────────────────────────────────── */
.dksuche-meta {
  font-size: .88rem;
  color: var(--dksuche-muted);
  margin: 1.2rem 0 1.4rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--dksuche-border);
}
.dksuche-meta strong { color: var(--dksuche-dark); }

/* ── Ergebnisliste ───────────────────────────────────────── */
.dksuche-results { list-style: none; padding: 0; margin: 0; }

.dksuche-result {
  background: var(--dksuche-surface);
  border: 1px solid var(--dksuche-border);
  border-radius: var(--dksuche-radius);
  padding: 1.2rem 1.4rem 1.1rem;
  margin-bottom: 1rem;
  box-shadow: var(--dksuche-shadow);
  transition: border-color .2s, box-shadow .2s, transform .15s;
  position: relative;
}
.dksuche-result:hover {
  border-color: var(--dksuche-primary);
  box-shadow: var(--dksuche-shadow-hov);
  transform: translateY(-1px);
}
/* Blauer Akzentstreifen links beim Hover */
.dksuche-result::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--dksuche-primary);
  border-radius: var(--dksuche-radius) 0 0 var(--dksuche-radius);
  opacity: 0;
  transition: opacity .2s;
}
.dksuche-result:hover::before { opacity: 1; }

.dksuche-result-header {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  margin-bottom: .3rem;
  padding-right: 8rem;
}

.dksuche-result-title {
  font-family: var(--dksuche-font-title);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--dksuche-primary);
  text-decoration: none;
  transition: color .15s;
}
.dksuche-result-title:hover {
  color: var(--dksuche-dark);
  text-decoration: underline;
}

/* ── Dateitype-Badges ────────────────────────────────────── */
.dksuche-badge {
  font-size: .68rem;
  font-family: var(--dksuche-font);
  font-weight: 700;
  padding: .15rem .45rem;
  border-radius: 4px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .07em;
  flex-shrink: 0;
}
.dksuche-badge--pdf  { background: var(--dksuche-badge-pdf); }
.dksuche-badge--php  { background: var(--dksuche-badge-php); }
.dksuche-badge--html,
.dksuche-badge--htm  { background: var(--dksuche-badge-htm); }

/* ── URL-Zeile ───────────────────────────────────────────── */
.dksuche-result-url {
  font-size: .76rem;
  color: var(--dksuche-muted);
  font-family: monospace;
  margin-bottom: .5rem;
  word-break: break-all;
}

/* ── Snippet ─────────────────────────────────────────────── */
.dksuche-snippet {
  font-size: .9rem;
  color: #334d5e;
  line-height: 1.6;
}

/* ── Trefferzahl-Chip ────────────────────────────────────── */
.dksuche-count {
  position: absolute;
  top: 1rem;
  right: 1.1rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--dksuche-primary);
  background: var(--dksuche-light);
  border: 1px solid var(--dksuche-border);
  border-radius: 20px;
  padding: .2rem .65rem;
  white-space: nowrap;
}

/* ── Fuzzy-Hinweis ───────────────────────────────────────── */
.dksuche-fuzzy-hint {
  font-size: .74rem;
  color: var(--dksuche-accent);
  font-weight: 600;
  background: #fff4e0;
  border: 1px solid #ffe0a0;
  border-radius: 4px;
  padding: .1rem .4rem;
}

/* ── Highlight-Markierung ────────────────────────────────── */
mark.dksuche-mark {
  background: var(--dksuche-mark-bg);
  color: var(--dksuche-mark-text);
  border-radius: 3px;
  padding: 0 2px;
  font-weight: 600;
}

/* ── Leer-Zustand ────────────────────────────────────────── */
.dksuche-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--dksuche-muted);
  font-size: 1rem;
  background: var(--dksuche-surface);
  border: 1px solid var(--dksuche-border);
  border-radius: var(--dksuche-radius);
}
.dksuche-empty-icon {
  font-size: 2.5rem;
  display: block;
  margin-bottom: .75rem;
  opacity: .5;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 600px) {
  .dksuche-form { flex-wrap: wrap; }
  .dksuche-btn  { width: 100%; justify-content: center; }
  .dksuche-result-header { padding-right: 0; }
  .dksuche-count {
    position: static;
    display: inline-block;
    margin-bottom: .4rem;
  }
}

/* ============================================================
   HIGHLIGHT-BANNER (search_highlight.js)
   Erscheint auf Zielseiten wenn über die Suche aufgerufen.
   ============================================================ */
#dksuche-hl-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 99999;
  background: #FFD600;
  color: #000;
  font-family: var(--dksuche-font, sans-serif);
  font-size: 13px;
  padding: 6px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
#dksuche-hl-banner button {
  background: rgba(0,0,0,.15);
  border: none;
  border-radius: 4px;
  padding: 3px 8px;
  cursor: pointer;
  font-size: 12px;
  color: #000;
}
#dksuche-hl-banner button:hover { background: rgba(0,0,0,.25); }
#dksuche-hl-banner nav { display: flex; gap: 6px; align-items: center; }

mark.dksuche-hl {
  background: #FFD600 !important;
  color: #000 !important;
  border-radius: 2px;
  padding: 0 1px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.15);
}

/* ============================================================
   SUCH-PILLS
   Einsetzbar auf jeder Seite, z.B. Startseite oder Navigation.
   ============================================================ */

/* ── Äußerer Container (Label + Pills zusammen) ─────────── */
.dksuche-pills-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1rem;
}

/* ── "Oft gesucht:"-Label ────────────────────────────────── */
.dksuche-pills-label {
  font-size: .82rem;
  font-family: var(--dksuche-font, "Open Sans", Arial, sans-serif);
  color: var(--dksuche-muted, #5a7a8a);
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: .03em;
}

/* ── Pills-Wrapper (nur die klickbaren Chips) ────────────── */
.pills-wrap {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ── Einzelne Pill ───────────────────────────────────────── */
.pill {
  display: inline-block;
  padding: .3rem .85rem;
  background: var(--dksuche-light, #e6f5fc);
  color: var(--dksuche-primary, #009fe3);
  border: 1px solid var(--dksuche-border, #cce5f5);
  border-radius: 999px;
  font-size: .82rem;
  font-family: var(--dksuche-font, "Open Sans", Arial, sans-serif);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background .18s, color .18s, border-color .18s;
}
.pill:hover {
  background: var(--dksuche-primary, #009fe3);
  color: #ffffff;
  border-color: var(--dksuche-primary, #009fe3);
}