/* TKS Website – Seitensuche (Lupe im Kopf + Suchfenster unter dem Kopf).
   Markup: partials/header (#su-btn, #su). Logik: suche.js. Farben nur aus tokens.css. */

.su-btn[aria-expanded="true"]{color:var(--red-t)}

.su{position:fixed;inset:var(--head-h) 0 0;z-index:var(--z-menu);background:var(--bg);overflow-y:auto;overscroll-behavior:contain;
  opacity:0;transition:opacity 120ms var(--ease)}
.su[hidden]{display:none}
.su.offen{opacity:1;transition-duration:180ms}
.su-panel{padding-top:var(--s-6);padding-bottom:calc(var(--s-6) * 2 + env(safe-area-inset-bottom));
  transform:translateY(-.375rem);transition:transform 180ms cubic-bezier(.23,1,.32,1)}
.su.offen .su-panel{transform:none}

/* Eingabefeld */
.su-feld{display:flex;align-items:center;gap:.75rem;min-height:3.25rem;padding:0 .5rem 0 1rem;background:var(--card);border-radius:var(--shape-field);box-shadow:var(--sh)}
.su-feld:focus-within{box-shadow:var(--sh),inset 0 0 0 .125rem var(--red)}
.su-feld>svg{width:1.125rem;height:1.125rem;flex:none;stroke:var(--mute);fill:none;stroke-width:1.7}
.su-feld input{flex:1;min-width:0;height:3.25rem;border:0;background:none;color:var(--fg);font:inherit;font-size:1.0625rem;outline:0;-webkit-appearance:none;appearance:none}
.su-feld input::placeholder{color:var(--faint);opacity:1}
.su-feld input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.su-zu{flex:none;min-width:3rem;height:2.5rem;padding:0 .5rem;border:0;background:none;color:var(--mute);font:inherit;font-size:var(--fs-small);cursor:pointer;border-radius:var(--shape-field);transition:transform 120ms ease-out}
.su-zu:hover{color:var(--fg)}
.su-zu:active{transform:scale(.97)}

.su-status{margin:.875rem .25rem 0;font-size:var(--fs-small);color:var(--mute)}
.su-status:empty{margin:0}

/* Gruppen + Treffer */
.su-gruppe{margin-top:1.5rem}
.su-gruppe:first-child{margin-top:1rem}
.su-gruppe>.kick{display:block;margin:0 .0625rem .25rem}
.su-opt{display:block;padding:.9375rem 1rem;margin-top:.375rem;background:var(--card);border-radius:var(--shape-card);box-shadow:var(--sh);color:var(--fg);text-decoration:none;
  transition:background-color 120ms ease,box-shadow 120ms ease}
.su-opt b{display:block;font-size:var(--fs-row);font-weight:var(--fw-bold);line-height:1.3;overflow-wrap:anywhere}
.su-opt span{display:block;margin-top:.3125rem;font-size:var(--fs-small);color:var(--mute);line-height:1.45;overflow-wrap:anywhere}
.su-opt.aktiv{box-shadow:var(--sh),inset .1875rem 0 0 var(--red);background:color-mix(in srgb,var(--fg) 5%,var(--card))}
@media (hover:hover) and (pointer:fine){.su-opt:hover{background:color-mix(in srgb,var(--fg) 5%,var(--card))}}
.su-opt mark{background:color-mix(in srgb,var(--red) 24%,transparent);color:inherit;border-radius:.125rem;padding:0 .0625rem}
.su-leer{margin-top:1rem;color:var(--mute)}
.su-leer a{color:var(--fg)}

body.su-offen{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .su-panel,.su.offen .su-panel{transform:none;transition:none}
}

/* Sehr schmale Handys (< 384 px): mit der Lupe sitzen drei Knöpfe neben dem Logo –
   Abstände und Knopfgröße etwas knapper, damit die Kopfzeile nicht überläuft (360 px geprüft). */
@media(max-width:23.99em){
  .top .wrap{gap:.75rem}
  .top-act{gap:.375rem}
  .top-act>.ic-btn{width:2.75rem;height:2.75rem}
}