/* ==========================================================================
   Suche: Feld in der Leiste, Trefferfläche wie das Megamenü, Ergebnisseite.
   Aufbau und Verhalten: assets/js/suche.js
   ========================================================================== */

/* Treffer tragen den echten Textmarker (.honify-textmarker): Band und Schriftfarbe wie auf der Seite.
   Hier nur die Grundfarbe von <mark> zurücksetzen */
.hs-mark {
  background-color: transparent;
}

.hs-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border: 1px solid rgba(15, 117, 47, 0.18);
  border-bottom-width: 2px;
  border-radius: 7px;
  background-color: var(--honify-weiss);
  font: 600 12px/1 'Avenir Next', Avenir, -apple-system, sans-serif;
  color: var(--honify-dunkelgruen);
  letter-spacing: 0;
  text-transform: none;
}

/* Theme-Grundregeln für input/button neutralisieren */
.hs input.hs-input,
.hs input.hs-input:hover,
.hs input.hs-input:focus {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  font-family: 'Avenir Next', Avenir, -apple-system, sans-serif;
  font-weight: 500;
  color: var(--honify-dunkelgruen);
  transition: none;
}

.hs input.hs-input::placeholder {
  color: color-mix(in srgb, var(--honify-dunkelgruen) 85%, white);
  opacity: 1;
}

.hs input.hs-input::-webkit-search-cancel-button {
  display: none;
}

.hs button.hs-plain,
.hs button.hs-plain:hover,
.hs button.hs-plain:active {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-shadow: none;
  translate: none;
  cursor: pointer;
}

.hs a,
.hs a:hover {
  color: var(--honify-dunkelgruen);
  text-decoration: none;
}

/* Lupe als SVG, damit sie überall gleich sitzt */
.hs-glass {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--honify-dunkelgruen);
}

.hs-thumb {
  flex: none;
  object-fit: cover;
  background-color: var(--honify-blassgruen-0);
}

/* Pillen zum Antippen (Häufig gesucht, Filter) – auf Weiß ohne Schatten */
.hs .hs-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: 30px;
  /* wie die Spalten-Karten im Megamenü: blasse Pille, beim Hover wird sie deckend */
  background-color: color-mix(in srgb, var(--honify-blassgruen-0) 45%, transparent);
  font: 500 15px/1 'Avenir Next', Avenir, -apple-system, sans-serif;
  color: var(--honify-dunkelgruen);
  text-shadow: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.hs .hs-chip[hidden] {
  display: none;
}

.hs .hs-chip:hover {
  background-color: var(--honify-blassgruen-0);
  color: var(--honify-dunkelgruen);
}

.hs .hs-chip[aria-pressed="true"] {
  background-color: var(--honify-hellgruen);
  color: var(--honify-hellgruen-1);
  font-weight: 600;
}

.hs-count {
  font-weight: 400;
  opacity: .75;
}

@media (prefers-reduced-motion: reduce) {
  .hs *,
  .hs *::before,
  .hs *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}


/* ---------- Feld in der Leiste ---------- */


/* alle Teile der Leiste in derselben Zeile halten, das Feld legt sich darüber */
#site-header-main-inside > :is(#branding, #access, .header-search, #nav-toggle) {
  grid-row: 1;
}

/* Ränder der Pille als animierbare Längen: links und rechts laufen zeitversetzt */
@property --hsb-l {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0px;
}

@property --hsb-r {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0px;
}

#site-header-main-inside {
  position: relative;
}

/* Desktop: die Pille reicht von der späteren linken Kante bis zur Lupe. Beim Öffnen läuft die linke Seite
   von der Lupe nach links, die rechte folgt und lässt ein schmales Feld in der Mitte der Leiste zurück. */
