/* =========================================================
   ASTRONAUTENBAR · MEDITIEREN · V1
   ========================================================= */

.meditation-page {
    --med-green: #39D98A;
    --med-green-soft: #6FBF8F;
    --med-green-deep: #238D68;
    --med-green-pale: #9CE3B9;
    --med-line: rgba(57,217,138,.40);
}

.meditation-main { padding-bottom: 12px; }
.meditation-back { margin-bottom: 30px; }

.meditation-back a {
    color: var(--cyan);
    text-decoration: none;
    font-size: var(--font-meta);
    letter-spacing: .05em;
}

.meditation-back a:hover { color: var(--accent); }

.meditation-board-label {
    color: var(--med-green-soft);
    font-size: var(--font-meta);
    letter-spacing: .10em;
}

.meditation-title {
    margin: 8px 0 0;
    color: var(--med-green);
    font-size: 1.45rem;
    line-height: 1.25;
    letter-spacing: .07em;
    text-shadow: 0 0 9px rgba(57,217,138,.12);
}

.meditation-board {
    margin-top: 28px;
    padding: 13px 0;
    border-top: 1px solid var(--med-line);
    border-bottom: 1px solid var(--med-line);
    color: var(--cyan);
    font-size: var(--font-system);
    line-height: 1.9;
    letter-spacing: .025em;
}

.meditation-board-green { color: var(--med-green); }
.meditation-board-soft { color: var(--med-green-soft); }

.meditation-flicker-a { animation: meditationFlickerA 9.3s steps(1,end) infinite; }
.meditation-flicker-b { animation: meditationFlickerB 12.1s steps(1,end) infinite; }

@keyframes meditationFlickerA {
    0%, 90%, 100% { opacity: 1; }
    91% { opacity: .26; }
    93% { opacity: .9; }
    94% { opacity: .45; }
    96% { opacity: 1; }
}

@keyframes meditationFlickerB {
    0%, 94%, 100% { opacity: 1; }
    95% { opacity: .3; }
    97% { opacity: 1; }
}

/* Erklärung */

.meditation-explainer {
    max-width: 760px;
    margin-top: 32px;
    border-top: 1px solid rgba(57,217,138,.22);
    border-bottom: 1px solid rgba(57,217,138,.22);
}

.meditation-explainer summary {
    min-height: 56px;
    padding: 14px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    list-style: none;
    color: var(--med-green);
    font-size: var(--font-system);
    letter-spacing: .07em;
}

.meditation-explainer summary::-webkit-details-marker { display: none; }
.meditation-explainer-prompt { color: var(--med-green); }
.meditation-explainer-title { flex: 0 1 auto; }

.meditation-explainer-face {
    margin-left: auto;
    display: inline-block;
    min-width: 4ch;
    text-align: right;
    color: var(--med-green) !important;
    opacity: 1 !important;
}

.meditation-explainer-face[data-mood="blink"] { transform: translateY(1px); }
.meditation-explainer-face[data-mood="happy"] { color: var(--med-green-soft) !important; }

.meditation-intro {
    margin: 0;
    padding: 8px 28px 25px;
    border-left: 1px solid var(--med-line);
    background: linear-gradient(90deg, rgba(57,217,138,.038), rgba(57,217,138,0));
    color: var(--med-green-soft);
    font-size: 1rem;
    line-height: 1.75;
}

.meditation-intro p { margin: 0 0 1.05em; }
.meditation-intro p:last-child { margin-bottom: 0; }
.meditation-intro p:first-child { color: var(--med-green); }

/* Einstellungen */

.meditation-tool {
    max-width: 760px;
    margin-top: 42px;
    padding-top: 26px;
    border-top: 1px solid var(--med-line);
}

.meditation-settings {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px 28px;
}

.meditation-setting-block { min-width: 0; }

.meditation-control-label {
    margin-bottom: 10px;
    color: var(--med-green-soft);
    font-size: var(--font-meta);
    letter-spacing: .10em;
}

.meditation-duration-row,
.meditation-interval-row {
    display: flex;
    align-items: stretch;
    gap: 7px;
}

.meditation-step,
.meditation-free,
.meditation-interval-toggle,
.meditation-sound-toggle,
.meditation-action {
    appearance: none;
    border-radius: 1px;
    font: inherit;
    cursor: pointer;
    background: transparent;
}

