/* ════════════════════════════════════════════════════════════════
   onboarding_tour.css — Scheinwerfer und Sprechblase der Einführung
   ────────────────────────────────────────────────────────────────
   Gehört zu js/components/onboarding_tour.js und wird von BEIDEN
   Einführungen benutzt: der im Gastmodus und der nach der ersten
   Anmeldung. Die Stile des Namensfensters stehen weiterhin in
   guest_onboarding.css — das gibt es nur im Gastmodus.

   Der Ausschnitt entsteht aus einem riesigen Schlagschatten statt aus
   einer Maske. Dadurch lassen sich Position und Grösse weich von
   Schritt zu Schritt bewegen, und das freigestellte Element bleibt
   unverändert sichtbar.
   ════════════════════════════════════════════════════════════════ */

/* Fängt jeden Klick ab. Während der Einführung soll nichts in der
   Anwendung ausgelöst werden — die Schritte steuern die Ansicht
   selbst weiter, damit die Reihenfolge nicht auseinanderläuft. */
.gt-shade {
    position: fixed;
    inset: 0;
    z-index: 6000;
    background: transparent;
    cursor: default;
}

.gt-spot {
    position: fixed;
    z-index: 6001;
    border-radius: 14px;
    pointer-events: none;
    box-shadow: 0 0 0 9999px rgba(14, 18, 30, 0.6);
    outline: 2px solid var(--accent-blue);
    outline-offset: 3px;
    transition: top    0.42s cubic-bezier(0.22, 1, 0.36, 1),
                left   0.42s cubic-bezier(0.22, 1, 0.36, 1),
                width  0.42s cubic-bezier(0.22, 1, 0.36, 1),
                height 0.42s cubic-bezier(0.22, 1, 0.36, 1),
                border-radius 0.3s ease;
}

/* Ohne Ziel (Begrüssung, Abschluss): kein Ausschnitt, nur Abdunklung. */
.gt-spot.gt-spot-leer {
    top: 50%; left: 50%;
    width: 0; height: 0;
    outline-color: transparent;
}

/* Ein einzelner, langsam auslaufender Ring statt Dauerpulsieren.
   Er zeigt beim Wechsel, wohin man schauen soll, und beruhigt sich
   dann wieder — dauerhaftes Blinken lenkt vom Text ab. */
.gt-ring {
    position: fixed;
    z-index: 6001;
    border-radius: 16px;
    pointer-events: none;
    border: 2px solid var(--accent-blue);
    opacity: 0;
}
.gt-ring.gt-ring-an { animation: gtRing 1.1s ease-out 2; }
@keyframes gtRing {
    0%   { opacity: 0.85; transform: scale(1); }
    100% { opacity: 0;    transform: scale(1.14); }
}

/* ─── Sprechblase ─────────────────────────────────────────────── */

.gt-tip {
    position: fixed;
    z-index: 6002;
    width: 336px;
    max-width: calc(100vw - 32px);
    padding: 20px 22px 18px;
    border-radius: 18px;
    background: #ffffff;
    color: rgb(56, 71, 79);
    box-shadow: 0 18px 48px rgba(12, 16, 28, 0.28);
    font-family: inherit;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.22s ease, transform 0.22s ease,
                top 0.42s cubic-bezier(0.22, 1, 0.36, 1),
                left 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
.gt-tip.gt-tip-an { opacity: 1; transform: translateY(0); }

[data-theme="dark"] .gt-tip {
    background: #232634;
    color: #E8EAF0;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
}

/* Mittig stehende Schritte (Begrüssung, Abschluss) sind etwas
   breiter und bekommen mehr Luft — sie tragen mehr Text. */
.gt-tip.gt-tip-mitte {
    width: 400px;
    padding: 26px 26px 22px;
    text-align: center;
}
.gt-tip.gt-tip-mitte .gt-fuss { justify-content: center; }

.gt-kopf {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
}
.gt-zaehler {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--accent-blue);
}
/* Kennzeichnet Schritte, die es nur in einem bezahlten Paket gibt. */
.gt-paket {
    margin-left: auto;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--accent-blue);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
}
.gt-tip.gt-tip-mitte .gt-kopf { justify-content: center; }
.gt-tip.gt-tip-mitte .gt-paket { margin-left: 0; }

.gt-titel {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.3px;
    line-height: 1.3;
    margin: 0 0 7px;
}
.gt-tip.gt-tip-mitte .gt-titel { font-size: 21px; }

.gt-text {
    font-size: 13.5px;
    line-height: 1.6;
    margin: 0;
    color: rgba(56, 71, 79, 0.82);
}
[data-theme="dark"] .gt-text { color: rgba(232, 234, 240, 0.76); }
.gt-text strong { font-weight: 700; color: inherit; }

