/*
   Agentur-CMS · Geführte Tour („Missionen“)
   ---------------------------------------------------------------------------
   Aussehen der Tour aus js/tour.js: Abdunkeln, Lichtkegel, Sprechblase der
   Mentorin, Missionsliste, Abschluss-Karte. Bewusst ein eigener, dunkler
   „Bordcomputer“-Look, damit man Tour und eigentliche Oberfläche nie
   verwechselt. Alle Klassen beginnen mit tour-, damit nichts kollidiert.
*/

:root {
    --tour-glas: rgba(8, 18, 38, .94);
    --tour-glas-hell: rgba(18, 36, 70, .9);
    --tour-linie: rgba(120, 200, 255, .22);
    --tour-cyan: #4FD6FF;
    --tour-cyan-tief: #1A9BD7;
    --tour-gold: #FFC857;
    --tour-text: #E6F1FF;
    --tour-leise: #93A8C8;
    --tour-dunkel: rgba(4, 10, 24, .66);
    --tour-z: 2147483000;
}

/* ---------------------------------------------------------------- Bühne */

.tour-buehne { position: fixed; inset: 0; z-index: var(--tour-z); pointer-events: none; }

.tour-dunkel {
    position: fixed;
    background: var(--tour-dunkel);
    pointer-events: auto;
    transition: all .28s cubic-bezier(.2, .8, .2, 1);
}

.tour-buehne--mitte .tour-dunkel { backdrop-filter: blur(2px); }

.tour-ring {
    position: fixed;
    pointer-events: none;
    border-radius: 10px;
    box-shadow: 0 0 0 2px var(--tour-cyan), 0 0 24px 4px rgba(79, 214, 255, .45);
    transition: all .28s cubic-bezier(.2, .8, .2, 1);
    animation: tour-puls 2.2s ease-in-out infinite;
}

/* Eckmarkierungen wie bei einem Zielsystem */
.tour-ring i {
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid var(--tour-cyan);
}
.tour-ring i:nth-child(1) { left: -7px; top: -7px; border-right: 0; border-bottom: 0; }
.tour-ring i:nth-child(2) { right: -7px; top: -7px; border-left: 0; border-bottom: 0; }
.tour-ring i:nth-child(3) { left: -7px; bottom: -7px; border-right: 0; border-top: 0; }
.tour-ring i:nth-child(4) { right: -7px; bottom: -7px; border-left: 0; border-top: 0; }

@keyframes tour-puls {
    0%, 100% { box-shadow: 0 0 0 2px var(--tour-cyan), 0 0 18px 2px rgba(79, 214, 255, .35); }
    50% { box-shadow: 0 0 0 2px var(--tour-cyan), 0 0 34px 8px rgba(79, 214, 255, .55); }
}

/* ---------------------------------------------------------------- Sprechblase */

.tour-blase {
    position: fixed;
    width: min(380px, calc(100vw - 24px));
    pointer-events: auto;
    color: var(--tour-text);
    background: linear-gradient(160deg, var(--tour-glas-hell), var(--tour-glas) 55%);
    border: 1px solid var(--tour-linie);
    border-radius: 14px;
    padding: 16px 18px 14px;
    box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .06);
    font-size: 14px;
    line-height: 1.55;
    transition: left .28s cubic-bezier(.2, .8, .2, 1), top .28s cubic-bezier(.2, .8, .2, 1);
    animation: tour-auf .32s cubic-bezier(.2, .8, .2, 1);
}

.tour-blase::before {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    top: -1px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--tour-cyan), transparent);
}

.tour-blase--auftrag { border-color: rgba(255, 200, 87, .45); }
.tour-blase--auftrag::before { background: linear-gradient(90deg, transparent, var(--tour-gold), transparent); }

.tour-blase--stups { animation: tour-stups .4s ease; }

@keyframes tour-auf {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to { opacity: 1; transform: none; }
}

@keyframes tour-stups {
    0%, 100% { transform: none; }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}

.tour-blase-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }

.tour-absender { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.tour-absender span,
.tour-etikett {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tour-cyan);
}
.tour-absender b { font-size: 13px; color: var(--tour-leise); font-weight: 600; }