.meditation-step {
    width: 38px;
    border: 1px solid rgba(57,217,138,.25);
    color: var(--med-green-soft);
    font-size: 1rem;
}

.meditation-number-wrap {
    min-width: 96px;
    padding: 0 9px;
    border: 1px solid rgba(57,217,138,.34);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: var(--med-green-soft);
    font-size: var(--font-meta);
}

.meditation-number {
    width: 48px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--med-green);
    font: inherit;
    text-align: right;
    -moz-appearance: textfield;
}

.meditation-number::-webkit-outer-spin-button,
.meditation-number::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.meditation-free,
.meditation-interval-toggle {
    padding: 8px 12px;
    border: 1px solid rgba(57,217,138,.24);
    color: rgba(111,191,143,.72);
    font-size: var(--font-meta);
    letter-spacing: .05em;
}

.meditation-step:hover,
.meditation-free:hover,
.meditation-interval-toggle:hover,
.meditation-action:hover,
.meditation-sound-toggle:hover {
    border-color: rgba(57,217,138,.65);
    color: var(--med-green);
}

.meditation-free.is-on,
.meditation-interval-toggle.is-on,
.meditation-sound-toggle.is-on {
    border-color: rgba(57,217,138,.62);
    background: rgba(57,217,138,.04);
    color: var(--med-green);
}

.meditation-sound-toggle {
    grid-column: 1 / -1;
    justify-self: start;
    padding: 8px 12px;
    border: 1px solid rgba(57,217,138,.22);
    color: rgba(111,191,143,.72);
    font-size: var(--font-meta);
    letter-spacing: .05em;
}

/* Meditationsfeld */

.meditation-stage {
    position: relative;
    width: min(100%, 560px);
    aspect-ratio: 1 / 1;
    margin: 40px auto 24px;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.meditation-stage::before {
    content: "";
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(57,217,138,.038) 0%,
        rgba(57,217,138,.016) 38%,
        rgba(57,217,138,0) 72%);
    animation: meditationAmbient 10s ease-in-out infinite;
}

@keyframes meditationAmbient {
    0%,100% { opacity: .52; transform: scale(.94); }
    50% { opacity: .95; transform: scale(1.05); }
}

.meditation-orbit {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(57,217,138,.09);
}

.meditation-orbit::after {
    content: "";
    position: absolute;
    width: 3px;
    height: 3px;
    left: 50%;
    top: -2px;
    border-radius: 50%;
    background: rgba(57,217,138,.58);
    box-shadow: 0 0 7px rgba(57,217,138,.28);
}

.meditation-orbit-a {
    width: 87%;
    height: 87%;
    animation: medOrbitA 32s linear infinite;
}

.meditation-orbit-b {
    width: 70%;
    height: 70%;
    border-style: dashed;
    opacity: .58;
    animation: medOrbitB 23s linear infinite;
}

.meditation-orbit-c {
    width: 53%;
    height: 53%;
    opacity: .46;
    animation: medOrbitA 17s linear infinite;
}

@keyframes medOrbitA { to { transform: rotate(360deg); } }
@keyframes medOrbitB { to { transform: rotate(-360deg); } }

.meditation-field {
    position: absolute;
    width: 54%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    animation: meditationFieldBreath 9s ease-in-out infinite;
}

@keyframes meditationFieldBreath {
    0%,100% { transform: scale(.92); opacity: .76; }
    50% { transform: scale(1.035); opacity: 1; }
}

.meditation-glow {
    position: absolute;
    inset: 7%;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(57,217,138,.11),
        rgba(57,217,138,.035) 48%,
        transparent 72%);
    filter: blur(5px);
}

.meditation-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(57,217,138,.25);
}

.meditation-ring-1 { inset: 5%; opacity: .25; }
.meditation-ring-2 { inset: 14%; opacity: .43; }
.meditation-ring-3 { inset: 25%; opacity: .30; }
.meditation-ring-4 { inset: 37%; opacity: .52; }

