/* =====================================================================================================================
   Website-Umschalter „IT-Jäger · ALL-WORKS · Prüfmeister“ – gemeinsamer Baustein für it-jaeger.support, all-works.com
   und pruefmeister.de. QUELLE: werkzeuge/website-wechsler/ (LIESMICH.md) – auf allen drei Websites unverändert als
   assets/wechsler.css einbinden; Anpassungen je Website nur in deren site.css (Farbvariablen, Abstände).
   Dunkle Grundfassung (für dunkle Köpfe); helle Fassung mit der Klasse .wechsler.hell (z. B. it-jaeger, gescrollter Kopf).
   Ohne JavaScript bleibt die aktuelle Website markiert, nur das Gleiten fehlt.
   ===================================================================================================================== */
:root { --wechsler-h: 38px; }

.wechsler {
    --vb-text: rgba(255, 255, 255, .7);
    --vb-text-stark: #fff;
    --vb-aktiv-text: #fff;
    --vb-grund: rgba(255, 255, 255, .05);
    --vb-rahmen: rgba(255, 255, 255, .13);
    --vb-hauch: rgba(255, 255, 255, .08);
    --vb-band: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .08));
    --vb-linie: rgba(255, 255, 255, .08);
    position: relative; height: var(--wechsler-h); border-bottom: 1px solid var(--vb-linie);
    transition: border-color .3s;
}
.wechsler.hell {
    --vb-text: #4a6070;
    --vb-text-stark: #0c2230;
    --vb-aktiv-text: #fff;
    --vb-grund: rgba(5, 47, 67, .045);
    --vb-rahmen: rgba(5, 47, 67, .13);
    --vb-hauch: rgba(5, 47, 67, .08);
    --vb-band: linear-gradient(180deg, #123f56, #062c3f);
    --vb-linie: rgba(5, 47, 67, .08);
}
.wechsler-innen { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.wechsler-titel { margin: 0; font-size: 12.5px; font-weight: 500; letter-spacing: .02em; color: var(--vb-text); white-space: nowrap; }
.wechsler-titel b { font-weight: 700; color: var(--vb-text-stark); }

/* Der Schalter: Pille mit drei Zielen, darunter das gleitende Band (aktuelle Website) und ein Hauch beim Darüberfahren */
.wechsler-schalter { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 2px; padding: 3px;
    border-radius: 999px; background: var(--vb-grund); border: 1px solid var(--vb-rahmen); }
.wechsler-ziel { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 12px;
    border-radius: 999px; color: var(--vb-text); text-decoration: none; font-size: 13px; font-weight: 600; line-height: 1;
    white-space: nowrap; transition: color .3s; -webkit-tap-highlight-color: transparent; }
.wechsler-ziel:hover, .wechsler-ziel:focus-visible { color: var(--vb-text-stark); }
.wechsler-ziel[aria-current="page"] { color: var(--vb-aktiv-text); }
.wechsler-ziel:focus-visible { outline: 2px solid var(--marke); outline-offset: 2px; }
.wechsler-ziel small { font-size: 11.5px; font-weight: 500; opacity: .72; }
.wechsler-punkt { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--marke); box-shadow: 0 0 8px var(--marke-sanft); }
.wechsler-ziel[aria-current="page"] .wechsler-punkt { box-shadow: 0 0 0 3px var(--marke-sanft), 0 0 10px var(--marke); }
[data-ziel="itjaeger"] { --marke: #ff3b2f; --marke-sanft: rgba(255, 59, 47, .4); }
[data-ziel="allworks"] { --marke: #8b5cff; --marke-sanft: rgba(139, 92, 255, .45); }
[data-ziel="allworks"] .wechsler-punkt { background: linear-gradient(135deg, #8b5cff, #22d3ee 60%, #b4f25a); }
[data-ziel="pruefmeister"] { --marke: #1b8fd6; --marke-sanft: rgba(27, 143, 214, .45); }
.wechsler-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wechsler-band, .wechsler-hauch { position: absolute; top: 3px; bottom: 3px; left: 0; border-radius: 999px; pointer-events: none; }
.wechsler-band { z-index: 1; width: var(--w, 0); transform: translateX(var(--x, 0)); overflow: hidden; background: var(--vb-band);
    box-shadow: inset 0 0 0 1px var(--band-rand, rgba(255, 255, 255, .25)), 0 0 18px -3px var(--band-glut, transparent), 0 2px 8px -2px rgba(0, 0, 0, .35);
    transition: transform .6s cubic-bezier(.34, 1.36, .64, 1), width .6s cubic-bezier(.34, 1.36, .64, 1), box-shadow .5s; }
.wechsler-band.sofort { transition: none; }
/* Lichtstreif, der ab und zu über das Band läuft */
.wechsler-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .38) 50%, transparent 62%);
    background-size: 260% 100%; background-position: 130% 0; animation: wechsler-glanz 7s ease-in-out 2.5s infinite; }
@keyframes wechsler-glanz { 0%, 72% { background-position: 130% 0; } 100% { background-position: -30% 0; } }
.wechsler-schalter[data-band="itjaeger"] { --band-rand: rgba(255, 59, 47, .6); --band-glut: rgba(255, 59, 47, .55); }
.wechsler-schalter[data-band="allworks"] { --band-rand: rgba(139, 92, 255, .65); --band-glut: rgba(34, 211, 238, .45); }
.wechsler-schalter[data-band="pruefmeister"] { --band-rand: rgba(27, 143, 214, .7); --band-glut: rgba(27, 143, 214, .55); }
.wechsler-hauch { z-index: 0; width: var(--hw, 0); transform: translateX(var(--hx, 0)); background: var(--vb-hauch); opacity: 0;
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), width .35s cubic-bezier(.2, .8, .2, 1), opacity .25s; }
.wechsler-schalter.hauch-an .wechsler-hauch { opacity: 1; }
/* Ohne JavaScript (oder bevor gemessen ist): die aktuelle Website direkt markieren */
.wechsler:not(.bereit) .wechsler-ziel[aria-current="page"] { background: var(--vb-band); box-shadow: inset 0 0 0 1px var(--marke-sanft); }

@media (max-width: 1180px) { .wechsler-ziel small { display: none; } }
@media (max-width: 760px) {
    :root { --wechsler-h: 42px; }
    .wechsler-titel { display: none; }
    .wechsler-innen { justify-content: center; }
    .wechsler-schalter { width: 100%; max-width: 420px; }
    .wechsler-ziel { flex: 1 1 0; justify-content: center; height: 30px; padding: 0 8px; font-size: 13px; gap: 6px; }
}
@media (max-width: 360px) { .wechsler-ziel { font-size: 12px; padding: 0 5px; } }
@media (prefers-reduced-motion: reduce) {
    .wechsler-band, .wechsler-hauch, .wechsler-ziel { transition: none; }
    .wechsler-band::after { animation: none; }
}
html.ba-ruhig .wechsler-band, html.ba-ruhig .wechsler-hauch { transition: none; }
html.ba-ruhig .wechsler-band::after { animation: none; }
@media print { .wechsler { display: none; } }