/* Tastenkürzel und Bedienhinweise im Fliesstext */
.gt-taste {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 5px;
    background: rgba(79, 103, 115, 0.12);
    font-size: 12px;
    font-weight: 700;
}
[data-theme="dark"] .gt-taste { background: rgba(255, 255, 255, 0.12); }

/* Fortschrittspunkte */
.gt-punkte {
    display: flex;
    gap: 5px;
    margin: 16px 0 14px;
    flex-wrap: wrap;
}
.gt-tip.gt-tip-mitte .gt-punkte { justify-content: center; }
.gt-punkt {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(79, 103, 115, 0.2);
    transition: background 0.25s ease, width 0.25s ease;
}
[data-theme="dark"] .gt-punkt { background: rgba(255, 255, 255, 0.2); }
.gt-punkt.gt-punkt-aktiv { width: 18px; border-radius: 3px; background: var(--accent-blue); }
.gt-punkt.gt-punkt-fertig { background: var(--accent-blue); opacity: 0.45; }

.gt-fuss {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.gt-fuss-links { margin-right: auto; }

.gt-btn {
    padding: 9px 16px;
    border: none;
    border-radius: 11px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.18s ease, transform 0.14s ease, background 0.18s ease;
}
.gt-btn:active { transform: translateY(1px); }
.gt-btn[disabled] { opacity: 0.55; cursor: default; }

.gt-btn-haupt { background: var(--accent-blue); color: #fff; padding: 10px 20px; }
.gt-btn-haupt:hover { opacity: 0.9; }

.gt-btn-still {
    background: rgba(79, 103, 115, 0.1);
    color: rgba(56, 71, 79, 0.85);
}
.gt-btn-still:hover { background: rgba(79, 103, 115, 0.16); }
[data-theme="dark"] .gt-btn-still {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(232, 234, 240, 0.85);
}
[data-theme="dark"] .gt-btn-still:hover { background: rgba(255, 255, 255, 0.16); }

.gt-btn-text {
    background: none;
    padding: 9px 4px;
    color: rgba(56, 71, 79, 0.5);
    font-weight: 600;
}
.gt-btn-text:hover { color: rgba(56, 71, 79, 0.8); }
[data-theme="dark"] .gt-btn-text { color: rgba(232, 234, 240, 0.5); }
[data-theme="dark"] .gt-btn-text:hover { color: rgba(232, 234, 240, 0.85); }

/* ─── Kleine Schirme: Sprechblase als Blatt am Rand ──────────────
   Ein 336 px breites Kästchen neben einem Knopf ist auf einem Telefon
   nicht unterzubringen. Die Blase spannt sich deshalb über die volle
   Breite und legt sich an einen der beiden waagerechten Ränder.

   WELCHER RAND, entscheidet das Skript und nicht das Stylesheet:
   Unten ist die gewohnte Lage, aber genau dort sitzen auf dem Telefon
   die wichtigsten Bedienelemente — die Navigationsleiste und der
   Plus-Knopf. Zeigt ein Schritt auf eines davon, verdeckte die Blase
   ausgerechnet das, worüber sie spricht. onboarding_tour.js misst
   deshalb beide Lagen aus und nimmt die, die weniger vom erklärten
   Element überdeckt. */
@media (max-width: 620px) {
    .gt-tip,
    .gt-tip.gt-tip-mitte {
        width: auto;
        max-width: none;
        left: 10px !important;
        right: 10px;
        top: auto !important;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        border-radius: 20px;
        text-align: left;
        transform: translateY(10px);
    }
    .gt-tip.gt-tip-an { transform: translateY(0); }

    /* Obere Lage — gesetzt vom Skript, wenn unten das Ziel verdeckt wäre. */
    .gt-tip.gt-tip-oben {
        top: calc(10px + env(safe-area-inset-top, 0px)) !important;
        bottom: auto;
        transform: translateY(-10px);
    }
    .gt-tip.gt-tip-oben.gt-tip-an { transform: translateY(0); }

    .gt-tip.gt-tip-mitte .gt-fuss,
    .gt-tip.gt-tip-mitte .gt-kopf,
    .gt-tip.gt-tip-mitte .gt-punkte { justify-content: flex-start; }
    .gt-tip.gt-tip-mitte .gt-paket { margin-left: auto; }
    .gt-tip.gt-tip-mitte .gt-titel { font-size: 18px; }
    .gt-btn { padding: 11px 16px; font-size: 13px; }

    /* Sehr kleine Geräte: Der Text darf notfalls scrollen, statt die
       Knopfleiste aus dem Bild zu schieben. */
    .gt-tip { max-height: calc(100vh - 24px); overflow-y: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .gt-spot, .gt-tip { transition: none; }
    .gt-ring.gt-ring-an { animation: none; }
}