.tour-zu {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid var(--tour-linie);
    background: transparent;
    color: var(--tour-leise);
    cursor: pointer;
    font-size: 13px;
    flex: none;
}
.tour-zu:hover { color: #fff; border-color: var(--tour-cyan); }

.tour-titel { margin: 12px 0 6px; font-size: 17px; font-weight: 700; color: #fff; letter-spacing: -.01em; }

.tour-text b { color: #fff; }

.tour-auftrag {
    display: block;
    margin-top: 10px;
    padding: 7px 10px;
    border-radius: 8px;
    background: rgba(255, 200, 87, .12);
    border: 1px solid rgba(255, 200, 87, .35);
    color: var(--tour-gold);
    font-weight: 600;
    font-size: 13px;
}
.tour-auftrag::before { content: "▶ "; }

.tour-hinweis { margin: 10px 0 0; font-size: 12.5px; color: var(--tour-leise); font-style: italic; }

.tour-wort { opacity: 0; animation: tour-wort .3s ease forwards; }

@keyframes tour-wort {
    from { opacity: 0; filter: blur(3px); }
    to { opacity: 1; filter: none; }
}

.tour-fortschritt { height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.tour-fortschritt i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--tour-cyan-tief), var(--tour-cyan));
    box-shadow: 0 0 10px var(--tour-cyan);
    transition: width .5s ease;
}
.tour-fortschritt--gross { height: 6px; margin-top: 8px; }

.tour-fuss { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.tour-zaehler { font-size: 11.5px; color: var(--tour-leise); letter-spacing: .04em; }
.tour-knoepfe { display: flex; gap: 8px; }

.tour-knopf {
    appearance: none;
    border: 1px solid transparent;
    border-radius: 9px;
    padding: 8px 14px;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    color: #04162C;
    background: linear-gradient(180deg, #7FE4FF, var(--tour-cyan));
    box-shadow: 0 6px 18px -6px rgba(79, 214, 255, .7);
    cursor: pointer;
    white-space: nowrap;
}
.tour-knopf:hover { filter: brightness(1.08); }
.tour-knopf:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.tour-knopf--leise {
    color: var(--tour-text);
    background: transparent;
    border-color: var(--tour-linie);
    box-shadow: none;
}
.tour-knopf--leise:hover { border-color: var(--tour-cyan); }

/* ---------------------------------------------------------------- Mentorin */

.tour-avatar {
    width: 64px;
    height: 64px;
    flex: none;
    color: var(--tour-cyan);
    filter: drop-shadow(0 0 12px rgba(79, 214, 255, .55));
}
.tour-avatar svg { width: 100%; height: 100%; display: block; animation: tour-schweben 4s ease-in-out infinite; }
.tour-avatar svg > circle:first-child { transform-origin: 32px 32px; animation: tour-drehen 14s linear infinite; }
.tour-avatar--klein { width: 38px; height: 38px; }

.tour-pupille { animation: tour-blick 6s ease-in-out infinite; }

@keyframes tour-schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes tour-drehen { to { transform: rotate(360deg); } }
@keyframes tour-blick {
    0%, 40%, 100% { transform: translateX(0); }
    50%, 60% { transform: translateX(-4px); }
    70%, 80% { transform: translateX(4px); }
}

/* ---------------------------------------------------------------- Startknopf */

.tour-start {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-right: 10px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(26, 155, 215, .35);
    background: linear-gradient(180deg, #0E2347, #0A1730);
    color: #DDF4FF;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.tour-start:hover { border-color: var(--tour-cyan); }
.tour-start-stern { color: var(--tour-cyan); }
.tour-start-zahl {
    font-size: 11px;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(79, 214, 255, .16);
    color: var(--tour-cyan);
}
.tour-start--ruft { animation: tour-ruf 2.4s ease-in-out infinite; }

@keyframes tour-ruf {
    0%, 100% { box-shadow: 0 0 0 0 rgba(79, 214, 255, 0); }
    50% { box-shadow: 0 0 0 5px rgba(79, 214, 255, .22); }
}

.tour-start--schwebend { position: fixed; right: 18px; bottom: 18px; z-index: calc(var(--tour-z) - 2); margin: 0; }

/* ---------------------------------------------------------------- Missionszentrale */

.tour-zentrale { position: fixed; inset: 0; z-index: var(--tour-z); }

.tour-zentrale-hinter {
    position: absolute;
    inset: 0;
    background: var(--tour-dunkel);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity .25s ease;
}

.tour-zentrale-leiste {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(460px, 100vw);
    display: flex;
    flex-direction: column;
    color: var(--tour-text);
    background:
        radial-gradient(120% 50% at 100% 0%, rgba(79, 214, 255, .14), transparent 60%),
        linear-gradient(180deg, #0C1C3A, #060E20);
    border-left: 1px solid var(--tour-linie);
    box-shadow: -30px 0 80px -20px rgba(0, 0, 0, .7);
    transform: translateX(100%);
    transition: transform .32s cubic-bezier(.2, .8, .2, 1);
    font-size: 14px;
}

.tour-zentrale--offen .tour-zentrale-hinter { opacity: 1; }
.tour-zentrale--offen .tour-zentrale-leiste { transform: none; }

.tour-zentrale-kopf { display: flex; gap: 14px; align-items: flex-start; padding: 26px 24px 18px; }
.tour-zentrale-kopf h2 { margin: 2px 0 6px; font-size: 24px; color: #fff; letter-spacing: -.02em; }
.tour-zentrale-kopf p { margin: 0; color: var(--tour-leise); line-height: 1.5; }

.tour-rangkarte {
    margin: 0 24px 16px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid var(--tour-linie);
    background: rgba(255, 255, 255, .03);
}

.tour-rang { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--tour-leise); }
.tour-rang b { color: var(--tour-gold); }

.tour-liste { list-style: none; margin: 0; padding: 0 24px; overflow-y: auto; flex: 1; }

.tour-mission {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 14px;
    margin-bottom: 10px;
    border-radius: 12px;
    border: 1px solid var(--tour-linie);
    background: rgba(255, 255, 255, .025);
    transition: border-color .2s ease, background .2s ease;
}
.tour-mission:hover { border-color: rgba(79, 214, 255, .5); background: rgba(79, 214, 255, .05); }

.tour-mission-nr {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 13px;
    color: var(--tour-cyan);
    border: 1px solid rgba(79, 214, 255, .35);
    background: rgba(79, 214, 255, .08);
}

.tour-mission-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.tour-mission-text b { color: #fff; font-size: 14.5px; }
.tour-mission-text span { color: var(--tour-leise); font-size: 12.5px; margin-top: 2px; }
.tour-mission-text small { color: var(--tour-cyan); font-size: 11px; margin-top: 5px; letter-spacing: .04em; }

.tour-mission--fertig .tour-mission-nr { color: #062014; background: #5BE3A4; border-color: #5BE3A4; }
.tour-mission--fertig .tour-mission-text b { color: var(--tour-leise); }
.tour-mission--laeuft { border-color: rgba(255, 200, 87, .5); }
.tour-mission--laeuft .tour-mission-nr { color: var(--tour-gold); border-color: rgba(255, 200, 87, .5); background: rgba(255, 200, 87, .1); }

.tour-zentrale-fuss {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 16px 24px 20px;
    border-top: 1px solid var(--tour-linie);
    font-size: 12px;
    color: var(--tour-leise);
}

.tour-zentrale-fuss kbd {
    display: inline-block;
    padding: 0 5px;
    border-radius: 4px;
    border: 1px solid var(--tour-linie);
    font: inherit;
    font-size: 11px;
    color: var(--tour-text);
}

.tour-link {
    background: none;
    border: 0;
    padding: 0;
    color: var(--tour-leise);
    font: inherit;
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
}
.tour-link:hover { color: #fff; }

/* ---------------------------------------------------------------- Abschluss & Willkommen */

.tour-abschluss {
    position: fixed;
    inset: 0;
    z-index: var(--tour-z);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: var(--tour-dunkel);
    backdrop-filter: blur(4px);
    animation: tour-einblenden .25s ease;
}

@keyframes tour-einblenden { from { opacity: 0; } }

.tour-abschluss-karte {
    position: relative;
    width: min(460px, 100%);
    padding: 30px 30px 24px;
    text-align: center;
    color: var(--tour-text);
    border-radius: 18px;
    border: 1px solid rgba(79, 214, 255, .35);
    background:
        radial-gradient(90% 60% at 50% 0%, rgba(79, 214, 255, .22), transparent 70%),
        linear-gradient(180deg, #0E2146, #070F22);
    box-shadow: 0 40px 100px -20px rgba(0, 0, 0, .8), 0 0 60px -20px rgba(79, 214, 255, .6);
    overflow: hidden;
    animation: tour-auf .4s cubic-bezier(.2, .8, .2, 1);
    font-size: 14px;
}

.tour-abschluss-karte .tour-avatar { margin: 0 auto 10px; width: 76px; height: 76px; }

.tour-abschluss-karte h2 { margin: 8px 0 4px; font-size: 26px; color: #fff; letter-spacing: -.02em; }

.tour-stempel {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--tour-gold);
    border: 1px solid rgba(255, 200, 87, .45);
    background: rgba(255, 200, 87, .08);
}

.tour-belohnung {
    margin: 10px 0 14px;
    font-size: 44px;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--tour-cyan);
    text-shadow: 0 0 24px rgba(79, 214, 255, .7);
}
.tour-belohnung small { font-size: 18px; color: var(--tour-leise); }

.tour-aufstieg { margin: -4px 0 14px; color: var(--tour-gold); }

.tour-abschluss-karte .tour-rang { text-align: left; }

.tour-abschluss-knoepfe { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

.tour-willkommen-text { margin: 12px 0 0; color: #C9DAF2; line-height: 1.6; }
.tour-willkommen-text b { color: #fff; }

/* Funken beim Abschluss */
.tour-funken { position: absolute; inset: 0; pointer-events: none; }
.tour-funken i {
    position: absolute;
    left: 50%;
    top: 38%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--tour-cyan);
    box-shadow: 0 0 8px var(--tour-cyan);
    opacity: 0;
    animation: tour-funke 1.4s ease-out forwards;
}
.tour-funken i:nth-child(3n) { background: var(--tour-gold); box-shadow: 0 0 8px var(--tour-gold); }
.tour-funken i:nth-child(1) { --x: -160px; --y: -90px; }
.tour-funken i:nth-child(2) { --x: 150px; --y: -110px; animation-delay: .05s; }
.tour-funken i:nth-child(3) { --x: -120px; --y: 60px; animation-delay: .1s; }
.tour-funken i:nth-child(4) { --x: 170px; --y: 40px; }
.tour-funken i:nth-child(5) { --x: -40px; --y: -140px; animation-delay: .08s; }
.tour-funken i:nth-child(6) { --x: 60px; --y: -150px; animation-delay: .12s; }
.tour-funken i:nth-child(7) { --x: -190px; --y: -10px; animation-delay: .04s; }
.tour-funken i:nth-child(8) { --x: 200px; --y: -40px; animation-delay: .15s; }
.tour-funken i:nth-child(9) { --x: -90px; --y: -120px; animation-delay: .02s; }
.tour-funken i:nth-child(10) { --x: 100px; --y: 90px; animation-delay: .11s; }
.tour-funken i:nth-child(11) { --x: -150px; --y: 110px; animation-delay: .06s; }
.tour-funken i:nth-child(12) { --x: 20px; --y: 130px; animation-delay: .13s; }
.tour-funken i:nth-child(13) { --x: 130px; --y: -60px; animation-delay: .03s; }
.tour-funken i:nth-child(14) { --x: -60px; --y: 120px; animation-delay: .09s; }
.tour-funken i:nth-child(15) { --x: 180px; --y: 120px; animation-delay: .14s; }
.tour-funken i:nth-child(16) { --x: -200px; --y: 70px; animation-delay: .07s; }
.tour-funken i:nth-child(17) { --x: 80px; --y: -90px; animation-delay: .16s; }
.tour-funken i:nth-child(18) { --x: -110px; --y: -40px; animation-delay: .1s; }

@keyframes tour-funke {
    0% { opacity: 1; transform: translate(0, 0) scale(1); }
    100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(.4); }
}

/* ---------------------------------------------------------------- Kurzmeldung */

.tour-meldung {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: var(--tour-z);
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: min(380px, calc(100vw - 40px));
    padding: 12px 16px 12px 12px;
    border-radius: 12px;
    color: var(--tour-text);
    background: var(--tour-glas);
    border: 1px solid var(--tour-linie);
    box-shadow: 0 20px 50px -10px rgba(0, 0, 0, .6);
    font-size: 13.5px;
    line-height: 1.45;
    animation: tour-auf .3s ease;
    transition: opacity .5s ease, transform .5s ease;
}
.tour-meldung p { margin: 0; }
.tour-meldung b { color: #fff; }
.tour-meldung--weg { opacity: 0; transform: translateY(8px); }

/* ---------------------------------------------------------------- Rücksicht */

@media (max-width: 640px) {
    .tour-start > span:not(.tour-start-stern):not(.tour-start-zahl) { display: none; }
    .tour-mission { grid-template-columns: 34px 1fr; }
    .tour-mission .tour-knopf { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
    .tour-blase, .tour-ring, .tour-dunkel, .tour-avatar, .tour-avatar svg, .tour-avatar svg > circle:first-child,
    .tour-pupille, .tour-start--ruft, .tour-funken i, .tour-abschluss-karte, .tour-zentrale-leiste {
        animation: none !important;
        transition: none !important;
    }
    .tour-funken { display: none; }
}