/* =====================================================================
   CARCHECK Berlin – Website-Suche (Lupe im Kopfbereich)
   Datei: /suche/suche.css
   Nutzt die Farben aus base.css (var(--…)), mit Ersatzwerten.
   ===================================================================== */

/* ---------- Lupe im Kopfbereich ---------- */
.cc-sbtn{
  display:inline-grid;place-items:center;flex:none;
  width:50px;height:50px;margin:0 -.2rem 0 .25rem;padding:0;
  border:0;border-radius:50%;background:none;color:inherit;
  cursor:pointer;text-decoration:none;-webkit-tap-highlight-color:transparent;
}
.cc-sbtn .cc-lupe{width:48px;height:48px}
.cc-lupe{display:block;overflow:visible;filter:drop-shadow(0 1.5px 1.5px rgba(10,36,64,.28))}
.cc-lupe__body{transform-origin:26px 26px;transition:transform .45s cubic-bezier(.3,1.5,.5,1)}
.cc-lupe__glint{transform:translateX(-46px)}
.cc-lupe__lamp{fill:#BFE9FF;transition:fill .25s}
.cc-lupe__halo{fill:#7FD3FF;opacity:0;transition:opacity .25s}
.cc-lupe__spark{transform-box:fill-box;transform-origin:center;transform:scale(.75);opacity:.85}

.cc-sbtn:hover .cc-lupe__body,
.cc-sbtn:focus-visible .cc-lupe__body{transform:rotate(-12deg) scale(1.05)}
.cc-sbtn:hover .cc-lupe__glint,
.cc-sbtn:focus-visible .cc-lupe__glint,
.cc-lupe.is-scan .cc-lupe__glint{animation:cc-glint .8s cubic-bezier(.4,0,.2,1)}
.cc-sbtn:hover .cc-lupe__lamp,.cc-sbtn:focus-visible .cc-lupe__lamp{fill:#fff}
.cc-sbtn:hover .cc-lupe__halo,.cc-sbtn:focus-visible .cc-lupe__halo{opacity:.55}
.cc-sbtn:hover .cc-lupe__spark,.cc-sbtn:focus-visible .cc-lupe__spark{animation:cc-spark .8s ease-out}
.cc-sbtn:focus-visible{outline:3px solid var(--focus,#1D6FB8);outline-offset:1px}

@keyframes cc-glint{from{transform:translateX(-46px)}to{transform:translateX(46px)}}
@keyframes cc-spark{0%{transform:scale(.75) rotate(0)}45%{transform:scale(1.45) rotate(45deg);opacity:1}100%{transform:scale(.75) rotate(90deg)}}

/* ---------- Platz im Kopfbereich (WhatsApp-Button bleibt unverändert) ---------- */
.site-header__bar > .cc-sbtn{width:46px;height:46px;margin:0 -.3rem 0 0}
.site-header__bar > .cc-sbtn .cc-lupe{width:46px;height:46px}
.site-header__bar > .cc-sbtn + .header-wa{margin-left:0}
@media (max-width:1179px){
  .site-header__bar > .cc-sbtn{margin-left:auto}
}
@media (max-width:520px){
  .site-header__bar{gap:.5rem}
  .site-header__bar > .brand{flex:0 1 179px;min-width:100px}
  .site-header__bar > .brand picture{display:block;width:100%}
  .site-header__bar > .brand img{width:100%;height:auto;max-height:60px}
  .site-header__bar > .cc-sbtn{width:44px;height:44px;margin-right:-.1rem}
  .site-header__bar > .cc-sbtn .cc-lupe{width:44px;height:44px}
  .site-header__bar > .header-wa,.site-header__bar > .nav-toggle{flex:none}
}
/* Seiten mit der schlichten Kopfzeile (.kopf) */
.kopf nav .cc-sbtn{width:44px;height:44px;margin:0 -.4rem}
.kopf nav .cc-sbtn .cc-lupe{width:44px;height:44px}
@media (max-width:420px){.kopf .wrap{gap:8px}.kopf nav{gap:6px}}
@media (max-width:350px){.kopf .wrap{padding-left:12px;padding-right:12px}.kopf .marke b{font-size:1.05rem}.kopf .marke span{font-size:.66rem}.kopf nav .cc-sbtn,.kopf nav .cc-sbtn .cc-lupe{width:40px;height:40px}}

@media (prefers-color-scheme:dark){
  .cc-lupe{filter:drop-shadow(0 0 5px rgba(3,163,250,.6))}
}

/* ---------- Such-Fenster ---------- */
html.cc-search-open{overflow:hidden}
.cc-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.cc-search{
  position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;
  margin:0;padding:clamp(.75rem,7vh,5rem) var(--gutter,1rem) 1rem;
  border:0;background:transparent;color:var(--text,#142433);overflow:hidden;
}
.cc-search[open]{display:flex;justify-content:center;align-items:flex-start}
.cc-search::backdrop{background:rgba(10,36,64,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.cc-search__panel{
  display:flex;flex-direction:column;width:min(100%,46rem);max-height:100%;
  background:var(--surface,#fff);border:1px solid var(--line,#D6E0E9);border-radius:var(--r-l,22px);
  box-shadow:0 24px 60px rgba(5,20,40,.35);overflow:hidden;
  animation:cc-in .24s cubic-bezier(.2,.8,.2,1);
}
@keyframes cc-in{from{opacity:0;transform:translateY(-10px) scale(.985)}}

/* Suchzeile auf Blaupausen-Raster */
.cc-search__bar{
  display:flex;align-items:center;gap:.75rem;margin:0;padding:.85rem 1rem .85rem .85rem;
  background-color:var(--blau-800,#123F6B);
  background-image:
    linear-gradient(rgba(141,185,227,.13) 1px,transparent 1px),
    linear-gradient(90deg,rgba(141,185,227,.13) 1px,transparent 1px);
  background-size:18px 18px;background-position:-1px -1px;
  color:#fff;
}
.cc-search__bar .cc-lupe{flex:none;width:52px;height:52px;filter:drop-shadow(0 0 6px rgba(3,163,250,.45))}
.cc-search__input{
  flex:1;min-width:0;height:3.1rem;padding:0 .9rem;
  border:1.5px solid rgba(255,255,255,.35);border-radius:12px;
  background:rgba(5,22,42,.45);color:#fff;caret-color:var(--signal,#FF6B1F);
  font:600 1.3rem/1.2 var(--font-body,system-ui,sans-serif);
  -webkit-appearance:none;appearance:none;
}
.cc-search__input::placeholder{color:rgba(225,236,247,.72);font-weight:400}
.cc-search__input:focus{outline:none;border-color:#03A3FA;box-shadow:0 0 0 3px rgba(3,163,250,.35)}
.cc-search__input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.cc-search__clear,.cc-search__close{
  flex:none;display:inline-flex;align-items:center;justify-content:center;gap:.35rem;
  height:2.6rem;min-width:2.6rem;padding:0 .7rem;border:1.5px solid rgba(255,255,255,.35);border-radius:10px;
  background:transparent;color:#fff;font:600 .95rem/1 var(--font-body,system-ui,sans-serif);cursor:pointer;
}
.cc-search__clear{padding:0;border-color:transparent}
.cc-search__clear[hidden]{display:none}
.cc-search__clear:hover,.cc-search__close:hover{background:rgba(255,255,255,.12)}
.cc-search__clear svg,.cc-search__close svg{width:1.15rem;height:1.15rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.cc-search__close kbd{font:inherit}
.cc-search__bar :focus-visible{outline-color:#fff}

.cc-search__body{flex:1;overflow:auto;overscroll-behavior:contain;padding:.5rem 0 .75rem}
.cc-search__status{margin:.6rem 1.25rem .35rem;color:var(--muted,#475A6C);font-size:.95rem}
.cc-search__status:empty{display:none}
.cc-search__status b{color:var(--text,#142433)}

/* Trefferliste (auch auf der Ergebnisseite) */
.cc-search__list,.cc-sres__list{list-style:none;margin:0;padding:0}
.cc-hit{margin:0}
.cc-hit__link{
  display:block;padding:.85rem 1.25rem .9rem 1.4rem;border-left:4px solid transparent;
  color:var(--text,#142433);text-decoration:none;
}
.cc-hit + .cc-hit .cc-hit__link{border-top:1px solid var(--line,#D6E0E9)}
.cc-hit.is-active .cc-hit__link,.cc-hit__link:hover{background:var(--blau-50,#F0F6FC);border-left-color:var(--signal,#FF6B1F)}
.cc-hit__cat{
  display:inline-block;margin-bottom:.3rem;padding:.12rem .55rem;border-radius:999px;
  background:var(--blau-100,#E3EEF8);color:var(--blau-800,#123F6B);font-size:.8rem;font-weight:700;line-height:1.35;
}
.cc-hit__title{display:block;font:700 1.28rem/1.15 var(--font-display,"Arial Narrow",sans-serif);color:var(--text,#142433)}
.cc-hit__text{display:block;margin-top:.3rem;color:var(--muted,#475A6C);font-size:.98rem;line-height:1.5}
.cc-hit mark,.cc-sres mark{
  background:rgba(255,107,31,.2);color:inherit;border-radius:2px;
  box-shadow:inset 0 -2px 0 var(--signal,#FF6B1F);padding:0 .06em;
}
@media (prefers-color-scheme:dark){
  .cc-hit__cat{background:var(--surface-2,#1A3148);color:#BFD8F0}
  .cc-hit mark,.cc-sres mark{background:rgba(255,107,31,.3)}
}

/* Startzustand und leere Ergebnisse */
.cc-search__start{padding:.4rem 1.25rem .5rem}
.cc-search__start[hidden]{display:none}
.cc-search__h{margin:.6rem 0 .65rem;font:700 1.05rem/1.2 var(--font-display,"Arial Narrow",sans-serif);color:var(--muted,#475A6C)}
.cc-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;list-style:none}
.cc-chip{
  display:inline-flex;align-items:center;min-height:2.5rem;padding:.4rem .95rem;
  border:1.5px solid var(--line-strong,#B4C3D0);border-radius:999px;background:var(--surface,#fff);
  color:var(--text,#142433);font:600 1rem/1.2 var(--font-body,system-ui,sans-serif);text-decoration:none;cursor:pointer;
}
.cc-chip:hover{border-color:var(--blau-600,#1D6FB8);color:var(--link,#17609F)}
.cc-search__h--gap{margin-top:1.4rem}
.cc-search__tip{margin:1rem 0 .2rem;color:var(--muted,#475A6C);font-size:.95rem}

.cc-none{padding:.25rem 1.25rem 1rem}
.cc-none p{margin:.4rem 0 .9rem}
.cc-contact{display:flex;flex-wrap:wrap;gap:.6rem}
.cc-contact a{
  display:inline-flex;align-items:center;gap:.45rem;min-height:2.9rem;padding:.55rem 1.05rem;border-radius:10px;
  font:700 1.08rem/1 var(--font-display,"Arial Narrow",sans-serif);text-decoration:none;
}
.cc-contact__call{background:var(--signal,#FF6B1F);color:var(--ink-on-signal,#10202F)}
.cc-contact__call:hover{background:var(--signal-hover,#FF8442)}
.cc-contact__wa{background:#0C8540;color:#fff}
.cc-contact__wa:hover{background:#0E9146}

.cc-search__foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem;
  padding:.65rem 1.25rem;border-top:1px solid var(--line,#D6E0E9);background:var(--surface-2,#E9EFF5);
  color:var(--muted,#475A6C);font-size:.88rem;
}
.cc-search__keys{display:flex;flex-wrap:wrap;gap:.9rem}
.cc-search__foot kbd{
  display:inline-block;min-width:1.5em;margin-right:.2rem;padding:.05rem .35rem;border:1px solid var(--line-strong,#B4C3D0);
  border-bottom-width:2px;border-radius:5px;background:var(--surface,#fff);color:var(--text,#142433);
  font:600 .8rem/1.3 var(--font-body,system-ui,sans-serif);text-align:center;
}
.cc-search__foot a{color:var(--link,#17609F);font-weight:600}

@media (max-width:640px){
  .cc-search{padding:0}
  .cc-search__panel{width:100%;height:100%;max-height:none;border:0;border-radius:0;animation-name:cc-in-m}
  .cc-search__bar{gap:.5rem;padding:.7rem .7rem .7rem .55rem;padding-top:calc(.7rem + env(safe-area-inset-top,0px))}
  .cc-search__bar .cc-lupe{width:38px;height:38px}
  .cc-search__input{height:2.9rem;font-size:1.15rem}
  .cc-search__close kbd{display:none}
  .cc-search__clear{display:none!important}
  .cc-search__close{width:2.75rem;height:2.75rem;padding:0}
  .cc-search__close svg{width:1.4rem;height:1.4rem}
  .cc-search__keys{display:none}
  .cc-search__foot{padding-bottom:calc(.65rem + env(safe-area-inset-bottom,0px))}
  .cc-hit__link{padding-inline:1.1rem 1rem}
}
@media (min-width:641px){.cc-search__close .cc-x-m{display:none}}
@media (max-width:640px){.cc-search__close .cc-x-d{display:none}}
@keyframes cc-in-m{from{opacity:0;transform:translateY(-14px)}}

/* ---------- Ergebnisseite /suche/ (auch ohne JavaScript) ---------- */
.cc-sres{padding:clamp(2rem,5vw,3.5rem) 0 clamp(3rem,7vw,5rem)}
.cc-sres__h{margin-bottom:.4em}
.cc-sres__form{display:flex;gap:.6rem;max-width:44rem;margin:0 0 1.2rem}
.cc-sres__form input{
  flex:1;min-width:0;height:3.2rem;padding:0 1rem;border:1.5px solid var(--line-strong,#B4C3D0);border-radius:12px;
  background:var(--surface,#fff);color:var(--text,#142433);font:600 1.2rem/1 var(--font-body,system-ui,sans-serif);
}
.cc-sres__form input:focus{outline:none;border-color:var(--blau-600,#1D6FB8);box-shadow:0 0 0 3px rgba(29,111,184,.25)}
.cc-sres__status{color:var(--muted,#475A6C)}
.cc-sres__list{max-width:48rem;margin-top:1rem;background:var(--surface,#fff);border:1px solid var(--line,#D6E0E9);border-radius:var(--r-m,12px);overflow:hidden}
.cc-sres .cc-chips{margin:.4rem 0 1.5rem}
.cc-sres .cc-none{padding:0}

@media (prefers-reduced-motion:reduce){
  .cc-lupe__body{transition:none}
  .cc-sbtn:hover .cc-lupe__body,.cc-sbtn:focus-visible .cc-lupe__body{transform:none}
  .cc-sbtn:hover .cc-lupe__glint,.cc-sbtn:focus-visible .cc-lupe__glint,.cc-lupe.is-scan .cc-lupe__glint,
  .cc-sbtn:hover .cc-lupe__spark,.cc-sbtn:focus-visible .cc-lupe__spark{animation:none}
  .cc-search__panel{animation:none}
}
@media (forced-colors:active){
  .cc-hit.is-active .cc-hit__link{outline:2px solid Highlight}
}