/* ==========================================================================
   I-Ging-Legung mit Herrn Hao — eigenes Branding
   ==========================================================================
   Farbwelt: tiefe Wasser-Töne, Jade, Bronze. KEIN Gold wie in der Séance
   (das ist Madame Wangaras Raum) und KEIN mystisches Orange.

   WICHTIG: Diese Seite laedt /css/style.css, aber die Regel gilt trotzdem:
   jede CSS-Variable braucht einen Literal-Fallback (var(--x, #wert)),
   damit die Seite auch ohne style.css lesbar bleibt.
   ========================================================================== */

.ig-legung-page {
    --ig-ink: #1b2b2b;
    --ig-ink-soft: #3d5250;
    --ig-ink-light: #b8c9c5;
    --ig-jade: #2f6b5e;
    --ig-jade-deep: #1d453d;
    --ig-jade-light: #7fc4b2;
    --ig-bronze: #8a6a3a;
    --ig-paper: #f2efe6;
    --ig-line: #d8d2c0;
}

.ig-legung-header {
    border-bottom: 2px solid var(--ig-jade, #2f6b5e);
}

/* --- Szenen-Header: Herr Hao im Tempel am Feuer (28.10.2026) ---
   Zwei Szenen wie in der Séance: Szene 1 = Tempel-Aussenansicht (Klick
   "Tritt ein"), Szene 2 = Innenraum mit Herrn Hao am Steinaltar.
   Eigene Farbwelt (Jade/Bronze), kein Gold.
   Jede Variable mit Literal-Fallback, damit die Seite ohne style.css
   lesbar bleibt. */
.ig-scene {
    position: relative;
    min-height: clamp(280px, 38vh, 400px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    isolation: isolate;
    border-radius: 4px;
    margin-bottom: 2rem;
}
.ig-scene__bg {
    position: absolute;
    inset: 0;
    background: url('/images/iging/scene-temple.webp') center 45% / cover no-repeat;
    z-index: -2;
}
/* Szene 1: Tempel von aussen. Der Feuerkern liegt links der Mitte
   (Brenzschale neben der Tuer) -> Ausschnitt nach links verschieben. */
.ig-scene--outside .ig-scene__bg {
    background-image: url('/images/iging/scene-temple-outside.webp');
    background-position: 62% 50%;
}
/* Szene 2: Innenraum mit Herrn Hao. Die Figur sitzt mittig-links am
   Steinaltar, das Feuer links im Bild. */
.ig-scene--inside .ig-scene__bg {
    background-image: url('/images/iging/scene-altar.webp');
    background-position: 42% 50%;
}
.ig-scene--outside {
    min-height: clamp(320px, 46vh, 460px);
}
.ig-scene--inside {
    min-height: clamp(300px, 42vh, 440px);
}
.ig-scene__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(6, 12, 16, 0.35) 0%, rgba(6, 12, 16, 0.05) 30%, rgba(6, 12, 16, 0.55) 72%, rgba(6, 12, 16, 0.9) 100%);
}
.ig-scene__content {
    position: relative;
    text-align: center;
    padding: 0 1.5rem 1.8rem;
    max-width: 40rem;
}
.ig-scene__kicker {
    display: inline-block;
    font-size: 0.74rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--ig-jade-light, #7fc4b2);
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 10px rgba(4, 9, 12, 0.95);
}
.ig-scene__text {
    font-size: clamp(0.98rem, 2.1vw, 1.12rem);
    line-height: 1.6;
    color: var(--ig-paper, #f2efe6);
    margin: 0;
    text-shadow: 0 2px 12px rgba(4, 9, 12, 0.98), 0 0 22px rgba(4, 9, 12, 0.9);
}

/* ---------- Szene 1: Eintritts-Button ---------- */
.ig-scene__enter {
    display: inline-block;
    margin-top: 1.1rem;
    padding: 0.7rem 1.7rem;
    border: 1px solid var(--ig-jade-light, #7fc4b2);
    border-radius: 999px;
    background: rgba(12, 26, 24, 0.72);
    color: var(--ig-jade-light, #7fc4b2);
    font-family: inherit;
    font-size: 0.98rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}
.ig-scene__enter:hover,
.ig-scene__enter:focus-visible {
    background: var(--ig-jade, #2f6b5e);
    color: #fff;
}

/* ---------- Szene-Wechsel ---------- */
/* Das [hidden]-Attribut verliert gegen die display:flex-Regel oben —
   ohne diese Regel waere Szene 2 sofort sichtbar. */
.ig-scene[hidden],
#ig-throw-box[hidden] {
    display: none !important;
}
.ig-scene--leaving {
    opacity: 0;
    transform: scale(1.03);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.ig-scene--entering {
    opacity: 0;
    transform: scale(0.98);
    animation: ig-scene-in 0.7s ease forwards;
}
@keyframes ig-scene-in {
    to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .ig-scene--leaving { transition: none; }
    .ig-scene--entering { animation: none; opacity: 1; transform: none; }
}

/* ---------- Methoden-Wahl (Schritt 2) ---------- */
.ig-methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
    margin-top: 1.2rem;
}
.ig-method {
    display: block;
    text-align: left;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--ig-line, #d8d2c0);
    border-radius: 8px;
    background: var(--ig-paper, #f2efe6);
    color: var(--ig-ink, #1b2b2b);
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.ig-method:hover {
    border-color: var(--ig-jade, #2f6b5e);
    transform: translateY(-2px);
}
.ig-method--active {
    border-color: var(--ig-jade, #2f6b5e);
    border-width: 2px;
    box-shadow: 0 0 0 3px rgba(47, 107, 94, 0.16);
}
.ig-method__title {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ig-jade-deep, #1d453d);
    margin-bottom: 0.4rem;
}
.ig-method__text {
    display: block;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--ig-ink-soft, #3d5250);
}

/* ---------- Die sechs Linien (Schritt 3) ---------- */
.ig-lines {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 1.3rem 0;
    padding: 1.1rem 1rem;
    background: var(--ig-paper, #f2efe6);
    border: 1px solid var(--ig-line, #d8d2c0);
    border-radius: 8px;
}
.ig-line-slot {
    display: grid;
    grid-template-columns: 1.6rem 5.5rem 1fr;
    align-items: center;
    gap: 0.7rem;
    min-height: 1.9rem;
}
.ig-line-slot--empty { opacity: 0.45; }
.ig-line-slot--new { animation: ig-line-in 0.45s ease; }
@keyframes ig-line-in {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
    .ig-line-slot--new { animation: none; }
}
.ig-line-slot__pos {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--ig-bronze, #8a6a3a);
}
.ig-line-slot__hint {
    font-size: 0.82rem;
    font-style: italic;
    color: var(--ig-ink-soft, #3d5250);
}
.ig-line-slot__label {
    font-size: 0.82rem;
    color: var(--ig-ink-soft, #3d5250);
}
/* Die Linie selbst: ganz (yang) oder zerbrochen (yin) */
.ig-line {
    display: block;
    height: 0.7rem;
    border-radius: 2px;
    background: var(--ig-ink, #1b2b2b);
}
.ig-line--yin {
    background: none;
    border-top: 3px solid var(--ig-ink, #1b2b2b);
    border-bottom: 3px solid var(--ig-ink, #1b2b2b);
    height: 0.72rem;
    background-image: linear-gradient(to right, var(--ig-ink, #1b2b2b) 0 42%, transparent 42% 58%, var(--ig-ink, #1b2b2b) 58% 100%);
}
/* Wandelnde Linien: hell (das "o") bzw. gestrichelt (das "x") */
.ig-line--changing.ig-line--yang {
    background-image: linear-gradient(to right, var(--ig-jade, #2f6b5e) 0 42%, transparent 42% 58%, var(--ig-jade, #2f6b5e) 58% 100%);
}
.ig-line--changing.ig-line--yin {
    border-color: var(--ig-jade, #2f6b5e);
    background-image: linear-gradient(to right, var(--ig-jade, #2f6b5e) 0 42%, transparent 42% 58%, var(--ig-jade, #2f6b5e) 58% 100%);
}

/* ---------- Wurf-Aktionen ---------- */
.ig-throw-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.8rem;
}
.ig-throw-actions .ig-legung-btn { margin-top: 0; }
.ig-throw-hint {
    font-size: 0.88rem;
    color: var(--ig-ink-light, #b8c9c5);
    flex: 1 1 16rem;
}
.ig-cast-status {
    font-size: 0.92rem;
    color: var(--ig-jade-light, #7fc4b2);
    margin: 0 0 0.6rem;
    min-height: 1.2rem;
}

/* ---------- Hexagramm-Anzeige ---------- */
.ig-cast-box {
    background: var(--ig-paper, #f2efe6);
    border: 1px solid var(--ig-line, #d8d2c0);
    border-radius: 8px;
    padding: 1.1rem 1.2rem;
    margin-bottom: 1rem;
}
.ig-cast-empty {
    margin: 0;
    font-size: 0.92rem;
    font-style: italic;
    color: var(--ig-ink-soft, #3d5250);
}
.ig-cast-hex {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}
.ig-cast-hex__uni {
    font-size: 1.9rem;
    line-height: 1;
    color: var(--ig-jade-deep, #1d453d);
}
.ig-cast-hex__name {
    font-size: 1.18rem;
    font-weight: 700;
    color: var(--ig-jade-deep, #1d453d);
}
.ig-cast-hex__nr {
    font-size: 0.85rem;
    color: var(--ig-bronze, #8a6a3a);
}
.ig-cast-trans,
.ig-cast-changing {
    margin: 0.25rem 0 0;
    font-size: 0.92rem;
    color: var(--ig-ink-soft, #3d5250);
}
.ig-cast-trans strong,
.ig-cast-changing strong {
    color: var(--ig-jade-deep, #1d453d);
}

/* ---------- Hinweis unter dem Fragefeld ---------- */
.ig-legung-hint {
    font-size: 0.88rem;
    font-style: italic;
    color: var(--ig-ink-light, #b8c9c5);
    margin: 0.5rem 0 0;
}
.ig-legung-error {
    color: #e08a7c;
    font-weight: 600;
    margin: 0.8rem 0 0;
}

@media (max-width: 640px) {
    .ig-scene { min-height: 240px; }
    .ig-scene__bg { background-position: 58% 45%; }
    .ig-scene--outside .ig-scene__bg { background-position: 64% 50%; }
    .ig-scene--inside .ig-scene__bg { background-position: 38% 50%; }
    .ig-line-slot { grid-template-columns: 1.4rem 4.4rem 1fr; gap: 0.5rem; }
}

.ig-legung-intro,
.ig-legung-steps,
.ig-legung-panel {
    border-left: 3px solid var(--ig-jade, #2f6b5e);
    padding-left: 1.1rem;
}

.ig-legung-note {
    font-size: 0.92rem;
    /* Auf dunklem Seitenhintergrund braucht es eine helle Variante von
       --ig-ink-soft (Kontrast 2.31:1 mit der dunklen ist zu schwach). */
    color: var(--ig-ink-light, #b8c9c5);
    font-style: italic;
    border-left: 2px solid var(--ig-line, #d8d2c0);
    padding-left: 0.8rem;
    margin-top: 1.2rem;
}

/* ---------- Zustands-Zeile (Hexagramm) ---------- */
.ig-legung-state {
    background: var(--ig-paper, #f2efe6);
    border: 1px solid var(--ig-line, #d8d2c0);
    border-radius: 6px;
    padding: 0.9rem 1.1rem;
    margin: 1.2rem 0;
}

.ig-legung-hex {
    margin: 0;
    color: var(--ig-ink-soft, #3d5250);
    font-size: 0.95rem;
}

.ig-legung-hex strong {
    color: var(--ig-jade-light, #7fc4b2);
    font-size: 1.05rem;
}

/* ---------- Formular ---------- */
.ig-legung-label {
    display: block;
    font-weight: 600;
    /* Der Seitenhintergrund ist dunkel (style.css). --ig-ink ist ein dunkles
       Tiefgruen und damit auf dem dunklen Grund unsichtbar (Kontrast 1.31:1).
       Das Label steht AUSSERHALB der hellen Panels, also helle Schrift. */
    color: var(--ig-paper, #f2efe6);
    margin-bottom: 0.4rem;
}

.ig-legung-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--ig-line, #d8d2c0);
    border-radius: 6px;
    background: #fff;
    color: var(--ig-ink, #1b2b2b);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
    resize: vertical;
}

.ig-legung-textarea:focus {
    outline: 2px solid var(--ig-jade, #2f6b5e);
    outline-offset: 1px;
    border-color: var(--ig-jade, #2f6b5e);
}

/* ---------- Buttons ---------- */
.ig-legung-btn {
    display: inline-block;
    margin-top: 1.1rem;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 6px;
    background: var(--ig-jade, #2f6b5e);
    color: #fff;
    font-size: 1rem;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease;
}

.ig-legung-btn:hover:not(:disabled) {
    background: var(--ig-jade-deep, #1d453d);
}

.ig-legung-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.ig-legung-cta {
    display: inline-block;
    padding: 0.55rem 1.1rem;
    border: 1px solid var(--ig-jade, #2f6b5e);
    border-radius: 6px;
    /* Der CTA steht auf dem dunklen Seitenhintergrund. --ig-jade-deep ist ein
       dunkles Tiefgruen (Kontrast 1.81:1 auf dunklem Grund) und damit zu
       schwarz. Fuer Fliesstext auf dunklem Grund: helles Jade. */
    color: var(--ig-jade-light, #7fc4b2);
    text-decoration: none;
    font-weight: 600;
}

.ig-legung-cta:hover {
    background: var(--ig-jade-deep, #1d453d);
    color: var(--ig-paper, #f2efe6);
}

.ig-legung-cost {
    margin-top: 0.7rem;
    font-size: 0.88rem;
    color: var(--ig-ink-light, #b8c9c5);
}

/* ---------- Ausgabe ---------- */
.ig-legung-out {
    display: none;
}

.ig-legung-out.visible {
    display: block;
    border-left: 3px solid var(--ig-bronze, #8a6a3a);
    padding-left: 1.1rem;
}

.ig-legung-loading {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--ig-ink-soft, #3d5250);
    padding: 1rem 0;
}

.ig-spin {
    width: 18px;
    height: 18px;
    border: 2px solid var(--ig-line, #d8d2c0);
    border-top-color: var(--ig-jade, #2f6b5e);
    border-radius: 50%;
    animation: ig-spin 0.9s linear infinite;
    flex: none;
}

@keyframes ig-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .ig-spin { animation: none; }
}

/* ---------- Reading ---------- */
.ig-reading-headline {
    font-size: 1.35rem;
    color: var(--ig-jade-light, #7fc4b2);
    margin: 0.4rem 0 0.2rem;
    line-height: 1.35;
}

.ig-reading-by {
    margin: 0 0 1.2rem;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ig-bronze, #8a6a3a);
}

.ig-reading-block {
    margin-bottom: 1.3rem;
}

.ig-reading-block h4 {
    margin: 0 0 0.4rem;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    /* Die Reading-Ausgabe steht auf dem dunklen Seitenhintergrund. */
    color: var(--ig-ink-light, #b8c9c5);
}

.ig-reading-block p {
    margin: 0;
    line-height: 1.65;
}

.ig-reading-line {
    padding: 0.7rem 0 0.7rem 0.9rem;
    border-left: 2px solid var(--ig-line, #d8d2c0);
    margin-bottom: 0.6rem;
}

.ig-reading-lineno {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ig-bronze, #8a6a3a);
    margin-bottom: 0.25rem;
}

.ig-reading-advice {
    background: var(--ig-paper, #f2efe6);
    border-radius: 6px;
    padding: 1rem 1.1rem;
}

.ig-reading-closing {
    font-style: italic;
    color: var(--ig-ink-light, #b8c9c5);
    border-top: 1px solid var(--ig-line, #d8d2c0);
    padding-top: 1rem;
}

.ig-reading-disclaimer {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ig-line, #d8d2c0);
    font-size: 0.85rem;
    color: var(--ig-ink-light, #b8c9c5);
}

.ig-reading-paid {
    font-size: 0.85rem;
    color: var(--ig-jade, #2f6b5e);
}

/* ---------- Gate (Anmeldung / Bezahlung) ---------- */
.ig-legung-gate {
    background: var(--ig-paper, #f2efe6);
    border: 1px solid var(--ig-line, #d8d2c0);
    border-radius: 6px;
    padding: 1.2rem 1.3rem;
    margin: 1rem 0;
}

.ig-legung-gate h3 {
    margin: 0 0 0.5rem;
    color: var(--ig-jade-deep, #1d453d);
}

.ig-legung-gate-actions {
    margin-top: 0.4rem;
}

.ig-legung-error {
    color: #8c3a2e;
    font-weight: 600;
}

/* ---------- Mobil ---------- */
@media (max-width: 600px) {
    .ig-legung-intro,
    .ig-legung-steps,
    .ig-legung-panel,
    .ig-legung-out.visible {
        padding-left: 0.8rem;
    }
    .ig-legung-btn { width: 100%; }
}