/* Atem-Shot zum Mitatmen (seit 28.10.2026), Logik in js/atem-shot.js.
   Kurzfassung des großen Players der App: Farben, Schriften und Bühne aus app/app.css (.pfull.is-ab, .pf-ab-*, .ab-*).
   --ab-f ist der Füllstand der Lunge (0 bis 1), data-abform die Form. */
@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url(/app/fonts/Anton-normal-400-latin.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url(/app/fonts/BarlowCondensed-normal-600-latin.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(/app/fonts/BarlowCondensed-normal-700-latin.woff2) format('woff2'); }

/* Farben je Form wie in der App */
.ash, .ab-root { --ab-c: #9fd6ff; --ab-c2: #5f8dff; --ab-ink: #eef4ff; --ab-mute: rgba(238,244,255,0.56); --ab-line: rgba(238,244,255,0.12); --ab-bg: #05060d; }
:is(.ash, .ab-root):is([data-abform="ring"], [data-abform="strahl"]) { --ab-c: #f0cf9f; --ab-c2: #c4813c; }
:is(.ash, .ab-root)[data-abform="welle"] { --ab-c: #8ff0c8; --ab-c2: #1fae86; }
:is(.ash, .ab-root)[data-abform="feuer"] { --ab-c: #ffb35c; --ab-c2: #ff4d1f; --ab-ink: #fff3e8; --ab-mute: rgba(255,243,232,0.58); --ab-line: rgba(255,243,232,0.12); --ab-bg: #0b0503; }
:is(.ash, .ab-root)[data-abform="spirale"] { --ab-c: #ff9f9a; --ab-c2: #e04f5a; --ab-ink: #fff1f0; --ab-mute: rgba(255,241,240,0.58); --ab-line: rgba(255,241,240,0.12); --ab-bg: #0c0506; }
:is(.ash, .ab-root)[data-abform="dreieck"] { --ab-c: #c6f25a; --ab-c2: #6e9e12; --ab-ink: #f6ffe6; --ab-mute: rgba(246,255,230,0.58); --ab-line: rgba(246,255,230,0.12); --ab-bg: #060904; }
:is(.ash, .ab-root)[data-abform="puls"] { --ab-c: #4fe0d0; --ab-c2: #0b8a7e; --ab-ink: #e8fffc; --ab-mute: rgba(232,255,252,0.58); --ab-line: rgba(232,255,252,0.12); --ab-bg: #030a09; }
:is(.ash, .ab-root)[data-abform="aura"] { --ab-c: #f6d77c; --ab-c2: #b88a1e; --ab-ink: #fffaea; --ab-mute: rgba(255,250,234,0.58); --ab-line: rgba(255,250,234,0.14); --ab-bg: #0a0803; }

/* ---------- Bühne (auch in den Kacheln auf /atem-shots) ---------- */
.ab-root { position: relative; display: grid; grid-template-areas: 'word' 'stage'; grid-template-rows: auto 1fr; justify-items: center; align-items: center; color: var(--ab-ink); }
.ab-word { grid-area: word; min-height: 40px; font-family: 'Barlow Condensed', 'Manrope', sans-serif; font-weight: 700; font-size: 34px; line-height: 40px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ab-ink);
  text-shadow: 0 0 24px color-mix(in srgb, var(--ab-c) 55%, transparent); text-align: center; }
.ab-stage { grid-area: stage; width: min(76vw, 300px); aspect-ratio: 1; transition: opacity .4s; }
.is-abpause .ab-stage { opacity: .45; }
.ab-mid { grid-area: stage; display: flex; flex-direction: column; align-items: center; gap: 2px; pointer-events: none; }
.ab-mid b { font-family: 'Anton', 'Manrope', sans-serif; font-weight: 400; font-size: 64px; line-height: 1; color: var(--ab-ink); font-variant-numeric: tabular-nums; }
.ab-mid b:empty { display: none; }
.ab-mid span { font-family: 'Barlow Condensed', 'Manrope', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ab-mute); }
.ab-root[data-abform="welle"] .ab-mid { align-self: start; margin-top: 4%; }
.ab-root[data-abform="welle"] .ab-mid b { font-size: 46px; }
.ab-root:is([data-abform="strahl"], [data-abform="spirale"], [data-abform="puls"], [data-abform="aura"]) .ab-mid { align-self: end; margin-bottom: -6px; flex-direction: row; gap: 10px; align-items: baseline; }
.ab-root:is([data-abform="strahl"], [data-abform="spirale"], [data-abform="puls"], [data-abform="aura"]) .ab-mid b { font-size: 40px; }
.ab-root[data-abform="dreieck"] .ab-mid { align-self: start; margin-top: 30%; }
.ab-svg { width: 100%; height: 100%; overflow: visible; }
.ab-track { fill: none; stroke: var(--ab-line); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.ab-trail { fill: none; stroke: var(--ab-c); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; transition: opacity .4s; }
.ab-node { fill: var(--ab-line); }
.ab-dot { fill: #fff; stroke: var(--ab-c); stroke-width: 3; }
.ab-lung { transition: opacity .4s; }
.ab-side { font-family: 'Barlow Condensed', 'Manrope', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; fill: var(--ab-mute); transition: fill .3s; }
.ab-side.is-on { fill: var(--ab-c); }
.ab-arc { fill: none; stroke: var(--ab-line); stroke-width: 10; stroke-linecap: round; transition: stroke .3s; }
.ab-arc.is-on { stroke: color-mix(in srgb, var(--ab-c) 26%, transparent); }
.ab-wave { stroke-width: 3.5; }
.ab-now { stroke: var(--ab-line); stroke-width: 1.5; stroke-dasharray: 3 6; }
.ab-tick { stroke: var(--ab-line); stroke-width: 5; stroke-linecap: round; transition: stroke .25s; }
.ab-tick.is-done { stroke: color-mix(in srgb, var(--ab-c) 70%, transparent); }
.ab-tick.is-on { stroke: #fff; }
.ab-hold { stroke-width: 3; stroke: color-mix(in srgb, var(--ab-c) 80%, white); }
.ab-beam { fill: none; }
.ab-beam-mark { stroke-dasharray: 3 5; }
.ab-beam-fill { fill: var(--ab-c); stroke: none; }
.ab-aura { stroke-width: 2; stroke: color-mix(in srgb, var(--ab-c) 40%, transparent); }

/* ---------- Karte auf den Ratgeberseiten: der App-Player im Kleinen ---------- */
.ash { position: relative; display: flex; flex-direction: column; align-items: center; margin: 2rem 0 2.5rem; padding: 1.5rem 1.25rem 1.4rem; overflow: hidden; border-radius: 24px; border: 1px solid var(--ab-line); color: var(--ab-ink); text-align: center;
  background: radial-gradient(ellipse 90% 55% at 50% 44%, color-mix(in srgb, var(--ab-c2) calc(6% + var(--ab-f, 0.3) * 22%), transparent), transparent 72%), var(--ab-bg); }
.ash > a { color: var(--ab-ink); }
.ash__kick { display: block; font-family: 'Barlow Condensed', 'Manrope', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ab-mute); }
.ash__title { display: block; margin: 6px 0 0; font-family: 'Barlow Condensed', 'Manrope', sans-serif; font-weight: 700; font-size: 30px; line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ab-ink); }
.ash__sub { display: block; margin-top: 6px; font-size: 13px; color: var(--ab-mute); }
.ash__ab { width: 100%; margin-top: 14px; min-height: 340px; }

.ash__klang { display: flex; justify-content: center; gap: 6px; margin: 22px 0 0; }
.ash__klang button { min-height: 30px; padding: 6px 12px 5px; border-radius: 999px; background: none; border: 1px solid transparent; color: var(--ab-mute); cursor: pointer;
  font: 700 12px/1 'Barlow Condensed', 'Manrope', sans-serif; letter-spacing: 0.14em; text-transform: uppercase; }
.ash__klang button.is-on { color: var(--ab-ink); border-color: var(--ab-line); }

.ash__ctl { display: grid; justify-items: center; gap: 12px; width: 100%; max-width: 340px; margin-top: 14px; }
.ash__play { position: relative; width: 70px; height: 70px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: var(--ab-c);
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--ab-c) 8%, transparent), 0 0 40px -6px color-mix(in srgb, var(--ab-c) 50%, transparent); transition: transform .2s; }
.ash__play:hover { transform: scale(1.04); }
.ash__play::before { content: ''; position: absolute; left: 50%; top: 50%; translate: -38% -50%; border-left: 20px solid var(--ab-bg); border-top: 12px solid transparent; border-bottom: 12px solid transparent; }
.ash.is-playing .ash__play::before { translate: -50% -50%; width: 18px; height: 22px; border: 0; border-left: 6px solid var(--ab-bg); border-right: 6px solid var(--ab-bg); box-sizing: border-box; }
.ash__seek { width: 100%; height: 4px; border-radius: 4px; background: var(--ab-line); overflow: hidden; }
.ash__seek i { display: block; width: 0; height: 100%; background: var(--ab-c); }
.ash__times { display: flex; justify-content: space-between; width: 100%; margin-top: -6px; font-size: 12px; color: var(--ab-mute); font-variant-numeric: tabular-nums; }

/* Ende der Probe: Kasten über der Bühne */
.ash__end { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 2; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 1.5rem;
  background: color-mix(in srgb, var(--ab-bg) 86%, transparent); backdrop-filter: blur(3px); }
.ash.is-done .ash__end { display: flex; }
.ash__end p { margin: 0 !important; max-width: 24rem; font-size: 1.05rem !important; line-height: 1.5 !important; color: var(--ab-ink) !important; }
.ash__buy { display: inline-flex; align-items: center; min-height: 48px; padding: 0 26px; border-radius: 999px; background: var(--ab-c); color: var(--ab-bg) !important; text-decoration: none !important;
  font: 700 16px/1 'Barlow Condensed', 'Manrope', sans-serif; letter-spacing: 0.12em; text-transform: uppercase; box-shadow: 0 0 40px -8px color-mix(in srgb, var(--ab-c) 60%, transparent); }
.ash__again { padding: 0; border: 0; background: none; cursor: pointer; font: 600 13px/1 'Barlow Condensed', 'Manrope', sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ab-mute); text-decoration: underline; text-underline-offset: 3px; }

.ash__note { margin: 18px 0 0 !important; max-width: 30rem; font-size: 0.92rem !important; line-height: 1.55 !important; color: var(--ab-mute) !important; }
.ash__note a { color: var(--ab-c) !important; font-weight: 600; text-decoration: none !important; white-space: nowrap; }

@media (max-width: 560px) {
  .ash { padding: 1.25rem 0.9rem 1.2rem; }
  .ash__ab { min-height: 300px; }
  .ab-stage { width: min(72vw, 260px); }
  .ab-word { font-size: 28px; }
  .ash__title { font-size: 26px; }
  .ash__buy { padding: 0 18px; font-size: 14px; white-space: nowrap; }
}

/* ---------- CTA-Kasten „Atem-Shots“ für Ratgeber (seit 28.10.2026, zuerst auf /atemuebungen-zum-einschlafen) ----------
   <div class="ash-cta"><div class="ash-cta__art"><img …></div><div class="ash-cta__body"><span class="ash-cta__kick">…</span><h3>…</h3><p>…</p>
   <a class="ash-cta__btn" href="/atem-shots" data-ash-cta>…</a><span class="ash-cta__foot">…</span></div></div> */
.ash-cta { display: grid; grid-template-columns: minmax(0, 1fr); margin: 2.5rem 0; overflow: hidden; border-radius: 24px; background: #05060d; border: 1px solid rgba(238,244,255,0.12); color: #eef4ff; }
.ash-cta__art { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; background: #05060d; }
.ash-cta__art img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; margin: 0 !important; border-radius: 0 !important; }
.ash-cta__body { display: flex; flex-direction: column; align-items: flex-start; padding: 1.6rem 1.5rem 1.7rem; }
.ash-cta__kick { font-family: 'Barlow Condensed', 'Manrope', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase; color: #9fd6ff; }
.ash-cta h3 { margin: 0.5rem 0 0.7rem !important; font-family: var(--font-headline, 'Manrope'), sans-serif; font-weight: 800; font-size: clamp(1.3rem, 2.6vw, 1.6rem); line-height: 1.2; letter-spacing: -0.02em; color: #eef4ff; }
.ash-cta p { margin: 0 0 1.3rem !important; font-size: 1rem !important; line-height: 1.6 !important; color: rgba(238,244,255,0.72) !important; }
.ash-cta__btn { display: inline-flex; align-items: center; min-height: 50px; padding: 0 28px; border-radius: 999px; background: #9fd6ff; color: #05060d !important; text-decoration: none !important;
  font: 700 17px/1 'Barlow Condensed', 'Manrope', sans-serif; letter-spacing: 0.12em; text-transform: uppercase; box-shadow: 0 0 40px -8px rgba(159,214,255,0.6); }
.ash-cta__btn:hover { background: #c4e6ff; }
.ash-cta__foot { margin-top: 0.9rem; font-size: 0.85rem; color: rgba(238,244,255,0.56); }
@media (min-width: 720px) {
  .ash-cta { grid-template-columns: 240px minmax(0, 1fr); }
  .ash-cta__art { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(3, minmax(0, 1fr)); }
  .ash-cta__art img { aspect-ratio: auto; height: 100%; }
  .ash-cta__body { justify-content: center; padding: 2rem 2.2rem; }
}