.hsb-bar {
  --hsb-w: 600px;
  --hsb-l: calc(100% - 54px);
  --hsb-r: 0px;
  position: absolute;
  top: 50%;
  left: calc(50% - var(--hsb-w) / 2);
  right: var(--hsb-right, 17px);  /* Kreis von 54px genau auf der Lupe; suche.js misst die Lage nach */
  z-index: 3;
  display: flex;
  align-items: center;
  height: 54px;
  margin-top: -27px;
  border-radius: 30px;
  background-color: var(--honify-weiss);
  box-shadow: inset 0 0 0 1px rgba(15, 117, 47, 0.1);
  clip-path: inset(0 var(--hsb-r) 0 var(--hsb-l) round 30px);
  /* Um die Lupe herum ist die Pille durchsichtig und wird erst nach links hin deckend:
     sie taucht aus dem Icon auf und löst sich beim Schließen dort wieder auf, statt sich darüberzulegen */
  -webkit-mask-image: linear-gradient(to left, transparent 30px, #000 170px);
  mask-image: linear-gradient(to left, transparent 30px, #000 170px);
  visibility: hidden;
  /* Schließen: rechts läuft zur Lupe zurück, links zieht nach */
  transition: --hsb-r 340ms cubic-bezier(.6, 0, .2, 1), --hsb-l 340ms cubic-bezier(.6, 0, .2, 1) 130ms,
    visibility 0s linear 470ms;
}

html.hs-open .hsb-bar {
  --hsb-l: 0px;
  --hsb-r: calc(100% - var(--hsb-w));
  visibility: visible;
  transition: --hsb-l 380ms cubic-bezier(.6, 0, .2, 1), --hsb-r 420ms cubic-bezier(.6, 0, .2, 1) 170ms,
    visibility 0s;
}

.hsb-field {
  display: flex;
  flex: none;
  align-items: center;
  gap: 14px;
  width: var(--hsb-w);
  height: 100%;
  padding: 0 24px;
}

.hsb-bar .hs-input {
  font-size: 19px;
}

.hsb-x {
  display: none;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50% !important;
  color: var(--honify-dunkelgruen);
  transition: background-color var(--dur-fast) var(--ease-out) !important;
}

.hsb-x:hover {
  background-color: var(--honify-blassgruen-0) !important;
}

.hsb-x svg {
  width: 24px;
  height: 24px;
}

/* Navigation tritt zurück, solange gesucht wird */
.header-search {
  transition: opacity var(--dur-base) var(--ease-out), translate var(--dur-base) var(--ease-out);
}

/* Schließen: die Punkte kommen erst wieder, wenn die Pille sich schon zurückzieht – als lägen sie dahinter */
#access {
  transition: opacity var(--dur-slow) var(--ease-out) 240ms, translate var(--dur-slow) var(--ease-out) 240ms;
}

html.hs-open #access {
  opacity: 0;
  translate: 0 -4px;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), translate var(--dur-base) var(--ease-out);
}

/* Lupe wird zum Schließen-Kreuz und bleibt über der Pille stehen */
@media (min-width: 1200px) {
  .header-search {
    position: relative;
    z-index: 4;
  }

  .search-toggle {
    position: relative;
  }

  .search-toggle-icon {
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  }

  .search-toggle::before,
  .search-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 2.2px;
    margin: -1.1px 0 0 -12px;
    border-radius: 2px;
    background-color: currentColor;
    opacity: 0;
    transform: rotate(0) scaleX(.4);
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  }

  html.hs-open .search-toggle-icon {
    opacity: 0;
    transform: rotate(-60deg) scale(.6);
  }

  html.hs-open .search-toggle::before {
    opacity: 1;
    transform: rotate(45deg);
  }

  html.hs-open .search-toggle::after {
    opacity: 1;
    transform: rotate(-45deg);
  }
}

/* ---------- Fläche unter der Leiste (wie Megamenü) ---------- */

.hsb-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1;
  width: 85%;
  max-width: 1200px;
  height: 0;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 45px;
  background-color: var(--honify-weiss);
  box-shadow: var(--shadow-4);
  font-family: 'Avenir Next', Avenir, -apple-system, sans-serif;
  color: var(--honify-dunkelgruen);
  visibility: hidden;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-fast) var(--ease-in), transform var(--dur-fast) var(--ease-in),
    visibility 0s linear var(--dur-fast);
}

html.hs-open .hsb-panel {
  visibility: visible;
  opacity: 1;
  transform: translateY(20px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-slow) var(--ease-out), visibility 0s,
    height var(--dur-slow) var(--ease-out);
}

.hsb-inner {
  padding: 34px 40px 30px;
}

.hsb-cols {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 40px;
}

.hsb-label {
  margin: 0 0 12px 14px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .7;
}

.hsb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: 14px;
}

.hsb-none {
  margin: 0 14px;
  font-size: 16px;
  line-height: 1.5;
}

