/* ==========================================================================
   CARCHECK Berlin – Leiste unter dem Kopfbereich
   Sprachumschalter im iOS-Stil (DE | EN | weitere Sprachen) und Platz für
   weitere Funktionen. Werte mit Ersatzfarben, damit die Leiste auch auf den
   Seiten mit der schlichten Kopfzeile (.kopf) richtig aussieht.
   ========================================================================== */
.leiste{--leiste-stand:6;position:relative;z-index:40;background:var(--blau-950,#0A2440);color:#D5E4F3;border-bottom:1px solid rgba(255,255,255,.12);font-family:var(--font-body,"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif)}
.leiste__in{display:flex;align-items:center;justify-content:flex-end;gap:.75rem;min-height:48px}
.leiste .icon,.sprachwahl .icon,.leiste-hinweis .icon{display:block;flex:none;width:1.2em;height:1.2em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Umschalter */
.schalter{--breite:1.95rem;position:relative;display:inline-grid;grid-template-columns:repeat(3,var(--breite));flex:none;padding:4px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.05));box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 3px rgba(0,0,0,.35)}
.schalter__daumen{position:absolute;top:4px;bottom:4px;left:4px;width:var(--breite);border-radius:999px;background:var(--signal,#FF6B1F);box-shadow:0 2px 8px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.35);transform:translateX(calc(var(--pos,0) * 100%));pointer-events:none}
.schalter.ist-bereit .schalter__daumen{transition:transform .34s cubic-bezier(.25,.9,.3,1.05)}
.schalter__teil{position:relative;z-index:1;display:grid;place-items:center;height:30px;margin:0;padding:0;border:0;border-radius:999px;background:none;color:#fff;font:700 .84rem/1 var(--font-body,system-ui,sans-serif);letter-spacing:.02em;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .2s}
.schalter__teil:hover{color:#fff;text-decoration:none}
.schalter__teil:not([aria-current]):hover{background:rgba(255,255,255,.08)}
.schalter__teil[aria-current]{color:var(--ink-on-signal,#10202F)}
.schalter__teil .icon{width:1.1rem;height:1.1rem}
.schalter__code{display:none}
.schalter__mehr.ist-anders .icon{display:none}
.schalter__mehr.ist-anders .schalter__code{display:block}
.schalter__teil:focus-visible{outline:2px solid #fff;outline-offset:1px}
.no-js .schalter__mehr{display:none}
.no-js .schalter{grid-template-columns:repeat(2,var(--breite))}

/* Weitere Funktionen (aus leiste.js) */
.leiste__fn{display:flex;align-items:center;gap:.25rem;min-width:0;margin-right:auto;overflow-x:auto;scrollbar-width:none}
.leiste__fn::-webkit-scrollbar{display:none}
.leiste__fn a{display:inline-flex;align-items:center;gap:.4rem;height:48px;padding:0 .55rem;color:#D5E4F3;font-weight:600;font-size:.95rem;text-decoration:none;white-space:nowrap}
.leiste__fn a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--signal,#FF6B1F)}
.leiste__fn .icon{color:var(--signal,#FF6B1F)}

/* Runde Knöpfe im iOS-Stil direkt neben dem Umschalter (z. B. FAQ).
   Gleiche Höhe und Rundung wie der Umschalter, Glas-Fläche statt Mulde,
   der orange Punkt nimmt die Farbe des Schiebers auf. */
.leiste__knoepfe{display:flex;align-items:center;gap:.5rem;flex:none}
.leiste__knoepfe[hidden]{display:none}
.knopf{display:inline-flex;align-items:center;gap:.45rem;height:40px;padding:0 1rem 0 .45rem;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.05));box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 3px rgba(0,0,0,.35);color:#fff;font:700 .92rem/1 var(--font-body,system-ui,sans-serif);letter-spacing:.05em;text-decoration:none;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .22s cubic-bezier(.3,1.4,.5,1),background-color .2s,border-color .2s}
.knopf:hover{background-color:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28);color:#fff;text-decoration:none}
.knopf:active{transform:scale(.93);background-color:rgba(255,255,255,.14);transition-duration:.08s}
.knopf:focus-visible{outline:2px solid #fff;outline-offset:2px}
.knopf__punkt{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--signal,#FF6B1F);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 1px 3px rgba(0,0,0,.35);color:var(--ink-on-signal,#10202F)}
.leiste .knopf__punkt .icon{width:22px;height:22px;stroke-width:2.7}
.knopf > .icon{color:var(--signal,#FF6B1F)}
.knopf[aria-current]{border-color:var(--signal,#FF6B1F);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 0 1px var(--signal,#FF6B1F)}
@media (prefers-reduced-motion:reduce){.knopf{transition:background-color .2s,border-color .2s}.knopf:active{transform:none}}

/* Hinweis auf übersetzten Seiten (Google übersetzt ihn mit) */
.leiste-hinweis{display:flex;align-items:flex-start;gap:.6rem;margin:0;padding:.6rem max(1rem,4vw);background:#FFF2E8;color:#4A2208;border-bottom:1px solid #FFD3B8;font-size:.95rem;line-height:1.35}
.leiste-hinweis[hidden]{display:none}
.leiste-hinweis .icon{margin-top:.05rem;color:#C4500F}
.leiste-hinweis a{font-weight:700;color:#8A3606;white-space:nowrap}
@media (prefers-color-scheme:dark){
  .leiste-hinweis{background:#2B1C12;color:#FFDCC4;border-bottom-color:#5A3218}
  .leiste-hinweis .icon{color:#FF6B1F}
  .leiste-hinweis a{color:#FFB37F}
}

/* Auswahlfenster mit allen Sprachen */
html.sw-offen{overflow:hidden}
.sprachwahl{width:min(30rem,100vw - 2rem);max-width:none;max-height:min(42rem,100dvh - 3rem);padding:0;border:0;border-radius:22px;background:var(--surface,#fff);color:var(--text,#142433);box-shadow:0 18px 44px rgba(10,36,64,.28);overflow:hidden;font-family:var(--font-body,system-ui,sans-serif)}
.sprachwahl[open]{display:flex;flex-direction:column}
.sprachwahl::backdrop{background:rgba(10,36,64,.55)}
.sprachwahl [hidden]{display:none!important}
.sprachwahl__kopf{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1.15rem 1.25rem .75rem}
.sprachwahl__titel{margin:0;font:700 1.65rem/1.1 var(--font-display,"Barlow Semi Condensed","Arial Narrow",Arial,sans-serif)}
.sprachwahl__unter{margin:.15rem 0 0;color:var(--muted,#475A6C);font-size:.95rem}
.sprachwahl__zu{display:grid;place-items:center;flex:none;width:44px;height:44px;margin:-.35rem -.5rem 0 0;border:0;border-radius:10px;background:none;color:inherit;cursor:pointer}
.sprachwahl__zu:hover{background:var(--surface-2,#E9EFF5)}
.sprachwahl__zu .icon{width:1.3rem;height:1.3rem}
.sprachwahl__suche{position:relative;margin:0 1.25rem .5rem}
.sprachwahl__suche .icon{position:absolute;left:.85rem;top:50%;width:1.15rem;height:1.15rem;transform:translateY(-50%);color:var(--muted,#475A6C);pointer-events:none}
.sprachwahl__suche input{width:100%;height:48px;padding:0 1rem 0 2.6rem;border:1.5px solid var(--line-strong,#B4C3D0);border-radius:10px;background:var(--bg,#F2F5F8);color:inherit;font:inherit;font-size:1.05rem}
.sprachwahl__suche input:focus{border-color:var(--blau-600,#1D6FB8);outline:none;box-shadow:0 0 0 3px rgba(29,111,184,.25)}
.sprachwahl__liste{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 1.25rem .5rem}
.sw-gruppe{margin:1rem 0 .25rem;font:700 1.05rem/1.2 var(--font-display,"Barlow Semi Condensed","Arial Narrow",Arial,sans-serif);color:var(--muted,#475A6C)}
.sw-zeile{display:grid;grid-template-columns:minmax(0,1fr) auto 1.4rem;align-items:center;gap:.75rem;min-height:50px;padding:.35rem .5rem;margin-inline:-.5rem;border-bottom:1px solid var(--line,#D6E0E9);color:inherit;text-decoration:none}
.sw-zeile:hover,.sw-zeile.ist-aktiv{background:var(--blau-50,#F0F6FC)}
.sw-zeile__nativ{font-weight:600;font-size:1.08rem;text-align:left;unicode-bidi:isolate}
.sw-zeile__de{color:var(--muted,#475A6C);font-size:.92rem;text-align:right}
.sw-zeile .icon{width:1.3rem;height:1.3rem;color:var(--signal,#FF6B1F);stroke-width:2.6}
.sw-zeile__tag{display:inline-block;margin-left:.45rem;padding:.1rem .45rem;border-radius:999px;background:var(--surface-2,#E9EFF5);color:var(--muted,#475A6C);font-size:.78rem;font-weight:600;vertical-align:.12em}
.sw-leer{margin:1.25rem 0;color:var(--muted,#475A6C)}
.sprachwahl__fuss{margin:0;padding:.85rem 1.25rem 1rem;border-top:1px solid var(--line,#D6E0E9);background:var(--surface-2,#E9EFF5);color:var(--muted,#475A6C);font-size:.88rem;line-height:1.4}
.sprachwahl__fuss a{color:var(--link,#17609F);font-weight:600}
@media (max-width:760px){
  .sprachwahl{width:100%;max-height:88dvh;margin:auto 0 0;border-radius:22px 22px 0 0}
  .sprachwahl[open]{animation:sw-hoch .28s cubic-bezier(.2,.7,.2,1)}
  .sprachwahl__kopf{padding-top:1.35rem}
  .sprachwahl__kopf::before{content:"";position:absolute;left:50%;top:.5rem;width:2.5rem;height:4px;margin-left:-1.25rem;border-radius:4px;background:var(--line-strong,#B4C3D0)}
  .sprachwahl__fuss{padding-bottom:calc(1rem + env(safe-area-inset-bottom))}
}
@keyframes sw-hoch{from{transform:translateY(100%)}}
@media (prefers-reduced-motion:reduce){
  .schalter.ist-bereit .schalter__daumen{transition:none}
  .sprachwahl[open]{animation:none}
}

/* ---------- Suche ----------
   Knopf „Suche“ in der Leiste (von leiste.js eingesetzt). Die Lupe im
   Kopfbereich bekommt den gleichen orangen Kreis und erscheint nur, wenn die
   Leiste aus dem Bild gescrollt ist. Ihr Platz bleibt frei, damit nichts springt. */
.knopf--suche .knopf__punkt .icon{transition:transform .25s}
.knopf--suche:hover .knopf__punkt .icon,.knopf--suche:focus-visible .knopf__punkt .icon{transform:rotate(-14deg) scale(1.08)}
@media (max-width:359px){
  .knopf--suche{width:40px;padding:0;justify-content:center}
  .knopf--suche .knopf__text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
.cc-suche-in-leiste .cc-sbtn{display:grid;place-items:center;opacity:0;visibility:hidden;transform:scale(.4);transition:opacity .2s,transform .2s,visibility 0s linear .2s}
.cc-suche-in-leiste.cc-leiste-weg .cc-sbtn{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .4s cubic-bezier(.3,1.6,.5,1),visibility 0s}
.cc-suche-in-leiste .cc-sbtn > svg{display:none}
.cc-suche-in-leiste .cc-sbtn::before,.cc-suche-in-leiste .cc-sbtn::after{content:"";grid-area:1/1;pointer-events:none}
.cc-suche-in-leiste .cc-sbtn::before{width:38px;height:38px;border-radius:50%;background:var(--signal,#FF6B1F);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 8px rgba(255,107,31,.35),0 1px 2px rgba(10,36,64,.3)}
.cc-suche-in-leiste .cc-sbtn::after{width:24px;height:24px;background:var(--ink-on-signal,#10202F);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.7' stroke-linecap='round'%3E%3Ccircle cx='10.4' cy='10.4' r='5.2'/%3E%3Cpath d='M14.3 14.3 18.4 18.4'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.7' stroke-linecap='round'%3E%3Ccircle cx='10.4' cy='10.4' r='5.2'/%3E%3Cpath d='M14.3 14.3 18.4 18.4'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .25s}
.cc-suche-in-leiste .cc-sbtn:hover::after,.cc-suche-in-leiste .cc-sbtn:focus-visible::after{transform:rotate(-14deg) scale(1.08)}
.cc-suche-in-leiste .cc-sbtn:hover::before{background:var(--signal-hover,#FF8442)}
.cc-suche-in-leiste .cc-sbtn:active{transform:scale(.92)}
@media (prefers-reduced-motion:reduce){
  .cc-suche-in-leiste .cc-sbtn,.cc-suche-in-leiste.cc-leiste-weg .cc-sbtn{transform:none;transition:opacity .2s,visibility 0s}
  .knopf--suche .knopf__punkt .icon,.cc-suche-in-leiste .cc-sbtn::after{transition:none}
}