.meditation-field.is-running .meditation-ring-1 {
    animation: medRipple 7.5s ease-out infinite;
}
.meditation-field.is-running .meditation-ring-2 {
    animation: medRipple 7.5s 2.5s ease-out infinite;
}
.meditation-field.is-running .meditation-ring-3 {
    animation: medRipple 7.5s 5s ease-out infinite;
}

@keyframes medRipple {
    0% { transform: scale(.78); opacity: .06; }
    42% { opacity: .42; }
    100% { transform: scale(1.34); opacity: 0; }
}

.meditation-readout {
    position: relative;
    z-index: 5;
    text-align: center;
    pointer-events: none;
}

.meditation-state {
    color: var(--med-green);
    font-size: 1.05rem;
    letter-spacing: .12em;
}

.meditation-time {
    margin-top: 7px;
    color: var(--med-green-soft);
    font-size: 2rem;
    line-height: 1;
    letter-spacing: .04em;
}

.meditation-progress {
    margin-top: 10px;
    color: rgba(111,191,143,.66);
    font-size: var(--font-micro);
    letter-spacing: .075em;
}

/* Aktionen */

.meditation-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.meditation-action {
    min-width: 112px;
    padding: 10px 16px;
    border: 1px solid rgba(57,217,138,.34);
    color: var(--med-green-soft);
    font-size: var(--font-system);
    letter-spacing: .06em;
}

.meditation-start { color: var(--med-green); }

.meditation-hint {
    margin-top: 15px;
    color: rgba(111,191,143,.62);
    text-align: center;
    font-size: var(--font-micro);
    letter-spacing: .055em;
}

.meditation-system-message {
    max-width: 760px;
    margin-top: 38px;
    color: var(--cyan);
    font-size: var(--font-system);
    line-height: 1.75;
}

/* Mobile */

@media (max-width: 620px) {
    .meditation-settings {
        grid-template-columns: 1fr;
    }

    .meditation-sound-toggle {
        grid-column: auto;
    }

    .meditation-stage {
        width: min(94vw, 390px);
        max-width: 100%;
        margin-top: 30px;
    }

    .meditation-intro {
        padding: 8px 16px 21px;
        font-size: .96rem;
    }

    .meditation-duration-row,
    .meditation-interval-row {
        flex-wrap: wrap;
    }

    .meditation-board {
        font-size: var(--font-meta);
        line-height: 1.85;
    }
}

@media (prefers-reduced-motion: reduce) {
    .meditation-flicker-a,
    .meditation-flicker-b,
    .meditation-stage::before,
    .meditation-orbit,
    .meditation-field,
    .meditation-ring {
        animation: none !important;
    }
}


/* =========================================================
   V2 · REDAKTIONELLE ÜBERSCHRIFT + FORSCHUNGSNOTIZ
   ========================================================= */

.meditation-intro h2 {
    margin: 2px 0 20px;
    color: var(--med-green);
    font-size: 1.12rem;
    line-height: 1.45;
    letter-spacing: .025em;
    font-weight: 600;
}

.meditation-research {
    max-width: 760px;
    margin-top: 34px;
    border-top: 1px solid rgba(57,217,138,.18);
    border-bottom: 1px solid rgba(57,217,138,.18);
}

.meditation-research summary {
    padding: 13px 0;
    cursor: pointer;
    list-style: none;
    color: rgba(111,191,143,.72);
    font-size: var(--font-meta);
    letter-spacing: .10em;
}

.meditation-research summary::-webkit-details-marker {
    display: none;
}

.meditation-research summary::before {
    content: "> ";
    color: var(--med-green);
}

.meditation-research[open] summary {
    color: var(--med-green);
}

.meditation-research-body {
    padding: 4px 28px 24px;
    border-left: 1px solid rgba(57,217,138,.26);
    color: var(--med-green-soft);
    font-size: .93rem;
    line-height: 1.7;
}

.meditation-research-body p {
    margin: 0 0 1em;
}

.meditation-research-caution {
    color: var(--med-green);
}

.meditation-research-sources {
    margin-top: 18px;
    color: rgba(111,191,143,.58);
    font-size: var(--font-micro);
    line-height: 1.6;
    letter-spacing: .035em;
}

@media (max-width: 620px) {
    .meditation-intro h2 {
        font-size: 1.05rem;
    }

    .meditation-research-body {
        padding: 4px 16px 21px;
    }
}