.hsb-none a {
  font-weight: 600;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

/* Seiten: Pfad, Titel, kurzer Auszug */
.hsb-page {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border-radius: 20px;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.hsb-sub {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .02em;
  color: color-mix(in srgb, var(--honify-dunkelgruen) 70%, white);
}

.hsb-title {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}

.hsb-snip {
  display: -webkit-box;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.45;
  color: var(--honify-dunkelgrau);
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

/* Blog: kompakte Zeile (Bild 112 × 70), Fläche und Hover wie die Beitragskarten im Megamenü
   (#prime_nav .menu-item-blogpost): blassgrün, beim Hover 3px höher mit Schatten */
.hsb-post {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px;
  border-radius: 24px;
  background-color: var(--honify-blassgruen-0);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.hsb-post + .hsb-post {
  margin-top: 8px;
}

.hsb-post .hs-thumb {
  width: 112px;
  height: 70px;
  border-radius: 16px;
}

.hsb-txt {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.hsb-post .hsb-title {
  display: -webkit-box;
  overflow: hidden;
  font-size: 16px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.hsb-item:hover,
.hsb-item.is-active {
  background-color: var(--honify-blassgruen-0);
}

.hsb-post:hover,
.hsb-post.is-active {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
}

.hsb-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 22px;
  padding: 18px 0 0 14px;
  border-top: 1px solid var(--honify-blassgruen-0);
}

.hsb-tip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  opacity: .75;
}

/* Pille auf Weiß, ohne Schatten */
.hs a.hsb-all {
  padding: 12px 22px;
  border-radius: 30px;
  background-color: var(--honify-hellgruen);
  color: var(--honify-hellgruen-1);
  font-weight: 600;
  transition: background-color var(--dur-fast) var(--ease-out), translate var(--dur-fast) var(--ease-out);
}

.hs a.hsb-all:is(:hover, .is-active) {
  background-color: var(--honify-hellgruen-3);
  color: var(--honify-hellgruen-1);
}

.hsb-scrim {
  display: none;
}

/* ---------- Handy: Feld füllt die Leiste, Treffer als schwebende Karten ---------- */

@media (max-width: 1199px) {
  /* Feld füllt die ganze Leiste und hat ein eigenes Kreuz. Ringsum 12px Abstand zur Leiste (87px hoch),
     so liegen die Rundungen der beiden Pillen ineinander. Die Versätze gleichen Rahmen (1px),
     Innenabstand (6px) und oberen Rand (12px) der Leiste aus. */
  .hsb-bar {
    --hsb-l: calc(100% - 60px);
    inset: -7px 5px -3px;
    -webkit-mask-image: none;
    mask-image: none;
    opacity: 0;
    height: auto;
    margin: 0;
    border-radius: 32px;
    clip-path: inset(0 var(--hsb-r) 0 var(--hsb-l) round 32px);
    transition: --hsb-l var(--dur-base) var(--ease-in), opacity var(--dur-fast) var(--ease-in) 60ms,
      visibility 0s linear var(--dur-base);
  }

  html.hs-open .hsb-bar {
    --hsb-r: 0px;
    opacity: 1;
    transition: --hsb-l var(--dur-slow) var(--ease-out), opacity var(--dur-fast) var(--ease-out), visibility 0s;
  }

  .hsb-field {
    flex: 1;
    width: auto;
    min-width: 0;
    padding: 0 10px 0 22px;
  }

  .hsb-x {
    display: grid;
  }

  html.hs-open .header-search {
    opacity: 0;
    pointer-events: none;
  }

  html.hs-open #branding,
  html.hs-open #nav-toggle {
    opacity: 0;
    pointer-events: none;
  }

  #branding,
  #nav-toggle {
    transition: opacity var(--dur-base) var(--ease-out);
  }

  .hsb-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 99;
    background-color: rgba(15, 45, 25, 0.2);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-base) var(--ease-in), visibility 0s linear var(--dur-base);
  }

  html.hs-open .hsb-scrim {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--dur-slow) var(--ease-out), visibility 0s;
  }

  html.hs-open {
    overflow: hidden;
  }

  .hsb-panel,
  html.hs-open .hsb-panel {
    left: -6px;
    width: calc(100% + 12px);
    max-height: calc(100dvh - 130px);
    height: auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 0;
    background: none;
    box-shadow: none;
    transform: none;
  }

  .hsb-inner {
    padding: 20px 6px 30px;
  }

  .hsb-cols {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .hsb-col {
    display: grid;
    gap: 8px;
  }

  /* Überschriften als kleine Glas-Pillen über der Abdunkelung */
  .hsb-label {
    justify-self: start;
    margin: 8px 0 0;
    padding: 6px 14px;
    border-radius: 20px;
    background-color: rgba(234, 252, 239, 0.85);
    font-size: 12px;
    opacity: 1;
  }

  .hsb-label:first-child {
    margin-top: 0;
  }

  .hsb-item,
  .hsb-chips,
  .hsb-none,
  .hsb-foot {
    border-radius: 26px;
    background-color: var(--honify-weiss);
    box-shadow: var(--shadow-1);
  }

  .hsb-page {
    padding: 16px 20px;
  }

  .hsb-post {
    padding: 10px 16px 10px 10px;
  }

  .hsb-post + .hsb-post {
    margin-top: 0;
  }

  .hsb-post .hs-thumb {
    width: 88px;
    height: 60px;
    border-radius: 16px;
  }

  .hsb-post:hover,
  .hsb-post.is-active {
    transform: none;
    box-shadow: var(--shadow-1);
  }

  .hsb-chips,
  .hsb-none {
    margin: 0;
    padding: 16px;
  }

  .hsb-foot {
    margin-top: 6px;
    padding: 8px;
    border-top: 0;
  }

  .hsb-tip {
    display: none;
  }

  .hs a.hsb-all {
    flex: 1;
    padding: 14px 20px;
    text-align: center;
  }

  .hsb-item:hover,
  .hsb-item.is-active {
    background-color: var(--honify-weiss);
  }

  .hsb-item:active {
    background-color: var(--honify-blassgruen-0);
  }

  /* Karten steigen nacheinander auf, wie im Mobilmenü */
  html.hs-open .hsb-col > * {
    animation: hsb-rise var(--dur-slow) var(--ease-out) both;
  }

  html.hs-open .hsb-col > :nth-child(2) { animation-delay: 30ms; }
  html.hs-open .hsb-col > :nth-child(3) { animation-delay: 60ms; }
  html.hs-open .hsb-col > :nth-child(4) { animation-delay: 90ms; }
  html.hs-open .hsb-col > :nth-child(5) { animation-delay: 120ms; }

  @keyframes hsb-rise {
    from { opacity: 0; transform: translateY(-6px); }
  }
}

