/* JetDieline – Seitensuche. Nur Stile für [data-site-search]; Farben kommen
   aus den Variablen der Seite (--paper, --ink, --line, --muted, --gutter). */
.site-search{
  --search-paper:var(--paper,#fff);
  --search-ink:var(--ink,#222);
  --search-line:var(--line,#ccc);
  --search-muted:var(--muted,var(--search-ink));
  --search-soft:rgba(0,0,0,.06);
  --search-shadow:rgba(0,0,0,.16);
  display:flex;align-items:center;flex-shrink:0;
}
@supports (color:color-mix(in srgb,red 50%,blue)){
  .site-search{
    --search-soft:color-mix(in srgb,var(--search-ink) 8%,var(--search-paper));
    --search-shadow:color-mix(in srgb,var(--search-ink) 20%,transparent);
  }
}
.site-search-toggle{
  display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;margin:0;
  background:transparent;color:var(--search-ink);border:1px solid var(--search-line);border-radius:8px;
  cursor:pointer;font:inherit;flex-shrink:0;
}
.site-search-toggle svg,.site-search-field svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;flex-shrink:0}
.site-search-toggle:hover,.site-search.is-open .site-search-toggle{background:var(--search-soft)}
.site-search-toggle:focus-visible,.site-search-close:focus-visible{outline:2px solid var(--search-ink);outline-offset:2px}

/* Das Feld hängt unter dem Header: Der Header ist positioniert (sticky) und
   damit Bezugsrahmen; .site-search selbst bleibt absichtlich unpositioniert. */
.site-search-panel{
  position:absolute;top:calc(100% + 8px);inset-inline-end:var(--gutter,5vw);z-index:40;
  width:min(560px,calc(100vw - 2 * var(--gutter,5vw)));max-width:calc(100vw - 24px);
  display:flex;flex-direction:column;margin:0;padding:10px;box-sizing:border-box;
  background:var(--search-paper);color:var(--search-ink);
  border:1px solid var(--search-line);border-radius:14px;box-shadow:0 18px 44px var(--search-shadow);
  text-align:start;font-family:var(--body,inherit);
}
.site-search[hidden],.site-search-panel[hidden],.site-search-results[hidden]{display:none}
.site-search-field{
  display:flex;align-items:center;gap:10px;padding-inline:12px 6px;min-height:48px;
  border:1px solid var(--search-line);border-radius:10px;background:var(--search-paper);color:var(--search-muted);
}
.site-search-field:focus-within{border-color:var(--search-ink);box-shadow:0 0 0 1px var(--search-ink)}
.site-search-input{
  flex:1 1 auto;min-width:0;width:100%;height:46px;padding:0;margin:0;border:0;outline:0;background:transparent;
  color:var(--search-ink);font:400 16px/1.3 var(--body,inherit);appearance:none;-webkit-appearance:none;
}
.site-search-panel .site-search-field .site-search-input:focus,.site-search-panel .site-search-field .site-search-input:focus-visible{outline:0;box-shadow:none}
.site-search-input::placeholder{color:var(--search-muted);opacity:1}
.site-search-input::-webkit-search-cancel-button{display:none}
.site-search-close{
  display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;margin:0;flex-shrink:0;
  background:transparent;color:var(--search-ink);border:0;border-radius:8px;cursor:pointer;font:400 20px/1 var(--body,inherit);
}
.site-search-close:hover{background:var(--search-soft)}
.site-search-status{margin:0;padding:10px 4px 2px;font:400 13px/1.4 var(--body,inherit);color:var(--search-muted);overflow-wrap:anywhere}
.site-search-status:empty{display:none}
.site-search-results{
  list-style:none;margin:8px 0 0;padding:0;max-height:min(58vh,440px);overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:2px;
}
.site-search-results li{margin:0;padding:0}
.site-search-option{
  display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;row-gap:3px;align-items:baseline;
  padding:10px 12px;border-radius:9px;color:var(--search-ink);text-decoration:none;text-align:start;
}
.site-search-option.is-active,.site-search-option:hover{background:var(--search-soft)}
.site-search-option.is-active{box-shadow:inset 0 0 0 1px var(--search-line)}
.site-search-title{font:600 15px/1.35 var(--body,inherit);overflow-wrap:anywhere;min-width:0}
.site-search-kind{
  font:500 11px/1.3 var(--body,inherit);color:var(--search-muted);border:1px solid var(--search-line);border-radius:999px;
  padding:2px 8px;white-space:nowrap;max-width:14ch;overflow:hidden;text-overflow:ellipsis;
}
.site-search-desc{
  grid-column:1 / -1;font:400 13px/1.45 var(--body,inherit);color:var(--search-muted);overflow-wrap:anywhere;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
@media (max-width:760px){
  .site-search-toggle{width:40px;height:40px}
  .site-search-panel{inset-inline:var(--gutter,6vw);width:auto;max-width:none;padding:8px}
  .site-search-results{max-height:min(60vh,420px)}
  .site-search-option{padding:10px 8px}
}
@media (max-width:350px){
  /* Der Header ist hier ohnehin voll: schmaler, randloser Knopf, der den Abstand mitnutzt. */
  .site-search-toggle{width:28px;height:40px;border-color:transparent;margin-inline:-4px}
}
@media (forced-colors:active){
  .site-search-option.is-active{outline:2px solid Highlight;outline-offset:-2px}
}