/* ---------- Ergebnisseite ---------- */

.hsb-page-wrap,
.hsb-page {
  font-family: 'Avenir Next', Avenir, -apple-system, sans-serif;
  color: var(--honify-dunkelgruen);
}

section.hsb-page {
  display: block;
  padding: 30px 0 60px;
}

/* Quantico bleibt dem Branding vorbehalten: in der Suche alles in Avenir, Überschriften fett */
.hsb-page :is(h1, h2, h3, .entry-title, .entry-title a, .continue-reading-link) {
  font-family: 'Avenir Next', Avenir, -apple-system, sans-serif;
}

.hsb-page :is(h1, h2, h3, .entry-title, .entry-title a) {
  font-weight: 600;
  letter-spacing: -.01em;
}

/* Textmarker in Avenir-Höhe statt Quantico-Höhe (auch für Treffer-Markierungen in Titeln) */
.hsb-page :is(h1, h2, h3) .honify-textmarker {
  --marker-band: 1em;
}

.hsb-page .honify-brick .entry-title {
  font-size: 21px;
}

.hsb-page .continue-reading-link {
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

.hsb-eyebrow {
  margin: 0 0 10px;
  text-align: center;
}

.hsb-h1 {
  max-width: 100% !important;
  margin: 0 0 34px;
  font-size: 42px;
  text-align: center;
  text-wrap: balance;
}

.hsb-page-field {
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(640px, 100%);
  height: 64px;
  margin: 0 auto 60px;
  padding: 0 8px 0 24px;
  border-radius: 40px;
  background-color: var(--honify-weiss);
  box-shadow: var(--shadow-2);
}

.hsb-page-field .hs-input {
  font-size: 19px;
}

.hsb-page .hsb-go {
  flex: none;
  height: 48px;
  padding: 0 24px;
  font-weight: 600;
}

.hsb-h2 {
  margin: 0 0 24px;
  font-size: 28px;
}

.hsb-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.236em;
  margin-bottom: 70px;
}

.hs a.honify-card.hsb-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 26px 28px 24px;
}

.hsb-card-title {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
}

.hsb-card .hsb-snip {
  margin-top: 4px;
  -webkit-line-clamp: 3;
}

.hsb-more {
  margin-top: auto;
  padding-top: 12px;
  font-weight: 600;
}

@media (max-width: 1100px) {
  .hsb-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

@media (max-width: 700px) {
  .hsb-h1 {
    font-size: 30px;
  }

  .hsb-cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .hsb-page .hsb-go {
    display: none;
  }
}